/* site.css is built by tools/build-css.mjs from css/*.css. Do not edit it by hand. */

/* ===== 00-mockup.css ===== */
/* Vigilance look and feel. Copied verbatim from plans/mockups/vibe-landing.html (2026-10-20).
   Change a rule here only to fix a bug in it. Add new rules in the other parts.
   Exception: the accent family moved from the mockup red to the 2.0 rust on 2026-10-22
   (palette in vigi-brand/vigilance-2-palette.png). */
  :root {
    --ink: #0b0b0c;
    --ink-2: #3f3f46;
    --ink-3: #63636b;
    --ink-4: #a1a1aa; /* non-text only: rules, bars, icons */
    --line: #e7e7ea;
    --line-2: #d6d6db;
    --soft: #f7f7f8;
    --soft-2: #efeff1;
    --accent: #b5482a;
    --accent-soft: #fbf1ed;
    --accent-line: #f2d2c7;
    /* the demo script colours its shield with --sage-ink, so it maps to the accent */
    --sage-ink: var(--accent);
    --head: "Inter Tight", "Inter", system-ui, sans-serif;
    --sans: "Inter", system-ui, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { background: #fff; }
  body { font-family: var(--sans); color: var(--ink); background: #fff; min-width: 1240px; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
  a { color: inherit; text-decoration: none; }
  .wrap { width: 1200px; margin: 0 auto; position: relative; }
  svg { display: block; }

  /* ---------- Shared type ---------- */
  .label { font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
  h2 { font-family: var(--head); font-weight: 600; font-size: 64px; line-height: 1; letter-spacing: -0.045em; margin-top: 20px; }
  .lede { font-size: 20px; line-height: 1.5; color: var(--ink-2); max-width: 620px; margin-top: 22px; }
  .caption { font-size: 14px; color: var(--ink-3); margin-top: 18px; }
  .caption b { font-family: var(--mono); font-weight: 500; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); margin-right: 8px; }
  .next { font-size: 14.5px; line-height: 1.5; color: var(--ink-3); }

  /* Buttons: two heights (48 default, 40 small), 6px radius, weight 500, no shadow, no gradient */
  .btn { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 22px; border: 1px solid transparent; border-radius: 6px; font-size: 15.5px; font-weight: 500; line-height: 1; white-space: nowrap; transition: background-color .12s, border-color .12s, color .12s; }
  .btn-solid { background: #18181b; border-color: #18181b; color: #fff; }
  .btn-solid:hover { background: #000; border-color: #000; }
  .btn-line { background: #fff; border-color: #18181b; color: #18181b; }
  .btn-line:hover { background: var(--soft-2); }
  .btn-sm { height: 40px; padding: 0 16px; font-size: 14.5px; }
  .tlink { display: inline-flex; align-items: center; font-size: 15.5px; font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--line-2); padding-bottom: 2px; transition: border-color .12s; }
  .tlink:hover { border-color: var(--ink); }
  .tlink span { transition: transform .12s; }
  .tlink:hover span { transform: translateX(2px); }
  a:focus-visible, button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
  .tlink:focus-visible, .navlinks a:not(.btn):focus-visible { border-radius: 2px; }

  section.sec { border-top: 1px solid var(--line); padding: 120px 0; }

  /* ---------- Nav ---------- */
  .navbar { border-bottom: 1px solid var(--line); }
  nav { display: flex; align-items: center; justify-content: space-between; height: 72px; }
  .brand { font-family: var(--head); font-weight: 600; font-size: 22px; letter-spacing: -0.035em; }
  .navlinks { display: flex; align-items: center; gap: 34px; font-size: 14.5px; color: var(--ink-2); }
  .navlinks a:hover { color: var(--ink); }
  .navlinks .btn { color: #fff; margin-left: 6px; }

  /* ---------- Hero ---------- */
  .hero { padding: 104px 0 0; }
  .eyebrow { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; color: var(--ink-3); }
  .eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--ink); }
  h1 { font-family: var(--head); font-weight: 600; font-size: 96px; line-height: .98; letter-spacing: -0.05em; margin-top: 30px; margin-left: -5px; }
  h1 span { display: block; white-space: nowrap; }
  .hero-row { display: grid; grid-template-columns: 610px 1fr; gap: 70px; margin-top: 52px; padding-top: 32px; border-top: 1px solid var(--line); }
  .hero-sub { font-size: 21px; line-height: 1.5; color: var(--ink-2); }
  .hero-sub b { color: var(--ink); font-weight: 600; }
  .hero-cta { display: flex; gap: 10px; }
  .hero-row .next { margin-top: 18px; max-width: 460px; }
  .works { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
  .works p:first-child { display: flex; align-items: baseline; gap: 16px; }
  .works .names { font-size: 15px; font-weight: 500; color: var(--ink); }

  /* ---------- Demo ---------- */
  .demo { margin-top: 96px; }
  .window { border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; background: #f3f3f5;
  }
  .titlebar { height: 40px; display: grid; grid-template-columns: 120px 1fr 120px; align-items: center; padding: 0 16px; border-bottom: 1px solid var(--line-2); }
  .dots { display: flex; gap: 8px; }
  .dots i { width: 11px; height: 11px; border-radius: 50%; background: #d4d4d8; }
  .titlebar span { text-align: center; font-size: 13px; font-weight: 500; color: var(--ink-3); }
  .app { width: 100%; height: 680px; display: grid; grid-template-columns: 220px 1fr 470px; grid-template-rows: minmax(0, 1fr); background: #fff; }

  .side { background: #f3f3f5; border-right: 1px solid var(--line); padding: 18px 12px; display: flex; flex-direction: column; }
  .newchat { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line-2); border-radius: 8px; padding: 9px 12px; font-size: 14px; font-weight: 500; }
  .newchat svg { width: 14px; height: 14px; fill: var(--ink); }
  .side h6 { font-size: 11.5px; font-weight: 500; color: var(--ink-3); margin: 24px 10px 8px; }
  .side ul { list-style: none; font-size: 14px; color: var(--ink-2); }
  .side li { padding: 7px 10px; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .side li.on { background: #e6e6e9; color: var(--ink); font-weight: 500; }
  .me { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 8px; font-size: 13px; color: var(--ink-3); }
  .avatar { width: 30px; height: 30px; border-radius: 50%; background: #e4e4e7; color: var(--ink); display: grid; place-items: center; font-weight: 600; font-size: 13px; flex: none; }
  .me b { display: block; color: var(--ink); font-weight: 600; }

  .chatcol { display: flex; flex-direction: column; min-width: 0; }
  .chathead { height: 52px; flex: none; display: flex; align-items: center; padding: 0 26px; font-size: 14.5px; font-weight: 500; border-bottom: 1px solid var(--line); }
  .chat { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; padding: 22px 26px 10px; overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 60px); mask-image: linear-gradient(to bottom, transparent 0, #000 60px); }
  .chat > * { flex: none; opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; }
  .chat > .in { opacity: 1; transform: none; }

  .who { font-size: 12px; font-weight: 500; color: var(--ink-3); margin-bottom: 6px; }
  .msg-user { align-self: flex-end; max-width: 82%; text-align: right; }
  .msg-user .bubble { display: inline-block; text-align: left; background: var(--soft-2); border-radius: 14px; padding: 10px 15px; font-size: 15px; line-height: 1.45; }
  .msg-ai { max-width: 94%; font-size: 15px; line-height: 1.55; }

  .thinking { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; }
  .thinking svg { width: 14px; height: 14px; fill: var(--ink-3); animation: spin 2.4s linear infinite; }
  .shimmer { background: linear-gradient(90deg, var(--ink-3) 0%, var(--ink-3) 35%, var(--ink) 50%, var(--ink-3) 65%, var(--ink-3) 100%);
    background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 1.6s linear infinite; }
  @keyframes shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
  @keyframes spin { to { transform: rotate(360deg); } }

  .tool { border: 1px solid var(--line-2); border-radius: 10px; background: #fff; overflow: hidden; }
  .tool-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: 13.5px; font-weight: 500; border-bottom: 1px solid var(--line); background: var(--soft); }
  .tool-head > span { flex: none; }
  .tool-head code { font-family: var(--mono); font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--ink); animation: spin .8s linear infinite; flex: none; }
  .tick { width: 16px; height: 16px; flex: none; border-radius: 50%; background: var(--ink); display: grid; place-items: center; }
  .tick svg { width: 10px; height: 10px; stroke: #fff; fill: none; stroke-width: 3; }
  .pkgs { list-style: none; padding: 6px 0; font-family: var(--mono); font-size: 12.5px; }
  .pkgs li { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px; padding: 5px 14px; opacity: 0; transition: opacity .25s; }
  .pkgs li.in { opacity: 1; }
  .pkgs .ver { color: var(--ink-3); }
  .pkgs s { color: var(--accent); }
  .tag-swap { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); background: #fff; border: 1px solid var(--accent); border-radius: 4px; padding: 1px 6px; margin-left: 6px; }
  .tool-foot { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-top: 1px solid var(--line); font-size: 13px; }
  .tool-foot svg { width: 14px; height: 14px; }

  .vigi { background: #fff; border: 1px solid var(--accent-line); border-left: 3px solid var(--accent); border-radius: 8px; padding: 14px 16px 15px; color: var(--ink); }
  .chat > .vigi { transform: translateX(-16px); }
  .chat > .vigi.in { transform: none; }
  .vigi-head { display: flex; align-items: center; gap: 8px; font-family: var(--head); font-weight: 600; font-size: 14.5px; letter-spacing: -0.01em; color: var(--accent); margin-bottom: 8px; }
  .vigi-head svg { width: 16px; height: 16px; }
  .vigi-head small { font-family: var(--sans); font-weight: 400; font-size: 12px; color: var(--ink-3); margin-left: auto; }
  .vigi p { font-size: 14.5px; line-height: 1.5; color: var(--ink); }
  .vigi p + p { margin-top: 3px; }
  .vigi code { font-family: var(--mono); font-size: 13px; background: var(--soft-2); border-radius: 4px; padding: 0 5px; }

  .prompt { flex: none; margin: 8px 22px 22px; border: 1px solid var(--line-2); border-radius: 14px; background: #fff; padding: 13px 15px 11px; }
  .prompt-text { min-height: 24px; font-size: 15px; }
  .prompt-text.empty::before { content: "Ask your AI to build\00a0 anything..."; color: var(--ink-3); }
  .caret { display: inline-block; width: 2px; height: 18px; background: var(--ink); vertical-align: -3px; margin-left: 1px; animation: blink 1s steps(1) infinite; }
  @keyframes blink { 50% { opacity: 0; } }
  .prompt-bar { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
  .prompt-bar .plus { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--ink-3); font-size: 17px; }
  .send { width: 30px; height: 30px; border-radius: 8px; background: var(--soft-2); display: grid; place-items: center; transition: background .2s; }
  .send svg { width: 15px; height: 15px; stroke: var(--ink-4); fill: none; stroke-width: 2.4; }
  .send.ready { background: var(--ink); }
  .send.ready svg { stroke: #fff; }

  .work { border-left: 1px solid var(--line); background: var(--soft); display: flex; flex-direction: column; min-width: 0; }
  .tabs { height: 52px; flex: none; display: flex; align-items: center; gap: 4px; padding: 0 14px; border-bottom: 1px solid var(--line); }
  .tab { font-size: 13px; font-weight: 500; color: var(--ink-3); padding: 6px 12px; border-radius: 6px; }
  .tab.on { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--line-2); }
  .pane { flex: 1; position: relative; }
  .pane > div { position: absolute; inset: 0; transition: opacity .35s, transform .4s ease; }
  .hidden { opacity: 0; pointer-events: none; }

  .empty-state { display: grid; place-items: center; text-align: center; color: var(--ink-3); font-size: 14px; }
  .empty-state svg { width: 22px; height: 22px; fill: var(--ink-4); margin: 0 auto 10px; }

  .term { background: #fff; color: var(--ink); font-family: var(--mono); font-size: 12.5px; line-height: 1.75; padding: 20px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
  .term div { white-space: pre-wrap; }
  .term .dim { color: var(--ink-3); }
  .term .ok { color: var(--ink-3); font-weight: 500; }
  .term .vg { color: var(--ink); }
  .term .vg b { color: var(--accent); border: 1px solid var(--accent-line); font-weight: 500; padding: 0 6px; border-radius: 4px; margin-right: 6px; }
  .term .bad { color: var(--accent); }

  .preview { padding: 18px; }
  .preview.hidden { transform: translateY(8px); }
  .browser { height: 100%; background: #fff; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
  .addr { height: 36px; flex: none; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--line); background: var(--soft); }
  .addr span { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 2px 12px; }
  .xapp { padding: 20px 22px; flex: 1; }
  .xapp h4 { font-family: var(--head); font-weight: 600; font-size: 24px; letter-spacing: -0.03em; }
  .xapp .month { font-size: 13px; color: var(--ink-3); margin-top: 2px; }
  .drop { margin-top: 16px; border: 1px dashed var(--line-2); background: var(--soft); border-radius: 8px; padding: 18px; text-align: center; font-size: 14px; color: var(--ink-3); font-weight: 500; }
  .rows { margin-top: 14px; font-size: 14px; }
  .rows div { display: flex; justify-content: space-between; padding: 9px 2px; border-bottom: 1px solid var(--line); }
  .rows span:first-child small { display: block; color: var(--ink-3); font-size: 12px; }
  .rows b { font-family: var(--mono); font-weight: 500; font-size: 13.5px; }
  .total { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 16px; }
  .total big { font-family: var(--head); font-size: 30px; font-weight: 600; letter-spacing: -0.03em; display: block; }
  .total small { font-size: 12px; color: var(--ink-3); }
  .bars { display: flex; align-items: flex-end; gap: 6px; height: 46px; }
  .bars i { width: 14px; border-radius: 2px 2px 0 0; background: #e4e4e7; }
  .bars i:last-child { background: var(--ink); }

  /* ---------- The gap ---------- */
  .gap { display: grid; grid-template-columns: 500px 1fr; gap: 70px; }
  .gap h2 { font-size: 58px; }
  .checklist { list-style: none; border-top: 1px solid var(--ink); }
  .checklist li { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 20px; padding: 21px 0; border-bottom: 1px solid var(--line); font-family: var(--head); font-size: 25px; font-weight: 500; letter-spacing: -0.02em; }
  .checklist .head { font-family: var(--mono); font-size: 12.5px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); padding: 12px 0; }
  .box { width: 22px; height: 22px; border-radius: 4px; display: grid; place-items: center; }
  .box.on { background: var(--ink); }
  .box svg { width: 14px; height: 14px; stroke: #fff; fill: none; stroke-width: 3; }
  .box.empty { border: 2px solid var(--accent); }
  .state { font-family: var(--mono); font-size: 13.5px; font-weight: 400; letter-spacing: 0; color: var(--ink-3); }
  .checklist li.miss { border-bottom: 1px solid var(--ink); }
  .checklist li.miss .what { color: var(--ink); }
  .checklist li.miss .state { color: var(--accent); font-weight: 500; }
  .gap-punch { margin-top: 40px; font-family: var(--head); font-weight: 500; font-size: 32px; line-height: 1.2; letter-spacing: -0.03em; color: var(--ink-3); }
  .gap-punch b { color: var(--ink); font-weight: 600; }

  /* ---------- How it works ---------- */
  .steps { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 64px; border-top: 1px solid var(--ink); }
  .step { padding: 28px 40px 8px 0; }
  .step + .step { padding-left: 32px; border-left: 1px solid var(--line); }
  .step .n { font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--ink-3); }
  .step p { font-family: var(--head); font-weight: 500; font-size: 27px; line-height: 1.2; letter-spacing: -0.025em; margin-top: 40px; }
  .step p span { color: var(--ink-3); }

  /* ---------- Audit ---------- */
  .audit-top { display: grid; grid-template-columns: 1fr 380px; gap: 60px; align-items: end; }
  .audit-top .lede { margin-top: 22px; }
  .audit-top .next { margin-top: 14px; }
  .report { margin-top: 60px; border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; background: #fff; }
  .r-head { display: flex; justify-content: space-between; align-items: flex-end; padding: 30px 36px 26px; border-bottom: 1px solid var(--line); }
  .r-head h3 { font-family: var(--head); font-weight: 600; font-size: 30px; letter-spacing: -0.035em; margin-top: 8px; }
  .r-head .meta { font-family: var(--mono); font-size: 13px; color: var(--ink-3); text-align: right; line-height: 1.6; }
  .r-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
  .r-stats div { padding: 20px 36px 22px; }
  .r-stats div + div { border-left: 1px solid var(--line); }
  .r-stats small { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
  .r-stats b { display: block; font-family: var(--mono); font-weight: 500; font-size: 34px; letter-spacing: -0.02em; margin-top: 8px; }
  .r-stats .hit b { color: var(--accent); }
  .st { justify-self: end; display: inline-flex; align-items: center; height: 24px; font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; padding: 0 8px; border-radius: 4px; border: 1px solid var(--line-2); color: var(--ink-2); background: #fff; white-space: nowrap; }
  .st.hit { color: var(--accent); border-color: var(--accent); }
  .finding { display: grid; grid-template-columns: 250px 1fr auto; align-items: center; gap: 24px; margin: 0 36px; padding: 26px 0 28px; }
  .finding p.label { font-size: 13px; color: var(--ink-3); }
  .finding p { font-size: 17px; line-height: 1.55; color: var(--ink); max-width: 720px; }
  .finding code { font-family: var(--mono); font-size: 14px; color: var(--ink); background: var(--soft-2); border-radius: 4px; padding: 1px 6px; }

  /* ---------- Company and FAQ layout ---------- */
  .founder { display: grid; grid-template-columns: 440px 1fr; gap: 80px; }
  .facts { list-style: none; border-top: 1px solid var(--ink); }
  .facts li { display: grid; grid-template-columns: 150px 1fr; gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--line); font-size: 19px; line-height: 1.45; }
  .facts li > span:first-child { font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); padding-top: 5px; }
  .facts b { font-weight: 600; }
  .tlink-row { margin-top: 36px; }

  /* ---------- Pricing ---------- */
  .price { display: grid; grid-template-columns: 1fr 520px; gap: 80px; margin-top: 56px; align-items: start; }
  .big { font-family: var(--head); font-weight: 600; font-size: 150px; line-height: .8; letter-spacing: -0.06em; }
  .big sup { font-size: 64px; vertical-align: top; position: relative; top: 8px; letter-spacing: -0.03em; margin-right: 4px; }
  .per { font-family: var(--head); font-weight: 500; font-size: 30px; letter-spacing: -0.03em; margin-top: 30px; }
  .terms { list-style: none; border-top: 1px solid var(--ink); }
  .terms li { display: grid; grid-template-columns: 44px 1fr; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--line); font-size: 19px; line-height: 1.4; }
  .terms li span:not(.t) { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); }
  .price .btn { margin-top: 30px; }

  .price-note { font-size: 16px; line-height: 1.5; color: var(--ink-2); max-width: 520px; margin-top: 28px; }
  .stack { margin-top: 14px; }
  .stack li { grid-template-columns: 44px 1fr auto; gap: 0 16px; }
  .stack .t { font-weight: 500; }
  .stack .t small { display: block; font-size: 15.5px; font-weight: 400; line-height: 1.45; color: var(--ink-3); margin-top: 4px; }
  .terms.stack li span.st { align-self: start; font-size: 11.5px; color: var(--ink-2); }

  .trial-terms { margin-top: 60px; }


  /* ---------- Pricing tiers ---------- */
  .tiers { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 56px; border-top: 1px solid var(--ink); }
  .tier { display: flex; flex-direction: column; padding: 32px 32px 36px 0; border-bottom: 1px solid var(--line); }
  .tier + .tier { padding-left: 32px; border-left: 1px solid var(--line); }
  .tier-main { background: var(--soft); padding-left: 32px; padding-right: 32px; }
  .tprice { font-family: var(--head); font-weight: 600; font-size: 84px; line-height: .9; letter-spacing: -0.05em; margin-top: 22px; }
  .tprice sup { font-size: 38px; vertical-align: top; position: relative; top: 6px; margin-right: 2px; }
  .tper { font-family: var(--head); font-weight: 500; font-size: 22px; letter-spacing: -0.02em; margin-top: 14px; }
  .tsub { font-size: 14.5px; line-height: 1.45; color: var(--ink-3); margin-top: 8px; }
  .twho { font-size: 16.5px; line-height: 1.5; color: var(--ink-2); margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
  .tlist { list-style: none; margin-top: 14px; flex: 1; }
  .tlist li { font-size: 15.5px; line-height: 1.45; color: var(--ink-2); padding: 10px 0 10px 22px; position: relative; }
  .tlist li::before { content: ""; position: absolute; left: 2px; top: 18px; width: 10px; height: 1px; background: var(--ink); }
  .tier .btn { margin-top: 24px; align-self: flex-start; }
  .tnote { font-size: 13.5px; line-height: 1.45; color: var(--ink-3); margin-top: 12px; }
  .addon { display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: baseline; margin-top: 40px; padding: 24px 0; border-bottom: 1px solid var(--line); }
  .addon p:last-child { font-size: 17px; line-height: 1.5; color: var(--ink-2); }
  .addon b { color: var(--ink); font-weight: 600; }
  /* ---------- PS ---------- */
  .ps { font-family: var(--head); font-weight: 500; font-size: 46px; line-height: 1.12; letter-spacing: -0.04em; max-width: 1000px; }
  .ps b { font-weight: 600; }
  .ps span { color: var(--ink-3); }
  .ps-cta { margin-top: 40px; display: flex; align-items: center; gap: 22px; }

  footer { border-top: 1px solid var(--line); }
  /* ---------- Security grid ---------- */
  .sec-top { display: grid; grid-template-columns: 1fr 440px; gap: 60px; align-items: end; }
  .sec-top .lede { margin-top: 0; }
  .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 60px; border-top: 1px solid var(--ink); }
  .grid3 > div { padding: 28px 32px 32px 0; border-bottom: 1px solid var(--line); }
  .grid3 > div:not(:nth-child(3n+1)) { padding-left: 32px; border-left: 1px solid var(--line); }
  .grid3 h4 { font-family: var(--head); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; }
  .grid3 p { font-size: 16.5px; line-height: 1.5; color: var(--ink-2); margin-top: 10px; }
  .finding.rule { border-top: 1px solid var(--line); }

  /* ---------- Pricing strip ---------- */
  .price-cta { margin-top: 30px; }
  .price-cta .btn { margin-top: 0; }
  .strip { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 72px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
  .strip li { padding: 22px 32px 24px 0; font-size: 16.5px; line-height: 1.5; color: var(--ink-2); }
  .strip li + li { padding-left: 32px; border-left: 1px solid var(--line); }
  .strip .label { display: block; color: var(--ink); margin-bottom: 8px; }

  /* ---------- Company and FAQ ---------- */
  .creds { margin-top: 56px; }
  .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 60px; }
  .card { display: flex; flex-direction: column; border: 1px solid var(--line-2); border-radius: 12px; padding: 32px 36px 34px; transition: border-color .12s; }
  .card:hover { border-color: var(--ink); }
  .card h3 { font-family: var(--head); font-weight: 600; font-size: 28px; line-height: 1.15; letter-spacing: -0.03em; margin-top: 14px; }
  .card-p { font-size: 17px; line-height: 1.55; color: var(--ink-2); margin-top: 14px; }
  .kv { list-style: none; margin-top: 22px; border-top: 1px solid var(--line); }
  .kv li { display: grid; grid-template-columns: 170px 1fr; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; }
  .kv li span:first-child { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); padding-top: 2px; }
  .card .tlink { margin-top: auto; padding-top: 28px; align-self: flex-start; border-bottom: 0; }
  .card .tlink span { transition: transform .12s; }
  .faq { border-top: 1px solid var(--ink); }
  .faq > div { padding: 24px 0; border-bottom: 1px solid var(--line); }
  .faq dt { font-family: var(--head); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; }
  .faq dd { font-size: 17px; line-height: 1.55; color: var(--ink-2); margin-top: 8px; max-width: 640px; }

  /* ---------- Footer ---------- */
  .foot-cols { display: grid; grid-template-columns: 1fr 170px 170px 170px 170px; gap: 32px; padding: 64px 0 56px; }
  .foot-brand .brand { font-size: 22px; }
  .foot-brand p { font-size: 15px; line-height: 1.5; color: var(--ink-3); margin-top: 12px; max-width: 300px; }
  .foot-cols > div:not(.foot-brand) { display: flex; flex-direction: column; gap: 12px; font-size: 15px; }
  .foot-cols .label { font-size: 12px; margin-bottom: 4px; }
  .foot-cols a:hover { color: var(--ink-3); }
  .foot { display: flex; justify-content: space-between; align-items: center; padding: 24px 0 48px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-3); }
  .foot a { color: var(--ink); }

  /* ---------- Small screens: everything below the 1240px desktop layout ---------- */
  .menu-btn { display: none; }
  @media (max-width: 1239px) {
    body { min-width: 0; }
    .wrap { width: auto; margin: 0 32px; }
    h1 { font-size: 7.4vw; }
    .hero-row { grid-template-columns: 1fr 1fr; gap: 48px; }
    .app { grid-template-columns: 200px 1fr 400px; }
    .gap { grid-template-columns: 1fr 1.3fr; gap: 56px; }
    .gap h2 br { display: none; }
    .price { grid-template-columns: 1fr 1fr; gap: 56px; }
    .founder { grid-template-columns: 1fr 1.3fr; gap: 56px; }
    .foot-cols { grid-template-columns: 1.4fr repeat(4, 1fr); }
    /* 44px tap targets without moving the visible text */
    .brand { padding: 9px 0; }
    .navlinks { gap: 18px; }
    .navlinks a:not(.btn) { padding: 14px 9px; }
    .navlinks .btn { margin-left: 14px; }
    .btn-sm { height: 44px; }
    .tlink-row { margin-top: 14px; }
    .tlink-row .tlink { padding-top: 22px; }
    .foot-cols > div:not(.foot-brand) { gap: 0; }
    .foot-cols > div:not(.foot-brand) a { min-height: 44px; display: flex; align-items: center; }
    .foot-cols .label { margin-bottom: 0; }
  }
  @media (max-width: 1023px) {
    .app { grid-template-columns: 1fr 320px; }
    .side { display: none; }
  }
  @media (max-width: 900px) {
    .tiers { grid-template-columns: 1fr; }
    .tier, .tier + .tier, .tier-main { padding: 28px 20px; border-left: 0; }
    .addon { grid-template-columns: 1fr; gap: 8px; }
    section.sec { padding: 96px 0; }
    h2, .gap h2 { font-size: 52px; }
    h1 { font-size: 9vw; margin-left: -3px; }
    h1 span { white-space: normal; }
    .hero { padding-top: 72px; }
    .hero-row, .gap, .audit-top, .sec-top, .founder, .price { grid-template-columns: 1fr; gap: 40px; }
    .sec-top .lede { margin-top: -16px; }
    .hero-row .next { max-width: none; }
    .demo { margin-top: 72px; }
    .step { padding-right: 24px; }
    .step + .step { padding-left: 24px; }
    .step p { font-size: 22px; margin-top: 24px; }
    .grid3 { grid-template-columns: 1fr 1fr; }
    .grid3 > div:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; }
    .grid3 > div { padding: 26px 28px 28px 0; }
    .grid3 > div:nth-child(2n) { padding-left: 28px; padding-right: 0; border-left: 1px solid var(--line); }
    .finding { grid-template-columns: 150px 1fr auto; }
    #detection .grid3 { grid-template-columns: 1fr; }
    #detection .grid3 > div { padding: 22px 0 24px; border-left: 0; }
    .strip li { padding-right: 24px; }
    .strip li + li { padding-left: 24px; }
    .card { padding: 28px 28px 30px; }
    .kv li { grid-template-columns: 1fr; gap: 4px; }
    .foot-cols { grid-template-columns: repeat(4, 1fr); }
    .foot-brand { grid-column: 1 / -1; }
    .ps { font-size: 38px; }
    .eyebrow, .next, .caption, .price-note, .stack .t small, .foot-brand p, .foot-cols > div:not(.foot-brand) { font-size: 16px; }

    /* compact menu */
    .navbar { position: relative; }
    .navbar .wrap { position: static; }
    .menu-btn { display: grid; place-content: center; gap: 5px; width: 44px; height: 44px; margin-right: -10px; background: none; border: 0; border-radius: 6px; cursor: pointer; }
    .menu-btn span { display: block; width: 22px; height: 2px; background: var(--ink); transition: transform .15s, opacity .15s; }
    .menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    .navlinks { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 20; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 32px 24px; background: #fff; border-bottom: 1px solid var(--line); font-size: 17px; color: var(--ink); }
    .navlinks.open { display: flex; }
    .navlinks a:not(.btn) { display: flex; align-items: center; min-height: 52px; padding: 0; border-bottom: 1px solid var(--line); }
    .navlinks .btn { margin: 20px 0 0; height: 48px; font-size: 15.5px; }
  }
  @media (max-width: 640px) {
    .wrap { margin: 0 20px; }
    section.sec { padding: 72px 0; }
    section.sec[style] { margin-top: 72px !important; }
    h2, .gap h2 { font-size: 38px; line-height: 1.05; letter-spacing: -0.04em; }
    h1 { font-size: 10.6vw; line-height: 1.02; letter-spacing: -0.045em; margin-left: -2px; margin-top: 22px; }
    .hero { padding-top: 48px; }
    .hero-row { margin-top: 36px; padding-top: 28px; gap: 28px; }
    .hero-sub { font-size: 18px; }
    .lede { font-size: 18px; }
    .hero-cta, .ps-cta { flex-direction: column; align-items: stretch; gap: 10px; }
    .hero-cta .btn, .ps-cta .btn, .audit-top .btn { width: 100%; }
    .works p:first-child { flex-wrap: wrap; gap: 6px 16px; }
    .navlinks { padding: 8px 20px 20px; }

    /* demo: chat on top, preview below */
    .demo { margin-top: 56px; }
    .titlebar { grid-template-columns: 60px 1fr 60px; padding: 0 12px; }
    .app { display: flex; flex-direction: column; height: auto; }
    .chatcol { height: 440px; }
    .chathead { padding: 0 16px; }
    .chat { padding: 16px 14px 8px; gap: 14px; }
    .msg-user { max-width: 90%; }
    .msg-ai { max-width: 100%; }
    .prompt { margin: 8px 12px 12px; }
    .work { height: 340px; border-left: 0; border-top: 1px solid var(--line); }
    .preview { padding: 12px; }
    .xapp { padding: 16px; }
    .caption b { display: block; margin-bottom: 4px; }

    .checklist li { grid-template-columns: 22px 1fr auto; gap: 14px; padding: 16px 0; font-size: 19px; }
    .gap-punch { font-size: 24px; margin-top: 28px; }
    .steps { grid-template-columns: 1fr; margin-top: 40px; }
    .step, .step + .step { padding: 22px 0 24px; border-left: 0; }
    .step + .step { border-top: 1px solid var(--line); }
    .step p { margin-top: 12px; }
    .grid3 { grid-template-columns: 1fr; margin-top: 40px; }
    .grid3 > div, .grid3 > div:nth-child(2n) { padding: 22px 0 24px; border-left: 0; }
    .grid3 h4 { font-size: 20px; }
    .grid3 p { font-size: 16.5px; }
    .cards { grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
    .card { padding: 22px 20px 24px; }
    .card h3 { font-size: 22px; }
    .card-p { font-size: 16px; }
    .kv li { font-size: 16px; }
    .card .tlink { padding-top: 22px; min-height: 44px; }
    .facts li { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; font-size: 17px; }
    .facts li > span:first-child { padding-top: 0; }
    .creds { margin-top: 40px; }
    .trial-terms { margin-top: 40px; }
    .report { margin-top: 40px; }
    .r-head { flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px; }
    .r-head h3 { font-size: 24px; }
    .r-head .meta { text-align: left; }
    .r-stats { grid-template-columns: 1fr; }
    .r-stats div { padding: 14px 20px 16px; }
    .r-stats div + div { border-left: 0; border-top: 1px solid var(--line); }
    .r-stats b { font-size: 28px; margin-top: 4px; }
    .finding { grid-template-columns: 1fr; gap: 10px; margin: 0 20px; padding: 20px 0 22px; }
    .finding p { font-size: 16px; }
    .st { justify-self: start; }
    .price { margin-top: 32px; }
    .big { font-size: 120px; }
    .big sup { font-size: 52px; }
    .per { font-size: 24px; margin-top: 22px; }
    .terms li { grid-template-columns: 36px 1fr; font-size: 17px; padding: 16px 0; }
    .stack li { grid-template-columns: 36px 1fr; gap: 0 10px; }
    .terms.stack li span.st { grid-column: 2; margin-top: 10px; }
    .strip { grid-template-columns: 1fr; margin-top: 48px; }
    .strip li, .strip li + li { padding: 18px 0 20px; border-left: 0; }
    .strip li + li { border-top: 1px solid var(--line); }
    .faq dt { font-size: 19px; }
    .faq dd { font-size: 16px; }
    .ps { font-size: 28px; line-height: 1.18; letter-spacing: -0.035em; }
    .ps-cta { margin-top: 32px; }
    .foot-cols { grid-template-columns: 1fr 1fr; gap: 28px 20px; padding: 48px 0 40px; }
    .foot { flex-direction: column; align-items: flex-start; gap: 6px; padding: 20px 0 36px; font-size: 15px; }

    /* pricing on a phone */
    .tiers { margin-top: 36px; }
    .tier, .tier + .tier { padding: 28px 0 32px; }
    .tier.tier-main, .tier + .tier.tier-main { padding: 28px 20px 32px; margin: 0 -20px; }
    .tprice { font-size: 64px; margin-top: 16px; }
    .tprice sup { font-size: 30px; top: 4px; }
    .tper { font-size: 20px; margin-top: 10px; }
    .tier .btn { align-self: stretch; width: 100%; }
    .addon { margin-top: 28px; }
    .addon p:last-child { font-size: 16px; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
  }

/* ---------- Brand edge (second style block of the mockup) ---------- */
/* Original monochrome mockup with one small brand accent. */
:root { --edge: #cdf276; --sage-ink: #18181b; }
.eyebrow::before { background: var(--edge); height: 3px; }
.btn-solid { background: var(--edge); border-color: var(--edge); color: var(--ink); }
.btn-solid:hover { background: #bce455; border-color: #bce455; }
.navlinks .btn { color: var(--ink); }
.tier-main { box-shadow: inset 0 3px 0 var(--edge); }
.tlink:hover { border-color: #18181b; }
::selection { background: var(--edge); color: #0b0b0c; }
@media (max-width: 360px) {
  .gap h2 { font-size: 34px; }
  .tier { min-width: 0; }
  .tier .btn { white-space: normal; height: auto; min-height: 48px; padding-top: 12px; padding-bottom: 12px; line-height: 1.3; text-align: center; }
  .checklist li { column-gap: 10px; }
  .checklist .state { font-size: 12px; }
}

/* ===== 05-shell.css ===== */
/* Shared shell: top bar and footer on every page. The footer keeps the mockup's four link columns. */
.foot-cols a { text-align: left; }
.foot-cols .label { font-size: 12px; }
.navlinks a:not(.btn) { white-space: nowrap; }

/* Resources menu in the top bar. menu.js sets aria-expanded; the list shows only when it is true. */
.navmenu { position: relative; }
.navmenu-btn { display: inline-flex; align-items: center; gap: 8px; padding: 0; font: inherit; color: inherit; white-space: nowrap; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.navmenu-btn:hover, .navmenu-btn[aria-expanded="true"] { color: var(--ink); }
.navmenu-btn::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.navmenu-btn[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
.navmenu-btn:focus-visible { border-radius: 2px; }
.navmenu-list { display: none; position: absolute; top: calc(100% + 18px); left: -14px; z-index: 30; flex-direction: column; min-width: 180px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 32px rgba(11, 11, 12, .08); }
.navmenu-btn[aria-expanded="true"] + .navmenu-list { display: flex; }
.navlinks .navmenu-list a { padding: 9px 12px; border-radius: 6px; color: var(--ink-2); }
.navlinks .navmenu-list a:hover { color: var(--ink); background: var(--tint); }

/* Bottom line: legal links, then the copyright and the place. */
.foot { flex-wrap: wrap; gap: 8px 32px; }
.foot-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; }
.foot-legal button { padding: 0; font: inherit; color: var(--ink); background: none; border: 0; cursor: pointer; }
.foot-legal a:hover, .foot-legal button:hover { color: var(--ink-3); }

@media (max-width: 1239px) {
  .navmenu-btn { padding: 14px 9px; }
  .navmenu-list { top: 100%; left: -5px; }
  .foot-legal a, .foot-legal button { min-height: 44px; display: inline-flex; align-items: center; }
}
@media (max-width: 900px) {
  /* Phone menu: Resources is one more row; its links open under it. */
  .navmenu { position: static; }
  .navmenu-btn { display: flex; width: 100%; min-height: 52px; padding: 0; justify-content: space-between; color: var(--ink); border-bottom: 1px solid var(--line); }
  .navmenu-btn::after { margin-right: 4px; }
  .navmenu-list { position: static; min-width: 0; padding: 0 0 0 16px; border: 0; border-radius: 0; box-shadow: none; }
  .navlinks .navmenu-list a { padding: 0; border-radius: 0; color: var(--ink); }
  .navlinks .navmenu-list a:hover { background: none; }
}
@media (max-width: 640px) {
  .foot { gap: 6px; }
}

/* ===== 06-home.css ===== */
/* Home page fixes on top of the mockup CSS. The mockup used <big>, which HTML no longer allows, so the
   demo total uses a span with the same look. */
.total .amt { font-family: var(--head); font-size: 30px; font-weight: 600; letter-spacing: -0.03em; display: block; }

/* Compact layout (see CLAUDE.md). The mockup gives each section 120px above and below. The site keeps
   the sections tighter, and on a wide screen it sets two blocks side by side where the mockup stacked
   them. Below 901px the mockup's one-column rules apply unchanged. */
@media (min-width: 641px) {
  section.sec { padding: 80px 0; }
  section.sec[style] { margin-top: 80px !important; }
  .demo { margin-top: 72px; }
  .trial-terms, .report, .creds { margin-top: 40px; }
  .tiers { margin-top: 40px; }
  .strip { margin-top: 40px; }
}
@media (min-width: 901px) {
  /* Free 14 days: the heading and the button on the left, the three days on the right. */
  #trial > .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; align-items: start; }
  #trial > .wrap > * { grid-column: 1 / -1; }
  #trial .audit-top { grid-column: 1; grid-template-columns: 1fr; gap: 28px; align-items: start; }
  #trial .trial-terms { grid-column: 2; margin-top: 0; }
  #trial .trial-terms li { grid-template-columns: 120px 1fr; font-size: 17px; padding: 18px 0; }
  /* Why trust us: the heading on the left, the facts on the right, as in the FAQ block. */
  #proof > .wrap { display: grid; grid-template-columns: 1fr 1.3fr; column-gap: 56px; grid-template-rows: auto 1fr auto; align-items: start; }
  #proof > .wrap > .label { grid-column: 1; grid-row: 1; }
  #proof > .wrap > h2 { grid-column: 1; grid-row: 2; }
  #proof .creds { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
  #proof .tlink-row { grid-column: 2; grid-row: 3; }
}
@media (min-width: 1240px) {
  #proof > .wrap { grid-template-columns: 440px 1fr; column-gap: 80px; }
}

/* Home FAQ: collapsed questions in the mockup's type sizes. */
.faq .faq-item > summary { padding: 24px 0; font-size: 22px; }
.faq .faq-a p { font-size: 17px; line-height: 1.55; color: var(--ink-2); max-width: 640px; }
@media (max-width: 640px) {
  .faq .faq-item > summary { font-size: 19px; }
  .faq .faq-a p { font-size: 16px; }
}

/* ===== 10-pages.css ===== */
/* Inner pages. Built on the mockup tokens in 00-mockup.css.
   Rules for this part:
   - Scope everything to .page (or to a component class) so the home page keeps the mockup rules.
   - White page, hairline rules, a 1px ink rule on top of lists, one rust accent for a bad thing only.
   - Sizes come from the scale: 12 13 14 15 17 20 24 30 40. */

/* ---------- Page frame ---------- */
.page { padding: 64px 0 88px; }
.page .hero { padding: 0; }
.page.reading > * { max-width: 720px; }
.page.reading > .wide, .page.reading > .tablewrap, .page.reading > table { max-width: none; }
.page h1 { font-family: var(--head); font-weight: 600; font-size: 40px; line-height: 1.1; letter-spacing: -0.035em; margin: 14px 0 0; margin-left: 0; text-wrap: balance; }
.page h1 span { display: inline; white-space: normal; }
/* On a phone a 40px title cannot hold two glued words such as "Processing Agreement" on one line. */
@media (max-width: 480px) { .page h1 { font-size: 30px; } }
.page h2 { font-family: var(--head); font-weight: 600; font-size: 30px; line-height: 1.2; letter-spacing: -0.03em; margin-top: 48px; text-wrap: balance; }
.page h3 { font-family: var(--head); font-weight: 600; font-size: 20px; line-height: 1.3; letter-spacing: -0.02em; margin-top: 36px; text-wrap: balance; }
.page h4 { font-family: var(--head); font-weight: 600; font-size: 17px; line-height: 1.4; margin-top: 28px; }
.page p, .page li, .page dd, .page blockquote { font-size: 17px; line-height: 1.65; color: var(--ink-2); text-wrap: pretty; }
.page p { margin-top: 16px; }
.page ul, .page ol { margin: 16px 0 0 22px; }
.page li { margin-top: 8px; padding-left: 4px; }
.page li > ul, .page li > ol { margin-top: 8px; }
.page strong, .page b { font-weight: 600; color: var(--ink); }
.page em { font-style: italic; }
.page hr { border: 0; border-top: 1px solid var(--line); margin: 48px 0; }
.page blockquote { border-left: 3px solid var(--line-2); padding: 2px 0 2px 20px; margin: 24px 0 0; }
.page small, .page .small { font-size: 14px; color: var(--ink-3); }
.page :where(a:not(.btn):not(.primary):not(.secondary):not(.ghost):not(.tlink)) { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color .12s; }
.page :where(a:not(.btn):not(.primary):not(.secondary):not(.ghost):not(.tlink)):hover { text-decoration-color: var(--ink); }
.page code, .legal code { font-family: var(--mono); font-size: 14px; color: var(--ink); background: var(--soft-2); border-radius: 4px; padding: 1px 6px; overflow-wrap: anywhere; }
.page .lede { font-size: 20px; line-height: 1.5; color: var(--ink-2); max-width: 680px; margin-top: 22px; }
.page .lede + .lede { margin-top: 12px; }
.page .cost-kicker, .cost-kicker, .kicker { font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin: 0; }
.page .updated, .updated { font-family: var(--mono); font-size: 13px; line-height: 1.5; color: var(--ink-3); margin-top: 14px; }
.crumbs { font-family: var(--mono); font-size: 13px; letter-spacing: .02em; color: var(--ink-3); margin: 0 0 22px; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: baseline; gap: 4px 8px; height: auto; }
.page .label { font-size: 13px; line-height: 1.4; color: var(--ink-3); margin-top: 0; }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.page .section-lead { font-size: 20px; line-height: 1.5; color: var(--ink-2); max-width: 680px; }

/* Sections inside a page get a hairline and room, like the home page, but smaller. */
.page > section, .page > div > section { margin-top: 0; }
.page .cost-body, .page .vs-intro, .page .section { max-width: 720px; }
.page .cost-body.cost-case { border-left: 1px solid var(--ink); padding-left: 24px; margin-top: 48px; }
.page .cost-body.cost-case h2 { margin-top: 0; }
.page .cost-wide { max-width: none; }

/* ---------- Buttons on old markup (.primary, .secondary, .ghost) ---------- */
.primary, .secondary, .ghost { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 22px; border: 1px solid transparent; border-radius: 6px; font-family: var(--sans); font-size: 15px; font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer; transition: background-color .12s, border-color .12s, color .12s; text-decoration: none; }
.primary { background: var(--edge); border-color: var(--edge); color: var(--ink); }
.primary:hover { background: #bce455; border-color: #bce455; }
.secondary { background: #fff; border-color: #18181b; color: #18181b; }
.secondary:hover { background: var(--soft-2); }
.ghost { color: var(--ink); border-color: var(--line-2); background: #fff; }
.ghost:hover { border-color: var(--ink); }
.sm { height: 40px; padding: 0 16px; font-size: 14px; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 32px; }
.page .cta { max-width: none; }
button.primary[disabled], button.secondary[disabled] { opacity: .5; cursor: default; }

/* ---------- Page header block ---------- */
.page header.hero { padding-bottom: 40px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.page header.hero + .cta { margin-top: 32px; }
.page header.hero .cta { margin-top: 28px; }
.page header.hero .meta { font-size: 14px; color: var(--ink-3); margin-top: 16px; }

/* ---------- Tables ---------- */
.tablewrap { overflow-x: auto; margin-top: 28px; border-top: 1px solid var(--ink); }
.tablewrap > table { margin-top: 0; }
.page table { width: 100%; border-collapse: collapse; margin-top: 28px; font-size: 15px; line-height: 1.5; }
.tablewrap > table, .page table.vs { margin-top: 0; }
.page th, .page td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); font-weight: 400; }
.page thead th { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); padding-top: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.page tbody th { color: var(--ink); font-weight: 500; }
.page table:not(.vs) { border-top: 1px solid var(--ink); }
.page td code, .page th code { font-size: 13px; }
.page td .m, .page .m { font-family: var(--mono); font-size: 13px; }
.page td.yes, .page td.no, .page td.some { white-space: nowrap; }
.page td.yes { color: var(--ink); font-weight: 500; }
.page td.no { color: var(--ink-3); }

/* ---------- Code ---------- */
pre.cmd, .page pre { position: relative; font-family: var(--mono); font-size: 13px; line-height: 1.7; color: var(--ink); background: var(--soft); border: 1px solid var(--line); border-radius: 8px; padding: 16px 52px 16px 18px; margin: 20px 0 0; overflow-x: auto; white-space: pre; }
pre.cmd code, .page pre code { font-size: inherit; background: none; padding: 0; border-radius: 0; overflow-wrap: normal; }
pre.cmd b { font-weight: 500; color: var(--ink); }
pre .dim, pre .cmt { color: var(--ink-3); }
.copy-btn { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; display: grid; place-items: center; background: #fff; border: 1px solid var(--line-2); border-radius: 6px; color: var(--ink-3); cursor: pointer; transition: color .12s, border-color .12s; }
.copy-btn:hover { color: var(--ink); border-color: var(--ink); }
.copy-btn.copied { color: var(--ink); background: var(--edge); border-color: var(--edge); }

/* ---------- Callouts ---------- */
.note, .callout { background: var(--soft); border: 1px solid var(--line); border-radius: 8px; padding: 16px 20px; margin-top: 24px; }
.note p, .callout p { margin-top: 8px; font-size: 15px; line-height: 1.55; }
.note p:first-child, .callout p:first-child { margin-top: 0; }
.warn, .callout.warn { background: #fff; border: 1px solid var(--accent-line); border-left: 3px solid var(--accent); border-radius: 8px; padding: 16px 20px; margin-top: 24px; }
.warn p { font-size: 15px; line-height: 1.55; color: var(--ink); margin-top: 8px; }
.warn p:first-child { margin-top: 0; }

/* ---------- FAQ lists ---------- */
.vs-faq, .page .faq { max-width: none; }
.vs-faq h2 { margin-top: 56px; }
.faqlist { margin-top: 24px; border-top: 1px solid var(--ink); }
/* Every FAQ is collapsed: the question shows, the answer opens on click, Enter or Space. */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item > summary { display: flex; align-items: center; gap: 16px; padding: 20px 0; list-style: none; cursor: pointer; font-family: var(--head); font-weight: 600; font-size: 20px; letter-spacing: -0.02em; color: var(--ink); }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after { content: "+"; flex: none; margin-left: auto; font-family: var(--mono); font-weight: 400; font-size: 20px; line-height: 1; color: var(--ink-3); }
.faq-item[open] > summary::after { content: "\2212"; color: var(--ink); }
.faq-item > summary:hover { color: var(--ink-2); }
.faq-item > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
.faq-item > summary > h3 { margin: 0; font-size: inherit; font-weight: inherit; letter-spacing: inherit; color: inherit; }
.faq-a { padding: 0 0 24px; }
.faq-a p { margin-top: 8px; max-width: 720px; }
.faq-a > :first-child { margin-top: 0; }
.faqlist { align-items: start; }

/* ---------- Closing call to action ---------- */
.close { margin-top: 64px; padding-top: 36px; border-top: 1px solid var(--line); }
.close h2 { margin-top: 0; }
.close p { max-width: 640px; }

/* ---------- Chips and tags ---------- */
.chip, .kn-tag, .tag { display: inline-flex; align-items: center; height: 24px; font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; padding: 0 8px; border-radius: 4px; border: 1px solid var(--line-2); color: var(--ink-2); background: #fff; white-space: nowrap; }
.chip.bad, .kn-tag.bad, .tag.bad, .chip.hit { color: var(--accent); border-color: var(--accent); }

/* ---------- Forms ---------- */
.page label { display: block; font-size: 14px; font-weight: 500; color: var(--ink); margin-bottom: 6px; }
.fld, .page input[type=text], .page input[type=email], .page input[type=url], .page input[type=search], .page input[type=number], .page select, .page textarea { width: 100%; height: 40px; padding: 0 12px; font-family: var(--sans); font-size: 15px; color: var(--ink); background: #fff; border: 1px solid var(--line-2); border-radius: 6px; transition: border-color .12s; }
.page textarea.fld, .page textarea { height: auto; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.fld:focus, .page input:focus, .page select:focus, .page textarea:focus { outline: 2px solid var(--ink); outline-offset: 2px; border-color: var(--ink); }
.page input[type=file] { height: auto; padding: 8px 0; border: 0; font-size: 14px; }
.ff-form { margin-top: 28px; max-width: 560px; }
.ff-stack { display: grid; gap: 20px; }
.ff-honey, .page input.ff-honey { position: absolute; width: 1px !important; height: 1px !important; padding: 0; border: 0; opacity: 0; overflow: hidden; clip-path: inset(50%); pointer-events: none; }
.ff-foot { display: flex; align-items: center; gap: 16px; margin-top: 24px; flex-wrap: wrap; }
.ff-status { margin: 0; font-size: 15px; color: var(--ink-2); }
.ff-status.err, .ff-status.error { color: var(--accent); }
.ff-privacy, .fb-hint { font-size: 13px; color: var(--ink-3); line-height: 1.5; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- Glossary hover (glossary.js) ---------- */
.def { position: relative; text-decoration: underline dotted var(--ink-4); text-underline-offset: 3px; cursor: help; }
.def:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 2px; }
.def-pop { display: none; position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 30; width: max-content; max-width: 300px; padding: 10px 12px; background: #fff; border: 1px solid var(--line-2); border-radius: 8px; font-size: 14px; line-height: 1.45; font-weight: 400; color: var(--ink-2); text-decoration: none; }
.def:hover .def-pop, .def:focus-visible .def-pop, .def.open .def-pop { display: block; }

/* ---------- Cookie banner (consent.js) ---------- */
.cookie-banner { position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 60; max-width: 560px; background: #fff; border: 1px solid var(--line-2); border-radius: 12px; padding: 20px 22px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.cookie-banner p { margin: 0; font-size: 14px; line-height: 1.5; }
.cookie-banner a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.cookie-actions { display: flex; gap: 10px; margin-top: 14px; }
.cookie-actions button { height: 40px; padding: 0 16px; font-size: 14.5px; }

/* ===== 30-compare.css ===== */
/* Comparison pages: vs/index.html and vs/<tool>.html.
   Layout: the heading sits in a 320px left column and the text in a 720px right column, like the
   company block on the home page. Tables, cards and the chart take the full 1200px. */

.vs-page > section { display: grid; grid-template-columns: 320px minmax(0, 1fr); column-gap: 80px; align-content: start; max-width: none; margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--line); }
.vs-page > header.hero + section { margin-top: 48px; padding-top: 0; border-top: 0; }
.vs-page > section > h2 { grid-column: 1; grid-row: 1; margin-top: 0; font-size: 30px; }
.vs-page > section > :not(h2) { grid-column: 2; min-width: 0; max-width: 720px; }
.vs-page > section > p:first-of-type, .vs-page > section > h2 + * { margin-top: 0; }
.vs-page > section > .tablewrap, .vs-page > section > .vslist { grid-column: 1 / -1; max-width: none; }
.vs-page .vs-faq h2 { margin-top: 0; }
.vs-page header.hero { padding-bottom: 0; border-bottom: 0; margin-bottom: 0; }
.vs-page header.hero .lede { max-width: 720px; }
.vs-page header.hero .cta { margin-top: 28px; }

/* ---------- Callout with the example command ---------- */
.vs-page .callout-title { margin-top: 0; font-family: var(--head); font-weight: 600; font-size: 17px; color: var(--ink); }
.vs-page .callout-foot { font-size: 15px; line-height: 1.55; color: var(--ink-2); margin-top: 12px; }
.vs-page .warn pre.cmd { margin-top: 12px; background: var(--soft); }

/* ---------- Comparison table: question | competitor | Vigilance ---------- */
.vs-page .tablewrap { margin-top: 0; }
.vs-page section > p + .tablewrap { margin-top: 28px; }
.vs-page table.vs { table-layout: fixed; margin-top: 0; font-size: 15px; }
.vs-page table.vs thead th:first-child { width: 36%; }
.vs-page table.vs th, .vs-page table.vs td { padding: 16px 24px 16px 0; }
.vs-page table.vs th[scope=row] { color: var(--ink); font-weight: 500; }
.vs-page table.vs td { color: var(--ink-2); }
.vs-page table.vs thead th:last-child, .vs-page table.vs td:last-child { background: var(--soft); padding-left: 20px; padding-right: 20px; color: var(--ink); }
.vs-page table.vs thead th:last-child { box-shadow: inset 0 3px 0 var(--edge); }
.vs-page .tablewrap + p { margin-top: 20px; font-size: 15px; color: var(--ink-3); }

/* ---------- Known risk and new risk: open rules, as in the docs ---------- */
.vs-page .knownnew { display: grid; grid-template-columns: 1fr 1fr; margin-top: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.vs-page .kn-col { padding: 24px 32px 28px 0; }
.vs-page .kn-col + .kn-col { padding-left: 32px; border-left: 1px solid var(--line); }
.vs-page .kn-col.kn-new { border-left: 3px solid var(--accent); }
.vs-page .kn-col p { margin-top: 14px; font-size: 17px; }

/* ---------- Compare marks: filled dot yes, hollow dot no, dash partial ---------- */
.m { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.m::before { content: ""; flex: none; box-sizing: border-box; width: 10px; height: 10px; border-radius: 50%; }
.m.yes { color: var(--ink); }
.m.yes::before { background: var(--ink); }
.m.no { color: var(--ink-3); }
.m.no::before { border: 1.5px solid var(--ink-4); }
.m.some::before { height: 2px; border-radius: 1px; background: var(--ink-3); }

/* ---------- The chart on /vs/ ---------- */
.vs-page table.chart { table-layout: fixed; margin-top: 0; font-size: 15px; }
.vs-page table.chart thead th { white-space: normal; vertical-align: bottom; line-height: 1.4; padding: 12px 16px 12px 0; }
.vs-page table.chart thead th:first-child { width: 24%; }
.vs-page table.chart tr.groups th { font-size: 12px; text-align: left; border-bottom: 1px solid var(--ink); padding-bottom: 8px; }
.vs-page table.chart tr.groups td.corner { border-bottom: 0; }
.vs-page table.chart tr.groups th.grp-sc, .vs-page table.chart th.sc-start, .vs-page table.chart td:nth-child(3) { border-left: 1px solid var(--line); padding-left: 20px; }
.vs-page table.chart tbody th { font-weight: 500; }
.vs-page table.chart tbody th a { text-decoration: none; }
.vs-page table.chart tbody th a:hover { text-decoration: underline; }
.vs-page table.chart td { padding: 12px 16px 12px 0; }
.vs-page table.chart td:nth-child(3) { padding-left: 20px; }
.vs-page table.chart tr.mine th, .vs-page table.chart tr.mine td { background: var(--soft); }
.vs-page table.chart tr.mine th { padding-left: 14px; }
.vs-page section > .chart-note, .vs-page .chart-note { grid-column: 1 / -1; margin-top: 20px; max-width: 720px; font-size: 15px; color: var(--ink-3); }

/* ---------- Comparison cards on /vs/ ---------- */
.vslist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 24px; margin-top: 8px; }
.vsgroup { grid-column: 1 / -1; margin-top: 28px; font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.vsgroup:first-child { margin-top: 0; }
.vscard { display: flex; flex-direction: column; border: 1px solid var(--line-2); border-radius: 12px; padding: 24px 28px 26px; transition: border-color .12s; text-decoration: none; }
.vscard:hover { border-color: var(--ink); }
.vscard h3 { margin-top: 0; font-size: 20px; }
.vscard p { margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }

/* ---------- Close block and contact form ---------- */
.vs-page > section.close { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--line); }
.vs-page > section.close p, .vs-page > section.contact p { max-width: 720px; }
.vs-page > section.contact { max-width: none; margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--line); }
.vs-page .close .cta { margin-top: 24px; }
.vs-page .contact .ff-form { margin-top: 20px; max-width: 560px; }

@media (max-width: 1239px) {
  .vs-page > section { grid-template-columns: 240px minmax(0, 1fr); column-gap: 48px; }
  .vslist { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .vs-page > section { display: block; }
  .vs-page > section > h2 { margin-bottom: 20px; }
  .vs-page table.vs, .vs-page table.vs thead, .vs-page table.vs tbody, .vs-page table.vs tr, .vs-page table.vs th, .vs-page table.vs td { display: block; width: 100%; }
  .vs-page table.vs thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .vs-page table.vs tr { padding: 16px 0; border-bottom: 1px solid var(--line); }
  .vs-page table.vs th, .vs-page table.vs td { border: 0; padding: 4px 0; background: none; }
  .vs-page table.vs td::before { content: attr(data-label); display: block; font-family: var(--mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
  .vs-page table.vs td:last-child { background: var(--soft); padding: 8px 12px; border-radius: 6px; margin-top: 6px; }
  .vs-page .knownnew { grid-template-columns: 1fr; }
  .vs-page .kn-col + .kn-col { padding-left: 20px; border-top: 1px solid var(--line); }
  .vslist { grid-template-columns: 1fr; }
}

/* The glued last two words of a long tool name cannot wrap, so the H1 steps down on a phone. */
@media (max-width: 480px) {
  .vs-page header.hero h1 { font-size: 30px; }
}

/* ===== 31-guides.css ===== */
/* Guides, search pages and file integrity pages (worker B).
   Page frame: <main class="wrap page reading guide ...">. Prose sits in a 720px column on the 1200px wrap.
   Sections that hold a table or a chart get .cost-wide and run the full wrap. */

/* ---------- Frame ---------- */
.guide header.hero { padding-bottom: 36px; }
.guide header.hero h1 { max-width: 860px; }
.guide header.hero .lede { max-width: 680px; }
.page.reading.guide > .cost-wide, .page.reading.guide > .cost-evidence, .page.reading.guide > .wide, .page.reading.guide > header.hero { max-width: none; }
.guide .cost-wide > p, .guide .cost-wide > ul, .guide .cost-wide > ol, .guide .cost-wide > h2, .guide .cost-wide > h3, .guide .cost-wide > .updated { max-width: 720px; }
.guide .cost-body { margin-top: 0; }
.guide .cost-kicker + h2, .guide .cost-kicker + h1 { margin-top: 12px; }
.guide .cost-case .cost-kicker { margin-top: 0; }
.guide .cost-case h3 { font-size: 20px; margin-top: 32px; }
.guide .cost-case h3:first-of-type { margin-top: 24px; }
.guide .tlink-row { margin-top: 24px; }
.guide .vs-intro { margin-top: 56px; }
.guide .vs-intro h2 { margin-top: 0; }

/* The page header and a section after it share one rule above the first section. */
.guide header.hero + section h2:first-child { margin-top: 48px; }

/* ---------- Evidence block: a number, a caption, and the proof beside it ---------- */
.cost-evidence { display: grid; grid-template-columns: 320px 1fr; gap: 64px; margin-top: 72px; padding-top: 36px; border-top: 1px solid var(--ink); }
.guide .cost-amount, .cost-amount { font-family: var(--head); font-weight: 600; font-size: 96px; line-height: .9; letter-spacing: -0.05em; color: var(--ink); margin: 0; }
.guide .cost-caption, .cost-caption { font-size: 15px; line-height: 1.5; color: var(--ink-3); margin-top: 16px; max-width: 280px; }
.cost-detail h2 { margin-top: 0; }
.cost-detail > p { max-width: 720px; }
.cost-years { margin-top: 20px; border-top: 1px solid var(--line); max-width: 720px; }
.cost-years > div { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.cost-years dt { font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .02em; color: var(--ink); padding-top: 3px; }
.cost-years dd { font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.guide .cost-source, .cost-source { font-size: 14px; line-height: 1.55; color: var(--ink-3); }
.guide .cost-source a { color: var(--ink-2); }

/* ---------- Comparison tables inside guides ---------- */
.guide .tablewrap { margin-top: 28px; }
.guide table.vs { font-size: 15px; }
.guide table.vs th, .guide table.vs td { padding: 14px 20px 14px 0; }
.guide table.vs thead th { padding-right: 20px; }
.guide table.vs tbody th { width: 30%; }
.guide .nb { white-space: nowrap; }
.guide table.vs td { width: auto; }
.guide table.vs td a, .guide table.vs th a { text-decoration-color: var(--line-2); }

/* ---------- FAQ ---------- */
.guide .vs-faq { max-width: 720px; margin-top: 56px; }
.guide .vs-faq h2 { margin-top: 0; }
.guide .cost-body h3 + p { margin-top: 8px; }
.guide .faq-item h3 { font-size: 20px; }

/* ---------- Closing block ---------- */
.guide .close { margin-top: 64px; padding-top: 36px; max-width: 720px; }
.guide .close .cta { margin-top: 28px; }

/* ---------- Folded advanced install (fim-for-windows) ---------- */
.guide .dl-more { margin-top: 20px; border: 1px solid var(--line-2); border-radius: 8px; background: #fff; }
.guide .dl-more > summary { cursor: pointer; padding: 13px 18px; font-size: 15px; font-weight: 500; color: var(--ink); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.guide .dl-more > summary::-webkit-details-marker { display: none; }
.guide .dl-more > summary::after { content: "+"; font-family: var(--mono); font-size: 17px; color: var(--ink-3); }
.guide .dl-more[open] > summary::after { content: "\2212"; }
.guide .dl-more-body { padding: 0 18px 18px; border-top: 1px solid var(--line); }
.guide .dl-more-body pre { margin-top: 14px; }

/* ---------- Contact block at the foot of the FIM pages ---------- */
.guide .contact { max-width: 720px; margin-top: 64px; padding-top: 36px; border-top: 1px solid var(--line); }
.guide .contact h2 { margin-top: 0; }
.guide .contact .ff-form { max-width: 560px; }

/* ---------- Bare lists and notes ---------- */
.guide .faq-list { list-style: disc; }
.guide .faq-list li::marker { color: var(--ink-4); }
.guide .cost-body ol > li::marker { font-family: var(--mono); font-size: 14px; color: var(--ink-3); }

/* ---------- /guides index ---------- */
.guide-group { margin-top: 48px; }
.guide-group h2 { margin-top: 0; font-size: 24px; letter-spacing: -0.025em; }
.guide-index { list-style: none; margin: 20px 0 0; padding: 0; border-top: 1px solid var(--ink); max-width: none; }
.guide-index li { display: grid; grid-template-columns: 420px 1fr; gap: 32px; margin: 0; padding: 22px 0; border-bottom: 1px solid var(--line); }
.guide-index a { font-family: var(--head); font-weight: 600; font-size: 20px; line-height: 1.3; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
.guide-index a:hover { text-decoration: underline; text-decoration-color: var(--ink); text-underline-offset: 4px; }
.guide-index span { font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.page.reading.guide > .guide-group { max-width: none; }

@media (max-width: 1239px) {
  .cost-evidence { grid-template-columns: 240px 1fr; gap: 48px; }
  .cost-amount { font-size: 72px; }
  .guide-index li { grid-template-columns: 1fr 1.4fr; }
}
@media (max-width: 900px) {
  .cost-evidence { grid-template-columns: 1fr; gap: 24px; }
  .cost-years > div { grid-template-columns: 1fr; gap: 2px; }
  .guide-index li { grid-template-columns: 1fr; gap: 6px; }
  .guide table.vs thead { display: none; }
  .guide table.vs tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .guide table.vs th, .guide table.vs td { display: block; width: auto; padding: 4px 0; border: 0; }
  .guide table.vs td[data-label]::before { content: attr(data-label) ": "; font-family: var(--mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
}

/* ===== 32-docs.css ===== */
/* Docs and the developer pages: docs, changelog, compatibility, verify, agents, build check.
   Shared here: OS tabs, folds (details), the contact block at the bottom of a page. */

/* ---------- OS and package manager tabs ---------- */
.page .ostabs { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-top: 20px; padding: 4px; background: var(--soft); border: 1px solid var(--line); border-radius: 8px; }
.page .ostabs button { height: 32px; padding: 0 12px; font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--ink-3); background: none; border: 0; border-radius: 6px; cursor: pointer; transition: color .12s; }
.page .ostabs button:hover { color: var(--ink); }
.page .ostabs button.active { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--line-2); }
.page .ostab-pane[hidden] { display: none; }

/* ---------- Folds ---------- */
.page .docfold { border-bottom: 1px solid var(--line); }
.page .docfold > summary { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 18px 0; list-style: none; font-family: var(--head); font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.page .docfold > summary::-webkit-details-marker { display: none; }
.page .docfold > summary::after { content: "+"; margin-left: auto; font-family: var(--mono); font-weight: 400; font-size: 20px; line-height: 1; color: var(--ink-3); }
.page .docfold[open] > summary::after { content: "\2212"; color: var(--ink); }
.page .docfold > summary h3 { margin: 0; font-size: 20px; }
.page .docfold > summary:hover { color: var(--ink-2); }
.page .docfold > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
.page .docfold-body { padding: 0 0 28px; }
.page .docfold[open] > .docfold-body { border-left: 1px solid var(--line-2); padding-left: 24px; margin-left: 2px; }
.page .docfold-body > :first-child { margin-top: 0; }
.page .subfold { margin-top: 24px; border: 1px solid var(--line-2); border-radius: 8px; }
.page .subfold > summary { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 12px 16px; list-style: none; font-size: 15px; font-weight: 500; color: var(--ink-2); }
.page .subfold > summary::-webkit-details-marker { display: none; }
.page .subfold > summary::after { content: "+"; margin-left: auto; font-family: var(--mono); color: var(--ink-3); font-size: 17px; line-height: 1; }
.page .subfold[open] > summary::after { content: "\2212"; color: var(--ink); }
.page .subfold[open] > summary { color: var(--ink); border-bottom: 1px solid var(--line); }
.page .subfold-body { padding: 0 16px 20px; }
.page .subfold-body > :first-child { margin-top: 16px; }
.page .doclist { margin-top: 16px; }

/* ---------- Docs layout: rail and content ---------- */
.page.docs .doc-hero { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.docwrap { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 64px; margin-top: 40px; align-items: start; }
.docrail { position: sticky; top: 24px; align-self: start; max-height: calc(100vh - 48px); overflow-y: auto; padding: 4px 4px 4px 0; }
.docrail nav { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; height: auto; border-left: 1px solid var(--line); }
.docrail .railgroup { display: block; padding: 22px 0 6px 16px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.docrail nav > .railgroup:first-child { padding-top: 4px; }
.docrail a { padding: 6px 0 6px 16px; margin-left: -1px; border-left: 1px solid transparent; font-size: 14px; line-height: 1.4; color: var(--ink-2); text-decoration: none; }
.docrail a:hover { color: var(--ink); border-left-color: var(--ink); }
.docfilter { margin: 0 0 24px; }
.docfilter input { height: 40px; }
.docfilter-note { margin: 8px 0 0; font-size: 13px; line-height: 1.4; color: var(--ink-3); min-height: 1em; }
.doccontent { min-width: 0; max-width: 760px; }
.page .doccontent .doc { scroll-margin-top: 24px; }
.page h2.docgroup { display: block; margin: 56px 0 0; padding-top: 14px; border-top: 1px solid var(--ink); font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; line-height: 1.4; color: var(--ink-3); }
.page h2.docgroup:first-of-type { margin-top: 0; }
.page .docgroup-note { margin: 8px 0 12px; font-size: 15px; line-height: 1.5; color: var(--ink-3); }

/* ---------- Contact block at the bottom of a page ---------- */
.page .contact { margin-top: 64px; padding-top: 36px; border-top: 1px solid var(--line); max-width: 560px; }
.page .contact h2 { margin-top: 0; }
.page .contact .ff-form { margin-top: 24px; }

/* ---------- Changelog ---------- */
.cl-js #changelog { visibility: hidden; }
.page .releases { margin-top: 8px; max-width: none; }
.page .release { display: grid; grid-template-columns: 180px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 48px; padding: 28px 0; border-top: 1px solid var(--line); scroll-margin-top: 24px; }
.page .release:first-child { border-top: 0; }
.page .release h2 { margin: 0; grid-column: 1; grid-row: 1 / span 2; font-size: 24px; letter-spacing: -0.02em; }
.page .release h2 .meta { display: block; margin-top: 6px; font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--ink-3); }
.page .release > :not(h2) { grid-column: 2; }
.page .dogfood-note { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.page .dogfood-note + .commit-list { margin-top: 12px; }
.page .commit-list { margin: 0; padding: 0; list-style: none; }
.page .commit-list li { margin: 0; padding: 7px 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.page .commit-list code { font-size: 12px; margin-right: 8px; color: var(--ink-3); }

/* ---------- Compatibility ---------- */
.compat-row { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.compat-row:first-child { border-top: 1px solid var(--ink); margin-top: 32px; }
.compat-row .k { font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); padding-top: 4px; }
.compat-row .v { font-size: 19px; line-height: 1.45; color: var(--ink); }
.compat-row .v .more { color: var(--ink-3); }
.page .compat-foot { margin-top: 32px; font-size: 17px; color: var(--ink-2); }

/* ---------- Verify ---------- */
.page .chips { display: flex; gap: 8px; margin: 0; }
.page .chips span { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); background: #fff; border: 1px solid var(--line-2); border-radius: 4px; }
.page table.sums { margin-top: 0; }
.page table.sums th { font-family: var(--mono); font-weight: 500; font-size: 13px; }
.page table.sums tbody th { text-transform: none; letter-spacing: 0; color: var(--ink); }
.page table.sums td code { background: none; padding: 0; font-size: 12.5px; overflow-wrap: anywhere; }
.page .dim { color: var(--ink-3); }
.page h3.minor { margin-top: 28px; font-size: 17px; }
.audit-card { margin-top: 24px; border: 1px solid var(--line-2); border-radius: 12px; background: #fff; padding: 20px 24px 22px; }
.audit-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 14px; }
.audit-tabs .tab { padding: 0 12px; height: 32px; display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--ink-3); background: none; border: 0; border-radius: 6px; cursor: pointer; }
.audit-tabs .tab span { font-family: var(--sans); font-weight: 400; color: var(--ink-3); }
.audit-tabs .tab:hover { color: var(--ink); }
.audit-tabs .tab.active { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--line-2); }
.audit-hash { margin-left: auto; min-width: 0; font-family: var(--mono); font-size: 12px; color: var(--ink-3); overflow-wrap: anywhere; word-break: break-all; text-align: right; }
.page pre.audit-script { margin: 0; max-height: 34rem; overflow: auto; padding: 16px 18px; font-size: 12.5px; line-height: 1.6; white-space: pre; }
.page .audit-note { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--ink-3); }

/* ---------- Agents ---------- */
.page .install-audit { margin-top: 14px; font-size: 14px; }
.page .install-audit .quiet { color: var(--ink-3); }

/* ---------- Known risk and new risk (build check) ---------- */
.knownnew { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 28px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.kn-col { padding: 24px 32px 28px 0; }
.kn-col + .kn-col { padding-left: 32px; border-left: 1px solid var(--line); }
.kn-col.kn-new { border-left: 3px solid var(--accent); }
.kn-col p { margin-top: 14px; }
.kn-tag { height: 24px; }
.kn-new .kn-tag { color: var(--accent); border-color: var(--accent); }
.page .vs-intro p:first-of-type { margin-top: 16px; }
.page .doc-badge { display: inline; vertical-align: middle; }

/* The shared rule `.page > section { margin-top: 0 }` in 10-pages.css beats `.close`, so the closing block needs its room back here. */
.page.dev .close { margin-top: 64px; }

/* On a phone the docs rail goes, as on the old site, and a release reads top to bottom. */
@media (max-width: 900px) {
  .docwrap { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .docrail { display: none; }
  .page .release { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .page .release h2 { grid-row: auto; margin-bottom: 12px; }
  .page .release > :not(h2) { grid-column: 1; }
}

/* ===== 33-download.css ===== */
/* Download page. Bands are sections with a hairline between them. install.js marks the
   card for the reader's own computer with .is-yours. The build table is filled by the page script. */

.page.banded { padding-top: 64px; }
.page.banded .band { padding: 48px 0; border-top: 1px solid var(--line); }
.page.banded .band:first-child { padding-top: 0; border-top: 0; }
.page.banded .band-inner > h2:first-child { margin-top: 0; }
.page.banded .hero { padding: 0; }
.page.banded .hero h1 { margin-top: 0; }
.dl-version { margin-top: 16px; font-size: 17px; color: var(--ink-3); }
.dl-version b { font-family: var(--mono); font-weight: 500; font-size: 15px; color: var(--ink); }
.page .dl-lead { margin-top: 24px; font-size: 17px; }
.page .dl-lead + pre.cmd { margin-top: 12px; }
.page .hero pre.cmd.dl-cmd { display: block; width: fit-content; min-width: 360px; max-width: 100%; margin-top: 12px; }
.page .hero pre.cmd.dl-cmd + .dl-lead { margin-top: 16px; }
.dl-buyers { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); max-width: 520px; font-size: 17px; }

/* ---------- Machine cards ---------- */
.dl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 40px; border-top: 1px solid var(--ink); }
.dlcard { display: flex; flex-direction: column; min-width: 0; padding: 28px 32px 32px 0; border-bottom: 1px solid var(--line); }
.dlcard + .dlcard { padding-left: 32px; border-left: 1px solid var(--line); }
.dlcard.is-yours { background: var(--soft); box-shadow: inset 0 3px 0 var(--edge); padding-left: 32px; padding-right: 32px; }
.dl-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.dl-mark { width: 28px; height: 28px; flex: none; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.dlcard[data-os="win"] .dl-mark, .dlcard[data-os="mac"] .dl-mark { fill: var(--ink); stroke: none; }
.page .dlcard h3 { margin: 0; font-size: 22px; }
.dl-sub { margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--ink-3); }
.dl-btn { align-self: flex-start; margin-top: 4px; }
.page .dl-alt { margin-top: 14px; font-size: 14px; line-height: 1.6; color: var(--ink-3); }
.page .dlcard pre.cmd, .page .pkgcard pre.cmd { margin-top: 14px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12.5px; }
.dl-more { margin-top: auto; padding-top: 14px; }
.dl-more > summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 500; color: var(--ink-2); }
.dl-more > summary::-webkit-details-marker { display: none; }
.dl-more > summary::after { content: "+"; font-family: var(--mono); color: var(--ink-3); }
.dl-more[open] > summary::after { content: "\2212"; color: var(--ink); }
.dl-more > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
.dl-more-body { padding-top: 4px; font-size: 14px; line-height: 1.55; }
.page .dl-more-body p { font-size: 14px; line-height: 1.55; }

/* ---------- Steps ---------- */
.dl-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; margin-top: 32px; border-top: 1px solid var(--ink); padding-top: 28px; }
.dl-step { display: flex; gap: 16px; align-items: stretch; }
.dl-step > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dl-step pre.cmd { margin-top: auto; }
.dl-num { flex: none; padding-top: 4px; font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--ink-3); }
.page .dl-step h3 { margin: 0 0 8px; font-size: 20px; }
.page .dl-step p { margin: 0 0 14px; font-size: 15px; line-height: 1.55; }
.page .ff-privacy { margin-top: 28px; font-size: 14px; }

/* ---------- Other packages ---------- */
.dl-pkg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
.pkgcard { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line-2); border-radius: 12px; padding: 22px 24px 24px; }
.page .pkgcard h3 { margin: 0 0 12px; font-size: 17px; }
.page .pkgcard p { margin: 0; font-size: 15px; }
.pkgcard > :last-child { margin-top: auto; }
.pkgcard pre.cmd:last-child { margin-top: auto; }

/* ---------- Every build ---------- */
.allbuilds { margin-top: 28px; }
.ab-filter { display: inline-flex; align-items: center; gap: 12px; margin: 0; }
.ab-filter span { font-size: 14px; font-weight: 500; }
.page .ab-filter select { width: auto; min-width: 200px; }
.page table.ab-table { margin-top: 24px; }
.page table.ab-table tbody td:first-child { color: var(--ink); font-weight: 500; white-space: nowrap; }
.ab-arch { display: block; font-weight: 400; font-size: 13px; color: var(--ink-3); }
.page td.ab-sha, .page th.ab-sha { width: 40%; }
.page td.ab-sha code { background: none; padding: 0; font-size: 12px; overflow-wrap: anywhere; }
.ab-fallback { margin-top: 16px; }

/* ---------- Do It Yourself sign-up (04 6.7): beside the hero on a wide screen, in the /watch form look ---------- */
.dl-solo .ff-form, .dl-solo .join-box { margin-top: 0; max-width: none; padding: 32px; background: #fff; border: 1px solid var(--line-2); border-radius: 12px; }
.page .dl-solo h2 { margin-top: 0; font-size: 24px; }
.page .dl-solo .ff-hint { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.dl-solo .ff-stack { margin-top: 24px; }
.dl-solo .ff-stack > div { min-width: 0; }
.page .dl-solo label.ff-check { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 15px; font-weight: 400; line-height: 1.45; color: var(--ink-2); cursor: pointer; }
.dl-solo label.ff-check input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: #18181b; }
.dl-solo label.ff-check a, .dl-solo .ff-status a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.dl-solo .ff-status { flex: 1 1 220px; font-size: 15px; line-height: 1.45; }
.page .dl-solo .ff-privacy { margin-top: 20px; }
.dl-solo .join-box pre.cmd { margin-top: 16px; white-space: pre-wrap; overflow-wrap: anywhere; }
.page .dl-solo .join-box p:last-child { margin-top: 16px; font-size: 15px; }
@media (min-width: 901px) {
  .page.banded .hero:has(> .dl-solo) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); column-gap: 64px; align-items: start; }
}
@media (max-width: 900px) {
  .dl-solo { margin-top: 32px; }
}
@media (max-width: 640px) {
  .dl-solo .ff-form, .dl-solo .join-box { padding: 20px; }
}

/* Below 901px every block takes the full width (the old site's rule, lost in the port). */
@media (max-width: 900px) {
  .dl-grid, .dl-steps, .dl-pkg { grid-template-columns: 1fr; }
  .dlcard, .dlcard + .dlcard { padding: 24px 0 28px; border-left: 0; }
  .dlcard.is-yours { padding-left: 20px; padding-right: 20px; }
  .page .hero pre.cmd.dl-cmd { min-width: 0; }
}

/* ===== 34-sandbox.css ===== */
/* The sandbox page, and the terminal window that the agents page and the sandbox share.
   sandbox.js writes the .screen markup, so its class names stay: prompt, dim, tag, bad, warn, good. */

/* ---------- Terminal window ---------- */
.page .window { margin-top: 28px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--soft); overflow: hidden; }
.page .titlebar { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-bottom: 1px solid var(--line-2); }
.page .titlebar i { width: 11px; height: 11px; border-radius: 50%; background: #d4d4d8; flex: none; }
.page .titlebar span { margin-left: 8px; font-family: var(--mono); font-size: 12px; color: var(--ink-3); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.page .shot { display: block; width: 100%; height: auto; background: #fff; }
.page pre.screen { margin: 0; padding: 20px 22px; background: #fff; border: 0; border-radius: 0; font-family: var(--mono); font-size: 13px; line-height: 1.75; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: hidden; }
.page .screen .dim { color: var(--ink-3); }
.page .screen .prompt { display: inline; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; flex: none; color: var(--ink-3); }
.page .screen .bad { color: var(--accent); font-weight: 500; }
.page .screen .warn { display: inline; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--ink); font-weight: 500; }
.page .screen .good { color: var(--ink); font-weight: 500; }
.page .screen .tag { display: inline; height: auto; padding: 0 6px; font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .04em; border: 1px solid var(--line-2); border-radius: 4px; color: var(--ink-2); background: #fff; }
.page .screen b { font-weight: 500; color: var(--ink); }

/* ---------- Sandbox ---------- */
.page.sandbox [hidden] { display: none !important; }
.page .sb-panel { margin-top: 40px; border: 1px solid var(--line-2); border-radius: 12px; background: #fff; padding: 28px 32px; max-width: 920px; }
.page.sandbox .sb-termwrap, .page.sandbox .sb-foot { max-width: 920px; }
.sb-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sb-row + .sb-row { margin-top: 14px; }
.sb-typeahead { position: relative; flex: 1 1 280px; min-width: 0; }
.sb-row button { height: 40px; padding: 0 18px; font-size: 14.5px; }
.page .sb-row select { width: auto; max-width: 200px; font-family: var(--mono); font-size: 14px; }
.page .sb-row input[type="text"] { font-family: var(--mono); font-size: 14.5px; }
.sb-versions label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 400; color: var(--ink-2); }
.sb-hint { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.page .sb-suggest { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; margin: 0; padding: 4px; list-style: none; background: #fff; border: 1px solid var(--line-2); border-radius: 8px; max-height: 260px; overflow-y: auto; }
.page .sb-suggest li, .sb-suggest-item { margin: 0; padding: 8px 10px; border-radius: 6px; font-family: var(--mono); font-size: 14px; line-height: 1.4; color: var(--ink); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-suggest-item:hover, .sb-suggest-item.active { background: var(--soft-2); }
.sb-replay { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.page .sb-replay label { margin: 0; font-size: 14px; color: var(--ink-3); font-weight: 400; }
.page .sb-replay select { flex: 1 1 280px; width: auto; max-width: none; min-width: 0; font-size: 14px; }
.sb-termwrap { margin-top: 8px; }
.page .sb-termwrap pre.screen { height: 440px; overflow-y: auto; overscroll-behavior: contain; font-size: 13px; }
.sb-share { margin-top: 14px; display: flex; align-items: center; gap: 14px; }
.sb-copied { font-family: var(--mono); font-size: 13px; color: var(--ink-3); }
.page .sb-foot { margin-top: 32px; font-size: 14px; line-height: 1.6; color: var(--ink-3); }

/* ===== 35-legal.css ===== */
/* Legal and trust pages: Terms, Privacy, Refund, Security, What Leaves the Computer.
   Page type "Legal" of the site spec: a reading column, the effective date and version at
   the top, a contents list, numbered H2s with a stable id, hairline tables, print styles. */

.legal { padding-top: 56px; }
.legal header.hero { padding-bottom: 0; border-bottom: 0; margin-bottom: 0; }
.legal .effective { font-family: var(--mono); font-size: 13px; letter-spacing: .02em; color: var(--ink-3); margin-top: 16px; }
.legal .lede { margin-top: 20px; }

/* Contents. The mockup styles every <nav> as the top bar, so this one resets that. */
.legal nav.toc { display: block; height: auto; }
.legal .toc { margin-top: 40px; border-top: 1px solid var(--ink); }
.legal .toc > .label { padding: 14px 0 8px; }
.legal .toc ol { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 40px; }
.legal .toc li { margin: 0; padding: 0; break-inside: avoid; border-bottom: 1px solid var(--line); }
.legal .toc a { display: flex; gap: 14px; padding: 9px 0; font-size: 15px; line-height: 1.4; color: var(--ink-2); text-decoration: none; }
.legal .toc a:hover { color: var(--ink); }
.legal .toc a span { flex: none; width: 22px; font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); padding-top: 2px; }

/* Sections */
.legal section.doc { margin-top: 40px; scroll-margin-top: 24px; }
.legal section.doc > h2 { margin-top: 0; padding-top: 28px; border-top: 1px solid var(--line); font-size: 30px; }
.legal section.doc > h2 + p { margin-top: 20px; }
.legal section.doc h3 { font-size: 20px; margin-top: 32px; }
.legal section.doc h3 + p { margin-top: 10px; }
.legal section.doc p > strong:first-child { color: var(--ink); }
.legal section.doc ul, .legal section.doc ol { margin-top: 14px; }
.legal section.doc li { margin-top: 6px; }
.legal :target > h2, .legal h2:target { scroll-margin-top: 24px; }

/* A section that holds a wide table lets the table use the whole 1200px wrap. The text stays narrow. */
.page.reading > section.doc.wide { max-width: none; }
.legal section.doc.wide > :is(h2, p, ul, ol, h3, .note, .callout, .warn) { max-width: 720px; }
.legal section.doc.wide > h2 { max-width: none; }
.legal .tablewrap { margin-top: 24px; }
.legal table { font-size: 14px; }
.legal table.wide-table th, .legal table.wide-table td { padding-right: 20px; }
.legal td p, .legal td ul { font-size: 14px; line-height: 1.5; margin: 0; }
.legal td code, .legal th code { word-break: break-word; }
.legal table.wide-table td:first-child, .legal table.wide-table th:first-child { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.legal table.wide-table td:nth-child(2) code { white-space: nowrap; font-size: 12px; }
.legal table.wide-table td:nth-child(2) { min-width: 240px; }
.legal table.wide-table td:nth-child(4), .legal table.wide-table td:nth-child(7) { min-width: 250px; }
.legal table.wide-table td:nth-child(5) { width: 90px; }
.legal table.codes td:first-child, .legal table.codes th:first-child { white-space: nowrap; color: var(--ink); }

/* Sample blocks */
.legal .sample-label { font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin-top: 24px; }
.legal .sample-label + pre { margin-top: 8px; }
.legal figure.report-sample { margin: 24px 0 0; }
.legal figure.report-sample figcaption { font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.legal figure.report-sample pre { margin-top: 8px; max-height: 420px; overflow: auto; }

/* The sentence that ends a page: how to reach us. */
.legal .contact { margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--line); }
.legal .contact h2 { margin-top: 0; }
.legal .contact .address { font-size: 15px; color: var(--ink-3); margin-top: 20px; }
.legal .cta { margin-top: 20px; }

/* Print: no bar, no footer, no form. Links print in full. */
@media print {
  @page { margin: 18mm; }
  body { min-width: 0; color: #000; }
  .navbar, footer, .cookie-banner, .menu-btn, .copy-btn, .legal .contact form, .legal .toc, .legal .cta { display: none !important; }
  .wrap { width: auto; margin: 0; }
  .legal { padding: 0; }
  .legal section.doc { margin-top: 28px; break-inside: auto; }
  .legal section.doc > h2 { break-after: avoid; border-top: 1px solid #999; }
  .legal table, .legal pre { break-inside: avoid; }
  .legal pre { white-space: pre-wrap; background: #fff; border: 1px solid #999; }
  .tablewrap { overflow: visible; }
  .legal a { text-decoration: underline; color: #000; }
  .legal a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 12px; color: #444; }
  .legal a[href^="/"]::after { content: " (https://vigihq.com" attr(href) ")"; font-size: 12px; color: #444; }
  .legal a[href^="#"]::after { content: none; }
}

@media (max-width: 640px) {
  .legal .toc ol { columns: 1; }
  .legal { padding-top: 40px; }
}

/* ===== 36-pages-small.css ===== */
/* Small pages: about, use cases, welcome, feedback, report, submit, 404, contact and watch.
   Every rule starts with .page-small so the mockup components used here (.facts, .steps)
   keep their own spacing and nothing leaks into other pages. */

/* ---------- Mockup lists inside a page ---------- */
.page-small .facts { margin: 40px 0 0; }
.page-small .facts li { margin-top: 0; padding-left: 0; font-size: 19px; line-height: 1.45; color: var(--ink); }
.page-small .facts li > span:first-child { color: var(--ink-3); }
.page-small .facts a { text-decoration-color: var(--line-2); }

/* ---------- About ---------- */
.page-about header.hero { display: grid; grid-template-columns: 128px 1fr; column-gap: 32px; align-items: start; }
.page-about header.hero > *:not(.portrait) { grid-column: 2; }
.page-about .portrait { grid-row: 1 / span 3; grid-column: 1; width: 128px; height: 128px; object-fit: cover; border-radius: 12px; border: 1px solid var(--line-2); background: var(--soft); display: block; }
.page-about header.hero h1 { margin-top: 0; }
.page-about .cost-kicker { margin-bottom: 14px; }

/* ---------- Use cases ---------- */
.page-usecases .usecase-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 56px; border-top: 1px solid var(--ink); }
.page-usecases .usecase { display: flex; flex-direction: column; padding: 32px 32px 36px 0; border-bottom: 1px solid var(--line); }
.page-usecases .usecase + .usecase { padding-left: 32px; border-left: 1px solid var(--line); }
.page-usecases .uc-mark { display: block; width: 34px; height: 34px; margin-bottom: 22px; }
.page-usecases .uc-mark svg { width: 100%; height: 100%; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: square; stroke-linejoin: miter; }
.page-usecases .uc-mark .uc-hot { stroke: var(--accent); }
.page-usecases .usecase h3 { margin: 0; font-size: 24px; line-height: 1.2; letter-spacing: -0.025em; }
.page-usecases .usecase .uc-answer { font-family: var(--head); font-weight: 500; font-size: 20px; line-height: 1.3; letter-spacing: -0.02em; color: var(--ink); margin-top: 12px; }
.page-usecases .usecase > p:not(.uc-answer) { font-size: 17px; line-height: 1.6; color: var(--ink-2); margin-top: 14px; flex: 1; }
.page-usecases .usecase .uc-link { margin-top: 24px; align-self: flex-start; }

/* ---------- Steps (welcome) ---------- */
.page-small .steps { display: block; margin-top: 32px; border-top: 1px solid var(--ink); counter-reset: stepn; }
.page-small .steps .step { display: grid; grid-template-columns: 64px minmax(0, 1fr); padding: 28px 0 30px; border-bottom: 1px solid var(--line); border-left: 0; }
.page-small .steps .step + .step { padding-left: 0; border-left: 0; }
.page-small .steps .step .n { padding-top: 6px; }
.page-small .steps .step .n::before { counter-increment: stepn; content: "0" counter(stepn); }
.page-small .steps .step h3 { margin-top: 0; }
.page-small .steps .step p { font-family: var(--sans); font-weight: 400; font-size: 17px; line-height: 1.6; letter-spacing: 0; color: var(--ink-2); margin-top: 10px; }
.page-small .steps .step p span { color: inherit; }
/* A numbered list written as <ol class="steps"> (report page). */
.page-small ol.steps { display: block; grid-template-columns: none; border-top: 0; margin: 16px 0 0 22px; }
.page-small ol.steps > li { margin-top: 8px; padding: 0 0 0 4px; list-style: decimal; }
.page-small ol.steps > li::marker { font-family: var(--mono); color: var(--ink-3); }

/* ---------- Report page (cards written by report.js) ---------- */
.page-report .rp-sum { color: var(--ink-3); font-family: var(--mono); font-size: 13px; margin-top: 12px; }
.page-report .rp-card { border: 1px solid var(--line-2); border-radius: 12px; padding: 20px 24px 22px; margin-top: 16px; }
.page-report .rp-card h3 { margin: 0 0 12px; font-size: 20px; overflow-wrap: anywhere; }
.page-report .rp-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 20px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 15px; }
.page-report .rp-k { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); padding-top: 3px; }
.page-report .rp-v { font-family: var(--mono); font-size: 13.5px; color: var(--ink); overflow-wrap: anywhere; }
.page-report pre.cmd { white-space: pre-wrap; overflow-wrap: anywhere; }
.page-report [hidden] { display: none; }

/* ---------- 404 ---------- */
.page-404 .nf-links { list-style: none; margin: 40px 0 0; border-top: 1px solid var(--ink); max-width: 720px; }
.page-404 .nf-links li { margin: 0; padding: 0; }
.page-404 .nf-links a { display: grid; grid-template-columns: 220px 1fr auto; gap: 24px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--line); text-decoration: none; transition: background-color .12s; }
.page-404 .nf-links a:hover { background: var(--soft); }
.page-404 .nf-links b { font-family: var(--head); font-weight: 600; font-size: 24px; letter-spacing: -0.025em; color: var(--ink); }
.page-404 .nf-links span { font-size: 17px; color: var(--ink-2); }
.page-404 .nf-links i { font-style: normal; color: var(--ink-3); }
.page-404 .nf-note { margin-top: 32px; }

/* ---------- Forms ---------- */
.page-small .ff-form { max-width: 560px; margin-top: 32px; }
.page-small .ff-stack > div { min-width: 0; }
.page-small .ff-status { font-size: 15px; color: var(--ink-2); }
.page-small .ff-status.ok { color: var(--ink); font-weight: 500; }
.page-small .ff-status.err { color: var(--accent); }
.page-small .ff-sent .fld, .page-small .ff-sent .ff-fieldset, .page-small .ff-sent .ff-check { opacity: .5; }
.page-small .ff-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.page-small .ff-fieldset legend { font-size: 14px; font-weight: 500; color: var(--ink); padding: 0; margin-bottom: 10px; }
.page-small .ff-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.page-small label.ff-check { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 15px; font-weight: 400; line-height: 1.45; color: var(--ink-2); cursor: pointer; }
.page-small label.ff-check input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: #18181b; }
.page-small .ff-hint { font-size: 14px; line-height: 1.5; color: var(--ink-3); margin-top: 6px; }
.page-small .ff-hint a, .page-small label.ff-check a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.page-small .ff-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* ---------- Contact ---------- */
.page-contact .contact-grid { display: grid; grid-template-columns: 1fr 360px; gap: 80px; align-items: start; margin-top: 8px; }
.page-contact .contact-grid .ff-form { margin-top: 32px; }
.page-contact .contact-side { margin-top: 32px; border-top: 1px solid var(--ink); }
.page-contact .contact-side div { padding: 20px 0 22px; border-bottom: 1px solid var(--line); }
.page-contact .contact-side .label { display: block; }
.page-contact .contact-side p { font-size: 17px; line-height: 1.5; color: var(--ink); margin-top: 8px; }

/* ---------- Free watch ---------- */
.page-watch .watch-grid { display: grid; grid-template-columns: 1fr 560px; gap: 72px; align-items: start; }
.page-watch .watch-grid .facts { margin-top: 36px; }
.page-watch .watch-grid .ff-form { margin-top: 0; padding: 32px; border: 1px solid var(--line-2); border-radius: 12px; max-width: none; }
.page-watch .watch-grid .ff-form h2 { margin-top: 0; font-size: 24px; }
.page-watch .watch-grid .ff-stack { margin-top: 24px; }

@media (max-width: 1239px) {
  .page-contact .contact-grid { grid-template-columns: 1fr 1fr; gap: 48px; }
  .page-watch .watch-grid { grid-template-columns: 1fr 1fr; gap: 48px; }
}
@media (max-width: 900px) {
  .page-usecases .usecase-grid { grid-template-columns: 1fr; }
  .page-usecases .usecase, .page-usecases .usecase + .usecase { padding: 28px 0 30px; border-left: 0; }
  .page-contact .contact-grid, .page-watch .watch-grid { grid-template-columns: 1fr; gap: 32px; }
  .page-404 .nf-links a { grid-template-columns: 1fr auto; }
  .page-404 .nf-links span { grid-column: 1; }
  .page-small .ff-checks, .page-small .ff-row { grid-template-columns: 1fr; }
  .page-small .facts li { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 640px) {
  .page-about header.hero { grid-template-columns: 1fr; }
  .page-about header.hero > *:not(.portrait), .page-about .portrait { grid-column: 1; grid-row: auto; }
  .page-about .portrait { margin-bottom: 20px; }
  .page-small .steps .step { grid-template-columns: 1fr; }
  .page-report .rp-row { grid-template-columns: 1fr; gap: 0; }
  .page-watch .watch-grid .ff-form { padding: 20px; }
}

/* A ruled list follows the header on these pages, so the header drops its own hairline. */
.page-usecases header.hero, .page-404 header.hero { border-bottom: 0; padding-bottom: 0; }

/* Closing block: room above it, which .page > section would otherwise remove. */
.page-small .close { margin-top: 64px; }
.page-small .fb-hint, .page-small .ff-privacy { font-size: 13px; line-height: 1.5; color: var(--ink-3); margin-top: 8px; }
.page-small .ff-privacy a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.page-small input[type=file]::file-selector-button { height: 32px; padding: 0 14px; margin-right: 12px; font: 500 14px var(--sans); color: #18181b; background: #fff; border: 1px solid #18181b; border-radius: 6px; cursor: pointer; }
.page-small input[type=file]::file-selector-button:hover { background: var(--soft-2); }

/* ===== 37-attacks.css ===== */
/* One attack page (attacks/<slug>). Built by infra/attacks/gen.mjs. */
.atkp .hero { padding-bottom: 32px; }
.atkp .atk-grid { display: grid; grid-template-columns: minmax(0, 720px) 320px; justify-content: space-between; gap: 0 64px; align-items: start; }
.atkp .atk-article > section:first-of-type h2, .atkp .atk-article > .lede-block + section h2 { margin-top: 48px; }
.atkp .lede-block { margin-top: 36px; }
.atkp .lede-block p { font-size: 20px; line-height: 1.5; color: var(--ink); margin-top: 0; }
.atkp .lede-block p + p { margin-top: 16px; }
.atkp .impact-note { margin-top: 24px; padding: 14px 18px; background: var(--soft); border: 1px solid var(--line); border-left: 3px solid var(--ink); border-radius: 8px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.atkp .impact-note b { color: var(--ink); }
.atkp .atk-article table { display: block; overflow-x: auto; max-width: 100%; }
.atkp .atk-article h2 { scroll-margin-top: 24px; }

/* Right column: facts, contents, share. */
.atkp .atk-side { position: sticky; top: 24px; display: grid; gap: 32px; margin-top: 36px; }
.atkp .atk-facts { border-top: 1px solid var(--ink); }
.atkp .atk-facts > div { padding: 14px 0 16px; border-bottom: 1px solid var(--line); }
.atkp .atk-facts dt { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.atkp .atk-facts dd { font-size: 15px; line-height: 1.5; color: var(--ink); margin-top: 4px; min-width: 0; overflow-wrap: anywhere; }
.atkp .atk-facts code { font-size: 13px; }
/* A long last id in the facts (gen.mjs nb()) breaks at the line end, wherever its hyphens fall. */
.atkp .atk-facts .fill { word-break: break-all; }
.atkp .atk-toc { display: grid; gap: 0; height: auto; justify-content: stretch; align-items: stretch; }
.atkp .atk-toc .label, .atkp .atk-share .label { margin-bottom: 8px; }
.atkp .atk-toc a { font-size: 14px; line-height: 1.4; color: var(--ink-2); padding: 7px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.atkp .atk-toc a:hover { color: var(--ink); }
.atkp .atk-share > div { display: flex; gap: 8px; }
.atkp .atk-share a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line-2); border-radius: 6px; font-size: 14px; font-weight: 500; color: var(--ink); text-decoration: none; transition: border-color .12s; }
.atkp .atk-share a:hover { border-color: var(--ink); }

/* What Vigilance showed: a light block, rust only for the new power. */
.atkp .scanblock { margin: 20px 0 0; background: var(--soft); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.atkp .scanblock-cmd { padding: 10px 18px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 13px; line-height: 1.5; color: var(--ink-3); overflow-x: auto; white-space: nowrap; }
.atkp .scanblock pre { margin: 0; padding: 16px 18px; border: 0; border-radius: 0; background: none; font-size: 13px; line-height: 1.75; color: var(--ink-2); white-space: pre; overflow-x: auto; }
.atkp .t-file { color: var(--ink); font-weight: 500; }
.atkp .t-bad { color: var(--accent); font-weight: 500; }
.atkp .t-tag { color: var(--accent); font-weight: 500; }
.atkp .t-dim { color: var(--ink-3); }
.atkp .scan-proof { margin-top: 20px; padding: 14px 18px; background: var(--soft); border: 1px solid var(--line); border-radius: 8px; }
.atkp .scan-proof p { margin-top: 4px; font-size: 15px; }
.atkp .scan-receipt { margin-top: 16px; font-size: 14px; color: var(--ink-3); }
.atkp .scan-receipt summary { cursor: pointer; color: var(--ink-2); }
.atkp .scan-receipt p { font-size: 14px; margin-top: 8px; overflow-wrap: anywhere; }

.atkp .sources { font-size: 14px; }
.atkp .sources li { font-size: 14px; line-height: 1.5; margin-top: 6px; }
.atkp .sources a { overflow-wrap: anywhere; }

/* More attacks and the closing call to action. */
.atkp .more { margin-top: 96px; padding-top: 40px; border-top: 1px solid var(--line); max-width: 720px; }
.atkp .more h2 { margin-top: 0; }
.atkp .more ul { list-style: none; margin: 20px 0 0; border-top: 1px solid var(--ink); }
.atkp .more li { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--line); }
.atkp .when { font-family: var(--mono); font-size: 13px; color: var(--ink-3); margin-left: 8px; }
.atkp .more > p:last-child { font-size: 15px; }

@media (max-width: 1023px) {
  .atkp .atk-grid { grid-template-columns: minmax(0, 1fr); }
  .atkp .atk-side { position: static; order: -1; margin-top: 32px; }
}

/* Two words that never split, and a hash sized to fit beside its label. */
.nb, .nw { white-space: nowrap; }
.page code.hash { font-size: 12px; letter-spacing: -0.01em; }
.atkp .atk-article code { overflow-wrap: normal; }
.atkp .atk-article code.long { overflow-wrap: anywhere; line-break: anywhere; }

/* On a phone a long code token (a hash, a URL, a path: code.hash, code.cut, code.long) fills each line
   and breaks at the line end, so it does not run past the screen edge or leave a short tail alone.
   Short tokens keep their nowrap. */
@media (max-width: 600px) {
  .atkp .atk-article code.hash, .atkp .atk-article code.cut, .atkp .atk-article code.long { white-space: normal; word-break: break-all; }
}

/* ===== 38-attacks-hub.css ===== */
/* The attack library index (/attacks). Built by infra/attacks/gen.mjs. */
.atk header.hero { padding-bottom: 8px; border-bottom: 0; margin-bottom: 0; }
.atk .lede { max-width: 720px; }
.atk .atk-counts { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line); }
.atk .atk-counts-head { font-family: var(--head); font-weight: 500; font-size: 24px; line-height: 1.25; letter-spacing: -0.02em; color: var(--ink); margin-top: 10px; max-width: 760px; }
.atk .atk-counts .r-stats { display: grid; grid-template-columns: repeat(5, 1fr); list-style: none; margin: 28px 0 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.atk .atk-counts .r-stats li { margin: 0; padding: 20px 20px 22px 0; }
.atk .atk-counts .r-stats li + li { padding-left: 24px; border-left: 1px solid var(--line); }
.atk .atk-counts-note { font-size: 14px; line-height: 1.55; color: var(--ink-3); max-width: 720px; margin-top: 16px; }
.atk .hub-sec p { max-width: 720px; }
.atk .quick { list-style: none; margin: 16px 0 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; border-top: 1px solid var(--ink); }
.atk .quick li { margin: 0; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.5; }
.atk .quick .when { font-family: var(--mono); font-size: 13px; color: var(--ink-3); margin-left: 8px; }

/* Filter bar and table. */
.atk .atk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }
.atk .atk-bar input[type=search] { flex: 1 1 280px; width: auto; min-width: 0; }
.atk .atk-bar select { width: auto; min-width: 160px; }
.atk .atk-count { font-family: var(--mono); font-size: 13px; color: var(--ink-3); margin-left: auto; }
.atk .atk-table { margin-top: 0; }
.atk .atk-table th, .atk .atk-table td { padding: 12px 20px 12px 0; font-size: 15px; line-height: 1.5; }
.atk .atk-table tbody th { width: 300px; font-weight: 500; color: var(--ink); }
.atk .atk-table tbody th a { text-decoration: none; }
.atk .atk-table tbody th a:hover { text-decoration: underline; text-decoration-color: var(--ink); }
.atk .atk-table thead th:nth-child(1), .atk .atk-table .atk-date { width: 120px; white-space: nowrap; }
.atk .atk-table .atk-date, .atk .atk-table .atk-eco { font-family: var(--mono); font-size: 13px; color: var(--ink-3); }
.atk .atk-table .atk-eco { width: 150px; white-space: nowrap; }
.atk .atk-table .chip { height: 20px; font-size: 11px; margin-left: 6px; vertical-align: 1px; }
/* An inline-flex chip lets the line break before it even after a no-break space, which leaves the chip
   alone on the last line of a name. Inline, it stays with the last word. */
.atk .atk-table th .chip { display: inline; height: auto; padding: 1px 6px; line-height: 1.6; }
.atk .atk-empty { margin-top: 20px; font-size: 15px; color: var(--ink-3); }
.atk .atk-foot { margin-top: 48px; font-size: 14px; line-height: 1.55; color: var(--ink-3); max-width: 720px; }

@media (max-width: 1023px) {
  .atk .atk-counts .r-stats { grid-template-columns: repeat(3, 1fr); }
  .atk .quick { grid-template-columns: 1fr; }
}

/* Compact layout (see CLAUDE.md): on a wide screen the intro and the collection counts share the first
   row, as on the old site, so the counts sit above the fold. The counts turn into rows to fit the half. */
@media (min-width: 901px) {
  .atk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; align-items: start; }
  .atk > * { grid-column: 1 / -1; min-width: 0; }
  .atk > header.hero { grid-column: 1; padding-bottom: 0; }
  .atk > .atk-counts { grid-column: 2; margin-top: 0; padding-top: 0; border-top: 0; }
  .atk .atk-counts-head { font-size: 20px; }
  .atk .atk-counts .r-stats { grid-template-columns: 1fr; margin-top: 20px; border-bottom: 0; }
  .atk .atk-counts .r-stats div, .atk .atk-counts .r-stats div + div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .atk .atk-counts .r-stats b { font-size: 20px; margin-top: 0; }
}

/* ===== 39-blog.css ===== */
/* Blog, blog posts and advisories (the bp-* layout). api/blog.js builds the blog pages and
   reports/*.html are the advisories. Both use these rules. Built on the mockup tokens. */

/* ---------- Index ---------- */
.bp-index { margin-top: 40px; }
.bp-search { margin: 0 0 32px; }
.page .bp-search input { max-width: 480px; height: 44px; }
.post-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.postcard { display: flex; flex-direction: column; border: 1px solid var(--line-2); border-radius: 12px; padding: 20px 20px 24px; background: #fff; color: var(--ink); text-decoration: none; transition: border-color .12s; }
.postcard:hover { border-color: var(--ink); }
.postcard[hidden] { display: none; }
.postcard.postcard-adv { border-color: var(--accent-line); }
.postcard.postcard-adv:hover { border-color: var(--accent); }
.postcard h3 { font-family: var(--head); font-weight: 600; font-size: 20px; line-height: 1.25; letter-spacing: -0.02em; margin: 14px 0 0; text-wrap: balance; }
.postcard .bp-chip { align-self: flex-start; margin-top: 18px; }
.postcard .bp-thumb + .bp-chip { margin-top: 18px; }
.post-meta { font-family: var(--mono); font-size: 12px; line-height: 1.5; letter-spacing: .02em; color: var(--ink-3); margin-top: 10px; }
.page .post-meta { font-size: 12px; margin-top: 10px; }
.page .post-excerpt { font-size: 15px; line-height: 1.55; color: var(--ink-2); margin-top: 12px; }
.post-empty { font-size: 17px; color: var(--ink-3); padding: 40px 0; }
.bp-thumb { margin: 0; }
.bp-thumb .bp-visual { border-radius: 8px; }

/* ---------- Post frame ---------- */
.bp { width: 100%; }
/* The mockup styles every nav as the top bar (flex row, 72px high). These two are in-page lists. */
.page nav.bp-crumbs, .page nav.bp-toc { display: block; height: auto; }
.page nav.bp-crumbs { display: flex; justify-content: flex-start; align-items: baseline; }
.bp-crumbs { display: flex; flex-wrap: wrap; gap: 4px 10px; font-family: var(--mono); font-size: 13px; letter-spacing: .02em; color: var(--ink-3); margin: 0 0 28px; }
.bp-crumbs a { color: var(--ink-3); text-decoration: none; }
.bp-crumbs a:hover { color: var(--ink); }
.bp-hero { display: grid; grid-template-columns: 560px 1fr; gap: 64px; align-items: center; padding-bottom: 56px; border-bottom: 1px solid var(--line); }
.bp-visual { display: block; width: 100%; height: auto; border-radius: 12px; }
.bp-visual .vh { font-family: var(--head); }
.bp-visual .vm { font-family: var(--mono); }
.bp-hero-text h1 { margin: 18px 0 0; }
.bp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-family: var(--mono); font-size: 13px; letter-spacing: .02em; color: var(--ink-3); margin: 0; }
.page .bp-meta { font-size: 13px; line-height: 1.5; color: var(--ink-3); margin-top: 0; }
.bp-meta .cau-id { color: var(--accent); font-weight: 500; letter-spacing: .04em; }
.bp-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: 4px; background: #fff; font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.bp-chip-adv { color: var(--accent); border-color: var(--accent); }
.page .bp-dek { font-size: 20px; line-height: 1.5; color: var(--ink-2); margin-top: 20px; max-width: 520px; }
.page .bp-by { font-size: 15px; font-weight: 500; color: var(--ink); margin-top: 20px; }
.bp-grid { display: grid; grid-template-columns: 680px 280px; justify-content: space-between; gap: 64px; margin-top: 56px; }
.bp-article { min-width: 0; }
.bp-side { position: sticky; top: 24px; align-self: start; display: grid; gap: 16px; }
.bp-card { border: 1px solid var(--line); border-radius: 8px; padding: 20px; background: #fff; }
.bp-label { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 12px; }
.page .bp-label { font-size: 12px; line-height: 1.4; color: var(--ink-3); margin: 0 0 12px; }
.bp-toc a { display: block; padding: 7px 0 7px 14px; border-left: 1px solid var(--line-2); font-size: 14px; line-height: 1.4; color: var(--ink-3); text-decoration: none; }
.bp-toc a:hover { color: var(--ink); border-left-color: var(--ink); }
.bp-share div { display: flex; gap: 10px; }
.bp-share a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line-2); border-radius: 6px; font-size: 14px; font-weight: 500; color: var(--ink); text-decoration: none; transition: border-color .12s; }
.bp-share a:hover { border-color: var(--ink); }

/* ---------- Article ---------- */
.bp-summary { margin: 0 0 40px; padding: 20px 24px; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); }
.page .bp-summary p:last-child { font-size: 17px; line-height: 1.6; color: var(--ink); margin: 0; }
.bp-prose h2, .bp-article section h2 { font-size: 30px; line-height: 1.2; margin: 56px 0 0; padding-top: 0; scroll-margin-top: 24px; }
.bp-prose h2:first-child { margin-top: 0; }
.bp-prose h3, .bp-article section h3 { font-size: 24px; line-height: 1.25; margin-top: 36px; }
.bp-prose img { max-width: 100%; height: auto; border-radius: 8px; margin-top: 20px; }
.bp-callout { margin-top: 24px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); }
.page .bp-callout p { font-size: 15px; line-height: 1.55; margin: 0; color: var(--ink-2); }
.bp-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.bp-compare > div { padding: 18px 20px 20px; border: 1px solid var(--line-2); border-left: 3px solid var(--ink); border-radius: 8px; background: #fff; }
.bp-compare > div.no { border-left-color: var(--accent); }
.page .bp-compare h4 { margin: 0; font-size: 17px; }
.page .bp-compare ul { margin: 10px 0 0 18px; }
.page .bp-compare li { font-size: 15px; line-height: 1.5; margin-top: 4px; }
.bp-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 24px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.bp-stats > div { padding: 18px 20px 20px; }
.bp-stats > div + div { border-left: 1px solid var(--line); }
.bp-stats b { display: block; font-family: var(--mono); font-weight: 500; font-size: 30px; letter-spacing: -0.02em; color: var(--ink); }
.bp-stats span { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin-top: 6px; }
.page .bp-steps { list-style: none; margin: 24px 0 0; padding: 0; counter-reset: bp; }
.page .bp-steps > li { counter-increment: bp; position: relative; margin: 0; padding: 0 0 18px 48px; }
.page .bp-steps > li::before { content: counter(bp); position: absolute; left: 0; top: 2px; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 4px; font-family: var(--mono); font-size: 14px; font-weight: 500; color: var(--ink); }
.page .bp-steps ul { margin-top: 8px; }

/* ---------- Call to action and related posts ---------- */
.bp-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 56px; padding: 28px 32px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--soft); }
.page .bp-cta h3 { margin: 0; font-size: 20px; }
.page .bp-cta p { font-size: 15px; line-height: 1.5; color: var(--ink-2); margin-top: 6px; }
.bp-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; flex: none; }
.bp-cta-stack { flex-direction: column; align-items: flex-start; }
.page .bp-cta-stack p + p { margin-top: 12px; }
.page .bp-cta-stack .cmd { font-family: var(--mono); font-size: 13px; color: var(--ink-3); }
.bp-related { margin-top: 96px; padding-top: 56px; border-top: 1px solid var(--line); }
.bp-related h2 { margin-top: 0; }
.bp-related .post-list { margin-top: 32px; }

/* ---------- Advisory ---------- */
.cau .adv-facts { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 8px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.cau .adv-facts > div { padding: 16px 20px 18px 0; border-bottom: 1px solid var(--line); }
.cau .adv-facts > div:nth-last-child(-n+3) { border-bottom: 0; }
.cau .adv-facts > div:not(:nth-child(3n+1)) { padding-left: 20px; border-left: 1px solid var(--line); }
.cau .adv-facts dt { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.page .cau .adv-facts dd { font-family: var(--mono); font-size: 14px; line-height: 1.4; color: var(--ink); margin-top: 6px; }
.page .cau .adv-facts dd.live { color: var(--accent); }
.cau section { margin-top: 0; }
.cau section + section { margin-top: 0; }
.cau .tl { list-style: none; margin: 20px 0 0; padding: 0; border-top: 1px solid var(--ink); }
.page .cau .tl li { display: grid; grid-template-columns: 232px 1fr; gap: 20px; align-items: baseline; margin: 0; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cau .tl time { font-family: var(--mono); font-size: 13px; color: var(--ink-3); white-space: nowrap; }
.cau .tl .what { font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.page .cau .tl li.us { background: var(--soft); margin: 0 -16px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.cau .tl li.us time { color: var(--ink); font-weight: 500; }
.cau .tl li.us .what { color: var(--ink); font-weight: 500; }
.cau pre { margin-top: 20px; }
.cau pre.diff .cmt { color: var(--ink-3); }
.cau pre.diff .cut { color: var(--ink); text-decoration: line-through; text-decoration-color: var(--ink-3); }
.cau pre.diff .add { color: var(--accent); }
.page .cau table { margin-top: 20px; }
.page .cau th[scope=row] { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); width: 130px; white-space: nowrap; padding-top: 16px; }
.page .cau td { font-size: 15px; line-height: 1.55; }
.page .cau td code { word-break: break-all; }
.page .cau td code.hash { font-size: 12px; word-break: normal; overflow-wrap: normal; white-space: nowrap; }
.page .cau ul.plain { margin-top: 8px; }
.page .cau .foot-note { font-size: 13px; line-height: 1.55; color: var(--ink-3); margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); }
.page .cau .note b { color: var(--ink); }

/* ---------- Small screens ---------- */
@media (max-width: 1239px) {
  .bp-hero { grid-template-columns: 1fr 1fr; gap: 40px; }
  .bp-grid { grid-template-columns: minmax(0, 1fr) 240px; gap: 40px; }
  .post-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .bp-hero { grid-template-columns: 1fr; }
  .bp-grid { grid-template-columns: 1fr; }
  .bp-side { position: static; order: -1; }
  .bp-cta { flex-direction: column; align-items: flex-start; }
  .post-list { grid-template-columns: 1fr; }
  .cau .adv-facts { grid-template-columns: repeat(2, 1fr); }
  .cau .adv-facts > div, .cau .adv-facts > div:not(:nth-child(3n+1)) { padding: 14px 16px 16px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .cau .adv-facts > div:nth-child(2n) { padding-left: 16px; border-left: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .bp-compare, .bp-stats { grid-template-columns: 1fr; }
  .bp-stats > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .page .cau .tl li { grid-template-columns: 1fr; gap: 4px; }
  .page .cau th[scope=row] { width: auto; white-space: normal; }
  /* A hash that cannot fit the phone's column fills each line and breaks at the line end. */
  .page .cau td code.hash { white-space: normal; word-break: break-all; }
  .cau pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; }
}

/* ---------- Print: an advisory prints as a plain document ---------- */
@media print {
  .navbar, footer, .bp-side, .bp-cta, .bp-related, .bp-share, .copy-btn, .cookie-banner, .menu-btn, .bp-search { display: none !important; }
  body { min-width: 0; }
  .wrap, .page { width: auto; margin: 0; padding: 0; }
  .bp-hero { display: block; padding-bottom: 24px; }
  .bp-hero-art { display: none; }
  .bp-grid { display: block; margin-top: 24px; }
  .bp-article { max-width: none; }
  .page a[href^="http"]::after, .page a[href^="mailto"]::after { content: " (" attr(href) ")"; font-size: 12px; color: var(--ink-3); word-break: break-all; }
  .page a[href^="/"]::after { content: " (https://vigihq.com" attr(href) ")"; font-size: 12px; color: var(--ink-3); word-break: break-all; }
  .page a.btn::after, .bp-crumbs a::after { content: none; }
  .cau pre { white-space: pre-wrap; overflow-wrap: anywhere; break-inside: avoid; }
  .cau .tl li, .cau .adv-facts > div { break-inside: avoid; }
  .page h2 { break-after: avoid; }
}

/* ===== 40-signup.css ===== */
/* Sign-up and join pages: /watch/started, /join and /joined. /watch itself keeps the rules of
   36-pages-small.css. Every rule starts with a page class, so nothing leaks into other pages.
   A page that changes with what the script finds carries data-state on <main>, and the blocks
   that belong to one state carry an on-<state> class (started.js and join.js set the state). */

/* ---------- /watch/started ---------- */
.page-started .on-link, .page-started .on-nolink, .page-started .on-none { display: none; }
.page-started[data-state="link"] .on-link, .page-started[data-state="nolink"] .on-nolink { display: block; }
.page-started:not([data-state]) .on-none, .page-started[data-state="none"] .on-none { display: block; }
.page-started .started-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; }
.page-started:not([data-state="link"]):not([data-state="nolink"]) .started-grid { grid-template-columns: minmax(0, 1fr); }
.page-started .started-grid > .steps { margin-top: 8px; }
.page-started .join-box { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--ink); }
.page-started .join-box h2 { margin-top: 0; font-size: 24px; }
.page-started .join-box pre.cmd { white-space: pre-wrap; overflow-wrap: anywhere; }
.page-started .steps .step .cta { margin-top: 16px; }

/* ---------- /join ---------- */
.page-join .on-loading, .page-join .on-ready, .page-join .on-nocode, .page-join .on-phone, .page-join .on-other, .page-join .on-bad { display: none; }
.page-join[data-state="loading"] .on-loading, .page-join[data-state="ready"] .on-ready, .page-join[data-state="nocode"] .on-nocode,
.page-join[data-state="phone"] .on-phone, .page-join[data-state="other"] .on-other, .page-join[data-state="bad"] .on-bad { display: block; }
.page-join .join-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; }
.page-join:not([data-state="ready"]) .join-grid { grid-template-columns: minmax(0, 1fr); }
.page-join .consent { margin-top: 36px; padding: 28px 32px; border: 1px solid var(--line-2); border-radius: 12px; }
.page-join .consent h2 { margin-top: 0; font-size: 24px; }
.page-join .consent p, .page-join .consent li { font-size: 15px; line-height: 1.55; }
.page-join .consent ul { margin-top: 10px; }
.page-join .consent li { margin-top: 4px; }
.page-join .consent label.ff-check { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 17px; font-weight: 500; color: var(--ink); }
.page-join .join-actions { margin-top: 36px; }
.page-join .join-locked { margin-top: 0; padding: 20px 24px; background: var(--soft); border: 1px solid var(--line); border-radius: 8px; font-size: 17px; }
.page-join .join-locked[hidden], .page-join .os-block[hidden], .page-join .join-rule[hidden] { display: none; }
.page-join .os-block { padding-top: 24px; border-top: 1px solid var(--ink); }
.page-join .os-block h2 { margin-top: 0; font-size: 24px; }
.page-join .steps-list { margin: 16px 0 0 22px; }
.page-join .steps-list li { margin-top: 8px; }
.page-join .steps-list li::marker { font-family: var(--mono); color: var(--ink-3); }
.page-join .os-block pre.cmd { white-space: pre-wrap; overflow-wrap: normal; }
.page-join .tok { white-space: nowrap; }
.page-join .join-rule { margin-top: 28px; font-size: 15px; line-height: 1.55; color: var(--ink-3); }

/* ---------- /joined ---------- */
.page-joined .joined-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; }
.page-joined .joined-grid .facts { margin-top: 8px; }

@media (max-width: 1239px) {
  .page-started .started-grid, .page-join .join-grid, .page-joined .joined-grid { gap: 48px; }
}
@media (max-width: 900px) {
  .page-started .started-grid, .page-join .join-grid, .page-joined .joined-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .page-join .consent { padding: 20px; }
}

/* ===== 41-setup.css ===== */
/* Setup pages: the setup hub, the staff notice, the IT provider email, the approval summary and the
   manual removal pages. They reuse the page, step, table and code components of the earlier parts. */

/* Long copy blocks (staff notice, IT email): the text keeps its own line breaks and wraps only when the
   screen is narrower than the longest line. */
.page-setup pre.cmd { white-space: pre-wrap; overflow-wrap: anywhere; padding-right: 56px; }

/* ---------- Approval summary ----------
   One page when printed, on Letter and on A4. The boxes are inputs, so what a buyer types prints. In the
   PDF they are empty lines. */
.page-summary .s-from, .page-summary .s-decide { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 24px; }
.page-summary .s-from label, .page-summary .s-decide label { margin: 0; font-size: 17px; font-weight: 400; color: var(--ink-2); }
.page-summary .s-decide span { font-size: 17px; color: var(--ink-2); }
.page-summary input.fill[type=text] { width: 320px; max-width: 100%; }
.page-summary input.fill.fill-s[type=text] { width: 140px; }
.page-summary label.ck { display: inline-flex; align-items: center; gap: 8px; font-size: 17px; color: var(--ink); cursor: pointer; }
.page-summary label.ck input { width: 18px; height: 18px; margin: 0; accent-color: #18181b; }
.page-summary table.boxes { margin-top: 20px; }
.page-summary table.boxes th, .page-summary table.boxes td { padding: 12px 16px 12px 0; vertical-align: middle; font-size: 15px; }
.page-summary table.boxes th label { margin: 0; font-weight: 400; color: var(--ink-2); font-size: 15px; }
.page-summary table.boxes td { white-space: nowrap; width: 1%; }
.page-summary .s-foot { font-size: 14px; color: var(--ink-3); }

@media print {
  @page summary { margin: 15mm; }
  .page-summary { page: summary; display: block !important; columns: 2; column-gap: 9mm; padding: 0; font-size: 8pt; line-height: 1.27; color: #000; }
  .page-summary > * { max-width: none; }
  .page-summary > header.hero { column-span: all; padding: 0 0 2.5mm; margin: 0 0 3mm; border-bottom: .6pt solid #000; }
  .page-summary .cost-kicker { font-size: 7.5pt; margin: 0; }
  .page-summary .cost-kicker::after { content: none; } /* the screen marker of 95-bands.css */
  .page-summary h1 { font-size: 15pt; margin: 1mm 0 0; line-height: 1.1; }
  .page-summary .lede { display: none; }
  .page-summary .s-from { margin-top: 2.5mm; gap: 1.5mm 3mm; font-size: 8pt; }
  .page-summary .s-from label, .page-summary .s-decide label { font-size: 8pt; color: #000; }
  .page-summary section { margin: 0 0 2.2mm !important; break-inside: avoid; }
  .page-summary section > h2 { font-size: 9pt; line-height: 1.2; margin: 0 0 1mm !important; padding: 0 !important; border: 0; }
  .page-summary p, .page-summary li { font-size: 8pt; line-height: 1.27; margin-top: 1mm; color: #000; }
  .page-summary ul { margin: 1mm 0 0 4.2mm; }
  .page-summary li { margin-top: .6mm; padding-left: 0; }
  .page-summary a { text-decoration: none; color: #000; }
  .page-summary a[href]::after { content: none; }
  .page-summary input.fill[type=text] { height: 4.6mm; width: 38mm; padding: 0; border: 0; border-bottom: .5pt solid #000; border-radius: 0; background: none; font: inherit; font-size: 8pt; }
  .page-summary input.fill.fill-s[type=text] { width: 22mm; }
  .page-summary table.boxes { margin-top: 1.2mm; border-top: .5pt solid #000; }
  .page-summary table.boxes th, .page-summary table.boxes td { padding: .8mm 2mm .8mm 0; font-size: 8pt; border-bottom: .4pt solid #999; }
  .page-summary table.boxes th label { font-size: 8pt; color: #000; }
  .page-summary label.ck { font-size: 8pt; gap: 1.5mm; }
  .page-summary label.ck input { width: 3.2mm; height: 3.2mm; }
  .page-summary .s-decide { margin-top: 1.5mm; gap: 1mm 2.5mm; }
  .page-summary .s-decide span { font-size: 8pt; }
  .page-summary .s-foot { column-span: all; font-size: 7.5pt; color: #333; margin-top: 1mm; }
}

/* ===== 90-compact.css ===== */
/* Compact layout (rule of 2026-10-21, see CLAUDE.md). On a wide screen two blocks sit side by side
   when they can, so no block takes one half of a row and leaves the other half empty. This part loads
   last so it wins over the page-family parts. Below 901px every page keeps its one-column layout. */

@media (min-width: 901px) {
  /* ---------- Page header: the call to action sits beside the lede, as on the home page ---------- */
  .page header.hero:has(> .cta) { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: repeat(8, auto); column-gap: 64px; container-type: inline-size; }
  .page header.hero:has(> .cta) > * { grid-column: 1; }
  /* The title may run under the empty top of the button column, up to the right edge of the header
     and no further (100cqw is the header's width, 100% the first column's). */
  .page header.hero:has(> .cta) > h1 { margin-right: calc(100% - 100cqw); }
  .page header.hero:has(> .cta) > .cta { grid-column: 2; grid-row: 1 / -1; align-self: end; margin-top: 0; flex-wrap: nowrap; }

  /* ---------- Reading pages: sections pair up in two columns ----------
     Wide blocks (tables, the evidence block, the FAQ) and the page header keep the full row.
     A section with a full-row block on both sides would sit alone in a half, so it takes the row. */
  .page.reading { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; align-items: start; }
  .page.reading > * { grid-column: 1 / -1; min-width: 0; }
  .page.reading > section:not(.cost-wide, .wide, .cost-evidence, .vs-faq) { grid-column: auto; max-width: none; margin-top: 48px; }
  .page.reading > section:not(.cost-wide, .wide, .cost-evidence, .vs-faq):is(:first-child, :is(:not(section), .cost-wide, .wide, .cost-evidence, .vs-faq) + *):is(:last-child, :has(+ :is(:not(section), .cost-wide, .wide, .cost-evidence, .vs-faq))) { grid-column: 1 / -1; }
  main.page.reading > section > h2:first-child, main.page.reading > section > .cost-kicker:first-child + h2 { margin-top: 0; }
  .page.reading > header.hero { padding-bottom: 32px; max-width: none; }
  .page.reading > header.hero + section, .page.reading > header.hero + section + section, .page.reading > nav + section, .page.reading > nav + section + section { margin-top: 40px; }
  .page.reading > .close, .page.reading > .contact { padding-top: 0; border-top: 0; max-width: none; }
  .page.reading > .cost-case { padding-top: 4px; }
  .legal section.doc > h2 { padding-top: 20px; }
  .page.reading > nav.toc { max-width: none; }
  .legal .toc ol { columns: 3; }
  .page.reading > .vs-faq, .page.reading > .cost-evidence { margin-top: 56px; }
  .page.reading .guide-index li { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; }

  /* ---------- A FAQ on the full row: questions in two columns ---------- */
  .page.reading > .vs-faq, .page .vs-faq { max-width: none; }
  .page:not(.atkp, .vs-page) > .vs-faq .faqlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; }

  /* ---------- A closing block on the full row: the words left, the buttons right ---------- */
  :is(.page:not(.vs-page, .reading) > section.close:not(:has(+ .contact)), .page.reading > section.close:is(:is(:not(section), .cost-wide, .wide, .cost-evidence, .vs-faq) + *):is(:last-child, :has(+ :is(:not(section), .cost-wide, .wide, .cost-evidence, .vs-faq)))):has(> .cta) { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: repeat(4, auto); column-gap: 64px; }
  :is(.page:not(.vs-page, .reading) > section.close:not(:has(+ .contact)), .page.reading > section.close:is(:is(:not(section), .cost-wide, .wide, .cost-evidence, .vs-faq) + *):is(:last-child, :has(+ :is(:not(section), .cost-wide, .wide, .cost-evidence, .vs-faq)))):has(> .cta) > * { grid-column: 1; }
  :is(.page:not(.vs-page, .reading) > section.close:not(:has(+ .contact)), .page.reading > section.close:is(:is(:not(section), .cost-wide, .wide, .cost-evidence, .vs-faq) + *):is(:last-child, :has(+ :is(:not(section), .cost-wide, .wide, .cost-evidence, .vs-faq)))):has(> .cta) > .cta { grid-column: 2; grid-row: 1 / -1; align-self: end; margin-top: 0; }

  /* ---------- Close and contact at the foot of a page: one row ---------- */
  .page:not(.reading):not(.vs-page):has(> .close + .contact) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; align-items: start; }
  .page:not(.reading):not(.vs-page):has(> .close + .contact) > * { grid-column: 1 / -1; min-width: 0; }
  .page:not(.reading):not(.vs-page) > .close:has(+ .contact) { grid-column: 1; }
  .page:not(.reading):not(.vs-page) > .close + .contact { grid-column: 2; max-width: none; }

  /* ---------- A contact block alone on its row: the words left, the form right ---------- */
  .page:not(.vs-page) > section.contact:not(.close + .contact):has(> .ff-form) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; max-width: none; align-items: start; }
  .page:not(.vs-page) > section.contact:not(.close + .contact):has(> .ff-form) > * { grid-column: 1; }
  .page:not(.vs-page) > section.contact:not(.close + .contact):has(> .ff-form) > .ff-form { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; }

  /* ---------- Comparison pages ---------- */
  .vs-page > section.vs-intro { max-width: none; }
}

/* ===== 95-bands.css ===== */
/* Bands and hierarchy (rule of 2026-10-21, see CLAUDE.md). Loads after 90-compact so it wins.
   Colours (2.0 palette of 2026-10-22): page white, the tint #f3f3f5 (the mockup's .window and .side
   grey), the ink #0b0b0c for the one dark block (deep teal #2f4b4e for the /attacks counts only), lime
   only as a small marker. Rust #b5482a (--accent) marks a bad thing: 5.3:1 on white, 4.8:1 on the
   tint. No other colours.
   Inner pages sit inside the 1200px wrap, so a band is a ::before behind the block that a box-shadow
   spreads to the screen edges. #main isolates, so the band paints behind every block in main and
   never over a neighbour's text. A block gets a band by setting --band. */

:root { --tint: #f3f3f5; --soft-base: var(--soft); }

/* ---------- Eyebrow marker and heading weights (all media) ---------- */
:is(.label, .kicker, .cost-kicker):has(+ :is(h1, h2))::after { content: ""; display: block; width: 24px; height: 3px; margin-top: 10px; background: var(--edge); }
/* Section headings stay 600 and 30px. Sub-headings drop to 500 so the two levels read apart. */
.page h3, .faq-item > summary { font-weight: 500; }
.page .note, .page .callout:not(.warn) { border-left: 3px solid var(--edge); }

/* Cards and tables are white, so they stand off a tinted band. On a white band nothing changes. */
.page :is(table, .tablewrap), .card, .vscard { background: #fff; }
.vs-page table.vs :is(thead th:last-child, td:last-child), .vs-page table.chart tr.mine > * { background: var(--soft-base); }

@media screen {
  #main { isolation: isolate; }

  /* ---------- The band engine ---------- */
  #main.page > :is(.crumbs, header.hero, section, .band) { position: relative; }
  #main.page > :is(.crumbs, header.hero, section, .band)::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: var(--band-top, 0px); bottom: var(--band-bottom, 0px); background: var(--band, transparent); box-shadow: 0 0 0 100vmax var(--band, transparent); clip-path: inset(0 -100vmax); pointer-events: none; }

  /* ---------- Tinted bands ---------- */
  /* Home: the sections alternate. The last one is the dark block. */
  #main:not(.page) > section.sec { border-top: 0; }
  #main:not(.page) > section.sec:nth-of-type(odd):not(:last-of-type) { background: var(--tint); }

  /* Inner pages: the page header is tinted, from the top bar down. Pages made of full-row sections
     alternate after it. Reading pages pair their sections in two columns, so only the full-row FAQ
     takes a band there. */
  :is(
    #main:not(.page) > section.sec:nth-of-type(odd):not(:last-of-type),
    #main.page > .crumbs,
    #main.page > header.hero,
    #main.vs-page > section:nth-child(odd):not(.close),
    #main.dev > section:nth-child(odd):not(.close),
    #main.banded > .band:nth-child(odd),
    #main.atk > :is(.hub-sec, .vs-faq):nth-child(even),
    #main.page.reading > .vs-faq,
    #main.atkp > .more
  ) { --band: var(--tint); --soft: #fff; --line: var(--line-2); }
  :is(
    #main:not(.page) > section.sec:nth-of-type(odd):not(:last-of-type),
    #main.page > :is(.crumbs, header.hero),
    #main.vs-page > section:nth-child(odd):not(.close),
    #main.dev > section:nth-child(odd):not(.close),
    #main.banded > .band:nth-child(odd),
    #main.atk > :is(.hub-sec, .vs-faq):nth-child(even),
    #main.page.reading > .vs-faq,
    #main.atkp > .more
  ) :not(pre) > code { background: #fff; }
  #main :is(table, .tablewrap, .card, .vscard) code { background: var(--soft-2); }

  /* The header band reaches up through the page padding to the top bar. */
  #main.page > header.hero { padding-bottom: 40px; border-bottom: 0; --band-top: -64px; }
  #main.page > .crumbs { --band-top: -64px; --band-bottom: -22px; }
  #main.page > .crumbs + header.hero { --band-top: 0px; }
  #main.banded > .band { border-top: 0; }
  #main.banded > .band:first-child { --band-top: -64px; }

  /* Full-row section pages: each section is one band with room above and below. */
  #main:is(.vs-page, .dev) > section { margin-top: 0; padding: 40px 0; border-top: 0; }
  #main.dev > section > h2:first-child { margin-top: 0; }
  #main.atk > :is(.hub-sec, .vs-faq) { margin-top: 0; padding: 48px 0; }
  #main.page > .vs-faq > h2:first-child, #main.atk > .hub-sec > h2:first-child { margin-top: 0; }
  #main.page.reading > .vs-faq { margin-top: 64px; padding: 48px 0; }
  #main.atkp > .more { margin-top: 72px; padding: 48px 0; border-top: 0; }

  /* ---------- The one dark block ---------- */
  /* Home: the closing PS. Inner pages: the closing call to action. /attacks: the collection counts. */
  :is(#main:not(.page) > section.sec:last-of-type, #main.page > section.close:has(> .cta), #main.atk > .atk-counts) {
    --band: #0b0b0c;
    --ink: #fff; --ink-2: #d6d6db; --ink-3: #a1a1aa; --ink-4: #63636b;
    --line: #3f3f46; --line-2: #63636b; --soft: #18181b; --soft-2: #3f3f46;
    color: var(--ink);
  }
  #main:not(.page) > section.sec:last-of-type { background: #0b0b0c; }
  :is(#main:not(.page) > section.sec:last-of-type, #main.page > section.close:has(> .cta), #main.atk > .atk-counts) :is(.btn-solid, .primary) { color: #0b0b0c; }
  :is(#main:not(.page) > section.sec:last-of-type, #main.page > section.close:has(> .cta), #main.atk > .atk-counts) :is(.btn-line, .secondary, .ghost) { background: transparent; border-color: #a1a1aa; color: #fff; }
  :is(#main:not(.page) > section.sec:last-of-type, #main.page > section.close:has(> .cta), #main.atk > .atk-counts) :is(.btn-line, .secondary, .ghost):hover { background: transparent; border-color: #fff; }
  :is(#main:not(.page) > section.sec:last-of-type, #main.page > section.close:has(> .cta), #main.atk > .atk-counts) .tlink:hover { border-color: #fff; }
  :is(#main:not(.page) > section.sec:last-of-type, #main.page > section.close:has(> .cta), #main.atk > .atk-counts) .def-pop { color: #3f3f46; border-color: #d6d6db; }

  /* The closing band. As the last block it runs down through the page padding to the footer. */
  #main.page > section.close:has(> .cta) { margin-top: 64px; padding: 56px 0; border-top: 0; max-width: none; }
  #main.page > section.close:has(> .cta):last-child { padding-bottom: 0; --band-bottom: -88px; }
  #main.page > :is(.vs-faq, .more) + section.close, #main:is(.vs-page, .dev) > section.close { margin-top: 0; }

  /* /attacks below 901px: the counts are one dark band under the header. It is the site's one deep teal
     block, so the counts do not read as a second closing band. Muted text and lines are lifted to suit
     the teal: #c3cdce is 5.8:1 on it. */
  #main.atk > .atk-counts { margin-top: 0; padding: 40px 0; border-top: 0; }
  #main#main.atk > .atk-counts { --band: #2f4b4e; --ink-3: #c3cdce; --ink-4: #8aa0a2; --line: #4a6669; --line-2: #6b8588; }
}

@media screen and (min-width: 901px) {
  /* A closing block that shares its row with another block is a dark panel, not a band, so it does
     not spill under its neighbour. */
  #main.page.reading > section.close:has(> .cta):not(:is(:is(:not(section), .cost-wide, .wide, .cost-evidence, .vs-faq) + *):is(:last-child, :has(+ :is(:not(section), .cost-wide, .wide, .cost-evidence, .vs-faq)))),
  #main.page:not(.reading):not(.vs-page) > section.close:has(> .cta):has(+ .contact) {
    --band: transparent; background: #0b0b0c; border-radius: 12px; padding: 32px 36px 36px;
  }
  #main.dev > section.close:has(> .cta):has(+ .contact) { margin-top: 40px; }

  /* /attacks: the header and the counts share the tinted first row. The counts are a dark panel in
     the right half. Its margin keeps the row's band below the panel. */
  #main.atk > header.hero { padding-bottom: 48px; }
  /* #main#main outranks the :is() list that sets the dark --band. */
  #main#main.atk > .atk-counts { --band: var(--tint); --band-top: -64px; --band-bottom: -48px; background: #2f4b4e; border-radius: 12px; padding: 24px 28px 28px; margin-bottom: 48px; }
}

/* ===== 96-sticky-nav.css ===== */
/* The top bar stays on screen. The attack library runs past 11,000 px, and the
   menu and the start button must not leave with the first screen. */
.navbar { position: sticky; top: 0; z-index: 50; background: #fff; transition: transform .2s ease, box-shadow .2s ease; }
/* Once the page moves, the bar lifts off the content. Its height never changes:
   a shorter bar moves the page under it, which flips the state back and makes it
   shake near the top. */
.navbar.scrolled { box-shadow: 0 1px 0 var(--line), 0 6px 16px -12px rgba(11, 11, 12, .25); }
/* A jump to a section lands below the bar, not under it. */
html { scroll-padding-top: 72px; }

@media (max-width: 900px) {
  /* On a phone the bar takes too much of the screen to stay. It hides on the
     way down and comes back on the way up. */
  .navbar { position: sticky; }
  .navbar.hidden { transform: translateY(-100%); }
  html { scroll-padding-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .navbar { transition: none; }
}