/* Generated by scripts/bundle-css.mjs. Edit styles/page.css and styles/sections/*.css. */
/* Section styles. Each section owns one file; keep the order matching the page. */
/* 00 · Header · sticky top bar (Paper node 9AT-0, 1440×68; CTA frame 450 wide) */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 68px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
/* Same centred container as the page sections (1100 + gutters), so the brand and CTA line up with the content below
   instead of sitting at the viewport edges (Remy, 16 Sept 2026). */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 100%;
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding: 0 var(--gutter);
}

/* Brand */
.header-brand { display: inline-flex; align-items: baseline; gap: 9px; flex: 0 0 auto; }
.header-wordmark { font-weight: 500; font-size: 19px; line-height: 24px; letter-spacing: -0.03em; color: var(--ink); }

/* Centre nav */
.header-nav { display: flex; align-items: center; gap: 32px; }
.header-nav-link { font-size: 14px; line-height: 18px; color: var(--ink-3); transition: color var(--fast) var(--ease); }
.header-nav-link:hover { color: var(--ink); }

/* Right: chip + small CTA */
.header-actions { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }

@media (max-width: 900px) {
  .header-inner { padding: 0 32px; }
  .header-nav { display: none; }
}
/* Hamburger + drawer only exist on the phone */
.header-menu { display: none; }
.header-drawer { display: none; }

/* Phone (Paper node ILO-0 "Header · Mobile", 390×76): wordmark left, 44px round hamburger right, hairline below. */
@media (max-width: 600px) {
  .header { height: 76px; border-bottom-color: var(--line-m); transition: transform var(--med) var(--ease); }
  /* Hides while scrolling down, returns on the first scroll up (js/sections/00-header.js). Never while the drawer is open. */
  .header--hidden { transform: translateY(-100%); }
  @media (prefers-reduced-motion: reduce) { .header { transition: none; } }
  .header-inner { padding: 0 24px; gap: 12px; }
  .header-actions .cta { display: none; }
  .header-menu {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid #D6D0C8; color: var(--ink); background: var(--bg);
  }
  .header-menu-icon--close { display: none; }
  .header-menu[aria-expanded="true"] .header-menu-icon--open { display: none; }
  .header-menu[aria-expanded="true"] .header-menu-icon--close { display: block; }
  .header-drawer {
    position: absolute; left: 0; right: 0; top: 100%;
    display: flex; flex-direction: column;
    padding: 8px 24px 24px;
    background: var(--bg);
    border-bottom: 1px solid var(--line-m);
    box-shadow: 0 24px 40px -24px rgba(26, 24, 22, 0.25);
  }
  .header-drawer[hidden] { display: none; }
  .header-drawer-link {
    display: block; padding: 16px 0;
    font-weight: 500; font-size: 19px; line-height: 24px; letter-spacing: -0.02em; color: var(--ink);
    border-bottom: 1px solid var(--line-m);
  }
  .header-drawer-cta { margin-top: 24px; }
}

/* 01 · Hero (Paper node 9BA-0, 1440×1488) */
.hero { padding-top: 152px; padding-bottom: 180px; background: var(--bg); }
.hero-inner {
  display: flex; flex-direction: column; align-items: center;
  width: 100%; max-width: 1100px; margin-inline: auto; padding-inline: var(--gutter);
}

.hero-eyebrow { padding-bottom: 32px; text-align: center; }
.hero-h1 { text-align: center; padding-bottom: 30px; }
.hero-h1-line { display: block; }
/* Yellow highlighter behind "a team of AI agents." (Paper: #FFE76A, rotated -1deg, 2px radius) */
.hero-hl { position: relative; isolation: isolate; display: inline-block; background: transparent; color: inherit; }
.hero-hl::before {
  content: ''; position: absolute; z-index: -1;
  left: -2px; right: -2px; top: 13px; bottom: 4px;
  border-radius: 2px; background: #FFE76A;
  transform: rotate(-1deg); transform-origin: 0 0;
}
.hero-sub { max-width: 680px; text-align: center; padding-bottom: 52px; }

/* VSL print card */
.hero-vsl {
  display: flex; flex-direction: column; gap: 12px;
  width: 968px; max-width: 100%;
  padding: 14px; border-radius: 6px;
  background: var(--bg-white);
  box-shadow: var(--shadow-print);
}
.hero-vsl-screen {
  position: relative;
  width: 100%; aspect-ratio: 940 / 528;
  border-radius: 3px; overflow: clip;
  background: linear-gradient(in oklab 180deg, oklab(27.8% 0.002 0.004) 0%, oklab(21.1% 0.002 0.005) 100%);
  display: flex; align-items: center; justify-content: center;
}
.hero-vsl-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; background: transparent; opacity: 1;
}
/* Poster stays visible under the play button; a light scrim keeps the mono tags legible. */
.hero-vsl-screen::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.06) 35%, rgba(0, 0, 0, 0.06) 65%, rgba(0, 0, 0, 0.32) 100%);
}
.hero-vsl-screen.is-playing::after { display: none; }
.hero-vsl-play { z-index: 2; }
.hero-vsl-tag { z-index: 2; }
.hero-vsl-tag--top { color: rgba(255, 255, 255, 0.85); }
.hero-vsl-tag--time { color: rgba(255, 255, 255, 0.95); }
.hero-vsl-screen.is-playing .hero-vsl-play,
.hero-vsl-screen.is-playing .hero-vsl-tag { display: none; }

.hero-vsl-play {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 88px; height: 88px; border-radius: 999px;
  background: var(--bg); color: var(--ink);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.hero-vsl-play svg { margin-left: 4px; }
.hero-vsl-play:hover { transform: scale(1.04); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3); }
.hero-vsl-play:active { transform: scale(0.98); }
@media (prefers-reduced-motion: reduce) { .hero-vsl-play { transition: none; } .hero-vsl-play:hover { transform: none; } }

.hero-vsl-tag {
  position: absolute; z-index: 1;
  font-family: var(--font-mono); font-size: 10px; line-height: 12px; letter-spacing: 0.04em; text-transform: uppercase;
  white-space: nowrap; pointer-events: none;
}
.hero-vsl-tag--top { left: 16px; top: 14px; color: rgba(255, 255, 255, 0.4); }
.hero-vsl-tag--time { right: 16px; bottom: 14px; color: rgba(255, 255, 255, 0.72); }

.hero-vsl-caption {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-family: var(--font-mono); font-size: 10px; line-height: 12px; color: var(--ink-4);
}
.hero-vsl-caption-file { letter-spacing: 0.03em; }
.hero-vsl-caption-sound { letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }

/* CTA row */
.hero-cta-row { display: flex; align-items: center; justify-content: center; padding-top: 44px; }

/* Proof: Trustpilot line + member avatars (Paper frame I7A-0, 456×100) */
.hero-proof { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 20px; }
.hero-proof-rating {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 28px; font-size: 14px; line-height: 22px; color: #403D38; text-align: center;
}
.hero-proof-stars { width: 112px; height: 21px; flex: 0 0 auto; }
.hero-proof .section-cta-proof { min-height: 36px; }

@media (max-width: 900px) {
  .hero { padding-top: 72px; padding-bottom: 120px; }
  .hero-h1 { font-size: 52px; line-height: 58px; }
  .hero-hl::before { top: 10px; bottom: 3px; }
  .hero-sub { padding-bottom: 40px; }
}
.hero-assurance, .hero-vsl-caption-m, .hero-proof-m { display: none; }

/* Phone (Paper v4 node JFL-0 "01 · Hero", 390 wide): centred column, 24px rhythm. h1 with the last line inside the
   highlight, sub, VSL card with one caption line, full-width CTA, then one proof line. No eyebrow, stars or assurances. */
@media (max-width: 600px) {
  .hero { padding-top: 40px; padding-bottom: 56px; }
  .hero-inner { padding-inline: 24px; gap: 24px; }
  .hero-eyebrow, .hero-assurance, .hero-proof-rating, .hero-proof .section-cta-proof:not(.hero-proof-m) { display: none; }
  .hero-h1 { padding-bottom: 0; font-size: 34px; line-height: 38px; letter-spacing: -0.04em; }
  .hero-h1-line { display: inline; }
  .hero-hl { display: inline-block; margin-top: 2px; padding-inline: 6px; background: #FFE76A; }
  .hero-hl::before { display: none; }
  .hero-sub { padding-bottom: 0; }
  .hero-vsl { width: 100%; padding: 8px; gap: 10px; border: 1px solid #E7E2DA; border-radius: 6px; box-shadow: 0 8px 22px rgba(26, 24, 22, 0.07); }
  .hero-vsl-screen { border-radius: 3px; background: #23211F; }
  .hero-vsl-play { width: 56px; height: 56px; }
  .hero-vsl-tag { display: none; }
  .hero-vsl-caption { justify-content: center; font-family: var(--font-body); font-size: 13px; line-height: 20px; color: #635F59; text-align: center; text-transform: none; }
  .hero-vsl-caption-file, .hero-vsl-caption-sound { display: none; }
  .hero-vsl-caption-m { display: block; }
  .hero-cta-row { width: 100%; padding-top: 0; }
  .hero-cta-row .cta { width: 100%; padding: 0 20px; }
  /* Paper: 14px between the CTA and the proof line (the column gap is 24). */
  .hero-proof { gap: 0; padding-top: 0; margin-top: -10px; }
  .hero-proof-m { display: inline-flex; gap: 10px; min-height: 34px; font-size: 14px; line-height: 20px; color: #3D3935; }
}

/* 02 · Problem · Dials (Paper node AMJ-0, 1440×1088) */
.dials { padding-block: 180px; background: var(--bg); }

.dials-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 80px;
  padding-bottom: 88px;
}
.dials-h2 { max-width: 640px; flex: 0 1 640px; }
.dials-intro { max-width: 360px; flex: 0 0 360px; padding-top: 8px; }

.dials-grid { display: flex; gap: 40px; justify-content: space-between; }
.dials-col {
  display: flex; flex-direction: column; align-items: center; gap: 32px;
  flex: 1 1 0; max-width: 340px; min-width: 0;
}

.dials-dial { position: relative; width: 240px; height: 240px; flex: 0 0 auto; }
.dials-ring { position: absolute; inset: 0; }
.dials-label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-weight: 500; font-size: 19px; line-height: 24px; letter-spacing: -0.01em; color: var(--ink);
}

.dials-list { display: flex; flex-direction: column; gap: 14px; width: 300px; max-width: 100%; }
.dials-item { position: relative; padding-left: 20px; font-size: 15px; line-height: 24px; }
.dials-item::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 8px; height: 8px; border-radius: 999px;
}
.dials-item--value { color: var(--ink); }
.dials-item--value::before { background: var(--blue); }
.dials-item--exec { color: var(--ink-3); }
.dials-item--exec::before { background: var(--line); }

@media (max-width: 900px) {
  .dials { padding-block: 120px; }
  .dials-head { flex-direction: column; gap: 24px; padding-bottom: 56px; }
  .dials-h2 { flex-basis: auto; max-width: 640px; }
  .dials-intro { flex-basis: auto; max-width: 560px; padding-top: 0; }
  .dials-grid { flex-direction: column; align-items: center; gap: 56px; }
  .dials-col { width: 100%; max-width: 340px; }
}
/* Phone (Paper v4 node JGF-0 "02 · Problem", 390 wide). Heading, body, legend row, then three centred role rows
   under hairlines: the 280px dial with the role inside, then the two bullets full width. */
@media (max-width: 600px) {
  .dials { padding-block: 64px; background: #F0EDE7; }
  .dials-inner { display: flex; flex-direction: column; }

  .dials-head { gap: 20px; padding-bottom: 0; }
  .dials-h2 { max-width: none; }
  .dials-intro { max-width: none; }

  /* Legend: 8px dots + mono labels (Paper: 20 gap + 8 padding above) */
  .dials-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-top: 28px; }
  .dials-legend-item {
    display: flex; align-items: center; gap: 6px;
    font-family: var(--font-mono); font-size: 12px; line-height: 18px; letter-spacing: 0.04em; text-transform: uppercase;
    color: #4A4640; white-space: nowrap;
  }
  .dials-legend-item::before { content: ''; width: 8px; height: 8px; border-radius: 99px; flex: 0 0 auto; }
  .dials-legend-item--value::before { background: var(--blue); }
  .dials-legend-item--exec::before { background: #C9C3B9; }

  .dials-grid { flex-direction: column; align-items: stretch; gap: 20px; padding-top: 20px; }
  .dials-col {
    width: 100%; max-width: none; align-items: center; gap: 28px;
    border-top: 1px solid #D9D3CA;
    padding: 36px 0 12px;
  }

  .dials-dial { width: 280px; height: 280px; }
  .dials-ring { width: 100%; height: 100%; }
  .dials-label { font-size: 19px; line-height: 24px; }

  .dials-list { width: 100%; gap: 10px; }
  .dials-item { padding-left: 18px; font-size: 15px; line-height: 22px; }
  .dials-item::before { top: 7px; }
  .dials-item--value { color: var(--ink); }
  .dials-item--exec { color: #635F59; }
  .dials-item--exec::before { background: #C9C3B9; }
  .dials-item-label { display: none; }
}
@media (min-width: 601px) {
  .dials-item-label, .dials-legend { display: none; }
}

/* 03 · Cost · Paper graph (Paper node BA4-0, 1440×1439) */
.cost { padding-block: 180px; }
.cost-inner { display: flex; flex-direction: column; }

/* Heading + intro (Paper BA5-0: h2 760 wide, intro 900 wide, 32 gap; 80 to the card) */
.cost-head { display: flex; flex-direction: column; gap: 32px; padding-bottom: 80px; }
.cost-h2 { max-width: 760px; }
.cost-intro { max-width: 900px; font-size: 18px; line-height: 30px; color: #706C67; }
.cost-hl { background: #FFE76A; color: var(--ink); }

/* Card */
.cost-card {
  display: flex; flex-direction: column;
  width: 100%;
  border-radius: var(--radius-lg); overflow: clip;
  background: var(--bg-white);
  border: 1px solid var(--line-card);
  box-shadow: var(--shadow-card);
}
.cost-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 18px 28px;
  border-bottom: 1px solid var(--line);
}
.cost-card-label { letter-spacing: 0.1em; white-space: nowrap; }
.cost-legend { display: flex; align-items: center; gap: 24px; }
.cost-legend-item { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 16px; color: var(--ink); white-space: nowrap; }
.cost-swatch { width: 22px; flex: 0 0 auto; }
.cost-swatch--old { height: 2px; background: var(--ink-3); }
.cost-swatch--new { height: 3px; background: var(--blue); }

/* Chart (strokes and label inks per Paper; #403D38 / #8B8780 / #706C67 are chart one-offs, not tokens) */
.cost-chart-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cost-chart { display: block; width: 100%; height: auto; }
.cost-grid-line { stroke: var(--line-grid); }
.cost-axis { stroke: #403D38; stroke-width: 1; }
.cost-axis-label { font-family: var(--font-mono); font-size: 15px; font-weight: 700; fill: #403D38; }
.cost-today-label { font-family: var(--font-mono); font-size: 12px; fill: #706C67; }
.cost-today-dot { fill: var(--ink); }
.cost-old-line { stroke: #8B8780; stroke-width: 2; }
.cost-old-points circle { fill: var(--bg-white); stroke: #8B8780; stroke-width: 2; }
.cost-old-labels text { font-family: var(--font-body); font-size: 16px; fill: #403D38; }
.cost-pill-old { fill: var(--bg-stone); stroke: var(--line-card); stroke-width: 1; }
.cost-pill-old-text { font-family: var(--font-body); font-size: 14px; font-weight: 500; fill: var(--ink); }
.cost-new-line { stroke: var(--blue); stroke-width: 3.5; }
.cost-new-dot { fill: var(--blue); }
.cost-pill-new { fill: var(--blue); }
.cost-pill-new-text { font-family: var(--font-body); font-size: 14px; font-weight: 500; fill: var(--bg-white); }
/* Phone chart + takeaway (only rendered ≤600px) */
.cost-chart-m, .cost-takeaway { display: none; }
.cost-m-axis-label { font-family: var(--font-mono); font-size: 11px; font-weight: 700; fill: #403D38; }
.cost-m-today { font-family: var(--font-mono); font-size: 10px; fill: #706C67; }
.cost-m-old-points circle { fill: var(--bg-white); stroke: #8B8780; stroke-width: 2; }
.cost-m-old-labels text { font-family: var(--font-body); font-size: 12px; fill: #403D38; }
.cost-m-pill-old { font-family: var(--font-body); font-size: 12px; font-weight: 500; fill: var(--ink); }
.cost-m-pill-new { font-family: var(--font-body); font-size: 12px; font-weight: 500; fill: var(--bg-white); }

@media (max-width: 900px) {
  .cost { padding-block: 120px; }
  .cost-head { gap: 24px; padding-bottom: 56px; }
  .cost-card-head { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 20px; }
  .cost-legend { flex-wrap: wrap; gap: 12px 20px; }
}
/* Phone (Paper v4 node JHR-0 "03 · Cost", 390 wide). Bone ground; h2, intro without the emphasis sentence, the
   white chart card (no header/legend) holding the 342×320 phone chart, then the highlighted takeaway. No CTA. */
@media (max-width: 600px) {
  .cost { padding-block: 64px; background: var(--bg); }
  .cost-inner { gap: 20px; }

  .cost-head { gap: 20px; padding-bottom: 0; }
  .cost-intro { max-width: none; font-size: 17px; line-height: 26px; color: #3D3935; }
  .cost-intro br, .cost-intro-emph { display: none; }

  .cost-card {
    border-radius: 10px;
    background: var(--bg-white);
    border: 1px solid #E0DCD4;
    box-shadow: 0 30px 60px -30px rgba(26, 24, 22, 0.25);
  }
  .cost-card-head { display: none; }
  .cost-chart-scroll { overflow: visible; }
  .cost-chart { display: none; }
  .cost-chart-m { display: block; width: 100%; height: auto; }

  .cost-takeaway { display: block; font-weight: 500; font-size: 19px; line-height: 27px; letter-spacing: -0.015em; color: var(--ink); }
  .cost-takeaway mark { background: #FFE76A; color: inherit; padding: 0 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

  .cost .section-cta { display: none; }
}

/* 04 · Direct · Pinned notes (Paper node BYA-0, 1440×2017). Section id="how-it-works". */
.direct { padding-top: 180px; padding-bottom: 180px; background: var(--bg); }
.direct-inner { display: flex; flex-direction: column; align-items: center; }

.direct-h2 {
  max-width: 900px; text-align: center;
  font-size: 60px; line-height: 66px;
  padding-bottom: 120px;
}

/* Rows: Paper 560 (row 1, 140 below) and 692 (row 2, 140 above / 132 below) */
.direct-row { display: flex; align-items: center; gap: 60px; width: 100%; }
.direct-row--1 { padding-bottom: 140px; }
.direct-row--2 { padding-top: 140px; padding-bottom: 132px; }
.direct-divider { width: 100%; height: 1px; margin: 0; border: 0; background: var(--line); }

.direct-copy { display: flex; flex-direction: column; gap: 18px; width: 420px; flex: 0 0 420px; }
.direct-h3 { font-weight: 500; font-size: 34px; line-height: 40px; letter-spacing: -0.025em; color: var(--ink); }

/* Photo + pinned index card */
.direct-photo { position: relative; flex: 1 1 auto; width: 100%; max-width: 620px; min-width: 0; }
.direct-photo-frame {
  width: 100%; aspect-ratio: 620 / 420;
  border-radius: var(--radius); overflow: clip;
  background: var(--line);
}
.direct-photo-frame img { width: 100%; height: 100%; object-fit: cover; }

.direct-note {
  position: absolute; bottom: 0;
  display: flex; flex-direction: column; gap: 10px;
  width: 280px; padding: 34px 26px 26px;
  background: var(--bg-paper);
  box-shadow: 0 5px 10px rgba(26, 24, 22, 0.094), 5px 16px 24px -10px rgba(26, 24, 22, 0.27);
  transform-origin: 0 0;
}
.direct-note--right { right: 0; transform: translate(36px, 44px) rotate(2deg); }
.direct-note--left { left: 0; transform: translate(-36px, 125px) rotate(-2deg); }
.direct-note-rules { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.direct-note-eyebrow { position: relative; font-size: 22px; line-height: 24px; color: var(--red); }
.direct-note-text { position: relative; font-size: 15px; line-height: 23px; color: var(--ink); }
/* Round pushpin head (Paper: 32×34 at top -12px, left 121px) */
.direct-pin { position: absolute; top: -12px; left: 121px; }

/* Section CTA sits 100px below row 2 here (Paper pt-25), not the shared 80px. */
.direct .section-cta { padding-top: 100px; }
.direct-h2-br { display: none; }

@media (max-width: 900px) {
  .direct { padding-top: 120px; padding-bottom: 120px; }
  .direct-h2 { font-size: 44px; line-height: 50px; padding-bottom: 64px; }
  .direct-row { flex-direction: column; align-items: stretch; gap: 32px; }
  .direct-row--1 { padding-bottom: 72px; }
  .direct-row--2 { padding-top: 72px; padding-bottom: 0; }
  .direct-copy { order: -1; width: 100%; flex-basis: auto; max-width: 620px; }
  .direct-photo { max-width: 620px; }
  /* Card sits in flow, overlapping the photo's bottom edge, and stays inside the photo width. */
  .direct-note { position: relative; bottom: auto; width: min(280px, calc(100% - 24px)); }
  .direct-note--right { right: auto; margin: -56px 12px 0 auto; transform: rotate(2deg); }
  .direct-note--left { left: auto; margin: -56px auto 0 12px; transform: rotate(-2deg); }
  .direct .section-cta { padding-top: 80px; }
}
/* Phone (Paper v4 node JIE-0 "04 · Direct", 390 wide). Grey ground; two-line heading, then per block: h3, body,
   342×256 photo with the pinned paper note (K5N-1 / K5W-1) hanging 56px below its edge. No CTA on phone. */
@media (max-width: 600px) {
  .direct { padding-top: 64px; padding-bottom: 64px; background: #F0EDE7; }
  .direct-inner { align-items: stretch; gap: 40px; }

  .direct-h2 { max-width: none; text-align: left; font-size: 32px; line-height: 37px; letter-spacing: -0.03em; padding-bottom: 0; }
  .direct-h2-br { display: inline; }

  .direct-row { flex-direction: column; align-items: stretch; gap: 24px; padding: 0; }
  .direct-row--2 { padding-top: 8px; }
  .direct-divider { display: none; }

  .direct-copy { order: -1; gap: 24px; width: 100%; max-width: none; }
  .direct-h3 { font-size: 24px; line-height: 31px; letter-spacing: -0.02em; }
  .direct-body { padding-bottom: 8px; }

  /* Photo wrapper keeps 56px of room below so the hanging note clears the flow. */
  .direct-photo { position: relative; display: block; width: 100%; max-width: none; padding-bottom: 56px; }
  .direct-photo-frame { aspect-ratio: auto; height: 256px; border-radius: 2px; }
  .direct-row--1 .direct-photo-frame img { object-position: 50% 65%; }
  .direct-row--2 .direct-photo-frame img { object-position: 50% 45%; }

  .direct-note {
    position: absolute; bottom: 0; width: 210px; margin: 0;
    gap: 6px; padding: 26px 18px 18px;
    background: var(--bg-paper); border-radius: 0;
    box-shadow: 0 5px 10px rgba(26, 24, 22, 0.094), 5px 16px 24px -10px rgba(26, 24, 22, 0.27);
    transform-origin: 0 0;
  }
  .direct-note--right { right: 0; left: auto; transform: translateX(12px) rotate(2deg); }
  .direct-note--left { left: 0; right: auto; transform: translateX(-10px) rotate(-2deg); }
  .direct-note-rules { display: block; }
  .direct-note-eyebrow { font-size: 20px; line-height: 22px; color: var(--red); }
  .direct-note-text { font-size: 14px; line-height: 20px; color: var(--ink); }
  .direct-pin { display: block; top: -12px; left: 89px; }

  .direct .section-cta { display: none; }
}

/* 05 · The AI Operating System (Paper COT-0) */
.os { padding: 0; }
.os-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* (a) Stone introduction + hub diagram */
.os-intro {
  display: flex; flex-direction: column; align-items: center; gap: 112px;
  padding: 200px var(--gutter) 120px;
  background: var(--bg-stone-3);
}
.os-intro__head { display: flex; flex-direction: column; align-items: center; gap: 32px; width: 100%; max-width: 1100px; text-align: center; }
.os-intro__title { font-size: 56px; line-height: 64px; }
.os-intro__sub { max-width: 780px; font-size: 18px; line-height: 30px; color: #706C67; }

.os-hub { position: relative; width: 1100px; max-width: 100%; height: 650px; flex: 0 0 auto; }
.os-hub__lines { position: absolute; left: 0; top: 0; width: 1100px; height: 650px; }
.os-hub__lines circle { fill: var(--blue); }

.os-hub__core { position: absolute; left: 400px; top: 250px; display: flex; flex-direction: column; align-items: center; gap: 18px; width: 300px; }
.os-hub__core-box { position: relative; width: 270px; height: 212px; flex: 0 0 auto; }
.os-hub__folder { position: absolute; left: -39px; top: -24px; width: 340px; height: 256px; max-width: none; }
.os-hub__core-label { font-weight: 500; font-size: 19px; line-height: 26px; color: var(--ink); white-space: nowrap; }

.os-hub__clients { position: absolute; left: 60px; top: 236px; display: flex; flex-direction: column; gap: 30px; }
.os-hub__tools { position: absolute; left: 816px; top: 158px; display: flex; flex-direction: column; gap: 16px; }

.os-card {
  display: flex; align-items: center; gap: 12px;
  padding-inline: 17px;
  background: var(--bg-white); border: 1px solid #DDD9D1;
  box-shadow: 0 2px 5px -2px rgba(26, 24, 22, 0.15);
}
.os-card--client { width: 230px; height: 58px; border-radius: 12px; }
.os-card--tool { width: 218px; height: 48px; border-radius: 8px; }
.os-card__tile { display: flex; align-items: center; justify-content: center; width: 30px; height: 32px; flex: 0 0 auto; }
.os-card__tile img { width: auto; flex: 0 0 auto; }
.os-card__tile--codex img { width: 38px; height: 38px; max-width: none; }
.os-card__label { white-space: nowrap; color: var(--ink); font-size: 15px; line-height: 22px; }
.os-card--client .os-card__label { font-weight: 500; font-size: 17px; }

.os-hub__skills { display: contents; }
.os-skill { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 9px; width: 184px; }
.os-skill--proposal { left: 270px; top: 35px; }
.os-skill--shoot { left: 580px; top: 20px; }
.os-skill--ads { left: 234px; top: 480px; }
.os-doc { flex: 0 0 auto; filter: drop-shadow(0 2px 2px rgba(26, 24, 22, 0.12)); }
.os-skill__label { font-size: 15px; line-height: 22px; color: #44403C; text-align: center; }

/* (b) Context. Tools. Skills. */
.os-ctx { display: flex; flex-direction: column; padding: 120px var(--gutter) 160px; background: var(--bg); }
.os-ctx__title { padding-bottom: 72px; text-align: center; letter-spacing: -0.035em; }
.os-ctx__cta { padding-top: 96px; }
.os-ctx__cols { display: grid; grid-template-columns: repeat(3, 340px); gap: 40px; justify-content: center; width: 100%; max-width: 1100px; margin-inline: auto; }
.os-col { display: flex; flex-direction: column; }
.os-col__h { margin-top: 24px; font-weight: 500; font-size: 36px; line-height: 42px; letter-spacing: -0.03em; color: var(--ink); }
.os-col__sub { margin-top: 12px; font-weight: 500; font-size: 19px; line-height: 27px; color: var(--ink); }
.os-col__body { margin-top: 12px; max-width: 320px; font-size: 17px; line-height: 27px; color: var(--ink-body-soft); }

.os-well { position: relative; width: 100%; max-width: 340px; height: 232px; overflow: clip; border-radius: var(--radius); background: var(--bg-stone-3); }
.os-well__stage { position: absolute; left: 50%; top: 0; width: 340px; height: 232px; margin-left: -170px; }

/* Context: three tilted document cards */
.os-ctxdoc {
  position: absolute; display: flex; flex-direction: column; gap: 18px;
  width: 120px; height: 162px; padding: 18px 14px;
  border-radius: 3px; background: var(--bg-white); border: 1px solid #D5D0C8;
  box-shadow: 0 8px 14px -8px rgba(26, 24, 22, 0.27);
  transform-origin: top left;
}
.os-ctxdoc--1 { left: 62px; top: 47px; transform: rotate(-11deg); }
.os-ctxdoc--2 { left: 161px; top: 48px; transform: rotate(10deg); }
.os-ctxdoc--3 { left: 109px; top: 30px; transform: rotate(-2deg); }
.os-ctxdoc__title { font-weight: 500; font-size: 12px; line-height: 17px; color: #44403C; }
.os-ctxdoc svg { flex: 0 0 auto; }

/* Tools: six logo tiles */
.os-well__stage--tools { display: grid; grid-template-columns: repeat(3, 68px); grid-auto-rows: 68px; gap: 14px; padding: 43px 0 0 53px; }
.os-tile {
  display: flex; align-items: center; justify-content: center; width: 68px; height: 68px;
  border-radius: 14px; background: var(--bg-white); border: 1px solid #DEDAD3;
  box-shadow: 0 4px 8px -5px rgba(26, 24, 22, 0.33);
}
.os-tile img { width: 38px; height: 38px; object-fit: contain; }

/* Skills: three document icons */
.os-wellskill { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 9px; width: 106px; }
.os-wellskill--1 { left: 10px; top: 57px; }
.os-wellskill--2 { left: 117px; top: 30px; }
.os-wellskill--3 { left: 224px; top: 57px; }
.os-doc--sm { width: 72px; height: 94px; filter: drop-shadow(0 5px 4px rgba(26, 24, 22, 0.2)); }
.os-wellskill span { width: 100px; text-align: center; font-size: 12px; line-height: 17px; color: var(--ink-2); }

/* Hub diagram stacks once it no longer fits at 1100px */
@media (max-width: 885px) {
  .os-hub { width: 100%; height: auto; display: flex; flex-direction: column; align-items: center; gap: 36px; }
  .os-hub__lines { display: none; }
  .os-hub__core, .os-hub__clients, .os-hub__tools, .os-skill { position: static; }
  .os-hub__clients { order: 1; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 12px; }
  .os-hub__core { order: 2; width: auto; }
  .os-hub__core-box { width: auto; height: auto; }
  .os-hub__folder { position: static; }
  .os-hub__tools { order: 3; display: grid; grid-template-columns: repeat(3, 218px); gap: 12px; }
  .os-hub__skills { order: 4; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
}

@media (max-width: 900px) {
  .os-intro { padding: 120px var(--gutter) 80px; gap: 64px; }
  .os-intro__title { font-size: 44px; line-height: 50px; }
  .os-hub__tools { grid-template-columns: repeat(2, 218px); }
  .os-ctx { padding: 80px var(--gutter) 112px; }
  .os-ctx__title { padding-bottom: 48px; }
  .os-ctx__cols { grid-template-columns: minmax(0, 340px); gap: 48px; }
  .os-col__body { max-width: none; }
}

/* Phone-only diagram labels and connectors (partials/05-os.html); see the ≤600px block below. */
@media (min-width: 601px) {
  .os-hub__phone { display: none; }
}

/* Phone (Paper v4 nodes JNW-0 "05 · AI Operating System · v4" and KBD-1, 390 wide, 24px gutters, 342px column).
   Grey intro + vertical diagram (KAW-1): agents label, three chips, connector, OS folder, fork, then Skills (120px)
   beside Tools. Then the framework on the bone ground, stacked with hairlines, ending with the section CTA. */
@media (max-width: 600px) {
  .os-intro { align-items: stretch; gap: 16px; padding: 64px var(--gutter); background: #F0EDE7; }
  .os-intro__head { align-items: stretch; gap: 16px; max-width: none; text-align: left; }
  .os-intro__title { font-size: 32px; line-height: 37px; letter-spacing: -0.03em; }
  .os-intro__sub { max-width: none; font-size: 17px; line-height: 26px; color: #3D3935; }

  /* Vertical diagram: a two-column grid so the desktop lists slot in around the phone-only labels and connectors */
  .os-hub {
    display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 0 12px;
    grid-template-areas:
      "agents-label agents-label"
      "clients clients"
      "conn-agents conn-agents"
      "core core"
      "conn-fork conn-fork"
      "skills-label tools-label"
      "skills tools";
    align-items: start; width: 100%; height: auto; padding: 24px 0 8px;
  }
  .os-hub__phone { display: block; }
  .os-hub__label {
    width: 100%; font-family: var(--font-mono); font-size: 12px; line-height: 18px; letter-spacing: 0.04em;
    text-transform: uppercase; text-align: center; color: #77736D; margin-bottom: 12px;
  }
  .os-hub__label--agents { grid-area: agents-label; }
  .os-hub__label--skills { grid-area: skills-label; }
  .os-hub__label--tools { grid-area: tools-label; }
  .os-hub__connector { display: block; width: 342px; max-width: 100%; height: auto; justify-self: center; }
  .os-hub__connector--agents { grid-area: conn-agents; }
  .os-hub__connector--fork { grid-area: conn-fork; }

  .os-hub__clients { grid-area: clients; position: static; display: flex; flex-direction: row; flex-wrap: nowrap; gap: 8px; width: 100%; }
  .os-card--client {
    flex: 1 1 0; min-width: 0; width: auto; height: 78px;
    flex-direction: column; justify-content: center; gap: 8px; padding-inline: 0;
    border: 0; border-radius: 8px; background: var(--bg); box-shadow: none;
  }
  .os-card--client .os-card__tile { width: 24px; height: 24px; }
  .os-card--client .os-card__tile img { width: 30px; height: 30px; max-width: none; }
  .os-card--client .os-card__tile--codex img { width: 38px; height: 38px; }
  .os-hub__clients .os-card:nth-child(3) .os-card__tile img { width: 28px; height: 32px; }
  .os-card--client .os-card__label { font-weight: 400; font-size: 13px; line-height: 16px; color: #000; }

  .os-hub__core { grid-area: core; position: static; justify-self: center; gap: 18px; width: 300px; height: 276px; }
  .os-hub__core-box { width: 270px; height: 212px; }
  .os-hub__folder { position: absolute; left: -39px; top: -24px; width: 340px; height: 256px; }
  .os-hub__core-label { font-size: 19px; line-height: 26px; }

  .os-hub__skills { grid-area: skills; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 12px; width: 120px; }
  .os-skill { position: static; width: 100%; gap: 9px; }
  .os-skill__label { font-size: 13px; line-height: 18px; }

  .os-hub__tools { grid-area: tools; position: static; display: flex; flex-direction: column; gap: 12px; width: 100%; }
  .os-card--tool { width: 100%; height: 48px; gap: 10px; padding-inline: 12px; }
  .os-card--tool .os-card__label { font-size: 14px; line-height: 22px; }

  /* Context · Tools · Skills (KBD-1): bone ground, full bleed, stacked with hairlines, CTA kept */
  .os-ctx { padding: 64px var(--gutter); background: var(--bg); }
  /* Paper KBD-1 is 27/34, but "Built on a simple framework:" runs 351px at 27px in Chrome vs the 342px column, so 26px keeps its two lines. */
  .os-ctx__title { padding-top: 0; padding-bottom: 48px; text-align: center; font-size: 26px; line-height: 34px; letter-spacing: -0.02em; color: #000; }
  .os-ctx__cols { display: flex; flex-direction: column; gap: 40px; max-width: none; }
  .os-col { padding-bottom: 32px; }
  .os-col + .os-col { padding-top: 24px; border-top: 1px solid #D8D4CB; }
  .os-col__h { margin-top: 16px; font-size: 28px; line-height: 34px; letter-spacing: -0.02em; color: #000; }
  .os-col__sub { margin-top: 16px; font-size: 16px; line-height: 25px; color: #000; }
  .os-col__body { margin-top: 16px; max-width: none; font-size: 16px; line-height: 27px; color: #3D3935; }

  .os-well { align-self: stretch; width: 100%; max-width: none; border-radius: 4px; background: #F0EEE8; }
  .os-well__stage--tools {
    display: flex; flex-wrap: wrap; align-content: center; justify-content: center;
    gap: 14px; padding: 0 32px;
  }
  .os-col:last-child .os-well { height: 204px; }
  .os-well__stage--skills {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 204px;
  }
  .os-wellskill { position: static; flex: 1 1 0; min-width: 0; width: auto; gap: 16px; }
  .os-wellskill span { width: 100%; height: 36px; font-size: 12px; line-height: 16px; color: #4A4640; }

  /* This CTA stays on phone (Paper KBD-1): last block 32 + 48 = 80px above the button. */
  .os-ctx__cta { padding-top: 48px; }
}

/* 06 · Build as you learn (Paper D5Y-0) */
.build { padding: 200px var(--gutter); background: var(--bg); }
.build__inner { display: flex; flex-direction: column; align-items: center; gap: 120px; width: 100%; max-width: 1100px; margin-inline: auto; }
.build .section-cta { padding-top: 0; }
.build__title { max-width: 900px; text-align: center; font-size: 56px; line-height: 64px; }

.build__row { display: flex; align-items: center; justify-content: center; gap: 90px; width: 100%; }

/* Photo print */
.build-print {
  display: flex; flex-direction: column; gap: 14px;
  width: 520px; flex: 0 0 auto; padding: 12px 12px 18px;
  background: var(--bg-white); box-shadow: var(--shadow-print);
  transform: rotate(-1deg); transform-origin: center;
}
.build-print__frame { width: 496px; height: 391px; overflow: clip; background: var(--bg-stone-3); }
.build-print__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.build-print__caption { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.build-print__tag { font-family: var(--font-mono); font-size: 11px; line-height: 18px; color: var(--ink-3); }
.build-print__note { font-size: 13px; line-height: 18px; color: var(--ink-2); text-align: right; }

/* Editing note + stats */
.build-note { display: flex; flex-direction: column; gap: 24px; width: 420px; flex: 0 0 auto; }
.build-note__body { font-size: 18px; line-height: 29px; color: var(--ink-3); }
.build-stats { display: flex; flex-direction: column; padding-top: 4px; }
.build-stat { display: flex; align-items: center; gap: 24px; padding-block: 15px; border-top: 1px solid var(--line-table); }
.build-stat__num { width: 180px; flex: 0 0 auto; font-family: var(--font-mono); font-size: 40px; line-height: 50px; font-variant-numeric: tabular-nums; color: var(--blue); }
.build-stat__label { font-size: 15px; line-height: 23px; color: var(--ink-3); }

/* Bottom panel */
.build-panel { display: flex; align-items: center; gap: 40px; width: 100%; padding: 36px; border-radius: var(--radius); background: var(--bg-stone-3); }
.build-panel__copy { display: flex; flex-direction: column; gap: 20px; flex: 1 1 auto; min-width: 0; }
.build-panel__h { font-weight: 500; font-size: 30px; line-height: 38px; letter-spacing: -0.025em; color: var(--ink); }
.build-panel__mark { background: #FFE76A; color: inherit; }
.build-panel__body { font-size: 17px; line-height: 28px; color: #68645E; }
.build-panel__still { display: flex; flex-direction: column; gap: 12px; width: 420px; flex: 0 0 auto; }
.build-panel__still img { width: 420px; height: 236px; object-fit: cover; border-radius: 2px; }
.build-panel__caption { font-size: 14px; line-height: 21px; color: var(--ink-2); }

@media (max-width: 825px) {
  .build__row { gap: 48px; }
  .build-print { width: 460px; }
  .build-print__frame { width: 436px; height: 344px; }
  .build-note { width: 380px; }
}

@media (max-width: 900px) {
  .build { padding-block: 120px; }
  .build__inner { gap: 72px; }
  .build__title { font-size: 44px; line-height: 50px; }
  .build__row { flex-direction: column; gap: 48px; }
  .build-print { width: 100%; max-width: 520px; }
  .build-print__frame { width: 100%; height: auto; aspect-ratio: 496 / 391; }
  .build-note { width: 100%; max-width: 520px; }
  .build-panel { flex-direction: column; align-items: stretch; padding: 28px; }
  .build-panel__still { width: 100%; }
  .build-panel__still img { width: 100%; height: auto; aspect-ratio: 420 / 236; }
  .build-panel__h br { display: none; }
}

/* Phone (Paper v4 node JQD-0 "06 · Build as you learn · v4", 390 wide, 24px gutters, 342px column).
   Grey ground, 40px column: title, polaroid print, editing note, three stat rows, white lesson card. No CTA. */
@media (max-width: 600px) {
  .build { padding: 64px var(--gutter); background: #F0EDE7; }
  .build__inner { align-items: stretch; gap: 40px; max-width: none; }
  .build__title { max-width: none; text-align: left; font-size: 32px; line-height: 38px; letter-spacing: -0.025em; }
  .build__title br { display: none; }

  /* Print, note and stats all become siblings in the 40px column */
  .build__row { display: contents; }

  .build-print {
    width: 100%; max-width: none; gap: 16px; padding: 10px;
    box-shadow: 0 6px 18px rgba(26, 24, 22, 0.094);
  }
  .build-print__frame { width: 100%; height: 250px; aspect-ratio: auto; }
  .build-print__caption { display: block; }
  .build-print__tag { display: none; }
  .build-print__note { font-size: 14px; line-height: 22px; color: var(--ink-2); text-align: left; }

  .build-note { width: 100%; max-width: none; gap: 24px; padding-top: 8px; }
  .build-note__h { font-size: 26px; line-height: 33px; letter-spacing: -0.02em; color: #000; }
  .build-note__body { font-size: 16px; line-height: 27px; color: #3D3935; }

  .build-stats { gap: 40px; margin-top: 16px; padding-top: 0; }
  .build-stat { gap: 24px; padding-block: 24px 0; border-top: 1px solid var(--line-table); }
  .build-stat__num { width: 116px; font-size: 28px; line-height: 36px; color: #2260C5; }
  .build-stat__label { flex: 1 1 0; min-width: 0; font-size: 15px; line-height: 23px; color: #68645E; }

  .build-panel { gap: 24px; padding: 32px 24px; border-radius: 8px; background: var(--bg-white); border: 1px solid #E5E2DC; }
  .build-panel__copy { gap: 24px; }
  .build-panel__h { font-size: 26px; line-height: 33px; letter-spacing: -0.02em; }
  .build-panel__mark { display: inline; padding: 0 4px; background: #FFE76A; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .build-panel__body { font-size: 16px; line-height: 27px; color: #3D3935; }
  .build-panel__still { gap: 24px; }
  .build-panel__still img { width: 100%; height: 170px; aspect-ratio: auto; object-fit: contain; border-radius: 4px; }
  .build-panel__caption { font-size: 14px; line-height: 22px; color: var(--ink-2); }

  /* Paper hides the in-section CTA on phone; the sticky bottom CTA carries it. */
  .build .section-cta { display: none; }
}

/* 07 · Course roadmap · Card stack (Paper G9M-0) */
.roadmap { padding: 200px var(--gutter); background: var(--bg); }
.roadmap__inner { display: flex; flex-direction: column; align-items: center; gap: 120px; width: 100%; max-width: 1100px; margin-inline: auto; }
.roadmap .section-cta { padding-top: 0; }
.roadmap__head { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.roadmap__title { max-width: 900px; font-size: 56px; line-height: 64px; }
.roadmap__sub { max-width: 640px; font-size: 18px; line-height: 29px; color: var(--ink-3); }

.roadmap__row { display: flex; align-items: flex-start; gap: 60px; width: 100%; }

/* Scroll-driven mode (desktop, set by js/sections/07-roadmap.js when the block fits the viewport):
   the section grows to data-step px per chapter, the inner block pins under the header, and scrolling
   through the section advances the active chapter one at a time. The section height is set inline. */
.roadmap.is-scrolly { padding-block: 0; }
.roadmap.is-scrolly .roadmap__pin {
  position: sticky; top: var(--roadmap-pin-top, 68px); height: var(--roadmap-pin-h, auto);
  display: flex; align-items: center; justify-content: center;
}
.roadmap.is-scrolly .roadmap__inner { gap: 48px; }
.roadmap.is-scrolly .roadmap__head { gap: 14px; }

/* Chapter index with progress rail */
.roadmap-index { display: flex; flex-direction: column; width: 420px; padding-left: 44px; flex: 0 0 auto; }
.roadmap-index__row {
  position: relative; display: flex; align-items: center; gap: 18px;
  width: 376px; padding-block: 17px; text-align: left;
  border-top: 1px solid var(--line-table);
  transition: color var(--fast) var(--ease);
}
.roadmap-index__row:last-child { border-bottom: 1px solid var(--line-table); }
.roadmap-index__num { width: 30px; flex: 0 0 auto; font-family: var(--font-mono); font-size: 13px; line-height: 20px; color: var(--blue); }
.roadmap-index__label { font-weight: 500; font-size: 18px; line-height: 26px; color: var(--ink); }
.roadmap-index__row[data-state="upcoming"] .roadmap-index__num { color: var(--ink-4); }
.roadmap-index__row[data-state="active"] .roadmap-index__label { color: var(--blue); }
.roadmap-index__row:hover .roadmap-index__label { color: var(--blue); }

/* Rail segment */
.roadmap-index__row::before {
  content: ''; position: absolute; left: -37px; top: 0; bottom: 0; width: 2px;
  background: var(--line-table);
}
.roadmap-index__row[data-state="done"]::before { background: var(--blue); }
.roadmap-index__row[data-state="active"]::before { background: linear-gradient(var(--blue) 0 26px, var(--line-table) 26px); }
.roadmap-index__row:first-child::before { top: 23px; }
.roadmap-index__row:first-child[data-state="active"]::before { background: var(--line-table); }
.roadmap-index__row:last-child::before { bottom: auto; height: 30px; }

/* Node dot */
.roadmap-index__row::after {
  content: ''; position: absolute; left: -43px; top: 23px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--blue); box-sizing: border-box;
}
.roadmap-index__row[data-state="upcoming"]::after { background: var(--bg); border: 2px solid #D6D3CE; }
.roadmap-index__row[data-state="active"]::after { left: -45px; top: 21px; width: 18px; height: 18px; background: var(--bg); border: 2px solid var(--blue); }

/* Card stack */
.roadmap-stack { position: relative; width: 620px; flex: 0 0 auto; }
.roadmap-stack__ghost {
  position: absolute; border-radius: 2px; border: 1px solid var(--line-card);
  transform-origin: top left;
}
.roadmap-stack__ghost--back { inset: 22px -14px -22px 14px; background: var(--bg-card-ghost-2); box-shadow: 0 4px 10px -6px rgba(26, 24, 22, 0.18); transform: rotate(-1.4deg); }
.roadmap-stack__ghost--mid { inset: 11px -6px -11px 6px; background: var(--bg-card-ghost-1); box-shadow: 0 4px 10px -6px rgba(26, 24, 22, 0.2); transform: rotate(1deg); }

.roadmap-card {
  position: relative; display: flex; flex-direction: column; gap: 20px;
  min-height: 537px; padding: 46px 40px 40px; border-radius: 2px;
  background: var(--bg-white);
  box-shadow: 0 6px 12px -8px rgba(26, 24, 22, 0.2), 8px 16px 24px -18px rgba(26, 24, 22, 0.33);
}
.roadmap-card.is-switching { animation: roadmap-fade var(--med) var(--ease); }
@keyframes roadmap-fade { from { opacity: 0.35; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .roadmap-card.is-switching { animation: none; } }

.roadmap-card__meta { display: flex; justify-content: space-between; align-items: center; }
.roadmap-card__num { font-family: var(--font-mono); font-size: 13px; line-height: 20px; color: var(--blue); }
.roadmap-card__tag { font-family: var(--font-mono); font-size: 12px; line-height: 20px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.roadmap-card__h { max-width: 530px; padding-top: 4px; font-weight: 500; font-size: 36px; line-height: 43px; letter-spacing: -0.03em; color: var(--ink); }
.roadmap-card__body { font-size: 18px; line-height: 29px; color: var(--ink-3); }

.roadmap-card__build { display: flex; align-items: center; gap: 28px; padding-top: 22px; margin-top: auto; border-top: 1px solid var(--line-table); }
.roadmap-card__build-copy { display: flex; flex-direction: column; gap: 6px; width: 300px; flex: 0 0 auto; }
.roadmap-card__build-label { font-size: 15px; line-height: 23px; color: var(--ink-3); }
.roadmap-card__build-title { font-weight: 500; font-size: 22px; line-height: 30px; letter-spacing: -0.02em; color: var(--ink); }
.roadmap-card__build-line { padding-top: 4px; font-size: 15px; line-height: 24px; color: var(--ink-3); }

/* Artifact: three tiny documents */
.roadmap-artifact { position: relative; width: 212px; height: 145px; flex: 0 0 auto; overflow: clip; border-radius: 6px; background: var(--bg-stone-3); }
.roadmap-artifact__doc {
  position: absolute; display: flex; flex-direction: column; gap: 5px;
  width: 78px; height: 104px; padding: 12px 9px;
  background: var(--bg-white); box-shadow: 0 2px 6px rgba(26, 24, 22, 0.14);
  transform-origin: top left;
}
.roadmap-artifact__doc span { font-weight: 500; font-size: 7px; line-height: 9px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.roadmap-artifact__doc i { display: block; height: 1px; background: #C9C4BB; }
.roadmap-artifact__doc i:nth-of-type(1) { width: 56px; }
.roadmap-artifact__doc i:nth-of-type(2) { width: 46px; }
.roadmap-artifact__doc i:nth-of-type(3) { width: 53px; }
.roadmap-artifact__doc i:nth-of-type(4) { width: 38px; }
.roadmap-artifact__doc i:nth-of-type(5) { width: 50px; }
.roadmap-artifact__doc--a { left: 34px; top: 26px; transform: rotate(-9deg); }
.roadmap-artifact__doc--b { left: 104px; top: 30px; transform: rotate(8deg); }
.roadmap-artifact__doc--c { left: 68px; top: 14px; width: 80px; height: 108px; box-shadow: 0 3px 8px rgba(26, 24, 22, 0.18); transform: rotate(-2deg); }
.roadmap-artifact__doc--c span { font-size: 7.5px; }

/* Bulldog clip */
.roadmap-clip { position: absolute; top: -27px; right: 24px; width: 98px; height: 62px; transform: rotate(3deg); transform-origin: 0 0; pointer-events: none; }

@media (max-width: 825px) {
  .roadmap__row { gap: 32px; }
  .roadmap-index { width: 340px; }
  .roadmap-index__row { width: 296px; }
  .roadmap-stack { width: auto; flex: 1 1 auto; min-width: 0; }
}

@media (max-width: 900px) {
  .roadmap { padding-block: 120px; }
  .roadmap__inner { gap: 64px; }
  .roadmap__title { font-size: 44px; line-height: 50px; }
  .roadmap__row { flex-direction: column; gap: 32px; }

  /* Index becomes a horizontal row of chips */
  .roadmap-index {
    flex-direction: row; gap: 8px; width: calc(100% + var(--gutter) * 2); padding: 4px var(--gutter);
    margin-inline: calc(var(--gutter) * -1); overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .roadmap-index::-webkit-scrollbar { display: none; }
  .roadmap-index__row {
    width: auto; min-height: 44px; padding: 9px 14px; gap: 8px; flex: 0 0 auto;
    border: 1px solid var(--line-table); border-radius: 999px; white-space: nowrap;
  }
  .roadmap-index__row:last-child { border-bottom: 1px solid var(--line-table); }
  .roadmap-index__row[data-state="active"] { border-color: var(--blue); }
  .roadmap-index__num { width: auto; }
  .roadmap-index__label { font-size: 15px; line-height: 22px; }
  .roadmap-index__row::before, .roadmap-index__row::after { display: none; }

  .roadmap-stack { width: 100%; }
  .roadmap-card { min-height: 0; padding: 40px 28px 32px; }
  .roadmap-card__h { font-size: 30px; line-height: 36px; }
  .roadmap-card__build { flex-wrap: wrap; }
  .roadmap-card__build-copy { width: 100%; flex: 1 1 260px; }
}

/* The phone timeline container is built by js/sections/07-roadmap.js and only ever shows below 601px. */
.roadmap-tl { display: none; }

/* Phone (Paper v4 node JR9-0 / timeline KBU-1): a vertical timeline replaces the chapter index + card
   stack. Rail column 20px with a 2px line; filled 14px dots before the active chapter, an 18px ring on
   it, hollow 14px rings after; the chapter card sits under the active row. */
@media (max-width: 600px) {
  .roadmap { padding: 64px var(--gutter); background: var(--bg); }
  .roadmap__inner { gap: 12px; align-items: stretch; }
  .roadmap__head { gap: 24px; padding-bottom: 36px; align-items: stretch; text-align: left; }
  .roadmap__title { font-size: 32px; line-height: 37px; letter-spacing: -0.03em; }
  .roadmap__sub { font-size: 17px; line-height: 26px; color: #3D3935; }
  .roadmap .section-cta { gap: 20px; padding-top: 44px; }

  /* .roadmap--tl is set once the rows exist, so with JS off the section keeps the tap-mode markup
     styled by the 900px block above. */
  .roadmap--tl .roadmap__row { display: none; }
  .roadmap--tl .roadmap-tl { display: flex; flex-direction: column; width: 100%; }

  .roadmap-tl__item { display: flex; gap: 16px; width: 100%; }
  .roadmap-tl__rail { display: flex; flex-direction: column; align-items: center; flex: 0 0 20px; width: 20px; padding-top: 5px; }
  .roadmap-tl__dot { display: block; flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; background: var(--blue); box-sizing: border-box; }
  .roadmap-tl__line { display: block; flex: 1 1 auto; width: 2px; background: var(--blue); }
  .roadmap-tl__item[data-state="active"] .roadmap-tl__rail { padding-top: 3px; }
  .roadmap-tl__item[data-state="active"] .roadmap-tl__dot { width: 18px; height: 18px; background: var(--bg); border: 2px solid var(--blue); }
  .roadmap-tl__item[data-state="upcoming"] .roadmap-tl__dot { background: var(--bg); border: 2px solid #C9C3B9; }
  .roadmap-tl__item[data-state="active"] .roadmap-tl__line,
  .roadmap-tl__item[data-state="upcoming"] .roadmap-tl__line { background: #D9D3CA; }

  .roadmap-tl__content { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; gap: 12px; padding-bottom: 30px; }
  .roadmap-tl__item[data-state="active"] .roadmap-tl__content { gap: 20px; }
  .roadmap-tl__item:last-child .roadmap-tl__content { padding-bottom: 4px; }

  /* Row head: the 24px line is the design; the 8px block padding + negative margin only widens the tap target. */
  .roadmap-tl__row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 0; margin: -8px 0; text-align: left; }
  .roadmap-tl__num { width: 24px; flex: 0 0 auto; font-family: var(--font-mono); font-size: 12px; line-height: 18px; color: var(--blue); }
  .roadmap-tl__item[data-state="upcoming"] .roadmap-tl__num { color: #9A958D; }
  .roadmap-tl__label { font-weight: 500; font-size: 18px; line-height: 24px; letter-spacing: -0.01em; color: var(--ink); }
  .roadmap-tl__item[data-state="active"] .roadmap-tl__label { color: var(--blue); }

  /* Chapter card */
  .roadmap-tl__card {
    position: relative; display: flex; flex-direction: column; gap: 16px; width: 100%;
    padding: 20px; border: 1px solid #E7E2DA; border-radius: 4px; background: var(--bg-white);
    box-shadow: 0 10px 24px rgba(37, 36, 34, 0.07), 0 2px 4px rgba(37, 36, 34, 0.03);
  }
  .roadmap-tl__meta { display: flex; justify-content: space-between; align-items: center; }
  .roadmap-tl__meta-num, .roadmap-tl__meta-tag { font-family: var(--font-mono); font-size: 12px; line-height: 18px; letter-spacing: 0.04em; text-transform: uppercase; }
  .roadmap-tl__meta-num { color: var(--blue); }
  .roadmap-tl__meta-tag { color: #77736D; }
  .roadmap-tl__h { font-weight: 500; font-size: 26px; line-height: 32px; letter-spacing: -0.02em; color: var(--ink); }
  .roadmap-tl__body { font-size: 15px; line-height: 22px; color: #3D3935; }
  .roadmap-tl__rule { height: 1px; background: #E7E2DA; }
  /* Paper draws two hairlines here: the card rule, then 16px later the build block's own top rule. */
  .roadmap-tl__build { display: flex; flex-direction: column; gap: 20px; padding-top: 28px; border-top: 1px solid var(--line-table); }
  .roadmap-tl__build-label { font-family: var(--font-mono); font-size: 12px; line-height: 18px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
  .roadmap-tl__build-title { font-weight: 500; font-size: 20px; line-height: 26px; letter-spacing: -0.015em; color: var(--ink); }
  .roadmap-tl__build-line { font-size: 15px; line-height: 22px; color: #3D3935; }

  /* Artifact: the same three documents as the desktop card, at the phone size (Paper KBU-1) */
  .roadmap-tl__art {
    position: relative; align-self: center; width: 100%; max-width: 300px; height: 196px;
    overflow: clip; border-radius: 6px; background: var(--bg-stone-3);
  }
  .roadmap-tl__doc {
    position: absolute; display: flex; flex-direction: column; gap: 9px;
    width: 112px; height: 146px; padding: 16px 12px;
    background: var(--bg-white); box-shadow: 0 2px 6px rgba(26, 24, 22, 0.14);
    transform-origin: top left;
  }
  .roadmap-tl__doc span { font-weight: 500; font-size: 12px; line-height: 17px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .roadmap-tl__doc i { display: block; height: 1px; background: #C9C4BB; }
  .roadmap-tl__doc--a { left: 28px; top: 38px; transform: rotate(-9deg); }
  .roadmap-tl__doc--b { left: 142px; top: 38px; transform: rotate(8deg); }
  .roadmap-tl__doc--c { left: 87px; top: 20px; box-shadow: 0 3px 8px rgba(26, 24, 22, 0.18); transform: rotate(-2deg); }
  .roadmap-tl__doc--a i:nth-of-type(1) { width: 56px; }
  .roadmap-tl__doc--a i:nth-of-type(2) { width: 48px; }
  .roadmap-tl__doc--a i:nth-of-type(3) { width: 52px; }
  .roadmap-tl__doc--a i:nth-of-type(4) { width: 40px; }
  .roadmap-tl__doc--b i:nth-of-type(1) { width: 56px; }
  .roadmap-tl__doc--b i:nth-of-type(2) { width: 44px; }
  .roadmap-tl__doc--b i:nth-of-type(3) { width: 54px; }
  .roadmap-tl__doc--b i:nth-of-type(4) { width: 36px; }
  .roadmap-tl__doc--c i:nth-of-type(1) { width: 58px; }
  .roadmap-tl__doc--c i:nth-of-type(2) { width: 50px; }
  .roadmap-tl__doc--c i:nth-of-type(3) { width: 56px; }
  .roadmap-tl__doc--c i:nth-of-type(4) { width: 44px; }
  .roadmap-tl__doc--c i:nth-of-type(5) { width: 52px; }

  /* Red bulldog clip overhanging the card's top-right corner (Paper: 64×40 at top -34, left 228 on a 306 card) */
  .roadmap-tl__clip { position: absolute; top: -34px; right: 14px; width: 64px; height: 40px; transform: rotate(3deg); transform-origin: 0 0; pointer-events: none; }

  /* Scroll-pinned timeline (js/sections/07-roadmap.js sets .roadmap--tl-pin when the block fits the viewport):
     the track is sized inline to the block plus data-step-phone px per chapter, the timeline sticks near the
     top of the screen inside it, and the card is tightened so rows (44px pitch) plus the tallest card fit a
     390x844 phone at the page zoom. The heading and intro stay above the track and scroll away first. */
  .roadmap--tl-pin .roadmap-tl { position: -webkit-sticky; position: sticky; top: 12px; }
  .roadmap--tl-pin .roadmap-tl__content { gap: 10px; padding-bottom: 20px; }
  .roadmap--tl-pin .roadmap-tl__item[data-state="active"] .roadmap-tl__content { gap: 14px; }
  .roadmap--tl-pin .roadmap-tl__item:last-child .roadmap-tl__content { padding-bottom: 0; }
  .roadmap--tl-pin .roadmap-tl__label { font-size: 17px; }
  .roadmap--tl-pin .roadmap-tl__card { gap: 12px; padding: 16px; }
  .roadmap--tl-pin .roadmap-tl__card.is-switching { animation: roadmap-fade var(--med) var(--ease); }
  .roadmap--tl-pin .roadmap-tl__h { font-size: 22px; line-height: 28px; }
  .roadmap--tl-pin .roadmap-tl__body { font-size: 14px; line-height: 21px; }
  .roadmap--tl-pin .roadmap-tl__build { gap: 8px; padding-top: 14px; }
  .roadmap--tl-pin .roadmap-tl__build-title { font-size: 18px; line-height: 24px; }
  .roadmap--tl-pin .roadmap-tl__build-line { font-size: 14px; line-height: 20px; }
  .roadmap--tl-pin .roadmap-tl__art { margin-top: 4px; max-width: 240px; height: 124px; }
  .roadmap--tl-pin .roadmap-tl__doc { width: 80px; height: 100px; padding: 11px 9px; gap: 6px; }
  .roadmap--tl-pin .roadmap-tl__doc span { font-size: 9px; line-height: 12px; }
  .roadmap--tl-pin .roadmap-tl__doc--a { left: 24px; top: 22px; }
  .roadmap--tl-pin .roadmap-tl__doc--b { left: 116px; top: 22px; }
  .roadmap--tl-pin .roadmap-tl__doc--c { left: 72px; top: 10px; }
  .roadmap--tl-pin .roadmap-tl__doc i { transform: scaleX(0.72); transform-origin: left; }
  .roadmap--tl-pin .roadmap-tl__clip { top: -28px; right: 12px; width: 52px; height: 33px; }

  /* Tap-mode fallback (JS off): keep the single card inside the phone width. */
  .roadmap-stack__ghost--back { inset: 14px -8px -14px 8px; }
  .roadmap-stack__ghost--mid { inset: 7px -4px -7px 4px; }
  .roadmap-card { padding: 36px 20px 28px; }
  .roadmap-card__h { font-size: 26px; line-height: 32px; }
  .roadmap-card__body { font-size: 17px; line-height: 27px; }
  .roadmap-artifact { display: none; }
  .roadmap-clip { top: -24px; right: 14px; width: 80px; height: 51px; }
}

/* 08 · AI is not a technical skillset (Paper ET5-0) */
.skillset { padding: 240px var(--gutter); }
.skillset__inner { display: flex; align-items: center; gap: 94px; width: 100%; max-width: 1160px; margin-inline: auto; }

/* The exported portrait already carries Paper's saturate/contrast/brightness filter and 14px corners, so no CSS filter here. */
.skillset__portrait { width: 456px; height: 530px; flex: 0 0 auto; border-radius: 14px; object-fit: cover; }

.skillset__note { display: flex; flex-direction: column; gap: 30px; width: 610px; flex: 0 1 auto; min-width: 0; }
.skillset__h { font-weight: 500; font-size: 38px; line-height: 48px; letter-spacing: -0.045em; color: var(--ink); }
.skillset__paras { display: flex; flex-direction: column; gap: 20px; }
.skillset__paras p { font-size: 19px; line-height: 31px; color: var(--ink); }
.skillset__mark { display: inline-block; padding-inline: 3px; background: #FFE76A; color: inherit; }
.skillset__sig { display: flex; flex-direction: column; gap: 6px; }
.skillset__name { font-size: 38px; line-height: 44px; color: var(--ink); }
.skillset__role { font-family: var(--font-mono); font-size: 11px; line-height: 18px; color: var(--ink-3); }

@media (max-width: 1100px) {
  .skillset__inner { gap: 56px; }
  .skillset__portrait { width: 380px; height: 442px; }
}

@media (max-width: 900px) {
  .skillset { padding: 120px var(--gutter); }
  .skillset__inner { flex-direction: column; align-items: flex-start; gap: 40px; }
  .skillset__portrait { width: 100%; max-width: 456px; height: auto; aspect-ratio: 456 / 530; }
  .skillset__note { width: 100%; }
}

/* Phone (Paper v4 node JTA-0) — heading, 342px photo, copy with the single-line highlight, signature.
   The desktop two-column frame is flattened with display:contents so the h2 can sit above the photo
   without changing the DOM. No CTA on phone (the sticky bar covers it). */
@media (max-width: 600px) {
  .skillset {
    display: flex; flex-direction: column; gap: 32px;
    padding: 64px var(--gutter);
    background: #F0EDE7;
  }
  .skillset__inner, .skillset__note { display: contents; }

  .skillset__h { order: -1; font-size: 32px; line-height: 37px; letter-spacing: -0.03em; }

  .skillset__portrait {
    width: 100%; max-width: none; height: 342px; aspect-ratio: auto;
    border-radius: 10px; object-fit: cover; object-position: 50% 65%;
  }

  .skillset__paras { gap: 16px; padding-top: 16px; }
  .skillset__paras p { font-size: 17px; line-height: 26px; color: #3D3935; }
  /* Paper keeps the highlighted line tight under the first paragraph, then opens back up to 32px. */
  .skillset__paras p:nth-child(n + 3) { margin-top: 16px; }
  .skillset__mark { display: inline; padding: 0 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

  .skillset__sig { gap: 12px; padding-top: 12px; }
  .skillset__name { font-size: 38px; line-height: 44px; }
  .skillset__role { font-size: 12px; line-height: 20px; color: var(--ink-2); }

  .skillset .section-cta { display: none; }
}

/* 09 · Reviews · Ranked gallery (#proof) — Paper node GDD-0 */
.reviews { padding-block: 180px; }
.reviews-inner { display: flex; flex-direction: column; align-items: center; gap: 64px; }

/* Header */
.reviews-header { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.reviews-eyebrow { font-family: var(--font-mono); font-size: 12px; line-height: 18px; text-transform: uppercase; color: var(--ink-3); }
.reviews-title { letter-spacing: -0.045em; }

/* Gallery */
.reviews-gallery { display: flex; flex-direction: column; width: 100%; gap: 24px; }
.reviews-clip { position: relative; overflow: hidden; }
.reviews-clip.is-collapsed { max-height: var(--reviews-clip-height, 994px); }
.reviews-clip.is-animating { transition: max-height 500ms var(--ease); }
.reviews-clip::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 112px; pointer-events: none;
  background: linear-gradient(180deg, rgba(245, 244, 240, 0) 0%, var(--bg-stone-2) 95%);
  opacity: 0; transition: opacity var(--med) var(--ease);
}
.reviews-clip.is-collapsed::after { opacity: 1; }

.reviews-columns { display: flex; align-items: flex-start; gap: 24px; }
.reviews-col { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; gap: 24px; }
.reviews-col--2 { padding-top: 40px; }

/* Card */
.reviews-card {
  display: flex; flex-direction: column; gap: 28px;
  padding: 30px; border-radius: var(--radius);
  background: var(--bg-white); border: 1px solid var(--line-review); box-shadow: var(--shadow-review);
}
.reviews-card.is-peek { visibility: visible; }
.reviews-stars { display: flex; align-items: center; gap: 4px; height: 18px; }
.reviews-stars svg { flex: 0 0 auto; }
.reviews-quote { font-size: 19px; line-height: 29px; letter-spacing: -0.015em; color: var(--ink); overflow-wrap: anywhere; }
.reviews-quote p::before { content: '\201C'; }
.reviews-quote p::after { content: '\201D'; }
.reviews-who { display: flex; align-items: flex-start; gap: 12px; padding-top: 22px; border-top: 1px solid var(--line-review-inner); }
.reviews-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: var(--bg-avatar);
  font-weight: 500; font-size: 15px; line-height: 18px; color: #68645E;
}
.reviews-avatar img { width: 100%; height: 100%; object-fit: cover; }
.reviews-meta { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; gap: 4px; }
.reviews-name { font-weight: 500; font-size: 15px; line-height: 21px; color: var(--ink); }
.reviews-role { font-size: 13px; line-height: 20px; color: #6D6963; }
.reviews-source { padding-top: 5px; font-family: var(--font-mono); font-size: 10px; line-height: 16px; text-transform: uppercase; color: var(--ink-3); }

/* Controls */
.reviews-controls { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.reviews-more {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 56px; padding: 16px 24px; border-radius: var(--radius);
  background: var(--bg); border: 1px solid #CFCBC2;
  font-weight: 500; font-size: 16px; line-height: 22px; color: var(--ink);
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.reviews-more:hover { border-color: var(--ink-4); }
.reviews-more:active { transform: translateY(1px); }
.reviews-more__chevron { flex: 0 0 auto; transition: transform var(--med) var(--ease); }
.reviews-more[aria-expanded="true"] .reviews-more__chevron { transform: rotate(180deg); }
.reviews-count { font-family: var(--font-mono); font-size: 11px; line-height: 18px; text-transform: uppercase; color: var(--ink-3); }

@media (prefers-reduced-motion: reduce) {
  .reviews-clip.is-animating { transition: none; }
  .reviews-more__chevron { transition: none; }
}

/* Responsive: columns collapse into one grid so rank order still reads left to right */
@media (max-width: 900px) {
  .reviews { padding-block: 112px; }
  .reviews-inner { gap: 40px; }
  .reviews-title { font-size: 34px; line-height: 40px; }
  .reviews-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .reviews-col { display: contents; }
  .reviews-col--2 { padding-top: 0; }
  .reviews-card { order: var(--order, 0); padding: 24px; }
}
/* Phone (Paper node J52-0 "09 · Mobile reviews · Initial three") — left-aligned header, one column of
   cards, three shown to start, full-width "Show more reviews" button + counter. The desktop clip/fade is
   switched off here (js/proof.js hides the cards outright instead of clipping them). */
@media (max-width: 600px) {
  .reviews { padding-block: 64px; background: var(--bg); } /* Paper v4 JTW-0: bone ground, 64px */
  .reviews-inner { align-items: stretch; gap: 32px; }

  .reviews-header { align-items: flex-start; gap: 20px; padding-bottom: 16px; text-align: left; }
  .reviews-eyebrow { font-size: 12px; line-height: 20px; color: var(--ink-2); }
  .reviews-title { letter-spacing: -0.025em; }
  .reviews-title br { display: none; } /* Paper wraps this heading naturally at 342px */

  .reviews-gallery { gap: 32px; }
  .reviews-clip.is-phone { max-height: none; overflow: visible; }
  .reviews-clip.is-phone::after { display: none; }
  .reviews-clip.is-phone .reviews-card.is-peek { display: none; }

  .reviews-columns { grid-template-columns: minmax(0, 1fr); gap: 32px; }

  .reviews-card { gap: 28px; padding: 32px 24px; border-radius: var(--radius); }
  .reviews-quote { font-size: 18px; line-height: 29px; color: #242321; }
  .reviews-who { gap: 14px; padding-top: 24px; }
  .reviews-meta { gap: 7px; }
  .reviews-name { font-size: 16px; line-height: 23px; color: #242321; }
  .reviews-role { font-size: 14px; line-height: 22px; color: var(--ink-2); }
  .reviews-source { font-size: 12px; line-height: 19px; color: var(--ink-2); }

  .reviews-controls { width: 100%; gap: 20px; padding-top: 16px; }
  .reviews-more {
    width: 100%; height: 56px; min-height: 56px; padding: 0 24px;
    background: var(--bg); border-color: #CFCBC2; font-size: 16px; line-height: 22px; color: #000;
  }
  .reviews-count { font-size: 12px; line-height: 20px; color: var(--ink-2); }
}

/* 10 · Video testimonials · Two portrait rows — Paper node HBA-0 */
.videos { display: flex; flex-direction: column; gap: 64px; padding-block: 150px 180px; overflow: clip; }

/* Header */
.videos-header { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.videos-eyebrow { font-family: var(--font-mono); font-size: 11px; line-height: 18px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.videos-title { max-width: 840px; line-height: 52px; letter-spacing: -0.045em; }

/* Wall */
.videos-wall { display: flex; flex-direction: column; gap: 24px; width: 100%; }
.videos-row { width: 100%; overflow: hidden; }
.videos-marquee { display: flex; gap: 20px; width: max-content; will-change: transform; }
.videos-track { display: flex; flex: 0 0 auto; gap: 20px; margin: 0; padding: 0; list-style: none; }
.videos-item { flex: 0 0 auto; }

/* Marquee motion: JS sets --videos-shift (px) and --videos-duration (s) per row */
.videos-row.is-moving .videos-marquee { animation: videos-marquee var(--videos-duration, 120s) linear infinite; }
.videos-row--left.is-moving .videos-marquee { animation-name: videos-marquee-left; animation-delay: var(--videos-delay, -8s); }
.videos-row--right.is-moving .videos-marquee { animation-name: videos-marquee-right; animation-delay: var(--videos-delay, -15s); }
.videos-wall.is-paused .videos-marquee { animation-play-state: paused; }
@keyframes videos-marquee-left { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(-1 * var(--videos-shift, 0px)), 0, 0); } }
@keyframes videos-marquee-right { from { transform: translate3d(calc(-1 * var(--videos-shift, 0px)), 0, 0); } to { transform: translate3d(0, 0, 0); } }

/* Static rows (reduced motion / touch): manual horizontal scroll with snap */
.videos-row.is-static { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.videos-row.is-static .videos-marquee { padding-inline: 20px; }
.videos-row.is-static .videos-item { scroll-snap-align: start; scroll-snap-margin-left: 20px; scroll-margin-left: 20px; }

/* Card */
.videos-card {
  position: relative; display: block; width: 236px; height: 420px; border-radius: var(--radius-xl); overflow: hidden;
  background: var(--ink); color: var(--bg-white); text-align: left;
  isolation: isolate;
}
button.videos-card { cursor: pointer; transition: transform var(--med) var(--ease); }
button.videos-card:hover { transform: translateY(-2px); }
button.videos-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.videos-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.videos-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; padding: 18px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.03) 25%, rgba(0, 0, 0, 0.05) 45%, rgba(0, 0, 0, 0.82) 100%);
}
.videos-caption { height: 42px; font-weight: 500; font-size: 16px; line-height: 21px; letter-spacing: -0.02em; color: var(--bg-white); }
.videos-person { display: flex; align-items: center; gap: 10px; }
.videos-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; overflow: hidden;
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.67);
  background: rgba(255, 255, 255, 0.18); font-weight: 600; font-size: 12px; line-height: 1; color: var(--bg-white);
}
.videos-avatar img { width: 100%; height: 100%; object-fit: cover; }
.videos-person__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.videos-name { font-weight: 600; font-size: 14px; line-height: 19px; color: var(--bg-white); }
.videos-role { font-size: 12px; line-height: 16px; color: rgba(255, 255, 255, 0.8); }
.videos-play {
  position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  border: 2px solid var(--bg-white); background: rgba(0, 0, 0, 0.125);
  transition: background var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.videos-play svg { margin-left: 2px; }
button.videos-card:hover .videos-play { background: rgba(0, 0, 0, 0.3); transform: scale(1.06); }
.videos-card--static .videos-play { display: none; }

/* Dialog player */
.videos-dialog { inset: 0; margin: auto; padding: 0; border: 0; background: transparent; max-width: none; max-height: none; width: fit-content; height: fit-content; overflow: visible; }
.videos-dialog::backdrop { background: rgba(26, 24, 22, 0.82); }
.videos-dialog__frame { position: relative; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.videos-dialog__video {
  display: block; background: #000; border-radius: var(--radius-xl);
  max-height: calc(72dvh / var(--page-zoom)); max-width: min(calc(84vw / var(--page-zoom)), 960px); height: auto; width: auto;
  aspect-ratio: var(--videos-aspect, 9 / 16);
}
.videos-dialog__video.is-portrait { height: calc(72dvh / var(--page-zoom)); width: auto; }
.videos-dialog__video.is-landscape { width: min(calc(84vw / var(--page-zoom)), 960px); height: auto; }
.videos-dialog__caption { position: absolute; top: calc(100% + 12px); width: 100%; font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, 0.85); text-align: center; }
.videos-dialog__close {
  position: absolute; top: -12px; right: -12px; z-index: 1; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-white); color: var(--ink); box-shadow: 0 6px 16px rgba(26, 24, 22, 0.3);
}
.videos-dialog__close:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .videos-row.is-moving .videos-marquee { animation: none; }
  button.videos-card, .videos-play { transition: none; }
}

@media (max-width: 900px) {
  .videos { padding-block: 96px 112px; gap: 48px; }
  .videos-title { font-size: 34px; line-height: 40px; }
  .videos-dialog__close { top: 8px; right: 8px; }
}
/* Phone (Paper v4 node JIV-0 "10 · Video stories · v4", 390 wide, 24px gutters): the same two rows as desktop,
   scaled to 156×278 cards with a 12px gap. Row 1 starts at the gutter and bleeds off the right edge; row 2 is
   shifted 72px left (Paper K57-1) so it bleeds both sides. The marquee may run (fine pointer); on touch the rows
   are the usual static scroll rows. Cards lose the caption and avatar; the play ring is 40px. */
@media (max-width: 600px) {
  .videos { padding-block: 64px; gap: 32px; }

  .videos-header { align-items: flex-start; gap: 16px; text-align: left; }
  .videos-eyebrow { font-size: 12px; line-height: 18px; color: var(--ink-body-m); }
  .videos-title { max-width: none; line-height: 38px; letter-spacing: -0.025em; color: #242321; }

  .videos-wall { gap: 12px; }
  .videos-marquee, .videos-track { gap: 12px; }
  .videos-row.is-static { scrollbar-width: none; }
  .videos-row.is-static::-webkit-scrollbar { display: none; }
  .videos-row--left.is-static .videos-marquee { padding-inline: var(--gutter); }
  .videos-row--right.is-static .videos-marquee { margin-left: -48px; padding-inline: 0 var(--gutter); }
  .videos-row--left.is-static .videos-item { scroll-margin-left: var(--gutter); }
  .videos-row--right.is-static .videos-item { scroll-margin-left: 0; }
  /* Moving rows keep no gutter (cards slide through both edges); row 2 starts 48px off the left edge like Paper. */
  .videos-row--right.is-moving .videos-marquee { margin-left: -48px; }

  .videos-card { width: 156px; height: 278px; border-radius: 6px; }
  .videos-overlay { gap: 8px; padding: 14px; }
  .videos-caption, .videos-avatar { display: none; }
  .videos-person { gap: 8px; }
  .videos-name { font-size: 13px; line-height: 17px; }
  .videos-role { font-size: 12px; line-height: 15px; }
  .videos-play { width: 40px; height: 40px; margin: -20px 0 0 -20px; background: rgba(0, 0, 0, 0.25); }

  /* The section is a flex column with a 32px gap (Paper JIV-0), so the CTA sits straight under the rows. */
  .videos .section-cta { padding-top: 0; padding-inline: var(--gutter); }

  .videos-dialog__video { max-width: calc(88vw / var(--page-zoom)); }
}

/* 11 · Founder letter · 51A · Paper node HNY-0 (resync 16 Sept 2026: 180px section padding, 110/96/32 rhythm, highlights, Section CTA) */
.founder { padding-block: 180px; background: #F1F0EC; overflow: clip; }
.founder-inner { position: relative; display: flex; justify-content: center; width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--gutter); }

/* Letter sheet */
.founder-sheet {
  position: relative; display: flex; flex-direction: column; gap: 110px;
  width: 100%; max-width: 860px; padding: 76px 110px 72px; border-radius: 3px;
  background: var(--bg-white);
  box-shadow: 0 14px 40px rgba(37, 36, 34, 0.05), 0 2px 6px rgba(37, 36, 34, 0.03);
}
.founder-head { display: flex; flex-direction: column; gap: 24px; }
.founder-label { font-family: var(--font-mono); font-size: 12px; line-height: 18px; text-transform: uppercase; color: var(--ink-3); }
.founder-title { font-weight: 500; font-size: 46px; line-height: 50px; letter-spacing: -0.055em; color: var(--ink); }

.founder-letter { display: flex; flex-direction: column; gap: 96px; width: 100%; max-width: 640px; }
.founder-group { display: flex; flex-direction: column; gap: 32px; }
.founder-lead { font-weight: 600; font-size: 20px; line-height: 34px; color: var(--ink); }
.founder-p { font-size: 18px; line-height: 34px; color: var(--ink); }
.founder-hl { background: #FFE76A; color: inherit; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.founder-sign { padding-top: 12px; font-size: 42px; line-height: 54px; color: var(--ink); }

/* Photo prints: absolutely placed on desktop, relative to the sheet */
.founder-print {
  position: absolute; z-index: 1; display: flex; flex-direction: column; gap: 12px;
  padding: 8px 8px 13px; background: var(--bg-white);
  box-shadow: 0 8px 18px rgba(37, 36, 34, 0.1);
  transform-origin: top left;
}
.founder-print__img { display: block; width: 100%; object-fit: cover; object-position: center; }
.founder-print__caption { text-align: center; font-family: var(--font-hand); font-size: 23px; line-height: 27px; color: #55524C; }

.founder-print--agency { left: 790px; top: 321px; width: 260px; transform: rotate(5deg); }
.founder-print--agency .founder-print__img { height: 350px; }
.founder-print--agent { left: -225px; top: 929px; width: 266px; transform: rotate(-6deg); }
.founder-print--agent .founder-print__img { height: 350px; }
.founder-print--hudson { left: 790px; top: 2002px; width: 330px; transform: rotate(2deg); }
.founder-print--hudson .founder-print__img { height: 392.5px; }

/* Below 1180px the prints no longer fit beside the sheet: flow them inside the letter */
@media (max-width: 1180px) {
  .founder-print { position: static; align-self: center; margin-block: 8px; }
  .founder-print--agency { transform: rotate(2deg); }
  .founder-print--agent { transform: rotate(-2deg); }
  .founder-print--hudson { transform: rotate(1.5deg); }
}
@media (max-width: 900px) {
  .founder { padding-block: 100px; }
  .founder-sheet { padding: 56px 48px 52px; gap: 64px; }
  .founder-title { font-size: 34px; line-height: 40px; letter-spacing: -0.04em; }
  .founder-letter { gap: 64px; }
  .founder-group { gap: 24px; }
}

/* The phone-only KEEP READING control never shows above 600px. */
.founder-more { display: none; }

/* Phone (Paper v4 node JVM-0, 390 wide / 342 column). White ground with a 1px top rule; the letter
   sheet loses its mat: full-column text, photo prints flow inline unrotated at full width. The letter
   is collapsed after "I started helping friends…" (Paper KL7-1) until KEEP READING is tapped. */
@media (max-width: 600px) {
  .founder { padding-block: 64px; background: var(--bg-white); border-top: 1px solid #E7E2DA; }
  .founder-inner { padding-inline: var(--gutter); }
  .founder-sheet { max-width: none; padding: 0; gap: 32px; background: none; box-shadow: none; }

  .founder-head { gap: 24px; }
  .founder-label { font-size: 12px; line-height: 18px; }
  .founder-title { font-size: 32px; line-height: 37px; letter-spacing: -0.03em; }

  .founder-letter { position: relative; max-width: none; gap: 32px; }
  /* Paper runs the "first agent" print after the "I started helping friends…" paragraph and the
     Hudson print after the Hudson paragraphs; the source order suits the desktop absolute placement,
     so reorder the flowed column here only. Source children: 1 group, 2 agency print, 3 group,
     4 agent print, 5 group, 6 group, 7 Hudson print, 8 group, 9 group. */
  .founder-letter > :nth-child(1) { order: 1; }
  .founder-letter > :nth-child(2) { order: 2; }
  .founder-letter > :nth-child(3) { order: 3; }
  .founder-letter > :nth-child(5) { order: 4; }
  .founder-letter > :nth-child(4) { order: 5; }
  .founder-letter > :nth-child(6) { order: 6; }
  .founder-letter > :nth-child(8) { order: 7; }
  .founder-letter > :nth-child(7) { order: 8; }
  .founder-letter > :nth-child(9) { order: 9; }
  .founder-group { gap: 24px; }
  .founder-lead { font-size: 17px; line-height: 26px; }
  .founder-p { font-size: 17px; line-height: 26px; color: #3D3935; }
  .founder-hl { padding: 0 4px; }
  .founder-sign { padding-top: 12px; font-size: 32px; line-height: 36px; }

  .founder-print { width: 100%; margin-block: 0; padding: 8px 8px 16px; gap: 16px; box-shadow: 0 8px 20px rgba(37, 36, 34, 0.08); }
  .founder-print--agency, .founder-print--agent, .founder-print--hudson { width: 100%; transform: none; }
  .founder-print--agency .founder-print__img,
  .founder-print--agent .founder-print__img,
  .founder-print--hudson .founder-print__img { height: 300px; aspect-ratio: auto; }
  .founder-print__caption { font-size: 22px; line-height: 26px; }

  /* Collapsed letter (class set by js/sections/11-founder.js; with JS off the whole letter shows):
     everything after the "I started helping friends…" group is hidden, a 240px fade to white sits
     over the end of the visible text, and the KEEP READING control follows 16px below. */
  .founder.is-collapsed .founder-letter > :nth-child(n + 6),
  .founder.is-collapsed .founder-print--agent { display: none; }
  .founder.is-collapsed .founder-letter::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 240px; pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 60%, #FFFFFF 100%);
  }
  .founder.is-collapsed .founder-more { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: -16px; }
  .founder-more__in {
    display: inline-flex; align-items: center; gap: 6px; padding-bottom: 2px;
    border-bottom: 1px solid var(--blue);
    font-family: var(--font-mono); font-size: 12px; line-height: 18px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--blue);
  }
  .founder-more__in svg { flex: 0 0 auto; }

  .founder .section-cta { display: none; }
}

/* 12 · Everything included · 52B · Paper node I0J-0 (file-card grid + launch-only extras panel) */
.included { padding-block: 180px; background: #F1F0EC; }
.included > .container { display: flex; flex-direction: column; gap: 60px; }

/* Heading */
.included-head { display: flex; flex-direction: column; gap: 24px; }
.included-eyebrow { font-family: var(--font-mono); font-size: 12px; line-height: 18px; text-transform: uppercase; color: var(--ink-3); }
.included-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 64px; }
.included-title { width: 724px; max-width: 100%; flex: 0 1 auto; font-weight: 500; font-size: 48px; line-height: 53px; letter-spacing: -0.045em; color: var(--ink); }
.included-lede { width: 340px; flex: 0 0 auto; font-size: 17px; line-height: 27px; color: var(--ink-3); }

/* Core offer: seven file cards (row 1: wide + 2, row 2: 4) */
.included-core { display: flex; flex-direction: column; gap: 32px; }
.included-kicker { font-family: var(--font-mono); font-size: 12px; line-height: 20px; text-transform: uppercase; color: var(--ink-3); }
.included-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.included-card {
  position: relative; display: flex; flex-direction: column; gap: 16px; min-height: 300px; padding: 24px;
  border-radius: 4px; background: var(--bg-white); border: 1px solid #E5E2DC;
  box-shadow: 0 9px 20px rgba(37, 36, 34, 0.047), 0 2px 4px rgba(37, 36, 34, 0.02);
}
.included-card--wide { grid-column: span 2; }
.included-card::before { content: ''; position: absolute; left: 24px; top: -11px; width: 54px; height: 12px; border-radius: 3px 3px 0 0; background: var(--included-tab, var(--blue)); }
.included-card--blue { --included-tab: var(--blue); }
.included-card--yellow { --included-tab: var(--yellow); }
.included-card--green { --included-tab: var(--green); }
.included-card-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 1px solid #EEECE8; }
.included-idx { font-family: var(--font-mono); font-size: 11px; line-height: 20px; color: var(--ink-3); }
.included-status { font-family: var(--font-mono); font-size: 14px; line-height: 20px; text-transform: uppercase; color: var(--green); }
.included-name { font-weight: 500; font-size: 22px; line-height: 28px; letter-spacing: -0.03em; color: var(--ink); }
.included-name--lg { font-size: 26px; line-height: 32px; }
.included-body { font-size: 15px; line-height: 23px; color: var(--ink-3); }
.included-body--lg { font-size: 17px; line-height: 27px; }
.included-meta { display: flex; gap: 24px; padding-top: 8px; font-family: var(--font-mono); font-size: 14px; line-height: 22px; color: var(--blue); }

/* Launch-only extras: three yellow file cards with a star sticker */
.included-bonus { display: flex; flex-direction: column; gap: 32px; }
.included-bonus-head { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.included-bonus-kicker { font-family: var(--font-mono); font-size: 12px; line-height: 18px; letter-spacing: 0.025em; text-transform: uppercase; color: var(--ink); }
.included-bonus-note { font-size: 14px; line-height: 22px; color: var(--ink-3); }
.included-bonus-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; padding-top: 12px; }
.included-bonus-card {
  position: relative; display: flex; flex-direction: column; gap: 14px; min-height: 280px; padding: 26px;
  border-radius: 4px; background: #FFF1BC; border: 1px solid #E2C979;
  box-shadow: 0 10px 22px rgba(117, 86, 25, 0.075), 0 2px 4px rgba(117, 86, 25, 0.04);
}
.included-bonus-card::before { content: ''; position: absolute; left: 28px; top: -11px; width: 54px; height: 12px; border-radius: 3px 3px 0 0; background: #DAAE35; }
.included-bonus-tag { align-self: flex-start; padding: 5px 8px; border: 1px solid #B48B31; rotate: -3deg; font-family: var(--font-mono); font-size: 11px; line-height: 18px; text-transform: uppercase; color: #8B661C; }
.included-bonus-title { font-weight: 500; font-size: 21px; line-height: 28px; letter-spacing: -0.03em; color: #3E321A; }
.included-bonus-body { font-size: 15px; line-height: 24px; color: #72603D; }
.included-bonus-fine { font-size: 13px; line-height: 21px; color: #72603D; }
.included-bonus-star { position: absolute; right: 0; top: 0; translate: -20px -20px; rotate: 12deg; transform-origin: 0 0; filter: drop-shadow(0 3px 3px rgba(112, 81, 28, 0.19)); pointer-events: none; }

@media (max-width: 900px) {
  .included { padding-block: 100px; }
  .included > .container { gap: 48px; }
  .included-head-row { flex-direction: column; align-items: flex-start; gap: 20px; }
  .included-title { width: auto; font-size: 34px; line-height: 40px; letter-spacing: -0.03em; }
  .included-title br, .included-name br, .included-bonus-body br { display: none; }
  .included-lede { width: auto; }
  .included-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .included-card { min-height: 0; }
  .included-bonus-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .included-bonus-grid { grid-template-columns: 1fr; gap: 28px; }
  .included-bonus-card { min-height: 0; padding-right: 72px; }
}

/* Phone-only copy variants (Paper v4): hidden above 600px, swapped in below. */
.included-body--phone, .included-bonus-body--phone { display: none; }

/* Phone (Paper v4 node JVN-0 · artboard JFE-0, 390 wide / 342 column). Card grid: card 01 full width, 02–07 in two
   columns, coloured file tabs, trimmed copy; launch-only extras as yellow cards with a star (KC2-1, K0F-0). */
@media (max-width: 600px) {
  .included { padding-block: 64px; background: #F0EDE7; }
  .included > .container { gap: 20px; }

  .included-head { gap: 20px; }
  .included-eyebrow { font-size: 12px; line-height: 18px; letter-spacing: 0.04em; color: #77736D; }
  .included-eyebrow .eyebrow-num { display: none; }
  .included-head-row { gap: 0; }
  .included-title { font-size: 32px; line-height: 37px; letter-spacing: -0.03em; color: #1A1816; }
  .included-lede { display: none; }

  .included-core { gap: 0; }
  .included-kicker { display: none; }
  .included-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; padding-top: 8px; }
  .included-card--wide { grid-column: 1 / -1; }
  .included-card {
    min-height: 0; gap: 10px; padding: 16px; border-radius: 4px;
    background: #FFFFFF; border: 1px solid #E5E2DC;
    box-shadow: 0 9px 20px rgba(37, 36, 34, 0.047), 0 2px 4px rgba(37, 36, 34, 0.02);
  }
  .included-card--wide { gap: 12px; padding: 20px; }
  .included-card::before { left: 16px; top: -9px; width: 44px; height: 12px; }
  .included-card--wide::before { left: 20px; width: 54px; }
  .included-card--blue { --included-tab: #4040FF; }
  .included-card--yellow { --included-tab: #E9C93C; }
  .included-card--green { --included-tab: #2E8B57; }
  .included-card-head { justify-content: flex-end; padding-bottom: 8px; border-bottom: 1px solid #E5E2DC; }
  .included-card--wide .included-card-head { padding-bottom: 10px; }
  .included-idx { display: none; }
  .included-status { font-size: 12px; line-height: 18px; letter-spacing: 0.04em; color: #137E57; }
  .included-name { font-size: 17px; line-height: 22px; letter-spacing: -0.02em; color: #1A1816; }
  .included-name--lg { font-size: 20px; line-height: 26px; }
  .included-body--desk { display: none; }
  .included-body--phone { display: block; }
  .included-body, .included-body--lg { font-size: 14px; line-height: 20px; color: #635F59; }
  .included-card--wide .included-body { font-size: 15px; line-height: 22px; }
  .included-meta { gap: 16px; padding-top: 0; font-size: 12px; line-height: 18px; letter-spacing: 0.04em; color: #4040FF; }

  .included-bonus { gap: 28px; padding-top: 24px; }
  .included-bonus-head { gap: 0; padding-bottom: 4px; }
  .included-bonus-kicker { font-size: 12px; line-height: 18px; letter-spacing: 0.04em; color: #4A4640; }
  .included-bonus-note { display: none; }
  .included-bonus-grid { grid-template-columns: 1fr; gap: 28px; padding-top: 0; }
  .included-bonus-card {
    min-height: 0; gap: 6px; padding: 20px 64px 16px 18px; border-radius: 4px;
    background: #FFF3B8; border: 1px solid #F0DD86; box-shadow: none;
  }
  .included-bonus-card::before { left: 18px; top: -9px; width: 44px; height: 12px; background: #E9C93C; }
  .included-bonus-tag { align-self: flex-start; padding: 0; border: 0; rotate: none; font-size: 12px; line-height: 18px; letter-spacing: 0.04em; color: #7A6A1E; }
  .included-bonus-title { font-size: 18px; line-height: 24px; letter-spacing: -0.02em; color: #1A1816; }
  .included-bonus-body { font-size: 15px; line-height: 22px; color: #4A4640; }
  .included-bonus-body--desk { display: none; }
  .included-bonus-body--phone { display: block; }
  .included-bonus-fine { display: none; }
  .included-bonus-star {
    display: block; right: 10px; top: -10px; width: 48px; height: 48px;
    translate: -20px -20px; rotate: 12deg; transform-origin: 0 0;
    filter: drop-shadow(0 3px 3px rgba(112, 81, 28, 0.19));
  }
}

/* 13 · Guarantee · 53A · Paper node I3B-0 (signed warranty certificate + Section CTA) */
.guarantee { padding-block: 180px; background: #F1F0EC; }
.guarantee-inner { display: flex; flex-direction: column; align-items: center; }

/* Certificate sheet: outer white mat, inner ruled border, tilted -1deg */
.guarantee-cert {
  width: 100%; max-width: 960px; padding: 24px; border-radius: 4px;
  background: var(--bg-white); border: 1px solid #E7E3DC;
  box-shadow: 0 18px 48px rgba(37, 36, 34, 0.063), 0 3px 8px rgba(37, 36, 34, 0.024);
  rotate: -1deg;
}
.guarantee-cert-inner { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 38px 46px 28px; border: 1px solid #E5E1D9; text-align: center; }
.guarantee-cert-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; padding-bottom: 24px; border-bottom: 1px solid #E8E5DF; }
.guarantee-brand { font-weight: 500; font-size: 14px; line-height: 20px; color: var(--ink); }
.guarantee-promise { font-family: var(--font-mono); font-size: 11px; line-height: 18px; letter-spacing: 0.035em; text-transform: uppercase; color: var(--ink-3); }
.guarantee-label { font-family: var(--font-mono); font-size: 12px; line-height: 20px; letter-spacing: 0.025em; text-transform: uppercase; color: var(--ink-3); }
.guarantee-title { max-width: 780px; font-weight: 500; font-size: 42px; line-height: 49px; letter-spacing: -0.045em; color: var(--ink); }
.guarantee-body { max-width: 610px; font-size: 18px; line-height: 29px; color: var(--ink-3); }

/* Signature and wax seal */
.guarantee-sign { display: flex; justify-content: space-between; align-items: center; gap: 24px; width: 100%; padding-top: 8px; text-align: left; }
.guarantee-sign-block { display: flex; flex-direction: column; gap: 6px; }
.guarantee-sign-name { font-size: 46px; line-height: 50px; color: var(--ink); }
.guarantee-sign-role { font-family: var(--font-mono); font-size: 11px; line-height: 18px; text-transform: uppercase; color: var(--ink-3); }
.guarantee-seal { flex: 0 0 auto; rotate: -8deg; filter: drop-shadow(0 5px 4px rgba(63, 25, 41, 0.17)); }

@media (max-width: 900px) {
  .guarantee { padding-block: 100px; }
  .guarantee-cert { padding: 16px; }
  .guarantee-cert-inner { padding: 28px 24px 20px; }
  .guarantee-title { font-size: 32px; line-height: 38px; letter-spacing: -0.03em; }
  .guarantee-body { font-size: 17px; line-height: 27px; }
  .guarantee-seal { width: 120px; height: 120px; }
}

/* Phone (Paper v4 node JVO-0 / certificate KBW-1 · artboard JFE-0, 390 wide / 342 column). Portrait certificate:
   white mat, inner rule, -1deg tilt, centred column, signature + seal row. No section CTA on phone. */
@media (max-width: 600px) {
  .guarantee { padding-block: 64px; background: #FFFDFA; }
  .guarantee-cert {
    width: 100%; max-width: none; padding: 12px; border-radius: 4px; rotate: -1deg;
    background: #FFFFFF; border: 1px solid #E7E3DC;
    box-shadow: 0 18px 48px rgba(37, 36, 34, 0.063), 0 3px 8px rgba(37, 36, 34, 0.024);
  }
  .guarantee-cert-inner { gap: 22px; padding: 24px 18px; border: 1px solid #E5E1D9; }
  .guarantee-cert-head { flex-direction: row; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid #E5E1D9; }
  .guarantee-brand { font-size: 14px; line-height: 20px; color: #1A1816; }
  .guarantee-promise { font-size: 12px; line-height: 18px; letter-spacing: 0.04em; color: #77736D; }
  .guarantee-label { font-size: 12px; line-height: 20px; letter-spacing: 0.025em; color: #55524C; }
  .guarantee-title br { display: revert; }
  .guarantee-body br { display: none; }
  .guarantee-title { max-width: none; font-size: 26px; line-height: 32px; letter-spacing: -0.025em; color: #252422; }
  .guarantee-body { max-width: none; font-size: 16px; line-height: 27px; color: #55524C; }

  .guarantee-sign { padding-top: 16px; gap: 16px; }
  .guarantee-sign-block { flex: 1 1 0; min-width: 0; gap: 6px; }
  .guarantee-sign-name { font-size: 32px; line-height: 36px; color: #252422; }
  .guarantee-sign-role { font-size: 12px; line-height: 18px; color: #77736E; }
  .guarantee-seal { width: 110px; height: 110px; rotate: -8deg; filter: drop-shadow(0 5px 4px rgba(63, 25, 41, 0.17)); }

  .guarantee .section-cta { display: none; }
}

/* 14 · Pricing · 55C (#pricing) · Paper node IHO-0. Also styles the order summary on checkout.html (.ck-summary .order-card). */
.order { padding-block: 180px; background: var(--bg); }
.order-eyebrow { padding-bottom: 64px; font-family: var(--font-mono); font-size: 12px; line-height: 20px; text-transform: uppercase; color: var(--ink-3); }
.order-grid { display: flex; align-items: flex-start; gap: 100px; }

/* Left: headline, what is included */
.order-intro { display: flex; flex-direction: column; gap: 36px; width: 500px; flex: 0 0 500px; }
.order-title { font-weight: 500; font-size: 56px; line-height: 62px; letter-spacing: -0.045em; color: var(--ink); }
.order-lede { max-width: 420px; font-size: 19px; line-height: 31px; color: var(--ink-3); }
.order-offer { display: flex; flex-direction: column; gap: 26px; }
.order-core { display: flex; flex-direction: column; gap: 10px; }
.order-kicker { font-family: var(--font-mono); font-size: 12px; line-height: 20px; text-transform: uppercase; color: var(--ink-3); }
.order-line { font-size: 16px; line-height: 25px; color: var(--ink); }
.order-line--strong { font-weight: 500; }
.order-sub { font-size: 14px; line-height: 22px; color: var(--ink-3); }
.order-tag { align-self: flex-start; padding: 2px 6px; background: #FFE76A; font-family: var(--font-mono); font-size: 12px; line-height: 20px; text-transform: uppercase; color: var(--ink); }
.order-guarantee { max-width: 370px; font-size: 14px; line-height: 23px; color: var(--ink-3); }

/* Right: price, payment choices, CTA, fine print */
.order-card { display: flex; flex-direction: column; gap: 30px; width: 500px; flex: 0 0 500px; }
.order-grid .order-card { padding-left: 60px; border-left: 1px solid #E4E1DA; }
.order-card-title { font-weight: 500; font-size: 22px; line-height: 28px; letter-spacing: -0.02em; color: var(--ink); }
.order-price-block { display: flex; flex-direction: column; gap: 14px; }
.order-price { display: flex; align-items: baseline; gap: 20px; }
.order-price-now { font-weight: 500; font-size: 80px; line-height: 88px; letter-spacing: -0.06em; color: var(--ink); }
.order-price-was { font-size: 21px; line-height: 28px; color: #8B8780; text-decoration: line-through; text-decoration-thickness: 1px; }
.order-save { font-size: 15px; line-height: 24px; color: var(--ink-3); }
.order-save mark { padding: 1px 5px; background: #FFE76A; font-weight: 500; color: var(--ink); }

.order-plans { display: flex; flex-direction: column; border-top: 1px solid #E4E1DA; }
.order-plan-row { display: flex; align-items: center; gap: 14px; padding-block: 18px; border-bottom: 1px solid #E4E1DA; }
.order-radio { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid #ABA69E; }
.is-selected .order-radio { border-color: var(--blue); }
.is-selected .order-radio::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--blue); }
.order-plan-main { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
.order-plan-name { font-size: 16px; line-height: 24px; color: var(--ink); }
.is-selected .order-plan-name { font-weight: 500; }
.order-plan-sub { font-size: 13px; line-height: 20px; color: var(--ink-3); }
.order-plan-amt { flex: 0 0 110px; text-align: right; font-size: 13px; line-height: 20px; color: var(--ink-3); white-space: nowrap; }
.order-plan-amt--lg { font-size: 18px; line-height: 26px; color: var(--ink); }
/* Weekly plan (Charlie, 26 Sept 2026): one plain line, 4 x $547 during the limited-time price, 6 x $547 after. */
.order-plan { display: flex; flex-direction: column; padding-block: 18px; border-top: 1px solid #E4E1DA; border-bottom: 1px solid #E4E1DA; }
.order-plan-sum { font-size: 17px; line-height: 26px; color: var(--ink-3); }
.order-plan-sum strong { font-weight: 500; color: var(--ink); }
.order-plan-sum s { margin-left: 6px; color: #8B8780; text-decoration-thickness: 1px; }

.order-cta { padding-top: 0; gap: 16px; }
.order-fine { font-size: 13px; line-height: 21px; color: var(--ink-3); }

/* Checkout-only helper (checkout.html order summary) */
.order-micro { display: flex; flex-direction: column; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10px; line-height: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-4); text-align: center; }

@media (max-width: 900px) {
  .order { padding-block: 100px; }
  .order-eyebrow { padding-bottom: 40px; }
  .order-grid { flex-direction: column; gap: 48px; }
  .order-intro { width: auto; flex: none; gap: 28px; }
  .order-title { font-size: 40px; line-height: 46px; letter-spacing: -0.04em; }
  .order-title br, .order-line br, .order-guarantee br { display: none; }
  .order-card { width: 100%; flex: none; }
  .order-grid .order-card { padding-left: 0; padding-top: 40px; border-left: 0; border-top: 1px solid #E4E1DA; }
  .order-price-now { font-size: 64px; line-height: 70px; }
}
/* Phone-only receipt-card inclusions (Paper v4): hidden above 600px. */
.order-checks { display: none; }

/* Phone (Paper v4 node JWC-0 / receipt card K0W-0 · artboard JFE-0, 390 wide / 342 column). Eyebrow, h2, body,
   then a white receipt card: price group, weekly plan slots, three check rows, CTA, proof. The desktop
   "core offer" column, the guarantee line and the fine print are hidden. Rules are scoped to .order so the
   checkout.html order summary (which shares these class names) is untouched. */
@media (max-width: 600px) {
  .order { padding-block: 64px; background: #F0EDE7; }
  .order-eyebrow { padding-bottom: 20px; font-size: 12px; line-height: 18px; letter-spacing: 0.04em; color: #77736D; }
  .order-eyebrow .eyebrow-num { display: none; }
  .order-grid { gap: 20px; }
  .order-intro { gap: 20px; }
  .order-title { font-size: 32px; line-height: 37px; letter-spacing: -0.03em; color: #1A1816; }
  .order-lede { max-width: none; font-size: 17px; line-height: 26px; color: #3D3935; }
  .order-offer, .order-guarantee { display: none; }

  .order .order-card { gap: 20px; position: relative; top: 8px; }
  .order-grid .order-card {
    padding: 24px 20px; border-radius: 12px;
    background: #FFFFFF; border: 1px solid #E4E1DA;
    box-shadow: 0 8px 24px rgba(26, 24, 22, 0.063);
  }
  .order .order-price-block { gap: 6px; }
  .order .order-kicker { font-size: 12px; line-height: 18px; letter-spacing: 0.04em; color: #77736D; }
  .order .order-price { gap: 12px; }
  .order .order-price-now { font-size: 56px; line-height: 60px; letter-spacing: -0.05em; color: #1A1816; }
  .order .order-price-was { font-size: 18px; line-height: 24px; color: #8B8780; }
  .order .order-save { font-size: 15px; line-height: 22px; color: #3D3935; }
  .order .order-save mark { padding-inline: 4px; }
  .order .order-plan { gap: 10px; padding-block: 16px 0; border-bottom: 0; }
  .order .order-plan-sum { font-size: 13px; line-height: 20px; color: #635F59; }
  .order .order-plan-sum strong { color: #1A1816; }

  .order-checks { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid #E4E1DA; }
  .order-checks li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 22px; color: #1A1816; }
  .order-checks li::before {
    content: ''; flex: 0 0 18px; width: 18px; height: 18px; margin-top: 2px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='8.5' fill='%23EEF0FF' stroke='%234040FF'/%3E%3Cpath d='M5.5 9.2l2.3 2.3 4.7-4.8' fill='none' stroke='%234040FF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 18px 18px;
  }

  .order .order-cta { gap: 14px; padding-top: 0; }
  .order .section-cta-proof { gap: 10px; font-size: 14px; line-height: 20px; color: #3D3935; }
  .order .order-fine { display: none; }
}

/* 15 · FAQ · Paper node A24-0 (single centred 840px column, no CTA) */
.faq { padding-block: 180px; background: var(--bg); }
.faq-inner { display: flex; flex-direction: column; align-items: center; gap: 56px; max-width: calc(840px + 2 * var(--gutter)); }
.faq-intro { display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 700px; text-align: center; }
.faq-title { color: var(--ink); }
.faq-intro-text { font-size: 16px; line-height: 26px; color: var(--ink-3); }

.faq-list { width: 100%; border-top: 1px solid var(--ink); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { font: inherit; }
.faq-btn { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; padding: 24px 0; text-align: left; font-weight: 500; font-size: 20px; line-height: 26px; letter-spacing: -0.01em; color: var(--ink); }
.faq-btn[aria-expanded="true"] { padding: 26px 0 14px; }
.faq-icon { flex: 0 0 18px; }
.faq-icon path { stroke: var(--ink); stroke-width: 1.4; fill: none; }
.faq-btn[aria-expanded="true"] .faq-icon-v { display: none; }
.faq-a { max-width: 740px; padding: 0 0 26px; font-size: 16px; line-height: 26px; color: var(--ink-3); }
.faq-a[hidden] { display: none; }

@media (max-width: 900px) {
  .faq { padding-block: 100px; }
  .faq-inner { gap: 40px; }
  .faq-title { font-size: 34px; line-height: 40px; }
  .faq-a { max-width: none; }
}
/* Phone-only eyebrow without the section number (Paper v4): hidden above 600px. */
.faq-eyebrow--phone { display: none; }

/* Phone (Paper v4 node JWD-0 · artboard JFE-0): bone ground, "FAQ" eyebrow, 64px padding, 28/32px rows */
@media (max-width: 600px) {
  .faq { padding-block: 64px; background: #FFFDFA; }
  .faq-inner { align-items: stretch; gap: 48px; }
  .faq-intro { align-items: flex-start; max-width: none; gap: 24px; text-align: left; }
  .faq-eyebrow { line-height: 14px; color: #77736D; }
  .faq-eyebrow--desk { display: none; }
  .faq-eyebrow--phone { display: inline-flex; }
  .faq-title { color: #1A1816; }
  .faq-intro-text { font-size: 16px; line-height: 27px; color: #55524C; }
  .faq-list { border-top-color: #1A1816; }
  .faq-item { border-bottom-color: #E7E5E4; }
  .faq-btn { gap: 20px; padding: 28px 0; font-size: 17px; line-height: 26px; letter-spacing: -0.01em; color: #1A1816; }
  .faq-btn[aria-expanded="true"] { gap: 18px; padding: 32px 0 0; }
  .faq-icon { flex-basis: 20px; width: 20px; height: 20px; }
  .faq-a { padding: 24px 0 32px; font-size: 16px; line-height: 27px; color: #55524C; }
}

/* 16 · Final close · Paper node A3L-0 (CTA + member proof IBJ-0 + trust line) */
.close { background: var(--bg); padding-block: 180px; }
.close-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.close-eyebrow { margin-bottom: 32px; }
.close-title { font-weight: 500; font-size: 52px; line-height: 58px; letter-spacing: -0.03em; color: var(--ink); padding-bottom: 32px; }
.close-title-line { display: block; }
.close-body { display: flex; flex-direction: column; gap: 14px; max-width: 680px; padding-bottom: 48px; font-size: 18px; line-height: 29px; }
.close-body-soft { color: var(--ink-3); }
.close-body-strong { color: var(--ink); }
.close-cta { padding-top: 0; }
.close-trust { padding-top: 24px; color: #706C67; }

@media (max-width: 900px) {
  .close { padding-block: 100px; }
  .close-title { font-size: 34px; line-height: 40px; }
}
/* Phone-only eyebrow without the section number (Paper v4): hidden above 600px. */
.close-eyebrow--phone { display: none; }

/* Phone (Paper v4 node JXN-0 · artboard JFE-0): bone ground, 1px #E7E5E4 top rule, "ONE LAST THING" eyebrow,
   centred title with the blue second line, #3D3935 paragraphs, full-width CTA + proof, trust line. */
@media (max-width: 600px) {
  .close { padding-block: 64px; background: #FFFDFA; border-top-color: #E7E5E4; }
  .close-eyebrow { margin-bottom: 32px; line-height: 14px; color: #77736D; }
  .close-eyebrow--desk { display: none; }
  .close-eyebrow--phone { display: inline-flex; }
  .close-title { font-size: 32px; line-height: 38px; letter-spacing: -0.025em; color: #1A1816; padding-bottom: 40px; }
  .close-title-line { margin-top: 16px; }
  .close-body { gap: 28px; max-width: none; padding-bottom: 48px; font-size: 16px; line-height: 27px; }
  .close-body-soft, .close-body-strong { color: #3D3935; }
  .close-cta { gap: 20px; padding-top: 0; }
  .close .section-cta-proof { gap: 12px; font-size: 14px; line-height: 22px; color: #706C67; }
  .close-trust {
    padding-top: 32px; padding-inline: 0;
    font-family: var(--font-body); font-size: 14px; line-height: 24px;
    letter-spacing: 0; text-transform: none; color: #55524C;
  }
}

/* 17 · Footer */
.footer { background: var(--bg); padding-top: 120px; }
.footer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 80px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.footer-brand { display: flex; flex-direction: column; gap: 16px; width: 340px; flex: 0 1 340px; }
.footer-name { display: flex; align-items: center; gap: 9px; font-weight: 500; font-size: 15px; line-height: 18px; letter-spacing: -0.01em; color: var(--ink); }
.footer-mark { display: inline-block; flex: 0 0 11px; width: 11px; height: 11px; border-radius: 3px; background: var(--blue); }
.footer-blurb { max-width: 300px; font-size: 14px; line-height: 23px; color: var(--ink-3); }
.footer-cols { display: flex; align-items: flex-start; gap: 70px; }
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col-title { font-family: var(--font-mono); font-weight: 400; font-size: 10px; line-height: 12px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-4); }
.footer-links { display: flex; flex-direction: column; gap: 12px; }
.footer-links a, .footer-links .footer-email { font-size: 14px; line-height: 18px; color: var(--ink-3); }
.footer-links a:hover { color: var(--ink); }
.footer-legal { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 20px; font-family: var(--font-mono); font-size: 10px; line-height: 12px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-4); }
.footer-legal-links { display: flex; align-items: center; gap: 26px; }
.footer-legal-links a:hover { color: var(--ink); }
.footer-ghost { display: flex; justify-content: center; align-items: flex-start; width: 100%; height: 118px; padding-top: 44px; overflow: clip; }
.footer-ghost-text { font-family: var(--font-pixel); font-weight: 700; font-size: 200px; line-height: 150px; white-space: nowrap; color: rgba(26, 24, 22, 0.12); }

@media (max-width: 900px) {
  .footer { padding-top: 80px; }
  .footer-top { flex-direction: column; gap: 36px; }
  .footer-brand { width: auto; flex: none; }
  .footer-cols { gap: 40px; flex-wrap: wrap; }
  .footer-links a, .footer-links .footer-email { display: inline-block; padding: 4px 0; }
  .footer-ghost-text { font-size: 140px; line-height: 110px; }
}
/* Phone (Paper v4 node JY7-0 · artboard JFE-0): bone ground with a 1px #E4E1DA top rule, 80px top padding (Paper),
   brand block, two link columns + full-width contact column, legal line, ghost wordmark. */
@media (max-width: 600px) {
  .footer { padding-top: 80px; background: #FFFDFA; border-top: 1px solid #E4E1DA; }
  .footer-top { gap: 48px; padding-bottom: 48px; border-bottom-color: #E7E5E4; }
  .footer-brand { gap: 16px; }
  .footer-name { font-size: 16px; line-height: 24px; letter-spacing: -0.01em; color: #1A1816; }
  .footer-blurb { max-width: none; font-size: 16px; line-height: 27px; color: #55524C; }
  .footer-cols { flex-direction: row; flex-wrap: wrap; gap: 32px; width: 100%; }
  .footer-col { gap: 16px; width: calc(50% - 16px); min-width: 0; }
  .footer-col:last-child { width: 100%; }
  .footer-col-title { font-size: 12px; line-height: 18px; letter-spacing: 0.02em; color: #78716C; }
  .footer-links { gap: 12px; }
  .footer-links a, .footer-links .footer-email { padding: 4px 0; font-size: 16px; line-height: 24px; color: #78716C; }
  .footer-legal { flex-direction: column; align-items: flex-start; gap: 24px; padding-top: 32px; font-size: 12px; line-height: 18px; letter-spacing: 0.02em; color: #78716C; }
  .footer-legal-links { flex-wrap: wrap; gap: 14px 26px; }
  .footer-ghost { height: auto; padding-top: 48px; padding-bottom: 24px; }
  .footer-ghost-text { font-size: 60px; line-height: 60px; color: rgba(26, 24, 22, 0.12); }
}

.footer-legal-links a { font: 400 13px/20px var(--font-body); text-transform: none; letter-spacing: normal; }