/* Comms Advisors - business communications advisory
   Design system: "advisory memo". Serif display headlines, hairline rule work,
   tabular numbers, one blue reserved for action. One stylesheet, no build step.

   Contents
   01. Tokens
   02. Base and reset
   03. Typography scale
   04. Layout: container and sections
   05. Skip link
   06. Header
   07. Nav links and current state
   08. Mobile drawer
   09. Buttons
   10. Links in prose
   11. Forms: controls, states, validation
   12. Cards and surfaces
   13. Eyebrow and section-head devices
   14. Hero (home) and hero skeleton
   15. Artifact and artifact band
   16. Steps
   17. Dark ledger band
   18. FAQ
   19. Closing CTA band
   20. Page hero (content pages)
   21. Fact strip
   22. Content typography and lists
   23. Callout
   24. Inline CTA
   25. Form card, field groups, submit
   26. Success confirm block
   27. Mobile sticky action bar
   28. Footer
   29. Motion and reduced motion
   30. Breakpoints
   31. Focus visibility and tap targets
*/

/* ============================================================
   01. Tokens
   ============================================================ */
:root {
  /* Ink and text */
  --ink: #061b31;          /* headings, strong text. 17.4:1 on white */
  --text: #4a5c75;         /* body copy. 6.8:1 on white, 6.5:1 on tint */
  --text-muted: #5e6f87;   /* captions 15px and up. 5.1:1 on white, 4.9:1 on tint */
  --ink-800: #0e2a44;      /* dark section surface. white text on it 14.7:1 */
  --ink-900: #071a2e;      /* footer surface */
  /* Action */
  --accent: #1e56d6;       /* 6.25:1 with white, both directions */
  --accent-hover: #1a49b8; /* 7.8:1 with white */
  --accent-active: #163b91;/* 10.2:1 with white */
  --accent-tint: #eef3fa;  /* icon chips, soft fills */
  /* Surfaces and lines */
  --paper: #ffffff;
  --tint: #f6f9fc;         /* alternating full-bleed bands only */
  --line: #e2e9f2;         /* hairlines */
  --line-strong: #cdd8e6;  /* card borders */
  --input-border: #7d93ab; /* 3.2:1, passes the 3:1 UI boundary rule */
  /* Semantic */
  --green: #0b7f3e;        /* 5.1:1 on white */
  --green-tint: #e9f6ee;
  --error: #b3261e;        /* 6.5:1 on white */
  /* Radius */
  --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px;
  /* Spacing scale, 4px base */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  /* Shadows, blue-tinted, tight */
  --shadow-1: 0 1px 2px rgba(6,27,49,.06);
  --shadow-2: 0 1px 2px rgba(6,27,49,.05), 0 8px 20px -8px rgba(6,27,49,.16);
  --shadow-3: 0 2px 4px rgba(6,27,49,.04), 0 28px 56px -24px rgba(6,27,49,.26);
  /* Depth, from the Ania Kubow pass (see vault "Premium UI CSS - Ania Kubow").
     One light source, from above: a top highlight, a bottom shade, a tight
     contact shadow, and a wide shadow tinted with the action color instead of
     black. Buttons read these through --btn-depth so the focus ring can be
     composed on top without flattening the button. */
  --depth-accent:
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -2px 0 rgba(6,27,49,.22),
    0 1px 2px rgba(6,27,49,.18),
    0 8px 20px -6px rgba(30,86,214,.34);
  --depth-accent-hover:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -2px 0 rgba(6,27,49,.22),
    0 1px 2px rgba(6,27,49,.18),
    0 10px 24px -6px rgba(30,86,214,.42);
  --depth-quiet:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(6,27,49,.10),
    0 6px 16px -8px rgba(6,27,49,.18);
  --depth-press: inset 0 2px 4px rgba(6,27,49,.32);
  --focus-ring: 0 0 0 4px rgba(30,86,214,.18);
  --shadow-lift: 0 1px 2px rgba(6,27,49,.05), 0 12px 28px -10px rgba(30,86,214,.22);
  /* Motion */
  --ease: cubic-bezier(.2,0,0,1); --t-fast: 120ms; --t-med: 180ms;
  /* Type */
  --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-sans: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Source Code Pro', ui-monospace, 'SF Mono', monospace;
  /* Light blue used for small labels on the navy surfaces */
  --label-on-dark: #9db6e8;
}

/* ============================================================
   02. Base and reset
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Offset anchored sections so the sticky header never covers a heading */
section[id] { scroll-margin-top: 88px; }

/* ============================================================
   03. Typography scale
   ============================================================ */
h1, h2, h3, h4 { color: var(--ink); }

h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 58px;          /* home default; pages and success override */
  line-height: 1.06;
  letter-spacing: -0.015em;
}

h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 36px;
  line-height: 1.15;
  letter-spacing: -0.05em;
}

h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.35;
  letter-spacing: -0.005em;
}

/* Lead paragraphs and hero subhead */
.lead,
.hero-sub {
  font-size: 20px;
  line-height: 1.55;
  color: var(--text);
  font-weight: 400;
}

/* Small supporting text */
.small { font-size: 15px; line-height: 1.5; color: var(--text-muted); }

/* Mono index and section labels */
.eyebrow,
.artifact-label,
.artifact-tag,
.fact-label,
.callout-label,
.band-label,
.form-group-label,
.step-num,
.next-steps .num,
.step-mono {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Tabular numbers wherever a number sits in a row or column */
.artifact-value,
.artifact-row span:last-child,
.footer-phone,
.tabular { font-variant-numeric: tabular-nums; }

/* ============================================================
   04. Layout: container and sections
   ============================================================ */
.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

.section { padding: 96px 0; }
.section-tight { padding: 56px 0; }

/* Full-bleed tint band with hairline edges */
.band-tint {
  background: var(--tint);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* Same faint hairline texture as the sample checkup band */
#how-it-works {
  background-image: repeating-linear-gradient(90deg, rgba(6,27,49,.035) 0 1px, transparent 1px 88px);
}

/* ============================================================
   05. Skip link
   ============================================================ */
.skip-link {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip-link:focus {
  position: fixed;
  top: 12px; left: 12px;
  width: auto; height: auto;
  clip: auto;
  margin: 0;
  padding: 12px 16px;
  overflow: visible;
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-sm);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  z-index: 100;
}

/* ============================================================
   06. Header
   ============================================================ */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  backdrop-filter: blur(12px) saturate(180%);
  border-bottom: 1px solid var(--line);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.brand {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}
.brand span { color: var(--accent); }

/* ============================================================
   07. Nav links and current state
   ============================================================ */
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-links a:not(.btn) {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
.nav-links a:not(.btn):hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}
.nav-links a:not(.btn).is-current {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 10px;
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--ink);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease);
}
.nav-toggle:hover { background: var(--tint); }
.nav-toggle svg { width: 22px; height: 22px; display: block; }

/* ============================================================
   08. Mobile drawer (styles apply inside the 940px block)
   ============================================================ */
@media (max-width: 940px) {
  .nav-toggle { display: inline-flex; }

  .nav-links {
    display: none;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-2);
    padding: 12px 24px 20px;
  }
  .nav-links.open { display: flex; }

  .nav-links a:not(.btn) {
    display: block;
    min-height: 48px;
    padding: 12px 0;
    font-size: 17px;
    border-top: 1px solid var(--line);
  }
  .nav-links a:not(.btn):first-child { border-top: 0; }

  .nav-links .btn {
    width: 100%;
    min-height: 48px;
    margin-top: 12px;
  }
}

/* ============================================================
   09. Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 20px;
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.btn-lg { min-height: 52px; padding: 0 28px; }

/* Depth lives in one place. Variants only swap the value, so the focus ring can
   stack on top of it and the button never goes flat on keyboard focus. */
.btn { --btn-depth: var(--depth-quiet); box-shadow: var(--btn-depth); }

.btn-primary {
  background: var(--accent);
  color: #fff;
  --btn-depth: var(--depth-accent);
  position: relative;
  overflow: hidden;
}
.btn-primary:hover {
  background: var(--accent-hover);
  color: #fff;
  --btn-depth: var(--depth-accent-hover);
}
.btn-primary:active {
  background: var(--accent-active);
  transform: translateY(1px);
  --btn-depth: var(--depth-press);
}

/* One sweep of light across the primary button on hover. The base state has no
   transition, so the band snaps back outside the box on mouse-out and never
   sweeps twice. */
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.26) 50%, transparent 60%);
  translate: -100% 0;
}
.btn-primary:hover::after {
  translate: 100% 0;
  transition: translate 700ms var(--ease);
}

.btn-secondary { background: var(--paper); color: var(--ink); border-color: var(--input-border); }
.btn-secondary:hover { background: var(--tint); border-color: var(--text); color: var(--ink); }
.btn-secondary:active { background: var(--accent-tint); transform: translateY(1px); --btn-depth: var(--depth-press); }

.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: var(--focus-ring), var(--btn-depth);
}

.btn[disabled],
.btn.is-disabled { opacity: .55; cursor: not-allowed; }

/* Loading state: spinner before the label, label swaps to "Sending..." */
.btn.is-loading { pointer-events: none; opacity: .85; }
.btn.is-loading::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.45);
  border-top-color: #fff;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   10. Links in prose
   ============================================================ */
.prose a,
.content-body a:not(.btn),
.inline-cta a:not(.btn),
.callout a:not(.btn),
.mid-cta a,
.faq-item a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.prose a:hover,
.content-body a:not(.btn):hover,
.inline-cta a:not(.btn):hover,
.callout a:not(.btn):hover,
.mid-cta a:hover,
.faq-item a:hover {
  color: var(--accent-hover);
  text-decoration-thickness: 2px;
}
.prose a:visited,
.content-body a:not(.btn):visited { color: var(--accent); }

/* Stand-alone tel and mailto rows */
.contact-row { font-size: 16px; }
.contact-row a,
a.contact-link {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.contact-row a:hover,
a.contact-link:hover { color: var(--accent-hover); text-decoration-thickness: 2px; }

/* Mid-page text link on content pages */
.mid-cta { font-size: 17px; color: var(--text); margin: 24px 0; }
.mid-cta a { font-weight: 600; }

/* ============================================================
   11. Forms: controls, states, validation
   ============================================================ */
.form-row { margin-bottom: 20px; }

.form-row label {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 6px;
}

.form-optional {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
}
.form-hint { font-size: 13px; color: var(--text-muted); margin-top: 6px; }

.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--input-border);
  border-radius: var(--r-sm);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.form-row input:hover,
.form-row select:hover,
.form-row textarea:hover { border-color: var(--text); }

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(30,86,214,.16);
}

.form-row input:disabled,
.form-row select:disabled,
.form-row textarea:disabled {
  background: #f1f5f9;
  color: var(--text-muted);
  cursor: not-allowed;
}

.form-row input::placeholder,
.form-row textarea::placeholder { color: var(--text-muted); opacity: .75; }

.form-row select { padding-right: 36px; }
.form-row textarea { min-height: 132px; resize: vertical; }

/* Validation: blur-time only, native constraint API */
.form-row input:user-invalid,
.form-row select:user-invalid,
.form-row textarea:user-invalid {
  border-color: var(--error);
  box-shadow: 0 0 0 4px rgba(179,38,30,.12);
}

.field-error {
  font-size: 14px;
  color: var(--error);
  margin-top: 6px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-note { font-size: 15px; line-height: 1.5; color: var(--text-muted); margin-top: 16px; }

.hp-field { display: none; }

/* ============================================================
   12. Cards and surfaces
   ============================================================ */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 32px 28px;
  transition: border-color var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease),
              transform var(--t-med) var(--ease);
}
.card:hover,
.card:focus-within {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
}
.card h3 { margin-top: 20px; margin-bottom: 12px; }
.card p { font-size: 16px; line-height: 1.6; color: var(--text); }

.card .card-icon {
  display: block;
  color: var(--ink);
  margin-bottom: 20px;
}
.card .card-icon svg { width: 30px; height: 30px; stroke-width: 1.5; display: block; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* ============================================================
   13. Eyebrow and section-head devices
   ============================================================ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--accent);
  margin-bottom: 24px;
}
.eyebrow::before,
.eyebrow::after {
  content: "";
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: .35;
}

/* Section head: h2 with the sub stacked underneath */
.sec-head {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 24px;
  margin-bottom: 48px;
}
.sec-head h2 { grid-column: 1; }
.sec-sub {
  grid-column: 1;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  max-width: 680px;
}

/* ============================================================
   14. Hero (home) and hero skeleton
   ============================================================ */
.hero {
  padding: 104px 0 72px;
  text-align: center;
}
.hero h1 { font-size: 58px; max-width: 880px; margin: 0 auto; }
.hero-sub { max-width: 620px; margin: 24px auto 32px; }

.hero-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.hero-note {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
  margin-top: 20px;
}
.hero-note a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.hero-note a:hover { color: var(--accent-hover); text-decoration-thickness: 2px; }

/* ============================================================
   15. Artifact and artifact band
   ============================================================ */
.artifact-band {
  background-color: var(--tint);
  background-image: repeating-linear-gradient(90deg, rgba(6,27,49,.035) 0 1px, transparent 1px 88px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 64px 24px 72px;
}

.artifact {
  max-width: 860px;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  overflow: hidden;
}

.artifact-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 56px;
  padding: 0 28px;
  border-bottom: 1px solid var(--line);
}
.artifact-brand { font-size: 15px; font-weight: 600; color: var(--ink); }
.artifact-tag { font-size: 11px; color: var(--text-muted); }

.artifact-body { padding: 32px 28px; }

.artifact-stats { display: grid; grid-template-columns: 1fr 1.2fr 1fr; }
.artifact-stat:nth-child(2),
.artifact-stat:nth-child(3) {
  border-left: 1px solid var(--line);
  padding-left: 24px;
}
.artifact-label {
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.artifact-value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.artifact-note { font-size: 14px; line-height: 1.45; color: var(--text-muted); margin-top: 6px; }
.artifact-badge {
  display: inline-block;
  margin-top: 10px;
  padding: 3px 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-tint);
  border: 1px solid rgba(30,86,214,.28);
  border-radius: var(--r-xs);
}

.artifact-rows { margin-top: 28px; }
.artifact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  font-size: 15px;
}
.artifact-row span:first-child { color: var(--ink); font-weight: 500; }
.artifact-row span:last-child { color: var(--text); }

.artifact-foot {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* ============================================================
   16. Steps
   ============================================================ */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.step { border-top: 2px solid var(--ink); padding-top: 24px; }
.step-num {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.step h3 { margin-bottom: 10px; }
.step p { font-size: 16px; line-height: 1.6; color: var(--text); }

/* ============================================================
   17. Dark ledger band
   ============================================================ */
.band-dark { background: var(--ink-800); color: #fff; }

.band-dark .sec-head { border-top-color: rgba(255,255,255,.16); }
.band-dark .sec-head h2 { color: #fff; }
.band-dark .sec-sub { color: rgba(255,255,255,.72); }

.dark-ledger { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.dark-cell {
  padding: 32px 28px;
  border-top: 1px solid rgba(255,255,255,.16);
  transition: background-color var(--t-med) var(--ease);
}
.dark-cell:nth-child(3n+2),
.dark-cell:nth-child(3n+3) { border-left: 1px solid rgba(255,255,255,.16); }
.dark-cell:hover { background: rgba(255,255,255,.03); }
.dark-cell h3 { color: #fff; margin-bottom: 10px; }
.dark-cell p { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.72); }

/* ============================================================
   18. FAQ
   ============================================================ */
.faq-item {
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 32px;
  padding: 28px 0;
  border-top: 1px solid var(--line);
}
.faq-item h3 { font-size: 19px; font-weight: 600; color: var(--ink); }
.faq-item p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  max-width: 680px;
}

/* ============================================================
   19. Closing CTA band
   ============================================================ */
.band-cta {
  background: var(--ink-800);
  padding: 96px 0;
  text-align: center;
  color: #fff;
}
.band-label {
  font-size: 12px;
  line-height: 1.4;
  color: var(--label-on-dark);
  margin-bottom: 20px;
}
.band-cta h2 {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.05em;
  color: #fff;
  max-width: 640px;
  margin: 0 auto 16px;
}
.band-cta p {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255,255,255,.72);
  max-width: 560px;
  margin: 0 auto 32px;
}
.band-cta .band-note {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: #b9c4d4;
  margin: 20px auto 0;
}

/* ============================================================
   20. Page hero (content pages)
   ============================================================ */
.page-hero {
  padding: 88px 0 56px;
  border-bottom: 1px solid var(--line);
}
.page-hero h1 { font-size: 50px; line-height: 1.08; max-width: 820px; }
.page-hero .lead,
.page-hero .hero-sub {
  font-size: 20px;
  line-height: 1.55;
  color: var(--text);
  max-width: 640px;
  margin: 20px 0 0;
}
.page-hero .hero-cta { justify-content: flex-start; margin-top: 32px; }

.hero-note-inline {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* ============================================================
   21. Fact strip
   ============================================================ */
.fact-strip {
  background: var(--tint);
  border-bottom: 1px solid var(--line);
  padding: 32px 24px;
}
.fact-strip-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.fact-item:nth-child(2),
.fact-item:nth-child(3) {
  border-left: 1px solid var(--line);
  padding-left: 24px;
}
.fact-label {
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.fact-value { font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--ink); }

/* ============================================================
   22. Content typography and lists
   ============================================================ */
.prose h2,
.content-body h2 {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.05em;
  color: var(--ink);
  margin: 64px 0 16px;
}
.prose h3,
.content-body h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  margin: 32px 0 12px;
}
.prose p,
.content-body p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  max-width: 680px;
  margin-bottom: 18px;
}
.prose ul,
.prose ol,
.content-body ul,
.content-body ol {
  list-style: none;
  max-width: 680px;
  margin: 0 0 28px;
  padding: 0;
}
.prose li,
.content-body li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 14px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
}
.prose li::before,
.content-body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  background: var(--accent);
}
.prose strong,
.content-body strong { font-weight: 600; color: var(--ink); }

.content-body { padding-bottom: 96px; }

/* ============================================================
   23. Callout
   ============================================================ */
.callout,
.content-card {
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 32px 28px;
  margin: 32px 0;
}
.callout-label {
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.callout h2,
.callout h3,
.content-card h2,
.content-card h3 { margin-top: 0; }
.callout p:last-child,
.content-card p:last-child { margin-bottom: 0; }

/* ============================================================
   24. Inline CTA
   ============================================================ */
.inline-cta {
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--accent);
  border-radius: var(--r-lg);
  padding: 48px 40px;
  margin: 64px 0;
  box-shadow: var(--shadow-1);
}
.inline-cta h2 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.05em;
  color: var(--ink);
  margin: 0 0 12px;
}
.inline-cta p { font-size: 17px; line-height: 1.6; color: var(--text); max-width: 520px; margin-bottom: 24px; }

/* ============================================================
   25. Form card, field groups, submit
   ============================================================ */
.form-wrap { max-width: 640px; margin: 0 auto; }

.form-card {
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  padding: 40px;
}

.form-card fieldset { border: 0; margin: 0 0 24px; padding: 0; }
.form-card fieldset:last-of-type { margin-bottom: 0; }

.form-group-label,
.form-card legend {
  display: block;
  width: 100%;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}

.form-submit {
  width: 100%;
  min-height: 52px;
  font-size: 17px;
}

/* Assessment two-column layout turns on at 1000px */
.assessment-grid { display: grid; grid-template-columns: 1fr; gap: 48px; }
.assessment-left h1 { font-size: 46px; line-height: 1.1; max-width: 480px; margin-top: 0; }
.assessment-left .lead { max-width: 480px; margin-top: 20px; }

/* Numbered next-steps list (assessment and success) */
.next-steps { list-style: none; margin: 32px 0 0; padding: 0; }
.next-steps li {
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: 16px;
  align-items: start;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.next-steps .num { font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.next-steps .t { font-size: 16px; font-weight: 600; color: var(--ink); }
.next-steps .d { font-size: 15px; line-height: 1.55; color: var(--text); margin-top: 2px; }

.next-steps.is-centered { text-align: center; }
.next-steps.is-centered li {
  grid-template-columns: 1fr;
  justify-items: center;
  max-width: 460px;
  margin: 0 auto;
  padding: 16px 0;
}
.next-steps.is-centered .num { margin-bottom: 4px; }

/* ============================================================
   26. Success confirm block
   ============================================================ */
.confirm {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
  padding: 120px 0 64px;
}
.confirm h1 { font-size: 44px; line-height: 1.08; margin-top: 0; }
.confirm .lead { max-width: 520px; margin: 20px auto 0; }
.confirm .hero-cta { margin-top: 32px; }

.check-device {
  width: 56px;
  height: 56px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--green);
}
.check-device svg { width: 26px; height: 26px; stroke-width: 2; display: block; }

/* ============================================================
   27. Mobile sticky action bar (shown in the 768px block)
   ============================================================ */
.action-bar { display: none; }
.action-bar .btn { flex: 1; min-height: 48px; }

/* ============================================================
   28. Footer
   ============================================================ */
footer {
  background: var(--ink-900);
  color: #c3cedd;
  padding: 64px 0 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
footer h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #93a2b8;
  margin-bottom: 16px;
}
footer a {
  display: block;
  padding: 11px 0;
  font-size: 15px;
  line-height: 1.5;
  color: #c3cedd;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
footer a:hover { color: #fff; text-decoration: underline; }

.footer-brand { font-size: 19px; font-weight: 600; color: #fff; margin-bottom: 12px; }
.footer-brand span { color: #7fa8f0; }
.footer-note { font-size: 14px; line-height: 1.5; color: #93a2b8; max-width: 300px; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.14);
  padding-top: 24px;
  font-size: 13px;
  color: #93a2b8;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

/* ============================================================
   29. Motion and reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .card:hover,
  .card:focus-within,
  .btn:active { transform: none; }
  .dark-cell { transition: none; }
  .btn.is-loading::before { animation: none; }
}

/* ============================================================
   30. Breakpoints
   ============================================================ */

/* (1) 1200px and below: container flows below its 1120px maximum */
@media (max-width: 1200px) {
  .container { width: 100%; }
}

/* (2) 940px and below: nav collapses to the toggle and drawer, hero steps down */
@media (max-width: 940px) {
  .hero h1 { font-size: 48px; }
  .page-hero h1 { font-size: 44px; }
}

/* (2b) 941px to 1100px: tighter nav gaps so the header call link fits cleanly */
@media (min-width: 941px) and (max-width: 1100px) {
  .nav-links { gap: 18px; }
}

/* (3) 768px and below: one column everywhere, mobile type, action bar */
@media (max-width: 768px) {
  h2 { font-size: 28px; }
  h3 { font-size: 19px; }
  .lead, .hero-sub { font-size: 18px; }

  .hero { padding: 64px 0 48px; }
  .hero h1 { font-size: 36px; }
  .page-hero { padding: 64px 0 48px; }
  .page-hero h1 { font-size: 34px; }
  .confirm { padding: 72px 0 48px; }
  .confirm h1 { font-size: 32px; }

  .section { padding: 64px 0; }

  .grid-3,
  .steps,
  .artifact-stats,
  .fact-strip-inner,
  .faq-item,
  .sec-head,
  .form-grid,
  .dark-ledger { grid-template-columns: 1fr; }

  .sec-head { row-gap: 12px; align-items: start; }
  .sec-head h2,
  .sec-sub { grid-column: 1; }
  .sec-head { margin-bottom: 40px; }

  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  footer h4 { margin-bottom: 10px; }
  footer a { padding: 10px 0; }

  .card { padding: 32px; }
  .card p { line-height: 1.68; }
  .content-body p { line-height: 1.7; }
  .prose li,
  .content-body li { margin-bottom: 16px; line-height: 1.68; }
  .next-steps li { padding: 18px 0; }

  .dark-cell:nth-child(3n+2),
  .dark-cell:nth-child(3n+3) { border-left: 0; }

  .artifact-stat:nth-child(2),
  .artifact-stat:nth-child(3) {
    border-left: 0;
    padding-left: 0;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
  }
  .artifact-value { font-size: 26px; }
  .artifact-head { height: auto; min-height: 56px; }

  .fact-item:nth-child(2),
  .fact-item:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: 20px;
  }

  .band-cta { padding: 64px 0; }
  .band-cta h2 { font-size: 32px; }

  .inline-cta { padding: 32px 24px; margin: 48px 0; }
  .content-body { padding-bottom: 64px; }
  .assessment-left h1 { font-size: 34px; }

  header .nav { height: 64px; }
  .nav-links { top: 64px; }

  .form-card { padding: 24px; }
  .form-wrap { max-width: none; }

  section[id] { scroll-margin-top: 76px; }

  /* Mobile sticky action bar */
  .action-bar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    gap: 12px;
    min-height: 64px;
    padding: 8px 16px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.97);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    backdrop-filter: blur(12px) saturate(180%);
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 24px -16px rgba(6,27,49,.2);
  }
  body { padding-bottom: 80px; }
}

/* (4) 480px and below: stack CTA rows, full-width buttons, wrap letterhead */
@media (max-width: 480px) {
  .container { padding: 0 20px; }

  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }

  .artifact-head { flex-wrap: wrap; align-items: center; }

  .hero-note,
  .band-note,
  .hero-note-inline { text-align: left; }
}

/* Assessment two-column layout turns on at 1000px and up */
@media (min-width: 1000px) {
  .assessment-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 64px;
    align-items: start;
  }
}

/* ============================================================
   31. Focus visibility and tap targets
   ============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Tap targets verified at 390px:
   nav links 44px tall, nav toggle 44x44, drawer links 48px, hero buttons 48px and
   52px, form controls 48px, submit 52px, footer links 44px via padding,
   action bar controls 48px, inline CTA button 48px. */