:root{
    color-scheme: light;
    --paper:#eceff1; --card:#fff; --ink:#0f1417; --muted:#5b666c;
    --line:#dbe2e5; --signal:#dd4b09; --rule:#b9c4c9;
    --display:"Archivo",ui-sans-serif,system-ui,"Segoe UI",Arial,sans-serif;
    --body:"IBM Plex Sans",ui-sans-serif,system-ui,"Segoe UI",Arial,sans-serif;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      color-scheme: dark;
      --paper:#0e1315; --card:#161d20; --ink:#eaf0f2; --muted:#9aa8ae;
      --line:#222c30; --signal:#ff6a2b; --rule:#33424a;
    }
  }
  :root[data-theme="dark"]{
    color-scheme: dark;
    --paper:#0e1315; --card:#161d20; --ink:#eaf0f2; --muted:#9aa8ae;
    --line:#222c30; --signal:#ff6a2b; --rule:#33424a;
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--body);
    -webkit-font-smoothing:antialiased}
  .wrap{max-width:1020px;margin:0 auto;padding-inline:22px}
  h1,h2{font-family:var(--display);font-weight:800;letter-spacing:-.028em;line-height:1.04;
    margin:0;text-wrap:balance}
  h1{font-size:clamp(38px,7vw,74px)}
  h2{font-size:clamp(23px,3.2vw,35px);letter-spacing:-.024em}
  p{margin:0}
  .eyebrow{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.17em;
    text-transform:uppercase;color:var(--muted)}
  .lede{font-size:clamp(18px,2.1vw,21px);color:var(--muted);max-width:31em;line-height:1.55}

  /* Stripe's lesson: sections breathe on whitespace, not hairlines */
  header{padding-block:clamp(52px,8vw,84px) 0;display:grid;gap:24px}
  section{padding-block:clamp(52px,7vw,86px);display:grid;gap:30px}
  .hr{height:1px;background:var(--line);border:0;margin:0}

  .cta{display:inline-flex;align-items:center;gap:10px;background:var(--signal);color:#fff;
    font-family:var(--display);font-weight:700;font-size:16.5px;text-decoration:none;
    padding:15px 26px;border-radius:999px;justify-self:start;transition:transform .12s ease}
  .cta:hover{transform:translateY(-1px)}
  .cta span{opacity:.85;font-weight:600}
  .ctarow{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
  .ctanote{font-size:14.5px;color:var(--muted)}

  .steps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
  .steps li{border:1px solid var(--line);border-radius:999px;padding:7px 15px;
    font-size:14.5px;color:var(--muted)}
  .steps li b{color:var(--ink);font-weight:600}

  /* the work, straight after the hero - competitors show screenshots, we show the thing */
  .stack{display:grid;gap:10px;grid-template-columns:repeat(3,1fr)}
  @media (min-width:700px){.stack{grid-template-columns:repeat(6,1fr)}}
  .stack video{width:100%;max-width:100%;aspect-ratio:9/16;object-fit:cover;display:block;
    border-radius:4px;background:#000}
  .note{color:var(--muted);font-size:15.5px;max-width:42em}

  .clients{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:baseline}
  .clients em{font-style:normal;font-family:var(--display);font-weight:700;font-size:11.5px;
    letter-spacing:.15em;text-transform:uppercase;color:var(--rule)}
  .clients span{font-family:var(--display);font-weight:600;font-size:15px;color:var(--muted);
    letter-spacing:.01em}

  /* numbers unadorned and oversized, the one thing every good site does the same way */
  /* 2x2, not 4 across: at 50px "96,000,000" is wider than a quarter of the page and the
     figures ran into each other. Big numbers were the point, so the grid gives way. */
  .scores{display:grid;gap:38px 44px;grid-template-columns:1fr}
  @media (min-width:640px){.scores{grid-template-columns:repeat(2,1fr)}}
  .score b{font-family:var(--display);font-weight:800;
    font-size:clamp(36px,5.4vw,58px);letter-spacing:-.04em;font-variant-numeric:tabular-nums;
    color:var(--signal);line-height:.95;display:block;margin-bottom:11px}
  .score span{font-size:15px;color:var(--muted);display:block;max-width:23em}
  /* the claim should be checkable: every figure links to the channel it came from */
  .score a{color:var(--ink);font-weight:600;text-decoration:none;
    border-bottom:1px solid var(--rule);padding-bottom:1px}
  .score a:hover,.score a:focus-visible{color:var(--signal);border-bottom-color:var(--signal)}

  .facts{margin:0;display:grid;gap:0}
  .facts>div{display:flex;gap:20px;align-items:baseline;padding-block:15px;
    border-bottom:1px solid var(--line)}
  .facts>div:last-child{border-bottom:0}
  .facts dt{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.02em;
    font-variant-numeric:tabular-nums;min-width:5.4em;flex:none;color:var(--signal)}
  .facts dd{margin:0;color:var(--muted);font-size:15.5px}

  .ask{background:var(--ink);color:var(--paper);border-radius:6px;
    padding:clamp(30px,5vw,54px);display:grid;gap:18px}
  .ask h2{color:var(--paper)}
  .ask p{color:var(--muted);max-width:32em}
  .ask .cta{background:var(--signal);color:#fff}
  .mail{font-family:var(--body);font-size:15.5px;color:var(--muted);word-break:break-word}
  .mail b{color:var(--paper);font-weight:600}
  footer{padding-block:40px 70px;color:var(--muted);font-size:14.5px}
  a:focus-visible,video:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
  @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}


/* ---- shared chrome and inner pages ---- */
.nav{display:flex;flex-wrap:wrap;gap:8px 26px;align-items:baseline;padding-block:26px 0}
.nav a{font-family:var(--display);font-weight:600;font-size:15px;color:var(--muted);
  text-decoration:none}
.nav a:hover,.nav a[aria-current]{color:var(--ink)}
.nav .brand{font-weight:700;font-size:12px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--muted);margin-right:auto}
.nav .brand:hover{color:var(--ink)}

.prose{max-width:34em;display:grid;gap:20px}
.prose p{font-size:17.5px;line-height:1.65;color:var(--ink)}
.prose h2{font-size:clamp(20px,2.4vw,26px);margin-top:14px}
.prose ul,.prose ol{margin:0;padding-left:1.15em;color:var(--ink);display:grid;gap:9px}
.prose li{line-height:1.6}
.prose a{color:var(--ink);border-bottom:1px solid var(--rule);text-decoration:none}
.prose a:hover{color:var(--signal);border-bottom-color:var(--signal)}
.meta{font-size:14px;color:var(--muted);letter-spacing:.02em}

.posts{display:grid;gap:2px;max-width:40em}
.posts a{display:grid;gap:5px;padding:20px 0;border-bottom:1px solid var(--line);
  text-decoration:none}
.posts a:last-child{border-bottom:0}
.posts b{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.018em;
  color:var(--ink);line-height:1.25}
.posts span{font-size:15.5px;color:var(--muted)}
.posts a:hover b{color:var(--signal)}

form.note-form{display:grid;gap:14px;max-width:32em}
form.note-form label{display:grid;gap:6px;font-size:14.5px;color:var(--muted)}
form.note-form input,form.note-form textarea{font:400 16px/1.5 var(--body);color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:5px;padding:11px 13px}
form.note-form textarea{min-height:130px;resize:vertical}
form.note-form input:focus,form.note-form textarea:focus{outline:2px solid var(--signal);
  outline-offset:1px;border-color:transparent}
form.note-form button{font-family:var(--display);font-weight:700;font-size:16px;color:#fff;
  background:var(--signal);border:0;border-radius:999px;padding:14px 26px;cursor:pointer;
  justify-self:start}

.bio{display:grid;gap:30px;align-items:start}
@media (min-width:760px){.bio{grid-template-columns:260px 1fr;gap:44px}}
.portrait{width:100%;max-width:260px;height:auto;border-radius:6px;display:block}

footer a{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent}
footer a:hover{color:var(--ink);border-bottom-color:var(--rule)}
footer span{display:inline-block;margin-bottom:8px}
.note a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
.note a:hover{color:var(--signal);border-bottom-color:var(--signal)}