:root { --ink:#16161a; --muted:#5b5b66; --line:#dcdce2; --wash:#f5f5f7; }
  * { box-sizing:border-box; }
  body { margin:0; background:#fff; color:var(--ink);
         font:17px/1.6 ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
  header { border-bottom:1px solid var(--line); }
  .wrap { max-width:920px; margin:0 auto; padding:0 24px; }
  header .wrap { display:flex; align-items:center; justify-content:space-between; height:64px; }
  .brand { font-weight:700; letter-spacing:-0.01em; text-decoration:none; color:var(--ink); }
  nav a { color:var(--muted); text-decoration:none; margin-left:20px; font-size:15px; }
  nav a:hover { color:var(--ink); }
  h1 { font-size:clamp(30px, 4.6vw, 46px); line-height:1.1; letter-spacing:-0.025em; margin:56px 0 14px; max-width:19ch; }
  .lede { font-size:19px; color:var(--muted); max-width:56ch; margin:0 0 28px; }
  h2 { font-size:22px; letter-spacing:-0.01em; margin:52px 0 12px; }
  h3 { font-size:16px; margin:22px 0 6px; }
  p { margin:0 0 14px; max-width:66ch; }
  ul { padding-left:20px; margin:0 0 16px; } li { margin-bottom:7px; max-width:66ch; }
  form { display:flex; gap:10px; flex-wrap:wrap; margin:8px 0 10px; }
  input { flex:1 1 280px; padding:12px 14px; font-size:16px; border:1px solid var(--line);
          border-radius:8px; background:#fff; color:var(--ink); }
  button { padding:12px 18px; font-size:16px; font-weight:600; border:0; border-radius:8px;
           background:var(--ink); color:#fff; cursor:pointer; }
  button:disabled { opacity:0.55; cursor:default; }
  .hint { font-size:13.5px; color:var(--muted); }
  .error { color:#a3231f; font-size:14px; margin-top:6px; }
  .grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:18px; margin:22px 0; }
  .card { border:1px solid var(--line); border-radius:12px; padding:18px; }
  .card h3 { margin-top:0; }
  .stats { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin:34px 0 8px; }
  .stat { border-top:2px solid var(--ink); padding-top:10px; }
  .stat b { display:block; font-size:24px; letter-spacing:-0.02em; }
  .stat span { font-size:13px; color:var(--muted); }
  .note { background:var(--wash); border-radius:10px; padding:16px 18px; margin:24px 0; }
  .note p:last-child { margin:0; }
  table { width:100%; border-collapse:collapse; font-size:15px; margin:14px 0; }
  table.sheet { font-size:14px; }
  table.sheet td:first-child { width:22%; }
  .price { display:inline-block; margin-top:6px; font-weight:600; }
  /* Four columns of prose are unreadable on a phone: measured at 390px the cells were 80 to 97 pixels
     wide and each row 444 to 512 pixels tall. Below 720px a shape becomes a block, and each cell keeps
     its column name as a label so the meaning does not depend on a header that is no longer there. */
  @media (max-width:720px) {
    table.sheet thead { display:none; }
    table.sheet tr { display:block; border-bottom:1px solid var(--line); padding:12px 0; }
    table.sheet td, table.sheet td:first-child { display:block; width:auto; padding:4px 0; border:0; }
    table.sheet td[data-label]::before { content:attr(data-label); display:block; font-size:11.5px;
      letter-spacing:0.05em; text-transform:uppercase; color:var(--muted); }
  }
  th, td { text-align:left; padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
  .cta { margin:22px 0 10px; }
  #crawl { display:flex; gap:10px; flex-wrap:wrap; }
  #crawl input { flex:1 1 220px; }
  footer { border-top:1px solid var(--line); margin-top:64px; padding:22px 0 44px; color:var(--muted); font-size:14px; }
  @media (max-width:720px) { .grid, .stats { grid-template-columns:1fr 1fr; } }