/* Layout fixes on top of home-20260923.css. Kept in a separate file on
   purpose: regenerating the design CSS will not wipe these.
   1. The "I'm Chris Serra" grid kept the 12-column base with a 100px gap, so
      the gaps alone exceeded the container and the section pushed the page
      sideways at every width from 1024 up (1697px wide at 1440).
   2. The scoreboard table rendered 570px wide inside a 343px phone screen.
      The body clips horizontal overflow, so the last columns were unreachable
      rather than scrollable. */
body .person-section .person { grid-template-columns: 0.8fr 1.2fr; column-gap: 100px; }
body .person-section .person > .person-media,
body .person-section .person > .person-copy { grid-column: auto; }
@media (max-width: 899px) {
  body .person-section .person { grid-template-columns: 1fr; gap: 35px; }
  body .board-wrap { overflow-x: auto; }
  body .board { min-width: 540px; }
}

/* The design layer is sitewide now, so the wordmark swaps like the old seal did:
   paper over a dark hero, ink once the header turns solid. */
body .site-head .brand .wordmark-paper { display: none; }
body .site-foot .dcc-wordmark { display: block; }
body.hero-dark .site-head:not(.is-scrolled) .wordmark-ink { display: none; }
body.hero-dark .site-head:not(.is-scrolled) .wordmark-paper { display: block; }

/* The design layer keeps the header dark on dark-hero pages even after the
   scroll class lands, so the header reads as dark at all times there. Without
   this the nav links compute to ink on ink and vanish, and both wordmarks
   render at once. */
body.hero-dark .site-head,
body.hero-dark .site-head .brand,
body.hero-dark .site-head .nav-links a,
body.hero-dark .site-head .nav-menu summary { color: #FBFAF7; }
body.hero-dark .site-head .wordmark-ink { display: none; }
body.hero-dark .site-head .wordmark-paper { display: block; }
body.hero-dark .site-head .btn--ghost { color: #FBFAF7; border-color: #C4D6CE70; }
body.hero-dark .site-head :focus-visible { outline-color: #FBFAF7; }

/* The design layer forces the header button to paper text, which is invisible
   on the light headers (contact, check, legal, 404). Ink it there. */
body:not(.hero-dark) .site-head .btn,
body:not(.hero-dark) .site-head .btn--ghost {
  color: var(--ink) !important;
  border-color: #102b2840 !important;
}
body:not(.hero-dark) .site-head .btn:hover { background: #102b280d !important; }

/* Page headlines match the home hero: the same sans, weight and tracking,
   rather than the serif the other pages kept. */
body h1, body .hero-opening h1 {
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 1.03;
}
body .hero:not(.centered-check) h1 { font-size: clamp(46px, 5.2vw, 84px); max-width: 16ch; }

/* Legal pages are documents, not statements: keep their headline sane. */
body .prose h1 { font-size: clamp(34px, 3.2vw, 46px); max-width: 20ch; }

/* The design layer changed the footer background from dark to light in a later
   pass but kept the pale text colours from the dark version, so the whole
   footer read as near-white on near-white. Text goes back to ink. */
body .site-foot { color: var(--ink); }
body .site-foot a,
body .site-foot p { color: var(--ink); }
body .site-foot .muted,
body .site-foot .eyebrow { color: var(--muted); }
body .site-foot { border-top: 1px solid #102b2826; }

/* Two greys in the design layer land just under 4.5:1. Nudged to the token. */
body .client-line .eyebrow { color: var(--muted); }
body .grades p, body .grades li p { color: var(--muted); }

/* One design pass made the promises band light with ink text, a later pass
   made the background dark again, and the ink text colours were left behind
   with !important. The band rendered ink on ink, so the five promises were
   invisible. It goes back to paper text on the dark band. */
body .promises-section { background: var(--ink); }
body .promises-section h2,
body .promises-section p,
body .promises-section li,
body .promises-section .rail-label,
body .promises-section .eyebrow { color: #FBFAF7 !important; }
body .promises-section .muted { color: #A9B5B2 !important; }
body .promises-section .hair-list > li { border-color: #2E4444; }

/* The mechanism copy is the argument, so it reads on the page rather than
   behind a toggle (Chris, 2026-09-22). */
body .audience-section .rail-body > .context-block { grid-column: 1 / -1; }
body .context-block { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--rule); max-width: 46rem; }
body .context-block h3 { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 20px; max-width: 24ch; }
body .context-block p { max-width: 40rem; }
body .context-block p + p { margin-top: 16px; }

/* The Check is the site's one gold moment: the submit button carries it, so
   the tool is the thing that pops (Chris, 2026-09-22). */
body .check-form .btn,
body .hero .field-row .btn,
body .closing-section .field-row .btn { background: var(--gold) !important; color: #0A1E1E !important; border-color: var(--gold) !important; }
body .check-form .btn:hover { background: #E4B42E !important; }

/* "Start here", pointing at the field. */
body .start-here { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 14px; color: var(--gold); }
body .start-here span { font-weight: 500; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; }
body .start-here svg { display: block; transform: translateY(6px); }
@media (max-width: 899px) { body .start-here svg { width: 38px; height: 28px; } }

/* The two phases read as two separate things: numbered, ruled, and with their
   contents on the page rather than behind a toggle (Chris, 2026-09-22). */
body .system-section .phases { gap: 0; }
body .system-section .phase { padding: 36px 0 !important; border-top: 2px solid var(--ink) !important; }
body .system-section .phase + .phase { border-left: 0 !important; padding-left: 0 !important; }
body .phase .eyebrow { display: flex; align-items: baseline; gap: 12px; color: var(--ink); }
body .phase-num { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; }
body .system-section .phase h3 { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.15; letter-spacing: -0.03em; margin: 18px 0 14px; }
body .system-section .phase > p { max-width: 34rem; }
body .system-section .phase .hair-list { margin-top: 24px; }
body .system-section .phase .hair-list > li { padding-block: 12px; font-size: 16px; }
@media (min-width: 900px) {
  body .system-section .phases { grid-template-columns: 1fr 1fr; column-gap: 64px; }
}
body .need-section .starts { margin-top: 40px; }
body .need-section .starts h3 { margin-bottom: 8px; }

/* The service-area line sits under the paragraph it belongs to. */
body .area-line { margin-top: 16px; color: var(--muted); font-size: 16px; }

/* The monthly cycle as stepped list plus panel (Chris, 2026-09-22, option A).
   Ported by hand rather than pulling in React, Tailwind and framer-motion. */
body .cycle-wrap { display: grid; gap: 40px; margin-top: 48px; align-items: start; }
@media (min-width: 900px) { body .cycle-wrap { grid-template-columns: 1fr 1fr; gap: 64px; } }
body .system-section .cycle, body .cycle-wrap .cycle { display: block; border: 0; margin: 0; }
body .cycle-wrap .cycle > li { border: 0; padding: 0; }
body .cycle-wrap .cycle > li + li { margin-top: 4px; }
body .cycle-wrap .cycle button {
  display: flex; gap: 20px; width: 100%; text-align: left; align-items: flex-start;
  background: transparent; border: 0; border-top: 1px solid var(--rule);
  padding: 20px 0; cursor: pointer; color: var(--ink); transition: border-color 200ms ease;
}
body .cycle-wrap .cycle > li:last-child button { border-bottom: 1px solid var(--rule); }
body .cyc-num { font-weight: 500; font-size: 14px; letter-spacing: 0.06em; color: var(--muted); padding-top: 4px; }
body .cyc-copy { display: block; }
body .cyc-title { display: block; font-weight: 500; font-size: clamp(19px, 1.7vw, 23px); letter-spacing: -0.01em; }
body .cyc-text { display: block; margin-top: 6px; font-size: 16px; color: var(--muted); max-width: 34rem; }
body .cycle button[aria-selected="true"] { border-top-color: var(--gold); border-top-width: 2px; padding-top: 19px; }
body .cycle button[aria-selected="true"] .cyc-num { color: var(--gold); }
body .cycle button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

body .cyc-panel { margin: 0; background: var(--paper); border: 1px solid var(--rule); padding: 28px; position: sticky; top: 120px; }
body .cyc-panel-head { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--rule); }
body .pan-part { display: none; padding-top: 20px; }
body .pan-part[data-active] { display: block; }
body .pan-list { margin-top: 14px; }
body .pan-list li { padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 16px; }
body .pan-list li:last-child { border-bottom: 0; }
body .pan-score { display: flex; align-items: baseline; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
body .pan-n { font-weight: 500; font-size: clamp(34px, 3.4vw, 46px); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
body .pan-lbl { font-size: 15px; color: var(--muted); }
body .pan-rows { margin-top: 18px; }
body .pan-rows li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-top: 1px solid var(--rule); font-size: 16px; }
body .cyc-note { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--muted); }
@media (max-width: 899px) { body .cyc-panel { position: static; padding: 22px; } }

/* The monthly section is a dark band, so the steps read in paper and the panel
   is a light card with ink text inside it. */
body .monthly-section .cyc-title { color: #FBFAF7; }
body .monthly-section .cyc-text { color: #A9B5B2; }
body .monthly-section .cyc-num { color: #A9B5B2; }
body .monthly-section .cycle button { color: #FBFAF7; border-top-color: #2E4444; }
body .monthly-section .cycle > li:last-child button { border-bottom-color: #2E4444; }
body .monthly-section .cycle button:focus-visible { outline-color: #FBFAF7; }
body .monthly-section .cyc-panel,
body .monthly-section .cyc-panel p,
body .monthly-section .cyc-panel li,
body .monthly-section .cyc-panel span { color: var(--ink); }
body .monthly-section .cyc-panel .eyebrow,
body .monthly-section .cyc-panel .pan-lbl,
body .monthly-section .cyc-note { color: var(--muted); }
body .monthly-section .cyc-panel { border-color: var(--rule); }
body .monthly-section .pull { color: #FBFAF7; }

/* A real, dated scoreboard in the hero, under the Check and above the work.
   Light card on the dark hero, so it reads as evidence rather than decoration. */
body .hero-proof { margin-top: 44px; display: flex; justify-content: center; }
body .hero-proof .mini-board { max-width: 480px; width: 100%; background: var(--paper); padding: 24px 26px; text-align: left; }
body .hero-proof .mb-head { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid #B9CFCD; }
body .hero-proof .mb-head .eyebrow { color: var(--muted); }
body .hero-proof .q { font-size: 17px; font-weight: 500; margin: 16px 0 6px; color: var(--ink); }
body .hero-proof .mini-board ul li { border-top: 1px solid #DCE4E1; padding-block: 11px; }
body .hero-proof .mini-board ul li:last-child { border-bottom: 0; }
body .hero-proof .surface { font-size: 16px; color: var(--ink); }
body .hero-proof .note { margin-top: 14px; padding-top: 12px; border-top: 1px solid #DCE4E1; font-size: 13px; color: var(--muted); }
@media (max-width: 700px) { body .hero-proof { margin-top: 34px; } body .hero-proof .mini-board { padding: 20px; } }
@media (max-width: 899px) {
  body .hero-proof .mini-board { display: block; }
  body .hero-proof .q { margin-bottom: 14px; }
  body .hero-proof .mini-board ul { display: block; }
}
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

/* The scoreboard table on a phone: the question column stays put while the three
   surface columns scroll, and a line tells people the table scrolls. */
@media (max-width: 899px) {
  body .board th[scope="row"], body .board thead th:first-child {
    position: sticky; left: 0; z-index: 2; background: var(--sand);
    box-shadow: none; padding-right: 10px;
  }
  body .board-section .board th[scope="row"], body .board-section .board thead th:first-child { background: var(--sand); }
  body .board-wrap { position: relative; }
  body .board-wrap::after {
    content: "Scroll the table sideways to see all three tools";
    display: block; margin-top: 12px; font-size: 13px; color: var(--muted);
  }
}

/* The step numbers in the cycle list were coloured for the dark monthly band,
   and that colour leaked onto /welcome where the same list sits on paper,
   leaving 01 to 04 at 1.71 against the background. Scope it to dark sections. */
body section:not(.band-ink) .cycle p,
body section:not(.band-ink) .cycle > li .eyebrow { color: var(--muted) !important; }
body section:not(.band-ink) .cycle h3 { color: var(--ink); }

/* ---- Client onboarding portal (/welcome) ---- */
body .ob { max-width: 46rem; padding-block: 32px 96px; }
body .ob-bar { position: sticky; top: 0; z-index: 20; background: var(--paper); padding: 16px 0 12px; }
body .ob-bar-row { display: flex; justify-content: space-between; gap: 16px; }
body .ob-track { height: 2px; background: var(--rule); margin-top: 10px; }
body .ob-fill { height: 2px; background: var(--gold); width: 0; transition: width 250ms ease; }
body .ob-screen { padding-top: 40px; }
body .ob-screen h1 { max-width: 18ch; }
body .ob-screen h2 { max-width: 24ch; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.15; }
body .ob-help { margin-top: 16px; max-width: 38rem; font-size: 16px; }
body #ob-fields { margin-top: 28px; display: grid; gap: 20px; }
body #ob-fields label { display: block; font-weight: 500; font-size: 15px; margin-bottom: 8px; }
body .ob-choices { display: grid; gap: 10px; }
body .ob-choice { display: flex !important; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--rule); cursor: pointer; font-weight: 400 !important; margin-bottom: 0 !important; }
body .ob-choice:hover { background: var(--paper-2); }
body .ob-choice input { width: 18px; height: 18px; accent-color: var(--ink); flex: none; }
body .ob-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 32px; }
body .ob-skip { background: none; border: 0; cursor: pointer; font-size: 15px; color: var(--muted); text-decoration: underline; text-underline-offset: 4px; }
body .ob-cheer { font-family: var(--font-serif); font-size: 20px; color: var(--muted); margin-bottom: 24px; }
body .ob-strip { display: grid; gap: 16px; margin: 40px 0 16px; }
body .ob-strip li { border-top: 1px solid var(--rule); padding-top: 12px; }
body .ob-strip p { margin-top: 4px; }
body .ob-summary { margin-top: 32px; display: grid; gap: 32px; }
body .ob-group .eyebrow { margin-bottom: 12px; }
body .ob-row { display: grid; gap: 4px; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--rule); padding: 14px 0; cursor: pointer; }
body .ob-row:hover { background: var(--paper-2); }
body .ob-row-q { font-weight: 500; font-size: 15px; }
body .ob-row-a { font-size: 15px; color: var(--muted); }
body .ob-foot { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--rule); }
@media (min-width: 700px) { body .ob-strip { grid-template-columns: repeat(3, 1fr); } }

/* ---------------------------------------------------------------------------
   Welcome portal: the hello video.
   Recovered from the Lovable build. Portrait 9:16, so it is parked beside the
   copy on desktop instead of shoving the whole intro below the fold. On phones
   it stacks under the heading, where it reads as the greeting it is.
--------------------------------------------------------------------------- */
#ob-intro .ob-intro-grid {
  display: grid;
  gap: 32px;
  margin-top: 28px;
}
#ob-intro .ob-video {
  margin: 0;
  max-width: 280px;
  width: 100%;
}
#ob-intro .ob-video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: var(--ink, #0A1E1E);
  border: 1px solid var(--hairline, rgba(10, 30, 30, 0.14));
  border-radius: 14px;
}
#ob-intro .ob-video figcaption {
  margin-top: 10px;
  color: var(--muted, #4E5E59);
}
#ob-intro .ob-intro-grid > .body { margin-top: 0; }

@media (min-width: 860px) {
  #ob-intro .ob-intro-grid {
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
    gap: 56px;
  }
  #ob-intro .ob-video {
    grid-column: 2;
    grid-row: 1;
    max-width: 300px;
  }
  #ob-intro .ob-intro-grid > .body,
  #ob-intro .ob-intro-grid > .btn,
  #ob-intro .ob-intro-grid > .small {
    grid-column: 1;
  }
}

/* ---------------------------------------------------------------------------
   Welcome portal: client asset uploads (R2).
   Files go up the moment they are picked, so the assets and the answers land
   in the same sitting instead of waiting on an email that never comes.
--------------------------------------------------------------------------- */
.ob-drop {
  position: relative;
  margin-top: 8px;
  border: 1px dashed var(--muted, #4E5E59);
  border-radius: 12px;
  background: var(--paper-2, #F3F0E8);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.ob-drop.is-over { border-color: var(--gold, #D2A01E); background: var(--sand, #EDE6D6); }
.ob-drop.is-busy { opacity: 0.6; pointer-events: none; }
.ob-drop .ob-file-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.ob-drop-face {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;
  padding: 26px 18px;
  text-align: center;
  cursor: pointer;
}
.ob-drop-strong {
  font-weight: 600;
  color: var(--ink, #0A1E1E);
  border-bottom: 1px solid var(--gold, #D2A01E);
  padding-bottom: 2px;
}
.ob-drop.is-busy .ob-drop-strong::after { content: ' — uploading'; border: 0; }

.ob-files { list-style: none; margin: 12px 0 0; padding: 0; }
.ob-files li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--hairline, rgba(10, 30, 30, 0.14));
}
.ob-files li:last-child { border-bottom: 0; }
.ob-file-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink, #0A1E1E);
}
.ob-files .ob-skip { flex: 0 0 auto; }
.ob-file-error { margin-top: 8px; }