/* ---------- Tokens ---------- */
  :root {
    --bg: #F4F6F9;
    --surface: #FFFFFF;
    --ink: #101F38;
    --muted: #51617A;
    --line: #DCE3EC;
    --line-dash: #C4CFDD;
    --accent: #E45A12;
    --accent-ink: #FFFFFF;
    --accent-soft: rgba(228, 90, 18, 0.09);
    --brand: #08234F;
    --hero-top: #0A2A5E;
    --hero-bot: #051733;
    --hero-ink: #EAF0F9;
    --hero-muted: #9FB1CD;
    --hero-line: rgba(255, 255, 255, 0.14);
    --hero-card: rgba(255, 255, 255, 0.05);
    --ok: #23A96E;
    --r-s: 4px;
    --r-m: 10px;
    --display: "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --body: "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --mono: "SF Mono", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #050D1D;
      --surface: #0A1830;
      --ink: #E6EDF7;
      --muted: #8FA1BC;
      --line: #1B2C4C;
      --line-dash: #24375C;
      --accent: #FF7E3C;
      --accent-ink: #1A0D02;
      --accent-soft: rgba(255, 126, 60, 0.10);
      --hero-top: #081F45;
      --hero-bot: #040F24;
    }
  }
  /* ---------- Base ---------- */
  * { box-sizing: border-box; }
  html { scroll-padding-top: 84px; }
  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--body);
    font-size: 16.5px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3 { font-family: var(--display); text-wrap: balance; margin: 0; }
  p { margin: 0; }
  a { color: inherit; }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

  .wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px; }
  .eyebrow {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
  }
  .eyebrow::after {
    content: "";
    flex: 0 0 46px;
    border-top: 1px dashed var(--line-dash);
    position: relative;
    top: 1px;
  }
  .section { padding: 92px 0; }
  .section + .section { border-top: 1px solid var(--line); }
  .section h2 {
    font-size: clamp(1.7rem, 3.2vw, 2.35rem);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.18;
    max-width: 22ch;
  }
  .section .lede {
    margin-top: 16px;
    max-width: 62ch;
    color: var(--muted);
    font-size: 1.05rem;
  }

  /* ---------- Buttons ---------- */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--display);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    padding: 13px 22px;
    border-radius: var(--r-s);
    border: 1px solid transparent;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  }
  .btn-primary { background: var(--accent); color: var(--accent-ink); }
  .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(228, 90, 18, 0.28); }
  .btn-ghost { border-color: var(--hero-line); color: var(--hero-ink); }
  .btn-ghost:hover { background: rgba(255, 255, 255, 0.07); }

  /* ---------- Nav ---------- */
  .nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  .nav-inner {
    display: flex;
    align-items: center;
    gap: 34px;
    height: 66px;
  }
  .brand {
    display: flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.06rem;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin-right: auto;
  }
  .brand picture { display: block; line-height: 0; }
  .brand img { display: block; width: auto; height: 34px; }
  .brand-accent { color: #FF665B; }
  .nav a.nl {
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--muted);
  }
  .nav a.nl:hover { color: var(--ink); }
  .nav .btn { padding: 9px 16px; font-size: 0.88rem; }
  @media (max-width: 780px) { .nav a.nl { display: none; } }

  /* ---------- Hero ---------- */
  .hero {
    background: linear-gradient(178deg, var(--hero-top), var(--hero-bot) 88%);
    color: var(--hero-ink);
    padding: 96px 0 104px;
    position: relative;
    overflow: hidden;
  }
  .hero-route {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.5;
  }
  .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: 64px;
    align-items: center;
    position: relative;
  }
  @media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; gap: 52px; } }
  .hero .eyebrow { color: var(--hero-muted); }
  .hero .eyebrow::after { border-color: var(--hero-line); }
  .hero h1 {
    font-size: clamp(2.3rem, 4.8vw, 3.55rem);
    font-weight: 600;
    letter-spacing: -0.022em;
    line-height: 1.08;
  }
  .hero h1 em {
    font-style: normal;
    color: var(--accent);
  }
  @media (prefers-color-scheme: dark) { .hero h1 em { color: #FF8E55; } }
  .hero .sub {
    margin-top: 22px;
    max-width: 54ch;
    color: var(--hero-muted);
    font-size: 1.08rem;
  }
  .hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
  .hero-note {
    margin-top: 26px;
    font-family: var(--mono);
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    color: var(--hero-muted);
    text-transform: uppercase;
  }

  /* ---------- Extraction demo ---------- */
  .demo {
    background: var(--hero-card);
    border: 1px solid var(--hero-line);
    border-radius: var(--r-m);
    padding: 18px;
    display: grid;
    gap: 14px;
    box-shadow: 0 30px 60px rgba(2, 8, 23, 0.45);
  }
  .demo-doc {
    background: #FDFDFB;
    color: #2A3345;
    border-radius: 6px;
    padding: 18px 18px 20px;
    position: relative;
    overflow: hidden;
  }
  .doc-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    color: #7A8598;
    border-bottom: 1px solid #E4E7ED;
    padding-bottom: 10px;
    margin-bottom: 14px;
  }
  .doc-head strong { color: #39445A; font-weight: 600; }
  .doc-title {
    font-family: var(--mono);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: #101F38;
    margin-bottom: 12px;
  }
  .doc-lines { display: grid; gap: 8px; }
  .dl { height: 7px; border-radius: 2px; background: #E7EAF0; }
  .dl.w1 { width: 88%; } .dl.w2 { width: 64%; } .dl.w3 { width: 76%; }
  .dl.w4 { width: 52%; } .dl.w5 { width: 81%; } .dl.w6 { width: 40%; }
  .doc-row { display: flex; gap: 8px; align-items: center; }
  .chip {
    font-family: var(--mono);
    font-size: 0.7rem;
    padding: 2px 7px;
    border-radius: 3px;
    background: #EEF2F8;
    border: 1px solid #E0E6EF;
    color: #2A3345;
    white-space: nowrap;
  }
  .demo.run .chip { animation: chipHl 0.5s ease forwards; opacity: 0.55; }
  .demo.run .chip.c1 { animation-delay: 0.8s; }
  .demo.run .chip.c2 { animation-delay: 1.2s; }
  .demo.run .chip.c3 { animation-delay: 1.6s; }
  @keyframes chipHl {
    to { opacity: 1; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
  }
  .scanline {
    position: absolute;
    left: 0; right: 0; top: -8%;
    height: 34px;
    background: linear-gradient(to bottom, transparent, rgba(228, 90, 18, 0.16), transparent);
    border-bottom: 1.5px solid rgba(228, 90, 18, 0.75);
    opacity: 0;
    pointer-events: none;
  }
  .demo.run .scanline { animation: scan 2.1s ease-in-out 0.25s 1; }
  @keyframes scan {
    0% { top: -10%; opacity: 0; }
    8% { opacity: 1; }
    92% { opacity: 1; }
    100% { top: 104%; opacity: 0; }
  }
  .demo-status {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hero-muted);
    display: flex;
    align-items: center;
    gap: 9px;
  }
  .demo-status .pulse {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--ok);
    flex: none;
  }
  .demo-status .s-read { display: none; }
  .demo.run .s-read { display: inline; }
  .demo.run .s-done { display: none; }
  .demo.run .s-done.show { display: inline; }
  .demo.run .s-read.hide { display: none; }
  .demo-out {
    border: 1px solid var(--hero-line);
    border-radius: 6px;
    padding: 6px 14px;
    font-family: var(--mono);
    font-size: 0.8rem;
  }
  .xrow {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 8px 0;
  }
  .xrow + .xrow { border-top: 1px dashed var(--hero-line); }
  .xrow .k { color: var(--hero-muted); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; }
  .xrow .v { color: var(--hero-ink); font-variant-numeric: tabular-nums; text-align: right; }
  .xrow .v .tick { color: var(--ok); margin-left: 7px; }
  .demo.run .xrow { opacity: 0; transform: translateY(4px); animation: rowIn 0.45s ease forwards; }
  .demo.run .xrow:nth-child(1) { animation-delay: 2.5s; }
  .demo.run .xrow:nth-child(2) { animation-delay: 2.8s; }
  .demo.run .xrow:nth-child(3) { animation-delay: 3.1s; }
  .demo.run .xrow:nth-child(4) { animation-delay: 3.4s; }
  .demo.run .xrow:nth-child(5) { animation-delay: 3.7s; }
  .demo.run .xrow:nth-child(6) { animation-delay: 4.0s; }
  @keyframes rowIn { to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) {
    .demo.run .xrow, .demo.run .chip { animation: none; opacity: 1; transform: none; }
    .demo.run .scanline { animation: none; }
  }

  /* ---------- Paper trail ---------- */
  .chain-scroll { overflow-x: auto; padding-bottom: 6px; margin-top: 44px; }
  .chain {
    display: flex;
    align-items: stretch;
    gap: 0;
    min-width: 760px;
  }
  .chain-item {
    flex: 1;
    padding: 18px 20px 16px;
    border: 1px solid var(--line);
    border-left: none;
    background: var(--surface);
    position: relative;
  }
  .chain-item:first-child { border-left: 1px solid var(--line); border-radius: var(--r-s) 0 0 var(--r-s); }
  .chain-item:last-child { border-radius: 0 var(--r-s) var(--r-s) 0; }
  .chain-item .t {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink);
    font-weight: 700;
    display: block;
  }
  .chain-item .d { font-size: 0.83rem; color: var(--muted); margin-top: 7px; line-height: 1.5; display: block; }
  .chain-item::after {
    content: "→";
    position: absolute;
    right: -7px; top: 16px;
    color: var(--accent);
    font-size: 0.85rem;
    z-index: 2;
    background: var(--surface);
    line-height: 1;
  }
  .chain-item:last-child::after { content: none; }
  .chain-item.money { background: var(--accent-soft); }
  .kicker {
    margin-top: 30px;
    font-size: 1.12rem;
    font-weight: 500;
    max-width: 58ch;
  }
  .kicker strong { color: var(--accent); font-weight: 600; }

  /* ---------- Steps ---------- */
  .steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 48px;
  }
  @media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }
  .step {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-m);
    padding: 26px 26px 28px;
    position: relative;
  }
  .step .num {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    color: var(--accent);
    display: block;
    margin-bottom: 16px;
  }
  .step h3 { font-size: 1.18rem; font-weight: 600; margin-bottom: 10px; }
  .step p { color: var(--muted); font-size: 0.94rem; }
  .step .fine {
    margin-top: 14px;
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--muted);
    border-top: 1px dashed var(--line-dash);
    padding-top: 12px;
    letter-spacing: 0.03em;
  }

  /* ---------- Docs grid ---------- */
  .docs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r-m);
    overflow: hidden;
    margin-top: 48px;
  }
  @media (max-width: 860px) { .docs { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 560px) { .docs { grid-template-columns: 1fr; } }
  .doc-cell { background: var(--surface); padding: 24px 24px 26px; }
  .doc-cell .tag {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    display: block;
    margin-bottom: 10px;
  }
  .doc-cell h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: 8px; }
  .doc-cell p { font-size: 0.9rem; color: var(--muted); }

  /* ---------- Audience cards ---------- */
  .aud {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 48px;
  }
  @media (max-width: 860px) { .aud { grid-template-columns: 1fr; } }
  .aud-card {
    border: 1px solid var(--line);
    border-radius: var(--r-m);
    background: var(--surface);
    padding: 26px;
    display: flex;
    flex-direction: column;
  }
  .aud-card h3 { font-size: 1.16rem; font-weight: 600; }
  .aud-card .who {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 6px 0 18px;
  }
  .aud-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
  .aud-card li {
    font-size: 0.92rem;
    color: var(--muted);
    padding-left: 22px;
    position: relative;
  }
  .aud-card li::before {
    content: "";
    position: absolute;
    left: 0; top: 8px;
    width: 10px;
    border-top: 2px solid var(--accent);
  }
  .aud-card li strong { color: var(--ink); font-weight: 600; }

  /* ---------- Cash band ---------- */
  .cash {
    background: linear-gradient(178deg, var(--hero-top), var(--hero-bot) 92%);
    color: var(--hero-ink);
    padding: 88px 0;
  }
  .cash .eyebrow { color: var(--hero-muted); }
  .cash .eyebrow::after { border-color: var(--hero-line); }
  .cash h2 { color: var(--hero-ink); }
  .cash .lede { color: var(--hero-muted); }
  .cash-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--hero-line);
    border: 1px solid var(--hero-line);
    border-radius: var(--r-m);
    overflow: hidden;
    margin-top: 46px;
  }
  @media (max-width: 720px) { .cash-stats { grid-template-columns: 1fr; } }
  .stat { background: rgba(255, 255, 255, 0.04); padding: 28px 26px; }
  .stat .n {
    font-family: var(--mono);
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
  }
  .stat .n em { font-style: normal; color: var(--accent); }
  @media (prefers-color-scheme: dark) { .stat .n em { color: #FF8E55; } }
  .stat .l {
    font-size: 0.88rem;
    color: var(--hero-muted);
    margin-top: 8px;
    line-height: 1.5;
  }
  .cash .closer {
    margin-top: 34px;
    font-size: 1.1rem;
    font-weight: 500;
    max-width: 56ch;
    color: var(--hero-ink);
  }

  /* ---------- FAQ ---------- */
  .faq { max-width: 780px; margin-top: 44px; }
  .faq details {
    border-top: 1px solid var(--line);
    padding: 4px 0;
  }
  .faq details:last-child { border-bottom: 1px solid var(--line); }
  .faq summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 18px;
    padding: 18px 2px;
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.03rem;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after {
    content: "+";
    font-family: var(--mono);
    color: var(--accent);
    font-size: 1.1rem;
    flex: none;
  }
  .faq details[open] summary::after { content: "–"; }
  .faq .a { padding: 0 2px 22px; color: var(--muted); max-width: 64ch; font-size: 0.96rem; }

  /* ---------- Final CTA / footer ---------- */
  .final { text-align: left; }
  .final-box {
    border: 1px solid var(--line);
    border-radius: var(--r-m);
    background: var(--surface);
    padding: 54px 48px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
  }
  @media (max-width: 820px) { .final-box { padding: 38px 30px; } }

  /* Cal.com inline booker.
     embed.js appends its iframe to the container and adds .cal-inline-container
     to it — it does NOT clear what's already inside. So the fallback button stays
     in the DOM and we hide it off that class once the embed has mounted. */
  .cal-embed { width: 100%; display: flex; }
  .cal-embed.cal-inline-container {
    display: block;
    min-height: 620px;
    overflow: hidden;
    border-radius: var(--r-s);
  }
  .cal-embed.cal-inline-container .cal-fallback { display: none; }
  .final h2 { font-size: clamp(1.6rem, 3vw, 2.15rem); }
  .final .lede { margin-top: 14px; }
  .final .mono-note {
    margin-top: 18px;
    font-family: var(--mono);
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    color: var(--muted);
  }
  .final .call-note {
    margin-top: 10px;
    font-size: 0.94rem;
    color: var(--muted);
  }
  .final .call-note a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
  }
  .final .call-note a:hover { text-decoration: underline; text-underline-offset: 3px; }
  footer {
    border-top: 1px solid var(--line);
    padding: 40px 0 56px;
    color: var(--muted);
    font-size: 0.88rem;
  }
  .foot-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    justify-content: space-between;
  }
  .foot-brand { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink); font-family: var(--display); }
  .foot-brand picture { display: block; line-height: 0; }
  .foot-brand img { display: block; width: auto; height: 28px; }
  footer a { color: var(--muted); }
  footer a:hover { color: var(--ink); }

  /* ---------- Reveal ---------- */
  .rv { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; }
  .rv.in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    .rv { opacity: 1; transform: none; transition: none; }
  }

/* Case study navigation stays accessible on small screens. */
.nav a.nl[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 8px; }
@media (max-width: 940px) { .nav-inner { gap: 20px; } }
@media (max-width: 780px) {
  .nav-inner { height: auto; min-height: 66px; flex-wrap: wrap; gap: 12px 20px; padding-top: 12px; padding-bottom: 12px; }
  .nav a.nl.case-nav { display: block; order: 3; flex-basis: 100%; padding-top: 8px; border-top: 1px solid var(--line); }
  html { scroll-padding-top: 130px; }
}