/* Rory's Edge — site styles.
   Dark forest green with metallic gold, editorial type, terminal-style numbers.
   Mobile first: base rules are for phones, @media (min-width) adds desktop. */

:root {
  --bg: #0A1F19;        /* page background */
  --panel: #0E2A22;     /* panels and cards */
  --line: #1D4636;      /* borders and dividers */
  --gold: #C9A24B;      /* primary accent */
  --gold-hi: #E4C87A;   /* hovers, active states, graph line */
  --cream: #F3EFE3;     /* body text */
  --muted: #9DB3A8;     /* secondary text */
  --profit: #86B59A;    /* muted sage */
  --loss: #C9776B;      /* dusty brick */
  --term: #071411;      /* the audit panel's own darker surface */
  --term-2: #0B1A17;
  --radius: 18px;
  --radius-sm: 12px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --slow: 420ms;
  --serif: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background-color: var(--bg);
  /* faint grass: thin curved blades tiled across the page, barely there */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%231D4636' stroke-width='1.1' stroke-linecap='round' opacity='.28'%3E%3Cpath d='M12 150c4-22 2-40 10-58M22 152c1-18 9-30 6-50M40 156c-3-20 6-34 2-52M58 150c5-14 0-30 9-44M74 158c-4-24 4-36 0-60M92 152c3-16-4-30 5-46M110 156c-2-22 7-32 3-54M128 150c4-14-2-30 8-46M146 156c-3-20 5-32 1-52M4 90c3-14 1-26 7-38M30 98c2-16 8-24 4-40M52 92c-2-12 4-24 2-36M78 100c3-14-3-24 5-38M100 96c-2-16 6-24 2-40M124 100c3-12 0-26 6-38M150 94c-2-16 4-22 2-38M18 40c2-10 0-18 5-26M44 44c-2-12 3-20 1-30M70 40c3-10-2-20 4-30M96 46c-2-12 5-18 1-30M122 40c2-10-1-20 5-28M148 44c-2-12 3-18 1-30'/%3E%3C/g%3E%3C/svg%3E");
  color: var(--cream);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.12;
  margin: 0 0 .5em;
  color: var(--cream);
  letter-spacing: -.01em;
}
h1 { font-size: clamp(2rem, 6.5vw, 3.4rem); }
h2 { font-size: clamp(1.55rem, 4.5vw, 2.2rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
a { color: var(--gold-hi); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #fff; }
code, .mono { font-family: var(--mono); font-size: .92em; }
code { background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 6px; padding: .05em .4em; color: var(--gold-hi); }
strong { color: #fff; font-weight: 600; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; border-radius: 6px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: min(1100px, 100% - 2rem); margin-inline: auto; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.pos { color: var(--profit); }
.neg { color: var(--loss); }
.muted { color: var(--muted); }
.eyebrow { font-family: var(--sans); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin: 0 0 .7rem; }
.rule { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold) 80%, transparent); opacity: .55; margin: 0; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(10,31,25,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(29,70,54,.7); }
.site-header .wrap { display: flex; align-items: center; gap: 1rem; min-height: 64px; }
.brand { display: flex; align-items: center; gap: .5rem; color: var(--cream); text-decoration: none; font-family: var(--serif); font-size: 1.02rem; white-space: nowrap; }
.brand img { width: 34px; height: 34px; border-radius: 50%; }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: .75rem; font-size: .9rem; white-space: nowrap; }
.site-nav .only-wide { display: none; }
.site-nav a:not(.btn) { color: var(--muted); text-decoration: none; }
.site-nav a:not(.btn):hover, .site-nav a[aria-current="page"] { color: var(--cream); }
.site-nav .btn-sm { padding: .55rem .9rem; font-size: .86rem; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .95rem 1.6rem; border-radius: 999px; font-weight: 600; text-decoration: none; border: 1px solid transparent; transition: transform var(--slow) var(--ease), box-shadow var(--slow) var(--ease), background var(--slow) var(--ease), color var(--slow) var(--ease); cursor: pointer; font-family: var(--sans); font-size: 1rem; line-height: 1; }
.btn-gold { background: linear-gradient(180deg, var(--gold-hi), var(--gold)); color: #1a1408; box-shadow: 0 10px 30px -10px rgba(201,162,75,.55); }
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -10px rgba(228,200,122,.7); color: #1a1408; }
.btn-ghost { background: transparent; color: var(--cream); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--gold); color: #fff; }
.btn-sm { padding: .6rem 1.05rem; font-size: .9rem; }
.btn svg { width: 1.1em; height: 1.1em; }

/* ---------- hero ---------- */
.hero { padding: clamp(2.5rem, 8vw, 5.5rem) 0 2.5rem; text-align: center; }
.hero img.mark { width: 96px; height: 96px; border-radius: 50%; margin-bottom: 1.2rem; filter: drop-shadow(0 12px 30px rgba(0,0,0,.45)); }
.hero h1 { max-width: 16ch; margin-inline: auto; }
.hero h1 em { font-style: italic; color: var(--gold-hi); }
.hero .lede { max-width: 42ch; margin: 0 auto 1.8rem; color: var(--muted); font-size: 1.08rem; }
.hero .cta { display: flex; flex-direction: column; align-items: center; gap: .8rem; }
.hero .cta .btn-gold { font-size: 1.1rem; padding: 1.15rem 2.1rem; }
.hero .after { font-size: .92rem; color: var(--muted); margin: 0; }
.hero .after a { color: var(--cream); }

/* ---------- headline totals ---------- */
.totals { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin: 1.8rem 0 0; }
.totals .t { background: rgba(14,42,34,.75); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .85rem .75rem; text-align: left; min-width: 0; }
.totals .t .v { display: block; font-size: 1.2rem; color: var(--cream); font-weight: 500; white-space: nowrap; }
.totals .t .k { display: block; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: .25rem; }
.totals .t.wide { grid-column: span 2; }
.totals-note { text-align: center; color: var(--muted); font-size: .85rem; margin: .8rem 0 0; }

/* ---------- audit panel ---------- */
.audit { padding: 2.5rem 0 1rem; }
.audit-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .5rem 1.5rem; margin-bottom: 1rem; }
.audit-head p { color: var(--muted); max-width: 52ch; margin: 0; }

.seg { display: inline-flex; background: rgba(7,20,17,.9); border: 1px solid var(--line); border-radius: 999px; padding: 4px; gap: 2px; }
.seg button { appearance: none; border: 0; background: transparent; color: var(--muted); padding: .5rem .95rem; border-radius: 999px; font: 600 .9rem var(--sans); cursor: pointer; transition: color var(--slow) var(--ease), background var(--slow) var(--ease); }
.seg button:hover { color: var(--cream); }
.seg button[aria-pressed="true"] { background: var(--line); color: var(--gold-hi); }

.panel { background: var(--term); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 30px 60px -30px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.03); overflow: hidden; }
.panel-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem .9rem; border-bottom: 1px solid var(--line); }
.panel-top .seg { flex: 0 0 auto; }
.panel-top .live { font: .75rem var(--mono); color: var(--muted); display: none; }

.panel-body { display: grid; grid-template-columns: 44px 1fr; }
.ptabs { display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--term-2); }
.ptabs button { appearance: none; border: 0; background: transparent; color: var(--muted); flex: 0 0 auto; min-height: 92px; writing-mode: vertical-rl; font: 600 .8rem var(--sans); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; border-bottom: 1px solid var(--line); position: relative; transition: color var(--slow) var(--ease), background var(--slow) var(--ease); }
.ptabs button:last-child { border-bottom: 0; }
.ptabs button:hover { color: var(--cream); }
.ptabs button[aria-pressed="true"] { color: var(--gold-hi); background: var(--term); }
.ptabs button[aria-pressed="true"]::after { content: ""; position: absolute; right: -1px; top: 10%; height: 80%; width: 2px; background: var(--gold); border-radius: 2px; }

.pmain { min-width: 0; padding: 1rem .9rem .9rem; }
.pmain.is-switching .fade { opacity: 0; }
.fade { transition: opacity 220ms var(--ease); }

.sel-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .75rem; margin-bottom: .6rem; }
.sel-head h3 { font-family: var(--serif); font-size: 1.35rem; margin: 0; }
.tag { display: inline-block; font: 600 .68rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(201,162,75,.45); border-radius: 999px; padding: .15rem .55rem; vertical-align: middle; }
.tag.soft { color: var(--muted); border-color: var(--line); }

.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem .9rem; margin-bottom: .6rem; }
.stat { padding: .3rem 0; }
.stat .v { display: block; font-size: 1.28rem; color: var(--cream); }
.stat .k { display: block; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: .1rem; }
.stat.hero-stat { grid-column: span 2; padding-bottom: .5rem; border-bottom: 1px dashed var(--line); margin-bottom: .25rem; }
.stat.hero-stat .v { font-size: 2rem; line-height: 1.05; }
.stat.value .v { color: var(--gold-hi); }
.stat.pos .v { color: var(--profit); }
.stat.neg .v { color: var(--loss); }
.staking { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem .9rem; padding-top: .5rem; border-top: 1px dashed var(--line); }
.staking[hidden] { display: none; }
.stat-note { font-size: .8rem; color: var(--muted); margin: .2rem 0 .5rem; }

/* graph */
.graph { position: relative; height: 230px; margin: .5rem 0 .3rem; touch-action: pan-y; }
.graph svg { display: block; width: 100%; height: 100%; overflow: visible; }
.graph .grid line { stroke: var(--line); stroke-width: 1; }
.graph .zero { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 4; opacity: .8; }
.graph .axis text { fill: var(--muted); font: .68rem var(--mono); }
.graph .curve { fill: none; stroke: var(--gold-hi); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.graph .area-pos { fill: url(#gradPos); }
.graph .area-neg { fill: url(#gradNeg); }
.graph .dot { fill: var(--term); stroke: var(--gold-hi); stroke-width: 1.5; }
.graph .cross { stroke: var(--gold); stroke-width: 1; opacity: 0; }
.graph .focus { fill: var(--gold-hi); stroke: var(--term); stroke-width: 2; opacity: 0; }
.graph .tip { position: absolute; pointer-events: none; background: var(--panel); border: 1px solid var(--gold); border-radius: 8px; padding: .3rem .55rem; font: .78rem var(--mono); color: var(--cream); white-space: nowrap; opacity: 0; transform: translate(-50%, 0); transition: opacity 150ms var(--ease); }
.graph .tip b { color: var(--gold-hi); font-weight: 600; }
.graph.is-empty svg { opacity: .25; }

.empty { padding: 2.2rem 1rem; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--radius-sm); margin: .5rem 0; }
.empty[hidden] { display: none; }

/* card rail */
.rail-head { display: flex; align-items: center; justify-content: space-between; margin: .7rem 0 .4rem; font-size: .78rem; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.rail-head .older { display: inline-flex; align-items: center; gap: .3rem; transition: opacity var(--slow) var(--ease); }
.rail-head .older.is-end { opacity: .25; }
.rail-wrap { position: relative; margin: 0 -.9rem -.9rem; }
.rail-wrap::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 44px; background: linear-gradient(90deg, rgba(7,20,17,0), var(--term)); pointer-events: none; transition: opacity var(--slow) var(--ease); }
.rail-wrap.is-end::after { opacity: 0; }
.rail { display: flex; gap: .6rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: .9rem; padding: .25rem .9rem .9rem; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.rail::-webkit-scrollbar { height: 6px; }
.rail::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.card { flex: 0 0 76%; scroll-snap-align: start; appearance: none; text-align: left; background: var(--term-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .8rem .85rem; color: var(--cream); cursor: pointer; transition: transform var(--slow) var(--ease), border-color var(--slow) var(--ease), box-shadow var(--slow) var(--ease), background var(--slow) var(--ease); animation: cardIn 420ms var(--ease) both; }
.card:hover { transform: translateY(-3px); border-color: var(--gold-hi); }
.card[aria-pressed="true"] { border-color: var(--gold); background: rgba(201,162,75,.07); box-shadow: 0 0 0 1px rgba(201,162,75,.35), 0 14px 30px -18px rgba(228,200,122,.5); }
.card .c-label { display: flex; justify-content: space-between; align-items: baseline; gap: .4rem; font: 500 .95rem var(--serif); margin-bottom: .45rem; }
.card .c-label .tag { font-size: .58rem; padding: .1rem .4rem; }
.card .c-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem .6rem; }
.card .c-grid .v { display: block; font-size: 1rem; white-space: nowrap; }
.card .c-grid .k { display: block; font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.card .c-note { font-size: .7rem; color: var(--muted); margin-top: .4rem; }
@keyframes cardIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.panel-foot { padding: .7rem .9rem; border-top: 1px solid var(--line); font: .74rem var(--mono); color: var(--muted); display: flex; flex-wrap: wrap; gap: .25rem 1.2rem; }
.panel-foot span::before { content: "▸ "; color: var(--gold); }
.audit-foot { color: var(--muted); font-size: .85rem; margin: .9rem 0 0; }

/* ---------- how it works teaser ---------- */
.how { padding: 3rem 0; }
.how + .how { padding-top: 0; }
.steps { display: grid; gap: .9rem; counter-reset: step; margin: 1.2rem 0; }
.step { background: rgba(14,42,34,.7); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.2rem 1rem; position: relative; }
.step::before { counter-increment: step; content: counter(step); font: 500 1.5rem var(--serif); color: var(--gold); display: block; margin-bottom: .35rem; }
.step h3 { margin-bottom: .3rem; }
.step p { color: var(--muted); margin: 0; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 2rem 0 6rem; color: var(--muted); font-size: .85rem; }
.site-footer .legal { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center; margin-bottom: .8rem; }
.age { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--cream); color: var(--cream); font: 700 .78rem var(--sans); }
.site-footer p { margin: .3rem 0; max-width: 70ch; }

/* ---------- sticky CTA (phones) ---------- */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(10,31,25,0), rgba(10,31,25,.95) 40%); display: flex; justify-content: center; transform: translateY(110%); transition: transform var(--slow) var(--ease); }
.sticky-cta.is-shown { transform: none; }
.sticky-cta .btn { width: min(420px, 100%); box-shadow: 0 -4px 30px rgba(0,0,0,.4), 0 10px 30px -10px rgba(201,162,75,.55); }

/* ---------- guide page ---------- */
.guide-hero { padding: 2.5rem 0 1rem; }
.guide-hero p { color: var(--muted); max-width: 56ch; }
.guide-layout { display: grid; gap: 1.5rem; padding-bottom: 3rem; }
.guide-layout > * { min-width: 0; }
.toc { position: sticky; top: 64px; z-index: 10; background: rgba(10,31,25,.92); backdrop-filter: blur(8px); margin: 0 -1rem; padding: .5rem 1rem; border-bottom: 1px solid var(--line); }
.toc ol { list-style: none; margin: 0; padding: 0; display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; }
.toc ol::-webkit-scrollbar { display: none; }
.toc a { display: inline-block; white-space: nowrap; font-size: .82rem; color: var(--muted); text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: .35rem .8rem; }
.toc a:hover, .toc a.is-active { color: var(--gold-hi); border-color: var(--gold); }
.guide section { scroll-margin-top: 130px; padding: 1.8rem 0; border-bottom: 1px solid var(--line); }
.guide section:last-child { border-bottom: 0; }
.guide h2 .n { font-family: var(--mono); font-size: .9rem; color: var(--gold); display: block; letter-spacing: .1em; margin-bottom: .3rem; }
.guide ol, .guide ul { padding-left: 1.3rem; }
.guide li { margin-bottom: .45rem; }
.guide li::marker { color: var(--gold); }
.callout { background: rgba(14,42,34,.75); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: var(--radius-sm); padding: 1rem 1.1rem; margin: 1.2rem 0; }
.callout.warn { border-left-color: var(--loss); }
.callout p:last-child { margin-bottom: 0; }
.channels { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .3rem; }
.channels li { display: flex; gap: .7rem; align-items: baseline; padding: .45rem .7rem; border-radius: 8px; background: rgba(7,20,17,.6); border: 1px solid var(--line); }
.channels li code { flex: 0 0 auto; }
.channels li.group { background: transparent; border: 0; padding: .9rem 0 .1rem; font: 600 .74rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.channels li .d { color: var(--muted); font-size: .92rem; }
.channels li strong { color: var(--cream); }

/* Discord embed replicas */
.discord { background: #313338; color: #dbdee1; border-radius: 10px; padding: .8rem .9rem; font-family: "gg sans", var(--sans); font-size: .93rem; margin: 1rem 0; }
.discord .who { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.discord .who .av { width: 26px; height: 26px; border-radius: 50%; }
.discord .who b { color: #f2f3f5; }
.discord .who .app { background: #5865f2; color: #fff; font-size: .62rem; border-radius: 4px; padding: .05em .35em; font-weight: 600; }
.discord .who time { color: #949ba4; font-size: .75rem; }
.discord .embed { background: #2b2d31; border-left: 4px solid #1f8b4c; border-radius: 4px; padding: .6rem .75rem; max-width: 420px; display: grid; grid-template-columns: 1fr auto; gap: .2rem .6rem; }
.discord .embed.red { border-left-color: #ed4245; }
.discord .embed .t { font-weight: 700; color: #f2f3f5; grid-column: 1; }
.discord .embed .thumb { grid-column: 2; grid-row: 1 / span 3; width: 56px; height: 56px; border-radius: 6px; }
.discord .embed p { margin: .2rem 0; grid-column: 1; }
.discord .embed a { color: #00a8fc; text-decoration: none; }
.discord .embed .u { text-decoration: underline; font-weight: 600; color: #f2f3f5; }
.discord .embed b { color: #f2f3f5; }
.discord .ping { color: #c9cdfb; background: rgba(88,101,242,.3); border-radius: 3px; padding: 0 .2em; font-weight: 500; }


.example { background: var(--term); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; margin: 1.2rem 0; }
.example table { width: 100%; border-collapse: collapse; margin-top: .6rem; font-size: .95rem; }
.example th, .example td { text-align: left; padding: .45rem .3rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.example th { color: var(--muted); font-weight: 500; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
.example td:last-child, .example th:last-child { text-align: right; }

.faq details { border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(14,42,34,.55); margin-bottom: .6rem; }
.faq summary { cursor: pointer; padding: .9rem 1rem; font-family: var(--serif); font-size: 1.08rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--gold); font-family: var(--mono); font-size: 1.2rem; transition: transform var(--slow) var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 1rem .9rem; color: var(--muted); }
.faq details > div p:last-child { margin: 0; }

.links-grid { display: grid; gap: .6rem; margin: 1rem 0; }
.links-grid a { display: flex; flex-direction: column; gap: .15rem; text-decoration: none; padding: .8rem .95rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(7,20,17,.5); color: var(--cream); transition: border-color var(--slow) var(--ease), transform var(--slow) var(--ease); }
.links-grid a:hover { border-color: var(--gold); transform: translateY(-2px); }
.links-grid a small { color: var(--muted); }

/* ---------- desktop ---------- */
@media (min-width: 720px) {
  .site-nav .only-wide { display: inline; }
  .site-nav { gap: 1.2rem; font-size: .95rem; }
  .site-nav .btn-sm { padding: .6rem 1.05rem; font-size: .9rem; }
  .brand { font-size: 1.2rem; }
  .stat.hero-stat .v { font-size: 2.4rem; }
  .totals { grid-template-columns: repeat(5, 1fr); }
  .totals .t { padding: .95rem 1rem; }
  .totals .t .v { font-size: 1.45rem; }
  .totals .t.wide { grid-column: auto; }
  .panel-body { grid-template-columns: 112px 1fr; }
  .ptabs button { writing-mode: horizontal-tb; min-height: 0; padding: 1.1rem 0; letter-spacing: .12em; }
  .pmain { padding: 1.3rem 1.4rem 1.2rem; }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .stat.hero-stat { grid-column: span 4; }
  .graph { height: 300px; }
  .rail-wrap { margin: 0 -1.4rem -1.2rem; }
  .rail { padding-inline: 1.4rem; scroll-padding-left: 1.4rem; }
  .card { flex-basis: calc((100% - 1.2rem) / 3); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .site-footer { padding-bottom: 2.5rem; }
  .sticky-cta { display: none; }
  .guide-layout { grid-template-columns: 220px 1fr; align-items: start; }
  .toc { position: sticky; top: 90px; margin: 0; padding: 0; background: transparent; backdrop-filter: none; border: 0; }
  .toc ol { flex-direction: column; overflow: visible; }
  .toc a { border: 0; padding: .35rem .6rem; border-left: 2px solid var(--line); border-radius: 0; white-space: normal; }
  .toc a.is-active { border-left-color: var(--gold); }
  .guide section { scroll-margin-top: 90px; }
  .links-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- reduced motion: instant fades only ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  .card:hover, .btn:hover, .links-grid a:hover { transform: none; }
}