:root {
    --paper: #FAF6EE; --paper-2: #F4EDDF; --surface: #FFFFFF;
    --ink: #181612; --ink-2: #28241C; --body: #4D463A; --muted: #6E685D;
    --line: #E8DEC9; --line-2: #DBCEAF;
    --coral: #EA5C45; --coral-deep: #C8442E; --coral-soft: #F5D9D0; --coral-tint: #FCEAE2;
    --slate: #2E3A55; --slate-soft: #DCE0E8; --slate-tint: #ECEEF3;
    --olive: #6B8E5A; --olive-soft: #D5DDC9; --olive-tint: #E8EDDF;
    --shadow-sm: 0 1px 2px rgba(24,22,18,0.04), 0 1px 3px rgba(24,22,18,0.06);
    --shadow-md: 0 4px 14px rgba(24,22,18,0.07), 0 2px 6px rgba(24,22,18,0.04);
    --shadow-lg: 0 24px 64px rgba(24,22,18,0.09), 0 8px 20px rgba(24,22,18,0.06);
    --radius-sm: 6px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 28px; --radius-pill: 999px;
    --max: 1240px;
    --section-pad-y: 92px; --section-pad-y-sm: 76px;
    --font-display: 'Fraunces', 'Times New Roman', serif;
    --font-body: 'Geist', system-ui, sans-serif;
    --font-mono: 'Geist Mono', ui-monospace, monospace;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    font-family: var(--font-body); font-weight: 400; color: var(--ink);
    background: var(--paper); line-height: 1.5;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
  }
  /* Noise overlay is desktop-only. Below 769px it is skipped entirely so
     mobile never pays the fixed-layer blend/repaint cost. */
  @media (min-width: 769px) {
    body::before {
      content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0.5;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.07 0 0 0 0 0.05 0 0 0 0.05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
      mix-blend-mode: multiply;
    }
  }
  a { color: inherit; text-decoration: none; }
  ::selection { background: var(--coral); color: var(--paper); }
  .container { max-width: var(--max); margin: 0 auto; padding: 0 32px; position: relative; z-index: 2; }

  .eyebrow {
    font-family: var(--font-mono); font-size: 11px; font-weight: 500;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
    display: inline-flex; align-items: center; gap: 10px;
  }
  .eyebrow::before { content: ""; display: inline-block; width: 18px; height: 1px; background: var(--coral); }
  .eyebrow.olive::before { background: var(--olive); }

  h1, h2, h3 {
    font-family: var(--font-display); font-weight: 400; color: var(--ink);
    letter-spacing: -0.025em; line-height: 1.0;
    font-variation-settings: "opsz" 144, "SOFT" 50;
    text-wrap: balance;
  }
  p, .lede, li, .hero-sub, .page-hero-sub { text-wrap: pretty; }
  h1 { font-size: clamp(42px, 5.4vw, 84px); line-height: 0.96; }
  h2 { font-size: clamp(40px, 5.2vw, 72px); line-height: 1.0; }
  h3 { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.1; }
  em.disp { font-style: italic; color: var(--coral); }
  em.disp-slate { font-style: italic; color: var(--slate); }
  .lede { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.6; color: var(--body); max-width: 580px; }

  .btn {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-body); font-weight: 500; font-size: 15px; line-height: 1;
    padding: 16px 22px; border-radius: var(--radius-pill); border: 1px solid transparent;
    cursor: pointer; white-space: nowrap;
    transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, background .2s, border-color .2s;
  }
  .btn-primary { background: var(--ink); color: var(--paper); }
  .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(24,22,18,0.22); }
  .btn-coral { background: var(--coral-deep); color: white; }
  .btn-coral:hover { filter: brightness(0.94); transform: translateY(-1px); }
  .btn-ghost { background: transparent; color: var(--ink); padding: 16px 8px; }
  .btn-pill { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
  .btn-pill:hover { border-color: var(--ink); transform: translateY(-1px); }
  .btn .arrow { transition: transform .25s; }
  .btn:hover .arrow { transform: translateX(3px); }

  .nav { position: sticky; top: 0; z-index: 100; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: rgba(250,246,238,0.82); border-bottom: 1px solid transparent; transition: border-color .25s; }
  .nav.scrolled { border-bottom-color: var(--line); }
  .nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; }
  .logo { display: inline-flex; align-items: center; flex-shrink: 0; }
  .logo-img { height: 28px; width: auto; display: block; }
  .nav-links { display: flex; gap: 30px; list-style: none; }
  .nav-links a { font-size: 14px; font-weight: 500; color: var(--ink-2); transition: color .2s; }
  .nav-links a:hover { color: var(--coral); }
  .nav-cta { display: flex; align-items: center; gap: 14px; }
  .nav-cta .login { font-size: 14px; font-weight: 500; color: var(--ink-2); transition: color .2s; }
  .nav-cta .login:hover { color: var(--coral); }
  .nav-cta .btn { padding: 11px 18px; font-size: 14px; }
  @media (max-width: 980px) { .nav-links, .nav-cta { display: none; } }

  .hero { position: relative; padding: 60px 0 100px; overflow: hidden; }
  .hero-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
  .hero-bg::before { content: ""; position: absolute; width: 700px; height: 700px; border-radius: 50%; filter: blur(140px); background: var(--coral); opacity: 0.18; top: -260px; right: -180px; }
  .hero-bg::after { content: ""; position: absolute; width: 500px; height: 500px; border-radius: 50%; filter: blur(120px); background: var(--olive); opacity: 0.12; bottom: -200px; left: -120px; }
  .hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: center; position: relative; z-index: 2; }
  @media (max-width: 1000px) { .hero-grid { grid-template-columns: 1fr; gap: 56px; } }

  .hero-meta-row { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 36px; flex-wrap: wrap; }
  .live-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--ink-2); box-shadow: var(--shadow-sm); letter-spacing: 0.02em; }
  .live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--olive); animation: pulseOlive 2.4s ease-in-out infinite; flex-shrink: 0; }
  @keyframes pulseOlive { 0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(107,142,90,0.6); } 50% { opacity: 0.7; transform: scale(1.2); box-shadow: 0 0 0 6px rgba(107,142,90,0); } }
  .meta-text { font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
  .hero h1 { margin-bottom: 28px; }
  .hero-sub { font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 30px); line-height: 1.25; color: var(--body); font-style: italic; font-weight: 300; margin-bottom: 28px; max-width: 600px; letter-spacing: -0.015em; }
  .hero-sub strong { font-style: normal; font-weight: 500; color: var(--ink); }
  .hero .lede { margin-bottom: 36px; }
  .hero-cta-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

  .tier-ladder { margin-top: 36px; padding: 18px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); display: flex; align-items: center; gap: 18px; box-shadow: var(--shadow-sm); flex-wrap: wrap; }
  .tier-label { font-family: var(--font-mono); font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
  .tier-pill { display: inline-flex; align-items: baseline; gap: 6px; font-size: 13px; color: var(--ink); font-weight: 500; }
  .tier-pill .price { font-family: var(--font-mono); font-size: 12px; color: var(--coral); font-weight: 500; }
  .tier-divider { width: 1px; height: 14px; background: var(--line); }

  .hero-visual { position: relative; min-height: 540px; }
  .week-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 24px; box-shadow: var(--shadow-lg); position: relative; z-index: 3; }
  .week-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
  .week-title { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--ink); text-transform: uppercase; letter-spacing: 0.08em; }
  .week-title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--olive); box-shadow: 0 0 0 4px rgba(107,142,90,0.15); }
  .week-id { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
  .week-modules { display: flex; flex-direction: column; gap: 10px; }
  .week-module { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 14px; border-radius: var(--radius-md); background: var(--paper); border: 1px solid var(--line); transition: transform .25s, border-color .25s; }
  .week-module:hover { transform: translateY(-1px); border-color: var(--ink); }
  .week-module.coral { border-left: 3px solid var(--coral); }
  .week-module.slate { border-left: 3px solid var(--slate); }
  .week-module.olive { border-left: 3px solid var(--olive); }
  .week-module-num { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--muted); }
  .week-module-title { font-family: var(--font-display); font-size: 18px; font-weight: 500; color: var(--ink); line-height: 1.1; }
  .week-module-meta { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 2px; letter-spacing: 0.02em; }
  .week-module-status { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; padding: 5px 9px; border-radius: var(--radius-pill); background: var(--olive-soft); color: var(--ink); font-weight: 600; white-space: nowrap; }
  .week-module-status.now { background: var(--coral-soft); color: var(--ink); }
  .week-module-status.queued { background: var(--slate-soft); color: var(--slate); }

  .op-stack-card { position: absolute; bottom: -30px; right: -20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px; box-shadow: var(--shadow-md); z-index: 4; width: 240px; }
  @media (max-width: 1000px) { .op-stack-card { right: 0; bottom: -40px; } }
  .op-stack-label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 10px; }
  .op-stack-line { display: flex; align-items: center; gap: 10px; }
  .op-avatar-stack { display: flex; }
  .op-avatar { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--surface); margin-left: -8px; background: var(--coral); color: white; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; font-family: var(--font-body); }
  .op-avatar:first-child { margin-left: 0; }
  .op-avatar.b1 { background: var(--slate); }
  .op-avatar.b2 { background: var(--olive); }
  .op-avatar.b3 { background: var(--ink); color: var(--paper); }
  .op-stack-text { font-family: var(--font-display); font-style: italic; font-size: 16px; color: var(--ink); line-height: 1.2; }
  .op-stack-sub { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 4px; }

  .em-hero { position: absolute; top: -20px; left: -40px; width: 120px; height: 120px; z-index: 5; animation: emFloat 4.5s ease-in-out infinite; display: block; }
  @keyframes emFloat { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
  @media (max-width: 1000px) { .em-hero { display: none; } }

  .logos-section { padding: 56px 0 36px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255,255,255,0.4); }
  .logos-text { text-align: center; font-family: var(--font-mono); font-size: 12px; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 28px; }
  .logos-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; align-items: center; }
  @media (max-width: 900px) { .logos-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (max-width: 520px) {
    .logos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
    .logos-grid .logo-cell { white-space: normal; text-align: center; font-size: 14px; height: auto; min-height: 36px; line-height: 1.25; }
  }
  .logo-cell { display: flex; align-items: center; justify-content: center; height: 36px; color: var(--ink-2); font-weight: 600; font-size: 16px; letter-spacing: -0.02em; opacity: 0.65; transition: opacity .25s; font-family: var(--font-display); }
  .logo-cell.sans { font-family: var(--font-body); font-weight: 700; letter-spacing: -0.04em; }
  .logo-cell:hover { opacity: 1; }

  .rituals-section { padding: 140px 0 120px; position: relative; }
  .rituals-head { text-align: center; max-width: 780px; margin: 0 auto 72px; }
  .rituals-head .eyebrow { margin-bottom: 24px; }
  .rituals-head h2 { margin-bottom: 24px; }
  .rituals-head .lede { margin: 0 auto; text-align: center; }
  .rituals-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; position: relative; }
  @media (max-width: 980px) { .rituals-grid { grid-template-columns: 1fr; gap: 24px; } }
  .ritual { background: var(--surface); border: 1px solid var(--line); padding: 36px 32px 56px; position: relative; transition: transform .3s; }
  .ritual:hover { transform: translateY(-4px); z-index: 2; box-shadow: var(--shadow-lg); }
  .ritual:first-child { border-top-left-radius: var(--radius-xl); border-bottom-left-radius: var(--radius-xl); }
  .ritual:last-child { border-top-right-radius: var(--radius-xl); border-bottom-right-radius: var(--radius-xl); border-left: none; }
  .ritual:nth-child(2) { border-left: none; border-right: none; }
  @media (max-width: 980px) {
    .ritual, .ritual:first-child, .ritual:last-child { border-radius: var(--radius-xl) !important; border: 1px solid var(--line) !important; }
  }
  .ritual.coral { background: linear-gradient(180deg, var(--surface) 0%, var(--coral-tint) 100%); }
  .ritual.slate { background: linear-gradient(180deg, var(--surface) 0%, var(--slate-tint) 100%); }
  .ritual.olive { background: linear-gradient(180deg, var(--surface) 0%, var(--olive-tint) 100%); }
  .ritual-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
  .ritual-num { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; }
  .ritual-em { width: 56px; height: 56px; flex-shrink: 0; }
  .ritual h3 { font-size: 32px; line-height: 1.05; margin-bottom: 14px; }
  .ritual h3 em { font-style: italic; }
  .ritual.coral h3 em { color: var(--coral); }
  .ritual.slate h3 em { color: var(--slate); }
  .ritual.olive h3 em { color: var(--olive); }
  .ritual-desc { font-size: 15px; line-height: 1.55; color: var(--body); margin-bottom: 24px; }
  .ritual-detail { border-top: 1px solid var(--line); padding-top: 18px; display: flex; flex-direction: column; gap: 10px; }
  .ritual-row { display: grid; grid-template-columns: 60px 1fr; gap: 14px; align-items: baseline; font-size: 13px; line-height: 1.45; }
  .ritual-key { font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: 0.04em; }
  .ritual-val { color: var(--ink); font-weight: 500; }
  .ritual-replace { position: absolute; bottom: 18px; left: 32px; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); font-style: italic; }
  @media (max-width: 980px) {
    .ritual { padding-bottom: 36px; }
    .ritual-replace { position: relative; bottom: 0; left: 0; margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--line); }
  }
  .rituals-footer { text-align: center; margin-top: 64px; padding: 32px; background: var(--paper-2); border-radius: var(--radius-md); border: 1px dashed var(--line-2); }
  .rituals-footer-text { font-family: var(--font-display); font-style: italic; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.3; color: var(--ink); margin-bottom: 8px; }
  .rituals-footer-text strong { font-style: normal; color: var(--coral); font-weight: 500; }
  .rituals-footer-sub { font-family: var(--font-mono); font-size: 12px; color: var(--muted); letter-spacing: 0.04em; }

  .fork-section { padding: 100px 0 110px; background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .fork-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
  .fork-head .eyebrow { margin-bottom: 22px; }
  .fork-head h2 { margin-bottom: 18px; }
  .fork-head p { color: var(--body); font-size: 17px; line-height: 1.55; max-width: 560px; margin: 0 auto; }
  .fork-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  @media (max-width: 880px) { .fork-cards { grid-template-columns: 1fr; } }
  .fork-card { border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 44px 36px; background: var(--paper); position: relative; overflow: hidden; transition: transform .3s, box-shadow .3s; cursor: pointer; display: block; }
  .fork-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
  .fork-card-glow { position: absolute; top: -120px; right: -100px; width: 280px; height: 280px; border-radius: 50%; filter: blur(80px); opacity: 0.35; pointer-events: none; }
  .fork-card.dtc .fork-card-glow { background: var(--coral); }
  .fork-card.services .fork-card-glow { background: var(--slate); }
  .fork-card-content { position: relative; z-index: 2; }
  .fork-vertical { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin-bottom: 20px; }
  .fork-card.dtc .fork-vertical { color: var(--coral); }
  .fork-card.services .fork-vertical { color: var(--slate); }
  .fork-card h3 { font-size: 36px; line-height: 1.05; margin-bottom: 18px; }
  .fork-card h3 em { font-style: italic; }
  .fork-card.dtc h3 em { color: var(--coral); }
  .fork-card.services h3 em { color: var(--slate); }
  .fork-card p { color: var(--body); font-size: 15px; line-height: 1.55; margin-bottom: 28px; }
  .fork-card-stack { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }
  .fork-stack-row { display: flex; justify-content: space-between; padding: 12px 14px; background: var(--surface); border-radius: var(--radius-sm); font-size: 13px; border: 1px solid var(--line); gap: 12px; }
  .fork-stack-row strong { color: var(--ink); font-weight: 500; }
  .fork-stack-row span { font-family: var(--font-mono); color: var(--muted); font-size: 12px; text-align: right; }
  .fork-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: 14px; padding-top: 16px; border-top: 1px solid var(--line); width: 100%; }
  .fork-card.dtc .fork-link { color: var(--coral-deep); }
  .fork-card.services .fork-link { color: var(--slate); }
  .fork-card .fork-link .arrow { transition: transform .25s; }
  .fork-card:hover .fork-link .arrow { transform: translateX(4px); }

  .compare-section { padding: 120px 0; }
  .compare-head { max-width: 760px; margin-bottom: 56px; }
  .compare-head .eyebrow { margin-bottom: 22px; }
  .compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  @media (max-width: 900px) { .compare-grid { grid-template-columns: 1fr; } }
  .compare-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 40px 36px; position: relative; overflow: hidden; }
  .compare-card.bad { border-style: dashed; opacity: 0.92; }
  .compare-card.good { background: linear-gradient(180deg, var(--surface) 0%, var(--coral-tint) 100%); border-color: var(--coral-soft); }
  .compare-tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 12px; border-radius: var(--radius-pill); margin-bottom: 24px; }
  .compare-tag.bad { background: var(--paper-2); color: var(--muted); }
  .compare-tag.good { background: var(--coral); color: white; }
  .compare-card h3 { font-size: 32px; line-height: 1.1; margin-bottom: 14px; }
  .compare-card.bad h3 { color: var(--muted); }
  .compare-card p { color: var(--body); font-size: 15px; line-height: 1.55; margin-bottom: 24px; max-width: 90%; }
  .compare-list { list-style: none; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line); padding-top: 18px; }
  .compare-list li { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: baseline; font-size: 14px; color: var(--body); }
  .compare-icon { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; align-self: center; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
  .compare-card.bad .compare-icon { background: var(--paper-2); color: var(--muted); }
  .compare-card.good .compare-icon { background: var(--coral); color: white; }
  .compare-cost { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
  .compare-bottom-line { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: baseline; }
  .compare-bottom-label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
  .compare-bottom-value { font-family: var(--font-display); font-size: 28px; color: var(--ink); font-weight: 500; }
  .compare-card.bad .compare-bottom-value { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--coral); text-decoration-thickness: 2px; }
  .compare-card.good .compare-bottom-value { color: var(--coral); font-style: italic; }

  .proof-section { padding: 120px 0; background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .proof-head { max-width: 760px; margin-bottom: 56px; }
  .proof-head .eyebrow { margin-bottom: 22px; }
  .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  @media (max-width: 880px) { .stats-grid { grid-template-columns: 1fr; } }
  .stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 36px 32px; position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 360px; }
  .stat-card-strip { position: absolute; top: 0; left: 0; width: 100%; height: 4px; }
  .stat-card.coral .stat-card-strip { background: var(--coral); }
  .stat-card.slate .stat-card-strip { background: var(--slate); }
  .stat-card.olive .stat-card-strip { background: var(--olive); }
  .stat-vertical { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 28px; }
  .stat-num { font-family: var(--font-display); font-size: clamp(56px, 5.5vw, 76px); line-height: 0.95; margin-bottom: 14px; color: var(--ink); }
  .stat-num em { font-style: italic; }
  .stat-card.coral .stat-num em { color: var(--coral); }
  .stat-card.slate .stat-num em { color: var(--slate); }
  .stat-card.olive .stat-num em { color: var(--olive); }
  .stat-claim { font-size: 15px; line-height: 1.5; color: var(--body); margin-bottom: auto; }
  .stat-attr { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 12px; }
  .stat-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: var(--paper); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
  .stat-attr-text { font-size: 13px; line-height: 1.35; }
  .stat-attr-text strong { display: block; color: var(--ink); font-weight: 500; }
  .stat-attr-text span { color: var(--muted); font-size: 12px; }
  .stat-tier { margin-top: 12px; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); display: flex; align-items: center; gap: 8px; }
  .stat-tier::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--coral); }

  .operators-section { padding: 120px 0; position: relative; overflow: hidden; }
  .operators-head { margin-bottom: 56px; display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
  @media (max-width: 700px) { .operators-head { flex-direction: column; align-items: flex-start; } }
  .operators-head h2 { margin-bottom: 16px; max-width: 580px; margin-top: 22px; }
  .operators-head p { color: var(--body); font-size: 16px; line-height: 1.55; max-width: 520px; }
  .operators-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
  @media (max-width: 880px) { .operators-grid { grid-template-columns: repeat(2, 1fr); } }
  .op-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: transform .25s, box-shadow .25s; }
  .op-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
  .op-photo { aspect-ratio: 1/1; background: linear-gradient(135deg, var(--coral-soft), var(--slate-soft)); position: relative; overflow: hidden; }
  .op-photo.b1 { background: linear-gradient(135deg, var(--olive-soft), var(--coral-soft)); }
  .op-photo.b2 { background: linear-gradient(135deg, var(--slate-soft), var(--olive-soft)); }
  .op-photo.b3 { background: linear-gradient(135deg, var(--coral-soft), var(--olive-soft)); }
  .op-initials { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 64px; color: var(--ink); font-style: italic; opacity: 0.6; }
  .op-meta { padding: 20px; }
  .op-name { font-family: var(--font-display); font-size: 22px; color: var(--ink); line-height: 1.05; margin-bottom: 4px; }
  .op-role { font-size: 12px; color: var(--coral); font-weight: 500; margin-bottom: 10px; font-family: var(--font-mono); letter-spacing: 0.02em; }
  .op-prev { font-size: 12px; color: var(--muted); line-height: 1.45; }
  .op-prev strong { color: var(--ink-2); font-weight: 500; }

  .pricing-section { padding: 120px 0; background: var(--ink); color: var(--paper); position: relative; overflow: hidden; }
  .pricing-bg { position: absolute; width: 600px; height: 600px; border-radius: 50%; filter: blur(140px); background: var(--coral); opacity: 0.18; bottom: -300px; right: -200px; pointer-events: none; }
  .pricing-head { text-align: center; max-width: 760px; margin: 0 auto 56px; }
  .pricing-head .eyebrow { color: rgba(250,246,238,0.6); margin-bottom: 22px; }
  .pricing-head .eyebrow::before { background: var(--coral); }
  .pricing-head h2 { color: var(--paper); margin-bottom: 18px; }
  .pricing-head h2 em { color: var(--coral); font-style: italic; }
  .pricing-head p { color: rgba(250,246,238,0.7); font-size: 17px; max-width: 580px; margin: 0 auto; line-height: 1.55; }
  .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; position: relative; z-index: 2; }
  @media (max-width: 880px) { .pricing-grid { grid-template-columns: 1fr; } }
  .tier-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-lg); padding: 32px; position: relative; }
  .tier-card.featured { background: rgba(234,92,69,0.08); border: 1px solid var(--coral); }
  .tier-featured-badge { position: absolute; top: -10px; right: 24px; background: var(--coral); color: white; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; padding: 5px 10px; border-radius: var(--radius-pill); font-weight: 600; }
  .tier-name { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(250,246,238,0.5); margin-bottom: 12px; }
  .tier-title { font-family: var(--font-display); font-size: 32px; color: var(--paper); line-height: 1.0; margin-bottom: 8px; }
  .tier-title em { font-style: italic; color: var(--coral); }
  .tier-price-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
  .tier-price { font-family: var(--font-display); font-size: 44px; color: var(--paper); line-height: 1; }
  .tier-price-suffix { font-family: var(--font-mono); font-size: 12px; color: rgba(250,246,238,0.5); }
  .tier-from { font-family: var(--font-mono); font-size: 11px; color: rgba(250,246,238,0.5); margin-bottom: 22px; text-transform: uppercase; letter-spacing: 0.06em; }
  .tier-list { list-style: none; margin-bottom: 24px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.1); display: flex; flex-direction: column; gap: 10px; }
  .tier-list li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; font-size: 14px; line-height: 1.45; color: rgba(250,246,238,0.85); }
  .tier-list li::before { content: "+"; color: var(--coral); font-weight: 700; }
  .tier-where { padding: 14px; background: rgba(255,255,255,0.04); border-radius: var(--radius-sm); font-family: var(--font-display); font-style: italic; font-size: 14px; color: rgba(250,246,238,0.85); line-height: 1.4; }
  .tier-where::before { content: "Where most clients land · "; font-style: normal; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(250,246,238,0.4); display: block; margin-bottom: 6px; }
  .pricing-footer { margin-top: 48px; text-align: center; color: rgba(250,246,238,0.6); font-size: 14px; line-height: 1.5; max-width: 600px; margin-left: auto; margin-right: auto; position: relative; z-index: 2; }
  .pricing-footer strong { color: var(--paper); font-weight: 500; }

  .notfor-section { padding: 120px 0; }
  .notfor-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 64px; align-items: start; }
  @media (max-width: 880px) { .notfor-grid { grid-template-columns: 1fr; gap: 36px; } }
  .notfor-head .eyebrow { margin-bottom: 22px; }
  .notfor-head h2 { margin-bottom: 18px; }
  .notfor-head p { color: var(--body); font-size: 16px; line-height: 1.55; max-width: 320px; }
  .notfor-list { display: flex; flex-direction: column; }
  .notfor-item { padding: 24px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: start; }
  .notfor-item:first-child { border-top: 1px solid var(--line); }
  .notfor-x { width: 32px; height: 32px; border-radius: 50%; background: var(--paper); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--coral); font-weight: 600; flex-shrink: 0; }
  .notfor-item h3, .notfor-item h4 { font-family: var(--font-display); font-size: 22px; line-height: 1.2; margin-bottom: 6px; color: var(--ink); font-weight: 400; }
  .notfor-item p { font-size: 14px; line-height: 1.5; color: var(--body); }

  .newsletter-section { padding: 100px 0; }
  .newsletter-card { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 56px; display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; position: relative; overflow: hidden; }
  @media (max-width: 800px) { .newsletter-card { grid-template-columns: 1fr; padding: 36px 28px; } }
  .nl-mascot { width: 180px; height: 180px; }
  @media (max-width: 800px) { .nl-mascot { width: 130px; height: 130px; margin: 0 auto; } }
  .nl-content { max-width: 540px; }
  .nl-content .eyebrow { margin-bottom: 20px; }
  .nl-content h2 { font-size: clamp(32px, 4vw, 52px); margin-bottom: 14px; }
  .nl-content h2 em { color: var(--coral); font-style: italic; }
  .nl-content p { color: var(--body); font-size: 15px; line-height: 1.55; margin-bottom: 24px; }
  .nl-form { display: flex; gap: 8px; background: var(--surface); padding: 6px; border-radius: var(--radius-pill); border: 1px solid var(--line); max-width: 460px; }
  .nl-form input { flex: 1; padding: 12px 18px; background: transparent; border: none; color: var(--ink); font-family: var(--font-body); font-size: 14px; outline: none; }
  .nl-form input::placeholder { color: var(--muted); }
  /* a11y: the input clears its own outline, so show focus on the pill wrapper */
  .nl-form:focus-within { outline: 2px solid var(--coral); outline-offset: 3px; border-color: var(--coral); }
  .nl-form button { padding: 12px 20px; background: var(--ink); color: var(--paper); border: none; border-radius: var(--radius-pill); font-family: var(--font-body); font-weight: 500; font-size: 14px; cursor: pointer; transition: background .25s; }
  .nl-form button:hover { background: var(--coral); }

  .final-cta { padding: 140px 0; text-align: center; position: relative; overflow: hidden; }
  .final-cta-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
  .final-cta-bg::before { content: ""; position: absolute; width: 600px; height: 600px; border-radius: 50%; filter: blur(120px); background: var(--coral); opacity: 0.12; top: 50%; left: 50%; transform: translate(-50%, -50%); }
  .final-cta h2 { font-size: clamp(48px, 7vw, 96px); line-height: 0.98; margin-bottom: 24px; max-width: 1000px; margin-left: auto; margin-right: auto; position: relative; z-index: 2; }
  .final-cta h2 em { font-style: italic; color: var(--coral); }
  .final-cta-sub { font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--body); max-width: 540px; margin: 0 auto 36px; line-height: 1.4; position: relative; z-index: 2; }
  .final-cta-buttons { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; position: relative; z-index: 2; }

  .faq-section { padding: 100px 0 120px; background: var(--paper-2); border-top: 1px solid var(--line); }
  .faq-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 56px; }
  @media (max-width: 880px) { .faq-grid { grid-template-columns: 1fr; } }
  .faq-head .eyebrow { margin-bottom: 22px; }
  .faq-head h2 { margin-bottom: 18px; }
  .faq-head p { color: var(--body); font-size: 15px; line-height: 1.55; max-width: 280px; }
  .faq-list { display: flex; flex-direction: column; }
  .faq-item { border-top: 1px solid var(--line-2); padding: 22px 0; }
  .faq-item:last-child { border-bottom: 1px solid var(--line-2); }
  .faq-q { display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-family: var(--font-display); font-size: 22px; color: var(--ink); user-select: none; line-height: 1.2; gap: 16px; }
  .faq-q .plus { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center; font-size: 16px; font-family: var(--font-body); color: var(--muted); transition: transform .25s, background .25s, color .25s, border-color .25s; flex-shrink: 0; }
  .faq-item.open .plus { transform: rotate(45deg); background: var(--coral); color: white; border-color: var(--coral); }
  .faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease, padding-top .35s ease; color: var(--body); font-size: 15px; line-height: 1.6; }
  .faq-item.open .faq-a { max-height: 400px; padding-top: 14px; }

  .footer { padding: 80px 0 36px; background: var(--ink); color: var(--paper); position: relative; overflow: hidden; }
  .footer-blob { position: absolute; width: 600px; height: 600px; border-radius: 50%; background: var(--coral); filter: blur(140px); opacity: 0.16; bottom: -300px; right: -200px; pointer-events: none; }
  .footer-top { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 40px; padding-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,0.1); position: relative; z-index: 2; }
  @media (max-width: 880px) { .footer-top { grid-template-columns: 1fr 1fr; } }
  .footer-brand .logo { color: var(--paper); margin-bottom: 18px; }
  .footer-tag { font-size: 14px; color: rgba(250,246,238,0.6); line-height: 1.55; max-width: 280px; margin-bottom: 24px; }
  .footer-mantra { font-family: var(--font-display); font-style: italic; font-size: 18px; color: var(--coral); line-height: 1.3; max-width: 280px; margin-bottom: 24px; }
  .footer-col h2, .footer-col h5 { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(250,246,238,0.5); margin-bottom: 18px; }
  .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
  .footer-col a { display: inline-block; padding: 4px 0; font-size: 14px; color: var(--paper); opacity: 0.85; transition: opacity .2s, color .2s; }
  .footer-col a:hover { opacity: 1; color: var(--coral); }
  .footer-bottom { margin-top: 36px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; color: rgba(250,246,238,0.5); font-size: 12px; position: relative; z-index: 2; }
  .footer-bottom-links { display: flex; gap: 22px; flex-wrap: wrap; }
  .footer-bottom a { color: rgba(250,246,238,0.5); }
  .footer-bottom a:hover { color: var(--coral); }

  .reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
  .reveal.in { opacity: 1; transform: translateY(0); }
  .reveal.d1 { transition-delay: .08s; }
  .reveal.d2 { transition-delay: .16s; }
  .reveal.d3 { transition-delay: .24s; }
  .reveal.d4 { transition-delay: .32s; }
  /* JS-failure-safe: reveal content is only hidden once scripts.js runs and marks
     <html class="js">. If JS is disabled or scripts.js fails to load/run, this rule
     keeps every .reveal block visible so a JS failure can never blank the page. */
  html:not(.js) .reveal { opacity: 1 !important; transform: none !important; }

  /* ===================== Mobile nav ===================== */
  .nav-toggle {
    display: none; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0; background: transparent;
    border: 1px solid var(--line); border-radius: var(--radius-pill);
    cursor: pointer; flex-shrink: 0; transition: border-color .2s;
  }
  .nav-toggle:hover { border-color: var(--ink); }
  .nav-toggle-bar {
    display: block; width: 16px; height: 1.5px; background: var(--ink);
    margin: 0 auto; transition: transform .25s cubic-bezier(.2,.7,.3,1), opacity .2s;
  }
  .nav-toggle.open .nav-toggle-bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav-toggle.open .nav-toggle-bar:nth-child(2) { opacity: 0; }
  .nav-toggle.open .nav-toggle-bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  .mobile-menu { display: none; border-top: 1px solid var(--line); background: var(--paper); padding: 8px 0 28px; }
  .mobile-menu.open { display: block; }
  .mobile-menu-links { list-style: none; display: flex; flex-direction: column; }
  .mobile-menu-links li { border-bottom: 1px solid var(--line); }
  .mobile-menu-links a {
    display: block; padding: 16px 32px; font-family: var(--font-display);
    font-size: 24px; color: var(--ink); transition: color .2s;
  }
  .mobile-menu-links a:hover { color: var(--coral); }
  .mobile-menu-cta { display: flex; flex-direction: column; gap: 14px; padding: 24px 32px 0; }
  .mobile-menu-cta .login { font-size: 15px; font-weight: 500; color: var(--ink-2); text-align: center; }
  .mobile-menu-cta .btn { justify-content: center; }
  @media (max-width: 980px) { .nav-toggle { display: flex; } }
  @media (min-width: 981px) { .mobile-menu, .mobile-menu.open { display: none; } }

  /* ===================== FAQ button reset + focus states ===================== */
  button.faq-q { width: 100%; background: transparent; border: 0; text-align: left; }
  .faq-q:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; border-radius: var(--radius-sm); }
  a:focus-visible, .btn:focus-visible, .nav-toggle:focus-visible {
    outline: 2px solid var(--coral); outline-offset: 3px;
  }

  /* ============================================================
     INTERIOR PAGES, shared
     ============================================================ */
  em.disp-olive { font-style: italic; color: var(--olive); }
  .eyebrow.slate::before { background: var(--slate); }

  .page-hero { position: relative; padding: 64px 0 84px; overflow: hidden; }
  .page-hero-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
  .page-hero-bg::before { content: ""; position: absolute; width: 620px; height: 620px; border-radius: 50%; filter: blur(150px); background: var(--coral); opacity: 0.16; top: -300px; right: -160px; }
  .page-hero-bg.olive::before { background: var(--olive); opacity: 0.13; }
  .page-hero .container { position: relative; z-index: 2; }
  .page-hero-inner { max-width: 800px; }
  .page-hero h1 { font-size: clamp(46px, 6.4vw, 84px); margin: 26px 0 22px; }
  .page-hero-sub { font-family: var(--font-display); font-size: clamp(21px, 2.3vw, 29px); line-height: 1.25; color: var(--body); font-style: italic; font-weight: 300; margin-bottom: 22px; max-width: 600px; letter-spacing: -0.015em; }
  .page-hero-sub strong { font-style: normal; font-weight: 500; color: var(--ink); }
  .page-hero .lede { margin-bottom: 34px; }
  .page-hero-cta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

  /* ============================================================
     HOW WE WORK
     ============================================================ */
  .hww-intro { padding: 64px 0 72px; background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .hww-intro-head { max-width: 720px; }
  .hww-intro-head .eyebrow { margin-bottom: 20px; }
  .hww-intro-head p { font-size: 17px; line-height: 1.62; color: var(--body); }
  .ritual-index { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 38px; }
  @media (max-width: 780px) { .ritual-index { grid-template-columns: 1fr; } }
  .ritual-index-card { display: block; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; transition: transform .25s, box-shadow .25s, border-color .25s; }
  .ritual-index-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--ink); }
  .ritual-index-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
  .ritual-index-card.coral .ritual-index-num { color: var(--coral); }
  .ritual-index-card.slate .ritual-index-num { color: var(--slate); }
  .ritual-index-card.olive .ritual-index-num { color: var(--olive); }
  .ritual-index-name { font-family: var(--font-display); font-size: 23px; color: var(--ink); line-height: 1.1; margin-bottom: 8px; }
  .ritual-index-replace { font-size: 13px; color: var(--muted); line-height: 1.4; }

  .ritual-deep { padding: 84px 0; border-bottom: 1px solid var(--line); }
  .ritual-deep-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
  @media (max-width: 900px) { .ritual-deep-grid { grid-template-columns: 1fr; gap: 32px; } }
  .ritual-deep-text h2 { font-size: clamp(34px, 4vw, 50px); margin: 14px 0 18px; }
  .ritual-deep-desc { font-size: 16px; line-height: 1.62; color: var(--body); margin-bottom: 22px; }
  .ritual-deep-replace { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
  .ritual-deep-replace::before { content: ""; width: 16px; height: 1px; background: var(--line-2); }
  @media (min-width: 901px) { .ritual-deep.reverse .ritual-deep-text { order: 2; } }

  .deep-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 30px; box-shadow: var(--shadow-md); }
  .deep-card.coral { border-top: 3px solid var(--coral); }
  .deep-card.slate { border-top: 3px solid var(--slate); }
  .deep-card.olive { border-top: 3px solid var(--olive); }
  .deep-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
  .deep-card-title { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink); }
  .deep-card-tag { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; padding: 5px 9px; border-radius: var(--radius-pill); font-weight: 600; }
  .deep-card-tag.coral { background: var(--coral-soft); color: var(--ink); }
  .deep-card-tag.slate { background: var(--slate-soft); color: var(--slate); }
  .deep-card-tag.olive { background: var(--olive-soft); color: var(--ink); }

  .hww-tier-band { padding: 80px 0; }
  .hww-tier-band .rituals-footer { margin-top: 0; }
  .rituals-footer .btn { margin-top: 20px; }

  .hww-honest { padding: 88px 0; background: var(--paper-2); border-top: 1px solid var(--line); }
  .hww-honest-card { max-width: 740px; margin: 0 auto; text-align: center; }
  .hww-honest-card .eyebrow { margin-bottom: 20px; }
  .hww-honest-card p { font-family: var(--font-display); font-size: clamp(22px, 2.5vw, 30px); line-height: 1.38; color: var(--ink); font-style: italic; font-weight: 300; }
  .hww-honest-card p strong { font-style: normal; font-weight: 500; color: var(--coral); }

  /* ============================================================
     PRICING
     ============================================================ */
  .tier-cta { width: 100%; justify-content: center; margin-top: 22px; }

  .tier-path-section { padding: 100px 0; }
  .tier-path-head { max-width: 680px; margin-bottom: 48px; }
  .tier-path-head .eyebrow { margin-bottom: 20px; }
  .tier-path-head h2 { margin-bottom: 16px; }
  .tier-path-head p { font-size: 16px; line-height: 1.6; color: var(--body); }
  .tier-path { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  @media (max-width: 820px) { .tier-path { grid-template-columns: 1fr; } }
  .tier-step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; }
  .tier-step-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--coral); margin-bottom: 14px; }
  .tier-step-name { font-family: var(--font-display); font-size: 26px; color: var(--ink); margin-bottom: 4px; }
  .tier-step-name em { font-style: italic; color: var(--coral); }
  .tier-step-when { font-family: var(--font-mono); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 14px; }
  .tier-step-desc { font-size: 14px; line-height: 1.55; color: var(--body); }

  .price-table-section { padding: 100px 0; background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .price-table-head { max-width: 680px; margin-bottom: 44px; }
  .price-table-head .eyebrow { margin-bottom: 20px; }
  .price-table-head h2 { margin-bottom: 16px; }
  .price-table-head p { font-size: 16px; line-height: 1.6; color: var(--body); }
  .price-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
  .price-table { width: 100%; border-collapse: collapse; min-width: 680px; }
  .price-table th, .price-table td { padding: 15px 20px; border-bottom: 1px solid var(--line); }
  .price-table tr:last-child th, .price-table tr:last-child td { border-bottom: none; }
  .price-table thead th { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); font-weight: 500; text-align: center; vertical-align: bottom; }
  .price-table thead th:first-child { text-align: left; }
  .price-table .tier-col-name { display: block; font-family: var(--font-display); font-size: 20px; color: var(--ink); text-transform: none; letter-spacing: -0.01em; margin-bottom: 3px; }
  .price-table .tier-col-price { display: block; font-family: var(--font-mono); font-size: 12px; color: var(--coral); text-transform: none; letter-spacing: 0.02em; }
  .price-table tbody th { text-align: left; font-weight: 500; color: var(--ink); font-size: 14px; }
  .price-table tbody td { text-align: center; font-size: 13px; color: var(--body); }
  .price-table .yes { color: var(--coral); font-weight: 700; font-size: 15px; }
  .price-table .no { color: var(--line-2); }
  .price-table .col-featured { background: var(--coral-tint); }

  /* ============================================================
     INTERIOR HERO WITH VISUAL + PRICING SCOPE PANEL
     ============================================================ */
  .page-hero-grid { display: grid; grid-template-columns: 1.04fr 0.96fr; gap: 56px; align-items: center; }
  @media (max-width: 960px) { .page-hero-grid { grid-template-columns: 1fr; gap: 44px; } }
  .page-hero-text { max-width: 600px; }

  .scope-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 26px; box-shadow: var(--shadow-lg); }
  .scope-panel-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
  .scope-panel-title { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink); }
  .scope-panel-tag { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink); background: var(--coral-soft); padding: 5px 9px; border-radius: var(--radius-pill); font-weight: 600; }
  .scope-rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
  .scope-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 13px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); }
  .scope-row-name { font-family: var(--font-display); font-size: 17px; color: var(--ink); line-height: 1.15; }
  .scope-row-meta { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 3px; }
  .scope-depth { display: flex; gap: 5px; flex-shrink: 0; }
  .scope-depth i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--line-2); display: block; }
  .scope-depth i.on { background: var(--coral); border-color: var(--coral); }
  .scope-panel-foot { border-top: 1px solid var(--line); padding-top: 16px; display: flex; flex-direction: column; gap: 10px; }
  .scope-foot-row { display: flex; justify-content: space-between; align-items: baseline; }
  .scope-foot-row span { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
  .scope-foot-row strong { font-family: var(--font-body); color: var(--ink); font-weight: 500; font-size: 14px; }
  .scope-foot-row.total strong { font-family: var(--font-display); font-size: 24px; color: var(--coral); font-weight: 400; }
  .scope-panel-note { margin-top: 14px; font-size: 12px; line-height: 1.5; color: var(--muted); }
  .tier-price-from { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(250,246,238,0.5); }

  /* ============================================================
     BOOK A CALL
     ============================================================ */
  .book-section { padding: 8px 0 96px; }
  .book-expect { display: flex; gap: 28px; flex-wrap: wrap; justify-content: center; margin-bottom: 32px; }
  .book-expect span { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }
  .book-expect span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--olive); flex-shrink: 0; }
  .book-embed { max-width: 880px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 14px; box-shadow: var(--shadow-md); }
  .book-embed iframe { width: 100%; border: none; overflow: hidden; min-height: 720px; display: block; border-radius: var(--radius-md); }
  .book-alt { text-align: center; margin-top: 28px; font-size: 14px; color: var(--muted); }
  .book-alt a { color: var(--coral-deep); text-decoration: underline; }

  /* ============================================================
     LEGAL PAGES + 404
     ============================================================ */
  .legal-section { padding: 8px 0 96px; }
  .legal-content { max-width: 760px; margin: 0 auto; }
  .legal-content h2 { font-size: clamp(22px, 2.2vw, 28px); margin: 44px 0 14px; }
  .legal-content h2:first-of-type { margin-top: 8px; }
  .legal-content p { font-size: 15px; line-height: 1.72; color: var(--body); margin-bottom: 14px; }
  .legal-content ul { margin: 0 0 16px; padding-left: 22px; }
  .legal-content li { font-size: 15px; line-height: 1.7; color: var(--body); margin-bottom: 7px; }
  .legal-content a { color: var(--coral-deep); text-decoration: underline; }
  .legal-content strong { color: var(--ink); font-weight: 500; }
  .legal-updated { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-top: 12px; }

  .notfound { padding: 130px 0 150px; text-align: center; position: relative; overflow: hidden; }
  .notfound .container { position: relative; z-index: 2; }
  .notfound-code { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--coral); margin-bottom: 20px; }
  .notfound h1 { font-size: clamp(48px, 7vw, 92px); margin-bottom: 18px; }
  .notfound p { font-size: 17px; line-height: 1.6; color: var(--body); max-width: 440px; margin: 0 auto 34px; }
  .notfound-links { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

  /* ============================================================
     CASE STUDIES
     ============================================================ */
  .breadcrumb { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--muted); padding-top: 24px; }
  .breadcrumb a { color: var(--muted); }
  .breadcrumb a:hover { color: var(--coral); }
  a.stat-card { text-decoration: none; color: inherit; transition: transform .25s, box-shadow .25s, border-color .25s; }
  a.stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--ink); }
  .case-readmore { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--coral); }
  .case-quote-by { margin-top: 18px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.03em; color: var(--muted); }


  /* ===================== PASS B chunk 2, hero restructure + TL;DR ===================== */
  section[id] { scroll-margin-top: 92px; }
  /* Home hero: full-width H1 above the body/visual grid */
  .hero .hero-meta-row { margin-bottom: 22px; }
  .hero-h1 { max-width: 1080px; margin-bottom: 44px; }
  @media (max-width: 1000px) { .hero-h1 { margin-bottom: 30px; } }
  .hero .hero-grid { align-items: start; }
  /* Chippy moved off the week-panel (was top:-20 left:-40) */
  .em-hero { top: auto; left: auto; bottom: -38px; right: -16px; }
  /* Vertical hero: full-width solo, kills the dead 2nd column */
  .page-hero-solo { position: relative; z-index: 2; }
  .page-hero-solo .page-hero-text { max-width: 100%; }
  .page-hero-solo h1 { max-width: 1040px; }
  .page-hero-solo .page-hero-sub, .page-hero-solo .lede { max-width: 640px; }
  /* TL;DR jumplink strip under long-page heroes */
  .tldr-wrap { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255,255,255,0.45); }
  .tldr-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; padding: 15px 0; }
  .tldr-label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin-right: 2px; }
  .tldr-strip a { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; color: var(--ink-2); transition: color .2s; }
  .tldr-strip a::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--coral); flex-shrink: 0; }
  .tldr-strip a:hover { color: var(--coral); }


  /* ===================== PASS B chunk 3, cards + grids ===================== */
  .fork-icon { width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--coral-tint); display: flex; align-items: center; justify-content: center; margin-bottom: 22px; }
  .fork-icon svg { width: 24px; height: 24px; fill: none; stroke: var(--coral-deep); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
  .fork-card .fork-quote { font-family: var(--font-display); font-style: italic; font-size: 16px; line-height: 1.4; color: var(--coral-deep); margin: 0 0 18px; padding-left: 16px; border-left: 2px solid var(--coral-soft); }
  .fork-card h3 { min-height: 84px; }
  @media (max-width: 880px) { .fork-card h3 { min-height: 0; } }
  /* Startups business-type picker: centered single row of three (VP5) */
  .fork-cards.cols-3 { grid-template-columns: repeat(3, 1fr); }
  @media (max-width: 880px) { .fork-cards.cols-3 { grid-template-columns: 1fr; } }
  /* Vertical "what you get" (6) + "what we run" (8): clean separated tiles, consistent coral (VP5) */
  #what-you-get .rituals-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  #what-we-run .rituals-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  #what-you-get .ritual, #what-we-run .ritual { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px 24px; }
  #what-you-get .ritual h3 em, #what-we-run .ritual h3 em { color: var(--coral); }
  @media (max-width: 1080px) { #what-you-get .rituals-grid, #what-we-run .rituals-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 680px) { #what-you-get .rituals-grid, #what-we-run .rituals-grid { grid-template-columns: 1fr; } }
  /* Pricing path-to-quote tinted to page, off the lone dark slate block (NEW-1) */
  .pricing-section.light { background: var(--paper-2); color: var(--ink); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .pricing-section.light .pricing-bg { display: none; }
  .pricing-section.light .pricing-head .eyebrow { color: var(--muted); }
  .pricing-section.light .pricing-head h2 { color: var(--ink); }
  .pricing-section.light .pricing-head h2 em { color: var(--coral); }
  .pricing-section.light .pricing-head p { color: var(--body); }
  .pricing-section.light .tier-card { background: var(--surface); border: 1px solid var(--line); }
  .pricing-section.light .tier-card.featured { background: linear-gradient(180deg, var(--surface) 0%, var(--coral-tint) 100%); border-color: var(--coral-soft); }
  .pricing-section.light .tier-name { color: var(--muted); }
  .pricing-section.light .tier-title { color: var(--ink); }
  .pricing-section.light .tier-title em { color: var(--coral); }
  .pricing-section.light .tier-card p { color: var(--body); }
  .pricing-section.light .tier-card strong { color: var(--ink); }


  /* ===================== PASS B chunk 4, kill the "6-layer dessert" (AB7 / CS4) ===================== */
  /* About + case studies: 2 background tones max, paper everywhere, one warm coral-tint accent */
  .doc-page .hww-intro { background: var(--paper); }
  .doc-page .hww-honest { background: var(--coral-tint); }
  .doc-page .hww-honest-card p { color: var(--ink); }


  /* ===================== PASS B chunk 5, case realism + imagery ===================== */
  .case-context { margin: 18px 0 2px; padding-left: 16px; border-left: 2px solid var(--coral); font-size: 15px; line-height: 1.55; color: var(--body); max-width: 560px; }
  .case-context span { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--coral-deep); margin-bottom: 5px; }


  /* case-study index: thumbnails + 4-up grid (W3) */
  .stats-grid.cases { grid-template-columns: repeat(4, 1fr); }
  @media (max-width: 1080px){ .stats-grid.cases { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 600px){ .stats-grid.cases { grid-template-columns: 1fr; } }
  .stats-grid.cases .stat-card { min-height: 0; padding: 0 0 26px; overflow: hidden; }
  .stats-grid.cases .stat-vertical, .stats-grid.cases .stat-num, .stats-grid.cases .stat-claim, .stats-grid.cases .case-readmore { padding-left: 26px; padding-right: 26px; }
  .stats-grid.cases .stat-num { font-size: clamp(40px, 3.4vw, 52px); margin-top: 20px; }
  .case-thumb { height: 96px; background: var(--coral-tint); display: block; }
  .stat-card.slate .case-thumb { background: var(--slate-tint); }
  .stat-card.olive .case-thumb { background: var(--olive-tint); }
  .case-thumb svg { width: 100%; height: 100%; display: block; }
  .case-thumb .br { fill: var(--coral); opacity: 0.55; }
  .case-thumb .br:last-child { opacity: 0.9; }
  .stat-card.slate .case-thumb .br { fill: var(--slate); }
  .stat-card.olive .case-thumb .br { fill: var(--olive); }
  .case-thumb .case-line { fill: none; stroke: var(--coral); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; opacity: 0.78; vector-effect: non-scaling-stroke; }
  .stat-card.slate .case-thumb .case-line { stroke: var(--slate); }
  .stat-card.olive .case-thumb .case-line { stroke: var(--olive); }
  .case-thumb .case-dot { fill: var(--paper); stroke: var(--coral); stroke-width: 4; vector-effect: non-scaling-stroke; }
  .stat-card.slate .case-thumb .case-dot { stroke: var(--slate); }
  .stat-card.olive .case-thumb .case-dot { stroke: var(--olive); }
  .case-thumb .ghost { opacity: 0.22; }

  /* ===================== PASS B+, hero booking-CTA card (fills hero blank space) + booking loading ===================== */
  .page-hero-grid.vhero-grid { gap: 48px; align-items: center; }
  .vhero-visual { position: relative; }
  .vlive-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--olive); box-shadow: 0 0 0 4px rgba(107,142,90,0.15); flex-shrink: 0; animation: pulseOlive 2.4s ease-in-out infinite; }
  .book-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 32px 30px; box-shadow: var(--shadow-lg); position: relative; overflow: hidden; }
  .book-card::before { content: ""; position: absolute; top: -90px; right: -70px; width: 240px; height: 240px; border-radius: 50%; background: var(--coral); filter: blur(70px); opacity: 0.10; pointer-events: none; }
  .book-card > * { position: relative; }
  .book-card-top { margin-bottom: 18px; }
  .book-card-pill { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink); background: var(--olive-soft); padding: 6px 12px; border-radius: var(--radius-pill); }
  .book-card-title { font-family: var(--font-display); font-size: 28px; line-height: 1.12; color: var(--ink); margin-bottom: 12px; letter-spacing: -0.015em; }
  .book-card-title em { font-style: italic; color: var(--coral); }
  .book-card-sub { font-size: 14px; line-height: 1.55; color: var(--body); margin-bottom: 20px; }
  .book-card-list { list-style: none; display: flex; flex-direction: column; gap: 11px; margin-bottom: 24px; }
  .book-card-list li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--ink); align-items: start; }
  .book-card-list li::before { content: "\2713"; color: var(--coral-deep); font-weight: 700; font-size: 13px; line-height: 1.5; }
  .book-card-cta { width: 100%; justify-content: center; }
  .book-card-foot { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--muted); text-align: center; margin-top: 14px; }
  @media (max-width: 960px) { .vhero-visual { max-width: 460px; } }
  /* booking calendar loading state, no more blank white flash */
  .book-embed { position: relative; }
  .book-loading { position: absolute; inset: 14px; display: flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.03em; color: var(--muted); background: var(--surface); border-radius: var(--radius-md); transition: opacity .5s ease; pointer-events: none; }


  /* card-grid icons, visual texture on the "what you get" / "what we run" grids */
  .ritual-icon { width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--coral-tint); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; }
  .ritual-icon svg { width: 21px; height: 21px; fill: none; stroke: var(--coral-deep); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }


  /* ===================== funnel diagram (vertical "where revenue leaks") ===================== */
  .funnel-viz { background: var(--ink); border-radius: var(--radius-xl); padding: 32px 32px 24px; margin-bottom: 48px; position: relative; overflow: hidden; box-shadow: var(--shadow-md); }
  .funnel-viz::after { content: ""; position: absolute; bottom: -70px; right: -50px; width: 260px; height: 260px; border-radius: 50%; background: var(--coral); filter: blur(75px); opacity: 0.20; pointer-events: none; }
  .funnel-viz-bars { display: flex; align-items: flex-end; gap: 14px; height: 140px; position: relative; z-index: 1; }
  .funnel-viz-bars .funnel-viz-bar { flex: 1; background: linear-gradient(180deg, var(--coral), var(--coral-deep)); border-radius: 8px 8px 3px 3px; }
  .funnel-viz-labels { display: flex; gap: 14px; margin-top: 14px; position: relative; z-index: 1; }
  .funnel-viz-labels span { flex: 1; text-align: center; font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(250,246,238,0.72); }
  @media (max-width: 640px) { .funnel-viz-bars { height: 96px; gap: 8px; } .funnel-viz-labels { gap: 8px; } .funnel-viz-labels span { font-size: 8.5px; } }

  /* ===================== About, "the work, in practice" band ===================== */
  .about-work { padding: 32px 0 96px; }
  .about-work-head { max-width: 720px; margin-bottom: 40px; }
  .about-work-head .eyebrow { margin-bottom: 18px; }
  .about-work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  @media (max-width: 880px) { .about-work-grid { grid-template-columns: 1fr; } }
  .aw-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 24px; box-shadow: var(--shadow-md); }
  .aw-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
  .aw-tag { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink); }
  .aw-rows { display: flex; flex-direction: column; gap: 11px; }
  .aw-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 13px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); }
  .aw-row span { font-size: 13px; color: var(--body); }
  .aw-row b { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; padding: 4px 9px; border-radius: var(--radius-pill); white-space: nowrap; }
  .aw-row b.live { background: var(--olive-soft); color: var(--ink); }
  .aw-row b.now { background: var(--coral-soft); color: var(--ink); }
  .aw-row b.queued { background: var(--slate-soft); color: var(--slate); }
  .aw-chart { background: var(--coral-tint); border-radius: var(--radius-md); padding: 16px; margin-bottom: 16px; }
  .aw-chart svg { width: 100%; height: 96px; display: block; }
  .aw-chart .br { fill: var(--coral); opacity: 0.55; }
  .aw-chart .br:last-child { opacity: 0.9; }
  .aw-card-foot { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--muted); }


  /* ===================== pain quotes to quote cards (verticals) ===================== */
  .notfor-section.pains .notfor-grid { grid-template-columns: 1fr; gap: 36px; }
  .notfor-section.pains .notfor-head { max-width: 760px; }
  .notfor-section.pains .notfor-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 16px; }
  .notfor-section.pains .notfor-item { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; }
  .notfor-section.pains .notfor-x { display: none; }
  .notfor-section.pains .notfor-item p { font-family: var(--font-display); font-style: italic; font-size: 16px; line-height: 1.45; color: var(--ink); position: relative; padding-top: 26px; margin: 0; }
  .notfor-section.pains .notfor-item p::before { content: "\201C"; position: absolute; top: -2px; left: -2px; font-family: var(--font-display); font-size: 48px; line-height: 1; color: var(--coral); opacity: 0.45; }
  .notfor-section.pains .notfor-item em { font-style: italic; }

  /* ===================== How We Work, ritual timeline ===================== */
  .rtimeline { margin: 8px 0 48px; }
  .rtimeline-track { display: flex; justify-content: space-between; gap: 12px; position: relative; }
  .rtimeline-line { position: absolute; top: 8px; left: 10%; right: 10%; height: 2px; background: linear-gradient(90deg, var(--coral), var(--slate), var(--olive)); opacity: 0.45; }
  .rtimeline-node { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 9px; position: relative; z-index: 1; }
  .rtimeline-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--coral); border: 3px solid var(--paper); box-shadow: 0 0 0 1px var(--line-2); }
  .rtimeline-node.slate .rtimeline-dot { background: var(--slate); }
  .rtimeline-node.olive .rtimeline-dot { background: var(--olive); }
  .rtimeline-day { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink); font-weight: 500; }
  .rtimeline-label { font-size: 13px; color: var(--body); line-height: 1.3; max-width: 140px; }
  @media (max-width: 700px) { .rtimeline-track { flex-direction: column; gap: 18px; align-items: flex-start; } .rtimeline-line { display: none; } .rtimeline-node { flex-direction: row; text-align: left; gap: 12px; align-items: center; } .rtimeline-label { max-width: none; } }


  /* ===================== case-study hero results chart ===================== */
  .case-chart { background: var(--coral-tint); border-radius: var(--radius-md); padding: 14px; margin: 16px 0 6px; }
  .deep-card.slate .case-chart { background: var(--slate-tint); }
  .deep-card.olive .case-chart { background: var(--olive-tint); }
  .case-chart svg { width: 100%; height: 62px; display: block; }
  .cc-area { fill: var(--coral); opacity: 0.12; }
  .cc-line { fill: none; stroke: var(--coral); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
  .deep-card.slate .cc-area { fill: var(--slate); }
  .deep-card.slate .cc-line { stroke: var(--slate); }
  .deep-card.olive .cc-area { fill: var(--olive); }
  .deep-card.olive .cc-line { stroke: var(--olive); }


  /* ===================== accessibility: respect reduced-motion ===================== */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
    .reveal { opacity: 1 !important; transform: none !important; }
  }


  /* ===================== Chippy throughout (Vector-style mascot) + squiggle ===================== */
  .final-cta { overflow: hidden; }
  .cta-chippy { position: absolute; bottom: -20px; right: 6%; width: 92px; height: 92px; z-index: 1; pointer-events: none; animation: emFloat 5s ease-in-out infinite; filter: drop-shadow(0 8px 18px rgba(24,22,18,0.12)); }
  @media (max-width: 700px) { .cta-chippy { width: 64px; right: 4%; bottom: -14px; } }
  .notfound-chippy { width: 150px; height: 150px; display: block; margin: 0 auto 22px; animation: emFloat 5s ease-in-out infinite; }
  .squig { position: relative; display: inline-block; }
  .squig-line { position: absolute; left: 0; bottom: -0.16em; width: 100%; height: 0.34em; overflow: visible; }
  .squig-line path { fill: none; stroke: var(--coral); stroke-width: 3.5; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: 0.85; }


  /* ===================== ELEVATED (Vector energy, in brand), home sample ===================== */
  .circled { position: relative; display: inline-block; }
  .doodle-circle { position: absolute; left: -9%; top: -16%; width: 118%; height: 132%; overflow: visible; pointer-events: none; }
  .doodle-circle path { fill: none; stroke: var(--coral); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: 0.92; }
  .statement { background: var(--ink); color: var(--paper); padding: 82px 0 90px; position: relative; overflow: hidden; }
  .statement-blob { position: absolute; width: 620px; height: 620px; border-radius: 50%; background: var(--coral); filter: blur(150px); opacity: 0.22; top: -220px; left: -140px; pointer-events: none; }
  .statement .container { position: relative; z-index: 2; max-width: 1000px; }
  .statement .eyebrow { color: rgba(250,246,238,0.6); margin-bottom: 22px; }
  .statement .eyebrow::before { background: var(--coral); }
  .statement h2 { color: var(--paper); font-size: clamp(34px, 4.6vw, 64px); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; max-width: 20ch; }
  .statement h2 em { font-style: italic; color: var(--coral); }
  .statement-sub { font-family: var(--font-display); font-style: italic; font-size: clamp(20px, 2.2vw, 26px); color: rgba(250,246,238,0.72); margin-top: 26px; max-width: 560px; line-height: 1.4; }
  .statement-chippy { position: absolute; bottom: -24px; right: 7%; width: 120px; height: 120px; z-index: 2; animation: emFloat 5s ease-in-out infinite; filter: drop-shadow(0 10px 22px rgba(0,0,0,0.3)); }
  @media (max-width: 760px) { .statement-chippy { width: 78px; right: 5%; bottom: -16px; } .statement h2 { font-size: clamp(34px, 9vw, 56px); } }


  /* ===================== STUDIO POLISH, rhythm + motion ===================== */
  .nav::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: var(--coral); transform: scaleX(var(--scroll-progress, 0));
    transform-origin: left center; opacity: 0.9; pointer-events: none;
  }
  .nav-links a { position: relative; padding-bottom: 3px; }
  .nav-links a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: var(--coral); transform: scaleX(0); transform-origin: right center;
    transition: transform .28s cubic-bezier(.2,.7,.3,1);
  }
  .nav-links a:hover::after { transform: scaleX(1); transform-origin: left center; }

  .btn { position: relative; overflow: hidden; transform-origin: center; }
  .btn::before {
    content: ""; position: absolute; inset: 1px; border-radius: inherit; pointer-events: none;
    background: linear-gradient(115deg, transparent 0%, rgba(250,246,238,0.22) 44%, transparent 58%);
    opacity: 0; transform: translateX(-120%); transition: opacity .2s ease, transform .62s cubic-bezier(.2,.7,.3,1);
  }
  .btn:hover::before { opacity: 1; transform: translateX(120%); }
  .btn-ghost::before { display: none; }

  .fork-card,
  .stat-card,
  .compare-card,
  .ritual,
  .deep-card,
  .tier-card,
  .tier-step,
  .ritual-index-card,
  .aw-card,
  .notfor-section.pains .notfor-item,
  .book-card,
  .scope-panel {
    position: relative; isolation: isolate;
  }
  .fork-card::after,
  .stat-card::after,
  .compare-card::after,
  .ritual::after,
  .deep-card::after,
  .tier-card::after,
  .tier-step::after,
  .ritual-index-card::after,
  .aw-card::after,
  .notfor-section.pains .notfor-item::after,
  .book-card::after,
  .scope-panel::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
    background: radial-gradient(circle at var(--spot-x, 50%) var(--spot-y, 0%), rgba(234,92,69,0.14), transparent 34%);
    opacity: 0; transition: opacity .25s ease;
  }
  .fork-card > *,
  .stat-card > *,
  .compare-card > *,
  .ritual > *,
  .deep-card > *,
  .tier-card > *,
  .tier-step > *,
  .ritual-index-card > *,
  .aw-card > *,
  .notfor-section.pains .notfor-item > *,
  .book-card > *,
  .scope-panel > * {
    position: relative; z-index: 1;
  }
  .fork-card:hover::after,
  .stat-card:hover::after,
  .compare-card:hover::after,
  .ritual:hover::after,
  .deep-card:hover::after,
  .tier-card:hover::after,
  .tier-step:hover::after,
  .ritual-index-card:hover::after,
  .aw-card:hover::after,
  .notfor-section.pains .notfor-item:hover::after,
  .book-card:hover::after,
  .scope-panel:hover::after,
  .studio-hover.is-hovering::after {
    opacity: 1;
  }

  .fork-card,
  .stat-card,
  .compare-card,
  .deep-card,
  .tier-card,
  .tier-step,
  .ritual-index-card,
  .aw-card,
  .scope-panel {
    transition: transform .32s cubic-bezier(.2,.7,.3,1), box-shadow .32s ease, border-color .25s ease;
  }
  .deep-card:hover,
  .tier-card:hover,
  .tier-step:hover,
  .aw-card:hover,
  .scope-panel:hover {
    transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--ink);
  }

  .fork-section,
  .proof-section,
  .faq-section,
  .price-table-section,
  .hww-intro,
  .statement {
    position: relative;
  }
  .fork-section::before,
  .proof-section::before,
  .faq-section::before,
  .price-table-section::before,
  .hww-intro::before,
  .statement::before {
    content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 32px; pointer-events: none; z-index: 1;
    background: var(--paper); clip-path: polygon(0 0, 100% 0, 100% 11px, 76% 24px, 46% 12px, 18% 27px, 0 15px);
  }
  .fork-section::before,
  .hww-intro::before { background: var(--paper); }
  .proof-section::before,
  .faq-section::before,
  .price-table-section::before { background: var(--surface); }
  .statement::before { background: var(--paper); height: 40px; }

  @media (min-width: 981px) {
    /* Codex staggers removed: aligned grids read cleaner than artsy offsets */
    .fork-cards .fork-card,
    .stats-grid .stat-card,
    .compare-grid .compare-card,
    .rituals-grid .ritual { margin-top: 0; }
  }
  @media (max-width: 980px) {
    .fork-card,
    .stat-card,
    .compare-card,
    .ritual { margin-top: 0 !important; }
  }

  .reveal { transition-timing-function: cubic-bezier(.16,1,.3,1); }
  .reveal:is(.fork-card, .stat-card, .ritual, .compare-card, .deep-card, .tier-card, .tier-step, .book-card, .aw-card, .notfor-item, .scope-panel) {
    transform: translateY(28px) rotate(0.35deg);
  }
  .reveal:is(.fork-card, .stat-card, .ritual, .compare-card, .deep-card, .tier-card, .tier-step, .book-card, .aw-card, .notfor-item, .scope-panel):nth-child(even) {
    transform: translateY(28px) rotate(-0.35deg);
  }
  .reveal:is(.fork-card, .stat-card, .ritual, .compare-card, .deep-card, .tier-card, .tier-step, .book-card, .aw-card, .notfor-item, .scope-panel).in {
    transform: translateY(0) rotate(0);
  }

  .reveal:not(.in) .squig-line path,
  .reveal:not(.in) .doodle-circle path {
    stroke-dasharray: 170;
    stroke-dashoffset: 170;
  }
  .reveal.in .squig-line path,
  .reveal.in .doodle-circle path {
    animation: drawDoodle .9s .2s cubic-bezier(.16,1,.3,1) both;
  }
  @keyframes drawDoodle { to { stroke-dashoffset: 0; } }

  .funnel-viz-bar { transform-origin: bottom; transform: scaleY(.18); transition: transform .82s cubic-bezier(.16,1,.3,1); }
  .reveal.in .funnel-viz-bar,
  .funnel-viz.reveal.in .funnel-viz-bar { transform: scaleY(1); }
  .reveal.in .funnel-viz-bar:nth-child(2),
  .funnel-viz.reveal.in .funnel-viz-bar:nth-child(2) { transition-delay: .08s; }
  .reveal.in .funnel-viz-bar:nth-child(3),
  .funnel-viz.reveal.in .funnel-viz-bar:nth-child(3) { transition-delay: .16s; }
  .reveal.in .funnel-viz-bar:nth-child(4),
  .funnel-viz.reveal.in .funnel-viz-bar:nth-child(4) { transition-delay: .24s; }
  .reveal.in .funnel-viz-bar:nth-child(5),
  .funnel-viz.reveal.in .funnel-viz-bar:nth-child(5) { transition-delay: .32s; }

  .faq-item { transition: background .25s ease, padding-left .25s ease, padding-right .25s ease; }
  .faq-item:hover { background: rgba(250,246,238,0.56); padding-left: 16px; padding-right: 16px; }
  .faq-item.open { padding-left: 16px; padding-right: 16px; }

  @supports (animation-timeline: view()) {
    .statement-blob,
    .footer-blob {
      animation: slowDrift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    .final-cta-bg::before {
      animation: slowDriftCentered linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    @keyframes slowDrift {
      from { transform: translate3d(-24px, 0, 0) scale(0.96); }
      to { transform: translate3d(24px, 32px, 0) scale(1.04); }
    }
    @keyframes slowDriftCentered {
      from { transform: translate(-50%, -50%) translate3d(-24px, 0, 0) scale(0.96); }
      to { transform: translate(-50%, -50%) translate3d(24px, 32px, 0) scale(1.04); }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .nav::after { transform: scaleX(0) !important; }
    .funnel-viz-bar { transform: none !important; }
    .reveal.in .squig-line path,
    .reveal.in .doodle-circle path { animation: none !important; }
    .fork-card,
    .stat-card,
    .compare-card,
    .ritual,
    .deep-card,
    .tier-card,
    .tier-step,
    .ritual-index-card,
    .aw-card,
    .scope-panel { transform: none !important; }
  }


  /* ===================== PRICING PROOF PANEL ===================== */
  .quote-panel { max-width: 520px; justify-self: end; }
  .quote-panel.reveal { transform: translateY(28px) rotate(0.6deg); }
  .quote-panel.reveal.in { transform: rotate(0.6deg); }
  .quote-panel-title {
    font-family: var(--font-display); font-size: clamp(28px, 3vw, 42px);
    line-height: 1; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 12px;
  }
  .quote-panel-copy { color: var(--body); font-size: 14px; line-height: 1.55; margin-bottom: 24px; max-width: 360px; }
  .quote-panel .scope-row { align-items: flex-start; }
  .quote-panel .scope-panel-foot { margin-top: 8px; }
  .quote-panel .scope-foot-row.total strong { color: var(--ink); font-size: 18px; }
  @media (max-width: 960px) { .quote-panel { justify-self: start; max-width: 100%; } .quote-panel.reveal.in { transform: none; } }

  /* ============================================================
     PREMIUM POLISH PASS: spacing rhythm + motion refinement
     Self-contained override block (appended last). Easy to revert.
     ============================================================ */

  /* Container: tighter, more comfortable gutter on small screens */
  .container { padding-left: clamp(20px, 5vw, 32px); padding-right: clamp(20px, 5vw, 32px); }

  /* Unified, responsive section rhythm: breathes on desktop, tightens on mobile, consistent across the site */
  .fork-section { padding-top: clamp(84px, 9vw, 120px); padding-bottom: clamp(88px, 9.5vw, 128px); }
  .compare-section,
  .proof-section,
  .operators-section,
  .pricing-section,
  .notfor-section { padding-top: clamp(82px, 9vw, 122px); padding-bottom: clamp(82px, 9vw, 122px); }
  .tier-path-section,
  .price-table-section { padding-top: clamp(78px, 8.5vw, 112px); padding-bottom: clamp(78px, 8.5vw, 112px); }
  .newsletter-section { padding-top: clamp(72px, 8vw, 104px); padding-bottom: clamp(72px, 8vw, 104px); }
  .rituals-section { padding-top: clamp(96px, 11vw, 144px); padding-bottom: clamp(88px, 10vw, 124px); }
  .faq-section { padding-top: clamp(80px, 9vw, 112px); padding-bottom: clamp(90px, 10vw, 128px); }
  .final-cta { padding-top: clamp(96px, 12vw, 144px); padding-bottom: clamp(96px, 12vw, 144px); }
  .hww-intro { padding-top: clamp(56px, 6.5vw, 76px); padding-bottom: clamp(60px, 7vw, 84px); }
  .hww-honest { padding-top: clamp(72px, 8vw, 100px); padding-bottom: clamp(72px, 8vw, 100px); }
  .page-hero { padding-top: clamp(48px, 6vw, 72px); padding-bottom: clamp(64px, 7.5vw, 92px); }
  .logos-section { padding-top: clamp(44px, 5vw, 60px); padding-bottom: clamp(30px, 3.5vw, 40px); }

  /* Section heads: a hair more air below */
  .compare-head, .proof-head { margin-bottom: clamp(44px, 5vw, 64px); }

  /* Keep the hero from feeling cramped on phones */
  @media (max-width: 600px) {
    .hero { padding: 40px 0 64px; }
    .hero-meta-row { margin-bottom: 24px; }
  }

  /* ===== Motion refinement ===== */

  /* Smoother, more refined base reveal easing (matches the card easing) + gentler stagger */
  .reveal { transform: translateY(22px); transition: opacity .82s cubic-bezier(.16,1,.3,1), transform .82s cubic-bezier(.16,1,.3,1); }
  .reveal.d1 { transition-delay: .09s; }
  .reveal.d2 { transition-delay: .18s; }
  .reveal.d3 { transition-delay: .27s; }
  .reveal.d4 { transition-delay: .36s; }

  /* Consistent premium hover lift across the main interactive cards */
  .fork-card, .stat-card, a.stat-card, .compare-card, .ritual, .ritual-index-card, .op-card {
    transition: transform .34s cubic-bezier(.16,1,.3,1), box-shadow .34s cubic-bezier(.16,1,.3,1), border-color .25s ease;
  }
  .fork-card:hover, .stat-card:hover, a.stat-card:hover, .compare-card:hover, .ritual:hover, .ritual-index-card:hover, .op-card:hover {
    transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--ink);
  }

  /* Arrow micro-nudge on hover, a small premium detail */
  .arrow, .fork-link .arrow { transition: transform .28s cubic-bezier(.16,1,.3,1); }
  .btn:hover .arrow,
  .fork-card:hover .fork-link .arrow,
  .tldr-strip a:hover .arrow { transform: translateX(4px); }

  /* Buttons: slightly more lift, smoother easing */
  .btn { transition: transform .26s cubic-bezier(.16,1,.3,1), box-shadow .26s ease, background .2s ease, border-color .2s ease, color .2s ease; }
  .btn-primary:hover, .btn-coral:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

  /* Reinforce reduced-motion */
  @media (prefers-reduced-motion: reduce) {
    .reveal { transition: none; }
    .fork-card, .stat-card, a.stat-card, .compare-card, .ritual, .ritual-index-card, .op-card { transition: none; }
  }

  /* ===== Booking-calendar CTA (final-cta 2-col variant) + trust strip ===== */
  .cta-booking { text-align: left; }
  .cta-booking-grid { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(40px, 5vw, 72px); align-items: center; position: relative; z-index: 2; }
  @media (max-width: 940px) { .cta-booking-grid { grid-template-columns: 1fr; gap: 40px; } }
  .cta-booking .cta-booking-copy { text-align: left; }
  .cta-booking h2 { font-size: clamp(38px, 4.6vw, 62px); max-width: 15ch; margin-left: 0; margin-right: 0; }
  .cta-booking .final-cta-sub { margin: 0 0 32px; max-width: 470px; }
  .cta-booking .final-cta-buttons { justify-content: flex-start; }
  .cal-frame { display: block; position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: clamp(20px, 3vw, 36px); transition: transform .34s cubic-bezier(.16,1,.3,1), box-shadow .34s cubic-bezier(.16,1,.3,1); }
  .cal-frame:hover { transform: translateY(-5px); box-shadow: 0 32px 72px rgba(24,22,18,0.14); }
  .cal-frame img { display: block; width: 100%; height: auto; }
  @media (max-width: 940px) { .cal-frame { max-width: 460px; margin: 8px auto 0; } }

  /* ===== Free Google Ads offer band + hero offer line ===== */
  .hero-offer { margin-top: 14px; }
  .hero-offer-link { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-2); transition: color .2s; }
  .hero-offer-link strong { color: var(--coral); font-weight: 600; }
  .hero-offer-link:hover { color: var(--coral-deep); }
  .hero-offer-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 4px var(--coral-tint); flex-shrink: 0; }
  .hero-offer-link .arrow { transition: transform .28s cubic-bezier(.16,1,.3,1); }
  .hero-offer-link:hover .arrow { transform: translateX(3px); }

  .offer-band { padding: clamp(8px, 2vw, 24px) 0 clamp(40px, 7vw, 88px); }
  .offer-card { position: relative; background: var(--coral-tint); border: 1px solid var(--coral-soft); border-radius: var(--radius-xl); padding: clamp(40px, 5.5vw, 76px) clamp(28px, 5vw, 72px); max-width: 900px; margin: 0 auto; text-align: center; overflow: hidden; }
  .offer-card::before { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; filter: blur(120px); background: var(--coral); opacity: 0.10; top: -180px; right: -120px; pointer-events: none; }
  .offer-tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; background: var(--coral); padding: 7px 15px; border-radius: var(--radius-pill); margin-bottom: 24px; position: relative; z-index: 1; }
  .offer-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; }
  .offer-card h2 { font-size: clamp(30px, 4vw, 52px); margin: 0 auto 20px; max-width: 17ch; position: relative; z-index: 1; }
  .offer-card > p { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.62; color: var(--body); max-width: 640px; margin: 0 auto 18px; position: relative; z-index: 1; }
  .offer-card > p strong { color: var(--ink); font-weight: 600; }
  .offer-card .offer-fine { font-size: 14px; line-height: 1.6; color: var(--muted); max-width: 580px; margin: 0 auto 30px; }
  .offer-card .offer-fine strong { color: var(--ink); }
  .offer-card .btn { position: relative; z-index: 1; }

  /* ===== FAQ full-height expand + fork-card compaction ===== */
  .faq-a { transition: max-height .35s ease; }
  .faq-item.open .faq-a { max-height: 1200px; }
  .fork-card { padding: 32px 32px; }
  .fork-icon { margin-bottom: 16px; }
  .fork-vertical { margin-bottom: 14px; }
  .fork-card h3 { min-height: 0; }
  .fork-card p { margin-bottom: 20px; }
  .fork-card-stack { margin-bottom: 20px; }

  /* ===== Fork glow softened + Chippy repositioned (homepage hero) ===== */
  .fork-card-glow { width: 190px; height: 190px; top: -78px; right: -64px; opacity: 0.2; filter: blur(70px); }
  .em-hero { top: auto; left: -14px; right: auto; bottom: 22px; }

  /* ===== Fork cards: push the link to the bottom so there's no dead band ===== */
  .fork-card { display: flex; flex-direction: column; }
  .fork-card .fork-card-content { display: flex; flex-direction: column; flex: 1 1 auto; width: 100%; }
  .fork-card .fork-link { margin-top: auto; }

  /* ============================================================
     a11y: deepen SMALL coral text + coral tags to --coral-deep for WCAG AA.
     The large signature display italic (em.disp, heading em) stays bright
     --coral. coral-deep #C8442E clears ~4.5:1 on paper/surface. Appended
     last so it wins on equal specificity over the base coral rules above.
     ============================================================ */
  .tier-pill .price,
  .rituals-footer-text strong,
  .fork-card.dtc .fork-vertical,
  .op-role,
  .ritual-index-card.coral .ritual-index-num,
  .hww-honest-card p strong,
  .tier-step-num,
  .price-table .tier-col-price,
  .price-table .yes,
  .notfound-code,
  .case-readmore,
  .hero-offer-link strong,
  .compare-card.good .compare-bottom-value,
  .notfor-x { color: var(--coral-deep); }
  .tier-list li::before { color: var(--coral-deep); }
  .compare-tag.good,
  .compare-card.good .compare-icon,
  .offer-tag { background: var(--coral-deep); }
  /* final-CTA eyebrows are set to coral via inline style; force deep coral for AA */
  .eyebrow[style*="var(--coral)"] { color: var(--coral-deep) !important; }

  /* ============================================================
     HOMEPAGE PASS C (2026-06-04): reel, tag, transitions, dark band
     ============================================================ */
  html { scroll-behavior: smooth; }

  /* Hero: small status tag instead of the wide tier-ladder bar */
  .hero-tag { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--body); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 7px 14px; }
  .hero-tag-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--olive); box-shadow: 0 0 0 4px var(--olive-tint); flex-shrink: 0; }

  /* Logo reel: bigger marks, infinite scroll, soft edge fade, pause on hover */
  .logos-section { padding: 52px 0 44px; }
  .logos-reel { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
  .logos-track { display: flex; width: max-content; animation: logosScroll 60s linear infinite; }
  .logos-reel:hover .logos-track { animation-play-state: paused; }
  .logos-set { display: flex; align-items: center; gap: 72px; padding-right: 72px; }
  .logo-cell { height: 48px; font-size: 22px; opacity: 0.7; white-space: nowrap; }
  @keyframes logosScroll { to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) {
    .logos-track { animation: none; width: auto; }
    .logos-set { flex-wrap: wrap; justify-content: center; gap: 20px 44px; padding-right: 0; }
    .logos-set[aria-hidden="true"] { display: none; }
  }

  /* Rituals: lift on hover without the dark border */
  .ritual:hover { border-color: var(--line); }

  /* Seamless transitions between light sections (the torn edge stays a dark-band move) */
  .fork-section::before,
  .proof-section::before,
  .faq-section::before,
  .price-table-section::before,
  .hww-intro::before { display: none; }

  /* Statement band: torn edge along the bottom to match the top */
  .statement { padding-bottom: 108px; }
  .statement::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 40px; pointer-events: none; z-index: 1;
    background: var(--paper);
    clip-path: polygon(0 100%, 100% 100%, 100% calc(100% - 11px), 76% calc(100% - 24px), 46% calc(100% - 12px), 18% calc(100% - 27px), 0 calc(100% - 15px));
  }

  /* Fork cards: keep the value row on one line, label vertically centered */
  .fork-stack-row { align-items: center; }
  .fork-stack-row strong { white-space: nowrap; }

  /* BUGFIX: the card-spotlight chunk sets `.card > *` to position:relative, which
     knocked absolutely-positioned decorations into the layout flow (the fork-card
     glow alone added ~190px of dead space above the icon). Re-assert them with
     higher specificity. */
  .fork-card > .fork-card-glow { position: absolute; z-index: 0; }
  .stat-card > .stat-card-strip { position: absolute; }
  .ritual > .ritual-replace { position: absolute; }
  @media (max-width: 980px) {
    .ritual > .ritual-replace { position: relative; bottom: 0; left: 0; }
  }

  /* Some of the work: more air between the color bar and the text */
  .stat-card { padding-top: 48px; }

  /* Who's on it: dark band (homepage) + cursor-follow orb, same spec as the cards */
  .hww-honest.hww-dark { background: var(--ink); border-top: none; position: relative; overflow: hidden; isolation: isolate; }
  .hww-honest.hww-dark .eyebrow { color: rgba(250,246,238,0.6); }
  .hww-honest.hww-dark .eyebrow::before { background: var(--coral); }
  .hww-honest.hww-dark .hww-honest-card h2 { color: var(--paper); }
  .hww-honest.hww-dark .hww-honest-card p { color: rgba(250,246,238,0.78); }
  .hww-honest.hww-dark .hww-honest-card p strong { color: var(--coral); }
  .hww-honest.hww-dark::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background: radial-gradient(circle at var(--spot-x, 50%) var(--spot-y, 0%), rgba(234,92,69,0.14), transparent 34%);
    opacity: 0; transition: opacity .25s ease;
  }
  .hww-honest.hww-dark.is-hovering::after { opacity: 1; }
  .hww-honest.hww-dark > * { position: relative; z-index: 1; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  }

  /* ============================================================
     MICRO-INTERACTIONS PASS (2026-06-09): quiet entrances for the
     data details. Every entrance state is gated on html.js (same
     pattern as .reveal: a JS failure never hides content) and is
     neutralized under prefers-reduced-motion.
     ============================================================ */

  /* How-we-work ritual timeline: the line draws across, dots pop in sequence */
  html.js .rtimeline.reveal .rtimeline-line { transform: scaleX(0); transform-origin: left center; transition: transform .9s cubic-bezier(.16,1,.3,1) .15s; }
  html.js .rtimeline.reveal.in .rtimeline-line { transform: scaleX(1); }
  html.js .rtimeline.reveal .rtimeline-dot { transform: scale(0); transition: transform .5s cubic-bezier(.34,1.56,.64,1); }
  html.js .rtimeline.reveal.in .rtimeline-dot { transform: scale(1); }
  html.js .rtimeline.reveal.in .rtimeline-node:nth-child(3) .rtimeline-dot { transition-delay: .14s; }
  html.js .rtimeline.reveal.in .rtimeline-node:nth-child(4) .rtimeline-dot { transition-delay: .28s; }
  html.js .rtimeline.reveal.in .rtimeline-node:nth-child(5) .rtimeline-dot { transition-delay: .42s; }

  /* Pricing scope panel: depth dots fill in sequence once the panel reveals */
  html.js .scope-panel.reveal .scope-depth i.on { background: transparent; border-color: var(--line-2); transition: background .35s ease, border-color .35s ease; }
  html.js .scope-panel.reveal.in .scope-depth i.on { background: var(--coral); border-color: var(--coral); }
  html.js .scope-panel.reveal.in .scope-depth i.on:nth-child(2) { transition-delay: .14s; }
  html.js .scope-panel.reveal.in .scope-depth i.on:nth-child(3) { transition-delay: .28s; }

  @media (prefers-reduced-motion: reduce) {
    html.js .rtimeline.reveal .rtimeline-line,
    html.js .rtimeline.reveal .rtimeline-dot { transform: none !important; }
    html.js .scope-panel.reveal .scope-depth i.on { background: var(--coral); border-color: var(--coral); }
  }

  /* ============================================================
     SECTION RHYTHM UNIFICATION (2026-06-09)
     One vertical scale for every section, site-wide. Three tokens:
       --sec-pad     standard full section
       --sec-pad-lg  marquee moments (home rituals, final CTA, 404)
       --sec-pad-sm  intro / support bands
     plus one --head-gap from every section head to its content.
     Replaces the assorted fixed px values (84, 80, 32/96, 8/96,
     130/150, 82/90…) that made pages feel unevenly spaced.
     Appended last so it wins on equal specificity.
     ============================================================ */
  :root {
    --sec-pad: clamp(82px, 9vw, 122px);
    --sec-pad-lg: clamp(96px, 11vw, 144px);
    --sec-pad-sm: clamp(56px, 6.5vw, 84px);
    --head-gap: clamp(44px, 5vw, 64px);
  }

  /* Standard sections: every full content band sits on the same scale */
  .rituals-section,
  .fork-section,
  .compare-section,
  .proof-section,
  .operators-section,
  .pricing-section,
  .notfor-section,
  .tier-path-section,
  .price-table-section,
  .newsletter-section,
  .faq-section,
  .hww-honest,
  .ritual-deep { padding-top: var(--sec-pad); padding-bottom: var(--sec-pad); }

  /* Marquee moments keep the bigger breath */
  #how.rituals-section,
  .final-cta,
  .notfound { padding-top: var(--sec-pad-lg); padding-bottom: var(--sec-pad-lg); }

  /* Intro / support bands */
  .hww-intro,
  .hww-tier-band { padding-top: var(--sec-pad-sm); padding-bottom: var(--sec-pad-sm); }

  /* Dark statement band: standard top; bottom carries the 40px torn edge */
  .statement { padding-top: var(--sec-pad); padding-bottom: calc(var(--sec-pad) + 26px); }

  /* Continuation bands that deliberately hug the section above keep a tight
     top but share the standard bottom */
  .about-work { padding-top: clamp(24px, 3vw, 40px); padding-bottom: var(--sec-pad); }
  .book-section,
  .legal-section { padding-top: 8px; padding-bottom: var(--sec-pad); }

  /* The one-sentence "same rhythm" strips on the vertical pages were
     inheriting full marquee padding, a single line floating in ~250px
     of air. They're connectors, not sections. */
  .rituals-section.rhythm-strip { padding-top: 0; padding-bottom: clamp(32px, 4vw, 56px); }

  /* Section heads: one gap from head to content everywhere
     (was 40 / 44 / 48 / 56 / 72 depending on the section) */
  .rituals-head,
  .fork-head,
  .compare-head,
  .proof-head,
  .operators-head,
  .pricing-head,
  .tier-path-head,
  .price-table-head,
  .about-work-head { margin-bottom: var(--head-gap); }

  /* ============================================================
     FUNNEL-VIZ REFRESH (2026-06-09)
     Header strip, stage-matched colors (mirrors the stage cards
     below it), percentage callouts, and a baseline. Bar heights
     moved from fixed px to % of the track, fixes the mobile
     overflow where 134px bars sat in a 96px container.
     ============================================================ */
  .funnel-viz-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 8px; position: relative; z-index: 1; font-family: var(--font-mono); text-transform: uppercase; }
  .funnel-viz-head span:first-child { font-size: 12px; letter-spacing: 0.08em; color: var(--paper); }
  .funnel-viz-head span:last-child { font-size: 10.5px; letter-spacing: 0.06em; color: rgba(250,246,238,0.55); text-align: right; }
  .funnel-viz-bars { height: clamp(132px, 18vw, 174px); padding-top: 26px; border-bottom: 1px solid rgba(250,246,238,0.16); }
  .funnel-viz-bar { position: relative; }
  .funnel-viz-bar.c2 { background: var(--slate); }
  .funnel-viz-bar.c3 { background: var(--olive); }
  .funnel-viz-pct { position: absolute; left: 50%; top: -7px; transform: translate(-50%, -100%); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; color: rgba(250,246,238,0.85); white-space: nowrap; }
  html.js .funnel-viz .funnel-viz-pct { opacity: 0; transition: opacity .5s ease .8s; }
  html.js .funnel-viz.reveal.in .funnel-viz-pct,
  html.js .reveal.in .funnel-viz .funnel-viz-pct { opacity: 1; }
  @media (max-width: 640px) { .funnel-viz-head { flex-direction: column; gap: 4px; } .funnel-viz-head span:last-child { text-align: left; } }
  @media (prefers-reduced-motion: reduce) {
    html.js .funnel-viz .funnel-viz-pct { opacity: 1 !important; }
  }

  /* ============================================================
     FREE GOOGLE ADS PAGE: "what the month includes" grid
     (same tile treatment as the verticals' what-you-get grids)
     ============================================================ */
  #whats-included .rituals-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  #whats-included .ritual { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px 24px; }
  #whats-included .ritual h3 { font-size: 26px; }
  #whats-included .ritual h3 em { color: var(--coral); }
  @media (max-width: 1080px) { #whats-included .rituals-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 680px) { #whats-included .rituals-grid { grid-template-columns: 1fr; } }

  /* ============================================================
     VISUAL QA (2026-06-10): the .ritual-row key column was a fixed
     60px, long single-word keys ("Marketplace", "Activation",
     "Onboarding") overflowed into the value. Inside data cards the
     key column is now a uniform 92px on every row, so all values
     share one clean left edge; longer keys wrap within the column
     instead of colliding with the value.
     ============================================================ */
  .deep-card .ritual-row { grid-template-columns: 92px 1fr; }

  /* ============================================================
     NAV "WHO WE HELP" DROPDOWN + MOBILE SUB-LINKS + FOOTER
     PARTNERS (2026-06-10): pure CSS hover/focus dropdown, no JS
     dependency (a JS failure can't break navigation).
     ============================================================ */
  .nav-drop { position: relative; }
  .nav-caret { font-size: 9px; opacity: 0.55; margin-left: 2px; }
  .nav-drop-menu {
    position: absolute; top: 100%; left: 50%; transform: translate(-50%, 6px);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
    box-shadow: var(--shadow-md); padding: 8px; min-width: 215px; list-style: none;
    opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease;
    z-index: 120;
  }
  .nav-drop-menu::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
  .nav-drop:hover .nav-drop-menu,
  .nav-drop:focus-within .nav-drop-menu { opacity: 1; visibility: visible; transform: translate(-50%, 10px); }
  .nav-drop-menu li { display: block; }
  .nav-drop-menu a { display: block; padding: 9px 12px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; color: var(--ink-2); }
  .nav-drop-menu a:hover { background: var(--paper-2); color: var(--coral-deep); }
  .nav-drop-divider { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }
  .mobile-menu-links a.mobile-menu-sub { font-family: var(--font-body); font-size: 15px; font-weight: 500; padding: 12px 32px 12px 44px; color: var(--ink-2); }
  .footer-partners { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em; line-height: 1.8; color: rgba(250,246,238,0.62); max-width: 300px; margin-bottom: 24px; }
  .footer-col a.footer-direct { color: var(--coral); opacity: 1; }
  .footer-col a.footer-direct:hover { color: var(--coral); text-decoration: underline; }

  /* ============================================================
     CONTACT PAGE (2026-06-10): calendar + form, two clear paths
     ============================================================ */
  .contact-section { padding: 8px 0 var(--sec-pad); }
  .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 40px); align-items: start; }
  @media (max-width: 960px) { .contact-grid { grid-template-columns: 1fr; gap: 48px; } }
  .contact-col-head { margin-bottom: 20px; }
  .contact-col-sub { font-size: 14px; line-height: 1.55; color: var(--body); max-width: 440px; }
  .contact-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 26px; box-shadow: var(--shadow-md); }
  .contact-form { display: flex; flex-direction: column; gap: 16px; }
  .contact-form label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); display: block; margin-bottom: 6px; }
  .cf-optional { text-transform: none; letter-spacing: 0.02em; opacity: 0.7; }
  .contact-form input, .contact-form textarea {
    width: 100%; padding: 12px 14px; background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--radius-md); font-family: var(--font-body); font-size: 15px; color: var(--ink);
    transition: border-color .2s;
  }
  .contact-form input:hover, .contact-form textarea:hover { border-color: var(--line-2); }
  .contact-form input:focus-visible, .contact-form textarea:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; border-color: var(--coral); }
  .contact-form textarea { min-height: 130px; resize: vertical; line-height: 1.55; }
  .contact-form textarea::placeholder, .contact-form input::placeholder { color: var(--muted); }
  .contact-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  @media (max-width: 520px) { .contact-form-row { grid-template-columns: 1fr; gap: 16px; } }
  .contact-form .btn { width: 100%; justify-content: center; }
  .contact-form-note { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.03em; line-height: 1.6; color: var(--muted); text-align: center; }
  .hidden-field { display: none !important; }
  .contact-grid .book-embed { max-width: none; }

  /* Qualifying questions: tap-chips + reason microcopy ("why we ask") */
  .cf-group { border: 0; padding: 0; margin: 0; }
  .cf-group legend { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 4px; padding: 0; }
  .cf-hint { font-size: 12.5px; line-height: 1.5; color: var(--muted); margin: 0 0 10px; }
  .cf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .cf-chip { position: relative; margin: 0; }
  .cf-chip input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
  .cf-chip span { display: inline-block; padding: 9px 14px; border: 1px solid var(--line); border-radius: var(--radius-pill); font-size: 13.5px; font-weight: 500; color: var(--ink-2); background: var(--paper); cursor: pointer; transition: background .2s, border-color .2s, color .2s, transform .15s; }
  .cf-chip:hover span { border-color: var(--ink); }
  .cf-chip input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper); }
  .cf-chip input:checked + span::before { content: "\2713\00a0"; color: var(--coral); font-weight: 700; }
  .cf-chip input:focus-visible + span { outline: 2px solid var(--coral); outline-offset: 2px; }
  .contact-form select {
    width: 100%; padding: 12px 38px 12px 14px; background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--radius-md); font-family: var(--font-body); font-size: 15px; color: var(--ink);
    appearance: none; -webkit-appearance: none; cursor: pointer; transition: border-color .2s;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238C8576' stroke-width='1.8' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat; background-position: right 14px center;
  }
  .contact-form select:hover { border-color: var(--line-2); }
  .contact-form select:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; border-color: var(--coral); }
  .contact-form label + .cf-hint { margin-top: -2px; }

  /* About team: real headshot cutouts over the brand gradients + 5-up grid */
  .op-photo { position: relative; }
  .op-photo .op-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom center; padding: 10px 6px 0; }
  .operators-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
  @media (max-width: 1080px) { .operators-grid.cols-5 { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 880px) { .operators-grid.cols-5 { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 540px) { .operators-grid.cols-5 { grid-template-columns: 1fr; } }

  /* ============================================================
     CASE-STUDY CREDIBILITY PASS (2026-06-09): disclosure note
     ============================================================ */
  .case-method-note { margin-top: 24px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; line-height: 1.6; color: var(--muted); }
  .case-method-note a { color: var(--muted); text-decoration: underline; }
  .case-method-note a:hover { color: var(--coral-deep); }

  /* ============================================================
     FIX PASS 2026-06-10. Accessibility, contrast, mobile paint,
     and four new data visual components. Appended last so equal
     specificity rules win by order.
     ============================================================ */

  /* Skip link, first child of the nav. Hidden above the viewport
     until keyboard focus pulls it in. */
  .skip-link {
    position: absolute; top: 8px; left: 8px; transform: translateY(-200%);
    background: var(--ink); color: var(--paper); padding: 12px 16px;
    border-radius: var(--radius-md); z-index: 300;
    font: 14px/1 var(--font-body); transition: transform .2s;
  }
  .skip-link:focus-visible { transform: none; outline: 2px solid var(--coral); outline-offset: 3px; }

  /* Visually hidden utility for screen reader only text */
  .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap; border: 0;
  }

  /* Footer column headers moved from h5 to h2. The shared h1, h2, h3
     rule leaks line-height 1.0, font-variation-settings, and text-wrap
     onto them, none of which the old h5 had. Neutralized here so the
     rendered output matches the h5 version exactly. */
  .footer-col h2 { line-height: 1.5; font-variation-settings: normal; text-wrap: wrap; }

  /* Hero note: the pages carry an inline opacity 0.7 that fails AA on
     paper. The important flag is required to beat the inline style. */
  .hero-note { opacity: 1 !important; color: var(--muted); }

  /* Small coral text below 18px reads at coral-deep for AA. Both of
     these are already deepened in the a11y block above, reasserted
     here per the fix manifest. */
  .fork-card.dtc .fork-vertical,
  .tier-pill .price { color: var(--coral-deep); }

  /* Mobile paint gating: no blur compositing on phones, the nav gets a
     near-opaque paper fill instead. (The noise overlay is gated to
     min-width 769px at the top of this file.) */
  @media (max-width: 768px) {
    .nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(250,246,238,0.96); }
  }

  /* ---------- .compare-bars: homepage cost visual ---------- */
  .compare-bars { display: flex; flex-direction: column; gap: 12px; margin: 32px auto 0; max-width: 760px; }
  /* Fixed label and value columns so both rows share the same bar track. */
  .cbar-row { display: grid; grid-template-columns: 148px 1fr 132px; align-items: center; gap: 12px; }
  .cbar-lab { font: 500 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .cbar { height: 14px; border-radius: var(--radius-pill); transform-origin: left center; }
  .cbar-ink { background: var(--ink); width: 100%; }
  .cbar-coral { background: var(--coral); width: 30%; }
  .cbar-val { font: 500 12px/1 var(--font-mono); color: var(--ink); white-space: nowrap; }
  @media (max-width: 640px) {
    .cbar-row { grid-template-columns: 1fr auto; row-gap: 8px; }
    .cbar-lab { grid-row: 1; grid-column: 1; }
    .cbar-val { grid-row: 1; grid-column: 2; }
    .cbar { grid-row: 2; grid-column: 1 / -1; }
  }

  /* ---------- .case-compare: case-study before/after bars ---------- */
  .case-compare { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 6px; }
  .cc-row { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 10px; }
  .cc-lab { font: 500 10px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .cc-bar { height: 10px; border-radius: var(--radius-pill); width: var(--w, 100%); transform-origin: left center; }
  .cc-before { background: var(--line-2); }
  .cc-after { background: var(--coral); }
  .deep-card.slate .cc-after { background: var(--slate); }
  .deep-card.olive .cc-after { background: var(--olive); }
  .cc-num { font: 500 11px/1 var(--font-mono); color: var(--ink); white-space: nowrap; }

  /* ---------- .creative-strip: ecommerce creative proof tiles ---------- */
  .creative-strip { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
  @media (max-width: 640px) { .creative-strip { grid-template-columns: 1fr; } }
  .cs-tile { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-md); border: 1px solid var(--line); overflow: hidden; }
  .cs-tile.coral { background: var(--coral-tint); }
  .cs-tile.slate { background: var(--slate-tint); }
  .cs-tile.olive { background: var(--olive-tint); }
  /* abstract motif: a soft circle and a grounded bar, a stylized
     creative placeholder, not a fake screenshot */
  .cs-tile::before { content: ""; position: absolute; top: 16%; left: 50%; transform: translateX(-50%); width: 44%; aspect-ratio: 1 / 1; border-radius: 50%; opacity: 0.5; }
  .cs-tile::after { content: ""; position: absolute; left: 14%; right: 30%; bottom: 24%; height: 10px; border-radius: var(--radius-pill); opacity: 0.65; }
  .cs-tile.coral::before, .cs-tile.coral::after { background: var(--coral); }
  .cs-tile.slate::before, .cs-tile.slate::after { background: var(--slate); }
  .cs-tile.olive::before, .cs-tile.olive::after { background: var(--olive); }
  .cs-cap { position: absolute; left: 14px; right: 14px; bottom: 12px; font: 500 10px/1.45 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

  /* ---------- .intent-viz: free-google-ads search intent visual ---------- */
  .intent-viz { display: flex; flex-direction: column; gap: 18px; margin-top: 24px; }
  .iv-lab { display: block; font-family: var(--font-body); font-size: 13px; line-height: 1.4; color: var(--body); margin-bottom: 6px; }
  .iv-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
  .iv-tag { font: 500 10px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .iv-bar { height: 14px; border-radius: var(--radius-pill); transform-origin: left center; }
  .iv-bar.iv-hot { background: var(--coral); width: 92%; }
  .iv-bar.iv-cold { background: var(--line-2); width: 22%; }
  .iv-num { font: 500 11px/1 var(--font-mono); color: var(--ink); white-space: nowrap; }

  /* Bar entrances, same conventions as the funnel bars: gated on
     html.js so a JS failure never hides them, scale-x from the left
     once the surrounding .reveal gets .in. */
  html.js .reveal .cbar,
  html.js .reveal .cc-bar,
  html.js .reveal .iv-bar { transform: scaleX(0); transition: transform .82s cubic-bezier(.16,1,.3,1); }
  html.js .reveal.in .cbar,
  html.js .reveal.in .cc-bar,
  html.js .reveal.in .iv-bar { transform: scaleX(1); }
  html.js .reveal.in .cbar-coral,
  html.js .reveal.in .cc-after,
  html.js .reveal.in .iv-bar.iv-cold { transition-delay: .12s; }

  /* Fork-card glow accents. The glow color comes from a plain
     background on .fork-card-glow (.dtc coral, .services slate), so the
     overrides mirror that same property. The .fork-card.glow-* form
     ties the (0,3,0) specificity of the .dtc rule and wins by order. */
  .fork-card.glow-slate .fork-card-glow,
  .glow-slate .fork-card-glow { background: var(--slate); }
  .fork-card.glow-olive .fork-card-glow,
  .glow-olive .fork-card-glow { background: var(--olive); }

  /* Newsletter inline status + about-card caption */
  .nl-status { font: 500 12px/1.4 var(--font-mono); color: var(--olive); margin-left: 10px; }
  .aw-caption { font: 500 10px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 10px; display: block; }

  /* Reduced motion: neutralize every new bar entrance, same pattern as
     the funnel-viz-bar rule in the reduced-motion block above. */
  @media (prefers-reduced-motion: reduce) {
    html.js .reveal .cbar,
    html.js .reveal .cc-bar,
    html.js .reveal .iv-bar { transform: none !important; transition: none !important; }
  }

  /* stat-num on a ritual-val row is a count-up hook only. Keep the row's own type. */
  .ritual-val.stat-num {
    font-family: inherit; font-size: inherit; font-weight: inherit;
    line-height: inherit; margin: 0; color: inherit;
  }

  /* Client logo wall: real marks, rendered as a single-color ink wall so
     every logo (any color, even white-on-transparent) sits on the palette. */
  .logo-cell img {
    display: block; height: 26px; width: auto; max-width: 150px;
    object-fit: contain; filter: brightness(0); opacity: 0.55;
  }
  /* Filled-badge marks (light art on a dark disc) go solid under brightness(0);
     grayscale keeps them readable while staying on the ink/paper palette. */
  .logo-cell img.logo-badge { filter: grayscale(1); opacity: 0.7; }