/* ===========================================================
   MATCHPOINT · COURTSIDE — marketing site system
   Shared across all pages. Lifts the app's design tokens.
   =========================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* surfaces */
  --bg0:#08090B; --bg1:#101216; --surface:#171A20; --surface2:#1E222A; --line:#262B34; --line2:#333A45;
  /* energy */
  --green:#7BD13F; --green-glow:#B6F08A; --green-dim:#1E3414;
  --red:#FF5A6E; --red-glow:#FF96A4; --red-dim:#3A1620;
  --yellow:#F8D54A; --yellow-glow:#FFE889;
  /* ink */
  --ink:#F3F5F4; --dim:#8A8F98; --faint:#565B66; --hush:#3A3F49;
  /* type */
  --display:"Archivo", system-ui, sans-serif;
  --mono:"Space Mono", ui-monospace, monospace;
  --pixel:"Press Start 2P", monospace;
}

html { scroll-behavior: smooth; }
html, body { background: var(--bg0); }
body {
  font-family: var(--display);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: hidden;
}
.tnum { font-variant-numeric: tabular-nums; }
a { color: inherit; text-decoration: none; }
img { display: block; }

/* faint court-line grid wash behind everything */
.page {
  position: relative;
  background:
    radial-gradient(120% 90% at 50% -8%, #15181E 0%, #0D0F13 44%, #08090B 100%);
}
.page::before {
  content:""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
  background:
    linear-gradient(90deg, transparent 0 calc(100% - 1px), rgba(123,209,63,.04) calc(100% - 1px)) 0 0 / 84px 100%,
    linear-gradient(0deg,  transparent 0 calc(100% - 1px), rgba(255,255,255,.018) calc(100% - 1px)) 0 0 / 100% 84px;
  mask: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 92%);
}
.page > * { position: relative; z-index: 1; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 56px); }
.wrap-narrow { max-width: 860px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 56px); }

/* ============================================================
   NAVBAR
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 60;
  backdrop-filter: blur(14px) saturate(1.2);
  background: rgba(8,9,11,.72);
  border-bottom: 1px solid var(--line);
}
.nav-in { max-width: 1240px; margin: 0 auto; padding: 14px clamp(20px,5vw,56px); display: flex; align-items: center; gap: 18px; }
.brandline { display:flex; align-items:center; gap:12px; }
.brandmark {
  font-family: var(--pixel); font-size: 12px; letter-spacing:1px; color: var(--bg0);
  background: var(--green); padding: 8px 10px 6px; border-radius: 7px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.16) inset, 0 6px 22px -6px rgba(123,209,63,.6);
}
.brandword { font-weight: 900; letter-spacing: 2.5px; font-size: 14px; color: var(--ink); }
.brandword b { color: var(--green); }
.nav-links { margin-left: auto; display: flex; align-items: center; gap: 28px; }
.nav-links a { font-size: 14px; color: var(--dim); font-weight: 500; transition: color .15s; }
.nav-links a:hover { color: var(--ink); }
.nav-cta {
  font-family: var(--mono); font-size: 12px; letter-spacing: .5px; color: var(--bg0);
  background: var(--green); padding: 10px 16px; border-radius: 10px; font-weight: 700;
  box-shadow: 0 8px 24px -10px rgba(123,209,63,.7); transition: transform .15s;
}
.nav-cta:hover { transform: translateY(-1px); }
@media (max-width: 760px){ .nav-links a:not(.nav-cta){ display:none; } }

/* ============================================================
   GENERIC SECTION HEADER (mono index + title)
   ============================================================ */
.sect { padding-top: clamp(56px, 9vw, 110px); }
.sect-head { display:flex; align-items:flex-end; gap: 20px; border-bottom: 1px solid var(--line); padding-bottom: 16px; margin-bottom: 44px; }
.sect-no { font-family: var(--mono); font-size: 12px; color: var(--green); letter-spacing: 1px; }
.sect-title { font-size: clamp(22px, 3vw, 34px); font-weight: 800; letter-spacing: -.6px; }
.sect-desc { margin-left: auto; max-width: 42ch; color: var(--dim); font-size: 14px; line-height: 1.55; text-align: right; text-wrap: pretty; }
@media (max-width: 720px){ .sect-desc{ display:none; } }

/* ============================================================
   HERO
   ============================================================ */
.hero { padding: clamp(50px, 8vw, 96px) 0 clamp(40px, 6vw, 72px); }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 5vw, 70px); align-items: center; }
@media (max-width: 940px){ .hero-grid { grid-template-columns: 1fr; } }
.eyebrow {
  display:inline-flex; align-items:center; gap:9px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 1.5px; color: var(--green);
  border: 1px solid color-mix(in srgb, var(--green) 30%, transparent); border-radius: 999px;
  padding: 7px 13px; background: color-mix(in srgb, var(--green) 7%, transparent);
}
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(123,209,63,.6); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100%{ box-shadow:0 0 0 0 rgba(123,209,63,.55);} 50%{ box-shadow:0 0 0 7px rgba(123,209,63,0);} }
.hero-h {
  font-size: clamp(40px, 6.6vw, 78px); font-weight: 900; letter-spacing: -2.4px; line-height: .96;
  margin: 26px 0 0; max-width: 14ch; text-wrap: balance;
}
.hero-h .g { color: var(--green); }
.hero-h .y { color: var(--yellow); }
.hero-sub {
  margin: 26px 0 0; max-width: 52ch; color: var(--dim); font-size: clamp(16px,1.5vw,18.5px); line-height: 1.62; text-wrap: pretty;
}
.hero-sub b { color: var(--ink); font-weight: 600; }
.hero-sub .g { color: var(--green-glow); font-weight: 600; }

/* store badges */
.badges { display:flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; align-items: stretch; }
.badge {
  display:flex; align-items:center; gap:12px; padding: 12px 18px; border-radius: 14px;
  border: 1px solid var(--line2); background: var(--surface); transition: .15s; min-width: 200px;
}
.badge.live:hover { transform: translateY(-2px); border-color: var(--dim); }
.badge.soon { opacity: .62; }
.badge .b-ico { flex-shrink: 0; }
.badge .b-txt { display:flex; flex-direction: column; line-height: 1.15; }
.badge .b-top { font-family: var(--mono); font-size: 9.5px; letter-spacing: 1px; color: var(--faint); text-transform: uppercase; }
.badge .b-main { font-size: 19px; font-weight: 800; letter-spacing: -.4px; margin-top: 2px; }
.badge.soon .b-top { color: var(--yellow); }

.hero-meta { margin-top: 22px; display:flex; gap: 22px; flex-wrap: wrap; font-family: var(--mono); font-size: 12px; color: var(--faint); letter-spacing:.3px; }
.hero-meta span { display:flex; align-items:center; gap:7px; }
.hero-meta .dotg { width:6px;height:6px;border-radius:50%;background:var(--green); }

/* hero device cluster */
.hero-stage { position: relative; display:flex; align-items:center; justify-content:center; min-height: 600px; }
@media (max-width:940px){ .hero-stage{ min-height: 540px; margin-top: 20px; } }
.hero-stage::after {
  content:""; position:absolute; left:50%; top:54%; width: 78%; height: 60%; transform: translate(-50%,-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(123,209,63,.16), transparent 70%); filter: blur(20px); z-index:0;
}
.hero-phone { position: relative; z-index: 2; }
.hero-watch { position: absolute; right: -6px; bottom: 8px; z-index: 3; }
@media (max-width: 520px){ .hero-watch{ right: -22px; bottom: -10px; } }

/* ============================================================
   DEVICE FRAMES (static)
   ============================================================ */
/* iPhone 15 Pro — 393×852 */
.iphone { position: relative; border-radius: 58px; background: linear-gradient(150deg,#3a3d44,#16181c 60%,#0a0b0d); padding: 11px;
  box-shadow: inset 0 2px 3px rgba(255,255,255,.14), inset 0 -10px 22px rgba(0,0,0,.6), 0 40px 80px -28px rgba(0,0,0,.9); }
.iphone-screen { position: relative; width: 393px; height: 852px; border-radius: 48px; overflow: hidden; background:#000; }
.iphone-notch { position:absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 120px; height: 34px; background:#000; border-radius: 19px; z-index: 50; }
.iphone-notch::after{ content:""; position:absolute; right: 16px; top:50%; transform:translateY(-50%); width:9px; height:9px; border-radius:50%; background: radial-gradient(circle at 35% 35%, #1c3a4a, #060708); }

/* Apple Watch Ultra 49mm — 410×502 screen */
.watch { position: relative; width: 466px; height: 566px; border-radius: 86px;
  background: linear-gradient(150deg,#41434a 0%,#23252b 52%,#0e0f12 100%);
  display:flex; align-items:center; justify-content:center;
  box-shadow: inset 0 3px 4px rgba(255,255,255,.16), inset 0 -8px 16px rgba(0,0,0,.6), 0 36px 64px -22px rgba(0,0,0,.85); }
.watch-screen { width: 410px; height: 502px; border-radius: 64px; background:#000; overflow:hidden; position:relative;
  box-shadow: 0 0 0 8px #0b0c0e, inset 0 0 26px rgba(0,0,0,.9); }
.watch-crown { position:absolute; right:-10px; top: 168px; width: 14px; height: 62px; border-radius: 5px; background: linear-gradient(90deg,#5c5d63,#2a2b30); }
.watch-side { position:absolute; right:-7px; top: 256px; width: 9px; height: 84px; border-radius: 5px; background: linear-gradient(90deg,#4a4b51,#1e1e22); }

/* device scaler helper */
.scaled { transform-origin: center center; }

/* iOS status bar */
.ios-status { position:absolute; top:0; left:0; right:0; height: 54px; display:flex; align-items:center; justify-content:space-between; padding: 0 32px; z-index: 40; font-weight: 700; font-size: 15px; letter-spacing:.3px; pointer-events:none; color:#fff; }
.ios-status .r { display:flex; align-items:center; gap: 7px; }
.ios-status svg { display:block; }

/* ============================================================
   iOS SCREEN INTERNALS (lifted from app)
   ============================================================ */
.ios { position:absolute; inset:0; background:
  radial-gradient(120% 50% at 50% 0%, #14171C 0%, #0A0C0F 50%, #08090B 100%); display:flex; flex-direction:column; overflow:hidden; }
.ios-nav { padding:62px 22px 6px; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.ios-nav .navbtn { width:38px; height:38px; border-radius:11px; background: var(--surface); border:1px solid var(--line); display:grid; place-items:center; }
.ios-kicker { font-family: var(--mono); font-size:11px; color: var(--green); letter-spacing:1.5px; }
.ios-h1 { font-size:34px; font-weight:900; letter-spacing:-1.2px; margin-top:3px; }

/* --- scoring --- */
.iss { flex:1; display:flex; flex-direction:column; padding:54px 0 0; overflow:hidden; }
.iss-bar { display:flex; align-items:center; gap:12px; padding:10px 20px; flex-shrink:0; }
.iss-bar .endbtn { font-family: var(--mono); font-size:10px; letter-spacing:1px; color: var(--red); border:1px solid color-mix(in srgb,var(--red) 40%, transparent); border-radius:9px; padding:8px 11px; background: color-mix(in srgb,var(--red) 8%, transparent); }
.iss-bar .iss-tele { margin-left:auto; }
.iss-bug { display:flex; align-items:center; justify-content:center; gap:10px; padding:6px 20px 12px; flex-shrink:0; }
.iss-cards { flex:1; display:flex; flex-direction:column; gap:14px; padding:4px 20px; }
.iss-card { flex:1; position:relative; display:flex; align-items:center; gap:18px; padding:0 26px 0 0; border-radius:24px; overflow:hidden;
  background: var(--surface); border:2px solid var(--line); }
.iss-card[data-active="true"] { border-color: color-mix(in srgb, var(--cc) 55%, transparent); background: linear-gradient(100deg, color-mix(in srgb, var(--cc) 13%, var(--surface)), var(--surface) 55%); }
.iss-card .cc-bar { width:10px; align-self:stretch; background: var(--cc); }
.iss-card .cc-av { width:60px; height:60px; border-radius:16px; display:grid; place-items:center; font-weight:900; font-size:28px; color:#08090B; font-family: var(--display); flex-shrink:0; }
.iss-card .cc-mid { flex:1; display:flex; flex-direction:column; gap:5px; min-width:0; }
.iss-card .cc-name { font-weight:900; font-size:23px; letter-spacing:-.4px; display:flex; align-items:center; gap:9px; }
.iss-card .cc-meta { font-family: var(--mono); font-size:10px; color: var(--dim); letter-spacing:.5px; }
.iss-card .cc-pt { font-weight:900; font-size:78px; letter-spacing:-3px; min-width:118px; text-align:right; line-height:.9; }
.iss-foot { flex-shrink:0; padding:12px 20px 26px; display:flex; align-items:center; gap:12px; }
.iss-timeline { flex:1; display:flex; align-items:center; gap:4px; height:44px; padding:0 14px; background: var(--surface); border:1px solid var(--line); border-radius:13px; overflow:hidden; }
.iss-tick { width:5px; border-radius:2px; flex-shrink:0; }
.iss-undo { width:54px; height:44px; border-radius:13px; background: var(--surface); border:1px solid var(--line2); display:grid; place-items:center; flex-shrink:0; }

/* set grid scorebug */
.setgrid { display:flex; gap:4px; }
.setcol { display:flex; flex-direction:column; align-items:center; gap:1px; background: var(--surface); border:1px solid var(--line); border-radius:8px; padding:5px 8px; min-width:30px; }
.setcol.live { border-color: var(--line2); background: var(--surface2); }
.setcol-k { font-family: var(--mono); font-size:7px; color: var(--faint); letter-spacing:.5px; margin-bottom:2px; }
.setcol.live .setcol-k { color: var(--yellow); }
.setcol-v { font-weight:800; font-size:16px; color: var(--dim); line-height:1.05; }

/* state badge */
.statebadge { font-family: var(--mono); letter-spacing:1.4px; border:1px solid; border-radius:6px; padding:5px 8px 4px; font-size:9px;
  text-shadow: 0 0 12px var(--g); box-shadow: inset 0 0 14px -8px var(--g); background: color-mix(in srgb, var(--g) 9%, transparent); }
.sb-md { font-size:9px; }

/* telemetry rail */
.tele { display:flex; align-items:center; justify-content:center; gap:9px; font-family: var(--mono); }
.tele-cell { display:flex; align-items:center; gap:6px; }
.tele-cell b { font-family: var(--display); font-weight:800; font-size:12.5px; color: var(--ink); }
.tele-cell i { font-style:normal; font-size:7.5px; color: var(--faint); letter-spacing:.5px; }
.tele-sep { width:3px; height:3px; border-radius:50%; background: var(--hush); }
.servedot { width:8px; height:8px; border-radius:50%; display:inline-block; flex-shrink:0; }

/* --- setup --- */
.setup-scroll { flex:1; padding:6px 22px 22px; display:flex; flex-direction:column; gap:22px; overflow:hidden; }
.field-k { font-family: var(--mono); font-size:10.5px; color: var(--faint); letter-spacing:1.2px; margin-bottom:11px; text-transform:uppercase; }
.sportseg { display:grid; grid-template-columns:1fr 1fr 1fr; gap:9px; }
.sportcard { background: var(--surface); border:1.5px solid var(--line); border-radius:15px; padding:15px 10px; display:flex; flex-direction:column; align-items:center; gap:9px; }
.sportcard[data-on="true"] { border-color: var(--acc); background: linear-gradient(160deg, color-mix(in srgb, var(--acc) 14%, var(--surface)), var(--surface)); box-shadow: 0 10px 26px -14px color-mix(in srgb, var(--acc) 80%, transparent); }
.sportcard .sp-name { font-family: var(--mono); font-size:11px; letter-spacing:.5px; color: var(--dim); }
.sportcard[data-on="true"] .sp-name { color: var(--ink); }
.fmtseg { display:flex; gap:8px; }
.fmtchip { flex:1; text-align:center; background: var(--surface); border:1.5px solid var(--line); border-radius:12px; padding:13px 6px; font-family: var(--mono); font-size:11px; letter-spacing:.5px; color: var(--dim); }
.fmtchip[data-on="true"] { border-color: var(--ink); color: var(--ink); background: var(--surface2); }
.players { display:flex; flex-direction:column; gap:12px; }
.pfield { display:flex; align-items:center; gap:14px; background: var(--surface); border:1.5px solid var(--line); border-left-width:4px; border-radius:14px; padding:15px 17px; }
.pfield .pf-role { font-family: var(--mono); font-size:9px; letter-spacing:1.5px; }
.pfield .pf-name { font-weight:800; font-size:19px; letter-spacing:-.3px; margin-top:2px; }
.pfield .pf-av { width:46px; height:46px; border-radius:13px; display:grid; place-items:center; font-weight:900; font-size:21px; color:#08090B; font-family: var(--display); flex-shrink:0; }
.pfield .pf-edit { margin-left:auto; }
.vs-tag { align-self:center; font-family: var(--mono); font-size:10px; color: var(--faint); letter-spacing:3px; }
.cta-blk { margin-top:auto; }
.cta-btn { width:100%; background: var(--green); color:#08090B; border:none; border-radius:16px; padding:19px; font-family: var(--display); font-weight:900; font-size:18px; letter-spacing:.5px; display:flex; align-items:center; justify-content:center; gap:10px; box-shadow:0 14px 34px -12px rgba(123,209,63,.65); }

/* --- history --- */
.ish { flex:1; display:flex; flex-direction:column; padding:54px 0 0; overflow:hidden; }
.ish-stats { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; padding:6px 20px 16px; flex-shrink:0; }
.statbox { background: var(--surface); border:1px solid var(--line); border-radius:15px; padding:14px; }
.statbox .st-v { font-weight:900; font-size:28px; letter-spacing:-1px; }
.statbox .st-k { font-family: var(--mono); font-size:9px; color: var(--faint); letter-spacing:1px; margin-top:3px; text-transform:uppercase; }
.ish-list { flex:1; overflow:hidden; padding:2px 20px 20px; display:flex; flex-direction:column; gap:11px; }
.matchcard { display:flex; align-items:center; gap:15px; background: var(--surface); border:1px solid var(--line); border-left-width:4px; border-radius:15px; padding:15px 17px; }
.matchcard .mc-res { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; font-weight:900; font-size:15px; font-family: var(--display); flex-shrink:0; }
.matchcard .mc-mid { flex:1; min-width:0; }
.matchcard .mc-opp { font-weight:800; font-size:16px; letter-spacing:-.2px; }
.matchcard .mc-meta { font-family: var(--mono); font-size:9.5px; color: var(--dim); letter-spacing:.3px; margin-top:3px; }
.matchcard .mc-sets { display:flex; gap:7px; }
.mc-setpair { display:flex; flex-direction:column; align-items:center; font-weight:800; font-size:15px; line-height:1.1; }
.mc-setpair span:last-child { color: var(--faint); }

/* ============================================================
   APPLE WATCH screen — stacked broadcast
   ============================================================ */
.wsb { position:absolute; inset:0; display:flex; flex-direction:column; padding:14px 0 0; background:#000; }
.wsb-top { display:flex; align-items:center; justify-content:center; gap:9px; height:44px; flex-shrink:0; padding:6px 18px 0; }
.wsb-rows { flex:1; display:flex; flex-direction:column; gap:11px; padding:8px 18px; }
.wsb-row { flex:1; position:relative; display:flex; align-items:center; gap:14px; padding:0 20px 0 0; border-radius:20px; overflow:hidden;
  background: var(--surface); border:1.5px solid var(--line); }
.wsb-row[data-active="true"] { border-color: color-mix(in srgb, var(--rc) 60%, transparent); background: linear-gradient(100deg, color-mix(in srgb, var(--rc) 13%, var(--surface)), var(--surface) 60%); }
.wsb-bar { width:9px; align-self:stretch; background: var(--rc); flex-shrink:0; }
.wsb-id { width:44px; height:44px; display:grid; place-items:center; border-radius:12px; font-weight:900; font-size:22px; color:#08090B; font-family: var(--display); flex-shrink:0; }
.wsb-mid { flex:1; display:flex; flex-direction:column; gap:4px; min-width:0; }
.wsb-name { font-family: var(--mono); font-size:15px; letter-spacing:1px; display:flex; align-items:center; gap:8px; }
.wsb-games { font-family: var(--mono); font-size:10px; color: var(--dim); letter-spacing:.5px; }
.wsb-pt { font-weight:900; font-size:60px; letter-spacing:-2px; min-width:86px; text-align:right; line-height:1; }
.wsb-foot { height:42px; flex-shrink:0; display:flex; align-items:center; justify-content:center; gap:11px; border-top:1px solid var(--line); font-family:var(--mono); font-size:12px; color:var(--faint); letter-spacing:1px; }

/* ============================================================
   FEATURE ROWS
   ============================================================ */
.feat { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,5vw,72px); align-items:center; padding: clamp(40px,6vw,72px) 0; }
.feat + .feat { border-top: 1px solid var(--line); }
.feat.flip .feat-media { order: 2; }
@media (max-width: 880px){ .feat { grid-template-columns: 1fr; } .feat.flip .feat-media { order: 0; } }
.feat-media { display:flex; align-items:center; justify-content:center; position: relative; min-height: 420px; }
.feat-media::after { content:""; position:absolute; left:50%; top:50%; width:70%; height:60%; transform:translate(-50%,-50%); background: radial-gradient(50% 50% at 50% 50%, var(--glow, rgba(123,209,63,.13)), transparent 70%); filter: blur(16px); z-index:0; }
.feat-no { font-family: var(--mono); font-size: 12px; color: var(--green); letter-spacing: 2px; }
.feat-h { font-size: clamp(26px, 3.4vw, 40px); font-weight: 900; letter-spacing: -1px; line-height: 1.04; margin: 14px 0 0; max-width: 16ch; text-wrap: balance; }
.feat-h .g { color: var(--green); } .feat-h .y { color: var(--yellow); } .feat-h .r { color: var(--red); }
.feat-p { margin: 18px 0 0; color: var(--dim); font-size: 16.5px; line-height: 1.62; max-width: 46ch; text-wrap: pretty; }
.feat-p b { color: var(--ink); font-weight: 600; }
.feat-list { margin: 24px 0 0; display:flex; flex-direction:column; gap: 13px; }
.feat-li { display:flex; align-items:flex-start; gap: 13px; font-size: 15px; color: var(--ink); }
.feat-li .tick { font-family: var(--mono); color: var(--green); flex-shrink:0; margin-top: 1px; }
.feat-li span b { color: var(--ink); font-weight: 700; }
.feat-li span i { font-style: normal; color: var(--dim); }

/* ============================================================
   SPORTS STRIP
   ============================================================ */
.sports { display:grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 40px; }
@media (max-width: 720px){ .sports { grid-template-columns: 1fr; } }
.sportcell { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 26px; display:flex; flex-direction: column; gap: 14px; transition: .15s; }
.sportcell:hover { border-color: var(--line2); transform: translateY(-2px); }
.sportcell .sc-ball { width: 44px; height: 44px; }
.sportcell .sc-name { font-size: 21px; font-weight: 900; letter-spacing: -.4px; }
.sportcell .sc-fmt { font-family: var(--mono); font-size: 11.5px; color: var(--dim); letter-spacing: .4px; line-height: 1.6; }

/* ============================================================
   STEPS (how it works)
   ============================================================ */
.steps { display:grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 40px; }
@media (max-width: 760px){ .steps { grid-template-columns: 1fr; } }
.step { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 28px; }
.step-n { font-family: var(--mono); font-size: 12px; color: var(--bg0); background: var(--green); display:inline-block; padding: 5px 10px; border-radius: 7px; font-weight: 700; }
.step-h { font-size: 20px; font-weight: 800; letter-spacing: -.3px; margin: 18px 0 0; }
.step-p { color: var(--dim); font-size: 14.5px; line-height: 1.6; margin: 10px 0 0; text-wrap: pretty; }

/* ============================================================
   CTA BAND
   ============================================================ */
.band { margin-top: clamp(60px,9vw,120px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--green) 8%, transparent), transparent 60%); }
.band-in { max-width: 1240px; margin: 0 auto; padding: clamp(50px,7vw,90px) clamp(20px,5vw,56px); text-align: center; }
.band-h { font-size: clamp(30px,4.4vw,54px); font-weight: 900; letter-spacing: -1.6px; line-height: 1; text-wrap: balance; }
.band-h .g { color: var(--green); }
.band-sub { margin: 20px auto 0; max-width: 50ch; color: var(--dim); font-size: 17px; line-height: 1.6; text-wrap: pretty; }
.band .badges { justify-content: center; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot { padding: clamp(48px,6vw,72px) 0 56px; }
.foot-grid { display:flex; gap: clamp(30px,6vw,90px); flex-wrap: wrap; justify-content: space-between; }
.foot-brand { max-width: 30ch; }
.foot-brand p { margin-top: 16px; color: var(--dim); font-size: 13.5px; line-height: 1.6; }
.foot-cols { display:flex; gap: clamp(40px,7vw,90px); flex-wrap: wrap; }
.foot-col h4 { font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.2px; color: var(--faint); text-transform: uppercase; margin-bottom: 16px; }
.foot-col a { display:block; color: var(--dim); font-size: 14px; padding: 6px 0; transition: color .15s; }
.foot-col a:hover { color: var(--green); }
.foot-bar { margin-top: 50px; padding-top: 24px; border-top: 1px solid var(--line); display:flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; }
.foot-bar p { font-family: var(--mono); font-size: 11.5px; color: var(--faint); letter-spacing: .3px; }
.foot-bar .made { color: var(--dim); }

/* ============================================================
   LEGAL / DOC PAGES
   ============================================================ */
.doc-hero { padding: clamp(40px,6vw,72px) 0 clamp(28px,4vw,44px); border-bottom: 1px solid var(--line); }
.doc-kicker { font-family: var(--mono); font-size: 12px; letter-spacing: 1.5px; color: var(--green); }
.doc-h1 { font-size: clamp(32px,5vw,54px); font-weight: 900; letter-spacing: -1.6px; line-height: 1; margin-top: 16px; }
.doc-meta { margin-top: 20px; display:flex; gap: 18px; flex-wrap: wrap; font-family: var(--mono); font-size: 12px; color: var(--dim); letter-spacing: .3px; }
.doc-meta span { display:flex; align-items:center; gap:7px; }
.doc-body { padding: clamp(36px,5vw,56px) 0 clamp(60px,8vw,96px); }
.doc-lead { font-size: clamp(17px,1.7vw,20px); color: var(--ink); line-height: 1.6; max-width: 60ch; text-wrap: pretty; margin-bottom: 8px; }
.doc-sect { padding-top: 40px; }
.doc-sect h2 { font-size: clamp(20px,2.4vw,26px); font-weight: 800; letter-spacing: -.5px; display:flex; align-items: baseline; gap: 14px; }
.doc-sect h2 .nn { font-family: var(--mono); font-size: 13px; color: var(--green); flex-shrink: 0; }
.doc-sect h3 { font-size: 16px; font-weight: 700; margin-top: 26px; color: var(--ink); }
.doc-sect p { margin-top: 14px; color: var(--dim); font-size: 15.5px; line-height: 1.68; max-width: 64ch; text-wrap: pretty; }
.doc-sect p b { color: var(--ink); font-weight: 600; }
.doc-sect ul { margin: 14px 0 0; padding: 0; list-style: none; display:flex; flex-direction: column; gap: 11px; max-width: 64ch; }
.doc-sect li { display:flex; align-items: flex-start; gap: 12px; color: var(--dim); font-size: 15.5px; line-height: 1.6; }
.doc-sect li .tick { font-family: var(--mono); color: var(--green); flex-shrink:0; margin-top: 2px; }
.doc-sect li b { color: var(--ink); font-weight: 600; }
.doc-sect a.inline { color: var(--green-glow); border-bottom: 1px solid color-mix(in srgb, var(--green) 40%, transparent); }
.doc-sect a.inline:hover { border-bottom-color: var(--green); }

/* data table */
.data-table { margin-top: 18px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; max-width: 760px; }
.data-row { display:grid; grid-template-columns: 1.1fr 1.4fr 1fr; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--line); align-items: start; }
.data-row:last-child { border-bottom: 0; }
.data-row.head { background: var(--surface); font-family: var(--mono); font-size: 10.5px; letter-spacing: 1px; color: var(--faint); text-transform: uppercase; }
.data-row .dt-k { font-weight: 700; font-size: 14.5px; }
.data-row .dt-v { color: var(--dim); font-size: 14px; line-height: 1.5; }
.data-row .dt-tag { font-family: var(--mono); font-size: 11px; color: var(--green); }
@media (max-width: 640px){ .data-row { grid-template-columns: 1fr; gap: 6px; } .data-row.head { display:none; } }

/* callout card */
.callout { margin-top: 28px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--green); border-radius: 14px; padding: 22px 24px; max-width: 64ch; }
.callout.warn { border-left-color: var(--yellow); }
.callout.danger { border-left-color: var(--red); }
.callout h4 { font-size: 15px; font-weight: 800; margin-bottom: 8px; }
.callout p { color: var(--dim); font-size: 14.5px; line-height: 1.6; margin: 0; }
.callout p + p { margin-top: 10px; }
.callout a.inline { color: var(--green-glow); }

/* contact grid (support page) */
.contact-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 40px; }
@media (max-width: 720px){ .contact-grid { grid-template-columns: 1fr; } }
.contact-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 26px; display:flex; flex-direction: column; gap: 10px; }
.contact-card .cc-ico { width: 40px; height: 40px; border-radius: 11px; background: var(--surface2); border: 1px solid var(--line2); display:grid; place-items: center; margin-bottom: 6px; }
.contact-card h3 { font-size: 18px; font-weight: 800; letter-spacing: -.3px; }
.contact-card p { color: var(--dim); font-size: 14.5px; line-height: 1.55; }
.contact-card a.big { font-family: var(--mono); font-size: 15px; color: var(--green-glow); margin-top: 4px; word-break: break-all; }
.contact-card .chip-row { display:flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.contact-card .ch { font-family: var(--mono); font-size: 11px; color: var(--dim); background: var(--surface2); border: 1px solid var(--line); border-radius: 999px; padding: 6px 11px; }

/* faq */
.faq { margin-top: 36px; display:flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); padding: 24px 0; }
.faq-q { font-size: 17px; font-weight: 700; letter-spacing: -.2px; display:flex; gap: 14px; }
.faq-q .qn { font-family: var(--mono); color: var(--green); font-size: 13px; flex-shrink:0; margin-top: 2px; }
.faq-a { margin-top: 12px; padding-left: 30px; color: var(--dim); font-size: 15px; line-height: 1.62; max-width: 70ch; text-wrap: pretty; }
.faq-a a.inline { color: var(--green-glow); border-bottom: 1px solid color-mix(in srgb, var(--green) 40%, transparent); }

/* steps list (delete page) */
.flow { margin-top: 28px; display:flex; flex-direction: column; gap: 14px; max-width: 700px; counter-reset: step; }
.flow-step { display:flex; gap: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; align-items: flex-start; }
.flow-step .fs-n { width: 32px; height: 32px; flex-shrink:0; border-radius: 9px; background: var(--surface2); border: 1px solid var(--line2); display:grid; place-items: center; font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--green); }
.flow-step .fs-b h4 { font-size: 16px; font-weight: 700; }
.flow-step .fs-b p { color: var(--dim); font-size: 14.5px; line-height: 1.55; margin-top: 6px; }
.flow-step .fs-b p b { color: var(--ink); }

/* back link */
.backlink { display:inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; color: var(--dim); letter-spacing: .5px; margin-bottom: 4px; transition: color .15s; }
.backlink:hover { color: var(--green); }

/* generic button */
.btn { display:inline-flex; align-items:center; gap: 10px; font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: -.2px;
  background: var(--green); color: var(--bg0); padding: 14px 22px; border-radius: 12px; border: none; cursor: pointer;
  box-shadow: 0 12px 30px -12px rgba(123,209,63,.6); transition: transform .15s; }
.btn:hover { transform: translateY(-2px); }
.btn.ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--line2); box-shadow: none; }
.btn.ghost:hover { border-color: var(--dim); }