: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;--blue-bg:#E7F0FC;
--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,ol,dl{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(34px,4.8vw,58px);font-weight:800;line-height:1.04;letter-spacing:-.032em}
.d2{font-size:clamp(26px,3.2vw,40px);font-weight:800;line-height:1.1;letter-spacing:-.026em}
.d3{font-size:clamp(19px,1.9vw,24px);font-weight:700;letter-spacing:-.016em}
.lede{font-size:clamp(17px,1.5vw,20px);color:var(--slate);max-width:56ch;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:1120px;margin:0 auto;padding:0 var(--gut)}
.band{padding:clamp(52px,6.5vw,96px) 0}
.band-w{background:var(--white)}
.band-d{background:var(--ink);color:#CFCDC4}
.band-d .d2,.band-d .d3{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:1120px;margin:0 auto;padding:0 var(--gut);height:60px;display:flex;align-items:center;gap:28px}
.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,.nav-links a[aria-current]{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}
.hd{padding:clamp(44px,5.5vw,76px) 0 clamp(34px,4vw,54px)}
.kick{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--amber-ink);display:block;margin-bottom:16px}
.band-d .kick{color:var(--amber)}
.pill{display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;padding:4px 8px;
border-radius:4px;white-space:nowrap}
.p-ok{background:var(--green-bg);color:#0E6B4E}.p-un{background:var(--amber-bg);color:var(--amber-ink)}
.p-no{background:var(--mist);color:var(--slate)}.p-rk{background:var(--red-bg);color:var(--red)}
.p-in{background:var(--blue-bg);color:#17518F}
.tbl{width:100%;border-collapse:collapse;margin-top:32px;background:var(--white);
border:1px solid var(--rule);border-radius:10px;overflow:hidden}
.tbl th{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--slate);
font-weight:400;padding:13px 18px;border-bottom:1px solid var(--rule);background:#FAF9F4}
.tbl td{padding:15px 18px;border-bottom:1px solid var(--rule);font-size:15px;vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl td b{font-weight:600;display:block}
.tbl td span.sub{display:block;font-size:13.5px;color:var(--slate);margin-top:3px;line-height:1.45}

.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,28px);margin-top:36px}
.duo{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.8vw,40px);margin-top:36px}
@media(max-width:860px){.trio,.duo{grid-template-columns:1fr;gap:22px}}
.card{background:var(--white);border:1px solid var(--rule);border-radius:10px;padding:24px}
.band-d .card{background:#141310;border-color:#2A2924}
.card h3{font-size:18px;font-weight:700}.card p{margin-top:8px;font-size:14.5px;color:var(--slate);line-height:1.55}
.band-d .card p{color:#94918A}
.split{display:grid;grid-template-columns:1fr 1fr;margin-top:36px;border:1px solid var(--rule);
border-radius:10px;overflow:hidden}
@media(max-width:800px){.split{grid-template-columns:1fr}}
.split>div{padding:clamp(22px,3vw,32px);background:var(--white)}
.split>div+div{border-left:1px solid var(--rule)}
@media(max-width:800px){.split>div+div{border-left:0;border-top:1px solid var(--rule)}}
.split h3{font-size:16px;font-weight:700}
.split ul{list-style:none;padding:0;margin-top:14px}
.split li{position:relative;padding-left:22px;font-size:15px;color:var(--slate);margin-bottom:10px;line-height:1.5}
.split li::before{position:absolute;left:0;font-family:var(--mono);font-size:14px}
.split .yes li::before{content:"+";color:var(--green)}
.split .no li::before{content:"\2013";color:var(--red)}
.fig{width:100%;height:auto;display:block;margin-top:36px}
.note{margin-top:26px;font-size:15px;color:var(--slate);max-width:62ch;line-height:1.55}
.note b{color:var(--ink);font-weight:600}
.flag{margin-top:32px;border-left:3px solid var(--amber);background:var(--amber-bg);
padding:18px 22px;border-radius:0 8px 8px 0}
.flag b{display:block;font-size:15.5px;font-weight:600;color:var(--amber-ink)}
.flag p{margin-top:5px;font-size:14.5px;color:#6B4A16;line-height:1.5}
body>footer{background:var(--ink);color:#7E7B73;padding:46px 0 34px}
.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:38px;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}}
/* --- partner + resources components --- */
.route{display:grid;grid-template-columns:1fr;gap:0;margin-top:36px;border:1px solid var(--rule);
border-radius:10px;overflow:hidden;background:var(--white)}
.route a{display:grid;grid-template-columns:150px 1fr auto;gap:24px;align-items:center;padding:24px 26px;
text-decoration:none;border-bottom:1px solid var(--rule);transition:background .16s}
.route a:last-child{border-bottom:0}
.route a:hover{background:#FAF9F4}
.route .rk{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--amber-ink)}
.route .rt{font-size:19px;font-weight:700}
.route .rd{font-size:14.5px;color:var(--slate);margin-top:4px;line-height:1.5}
.route .rr{font-family:var(--mono);font-size:13px;color:var(--slate);white-space:nowrap}
@media(max-width:800px){.route a{grid-template-columns:1fr;gap:8px}.route .rr{margin-top:6px}}
.econ{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);
border:1px solid var(--rule);border-radius:10px;overflow:hidden;margin-top:36px}
@media(max-width:760px){.econ{grid-template-columns:1fr}}
.econ div{background:var(--white);padding:26px}
.econ b{display:block;font-family:var(--mono);font-size:30px;font-weight:700;letter-spacing:-.02em;
color:var(--amber-ink);font-variant-numeric:tabular-nums}
.econ span{display:block;font-size:14.5px;color:var(--slate);margin-top:8px;line-height:1.5}
.band-d .econ{background:#2A2924;border-color:#2A2924}
.band-d .econ div{background:#141310}
.band-d .econ b{color:var(--amber)}.band-d .econ span{color:#94918A}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}
.chips button{font-family:var(--sans);font-size:14px;font-weight:500;padding:8px 15px;border-radius:99px;
border:1px solid var(--rule);background:var(--white);color:var(--slate);cursor:pointer;transition:.16s}
.chips button:hover{border-color:var(--ink);color:var(--ink)}
.chips button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.arts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,26px);margin-top:32px}
@media(max-width:900px){.arts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.arts{grid-template-columns:1fr}}
.art{display:flex;flex-direction:column;text-decoration:none;background:var(--white);
border:1px solid var(--rule);border-radius:10px;padding:22px;transition:border-color .16s}
.art:hover{border-color:var(--ink)}
.art .ty{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;padding:4px 8px;border-radius:4px;align-self:flex-start}
.art h3{font-size:17.5px;font-weight:700;margin-top:14px;line-height:1.3;letter-spacing:-.012em}
.art p{font-size:14.5px;color:var(--slate);margin-top:8px;line-height:1.5;flex:1}
.art .mt{font-family:var(--mono);font-size:11px;color:#9A9689;margin-top:16px;
padding-top:12px;border-top:1px solid var(--rule)}
.art.ph{border-style:dashed;background:transparent}
.art.ph h3{color:var(--slate)}
.prose{max-width:68ch;margin-top:32px}
.prose h2{font-size:clamp(22px,2.4vw,30px);font-weight:800;letter-spacing:-.02em;margin-top:44px;line-height:1.2}
.prose h3{font-size:19px;font-weight:700;margin-top:32px}
.prose p{margin-top:16px;line-height:1.68}
.prose ul,.prose ol{margin-top:16px;padding-left:22px}
.prose li{margin-bottom:9px;line-height:1.6}
.prose blockquote{margin:28px 0;padding:18px 24px;border-left:3px solid var(--amber);
background:var(--white);border-radius:0 8px 8px 0;font-size:18px;line-height:1.55}
.prose figure{margin:32px 0}
.prose figcaption{font-size:13.5px;color:var(--slate);margin-top:10px;font-family:var(--mono)}
.meta{display:flex;flex-wrap:wrap;gap:0;margin-top:22px;border-top:1px solid var(--rule);padding-top:14px}
.meta span{font-family:var(--mono);font-size:11.5px;color:var(--slate);
padding-right:15px;margin-right:15px;border-right:1px solid var(--rule)}
.meta span:last-child{border:0;margin:0;padding:0}
.todo{border:1px dashed var(--amber);background:var(--amber-bg);border-radius:8px;
padding:14px 18px;margin:22px 0;font-size:14px;color:#6B4A16;line-height:1.5}
.todo b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.09em;color:var(--amber-ink);margin-bottom:5px}

/* ── progressive disclosure ── */
.mo-more{border-top:1px solid var(--rule);padding-top:18px}
.mo-more>summary{cursor:pointer;list-style:none;font-size:15px;font-weight:600;color:var(--amber-ink);
  display:flex;align-items:center;gap:9px;padding:4px 0}
.mo-more>summary::-webkit-details-marker{display:none}
.mo-more>summary::before{content:"";width:16px;height:16px;flex-shrink:0;
  border:1.5px solid var(--amber);border-radius:50%;position:relative;transition:transform .25s}
.mo-more>summary::after{content:"+";position:absolute;margin-left:4px;font-family:var(--mono);
  font-size:12px;color:var(--amber);pointer-events:none}
.mo-more[open]>summary::after{content:"–"}
.mo-more>summary:hover{color:var(--ink)}
.band-d .mo-more{border-top-color:#2A2924}
.band-d .mo-more>summary{color:var(--amber)}
.band-d .mo-more>summary:hover{color:var(--paper)}

/* ═══════════ 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 ================= */
.demo-note{font-family:var(--mono);font-size:11.5px;color:#8B887F;margin-top:12px;line-height:1.65;max-width:56ch}
/* 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. */
.demo-note:empty{display:none;margin-top:0}
.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)}


/* ---- resource cards awaiting publication ---- */
.art.soon{background:var(--paper);border-style:dashed;cursor:default}
.art.soon:hover{border-color:var(--rule)}
.art.soon h3{color:var(--slate)}
.art.soon .ty{opacity:.72}
.art .st{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--amber-ink);
  margin-top:14px;padding-top:12px;border-top:1px solid var(--rule);display:flex;
  align-items:center;gap:8px;flex-wrap:wrap}
.art .st i{width:6px;height:6px;border-radius:50%;background:var(--amber);flex-shrink:0}
.art .st a{color:var(--amber-ink);text-decoration:underline;text-underline-offset:2px}
.art .st a:hover{color:var(--ink)}


/* ---- 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 — see the matching note in home.v28.css. The right-hand link sits in
   a reserved fixed-width slot so revealing it never nudges the section label,
   and only .now is allowed to flex. Interior pages carry 5 children
   (lead|sep|here|now|top), the homepage 3, so this stays flex not grid. */
.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%}
.trail .now{color:var(--amber-ink);overflow:hidden;text-overflow:ellipsis;
  flex:1 1 auto;min-width:0}
.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}
/* ==== 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}
.lc-hero{display:block;margin-top:14px;text-align:center;font-size:13.5px;color:#C9C6BD;text-decoration:underline;
  text-decoration-color:rgba(232,163,61,.6);text-underline-offset:3px}
.lc-hero:hover{color:#FFFFFF}
.lc-hero:focus-visible{outline:2px solid var(--amber,#E8A33D);outline-offset:3px}
/* 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 ==== */


/* ---- v4.12.0: the monospace face is retired --------------------------------
   --mono now resolves to Inter. Everything that used it for data alignment
   keeps tabular figures; the wide teletype tracking comes off so small labels
   read as labels rather than printout. */
.num,[class*="num"],.rig .ft b,.cell input,.tier .pr,.pnum{font-variant-numeric:tabular-nums}
.kick{letter-spacing:.06em;font-weight:600;text-transform:none;font-size:12px}


/* ==========================================================================
   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}
.rrow.flash{background:rgba(127,195,162,.15)}
.rrow.flash .rst{box-shadow:0 0 0 1px rgba(127,195,162,.5)}
/* 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)}

/* 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)}