/* ==========================================================================
   FONTS — self-hosted, no CDN, no third-party request.
   Sora for headings (character), Inter for text (legibility).
   Both are variable fonts covering weight 400-800 in one 25/48 KB file.
   ========================================================================== */
@font-face{
  font-family:'Sora'; font-style:normal; font-weight:400 800; font-display:swap;
  src:url('/assets/fonts/sora-var.woff2') format('woff2');
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:400 800; font-display:swap;
  src:url('/assets/fonts/inter-var.woff2') format('woff2');
}

/* ==========================================================================
   ForumCrafts — app.css
   Same design language as the marketing build: #1E5BFF, #F7F9FC, 16px cards.
   ========================================================================== */

:root{
  --blue:#004CFF; --blue-dk:#0040DB; --blue-lt:#EBF1FF;
  --bg:#F7F9FC; --tint:#F3F8FC; --white:#fff;
  --ink:#0A1121; --body:#48566F; --mut:#5A6678; --faint:#636F84;
  --line:#E4E9F2; --line-2:#EDF1F7;
  --green:#0E9F6E; --green-bg:#E7F7F0;
  --amber:#B26A00; --amber-bg:#FFF4E0;
  --red:#C0392B; --red-bg:#FDECEA;
  --violet:#6D4AFF; --violet-bg:#F1EDFF;
  --r-card:16px; --r-btn:10px;
  --shadow:0 1px 2px rgba(11,18,32,.04), 0 8px 24px -12px rgba(11,18,32,.14);
  --shadow-lg:0 2px 4px rgba(11,18,32,.04), 0 24px 48px -16px rgba(11,18,32,.18);
  --ff:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --fh:"Sora","Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
/* overflow-x:hidden creates a scroll container and silently disables position:sticky
   on the header - the nav was declared sticky and never stuck. clip does the same
   horizontal job without breaking sticky. */
html{-webkit-text-size-adjust:100%; overflow-x:clip}
body{overflow-x:clip}
body{
  margin:0; background:var(--bg); color:var(--body);
  font-family:var(--ff); font-size:16px; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{max-width:100%}
a{color:var(--blue); text-decoration:none}
a:hover{color:var(--blue-dk)}
h1,h2,h3,h4{color:var(--ink); margin:0 0 .5em; line-height:1.16; letter-spacing:-.022em; font-weight:800;
  font-family:var(--fh)}
p{margin:0 0 1em}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.9em}
.wrap{width:min(1200px,calc(100% - 48px)); margin-inline:auto}
.muted{color:var(--mut)}
.note{color:var(--faint); font-size:13.5px; margin-top:18px}

/* ---------- topbar + nav ---------- */
.topbar{background:var(--ink); color:#C7D2E4; font-size:13px}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; height:38px}
.topbar b{color:#fff; font-weight:650}
.topbar span{display:inline-flex; align-items:center; gap:7px}
.topbar .dot{width:6px;height:6px;border-radius:50%;background:#3DDC97;box-shadow:0 0 0 3px rgba(61,220,151,.18)}
.topbar a{color:#C7D2E4}
.topbar a:hover{color:#fff}
/* .topbar span is display:inline-flex, so this needs the same specificity to win */
.topbar .only-sm{display:none}
@media(max-width:720px){.topbar .hide-sm{display:none}.topbar .only-sm{display:inline-flex}}

header.nav{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--line)}
.nav-in{display:flex; align-items:center; gap:24px; height:72px}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--fh); font-weight:800; color:var(--ink); font-size:19px; letter-spacing:-.03em}
.brand .mark{width:32px;height:32px;border-radius:9px;background:var(--blue); display:grid;place-items:center; box-shadow:0 6px 16px -6px rgba(30,91,255,.7)}
.brand .mark svg{width:17px;height:17px}
.nav-links{display:flex; align-items:center; gap:4px; margin-left:8px}
.nav-links a{padding:9px 13px; border-radius:9px; color:var(--body); font-size:14.5px; font-weight:550}
.nav-links a:hover{background:var(--bg); color:var(--ink)}
.nav-links a.active{color:var(--blue); background:var(--blue-lt)}
.nav-right{margin-left:auto; display:flex; align-items:center; gap:10px}
.burger{display:none; margin-left:auto; width:42px;height:42px; border:1px solid var(--line);
  background:#fff; border-radius:10px; align-items:center; justify-content:center; cursor:pointer}
.burger svg{width:20px;height:20px;stroke:var(--ink)}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:46px; padding:0 22px; border-radius:var(--r-btn); font-weight:650; font-size:15px;
  border:1px solid transparent; cursor:pointer; font-family:inherit; transition:.16s ease; white-space:nowrap}
.btn .ico{width:17px;height:17px}
.btn-primary{background:var(--blue); color:#fff; box-shadow:0 8px 20px -10px rgba(30,91,255,.8)}
.btn-primary:hover{background:var(--blue-dk); color:#fff; transform:translateY(-1px)}
.btn-ghost{background:#fff; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:#CBD6E8; color:var(--ink)}
.btn-white{background:#fff; color:var(--ink)}
.btn-white:hover{color:var(--blue-dk)}
.btn-block{width:100%}
.btn-sm{height:36px; padding:0 14px; font-size:13.5px; border-radius:8px}
.btn-danger{background:var(--red-bg); color:var(--red); border-color:#F5C9C3}
.btn-danger:hover{background:#FBDBD7; color:var(--red)}
.link-arrow{display:inline-flex; align-items:center; gap:7px; font-weight:650; font-size:15px}
.link-arrow svg{width:15px;height:15px}

/* ---------- hero ---------- */
.hero{padding:64px 0 56px}
.hero-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
.eyebrow{font-family:var(--fh); font-size:12.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--blue); margin:0 0 14px}
.hero h1{font-size:clamp(34px,3.4vw,54px); letter-spacing:-.035em; margin-bottom:20px}
.hero h1 .accent{display:block; color:var(--blue)}
@media(min-width:1101px){.hero h1 .accent{white-space:nowrap}}
.lede{font-size:18px; line-height:1.6; color:var(--body); max-width:44ch; margin-bottom:28px}
.hero-cta{display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-bottom:26px}
.trust{display:flex; align-items:flex-start; gap:9px; font-size:13.5px; color:var(--mut); max-width:46ch}
.trust svg{width:17px; height:17px; color:var(--green); flex:none; margin-top:2px}
.trust span{display:block}
@media (max-width:620px){ .hero h1{font-size:clamp(28px,7.6vw,34px)} .trust{font-size:13px} }

/* hero art */
.hero-art{position:relative; min-height:440px}
.hero-art{overflow:visible}
.blob{position:absolute; border-radius:50%; filter:blur(6px); opacity:.5; pointer-events:none}
.b1{width:230px;height:230px; right:-8px; top:-30px; background:radial-gradient(circle,#C9DBFF,transparent 70%)}
.b2{width:260px;height:260px; left:-18px; bottom:-50px; background:radial-gradient(circle,#DCE7FF,transparent 70%)}
.dots{position:absolute; inset:0;
  background-image:radial-gradient(#CBD6E8 1px, transparent 1px); background-size:22px 22px;
  mask-image:radial-gradient(circle at 60% 40%, #000, transparent 72%); opacity:.5}
.window{position:relative; background:#fff; border:1px solid var(--line); border-radius:18px;
  box-shadow:var(--shadow-lg); overflow:hidden; transform:rotate(-.4deg)}
.win-bar{display:flex; align-items:center; gap:6px; padding:11px 14px; border-bottom:1px solid var(--line-2); background:#FBFCFE}
.win-bar i{width:9px;height:9px;border-radius:50%;background:#E1E7F1}
.win-bar b{margin-left:8px; font-size:11.5px; font-weight:600; color:var(--faint); letter-spacing:.02em}
.win-body{display:grid; grid-template-columns:132px 1fr}
.win-side{border-right:1px solid var(--line-2); padding:12px 10px; background:#FBFCFE}
.side-head{display:flex; align-items:center; gap:7px; font-size:11.5px; font-weight:750; color:var(--ink); padding:2px 4px 12px}
.side-head .dot{width:17px;height:17px;border-radius:5px;background:var(--blue); display:grid;place-items:center}
.side-item{display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:7px;
  font-size:11.5px; color:var(--mut); font-weight:550; margin-bottom:2px}
.side-item svg{width:13px;height:13px}
.side-item.on{background:var(--blue-lt); color:var(--blue); font-weight:700}
.win-main{padding:16px 18px 18px}
.win-h{display:flex; align-items:center; gap:8px; margin-bottom:4px}
.win-h h3{font-size:15px; margin:0; letter-spacing:-.02em}
.beta{font-size:9.5px; font-weight:800; letter-spacing:.08em; color:var(--green); background:var(--green-bg); padding:3px 6px; border-radius:5px}
.win-sub{font-size:11.5px; color:var(--faint); margin:0 0 12px; line-height:1.5}
.panel{background:#FBFCFE; border:1px solid var(--line-2); border-radius:10px; padding:11px 12px; margin-bottom:9px}
.panel-top{display:flex; align-items:center; justify-content:space-between; gap:10px}
.lbl{font-size:10px; font-weight:750; letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}
.hint{font-size:11.5px; color:var(--body); font-weight:600; margin-top:2px}
.select{font-size:10.5px; border:1px solid var(--line); background:#fff; border-radius:6px; padding:4px 8px; color:var(--mut)}
.rule{display:flex; align-items:flex-start; gap:9px; padding:9px 10px; border-radius:9px; border:1px solid var(--line-2);
  background:#fff; margin-bottom:6px; align-items:center}
.rule-ic{width:24px;height:24px;border-radius:7px;background:var(--blue-lt); color:var(--blue); display:grid;place-items:center; flex:none}
.rule-ic svg{width:13px;height:13px}
.rule-t{display:flex; flex-direction:column; font-size:11px; line-height:1.35; flex:1}
.rule-t b{color:var(--ink); font-weight:650; font-size:11.5px}
.rule-t span{color:var(--faint)}
.tag-obs{font-size:9px; font-weight:750; color:var(--green); background:var(--green-bg); padding:2px 6px; border-radius:4px}
.art-note{position:absolute; left:2px; bottom:-30px; font-size:11.5px; color:var(--faint); margin:0;
  max-width:46%; line-height:1.4}
.art-fine{position:absolute; right:2px; bottom:-30px; font-size:11px; color:var(--faint); margin:0;
  max-width:52%; text-align:right; line-height:1.4}

/* ---------- strip ---------- */
.strip{background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.strip .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding:18px 0}
.feat{display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:600; color:var(--body)}
.feat svg{width:18px;height:18px;color:var(--blue); flex:none}

/* ---------- sections ---------- */
section{padding:66px 0}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:34px; flex-wrap:wrap}
.sec-head h1,.sec-head h2{font-size:clamp(28px,3vw,38px); margin-bottom:10px}
.sec-head h1{font-weight:700; letter-spacing:-.025em; line-height:1.1}
.sec-head .accent{color:var(--blue)}
.sec-sub{color:var(--mut); max-width:56ch; margin:0}
.approach{background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.appr-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:start}
.steps{display:grid; gap:18px}
.step{display:flex; gap:16px}
.step .num{font-size:12px; font-weight:800; color:var(--blue); background:var(--blue-lt);
  border-radius:8px; padding:6px 9px; height:fit-content; letter-spacing:.04em}
.step b{display:block; color:var(--ink); font-size:16px; margin-bottom:3px}
.step p{margin:0; font-size:14.5px; color:var(--mut)}

/* ---------- cards ---------- */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.grid-3 > *{min-width:0}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow);
  display:flex; flex-direction:column; overflow:hidden; transition:.18s ease}
.card:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg); border-color:#D6DFEE}
.card .inner{padding:22px 22px 18px; flex:1}
.card-top{display:flex; gap:13px; align-items:flex-start; margin-bottom:13px; position:relative; padding-right:74px}
.card-top .pill{position:absolute; top:0; right:0}
.card h3{font-size:16.5px; margin:0 0 7px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; letter-spacing:-.02em}
.card p{font-size:14px; color:var(--mut); margin:0; line-height:1.58}
.card-foot{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:13px 22px; border-top:1px solid var(--line-2); background:#FCFDFF}
.tile{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:none}
.tile svg{width:21px;height:21px}
.t-blue{background:var(--blue-lt); color:var(--blue)}
.t-green{background:var(--green-bg); color:var(--green)}
.t-amber{background:var(--amber-bg); color:var(--amber)}
.t-violet{background:var(--violet-bg); color:var(--violet)}
.t-sky{background:#E8F4FD; color:#0A7BB5}
.t-red{background:var(--red-bg); color:var(--red)}
.platforms{display:flex; gap:5px; flex-wrap:wrap}
.pf{font-size:10.5px; font-weight:750; letter-spacing:.07em; color:var(--mut); background:var(--bg);
  border:1px solid var(--line); border-radius:5px; padding:2px 6px}
.pill{font-size:10.5px; font-weight:750; letter-spacing:.02em; border-radius:6px; padding:2px 7px; white-space:nowrap}
.p-free{background:var(--green-bg); color:var(--green)}
.p-prem{background:var(--blue-lt); color:var(--blue)}
.p-beta{background:var(--amber-bg); color:var(--amber)}
.p-new{background:var(--violet-bg); color:var(--violet)}
.p-soon{background:#EFF2F7; color:var(--mut)}
.meta-row{font-size:12.5px; color:var(--faint); font-weight:550}
.dotsep{color:#C9D3E3}
.go{display:inline-flex; align-items:center; gap:5px; font-size:13px; font-weight:700; color:var(--blue)}
.go svg{width:13px;height:13px}
.empty{background:#fff; border:1px dashed var(--line); border-radius:var(--r-card);
  padding:40px; text-align:center; color:var(--mut)}
.empty b{display:block; color:var(--ink); margin-bottom:6px; font-size:17px}

/* CTA band */
.cta-band{background:var(--ink); color:#C7D2E4; padding:0}
.cta-inner{display:flex; align-items:center; justify-content:space-between; gap:30px; padding:48px 0; flex-wrap:wrap}
.cta-inner h2{color:#fff; font-size:clamp(24px,2.6vw,32px); margin-bottom:8px}
.cta-inner p{margin:0; color:#9FB0C8}

/* ---------- filters ---------- */
.tools{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.tools .chips{order:1}
.chips{display:flex; gap:7px; flex-wrap:wrap}
.chip{font-size:13px; font-weight:600; color:var(--mut); background:#fff; border:1px solid var(--line);
  border-radius:8px; padding:7px 13px}
.chip:hover{border-color:#CBD6E8; color:var(--ink)}
.chip.on{background:var(--ink); border-color:var(--ink); color:#fff}
.search{position:relative; display:flex; align-items:center; width:250px; order:2}
.search svg{position:absolute; left:12px; width:16px;height:16px; color:var(--faint)}
.search input{width:100%; height:42px; padding:0 14px 0 36px; border:1px solid var(--line); border-radius:10px;
  font-family:inherit; font-size:14px; background:#fff; color:var(--ink)}
.search input:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,76,255,.14)}

/* ---------- detail ---------- */
.crumbs{font-size:13px; color:var(--faint); margin:0 0 22px}
.crumbs a{color:var(--mut); text-decoration:none}
.crumbs a:hover{color:var(--ink); text-decoration:underline}
.crumbs ol{list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0; padding:0}
.crumbs li{display:inline-flex; align-items:center; gap:6px}
.crumbs .sep{color:#C9D3E3}
.crumbs [aria-current]{color:var(--ink); font-weight:600}
.card-h{font-size:17px; font-weight:700; letter-spacing:-.015em; margin:0 0 6px; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.shelf-nav{margin-top:38px; padding:20px 22px; border:1px solid var(--line); border-radius:16px; background:#fff}
.detail{display:grid; grid-template-columns:minmax(0,1fr) 336px; gap:44px; align-items:start}
.detail-main,.detail-side{min-width:0}
.detail-head{display:flex; gap:16px; align-items:center; margin-bottom:18px}
.detail-h1{font-size:clamp(28px,3.2vw,40px); margin:0 0 10px}
.detail-lede{font-size:17.5px; color:var(--body); line-height:1.6; margin-bottom:22px}
.prose{font-size:15.5px; line-height:1.75; color:var(--body)}
.prose h2,.prose h3{font-size:20px; margin:28px 0 10px}
.prose ul,.prose ol{padding-left:20px}
.prose li{margin-bottom:7px}
.h3{font-size:19px; margin:38px 0 8px}
.sha{display:flex; align-items:flex-start; gap:10px; background:#fff; border:1px solid var(--line);
  border-radius:10px; padding:10px 12px; margin-bottom:6px}
.sha code{flex:1; min-width:0; font-size:12px; color:var(--mut); white-space:normal; overflow-wrap:anywhere;
  word-break:break-all; line-height:1.45; font-variant-numeric:tabular-nums}
.copy{flex:none; font-size:11.5px; font-weight:700; color:var(--blue); background:var(--blue-lt); border:0;
  border-radius:6px; padding:5px 10px; cursor:pointer; font-family:inherit}
.sha-sm{margin-top:10px; padding:8px 10px}
.detail-side{position:sticky; top:96px; display:grid; gap:16px}
.buy-card{background:#fff; border:1px solid var(--line); border-radius:var(--r-card); padding:22px; box-shadow:var(--shadow)}
.buy-price{font-size:32px; font-weight:800; color:var(--ink); letter-spacing:-.03em; line-height:1.1}
.buy-price span{display:block; font-size:12px; font-weight:600; color:var(--faint); letter-spacing:0; margin-top:4px}
.buy-meta{font-size:13px; color:var(--mut); margin:14px 0 18px; padding-bottom:16px; border-bottom:1px solid var(--line-2)}
.buy-fine{font-size:11.5px; color:var(--faint); text-align:center; margin:10px 0 0}
.buy-list{list-style:none; padding:0; margin:20px 0 0; border-top:1px solid var(--line-2); padding-top:16px}
.buy-list li{font-size:12.5px; color:var(--mut); padding-left:20px; position:relative; margin-bottom:8px}
.buy-list li:before{content:""; position:absolute; left:0; top:6px; width:12px; height:12px; border-radius:50%;
  background:var(--green-bg); border:2px solid var(--green)}
.side-card{background:#fff; border:1px solid var(--line); border-radius:var(--r-card); padding:20px}
.side-card h4{font-size:14.5px; margin-bottom:6px}
.side-card p{font-size:13px; margin-bottom:12px}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto; max-width:100%; -webkit-overflow-scrolling:touch; background:#fff; border:1px solid var(--line); border-radius:var(--r-card);
  box-shadow:var(--shadow); margin-bottom:10px}
.tbl{width:100%; border-collapse:collapse; font-size:14px}
.tbl th{text-align:left; font-size:11px; font-weight:750; letter-spacing:.08em; text-transform:uppercase;
  color:var(--faint); padding:13px 16px; border-bottom:1px solid var(--line); background:#FBFCFE; white-space:nowrap}
/* admin tables: every cell sits on the same centre line, and the action column
   is sized to its buttons so a wide label can never wrap a row into two storeys */
.tbl td{padding:13px 16px; border-bottom:1px solid var(--line-2); color:var(--body); vertical-align:middle}
.tbl th:last-child,.tbl td:last-child{width:1%; white-space:nowrap; text-align:right}
.tbl td .go{white-space:nowrap}
.tbl td.nowrap{white-space:nowrap}
/* opt-in narrow columns: shrink to content so the first column gets the room */
.tbl .col-fit{width:1%; white-space:nowrap}
/* the flexible column takes all the slack, so titles stop wrapping and the
   action buttons sit on the right edge instead of floating mid-table */
.tbl .col-grow{width:100%}
/* long admin lists: tighter gutters so every row stays one storey at 1440,
   and a floor so a narrow window scrolls instead of crushing the columns */
.panel-box .table-wrap{overflow-x:auto}
.panel-box .table-wrap .tbl{min-width:960px}
.tbl-compact th,.tbl-compact td{padding:12px}
/* read-only key/value tables: no right-aligned last column, no 1% squeeze */
.tbl-kv th{width:230px}
.tbl-kv td:last-child{width:auto; white-space:normal; text-align:left}
.pay-actions{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:12px}
.pay-actions form{margin:0; display:inline-flex}
.tbl-compact .row-actions{gap:5px}
.tbl-compact .btn-sm{padding:0 11px}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:#FBFCFF}
.tbl code.key{font-size:12px; color:var(--ink); background:var(--bg); padding:2px 6px; border-radius:5px}
.changelog{font-size:13px; max-width:340px}

/* ---------- timeline ---------- */
.timeline{position:relative; padding-left:26px}
.timeline:before{content:""; position:absolute; left:5px; top:8px; bottom:8px; width:2px; background:var(--line)}
.tl-item{position:relative; margin-bottom:18px}
.tl-dot{position:absolute; left:-26px; top:22px; width:12px; height:12px; border-radius:50%;
  background:#fff; border:2.5px solid var(--blue)}
.tl-body{background:#fff; border:1px solid var(--line); border-radius:var(--r-card); padding:18px 20px; box-shadow:var(--shadow)}
.tl-top{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:5px}
.tl-title{font-size:16px; font-weight:750; color:var(--ink); letter-spacing:-.02em}
.tl-meta{font-size:12.5px; color:var(--faint); margin-bottom:10px}
.tl-changelog{font-size:14px; color:var(--body); line-height:1.66}

/* ---------- docs ---------- */
/* ---------- guides ---------- */
.guide-block{margin-bottom:34px}
.guide-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.guide-card{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-card); padding:22px 22px 18px; box-shadow:var(--shadow); text-decoration:none;
  transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease}
.guide-card:hover{border-color:#C5D8FF; box-shadow:var(--shadow-lg); transform:translateY(-2px)}
.guide-card h3{font-size:16.5px; line-height:1.35; margin:6px 0 8px; color:var(--ink)}
.guide-card p{font-size:13.5px; color:var(--mut); line-height:1.6; margin:0 0 16px; flex:1}
.guide-meta{font-size:11px; font-weight:750; letter-spacing:.06em; text-transform:uppercase; color:var(--faint)}
.guide-go{font-size:12.5px; font-weight:700; color:var(--blue); display:inline-flex; align-items:center; gap:5px}
.guide-card svg,.guide-go svg{width:14px; height:14px; flex:0 0 14px; vertical-align:-2px}
.guide-foot{display:grid; gap:10px; margin-top:34px; padding-top:20px; border-top:1px solid var(--line-2)}
.guide-nav{display:block; border:1px solid var(--line); border-radius:10px; padding:12px 14px; background:#fff; text-decoration:none}
.guide-nav span{display:block; font-size:11px; font-weight:750; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); margin-bottom:3px}
.guide-nav b{font-size:14px; color:var(--ink); font-weight:650; line-height:1.4}
.guide-nav:hover{border-color:#C5D8FF}
.guide-nav-next{text-align:right}
.side-card h3{font-size:13px; font-weight:750; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); margin:0 0 12px}
.toc{margin:0; padding-left:0; list-style:none; border-left:2px solid var(--line); }
.toc li{font-size:13.5px; line-height:1.5; margin-bottom:9px; padding-left:11px; margin-left:-2px}
.toc a{color:var(--body); text-decoration:none}
.toc a:hover{color:var(--blue)}
.side-list{list-style:none; margin:0; padding:0}
.side-list li{border-bottom:1px solid var(--line-2); padding:9px 0; font-size:13.5px; display:flex; justify-content:space-between; gap:10px}
.side-list li:last-child{border-bottom:0}
.side-list a{color:var(--ink); text-decoration:none; font-weight:600}
.side-list a:hover{color:var(--blue)}
.prose table{width:100%; border-collapse:collapse; margin:16px 0 20px; font-size:14px}
.prose thead th{text-align:left; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); padding:9px 10px; border-bottom:1px solid var(--line)}
.prose tbody td{padding:11px 10px; border-bottom:1px solid var(--line-2); vertical-align:top; line-height:1.55}
.prose code{background:var(--bg); border:1px solid var(--line); border-radius:5px; padding:1px 5px; color:var(--blue-dk); font-size:.88em}
.prose pre code{background:none; border:0; padding:0; color:inherit}
.prose-guide h2{scroll-margin-top:90px}
.prose-guide a{color:var(--blue); font-weight:600}

.docs-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.doc-card{background:#fff; border:1px solid var(--line); border-radius:var(--r-card); padding:24px; box-shadow:var(--shadow)}
.doc-card h3{font-size:17px; margin-bottom:12px}
.doc-card ol,.doc-card ul{padding-left:19px; margin:0 0 12px}
.doc-card li{font-size:14px; margin-bottom:7px; color:var(--body)}
.doc-card p{font-size:14px; color:var(--mut)}
.doc-card code{background:var(--bg); border:1px solid var(--line); border-radius:5px; padding:1px 5px; color:var(--blue-dk)}
pre{background:var(--ink); color:#D7E2F5; padding:13px 15px; border-radius:10px; overflow-x:auto; font-size:12.5px; margin:0 0 12px}
pre code{background:none; border:0; color:inherit; padding:0}
.prose-page{max-width:820px}

/* ---------- support ---------- */
.support-grid{display:grid; grid-template-columns:1fr 420px; gap:56px; align-items:start}
.support-points{display:grid; gap:14px}
.sp{background:#fff; border:1px solid var(--line); border-radius:12px; padding:15px 18px}
.sp b{display:block; color:var(--ink); font-size:14.5px}
.sp span{font-size:13px; color:var(--mut)}

/* ---------- forms ---------- */
.auth{padding:56px 0 72px}
.auth-wrap{display:flex; justify-content:center}
.auth-card{background:#fff; border:1px solid var(--line); border-radius:var(--r-card); padding:32px;
  box-shadow:var(--shadow); width:100%; max-width:440px}
.auth-h1{font-size:27px; margin-bottom:20px}
.form{display:grid; gap:15px}
.form label{display:grid; gap:7px; font-size:13px; font-weight:650; color:var(--ink)}
.form input,.form textarea,.form select{
  width:100%; height:46px; padding:0 14px; border:1px solid var(--line); border-radius:10px;
  font-family:inherit; font-size:14.5px; color:var(--ink); background:#fff; font-weight:400}
.form textarea{height:auto; padding:12px 14px; line-height:1.6; resize:vertical}
.form input:focus,.form textarea:focus,.form select:focus{outline:none; border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(0,76,255,.14)}
.auth-alt{font-size:13.5px; color:var(--mut); text-align:center; margin:18px 0 0}

/* ---------- Google sign-in ---------- */
.oauth{height:46px; gap:11px; font-weight:650}
.oauth .goog{width:18px; height:18px; flex:none}
.auth-or{display:flex; align-items:center; gap:12px; margin:18px 0 2px;
  color:var(--faint); font-size:11.5px; font-weight:650; letter-spacing:.06em; text-transform:uppercase}
.auth-or::before,.auth-or::after{content:""; flex:1; height:1px; background:var(--line)}
.sec-actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.pill-ok{display:inline-flex; align-items:center; background:var(--green-bg); color:var(--green);
  border-radius:8px; padding:6px 11px; font-size:12px; font-weight:700; letter-spacing:0}
@media(max-width:520px){ .auth-or{font-size:10.5px; letter-spacing:.04em} }

.auth-fine{font-size:11.5px; color:var(--faint); text-align:center; margin:10px 0 0; line-height:1.5}
.alert{border-radius:10px; padding:12px 15px; font-size:13.5px; margin-bottom:16px; font-weight:550}
.alert.bad{background:var(--red-bg); color:var(--red); border:1px solid #F5C9C3}
.alert.ok{background:var(--green-bg); color:var(--green); border:1px solid #BFE9D6}
.alert.warn{background:var(--amber-bg); color:var(--amber); border:1px solid #F7DFB4}
.alert.info{background:var(--blue-lt); color:var(--blue); border:1px solid #CFDDFF}

/* ---------- stats ---------- */
.stat-row{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:34px}
.stat{background:#fff; border:1px solid var(--line); border-radius:var(--r-card); padding:20px 22px; box-shadow:var(--shadow)}
.stat b{display:block; font-size:30px; font-weight:800; color:var(--ink); letter-spacing:-.03em; line-height:1.1}
.stat span{font-size:12.5px; color:var(--faint); font-weight:600}

/* ---------- footer ---------- */
footer.site{background:#fff; border-top:1px solid var(--line); margin-top:20px}
.foot-main{display:grid; grid-template-columns:1.6fr repeat(4,1fr); gap:34px; padding:52px 0 40px}
.foot-brand p{font-size:13.5px; color:var(--mut); max-width:32ch; margin-top:14px}
.foot-col h4{font-size:12px; font-weight:750; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-bottom:14px}
.foot-col a{display:block; font-size:14px; color:var(--body); padding:4px 0}
.foot-col a:hover{color:var(--blue)}
.foot-bot{border-top:1px solid var(--line); padding:18px 0 26px; display:flex; justify-content:space-between;
  gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--faint)}
.foot-bot a{color:var(--mut)}

/* ---------- mobile ---------- */
@media(max-width:1100px){
  .detail{grid-template-columns:1fr 300px; gap:30px}
  .docs-grid{grid-template-columns:repeat(2,1fr)}
  .guide-grid{grid-template-columns:repeat(2,1fr)}
  .support-grid{grid-template-columns:1fr; gap:34px}
}
@media(max-width:1020px){
  /* was overflow-x:hidden, which silently killed position:sticky on the header
     below 1020px (the desktop fix alone left mobile broken). clip keeps the
     horizontal guard without creating a scroll container. */
  body{overflow-x:clip}
  html{overflow-x:clip}
  .blob{display:none}
  .nav-links,.nav-right{display:none}
  .burger{display:flex}
  .nav.open .nav-links{display:flex; position:absolute; left:0; right:0; top:72px; flex-direction:column;
    align-items:stretch; background:#fff; border-bottom:1px solid var(--line); padding:12px 20px 18px; gap:2px;
    box-shadow:var(--shadow-lg)}
  .nav.open .nav-links a{padding:12px 12px}
  .nav.open .nav-right{display:flex; position:absolute; left:0; right:0; top:calc(72px + var(--ml, 260px));
    background:#fff; padding:0 20px 18px; border-bottom:1px solid var(--line); gap:10px}
  .nav.open .nav-right .btn{flex:1; justify-content:center}
  .hero-grid{grid-template-columns:1fr; gap:44px}
  .hero{padding:44px 0}
  .hero-art{min-height:0}
  .appr-grid{grid-template-columns:1fr; gap:30px}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .detail{grid-template-columns:1fr}
  .detail-side{position:static}
  .strip .wrap{grid-template-columns:repeat(2,1fr); gap:14px}
  .foot-main{grid-template-columns:1fr 1fr; gap:30px}
  .stat-row{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .docs-grid{grid-template-columns:1fr; min-width:0}
  .guide-grid{grid-template-columns:1fr}
  .doc-card{min-width:0; overflow-wrap:anywhere}
  pre{max-width:100%}
  .wrap{width:calc(100% - 32px)}
  .grid-3,.docs-grid{grid-template-columns:1fr}
  .sec-head{flex-direction:column; align-items:flex-start; gap:18px}
  .tools{width:100%; align-items:stretch}
  .search{width:100%}
  .split{grid-template-columns:1fr}
  .stat-row{grid-template-columns:1fr}
  section{padding:44px 0}
  .win-body{grid-template-columns:1fr}
  .win-side{display:none}
  /* on a phone the two caption lines stack in the flow instead of chasing the art */
  .art-note,.art-fine{position:static; right:auto; left:auto; bottom:auto; max-width:100%;
    text-align:left; margin:10px 0 0}
  .foot-main{grid-template-columns:1fr}
  .detail-head{flex-direction:column; align-items:flex-start}
  .auth-card{padding:24px}
  .cta-inner{padding:34px 0}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}

/* ==========================================================================
   Admin console
   ========================================================================== */
.adm{display:grid; grid-template-columns:236px minmax(0,1fr); min-height:100vh; background:var(--bg)}
.adm-side{background:var(--ink); padding:20px 14px; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto}
.adm-side .brand{color:#fff; font-size:17px; padding:2px 8px 0}
.adm-tag{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:#6C7C96; margin:6px 8px 18px; font-weight:700}
.adm-nav{display:grid; gap:2px; flex:1; align-content:start}
.adm-nav a{display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:9px; color:#A8B7CC; font-size:13.5px; font-weight:550}
.adm-nav a svg{width:16px;height:16px; opacity:.85; flex:none}
.adm-nav a:hover{background:rgba(255,255,255,.07); color:#fff}
.adm-nav a.on{background:var(--blue); color:#fff; box-shadow:0 8px 20px -10px rgba(30,91,255,.9)}
.adm-foot{border-top:1px solid rgba(255,255,255,.09); padding-top:14px; margin-top:14px; display:grid; gap:7px; font-size:12px; color:#8B9BB4}
.adm-foot a{color:#A8B7CC}
.adm-foot a:hover{color:#fff}
.adm-foot span b{color:#fff}
.adm-out{color:#FF9E93 !important}
.adm-main{min-width:0; display:flex; flex-direction:column}
.adm-top{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 30px;
  background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; flex-wrap:wrap}
.adm-top h1{font-size:20px; margin:0}
.adm-top-r{display:flex; gap:9px}
.adm-body{padding:26px 30px 50px}
.adm .alert{margin-bottom:18px}
.kpi{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:26px}
.kpi-card{background:#fff; border:1px solid var(--line); border-radius:var(--r-card); padding:18px 20px; box-shadow:var(--shadow)}
.kpi-card .k-lab{font-size:11px; font-weight:750; letter-spacing:.08em; text-transform:uppercase; color:var(--faint)}
.kpi-card .k-val{font-size:27px; font-weight:800; color:var(--ink); letter-spacing:-.03em; line-height:1.2; margin-top:4px}
.kpi-card .k-sub{font-size:12px; color:var(--mut); margin-top:2px}
.panel-box{background:#fff; border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow); margin-bottom:22px; overflow:hidden}
.panel-box > h2{font-size:14px; margin:0; padding:15px 20px; border-bottom:1px solid var(--line-2); background:#FBFCFE; display:flex; align-items:center; justify-content:space-between; gap:12px}
.panel-box > h2 span{font-size:12px; font-weight:600; color:var(--faint)}
.panel-box .pad{padding:20px}
.panel-box .tbl th{background:#FBFCFE}
.split-2{display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.form-grid .full{grid-column:1/-1}
.row-actions{display:flex; gap:6px; flex-wrap:nowrap; align-items:center; justify-content:flex-end}
.row-actions form{display:inline-flex; margin:0}
.row-actions .btn{white-space:nowrap}
.badge{font-size:10.5px; font-weight:750; padding:2px 7px; border-radius:6px; background:#EFF2F7; color:var(--mut)}
.b-ok{background:var(--green-bg); color:var(--green)}
.b-warn{background:var(--amber-bg); color:var(--amber)}
.b-bad{background:var(--red-bg); color:var(--red)}
.b-blue{background:var(--blue-lt); color:var(--blue)}
.hintline{font-size:12px; color:var(--faint); margin:-6px 0 4px}
.file-drop{border:1.5px dashed var(--line); border-radius:12px; padding:20px; text-align:center; background:#FBFCFE; font-size:13px; color:var(--mut)}
.file-drop input{margin-top:8px; font-size:13px}
@media(max-width:1000px){
  .adm{grid-template-columns:1fr}
  .adm-side{position:static; height:auto; flex-direction:column}
  .adm-nav{grid-template-columns:repeat(2,1fr); display:grid}
  .adm-body{padding:18px 16px 40px}
  .adm-top{padding:14px 16px}
  .kpi{grid-template-columns:1fr 1fr}
  .split-2,.form-grid{grid-template-columns:1fr}
}

/* ==========================================================================
   Coming-soon teaser
   ========================================================================== */
.cs-body{background:radial-gradient(1200px 600px at 50% -10%, #E8EFFF 0%, #F7F9FC 55%, #F7F9FC 100%)}
.cs-wrap{position:relative; min-height:100vh; display:grid; place-items:center; padding:44px 20px; overflow:hidden}
.cs-dots{position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:radial-gradient(#CFDAEA 1px, transparent 1px); background-size:24px 24px;
  mask-image:radial-gradient(circle at 50% 45%, #000 0%, transparent 70%);
  -webkit-mask-image:radial-gradient(circle at 50% 45%, #000 0%, transparent 70%)}
.cs-card{position:relative; width:100%; max-width:660px; text-align:center; background:#fff;
  border:1px solid var(--line); border-radius:22px; padding:46px 42px 40px; box-shadow:var(--shadow-lg)}
.cs-brand{justify-content:center; font-size:20px; margin-bottom:24px}
.cs-badge{display:inline-flex; align-items:center; gap:8px; background:var(--blue-lt); color:var(--blue);
  font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  border-radius:999px; padding:6px 14px; margin-bottom:20px}
.cs-dot{width:7px; height:7px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 3px rgba(30,91,255,.18);
  animation:cspulse 2.2s ease-in-out infinite}
@keyframes cspulse{0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.55; transform:scale(.85)}}
.cs-h1{font-size:clamp(29px,5vw,42px); line-height:1.14; letter-spacing:-.03em; margin:0 0 16px}
.cs-h1 span{color:var(--blue)}
.cs-p{font-size:16.5px; line-height:1.65; color:var(--mut); max-width:46ch; margin:0 auto 26px}
.cs-links{display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap; margin-bottom:22px}
.cs-fine{font-size:12.5px; color:var(--faint); margin:0}
@media(max-width:620px){.cs-card{padding:34px 22px 30px; border-radius:18px} .cs-h1{font-size:29px}
  .cs-links{gap:14px} .cs-links .btn{width:100%}}

/* admin-only banner shown while the coming-soon page is up */
.admin-preview-bar{background:#FFF4E0; border-bottom:1px solid #F3E0BC; color:#8A5600; font-size:13px;
  text-align:center; padding:9px 16px}
.admin-preview-bar b{color:#6E4400}
.admin-preview-bar a{color:#B26A00; font-weight:700; text-decoration:underline}

/* honeypot: rendered for bots, invisible (and unreachable) for people */
.hp-field{position:absolute!important; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}

/* tiny sparkline used by Admin → Traffic */
.spark{display:flex; align-items:flex-end; gap:6px; height:140px; padding-top:8px}
.spark-col{flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:6px; height:100%}
.spark-bar{width:100%; background:linear-gradient(180deg,#4D80FF,var(--blue)); border-radius:5px 5px 2px 2px; min-height:4px}
.spark-col span{font-size:10px; color:var(--faint); font-weight:650}

/* optional upload block inside the resource form */
.up-box{border:1px solid var(--line); border-radius:14px; background:#FBFCFE; padding:16px 18px 18px; margin-top:4px}
.up-box h4{font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); margin:0 0 4px}
.up-box input[type=file]{padding:9px 12px; height:auto; background:#fff; font-size:13px}

/* admin: inline copy-a-URL row (Backups, integrations) */
.copy-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:#F7F9FD;border:1px solid var(--line);
  border-radius:10px;padding:10px 12px;margin:0 0 10px}
.copy-row code{flex:1 1 260px;min-width:0;font-size:12.5px;color:#233;background:none;border:0;padding:0;
  overflow-wrap:anywhere;word-break:break-word}
.copy-row .btn{flex:0 0 auto}

/* product page: "Install it" panel */
.install-box{background:#F7F9FD;border:1px solid var(--line);border-left:3px solid var(--blue);
  border-radius:12px;padding:16px 18px;margin:8px 0 26px}
.install-box .prose{font-size:14.5px;line-height:1.7;color:var(--body)}
.install-box .prose br{content:""}
.install-box code{font-size:13px}

/* two-factor backup codes */
.keys-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-top:6px}
.keys-grid code{display:block;text-align:center;font-size:14.5px;letter-spacing:.1em;padding:10px 6px;
  background:#F7F9FD;border:1px dashed var(--line);border-radius:9px;color:#1B2437;font-weight:650}
@media(max-width:520px){.keys-grid{grid-template-columns:repeat(2,1fr)}}

/* ---- platform shelves (home) ---- */
.shelf-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.shelf-card{display:flex; align-items:center; gap:12px; padding:18px 20px; border:1px solid var(--line);
  border-radius:16px; background:#fff; text-decoration:none; color:var(--ink); transition:.18s ease}
.shelf-card:hover{border-color:#C9D9FF; box-shadow:0 10px 26px rgba(30,91,255,.08); transform:translateY(-1px)}
.shelf-card b{font-size:15.5px; letter-spacing:-.01em}
.shelf-card span{color:var(--faint); font-size:13px; margin-left:auto}
.shelf-card svg{width:16px; height:16px; color:var(--blue); flex:none}
@media (max-width:900px){.shelf-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.shelf-grid{grid-template-columns:1fr}}
/* ---- related resources (product pages) ---- */
.rel-list{display:grid; gap:10px; margin:14px 0 18px}
.rel-item{display:block; padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:#fff;
  text-decoration:none; color:var(--ink); transition:.16s ease}
.rel-item:hover{border-color:#C9D9FF; background:#FAFCFF}
.rel-item b{display:block; font-size:14.5px; margin-bottom:3px}
.rel-item span{color:var(--mut); font-size:13px; line-height:1.45}

/* ---------- platform finder (home) ---------- */
.plat-sec{padding:54px 0 6px}
.plat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.plat-card{display:flex; align-items:center; gap:14px; padding:17px 20px; background:#fff;
  border:1px solid var(--line); border-radius:14px; color:var(--ink); text-decoration:none;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  box-shadow:0 1px 2px rgba(10,17,33,.03)}
.plat-card:hover{color:var(--ink); border-color:#C5D8FF; transform:translateY(-1px);
  box-shadow:0 14px 30px -16px rgba(0,76,255,.35)}
.plat-ico{width:42px; height:42px; border-radius:11px; display:grid; place-items:center; flex:none}
.plat-ico svg{width:20px; height:20px}
.plat-txt{display:flex; flex-direction:column; gap:1px; min-width:0}
.plat-txt b{font-size:15px; letter-spacing:-.015em; color:var(--ink)}
.plat-txt span{font-size:12.5px; color:var(--mut)}
.plat-meta{margin-left:auto; display:flex; align-items:center; gap:10px; color:var(--faint);
  font-size:12.5px; font-weight:600; white-space:nowrap}
.plat-arrow{width:17px; height:17px; color:#9AA7BC; transition:color .16s ease, transform .16s ease}
.plat-card:hover .plat-arrow{color:var(--blue); transform:translateX(2px)}
@media (max-width:900px){ .plat-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .plat-grid{grid-template-columns:1fr} }

/* ---- catalogue cards: product names are now "<Name> <Kind> for <Platform>",
   so give the title a fixed two-line slot and let it use the pill's gutter ---- */
.card-top{padding-right:0}
.card .platforms{display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.card .platforms .pill{position:static; top:auto; right:auto}
@media (min-width:901px){
  /* catalogue cards: "<Name> <Kind> for <Platform>" — one step down in weight size keeps
     every product name inside two lines, so heads and taglines line up across a row */
  .grid-3 .card h3,
  .grid-3 .card .card-h{min-height:2.7em; align-items:flex-start; font-size:15.5px; line-height:1.28}
}

/* featured band sits on the tinted surface, like the concept */
.featured-sec{background:var(--tint); border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2);
  padding:52px 0 46px; margin-top:44px}
.featured-sec .card{box-shadow:0 1px 2px rgba(10,17,33,.04)}
.clamp2{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.9em}
.card-link{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--blue)}
.card-link svg{width:13px; height:13px}
.hero{padding-bottom:76px}
.appr-grid .sec-sub{max-width:46ch}
.support-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch}
.support-card .card-link{margin-top:auto}
.support-card{background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px 22px;
  display:flex; flex-direction:column; gap:12px; box-shadow:var(--shadow)}
.support-card .plat-ico{width:46px; height:46px; border-radius:13px}
.support-card h3{font-size:16.5px; margin:0}
.support-card p{font-size:14px; color:var(--mut); margin:0; flex:1}
@media (max-width:860px){ .support-grid{grid-template-columns:1fr} }

/* ---------- outlined account pill in the nav ---------- */
.btn-acct{background:#fff; color:var(--ink); border:1px solid var(--line); border-radius:10px;
  padding:9px 15px; font-weight:650; font-size:14px; display:inline-flex; align-items:center; gap:7px}
.btn-acct:hover{border-color:#C5D8FF; color:var(--blue); box-shadow:0 6px 18px -12px rgba(0,76,255,.5)}
.btn-acct .ico{width:13px; height:13px}

/* ---------- product detail: gallery, features, specs, FAQ (added 20261025p1) ---------- */
.shots{display:grid; gap:14px; margin:14px 0 6px}
.shot{margin:0; border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; background:var(--white); box-shadow:var(--shadow)}
.shot a{display:block; line-height:0}
.shot img{display:block; width:100%; height:auto; border:0}
.shot figcaption{font-size:13px; color:var(--mut); padding:9px 14px; border-top:1px solid var(--line-2); background:#FBFCFE; line-height:1.45}
@media (min-width:760px){
  .shots{grid-template-columns:1fr; gap:16px}
  .shots.two-up{grid-template-columns:1fr 1fr}
}
.feat-list{list-style:none; margin:10px 0 0; padding:0; display:grid; gap:9px}
.feat-list li{display:flex; gap:10px; align-items:flex-start; font-size:15.5px; color:var(--body); line-height:1.55}
.feat-list svg{flex:0 0 16px; margin-top:4px; color:var(--green)}
.req-list{margin:10px 0 0; padding-left:20px; color:var(--body); font-size:15.5px}
.req-list li{margin:5px 0}
.specs th{font-weight:650; color:var(--ink); font-size:14px; background:#FAFBFE}
.specs td{font-variant-numeric:tabular-nums}
.faq{margin:12px 0 0; display:grid; gap:0; border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; background:var(--white)}
.faq-item{padding:16px 18px; border-bottom:1px solid var(--line-2)}
.faq-item:last-child{border-bottom:0}
.faq-q{font-size:15.5px; margin:0 0 5px; color:var(--ink); font-weight:750; letter-spacing:-.01em}
.faq-a{margin:0; font-size:15px; color:var(--body); line-height:1.62}

/* ---------- two-factor set-up ---------- */
.totp-setup{display:grid;grid-template-columns:200px 1fr;gap:26px;align-items:start}
.totp-qr{width:200px;height:200px;background:#fff;border:1px solid var(--line, #e3e8ef);border-radius:14px;padding:10px;box-sizing:border-box;display:flex;align-items:center;justify-content:center}
.totp-qr svg{width:100%;height:100%;display:block}
.totp-side{min-width:0}
@media (max-width:640px){.totp-setup{grid-template-columns:1fr}.totp-qr{width:170px;height:170px;margin:0 auto}}

/* ---------- header search (2026-10-25) ---------- */
.nav-search{display:flex;align-items:center;gap:8px;background:#F5F7FB;border:1px solid var(--line);
  border-radius:999px;padding:0 14px;height:40px;width:236px;transition:border-color .15s,background .15s}
.nav-search:focus-within{background:#fff;border-color:var(--blue)}
.nav-search svg{width:15px;height:15px;color:#8A93A3;flex:0 0 auto}
.nav-search input{border:0;background:none;outline:0;font-size:13.5px;color:var(--ink);width:100%;min-width:0;
  font-family:inherit}
.nav-search input::placeholder{color:#77839B}
.nav-search-ico{display:none;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;
  border:1px solid var(--line);color:var(--ink)}
.nav-search-ico svg{width:17px;height:17px}
@media (max-width:1340px){.nav-search{width:206px}}
/* below this the input + Login + Register stop fitting inside the wrap - swap to the round icon */
@media (max-width:1240px){.nav-search{display:none}.nav-search-ico{display:inline-flex}}

/* ---------- hero: real screenshots ---------- */
.hero-shots{position:relative;border-radius:18px;background:#fff;border:1px solid var(--line);
  box-shadow:0 30px 70px -32px rgba(16,34,71,.45);overflow:hidden}
.hs{display:none;margin:0}
.hs.is-on{display:block}
.hs img{display:block;width:100%;height:auto;background:#0d1117;max-height:410px;object-fit:cover;object-position:top center}
.hs figcaption{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;padding:12px 16px;
  border-top:1px solid var(--line);background:#fff}
.hs figcaption b{font-size:14px;color:var(--ink)}
.hs figcaption span{grid-column:1;font-size:12.5px;color:var(--mut)}
.hs figcaption a{grid-column:2;grid-row:1/span 2;display:inline-flex;align-items:center;gap:6px;font-weight:600;
  font-size:13px;color:var(--blue);white-space:nowrap}
.hs figcaption a svg{width:14px;height:14px}
.hs-dots{display:flex;gap:14px;justify-content:center;padding:10px 0 12px;background:#fff}
.hs-dots button{position:relative}
.hs-dots button::after{content:"";position:absolute;left:-8px;right:-8px;top:-11px;bottom:-11px}
.hs-dots button{width:7px;height:7px;border-radius:50%;border:0;padding:0;background:#CBD5E1;cursor:pointer}
.hs-dots button.on{background:var(--blue);width:20px;border-radius:999px}
@media (max-width:640px){.hs img{max-height:260px}.hs figcaption{grid-template-columns:1fr}
  .hs figcaption a{grid-column:1;grid-row:auto;margin-top:6px}}

/* ---------- card thumbnails ---------- */
.card-shot{display:block;overflow:hidden;border-bottom:1px solid var(--line);background:#0d1117}
.card-shot img{display:block;width:100%;height:150px;object-fit:cover;object-position:top center;
  transition:transform .35s ease}
.card:hover .card-shot img{transform:scale(1.03)}
@media (max-width:640px){.card-shot img{height:130px}}

/* ---------- hero v2 fixes ---------- */
.hero-art{display:flex;flex-direction:column;min-height:0}
.hero-art .art-note{position:static;left:auto;right:auto;bottom:auto;margin:12px 0 0;font-size:12px;color:var(--faint)}
.hero-art .art-fine{position:static;left:auto;right:auto;bottom:auto;margin:3px 0 0;font-size:11.5px;color:var(--faint);text-align:left}
.nav-links a{white-space:nowrap}
.card{overflow:hidden}
.hs img{height:420px;object-fit:cover;object-position:top center;max-height:none}
.card-shot img{height:158px;object-position:center 18%}
@media (max-width:640px){.hs img{height:250px}.card-shot img{height:140px}}
.hs img{object-position:center 14%}
.card-shot img{object-position:center top}

/* ---------- documentation: platform sections (2026-10-26) ---------- */
.docs{padding-bottom:10px}
.doc-jump{display:flex; flex-wrap:wrap; gap:10px; margin:6px 0 26px}
.doc-jump a{display:flex; flex-direction:column; gap:2px; padding:10px 14px; border:1px solid var(--line);
  border-radius:12px; background:#fff; box-shadow:var(--shadow); min-width:132px; transition:.16s ease}
.doc-jump a:hover{border-color:var(--blue); transform:translateY(-1px)}
.doc-jump b{font-family:var(--fh); font-size:14px; color:var(--ink); font-weight:700}
.doc-jump span{font-size:12px; color:var(--mut)}
.doc-plat{background:#fff; border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow);
  padding:26px 28px; margin:0 0 20px; scroll-margin-top:90px}
.doc-plat-head{display:grid; grid-template-columns:1fr auto; gap:16px; align-items:start; padding-bottom:16px;
  border-bottom:1px solid var(--line-2); margin-bottom:18px}
.doc-plat-head h2{font-size:26px; margin:0 0 6px}
.doc-plat-head .eyebrow{margin:0 0 8px}
.doc-sum{margin:0; font-size:14.5px; color:var(--body); max-width:64ch}
.doc-sum code,.doc-steps code,.doc-notes code{background:var(--bg); border:1px solid var(--line); border-radius:5px;
  padding:1px 5px; color:var(--blue-dk); font-size:12.5px}
.doc-chips{display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; max-width:280px}
.chip{font-size:11.5px; color:var(--mut); border:1px solid var(--line); border-radius:999px; padding:3px 9px;
  background:var(--bg); white-space:nowrap}
.chip:hover{color:var(--blue); border-color:var(--blue)}
.doc-steps{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.doc-steps li{display:grid; grid-template-columns:34px 1fr; gap:14px; align-items:start}
.doc-steps .num{width:26px; height:26px; border-radius:8px; background:var(--blue-lt); color:var(--blue);
  font-family:var(--fh); font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center;
  margin-top:2px}
.doc-steps h3{font-size:15px; margin:0 0 4px}
.doc-steps p{margin:0; font-size:14px; color:var(--body); line-height:1.6}
.doc-notes{margin-top:18px; padding:14px 16px; border-radius:12px; background:var(--tint);
  border-left:3px solid var(--blue)}
.doc-notes p{margin:0 0 8px; font-size:13.5px; color:var(--body)}
.doc-notes p:last-child{margin-bottom:0}
.doc-shared-h{font-size:22px; margin:34px 0 18px}
@media (max-width:760px){
  .doc-plat{padding:20px 18px}
  .doc-plat-head{grid-template-columns:1fr}
  .doc-chips{justify-content:flex-start; max-width:100%}
  .doc-plat-head h2{font-size:22px}
  .doc-jump a{min-width:calc(50% - 5px)}
}

/* ---------- ratings (2026-10-26) ---------- */
.rating-line{display:flex; align-items:center; gap:8px; margin-top:9px; font-size:13px}
.rating-line .muted{color:var(--mut)}
.rating-line a{font-weight:600}
.rating-line b{color:var(--ink); font-family:var(--fh)}
.stars{display:inline-flex; gap:2px; color:#F5A524; vertical-align:-3px}
.stars svg{display:block}
.stars.lg svg{width:20px; height:20px}
.stars.sm svg{width:13px; height:13px}
.rate-box{border:1px solid var(--line); border-radius:var(--r-card); background:#fff; box-shadow:var(--shadow);
  padding:22px 24px; display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-bottom:22px}
.rate-avg{display:flex; flex-direction:column; gap:6px}
.rate-avg b{font-family:var(--fh); font-size:38px; line-height:1; color:var(--ink)}
.rate-avg .muted{font-size:13px}
.rate-dist{list-style:none; margin:12px 0 0; padding:0; display:grid; gap:5px; max-width:300px}
.rate-dist li{display:grid; grid-template-columns:26px 1fr 26px; gap:8px; align-items:center; font-size:12px; color:var(--mut)}
.rate-dist .bar{height:6px; border-radius:999px; background:var(--line-2); overflow:hidden; display:block}
.rate-dist .bar i{display:block; height:100%; background:#F5A524; border-radius:999px}
.rate-dist .n{text-align:right}
.rate-form{border-left:1px solid var(--line-2); padding-left:26px}
.rate-q{font-size:14px; color:var(--ink); margin:0 0 10px; font-weight:600}
.rate-pick{display:flex; flex-direction:row-reverse; justify-content:flex-end; gap:2px; margin:0 0 12px}
.rate-pick label{cursor:pointer; line-height:1; color:#D6DEEA; padding:2px 3px; transition:color .12s, transform .12s}
.rate-pick label>span[aria-hidden]{font-size:28px; line-height:1; display:block}
.rate-pick label:hover>span[aria-hidden],
.rate-pick label:hover~label>span[aria-hidden],
.rate-pick label:has(input:checked)>span[aria-hidden],
.rate-pick label:has(input:checked)~label>span[aria-hidden]{color:#F5A524}
.rate-pick label:hover{transform:translateY(-1px)}
.rate-pick input{position:absolute; width:1px; height:1px; opacity:0}
.rate-pick label:has(input:focus-visible){outline:2px solid var(--blue); outline-offset:2px; border-radius:6px}
.rate-review{display:block; font-size:12.5px; color:var(--mut); margin-bottom:12px}
.rate-review textarea{display:block; width:100%; margin-top:6px; border:1px solid var(--line); border-radius:10px;
  padding:10px 12px; font:inherit; font-size:13.5px; color:var(--ink); resize:vertical}
.rate-signin p{font-size:14px; margin:0 0 12px}
.rate-list{list-style:none; margin:0 0 24px; padding:0; display:grid; gap:12px}
.rate-list li{border:1px solid var(--line); border-radius:12px; padding:14px 16px; background:#fff}
.rate-head{display:flex; align-items:center; gap:10px; margin-bottom:6px; font-size:13px}
.rate-head b{color:var(--ink)}
.rate-list p{margin:0; font-size:14px; color:var(--body); line-height:1.6}
@media (max-width:820px){
  .rate-box{grid-template-columns:1fr; gap:18px; padding:18px}
  .rate-form{border-left:0; border-top:1px solid var(--line-2); padding-left:0; padding-top:16px}
}

/* ratings: action row (update / remove) */
.rate-actions{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin:.35rem 0 .1rem}
.rate-remove{background:none;border:0;padding:0;font:inherit;font-size:.86rem;color:var(--mut);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.rate-remove:hover{color:var(--ink,#0E1A2B)}

/* ratings: utility + copy alignment */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.rate-form .buy-fine{text-align:left;max-width:none;margin-top:10px}
.rate-avg .stars{color:#F5A524}

/* ---------- home polish (2026-10-26) ---------- */
@media (max-width:620px){
  .plat-card{padding:14px 16px; gap:12px}
  .plat-ico{width:40px; height:40px; border-radius:10px}
  .plat-ico svg{width:19px; height:19px}
  .plat-txt b{font-size:14.5px}
  .plat-txt span{font-size:12px}
}
a:focus-visible, button:focus-visible, .plat-card:focus-visible, .card-link:focus-visible{
  outline:2px solid var(--blue); outline-offset:3px; border-radius:8px}

/* the header links + right cluster fit down to 1080px - collapse earlier than the old 1020 rule */
@media (max-width:1080px){
  .nav-links,.nav-right{display:none}
  .burger{display:flex}
  .nav.open .nav-links{display:flex; position:absolute; left:0; right:0; top:72px; flex-direction:column;
    align-items:stretch; background:#fff; border-bottom:1px solid var(--line); padding:12px 20px 18px; gap:2px;
    box-shadow:var(--shadow-lg)}
  .nav.open .nav-links a{padding:12px 12px}
  .nav.open .nav-right{display:flex; position:absolute; left:0; right:0; top:calc(72px + var(--ml, 260px));
    background:#fff; padding:0 20px 18px; border-bottom:1px solid var(--line); gap:10px}
  .nav.open .nav-right .btn{flex:1; justify-content:center}
}

/* skip link: only visible when tabbed to */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--blue);color:#fff;
  padding:10px 16px;border-radius:0 0 10px 0;font-size:14px;font-weight:650}
.skip-link:focus{left:0;outline:2px solid #fff;outline-offset:-4px}

/* cards with no real screenshot yet: a typographic plate, never a fake screen */
.card-plate{display:grid; place-items:center; gap:9px; height:158px; border-bottom:1px solid var(--line);
  background:linear-gradient(135deg,#0E1A2B 0%,#1B2C46 52%,#24406B 100%); align-content:center}
.card-plate .cp-ico{width:46px; height:46px; border-radius:13px; background:rgba(255,255,255,.10);
  display:grid; place-items:center; color:#9FD0FF}
.card-plate .cp-ico svg{width:22px; height:22px}
.card-plate .cp-txt{font-family:var(--fh); font-size:10.5px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:#93AECB}
@media (max-width:640px){.card-plate{height:130px}}

/* =====================================================================
   DISPLAY TIERS — 720p / 1080p / 1440p / 4K   (2026-10-26)

   Measured before this block existed: the container stopped at 1200px, so
   the site used 63% of a 1920 screen, 47% of a 2560 screen and 31% of a
   3840 screen, with 1320px of empty grey on each side at 4K, and the type
   never grew. Each tier below scales the container, the text and the media
   together, in four measured steps. Nothing here touches <=1100px, which
   was already correct.
   ===================================================================== */

/* the container is a variable now, so a tier moves it in one place */
@media (min-width:721px){ .wrap{width:min(var(--wrap,1200px), calc(100% - 48px))} }

/* --- 1600-1919: big laptops, 1600x900 panels, QHD at 125% ------------ */
@media (min-width:1600px){
  :root{ --wrap:1300px }
  /* 54px at 1600 flowing to 76px at 3000 - one curve, so there is no step at any width.
     The value at 1600 is exactly where the base clamp now tops out. */
  .hero h1{font-size:clamp(54px,1.5714vw + 28.86px,76px)}
  .sec-head h1,.sec-head h2{font-size:40px}
  .lede{font-size:19px}
  .hs img{height:450px}
  .card-shot img,.card-plate{height:176px}
  .plat-card{padding:19px 22px}
  section{padding:76px 0}
}

/* --- 1920-2399: 1080p Full HD, full screen -------------------------- */
@media (min-width:1920px){
  :root{ --wrap:1440px }
  body{font-size:16.5px}
  .sec-head h1,.sec-head h2{font-size:43px}
  .lede{font-size:20px}
  .card h3{font-size:18px}
  .card p{font-size:15px}
  .plat-txt b{font-size:16px}
  .plat-txt span{font-size:13.5px}
  .support-card h3{font-size:18px}
  .support-card p{font-size:15px}
  .hs img{height:480px}
  .card-shot img,.card-plate{height:190px}
  .nav-in{height:78px}
  .topbar .wrap{height:42px}
  .btn{height:48px}
  section{padding:86px 0}
  .foot-main{padding:64px 0 44px}
  .step b{font-size:17px}
}

/* --- 2400-2999: 1440p Quad HD at 100% ------------------------------- */
@media (min-width:2400px){
  :root{ --wrap:1600px }
  body{font-size:17px}
  .sec-head h1,.sec-head h2{font-size:48px}
  .lede{font-size:21px}
  .eyebrow{font-size:13.5px}
  .card h3{font-size:19px}
  .card p,.support-card p{font-size:15.5px}
  .plat-txt b{font-size:17px}
  .plat-txt span{font-size:14px}
  .hs img{height:540px}
  .card-shot img,.card-plate{height:210px}
  .grid-3{gap:24px}
  .btn{font-size:15.5px; height:50px}
  section{padding:96px 0}
  .foot-col a{font-size:14.5px}
}

/* --- 3000+: 4K Ultra HD at 100% ------------------------------------- */
@media (min-width:3000px){
  /* 1760px is where body copy still lands near 95 characters a line -
     wider would look emptier-but-worse to read, so 4K gets a taller
     rhythm instead of a wider column */
  :root{ --wrap:1840px }
  body{font-size:18.5px; line-height:1.7}
  .sec-head h1,.sec-head h2{font-size:54px}
  .lede{font-size:23px; max-width:46ch}
  .card h3{font-size:21px}
  .card p{font-size:16.5px}
  .plat-txt b{font-size:18px}
  .plat-txt span{font-size:15px}
  .plat-card{padding:22px 26px}
  .support-card h3{font-size:20px}
  .support-card p{font-size:16.5px}
  .hs img{height:640px}
  .card-shot img,.card-plate{height:250px}
  .nav-in{height:88px}
  .nav-links a{font-size:16px; padding:10px 15px}
  .nav-search{width:300px; height:46px}
  .nav-search input{font-size:15px}
  .btn{font-size:16px; height:54px; padding:0 26px}
  .btn-sm{height:40px; font-size:15px}
  .topbar{font-size:14px}
  .topbar .wrap{height:46px}
  section{padding:112px 0}
  .grid-3{gap:28px}
  .step b{font-size:18px}
  .foot-col a{font-size:15.5px}
  .foot-brand p{font-size:15px}
  .note{font-size:15px}
}

/* --- short screens: 1280x720 / 1366x768 laptops --------------------- */
/* the hero used to be 707px tall inside a 720px viewport, so the whole
   first screen was hero and the strip only appeared after a scroll. */
@media (min-width:1101px) and (max-height:820px){
  .hero{padding:34px 0 30px; padding-bottom:30px}
  .hero-grid{gap:46px}
  .hero h1{font-size:clamp(34px,3.1vw,46px); margin-bottom:16px}
  .lede{font-size:17px; margin-bottom:22px}
  .hs img{height:330px}
  .hero-art .art-note{margin-top:8px}
  .strip .wrap{padding:14px 0}
  section{padding:54px 0}
  .sec-head{margin-bottom:26px}
}

/* --- readable measure -------------------------------------------------
   Scaling the container up is only half of it: a paragraph that stretches
   to 129 characters is harder to read at 4K than at 720p. Measured lines
   at 4K were docs notes 129ch, section notes 123ch, guides copy 97ch.
   Cap the prose, leave the boxes full width.                            */
@media (min-width:1200px){
  .note{max-width:80ch}
  .doc-notes p{max-width:84ch}
  .doc-steps li p,.doc-steps li span,.doc-sum p{max-width:92ch}
  .doc-steps li{max-width:100ch}
  .faq-a{max-width:82ch}
  .prose p,.prose li{max-width:82ch}
  .guide-card p,.guides-note{max-width:52ch}
  .detail-lede{max-width:84ch}
  .sec-sub{max-width:58ch}
}

/* =====================================================================
   HOMEPAGE POLISH PASS — 2026-10-25

   Everything here is additive and sits at the end of the file, so the whole
   pass can be reviewed or reverted as one block. Each rule fixes something
   measured on the live page, not a matter of taste:

   1. Section rhythm was 54/6, 52/46 and 66/66 in three neighbouring bands.
      One token now drives every band, and it still scales per display tier.
   2. The approach band carried a border-top and border-bottom while the band
      above it already had a border and a background change, which produced a
      66px empty strip with a rule at each end. The band boundaries are now
      carried by background alone — no rules, no dead strip.
   3. "Made for the people behind the forum." was the only h2 on the page at
      24px, because it is not inside a .sec-head. It now reads at heading scale.
   4. In-page anchors (#resources, #shelves) now clear the sticky header.
   5. Card corners: platform cards were 14px while every other card is the
      16px token.
   6. Mobile: the hero kept a 76px bottom pad it inherited from the desktop
      rule, and the bands kept desktop-ish 54/52 pads.
   ===================================================================== */

:root{ --sp:66px }

section{padding:var(--sp) 0}
.plat-sec{padding:var(--sp) 0 0}
.featured-sec{padding:var(--sp) 0; margin-top:var(--sp)}

/* band boundaries by surface, not by rules standing 66px apart */
.approach{border-top:0; border-bottom:0}

/* this heading was the page's only 24px h2 (it lives outside .sec-head) */
.appr-grid h2{font-size:clamp(27px,2.6vw,34px); letter-spacing:-.025em; line-height:1.14}

/* anchors must clear the sticky header once it actually sticks */
section[id],div[id].cta-band{scroll-margin-top:92px}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}

/* one card radius for every card on the page */
.plat-card{border-radius:var(--r-card)}

/* small-type normalisation: 12.5 and 13.5 were drifting apart for no reason */
.plat-txt span,.plat-meta{font-size:13px}
.note{font-size:14px}
.card-foot{font-size:13px}

/* the numbered steps read as labels, so let them use the display face */
.step .num{font-family:var(--fh); letter-spacing:.06em}

::selection{background:var(--blue); color:#fff}

/* ---- tier scaling for the rhythm token (mirrors the display tiers) ---- */
@media (min-width:1600px){ :root{--sp:76px} }
@media (min-width:1920px){ :root{--sp:86px} }
@media (min-width:2400px){ :root{--sp:96px} }
@media (min-width:3000px){ :root{--sp:112px} }

/* ---- mobile ---- */
@media (max-width:720px){
  :root{--sp:44px}
  /* .hero{padding-bottom:76px} further up was written for the desktop column */
  .hero{padding:40px 0 44px}
  .featured-sec{padding:var(--sp) 0; margin-top:var(--sp)}
  section[id],div[id].cta-band{scroll-margin-top:76px}
  .appr-grid h2{font-size:clamp(25px,6.4vw,29px)}
}

/* =====================================================================
   HOMEPAGE POLISH PASS — part 2 (interaction + print)
   ===================================================================== */

/* the drop-down menu should read as a panel sitting under the bar, not a
   white slab with a hairline: same radius language as the cards below it */
@media(max-width:1020px){
  .nav.open .nav-links{
    border-bottom:1px solid var(--line);
    box-shadow:0 18px 34px -22px rgba(11,18,32,.45);
    border-radius:0 0 var(--r-card) var(--r-card);
    padding-bottom:8px;
  }
  .nav.open .nav-right{
    background:#fff; border-bottom:1px solid var(--line);
    border-radius:0 0 var(--r-card) var(--r-card);
    box-shadow:0 18px 34px -22px rgba(11,18,32,.45);
    padding:10px 20px 16px;
  }
  .nav.open .nav-links a:active{background:var(--blue-lt)}
}

/* numbers inside sentences should not shimmy: opt-in tabular figures */
.stat b,.plat-meta,.card-foot,.art-note,.art-fine,.buy-price{font-variant-numeric:tabular-nums}

/* =====================================================================
   COMPACT CARD BAND ON PHONES (2026-10-25)
   All six featured cards stack below 720px, which made the band 2638px
   tall at 390 - more than two screens of nothing but featured cards.
   Nothing is hidden here: the same six cards, the same titles, taglines,
   version lines and buttons, just set tighter so the band reads as one
   shelf instead of a scroll. Measured after: 2290px at 390.
   ===================================================================== */
@media (max-width:720px){
  .featured-sec .grid-3{gap:14px}
  .featured-sec .card-shot img{height:118px}
  .featured-sec .card .inner{padding:14px 14px 12px}
  .featured-sec .card-top{margin-bottom:10px}
  .featured-sec .card h3{margin-bottom:5px}
  .featured-sec .card .inner p{font-size:13.5px; line-height:1.45}
  .featured-sec .card-foot{padding:10px 14px}
}

/* print: someone will eventually print a licence page or a guide */
@media print{
  .topbar,header.nav,.strip,.cta-band,.foot-main,.hs-dots,.burger,.nav-search{display:none!important}
  body{background:#fff; color:#000; font-size:11pt}
  .wrap{width:auto; max-width:100%}
  section{padding:14pt 0; break-inside:avoid}
  .card,.support-card,.plat-card{box-shadow:none; border:1px solid #ccc; break-inside:avoid}
  .card-shot img{max-height:120pt; object-fit:contain}
  a[href^="/"]::after{content:" (forumcrafts.com" attr(href) ")"; font-size:9pt; color:#555}
  a[href^="http"]::after{content:" (" attr(href) ")"; font-size:9pt; color:#555}
}

/* =====================================================================
   ForumCrafts Premium Polish (FC1) — demo-approved design evolution.
   Pure override layer: same classes, same wiring, richer light.
   ===================================================================== */
:root{--shadow:0 1px 2px rgba(11,18,32,.05), 0 14px 34px -14px rgba(11,18,32,.20);--shadow-lg:0 2px 6px rgba(11,18,32,.05), 0 34px 64px -20px rgba(6,17,51,.35);--r-card:18px}
.topbar{background:linear-gradient(90deg,#060B1D,#0B1B4D 55%,#0A1A3F)}
header.nav{background:rgba(255,255,255,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 10px 30px -18px rgba(11,18,32,.25)}
.brand .mark{background:linear-gradient(135deg,#004CFF,#6D4AFF);box-shadow:0 10px 22px rgba(0,76,255,.35);border-radius:11px}
.btn{transition:transform .16s ease, box-shadow .16s ease, background .16s ease}
.btn-primary{background:linear-gradient(92deg,#004CFF,#6D4AFF);box-shadow:0 14px 30px rgba(0,76,255,.32);border-color:transparent}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 18px 36px rgba(0,76,255,.4)}
.btn:active{transform:translateY(0) scale(.99)}
a:focus-visible, button:focus-visible, input:focus-visible{outline:2px solid #6D4AFF;outline-offset:2px;border-radius:6px}
.hero{position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(640px 380px at 88% -6%,rgba(0,76,255,.16),transparent 60%),radial-gradient(560px 380px at -6% 30%,rgba(109,74,255,.14),transparent 60%),radial-gradient(420px 260px at 55% 115%,rgba(245,158,11,.10),transparent 60%)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(10,17,33,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(10,17,33,.035) 1px,transparent 1px);background-size:38px 38px;-webkit-mask-image:radial-gradient(75% 60% at 30% 18%,#000 20%,transparent 100%);mask-image:radial-gradient(75% 60% at 30% 18%,#000 20%,transparent 100%)}
.hero .wrap{position:relative;z-index:1}
.hero h1 .accent, .sec-head h2 .accent{background:linear-gradient(92deg,#004CFF,#6D4AFF 60%,#B26A00);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-shots figure{box-shadow:0 40px 80px -22px rgba(6,17,51,.5);border:1px solid rgba(255,255,255,.5)}
.hero-badge{position:absolute;z-index:3;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px rgba(10,17,33,.18);padding:10px 14px;font-size:12.5px;font-weight:800;color:var(--ink)}
.hero-badge.hb1{top:26px;left:-14px;transform:rotate(-3deg)}
.hero-badge.hb2{bottom:96px;right:-8px;transform:rotate(2deg)}
@media(max-width:700px){.hero-badge{display:none}}
.strip .feat svg{width:38px;height:38px;padding:9px;border-radius:12px;background:linear-gradient(135deg,#EBF1FF,#F1EDFF);border:1px solid var(--line);color:#004CFF}
.plat-card{transition:transform .18s ease, box-shadow .18s ease}
.plat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card{transition:transform .18s ease, box-shadow .18s ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card-shot{overflow:hidden}
.card-shot img{transition:transform .45s ease}
.card:hover .card-shot img{transform:scale(1.045)}
footer.site{background:linear-gradient(180deg,#081026,#060B1D);border-top:1px solid rgba(255,255,255,.08);color:#8FA1C7}
footer.site .foot-col h4{color:#fff}
footer.site a:hover{color:#fff}
footer.site .brand{color:#fff}
.studio{margin:70px 0 10px;background:linear-gradient(140deg,#060B1D,#0C1C4E 60%,#101E45);border-radius:30px;color:#C7D3F5;padding:48px;position:relative;overflow:hidden}
.studio::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(500px 300px at 90% -10%,rgba(109,74,255,.35),transparent 60%)}
.studio-in{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center}
.studio h2{color:#fff;font-size:36px;letter-spacing:-.025em;line-height:1.15;margin:10px 0 12px}
.studio .eyebrow{color:#9FB2E8}
.studio-nums{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.snum{border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:16px;background:rgba(255,255,255,.04)}
.snum b{color:#fff;font-size:25px;display:block;line-height:1.1}
.snum span{font-size:11px;color:#9FB2E8;letter-spacing:.08em;font-weight:700}
@media(max-width:900px){.studio-in{grid-template-columns:1fr}.studio{padding:32px 24px}}
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.rv{opacity:1;transform:none;transition:none}.card:hover,.plat-card:hover,.btn-primary:hover{transform:none}}

/* FC1.1 badge anchoring: badges now live inside .hero-shots, so they lock to
   the product card's own corners at every viewport (FC1 had them floating
   against the whole hero column, where heights vary). */
.hero-badge{z-index:5}
.hero-badge.hb1{top:-16px;left:-16px;right:auto;bottom:auto}
.hero-badge.hb2{top:auto;bottom:-18px;right:16px;left:auto}
/* FC1.2: let badges hang off the card — clip moves to each slide figure. */
.hero-shots{overflow:visible}
.hs{border-radius:18px;overflow:hidden}

/* =====================================================================
   Featured Resources Premium (FC2) — demo-approved card evolution.
   ===================================================================== */
.featured-sec .card{position:relative;border-radius:20px;box-shadow:0 1px 2px rgba(11,18,32,.05),0 14px 34px -16px rgba(11,18,32,.18);transition:transform .22s ease, box-shadow .22s ease}
.featured-sec .card::before{content:"";position:absolute;inset:0;border-radius:20px;padding:1.6px;background:linear-gradient(130deg,#004CFF,#6D4AFF,#FB923C);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .22s;pointer-events:none;z-index:4}
.featured-sec .card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -18px rgba(6,17,51,.35)}
.featured-sec .card:hover::before{opacity:1}
.featured-sec .card-shot{position:relative}
.featured-sec .card-shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,rgba(4,8,20,.42));pointer-events:none}
.featured-sec .card-shot img{transition:transform .45s ease}
.featured-sec .card:hover .card-shot img{transform:scale(1.06)}
.shot-free{position:absolute;z-index:3;top:12px;right:12px;font-size:11px;font-weight:900;letter-spacing:.05em;padding:6px 11px;border-radius:99px;background:rgba(231,247,240,.94);color:#0B7A55;border:1px solid rgba(14,159,110,.5);backdrop-filter:blur(8px)}
.shot-ver{position:absolute;z-index:3;bottom:12px;left:12px;font-size:11px;font-weight:800;padding:6px 10px;border-radius:99px;background:rgba(6,11,29,.55);color:#fff;border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(8px)}
.feat-ribbon{position:absolute;z-index:5;top:14px;left:-4px;background:linear-gradient(92deg,#B26A00,#F59E0B);color:#fff;font-size:10px;font-weight:900;letter-spacing:.09em;padding:6px 12px 6px 14px;border-radius:5px 99px 99px 5px;box-shadow:0 10px 22px rgba(178,106,0,.4)}
.featured-sec .card-link{background:#EBF1FF;border:1px solid #C9D9FF;padding:9px 15px;border-radius:99px;transition:.18s}
.featured-sec .card:hover .card-link{background:linear-gradient(92deg,#004CFF,#6D4AFF);color:#fff;border-color:transparent;box-shadow:0 12px 24px rgba(0,76,255,.35)}
.featured-sec .card-top{z-index:1}
@media (prefers-reduced-motion: reduce){.featured-sec .card:hover{transform:none}.featured-sec .card:hover .card-shot img{transform:none}}

/* =====================================================================
   Vault Catalogue Premium (FC3) — resources.php header/toolbar/cards.
   ===================================================================== */
.ministats{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.ms{display:inline-flex;gap:8px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:99px;padding:8px 15px;font-size:13px;font-weight:700;color:var(--ink);box-shadow:0 1px 2px rgba(11,18,32,.05)}
.vault-tools{position:sticky;top:76px;z-index:40;margin-top:26px;background:rgba(255,255,255,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:20px;padding:14px;box-shadow:0 20px 44px -20px rgba(11,18,32,.25)}
.vt-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.vt-row .search{flex:1;min-width:220px}
.vt-sort{display:inline-flex;gap:8px;align-items:center;font-size:13px;font-weight:700;color:var(--mut)}
.vt-sort select{font:700 13.5px var(--ff);color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:11px;padding:10px 11px}
.vt-seg{display:flex;background:#EEF2FA;border:1px solid var(--line);border-radius:12px;padding:4px;gap:4px}
.vt-seg a{font-size:12.5px;font-weight:800;color:var(--mut);padding:8px 13px;border-radius:9px;text-decoration:none}
.vt-seg a.on{background:linear-gradient(92deg,#004CFF,#6D4AFF);color:#fff;box-shadow:0 8px 18px rgba(0,76,255,.35)}
.vault-tools .chips{margin-top:12px}
.vault-tools .chip .n{font-size:11px;background:#EEF2FA;border-radius:99px;padding:1px 7px;color:var(--blue);font-weight:900}
.vault-tools .chip.on .n{background:rgba(255,255,255,.18);color:#fff}
.countline{margin:18px 2px 0;font-size:13.5px;color:var(--mut)}
.countline b{color:var(--ink)}
.vault-sec .card{position:relative;border-radius:20px;box-shadow:0 1px 2px rgba(11,18,32,.05),0 14px 34px -16px rgba(11,18,32,.18);transition:transform .22s ease, box-shadow .22s ease}
.vault-sec .card::before{content:"";position:absolute;inset:0;border-radius:20px;padding:1.6px;background:linear-gradient(130deg,#004CFF,#6D4AFF,#FB923C);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .22s;pointer-events:none;z-index:4}
.vault-sec .card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -18px rgba(6,17,51,.32)}
.vault-sec .card:hover::before{opacity:1}
.vault-sec .card-shot{position:relative}
.vault-sec .card-shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,rgba(4,8,20,.42));pointer-events:none}
.vault-sec .card-shot img{transition:transform .45s ease}
.vault-sec .card:hover .card-shot img{transform:scale(1.06)}
.vault-sec .card .go{background:#EBF1FF;border:1px solid #C9D9FF;padding:8px 14px;border-radius:99px;transition:.18s}
.vault-sec .card:hover .go{background:linear-gradient(92deg,#004CFF,#6D4AFF);color:#fff;border-color:transparent;box-shadow:0 12px 24px rgba(0,76,255,.35)}
@media(max-width:760px){.vault-tools{top:64px}.vt-row .search{min-width:100%}}
@media (prefers-reduced-motion: reduce){.vault-sec .card:hover{transform:none}.vault-sec .card:hover .card-shot img{transform:none}}

/* =====================================================================
   Product Gallery Stage (FC4) — one calm stage instead of giant stacks.
   ===================================================================== */
.gal{position:relative;border-radius:22px;overflow:hidden;background:linear-gradient(160deg,#0A1128,#101E45);border:1px solid var(--line);box-shadow:0 34px 70px -22px rgba(6,17,51,.45);margin:14px 0 6px}
.gal-stage{height:520px;display:grid;place-items:center;position:relative}
.gal-stage img[data-main]{max-width:100%;max-height:520px;object-fit:contain;display:block}
.gal-full{line-height:0}
.gal-chip{position:absolute;font-size:11.5px;font-weight:800;padding:7px 12px;border-radius:99px;background:rgba(6,11,29,.6);color:#fff;border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(8px);z-index:3}
.gal-count{top:14px;right:14px}
.gal-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:36px 18px 13px;background:linear-gradient(180deg,transparent,rgba(4,8,20,.74));color:#E7ECFA;font-size:13px;pointer-events:none}
.gal-zoom{font-size:11.5px;font-weight:800;padding:7px 12px;border-radius:99px;background:rgba(6,11,29,.6);border:1px solid rgba(255,255,255,.35);white-space:nowrap}
.gal-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.94);border:1px solid var(--line);color:var(--ink);font-size:19px;font-weight:900;cursor:pointer;box-shadow:0 10px 24px rgba(6,17,51,.35);display:grid;place-items:center;padding:0}
.gal-nav.prev{left:14px}.gal-nav.next{right:14px}
.gal-thumbs{display:flex;gap:10px;margin:12px 0 4px;flex-wrap:wrap}
.gal-thumb{flex:none;width:118px;height:74px;border-radius:13px;overflow:hidden;border:2.5px solid transparent;cursor:pointer;padding:0;background:#0A1128;opacity:.6;transition:.18s;line-height:0}
.gal-thumb img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.gal-thumb:hover{opacity:.9}
.gal-thumb.on{border-color:var(--blue);opacity:1;box-shadow:0 12px 26px -10px rgba(0,76,255,.55)}
@media(max-width:640px){.gal-stage{height:auto;min-height:220px}.gal-stage img[data-main]{max-height:320px}.gal-thumb{width:92px;height:58px}.gal-nav{display:none}}

/* FC5 Docs Light Polish: sticky jump rail + premium numbered steps */
.doc-jump{position:sticky;top:78px;z-index:60;display:flex;gap:8px;margin:14px 0 26px;padding:10px;
  background:rgba(255,255,255,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--line);border-radius:18px;box-shadow:0 14px 34px -18px rgba(11,18,32,.22);overflow-x:auto;scrollbar-width:none}
.doc-jump::-webkit-scrollbar{display:none}
.doc-jump a{flex:1 0 auto;min-width:0;flex-direction:row;align-items:center;gap:9px;padding:9px 14px;border-radius:999px;border:1px solid transparent;background:transparent;box-shadow:none;white-space:nowrap}
.doc-jump a b{font-size:14px}
.doc-jump a span{font-size:11.5px;opacity:.75}
.doc-jump a:hover{transform:none;border-color:var(--line);background:#fff}
.doc-jump a.on{background:linear-gradient(92deg,var(--blue),#7B5CFF);color:#fff;border-color:transparent;box-shadow:0 10px 22px -8px rgba(0,76,255,.55)}
.doc-jump a.on b,.doc-jump a.on span{color:#fff}
.doc-plat{scroll-margin-top:170px;box-shadow:0 1px 2px rgba(11,18,32,.04),0 18px 40px -24px rgba(11,18,32,.25)}
.doc-steps{gap:0;position:relative}
.doc-steps li{grid-template-columns:40px 1fr;gap:16px;padding:13px 0;position:relative}
.doc-steps li:not(:last-child)::before{content:"";position:absolute;left:19px;top:52px;bottom:-6px;width:2px;
  background:linear-gradient(180deg,rgba(0,76,255,.35),rgba(123,92,255,.08));border-radius:2px}
.doc-steps .num{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--blue),#7B5CFF 60%,#00C2FF);
  color:#fff;font-size:15px;box-shadow:0 8px 20px -6px rgba(0,76,255,.55);border:2px solid #fff;position:relative;z-index:1}
.doc-notes{border-radius:14px;box-shadow:inset 0 0 0 1px rgba(0,76,255,.05)}
.doc-chips .chip{transition:.18s}
.doc-chips .chip:hover{border-color:var(--blue);color:var(--blue-dk);transform:translateY(-1px)}
@media (max-width:700px){.doc-jump{top:64px;border-radius:14px}.doc-plat{scroll-margin-top:150px}.doc-steps li{grid-template-columns:36px 1fr}.doc-steps .num{width:36px;height:36px}.doc-steps li:not(:last-child)::before{left:17px;top:48px}}

/* FC6 Docs Tabs: platform guides as tabs (stacked layout remains the no-JS fallback) */
.doc-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 22px;padding:10px;position:sticky;top:78px;z-index:60;
  background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--line);border-radius:18px;box-shadow:0 14px 34px -18px rgba(11,18,32,.25)}
.doc-tabs button{flex:1 0 auto;display:flex;flex-direction:column;gap:1px;align-items:flex-start;padding:10px 16px;
  border-radius:13px;border:1px solid var(--line);background:#fff;cursor:pointer;font:inherit;text-align:left;transition:.18s;color:var(--body)}
.doc-tabs button b{font-size:14.5px;color:var(--ink)}
.doc-tabs button span{font-size:11.5px;color:var(--mut)}
.doc-tabs button:hover{transform:translateY(-1px);border-color:var(--blue)}
.doc-tabs button.on{background:linear-gradient(92deg,var(--blue),#7B5CFF);border-color:transparent;box-shadow:0 12px 24px -8px rgba(0,76,255,.55)}
.doc-tabs button.on b,.doc-tabs button.on span{color:#fff}
.doc-plat[hidden]{display:none}
.doc-fade{animation:docFade .35s ease}
@keyframes docFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:760px){.doc-tabs{flex-wrap:nowrap;overflow-x:auto;top:64px;border-radius:14px;scrollbar-width:none}.doc-tabs::-webkit-scrollbar{display:none}.doc-tabs button{flex:0 0 auto}}
@media (prefers-reduced-motion: reduce){.doc-fade{animation:none}.doc-tabs button:hover{transform:none}}

/* FC7 Vault Tabs: Docs-style shelf navigation shared by catalogue + shelves */
.vault-tabs{display:flex;gap:8px;margin-top:26px;padding:10px;position:sticky;top:78px;z-index:55;
  background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--line);border-radius:18px;box-shadow:0 14px 34px -18px rgba(11,18,32,.25);
  overflow-x:auto;scrollbar-width:none}
.vault-tabs::-webkit-scrollbar{display:none}
.vault-tabs a{flex:1 0 auto;display:flex;flex-direction:column;gap:1px;padding:10px 16px;border-radius:13px;
  border:1px solid var(--line);background:#fff;text-decoration:none;transition:.18s;color:var(--body)}
.vault-tabs a b{font-size:14.5px;color:var(--ink)}
.vault-tabs a span{font-size:11.5px;color:var(--mut)}
.vault-tabs a:hover{transform:translateY(-1px);border-color:var(--blue)}
.vault-tabs a.on{background:linear-gradient(92deg,var(--blue),#7B5CFF);border-color:transparent;
  box-shadow:0 12px 24px -8px rgba(0,76,255,.55)}
.vault-tabs a.on b,.vault-tabs a.on span{color:#fff}
/* On the catalogue, keep the filter bar below the tabs instead of colliding with it. */
.vault-sec .vault-tools{top:158px}
@media(max-width:760px){
  .vault-tabs{top:64px;border-radius:14px}
  .vault-tabs a{flex:0 0 auto}
  .vault-sec .vault-tools{top:142px}
}
@media (prefers-reduced-motion: reduce){.vault-tabs a:hover{transform:none}}

/* =====================================================================
   Complete Polish — Phase 1 finish line (FC8)
   Homepage freshness rails + one calmer rhythm across shared components.
   ===================================================================== */
::selection{background:#C9D9FF;color:var(--ink)}
.home-fresh,.home-guides{padding-top:58px}
.home-fresh .sec-head,.home-guides .sec-head{margin-bottom:24px}
.home-rel-list{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 14px 34px -18px rgba(11,18,32,.22)}
.home-rel{display:flex;gap:16px;align-items:center;padding:18px 22px;border-bottom:1px solid var(--line-2)}
.home-rel:last-child{border-bottom:0}
.home-rel-ver{flex:none;font-weight:850;font-size:12px;color:var(--blue-dk);background:var(--blue-lt);border:1px solid #C9D9FF;padding:6px 10px;border-radius:999px}
.home-rel-main{min-width:0;flex:1}
.home-rel-main h3{font-size:16px;line-height:1.35;margin:0 0 3px}
.home-rel-main h3 a{color:var(--ink);text-decoration:none}
.home-rel-main h3 a:hover{color:var(--blue-dk);text-decoration:underline;text-underline-offset:3px}
.home-rel-main p{font-size:13px;color:var(--mut);margin:0}
.home-rel-latest{font-weight:800;color:var(--green)}
.home-rel-sha{flex:none;display:flex;gap:8px;align-items:center;font:12px ui-monospace,SFMono-Regular,Menlo,monospace;color:#5A6678;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:7px 8px 7px 10px}
.home-rel-sha .copy{flex:none}
.support-card,.auth-card,.doc-card,.guide-card{box-shadow:0 1px 2px rgba(11,18,32,.04),0 16px 38px -22px rgba(11,18,32,.22)}
.support-card,.doc-card{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.support-card:hover,.doc-card:hover{transform:translateY(-3px);border-color:#C5D8FF;box-shadow:0 24px 48px -22px rgba(11,18,32,.28)}
.form input,.form textarea,.form select,.nav-search input{transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}
.form input:hover,.form textarea:hover,.form select:hover{border-color:#CBD6E8}
.auth-card{box-shadow:0 30px 70px -28px rgba(11,18,32,.35)}
.tl-body,.side-card,.dl-panel{box-shadow:0 1px 2px rgba(11,18,32,.04),0 16px 38px -24px rgba(11,18,32,.22)}
.prose img,.doc-plat img{border-radius:14px}
.prose pre,.doc-steps pre{box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
@media(max-width:760px){
  .home-rel{align-items:flex-start;flex-wrap:wrap;padding:16px}
  .home-rel-main{flex:1 1 calc(100% - 92px)}
  .home-rel-sha{margin-left:0;width:100%;justify-content:space-between}
  .home-fresh,.home-guides{padding-top:44px}
}
@media (prefers-reduced-motion: reduce){
  .support-card:hover,.doc-card:hover{transform:none}
}

/* =====================================================================
   Complete Polish — Phase 2+3 (FC9): share/schema images, release
   anchors + filters, guide progress, confidence crosslinks.
   ===================================================================== */
.read-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:200;background:transparent;pointer-events:none}
.read-progress span{display:block;height:100%;background:linear-gradient(92deg,var(--blue),#7B5CFF,#00C2FF);transform:scaleX(0);transform-origin:0 50%}
.toc a.on{color:var(--blue-dk);font-weight:800}
.side-links{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.side-links a{color:var(--blue-dk);font-weight:650;text-decoration:none}
.side-links a:hover{text-decoration:underline;text-underline-offset:3px}
.rel-filter{margin:0 0 22px}
.rel-filter .chip .n{font-size:11px;background:#EEF2FA;border-radius:99px;padding:1px 7px;color:var(--blue);font-weight:900}
.rel-filter .chip.on .n{background:rgba(255,255,255,.18);color:#fff}
.tl-anchor{color:var(--faint);text-decoration:none;font-weight:800;font-size:13px;padding:2px 4px;border-radius:6px}
.tl-anchor:hover{color:var(--blue-dk);background:var(--blue-lt)}
.tl-item{scroll-margin-top:110px}
.tl-item:target .tl-body{border-color:#9DB9F5;box-shadow:0 0 0 3px rgba(0,76,255,.14),var(--shadow)}