/* ORO SAGE (orosage.in)
   Design system ported verbatim from ORO-SAGE_Landing-Page_ver01_10072026.html (the design
   source of truth). Additions below the mockup block: mobile-nav hamburger, wired lead form,
   price-free plans (Phase 0), thank-you/404 helpers. Charcoal + antique gold + sage on warm
   off-white. Both light and dark are first-class. No em dashes in copy. */

:root{
  /* Chosen neutrals: warm-neutral off-white + Nikivya-family charcoal */
  --paper:#F4F4F1;
  --surface:#FCFCFB;
  --surface-2:#ECECE8;
  --ink:#1A1A1A;          /* charcoal (Nikivya family) */
  --ink-soft:#2D2D2D;
  --text:#1F1F1F;
  --text-soft:#5A5A57;
  --line:#E2E2DD;
  --gold:#B58A3E;         /* antique gold: the "Oro" */
  --gold-deep:#8E6C2C;
  --gold-tint:#F4EBD8;
  --sage:#5C7C69;         /* muted sage: the "Sage" */
  --sage-deep:#3F5A4A;
  --sage-tint:#E4EDE6;
  --up:#2F7D5B;
  --down:#B4483E;
  --shadow:0 1px 2px rgba(20,20,20,.06), 0 8px 30px rgba(20,20,20,.06);
  --shadow-lg:0 2px 6px rgba(20,20,20,.08), 0 24px 60px rgba(20,20,20,.10);
  --display:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,'Times New Roman',serif;
  --body:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,Roboto,sans-serif;
  --mono:'SF Mono','JetBrains Mono',Menlo,Consolas,ui-monospace,monospace;
  --wrap:1120px;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#131313; --surface:#1B1B1B; --surface-2:#262626;
    --ink:#F1F1EE; --ink-soft:#C9C9C4; --text:#EAEAE6; --text-soft:#A6A6A0;
    --line:#343434; --gold:#D0A85B; --gold-deep:#B98F44; --gold-tint:#241D10;
    --sage:#7FA089; --sage-deep:#A7C2B0; --sage-tint:#14251C;
    --up:#4FA97E; --down:#D06B60;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 30px rgba(0,0,0,.35);
    --shadow-lg:0 2px 6px rgba(0,0,0,.5), 0 24px 60px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --paper:#131313; --surface:#1B1B1B; --surface-2:#262626;
  --ink:#F1F1EE; --ink-soft:#C9C9C4; --text:#EAEAE6; --text-soft:#A6A6A0;
  --line:#343434; --gold:#D0A85B; --gold-deep:#B98F44; --gold-tint:#241D10;
  --sage:#7FA089; --sage-deep:#A7C2B0; --sage-tint:#14251C;
  --up:#4FA97E; --down:#D06B60;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 30px rgba(0,0,0,.35);
  --shadow-lg:0 2px 6px rgba(0,0,0,.5), 0 24px 60px rgba(0,0,0,.5);
}
:root[data-theme="light"]{
  --paper:#F4F4F1; --surface:#FCFCFB; --surface-2:#ECECE8;
  --ink:#1A1A1A; --ink-soft:#2D2D2D; --text:#1F1F1F; --text-soft:#5A5A57;
  --line:#E2E2DD; --gold:#B58A3E; --gold-deep:#8E6C2C; --gold-tint:#F4EBD8;
  --sage:#5C7C69; --sage-deep:#3F5A4A; --sage-tint:#E4EDE6;
  --up:#2F7D5B; --down:#B4483E;
  --shadow:0 1px 2px rgba(20,20,20,.06), 0 8px 30px rgba(20,20,20,.06);
  --shadow-lg:0 2px 6px rgba(20,20,20,.08), 0 24px 60px rgba(20,20,20,.10);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{animation:none!important;transition:none!important}}
body{
  margin:0;background:var(--paper);color:var(--text);font-family:var(--body);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--display);font-weight:600;color:var(--ink);text-wrap:balance;margin:0}
h1{font-size:clamp(2.3rem,5.4vw,4.05rem);line-height:1.04;letter-spacing:-.015em}
h2{font-size:clamp(1.7rem,3.4vw,2.55rem);line-height:1.1;letter-spacing:-.01em}
h3{font-size:1.16rem;line-height:1.28}
p{margin:0}
a{color:inherit}
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);font-weight:600}
.mono{font-family:var(--mono)}
.tnum{font-variant-numeric:tabular-nums}
.skip-link{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:0 0 8px 0;z-index:100}
.skip-link:focus{left:0}

/* Nav */
header.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:28px;height:68px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto}
.brand .wordmark{font-family:var(--display);font-weight:600;font-size:1.28rem;letter-spacing:.02em;color:var(--ink)}
.brand .wordmark b{color:var(--gold-deep);font-weight:600}
.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{text-decoration:none;color:var(--text-soft);font-size:.93rem;font-weight:500}
.nav-links a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--body);font-weight:600;font-size:.95rem;
  padding:11px 20px;border-radius:9px;border:1px solid transparent;cursor:pointer;text-decoration:none;transition:transform .12s ease,box-shadow .2s ease,background .2s}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.btn-primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.btn-gold{background:var(--gold);color:#1A1A1A;border-color:var(--gold)}
.btn-gold:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-deep)}
.nav .btn{padding:9px 16px}
.nav-toggle{display:none;background:transparent;border:1px solid var(--line);border-radius:8px;width:40px;height:38px;
  cursor:pointer;align-items:center;justify-content:center;color:var(--ink)}
.nav-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.nav-toggle span{display:block;width:18px;height:2px;background:currentColor;position:relative}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor}
.nav-toggle span::before{top:-6px}.nav-toggle span::after{top:6px}
@media(max-width:820px){
  .nav-links{
    display:none;position:absolute;top:68px;left:0;right:0;flex-direction:column;align-items:flex-start;gap:0;
    background:var(--surface);border-bottom:1px solid var(--line);box-shadow:var(--shadow);padding:8px 24px 16px}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 0;width:100%;border-bottom:1px solid var(--line);font-size:1rem}
  .nav-links a:last-child{border-bottom:0}
  .nav-toggle{display:inline-flex}
}

section{padding:88px 0}
.section-tight{padding:64px 0}

/* Hero */
.hero{position:relative;overflow:hidden;padding:76px 0 72px}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:40px}}
.hero h1{margin:18px 0 0}
.hero .lede{margin-top:22px;font-size:1.2rem;line-height:1.55;color:var(--text-soft);max-width:36ch}
.hero-cta{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}
.not-list{margin-top:26px;display:flex;flex-wrap:wrap;gap:8px}
.chip{font-family:var(--mono);font-size:.76rem;letter-spacing:.02em;color:var(--text-soft);border:1px solid var(--line);
  background:var(--surface);border-radius:999px;padding:6px 13px}
.chip s{color:var(--down);text-decoration-thickness:1.5px}

/* Hero panel: a "live decision card" showing transparency */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden}
.panel-top{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.dot{width:9px;height:9px;border-radius:50%}
.panel-title{font-family:var(--mono);font-size:.78rem;letter-spacing:.03em;color:var(--text-soft)}
.panel-body{padding:20px 18px}
.decis{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.decis .tk{font-family:var(--display);font-size:1.5rem;color:var(--ink)}
.decis .verb{font-family:var(--mono);font-size:.8rem;font-weight:600;color:var(--up);border:1px solid color-mix(in srgb,var(--up) 40%,transparent);padding:4px 10px;border-radius:6px;letter-spacing:.05em}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin-top:16px;font-family:var(--mono);font-size:.82rem}
.kv dt{color:var(--text-soft)}
.kv dd{margin:0;text-align:right;color:var(--text);font-variant-numeric:tabular-nums}
.gate-row{margin-top:18px;border-top:1px dashed var(--line);padding-top:14px}
.gate{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.78rem;color:var(--text-soft);padding:3px 0}
.tick{width:15px;height:15px;flex:0 0 auto;color:var(--sage)}
.prov{margin-top:14px;font-family:var(--mono);font-size:.68rem;color:var(--text-soft);opacity:.8}

/* trust strip */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface)}
.trust-in{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
@media(max-width:760px){.trust-in{grid-template-columns:repeat(2,1fr)}}
.trust-cell{padding:26px 22px;border-right:1px solid var(--line)}
.trust-cell:last-child{border-right:0}
@media(max-width:760px){.trust-cell:nth-child(2){border-right:0}.trust-cell:nth-child(1),.trust-cell:nth-child(2){border-bottom:1px solid var(--line)}}
.trust-cell .n{font-family:var(--display);font-size:1.7rem;color:var(--ink);font-variant-numeric:tabular-nums}
.trust-cell .l{font-size:.86rem;color:var(--text-soft);margin-top:4px}

/* section head */
.shead{max-width:62ch;margin-bottom:44px}
.shead h2{margin-top:12px}
.shead p{margin-top:14px;color:var(--text-soft);font-size:1.08rem}

/* seven roles */
.roles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:900px){.roles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.roles{grid-template-columns:1fr}}
.role{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px;transition:border-color .2s,transform .15s,box-shadow .2s}
.role:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:var(--shadow)}
.role .num{font-family:var(--mono);font-size:.72rem;color:var(--gold-deep);letter-spacing:.1em}
.role h3{margin:10px 0 8px}
.role p{font-size:.92rem;color:var(--text-soft);line-height:1.5}
.role.span2{grid-column:span 2}
@media(max-width:520px){.role.span2{grid-column:span 1}}
.role .tag{display:inline-block;margin-top:12px;font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;
  color:var(--sage-deep);background:var(--sage-tint);border-radius:6px;padding:3px 8px}

/* alt band */
.band{background:var(--ink);color:var(--paper)}
.band h2{color:var(--paper)}
.band .eyebrow{color:var(--gold)}
.band p{color:color-mix(in srgb,var(--paper) 78%,transparent)}
.band .feature{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:12px}
@media(max-width:820px){.band .feature{grid-template-columns:1fr}}
.band .feat{border-top:2px solid var(--gold);padding-top:16px}
.band .feat h3{color:var(--paper);font-size:1.08rem}
.band .feat p{margin-top:8px;font-size:.94rem}

/* shadow proof: two ledgers */
.proof{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px}
@media(max-width:820px){.proof{grid-template-columns:1fr}}
.ledger{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px}
.ledger .lh{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:.76rem;color:var(--text-soft);letter-spacing:.04em}
.bars{display:flex;align-items:flex-end;gap:7px;height:120px;margin-top:18px}
.bar{flex:1;border-radius:4px 4px 0 0;background:var(--sage);opacity:.55}
.bar.hi{background:var(--gold);opacity:1}
.ledger .cap{margin-top:14px;font-size:.86rem;color:var(--text-soft)}

/* plans */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch}
@media(max-width:820px){.plans{grid-template-columns:1fr}}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:30px;display:flex;flex-direction:column}
.plan.feature{border-color:var(--gold);box-shadow:var(--shadow-lg);position:relative}
.plan .flag{position:absolute;top:-12px;left:30px;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  background:var(--gold);color:#1A1A1A;padding:5px 11px;border-radius:6px;font-weight:600}
.plan .pk{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep)}
.plan h3{font-size:1.5rem;margin:10px 0 6px}
.plan .sub{color:var(--text-soft);font-size:.96rem;min-height:44px}
.feat-list{list-style:none;padding:0;margin:20px 0 24px;display:flex;flex-direction:column;gap:11px}
.feat-list li{display:flex;gap:10px;font-size:.94rem;color:var(--text)}
.feat-list svg{flex:0 0 auto;margin-top:3px;color:var(--sage)}
.plan .btn{margin-top:auto;justify-content:center}
.plan .fine{font-family:var(--mono);font-size:.7rem;color:var(--text-soft);margin-top:12px;text-align:center}
/* price-free Phase 0 pricing note (replaces the mockup's tier tables) */
.plan .pricing-note{margin:16px 0 6px;padding:14px 16px;border:1px dashed var(--line);border-radius:11px;background:var(--paper)}
.plan.feature .pricing-note{border-color:color-mix(in srgb,var(--gold) 55%,var(--line))}
.plan .pricing-note .pl{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-deep)}
.plan .pricing-note .pv{margin-top:6px;font-size:.92rem;color:var(--text);line-height:1.45}

/* pms band */
.pms{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
@media(max-width:820px){.pms{grid-template-columns:1fr;gap:28px}}
.pms ul{margin:6px 0 0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:0}
.pms li{display:flex;gap:13px;font-size:1rem;line-height:1.45;color:color-mix(in srgb,var(--paper) 92%,transparent);padding:15px 0;border-bottom:1px solid color-mix(in srgb,var(--paper) 15%,transparent)}
.pms li:last-child{border-bottom:0}
.pms li svg{flex:0 0 auto;margin-top:3px;color:var(--gold)}

/* waitlist cta */
.cta{background:var(--ink);color:var(--paper);border-radius:22px;padding:56px 44px;text-align:center;box-shadow:var(--shadow-lg)}
.cta h2{color:var(--paper);max-width:20ch;margin:0 auto}
.cta p{color:color-mix(in srgb,var(--paper) 76%,transparent);margin:16px auto 0;max-width:52ch}
.form{display:flex;gap:10px;max-width:560px;margin:28px auto 0;flex-wrap:wrap}
.form .row{display:flex;gap:10px;width:100%;flex-wrap:wrap}
.form .field{flex:1;min-width:200px}
@media(max-width:560px){.form,.form .row{flex-direction:column}}
.form input,.form select{width:100%;padding:14px 16px;border-radius:10px;border:1px solid color-mix(in srgb,var(--paper) 24%,transparent);
  background:color-mix(in srgb,var(--paper) 8%,transparent);color:var(--paper);font-family:var(--body);font-size:1rem}
.form select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,color-mix(in srgb,var(--paper) 55%,transparent) 50%),linear-gradient(135deg,color-mix(in srgb,var(--paper) 55%,transparent) 50%,transparent 50%);
  background-position:calc(100% - 20px) center,calc(100% - 14px) center;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:40px}
.form input::placeholder{color:color-mix(in srgb,var(--paper) 55%,transparent)}
.form option{color:#1A1A1A}
.form input:focus,.form select:focus{outline:2px solid var(--gold);outline-offset:1px}
.form .btn{white-space:nowrap}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-message{display:none;width:100%;margin-top:6px;font-size:.95rem;text-align:center}
.cta .micro{font-family:var(--mono);font-size:.72rem;color:color-mix(in srgb,var(--paper) 60%,transparent);margin-top:16px}

/* brand system appendix */
.brandsys{background:var(--surface-2)}
.swrap{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:8px}
@media(max-width:820px){.swrap{grid-template-columns:1fr}}
.logo-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:26px;display:flex;flex-direction:column;gap:18px}
.logo-lockup{display:flex;align-items:center;gap:14px}
.logo-lockup .wm{font-family:var(--display);font-size:1.55rem;letter-spacing:.03em;color:var(--ink);font-weight:600}
.logo-lockup .wm b{color:var(--gold-deep)}
.logo-variants{display:flex;gap:14px;flex-wrap:wrap}
.lv{width:76px;height:76px;border-radius:12px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line)}
.lv.ink{background:var(--ink)}
.lv.paper{background:var(--paper)}
.lv.gold{background:var(--gold)}
.swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.sw{border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--surface)}
.sw .chip2{height:62px}
.sw .meta{padding:9px 11px;font-family:var(--mono);font-size:.68rem}
.sw .meta b{display:block;color:var(--ink);font-size:.76rem}
.sw .meta span{color:var(--text-soft)}
.type-spec{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:26px;margin-top:24px}
.type-spec .row{padding:14px 0;border-bottom:1px solid var(--line)}
.type-spec .row:last-child{border-bottom:0}
.type-spec .lab{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-soft)}
.ts-display{font-family:var(--display);font-size:1.9rem;color:var(--ink);margin-top:6px}
.ts-body{font-family:var(--body);font-size:1.05rem;color:var(--text);margin-top:6px}
.ts-mono{font-family:var(--mono);font-size:1rem;color:var(--sage-deep);margin-top:6px}

/* footer */
footer{background:var(--ink);color:color-mix(in srgb,var(--paper) 72%,transparent);padding:56px 0 40px;font-size:.9rem}
footer .fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
@media(max-width:820px){footer .fgrid{grid-template-columns:1fr 1fr;gap:26px}}
footer h4{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin:0 0 14px}
footer a{color:color-mix(in srgb,var(--paper) 72%,transparent);text-decoration:none;display:block;padding:4px 0}
footer a:hover{color:var(--paper)}
footer .wm{font-family:var(--display);font-size:1.3rem;color:var(--paper);font-weight:600}
.disclaim{margin-top:36px;padding-top:24px;border-top:1px solid color-mix(in srgb,var(--paper) 16%,transparent);
  font-family:var(--mono);font-size:.72rem;line-height:1.7;color:color-mix(in srgb,var(--paper) 56%,transparent)}
.theme-toggle{background:transparent;border:1px solid var(--line);color:var(--text-soft);border-radius:8px;padding:8px 10px;cursor:pointer;font-family:var(--mono);font-size:.72rem}
.theme-toggle:hover{border-color:var(--gold);color:var(--gold-deep)}

/* thank-you + 404 shared helpers */
.centered{min-height:60vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:80px 0}
.centered .inner{max-width:52ch}
.centered p{color:var(--text-soft);font-size:1.1rem;margin-top:16px}
.centered .hero-cta{justify-content:center;margin-top:28px}

/* ---- Interior pages (about, legal, contact) ---- */
.page-hero{padding:64px 0 8px;border-bottom:1px solid var(--line);background:var(--surface)}
.breadcrumb{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--text-soft)}
.breadcrumb a{text-decoration:none;color:var(--gold-deep)}
.breadcrumb a:hover{text-decoration:underline}
.page-hero h1{margin:14px 0 0;font-size:clamp(2rem,4.4vw,3rem)}
.page-hero .lede{margin:16px 0 40px;font-size:1.15rem;color:var(--text-soft);max-width:60ch}

/* readable prose column for policy + content pages */
.prose{max-width:70ch;margin:0 auto;padding:8px 0 8px}
.prose h2{font-size:1.5rem;margin:40px 0 12px}
.prose h3{font-size:1.12rem;margin:26px 0 8px;font-family:var(--display)}
.prose p{margin:0 0 16px;color:var(--text)}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px;color:var(--text)}
.prose li{margin:0 0 9px;line-height:1.55}
.prose strong{color:var(--ink)}
.prose a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:2px}
.prose a:hover{color:var(--gold)}
.prose .updated{font-family:var(--mono);font-size:.74rem;color:var(--text-soft);margin:0 0 8px}
.callout{border:1px solid var(--line);border-left:3px solid var(--gold);background:var(--surface);border-radius:10px;padding:18px 20px;margin:22px 0}
.callout p:last-child{margin-bottom:0}
.callout.sage{border-left-color:var(--sage)}

/* About page */
.about-grid{display:grid;grid-template-columns:.9fr 1.6fr;gap:44px;align-items:start;margin-top:8px}
@media(max-width:820px){.about-grid{grid-template-columns:1fr;gap:28px}}
.headshot{width:100%;aspect-ratio:1/1;border-radius:16px;border:1px solid var(--line);background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:var(--shadow)}
.headshot img{width:100%;height:100%;object-fit:cover;display:block}
.headshot .ph{font-family:var(--mono);font-size:.72rem;color:var(--text-soft);text-align:center;padding:20px;line-height:1.5}
.about-side .who{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-deep);margin-top:16px}
.about-side .nm{font-family:var(--display);font-size:1.4rem;color:var(--ink);margin-top:6px}
.about-side .rl{color:var(--text-soft);font-size:.95rem;margin-top:2px}
.about-side .ln{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:.9rem;color:var(--gold-deep);text-decoration:none;font-weight:600}
.about-side .ln:hover{text-decoration:underline}

/* Contact page */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;margin-top:8px}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr;gap:32px}}
.contact-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:26px}
.contact-card h3{font-size:1.05rem;margin-bottom:6px}
.contact-row{padding:14px 0;border-bottom:1px solid var(--line)}
.contact-row:last-child{border-bottom:0}
.contact-row .k{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-soft)}
.contact-row .v{margin-top:5px;color:var(--text);font-size:.98rem;line-height:1.5}
.contact-row .v a{color:var(--gold-deep);text-decoration:none}
.contact-row .v a:hover{text-decoration:underline}
/* light-surface form variant for the contact page (the CTA form is dark-on-ink) */
.form.on-light input,.form.on-light select{background:var(--paper);border-color:var(--line);color:var(--text)}
.form.on-light input::placeholder{color:var(--text-soft)}
.form.on-light .form-message{color:var(--text)}


/* --- Daily quote (homepage close) --- */
.quote-daily{background:var(--surface);border-top:1px solid var(--line)}
.dq{max-width:760px;margin:0 auto;text-align:center}
.dq .eyebrow{color:var(--gold-deep)}
.dq-quote{font-family:var(--display);font-weight:600;color:var(--ink);font-size:clamp(1.5rem,3.4vw,2.15rem);line-height:1.34;margin:18px 0 0;text-wrap:balance;quotes:"\201C" "\201D"}
.dq-quote::before{content:open-quote;color:var(--gold)}
.dq-quote::after{content:close-quote;color:var(--gold)}
.dq-by{margin-top:24px;font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep)}
.dq-by::before{content:"";display:block;width:34px;height:2px;background:var(--gold);opacity:.7;border-radius:2px;margin:0 auto 16px}
@media(max-width:640px){.quote-daily{padding:64px 0}.dq-quote{font-size:1.4rem}}


/* --- Theme toggle: sun / moon icons (replaces the old "Aa") --- */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;padding:7px 9px;line-height:0}
.theme-toggle svg{display:block}
.theme-toggle .ic-sun{display:none}
.theme-toggle .ic-moon{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-theme]) .theme-toggle .ic-moon{display:none}
  :root:not([data-theme]) .theme-toggle .ic-sun{display:block}
}
:root[data-theme="dark"] .theme-toggle .ic-moon{display:none}
:root[data-theme="dark"] .theme-toggle .ic-sun{display:block}
:root[data-theme="light"] .theme-toggle .ic-moon{display:block}
:root[data-theme="light"] .theme-toggle .ic-sun{display:none}


/* ============================================================================
   PAGE COMPONENTS introduced by the site-v2 content pack (07-Aug-2026)
   Every colour, radius, shadow and font here is a token from the block at the top
   of this file. Nothing new is invented: no new hexes, no decorative gradients.
   Both themes come free because every colour is a variable. Mobile-first: each
   grid collapses to a single column by 720px, and the one wide table scrolls
   inside its own container so the page body never scrolls sideways.
   ============================================================================ */

/* --- Hero: live-capital badge ------------------------------------------------ */
.live-badge{display:flex;align-items:flex-start;gap:10px;max-width:46ch;margin:22px 0 0;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:11px 15px;
  font-family:var(--mono);font-size:.76rem;line-height:1.55;color:var(--text-soft)}
.live-dot{flex:0 0 auto;width:8px;height:8px;margin-top:7px;border-radius:50%;background:var(--up);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--up) 20%,transparent)}

/* --- "Illustrative, not a recommendation" caption ---------------------------- */
/* Sits inside a decision card (rule above it) or standing alone under the signal
   cards (centred, no rule). Never optional on anything shaped like a call. */
.illustrative{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line);
  font-family:var(--mono);font-size:.68rem;line-height:1.5;color:var(--text-soft)}
p.illustrative{margin-top:16px;padding-top:0;border-top:0;text-align:center}
@media(max-width:720px){p.illustrative{text-align:left}}

/* --- Custody strip (full-bleed, above the fold) ------------------------------ */
.custody-strip{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.custody-strip p{max-width:84ch;margin:0 auto;padding:20px 0;text-align:center;
  font-size:.98rem;line-height:1.55;color:var(--text-soft)}
@media(max-width:720px){.custody-strip p{text-align:left;font-size:.94rem;padding:18px 0}}

/* --- Three self-select doors -------------------------------------------------- */
.door-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.door-grid{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.door-grid{grid-template-columns:1fr;gap:16px}}
.door-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:16px;padding:24px;text-decoration:none;color:inherit;
  transition:border-color .2s,transform .15s,box-shadow .2s}
.door-card:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:var(--shadow)}
.door-card:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.door-card h3{margin:0 0 10px}
.door-card p{font-size:.94rem;line-height:1.55;color:var(--text-soft)}
/* Slot for the inline door artwork. Each door holds a hand-drawn 4:5 SVG that
   carries its own charcoal panel and rounded corner, so the slot needs no border,
   no aspect-ratio and no fixed height: the art sizes itself and scales with the
   card at every breakpoint. Only the spacing below it belongs here. */
.door-art{display:block;margin-bottom:18px}
.door-art svg{display:block;width:100%;height:auto;border-radius:12px}
.door-link{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:18px;
  font-family:var(--mono);font-size:.74rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gold-deep)}
.door-card:hover .door-link{color:var(--gold)}
.door-link svg{transition:transform .15s ease}
.door-card:hover .door-link svg{transform:translateX(3px)}

/* --- Operational stat bar (four dated tiles) ---------------------------------- */
.stat-band{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat-bar{display:grid;grid-template-columns:repeat(4,1fr)}
.stat-tile{padding:30px 24px;border-left:1px solid var(--line)}
.stat-tile:first-child{border-left:0;padding-left:0}
.stat-tile:last-child{padding-right:0}
.stat-value{font-family:var(--display);font-weight:600;font-size:2rem;line-height:1.1;color:var(--ink)}
.stat-label{margin-top:7px;font-size:.9rem;line-height:1.45;color:var(--text-soft)}
.stat-asof{margin-top:10px;font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-soft);opacity:.75}
.stat-band-note{max-width:80ch;margin:0 0 30px;padding-top:22px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:.72rem;line-height:1.7;color:var(--text-soft)}
@media(max-width:820px){
  .stat-bar{grid-template-columns:1fr 1fr}
  .stat-tile{padding:26px 22px}
  .stat-tile:nth-child(odd){border-left:0;padding-left:0}
  .stat-tile:nth-child(even){padding-right:0}
  .stat-tile:nth-child(n+3){border-top:1px solid var(--line)}
}
@media(max-width:560px){
  .stat-bar{grid-template-columns:1fr}
  .stat-tile{border-left:0;padding:22px 0}
  .stat-tile+.stat-tile{border-top:1px solid var(--line)}
  .stat-value{font-size:1.75rem}
}

/* --- The 10/90 problem: three pains ------------------------------------------- */
.pains{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.pains{grid-template-columns:1fr;gap:20px}}
.pain{border-top:2px solid var(--gold);padding-top:18px}
.pain h3{font-size:1.08rem}
.pain p{margin-top:10px;font-size:.95rem;line-height:1.55;color:var(--text-soft)}

/* --- Section head used mid-page, and the "more on this" link under a section --- */
.shead-mid{margin-top:64px}
@media(max-width:720px){.shead-mid{margin-top:44px}}
.section-more{margin-top:32px;font-size:.95rem}
.section-more a{color:var(--gold-deep);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.section-more a:hover{color:var(--gold)}
.band .section-more a{color:var(--gold)}
.band .section-more a:hover{color:var(--paper)}

/* --- USP comparison table ------------------------------------------------------ */
/* Four columns of prose is wide by nature, so it scrolls inside its own container
   rather than pushing the page sideways on a phone. */
.usp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--surface);
  border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.usp-table{width:100%;min-width:800px;border-collapse:collapse;font-size:.93rem}
.usp-caption{caption-side:top;text-align:left;padding:22px 24px 4px;font-family:var(--mono);
  font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-soft)}
.usp-table th,.usp-table td{padding:16px 18px;text-align:left;vertical-align:top;
  line-height:1.5;color:var(--text-soft);border-bottom:1px solid var(--line)}
.usp-table thead th{font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-soft)}
.usp-table tbody tr:last-child th,.usp-table tbody tr:last-child td{border-bottom:0}
.usp-rowhead{width:16%;min-width:136px;font-family:var(--body);font-size:.93rem;
  font-weight:600;color:var(--ink)}
/* the ORO SAGE column is the answer column, so the eye should land on it */
.usp-table .usp-ours{background:var(--gold-tint);color:var(--text)}
.usp-table thead .usp-ours{color:var(--gold-deep)}
.mk{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:18px;height:18px;margin-right:9px;vertical-align:-4px;
  border:1px solid currentColor;border-radius:50%}
.mk svg{width:13px;height:13px}
.mk-yes{color:var(--sage)}
.mk-no{color:var(--down)}
.mk-part{color:var(--text-soft)}
.gate-mark{margin-left:4px;color:var(--gold-deep);font-weight:600;text-decoration:none}
.gate-mark:hover{text-decoration:underline}
.usp-note{max-width:84ch;margin:18px 0 0;font-family:var(--mono);font-size:.72rem;
  line-height:1.7;color:var(--text-soft)}
@media(max-width:720px){
  .usp-table{font-size:.88rem}
  .usp-table th,.usp-table td{padding:14px 15px}
  .usp-caption{padding:18px 18px 4px}
}

/* --- Signal cards (the real message format, on an illustrative ticker) --------- */
.signal-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.signal-cards{grid-template-columns:1fr}}
.signal-card{display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--line);border-radius:14px;padding:20px}
.signal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.signal-tag{font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.08em;
  padding:4px 10px;border:1px solid currentColor;border-radius:6px}
.tag-buy{color:var(--up)}
.tag-trail{color:var(--gold-deep)}
.tag-target{color:var(--sage-deep)}
.signal-time{font-size:.72rem;color:var(--text-soft);font-variant-numeric:tabular-nums}
.signal-body{margin:0;padding:14px 15px;background:var(--paper);border:1px solid var(--line);
  border-radius:10px;font-size:.8rem;line-height:1.65;color:var(--text)}
.signal-gloss{margin-top:14px;font-size:.92rem;line-height:1.5;color:var(--text-soft)}
.signal-note{max-width:84ch;margin:24px 0 0;font-size:.95rem;line-height:1.6;color:var(--text-soft)}

/* --- Pricing ladder inside a plan card ----------------------------------------- */
.price-ladder{overflow:hidden;margin:4px 0 16px;background:var(--paper);
  border:1px solid var(--line);border-radius:12px}
.plan.feature .price-ladder{border-color:color-mix(in srgb,var(--gold) 55%,var(--line))}
.price-row{display:grid;grid-template-columns:1fr auto auto;align-items:baseline;gap:4px 16px;
  padding:12px 16px;border-bottom:1px solid var(--line)}
.price-row:last-child{border-bottom:0}
.price-term{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-soft)}
.price-amt{font-family:var(--display);font-weight:600;font-size:1.25rem;color:var(--ink);text-align:right}
.price-pm{min-width:98px;font-family:var(--mono);font-size:.72rem;color:var(--text-soft);text-align:right}
.price-best{background:var(--gold-tint)}
.price-best .price-term{color:var(--gold-deep)}
.price-framing{margin:0 0 16px;font-size:.86rem;line-height:1.55;color:var(--text-soft)}
.price-min{margin:0 0 16px;padding:13px 15px;background:var(--sage-tint);border-radius:10px;
  font-size:.88rem;line-height:1.55;color:var(--text)}
.price-min strong{color:var(--ink)}
@media(max-width:560px){
  .price-row{grid-template-columns:1fr auto}
  .price-pm{grid-column:2;min-width:0}
}

/* --- Homepage plans tease (deliberately carries no numbers) --------------------- */
.plans-tease .plan{padding:28px}
.plans-tease-note{max-width:76ch;margin:24px auto 0;text-align:center;
  font-size:.95rem;line-height:1.6;color:var(--text-soft)}
@media(max-width:720px){.plans-tease-note{text-align:left}}

/* --- Skin-in-the-game notes ------------------------------------------------------ */
.proof-note{max-width:80ch;margin:26px 0 0;font-size:1rem;line-height:1.6;color:var(--text-soft)}
.legal-fine{max-width:84ch;margin:16px 0 0;font-size:.72rem;line-height:1.7;color:var(--text-soft);opacity:.9}

/* --- EOI form: light surface is the default now ---------------------------------- */
/* The carried .form rules above are the dark-on-ink variant written for the homepage
   CTA. /plans/, /signals/ and /autopilot/ stand the same form on the page surface,
   where paper-on-paper text is invisible. So: light is the base, and the dark
   treatment is scoped to the two contexts that are actually dark (.cta and .band).
   .form.on-light stays valid and is now simply the same as the default.
   The select arrows keep the file's existing two-triangle technique; the only change
   is which token colours them. */
.form input,.form select{background:var(--paper);border-color:var(--line);color:var(--text)}
.form select{background-image:
    linear-gradient(45deg,transparent 50%,var(--text-soft) 50%),
    linear-gradient(135deg,var(--text-soft) 50%,transparent 50%);
  background-position:calc(100% - 20px) center,calc(100% - 14px) center;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.form input::placeholder{color:var(--text-soft)}
.form-message{color:var(--text)}
.cta .form input,.cta .form select,.band .form input,.band .form select{
  background-color:color-mix(in srgb,var(--paper) 8%,transparent);
  border-color:color-mix(in srgb,var(--paper) 24%,transparent);color:var(--paper)}
.cta .form select,.band .form select{background-image:
    linear-gradient(45deg,transparent 50%,color-mix(in srgb,var(--paper) 55%,transparent) 50%),
    linear-gradient(135deg,color-mix(in srgb,var(--paper) 55%,transparent) 50%,transparent 50%)}
.cta .form input::placeholder,.band .form input::placeholder{color:color-mix(in srgb,var(--paper) 55%,transparent)}
.cta .form-message,.band .form-message{color:var(--paper)}
.form .row-submit{justify-content:center}
/* The form's closing micro-line travels with the form partial, so it needs to read
   on the page surface too, not only inside the dark CTA. */
.micro{max-width:560px;margin:16px auto 0;text-align:center;font-family:var(--mono);
  font-size:.72rem;line-height:1.6;color:var(--text-soft)}


/* --- Build-system additions (site-v2 pipeline, 07-Aug-2026) ---
   Everything above this line is the Phase 0 design system, ported in full.
   Only rules the templated build itself needs live below. Keep this block small:
   page components belong above, with the rest of the system. --- */

/* Footer legal block is now two real <p> elements inside .disclaim (it used to be a
   single <p> with <br><br>), so it needs its own paragraph spacing. */
.disclaim p+p{margin-top:14px}

/* The primary nav carries five items now (How it works, Safety, Plans, Journal,
   For fund managers). Tighten the gap just below the desktop breakpoint so the
   row never collides with the brand and the Request access button. */
@media(min-width:821px) and (max-width:1080px){
  .nav-in{gap:18px}
  .nav-links{gap:18px}
  .nav-links a{font-size:.88rem}
}


/* ============================================================================
   BRAND GRAPHICS WIRING (07-Aug-2026)
   Wiring only. No new colour, radius or font: every value below is a token from
   the block at the top of this file, and the art itself was drawn on the brand
   hexes already declared there.

   The delivered PNGs are baked on a field colour rather than on transparency,
   and that fact decides where each one can go:

     hero-visual                              field #1A1A1A (the --ink value)
     about-banner                             field #F4F4F1 (the light --paper)

   Both are page backgrounds, so each is scoped to the theme whose page field it
   already matches, using the same three-rule pattern this file already uses for
   the sun and moon toggle. In the opposite theme the image is simply absent,
   which is the state the page is in today rather than a regression.

   The three doors used to be wired here as PNG backgrounds on .door-art. They
   are hand-authored inline SVG in partials/doors.html now, so the only rule they
   need is the two-line slot in the doors section above. The PNG files stay on
   disk, unreferenced.
   ============================================================================ */

/* --- Hero visual: homepage hero, dark theme ---------------------------------- */
/* hero-visual.png is 2400x1350 and composed for exactly this slot: the left
   third is empty for the headline and the ring motif sits right, where the
   decision card stands. .hero already carries position:relative and
   overflow:hidden, so the art goes on the section background and every child
   paints over it with no stacking work.
   Its #1A1A1A field is the dark-theme page value, so this is a dark-theme
   asset: in light theme the same file would be a black slab under dark text.
   The gradient in front of it holds the headline column at full page contrast
   and releases only the right side, so the rings read as a halo behind the
   card rather than as competition for it. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]) .hero{
    background-image:
      linear-gradient(90deg,var(--paper) 0%,
        color-mix(in srgb,var(--paper) 78%,transparent) 42%,transparent 78%),
      url("/images/hero-visual.png");
    background-position:center right;background-size:cover;background-repeat:no-repeat}
}
:root[data-theme="dark"] .hero{
  background-image:
    linear-gradient(90deg,var(--paper) 0%,
      color-mix(in srgb,var(--paper) 78%,transparent) 42%,transparent 78%),
    url("/images/hero-visual.png");
  background-position:center right;background-size:cover;background-repeat:no-repeat}
/* At 900px the hero grid collapses to one column and the card drops under the
   headline, so the rings would sit behind body copy instead of beside it.
   Both selectors are repeated here so this wins on specificity and order. */
@media(max-width:900px){
  :root:not([data-theme]) .hero,
  :root[data-theme="dark"] .hero{background-image:none}
}

/* --- About banner: /about/ page hero, light theme ---------------------------- */
/* about-banner.png is 2400x800 line art on #F4F4F1, the light-theme --paper
   value, so it is the light-theme counterpart to the hero visual. /about/ has
   no page-specific class on its wrapper, and the brief is CSS only, so the page
   is identified by the .about-grid it is the only page to contain.
   multiply keeps the banner's field from repainting the hero surface while the
   gold and sage rules come through at close to full strength. */
body:has(.about-grid) .page-hero{
  background-image:url("/images/about-banner.png");
  background-position:center right;background-size:cover;background-repeat:no-repeat;
  background-blend-mode:multiply}
@media (prefers-color-scheme: dark){
  :root:not([data-theme]) body:has(.about-grid) .page-hero{background-image:none}
}
:root[data-theme="dark"] body:has(.about-grid) .page-hero{background-image:none}
:root[data-theme="light"] body:has(.about-grid) .page-hero{
  background-image:url("/images/about-banner.png")}


/* ============================================================================
   IN-PAGE NAVIGATION (07-Aug-2026)
   Two pieces that both depend on the height of the site header, so they are kept
   together with that height written down once.

   header.nav is position:sticky, top:0. Its inner row is a fixed 68px plus the
   header's own 1px bottom border, so it occupies exactly 69px at every width:
   the mobile menu is position:absolute and overlays the page instead of growing
   the header, so the number never changes with the breakpoint.
   ============================================================================ */
:root{
  --nav-h:69px;       /* .nav-in 68px + header.nav border-bottom 1px */
  --chip-nav-h:57px;  /* .chip-nav-in 56px + .chip-nav border-bottom 1px */
}

/* --- Sticky section chips (/for-fund-managers/) ------------------------------ */
/* The bar parks directly under the header, never over it, and sits below the
   header in the stack (z-index 40 against the header's 50) so the mobile menu
   still opens over it. Background is the solid --surface token, not a tint: the
   page has to scroll underneath it cleanly. */
.chip-nav{position:sticky;top:var(--nav-h);z-index:40;
  background:var(--surface);border-bottom:1px solid var(--line)}
/* Fixed row height keeps --chip-nav-h honest whatever the font metrics do. */
.chip-nav-in{display:flex;align-items:center;gap:8px;height:56px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none}
.chip-nav-in::-webkit-scrollbar{display:none}
/* Narrow screens scroll the row sideways rather than wrapping it into a block
   several rows tall, which would eat most of a phone screen on every scroll. */
.chip-nav .chip{flex:0 0 auto;white-space:nowrap;text-decoration:none;
  transition:border-color .2s ease,color .2s ease}
.chip-nav .chip:hover{border-color:var(--gold);color:var(--gold-deep)}
.chip-nav .chip:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* Anchor targets stop under the two stacked bars unless they are pushed clear.
   Scoped to siblings of the bar, so no other page is touched. */
.chip-nav ~ section[id]{scroll-margin-top:calc(var(--nav-h) + var(--chip-nav-h))}

/* --- Back to top (every page, from partials/footer.html) --------------------- */
/* Hidden until the visitor is past roughly 600px; main.js adds .show. Kept in
   from the screen edges so it clears the thumb zone on a phone. Both themes come
   free: every value here is a token that already flips. */
.to-top{position:fixed;right:18px;bottom:18px;z-index:60;
  width:44px;height:44px;padding:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface);color:var(--ink);border:1px solid var(--line);
  box-shadow:var(--shadow);cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(6px);
  /* visibility is a discrete property, so it is switched with a delay rather than
     eased: 0s on the way in, so the button is there for the whole fade up, and
     .2s on the way out, so it is only removed once the fade down has finished. */
  transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s,
             border-color .2s ease,color .2s ease}
.to-top.show{opacity:1;visibility:visible;transform:none;
  transition:opacity .2s ease,transform .2s ease,visibility 0s linear 0s,
             border-color .2s ease,color .2s ease}
.to-top:hover{border-color:var(--gold);color:var(--gold-deep)}
.to-top:focus-visible{outline:2px solid var(--gold);outline-offset:2px}