/* EarPrompt landing. Brand direction A, "Marked script".
   A calm blue-white page, navy ink, one trust blue, and ONE loud thing: the highlighter.
   The line being spoken is highlighted wherever a script line appears. Yellow also means "do this now" on buttons.
   Schibsted Grotesk is the interface voice, Courier Prime is only for script lines and stage directions,
   Noto Sans Tamil carries Tamil. Light theme only. Every colour is a token on :root. */

@font-face { font-family: "Schibsted Grotesk"; src: url("assets/fonts/SchibstedGrotesk-Variable-latin.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("assets/fonts/CourierPrime-Regular-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("assets/fonts/CourierPrime-Italic-latin.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("assets/fonts/CourierPrime-Bold-latin.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Noto Sans Tamil"; src: url("assets/fonts/NotoSansTamil-Regular-tamil.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0964-0965, U+0B82-0BFA, U+200C-200D, U+20B9, U+25CC; }
@font-face { font-family: "Noto Sans Tamil"; src: url("assets/fonts/NotoSansTamil-SemiBold-tamil.woff2") format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; unicode-range: U+0964-0965, U+0B82-0BFA, U+200C-200D, U+20B9, U+25CC; }

:root {
  color-scheme: light;
  --ground: #F1F6FC;        /* page ground: airy blue-white */
  --sheet: #FFFFFF;         /* the script page, raised surfaces */
  --ink: #0E1F3D;           /* text, borders of controls */
  --quiet: #52627C;         /* quiet text: lines not being spoken */
  --blue: #2257C5;          /* brand blue: what EarPrompt says, links, marks */
  --marker: #FFD43B;        /* highlighter: the line being spoken, and the action buttons */
  --marker-press: #FFC91A;  /* highlighter under the pointer */
  --rec: #E5282D;           /* record red: only ever inside a record button */
  --rule: #C8D3E3;          /* hairlines */
  --margin-rule: #BCCDF0;   /* the margin line on the script page */
  --tint: #E3ECFA;          /* pale blue fill for the one quiet tag */
  --bezel: #050B18;         /* inner edge of the phone frame */
  --ui: "Schibsted Grotesk", "Noto Sans Tamil", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --script: "Courier Prime", "Noto Sans Tamil", "Courier New", Courier, ui-monospace, monospace;
  --ta: "Noto Sans Tamil", "Schibsted Grotesk", system-ui, sans-serif;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --w: 1160px;
  --gut: clamp(20px, 5vw, 56px);
  --r: 4px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--ground); }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 17px/1.55 var(--ui); padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: var(--gut); top: 12px; background: var(--marker); color: var(--ink); padding: 13px 16px; z-index: 200; font-weight: 600; }
.defs { position: absolute; }
[lang="ta"] { font-family: var(--ta); }

/* Type */
h1, h2, h3 { font-family: var(--ui); font-weight: 700; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(40px, 4.6vw, 66px); line-height: 1.18; letter-spacing: -.035em; }
h2 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.12; letter-spacing: -.03em; max-width: 20ch; }
h3 { font-size: 22px; line-height: 1.25; letter-spacing: -.015em; }
p { margin: 0; max-width: 60ch; }
.lede { font-size: 18px; color: var(--quiet); max-width: 34em; }
h2 + .lede { margin-top: 16px; }
.fine { font-size: 14px; color: var(--quiet); }

/* The highlighter. One uneven stroke per line of text, like a real marker pass. */
.mark { background: var(--marker); color: var(--ink); padding: .02em .14em .06em; margin-left: -.14em; -webkit-box-decoration-break: clone; box-decoration-break: clone; border-radius: 3px 9px 4px 7px; }

/* A stage direction: what EarPrompt says in your ear, set like a parenthetical in a script. */
.cue { font: italic 400 16px/1.4 var(--script); color: var(--quiet); display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }

/* Controls */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border: 2px solid var(--ink); border-radius: var(--r); background: var(--marker); color: var(--ink); font: 600 16px/1 var(--ui); text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .12s ease-out, background-color .15s ease-out; touch-action: manipulation; }
.btn:active { transform: scale(.97); }
@media (hover: hover) { .btn:hover { background: var(--marker-press); } }
.btn.small { min-height: 44px; padding: 0 16px; font-size: 15px; }
.btn[disabled] { background: var(--ground); color: var(--quiet); border-color: var(--quiet); cursor: default; }
.btn.quiet { background: transparent; }
@media (hover: hover) { .btn.quiet:hover { background: var(--sheet); } }

/* Logo: two brackets holding a highlighted line */
.logo { width: 44px; height: 26px; display: block; flex: none; }
.logo-mark { fill: var(--marker); }
.logo-bracket { fill: none; stroke: var(--blue); stroke-width: 2.6; stroke-linecap: round; }
.logo-line { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; }

/* Header. Port of 21st.dev "Morphing Scroll Navbar" (id 27428) by laziekiki: same sizes, curves and timings, our tokens.
   Without JS it is a plain header in the flow. */
.progress { display: none; }
.js .progress { display: block; position: fixed; z-index: 101; inset: 0 0 auto; height: 3px; background: var(--blue); transform: scaleX(0); transform-origin: 0 50%; will-change: transform; }
.top { display: flex; justify-content: center; padding: 0 20px; }
.js .top { position: fixed; z-index: 100; inset: env(safe-area-inset-top, 0px) 0 auto; pointer-events: none; }
.js body { padding-top: calc(72px + env(safe-area-inset-top, 0px)); }
.shell { pointer-events: auto; display: flex; align-items: center; justify-content: space-between; gap: 22px; width: 100%; max-width: calc(var(--w) + 40px); height: 72px; margin-top: 0; padding: 0 20px; border: 1px solid transparent; border-radius: 8px; background: transparent;
  transition: max-width .5s cubic-bezier(.34, 1.32, .5, 1), height .38s cubic-bezier(.34, 1.2, .5, 1), margin-top .38s ease, padding .38s ease, background-color .3s ease, border-color .3s ease, box-shadow .4s ease; }
.top.is-floating .shell { max-width: 960px; height: 60px; margin-top: 12px; padding: 0 8px 0 18px; border-color: var(--rule); background: color-mix(in srgb, var(--sheet) 88%, transparent); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); box-shadow: 0 12px 30px -22px color-mix(in srgb, var(--ink) 60%, transparent); }
.top.is-compact .shell { max-width: 540px; height: 56px; }
.brand { flex: none; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 700 21px/1 var(--ui); letter-spacing: -.02em; text-decoration: none; }
.links { display: flex; gap: 30px; max-width: 640px; overflow: hidden; opacity: 1; font-size: 15px; font-weight: 500; transition: max-width .45s cubic-bezier(.34, 1.2, .5, 1), opacity .28s ease, transform .3s ease, gap .35s ease; }
.top.is-compact .links { max-width: 0; gap: 0; opacity: 0; transform: translateY(-8px); pointer-events: none; visibility: hidden; }
.links a { position: relative; text-decoration: none; color: var(--ink); padding: 13px 0; white-space: nowrap; }
.links a::after { content: ""; position: absolute; inset: auto 0 8px; height: 2px; background: var(--blue); transform: scaleX(0); transform-origin: 0 50%; transition: transform .28s cubic-bezier(.2, .7, .2, 1); }
.links a[aria-current="location"]::after { transform: scaleX(1); }
@media (hover: hover) { .links a:hover::after { transform: scaleX(1); } }
.top .btn { flex: none; }
@media (max-width: 860px) { .links { display: none; } .top.is-floating .shell { max-width: 680px; } .top.is-compact .shell { max-width: 520px; } }
@media (max-width: 560px) {
  .top { padding: 0 10px; }
  .shell { gap: 12px; height: 64px; padding: 0 10px; }
  .top.is-floating .shell, .top.is-compact .shell { height: 58px; padding: 0 6px 0 12px; }
  .js body { padding-top: calc(64px + env(safe-area-inset-top, 0px)); }
}
main > section[id] { scroll-margin-top: 72px; }

/* Voice indicator. Port of 21st.dev "Audio Visualizer" (id 44800) by aadixc0de. Drawn on a canvas by landing.js. */
.viz { width: 44px; height: 22px; flex: none; display: block; }
.who-row { display: flex; align-items: center; gap: 10px; min-height: 24px; }
.who-row .viz { width: 56px; height: 24px; }

/* Device frame. Port of 21st.dev "iPhone 16 Pro" (id 1542) by designali-in: its 200 x 400 frame, with the screen cut at x 14.08, y 12.81, 171.98 x 374.37, radius 24.62.
   The shots are the web app at 402 x 874 with the phone's safe areas (62 px top, 34 px bottom), so the app keeps its own
   top row below the camera island and the shot fills the whole screen. --island pushes a shot down; it stays 0 for these. */
.phone { position: relative; aspect-ratio: 1 / 2; width: 100%; --island: 0%; }
.phone .screen { position: absolute; left: 7.04%; top: 3.2%; width: 85.99%; height: 93.6%; border-radius: 14.3% / 6.58%; overflow: hidden; background: var(--ink); }
.phone .screen img, .phone .screen video { position: absolute; left: 0; bottom: 0; width: 100%; height: calc(100% - var(--island)); max-width: none; object-fit: cover; object-position: 50% 0; }
.phone-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.f-body { fill: var(--ink); }
.f-bezel { fill: var(--bezel); }
.f-lens { fill: var(--blue); }

/* Sections */
main > section { max-width: calc(var(--w) + 2 * var(--gut)); margin: 0 auto; padding: clamp(72px, 9vw, 128px) var(--gut) 0; }

/* Hero: the copy, then the signature. A script page with the line being spoken marked, and the phone saying it. */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 552px); column-gap: clamp(28px, 4vw, 56px); align-items: center; padding-top: clamp(20px, 3vw, 40px) !important; }
.hero-copy { min-width: 0; }
.ta-line { font: 600 clamp(20px, 2vw, 26px)/1.6 var(--ta); margin-top: 24px; }
.hero .lede { margin-top: 10px; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 30px; }

.stage { position: relative; min-height: 600px; min-width: 0; }
.page { position: absolute; left: 0; top: 18px; width: 100%; background: var(--sheet); border: 1px solid var(--rule); padding: 38px 300px 62px 58px; transform: rotate(-1.6deg); font: 400 15px/1.5 var(--script); }
.page::before { content: ""; position: absolute; left: 38px; top: 0; bottom: 0; width: 1px; background: var(--margin-rule); }
.page p { margin: 0 0 14px; color: var(--quiet); position: relative; max-width: none; }
.page .who { text-align: center; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.page .par { text-align: center; font-style: italic; margin-bottom: 18px; }
.page .done { text-decoration: line-through; text-decoration-color: var(--blue); text-decoration-thickness: 1.5px; }
.page .saying { color: var(--ink); font-weight: 700; }
.page .saying span { background: var(--marker); padding: 0 .3em; margin: 0 -.3em; -webkit-box-decoration-break: clone; box-decoration-break: clone; border-radius: 2px 7px 3px 6px; }
.page .saying::before { content: ""; position: absolute; left: -36px; top: .2em; width: 16px; height: 1.1em; border: 2px solid var(--blue); border-right: 0; border-radius: 8px 0 0 8px; }
.page .note { position: absolute; left: 58px; bottom: 16px; margin: 0; font: 600 13px/1.3 var(--ui); color: var(--blue); }
.hero-phone { position: absolute; right: 10px; top: 36px; width: 270px; margin: 0; }

/* The one orchestrated moment: on load the marker is drawn across the headline, then across the line on the page. */
@media (prefers-reduced-motion: no-preference) {
  h1 .mark, .page .saying span { background: linear-gradient(var(--marker), var(--marker)) 0 0 / 100% 100% no-repeat; animation: stroke .7s var(--ease-out) .15s backwards; }
  .page .saying span { animation-delay: .8s; animation-duration: .6s; }
}
@keyframes stroke { from { background-size: 0% 100%; } }

.hero-strip { grid-column: 1 / -1; margin-top: clamp(40px, 5vw, 64px); }
/* The page needs about 190 px beside the phone to hold a script line, so the stage column never goes under 552 px.
   Below 1181 px there is no room for that next to the copy: the hero stacks, and the same page-and-phone pair sits
   centred under the copy. Under 600 px the phone drops below the page instead. */
@media (max-width: 1180px) {
  .hero { grid-template-columns: minmax(0, 1fr); row-gap: 44px; }
  .stage { width: 100%; max-width: 600px; justify-self: center; }
}
@media (max-width: 599px) {
  .stage { min-height: 0; max-width: 440px; justify-self: start; }
  .page { position: relative; top: 0; padding: 26px 18px 112px 44px; font-size: 14.5px; transform: rotate(-1deg); }
  .page::before { left: 26px; }
  .page .saying::before { left: -30px; width: 12px; }
  .page .note { left: 44px; bottom: 90px; }
  .hero-phone { position: relative; right: auto; top: auto; margin: -76px 6px 0 auto; width: 224px; }
}
@media (max-width: 480px) { .cta-row .btn { flex: 1 1 100%; } }

/* The take strip: two lanes. Blue is the voice in your ear, the yellow stroke is you. */
.strip .lanes { position: relative; height: 56px; overflow: hidden; border: 1px solid var(--rule); background: var(--sheet); }
.strip .lanes::before { content: ""; position: absolute; inset: 50% 0 auto; border-top: 1px solid var(--rule); }
.bar { position: absolute; height: 10px; border-radius: 2px; left: 0; top: 9px; background: var(--blue); will-change: transform; }
.bar.y { top: 36px; background: var(--marker); border: 1.5px solid var(--ink); }
.track { position: absolute; inset: 0; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 14px; font-size: 15px; color: var(--quiet); max-width: none; }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.dot { width: 20px; height: 10px; border-radius: 2px; display: inline-block; flex: none; }
.dot.p { background: var(--blue); }
.dot.y { background: var(--marker); border: 1.5px solid var(--ink); }
.dot.g { border: 1.5px dashed var(--quiet); }

/* How it works. Port of 21st.dev "Sticky Scroll Reveal" (id 952) by manuarora700 (Aceternity): the step at the reading line
   is the marked one, the others go quiet, and the sticky phone swaps its screen. Quiet steps keep readable contrast
   (grey, not 30% opacity). Without JS, and on phones, every step is full strength. */
.how-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: clamp(32px, 7vw, 110px); margin-top: clamp(36px, 5vw, 60px); }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.steps li { counter-increment: s; padding: 34px 0 34px 64px; position: relative; border-top: 1px solid var(--rule); min-height: 52vh; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 30px; width: 40px; height: 40px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: var(--r); font: 700 19px/1 var(--ui); color: var(--ink); transition: background-color .2s ease-out; }
.steps h3 { width: fit-content; padding: .04em .25em .08em; margin-left: -.25em; border-radius: 2px 8px 3px 6px; transition: background-color .2s ease-out, color .2s ease-out; }
.steps p { color: var(--quiet); margin-top: 10px; max-width: 42ch; }
.sticky-phone { position: sticky; top: max(9vh, 96px); align-self: start; width: min(100%, calc((100vh - 130px) / 2)); justify-self: end; }
.sticky-phone img { opacity: 0; transition: opacity .3s ease; }
.sticky-phone img.on { opacity: 1; }
.inline-shot { display: none; }
@media (min-width: 821px) {
  .how-grid.live .steps li h3 { color: var(--quiet); }
  .how-grid.live .steps li.on h3 { color: var(--ink); background: var(--marker); }
  .how-grid.live .steps li.on::before { background: var(--marker); }
  .how-grid .steps li:last-child { min-height: 38vh; }
}
@media (max-width: 820px) {
  .how-grid { grid-template-columns: 1fr; }
  .sticky-phone { display: none; }
  .steps li { min-height: 0; padding-left: 56px; }
  .inline-shot { display: block; width: min(60vw, 250px); margin-top: 26px; }
}

/* Demo: a sheet of script. The line being said carries the marker. */
.demo { margin-top: 36px; background: var(--sheet); border: 1px solid var(--rule); padding: clamp(18px, 3vw, 32px); }
.demo-bar, .demo-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.seg { display: inline-flex; border: 2px solid var(--ink); border-radius: var(--r); background: var(--sheet); overflow: hidden; }
.seg button { min-height: 44px; padding: 0 18px; border: 0; border-radius: 0; background: none; color: var(--ink); font: 600 15px/1 var(--ui); cursor: pointer; transition: background-color .15s ease-out, color .15s ease-out; }
.seg button[lang="ta"] { font-family: var(--ta); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--sheet); }
.seg button:focus-visible { outline-offset: -5px; outline-color: var(--blue); }
.now { display: grid; gap: 10px; align-content: start; margin: 28px 0 22px; min-height: 7em; max-width: none; }
.now .who { font: 600 14px/1.3 var(--ui); color: var(--quiet); }
.now .line { font: 700 clamp(19px, 2.6vw, 30px)/1.5 var(--script); color: var(--ink); max-width: 30em; }
.now .line span { padding: .08em .3em; margin: 0 -.3em; -webkit-box-decoration-break: clone; box-decoration-break: clone; border-radius: 2px 7px 3px 6px; transition: background-color .2s ease-out; }
.now[data-who="p"] .line span, .now[data-who="y"] .line span { background: var(--marker); }
.now[data-who="p"] .who { color: var(--blue); }
.now[data-who="y"] .who { color: var(--ink); }
.demo-strip .lanes { height: 66px; background: var(--ground); }
.demo-strip .bar { top: 11px; height: 12px; transition: transform .42s var(--ease-out), opacity .3s ease-out; transform-origin: left center; }
.demo-strip .bar.y { top: 42px; }
.demo-strip .end { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ink); left: 0; transition: transform .42s var(--ease-out); }
.demo-foot { margin-top: 18px; min-height: 52px; }
.times { font: 500 18px/1.3 var(--ui); font-variant-numeric: tabular-nums; }
.times b { color: var(--blue); font-weight: 700; }
.demo .fine { margin-top: 14px; }

/* Eyes */
.versus { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 40px clamp(32px, 7vw, 110px); margin-top: clamp(36px, 5vw, 60px); }
.versus > div { border-top: 1px solid var(--rule); padding-top: 26px; }
.versus p { color: var(--quiet); }
.readline, .lens { height: 84px; display: flex; align-items: center; margin: 12px 0 !important; }
.readline { font: 400 19px/1.3 var(--script); gap: .5em; flex-wrap: wrap; align-content: center; }
.readline span:nth-child(3) { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--blue); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.lens i { width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--ink); display: grid; place-items: center; background: var(--sheet); }
.lens i::after { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--blue); }

/* Private */
.plain { list-style: none; padding: 0; margin: clamp(28px, 4vw, 44px) 0 0; display: grid; gap: 0; max-width: 760px; }
.plain li { padding: 18px 0; border-top: 1px solid var(--rule); font-size: 19px; }
.plain li:last-child { border-bottom: 1px solid var(--rule); }

/* Price. Port of 21st.dev "Two-Plan Pricing Cards" (id 26895) by ln-dev7: two articles 16px apart, 28px padding and gaps,
   a ruled price row, checked list, action pinned to the foot. Kept calm on purpose: ink on white and pale blue,
   and a single yellow button, so the highlighter stays the only loud thing on the page. */
.price h2 { max-width: 22ch; }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: clamp(44px, 5vw, 60px); max-width: 896px; }
@media (max-width: 720px) { .plans { grid-template-columns: 1fr; gap: 28px; } }
.plan { position: relative; display: flex; flex-direction: column; gap: 26px; padding: 28px; border: 1px solid var(--rule); border-radius: var(--r); }
.plan.creator { background: var(--sheet); border: 2px solid var(--ink); padding: 27px; }
.plan-tag { position: absolute; top: -14px; left: 24px; display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border: 2px solid var(--ink); border-radius: var(--r); background: var(--tint); color: var(--ink); font: 600 14px/1 var(--ui); }
.plan-head { display: grid; gap: 6px; }
.plan-head p { color: var(--quiet); font-size: 16px; }
.amt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding: 20px 0; border-block: 1px solid var(--rule); font: 700 42px/1.15 var(--ui); letter-spacing: -.03em; font-variant-numeric: tabular-nums; max-width: none; }
.amt .mark { margin-left: 0; padding: 0 .16em .04em; }
.amt small { font: 400 16px/1.3 var(--ui); letter-spacing: 0; color: var(--quiet); }
.plan ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 17px; }
.plan li { padding-left: 28px; position: relative; }
.plan li::before { content: ""; position: absolute; left: 0; top: .36em; width: 16px; height: 16px; background: var(--blue);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }
.plan .btn { margin-top: auto; width: 100%; }
.plans-note { margin-top: 24px; }

/* FAQ. Port of 21st.dev "Accordion" (id 506) by originui: ruled rows, a chevron that turns 180 degrees in 200 ms, the panel height easing open in 200 ms.
   Kept as native details, so it works without JS and the answers stay in the page for search. */
.faq h2 { margin-bottom: 26px; }
.faq details { border-bottom: 1px solid var(--rule); max-width: 820px; }
.faq details:first-of-type { border-top: 1px solid var(--rule); }
.faq summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; font: 600 19px/1.35 var(--ui); list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 20px; height: 20px; background: var(--blue); transition: transform .2s ease;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; }
.faq details[open] summary::after { transform: rotate(180deg); }
@media (hover: hover) { .faq summary:hover { text-decoration: underline; text-decoration-color: var(--blue); text-decoration-thickness: 2px; text-underline-offset: 5px; } }
.faq details p { color: var(--quiet); padding: 0 0 22px; }
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content { height: 0; overflow: hidden; transition: height .2s ease-out, content-visibility .2s allow-discrete; }
  .faq details[open]::details-content { height: auto; }
}

/* Last + footer */
.last { padding-bottom: clamp(72px, 9vw, 128px) !important; }
.last h2 { max-width: none; line-height: 1.3; }
.last .btn { margin-top: 28px; }
.last .lede { margin-top: 18px; }
.foot { border-top: 1px solid var(--rule); padding: 30px 0 44px; width: min(var(--w), 100% - 2 * var(--gut)); margin: clamp(0px, 2vw, 24px) auto 0; display: grid; gap: 10px; font-size: 16px; }
.foot-brand { display: flex; align-items: center; gap: 10px; }
.foot-sub { color: var(--quiet); }
.foot nav { display: flex; flex-wrap: wrap; gap: 0 24px; }
.foot nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-underline-offset: 4px; }
.foot-brand a { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 4px; }
.foot .fine { max-width: none; }

/* Policy pages (terms, privacy, refunds, contact) and 404. Written by scripts/build_policy_pages.py.
   One narrow reading column, ruled sections like the FAQ. These pages load no script, so the header sits in the flow. */
.doc { max-width: calc(760px + 2 * var(--gut)); margin: 0 auto; padding: clamp(36px, 6vw, 80px) var(--gut) clamp(56px, 8vw, 96px); overflow-wrap: break-word; }
.doc h1 { font-size: clamp(34px, 4vw, 52px); }
.doc .updated { font: italic 400 16px/1.4 var(--script); color: var(--quiet); margin-top: 14px; }
.doc .lede { margin-top: 18px; }
.doc section { margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--rule); }
.doc h2 { font-size: 24px; line-height: 1.25; letter-spacing: -.015em; max-width: none; margin-bottom: 14px; }
.doc p + p, .doc ul + p, .doc ol + p, .doc dl + p { margin-top: 14px; }
.doc ul, .doc ol { margin: 14px 0 0; padding-left: 1.3em; max-width: 60ch; }
.doc h2 + ul, .doc h2 + ol { margin-top: 0; }
.doc li + li { margin-top: 8px; }
.doc li::marker { color: var(--blue); font-weight: 600; }
.doc a { color: var(--blue); text-underline-offset: 3px; }
.doc .btn { color: var(--ink); }
.doc .facts { display: grid; grid-template-columns: max-content 1fr; gap: 10px 24px; margin: 0; padding: 18px 20px; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r); max-width: 60ch; }
.doc p + .facts { margin-top: 14px; }
.doc .facts dt { color: var(--quiet); font-size: 15px; }
.doc .facts dd { margin: 0; min-width: 0; }
.doc .email { font: 700 clamp(22px, 3.2vw, 30px)/1.3 var(--ui); letter-spacing: -.015em; }
.doc .blank { background: var(--marker); color: var(--ink); font-family: var(--script); padding: 0 .3em; border-radius: 3px; }
.lost { padding-top: clamp(56px, 10vw, 128px); }
.lost h1 { line-height: 1.3; }
.lost .cta-row { margin-top: 28px; }
.lost .fine { margin-top: 28px; }
@media (max-width: 480px) { .doc .facts { grid-template-columns: 1fr; gap: 2px 0; } .doc .facts dd + dt { margin-top: 12px; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .steps li::before, .steps h3, .now .line span, .demo-strip .bar, .demo-strip .end, .sticky-phone img, .shell, .shell *, .faq summary::after, .seg button { transition: none !important; }
  .faq details::details-content { transition: none; }
}