/* ==========================================================================
   Mynato — landing page
   Brand world: Moss, dark-first. One accent colour, no second colour.
   Built to SPEC-B-page.md. Owns nothing the sky animation touches.
   ========================================================================== */

/* --- 1. Ground ----------------------------------------------------------- */
/* TWO brand worlds, switchable from the header. Moss is the default and is
   what `:root` carries; Myna is opt-in via [data-brand="myna"] on <html>.
   Nothing else in the sheet knows which one is on — every rule downstream
   reads the same six tokens. The sky animation re-reads them on mutation. */
:root{
  /* Moss. The original. Dark-first, one accent, no second colour. */
  --bg:#0D1310;
  --panel:#161E19;
  --surface:rgba(22,30,25,.62);
  --surface-line:rgba(95,195,140,.12);
  --ink:#E4EBE5;
  --mute:#7E8F84;
  --line:#243029;
  --acc:#5FC38C;
  --acc-ink:#0D1310;
  --mark:#3F986E; --mark-dark:#060808; --beak:#F7AC17;
  --beak-shade:#C4820F; --glint:#FFFFFF; --pupil:#0D1310;
  --wall:linear-gradient(165deg,#22563C,#12301F 50%,#08150E);

  /* identical to the Moss direction you picked: ui-rounded first, so SF Pro
     Rounded wins on a Mac and no installed webfont can pre-empt it. Figtree
     led the stack before — if you have it installed, it was overriding. */
  /* "SF Pro Rounded" MUST come first. `ui-rounded` is honoured by Safari but
     unrecognised by Chrome, which falls through to its default standard font —
     a serif. That made the page rounded in one browser and Times in the other. */
  --fd:"SF Pro Rounded",ui-rounded,-apple-system,system-ui,"Avenir Next",sans-serif;
  --fu:-apple-system,BlinkMacSystemFont,"Avenir Next",sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  --r-kbd:6px; --r-in:10px; --r-btn:12px; --r-card:16px;

  /* ONE content measure. Every section, box, list and figure on the page is
     this wide and no other. Mixing 640 / 680 / 840 / 900 is what made the
     page look assembled rather than designed. */
  /* TWO widths, and only two. Every text block — prose, grids, lists, cards,
     FAQ — is --content, so they all share one left and one right edge. Only
     the hero figure breaks out to --figure, which reads as deliberate because
     it is a picture, not a column of words. */
  /* ONE width for the entire page. Hero figure, demo rows, tables, prose —
     all of it. A second "figure" width was what made the page feel like two
     pages stapled together. Running prose caps at --read, centred, which is
     symmetric and therefore reads as intentional rather than misaligned. */
  --content:1040px;
  --read:58ch;
  --gutter:32px;

  /* ONE padding value for every card, cell and box on the page, and one gap.
     Mixing 20/22/24/26/28 is what made the spacing look hand-tuned per box. */
  --pad:28px;
  --gap:16px;
  --section:128px;   /* real air between movements */

  --e-micro:140ms ease-out;
  --e-state:240ms cubic-bezier(.2,0,0,1);

  /* --- type scale ------------------------------------------------------
     Seven steps, and every static font-size on the site is one of them.
     It used to be twenty-two distinct values: 14 and 14.5 and 15 and 15.5
     all in play at once, 16 next to 16.5 next to 17. Nobody can see a half
     pixel, which is exactly the problem — the differences did no work and
     the sizes drifted every time something new was added. Collapsed inward
     onto the most-used values, so almost nothing moved. */
  --fs-3xs:11px;    /* mono micro-labels, mock UI chrome */
  --fs-2xs:12.5px;  /* fine print, keycaps, timestamps */
  --fs-xs:13.5px;   /* secondary links and notes */
  --fs-sm:15px;     /* UI text, nav, small copy */
  --fs-md:17px;     /* body */
  --fs-lg:19px;     /* lead paragraphs and pull quotes */
  --fs-xl:21px;     /* h3 and card headings */
  --fs-2xl:24px;    /* sub-page h2 */
}

/* --- Moss, light ---------------------------------------------------------- */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#EEF0EC; --panel:#FAFBF9; --ink:#131A15; --mute:#5F6F63;
    --line:#D8DDD6; --acc:#2F6B4A; --acc-ink:#FAFBF9;
    --surface:rgba(250,251,249,.66); --surface-line:rgba(47,107,74,.14);
  }
}
:root[data-theme="light"]{
  --bg:#EEF0EC; --panel:#FAFBF9; --ink:#131A15; --mute:#5F6F63;
  --line:#D8DDD6; --acc:#2F6B4A; --acc-ink:#FAFBF9;
  --surface:rgba(250,251,249,.66); --surface-line:rgba(47,107,74,.14);
}
:root[data-theme="dark"]{
  --bg:#0D1310; --panel:#161E19; --ink:#E4EBE5; --mute:#7E8F84;
  --line:#243029; --acc:#5FC38C; --acc-ink:#0D1310;
  --surface:rgba(22,30,25,.62); --surface-line:rgba(95,195,140,.12);
}

/* --- Myna ----------------------------------------------------------------- */
/* Palette taken from the logo: near-black bird, amber beak, warm paper.
   One accent, and it is the beak yellow. Must sit after every Moss rule —
   the [data-brand] blocks carry one extra attribute each so they win the
   specificity tie against the Moss [data-theme] rules above. */
:root[data-brand="myna"]{
  --bg:#0E1013; --panel:#171A1E; --ink:#EDEAE3; --mute:#8B8E88;
  --line:#262A2E; --acc:#F2B933; --acc-ink:#14120E;
  --mark:#A9761A; --mark-dark:#14161A; --beak:#F2B933;
  --beak-shade:#A9761A; --glint:#FFFFFF; --pupil:#0E1013;
  --surface:rgba(23,26,30,.62); --surface-line:rgba(242,185,51,.13);
  --wall:linear-gradient(165deg,#3A3226,#1C1913 52%,#0C0B08);
}
@media (prefers-color-scheme: light){
  :root[data-brand="myna"]:not([data-theme="dark"]){
    --bg:#F6F2EC; --panel:#FFFDF8; --ink:#14161A; --mute:#5E6159;
    --line:#E3DED3; --acc:#A9761A; --acc-ink:#FFFDF8;
    --surface:rgba(255,253,248,.66); --surface-line:rgba(169,118,26,.18);
  }
}
:root[data-brand="myna"][data-theme="light"]{
  --bg:#F6F2EC; --panel:#FFFDF8; --ink:#14161A; --mute:#5E6159;
  --line:#E3DED3; --acc:#A9761A; --acc-ink:#FFFDF8;
  --surface:rgba(255,253,248,.66); --surface-line:rgba(169,118,26,.18);
}
:root[data-brand="myna"][data-theme="dark"]{
  --bg:#0E1013; --panel:#171A1E; --ink:#EDEAE3; --mute:#8B8E88;
  --line:#262A2E; --acc:#F2B933; --acc-ink:#14120E;
  --surface:rgba(23,26,30,.62); --surface-line:rgba(242,185,51,.13);
}

/* --- 2. Base ------------------------------------------------------------- */
/* Selection uses the brand accent, not the OS blue — a stray system colour is
   the fastest way to make a considered page look unfinished. */
::selection{background:var(--acc);color:var(--acc-ink);text-shadow:none}
::-moz-selection{background:var(--acc);color:var(--acc-ink);text-shadow:none}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--fu);
  font-size:var(--fs-md);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background .4s ease,color .4s ease;
}

/* the sky sits behind everything; every content wrapper lifts above it */
/* width/height are required: <canvas> is a replaced element, so inset:0 alone
   leaves it at its intrinsic 300x150 instead of stretching. */
#sky{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
header,main,footer{position:relative;z-index:1}

.wrap{max-width:calc(var(--content) + var(--gutter) * 2);margin:0 auto;padding:0 var(--gutter)}

h1,h2,h3,h4{font-family:var(--fd);font-weight:600;letter-spacing:-.024em;text-wrap:balance;margin:0}
h1{font-size:clamp(42px,7vw,72px);line-height:1.02}
h2{font-size:clamp(28px,4vw,40px);line-height:1.08}
h3{font-size:var(--fs-xl);line-height:1.25;letter-spacing:-.018em}
h4{font-size:var(--fs-md);line-height:1.3;letter-spacing:-.016em}
p{margin:0}
a{color:inherit}

:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:2px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--acc);color:var(--acc-ink);
  padding:10px 18px;border-radius:0 0 var(--r-in) 0;
  font-size:var(--fs-sm);font-weight:600;text-decoration:none;
}
.skip:focus{left:0}

.vh{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* --- 3. Header ----------------------------------------------------------- */
.site-head{padding:20px 0}
.site-head .in{display:flex;align-items:center;justify-content:space-between;gap:var(--s5)}
.brand{display:flex;align-items:center;gap:var(--s2);font-family:var(--fd);font-size:var(--fs-md);font-weight:600;letter-spacing:-.02em;text-decoration:none}
.brand svg{width:20px;height:20px;color:var(--acc);display:block}
/* The full lockup — bird, wordmark and tagline. 2.11:1, so the height drives it. */
.brand--logo{gap:0}
.brand--logo svg{width:auto;height:30px;aspect-ratio:1645/525;color:inherit}
/* The header and footer carry the PLAIN lockup: at 30px the bird was a
   smudge, and the mascot is the only bird on the page now. Ratio must
   match kit/mynato-plain.svg or the box crops it. */
footer .brand--logo svg{height:74px}
@media (max-width:640px){ .brand--logo svg{height:40px} }
.head-link{font-size:var(--fs-sm);text-decoration:none;color:var(--ink)}
.head-link:hover{text-decoration:underline}
.head-link:focus-visible{text-decoration:underline}

/* Brand switch. A two-position segmented control, not a hover affordance and
   not an icon — both states are always visible and always labelled. */
.head-right{display:flex;align-items:center;gap:var(--s5)}
.brandsw{
  display:flex;align-items:center;gap:2px;padding:2px;
  border:1px solid var(--line);border-radius:999px;background:var(--surface);
  transition:border-color var(--e-state)
}
.brandsw button{
  font:inherit;font-size:var(--fs-2xs);font-weight:600;letter-spacing:-.01em;
  padding:5px 11px;border:0;border-radius:999px;cursor:pointer;
  background:transparent;color:var(--mute);
  transition:background var(--e-state),color var(--e-state)
}
.brandsw button:hover{color:var(--ink)}
.brandsw button[aria-pressed="true"]{background:var(--acc);color:var(--acc-ink)}
.brandsw button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
@media(max-width:520px){.brandsw button{padding:5px 9px;font-size:var(--fs-3xs)}}

/* --- 4. Hero ------------------------------------------------------------- */
.hero{padding:110px 0 0;text-align:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  font-size:var(--fs-xs);color:var(--mute);
  border:1px solid var(--line);border-radius:100px;
  padding:6px 14px 6px 10px;margin-bottom:var(--s5);
}
.eyebrow svg{width:15px;height:15px;color:var(--acc);flex:none}
.hero .dek{
  font-size:clamp(17px,2.1vw,20px);color:var(--mute);
  max-width:48ch;margin:22px auto 0;line-height:1.55;
  text-wrap:balance;
}
.btnrow{display:flex;gap:14px;justify-content:center;align-items:center;margin-top:var(--s6);flex-wrap:wrap}

.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--fu);font-size:var(--fs-md);font-weight:600;letter-spacing:-.01em;
  padding:13px 24px;border-radius:var(--r-btn);
  border:none;cursor:pointer;text-decoration:none;
  background:var(--acc);color:var(--acc-ink);
  transition:transform var(--e-micro),filter var(--e-micro);
}
.btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.btn svg{width:17px;height:17px;flex:none}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn.ghost:hover{filter:none;box-shadow:inset 0 0 0 1px var(--mute)}

.micro{font-size:var(--fs-xs);color:var(--mute);margin-top:var(--s4)}

/* --- 5. The Mac mock ------------------------------------------------------ */
.mac{
  margin:72px auto 0;max-width:var(--content);width:calc(100% - var(--gutter) * 2);
  border-radius:var(--r-card);overflow:hidden;
  background:var(--wall);
  box-shadow:0 34px 80px -22px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.10);
}
.mbar{
  height:26px;display:flex;align-items:center;gap:var(--s4);padding:0 var(--s3);
  background:rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  color:#fff;font-size:var(--fs-2xs);
}
.mbar .app{font-weight:700;letter-spacing:-.01em}
.mbar .mi{opacity:.82;font-size:var(--fs-3xs)}
.mbar .right{margin-left:auto;display:flex;align-items:center;gap:var(--s3)}
.mbar .right>svg{width:15px;height:15px;opacity:.9;display:block}
.mbar .slot{display:flex;align-items:center;padding:2px;border-radius:5px;background:rgba(255,255,255,.22)}
.mbar .slot svg{width:18px;height:18px;display:block}
.mbar .clock{font-size:var(--fs-3xs);opacity:.92;font-variant-numeric:tabular-nums}
@media(max-width:640px){.mbar .mi{display:none}}

.desk{padding:var(--s6) var(--s5) 42px;display:flex;justify-content:center}
.win{
  width:100%;max-width:640px;border-radius:var(--r-btn);overflow:hidden;
  background:var(--surface);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);color:var(--ink);
  box-shadow:0 22px 50px -12px rgba(0,0,0,.5),0 0 0 .5px rgba(0,0,0,.28);
}
.win-bar{display:flex;align-items:center;gap:var(--s2);padding:10px 13px;border-bottom:1px solid var(--line)}
.tl{display:flex;gap:7px}
.tl i{width:11px;height:11px;border-radius:50%;display:block}
.tl i:nth-child(1){background:#FF5F57}
.tl i:nth-child(2){background:#FEBC2E}
.tl i:nth-child(3){background:#28C840}
.win-title{font-size:var(--fs-2xs);color:var(--mute);margin-left:var(--s1)}
.win-body{padding:20px 20px var(--s5);min-height:150px;text-align:left}
.to{font-size:var(--fs-xs);color:var(--mute);border-bottom:1px solid var(--line);padding-bottom:9px;margin-bottom:14px}
.msg{font-size:var(--fs-md);line-height:1.6;min-height:1.6em}

.typed{
  display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;
  border-right:2px solid var(--acc);max-width:100%;
  animation:type 10s steps(46) infinite,fadeline 10s linear infinite,caret 900ms step-end infinite;
}
@keyframes type{
  0%,6%{width:0}
  56%,100%{width:46ch}
}
@keyframes fadeline{
  0%,92%{opacity:1}
  97%,100%{opacity:0}
}
@keyframes caret{50%{border-color:transparent}}

.hud{
  display:inline-flex;align-items:center;gap:9px;margin-top:20px;
  padding:7px 13px 7px 10px;border-radius:100px;
  background:var(--acc);color:var(--acc-ink);
  font-size:var(--fs-2xs);font-weight:600;
  animation:hud 10s infinite;
}
@keyframes hud{
  0%{opacity:0}
  3%,60%{opacity:1}
  66%,100%{opacity:0}
}
.hud .lvl{display:flex;gap:2.5px;align-items:center;height:13px}
.hud .lvl i{width:2.5px;border-radius:2px;background:currentColor;animation:lv 900ms ease-in-out infinite}
.hud .lvl i:nth-child(1){height:5px;animation-delay:0s}
.hud .lvl i:nth-child(2){height:11px;animation-delay:.12s}
.hud .lvl i:nth-child(3){height:7px;animation-delay:.24s}
.hud .lvl i:nth-child(4){height:13px;animation-delay:.36s}
.hud .lvl i:nth-child(5){height:6px;animation-delay:.48s}
@keyframes lv{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}
.hud kbd{font-family:var(--mono);background:none;box-shadow:none;padding:0;font-size:var(--fs-2xs)}

/* --- 6. Sections --------------------------------------------------------- */
.sec{padding:var(--section) 0}
.sec + .sec{padding-top:0}
.sec.tight{padding-top:0}
/* Section titles carry the accent; the hero h1 stays in ink so it remains the
   loudest thing on the page and the green reads as rhythm, not decoration. */
.sec h2{color:var(--acc)}
.sec-h{text-align:center;margin-bottom:var(--s7)}
.sec-h p{color:var(--mute);max-width:var(--read);margin:var(--s4) auto 0;font-size:var(--fs-md);line-height:1.65}

/* three beats */
.beats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.beat{background:var(--surface);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--surface-line);border-radius:var(--r-card);padding:var(--pad)}
.beat{text-align:center}
.beat .ic{
  width:38px;height:38px;border-radius:11px;margin-left:auto;margin-right:auto;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--acc) 14%,transparent);
  color:var(--acc);margin-bottom:18px;
}
.beat .ic svg{width:21px;height:21px}
.beat h3{margin-bottom:var(--s2)}
.beat p{color:var(--mute);font-size:var(--fs-sm);line-height:1.55}

/* app tiles */
.apps{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;max-width:760px;margin:0 auto}
.tile{width:60px;text-align:center}
.tile .sq{
  width:60px;height:60px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 5px 14px rgba(0,0,0,.18),inset 0 .5px 0 rgba(255,255,255,.28);
}
.tile .sq svg{width:34px;height:34px}
.tile span{display:block;font-size:var(--fs-3xs);color:var(--mute);margin-top:var(--s2);letter-spacing:-.005em}
.apps-more{text-align:center;color:var(--mute);font-size:var(--fs-sm);margin-top:30px;max-width:52ch;margin-left:auto;margin-right:auto}

/* automations */
.split{display:grid;grid-template-columns:1fr 1.05fr;gap:52px;align-items:center}
.split p{color:var(--mute);margin-top:18px;font-size:var(--fs-md);max-width:44ch}
.uses{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:var(--s3)}
.uses li{display:flex;gap:11px;align-items:flex-start;font-size:var(--fs-sm)}
.uses svg{width:17px;height:17px;color:var(--acc);flex:none;margin-top:3px}

.term{
  border-radius:var(--r-btn);overflow:hidden;
  background:#111;color:#E6E6E0;
  box-shadow:0 20px 44px -14px rgba(0,0,0,.55),0 0 0 .5px rgba(0,0,0,.4);
}
.term-bar{display:flex;align-items:center;gap:var(--s2);padding:10px 13px;background:#1C1C1A}
.term-bar .t{font-size:var(--fs-2xs);color:#8B8A82;margin-left:var(--s1)}
.term pre{margin:0;padding:18px 18px 22px;font-family:var(--mono);font-size:var(--fs-2xs);line-height:1.85;overflow-x:auto}
.term .c{color:#7C7B72}
.term .p{color:var(--acc)}

/* details rail */
.rail{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.rail>div{border:1px solid var(--surface-line);border-radius:var(--r-card);text-align:center}
.rail svg{margin-left:auto;margin-right:auto}
.rail>div{background:var(--surface);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding:var(--pad)}
.rail svg{width:20px;height:20px;color:var(--acc);margin-bottom:14px;display:block}
.rail h4{margin-bottom:6px}
.rail p{font-size:var(--fs-sm);color:var(--mute);line-height:1.5}

/* faq */

/* .faq.prose beats .prose{text-align:center} on specificity — relying on
   source order here is what centred the answers. */
/* the block spans the page measure like every other block; only the
   running answers cap at --read, centred inside it */
.faq,.faq.prose{border-top:1px solid var(--line);text-align:center;max-width:none}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  display:flex;align-items:center;justify-content:center;gap:14px;
  padding:var(--pad) 0;cursor:pointer;list-style:none;
  transition:color var(--e-micro);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover h4{color:var(--acc)}
.faq summary:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:4px}
.faq h4{margin:0;transition:color var(--e-micro)}
.faq details[open] summary h4{color:var(--acc)}

.chev{
  flex:none;width:11px;height:11px;position:relative;
  transition:transform var(--e-state);
}
.chev::before,.chev::after{
  content:"";position:absolute;top:50%;left:0;
  width:11px;height:1.5px;background:var(--mute);border-radius:1px;
  transition:transform var(--e-state),background var(--e-micro);
}
.chev::after{transform:rotate(90deg)}
.faq details[open] .chev::after{transform:rotate(0deg)}
.faq details[open] .chev::before,.faq details[open] .chev::after{background:var(--acc)}

.faq .ans{padding:0 0 var(--pad)}
.faq .ans p{color:var(--mute);font-size:var(--fs-md);line-height:1.68;max-width:var(--read);margin:0 auto 12px}
.faq .ans p:last-child{margin-bottom:0}
.faq details[open] .ans{animation:ansIn var(--e-state) both}
@keyframes ansIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* --- 7. Closer + form ---------------------------------------------------- */
.closer{text-align:center;padding:var(--section) 0}
.closer h2{font-size:clamp(30px,4.6vw,46px);line-height:1.05;max-width:18ch;margin:0 auto}
.signup{max-width:400px;margin:34px auto 0;text-align:left}
.signup .lab{display:block;font-size:var(--fs-sm);margin-bottom:10px}
.form{display:flex;gap:9px}
.form input{
  flex:1;min-width:0;
  font-family:var(--fu);font-size:var(--fs-sm);padding:12px 15px;
  border-radius:var(--r-in);border:1px solid var(--line);
  background:var(--panel);color:var(--ink);
}
.form input::placeholder{color:var(--mute)}
.form button{
  font-family:var(--fu);font-size:var(--fs-sm);font-weight:600;
  padding:12px 18px;border-radius:var(--r-in);border:none;
  background:var(--acc);color:var(--acc-ink);cursor:pointer;white-space:nowrap;
  transition:filter var(--e-micro);
}
.form button:hover{filter:brightness(1.06)}
.form button[disabled]{opacity:.6;cursor:default}
.form-note{font-size:var(--fs-xs);color:var(--mute);margin-top:var(--s3)}
.form-msg{font-size:var(--fs-sm);color:var(--ink);margin-top:var(--s3)}
.signup [data-swap]{transition:opacity var(--e-state)}
.signup.busy [data-swap]{opacity:.55}
.done{font-size:var(--fs-sm);color:var(--ink)}

/* --- 8. Footer ----------------------------------------------------------- */
footer{border-top:1px solid var(--line);padding:34px 0 60px;margin-top:0}
.foot{display:flex;justify-content:space-between;gap:22px;flex-wrap:wrap;align-items:flex-start}
.foot small{color:var(--mute);font-size:var(--fs-2xs);display:block;line-height:1.7;margin-top:var(--s3)}
.foot .links{display:flex;gap:20px;font-size:var(--fs-xs)}
.foot .links a{color:var(--mute);text-decoration:none}
.foot .links a:hover{color:var(--ink);text-decoration:underline}

/* --- 9. Breakpoints ------------------------------------------------------ */
@media(max-width:880px){
  .split{grid-template-columns:1fr;gap:34px}
  .rail{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .beats{grid-template-columns:1fr}
}
@media(max-width:640px){
  :root{--gutter:20px}
  .sec{padding:var(--s8) 0}
  .closer{padding:var(--s8) 0 var(--s8)}
  .hero{padding-top:var(--s7)}
  .desk{padding:20px 14px 28px}
}
@media(max-width:460px){
  .rail{grid-template-columns:1fr}
  .form{flex-direction:column}
  .form button{width:100%}
}

/* --- 10. Reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .typed{width:46ch;opacity:1;border-right-color:var(--acc)}
  .hud{opacity:1}
  .hud .lvl i{transform:none}
  .btn:hover{transform:none}
}


/* --- 11. Long-form prose sections ---------------------------------------- */
/* .prose sets no width: .wrap owns the measure, and an equal-specificity
   override here is exactly the cascade collision that broke the layout. */
.prose{text-align:center}
.prose h2{margin-bottom:var(--s6)}
.prose .lead{text-align:center;margin-left:auto;margin-right:auto}
.prose h2.h-small{font-size:clamp(22px,2.8vw,28px)}
.lead{font-size:var(--fs-md);line-height:1.75;color:var(--mute);margin-bottom:var(--s5);max-width:var(--read);margin-left:auto;margin-right:auto}
.lead:last-child{margin-bottom:0}
.lead.muted-p{font-size:var(--fs-sm);opacity:.85}

/* --- spoken examples ------------------------------------------------------ */
.says{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap)}
.say{border:1px solid var(--surface-line);border-radius:var(--r-card)}
.say{text-align:center;background:var(--surface);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding:var(--pad);display:flex;flex-direction:column;gap:9px}
.say .q{font-size:var(--fs-lg);font-weight:600;letter-spacing:-.015em;color:var(--acc)}
.say .a{font-size:var(--fs-sm);color:var(--mute);line-height:1.5}
@media(max-width:640px){.says{grid-template-columns:1fr}}

/* --- three (or four) steps ------------------------------------------------ */
.steps{
  list-style:none;counter-reset:step;padding:0;margin:0;
  display:grid;gap:var(--gap);
}
.steps li{border:1px solid var(--surface-line);border-radius:var(--r-card)}
.steps li{
  text-align:center;counter-increment:step;background:var(--surface);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  padding:calc(var(--pad) + 16px) var(--pad) var(--pad);position:relative;font-size:var(--fs-md);color:var(--mute);line-height:1.55;
}
.steps li::before{
  content:counter(step);position:absolute;left:0;right:0;top:12px;
  font-family:var(--mono);font-size:var(--fs-2xs);color:var(--acc);
  font-variant-numeric:tabular-nums;
}
.steps li b{color:var(--ink);font-weight:600}

/* --- pricing -------------------------------------------------------------- */
.tiers{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
@media(max-width:760px){.tiers{grid-template-columns:1fr}}
.tier{
  text-align:center;background:var(--surface);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid var(--surface-line);
  border-radius:var(--r-card);padding:var(--pad);
}
.tier.lead-tier{border-color:var(--acc)}
.tier h3{font-size:var(--fs-md);font-weight:600;margin-bottom:var(--s3)}
.tier .price{
  font-family:var(--fd);font-size:38px;font-weight:600;letter-spacing:-.03em;
  line-height:1;margin-bottom:var(--s5);
}
.tier .price span{font-family:var(--fu);font-size:var(--fs-sm);font-weight:400;color:var(--mute);letter-spacing:0}
.tier ul{list-style:none;padding:0;margin:0 0 var(--s5);display:grid;gap:10px}
.tier li{font-size:var(--fs-sm);color:var(--mute);line-height:1.45;position:relative}

.tier .fine{font-size:var(--fs-xs);color:var(--mute);line-height:1.55;margin:0}
.tier .fine b{color:var(--ink);font-weight:600}


/* --- 12. Use-case previews ------------------------------------------------
   Four small stylised windows. Illustrations, exactly like the hero mock —
   not screenshots, and nothing here claims to be a recording. */
.shots{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap)}
@media(max-width:640px){.shots{grid-template-columns:1fr}}
.shot{
  background:var(--surface);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid var(--surface-line);border-radius:var(--r-card);
  overflow:hidden;text-align:left;
}
.shot-bar{
  display:flex;align-items:center;gap:var(--s2);
  padding:11px 14px;border-bottom:1px solid var(--surface-line);
}
.shot-bar .tl i{width:9px;height:9px}
.shot-bar .t{font-size:var(--fs-2xs);color:var(--mute);margin-left:var(--s1);font-weight:600}
.shot-body{padding:var(--pad);min-height:112px;display:flex;flex-direction:column;gap:10px}
.shot .field{font-size:var(--fs-2xs);color:var(--mute)}
.shot .line{font-size:var(--fs-sm);line-height:1.5;color:var(--ink)}
.shot .line em{font-style:normal;color:var(--acc)}
.shot .url{
  font-size:var(--fs-2xs);color:var(--mute);background:color-mix(in srgb,var(--ink) 8%,transparent);
  border-radius:100px;padding:6px 12px;display:inline-block;
}
.shot .code{font-family:var(--mono);font-size:var(--fs-2xs);line-height:1.7;color:var(--mute)}
.shot .code b{color:var(--ink);font-weight:400}
.shot .mini{
  display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin-top:auto;
  font-size:var(--fs-3xs);font-weight:600;color:var(--acc);
}
.shot .mini i{width:6px;height:6px;border-radius:50%;background:var(--acc);display:block}
.shot .bubble{
  background:var(--acc);color:var(--acc-ink);border-radius:16px 16px 4px 16px;
  padding:9px 13px;font-size:var(--fs-sm);align-self:flex-end;max-width:80%;
}

/* --- 13. Demos ------------------------------------------------------------
   Alternating rows: copy one side, scene the other. Every scene is a stylised
   illustration animated in CSS — transform and opacity only, so it stays
   smooth — and none of them is or claims to be a screen recording. */
.demos{
  max-width:var(--content);width:calc(100% - var(--gutter) * 2);
  margin:0 auto;display:grid;gap:calc(var(--section) * .62);
}
.demo-row{display:grid;grid-template-columns:1fr 1.15fr;gap:calc(var(--gap) * 3);align-items:center}
.demo-row:nth-child(even) .demo-copy{order:2}
@media(max-width:880px){
  .demo-row{grid-template-columns:1fr;gap:var(--gap)}
  .demo-row:nth-child(even) .demo-copy{order:0}
  .demos{gap:calc(var(--section) * .6)}
}
.demo-copy{text-align:center;padding:var(--pad)}
.demo-n{
  display:block;font-family:var(--mono);font-size:var(--fs-3xs);letter-spacing:.18em;
  text-transform:uppercase;color:var(--acc);margin-bottom:14px;
}
.demo-copy h3{font-size:clamp(21px,2.4vw,27px);margin-bottom:12px}
.demo-copy p{color:var(--mute);font-size:var(--fs-md);line-height:1.65;max-width:34ch;margin:0 auto}

@media (prefers-reduced-motion: reduce){
  .scene *{animation:none !important}
  .d1 .type1{width:34ch}
  .d2 .new{opacity:1}.d2 .old{opacity:0}.d2 .mark{transform:scaleX(1);opacity:.2}
  .d3 .vanish{opacity:.3}
  .d4 .fill{transform:scaleX(1)}.d4 .line{opacity:1;transform:none}.d4 .still{opacity:1}
  .d5 .voc::after{transform:scaleX(1)}
}

/* --- 13b. Demo surfaces — five deliberately different form factors --------
   The whole point: no shared wrapper. One real window, one chromeless page,
   one chat, one document, one list. Identical title bars five times over is
   what makes a page read as machine-made. */
.demo-box{border-radius:var(--r-card);overflow:hidden;box-shadow:0 22px 50px -24px rgba(0,0,0,.6)}
.scene{padding:var(--pad);text-align:left;position:relative;display:flex;flex-direction:column;gap:11px}
.scene .field{font-size:var(--fs-2xs);color:var(--mute)}
.scene .line{font-size:var(--fs-sm);line-height:1.6;color:var(--ink)}
.scene .said{
  align-self:flex-start;margin-top:auto;font-size:var(--fs-xs);color:var(--acc);
  border:1px solid var(--surface-line);border-radius:100px;padding:7px 14px;
  background:color-mix(in srgb,var(--acc) 10%,transparent);
}
.caret{display:inline-block;width:2px;height:1em;background:var(--acc);vertical-align:-2px;margin-left:1px}

/* 1 · a Mac window, with a menu bar. The only one that gets full chrome. */
.fx-window{background:var(--wall);padding:0 0 18px}
.w-menubar{
  height:24px;display:flex;align-items:center;gap:14px;padding:0 12px;
  background:rgba(255,255,255,.15);color:#fff;font-size:var(--fs-3xs);
}
.w-app{font-weight:700}
.w-right{margin-left:auto;display:flex;align-items:center;gap:9px}
.w-slot{display:flex;padding:2px;border-radius:4px;background:rgba(255,255,255,.24)}
.w-slot svg{width:15px;height:15px;color:#fff}
.w-inner{
  margin:18px 18px 0;border-radius:10px;overflow:hidden;
  background:var(--surface);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:0 12px 30px -12px rgba(0,0,0,.6);
}
.w-title{
  display:flex;align-items:center;gap:10px;padding:9px 12px;font-size:var(--fs-2xs);color:var(--mute);
  border-bottom:1px solid var(--surface-line);
}
.w-title .tl i{width:9px;height:9px}

/* 2 · no chrome. A writing surface, warmer and flatter than everything else. */
.fx-paper{
  background:color-mix(in srgb,var(--ink) 5%,var(--surface));
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid var(--surface-line);
}
.fx-paper .scene{padding:calc(var(--pad) + 10px);min-height:200px}
.p-meta{font-family:var(--mono);font-size:var(--fs-3xs);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.p-body{font-size:var(--fs-lg);line-height:1.6;color:var(--ink);margin:0}

/* 3 · a chat thread. Bubbles, an avatar, no title bar. */
.fx-chat{background:var(--surface);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--surface-line)}
.c-head{
  display:flex;align-items:center;gap:10px;padding:12px 16px;font-size:var(--fs-xs);font-weight:600;
  border-bottom:1px solid var(--surface-line);
}
.c-av{
  width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  background:var(--acc);color:var(--acc-ink);font-size:var(--fs-2xs);font-weight:700;
}
.fx-chat .scene{gap:9px}
.c-in,.c-out{font-size:var(--fs-sm);line-height:1.45;padding:9px 13px;max-width:78%}
.c-in{align-self:flex-start;background:color-mix(in srgb,var(--ink) 9%,transparent);color:var(--ink);border-radius:15px 15px 15px 4px}
.c-out{align-self:flex-end;background:var(--acc);color:var(--acc-ink);border-radius:15px 15px 4px 15px}

/* 4 · a document page. Lighter than the page around it, with margins. */
.fx-page{background:color-mix(in srgb,var(--ink) 11%,var(--surface));border:1px solid var(--surface-line)}
.fx-page .scene{padding:22px 34px 26px}
.pg-pill{
  align-self:flex-end;display:inline-flex;align-items:center;gap:7px;
  font-size:var(--fs-3xs);font-weight:600;color:var(--acc);
  border:1px solid var(--surface-line);border-radius:100px;padding:5px 11px;
  background:color-mix(in srgb,var(--acc) 9%,transparent);
}
.pg-time{font-variant-numeric:tabular-nums}
.dot2{width:6px;height:6px;border-radius:50%;background:var(--acc);animation:pulse2 1.5s ease-in-out infinite}
@keyframes pulse2{0%,100%{opacity:1}50%{opacity:.25}}
.pg-line{font-size:var(--fs-sm);line-height:1.75;color:var(--ink);margin:0}
.d4 .track{position:relative;height:3px;border-radius:3px;background:color-mix(in srgb,var(--ink) 14%,transparent);margin-top:2px}
.d4 .fill{position:absolute;inset:0;border-radius:3px;background:var(--acc);transform-origin:left;transform:scaleX(0);animation:d4fill 11s linear infinite}
@keyframes d4fill{0%{transform:scaleX(0)}92%,100%{transform:scaleX(1)}}
.d4 .tick{position:absolute;left:30%;top:-4px;bottom:-4px;width:1px;background:var(--mute);opacity:.7}
.d4 .tickrow{font-size:var(--fs-3xs);color:var(--mute);margin-left:22%;margin-top:-6px}

/* 5 · a checklist. Rows and tick circles — no window anywhere. */
.fx-list{background:var(--surface);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--surface-line)}
.l-head{padding:14px 18px 0;font-size:var(--fs-2xs);font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.fx-list .scene{gap:0;padding:10px 18px 18px}
.l-row{display:flex;align-items:center;gap:11px;padding:11px 0;font-size:var(--fs-sm);color:var(--ink);border-bottom:1px solid var(--surface-line)}
.l-row:last-of-type{border-bottom:none}
.l-tick{width:15px;height:15px;border-radius:50%;border:1.5px solid var(--mute);flex:none}
.l-tick.done{background:var(--acc);border-color:var(--acc)}

/* --- shared scene animations --------------------------------------------- */
.scene .hudlet{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  font-size:var(--fs-2xs);font-weight:600;color:var(--acc-ink);background:var(--acc);
  border-radius:100px;padding:6px 12px;
}
.scene .hudlet .lvl{display:flex;gap:2.5px;align-items:center;height:11px}
.scene .hudlet .lvl i{width:2.5px;border-radius:2px;background:currentColor;height:11px}
.scene .keys{position:absolute;right:var(--pad);bottom:var(--pad);display:flex;gap:5px}
.scene .keys kbd{font-family:var(--mono);font-size:var(--fs-3xs);padding:4px 7px;border-radius:5px;
  background:color-mix(in srgb,var(--ink) 9%,transparent);color:var(--mute)}

.d1 .type1{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;animation:d1type 9s steps(34) infinite}
@keyframes d1type{0%,14%{width:0}52%,88%{width:34ch}100%{width:0}}
.d1 .caret{animation:blinkc .9s step-end infinite}
@keyframes blinkc{50%{opacity:0}}
.d1 .hudlet{animation:d1hud 9s infinite}
@keyframes d1hud{0%,6%{opacity:0;transform:translateY(4px)}12%,54%{opacity:1;transform:none}62%,100%{opacity:0;transform:translateY(4px)}}
.d1 .hudlet .lvl i{animation:d1lvl .85s ease-in-out infinite}
.d1 .hudlet .lvl i:nth-child(2){animation-delay:.1s}
.d1 .hudlet .lvl i:nth-child(3){animation-delay:.2s}
.d1 .hudlet .lvl i:nth-child(4){animation-delay:.3s}
.d1 .hudlet .lvl i:nth-child(5){animation-delay:.4s}
@keyframes d1lvl{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.d1 .keys kbd{animation:d1key 9s infinite}
.d1 .keys kbd:nth-child(2){animation-delay:.06s}
.d1 .keys kbd:nth-child(3){animation-delay:.12s}
@keyframes d1key{0%,4%{background:color-mix(in srgb,var(--ink) 9%,transparent);color:var(--mute)}
  9%,52%{background:var(--acc);color:var(--acc-ink)}62%,100%{background:color-mix(in srgb,var(--ink) 9%,transparent);color:var(--mute)}}

/* inline-grid stacks both words in one cell, so the span sizes to the wider of
   the two and the sentence never shifts or leaves a gap mid-swap */
.d2 .swap{position:relative;display:inline-grid}
.d2 .old,.d2 .new{grid-area:1/1}
.d2 .mark{position:absolute;inset:-3px -5px;border-radius:5px;background:var(--acc);transform:scaleX(0);transform-origin:left;opacity:0;animation:d2mark 8s infinite}
@keyframes d2mark{0%,34%{transform:scaleX(0);opacity:0}42%,56%{transform:scaleX(1);opacity:.26}70%,100%{transform:scaleX(1);opacity:0}}
.d2 .new{color:var(--acc);opacity:0;animation:d2in 8s infinite}
.d2 .old{animation:d2out 8s infinite}
@keyframes d2out{0%,54%{opacity:1;filter:blur(0)}60%,100%{opacity:0;filter:blur(3px)}}
@keyframes d2in{0%,54%{opacity:0;filter:blur(3px)}62%,100%{opacity:1;filter:blur(0)}}
.d2 .said{animation:saidIn 8s infinite}
@keyframes saidIn{0%,12%{opacity:0;transform:translateY(6px)}20%,66%{opacity:1;transform:none}78%,100%{opacity:0;transform:translateY(6px)}}

.d3 .vanish{animation:d3go 7.5s infinite;overflow:hidden}
@keyframes d3go{0%,52%{opacity:1;max-height:60px;transform:none;filter:blur(0)}
  66%{opacity:0;max-height:60px;transform:translateX(14px);filter:blur(4px)}
  72%,94%{opacity:0;max-height:0;padding-top:0;padding-bottom:0}
  100%{opacity:1;max-height:60px;filter:blur(0)}}
.d3 .said{animation:saidIn 7.5s infinite}

.d4 .pg-line{opacity:0;transform:translateY(6px)}
.d4 .l1{animation:d4line 11s infinite;animation-delay:.6s}
.d4 .l2{animation:d4line 11s infinite;animation-delay:3.6s}
.d4 .l3{animation:d4line 11s infinite;animation-delay:6.6s}
@keyframes d4line{0%{opacity:0;transform:translateY(6px)}6%,86%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(6px)}}

.d5 .voc{position:relative;color:var(--acc);font-weight:600}
.d5 .voc::after{content:"";position:absolute;left:-3px;right:-3px;bottom:-2px;height:2px;background:var(--acc);transform:scaleX(0);transform-origin:left;border-radius:2px}
.d5 .v1::after{animation:d5u 9s infinite;animation-delay:.4s}
.d5 .v2::after{animation:d5u 9s infinite;animation-delay:1.5s}
@keyframes d5u{0%{transform:scaleX(0)}10%,78%{transform:scaleX(1)}90%,100%{transform:scaleX(0)}}
.d5 .chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.d5 .chips span{font-size:var(--fs-2xs);color:var(--mute);border:1px solid var(--surface-line);border-radius:100px;padding:5px 11px}
.d5 .chips span:nth-child(1){animation:d5chip 9s infinite;animation-delay:.4s}
.d5 .chips span:nth-child(2){animation:d5chip 9s infinite;animation-delay:1.5s}
@keyframes d5chip{0%,4%{border-color:var(--surface-line);color:var(--mute)}12%,74%{border-color:var(--acc);color:var(--acc)}86%,100%{border-color:var(--surface-line);color:var(--mute)}}


/* --- 14. Merged commands block ------------------------------------------- */
.cmds{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap)}
@media(max-width:640px){.cmds{grid-template-columns:1fr}}
.cmd{
  background:var(--surface);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid var(--surface-line);border-radius:var(--r-card);
  padding:var(--pad);display:flex;flex-direction:column;gap:7px;
}
.cmd b{font-size:var(--fs-md);font-weight:600;color:var(--acc);letter-spacing:-.01em}
.cmd span{font-size:var(--fs-sm);color:var(--mute);line-height:1.5}
.cmds-foot{margin:var(--s6) auto 0;max-width:var(--read);font-size:var(--fs-sm);color:var(--mute);line-height:1.65}

/* --- 15. Pricing table ---------------------------------------------------
   A real comparison table: features down the left, two columns across. Marks
   are cell VALUES, not icons decorating a label, which keeps the house rule
   ("no icons before text") intact while still reading as a tick sheet. */
.ptable{
  background:var(--surface);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid var(--surface-line);border-radius:var(--r-card);overflow:hidden;
}
.prow{display:grid;grid-template-columns:1.6fr 1fr 1fr;align-items:center;
  border-top:1px solid var(--surface-line)}
.prow:first-child{border-top:none}
.pcell{padding:14px var(--pad);text-align:center;font-size:var(--fs-sm)}
.pcell.pfeat{text-align:left;color:var(--mute)}
.pcell.ppro{background:color-mix(in srgb,var(--acc) 7%,transparent)}

.phead .pcell{padding:var(--pad);display:flex;flex-direction:column;gap:4px}
.pname{font-size:var(--fs-xs);font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.pamt{font-family:var(--fd);font-size:38px;font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.phead .ppro .pamt{color:var(--acc)}
.pper{font-size:var(--fs-xs);color:var(--mute);line-height:1.45}

.yes,.no{display:inline-block;width:17px;height:17px;position:relative}
.yes::before,.yes::after{content:"";position:absolute;background:var(--acc);border-radius:2px}
.yes::before{width:6px;height:2px;left:1px;top:9px;transform:rotate(45deg)}
.yes::after{width:12px;height:2px;left:4px;top:7px;transform:rotate(-50deg)}
.no::before{content:"";position:absolute;width:11px;height:2px;left:3px;top:8px;
  background:var(--mute);opacity:.45;border-radius:2px}

.pfoot .pcell{padding:var(--pad);display:flex;flex-direction:column;gap:10px;align-items:center}
.pnote{font-size:var(--fs-xs);color:var(--mute);line-height:1.5;max-width:26ch}
.btn.small{font-size:var(--fs-sm);padding:11px 20px}

.pafter{margin:var(--s6) auto 0;max-width:var(--read);text-align:center}
.pafter p{font-size:var(--fs-md);line-height:1.7;color:var(--mute);margin-bottom:var(--s4)}
.pafter p:last-child{margin-bottom:0}
.pafter b{color:var(--ink);font-weight:600}
.pfine{font-size:var(--fs-sm) !important}

@media(max-width:760px){
  .prow{grid-template-columns:1fr}
  .phead{grid-template-columns:1fr 1fr}
  .phead .pfeat{display:none}
  .pcell.pfeat{text-align:center;padding-bottom:4px;color:var(--ink)}
  .pcell[data-l]{padding-top:4px}
  .pcell[data-l]::before{content:attr(data-l) "  ";font-size:var(--fs-2xs);color:var(--mute);margin-right:8px}
  .prow:not(.phead):not(.pfoot){padding-bottom:10px}
  .pfoot{grid-template-columns:1fr}
}

/* --- 16. Footer, with room for SEO --------------------------------------- */
footer{border-top:1px solid var(--line);padding:var(--section) 0 var(--s8);margin-top:0}
.foot-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--gap);text-align:left}
@media(max-width:880px){.foot-top{grid-template-columns:1fr 1fr;gap:var(--s6)}}
@media(max-width:520px){.foot-top{grid-template-columns:1fr}}
.foot-brand p{font-size:var(--fs-sm);color:var(--mute);line-height:1.6;margin-top:14px;max-width:34ch}
.foot-made{font-size:var(--fs-xs) !important;opacity:.8}
.foot-nav h4{font-size:var(--fs-2xs);font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);margin-bottom:14px;font-weight:400}
.foot-nav{display:flex;flex-direction:column;gap:10px}
.foot-nav a{font-size:var(--fs-sm);color:var(--ink);text-decoration:none;opacity:.85}
.foot-nav a:hover{color:var(--acc);opacity:1}
.foot-bottom{
  display:flex;flex-wrap:wrap;gap:var(--s5);justify-content:space-between;
  margin-top:var(--section);padding-top:var(--s5);border-top:1px solid var(--line);
  font-size:var(--fs-2xs);color:var(--mute);
}

/* ==========================================================================
   17. DESIGN PASS — spacing, hierarchy, and the small elements that make a
   page feel composed rather than assembled. Later in the file on purpose:
   these are the intended values and they win.
   ========================================================================== */

/* --- vertical rhythm: one gap between movements, tight inside them ------- */
.sec{padding:var(--section) 0}
.sec + .sec{padding-top:0}
.sec.tight{padding-top:0}
.hero{padding:clamp(80px,11vh,140px) 0 0}
.mac{margin-top:clamp(48px,7vh,84px)}
.closer{padding:var(--section) 0}
@media(max-width:640px){:root{--section:84px;--pad:22px}}

/* --- section headers: eyebrow, title, one line. That is the whole pattern. */
.sec-h{text-align:center;margin-bottom:clamp(40px,5vh,64px)}
.sec-h.narrow{max-width:var(--read);margin-left:auto;margin-right:auto}
.brow{
  display:block;font-family:var(--mono);font-size:var(--fs-3xs);letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute);margin-bottom:18px;
}
.sec-h h2{font-size:clamp(30px,4.4vw,46px);line-height:1.04;letter-spacing:-.03em}
.sec-h h2.h-small{font-size:clamp(24px,3vw,32px)}
.sec-h p{
  color:var(--mute);font-size:var(--fs-md);line-height:1.65;
  max-width:var(--read);margin:20px auto 0;
}
.sec-h p + p{margin-top:14px}

/* --- hero ---------------------------------------------------------------- */
h1{font-size:clamp(40px,6.6vw,74px);line-height:1.0;letter-spacing:-.035em}
.hero .dek{font-size:clamp(17px,2vw,20px);max-width:none;margin-top:24px}
.eyebrow{font-size:var(--fs-2xs);padding:6px 15px 6px 11px;margin-bottom:28px;letter-spacing:.01em}
.btn{padding:14px 26px;border-radius:13px;font-size:var(--fs-sm)}
.btn:hover{transform:translateY(-1px)}
.micro{font-size:var(--fs-2xs);margin-top:18px;letter-spacing:.01em}

/* --- commands: quieter, tighter, no paragraph ---------------------------- */
.cmds{grid-template-columns:repeat(4,1fr);gap:var(--gap)}
@media(max-width:880px){.cmds{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.cmds{grid-template-columns:1fr}}
.cmd{padding:24px 20px;gap:9px;text-align:center;align-items:center}
.cmd b{font-size:var(--fs-sm)}
.cmd span{font-size:var(--fs-xs)}
.cmds-foot{display:none}

/* --- steps: the number is the graphic --------------------------------- */
.steps{grid-template-columns:repeat(3,1fr);gap:var(--gap)}
@media(max-width:760px){.steps{grid-template-columns:1fr}}
.steps li{
  padding:30px 24px 28px;display:flex;flex-direction:column;gap:8px;
  align-items:center;text-align:center;
}
.steps li::before{
  position:static;font-family:var(--fd);font-size:34px;font-weight:600;
  color:var(--acc);opacity:.32;line-height:1;margin-bottom:6px;letter-spacing:-.03em;
}
.steps li b{font-size:var(--fs-md);color:var(--ink);font-weight:600}
.steps li span{font-size:var(--fs-sm);color:var(--mute);line-height:1.5;max-width:24ch}

/* --- demos: more air, calmer copy column --------------------------------- */
.demos{gap:clamp(56px,8vh,92px)}
.demo-row{grid-template-columns:.85fr 1.15fr;gap:clamp(28px,4vw,64px)}
.demo-copy{padding:0}
.demo-n{
  font-size:var(--fs-2xs);letter-spacing:.22em;color:var(--acc);opacity:.75;margin-bottom:16px;
  font-variant-numeric:tabular-nums;
}
.demo-copy h3{font-size:clamp(22px,2.6vw,30px);letter-spacing:-.028em;margin-bottom:14px}
.demo-copy p{font-size:var(--fs-md);line-height:1.6;max-width:28ch}

/* --- pricing: give the free-tier promise real weight --------------------- */
.pafter{margin-top:var(--s7);max-width:var(--read)}
.pkeep{
  font-size:var(--fs-md) !important;line-height:1.7;color:var(--ink) !important;
  border-top:1px solid var(--surface-line);padding-top:var(--s5);
}
.pkeep b{color:var(--acc)}
.pfine{margin-top:var(--s5) !important;font-size:var(--fs-sm) !important;color:var(--mute) !important}
.pamt{font-size:clamp(34px,4vw,44px)}
.pcell{padding:15px var(--pad)}
.prow:hover .pfeat{color:var(--ink)}
.prow{transition:none}

/* --- faq: quieter rows --------------------------------------------------- */
.faq{max-width:var(--read);margin:0 auto;text-align:left}
.faq summary{justify-content:space-between;padding:22px 0;gap:24px}
.faq h4{font-size:var(--fs-md)}
.faq .ans{padding:0 0 24px}
.faq .ans p{max-width:none;font-size:var(--fs-sm)}

/* --- close --------------------------------------------------------------- */
.closer h2{font-size:clamp(30px,4.6vw,48px);max-width:16ch}
.signup{margin-top:var(--s7);max-width:400px}
.signup .lab{display:none}
.form-note{margin-top:14px;text-align:center}

/* --- footer -------------------------------------------------------------- */
footer{padding:var(--section) 0 var(--s7)}
.foot-bottom{margin-top:var(--s8)}

/* ==========================================================================
   18. REFINEMENT — measure, type consistency, and surfaces.
   ========================================================================== */

/* --- 18.1 measure: nothing wraps after four words ------------------------ */
.demo-copy p{max-width:36ch;font-size:var(--fs-md);line-height:1.6}
.steps li span{max-width:32ch}
.cmd span{max-width:none}
.pnote{max-width:32ch}
.sec-h p{max-width:var(--read)}
.foot-brand p{max-width:38ch}
@media(max-width:880px){.demo-copy p{max-width:46ch;margin-left:auto;margin-right:auto}}

/* --- 18.2 type: anything that acts as a title uses the display face ------
   `b` inside a card was inheriting the UI face while a sibling h3 used the
   display face, so two things doing the same job looked like two systems. */
.steps li b,
.cmd b,
.c-head span,
.w-app,
.pkeep b{
  font-family:var(--fd);
  letter-spacing:-.018em;
  font-weight:600;
}
.steps li b{font-size:var(--fs-md)}
.cmd b{font-size:var(--fs-md);letter-spacing:-.012em}
h3,h4{letter-spacing:-.024em}

/* labels are the one deliberate exception: mono, uppercase, tracked out */
.brow,.demo-n,.pname,.p-meta,.l-head,.foot-nav h4{font-family:var(--mono);font-weight:400}

/* --- 18.3 surfaces: real material, not flat rectangles ------------------- */
.cmd,.steps li,.tier,.ptable,.demo-box,.beat,.rail>div{
  background-image:linear-gradient(180deg,
    color-mix(in srgb,var(--ink) 3%,transparent) 0%,
    transparent 42%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb,var(--ink) 6%,transparent),
    0 1px 2px rgba(0,0,0,.18);
  transition:border-color var(--e-micro),transform var(--e-micro);
}
.cmd:hover,.steps li:hover{border-color:color-mix(in srgb,var(--acc) 26%,transparent)}
.demo-box{
  box-shadow:
    inset 0 1px 0 color-mix(in srgb,var(--ink) 7%,transparent),
    0 28px 60px -30px rgba(0,0,0,.72);
}
.ptable{box-shadow:inset 0 1px 0 color-mix(in srgb,var(--ink) 6%,transparent),0 20px 48px -32px rgba(0,0,0,.6)}

.btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.btn.ghost{box-shadow:inset 0 0 0 1px var(--line),inset 0 1px 0 color-mix(in srgb,var(--ink) 6%,transparent)}
.eyebrow{background:color-mix(in srgb,var(--ink) 4%,transparent);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--ink) 6%,transparent)}

/* --- 18.4 a divider between movements, so the page has joints ----------- */
.sec + .sec > .wrap:first-child .brow{position:relative}
.sec + .sec > .wrap:first-child .brow::before{
  content:"";position:absolute;left:50%;top:-56px;transform:translateX(-50%);
  width:1px;height:34px;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--acc) 45%,transparent));
}
.sec + .sec > .wrap:first-child .brow::after{
  content:"";position:absolute;left:50%;top:-20px;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--acc);opacity:.55;
}

/* --- 18.5 alignment: one centred axis, everywhere ----------------------- */
.wrap>.sec-h,.wrap>.cmds,.wrap>.steps,.wrap>.ptable,.wrap>.faq,.wrap>.pafter{margin-left:auto;margin-right:auto}
.demos{margin-left:auto;margin-right:auto}
.demo-copy{display:flex;flex-direction:column;align-items:center;justify-content:center}

/* --- 18.6 pricing table polish ------------------------------------------ */
.prow:not(.phead):not(.pfoot):nth-of-type(even) .pfeat{background:color-mix(in srgb,var(--ink) 2%,transparent)}
.pcell.ppro{box-shadow:inset 1px 0 0 color-mix(in srgb,var(--acc) 16%,transparent)}
.phead .ppro{background:color-mix(in srgb,var(--acc) 11%,transparent)}
.pfoot .ppro{background:color-mix(in srgb,var(--acc) 9%,transparent)}

/* --- 18.7 no orphans. Balance short copy, tidy long copy. ---------------- */
.demo-copy p,.steps li span,.cmd span,.pnote,.micro,.hero .dek,.sec-h p,.form-note{
  text-wrap:balance;
}
.pkeep,.faq .ans p,.foot-brand p{text-wrap:pretty}
h1,h2,h3,h4,.cmd b,.steps li b{text-wrap:balance}

/* --- 16. The two promise cards, under the pricing table -------------------
   Appended last on purpose: .pafter is styled in three earlier places
   (sections 15 and the refinement pass) and every one of those assumed a
   narrow centred column of paragraphs. Overriding here, at the end, is the
   honest fix — going back to edit three scattered blocks would leave the
   next person guessing which one is live. */
.pafter{
  max-width:none;                      /* was --read; now matches the table */
  margin:var(--s6) auto 0;
  display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);
  text-align:left;
}
.pafter p{margin-bottom:0;font-size:var(--fs-sm);line-height:1.6;color:var(--mute)}

.pcard{
  background:var(--surface);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid var(--surface-line);border-radius:var(--r-card);
  padding:var(--pad);
  display:flex;flex-direction:column;gap:var(--s3);
}
/* The mono eyebrow, same family as .pname / .brow so the page keeps one voice */
.pcard-k{
  font-family:var(--mono);font-size:var(--fs-2xs);font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mute);
}
.pcard h3{font-size:var(--fs-xl);letter-spacing:-.02em;color:var(--ink)}

/* Card A — what stays free. Text-only chips: the house rule bans icons before
   text, and six ticks would have been six icons. */
.pchips{list-style:none;padding:0;margin:auto 0 0;display:flex;flex-wrap:wrap;gap:7px;padding-top:var(--s2)}
.pchips li{
  font-size:var(--fs-xs);color:var(--mute);line-height:1;
  border:1px solid var(--surface-line);border-radius:100px;padding:7px 12px;
}

/* Card B — the only discount there will ever be, so it gets the accent edge
   and the price set at the same size as the table's own figures. No struck
   -through $43: that is banned outright, and the saving is stated in words. */
.pcard-student{
  border-color:color-mix(in srgb,var(--acc) 42%,transparent);
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--acc) 9%,transparent),transparent 62%),
    var(--surface);
}
.pcard-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.poff{
  font-family:var(--fu);font-size:var(--fs-2xs);font-weight:700;letter-spacing:-.005em;
  background:var(--acc);color:var(--acc-ink);
  border-radius:100px;padding:5px 11px;line-height:1;white-space:nowrap;
}
.pstud-amt{display:flex;align-items:baseline;gap:9px;margin:2px 0 0}
.pstud-amt b{
  font-family:var(--fd);font-size:clamp(34px,4vw,44px);font-weight:600;
  letter-spacing:-.03em;line-height:1;color:var(--acc);
}
.pstud-amt span{font-size:var(--fs-sm);color:var(--mute)}
.pstud-link{
  margin-top:auto;align-self:flex-start;
  font-size:var(--fs-sm);font-weight:600;color:var(--acc);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--acc) 45%,transparent);
  padding-bottom:1px;transition:border-color var(--e-micro);
}
.pstud-link:hover{border-bottom-color:var(--acc)}

@media(max-width:760px){
  .pafter{grid-template-columns:1fr}
}


/* ==========================================================================
   Document pages — privacy, terms, refunds, students
   --------------------------------------------------------------------------
   Legal text is the one place on this site that is read rather than scanned,
   so it gets a left-aligned narrow measure instead of the centred marketing
   rhythm. Nobody has ever enjoyed reading a centred privacy policy.

   Deliberately plain: no cards, no accent panels, no icons. A legal page that
   looks designed reads as marketing, which is the opposite of what it is for.
   ========================================================================== */
.doc{max-width:var(--read);margin:0 auto;text-align:left}
.doc-head{margin-bottom:var(--s7)}
.doc-head h1{margin-bottom:var(--s3)}
.doc-updated{color:var(--mute);font-size:var(--fs-sm)}
.doc h2{color:var(--ink);font-size:var(--fs-2xl);margin:var(--s7) 0 var(--s3);text-align:left}
.doc h3{color:var(--ink);font-size:var(--fs-lg);margin:var(--s6) 0 var(--s2);text-align:left}
.doc p,.doc li{color:var(--mute);font-size:var(--fs-md);line-height:1.7}
.doc p{margin:0 0 var(--s4)}
.doc ul{margin:0 0 var(--s4);padding-left:1.25em}
.doc li{margin-bottom:var(--s2)}
.doc strong{color:var(--ink);font-weight:600}
.doc a{color:var(--acc)}
.doc hr{border:0;border-top:1px solid var(--line);margin:var(--s7) 0}

/* The short-version table at the top of the privacy policy. It is the only
   part most people read, so it comes first and is the one styled element. */
.doc-summary{width:100%;border-collapse:collapse;margin:0 0 var(--s6)}
.doc-summary td{padding:var(--s3) 0;border-bottom:1px solid var(--line);
  font-size:var(--fs-md);line-height:1.55;vertical-align:top}
.doc-summary td:first-child{color:var(--ink);padding-right:var(--s5);width:42%}
.doc-summary td:last-child{color:var(--mute)}

/* A quiet note at the end of a document — contact details, mostly. */
.doc-note{border-top:1px solid var(--line);margin-top:var(--s7);padding-top:var(--s5)}
.doc-note p{margin-bottom:var(--s2)}

@media (max-width:600px){
  .doc-summary td{display:block;border-bottom:0;padding:2px 0}
  .doc-summary td:first-child{width:auto;padding-right:0;padding-top:var(--s3)}
  .doc-summary tr{display:block;border-bottom:1px solid var(--line);padding-bottom:var(--s3)}
}



/* ------------------------------------------------------- hero brand block
   The plain lockup and the pronunciation. NOTE: this must stay ABOVE the
   mascot block below — pen/mascot.py rewrites its own section by deleting
   from its marker to the end of the file, so anything after it is lost. */
.brandblock{display:flex;flex-direction:column;align-items:center;gap:.5rem;
            margin:0 0 2rem;text-align:center}
/* The hero lockup is a canvas, and it is bigger than the mark it draws: it
   carries 230 units of headroom for the bird's head and 170 either side for
   the rings leaving the o. Those margins pull the padding back out of the
   layout so the logo lands exactly where the static SVG did -- the numbers are
   fractions of the canvas WIDTH, because that is the one dimension CSS lets a
   calc() see. Change the padding in forge/pen/canvasfx.py and these move. */
.bl-logo{--w:min(518px,92vw);
         width:var(--w);height:auto;aspect-ratio:1984/1040;display:block;
         margin-top:calc(var(--w) * -.2201);
         margin-bottom:calc(var(--w) * -.0232)}
.bl-logo--static{--w:min(430px,72vw);aspect-ratio:1645/525;margin:0}
.pron{margin:.35rem 0 0;font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.30em;
      color:var(--mute);display:flex;gap:.12em;align-items:baseline;line-height:1}
.pron span{color:var(--ink)}
.pron i{color:var(--acc);font-style:normal}
.pron-note{margin:.15rem 0 0;font-size:var(--fs-2xs);color:var(--mute);line-height:1.4}
.pron-note i{color:var(--acc);font-style:normal;padding:0 .1em}
@media (max-width:720px){
  .bl-logo{--w:min(362px,96vw)}
  .bl-logo--static{--w:min(300px,80vw)}
  .pron{font-size:var(--fs-3xs);letter-spacing:.24em}
  .pron-note{font-size:var(--fs-3xs)}
}


/* ----------------------------------------------------------- the bird layer
   SPEC-C section 3. There is exactly one bird and it lives on canvas. The
   engine creates and owns #sky-bird itself and styles it inline, so nothing
   here can break it and no generator can leave orphan markup behind — delete
   mynato-sky.js and the page is simply a page.

   The two rules below are the ones a stylesheet still has to carry. */

/* Reduce transparency: the OS asked for solid surfaces, so the glass goes.
   Contrast RISES in both light modes and stays above AA 4.5:1 in both dark
   ones (Moss --mute-on-surface 5.19 -> 5.02, Myna 5.45 -> 5.29). */
@media (prefers-reduced-transparency: reduce){
  :root{ --surface:rgba(22,30,25,.94) }
  :root[data-theme="light"]{ --surface:rgba(250,251,249,.95) }
  :root[data-brand="myna"]{ --surface:rgba(23,26,30,.94) }
  :root[data-brand="myna"][data-theme="light"]{ --surface:rgba(255,253,248,.95) }
  @media (prefers-color-scheme: light){
    :root:not([data-theme="dark"]){ --surface:rgba(250,251,249,.95) }
    :root[data-brand="myna"]:not([data-theme="dark"]){ --surface:rgba(255,253,248,.95) }
  }
  .mbar,.win,.beat,.rail>div,.say,.steps li,.tier,.shot,.w-inner,
  .fx-paper,.fx-chat,.fx-list,.cmd,.ptable,.pcard{
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
}

/* "Never hides text" includes paper. Firefox stamps fixed and absolute
   full-bleed layers onto EVERY printed page; the bird canvas is created by
   script and has no other stylesheet hook, so this rule is the only thing
   keeping it off a printout. */
@media print{
  #sky,#sky-bird{ display:none !important }
}

/* ---------------------------------------------------------------- headings
   Every display heading is the accent, not the ink. Franz's call, 2026-08-26.

   This is one rule and one colour: the same --acc the buttons use, so the
   page still has exactly one accent and no second colour. Body copy, labels,
   and the bolded runs inside paragraphs stay ink — turning those green too
   would make the accent mean nothing, which is the failure mode this avoids.

   The Free tier's $0 is included because it reads as a heading, not a figure;
   the Premium price was already accent (.phead .ppro .pamt above). */
h1,
.sec-h h2,
.demo-copy h3,
.closer h2,
.prose h2,
.doc h2,
.pcard h3,
.pamt{
  color:var(--acc);
}

/* --------------------------------------------------------------- elevation
   The background is a field with real depth in it now, and a card sitting on
   that field with a 1px contact shadow does not look like it is in front of
   anything — it looks printed onto it. These are cast shadows: a tight contact
   edge, a mid falloff, and a wide ambient that reaches well past the box.

   --elev-k scales the whole system per theme. Dark rooms take a heavy shadow;
   on the light themes the same values read as grime, so they run at 40%. */
:root{ --elev-k:1 }
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){ --elev-k:.4 } }
:root[data-theme="light"]{ --elev-k:.4 }
:root[data-theme="dark"]{ --elev-k:1 }

.cmd,.steps li,.tier,.beat,.rail>div,.say,.shot,.pcard,.w-inner{
  box-shadow:
    inset 0 1px 0 color-mix(in srgb,var(--ink) 6%,transparent),
    0 1px 2px rgba(0,0,0,calc(.20 * var(--elev-k))),
    0 6px 14px -6px rgba(0,0,0,calc(.30 * var(--elev-k))),
    0 22px 44px -22px rgba(0,0,0,calc(.55 * var(--elev-k)));
}
.ptable,.demo-box{
  box-shadow:
    inset 0 1px 0 color-mix(in srgb,var(--ink) 7%,transparent),
    0 2px 4px rgba(0,0,0,calc(.22 * var(--elev-k))),
    0 30px 64px -28px rgba(0,0,0,calc(.68 * var(--elev-k)));
}
/* The buttons keep their lit top edge and gain a small one of their own —
   they are the thing you are meant to reach for, so they sit highest. */
.btn{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 2px 5px rgba(0,0,0,calc(.24 * var(--elev-k))),
    0 10px 22px -10px rgba(0,0,0,calc(.42 * var(--elev-k)));
}
.btn.ghost{
  box-shadow:
    inset 0 0 0 1px var(--line),
    inset 0 1px 0 color-mix(in srgb,var(--ink) 6%,transparent),
    0 2px 5px rgba(0,0,0,calc(.18 * var(--elev-k)));
}

/* ------------------------------------------------------------ accent switch
   Two colour chips, no words. "Moss" and "Myna" meant nothing to anyone who
   had not read the brand doc — they read as product names, not as a choice
   between two colours, and a pill of two words in the header competed with
   the nav for attention. A swatch says what it does by being the thing it
   does. The words stay in the accessible name and the tooltip, where they
   cost a sighted reader nothing. */
.brandsw{ gap:4px; padding:3px }
.brandsw button{ padding:4px; line-height:0; border-radius:999px }
.brandsw button:hover{ background:color-mix(in srgb,var(--ink) 8%,transparent) }
.brandsw button[aria-pressed="true"]{ background:transparent }
.brandsw .sw{
  display:block; width:15px; height:15px; border-radius:999px;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,#000 22%,transparent);
  transition:transform var(--e-state),box-shadow var(--e-state);
}
.sw-moss{ background:#5FC38C }
.sw-myna{ background:#F2B933 }
/* The ring, not a fill, marks the live one: a filled pill hid the very colour
   the control exists to show. */
.brandsw button[aria-pressed="true"] .sw{
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb,#000 22%,transparent),
    0 0 0 2px var(--bg),
    0 0 0 3.5px currentColor;
}
.brandsw button[data-set-brand="moss"][aria-pressed="true"]{ color:#5FC38C }
.brandsw button[data-set-brand="myna"][aria-pressed="true"]{ color:#F2B933 }
.brandsw button[aria-pressed="false"] .sw{ opacity:.55 }
.brandsw button[aria-pressed="false"]:hover .sw{ opacity:1; transform:scale(1.06) }
@media(max-width:520px){ .brandsw .sw{ width:14px; height:14px } }

/* ------------------------------------------------------------------ footer
   The old one was three columns in a four-column grid: the Learn column is
   deliberately absent until the guides exist, so everything crowded into the
   left two thirds and the right third sat empty. It read as unfinished, and a
   footer that reads as unfinished says the product is too.

   Four real columns now — Product, Company, Legal — with Legal pulled out of
   Company on purpose. Buried under "Company" the terms read as an afterthought,
   which is the opposite of the signal they exist to send to a buyer deciding
   whether to trust a one-person product. */
.foot-top{
  /* The link columns size to their CONTENT and the brand column absorbs the
     slack, so the last column ends flush with the right edge of the page.
     With fixed fr tracks the Legal column was a fixed share of the width and
     its three short words left a hundred pixels of nothing hanging off the
     right — the same emptiness the four-column fix was meant to remove, just
     moved along by one column. Flex, not grid: the columns are content-sized
     and space-between spreads them, so the last one ends exactly on the right
     edge no matter how short its words are. */
  display:flex;
  justify-content:space-between;
  gap:var(--s8) var(--gap);
  padding-bottom:var(--s2);
  flex-wrap:wrap;
}
.foot-req{
  font-family:var(--mono);
  font-size:var(--fs-3xs);
  letter-spacing:.04em;
  color:var(--mute);
  opacity:.75;
  margin-top:var(--s4);
}
.foot-nav h4{ color:var(--mute) }
.foot-nav a{
  /* A hit target you can actually hit, and a hover that moves — a dead-still
     list of grey text reads as disabled. */
  padding:1px 0;
  transition:color var(--e-state),opacity var(--e-state),transform var(--e-state);
}
.foot-nav a:hover{ transform:translateX(2px) }

.foot-bottom{
  align-items:center;
  gap:var(--s4) var(--s6);
}
.foot-bottom p{ margin:0 }
.foot-copy{ margin-right:auto }
/* The one line of the product's argument that belongs in a footer. It is the
   architecture, not a marketing claim, so it can stand in the coldest part of
   the page without needing to sell anything. */
.foot-claim{ color:var(--mute) }
.foot-top-link{
  color:var(--mute); text-decoration:none;
  transition:color var(--e-state);
}
.foot-top-link:hover{ color:var(--acc) }
.foot-top-link::after{ content:" \2191" }

.foot-brand{ flex:0 1 36ch }
.foot-nav{ flex:0 0 auto }

@media(max-width:880px){
  .foot-top{ gap:var(--s7) var(--gap) }
  .foot-brand{ flex:1 0 100% }
}
@media(max-width:520px){
  .foot-top{ flex-direction:column }
  .foot-bottom{ flex-direction:column; align-items:flex-start }
  .foot-copy{ margin-right:0 }
}

/* A hairline across the top: without it the footer does not start, it just
   happens — the page runs out of content and grey text appears. */
footer[data-perch]{
  border-top:1px solid var(--line);
  margin-top:var(--section);
  padding-top:var(--s8);
}
.foot-bottom{ justify-content:space-between }
/* One line, not three loose items spread across the width. The copyright and
   the one claim that matters belong together; the only other thing down here
   is the way back up. */
.foot-copy{ margin-right:0 }
.foot-dot{ opacity:.45; padding:0 4px }

/* ------------------------------------------------------------------ guides
   The guide pages carry commands, endpoints and curl lines, which the doc
   styles had no answer for — an unstyled <code> in the middle of a paragraph
   at body weight simply reads as a typo. */
.doc code{
  font-family:var(--mono);
  font-size:.92em;
  color:var(--ink);
  background:color-mix(in srgb,var(--ink) 6%,transparent);
  border-radius:5px;
  padding:.14em .4em;
  /* A curl line is longer than the measure and must scroll, not force the
     whole page sideways. */
  overflow-wrap:anywhere;
}
/* An explicit class, NOT :only-child — that pseudo-class ignores text nodes,
   so "Returns <code>{…}</code>. No token needed." matched it and the sentence
   came apart into three pieces around a block. */
.doc p.cmdline{
  margin-bottom:var(--s4);
}
.doc p.cmdline code{
  display:block;
  padding:var(--s3) var(--s4);
  overflow-x:auto;
  white-space:pre;
  overflow-wrap:normal;
  line-height:1.9;
}
/* An index of headings that are all links wants the links to look like
   headings, not like body links dressed up. */
.doc h2 a{ color:inherit; text-decoration:none }
.doc h2 a:hover{ color:var(--acc) }

/* ------------------------------------------------- the pronunciation, spoken
   It used to be a 12.5px grey whisper wedged under the lockup, which is a
   strange way to treat the one line on the page that tells you how to say the
   product's name. It is bigger now, it sits in its own space below the hero
   logo, and the syllables arrive one at a time with a caret waiting at the end
   — the same thing the app does, performed by the page.

   Syllables, not letters. A typewriter reveal spells a word out; this is a
   pronunciation guide, and it is read in the three beats you would say it in. */
.pron{
  margin:1.15rem 0 .2rem;
  font-size:clamp(15px,1.5vw,19px);
  letter-spacing:.34em;
  gap:.2em;
}
/* :not(.pron-caret) matters — the caret is a span too, and `.pron span` beats
   `.pron-caret` on specificity, so without this the caret inherited the
   syllable animation and faded out with the word instead of blinking. */
.pron span:not(.pron-caret),
.pron i{
  /* One animation, one duration, staggered by delay below: a wave in, a hold,
     and the same wave out. */
  animation:pron-say 7.5s ease-out infinite;
  opacity:0;
}
.pron i:nth-of-type(1){ animation-delay:.20s }
.pron span:nth-of-type(2){ animation-delay:.40s }
.pron i:nth-of-type(2){ animation-delay:.60s }
.pron span:nth-of-type(3){ animation-delay:.80s }
@keyframes pron-say{
  0%   { opacity:0; transform:translateY(3px) }
  4%   { opacity:1; transform:translateY(0) }
  74%  { opacity:1; transform:translateY(0) }
  80%  { opacity:0; transform:translateY(0) }
  100% { opacity:0; transform:translateY(3px) }
}
/* The caret sits where the next syllable would land and blinks the whole time,
   so the line reads as being spoken rather than as text that faded in. */
.pron .pron-caret{
  display:inline-block;
  width:.09em; min-width:1.5px;
  height:1.05em;
  margin-left:-.18em;
  background:var(--acc);
  animation:pron-blink 1.05s step-end infinite;
  transform:translateY(.08em);
}
@keyframes pron-blink{ 0%,50%{opacity:1} 50.01%,100%{opacity:0} }

/* Nothing moves for anyone who asked for less motion — the line is simply
   there, at its full size, which is all it ever needed to be. */
@media (prefers-reduced-motion: reduce){
  .pron span,.pron i{ animation:none; opacity:1; transform:none }
  .pron .pron-caret{ animation:none; opacity:.5 }
}

/* Everything below the lockup moves down with it, so the pronunciation gets
   room instead of taking it from the badge underneath. */
.brandblock{ margin-bottom:2.6rem }
.eyebrow{ margin-bottom:34px }

/* The menu-bar badge carries the real mark now, not a stock microphone. It is
   a tall silhouette rather than a square glyph, so it needs its own box and a
   little more optical weight than a 15px icon would get. */
.eyebrow .eb-mark{
  width:14px; height:18px;
  color:var(--ink);
  opacity:.92;
}

@media (max-width:720px){
  .pron{ font-size:clamp(13px,3.4vw,16px); letter-spacing:.26em; margin-top:.9rem }
  .brandblock{ margin-bottom:2rem }
}