/* Self-contained: no external fonts, no CDN, no network at render time. */
  :root{
    --bg:#0b0f16; --panel:#111823; --panel2:#0e141d; --border:#1e2a3a;
    --text:#e6edf3; --dim:#8b98a9; --gold:#f0b429; --blue:#58a6ff;
    --green:#56d364; --purple:#bc8cff; --red:#ff7b72;
    --mono:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;
    --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);
    line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  }
  .wrap{max-width:980px;margin:0 auto;padding:0 20px}
  a{color:var(--blue);text-decoration:none}
  a:hover{text-decoration:underline}

  /* ── Hero ─────────────────────────────────────────────────────────── */
  header{
    padding:96px 0 72px;position:relative;
    background:
      radial-gradient(900px 380px at 12% -10%, rgba(88,166,255,.14), transparent 60%),
      radial-gradient(700px 320px at 88% 0%, rgba(240,180,41,.10), transparent 60%);
  }
  .eyebrow{
    font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--gold);margin-bottom:18px;
  }
  h1{font-size:clamp(34px,6.4vw,60px);line-height:1.06;margin:0 0 18px;letter-spacing:-.02em;font-weight:700}
  .jobtitle{
    font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--gold);margin:-6px 0 20px;
  }
  .lede{font-size:clamp(17px,2.3vw,21px);color:var(--dim);max-width:62ch;margin:0 0 28px}
  .lede strong{color:var(--text);font-weight:600}
  .chips{display:flex;flex-wrap:wrap;gap:8px}
  .chip{
    font-family:var(--mono);font-size:11.5px;color:var(--dim);
    border:1px solid var(--border);border-radius:999px;padding:5px 12px;background:var(--panel2);
  }

  /* ── Sections ─────────────────────────────────────────────────────── */
  section{padding:64px 0;border-top:1px solid var(--border)}
  h2{
    font-size:12px;font-family:var(--mono);letter-spacing:.18em;text-transform:uppercase;
    color:var(--gold);margin:0 0 8px;font-weight:600;
  }
  .h2sub{font-size:clamp(21px,3.2vw,29px);line-height:1.25;margin:0 0 26px;font-weight:650;letter-spacing:-.01em}
  p{margin:0 0 16px}
  .muted{color:var(--dim)}

  /* ── Stat strip ───────────────────────────────────────────────────── */
  .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
  .stat{background:var(--panel);border:1px solid var(--border);border-radius:11px;padding:18px 16px}
  .stat .n{font-size:clamp(23px,3.6vw,31px);font-weight:700;font-family:var(--mono);letter-spacing:-.02em;color:var(--text)}
  .stat .l{font-size:12.5px;color:var(--dim);margin-top:4px;line-height:1.4}

  /* ── Component cards ──────────────────────────────────────────────── */
  .grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:14px}
  .card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:20px}
  .card h3{margin:0 0 4px;font-size:16.5px;font-weight:650}
  .card .role{font-family:var(--mono);font-size:11px;color:var(--gold);letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px}
  .card p{font-size:14.5px;color:var(--dim);margin:0}
  .card .meta{margin-top:12px;font-family:var(--mono);font-size:11.5px;color:var(--dim);opacity:.85}

  /* ── Case studies ─────────────────────────────────────────────────── */
  .case{
    background:var(--panel2);border:1px solid var(--border);border-left:3px solid var(--blue);
    border-radius:10px;padding:20px 22px;margin-bottom:14px;
  }
  .case h3{margin:0 0 10px;font-size:16.5px;font-weight:650;letter-spacing:-.01em}
  .case p{font-size:14.5px;color:var(--dim);margin:0 0 12px}
  .case p:last-child{margin-bottom:0}
  .case .result{
    display:inline-flex;align-items:baseline;gap:9px;font-family:var(--mono);font-size:13px;
    background:rgba(86,211,100,.09);border:1px solid rgba(86,211,100,.28);color:var(--green);
    border-radius:7px;padding:6px 12px;
  }
  .case .result .was{color:var(--dim);text-decoration:line-through}
  .case.amber{border-left-color:var(--gold)}
  .case.purple{border-left-color:var(--purple)}
  .case.red{border-left-color:var(--red)}

  /* ── Stack ────────────────────────────────────────────────────────── */
  .stackrow{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px;align-items:baseline}
  .stackrow .k{font-family:var(--mono);font-size:11.5px;color:var(--gold);min-width:104px;letter-spacing:.06em;text-transform:uppercase}
  .stackrow .v{color:var(--dim);font-size:14.5px;flex:1;min-width:220px}

  /* ── TODO blocks — visible on purpose until filled in ─────────────── */
  .todo{
    border:1px dashed var(--gold);border-radius:10px;padding:18px 20px;background:rgba(240,180,41,.05);
  }
  .todo h3{margin:0 0 8px;font-size:15px;color:var(--gold);font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;font-weight:600}
  .todo p{font-size:14px;color:var(--dim);margin:0 0 8px}
  .todo ul{margin:0;padding-left:20px;color:var(--dim);font-size:14px}
  .todo li{margin-bottom:5px}

  footer{padding:56px 0 72px;border-top:1px solid var(--border);color:var(--dim);font-size:13.5px}

  /* ── Motion ───────────────────────────────────────────────────────── */
  .rv{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
  .rv.in{opacity:1;transform:none}
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .rv{opacity:1;transform:none;transition:none}
  }

  /* ── Site nav (added when the method page split out) ───────────────── */
  nav.site{
    position:sticky;top:0;z-index:20;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    background:rgba(11,15,22,.86);border-bottom:1px solid var(--border);
  }
  nav.site .wrap{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;padding-top:13px;padding-bottom:13px}
  nav.site a{
    font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--dim);
    text-transform:uppercase;text-decoration:none;
  }
  nav.site a:hover{color:var(--text);text-decoration:none}
  nav.site a.here{color:var(--gold)}

  /* ── Tables ────────────────────────────────────────────────────────── */
  /* Wide content scrolls inside its own container so the page body never
     scrolls sideways on a phone. */
  .tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border);border-radius:11px;background:var(--panel)}
  .tbl{width:100%;border-collapse:collapse;font-size:14px;min-width:540px}
  .tbl th{
    text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--gold);font-weight:600;padding:11px 14px;border-bottom:1px solid var(--border);white-space:nowrap;
  }
  .tbl td{padding:12px 14px;border-bottom:1px solid rgba(30,42,58,.55);color:var(--dim);vertical-align:top}
  .tbl tr:last-child td{border-bottom:none}
  .tbl td:first-child{color:var(--text);font-weight:550}
  .tbl .num{font-family:var(--mono);color:var(--green);white-space:nowrap}

  /* ── Pull quote ────────────────────────────────────────────────────── */
  blockquote.pq{
    margin:0 0 16px;padding:14px 18px;border-left:3px solid var(--gold);
    background:var(--panel2);border-radius:0 9px 9px 0;color:var(--text);
    font-size:15px;line-height:1.62;
  }
  blockquote.pq cite{display:block;margin-top:9px;font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--dim)}

  /* ── Responsive embed ──────────────────────────────────────────────── */
  /* The original markup carried a fixed 560×315 iframe, which overflows a
     phone. Box it instead of editing the embed. */
  /* display:block is load-bearing — it is a <span> (a <div> inside <p> is
     invalid), and width/aspect-ratio do not apply to inline boxes. */
  .video{display:block;position:relative;width:100%;max-width:560px;aspect-ratio:16/9}
  .video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:10px}

  /* ── Linkable cards (landing hub) ──────────────────────────────────── */
  /* A whole card as one hit target. color:inherit so the card's own type
     colours survive the anchor. */
  a.card{
    display:block;color:inherit;text-decoration:none;
    transition:border-color .18s ease,transform .18s ease,background .18s ease;
  }
  a.card:hover{border-color:var(--gold);background:var(--panel2);transform:translateY(-2px);text-decoration:none}
  a.card .go{
    margin-top:14px;font-family:var(--mono);font-size:11.5px;color:var(--blue);
    letter-spacing:.06em;text-transform:uppercase;
  }
  a.card:hover .go{color:var(--gold)}
  @media (prefers-reduced-motion:reduce){
    a.card{transition:none}
    a.card:hover{transform:none}
  }

  /* ── Definition rows ───────────────────────────────────────────────── */
  .deflist{display:grid;grid-template-columns:200px 1fr;gap:0 22px}
  .deflist dt{font-family:var(--mono);font-size:12px;color:var(--gold);padding:12px 0;letter-spacing:.04em;border-bottom:1px solid rgba(30,42,58,.55)}
  .deflist dd{margin:0;padding:12px 0;color:var(--dim);font-size:14.5px;border-bottom:1px solid rgba(30,42,58,.55)}
  @media (max-width:640px){
    .deflist{grid-template-columns:1fr}
    .deflist dt{border-bottom:none;padding-bottom:0}
    .deflist dd{padding-top:5px}
  }