/* =========================================
   ALPACARED DESIGN SYSTEM v2.1

   MATHEMATICAL FOUNDATION
   ────────────────────────
   Base unit:        8px
   Sub-grid:         4px (typography baseline)
   Layout grid:      8px (all spacing)
   Container:        832px (104 × 8)

   TYPE SCALE (8-based)
   ────────────────────
   Size → Computed Line Height → Grid
   64px × 1.125  = 72px  (9 × 8)  ✓
   48px × 1.167  = 56px  (14 × 4) ✓
   40px × 1.200  = 48px  (6 × 8)  ✓
   32px × 1.250  = 40px  (5 × 8)  ✓
   24px × 1.333  = 32px  (4 × 8)  ✓
   20px × 1.600  = 32px  (4 × 8)  ✓
   16px × 1.500  = 24px  (3 × 8)  ✓
   12px × 1.333  = 16px  (2 × 8)  ✓

   AMBER RULE
   ──────────
   #F0B840 appears in exactly three places:
   1. Eyebrow labels
   2. Link hover states
   3. Nowhere else.
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700;800;900&display=swap');

:root {
  /* --- SPATIAL SCALE --- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --space-12: 96px;
  --space-16: 128px;
  --space-20: 160px;
  --space-24: 192px;

  /* --- TYPE SCALE --- */
  --type-display: 64px;
  --type-h1: 48px;
  --type-h2: 40px;
  --type-h3: 32px;
  --type-lead: 24px;
  --type-h4: 20px;
  --type-body: 16px;
  --type-eyebrow: 12px;

  /* --- LINE HEIGHTS (grid-locked) --- */
  --lh-display: 1.125;
  --lh-h1: 1.167;
  --lh-h2: 1.2;
  --lh-h3: 1.25;
  --lh-lead: 1.333;
  --lh-h4: 1.6;
  --lh-body: 1.5;
  --lh-eyebrow: 1.333;

  /* --- PALETTE --- */
  --bg-black: #070000;
  --bg-void: #232F3E;
  --text-main: #F7F5F2;          /* Warm off-white: archival, matte */
  --text-muted: #D2CCC7;
  --accent-red: #8B1A1A;
  --accent-red-text: #A24848;   /* 20% tint — small text on dark bg */
  --alpaca-amber: #F0B840;       /* Scarce. Eyebrows + hover only. */
  --border-subtle: rgba(210, 204, 199, 0.12);
  --border-medium: rgba(210, 204, 199, 0.25);

  /* --- MOTION --- */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 200ms;
  --duration-normal: 400ms;

  /* --- LAYOUT --- */
  --container-max: 832px;
  --container-narrow: 640px;
}


/* =========================================
   RESET
   ========================================= */

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


/* =========================================
   BASE
   ========================================= */

body {
  font-family: Arial, sans-serif;
  font-size: var(--type-body);
  line-height: var(--lh-body);
  color: var(--text-main);
  -webkit-font-smoothing: antialiased;
  background-color: var(--bg-black);
  overflow-x: hidden;
  position: relative;
}

/* Links: muted at rest, amber on hover (amber rule #2) */
a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--duration-normal) var(--ease-default);
}
a:hover { color: var(--alpaca-amber); }

strong {
  color: var(--text-main);
  font-weight: 700;
}


/* =========================================
   TEXTURED BACKGROUND
   ========================================= */

body::before {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 120% 80% at 20% 30%, rgba(35, 47, 62, 0.5) 0%, transparent 70%),
    radial-gradient(ellipse 100% 60% at 80% 15%, rgba(35, 47, 62, 0.4) 0%, transparent 60%),
    radial-gradient(ellipse 80% 90% at 60% 55%, rgba(35, 47, 62, 0.35) 0%, transparent 65%),
    radial-gradient(ellipse 110% 70% at 35% 80%, rgba(35, 47, 62, 0.45) 0%, transparent 70%),
    radial-gradient(ellipse 90% 50% at 90% 70%, rgba(35, 47, 62, 0.3) 0%, transparent 60%),
    radial-gradient(ellipse 70% 100% at 10% 90%, rgba(35, 47, 62, 0.35) 0%, transparent 65%),
    linear-gradient(180deg, var(--bg-black) 0%, var(--bg-black) 100%);
}

body::after {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 40% at 45% 45%, rgba(44, 58, 77, 0.15) 0%, transparent 100%),
    radial-gradient(ellipse 60% 30% at 70% 25%, rgba(35, 47, 62, 0.12) 0%, transparent 100%),
    radial-gradient(ellipse 40% 50% at 25% 70%, rgba(44, 58, 77, 0.1) 0%, transparent 100%);
  mix-blend-mode: screen;
}


/* =========================================
   NAVIGATION
   ========================================= */

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-12);
  font-size: var(--type-eyebrow);
  letter-spacing: 2px;
  text-transform: uppercase;
  position: fixed;
  top: 0; width: 100%;
  z-index: 100;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  line-height: var(--lh-eyebrow);
  background: linear-gradient(to bottom, rgba(7, 0, 0, 0.9) 0%, rgba(7, 0, 0, 0.6) 40%, transparent 100%);
}

.logo {
  font-family: 'Montserrat', sans-serif;
  font-size: var(--type-body);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--text-main);
  text-decoration: none;
}
.logo:hover { color: var(--text-main); }
.logo span { color: var(--accent-red); }

nav { display: flex; gap: var(--space-6); }
nav a {
  text-decoration: none;
  color: var(--text-main);
  transition: all var(--duration-normal) var(--ease-default);
  opacity: 0.4;
  font-family: 'Montserrat', sans-serif;
  font-size: var(--type-eyebrow);
  font-weight: 700;
  letter-spacing: 2px;
  line-height: var(--lh-eyebrow);
}
nav a:hover { color: var(--alpaca-amber); opacity: 1; }


/* =========================================
   LAYOUT
   ========================================= */

section {
  padding: var(--space-16) var(--space-4);
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 10;
}

.container {
  max-width: var(--container-max);
  width: 100%;
  position: relative;
}

.container-narrow {
  max-width: var(--container-narrow);
}

.container-medium {
  max-width: 600px;
}


/* =========================================
   TYPOGRAPHY
   ========================================= */

h1, h2, h3, h4, .eyebrow {
  font-family: 'Montserrat', sans-serif;
  color: var(--text-main);
}

h1 {
  font-weight: 800;
  font-size: var(--type-display);
  line-height: var(--lh-display);
  letter-spacing: -1px;
  margin-bottom: var(--space-3);
}

h2 {
  font-weight: 700;
  font-size: var(--type-h2);
  line-height: var(--lh-h2);
  letter-spacing: -0.5px;
  margin-bottom: var(--space-4);
}

h3 {
  font-weight: 700;
  font-size: var(--type-lead);
  line-height: var(--lh-lead);
  margin-bottom: var(--space-2);
}

h4 {
  font-weight: 700;
  font-size: var(--type-body);
  line-height: var(--lh-body);
  margin-bottom: var(--space-1);
  color: var(--text-main);
}

.lead-text {
  font-size: var(--type-lead);
  font-weight: 400;
  line-height: var(--lh-lead);
  margin-bottom: var(--space-6);
  color: var(--text-muted);
}

p {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.7;
  margin-bottom: var(--space-4);
  color: var(--text-muted);
}

/* Eyebrow: amber rule #1 */
.eyebrow {
  color: var(--alpaca-amber);
  font-weight: 700;
  font-size: var(--type-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: 2px;
  text-transform: uppercase;
  display: block;
  margin-bottom: var(--space-3);
}

.text-montserrat {
  font-family: 'Montserrat', sans-serif;
}

.text-small {
  font-size: 14px;
}


/* =========================================
   HERO
   ========================================= */

.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-top: 0;
  border-bottom: 1px solid var(--border-subtle);
}

.hero-short {
  min-height: auto;
  padding-top: var(--space-24);
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
}

.accent-line {
  width: var(--space-4);
  height: 4px;
  background-color: var(--accent-red);
  margin: var(--space-8) auto 0;
}

.accent-line-left {
  margin: var(--space-6) 0 0;
}


/* =========================================
   NOISE QUESTIONS
   ========================================= */

.noise-questions {
  border-left: 4px solid var(--accent-red);
  padding-left: var(--space-6);
  margin: var(--space-8) 0;
}

.noise-questions p {
  font-family: 'Montserrat', sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: var(--lh-h4);
  color: #C8CCD1;
  margin: var(--space-2) 0;
  opacity: 0.9;
}


/* =========================================
   PATTERN TITLES (homepage)
   ========================================= */

.patterns-list {
  margin-top: var(--space-8);
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-8);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6) var(--space-8);
}

/* Closing border after patterns */
.patterns-list-closed {
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: var(--space-8);
}

.pattern-title {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.pattern-title .num {
  color: var(--accent-red-text);
  font-family: 'Montserrat', sans-serif;
  font-size: var(--type-eyebrow);
  font-weight: 700;
  letter-spacing: 1px;
  flex-shrink: 0;
}

.pattern-title .name {
  font-family: 'Montserrat', sans-serif;
  font-size: var(--type-body);
  font-weight: 700;
  line-height: var(--lh-body);
  color: var(--text-muted);
}

.pattern-desc {
  margin-bottom: 0;
  padding-left: var(--space-5);
}


/* =========================================
   PATTERN DEEP DIVE (the-noise page)
   ========================================= */

.pattern-deep {
  padding: var(--space-12) 0;
  border-top: 1px solid var(--border-subtle);
}

.pattern-deep:first-of-type {
  border-top: none;
}

.pattern-deep:last-of-type {
  border-bottom: 1px solid var(--border-subtle);
}

.pattern-deep .num {
  color: var(--accent-red-text);
  font-family: 'Montserrat', sans-serif;
  font-size: var(--type-eyebrow);
  font-weight: 700;
  letter-spacing: 2px;
  display: block;
  margin-bottom: var(--space-2);
}

.pattern-deep h3 {
  font-size: var(--type-h3);
  font-weight: 700;
  line-height: var(--lh-h3);
  letter-spacing: -0.5px;
  margin-bottom: var(--space-4);
}

.feeling-list {
  margin: var(--space-8) 0;
}

.feeling-list h4 {
  font-family: 'Montserrat', sans-serif;
  font-size: var(--type-eyebrow);
  font-weight: 700;
  line-height: var(--lh-eyebrow);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--alpaca-amber);
  margin-bottom: var(--space-3);
}

.feeling-list p {
  font-size: var(--type-body);
  line-height: var(--lh-body);
  margin-bottom: var(--space-2);
  color: var(--text-muted);
}

.pull-quote {
  font-family: 'Montserrat', sans-serif;
  font-size: var(--type-h4);
  font-weight: 700;
  line-height: var(--lh-h4);
  color: var(--text-main);
  opacity: 0.7;
  font-style: italic;
  border-left: 4px solid var(--accent-red);
  padding-left: var(--space-4);
  margin: var(--space-8) 0 0;
}


/* =========================================
   STEP ROWS
   ========================================= */

.step-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-6);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--border-subtle);
  align-items: baseline;
}
.step-row:last-of-type {
  border-bottom: 1px solid var(--border-subtle);
}

.step-row h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: var(--type-body);
  line-height: var(--lh-body);
  margin: 0;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.step-row p { margin: 0; }


/* =========================================
   PHASE BLOCKS (signal page)
   ========================================= */

.phase-block {
  padding: var(--space-8) 0;
  border-top: 1px solid var(--border-subtle);
  display: grid;
  grid-template-columns: var(--space-20) 1fr;
  gap: var(--space-6);
}
.phase-block:last-of-type {
  border-bottom: 1px solid var(--border-subtle);
}

.phase-label {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: var(--type-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent-red-text);
}

.phase-name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: var(--type-lead);
  line-height: var(--lh-lead);
  color: var(--text-main);
  margin-bottom: var(--space-2);
}


/* =========================================
   TWO COLUMN
   ========================================= */

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  margin-top: var(--space-8);
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-8);
}
.two-col h3 { font-size: var(--type-lead); line-height: var(--lh-lead); letter-spacing: -0.5px; margin-bottom: var(--space-3); }
.two-col p { margin-bottom: 0; }


/* =========================================
   THREE COLUMN (pathways)
   ========================================= */

.three-col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.pathway-card {
  border: 1px solid var(--border-subtle);
  padding: var(--space-6);
}
.pathway-card h3 { font-size: var(--type-h4); line-height: var(--lh-h4); margin-bottom: var(--space-3); letter-spacing: 0; }
.pathway-card p { font-size: var(--type-body); line-height: var(--lh-body); margin-bottom: 0; }


/* =========================================
   DIFFERENTIATOR LIST
   ========================================= */

.diff-item {
  padding: var(--space-6) 0;
  border-top: 1px solid var(--border-subtle);
}
.diff-item:last-child { border-bottom: 1px solid var(--border-subtle); }
.diff-item h3 { font-size: var(--type-h4); line-height: var(--lh-h4); margin-bottom: var(--space-1); letter-spacing: 0; }
.diff-item p { margin-bottom: 0; }


/* =========================================
   CHECKLIST
   ========================================= */

.check-list p {
  font-size: var(--type-body);
  line-height: var(--lh-body);
  color: var(--text-muted);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle);
  margin: 0;
}
.check-list p:first-child { border-top: 1px solid var(--border-subtle); }


/* =========================================
   WHY SECTIONS
   ========================================= */

.why-section {
  padding: var(--space-12) 0;
  border-top: 1px solid var(--border-subtle);
}
.why-section h3 { font-size: var(--type-h3); font-weight: 700; line-height: var(--lh-h3); letter-spacing: -0.5px; margin-bottom: var(--space-4); }

.why-section--first {
  border-top: none;
  padding-top: 0;
}


/* =========================================
   CTA BOX
   ========================================= */

.cta-box {
  border: 1px solid var(--border-subtle);
  padding: var(--space-8);
  text-align: center;
  background: rgba(247, 245, 242, 0.02);
}

.cta-box h3 {
  font-size: var(--type-lead);
  margin-bottom: var(--space-4);
  letter-spacing: -0.5px;
  text-transform: none;
}

.cta-box .btn-outline {
  margin-top: var(--space-3);
}


/* =========================================
   BUTTONS
   ========================================= */

.btn-primary {
  display: inline-block;
  text-decoration: none;
  color: var(--bg-black);
  font-family: 'Montserrat', sans-serif;
  font-size: var(--type-eyebrow);
  font-weight: 800;
  line-height: var(--lh-eyebrow);
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: var(--space-3) var(--space-8);
  background: var(--text-main);
  border: none;
  transition: all var(--duration-normal) var(--ease-default);
  cursor: pointer;
}
.btn-primary:hover { background: var(--accent-red); color: var(--text-main); }

.btn-outline {
  display: inline-block;
  text-decoration: none;
  color: var(--text-muted);
  font-family: 'Montserrat', sans-serif;
  font-size: var(--type-eyebrow);
  font-weight: 700;
  line-height: var(--lh-eyebrow);
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: var(--space-3) var(--space-6);
  border: 1px solid var(--border-subtle);
  transition: all var(--duration-normal) var(--ease-default);
  cursor: pointer;
  background: transparent;
}
.btn-outline:hover { border-color: var(--accent-red); color: var(--accent-red); }

/* Section links: muted → amber on hover (amber rule #2) */
.section-link { margin-top: var(--space-6); }
.section-link a {
  color: var(--text-muted);
  font-family: 'Montserrat', sans-serif;
  font-size: var(--type-eyebrow);
  font-weight: 700;
  line-height: var(--lh-eyebrow);
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
}
.section-link a:hover { color: var(--alpaca-amber); }


/* =========================================
   CTA SECTION
   ========================================= */

.cta-section { text-align: center; }
.cta-group { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); margin-top: var(--space-8); }


/* =========================================
   FORMS
   ========================================= */

.input-group { margin-bottom: var(--space-6); }

input[type="text"], input[type="email"], textarea {
  width: 100%;
  padding: var(--space-3) 0;
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-main);
  font-family: Arial, sans-serif;
  font-size: var(--type-body);
  line-height: var(--lh-body);
  outline: none;
  transition: border-color var(--duration-normal) var(--ease-default);
}
input::placeholder, textarea::placeholder { color: rgba(247, 245, 242, 0.25); font-family: Arial, sans-serif; }
input:focus, textarea:focus { border-bottom: 1px solid var(--accent-red); }
textarea { resize: vertical; min-height: var(--space-10); }

button[type="submit"] {
  background: var(--text-main);
  color: var(--bg-black);
  border: none;
  padding: var(--space-4) var(--space-8);
  font-family: 'Montserrat', sans-serif;
  font-size: var(--type-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  width: 100%;
  font-weight: 800;
  transition: background var(--duration-fast) var(--ease-default);
  margin-top: var(--space-2);
}
button[type="submit"]:hover { background: var(--accent-red); color: var(--text-main); }


/* =========================================
   FOOTER
   ========================================= */

footer {
  padding: var(--space-8) var(--space-12);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--type-eyebrow);
  line-height: var(--lh-eyebrow);
  color: rgba(210, 204, 199, 0.4);
  letter-spacing: 1px;
  border-top: 1px solid var(--border-subtle);
  position: relative;
  z-index: 10;
}
footer a { color: rgba(210, 204, 199, 0.4); text-decoration: none; }
footer a:hover { color: var(--alpaca-amber); }


/* =========================================
   UTILITIES
   ========================================= */

.mb-0 { margin-bottom: 0; }
.text-center { text-align: center; }


/* =========================================
   CANVAS (shared across pages with
   animated signal/noise visuals)
   ========================================= */

#signal-canvas,
#noise-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: 1;
  pointer-events: none;
}

#signal-canvas {
  z-index: 2;
}


/* =========================================
   SIGNAL TRANSITION (the-noise page)
   ========================================= */

.signal-transition {
  padding: var(--space-10) 0;
  text-align: center;
}
.signal-transition p {
  font-family: 'Montserrat', sans-serif;
  font-size: var(--type-h4);
  font-weight: 500;
  line-height: var(--lh-h4);
  color: var(--text-muted);
  opacity: 0.4;
  font-style: italic;
  margin-bottom: 0;
}


/* =========================================
   MEETINGS EMBED (book page)
   ========================================= */

.meetings-iframe-container {
  min-height: 660px;
}
.meetings-iframe-container iframe {
  border: none;
}


/* =========================================
   PAGE-SPECIFIC: SPLASH (index.html)
   ========================================= */

.splash-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.splash-logo {
  display: inline-block;
  margin-bottom: var(--space-6);
}


/* =========================================
   PAGE-SPECIFIC: HOMEPAGE (index-full.html)
   ========================================= */

.lead-text--compact {
  margin-bottom: var(--space-4);
}

.patterns-intro {
  margin-bottom: var(--space-8);
}


/* =========================================
   PAGE-SPECIFIC: THE-NOISE
   ========================================= */

.lead-text--emphasis {
  color: var(--text-main);
}

.cta-group--tight {
  margin-top: var(--space-6);
}


/* =========================================
   PAGE-SPECIFIC: SIGNAL
   ========================================= */

.signal-ownership {
  margin-top: var(--space-8);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: var(--type-body);
  color: var(--text-main);
}


/* =========================================
   PAGE-SPECIFIC: BOOK
   ========================================= */

.book-intro {
  margin-top: var(--space-3);
}


/* =========================================
   PAGE-SPECIFIC: DOWNLOAD
   ========================================= */

.download-actions {
  margin-top: var(--space-8);
}

.download-secondary {
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--border-subtle);
}

.download-secondary .btn-outline {
  margin-top: var(--space-2);
}


/* =========================================
   PAGE-SPECIFIC: WHITEPAPER
   ========================================= */

.whitepaper-form-wrap {
  max-width: 400px;
  margin: var(--space-8) auto 0;
}


/* =========================================
   PAGE-SPECIFIC: WHY ALPACARED
   ========================================= */

.why-tagline {
  color: var(--text-main);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  margin-top: var(--space-8);
}


/* =========================================
   PAGE-SPECIFIC: PRIVACY POLICY
   ========================================= */

.link-amber {
  color: var(--alpaca-amber);
}


/* =========================================
   RESPONSIVE

   Mobile type scale (grid-locked):
   Display: 40px × 1.2  = 48px  (6 × 8) ✓
   H2:      32px × 1.25 = 40px  (5 × 8) ✓
   Lead:    16px × 1.5  = 24px  (3 × 8) ✓
   ========================================= */

@media (max-width: 768px) {
  header { padding: var(--space-3) var(--space-3); }
  nav { display: none; }
  h1 { font-size: var(--type-h2); line-height: var(--lh-h2); }
  h2 { font-size: var(--type-h3); line-height: var(--lh-h3); }
  .lead-text { font-size: var(--type-body); line-height: var(--lh-body); }
  section { padding: var(--space-10) var(--space-3); }
  .hero-short { padding-top: var(--space-20); }
  .patterns-list, .step-row, .phase-block, .two-col, .three-col { grid-template-columns: 1fr; gap: var(--space-4); }
  .noise-questions { padding-left: var(--space-3); }
  .noise-questions p { font-size: var(--type-body); line-height: var(--lh-body); }
  .pattern-deep h3, .why-section h3 { font-size: var(--type-lead); line-height: var(--lh-lead); }
  .pull-quote { font-size: var(--type-body); line-height: var(--lh-body); }
  footer { flex-direction: column; gap: var(--space-2); padding: var(--space-6) var(--space-3); text-align: center; }
}