:root{
    --bg:#FBFBFC;            /* near-white, faintly cool */
    --bg-tint:#F2F5F6;       /* subtle alternating section */
    --surface:#FFFFFF;
    --ink:#1A2024;           /* primary text */
    --ink-soft:#5A6671;      /* secondary text */
    --ink-faint:#8A949D;
    --line:#E5E8EB;          /* hairlines / card borders */
    --line-soft:#EEF0F2;

    --teal:#0F6E63;          /* the one accent */
    --teal-dark:#0B5048;
    --teal-tint:#E6F1EF;
    --amber:#B26B07;         /* single warm marker — "the attribute that shouldn't matter" */
    --amber-tint:#F8EEDD;

    --shadow-sm:0 1px 2px rgba(20,30,40,.06);
    --shadow:0 2px 6px rgba(20,30,40,.05), 0 14px 32px rgba(20,30,40,.07);
    --shadow-lg:0 4px 10px rgba(20,30,40,.06), 0 24px 56px rgba(20,30,40,.10);

    --r:14px;
    --maxw:1140px;
    --gutter:clamp(20px,5vw,72px);

    --f:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
  }

  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
  body{
    margin:0;background:var(--bg);color:var(--ink);
    font-family:var(--f);font-weight:400;font-size:1.0625rem;line-height:1.62;
    letter-spacing:-.003em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  }
  a{color:var(--teal);text-decoration:none}
  a:hover{text-decoration:underline;text-underline-offset:3px}
  ::selection{background:var(--teal-tint)}

  .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
  .section{padding-block:clamp(64px,8vw,118px)}
  .tint{background:var(--bg-tint)}

  .eyebrow{
    font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
    color:var(--teal);margin:0 0 1.1rem;display:flex;align-items:center;gap:.7ch;
  }
  .eyebrow::before{content:"";width:18px;height:2px;background:var(--teal);display:inline-block}

  h2{font-weight:700;font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1.12;
    letter-spacing:-.025em;margin:0 0 1rem;max-width:24ch}
  .lead{font-size:clamp(1.08rem,1.5vw,1.24rem);line-height:1.6;color:var(--ink-soft);max-width:62ch;margin:0}

  .btn{
    display:inline-flex;align-items:center;gap:.55ch;font-weight:600;font-size:.98rem;
    padding:.82em 1.45em;border-radius:9px;border:1px solid transparent;cursor:pointer;
    transition:transform .15s ease,box-shadow .15s ease,background .15s ease,border-color .15s ease;
  }
  .btn-primary{background:var(--teal);color:#fff;box-shadow:var(--shadow-sm)}
  .btn-primary:hover{background:var(--teal-dark);transform:translateY(-1px);box-shadow:var(--shadow);text-decoration:none}
  .btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line)}
  .btn-ghost:hover{border-color:var(--ink-faint);text-decoration:none}
  .btn .arr{transition:transform .15s ease}
  .btn:hover .arr{transform:translateX(2px)}

  :focus-visible{outline:2.5px solid var(--teal);outline-offset:3px;border-radius:4px}

  /* ---------- top bar ---------- */
  .topbar{position:sticky;top:0;z-index:60;
    background:color-mix(in srgb,var(--bg) 86%,transparent);
    backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid var(--line)}
  .topbar .row{display:flex;align-items:center;justify-content:space-between;height:64px}
  .brand{font-weight:700;font-size:.96rem;letter-spacing:-.02em;display:flex;align-items:center;gap:.6ch}
  .brand .dot{width:9px;height:9px;border-radius:50%;background:var(--teal);display:inline-block}
  .nav{display:flex;align-items:center;gap:1.6rem}
  .nav a.lnk{color:var(--ink-soft);font-size:.92rem;font-weight:500}
  .nav a.lnk:hover{color:var(--ink);text-decoration:none}
  .nav .btn{padding:.6em 1.1em;font-size:.9rem}
  @media (max-width:640px){.nav a.lnk{display:none}}

  /* ---------- hero ---------- */
  .hero{padding-block:clamp(52px,7vw,96px) clamp(56px,7vw,104px)}
  .hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(36px,5vw,76px);align-items:center}
  .hero h1{font-weight:800;font-size:clamp(2.3rem,5vw,3.7rem);line-height:1.05;
    letter-spacing:-.035em;margin:0 0 1.3rem}
  .hero h1 .hl{color:var(--teal)}
  .hero .standfirst{font-size:clamp(1.1rem,1.4vw,1.26rem);color:var(--ink-soft);max-width:48ch;margin:0 0 2rem;line-height:1.58}
  .hero-cta{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center}
  .hero-meta{display:flex;gap:1.5rem;flex-wrap:wrap;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--line)}
  .hero-meta div{display:flex;flex-direction:column;gap:.15rem}
  .hero-meta dt{font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
  .hero-meta dd{margin:0;font-weight:600;font-size:.98rem}

  /* ---------- signature: the case card ---------- */
  .case{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
    box-shadow:var(--shadow-lg);padding:clamp(20px,2.4vw,28px);position:relative;overflow:hidden}
  .case::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
    background:linear-gradient(90deg,var(--teal),var(--teal) 78%,var(--amber) 78%)}
  .case-kicker{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin:.4rem 0 .15rem}
  .case-title{font-weight:700;font-size:1.12rem;letter-spacing:-.02em;margin:0 0 1.25rem}
  .rows{display:flex;flex-direction:column;gap:.5rem}
  .crow{display:flex;align-items:center;justify-content:space-between;gap:1rem;
    padding:.7rem .85rem;border-radius:9px;background:var(--bg);border:1px solid var(--line-soft)}
  .crow .label{font-weight:500;font-size:.95rem;color:var(--ink)}
  .pill{display:inline-flex;align-items:center;gap:.45ch;font-size:.8rem;font-weight:600;
    padding:.28em .7em;border-radius:999px}
  .pill.same{color:var(--teal);background:var(--teal-tint)}
  .pill.diff{color:var(--amber);background:var(--amber-tint)}
  .crow.is-diff{border-color:var(--amber);background:var(--amber-tint)}
  .tick{width:13px;height:13px;flex:none}
  .divider{display:flex;align-items:center;gap:.8ch;margin:1.25rem 0 1rem;color:var(--ink-faint);
    font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
  .divider::before,.divider::after{content:"";height:1px;background:var(--line);flex:1}
  .outcomes{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
  .oc{border:1px solid var(--line);border-radius:10px;padding:.85rem .95rem;background:var(--surface)}
  .oc .who{font-size:.74rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:.3rem}
  .oc .res{font-weight:700;font-size:1.02rem;display:flex;align-items:center;gap:.5ch}
  .oc .swatch{width:9px;height:9px;border-radius:50%;display:inline-block}
  .oc.a .swatch{background:var(--teal)}
  .oc.b .swatch{background:var(--amber)}
  .case-note{margin:1.1rem 0 0;font-size:.88rem;color:var(--ink-soft);line-height:1.5}

  /* ---------- problem ---------- */
  .problem .lead + .lead{margin-top:1.1rem}

  /* ---------- three questions ---------- */
  .qs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,22px);margin-top:2.6rem}
  .q{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
    padding:clamp(22px,2.4vw,30px);box-shadow:var(--shadow-sm);transition:transform .18s ease,box-shadow .18s ease}
  .q:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
  .q .key{width:38px;height:38px;border-radius:10px;background:var(--teal-tint);color:var(--teal);
    display:flex;align-items:center;justify-content:center;margin-bottom:1.1rem}
  .q .key svg{width:19px;height:19px}
  .q h3{font-weight:700;font-size:1.22rem;letter-spacing:-.02em;margin:0 0 .5rem}
  .q p{margin:0;color:var(--ink-soft);font-size:.98rem;line-height:1.55}

  /* ---------- process timeline ---------- */
  .timeline{margin-top:2.8rem;position:relative;padding-left:6px}
  .tstep{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,2.4vw,34px);position:relative;padding-bottom:2.1rem}
  .tstep:last-child{padding-bottom:0}
  .tstep .rail{display:flex;flex-direction:column;align-items:center}
  .tstep .node{width:38px;height:38px;border-radius:50%;background:var(--surface);
    border:2px solid var(--teal);color:var(--teal);font-weight:700;font-size:.98rem;
    display:flex;align-items:center;justify-content:center;flex:none;box-shadow:var(--shadow-sm)}
  .tstep .line{width:2px;flex:1;background:var(--line);margin-top:6px;min-height:14px}
  .tstep:last-child .line{display:none}
  .tstep .body{padding-top:.35rem}
  .tstep h3{font-weight:700;font-size:1.18rem;letter-spacing:-.02em;margin:0 0 .35rem;display:flex;align-items:center;gap:.7ch;flex-wrap:wrap}
  .tstep .tag{font-size:.7rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
    color:var(--teal);background:var(--teal-tint);padding:.25em .65em;border-radius:999px}
  .tstep p{margin:0;color:var(--ink-soft);max-width:60ch;font-size:.99rem}

  /* ---------- benefits ---------- */
  .benefits{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.4vw,40px);margin-top:2.6rem}
  .benefit{display:flex;gap:1rem;align-items:flex-start}
  .benefit .ic{width:34px;height:34px;border-radius:9px;background:var(--teal-tint);color:var(--teal);
    display:flex;align-items:center;justify-content:center;flex:none;margin-top:.1rem}
  .benefit .ic svg{width:17px;height:17px}
  .benefit h3{font-weight:700;font-size:1.08rem;letter-spacing:-.015em;margin:0 0 .3rem}
  .benefit p{margin:0;color:var(--ink-soft);font-size:.98rem;line-height:1.52}

  /* ---------- format / who ---------- */
  .facts{display:grid;grid-template-columns:repeat(4,1fr);background:var(--surface);
    border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm);overflow:hidden;margin:2.4rem 0}
  .fact{padding:1.3rem 1.4rem;border-right:1px solid var(--line)}
  .fact:last-child{border-right:none}
  .fact dt{font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:.45rem}
  .fact dd{margin:0;font-weight:700;font-size:1.06rem;letter-spacing:-.01em}
  .fact dd.tbc{color:var(--teal)}
  .who-text{max-width:64ch;color:var(--ink-soft);font-size:1.06rem}
  .who-text b{color:var(--ink);font-weight:600}

  /* ---------- CTA ---------- */
  .cta{background:var(--teal-dark);color:#fff;text-align:center}
  .cta h2{color:#fff;max-width:20ch;margin:0 auto 1rem;font-size:clamp(1.9rem,3.6vw,2.8rem)}
  .cta p{color:#cfe4e0;max-width:46ch;margin:0 auto 2rem;font-size:1.08rem}
  .cta .btn-primary{background:#fff;color:var(--teal-dark)}
  .cta .btn-primary:hover{background:#eef6f4}
  .cta .tbc{font-size:.8rem;color:#9fc7c1;margin-top:1.5rem;letter-spacing:.02em}

  footer{border-top:1px solid var(--line);padding-block:2.4rem}
  footer .row{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
    color:var(--ink-faint);font-size:.86rem}

  /* ---------- responsive ---------- */
  @media (max-width:900px){
    .hero-grid{grid-template-columns:1fr}
    .qs{grid-template-columns:1fr}
    .facts{grid-template-columns:1fr 1fr}
    .fact:nth-child(2){border-right:none}
    .fact:nth-child(1),.fact:nth-child(2){border-bottom:1px solid var(--line)}
  }
  @media (max-width:560px){
    .benefits{grid-template-columns:1fr}
    .facts{grid-template-columns:1fr}
    .fact{border-right:none;border-bottom:1px solid var(--line)}
    .fact:last-child{border-bottom:none}
    .hero-cta{flex-direction:column;align-items:stretch}
    .hero-cta .btn{justify-content:center}
  }
  @media (prefers-reduced-motion:reduce){
    *{scroll-behavior:auto}
    .q:hover,.btn:hover{transform:none}
  }