:root{
  --bg:#FFFFFF; --band:#F6F8FB; --surface:#FFFFFF; --surface-2:#EEF2F7; --canvas:#F8FAFD;
  --navy:#0A2540; --navy-2:#0E2E50;
  --ink:#0A2540; --ink-2:#425466; --muted:#6B7C93; --hairline:#E3E8EE; --hairline-2:#D5DCE5;
  --accent:#0099ff; --accent-text:#0A6FBF; --btn:#0A6FBF; --btn-hover:#0A5FA6;
  --accent-soft:rgba(0,153,255,.08); --accent-line:rgba(10,111,191,.22);
  --good:#0C8F63; --good-soft:rgba(12,143,99,.10);
  --bad:#C4344B;  --bad-soft:rgba(196,52,75,.10);
  --shadow-s:0 1px 2px rgba(10,37,64,.06), 0 1px 3px rgba(10,37,64,.05);
  --shadow-m:0 2px 6px rgba(10,37,64,.06), 0 12px 28px -12px rgba(10,37,64,.20);
  --rb:10px; --rc:14px;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
  --maxw:1280px;
  --logo-filter:none;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#081019; --band:#0B1522; --surface:#0E1826; --surface-2:#16212F; --canvas:#0B1420;
    --navy:#0C1E36; --navy-2:#123056;
    --ink:#EAF1F8; --ink-2:#AEBFD1; --muted:#7089A0; --hairline:#1C2A3A; --hairline-2:#25384C;
    --accent:#38ABFF; --accent-text:#6FC1FF; --btn:#0A6FBF; --btn-hover:#0A7ED6;
    --accent-soft:rgba(56,171,255,.12); --accent-line:rgba(56,171,255,.30);
    --good:#33C48E; --good-soft:rgba(51,196,142,.14);
    --bad:#FF6B81;  --bad-soft:rgba(255,107,129,.14);
    --shadow-s:0 1px 3px rgba(0,0,0,.4);
    --shadow-m:0 2px 8px rgba(0,0,0,.4), 0 14px 30px -14px rgba(0,0,0,.6);
    --logo-filter:brightness(0) invert(1);
  }
}
:root[data-theme="light"]{
  --bg:#FFFFFF; --band:#F6F8FB; --surface:#FFFFFF; --surface-2:#EEF2F7; --canvas:#F8FAFD;
  --navy:#0A2540; --navy-2:#0E2E50; --ink:#0A2540; --ink-2:#425466; --muted:#6B7C93;
  --hairline:#E3E8EE; --hairline-2:#D5DCE5; --accent:#0099ff; --accent-text:#0A6FBF;
  --btn:#0A6FBF; --btn-hover:#0A5FA6; --accent-soft:rgba(0,153,255,.08); --accent-line:rgba(10,111,191,.22);
  --good:#0C8F63; --good-soft:rgba(12,143,99,.10);
  --bad:#C4344B;  --bad-soft:rgba(196,52,75,.10);
  --shadow-s:0 1px 2px rgba(10,37,64,.06), 0 1px 3px rgba(10,37,64,.05);
  --shadow-m:0 2px 6px rgba(10,37,64,.06), 0 12px 28px -12px rgba(10,37,64,.20);
  --logo-filter:none;
}
:root[data-theme="dark"]{
  --bg:#081019; --band:#0B1522; --surface:#0E1826; --surface-2:#16212F; --canvas:#0B1420;
  --navy:#0C1E36; --navy-2:#123056; --ink:#EAF1F8; --ink-2:#AEBFD1; --muted:#7089A0;
  --hairline:#1C2A3A; --hairline-2:#25384C; --accent:#38ABFF; --accent-text:#6FC1FF;
  --btn:#0A6FBF; --btn-hover:#0A7ED6; --accent-soft:rgba(56,171,255,.12); --accent-line:rgba(56,171,255,.30);
  --good:#33C48E; --good-soft:rgba(51,196,142,.14);
  --bad:#FF6B81;  --bad-soft:rgba(255,107,129,.14);
  --shadow-s:0 1px 3px rgba(0,0,0,.4);
  --shadow-m:0 2px 8px rgba(0,0,0,.4), 0 14px 30px -14px rgba(0,0,0,.6);
  --logo-filter:brightness(0) invert(1);
}

*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.6;
     -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale}
a{color:inherit; text-decoration:none}
h1,h2{margin:0}
p{margin:0}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}

/* ---------- nav ---------- */
nav{position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--bg) 88%,transparent);
    backdrop-filter:saturate(1.3) blur(12px); -webkit-backdrop-filter:saturate(1.3) blur(12px);
    border-bottom:1px solid var(--hairline)}
nav .wrap{display:flex; align-items:center; gap:16px; height:66px}
.logo-lockup{height:26px; width:auto; display:block; filter:var(--logo-filter)}
.navlinks{margin-left:auto; display:flex; align-items:center; gap:26px}
.navlinks .lnk{font-size:14.5px; color:var(--ink-2); font-weight:550}
.navlinks .lnk:hover{color:var(--ink)}
.navlinks .lnk[aria-current]{color:var(--ink); font-weight:650}
@media(max-width:640px){ .navlinks .lnk{display:none} }
.tgl{display:grid; place-items:center; width:36px; height:36px; border-radius:9px; border:1px solid var(--hairline-2);
     background:transparent; color:var(--ink-2); cursor:pointer; transition:color .18s, border-color .18s, background .18s}
.tgl:hover{color:var(--ink); border-color:var(--accent-line); background:var(--accent-soft)}
.tgl svg{width:17px; height:17px}
:root[data-theme="dark"] .i-sun,  :root:not([data-theme]) .i-sun{display:none}
:root[data-theme="light"] .i-moon{display:none}
:root[data-theme="light"] .i-sun{display:block}
:root[data-theme="dark"] .i-moon{display:block}
@media (prefers-color-scheme: dark){ :root:not([data-theme]) .i-moon{display:block} :root:not([data-theme]) .i-sun{display:none} }
@media (prefers-color-scheme: light){ :root:not([data-theme]) .i-moon{display:none} :root:not([data-theme]) .i-sun{display:block} }

/* ---------- hero ---------- */
.hero{padding:clamp(38px,5.5vw,66px) 0 clamp(24px,3vw,34px)}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11.5px;
         letter-spacing:.16em; text-transform:uppercase; color:var(--accent-text); font-weight:600; margin-bottom:18px}
.dot{width:7px; height:7px; border-radius:50%; background:var(--good); box-shadow:0 0 0 0 var(--good); animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--good) 55%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion: reduce){ .dot{animation:none} }
h1{font-size:clamp(32px,4.6vw,50px); font-weight:800; line-height:1.05; letter-spacing:-.03em}
h1 .b{color:var(--accent-text)}
.hero .sub{font-size:clamp(16.5px,1.7vw,19px); color:var(--ink-2); max-width:52ch; margin-top:16px}

/* ---------- global stat strip ---------- */
.stats{margin-top:34px; display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
       background:var(--hairline); border:1px solid var(--hairline); border-radius:var(--rc); overflow:hidden}
@media(max-width:820px){ .stats{grid-template-columns:repeat(2,1fr)} }
.stat{background:var(--surface); padding:16px 18px}
.stat .k{font-family:var(--mono); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); font-weight:600}
.stat .v{font-size:21px; font-weight:750; letter-spacing:-.02em; margin-top:5px; font-variant-numeric:tabular-nums}
.stat .d{font-size:12.5px; margin-top:2px; color:var(--muted); font-variant-numeric:tabular-nums}

/* ---------- controls ---------- */
.controls{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:34px 0 16px}
.search{position:relative; flex:1 1 260px; max-width:340px}
.search svg{position:absolute; left:13px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--muted); pointer-events:none}
.search input{width:100%; padding:11px 14px 11px 38px; font-family:inherit; font-size:14.5px; color:var(--ink);
              background:var(--surface); border:1px solid var(--hairline-2); border-radius:var(--rb); transition:border-color .18s, box-shadow .18s}
.search input::placeholder{color:var(--muted)}
.search input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
select.cur{padding:11px 32px 11px 13px; font-family:inherit; font-size:14.5px; font-weight:600; color:var(--ink);
           background:var(--surface); border:1px solid var(--hairline-2); border-radius:var(--rb); cursor:pointer;
           appearance:none; -webkit-appearance:none;
           background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7C93' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
           background-repeat:no-repeat; background-position:right 10px center; background-size:13px}
select.cur:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.status{margin-left:auto; display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:11.5px;
        letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:600}
.status.stale{color:var(--bad)}
.status .sdot{width:6px; height:6px; border-radius:50%; background:var(--good); flex:none}
.status.stale .sdot{background:var(--bad)}
.refresh{display:inline-grid; place-items:center; width:32px; height:32px; border-radius:8px; border:1px solid var(--hairline-2);
         background:transparent; color:var(--ink-2); cursor:pointer; transition:color .18s, border-color .18s, background .18s}
.refresh:hover{color:var(--accent-text); border-color:var(--accent-line); background:var(--accent-soft)}
.refresh svg{width:15px; height:15px}
.refresh.spin svg{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- table ---------- */
/* Narrow screens: the card scrolls sideways, so the header cannot be
   viewport-sticky (a scroll container would anchor it 66px inside the card,
   on top of row 1). Wider screens use overflow-x:clip, which still respects
   the border radius but does NOT create a scroll container — so the sticky
   header resolves against the viewport, which is what we want. */
.tablecard{border:1px solid var(--hairline); border-radius:var(--rc); background:var(--surface);
           box-shadow:var(--shadow-s); overflow-x:auto; -webkit-overflow-scrolling:touch}
@media(min-width:660px){ .tablecard{overflow-x:clip} }
table{width:100%; border-collapse:collapse; min-width:640px; table-layout:auto}
thead th{position:static; z-index:5; background:var(--canvas); border-bottom:1px solid var(--hairline);
         font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
         font-weight:650; text-align:right; padding:12px 13px; white-space:nowrap}
thead th.l{text-align:left}
@media(min-width:660px){ thead th{position:sticky; top:67px} } /* 66px nav + 1px border */
thead th button{all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:5px; font:inherit; color:inherit; letter-spacing:inherit}
thead th button:hover{color:var(--ink)}
thead th[aria-sort] button{color:var(--accent-text)}
.caret{width:9px; height:9px; opacity:0; transition:opacity .15s, transform .15s}
th[aria-sort] .caret{opacity:1}
th[aria-sort="ascending"] .caret{transform:rotate(180deg)}
tbody td{border-bottom:1px solid var(--hairline); padding:13px 13px; text-align:right; white-space:nowrap;
         font-variant-numeric:tabular-nums; font-size:14.5px}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background .12s}
tbody tr:hover{background:var(--canvas)}
td.rank{text-align:right; color:var(--muted); font-family:var(--mono); font-size:12.5px; width:1%}
td.coin{text-align:left; max-width:210px}
.cwrap{display:flex; align-items:center; gap:11px}
.cwrap img{width:26px; height:26px; border-radius:50%; flex:none; background:var(--surface-2)}
.cmeta{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cname{font-weight:650; letter-spacing:-.01em}
.csym{font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:600}
td.price{font-weight:650; letter-spacing:-.01em}
.chg{font-weight:650}
.chg.up{color:var(--good)} .chg.down{color:var(--bad)} .chg.flat{color:var(--muted)}
.chg .arw{font-size:9px; vertical-align:1px; margin-right:1px}
td.cap,td.vol{color:var(--ink-2)}
td.sparkcell{width:116px; padding-right:16px}
td.sparkcell svg{display:block; margin-left:auto; width:100px; height:34px; overflow:visible}
@media(max-width:1180px){ .c-1h{display:none} }
@media(max-width:1020px){ .c-vol{display:none} }
/* Phones: keep it to the four columns that matter — #, coin, price, 24h. */
@media(max-width:620px){
  .sparkcell, .c-spark, .c-7d, .c-cap, .c-rank, td.rank{display:none}
  table{min-width:0}
  thead th, tbody td{padding-left:8px; padding-right:8px}
  td.coin{max-width:150px}
  .cwrap{gap:9px}
  .cwrap img{width:24px; height:24px}
  tbody td{font-size:14px}
  /* stack name over ticker so the name gets the full column width */
  .cmeta{display:flex; flex-direction:column; line-height:1.25}
  .cmeta > span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .csym{font-size:10.5px}
}

/* skeleton */
.sk{display:inline-block; height:11px; border-radius:5px; background:var(--surface-2); animation:sh 1.4s ease-in-out infinite}
@keyframes sh{0%,100%{opacity:.55}50%{opacity:1}}
@media (prefers-reduced-motion: reduce){ .sk{animation:none} .refresh.spin svg{animation:none} }

/* empty / error */
.note{padding:44px 24px; text-align:center; color:var(--muted); font-size:15px}
.note b{display:block; color:var(--ink); font-size:16.5px; font-weight:700; margin-bottom:6px}
.note button{margin-top:16px; font-family:inherit; font-weight:650; font-size:14.5px; padding:10px 20px;
             border-radius:var(--rb); border:none; color:#fff; background:var(--btn); cursor:pointer}
.note button:hover{background:var(--btn-hover)}

.disclaim{margin:18px 0 0; font-size:12.5px; color:var(--muted); max-width:78ch}

/* ---------- footer ---------- */
footer{margin-top:clamp(56px,7vw,88px); border-top:1px solid var(--hairline); background:var(--band)}
footer .wrap{padding-top:38px; padding-bottom:42px; display:flex; flex-wrap:wrap; gap:26px; align-items:flex-start}
.fbrand{max-width:34ch}
.fbrand .tag{margin-top:12px; font-size:14px; color:var(--ink-2)}
.fmeta{margin-left:auto; text-align:right; font-size:13px; color:var(--muted); display:grid; gap:6px}
@media(max-width:660px){ .fmeta{margin-left:0; text-align:left} }
.fmeta a{color:var(--accent-text); font-weight:600}
.fmeta a:hover{text-decoration:underline}
.fine{margin-top:26px; padding-top:22px; border-top:1px solid var(--hairline); font-size:12px; color:var(--muted); line-height:1.6}

/* =========================================================================
   Platform pages — home, coins index, coin detail
   ========================================================================= */

.hero.slim{padding-bottom:8px}
.navlinks .lnk.soon{color:var(--muted); cursor:default; position:relative}
.navlinks .lnk.soon::after{content:"soon"; position:absolute; top:-9px; right:-24px;
  font-family:var(--mono); font-size:8.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent-text); background:var(--accent-soft); padding:2px 5px; border-radius:4px}
@media(max-width:860px){ .navlinks .lnk.soon{display:none} }

/* coin name is a link inside the table */
a.cwrap{color:inherit}
a.cwrap:hover .cname{color:var(--accent-text)}

/* price tick flash on live refresh */
td.price.tick{animation:tick 1s ease-out}
@keyframes tick{0%{background:var(--accent-soft)}100%{background:transparent}}
@media (prefers-reduced-motion: reduce){ td.price.tick{animation:none} }

/* ---------- home ---------- */
.band-sec{border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
  background:var(--band); padding:26px 0}
.minicards{display:grid; grid-template-columns:repeat(6,1fr); gap:1px; background:var(--hairline);
  border:1px solid var(--hairline); border-radius:var(--rc); overflow:hidden}
@media(max-width:1000px){ .minicards{grid-template-columns:repeat(3,1fr)} }
@media(max-width:560px){ .minicards{grid-template-columns:repeat(2,1fr)} }
.minicard{background:var(--surface); padding:14px 14px 10px; display:block; transition:background .15s}
.minicard:hover{background:var(--canvas)}
.mtop{display:flex; align-items:center; gap:7px}
.mtop img{width:22px; height:22px; border-radius:50%; flex:none}
.mtop .csym{font-size:11.5px}
.mtop .chg{margin-left:auto; font-size:11.5px}
.mprice{margin-top:8px; font-weight:700; font-size:16px; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.mspark{margin-top:6px; height:40px}
.mspark svg{width:100%; height:40px; display:block}

.what{padding:clamp(64px,8vw,104px) 0}
.what h2{margin-top:6px}
.whatgrid{margin-top:46px; display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
@media(max-width:900px){ .whatgrid{grid-template-columns:1fr} }
.wcard{border:1px solid var(--hairline); border-radius:var(--rc); background:var(--surface);
  padding:26px 24px; box-shadow:var(--shadow-s)}
.wcard.live{border-color:var(--accent-line)}
.wcard h3{margin:14px 0 10px; font-size:20px; font-weight:750; letter-spacing:-.02em}
.wcard p{color:var(--ink-2); font-size:15.5px; margin-bottom:16px}
.wtag{display:inline-flex; align-items:center; font-family:var(--mono); font-size:10px;
  letter-spacing:.12em; text-transform:uppercase; font-weight:650; padding:4px 9px; border-radius:5px;
  color:var(--good); background:var(--good-soft)}
.wtag.soon{color:var(--muted); background:var(--surface-2)}

/* ---------- coin detail ---------- */
.coinpage{padding-bottom:20px}
.crumbs{padding:26px 0 0; font-size:13.5px; color:var(--muted)}
.crumbs a{color:var(--accent-text); font-weight:600}
.crumbs a:hover{text-decoration:underline}
.crumbs span[aria-hidden]{margin:0 6px; opacity:.6}

.coinhead{display:flex; align-items:center; gap:18px; padding:26px 0 30px; flex-wrap:wrap}
.coinlogo{width:56px; height:56px; border-radius:50%; flex:none; background:var(--surface-2)}
.coinid h1{font-size:clamp(26px,3.4vw,38px); font-weight:800; letter-spacing:-.03em; line-height:1.1}
.coinid h1 .csym{font-size:.5em; vertical-align:middle; margin-left:6px}
.coinrank{margin-top:5px; font-family:var(--mono); font-size:11.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); font-weight:600}
.coinprice{margin-left:auto; text-align:right}
@media(max-width:640px){ .coinprice{margin-left:0; text-align:left; width:100%} }
.coinprice .big{font-size:clamp(28px,3.6vw,40px); font-weight:800; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.coinprice .chg{font-size:15px}
.coinprice .win{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin-left:4px}

.chartcard,.bandcard{border:1px solid var(--hairline); border-radius:var(--rc);
  background:var(--surface); box-shadow:var(--shadow-s); padding:22px 24px; margin-bottom:20px}
.charthead{display:flex; align-items:baseline; gap:12px; margin-bottom:14px}
.charthead h2{font-size:14px; font-weight:650; letter-spacing:.02em; color:var(--ink-2)}
.bigspark svg{width:100%; height:220px; display:block}

.bandtop{display:flex; justify-content:space-between; margin-bottom:12px}
.blabel{font-size:12.5px; color:var(--muted)}
.blabel strong{color:var(--ink); font-weight:650; font-variant-numeric:tabular-nums; margin-left:4px}
.band{position:relative; height:6px; border-radius:3px; background:var(--surface-2); overflow:visible}
.bandfill{position:absolute; inset:0 auto 0 0; border-radius:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-text))}
.bandpin{position:absolute; top:50%; width:13px; height:13px; margin-left:-6.5px; border-radius:50%;
  transform:translateY(-50%); background:var(--surface); border:2.5px solid var(--accent-text)}

.factgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hairline);
  border:1px solid var(--hairline); border-radius:var(--rc); overflow:hidden; margin-bottom:20px}
@media(max-width:820px){ .factgrid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:480px){ .factgrid{grid-template-columns:1fr} }
.fact{background:var(--surface); padding:18px 20px}
.fact .k{font-family:var(--mono); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted); font-weight:600}
.fact .v{font-size:19px; font-weight:700; letter-spacing:-.02em; margin-top:6px;
  font-variant-numeric:tabular-nums; word-break:break-word}
.fact .v .u{font-size:12px; font-weight:600; color:var(--muted)}
.fact .d{font-size:12.5px; color:var(--muted); margin-top:4px}

.changes{margin-bottom:22px}
.changes h2{font-size:14px; font-weight:650; color:var(--ink-2); margin-bottom:12px}
.changerow{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.cbox{border:1px solid var(--hairline); border-radius:var(--rb); background:var(--surface);
  padding:14px 16px; text-align:center}
.cbox .k{font-family:var(--mono); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted); font-weight:600; margin-bottom:6px}
.cbox .chg{font-size:17px}

/* ---------- pagination ---------- */
.pager{display:flex; align-items:center; justify-content:center; gap:18px; margin:30px 0 10px}
.pagenum{font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); font-weight:600}

/* =========================================================================
   Buttons, text links and section typography.
   These lived in the recovery site's stylesheet and were never part of the
   price board, so they had to be brought across when the pages were shared.
   Without .tlink svg sizing, an inline arrow renders at its default 300x150.
   ========================================================================= */

h2{font-size:clamp(28px,3.8vw,42px); font-weight:800; letter-spacing:-.03em; line-height:1.08; color:var(--ink)}
.kick{font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-text); font-weight:600}
.lead{font-size:clamp(16.5px,1.8vw,19px); color:var(--ink-2); max-width:58ch; line-height:1.55}

.hero-cta{display:flex; flex-wrap:wrap; gap:18px; align-items:center; margin-top:30px}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:inherit;
  font-weight:600; font-size:15px; padding:12px 22px; border-radius:var(--rb);
  border:1px solid transparent; cursor:pointer; text-decoration:none;
  transition:background .18s, transform .15s, box-shadow .2s, border-color .18s, color .18s}
.btn.primary{color:#fff; background:var(--btn); box-shadow:var(--shadow-s)}
.btn.primary:hover{background:var(--btn-hover); transform:translateY(-1px)}
.btn.primary:active{transform:translateY(0)}
.btn.line{color:var(--ink); background:transparent; border-color:var(--hairline-2)}
.btn.line:hover{border-color:var(--accent-text); color:var(--accent-text)}
.btn.lg{padding:14px 26px; font-size:16px}

.tlink{display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:15.5px;
  color:var(--accent-text)}
.tlink svg{width:16px; height:16px; flex:none; transition:transform .18s}
.tlink:hover svg{transform:translateX(3px)}
@media (prefers-reduced-motion: reduce){
  .tlink:hover svg,.btn.primary:hover{transform:none}
}

/* first-deploy empty state — shown until the sync has run once */
.note.nodata{margin:60px 0; border:1px dashed var(--hairline-2); border-radius:var(--rc);
  background:var(--canvas)}