/* Ream — marketing site styles */
:root{
  --bg:#faf4ea; --panel:#fffdf7; --ink:#2e2a23; --muted:#756c5f; --rule:#e7ddcd;
  --accent:#b25c35; --accent-ink:#a15330; --accent-2:#d98c5f; --sel:#f1e7d6; --on-accent:#fff;
  --ok:#5b8a4f; --shadow:0 6px 30px rgba(60,40,20,.08);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --maxw:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%}
/* .wrap owns the page gutter on the INLINE axis only. Any rule that also lands on a
   .wrap element must set its vertical padding with padding-block, never the `padding:
   72px 0` shorthand — that shorthand also writes 0 to left/right, and `section.sec`,
   `.hero`, `.band` and `.strip .row` each either outrank .wrap or come later in the
   file, so they silently ate the gutter and every section sat flush to the screen edge
   on a phone. Invisible on desktop, where max-width leaves margin anyway. Same trap for
   inline style="padding:8px 0 0" on a section. */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:24px}
.serif{font-family:var(--serif)}
.muted{color:var(--muted)}
.center{text-align:center}

/* header */
header.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--rule)}
.nav .row{display:flex;align-items:center;gap:22px;height:64px}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--serif);font-weight:700;font-size:21px;letter-spacing:-.01em}
.brand .mark{width:24px;height:24px;flex:none}
.nav nav{display:flex;gap:22px;margin-left:6px}
.nav nav a{color:var(--muted);font-size:15px}
.nav nav a:hover{color:var(--ink)}
.nav .spacer{flex:1}
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--rule);background:var(--panel);color:var(--ink);border-radius:10px;padding:10px 16px;font:600 15px var(--sans);cursor:pointer;transition:transform .08s ease,box-shadow .15s ease}
.btn:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
.btn.p{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.p:hover{background:#b85a31}
.btn.lg{padding:14px 22px;font-size:16px;border-radius:12px}

/* hero */
.hero{padding-block:84px 40px;text-align:center}
.kicker{display:inline-block;font:600 13px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink);background:color-mix(in srgb,var(--accent) 12%,var(--panel));border:1px solid color-mix(in srgb,var(--accent) 24%,var(--rule));padding:6px 13px;border-radius:999px;margin-bottom:22px}
h1.head{font-family:var(--serif);font-weight:700;font-size:clamp(38px,6vw,64px);line-height:1.04;letter-spacing:-.02em;margin:0 auto 18px;max-width:14ch}

.sub{font-size:clamp(18px,2.3vw,21px);color:var(--muted);max-width:54ch;margin:0 auto 30px}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.fineprint{margin-top:18px;color:var(--muted);font-size:14px}
.fineprint b{color:var(--ink);font-weight:600}

/* editor mock */
.mock{max-width:880px;margin:54px auto 0;background:var(--panel);border:1px solid var(--rule);border-radius:16px;box-shadow:0 24px 70px rgba(60,40,20,.16);overflow:hidden;text-align:left}
.mock .bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--rule);background:color-mix(in srgb,var(--bg) 50%,var(--panel))}
.mock .dot{width:11px;height:11px;border-radius:50%;background:var(--rule)}
.mock .bar .title{margin-left:10px;font-size:13px;color:var(--muted)}
.mock .body{display:grid;grid-template-columns:170px 1fr;min-height:300px}
.mock .side{border-right:1px solid var(--rule);padding:16px 12px;background:color-mix(in srgb,var(--bg) 40%,var(--panel));font-size:13px;color:var(--muted)}
.mock .side .s{padding:7px 9px;border-radius:7px;margin-bottom:2px}
.mock .side .s.on{background:var(--sel);color:var(--ink);font-weight:600}
.mock .doc{padding:30px 34px;position:relative;font-size:16px;line-height:1.7}
.mock .doc h3{font-family:var(--serif);font-size:24px;margin:0 0 14px}
.mock .doc p{margin:0 0 12px;color:#464036}
.mock .ins{position:relative;height:0;border-top:2px solid var(--accent-2);margin:8px 0}
.mock .ins::before{content:"+";position:absolute;left:-12px;top:-12px;width:23px;height:23px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font:600 18px/1 var(--sans)}
.mock .av{position:absolute;right:20px;bottom:18px;width:46px;height:46px;border-radius:50%;background:var(--sel);box-shadow:var(--shadow);display:block}
.mock mark{background:#bfe6b3;border-radius:2px;padding:0 2px;color:#23201c}

/* strip */
.strip{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-top:64px;background:var(--panel)}
.strip .row{display:flex;flex-wrap:wrap;gap:10px 34px;justify-content:center;padding-block:20px;color:var(--muted);font-size:15px}
.strip b{color:var(--ink)}

/* sections */
section.sec{padding-block:72px}
.sec h2{font-family:var(--serif);font-size:clamp(28px,4vw,40px);letter-spacing:-.02em;margin:0 0 14px;text-align:center}
.sec .lead{color:var(--muted);max-width:56ch;margin:0 auto 46px;text-align:center;font-size:18px}

/* feature grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--panel);border:1px solid var(--rule);border-radius:14px;padding:24px;transition:box-shadow .15s ease,transform .08s ease}
.card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.card .ic{width:38px;height:38px;border-radius:10px;background:color-mix(in srgb,var(--accent) 12%,var(--panel));color:var(--accent-ink);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.card .ic svg{width:21px;height:21px}
.card h3{font-size:18px;margin:0 0 7px}
.card p{margin:0;color:var(--muted);font-size:15px;line-height:1.55}
.more-label{text-align:center;margin:42px auto 0;font:600 13px var(--sans);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.more{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 28px;max-width:900px;margin:18px auto 0;list-style:none;padding:0}
.more li{display:flex;align-items:flex-start;gap:10px;font-size:15px;color:#4a443c;line-height:1.45}
.more li svg{width:17px;height:17px;color:var(--accent-ink);flex:none;margin-top:2px}
.more li b{color:var(--ink);font-weight:600}

/* lane / comparison */
.lane{background:var(--panel);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.lane .sec{padding-top:104px}
table.cmp{width:100%;border-collapse:collapse;margin-top:26px;font-size:15px;background:var(--panel);border:1px solid var(--rule);border-radius:12px;overflow:hidden}
table.cmp th,table.cmp td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--rule)}
table.cmp th{background:color-mix(in srgb,var(--bg) 50%,var(--panel));font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
table.cmp tr:last-child td{border-bottom:none}
table.cmp .us{background:color-mix(in srgb,var(--accent) 7%,var(--panel));font-weight:600}
.yes{color:var(--ok);font-weight:700}.no{color:#bf6a52}

/* pricing */
.tiers{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:760px;margin:0 auto}
.tier{background:var(--panel);border:1px solid var(--rule);border-radius:16px;padding:30px;display:flex;flex-direction:column}
.tier.feat{border-color:var(--accent);box-shadow:0 10px 40px rgba(196,102,59,.14);position:relative}
.tier .tag{position:absolute;top:-12px;right:24px;background:var(--accent);color:#fff;font:600 12px var(--sans);padding:5px 11px;border-radius:999px}
.tier h3{font-family:var(--serif);font-size:24px;margin:0 0 4px}
.tier .price{font-size:42px;font-weight:700;letter-spacing:-.02em;margin:8px 0 2px}
.tier .price span{font-size:16px;font-weight:500;color:var(--muted)}
.tier .desc{color:var(--muted);font-size:15px;margin-bottom:18px}
.tier ul{list-style:none;padding:0;margin:0 0 24px;flex:1}
.tier li{padding:8px 0 8px 28px;position:relative;font-size:15px;border-top:1px solid var(--rule)}
.tier li:first-child{border-top:none}
.tier li::before{content:"";position:absolute;left:4px;top:14px;width:12px;height:7px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}

/* faq */
.faq{max-width:720px;margin:0 auto}
.faq details{border:1px solid var(--rule);background:var(--panel);border-radius:12px;padding:4px 18px;margin-bottom:12px}
.faq summary{cursor:pointer;font-weight:600;padding:14px 0;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--accent-ink);font-size:20px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0 0 16px;color:var(--muted);font-size:15px}

/* docs */
.doc-wrap{display:grid;grid-template-columns:220px 1fr;gap:40px;padding-block:48px}
.toc{position:sticky;top:88px;align-self:start;font-size:14px}
.toc a{display:block;padding:6px 10px;border-radius:7px;color:var(--muted)}
.toc a:hover{background:var(--sel);color:var(--ink)}
.prose{max-width:680px}
.prose h2{font-family:var(--serif);font-size:30px;margin:40px 0 8px;scroll-margin-top:84px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:19px;margin:26px 0 6px}
.prose p,.prose li{color:#46403e}
.prose code{background:var(--sel);padding:2px 6px;border-radius:5px;font-size:14px}
.prose kbd{background:var(--panel);border:1px solid var(--rule);border-bottom-width:2px;border-radius:6px;padding:1px 7px;font:13px var(--sans)}
.prose .note{background:var(--panel);border-left:3px solid var(--accent-2);border-radius:0 8px 8px 0;padding:12px 16px;margin:18px 0}

/* Voice DNA band — the first full section after the hero. Pulled out of the .frows list
   so the page makes its second promise (an editor trained on the writer) once, loudly,
   instead of twice two screens apart. */
.vband{background:var(--panel);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding-block:74px}
.vbandin{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.vbtext h2{font-family:var(--serif);font-size:clamp(27px,3.4vw,38px);letter-spacing:-.02em;margin:0 0 14px}
.vbtext>p{color:var(--muted);font-size:17.5px;margin:0 0 20px;max-width:46ch}
.vbpts{list-style:none;padding:0;margin:0 0 26px}
.vbpts li{position:relative;padding:0 0 12px 26px;font-size:15.5px;line-height:1.55;color:var(--muted)}
.vbpts li b{color:var(--ink)}
.vbpts li::before{content:'';position:absolute;left:2px;top:8px;width:9px;height:9px;border-radius:50%;
  background:color-mix(in srgb,var(--accent) 34%,var(--panel));border:1.5px solid var(--accent-2)}
@media(max-width:820px){
  .vbandin{grid-template-columns:1fr;gap:34px}
  .vband{padding-block:56px}
}

/* cta band */
.band{text-align:center;padding-block:76px}
.band h2{font-family:var(--serif);font-size:clamp(28px,4vw,40px);margin:0 0 12px}
.band p{color:var(--muted);max-width:46ch;margin:0 auto 26px;font-size:18px}

/* footer */
footer{border-top:1px solid var(--rule);background:var(--panel);padding:40px 0;font-size:14px;color:var(--muted)}
footer .row{display:flex;flex-wrap:wrap;gap:24px;align-items:center}
footer a:hover{color:var(--ink)}
footer .spacer{flex:1}

/* feature deep-dive rows */
.frows{display:flex;flex-direction:column;gap:60px}
.frow{display:grid;grid-template-columns:1.05fr 1fr;gap:50px;align-items:center}
.frow.rev .ftext{order:2}
.eyebrow{font:600 13px var(--sans);letter-spacing:.05em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:10px}
.ftext h3{font-family:var(--serif);font-size:28px;letter-spacing:-.01em;margin:0 0 12px}
.ftext p{color:var(--muted);margin:0 0 16px;font-size:16px}
.ftext ul{list-style:none;padding:0;margin:0}
.ftext li{position:relative;padding:6px 0 6px 26px;font-size:15px}
.ftext li::before{content:"";position:absolute;left:2px;top:12px;width:11px;height:6px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.fvis{background:var(--panel);border:1px solid var(--rule);border-radius:14px;box-shadow:var(--shadow);padding:20px}

.avstack{display:flex;align-items:center;margin-bottom:14px}
.avstack .av{width:36px;height:36px;border-radius:50%;border:2px solid var(--panel);background:var(--sel);display:block;flex:none}
.avstack .av+.av{margin-left:-10px}
.bub .who .fav{width:20px;height:20px;border-radius:50%;background:var(--sel);vertical-align:-5px;margin-right:6px;display:inline-block}
.avlabel{margin-left:12px;font-size:13px;color:var(--muted)}
.bub{background:color-mix(in srgb,var(--bg) 50%,var(--panel));border:1px solid var(--rule);border-radius:10px;padding:10px 13px;margin-bottom:10px;font-size:14px;line-height:1.5;color:#46403e}
.bub:last-child{margin-bottom:0}
.bub .who{display:block;font:600 12px var(--sans);margin-bottom:3px}

.ch-head{font:600 13px var(--sans);color:#b06a2e;margin-bottom:12px}
.ch-item{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--rule);border-left:3px solid var(--accent-2);border-radius:0 8px 8px 0;margin-bottom:8px;font-size:14px;background:color-mix(in srgb,var(--accent-2) 7%,var(--panel))}
.ch-item span{color:var(--muted);text-align:right;flex:none}
.ch-bible{margin-top:12px;font-size:13px;color:var(--muted);text-align:center;border-top:1px solid var(--rule);padding-top:12px}

.ver{display:flex;justify-content:space-between;padding:9px 12px;border-radius:8px;font-size:14px;margin-bottom:3px}
.ver.on{background:var(--sel)}
.ver .meta{color:var(--muted);font-size:13px}
.ver .meta.up{color:var(--ok)}
.verdiff{margin-top:12px;border-top:1px solid var(--rule);padding-top:12px;font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace}
.verdiff .del{display:block;color:#bf6a52}
.verdiff .add{display:block;color:var(--ok)}

/* --- the room: real editor faces --- */
.room{display:flex;flex-wrap:wrap;justify-content:center;gap:18px 10px;max-width:700px;margin:34px auto 0;padding:0;list-style:none}
.roomed{width:104px;text-align:center}
.roomed img{width:56px;height:56px;border-radius:50%;background:var(--sel);border:2px solid var(--panel);box-shadow:0 3px 12px rgba(60,40,20,.10);display:block;margin:0 auto 7px;transition:transform .18s cubic-bezier(.2,.7,.2,1)}
.roomed:hover img{transform:translateY(-4px) scale(1.06)}
.roomn{display:block;font:600 14px var(--sans);color:var(--ink);line-height:1.25}
.roomr{display:block;font-size:12px;color:var(--muted);line-height:1.3;margin-top:2px;min-height:2.6em}

/* --- Voice DNA: the A/B calibration visual --- */
.vdna{font-size:14px}
.vdnahd{display:flex;align-items:center;gap:8px;font:600 12px var(--sans);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.vdnahd .dim{color:var(--accent-ink)}
.vcand{position:relative;border:1.5px solid var(--rule);border-radius:10px;padding:11px 13px 11px 34px;margin-bottom:9px;line-height:1.55;color:#46403e;background:color-mix(in srgb,var(--bg) 45%,var(--panel));transition:border-color .35s ease,background .35s ease,opacity .35s ease}
.vcand::before{content:attr(data-k);position:absolute;left:11px;top:11px;width:17px;height:17px;border-radius:50%;border:1.5px solid var(--rule);color:var(--muted);font:600 10px/15px var(--sans);text-align:center;transition:all .35s ease}
.vcand.pick{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--panel))}
.vcand.pick::before{content:"\2713";background:var(--accent);border-color:var(--accent);color:#fff;font-size:11px}
.vcand.drop{opacity:.42}
.vrule{display:flex;align-items:flex-start;gap:8px;margin-top:14px;padding:11px 13px;border-radius:10px;background:color-mix(in srgb,var(--ok) 10%,var(--panel));border:1px solid color-mix(in srgb,var(--ok) 30%,var(--rule));font-size:13.5px;line-height:1.5;color:#3d4a37;opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
.vrule.in{opacity:1;transform:none}
.vrule svg{width:16px;height:16px;color:var(--ok);flex:none;margin-top:2px}
.vprog{margin-top:14px;border-top:1px solid var(--rule);padding-top:12px}
.vproglbl{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);margin-bottom:7px}
.vprogbar{height:7px;background:var(--sel);border-radius:5px;overflow:hidden}
.vprogbar i{display:block;height:100%;width:0;background:var(--accent);border-radius:5px;transition:width 1s cubic-bezier(.2,.7,.2,1)}

/* --- wide content scrolls inside itself, never the page --- */
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:26px;border-radius:12px}
.tscroll table.cmp{margin-top:0;min-width:560px}

/* --- mobile nav: a CSS-only disclosure, so the links exist on a phone --- */
.navtoggle{display:none}
.navtoggle summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:42px;height:42px;border:1px solid var(--rule);border-radius:10px;background:var(--panel)}
.navtoggle summary::-webkit-details-marker{display:none}
.navtoggle summary i{display:block;width:17px;height:2px;border-radius:2px;background:var(--ink)}
.navtoggle[open] summary{background:var(--sel)}
.navmenu{position:absolute;left:0;right:0;top:100%;background:var(--panel);border-bottom:1px solid var(--rule);box-shadow:0 14px 34px rgba(60,40,20,.13);padding:8px 0 12px;z-index:60}
.navmenu a{display:block;padding:13px 24px;font-size:16px;color:var(--ink);border-bottom:1px solid color-mix(in srgb,var(--rule) 55%,transparent)}
.navmenu a:last-child{border-bottom:none}
.navmenu a:active{background:var(--sel)}

@media(max-width:820px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .more{grid-template-columns:repeat(2,minmax(0,1fr));max-width:640px}
  .frow{grid-template-columns:1fr;gap:24px}
  .frow.rev .ftext{order:0}
  .tiers{grid-template-columns:1fr}
  .mock .body{grid-template-columns:1fr}
  .mock .side{display:none}
  .doc-wrap{grid-template-columns:1fr;gap:0}
  .toc{display:none}
  .nav nav{display:none}
  .navtoggle{display:block}
  .nav .row{gap:12px;position:relative}
  /* The header's own desktop Docs button is redundant once the menu carries it. */
  .nav .row>.btn:not(.p){display:none}
}

@media(max-width:560px){
  body{font-size:16px}
  .wrap{padding-inline:18px}
  .hero{padding-block:52px 28px}
  h1.head{font-size:clamp(30px,8.4vw,40px);max-width:none}
  .sub{font-size:17px;margin-bottom:24px}
  .kicker{margin-bottom:16px;font-size:12px;padding:5px 11px}
  section.sec{padding-block:48px}
  .lane .sec{padding-top:56px}
  .sec .lead{margin-bottom:32px;font-size:16.5px}
  .band{padding-block:52px}
  /* Full-width stacked buttons — two half-width buttons side by side are unreadable here. */
  .cta-row{flex-direction:column;align-items:stretch;gap:10px}
  .cta-row .btn{justify-content:center;width:100%}
  .btn.lg{padding:15px 20px}
  .grid{grid-template-columns:1fr;gap:14px}
  .card{padding:20px}
  .more{grid-template-columns:1fr;max-width:none;gap:12px}
  .mock{margin-top:34px;border-radius:13px}
  .mock .doc{padding:22px 20px 30px;font-size:15px}
  .mock .doc h3{font-size:20px}
  .mock .av{right:14px;bottom:12px;width:38px;height:38px}
  .frows{gap:44px}
  .fvis{padding:15px}
  .ftext h3{font-size:23px}
  .strip .row{gap:8px 20px;font-size:14px;padding-block:16px}
  .tier{padding:24px}
  .tier .price{font-size:36px}
  .prose h2{font-size:25px}
  .room{gap:14px 4px}
  .roomed{width:82px}
  .roomed img{width:48px;height:48px}
  .roomn{font-size:13px}
  .roomr{font-size:11px}
  .avstack{flex-wrap:wrap;gap:6px 0}
  .avlabel{margin-left:10px;font-size:12px}
  .ch-item{flex-direction:column;gap:2px}
  .ch-item span{text-align:left}
  footer .row{gap:14px 20px}
  footer .spacer{flex-basis:100%;height:0}
}

/* --- motion --- */
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes pulsep{0%,100%{transform:scale(1)}50%{transform:scale(1.13)}}
@keyframes blink{0%,48%{opacity:1}49%,100%{opacity:0}}
@keyframes popin{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}}
.caret{display:inline-block;width:2px;height:1.05em;background:var(--accent);vertical-align:-3px;margin-left:1px;border-radius:1px}
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1;transform:none}
  .hero .kicker,.hero h1.head,.hero .sub,.hero .cta-row,.hero .fineprint,.hero .mock{opacity:0;animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
  .hero h1.head{animation-delay:.10s}
  .hero .sub{animation-delay:.22s}
  .hero .cta-row{animation-delay:.34s}
  .hero .fineprint{animation-delay:.44s}
  .hero .mock{animation-delay:.54s}
  .mock .av{animation:floaty 4.5s ease-in-out infinite}
  .mock .ins::before{animation:pulsep 2.6s ease-in-out infinite}
  .caret{animation:blink 1.1s step-end infinite}

  /* Header lifts off the page once you scroll past the hero. */
  header.nav{transition:box-shadow .25s ease,background .25s ease}
  header.nav.stuck{box-shadow:0 6px 24px rgba(60,40,20,.10);background:color-mix(in srgb,var(--bg) 94%,transparent)}

  /* The feature visuals stay still until they are actually on screen, then play once.
     Each `.anim` element is armed by the IntersectionObserver in index.html. */
  .js .anim .ch-item,.js .anim .ver,.js .anim .roomed{opacity:0}
  .anim.play .ch-item,.anim.play .ver,.anim.play .roomed{animation:rise .5s cubic-bezier(.2,.7,.2,1) forwards}
  .anim.play .ch-item:nth-child(2),.anim.play .ver:nth-child(2),.anim.play .roomed:nth-child(2){animation-delay:.07s}
  .anim.play .ch-item:nth-child(3),.anim.play .ver:nth-child(3),.anim.play .roomed:nth-child(3){animation-delay:.14s}
  .anim.play .ver:nth-child(4),.anim.play .roomed:nth-child(4){animation-delay:.21s}
  .anim.play .roomed:nth-child(5){animation-delay:.28s}
  .anim.play .roomed:nth-child(6){animation-delay:.35s}
  .anim.play .roomed:nth-child(7){animation-delay:.42s}
  .anim.play .roomed:nth-child(8){animation-delay:.49s}
  .anim.play .roomed:nth-child(9){animation-delay:.56s}
  .anim.play .roomed:nth-child(10){animation-delay:.63s}
  .anim.play .roomed:nth-child(11){animation-delay:.70s}
  .anim.play .roomed:nth-child(12){animation-delay:.77s}

  .js .anim .bub{opacity:0}
  .anim.play .bub{animation:rise .5s cubic-bezier(.2,.7,.2,1) forwards}
  .anim.play .bub:nth-of-type(2){animation-delay:.5s}
  .anim.play .bub:nth-of-type(3){animation-delay:1s}

  /* Bars and meters grow from zero rather than appearing full. */
  .js .anim .growx{transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
  .anim.play .growx{transform:scaleX(1)}
  .js .anim .growy{transform:scaleY(.12);transform-origin:bottom;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
  .anim.play .growy{transform:scaleY(1)}
  .anim.play .growy:nth-child(2){transition-delay:.05s}
  .anim.play .growy:nth-child(3){transition-delay:.1s}
  .anim.play .growy:nth-child(4){transition-delay:.15s}
  .anim.play .growy:nth-child(5){transition-delay:.2s}
  .anim.play .growy:nth-child(6){transition-delay:.25s}
  .anim.play .growy:nth-child(7){transition-delay:.3s}

  .card:hover .ic{animation:popin .3s cubic-bezier(.2,.7,.2,1)}
}

/* With reduced motion the round is shown already decided rather than animated into
   place — the pick is marked in the HTML, so it needs no script to appear.
   SCOPED TO #vdnaVis on purpose: these describe that one canned scroll visual, and the
   58% in particular is its specific answer, not a property of the component. Left global
   they would reach into any other .vcand / .vprogbar on the page and show progress the
   reader has not made. */
@media (prefers-reduced-motion: reduce){
  #vdnaVis .vcand[data-pick]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--panel))}
  #vdnaVis .vcand[data-pick]::before{content:"\2713";background:var(--accent);border-color:var(--accent);color:#fff;font-size:11px}
  #vdnaVis .vcand:not([data-pick]){opacity:.42}
  #vdnaVis .vrule{opacity:1;transform:none}
  #vdnaVis .vprogbar i{width:58%!important}
}
/* Same when motion is allowed but the script never ran. */
html:not(.js) #vdnaVis .vcand[data-pick]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--panel))}
html:not(.js) #vdnaVis .vcand[data-pick]::before{content:"\2713";background:var(--accent);border-color:var(--accent);color:#fff;font-size:11px}
html:not(.js) #vdnaVis .vcand:not([data-pick]){opacity:.42}
html:not(.js) #vdnaVis .vrule{opacity:1;transform:none}
html:not(.js) #vdnaVis .vprogbar i{width:58%}