/* ============================================================
   SQUADPILOT FPL: SHARED PAGE SHELL
   Used by the sub-pages (how-it-works.html, scorecard.html).
   index.html keeps its own inline copy of these tokens so the
   landing page stays a single self-contained file; the values
   below are lifted from it verbatim and must not drift.

   Signal Violet = brand identity. Confirm Green = model output
   ONLY. The split is semantic and deliberate: never collapse it.
   ============================================================ */
:root{
  --bg:#0a0a0a;
  --bg-2:#111114;
  --bg-3:#16161b;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --ink:#ffffff;
  --ink-2:#b7b7c2;
  --ink-3:#88888f;
  --pilot:#7C5CFF;                 /* brand */
  --pilot-dim:rgba(124,92,255,.14);
  --pilot-glow:rgba(124,92,255,.45);
  --confirm:#00D68F;               /* model recommendation ONLY */
  --confirm-dim:rgba(0,214,143,.12);
  --miss:#FF5C6E;
  --miss-dim:rgba(255,92,110,.10);
  --radius:18px;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'Cascadia Code',Consolas,monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--pilot);color:#fff}

.grain{
  position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}

.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

/* ---------- header ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:rgba(10,10,10,.55);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:66px}
.logo{display:flex;align-items:center;gap:11px;font-weight:800;font-size:17px;letter-spacing:-.02em}
.logo .squad{color:var(--ink)}
.logo .pilot{color:var(--pilot)}
.fplchip{
  font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.12em;
  color:var(--ink-3);border:1px solid var(--line-2);border-radius:5px;padding:2px 6px;margin-left:6px;
}
.logo-mark{width:30px;height:30px;flex:none}
.nav-links{display:flex;align-items:center;gap:24px;font-size:13.5px;color:var(--ink-2)}
.nav-links a:hover{color:var(--ink)}
.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-cta{
  padding:9px 18px;border-radius:11px;font-weight:600;font-size:13.5px;color:#fff;
  background:linear-gradient(135deg,var(--pilot),#6a4de0);
  box-shadow:0 0 0 1px rgba(124,92,255,.4),0 6px 22px -8px var(--pilot-glow);
  transition:transform .18s ease,box-shadow .18s ease;
}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(124,92,255,.7),0 10px 30px -8px var(--pilot-glow);color:#fff}
@media(max-width:760px){.nav-links a:not(.nav-cta){display:none}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 28px;border-radius:13px;font-weight:700;font-size:15px;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.btn-primary{
  color:#fff;background:linear-gradient(135deg,var(--pilot),#6a4de0);
  box-shadow:0 0 0 1px rgba(124,92,255,.4),0 10px 34px -10px var(--pilot-glow);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(124,92,255,.8),0 16px 44px -10px var(--pilot-glow)}
.btn-ghost{
  color:var(--ink);border:1px solid var(--line-2);background:rgba(255,255,255,.03);
  backdrop-filter:blur(8px);
}
.btn-ghost:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.06);transform:translateY(-2px)}

/* ---------- section chrome ---------- */
section{position:relative;padding:100px 0}
.sec-head{max-width:640px;margin-bottom:52px}
.sec-eyebrow{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--pilot);margin-bottom:16px;display:flex;align-items:center;gap:10px;
}
.sec-eyebrow::before{content:'';width:22px;height:1px;background:var(--pilot)}
h1{
  font-size:clamp(2.1rem,4.6vw,3.6rem);
  font-weight:900;letter-spacing:-.035em;line-height:1.06;max-width:20ch;
}
h1 .map{
  background:linear-gradient(100deg,var(--pilot) 0%,#a78bff 60%,var(--pilot) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
h2{font-size:clamp(1.6rem,3.2vw,2.4rem);font-weight:800;letter-spacing:-.03em;line-height:1.14}
.sec-sub{margin-top:16px;color:var(--ink-2);font-size:16px;max-width:56ch}

/* ---------- sub-page hero ---------- */
.page-hero{padding:150px 0 60px;position:relative;overflow:hidden}
.page-hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse 70% 55% at 30% 0%,rgba(124,92,255,.13),transparent 65%);
}
.page-hero .lede{margin-top:22px;max-width:60ch;font-size:clamp(1rem,1.5vw,1.15rem);color:var(--ink-2)}
.page-hero .lede strong{color:var(--ink);font-weight:600}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:22px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--pilot);border:1px solid rgba(124,92,255,.35);background:var(--pilot-dim);
  padding:7px 14px;border-radius:999px;
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--pilot);box-shadow:0 0 10px var(--pilot)}

/* ---------- breadcrumbs ---------- */
.crumbs{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:18px;display:flex;gap:9px;flex-wrap:wrap;align-items:center;
}
.crumbs a:hover{color:var(--ink-2)}
.crumbs span[aria-hidden]{opacity:.5}

/* ---------- status banner ---------- */
.status-banner{
  display:block;font-family:var(--mono);font-size:11.5px;font-weight:700;
  letter-spacing:.1em;line-height:1.7;color:var(--ink-2);
  border:1px dashed rgba(255,255,255,.28);background:rgba(255,255,255,.03);
  padding:14px 18px;border-radius:12px;margin:0 0 30px;
}
.status-banner b{color:var(--ink)}

/* ---------- bento cells ---------- */
.bento{display:grid;gap:16px;grid-template-columns:repeat(12,1fr)}
.cell{
  position:relative;border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015));
  border:1px solid var(--line);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  padding:26px;overflow:hidden;
  transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease;
}
.cell:hover{
  border-color:rgba(124,92,255,.45);
  box-shadow:0 0 0 1px rgba(124,92,255,.15),0 18px 50px -20px rgba(124,92,255,.25);
  transform:translateY(-3px);
}
.cell h3{font-size:16.5px;font-weight:700;letter-spacing:-.01em;margin-bottom:8px}
.cell p{font-size:13.8px;color:var(--ink-2)}
.cell p + p{margin-top:10px}
.cell .kicker{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--pilot);margin-bottom:12px;
}
.c-12{grid-column:span 12}.c-8{grid-column:span 8}.c-7{grid-column:span 7}
.c-6{grid-column:span 6}.c-5{grid-column:span 5}.c-4{grid-column:span 4}
@media(max-width:900px){.c-8,.c-7,.c-6,.c-5,.c-4{grid-column:span 12}}

/* ---------- long-form prose ---------- */
.prose{max-width:70ch}
.prose h2{margin:0 0 14px}
.prose > h2:not(:first-child){margin-top:44px}
.prose code{font-family:var(--mono);font-size:.88em;color:var(--pilot)}
.prose h3{font-size:17px;font-weight:700;letter-spacing:-.01em;margin:30px 0 8px}
.prose p{color:var(--ink-2);font-size:15.5px;margin-bottom:14px}
.prose p strong{color:var(--ink);font-weight:600}
.prose ul,.prose ol{color:var(--ink-2);font-size:15.5px;margin:0 0 16px 0;padding-left:0;list-style:none;display:grid;gap:10px}
.prose ul li{position:relative;padding-left:22px}
.prose ul li::before{
  content:'';position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:2px;
  background:var(--pilot);
}
.prose ol{counter-reset:pstep}
.prose ol li{position:relative;padding-left:32px;counter-increment:pstep}
.prose ol li::before{
  content:counter(pstep,decimal-leading-zero);position:absolute;left:0;top:.1em;
  font-family:var(--mono);font-size:11px;color:var(--pilot);letter-spacing:.1em;
}
.prose li strong{color:var(--ink);font-weight:600}
.prose a{color:var(--pilot);font-weight:600}
.prose a:hover{text-decoration:underline}
.prose .note{
  border-left:2px solid rgba(124,92,255,.55);background:rgba(124,92,255,.05);
  padding:14px 18px;border-radius:0 10px 10px 0;margin:0 0 18px;
  font-size:14.5px;color:var(--ink-2);
}
.prose .note strong{color:var(--ink)}

/* ---------- definition table ---------- */
.deftable{width:100%;overflow-x:auto;margin:0 0 20px}
.deftable table{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
.deftable th,.deftable td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.deftable th{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--ink-3);text-transform:uppercase;
}
.deftable td{color:var(--ink-2)}
.deftable td:first-child{color:var(--ink);font-weight:600;white-space:nowrap}
.deftable code{font-family:var(--mono);font-size:12.5px;color:var(--pilot)}

/* ---------- freeze receipt (terminal) ---------- */
.term{
  font-family:var(--mono);font-size:12.5px;border-radius:14px;overflow:hidden;
  border:1px solid var(--line);background:rgba(8,8,10,.85);
}
.term-bar{
  display:flex;align-items:center;gap:8px;padding:11px 16px;
  border-bottom:1px solid var(--line);background:rgba(255,255,255,.02);
  color:var(--ink-3);font-size:11px;letter-spacing:.08em;
}
.term-bar .lights{display:flex;gap:6px}
.term-bar .lights i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.12)}
.term-body{padding:6px 0}
.trow{
  display:grid;grid-template-columns:190px 1fr;gap:12px;align-items:baseline;
  padding:12px 18px;border-bottom:1px solid rgba(255,255,255,.04);
}
.trow:last-child{border-bottom:0}
.trow .gw{color:var(--ink-3);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}
.trow .what{color:var(--ink-2);overflow-wrap:anywhere}
.trow .what b{color:var(--ink)}
.term-note{padding:13px 18px;color:var(--ink-3);font-size:11.5px;border-top:1px solid var(--line)}
.term-note em{color:var(--ink-2);font-style:normal}
.stamp{font-size:10px;letter-spacing:.1em;padding:4px 9px;border-radius:6px;font-weight:700;display:inline-block}
.stamp.pending{color:var(--ink-2);background:rgba(255,255,255,.05);border:1px solid var(--line-2)}
@media(max-width:640px){.trow{grid-template-columns:1fr;gap:4px}}

/* ---------- timeline ---------- */
.timeline{display:flex;flex-direction:column;gap:0;margin-top:6px}
.tl-step{display:flex;gap:16px;position:relative;padding-bottom:26px}
.tl-step:last-child{padding-bottom:0}
.tl-step::before{
  content:'';position:absolute;left:13px;top:30px;bottom:2px;width:1px;
  background:linear-gradient(var(--line-2),transparent);
}
.tl-step:last-child::before{display:none}
.tl-dot{
  width:27px;height:27px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-family:var(--mono);font-size:10px;font-weight:700;
  border:1px solid rgba(124,92,255,.5);color:var(--pilot);background:var(--pilot-dim);
}
.tl-step.frozen .tl-dot{border-color:rgba(124,92,255,.8);box-shadow:0 0 14px rgba(124,92,255,.35)}
.tl-body b{display:block;font-size:14px;font-weight:700;margin-bottom:2px}
.tl-body span{font-size:12.5px;color:var(--ink-3)}
.tl-body .mono{font-family:var(--mono);color:var(--pilot);font-size:11px;letter-spacing:.08em}

/* ---------- next-page links ---------- */
.nextlinks{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:10px}
@media(max-width:760px){.nextlinks{grid-template-columns:1fr}}
.nextlink{
  display:block;border-radius:16px;border:1px solid var(--line);padding:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015));
  transition:border-color .25s ease,transform .25s ease;
}
.nextlink:hover{border-color:rgba(124,92,255,.45);transform:translateY(-3px)}
.nextlink .kicker{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--pilot);margin-bottom:10px}
.nextlink b{display:block;font-size:16px;font-weight:700;margin-bottom:5px}
.nextlink span{font-size:13.2px;color:var(--ink-2)}

/* ---------- FAQ (mirrors the inline copy in index.html) ---------- */
.faq{max-width:760px}
.faq details{
  border:1px solid var(--line);border-radius:14px;margin-bottom:12px;padding:0 22px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.012));
}
.faq details[open]{border-color:rgba(124,92,255,.4)}
.faq summary{
  cursor:pointer;font-weight:600;font-size:15px;padding:18px 0;list-style:none;
  display:flex;justify-content:space-between;gap:14px;align-items:baseline;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--pilot);font-weight:700;flex:none}
.faq details[open] summary::after{content:'\2212'}
.faq details p{padding:0 0 18px;color:var(--ink-2);font-size:14px}
.faq details p strong{color:var(--ink)}

/* ---------- final CTA band ---------- */
.cta-band{
  text-align:center;padding:100px 0;
  background:linear-gradient(180deg,transparent,rgba(124,92,255,.06) 50%,transparent);
}
.cta-band h2{max-width:24ch;margin:0 auto}
.cta-stack{display:flex;flex-direction:column;align-items:center;gap:24px;margin-top:26px}
.count-chip{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;
  color:var(--ink-2);border:1px solid var(--line-2);background:rgba(255,255,255,.03);
  padding:8px 15px;border-radius:999px;
}
.count-chip .lbl{color:var(--ink-3);font-size:10px;letter-spacing:.18em}
.count-chip b{color:var(--ink);font-weight:700;letter-spacing:.04em}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:56px 0 44px;color:var(--ink-3);font-size:13px}
.foot-cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr 1fr;gap:30px}
@media(max-width:900px){.foot-cols{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.foot-cols{grid-template-columns:1fr}}
.foot-brand{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--ink);font-size:15px}
.foot-brand .pilot{color:var(--pilot)}
.disclaimer{max-width:44ch;margin-top:14px;font-size:12px;line-height:1.7}
.foot-col h3{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--ink-3);
  text-transform:uppercase;margin-bottom:14px;font-weight:700;
}
.foot-col a{display:block;padding:4px 0;color:var(--ink-2);font-size:13px}
.foot-col a:hover{color:var(--ink)}
.foot-meta{margin-top:38px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:.05em}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;transition-duration:.001s!important}
  html{scroll-behavior:auto}
}

/* ---------- tap targets ----------
   Below 900px every interactive element clears 44px, the smallest reliable
   touch target. Inline links inside running prose are exempt: padding them out
   would break the line box they live in. Standalone links, nav and footer are
   not exempt. Mirrored in the inline <style> of index.html. */
@media(max-width:900px){
  .nav-cta{padding:13px 20px;min-height:44px;display:inline-flex;align-items:center}
  .logo{min-height:44px}
  .legal-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 2px}
  .foot-col a{padding:11px 0;min-height:44px;display:flex;align-items:center}
  .crumbs a{display:inline-flex;align-items:center;min-height:44px;padding:0 2px}
  .next a,.next-card,.nextlink{min-height:44px}
  summary{min-height:44px;display:flex;align-items:center}
  /* A paragraph whose whole content is one link is a button wearing prose
     clothes. Inline links inside a sentence stay exempt: see above. */
  .prose-cta a,a.back{display:inline-flex;align-items:center;min-height:44px}
}

/* ---------- mobile legibility: nothing meaningful renders under 12px ----------
   Same rule as index.html's inline sheet, applied to the shared chrome. These
   are mono, tracked-out micro-labels: quiet at desk distance, unreadable on a
   phone. On small screens the floor is 12px and the tracking pays for it. */
@media(max-width:520px){
  .fplchip,.cell .kicker,.deftable th,.trow .gw,.stamp,.tl-dot,
  .nextlink .kicker,.count-chip .lbl,.foot-col h3{font-size:12px;letter-spacing:.08em}
  .sec-eyebrow,.eyebrow,.crumbs,.status-banner,.prose ol li::before,
  .term-bar,.term-note,.tl-body .mono,.foot-meta{font-size:12px}
  .eyebrow,.sec-eyebrow{letter-spacing:.06em}
  .tl-dot{width:30px;height:30px}
  .stamp{letter-spacing:.06em}
  /* The metric table's second column is a full sentence and does not
     usefully compress, so it keeps its width and scrolls inside its own box
     rather than squeezing the page. The container is the only thing that
     moves sideways; the document does not. */
  .deftable{overflow-x:auto;overscroll-behavior-x:contain}
  .deftable table{min-width:440px}
  .deftable th,.deftable td{padding:11px 12px}
}