/* Full Scope LLC — design system
 *
 * Colors carry over from the playbook build system (brand.py) so the site and
 * the PDFs read as one product. Every value below was contrast-checked rather
 * than picked by eye; the notes record what passed and what the relief is.
 *
 * The site is deliberately light-mode only. It's a brand marketing surface,
 * not an app, and committing to one look keeps the printed playbooks, the PDFs
 * and the web pages identical in tone.
 */

:root {
  /* Brand ------------------------------------------------------------- */
  --brand: #1D8FBD;          /* 3.67:1 on white — legal as a chart mark and
                                as LARGE text, never as body text on a fill */
  --brand-deep: #146485;     /* 6.58:1 on white — filled buttons, links, headings */
  --brand-tint: #EAF4F9;
  --brand-tint-2: #F5FAFC;

  /* Surfaces ---------------------------------------------------------- */
  --surface: #FFFFFF;        /* cards, chart surface */
  --plane: #F5F8FA;          /* page plane */
  --plane-deep: #0F2A38;     /* inverted sections */

  /* Ink --------------------------------------------------------------- */
  --ink: #10232B;            /* 16.19:1 */
  --ink-2: #485C66;          /* 7.00:1 */
  --ink-muted: #5C6D75;      /* 5.39:1 — axis labels, captions */
  --on-dark: #FFFFFF;
  --on-dark-2: #C3D6DF;

  /* Lines ------------------------------------------------------------- */
  --rule: #E3EAEE;
  --rule-strong: #C9D6DC;

  /* Chart ------------------------------------------------------------- */
  --mark: var(--brand);
  --mark-deemph: #93A4AD;    /* 2.58:1 — intentionally recessive. Sub-3:1 fills
                                oblige a relief channel, so every bar carries a
                                visible direct label and each chart has a table
                                view. Do not use this for text. */
  --grid: #E6ECEF;
  --baseline: #C9D4D9;

  /* Status — fixed scale, reserved meaning, always shipped with an icon and
     a text label so color never carries the state on its own. */
  --status-critical: #D03B3B;   /* 4.80:1 */
  --status-serious:  #EC835A;   /* 2.64:1 — sub-3:1 by design; icon+label is
                                   the mitigation */
  --status-warning:  #FAB219;
  --status-good:     #0CA30C;   /* 3.35:1 */

  /* Type -------------------------------------------------------------- */
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Space ------------------------------------------------------------- */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --measure: 68ch;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(16, 35, 43, .06), 0 8px 24px rgba(16, 35, 43, .06);
}

/* Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--plane);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
a { color: var(--brand-deep); }

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; letter-spacing: -0.015em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
.lede { font-size: clamp(1.05rem, 1.9vw, 1.25rem); color: var(--ink-2); }
.measure { max-width: var(--measure); }

/* Layout --------------------------------------------------------------- */
.wrap { width: min(1140px, 100%); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(3rem, 8vw, 5.5rem); }
.section--tint { background: var(--surface); }
.section--deep { background: var(--plane-deep); color: var(--on-dark); }
.section--deep h2 { color: var(--on-dark); }
.section--deep p { color: var(--on-dark-2); }

.grid { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); }
@media (min-width: 760px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 760px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }

/* Masthead ------------------------------------------------------------- */
.masthead {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.masthead__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 68px;
}
.lockup { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--brand); }
.lockup svg { width: 30px; height: 30px; flex: none; }
.lockup__text { display: flex; flex-direction: column; line-height: 1.05; }
.lockup__name {
  font-size: .95rem; font-weight: 700; letter-spacing: .16em;
  color: var(--brand-deep); text-transform: uppercase;
}
.lockup__tag {
  font-size: .58rem; letter-spacing: .19em; text-transform: uppercase;
  color: var(--ink-muted);
}
.nav { display: flex; align-items: center; gap: clamp(.75rem, 2vw, 1.75rem); }
/* :not(.btn) is load-bearing. A bare `.nav a` (0,0,1,1) outranks `.btn--primary`
   (0,0,1,0), which repainted the CTA's white label to --ink-2 — 1.06:1 on the
   button fill, i.e. invisible, on every page. Keep nav-link rules off buttons. */
.nav a:not(.btn) {
  color: var(--ink-2); text-decoration: none; font-size: .95rem; font-weight: 500;
}
.nav a:not(.btn):hover,
.nav a:not(.btn)[aria-current="page"] { color: var(--brand-deep); }
.nav a.btn { text-decoration: none; }
@media (max-width: 700px) { .nav__full { display: none; } }

/* Below ~520px the wordmark's letter-spacing wraps it onto two lines, the
   tagline onto two more, and the CTA gets pushed off the right edge. Drop the
   tagline and tighten the wordmark rather than letting the header collapse. */
@media (max-width: 520px) {
  .lockup__tag { display: none; }
  .lockup__name { font-size: .8rem; letter-spacing: .1em; }
  .lockup svg { width: 26px; height: 26px; }
  .masthead__inner { min-height: 58px; gap: .5rem; }
  .nav .btn { padding: .6rem .85rem; font-size: .9rem; white-space: nowrap; }
}

/* Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.4rem; border-radius: var(--radius);
  font-size: 1rem; font-weight: 600; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; transition: background .15s, border-color .15s;
}
/* Filled buttons use brand-deep, not brand: white on brand is only 3.67:1,
   which clears large text but not button labels. */
.btn--primary { background: var(--brand-deep); color: #fff; }
.btn--primary:hover { background: #0F506C; }
.btn--ghost { background: transparent; color: var(--brand-deep); border-color: var(--rule-strong); }
.btn--ghost:hover { border-color: var(--brand); }
.btn--onDark { background: #fff; color: var(--brand-deep); }
.btn--lg { padding: 1rem 1.75rem; font-size: 1.05rem; }

/* Cards ---------------------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: clamp(1.25rem, 2.5vw, 1.75rem);
}
.card--raised { box-shadow: var(--shadow); border-color: transparent; }
.card__kicker {
  font-size: .7rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brand); margin-bottom: .6rem;
}

.step-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--brand); color: #fff; font-weight: 700; font-size: 1rem;
  flex: none;
}

/* Footer --------------------------------------------------------------- */
.footer { background: var(--plane-deep); color: var(--on-dark-2); padding-block: 3rem 2rem; }
.footer a { color: #fff; }
.footer__grid { display: grid; gap: 2rem; }
@media (min-width: 760px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr; } }
.footer__legal { border-top: 1px solid rgba(255,255,255,.14); margin-top: 2rem; padding-top: 1.25rem; font-size: .85rem; }

/* Utility -------------------------------------------------------------- */
.stack > * + * { margin-top: var(--stack-gap, 1rem); }
.center { text-align: center; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}