/* Shared stylesheet for the programme landing pages and the free tools.
   ---------------------------------------------------------------------------
   REWRITTEN 2026-09-11 against the Enterprise Design System V2.

   This file used to carry its own palette — a fourth copy of the brand navy, a
   Georgia heading face, its own spacing scale. That is why these pages drifted
   a visual generation away from the homepage while nobody changed them.

   Now it declares no colours of its own. Every value below is a `--gw-*` token
   from design-system.css, which each page loads first. The legacy class names
   (.topbar, .hero, .card, .checks, .pricebox…) are kept exactly as they are, so
   fourteen pages of markup did not have to be rewritten to move.

   If you are adding a NEW page, use the `gw-` component classes directly and
   ignore this file. This exists to carry the old markup forward, not to grow.
   =========================================================================== */

/* ── Legacy variable aliases ──────────────────────────────────────────────────
   This file used to declare --navy, --gold, --ink, --muted and friends in its
   own :root, and fourteen pages reference those names from their page-level
   <style> blocks. Deleting them would have silently un-styled every one of
   those blocks — an undefined custom property does not fall back, it just makes
   the declaration invalid.

   So the old names survive as aliases pointing at design-system tokens. Nothing
   NEW should use them. When a page's inline <style> is next touched, switch it
   to the --gw-* names and drop the alias it used.
   ------------------------------------------------------------------------- */
:root {
  --navy: var(--gw-primary);
  --navy-deep: var(--gw-primary);
  --navy-soft: var(--gw-primary-hover);
  --gold: var(--gw-gold);
  --gold-dark: var(--gw-gold-dark);
  --ink: var(--gw-text);
  --muted: var(--gw-text-muted);
  --bg: var(--gw-bg);
  --card: var(--gw-surface);
  --line: var(--gw-border);
  --ok: var(--gw-success);
  --bad: var(--gw-danger);
  --shadow: var(--gw-shadow);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--gw-font);
  font-size: var(--gw-body-sm);
  line-height: 1.65;
  color: var(--gw-text);
  background: var(--gw-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--gw-font);
  letter-spacing: -0.02em;
  color: var(--gw-primary);
  line-height: 1.18;
  text-wrap: balance;
}

a { color: var(--gw-accent); text-underline-offset: 3px; }

:focus-visible { outline: 3px solid var(--gw-accent); outline-offset: 2px; border-radius: var(--gw-radius-sm); }

.wrap { max-width: var(--gw-container); margin: 0 auto; padding: 0 var(--gw-space-5); }

/* ── Header ──────────────────────────────────────────────────────────────── */
.topbar {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--gw-border);
  position: sticky; top: 0; z-index: 50;
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--gw-space-5); min-height: 72px; padding: 0 var(--gw-space-5); }
.brand { display: flex; align-items: center; gap: var(--gw-space-2); color: var(--gw-primary); text-decoration: none; font-weight: 800; font-size: 1.1875rem; letter-spacing: -0.01em; }
.brand .mark { width: 28px; height: 28px; display: grid; place-items: center; }
.brand .mark svg { width: 24px; height: 24px; }
.brand .mark svg path { stroke: var(--gw-accent); }
.topnav { display: flex; gap: var(--gw-space-5); align-items: center; }
.topnav a {
  color: var(--gw-text-muted); text-decoration: none;
  font-size: var(--gw-body-sm); font-weight: 550;
  padding: var(--gw-space-2) 0; border-bottom: 2px solid transparent;
  transition: color var(--gw-motion-fast) var(--gw-ease), border-color var(--gw-motion-fast) var(--gw-ease);
}
.topnav a:hover, .topnav a.on { color: var(--gw-primary); border-bottom-color: var(--gw-accent); }

/* ── Hero ────────────────────────────────────────────────────────────────────
   Light, like the homepage. The old radial-gradient navy hero is gone: two
   heroes on one site, one dark and one light, reads as two products. */
header.hero {
  background: var(--gw-bg);
  border-bottom: 1px solid var(--gw-border);
  padding: clamp(40px, 2rem + 4vw, 80px) 0 clamp(44px, 2rem + 4vw, 80px);
}
.kicker {
  display: inline-flex; align-items: center;
  background: var(--gw-gold-wash); border: 1px solid #eadfc2; color: var(--gw-gold-dark);
  border-radius: var(--gw-radius-pill); padding: 6px 14px;
  font-size: var(--gw-caption); font-weight: 650; letter-spacing: .04em; text-transform: uppercase;
  margin-bottom: var(--gw-space-5);
}
/* Deliberately smaller than the homepage H1. These are landing pages whose
   hero also carries fact pills, two CTAs and a reassurance line; at the
   homepage's 64px the headline alone filled the viewport and pushed the call to
   action off the first screen. 44px maximum keeps the whole offer visible. */
header.hero h1 { color: var(--gw-primary); font-size: clamp(1.875rem, 1.35rem + 2.2vw, 2.75rem); font-weight: 700; max-width: 20ch; line-height: 1.1; }
header.hero .sub { margin-top: var(--gw-space-5); font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem); color: var(--gw-text-muted); max-width: 64ch; }

.hero-facts { display: flex; flex-wrap: wrap; gap: var(--gw-space-2); margin-top: var(--gw-space-6); }
.hero-facts span {
  background: var(--gw-surface); border: 1px solid var(--gw-border);
  border-radius: var(--gw-radius-pill); padding: 7px 14px;
  font-size: var(--gw-caption); color: var(--gw-text); font-weight: 550;
}

.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gw-space-4); margin-top: var(--gw-space-6); }
.cta {
  background: var(--gw-accent); color: var(--gw-text-inverse); text-decoration: none;
  font-weight: 650; font-size: var(--gw-body-sm);
  border-radius: var(--gw-radius); padding: 0 var(--gw-space-6);
  min-height: 52px; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--gw-shadow);
  transition: background var(--gw-motion-fast) var(--gw-ease), box-shadow var(--gw-motion-fast) var(--gw-ease);
}
.cta:hover { background: var(--gw-accent-hover); box-shadow: var(--gw-shadow-lifted); }
.cta-sub { color: var(--gw-text-muted); font-size: var(--gw-caption); }
.cta-alt { color: var(--gw-primary); font-size: var(--gw-body-sm); font-weight: 600; }

/* ── Body sections ───────────────────────────────────────────────────────── */
main section { margin: clamp(44px, 2rem + 4vw, 80px) 0; }
h2 { font-size: var(--gw-h3); font-weight: 700; margin-bottom: var(--gw-space-3); }
.lead { color: var(--gw-text-muted); max-width: 70ch; margin-bottom: var(--gw-space-6); font-size: var(--gw-body-sm); }
p + p { margin-top: var(--gw-space-4); }
.prose p { color: var(--gw-text); max-width: 70ch; }
.prose p + p { margin-top: var(--gw-space-4); }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--gw-space-5); }
.card {
  background: var(--gw-surface); border: 1px solid var(--gw-border);
  border-radius: var(--gw-radius); padding: var(--gw-space-6);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  transition: box-shadow var(--gw-motion) var(--gw-ease), transform var(--gw-motion) var(--gw-ease);
}
.card:hover { box-shadow: var(--gw-shadow); transform: translateY(-2px); }
.card h3 { font-size: var(--gw-h4); margin-bottom: var(--gw-space-3); font-weight: 650; }
.card p, .card li { color: var(--gw-text-muted); font-size: var(--gw-body-sm); }
.card ul { padding-left: var(--gw-space-5); margin-top: var(--gw-space-3); }
.card li + li { margin-top: var(--gw-space-2); }

.checks { background: var(--gw-surface); border: 1px solid var(--gw-border); border-radius: var(--gw-radius); padding: var(--gw-space-2) 0; }
.checks li { list-style: none; display: flex; gap: var(--gw-space-3); padding: var(--gw-space-4) var(--gw-space-5); border-bottom: 1px solid var(--gw-border); color: var(--gw-text); font-size: var(--gw-body-sm); }
.checks li:last-child { border-bottom: 0; }
.checks li::before { content: ""; flex: 0 0 8px; height: 8px; border-radius: 50%; background: var(--gw-accent); margin-top: 9px; }

.note {
  background: var(--gw-surface); border: 1px solid var(--gw-border);
  border-left: 4px solid var(--gw-gold);
  border-radius: 0 var(--gw-radius) var(--gw-radius) 0;
  padding: var(--gw-space-5); margin-top: var(--gw-space-5);
}
.note b { color: var(--gw-primary); }
.note p { color: var(--gw-text-muted); font-size: var(--gw-body-sm); }

.pricebox {
  background: linear-gradient(135deg, var(--gw-primary), #1b2f52);
  color: #dbe3f0; border-radius: var(--gw-radius);
  padding: clamp(24px, 3vw, 40px);
  display: flex; flex-wrap: wrap; gap: var(--gw-space-5);
  align-items: center; justify-content: space-between;
}
.pricebox h2 { color: #fff; margin-bottom: var(--gw-space-2); }
.pricebox p { color: #b8c5da; font-size: var(--gw-body-sm); max-width: 56ch; }
.pricebox .amount { font-family: var(--gw-font); font-size: clamp(2rem, 1.6rem + 1.8vw, 2.75rem); font-weight: 800; color: #fff; line-height: 1; letter-spacing: -0.03em; }
.pricebox .cta { background: var(--gw-surface); color: var(--gw-primary); }
.pricebox .cta:hover { background: #fff; }

details {
  background: var(--gw-surface); border: 1px solid var(--gw-border);
  border-radius: var(--gw-radius); padding: var(--gw-space-4) var(--gw-space-5);
  margin-bottom: var(--gw-space-3);
}
details summary {
  cursor: pointer; font-weight: 650; color: var(--gw-primary); font-size: var(--gw-body-sm);
  list-style: none; display: flex; justify-content: space-between; gap: var(--gw-space-4); align-items: center;
}
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; font-size: 1.5rem; font-weight: 400; color: var(--gw-accent); transition: transform var(--gw-motion) var(--gw-ease); }
details[open] summary::after { transform: rotate(45deg); }
details p { color: var(--gw-text-muted); font-size: var(--gw-body-sm); margin-top: var(--gw-space-3); }

footer { border-top: 1px solid var(--gw-border); padding: var(--gw-space-7) 0 var(--gw-space-8); color: var(--gw-text-muted); font-size: var(--gw-caption); margin-top: var(--gw-space-6); }
footer a { color: var(--gw-text-muted); }

.crumbs { font-size: var(--gw-caption); color: var(--gw-text-muted); margin: var(--gw-space-5) 0 calc(var(--gw-space-5) * -1); }
.crumbs a { color: var(--gw-text-muted); }

/* ── Tables, where a page has one ────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; background: var(--gw-surface); }
th, td { padding: var(--gw-space-4) var(--gw-space-5); text-align: left; border-bottom: 1px solid var(--gw-border); font-size: var(--gw-body-sm); vertical-align: top; }
thead th { background: #f1f5f9; font-size: var(--gw-caption); text-transform: uppercase; letter-spacing: .04em; color: var(--gw-text-muted); }

@media (max-width: 640px) {
  /* Four nav items do not fit beside the wordmark on a 390px screen, and the
     overflow pushed the whole page sideways. The secondary links are all
     reachable from the footer; the one that earns its place here is the CTA. */
  .topnav .nav-sec { display: none; }
}
@media (max-width: 760px) {
  .grid { grid-template-columns: 1fr; }
  .topnav { gap: var(--gw-space-4); }
  .topnav a { font-size: var(--gw-caption); }
  .cta-row .cta { width: 100%; }
}

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