/* Gridiron — getgridiron.ai
   Built on the v1.0 brand kit. brand/gridiron-colors.css is the canonical
   token file and is linked before this one; everything here derives from it.

   Royal Indigo is the primary. Yardline Green is the accent and stays under
   roughly 5% of any screen, per the kit. */

:root{
  --primary:var(--bl-600);
  --primary-deep:var(--bl-700);
  --primary-soft:var(--bl-50);
  --tint:var(--bl-100);          /* Bench Blue surface tint */

  --accent:var(--gr-600);        /* used sparingly */
  --accent-pale:var(--gr-50);

  --ink:var(--ink-9);
  --ink-mid:var(--ink-7);
  --ink-soft:var(--ink-6);
  --rule:var(--ink-3);
  --rule-strong:var(--ink-4);
  --paper:var(--ink-1);
  --paper-2:var(--ink-2);

  --display:var(--font-sans);
  --body:var(--font-sans);
  --mono:var(--font-mono);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink-0);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:860px;margin:0 auto;padding-left:clamp(20px,5vw,40px);padding-right:clamp(20px,5vw,40px)}
.narrow{max-width:720px}

/* ── lockup ───────────────────────────────────────────── */
.lockup{display:inline-block;line-height:0}
.lockup img{height:26px;width:auto;display:block}
footer .lockup img{height:21px}

header.site{
  border-bottom:1px solid var(--rule);background:var(--ink-0);
  position:sticky;top:env(safe-area-inset-top,0px);z-index:10;
}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:18px}
header.site nav{display:flex;gap:22px;font-size:14px}
header.site nav a{color:var(--ink-mid);text-decoration:none}
header.site nav a:hover{color:var(--primary)}

/* ── type ─────────────────────────────────────────────── */
h1{
  font-family:var(--display);font-weight:900;letter-spacing:-0.035em;
  font-size:clamp(38px,6.5vw,64px);line-height:1.04;margin:0;
  text-wrap:balance;color:var(--ink-9);
}
h2{
  font-family:var(--display);font-weight:800;letter-spacing:-0.025em;
  font-size:clamp(24px,3.4vw,32px);line-height:1.15;margin:0 0 14px;
  text-wrap:balance;color:var(--ink-9);
}
h3{
  font-family:var(--display);font-weight:700;letter-spacing:-0.012em;
  font-size:18px;margin:0 0 8px;color:var(--ink-9);
}
.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-6);margin:0 0 20px;
}
.eyebrow .live{color:var(--accent)}
p{margin:0 0 16px;max-width:66ch;color:var(--ink-mid)}
a{color:var(--primary)}
.lede{font-size:clamp(18px,2.2vw,21px);line-height:1.55;color:var(--ink-7);max-width:56ch;margin-top:22px}
strong{color:var(--ink);font-weight:600}

/* ── landing ──────────────────────────────────────────── */
.hero{padding-block:clamp(56px,9vw,104px) clamp(40px,6vw,64px)}
.rule{height:1px;background:var(--rule);border:0;margin:0}

.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.pill{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;
  border:1px solid var(--rule-strong);border-radius:999px;
  padding:5px 12px;color:var(--ink-7);background:var(--paper);
}

.grid{
  display:grid;gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:4px;overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(236px,1fr));margin-top:34px;
}
.cell{background:var(--ink-0);padding:22px 20px;min-width:0}
.cell .n{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  color:var(--primary);text-transform:uppercase;
}
.cell h3{margin-top:10px}
.cell p{font-size:14.5px;margin:0;color:var(--ink-soft);line-height:1.55}

section{padding-block:clamp(44px,6vw,68px)}
.band{background:var(--paper-2);border-block:1px solid var(--rule)}
.band.indigo{background:var(--primary);border-color:var(--bl-700)}
.band.indigo h2,.band.indigo p{color:var(--ink-0)}
.band.indigo p{color:var(--bl-100)}
.band.indigo strong{color:var(--ink-0)}

.stat-row{display:flex;flex-wrap:wrap;gap:36px;margin-top:28px}
.stat .v{font-family:var(--display);font-weight:900;font-size:34px;letter-spacing:-0.03em;color:var(--primary);line-height:1}
.stat .l{font-size:13.5px;color:var(--ink-soft);margin-top:6px;max-width:22ch}

.contact-line{font-family:var(--mono);font-size:15px;color:var(--ink-9);margin-top:16px;word-break:break-all}

/* ── legal pages ──────────────────────────────────────── */
.legal{padding-block:clamp(40px,6vw,64px)}
.legal h1{font-size:clamp(30px,5vw,44px)}
.legal .meta{font-family:var(--mono);font-size:12px;color:var(--ink-soft);margin-top:14px}
.legal h2{font-size:21px;margin-top:40px;padding-top:4px}
.legal h3{font-size:16px;margin-top:24px}
.legal p,.legal li{font-size:15.5px;color:var(--ink-mid)}
.legal ul{padding-left:20px;margin:0 0 16px;max-width:66ch}
.legal li{margin-bottom:8px}
.legal .toc{
  background:var(--paper);border:1px solid var(--rule);border-radius:4px;
  padding:18px 22px;margin-top:28px;
}
.legal .toc ol{margin:0;padding-left:20px;columns:2;column-gap:32px}
.legal .toc li{margin-bottom:5px;font-size:14px}
.legal .toc a{color:var(--ink-7);text-decoration:none}
.legal .toc a:hover{color:var(--primary);text-decoration:underline}
.callout{
  background:var(--paper);border:1px solid var(--rule);
  border-left:3px solid var(--primary);border-radius:3px;
  padding:16px 20px;margin:22px 0;
}
.callout p{margin:0;font-size:14.5px}
.scroll{overflow-x:auto;margin:18px 0}
table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:460px}
th{
  text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft);font-weight:400;
  padding:9px 14px 9px 0;border-bottom:1px solid var(--rule-strong);
}
td{padding:11px 14px 11px 0;border-bottom:1px solid var(--rule);vertical-align:top;color:var(--ink-mid)}

footer.site{border-top:1px solid var(--rule);background:var(--paper);padding-block:36px;margin-top:20px}
footer.site .wrap{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
footer.site nav{display:flex;gap:20px;font-size:14px}
footer.site a{color:var(--ink-soft);text-decoration:none}
footer.site a:hover{color:var(--primary)}
footer.site .fine{font-size:13px;color:var(--ink-soft);width:100%}

@media (max-width:560px){
  .legal .toc ol{columns:1}
  header.site nav{gap:14px;font-size:13px}
}