/* ---------- Tokens (Oxblood + Cream + Antique Gold) ---------- */
  /* Variable names retained from the prior palette so the rest of the
     stylesheet inherits cleanly. "teal-*" now reads as the oxblood ramp. */
  :root {
    --teal-50:  #F5E6E6;   /* light oxblood wash */
    --teal-100: #E0BCBC;   /* borders on oxblood, light text on dark */
    --teal-200: #C58889;   /* mid accents */
    --teal-400: #8E2A2B;   /* mid oxblood */
    --teal-600: #5C1A1B;   /* PRIMARY — oxblood */
    --teal-800: #421112;   /* darker oxblood — footers, deep fills */
    --teal-900: #2A0808;   /* darkest — problem strip, final CTA */

    --gold-50:  #F5ECD6;   /* light cream-gold fill */
    --gold-100: #E8C97A;   /* gold border */
    --gold-200: #D4A436;   /* gold accent */
    --gold-400: #D4A436;   /* primary accent figure */
    --gold-600: #8B6F3D;   /* gold text on cream */
    --gold-800: #6B5429;

    --n-50:  #ECE3CF;      /* alt-row cream */
    --n-100: #CFC9BD;      /* divider lines, borders */
    --n-200: #B4B2A9;
    --n-400: #8B857A;      /* muted footnote */
    --n-600: #5F5E5A;      /* secondary body */
    --n-800: #1A1A1A;      /* primary body — ink */
    --n-900: #0E0E0E;

    --bg: #F2EBDD;         /* cream page background */
    --paper: #FAF3E6;      /* slightly lighter cream for cards */

    /* Brand spec: Roboto Slab (heading slab) + Inter (body).
       --serif is reused throughout the file as the display/heading family
       (kept as a variable name to avoid churn). */
    --serif: "Roboto Slab", "Rockwell", "Roboto Slab Fallback", Georgia, serif;
    --sans: "Inter", "Helvetica Neue", system-ui, -apple-system, Arial, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --maxw: 1180px;
    --gutter: clamp(20px, 4vw, 56px);
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    font-family: var(--sans);
    color: var(--n-800);
    background: var(--bg);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  img { max-width: 100%; display: block; }
  a { color: inherit; }
  ::selection { background: var(--gold-100); color: var(--teal-900); }

  .wrap {
    max-width: var(--maxw);
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }

  /* ---------- Type ---------- */
  .display {
    font-family: var(--serif);
    color: var(--teal-900);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.02;
    text-wrap: balance;
    margin: 0;
  }
  .display em {
    font-style: normal;
    color: var(--gold-400);
    font-weight: 500;
  }
  .eyebrow {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--teal-600);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  .eyebrow::before {
    content: "";
    display: inline-block;
    width: 22px; height: 1px;
    background: var(--teal-200);
  }
  .lede {
    font-family: var(--sans);
    font-size: clamp(18px, 1.55vw, 20px);
    line-height: 1.55;
    color: var(--n-800);
    font-weight: 400;
    text-wrap: pretty;
    margin: 0;
  }

  /* ---------- Nav ---------- */
  .nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    backdrop-filter: saturate(140%) blur(12px);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color .25s ease;
  }
  .nav.scrolled { border-bottom-color: var(--n-100); }
  .nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 76px;
    gap: 24px;
  }
  .brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
  }
  /* Brand wordmark (replaces logo image) */
  .brand-mark {
    width: 40px; height: 40px;
    flex: 0 0 40px;
    background: var(--teal-600);
    color: var(--gold-200);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    position: relative;
  }
  .brand-mark svg { display: block; }
  .brand-text {
    font-family: var(--serif);
    color: var(--teal-900);
    font-weight: 600;
    font-size: 18px;
    letter-spacing: -0.005em;
    line-height: 1.05;
    display: flex;
    flex-direction: column;
  }
  .brand-text .name { white-space: nowrap; }
  .brand-text small {
    display: block;
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--teal-600);
    font-weight: 500;
    margin-top: 4px;
  }
  .brand-text small .dotsep {
    color: var(--gold-400);
    margin: 0 2px;
  }
  .nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
  }
  .nav-links a {
    text-decoration: none;
    color: var(--n-800);
    font-size: 14px;
    font-weight: 500;
    position: relative;
  }
  .nav-links a:not(.btn):hover { color: var(--teal-600); }
  .nav-links a:not(.btn)::after {
    content: "";
    position: absolute;
    left: 0; right: 100%;
    bottom: -4px;
    height: 1px;
    background: var(--teal-600);
    transition: right .25s ease;
  }
  .nav-links a:not(.btn):hover::after { right: 0; }

  @media (max-width: 760px) {
    .nav-links a:not(.btn) { display: none; }
  }

  /* ---------- Button ---------- */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 20px;
    background: var(--teal-600);
    color: #fff !important;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.005em;
    border: none;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
    font-family: var(--sans);
  }
  .btn:hover { background: var(--teal-800); transform: translateY(-1px); }
  .btn .arrow { transition: transform .2s ease; }
  .btn:hover .arrow { transform: translateX(3px); }

  .btn.ghost {
    background: transparent;
    color: var(--teal-800) !important;
    border: 1px solid var(--teal-100);
  }
  .btn.ghost:hover { background: var(--teal-50); }

  .btn.gold {
    background: var(--gold-400);
  }
  .btn.gold:hover { background: var(--gold-600); }

  /* ---------- Hero ---------- */
  .hero {
    padding: clamp(56px, 9vw, 120px) 0 clamp(64px, 10vw, 130px);
    position: relative;
    overflow: hidden;
  }
  /* Brand spec: no gradients on color blocks. Hero is solid cream. */
  .hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(40px, 6vw, 88px);
    align-items: center;
  }
  @media (max-width: 920px) {
    .hero-grid { grid-template-columns: 1fr; gap: 56px; }
  }
  .hero h1 {
    font-size: clamp(40px, 6.6vw, 76px);
    margin-top: 20px;
  }
  .hero .lede { margin-top: 26px; max-width: 30em; }
  .hero-cta {
    margin-top: 36px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 22px;
  }
  .hero-fineprint {
    margin-top: 18px;
    font-size: 13px;
    color: var(--n-600);
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .hero-fineprint .pip {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--teal-400);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--teal-200) 35%, transparent);
    animation: pulse 2.4s ease-in-out infinite;
  }
  @keyframes pulse {
    0%,100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--teal-200) 35%, transparent); }
    50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--teal-200) 0%, transparent); }
  }

  /* ---------- Sample report card (hero right) ---------- */
  .report-wrap {
    position: relative;
    perspective: 1400px;
  }
  .report {
    background: var(--paper);
    box-shadow:
      0 1px 0 var(--n-100),
      0 30px 60px -30px rgba(8, 80, 65, 0.28),
      0 12px 30px -18px rgba(8, 80, 65, 0.18);
    border: 1px solid var(--n-100);
    transform: rotate(-1.2deg);
    transition: transform .5s cubic-bezier(.2,.7,.2,1);
    overflow: hidden;
    font-size: 12px;
    color: var(--n-800);
  }
  .report:hover { transform: rotate(0deg) translateY(-4px); }
  .report-header {
    background: var(--teal-600);
    color: #fff;
    padding: 14px 18px 12px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
  }
  .report-header .rh-title {
    font-family: var(--serif);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.1;
  }
  .report-header .rh-sub {
    color: var(--teal-100);
    font-size: 11px;
    margin-top: 2px;
  }
  .report-header .rh-meta {
    text-align: right;
  }
  .report-header .rh-meta .label {
    color: var(--teal-100);
    font-family: var(--mono);
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 0.14em;
  }
  .report-header .rh-meta .val { font-size: 11px; }

  .report-body { padding: 18px; }

  .headline-block {
    background: var(--teal-600); /* oxblood */
    color: var(--bg);
    padding: 14px 16px 15px;
    margin-bottom: 16px;
  }
  .headline-block .label {
    color: var(--gold-200);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 6px;
  }
  .headline-block .figure {
    color: var(--bg);
    font-family: var(--serif);
    font-size: 30px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
  }
  .headline-block .figure em {
    font-style: normal;
    color: var(--gold-200);
    font-weight: 500;
    font-size: 20px;
    margin-left: 4px;
  }
  .headline-block .sub {
    color: color-mix(in srgb, var(--bg) 80%, transparent);
    font-size: 11px;
    margin-top: 8px;
    line-height: 1.5;
  }

  .leak-row {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid var(--n-50);
  }
  .leak-row:last-child { border-bottom: 0; }
  .leak-num {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--teal-600);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--mono);
  }
  .leak-title {
    color: var(--teal-800);
    font-weight: 500;
    font-size: 12px;
  }
  .leak-badge {
    background: var(--gold-50);
    border: 1px solid var(--gold-100);
    color: var(--gold-600);
    font-size: 10px;
    font-weight: 500;
    padding: 3px 8px;
    white-space: nowrap;
  }

  .report-footer {
    background: var(--teal-800);
    color: var(--teal-100);
    padding: 10px 18px;
    font-size: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .report-footer .right { color: var(--teal-200); }

  /* paperclip + tag */
  .stamp {
    position: absolute;
    z-index: 2;
    top: -12px;
    right: 22px;
    background: var(--gold-400);
    color: #fff;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 7px 12px;
    transform: rotate(4deg);
    box-shadow: 0 8px 20px -8px rgba(186, 117, 23, 0.55);
  }

  /* ---------- Section base ---------- */
  section { position: relative; }
  .section-pad {
    padding: clamp(72px, 9vw, 130px) 0;
  }
  .section-head {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: clamp(28px, 5vw, 80px);
    align-items: end;
    margin-bottom: clamp(40px, 5vw, 64px);
  }
  @media (max-width: 820px) {
    .section-head { grid-template-columns: 1fr; gap: 16px; }
  }
  .section-head .title {
    font-size: clamp(32px, 4.4vw, 52px);
  }
  .section-head .blurb {
    font-family: var(--sans);
    font-size: clamp(16px, 1.4vw, 18px);
    line-height: 1.6;
    color: var(--n-800);
    max-width: 38em;
    text-wrap: pretty;
  }

  /* ---------- Problem strip ---------- */
  .problem {
    background: var(--teal-900);
    color: #fff;
    padding: clamp(54px, 7vw, 90px) 0;
  }
  .problem .eyebrow { color: var(--teal-100); }
  .problem .eyebrow::before { background: var(--teal-200); }
  .problem h2 {
    font-family: var(--serif);
    font-size: clamp(28px, 3.8vw, 44px);
    font-weight: 500;
    line-height: 1.12;
    margin: 14px 0 0;
    color: #fff;
    letter-spacing: -0.015em;
    text-wrap: balance;
    max-width: 22ch;
  }
  .problem h2 em {
    font-style: normal;
    color: var(--gold-100);
    font-weight: 400;
  }
  .problem-grid {
    margin-top: clamp(40px, 5vw, 64px);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: color-mix(in srgb, var(--teal-200) 25%, transparent);
    border-top: 1px solid color-mix(in srgb, var(--teal-200) 25%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--teal-200) 25%, transparent);
  }
  @media (max-width: 760px) {
    .problem-grid { grid-template-columns: 1fr; }
  }
  .problem-cell {
    background: var(--teal-900);
    padding: 28px 24px 30px;
  }
  .problem-cell .stat {
    font-family: var(--serif);
    color: var(--gold-100);
    font-size: clamp(36px, 4vw, 52px);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1;
  }
  .problem-cell .stat-sub {
    color: var(--teal-100);
    font-size: 12px;
    margin-top: 12px;
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: 0.12em;
  }
  .problem-cell p {
    color: #E8F2EE;
    font-size: 15px;
    line-height: 1.55;
    margin: 16px 0 0;
    max-width: 30ch;
  }

  /* ---------- Services ---------- */
  .services {
    background: var(--bg);
  }
  .svc-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
  }
  .svc {
    background: var(--paper);
    border: 1px solid var(--n-100);
    padding: 32px 30px 34px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  }
  .svc:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 50px -30px rgba(8, 80, 65, 0.2);
    border-color: var(--teal-100);
  }
  .svc.featured {
    grid-column: span 12;
    background: var(--teal-800);
    color: #fff;
    border-color: var(--teal-800);
    padding: clamp(34px, 4vw, 52px);
  }
  .svc.lg { grid-column: span 6; }

  @media (max-width: 900px) {
    .svc.lg { grid-column: span 12; }
  }

  .svc .tag {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--teal-600);
    margin-bottom: 18px;
  }
  .svc.featured .tag { color: var(--gold-100); }

  .svc h3 {
    font-family: var(--serif);
    font-weight: 600;
    color: var(--teal-900);
    font-size: 28px;
    line-height: 1.1;
    letter-spacing: -0.015em;
    margin: 0 0 12px;
  }
  .svc.featured h3 {
    color: #fff;
    font-size: clamp(34px, 3.6vw, 44px);
    margin-bottom: 16px;
    max-width: 16ch;
  }
  .svc h3 em { font-style: normal; color: var(--gold-400); font-weight: 500; }
  .svc.featured h3 em { color: var(--gold-100); }

  .svc p {
    color: var(--n-600);
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 18px;
    flex: 1;
  }
  .svc.featured p {
    color: #DCEDE7;
    font-size: 17px;
    max-width: 48ch;
  }

  .svc ul {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .svc li {
    font-size: 14px;
    color: var(--n-800);
    padding-left: 18px;
    position: relative;
    line-height: 1.5;
  }
  .svc li::before {
    content: "";
    position: absolute;
    left: 0; top: 8px;
    width: 7px; height: 7px;
    background: var(--gold-200);
    border-radius: 50%;
  }
  .svc.featured li { color: #E8F2EE; }
  .svc.featured li::before { background: var(--gold-100); }

  .svc-footer {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 18px;
    border-top: 1px solid var(--n-100);
    gap: 16px;
  }
  .svc.featured .svc-footer {
    border-top-color: color-mix(in srgb, var(--teal-200) 30%, transparent);
  }
  .price {
    font-family: var(--serif);
    color: var(--teal-800);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
  }
  .svc.featured .price { color: var(--gold-100); font-size: 26px; }
  .price small {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 500;
    color: var(--n-400);
    margin-left: 2px;
  }
  .svc.featured .price small { color: var(--teal-100); }
  .svc-cta {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--teal-600);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .svc-cta .arrow { transition: transform .2s ease; }
  .svc-cta:hover { color: var(--teal-800); }
  .svc-cta:hover .arrow { transform: translateX(3px); }
  .svc.featured .svc-cta { color: var(--gold-100); }
  .svc.featured .svc-cta:hover { color: #fff; }

  /* Featured layout */
  .svc.featured {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: clamp(28px, 4vw, 56px);
    align-items: stretch;
  }
  @media (max-width: 760px) {
    .svc.featured { grid-template-columns: 1fr; }
  }
  .svc.featured .left h3 { margin-top: 18px; }
  .svc.featured .right {
    border-left: 1px solid color-mix(in srgb, var(--teal-200) 30%, transparent);
    padding-left: clamp(20px, 3vw, 36px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  @media (max-width: 760px) {
    .svc.featured .right { border-left: 0; padding-left: 0; border-top: 1px solid color-mix(in srgb, var(--teal-200) 30%, transparent); padding-top: 22px; }
  }
  .svc.featured .right .what {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-100);
    margin-bottom: 14px;
  }
  .svc.featured .right ul { margin-bottom: 0; }

  /* Featured guarantee strip (inside Lost Revenue Report card) */
  .guarantee-strip {
    margin-top: 18px;
    padding: 12px 14px 13px;
    border: 1px dashed color-mix(in srgb, var(--gold-100) 70%, transparent);
    background: color-mix(in srgb, var(--teal-900) 35%, transparent);
    display: flex;
    gap: 12px;
    align-items: flex-start;
  }
  .guarantee-mark {
    font-family: var(--serif);
    color: var(--gold-100);
    font-size: 22px;
    line-height: 1;
    font-weight: 600;
    margin-top: 1px;
    flex: 0 0 auto;
  }
  .guarantee-text {
    color: #E8F2EE;
    font-size: 13px;
    line-height: 1.55;
    font-family: var(--sans);
  }

  /* ---------- Method (control group) ---------- */
  .method {
    background: var(--paper);
    border-top: 1px solid var(--n-100);
    border-bottom: 1px solid var(--n-100);
  }
  .method-grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: clamp(40px, 6vw, 90px);
    align-items: center;
  }
  @media (max-width: 880px) {
    .method-grid { grid-template-columns: 1fr; gap: 56px; }
  }
  .method h2 {
    font-family: var(--serif);
    font-size: clamp(34px, 4.4vw, 56px);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -0.02em;
    color: var(--teal-900);
    margin: 14px 0 0;
    text-wrap: balance;
  }
  .method h2 em { font-style: normal; color: var(--gold-400); font-weight: 500; }
  .method-body p {
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.6;
    color: var(--n-800);
    margin: 22px 0 0;
    max-width: 36em;
    text-wrap: pretty;
  }
  .method-body p strong {
    font-weight: 600;
    color: var(--teal-900);
    background: linear-gradient(transparent 62%, color-mix(in srgb, var(--gold-100) 70%, transparent) 62%);
    padding: 0 2px;
  }
  .method-footnote {
    margin-top: 26px;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--teal-600);
    text-transform: uppercase;
  }
  .method-footnote::before {
    content: "";
    display: inline-block;
    width: 22px; height: 1px;
    background: var(--gold-400);
    vertical-align: middle;
    margin-right: 12px;
  }

  /* The diagram */
  .holdout {
    background: var(--bg);
    border: 1px solid var(--n-100);
    padding: clamp(22px, 3vw, 32px);
    position: relative;
  }
  .holdout-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid var(--n-100);
    padding-bottom: 14px;
    margin-bottom: 22px;
  }
  .holdout-head .label {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--teal-600);
  }
  .holdout-head .stamp-30 {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold-600);
    border: 1px solid var(--gold-100);
    padding: 4px 10px;
    background: var(--gold-50);
  }
  .holdout-rows { display: flex; flex-direction: column; gap: 18px; }
  .holdout-row {
    display: grid;
    grid-template-columns: 110px 1fr 92px;
    gap: 14px;
    align-items: center;
  }
  .holdout-row .tag {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--n-600);
  }
  .holdout-row.worked .tag { color: var(--teal-600); }
  .holdout-row.held   .tag { color: var(--n-400); }
  .holdout-bar {
    position: relative;
    height: 30px;
    background: var(--n-50);
    border: 1px solid var(--n-100);
    overflow: hidden;
  }
  .holdout-bar .fill {
    position: absolute; inset: 0 auto 0 0;
    width: 0;
    transition: width 1.2s cubic-bezier(.2,.7,.2,1) .15s;
  }
  .holdout-row.worked .fill {
    background: repeating-linear-gradient(
      135deg,
      var(--teal-600) 0 6px,
      var(--teal-800) 6px 12px
    );
  }
  .holdout-row.held .fill {
    background: repeating-linear-gradient(
      135deg,
      color-mix(in srgb, var(--n-200) 50%, transparent) 0 6px,
      color-mix(in srgb, var(--n-200) 30%, transparent) 6px 12px
    );
  }
  .holdout-bar .pct {
    position: absolute;
    right: 10px; top: 50%; transform: translateY(-50%);
    font-family: var(--mono);
    font-size: 11px;
    color: #fff;
    letter-spacing: 0.08em;
    text-shadow: 0 1px 0 rgba(0,0,0,0.15);
  }
  .holdout-row.held .pct { color: var(--n-600); text-shadow: none; }
  .holdout-row .val {
    text-align: right;
    font-family: var(--serif);
    color: var(--teal-900);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
  }
  .holdout-row.held .val { color: var(--n-400); font-weight: 500; }
  .holdout-delta {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--n-100);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
  }
  .holdout-delta .k {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--teal-600);
  }
  .holdout-delta .v {
    font-family: var(--serif);
    color: var(--teal-900);
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1;
  }
  .holdout-delta .v em {
    font-style: normal;
    color: var(--gold-400);
  }
  .holdout-foot {
    margin-top: 10px;
    font-size: 12px;
    color: var(--n-600);
    font-family: var(--sans);
    line-height: 1.55;
    max-width: 38em;
  }
  @media (max-width: 520px) {
    .holdout-row { grid-template-columns: 80px 1fr 64px; gap: 10px; }
    .holdout-row .val { font-size: 14px; }
  }

  /* ---------- How it works (funnel) ---------- */
  .how {
    background: var(--n-50);
  }
  .funnel {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
    position: relative;
  }
  @media (max-width: 820px) {
    .funnel { grid-template-columns: 1fr; }
  }
  .step {
    background: var(--paper);
    border: 1px solid var(--n-100);
    padding: 32px 28px 30px;
    position: relative;
    display: flex;
    flex-direction: column;
  }
  .step .num {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.16em;
    color: var(--teal-600);
    margin-bottom: 16px;
  }
  .step h4 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 22px;
    color: var(--teal-900);
    margin: 0 0 10px;
    letter-spacing: -0.01em;
    line-height: 1.15;
  }
  .step p {
    color: var(--n-600);
    margin: 0 0 16px;
    font-size: 14.5px;
    line-height: 1.55;
    flex: 1;
  }
  .step .meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 14px;
    border-top: 1px solid var(--n-100);
  }
  .step .meta .k {
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--n-400);
  }
  .step .meta .v {
    font-family: var(--serif);
    color: var(--gold-400);
    font-weight: 600;
    font-size: 16px;
  }
  .step.first { border-top: 3px solid var(--gold-400); }
  .step.first .meta .v { color: var(--teal-600); }

  /* arrows between steps */
  .step .next {
    position: absolute;
    right: -22px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px; height: 28px;
    background: var(--bg);
    border-radius: 50%;
    border: 1px solid var(--n-100);
    display: flex; align-items: center; justify-content: center;
    color: var(--teal-600);
    z-index: 2;
  }
  @media (max-width: 820px) {
    .step .next { display: none; }
  }

  /* ---------- Quote / language strip ---------- */
  .quote-strip {
    background: var(--paper);
    border-top: 1px solid var(--n-100);
    border-bottom: 1px solid var(--n-100);
    padding: clamp(56px, 7vw, 96px) 0;
  }
  .quote-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 80px);
    align-items: center;
  }
    gap: clamp(40px, 5vw, 80px);
    align-items: center;
  }
  @media (max-width: 820px) {
    .quote-grid { grid-template-columns: 1fr; }
  }
  .pullquote {
    font-family: var(--serif);
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.08;
    color: var(--teal-900);
    font-weight: 600;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }
  .pullquote em { font-style: normal; color: var(--gold-400); font-weight: 600; }
  .pullquote::before {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    background: var(--gold-400);
    margin-bottom: 22px;
  }
  .lang {
    background: var(--n-50);
    padding: 28px 30px;
    border: 1px solid var(--n-100);
  }
  .lang h5 {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--teal-600);
    margin: 0 0 16px;
    font-weight: 500;
  }
  .lang-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .lang-cols h6 {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin: 0 0 10px;
    font-weight: 500;
  }
  .lang-cols .good h6 { color: var(--teal-600); }
  .lang-cols .bad h6 { color: var(--gold-600); }
  .lang-cols ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
  .lang-cols li { font-size: 13.5px; color: var(--n-800); line-height: 1.4; }
  .lang-cols .bad li { color: var(--n-400); text-decoration: line-through; text-decoration-color: var(--gold-100); }

  /* ---------- About ---------- */
  .about-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: clamp(40px, 6vw, 90px);
    align-items: start;
  }
  @media (max-width: 820px) {
    .about-grid { grid-template-columns: 1fr; }
  }
  .about-body p {
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.65;
    color: var(--n-800);
    margin: 0 0 20px;
    text-wrap: pretty;
  }
  .about-body p:first-child::first-letter {
    font-family: var(--serif);
    font-size: 5em;
    line-height: 0.85;
    float: left;
    color: var(--teal-600);
    padding: 6px 12px 0 0;
    font-weight: 600;
  }
  .factbox {
    background: var(--teal-50);
    border: 1px solid var(--teal-100);
    padding: 28px 30px;
  }
  .factbox h5 {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--teal-600);
    margin: 0 0 16px;
    font-weight: 500;
  }
  .factbox dl { margin: 0; }
  .factbox .row {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 16px;
    padding: 12px 0;
    border-top: 1px solid color-mix(in srgb, var(--teal-200) 40%, transparent);
    align-items: baseline;
  }
  .factbox .row:first-of-type { border-top: 0; padding-top: 0; }
  .factbox dt {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--teal-600);
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }
  .factbox dd {
    font-family: var(--serif);
    color: var(--teal-900);
    margin: 0;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 500;
  }
  .factbox dd em { color: var(--gold-400); font-style: normal; font-weight: 600; }

  /* ---------- Final CTA ---------- */
  .final {
    background: var(--teal-900);
    color: #fff;
    padding: clamp(72px, 9vw, 120px) 0;
    position: relative;
    overflow: hidden;
  }
  /* Brand spec: no gradients on color blocks. Final CTA is solid teal. */
  .final-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: clamp(40px, 6vw, 80px);
    align-items: center;
  }
  @media (max-width: 820px) {
    .final-grid { grid-template-columns: 1fr; }
  }
  .final h2 {
    font-family: var(--serif);
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 500;
    line-height: 1.05;
    margin: 18px 0 0;
    color: #fff;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }
  .final h2 em { color: var(--gold-100); font-style: normal; font-weight: 400; }
  .final p {
    color: #DCEDE7;
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.6;
    margin: 24px 0 0;
    max-width: 36ch;
  }
  .final .actions {
    margin-top: 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px 18px;
    align-items: center;
  }
  .final .btn { background: var(--gold-400); }
  .final .btn:hover { background: var(--gold-600); }
  .final .btn.ghost {
    background: transparent;
    color: #fff !important;
    border-color: color-mix(in srgb, var(--teal-200) 40%, transparent);
  }
  .final .btn.ghost:hover { background: color-mix(in srgb, var(--teal-800) 60%, transparent); }
  .final .eyebrow { color: var(--gold-100); }
  .final .eyebrow::before { background: var(--gold-200); }

  /* Contact card (replaces inbound form — site is not a lead-gen surface) */
  .contact-card {
    background: var(--paper);
    color: var(--n-800);
    padding: 28px 28px 24px;
    border: 1px solid var(--n-100);
    position: relative;
  }
  .contact-card .cc-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid var(--n-100);
    padding-bottom: 14px;
    margin-bottom: 6px;
  }
  .contact-card .cc-eyebrow {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--teal-600);
    font-weight: 500;
  }
  .contact-card .cc-stamp {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold-600);
    border: 1px solid var(--gold-100);
    padding: 4px 10px;
    background: var(--gold-50);
  }
  .contact-card .cc-list {
    margin: 14px 0 0;
  }
  .contact-card .cc-row {
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: 18px;
    padding: 12px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--n-100) 65%, transparent);
    align-items: baseline;
  }
  .contact-card .cc-row:last-child { border-bottom: 0; }
  .contact-card dt {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--n-400);
    margin: 0;
  }
  .contact-card dd {
    margin: 0;
    font-family: var(--serif);
    font-size: 19px;
    line-height: 1.3;
    color: var(--teal-900);
    letter-spacing: -0.005em;
  }
  .contact-card dd a {
    color: var(--teal-900);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--gold-400) 55%, transparent);
    padding-bottom: 1px;
    transition: border-color .2s ease;
  }
  .contact-card dd a:hover { border-bottom-color: var(--gold-400); }
  .contact-card .cc-foot {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--n-100);
    font-size: 12px;
    line-height: 1.55;
    color: var(--n-600);
    font-family: var(--sans);
  }

  /* ---------- Footer ---------- */
  footer {
    background: var(--teal-800);
    color: var(--teal-100);
    padding: 48px 0 36px;
  }
  .foot-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 32px;
    align-items: start;
  }
  @media (max-width: 720px) {
    .foot-grid { grid-template-columns: 1fr; }
  }
  footer .brand-text { color: #fff; }
  footer .brand-text small { color: var(--teal-200); }
  footer h6 {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--teal-200);
    margin: 4px 0 14px;
    font-weight: 500;
  }
  footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
  footer li, footer a { color: var(--teal-100); font-size: 14px; text-decoration: none; }
  footer a:hover { color: #fff; }
  .foot-bottom {
    margin-top: 36px;
    padding-top: 20px;
    border-top: 1px solid color-mix(in srgb, var(--teal-200) 25%, transparent);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 12px;
    color: var(--teal-200);
    flex-wrap: wrap;
  }

  /* ---------- Fade-in on scroll ---------- */
  .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1);
  }
  .reveal.in { opacity: 1; transform: none; }

  /* Reduce motion */
  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .hero-fineprint .pip { animation: none; }
  }