:root{color-scheme:dark;
  /* ground */ --abyss:#0b1315; --deep:#0e191b; --deep2:#101c1e;
  /* a third, clearly-distinct ground for section-tone rhythm -- --deep was too close to --abyss
     (a couple RGB points) to read as an actual tone change once real content sat on it */ --shoal:#141f22;
  /* lines and ink */ --reef:#1a2729; --reef2:#2a3d3f; --white:#f2efe6; --text:#aab8b5; --muted:#708b88; /* accessibility audit 2026-08-25: #5f7a77 measured 4.06:1 on ground and 3.87:1 on surface, both below WCAG AA's 4.5:1 for normal-size text (this token is used at .7-.85rem sitewide -- well under the "large text" 3:1 threshold that would have excused it). Lightened to clear both backgrounds (~4.9-5.1:1) while staying visually quiet. */
  /* the one accent -- navigation and action only, never a direction */ --cyan:#d1a05c; --amber:#e0b46f;
  /* mint/coral: primary meaning is direction -- a chart line, a long/short tag, a delta -- and
     must never sit next to real price data meaning something else (2026-08-27: extended mint,
     not coral, as the site's secondary accent for a small set of genuinely positive, non-
     financial status indicators -- "available now," "connected" -- .tag.paid already did this
     before this was written down. Never use mint decoratively, and never use coral for anything
     but short/negative direction. */ --mint:#33c084; --coral:#ef5b5f;
  /* "flip" is a change in kind, not a magnitude -- it borrows the accent rather than inventing a fourth hue */ --violet:#d1a05c;
  --wide:84rem;--prose:42rem;--nav:4.8rem;--ease:cubic-bezier(.2,.75,.25,1);
  --font-display:"Source Serif 4",Georgia,serif; --font-body:"Public Sans","Inter",ui-sans-serif,system-ui,-apple-system,sans-serif; --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:6rem}
body{margin:0;background:var(--abyss);color:var(--text);font:16px/1.6 var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:#d1a05c33;color:var(--white)}
a{color:var(--cyan);transition:.2s var(--ease)}
a:hover{color:var(--white)}
a:focus-visible,button:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
/* Text fields get their OWN focus signal below (border-color, no outline) -- input used to match
   this rule too, so a focused field showed a tight cyan border AND a second, 4px-offset cyan
   outline ring around it at once: two concentric amber/gold rectangles, reported live as "a colour
   comes up" when clicking into a field. One signal per control, not two stacked on the same one. */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* ---------- navigation: quiet, and it always shows where you are ---------- */
.nav-shell{position:sticky;top:0;z-index:100;background:#0b1315b8;backdrop-filter:blur(18px) saturate(135%);border-bottom:1px solid #1a272988;transition:.25s}
.nav-shell.scrolled{background:#0b1315ed;border-color:var(--reef2);box-shadow:0 12px 35px #0005}
.site-nav{height:var(--nav);max-width:var(--wide);margin:auto;padding:0 1.5rem;display:flex;align-items:center;gap:2.1rem}
.brand{display:flex;align-items:center;gap:.65rem;margin-right:auto;color:var(--white);font:500 1.24rem var(--font-display);text-decoration:none}
.brand svg{width:26px;fill:none;stroke:var(--cyan);stroke-width:1.35}
.nav-links{display:flex;align-items:center;gap:1.8rem}
.nav-links>a{position:relative;color:#7d9490;text-decoration:none;font-size:.86rem;padding-bottom:.4rem}
.nav-links>a.active{color:var(--white)}
.nav-links>a.active:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--cyan)}
/* A same-page jump (e.g. Whales -> Markets#wallets), not a peer destination -- it never
   navigates or highlights like the other links, so it should never look like one either. */
.nav-links>a.nav-jump{opacity:.68}
.nav-links>a.nav-jump:hover{opacity:1}
.menu-toggle{display:none!important;background:transparent!important;border:0!important;box-shadow:none!important;padding:.5rem!important}
.menu-toggle i{display:block;width:22px;height:1px;background:var(--white);margin:5px}

/* ---------- authenticated app shell: a quiet sidebar, not an admin panel ---------- */
.app-topbar{display:none}
.app-shell-body{display:flex;align-items:flex-start}
.app-sidebar{width:15rem;flex:none;padding:2.2rem 1.3rem;background:var(--deep2);border-right:1px solid var(--reef);position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:2.4rem;overflow-y:auto}
.app-sidebar>.brand{font-size:1.1rem}
.app-nav-links{display:flex;flex-direction:column;gap:.15rem}
.app-nav-links>a{color:var(--muted);text-decoration:none;font-size:.87rem;padding:.6rem .7rem;border-left:2px solid transparent}
.app-nav-links>a:hover{color:var(--white)}
.app-nav-links>a.active{color:var(--white);background:#d1a05c0d;border-left-color:var(--cyan)}
/* Same-page jump under Markets, not a peer destination -- see .nav-links>a.nav-jump above. */
.app-nav-links>a.nav-jump{opacity:.68}
.app-nav-links>a.nav-jump:hover{opacity:1;color:var(--muted)}
.app-nav-account{margin-top:auto;padding-top:1.3rem;border-top:1px solid var(--reef);display:flex;flex-direction:column;gap:.15rem}
.app-nav-label{font:10px var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:0 .7rem .4rem}
.app-account-email{color:var(--white);font-size:.82rem;padding:0 .7rem .5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-nav-account>a{color:var(--muted);text-decoration:none;font-size:.82rem;padding:.45rem .7rem}
.app-nav-account>a:hover,.app-nav-account>a.active{color:var(--white)}
.app-shell-body>.wrap{flex:1;min-width:0}
.app-sidebar-backdrop{display:none}
@media(max-width:850px){
  .app-topbar{display:flex;align-items:center;height:4.25rem;padding:0 1rem;position:sticky;top:0;z-index:100;background:#0b1315b8;backdrop-filter:blur(18px) saturate(135%);border-bottom:1px solid #1a272988;transition:.25s}
  .app-topbar.scrolled{background:#0b1315ed;border-color:var(--reef2)}
  .app-shell-body{display:block}
  .app-sidebar{position:fixed;inset:0 auto 0 0;width:82vw;max-width:19rem;transform:translateX(-100%);visibility:hidden;transition:transform .25s var(--ease),visibility 0s linear .25s;z-index:200;box-shadow:0 25px 60px #0006}
  .app-sidebar.open{transform:translateX(0);visibility:visible;transition:transform .25s var(--ease)}
  .app-sidebar-backdrop{display:block;position:fixed;inset:0;background:#00040580;opacity:0;pointer-events:none;transition:opacity .2s;z-index:150}
  .app-sidebar-backdrop.open{opacity:1;pointer-events:auto}
}

/* ---------- auth pages: a real arrival moment, not a bare form in a void ----------
   The wordmark's own wave path, redrawn at page scale and set far back in the ground tone --
   quiet enough to never compete with the card, present enough that the page still feels like
   Isobath rather than an unbranded form. */
/* This page's content, not the marketing shell's, decides its own vertical rhythm -- the site's
   default 3.5rem/6rem top/bottom padding exists for long scrolling pages and only pushed a short
   form further than any real window needs. */
.wrap:has(.auth-page){padding-top:1.5rem;padding-bottom:1.5rem}
.auth-page{position:relative;min-height:calc(100vh - 3rem);display:flex;align-items:center;justify-content:center}
.auth-waves{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.auth-waves svg{width:100%;height:100%}
.auth-waves path{fill:none;stroke:var(--reef2);stroke-width:1.4;opacity:.4}
.auth-waves path:nth-child(2){opacity:.28}
.auth-waves path:nth-child(3){opacity:.18}
.auth-waves path:nth-child(4){opacity:.1}
.auth-card{position:relative;width:100%;max-width:23rem;display:flex;flex-direction:column;gap:.3rem;background:var(--deep2);border:1px solid var(--reef);border-radius:.5rem;padding:2rem 2.2rem;box-shadow:0 30px 70px -20px #000a;max-height:calc(100vh - 3rem);overflow-y:auto}
.signup-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.auth-brand{font-size:1.1rem;margin-bottom:1rem}
.auth-return{display:inline-block;margin:-.35rem 0 .8rem;color:var(--muted);font-size:.8rem;text-decoration:none}
.auth-return:hover{color:var(--brass)}
.auth-card h1{font-size:clamp(1.6rem,4vw,1.9rem);margin:0 0 .3rem}
.auth-context{color:var(--muted);font-size:.9rem;margin:0 0 1.1rem;max-width:26rem}
.auth-card form button{margin-top:1rem}
.auth-card input{background:var(--abyss)}
.auth-switch{margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--reef);font-size:.85rem;color:var(--muted);text-align:center}
/* Recovery is a fallback, not a peer of "create an account" -- no rule of its own, sits tighter. */
.auth-switch.auth-secondary{margin-top:.55rem;padding-top:0;border-top:0;font-size:.8rem}
.btn-google{display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;box-sizing:border-box;padding:.7rem 1rem;border:1px solid var(--reef);border-radius:.4rem;background:var(--white);color:#3c4043;font-size:.9rem;font-weight:500;text-decoration:none;transition:.2s var(--ease)}
.btn-google:hover{background:#fff;border-color:#fff;box-shadow:0 8px 20px #0006}
.btn-google svg{width:1.05rem;height:1.05rem;flex:none}
.auth-divider{display:flex;align-items:center;gap:.8rem;margin:.85rem 0;color:var(--muted);font-size:.78rem}
.auth-divider:before,.auth-divider:after{content:"";flex:1;height:1px;background:var(--reef)}
@media(max-width:560px){.auth-card{padding:1.6rem 1.4rem}}

/* ---------- crypto checkout: the number and the address are the whole page, nothing else earns space ---------- */
.checkout-amount{display:flex;align-items:baseline;gap:.5rem;font-size:clamp(2.4rem,6vw,3.2rem);margin:.6rem 0 .2rem;font-variant-numeric:tabular-nums}
.checkout-amount span{font-size:1.1rem;color:var(--muted);font-family:var(--font-body);font-weight:500;letter-spacing:.02em}
.checkout-sub{color:var(--muted);margin:0 0 1.8rem}
.checkout-card{display:flex;gap:1.5rem;align-items:center;background:var(--deep);border:1px solid var(--reef);border-radius:3px;padding:1.4rem}
.checkout-qr{border-radius:2px;flex:none}
.checkout-address{min-width:0;flex:1}
.checkout-label{display:block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:.4rem}
.checkout-address-value{overflow-wrap:anywhere;margin:0 0 .7rem;color:var(--white);font-size:.95rem}
.checkout-expiry{color:var(--muted);font-size:.85rem;margin:1rem 0 1.8rem}
.checkout-form{border-top:1px solid var(--reef);padding-top:1.4rem}
@media(max-width:560px){.checkout-card{flex-direction:column;align-items:flex-start}.checkout-qr{align-self:center}}
.checkout-expiry{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.btn-sm.copied{border-color:var(--mint)!important;color:var(--mint)!important}

/* ---------- Get Pro plan card: the price leads, benefits are confirmed facts (mint check), not marketing bullets ---------- */
.plan-card{background:var(--deep);border:1px solid var(--reef);border-radius:3px;padding:1.8rem 1.9rem;margin:1rem 0}
.plan-price{font-size:clamp(2.2rem,5vw,2.8rem);font-variant-numeric:tabular-nums;margin-bottom:1.1rem}
.plan-price span{font-size:1rem;color:var(--muted);font-family:var(--font-body);font-weight:500;margin-left:.3rem}
.plan-benefits{list-style:none;margin:0 0 1.4rem;padding:0;display:flex;flex-direction:column;gap:.55rem}
.plan-benefits li{padding-left:1.5rem;position:relative;color:var(--text)}
.plan-benefits li:before{content:"✓";position:absolute;left:0;color:var(--mint);font-weight:700}
.token-choice{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1.1rem}
.token-pill{position:relative}
.token-pill input{position:absolute;opacity:0;width:1px;height:1px}
.token-pill span{display:inline-flex;padding:.4rem .9rem;font:600 .78rem var(--font-mono);letter-spacing:.03em;color:var(--muted);border:1px solid var(--reef);border-radius:20px;cursor:pointer;transition:.15s var(--ease)}
.token-pill:has(input:checked) span{color:var(--abyss);background:var(--white);border-color:var(--white)}
.token-pill:has(input:focus-visible) span{outline:2px solid var(--cyan);outline-offset:2px}
/* Plan-choice radios (/billing) -- previously bare native radios, unstyled, sitting directly
   above the fully-designed .token-pill group below. Same :has(input:checked) technique, adapted
   to a row layout since these carry a price and an optional "2 months free" tag rather than a
   short token symbol. */
.plan-choice{border:1px solid var(--reef);border-radius:3px;padding:.3rem 1.2rem;margin:1.1rem 0}
.plan-choice legend{padding:0 .4rem;font:600 .68rem var(--font-mono);text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.plan-radio{display:flex;align-items:center;gap:.75rem;padding:.7rem 0;cursor:pointer;border-bottom:1px solid var(--reef)}
.plan-radio:last-child{border-bottom:0}
.plan-radio input{position:absolute;opacity:0;width:1px;height:1px}
.plan-radio-mark{width:1rem;height:1rem;flex:none;border:1px solid var(--reef2);border-radius:50%;position:relative;transition:.15s var(--ease)}
.plan-radio:has(input:checked) .plan-radio-mark{border-color:var(--cyan)}
.plan-radio:has(input:checked) .plan-radio-mark:after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--cyan)}
.plan-radio:has(input:focus-visible) .plan-radio-mark{outline:2px solid var(--cyan);outline-offset:2px}
.plan-radio-body{color:var(--text);font-size:.92rem;font-family:var(--font-mono)}
.plan-radio:has(input:checked) .plan-radio-body{color:var(--white)}
.plan-trust{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;color:var(--muted);font-size:.85rem}

/* ---------- type and rhythm ---------- */
.wrap{max-width:var(--prose);margin:auto;padding:3.5rem 1.5rem 6rem}
.wrap.wide{max-width:var(--wide)}
h1,h2,h3{color:var(--white);line-height:1.08;text-wrap:balance;font-family:var(--font-display);font-weight:400}
h1{font-size:clamp(2.6rem,5.5vw,4.6rem);letter-spacing:-.03em;margin:.4rem 0 1.1rem}
h2{font-size:clamp(1.5rem,3vw,2.15rem);letter-spacing:-.015em;margin-top:3rem}
p{color:var(--text);max-width:38rem}
.eyebrow,.muted,label{color:var(--muted);font:600 .72rem var(--font-mono);text-transform:uppercase;letter-spacing:.13em}
.lede{font-size:clamp(1.03rem,1.9vw,1.24rem);line-height:1.65;max-width:44rem;color:#9dafac}
.lede strong,.lede em{color:var(--white);font-style:normal;font-weight:600}
.mono{font:.85rem var(--font-mono);font-variant-numeric:tabular-nums}
code{background:var(--deep2);padding:.15rem .4rem;border-radius:2px;font:.88em var(--font-mono);color:var(--text)}
.actions{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center;margin-top:1.7rem}
.market-tabs{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-top:1.1rem}
.market-tabs .btn{margin:0}
.home-eyebrow-markets{white-space:nowrap}
.home-eyebrow-markets .asset-btc{color:#f7931a}
.home-eyebrow-markets .asset-eth{color:#9aa4ff}
.home-eyebrow-markets .asset-sol{color:#55d6b0}
.observed-status{display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap}
.observed-dot{width:6px;height:6px;border-radius:50%;background:var(--mint);display:inline-block;opacity:.55}
.observed-dot.is-fresh{opacity:1;animation:live-pulse 2.2s ease-in-out infinite}
/* Static by design -- .window-control is position:sticky for /changes's ranked list; reusing it
   on the dashboard made this row float and overlap a watch-card's long/short tag beneath it.
   Dashboard hierarchy pass: restyled as a compact segmented control (.btn-pill) rather than the
   market page's full-size window-tab buttons, so it reads as a dashboard control, not a page nav. */
/* The row used to float with a bare gap above whatever came next (a stat card's own top border,
   in the dashboard's case) -- founder: "buttons should rest on the line". The divider now belongs
   to the row itself, so pills always sit flush against it regardless of what follows. */
.watch-filter{display:flex;gap:.4rem;flex-wrap:wrap;margin:1.2rem 0 0;padding-bottom:1.1rem;border-bottom:1px solid var(--reef)}
.btn-pill{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .85rem;font:600 .74rem var(--font-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);border:1px solid var(--reef);border-radius:20px;text-decoration:none;transition:.15s var(--ease)}
.coin-icon{width:15px;height:15px;flex:none;opacity:.9}
.btn-pill:hover{color:var(--white);border-color:var(--reef2)}
.btn-pill.active{color:var(--abyss);background:var(--white);border-color:var(--white)}
.btn-pill.active .coin-icon{opacity:1}
button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;padding:.76rem 1.05rem;background:var(--white);color:var(--abyss);border:1px solid var(--white);border-radius:2px;font:600 .87rem var(--font-body);cursor:pointer;text-decoration:none;margin:.3rem 0;transition:.2s var(--ease)}
/* .btn's white background never changes on hover, but the global a:hover rule above (meant for
   plain inline text links) was still firing on it and flipping its text to white too -- invisible
   white-on-white "BTC" label on the homepage market tabs (found live 2026-08-26). Reasserted here,
   not on .btn.ghost, which has no background and is correctly unaffected. */
button:hover,.btn:hover{transform:translateY(-2px);box-shadow:0 10px 25px #0005;color:var(--abyss)}
button.ghost,.btn.ghost{background:transparent;color:var(--white);border-color:var(--reef2)}
button.ghost:hover,.btn.ghost:hover{border-color:var(--cyan);background:#d1a05c0d}

/* ---------- cards: flat, no gloss -- decoration undercuts a page whose job is "trust this number" ---------- */
.card,.metric{position:relative;background:var(--deep);border:1px solid var(--reef);border-radius:3px;transition:.22s var(--ease)}
.card{padding:1.5rem 1.6rem;margin:1rem 0}
.card:hover{border-color:var(--reef2)}
.metrics,.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.75rem;margin:1.25rem 0}
/* Content measure inside a wide page shell: these read as documents/panels, not a 3-column
   dashboard -- capped so a handful of cards don't stretch full-bleed across an 84rem container. */
.feature-grid{max-width:60rem}
.metric{padding:1.05rem;overflow:hidden}
.metric:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--metric,var(--reef2));transform:scaleX(.25);transform-origin:left;transition:.35s}
.metric:hover:after{transform:scaleX(1)}
.metric strong{display:block;color:var(--metric,var(--white));font-size:1.3rem;margin-top:.25rem;font-variant-numeric:tabular-nums;font-family:var(--font-mono);font-weight:500}
.metric.increase{--metric:var(--mint)}.metric.reduce{--metric:var(--coral)}.metric.flip{--metric:var(--violet)}
/* Was a bare top-line separator with no surface of its own -- the flattest thing on several pages
   sharing this component. Real card treatment now, matching .card/.plan-card elsewhere. */
.feature{padding:1.5rem 1.6rem;border:1px solid var(--reef);border-radius:3px;background:var(--deep);transition:.2s var(--ease)}
.feature:hover{border-color:var(--reef2)}
.feature strong{display:block;color:var(--white);font-size:1.02rem;margin-bottom:.5rem}
.feature p{margin:0}
.row{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.tag{font:600 .66rem var(--font-mono);text-transform:uppercase;letter-spacing:.1em;padding:.16rem .5rem;border:1px solid;border-radius:2px}
.tag.asset-tag{display:inline-flex;align-items:center;gap:.3rem}
.tag.free{color:var(--muted)}.tag.paid,.tag.long{color:var(--mint)}.tag.short{color:var(--coral)}
.tag.watching{color:var(--cyan)}
.watch-state{display:flex;flex-direction:column;align-items:flex-end;gap:.55rem}
.watch-state form{width:100%}.watch-state button{width:100%}
@media(max-width:850px){.watch-state{align-items:flex-start}}
label{display:block;margin:1rem 0 .35rem}
input{width:100%;padding:.8rem .9rem;background:var(--deep2);border:1px solid var(--reef);border-radius:2px;color:var(--white);font-size:1rem;font-family:var(--font-body)}
input:hover,select:hover{border-color:var(--reef2)}
input:focus-visible,select:focus-visible,textarea:focus-visible{border-color:var(--cyan);outline:none}
/* select had no styling at all -- it fell through to the bare OS control, the one plainly
   unstyled element on an otherwise deliberately designed form. */
select{width:100%;padding:.8rem 2.6rem .8rem .9rem;background:var(--deep2) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="%23708b88" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6l4 4 4-4"/></svg>') no-repeat right .9rem center;background-size:12px;border:1px solid var(--reef);border-radius:2px;color:var(--white);font-size:1rem;font-family:var(--font-body);appearance:none;-webkit-appearance:none;cursor:pointer;transition:.15s var(--ease)}
select option{background:var(--deep2);color:var(--white)}
/* Custom-styled select popup (public/uiselect.js). The native select stays the real form control
   underneath -- see that file's comment for why the OS popup itself can't be restyled with CSS
   alone. `.uiselect select` matches the plain `select` rule above so the closed trigger box looks
   identical to a native one; only the OPEN state differs. */
.uiselect{position:relative}
.uiselect select{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}
.uiselect-trigger{display:flex;align-items:center;justify-content:space-between;gap:.6rem;width:100%;padding:.8rem .9rem;background:var(--deep2) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="%23708b88" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6l4 4 4-4"/></svg>') no-repeat right .9rem center;background-size:12px;border:1px solid var(--reef);border-radius:2px;color:var(--white);font-size:1rem;font-family:var(--font-body);text-align:left;cursor:pointer;transition:.15s var(--ease)}
.uiselect-trigger:hover{border-color:var(--reef2)}
.uiselect-trigger:focus-visible{outline:none;border-color:var(--cyan)}
.uiselect-listbox{position:absolute;z-index:20;top:calc(100% + .4rem);left:0;right:0;max-height:14rem;overflow-y:auto;margin:0;padding:.3rem;list-style:none;background:var(--deep2);border:1px solid var(--reef2);border-radius:3px;box-shadow:0 20px 45px -10px #000a}
.uiselect-option{padding:.55rem .8rem;padding-left:2rem;position:relative;border-radius:2px;color:var(--text);font-size:.92rem;font-family:var(--font-body);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uiselect-option:hover,.uiselect-option.is-active{background:#ffffff0a;color:var(--white)}
/* The checkmark reuses --mint, the same colour the rest of the site already uses for a confirmed
   selection (.tier-list li:before) -- one visual language for "this is selected/enabled", not a
   second one invented for dropdowns. */
.uiselect-option[aria-selected="true"]{color:var(--white)}
.uiselect-option[aria-selected="true"]:before{content:"✓";position:absolute;left:.8rem;color:var(--mint);font-weight:700}
textarea{display:block;width:100%;box-sizing:border-box;padding:.6rem .7rem;background:var(--deep2);border:1px solid var(--reef);border-radius:2px;color:var(--white);font:.85rem/1.4 var(--font-mono);resize:vertical}
.error{background:#ef5b5f17;border:1px solid var(--coral);color:var(--coral);padding:.8rem 1rem;margin:1rem 0}
a.remove{color:var(--coral);font-size:.8rem;text-decoration:none}
form{margin:0}
.section-rule{border-top:1px solid var(--reef);padding-top:2rem;margin-top:3rem}
/* A page hero gets the same soft radial glow the homepage hero already had -- these pages had
   none at all, which is part of why they read flatter than the homepage. */
.page-hero{position:relative;overflow:hidden}
.page-hero:before{content:"";position:absolute;width:34rem;height:34rem;right:-8%;top:-14%;border-radius:50%;background:#d1a05c12;filter:blur(90px);pointer-events:none}
.watch-event-reason{display:block;margin-top:.45rem;color:var(--muted);font-size:.78rem;line-height:1.45}
.watch-delivery{margin:1.5rem 0 2rem;padding:1.1rem 1.4rem;border:1px solid var(--reef);border-radius:3px;background:var(--deep)}
.telegram-status{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:.6rem}
.telegram-status p{margin:0;flex:1 1 20rem}
.telegram-status.linked{color:var(--text)}
.watch-truncation{margin:1rem 0 0;color:var(--muted);font-size:.82rem}
.stale-notice{display:inline-block;margin:1rem 0 0;padding:.5rem .85rem;border:1px solid #e0b46f4d;border-left:2px solid var(--amber);border-radius:2px;background:#e0b46f0f;color:var(--text);font-size:.82rem}
.notice{padding:1rem 1.3rem;border:1px solid #d1a05c3d;background:#d1a05c0c;border-radius:3px;font-size:.88rem;color:var(--text);margin:1.5rem 0 2rem}
/* Confirmation, not a caution -- .notice's amber tone is reserved for limits/warnings, so a success message needs its own colour or it reads as a problem. */
.notice-positive{border-color:#33c0843d;background:#33c0840c}
.notice strong{color:var(--white)}

/* ---------- a quiet metric strip: one fact in several parts, not several separate widgets ---------- */
.metric-strip{display:flex;flex-wrap:wrap;gap:0;margin:0 0 2.4rem;border-top:1px solid var(--reef);border-bottom:1px solid var(--reef)}
.metric-strip>div{flex:1;min-width:9rem;padding:1.1rem 1.4rem 1.1rem 0;border-left:1px solid var(--reef)}
.metric-strip>div:first-child{border-left:0;padding-left:0}
.metric-strip span{display:block;font:600 .66rem var(--font-mono);text-transform:uppercase;letter-spacing:.09em;margin-bottom:.5rem;color:var(--muted)}
.metric-strip strong{font-size:1.26rem;font-variant-numeric:tabular-nums;color:var(--white);font-family:var(--font-mono);font-weight:500}

/* Same fact-strip language as .metric-strip above, but for a set that needs to wrap onto more than
   one row (the wallet page's behaviour/capacity panels run 4-6 items) -- a real grid with lines on
   every edge, not .metric-strip's single-row flex. Found live: this class was already used in the
   markup with no matching rule at all, so every one of these panels was silently falling back to a
   plain stacked block list instead of the scannable grid it was written for. */
.metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));margin:0;border-top:1px solid var(--reef);border-left:1px solid var(--reef)}
.metric-grid>div{padding:1.1rem 1.4rem;border-right:1px solid var(--reef);border-bottom:1px solid var(--reef)}
.metric-grid span{display:block;font:600 .66rem var(--font-mono);text-transform:uppercase;letter-spacing:.09em;margin-bottom:.5rem;color:var(--muted)}
.metric-grid strong{font-size:1.26rem;font-variant-numeric:tabular-nums;color:var(--white);font-family:var(--font-mono);font-weight:500}
/* The one shared rule for a signed number anywhere on the site (founder direction, 2026-08-28):
   positive is mint, negative is coral. A plain, reusable pair -- drop onto any element that
   renders a signed delta, rather than each component re-deciding its own color logic. */
/* !important is deliberate here, not a specificity workaround for one spot -- these two classes
   exist specifically to always win over whatever a component's own base color rule is (most of
   which predate this convention and say color:var(--white) directly), everywhere they're used,
   forever. That's the entire point of a shared utility pair. */
.tone-increase{color:var(--mint)!important}
.tone-reduce{color:var(--coral)!important}

/* ---------- home ---------- */
.home-hero{position:relative;min-height:calc(100vh - var(--nav));display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:4rem;border-bottom:1px solid var(--reef);overflow:hidden}
.home-hero:after{content:"";position:absolute;width:28rem;height:28rem;right:4%;top:20%;border-radius:50%;background:#d1a05c10;filter:blur(80px)}
.home-hero h1{max-width:53rem;font-size:clamp(3.4rem,7vw,6.6rem);line-height:.92;margin:.8rem 0 1.7rem}
.hero-lede{max-width:45rem;font-size:clamp(1.08rem,1.65vw,1.36rem);line-height:1.65}
.hero-lede em{color:var(--white);font-style:normal}
.text-link{color:var(--white);text-underline-offset:.32rem;text-decoration-color:var(--reef2)}
.quiet-proof{font-size:.78rem;color:var(--muted);margin-top:1.5rem}
.depth-field{position:relative;height:34rem;border-left:1px solid var(--reef);opacity:.85;z-index:1}
.depth-field svg{position:absolute;inset:1rem -2rem 0 1rem;width:110%;height:95%;animation:drift 18s ease-in-out infinite alternate}
.depth-field path{fill:none;stroke:var(--cyan);stroke-width:1.05;opacity:.45;stroke-dasharray:900;animation:draw 2.2s var(--ease) both}
.depth-field path:nth-child(n+2){animation-delay:.12s}
.depth-field>span{position:absolute;right:.4rem;color:var(--muted);font:10px var(--font-mono);letter-spacing:.1em}
.depth-field>span:nth-child(1){top:15%}.depth-field>span:nth-child(2){top:48%}.depth-field>span:nth-child(3){top:78%}
@keyframes draw{from{stroke-dashoffset:900;opacity:0}to{stroke-dashoffset:0;opacity:.45}}
@keyframes drift{to{transform:translate(-10px,8px) scale(1.02)}}
.live-proof,.product-story{padding:7.5rem 0;border-bottom:1px solid var(--reef)}
.section-intro{display:grid;grid-template-columns:.68fr 1.32fr;gap:2.5rem;margin-bottom:2.8rem}
.section-intro .eyebrow{padding-top:.7rem}
.section-intro h2{margin:0;font-size:clamp(2.1rem,3.6vw,3.6rem);line-height:1.08}
.section-intro p{grid-column:2;max-width:39rem;margin:-1.5rem 0 0}
.signal-card{display:block;position:relative;background:var(--deep);border:1px solid var(--reef);color:var(--text);text-decoration:none;transition:.25s;overflow:hidden}
.signal-card:hover{color:var(--text);border-color:var(--reef2);transform:translateY(-3px);box-shadow:0 24px 55px #0004}
.signal-top,.signal-meta{display:flex;justify-content:space-between;gap:1rem;padding:1rem 1.3rem;color:var(--muted);font:10px var(--font-mono);text-transform:uppercase;letter-spacing:.1em}
.signal-top{border-bottom:1px solid var(--reef)}
/* §4b, 2026-08-25: was a continuous pulse (animation:pulse 2.4s infinite) regardless of how old
   the observation actually was -- at a real ~6h scan cadence that implied streaming market
   movement the product does not have. A static marker plus the honest "observed X ago" text next
   to it does the job without the false impression. */
/* A pulse is honest here specifically because freshness is a real, currently-true fact (this
   observation really is being checked on a live cadence) -- not the same thing as animating a
   stale number to fake tick-by-tick market movement, which product/DECISIONS.md rules out. */
.live-dot:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--mint);margin-right:.7rem;animation:live-pulse 2.2s ease-in-out infinite}
@keyframes live-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.signal-body{display:grid;grid-template-columns:1.45fr .55fr;gap:2rem;padding:2.2rem 1.3rem}
.signal-body>div:first-child{display:grid;grid-template-columns:1fr 1.2fr 1fr;align-items:end;gap:1rem}
.signal-body strong{font:400 clamp(2.6rem,5.5vw,5rem)/.9 var(--font-display);color:var(--white);font-variant-numeric:tabular-nums}
.signal-kicker,.signal-body span{color:var(--muted)}
.signal-wallet{border-left:1px solid var(--reef);padding-left:2rem;display:flex;flex-direction:column;justify-content:center;gap:.45rem}
.signal-wallet b{color:var(--white);font:1rem var(--font-mono)}
.signal-meta{border-top:1px solid var(--reef);justify-content:flex-start;gap:2rem}
.signal-empty{padding:2rem;display:flex;justify-content:space-between}
.steps{list-style:none;margin:0;padding:0;max-width:60rem;border-top:1px solid var(--reef)}
.steps li{display:grid;grid-template-columns:.68fr 1.32fr;gap:2.5rem;padding:2.35rem 0;border-bottom:1px solid var(--reef)}
.steps li>span{font:11px var(--font-mono);color:var(--cyan)}
.steps h3{margin:0 0 .4rem;font-size:1.3rem}
.steps p{max-width:40rem;margin:0}
.positioning-panel{display:grid;grid-template-columns:1fr 1fr;gap:7rem;padding:8rem 0}
.positioning-panel h2{font-size:clamp(2.1rem,3.6vw,3.6rem);margin:1rem 0}
.positioning-panel>div:last-child{padding-top:2rem;font-size:1.08rem}
.final-cta{display:flex;align-items:center;justify-content:space-between;gap:2rem;background:linear-gradient(120deg,var(--deep),#101c1eb8);border:1px solid var(--reef);padding:2.7rem;margin-bottom:3rem}
.final-cta h2{font-size:2rem;margin:.5rem 0 0}

/* ---------- product-led home: useful before signup ---------- */
/* Was flat -- the homepage's own hero had no glow at all (.home-hero:after was dead CSS, written
   for a class this markup stopped using). */
.morning-hero{position:relative;overflow:hidden;min-height:calc(100vh - var(--nav));display:grid;grid-template-columns:.9fr 1.1fr;gap:5rem;align-items:center;padding:4rem 0;border-bottom:1px solid var(--reef)}
.morning-hero:before{content:"";position:absolute;width:30rem;height:30rem;right:6%;top:12%;border-radius:50%;background:#d1a05c12;filter:blur(90px);pointer-events:none}
/* Was clamp(3.5rem,6.8vw,6.5rem) -- tuned for a short 5-6 word headline. Positioning copy grew to
   a full sentence ("See who changed risk on Hyperliquid -- and what they did before."), and at the
   old size that wrapped to 5-6 lines of 104px type: a wall of text tall enough that its own upper
   lines scrolled under the sticky nav's semi-transparent blur, reading as visual overlap/glitching
   in review. Brought in line with the rest of the site's own h1 scale (clamp(2.6rem,5.5vw,4.6rem)),
   with the homepage keeping a modest step up since it's still the one hero on the site. */
.morning-copy h1{font-size:clamp(2.6rem,4.8vw,4.6rem);line-height:1.05;margin:.8rem 0 1.4rem;max-width:40rem}.morning-copy .hero-lede{font-size:clamp(1.04rem,1.5vw,1.25rem)}
.morning-brief{border:1px solid var(--reef);background:var(--deep)}.morning-brief-head{display:flex;justify-content:space-between;padding:.9rem 1.1rem;border-bottom:1px solid var(--reef);color:var(--muted);font:600 .66rem var(--font-mono);text-transform:uppercase;letter-spacing:.1em}
.morning-metrics{display:grid;grid-template-columns:1fr 1fr}.morning-metrics>div{position:relative;padding:1.25rem;border-right:1px solid var(--reef);border-bottom:1px solid var(--reef);overflow:hidden}.morning-metrics>div:nth-child(2n){border-right:0}.morning-metrics span,.morning-metrics small{display:block;color:var(--muted);font:600 .64rem var(--font-mono);text-transform:uppercase;letter-spacing:.08em}.morning-metrics strong{display:block;color:var(--metric,var(--white));font:500 1.45rem var(--font-mono);margin:.35rem 0}.morning-metrics small{text-transform:none;letter-spacing:0;font-size:.66rem}
/* Founder direction (2026-08-28), superseding the prior "underline only" choice: a signed number's
   own text is now colored by direction site-wide, not just a bottom accent bar. The underline
   stays as a secondary reinforcement, not the only signal. */
.morning-metrics>div:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--metric,transparent);transform:scaleX(.3);transform-origin:left;transition:.35s}
.morning-metrics>div:hover:after{transform:scaleX(1)}
.morning-metrics>div.increase{--metric:var(--mint)}.morning-metrics>div.reduce{--metric:var(--coral)}
.morning-lead{position:relative;display:block;padding:1.25rem 1.25rem 1.25rem 1.6rem;color:var(--text);text-decoration:none;overflow:hidden}.morning-lead:before{content:"";position:absolute;left:0;top:1rem;bottom:1rem;width:2px;background:var(--cyan)}.morning-lead.up:before{background:var(--mint)}.morning-lead.down:before{background:var(--coral)}.morning-lead:hover{color:var(--text);background:#ffffff03}.morning-lead>span,.morning-lead small{display:block;color:var(--muted);font:600 .66rem var(--font-mono);text-transform:uppercase;letter-spacing:.08em}.morning-lead strong{display:block;color:var(--white);font:400 1.45rem var(--font-display);margin:.35rem 0}
.morning-lead.up strong{color:var(--mint)}.morning-lead.down strong{color:var(--coral)}.morning-lead small{color:var(--cyan);text-transform:none;letter-spacing:0}
.home-section{padding:7rem 0;border-bottom:1px solid var(--reef)}.home-section-head{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:end;margin-bottom:2.5rem}.home-section-head h2{font-size:clamp(2.2rem,3.8vw,3.8rem);margin:.55rem 0 0;max-width:43rem}.home-section-head p{margin:0;max-width:38rem}.section-action{margin-top:1.5rem}
.home-whales{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}.home-whale{position:relative;display:flex;flex-direction:column;min-height:17rem;padding:1.35rem;border:1px solid var(--reef);background:var(--deep);color:var(--text);text-decoration:none;overflow:hidden}.home-whale:before{content:"";position:absolute;left:0;top:1.2rem;bottom:1.2rem;width:2px;background:var(--cyan)}.home-whale.up:before{background:var(--mint)}.home-whale.down:before{background:var(--coral)}.home-whale:hover{color:var(--text);border-color:var(--reef2);transform:translateY(-2px)}.home-whale-top,.home-whale-foot{display:flex;justify-content:space-between;gap:1rem;color:var(--muted);font:600 .63rem var(--font-mono);text-transform:uppercase;letter-spacing:.07em}.home-whale h3{font-size:1.35rem;margin:1.7rem 0 .7rem}.home-whale-values{display:flex;flex-direction:column;gap:.25rem;font-family:var(--font-mono)}.home-whale-values strong{color:var(--white);font-size:1.55rem}
.home-whale.up .home-whale-values strong{color:var(--mint)}.home-whale.down .home-whale-values strong{color:var(--coral)}.home-whale-foot{margin-top:auto;padding-top:1.2rem;border-top:1px solid var(--reef);text-transform:none;letter-spacing:0}.home-whale-foot span:last-child{color:var(--cyan)}
/* Same directional-accent convention .tag.long/.tag.short already uses elsewhere -- a current
   long/short position gets a colored left edge instead of reading as a plain neutral box. */
.home-history-card{position:relative;border:1px solid var(--reef);background:var(--deep);border-left:2px solid var(--reef2)}
.home-history-card.long{border-left-color:var(--mint)}
.home-history-card.short{border-left-color:var(--coral)}.home-history-state{display:flex;justify-content:space-between;gap:2rem;align-items:end;padding:1.5rem}.home-history-state h3{font-size:2rem;margin:.45rem 0}.home-history-state p{margin:0}.home-history-events{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--reef)}.home-history-events>div{padding:1.15rem;border-right:1px solid var(--reef);min-width:0}.home-history-events>div:last-child{border:0}.home-history-events span,.home-history-events small{display:block;color:var(--muted);font-size:.72rem}.home-history-events strong{display:block;color:var(--white);font:500 1.12rem var(--font-mono);margin:.4rem 0}.home-history-events small{font:9px var(--font-mono);overflow-wrap:anywhere}.home-history-note{padding:.9rem 1.5rem;border-top:1px solid var(--reef);color:var(--muted);font-size:.75rem}.home-history-empty{display:flex;justify-content:space-between;gap:1rem;padding:1.5rem;border:1px solid var(--reef);background:var(--deep)}.home-history-empty strong{color:var(--white)}
.watch-promise{display:grid;grid-template-columns:1.3fr .7fr;gap:6rem;align-items:center}.watch-promise h2,.professional-section h2{font-size:clamp(2.2rem,3.8vw,3.8rem);margin:.55rem 0}.watch-types{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem}.watch-types span{padding:.45rem .65rem;border:1px solid var(--reef);font:600 .65rem var(--font-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}.watch-promise-action{display:flex;flex-direction:column;align-items:flex-start;gap:.8rem}.watch-promise-action small{color:var(--muted)}
.professional-section{display:grid;grid-template-columns:1fr 1fr;gap:6rem}.professional-section p{max-width:40rem}.professional-paths{border-top:1px solid var(--reef)}.professional-paths>div{display:grid;grid-template-columns:.45fr 1fr;gap:1rem;padding:1.1rem 0;border-bottom:1px solid var(--reef)}.professional-paths span{color:var(--cyan);font:600 .68rem var(--font-mono);text-transform:uppercase;letter-spacing:.08em}.professional-paths strong{color:var(--text);font-weight:500}
.trust-facts{display:grid;grid-template-columns:repeat(4,1fr);margin-bottom:1.5rem;border:1px solid var(--reef)}.trust-facts>div{padding:1.3rem;border-right:1px solid var(--reef);background:var(--deep)}.trust-facts>div:last-child{border:0}.trust-facts strong{display:block;color:var(--white);font:500 1.45rem var(--font-mono);text-transform:capitalize}.trust-facts span{display:block;color:var(--muted);font:600 .64rem var(--font-mono);text-transform:uppercase;letter-spacing:.08em;margin-top:.3rem}

/* ---------- event cards -- the accent line floats, a considered mark rather than a tab on the edge ---------- */
.event-card{overflow:hidden}
.event-card:before,.focused-event:before{content:"";position:absolute;left:0;top:1.4rem;bottom:1.4rem;width:2px;border-radius:2px;background:var(--event,var(--cyan))}
.event-card.increase,.focused-event.increase{--event:var(--mint)}
.event-card.reduce,.event-card.close,.focused-event.reduce,.focused-event.close{--event:var(--coral)}
.event-card.flip,.focused-event.flip{--event:var(--violet)}
.event-card.open,.focused-event.open{--event:var(--cyan)}
.event-action{color:var(--white);text-transform:capitalize}
.event-card:hover{transform:translateY(-2px)}
.event-context{color:var(--cyan);font:600 .7rem var(--font-mono);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.7rem}
.event-primary{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:end}
.event-primary h3{font-size:clamp(1.35rem,3vw,2rem);color:var(--white);margin:.55rem 0;font-variant-numeric:tabular-nums;font-family:var(--font-display);font-weight:400}
.event-label{justify-content:flex-start}
.event-delta{text-align:right}
.event-delta strong{display:block;color:var(--event,var(--cyan));font-size:clamp(1.35rem,3vw,2rem);font-variant-numeric:tabular-nums;font-family:var(--font-mono);font-weight:500}
.event-delta span{display:block;color:var(--muted);font:12px var(--font-mono)}
.event-importance{color:var(--white);margin:.7rem 0}
.event-wallet{color:var(--muted);font-size:.75rem;margin-bottom:.7rem}
footer{max-width:var(--wide);margin:auto;border-top:1px solid var(--reef);padding:3rem 1.5rem 2.5rem;color:var(--muted);font-size:.79rem}
.footer-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:2rem}
.footer-col h5{font:600 .68rem var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 1rem}
.footer-col a{display:block;color:var(--text);font-size:.86rem;margin-bottom:.6rem;text-decoration:none}
.footer-col a:hover{color:var(--white)}
.footer-bottom{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--reef);display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.footer-bottom .brand{font-size:.98rem;margin-right:auto}
@media(max-width:850px){.footer-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){footer{padding-left:1rem;padding-right:1rem}.footer-grid{grid-template-columns:repeat(2,1fr)}.footer-bottom{flex-direction:column;align-items:flex-start}.footer-bottom .brand{margin-right:0}}
.reveal{opacity:0;transform:translateY(16px);transition:.65s var(--ease)}
.reveal.visible{opacity:1;transform:none}

/* Nav collapses to the hamburger at 1150px, wider than the rest of the page's 850px breakpoint.
   The marketing nav now carries 8 links (Markets/Whales/Heatmap/Rotation/Liquidation
   Watch/Watchlist/Pricing/Research) plus brand and Log in -- measured natural width 962px for the
   link row alone, ~1113px total with brand and site-nav padding. Left at 850px, any window between
   ~851 and ~1113px showed neither the horizontal bar (too narrow to fit) nor the hamburger (not
   yet triggered): an overflowing, unusable nav with nothing to fall back to. This was already true
   at 7 links before Rotation was added; Rotation only widened the broken range, it didn't create
   it. Kept as its own query, separate from the 850px one below, because the hero/content layout
   below does not need to shift that early -- only the nav does. */
@media(max-width:1150px){
  :root{--nav:4.25rem}.site-nav{height:var(--nav)}.menu-toggle{display:block!important}
  .nav-links{position:absolute;left:1rem;right:1rem;top:calc(var(--nav) - .25rem);display:none;flex-direction:column;align-items:stretch;gap:0;background:#0e191bfc;border:1px solid var(--reef);box-shadow:0 25px 60px #0006;padding:.5rem}
  .nav-links.open{display:flex}.nav-links>a{padding:.85rem}.nav-links>a.active:after{display:none}
}
@media(max-width:850px){
  .home-hero{grid-template-columns:1fr;min-height:calc(100svh - var(--nav));padding:5rem 0 4rem}
  .depth-field{position:absolute;right:-28%;top:10%;width:76%;border:0;opacity:.22}
  .hero-copy{z-index:2}
  .section-intro,.steps li{grid-template-columns:1fr;gap:.8rem}.section-intro p{grid-column:1;margin:0}
  .signal-body,.signal-body>div:first-child{grid-template-columns:1fr}
  .signal-wallet{border:0;border-top:1px solid var(--reef);padding:1.3rem 0 0}
  .positioning-panel{grid-template-columns:1fr;gap:1rem;padding:5rem 0}
  .signal-meta{flex-direction:column;gap:.4rem}
  .final-cta{align-items:flex-start;flex-direction:column}
  .live-proof,.product-story{padding:5rem 0}
  .metric-strip{flex-direction:column}.metric-strip>div{border-left:0;border-top:1px solid var(--reef);padding:1rem 0}.metric-strip>div:first-child{border-top:0}
  .morning-hero{grid-template-columns:minmax(0,1fr);gap:2.5rem;padding:5rem 0}.home-section-head,.watch-promise,.professional-section{grid-template-columns:minmax(0,1fr);gap:1.2rem}.home-whales{grid-template-columns:minmax(0,1fr)}.home-history-events{grid-template-columns:1fr 1fr}.home-history-events>div:nth-child(2){border-right:0}.home-history-events>div{border-bottom:1px solid var(--reef)}.trust-facts{grid-template-columns:1fr 1fr}.trust-facts>div:nth-child(2){border-right:0}.trust-facts>div{border-bottom:1px solid var(--reef)}
}
@media(max-width:560px){
  .wrap{padding-left:1rem;padding-right:1rem}
  .home-hero h1{font-size:clamp(3rem,15vw,4.5rem)}
  .changes-head h1{font-size:2.9rem}
  .site-nav{padding:0 1rem}
  .signal-body{padding:1.5rem 1rem}.signal-top,.signal-meta{padding:1rem}
  .final-cta{padding:1.5rem}
  .row{align-items:flex-start;flex-direction:column}
  .event-primary{grid-template-columns:1fr;gap:.25rem}.event-delta{text-align:left}
  footer{display:block;padding-left:1rem;padding-right:1rem}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.metric{min-width:0}.metric strong{font-size:1.08rem}
  .wrap.wide{width:100%;overflow:hidden}.morning-hero,.morning-hero>*{min-width:0}.morning-copy,.morning-brief{width:calc(100vw - 2rem)!important;max-width:calc(100vw - 2rem)!important;overflow:hidden}.morning-copy{padding-right:2.5rem}.morning-copy h1{font-size:2.65rem;overflow-wrap:anywhere}.morning-copy .eyebrow,.morning-copy p{max-width:calc(100vw - 4.5rem);overflow-wrap:anywhere}.morning-copy .actions{width:100%;align-items:stretch;flex-direction:column}.morning-copy .actions>.btn,.morning-copy .actions>form,.morning-copy .actions form button{width:100%;max-width:100%}.morning-brief-head{flex-wrap:wrap}.morning-metrics{grid-template-columns:1fr}.morning-metrics>div{border-right:0}.home-section{width:100%;min-width:0;padding:4.5rem 0}.home-section>*{min-width:0}.home-history-state{align-items:flex-start;flex-direction:column}.home-history-events,.trust-facts{grid-template-columns:1fr}.home-history-events>div,.trust-facts>div{border-right:0}.home-history-empty{flex-direction:column}.final-cta .actions{align-items:stretch;flex-direction:column;width:100%}.final-cta .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}

/* ---------- /changes ---------- */
.changes-head{display:grid;grid-template-columns:1.4fr .6fr;gap:3rem;align-items:end;padding:2.5rem 0 1rem}
.changes-head h1{font-size:clamp(3.4rem,7vw,6rem);margin:.5rem 0 1rem}
/* Only the delta number carries weight/color -- the same event-tone convention every ranked card
   below uses (event-card.increase/reduce/etc), so the hero's headline fact reads with the same
   visual language as the list it's summarizing, not an invented one-off emphasis rule. */
.lede-delta{font-weight:600;font-variant-numeric:tabular-nums}
.lede-delta.increase{color:var(--mint)}.lede-delta.reduce,.lede-delta.close{color:var(--coral)}
.lede-delta.flip{color:var(--violet)}.lede-delta.open{color:var(--cyan)}
.window-control{display:flex;flex-direction:column;align-items:flex-end;gap:.5rem;position:sticky;top:calc(var(--nav) + 1rem);z-index:10}
.window-control-label{font:600 .66rem var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.window-control-tabs{display:flex;gap:.5rem}
.window-control .btn{min-width:4.2rem}
.window-current{background:transparent;border-color:var(--cyan);color:var(--cyan)!important;cursor:default}
/* Reads as one designed "trust strip" (bordered, tinted, grouped by dividers) rather than a line
   of bare debug text -- the facts themselves (freshness, sample, coverage) are the same, only the
   presentation earns them a container of their own. */
.observation-rail{display:flex;align-items:center;gap:0;flex-wrap:wrap;border:1px solid var(--reef);border-radius:3px;background:var(--deep);padding:.9rem 1.3rem;margin:1.5rem 0 2rem;color:var(--muted);font:11px var(--font-mono);text-transform:uppercase;letter-spacing:.07em}
.observation-rail>span{padding-right:1.3rem;margin-right:1.3rem;border-right:1px solid var(--reef)}
.stale-flag{color:var(--amber);font-weight:700}
.observation-rail details{margin-left:auto;position:relative}
.observation-rail summary{cursor:pointer;color:var(--cyan)}
.observation-rail details div{position:absolute;right:0;top:1.8rem;width:max-content;max-width:80vw;padding:.75rem;background:var(--deep2);border:1px solid var(--reef);z-index:20}
.event-list-head{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:end;margin:2rem 0 1.5rem}
.event-list-head h2{font-size:clamp(2rem,3vw,3rem);margin:.5rem 0}
.event-list-head p{font-size:.9rem}
/* The list is now the first thing after the metrics (founder direction, 2026-08-28: daily-check
   usage beats editorial narrative order) -- this is the one-tap way down to the two charts for
   anyone who still wants them, instead of scrolling past everything to reach them. */
.page-jump{display:flex;gap:1.5rem;margin:3rem 0 -1rem;padding-top:1.2rem;border-top:1px solid var(--reef);font:600 .74rem var(--font-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.page-jump a{color:var(--muted)}
.page-jump a:hover{color:var(--white)}
@media(max-width:850px){.changes-head,.event-list-head{grid-template-columns:1fr;gap:1rem}.window-control{justify-content:flex-start;position:static}.observation-rail details{margin-left:0}}
@media(max-width:560px){.wrap{width:100%;min-width:0}.changes-head,.changes-head>div{min-width:0}.changes-head h1{font-size:2.6rem}.changes-head .lede{overflow-wrap:anywhere}.leading-action{display:block;margin-left:0}.metrics{grid-template-columns:1fr}}

/* Participant-change heatmap (product/REDESIGN-SPEC.md §5): a CSS grid, not a chart library --
   .heatmap-row is display:contents so its row-head + cells lay out as flat children of the same
   grid, keeping every row's columns aligned without a nested-table layout. Wide content (7 columns
   x N assets) scrolls inside its own container on narrow viewports rather than the page body. */
/* Rounded, gap-separated cells with a real hover lift -- the sharp 1px-bordered squares with a
   2px seam read as a spreadsheet, not a heatmap. Color intensity still does the actual work;
   this only changes how it's presented. */
.heatmap-grid{display:grid;grid-template-columns:8rem repeat(var(--cols),1fr);gap:.4rem;margin:2rem 0;overflow-x:auto}
.heatmap-row{display:contents}
.heatmap-row-head{display:flex;align-items:center;gap:.4rem;padding:.7rem .9rem;background:var(--deep);border:1px solid var(--reef);border-radius:3px;font:600 .85rem var(--font-mono);color:var(--white);text-decoration:none;transition:.15s var(--ease)}
.heatmap-row-head:hover{border-color:var(--reef2);background:var(--deep2)}
.heatmap-header .heatmap-row-head{background:none;border:none}
.heatmap-col-head{padding:.6rem .4rem;font:600 .6rem var(--font-mono);text-transform:uppercase;letter-spacing:.04em;color:var(--muted);text-align:center;align-self:end}
.heatmap-cell{display:flex;align-items:center;justify-content:center;padding:.9rem .3rem;border-radius:3px;font:600 1.1rem var(--font-mono);font-variant-numeric:tabular-nums;color:var(--white);text-decoration:none;min-height:2.7rem;min-width:3.2rem;transition:.15s var(--ease)}
.heatmap-cell.heatmap-empty{border:1px solid var(--reef)}
.heatmap-cell:not(.heatmap-empty):hover{transform:translateY(-2px) scale(1.04);box-shadow:0 8px 18px #0006;z-index:1;position:relative}
.heatmap-cell.heatmap-empty{color:var(--muted);background:var(--deep);opacity:.55}
.heatmap-cell.heatmap-open{background:color-mix(in srgb, var(--cyan) calc(var(--intensity)*100%), var(--deep))}
.heatmap-cell.heatmap-increase{background:color-mix(in srgb, var(--mint) calc(var(--intensity)*100%), var(--deep))}
.heatmap-cell.heatmap-reduce,.heatmap-cell.heatmap-close{background:color-mix(in srgb, var(--coral) calc(var(--intensity)*100%), var(--deep))}
.heatmap-cell.heatmap-flip{background:color-mix(in srgb, var(--violet) calc(var(--intensity)*100%), var(--deep))}
.heatmap-col-head.heatmap-open{color:var(--cyan)}
.heatmap-col-head.heatmap-increase{color:var(--mint)}
.heatmap-col-head.heatmap-reduce,.heatmap-col-head.heatmap-close{color:var(--coral)}
.heatmap-col-head.heatmap-flip{color:var(--violet)}
@media(max-width:560px){.heatmap-grid{grid-template-columns:5.5rem repeat(var(--cols),minmax(3.4rem,1fr));font-size:.85rem}.heatmap-row-head{padding:.6rem .5rem;font-size:.72rem}.heatmap-col-head{font-size:.52rem;padding:.5rem .2rem}}

/* ---------- /dashboard ---------- */
/* Dashboard hierarchy v2 (product/REDESIGN-SPEC.md): a workspace header, not a landing-page hero
   -- the founder's own words were "the current page leads with a large editorial headline, so it
   feels like a landing page inside the app." font-size dropped from clamp(3.1rem,6vw,5.6rem)
   (larger than the homepage's own hero) to a compact heading scale used nowhere else, and the
   lede is gone -- the freshness rail directly below now carries that information as real facts,
   not a restated sentence. */
.dash-head{display:flex;justify-content:space-between;align-items:center;gap:2rem;padding:1.8rem 0 1.2rem}
.dash-head h1{margin:.15rem 0 0;font-size:clamp(1.5rem,2.4vw,1.9rem);font-weight:500}
.dash-head .eyebrow{margin-bottom:.15rem}
.dash-head>.btn{white-space:nowrap}
.dashboard-status{display:flex;gap:1.4rem;flex-wrap:wrap;padding:.85rem 0;border-block:1px solid var(--reef);color:var(--muted);font:10px var(--font-mono);text-transform:uppercase;letter-spacing:.08em}
.dashboard-status span:last-child{color:var(--cyan);margin-left:auto}
/* Account state, not a market direction -- deliberately amber, never mint/coral, which are
   reserved site-wide for increase/decrease and would read here as a reading about a position. */
.verify-banner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;margin:1.4rem 0 0;padding:1rem 1.2rem;border:1px solid var(--amber);border-left-width:3px;background:#e0b46f14}
.verify-banner strong{display:block;color:var(--amber);font:500 .95rem var(--font-body)}
.verify-banner p{margin:.3rem 0 0;color:var(--muted);font-size:.86rem;max-width:56ch}
.verify-banner button{flex-shrink:0;background:none;border:1px solid var(--amber);color:var(--amber);padding:.5rem 1rem;font:10px var(--font-mono);text-transform:uppercase;letter-spacing:.08em;cursor:pointer}
.verify-banner button:hover{background:var(--amber);color:var(--abyss)}
@media(max-width:560px){.verify-banner{flex-direction:column;align-items:flex-start;gap:.9rem}.verify-banner form{width:100%}.verify-banner button{width:100%}}
.watch-summary{display:grid;grid-template-columns:repeat(4,1fr);margin:1.6rem 0 4.5rem;border:1px solid var(--reef)}
.watch-summary>div{padding:1.2rem 1.4rem;border-right:1px solid var(--reef);background:var(--deep)}
.watch-summary>div:last-child{border:0}.watch-summary span{display:block;color:var(--muted);font:10px var(--font-mono);text-transform:uppercase;letter-spacing:.1em}.watch-summary strong{display:block;margin-top:.35rem;color:var(--white);font:500 1.7rem var(--font-mono)}
.section-head{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:3rem;margin-bottom:1.3rem}.section-head h2{font-size:clamp(2rem,3vw,3rem);margin:.45rem 0 0}.section-head p{margin:0;font-size:.9rem}
.watch-activity,.watched-section{margin:0 0 5rem}.watch-events{border-top:1px solid var(--reef)}
.watch-event{display:grid;grid-template-columns:1.25fr .75fr;gap:2rem;align-items:center;padding:1.35rem .15rem;border-bottom:1px solid var(--reef);color:var(--text);text-decoration:none}.watch-event:hover{color:var(--text);background:#ffffff03}.watch-event h3{font-size:1.1rem;margin:.35rem 0}.watch-event p{color:var(--white);font:1.25rem var(--font-mono);margin:0}.watch-event p span{color:var(--muted)}.watch-event-result{text-align:right}.watch-event-result strong{display:block;color:var(--white);font:500 1.55rem var(--font-mono)}.watch-event-result>span,.watch-event-result small{display:block;color:var(--muted);font:10px var(--font-mono);margin-top:.25rem}.watch-event-result small{color:var(--brass);text-transform:uppercase;letter-spacing:.06em}
.watch-calm{display:grid;grid-template-columns:1fr 1.2fr auto;align-items:center;gap:2rem;padding:1.5rem;border:1px solid var(--reef);background:var(--deep)}.watch-calm strong{color:var(--white)}.watch-calm span{color:var(--muted);font-size:.88rem}
.watch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(25rem,1fr));gap:.8rem}
.watch-item{position:relative;padding:1.4rem 1.5rem;border-radius:3px;background:var(--deep);border:1px solid var(--reef);display:flex;justify-content:space-between;gap:1.5rem;align-items:flex-start;min-width:0;transition:.2s var(--ease)}.watch-item:before{content:"";position:absolute;left:0;top:1rem;bottom:1rem;width:2px;background:var(--reef2)}.watch-item.long:before{background:var(--mint)}.watch-item.short:before{background:var(--coral)}
/* Dashboard hierarchy pass: a watch-item with a fresh material change looks different from a
   quiet one, using tokens already established elsewhere (amber already means "selected"/
   "attention" -- the chart's selected-comparison lines, the market page's active window tab). */
.watch-item.has-changes{border-color:#e0b46f4d;background:#e0b46f0a}
.watch-item.has-changes:before{background:var(--amber)}
.tag.changed{color:var(--amber);margin-left:.5rem}
.watch-main{min-width:0}.watch-main>strong{display:block;color:var(--white);font:500 1.2rem var(--font-display);margin-bottom:.25rem}.watch-address{font-size:.7rem;color:var(--muted);margin-bottom:.85rem;overflow-wrap:anywhere}.watch-facts{font-size:1rem;color:var(--text);margin-bottom:.2rem}.watch-facts b{color:var(--white);font-weight:600}.watch-observed,.watch-latest{font-size:.78rem;color:var(--muted)}.watch-latest{margin-top:.35rem}.watch-badges{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.8rem}.watch-actions{display:flex;flex-direction:column;align-items:flex-end;gap:.8rem}.watch-actions details{text-align:right}.watch-actions summary{cursor:pointer;color:var(--muted);font-size:.72rem;list-style:none}.watch-actions details form{margin-top:.6rem}.watch-empty{padding:3rem 1.5rem;text-align:center;border:1px dashed var(--reef);color:var(--muted)}
.watch-add{display:grid;grid-template-columns:1fr 1fr;gap:5rem;padding:2rem;border:1px solid var(--reef);border-radius:4px;background:var(--deep);margin-bottom:3rem}.watch-add h2{font-size:2rem;margin:.45rem 0}.watch-add p{max-width:28rem}.watch-add label:first-of-type{margin-top:0}
.watch-add-row{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}.watch-add-row label{margin-top:1rem}
.watch-add button{width:100%;margin-top:1.4rem}
@media(max-width:560px){.watch-add-row{grid-template-columns:1fr}}
.btn-sm{padding:.4rem .75rem!important;font-size:.78rem!important;margin:0!important}
@media(max-width:760px){.dash-head{flex-direction:column;align-items:flex-start;gap:1rem}.dashboard-status span:last-child{margin-left:0}.watch-summary{grid-template-columns:1fr;margin-bottom:3.5rem}.watch-summary>div{border-right:0;border-bottom:1px solid var(--reef)}.section-head,.watch-add{grid-template-columns:1fr;gap:1rem}.watch-event{grid-template-columns:1fr;gap:.6rem}.watch-event-result{text-align:left}.watch-calm{grid-template-columns:1fr;gap:.7rem}.watch-grid{grid-template-columns:1fr}}
@media(max-width:560px){.watch-item{flex-direction:column}.watch-actions{flex-direction:row;align-items:center;width:100%;justify-content:space-between}.watch-add{padding:1.2rem}}

/* ---------- /participants/{wallet} ---------- */
.back-link{display:inline-block;margin:1rem 0 3rem;color:var(--muted);font-size:.82rem}
.participant-head{display:grid;grid-template-columns:1fr auto;gap:3rem;align-items:end}
.participant-head h1{font-size:clamp(3.2rem,6.5vw,5.6rem);margin:.5rem 0}
.wallet-line{display:flex;align-items:center;gap:1rem;overflow-wrap:anywhere}
.copy-button{padding:.35rem .6rem!important;font-size:.7rem!important;white-space:nowrap}
.participant-action{display:flex;flex-direction:column;align-items:flex-end;gap:.7rem}
.participant-action form,.participant-action .btn{width:100%}
.latest-action{display:grid;grid-template-columns:.7fr 1.3fr 1fr;align-items:center;gap:2rem;padding:2rem 0;border-bottom:1px solid var(--reef)}
.latest-action strong{color:var(--white);font:400 clamp(1.5rem,3vw,2.4rem) var(--font-display)}
.latest-action>span:last-child{font-variant-numeric:tabular-nums}
.behavior-summary{color:var(--text);font-size:.92rem;line-height:1.6;margin:1.5rem 0;padding:1rem 1.2rem;background:var(--deep);border:1px solid var(--reef);border-left:2px solid var(--cyan);border-radius:0 3px 3px 0}
.account-strip{display:grid;grid-template-columns:repeat(3,1fr);margin:2.5rem 0;border:1px solid var(--reef);background:var(--deep)}
.account-strip>div{padding:1.25rem;border-right:1px solid var(--reef)}
.account-strip>div:last-child{border:0}
.account-strip span,.position-details span{display:block;color:var(--muted);font:10px var(--font-mono);text-transform:uppercase;letter-spacing:.08em}
.account-strip strong{display:block;color:var(--white);font-size:1.35rem;margin-top:.35rem;font-variant-numeric:tabular-nums;font-family:var(--font-mono)}
.position-panel{position:relative;margin:2rem 0 5rem;border:1px solid var(--reef);background:var(--deep);overflow:hidden}
.position-panel:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--position,var(--cyan))}
.position-panel.long{--position:var(--mint)}.position-panel.short{--position:var(--coral)}
.position-primary{display:flex;justify-content:space-between;gap:2rem;align-items:end;padding:2rem}
.position-primary h2{font-size:clamp(2rem,4vw,3.5rem);margin:.6rem 0 0}
.position-primary>strong{color:var(--white);font:400 clamp(2.5rem,5vw,4.6rem) var(--font-display);font-variant-numeric:tabular-nums}
.position-details{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--reef)}
.position-details>div{padding:1.1rem;border-right:1px solid var(--reef)}
.position-details>div:last-child{border:0}
.position-details b{display:block;color:var(--white);font-weight:550;margin-top:.35rem;font-variant-numeric:tabular-nums;font-family:var(--font-mono)}
.positive{color:var(--mint)!important}.negative{color:var(--coral)!important}
.history-chart{position:relative;margin:5rem 0;padding:1.5rem;border:1px solid var(--reef);background:var(--deep)}
.chart-head{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:end}
.chart-head h2{font-size:clamp(2rem,3vw,3rem);margin:.5rem 0}
.chart-head p{font-size:.9rem}
.history-chart svg{display:block;width:100%;height:auto;margin:2rem 0}
.history-chart polyline{filter:drop-shadow(0 0 5px #d1a05c33)}
.zero-line{stroke:var(--reef2);stroke-width:1}
.chart-label{fill:var(--muted);font:9px var(--font-mono)}
.chart-foot{display:flex;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;color:var(--muted);font:10px var(--font-mono);text-transform:uppercase;letter-spacing:.08em}
/* The zone legend pairs a tag with its text; without this each pair wraps mid-phrase and the tag
   drifts away from the words it labels (seen in a real render of the liquidation chart). */
.chart-foot>span{display:inline-flex;align-items:center;gap:.4rem}
.timeline-section{margin:6rem 0 2rem}
.timeline{position:relative;margin-top:2rem}
.timeline:before{content:"";position:absolute;left:7px;top:9px;bottom:9px;width:1px;background:var(--reef)}
.timeline-event{position:relative;display:grid;grid-template-columns:16px 1fr;gap:1.2rem;padding:0 0 2.2rem}
/* Was always cyan regardless of direction -- the same event renders as a colored dot in the
   chart above (.chart-marker.increase/.reduce/.flip already do this) but an uncolored one down
   here, the one place a reader is scanning history precisely to spot the pattern of direction. */
.timeline-node{width:15px;height:15px;border:3px solid var(--abyss);border-radius:50%;background:var(--cyan);box-shadow:0 0 0 1px var(--reef2);z-index:1}
.timeline-node.increase{background:var(--mint)}
.timeline-node.reduce,.timeline-node.close{background:var(--coral)}
.timeline-node.flip{background:var(--violet)}
.timeline-event strong{color:var(--white)}
.timeline-values{font-size:1.2rem;color:var(--white);margin:.4rem 0;font-variant-numeric:tabular-nums;font-family:var(--font-mono)}
.timeline-values span{color:var(--cyan);margin:0 .45rem}
.timeline-reason{display:block;margin:.35rem 0 0;color:var(--muted);font-size:.78rem;line-height:1.45}
/* outline:none on the base state, not just :focus-visible -- without it, some browsers layer their
   own default focus ring (rendered as a rectangular bounding box on an SVG shape) underneath the
   custom cyan ring below, producing a nested black-square-behind-blue-ring artifact on focus
   (found live 2026-08-26 on the collateral chart). */
.chart-marker{cursor:pointer;outline:none}
.chart-marker circle{fill:var(--deep);stroke:var(--cyan);stroke-width:2;transition:.15s var(--ease)}
.chart-marker.increase circle{stroke:var(--mint)}
.chart-marker.reduce circle,.chart-marker.close circle{stroke:var(--coral)}
.chart-marker.flip circle{stroke:var(--violet)}
.chart-marker:hover circle,.chart-marker:focus-visible circle{fill:var(--metric,var(--cyan));r:6}
.chart-marker:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.timeline-event:target{background:#d1a05c14;border-radius:3px}
/* Chart v2: every real observed point, not just event markers, is its own hoverable/tappable/
   focusable dot -- deliberately smaller and quieter than .chart-marker so markers still read as
   the more important affordance. */
/* Decorative only -- pointer-events:none so hover/tap always reaches .chart-point-hit beneath it,
   even though it paints on top (same coordinate, later in DOM). Its own state changes via the
   ~sibling selector below, driven by the actual interactive element's hover/focus. */
.chart-point{fill:var(--deep);stroke:var(--muted);stroke-width:1.5;pointer-events:none;transition:.15s var(--ease)}
.chart-point.long,.chart-point.collateral{stroke:var(--mint)}
.chart-point.short{stroke:var(--coral)}
.chart-point-hit{fill:transparent;stroke:none;cursor:pointer;outline:none}
.chart-point-hit:hover + .chart-point,.chart-point-hit:focus-visible + .chart-point{r:5;fill:var(--metric,var(--cyan))}
.chart-point-hit:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.chart-time-label{fill:var(--muted);font:9px var(--font-mono);text-transform:uppercase;letter-spacing:.06em}
.flow-bar{transition:.15s var(--ease)}.flow-bar.long{fill:var(--mint)}.flow-bar.short{fill:var(--coral)}.flow-bar:hover{opacity:.75!important}
.chart-readout{margin-top:.7rem;padding:.55rem .75rem;background:var(--deep2);border:1px solid var(--reef);border-radius:2px;font:.82rem var(--font-mono);color:var(--white);min-height:1.3em}
/* Shared chart interaction module (public/charts.js): a floating tooltip for sighted pointer
   users, layered on top of the same stable .chart-readout line keyboard/AT users already get --
   neither replaces the other. pointer-events:none so the tooltip never itself becomes the hover
   target and steals the pointerleave that would otherwise hide it. */
.chart-tooltip{position:absolute;pointer-events:none;z-index:5;padding:.35rem .6rem;background:var(--deep2);border:1px solid var(--reef2);border-radius:2px;font:.76rem var(--font-mono);color:var(--white);white-space:nowrap;opacity:0;transform:translateY(4px);transition:opacity .12s var(--ease),transform .12s var(--ease)}
.chart-tooltip.visible{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion: reduce){.chart-tooltip{transition:none}}
.chart-crosshair{stroke:var(--reef2);stroke-width:1;pointer-events:none}
.chart-thin{padding:1.4rem 1.6rem;margin:1rem 0;background:var(--deep);border:1px solid var(--reef);border-radius:3px;display:flex;flex-direction:column;gap:.3rem}
.chart-thin strong{font-size:1.5rem;color:var(--white);font-family:var(--font-mono)}
.chart-thin strong.long{color:var(--mint)}
.chart-thin strong.short{color:var(--coral)}
.chart-thin span{color:var(--muted);font-size:.8rem}
.chart-thin-note{color:var(--muted);font-size:.82rem;margin:.5rem 0 0}
@media(max-width:850px){.participant-head{grid-template-columns:1fr}.participant-action{align-items:flex-start}.latest-action{grid-template-columns:1fr;gap:.5rem}.position-details{grid-template-columns:repeat(2,1fr)}.position-details>div{border-bottom:1px solid var(--reef)}.chart-head{grid-template-columns:1fr;gap:.5rem}}
@media(max-width:560px){.participant-head h1{font-size:2.6rem;overflow-wrap:anywhere}.participant-action{width:100%}.wallet-line{align-items:flex-start;flex-direction:column}.wallet-line .mono{max-width:100%;font-size:.72rem;overflow-wrap:anywhere}.focused-event{overflow:hidden;padding:1rem}.focused-event .event-primary h2{font-size:1.55rem;margin:.8rem 0}.focused-values{display:flex;flex-direction:column;gap:.25rem;overflow-wrap:anywhere}.focused-event .muted{overflow-wrap:anywhere;word-break:break-word}.account-strip{grid-template-columns:1fr}.account-strip>div{border-right:0;border-bottom:1px solid var(--reef)}.position-primary{align-items:flex-start;flex-direction:column}.chart-foot{flex-direction:column;gap:.4rem}.focused-event,.focused-event *{min-width:0;max-width:100%}.focused-event .eyebrow,.focused-values span{overflow-wrap:anywhere;word-break:break-word}.focused-event .event-primary{grid-template-columns:minmax(0,1fr)}}

/* ---------- home "why traders use it": named frictions, not feature names ---------- */
.friction{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem;margin-top:2.5rem}
.friction-card{padding:1.7rem;border:1px solid var(--reef);border-radius:3px;background:var(--deep)}
.friction-card q{display:block;font:italic 1.05rem/1.5 var(--font-display);color:var(--white);margin:0 0 .9rem;quotes:none}
.friction-card p{margin:0;font-size:.92rem;color:var(--text)}
.friction-card p b{color:var(--cyan);font-weight:600}
@media(max-width:800px){.friction{grid-template-columns:1fr}}

/* ---------- /features: four workflow steps, each paired with a small illustrative panel showing
   the real page's shape (not live data -- this is a marketing page, not the market page itself) ---------- */
.split-workflow{display:grid;grid-template-columns:1.1fr .9fr;gap:4rem;align-items:center}
.workflow-note{font-size:.88rem;color:var(--muted);border-left:2px solid var(--cyan);padding-left:1rem;margin-top:1.4rem}
.demo-panel{background:var(--deep2);border:1px solid var(--reef);border-radius:3px;padding:1.6rem}
.demo-panel-head{display:flex;justify-content:space-between;gap:1rem;font:600 .68rem var(--font-mono);text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:1rem}
.demo-row{display:flex;justify-content:space-between;gap:1rem;padding:.8rem 0;border-top:1px solid var(--reef);font-size:.88rem;color:var(--muted)}
.demo-row:first-of-type{border-top:0}
.demo-row strong{color:var(--white);font-family:var(--font-mono);font-weight:500}
.demo-row strong.up{color:var(--mint)}
.demo-row strong.down{color:var(--coral)}
.demo-panel-foot{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--reef);display:flex;gap:.5rem;flex-wrap:wrap}
@media(max-width:850px){.split-workflow{grid-template-columns:1fr;gap:1.5rem}}

/* ---------- /data: a real illustrative event shape, not just prose describing one ---------- */
.code-panel{margin:1.5rem 0;max-width:50rem;background:var(--deep2);border:1px solid var(--reef);border-radius:3px;overflow:hidden}
.code-panel-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.9rem 1.3rem;border-bottom:1px solid var(--reef);font:600 .68rem var(--font-mono);text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.code-panel pre{margin:0;padding:1.4rem;overflow-x:auto;font:.82rem/1.6 var(--font-mono);color:var(--text)}
.code-panel .k{color:var(--cyan)}
.code-panel .s{color:var(--mint)}
.code-panel .n{color:var(--white)}

/* ---------- /pricing: no checkout, no price shown for what's next -- the "live" card and the
   "planned" card must read as visually distinct so nobody mistakes direction for an offer.
   Every checkmarked line here must be backend-enforced today, not aspirational -- audited
   2026-08-28: the only real difference Pro currently enforces is the watch-slot limit
   (FREE_LIMIT vs unlimited, routes/watchlist.js). Faster alerts/tags/saved views/fuller history
   have no code behind them yet, so they live in .tier-planned, not the checked list. */
.tier-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem;margin:2.5rem auto;max-width:56rem;align-items:start}
/* The three purchasable tiers read as one comparison, so they share a bottom edge and their
   buttons line up. The content is split into a main body and a deliberate footer; blank space
   becomes breathing room, not an accidental gap between floating cards. */
.tier-grid-live{grid-template-columns:repeat(3,1fr);max-width:64rem;margin-top:1.6rem;align-items:stretch}
.tier-grid-live .tier-card{display:flex;flex-direction:column;padding:1.7rem}
/* Flex items stretch by default, which turned the inline-block badge into a full-width bar. */
.tier-grid-live .tier-badge,.tier-grid-live .tier-price,.tier-grid-live .tier-price-note{align-self:flex-start}

.tier-grid-live .tier-card h3{font-size:1.35rem}
.tier-actions{margin-top:auto;padding-top:1.3rem}
/* The "what this solves" line is the tier's argument, not a feature -- it sits apart from both
   lists and above the CTA, so the eye lands on the reason before the button. */
.tier-solves{margin:1.1rem 0 0;padding-top:1rem;border-top:1px solid var(--reef);color:var(--muted);font-size:.84rem;line-height:1.5}
.tier-solves strong{color:var(--text);font-weight:600}
.tier-actions .btn{width:100%;justify-content:center}

/* Billing-period switch. Two sr-only radios drive it, so it works with JavaScript disabled and
   keeps real radio semantics (arrow keys, one-of-two) instead of a scripted fake toggle. */
.pricing-terms{max-width:64rem;margin-inline:auto}
.term-switch-row{display:flex;justify-content:center;margin-bottom:.4rem}
.term-switch{display:inline-flex;gap:.2rem;padding:.25rem;border:1px solid var(--reef);border-radius:999px;background:var(--deep)}
.term-switch label{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1.1rem;border-radius:999px;cursor:pointer;color:var(--muted);font:500 .85rem var(--font-body);transition:background .15s,color .15s}
.term-switch label:hover{color:var(--text)}
.term-save{font:600 .62rem var(--font-mono);text-transform:uppercase;letter-spacing:.07em;color:var(--mint);background:#33c08422;padding:.2rem .45rem;border-radius:2px}
#term-monthly:checked~.term-switch-row label[for=term-monthly],
#term-annual:checked~.term-switch-row label[for=term-annual]{background:var(--deep2);color:var(--white);box-shadow:inset 0 0 0 1px var(--reef2)}
/* Keyboard focus must be visible even though the input itself is off-screen. */
#term-monthly:focus-visible~.term-switch-row label[for=term-monthly],
#term-annual:focus-visible~.term-switch-row label[for=term-annual]{outline:2px solid var(--cyan);outline-offset:2px}
/* Both amounts are always in the HTML; CSS decides which term is showing.
   Specificity matters here: the `.tier-price > .term-*` rules below are more specific than a bare
   `.term-annual`, so the hide has to be written at the same depth or the annual price leaks into
   the monthly view -- which is exactly what happened the first time. */
.tier-price>.term-monthly,.tier-price>.term-annual{display:inline-flex;align-items:baseline;gap:.35rem}
.term-annual,.tier-price>.term-annual{display:none}
#term-annual:checked~.tier-grid .term-monthly,
#term-annual:checked~.tier-grid .tier-price>.term-monthly{display:none}
#term-annual:checked~.tier-grid .term-annual{display:inline}
#term-annual:checked~.tier-grid .tier-price>.term-annual{display:inline-flex}
/* .tier-price span is muted at .85rem for the "/month" suffix; the amount itself must opt out. */
.tier-price .amount{font-size:2.1rem;letter-spacing:-.01em;color:var(--white);font-family:var(--font-mono);font-weight:500}
/* Mono + tabular is right for figures and wrong for a word -- "Custom" in it read as a code token. */
.tier-price .amount-word{font-family:var(--font-display);font-weight:400;letter-spacing:0}

/* Live tiers get the two-column prominence above; everything still planned sits in a quieter
   three-column row below it, so visual weight matches what is actually purchasable today. */
.tier-grid-future{grid-template-columns:repeat(3,1fr);margin-top:1.2rem;max-width:64rem;align-items:stretch}
.tier-grid-future .tier-card{padding:1.5rem;display:flex;flex-direction:column}
.tier-grid-future h3{font-size:1.25rem}
.tier-role{margin:0 0 .45rem;color:var(--brass);font:600 .68rem var(--font-mono);letter-spacing:.12em;text-transform:uppercase}
@media(max-width:980px){.tier-grid-future{grid-template-columns:1fr}}
.tier-card{padding:2rem;border-radius:4px}
.tier-card.live{background:var(--deep2);border:1px solid var(--cyan)}
.tier-card.live.tier-free{border-color:var(--reef);background:var(--deep)}
.tier-card.planned{background:transparent;border:1px dashed var(--reef2)}
.tier-badge{display:inline-block;font:600 .66rem var(--font-mono);text-transform:uppercase;letter-spacing:.07em;padding:.25rem .6rem;border-radius:2px;margin-bottom:1.1rem}
.tier-badge.live{color:var(--mint);background:#33c08422}
.tier-badge.planned{color:var(--muted);background:var(--deep)}
.tier-card h3{font-size:1.5rem;margin:0 0 .3rem}
.tier-tagline{color:var(--muted);font-size:.87rem;margin:0 0 1.3rem}
.tier-price{display:flex;align-items:baseline;gap:.4rem;font-size:2.1rem;font-variant-numeric:tabular-nums;margin:1.1rem 0 .3rem}
.tier-price span{font-size:.85rem;color:var(--muted);font-family:var(--font-body);font-weight:500}
.tier-note{color:var(--muted);font-size:.9rem;margin:.35rem 0 1rem}
.plan-choice{border:0;padding:0;margin:0 0 1rem;display:grid;gap:.55rem;color:var(--muted)}
.plan-choice legend{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;color:var(--reef2);margin-bottom:.25rem}
.plan-choice label{display:flex;align-items:center;gap:.55rem}
.tier-list{list-style:none;margin:0 0 1.3rem;padding:0;display:flex;flex-direction:column;gap:.6rem}
.tier-list li{position:relative;padding-left:1.4rem;font-size:.9rem;color:var(--text)}
.tier-list li:before{content:"✓";position:absolute;left:0;color:var(--mint);font-weight:700}
.tier-planned{list-style:none;margin:0;padding:1.1rem 0 0;border-top:1px solid var(--reef);display:flex;flex-direction:column;gap:.5rem}
.tier-planned-label{font:600 .66rem var(--font-mono);text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:.3rem}
.tier-planned li{position:relative;padding-left:1.4rem;font-size:.85rem;color:var(--muted)}
.tier-planned li:before{content:"—";position:absolute;left:0;color:var(--reef2)}
.pricing-note{margin:1.2rem 0;max-width:56rem;padding:1.1rem 1.4rem;border:1px solid var(--reef);border-radius:3px;background:var(--deep)}
.pricing-note h4{font-family:var(--font-body);font-weight:600;color:var(--white);font-size:.95rem;margin:0 0 .5rem}
.pricing-note p{margin:0;font-size:.9rem;color:var(--text)}
/* Single column: subgrid must be switched off, not just the columns. Three cards each spanning 8
   rows need 24 rows in one column, so the shared 8-row track set no longer describes the layout --
   the cards fall back to their own flex flow, which is the correct behaviour when nothing sits
   beside them to align with. */
@media(max-width:900px){.tier-grid-live{grid-template-columns:1fr}}
@media(max-width:700px){
  .tier-grid-future{grid-template-rows:none}
  .tier-grid-future .tier-card{display:flex;flex-direction:column;grid-row:auto;grid-template-rows:none}
  .tier-grid-future .tier-actions{margin-top:auto}
}
@media(max-width:700px){.tier-grid{grid-template-columns:1fr}.term-switch{width:100%}.term-switch label{flex:1;justify-content:center;padding:.55rem .6rem}}

/* ---------- /about: one real data panel instead of another feature-grid -- the founder's own
   complaint that the legal/about/evidence pages had become dull, interchangeable card-grids ---------- */
.frame-panel{margin:2rem 0;max-width:50rem;background:var(--deep2);border:1px solid var(--reef);border-radius:3px}
.frame-panel-head{display:flex;align-items:center;gap:.6rem;padding:1rem 1.4rem;border-bottom:1px solid var(--reef);color:var(--muted);font:600 .7rem var(--font-mono);text-transform:uppercase;letter-spacing:.08em}
.frame-panel-head .dot{width:6px;height:6px;border-radius:50%;background:var(--cyan);flex:none}
.frame-row{display:grid;grid-template-columns:9rem 1fr;gap:1.5rem;padding:1.05rem 1.4rem;border-top:1px solid var(--reef)}
.frame-row:first-of-type{border-top:0}
.frame-row span{color:var(--cyan);font:600 .74rem var(--font-mono);text-transform:uppercase;letter-spacing:.06em;padding-top:.1rem}
.frame-row strong{color:var(--text);font-weight:400;font-size:.92rem;line-height:1.5}
.frame-panel-foot{padding:1rem 1.4rem;border-top:1px solid var(--reef);color:var(--muted);font-size:.82rem}
@media(max-width:560px){.frame-row{grid-template-columns:1fr;gap:.3rem}}

/* ---------- /rotation: a wallet's net change per asset, opposite-signed legs only ---------- */
.rotation-card{padding:1.4rem 1.6rem;margin:1rem 0;border:1px solid var(--reef);border-radius:3px;background:var(--deep)}
.rotation-legs{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.9rem}
.rotation-leg{flex:1;min-width:11rem;padding:.9rem 1rem;border:1px solid var(--reef);border-radius:2px;background:var(--deep2)}
.rotation-leg span{display:block;font:600 .66rem var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:.3rem}
.rotation-leg strong{font:500 1.15rem var(--font-mono);color:var(--white)}
.rotation-leg strong.up{color:var(--mint)}
.rotation-leg strong.down{color:var(--coral)}
.rotation-leg a{display:block;margin-top:.5rem;font-size:.78rem}

/* ---------- /admin/ops: internal, utilitarian, read-only ---------- */
/* ---------- /admin/ops redesign: a control room is scanned, not read -- vitals and warnings
   answer "is anything broken?" in one glance before any card is opened; the topic cards that used
   to be one long column of equally-weighted sections now sit in a real grid, each carrying a
   status dot so a problem inside one is visible without reading its rows. ---------- */
.ops-head{margin:1.4rem 0 1rem}
.ops-head h1{font-size:clamp(1.5rem,2.4vw,1.9rem);font-weight:500;margin:.15rem 0 .5rem}
.ops-head .lede{font-size:.92rem;margin:0}

.ops-vitals{display:flex;flex-wrap:wrap;align-items:center;gap:1.6rem 2.2rem;padding:1.3rem 1.6rem;margin-bottom:1rem;background:var(--deep2);border:1px solid var(--reef)}
.ops-vitals-status{display:flex;align-items:center;gap:.55rem;font:600 .95rem var(--font-body);color:var(--white);padding-right:1.6rem;border-right:1px solid var(--reef)}
.ops-vitals>div:not(.ops-vitals-status){display:flex;flex-direction:column;gap:.2rem}
.ops-vitals span{font:600 .64rem var(--font-mono);text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}
.ops-vitals strong{font:500 1.05rem var(--font-mono);color:var(--white)}
.ops-vitals strong.positive{color:var(--mint)}
.ops-vitals strong.negative{color:var(--coral)}

.ops-dot{display:inline-block;width:.55rem;height:.55rem;border-radius:50%;background:var(--muted);flex:none}
.ops-dot.ok{background:var(--mint)}
.ops-dot.warn{background:var(--coral)}
.ops-vitals-status .ops-dot{width:.7rem;height:.7rem}
.ops-vitals-status .ops-dot.ok{box-shadow:0 0 0 3px #33c08422}
.ops-vitals-status .ops-dot.warn{box-shadow:0 0 0 3px #ef5b5f22}

.ops-warnings-banner{display:flex;align-items:flex-start;gap:.8rem;padding:1rem 1.3rem;margin-bottom:1.4rem;border:1px solid var(--reef);border-left:3px solid var(--muted)}
.ops-warnings-banner.warn{border-left-color:var(--coral)}
.ops-warnings-banner.ok{border-left-color:var(--mint)}
.ops-warnings-banner .ops-dot{margin-top:.3rem}

.ops-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(23rem,1fr));gap:1.1rem;align-items:start}
.ops-card{padding:1.4rem 1.6rem;margin:0}
.distribution-item{padding:1.25rem 1.4rem;margin:0 0 .9rem;border:1px solid var(--reef);background:var(--deep2);border-radius:2px}
.distribution-item-head,.distribution-evidence-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.distribution-item-head strong{margin-left:.65rem;color:var(--white);font-size:1.05rem;text-transform:capitalize}
.distribution-asset{margin-left:.65rem;color:var(--brass);font:600 .72rem var(--font-mono);letter-spacing:.08em}
.distribution-evidence{margin:1rem 0;padding:1rem;border:1px solid var(--reef);background:rgba(0,0,0,.12)}
.distribution-evidence-head strong{display:block;margin-top:.25rem;color:var(--white);font:500 1.25rem var(--font-display);text-transform:capitalize}
.distribution-evidence-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin:1rem 0}
.distribution-evidence-grid>div{min-width:0;padding:.7rem;border-top:1px solid var(--reef)}
.distribution-evidence-grid span{display:block;color:var(--muted);font:10px var(--font-mono);text-transform:uppercase;letter-spacing:.08em}
.distribution-evidence-grid b{display:block;margin-top:.35rem;color:var(--white);font-family:var(--font-mono);font-size:.82rem;overflow-wrap:anywhere}
.distribution-source{margin-top:.7rem;padding:.75rem;background:var(--deep);white-space:pre-wrap;overflow:auto;font-size:.7rem;color:var(--muted)}
@media(max-width:850px){.distribution-evidence-grid{grid-template-columns:repeat(2,1fr)}}
.ops-card-title{display:flex;align-items:center;gap:.55rem}
.ops-card-title .ops-dot{flex:none}
.ops-card-head h2{margin:0;font-size:1.15rem}
.ops-card-head p{margin:.25rem 0 1rem}
.ops-subhead{font:600 .72rem var(--font-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:1.2rem 0 .5rem}
.ops-row{display:flex;justify-content:space-between;gap:1rem;padding:.45rem 0;border-bottom:1px solid var(--reef);font-size:.88rem}
.ops-row:last-child{border-bottom:0}
.ops-row span:first-child{color:var(--muted)}
.ops-row strong{text-align:right;font-weight:500;color:var(--white)}
.ops-row strong.positive{color:var(--mint)}
.ops-row strong.negative{color:var(--coral)}
.ops-note{font-size:.78rem;margin-top:.8rem}

/* Asset comparison table -- was a flat stack of one row per asset ("prevent an accidental product
   claim" only works if a candidate asset visually reads differently from a supported one at a
   glance, across every asset at once, not one at a time scrolling down). */
.ops-asset-wrap{overflow-x:auto;margin-bottom:1.4rem;border:1px solid var(--reef)}
.ops-asset-table{width:100%;border-collapse:collapse;font-size:.85rem;white-space:nowrap}
.ops-asset-table th,.ops-asset-table td{padding:.55rem .9rem;text-align:left;border-bottom:1px solid var(--reef)}
.ops-asset-table thead th{font:600 .68rem var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);border-bottom:1px solid var(--reef2)}
.ops-asset-table tbody th{color:var(--muted);font-weight:400;font-size:.8rem}
.ops-asset-table td{font-family:var(--font-mono);color:var(--white)}
.ops-asset-table tr:last-child td,.ops-asset-table tr:last-child th{border-bottom:0}
.ops-asset-table td.negative{color:var(--coral)}
.ops-asset-table .tag.supported{color:var(--mint);background:#33c08422;border-color:transparent}
.ops-asset-table .tag.candidate{color:var(--muted);background:var(--deep);border-color:var(--reef2)}

@media(max-width:760px){.ops-vitals{gap:1rem 1.4rem}.ops-vitals-status{padding-right:1rem;border-right:0}}
@media(max-width:560px){.ops-row{flex-direction:column;gap:.15rem}.ops-row strong{text-align:left}}

/* ---------- section depth rhythm: every page used to sit on one flat --abyss surface from nav to
   footer, with only a 1px hairline between sections -- the main reason the site read as dull
   rather than alive. Full-bleed so the tone change reaches the viewport edge even though the
   section's own content stays inside the centered .wrap.
   Deliberately placed at the very end of the file, after every component rule: a real bug (found
   live, not in review) was `.home-section{padding:7rem 0}`'s shorthand -- equal specificity to
   `.tone-deep`'s own padding-left/right, defined later in source order -- silently zeroing this
   rule's left/right padding back out, so tone-deep sections rendered flush against the viewport
   edge with no inset at all. A utility class that overrides padding on other component classes
   must be the last word in the cascade, not rely on never gaining a same-specificity competitor
   somewhere earlier in the file. */
.tone-deep{background:var(--shoal);margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}
.tone-deep+.tone-deep{border-top:0}

/* ---------- /faq: a calm, scannable disclosure pattern instead of a wall of cards ---------- */
.faq-index{display:flex;flex-wrap:wrap;gap:.55rem;margin:2.4rem 0 4rem;padding-bottom:1rem;border-bottom:1px solid var(--reef)}
.faq-index a{display:inline-flex;align-items:center;gap:.6rem;padding:.65rem .85rem;border:1px solid var(--reef);border-radius:2px;color:var(--text);font-size:.82rem;text-decoration:none;transition:border-color .2s ease,background .2s ease}
.faq-index a:hover,.faq-index a:focus-visible{border-color:var(--brass);background:var(--deep2);color:var(--white)}
.faq-index span{color:var(--brass);font:600 .65rem var(--font-mono);letter-spacing:.08em}
.faq-group{max-width:60rem;margin:0 0 5rem;scroll-margin-top:6rem}
.faq-group-head{display:grid;grid-template-columns:minmax(14rem,.8fr) 1.2fr;gap:2rem;align-items:end;margin-bottom:1.2rem}
.faq-group-head .eyebrow{margin-bottom:.35rem}
.faq-group-head h2{margin:0;font-size:clamp(1.7rem,3vw,2.5rem)}
.faq-group-head p{margin:0 0 .25rem;color:var(--muted);font-size:.92rem;line-height:1.5}
.faq-list{border-top:1px solid var(--reef)}
.faq-item{border-bottom:1px solid var(--reef)}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.2rem 0;cursor:pointer;list-style:none;color:var(--white);font-size:1rem;font-weight:500}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary b{display:grid;place-items:center;width:1.5rem;height:1.5rem;flex:none;border:1px solid var(--reef2);border-radius:50%;color:var(--brass);font:400 1.1rem/1 var(--font-body);transition:transform .2s ease,background .2s ease}
.faq-item[open] summary b{transform:rotate(45deg);background:var(--deep2)}
.faq-item summary:focus-visible{outline:2px solid var(--brass);outline-offset:4px}
.faq-answer{max-width:49rem;padding:0 3rem 1.4rem 0;color:var(--text);font-size:.94rem;line-height:1.7}
.faq-answer p{margin:0}
@media(max-width:700px){.faq-index{margin-bottom:3rem}.faq-group-head{grid-template-columns:1fr;gap:.3rem}.faq-group{margin-bottom:3.8rem}.faq-item summary{font-size:.95rem}.faq-answer{padding-right:1rem}}

/* Liquidation Watch: aggregate price-level clusters, deliberately distinct from participant events. */
/* ---------- Liquidation Watch (product/LIQUIDATION-WATCH-SPEC.md) ----------
   Long/short zone colour reuses the site's existing .tag.long/.tag.short mint/coral pairing --
   not a new palette for this page. Fill strength on a bar means zero-free-collateral share and is
   always restated as a real figure in the ranked table, never left as an unlabelled visual. */
.liq-market{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin:1.4rem 0 0;color:var(--muted);font:600 .74rem var(--font-mono);text-transform:uppercase;letter-spacing:.06em}
.liq-market small{text-transform:none;letter-spacing:0;font-size:.78rem;font-family:var(--font-body)}
.liq-chart{margin-top:2rem}
.liq-bar.long{fill:var(--mint)}
.liq-bar.short{fill:var(--coral)}
.liq-bar:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.liq-mark{stroke:var(--white);stroke-width:1.5;stroke-dasharray:3 3}
.liq-table-section{margin:3rem 0}
.liq-table-wrap{overflow-x:auto;border:1px solid var(--reef);border-radius:3px;background:var(--deep)}
.liq-table{width:100%;border-collapse:collapse;font-size:.88rem}
.liq-table th{text-align:left;padding:.85rem 1rem;border-bottom:1px solid var(--reef);color:var(--muted);font:600 .64rem var(--font-mono);text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
.liq-table td{padding:.8rem 1rem;border-bottom:1px solid var(--reef);color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.liq-table tbody tr:last-child td{border-bottom:0}
.liq-table tbody tr:hover{background:#ffffff04}
/* Column-weight hierarchy: price/distance/notional are what actually drives a trading decision,
   wallet count and defense stats are supporting context. All seven columns previously rendered at
   identical mono weight and colour, so nothing told the eye which three numbers mattered most. */
.liq-table .liq-emphasis{color:var(--white);font-weight:500}
.liq-table .liq-secondary{color:var(--muted);font-size:.85rem}
.liq-table .liq-secondary .muted{font-size:.82rem}
.liq-limits{margin:3rem 0;padding:1.8rem 1.9rem;border:1px solid var(--reef);border-radius:4px;background:var(--deep)}
.liq-limits h2{font-size:1.5rem;margin:0 0 .9rem}
.liq-lower-bound{color:var(--white);margin:0 0 1.4rem}
.liq-limits>div{padding-top:1.2rem;border-top:1px solid var(--reef);margin-top:1.2rem}
.liq-limits ul{margin:.6rem 0 0;padding-left:1.1rem;color:var(--text)}
.liq-limits li{margin-bottom:.45rem}
.liq-limits dl{margin:.6rem 0 0}
.liq-limits dt{color:var(--white);font:600 .82rem var(--font-mono);text-transform:uppercase;letter-spacing:.05em;margin-top:.8rem}
.liq-limits dd{margin:.3rem 0 0;color:var(--text);font-size:.9rem}
.liq-actions{margin:3rem 0 4rem}
.liq-actions h2{font-size:clamp(1.7rem,2.6vw,2.2rem);margin:.5rem 0 1.4rem}
.liq-action-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.9rem}
.liq-action-grid .feature{text-decoration:none;color:var(--text)}
.liq-action-grid .feature:hover{border-color:var(--cyan);color:var(--text)}
@media(max-width:700px){.liq-table th,.liq-table td{padding:.7rem}}

/* ---------- dashboard first run (product/DASHBOARD-AUDIT-SPEC.md F5) ----------
   Shown only when nothing is watched yet, replacing four zero metrics and two stacked empty
   states that could not say anything true before the first watch exists. */
.watch-firstrun{margin:2.4rem 0 3.4rem}
.watch-firstrun h2{font-family:var(--font-display);font-weight:500;font-size:clamp(1.9rem,3vw,2.5rem);margin:.5rem 0 .9rem}
.watch-firstrun p{max-width:44rem;margin:0 0 2rem}
.firstrun-routes{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem}
/* A first-run moment earns more presence than the same .feature card used mid-page elsewhere
   (.liq-action-grid etc.) -- a thin top accent in the site's one accent color, an icon that names
   the route before the reader hits the copy, and room for the card to breathe. Still the same
   border/radius/background language as every other .feature card, not a foreign component. */
.firstrun-routes .feature{position:relative;text-decoration:none;color:var(--text);padding-top:1.7rem;overflow:hidden}
.firstrun-routes .feature:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--cyan);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.firstrun-routes .feature:hover{border-color:var(--reef2);color:var(--text)}
.firstrun-routes .feature:hover:before{transform:scaleX(1)}
.firstrun-icon{display:block;width:22px;height:22px;color:var(--cyan);margin-bottom:.9rem}
/* A saved rule that cannot be delivered must not look like an armed one (F1). */
.tag.stale{color:var(--amber);border-color:var(--amber)}
.tag.stale a{color:inherit;text-decoration:underline}

/* Market (cohort) rules -- the Pro+ workflow. The locked state is deliberately shown to every
   plan: a panel that explains what the tier does converts better than an absent one, and stays
   honest as long as it never looks active. */
.watch-cohorts{margin:0 0 5rem}
.cohort-list{list-style:none;margin:0 0 1.4rem;padding:0;border-top:1px solid var(--reef)}
.cohort-list li{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:.9rem .15rem;border-bottom:1px solid var(--reef)}
.cohort-list strong{display:block;color:var(--white);font-size:.95rem}
.cohort-list span{display:block;margin-top:.2rem;color:var(--muted);font-size:.82rem}
.cohort-empty{margin:0 0 1.4rem;font-size:.9rem}
.cohort-form{border:1px solid var(--reef);background:var(--deep);padding:1.4rem;border-radius:4px}
.cohort-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:.4rem}
.cohort-locked{border:1px dashed var(--reef2);background:transparent;padding:1.6rem;border-radius:4px}
.cohort-locked>p{margin:0 0 .9rem;color:var(--muted);font-size:.9rem}
.cohort-locked .tier-list{margin-bottom:1.2rem}
@media(max-width:760px){.cohort-row{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.cohort-row{grid-template-columns:1fr}.cohort-list li{flex-direction:column;align-items:flex-start;gap:.6rem}}