@import url('raliera-brand.css');
/* ══════════════════════════════════════════════════════════════════════════
   RALIERA — SITE KIT v2
   The system, measured against faunarobotics · clay · apollo · typeform
   (2026-08-09). Full teardown: PREMIUM-TEARDOWN.md

   Non-negotiables. Break one and the page stops looking expensive:
     1. ONE typeface (Axiforma). Mono only for 11.5px eyebrows and data.
     2. Display weight 500. Never 700, never 900. Presence comes from size.
     3. Warm paper background. White is for raised surfaces only.
     4. Six type sizes for the whole page, all from --t-*.
     5. Accent is jewelry. Two, maybe three uses per screen.
   ══════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Axiforma';src:url('axiforma-regular.woff2') format('woff2');font-weight:400;font-display:swap;}
@font-face{font-family:'Axiforma';src:url('axiforma-medium.woff2') format('woff2');font-weight:500;font-display:swap;}
@font-face{font-family:'Axiforma';src:url('axiforma-semibold.woff2') format('woff2');font-weight:600;font-display:swap;}
@font-face{font-family:'Axiforma';src:url('axiforma-bold.woff2') format('woff2');font-weight:700;font-display:swap;}

:root{




  /* legacy aliases — old page CSS keeps working while it's converted */
  --brand:'Axiforma',system-ui,sans-serif;
  --display:'Axiforma',system-ui,sans-serif;
  --muted:var(--ink-2); --faint:var(--ink-3);
  --line:var(--hair-soft);
  --accent-h:var(--accent-deep); --accent-l:var(--rl-accent-soft);
  --cream1:var(--accent-wash); --cream2:var(--paper); --cream3:var(--paper-2);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  background:var(--paper);color:var(--ink);
  font-family:'Axiforma',system-ui,sans-serif;
  font-size:var(--t-body);font-weight:400;line-height:1.6;
  letter-spacing:-0.011em;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;height:auto;}
::selection{background:var(--accent);color:#fff;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px;}

h1,h2,h3,h4{font-weight:500;letter-spacing:-0.03em;line-height:1.05;text-wrap:balance;}
h1{font-size:var(--t-h1);letter-spacing:-0.038em;line-height:0.98;max-width:15ch;}
h2{font-size:var(--t-h2);letter-spacing:-0.034em;line-height:1.02;max-width:19ch;}
h3{font-size:var(--t-h3);letter-spacing:-0.024em;}
em{font-style:normal;color:var(--accent);}
strong,b{font-weight:500;color:var(--ink);}

.mono{font-family:'Axiforma',system-ui,sans-serif;font-size:var(--t-mono);
  letter-spacing:0.12em;text-transform:uppercase;font-weight:500;color:var(--ink-3);}
.shell{max-width:1180px;margin:0 auto;padding-inline:var(--gutter);}
.shell-narrow{max-width:820px;margin:0 auto;padding-inline:var(--gutter);}
section{padding:var(--rhythm) 0;}
.band{background:var(--paper-2);}
.rule{height:1px;background:var(--hair-soft);border:0;}

.mark.center{margin-inline:auto;text-align:center;max-width:820px;}
.mark.center h2{max-width:21ch;margin-inline:auto;}
.mark h2,.mark h1{margin-top:18px;}
.said{font-size:var(--t-lead);color:var(--ink-2);line-height:1.5;max-width:46ch;
  margin-top:20px;letter-spacing:-0.012em;}
.mark.center .said{margin-inline:auto;}
.muted{color:var(--ink-2);}
.small{font-size:var(--t-sm);color:var(--ink-2);line-height:1.65;}

/* ── FLOATING PILL NAV ───────────────────────────────────────────────── */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;padding:18px var(--gutter);}
.nav .rail{position:relative;z-index:2;max-width:1180px;margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;gap:24px;
  background:rgba(247,243,236,0.72);backdrop-filter:blur(18px) saturate(1.6);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);
  border:1px solid var(--hair-soft);border-radius:var(--r-pill);
  padding:10px 10px 10px 22px;
  box-shadow:0 1px 0 rgba(255,255,255,0.7) inset, 0 8px 30px -14px rgba(25,21,18,0.18);
  transition:box-shadow var(--d-slow) var(--spring),background var(--d-slow) var(--spring);}
.nav.stuck .rail{background:rgba(247,243,236,0.9);
  box-shadow:0 1px 0 rgba(255,255,255,0.8) inset, 0 14px 44px -18px rgba(25,21,18,0.30);}
.nav img{height:24px;}
.nav-logo{position:relative;display:inline-flex;height:24px;aspect-ratio:3927/985;}
.nav-logo img{position:absolute;left:0;top:0;width:100%;height:100%;transition:opacity var(--d-slow) var(--spring);}
.nav-logo .logo-dark{opacity:0;}
.nav.on-dark .nav-logo .logo-light{opacity:0;}
.nav.on-dark .nav-logo .logo-dark{opacity:1;}
.nav .links{display:flex;gap:6px;align-items:center;}
.nav .links a{font-size:var(--t-sm);font-weight:500;color:var(--ink-2);
  padding:9px 14px;border-radius:var(--r-pill);
  transition:color var(--d-base) var(--spring),background var(--d-base) var(--spring);}
.nav .links a.on{color:var(--ink);background:rgba(25,21,18,0.05);}
@media (hover:hover){.nav .links a:hover{color:var(--ink);background:rgba(25,21,18,0.05);}}
.nav .right{display:flex;align-items:center;gap:4px;}
.page-top{padding-top:calc(96px + 4vh);}

/* ── NAV, on-dark — while a dark hero (.darkhero) is behind the fixed nav,
   toggled by scroll position in site-v2.js. A distinct warm-graphite chip
   (not just a darkened version of the light pill) so it reads as designed
   for this ground, not left over from the light one; reverts once you
   scroll past the hero into the light page. */
.nav.on-dark .rail{background:rgba(41,30,21,0.72);border-color:rgba(255,255,255,0.14);
  box-shadow:0 1px 0 rgba(255,255,255,0.09) inset, 0 22px 46px -20px rgba(0,0,0,0.65);}
.nav.on-dark.stuck .rail{background:rgba(32,23,16,0.86);border-color:rgba(255,255,255,0.16);
  box-shadow:0 1px 0 rgba(255,255,255,0.1) inset, 0 26px 54px -22px rgba(0,0,0,0.72);}
.nav.on-dark .links a{color:rgba(247,243,236,0.7);}
.nav.on-dark .links a.on{color:#fff;background:rgba(255,255,255,0.09);}
@media (hover:hover){.nav.on-dark .links a:hover{color:#fff;background:rgba(255,255,255,0.09);}}

/* ── MOBILE NAV — burger + full-screen drawer ───────────────────────────
   Below 900px .nav .links (the pill link row) is hidden and, until now,
   never replaced — Features/Formats/Pricing/About/Contact had NO entry
   point on phones except scrolling to the footer. This adds a burger
   toggle in .right and a full-screen drawer with the same links at
   thumb-friendly size, plus Leagues + Log in. Desktop is untouched. */
.nav-burger{display:none;flex:none;width:40px;height:40px;border-radius:50%;
  background:rgba(25,21,18,0.06);border:0;padding:0;margin-left:2px;cursor:pointer;
  position:relative;-webkit-tap-highlight-color:transparent;}
.nav-burger span{display:block;position:absolute;left:11px;right:11px;height:2px;
  border-radius:2px;background:var(--ink);
  transition:transform .32s var(--spring),opacity .18s linear,top .32s var(--spring);}
.nav-burger span:nth-child(1){top:15px;}
.nav-burger span:nth-child(2){top:19px;}
.nav-burger span:nth-child(3){top:23px;}
.nav.on-dark .nav-burger{background:rgba(255,255,255,0.12);}
.nav.on-dark .nav-burger span{background:#fff;}
.nav-open .nav-burger{background:rgba(25,21,18,0.08);}
.nav-open .nav-burger span:nth-child(1){top:19px;transform:rotate(45deg);}
.nav-open .nav-burger span:nth-child(2){opacity:0;}
.nav-open .nav-burger span:nth-child(3){top:19px;transform:rotate(-45deg);}

.nav-menu{position:fixed;inset:0;z-index:1;background:var(--paper);
  display:flex;flex-direction:column;padding:104px 24px 32px;
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .3s var(--spring),transform .3s var(--spring),visibility 0s linear .3s;
  overflow-y:auto;-webkit-overflow-scrolling:touch;}
.nav-open .nav-menu{opacity:1;visibility:visible;transform:none;
  transition:opacity .3s var(--spring),transform .3s var(--spring);}
.nav-menu a{font-size:22px;font-weight:500;letter-spacing:-0.015em;color:var(--ink);
  padding:16px 2px;border-bottom:1px solid var(--hair-soft);}
.nav-menu a.on{color:var(--accent-deep);}
.nav-menu .nav-menu-cta{margin-top:26px;display:flex;flex-direction:column;gap:12px;}
.nav-menu .nav-menu-cta .btn{width:100%;justify-content:center;font-size:16px;padding:15px 20px;}
html.nav-lock,html.nav-lock body{overflow:hidden;height:100%;}

@media(max-width:900px){.nav-burger{display:block;}}
.nav.on-dark .btn-quiet{color:rgba(247,243,236,0.82);}
@media (hover:hover){.nav.on-dark .btn-quiet:hover{color:#fff;}}

/* ── BUTTONS — trailing icon nested in its own circle ────────────────── */
.btn{display:inline-flex;align-items:center;gap:12px;font-family:inherit;
  font-size:var(--t-sm);font-weight:500;letter-spacing:-0.01em;cursor:pointer;
  border:1px solid transparent;border-radius:var(--r-pill);
  padding:11px 12px 11px 22px;
  transition:transform var(--d-base) var(--spring),background var(--d-base) var(--spring),
             border-color var(--d-base) var(--spring),color var(--d-base) var(--spring);}
.btn.plain{padding-right:22px;}
.btn .dot{width:26px;height:26px;border-radius:var(--r-pill);flex:none;
  display:grid;place-items:center;font-size:12px;line-height:1;
  transition:transform var(--d-base) var(--spring),background var(--d-base) var(--spring);}
.btn-solid{background:var(--ink);color:var(--paper);}
.btn-solid .dot{background:rgba(255,255,255,0.14);}
.btn-accent{background:var(--accent);color:#fff;}
.btn-accent .dot{background:rgba(255,255,255,0.20);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--hair);}
.btn-ghost .dot{background:rgba(25,21,18,0.06);}
.btn-quiet{background:transparent;color:var(--ink-2);}
@media (hover:hover){
  .btn:hover{transform:translateY(-1px);}
  .btn:hover .dot{transform:translate(2px,-1px) scale(1.06);}
  .btn-accent:hover{background:var(--accent-deep);}
  .btn-ghost:hover{border-color:var(--ink);}
  .btn-quiet:hover{color:var(--ink);}
}
.btn:active{transform:scale(0.985);}
.btn-lg{font-size:var(--t-body);padding:14px 14px 14px 26px;}
.btn-lg .dot{width:32px;height:32px;font-size:13px;}
.btn-full{width:100%;justify-content:center;}
.link-q{color:var(--accent-deep);font-weight:500;}
.link-q:hover{text-decoration:underline;text-underline-offset:3px;}

/* ── DOUBLE-BEZEL MEDIA — concentric radii, mounted not pasted ───────── */
.bezel{background:rgba(25,21,18,0.045);border:1px solid var(--hair-soft);
  border-radius:var(--r-lg);padding:10px;}
.bezel .core{border-radius:calc(var(--r-lg) - 10px);overflow:hidden;
  background:var(--raised);border:1px solid var(--hair-soft);
  box-shadow:0 40px 90px -50px rgba(25,21,18,0.5);}
.cap{text-align:center;color:var(--ink-3);font-size:var(--t-sm);margin-top:18px;}

/* ── ICONS — drawn, not imported. 24×24, stroke 1.5, round caps. ──
   Inline <svg class="ico"> at the use site. Accent by default; .ico-ink for quiet. */
/* Stroke weight + round joins are matched to the PRODUCT icon set
   (Brand & Design/Media/Icons/Normalized) so marketing and app read as one family. */
.ico{width:28px;height:28px;flex:none;stroke:var(--accent);fill:none;
  stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;}
/* the app's own icons are outlined paths filled with currentColor */
.ico-solid{width:28px;height:28px;flex:none;fill:var(--accent);stroke:none;color:var(--accent);}
.ico-ink{stroke:var(--ink-3);}
/* display:block, not inline — an inline <svg> sits on a text baseline, so its
   effective height depends on the surrounding line box and icons drift out of
   alignment with each other. */
.ico,.ico-solid{display:block;}
/* This used to read `.tile .ico` only, which silently skipped every .ico-solid
   — so a card row mixing the two stroke/fill variants sat 14px out of
   alignment. Both variants get the same spacing. */
.tile .ico,.tile .ico-solid,.reason .ico,.reason .ico-solid{margin-bottom:14px;}
.ico-chip .ico,.ico-chip .ico-solid{margin-bottom:0;}
/* STAT TILES — the tinted square behind an icon. Decorative only: they mean
   nothing, and must never encode a status, a chart series or a league type.
   Cycles violet → blue → teal by position inside a grid, so a 3-up reads as a
   set rather than three unrelated colours. All three sit 127–167° from the
   brand orange, so none can be mistaken for a faded accent — never add a warm
   tile to this set. Put .ico-chip on the wrapper and .ico on the svg inside. */
.ico-chip{width:46px;height:46px;flex:none;display:grid;place-items:center;
  background:var(--rl-tile-1);border:0;border-radius:var(--r-sm);margin-bottom:16px;}
.ico-chip .ico{width:22px;height:22px;margin:0;stroke:var(--rl-tile-1i);}
.grid > *:nth-child(3n+2) .ico-chip{background:var(--rl-tile-2);}
.grid > *:nth-child(3n+2) .ico-chip .ico{stroke:var(--rl-tile-2i);}
.grid > *:nth-child(3n+3) .ico-chip{background:var(--rl-tile-3);}
.grid > *:nth-child(3n+3) .ico-chip .ico{stroke:var(--rl-tile-3i);}
/* filled icons carry the tint on fill, not stroke */
.ico-chip .ico-solid{fill:var(--rl-tile-1i);stroke:none;}
.grid > *:nth-child(3n+2) .ico-chip .ico-solid{fill:var(--rl-tile-2i);}
.grid > *:nth-child(3n+3) .ico-chip .ico-solid{fill:var(--rl-tile-3i);}

/* ── COURT MOTIF — the brand shape. Faint court lines behind dark closers. ── */
.closer{position:relative;overflow:hidden;}
.closer>.shell{position:relative;z-index:1;}
.closer::before{content:"";position:absolute;top:50%;left:50%;
  width:min(1080px,120vw);aspect-ratio:2.2/1;transform:translate(-50%,-50%);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 100' fill='none' stroke='%23F7F3EC' stroke-width='0.7'%3E%3Crect x='10' y='10' width='200' height='80' rx='3'/%3E%3Cline x1='110' y1='10' x2='110' y2='90'/%3E%3Cline x1='76' y1='10' x2='76' y2='90'/%3E%3Cline x1='144' y1='10' x2='144' y2='90'/%3E%3Cline x1='10' y1='50' x2='76' y2='50'/%3E%3Cline x1='144' y1='50' x2='210' y2='50'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity:0.06;pointer-events:none;}

/* ── CLAY EMBLEMS — generated soft-3D objects, assets/emblems/ ──
   Each ships with its cream ground and soft shadow baked in. `darken` blend
   makes that ground vanish on --paper AND --paper-2 while keeping the shadow,
   so the object reads as free-floating on any warm surface. */
.emb{width:96px;height:96px;flex:none;display:block;
  mix-blend-mode:darken;
  transition:transform var(--d-slow) var(--spring);}
.lrow:hover .emb{transform:translateY(-3px) scale(1.04);}
.emb-lg{width:112px;height:112px;}
.emb-sm{width:60px;height:60px;}
@media(max-width:900px){.emb{width:76px;height:76px;}}
@media(max-width:560px){.emb{width:56px;height:56px;}}

/* ── SCENE ILLUSTRATIONS — vector, friendly, on-brand. Never a photo. ──
   Sits inside .bezel > .core like an image would. See _renders/illustrations.md */
.scene{display:block;width:100%;height:auto;background:var(--paper-2);}
.scene .ln{stroke:var(--ink);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.scene .ln-2{stroke:var(--ink-3);stroke-width:1.4;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.scene .ln-a{stroke:var(--accent);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.scene .dash{stroke-dasharray:5 5;}
.scene .fill-p{fill:var(--raised);} .scene .fill-w{fill:var(--accent-wash);}
.scene .fill-a{fill:var(--accent);} .scene .fill-i{fill:var(--ink);}
.scene .t{font-family:'Axiforma',system-ui,sans-serif;font-size:9px;letter-spacing:0.1em;
  text-transform:uppercase;fill:var(--ink-3);}
.scene .t-a{fill:var(--accent);} .scene .t-i{fill:var(--ink);}
.scene .nm{font-family:'Axiforma',sans-serif;font-size:10px;font-weight:500;fill:var(--ink);}
.scene .nm-w{fill:#fff;}

/* ── IMAGE PLACEHOLDER — a dark box carrying the prompt for the shot ──
   Drop inside .bezel > .core (or standalone). When the real asset exists,
   replace the whole .ph with an <img>. The .desc text IS the art direction. */
.ph{position:relative;background:var(--rl-dark-2);display:grid;place-items:center;
  text-align:center;padding:clamp(24px,4vw,48px);width:100%;}
.ph::before{content:"";position:absolute;inset:12px;
  border:1px dashed rgba(247,243,236,0.16);border-radius:var(--r-sm);
  pointer-events:none;}
.ph .in{position:relative;display:grid;gap:12px;justify-items:center;max-width:52ch;}
.ph .tag{font-family:'Axiforma',system-ui,sans-serif;font-size:var(--t-mono);
  letter-spacing:0.12em;text-transform:uppercase;font-weight:500;
  color:var(--accent);background:rgba(232,93,20,0.12);
  padding:5px 12px;border-radius:var(--r-pill);}
.ph .desc{color:rgba(247,243,236,0.72);font-size:var(--t-sm);line-height:1.6;}
.ph-21x9{aspect-ratio:21/9;} .ph-16x9{aspect-ratio:16/9;}
.ph-4x3{aspect-ratio:4/3;}   .ph-1x1{aspect-ratio:1/1;}
.ph-3x4{aspect-ratio:3/4;}   .ph-4x5{aspect-ratio:4/5;}
@media(max-width:560px){.ph-21x9,.ph-16x9{aspect-ratio:4/3;}.ph-3x4,.ph-4x5{aspect-ratio:1/1;}}

/* ── SURFACES ────────────────────────────────────────────────────────── */
/* ROUTE C (2026-08-11) — cards float instead of being outlined.
   Ground, bands and section rhythm are unchanged; only the card TREATMENT
   comes from the product, so an app screenshot dropped into a marketing page
   no longer looks like a different design system.
   The border is gone, so the tight 1px contact layer inside --rl-card-shadow
   is what draws the edge now. Do not remove it and keep only the soft layer. */
.panel{background:var(--raised);border:var(--rl-card-border);
  border-radius:var(--r-lg);padding:clamp(26px,3.4vw,44px);
  box-shadow:var(--rl-panel-shadow);}
.tile{background:var(--raised);border:var(--rl-card-border);
  border-radius:var(--rl-r-mkt-card);padding:clamp(20px,2.4vw,28px);
  box-shadow:var(--rl-card-shadow);
  transition:box-shadow var(--d-base) var(--spring),transform var(--d-base) var(--spring);}
@media (hover:hover){
  .tile:hover{box-shadow:var(--rl-card-shadow-hover);transform:translateY(-3px);}
}

/* ── LEDGER ROWS — editorial, not a card grid ────────────────────────── */
.ledger{border-top:1px solid var(--hair-soft);}
.lrow{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(18px,3vw,44px);
  align-items:baseline;padding:clamp(24px,3vw,36px) 0;}
.lrow:has(.emb){align-items:center;}
.lrow{
  border-bottom:1px solid var(--hair-soft);
  transition:padding-left var(--d-slow) var(--spring);}
@media (hover:hover){.lrow:hover{padding-left:14px;}}
.lrow h3{font-size:clamp(22px,2.6vw,34px);line-height:1.1;letter-spacing:-0.03em;}
.lrow p{color:var(--ink-2);font-size:var(--t-sm);margin-top:8px;max-width:44ch;line-height:1.65;}
.lrow .n{white-space:nowrap;}

/* ── STEPS ───────────────────────────────────────────────────────────── */
.steps{display:grid;gap:clamp(28px,3.4vw,48px);max-width:760px;}
.stp{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,2.4vw,32px);align-items:start;}
.stp .num{width:38px;height:38px;border-radius:var(--r-pill);flex:none;
  display:grid;place-items:center;font-size:var(--t-sm);font-weight:500;
  border:1px solid var(--hair);color:var(--ink-3);background:var(--raised);}
.stp.on .num{background:var(--accent);border-color:var(--accent);color:#fff;}
.stp p{color:var(--ink-2);margin-top:8px;font-size:var(--t-sm);line-height:1.65;max-width:52ch;}

/* ── FORMS ───────────────────────────────────────────────────────────── */
.field{display:grid;gap:8px;margin-bottom:16px;}
.field label{font-size:var(--t-sm);font-weight:500;color:var(--ink-2);}
/* FIELDS ARE NEVER TINTED. This was sitting on --paper, i.e. at ground level,
   which is the exact pattern that reads as DISABLED — and it only lifted to
   white on focus, so every untouched field on the site looked switched off.
   Fields are --raised from the start; focus changes the border, not the fill. */
.input{font-family:inherit;font-size:var(--t-body);color:var(--ink);
  background:var(--raised);border:1px solid var(--hair);border-radius:var(--r-sm);
  padding:13px 15px;width:100%;
  transition:border-color var(--d-fast) var(--spring),
             box-shadow var(--d-fast) var(--spring);}
.input::placeholder{color:var(--ink-3);}
.input:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(232,93,20,0.10);}
.input[aria-invalid="true"]{border-color:var(--danger);
  box-shadow:0 0 0 4px rgba(180,74,60,0.10);}
.field-error{color:var(--danger);font-size:var(--t-sm);}
textarea.input{resize:vertical;min-height:130px;line-height:1.6;}

/* ── STATES — full lifecycle, one place ──────────────────────────────── */
button:disabled,input:disabled,textarea:disabled,[aria-disabled="true"]{
  opacity:.45;cursor:not-allowed;box-shadow:none;transform:none!important;}
[aria-busy="true"]{position:relative;pointer-events:none;color:transparent!important;}
[aria-busy="true"]::after{content:"";position:absolute;inset:0;margin:auto;
  width:17px;height:17px;border:2px solid currentColor;border-top-color:transparent;
  border-radius:var(--r-pill);color:#fff;animation:spin .62s linear infinite;}
.btn-ghost[aria-busy="true"]::after,.btn-quiet[aria-busy="true"]::after{color:var(--accent);}
@keyframes spin{to{transform:rotate(360deg);}}
.pill{display:inline-block;font-size:var(--t-sm);font-weight:500;
  padding:4px 12px;border-radius:var(--r-pill);}
.pill-success{background:var(--success-bg);color:var(--success);}
.pill-danger{background:var(--danger-bg);color:var(--danger);}
.pill-warning{background:var(--warning-bg);color:var(--warning);}
.pill-info{background:var(--info-bg);color:var(--info);}
.pill-accent{background:var(--accent-wash);color:var(--accent-deep);}

/* ── DARK CLOSER ─────────────────────────────────────────────────────── */
.closer{text-align:center;background:var(--ink);color:var(--paper);}
.closer h2{color:var(--paper);max-width:16ch;margin-inline:auto;}
.closer .said{color:rgba(247,243,236,0.62);margin-inline:auto;}
.closer .mono{color:rgba(247,243,236,0.42);}
.closer .acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:36px;}
.closer .btn-ghost{color:var(--paper);border-color:rgba(247,243,236,0.22);}
.closer .btn-ghost .dot{background:rgba(247,243,236,0.12);}
@media (hover:hover){.closer .btn-ghost:hover{border-color:var(--paper);}}

/* ── FOOTER ──────────────────────────────────────────────────────────── */
.foot{padding:52px 0 44px;border-top:1px solid var(--hair-soft);}
.foot .top{display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:22px;}
.foot .links{display:flex;flex-wrap:wrap;gap:22px;}
.foot .links a{font-size:var(--t-sm);color:var(--ink-2);
  transition:color var(--d-base) var(--spring);}
@media (hover:hover){.foot .links a:hover{color:var(--ink);}}
.foot .fine{margin-top:30px;color:var(--ink-3);font-size:13px;line-height:1.7;}

/* ── ENTRY MOTION ────────────────────────────────────────────────────── */
.rise{opacity:0;transform:translateY(22px);
  transition:opacity var(--d-slow) var(--spring),transform var(--d-slow) var(--spring);}
.rise.seen{opacity:1;transform:none;}

@media(max-width:900px){
  .nav .links{display:none;}
  .steps{max-width:none;}
  .lrow{grid-template-columns:auto 1fr;}
  .lrow .n{grid-column:2;margin-top:6px;}
}
@media(max-width:560px){
  .nav{padding:12px 16px;}
  .nav .rail{padding:8px 8px 8px 16px;}
  .nav .right>a:first-child{display:none;}
  .nav .btn{font-size:13px;padding:9px 10px 9px 16px;}
  .nav .btn .dot{width:22px;height:22px;font-size:11px;}
  .page-top{padding-top:96px;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .rise{opacity:1;transform:none;transition:none;}
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important;}
}

/* ══════════════════════════════════════════════════════════════════════════
   COURT — regulation geometry. The brand's structural motif.
   USAPA: 44ft × 20ft (2.2:1). Non-volley zone extends 7ft from the NET on
   each side → NVZ lines at 15ft and 29ft = 34.09% / 65.91%. The centreline
   runs from each BASELINE to the NVZ line and stops — it never crosses the
   kitchen. Drawn landscape with the net vertical.
   ══════════════════════════════════════════════════════════════════════════ */
.court{position:relative;aspect-ratio:44/20;border:2px solid var(--ink);border-radius:5px;}
.court .net{position:absolute;left:50%;top:-2px;bottom:-2px;width:2px;
  background:var(--ink);transform:translateX(-1px);}
.court .nvz{position:absolute;top:0;bottom:0;width:1.5px;background:var(--ink);opacity:.45;}
.court .nvz-l{left:34.09%;} .court .nvz-r{left:65.91%;}
.court .mid{position:absolute;height:1.5px;background:var(--ink);opacity:.45;top:50%;
  transform:translateY(-.75px);}
.court .mid-l{left:0;width:34.09%;} .court .mid-r{right:0;width:34.09%;}
.court .no{position:absolute;left:9px;top:7px;font-family:'Axiforma',system-ui,sans-serif;
  font-size:10px;letter-spacing:.12em;color:var(--ink-3);}

.court.live{background:var(--accent-wash);border-color:var(--accent);}
.court.live .net,.court.live .nvz,.court.live .mid{background:var(--accent);}
.court.live .no{color:var(--accent);}
.court.idle{opacity:.32;}
.court.ghost{border-color:var(--hair);}
.court.ghost .net,.court.ghost .nvz,.court.ghost .mid{background:var(--hair);}

/* on dark surfaces */
.closer .court,.court.on-dark{border-color:rgba(247,243,236,.28);}
.closer .court .net,.court.on-dark .net{background:rgba(247,243,236,.4);}
.closer .court .nvz,.closer .court .mid,
.court.on-dark .nvz,.court.on-dark .mid{background:rgba(247,243,236,.22);}