/* ==========================================================================
   RosterUp — marketing site
   Tokens are named after documentation/23-visual-identity.md and must stay in
   sync with documentation/design/rosterup-theme-preview.html.
   Dark only: this is brand surface, not product surface (23 §10.1).
   No images, no external assets beyond the two Google fonts.
   ========================================================================== */

:root{
  color-scheme: dark;

  /* Surfaces — 23 §2.1 */
  --surface-sunken:#040507;
  --surface-0:#08090B;            /* Roster Black (kit) */
  --surface-1:#14151A;            /* Surface (kit)      */
  --surface-2:#1C1E25;
  --surface-3:#24262E;

  /* Borders — 23 §2.2 */
  --border-subtle:#1F2128;
  --border-default:#292B32;       /* Border (kit) */
  --border-strong:#8B93A1;

  /* Text — 23 §2.3 */
  --text-primary:#F8F8FA;         /* Roster White (kit) */
  --text-secondary:#9CA3AF;       /* Slate (kit)        */
  --text-disabled:#757D8B;

  /* Accent — 23 §2.4, §2.5 */
  --accent:#6D28D9;               /* Primary Purple — FILL ONLY on dark */
  --on-accent:#F8F8FA;
  --accent-hover:#7C3AED;         /* Purple Bright — hover and the 1dp edge */
  --accent-pressed:#5B21B6;
  --accent-glow:#8B5CF6;          /* Purple Glow — NON-TEXT ONLY */
  --accent-text:#A78BFA;          /* VIP Text (derived) — the readable purple */
  --accent-container:#211132;
  --on-accent-container:#C4B5FD;

  /* Neutral status, reused for the "coming soon" pill — 23 §2.7 (cancelled) */
  --status-cancelled:#22242B;
  --on-status-cancelled:#9CA3AF;
  --status-cancelled-edge:#8B93A1;

  /* Radius — 23 §4.2 */
  --radius-xs:6px; --radius-sm:8px; --radius-md:10px;
  --radius-lg:14px; --radius-xl:20px; --radius-pill:999px;

  /* Elevation — 23 §4.3 */
  --elev-1:0 1px 2px rgba(0,0,0,.40);
  --elev-2:0 4px 12px rgba(0,0,0,.48);

  /* Motion — 23 §7 */
  --motion-fast:120ms cubic-bezier(.2,0,0,1);
  --motion-base:180ms cubic-bezier(.2,0,0,1);

  /* Type — 23 §3.1 */
  --font-brand:"Space Grotesk", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-ui:Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  /* Layout */
  --gutter:16px;
  --measure:1280px;
}

@media (min-width:600px){ :root{ --gutter:24px; } }
@media (min-width:1024px){ :root{ --gutter:32px; } }

/* ---------- reset ---------- */

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--surface-0);
  color:var(--text-primary);
  font-family:var(--font-ui);
  font-size:15px;         /* body — 23 §3.2 */
  line-height:22px;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,p,ul,figure{ margin:0; }
ul{ padding:0; list-style:none; }
img,svg{ display:block; }
a{ color:inherit; }

::selection{ background:var(--accent); color:var(--on-accent); }

/* Focus ring — 23 §8. Never removed. */
:focus-visible{
  outline:2px solid var(--accent-text);
  outline-offset:2px;
  border-radius:var(--radius-xs);
}

.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--surface-1); color:var(--text-primary);
  padding:12px 16px; border-radius:var(--radius-md); z-index:20;
  font-weight:600;
}
.skip:focus{ left:var(--gutter); top:12px; }

.wrap{
  width:100%;
  max-width:var(--measure);
  margin:0 auto;
  padding-inline:var(--gutter);
}
.wrap--narrow{ max-width:760px; }
.nowrap{ white-space:nowrap; }

/* ---------- wordmark — 23 §9.1 ---------- */

.wordmark{ width:100%; height:auto; }
.wm-text{
  font-family:var(--font-brand);
  font-weight:700;
  font-size:100px;
  letter-spacing:6px;      /* +0.06em at 100px */
}
.wm-roster{ fill:var(--text-primary); }
.wm-up{ fill:var(--accent-glow); }         /* dark-field substitution, §9.1 */
.wm-badge{ fill:var(--accent); }
.wm-badge--edged{ stroke:var(--accent-glow); stroke-width:2; }
.wm-vip{ fill:var(--text-primary); letter-spacing:4px; }

.wordmark--sm{ width:158px; }              /* 19px cap height */
.wordmark--hero{ width:min(100%,420px); }
@media (min-width:600px){ .wordmark--hero{ width:min(100%,520px); } }

/* ---------- buttons — 23 §5.9 ---------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:0 20px;
  border-radius:var(--radius-md);
  border:1px solid transparent;
  font-family:var(--font-ui); font-size:13px; line-height:16px; font-weight:600;
  letter-spacing:.01em;
  text-decoration:none; cursor:pointer;
  transition:background-color var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast);
}
.btn--lg{ min-height:54px; padding:0 26px; border-radius:var(--radius-lg); font-size:15px; line-height:20px; }
.btn--block{ width:100%; }

.btn--primary{
  background:var(--accent);
  color:var(--on-accent);
  border-color:var(--accent-hover);   /* the 1dp edge, 23 §2.4 — 3.50:1 on the ground */
}
.btn--primary:hover{ background:var(--accent-hover); }
.btn--primary:active{ background:var(--accent-pressed); border-color:var(--accent-pressed); }

.btn--outline{
  background:transparent;
  color:var(--accent-text);
  border-color:var(--accent-hover);
}
.btn--outline:hover{ background:var(--accent-container); }

.btn--ghost{
  background:transparent;
  color:var(--text-primary);
  border-color:var(--border-strong);
}
.btn--ghost:hover{ background:var(--surface-2); }

.btn[disabled],.btn[aria-disabled="true"]{
  background:var(--surface-2); color:var(--text-disabled);
  border-color:transparent; cursor:default; pointer-events:none;
}

.link{
  position:relative;
  color:var(--accent-text);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.link:hover{ color:var(--on-accent-container); }
/* 23 §8: an inline link inside prose still gets a 44px-tall hit area, painted
   over its own line box so nothing moves. */
.link::after{
  content:""; position:absolute; left:0; right:0; top:50%;
  height:44px; transform:translateY(-50%);
}

/* ---------- header ---------- */

.site-header{
  position:sticky; top:0; z-index:10;
  background:var(--surface-0);
  border-bottom:1px solid var(--border-default);
}
.header__row{
  display:flex; align-items:center; gap:16px;
  min-height:64px;
  flex-wrap:wrap;
}
.header__brand{
  display:flex; align-items:center;
  min-height:44px; padding:12px 0;
  text-decoration:none;
}

.nav-toggle{
  margin-left:auto;
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px; padding:0 12px;
  background:transparent; color:var(--text-primary);
  border:1px solid var(--border-strong); border-radius:var(--radius-md);
  font-family:var(--font-ui); font-size:13px; font-weight:600; cursor:pointer;
}
.nav-toggle__bars{ display:inline-grid; gap:3px; }
.nav-toggle__bars span{ display:block; width:16px; height:2px; background:currentColor; }

.site-nav{ width:100%; }
.site-nav__list{
  display:flex; flex-direction:column; gap:4px;
  padding:8px 0 12px;
  border-top:1px solid var(--border-subtle);
  margin-top:4px;
}
.site-nav__list a{
  display:flex; align-items:center; min-height:44px;
  color:var(--text-secondary); text-decoration:none;
  font-weight:500;
}
.site-nav__list a:hover{ color:var(--text-primary); }
.site-nav__actions{ display:flex; gap:12px; padding-bottom:16px; }
.site-nav__actions .btn{ flex:1 1 auto; }

/* Collapsed by default on compact; main.js sets [hidden] once it runs so the
   nav is reachable with no JavaScript at all. */
.site-nav[hidden]{ display:none; }

@media (min-width:900px){
  .nav-toggle{ display:none; }
  .site-nav,.site-nav[hidden]{
    display:flex; width:auto; margin-left:auto; align-items:center; gap:28px;
  }
  .site-nav__list{
    flex-direction:row; gap:24px; padding:0; border-top:0; margin-top:0;
  }
  .site-nav__actions{ padding-bottom:0; }
  .site-nav__actions .btn{ flex:0 0 auto; min-height:44px; }
}

/* ---------- hero — 23 §10.2, code-only treatment ---------- */

.hero{
  position:relative;
  isolation:isolate;
  background:var(--surface-0);
  border-bottom:1px solid var(--border-default);
  overflow:hidden;
}
.hero__bg{ position:absolute; inset:0; z-index:-1; pointer-events:none; }

/* 2. purple radial glow — accent at 22%, plus a tighter accent-glow at 12% */
.hero__glow{
  position:absolute; inset:0;
  background:
    radial-gradient(closest-side ellipse at 50% 74%, rgba(139,92,246,.12) 0%, rgba(139,92,246,0) 100%) 50% 60% / 60% 46% no-repeat,
    radial-gradient(closest-side ellipse at 50% 62%, rgba(109,40,217,.22) 0%, rgba(109,40,217,0) 100%) 50% 62% / 130% 70% no-repeat;
}

/* 3. light beams — ~18° from vertical, 7% accent-glow, blurred, never animated */
.hero__beams{ position:absolute; inset:-20% -10%; filter:blur(18px); }
.beam{
  position:absolute; top:-10%; height:120%;
  background:linear-gradient(to bottom, rgba(139,92,246,.07) 0%, rgba(139,92,246,.04) 45%, rgba(139,92,246,0) 100%);
  transform:rotate(18deg);
}
/* The fan sits clear of the mark and the copy, which are left-aligned:
   §10.2 requires the beams never cross the mark's bounding box. */
.beam--1{ left:-4%; width:7%; }
.beam--2{ left:57%; width:12%; }
.beam--3{ left:72%; width:9%; }
.beam--4{ left:87%; width:6%; }

/* 4. vignette — the layer that guarantees the ratios in §10.1 */
.hero__vignette{
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom, #08090B 0%, rgba(8,9,11,.86) 26%, rgba(8,9,11,.34) 58%, rgba(8,9,11,.72) 100%),
    radial-gradient(ellipse at 50% 56%, rgba(8,9,11,0) 40%, rgba(8,9,11,.72) 100%);
}

/* §10.2: under reduced transparency or forced colours the treatment is dropped. */
@media (prefers-reduced-transparency:reduce){
  .hero__glow,.hero__beams{ display:none; }
}
@media (forced-colors:active){
  .hero__glow,.hero__beams,.hero__vignette{ display:none; }
}

.hero__inner{
  position:relative;
  padding-block:56px 64px;
  display:flex; flex-direction:column; align-items:flex-start;
  gap:0;
}
@media (min-width:600px){ .hero__inner{ padding-block:88px 96px; } }

.tagline{
  margin-top:24px;
  font-family:var(--font-brand);
  font-weight:500;
  font-size:13px; line-height:18px;
  letter-spacing:.18em;
  color:var(--text-primary);
}
.tagline__dot{ color:var(--accent-text); }
@media (min-width:600px){ .tagline{ font-size:14px; } }

.hero__headline{
  margin-top:28px;
  max-width:20ch;
  font-family:var(--font-brand);
  font-weight:700;
  font-size:32px; line-height:38px; letter-spacing:-.02em;
  color:var(--text-primary);
}
@media (min-width:600px){ .hero__headline{ font-size:40px; line-height:46px; } }

.hero__descriptor{
  margin-top:16px;
  max-width:62ch;
  font-size:16px; line-height:24px;
  color:var(--text-secondary);
}

.hero__actions{
  margin-top:32px;
  display:flex; flex-wrap:wrap; gap:12px;
  width:100%;
}
.hero__actions .btn{ flex:1 1 220px; }
@media (min-width:600px){ .hero__actions .btn{ flex:0 0 auto; min-width:200px; } }

.hero__note{
  margin-top:16px;
  font-size:13px; line-height:18px;
  color:var(--text-secondary);
}

/* ---------- sections ---------- */

.section{ padding-block:64px; }
@media (min-width:600px){ .section{ padding-block:96px; } }
.section--alt{
  background:var(--surface-sunken);
  border-block:1px solid var(--border-default);
}

.overline{
  font-size:11px; line-height:14px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-secondary);
}
.section__title{
  margin-top:12px;
  font-family:var(--font-brand);
  font-weight:600;
  font-size:24px; line-height:30px; letter-spacing:-.015em;
  max-width:22ch;
}
@media (min-width:600px){ .section__title{ font-size:28px; line-height:34px; } }

.section__lede{
  margin-top:12px;
  max-width:68ch;
  font-size:16px; line-height:24px;
  color:var(--text-secondary);
}

.grid{
  margin-top:32px;
  display:grid; gap:16px;
  grid-template-columns:1fr;
}
@media (min-width:720px){ .grid--3{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .grid--3{ grid-template-columns:repeat(3,1fr); gap:20px; } }

/* ---------- cards — 23 §5.4 ---------- */

.card,.feature{
  background:var(--surface-1);
  border:1px solid var(--border-default);
  border-radius:var(--radius-lg);
  box-shadow:var(--elev-1);
  padding:20px;
  display:flex; flex-direction:column;
}
.card--featured{ border-color:var(--accent-hover); }

.card__title,.feature__title{
  margin-top:12px;
  font-family:var(--font-brand);
  font-weight:500;
  font-size:20px; line-height:26px; letter-spacing:-.01em;
}
.feature__title{ font-size:17px; line-height:24px; font-family:var(--font-ui); font-weight:600; letter-spacing:0; }

.card__body,.feature__body{
  margin-top:8px;
  color:var(--text-secondary);
}
.card__list{
  margin-top:16px; padding-top:16px;
  border-top:1px solid var(--border-subtle);
  display:flex; flex-direction:column; gap:8px;
  font-size:13px; line-height:18px;
  color:var(--text-secondary);
}
.card__list li{ position:relative; padding-left:18px; }
.card__list li::before{
  content:""; position:absolute; left:0; top:7px;
  width:6px; height:6px; border-radius:var(--radius-pill);
  background:var(--accent-glow);
}

/* ---------- pills — 23 §2.7, §5.5 ---------- */

.pill{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:6px;
  min-height:24px; padding:2px 10px;
  border-radius:var(--radius-pill);
  border:1px solid transparent;
  font-size:11px; line-height:14px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
}
.pill__dot{ width:6px; height:6px; border-radius:var(--radius-pill); background:currentColor; }

.pill--outline{ color:var(--accent-text); border-color:var(--accent-glow); background:transparent; }
.pill--ok{ color:var(--accent-text); border-color:var(--accent-glow); background:var(--accent-container); }
.pill--soon{ color:var(--on-status-cancelled); border-color:var(--status-cancelled-edge); background:var(--status-cancelled); }

/* ---------- pricing ---------- */

.price{
  margin-top:12px;
  font-family:var(--font-brand);
  font-weight:700;
  font-size:26px; line-height:32px; letter-spacing:-.01em;
  font-feature-settings:"tnum" 1;
}
.price__qual{
  display:block; margin-top:4px;
  font-family:var(--font-ui); font-weight:400;
  font-size:13px; line-height:18px; letter-spacing:0;
  color:var(--text-secondary);
}
.pricing__foot{
  margin-top:24px;
  max-width:68ch;
  font-size:13px; line-height:18px;
  color:var(--text-secondary);
}
.pricing__foot strong{ color:var(--text-primary); font-weight:600; }

/* ---------- form — 23 §5.8 ---------- */

.form{ margin-top:32px; }
.field{ margin-bottom:16px; }
.field__label{
  display:block; margin-bottom:6px;
  font-size:13px; line-height:16px; font-weight:600;
}
.field__req,.field__opt{ color:var(--text-secondary); font-weight:400; }

.field__input{
  width:100%;
  min-height:48px; padding:12px 14px;
  background:var(--surface-2);
  color:var(--text-primary);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-md);
  font-family:var(--font-ui); font-size:15px; line-height:22px;
  transition:border-color var(--motion-fast);
}
.field__input::placeholder{ color:var(--text-disabled); }
.field__input:hover{ border-color:var(--text-secondary); }
.field__textarea{ min-height:96px; resize:vertical; }
/* The native chevron is kept: color-scheme:dark draws it in the right colour,
   and a bespoke one would be one more thing to keep at 3:1. */
.field__select{ padding-right:36px; }
.field__input[aria-invalid="true"]{ border-color:#EF4444; border-width:2px; }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form__status{
  margin-top:12px;
  min-height:18px;
  font-size:13px; line-height:18px;
  color:var(--text-secondary);
}
.form__status[data-state="ok"]{ color:#4ADE80; }
.form__status[data-state="error"]{ color:#FCA5A5; }

.form__legal{
  margin-top:16px;
  font-size:13px; line-height:18px;
  color:var(--text-secondary);
}

/* ---------- faq ---------- */

.faq{
  margin-top:32px;
  border:1px solid var(--border-default);
  border-radius:var(--radius-lg);
  background:var(--surface-1);
  overflow:hidden;
}
.faq__item + .faq__item{ border-top:1px solid var(--border-subtle); }
.faq__q{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:56px; padding:16px 20px;
  cursor:pointer; list-style:none;
  font-size:17px; line-height:24px; font-weight:600;
}
.faq__q::-webkit-details-marker{ display:none; }
.faq__q::after{
  content:"+";
  font-family:var(--font-brand); font-size:22px; line-height:1;
  color:var(--accent-text);
}
.faq__item[open] .faq__q::after{ content:"–"; }
.faq__q:hover{ background:var(--surface-2); }
.faq__a{ padding:0 20px 20px; color:var(--text-secondary); max-width:72ch; }

/* ---------- footer ---------- */

.site-footer{
  background:var(--surface-1);
  border-top:1px solid var(--border-default);
  padding-block:40px 24px;
}
.footer__row{
  display:flex; flex-direction:column; gap:24px;
  justify-content:space-between;
}
@media (min-width:720px){ .footer__row{ flex-direction:row; align-items:flex-start; } }

.footer__line{
  margin-top:12px;
  font-size:13px; line-height:18px;
  color:var(--text-secondary);
  max-width:36ch;
}
.footer__nav ul{ display:flex; flex-direction:column; gap:4px; }
.footer__nav a{
  display:flex; align-items:center; min-height:44px;
  color:var(--text-secondary); text-decoration:none;
  font-size:13px; font-weight:500;
}
.footer__nav a:hover{ color:var(--text-primary); text-decoration:underline; text-underline-offset:3px; }

.footer__legal{
  margin-top:32px; padding-top:20px;
  border-top:1px solid var(--border-subtle);
  font-size:13px; line-height:18px;
  color:var(--text-secondary);
  font-feature-settings:"tnum" 1;
}

/* ---------- reduced motion — 23 §7 ---------- */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}