/* =========================================================
   Lucy Labs — site.css
   Layout + shared components for the 2026-07-07 rebuild.
   Tokens live in site-tokens.css (the ONLY :root block).
   These two files replace the outgoing lucy.css + pages.css.
   Mobile-first. No framework. Page-scoped rules stay authored
   near their page templates, then build.py externalizes them into
   assets/page-css/*.css so Cloudflare's CSP can stay strict.
   ========================================================= */

/* ---------- Container ---------- */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container-narrow { max-width: 880px; margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Utilities (minimal set) ---------- */
.prose { max-width: var(--measure-prose); }
.text-center { text-align: center; }
.muted { color: var(--ink-soft); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.grid-2 { display: grid; gap: var(--s-5); }
.grid-3 { display: grid; gap: var(--s-5); }
@media (min-width: 720px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================
   Header
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--line-hair);
}
.site-header .container {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: 64px;
  flex-wrap: wrap;
  padding-block: var(--s-2);
}

.brand-pill {
  display: inline-flex;
  align-items: center;
  background: var(--blue);
  border-radius: var(--r-pill);
  padding: 8px 18px;
  height: 40px;
  flex-shrink: 0;
  transition: background var(--dur-hover) var(--ease);
}
.brand-pill:hover { background: var(--blue-deep); }
.brand-pill img { height: 18px; width: auto; display: block; }

.main-nav {
  display: flex;
  gap: var(--s-5);
  align-items: center;
  order: 3;
  flex-basis: 100%;
  overflow-x: auto;
  padding-block: var(--s-2);
  -webkit-overflow-scrolling: touch;
}
.main-nav a {
  font-size: var(--fs-14);
  font-weight: var(--weight-semibold);
  color: var(--ink-muted);
  white-space: nowrap;
}
.main-nav a:hover { color: var(--ink); }
.main-nav a[aria-current="page"] { color: var(--blue); }

.header-end {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-left: auto;
}

.lang-switch {
  display: inline-flex;
  gap: var(--s-2);
  align-items: center;
  font-size: var(--fs-14);
}
.lang-switch a {
  opacity: 0.45;
  transition: opacity var(--dur-hover) var(--ease);
}
.lang-switch a.is-active, .lang-switch a:hover { opacity: 1; }

@media (min-width: 1020px) {
  .main-nav {
    order: 0;
    flex-basis: auto;
    flex: 1;
    justify-content: center;
    overflow-x: visible;
    padding-block: 0;
  }
}

/* =========================================================
   Section bands
   ========================================================= */
.band { padding-block: var(--s-8); }
@media (min-width: 900px) { .band { padding-block: var(--s-9); } }

.band--cream { background: var(--bg-cream); }
.band--tint  { background: var(--blue-soft); }

/* dark architectural band: used sparingly (floor moments, footer, conversion) */
.band--ink { background: var(--ink); color: var(--on-ink); }
.band--ink h1, .band--ink h2, .band--ink h3, .band--ink h4 { color: var(--on-ink); }
.band--ink p { color: var(--on-ink-muted); }
.band--ink .muted { color: var(--on-ink-soft); }
.band--ink .eyebrow { color: var(--on-ink-faint); }
.band--ink a { color: var(--on-ink); text-decoration: underline; text-decoration-color: var(--on-ink-faint); }
.band--ink a:hover { text-decoration-color: var(--on-ink); }
.band--ink .card { background: transparent; border-color: var(--line-on-ink); box-shadow: none; }

/* =========================================================
   Section head (mono kicker + H2 + optional support copy)
   ========================================================= */
.section-head { margin-bottom: var(--s-6); }
.section-head .eyebrow { display: block; margin-bottom: var(--s-3); }
.section-head p { max-width: var(--measure-prose); }
@media (min-width: 900px) { .section-head { margin-bottom: var(--s-7); } }

/* =========================================================
   Stage labels (chip form) — available / planned / planned-ga
   Color is never the only carrier: the words carry the claim.
   ========================================================= */
.stage {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--line-hair);
  color: var(--ink-soft);
  white-space: nowrap;
}
.stage::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink-soft);
  flex-shrink: 0;
}
.stage.available   { background: #E4F4ED; color: var(--ok-deep); }
.stage.available::before { background: var(--ok); }
.stage.planned     { background: #FBF2DC; color: var(--warn-deep); }
.stage.planned::before   { background: var(--warn); }
.stage.planned-ga  { background: var(--line-hair); color: var(--ink-muted); }
.stage.planned-ga::before { background: transparent; border: 1px dashed currentColor; }

/* brighter rendering inside dark bands / footer, no inline overrides */
.band--ink .stage, .site-footer .stage { background: var(--line-on-ink); }
.band--ink .stage.available, .site-footer .stage.available { color: #8FE3B6; }
.band--ink .stage.planned, .site-footer .stage.planned { color: #F2D488; }
.band--ink .stage.planned-ga, .site-footer .stage.planned-ga { color: var(--on-ink-soft); }

/* =========================================================
   Callout chips (inline concept/claim chips)
   ========================================================= */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-13);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: var(--blue-soft);
  color: var(--blue-deep);
}
.chip--ok     { background: #E4F4ED; color: var(--ok-deep); }
.chip--warn   { background: #FBF2DC; color: var(--warn-deep); }
.chip--danger { background: #FBE6E3; color: var(--danger-deep); }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* =========================================================
   Callout (editorial pull) + refusal scene
   ========================================================= */
.callout {
  border-left: 3px solid var(--blue);
  background: var(--bg-cream);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--s-5) var(--s-6);
  max-width: var(--measure-prose);
}
.callout p:last-child { margin-bottom: 0; }

.refused {
  border-left: 3px solid var(--danger-deep);
  background: #FBE6E3;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--s-5) var(--s-6);
  max-width: var(--measure-prose);
}
.refused strong { color: var(--danger-deep); }
.refused p:last-child { margin-bottom: 0; }

/* =========================================================
   Scene cards (compact narrative / conversational units)
   ========================================================= */
.scene-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.scene-card .scene-label {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.scene-card p { margin: 0; }
.scene-card--tint { background: var(--blue-soft); border-color: transparent; }
.scene-card--cream { background: var(--bg-cream); border-color: transparent; }

/* =========================================================
   Stat feature (big number + label rows)
   ========================================================= */
.stat-row {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.stat .stat-value {
  font-size: clamp(2rem, 4.5vw, var(--fs-44));
  font-weight: var(--weight-bold);
  line-height: var(--lh-tight);
  color: var(--blue);
  display: block;
}
.band--ink .stat .stat-value { color: var(--on-ink); }
.stat .stat-label {
  font-size: var(--fs-14);
  color: var(--ink-soft);
  display: block;
  margin-top: var(--s-2);
  max-width: 28ch;
}
.band--ink .stat .stat-label { color: var(--on-ink-soft); }

/* =========================================================
   FAQ (disclosure list with real DOM text: AEO-retrievable)
   ========================================================= */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  font-size: var(--fs-18);
  font-weight: var(--weight-semibold);
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--font-mono);
  color: var(--blue);
  flex-shrink: 0;
  transition: transform var(--dur-ui) var(--ease);
}
.faq details[open] summary::after { content: "–"; }
.faq .faq-answer {
  padding: 0 0 var(--s-5);
  max-width: var(--measure-prose);
}
.faq .faq-answer p:last-child { margin-bottom: 0; }

/* =========================================================
   Diagram primitives (code-native, real DOM text)
   ========================================================= */
.diagram {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  background: var(--bg);
  overflow-x: auto;
}
.diagram-title {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--s-5);
}
.flow {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  align-items: stretch;
}
.flow-node {
  background: var(--blue-soft);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  min-width: 140px;
  flex: 1;
}
.flow-node strong { display: block; color: var(--ink); font-size: var(--fs-16); }
.flow-node span { display: block; color: var(--ink-muted); font-size: var(--fs-13); margin-top: var(--s-1); }
.flow-node--outline { background: var(--bg); border: 1px solid var(--line); }
.flow-arrow {
  color: var(--ink-faint);
  font-family: var(--font-mono);
  align-self: center;
  flex-shrink: 0;
  transform: rotate(90deg);
}
@media (min-width: 720px) {
  .flow { flex-direction: row; align-items: stretch; }
  .flow-arrow { transform: none; }
}
.diagram-note {
  font-size: var(--fs-13);
  color: var(--ink-soft);
  margin-top: var(--s-4);
}

/* =========================================================
   Footer (dark architectural floor)
   ========================================================= */
.site-footer {
  background: var(--ink);
  color: var(--on-ink-muted);
  padding-block: var(--s-8) var(--s-6);
  margin-top: var(--s-9);
}
.site-footer a { color: var(--on-ink-muted); }
.site-footer a:hover { color: var(--on-ink); }

.footer-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--line-on-ink);
  margin-bottom: var(--s-6);
}
.footer-cta-row p { margin: 0; color: var(--on-ink); font-weight: var(--weight-medium); max-width: 48ch; }

.site-footer .disclaimer {
  font-size: var(--fs-13);
  color: var(--on-ink-soft);
  max-width: 90ch;
  margin-bottom: var(--s-7);
  line-height: 1.6;
}
.site-footer .disclaimer a { text-decoration: underline; }

.footer-grid {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: 1fr;
  margin-bottom: var(--s-7);
}
@media (min-width: 720px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}
.footer-brand img { height: 20px; width: auto; margin-bottom: var(--s-3); }
.footer-brand p { font-size: var(--fs-14); color: var(--on-ink-soft); max-width: 36ch; }

.footer-col h5 {
  font-size: var(--fs-12);
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--on-ink-faint);
  margin: 0 0 var(--s-3);
  font-weight: var(--weight-medium);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.footer-col a { font-size: var(--fs-14); }

.footer-legal {
  border-top: 1px solid var(--line-on-ink);
  padding-top: var(--s-5);
  font-size: var(--fs-13);
  color: var(--on-ink-faint);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  justify-content: space-between;
}

/* =========================================================
   Floating chat affordance (placeholder shell; real widget
   wiring lands in the Talk-to-Lucy workstream)
   ========================================================= */
.chat-fab {
  position: fixed;
  right: var(--s-5);
  bottom: var(--s-5);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--blue);
  color: var(--on-ink);
  font-weight: var(--weight-semibold);
  font-size: var(--fs-14);
  padding: 10px 16px 10px 10px;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-blue);
  transition: background var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease);
}
.chat-fab:hover { background: var(--blue-deep); color: var(--on-ink); transform: translateY(-1px); }
.chat-fab img {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: block;
  background: var(--bg);
}

/* =========================================================
   Skip link (keyboard users)
   ========================================================= */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--blue);
  color: var(--on-ink);
  padding: var(--s-3) var(--s-4);
  border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; color: var(--on-ink); }

/* Footer belief-routes (M5 ARVC94): label + gloss per route. */
.footer-col-routes li { margin-bottom: var(--s-3, 12px); }
.footer-col-routes .route-gloss { display: block; font-size: 0.82em; color: var(--ink-soft, #797B8A); }

/* =========================================================
   2026-07-16/17 VISUAL PASS (rounds 1-5, Thomas direction)
   ONE system, applied SITEWIDE: one canvas width (--container),
   left-aligned full-width sections (no measure caps anywhere in
   main content), one type scale, section-level scroll reveal,
   restrained hover motion. Copy untouched (copy law) except the
   demo status-note punctuation and the NEW feature chip copy
   (both Thomas 2026-07-17; feature-chip copy is flagged for the
   board / copy-law audit). Only the system ease + three
   durations; the reduced-motion kill switch in site-tokens.css
   flattens all of it. Register deltas need Travis approval at
   VISUAL_SYSTEM absorption.
   ========================================================= */

/* ---------- Header: bigger chrome, translucent floor ---------- */
.site-header .container { min-height: 80px; }
.brand-pill { height: 56px; padding: 12px 26px; }
.brand-pill img { height: 30px; }
.main-nav a { font-size: var(--fs-18); }
.site-header .btn-sm { padding: 14px 26px; font-size: var(--fs-16); }
.lang-switch .flag-icon { font-size: 36px; line-height: 1; }
@supports (backdrop-filter: blur(1px)) {
  .site-header {
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: saturate(1.5) blur(12px);
    -webkit-backdrop-filter: saturate(1.5) blur(12px);
  }
}

/* ---------- Type system: ONE scale, sitewide ---------- */
body { font-size: var(--fs-18); }
.lede { font-size: clamp(1.375rem, 1.9vw, 1.625rem); }
.section-head h2 { font-size: clamp(2rem, 3.2vw, 3rem); }
.section-head p { font-size: clamp(1.25rem, 1.7vw, 1.5rem); }

/* ---------- Width system: EVERY page fills the canvas ----------
   Left-aligned, no measure caps on main-content block text
   (Thomas: take advantage of the width, all pages, consistent).
   !important deliberately outranks per-page style blocks, which
   carry their own assorted ch-caps from the original build. */
main h1, main h2, main h3,
main p, main ul, main ol,
main .lede { max-width: none !important; }
.section-head p,
.prose,
.callout,
.refused,
.faq .faq-answer { max-width: none; }
.container-narrow { max-width: var(--container); }

/* ---------- Section eyebrow: single brand tick ---------- */
.section-head .eyebrow::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 2px;
  background: var(--blue);
  margin-right: 10px;
  vertical-align: 3px;
}

/* ---------- Card energy on hover-capable devices ---------- */
@media (hover: hover) {
  .card, .scene-card, .page-home .step {
    transition:
      transform var(--dur-ui) var(--ease),
      box-shadow var(--dur-ui) var(--ease),
      border-color var(--dur-ui) var(--ease);
  }
  .card:hover, .page-home .step:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
  .scene-card:hover { transform: translateY(-2px); border-color: var(--blue); }
  .band--ink .card:hover { transform: translateY(-3px); border-color: var(--on-ink-faint); box-shadow: none; }
}

/* ---------- Stat feature ---------- */
.stat .stat-value { font-size: clamp(2.5rem, 6vw, var(--fs-64)); }

/* ---------- FAQ: full canvas, readable at arm's length ---------- */
.faq summary { font-size: clamp(1.25rem, 1.7vw, 1.5rem); }
.faq .faq-answer { font-size: var(--fs-20); }

/* ---------- Status notes: visible, not apologetic ---------- */
.status-note { font-size: var(--fs-16) !important; color: var(--ink-muted) !important; }
.band--ink .status-note { color: var(--on-ink-soft) !important; }

/* ---------- Footer: a readable floor (round-5 bump) + the
   CTA cascade fix (.site-footer a outranked .btn-on-blue,
   leaving near-white text on the white button) ---------- */
.site-footer { font-size: var(--fs-20); }
.site-footer .footer-cta-row p { font-size: clamp(1.5rem, 2vw, 1.75rem); max-width: none; }
.site-footer .disclaimer { font-size: var(--fs-18); max-width: none; line-height: var(--lh-body); }
.footer-col a { font-size: var(--fs-20); }
.footer-col h5 { font-size: var(--fs-16); }
.footer-col-routes .route-gloss { font-size: var(--fs-18); }
.footer-brand p { font-size: var(--fs-20); max-width: none; }
.footer-legal { font-size: var(--fs-18); }
/* Footer brand pill: identical rendering to the header's (the generic
   .footer-brand img height/margin rules would otherwise shrink it). */
.site-footer .brand-pill { margin-bottom: var(--s-3); }
.site-footer .brand-pill img { height: 30px; margin-bottom: 0; }
.site-footer .btn-on-blue { color: var(--blue); text-decoration: none; font-size: var(--fs-20); padding: 16px 28px; }
.site-footer .btn-on-blue:hover { color: var(--blue-deep); }

/* ---------- Floating Talk to Lucy: +25% ---------- */
.chat-fab { font-size: var(--fs-18); padding: 13px 20px 13px 13px; }
.chat-fab img { width: 36px; height: 36px; }

/* ---------- Scroll reveal (site-motion.js adds .reveal per section;
     no-JS pages never get the class, content is never hidden) ---------- */
.reveal { opacity: 0; transform: translateY(16px); }
.reveal.reveal-in {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--dur-enter) var(--ease),
    transform var(--dur-enter) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

/* =========================================================
   Homepage (scoped .page-home; EN/ES parity via shared classes)
   ========================================================= */

/* ----- The hook: full-width statement, straight into the demo ----- */
.page-home .home-hook { padding-block: var(--s-8) var(--s-5); }
.page-home .home-hook .context-label {
  font-size: var(--fs-18);
  color: var(--ink-muted);
}
.page-home .home-hook h1 {
  font-size: clamp(2.5rem, 3.7vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
}
.page-home .home-demo { padding-block-start: var(--s-6); }

/* ----- The demo: fills the canvas; chips react to beats ----- */
@media (min-width: 1200px) {
  .page-home .home-demo-grid { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); }
}
/* Chips: original bridge behavior (is-active styling comes from the
   page CSS exactly as shipped); equal widths from the grid, no shifts. */
.page-home .demo-chip { font-size: var(--fs-18); }

/* ----- Feature chip (4th box, 2x): the org-value bridge to
   How Lucy Works. NEW copy, flagged for board acceptance. ----- */
.page-home .demo-chip--feature {
  background: var(--bg);
  border: 2px solid var(--blue);
  box-shadow: 0 0 0 4px var(--blue-soft);
  padding: 0;
  display: flex;
}
.page-home .demo-chip--feature a {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-6) var(--s-5);
  color: var(--ink);
  font-size: var(--fs-20);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-snug);
  text-decoration: none;
  width: 100%;
}
.page-home .demo-chip--feature a span { flex-shrink: 0; color: var(--blue); }
@media (min-width: 900px) {
  .page-home .demo-chip--feature { min-height: 220px; }
}
@media (hover: hover) {
  .page-home .demo-chip--feature { transition: border-color var(--dur-ui) var(--ease), box-shadow var(--dur-ui) var(--ease); }
  .page-home .demo-chip--feature:hover { border-color: var(--blue-deep); box-shadow: 0 0 0 6px var(--blue-soft); }
}

/* ----- What Lucy is ----- */
.page-home .home-what .callout p { font-size: var(--fs-20); }

/* ----- Three steps: numbered cards ----- */
.page-home .step {
  counter-increment: step;
  position: relative;
  background: var(--bg);
  border: 1px solid var(--line-hair);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: var(--shadow-card);
}
.page-home .step::after {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: var(--s-4);
  right: var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--fs-44);
  font-weight: var(--weight-bold);
  line-height: 1;
  color: var(--blue-soft);
  pointer-events: none;
}
.page-home .step-icon { width: 64px; height: 64px; }
.page-home .step-icon svg { width: 32px; height: 32px; }
.page-home .step p { font-size: var(--fs-20); }

/* ----- The 10-100x band: full-width feature; the figure stays just
   below the hook h1 clamp at every width (contract rule) ----- */
.page-home .home-cost .cost-figure { font-size: clamp(2.375rem, 3.5vw, 3.375rem); }
.page-home .home-cost .home-cost-body { font-size: clamp(1.375rem, 1.9vw, 1.625rem); }

/* ----- Scene picker ----- */
.page-home .scene summary h3 { font-size: clamp(1.25rem, 1.6vw, 1.375rem); }
.page-home .scene-body p:first-child { font-size: var(--fs-20); }
.page-home .scene-body { padding-bottom: var(--s-6); }

/* ----- Capstone: the conversion moment. text-wrap: balance from the
   page CSS equalizes (shortens) lines, defeating the full-width rule;
   let it fill naturally. ----- */
.page-home .home-capstone .capstone-text {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  margin-bottom: var(--s-6);
  text-wrap: pretty;
}

/* =========================================================
   Round 7 (Thomas 2026-07-17): How Lucy Works + heading fill
   ========================================================= */

/* Headings fill their line: the base text-wrap: balance deliberately
   shortens title lines, which reads as wasted width on every page.
   The homepage hook h1 keeps balance (Thomas approved that look). */
main h2, main h3 { text-wrap: pretty; }
body:not(.page-home) main h1 { text-wrap: pretty; }

/* HLW: uncap the wrapper divs the paragraph sweep cannot reach,
   and the intro's small print (same treatment as the home hook). */
main .hlw-prose,
main .hlw-mustland,
main .hlw-naming,
main .hlw-frame3 { max-width: none !important; }
main .hlw-naming { font-size: var(--fs-18); color: var(--ink-muted); }
main .hlw-frame3 { font-size: clamp(1.375rem, 1.9vw, 1.625rem); color: var(--ink); }

/* Tighter seam between the HLW intro and The Bridge. */
.page-how-lucy-works .hlw-intro { padding-block: var(--s-7) var(--s-5); }
.page-how-lucy-works .hlw-bridge { padding-block-start: var(--s-6); }

/* ---------- Round 8 (Thomas 2026-07-17): the Lucy Labs brand pill
   behaves exactly like the Talk to Lucy button on mouse ---------- */
.brand-pill {
  transition:
    background var(--dur-hover) var(--ease),
    transform var(--dur-hover) var(--ease),
    box-shadow var(--dur-hover) var(--ease);
}
.brand-pill:hover { background: var(--blue-deep); }
.brand-pill:active { transform: scale(0.98); }
.brand-pill:focus-visible { outline: none; box-shadow: var(--ring-focus); }

/* ---------- Round 9 (Thomas 2026-07-17): the demo goes full-bleed.
   The one band allowed past the shared 1440px canvas: the demo IS the
   hero. The frame takes all remaining width (aspect-ratio keeps it
   proportional), the chip rail scales fluidly with the viewport. ---------- */
.page-home .home-demo > .container { max-width: none; }
@media (min-width: 1200px) {
  .page-home .home-demo-grid {
    grid-template-columns: minmax(0, 1fr) clamp(300px, 23vw, 440px);
    gap: var(--s-6);
  }
}
.page-home .demo-chip { font-size: clamp(1.125rem, 1.35vw, 1.375rem); }
.page-home .demo-chip--feature a { font-size: clamp(1.25rem, 1.5vw, 1.5rem); }
@media (min-width: 900px) {
  .page-home .demo-chip--feature { min-height: clamp(200px, 16vw, 280px); }
}

/* ---------- Round 10 (Thomas 2026-07-17), aligned 2026-07-28:
   keep the demo on the same shared canvas as the rest of the site.
   The rail remains fluid, but the section no longer uses a one-off
   viewport-relative width cap. ---------- */
.page-home .home-demo > .container { max-width: var(--container); }
@media (min-width: 1200px) {
  .page-home .home-demo-grid { grid-template-columns: minmax(0, 1fr) clamp(260px, 16.5vw, 320px); }
}
@media (min-width: 900px) {
  .page-home .demo-chip--feature { min-height: clamp(160px, 11.5vw, 205px); }
}

/* ---------- Round 12 (Thomas 2026-07-20): full propagation sweep.
   Every page's residual wrapper-div width caps, found by scan; the
   paragraph-level sweep could not reach these. Deliberately spared:
   .dash-header / .heading (the Executive Dashboard mock's internal
   UI on business + how-lucy-works stays a product depiction). ---------- */
main .bz-quote, main .bz-locksupport, main .bz-stat, main .bz-trustgate, main .bz-hero,
main .tr-quote, main .tr-floor, main .tr-pillar, main .tr-prose, main .tr-refusal-body, main .tr-hero,
main .ab-person, main .ab-prose, main .ab-hero, main .ab-join,
main .iv-prose, main .iv-hero, main .iv-life, main .iv-outcomes,
main .in-quote, main .in-prose, main .in-hero,
main .ct-hero,
main .tl-hero-copy, main .tl-prose,
main .dp-hero-copy, main .dp-procurement-strip,
main .bl-aeo-framing, main .bl-faq-response, main .bl-index-hero,
main .lg-doc, main .lg-entity-block,
main .pv-doc, main .pv-lead { max-width: none !important; }

/* ---------- Round 13 (Thomas 2026-07-20): demo presence layer.
   Progress bar + beat counter + live-pulse dot (site-demo-extras.js),
   entrance + brand glow on the frame. Reduced-motion kill switch
   flattens the pulse and entrance automatically. ---------- */
.demo-progress {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  color: var(--ink-soft);
}
.demo-progress-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--ink-faint);
  flex-shrink: 0;
}
.demo-progress.is-playing .demo-progress-dot {
  background: var(--ok);
  animation: demo-pulse 1.6s var(--ease) infinite;
}
@keyframes demo-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(31, 157, 108, 0.35); }
  50% { box-shadow: 0 0 0 7px rgba(31, 157, 108, 0); }
}
.demo-progress-track {
  flex: 1;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--line);
  overflow: hidden;
}
.demo-progress-fill {
  display: block;
  height: 100%;
  width: var(--demo-progress, 0%);
  background: var(--blue);
  border-radius: var(--r-pill);
  transition: width var(--dur-ui) var(--ease);
}
.demo-progress-count { flex-shrink: 0; min-width: 52px; text-align: right; }

.page-home .home-demo-frame {
  box-shadow: var(--shadow-lift), var(--shadow-blue);
  animation: demo-enter var(--dur-enter) var(--ease) both;
}
@keyframes demo-enter {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
}

/* ---------- MAX VARIANT (2026-07-20, :8461 preview only): the demo
   frame pins while the chip rail scrolls; auto-replay lives in
   site-demo-extras.js on this branch. ---------- */
/* (sticky pin removed: the corner mini-player replaces it) */

/* ---------- MAX VARIANT: THEATER TREATMENT (2026-07-20, :8461 only).
   The demo band becomes a dark ink stage; the frame glows brand-blue;
   chips restyle for the dark ground (literal colors, no alpha-ramp
   inks); the white feature box stays white deliberately, to pop. ---------- */
.page-home .home-demo { background: #333A5F; /* mid indigo: darker than cream, lighter than ink (Thomas) */ }
.page-home .home-demo .section-head h2 { color: var(--on-ink); }
.page-home .home-demo .section-head .eyebrow { color: var(--on-ink-faint); }
.page-home .home-demo .status-note { color: var(--on-ink-soft) !important; }
.page-home .home-demo-frame {
  border-color: var(--line-on-ink);
  background: #262C4A; /* literal: frame well, lifted off the mid band */
  box-shadow: 0 0 0 2px rgba(53, 89, 242, 0.65), 0 0 56px 10px rgba(53, 89, 242, 0.45), 0 32px 96px -24px rgba(11, 15, 42, 0.6);
}
.page-home .demo-chip {
  background: #3E466B;           /* literal card on mid band */
  border: 1px solid var(--line-on-ink);
  color: var(--on-ink-muted);
}
.page-home .demo-chip.is-active {
  background: #46549E;           /* literal blue-lit active card */
  border-color: var(--blue);
  color: var(--on-ink);
}
.page-home .home-demo .demo-progress { color: var(--on-ink-soft); }
.page-home .home-demo .demo-progress-track { background: var(--line-on-ink); }
.page-home .home-demo .demo-progress-dot { background: var(--on-ink-faint); }
.page-home .home-demo .demo-progress.is-playing .demo-progress-dot { background: var(--ok); }

/* MAX fixes (Thomas 2026-07-20 round 2) */
/* The white feature box stays white on the stage (the theater chip rule
   was winning on file order; this re-asserts it). */
.page-home .home-demo .demo-chip--feature { background: var(--bg); border-color: var(--blue); }

/* Corner mini-player: when the demo band scrolls out while playing,
   the frame docks bottom-left (chat fab owns bottom-right) and keeps
   playing; click returns to the band. */
.page-home .home-demo-frame.demo-mini {
  position: fixed !important;
  left: var(--s-5);
  bottom: var(--s-5);
  width: min(380px, 28vw);
  z-index: 70;
  cursor: pointer;
  box-shadow: 0 0 0 2px rgba(53, 89, 242, 0.6), 0 0 40px 6px rgba(53, 89, 242, 0.35), 0 16px 48px -8px rgba(11, 15, 42, 0.5);
}

/* Hook hierarchy swap (both tiers): the naming line is the visual
   title; the you-know line steps to mid-scale. Markup unchanged
   (h1 semantics stay on the you-know line for SEO/AEO). */
.page-home .home-hook .context-label {
  font-family: var(--font-sans);
  font-size: clamp(2.5rem, 3.7vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  font-weight: var(--weight-semibold);
  color: var(--ink);
}
.page-home .home-hook h1 {
  font-size: clamp(1.625rem, 2.4vw, 2.125rem);
  line-height: 1.25;
  font-weight: var(--weight-medium);
  color: var(--ink-muted);
  letter-spacing: 0;
}

/* Round 15 (Thomas 2026-07-20): title to 75%, you-know line fills width. */
.page-home .home-hook .context-label { font-size: clamp(1.875rem, 2.8vw, 2.625rem); }
.page-home .home-hook h1 { text-wrap: pretty; }

/* Round 15 max: feature box goes brand blue with white text on the stage. */
.page-home .home-demo .demo-chip--feature {
  background: var(--blue);
  border-color: var(--blue-deep);
  box-shadow: none;
}
.page-home .home-demo .demo-chip--feature a { color: var(--on-ink); }
.page-home .home-demo .demo-chip--feature a span { color: var(--on-ink); }

/* ---------- MAX round 16 (Thomas 2026-07-20): hero becomes a
   text-plus-Lucy grid; text takes ~75% of the canvas, Lucy floats
   gently on the right. Reduced-motion flattens the float. ---------- */
.page-home .home-hook-grid { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 900px) {
  .page-home .home-hook-grid { grid-template-columns: minmax(0, 3fr) minmax(220px, 1fr); }
}
.home-hook-visual { display: none; justify-content: center; }
@media (min-width: 900px) { .home-hook-visual { display: flex; } }
.home-hook-visual img {
  width: clamp(180px, 15vw, 260px);
  height: auto;
  border-radius: 50%;
  box-shadow: 0 0 0 12px var(--blue-soft), 0 28px 56px -18px rgba(53, 89, 242, 0.4);
  animation: lucy-float 5s ease-in-out infinite alternate;
}
@keyframes lucy-float {
  from { transform: translateY(6px); }
  to { transform: translateY(-8px); }
}

/* ---------- Round 17 (Thomas 2026-07-22): small-print floor.
   Companion to the token raise: the one literal small page-text
   size (stage chips). Mock-UI depictions and superscripts are
   deliberately untouched. ---------- */
.stage { font-size: 13px; }

/* ---------- Round 18 (Thomas 2026-07-22): cross-page consistency ---------- */

/* Chrome buttons: Talk to Lucy pills match the Lucy Labs pill (56px). */
.site-header .btn-sm,
.site-footer .btn-on-blue { height: 56px; padding: 0 28px; font-size: var(--fs-18); }

/* The naming line: ONE treatment wherever it introduces a page.
   Sits above the title, clearly secondary to it. (Homepage keeps its
   own display treatment where the line IS the title.) */
.naming-line {
  font-family: var(--font-sans) !important;
  font-size: clamp(1.25rem, 1.7vw, 1.5rem) !important;
  font-weight: var(--weight-medium) !important;
  color: var(--ink-muted) !important;
  max-width: none !important;
  margin: 0 0 var(--s-3) !important;
}

/* Trust pillars: identical body sizing across Visibility / Confidence /
   Control (caplists were 16px, status lines 16px, stage markers ~15px
   mono; body 18px — four sizes in one section). */
.tr-pillar p, .tr-caplist p { font-size: var(--fs-18) !important; }
.tr-status { font-size: var(--fs-18) !important; }
.tr-stage { font-size: 0.9em !important; }

/* ---------- Round 19 (Thomas 2026-07-22): no small print, take 2 ---------- */

/* EVERY Talk to Lucy button (header, footer, capstone, body CTAs)
   matches the Lucy Labs pill. The floating fab keeps its own form. */
.btn[data-lucy-chat-open] {
  height: 56px;
  padding: 0 28px;
  font-size: var(--fs-18);
}

/* Business: the stat explanations and the four gap cards were body-size
   next to display-size numerals; give them feature-scale presence. */
/* (business page renders with an empty body class; bz- prefix is
   already page-unique, so scope via main) */
main .bz-stat p { font-size: var(--fs-20) !important; }
main .bz-stat-close { font-size: var(--fs-20) !important; }
main .bz-lock h3 { font-size: var(--fs-24) !important; }
main .bz-lock p { font-size: var(--fs-20) !important; }

/* ---------- Round 20 (Thomas 2026-07-22): 20px is the body size.
   The feature-paragraph size IS the paragraph size, sitewide. All
   body copy, list items, and inherited text move to 20px; ledes
   (22-26px fluid) and headings keep their headroom above it; the
   16-18px tier remains only for labels, kickers, and metadata. ---------- */
body { font-size: var(--fs-20); }

/* ---------- Round 21 (Thomas 2026-07-22): fix batch ---------- */

/* 1. Lucy Labs pill: full-surface hover, identical to Talk to Lucy. */
a.brand-pill { cursor: pointer; }
a.brand-pill:hover { background: var(--blue-deep) !important; }

/* 4. HLW flywheels: numbered like the homepage steps. */
main .hlw-flywheels { counter-reset: flywheel; }
main .hlw-flywheel { counter-increment: flywheel; position: relative; }
main .hlw-flywheel::after {
  content: counter(flywheel, decimal-leading-zero);
  position: absolute;
  top: var(--s-4); right: var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--fs-44);
  font-weight: var(--weight-bold);
  line-height: 1;
  color: var(--blue-soft);
  pointer-events: none;
}

/* 5. Business: darker stat divider; closing line steps down. */
@media (min-width: 760px) {
  main .bz-statpair > div + div { border-left: 2px solid var(--ink-faint); }
}
main .bz-stat-close { margin-top: var(--s-6); }

/* 6. Business payoffs: overlap removed; and inside EVERY dashboard
   mock window the small tokens are frozen at their original values so
   depictions render at designed size (the token raise had inflated
   them, which caused the collision). */
.dash-window { --fs-12: 0.75rem; --fs-13: 0.8125rem; --fs-14: 0.875rem; }
main .dash-concept-figure--payoff-backdrop .payoff-layer { margin-top: var(--s-5); }

/* 7. Trust keystone label: ink, so it survives exceeding the shape. */
main .tr-ks-key { fill: var(--ink); }

/* 9. Individuals: the every-app segment reads as a real shape. */
main .iv-seg-shared { background: #EAE8E0; border-color: var(--ink-faint); }

/* 10. Blog matrix: stage labels right-justified against the cards,
   column widened so IMPLEMENTATION fits at the raised label size. */
main .bl-aeo-header, main .bl-aeo-row { grid-template-columns: 190px repeat(3, 1fr); }
main .bl-aeo-hcell:first-child { text-align: right; }
main .bl-aeo-rowlabel { justify-content: flex-end; }
main .bl-aeo-rowlabel-inner { text-align: right; }

/* ---------- Round 22 (Thomas 2026-07-22): final two ---------- */

/* FAQ h3-in-summary renders as plain summary text on EVERY page
   (was home-scoped only, so blog/other FAQs looked different). */
.faq summary h3 { font: inherit; margin: 0; flex: 1; }

/* Lucy Labs pill: unmistakably whole-button hover, mechanically
   identical to the Talk to Lucy primary button plus the same
   focus ring; lift makes the full surface read as one control. */
a.brand-pill:hover {
  background: var(--blue-deep) !important;
  box-shadow: var(--shadow-blue);
  transform: translateY(-1px);
}
a.brand-pill:active { transform: scale(0.98); }

/* =========================================================
   V4 MOBILE LAYER (2026-07-22, :8462). Standard mobile
   effectiveness on top of the full desktop pass: scaled
   chrome and type on small screens, stacked layouts where
   desktop grids would cram, comfortable 44px+ touch targets,
   no horizontal overflow. Desktop (>=900px) is untouched.
   ========================================================= */

@media (max-width: 719px) {
  /* Type: 20px body is oversized on a phone; step down one. */
  body { font-size: var(--fs-18); }
  .lede { font-size: clamp(1.25rem, 5vw, 1.375rem); }
  .section-head h2 { font-size: clamp(1.625rem, 7vw, 2rem); }
  .section-head p { font-size: clamp(1.125rem, 4.5vw, 1.25rem); }
  .naming-line { font-size: clamp(1.125rem, 4.5vw, 1.25rem) !important; }

  /* Chrome: pills at comfortable thumb size, not desktop scale. */
  .site-header .container { min-height: 60px; }
  .brand-pill { height: 44px; padding: 8px 18px; }
  .brand-pill img { height: 22px; }
  .site-header .btn-sm,
  .btn[data-lucy-chat-open] { height: 44px; padding: 0 18px; font-size: var(--fs-16); }
  .lang-switch .flag-icon { font-size: 26px; }
  .chat-fab { font-size: var(--fs-16); padding: 10px 16px 10px 10px; }
  .chat-fab img { width: 30px; height: 30px; }

  /* Homepage hook + demo. */
  .page-home .home-hook .context-label { font-size: clamp(1.5rem, 7.5vw, 1.75rem); }
  .page-home .home-hook h1 { font-size: clamp(1.25rem, 5.5vw, 1.5rem); }
  .page-home .demo-chip--feature a { font-size: var(--fs-18); }

  /* Blog matrix: one column, labels above their cards. */
  main .bl-aeo-header { display: none; }
  main .bl-aeo-row { grid-template-columns: 1fr; }
  main .bl-aeo-rowlabel { justify-content: flex-start; padding-top: 0; }
  main .bl-aeo-rowlabel-inner { text-align: left; }

  /* Bands breathe less on a phone. */
  .band { padding-block: var(--s-7); }

  /* Footer stacks with calmer type. */
  .site-footer { font-size: var(--fs-18); }
  .site-footer .footer-cta-row p { font-size: var(--fs-20); }
  .footer-col a { font-size: var(--fs-18); }
}

/* Ultra-narrow safety: nothing may force sideways scroll. */
@media (max-width: 480px) {
  .page-home .home-cost .cost-figure { font-size: clamp(1.875rem, 9vw, 2.25rem); }
  .stat .stat-value { font-size: clamp(1.875rem, 9vw, 2.25rem); }
}

/* ---------- V4: mobile header (hamburger below 1020px) ---------- */
.nav-toggle { display: none; }
.nav-menu-cta { display: none; }

@media (max-width: 1019px) {
  .site-header .container {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: var(--s-3);
  }
  /* JS present: the row nav becomes a dropdown panel. */
  .site-header.has-nav-toggle .main-nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-card);
    padding: var(--s-2) var(--gutter) var(--s-5);
    overflow: visible;
  }
  .site-header.has-nav-toggle.nav-open .main-nav { display: flex; }
  .site-header.has-nav-toggle .main-nav a {
    padding: var(--s-4) 0;
    font-size: var(--fs-18);
    border-bottom: 1px solid var(--line-hair);
  }
  .site-header.has-nav-toggle .main-nav a[aria-current="page"] { color: var(--blue); }
  .site-header.has-nav-toggle .nav-menu-cta {
    display: inline-flex;
    justify-content: center;
    margin-top: var(--s-4);
    border-bottom: none;
    height: 48px;
    color: var(--on-ink);
  }
  .site-header.has-nav-toggle .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 44px; height: 44px;
    flex-shrink: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--bg);
    cursor: pointer;
    padding: 0;
  }
  .nav-toggle-bar {
    width: 18px; height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform var(--dur-ui) var(--ease), opacity var(--dur-ui) var(--ease);
  }
  .nav-open .nav-toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
  .nav-open .nav-toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}

/* Narrow phones: the header CTA moves into the menu entirely. */
@media (max-width: 519px) {
  .site-header .header-end .btn-sm { display: none; }
}

/* ---------- V4 round 2 (Thomas 2026-07-22) ---------- */

/* 1. Demo on phones: the prototype switches to a chat-focused layout
   below 640px, but the desktop frame's landscape aspect-ratio was
   letterboxing it. On phones the frame goes portrait so the
   conversation is the demo. */
@media (max-width: 719px) {
  .page-home .home-demo-frame {
    aspect-ratio: auto;
    height: min(72vh, 560px);
  }
}

/* 2. The 20/80 bar: stacked segments were equal height on phones,
   losing the whole point. Height now carries the proportion. */
@media (max-width: 639px) {
  main .iv-seg-shared { min-height: 56px; }
  main .iv-seg-yours {
    min-height: 224px;
    align-items: flex-start;
    padding-top: var(--s-4);
  }
}

/* =====================================================================
   v6: before/after strip. Shared because the same "context hunt collapses
   into one reviewed output" beat runs on both / and /business.html. All
   labels are real DOM text taken from the surrounding copy, so the ES
   twins translate normally. Additive only: no existing selector changes.
   ===================================================================== */
.ba-strip {
  display: grid;
  gap: var(--s-3);
  margin: var(--s-5) 0;
}
.ba-side {
  border-radius: var(--r-md);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.ba-side--before { background: var(--bg-cream); border: 1px dashed var(--line); }
.ba-side--after { background: var(--blue-soft); border: 1px solid var(--blue); }
.ba-label {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.ba-side--after .ba-label { color: var(--blue-deep); }
.ba-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.ba-chip {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 2px 10px;
  font-size: var(--fs-13);
  color: var(--ink-muted);
}
.ba-out { font-size: var(--fs-14); line-height: var(--lh-snug); color: var(--ink); font-weight: var(--weight-medium); }
.ba-cost { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--ink-soft); }
.ba-arrow {
  align-self: center;
  justify-self: center;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  transform: rotate(90deg);
}
@media (min-width: 720px) {
  .ba-strip { grid-template-columns: 1fr auto 1fr; align-items: stretch; }
  .ba-arrow { transform: none; }
}