/* The home page's own styles, moved out of the HTML so the page a crawler
   fetches is the text and not the furniture. Cascade order is the order
   the blocks had in <head>. app.css comes first, as before. */

/* ============================================================================
   Design system — soft modern product.

   Replaced the previous brutalist sheet wholesale. What changed and why:

   - Monospace is now for code and code only. It used to carry every label on
     the page, which is what made a report about someone's marketing read like
     a stack trace. Numbers keep tabular figures in the UI face instead.
   - No uppercase micro-labels. `.18em` letterspaced caps are a developer-tool
     tic; sentence case at 12px/600 says the same thing without shouting.
   - Surfaces are rounded and lifted rather than hairlined and flush. The old
     1px-gap grids (background bleeding through a gap) are real gaps now, so
     cards read as objects instead of table cells.
   - One brand accent, used sparingly, plus three status hues. Every solid that
     carries white text clears 4.5:1 against it; every tint is a background for
     dark text, never the reverse.
   ========================================================================== */

/* The palette, type and shape come from app.css, shared with every other
   page. What follows are the names this page uses that the shared sheet does
   not define, each said in terms of a shared token so that a change there
   carries here without a second edit. */
:root{
  --brand-2:var(--brand-ink);
  --ok-solid:var(--ok); --wr-solid:var(--wr); --er-solid:var(--er);
  --na:var(--ink-3); --na-tint:var(--card-3); --na-l:var(--ink-4);
  /* Sequential ramp for the whole-site heatmap: one hue, monotone lightness,
     light end held above 2:1 on the card so the lowest step stays visible.
     The dark steps are chosen, not an inversion of these. */
  --heat-0:#F2F1EB; --heat-1:#EFC49B; --heat-2:#E39A5E; --heat-3:#C9702F; --heat-4:#8F4A14;
  --heat-ink:#FFFFFF;
  /* No pills, no deep shadows: the shared shape is a small radius and a rule. */
  --pill:var(--r2); --r4:var(--r3); --sh3:var(--sh2);
  --ease:cubic-bezier(.32,.72,.35,1);
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --heat-0:#1B2231; --heat-1:#7A4116; --heat-2:#B0692E; --heat-3:#D99A5C; --heat-4:#F2CB9A;
  --heat-ink:#101521;
}}
:root[data-theme=dark]{
  --heat-0:#1B2231; --heat-1:#7A4116; --heat-2:#B0692E; --heat-3:#D99A5C; --heat-4:#F2CB9A;
  --heat-ink:#101521;
}

*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--disp);
     font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
     font-feature-settings:"cv02","cv03","cv04","cv11"}
::selection{background:var(--brand);color:var(--on-brand)}
.wrap{width:100%;max-width:1160px;margin:0 auto;padding:0 clamp(20px,4vw,40px)}
a{color:var(--brand-ink)}

/* ============ topbar ============ */
.top{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--paper) 88%,transparent);
     backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:24px;height:70px}
.logo{font-weight:700;font-size:17px;letter-spacing:-.021em;white-space:nowrap;flex:none;
      display:flex;align-items:center;gap:10px;color:var(--ink)}
.logo::before{content:"";width:24px;height:24px;border-radius:8px;flex:none;
              background:var(--brand);
              box-shadow:0 2px 8px -1px rgba(90,85,224,.45)}
.logo em{font-style:normal;color:var(--ink-4);font-weight:450}
form{display:flex;gap:10px;flex:1;min-width:0;max-width:min(620px,52vw);margin-left:auto}
.field{flex:1;position:relative;display:flex;align-items:center;min-width:0}
.field::before{content:"";position:absolute;left:15px;width:15px;height:15px;pointer-events:none;opacity:.5;
  background:currentColor;color:var(--ink-4);
  -webkit-mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a15 15 0 0 1 0 18a15 15 0 0 1 0-18'/%3E%3C/svg%3E");
          mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a15 15 0 0 1 0 18a15 15 0 0 1 0-18'/%3E%3C/svg%3E")}
#u{width:100%;font-family:var(--disp);font-size:14.5px;padding:11px 16px 11px 40px;
   background:var(--card);color:var(--ink);border:1px solid var(--line-2);border-radius:var(--pill);
   transition:box-shadow .18s var(--ease),border-color .18s var(--ease)}
#u::placeholder{color:var(--ink-4)}
#u:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}
/* Locked to the account's website, arriving from the brief.
 *
 * The tint alone was not enough — a field that looks editable and is not is a
 * field somebody clicks into and then wonders about. The globe becomes a
 * padlock, which says it in the one place with room for it and needs no words.
 * Settled, not broken: same field, quieter. */
#u.locked{background:var(--card-3);color:var(--ink-2);cursor:default}
#u.locked:focus{border-color:var(--line-2);box-shadow:none}
.field.locked::before{opacity:.62;
  -webkit-mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10.5' width='16' height='10.5' rx='2.5'/%3E%3Cpath d='M8 10.5V7a4 4 0 0 1 8 0v3.5'/%3E%3C/svg%3E");
          mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10.5' width='16' height='10.5' rx='2.5'/%3E%3Cpath d='M8 10.5V7a4 4 0 0 1 8 0v3.5'/%3E%3C/svg%3E")}
.go{font-family:var(--disp);font-weight:600;font-size:14.5px;padding:11px 24px;
    background:var(--brand);color:#fff;border:none;border-radius:var(--pill);cursor:pointer;
    white-space:nowrap;box-shadow:0 1px 2px rgba(15,23,42,.1),0 4px 14px -4px rgba(90,85,224,.55);
    transition:transform .16s var(--ease),box-shadow .16s var(--ease),background .16s}
.go:hover:not(:disabled){background:var(--brand-2);transform:translateY(-1px);
    box-shadow:0 2px 4px rgba(15,23,42,.1),0 8px 22px -6px rgba(90,85,224,.6)}
.go:active:not(:disabled){transform:none}
.go:disabled{opacity:.62;cursor:progress;box-shadow:none}
.go:focus-visible{outline:none;box-shadow:var(--ring)}
.topline{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent}
.topline i{display:block;height:100%;width:0;border-radius:var(--pill);
           background:var(--brand);
           transition:width .3s var(--ease)}

/* ============ hero ============ */
.hero{padding-block:clamp(48px,7vw,92px) clamp(40px,5vw,64px);
      display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
      gap:clamp(36px,5vw,80px);align-items:center}
.heroL{min-width:0}
.heroR{min-width:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r4);
       padding:clamp(22px,2.4vw,32px);box-shadow:var(--sh2)}
.rlab{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;color:var(--ink-3);margin:0 0 14px}
/* The count, as a fact rather than a boast. It is the one number on this card
   that can be checked against the report, and check.mjs fails the build if the
   two disagree. */
.rlab em{font-style:normal;font-size:11.5px;font-weight:700;letter-spacing:.02em;
  color:var(--brand-ink);background:var(--brand-tint);border-radius:var(--pill);padding:3px 9px}
.rlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.rlist li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:4px 12px;
          align-items:start;padding:11px 0;border-bottom:1px solid var(--line)}
.rlist li:last-child{border-bottom:none}
/* A tick in a soft disc, drawn rather than typed, so the list reads as a set of
   things already handled instead of a bulleted spec. */
.rlist li::before{content:"";grid-row:1/3;width:22px;height:22px;border-radius:var(--pill);
  background:var(--brand-tint) no-repeat center/11px 11px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235A55E0' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E");
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 22%,transparent)}
.rlist b{font-weight:600;font-size:14.5px;color:var(--ink);line-height:1.4}
.rlist span{font-size:14px;color:var(--ink-3);line-height:1.5;grid-column:2}
.rlist span i{font-style:italic;color:var(--ink-2)}
.rmore{font-size:13px;color:var(--ink-4);padding-top:14px;margin:0}
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;
        color:var(--brand-ink);background:var(--brand-tint);border-radius:var(--pill);
        padding:6px 14px;margin:0 0 22px}
.kicker::before{content:"";width:6px;height:6px;border-radius:var(--pill);background:var(--brand)}
.hero h1{font-weight:700;font-size:clamp(36px,4.4vw,60px);line-height:1.05;
         letter-spacing:-.035em;margin:0 0 20px;max-width:17ch;text-wrap:balance}
.hero h1 span{color:var(--brand-ink);font-style:italic}
.hero .sub{font-size:clamp(16px,1.15vw,18.5px);line-height:1.6;color:var(--ink-2);
           max-width:54ch;margin:0 0 30px;font-weight:400}
.tries{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:22px}
.tries em{font-style:normal;font-size:13px;color:var(--ink-4);margin-right:4px}
.try{font-family:var(--disp);font-size:13.5px;background:var(--card);border:1px solid var(--line-2);
     color:var(--ink-2);padding:7px 14px;border-radius:var(--pill);cursor:pointer;
     transition:.16s var(--ease)}
.try:hover{border-color:var(--brand);color:var(--brand-ink);background:var(--brand-tint)}
.heroCta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:4px}
.ctaBig{font-family:var(--disp);font-weight:600;font-size:16px;padding:15px 32px;
        background:var(--brand);color:#fff;border:none;border-radius:var(--pill);cursor:pointer;
        box-shadow:0 2px 4px rgba(15,23,42,.08),0 10px 26px -8px rgba(90,85,224,.6);
        transition:transform .16s var(--ease),box-shadow .16s var(--ease),background .16s}
.ctaBig:hover{background:var(--brand-2);transform:translateY(-2px);
        box-shadow:0 4px 8px rgba(15,23,42,.1),0 16px 34px -10px rgba(90,85,224,.66)}
.ctaBig:focus-visible{outline:none;box-shadow:var(--ring)}
.ctaHint{font-size:13.5px;color:var(--ink-4)}

/* ============ fix plan: one ticket at a time ============ */
.fpTop{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 30px;align-items:end;margin-bottom:18px}
.fpStage{grid-column:1;font-size:13px;font-weight:600;color:var(--ink-4);margin:0 0 8px}
.fpTop h2{font-weight:700;font-size:clamp(24px,2.5vw,36px);letter-spacing:-.03em;line-height:1.1;margin:0}
.fpProg{font-size:13.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.fpProg b{color:var(--ok);font-weight:600}
.fpBar{grid-column:1/-1;height:8px;background:var(--card-3);border-radius:var(--pill);overflow:hidden;margin-top:6px}
.fpBar i{display:block;height:100%;width:0;border-radius:var(--pill);
         background:var(--ok);transition:width .45s var(--ease)}
.fpFound{grid-column:1/-1;font-size:14px;color:var(--ok);margin:14px 0 0;line-height:1.6}
.fpPlat{grid-column:1/-1;font-size:15px;color:var(--ink-2);margin:12px 0 0}
.fpPlat b{color:var(--ok);font-weight:650}
.fpSplit{grid-column:1/-1;font-size:15px;color:var(--ink-3);margin:10px 0 0}
.fpSplit b{color:var(--er);font-weight:650}
.fpSplit span{color:var(--wr);font-weight:600}
.fpMain{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,290px);
        gap:clamp(24px,3vw,44px);margin-top:32px;align-items:start}

/* the ticket */
.tk{background:var(--card);border:1px solid var(--line);border-radius:var(--r3);
    padding:clamp(22px,2.2vw,32px);box-shadow:var(--sh2);position:relative;overflow:hidden}
.tk::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--tt)}
.tkTop{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 20px;align-items:start;margin-bottom:20px}
.tkStep{font-size:13px;font-weight:600;color:var(--ink-4);margin:0 0 8px}
.tkName{font-weight:700;font-size:clamp(21px,1.9vw,29px);letter-spacing:-.026em;line-height:1.15;margin:0}
.tkTag{font-size:12px;font-weight:600;color:#fff;background:var(--tt);
       padding:5px 12px;border-radius:var(--pill);white-space:nowrap}
.tkNow{grid-column:1/-1;font-size:14px;color:var(--ink-3);margin:4px 0 0;line-height:1.55}
.tkEv{margin-bottom:20px}
.tkEvLab{font-size:12.5px;font-weight:600;color:var(--er);margin:0 0 9px}
.tkEvCode{margin:0;padding:15px 18px;background:var(--er-tint);border:1px solid color-mix(in srgb,var(--er-solid) 20%,transparent);
          border-radius:var(--r2);overflow-x:auto;font-family:var(--mono);font-size:12.5px;
          line-height:1.7;white-space:pre-wrap;word-break:break-all;color:var(--ink)}
.tkEvCode .dim{color:var(--ink-4)}
.tkEvCode mark{background:color-mix(in srgb,var(--er-solid) 22%,transparent);color:var(--er);
               font-weight:600;padding:2px 4px;border-radius:4px}
.tkEvHint{font-size:13.5px;color:var(--ink-3);margin:9px 0 0;line-height:1.5}
.tkLift{grid-column:1/-1;display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 0}
.tkLift b{font-size:13px;font-weight:600;color:var(--ok);background:var(--ok-tint);
          padding:5px 12px;border-radius:var(--pill);white-space:nowrap}
.tkLift span{font-size:13.5px;color:var(--ink-3)}
.tkLift-none span{color:var(--ink-4);font-style:italic}
.fpLift{grid-column:1/-1;font-size:15px;line-height:1.6;color:var(--ink-2);margin:12px 0 0;max-width:88ch}
.fpLift b{color:var(--ink);font-weight:650}
.tkWhere{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:11px}
.tkWhere b{font-size:12.5px;font-weight:600;color:var(--ink-4)}
.tkWhere span{font-family:var(--mono);font-size:12.5px;color:var(--ink);background:var(--card-3);
              padding:4px 10px;border-radius:var(--r1)}
.codewrap{position:relative;background:var(--card-2);border:1px solid var(--line);border-radius:var(--r2)}
.codewrap pre{margin:0;padding:18px 20px;overflow-x:auto;font-family:var(--mono);font-size:12.5px;
              line-height:1.7;color:var(--ink);white-space:pre;tab-size:2}
.copyBtn{position:absolute;top:10px;right:10px;font-family:var(--disp);font-size:12.5px;font-weight:550;
         background:var(--card);border:1px solid var(--line-2);color:var(--ink-2);padding:6px 12px;
         border-radius:var(--pill);cursor:pointer;transition:.16s var(--ease);box-shadow:var(--sh1)}
.copyBtn:hover{border-color:var(--brand);color:var(--brand-ink)}
.addBtn{margin-top:14px;font-family:var(--disp);font-size:13.5px;font-weight:550;
        background:var(--card);border:1px solid var(--line-2);color:var(--ink-2);padding:9px 16px;
        border-radius:var(--pill);cursor:pointer;transition:.16s var(--ease)}
.addBtn:hover{border-color:var(--brand);color:var(--brand-ink);background:var(--brand-tint)}
.tkSteps{margin:0 0 20px;background:var(--card-2);border:1px solid var(--line);
         border-radius:var(--r2);padding:18px 22px}
.tkStepsLab{font-size:12.5px;font-weight:600;color:var(--ink-3);margin:0 0 12px}
.tkSteps ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:9px}
.tkSteps li{font-size:14.5px;line-height:1.6;color:var(--ink);max-width:78ch;padding-left:4px}
.tkSteps li::marker{font-size:13px;color:var(--brand);font-weight:600}
.parts{display:flex;flex-direction:column;gap:18px}
.part{border:1px solid var(--line);border-radius:var(--r2);overflow:hidden}
.partHead{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 14px;align-items:baseline;
          padding:12px 16px;background:var(--card-2);border-bottom:1px solid var(--line)}
.partN{font-size:12.5px;color:var(--ink-4);font-variant-numeric:tabular-nums}
.partName{font-family:var(--mono);font-size:13px;color:var(--ink);word-break:break-all}
.partMeta{font-size:12.5px;color:var(--wr);white-space:nowrap}
.part .codewrap{border:none;border-radius:0}
@media (max-width:700px){ .partHead{grid-template-columns:auto minmax(0,1fr)} .partMeta{grid-column:2} }
.tkHow{margin:16px 0 0;background:var(--ok-tint);border:1px solid color-mix(in srgb,var(--ok-solid) 20%,transparent);
       border-radius:var(--r2);padding:16px 20px}
.tkHowLab{font-size:12.5px;font-weight:600;color:var(--ok);margin:0 0 9px}
.tkHow p:last-child{margin:0;font-size:14.5px;line-height:1.65;color:var(--ink);max-width:76ch}
.tkNote{font-size:14px;line-height:1.6;color:var(--ink-2);margin:14px 0 0;max-width:78ch}
.tkNote b{color:var(--ink);font-weight:650}
.tkWhy{font-size:14px;line-height:1.6;color:var(--ink-3);margin:16px 0 0;padding-top:14px;
       border-top:1px solid var(--line);max-width:80ch}
.tkAct{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:26px;padding-top:22px;
       border-top:1px solid var(--line)}
.btnV{font-family:var(--disp);font-weight:600;font-size:14.5px;padding:12px 24px;
      background:var(--ok-solid);color:#fff;border:none;border-radius:var(--pill);cursor:pointer;
      box-shadow:0 1px 2px rgba(15,23,42,.1),0 6px 18px -6px rgba(14,138,95,.55);
      transition:transform .16s var(--ease),filter .16s}
.btnV:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px)}
.btnV:disabled{opacity:.6;cursor:progress;box-shadow:none}
.btnG{font-family:var(--disp);font-weight:550;font-size:14.5px;padding:12px 20px;background:var(--card);
      border:1px solid var(--line-2);color:var(--ink-2);border-radius:var(--pill);cursor:pointer;
      transition:.16s var(--ease)}
.btnG:hover{border-color:var(--brand);color:var(--brand-ink)}
.btnV:focus-visible,.btnG:focus-visible{outline:none;box-shadow:var(--ring)}
.tkNav{margin-left:auto;display:flex;gap:8px}
.tkNav button{font-family:var(--disp);font-size:14px;padding:10px 15px;background:var(--card);
              border:1px solid var(--line-2);color:var(--ink-2);border-radius:var(--pill);cursor:pointer;
              transition:.16s var(--ease)}
.tkNav button:hover:not(:disabled){border-color:var(--brand);color:var(--brand-ink)}
.tkNav button:disabled{opacity:.35;cursor:default}
.tkMsg{margin-top:16px;padding:14px 18px;border-radius:var(--r2);font-size:14.5px;line-height:1.55;display:none}
.tkMsg.on{display:block}
.tkMsg.good{background:var(--ok-tint);color:var(--ok);border:1px solid color-mix(in srgb,var(--ok-solid) 22%,transparent)}
.tkMsg.bad{background:var(--er-tint);color:var(--er);border:1px solid color-mix(in srgb,var(--er-solid) 22%,transparent)}
.tkMsg.part{background:var(--wr-tint);color:var(--wr);border:1px solid color-mix(in srgb,var(--wr-solid) 22%,transparent)}
.tkMsg b{display:block;margin-bottom:3px}
/* The line that says the saved check moved with the fix. */
.tkMsg .tkSaved{display:block;margin-top:8px;font-style:normal;font-size:13px;opacity:.85}

/* the rail */
.rail{position:sticky;top:88px;background:var(--card);border:1px solid var(--line);
      border-radius:var(--r3);padding:18px;box-shadow:var(--sh1)}
.railLab{font-size:12.5px;font-weight:600;color:var(--ink-3);margin:0 0 12px}
.railGrp{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap;
         font-size:12.5px;font-weight:600;color:var(--ink-4);margin:18px 0 6px;padding-top:14px;
         border-top:1px solid var(--line)}
.railGrp em{font-style:normal;font-weight:450;opacity:.8;font-variant-numeric:tabular-nums;white-space:nowrap;flex:none}
.railGrp:first-of-type{margin-top:0;padding-top:0;border-top:none}
.railItem{display:grid;grid-template-columns:16px minmax(0,1fr);gap:10px;align-items:center;width:100%;
          background:none;border:none;text-align:left;padding:8px 10px;cursor:pointer;font-family:inherit;
          font-size:13.5px;color:var(--ink-3);transition:.14s var(--ease);border-radius:var(--r1)}
.railItem:hover{background:var(--card-2);color:var(--ink)}
.railItem.cur{background:var(--brand-tint);color:var(--brand-ink);font-weight:600}
.railItem.done{color:var(--ink-4)}
.railItem.done .rn{text-decoration:line-through}
.railDot{width:9px;height:9px;border-radius:var(--pill);border:2px solid var(--rd);
         background:transparent;justify-self:center}
.railItem.done .railDot{background:var(--ok-solid);border-color:var(--ok-solid)}
.rn{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Where the edit lands, kept per row now that it no longer drives the order. */
.rw{display:block;font-size:11.5px;color:var(--ink-4);opacity:.85;margin-top:1px;font-weight:450;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.railItem.cur .rw{opacity:.9}
.railItem.done .rw{text-decoration:none}
.railFoot{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
          display:flex;flex-direction:column;gap:8px}
.railFoot button{font-family:var(--disp);font-size:13px;font-weight:550;background:var(--card);
                 border:1px solid var(--line-2);color:var(--ink-2);padding:9px 13px;
                 border-radius:var(--pill);cursor:pointer;text-align:left;transition:.16s var(--ease)}
.railFoot button:hover{border-color:var(--brand);color:var(--brand-ink)}

/* ============ crawl / whole-site ============ */
.crawlStart{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:26px}
.crawlLab{font-size:13px;font-weight:600;color:var(--ink-3)}
#crawlMax{font-family:var(--disp);font-size:14px;padding:10px 14px;background:var(--card);color:var(--ink);
          border:1px solid var(--line-2);border-radius:var(--pill)}
.crawlHint{font-size:13px;color:var(--ink-4)}
.crawlProg{margin-top:28px}
.cwN{font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums}
.cwPct{font-size:12.5px;color:var(--ink-4)}
.cwOk{color:var(--ok)}
.cwNo{display:inline-block;margin-left:10px;font-size:12px;color:var(--er)}
.cwLink{font-family:var(--mono);font-size:12px;color:var(--ink-3);text-decoration:none;word-break:break-all}
.cwLink:hover{color:var(--brand-ink)}

/* Core Web Vitals distributions. Plain elements rather than an SVG: every bar
   is a share of the same whole, so there is no axis to draw and no scale to
   compare against, and these reflow on a narrow screen where a fixed viewBox
   would not. */
.cwWrap{display:grid;gap:24px}
.cwRow{min-width:0}
.cwHd{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:10px}
.cwName{font-size:14.5px;color:var(--ink);font-weight:650}
.cwName em{font-style:normal;font-size:13.5px;color:var(--ink-3);font-weight:400;margin-left:9px}
.cwP75{font-size:16px;font-weight:650;white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.cwP75 em{display:block;font-style:normal;font-size:12px;font-weight:550;opacity:.9;margin-top:2px}
.cwTrack{display:flex;height:12px;border-radius:var(--pill);overflow:hidden;background:var(--card-3)}
.cwTrack i{display:block;height:100%}
.cwSplit{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:10px;font-size:12.5px;color:var(--ink-3)}
.cwSplit span{display:inline-flex;align-items:center;gap:7px}
.cwSplit i{width:9px;height:9px;border-radius:3px;display:inline-block}
.cwSub{font-size:13px;color:var(--ink-3);line-height:1.55;margin:4px 0 -6px;padding-top:16px;
       border-top:1px solid var(--line);max-width:78ch}
.cwNote,.cwFoot{font-size:13px;color:var(--ink-3);line-height:1.55;margin:6px 0 0;max-width:78ch}
.cwFoot{padding-top:16px;border-top:1px solid var(--line)}

.tplWrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r2);background:var(--card)}
table.tpl{border-collapse:collapse;width:100%;min-width:640px;font-size:13.5px}
table.tpl th{font-size:12.5px;font-weight:600;color:var(--ink-3);text-align:left;padding:12px 16px;
             border-bottom:1px solid var(--line);white-space:nowrap;background:var(--card-2)}
table.tpl td{padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top}
table.tpl tr:last-child td{border-bottom:none}
table.tpl tr.row-no{background:var(--er-tint)}

/* One headline figure, in the header's right-hand slot rather than as an
   oversized tile that would break the row's baseline. */
.fpHero{grid-column:2;grid-row:1/3;text-align:right;align-self:end}
.fpHero b{display:block;font-weight:700;font-size:clamp(34px,3.6vw,52px);letter-spacing:-.04em;
          line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.fpHero span{display:block;font-size:13px;color:var(--ink-3);margin-top:8px}

/* Equal tiles on one baseline: the label row is fixed height and clipped to one
   line, so a longer label cannot push its value out of step with the others. */
.kpiRow{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:12px;margin:0 0 24px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);
     padding:16px 18px 18px;display:grid;grid-template-rows:18px auto 1fr;align-content:start;min-width:0}
.kpiL{font-size:12.5px;font-weight:600;color:var(--ink-3);margin:0;line-height:18px;
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpiV{font-weight:700;font-size:29px;letter-spacing:-.03em;line-height:1.1;color:var(--ink);
      margin-top:10px;font-variant-numeric:tabular-nums}
.kpiS{display:block;font-size:12.5px;color:var(--ink-3);margin-top:8px;line-height:1.45}
.kpiV.bad{color:var(--er)} .kpiV.good{color:var(--ok)}

.chartBox{background:var(--card);border:1px solid var(--line);border-radius:var(--r3);
          padding:24px 26px 22px;margin:0 0 22px;box-shadow:var(--sh1)}
.chartHd{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 26px;align-items:baseline}
.chartT{font-weight:650;font-size:17px;letter-spacing:-.018em;margin:0;line-height:1.3}
.chartN{font-size:13px;color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.chartS{grid-column:1/-1;font-size:13.5px;color:var(--ink-3);margin:8px 0 20px;max-width:82ch;line-height:1.55}
/* A table inside a card runs to the card's edges instead of drawing a second
   border a few pixels inside the first. */
.chartBox .tplWrap,.chartBox .heatScroll{border:0;border-radius:0}
.chartBox .kpiRow{margin:0}
.chartBox .kpiRow+.tplWrap{margin-top:20px}
.chartBox .tplWrap{border-top:1px solid var(--line);margin:20px -26px -22px}
/* That -22px exists so a table finishing a card sits flush with its bottom
   edge. Where a caption follows the table instead, the same margin drags the
   paragraph up into the table's last row — so give the pair back its gap. */
.chartBox .tplWrap+.chartS{margin-top:30px}
.chartBox table.tpl th:first-child,.chartBox table.tpl td:first-child{padding-left:26px}
.chartBox table.tpl th:last-child,.chartBox table.tpl td:last-child{padding-right:26px}
/* Capped at its own viewBox width: past 1000px the SVG scales up and takes the
   axis type with it, so the charts grow a size larger than the page's. */
.chartBox svg{display:block;width:100%;max-width:1000px;height:auto;overflow:visible}
/* Chart type scale. test/charts.mjs measures label collisions against these
   exact sizes, so a change here has to be mirrored in SIZE there. */
.cAx{font-family:var(--disp);font-size:10px;fill:var(--ink-4)}
.cVal{font-family:var(--disp);font-size:11px;fill:var(--ink-2)}
.cCat{font-family:var(--disp);font-size:12.5px;fill:var(--ink-2)}
.cGrid{stroke:var(--line);stroke-width:1}
.cLeg{display:flex;flex-wrap:wrap;gap:9px 22px;margin-top:16px;padding-top:14px;
      border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-2)}
.cLeg span{display:inline-flex;align-items:center;gap:7px}
.cLeg i{width:11px;height:11px;border-radius:3px;display:inline-block;font-style:normal}

/* Three proportions of one denominator. Plain divs rather than an SVG: there
   is no axis to draw and no scale to compare against, so a track and a fill
   say the whole thing, and they reflow where a fixed viewBox would not. */
.cMeasure{display:grid;gap:20px;margin:4px 0 18px}
.cmRow{min-width:0}
.cmHd{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:8px}
.cmL{font-size:14px;color:var(--ink);font-weight:600}
.cmV{font-size:12.5px;color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.cmTrack{height:10px;border-radius:var(--pill);background:var(--card-3);overflow:hidden}
.cmTrack i{display:block;height:100%;border-radius:var(--pill);background:var(--brand)}
.cmWhy{font-size:12.5px;color:var(--ink-3);margin:7px 0 0;max-width:78ch;line-height:1.5}
.cmAside{color:var(--ink-4)}

/* "and N more" was dead text over a list the page did not have. It has the
   list now, so the phrase is a control. */
.uRest{display:none}
.uOpen .uRest{display:inline}
.uBtn{font-family:var(--disp);font-size:12.5px;font-weight:550;color:var(--brand-ink);background:none;
      border:0;padding:2px 0;margin-top:6px;cursor:pointer;display:inline-block;text-decoration:underline;
      text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--brand) 40%,transparent)}
.uBtn:hover{text-decoration-color:var(--brand)}
.uBtn:focus-visible{outline:none;box-shadow:var(--ring);border-radius:4px}
.uCap{display:block;font-size:12.5px;color:var(--ink-4);margin-top:6px}
.heatScroll{overflow-x:auto}
table.heat{border-collapse:separate;border-spacing:3px;min-width:560px;font-size:12px}
table.heat th{font-size:12px;font-weight:600;color:var(--ink-3);padding:0 6px 8px;text-align:center;white-space:nowrap}
table.heat th.rowh{text-align:left;padding-right:14px}
table.heat td{padding:9px 6px;text-align:center;font-size:12px;color:var(--ink-2);
              background:var(--heat-0);white-space:nowrap;border-radius:6px;font-variant-numeric:tabular-nums}
table.heat td.lit{color:var(--heat-ink)}
table.heat td.rowh{background:none;text-align:left;font-size:12.5px;color:var(--ink-2);padding-right:14px}
.fpDone{padding:64px 0;text-align:center}
.fpDone b{display:block;font-weight:700;font-size:clamp(22px,2.2vw,32px);letter-spacing:-.026em;margin-bottom:10px}
.fpDone span{color:var(--ink-3);font-size:16px}
.t-critical{--tt:var(--er-solid)} .t-high{--tt:var(--wr-solid)} .t-medium{--tt:var(--wr-solid)} .t-low{--tt:var(--na-l)}
@media (max-width:1080px){ .fpMain{grid-template-columns:1fr} .rail{position:static;order:-1} }

/* ============ the ladder ============ */
.stages{margin-top:64px;padding-top:40px;border-top:1px solid var(--line)}
.stagesHead{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,3.4vw,64px);
            align-items:end;margin-bottom:30px}
.stagesHead h2{font-weight:700;font-size:clamp(26px,2.9vw,40px);letter-spacing:-.032em;line-height:1.1;margin:0}
.stagesHead p{font-size:15.5px;line-height:1.6;color:var(--ink-2);margin:0;max-width:62ch;padding-bottom:4px}
.ladder{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr));gap:14px}
.stg{background:var(--card);border:1px solid var(--line);border-radius:var(--r3);
     padding:22px 22px 24px;display:flex;flex-direction:column;gap:9px;position:relative}
.stg.here{border-color:color-mix(in srgb,var(--brand) 45%,transparent);
          box-shadow:var(--sh2),0 0 0 1px color-mix(in srgb,var(--brand) 25%,transparent)}
.stgnum{font-size:13px;font-weight:600;color:var(--ink-4);font-variant-numeric:tabular-nums;margin:0}
.stg.here .stgnum{color:var(--brand-ink)}
.stgname{font-weight:650;font-size:16.5px;letter-spacing:-.018em;line-height:1.25;margin:0}
.stgdesc{font-size:13.5px;line-height:1.55;color:var(--ink-3);margin:0;flex:1}
.stgtag{font-size:12.5px;font-weight:550;color:var(--ink-4);border-top:1px solid var(--line);
        padding-top:11px;margin:2px 0 0}
.stg.here .stgtag{color:var(--brand-ink);border-top-color:color-mix(in srgb,var(--brand) 30%,transparent)}
/* Between "this check" and "not us": the shape of a quotable page is measured,
   whether the sentence is worth quoting is not. A third state, because
   flattening it into either of the other two would be a claim. */
.stg.part{border-color:color-mix(in srgb,var(--brand) 22%,transparent)}
.stg.part .stgtag{color:var(--ink-2)}

/* ============ the close ============ */
.close{margin-top:52px;border-radius:var(--r4);color:#fff;overflow:hidden;
       background:var(--band);
       padding:clamp(30px,3.4vw,52px) clamp(24px,2.6vw,48px);box-shadow:var(--sh3)}
.closeGrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
           gap:clamp(30px,4vw,72px);align-items:start}
.closeStep{font-size:13px;font-weight:600;opacity:.7;margin:0 0 14px}
.scopeLab{font-size:13px;font-weight:600;opacity:.7;margin:0 0 14px}
.scopeNone{opacity:.7;font-size:15px;margin:0}
.closeGrid h3{font-weight:700;font-size:clamp(24px,2.6vw,38px);letter-spacing:-.032em;line-height:1.1;margin:0 0 14px}
.closeGrid > div > p{font-size:16px;line-height:1.6;margin:0;opacity:.86;max-width:56ch}
.scope{border-top:1px solid rgba(255,255,255,.26)}
.scopeRow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:baseline;
          padding:13px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:15px}
.scopeRow span:first-child{font-size:12.5px;opacity:.6;font-variant-numeric:tabular-nums}
.scopeRow em{font-style:normal;font-size:12px;font-weight:550;opacity:.7}
/* Which rows the headline count refers to. Blocking rows carry a marker in the
   gutter and full-strength text; the incomplete group stays deliberately quieter. */
.scopeGrp{font-size:12.5px;font-weight:600;opacity:.7;margin:0;padding:16px 0 7px;
          border-bottom:1px solid rgba(255,255,255,.14)}
.scope > .scopeGrp:first-child{padding-top:9px}
.scopeGrp b{font-weight:600;opacity:1}
.scopeRow-f{position:relative}
.scopeRow-f span:nth-child(2){font-weight:600}
.scopeRow-f em{opacity:.95}
.scopeRow-f::before{content:'';position:absolute;left:-13px;top:calc(50% - 3px);
                    width:6px;height:6px;border-radius:50%;background:#FF9C94}
.closeCta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:30px}
.closeBtn{display:inline-block;font-weight:600;font-size:15.5px;padding:15px 32px;background:#fff;
          color:var(--brand-ink);text-decoration:none;border-radius:var(--pill);
          box-shadow:0 4px 16px -4px rgba(0,0,0,.3);transition:transform .16s var(--ease)}
.closeBtn:hover{transform:translateY(-2px)}
.closeNote{font-size:13.5px;opacity:.75;max-width:34ch;line-height:1.5}
@media (max-width:900px){ .closeGrid{grid-template-columns:1fr} }

/* ============ facts ============ */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
       gap:14px;margin-top:8px;padding-bottom:8px}
.fact{background:var(--card);border:1px solid var(--line);border-radius:var(--r3);
      padding:24px clamp(18px,1.8vw,26px) 26px;box-shadow:var(--sh1)}
.fact b{display:block;font-weight:650;font-size:16px;letter-spacing:-.015em;margin-bottom:8px}
.fact span{font-size:14.5px;line-height:1.6;color:var(--ink-3);font-weight:400}

/* ============ scanning ============ */
.scanning{display:none;padding-block:clamp(56px,7vw,96px)}
.scanning.on{display:block}
.scanning .lab{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600;
               color:var(--brand-ink);background:var(--brand-tint);border-radius:var(--pill);
               padding:6px 14px;margin:0 0 20px}
.scanning h2{font-weight:700;font-size:clamp(28px,3.2vw,46px);line-height:1.1;letter-spacing:-.035em;
             margin:0 0 8px;word-break:break-all}
.scanhead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
          margin-bottom:28px}
.scanhead h2{margin:0}
.elapsed{font-size:14px;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
/* Why a run is taking minutes, said after a minute rather than left to guess. */
.scanwhy{margin:14px 0 0;padding:12px 14px;border-radius:var(--r2);font-size:14px;line-height:1.55;
         background:var(--wr-tint);border:1px solid color-mix(in srgb,var(--wr-solid) 26%,transparent);color:var(--ink-2)}
.scanwhy b{font-weight:650;color:var(--ink)}
.scanwhy i{display:block;font-style:normal;margin-top:4px;font-size:12.5px;color:var(--ink-3)}
/* The alert's chip row, so a list of names is a list rather than a sentence. */
.alert .chips{display:flex;flex-wrap:wrap;gap:6px;margin:11px 0 0}
.alert .chips span{font-size:12px;font-weight:600;padding:4px 10px;border-radius:var(--pill);
                   border:1px solid color-mix(in srgb,var(--er-solid) 30%,transparent);color:var(--er)}
.alert .chips span.rest{border-style:dashed;opacity:.8}
.alert p.fine{margin-top:11px;font-size:13px;color:var(--ink-3)}
.bigtrack{height:10px;background:var(--card-3);border-radius:var(--pill);overflow:hidden}
.bigtrack i{display:block;height:100%;width:0;border-radius:var(--pill);
            background:var(--brand);
            position:relative;overflow:hidden}
.bigtrack i::after{content:"";position:absolute;inset:0;
                   background:transparent;
                   animation:sheen 1.3s linear infinite}
@keyframes sheen{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
/* Discovery has no denominator: how many pages a site has is the thing it is
   working out. It rendered as 0%, which reads as stalled rather than as
   unknown — and discovery is the longest part of a whole-site pass. An
   indeterminate bar says "working, count unknown", which is the truth. */
.bigtrack.ind i{width:38%;margin-left:-38%;animation:indet 1.25s var(--ease) infinite}
@keyframes indet{from{margin-left:-38%}to{margin-left:100%}}
/* With animation suppressed the sliding block would sit off-screen and the
   track would look empty, so give that reader a filled, muted bar instead. */
@media (prefers-reduced-motion:reduce){.bigtrack.ind i{width:100%;margin-left:0;opacity:.4}}

/* The segmented track: one cell per check the scan will run.
   The continuous bar above it cannot show a single check completing — 26 of
   the ~39 steps are the static probes and they land in one concurrent burst,
   so the smooth bar glides once and then sits. One cell per step makes each
   completion its own visible event, which is the only honest way to show that
   something is still happening during the long serial phases. */
.segs{display:flex;gap:3px;margin-top:10px;height:22px;align-items:stretch}
.segs:empty{display:none}
.segs i{flex:1 1 0;min-width:2px;border-radius:2px;background:var(--card-3);
        transition:background .2s var(--ease),transform .2s var(--ease);transform-origin:bottom}
.segs i.f{background:var(--brand)}
/* The cell that just filled, so the eye has something to follow through a
   burst it would otherwise read as one jump. */
.segs i.n{background:var(--brand-2);transform:scaleY(1.18)}

.scanfoot{display:flex;justify-content:space-between;gap:20px;margin-top:14px;font-size:14px;
          color:var(--ink-3);flex-wrap:wrap}
.scanfoot b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}

/* The phase strip. Progress within a phase moves while the grand total is
   stuck, which is most of a scan. */
.phases{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:8px;
        grid-template-columns:repeat(auto-fit,minmax(148px,1fr))}
.phases:empty{display:none}
.phases li{background:var(--card-2);border:1px solid var(--line);border-radius:var(--r2);
           padding:11px 13px;display:flex;flex-direction:column;gap:7px;
           transition:border-color .2s var(--ease),background .2s var(--ease)}
.phases li.on{border-color:var(--brand);background:var(--brand-tint)}
.phases li.ok{opacity:.62}
.phn{display:flex;align-items:center;justify-content:space-between;gap:8px;
     font-size:12.5px;font-weight:600;color:var(--ink-2)}
.phases li.on .phn{color:var(--brand-ink)}
.phc{font-variant-numeric:tabular-nums;font-size:11.5px;color:var(--ink-4);font-weight:600}
.pht{height:3px;background:var(--card-3);border-radius:var(--pill);overflow:hidden}
.pht i{display:block;height:100%;width:0;background:var(--brand);border-radius:var(--pill);
       transition:width .3s var(--ease)}
.phases li.ok .pht i{background:var(--ok)}

/* The live tally and feed. The scan already streams every finished check to
   this page and the page counted them and showed none — 54 results computed
   and a blank screen above them. */
.tally{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}
.tally:empty{display:none}
.tally span{font-size:12.5px;font-weight:600;padding:5px 11px;border-radius:var(--pill);
            font-variant-numeric:tabular-nums;background:var(--na-tint);color:var(--na)}
.tally span b{font-weight:700}
.tally .t-pass{background:var(--ok-tint);color:var(--ok)}
.tally .t-warn{background:var(--wr-tint);color:var(--wr)}
.tally .t-fail{background:var(--er-tint);color:var(--er)}

.feed{list-style:none;margin:14px 0 0;padding:0;border:1px solid var(--line);
      border-radius:var(--r2);overflow:hidden;background:var(--card)}
.feed:empty{display:none}
.feed li{display:flex;align-items:center;gap:11px;padding:10px 14px;font-size:13.5px;
         border-top:1px solid var(--line);animation:feedin .28s var(--ease)}
.feed li:first-child{border-top:0}
@keyframes feedin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.feed .fd{width:7px;height:7px;border-radius:50%;flex:0 0 auto;background:var(--na-l)}
.feed .fd-pass{background:var(--ok)}
.feed .fd-warn{background:var(--wr)}
.feed .fd-fail,.feed .fd-error{background:var(--er)}
.feed .fl{color:var(--ink-2);flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feed .fv{color:var(--ink-4);font-size:12px;font-weight:600;text-transform:uppercase;
          letter-spacing:.04em;flex:0 0 auto}
.feed li.blk .fl{color:var(--er);font-weight:600}

/* ============ verdict ============
   Was a full-bleed colour band with a 132px numeral. Now a card: the score
   keeps the band colour as an accent on a dial, and the text goes back to
   reading as text rather than as reversed-out display type. */
.verdict{display:none;padding-block:8px 0}
.verdict.on{display:block}
.vgrid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,3vw,48px);
       align-items:center;background:var(--card);border:1px solid var(--line);
       border-radius:var(--r4);padding:clamp(24px,3vw,38px);box-shadow:var(--sh2)}
/* The dial: a conic sweep of the band colour on a track, with the number in a
   punched-out centre. Pure CSS — no extra markup, so `#vs` stays where it was.
   Flex rather than grid: `place-items:center` on a grid puts the number and the
   "/100" on two rows, which is not a score, it is a fraction. */
.vscore{position:relative;width:clamp(132px,13vw,168px);aspect-ratio:1;flex:none;
        display:flex;align-items:baseline;justify-content:center;
        border-radius:50%;font-weight:700;font-size:clamp(38px,3.8vw,50px);letter-spacing:-.04em;
        line-height:1;font-variant-numeric:tabular-nums;color:var(--vc);
        background:conic-gradient(var(--vc) calc(var(--vp,0) * 1%),var(--card-3) 0)}
/* The baseline sits where the glyphs sit, not where the circle's middle is, so
   the row is nudged down to optical centre rather than left riding high. */
.vscore::before{content:"";flex:none;width:0;height:calc(50% + .34em)}
.vscore::after{content:"";position:absolute;inset:13px;border-radius:50%;background:var(--card);
               box-shadow:inset 0 1px 3px rgba(15,23,42,.06)}
.vscore > *{position:relative;z-index:1}
.vscore sup{font-size:.34em;font-weight:600;letter-spacing:0;vertical-align:baseline;
            opacity:.55;margin-left:3px;color:var(--ink-3)}
.vright{min-width:0}
.vlab{display:inline-block;font-size:12.5px;font-weight:600;color:var(--brand-ink);
      background:var(--brand-tint);border-radius:var(--pill);padding:5px 12px;margin:0 0 12px}
.vword{font-weight:700;font-size:clamp(24px,2.4vw,36px);line-height:1.1;letter-spacing:-.032em;
       margin:0 0 10px;color:var(--ink)}
.vhost{font-family:var(--mono);font-size:13px;color:var(--ink-3);word-break:break-all;margin:0}
.vnote{font-size:14.5px;color:var(--ink-2);margin:12px 0 0;max-width:62ch;line-height:1.55}
/* The way to take the report away with you, beside the number it is a
   report of rather than inside a fold at the foot of the page. */
.vget{margin:14px 0 0}
.vpdf{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:500;color:var(--brand-ink);
  border:1px solid var(--line);border-radius:var(--r1);padding:8px 13px;text-decoration:none;background:var(--card-3)}
.vpdf:hover{border-color:var(--brand-ink)}
/* The icon comes from icons.js, like every other icon here, rather than a
   glyph in the text font: this rule carried a down arrow written as the CSS
   escape \2193, a tool read \21 as an octal byte, and the button shipped a
   tofu box and the digits 93. Sized and spaced like the other buttons that
   hand over a file. */
.vpdf .ic{width:15px;height:15px;margin:0;color:inherit}
/* Flex, not a fixed three-column grid. The strip holds three cells normally
   and a fourth whenever the site has any agent-readiness endpoint to score —
   which pushed that fourth cell onto a second row on its own. flex:1 1 0
   divides the row evenly however many cells there are. */
.vbars{grid-column:1/-1;display:flex;gap:12px;flex-wrap:wrap;margin-top:4px}
.vbar{flex:1 1 0;min-width:132px;padding:16px 18px;background:var(--card-2);
      border:1px solid var(--line);border-radius:var(--r2)}
.vbar b{display:block;font-weight:700;font-size:clamp(24px,2vw,32px);line-height:1;
        letter-spacing:-.035em;font-variant-numeric:tabular-nums;color:var(--ink)}
.vbar span{font-size:13px;font-weight:550;color:var(--ink-3);display:block;margin-top:8px;line-height:1.3}
/* How much of the discipline the score above was actually measured over. */
.vbar i{font-style:normal;font-size:12px;color:var(--ink-4);display:block;margin-top:3px;line-height:1.3}
.vbar-na b{color:var(--ink-4)}
.vbar-good b{color:var(--ok)}

/* ---- blocking issue, inside the verdict card: it IS the reason for the score ---- */
.vblk{margin-top:20px;background:var(--er-tint);border:1px solid color-mix(in srgb,var(--er-solid) 24%,transparent);
      border-radius:var(--r3);padding:clamp(20px,2.4vw,28px)}
.vblklab{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--er);margin:0 0 16px}
.vblklab::before{content:"";width:8px;height:8px;border-radius:var(--pill);background:var(--er-solid)}
.vblkrow{display:grid;grid-template-columns:minmax(0,24ch) minmax(0,1fr);
         gap:8px clamp(24px,3vw,52px);align-items:baseline;padding:14px 0;
         border-top:1px solid color-mix(in srgb,var(--er-solid) 18%,transparent)}
.vblkrow:first-of-type{border-top:none;padding-top:0}
.vblkname{font-weight:650;font-size:clamp(16px,1.4vw,20px);letter-spacing:-.02em;line-height:1.25;color:var(--ink)}
.vblkmsg{font-size:15px;line-height:1.55;margin:0;color:var(--ink-2);max-width:80ch}
.vblkdet{display:block;font-family:var(--mono);font-size:12.5px;color:var(--ink-3);margin:8px 0 0;line-height:1.55}
.vblkcap{font-size:14.5px;line-height:1.55;margin:16px 0 0;padding-top:15px;color:var(--ink-2);
         border-top:1px solid color-mix(in srgb,var(--er-solid) 18%,transparent);max-width:80ch}
.vblkcap b{font-weight:650;color:var(--ink)}

/* ============ alert ============ */
.alert{display:none;background:var(--er-tint);border:1px solid color-mix(in srgb,var(--er-solid) 24%,transparent);
       border-radius:var(--r3);padding:20px 24px;margin:24px 0 0}
.alert.on{display:block}
/* In the hero the alert inherits centred text; a paragraph of explanation reads left-aligned. */
.heroTop .alert{text-align:left;margin:18px auto 0;max-width:820px}
.alert b{font-weight:650;font-size:16.5px;display:block;margin-bottom:6px;color:var(--ink)}
.alert p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-2);max-width:70ch}

/* ============ priorities ============ */
.prio{display:none;padding-block:56px 12px}
.prio.on{display:block}
.seclab{font-size:13px;font-weight:600;color:var(--brand-ink);margin:0 0 14px}
.prio h2{font-weight:700;font-size:clamp(28px,3vw,44px);line-height:1.1;letter-spacing:-.032em;margin:0 0 14px}
.prio .lede{font-size:16.5px;line-height:1.6;color:var(--ink-2);max-width:58ch;margin:0;padding-bottom:6px}
.priohead{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(28px,4vw,72px);
          align-items:end;margin-bottom:32px}
.plist{display:grid;gap:12px}
@media (min-width:1400px){ .plist{grid-template-columns:1fr 1fr} }
.pitem{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:6px 16px;align-items:baseline;
       background:var(--card);border:1px solid var(--line);border-radius:var(--r3);
       padding:20px 22px;cursor:pointer;transition:.18s var(--ease);box-shadow:var(--sh1)}
.pitem:hover{border-color:var(--line-2);box-shadow:var(--sh2);transform:translateY(-2px)}
.pnum{font-size:13.5px;font-weight:600;color:var(--ink-4);font-variant-numeric:tabular-nums}
.pname{font-weight:650;font-size:clamp(18px,1.4vw,22px);line-height:1.25;letter-spacing:-.024em}
.ptag{font-size:12px;font-weight:600;color:var(--onsolid);background:var(--pc);
      padding:5px 11px;border-radius:var(--pill);white-space:nowrap;align-self:center}
.pwhy{grid-column:2/-1;font-size:14.5px;line-height:1.6;color:var(--ink-3);max-width:none}

/* ============ results ============ */
.results{display:none;padding-block:36px 90px}
.results.on{display:block}
.rtop{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:26px}
.rtop h2{font-weight:700;font-size:clamp(26px,2.8vw,40px);line-height:1.1;letter-spacing:-.032em;margin:0}
.controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ctl{font-family:var(--disp);font-size:13.5px;font-weight:550;background:var(--card);
     border:1px solid var(--line-2);color:var(--ink-2);padding:8px 15px;border-radius:var(--pill);
     cursor:pointer;transition:.16s var(--ease)}
.ctl:hover{border-color:var(--brand);color:var(--brand-ink)}
.ctl[aria-pressed=true]{background:var(--brand);border-color:var(--brand);color:#fff;
                        box-shadow:0 3px 10px -3px rgba(90,85,224,.6)}
.ctl:focus-visible{outline:none;box-shadow:var(--ring)}
.ctl.sep{margin-left:12px}

.shared{background:var(--brand-tint);border:1px solid color-mix(in srgb,var(--brand) 24%,transparent);
        border-radius:var(--r2);padding:14px 18px;margin-bottom:22px;font-size:14.5px;color:var(--ink-2)}
.shared b{color:var(--ink)}
.shared a{color:var(--brand-ink);font-weight:550}
.allNote{font-size:15px;line-height:1.6;color:var(--ink-2);margin:0 0 24px;max-width:88ch}
.allNote b{color:var(--ink);font-weight:650}
.sec{margin-bottom:44px;scroll-margin-top:92px}
.sechead{display:flex;align-items:baseline;gap:18px;padding-bottom:14px;
         border-bottom:1px solid var(--line);margin-bottom:14px}
.secnum{font-size:13.5px;color:var(--ink-4);font-variant-numeric:tabular-nums}
.sechead h3{font-weight:650;font-size:clamp(19px,1.6vw,25px);letter-spacing:-.024em;margin:0;flex:1;line-height:1.25}
.secct{display:flex;gap:14px;align-items:center;font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}
.secct b{display:inline-flex;align-items:center;gap:6px;font-weight:550;color:var(--ink-3)}
.secct b::before{content:"";width:8px;height:8px;border-radius:var(--pill);background:var(--sk)}
.secct b.zero{opacity:.34}
.gsep{display:flex;align-items:center;gap:12px;font-weight:650;font-size:14.5px;color:var(--ink-2);
      margin:28px 0 12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.gsep:first-child{margin-top:0}
.gsep em{font-style:normal;font-weight:450;font-size:13px;color:var(--ink-4);margin-left:auto}

/* ---- honest limits of a file scan ---- */
/* The branch map. Colours come from the same variables every other pane uses,
   so it inherits the theme rather than carrying its own palette — a diagram
   with hardcoded colours is the one thing that breaks when the theme changes. */
.mapwrap{margin-top:44px;border-top:1px solid var(--line);padding-top:30px}
.maphead h3{font-weight:650;font-size:clamp(17px,1.5vw,21px);letter-spacing:-.02em;margin:0 0 6px}
.maphead p{color:var(--ink-2);font-size:14.5px;line-height:1.6;margin:0 0 16px}
.gmap{width:100%;height:auto;max-width:680px;display:block;border:1px solid var(--line);border-radius:10px}
.gmap .mbg{fill:var(--bg-2,transparent)}
/* Reference cities are scaffolding, not data: they must never read as louder
   than a branch pin, or the map appears to show places the site never claimed. */
.gmap .mref circle{fill:var(--ink-3);opacity:.34}
.gmap .mref text{fill:var(--ink-3);opacity:.62;font-size:10.5px;font-family:inherit}
.gmap .mpin circle{fill:var(--ok);stroke:var(--bg);stroke-width:1.5;opacity:.85}
.gmap .mpin.bad circle{fill:var(--er);opacity:1}
.gmap .mpin:hover circle{opacity:1}
/* A highlighted state is a soft region, deliberately quieter than a pin: it
   says "somewhere in here", and it must never be mistaken for a position. */
.gmap .mstate circle{fill:var(--ok);opacity:.13;stroke:var(--ok);stroke-opacity:.35;stroke-width:1}
.gmap .mstate.approx circle{stroke-dasharray:4 3}
.gmap .mstate .sn{fill:var(--ink);font-size:13px;font-weight:650;text-anchor:middle;font-family:inherit}
.gmap .mstate .sl{fill:var(--ink-3);font-size:10.5px;text-anchor:middle;font-family:inherit}
.gmap .mstate:hover circle{opacity:.22}
.maplegend{display:flex;gap:18px;flex-wrap:wrap;margin:10px 0 0;font-size:13px;color:var(--ink-3)}
.maplegend span{display:inline-flex;align-items:center;gap:6px}
.maplegend i{width:11px;height:11px;border-radius:50%;display:inline-block;flex:none}
.maplegend .k-pin{background:var(--ok)}
.maplegend .k-state{background:var(--ok);opacity:.22;border:1px dashed var(--ok)}
/* The land. Every state is drawn so a shape is recognisable among its
   neighbours; the ones the business is in are filled. */
.gmap .mland{fill:var(--ink-3);fill-opacity:.10;stroke:var(--line);stroke-width:.8;stroke-opacity:.9}
.gmap .mland.on{fill:var(--ok);fill-opacity:.24;stroke:var(--ok);stroke-opacity:.7;stroke-width:1.2;cursor:pointer}
.gmap .mland.on.sel{fill-opacity:.4;stroke-width:2}
/* The graticule, now scale rather than orientation — quiet, and behind the land. */
.gmap .mgrid{stroke:var(--line);stroke-opacity:.3;stroke-width:1}
.gmap .mgl{fill:var(--ink-3);opacity:.45;font-size:9.5px;text-anchor:middle;font-family:inherit}
.gmap .mgl.lat{text-anchor:end}
.gmap .mstate,.gmap .mpin{cursor:pointer}
.gmap .mpin.sel circle{stroke:var(--ink);stroke-width:2.5;opacity:1}
.gmap .mstate.sel circle{opacity:.3;stroke-opacity:.9;stroke-width:2}
/* The address list */
.maplist{margin:18px 0 0;max-width:76ch}
.maplist summary{cursor:pointer;font-size:14px;color:var(--ink-2);padding:6px 0}
.maplist ul{list-style:none;margin:8px 0 0;padding:0}
.mloc{display:flex;gap:10px;align-items:flex-start;padding:9px 10px;border-radius:8px;
      border:1px solid transparent;cursor:pointer}
.mloc:hover{background:var(--bg-2,rgba(127,127,127,.06))}
.mloc.sel{border-color:var(--ok);background:var(--bg-2,rgba(127,127,127,.08))}
.mloc:focus-visible{outline:2px solid var(--ok);outline-offset:2px}
.mloc .mdot{width:9px;height:9px;border-radius:50%;background:var(--ok);margin-top:5px;flex:none}
.mloc.nopin .mdot{background:none;border:2px dashed var(--ok);opacity:.7}
.mloc.bad .mdot{background:var(--er)}
.mloc .mtxt{display:flex;flex-direction:column;gap:2px;min-width:0}
.mloc b{font-size:14.5px;font-weight:600}
.mloc .madr{font-size:13.5px;color:var(--ink-2);line-height:1.5}
.mloc .madr.none{color:var(--ink-3);font-style:italic}
.mloc .mmeta{font-size:12.5px;color:var(--ink-3)}
.mapempty{color:var(--ink-2);font-size:14.5px;line-height:1.65;margin:0;max-width:76ch}
/* The geocoded point is hollow, so it reads as "where this address actually is"
   rather than as another branch. */
.gmap .mgeo{fill:none;stroke:var(--wr);stroke-width:2}
.gmap .mdrift{stroke:var(--wr);stroke-width:1.5;stroke-dasharray:4 3;opacity:.8}
.mapnotes{margin:16px 0 0;padding:0 0 0 20px;max-width:76ch}
.mapnotes li{color:var(--ink-2);font-size:14.5px;line-height:1.65;margin:0 0 8px}
.mapok{color:var(--ink-3);font-size:14.5px;line-height:1.6;margin:14px 0 0}
.limits{margin-top:52px;border-top:1px solid var(--line);padding-top:34px}
.limits h3{font-weight:650;font-size:clamp(18px,1.7vw,24px);letter-spacing:-.024em;margin:0 0 8px}
.limits > p{color:var(--ink-2);font-size:15.5px;line-height:1.6;margin:0 0 22px;max-width:76ch}
.lgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,262px),1fr));gap:12px}
.litem{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);padding:18px 20px}
.litem b{display:block;font-weight:650;font-size:14.5px;margin-bottom:5px}
.litem span{display:block;font-size:13.5px;line-height:1.55;color:var(--ink-3)}
/* Why an item is absent, on the item. The local pane reuses this grid to list
   what it does NOT measure, and with the roadmap block above styled identically
   the two read the same — as a backlog. They are opposites: one is work queued,
   this is a boundary. The tag says which, on every row. */
.litag{display:inline-block;margin-top:10px;font-size:12px;font-weight:550;color:var(--ink-3);
       background:var(--card-3);border-radius:var(--pill);padding:3px 10px}

/* ---- environment panel ---- */
.env{border:1px solid var(--line);border-radius:var(--r3);background:var(--card);
     margin-bottom:26px;overflow:hidden;box-shadow:var(--sh1)}
.envHead{padding:20px clamp(18px,1.8vw,24px) 16px;border-bottom:1px solid var(--line)}
.envLab{font-size:13px;font-weight:600;color:var(--ink-3);margin:0 0 6px}
.envNote{font-size:13.5px;color:var(--ink-3);margin:0;max-width:78ch;line-height:1.55}
.envGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,168px),1fr));gap:1px;background:var(--line)}
.envItem{background:var(--card);padding:14px clamp(14px,1.4vw,20px) 16px;min-width:0}
.envK{font-size:12px;font-weight:600;color:var(--ink-4);margin:0 0 5px}
.envV{font-size:14px;font-weight:550;color:var(--ink);margin:0;word-break:break-word;line-height:1.45}
.envV.good{color:var(--ok)} .envV.warnv{color:var(--wr)} .envV.badv{color:var(--er)}
.envSub{font-size:12px;color:var(--ink-4);margin:3px 0 0;line-height:1.4}
.envBots{padding:16px clamp(14px,1.4vw,20px) 18px;border-top:1px solid var(--line)}
.envBotRow{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.envBot{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:550;
        padding:5px 12px;border-radius:var(--pill);border:1px solid var(--eb);color:var(--eb)}
.envBot em{font-style:normal;opacity:.7;font-weight:400}
.envBot.ok{--eb:color-mix(in srgb,var(--ok-solid) 45%,transparent);color:var(--ok);background:var(--ok-tint)}
.envBot.bad{--eb:color-mix(in srgb,var(--er-solid) 45%,transparent);color:var(--er);background:var(--er-tint)}
.envBot.warn{--eb:color-mix(in srgb,var(--wr-solid) 45%,transparent);color:var(--wr);background:var(--wr-tint)}

/* ---- the AEO panel: always rendered, always first, pass or fail ---- */
.aeop{border:1px solid var(--line);border-radius:var(--r3);background:var(--card);
      margin-bottom:38px;overflow:hidden;box-shadow:var(--sh2)}
.aeophead{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px clamp(24px,3vw,56px);
          align-items:start;padding:26px clamp(20px,2vw,28px) 22px;border-bottom:1px solid var(--line);
          background:var(--card)}
.aeopeyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;
             color:var(--brand-ink);background:var(--brand-tint);border-radius:var(--pill);
             padding:5px 12px;margin:0 0 12px}
.aeopeyebrow::before{content:"";width:6px;height:6px;border-radius:var(--pill);background:var(--brand)}
.aeoptitle{font-weight:700;font-size:clamp(21px,2vw,30px);letter-spacing:-.028em;margin:0;line-height:1.15}
.aeopscore{text-align:right;font-size:13px;color:var(--ink-3);line-height:1.6;max-width:22ch}
.aeopscore b{display:block;font-weight:700;font-size:clamp(34px,3.2vw,48px);line-height:1;
             letter-spacing:-.04em;color:var(--as);font-variant-numeric:tabular-nums}
.aeopblurb{grid-column:1/-1;font-size:15px;line-height:1.6;color:var(--ink-2);margin:10px 0 0;max-width:82ch}
.aeop .row{border-radius:0;border-left:none;border-right:none;box-shadow:none;margin:0}
.aeop .row:last-child{border-bottom:none}
.aeop .rh{padding-left:clamp(16px,1.6vw,24px)}

/* ---- secondary disciplines read as supporting material ---- */
.also{margin-top:8px}
.alsohead{font-weight:650;font-size:clamp(18px,1.7vw,24px);letter-spacing:-.024em;margin:0 0 6px}
.alsosub{font-size:15px;color:var(--ink-2);margin:0 0 24px;max-width:74ch;line-height:1.6}

/* ---- discipline groups ---- */
.dgnote{font-size:14.5px;line-height:1.6;color:var(--ink-3);margin:0 0 30px;padding-bottom:20px;
        border-bottom:1px solid var(--line);max-width:74ch}
.dgrp{margin-bottom:44px}
.dgrp#g-aeo .dgtitle{font-size:clamp(21px,2vw,30px)}
.dgrp:not(#g-aeo) .dgtitle{color:var(--ink-2)}
.dghead{border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:14px;
        display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 28px;align-items:end}
.dgrp#g-aeo .dghead{border-bottom-color:var(--line-2)}
.dgtitle{font-weight:650;font-size:clamp(19px,1.7vw,26px);letter-spacing:-.024em;margin:0;line-height:1.2}
.dgscore{font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.dgscore b{font-weight:700;font-size:26px;color:var(--ink);letter-spacing:-.03em;display:block;line-height:1}
.dgblurb{grid-column:1/-1;font-size:14.5px;line-height:1.6;color:var(--ink-3);margin:6px 0 0;max-width:80ch}

/* A tab with nothing to say. Not hidden — a reader who scanned a shop last
   week should still find the tab where it was, and "n/a" is itself an answer. */
.mode.dim{opacity:.5}
.dtag{font-size:12px;font-weight:600;padding:3px 10px;border-radius:var(--pill);
      border:1px solid var(--dtc);color:var(--dtc);white-space:nowrap}
.d-aeo{--dtc:color-mix(in srgb,var(--brand) 60%,transparent);color:var(--brand-ink)}
.d-seo{--dtc:var(--line-2)} .d-geo{--dtc:var(--line-2)}
.d-agent{--dtc:var(--line-2)} .d-hygiene{--dtc:var(--line-2)}
.aeorel{font-size:13px;color:var(--ink-4);margin:12px 0 0}

/* ---- mode switch: a segmented pill, not a row of boxes ---- */
.modes{display:inline-flex;gap:4px;background:var(--card-3);border-radius:var(--pill);
       padding:4px;margin-bottom:28px;max-width:100%;overflow-x:auto}
.mode{font-family:var(--disp);font-weight:550;font-size:14px;padding:9px 18px;background:none;
      border:none;border-radius:var(--pill);color:var(--ink-3);cursor:pointer;white-space:nowrap;
      transition:.16s var(--ease)}
.mode:hover{color:var(--ink)}
.mode[aria-pressed=true]{background:var(--card);color:var(--ink);font-weight:600;box-shadow:var(--sh1)}
.mode:focus-visible{outline:none;box-shadow:var(--ring)}
.mode em{font-style:normal;font-size:12.5px;opacity:.65;margin-left:7px;font-variant-numeric:tabular-nums}
.mode i{display:none}

.pane{display:none}
.pane.on{display:block}

/* ---- action list ---- */
.acts{display:grid;gap:12px}
.act{background:var(--card);border:1px solid var(--line);border-radius:var(--r3);
     box-shadow:var(--sh1);overflow:hidden;position:relative;transition:.18s var(--ease)}
.act::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--at)}
.act:hover{box-shadow:var(--sh2)}
.act.open{box-shadow:var(--sh2)}
.ah{display:grid;grid-template-columns:34px minmax(0,1fr) auto auto 20px;gap:4px 14px;align-items:center;
    padding:20px 22px 20px 22px;cursor:pointer;user-select:none;transition:.15s}
.ah:hover{background:var(--card-2)}
.anum{font-size:13.5px;font-weight:600;color:var(--ink-4);font-variant-numeric:tabular-nums}
.aname{font-weight:650;font-size:clamp(17px,1.35vw,22px);letter-spacing:-.022em;line-height:1.25;margin:0}
.asum{grid-column:2/-1;font-size:15px;line-height:1.55;color:var(--ink-3);margin:2px 0 0;max-width:86ch}
.atag{font-size:12px;font-weight:600;color:var(--onsolid);background:var(--at);
      padding:5px 11px;border-radius:var(--pill);white-space:nowrap}
.acv{font-size:12px;color:var(--ink-4);transition:transform .22s var(--ease);justify-self:end}
.act.open .acv{transform:rotate(90deg)}
.abody{display:none;padding:0 22px 26px 22px;grid-template-columns:34px minmax(0,1fr);gap:0 14px}
.act.open .abody{display:grid}
.abody > div{grid-column:2}
.afixlab{font-size:12.5px;font-weight:600;color:var(--ink-3);margin:0 0 9px}
.afix{background:var(--card-2);border:1px solid var(--line);border-left:3px solid var(--at);
      border-radius:var(--r2);padding:16px 20px;font-size:15px;line-height:1.6;color:var(--ink);max-width:74ch}
.awhere{font-size:13px;color:var(--ink-4);margin:14px 0 0}
/* The paste-ready change, shown on a row rather than only in the ticket. Sits
   under the prose it implements, indented by a rule so the two read as one
   instruction and not as two competing ones. */
.rowFix{margin:18px 0 0;padding-left:16px;border-left:2px solid var(--line)}
.rowFix .ml{border-bottom:none;padding-bottom:0;margin-bottom:10px;color:var(--brand-ink)}
.rowFix .parts{gap:12px}
.rowFix .tkWhere{margin-bottom:12px}
.rowFix .addBtn{margin-top:14px}
.rowFix .codewrap pre{font-size:12px;max-height:340px;overflow:auto}
/* Said out loud, because an absent code block is indistinguishable from a
   missing feature. */
.noSnip{font-size:13.5px;line-height:1.55;color:var(--ink-4);margin:14px 0 0;
        padding-left:16px;border-left:2px solid var(--line);max-width:70ch}

/* ---- secondary disclosure ---- */
.disc{margin-top:28px;border-top:1px solid var(--line)}
.dsum{display:flex;align-items:center;gap:14px;width:100%;background:none;border:none;padding:18px 0;
      cursor:pointer;font-family:var(--disp);font-size:15.5px;font-weight:600;color:var(--ink-2);
      text-align:left;transition:.14s}
.dsum:hover{color:var(--ink)}
.dsum .dc{font-size:13px;font-weight:450;color:var(--ink-4);margin-left:auto}
.dsum .dv{font-size:12px;color:var(--ink-4);transition:transform .22s var(--ease)}
.disc.open .dsum .dv{transform:rotate(90deg)}
.dbody{display:none}
.disc.open .dbody{display:block}
/* The full check list, one click down inside the first tab. Given a card of its
   own so it reads as a drawer rather than as the page trailing off. */
.allDisc{margin-top:40px;border-top:none;background:var(--card);border:1px solid var(--line);
         border-radius:var(--r3);padding:4px clamp(18px,2vw,26px);box-shadow:var(--sh1)}
.allDisc .dsum{font-size:16px;color:var(--ink)}
.allDisc .dbody{padding-bottom:24px}
.allDisc .rtop{margin-top:4px}
/* Nothing to report is still something to say, and it was said in grey-on-grey
   at the size of a footnote — so a reader looking for the location section
   found what looked like page furniture. It is a finding: either the business
   has no premises, in which case this closes the question, or it has one and
   has not published it, which is the whole of local search. Given a marker, a
   tint and an icon so it reads as a result rather than as filler. */
.geoNone{position:relative;margin:32px 0 0;padding:20px 24px 20px 56px;
         background:var(--brand-tint);border:1px solid color-mix(in srgb,var(--brand) 26%,transparent);
         border-radius:var(--r3);font-size:15px;line-height:1.6;color:var(--ink-2);max-width:84ch}
.geoNone::before{content:"";position:absolute;left:20px;top:21px;width:20px;height:20px;
  background:var(--brand) no-repeat center/13px 13px;border-radius:var(--pill);
  -webkit-mask:no-repeat center/20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11'/%3E%3C/svg%3E");
          mask:no-repeat center/20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11'/%3E%3C/svg%3E")}
.geoNone::after{content:"i";position:absolute;left:20px;top:21px;width:20px;height:20px;
  display:grid;place-items:center;font-style:italic;font-weight:700;font-size:12px;color:#fff}
.geoNone b{color:var(--ink);font-weight:650;display:block;margin-bottom:4px;font-size:16px}

/* The setup, in one line, above everything. The grid it summarises is a
   disclosure directly beneath. */
/* The setup, open on the page. The one-line answer sits in the panel header so
   it arrives before the nineteen cells rather than instead of them. */
.envLine{margin:8px 0 0;font-size:16px;line-height:1.55;display:flex;flex-wrap:wrap;
         align-items:baseline;gap:4px 12px}
.envSum > span{color:var(--ink);font-weight:600}
.envSum b{font-weight:600;margin-left:8px}
.envSum b.good{color:var(--ok)}
.envSum b.badv{color:var(--er)}
/* A section with nothing outstanding says so, rather than showing nine rows
   that all say "fine". */
.allDone{margin:0;padding:22px clamp(16px,1.8vw,24px);font-size:15px;line-height:1.6;color:var(--ink-3)}
.allDone b{display:block;color:var(--ink);font-weight:650;margin-bottom:3px}

/* "Open all", beside a list that no longer opens itself. */
.alsoTop{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap}
.expandAll{font-family:var(--disp);font-size:13.5px;font-weight:550;background:var(--card);
           border:1px solid var(--line-2);color:var(--ink-2);padding:7px 15px;border-radius:var(--pill);
           cursor:pointer;transition:.16s var(--ease);white-space:nowrap}
.expandAll:hover{border-color:var(--brand);color:var(--brand-ink);background:var(--brand-tint)}
.expandAll:focus-visible{outline:none;box-shadow:var(--ring)}
.aeophead .expandAll{grid-column:1/-1;justify-self:start;margin-top:14px}

/* ---- all-clear state ---- */
.clear{padding:64px 24px;text-align:center;background:var(--card);border:1px solid var(--line);
       border-radius:var(--r4);box-shadow:var(--sh1)}
.clear b{display:block;font-weight:700;font-size:clamp(22px,2.2vw,32px);letter-spacing:-.026em;margin-bottom:10px}
.clear span{color:var(--ink-3);font-size:16px}

/* ---- rows ---- */
.row{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);
     margin-bottom:8px;overflow:hidden;transition:.16s var(--ease)}
.row:hover{border-color:var(--line-2)}
.row.open{box-shadow:var(--sh1)}
.row.hide{display:none}
.rh{display:grid;grid-template-columns:14px minmax(0,28ch) minmax(0,1fr) 20px;gap:6px 22px;
    align-items:center;padding:14px 18px;cursor:pointer;user-select:none}
.rh:hover{background:var(--card-2)}
.badge{display:block;width:9px;height:9px;border-radius:var(--pill);background:var(--tone);justify-self:center}
.rpath{font-size:14.5px;font-weight:600;color:var(--ink);word-break:break-word;line-height:1.4}
.rdtl{font-size:14.5px;line-height:1.55;color:var(--ink-3);max-width:76ch}
.rimp{display:none}
.rcv{font-size:12px;color:var(--ink-4);transition:transform .22s var(--ease);justify-self:end}
.row.open .rcv{transform:rotate(90deg)}
/* expanded: why and fix sit side by side so the full width is used */
.more{display:none;grid-template-columns:1fr 1fr;gap:0 36px;padding:4px 18px 24px 52px}
.row.open .more{display:grid}
.mcol{min-width:0}
.mcol.wide{grid-column:1/-1;margin-top:24px}
.ml{font-size:12.5px;font-weight:600;color:var(--ink-3);margin:0 0 10px;padding-bottom:8px;
    border-bottom:1px solid var(--line)}
.mt{font-size:15px;line-height:1.65;color:var(--ink-2);margin:0;max-width:66ch}
.fixbox{background:var(--card-2);border:1px solid var(--line);border-left:3px solid var(--tone);
        border-radius:var(--r2);padding:16px 20px;font-size:15px;line-height:1.6;color:var(--ink);max-width:66ch}
.botwrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r2);background:var(--card)}
table.bot{border-collapse:collapse;width:100%;min-width:560px;font-size:13.5px}
table.bot th{font-size:12.5px;font-weight:600;color:var(--ink-3);text-align:left;padding:11px 15px;
             border-bottom:1px solid var(--line);white-space:nowrap;background:var(--card-2)}
table.bot td{padding:11px 15px;border-bottom:1px solid var(--line);vertical-align:top}
table.bot tr:last-child td{border-bottom:none}
table.bot tr.row-no{background:var(--er-tint)}
table.bot tr.row-edge{background:var(--wr-tint)}
.bp{color:var(--ink);font-weight:600}
.bu{font-family:var(--mono);font-size:12px;color:var(--ink-2);white-space:nowrap}
.bc{display:inline-flex;align-items:center;gap:6px;font-size:13px;white-space:nowrap;font-weight:600}
.bc.yes{color:var(--ok)} .bc.no{color:var(--er)} .bc.na{color:var(--ink-4);font-weight:450}
.brule{display:block;font-family:var(--mono);font-size:11px;color:var(--ink-4);margin-top:4px}
.lst{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.lst li{font-size:12.5px;background:var(--card-2);border:1px solid var(--line);color:var(--ink-2);
        padding:5px 11px;border-radius:var(--pill)}

/* ---- tier 1 · immediate action ---- */
.t-fail{--tone:var(--er-solid);border-color:color-mix(in srgb,var(--er-solid) 32%,transparent)}
.t-fail .rpath{font-weight:650}
.t-fail .rimp{color:var(--er);font-weight:600}
/* ---- tier 2 · recommended ---- */
.t-warn{--tone:var(--wr-solid);border-color:color-mix(in srgb,var(--wr-solid) 28%,transparent)}
/* ---- tier 3 · passing: quiet ---- */
.t-pass{--tone:var(--ok-solid)}
.t-pass .rh{padding-top:12px;padding-bottom:12px}
.t-pass .rdtl{color:var(--ink-3);font-size:14px}
/* ---- tier 4 · nothing to do: recessive ---- */
.t-missing,.t-info,.t-error,.t-skipped{--tone:var(--line-2);background:var(--card-2)}
.t-missing .rh,.t-info .rh,.t-error .rh,.t-skipped .rh{padding-top:11px;padding-bottom:11px}
.t-missing .rpath,.t-info .rpath,.t-error .rpath,.t-skipped .rpath{color:var(--ink-2);font-weight:550}
.t-missing .rdtl,.t-info .rdtl,.t-error .rdtl,.t-skipped .rdtl{color:var(--ink-4);font-size:14px}

.sp{display:inline-block;width:12px;height:12px;border:2px solid currentColor;border-top-color:transparent;
    border-radius:50%;animation:spin .7s linear infinite;vertical-align:-2px;margin-right:9px}
@keyframes spin{to{transform:rotate(360deg)}}
.rise{animation:rise .5s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

@media (max-width:1280px){
  .priohead{grid-template-columns:1fr;gap:16px}
}
@media (max-width:1080px){
  .hero{grid-template-columns:1fr;gap:36px}
  .vgrid{grid-template-columns:1fr;justify-items:start;text-align:left}
}
@media (max-width:900px){
  .wrap{padding:0 20px}
  .top .wrap{height:auto;flex-wrap:wrap;padding-top:14px;padding-bottom:14px;gap:12px}
  form{max-width:none;flex:1 1 100%;margin-left:0}
  .hero{padding-block:44px 48px}
  .stagesHead{grid-template-columns:1fr;gap:14px}
  .pitem{grid-template-columns:1fr;gap:10px}
  .pitem .pwhy,.pitem .ptag{grid-column:1}
  .ptag{justify-self:start}
  .rh{grid-template-columns:1fr 24px;gap:8px}
  .rst,.rpath,.rdtl{grid-column:1}
  .rcv{grid-row:1;grid-column:2}
  .more{grid-template-columns:1fr;gap:8px;padding-left:18px}
  .fpTop{grid-template-columns:1fr}
  .fpHero{grid-column:1;grid-row:auto;text-align:left}
  .ah{grid-template-columns:minmax(0,1fr) auto 20px}
  .anum{display:none}
  .abody{grid-template-columns:1fr;padding-left:22px}
  .abody > div{grid-column:1}
}
.acct{display:flex;align-items:center;gap:12px;font-size:13px;white-space:nowrap}
/* No full-page cover here, unlike the two account pages: this one is useful the
   moment it paints — the address field works, and Scan waits for the answer on
   its own. Only the corner is pending, so only the corner says so. A cover over
   a working page would be a spinner in front of the thing it is loading. */
/* The way back to the account, from a report. The address beside it is a link
   to the same place, but it reads as a label rather than a control, and after a
   scan this page is the furthest point in the flow with nothing pointing home. */
.home{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  border:1px solid var(--line-2);background:var(--card);text-decoration:none}
.home::before{content:"";width:15px;height:15px;background:currentColor;color:var(--ink-3);
  -webkit-mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5.5 9.5V20h13V9.5'/%3E%3Cpath d='M9.5 20v-6h5v6'/%3E%3C/svg%3E");
          mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5.5 9.5V20h13V9.5'/%3E%3Cpath d='M9.5 20v-6h5v6'/%3E%3C/svg%3E")}
.home:hover{border-color:var(--ink-4)}
.home:hover::before{color:var(--ink)}
.acctspin{width:14px;height:14px;border-radius:50%;border:2px solid var(--line-2);
  border-top-color:var(--brand);animation:acctspin .7s linear infinite}
@keyframes acctspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .acctspin{animation-duration:2.4s} }
.acct a{color:var(--ink-2);text-decoration:none;transition:color .15s ease}
.acct a:hover{color:var(--ink)}
.acct a.primary{color:var(--brand-ink);font-weight:600}
.acct b{font-weight:600;color:var(--ink-2)}
.acct .em{color:var(--ink-3)}
@media (max-width:820px){.acct{display:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* ==========================================================================
   Shared design. Everything above was written against this page's own
   palette; the tokens now come from app.css, and these rules carry the
   rest of the house style -- the serif on headlines, the mono eyebrows, flat
   buttons, small radii -- onto the components that have their own rules.
   ========================================================================== */
.wrap.topnav{padding-bottom:0}
/* The hidden attribute must win over the display rules these two carry. */
#f[hidden],.nav .links[hidden]{display:none!important}
/* This page's .sp is its button spinner; in the band it is the spacer the
   shared nav expects, so the spinner's shape is taken off it there. */
.nav .sp{width:auto;height:auto;border:0;border-radius:0;animation:none;margin:0}
.topline{position:relative;left:0;right:0;bottom:auto;height:2px;background:transparent}
.topline i{display:block;height:100%;width:0;border-radius:0;background:var(--wr);transition:width .3s var(--ease)}
/* Signed out, the corner is the same Account group every public page has;
   signed in, its children sit in the band directly and take the app's
   order: name, cog, Sign out, theme. */
.nav .acct{display:contents}
.nav .acctspin{border-color:var(--band-line);border-top-color:var(--band-ink)}

/* Eyebrows: small mono capitals in the amber, as on every other page. */
.kicker,.lab,.fpStage,.stgnum,.vlab,.rlab{font:500 11.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--wr-ink)}

/* Two drawings rather than two more columns of prose. Same line weight as the
   icon set, coloured from the tokens so they follow the theme without a second
   copy, and sized by the page rather than by a fixed pixel width. */
.fig{display:block;width:100%;height:auto;margin:0 auto clamp(8px,1.4vh,18px);max-width:920px}
.cycNode circle{fill:var(--card);stroke:var(--line-2);stroke-width:2}
.cycNum text{fill:var(--brand-ink);font:500 23px/1 var(--serif);text-anchor:middle;dominant-baseline:central}
.cycLab{fill:var(--ink-4);font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;text-anchor:middle}

.shot{margin:0 auto clamp(18px,2.6vh,30px);max-width:980px}
.shot img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:var(--r3)}
.shot figcaption{margin:10px 2px 0;font:500 12px/1.5 var(--mono);letter-spacing:.04em;color:var(--ink-4)}
/* Steps one to four: one continuous form, because that is what steps are. */
.trSolid{fill:color-mix(in srgb,var(--brand) 15%,transparent);stroke:var(--brand);stroke-width:2;stroke-linejoin:round}
/* The fifth is left open on purpose. It is the one that does not happen on
   your website, and an unclosed dashed outline says so before the label does. */
.trOpen{fill:none;stroke:var(--line-2);stroke-width:2;stroke-dasharray:7 6;stroke-linejoin:round}
.trBase{fill:none;stroke:var(--line);stroke-width:2}
.trName{fill:var(--ink);font:500 19px/1 var(--serif);letter-spacing:-.01em;transition:fill .2s ease}
.trName.on{fill:var(--brand-ink)}
.trHi{fill:var(--brand);fill-opacity:.22;pointer-events:none;transition:x .3s var(--ease-out),y .3s var(--ease-out),height .3s var(--ease-out)}
.trHit{fill:transparent;cursor:pointer}
.stairSay{display:flex;gap:16px;align-items:baseline;max-width:760px;margin:10px auto 0;padding:14px 18px;border:1px solid var(--line);border-radius:var(--r2);background:var(--card);font-size:15px;line-height:1.5;color:var(--ink-2)}
.stairSay b{flex:none;font:500 18px/1.3 var(--serif);color:var(--ink);min-width:8ch}
@media (max-width:600px){ .stairSay{flex-direction:column;gap:4px} }
.span path{fill:none;stroke:var(--brand);stroke-width:1.5;stroke-linecap:round}
.span text{fill:var(--brand-ink);font:500 11px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;text-anchor:middle}
.span.off path{stroke:var(--line-2)}
.span.off text{fill:var(--ink-4)}
@media (max-width:700px){
  .trName{font-size:26px}
  .span text{font-size:15px}
  .cycLab{font-size:16px}
}
.kicker::before{display:none}
.vlab{display:block;background:none;border:0;padding:0;margin:0 0 8px}
.rlab{display:flex;align-items:center;gap:10px}
.rlab em{text-transform:none;letter-spacing:0;font-size:11px;background:var(--wr-tint);color:var(--wr-ink);padding:2px 7px;border-radius:var(--r1)}

/* Headlines in the serif, with its optical size, as the mastheads elsewhere. */
.hero h1{font:500 clamp(36px,4.4vw,58px)/1.04 var(--serif);font-variation-settings:"opsz" 144;letter-spacing:-.02em;color:var(--ink)}
.stagesHead h2,.fpTop h2,.scanhead h2,.vword{font-family:var(--serif);font-weight:500;letter-spacing:-.015em;color:var(--ink)}
.stgname{font:500 19px/1.25 var(--serif);font-variation-settings:"opsz" 24}
/* Every section heading the report builds, in the serif like the mastheads
   and the session page; the eyebrow above the environment card in the mono. */
.results h2,.results h3,.alsohead{font-family:var(--serif);font-weight:500;letter-spacing:-.012em;font-variation-settings:"opsz" 24}
.envLab{font:500 11.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--wr-ink)}

/* Two names this page and the shared sheet both use, settled in this page's
   favour where they meet. app.css's .rail is the dashboard's four-column
   step strip; here .rail is the sticky list beside a ticket. */
.fpMain .rail{display:block;grid-template-columns:none;gap:0;padding:18px;margin:0;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r3);box-shadow:none}
/* The fix-plan head: label, then the heading under it, with the progress
   count at the right. Auto-placement had put the heading in the count's
   column once the label was pinned to the first. */
.fpTop > h2{grid-column:1}
.fpTop > .fpProg{grid-column:2;grid-row:1 / 3;align-self:end}

/* The whole-site pass's controls, on one line: the shared sheet makes every
   label a block and every select full width, which stacked these three into
   a form. Label, a select the width of its longest option, the button, and
   the note on what the last pass covered. */
.crawlStart{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin-top:28px;padding-top:18px;border-top:1px solid var(--line)}
.crawlStart .crawlLab{display:inline;margin:0;font:500 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.crawlStart #crawlMax{width:auto;min-width:112px;padding:8px 36px 8px 12px;border-radius:var(--r2);font-size:13.5px;
  font-family:var(--disp);background:var(--card);color:var(--ink);border:1px solid var(--line-2)}
.crawlStart .btnG{padding:9px 16px;font-size:13.5px}
.crawlStart .crawlHint{flex-basis:100%;margin:0;font-size:13px;color:var(--ink-4)}
@media (min-width:760px){ .crawlStart .crawlHint{flex-basis:auto;margin-left:4px} }

/* Tables in the whole-site pass. Column heads in the mono capitals every
   other table in the product uses, and a row that failed marked with a rule
   and a coloured status rather than a solid tint across the row: eight red
   rows in a row read as one red block, and the URLs inside were the point. */
table.tpl th,table.bot th{font:500 11px/1.3 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-4)}
table.tpl tr.row-no,table.bot tr.row-no{background:transparent}
table.tpl tr.row-no td:first-child,table.bot tr.row-no td:first-child{box-shadow:inset 3px 0 0 var(--er);color:var(--er-ink)}
table.tpl tr.row-no td:first-child .bu{color:var(--er-ink)}

/* The plain-words mark beside a section title or a tile label. A small
   ringed "i" in the mono; the sentence appears under it on hover, on
   keyboard focus, or after a press, as a card in the page's own colours. */
.info{display:inline-grid;place-items:center;width:17px;height:17px;margin:0 0 0 7px;padding:0;
  vertical-align:2px;border-radius:50%;border:1px solid var(--ink-4);background:transparent;color:var(--ink-3);
  font:600 10.5px/1 var(--mono);cursor:help;position:relative;box-shadow:none;transform:none}
.info:hover,.info:focus-visible,.info.on{border-color:var(--brand);color:var(--brand-ink);outline:none}
.info::after{content:attr(data-tip);position:absolute;left:0;top:calc(100% + 9px);z-index:40;width:min(340px,70vw);
  padding:11px 13px;border-radius:var(--r2);background:var(--card);color:var(--ink-2);border:1px solid var(--line-2);
  border-left:3px solid var(--brand);box-shadow:var(--sh2);font:400 13px/1.55 var(--disp);letter-spacing:0;
  text-transform:none;text-align:left;white-space:normal;display:none}
.info:hover::after,.info:focus-visible::after,.info.on::after{display:block}
/* The card hangs outside its tile or chart box, which clip their contents
   for other reasons; while a mark is open the box lets it through and sits
   above its neighbours. */
.kpi:has(.info.on),.kpi:has(.info:hover),.kpi:has(.info:focus-visible),
.chartBox:has(.chartT .info.on),.chartBox:has(.chartT .info:hover),.chartBox:has(.chartT .info:focus-visible){overflow:visible;position:relative;z-index:6}
.chartHd{position:relative;z-index:2}
/* The tile label clips for its ellipsis; the card hangs from it, so it lets
   go while a mark is open. */
.kpiL:has(.info.on),.kpiL:has(.info:hover),.kpiL:has(.info:focus-visible){overflow:visible}
/* In a tile the mark sits on the label line; in a chart head, on the title. */
.kpiL .info{vertical-align:1px}
.chartT .info{vertical-align:3px}
/* On a narrow screen the card hangs from the right edge instead. */
@media (max-width:700px){ .info::after{left:auto;right:-8px} }

/* A saved report says so above the score, on one quiet line: what it is,
   when it was taken, and the way to a fresh one. */
.verdict.on{padding-top:22px}
.shared{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;margin:18px 0 0;padding:11px 16px;
  background:var(--card);border:1px solid var(--line);border-left:3px solid var(--wr);border-radius:var(--r2);
  font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.shared b{color:var(--ink);font-weight:600}
.shared a{margin-left:auto;font-weight:600;color:var(--brand-ink);text-decoration:none;white-space:nowrap;
  border:1px solid var(--line-2);padding:5px 11px;border-radius:var(--r2)}
.shared a:hover{border-color:var(--brand);color:var(--brand-ink)}
.vscore{font-family:var(--serif);font-weight:500;font-variation-settings:"opsz" 144;letter-spacing:-.03em}
.vscore sup{font-family:var(--disp);font-weight:500}
.vscore::after{background:var(--card)}
.vhost{color:var(--ink-3)}

/* Buttons: one solid brand button, one quiet one, square corners, no lift. */
.ctaBig,.btnV,.go,.ctl[aria-pressed=true]{background:var(--brand);color:var(--on-brand);border-color:var(--brand);box-shadow:none;transform:none}
.ctaBig:hover,.btnV:hover:not(:disabled),.go:hover:not(:disabled){background:var(--brand-ink);border-color:var(--brand-ink);color:var(--on-brand);filter:none;transform:none;box-shadow:none}
.ctaBig,.btnV,.btnG,.go,.mode{border-radius:var(--r2)}
.ctl{border-radius:var(--r1)}
.mode[aria-pressed=true]{box-shadow:none;border:1px solid var(--line)}
.ctaHint{color:var(--ink-4)}

/* Cards: the shared radius and rule, no shadow. */
.heroR,.fact,.stg,.tk,.card,.shared,.alert{border-radius:var(--r3);box-shadow:none}
.stg.here{border-color:var(--brand)}
.stg.here .stgtag{border-top-color:var(--line)}
.railItem.cur{background:var(--brand-tint);color:var(--brand-ink)}

/* ==========================================================================
   The landing. Editorial: a headline, one product screen that plays like a
   video, then sections set with rules and whitespace rather than cards.
   Motion is a rise-and-fade on reveal and the screen's own scenes; both stop
   for anyone who asked the system for reduced motion.
   ========================================================================== */
.land{--ease-out:cubic-bezier(.2,.7,.2,1)}
/* The backdrop. Light first; the dark values under both guards, the way
   the sheet does every dark rule. */
:root{--glow-1:rgba(31,61,102,.13);--glow-2:rgba(201,146,58,.11);--glow-3:rgba(31,61,102,.05);--dot:rgba(20,25,42,.11);--grain:.035;--bandbg:#EDECE5}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){--glow-1:rgba(59,107,170,.30);--glow-2:rgba(224,180,92,.10);--glow-3:rgba(59,107,170,.14);--dot:rgba(236,237,240,.075);--grain:.06;--bandbg:#1B2231}
}
:root[data-theme=dark]{--glow-1:rgba(59,107,170,.30);--glow-2:rgba(224,180,92,.10);--glow-3:rgba(59,107,170,.14);--dot:rgba(236,237,240,.075);--grain:.06;--bandbg:#1B2231}
:root{--orb-1:rgba(31,61,102,.11);--orb-2:rgba(201,146,58,.10);--orb-3:rgba(31,61,102,.07)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){--orb-1:rgba(59,107,170,.24);--orb-2:rgba(224,180,92,.11);--orb-3:rgba(156,189,235,.10)}
}
:root[data-theme=dark]{--orb-1:rgba(59,107,170,.24);--orb-2:rgba(224,180,92,.11);--orb-3:rgba(156,189,235,.10)}
/* The moving part: three orbs on a fixed layer behind everything, each on
   its own clock, the whole layer leaning a little with the pointer. */
.bgfx{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  transform:translate3d(calc(var(--mx,0) * -22px),calc(var(--my,0) * -22px),0);transition:transform .9s var(--ease-out)}
.bgfx i{position:absolute;border-radius:50%;will-change:transform}
.bgfx .o1{width:70vmax;height:70vmax;left:-18vmax;top:-30vmax;background:radial-gradient(closest-side,var(--orb-1),transparent 72%);animation:drift1 26s ease-in-out infinite alternate}
.bgfx .o2{width:56vmax;height:56vmax;right:-22vmax;top:22vh;background:radial-gradient(closest-side,var(--orb-2),transparent 72%);animation:drift2 34s ease-in-out infinite alternate}
.bgfx .o3{width:64vmax;height:64vmax;left:-14vmax;bottom:-34vmax;background:radial-gradient(closest-side,var(--orb-3),transparent 72%);animation:drift3 30s ease-in-out infinite alternate}
@keyframes drift1{from{transform:translate3d(-6%,-4%,0) scale(1)}to{transform:translate3d(14%,10%,0) scale(1.18)}}
@keyframes drift2{from{transform:translate3d(6%,8%,0) scale(1.1)}to{transform:translate3d(-12%,-14%,0) scale(.94)}}
@keyframes drift3{from{transform:translate3d(10%,4%,0) scale(.96)}to{transform:translate3d(-8%,-16%,0) scale(1.14)}}
@media (prefers-reduced-motion:reduce){ .bgfx i{animation:none} .bgfx{transition:none;transform:none} }
/* The pointer: the site's own arrow, navy on the light theme and cream on
   the dark, amber over anything clickable; a soft glow trails it. Set by
   the script on a fine pointer only. Text fields keep the caret. */
.curHalo{position:fixed;left:0;top:0;z-index:9998;pointer-events:none;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;opacity:0;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--brand) 30%,transparent),transparent);
  transition:opacity .25s ease,width .3s var(--ease-out),height .3s var(--ease-out),margin .3s var(--ease-out),background .3s ease}
html.cur-on .curHalo{opacity:1}
html.cur-on.cur-out .curHalo,html.cur-on.cur-text .curHalo{opacity:0}
html.cur-on.cur-hov .curHalo{width:104px;height:104px;margin:-52px 0 0 -52px;background:radial-gradient(closest-side,color-mix(in srgb,var(--wr) 26%,transparent),transparent)}
html.cur-on.cur-down .curHalo{width:44px;height:44px;margin:-22px 0 0 -22px}
html.cur-on,html.cur-on *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M3 2L3 18.5L7.6 14.4L10.4 21.2L13.6 19.9L10.8 13.2L16.4 13.2Z' fill='%231F3D66' stroke='%23F5F4EF' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 2 2,auto!important}
@media (prefers-color-scheme:dark){
  html.cur-on:not([data-theme=light]),html.cur-on:not([data-theme=light]) *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M3 2L3 18.5L7.6 14.4L10.4 21.2L13.6 19.9L10.8 13.2L16.4 13.2Z' fill='%23F5F4EF' stroke='%231B2A4A' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 2 2,auto!important}
}
html[data-theme=dark].cur-on,html[data-theme=dark].cur-on *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M3 2L3 18.5L7.6 14.4L10.4 21.2L13.6 19.9L10.8 13.2L16.4 13.2Z' fill='%23F5F4EF' stroke='%231B2A4A' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 2 2,auto!important}
html.cur-on :is(a,button,[role=button],[role=tab],[role=slider],label,summary,.trHit,path[data-s],.chFig.checks li,.vsRow){cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M3 2L3 18.5L7.6 14.4L10.4 21.2L13.6 19.9L10.8 13.2L16.4 13.2Z' fill='%23E0B45C' stroke='%231B2A4A' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 2 2,pointer!important}
html.cur-on :is(input,textarea,select,[contenteditable]){cursor:text!important}
body{position:relative}
body::before,body::after{content:'';position:absolute;left:0;right:0;top:0;z-index:-1;pointer-events:none}
body::before{bottom:0;background:
  radial-gradient(1000px 640px at 50% 0,var(--glow-1),transparent 66%),
  radial-gradient(760px 560px at 104% 14%,var(--glow-2),transparent 62%),
  radial-gradient(900px 640px at -6% 62%,var(--glow-3),transparent 62%)}
body::after{height:1100px;background-image:radial-gradient(var(--dot) 1px,transparent 1.2px);background-size:26px 26px;
  mask-image:linear-gradient(#000 0,#000 45%,transparent 100%);-webkit-mask-image:linear-gradient(#000 0,#000 45%,transparent 100%)}
/* The grain: an SVG noise tile, so there is no image to fetch. */
.land#hero::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;mix-blend-mode:overlay}
/* The comparison sits on a band the width of the window. */
.diff.reveal{padding:clamp(40px,6vw,72px) 0 clamp(44px,6vw,76px);margin-top:clamp(24px,4vw,48px);
  background:var(--bandbg);box-shadow:0 0 0 100vmax var(--bandbg);clip-path:inset(0 -100vmax)}
.heroTop{max-width:880px}
.hero.land h1{font:500 clamp(40px,5.6vw,76px)/1.02 var(--serif);font-variation-settings:"opsz" 144;letter-spacing:-.025em;color:var(--ink);margin:14px 0 20px}
.hero.land h1 span{color:var(--brand-ink);font-style:italic}
.hero.land .sub{font-size:clamp(16px,1.25vw,19px);max-width:62ch}
.ctaLink{font:500 14px/1 var(--disp);color:var(--brand-ink);text-decoration:none;padding:14px 4px;border-bottom:1px solid transparent}
.ctaLink:hover{border-bottom-color:var(--brand-ink)}

/* Reveal on scroll. Elements start low and clear; the observer adds .in. */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}.reveal.d5{transition-delay:.4s}

/* The screen. */
.screenWrap{margin-top:clamp(28px,4vw,48px)}
.demoVideo{display:block;width:100%;height:auto;border-radius:var(--r3);border:1px solid var(--line);background:#000}
.demoVideo[hidden]{display:none}
.vtabs[hidden]{display:none}
.screen{border:1px solid var(--line);border-radius:var(--r3);background:var(--card);box-shadow:0 30px 80px -40px rgba(20,28,48,.35),0 2px 0 var(--line);overflow:hidden}
.chrome{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--card-2)}
.chrome i{width:10px;height:10px;border-radius:50%;background:var(--line-2)}
.chrome span{margin-left:10px;font:500 11.5px/1 var(--mono);letter-spacing:.04em;color:var(--ink-4)}
.stageArea{position:relative;min-height:clamp(300px,34vw,400px);padding:clamp(20px,3vw,34px) clamp(20px,3.4vw,40px)}
.scene{position:absolute;inset:0;padding:inherit;opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);pointer-events:none}
.scene.on{opacity:1;transform:none;pointer-events:auto}
.sEyebrow{margin:0 0 14px;font:500 11.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--wr-ink)}
.sNote{margin:16px 0 0;font-size:13px;line-height:1.55;color:var(--ink-4)}
.sNote u{text-decoration:none;color:var(--ok);font-weight:600}
.typed{margin:0 0 18px;font:500 clamp(22px,2.6vw,36px)/1.25 var(--serif);font-variation-settings:"opsz" 72;letter-spacing:-.01em;color:var(--ink);min-height:1.3em}
.caret{display:inline-block;width:2px;height:.95em;margin-left:3px;background:var(--brand);vertical-align:-.1em;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.engines4,.fchips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-block;font-size:13px;padding:6px 10px;border-radius:var(--r1);border:1px solid var(--line);background:var(--card-2);color:var(--ink-2);opacity:0;transform:translateY(6px)}
.scene.on .chip{animation:pop .45s var(--ease-out) forwards;animation-delay:calc(var(--i,1) * 110ms + .2s)}
.chip.you{background:var(--ok-tint);border-color:var(--ok);color:var(--ok);font-weight:600}
.fchips .chip{background:var(--wr-tint);border-color:transparent;color:var(--wr-ink)}
.fchips .chip i{font-style:normal;opacity:.7;margin-left:5px;font:500 11.5px/1 var(--mono)}
@keyframes pop{to{opacity:1;transform:none}}
.prog{height:6px;border-radius:3px;background:var(--card-3);margin:22px 0 0;overflow:hidden}
.prog i{display:block;height:100%;width:0;background:var(--brand);border-radius:3px;transition:width 3.4s linear}
.scene.on .prog i{width:100%}
.arow{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:10px 0;border-bottom:1px solid var(--line);opacity:0;transform:translateX(-8px)}
.scene.on .arow{animation:slide .5s var(--ease-out) forwards;animation-delay:calc(var(--i,1) * 220ms)}
.arow:last-of-type{border-bottom:none}
.arow b{flex:0 0 120px;font:500 13px/1.3 var(--disp);color:var(--ink-2)}
.arow .chip{animation-delay:calc(var(--i,1) * 110ms + .5s)}
@keyframes slide{to{opacity:1;transform:none}}
.standRow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0 0 20px}
.bigStat b{display:block;font:500 clamp(34px,4vw,52px)/1 var(--serif);font-variation-settings:"opsz" 144;letter-spacing:-.03em;color:var(--ink)}
.bigStat b i{font-style:normal;font-size:15px;color:var(--ink-4);margin-left:6px;letter-spacing:0}
.bigStat > span{display:block;margin-top:6px;font-size:12.5px;color:var(--ink-4)}
.fplan{list-style:none;margin:0;padding:0;counter-reset:pl}
.fplan li{position:relative;padding:11px 14px 11px 54px;border-bottom:1px solid var(--line);border-radius:5px;opacity:0;transform:translateY(8px)}
.scene.on .fplan li{animation:planStep 2300ms var(--ease-out) forwards;animation-delay:calc((var(--i,1) - 1) * 1300ms + 250ms)}
.scene.on .fplan li::before{animation:planNum 2300ms var(--ease-out) forwards;animation-delay:calc((var(--i,1) - 1) * 1300ms + 250ms)}
/* Arrive, hold the highlight while it is the one being read, then settle back
   so the finished list reads evenly. */
@keyframes planStep{
  0%{opacity:0;transform:translateY(10px);background:transparent;box-shadow:inset 0 0 0 0 transparent}
  11%{opacity:1;transform:none}
  17%{background:color-mix(in srgb,var(--wr) 11%,transparent);box-shadow:inset 3px 0 0 0 var(--wr-solid)}
  54%{background:color-mix(in srgb,var(--wr) 11%,transparent);box-shadow:inset 3px 0 0 0 var(--wr-solid)}
  100%{opacity:1;transform:none;background:transparent;box-shadow:inset 3px 0 0 0 transparent}
}
@keyframes planNum{
  0%,14%{color:var(--wr-ink)}
  20%,54%{color:var(--wr-solid)}
  100%{color:var(--wr-ink)}
}
.fplan li:last-child{border-bottom:none}
.fplan li::before{counter-increment:pl;content:counter(pl,decimal-leading-zero);position:absolute;left:18px;top:14px;font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--wr-ink)}
.fplan b{display:block;font:500 15px/1.35 var(--disp);color:var(--ink)}
.fplan span{display:block;font-size:13px;line-height:1.5;color:var(--ink-3)}
.vbar{display:flex;align-items:center;gap:12px;padding:10px 14px;border-top:1px solid var(--line);background:var(--card-2)}
.vbtn{all:unset;cursor:pointer;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--brand);color:var(--on-brand);font-size:10px;letter-spacing:-2px}
.vcap{font:500 11.5px/1 var(--mono);letter-spacing:.04em;color:var(--ink-4);white-space:nowrap}

/* Sections: a heading block, then content on rules. */
.facts.land,.stages.land{display:block;margin-top:0;padding-top:0;border-top:none}
.secHead{padding:clamp(56px,7vw,88px) 0 28px;max-width:760px}
.secHead h2{margin:8px 0 0;font:500 clamp(28px,3.4vw,44px)/1.08 var(--serif);font-variation-settings:"opsz" 96;letter-spacing:-.02em;color:var(--ink)}
.secLede{margin:14px 0 0;font-size:16px;line-height:1.6;color:var(--ink-2)}

/* The case study, as a spread of numerals over a narrative. */
.bigNums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding:26px 0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line)}
.bigNums b{display:block;font:500 clamp(40px,5vw,68px)/1 var(--serif);font-variation-settings:"opsz" 144;letter-spacing:-.035em;color:var(--ink)}
.bigNums b i{font-style:normal;font-size:16px;color:var(--ink-4);letter-spacing:0}
.bigNums > div > span{display:block;margin-top:8px;font-size:13px;color:var(--ink-4);line-height:1.4}
.bigNums .count,.bigStat .count{display:inline}
.caseCols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 56px;padding:28px 0 0}
.caseCols h3{margin:0 0 10px;font:500 15px/1.3 var(--disp);color:var(--ink)}
.caseCols ul,.caseCols ol{margin:0;padding:0 0 0 20px;font-size:15px;line-height:1.65;color:var(--ink-2)}
.caseCols li{margin:0 0 10px}
.caseFoot{margin:26px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:13.5px;line-height:1.6;color:var(--ink-3);max-width:80ch}
.caseMore{display:inline-block;margin-left:6px;font-weight:600;color:var(--brand-ink);text-decoration:none;border-bottom:1px solid transparent}
.caseMore:hover{border-bottom-color:var(--brand-ink)}

/* The free plan's report: the marks, and one line about the rest. */
.upgrade{padding:26px clamp(20px,3vw,34px) 28px;border:1px solid var(--line);border-radius:var(--r3);background:var(--card)}
.upEyebrow{margin:0 0 10px;font:500 11.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--wr-ink)}
.upgrade h3{margin:0 0 12px;font:500 24px/1.15 var(--serif);font-variation-settings:"opsz" 48;letter-spacing:-.015em;color:var(--ink)}
.upSecs{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 28px}
.upSecs li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.upSecs b{font-weight:500;color:var(--ink)}
.upSecs span{font:500 13px/1.4 var(--mono);color:var(--ink-3)}
.upCounts{margin:0 0 14px;font-size:13.5px;color:var(--ink-3)}
.upLine{margin:0 0 18px;font-size:14.5px;line-height:1.6;color:var(--ink-2);max-width:70ch}
.upBtn{display:inline-flex;align-items:center;text-decoration:none}
.upWrong{margin:0 0 18px;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 32px}
.upGroup h4{margin:14px 0 4px;font:500 11.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}
.upGroup ul{list-style:none;margin:0;padding:0}
.upGroup li{display:flex;justify-content:space-between;gap:12px;padding:8px 0 8px 14px;border-bottom:1px solid var(--line);font-size:13.5px;position:relative}
.upGroup li::before{content:'';position:absolute;left:0;top:14px;width:6px;height:6px;border-radius:50%;background:var(--er)}
.upGroup li.w::before{background:var(--wr)}
.upGroup li.o::before{background:var(--na)}
.upGroup li.o b{color:var(--ink-3)}
.upGroup b{font-weight:500;color:var(--ink)}
.upGroup span{font:500 12px/1.5 var(--mono);color:var(--ink-4);white-space:nowrap}
/* A locked tab: still there, still pressable, marked with a small lock. */
.mode.locked{color:var(--ink-4)}
.mode.locked::after{content:'';display:inline-block;width:10px;height:12px;margin-left:8px;vertical-align:-1px;
  border:1.6px solid currentColor;border-radius:2px;box-sizing:border-box;position:relative;background:
  radial-gradient(circle at 50% -40%,transparent 3.5px,currentColor 3.5px,currentColor 5px,transparent 5px) no-repeat 50% -5px/12px 8px}
.mode.locked em{display:none}



/* What is different: a definition list on rules. */
.diffList{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px;border-top:1px solid var(--line-2)}
.diffList div{padding:20px 0;border-bottom:1px solid var(--line)}
.diffList dt{margin:0 0 6px;font:500 18px/1.3 var(--serif);font-variation-settings:"opsz" 24;color:var(--ink)}
.diffList dd{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-2)}

/* The ladder, lightened: a rule on top of each step, no box. */
.stages.land .stagesHead{padding-top:clamp(56px,7vw,88px)}
.stages.land .ladder{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}
.stages.land .stg{background:transparent;border:none;border-top:2px solid var(--line-2);border-radius:0;padding:18px 0 0;box-shadow:none;transform:none}
.stages.land .stg.here{border-top-color:var(--brand)}
.stages.land .stg.part{border-top-color:var(--wr)}
.stages.land .stgtag{border-top:none;padding-top:8px;margin-top:10px;font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4)}

/* Plans and questions. */
.planTeasers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;border-top:1px solid var(--line-2)}
.pt{display:block;padding:22px 0 24px;border-top:2px solid transparent;margin-top:-1px;text-decoration:none;color:inherit;transition:border-color .2s ease}
.pt:hover{border-top-color:var(--brand)}
.pt.best{border-top-color:var(--wr)}
.pt b{display:block;font:500 20px/1.2 var(--serif);color:var(--ink)}
.pt i{display:block;margin:8px 0 10px;font:500 32px/1 var(--serif);font-variation-settings:"opsz" 96;font-style:normal;letter-spacing:-.025em;color:var(--ink)}
.pt i small{font-size:12px;color:var(--ink-4);letter-spacing:0}
.pt span{display:block;font-size:14px;line-height:1.55;color:var(--ink-3)}
.pt em{display:block;margin-top:12px;font:500 13px/1 var(--disp);font-style:normal;color:var(--brand-ink)}
.ptNote{margin:18px 0 0;font-size:13px;color:var(--ink-4)}
.ptNote a{color:var(--brand-ink)}
.qas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px;border-top:1px solid var(--line-2)}
.qas div{padding:20px 0;border-bottom:1px solid var(--line)}
.qas h3{margin:0 0 6px;font:500 17px/1.3 var(--serif);font-variation-settings:"opsz" 24;color:var(--ink)}
.qas p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.lastCta{margin:clamp(56px,7vw,88px) 0 24px;padding:clamp(36px,5vw,64px) clamp(20px,3vw,40px);border-radius:var(--r3);background:var(--band);color:var(--band-ink);text-align:center}
.lastCta h2{margin:0 0 8px;font:500 clamp(28px,3.6vw,46px)/1.08 var(--serif);font-variation-settings:"opsz" 96;letter-spacing:-.02em;color:var(--band-ink)}
.lastCta p{margin:0 0 22px;font-size:15px;color:var(--band-ink);opacity:.85}
.lastCta .ctaBig{background:var(--wr);border-color:var(--wr);color:#1a1405}
.lastCta .ctaBig:hover{background:var(--wr);filter:brightness(1.06)}

@media (max-width:960px){
  .flow,.stages.land .ladder{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bigNums{grid-template-columns:repeat(2,minmax(0,1fr))}
  .caseCols,.diffList,.qas,.planTeasers{grid-template-columns:1fr}
  .standRow{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:560px){
  .flow,.stages.land .ladder,.bigNums,.standRow{grid-template-columns:1fr}
  .arow b{flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .scene{transition:none}
  .chip,.arow,.fplan li,.fplan li::before{transition:none;animation:none!important;opacity:1;transform:none}
  .caret{animation:none}
  .prog i{transition:none}
}

/* ==========================================================================
   The screen, third pass: gradient stage, centred scenes, slide-and-fade
   transitions, a scrubbable timeline.
   ========================================================================== */
.screen{position:relative;border-color:transparent;
  background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(135deg,var(--brand-tint),var(--line),var(--wr-tint)) border-box;
  border:1px solid transparent;box-shadow:0 40px 100px -50px rgba(20,28,48,.45),0 0 0 1px rgba(255,255,255,.02) inset}
.stageArea{position:relative;overflow:hidden;min-height:clamp(320px,36vw,440px);padding:0;
  background:
    radial-gradient(70% 90% at 0% 0%,var(--brand-tint) 0%,transparent 60%),
    radial-gradient(60% 80% at 100% 100%,var(--wr-tint) 0%,transparent 60%),
    var(--card)}
/* A faint grid, so the stage reads as a surface and not as a blank. */
.stageArea::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:48px 48px;mask-image:radial-gradient(80% 80% at 50% 40%,#000 30%,transparent 100%);-webkit-mask-image:radial-gradient(80% 80% at 50% 40%,#000 30%,transparent 100%)}
.scene{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(22px,3.2vw,40px) clamp(22px,3.6vw,48px);opacity:0;transform:none;transition:none;pointer-events:none;will-change:opacity,transform}
.scene.on{opacity:1;pointer-events:auto;animation:sceneIn .7s var(--ease-out) both}
.scene.out{opacity:1;animation:sceneOut .5s var(--ease-out) both}
@keyframes sceneIn{from{opacity:0;transform:translateX(28px) scale(.985);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes sceneOut{from{opacity:1;transform:none;filter:blur(0)}to{opacity:0;transform:translateX(-28px) scale(.985);filter:blur(6px)}}
.scene .sEyebrow{margin-bottom:16px}
.typed{margin-bottom:22px}
.engines4 .chip{font-size:13.5px;padding:8px 12px}
.prog{margin-top:26px;height:8px;background:var(--card-3)}
.prog i{background:linear-gradient(90deg,var(--brand),var(--brand-ink));transition:none;width:0}
.live{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);margin:0 8px 0 0;vertical-align:1px;box-shadow:0 0 0 0 var(--ok);animation:pulse 1.4s ease-out infinite}
@keyframes pulse{to{box-shadow:0 0 0 10px transparent}}
.stack{display:flex;height:14px;border-radius:7px;overflow:hidden;gap:2px;margin:0 0 22px;background:var(--card-3)}
.stack i{display:block;height:100%;width:0;transition:width 1.1s var(--ease-out)}
.scene.on .stack i{width:var(--w)}
.stack i.ok{background:var(--ok)}.stack i.wr{background:var(--wr)}.stack i.no{background:var(--line-2)}
.standRow{margin-bottom:24px}
.arow{padding:12px 0}
.vbar{padding:12px 16px;gap:14px;background:var(--card-2)}
.vbtn{width:34px;height:34px;font-size:11px;box-shadow:0 6px 16px -8px var(--brand)}
.vbtn[hidden]{display:none}
.vtrack{position:relative;flex:1;height:6px;border-radius:3px;background:var(--card-3);cursor:pointer;overflow:visible;outline:none}
.vtrack:focus-visible{box-shadow:0 0 0 3px var(--brand-tint)}
/* Full width, revealed by clip-path. A fill that grew by width stretched its
   gradient to the new width every frame, so the colours crawled as it moved;
   clipped, the gradient is laid once across the track and only the edge moves. */
.vtrack i{display:block;width:100%;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--wr),var(--brand));transition:none;clip-path:inset(0 100% 0 0 round 3px)}
/* The caption is as wide as its longest line, so a scene change does not
   resize the track and jump the fill and the marks beside it. */
.vbar .vcap{min-width:var(--capw,0);text-align:right}
@media (max-width:640px){.vbar .vcap{min-width:0}}
.vtrack b{position:absolute;inset:0;pointer-events:none}
/* Scene boundaries as 2px gaps the height of the track, in the surface
   colour, so the bar reads as four segments. Taller marks in the card colour
   stood out past the track and read as scratches across the gradient. */
.vtrack b span{position:absolute;top:0;bottom:0;width:2px;margin:0 0 0 -1px;background:var(--card-2)}
/* margin:0 on purpose: .vbar span above gives every span in the bar an 8px top
   margin for the caption, and inherited here it pushed the marks under the
   track -- which is what the old scratches were. */
@media (max-width:560px){ .scene{justify-content:flex-start} }
@media (prefers-reduced-motion:reduce){
  .scene.on,.scene.out{animation:none}
  .live{animation:none}
  .stack i{transition:none}
}

/* ==========================================================================
   Phones. The bar keeps the two calls to action; the headline drops its
   forced break; the player's stage grows with the scene it is showing rather
   than clipping it; long mono lines shorten instead of pushing the width.
   ========================================================================== */
@media (max-width:820px){
  /* The corner stays: a visitor's way in is Sign in and Create account. The
     page links wrap under the wordmark, as on every public page. */
}
@media (max-width:700px){
  .hero.land h1 br{display:none}
  .hero.land h1{font-size:clamp(34px,10vw,44px)}
  .heroCta{gap:12px}
  .ctaHint{flex-basis:100%}
  .chrome span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .stageArea{min-height:0}
  .scene{position:static;display:none;padding:18px 16px}
  .scene.on{display:flex;animation:none}
  .scene.out{display:none;animation:none}
  .typed{font-size:20px}
  .arow b{flex-basis:100%}
  .standRow{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .bigStat b{font-size:26px}
  .vbar{padding:10px 12px;gap:10px}
  .vcap{max-width:42%;overflow:hidden;text-overflow:ellipsis}
  .secHead{padding-top:44px}
  .lastCta{padding:28px 18px}
}

/* ==========================================================================
   The landing, fourth pass. Plain paper instead of a blurred backdrop, a
   centred headline with the address bar under it, the player under four
   named tabs, a strip of the engines, four figures, and the rest as cards
   on the paper: steps, the comparison, the plans, the pieces from the blog.
   Everything below overrides the passes above it; nothing new is animated.
   ========================================================================== */
.hero.land{display:block;position:relative;padding-block:clamp(44px,6vw,80px) 0}
.heroTop{max-width:840px;margin:0 auto;text-align:center}
.heroTop .kicker{margin-bottom:18px}
.hero.land h1{margin:0 auto 18px;max-width:none}
.hero.land .sub{margin:0 auto 28px;max-width:60ch}

/* The address bar: one bordered box holding the field and the button. */
.heroForm{display:flex;align-items:stretch;gap:6px;width:100%;max-width:620px;margin:0 auto;padding:6px;
  background:var(--card);border:1px solid var(--line-2);border-radius:var(--r3);box-shadow:var(--sh2);
  transition:border-color .15s ease,box-shadow .15s ease}
.heroForm:focus-within{border-color:var(--brand);box-shadow:var(--ring)}
.heroForm .field{flex:1;min-width:0}
.heroForm .field::before{left:14px;opacity:.6}
.heroForm #u{border:0;background:transparent;box-shadow:none;border-radius:var(--r2);padding:12px 14px 12px 40px;font-size:15.5px}
.heroForm #u:focus{border:0;box-shadow:none}
.heroForm #u.locked{background:var(--card-3)}
.heroForm .go{flex:none;padding:12px 22px;font-size:15px;font-weight:600;border-radius:var(--r2);
  background:var(--wr);border-color:var(--wr);color:#1a1405;box-shadow:none;transform:none}
.heroForm .go:hover:not(:disabled){background:var(--wr);border-color:var(--wr);color:#1a1405;filter:brightness(1.06);transform:none;box-shadow:none}
.heroForm .go:disabled{opacity:.7}
.heroForm .go .sp{border-color:rgba(26,20,5,.3);border-top-color:#1a1405}
.hero.land .ctaHint{margin:14px 0 0;font-size:13.5px;color:var(--ink-4)}
.hero.land .ctaHint em{font-style:normal;font-weight:600;color:var(--ink-2)}
.hero.land .ctaHint .ctaLink{padding:0 0 1px;margin-left:12px;font-size:13.5px}
@media (max-width:560px){
  .heroForm{flex-direction:column;gap:6px}
  .heroForm .go{width:100%}
}

/* The player, under its tabs. */
.screenWrap{max-width:1060px;margin:clamp(36px,5vw,60px) auto 0}
.vtabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-bottom:0;
  border-radius:var(--r3) var(--r3) 0 0;background:var(--card-2);overflow:hidden}
.vtabs button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:10px;min-width:0;padding:14px 16px;
  font:500 13.5px/1.3 var(--disp);color:var(--ink-3);border-right:1px solid var(--line);border-bottom:2px solid transparent;
  transition:color .15s ease,background .15s ease,border-color .15s ease}
.vtabs button:last-child{border-right:0}
.vtabs button b{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font:600 11px/1 var(--mono);border:1.5px solid var(--line-2);color:var(--ink-4);background:transparent}
.vtabs button:hover{color:var(--ink);background:var(--card)}
.vtabs button[aria-selected=true]{color:var(--ink);background:var(--card);border-bottom-color:var(--wr)}
.vtabs button[aria-selected=true] b{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.vtabs button:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.screenWrap .screen{border:1px solid var(--line);border-radius:0 0 var(--r3) var(--r3);background:var(--card);
  box-shadow:0 28px 60px -44px rgba(20,28,48,.55)}
.screenWrap .chrome{display:none}
.screenWrap .stageArea{background:var(--card)}
.screenWrap .stageArea::before{display:none}
.screenNote{margin:12px 2px 0;text-align:center;font:500 12px/1.5 var(--mono);letter-spacing:.04em;color:var(--ink-4)}
@media (max-width:820px){
  .vtabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vtabs button{padding:12px 14px;font-size:13px;border-bottom:1px solid var(--line)}
  .vtabs button:nth-child(2){border-right:0}
  .vtabs button[aria-selected=true]{border-bottom-color:var(--wr)}
}

/* Where the answers come from. */
.facts.land{padding-top:0}
.engines{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:20px 48px;
  margin:clamp(44px,6vw,72px) 0 0;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.engCol{min-width:0}
.engLab{margin:0 0 12px;font:500 11px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4)}
.engList{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 28px}
.engList li{display:flex;align-items:center;gap:9px;font:500 19px/1 var(--serif);font-variation-settings:"opsz" 24;color:var(--ink-2);white-space:nowrap}
.engList li::before{content:'';flex:none;width:8px;height:8px;border-radius:50%;background:var(--brand)}
.engList.crawlers{gap:8px 18px}
.engList.crawlers li{font:500 13px/1 var(--mono);color:var(--ink-3)}
.engList.crawlers li::before{width:6px;height:6px;background:var(--ok)}
/* The engine that is wired and not yet switched on. It sits under the list
   rather than in it, because the heading above says those are asked today. */
.engSoon{margin:14px 0 0;display:flex;align-items:center;gap:9px;
  font:500 19px/1 var(--serif);font-variation-settings:"opsz" 24;color:var(--ink-4)}
.engSoon::before{content:'';flex:none;width:8px;height:8px;border-radius:50%;background:var(--line-2)}
.engSoon i{font-style:normal;font:500 11.5px/1 var(--mono);color:var(--ink-4);
  border:1px solid var(--line);border-radius:var(--r1);padding:4px 7px}
@media (max-width:820px){ .engines{grid-template-columns:1fr} }

/* Four figures, each on a rule. */
.figures{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding:clamp(36px,5vw,56px) 0 0}
.figures > div{padding:2px 0 0 18px;border-left:2px solid var(--wr)}
.figures b{display:block;font:500 clamp(40px,4.6vw,60px)/1 var(--serif);font-variation-settings:"opsz" 144;letter-spacing:-.03em;color:var(--ink)}
.figures .count{display:inline}
.figures > div > span{display:block;margin-top:8px;font-size:13.5px;line-height:1.45;color:var(--ink-3);text-wrap:pretty}
@media (max-width:820px){ .figures{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:460px){ .figures{grid-template-columns:1fr} }

/* Section heads carry a running label. */
.secHead .kicker{margin:0 0 6px}
.secHead h2{margin-top:6px}

/* The three chapters: a heading beside a figure, alternating sides, each
   playing once as it scrolls into view. The rows arrive in turn; the map
   fills, the pin lands and the callouts slide in; the caption changes to
   say where the buyer now stands. Transitions on the section's own reveal
   class, so nothing waits on a script of its own, and still for anyone who
   asked for less motion. */
.chapters{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,3vw,40px);margin-top:8px}
.chapter{min-width:0}
.chapter{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:center;
  padding:clamp(26px,4vw,48px);background:var(--card);border:1px solid var(--line);border-radius:var(--r3)}
.chapter.flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.chapter.flip .chCopy{order:2}
.chNum{display:block;font:500 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--wr-ink);margin:0 0 18px}
.chCopy h3{margin:0 0 14px;font:500 clamp(28px,3vw,40px)/1.1 var(--serif);font-variation-settings:"opsz" 96;letter-spacing:-.02em;color:var(--ink)}
.chCopy p{margin:0;font-size:16px;line-height:1.65;color:var(--ink-2);max-width:44ch}
.chCopy .chNote{margin-top:14px;font-size:14px;line-height:1.6;color:var(--ink-3)}
.chFig{margin:0;position:relative;border:1px solid var(--line);border-radius:var(--r2);background:var(--card-2);
  padding:clamp(16px,2.4vw,28px);min-height:340px;display:flex;flex-direction:column;justify-content:center}
.chFig figcaption{position:relative;margin:16px 0 0;height:18px;font:500 11.5px/18px var(--mono);letter-spacing:.04em;color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* rows: checks and the plan */
.chFig ul{list-style:none;margin:0;padding:0}
.chFig li{display:flex;align-items:center;gap:14px;padding:15px 8px;border-bottom:1px solid var(--line);font-size:16px;color:var(--ink-1);
  opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.chFig li:last-child{border-bottom:0}
.chapter.in .chFig li{opacity:1;transform:none}
.chapter.in .chFig li:nth-child(1){transition-delay:.25s}
.chapter.in .chFig li:nth-child(2){transition-delay:.55s}
.chapter.in .chFig li:nth-child(3){transition-delay:.85s}
.chFig.checks li{flex-wrap:wrap;cursor:default;transition:opacity .5s var(--ease-out),transform .5s var(--ease-out),background .15s ease}
.chFig.checks li:hover{background:color-mix(in srgb,var(--brand-tint) 40%,transparent)}
.chFig.checks li small{flex-basis:100%;display:none;font-size:13.5px;line-height:1.5;color:var(--ink-3);padding:4px 0 0 25px}
.chFig.checks li:hover small,.chFig.checks li.open small{display:block}
.chFig li span{flex:1;min-width:0}
.chFig li i{flex:none;width:11px;height:11px;border-radius:50%;border:1.5px solid currentColor}
.chFig li i.ok{color:var(--ok);background:var(--ok)}
.chFig li i.no{color:var(--er)}
.chFig li em{font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);font-style:normal}
.chFig li em.fix{color:var(--wr-ink);background:var(--wr-tint);padding:5px 9px;border-radius:var(--r1);
  opacity:0;transform:scale(.6);transition:opacity .4s var(--ease-out),transform .4s cubic-bezier(.2,1.4,.4,1)}
.chapter.in .chFig li em.fix{opacity:1;transform:none;transition-delay:1.2s}
.chFig li b{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:600 12px var(--mono);color:var(--brand-ink);background:var(--brand-tint,#E3E9F2)}
/* the map, with its callouts beside it */
.chFig.map{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(16px,2.4vw,28px);align-items:center}
.chFig.map svg{display:block;width:100%;height:auto;max-height:380px}
.chFig.map figcaption{grid-column:1/-1}
.chFig path{fill:var(--card-3);stroke:var(--line-2);stroke-width:.8;vector-effect:non-scaling-stroke;transition:fill .8s var(--ease-out),stroke .8s var(--ease-out)}
.chapter.in .chFig path.tn{fill:var(--brand);fill-opacity:.28;stroke:var(--brand);transition-delay:.5s}
.chFig.map svg path[data-s]{cursor:pointer}
.chFig.map svg path[data-s]:hover{fill:var(--brand);fill-opacity:.16;stroke:var(--brand)}
.chFig .pinAt{transition:transform .55s var(--ease-out)}
.chFig .pin{transform:scale(0);transition:transform .5s cubic-bezier(.2,1.4,.4,1)}
.chapter.in .chFig .pin{transform:scale(1);transition-delay:1s}
.chFig .pin .dot{fill:var(--brand);stroke:var(--card);stroke-width:2.5}
.chFig .pin .halo{fill:none;stroke:var(--brand);stroke-width:1.5;opacity:.6}
.chFig .lbl{font-size:24px;font-weight:600;font-family:inherit;fill:var(--ink);paint-order:stroke;stroke:var(--card-2);stroke-width:3px;stroke-linejoin:round;
  opacity:0;transition:opacity .5s var(--ease-out)}
.chapter.in .chFig .lbl{opacity:1;transition-delay:1.3s}
.callouts{display:grid;gap:10px;min-width:180px}
.co{padding:11px 13px;border:1px solid var(--line);border-radius:var(--r2);background:var(--card);
  opacity:0;transform:translateX(10px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.chapter.in .co{opacity:1;transform:none}
.chapter.in .co:nth-child(1){transition-delay:.8s}
.chapter.in .co:nth-child(2){transition-delay:1.15s}
.chapter.in .co:nth-child(3){transition-delay:1.5s}
.mapHint{margin:2px 0 0;font-size:12.5px;line-height:1.45;color:var(--ink-4);grid-column:1/-1}
.coK{display:block;font:500 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);margin:0 0 5px}
.coV{font-size:14px;font-weight:600;color:var(--ink-1)}
.chFig.map figcaption span{position:absolute;left:0;top:0;right:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .6s var(--ease-out)}
.chFig.map figcaption .c2{opacity:0;color:var(--ink-1)}
.chapter.in .chFig.map figcaption .c1{opacity:0;transition-delay:1.6s}
.chapter.in .chFig.map figcaption .c2{opacity:1;transition-delay:1.6s}
@media (max-width:900px){
  .chapter,.chapter.flip{grid-template-columns:minmax(0,1fr);gap:22px}
  .chCopy,.chFig{min-width:0}
  .chapter.flip .chCopy{order:0}
  .chCopy p{max-width:none}
  .chFig{min-height:0}
  .chFig.map{grid-template-columns:1fr}
  .callouts{grid-template-columns:repeat(3,minmax(0,1fr));min-width:0}
  .co{transform:translateY(8px)}
}
@media (max-width:600px){
  .callouts{grid-template-columns:1fr}
  .co{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
  .coK{margin:0}
}
@media (prefers-reduced-motion:reduce){
  .chFig li,.chFig li em.fix,.chFig path,.chFig .pin,.chFig .pinAt,.chFig .lbl,.co,.chFig.map figcaption span,.trHi{transition:none}
}
.how .shot{margin:26px auto 0;max-width:1060px}
.how .shot img{box-shadow:0 28px 60px -44px rgba(20,28,48,.55)}
.how .shot figcaption{text-align:center}

/* The comparison: two columns on one card, rows aligned against each other.
   The left column is the category, muted on a flat ground with a dash in a
   ring; the right is this product, on a tinted band with a filled tick, so
   the eye lands on the right-hand side before it has read a word. */
.vs{border:1px solid var(--line);border-radius:12px;background:var(--card);overflow:hidden;
  box-shadow:0 30px 60px -48px rgba(20,28,48,.45)}
.vsHead,.vsRow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
.vsHead span{display:flex;align-items:center;gap:10px;padding:15px 24px;font:500 11px/1.3 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-4);background:var(--card-2);border-bottom:1px solid var(--line)}
.vsHead .vsWas{border-right:1px solid var(--line)}
.vsHead .vsIs{color:var(--brand-ink);background:var(--brand-tint)}
.vsHead .vsIs::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}
.vsRow span{position:relative;padding:19px 24px 19px 60px;font-size:15px;line-height:1.5;border-bottom:1px solid var(--line)}
.vsRow:last-child span{border-bottom:0}
.vsRow span::before{content:'';position:absolute;left:24px;top:18px;width:22px;height:22px;border-radius:50%;box-sizing:border-box}
.vsRow span::after{content:'';position:absolute;box-sizing:border-box}
.vsRow .vsWas{color:var(--ink-3);border-right:1px solid var(--line)}
.vsRow .vsWas::before{border:1.5px solid var(--line-2)}
.vsRow .vsWas::after{left:31px;top:28px;width:8px;height:2px;background:var(--line-2)}
.vsRow span{transition:background .15s ease,color .15s ease}
.vsRow:hover .vsWas{color:var(--ink-2)}
.vsRow:hover .vsIs{background:var(--brand-tint)}
.vsRow .vsIs{color:var(--ink);font-weight:500;background:color-mix(in srgb,var(--brand-tint) 42%,var(--card))}
.vsRow .vsIs::before{background:var(--ok-tint)}
.vsRow .vsIs::after{left:31px;top:24px;width:9px;height:5px;border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg)}
@media (max-width:640px){
  .vsHead{display:none}
  .vsRow{grid-template-columns:1fr}
  .vsRow .vsWas{border-right:0;border-bottom:0;padding-bottom:6px}
  .vsRow .vsIs{background:transparent}
}

/* The plans, as three cards; the middle one carries its label. */
.planTeasers{gap:20px;border-top:0;padding-top:12px}
.pt{position:relative;margin:0;padding:26px 24px 26px;background:var(--card);border:1px solid var(--line);border-top:2px solid var(--line-2);border-radius:var(--r3);
  transition:border-color .2s ease}
.pt:hover{border-color:var(--brand)}
.pt.best{border-color:var(--wr)}
.pt.best:hover{border-color:var(--wr)}
.pt.best::before{content:'Most people start here';position:absolute;top:-11px;left:20px;padding:4px 9px;border-radius:var(--r1);
  background:var(--wr);color:#1a1405;font:600 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.pt span{min-height:4.6em}
.pt em{display:inline-block;margin-top:18px;padding:10px 14px;border:1px solid var(--line-2);border-radius:var(--r2);color:var(--ink-2)}
.pt:hover em{border-color:var(--brand);color:var(--brand-ink)}
.pt.best em{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.pt.best:hover em{background:var(--brand-ink);border-color:var(--brand-ink);color:var(--on-brand)}

/* The blog, four cards with a drawing each. */
.readGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.rd{display:flex;flex-direction:column;min-width:0;text-decoration:none;color:inherit;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r3);overflow:hidden;transition:border-color .15s ease}
.rd:hover{border-color:var(--brand)}
.rdFig{display:block;width:100%;height:auto;background:var(--card-2);border-bottom:1px solid var(--line)}
.rd b{margin:16px 18px 6px;font:500 17px/1.3 var(--serif);font-variation-settings:"opsz" 24;color:var(--ink);text-wrap:pretty}
.rd:hover b{color:var(--brand-ink)}
.rd span{flex:1;margin:0 18px;font-size:13.5px;line-height:1.55;color:var(--ink-3)}
.rd em{margin:14px 18px 18px;font:500 11.5px/1 var(--mono);font-style:normal;letter-spacing:.04em;color:var(--ink-4)}
.rdFig .k1{fill:var(--brand)} .rdFig .k2{fill:var(--line-2)} .rdFig .k3{fill:var(--wr)} .rdFig .k4{fill:var(--ok)}
.rdFig .st{fill:none;stroke:var(--line-2);stroke-width:2;stroke-linecap:round}
.rdFig .stb{stroke:var(--brand)}
.rdFig .std{stroke-dasharray:5 4}
@media (max-width:960px){ .readGrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .readGrid{grid-template-columns:1fr} }

/* Questions, as a card too, so the page ends the way it went on. */
.qas{border:1px solid var(--line);border-radius:var(--r3);background:var(--card);gap:0;overflow:hidden}
.qas div{padding:20px 24px;border-bottom:1px solid var(--line)}
.qas div:nth-child(odd){border-right:1px solid var(--line)}
.qas div:nth-last-child(-n+2){border-bottom:0}
@media (max-width:960px){
  .qas div:nth-child(odd){border-right:0}
  .qas div:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
  .qas div:last-child{border-bottom:0}
}
.lastCta{margin-top:clamp(56px,7vw,88px)}

/* Fewer words on the report: a figure where a paragraph was. */
.capfig{margin:16px 0 0;padding-top:14px;border-top:1px solid color-mix(in srgb,var(--er-solid) 24%,transparent)}
.capRow{display:grid;grid-template-columns:56px minmax(0,1fr) 40px;align-items:center;gap:12px;margin:0 0 8px;font-size:13px;color:var(--ink-3)}
.capRow i{display:block;height:10px;border-radius:2px;background:var(--er-solid);width:var(--w)}
.capRow.ok i{background:var(--ok-solid)}
.capRow b{font:500 18px/1 var(--serif);color:var(--ink);text-align:right}
.capfig p{margin:8px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.capfig p b{font-weight:650;color:var(--ink)}
.secBar{grid-column:1/-1;margin:14px 0 0}
.secTrack{display:flex;gap:2px;height:10px;border-radius:3px;overflow:hidden;background:var(--card-3)}
.secTrack i{display:block;height:100%}
.secKey{display:flex;flex-wrap:wrap;gap:6px 18px;margin:8px 0 0;font:500 12px/1.4 var(--mono);color:var(--ink-3)}
.secKey span{display:inline-flex;align-items:center;gap:6px}
.secKey i{width:8px;height:8px;border-radius:2px}
.closeStair{display:block;width:100%;max-width:520px;height:auto;margin:20px 0 0}
.closeStair .st{fill:none;stroke:var(--band-ink);stroke-opacity:.45;stroke-width:1.5;stroke-linejoin:round}
.closeStair .st.done{fill:var(--band-ink);fill-opacity:.22;stroke-opacity:.8}
.closeStair .st.here{fill:var(--wr);stroke:var(--wr);stroke-opacity:1}
.closeStair .st.off{stroke-dasharray:5 4}
.closeStair text{fill:var(--band-ink);font:500 11px var(--mono)}
.closeStair .here + text{fill:#1a1405}
.closeGrid .closeLegend{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;max-width:520px;margin:6px 0 0;
  font:500 10px/1.3 var(--mono);letter-spacing:.04em;text-transform:uppercase;opacity:.75}
.fpStats{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:14px 0 0}
.fpStats > div{padding:14px 16px;border:1px solid var(--line);border-top:2px solid var(--line-2);border-radius:var(--r3);background:var(--card)}
.fpStats > div.er{border-top-color:var(--er-solid)}
.fpStats > div.wr{border-top-color:var(--wr-solid)}
.fpStats > div.ok{border-top-color:var(--ok-solid)}
.fpStats b{display:block;font:500 30px/1 var(--serif);font-variation-settings:"opsz" 96;letter-spacing:-.02em;color:var(--ink)}
.fpStats b i{font-style:normal;font-size:20px;color:var(--ink-4)}
.fpStats span{display:block;margin-top:6px;font-size:12.5px;color:var(--ink-3)}
.fpNote{grid-column:1/-1;margin:12px 0 0;font-size:14px;line-height:1.55;color:var(--ink-2);max-width:88ch}
.fpMeta{grid-column:1/-1;margin:8px 0 0;font-size:13px;line-height:1.55;color:var(--ink-3)}
.fpMeta b{color:var(--ink);font-weight:600}

/* ---- next block ---- */

/* --- Design pass, 15 September 2026 ------------------------------------------------
   The hero gets depth: two soft glows in the brand blue and the amber behind
   the headline, and an amber highlighter swash under the question, the one
   accent the brand allows. Cards lift when they are under the pointer. */
.hero.land{position:relative;isolation:isolate}
.hero.land::after{content:'';position:absolute;left:50%;top:-60px;width:min(1400px,140vw);height:620px;transform:translateX(-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(52% 50% at 50% 8%,color-mix(in srgb,var(--brand) 13%,transparent),transparent 72%),
             radial-gradient(30% 38% at 80% 34%,color-mix(in srgb,var(--wr) 15%,transparent),transparent 72%),
             radial-gradient(28% 36% at 18% 40%,color-mix(in srgb,var(--brand) 9%,transparent),transparent 72%);
  filter:blur(8px)}
.hero.land h1 span{position:relative;display:inline-block;z-index:0}
.hero.land h1 span::after{content:'';position:absolute;left:-.04em;right:-.04em;bottom:.02em;height:.22em;z-index:-1;border-radius:3px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--wr) 60%,transparent),color-mix(in srgb,var(--wr) 22%,transparent));transform:skewX(-10deg) rotate(-.6deg)}
.heroWhat{margin:22px auto 0;max-width:680px;font-size:14.5px;line-height:1.6;color:var(--ink-3)}
.heroWhat a{color:var(--brand-ink);font-weight:500}
.heroForm{box-shadow:var(--sh2);transition:box-shadow .2s var(--ease),transform .2s var(--ease)}
.heroForm:focus-within{transform:translateY(-1px)}
.heroForm .go{box-shadow:0 8px 18px -10px color-mix(in srgb,var(--wr) 70%,transparent)}
.chFig,.screen{transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.chapter:hover .chFig{transform:translateY(-3px);box-shadow:var(--sh-hover)}
.figures b{background:linear-gradient(180deg,var(--ink) 40%,var(--brand-ink));-webkit-background-clip:text;background-clip:text;color:transparent}
.plans3 .plan,.plan{box-shadow:var(--sh1);transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.plans3 .plan:hover,.plan:hover{transform:translateY(-3px);box-shadow:var(--sh-hover)}
@media (prefers-reduced-motion:reduce){.chapter:hover .chFig,.plan:hover,.plans3 .plan:hover,.heroForm:focus-within{transform:none}}