/* ============================================================
   THE STRONG ANGLE — DESIGN SYSTEM
   One file. Every page loads it. Nothing gets invented per-page.

   The audit found 20 separate :root blocks, 18 corner radii, 39 content
   widths, 21 headline sizes and 2 page backgrounds across 40 pages. That
   inconsistency — not the typeface, not the copy — is what read as
   machine-assembled. Everything below exists to make those numbers small.

   Typefaces are unchanged on purpose: the wordmark is a serif, so the
   display face has to be. The discipline is new, not the fonts.
   ============================================================ */

/* ---------- TOKENS ---------- */
:root{
  color-scheme: only light;

  /* One ground. Warm-neutral, chosen so navy reads rich and gold reads
     metallic rather than yellow. */
  --sa-bg:        #faf9f6;
  --sa-surface:   #ffffff;
  --sa-sunken:    #f2f1ec;

  /* Ink is navy-black, never pure black — it sits with the brand instead of
     punching a hole in it. */
  --sa-ink:       #17202f;
  --sa-body:      #3f4856;
  --sa-muted:     #5f6878;
  --sa-line:      #e4e2da;
  --sa-line-firm: #cfccc2;

  /* Brand */
  --sa-navy:      #15294c;
  --sa-navy-deep: #101d36;
  --sa-gold:      #c9a84c;   /* fills and rules only — fails contrast as text on white */
  --sa-gold-ink:  #8a6b1f;   /* gold AS TEXT on light grounds */
  --sa-gold-lit:  #e7c869;   /* gold as text on navy */

  /* Semantic — deliberately separate from the accent */
  --sa-good:      #2f6b4a;
  --sa-warn:      #9a6a12;
  --sa-bad:       #a8403a;

  /* Radius — three, and only three */
  --sa-r-sm:      8px;    /* controls, inputs, chips */
  --sa-r-md:      16px;   /* cards, panels, media */
  --sa-r-pill:    999px;

  /* Spacing — 8px base */
  --sa-1: 8px;  --sa-2: 16px; --sa-3: 24px;
  --sa-4: 40px; --sa-5: 64px; --sa-6: 96px;

  /* Widths — two */
  --sa-page:  1120px;
  --sa-prose: 660px;
  --sa-read:  660px; /* alias of --sa-prose; an undefined width token fails silently to max-width:none */

  /* Type scale — six steps, 1.28 ratio, everything lands on it */
  --sa-t-label: 0.88rem;
  --sa-t-sm:    1.06rem;
  --sa-t-body:  1.25rem;
  --sa-t-lede:  clamp(1.26rem, 1.8vw, 1.45rem);
  --sa-t-h2:    clamp(1.95rem, 3.9vw, 2.75rem);
  --sa-t-h1:    clamp(2.6rem, 5.7vw, 4rem);

  /* Typefaces: change these two and every page and course follows. */
  --sa-font-display: 'DM Serif Display';
  --sa-font-body: 'DM Sans';

  --sa-shadow:  0 12px 34px rgba(23,32,47,.07);
  --sa-shadow-l:0 24px 60px rgba(23,32,47,.13);
}

/* ---------- RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; font-synthesis:none; }
body{
  background:var(--sa-bg);
  color:var(--sa-body);
  font-family:var(--sa-font-body),system-ui,-apple-system,sans-serif;
  font-size:var(--sa-t-body);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img,video,iframe{ max-width:100%; display:block; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--sa-gold-ink); outline-offset:3px; border-radius:2px; }
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms!important; transition-duration:.01ms!important; }
}

/* ---------- TYPE ---------- */
.sa-h1,.sa-h2,.sa-h3{
  font-family:var(--sa-font-display),Georgia,serif;
  font-weight:500; color:var(--sa-ink);
  line-height:1.06; letter-spacing:-.012em; text-wrap:balance;
}
.sa-h1{ font-size:var(--sa-t-h1); }
.sa-h2{ font-size:var(--sa-t-h2); line-height:1.1; }
.sa-h3{ font-size:1.45rem; line-height:1.2; }
.sa-h1 em,.sa-h2 em,.sa-h3 em{ font-style:italic; color:var(--sa-gold-ink); }

.sa-eyebrow{
  font-family:var(--sa-font-body),sans-serif; text-transform:uppercase;
  letter-spacing:.12em; font-size:var(--sa-t-label); font-weight:600;
  color:var(--sa-gold-ink);
}
.sa-lede{ font-size:var(--sa-t-lede); color:var(--sa-body); max-width:58ch; }
.sa-small{ font-size:var(--sa-t-sm); color:var(--sa-muted); }

/* On navy, the whole type set flips together — never one token at a time. */
/* Copy on navy. Sep 9: phone readers found the dark sections hard to read. The
   numbers were fine (9.6:1) but light-weight DM Sans at 400 on a dark gradient reads
   thin on a phone, and several variants were dimmed further. Brighter body copy,
   no dimmed variants below ~8:1, and weight 500 below 640px. */
.sa-on-navy{ color:#EEF2F8; }
.sa-on-navy .sa-h1,.sa-on-navy .sa-h2,.sa-on-navy .sa-h3{ color:#fff; }
.sa-on-navy .sa-h1 em,.sa-on-navy .sa-h2 em,.sa-on-navy .sa-h3 em{ color:var(--sa-gold-lit); }
.sa-on-navy .sa-eyebrow{ color:var(--sa-gold-lit); }
.sa-on-navy .sa-lede{ color:#EEF2F8; }
.sa-on-navy .sa-small{ color:#D6DDE8; }
@media (max-width:640px){
  .sa-on-navy, .sa-on-navy p, .sa-on-navy li, .sa-on-navy td, .sa-on-navy .sa-lede{ font-weight:500; }
  .sa-on-navy .sa-btn-meta{ opacity:1; }
}

/* ---------- LAYOUT ----------
   One section rhythm. No alternating tint bands — the audit found 17 of them
   being used as a substitute for actual hierarchy. */
.sa-sec{ padding:var(--sa-6) var(--sa-3); }
.sa-sec--tight{ padding:var(--sa-5) var(--sa-3); }
.sa-in{ max-width:var(--sa-page); margin:0 auto; }
.sa-prose{ max-width:var(--sa-prose); }

/* Ranged left is the default. Centring is a decision you make twice a page,
   not the thing that happens when nobody decided. */
.sa-head{ margin-bottom:var(--sa-4); max-width:var(--sa-prose); }
.sa-head .sa-eyebrow{ display:block; margin-bottom:var(--sa-1); }
.sa-head .sa-h2{ margin-bottom:12px; }
.sa-center{ text-align:center; margin-left:auto; margin-right:auto; }

.sa-dark{ background:linear-gradient(165deg,var(--sa-navy),var(--sa-navy-deep)); }
.sa-sunken{ background:var(--sa-sunken); }

/* ---------- GRID ---------- */
.sa-grid{ display:grid; gap:var(--sa-2); }
.sa-grid--2{ grid-template-columns:repeat(2,1fr); }
.sa-grid--3{ grid-template-columns:repeat(3,1fr); }
.sa-grid--4{ grid-template-columns:repeat(4,1fr); }
@media(max-width:900px){ .sa-grid--3,.sa-grid--4{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:620px){ .sa-grid--2,.sa-grid--3,.sa-grid--4{ grid-template-columns:1fr; } }

/* ---------- BUTTONS — two, not nineteen ---------- */
/* Buttons. DM Sans rather than DM Sans, with the tracking pulled in —
   condensed uppercase at small sizes with wide letter-spacing reads as a label,
   not an action. Feedback from a first-time user: "buttons could be clearer in
   colour and font type/size, throughout." */
.sa-btn{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  padding:15px 28px; min-height:48px; border:2px solid transparent; border-radius:var(--sa-r-sm);
  font-family:var(--sa-font-body),system-ui,sans-serif; text-transform:uppercase;
  letter-spacing:.05em; font-size:1rem; font-weight:700; line-height:1.15; text-decoration:none;
  cursor:pointer; transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.sa-btn:hover{ transform:translateY(-2px); }
.sa-btn .sa-btn-meta{
  font-size:.8rem; letter-spacing:.01em; font-weight:500; opacity:.85; margin-top:4px;
  text-transform:none;
}
.sa-btn--primary{ background:var(--sa-navy); color:#fff; box-shadow:var(--sa-shadow); }
.sa-btn--primary:hover{ background:var(--sa-navy-deep); }
.sa-btn--gold{ background:var(--sa-gold); color:var(--sa-navy-deep); box-shadow:var(--sa-shadow); }
.sa-btn--gold:hover{ background:#bb9a3f; }
.sa-btn--quiet{ background:transparent; border-color:var(--sa-navy); color:var(--sa-navy); }
.sa-btn--quiet:hover{ border-color:var(--sa-gold-ink); color:var(--sa-gold-ink); }
.sa-on-navy .sa-btn--quiet{ border-color:rgba(231,200,105,.45); color:var(--sa-gold-lit); }
.sa-on-navy .sa-btn--quiet:hover{ border-color:var(--sa-gold-lit); background:rgba(255,255,255,.05); }

/* ---------- CARD ---------- */
.sa-card{
  background:var(--sa-surface); border:1px solid var(--sa-line);
  border-radius:var(--sa-r-md); padding:var(--sa-3);
}
.sa-card--raised{ box-shadow:var(--sa-shadow); }
.sa-card .sa-h3{ margin-bottom:6px; }
.sa-card p{ color:var(--sa-body); font-size:var(--sa-t-sm); }
.sa-on-navy .sa-card{
  background:rgba(255,255,255,.055); border-color:rgba(231,200,105,.2);
}
.sa-on-navy .sa-card p{ color:#DCE3EE; }

/* ---------- SMALL PARTS ---------- */
.sa-chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 14px; border-radius:var(--sa-r-pill);
  font-family:var(--sa-font-body),sans-serif; text-transform:uppercase;
  letter-spacing:.13em; font-size:.72rem; font-weight:700;
  background:rgba(201,168,76,.16); color:var(--sa-gold-ink);
}
.sa-on-navy .sa-chip{ background:rgba(231,200,105,.16); color:var(--sa-gold-lit);
  border:1px solid rgba(231,200,105,.32); }

.sa-rule{ border:0; border-top:1px solid var(--sa-line); margin:var(--sa-4) 0; }

.sa-stack{ display:flex; flex-direction:column; gap:var(--sa-2); }
.sa-row{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }

/* A quoted line. One treatment, used sparingly. */
.sa-quote{
  font-family:var(--sa-font-display),Georgia,serif; font-size:clamp(1.35rem,2.6vw,1.85rem);
  line-height:1.42; color:var(--sa-ink); border-left:2px solid var(--sa-gold);
  padding-left:var(--sa-3); max-width:52ch;
}
.sa-quote cite{
  display:block; font-family:var(--sa-font-body),sans-serif; font-style:normal;
  text-transform:uppercase; letter-spacing:.16em; font-size:.72rem;
  color:var(--sa-muted); margin-top:14px;
}
.sa-on-navy .sa-quote{ color:#fff; }
.sa-on-navy .sa-quote cite{ color:#C4CFDF; }

/* ---------- FOOTER ---------- */
.sa-footer{
  background:var(--sa-navy-deep); color:#93a3bd;
  padding:var(--sa-4) var(--sa-3); text-align:center;
}
.sa-footer a{ color:var(--sa-gold-lit); text-decoration:none; }
.sa-footer a:hover{ text-decoration:underline; }
.sa-footer .sa-creed{
  font-family:var(--sa-font-display),Georgia,serif; font-style:italic;
  font-size:clamp(1.3rem,3vw,1.75rem); color:#fff; margin-bottom:12px;
}

@media(max-width:640px){
  :root{ --sa-6:64px; --sa-5:48px; }
  .sa-sec{ padding:var(--sa-6) var(--sa-2); }
}

/* ============================================================
   COMPATIBILITY LAYER
   Forty pages were each written against their own token names. Rather than
   rewrite every rule, the legacy names are aliased onto the system here and
   each page's own :root is deleted. One set of values, no markup churn.
   New work should use the --sa-* tokens above; these exist to converge what
   already shipped.
   ============================================================ */
:root{
  --bg:            var(--sa-bg);
  --paper:         var(--sa-surface);
  --white:         var(--sa-surface);
  --card:          var(--sa-surface);
  --bg-elev:       var(--sa-surface);
  --bg-elev-1:     var(--sa-surface);
  --bg-elev-2:     var(--sa-sunken);
  --bg-elev-3:     var(--sa-sunken);
  --cool:          var(--sa-sunken);

  --ink:           var(--sa-ink);
  --cream:         var(--sa-ink);
  --charcoal:      var(--sa-navy-deep);
  --ink-soft:      var(--sa-body);
  --cream-deep:    var(--sa-body);
  --gray:          var(--sa-muted);

  --line:          var(--sa-line);
  --line-cool:     var(--sa-line);
  --line-solid:    var(--sa-line-firm);
  --gray-line:     var(--sa-line);
  --gray-line-strong: var(--sa-line-firm);

  --gold:          var(--sa-gold);
  --gold-deep:     var(--sa-gold-ink);
  --gold-bright:   var(--sa-gold-ink);
  --gold-on-navy:  var(--sa-gold-lit);
  --amber:         var(--sa-gold);

  --royal:         var(--sa-navy);
  --royal-deep:    var(--sa-navy-deep);
  --navy:          var(--sa-navy);
  --navy-2:        var(--sa-navy-deep);
  --blue:          var(--sa-navy);

  --green:         var(--sa-good);
  --red:           var(--sa-bad);

  --shadow-md:     var(--sa-shadow);
  --shadow-lg:     var(--sa-shadow-l);
}

/* ============================================================
   STRUCTURAL COMPAT
   The same convergence as the token layer, applied to structure. These legacy
   class names appear on 8–30 pages each, every one with its own values. Defined
   once here, they inherit the system; a page only needs its own rule where the
   page genuinely differs.
   Declared BEFORE page <style> blocks, so any page can still override.
   ============================================================ */
.eyebrow{
  font-family:var(--sa-font-body),sans-serif; text-transform:uppercase;
  letter-spacing:.19em; font-size:var(--sa-t-label); font-weight:600;
  color:var(--sa-gold-ink);
}
.display{
  font-family:var(--sa-font-display),Georgia,serif; font-weight:500;
  line-height:1.06; letter-spacing:-.012em; text-wrap:balance; color:var(--sa-ink);
}
.display em{ font-style:italic; color:var(--sa-gold-ink); }

/* Any light-on-dark context: let the heading inherit, and switch the accent to the
   gold that actually reads on navy. Without this the compat colour above wins over
   an inherited white and the heading disappears into the ground. */
.hero .display, .band .display, .final .display, .next .display,
.is-dark .display, .sa-dark .display, .sa-on-navy .display,
.nil .display, .namelist .display, .free .display,
.hero h1, .hero h2, .band h2, .final h2,
.is-dark h2, .sa-dark h2{ color:inherit; }
.hero .display em, .band .display em, .final .display em, .next .display em,
.is-dark .display em, .sa-dark .display em, .sa-on-navy .display em,
.nil .display em, .namelist .display em, .free .display em{ color:var(--sa-gold-lit); }

.card{
  background:var(--sa-surface); border:1px solid var(--sa-line);
  border-radius:var(--sa-r-md); padding:var(--sa-3);
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:16px 30px; border-radius:var(--sa-r-sm); border:1.5px solid transparent;
  font-family:var(--sa-font-body),sans-serif; text-transform:uppercase;
  letter-spacing:.14em; font-size:.95rem; font-weight:700; text-decoration:none; cursor:pointer;
}
.hero{ padding:var(--sa-6) var(--sa-3); }
.head{ margin-bottom:var(--sa-4); }
.wrap{ max-width:var(--sa-page); margin:0 auto; }
.footer{ background:var(--sa-navy-deep); color:#93a3bd; padding:var(--sa-4) var(--sa-3); }
.footer a{ color:var(--sa-gold-lit); text-decoration:none; }
.hidden{ display:none!important; }

/* ---- Legibility floor for page-local buttons ----------------------------
   Thirty-one pages still carry their own .btn rules, some down at .66rem in
   condensed capitals. `body .btn` outranks a bare `.btn` without touching
   colour, so each page keeps its palette and only gains size and a readable
   face. Deliberately small variants (.btn-sm / .btn-xs) are left alone. */
body .btn:not(.btn-sm):not(.btn-xs),
body .approve-btn,
body .btn-primary:not(.btn-sm),
body .btn-outline:not(.btn-sm){
  font-family:var(--sa-font-body),system-ui,sans-serif;
  font-size:.95rem; letter-spacing:.05em; font-weight:700; line-height:1.15;
  min-height:44px;
}
body .btn.btn-sm, body .btn.btn-xs{
  font-family:var(--sa-font-body),system-ui,sans-serif; letter-spacing:.04em; font-weight:700;
}
body .panel-cta, body .card-cta, body .card-lock, body .lk .pad{
  font-family:var(--sa-font-body),system-ui,sans-serif;
  font-size:.9rem; letter-spacing:.04em; font-weight:700;
}