/* Marketing surface (header, footer, landing) on the Frost tokens in tokens.css.
   Motion is transform/opacity only; static/js/motion.js drives reveal, parallax,
   tilt and the stacking cards; everything stops under prefers-reduced-motion. */

/* ---------- header ---------- */
.mk-skip { position: absolute; left: -999px; top: 8px; background: var(--surface-0); padding: 8px 12px; border: 1px solid var(--hairline); border-radius: var(--radius); z-index: 100; }
.mk-skip:focus { left: 8px; }
.mk-head { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--surface-0) 94%, transparent); border-bottom: 1px solid transparent; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.mk-head.is-scrolled { border-bottom-color: var(--hairline); }
.mk-head-in { max-width: var(--content-max); margin: 0 auto; min-height: var(--topbar-h); padding: 0 var(--space-6); display: flex; align-items: center; gap: var(--space-8); }
.mk-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; color: var(--text-0); white-space: nowrap; flex: none; }
.mk-brand:hover { color: var(--text-0); }
.mk-mark { width: 30px; height: 30px; border-radius: 8px; background: var(--surface-inverse); position: relative; flex: none; }
.mk-mark::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--surface-0); }
.mk-mark::before { content: ""; position: absolute; left: 11px; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--brand); z-index: 1; }
.mk-nav { display: flex; gap: var(--space-2); }
.mk-nav a { padding: 8px 12px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; color: var(--text-1); }
.mk-nav a:hover { background: var(--surface-2); color: var(--text-0); }
.mk-head-r { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }
.mk-inline { display: inline; margin: 0; }
.mk-link { font-size: 14px; font-weight: 600; color: var(--text-1); padding: 8px 6px; }
.mk-link:hover { color: var(--text-0); }
.mk-link-btn { background: none; border: 0; cursor: pointer; font: inherit; font-weight: 600; }
.mk-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 22px; border-radius: var(--radius-sm); background: var(--accent); color: var(--accent-fg); font-weight: 600; font-size: 15px; border: 1px solid transparent; white-space: nowrap; transition: background var(--dur) var(--ease), transform var(--dur) var(--ease-out); }
.mk-cta:hover { background: var(--brand-dark); color: #fff; transform: translateY(-1px); }
.mk-cta-sm { min-height: 40px; padding: 8px 16px; font-size: 14px; }
.mk-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px; border-radius: var(--radius-sm); background: var(--surface-0); color: var(--text-0); border: 1px solid var(--hairline-strong); font-weight: 600; font-size: 15px; white-space: nowrap; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.mk-btn:hover { background: var(--surface-1); border-color: var(--brand); color: var(--text-0); }
.mk-cta:focus-visible, .mk-btn:focus-visible, .mk-nav a:focus-visible, .mk-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* Flatten the old hero button used on Pricing: no glow, no gradient */
.btn-cta { background: var(--accent) !important; color: var(--accent-fg) !important; box-shadow: none !important; border-radius: var(--radius-sm) !important; }
.btn-cta:hover { background: var(--brand-dark) !important; transform: translateY(-1px) !important; }
.hero-section, .cta-strip { background: var(--surface-2) !important; }

/* mobile menu */
.mk-menu { display: none; position: relative; }
.mk-menu summary { list-style: none; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; border-radius: var(--radius-sm); }
.mk-menu summary::-webkit-details-marker { display: none; }
.mk-menu summary span { display: block; width: 20px; height: 2px; background: var(--text-0); margin: 2.5px 0; border-radius: 2px; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.mk-menu[open] summary span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mk-menu[open] summary span:nth-child(2) { opacity: 0; }
.mk-menu[open] summary span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mk-menu nav { position: absolute; right: 0; top: 52px; min-width: 240px; background: var(--surface-0); border: 1px solid var(--hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-overlay); padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.mk-menu nav a { padding: 12px 14px; border-radius: var(--radius-sm); font-weight: 500; }
.mk-menu nav a:hover { background: var(--surface-2); }
.mk-menu nav .mk-cta { margin-top: 6px; }

/* ---------- generic marketing main (pricing, docs) ---------- */
.mk-main { max-width: var(--content-max); margin: 0 auto; padding: var(--space-12) var(--space-6) var(--space-20); }

/* ---------- footer ---------- */
.mk-foot { border-top: 1px solid var(--hairline); background: var(--surface-1); margin-top: var(--space-20); }
.mk-foot-in { max-width: var(--content-max); margin: 0 auto; padding: var(--space-16) var(--space-6) var(--space-10); display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--space-10); }
.mk-foot-brand p { margin: var(--space-4) 0 var(--space-5); max-width: 40ch; color: var(--text-1); line-height: 1.55; }
.mk-foot-col { display: flex; flex-direction: column; gap: 10px; }
.mk-foot-col h3 { margin: 0 0 4px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.mk-foot-col a { color: var(--text-1); font-size: 14px; }
.mk-foot-col a:hover { color: var(--brand-dark); }
.mk-foot-line { max-width: var(--content-max); margin: 0 auto; padding: var(--space-5) var(--space-6) var(--space-8); border-top: 1px solid var(--hairline); display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; font-size: 12px; color: var(--text-2); }

/* ---------- landing shared ---------- */
.lp { overflow-x: clip; }
.lp-wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--space-6); }
.lp-center { text-align: center; max-width: 60ch; margin: 0 auto; }
.lp-h1 { margin: var(--space-4) 0 0; font-family: var(--font-serif); font-weight: 600; font-size: clamp(40px, 5.2vw, 66px); line-height: 1.04; color: var(--text-0); max-width: 14ch; }
.lp-h1 em { font-style: italic; color: var(--brand); }
.lp-h2 { margin: var(--space-3) 0 var(--space-4); font-family: var(--font-serif); font-weight: 600; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.1; color: var(--text-0); }
.lp-lede { margin: var(--space-6) 0 0; max-width: 46ch; font-size: 18px; line-height: 1.55; color: var(--text-1); }
.lp-p { margin: 0 0 var(--space-4); max-width: 52ch; font-size: 16px; line-height: 1.6; color: var(--text-1); }
.lp-center .lp-p { margin-left: auto; margin-right: auto; }
.lp-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-8); }
.lp-actions-center { justify-content: center; }
.lp-fine { margin-top: var(--space-4); font-size: 13px; color: var(--text-2); }
.lp-card { background: var(--surface-0); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-6) var(--space-8); height: 100%; }
.lp-card h3 { margin: var(--space-4) 0 var(--space-2); font-size: 20px; font-weight: 600; line-height: 1.3; }
.lp-card p { margin: 0; color: var(--text-1); line-height: 1.6; }
.lp-num { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 50%; background: var(--brand-subtle); color: var(--brand-dark); font-weight: 700; font-size: 13px; }

/* reveal (JS adds .in when the element enters the viewport) */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
[data-reveal].in { opacity: 1; transform: none; }
.no-motion [data-reveal] { opacity: 1; transform: none; transition: none; }
/* parallax wrappers get transforms from JS; keep them cheap */
[data-speed] { will-change: auto; }

/* ---------- hero ---------- */
.lp-hero { padding: var(--space-16) 0 var(--space-12); background: var(--surface-2); border-bottom: 1px solid var(--hairline); }
.lp-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--space-10); align-items: center; }
.lp-hero-art { perspective: 1400px; min-height: 520px; display: grid; place-items: center; }
.globe-scene { position: relative; width: 420px; height: 500px; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s var(--ease-out); }
.globe { position: absolute; left: 30px; top: 20px; width: 360px; height: 360px; border-radius: 50%; animation: floaty 7s ease-in-out infinite; transform-style: preserve-3d; }
.globe-inner { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 72%, #ffffff 0%, #eaf2f8 46%, #d8e6f0 100%); transform-style: preserve-3d; }
[data-theme="dark"] .globe-inner { background: radial-gradient(circle at 50% 72%, #22313f 0%, #1a2733 50%, #142030 100%); }
.globe-inner::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 14%; height: 22%; border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.95), rgba(223,230,236,.4) 70%, transparent 72%); }
[data-theme="dark"] .globe-inner::after { background: radial-gradient(ellipse at 50% 40%, rgba(233,238,243,.25), rgba(36,51,63,.3) 70%, transparent 72%); }
.globe-glass { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; border: 1px solid rgba(255,255,255,.8); box-shadow: inset 0 -30px 60px rgba(31,111,156,.10), inset 0 24px 40px rgba(255,255,255,.55), 0 30px 60px -30px rgba(20,32,43,.35); background: radial-gradient(circle at 30% 24%, rgba(255,255,255,.85) 0%, rgba(255,255,255,.35) 18%, rgba(255,255,255,0) 42%), linear-gradient(160deg, rgba(255,255,255,.28), rgba(255,255,255,0) 50%, rgba(31,111,156,.08)); }
[data-theme="dark"] .globe-glass { border-color: rgba(233,238,243,.28); box-shadow: inset 0 -30px 60px rgba(95,168,211,.10), inset 0 24px 40px rgba(255,255,255,.08), 0 30px 60px -30px rgba(0,0,0,.7); }
.globe-neck { position: absolute; left: 150px; top: 372px; width: 120px; height: 18px; border-radius: 4px 4px 0 0; background: var(--surface-inverse); opacity: .9; }
.globe-base { position: absolute; left: 90px; top: 388px; width: 240px; height: 58px; border-radius: 14px 14px 40px 40px / 14px 14px 30px 30px; background: var(--surface-inverse); box-shadow: 0 24px 40px -18px rgba(20,32,43,.5); }
.globe-base::after { content: "Agile Snowglobe"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--surface-0); font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.mini-post { position: absolute; width: 150px; padding: 12px; border-radius: 10px; background: #ffffff; border: 1px solid #dfe6ec; box-shadow: 0 18px 30px -18px rgba(20,32,43,.35); display: flex; flex-direction: column; gap: 6px; }
[data-theme="dark"] .mini-post { background: #16222e; border-color: #24333f; }
.mini-post.p1 { left: 118px; top: 96px; transform: translateZ(60px) rotate(-2deg); z-index: 3; }
.mini-post.p2 { left: 62px; top: 132px; transform: translateZ(10px) rotate(4deg) scale(.9); z-index: 2; opacity: .95; }
.mini-post.p3 { left: 176px; top: 150px; transform: translateZ(-30px) rotate(-6deg) scale(.82); z-index: 1; opacity: .9; }
.mp-img { height: 46px; border-radius: 6px; background: linear-gradient(135deg, #14202b, #1f6f9c); }
.mp-t { height: 9px; width: 85%; border-radius: 4px; background: #14202b; opacity: .85; }
[data-theme="dark"] .mp-t { background: #e9eef3; }
.mp-l { height: 6px; border-radius: 3px; background: #dfe6ec; }
[data-theme="dark"] .mp-l { background: #2c3d4b; }
.w50 { width: 50%; } .w60 { width: 60%; } .w70 { width: 70%; } .w80 { width: 80%; }
.snow { position: absolute; inset: 0; pointer-events: none; }
.snow i { position: absolute; top: -8px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; background: #ffffff; opacity: .9; animation: fall var(--t) linear infinite; animation-delay: calc(var(--d) * -1); }
[data-theme="dark"] .snow i { background: #e9eef3; }
@keyframes fall { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 10% { opacity: .95; } 50% { transform: translate3d(8px, 190px, 0); } 100% { transform: translate3d(-6px, 380px, 0); opacity: 0; } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.orbit { position: absolute; }
.o1 { left: -40px; top: 70px; } .o2 { right: -60px; top: 40px; } .o3 { right: -70px; top: 300px; } .o4 { left: -60px; top: 330px; }
.lp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: var(--surface-0); border: 1px solid var(--hairline); box-shadow: 0 12px 24px -14px rgba(20,32,43,.35); font-size: 12px; color: var(--text-1); white-space: nowrap; }
.lp-chip b { color: var(--text-0); font-weight: 600; }
.lp-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--success); }

/* ---------- proof strip ---------- */
.lp-proof { padding: var(--space-12) 0; }
.lp-proof-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
.lp-proof-item { padding: var(--space-5) var(--space-6); border-left: 1px solid var(--hairline); }
.lp-proof-item:first-child { border-left: 0; }
.lp-proof-big { font-family: var(--font-serif); font-weight: 600; font-size: 30px; line-height: 1.1; color: var(--text-0); }
.lp-proof-small { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--text-2); max-width: 26ch; }

/* ---------- how it works: sticky copy + stacking cards ---------- */
.lp-how { padding: var(--space-20) 0; background: var(--surface-1); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.lp-how-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-16); align-items: start; }
.lp-how-copy { position: sticky; top: 112px; align-self: start; }
.lp-sticky { position: static; }
.lp-steps { list-style: none; margin: 0; padding: 0 0 var(--space-12); display: flex; flex-direction: column; gap: var(--space-6); }
.step-card { position: sticky; top: calc(96px + var(--i) * 16px); background: var(--surface-0); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: var(--space-8); min-height: 300px; box-shadow: 0 24px 40px -30px rgba(20,32,43,.35); transform-origin: top center; transform: scale(calc(1 - var(--p, 0) * 0.05)) translateY(calc(var(--p, 0) * -8px)); opacity: calc(1 - var(--p, 0) * 0.5); }
.step-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-6); }
.step-n { font-family: var(--font-serif); font-size: 44px; line-height: 1; color: var(--brand); font-weight: 600; }
.step-ico { width: 40px; height: 40px; padding: 8px; border-radius: 10px; background: var(--brand-subtle); color: var(--brand-dark); }
.step-card h3 { margin: 0 0 var(--space-3); font-size: 26px; font-weight: 600; line-height: 1.2; }
.step-card p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text-1); max-width: 46ch; }

/* ---------- grounded trio ---------- */
.lp-ground { padding: var(--space-20) 0; }
.lp-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-12); align-items: start; }

/* ---------- bento ---------- */
.lp-features { padding: var(--space-20) 0; background: var(--surface-2); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.lp-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-12); }
.lp-tile { background: var(--surface-0); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: var(--space-6); min-height: 200px; display: flex; flex-direction: column; justify-content: flex-end; transition: border-color var(--dur) var(--ease), transform var(--dur-slow) var(--ease-out); }
.lp-tile:hover { border-color: var(--brand); transform: translateY(-3px); }
.lp-tile-wide { grid-column: span 2; }
.lp-tile h3 { margin: 0 0 6px; font-size: 18px; font-weight: 600; line-height: 1.3; }
.lp-tile p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-1); }
.lp-tile-art { margin-bottom: var(--space-5); }
.mini-banner { aspect-ratio: 1680 / 882; max-height: 150px; border-radius: 10px; background: linear-gradient(135deg, #14202b, #1f4a66 60%, #1f6f9c); padding: 18px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; }
.mb-bar { width: 34px; height: 4px; border-radius: 2px; background: var(--ember); }
.mb-title { height: 12px; width: 62%; border-radius: 4px; background: rgba(255,255,255,.92); }
.mb-title.short { width: 44%; }

/* ---------- sample band ---------- */
.lp-sample { padding: var(--space-20) 0; }
.lp-sample-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-16); align-items: center; }
.lp-progress { list-style: none; margin: 0; padding: var(--space-6) var(--space-8); background: var(--surface-0); border: 1px solid var(--hairline); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: 14px; }
.lp-progress li { display: flex; align-items: center; gap: 12px; font-weight: 500; color: var(--text-2); }
.lp-progress li.done, .lp-progress li.active { color: var(--text-0); font-weight: 600; }
.lp-progress .dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--hairline-strong); flex: none; box-sizing: border-box; }
.lp-progress li.done .dot { background: var(--success); border-color: var(--success); }
.lp-progress li.active .dot { border: 3px solid var(--brand); box-shadow: 0 0 0 5px var(--brand-subtle); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 5px var(--brand-subtle); } 50% { box-shadow: 0 0 0 9px var(--brand-subtle); } }

/* ---------- plans ---------- */
.lp-plans { padding: var(--space-20) 0; background: var(--surface-1); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.lp-plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-5); margin: var(--space-12) 0 var(--space-6); }
.lp-plan { position: relative; background: var(--surface-0); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.lp-plan.is-featured { border-color: var(--brand); }
.lp-plan-tag { position: absolute; top: -12px; left: var(--space-6); padding: 3px 10px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 12px; font-weight: 600; }
.lp-plan h3 { margin: 0; font-family: var(--font-serif); font-size: 22px; font-weight: 600; }
.lp-price { font-size: 32px; font-weight: 600; color: var(--ember); font-variant-numeric: tabular-nums; }
.lp-price span { font-size: 14px; font-weight: 400; color: var(--text-2); }
.lp-plan ul { margin: 0 0 var(--space-3); padding-left: 18px; color: var(--text-1); font-size: 14px; line-height: 1.7; flex-grow: 1; }
.lp-plan .mk-cta, .lp-plan .mk-btn { width: 100%; }

/* ---------- faq ---------- */
.lp-faq { padding: var(--space-20) 0; }
.lp-faq-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-16); align-items: start; }
.lp-faq-list { display: flex; flex-direction: column; gap: 10px; }
.lp-q { background: var(--surface-0); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 0 var(--space-6); transition: border-color var(--dur) var(--ease); }
.lp-q[open] { border-color: var(--brand); }
.lp-q summary { list-style: none; cursor: pointer; padding: var(--space-5) 0; font-weight: 600; font-size: 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.lp-q summary::-webkit-details-marker { display: none; }
.lp-q summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--text-2); transition: transform var(--dur) var(--ease); }
.lp-q[open] summary::after { transform: rotate(45deg); }
.lp-q p { margin: 0 0 var(--space-5); color: var(--text-1); line-height: 1.6; }

/* ---------- final ---------- */
.lp-final { padding: var(--space-24) 0 var(--space-20); background: var(--surface-inverse); color: var(--surface-0); }
.lp-final .lp-h2, .lp-final .lp-p { color: inherit; }
.lp-final .lp-p { opacity: .8; }
.lp-final .mk-cta { background: var(--surface-0); color: var(--surface-inverse); }
.lp-final .mk-cta:hover { background: var(--brand-light); color: var(--surface-inverse); }
.lp-final .mk-btn { background: transparent; color: inherit; border-color: rgba(255,255,255,.3); }
.lp-final .mk-btn:hover { border-color: #fff; color: #fff; }
.lp-final + .mk-foot { margin-top: 0; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .lp-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-proof-item:nth-child(3) { border-left: 0; }
}
@media (max-width: 900px) {
  .mk-nav, .mk-head-r .mk-link, .mk-head-r .mk-cta, .mk-head-r .mk-inline { display: none; }
  .mk-menu { display: block; }
  .lp-hero { padding: var(--space-10) 0; }
  .lp-hero-grid, .lp-how-grid, .lp-sample-grid, .lp-faq-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .lp-hero-art { min-height: 0; perspective: none; }
  .globe-scene { width: 300px; height: 360px; transform: none; }
  .globe { width: 260px; height: 260px; left: 20px; top: 10px; }
  .mini-post { transform: none !important; }
  .mini-post.p1 { left: 78px; top: 60px; } .mini-post.p2 { left: 40px; top: 96px; } .mini-post.p3 { left: 120px; top: 110px; }
  .globe-neck { left: 100px; top: 272px; } .globe-base { left: 50px; top: 288px; width: 200px; }
  .o1 { left: -10px; top: 20px; } .o2 { right: -10px; top: 0; } .o3 { right: -14px; top: 236px; } .o4 { left: -14px; top: 250px; }
  .lp-how-copy { position: static; }
  .step-card { position: relative; top: auto; min-height: 0; transform: none; opacity: 1; padding: var(--space-6); }
  .lp-trio { grid-template-columns: 1fr; }
  .mk-foot-in { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .lp-bento { grid-template-columns: 1fr; }
  .lp-tile-wide { grid-column: auto; }
  .lp-proof-grid { grid-template-columns: 1fr; }
  .lp-proof-item { border-left: 0; padding: var(--space-4) 0; border-top: 1px solid var(--hairline); }
  .lp-proof-item:first-child { border-top: 0; }
  .mk-foot-in { grid-template-columns: 1fr; }
  .lp-actions .mk-cta, .lp-actions .mk-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .globe, .snow i, .lp-progress li.active .dot { animation: none; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .globe-scene, .mk-cta, .lp-tile { transition: none; }
}

/* ---------- pricing ---------- */
.pr-hero { padding: var(--space-16) 0 var(--space-10); text-align: center; }
.pr-hero .lp-h1 { margin: var(--space-3) auto 0; max-width: 18ch; }
.pr-hero .lp-lede { margin: var(--space-5) auto 0; }
.pr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-5); margin: var(--space-10) 0 var(--space-6); align-items: stretch; }
.pr-table-wrap { overflow-x: auto; background: var(--surface-0); border: 1px solid var(--hairline); border-radius: var(--radius-lg); }
.pr-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 720px; }
.pr-table th, .pr-table td { padding: 12px 16px; border-bottom: 1px solid var(--hairline); text-align: center; vertical-align: middle; }
.pr-table th:first-child, .pr-table td:first-child { text-align: left; padding-left: 20px; color: var(--text-1); }
.pr-table thead th { background: var(--surface-1); font-size: 12px; font-weight: 600; color: var(--text-2); }
.pr-table thead th b { display: block; font-family: var(--font-serif); font-size: 18px; font-weight: 600; color: var(--text-0); }
.pr-table th.is-featured, .pr-table td.is-featured { background: var(--brand-subtle); }
.pr-table tbody tr:last-child td { border-bottom: 0; }
.pr-yes { display: inline-block; width: 18px; height: 18px; border-radius: 50%; background: var(--success); color: #fff; font-size: 12px; line-height: 18px; font-weight: 700; }
.pr-no { color: var(--text-3); }
.pr-inc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-10); }
.pr-inc div { padding: var(--space-5) var(--space-6); background: var(--surface-0); border: 1px solid var(--hairline); border-radius: var(--radius-lg); }
.pr-inc b { display: block; margin-bottom: 4px; }
.pr-inc p { margin: 0; font-size: 14px; color: var(--text-1); line-height: 1.55; }
.lp-section { padding: var(--space-16) 0; }
.lp-section.alt { background: var(--surface-1); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
@media (max-width: 900px) { .pr-inc { grid-template-columns: 1fr; } .pr-hero { padding: var(--space-10) 0 var(--space-6); } }

/* ---------- API docs ---------- */
.docs-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-12); align-items: start; padding: var(--space-10) 0 var(--space-20); }
.docs-toc { position: sticky; top: calc(var(--topbar-h) + var(--space-5)); max-height: calc(100vh - var(--topbar-h) - 40px); overflow-y: auto; }
.docs-toc ol { list-style: none; padding: 0; margin: 0 0 var(--space-4); display: flex; flex-direction: column; gap: 2px; }
.docs-toc a { display: block; padding: 6px 10px; border-radius: var(--radius-sm); font-size: 14px; color: var(--text-1); border-left: 2px solid transparent; }
.docs-toc a:hover { background: var(--surface-2); color: var(--text-0); }
.docs-toc a.active { color: var(--brand-dark); border-left-color: var(--brand); background: var(--brand-subtle); }
.docs-toc .sub a { padding-left: 22px; font-size: 13px; color: var(--text-2); }
.docs { min-width: 0; }
.docs-head { margin-bottom: var(--space-10); }
.docs-head .lp-h1 { max-width: none; font-size: clamp(34px, 4vw, 48px); }
.docs h2 { font-family: var(--font-serif); font-size: 30px; font-weight: 600; margin: var(--space-16) 0 var(--space-4); padding-top: var(--space-6); border-top: 1px solid var(--hairline); scroll-margin-top: calc(var(--topbar-h) + var(--space-5)); }
.docs h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.docs h3 { font-size: 20px; font-weight: 600; margin: var(--space-10) 0 var(--space-3); scroll-margin-top: calc(var(--topbar-h) + var(--space-5)); }
.docs p, .docs li { font-size: 15px; line-height: 1.65; color: var(--text-1); }
.docs p { margin: 0 0 var(--space-4); max-width: 70ch; }
.docs ul { padding-left: 20px; margin: 0 0 var(--space-4); }
.docs code { background: var(--surface-2); padding: 1px 6px; border-radius: 4px; font-size: 0.9em; color: var(--text-0); }
.docs pre { background: var(--surface-inverse); color: var(--surface-0); padding: var(--space-4) var(--space-5); border-radius: var(--radius); overflow-x: auto; margin: 0 0 var(--space-5); font-size: 13px; line-height: 1.6; }
[data-theme="dark"] .docs pre { background: #0b1219; border: 1px solid var(--hairline); }
.docs pre code { background: none; padding: 0; color: inherit; font-size: inherit; }
.endpoint { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 var(--space-3); }
.verb { display: inline-block; min-width: 58px; text-align: center; padding: 3px 8px; border-radius: 6px; font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .02em; background: var(--brand-subtle); color: var(--brand-dark); }
.verb.post { background: var(--success); color: #fff; } .verb.patch { background: var(--warning); color: #fff; } .verb.delete { background: var(--danger); color: #fff; }
.path { font-family: var(--font-mono); font-size: 14px; color: var(--text-0); overflow-wrap: anywhere; }
.scope { font-family: var(--font-mono); font-size: 12px; color: var(--text-2); }
.params { width: 100%; border-collapse: collapse; font-size: 14px; margin: 0 0 var(--space-5); }
.params th { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--hairline); color: var(--text-2); font-size: 12px; font-weight: 600; }
.params td { padding: 10px 12px; border-bottom: 1px solid var(--hairline); vertical-align: top; color: var(--text-1); line-height: 1.5; }
.params td.name { font-family: var(--font-mono); color: var(--text-0); white-space: nowrap; }
.params td.type { font-family: var(--font-mono); color: var(--text-2); font-size: 12px; white-space: nowrap; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--hairline); }
.tabs button { background: none; border: 0; padding: 9px 12px; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-2); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs button[aria-selected="true"] { color: var(--brand-dark); border-bottom-color: var(--brand); }
.tab-panel { display: none; } .tab-panel[aria-hidden="false"] { display: block; }
.tab-panel pre { border-radius: 0 0 var(--radius) var(--radius); margin-top: 0; }
.callout { padding: 12px 16px; border-radius: var(--radius); background: var(--brand-subtle); border: 1px solid transparent; color: var(--text-0); margin: 0 0 var(--space-5); font-size: 14px; line-height: 1.55; }
.callout.warn { background: rgba(138, 90, 18, .10); }
@media (max-width: 1024px) { .docs-layout { grid-template-columns: 1fr; gap: var(--space-8); } .docs-toc { position: static; max-height: none; } }

/* ---------- inside one post: receipt + scroll-drawn timeline ---------- */
.lp-inside { padding: var(--space-20) 0; background: var(--surface-0); border-bottom: 1px solid var(--hairline); }
.lp-inside-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: var(--space-16); align-items: start; margin-top: var(--space-12); }
.lp-receipt-wrap { position: sticky; top: 96px; align-self: start; }
.lp-receipt { background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); }
.lp-receipt-head { display: flex; flex-direction: column; gap: 2px; padding-bottom: var(--space-4); margin-bottom: var(--space-2); border-bottom: 1px solid var(--hairline); }
.lp-receipt-head b { font-family: var(--font-serif); font-size: 20px; font-weight: 600; }
.lp-receipt-head span { font-size: 12px; color: var(--text-2); }
.lp-receipt-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--hairline); font-size: 14px; color: var(--text-1); }
.lp-receipt-row b { color: var(--text-0); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lp-receipt-foot { margin: var(--space-4) 0; font-size: 12px; line-height: 1.5; color: var(--text-2); }
.tl { position: relative; list-style: none; margin: 0; padding: 0 0 0 56px; display: flex; flex-direction: column; gap: var(--space-6); }
.tl::before { content: ""; position: absolute; left: 19px; top: 8px; bottom: 8px; width: 2px; background: var(--hairline); border-radius: 2px; }
.tl-line { position: absolute; left: 19px; top: 8px; bottom: 8px; width: 2px; background: var(--brand); border-radius: 2px; transform-origin: top; transform: scaleY(var(--tp, 0)); }
.tl-item { position: relative; }
.tl-n { position: absolute; left: -56px; top: 14px; width: 40px; height: 40px; border-radius: 50%; background: var(--surface-0); border: 2px solid var(--hairline); display: grid; place-items: center; font-family: var(--font-serif); font-size: 15px; font-weight: 600; color: var(--text-2); }
.tl-item.in .tl-n { border-color: var(--brand); color: var(--brand-dark); transition: border-color .4s var(--ease), color .4s var(--ease); }
.tl-card { background: var(--surface-0); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-8); }
.tl-card h3 { margin: 0 0 6px; font-size: 22px; font-weight: 600; line-height: 1.25; }
.tl-sum { margin: 0 0 var(--space-4); font-size: 16px; line-height: 1.55; color: var(--text-1); }
.tl-card ul { margin: 0 0 var(--space-4); padding-left: 20px; }
.tl-card li { margin: 0 0 8px; font-size: 14px; line-height: 1.6; color: var(--text-1); }
.tl-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tl-tags span { font-family: var(--font-mono); font-size: 12px; padding: 3px 8px; border-radius: 6px; background: var(--surface-2); color: var(--text-2); }
@media (max-width: 1000px) {
  .lp-inside-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .lp-receipt-wrap { position: static; }
  .tl { padding-left: 44px; } .tl::before, .tl-line { left: 13px; }
  .tl-n { left: -44px; width: 28px; height: 28px; font-size: 12px; top: 18px; }
  .tl-card { padding: var(--space-5); }
}

/* ── Free tools (build step 4) ─────────────────────────────────────────── */
.tool-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--text-2); margin-bottom: var(--space-6); }
.tool-crumbs a { color: var(--text-1); }
.tool-hero { max-width: 64ch; margin-bottom: var(--space-8); }
.tool-hero .lp-h2 { margin-top: 0; }
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); }
.tool-card { color: inherit; text-decoration: none; justify-content: flex-start; gap: 8px; min-height: 0; }
.tool-card:hover { border-color: var(--brand); }
.tool-card h2 { margin: 0; font-size: 18px; font-weight: 600; }
.tool-card p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-1); }
.tool-limit { margin-top: auto; padding-top: 8px; font-size: 12px; color: var(--text-2); }
.tool-box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.tool-form { background: var(--surface-0); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: var(--space-6); display: grid; gap: 12px; }
.tool-label { font-weight: 600; font-size: 14px; }
.tool-form textarea { width: 100%; min-height: 220px; resize: vertical; padding: 12px 14px; border: 1px solid var(--hairline-strong); border-radius: var(--radius-sm); background: var(--surface-0); color: var(--text-0); font: 15px/1.6 var(--font-sans); }
.tool-form textarea:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.tool-meta { display: flex; justify-content: flex-end; font-size: 12px; color: var(--text-2); margin-top: -6px; }
.tool-meta .over { color: var(--danger); font-weight: 600; }
.tool-modes { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tool-modes legend { font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.tool-mode input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tool-mode span { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border: 1px solid var(--hairline-strong); border-radius: 999px; font-size: 14px; cursor: pointer; }
.tool-mode input:checked + span { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, var(--surface-0)); font-weight: 600; }
.tool-mode input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.tool-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tool-busy { display: none; font-size: 14px; color: var(--text-2); }
.tool-busy.htmx-request { display: inline; }
.tool-hint { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.tool-result:empty { display: none; }
.tool-out, .tool-pending, .tool-err { background: var(--surface-0); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: var(--space-6); display: grid; gap: 12px; }
.tool-err { border-color: var(--danger); color: var(--danger); font-weight: 600; }
.tool-pending { display: flex; align-items: center; gap: 12px; color: var(--text-1); }
.tool-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); flex: none; animation: tool-pulse 1.2s ease-in-out infinite; }
@keyframes tool-pulse { 50% { opacity: .3; } }
.tool-out-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tool-copy { min-height: 36px; padding: 6px 14px; font-size: 14px; }
.tool-text { white-space: pre-wrap; font-size: 15px; line-height: 1.65; color: var(--text-0); padding: 14px; border-radius: var(--radius-sm); background: var(--surface-1); }
/* result text reads at a comfortable measure (about 66 characters, 17px, 1.6) */
.tool-read { max-width: 66ch; font-size: 17px; line-height: 1.6; }
.tool-read ins { text-decoration: none; background: transparent; color: inherit; }
.tool-read.show-changes ins { background: color-mix(in srgb, var(--success) 20%, transparent); border-radius: 3px; box-shadow: 0 1px 0 color-mix(in srgb, var(--success) 55%, transparent); }
.tool-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tool-switch { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-1); cursor: pointer; min-height: 36px; }
.tool-switch input { width: 16px; height: 16px; accent-color: var(--brand); }
.tool-chip { display: inline-flex; padding: 2px 10px; border-radius: 999px; background: var(--surface-2); font-size: 12px; font-weight: 600; color: var(--text-1); }
.tool-ok { display: inline-flex; padding: 2px 8px; margin-right: 4px; border-radius: 999px; background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); font-size: 12px; font-weight: 600; }
.tool-compare { width: 100%; border-collapse: collapse; font-size: 14px; }
.tool-compare th, .tool-compare td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.tool-compare thead th { font-size: 12px; color: var(--text-2); font-weight: 600; }
.tool-compare tbody th { font-weight: 600; color: var(--text-1); }
.tool-compare td.up { color: var(--success); font-weight: 600; }
.tool-compare td.muted { color: var(--text-2); font-size: 13px; }
.tool-fixed { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--hairline); border-radius: var(--radius-sm); }
.tool-apply { justify-self: start; min-height: 36px; padding: 4px 14px; font: 600 13px/1 var(--font-sans); border-radius: 999px; border: 1px solid var(--hairline-strong); background: var(--surface-0); color: var(--text-0); cursor: pointer; }
.tool-apply:hover:not(:disabled) { border-color: var(--brand); }
.tool-apply:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.tool-apply:disabled { cursor: default; color: var(--text-2); }
.tool-findings li.done { border-left-color: var(--success); }
.tool-more summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--text-1); min-height: 36px; display: flex; align-items: center; }
.tool-more[open] summary { margin-bottom: 10px; }
.tool-option { display: grid; gap: 6px; }
.tool-option-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tool-flag { background: color-mix(in srgb, var(--warning) 20%, transparent); color: inherit; border-radius: 2px; }
.tool-flag-n { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; margin: 0 2px; padding: 0 5px; border-radius: 999px; background: color-mix(in srgb, var(--warning) 35%, var(--surface-0)); color: var(--text-0); font-size: 11px; font-weight: 700; line-height: 1; text-decoration: none; vertical-align: 2px; }
.tool-meter { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-1); }
.tool-meter-label, .tool-meter-word { font-weight: 600; }
.tool-meter-bar { flex: 1; max-width: 220px; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.tool-meter-bar span { display: block; height: 100%; background: var(--brand); border-radius: inherit; }
.tool-sum { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tool-findings { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tool-findings li { border-left: 3px solid var(--warning); padding: 4px 0 4px 12px; display: grid; gap: 4px; }
.tool-findings p { margin: 0; line-height: 1.55; }
.tool-tag { font-size: 12px; font-weight: 600; color: var(--text-2); }
.tool-mark { background: color-mix(in srgb, var(--danger) 14%, transparent); color: inherit; text-decoration: underline wavy var(--danger); text-underline-offset: 3px; border-radius: 2px; }
.tool-mark.fluency, .tool-mark.style { background: color-mix(in srgb, var(--brand) 14%, transparent); text-decoration-color: var(--brand); }
.tool-label-pill { display: inline-flex; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--surface-2); }
.tool-label-pill.strong-ai-patterns { background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--warning); }
.tool-label-pill.reads-natural { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }
.tool-sources { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tool-sources li { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; overflow-wrap: anywhere; }
.tool-sources span { color: var(--text-2); }
.tool-next { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-5) var(--space-6); border-radius: var(--radius-lg); background: var(--surface-1); border: 1px solid var(--hairline); margin-top: 12px; }
.tool-next p { margin: 0; color: var(--text-1); }
.tool-next-wide { margin-top: var(--space-16); }
.tool-next-wide h2 { margin: 0 0 6px; font-family: var(--font-serif); font-size: 26px; font-weight: 600; }
.tool-sec { margin-top: var(--space-16); }
.tool-sec.lp-faq-list { max-width: 860px; }
.tool-h2 { margin: 0 0 var(--space-5); font-family: var(--font-serif); font-size: 28px; font-weight: 600; }
.tool-how { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.tool-how li { background: var(--surface-0); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: var(--space-5); }
.tool-how h3 { margin: 0 0 6px; font-size: 16px; }
.tool-how p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-1); }
.tool-example { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: 10px; }
.tool-example > div { background: var(--surface-0); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: var(--space-5); }
.tool-example p { margin: 6px 0 0; line-height: 1.6; }
.tool-others { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tool-others a { display: inline-flex; min-height: 40px; align-items: center; padding: 8px 14px; border: 1px solid var(--hairline-strong); border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--text-0); }
@media (max-width: 900px) {
  .tool-box, .tool-example, .tool-how { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .tool-dot { animation: none; } }