/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   Website SEO Scanner — the pages on thereisnoagency.com
   Direction C · Signal map with B's centred score hero (Ringa's pick 2026-10-16), carried over from the Cookie
   Scanner. tools/ck/style.css loads FIRST and carries the whole system: type, grounds, the accent and the
   gradient, the plates, the browser frame, the scan box, the marks, the score ring, the hero, the waiting
   screen. ⛔ Nothing in tools/ck/ is edited — this file only adds what a crawl and an SEO report need.
   The one idea, in this tool's subject: the map's connectors leave your start page and end at the PAGES the
   crawl met — read, could not be read, blocked by your robots.txt, never reached. Same frame, same curves,
   same travelling dot, same two-ways-at-once state (colour + word + shape).
   Every class is sq-. Every colour is a token.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── the fifth mark: a suggestion. An improvement is neither a failure (st-no/st-warn) nor an untested
      check (st-na), so it gets the accent as a hollow ring — the only new mark this tool needs. ── */
.ck .ck-mk-sug{box-shadow:inset 0 0 0 2px var(--blue)}
.ck .ck-st-sug{color:var(--blue)}
.ck-hs .ck-counts .ck-mk-sug{box-shadow:inset 0 0 0 1.5px var(--blue)}

.sq .sq-h3{font-size:clamp(18px,1.6vw,23px);font-weight:700;letter-spacing:-.026em;line-height:1.22;color:var(--ink)}
.sq .sq-h4{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3)}
.sq .sq-ul{display:flex;flex-direction:column;gap:9px;margin-top:10px;min-width:0}
.sq .sq-ul li{display:flex;flex-direction:column;gap:3px;min-width:0;font-size:14.5px;line-height:1.5;color:var(--ink2)}
/* a real address can be 190 characters of query string: it never wraps the layout, and the title attribute
   keeps the whole thing reachable */
.sq .sq-url{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:14px;font-weight:500;color:var(--ink);direction:ltr}
.sq .sq-ev-d{display:block;max-width:76ch;font-size:14px;line-height:1.5;color:var(--ink2)}
.sq .sq-more{margin-top:10px;font-size:13.5px;color:var(--ink3)}

/* ── the crawl map ───────────────────────────────────────────────────────────────────────────────────────
   Geometry comes from one stage (1240×440) and is expressed in per cent, so the same markup is right at any
   width and for any number of lanes. seo-report.js computes the same numbers for a live report. */
.sq .sq-map{margin:clamp(22px,2.6vw,36px) 0 0}
.sq .sq-map-st{position:relative;max-width:1080px;margin-inline:auto;aspect-ratio:1240 / 440}
.sq .sq-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sq .sq-wire-b{fill:none;stroke-width:1.6;stroke-linecap:round;opacity:.42}
.sq .sq-wire-s{fill:none;stroke-width:7;stroke-linecap:round;stroke-dasharray:.4 99.6;stroke-dashoffset:100;
  animation:sqRun 3.1s cubic-bezier(.45,.05,.35,1) infinite;animation-delay:var(--d,0s)}
.sq .sq-wire-failed .sq-wire-b{stroke:none;stroke-dasharray:none}
.sq .sq-wire-failed path{stroke:var(--st-no);opacity:.5}
.sq .sq-wire-failed .sq-wire-s{animation:none;stroke-dasharray:4 7;stroke-dashoffset:0;stroke-width:1.6;opacity:.7}
.sq .sq-wire-blocked path,.sq .sq-wire-notreached path{stroke:var(--ck-wire)}
.sq .sq-wire-blocked .sq-wire-s,.sq .sq-wire-notreached .sq-wire-s{animation:none;stroke-dasharray:3 8;
  stroke-dashoffset:0;stroke-width:1.6;opacity:.55}
.sq .sq-wire-notreached .sq-wire-b{opacity:.2}
.sq .sq-wd-c{fill:var(--g2)}
@keyframes sqRun{0%{stroke-dashoffset:100}70%,100%{stroke-dashoffset:0}}

.sq .sq-map-fr{position:absolute;z-index:2;left:0;top:calc(100 / 440 * 100%);width:calc(368 / 1240 * 100%);text-align:left}
.sq .sq-lanes{position:absolute;inset:0;z-index:2;margin:0;padding:0;list-style:none}
.sq .sq-lane{position:absolute;left:calc(560 / 1240 * 100%);top:calc(var(--y) / 440 * 100%);
  width:calc(620 / 1240 * 100%);transform:translateY(-50%)}
.sq .sq-pill{display:inline-flex;align-items:center;gap:10px;max-width:100%;padding:11px 18px;border-radius:999px;
  background:var(--ck-tag);box-shadow:var(--ck-tag-sh),inset 0 0 0 1px var(--ck-tag-edge);
  font-size:14.5px;font-weight:500;color:var(--ink2)}
.sq .sq-pill b{font-size:17px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.sq .sq-lane-notreached .sq-pill{box-shadow:inset 0 0 0 1px var(--line);background:transparent}

/* the pages themselves: one tile per page the crawl read, the ones carrying a problem marked. Real counts only. */
.sq .sq-tiles{display:flex;flex-wrap:wrap;gap:5px;margin:12px 0 0 6px;max-width:330px}
.sq .sq-tile{width:20px;height:14px;border-radius:3px;background:var(--ck-u1);box-shadow:inset 0 0 0 1px var(--ck-edge)}
.sq .sq-tile.is-bad{background:transparent;box-shadow:inset 0 0 0 1.5px var(--st-warn)}
.sq .sq-tile-n{display:grid;place-items:center;width:auto;min-width:28px;height:14px;padding:0 5px;background:transparent;
  box-shadow:none;font-size:11px;font-weight:600;color:var(--ink3)}
.sq .sq-leg{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin:clamp(14px,1.6vw,22px) 0 0;
  font-size:13px;color:var(--ink2)}
.sq .sq-leg span{display:inline-flex;align-items:center;gap:8px}
.sq .sq-map--tool .sq-map-st{aspect-ratio:1240 / 400}
.sq .sq-map--tool .sq-pill{padding:8px 14px;font-size:13px}
.sq .sq-map--tool .sq-pill b{font-size:15px}
.sq .sq-map--tool .sq-tiles{max-width:200px;gap:4px}
.sq .sq-map--tool .sq-tile{width:15px;height:11px}

/* ── how a scan works (the switch is the cookie scanner's own .ck-seg) ── */
.sq .sq-how{display:flex;flex-direction:column;align-items:center}
.sq .sq-how>.sq-map{align-self:stretch;width:100%}   /* ⛔ shrink-to-fit would collapse the stage's per-cent geometry */
.sq .sq-how-i{max-width:58ch;margin:0 0 clamp(20px,2.2vw,28px);text-align:center;font-size:clamp(15px,1.2vw,17px);
  line-height:1.55;color:var(--ink2)}
.sq .sq-seg{width:min(680px,100%)}
.sq .sq-seg button span{white-space:nowrap}
.sq .sq-cap{margin-top:clamp(18px,2vw,26px);text-align:center}
.sq .sq-cap-t{font-size:clamp(19px,1.8vw,26px);font-weight:700;letter-spacing:-.026em;line-height:1.24;color:var(--ink)}
.sq .sq-cap-p{max-width:56ch;margin:9px auto 0;font-size:clamp(15px,1.2vw,17px);line-height:1.55;color:var(--ink2)}
/* each step lights its own part of the map and nothing else */
.sq .sq-how[data-step="1"] .sq-wire,.sq .sq-how[data-step="1"] .sq-lane{opacity:.26}
.sq .sq-how[data-step="2"] .sq-lane-failed,.sq .sq-how[data-step="2"] .sq-lane-blocked,
.sq .sq-how[data-step="2"] .sq-lane-notreached{opacity:.42}
.sq .sq-how .sq-wire,.sq .sq-how .sq-lane{transition:opacity .45s var(--ease)}

/* ── the fifteen checks, with what each is worth ── */
.sq .sq-chks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px clamp(24px,3.4vw,56px);
  padding:clamp(16px,2vw,26px) clamp(22px,3.2vw,46px)}
.sq .sq-chk{display:flex;align-items:center;gap:13px;padding:13px 0;border-top:1px solid var(--line-soft);
  font-size:15.5px;line-height:1.4;color:var(--ink)}
.sq .sq-chk-w{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;
  background:var(--tint-on);font-size:12.5px;font-weight:700;font-style:normal;color:var(--ink2);font-variant-numeric:tabular-nums}
.sq .sq-w5 .sq-chk-w{background:var(--blue);color:var(--white)}
.sq .sq-w3 .sq-chk-w{box-shadow:inset 0 0 0 1.5px var(--blue);background:transparent;color:var(--blue)}

/* ── the severities, and the deliberate chip ── */
.sq .sq-sev{margin-top:clamp(16px,1.8vw,24px)}
.sq .sq-sevs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,40px);
  margin-top:clamp(14px,1.6vw,20px)}
.sq .sq-sevs li{display:grid;grid-template-columns:12px minmax(0,1fr);gap:4px 12px;align-items:start}
.sq .sq-sevs .ck-mk{margin-top:7px}
.sq .sq-sevs b{font-size:15.5px;font-weight:700;color:var(--ink)}
.sq .sq-sevs span{grid-column:2;font-size:14.5px;line-height:1.5;color:var(--ink2)}
.sq .sq-sev-n{margin-top:clamp(18px,2vw,26px);padding-top:18px;border-top:1px solid var(--line);
  font-size:14.5px;line-height:1.6;color:var(--ink2)}
.sq .sq-sev-n b{font-weight:600;color:var(--ink)}
.sq .sq-delib{display:inline-block;margin-right:10px;padding:2px 9px;border-radius:999px;
  box-shadow:inset 0 0 0 1px var(--line-2);font-size:11.5px;font-weight:600;color:var(--ink2);white-space:nowrap}

/* ── what it cannot tell you ── */
.sq .sq-cannot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,4vw,64px);
  padding:clamp(10px,1.4vw,18px) clamp(22px,3.2vw,46px)}
.sq .sq-cannot li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:14px;align-items:start;
  padding:19px 0;border-top:1px solid var(--line-soft);font-size:15.5px;line-height:1.55;color:var(--ink2)}
.sq .sq-cannot .ck-al{margin-top:3px;color:var(--ink3)}

/* ── the limits ── */
.sq .sq-lim-n{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,32px)}
.sq .sq-lim-n li{display:flex;flex-direction:column;gap:5px}
.sq .sq-lim-n b{font-size:clamp(30px,3vw,42px);font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums}
.sq .sq-lim-n span{font-size:14px;line-height:1.4;color:var(--ink2)}
.sq .sq-lim-t{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,3vw,52px);
  margin-top:clamp(26px,3vw,40px);padding-top:clamp(22px,2.6vw,32px);border-top:1px solid var(--line)}
.sq .sq-lim-i p{margin-top:8px;font-size:15px;line-height:1.6;color:var(--ink2)}
.sq .sq-lim-note,.sq .sq-lim-ua{margin-top:18px;font-size:13.5px;line-height:1.6;color:var(--ink2)}
.sq .sq-lim-ua{display:flex;flex-wrap:wrap;align-items:center;gap:8px}

/* ── the example report, on the scanner page ── */
.sq .sq-ex{padding:0;overflow:hidden}
.sq .sq-ex-hs{display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(30px,3.4vw,46px) clamp(22px,3.2vw,46px) clamp(26px,3vw,38px)}
.sq .sq-ex-ring{width:clamp(120px,11vw,152px);margin-top:18px}
.sq .sq-ex-ring .ck-ring-v{stroke:url(#gr)}
.sq .sq-ex-h{margin:12px 0 0;max-width:36ch;font-size:clamp(19px,1.9vw,27px);font-weight:600;letter-spacing:-.022em;
  line-height:1.3;color:var(--ink);text-wrap:balance}
.sq .sq-ex .sq-cov{margin:0;padding:clamp(18px,2vw,24px) clamp(22px,3.2vw,46px);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);background:var(--tint-on);text-align:center}
.sq .sq-ex .sq-map{margin:clamp(22px,2.4vw,32px) clamp(22px,3.2vw,46px) 0}
.sq .sq-ex .sq-rows{margin:clamp(20px,2.2vw,28px) clamp(22px,3.2vw,46px) 0}
.sq .sq-ex .ck-notes{margin:clamp(16px,1.8vw,22px) clamp(22px,3.2vw,46px) 0;padding-bottom:clamp(22px,2.4vw,30px)}

/* ── the coverage line: shown on every report, word for word, and never made to look like a verdict ── */
.sq .sq-cov-l{margin-top:7px;font-size:clamp(16px,1.4vw,19px);font-weight:600;letter-spacing:-.016em;
  line-height:1.45;color:var(--ink)}
.sq .sq-cov h3{margin:0}

/* ── a finding, opened ── */
.sq .ck-row-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px clamp(28px,3.6vw,52px)}
.sq .sq-why,.sq .sq-fix,.sq .sq-ev,.sq .sq-urls{min-width:0}
.sq .sq-why p,.sq .sq-fix p{margin-top:9px;max-width:60ch;font-size:15px;line-height:1.6;color:var(--ink2)}
.sq .sq-ev,.sq .sq-urls{padding-top:2px}

/* ── the waiting screen: an elapsed clock, never a bar that has to pretend ── */
.sq .sq-clock{display:inline-flex;align-items:baseline;gap:9px;margin:clamp(18px,2vw,24px) auto 0;
  padding:9px 18px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2);font-size:14px;color:var(--ink2)}
.sq .sq-clock b{font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.sq .sq-w-pic{aspect-ratio:1240 / 330}
.sq .sq-ww-p{display:none}
.sq .sq-w-frame{left:calc(40 / 1240 * 100%);top:calc(90 / 330 * 100%);width:calc(380 / 1240 * 100%)}
.sq .sq-stages{display:flex;flex-wrap:wrap;justify-content:center;gap:10px clamp(18px,2.4vw,34px);
  margin:clamp(22px,2.4vw,30px) auto 0;max-width:1000px;list-style:none;padding:0}
.sq .sq-stages li{display:inline-flex;align-items:center;gap:10px;font-size:14.5px;color:var(--ink2)}
.sq .sq-stages i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--g2);opacity:.3;
  animation:sqPulse 3.2s var(--ease) infinite;animation-delay:calc(var(--i, 0) * .4s)}
.sq .sq-stages li:nth-child(2) i{animation-delay:.8s}
.sq .sq-stages li:nth-child(3) i{animation-delay:1.6s}
.sq .sq-stages li:nth-child(4) i{animation-delay:2.4s}
@keyframes sqPulse{0%,100%{opacity:.22;transform:scale(1)}50%{opacity:1;transform:scale(1.35)}}
.sq .sq-w-slow{max-width:60ch;margin:clamp(18px,2vw,24px) auto 0;font-size:14.5px;line-height:1.55;color:var(--ink2)}
.sq .sq-wait.is-queue .sq-wire-s,.sq .sq-wait.is-queue .ck-wl-s{animation:none;opacity:0}
.sq .sq-wait.is-queue .sq-wd-c{display:none}
.sq .sq-wait.is-queue .ck-sk>*{animation:none;opacity:0}
.sq .sq-wait.is-queue .ck-sk .ck-ln0{opacity:1}

/* ── how a scan works, as a list (under the example) ── */
.sq .sq-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.2vw,56px);
  padding:clamp(24px,3.2vw,44px) clamp(22px,3.2vw,46px);list-style:none;margin:0}
.sq .sq-steps li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:16px;align-items:start}
.sq .sq-steps b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--tint-on);
  font-size:14px;font-weight:700;color:var(--ink2)}
.sq .sq-steps p{margin-top:8px;font-size:15px;line-height:1.6;color:var(--ink2)}

/* ═══════════ the report's own sections (drawn by seo-report.js) ═══════════════════════════════════════ */
.sq .sq-rsec{margin-top:clamp(40px,4.4vw,72px)}
.sq .sq-rsec>.sq-h3,.sq .sq-rsec>h2{margin:0 0 clamp(14px,1.6vw,20px)}
.sq .sq-rlead{margin:0 0 clamp(16px,1.8vw,22px);max-width:70ch;font-size:15.5px;line-height:1.6;color:var(--ink2)}
.sq .sq-grp{margin-top:clamp(26px,3vw,42px)}
.sq .sq-grp-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px}
.sq .sq-grp-h .sq-h3{margin:0}
.sq .sq-grp-h span{font-size:14.5px;color:var(--ink2)}

/* the score, in one table */
.sq .sq-calc{width:100%;border-collapse:collapse;margin-top:clamp(12px,1.4vw,18px);font-size:14.5px}
.sq .sq-calc th{padding:0 14px 12px 0;border-bottom:1px solid var(--line);text-align:left;font-size:12.5px;
  font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3)}
.sq .sq-calc td{padding:13px 14px 13px 0;border-bottom:1px solid var(--line-soft);vertical-align:top;color:var(--ink2)}
.sq .sq-calc td:first-child{color:var(--ink);font-weight:500}
.sq .sq-calc .sq-num{text-align:right;padding-right:0;font-variant-numeric:tabular-nums;white-space:nowrap}
.sq .sq-calc tfoot td{border-bottom:0;padding-top:16px;font-weight:700;color:var(--ink)}
.sq .sq-calc .sq-na td{color:var(--ink3)}
.sq .sq-rules{display:flex;flex-direction:column;gap:7px;margin-top:clamp(16px,1.8vw,22px);font-size:14px;color:var(--ink2)}
.sq .sq-rules li{display:grid;grid-template-columns:10px minmax(0,1fr);gap:11px;align-items:center}
.sq .sq-rules i{width:6px;height:6px;border-radius:50%;background:var(--ink3)}
.sq .sq-formula{margin-top:14px;font-size:14.5px;font-weight:600;color:var(--ink)}

/* passed · not checked */
.sq .sq-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,4vw,64px)}
.sq .sq-list li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:14px;align-items:start;padding:16px 0;
  border-top:1px solid var(--line-soft)}
.sq .sq-list b{display:block;font-size:15.5px;font-weight:600;color:var(--ink)}
.sq .sq-list p{margin-top:4px;font-size:14.5px;line-height:1.55;color:var(--ink2)}
.sq .sq-list .ck-mk{margin-top:5px}
.sq .sq-list .ck-mk-ok{margin-top:2px}
.sq .sq-nc-d{display:block;margin-top:6px;font-size:13.5px;line-height:1.55;color:var(--ink3);white-space:pre-line}

/* every page we read */
.sq .sq-tbl-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
  margin-bottom:clamp(14px,1.6vw,20px)}
.sq .sq-filters{display:flex;flex-wrap:wrap;gap:8px}
.sq .sq-filters button{padding:9px 16px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2);
  font-size:13.5px;font-weight:500;color:var(--ink2);transition:color .2s ease,box-shadow .2s ease}
.sq .sq-filters button:hover{color:var(--ink)}
.sq .sq-filters button[aria-pressed="true"]{background:var(--blue);box-shadow:none;color:var(--white)}
.sq .sq-filters button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.sq .sq-tbl-w{overflow-x:auto;overscroll-behavior-x:contain}
.sq .sq-tbl{width:100%;min-width:900px;border-collapse:collapse;font-size:14px}
.sq .sq-tbl th{position:sticky;top:0;z-index:1;padding:11px 16px 11px 0;background:var(--panel);
  border-bottom:1px solid var(--line);text-align:left;font-size:12px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink3);white-space:nowrap}
.sq .sq-tbl td{padding:12px 16px 12px 0;border-bottom:1px solid var(--line-soft);vertical-align:top;color:var(--ink2)}
.sq .sq-tbl td:first-child{max-width:320px;color:var(--ink)}
.sq .sq-tbl .sq-c{text-align:center;padding-right:16px;font-variant-numeric:tabular-nums}
.sq .sq-tbl tr[hidden]{display:none}
.sq .sq-tbl-n{margin-top:14px;font-size:13.5px;color:var(--ink3)}
.sq .sq-pm{display:inline-flex;align-items:center;gap:6px;font-size:13px;white-space:nowrap}

/* your site, as we found it */
.sq .sq-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(28px,4vw,64px)}
.sq .sq-facts li{display:flex;flex-direction:column;gap:5px;padding:16px 0;border-top:1px solid var(--line-soft)}
.sq .sq-facts dt,.sq .sq-facts .sq-k{font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--ink3)}
.sq .sq-facts .sq-v{font-size:15px;line-height:1.5;color:var(--ink)}

/* worth knowing (the engine's own notes — e.g. the whole Crawl-delay explanation) */
.sq .sq-note{display:grid;grid-template-columns:16px minmax(0,1fr);gap:14px;align-items:start;
  padding:18px 0;border-top:1px solid var(--line-soft);font-size:15px;line-height:1.62;color:var(--ink2)}
.sq .sq-note:first-child{border-top:0;padding-top:0}
.sq .sq-note .ck-al{margin-top:3px;color:var(--ink3)}

/* ── no score at all ⛔ there is no number and no label — not a zero (SEO-SCANNER-API rule 1) ── */
.sq .sq-noscore{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:clamp(22px,2.4vw,30px)}
.sq .sq-noscore-r{position:relative;width:168px;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;
  box-shadow:inset 0 0 0 6.5px var(--line)}
.sq .sq-noscore-r b{font-size:25px;font-weight:700;letter-spacing:-.03em;color:var(--ink2)}
.sq .sq-noscore-p{max-width:46ch;text-align:center;font-size:14.5px;line-height:1.6;color:var(--ink2)}

/* ── endings ── */
.sq .sq-end-ic{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--tint-on);color:var(--ink2)}
.sq .sq-end-ic svg{width:26px;height:26px}

/* ═══════════ the phone (393) ═══════════════════════════════════════════════════════════════════════════
   The map stops being a stage and becomes rows on a rail — the same move the cookie scanner's company map
   makes. The curves are a computer idea; a 393 px screen gets the list honestly instead. */
@media (max-width:1000px){
  .sq .sq-chks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sq .sq-lim-n{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sq .sq-sevs,.sq .sq-steps{grid-template-columns:1fr;gap:clamp(18px,2.4vw,28px)}
  .sq .sq-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .sq .sq-map-st{aspect-ratio:auto;display:flex;flex-direction:column;gap:18px}
  .sq .sq-wires{display:none}
  .sq .sq-map-fr{position:static;width:100%}
  .sq .sq-lanes{position:static;display:flex;flex-direction:column;gap:14px;
    padding-left:17px;border-left:2px solid var(--line-2)}
  /* ⛔ left/top/transform are the stage's, and `position:relative` would keep offsetting by them */
  .sq .sq-lane{position:relative;left:auto;top:auto;width:100%;transform:none}
  .sq .sq-lane::before{content:"";position:absolute;left:-23px;top:19px;width:12px;height:2px;background:var(--line-2)}
  .sq .sq-pill{flex-wrap:wrap;row-gap:2px;border-radius:20px}
  .sq .sq-tiles{max-width:100%;margin-left:0}
  .sq .sq-ww-d{display:none}
  .sq .sq-ww-p{display:block}
  .sq .sq-w-pic{aspect-ratio:365 / 270}
  .sq .sq-w-frame{left:calc(72 / 365 * 100%);top:0;width:calc(220 / 365 * 100%)}
}
@media (max-width:640px){
  .sq .sq-chks,.sq .sq-cannot{grid-template-columns:1fr}
  .sq .sq-list,.sq .sq-facts{grid-template-columns:1fr}
  .sq .sq-lim-t{grid-template-columns:1fr}
  .sq .ck-row-in{grid-template-columns:1fr;padding-left:0;gap:20px}
  .sq .sq-h3{font-size:20px}
  .sq .sq-seg{display:flex;flex-direction:column;gap:4px;width:100%;border-radius:22px}
  .sq .sq-seg .ck-seg-t{display:none}
  .sq .sq-seg button{justify-content:flex-start;height:44px;padding:0 14px;border-radius:999px}
  .sq .sq-seg button[aria-selected="true"]{background:var(--ck-thumb);box-shadow:var(--ck-thumb-sh)}
  .sq .sq-ex-hs{padding-inline:18px}
  .sq .sq-ex .sq-cov,.sq .sq-ex .sq-map,.sq .sq-ex .sq-rows,.sq .sq-ex .ck-notes{margin-inline:0;padding-inline:18px}
  .sq .sq-tiles{max-width:100%}
  /* 26 Oct his word: "the timer is nicely aligned vertically centered but the text in the right is a little too down" —
     the words sat on the clock's baseline (19 vs 14 px), so they read low; on the centre line they sit beside it */
  .sq .sq-clock{width:100%;justify-content:center;align-items:center}
  .sq .sq-stages{flex-direction:column;align-items:flex-start;gap:9px;text-align:left}
  .sq .sq-calc{font-size:13.5px}
  .sq .sq-calc th:nth-child(2),.sq .sq-calc td:nth-child(2){display:none}
  .sq .sq-noscore-r{width:148px}
}
@media (prefers-reduced-motion:reduce){
  .sq .sq-wire-s{animation:none;stroke-dashoffset:0;stroke-dasharray:none;opacity:.35;stroke-width:1.6}
  .sq .sq-stages i{animation:none;opacity:.6}
  .sq .sq-wd-c{display:none}
  .sq .sq-wd-c animateMotion{display:none}
}

/* ═══════════ two shared pages that now carry two tools ════════════════════════════════════════════════
   ⛔ Fixed here and not in tools/ck/style.css: that file is the live cookie scanner's and stays untouched.
   /bot/ has a second button now (one robot, two tools), and its row was laid out for exactly one. */
.ck-botp .ck-bot-cta{flex-wrap:wrap;gap:12px}
@media (max-width:520px){
  .ck-botp .ck-bot-cta{flex-direction:column;align-items:stretch}
  .ck-botp .ck-bot-cta .btn{justify-content:center}
}
/* /tools/ : the second card sits under the first, with the same rhythm as one card had */
.ck-toolsp .sq-tcard{margin-top:clamp(20px,2.4vw,32px)}

/* ⛔ 2026-10-20 · the /tools/ hub card. Its picture column is 420–550 px wide, and the horizontal stage needs about
   900: at 1440 the pills touched and hid the "pages read" tiles, at 1024 they wrapped over each other. So the card
   always draws the map's own stacked form — the one the phone already uses (frame, then the lanes on a rail) —
   kept to a calm width. Scoped to .sq-tcard; the SEO page's maps are untouched. */
.sq-tcard .sq-map--tool .sq-map-st{aspect-ratio:auto;display:flex;flex-direction:column;gap:16px;max-width:440px;margin-inline:auto}
.sq-tcard .sq-map--tool .sq-wires{display:none}
.sq-tcard .sq-map--tool .sq-map-fr{position:static;width:100%}
.sq-tcard .sq-map--tool .sq-lanes{position:static;display:flex;flex-direction:column;gap:12px;
  padding-left:17px;border-left:2px solid var(--line-2)}
.sq-tcard .sq-map--tool .sq-lane{position:relative;left:auto;top:auto;width:100%;transform:none}
.sq-tcard .sq-map--tool .sq-lane::before{content:"";position:absolute;left:-23px;top:17px;width:12px;height:2px;background:var(--line-2)}
.sq-tcard .sq-map--tool .sq-pill{flex-wrap:wrap;row-gap:2px;border-radius:20px}
.sq-tcard .sq-map--tool .sq-tiles{max-width:100%;margin-left:0}