:root{
  --ink:#0B0B0B; --paper:#F5F3EC; --white:#FFFFFF;
  --slate:#5A5A56; --mist:#E4E1D6; --rule:#DEDBCE;
  --amber:#E8A33D; --amber-bg:#FBEFDD; --amber-ink:#7A4E0B;
  --green:#1D9E75; --green-bg:#E1F5EE;
  --red:#C0392B; --red-bg:#FBEAE8; --blue:#2A78D6;
  --mono:'Inter',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --sans:'Inter',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --gut:clamp(20px,4vw,56px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,p,figure,ul{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.skip{position:absolute;left:-999px;background:var(--ink);color:#fff;padding:10px 16px;z-index:99}
.skip:focus{left:8px;top:8px}

.d1{font-size:clamp(40px,5.8vw,74px);font-weight:800;line-height:1.02;letter-spacing:-.034em}
.d2{font-size:clamp(28px,3.6vw,46px);font-weight:800;line-height:1.08;letter-spacing:-.028em}
.lede{font-size:clamp(17px,1.5vw,20px);color:var(--slate);max-width:46ch;line-height:1.55}
.sm{font-size:14.5px;color:var(--slate);line-height:1.55}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.shell{width:100%;max-width:1220px;margin:0 auto;padding:0 var(--gut)}
.band{padding:clamp(60px,7.5vw,116px) 0}
.band-w{background:var(--white)}
.band-d{background:var(--ink);color:#CFCDC4}
.band-d .d2{color:var(--paper)} .band-d .lede{color:#94918A}
.hr{height:1px;background:var(--rule);border:0;margin:0}

body>nav{position:sticky;top:0;z-index:70;background:var(--ink);color:#fff}
.nav-in{max-width:1220px;margin:0 auto;padding:0 var(--gut);height:60px;display:flex;align-items:center;gap:30px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.brand b{font-weight:800;font-size:16px;letter-spacing:.15em}
.nav-links{display:flex;gap:24px;margin-left:auto}
.nav-links a{font-size:14.5px;font-weight:500;color:#9A978F;text-decoration:none}
.nav-links a:hover{color:#fff}
@media(max-width:900px){.nav-links{display:none}}

.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--sans);
  font-size:15.5px;font-weight:600;padding:13px 22px;border-radius:6px;text-decoration:none;
  border:1px solid transparent;cursor:pointer;transition:background .16s,border-color .16s}
.btn-a{background:var(--amber);color:#241703;border-color:var(--amber)}
.btn-a:hover{background:#f0b055}
.btn-o{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn-o:hover{border-color:var(--ink)}
.band-d .btn-o{color:var(--paper);border-color:#3A3934}
.btn-s{padding:9px 15px;font-size:14px}

/* hero */
.hero{padding:clamp(48px,6vw,88px) 0 clamp(56px,7vw,96px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(30px,5vw,68px);align-items:center}
@media(max-width:940px){.hero-grid{grid-template-columns:1fr;gap:40px}}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

.instr{background:var(--white);border:1px solid var(--rule);border-radius:12px;padding:20px}
.instr-top{display:flex;justify-content:space-between;align-items:baseline;
  border-bottom:1px solid var(--rule);padding-bottom:12px}
.instr-top em{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--slate)}
.instr-top .live{color:var(--green);display:inline-flex;align-items:center;gap:6px}
.instr-top .live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green)}
#field{display:block;width:100%;height:auto}
.instr-foot{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  border-top:1px solid var(--rule);padding-top:13px}
.stat b{display:block;font-family:var(--mono);font-size:26px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.stat u{display:block;text-decoration:none;font-size:11.5px;color:var(--slate);margin-top:5px}
.stat.amber b{color:var(--amber-ink)} .stat.green b{color:var(--green)}

/* questions */
.q-list{margin-top:40px;border-top:1px solid var(--rule)}
.q{border-bottom:1px solid var(--rule)}
.q-btn{width:100%;display:grid;grid-template-columns:38px 1fr minmax(0,232px) 28px;gap:16px;align-items:center;
  background:none;border:0;padding:22px 0;text-align:left;cursor:pointer;font-family:var(--sans)}
.q-n{font-family:var(--mono);font-size:12.5px;color:var(--slate)}
.q-ask{font-size:clamp(17px,1.55vw,21px);font-weight:600;line-height:1.32;letter-spacing:-.012em;color:var(--ink)}
.q-tog{justify-self:end;width:24px;height:24px;border:1px solid var(--rule);border-radius:50%;
  position:relative;transition:border-color .2s,transform .3s}
.q-tog::before,.q-tog::after{content:"";position:absolute;background:var(--slate);
  left:50%;top:50%;transform:translate(-50%,-50%)}
.q-tog::before{width:9px;height:1.5px}
.q-tog::after{width:1.5px;height:9px;transition:opacity .2s}
.q.open .q-tog{border-color:var(--amber);transform:rotate(180deg)}
.q.open .q-tog::after{opacity:0}
.q-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.22,.61,.36,1)}
.q.open .q-body{grid-template-rows:1fr}
.q-body>div{overflow:hidden}
.q-in{display:grid;grid-template-columns:38px 1fr;gap:16px;padding-bottom:26px}
.mini{background:var(--white);border:1px solid var(--rule);border-radius:8px;overflow:hidden}
.mini-h{display:flex;justify-content:space-between;align-items:center;padding:9px 14px;
  border-bottom:1px solid var(--rule);background:#FAF9F4}
.mini-h em{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.09em;color:var(--slate)}
.mini-b{padding:16px}
.cap{font-size:15px;color:var(--slate);margin-top:12px;max-width:56ch;line-height:1.5}
.cap b{color:var(--ink);font-weight:600}
.tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;padding:4px 8px;border-radius:4px}
.t-now{background:var(--green-bg);color:#0E6B4E}
.t-part{background:var(--amber-bg);color:var(--amber-ink)}

/* micro visuals */
/* .grid-dots removed with the six-questions section (v4.40.0) */
.row{display:flex;align-items:center;gap:12px;padding:9px 0}
.row+.row{border-top:1px solid var(--rule)}
.row .name{font-size:14.5px;font-weight:500;flex:1}
.pill{font-family:var(--mono);font-size:10px;padding:3px 8px;border-radius:4px;white-space:nowrap}
.p-un{background:var(--amber-bg);color:var(--amber-ink)}
.p-ok{background:var(--green-bg);color:#0E6B4E}
.p-no{background:var(--mist);color:var(--slate)}
.p-rk{background:var(--red-bg);color:var(--red)}
.av{width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;font-size:10.5px;
  font-weight:700;display:grid;place-items:center;flex-shrink:0}
.bar{height:6px;border-radius:3px;background:var(--mist);overflow:hidden;flex:1}
.bar u{display:block;height:100%;background:var(--green);width:0;text-decoration:none}
.q.open .bar u{animation:fill 1.1s .25s cubic-bezier(.3,.7,.4,1) forwards}
@keyframes fill{to{width:100%}}
.cov{display:grid;gap:8px}
.cov div{display:flex;align-items:center;gap:10px;font-size:14px}
.cov .t{flex:1;color:var(--slate)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:14px}
.kv dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;color:var(--slate);padding-top:3px}
.kv dd{margin:0;font-weight:500}
.stack{display:grid;gap:7px}
.stack div{display:flex;justify-content:space-between;align-items:center;font-size:13.5px;
  border:1px solid var(--rule);border-radius:5px;padding:8px 11px;background:#FAF9F4}
.stack span{font-family:var(--mono);font-size:10.5px;color:var(--slate)}

/* full-width figures */
.fig{width:100%;height:auto;display:block;margin-top:40px}
.legend{display:flex;flex-wrap:wrap;gap:18px;margin-top:18px}
.legend span{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--slate)}
.legend i{width:9px;height:9px;border-radius:2px;display:block}

/* limits */
.lim{display:grid;grid-template-columns:1fr 1fr;margin-top:40px;border:1px solid var(--rule);
  border-radius:10px;overflow:hidden}
@media(max-width:800px){.lim{grid-template-columns:1fr}}
.lim>div{padding:clamp(22px,3vw,32px);background:var(--white)}
.lim>div+div{border-left:1px solid var(--rule)}
@media(max-width:800px){.lim>div+div{border-left:0;border-top:1px solid var(--rule)}}
.lim h3{font-size:16px;font-weight:700}
.lim ul{list-style:none;padding:0;margin-top:14px}
.lim li{position:relative;padding-left:22px;font-size:15px;color:var(--slate);margin-bottom:10px}
.lim li::before{position:absolute;left:0;font-family:var(--mono);font-size:14px}
.lim .yes li::before{content:"+";color:var(--green)}
.lim .no li::before{content:"–";color:var(--red)}

/* paths */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,28px);margin-top:40px}
@media(max-width:860px){.trio{grid-template-columns:1fr}}
.path{display:block;text-decoration:none;background:var(--white);border:1px solid var(--rule);
  border-radius:10px;padding:24px;transition:border-color .16s}
.path:hover{border-color:var(--ink)}
.path h3{font-size:18px;font-weight:700}
.path p{margin-top:8px;font-size:14.5px;color:var(--slate)}

/* commercial */
.price{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3.5vw,48px);margin-top:40px;align-items:start}
@media(max-width:880px){.price{grid-template-columns:1fr}}
.pcard{background:var(--white);border:1px solid var(--amber);border-radius:10px;
  padding:clamp(24px,3vw,32px);box-shadow:0 12px 40px rgba(232,163,61,.14)}
.pnum{font-family:var(--mono);font-size:40px;font-weight:700;line-height:1;letter-spacing:-.02em;margin-top:20px}
.pnum small{font-size:15px;font-weight:400;color:var(--slate)}
.never{display:grid;gap:14px;margin-top:22px}
.never div{border-left:2px solid var(--red);padding-left:14px}
.never b{display:block;font-size:15.5px;font-weight:600}
.never p{font-size:14px;color:var(--slate);margin-top:2px;line-height:1.45}

/* start */
.start-grid{display:grid;grid-template-columns:1fr minmax(0,400px);gap:clamp(30px,5vw,68px);align-items:start}
@media(max-width:940px){.start-grid{grid-template-columns:1fr}}
.form{background:#141310;border:1px solid #2A2924;border-radius:10px;padding:24px}
.form label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:#8B887F;margin:15px 0 6px}
.form label:first-of-type{margin-top:0}
.form input,.form select{width:100%;font-family:var(--sans);font-size:15px;color:var(--paper);
  background:#0B0B0B;border:1px solid #2E2D28;border-radius:6px;padding:11px 13px}
.form input:focus,.form select:focus{border-color:var(--amber);outline:none}
.form .btn{width:100%;margin-top:20px}
.form .fine{font-size:12.5px;color:#7E7B73;margin-top:12px;line-height:1.45}

body>footer{background:var(--ink);color:#7E7B73;padding:48px 0 36px}
.f-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:30px}
@media(max-width:820px){.f-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
footer h4{font-family:var(--mono);font-size:10px;letter-spacing:.11em;color:#57554E;margin-bottom:13px}
footer a{display:block;font-size:14.5px;color:#9A978F;text-decoration:none;margin-bottom:8px;overflow-wrap:anywhere}
footer a:hover{color:var(--paper)}
.f-end{margin-top:40px;padding-top:20px;border-top:1px solid #1D1C17;display:flex;
  flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:13px}

@media(prefers-reduced-motion:reduce){*,*::before{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* ═══════════ WARMTH PASS v2.6 ═══════════
   Surfaces, rhythm, depth. No new brand colours — the palette is unchanged.
   Two additions: a deeper warm surface so alternation is actually visible,
   and a warm near-black for large dark bands so they read as ink, not void. */
:root{
  --sand:#E4DCC6;        /* deeper warm surface — makes white read as white */
  --tint:#F6E9CF;        /* faint amber wash for rhythm sections */
  --ink-warm:#15130E;    /* large dark surfaces. Text ink stays #0B0B0B */
  --rule-warm:#CCC3AB;
  --shadow-s:0 1px 3px rgba(30,24,10,.08), 0 4px 12px rgba(30,24,10,.09);
  --shadow-m:0 2px 6px rgba(30,24,10,.09), 0 12px 32px rgba(30,24,10,.13);
  --shadow-l:0 4px 10px rgba(30,24,10,.06), 0 18px 44px rgba(30,24,10,.10);
}
body{background:var(--sand)}

/* ── surface rhythm: three distinct tones instead of two near-identical ones ── */
.band{background:var(--sand)}
.band-w{background:#FFFFFF}
.band-t{background:var(--tint)}
.band-d{background:var(--ink-warm)}
.band-t .card,.band-t .tbl,.band-t .pcard{background:#FFFFFF}

/* ── depth: cards lift off the surface instead of sitting flat on it ── */
.card,.path,.art,.tbl,.pcard,.mini,.sc-card,.sz-card,.rc-card,.res-card,.fq-tile{
  box-shadow:var(--shadow-s)}
.path:hover,.art:hover,.fq-tile:hover,.mo-next-c:hover{box-shadow:var(--shadow-m);transform:translateY(-2px)}
.pcard,.sc-card,.sz-card,.rc-card,.res-card{box-shadow:var(--shadow-m)}
.pcard{box-shadow:0 4px 12px rgba(232,163,61,.10),0 18px 44px rgba(232,163,61,.13)}
.split,.lim,.route,.econ,.sz-grid{box-shadow:var(--shadow-m)}
.band-d .card,.band-d .econ div{box-shadow:none}

/* ── light behind the hero, so the top of a page has a source ── */
.hd,.hero{position:relative}
.hd::before,.hero::before{content:"";position:absolute;inset:-10% -20% auto -20%;height:150%;
  background:radial-gradient(60% 70% at 68% 18%,rgba(232,163,61,.34),rgba(232,163,61,0) 72%);
  pointer-events:none;z-index:-1}
.band-d .hd::before{background:radial-gradient(60% 70% at 68% 18%,rgba(232,163,61,.10),transparent 68%)}

/* ── warmer separators and section edges ── */
.hr{background:linear-gradient(90deg,transparent,var(--rule-warm) 12%,var(--rule-warm) 88%,transparent)}
.tbl,.card,.path,.art,.split,.lim,.mini{border-color:var(--rule-warm)}
.tbl th{background:var(--tint)}

/* ── status colour, used properly ── */
.split .yes li::before,.lim .yes li::before{color:var(--green);font-weight:700}
.split .no li::before,.lim .no li::before{color:var(--red);font-weight:700}
.lim>div:first-child,.split>div:first-child{background:linear-gradient(180deg,rgba(29,158,117,.075),transparent 30%)}
.lim>div:last-child,.split>div:last-child{background:linear-gradient(180deg,rgba(192,57,43,.07),transparent 30%)}
.split>div:first-child h3,.lim>div:first-child h3{color:#0E6B4E}
.split>div:last-child h3,.lim>div:last-child h3{color:var(--red)}
.never div{background:linear-gradient(90deg,rgba(192,57,43,.05),transparent 60%);
  padding:12px 0 12px 14px;border-radius:0 6px 6px 0}
.kick{color:var(--amber-ink)}
.pill{box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}

/* ── dark bands: warmer, with a visible edge rather than a black hole ── */
.band-d{border-top:1px solid #221F17;border-bottom:1px solid #221F17}
.band-d .card{background:#1C1A14;border-color:#2E2A20}
.band-d .tbl{background:#1C1A14;border-color:#2E2A20}
.band-d .flag{background:#1C1A14}
.form{background:#1C1A14;border-color:#2E2A20}
body>nav{background:var(--ink-warm)}
body>footer{background:var(--ink-warm);border-top:1px solid #221F17}

/* ── interaction feedback ── */
.btn-a{box-shadow:0 1px 2px rgba(122,78,11,.18),0 4px 12px rgba(232,163,61,.22)}
.btn-a:hover{box-shadow:0 2px 4px rgba(122,78,11,.20),0 8px 20px rgba(232,163,61,.30);transform:translateY(-1px)}
.btn-o:hover{background:rgba(232,163,61,.06)}
.q-btn:hover .q-ask{color:var(--amber-ink)}
.q.open{background:linear-gradient(90deg,rgba(232,163,61,.05),transparent 55%)}
@media(prefers-reduced-motion:reduce){
  .path:hover,.art:hover,.fq-tile:hover,.mo-next-c:hover,.btn-a:hover{transform:none}
}

/* ── active navigation item ── */
.nav-links a{position:relative;padding-bottom:2px}
.nav-links a.on,.nav-links a[aria-current="page"]{color:#FFFFFF;font-weight:600}
.nav-links a.on::after,.nav-links a[aria-current="page"]::after{
  content:"";position:absolute;left:0;right:0;bottom:-19px;height:2px;background:var(--amber);
  border-radius:1px}
.nav-links a:hover::after{content:"";position:absolute;left:0;right:0;bottom:-19px;height:2px;
  background:#3A3934;border-radius:1px}
.nav-links a.on:hover::after,.nav-links a[aria-current="page"]:hover::after{background:var(--amber)}

/* ── mobile navigation: a real menu, not a disappearance ── */
.mo-burger{display:none;background:none;border:0;cursor:pointer;padding:8px;margin-left:auto;
  color:#F5F3EC;align-items:center;gap:8px;font-family:var(--sans);font-size:14px}
.mo-burger span{display:block;width:20px;height:2px;background:currentColor;position:relative}
.mo-burger span::before,.mo-burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;
  background:currentColor;transition:transform .2s}
.mo-burger span::before{top:-6px}.mo-burger span::after{top:6px}
.mo-burger[aria-expanded="true"] span{background:transparent}
.mo-burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.mo-burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
.mo-mob{display:none;background:var(--ink-warm);border-top:1px solid #2A2924;
  padding:8px clamp(20px,4vw,56px) 18px}
.mo-mob.open{display:block}
.mo-mob a{display:block;font-size:16px;font-weight:500;color:#CFCDC4;text-decoration:none;
  padding:13px 0;border-bottom:1px solid #221F17}
.mo-mob a:last-of-type{border-bottom:0}
.mo-mob a[aria-current="page"]{color:var(--amber);font-weight:600}
@media(max-width:900px){
  .mo-burger{display:flex}
  body>nav .btn{display:none}
  .mo-mob a.mo-mob-cta{background:var(--amber);color:#241703;text-align:center;font-weight:700;
    border-radius:6px;margin-top:12px;border:0;padding:14px}
}
/* tables keep every column — scroll rather than hide ── */
@media(max-width:760px){
  .tbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:normal}
  .tbl thead th{white-space:nowrap}
  .tbl td,.tbl th{min-width:150px}
  .tbl td:first-child,.tbl th:first-child{min-width:120px}
}

/* ================= product demo ================= */
/* v4.46.0: the reassurance sentence was removed from view, but the element stays as the real target for demo.v1.js's load-failure message — :empty keeps it invisible until that JS actually has something to say. */
.band-d .demo-note{color:#94918A}
[data-demo][data-demo-state=loading]{opacity:.7;pointer-events:none}

.demopanel{background:var(--ink);border:1px solid #2E2D28;border-radius:14px;overflow:hidden;
  margin-top:30px;box-shadow:0 22px 60px rgba(11,11,11,.18)}
.demopanel .chrome{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid #2E2D28}
.demopanel .chrome i{width:9px;height:9px;border-radius:50%;background:#3A3934;display:block}
.demopanel .chrome span{font-family:var(--mono);font-size:11px;color:#8B887F;margin-left:10px}
.demopanel .stagearea{position:relative;padding:clamp(34px,5vw,62px) clamp(22px,4vw,54px);
  background:radial-gradient(70% 90% at 62% 20%,rgba(232,163,61,.13),transparent 68%);
  display:grid;grid-template-columns:1fr auto;gap:38px;align-items:center}
@media(max-width:860px){.demopanel .stagearea{grid-template-columns:1fr;gap:26px}}
.demopanel .who{font-family:var(--mono);font-size:11px;letter-spacing:.09em;color:var(--amber)}
.demopanel h3{color:#fff;font-size:clamp(21px,2.6vw,30px);letter-spacing:-.03em;line-height:1.14;
  margin-top:14px;max-width:20ch;font-weight:800}
.demopanel ol{list-style:none;margin:20px 0 0;padding:0;counter-reset:d}
.demopanel li{counter-increment:d;position:relative;padding-left:34px;margin-bottom:12px;
  font-size:15px;color:#CFCDC4;line-height:1.5;max-width:56ch}
.demopanel li::before{content:counter(d,decimal-leading-zero);position:absolute;left:0;top:1px;
  font-family:var(--mono);font-size:11px;color:var(--amber)}
.demopanel .playwrap{display:flex;flex-direction:column;align-items:center;gap:14px}
.demopanel .play{width:96px;height:96px;border-radius:50%;background:var(--amber);border:none;
  cursor:pointer;display:grid;place-items:center;box-shadow:0 0 0 12px rgba(232,163,61,.14),
  0 0 44px rgba(232,163,61,.4);transition:transform .2s}
.demopanel .play:hover{transform:scale(1.05)}
.demopanel .play svg{margin-left:5px}
.demopanel .playwrap small{font-family:var(--mono);font-size:11px;color:#94918A;text-align:center;line-height:1.6}

/* simulator -> demo handoff */
.handoff{margin-top:20px;border:1px solid #4A4232;border-radius:11px;background:#100E0A;
  padding:24px 24px 26px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
@media(max-width:820px){.handoff{grid-template-columns:1fr;gap:18px}}
.handoff .st{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--amber-lt)}
.handoff b{display:block;font-size:19px;color:#fff;font-weight:800;letter-spacing:-.025em;margin-top:11px}
.handoff p{font-size:14px;color:#A9A395;margin-top:9px;line-height:1.6;max-width:62ch}
.handoff .go{background:var(--amber);color:#241703;font-family:var(--sans);font-size:15px;font-weight:700;
  padding:14px 24px;border-radius:7px;border:none;cursor:pointer;white-space:nowrap;
  box-shadow:0 0 26px rgba(232,163,61,.3)}

/* ---- sticky trail: where you are, not where our framework says you are ---- */
.trail{position:sticky;top:60px;z-index:49;background:rgba(245,243,236,.93);
  backdrop-filter:blur(9px);border-bottom:1px solid var(--rule)}
/* v4.63.0 — the ribbon read as asymmetrical and untidy: breadcrumb pinned hard
   left, "back to top" pushed hard right by margin-left:auto, and a long
   section label stretching between them left a ragged gap on wide screens.
   Kept flex (interior pages have 5 children: lead|sep|here|now|top, the
   homepage has 3), but the right-hand link now sits in a reserved fixed-width
   slot that holds its space whether or not it is visible — so nothing shifts
   mid-scroll — and the growing section label is the only flexible element. */
.trail .tin{max-width:1180px;margin:0 auto;padding:0 var(--gut);height:34px;
  display:flex;align-items:center;gap:0;font-family:var(--mono);font-size:11px;color:var(--slate);
  overflow:hidden;white-space:nowrap}
.trail a{color:var(--slate);text-decoration:none}
.trail a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.trail .lead{flex:none}
.trail .sep{color:#B4B0A4;margin:0 6px;flex:none}
.trail .here{color:var(--ink);overflow:hidden;text-overflow:ellipsis;flex:none;max-width:30%}
/* the only element allowed to grow or shrink */
.trail .now{color:var(--amber-ink);overflow:hidden;text-overflow:ellipsis;
  flex:1 1 auto;min-width:0}
/* reserved slot: width held even at opacity 0, so revealing it never nudges
   the section label sideways */
.trail .top{flex:0 0 96px;text-align:right;color:#B4B0A4;
  opacity:0;transition:opacity .25s;pointer-events:none}
.trail .top.on{opacity:1;pointer-events:auto}
/* driven by transform, not width: the scroll handler writes to this on every
   frame, so it must stay off the layout path. transform-origin pins the growth
   to the left edge; the element is full-width and scaled down to 0. */
.trail .bar{position:absolute;left:0;bottom:-1px;height:2px;background:var(--amber);width:100%;
  transform:scaleX(0);transform-origin:0 50%;will-change:transform;
  transition:transform .12s linear}
@media(max-width:620px){.trail .tin{font-size:10px;gap:7px}.trail .lead{display:none}}
@media print{.trail{display:none}}

/* ---- trust pills: one component, aligned, never ragged ---- */
.pills{display:grid;gap:9px;margin-top:26px;
  grid-template-columns:repeat(var(--n,3),minmax(0,1fr));max-width:var(--w,560px)}
@media(max-width:640px){.pills{grid-template-columns:1fr;max-width:none}}
.pills span{font-family:var(--mono);font-size:11px;line-height:1.35;color:var(--slate);
  border:1px solid var(--rule);border-radius:99px;padding:9px 15px;text-align:center;
  display:flex;align-items:center;justify-content:center;min-height:36px}
.band-d .pills span,.pills.on-dark span{color:#94918A;border-color:#2E2D28}

/* ================= homepage instrument panel ================= */
/* ---- v4.70.0 — the single AI Record card --------------------------------
   Replaces the animated record panel (list + radar + four counters + headcount
   slider). The hero now argues non-intrusion, and a panel filling up with
   discoveries argued volume — visually contradicting the headline. One record,
   readable in a few seconds, proving the boundary rather than the haul.
   Static by design: nothing here moves, so there is nothing to interpret.
   The estate model it replaced lives on the simulator, where it belongs and is
   no longer duplicated. */
.card{background:#141310;border:1px solid #2A2924;border-radius:14px;overflow:hidden;
  box-shadow:0 26px 70px rgba(11,11,11,.22);color:#E8E5DC}
.card-hd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:13px 18px;border-bottom:1px solid #2A2924;font-family:var(--mono);font-size:10.5px}
.card-t{color:var(--amber);font-weight:700;letter-spacing:.11em}
.card-n{color:#8B887F;letter-spacing:.02em}
/* the service line is the record's subject: given weight so the eye lands here */
.card-svc{padding:20px 18px 16px;border-bottom:1px solid #221F1B}
.card-svc b{display:block;font-size:20px;font-weight:600;letter-spacing:-.01em;color:#FFFFFF}
.card-svc code{display:block;margin-top:5px;font-family:var(--mono);font-size:12px;color:#94918A}
/* two columns of label/value, collapsing to one on narrow screens */
.card-f{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:0;
  background:#221F1B;border-bottom:1px solid #221F1B}
.card-f>div{background:#141310;padding:13px 18px}
.card-f dt{font-family:var(--mono);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:#8B887F}
.card-f dd{margin:5px 0 0;font-size:14.5px;line-height:1.4;color:#E8E5DC}
/* the provenance tag: says how a value got there, which is the honest detail */
.card-f dd i{display:inline-block;margin-left:6px;font-family:var(--mono);font-style:normal;
  font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:#8B887F;
  border:1px solid #33302A;border-radius:3px;padding:2px 5px;vertical-align:1px}
/* the boundary statement — the reason this card exists */
.card-not{padding:15px 18px 17px;font-size:13px;line-height:1.5;color:#94918A;
  background:#100F0D}
.card-not b{color:var(--amber)}
@media(max-width:560px){.card-f{grid-template-columns:1fr}}

.rig{background:var(--d1,#141310);border:1px solid #2A2924;border-radius:14px;overflow:hidden;
  box-shadow:0 26px 70px rgba(11,11,11,.22)}
.rig .hd{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid #2A2924;
  font-family:var(--mono);font-size:11px;color:#94918A;flex-wrap:wrap}
.rig .hd .live{display:flex;align-items:center;gap:7px;color:#3DD69B}
.rig .hd .live i{width:7px;height:7px;border-radius:50%;background:#3DD69B;animation:rpulse 2s infinite}
.rig .hd b{font-weight:400;color:#B4B0A4}
@keyframes rpulse{0%,100%{opacity:1}50%{opacity:.3}}
.rig .hd .sp{margin-left:auto;color:#6B665C}
#cv{width:100%;height:100%;display:block;cursor:crosshair}
.beat{position:absolute;pointer-events:none;background:rgba(8,8,8,.93);
  border:1px solid rgba(242,172,68,.5);border-radius:8px;padding:10px 13px;max-width:250px;
  opacity:0;transform:translateY(5px);transition:opacity .45s,transform .45s;z-index:3}
.beat.on{opacity:1;transform:none}
.beat .k{font-family:var(--mono);font-size:9px;letter-spacing:.11em;display:block;margin-bottom:6px}
.beat b{display:block;font-size:13.5px;color:#fff;font-weight:700;letter-spacing:-.015em;line-height:1.25}
.beat span{display:block;font-family:var(--mono);font-size:10.5px;color:#94918A;margin-top:6px;line-height:1.5}
#rtip{position:absolute;pointer-events:none;background:rgba(8,8,8,.96);
  border:1px solid rgba(242,172,68,.5);border-radius:8px;padding:11px 13px;max-width:236px;
  opacity:0;transition:opacity .12s;z-index:4}
#rtip .k{font-family:var(--mono);font-size:9px;letter-spacing:.11em;display:block;margin-bottom:5px}
#rtip b{display:block;font-size:13px;color:#fff;font-weight:700;line-height:1.25}
#rtip span{display:block;font-family:var(--mono);font-size:10px;color:#94918A;margin-top:5px}
.rhint{position:absolute;right:14px;bottom:12px;font-family:var(--mono);font-size:10.5px;
  color:#6B665C;pointer-events:none;margin:0}
.rig .ft{border-top:1px solid #2A2924;display:grid;grid-template-columns:repeat(4,1fr)}
.rig .ft div{padding:14px 14px;border-right:1px solid #2A2924}
.rig .ft div:last-child{border-right:none}
@media(max-width:520px){.rig .ft{grid-template-columns:1fr 1fr}
  .rig .ft div:nth-child(2){border-right:none}
  .rig .ft div:nth-child(n+3){border-top:1px solid #2A2924}}
.rig .ft b{display:block;font-family:var(--mono);font-size:22px;font-weight:500;color:#fff;
  letter-spacing:-.02em;line-height:1}
.rig .ft b.am{color:#F2AC44}.rig .ft b.gr{color:#3DD69B}
.rig .ft span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;
  color:#8B887F;margin-top:8px;line-height:1.5}
.rig .ft .qn{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;color:#E8A33D;
  border:1px solid rgba(232,163,61,.42);border-radius:3px;padding:2px 5px;margin-right:6px;
  font-style:normal;display:inline-block}
.chipx.mine{background:#E8A33D;color:#241703;font-weight:700}
.rig .ctl{border-top:1px solid #2A2924;padding:18px 18px 20px;
  background:linear-gradient(180deg,rgba(232,163,61,.075),transparent 70%)}
.rig .rlab{font-family:var(--sans);font-size:14.5px;font-weight:700;color:#fff;letter-spacing:-.015em;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rig .rlab em{font-style:normal;font-family:var(--mono);font-size:10.5px;font-weight:400;
  color:#FFC163;letter-spacing:.05em}
.rig .ctl .row{display:flex;align-items:center;gap:14px;margin-top:14px}
.rig .numw{display:flex;align-items:baseline;gap:7px;flex-shrink:0}
.rig .numw input{width:92px;background:#0B0B0B;border:1px solid #4A4232;color:#fff;
  font-family:var(--mono);font-size:24px;font-weight:500;padding:7px 10px;border-radius:6px;
  text-align:right;-moz-appearance:textfield}
.rig .numw input::-webkit-outer-spin-button,.rig .numw input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
.rig .numw input:hover{border-color:#6B665C}
.rig .numw input:focus{border-color:#E8A33D;outline:none;box-shadow:0 0 0 4px rgba(232,163,61,.18)}
.rig .numw span{font-family:var(--mono);font-size:11.5px;color:#94918A}
.rig .ctl input[type=range]{flex:1;-webkit-appearance:none;appearance:none;background:transparent;
  height:26px;margin:0;cursor:grab;min-width:0}
.rig .ctl input[type=range]::-webkit-slider-runnable-track{height:7px;border-radius:4px;
  background:linear-gradient(90deg,#E8A33D 0%,#FFC163 var(--p,28%),#43413A var(--p,28%),#43413A 100%)}
.rig .ctl input[type=range]::-moz-range-track{height:7px;border-radius:4px;background:#43413A}
.rig .ctl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;
  border-radius:50%;background:#fff;margin-top:-8.5px;border:4px solid #E8A33D;
  box-shadow:0 0 0 5px rgba(232,163,61,.2),0 0 18px rgba(232,163,61,.4)}
.rig .ctl input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;
  background:#fff;border:4px solid #E8A33D}
.rig .go{display:flex;align-items:center;justify-content:center;gap:9px;background:#E8A33D;
  font-family:var(--sans);font-size:14.5px;font-weight:700;color:#241703;padding:14px;
  text-decoration:none;margin-top:18px;border-radius:7px}
.rig .go:hover{background:#FFC163}
.rig .go small{font-family:var(--mono);font-size:10.5px;font-weight:400;opacity:.72}

/* .qlive and .q-btn rules removed with the six-questions section (v4.40.0) */
/* ==== v4.10.0 positioning: CSS ==== seam (how-it-works), list check, small inserts.
   Uses the site's existing custom properties with fallbacks, so a Direction B token swap reskins it. */

/* --- seam: one table, three views --- */
.seam{margin-top:34px;border:1px solid var(--rule,#D8D2C3);border-radius:8px;background:rgba(255,255,255,.55)}
.seam-ctl{display:flex;gap:0;border-bottom:1px solid var(--rule,#D8D2C3);overflow-x:auto}
.seam-ctl button{appearance:none;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;
  padding:14px 18px;font:inherit;font-size:14px;font-weight:500;color:var(--slate,#5A5A56);cursor:pointer;white-space:nowrap}
.seam-ctl button:hover{color:var(--ink,#0B0B0B)}
.seam-ctl button[aria-selected="true"]{color:var(--ink,#0B0B0B);border-bottom-color:var(--amber,#E8A33D)}
.seam-ctl button:focus-visible{outline:2px solid var(--amber-ink,#B5761A);outline-offset:-2px}
.seam-cap{margin:18px 20px 0;max-width:64ch;color:var(--ink,#0B0B0B);font-size:15px;min-height:2.9em}
.seam-tbl{overflow-x:auto;padding:10px 20px 4px}
.seam-tbl:focus-visible{outline:2px solid var(--amber-ink,#B5761A);outline-offset:2px}
.seam table{width:100%;border-collapse:collapse;font-size:14px;min-width:760px;table-layout:fixed}
.seam th:nth-child(1){width:17%}.seam th:nth-child(2){width:15%}.seam th:nth-child(3){width:20%}
.seam th:nth-child(4){width:15%}.seam th:nth-child(5){width:14%}.seam th:nth-child(6){width:19%}
.seam th{text-align:left;font-weight:500;font-size:12px;color:var(--slate,#5A5A56);padding:10px 12px 8px 0;
  border-bottom:1px solid var(--rule,#D8D2C3)}
.seam td{padding:11px 12px 11px 0;border-bottom:1px solid var(--rule,#E4DECF);vertical-align:top;color:var(--ink,#0B0B0B)}
.seam tbody tr:last-child td{border-bottom:0}
.seam td:first-child{font-weight:500}
.seam td.c-off{color:#B4B0A4}
.seam td.c-todo{color:var(--slate,#5A5A56);font-size:12.5px}
.seam td.c-todo::before{content:"";display:inline-block;width:10px;height:10px;margin-right:7px;vertical-align:-1px;
  border:1px dashed #B4B0A4;border-radius:2px}
.seam tr.is-open td{color:var(--amber-ink,#B5761A)}
.seam tr.is-open td:first-child{color:var(--ink,#0B0B0B)}
.seam-in td{animation:seamIn .32s ease-out both}
@keyframes seamIn{from{opacity:.25}to{opacity:1}}
.seam-foot{margin:6px 20px 16px;font-size:12px;color:var(--slate,#5A5A56)}
.seam-next{margin-top:20px;color:var(--ink,#0B0B0B)}
.seam-next a,.lc-link a{text-decoration:underline;text-underline-offset:3px}
@media(prefers-reduced-motion:reduce){.seam-in td{animation:none}}

/* --- small inserts --- */
.ask-line{margin-top:10px;font-weight:500;color:inherit}
.lc-link{margin-top:14px;font-size:14px;color:inherit}
/* Baseline: arrival from the List Check (counts only) */
.lc-arrive{margin:0 0 18px;padding:12px 14px;border-left:2px solid var(--amber,#E8A33D);background:rgba(232,163,61,.08);
  font-size:14px;color:var(--ink,#0B0B0B);max-width:62ch}
.lc-arrive.dk{margin:0 0 18px;color:#F5F3EC;background:rgba(232,163,61,.12)}
.lc-arrive.dk b{color:#fff}

/* --- list check --- */
.lc [hidden]{display:none!important}
.lc{padding:48px 0 88px}
.lc-h1{max-width:24ch;margin-top:14px}
.lc-lede{margin-top:20px;max-width:62ch}
.lc-priv{margin-top:14px;max-width:62ch;font-size:14px;color:var(--slate,#5A5A56);padding-left:12px;
  border-left:2px solid var(--amber,#E8A33D)}
.lc-in{margin-top:34px;max-width:860px}
.lc-lab{display:block;font-size:14px;font-weight:500;color:var(--ink,#0B0B0B);margin-bottom:8px}
#lc-text{width:100%;box-sizing:border-box;font-family:var(--mono,ui-monospace,monospace);font-size:13px;line-height:1.5;
  padding:14px;border:1px solid var(--rule,#D8D2C3);border-radius:6px;background:#fff;color:var(--ink,#0B0B0B);resize:vertical}
#lc-text:focus{outline:2px solid var(--amber-ink,#B5761A);outline-offset:1px}
#lc-text.is-drop{border-style:dashed;border-color:var(--amber-ink,#B5761A);background:#FFFBF2}
.lc-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:14px}
.lc-file{position:relative;font-size:14px;color:var(--ink,#0B0B0B);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.lc-file input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.lc-file:focus-within{outline:2px solid var(--amber-ink,#B5761A);outline-offset:3px}
.lc-sample{appearance:none;background:none;border:0;padding:0;font:inherit;font-size:14px;color:var(--slate,#5A5A56);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.lc-sample:hover{color:var(--ink,#0B0B0B)}
.lc-err{margin-top:12px;font-size:14px;color:#9A3412}
.lc-map{margin-top:30px;max-width:860px}
.lc-maps{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.lc-m{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--slate,#5A5A56)}
.lc-m select{font:inherit;font-size:14px;color:var(--ink,#0B0B0B);padding:7px 8px;border:1px solid var(--rule,#D8D2C3);
  border-radius:5px;background:#fff}
.lc-out{margin-top:46px;padding-top:34px;border-top:1px solid var(--rule,#D8D2C3);scroll-margin-top:110px}
.lc-act{margin-top:26px;max-width:760px}
.lc-btns{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
.lc-sec{font-size:15px;color:var(--ink,#0B0B0B);text-decoration:underline;text-underline-offset:3px}
.lc-carry{margin-top:9px;font-size:12.5px;color:var(--slate,#5A5A56)}
.lc-talk{margin-top:14px;font-size:14px}
.lc-talk a{color:var(--ink,#0B0B0B);text-decoration:underline;text-underline-offset:3px}
.lc-hc{display:flex;align-items:center;gap:12px;margin-bottom:14px;font-size:14px;color:var(--ink,#0B0B0B)}
.lc-hc input{width:130px;font:inherit;font-size:15px;padding:8px 10px;border:1px solid var(--rule,#D8D2C3);border-radius:5px;background:#fff}
.lc-hc input:focus{outline:2px solid var(--amber-ink,#B5761A);outline-offset:1px}
.lc-share{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:22px;padding-top:16px;
  border-top:1px dashed var(--rule,#D8D2C3);max-width:760px}
.lc-sh{appearance:none;background:none;border:0;padding:0;font:inherit;font-size:14px;color:var(--slate,#5A5A56);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.lc-sh:hover{color:var(--ink,#0B0B0B)}
.lc-sh:focus-visible,.lc-sec:focus-visible,.lc-talk a:focus-visible{outline:2px solid var(--amber-ink,#B5761A);outline-offset:3px}
.lc-note{font-size:13px;color:#1F6B4A}
.lc-verdict:focus{outline:none}
.lc-verdict{font-size:clamp(28px,4.2vw,46px);line-height:1.08;letter-spacing:-.02em;font-weight:600;
  color:var(--ink,#0B0B0B);max-width:22ch}
.lc-sub{margin-top:14px;max-width:62ch;color:var(--slate,#5A5A56)}
.lc-bars{margin-top:28px;max-width:760px;display:grid;gap:12px}
.lc-bar{display:grid;grid-template-columns:130px 1fr 150px;gap:14px;align-items:center;font-size:14px}
.lc-bl{color:var(--ink,#0B0B0B)}
.lc-bt{position:relative;display:flex;height:10px;background:#EAE5D8;border-radius:5px;overflow:hidden}
.lc-bt i{display:block;height:100%;background:var(--ink,#0B0B0B)}
.lc-bt b{display:block;height:100%;background:repeating-linear-gradient(135deg,var(--amber,#E8A33D) 0 3px,transparent 3px 6px)}
.lc-bn{font-variant-numeric:tabular-nums;color:var(--ink,#0B0B0B)}
.lc-bn small{display:block;font-size:12px;color:var(--amber-ink,#B5761A)}
.lc-h2{margin-top:52px;font-size:clamp(22px,2.4vw,28px)}
.lc-qs{list-style:none;padding:0;margin:18px 0 0;max-width:860px;counter-reset:q}
.lc-qs li{counter-increment:q;display:grid;grid-template-columns:34px 1fr auto;gap:4px 12px;padding:14px 0;
  border-bottom:1px solid var(--rule,#E4DECF)}
.lc-qs li::before{content:counter(q,decimal-leading-zero);grid-row:span 2;font-family:var(--mono,ui-monospace,monospace);
  font-size:12px;color:var(--amber-ink,#B5761A);padding-top:3px}
.lc-q{font-weight:500;color:var(--ink,#0B0B0B)}
.lc-s{justify-self:end;font-size:12px;padding:2px 9px;border-radius:999px;white-space:nowrap;border:1px solid}
.lc-s-yes{color:#1F6B4A;border-color:#9FCFB7;background:#EEF8F2}
.lc-s-part{color:var(--amber-ink,#B5761A);border-color:#EBC98E;background:#FFF7E8}
.lc-s-no{color:var(--slate,#5A5A56);border-color:#D0CBBE;background:transparent}
.lc-a{grid-column:2 / span 2;font-size:14px;color:var(--slate,#5A5A56);max-width:70ch}
.lc-tbl{margin-top:16px;overflow-x:auto;max-width:100%}
.lc-tbl:focus-visible{outline:2px solid var(--amber-ink,#B5761A);outline-offset:2px}
.lc-tbl table{width:100%;border-collapse:collapse;font-size:14px;min-width:720px}
.lc-tbl th{text-align:left;font-weight:500;font-size:12px;color:var(--slate,#5A5A56);padding:9px 12px 8px 0;
  border-bottom:1px solid var(--rule,#D8D2C3)}
.lc-tbl td{padding:10px 12px 10px 0;border-bottom:1px solid var(--rule,#E4DECF);vertical-align:top}
.lc-tbl td.c-on{color:var(--ink,#0B0B0B)}
.lc-tbl td.c-off{color:#B4B0A4}
.lc-tbl td small{display:block;font-size:11.5px;color:var(--amber-ink,#B5761A)}
.lc-tbl tr.is-ready td{background:rgba(232,163,61,.07)}
.lc-tbl td:last-child{color:var(--slate,#5A5A56);font-size:13px}
.lc-tbl tr.is-ready td:last-child{color:var(--ink,#0B0B0B);font-weight:500}
.lc-more{appearance:none;background:none;border:0;padding:0;margin-top:12px;font:inherit;font-size:14px;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;color:var(--ink,#0B0B0B)}
.lc-next{margin-top:14px;max-width:760px}
.lc-next p{margin-top:14px;color:var(--ink,#0B0B0B);max-width:64ch}
.lc-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
@media(max-width:640px){.lc-bar{grid-template-columns:1fr;gap:6px}.lc-qs li{grid-template-columns:28px 1fr}
  .lc-s{grid-column:2;justify-self:start}.lc-a{grid-column:2}}
@media print{.lc-in,.lc-map,.lc-acts,.lc-more,.lc-priv,.lc-act,.lc-share{display:none!important}.lc{padding:0}
  .lc-tbl table{min-width:0}.lc-tbl{overflow:visible}}
/* ==== /v4.10.0 positioning: CSS ==== */

/* ==========================================================================
   MERGED POSITIONING v4.11 — two costs, six voices, three reports
   ========================================================================== */
.hero-conseq{margin-top:18px;max-width:46ch;font-size:clamp(17px,1.6vw,20px);line-height:1.4;
  font-weight:600;color:var(--amber-ink)}
.hero-priv{margin-top:14px;max-width:48ch;font-size:14.5px;color:var(--slate);
  padding-left:13px;border-left:2px solid var(--amber)}

/* two costs */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);margin-top:36px}
.duo>div:last-child{padding-left:clamp(24px,4vw,56px);border-left:1px solid var(--rule)}
.duo h3{margin-bottom:18px;max-width:16ch}
.duo ul{list-style:none;padding:0;margin:0}
.duo li{padding:12px 0;border-bottom:1px solid var(--rule);font-size:15.5px;color:var(--slate);line-height:1.5}
.duo li:last-child{border-bottom:0}
@media(max-width:820px){
  .duo{grid-template-columns:1fr;gap:28px}
  .duo>div:last-child{padding-left:0;border-left:0;border-top:1px solid var(--rule);padding-top:28px}
}

/* six voices dial */
.obs{display:grid;grid-template-columns:minmax(0,400px) 1fr;gap:clamp(28px,5vw,64px);
  align-items:center;margin-top:40px}
.dial{position:relative;width:100%;aspect-ratio:1}
.dial svg{position:absolute;inset:0;width:100%;height:100%}
.core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:36%;aspect-ratio:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center}
.coregrid{display:grid;grid-template-columns:repeat(6,5px);gap:3px}
.coregrid i{display:block;width:5px;height:5px;background:var(--mist)}
.coregrid i.owned{background:var(--ink)}
.coregrid i.unc{background:var(--amber)}
.ccap{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--slate);line-height:1.45}
/* The sightline sweeps to the selected role: this is motion explaining a
   state change, which is the only job motion should have here. Rotation about
   the dial centre, transitioned with ease-out so it leaves quickly and settles
   gently. CSS transitions retarget from the current computed angle, so a fast
   second click redirects the sweep mid-flight rather than queueing it.
   The global prefers-reduced-motion rule already removes this. */
#sight{transform-origin:200px 200px;transition:transform .42s cubic-bezier(.22,.61,.36,1)}

.pin{position:absolute;transform:translate(-50%,-50%);background:var(--white);border:1px solid var(--rule);
  border-radius:6px;font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--slate);
  padding:7px 12px;cursor:pointer;white-space:nowrap;transition:background .16s,border-color .16s,color .16s}
.pin:hover{border-color:var(--ink);color:var(--ink)}
.pin[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
/* seven roles at 51.4 degree intervals, radius 42% from centre — recalculated
   when Sales leadership was added (v4.61.0). If the count changes again, the
   JS re-spaces the sightline automatically but these positions are manual. */
.p0{left:50.0%;top:8.0%}.p1{left:82.8%;top:23.8%}.p2{left:90.9%;top:59.3%}
.p3{left:68.2%;top:87.8%}.p4{left:31.8%;top:87.8%}.p5{left:9.1%;top:59.3%}
.p6{left:17.2%;top:23.8%}
.reading{min-height:300px}
.vwho{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--slate);margin-bottom:14px}
.vsaid{margin-top:16px;max-width:46ch;font-size:16.5px;line-height:1.55}
.vup{margin-top:16px;max-width:46ch;font-size:15.5px;color:var(--slate);line-height:1.55;
  padding-left:14px;border-left:2px solid var(--amber)}
.vnone{margin-top:16px;max-width:46ch;font-size:15px;color:var(--slate);line-height:1.55;
  padding-left:14px;border-left:2px solid var(--rule)}
.vart{margin-top:26px;padding-top:16px;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:12.5px;color:var(--amber-ink)}
.vart em{display:block;font-style:normal;color:var(--slate);font-size:10.5px;
  letter-spacing:.1em;margin-bottom:6px}
.vp[hidden]{display:none}
@media(max-width:900px){.obs{grid-template-columns:1fr}.dial{max-width:360px;margin:0 auto}}
@media(max-width:620px){
  .dial{aspect-ratio:auto;display:flex;flex-wrap:wrap;gap:8px;max-width:none}
  .dial svg,.dial .core{display:none}
  .pin{position:static;transform:none}
  .reading{min-height:0;margin-top:8px}
}

/* three reports */
.reps{margin-top:36px}
.rep{display:grid;grid-template-columns:200px 1fr;gap:clamp(20px,3vw,44px);
  padding:26px 0;border-top:1px solid var(--rule)}
.rep:last-child{border-bottom:1px solid var(--rule)}
.rep p{font-size:15.5px;color:var(--slate);max-width:52ch;line-height:1.55}
.rep>div:first-child .sm{margin-top:6px}
.rproves{margin-top:10px !important;font-family:var(--mono);font-size:12.5px;color:var(--amber-ink) !important}
@media(max-width:760px){.rep{grid-template-columns:1fr;gap:10px}}

@media (prefers-reduced-motion:reduce){.pin{transition:none}}

/* ---- hero panel: The AI Record (v4.11.1, replaces the canvas scope) ---- */
.rnm{font-size:13.5px;color:#E4E1D6;line-height:1.3;min-width:0}
.rnm em{display:block;font-style:normal;font-family:var(--mono);font-size:10.5px;
  color:#7E7B73;margin-top:3px;letter-spacing:.02em}
.rrt{grid-row:1;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  color:#6E6B64;text-transform:uppercase;justify-self:end}
.s-ok{color:#3DD69B;border-color:#1E5E47}
.s-un{color:#F2AC44;border-color:#7A4E0B}
.s-nw{color:#C9BDA1;border-color:#3A3934}
#recmore{position:absolute;left:0;right:0;bottom:6px;text-align:center}
@media(max-width:640px){.rrt{display:none}.rnm{font-size:13px}}
.survey{margin-top:14px;max-width:44ch;font-size:clamp(16.5px,1.5vw,19px);line-height:1.4;
  font-weight:600;color:var(--amber-ink)}

/* ---- AI Record panel motion (v4.11.2) ---- */
.rrow.enter{opacity:0;transform:translateY(8px)}
.rrow.leave{opacity:0;transform:translateY(-8px)}
#recmore .rq{font-style:normal;opacity:.65}
@media (prefers-reduced-motion:reduce){
  .rrow,.rst{transition:none}
  .rrow.enter,.rrow.leave{opacity:1;transform:none}
}

/* the record fills its panel even while empty, so layout never collapses */

/* ---- v4.12.0: label tracking, and continuous motion in the record ---- */
.rig .hd,.rig .ft span,.rig .ft .qn,.rig .rlab em,.rhint,
.rnm em,.rrt,.rst,.ccap,.vwho,.vart,.vart em,.rproves{letter-spacing:.01em}
.rig .hd{font-size:11.5px}
.rig .ft span{font-size:10.5px;font-weight:500}
.rig .ft .qn{font-size:9.5px;font-weight:600}
.rnm em{font-size:11.5px}
.rrt{font-size:10.5px;font-weight:500}
.ccap{font-size:11px}
.vwho{font-size:12px;font-weight:500}
.vart{font-size:13.5px;font-weight:500}
.vart em{font-size:11.5px;font-weight:400}
.rproves{font-size:13.5px;font-weight:500}
#recmore{font-size:11.5px}
#recmore b{color:#E4E1D6;font-weight:600}


/* ==========================================================================
   v4.14.0 — palette aligned to the product UI
   The product runs warm cream with sage-green gradients and terracotta for
   urgency. The site had ink, paper and amber only, with no calm colour, so
   amber carried every emphasis. Sage now carries the settled states and the
   section grounds; terracotta replaces flat red for exposure.
   ========================================================================== */
:root{
  --sage:#6E8B7A;          /* settled, owned, resolved */
  --sage-ink:#2F5544;      /* sage text on light grounds */
  --sage-bg:#EAF0EB;       /* soft ground */
  --sage-bg-2:#F2F6F1;     /* softer ground, gradient partner */
  --terra:#B5503A;         /* exposure, urgency — replaces flat red */
  --terra-bg:#FAEBE6;
}
/* section grounds: a gradient rather than a flat fill is what makes the
   product feel airy, so the tint bands borrow it */
.band-t{background:linear-gradient(155deg,var(--sage-bg) 0%,var(--sage-bg-2) 38%,var(--amber-bg) 100%)}
.band-t .card,.band-t .tbl,.band-t .pcard{background:#FFFFFF;border-color:#DCE4DC}
/* a third ground, for the sections that were flat paper */
.band-s{background:linear-gradient(170deg,var(--sage-bg-2) 0%,var(--paper) 70%)}
.band-s .card,.band-s .tbl{background:#FFFFFF;border-color:#DCE4DC}
/* settled states move from emerald to the product's sage */
.p-ok{color:var(--sage-ink)}
.band-t .kick,.band-s .kick{color:var(--sage-ink)}
/* exposure language picks up terracotta instead of the old flat red */
.p-no{color:var(--terra)}
/* the two costs read differently: exposure warm, opportunity settled */
#two-costs .duo>div:first-child h3{color:var(--terra)}
#two-costs .duo>div:last-child h3{color:var(--sage-ink)}
#two-costs .duo>div:last-child{border-left-color:#D3DED4}
/* the record's claim highlight and owned state follow sage, not emerald */
.s-ok{color:#7FC3A2;border-color:#2F5544}
/* the reports: each proves a different half, so colour them accordingly */
#reports .rep:nth-child(1) .rproves{color:var(--sage-ink)}
#reports .rep:nth-child(3) .rproves{color:var(--amber-ink)}

/* the hero ground, matching the product's opening wash */
/* scoped to the page header section only. `.hd` is also the record panel's
   header (.rig .hd), which is dark — an unscoped background here made the
   panel title invisible. */
section.hd{background:linear-gradient(150deg,var(--sage-bg) 0%,var(--sage-bg-2) 30%,var(--paper) 62%,var(--amber-bg) 100%)}
.rig .hd{background:transparent}
/* v4.70.0 — was sage-ink (#2F5544), a green left from an earlier palette
   experiment. Against the amber category line directly above it that read
   as a muddy third colour. Ink keeps the emphasis on the claim itself. */
.hero-conseq{color:var(--ink)}
.hero-priv{border-left-color:var(--sage)}

/* v4.14.1 — the panel title is a title, not a status light.
   It inherited the mint used by the old SCANNING indicator; saturated green on
   a warm dark ground at 11.5px is barely legible. The label goes to a light
   warm neutral for contrast, and the pulsing dot keeps the colour so the live
   signal survives — one small coloured element instead of coloured text. */
.rig .hd .live{color:#EFEDE4;font-weight:600;font-size:12px;letter-spacing:.05em}
.rig .hd .live i{width:6px;height:6px;background:#7FC3A2;
  box-shadow:0 0 6px 1px rgba(127,195,162,.65)}

/* v4.15.0 — two-verb column heads.
   The heads were near-identical sentences, so the eye read them as the same
   thing and the reader had to parse to the end to find the difference. Two
   words each, differentiated by the verb. Wider heading measure so nothing
   breaks mid-phrase, and the item lines are short enough not to wrap. */
#two-costs .duo h3{font-size:clamp(20px,2vw,26px);max-width:none;margin-bottom:22px}
#two-costs .duo li{font-size:16px;line-height:1.45}

/* v4.15.1 — the resolving line spans both columns.
   It answers both sides, so it sits under both: a full-width rule closes the
   two lists, and the line itself is set larger rather than longer — full
   bleed at caption size would give a 120-character measure nobody reads. */
#two-costs .resolve{
  margin:0;padding-top:30px;border-top:1px solid var(--rule);
  font-size:clamp(18px,1.9vw,23px);line-height:1.45;letter-spacing:-.012em;
  color:var(--ink);max-width:64ch}
#two-costs .resolve b{color:var(--sage-ink)}
#two-costs .duo{margin-bottom:38px}

/* ==========================================================================
   v4.16.0 — the dial has to look operable
   The pills read as labels: no raised surface, no hover, no hint that five
   more readings sit behind them. Three affordances now, in order of how early
   they work: the dial cycles on its own until someone takes control, the pills
   are visibly pressable, and a line above says so.
   ========================================================================== */
.pickprompt{margin-top:14px;font-size:15px;color:var(--slate)}
.pickprompt b{color:var(--ink);font-weight:600}

/* NOTE: .pin carries transform:translate(-50%,-50%) to centre each pill on its
   point around the dial. Any :hover or [aria-selected] rule that sets
   `transform` REPLACES that centring, so the pill jumps by half its own width
   and height and snaps back — which read as a shimmer/judder on hover and made
   the page look broken. Never set transform in a .pin state rule; and
   transform is deliberately absent from the transition list below. */
.pin{
  background:var(--white);
  border:1px solid #D6D2C4;
  box-shadow:0 1px 0 rgba(11,11,11,.05), 0 2px 6px rgba(11,11,11,.045);
  padding:8px 13px 8px 12px;
  /* ease-out, not ease: the fast start makes the pill feel like it is
     answering the pointer rather than easing into a decision. box-shadow is
     NOT transitioned here — see ::before below. */
  transition:border-color .14s ease-out,
             background-color .14s ease-out,color .14s ease-out}
/* The raised shadow lives on its own layer and cross-fades with opacity.
   Transitioning box-shadow directly repaints the pill and its surroundings on
   every hover; opacity on a separate layer is composited. Both hover and
   selected states reuse this one layer at different strengths. */
.pin::before{content:'';position:absolute;inset:0;border-radius:inherit;
  z-index:-1;pointer-events:none;opacity:0;
  box-shadow:0 2px 0 rgba(11,11,11,.06), 0 6px 14px rgba(11,11,11,.09);
  transition:opacity .14s ease-out}
.pin:hover::before{opacity:1}
.pin[aria-selected="true"]::before{opacity:1;
  box-shadow:0 2px 0 rgba(11,11,11,.12), 0 8px 18px rgba(11,11,11,.16)}
/* a caret makes it a control rather than a tag */
.pin::after{content:'';display:inline-block;width:5px;height:5px;margin-left:8px;
  border-right:1.5px solid #A8A497;border-bottom:1.5px solid #A8A497;
  transform:rotate(-45deg) translateY(-1px);transition:border-color .14s ease-out}
.pin:hover{border-color:var(--sage);color:var(--ink)}
.pin:hover::after{border-color:var(--sage-ink)}
.pin[aria-selected="true"]{
  background:var(--ink);border-color:var(--ink);color:var(--paper)}
.pin[aria-selected="true"]::after{border-color:var(--amber)}

/* No ambient pulse on the pills. Five borders breathing in unison reads as a
   rendering fault, not an affordance — and the dial already advertises itself
   by cycling. The pressed styling and the caret carry the rest. */

/* the panel fade carries the change of view; the sightline jumps, which is
   correct for an instrument re-pointing rather than sweeping. */
.reading .vp{animation:vpfade .34s ease}
@keyframes vpfade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .pin{transition:none}
  .reading .vp{animation:none}
}


/* ==========================================================================
   v4.22.0 — the descending scan bar is gone
   A line travelling down over the record was read as a fault, not a scan. The
   motion now lives in a bounded radar in the panel's instrument strip: it
   rotates inside its own circle, never crosses any text, and the record rows
   sit still. Same signal that discovery is live, none of the interference.
   ========================================================================== */
.scanread .rq{opacity:.75}
/* the record list stops above the strip */
#recmore{position:static;text-align:left}
@media (prefers-reduced-motion:reduce){
  .sweeparm,.ping{animation:none}
  .sweeparm{background:conic-gradient(from 0deg,rgba(232,163,61,.28) 0deg,rgba(232,163,61,0) 55deg,rgba(232,163,61,0) 360deg)}
}


/* ==========================================================================
   v4.23.0 — Found. Owned. Valued.
   Replaces the two-costs section (Can't govern / Can't scale). Same idiom as
   the hero's live record panel — a row gaining tags left to right — so the
   pattern is already familiar by the time the reader reaches it. Static: the
   point here is the sequence, not more motion.
   ========================================================================== */
.pstage.p1{color:var(--sage-ink);border-color:#BFD2C3;background:var(--sage-bg)}
.pstage.p2{color:#2B4A63;border-color:#C2D2DE;background:#E8EEF3}
.pstage.p3{color:var(--amber-ink);border-color:#E7CFA2;background:var(--amber-bg)}
.pstage.p4{color:var(--terra);border-color:#DFAF9F;background:var(--terra-bg)}
.pstage.p5{color:var(--ink);border-color:#D6D2C4;background:#FBFAF7;font-weight:700}
.pstage.dim{color:var(--slate);border-color:var(--rule);background:transparent;
  font-weight:400;font-style:italic}
@media(max-width:760px){
  .prow{gap:7px 8px}
  .pname{min-width:100%;max-width:none;margin-bottom:2px}
  .pstage{font-size:12px;padding:3px 8px}
}


/* ==========================================================================
   v4.30.0 — hero given a real type scale
   The H1 was carrying a full compound sentence at 74px display size, then
   three more blocks stacked underneath at nearly the same body-text size —
   nothing told the eye where to rest, so it read as a wall regardless of word
   count. Five clearly different sizes now, each doing one job:
   kicker (label) > H1 (the fact, short) > sub (the two consequences,
   confident but a third the size) > resolution (small, coloured, distinct) >
   privacy (caption, quietest thing on the page).
   ========================================================================== */
.hero-kick{display:inline-block;color:var(--amber-ink);font-size:11.5px;
  font-weight:700;letter-spacing:.11em}
/* v4.69.0 — category-message hero. The type roles changed: .hero-sub used to
   carry a short punchy line and was sized like a second headline; it now
   carries the descriptive paragraph, so it drops to body scale. The new
   .hero-cat takes the display weight, because naming the category is the line
   doing the positioning work. */
.hero-cat{margin-top:16px;max-width:30ch;font-size:clamp(19px,2vw,24px);
  font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--amber-ink)}
.hero-sub{margin-top:16px;max-width:54ch;font-size:clamp(16px,1.35vw,17.5px);
  font-weight:400;line-height:1.55;letter-spacing:0;color:var(--slate)}
/* the closing line is a claim about the category, not fine print: set off by a
   rule rather than shrunk, so it reads as a statement the page stands behind */
.hero-truth{margin-top:22px;padding-top:16px;border-top:1px solid var(--rule);
  max-width:44ch;font-size:15px;font-weight:600;color:var(--ink)}
/* this rule sits later in the file than the one at ~line 809 and so wins the
   cascade — the sage green had to be corrected HERE, not only there. */
.hero-conseq{margin-top:16px;max-width:38ch;font-size:clamp(17px,1.7vw,20px);
  font-weight:700;line-height:1.35;letter-spacing:-.006em;color:var(--ink)}
.hero-priv{margin-top:22px;max-width:44ch;font-size:12.5px;font-weight:500;
  color:var(--slate);padding-left:11px;border-left:2px solid var(--sage)}


/* ---- v4.31.0: pills that wrap by content, for a mixed-length set ---------
   The shared .pills grid forces equal-width columns, which works when every
   phrase is a similar length (used elsewhere: trial, partners, this page's
   own on-dark strip). Seven phrases of very different lengths in one row
   ("Fast to deploy" vs "Evidence behind each finding") would either leave
   huge empty padding in short pills or wrap text awkwardly in long ones.
   .flow sizes each pill to its own content and wraps like a tag cloud. */
/* ---- v4.43.0: 6-pill trust cluster, centred as a self-contained group ----
   Left-aligned wrapping at uneven lengths strands a lone pill on its own
   row under everything else in the column, jammed against the left edge.
   Centring reads as an intentional cluster — the same convention as a
   "trusted by" logo bar — rather than a layout accident, regardless of
   exact wrap points at any width. */
.pills.flow{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px;max-width:460px}
.pills.flow span{flex:0 0 auto;width:auto;padding:8px 15px;font-weight:600;
  letter-spacing:.02em;
  /* the shared --rule border (#DEDBCE) has almost no contrast against the
     hero's warm sage/amber wash — same colour family, similar lightness.
     A darker, slightly warmer border keeps the pill outline visible there. */
  border-color:#C9C0A8;background:rgba(255,255,255,.55)}
@media(max-width:640px){.pills.flow{max-width:none;justify-content:flex-start}}

/* nav fit (2026-09-18): seven links + search + CTA need ~1,090px on one line. Links and
   the CTA never wrap; below 1,200px the burger menu takes over instead of letting the
   labels break onto two lines. */
.nav-links a,body>nav .btn{white-space:nowrap}
.nav-links{gap:20px}
.nav-in{gap:22px}
@media(max-width:1200px){.nav-links{display:none}.mo-burger{display:flex}}
/* between 901px and 1,200px the CTA stays visible: keep it on the right, beside the burger */
@media(max-width:1200px) and (min-width:901px){.mo-burger{margin-left:0}}
@media(min-width:901px){.mo-mob a.mo-mob-cta{display:none}}

/* side gutter fix (2026-09-18): .hd/.hero use a padding shorthand ("X 0 Y") that zeroed the
   .shell side padding on the same element, so every page's top block sat flush against the
   screen edge below ~1,220px. Restore the gutter; vertical padding is untouched. */
.hd.shell,.hero.shell{padding-left:var(--gut);padding-right:var(--gut)}
/* the heading glow (.hd::before/.hero::before) is 20% wider than the page on each side;
   clip it at main so no browser (iOS Safari included) can pan sideways. overflow-x:clip
   creates no scroll container, so vertical overflow and sticky elements are unaffected. */
main{overflow-x:clip}

/* mobile figure alternates (2026-09-18): the SVG figures scale down to ~3.5px text on a phone.
   Below 860px (phones and portrait tablets) each figure marked .has-m is hidden and its .figm sibling (same content, real
   text) is shown instead. Only one of the two is ever displayed, so assistive tech reads one. */
.figm{display:none}
@media(max-width:860px){.fig.has-m{display:none}.figm{display:block;margin-top:26px}}
.figm ol,.figm ul,ol.figm,ul.figm{list-style:none;padding-left:0;padding-right:0}
.figm ol,.figm ul{margin:0}
.figm{--figm-ink:#0B0B0B;--figm-sub:#5A5A56;--figm-line:#D5CAB0}
.figm.on-dark,.figm-box.dark{--figm-ink:#F5F3EC;--figm-sub:#94918A;--figm-line:#3A3830}
.figm-k{display:block;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--c,var(--figm-sub))}
.figm-t{display:block;font-weight:600;font-size:16px;line-height:1.35;color:var(--figm-ink)}
.figm-s{display:block;font-size:14px;line-height:1.45;color:var(--figm-sub)}
.figm-tl li{position:relative;padding:0 0 18px 26px}
.figm-tl li::before{content:"";position:absolute;left:4px;top:10px;bottom:-6px;width:2px;background:var(--figm-line)}
.figm-tl li:last-child::before{display:none}
.figm-tl i{position:absolute;left:0;top:4px;width:10px;height:10px;border-radius:50%;background:var(--c,#5A5A56)}
.figm-tl li.now i{box-shadow:0 0 0 4px rgba(232,163,61,.28)}
.figm-rows li{padding:12px 0;border-top:1px solid var(--figm-line)}
.figm-rows li:last-child{border-bottom:1px solid var(--figm-line)}
.figm-rows.inline li{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.figm-chip{display:inline-block;margin-top:6px;font-size:12.5px;line-height:1.3;padding:3px 9px;border-radius:6px;
  border:1px solid #BFB49A;background:#FFF;color:#1D9E75;white-space:nowrap}
.figm-chip.warn{background:#FBEFDD;border:1px dashed #E8A33D;color:#7A4E0B}
.figm-chip.red{margin-top:0;background:transparent;border:0;padding:0;color:#C0392B;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.figm-end{margin-top:14px}
.figm-box{border:1px solid #BFB49A;border-radius:10px;padding:16px;background:#FFF}
.figm-box.dark{background:#0B0B0B;border-color:#2A2924}
.figm-box .figm-k{margin-bottom:6px}
.figm-pass{margin-top:12px;background:#E1F5EE;color:#0E6B4E;border-radius:6px;padding:8px 10px;font-size:14px;line-height:1.4}
.figm-arrow{text-align:center;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:#7A4E0B;margin:10px 0}
.figm-foot{margin-top:14px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--figm-sub)}
.figm-bars li{padding:12px 0;border-top:1px solid var(--figm-line)}
.figm-bars li:last-child{border-bottom:1px solid var(--figm-line)}
.figm-ba{display:flex;flex-wrap:wrap;gap:2px 12px;align-items:baseline;margin-top:4px;font-size:15px;color:var(--figm-sub)}
.figm-ba .g{white-space:nowrap}
.figm-ba b{font-size:18px;color:#1D9E75}

/* outline buttons (2026-09-18): the border was --rule (#DEDBCE), practically the colour of the
   beige/white backgrounds, so "How Moustr works" etc. did not read as buttons. Give them a
   visible 1.5px edge on light and dark bands; hover still darkens it. */
.btn-o{border:1.5px solid #9E978A}
.btn-o:hover{border-color:var(--ink)}
.band-d .btn-o{border-color:#77746B}
.band-d .btn-o:hover{border-color:var(--paper)}