/* ---
title: Doomproof stylesheet
version: 0.13
updated: 2026-10-14
status: draft
purpose: The Draft 3.8 visual system (Draft 3.8 self-hosts the fonts (four latin woff2 files, @font-face at the top), eases the desktop hero's reading shade one step lighter (Jason's correction to Draft 3.7; the supporting paragraph about 5:1) and styles the live Tally form on Start Here; Draft 3.7 strengthens and widens the desktop hero's reading shade so the headline and supporting paragraph read over the bright city, fading out just past the words; Draft 3.6 adds the founder portrait's frame, the header's theme toggle and dark mode from Sage's Dark_Palette_Handoff_2026-10-14, scoped under [data-theme="dark"] so the light theme is unchanged; Draft 3.4 adds the small personal-projects invitation under the homepage service cards and on Start Here; Draft 3.3 adds the in-page plan button blocks on the service pages and the Start Here email action) (Draft 3.4 adds the small personal-projects invitation under the homepage service cards and on Start Here; Draft 3.3 adds the in-page plan button blocks on the service pages and the Start Here email action) for the Doomproof AI website (tokens, type, buttons, the seven homepage sections, header and footer, and since 2026-10-13 the secondary pages: page head, text sections, round-marker lists, price cards, FAQ), from the starting tokens in Visual_Design_System_Creative_Direction and Sage's Homepage_Implementation_Handoff. Every page uses only this file; styles.css is unused
--- */

/* Rhythm (the handoff): BIG (dark hero) → quiet (warm off-white) → moderate (light secondary)
   → structured (charcoal) → contained (off-white, graphite cards) → BIG (deep charcoal) → quiet
   (off-white). Type: Archivo for headlines, Instrument Sans for reading, IBM Plex Mono for small
   numbers and labels only. Yellow is for buttons, rules and highlights, and as text only on dark. */

/* Fonts, self-hosted since Draft 3.8 (no Google Fonts requests): the latin files Google served, only the
   weights in use. Archivo and Instrument Sans are variable (one file each); Plex Mono is 400 and 500. */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 500 800; font-display: swap;
  src: url("Archivo_500_800_Latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("Instrument_Sans_400_700_Latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("IBM_Plex_Mono_400_Latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("IBM_Plex_Mono_500_Latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --deep: #111417;
  --charcoal: #1D2227;
  --graphite: #292F35;
  --offwhite: #F4F2EC;
  --light-2: #E7E5DF;
  --card-light: #FBFAF7;
  --ink: #191D21;
  --ink-soft: #454C53;
  --metal: #87919A;
  --metal-light: #A9B1B8;
  --light-text: #F4F5F3;
  --signal: #FFC629;
  --signal-hover: #FFD45A;
  --signal-press: #EDB412;
  --line-light: rgba(25, 29, 33, 0.12);
  --line-dark: rgba(244, 245, 243, 0.12);
  /* Draft 3.6: labels on yellow fills, and the header toggle's edge (the header is dark in both themes). */
  --on-signal: #191D21;
  --border-strong: #89949E;

  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  --wrap: 1240px;
  --gutter: clamp(20px, 4vw, 48px);
  --section: clamp(80px, 9vw, 128px);
  --radius: 12px;
  --radius-lg: 18px;
  --header-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--offwhite);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
}

h2 { font-size: clamp(32px, 4.2vw, 52px); }
h3 { font-size: 20px; line-height: 1.25; letter-spacing: -0.01em; font-weight: 700; }
p { margin: 0; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--signal); color: var(--on-signal); padding: 10px 16px; border-radius: 8px;
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.draft-bar {
  background: var(--signal); color: var(--on-signal);
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 500;
  text-align: center; padding: 6px 16px; letter-spacing: 0.02em;
}

/* ---------- Small shared pieces ---------- */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  margin: 0 0 18px;
  color: var(--ink-soft);
}
.eyebrow-signal { color: var(--signal); }
.eyebrow-rule { display: flex; align-items: center; gap: 14px; }
.eyebrow-rule::before { content: ""; width: 36px; height: 2px; background: var(--signal); flex: none; }

.num {
  font-family: var(--font-mono); font-size: 13px; font-weight: 500;
  letter-spacing: 0.08em; color: var(--ink-soft);
}

.text-link {
  font-family: var(--font-display); font-weight: 600; font-size: 16px;
  color: var(--ink); text-decoration: none;
  border-bottom: 2px solid var(--signal); padding-bottom: 2px;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.text-link:hover { border-color: var(--ink); }
.text-link-light { color: var(--light-text); }
.text-link-light:hover { border-color: var(--light-text); }

a:focus-visible, .btn:focus-visible {
  outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px;
}
.site-header a:focus-visible, .hero a:focus-visible, .framework a:focus-visible,
.service-card a:focus-visible, .philosophy a:focus-visible, .site-footer a:focus-visible {
  outline-color: var(--light-text);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.005em;
  color: var(--on-signal); text-decoration: none;
  background: var(--signal);
  border-radius: 11px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 1px 2px rgba(17, 20, 23, 0.25), 0 6px 18px -8px rgba(255, 198, 41, 0.55);
  transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover {
  background: var(--signal-hover);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 4px rgba(17, 20, 23, 0.25), 0 12px 26px -10px rgba(255, 198, 41, 0.7);
}
.btn:active {
  background: var(--signal-press);
  transform: translateY(0);
  box-shadow: inset 0 2px 3px rgba(17, 20, 23, 0.18);
}
.btn-large { font-size: 18px; padding: 17px 28px; }
.btn-small { font-size: 15px; padding: 11px 18px; border-radius: 10px; }
.btn-arrow { transition: transform 0.15s ease; }
.btn:hover .btn-arrow { transform: translateX(3px); }

/* ---------- Header ----------
   Dark, over the hero art (Draft 3.1): the light-on-dark web copy of the logo, light menu.
   The negative margin pulls the hero up underneath the header. */

.site-header {
  position: relative; z-index: 10;
  height: var(--header-h); margin-bottom: calc(-1 * var(--header-h));
  display: flex; align-items: center;
  background: transparent;
}
.header-inner { display: flex; align-items: center; gap: 40px; width: 100%; }
.logo { display: block; flex: none; border-radius: 6px; }
.logo img { height: 40px; width: auto; }
.site-nav { display: flex; gap: 34px; margin-left: auto; }
.site-nav a {
  color: var(--light-text); text-decoration: none; font-size: 16px; font-weight: 500;
  padding: 6px 0; border-bottom: 2px solid transparent; transition: border-color 0.15s ease;
  text-shadow: 0 1px 8px rgba(10, 12, 14, 0.6);
}
.site-nav a:hover { border-color: var(--signal); }

/* Theme toggle (Draft 3.6): a small round button; a crescent moon in light mode, a sun in dark mode.
   The header is dark in both themes, so the icon is pale in both. Hidden without JavaScript. */
.theme-toggle {
  flex: none; display: inline-grid; place-items: center;
  width: 38px; height: 38px; padding: 0; border-radius: 50%;
  background: rgba(17, 20, 23, 0.35); color: var(--light-text);
  border: 1px solid var(--border-strong); cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.theme-toggle:hover { border-color: var(--signal); color: var(--signal); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
html:not([data-theme]) .theme-toggle { display: none; }
.theme-toggle:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; }

/* ---------- 1. Hero: full cinematic ---------- */

.hero {
  position: relative; overflow: hidden;
  background: var(--deep); color: var(--light-text);
  min-height: clamp(640px, 82vh, 860px);
  display: flex; align-items: center;
}
.hero-art {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 72% 50%;
}
/* Draft 3.7 (Sage's Draft 3.6 review): the reading shade follows the words, not the window.
   --copy-end is where the 720px copy column ends at any desktop width (the wrap's centring
   plus its gutter); the shade stays dark to just past it, then fades out over about 240px,
   so everything right of the words keeps the art's full brightness.
   Draft 3.8 (Jason): one step lighter, the same shape and fade (the paragraph 4.85–5.44:1, the headline 3.29–3.91:1). */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  --copy-end: calc(max((100% - var(--wrap)) / 2, 0px) + var(--gutter) + 720px);
  background:
    linear-gradient(180deg, rgba(10, 12, 14, 0.55) 0%, rgba(10, 12, 14, 0) 20%),
    linear-gradient(90deg, rgba(10, 12, 14, 0.82) 0%, rgba(10, 12, 14, 0.64) calc(var(--copy-end) - 220px), rgba(10, 12, 14, 0.58) calc(var(--copy-end) + 20px), rgba(10, 12, 14, 0.23) calc(var(--copy-end) + 140px), rgba(10, 12, 14, 0) calc(var(--copy-end) + 260px)),
    linear-gradient(0deg, rgba(10, 12, 14, 0.55) 0%, rgba(10, 12, 14, 0) 24%);
}
.hero-inner { position: relative; z-index: 2; width: 100%; padding-top: calc(var(--header-h) + 56px); padding-bottom: 72px; }
.hero-copy { max-width: 720px; }
.hero-title { font-size: clamp(44px, 5.6vw, 76px); line-height: 1.02; letter-spacing: -0.035em; margin-bottom: 26px; text-wrap: wrap; }
.hero-title-turn { display: block; color: var(--signal); }
.hero-support { font-size: 20px; line-height: 1.5; max-width: 540px; color: #E6E8E4; margin-bottom: 34px; }
.hero-intake { margin-top: 16px; font-size: 15px; color: #C9CED1; max-width: 420px; }

/* ---------- 2. Founder: quiet ---------- */

.founder { background: var(--offwhite); padding: var(--section) 0; }
.founder-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  grid-template-areas:
    "head portrait"
    "story portrait"
    "proof proof"
    "foot foot";
  column-gap: clamp(48px, 7vw, 112px);
}
.founder-head { grid-area: head; }
.founder-head h2 { max-width: 760px; margin-bottom: 36px; }
.founder-head h2 .line { display: block; }
.mark { background: linear-gradient(transparent 68%, rgba(255, 198, 41, 0.75) 68%, rgba(255, 198, 41, 0.75) 92%, transparent 92%); padding: 0 2px; }
.founder-quote { margin: 0 0 28px; padding-left: 24px; border-left: 3px solid var(--signal); max-width: 640px; }
.founder-quote blockquote { margin: 0; }
.founder-quote p { font-family: var(--font-display); font-size: 23px; line-height: 1.4; font-weight: 500; letter-spacing: -0.01em; }
.founder-quote figcaption { margin-top: 12px; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.founder-story { grid-area: story; max-width: 620px; color: var(--ink-soft); font-size: 18px; }
.founder-story p + p { margin-top: 12px; }
/* The founder portrait (Draft 3.6): the 4:5 frame and radius of the old placeholder, a 1px edge
   (Sage's portrait frame, both themes). The web copies carry no version, so a new photo swaps in
   under the same names. */
.portrait {
  grid-area: portrait; align-self: start; margin: 0;
  aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line-light);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.proof-row {
  grid-area: proof; margin: 56px 0 0; padding-top: 36px;
  border-top: 1px solid var(--line-light);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px;
}
.proof-row div { display: flex; flex-direction: column-reverse; gap: 4px; }
.proof-row dd { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 4.4vw, 56px); line-height: 1; letter-spacing: -0.03em; }
.proof-row dt { font-size: 16px; color: var(--ink-soft); }
.founder-foot { grid-area: foot; margin-top: 32px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px 40px; }
.credentials { font-size: 15px; color: var(--ink-soft); }

/* ---------- 3. What can go wrong? Moderate ---------- */

.risks { background: var(--light-2); padding: var(--section) 0; }
.section-head { max-width: 860px; margin-bottom: 56px; }
.section-head h2 { margin-bottom: 22px; }
.section-head p { font-size: 19px; color: var(--ink-soft); max-width: 680px; }
.section-head p + p { margin-top: 6px; }
.section-head-center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head-center p { margin-left: auto; margin-right: auto; }

.risk-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
}
.risk-card {
  background: var(--card-light); border-radius: var(--radius-lg);
  border: 1px solid var(--line-light);
  box-shadow: 0 1px 2px rgba(17, 20, 23, 0.04), 0 10px 30px -18px rgba(17, 20, 23, 0.25);
  overflow: hidden; display: flex; flex-direction: column;
}
.risk-card img { width: 100%; height: auto; aspect-ratio: 1881 / 836; object-fit: contain; background: #15181B; }
.risk-body { padding: 24px 26px 28px; }
.risk-body .num { display: block; margin-bottom: 10px; }
.risk-body h3 { margin-bottom: 10px; }
.risk-body p { font-size: 16px; color: var(--ink-soft); line-height: 1.55; }

/* ---------- 4. The four questions: structured ---------- */

.framework {
  background:
    radial-gradient(ellipse 60% 50% at 50% 58%, rgba(255, 198, 41, 0.07), transparent 70%),
    var(--charcoal);
  color: var(--light-text); padding: var(--section) 0;
}
.framework .section-head { margin-bottom: 64px; }
.matrix { position: relative; }
.matrix-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 220px; row-gap: 40px;
}
.q {
  position: relative;
  background: linear-gradient(180deg, #2D343B, var(--graphite));
  border: 1px solid var(--line-dark); border-radius: var(--radius-lg);
  padding: 34px 34px 36px;
  box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.q-num {
  display: block; font-family: var(--font-mono); font-weight: 500; font-size: 15px;
  letter-spacing: 0.1em; color: var(--signal); margin-bottom: 18px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line-dark);
}
.q h3 { font-size: clamp(22px, 2.2vw, 28px); margin-bottom: 12px; letter-spacing: -0.02em; }
.q p { color: var(--metal-light); font-size: 17px; }

/* Pathways: each panel connects to the central core across the middle gap. */
.q::after {
  content: ""; position: absolute; top: 50%; height: 2px; width: 110px;
  background: linear-gradient(90deg, rgba(255, 198, 41, 0.15), rgba(255, 198, 41, 0.85));
}
.q1::after, .q3::after { left: 100%; }
.q2::after, .q4::after { right: 100%; transform: scaleX(-1); }
.q::before {
  content: ""; position: absolute; top: calc(50% - 4px); width: 10px; height: 10px; border-radius: 50%;
  background: var(--signal); box-shadow: 0 0 0 4px rgba(255, 198, 41, 0.18);
}
.q1::before, .q3::before { right: -5px; }
.q2::before, .q4::before { left: -5px; }

.matrix-core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 132px; height: 132px; border-radius: 26px;
  background: linear-gradient(160deg, #343C44, #1A1F24);
  border: 1.5px solid rgba(255, 198, 41, 0.75);
  box-shadow: 0 0 0 10px rgba(255, 198, 41, 0.06), 0 0 60px -10px rgba(255, 198, 41, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  display: grid; place-items: center;
}
.matrix-core::before {
  content: ""; position: absolute; left: 50%; top: -220px; bottom: -220px; width: 2px; transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, rgba(255, 198, 41, 0.35) 30%, rgba(255, 198, 41, 0.35) 70%, transparent);
  z-index: -1;
}
.matrix-core span { font-family: var(--font-display); font-weight: 800; font-size: 40px; color: var(--signal); letter-spacing: -0.02em; }
.matrix-next { margin-top: 56px; text-align: center; }

/* ---------- 5. Two services: contained ---------- */

.services { background: var(--offwhite); padding: var(--section) 0; }
.service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.service-card {
  background: var(--charcoal); color: var(--light-text);
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid rgba(17, 20, 23, 0.6);
  box-shadow: 0 30px 60px -36px rgba(17, 20, 23, 0.55);
  display: flex; flex-direction: column;
}
.service-art {
  aspect-ratio: 16 / 9;
  background: #121518;
  border-bottom: 1px solid var(--line-dark);
}
.service-art img { width: 100%; height: 100%; object-fit: cover; }
.service-body { padding: 32px 36px 36px; display: flex; flex-direction: column; flex: 1; }
.service-body .eyebrow { margin-bottom: 12px; }
.service-body h3 { font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -0.02em; margin-bottom: 10px; }
.service-sub { font-family: var(--font-display); font-weight: 500; font-size: 18px; color: var(--signal); margin-bottom: 16px; }
.service-body > p:not(.eyebrow):not(.service-sub) { color: var(--metal-light); margin-bottom: 26px; }
.service-body .text-link { margin-top: auto; align-self: flex-start; }
.services-invite { max-width: 640px; margin: 48px auto 0; text-align: center; }
.services-invite h3 { font-size: 20px; letter-spacing: -0.01em; margin-bottom: 8px; }
.services-invite p { color: var(--ink-soft); font-size: 16px; }
.services-invite a { color: var(--ink); text-decoration-color: var(--signal); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.invite h3 { font-size: 20px; letter-spacing: -0.01em; }
.services-cta { margin-top: 56px; text-align: center; }
.services-cta p { margin-top: 16px; color: var(--ink-soft); font-size: 16px; }

/* ---------- 6. Prepared beats panicked: full cinematic ---------- */

.philosophy {
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 55% 70% at 78% 45%, rgba(255, 168, 60, 0.12), transparent 70%),
    var(--deep);
  color: var(--light-text); padding: calc(var(--section) + 8px) 0;
}
.philosophy-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 5vw, 72px); align-items: center; }
.philosophy h2 { font-size: clamp(44px, 5.4vw, 72px); line-height: 1; letter-spacing: -0.035em; margin-bottom: 26px; }
.signal { color: var(--signal); }
.philosophy-sub { font-size: 22px; font-weight: 700; margin-bottom: 18px; color: var(--light-text); }
.philosophy-copy p { color: var(--metal-light); font-size: 18px; max-width: 470px; }
.philosophy-copy p + p { margin-top: 14px; }
.philosophy-copy strong { color: var(--light-text); font-weight: 600; }
.philosophy-copy p.eyebrow { color: var(--signal); font-size: 13px; max-width: none; margin-bottom: 18px; }
.scene { margin: 0; }
.scene img {
  width: 100%; border-radius: var(--radius-lg);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* ---------- 7. Final conversion: quiet ---------- */

.final { background: var(--offwhite); padding: calc(var(--section) + 16px) 0; }
.final-inner { text-align: center; }
.final h2 { font-size: clamp(40px, 5vw, 64px); letter-spacing: -0.035em; }
.final-lead { margin-top: 16px; font-size: 20px; color: var(--ink-soft); }
.steps {
  list-style: none; margin: 56px auto; padding: 0; max-width: 1100px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light);
}
.steps li {
  padding: 30px 28px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.steps li + li { border-left: 1px solid var(--line-light); }
.step-label { font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.steps h3 { font-size: 20px; letter-spacing: -0.015em; }
.steps p { font-size: 16px; color: var(--ink-soft); line-height: 1.5; max-width: 300px; }

/* ---------- Footer ---------- */

.site-footer { background: var(--deep); color: var(--metal-light); padding: 64px 0 40px; font-size: 15px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 32px 48px; align-items: start; }
.footer-logo { display: inline-block; }
.footer-logo img { height: 34px; width: auto; }
.footer-id .eyebrow { margin: 16px 0 0; color: var(--metal); font-size: 12px; }
.footer-nav, .footer-contact { display: flex; flex-direction: column; gap: 10px; }
.site-footer a { color: var(--light-text); text-decoration: none; }
.site-footer a:hover { color: var(--signal); }
.footer-fine { grid-column: 1 / -1; padding-top: 28px; border-top: 1px solid var(--line-dark); color: var(--metal); font-size: 14px; }

/* ---------- Secondary pages (Draft 3.2) ----------
   About, the two service pages, Start Here, and Privacy and Terms: the homepage's header, type,
   warm pale backgrounds, graphite surfaces, yellow accents, buttons and footer. A dark page head
   under a solid dark header, then quiet text sections. */

.site-header-solid { margin-bottom: 0; background: var(--deep); border-bottom: 1px solid var(--line-dark); }
.site-header-solid .site-nav a { text-shadow: none; }
.site-nav a[aria-current="page"] { border-color: var(--signal); }

.page-head {
  background:
    radial-gradient(ellipse 50% 80% at 85% 30%, rgba(255, 198, 41, 0.06), transparent 70%),
    var(--deep);
  color: var(--light-text);
  padding: clamp(56px, 7vw, 96px) 0 clamp(64px, 8vw, 104px);
}
.page-head-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 5vw, 72px); align-items: center; }
.page-head h1 { font-size: clamp(40px, 5vw, 64px); line-height: 1.02; letter-spacing: -0.035em; margin-bottom: 22px; }
.page-head .service-sub { font-size: 21px; margin-bottom: 22px; }
.page-lead { font-size: 20px; line-height: 1.5; color: #E6E8E4; max-width: 640px; }
.page-lead + .page-lead, .page-lead + .page-note { margin-top: 16px; }
.page-note { font-size: 16px; color: var(--metal-light); max-width: 600px; }
.page-byline { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal); margin-bottom: 22px; }
.page-art { margin: 0; }
.page-art img {
  width: 100%; border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px -36px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.page-section { padding: clamp(64px, 7vw, 96px) 0; }
.page-section-alt { background: var(--light-2); }
.page-section h2 { font-size: clamp(28px, 3.2vw, 40px); margin-bottom: 20px; }
.page-section h3 { margin-bottom: 8px; }
.page-section p + p { margin-top: 14px; }
.page-section .section-lead { font-size: 19px; color: var(--ink-soft); max-width: 720px; }
.prose { max-width: 720px; }
.muted { color: var(--ink-soft); }
.page-section a:not(.btn):not(.text-link) { color: var(--ink); text-decoration-color: var(--signal); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.stack-gap > * + * { margin-top: 28px; }
.page-section .space-top, .space-top { margin-top: 28px; }
.page-section .space-top-sm, .space-top-sm { margin-top: 16px; }

.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 72px); align-items: start; }

/* Round markers, yellow with a dark outline; the muted kind for what's excluded. */
.dot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.dot-list li { position: relative; padding-left: 26px; }
.dot-list li::before {
  content: ""; position: absolute; left: 0; top: 0.55em; width: 10px; height: 10px; border-radius: 50%;
  background: var(--signal); box-shadow: 0 0 0 1.5px var(--ink);
}
.dot-list-muted li::before { background: transparent; box-shadow: 0 0 0 1.5px var(--metal); }
.dot-list strong { color: var(--ink); }
.list-label { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin: 28px 0 12px; }
.list-label:first-child { margin-top: 0; }

.note-box { background: var(--card-light); border: 1px solid var(--line-light); border-left: 3px solid var(--signal); border-radius: var(--radius); padding: 18px 22px; }
.page-head .note-box { margin-top: 24px; background: var(--graphite); border-color: var(--line-dark); border-left-color: var(--signal); color: var(--light-text); max-width: 600px; }

.tiers { display: grid; gap: 24px; margin-top: 40px; }
.tiers-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tiers-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; }
.tier {
  background: var(--card-light); border: 1px solid var(--line-light); border-radius: var(--radius-lg);
  padding: 30px 28px 32px; display: flex; flex-direction: column; gap: 16px;
  box-shadow: 0 1px 2px rgba(17, 20, 23, 0.04), 0 10px 30px -18px rgba(17, 20, 23, 0.25);
}
.tier-front { border-top: 4px solid var(--signal); }
.tier-flag { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.tier h3 { font-size: 24px; letter-spacing: -0.02em; }
.price { font-family: var(--font-display); font-weight: 800; font-size: 44px; line-height: 1; letter-spacing: -0.03em; }
.price-was { margin-top: 8px; font-size: 15px; color: var(--ink-soft); }
.tier .dot-list { font-size: 16px; gap: 10px; }

.faq { max-width: 860px; border-top: 1px solid var(--line-light); }
.faq details { border-bottom: 1px solid var(--line-light); }
.faq summary {
  cursor: pointer; list-style: none; padding: 22px 40px 22px 0; position: relative;
  font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 18px; font-size: 26px; font-weight: 500; color: var(--ink-soft); }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 0 24px; color: var(--ink-soft); max-width: 720px; }

.person { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.person .portrait { grid-area: auto; width: 100%; }
.built-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 36px; }
.built-group {
  background: var(--card-light); border: 1px solid var(--line-light); border-radius: var(--radius-lg);
  padding: 28px 28px 30px;
}
.built-group .for { font-size: 15px; color: var(--ink-soft); margin: 2px 0 16px; }
.built-group .dot-list { font-size: 16px; }

.form-slot {
  background: var(--card-light); border: 1px dashed rgba(25, 29, 33, 0.28); border-radius: var(--radius-lg);
  padding: 32px 32px 34px;
}
.form-slot ol { margin: 16px 0 0; padding-left: 22px; display: grid; gap: 6px; }
/* Draft 3.8: the live Tally form. A solid edge instead of the placeholder's dashes; the form sits on its own
   white panel in both themes (Tally's free embed has no dark theme, and filters or inversion aren't used). */
.form-slot-live { border-style: solid; }
.form-slot-live h2 { margin-bottom: 18px; }
.form-frame { background: #FFFFFF; border-radius: 12px; padding: 18px 18px 6px; }
.form-frame iframe { display: block; width: 100%; border: 0; }
.form-fallback { margin-top: 14px; font-size: 15px; }
.email-line { font-family: var(--font-mono); font-size: 15px; }
.email-action { margin-left: 6px; white-space: nowrap; }

/* Plan buttons inside a service page: under the hero's explanation and after the pricing. */
.page-cta { margin-top: 28px; }
.page-section .muted + .page-cta { margin-top: 24px; }

.page-closer { background: var(--offwhite); padding: clamp(72px, 8vw, 112px) 0; border-top: 1px solid var(--line-light); }
.page-closer .wrap { text-align: center; }
.page-closer h2 { font-size: clamp(34px, 4.2vw, 52px); letter-spacing: -0.03em; }
.page-closer p { margin: 16px auto 32px; font-size: 19px; color: var(--ink-soft); max-width: 640px; }

/* ---------- Tablet ---------- */

@media (max-width: 1080px) {
  .matrix-list { column-gap: 120px; }
  .q::after { width: 52px; }
  .matrix-core { width: 104px; height: 104px; border-radius: 22px; }
  .matrix-core span { font-size: 32px; }
  .risk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .site-nav { gap: 22px; }
  .header-cta { display: none; }
  .founder-grid {
    grid-template-columns: minmax(0, 1fr) 220px;
  }
  .philosophy-grid { grid-template-columns: 1fr; }
  .philosophy-copy p { max-width: 640px; }
  .service-grid { grid-template-columns: 1fr; }
  .page-head-grid { grid-template-columns: 1fr; }
  .page-art { max-width: 640px; }
  .tiers-3 { grid-template-columns: 1fr; max-width: 640px; }
}

/* ---------- Phones ---------- */

@media (max-width: 720px) {
  body { font-size: 16px; }
  .site-header { --header-h: 64px; }
  .header-inner { gap: 16px; }
  .logo img { height: 28px; }
  .site-nav { gap: 16px; }
  .site-nav a { font-size: 14px; }

  /* Words on the art (Jason, 2026-10-11, after the lettered mobile concept): the approved
     text-free mobile hero, whole and full width, sits at the bottom of the hero; the words sit
     over its storm sky, and the top of the sky fades into the deep background above it.
     The dome starts 89.5% of the width above the art's bottom (1672 / 941 × 0.504), so the
     words' bottom padding and the end of the soft dark gradient follow it at every width.
     The button and the intake line stay short of the lightning on the right. */
  .hero { display: block; min-height: 0; }
  .hero-picture { display: block; position: absolute; left: 0; right: 0; bottom: 0; }
  .hero-art {
    position: static; inset: auto; display: block; width: 100%; height: auto;
    aspect-ratio: 941 / 1672;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 18%);
  }
  .hero::before {
    background:
      linear-gradient(180deg, rgba(10, 12, 14, 0.65) 0, rgba(10, 12, 14, 0.65) calc(100% - 89.5vw - 30px), rgba(10, 12, 14, 0) calc(100% - 89.5vw + 40px)),
      linear-gradient(90deg, rgba(10, 12, 14, 0.5) 0%, rgba(10, 12, 14, 0) 85%);
  }
  .hero-inner { padding-top: calc(64px + 20px); padding-bottom: calc(89.5% + 4px); }
  .hero-title { font-size: clamp(32px, 9.2vw, 40px); margin-bottom: 16px; }
  .hero-support { font-size: 16px; margin-bottom: 22px; max-width: 330px; }
  .hero .btn { width: auto; }
  .hero-intake { margin-top: 12px; font-size: 14px; max-width: 260px; }
  .hero-support, .hero-intake { text-shadow: 0 1px 10px rgba(10, 12, 14, 0.8); }
  .hero-copy { max-width: none; }

  .founder-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "portrait" "story" "proof" "foot";
  }
  .portrait { width: min(220px, 60%); margin-bottom: 28px; }
  .founder-quote p { font-size: 20px; }
  .proof-row { margin-top: 40px; padding-top: 28px; grid-template-columns: 1fr; gap: 14px; }
  .proof-row div { flex-direction: row-reverse; justify-content: flex-end; align-items: baseline; gap: 14px; }
  .proof-row dd { font-size: 34px; min-width: 172px; }
  .proof-row dt { font-size: 15px; }
  .founder-foot { flex-direction: column; align-items: flex-start; }

  .section-head { margin-bottom: 40px; }
  .section-head p { font-size: 17px; }
  .risk-grid { grid-template-columns: 1fr; gap: 18px; }
  /* Section 3's illustrations stay whole on phones, at their own shape (about 140px high at 360). */

  /* The matrix becomes a vertical four-step sequence. */
  .matrix-core { display: none; }
  .matrix-list { grid-template-columns: 1fr; row-gap: 18px; padding-left: 22px; border-left: 2px solid rgba(255, 198, 41, 0.45); }
  .q { padding: 26px 24px 28px; }
  .q::after { display: none; }
  .q::before { left: -29px; right: auto; top: 30px; }
  .framework .section-head { margin-bottom: 40px; text-align: left; }

  .service-body { padding: 26px 24px 30px; }
  .services-cta .btn { width: 100%; }

  .philosophy-grid { gap: 40px; }

  .steps { grid-template-columns: 1fr; margin: 40px auto; }
  .steps li { align-items: flex-start; padding: 22px 4px; gap: 6px; text-align: left; }
  .steps li + li { border-left: 0; border-top: 1px solid var(--line-light); }
  .steps p { max-width: none; }
  .final .btn { width: 100%; }

  /* Eyebrows with a rule: on phones the short rule sits above the label, so it takes no line width. */
  .eyebrow-rule { flex-direction: column; align-items: flex-start; gap: 10px; }
  .eyebrow-rule::before { width: 28px; }

  .footer-grid { grid-template-columns: 1fr; }

  /* Secondary pages */
  .page-head .service-sub { font-size: 18px; }
  .page-lead { font-size: 18px; }
  .two-col, .built-groups, .tiers-2 { grid-template-columns: 1fr; }
  .person { grid-template-columns: 1fr; }
  .person .portrait { width: min(220px, 60%); }
  .tier { padding: 26px 22px 28px; }
  .form-slot { padding: 26px 22px 28px; }
  .form-frame { padding: 12px 10px 4px; }
  .faq summary { font-size: 17px; }
  .page-closer .btn, .page-cta .btn { width: 100%; }
}

@media (max-width: 380px) {
  .site-nav { gap: 12px; }
  .logo img { height: 24px; }
}

/* Room for the theme toggle on phones (Draft 3.6): tighter header gaps and a smaller toggle; on
   the narrowest phones a slightly smaller logo and menu, and a 16px header gutter. */
@media (max-width: 720px) {
  .header-inner { gap: 12px; }
  .theme-toggle { width: 34px; height: 34px; }
  .theme-toggle svg { width: 16px; height: 16px; }
}
@media (max-width: 400px) {
  .site-header .wrap { padding-left: 16px; padding-right: 16px; }
  .header-inner { gap: 10px; }
  .logo img { height: 22px; }
  .site-nav { gap: 10px; }
  .site-nav a { font-size: 13px; }
  .theme-toggle { width: 32px; height: 32px; }
}
@media (max-width: 370px) {
  .logo img { height: 21px; }
  .site-nav { gap: 8px; }
}

/* ---------- Dark mode (Draft 3.6) ----------
   Sage's Dark_Palette_Handoff_2026-10-14, applied only under [data-theme="dark"], which a small
   script in each page's <head> sets before the first paint. Not a blind token swap: yellow fills
   keep --on-signal labels, and .mark, focus, links, service cards and hard-coded pale parts get
   scoped overrides. Artwork, illustration wells, hero overlays, framework gradients and glows stay. */

[data-theme="dark"] {
  color-scheme: dark;
  --charcoal: #1D2227;
  --graphite: #292F35;
  --offwhite: #343A40;
  --light-2: #2B3137;
  --card-light: #3E464E;
  --ink: #F4F2EC;
  --ink-soft: #D0D4D7;
  --metal: #B2BAC1;
  --metal-light: #B9C1C8;
  --line-light: rgba(244, 245, 243, 0.18);
  --line-dark: rgba(244, 245, 243, 0.18);
  --on-signal: #191D21;
  --surface-raised: #3E464E;
  --border-strong: #89949E;
  --focus-ring: #FFC629;
  background: #343A40;
}

/* The heading highlight: a 2px yellow underline instead of the band. */
[data-theme="dark"] .mark {
  background: none; padding: 0;
  text-decoration: underline 2px solid var(--signal);
  text-underline-offset: 0.12em; text-decoration-skip-ink: auto;
}

/* Raised service cards, with the pale decorative edge. */
[data-theme="dark"] .service-card { background: var(--surface-raised); border-color: var(--line-dark); }

/* Hard-coded pale parts on converted surfaces. */
[data-theme="dark"] .form-slot { border-color: var(--line-light); }
[data-theme="dark"] .dot-list li::before { box-shadow: none; }
[data-theme="dark"] .dot-list-muted li::before { box-shadow: 0 0 0 1.5px var(--metal); }

/* Links: pale with the yellow underline, yellow on hover; visited links keep the same colors. */
[data-theme="dark"] .page-section a:not(.btn):not(.text-link),
[data-theme="dark"] .page-section a:not(.btn):not(.text-link):visited,
[data-theme="dark"] .services-invite a,
[data-theme="dark"] .services-invite a:visited { color: var(--ink); }
[data-theme="dark"] .page-section a:not(.btn):not(.text-link):hover,
[data-theme="dark"] .services-invite a:hover { color: var(--signal); }
[data-theme="dark"] .text-link:visited { color: var(--ink); }
[data-theme="dark"] .text-link-light:visited,
[data-theme="dark"] .site-footer a:visited,
[data-theme="dark"] .site-nav a:visited { color: var(--light-text); }
[data-theme="dark"] .text-link:hover { color: var(--signal); border-color: var(--signal); }

/* Focus: a 3px yellow outline with a 3px offset everywhere; over the hero art, an opaque dark
   backing behind it so its contrast never depends on an image pixel. */
[data-theme="dark"] a:focus-visible,
[data-theme="dark"] .btn:focus-visible,
[data-theme="dark"] .theme-toggle:focus-visible,
[data-theme="dark"] summary:focus-visible {
  outline: 3px solid var(--focus-ring); outline-offset: 3px;
}
[data-theme="dark"] .hero a:focus-visible,
[data-theme="dark"] .site-header:not(.site-header-solid) a:focus-visible,
[data-theme="dark"] .site-header:not(.site-header-solid) .theme-toggle:focus-visible {
  box-shadow: 0 0 0 9px var(--deep);
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .btn:hover, .btn:hover .btn-arrow { transform: none; }
}