/* status.css — the report's four states, an EXTENSION of the design system (the DS has `ok`/`no` only "inside a literal
   yes/no mark" — a report row's state IS that mark). Rules: the plain colour only on small marks (dots, ticks, rings,
   a thin bar); the -ink colour for a state WORD; never a red/amber/green ground, paragraph or heading. Both themes pass
   contrast: -ink ≥ 4.5:1 on canvas and panel, marks ≥ 3:1. */
html, html[data-theme="light"] {
  --st-no: #DC2626;  --st-no-ink: #B91C1C;
  --st-warn: #D97706; --st-warn-ink: #A85008;
  --st-ok: #16A34A;  --st-ok-ink: #13803A;
  --st-na: #8E8E97;  --st-na-ink: #5E5E68;
}
html[data-theme="dark"] {
  --st-no: #FF5A5A;  --st-no-ink: #FF7B7B;
  --st-warn: #F5B13D; --st-warn-ink: #F7C063;
  --st-ok: #3FCF7F;  --st-ok-ink: #5BDB93;
  --st-na: #7A7A84;  --st-na-ink: #A6A6AF;
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   C · Signal map — the Cookie Scanner pages on thereisnoagency.com
   The one idea: the data flow made visible. The visitor's site in a BrowserFrame, thin connectors to the
   companies, a dot that travels only when data is really sent (red when it shouldn't be), and a three-way
   switch No click · Accept · Reject. Every class is ck-. Every colour is a token (the drawn-interface values
   are the live homepage's own --hs-* tokens, repeated here as --ck-*).
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */

.ck{
  --ck-sec:clamp(88px,15vw,216px);
  /* the live homepage's drawn-interface palette (light) */
  --ck-u0:#F4F5F8; --ck-u1:#EDEEF3; --ck-u2:#DFE0E7; --ck-u3:#C8C9D2; --ck-u5:#3C3C46; --ck-u6:#9C9DA8;
  --ck-face:#FFFFFF; --ck-edge:rgba(10,10,12,.07); --ck-ln0:rgba(10,10,12,.07);
  --ck-p0:rgba(47,107,255,.14); --ck-p1:rgba(139,92,246,.22);
  --ck-sun:rgba(255,255,255,.9); --ck-hill:rgba(255,255,255,.6); --ck-wh:rgba(255,255,255,.95); --ck-wh2:rgba(255,255,255,.7);
  --ck-cur:#16161A; --ck-cur-edge:#FFFFFF; --ck-cart:#3A3A42;
  --ck-tag:#FFFFFF; --ck-tag-edge:rgba(10,10,12,.08);
  --ck-tag-sh:0 12px 26px -16px rgba(28,28,70,.34),0 2px 6px rgba(28,28,70,.06);
  /* the map's wires */
  --ck-wire:rgba(10,10,12,.30);
  --ck-hair:#DCDCE3;
  --ck-thumb:var(--panel);
  --ck-thumb-sh:0 1px 2px rgba(10,10,12,.06),0 6px 16px -8px rgba(10,10,12,.22),inset 0 0 0 1px var(--line-2);
  display:block;
}
html[data-theme="dark"] .ck{
  --ck-u0:rgba(255,255,255,.04); --ck-u1:rgba(255,255,255,.07); --ck-u2:rgba(255,255,255,.13); --ck-u3:rgba(255,255,255,.24);
  --ck-u5:#E4E2DC; --ck-u6:#8C8B92;
  --ck-face:#222228; --ck-edge:rgba(255,255,255,.09); --ck-ln0:rgba(255,255,255,.08);
  --ck-p0:rgba(96,140,255,.18); --ck-p1:rgba(139,92,246,.26);
  --ck-sun:rgba(255,255,255,.85); --ck-hill:rgba(255,255,255,.35); --ck-wh:rgba(255,255,255,.9); --ck-wh2:rgba(255,255,255,.62);
  --ck-cur:#F2F0EB; --ck-cur-edge:#141417; --ck-cart:#DAD8D2;
  --ck-tag:#2A2A31; --ck-tag-edge:rgba(255,255,255,.12);
  --ck-tag-sh:0 12px 26px -14px rgba(0,0,0,.7),0 2px 6px rgba(0,0,0,.35);
  --ck-wire:rgba(242,240,235,.34);
  --ck-hair:#36363E;
  --ck-thumb:#2E2E36;
  --ck-thumb-sh:0 1px 2px rgba(0,0,0,.4),0 6px 16px -8px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.1);
}
.ck .ck-defs{position:absolute;width:0;height:0;overflow:hidden}
.ck .ck-s1{stop-color:var(--g1)} .ck .ck-s2{stop-color:var(--g2)} .ck .ck-s3{stop-color:var(--g3)}
.ck .ck-sp0{stop-color:var(--ck-p0)} .ck .ck-sp1{stop-color:var(--ck-p1)}
.ck :is(h1,h2,h3,.ck-h2,.ck-h3){text-wrap:balance}
.ck :is(p,li){text-wrap:pretty}

/* the eyebrow pill: the brand law (sentence case, no tracking) over the live sheet's leftover capitals */
.ck .pill{letter-spacing:0;text-transform:none;font-size:12.5px;margin:0}

/* ── sections ─────────────────────────────────────────────────────────────────────────────────────────── */
.ck-sec{padding-top:var(--ck-sec)}
.ck-sec-s{padding-top:clamp(80px,11vw,160px)}
.ck .shead .lead{margin:0}
.ck-h3{font-size:clamp(17px,1.4vw,19px);font-weight:700;letter-spacing:-.022em;line-height:1.25;color:var(--ink)}

/* ── hero ─────────────────────────────────────────────────────────────────────────────────────────────── */
.ck-hero{padding-top:clamp(96px,7.8vw,112px);text-align:center}
.ck-h1{max-width:13.2em;margin:18px auto 0}
.ck-scanner .ck-h1{max-width:none;font-size:clamp(35px,5vw,72px)}
.ck-lead{max-width:56ch;margin:14px auto 0}
.ck-hero-f{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 28px;margin-top:12px}
.ck-hero-f .ck-facts{margin:0}
.ck-down{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:0;font-size:14.5px;font-weight:600;color:var(--ink2);transition:color .2s ease}
.ck-down:hover{color:var(--blue)}
.ck-down .ck-arr{transition:transform .3s var(--ease)}
.ck-down:hover .ck-arr{transform:translateY(2px)}

/* ── the scan box: one white pill, the field and the blue button inside ────────────────────────────────── */
.ck-scan{position:relative;max-width:640px;margin:24px auto 0}
.ck-scan-f{position:relative;display:flex;align-items:center;gap:8px;height:68px;padding:8px 8px 8px 28px;
  background:var(--panel);border:1px solid var(--line);border-radius:999px;box-shadow:var(--sh-panel);
  transition:border-color .22s var(--ease),box-shadow .22s var(--ease)}
.ck-scan-f:hover{border-color:var(--line-on)}
.ck-scan-f:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px var(--ring-soft),var(--sh-panel)}
.ck-scan-i{flex:1 1 auto;min-width:0;height:100%;padding:0;border:0;background:transparent;outline:none;
  font:inherit;font-size:17px;font-weight:500;letter-spacing:-.005em;color:var(--ink)}
.ck-scan-i::placeholder{color:var(--ink3);font-weight:400}
.ck-scan-i:focus-visible{outline:none}
.ck-scan-b{flex:none;height:50px;padding:0 24px}
.ck-scan-b .ck-arr{transition:transform .3s var(--ease)}
.ck-scan-b:hover .ck-arr{transform:translateX(3px)}
.ck-scan-b:active{transform:translateY(1px);box-shadow:var(--sh-btn)}
/* busy: the label says Starting…, a thin progress line runs along the pill's bottom edge */
.ck-scan-f::after{content:"";position:absolute;left:34px;right:34px;bottom:-1px;height:2px;border-radius:2px;background:var(--grad);
  transform:scaleX(0);transform-origin:0 50%;opacity:0;pointer-events:none}
.ck-scan.is-busy .ck-scan-f::after{opacity:1;animation:ckBusy 1.8s var(--ease) infinite}
.ck-scan.is-busy .ck-scan-b{background:var(--blueH)}
@keyframes ckBusy{0%{transform:scaleX(0);transform-origin:0 50%}50%{transform:scaleX(1);transform-origin:0 50%}50.01%{transform-origin:100% 50%}100%{transform:scaleX(0);transform-origin:100% 50%}}
.ck-scan.is-bad .ck-scan-f{border-color:var(--ink2)}
.ck-scan-m{display:flex;align-items:center;justify-content:center;gap:9px;margin:14px 0 0;font-size:14.5px;font-weight:500;line-height:1.45;color:var(--ink)}
.ck-scan-m[hidden]{display:none}
.ck-scan-m::before{content:"";flex:none;width:17px;height:17px;border-radius:50%;box-shadow:inset 0 0 0 1.6px currentColor;
  background:linear-gradient(currentColor,currentColor) 50% 4px/1.8px 5.5px no-repeat,radial-gradient(circle at 50% 12px,currentColor 1.1px,transparent 1.5px)}
.ck-ts{display:flex;justify-content:center}
.ck-ts:empty{display:none}
.ck-ts:not(:empty){margin-top:14px}
.ck-facts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;margin:20px 0 0;font-size:14.5px;font-weight:500;color:var(--ink2)}
.ck-facts li{display:inline-flex;align-items:center;gap:7px}
.ck-tk{flex:none;color:var(--blue)}

/* ── the switch: three visits, in the browser chrome's own material ────────────────────────────────────── */
.ck-seg{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:min(462px,100%);margin-inline:auto;padding:5px;
  border-radius:999px;background:var(--chrome);box-shadow:inset 0 0 0 1px var(--line-2)}
.ck-seg-t{position:absolute;top:5px;bottom:5px;left:5px;width:calc((100% - 10px) / 3);border-radius:999px;background:var(--ck-thumb);
  box-shadow:var(--ck-thumb-sh);transform:translateX(calc(var(--i,0) * 100%));transition:transform .55s var(--ease)}
.ck-seg button{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:9px;height:46px;padding:0 10px;
  border-radius:999px;font-size:14.5px;font-weight:600;letter-spacing:-.006em;color:var(--ink2);white-space:nowrap;transition:color .25s ease}
.ck-seg button:hover{color:var(--ink)}
.ck-seg button b{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;font-size:12.5px;font-weight:700;
  color:var(--ink2);box-shadow:inset 0 0 0 1.5px var(--line-on);font-variant-numeric:tabular-nums;
  transition:background-color .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease)}
.ck-seg button[aria-selected="true"]{color:var(--ink)}
.ck-seg button[aria-selected="true"] b{background:var(--blue);color:var(--white);box-shadow:none}
.ck-seg button:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;border-radius:999px}
.ck-vd{flex:none;width:7px;height:7px;border-radius:50%}
.ck-vd.ck-no{background:var(--st-no)} .ck-vd.ck-ok{background:var(--st-ok)} .ck-vd.ck-warn{background:var(--st-warn)}
.ck-seg-s{width:min(372px,100%);padding:4px}
.ck-seg-s .ck-seg-t{top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / 3)}
.ck-seg-s button{height:36px;font-size:13.5px;gap:7px}
.ck-seg-s button b{width:19px;height:19px;font-size:12.5px}

/* ── the map ──────────────────────────────────────────────────────────────────────────────────────────── */
.ck-map{position:relative;container-type:inline-size}
.ck-stage{position:relative;--u:calc(100cqw / var(--sw))}
.ck-art{position:relative;aspect-ratio:var(--sw) / var(--sh)}
.ck-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.ck-fpos{position:absolute;z-index:2;left:calc(var(--fx) / var(--sw) * 100%);top:calc(var(--fy) / var(--sh) * 100%);width:calc(var(--fw) / var(--sw) * 100%)}
.ck-fr .bar span{white-space:nowrap}
.ck-fr .vp{line-height:0}
.ck-port{position:absolute;z-index:3;top:50%;width:calc(9 * var(--u,1px));height:calc(9 * var(--u,1px));margin-top:calc(-4.5 * var(--u,1px));border-radius:50%;background:var(--panel);
  box-shadow:0 0 0 1.5px var(--ck-wire),0 2px 6px rgba(10,10,12,.12)}
.ck-port-r{right:calc(-4.5 * var(--u,1px))} .ck-port-l{left:calc(-4.5 * var(--u,1px))}

/* the drawn site (the live homepage's drawn-interface palette) */
.ck-site{display:block;width:100%;height:auto;overflow:visible}
.ck-site .ck-u0{fill:var(--ck-u0)} .ck-site .ck-u1{fill:var(--ck-u1)} .ck-site .ck-u2{fill:var(--ck-u2)} .ck-site .ck-u3{fill:var(--ck-u3)}
.ck-site .ck-u5{fill:var(--ck-u5)} .ck-site .ck-u6{fill:var(--ck-u6)}
.ck-site .ck-sun{fill:var(--ck-sun)} .ck-site .ck-hill{fill:var(--ck-hill)} .ck-site .ck-wh{fill:var(--ck-wh)} .ck-site .ck-wh2{fill:var(--ck-wh2)}
.ck-site .ck-ghost{fill:none;stroke:var(--ck-u3);stroke-width:1}
.ck-site .ck-ln0{fill:none;stroke:var(--ck-ln0);stroke-width:1}
.ck-site .ck-cart{fill:none;stroke:var(--ck-cart);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ck-site .ck-cartw{fill:var(--ck-cart)}
.ck-site .ck-bk{fill:var(--ck-face);stroke:var(--ck-edge);stroke-width:1}
.ck-site .ck-chal{fill:var(--ck-face);stroke:var(--ck-edge);stroke-width:1}
.ck-site .ck-chk-b{fill:none;stroke:var(--ck-u3);stroke-width:1.2}
.ck-site .ck-bn{filter:drop-shadow(0 8px 14px rgba(28,28,70,.16));transform-box:fill-box}
.ck-site .ck-bn-p{fill:var(--ck-face);stroke:var(--ck-edge);stroke-width:1}
.ck-site .ck-bn-gh{fill:var(--ck-face);stroke:var(--ck-u3);stroke-width:1}
.ck-site .ck-bn-ac{fill:var(--ck-u5)}
.ck-site .ck-bn text{font-family:Figtree,-apple-system,"Helvetica Neue",Arial,sans-serif;font-size:10.5px;font-weight:600;letter-spacing:-.01em;text-anchor:middle}
.ck-site .ck-bn-r text{fill:var(--ck-u5)}
.ck-site .ck-bn-a text{fill:var(--ck-face)}
.ck-site .ck-bn-a,.ck-site .ck-bn-r{transform-box:fill-box;transform-origin:50% 50%}
.ck-site .ck-cur path{fill:var(--ck-cur);stroke:var(--ck-cur-edge);stroke-width:1.1;stroke-linejoin:round}
.ck-site .ck-cur{transform:translate(262px,128px)}
.ck-site .ck-clk{fill:none;stroke:var(--blue);stroke-width:2;opacity:0;transform:translate(326px,195px) scale(.3)}
html[data-theme="dark"] .ck-site .ck-bn{filter:drop-shadow(0 8px 16px rgba(0,0,0,.45))}

/* the companies — small pills that float on a tag shadow; the mark sits where the line arrives */
.ck-nodes{position:absolute;inset:0;z-index:2;pointer-events:none}
.ck-co{position:absolute;top:calc(var(--y) / var(--sh) * 100%);translate:0 -50%;pointer-events:auto;
  transition:opacity .45s var(--ease),transform .6s cubic-bezier(.34,1.56,.64,1)}
.ck-co-r{left:calc(var(--xr) / var(--sw) * 100%)}
.ck-co-l{right:calc((var(--sw) - var(--xl)) / var(--sw) * 100%)}
.ck-co-b{display:flex;align-items:center;gap:calc(12 * var(--u,1px));padding:calc(11 * var(--u,1px)) calc(20 * var(--u,1px)) calc(11 * var(--u,1px)) calc(15 * var(--u,1px));border-radius:999px;text-align:left;white-space:nowrap;
  background:var(--pbg,var(--ck-tag));box-shadow:inset 0 0 0 1px var(--pbd,var(--ck-tag-edge)),var(--psh,var(--ck-tag-sh));
  transition:background-color .4s var(--ease),box-shadow .4s var(--ease),transform .25s var(--ease)}
button.ck-co-b{cursor:pointer}
button.ck-co-b:hover{transform:translateY(-2px)}
.ck-co-l .ck-co-b{flex-direction:row-reverse;padding:calc(11 * var(--u,1px)) calc(15 * var(--u,1px)) calc(11 * var(--u,1px)) calc(20 * var(--u,1px));text-align:right}
.ck-co-l .ck-co-t{align-items:flex-end}
.ck-co-l .ck-co-ws{justify-items:end}
.ck-co-m{flex:none;width:calc(10 * var(--u,1px));height:calc(10 * var(--u,1px));border-radius:50%;background:var(--mk,transparent);box-shadow:inset 0 0 0 2px var(--mr,var(--st-na));
  transition:background-color .45s var(--ease),box-shadow .45s var(--ease)}
.ck-co-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.ck-co-t b{font-size:calc(15 * var(--u,1px));font-weight:600;letter-spacing:-.012em;line-height:1.25;color:var(--pfg,var(--ink));transition:color .4s ease}
.ck-co-ws{display:grid;font-size:calc(13.5 * var(--u,1px));font-weight:500;line-height:1.3;color:var(--wd,var(--ink2));transition:color .45s ease}
.ck-co-w{grid-area:1 / 1;opacity:0;transition:opacity .35s ease}
.ck-map[data-visit="1"] .ck-co-w[data-v="1"],.ck-map[data-visit="2"] .ck-co-w[data-v="2"],.ck-map[data-visit="3"] .ck-co-w[data-v="3"]{opacity:1}
.ck-co-1 .ck-co-b{padding-top:calc(8 * var(--u,1px));padding-bottom:calc(8 * var(--u,1px))}
.ck-map--ex .ck-co-b{padding:calc(8 * var(--u,1px)) calc(18 * var(--u,1px)) calc(8 * var(--u,1px)) calc(13 * var(--u,1px));gap:calc(11 * var(--u,1px))}
.ck-map--ex .ck-co-t b{font-size:calc(14 * var(--u,1px))}
.ck-map--ex .ck-co-ws{font-size:calc(13 * var(--u,1px))}
.ck-co-1 .ck-co-t{flex-direction:row;align-items:baseline;gap:calc(9 * var(--u,1px))}
.ck-co-1 .ck-co-t b{font-size:calc(14 * var(--u,1px))}
.ck-co-1 .ck-co-ws{font-size:calc(13 * var(--u,1px))}

/* the wires */
.ck-ln-b,.ck-ln-s,.ck-ln-h{fill:none;stroke-linecap:round;vector-effect:none}
.ck-ln-b{stroke:var(--ln,var(--ck-hair));stroke-width:var(--lw,1.2);stroke-dasharray:100;stroke-dashoffset:0;
  transition:stroke .5s var(--ease),stroke-width .5s var(--ease),stroke-dashoffset 1.15s var(--ease),opacity .45s var(--ease)}
.ck-ln-s{stroke:var(--ln,transparent);stroke-width:var(--dw,6.5);stroke-dasharray:.4 99.6;stroke-dashoffset:100;opacity:var(--sg,0);transition:opacity .35s ease}
.ck-ln-c{fill:none;stroke-linecap:round;stroke:var(--ink);stroke-width:2;stroke-dasharray:.4 99.6;stroke-dashoffset:100;opacity:var(--sh2,0);transition:opacity .35s ease}
.ck-ln-h{stroke:var(--canvas);stroke-width:4.4;stroke-dasharray:.4 99.6;stroke-dashoffset:100;opacity:var(--sh2,0);transition:opacity .35s ease}
.ck-map[data-visit="1"] .ck-ln-s,.ck-map[data-visit="1"] .ck-ln-h,.ck-map[data-visit="1"] .ck-ln-c{animation:ckRun1 2.5s linear infinite;animation-delay:calc(.35s + var(--d,0s))}
.ck-map[data-visit="2"] .ck-ln-s,.ck-map[data-visit="2"] .ck-ln-h,.ck-map[data-visit="2"] .ck-ln-c{animation:ckRun2 2.5s linear infinite;animation-delay:calc(1.45s + var(--d,0s))}
.ck-map[data-visit="3"] .ck-ln-s,.ck-map[data-visit="3"] .ck-ln-h,.ck-map[data-visit="3"] .ck-ln-c{animation:ckRun3 2.5s linear infinite;animation-delay:calc(1.45s + var(--d,0s))}
@keyframes ckRun1{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes ckRun2{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes ckRun3{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}

/* the five states — the switch sets data-visit, every pill and wire carries its state per visit */
.ck-map[data-visit="1"] [data-s1="leak"],.ck-map[data-visit="2"] [data-s2="leak"],.ck-map[data-visit="3"] [data-s3="leak"]{
  --ln:var(--st-no);--lw:1.7;--sg:1;--mk:var(--st-no);--mr:var(--st-no);--wd:var(--st-no-ink)}
.ck-map[data-visit="1"] [data-s1="sent"],.ck-map[data-visit="2"] [data-s2="sent"],.ck-map[data-visit="3"] [data-s3="sent"]{
  --ln:var(--ck-wire);--lw:1.45;--sg:1;--mk:var(--ink);--mr:var(--ink);--wd:var(--ink2)}
.ck-map[data-visit="1"] [data-s1="free"],.ck-map[data-visit="2"] [data-s2="free"],.ck-map[data-visit="3"] [data-s3="free"]{
  --ln:var(--ck-wire);--lw:1.45;--sg:1;--sh2:1;--dw:8;--mk:radial-gradient(circle,var(--ink) 0 1.7px,transparent 2.1px);--mr:var(--ink);--wd:var(--ink2);
  --tdb:radial-gradient(circle,var(--ink) 0 1.2px,var(--canvas) 1.5px);--tds:inset 0 0 0 1.5px var(--ink)}
.ck-map[data-visit="1"] [data-s1="ring"],.ck-map[data-visit="2"] [data-s2="ring"],.ck-map[data-visit="3"] [data-s3="ring"]{
  --ln:var(--ck-hair);--lw:1.2;--sg:0;--mk:transparent;--mr:var(--st-na);--wd:var(--ink2)}
.ck-map[data-visit="1"] [data-s1="none"],.ck-map[data-visit="2"] [data-s2="none"],.ck-map[data-visit="3"] [data-s3="none"]{
  --ln:transparent;--lw:1;--sg:0;--mk:transparent;--mr:var(--line-on);--wd:var(--ink2);--pbg:transparent;--psh:0 0 0 transparent;--pbd:var(--line-on);--pfg:var(--ink2)}

/* a company picked (report): the others step back */
.ck-map.has-sel .ck-co:not(.is-sel){opacity:.42}
.ck-map.has-sel .ck-ln:not(.is-sel) .ck-ln-b{opacity:.35}
.ck-map.has-sel .ck-ln:not(.is-sel) :is(.ck-ln-s,.ck-ln-h,.ck-ln-c){opacity:0}
.ck-co.is-sel .ck-co-b{box-shadow:inset 0 0 0 1.5px var(--blue),var(--psh,var(--ck-tag-sh))}

/* the visit, told by the frame: banner up · the cursor clicks Accept / Reject · the banner goes */
.ck-map[data-visit="1"] .ck-bn{animation:ckBn1 .7s var(--ease) both}
.ck-map[data-visit="2"] .ck-bn{animation:ckBnOut2 1.7s var(--ease) both}
.ck-map[data-visit="3"] .ck-bn{animation:ckBnOut3 1.7s var(--ease) both}
.ck-map[data-visit="2"] .ck-bn-a{animation:ckPress2 1.7s var(--ease) both}
.ck-map[data-visit="3"] .ck-bn-r{animation:ckPress3 1.7s var(--ease) both}
.ck-map[data-visit="2"] .ck-cur{animation:ckCurA 1.7s var(--ease) both}
.ck-map[data-visit="3"] .ck-cur{animation:ckCurR 1.7s var(--ease) both}
.ck-map[data-visit="1"] .ck-cur{animation:none;opacity:0}
.ck-map[data-visit="2"] .ck-clk{animation:ckClkA 1.7s var(--ease) both}
.ck-map[data-visit="3"] .ck-clk{animation:ckClkR 1.7s var(--ease) both}
@keyframes ckBn1{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes ckBnOut2{0%{opacity:0;transform:translateY(12px)}16%,60%{opacity:1;transform:none}82%,100%{opacity:0;transform:translateY(16px)}}
@keyframes ckBnOut3{0%{opacity:0;transform:translateY(12px)}16%,60%{opacity:1;transform:none}82%,100%{opacity:0;transform:translateY(16px)}}
@keyframes ckPress2{0%,47%{transform:none}53%{transform:scale(.93)}62%,100%{transform:none}}
@keyframes ckPress3{0%,47%{transform:none}53%{transform:scale(.93)}62%,100%{transform:none}}
@keyframes ckCurA{0%{transform:translate(262px,128px);opacity:1}44%{transform:translate(327px,196px)}52%{transform:translate(327px,196px) scale(.86)}60%{transform:translate(327px,196px) scale(1);opacity:1}88%,100%{transform:translate(318px,150px);opacity:0}}
@keyframes ckCurR{0%{transform:translate(262px,128px);opacity:1}44%{transform:translate(257px,196px)}52%{transform:translate(257px,196px) scale(.86)}60%{transform:translate(257px,196px) scale(1);opacity:1}88%,100%{transform:translate(250px,150px);opacity:0}}
@keyframes ckClkA{0%,48%{opacity:0;transform:translate(329px,196px) scale(.3)}54%{opacity:.85}80%,100%{opacity:0;transform:translate(329px,196px) scale(1.7)}}
@keyframes ckClkR{0%,48%{opacity:0;transform:translate(259px,196px) scale(.3)}54%{opacity:.85}80%,100%{opacity:0;transform:translate(259px,196px) scale(1.7)}}

/* the map arrives: the frame rises, the wires draw out of it, the pills land */
.ck.ck-go .ck-map[data-reveal]{opacity:1;transform:none}
.ck.ck-go .ck-map:not(.ck-in) .ck-fpos{opacity:0;transform:translateY(26px)}
.ck-fpos{transition:opacity .8s var(--ease),transform 1s var(--ease)}
.ck.ck-go .ck-map:not(.ck-in) .ck-ln-b{stroke-dashoffset:100}
.ck.ck-go .ck-map.ck-in .ck-ln-b{transition-delay:0s,0s,calc(.35s + var(--d,0s) * .25),0s}
.ck.ck-go .ck-map:not(.ck-in) .ck-co{opacity:0;transform:scale(.9)}
.ck.ck-go .ck-map.ck-in .ck-co{transition-delay:calc(.55s + var(--o,0) * 35ms)}
.ck.ck-go .ck-map:not(.ck-in) :is(.ck-seg,.ck-cap,.ck-cap-i,.ck-vh,.ck-leg){opacity:0;transform:translateY(16px)}
.ck-map :is(.ck-seg,.ck-cap,.ck-cap-i,.ck-vh,.ck-leg){transition:opacity .7s var(--ease),transform .9s var(--ease)}

/* ── how it works: the switch and the visit's caption on top, then the wide picture ─────────────────── */
.ck-how{padding-top:clamp(32px,2.8vw,40px)}
.ck-map--how .ck-map-sw{position:relative;z-index:4}
.ck-cap{position:relative;z-index:3;max-width:600px;margin:12px auto 0;text-align:center}
.ck-cap-st{display:grid}
.ck-cap-s{grid-area:1 / 1;opacity:0;transform:translateY(8px);transition:opacity .45s var(--ease),transform .6s var(--ease);pointer-events:none}
.ck-map[data-visit="1"] .ck-cap-s[data-v="1"],.ck-map[data-visit="2"] .ck-cap-s[data-v="2"],.ck-map[data-visit="3"] .ck-cap-s[data-v="3"]{opacity:1;transform:none}
.ck-cap-t{font-size:clamp(22px,1.9vw,26px);font-weight:700;letter-spacing:-.028em;line-height:1.15;color:var(--ink)}
.ck-cap-p{margin-top:6px;font-size:clamp(16px,1.3vw,18.5px);line-height:1.55;color:var(--ink2)}
.ck-map--how .ck-stage{margin-top:6px}
.ck-cap-i{max-width:42em;margin:0 auto 14px;text-align:center;text-wrap:balance;font-size:clamp(16px,1.3vw,18px);line-height:1.55;color:var(--ink2)}
.ck-cap-i b{font-weight:600;color:var(--ink)}
.ck-map--how .ck-co-b{padding:calc(13 * var(--u,1px)) calc(22 * var(--u,1px)) calc(13 * var(--u,1px)) calc(16 * var(--u,1px));gap:calc(13 * var(--u,1px))}
.ck-map--how .ck-co-t b{font-size:calc(15.5 * var(--u,1px))}
.ck-map--how .ck-co-ws{font-size:calc(14 * var(--u,1px))}
.ck-map--how .ck-co-m{width:calc(11 * var(--u,1px));height:calc(11 * var(--u,1px))}

/* ── report map: switch on top, the visit's verdict under the frame ──────────────────────────────────── */
.ck-map--rep .ck-map-sw{position:absolute;z-index:4;left:50%;top:calc(10 / 1240 * 100cqw);transform:translateX(-50%);width:min(462px,100%)}
.ck-vh{position:absolute;z-index:3;left:50%;top:calc(364 / 1240 * 100cqw);width:calc(560 / 1240 * 100%);translate:-50% 0;display:grid;text-align:center}
.ck-vh-s{grid-area:1 / 1;opacity:0;transform:translateY(6px);transition:opacity .45s var(--ease),transform .6s var(--ease)}
.ck-map[data-visit="1"] .ck-vh-s[data-v="1"],.ck-map[data-visit="2"] .ck-vh-s[data-v="2"],.ck-map[data-visit="3"] .ck-vh-s[data-v="3"]{opacity:1;transform:none}
.ck-vh-t{font-size:14.5px;font-weight:600;color:var(--ink2)}
.ck-vh-v{display:inline-flex;align-items:center;gap:9px;margin-top:5px;font-size:17px;font-weight:700;letter-spacing:-.016em}
.ck-map--rep .ck-leg{margin-top:clamp(14px,1.6vw,22px)}

/* the company you tapped: its three visits, its cookies, its rows */
.ck-det{max-width:820px;margin:18px auto 0;overflow:hidden;transition:height .45s var(--ease)}
.ck-det.ck-open{overflow:visible}
.ck-det-i{padding:clamp(20px,2.2vw,26px) clamp(20px,2.4vw,30px);border-radius:26px;background:var(--panel);border:1px solid var(--line-soft);box-shadow:var(--sh-panel);margin-bottom:6px}
.ck-det-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.ck-det-n{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.ck-det-n b{font-size:18px;font-weight:700;letter-spacing:-.02em}
.ck-det-n span{font-size:14px;color:var(--ink2)}
.ck-det-x0{display:grid;place-items:center;flex:none;width:36px;height:36px;margin:-6px -8px 0 0;border-radius:50%;color:var(--ink2);transition:background-color .2s ease,color .2s ease}
.ck-det-x0:hover{background:var(--tint-on);color:var(--ink)}
.ck-det-v{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ck-det-v li{display:flex;flex-direction:column;gap:6px}
.ck-dv-h{font-size:13px;font-weight:600;color:var(--ink2)}
.ck-dv-w{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:var(--ink)}
.ck-dv-leak{--mk:var(--st-no);--mr:var(--st-no);color:var(--st-no-ink)}
.ck-dv-sent{--mk:var(--ink);--mr:var(--ink)}
.ck-dv-free{--mk:radial-gradient(circle,var(--ink) 0 1.7px,transparent 2.1px);--mr:var(--ink)}
.ck-dv-ring{--mk:transparent;--mr:var(--st-na);color:var(--ink2)}
.ck-dv-none{--mk:transparent;--mr:var(--line-on);color:var(--ink2)}
.ck-det-ck{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:16px}
.ck-det-ck li{display:inline-flex;align-items:baseline;gap:8px;font-size:13.5px;color:var(--ink2)}
.ck-det-rows{margin-top:12px}
.ck-det-go{width:100%;display:grid;grid-template-columns:16px minmax(0,1fr) auto 14px;gap:12px;align-items:start;padding:12px 0;text-align:left;border-top:1px solid var(--line)}
.ck-det-rows li:first-child .ck-det-go{border-top:0}
.ck-det-go .ck-mk{margin-top:5px}
.ck-det-x{font-size:14.5px;font-weight:500;line-height:1.45;color:var(--ink)}
.ck-det-go .ck-st{font-size:13.5px}
.ck-det-go .ck-arr{margin-top:4px;color:var(--ink2);transition:transform .25s var(--ease),color .2s ease}
.ck-det-go:hover .ck-det-x{color:var(--blue)}
.ck-det-go:hover .ck-arr{transform:translateX(3px);color:var(--blue)}

/* ── marks, states, chips ─────────────────────────────────────────────────────────────────────────────── */
.ck-mk{display:inline-block;flex:none;width:10px;height:10px;border-radius:50%}
.ck-mk-no{background:var(--st-no)}
.ck-mk-warn{background:var(--st-warn)}
.ck-mk-na{box-shadow:inset 0 0 0 2px var(--st-na)}
.ck-mk-ok{width:16px;height:16px;border-radius:0;color:var(--st-ok)}
.ck-mk-ok svg{display:block;width:16px;height:16px}
.ck-mk-ok .ck-tk{color:inherit}
.ck-st{font-size:14px;font-weight:600;white-space:nowrap}
.ck-st-no{color:var(--st-no-ink)} .ck-st-warn{color:var(--st-warn-ink)} .ck-st-ok{color:var(--st-ok-ink)} .ck-st-na{color:var(--st-na-ink)}
.ck-chip,.ck-code{padding:1px 6px 2px;border-radius:7px;background:var(--tint-on);box-shadow:inset 0 0 0 1px var(--line-2);
  font-size:.88em;font-weight:500;letter-spacing:0;color:var(--ink);overflow-wrap:anywhere;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ck-chip{font-weight:600;overflow-wrap:normal;word-break:normal}

/* ── plates ───────────────────────────────────────────────────────────────────────────────────────────── */
.ck-plate{padding:clamp(22px,2.8vw,38px) clamp(22px,3.2vw,46px)}
.ck-ph{max-width:74ch}
.ck-h2{font-size:clamp(23px,2.2vw,30px);font-weight:700;letter-spacing:-.026em;line-height:1.16;color:var(--ink)}
.ck-pl{margin-top:9px;font-size:15.5px;line-height:1.6;color:var(--ink2)}
.ck-site-n{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 18px;padding-bottom:18px;border-bottom:1px solid var(--line);font-size:13.5px;font-weight:500;color:var(--ink2)}
.ck-site-n b{font-size:16px;font-weight:700;letter-spacing:-.014em;color:var(--ink)}

/* ── the score ────────────────────────────────────────────────────────────────────────────────────────── */
.ck-sum{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(22px,3.6vw,52px);align-items:center;padding-top:clamp(22px,2.8vw,34px)}
.ck-ring{position:relative;width:clamp(120px,12.6vw,176px);aspect-ratio:1}
.ck-ring svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}
.ck-ring-tr{fill:none;stroke:var(--line);stroke-width:6.5}
.ck-ring-v{fill:none;stroke:url(#ck-gring);stroke-width:6.5;stroke-linecap:round;stroke-dasharray:289.03;stroke-dashoffset:var(--off);transition:stroke-dashoffset 1.5s var(--ease)}
.ck-ring.ck-r0 .ck-ring-v{stroke-dashoffset:289.03}
.ck-ring-n{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ck-ring-n b{font-size:clamp(44px,4.6vw,66px);font-weight:700;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
.ck-ring-n span{margin-top:7px;font-size:13px;font-weight:500;color:var(--ink2)}
.ck-band{display:inline-flex;align-items:center;gap:9px;height:32px;padding:0 15px 0 12px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);font-size:14px;font-weight:600}
.ck-band-no{color:var(--st-no-ink)} .ck-band-warn{color:var(--st-warn-ink)} .ck-band-ok{color:var(--st-ok-ink)}
.ck-sum-h{margin-top:14px;max-width:36ch;font-size:clamp(20px,2.05vw,29px);font-weight:600;letter-spacing:-.022em;line-height:1.3;color:var(--ink);text-wrap:pretty}
.ck-counts{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:18px;font-size:15px;color:var(--ink2)}
.ck-counts li{display:inline-flex;align-items:center;gap:8px}
.ck-counts b{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.ck-sumplate .ck-sum{grid-template-columns:auto minmax(0,1fr) minmax(0,300px)}
.ck-sum-v{align-self:center;display:flex;flex-direction:column;padding-left:clamp(22px,2.6vw,36px);border-left:1px solid var(--line)}
.ck-sum-v li + li{border-top:1px solid var(--line)}
.ck-sv{width:100%;display:grid;grid-template-columns:22px minmax(0,1fr);gap:4px 12px;align-items:center;padding:12px 0;text-align:left;color:inherit}
.ck-sv>b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:12.5px;font-weight:700;color:var(--ink2);box-shadow:inset 0 0 0 1.5px var(--line-on)}
.ck-sv-l{font-size:14.5px;font-weight:600;color:var(--ink)}
.ck-sv-v{grid-column:2;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.ck-sv-v .ck-mk{width:8px;height:8px}
.ck-sv-v .ck-mk-ok{width:14px;height:14px}
.ck-sv-v .ck-mk-ok svg{width:14px;height:14px}
.ck-sv:hover .ck-sv-l{color:var(--blue)}

/* ── rows (the report's problems and passes) ──────────────────────────────────────────────────────────── */
.ck-rows{margin-top:clamp(10px,1.2vw,16px)}
.ck-row{border-top:1px solid var(--line)}
.ck-row:first-child{border-top:0}
.ck-row-h{width:100%;display:grid;grid-template-columns:18px minmax(0,1fr) auto 18px;gap:14px;align-items:start;padding:18px 0;text-align:left;color:inherit}
.ck-row-h>.ck-mk{margin-top:6px}
.ck-row-h>.ck-mk-ok{margin-top:3px}
.ck-row-s{min-width:0}
.ck-row-x{display:block;max-width:70ch;font-size:clamp(15.5px,1.2vw,17px);font-weight:600;letter-spacing:-.012em;line-height:1.45;color:var(--ink);transition:color .2s ease}
.ck-row-w{display:block;margin-top:4px;font-size:13.5px;font-weight:500;color:var(--ink2)}
.ck-row-h>.ck-st{margin-top:2px}
.ck-chev{margin-top:4px;color:var(--ink2);transition:transform .35s var(--ease),color .2s ease}
button.ck-row-h:hover .ck-chev{color:var(--ink)}
button.ck-row-h:hover .ck-row-x{color:var(--blue)}
.ck-row.is-open .ck-row-h .ck-chev{transform:rotate(180deg)}
.ck-row-b{overflow:hidden;transition:height .42s var(--ease)}
.ck-row-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:22px clamp(28px,3.6vw,52px);padding:2px 0 26px 32px}
.ck-row-c1,.ck-row-c2{display:flex;flex-direction:column;gap:20px;min-width:0}
.ck-part-h{font-size:14px;font-weight:700;letter-spacing:-.008em;color:var(--ink)}
.ck-part-p{margin-top:6px;font-size:15.5px;line-height:1.62;color:var(--ink2)}
.ck-fix-i{margin-top:6px;font-size:15px;line-height:1.55;color:var(--ink2)}
.ck-fix-mi,.ck-fix-pick,.ck-fix-n{display:none}
.ck-tools{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.ck-tool{height:36px;padding:0 15px;border-radius:999px;font-size:14px;font-weight:600;color:var(--ink2);background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);
  transition:color .2s ease,background-color .25s var(--ease),box-shadow .2s ease}
.ck-tool:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-on)}
.ck-tool[aria-pressed="true"]{color:var(--canvas);background:var(--ink);box-shadow:none}
.ck-tool:focus-visible{outline-offset:2px;border-radius:999px}
.ck-fix{margin-top:14px}
.ck-fix-t{font-size:15.5px;line-height:1.7;color:var(--ink)}
.ck-fix-t b{font-weight:650}
.ck-fix-t.ck-fade{animation:ckFade .45s var(--ease) both}
@keyframes ckFade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.ck-chev-sp{display:block;width:18px}

/* ── the example report (on the tool page) ────────────────────────────────────────────────────────────── */
.ck-ex{padding:clamp(22px,2.8vw,38px) clamp(22px,3.2vw,46px) clamp(12px,1.4vw,18px)}
.ck-ex-sum{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:clamp(24px,4vw,60px);align-items:center;padding:clamp(22px,2.6vw,32px) 0;border-bottom:1px solid var(--line)}
.ck-sum-s{padding-top:0;gap:clamp(18px,2.6vw,34px)}
.ck-ring-s{width:clamp(100px,9.2vw,128px)}
.ck-ring-s .ck-ring-n b{font-size:clamp(34px,3.2vw,46px)}
.ck-ring-s .ck-ring-n span{margin-top:5px;font-size:12.5px}
.ck-sum-s .ck-sum-h{font-size:clamp(17px,1.45vw,20px);line-height:1.4;letter-spacing:-.016em;max-width:40ch}
.ck-sum-s .ck-counts{font-size:14.5px;gap:6px 18px}
.ck-map--ex .ck-map-sw{margin-bottom:clamp(10px,1.2vw,14px)}
.ck-map--ex .ck-seg{margin:0}
.ck-ex .ck-rows{margin-top:4px}
.ck-notes{display:flex;flex-wrap:wrap;gap:6px 26px;padding:18px 0 14px;border-top:1px solid var(--line);font-size:13.5px;line-height:1.55;color:var(--ink2)}
.ck-after{margin-top:24px;text-align:center;font-size:15px;color:var(--ink2)}

/* ── the six checks ───────────────────────────────────────────────────────────────────────────────────── */
.ck-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,4.4vw,72px);padding:clamp(10px,1.4vw,18px) clamp(24px,3.6vw,52px)}
.ck-chk{display:grid;grid-template-columns:64px minmax(0,1fr);gap:22px;align-items:start;padding:clamp(24px,2.6vw,32px) 0;border-top:1px solid var(--line)}
.ck-chk:nth-child(-n+2){border-top:0}
.ck-ic{display:block;width:64px;height:48px;margin-top:-4px}
.ck-chk p{margin-top:7px;font-size:15.5px;line-height:1.62;color:var(--ink2)}

/* ── how common ───────────────────────────────────────────────────────────────────────────────────────── */
.ck-common{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,5vw,80px);padding:clamp(28px,3.6vw,52px) clamp(24px,3.8vw,56px) clamp(22px,2.6vw,34px)}
.ck-fig{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.ck-fig + .ck-fig{padding-left:clamp(28px,5vw,80px);margin-left:calc(-1 * clamp(28px,5vw,80px) / 2);border-left:1px solid var(--line)}
.ck-pict{display:block;height:clamp(52px,5vw,70px);width:auto;max-width:100%;overflow:visible}
.ck-pi-f{fill:var(--panel);stroke:var(--line-on);stroke-width:1.2}
.ck-pi-b{fill:none;stroke:var(--line-on);stroke-width:1}
.ck-pi-l{fill:none;stroke:var(--ck-hair);stroke-width:1.6;stroke-linecap:round}
.ck-pi-n{fill:var(--panel);stroke:var(--st-na);stroke-width:1.6}
.ck-pi-no .ck-pi-l{stroke:var(--st-no)}
.ck-pi-no .ck-pi-n{fill:var(--st-no);stroke:var(--st-no)}
.ck-fig-n{margin-top:clamp(18px,2vw,26px);font-size:clamp(46px,5.2vw,74px);font-weight:700;letter-spacing:-.045em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.ck-fig-t{margin-top:12px;max-width:34ch;font-size:clamp(16px,1.3vw,18.5px);line-height:1.5;color:var(--ink)}
.ck-fig-s{margin-top:10px;font-size:14px;font-weight:500;color:var(--ink2)}
.ck-caveat{grid-column:1 / -1;margin-top:clamp(26px,3vw,40px);padding-top:18px;border-top:1px solid var(--line);font-size:14px;line-height:1.6;color:var(--ink2)}

/* ── why banners fail / the law ───────────────────────────────────────────────────────────────────────── */
.ck-why li{align-items:baseline}
.ck-why b{line-height:1.3}
.ck-why span{font-size:16px}
@media (min-width:901px){.ck-why li{grid-template-columns:minmax(0,300px) minmax(0,1fr)}}
.ck-law{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(44px,5.6vw,84px);padding:clamp(26px,3.2vw,46px) clamp(24px,3.4vw,50px)}
.ck-law-i{position:relative}
.ck-law-i + .ck-law-i::before{content:"";position:absolute;top:0;bottom:0;left:calc(-1 * clamp(22px,2.8vw,42px));width:1px;background:var(--line)}
.ck-law-i p{margin-top:10px;font-size:15.5px;line-height:1.65;color:var(--ink2)}

/* ── FAQ (the site's own rows) ────────────────────────────────────────────────────────────────────────── */
.ck-faq .faq-q:focus-visible{outline-offset:4px}

/* ── studio block, final box ──────────────────────────────────────────────────────────────────────────── */
.ck-studio{display:flex;flex-direction:column;align-items:center;text-align:center}
.ck-studio .lead{max-width:46ch;margin-top:16px}
.ck-studio-a{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px 26px;margin-top:30px}
.ck-studio-a .tlink{min-height:44px;color:var(--ink)}
.ck-studio-a .tlink:hover{color:var(--blue)}
.ck-final{text-align:center}
.ck-final .ck-scan{margin-top:clamp(24px,2.6vw,32px)}

/* ── the report ───────────────────────────────────────────────────────────────────────────────────────── */
.ck-rtop{padding-top:clamp(98px,8.6vw,128px)}
.ck-sumplate{padding:clamp(20px,2.6vw,34px) clamp(22px,3.2vw,46px) clamp(24px,3vw,40px)}
.ck-rsec{padding-top:clamp(40px,4vw,60px)}
.ck-rmap{padding-top:clamp(52px,5.4vw,84px)}
.ck-vcs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(28px,3vw,44px);padding:8px}
.ck-vc{position:relative;display:flex;flex-direction:column;align-items:stretch;padding:clamp(18px,2vw,26px) clamp(18px,2vw,26px) clamp(16px,1.8vw,22px);
  border-radius:calc(var(--r-panel) - 8px);text-align:left;color:inherit;transition:background-color .35s var(--ease)}
.ck-vc + .ck-vc::after{content:"";position:absolute;left:-.5px;top:22px;bottom:22px;width:1px;background:var(--line)}
.ck-vc:hover{background:var(--tint-on)}
.ck-vc::before{content:"";position:absolute;left:clamp(18px,2vw,26px);right:clamp(18px,2vw,26px);top:0;height:2px;border-radius:2px;background:var(--grad);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .55s var(--ease)}
.ck-vc[aria-pressed="true"]::before{transform:scaleX(1)}
.ck-vc-k{font-size:13px;font-weight:600;color:var(--ink2)}
.ck-vc[aria-pressed="true"] .ck-vc-k{color:var(--ink)}
.ck-vc-t{margin-top:4px;font-size:17.5px;font-weight:700;letter-spacing:-.02em;line-height:1.25;color:var(--ink)}
.ck-vc ul{margin-top:14px}
.ck-vc li{display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--line);font-size:14.5px;color:var(--ink)}
.ck-vc li .ck-mk{justify-self:center}
.ck-vc li>span:last-child{font-size:13.5px;font-weight:600;text-align:right}
.ck-vc-v{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:16px;font-size:15.5px;font-weight:700;letter-spacing:-.012em}
.ck-vc-v .ck-mk{flex:none}
.ck-note{max-width:80ch;margin:16px auto 0;text-align:center;font-size:13.5px;line-height:1.55;color:var(--ink2)}

/* tables — names on the left, three dot columns under the three visits */
.ck-tbl{margin-top:clamp(18px,2vw,26px)}
.ck-tr{display:grid;grid-template-columns:minmax(0,1fr) repeat(3,var(--cw,140px));align-items:center;column-gap:6px}
.ck-thead{padding-bottom:12px;border-bottom:1px solid var(--line);font-size:13.5px;font-weight:600;color:var(--ink2)}
.ck-th{display:flex;justify-content:center;text-align:center}
.ck-th b{display:none}
.ck-tc{display:flex;justify-content:center}
.ck-d{position:relative;display:inline-block;flex:none;width:12px;height:12px;border-radius:50%}
.ck-d-no{background:var(--st-no)}
.ck-d-yes{background:var(--ink)}
.ck-d-ring{box-shadow:inset 0 0 0 2px var(--st-na)}
.ck-d-free{background:radial-gradient(circle,var(--ink) 0 2.1px,transparent 2.5px);box-shadow:inset 0 0 0 2px var(--ink)}
.ck-d-none{width:12px;height:2px;border-radius:2px;background:var(--line-on)}
.ck-grps>li{padding-top:18px}
.ck-grps>li + li{margin-top:6px;border-top:1px solid var(--line)}
.ck-grp-h{display:inline-flex;align-items:center;gap:10px;height:34px;padding:0 15px 0 13px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-on);font-size:14.5px}
.ck-grp-h::before{content:"";width:9px;height:9px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--ink2)}
.ck-grp-h b{font-weight:700;letter-spacing:-.012em}
.ck-grp-h span{font-size:13.5px;color:var(--ink2)}
.ck-grp-l{position:relative;margin:4px 0 6px 17px;padding-left:22px}
.ck-grp-l::before{content:"";position:absolute;left:0;top:-4px;bottom:24px;width:1.5px;border-radius:1px;background:var(--ck-hair)}
.ck-ck{position:relative;min-height:46px;padding:6px 0}
.ck-ck::before{content:"";position:absolute;left:-22px;top:50%;width:14px;height:1.5px;background:var(--ck-hair)}
.ck-ck-n{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 12px;min-width:0}
.ck-ck-n .ck-chip{font-size:14px}
.ck-ck-l{font-size:13.5px;color:var(--ink2)}
.ck-fold{margin-top:6px;border-top:1px solid var(--line)}
.ck-fold-b{display:flex;width:100%;align-items:center;justify-content:space-between;gap:16px;padding:18px 0 6px;font-size:15.5px;font-weight:600;letter-spacing:-.01em;text-align:left;color:var(--ink)}
.ck-fold-b:hover{color:var(--blue)}
.ck-fold.is-open .ck-fold-b .ck-chev{transform:rotate(180deg)}
.ck-fold-r{overflow:hidden;transition:height .45s var(--ease)}
.ck-tbl-o{margin-top:14px}
.ck-ol .ck-ck{border-top:1px solid var(--line)}
.ck-ol .ck-ck::before{display:none}
.ck-ol .ck-ck:first-child{border-top:0}
.ck-crs .ck-cr{min-height:52px;padding:8px 0;border-top:1px solid var(--line)}
.ck-crs .ck-cr:first-child{border-top:0}
.ck-cr-n{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 12px;min-width:0}
.ck-cr-n b{font-size:15.5px;font-weight:600;letter-spacing:-.012em}
.ck-cr-n span{font-size:13.5px;color:var(--ink2)}
.ck-leg{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;margin-top:22px;font-size:13.5px;line-height:1.5;color:var(--ink2)}
.ck-leg li{display:inline-flex;align-items:center;gap:9px}
.ck-companies .ck-leg{justify-content:flex-start;padding-top:18px;border-top:1px solid var(--line);margin-top:6px}
.ck-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.2vw,26px);align-items:stretch}
.ck-two .ck-row-h{grid-template-columns:18px minmax(0,1fr) auto}
.ck-two .ck-chev-sp{display:none}
.ck-notes-r{flex-direction:column;max-width:84ch;margin:clamp(20px,2.2vw,28px) auto 0;padding:0;border:0;text-align:center}
.ck-pic-dev{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);gap:clamp(20px,2.6vw,36px);align-items:start}
.ck-pic{margin:0;padding-top:clamp(22px,2.8vw,38px)}
.ck-pic figcaption{margin-bottom:clamp(16px,1.8vw,22px)}
.ck-dev-t{margin-top:16px;padding:16px 18px;border-radius:15px;background:var(--field);border:1px solid var(--line);font-size:14.5px;line-height:1.6;color:var(--ink)}
.ck-dev-l{display:block}
.ck-dev-l + .ck-dev-l{margin-top:8px}
.ck-dev-a{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.ck-copy{display:inline-grid}
.ck-copy>span{grid-area:1 / 1;display:inline-flex;align-items:center;justify-content:center;gap:7px}
.ck-copy-b{visibility:hidden}
.ck-copy.is-done .ck-copy-a{visibility:hidden}
.ck-copy.is-done .ck-copy-b{visibility:visible}
.btn.ck-copy:not(.ghost) .ck-tk{color:var(--white)}
.ck-priv{margin-top:16px;font-size:13.5px;line-height:1.55;color:var(--ink2)}

/* ── reveals: each kind of thing in its own way, never one uniform fade ───────────────────────────────── */
.ck.ck-go [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .95s var(--ease);transition-delay:calc(var(--rd,0) * 66ms)}
.ck.ck-go .panel[data-reveal],.ck.ck-go .ck-pic[data-reveal]{transform:translateY(32px)}
.ck.ck-go .ck-chk[data-reveal]{transform:translateY(14px)}
.ck.ck-go [data-reveal].ck-in{opacity:1;transform:none}
.ck.ck-go .ck-hero .wrap>*{animation:ckUp .9s var(--ease) both}
/* ⛔ on the scanner page the SITE engine owns the hero entrance (it waits for the loader), so the tool's
   own animation is off here — two engines on one element cancelled out into an instant pop. */
.ck.ck-go.ck-lean .ck-hero .wrap>*{animation:none}
.ck.ck-go .ck-hero .wrap>:nth-child(2){animation-delay:66ms}
.ck.ck-go .ck-hero .wrap>:nth-child(3){animation-delay:132ms}
.ck.ck-go .ck-hero .wrap>:nth-child(4){animation-delay:198ms}
.ck.ck-go .ck-hero .wrap>:nth-child(5){animation-delay:264ms}
.ck.ck-go .ck-hero .wrap>:nth-child(6){animation-delay:330ms}
.ck.ck-go .ck-hero .ck-pill{animation-name:ckPop;animation-timing-function:cubic-bezier(.34,1.56,.64,1);animation-duration:.7s}
@keyframes ckUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes ckPop{from{opacity:0;transform:translateY(10px) scale(.92)}to{opacity:1;transform:none}}

/* ── the phone sticky button ──────────────────────────────────────────────────────────────────────────── */
.ck-sticky{position:fixed;z-index:240;left:50%;bottom:16px;transform:translate(-50%,150%);opacity:0;pointer-events:none;
  box-shadow:var(--sh-btn),0 20px 44px -18px rgba(10,10,12,.45);transition:transform .5s var(--ease),opacity .3s ease,background .18s ease}
.ck-sticky.is-on{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.ck-sticky.is-on:hover{transform:translate(-50%,-2px)}
html[data-cbar="1"] .ck-sticky{bottom:214px}
@media (min-width:641px){.ck-sticky{display:none}}

.ck-tkey{display:none;flex-wrap:wrap;gap:6px 14px;margin-bottom:14px;font-size:13px;font-weight:500;color:var(--ink2)}
.ck-tkey span{display:inline-flex;align-items:center;gap:6px}
.ck-tkey b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;font-size:12.5px;font-weight:700;color:var(--ink2);box-shadow:inset 0 0 0 1.5px var(--line-on)}
.ck-st-m{display:none}

/* ═══ the map becomes a tree (phone and narrow screens): one flex row that wraps, everything ordered ═════ */
@media (max-width:1180px){
  .ck-stage{--u:1px}
  .ck-map{display:flex;flex-wrap:wrap;align-items:flex-start}
  .ck-map>*{flex:0 0 100%;min-width:0}
  .ck-stage,.ck-art,.ck-nodes{display:contents}
  .ck-cap-i{order:-1}
  .ck-map-sw{order:0}
  .ck-cap,.ck-vh{order:1}
  .ck-fpos{order:3}
  .ck-co{order:calc(var(--o) + 10)}
  .ck-det{order:var(--do,90)}
  .ck-map .ck-leg{order:99}
  .ck-map--how .ck-map-sw,.ck-map--rep .ck-map-sw{position:sticky;z-index:6;top:82px;left:auto;transform:none;width:auto;margin:0 auto;transition:top .4s var(--ease)}
  #nav.hide ~ main .ck-map--how .ck-map-sw,#nav.hide ~ main .ck-map--rep .ck-map-sw{top:14px}
  .ck-map-sw .ck-seg{box-shadow:inset 0 0 0 1px var(--line-2),0 12px 30px -16px rgba(10,10,12,.32)}
  .ck-cap{max-width:none;margin:22px 0 0;text-align:center}
  .ck-cap-i{flex:0 0 100%;max-width:none;margin:0 0 20px;text-align:center;font-size:15.5px}
  .ck-vh{position:static;width:auto;translate:none;margin:20px 0 0}
  .ck-wires{display:none}
  .ck-fpos{position:relative;left:auto;top:auto;flex:0 0 100%;width:100%;margin-top:22px}
  .ck-port{display:none}
  .ck-co{position:relative;left:auto;right:auto;top:auto;translate:none;flex:0 0 100%;padding:10px 0 0 40px}
  .ck-co::before{content:"";position:absolute;left:17px;top:0;bottom:0;width:1.5px;background:var(--ck-hair)}
  .ck-co.ck-co-end::before{bottom:auto;height:calc(50% + 5px)}
  .ck-co-b,.ck-co-l .ck-co-b,.ck-map--how .ck-co-b{position:relative;width:100%;min-height:52px;flex-direction:row;padding:9px 18px 9px 14px;text-align:left}
  .ck-co-b::before{content:"";position:absolute;left:-23px;top:50%;width:23px;height:1.5px;background:var(--ln,var(--ck-hair));transition:background-color .45s var(--ease)}
  .ck-co-b::after{content:"";position:absolute;left:-26px;top:calc(50% - 3px);width:6px;height:6px;border-radius:50%;background:var(--tdb,var(--ln,transparent));box-shadow:var(--tds,none);opacity:var(--sg,0)}
  .ck-map[data-visit="1"] .ck-co-b::after{animation:ckTw1 1.9s linear infinite;animation-delay:calc(.3s + var(--o,0) * 140ms)}
  .ck-map[data-visit="2"] .ck-co-b::after{animation:ckTw2 1.9s linear infinite;animation-delay:calc(1.4s + var(--o,0) * 140ms)}
  .ck-map[data-visit="3"] .ck-co-b::after{animation:ckTw3 1.9s linear infinite;animation-delay:calc(1.4s + var(--o,0) * 140ms)}
  .ck-co-t,.ck-co-1 .ck-co-t,.ck-co-l .ck-co-t{flex:1;flex-direction:row;align-items:baseline;justify-content:space-between;gap:12px}
  .ck-co-ws,.ck-co-l .ck-co-ws{justify-items:end;text-align:right}
  .ck-map--how .ck-co-t b{font-size:15px}
  .ck-map--how .ck-co-ws{font-size:13.5px}
  /* the companies that only loaded: small chips at the end of the tree */
  .ck-map--rep .ck-co-r.ck-co-1{flex:0 0 auto;padding:8px 8px 0 0}
  .ck-map--rep .ck-co-r.ck-co-1::before{display:none}
  .ck-map--rep .ck-co-r.ck-co-1 .ck-co-b{min-height:44px;padding:6px 14px 6px 12px}
  .ck-map--rep .ck-co-r.ck-co-1 .ck-co-b::before,.ck-map--rep .ck-co-r.ck-co-1 .ck-co-b::after{display:none}
  .ck-map--rep .ck-co-r.ck-co-1 .ck-co-ws{display:none}
  .ck-det{flex:0 0 100%;max-width:none;margin:10px 0 0;padding-left:40px;position:relative}
  .ck-det::before{content:"";position:absolute;left:17px;top:-10px;bottom:0;width:1.5px;background:var(--ck-hair)}
  .ck-det-i{border-radius:22px}
  .ck-map--rep .ck-leg{justify-content:flex-start}
}
@media (max-width:1180px) and (min-width:641px){
  .ck-map--how,.ck-map--rep,.ck-map--side{max-width:640px;margin-inline:auto}
}
@keyframes ckTw1{0%{transform:translateX(0);opacity:0}15%{opacity:var(--sg,0)}85%{opacity:var(--sg,0)}100%{transform:translateX(24px);opacity:0}}
@keyframes ckTw2{0%{transform:translateX(0);opacity:0}15%{opacity:var(--sg,0)}85%{opacity:var(--sg,0)}100%{transform:translateX(24px);opacity:0}}
@keyframes ckTw3{0%{transform:translateX(0);opacity:0}15%{opacity:var(--sg,0)}85%{opacity:var(--sg,0)}100%{transform:translateX(24px);opacity:0}}



/* ═══ phone ══════════════════════════════════════════════════════════════════════════════════════════════ */
@media (max-width:640px){
  .ck-hero{padding-top:98px}
  .ck .pill{height:28px}
  .ck-h1{margin-top:16px;font-size:clamp(33px,9.2vw,38px)}
  .ck-lead{margin-top:14px;font-size:15.5px;line-height:1.55}
  .ck-scan{margin-top:22px}
  .ck-scan-f{height:62px;padding:6px 6px 6px 20px}
  .ck-scan-i{font-size:16px}
  .ck-scan-b{height:50px;padding:0 17px;gap:7px;font-size:15px}
  .ck-scan-f::after{left:26px;right:26px}
  .ck-facts{gap:6px 16px;margin-top:15px;font-size:13.5px}
  .ck-facts li{gap:5px}
  .ck-facts .ck-tk{width:14px;height:14px}
  .ck-hero-f{flex-direction:column;gap:10px}
  .ck-down{font-size:14px}
  .ck-how{padding-top:76px}
  .ck-seg{width:100%}
  .ck-seg button{height:44px;gap:7px;font-size:14px;padding:0 6px}
  .ck-seg button b{width:21px;height:21px}
  .ck-seg-s button{height:44px}
  .ck-cap-t{font-size:23px}
  .ck-cap-p{font-size:16px}
  .ck-co-t b,.ck-co-1 .ck-co-t b{font-size:14.5px}
  .ck-co-ws{font-size:13px}
  /* six checks */
  .ck-checks{grid-template-columns:minmax(0,1fr);padding:4px 22px}
  .ck-chk{grid-template-columns:48px minmax(0,1fr);gap:16px;padding:22px 0}
  .ck-chk:nth-child(2){border-top:1px solid var(--line)}
  .ck-ic{width:48px;height:36px;margin-top:0}
  .ck-chk p{font-size:15px}
  /* example */
  .ck-ex{padding:20px 20px 8px}
  .ck-ex-sum{grid-template-columns:minmax(0,1fr);gap:22px;padding:20px 0 22px}
  .ck-map--ex .ck-seg{margin:0 auto}
  .ck-map--ex .ck-fpos{margin-top:16px}
  .ck-notes{flex-direction:column}
  /* how common */
  .ck-common{grid-template-columns:minmax(0,1fr);padding:26px 22px 22px}
  .ck-fig + .ck-fig{padding:26px 0 0;margin:26px 0 0;border-left:0;border-top:1px solid var(--line)}
  .ck-pict{height:46px}
  .ck-fig-n{font-size:52px}
  /* the law */
  .ck-law{grid-template-columns:minmax(0,1fr);padding:24px 22px}
  .ck-law-i + .ck-law-i{margin:22px 0 0;padding:22px 0 0;border-top:1px solid var(--line)}
  .ck-law-i + .ck-law-i::before{display:none}
  .ck-law-i p{font-size:15px}
  .ck-why span{font-size:15px}
  /* the report */
  .ck-rtop{padding-top:92px}
  .ck-sumplate{padding:18px 20px 22px}
  .ck-site-n{flex-direction:column;gap:3px;padding-bottom:14px;font-size:13px}
  .ck-site-n b{font-size:15.5px}
  .ck-sum{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"r b" "r k" "h h";gap:0 18px;padding-top:18px}
  .ck-sum-c{display:contents}
  .ck-ring{grid-area:r;width:104px}
  .ck-ring-n b{font-size:40px}
  .ck-ring-n span{font-size:12.5px;margin-top:4px}
  .ck-band{grid-area:b;align-self:end;justify-self:start;margin-bottom:10px;height:30px;font-size:13.5px;padding:0 13px 0 11px}
  .ck-sum .ck-counts{grid-area:k;align-self:start;flex-direction:column;gap:5px;margin-top:0;font-size:14px}
  .ck-sumplate .ck-sum{grid-template-columns:auto minmax(0,1fr)}
  .ck-sum-v{display:none}
  .ck-sum-h{grid-area:h;margin-top:16px;font-size:19px;line-height:1.36;max-width:none}
  .ck-sum-s .ck-sum-h{font-size:17px}
  .ck-sum-s .ck-ring{width:96px}
  .ck-rmap{padding-top:44px}
  .ck-rsec{padding-top:28px}
  .ck-vcs,.ck-note{display:none}
  .ck-plate{padding:20px 20px 10px}
  .ck-h2{font-size:22px}
  .ck-pl{font-size:15px}
  .ck-row-h{grid-template-columns:16px minmax(0,1fr) 16px;gap:12px;padding:16px 0}
  .ck-st-d{display:none}
  .ck-st-m{display:inline;font-size:13px}
  .ck-st-m::before{content:"·";margin:0 7px;font-weight:500;color:var(--ink3)}
  .ck-two .ck-row-h{grid-template-columns:16px minmax(0,1fr)}
  .ck-row-x{font-size:15.5px}
  .ck-row-w{font-size:13px}
  .ck-row-in{grid-template-columns:minmax(0,1fr);gap:20px;padding:0 0 22px 28px}
  .ck-part-p,.ck-fix-t{font-size:15px}
  .ck-tool{height:44px;padding:0 15px}
  .ck-tools{gap:6px}
  .ck-tr{--cw:34px;column-gap:2px}
  .ck-thead{font-size:12.5px}
  .ck-th b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:12.5px;font-weight:700;color:var(--ink2);box-shadow:inset 0 0 0 1.5px var(--line-on)}
  .ck-th span{display:none}
  .ck-tkey{display:flex}
  .ck-grp-l{margin-left:14px;padding-left:18px}
  .ck-ck::before{left:-18px;width:11px}
  .ck-ck-n{flex-direction:column;gap:3px}
  .ck-ck-l{font-size:13px}
  .ck-cr-n{flex-direction:column;gap:2px}
  .ck-cr-n b{font-size:15px}
  .ck-leg{flex-direction:column;align-items:flex-start;gap:8px}
  .ck-two,.ck-pic-dev{grid-template-columns:minmax(0,1fr)}
  .ck-pic{padding-top:8px}
  .ck-dev-a .btn{flex:1 1 0}
  .ck-det-v{grid-template-columns:minmax(0,1fr);gap:10px}
  .ck-det-v li{flex-direction:row;align-items:center;justify-content:space-between}
  .ck-det-go{grid-template-columns:16px minmax(0,1fr) 14px}
  .ck-det-go .ck-st{grid-column:2;grid-row:2}
  .ck-det-go .ck-arr{grid-column:3;grid-row:1}
  .ck-studio-a{flex-direction:column;gap:18px}
}



/* ═══ the report's other kinds ═══════════════════════════════════════════════════════════════════════════ */
/* few companies: the how-it-works layout, the visit's verdict under the switch */
.ck-map--side .ck-map-sw{position:relative;z-index:4}
.ck-map--side .ck-vh{position:static;translate:none;width:auto;margin:clamp(16px,1.8vw,22px) auto 0}
.ck-map--side .ck-stage{margin-top:clamp(14px,1.8vw,24px)}
.ck-map--side .ck-co-b{padding:calc(13 * var(--u,1px)) calc(22 * var(--u,1px)) calc(13 * var(--u,1px)) calc(16 * var(--u,1px));gap:calc(13 * var(--u,1px))}
.ck-map--side .ck-co-t b{font-size:calc(15.5 * var(--u,1px))}
.ck-map--side .ck-co-ws{font-size:calc(14 * var(--u,1px))}
.ck-map--side .ck-leg{margin-top:clamp(10px,1.2vw,16px)}
.ck-map.ck-map--nb[data-visit] .ck-cur{animation:none;opacity:0}
.ck-map.ck-map--nb[data-visit] .ck-clk{animation:none}
.ck-map[data-visit="1"] [data-s1="na"],.ck-map[data-visit="2"] [data-s2="na"],.ck-map[data-visit="3"] [data-s3="na"]{
  --ln:transparent;--lw:1;--sg:0;--mk:transparent;--mr:var(--st-na);--wd:var(--st-na-ink)}
.ck-vd.ck-na{box-shadow:inset 0 0 0 1.5px var(--st-na)}
.ck-sumplate .ck-sum.ck-sum-nv{grid-template-columns:auto minmax(0,1fr)}
.ck-sumplate .ck-sum.ck-sum-ns{grid-template-columns:minmax(0,1fr)}
.ck-sum-ns .ck-sum-h{margin-top:0;max-width:44ch}
.ck-row-w0{display:none}
.ck-rsec-1{padding-top:clamp(40px,4vw,60px)}

/* ═══ waiting: the site in the middle, the three visitors travelling in — no company lines yet ═════════════ */
.ck-wait{padding-top:clamp(100px,8.6vw,124px);text-align:center}
.ck-w-big{font-size:clamp(32px,3.6vw,52px);font-weight:700;letter-spacing:-.034em;line-height:1.06;color:var(--ink)}
.ck-w-title{margin-top:12px;font-size:clamp(17px,1.45vw,20px);font-weight:600;letter-spacing:-.016em;color:var(--ink)}
.ck-w-lead{max-width:62ch;margin:10px auto 0;font-size:clamp(15px,1.2vw,17px);line-height:1.55;color:var(--ink2)}
.ck-w-bar{position:relative;width:min(420px,100%);height:4px;margin:22px auto 0;border-radius:4px;background:var(--line);overflow:hidden}
.ck-w-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:var(--grad);transition:width .8s var(--ease)}
.ck-w-pic{position:relative;max-width:1240px;margin:clamp(20px,2.4vw,30px) auto 0;aspect-ratio:1240 / 330}
.ck-w-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ck-w-wires-p{display:none}
.ck-wl-b{fill:none;stroke-width:1.6;stroke-linecap:round;opacity:.5}
.ck-wl-s{fill:none;stroke-width:8;stroke-linecap:round;stroke-dasharray:.4 99.6;stroke-dashoffset:100;animation:ckRise 2.8s cubic-bezier(.45,.05,.35,1) infinite;animation-delay:var(--d,0s)}
@keyframes ckRise{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.ck-w-frame{position:absolute;z-index:2;left:calc(470 / 1240 * 100%);top:calc(16 / 330 * 100%);width:calc(300 / 1240 * 100%);text-align:left}
.ck-wport{position:absolute;z-index:3;bottom:-4.5px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--panel);box-shadow:0 0 0 1.5px var(--g1),0 2px 6px rgba(10,10,12,.12)}
.ck-wport:nth-of-type(1){left:35%} .ck-wport:nth-of-type(2){left:50%;box-shadow:0 0 0 1.5px color-mix(in srgb,var(--g1),var(--g3)),0 2px 6px rgba(10,10,12,.12)} .ck-wport:nth-of-type(3){left:65%;box-shadow:0 0 0 1.5px var(--g3),0 2px 6px rgba(10,10,12,.12)}
.ck-sk>*{opacity:0;animation:ckSk .8s var(--ease) forwards}
.ck-sk .ck-sk-1{animation-delay:.15s} .ck-sk .ck-sk-2{animation-delay:.45s} .ck-sk .ck-sk-3{animation-delay:.75s} .ck-sk .ck-sk-4{animation-delay:1.05s}
.ck-sk .ck-ln0{opacity:1;animation:none}
@keyframes ckSk{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.ck-lanes{display:grid;grid-template-columns:repeat(3,280px);justify-content:center;column-gap:40px}
.ck-lane{display:flex;flex-direction:column;align-items:center;min-width:0}
.ck-lane-h{display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 18px 0 9px;border-radius:999px;background:var(--ck-tag);
  box-shadow:inset 0 0 0 1px var(--ck-tag-edge),var(--ck-tag-sh);font-size:14.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.ck-lane-h b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--canvas);font-size:12.5px;font-weight:700}
.ck-steps{width:min(236px,100%);margin-top:16px;text-align:left}
.ck-steps li{display:flex;align-items:center;gap:11px;padding:4px 0;font-size:14.5px;line-height:1.4;color:var(--ink2);transition:color .4s ease}
.ck-steps li i{flex:none;width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-on);transition:background-color .4s ease,box-shadow .4s ease}
.ck-steps li.now{color:var(--ink);font-weight:600}
.ck-steps li.now i{background:var(--grad);box-shadow:none}
.ck-steps li.done i{width:12px;height:7px;margin:0 -1px 3px 1px;border-radius:0;box-shadow:none;border-left:2.2px solid var(--blue);border-bottom:2.2px solid var(--blue);transform:rotate(-45deg)}
.ck-w-note{max-width:64ch;margin:clamp(22px,2.4vw,32px) auto 0;font-size:13.5px;line-height:1.55;color:var(--ink2)}
.ck-wait.is-queue .ck-wl-s{animation:none;opacity:0}
.ck-wait.is-queue .ck-sk>*{animation:none;opacity:0}
.ck-wait.is-queue .ck-sk .ck-ln0{opacity:1}

/* loading */
.ck-loading{min-height:620px;padding-top:clamp(150px,14vw,210px);text-align:center}
.ck-load-fr{width:min(300px,72%);margin:0 auto;text-align:left}
.ck-load{margin-top:26px;font-size:17px;font-weight:500;color:var(--ink2)}
.ck-w-bar-i{width:min(220px,60%);margin-top:18px}
.ck-w-bar-i i{width:34%;animation:ckIndet 1.7s var(--ease) infinite}
@keyframes ckIndet{from{transform:translateX(-110%)}to{transform:translateX(310%)}}

/* the endings */
.ck-end{padding-top:clamp(100px,8.6vw,132px)}
.ck-end:not([data-st="blocked"]){min-height:520px}
.ck-end-hd{display:flex;flex-direction:column;align-items:center;text-align:center}
.ck-scene{display:block;width:min(400px,92%);height:auto;overflow:visible}
.ck-nw{white-space:nowrap}
.ck-end-h{max-width:24ch;margin-top:clamp(20px,2.2vw,28px)}
.ck-end-p{max-width:54ch;margin:16px auto 0}
.ck-still{margin-top:clamp(40px,4vw,64px)}
.ck-sc-f{fill:var(--panel);stroke:var(--line-on);stroke-width:1}
.ck-sc-ghost{fill:none;stroke:var(--line-on);stroke-width:1.2}
.ck-sc-bar{fill:none;stroke:var(--line);stroke-width:1}
.ck-sc-d{fill:var(--chrome-dot)}
.ck-sc-cb{fill:var(--chrome)}
.ck-sc-gd{fill:none;stroke:var(--line-on);stroke-width:1}
.ck-sc-t{font-family:Figtree,-apple-system,"Helvetica Neue",Arial,sans-serif;font-size:9px;font-weight:500;fill:var(--ink3);text-anchor:middle}
.ck-sc-v{fill:var(--ck-u0)}
.ck-sc-c{fill:var(--panel);stroke:var(--line-on);stroke-width:1}
.ck-sc-b{fill:var(--ck-u3)} .ck-sc-b2{fill:var(--ck-u1)}
.ck-sc-k{fill:none;stroke:var(--ck-u3);stroke-width:1.2}
.ck-sc-l{fill:none;stroke:var(--ck-wire);stroke-width:1.5;stroke-linecap:round}
.ck-sc-stop{fill:none;stroke:var(--ink2);stroke-width:3;stroke-linecap:round}
.ck-sc-ring{fill:var(--canvas);stroke:var(--ink2);stroke-width:1.6}
.ck-sc-end{fill:var(--ink2)}
.ck-sc-p circle{fill:var(--panel);stroke:var(--line-on);stroke-width:1.2}
.ck-sc-p text{font-family:Figtree,-apple-system,"Helvetica Neue",Arial,sans-serif;font-size:11.5px;font-weight:700;fill:var(--ink2);text-anchor:middle}
.ck-sc-off{opacity:.45}

/* ═══ the scan-box sheet ══════════════════════════════════════════════════════════════════════════════════ */
.ck-sheet-hd{padding-top:clamp(108px,10vw,150px);text-align:center}
.ck-sheet-hd .h2{margin-top:18px}
.ck-sheet-b{padding-top:clamp(40px,4.4vw,72px)}
.ck-states{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(30px,3.2vw,48px) clamp(28px,3.6vw,60px);align-items:start}
.ck-state{margin:0;min-width:0}
.ck-state figcaption{margin:0 0 12px 6px;font-size:13.5px;font-weight:600;color:var(--ink2)}
.ck-state .ck-scan{max-width:none;margin:0}
.ck-scan.is-focus .ck-scan-f{border-color:var(--blue);box-shadow:0 0 0 4px var(--ring-soft),var(--sh-panel)}
.ck-ts-demo{display:grid;place-items:center;width:300px;max-width:100%;height:65px;border-radius:6px;background:var(--tint-on);box-shadow:inset 0 0 0 1px var(--line-on);font-size:13px;font-weight:500;color:var(--ink2)}
.ck-recent{margin-top:14px;padding:14px 20px 0;border-radius:20px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.ck-recent .ck-site-n{border-bottom:0;padding-bottom:14px}

/* ═══ /tools/ ═════════════════════════════════════════════════════════════════════════════════════════════ */
.ck-hero-s{padding-top:clamp(100px,10.6vw,152px);text-align:center}
/* ⛔ 2026-10-26 his word on /bot/: "here need bigger gap between those 2" — the 80 px heading had the 14 px lead gap of a small
   one. Scaled like the how-it-works heading's (22 px under 64 px): 32 px on a big screen, 22 at 1000, phones keep 14.
   The short hero is /bot/ and /tools/ only (page_more.py), so both get it and stay alike. */
.ck-hero-s .ck-lead{margin-top:clamp(14px,2.2vw,32px)}
.ck-tsec{padding-top:clamp(52px,6vw,88px)}
.ck-tcard{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,4.4vw,72px);align-items:center;padding:clamp(24px,3.6vw,56px)}
.ck-tcard-h{font-size:clamp(28px,3vw,40px);font-weight:700;letter-spacing:-.032em;line-height:1.1}
.ck-tcard-h a{display:inline-flex;align-items:center;min-height:44px;transition:color .2s ease}
.ck-tcard-h a:hover{color:var(--blue)}
.ck-tcard-q{margin-top:10px;font-size:clamp(17px,1.4vw,19px);line-height:1.5;color:var(--ink2)}
.ck-facts-l{justify-content:flex-start;margin-top:16px}
.ck-tcard-c{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px;margin:22px 0 28px;padding-top:20px;border-top:1px solid var(--line);font-size:15px;color:var(--ink)}
.ck-tcard-c li{display:flex;align-items:flex-start;gap:9px}
.ck-tcard-c .ck-tk{margin-top:3px}
.ck-map--tool .ck-seg{margin:0}
.ck-more{margin:28px 0 0;text-align:center;font-size:15px;color:var(--ink2)}
.ck-hows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.4vw,56px);margin-top:clamp(60px,6.6vw,104px)}
.ck-ic48{display:block;width:40px;height:40px}
.ck-hows .ck-h3{margin-top:14px}
.ck-hows p{margin-top:6px;font-size:15.5px;line-height:1.6;color:var(--ink2)}

/* ═══ /bot/ ═══════════════════════════════════════════════════════════════════════════════════════════════ */
.ck-bot-h1{max-width:12.5em;margin:0 auto}
.ck-bot-lead{max-width:54ch}
.ck-bot-pic{position:relative;width:min(520px,100%);margin:clamp(30px,3.4vw,46px) auto 0;aspect-ratio:520 / 290}
.ck-bot-w{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ck-bot-fr{position:absolute;z-index:2;left:calc(120 / 520 * 100%);top:0;width:calc(280 / 520 * 100%);text-align:left}
.ck-bot-lanes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:min(520px,100%);margin:10px auto 0;font-size:13.5px;font-weight:600;color:var(--ink)}
.ck-bot-lanes li{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.ck-bot-lanes b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--canvas);font-size:12.5px;font-weight:700}
.ck-sec-q{padding-top:clamp(72px,8vw,124px)}
.ck-qa{max-width:960px;margin:0 auto}
.ck-qa li{display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);gap:clamp(12px,2.4vw,40px);padding:clamp(20px,2.2vw,26px) 0;border-top:1px solid var(--line)}
.ck-qa li:first-child{border-top:0}
.ck-qa-q{font-size:clamp(17px,1.45vw,19.5px);font-weight:700;letter-spacing:-.02em;line-height:1.3;color:var(--ink)}
.ck-qa-a{font-size:16px;line-height:1.65;color:var(--ink2)}
.ck-qa-a a{color:var(--blue);border-bottom:1px solid var(--ul)}
.ck-bot-cta{display:flex;justify-content:center;margin-top:clamp(36px,4vw,56px)}

/* ═══ privacy: the new section, inside the policy's own layout ════════════════════════════════════════════ */
.ck-psec{scroll-margin-top:96px}


@media (max-width:900px){
  .ck-tcard{grid-template-columns:minmax(0,1fr)}
  .ck-hows{grid-template-columns:minmax(0,1fr);gap:30px}
  .ck-qa li{grid-template-columns:minmax(0,1fr);gap:8px}
  .ck-states{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .ck-sumplate .ck-sum.ck-sum-ns{grid-template-areas:"h" "k"}
  .ck-sum-ns .ck-sum-h{margin-top:0}
  .ck-sum.ck-sum-ns .ck-counts{flex-direction:row;flex-wrap:wrap;gap:6px 16px;margin-top:14px}
  .ck-row-w0{display:block}
  .ck-row-w0 .ck-st-m::before{display:none}
  .ck-row-w0 .ck-st-m{margin-left:0}
  /* waiting on the phone: a smaller frame, the three lanes side by side, only the step each one is on */
  .ck-wait{padding-top:96px}
  .ck-w-big{font-size:31px}
  .ck-w-title{margin-top:8px;font-size:16.5px}
  .ck-w-lead{font-size:15px}
  .ck-w-bar{margin-top:18px}
  .ck-w-pic{aspect-ratio:365 / 270;max-width:365px;margin-top:20px}
  .ck-w-wires-d{display:none}
  .ck-w-wires-p{display:block}
  .ck-w-frame{left:calc(52 / 365 * 100%);top:0;width:calc(260 / 365 * 100%)}
  .ck-wport:nth-of-type(1){left:40.4%} .ck-wport:nth-of-type(3){left:59.6%}
  .ck-lanes{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:8px}
  .ck-lane-h{flex-direction:column;height:auto;padding:0;gap:6px;background:none;box-shadow:none;font-size:13.5px;line-height:1.3;white-space:normal;text-align:center}
  .ck-steps{width:auto;margin-top:6px}
  .ck-steps li{justify-content:center;padding:0;font-size:13px;text-align:center}
  .ck-steps li.now{color:var(--ink2);font-weight:500}
  .ck-steps li:not(.now){display:none}
  .ck-steps li i{display:none}
  .ck-w-note{font-size:13px}
  .ck-end{padding-top:96px}
  .ck-tcard{padding:20px}
  .ck-tcard-c{grid-template-columns:minmax(0,1fr);gap:8px}
  .ck-tcard .btn{width:100%}
  .ck-map--tool .ck-seg{margin:0 auto}
  .ck-qa-a{font-size:15.5px}
  .ck-state figcaption{margin-left:4px}
}


/* ═══ fix round: the phone picker, the folded "loaded" companies, the section bar, 320px ═══════════════════ */
.ck-co-more{display:none}
.ck-sbar{display:none}
@media (max-width:1180px){
  /* the seven that only loaded fold into one line; tap to see them */
  .ck-map--rep .ck-co-end::before{bottom:0;height:auto}
  .ck-co-more{display:block;position:relative;order:calc(var(--o) + 10);flex:0 0 100%;padding:10px 0 0 40px;pointer-events:auto}
  .ck-co-more::before{content:"";position:absolute;left:17px;top:0;height:calc(50% + 5px);width:1.5px;background:var(--ck-hair)}
  .ck-more-b{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:6px 16px 6px 14px;border-radius:999px;
    box-shadow:inset 0 0 0 1px var(--line-on);font-size:14px;font-weight:600;color:var(--ink2);text-align:left}
  .ck-more-b::before{content:"";position:absolute;left:-23px;top:50%;width:23px;height:1.5px;background:var(--ck-hair)}
  .ck-more-b .ck-co-m{--mr:var(--st-na)}
  .ck-more-b .ck-chev{margin:0 0 0 auto;transition:transform .35s var(--ease)}
  .ck-map--rep.ck-more-on .ck-more-b .ck-chev{transform:rotate(180deg)}
  .ck-map--rep .ck-co-r.ck-co-1{display:none}
  .ck-map--rep.ck-more-on .ck-co-r.ck-co-1{display:block}
  .ck-map .ck-leg{gap:4px 16px;font-size:13px}
  /* a tree pill's word drops under the name when the line is narrow */
  .ck-co-b{white-space:normal}
  .ck-co-t,.ck-co-1 .ck-co-t,.ck-co-l .ck-co-t{flex-wrap:wrap;row-gap:1px}
  .ck-co-ws,.ck-co-l .ck-co-ws{margin-left:auto}
}
@media (max-width:640px){
  /* the picker */
  .ck-part-fix{display:flex;flex-direction:column}
  .ck-part-fix .ck-part-h{order:0}
  .ck-fix-i{display:none}
  .ck-fix-mi{display:block;order:1;margin-top:6px;font-size:15px;line-height:1.55;color:var(--ink2)}
  .ck-part-fix .ck-fix{order:2;margin-top:12px}
  .ck-fix-n{display:inline-flex;align-items:center;height:28px;margin:0 0 8px;padding:0 12px;border-radius:999px;background:var(--ink);color:var(--canvas);font-size:13px;font-weight:600}
  .ck-fix-pick{display:flex;order:3;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:44px;margin-top:14px;padding:6px 14px 6px 16px;
    border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-on);font-size:14.5px;font-weight:600;color:var(--ink);text-align:left}
  .ck-fix-pick .ck-chev{margin:0;transition:transform .35s var(--ease)}
  .ck-part-fix .ck-tools{order:4;display:none;margin-top:10px}
  .ck-part-fix.is-pick .ck-tools{display:flex}
  .ck-part-fix.is-pick .ck-fix-pick .ck-chev{transform:rotate(180deg)}
  .ck-fix-i0{display:block;order:1}
  .ck-fix-i0 ~ .ck-tools{display:flex;order:2}
  .ck-fix-i0 ~ .ck-fix{order:3}
  /* the section bar: where you are in a long report (computer: the plates are short enough to see) */
  .ck-sbar{display:block;position:fixed;z-index:230;left:14px;right:14px;top:82px;opacity:0;transform:translateY(-8px);pointer-events:none;
    transition:opacity .3s ease,transform .45s var(--ease),top .4s var(--ease)}
  .ck-sbar.is-on{opacity:1;transform:none;pointer-events:auto}
  #nav.hide ~ main .ck-sbar{top:14px}
  .ck-sbar-b{display:flex;align-items:center;gap:11px;width:100%;height:48px;padding:0 16px 0 7px;border-radius:999px;background:var(--nav-bg);
    box-shadow:inset 0 0 0 1px var(--line-2),var(--sh-nav);text-align:left;color:var(--ink)}
  .ck-sbar-s{display:grid;place-items:center;flex:none;min-width:36px;height:36px;padding:0 5px;border:2px solid transparent;border-radius:999px;
    background:linear-gradient(var(--panel),var(--panel)) padding-box,var(--grad) border-box;font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums}
  .ck-sbar-s[hidden]{display:none}
  .ck-sbar-t{flex:1;min-width:0;font-size:14px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
  .ck-sbar-up{flex:none;color:var(--ink2)}
}
html[data-frame="page"] .ck-sbar{display:none!important}

@media (prefers-reduced-motion:reduce){
  .ck *,.ck *::before,.ck *::after{animation:none!important;transition:none!important}
  .ck-ln-s,.ck-ln-h,.ck-ln-c{stroke-dashoffset:42}
  .ck-wl-s{stroke-dashoffset:55}
  .ck-sk>*{opacity:1}
  .ck-w-bar-i i{transform:translateX(100%)}
  .ck-map[data-visit="2"] .ck-bn,.ck-map[data-visit="3"] .ck-bn{opacity:0}
  .ck-map[data-visit="2"] .ck-cur,.ck-map[data-visit="3"] .ck-cur{opacity:0}
}

/* ── the report's top = B's centred score hero (Ringa's pick 2026-10-16) ── */
.ck-hs-in{display:flex;flex-direction:column;align-items:center;text-align:center}
.ck-hs-when{margin:14px 0 0;max-width:640px;font-size:13.5px;line-height:1.55;color:var(--ink2);text-wrap:balance}
.ck-hs-when span{white-space:nowrap}
.ck-hs .ck-ring.ck-hs-ring{width:168px;margin-top:clamp(22px,2.4vw,30px)}
.ck-hs .ck-hs-ring .ck-ring-v{stroke:url(#gr)}
.ck-hs .ck-hs-ring .ck-ring-n b{font-size:56px}
.ck-hs-band{display:inline-flex;align-items:center;gap:10px;margin:clamp(20px,2vw,26px) 0 0;font-size:15px;font-weight:600}
.ck-hs-mk{width:10px;height:10px;border-radius:50%;background:var(--st-ok);box-shadow:0 0 0 2px var(--canvas),0 0 0 3.5px var(--st-ok)}
.ck-band-no .ck-hs-mk{background:var(--st-no);box-shadow:0 0 0 2px var(--canvas),0 0 0 3.5px var(--st-no)}
.ck-band-warn .ck-hs-mk{background:var(--st-warn);box-shadow:0 0 0 2px var(--canvas),0 0 0 3.5px var(--st-warn)}
.ck-hs-h{margin:12px 0 0;max-width:36ch;font-size:clamp(22px,2.3vw,33px);font-weight:600;letter-spacing:-.022em;line-height:1.28;color:var(--ink);text-wrap:balance}
.ck-hs .ck-counts{justify-content:center;margin-top:16px;font-size:14.5px;gap:6px 20px}
.ck-hs .ck-counts .ck-mk{width:8px;height:8px}
.ck-hs .ck-counts .ck-mk-ok{width:8px;height:8px;border-radius:50%;background:var(--st-ok)}
.ck-hs .ck-counts .ck-mk-ok svg{display:none}
.ck-hs .ck-counts .ck-mk-na{box-shadow:inset 0 0 0 1.5px var(--ink3)}
@media (max-width:640px){
  .ck-hs .ck-ring.ck-hs-ring{width:148px;margin-top:20px}
  .ck-hs .ck-hs-ring .ck-ring-n b{font-size:48px}
  .ck-hs-when{font-size:13px}
  .ck-hs-h{font-size:22px;line-height:1.3}
}

/* ═══════════ PORT ADDITIONS (2026-10-16) — cases the prototype never had ═══════════════════════════════
   The prototype drew four hand-made reports. A real one can also be empty, or half-tested, and it carries a
   real screenshot instead of a drawn site. Everything below uses the design's own tokens and marks. */
.ck-none{margin:0;padding:clamp(18px,2vw,26px) 0 0;font-size:15.5px;line-height:1.6;color:var(--ink2)}
.ck-vc .ck-vc-0{display:block;font-size:14.5px;line-height:1.55;color:var(--ink2)}
.ck-d-na{background:radial-gradient(circle,var(--st-na) 0 2.2px,transparent 2.6px)}
.ck-dv-na{--mk:var(--st-na);--mr:var(--st-na);color:var(--ink2)}
/* the picture: the real homepage as our visitor saw it, inside the same browser frame the prototype drew */
.ck-shot{display:block;width:100%;height:auto}

/* 2026-10-17 — the example report must read as an example before anyone has scanned anything (his ChatGPT review) */
.ck-ex-pill{margin-bottom:14px}
.ck-ex-n{display:inline-flex;align-items:baseline;gap:9px;min-width:0}
.ck-ex-tag{flex:none;padding:3px 9px;border-radius:999px;background:var(--tint-on);font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--ink2)}

/* 2026-10-17 — "shorten it … repetitive useless information" (his word on the review). The six checks were six big
   cells restating the animation above; the four banner ones are now a tight list, and the two wider ones one line. */
.ck-checks-t{grid-template-columns:minmax(0,1fr);padding:clamp(6px,1vw,12px) clamp(24px,3.6vw,52px)}
.ck-checks-t .ck-chk{grid-template-columns:44px minmax(0,1fr);gap:18px;align-items:center;padding:clamp(15px,1.7vw,20px) 0;border-top:1px solid var(--line)}
.ck-checks-t .ck-chk:first-child{border-top:0}
.ck-checks-t .ck-ic{width:44px;height:33px;margin:0}
.ck-checks-t .ck-chk p{margin:0;font-size:15.5px;line-height:1.62;color:var(--ink2)}
.ck-checks-t .ck-chk p b{color:var(--ink);font-weight:700}
.ck-checks-t .ck-chk.ck-chk-also{grid-template-columns:minmax(0,1fr)}
.ck-checks-t .ck-chk-also p{font-size:14.5px}
@media (max-width:640px){
  .ck-checks-t{padding:4px 22px}
  .ck-checks-t .ck-chk{grid-template-columns:38px minmax(0,1fr);gap:14px;padding:15px 0}
  .ck-checks-t .ck-ic{width:38px;height:28px}
  .ck-checks-t .ck-chk p{font-size:15px}
}

/* 2026-10-17 — his word on the hero: "bigger gaps above and below, center it", the facts under the box, and
   "See how it works" centred as the LAST thing in the hero. The line that follows ("We arrive like a real
   visitor…") must not peek above the fold — it belongs to the next section and should arrive on scroll. */
.ck-hero .ck-hero-f{flex-direction:column;align-items:stretch;gap:clamp(20px,2.6vw,34px);margin-top:clamp(18px,2vw,26px)}
/* ⛔ stretch, not center: a centred column sizes its children to their content, so the three facts stopped
   wrapping and ran off the side of a 360 px phone. They centre themselves (.ck-facts justify-content). */
.ck-hero .ck-hero-f .ck-facts{max-width:100%}
.ck-hero .ck-hero-f .ck-down{align-self:center;margin:0}
/* ⛔ PRODUCTION ONLY — the design kit cannot carry this: a canvas artboard is as tall as its page, so its
   lint forbids viewport units. svh (not vh) so iOS Safari's bars never hide the last line. */
/* ⛔ grid-template-columns: without it the implicit column is sized to its content, so on a 320–390 px phone
   the facts row pushed the whole hero wider than the screen and got clipped. minmax(0,1fr) lets it shrink. */
.ck-scanner .ck-hero{min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr);align-content:center;
  padding-bottom:clamp(40px,5vw,72px)}
@media (max-width:640px){
  /* ⛔ On a first visit the site's own cookie bar sits at the bottom — 180 px of it on a 393×700 phone. Centring
     the hero there pushed "See how it works" underneath it. On phones the hero stays at the top, as it was; the
     full-screen height still keeps the next section below the fold. Measured on v2: bar 506, link ends 480. */
  .ck-scanner .ck-hero{align-content:start;padding-top:84px;padding-bottom:clamp(120px,22vw,160px)}
  .ck-hero .ck-hero-f{margin-top:14px;gap:10px}
}

/* 2026-10-17b — the facts as chips, and "See how it works" as the hero's own bottom line (his word:
   "those 3 doesnt look really tasty", "see how it works should be way lower on the bottom of hero"). */
.ck-hero .ck-facts{gap:10px 12px;margin:0}
.ck-hero .ck-facts li{gap:9px;padding:9px 17px 9px 13px;border-radius:999px;background:var(--panel);
  box-shadow:var(--sh-chip);font-size:14.5px;font-weight:600;color:var(--ink)}
.ck-fic{width:19px;height:19px;flex:none}
.ck-hero-b{text-align:center}
/* ⛔ production only (viewport units): row 1 holds the hero, centred; row 2 is the link, at the very bottom. */
.ck-scanner .ck-hero{grid-template-rows:1fr auto;align-content:stretch;padding-bottom:clamp(150px,13vw,200px)}
.ck-scanner .ck-hero>.wrap:first-of-type{align-self:center}
.ck-scanner .ck-hero-b{align-self:end}
/* ⛔ that bottom padding is not decoration: the site's own cookie bar floats 14 px off the bottom and is 114 px
   tall on a computer. Without it the link he asked to put "on the bottom of hero" lands underneath the bar. */
@media (max-width:640px){
  /* on a phone the bar is 180 px of a 700 px screen, so the link stays with the facts and the chips go compact */
  .ck-scanner .ck-hero{grid-template-rows:auto auto;padding-bottom:clamp(120px,22vw,160px)}
  .ck-scanner .ck-hero>.wrap:first-of-type{align-self:start}
  .ck-scanner .ck-hero-b{align-self:start;margin-top:4px}
  .ck-hero .ck-facts{gap:8px 8px}
  .ck-hero .ck-facts li{padding:6px 13px 6px 10px;font-size:13.5px;gap:7px}
  .ck-fic{width:16px;height:16px}
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   2026-10-17c — THE REPORT READS ANSWER FIRST (his brief: "substantially simpler, shorter, and more useful",
   and his word while it was being built: "also nicely display those findings. dont delete too much
   information bro. just make everything simpler for humans who dont understand shit").
   So: the outcome and the one copy action come first, the findings are one ordered list, and every piece of
   evidence that used to be on screen at once is still here — behind a fold that says how much is inside.
   ⛔ Nothing in score.js or the robot's findings changed; this is reading order and density only.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── the answer: domain · outcome · one sentence · the copy action · what was covered ── */
.ck-sumplate{max-width:none;text-align:left}
.ck-sum-host{margin-bottom:clamp(14px,1.6vw,20px)}
.ck-sum-h{display:flex;align-items:center;gap:13px;font-size:clamp(27px,3.1vw,40px);font-weight:700;
  letter-spacing:-.032em;line-height:1.1;color:var(--ink)}
.ck-sum-h .ck-mk{width:14px;height:14px}
.ck-sum-h .ck-mk-ok{width:24px;height:24px}
.ck-sum-h .ck-mk-ok svg{width:24px;height:24px}
.ck-sum-p{max-width:62ch;margin-top:12px;font-size:clamp(16px,1.3vw,18px);line-height:1.55;color:var(--ink2)}
/* a coverage gap is never only a footnote: it sits with the outcome, in the untested grey */
.ck-gap{display:flex;align-items:baseline;gap:10px;max-width:62ch;margin-top:16px;padding:11px 14px;
  border-radius:13px;background:var(--field);border:1px solid var(--line);font-size:14.5px;line-height:1.55;color:var(--ink2)}
.ck-gap .ck-mk{position:relative;top:4px}
.ck-gap a{color:var(--blue);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.ck-sum-a{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(20px,2.2vw,28px)}
/* the quiet line: facts the report rests on, and the score as one of them — never the headline */
.ck-sum-m{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;margin-top:clamp(16px,1.8vw,22px);
  padding-top:14px;border-top:1px solid var(--line);font-size:13.5px;line-height:1.5;color:var(--ink3)}
.ck-sum-m>span:not(:last-child)::after{content:"·";margin:0 8px;color:var(--line-2)}
.ck-scorec{display:inline-flex;align-items:center;gap:7px;width:auto;margin-left:12px;padding:0;
  font-size:13.5px;font-weight:600;color:var(--ink2)}
.ck-scorec .ck-chev{width:13px;height:13px}
.ck-sdot{display:inline-block;width:8px;height:8px;border-radius:50%}
.ck-sdot.ck-band-no{background:var(--st-no)}
.ck-sdot.ck-band-warn{background:var(--st-warn)}
.ck-sdot.ck-band-ok{background:var(--st-ok)}
.ck-scorex{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(18px,2.4vw,34px);padding:20px 0 4px}
.ck-ring-s{width:clamp(96px,8vw,116px)}
.ck-ring-s .ck-ring-n b{font-size:clamp(28px,2.6vw,34px)}
.ck-ring-s .ck-ring-n span{font-size:11.5px}
.ck-scorex-t{flex:1 1 34ch;min-width:0}
.ck-scorex-t .ck-hs-band{margin:0 0 8px}
.ck-scorex-t p{font-size:14px;line-height:1.6;color:var(--ink2)}
.ck-scorex-t p + p{margin-top:8px}
/* the fallback when the clipboard is blocked: the same text, selectable */
.ck-sum-x{margin-top:16px}
.ck-sum-x label{display:block;font-size:13.5px;font-weight:600;color:var(--ink)}
.ck-sum-x textarea{width:100%;margin-top:7px;padding:12px 14px;border-radius:13px;background:var(--field);
  border:1px solid var(--line);font:inherit;font-size:13px;line-height:1.5;color:var(--ink);resize:vertical}

/* ── a section behind a fold. The count is in the head, so nothing is hidden by surprise ── */
.ck-foldsec{padding-top:clamp(14px,1.5vw,18px);padding-bottom:clamp(14px,1.5vw,18px)}
.ck-fs-b{align-items:baseline;padding:4px 0}
.ck-fs-t{font-size:clamp(17px,1.5vw,20px);font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.ck-fs-n{flex:1 1 auto;padding-left:14px;font-size:14px;font-weight:400;line-height:1.45;color:var(--ink3)}
.ck-fs-b .ck-chev{flex:none;transition:transform .35s var(--ease)}
.ck-fs-b[aria-expanded="true"] .ck-chev{transform:rotate(180deg)}
.ck-fs-in{padding-top:6px}
.ck-fs-na .ck-fs-t{color:var(--ink2)}
/* ⛔ no cards inside cards: the tables keep their markup but lose their plate chrome inside a fold */
.ck-fs-in .panel.ck-plate{padding:0;background:none;border:0;box-shadow:none}
.ck-fs-in .ck-plate + .ck-plate{margin-top:clamp(26px,3vw,40px);padding-top:clamp(22px,2.4vw,30px);border-top:1px solid var(--line)}
.ck-fs-in .ck-h2{font-size:clamp(17px,1.4vw,19px);letter-spacing:-.018em}
.ck-fs-in .ck-pl{margin-top:6px;font-size:14px}
.ck-fs-in .ck-notes-r{margin-top:clamp(24px,2.6vw,32px);padding-top:18px;border-top:1px solid var(--line);text-align:left}
.ck-fs-in .ck-pic{margin-top:clamp(26px,3vw,40px);padding-top:clamp(22px,2.4vw,30px);border-top:1px solid var(--line)}
.ck-fs-in .ck-pic figcaption{margin-bottom:12px}

/* ── the evidence inside an open finding ── */
.ck-ev-l{font-size:15px;line-height:1.6;color:var(--ink2)}
.ck-ev-l + .ck-ev-l{margin-top:7px}
.ck-ev-l b{color:var(--ink);font-weight:600}
.ck-ev{margin-top:10px;display:flex;flex-direction:column;gap:7px}
.ck-ev li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 9px;font-size:13.5px;color:var(--ink3)}
.ck-ev-m{margin-top:9px;font-size:13px;color:var(--ink3)}
.ck-pages{margin-top:clamp(26px,3vw,40px);padding-top:clamp(22px,2.4vw,30px);border-top:1px solid var(--line)}
.ck-pages ul{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}
.ck-ph-map{margin-bottom:clamp(16px,1.8vw,24px)}

@media (max-width:760px){
  .ck-sum-h{gap:11px;font-size:clamp(24px,7vw,30px)}
  .ck-sum-a{flex-direction:column;align-items:stretch}
  .ck-sum-a .btn{justify-content:center}
  /* on a phone the facts stack, so the middots go and the score gets its own line */
  .ck-sum-m{display:block}
  .ck-sum-m>span{display:block}
  .ck-sum-m>span:not(:last-child)::after{content:none;margin:0}
  .ck-scorec{margin:9px 0 0}
  .ck-fs-b{flex-wrap:wrap;gap:2px 12px}
  .ck-fs-n{flex-basis:100%;padding-left:0}
  .ck-fs-b .ck-chev{position:absolute;right:0;top:10px}
  .ck-foldsec{position:relative}
  .ck-scorex{gap:16px}
}

/* ── 2026-10-17c · the waiting screen tells the truth ──────────────────────────────────────────────────────
   The door reports queued/running and nothing else, so there is no stage to fill a bar with. The bar is the
   indeterminate one the loading screen already uses, the clock counts UP, and no step is ever ticked "done". */
.ck-w-el{margin-top:14px;font-size:14px;line-height:1.5;color:var(--ink3);text-align:center}
.ck-w-el>span{display:block}
.ck-w-el2{margin-top:5px;color:var(--ink2)}
.ck-wait .ck-w-bar-i{margin-left:auto;margin-right:auto}
/* the lanes are now a plain list of what each visitor does, so every step stays readable */
.ck-steps li{color:var(--ink2)}
.ck-steps li i{background:var(--ck-u2);box-shadow:none}
@media (max-width:640px){
  /* ⛔ the phone used to show ONLY the ticking step; with no ticking it would show nothing, so all steps stay */
  .ck-steps li:not(.now){display:flex}
  .ck-steps li{justify-content:flex-start;gap:8px;padding:2px 0;font-size:12.5px;text-align:left}
  .ck-steps li i{display:block;width:5px;height:5px}
}

/* ── 2026-10-18 · the three facts under the box, each its own ──────────────────────────────────────────────
   His word: "those 3 badges are now blue so they seem similar, i want each one to look tasty, have their own
   colour and svg and maybe free can be somewhere above the field or somehow more tastier so it pops in ur
   eye". So each chip gets its own hue AND its own drawn icon, and FREE is the loud one: a filled green chip
   with a green edge, while the other two stay quiet white chips. One pops, two support — the hierarchy does
   the popping, not three chips shouting at once.
   ⛔ These greens/ambers are chip colours only. The report's --st-* status tokens keep their own job; nothing
   here paints a status. */
.ck-facts{--f1a:#10B981;--f1b:#059669;--f2a:#6366F1;--f2b:#8B5CF6;--f3a:#F59E0B;--f3b:#EA8A04}
html[data-theme="dark"] .ck-facts{--f1a:#34D399;--f1b:#10B981;--f2a:#818CF8;--f2b:#A78BFA;--f3a:#FBBF24;--f3b:#F59E0B}
.ck-s.ck-f1a,.ck-f1a{stop-color:var(--f1a,#10B981)}
.ck-f1b{stop-color:var(--f1b,#059669)}
.ck-f2a{stop-color:var(--f2a,#6366F1)}
.ck-f2b{stop-color:var(--f2b,#8B5CF6)}
.ck-f3a{stop-color:var(--f3a,#F59E0B)}
.ck-f3b{stop-color:var(--f3b,#EA8A04)}
/* the gradients live in one <svg class="ck-defs"> per page, outside .ck-facts, so the stops take the
   page-level values; the chips keep their own copy for the dark theme to override */
.ck{--f1a:#10B981;--f1b:#059669;--f2a:#6366F1;--f2b:#8B5CF6;--f3a:#F59E0B;--f3b:#EA8A04}
html[data-theme="dark"] .ck{--f1a:#34D399;--f1b:#10B981;--f2a:#818CF8;--f2b:#A78BFA;--f3a:#FBBF24;--f3b:#F59E0B}

/* FREE is the one that pops: a filled chip in its own green */
.ck-hero .ck-facts .ck-f-free{
  background:color-mix(in srgb, var(--f1a) 11%, var(--panel));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--f1a) 34%, transparent),
             0 1px 2px rgba(10,10,12,.05), 0 10px 24px -14px color-mix(in srgb, var(--f1a) 55%, transparent);
  color:color-mix(in srgb, var(--f1b) 72%, var(--ink));
  font-weight:650;letter-spacing:-.004em}
html[data-theme="dark"] .ck-hero .ck-facts .ck-f-free{
  background:color-mix(in srgb, var(--f1a) 15%, var(--panel));
  color:color-mix(in srgb, var(--f1a) 80%, var(--ink))}
/* the other two stay quiet, but each keeps a trace of its own colour on the edge */
.ck-hero .ck-facts .ck-f-nomail{box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--f2a) 20%, var(--line-2)),0 1px 2px rgba(10,10,12,.04)}
.ck-hero .ck-facts .ck-f-fast{box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--f3a) 22%, var(--line-2)),0 1px 2px rgba(10,10,12,.04)}
.ck-hero .ck-facts .ck-f-free .ck-fic{width:20px;height:20px}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   2026-10-18 · THE SCANNER PAGE, HIS BRIEF — composition, spacing, information order (.ck-lean)
   His diagnosis: "the introduction is extremely spacious, then the example suddenly becomes a dense technical
   report. The page goes from too little information to too much, without a comfortable middle."
   His numbers, used as written: content width 1120–1200 · H1 48–60 px · section gaps 56–80 px · body 16–18 px
   · left-aligned hero and informational sections · one restrained hero background, fewer page-wide dots ·
   subtle borders, smaller radii.
   ⛔ The hero is NOT full-screen here: "the start of the next section should be visible on a typical laptop".
   That reverses his earlier "hero only on page load" — his own newer word, on purpose.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */
.ck-lean{--w:1160px;--ck-sec:clamp(56px,6vw,80px)}
.ck-lean .dots,.ck-how-page .dots{opacity:.45}

/* ── 1 · the introduction: form on the left, a real result on the right ── */
.ck-lean .ck-hero{min-height:0;display:block;padding-top:clamp(104px,9vw,132px);padding-bottom:clamp(30px,3.4vw,44px);text-align:left}
.ck-hero2-g{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(28px,4vw,60px);align-items:center}
.ck-lean .ck-h1{font-size:clamp(34px,4vw,56px);line-height:1.06;letter-spacing:-.035em}
.ck-lean .ck-lead{max-width:46ch;margin-top:14px;font-size:clamp(16px,1.3vw,18px);line-height:1.55}
.ck-lean .ck-scan-hero{margin-top:clamp(20px,2.4vw,30px)}
.ck-scan-lab{display:block;margin-bottom:9px;font-size:14px;font-weight:600;letter-spacing:-.008em;color:var(--ink)}
.ck-reass{margin-top:12px;font-size:14.5px;color:var(--ink3)}
.ck-reass b{font-weight:650;color:color-mix(in srgb, var(--f1b) 74%, var(--ink))}
html[data-theme="dark"] .ck-reass b{color:color-mix(in srgb, var(--f1a) 82%, var(--ink))}
/* "how the scan works button should be a bit further below" — its own breathing space under the labels */
.ck-lean .ck-hero-l{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin-top:clamp(30px,3.6vw,46px)}
.ck-lean .ck-hero-l .tlink{font-size:15px}

/* the preview: what you get, before you start. No ring, no cookie names, no platform buttons. */
.ck-prev{padding:clamp(18px,1.9vw,24px);border-radius:16px;background:var(--panel);
  box-shadow:inset 0 0 0 1px var(--line),0 1px 2px rgba(10,10,12,.04),0 18px 40px -28px rgba(28,28,70,.3)}
.ck-prev-k{font-size:12.5px;font-weight:600;letter-spacing:.005em;color:var(--ink3)}
.ck-prev-s{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:9px;padding-bottom:13px;
  border-bottom:1px solid var(--line);font-size:14.5px;color:var(--ink3)}
.ck-prev-s b{font-size:16px;font-weight:650;letter-spacing:.01em;color:var(--ink)}
.ck-prev-l{margin-top:13px;display:flex;flex-direction:column;gap:11px}
.ck-prev-l li{display:flex;align-items:baseline;gap:10px;font-size:15px;line-height:1.5;color:var(--ink2)}
.ck-prev-l .ck-mk{position:relative;top:4px}
.ck-prev-l b{font-weight:650;color:var(--ink)}
.ck-prev-a{margin-top:15px;font-size:14.5px}

/* ── 2 · the three consent states ── */
.ck-lean .shead{max-width:60ch;margin-bottom:clamp(18px,2vw,26px);text-align:left}
.ck-lean .shead .h2{font-size:clamp(24px,2.4vw,32px);letter-spacing:-.028em}
.ck-lean .shead .lead{margin-top:10px;font-size:16px}
/* ⛔ 2026-10-18 his word: the rules-and-text version was "kin da the worst, very hard to look at". Each
   consent state now has its OWN colour and its OWN mark: all three share the cookie-banner bar (the
   subject) and differ by a big coloured tick / cross / waiting dots. amber = no choice yet · green = yes ·
   red = no. ⛔ These are the states a visitor can be in, not a verdict about the website. */
.ck-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.ck-cs{padding:clamp(20px,2.2vw,28px);border-radius:var(--ck-r);background:var(--panel);
  box-shadow:inset 0 0 0 1px var(--line),var(--ck-sh)}
/* ⛔ no tile behind the icon: this site draws interfaces in a thin line, it does not box small glyphs.
   The drawing itself carries the state's colour. */
.ck-cs-i{display:block}
.ck-ci2{display:block;width:clamp(58px,5vw,70px);height:auto}
.ck-cs-h{margin-top:clamp(14px,1.6vw,20px);font-size:13.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.ck-cs p{margin-top:9px;font-size:clamp(16px,1.35vw,18px);line-height:1.45;letter-spacing:-.012em;color:var(--ink)}
.ck-cs-amber{color:var(--ac-amber)}
.ck-cs-amber .ck-cs-h{color:var(--ac-amber-ink)}
.ck-cs-green{color:var(--ac-green)}
.ck-cs-green .ck-cs-h{color:var(--ac-green-ink)}
.ck-cs-red{color:var(--ac-red)}
.ck-cs-red .ck-cs-h{color:var(--ac-red-ink)}
.ck-slink{margin-left:4px;color:var(--ac-blue-ink);font-weight:600;white-space:nowrap}
.ck-slink .ck-arr{vertical-align:-2px}
.ck-scope{margin-top:clamp(14px,1.6vw,20px);font-size:14px;line-height:1.55;color:var(--ink3)}

/* ── his §6 · the FAQ is a two-column layout, and "Learn more" is a small set of text links under it ──
   Left about a third: the heading and a link to the methodology. Right about two-thirds: the questions.
   On a phone they stack. */
.ck-faq-g{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start}
.ck-faq-side .h2{font-size:clamp(24px,2.4vw,32px);letter-spacing:-.028em}
.ck-faq-side p{margin-top:12px;font-size:16px;line-height:1.55;color:var(--ac-grey-ink)}
.ck-faq-side .ck-faq-l{margin-top:16px}
.ck-faq-side .tlink{font-size:15px;font-weight:600;color:var(--ac-blue-ink)}
.ck-faq-main{min-width:0}
.ck-lean .ck-sec-faq .ck-faq{margin:0;max-width:none}
.ck-learn{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:clamp(26px,3vw,38px);
  padding-top:clamp(20px,2.4vw,28px);border-top:1px solid var(--line)}
.ck-learn a{display:inline-flex;align-items:center;gap:7px;font-size:15px;font-weight:600;color:var(--ink2);
  transition:color .22s var(--ease)}
.ck-learn a:hover{color:var(--ac-blue-ink)}
.ck-learn .ck-arr{color:var(--ac-blue)}

/* ── the example, on this page: quieter, and it must not read as a wall ── */
.ck-lean .ck-ex{border-radius:18px}
.ck-lean .ck-after{margin-top:14px;font-size:13.5px;text-align:left;color:var(--ink3)}

@media (max-width:980px){
  .ck-hero2-g{grid-template-columns:minmax(0,1fr);gap:clamp(22px,3vw,30px)}
  /* the vertical rules become horizontal ones when the columns stack */
  .ck-cols{grid-template-columns:minmax(0,1fr)}
  .ck-cs{padding:clamp(18px,4vw,24px)}
  .ck-faq-g{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  /* on a phone the hero is taller than the screen anyway, so it grows instead of being pinned to 100svh.
     ⛔ The spacing here is tuned so "How the scan works" ends ABOVE the floating cookie bar (180 px of a
     700 px screen). Loosen these and the button lands underneath it, untappable until the bar is answered. */
  .ck-lean .ck-hero{min-height:0;display:block;padding-top:80px;padding-bottom:clamp(36px,8vw,52px)}
  .ck-cookie{margin-bottom:8px}
  .ck-lean .ck-hero-l{margin-top:14px}
  .ck-lean .ck-lead{margin-top:10px}
  .ck-lean .ck-scan-hero{margin-top:16px}
  .ck-reass{gap:6px}
  .ck-lean .ck-h1{font-size:clamp(29px,8vw,36px)}
  .ck-lean .ck-lead{font-size:16px}
  .ck-prev{padding:16px}
  .ck-lean .ck-sec-learn{padding-bottom:clamp(120px,22vw,160px)}
}
/* ⛔ left-aligning these sections takes three different rules, because the site centres them three ways:
   .shead is a flex column with align-items:center, .ck-lead and .faq are centred blocks (margin-inline:auto). */
.ck-lean .shead{align-items:flex-start;margin-left:0;margin-right:auto}
.ck-lean .ck-lead{margin-left:0;margin-right:auto}
.ck-lean .ck-faq{margin-inline:0}
.ck-lean .ck-after{text-align:left}
/* the arrow belongs in the second column, beside the title — not before it */
.ck-ln .ck-arr{grid-column:2}

/* ── the example, read the way the real report reads (his brief §5) ───────────────────────────────────────
   Outcome first; the cookie identifiers, the platform instructions, the signal map and the score explanation
   all moved behind details. "View evidence" names the control instead of leaving a bare chevron. */
.ck-ex-out{padding:clamp(18px,2vw,26px) 0 clamp(16px,1.8vw,22px);border-bottom:1px solid var(--line)}
.ck-ex-h{max-width:56ch;margin-top:10px;font-size:clamp(18px,1.7vw,22px);font-weight:650;
  letter-spacing:-.02em;line-height:1.3;color:var(--ink)}
.ck-ex-out .ck-counts{margin-top:14px}
/* ⛔ .ck-row-h is a 4-column grid (mark · text · status · chevron). "View evidence" is a FIFTH child, so the
   example's rows need their own template — otherwise it overflows the row and gets clipped. */
.ck-ex .ck-row-o .ck-row-h{grid-template-columns:18px minmax(0,1fr) auto auto 18px;gap:12px}
.ck-see{align-self:start;margin-top:1px;font-size:13.5px;font-weight:600;color:var(--blue);white-space:nowrap}
.ck-row-o.is-open .ck-see{color:var(--ink3)}
.ck-ex-fold{border-top:1px solid var(--line)}
.ck-ex-fold .ck-fold-b{padding:16px 0}
.ck-ex-fold .ck-fs-n{flex:1 1 auto;padding-left:12px;font-size:13.5px;font-weight:400;color:var(--ink3)}
.ck-ex-fold .ck-chev{flex:none;transition:transform .35s var(--ease)}
.ck-ex-fold .ck-fold-b[aria-expanded="true"] .ck-chev{transform:rotate(180deg)}
.ck-ex-tech{padding:4px 0 18px}
.ck-ex-score{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,2vw,28px);margin-top:clamp(20px,2.4vw,30px);
  padding-top:clamp(18px,2vw,24px);border-top:1px solid var(--line)}
.ck-ex-score>div{flex:1 1 32ch;min-width:0}
/* ⛔ his brief: the detected platform first, "Change platform" as a SECONDARY control — not eleven buttons.
   The collapse existed for phones only; here it applies at every width. */
.ck-lean .ck-fix-mi,.ck-lean .ck-fix-n{display:block}
.ck-lean .ck-fix-i{display:none}
.ck-lean .ck-fix-pick{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  min-height:40px;margin-top:12px;padding:5px 14px 5px 16px;border-radius:999px;background:var(--field);
  border:1px solid var(--line);font-size:14px;font-weight:600;color:var(--ink2)}
.ck-lean .ck-fix-pick .ck-chev{margin:0;transition:transform .35s var(--ease)}
.ck-lean .ck-part-fix.is-pick .ck-fix-pick .ck-chev{transform:rotate(180deg)}
.ck-lean .ck-part-fix .ck-tools{display:none;margin-top:10px}
.ck-lean .ck-part-fix.is-pick .ck-tools{display:flex}
@media (max-width:640px){
  .ck-see{display:none}
  .ck-ex-fold .ck-fs-n{flex-basis:100%;padding-left:0}
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   2026-10-18b · THE ACCENT PALETTE + VISUAL WEIGHT (his second brief)
   "Everything has almost the same visual weight. The background, cards, input and report are all near-white.
   Thin grey borders surround nearly everything… There's little distinction between the main action,
   supporting explanation and evidence. That is a major reason it feels dead."
   The palette is recorded in the brandbook (brand/v7/tokens/tokens.json + tokens.css, group "accent").
   blue = action · green = positive/passed · amber = time/attention · red = problem · grey = supporting.
   ⛔ Dark -ink text and small icons on VERY PALE -bg grounds; a status always carries a text label as well.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */
html .ck,html[data-theme="light"] .ck{
  --ac-blue:#2F6BFF;--ac-blue-ink:#255CE8;--ac-blue-bg:#F1F5FF;
  --ac-green:#16A34A;--ac-green-ink:#13803A;--ac-green-bg:#ECFDF3;
  --ac-amber:#D97706;--ac-amber-ink:#A85008;--ac-amber-bg:#FFF7E8;
  --ac-red:#DC2626;--ac-red-ink:#B91C1C;--ac-red-bg:#FEF0F0;
  --ac-grey:#8E8E97;--ac-grey-ink:#5E5E68;--ac-grey-bg:#F4F4F7;
  /* one shadow for the whole tool, much lighter than before, and one radius scale */
  --ck-sh:0 1px 2px rgba(10,10,12,.04);
  --ck-sh-up:0 6px 18px -12px rgba(28,28,70,.26);
  --ck-r:14px; --ck-r-s:11px;
}
html[data-theme="dark"] .ck{
  --ac-blue:#4B84FF;--ac-blue-ink:#6E9CFF;--ac-blue-bg:rgba(75,132,255,.10);
  --ac-green:#3FCF7F;--ac-green-ink:#5BDB93;--ac-green-bg:rgba(63,207,127,.12);
  --ac-amber:#F5B13D;--ac-amber-ink:#F7C063;--ac-amber-bg:rgba(245,177,61,.12);
  --ac-red:#FF5A5A;--ac-red-ink:#FF7B7B;--ac-red-bg:rgba(255,90,90,.12);
  --ac-grey:#7A7A84;--ac-grey-ink:#A6A6AF;--ac-grey-bg:rgba(255,255,255,.06);
  --ck-sh:0 1px 2px rgba(0,0,0,.3);
  --ck-sh-up:0 6px 18px -12px rgba(0,0,0,.6);
}
/* ⛔ "Reassurance and scope information currently look almost disabled." --ink3 is #A8A8B0 — too light to
   carry a fact. Supporting text on tool pages uses the palette's grey ink instead. */
.ck .ck-sum-m,.ck .ck-scope,.ck .ck-reass,.ck .ck-prev-k,.ck .ck-prev-s,.ck .ck-ev li,.ck .ck-ev-m,
.ck .ck-after,.ck .ck-notes,.ck .ck-fs-n,.ck .ck-ln span,.ck .ck-cs p{color:var(--ac-grey-ink)}
/* one shadow and one radius across the tool, instead of a border round everything */
/* ⛔ .ck-cs is NOT a card any more (his §4) — it was still being painted here, which is the rounded box
   he called ugly. Only real plates get the shadow. */
.ck .ck-plate,.ck .ck-ex{box-shadow:inset 0 0 0 1px var(--line),var(--ck-sh)}
.ck .ck-ln:hover{box-shadow:inset 0 0 0 1px var(--line-2),var(--ck-sh-up)}

/* the four statuses, from the palette, with a pale ground and always a word beside them */
.ck .ck-st-no{color:var(--ac-red-ink)}
.ck .ck-st-warn{color:var(--ac-amber-ink)}
.ck .ck-st-ok{color:var(--ac-green-ink)}
.ck .ck-st-na{color:var(--ac-grey-ink)}
.ck .ck-st-d{padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:650}
.ck .ck-st-d.ck-st-no{background:var(--ac-red-bg)}
.ck .ck-st-d.ck-st-warn{background:var(--ac-amber-bg)}
.ck .ck-st-d.ck-st-ok{background:var(--ac-green-bg)}
.ck .ck-st-d.ck-st-na{background:var(--ac-grey-bg)}

/* the reassurance line under the field: compact labels, no shadow, not buttons (his words) */
.ck-reass{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.ck-reass span{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;
  font-size:13.5px;font-weight:600;line-height:1.3}
.ck-reass .r-free{background:var(--ac-green-bg);color:var(--ac-green-ink)}
.ck-reass .r-none{background:var(--ac-grey-bg);color:var(--ac-grey-ink)}
.ck-reass .r-time{background:var(--ac-amber-bg);color:var(--ac-amber-ink)}
.ck-reass i{width:7px;height:7px;border-radius:50%;flex:none}
.ck-reass .r-free i{background:var(--ac-green)}
.ck-reass .r-none i{background:var(--ac-grey)}
.ck-reass .r-time i{background:var(--ac-amber)}

/* ── 2026-10-18b · the hero: one action on the left, one real proof on the right ───────────────────────────
   His brief §1 and §3: the invented preview card is gone; the right side is a readable crop of the ACTUAL
   report in a restrained browser frame, with a small "Example report · anonymised" caption. The two sides
   are one composition — aligned edges, balanced proportions — not a form beside a floating notification.
   ⛔ The crop is made by scanner-design's crop.mjs from a REAL robot answer, with the host never in frame. */
/* ⛔ 2026-10-18, his newest word: "whole hero can have more breathing room around so only how the scan works
   is visible in viewport everything else is below". So the hero owns the screen again and the LAST thing in
   it is the secondary button; "What the scanner checks" starts under the fold.
   ⛔ This reverses his earlier brief line ("the start of the next section should be visible on a typical
   laptop") — his own later instruction, deliberately.
   ⛔ The bottom padding also clears the site's floating cookie bar (114 px desktop / 180 px phone), so the
   button is never underneath it. */
.ck-lean .ck-hero{position:relative;min-height:100vh;min-height:100svh;display:grid;align-content:center;
  padding-top:clamp(112px,12vh,156px);padding-bottom:clamp(132px,16vh,196px)}
/* "One subtle blue-tinted hero background, with the dots confined to its edges." */
.ck-lean .ck-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ac-blue-bg);
  -webkit-mask-image:linear-gradient(#000 72%,transparent);mask-image:linear-gradient(#000 72%,transparent)}
.ck-lean .dots{opacity:.3}
.ck-hero2-g{align-items:center}
.ck-lean .ck-hero2-l{min-width:0}

/* a clearly defined input area with a stronger border — the main action must not be near-white on near-white.
   ⛔ The pill goes on the FORM, never on .ck-scan: that wrapper also holds the "Website address" label, and
   painting it drew a second rounded box around the label. (It did exactly that, and he caught it.) */
.ck-lean .ck-scan-f{background:var(--white);border-color:transparent;
  box-shadow:inset 0 0 0 1.5px var(--line-2),0 2px 4px rgba(10,10,12,.05),0 14px 30px -22px rgba(28,28,70,.35)}
html[data-theme="dark"] .ck-lean .ck-scan-f{background:var(--panel);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.16),0 2px 4px rgba(0,0,0,.4)}
.ck-lean .ck-scan-f:focus-within{border-color:transparent;
  box-shadow:inset 0 0 0 1.5px var(--ac-blue),0 0 0 4px var(--ac-blue-bg)}
/* the wrapper keeps the spacing the hero gave it — only its PAINT moved to the form */
.ck-lean .ck-scan{margin-left:0;margin-right:auto}
.ck-lean .ck-scan-hero{margin-top:clamp(22px,2.6vw,32px)}

/* "how the scan works button should be more visible" — it was a plain text link beside a blue button.
   It becomes a real secondary control: an outline button, clearly a thing you can press, still quieter
   than "Scan website". */
.ck-lean .ck-hero-l .tlink{display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 20px;
  border-radius:999px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line-2),var(--ck-sh);
  font-size:15px;font-weight:600;color:var(--ink);
  transition:box-shadow .3s var(--ease),transform .22s var(--ease),color .22s var(--ease)}
.ck-lean .ck-hero-l .tlink:hover{transform:translateY(-2px);color:var(--ac-blue-ink);
  box-shadow:inset 0 0 0 1px var(--ac-blue),var(--ck-sh-up)}
.ck-lean .ck-hero-l .tlink .ck-arr{color:var(--ac-blue)}

/* the restrained browser frame around the real report crop */
.ck-shot-f{margin:0}
.ck-shot-fr{overflow:hidden;border-radius:var(--ck-r);background:var(--panel);
  box-shadow:inset 0 0 0 1px var(--line),0 2px 6px rgba(10,10,12,.05),0 26px 60px -34px rgba(28,28,70,.4)}
.ck-shot-bar{display:flex;align-items:center;gap:6px;padding:11px 14px;background:var(--ck-u0);
  border-bottom:1px solid var(--line)}
.ck-shot-bar i{width:8px;height:8px;border-radius:50%;background:var(--ck-u3)}
.ck-shot-fr img{display:block;width:100%;height:auto}
.ck-shot-c{margin-top:11px;font-size:13px;color:var(--ac-grey-ink)}

/* the header's Contact: until 26 Oct this file turned it into a quiet outline on tool pages (the blue one competed with
   "Scan website"). Since his "lets make the contact button stay white in header" that white pill is the whole site's
   header button (src.html) — no tool override any more. */

@media (max-width:980px){
  .ck-lean .ck-hero::before{-webkit-mask-image:linear-gradient(#000 84%,transparent);mask-image:linear-gradient(#000 84%,transparent)}
  .ck-shot-f{margin-top:4px}
}
@media (max-width:640px){
  .ck-shot-bar{padding:9px 12px}
  .ck-shot-bar i{width:7px;height:7px}
}
/* the tool's own mark: a cookie, in the same line style as the section icons. One placement, above the H1. */
.ck-cookie{display:block;width:clamp(34px,3vw,42px);height:auto;margin-bottom:clamp(14px,1.5vw,18px)}
@media (max-width:640px){.ck-cookie{width:32px;margin-bottom:12px}}

/* ⛔ ORDER MATTERS: the hero's 100svh rule is declared in a LATER block than the phone overrides above, so at
   equal specificity it was winning on phones too and the phone tuning silently did nothing. These come last
   on purpose. The goal: "How the scan works" stays ABOVE the floating cookie bar (180 px of the screen). */
@media (max-width:640px){
  .ck-lean .ck-hero{min-height:0;display:block;padding-top:76px;padding-bottom:clamp(36px,8vw,52px)}
  .ck-lean .ck-hero-l{margin-top:14px}
  .ck-lean .ck-lead{margin-top:10px}
  .ck-lean .ck-scan-hero{margin-top:16px}
  .ck-cookie{width:30px;margin-bottom:8px}
  .ck-reass{gap:6px}
  .ck-reass span{padding:4px 10px;font-size:13px}
}
/* a short phone (640 px tall and under) needs another 15 px to keep the button clear of the cookie bar */
@media (max-width:640px) and (max-height:680px){
  .ck-lean .ck-hero{padding-top:70px}
  .ck-lean .ck-h1{font-size:clamp(27px,7.4vw,32px)}
  .ck-lean .ck-scan-hero{margin-top:13px}
  .ck-lean .ck-hero-l{margin-top:11px}
}
/* his §5: a compact finding = a short factual title, then one line naming the services it affected */
.ck-row-sub{display:block;margin-top:5px;font-size:14.5px;line-height:1.45;color:var(--ac-grey-ink)}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   2026-10-18c · "why run this scan?" replaces the example, and the FAQ gets a hierarchy
   His words: "example report section can be removed. instead explain to a user who doesnt even know what
   cookies is why this scanner is useful"; and on the FAQ: "everything is more or less same color, random
   layout, very hard for eyes to see anything or understand where is faq or where is button or wtf that
   text is". So: one white plate for the questions, a real button on the left, and the links get a label.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */
/* ⛔ his word: "this needs to be 2 separate sections · why run this scan center align · And below after
   good breathing gap the rectangle". So: the explanation is its own centred section, and the free offer is
   its own band underneath. */
/* ⛔ `.ck-lean .shead` is (0,2,0) and left-aligns every head on this page, so the centred one needs the
   same weight or it silently loses. */
.ck-lean .ck-shead-c{max-width:58ch;margin-left:auto;margin-right:auto;align-items:center;text-align:center}
.ck-lean .ck-shead-c .h2,.ck-lean .ck-shead-c .lead{text-align:center;margin-left:auto;margin-right:auto}
/* ⛔ his word: this section "looks super dead and not alive". It was three columns of centred grey text with
   pale number dots. Now the three numbers sit on one hairline — the three steps read as one run — and each
   badge is the brand gradient with a white numeral, so the eye has something to land on. */
/* ⛔ 2026-10-19 his word: "can this be left aligned since this whole pgae is left aligned but onlt this
   section is centered". So the steps sit on the page's own left line, and the hairline that joins them is
   drawn per step (badge → next column) instead of across the middle. */
.ck-why-l{--wgap:clamp(24px,3vw,44px);counter-reset:w;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--wgap);margin-top:clamp(36px,4.4vw,60px)}
.ck-why-l li{counter-increment:w;position:relative}
.ck-why-l li::before{content:counter(w);position:relative;z-index:1;display:grid;place-items:center;
  width:42px;height:42px;margin:0 0 clamp(16px,1.8vw,22px);border-radius:50%;background:var(--grad);
  color:#fff;font-size:16px;font-weight:700;box-shadow:0 6px 16px -8px rgba(47,107,255,.6)}
.ck-why-l li::after{content:"";position:absolute;top:21px;left:54px;right:calc(-1 * var(--wgap));height:1px;
  background:var(--line-2)}
.ck-why-l li:last-child::after{display:none}
.ck-why-l p{max-width:36ch}
.ck-why-h{font-size:clamp(17px,1.5vw,19px);font-weight:650;letter-spacing:-.018em;color:var(--ink)}
.ck-why-l p{margin-top:7px;font-size:16px;line-height:1.55;color:var(--ink2)}
/* the free offer is a band of its own: the one coloured block on the page, so the eye lands on it */
.ck-get{padding:clamp(28px,3.4vw,52px) clamp(24px,3vw,48px);border-radius:clamp(18px,2vw,26px);
  background:var(--ac-blue-bg);text-align:center}
.ck-get-h{font-size:clamp(23px,2.3vw,31px);font-weight:700;letter-spacing:-.026em;color:var(--ink)}
.ck-get-l{margin:clamp(22px,2.4vw,30px) auto 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px clamp(22px,3vw,44px);max-width:860px;text-align:left}
.ck-get-l li{display:flex;align-items:flex-start;gap:11px;font-size:16px;line-height:1.5;color:var(--ink)}
.ck-get-l .ck-tk{flex:none;margin-top:3px;color:var(--ac-green)}
.ck-get-b{margin-top:clamp(24px,2.6vw,34px)}

/* ── the FAQ reads as three distinct things: a title block, a plate of questions, a list of links ── */
.ck-faq-side p{margin-top:12px;font-size:16px;line-height:1.55;color:var(--ac-grey-ink)}
.ck-faq-side .ck-faq-l{margin-top:20px}
.ck-faq-side .ck-faq-l .tlink{display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 20px;
  border-radius:999px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line-2),var(--ck-sh);
  font-size:15px;font-weight:600;color:var(--ink);
  transition:box-shadow .3s var(--ease),transform .22s var(--ease),color .22s var(--ease)}
.ck-faq-side .ck-faq-l .tlink:hover{transform:translateY(-2px);color:var(--ac-blue-ink);
  box-shadow:inset 0 0 0 1px var(--ac-blue),var(--ck-sh-up)}
.ck-faq-side .ck-faq-l .ck-arr{color:var(--ac-blue)}
.ck-faq-p{padding:clamp(8px,1vw,14px) clamp(18px,2.2vw,30px);border-radius:var(--ck-r)}
.ck-lean .ck-faq-p .ck-faq{margin:0;padding:0;max-width:none}
.ck-learn-w{margin-top:clamp(22px,2.6vw,32px)}
.ck-learn-h{font-size:13px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--ac-grey-ink)}
.ck-learn{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:12px;padding-top:0;border-top:0}
@media (max-width:980px){
  .ck-why-l{grid-template-columns:minmax(0,1fr);gap:clamp(22px,4vw,30px)}
  .ck-why-l li::before{margin:0 0 12px}
  .ck-get-l{grid-template-columns:minmax(0,1fr)}
}

/* ── 2026-10-18d · breathing room ──────────────────────────────────────────────────────────────────────────
   His word: "gaps between sections are probably none need a lot of breathing room above why run this scan
   and below", and on the bottom of the page: "here gap is too big" (192 px of nothing before the footer).
   ⛔ This raises the section rhythm past the 56–80 px his earlier brief set — his newer instruction. */
.ck-lean{--ck-sec:clamp(76px,8.5vw,124px)}
.ck-lean .ck-sec-why{padding-top:clamp(96px,11vw,156px)}
.ck-lean .ck-sec-get{padding-top:clamp(52px,6vw,84px)}
.ck-lean .ck-sec-faq{padding-top:clamp(96px,11vw,156px);padding-bottom:clamp(40px,4.4vw,60px)}
@media (max-width:640px){
  .ck-lean .ck-sec-why,.ck-lean .ck-sec-faq{padding-top:clamp(56px,13vw,84px)}
  .ck-lean .ck-sec-get{padding-top:clamp(36px,8vw,52px)}
  .ck-lean .ck-sec-faq{padding-bottom:28px}
}
/* ⛔ his word: "this section is bad since big gap on left bottom of this section so wtf" — the title column
   ended after its button and left ~800 px of empty page beside the questions. It now travels with them. */
@media (min-width:981px){
  .ck-faq-side{position:sticky;top:clamp(104px,13vh,148px)}
  .ck-faq-g{align-items:start}
}
/* ⛔ "here gap is too big" — the footer section carries a site-wide `margin-top:216px`, and on this page the
   last section's own padding sat on top of it: 252 px of nothing before the footer. Scoped to the scanner
   page only (the footer is outside main.ck, so this has to hang off :has()). */
body:has(main.ck-lean) #kontaktai{margin-top:clamp(64px,7vw,104px)}
.ck-lean .ck-sec-faq{padding-bottom:clamp(20px,2.2vw,30px)}
/* "need more gaps above and below" — this section gets the most room on the page */
.ck-lean .ck-sec-why{padding-top:clamp(120px,14vw,200px);padding-bottom:clamp(40px,5vw,72px)}
.ck-lean .ck-sec-get{padding-top:clamp(64px,7vw,104px)}
@media (max-width:980px){
  .ck-why-l li::after{display:none}
}
@media (max-width:640px){
  .ck-lean .ck-sec-why{padding-top:clamp(68px,15vw,96px);padding-bottom:clamp(28px,6vw,40px)}
}
/* ⛔ his word: "this more about the tool section should be on the left / here where we have empty spaces".
   The links moved into the sticky title column, which is exactly the space that was sitting empty. */
.ck-faq-side .ck-learn-w{margin-top:clamp(26px,3vw,38px);padding-top:clamp(20px,2.4vw,28px);
  border-top:1px solid var(--line)}
.ck-faq-side .ck-learn{flex-direction:column;gap:11px;margin-top:13px}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   2026-10-19 · THE PAGE SYSTEM for the scanner page upgrade (.ck-lean only).
   His word: "more to our brandbook, more premium, more interactive … smooth operator minimalistic design",
   "i hate how ai generated whole page looks and so amateur and random".
   One spacing scale, one heading scale, one plate recipe (plates use the brand's own --r-panel + --sh-panel;
   the hero's floating object --sh-float. ⛔ NOT --ck-r/--ck-sh: style.css already owns those names on `html .ck`). Every other up/*.css file builds on these values
   instead of picking its own numbers (2026-10-04 lesson: gaps chosen per section read as "not polished").
   up/ files load AFTER style.css in name order: 00 system · 10 hero · 20 demo · 30 checks · 40 why · 50 faq.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */
.ck-lean{
  --ck-sec:clamp(112px,11.5vw,168px);   /* section → section: the top padding of every section after the hero */
  --ck-head:clamp(34px,3.6vw,52px);     /* a section's heading block → its content */
  --ck-lg:14px;                          /* heading → its lead */
  --ck-blk:clamp(18px,1.8vw,26px);       /* block → block inside one section */
  --ck-h2:clamp(30px,3.2vw,46px);
  --ck-h3:clamp(18px,1.35vw,20.5px);
  --ck-body:clamp(15.5px,1.1vw,17px);
}
@media (max-width:640px){
  .ck-lean{--ck-sec:92px;--ck-head:30px;--ck-blk:16px}
}
.ck-lean .ck-sec{padding-top:var(--ck-sec);padding-bottom:0}
.ck-lean .shead{align-items:flex-start;text-align:left;gap:var(--ck-lg);margin-bottom:var(--ck-head)}
.ck-lean .shead .lead{max-width:54ch}
.ck-lean .ck-sec .h2{font-size:var(--ck-h2);letter-spacing:-.034em;line-height:1.06}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   2026-10-21 · PHONES — one system for every section (session ck-mobile).
   His word: "FOR MOBILE, we need heavy heavy fixes … alignement and centering … nothing is made for mobile".
   The desktop (≥981 px) is accepted ("i kinda like how this page looks on desktop") — nothing here reaches it:
   every rule below sits in a max-width query, and each section file keeps its own phone rules LAST.
   · one left line — the site's own 14 px phone gutter (--gut): headings, text, plates and buttons start on it;
   · one plate inset — every plate (the demo, the checks, the FREE offer, the questions) keeps its content
     --ck-pp in from its edge and has the brand's --r-panel corner, so the line inside every plate is the same;
   · one statement size — his checks questions and the "why" statements are the same kind of line (--ck-st),
     as on the desktop, where they share one scale;
   · one gap between sections (--ck-sec), the hero included, and a heading that sits with its lead.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */
@media (max-width:640px){
  .ck-lean{--ck-pp:20px;--ck-st:19px}
  /* heading → lead = the system's --ck-lg (14 px): style.css added another 10 px on top, which on a 30 px heading
     left the lead floating (the desktop's 24 px reads right only next to a 46 px heading) */
  .ck-lean .shead .lead{margin-top:0}
}

/* 10-hero.css — owned by one builder in the 2026-10-19 upgrade; see ~/tina-redesign/scanner-design/UPGRADE-1019.md */
/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   B1 · THE HERO SHELL + ITS LEFT COLUMN (.ck-lean only)
   His words, 19 Oct: "i hate that hero colour in background", "i hate how ai generated whole page looks and so
   amateur and random", "more to our brandbook, more premium". So:
   · no wash behind the hero — it sits on the site's one canvas + dot field, like the homepage;
   · the H1 in the brand treatment (.grad phrase), the cookie mark refined into the drawn-line family;
   · the scan field is the most finished object on the page — proportions, label, focus ring, button states;
   · the three facts are one calm line, not three coloured pills; "How the scan works" a real secondary button.
   ⛔ The reveal engine (build.py) animates every DIRECT child of .ck-hero2-l and .ck-shot-f — never animate
   those here; everything that moves below is a grandchild.
   ⛔ Phone rules go LAST in this file (trap 1). The site never reads prefers-color-scheme — dark is ONLY
   html[data-theme="dark"].
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */
.ck-lean .ck-hero{
  --ckh-ring:rgba(10,10,12,.085);         /* the field's and the ghost button's hairline */
  --ckh-ring-on:rgba(10,10,12,.16);
  --ckh-lift:0 1px 2px rgba(10,10,12,.04),0 22px 44px -26px rgba(24,28,64,.30);
  --ckh-lift-on:0 1px 2px rgba(10,10,12,.04),0 26px 52px -26px rgba(24,28,64,.36);
}
html[data-theme="dark"] .ck-lean .ck-hero{
  --ckh-ring:rgba(255,255,255,.11);
  --ckh-ring-on:rgba(255,255,255,.2);
  --ckh-lift:0 1px 2px rgba(0,0,0,.4),0 22px 44px -26px rgba(0,0,0,.8);
  --ckh-lift-on:0 1px 2px rgba(0,0,0,.4),0 26px 52px -26px rgba(0,0,0,.9);
}

/* ── the shell: one full screen on desktop, the content optically centred under the floating nav ──
   ⛔ The bottom padding is larger than the top on purpose: on the live site the cookie bar floats over the last
   ~114 px of a desktop screen, and the content must never sit under it. */
.ck-lean .ck-hero{position:relative;min-height:100vh;min-height:100svh;display:grid;grid-template-rows:minmax(0,1fr);
  align-content:center;padding-top:clamp(116px,14.5vh,164px);padding-bottom:clamp(112px,13vh,170px)}
.ck-lean .ck-hero::before{content:none;display:none}
.ck-lean .ck-hero>.ck-hero2-g{align-self:center}

/* the grid: a ~540 px action column and a ~560 px right object on a 1440 screen (the page's 1160 content line) */
.ck-lean .ck-hero2-g{display:grid;grid-template-columns:minmax(0,27fr) minmax(0,28fr);
  column-gap:clamp(40px,4.4vw,64px);row-gap:0;align-items:center}
.ck-lean .ck-hero2-l{min-width:0;max-width:560px}
.ck-lean .ck-hero2-r{min-width:0}

/* ── the mark: the cookie he asked for, in the house line, drawn once as the hero arrives ── */
.ck-lean .ck-mark{display:block;width:clamp(38px,3.1vw,44px);height:clamp(38px,3.1vw,44px);margin:0 0 clamp(14px,1.3vw,18px) -2px}
.ck-lean .ck-mark-i{display:block;width:100%;height:100%;overflow:visible}
.ck-lean .ck-mark-o{stroke:url(#ck-gic-c)}
.ck-lean .ck-mark-c{stroke:none;fill:url(#ck-gic-c)}
/* ⛔ .in is the reveal engine's class on the span (loader-aware) — the drawing starts when the hero does */
.ck-lean .ck-mark.in .ck-mark-o{animation:ckhDraw 1.25s cubic-bezier(.65,0,.35,1) .12s both}
.ck-lean .ck-mark.in .ck-mark-c{transform-box:fill-box;transform-origin:50% 50%;
  animation:ckhChip .62s cubic-bezier(.34,1.56,.64,1) both}
.ck-lean .ck-mark.in .ck-mark-c:nth-of-type(1){animation-delay:.78s}
.ck-lean .ck-mark.in .ck-mark-c:nth-of-type(2){animation-delay:.9s}
.ck-lean .ck-mark.in .ck-mark-c:nth-of-type(3){animation-delay:1.02s}
.ck-lean .ck-mark.in .ck-mark-c:nth-of-type(4){animation-delay:1.14s}
@keyframes ckhDraw{from{stroke-dasharray:1 1;stroke-dashoffset:1}to{stroke-dasharray:1 1;stroke-dashoffset:0}}
@keyframes ckhChip{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}

/* ── the headline: the brand's own treatment, inside his 48–60 px ── */
.ck-lean .ck-h1{max-width:none;margin:0;font-size:clamp(46px,4.65vw,58px);line-height:1.04;letter-spacing:-.038em;
  text-wrap:balance}
.ck-lean .ck-h1-k{white-space:nowrap}
.ck-lean .ck-lead{max-width:30em;margin:clamp(16px,1.5vw,20px) 0 0;font-size:clamp(16.5px,1.25vw,18.5px);
  line-height:1.58;letter-spacing:-.006em;color:var(--ink2);text-wrap:pretty}

/* ── the scan field: the primary action, and the most finished object on the page ── */
.ck-lean .ck-scan-hero{max-width:none;margin:clamp(32px,3vw,42px) 0 0}
.ck-lean .ck-scan-hero .ck-scan-lab{display:block;margin:0 0 11px;font-size:14px;font-weight:600;line-height:1.3;
  letter-spacing:-.004em;color:var(--ink)}
.ck-lean .ck-scan-hero .ck-scan-f{height:68px;gap:0;padding:7px 7px 7px 28px;border:0;border-radius:999px;
  background:var(--panel);box-shadow:0 0 0 1px var(--ckh-ring),var(--ckh-lift);
  transition:box-shadow .32s var(--ease)}
html[data-theme="dark"] .ck-lean .ck-scan-hero .ck-scan-f{background:var(--panel)}
.ck-lean .ck-scan-hero .ck-scan-f:hover{box-shadow:0 0 0 1px var(--ckh-ring-on),var(--ckh-lift-on)}
/* focus: the hairline becomes the brand gradient (the site's own .pill outline idea, rationed to the one primary
   action) with the soft blue halo around it. ⛔ ::after is the busy line — the ring lives on ::before. */
.ck-lean .ck-scan-hero .ck-scan-f::before{content:"";position:absolute;inset:-1.5px;z-index:0;border-radius:inherit;
  padding:1.5px;background:var(--grad);pointer-events:none;opacity:0;transition:opacity .32s var(--ease);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.ck-lean .ck-scan-hero .ck-scan-f>*{position:relative;z-index:1}
.ck-lean .ck-scan-hero .ck-scan-f:focus-within::before{opacity:1}
.ck-lean .ck-scan-hero .ck-scan-f:focus-within{
  box-shadow:0 0 0 6px var(--ring-soft),0 22px 44px -26px rgba(47,107,255,.42)}
.ck-lean .ck-scan-hero .ck-scan-i{height:100%;font-size:17px;font-weight:500;letter-spacing:-.008em;color:var(--ink)}
.ck-lean .ck-scan-hero .ck-scan-i::placeholder{color:var(--ink3);font-weight:450;opacity:1;transition:opacity .3s ease}
.ck-lean .ck-scan-hero .ck-scan-i:focus::placeholder{opacity:.55}
.ck-lean .ck-scan-hero .ck-scan-b{height:54px;gap:10px;padding:0 24px 0 26px;font-size:15.5px;font-weight:600;
  letter-spacing:-.006em;box-shadow:var(--sh-btn);
  transition:background .2s ease,box-shadow .32s var(--ease),transform .18s var(--ease)}
.ck-lean .ck-scan-hero .ck-scan-b:hover{transform:none;background:var(--blueH);box-shadow:var(--sh-btn-on)}
.ck-lean .ck-scan-hero .ck-scan-b:active{transform:scale(.975);box-shadow:var(--sh-btn)}
.ck-lean .ck-scan-hero .ck-scan-b .ck-arr{transition:transform .35s var(--ease)}
.ck-lean .ck-scan-hero .ck-scan-b:hover .ck-arr{transform:translateX(3px)}
/* an address typed in: the button leans forward a little — ready to go */
.ck-lean .ck-scan-hero .ck-scan-f:has(.ck-scan-i:not(:placeholder-shown)) .ck-scan-b{box-shadow:var(--sh-btn-on)}
.ck-lean .ck-scan-hero .ck-scan-f:has(.ck-scan-i:not(:placeholder-shown)) .ck-scan-b .ck-arr{transform:translateX(2px)}
/* busy: the gradient line runs along the field's bottom edge, inside the curve */
.ck-lean .ck-scan-hero .ck-scan-f::after{left:40px;right:40px;bottom:0}
/* invalid: a calm red hairline and the message under it (red = a problem, always with words) */
.ck-lean .ck-scan-hero.is-bad .ck-scan-f{box-shadow:0 0 0 1.5px var(--ac-red),0 0 0 6px var(--ac-red-bg),var(--ckh-lift)}
.ck-lean .ck-scan-hero.is-bad .ck-scan-f::before{opacity:0}
/* the site's global :focus-visible sets border-radius:10px — on a pill that squares the corners; keep them round */
.ck-lean .ck-scan-hero .ck-scan-b:focus-visible{border-radius:999px;outline-offset:4px}
.ck-lean .ck-scan-hero .ck-scan-m{justify-content:flex-start;margin:13px 0 0 4px;font-size:14.5px;color:var(--ink)}
.ck-lean .ck-scan-hero.is-bad .ck-scan-m::before{color:var(--ac-red)}
.ck-lean .ck-scan-hero .ck-ts{justify-content:flex-start}

/* ── the three facts: one calm line, a small green tick each (green = yes) ── */
.ck-lean .ck-hfacts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;margin:18px 0 0 -1px;padding:0;
  font-size:14.5px;font-weight:500;line-height:1.4;letter-spacing:-.004em;color:var(--ink2)}
.ck-lean .ck-hfacts li{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.ck-lean .ck-hfacts .ck-tk{flex:none;width:15px;height:15px;color:var(--ac-green)}

/* ── "How the scan works": a quiet text link — ⛔ 2026-10-21 his word on the white pill it had been since 10-18:
   "this need to be less visible maybe not a button". Grey words, the blue arrow, an underline that draws on hover;
   still a 44 px tap target. ── */
.ck-lean .ck-hero-l{display:block;margin:clamp(22px,2.2vw,30px) 0 0}
.ck-lean .ck-how-b{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0;border:0;background:none;box-shadow:none;
  font-size:15px;font-weight:600;letter-spacing:-.006em;color:var(--ink2);text-decoration:none;transition:color .2s ease}
.ck-lean .ck-how-b>span{background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;padding-bottom:2px;
  transition:background-size .4s var(--ease)}
.ck-lean .ck-how-b .ck-arr{color:var(--blue);transition:transform .35s var(--ease)}
.ck-lean .ck-how-b:hover{color:var(--ink)}
.ck-lean .ck-how-b:hover>span{background-size:100% 1.5px}
.ck-lean .ck-how-b:hover .ck-arr{transform:translateX(3px)}
.ck-lean .ck-how-b:focus-visible{border-radius:8px;outline-offset:4px}

/* ── stacked (tablet and phone): the right object comes under the action, on the same left line ── */
@media (max-width:980px){
  .ck-lean .ck-hero{min-height:0;display:block;padding-top:clamp(104px,14vw,128px);padding-bottom:clamp(40px,8vw,72px)}
  .ck-lean .ck-hero2-g{grid-template-columns:minmax(0,1fr);row-gap:clamp(48px,8vw,72px)}
  .ck-lean .ck-hero2-l{max-width:600px}
  .ck-lean .ck-hero2-r{max-width:640px}
  .ck-lean .ck-h1{font-size:48px}
}

@media (prefers-reduced-motion:reduce){
  .ck-lean .ck-mark.in .ck-mark-o,.ck-lean .ck-mark.in .ck-mark-c{animation:none}
  .ck-lean .ck-scan-hero .ck-scan-b,.ck-lean .ck-how-b,.ck-lean .ck-scan-hero .ck-scan-f::before{transition:none}
}

/* ── phone — LAST in this file on purpose (trap 1). The hero starts at the top and grows; the Scan button must end
   above the live site's floating cookie bar (~180 px): bottom < 520 on 393×700, < 460 on 360×640 (trap 3). ── */
@media (max-width:640px){
  .ck-lean .ck-hero{padding-top:84px;padding-bottom:clamp(36px,9vw,52px)}
  .ck-lean .ck-hero2-g{row-gap:44px}
  .ck-lean .ck-mark{width:32px;height:32px;margin:0 0 14px -1px}
  .ck-lean .ck-h1{font-size:clamp(31px,9.4vw,38px);line-height:1.06}
  .ck-lean .ck-lead{margin-top:12px;font-size:16px;line-height:1.55}
  .ck-lean .ck-scan-hero{margin-top:24px}
  .ck-lean .ck-scan-hero .ck-scan-lab{margin-bottom:9px;font-size:13.5px}
  .ck-lean .ck-scan-hero .ck-scan-f{height:60px;padding:5px 5px 5px 20px}
  .ck-lean .ck-scan-hero .ck-scan-i{font-size:16px}
  .ck-lean .ck-scan-hero .ck-scan-b{height:50px;gap:7px;padding:0 17px 0 19px;font-size:15px}
  .ck-lean .ck-scan-hero .ck-scan-f::after{left:28px;right:28px}
  .ck-lean .ck-hfacts{gap:6px 16px;margin-top:14px;font-size:13.5px}
  .ck-lean .ck-hfacts .ck-tk{width:14px;height:14px}
  .ck-lean .ck-hfacts li{gap:6px}
  .ck-lean .ck-hero-l{margin-top:16px}
  .ck-lean .ck-how-b{font-size:14.5px}
}
@media (max-width:640px) and (max-height:680px){
  .ck-lean .ck-hero{padding-top:78px}
  .ck-lean .ck-h1{font-size:clamp(30px,8.8vw,34px)}
  .ck-lean .ck-scan-hero{margin-top:20px}
}
/* small phones: the placeholder must never run under the button (it did at 320) */
@media (max-width:359px){
  .ck-lean .ck-scan-hero .ck-scan-f{padding-left:16px}
  .ck-lean .ck-scan-hero .ck-scan-b{gap:6px;padding:0 15px 0 17px}
}
@media (max-width:340px){
  .ck-lean .ck-scan-hero .ck-scan-b .ck-arr{display:none}
  .ck-lean .ck-scan-hero .ck-scan-b{padding:0 18px}
}

/* ── 2026-10-20 · his word on the three facts: "these need to be more visible". Same words, same one line —
   darker and a touch larger, and each tick on a pale green disc (accent palette: pale -bg ground, dark -ink mark),
   so the line reads as three answers and not as a caption. ── */
.ck-lean .ck-hfacts{gap:10px 26px;margin-top:20px;font-size:15.5px;font-weight:550;color:var(--ink)}
.ck-lean .ck-hfacts li{gap:9px}
.ck-lean .ck-hfacts .ck-tk{box-sizing:border-box;width:22px;height:22px;padding:5px;border-radius:50%;
  background:var(--ac-green-bg);color:var(--ac-green-ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ac-green) 22%,transparent)}
@media (max-width:640px){
  .ck-lean .ck-hfacts{gap:8px 16px;margin-top:16px;font-size:14.5px}
  .ck-lean .ck-hfacts li{gap:7px}
  .ck-lean .ck-hfacts .ck-tk{width:20px;height:20px;padding:4.5px}
}

/* ── 2026-10-21 · phones and landscape phones (session ck-mobile) — LAST in this file on purpose (trap 1) ──
   His word: "nothing is made for mobile". The desktop (≥981) is untouched. */
@media (max-width:980px){
  /* the gap under the stacked hero is the next section's own --ck-sec, like every other gap on the page: the
     hero's bottom padding on top of it made this one gap 128 px against 92 everywhere else on a phone (179 against
     112 on a landscape phone / tablet) */
  .ck-lean .ck-hero{padding-bottom:0}
}
/* landscape phones (a screen ~375–430 px tall get the stacked tablet hero): its 104–128 px top padding and the
   48 px headline pushed the address field — the page's one action — below the first screen. A tighter top and a
   40 px headline bring the field back onto it. */
@media (min-width:641px) and (max-width:980px) and (max-height:500px){
  .ck-lean .ck-hero{padding-top:84px}
  .ck-lean .ck-h1{font-size:40px}
  .ck-lean .ck-lead{margin-top:12px}
  .ck-lean .ck-scan-hero{margin-top:22px}
}
/* the shortest phones (568–600 px tall, e.g. a 320×568 iPhone SE): the live cookie bar there is ~200 px tall and
   covered the Scan button (button bottom 369, bar top 353). A smaller mark, a 15 px lead and tighter steps lift the
   field above the bar; nothing is removed. */
@media (max-width:640px) and (max-height:600px){
  .ck-lean .ck-mark{width:26px;height:26px;margin-bottom:10px}
  .ck-lean .ck-lead{margin-top:10px;font-size:15px;line-height:1.5}
  .ck-lean .ck-scan-hero{margin-top:16px}
  .ck-lean .ck-scan-hero .ck-scan-lab{margin-bottom:7px}
}

/* 20-demo.css — owned by one builder in the 2026-10-19 upgrade; see ~/tina-redesign/scanner-design/UPGRADE-1019.md
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   THE HERO'S RIGHT SIDE — three visits to one real website, played in turn (sec_demo.py · 20-demo.js).
   His word on the report screenshot that stood here: "the thing on the right sucks - looks ai generated".
   This is the ONE bold place on the page, so everything in it is precise and quiet at the same time:
   one floating white object on the site's own float shadow · the house line drawing of a website ·
   thin lines that CONNECT the site to the companies (never enclose) · colour only where it carries a state
   (amber = no choice yet · green = said yes / fine · red = a problem / said no · grey = neutral), and every
   state also says it in words.
   ⛔ Every selector is under .ck-lean (the bundle is shared by every tool page).
   ⛔ .ck-shot-f (= .ck-demo, the figure) is revealed by the site's loader-aware engine — nothing here animates
      it; only its children move.
   ⛔ No prefers-color-scheme anywhere: dark = html[data-theme="dark"] only, and it works through the tokens.
   ⛔ Sizes are container-relative (the aside is the container), designed for 300–620 px wide.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */

.ck-lean .ck-hero2-r{container-type:inline-size;container-name:ckdemo;min-width:0}

/* ── the object ─────────────────────────────────────────────────────────────────────────────────────────── */
.ck-lean .ck-demo{
  --dm-pad:clamp(16px,5.2cqi,30px);
  --dm-wire:clamp(30px,20cqi,132px);     /* the gap the lines travel through */
  --dm-run:70;                           /* px of straight line before a company (20-demo.js reads it) */
  --dm-pp:2.6s;                          /* one data pulse, site → company */
  --dm-line:var(--ck-u2);
  --dm-grey:var(--ac-grey);
  position:relative;margin:0;width:100%;max-width:620px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:16px;
  padding:var(--dm-pad);border-radius:clamp(20px,4.6cqi,30px);
  background:var(--panel);box-shadow:var(--sh-float);
  color:var(--ink);font-size:15px;line-height:1.4;
  -webkit-tap-highlight-color:transparent}

/* ── 1 · the visit switch: three tabs on one hairline, the playing one fills in its colour ──────────────── */
.ck-lean .ck-demo-tabs{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:clamp(10px,3cqi,18px);box-shadow:inset 0 -1px 0 var(--line)}
.ck-lean .ck-demo-tab{position:relative;display:flex;align-items:center;gap:9px;min-width:0;min-height:44px;
  margin:0;padding:0 0 13px;border:0;background:none;border-radius:0;cursor:pointer;
  font:inherit;font-size:15px;font-weight:600;letter-spacing:-.012em;line-height:1.2;text-align:left;
  color:var(--ink2);transition:color .3s var(--ease)}
.ck-lean .ck-demo-tab[data-c="amber"]{--tc:var(--ac-amber);--tc-bg:var(--ac-amber-bg);--tc-ink:var(--ac-amber-ink)}
.ck-lean .ck-demo-tab[data-c="green"]{--tc:var(--ac-green);--tc-bg:var(--ac-green-bg);--tc-ink:var(--ac-green-ink)}
.ck-lean .ck-demo-tab[data-c="red"]{--tc:var(--ac-red);--tc-bg:var(--ac-red-bg);--tc-ink:var(--ac-red-ink)}
.ck-lean .ck-demo-n{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  font-size:12px;font-weight:700;letter-spacing:0;font-variant-numeric:tabular-nums;color:var(--ink2);
  box-shadow:inset 0 0 0 1.5px var(--ck-u2);
  transition:background-color .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease)}
.ck-lean .ck-demo-tw{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ck-lean .ck-demo-tab:hover{color:var(--ink)}
.ck-lean .ck-demo-tab:hover .ck-demo-n{box-shadow:inset 0 0 0 1.5px var(--ck-u3)}
.ck-lean .ck-demo-tab[aria-selected="true"]{color:var(--ink)}
.ck-lean .ck-demo-tab[aria-selected="true"] .ck-demo-n{background:var(--tc-bg);color:var(--tc-ink);box-shadow:none}
.ck-lean .ck-demo-tab:focus{outline:none}
.ck-lean .ck-demo-tab:focus-visible{outline:2px solid var(--ac-blue);outline-offset:3px;border-radius:8px}
/* the progress line sits ON the hairline: full when chosen, filling while it plays */
.ck-lean .ck-demo-pr{position:absolute;left:0;right:0;bottom:-.5px;height:2px;border-radius:2px;overflow:hidden;pointer-events:none}
.ck-lean .ck-demo-pr i{display:block;width:100%;height:100%;border-radius:inherit;background:var(--tc);
  transform:scaleX(0);transform-origin:0 50%}
.ck-lean .ck-demo-tab[aria-selected="true"] .ck-demo-pr i{transform:scaleX(1)}
.ck-lean .ck-demo.is-auto .ck-demo-tab[aria-selected="true"] .ck-demo-pr i{animation:ckDemoPr var(--dm-dur,4s) linear both}
.ck-lean .ck-demo.is-auto.is-paused .ck-demo-tab[aria-selected="true"] .ck-demo-pr i{animation-play-state:paused}
/* before play begins (the entrance), the line waits at zero instead of jumping full → empty */
.ck-lean .ck-demo:is(.is-pre,.is-enter):not(.is-auto):not(.is-manual) .ck-demo-pr i{transform:scaleX(0)}
@keyframes ckDemoPr{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ── 2 · the stage: the site · the lines · the companies ─────────────────────────────────────────────────── */
.ck-lean .ck-demo-p{grid-column:1/-1;min-width:0;outline:none;border-radius:12px}
.ck-lean .ck-demo-p:focus-visible{outline:2px solid var(--ac-blue);outline-offset:8px}
.ck-lean .ck-demo-stage{position:relative;display:grid;align-items:center;
  grid-template-columns:minmax(0,1fr) var(--dm-wire) max-content;
  margin-top:clamp(22px,6cqi,34px)}
.ck-lean .ck-demo-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}

/* the site: the homepage's floating-window drawing, with the cookie banner as the subject */
.ck-lean .ck-demo-site{grid-column:1;position:relative;z-index:1;min-width:0;
  margin-bottom:var(--dm-lift,30px)}   /* = a state chip + its gap: the site's port lands level with the middle company, the fan is symmetric */
.ck-lean .ck-demo-win{position:relative;overflow:hidden;border-radius:clamp(9px,2.4cqi,13px);background:var(--ck-face);
  box-shadow:0 0 0 1px var(--ck-edge),0 22px 40px -26px rgba(28,28,70,.38),0 2px 6px -2px rgba(28,28,70,.08)}
html[data-theme="dark"] .ck-lean .ck-demo-win{box-shadow:0 0 0 1px var(--ck-edge),0 22px 40px -22px rgba(0,0,0,.8)}
.ck-lean .ck-demo-chr{display:flex;align-items:center;gap:4px;height:clamp(15px,4cqi,21px);padding:0 clamp(7px,2cqi,10px);
  background:var(--ck-u0);box-shadow:inset 0 -1px 0 var(--ck-ln0)}
.ck-lean .ck-demo-chr i{flex:none;width:clamp(4px,1.05cqi,5.5px);aspect-ratio:1;border-radius:50%;background:var(--ck-u3)}
.ck-lean .ck-demo-chr b{flex:none;width:38%;height:clamp(5px,1.4cqi,7px);margin:0 auto;border-radius:99px;background:var(--ck-u1)}
.ck-lean .ck-demo-vp{position:relative;aspect-ratio:200/150}
.ck-lean .ck-demo-pg{position:absolute;inset:0;display:block;width:100%;height:100%}
.ck-lean .ck-demo-pg .ck-dg-0{fill:var(--ck-u0)} .ck-lean .ck-demo-pg .ck-dg-2{fill:var(--ck-u2)}
.ck-lean .ck-demo-pg .ck-dg-5{fill:var(--ck-u5)} .ck-lean .ck-demo-pg .ck-dg-6{fill:var(--ck-u6)}
.ck-lean .ck-demo-pg .ck-dg-ln{fill:none;stroke:var(--ck-ln0);stroke-width:1}
.ck-lean .ck-demo-pg .ck-dg-gh{fill:none;stroke:var(--ck-u3);stroke-width:1}
.ck-lean .ck-demo-pg .ck-dg-sun{fill:var(--ck-sun)} .ck-lean .ck-demo-pg .ck-dg-hill{fill:var(--ck-hill)}
/* the cookie banner — what this visitor did with it */
.ck-lean .ck-demo-bn{position:absolute;left:5.5%;right:5.5%;bottom:6.5%;display:flex;align-items:center;gap:5px;
  padding:6px 6px 6px clamp(7px,2cqi,10px);border-radius:clamp(8px,2cqi,11px);background:var(--ck-face);
  box-shadow:0 0 0 1px var(--ck-edge),0 12px 24px -12px rgba(28,28,70,.34);
  transition:box-shadow .45s var(--ease)}
html[data-theme="dark"] .ck-lean .ck-demo-bn{box-shadow:0 0 0 1px var(--ck-edge),0 12px 24px -12px rgba(0,0,0,.7)}
.ck-lean .ck-demo-bt{flex:1;min-width:0;display:grid;gap:4px}
.ck-lean .ck-demo-bt i{display:block;height:3px;border-radius:2px;background:var(--ck-u2)}
.ck-lean .ck-demo-bt i+i{width:64%}
.ck-lean .ck-demo-b{position:relative;flex:none;display:inline-flex;align-items:center;height:22px;padding:0 9px;
  border-radius:99px;font-size:12px;font-weight:650;letter-spacing:-.005em;line-height:1;white-space:nowrap;
  transition:background-color .4s var(--ease),color .4s var(--ease),box-shadow .4s var(--ease)}
.ck-lean .ck-demo-b-r{color:var(--ck-u5);box-shadow:inset 0 0 0 1px var(--ck-u3)}
.ck-lean .ck-demo-b-a{color:var(--ck-face);background:var(--ck-u5)}
/* visit 2 / 3 — the pressed button takes the answer's colour, with the word still on it */
.ck-lean .ck-demo[data-sv="2"] .ck-demo-b-a{background:var(--ac-green-bg);color:var(--ac-green-ink);box-shadow:inset 0 0 0 1.5px var(--ac-green)}
.ck-lean .ck-demo[data-sv="3"] .ck-demo-b-r{background:var(--ac-red-bg);color:var(--ac-red-ink);box-shadow:inset 0 0 0 1.5px var(--ac-red)}
/* the click: a ring leaves the button the moment it is pressed */
.ck-lean .ck-demo-b::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0}
.ck-lean .ck-demo-b-a::after{box-shadow:0 0 0 1.5px var(--ac-green)}
.ck-lean .ck-demo-b-r::after{box-shadow:0 0 0 1.5px var(--ac-red)}
.ck-lean .ck-demo.is-live[data-sv="2"] .ck-demo-b-a::after,
.ck-lean .ck-demo.is-live[data-sv="3"] .ck-demo-b-r::after{animation:ckDemoRip .7s var(--ease) both}
@keyframes ckDemoRip{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.35,1.7)}}
/* the cursor (the house cursor) rests on the button this visitor pressed */
.ck-lean .ck-demo-cur{position:absolute;left:70%;top:60%;z-index:2;width:clamp(10px,2.6cqi,13px);pointer-events:none;opacity:0}
.ck-lean .ck-demo-cur svg{display:block;width:100%;height:auto;overflow:visible}
.ck-lean .ck-demo-cur path{fill:var(--ck-cur);stroke:var(--ck-cur-edge);stroke-width:1.2;stroke-linejoin:round}
.ck-lean .ck-demo[data-v="2"] .ck-demo-b-a .ck-demo-cur,
.ck-lean .ck-demo[data-v="3"] .ck-demo-b-r .ck-demo-cur{opacity:1}
.ck-lean .ck-demo.is-live[data-v="2"] .ck-demo-b-a .ck-demo-cur,
.ck-lean .ck-demo.is-live[data-v="3"] .ck-demo-b-r .ck-demo-cur{animation:ckDemoCur .8s var(--ease) both}
@keyframes ckDemoCur{
  0%{opacity:0;transform:translate(26px,22px)}
  25%{opacity:1}
  72%{transform:translate(0,0) scale(1)}
  84%{transform:translate(0,0) scale(.84)}
  100%{opacity:1;transform:translate(0,0) scale(1)}}
/* the site's port: where the lines leave it */
.ck-lean .ck-demo-sp{position:absolute;top:50%;right:-5px;width:10px;height:10px;margin-top:-5px;border-radius:50%;
  background:var(--panel);box-shadow:inset 0 0 0 2px var(--ck-u3)}

/* the lines. wb = the quiet track (always there) · wl = the state line · wg + wp = a pulse of data */
.ck-lean .ck-demo-w path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.ck-lean .ck-demo-wb{stroke:var(--dm-line);stroke-width:1.5;transition:stroke-dashoffset 1.1s var(--ease)}
/* ⛔ dash arrays only once the script has drawn the lines in real pixels: on the stretched no-script lines
   (non-scaling strokes) Chrome measures dashes on screen and the lines came out in broken pieces */
.ck-lean .ck-demo.is-js .ck-demo-wb{stroke-dasharray:100 100;stroke-dashoffset:0}
.ck-lean .ck-demo-wl{stroke:var(--dm-grey);stroke-width:1.5;stroke-opacity:.55;
  transition:stroke .45s var(--ease),stroke-opacity .45s var(--ease),stroke-dasharray .8s var(--ease),stroke-dashoffset 1.1s var(--ease)}
.ck-lean .ck-demo-wg,.ck-lean .ck-demo-wp{stroke:var(--dm-grey);stroke-dasharray:8 200;stroke-dashoffset:8;opacity:0;
  transition:stroke .45s var(--ease)}
.ck-lean .ck-demo-wg{stroke-width:7;stroke-opacity:.16}
.ck-lean .ck-demo-wp{stroke-width:2.6}
.ck-lean .ck-demo-w[data-st="no"] path:not(.ck-demo-wb){stroke:var(--ac-red)}
.ck-lean .ck-demo-w[data-st="ok"] path:not(.ck-demo-wb){stroke:var(--ac-green)}
.ck-lean .ck-demo-w[data-st="no"] .ck-demo-wl,.ck-lean .ck-demo-w[data-st="ok"] .ck-demo-wl{stroke-opacity:.82}
.ck-lean .ck-demo.is-js .ck-demo-wl{stroke-dasharray:100 200;stroke-dashoffset:0}
.ck-lean .ck-demo.is-js .ck-demo-w[data-st="stop"] .ck-demo-wl{stroke-dasharray:var(--stop,78) 200}
.ck-lean .ck-demo-w[data-st="stop"] .ck-demo-wl{stroke-opacity:.75}
.ck-lean .ck-demo.is-live .ck-demo-w:not([data-st="stop"]) :is(.ck-demo-wg,.ck-demo-wp){
  animation:ckDemoPulse var(--dm-pp) linear infinite;animation-delay:calc(var(--i) * .42s)}
.ck-lean .ck-demo.is-live .ck-demo-w[data-st="free"] :is(.ck-demo-wg,.ck-demo-wp){animation-duration:calc(var(--dm-pp) * 1.5)}
.ck-lean .ck-demo-w[data-st="free"] .ck-demo-wp{stroke-width:2}
@keyframes ckDemoPulse{
  0%{stroke-dashoffset:8;opacity:0}
  7%{opacity:1}
  62%{opacity:1}
  70%{stroke-dashoffset:-100;opacity:0}
  100%{stroke-dashoffset:-100;opacity:0}}

/* the companies */
.ck-lean .ck-demo-cos{grid-column:3;position:relative;z-index:1;display:grid;gap:clamp(16px,4.6cqi,26px);
  margin:0;padding:0;list-style:none}
.ck-lean .ck-demo-co{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:11px;row-gap:7px;
  align-items:center;margin:0;padding:0;transition:opacity .35s var(--ease)}
.ck-lean .ck-demo-co::before{content:none}
.ck-lean .ck-demo-port{grid-row:1;grid-column:1;position:relative;width:10px;height:10px;border-radius:50%;
  background:var(--panel);box-shadow:inset 0 0 0 2px var(--dm-grey);
  transition:background-color .45s var(--ease),box-shadow .45s var(--ease)}
.ck-lean .ck-demo-port::after{content:"";position:absolute;inset:0;border-radius:50%;opacity:0;
  box-shadow:0 0 0 1.5px var(--pc,var(--dm-grey))}
.ck-lean .ck-demo-co[data-st="no"]{--pc:var(--ac-red)}
.ck-lean .ck-demo-co[data-st="ok"]{--pc:var(--ac-green)}
.ck-lean .ck-demo-co[data-st="no"] .ck-demo-port,.ck-lean .ck-demo-co[data-st="ok"] .ck-demo-port{background:var(--pc);
  box-shadow:0 0 0 3.5px color-mix(in srgb,var(--pc) 16%,transparent)}
.ck-lean .ck-demo.is-live .ck-demo-co:not([data-st="stop"]) .ck-demo-port::after{
  animation:ckDemoPing var(--dm-pp) linear infinite;animation-delay:calc(var(--i) * .42s)}
.ck-lean .ck-demo.is-live .ck-demo-co[data-st="free"] .ck-demo-port::after{animation-duration:calc(var(--dm-pp) * 1.5)}
@keyframes ckDemoPing{0%,66%{opacity:0;transform:scale(1)}70%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(2.6)}}
.ck-lean .ck-demo-nm{grid-row:1;grid-column:2;font-size:15px;font-weight:650;letter-spacing:-.014em;line-height:20px;
  color:var(--ink);white-space:nowrap}
.ck-lean .ck-demo-st{grid-row:2;grid-column:2;display:grid;justify-items:start;min-width:0}
.ck-lean .ck-demo-sl{grid-area:1/1;display:inline-block;padding:3px 9px 4px;border-radius:99px;
  font-size:12.5px;font-weight:650;letter-spacing:-.004em;line-height:1.3;white-space:nowrap;
  opacity:0;transform:translateY(4px);transition:opacity .3s var(--ease),transform .45s var(--ease)}
.ck-lean .ck-demo-sl.is-no{background:var(--ac-red-bg);color:var(--ac-red-ink)}
.ck-lean .ck-demo-sl.is-ok{background:var(--ac-green-bg);color:var(--ac-green-ink)}
.ck-lean .ck-demo-sl.is-free,.ck-lean .ck-demo-sl.is-stop{background:var(--ac-grey-bg);color:var(--ac-grey-ink)}
.ck-lean .ck-demo-co[data-sv="1"] .ck-demo-sl[data-on="1"],
.ck-lean .ck-demo-co[data-sv="2"] .ck-demo-sl[data-on="2"],
.ck-lean .ck-demo-co[data-sv="3"] .ck-demo-sl[data-on="3"]{opacity:1;transform:none;transition-delay:.08s}
/* visit 1: the cookie each company stored before any choice, sitting on its line */
.ck-lean .ck-demo-tag{position:absolute;right:100%;top:10px;margin-right:15px;padding:2px 7px 3px;border-radius:7px;
  background:var(--ck-face);box-shadow:0 0 0 1px var(--ck-tag-edge),0 6px 14px -8px rgba(28,28,70,.3);
  font-size:12px;font-weight:650;letter-spacing:.01em;line-height:1.3;color:var(--ink2);white-space:nowrap;
  font-variant-numeric:tabular-nums;opacity:0;transform:translateY(-50%) scale(.9);
  transition:opacity .3s var(--ease),transform .45s var(--ease)}
.ck-lean .ck-demo[data-sv="1"] .ck-demo-tag{opacity:1;transform:translateY(-50%);transition-delay:calc(.12s + var(--i) * .08s)}
/* visit 3, TikTok: the line stops at a bar before the company */
.ck-lean .ck-demo-bar{position:absolute;right:100%;top:10px;width:2px;height:14px;margin-right:22px;border-radius:2px;
  background:var(--dm-grey);opacity:0;transform:translateY(-50%) scaleY(.2);
  transition:opacity .3s var(--ease),transform .45s var(--ease)}
.ck-lean .ck-demo-co[data-st="stop"] .ck-demo-bar{opacity:1;transform:translateY(-50%);transition-delay:.25s}
/* hover a company: its own line comes forward */
@media (hover:hover){
  .ck-lean .ck-demo:has(.ck-demo-co:hover) .ck-demo-co:not(:hover){opacity:.42}
  .ck-lean .ck-demo:has(.ck-demo-co[data-co="ga"]:hover) .ck-demo-w:not([data-co="ga"]),
  .ck-lean .ck-demo:has(.ck-demo-co[data-co="msads"]:hover) .ck-demo-w:not([data-co="msads"]),
  .ck-lean .ck-demo:has(.ck-demo-co[data-co="tiktok"]:hover) .ck-demo-w:not([data-co="tiktok"]){opacity:.3}
  .ck-lean .ck-demo-w{transition:opacity .35s var(--ease)}
}

/* ── 3 · the report's own finding line for this visit (the same row a real report shows) ───────────────── */
.ck-lean .ck-demo-say{display:grid;margin:clamp(22px,6cqi,32px) 0 0;max-width:none}
.ck-lean .ck-demo-sy{grid-area:1/1;display:flex;align-items:center;gap:10px;min-width:0;opacity:0;
  transform:translateY(4px);transition:opacity .3s var(--ease),transform .45s var(--ease)}
.ck-lean .ck-demo[data-sv="1"] .ck-demo-sy[data-on="1"],
.ck-lean .ck-demo[data-sv="2"] .ck-demo-sy[data-on="2"],
.ck-lean .ck-demo[data-sv="3"] .ck-demo-sy[data-on="3"]{opacity:1;transform:none;transition-delay:.1s}
.ck-lean .ck-demo-mk{flex:none;display:grid;place-items:center;width:18px;height:18px;border-radius:50%}
.ck-lean .ck-demo-mk.is-no{background:var(--ac-red-bg)}
.ck-lean .ck-demo-mk.is-no::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ac-red)}
.ck-lean .ck-demo-mk.is-ok{background:var(--ac-green-bg);color:var(--ac-green)}
.ck-lean .ck-demo-mk .ck-tk{width:12px;height:12px;color:var(--ac-green)}
.ck-lean .ck-demo-ft{flex:1;min-width:0;font-size:15px;font-weight:600;letter-spacing:-.012em;line-height:1.35;color:var(--ink)}
.ck-lean .ck-demo-vd{flex:none;padding:3px 10px 4px;border-radius:99px;font-size:12.5px;font-weight:650;line-height:1.3}
.ck-lean .ck-demo-vd.is-no{background:var(--ac-red-bg);color:var(--ac-red-ink)}
.ck-lean .ck-demo-vd.is-ok{background:var(--ac-green-bg);color:var(--ac-green-ink)}

/* ── 4 · the whole check, and what this is ─────────────────────────────────────────────────────────────── */
.ck-lean .ck-demo-p{position:relative;padding-bottom:clamp(18px,5cqi,24px)}
/* a pseudo-element, not an inset shadow: the panel is rounded for its focus ring and a shadow would bend up at the ends */
.ck-lean .ck-demo-p::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);pointer-events:none}
.ck-lean .ck-demo-res{grid-column:1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;
  margin-top:clamp(15px,4.2cqi,19px);font-size:14px;font-weight:600;color:var(--ink)}
.ck-lean .ck-demo-cap{grid-column:2;margin:clamp(15px,4.2cqi,19px) 0 0;
  font-size:13px;font-weight:500;line-height:1.4;color:var(--ac-grey-ink);text-align:right;white-space:nowrap}
.ck-lean .ck-demo-iss{display:inline-flex;align-items:center;gap:8px}
.ck-lean .ck-demo-iss i{width:8px;height:8px;border-radius:50%;background:var(--ac-red);
  box-shadow:0 0 0 3px var(--ac-red-bg)}
.ck-lean .ck-demo-sc{display:inline-flex;align-items:center;gap:7px;color:var(--ink2);font-weight:500}
.ck-lean .ck-demo-sc b{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.ck-lean .ck-demo-sc svg{width:18px;height:18px;transform:rotate(-90deg)}
.ck-lean .ck-demo-sc circle{fill:none;stroke-width:3}
.ck-lean .ck-demo-sc-t{stroke:var(--ck-u1)}
.ck-lean .ck-demo-sc-v{stroke:url(#ck-gring);stroke-linecap:round;stroke-dasharray:47 100}

/* ── the entrance: after the engine lifts the object, its parts arrive in reading order ─────────────────── */
.ck-lean .ck-demo :is(.ck-demo-tabs,.ck-demo-site,.ck-demo-say,.ck-demo-res,.ck-demo-cap){
  transition:opacity .7s var(--ease),transform .9s var(--ease)}
.ck-lean .ck-demo.is-pre :is(.ck-demo-tabs,.ck-demo-site,.ck-demo-say,.ck-demo-res,.ck-demo-cap){opacity:0;transform:translateY(12px)}
.ck-lean .ck-demo.is-pre .ck-demo-co{opacity:0;transform:translateX(-8px)}
.ck-lean .ck-demo.is-pre :is(.ck-demo-wb,.ck-demo-wl){stroke-dashoffset:100}
.ck-lean .ck-demo.is-pre .ck-demo-tag{opacity:0}
.ck-lean .ck-demo.is-enter .ck-demo-co{transition:opacity .6s var(--ease),transform .8s var(--ease)}
.ck-lean .ck-demo.is-enter .ck-demo-tabs{transition-delay:0s}
.ck-lean .ck-demo.is-enter .ck-demo-site{transition-delay:.1s}
.ck-lean .ck-demo.is-enter :is(.ck-demo-wb,.ck-demo-wl){transition-delay:calc(.34s + var(--i,0) * .1s)}
.ck-lean .ck-demo.is-enter .ck-demo-co{transition-delay:calc(.62s + var(--i) * .09s)}
.ck-lean .ck-demo.is-enter .ck-demo-tag{transition-delay:calc(.95s + var(--i) * .08s)}
.ck-lean .ck-demo.is-enter .ck-demo-say{transition-delay:.86s}
.ck-lean .ck-demo.is-enter :is(.ck-demo-res,.ck-demo-cap){transition-delay:.98s}
/* off screen or in a background tab: nothing runs */
.ck-lean .ck-demo.is-off *,.ck-lean .ck-demo.is-off *::after{animation-play-state:paused!important}

/* ── container sizes ────────────────────────────────────────────────────────────────────────────────────── */
@container ckdemo (max-width:579px){
  .ck-lean .ck-demo{--dm-run:66}
  .ck-lean .ck-demo-tab{font-size:14.5px;gap:8px}
  .ck-lean .ck-demo-nm{font-size:14.5px}
  .ck-lean .ck-demo-sl{font-size:12px;padding:3px 8px}
  .ck-lean .ck-demo-ft{font-size:14.5px}
  .ck-lean .ck-demo{--dm-lift:29px}
  .ck-lean .ck-demo-res{font-size:13.5px}
}
/* compact (a 981–1179 px desktop hero gives the object 420–499 px): the same left-to-right composition as the
   wide one, tightened — a shorter run into each company, the companies closer together, and the result line and
   the caption on their own rows. ⛔ 2026-10-20: this width used to fall into the phone tree below, inside a
   desktop two-column hero — the object grew to ~655 px, ran past the bottom of a 1024×768 screen and towered over
   the left column. The tree is for phones only (≤ 419 px). The cookie-name tags have no room on the shorter
   lines here, so they rest (the phone tree hides them too). */
@container ckdemo (min-width:420px) and (max-width:499px){
  .ck-lean .ck-demo{--dm-run:44;--dm-wire:clamp(30px,13cqi,132px)}
  .ck-lean .ck-demo-stage{margin-top:24px}
  .ck-lean .ck-demo-cos{gap:18px}
  .ck-lean .ck-demo-tag{display:none}
  .ck-lean .ck-demo-res{grid-column:1/-1}
  .ck-lean .ck-demo-cap{grid-column:1/-1;margin-top:4px;text-align:left}
}
/* narrow (phones): the site on top at a real size, three parallel lines leave its bottom edge and turn into each
   company — read top to bottom, like the page itself (20-demo.js draws it) */
@container ckdemo (max-width:419px){
  .ck-lean .ck-demo{--dm-dir:v;--dm-run:0;column-gap:12px}
  .ck-lean .ck-demo-stage{grid-template-columns:minmax(0,1fr);row-gap:clamp(28px,8cqi,34px);align-items:start;
    margin-top:clamp(20px,6cqi,26px)}
  .ck-lean .ck-demo-site{grid-column:1;grid-row:1;width:min(76%,300px);margin-bottom:0}
  .ck-lean .ck-demo-vp{aspect-ratio:200/105}
  .ck-lean .ck-demo-sp{top:100%;right:auto;left:30px;margin:-5px 0 0 -5px}
  .ck-lean .ck-demo-cos{grid-column:1;grid-row:2;gap:15px;padding-left:66px}
  .ck-lean .ck-demo-tag{display:none}
  .ck-lean .ck-demo-bar{margin-right:10px}
  .ck-lean .ck-demo-say{margin-top:clamp(22px,6.4cqi,28px)}
  .ck-lean .ck-demo-res{grid-column:1/-1}
  .ck-lean .ck-demo-cap{grid-column:1/-1;margin-top:6px;text-align:left}
  /* no script: the stretched fallback lines cannot bend this way, so the lines are drawn with CSS instead —
     one trunk down from the site's port, one short branch into each company (visit 1: all red) */
  .ck-lean .ck-demo:not(.is-js) .ck-demo-wires{display:none}
  .ck-lean .ck-demo:not(.is-js) .ck-demo-cos::before{content:"";position:absolute;left:30px;top:calc(-1 * clamp(28px,8cqi,34px));
    bottom:calc(100% - (100% - 2 * 15px) / 3 * 2 - 2 * 15px - 10px);width:0;border-left:1.5px solid var(--ac-red);opacity:.8}
  .ck-lean .ck-demo:not(.is-js) .ck-demo-co::after{content:"";position:absolute;right:100%;top:10px;width:calc(66px - 30px - 5px);
    border-top:1.5px solid var(--ac-red);opacity:.8}
}
@container ckdemo (max-width:419px){
  .ck-lean .ck-demo-tab{font-size:14px;gap:7px;padding-bottom:12px}
  .ck-lean .ck-demo-n{width:20px;height:20px;font-size:12px}
  .ck-lean .ck-demo-co{column-gap:9px;row-gap:6px}
  .ck-lean .ck-demo-nm{font-size:14px;line-height:19px}
  .ck-lean .ck-demo-tag,.ck-lean .ck-demo-bar{top:9.5px}
  .ck-lean .ck-demo-cos{padding-left:60px}
  .ck-lean .ck-demo-sp{left:26px}
  .ck-lean .ck-demo:not(.is-js) .ck-demo-cos::before{left:26px}
  .ck-lean .ck-demo:not(.is-js) .ck-demo-co::after{width:calc(60px - 26px - 5px)}
  /* the finding line: the verdict word above the sentence, so the sentence keeps the full width */
  .ck-lean .ck-demo-sy{flex-wrap:wrap;align-items:flex-start;row-gap:8px}
  .ck-lean .ck-demo-mk{display:none}
  .ck-lean .ck-demo-vd{order:-1}
  .ck-lean .ck-demo-ft{flex-basis:100%}
}
/* narrower than any phone we target (a 320 phone gives 292): the banner keeps its two buttons only */
@container ckdemo (max-width:279px){
  .ck-lean .ck-demo-bt{display:none}
  .ck-lean .ck-demo-bn{justify-content:flex-end}
  .ck-lean .ck-demo-site{width:100%}
}

/* ── reduced motion: the final state of each visit, nothing travels ────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .ck-lean .ck-demo *,.ck-lean .ck-demo *::after{animation:none!important;transition:none!important}
  .ck-lean .ck-demo :is(.ck-demo-wg,.ck-demo-wp){display:none}
}

/* ── 2026-10-21 · phones (session ck-mobile) — LAST in this file on purpose ───────────────────────────────────
   His word: "nothing is made for mobile". The narrow tree is kept (site on top, three lines down into the
   companies), and made for a phone:
   · the object is a plate like every other plate on the page: the brand's --r-panel corner and the phone inset
     (--ck-pp). It had its own 20 px corner and a 16–21 px inset, so its content line wandered 30–35 px while every
     other plate's sat at 34;
   · the drawn site spans the plate — at 76 % it left an empty strip beside it and the plate looked off-centre;
   · the lines run closer to the edge (the site's port 20 px in, the companies 44 px in), which gives each row the
     width to carry its state at the end, on one right edge, from a 390 px phone up — the states used to hang under
     the names and leave the right half of the plate empty. Narrower phones keep the state under the name;
   · a pulse's glow stays narrower than the 5 px between two lanes, so the three lines read as three lines. */
@container ckdemo (max-width:419px){
  .ck-lean .ck-demo{--dm-pad:var(--ck-pp,20px);border-radius:var(--r-panel)}
  .ck-lean .ck-demo-site{width:100%}
  .ck-lean .ck-demo-sp{left:20px}
  .ck-lean .ck-demo-cos{padding-left:44px}
  .ck-lean .ck-demo-bar{margin-right:6px}
  .ck-lean .ck-demo-wg{stroke-width:4}
  /* no script: the CSS trunk + branches follow the same geometry, and each branch now reaches the trunk */
  .ck-lean .ck-demo:not(.is-js) .ck-demo-cos::before{left:20px}
  .ck-lean .ck-demo:not(.is-js) .ck-demo-co::after{width:calc(44px - 20px)}
}
@container ckdemo (min-width:360px) and (max-width:419px){
  .ck-lean .ck-demo-co{grid-template-columns:auto minmax(0,1fr) auto}
  .ck-lean .ck-demo-st{grid-row:1;grid-column:3;justify-items:end}
  /* one row now: the port sits on the row's middle, and so do the bar a stopped line ends at and, with no script,
     the branch into the port and the end of the trunk (the middle of the third of three equal rows) */
  .ck-lean .ck-demo-bar{top:50%}
  .ck-lean .ck-demo:not(.is-js) .ck-demo-co::after{top:50%}
  .ck-lean .ck-demo:not(.is-js) .ck-demo-cos::before{bottom:calc((100% - 2 * 15px) / 6)}
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   2026-10-23 · THE WEBSITE SEO SCANNER'S HERO — the Cookie Scanner's own hero and live panel (10-hero.css,
   20-demo.css; 90-motion.css and 95-phone.css apply as they are), with only what this tool adds:
   his word: "full redesign of website seo scanner page, so its more similar to cookie scanner page, easy, simple,
   understandable, amazing".
   · the mark is the house drawing `reach` (a 64×48 window + magnifier), drawn in on the same clock as the cookie;
   · the panel replays ONE real scan in three steps (tools/seo/seo_hero.py): Start → Follow → Check. Its parts:
       ok = read (green) · miss = looked for and not there: the line stops at a bar (amber) · warn = came back with a
       warning (amber) · *-rest = done, quiet while the next step plays (the word keeps its colour, the part dims);
   · the pages read sit on their line as small tiles, like the cookie names do: one by one as the robot follows the
     links (step 2), each outlined amber when it came back with a finding (step 3) — the crawl map's own tiles;
   · on the drawn page, step 3 rings the place its main heading should be ("9 pages have no main heading");
   · the result row: warnings = a filled amber dot · suggestions = a hollow amber ring (an improvement, not an
     error — the 17 Oct page drew them blue, the action colour; a role colour now) · the score small, never counting.
   ⛔ Every rule is under .ck-demo--seo / .ck-mark--seo — classes the Cookie Scanner's pages never carry.
   ⛔ Phone rules LAST (trap 1). Timings use the one speed (--mv-d / --mv-s, 90-motion.css).
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── the mark: `reach`, as wide as its drawing (4:3) at the cookie mark's height on every screen ── */
.ck-lean .ck-mark.ck-mark--seo{width:auto;aspect-ratio:4 / 3;margin-left:-3px}
.ck-lean .ck-mark--seo.in .ck-mark-w{animation:ckhDraw var(--mv-d,.7s) cubic-bezier(.65,0,.35,1) .1s both}
.ck-lean .ck-mark--seo.in .ck-mark-l{animation:ckhDraw .5s cubic-bezier(.65,0,.35,1) .49s both}
.ck-lean .ck-mark--seo.in .ck-mark-a{animation:ckhDraw .5s cubic-bezier(.65,0,.35,1) .63s both}

/* ── the panel's states ── */
.ck-lean .ck-demo--seo .ck-demo-sl.is-warn{background:var(--ac-amber-bg);color:var(--ac-amber-ink)}
.ck-lean .ck-demo--seo .ck-demo-vd.is-warn{background:var(--ac-amber-bg);color:var(--ac-amber-ink)}
.ck-lean .ck-demo--seo .ck-demo-mk.is-warn{background:var(--ac-amber-bg)}
.ck-lean .ck-demo--seo .ck-demo-mk.is-warn::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ac-amber)}
/* lines: amber for a warning and for what was not there; a finished part's line stays its colour, faint */
.ck-lean .ck-demo--seo .ck-demo-w:is([data-st="warn"],[data-st^="miss"]) path:not(.ck-demo-wb){stroke:var(--ac-amber)}
.ck-lean .ck-demo--seo .ck-demo-w[data-st="ok-rest"] path:not(.ck-demo-wb){stroke:var(--ac-green)}
.ck-lean .ck-demo--seo .ck-demo-w[data-st="warn"] .ck-demo-wl{stroke-opacity:.82}
.ck-lean .ck-demo--seo .ck-demo-w[data-st="miss"] .ck-demo-wl{stroke-opacity:.75}
.ck-lean .ck-demo--seo .ck-demo-w[data-st$="-rest"] .ck-demo-wl{stroke-opacity:.32}
.ck-lean .ck-demo--seo.is-js .ck-demo-w[data-st^="miss"] .ck-demo-wl{stroke-dasharray:var(--stop,78) 200}
/* nothing travels on a line that found nothing, or whose part is done */
.ck-lean .ck-demo--seo.is-live .ck-demo-w:is([data-st^="miss"],[data-st$="-rest"]) :is(.ck-demo-wg,.ck-demo-wp){animation:none;opacity:0}
.ck-lean .ck-demo--seo.is-live .ck-demo-co:is([data-st^="miss"],[data-st$="-rest"]) .ck-demo-port::after{animation:none}
/* the parts */
.ck-lean .ck-demo--seo .ck-demo-co[data-st="warn"]{--pc:var(--ac-amber)}
.ck-lean .ck-demo--seo .ck-demo-co:is([data-st="warn"],[data-st="ok-rest"]) .ck-demo-port{background:var(--pc,var(--ac-green));
  box-shadow:0 0 0 3.5px color-mix(in srgb,var(--pc,var(--ac-green)) 16%,transparent)}
.ck-lean .ck-demo--seo .ck-demo-co[data-st^="miss"] .ck-demo-port{box-shadow:inset 0 0 0 2px var(--ac-amber)}
.ck-lean .ck-demo--seo .ck-demo-co[data-st^="miss"] .ck-demo-bar{opacity:1;transform:translateY(-50%);background:var(--ac-amber);
  transition-delay:.25s}
.ck-lean .ck-demo--seo .ck-demo-co[data-st$="-rest"]{opacity:.42}
/* hover a part: its own line comes forward (20-demo.css does the same for the three companies) */
@media (hover:hover){
  .ck-lean .ck-demo--seo:has(.ck-demo-co[data-co="robots"]:hover) .ck-demo-w:not([data-co="robots"]),
  .ck-lean .ck-demo--seo:has(.ck-demo-co[data-co="sitemap"]:hover) .ck-demo-w:not([data-co="sitemap"]),
  .ck-lean .ck-demo--seo:has(.ck-demo-co[data-co="pages"]:hover) .ck-demo-w:not([data-co="pages"]){opacity:.3}
  .ck-lean .ck-demo--seo:has(.ck-demo-co:hover) .ck-demo-co[data-st$="-rest"]:hover{opacity:1}
}

/* ── the pages read: tiles on the line, like the cookie names on theirs ── */
.ck-lean .ck-demo--seo .ck-demo-tiles{position:absolute;right:100%;top:10px;margin-right:13px;display:grid;
  grid-template-columns:repeat(3,9px);gap:3px;padding:5px;border-radius:7px;background:var(--ck-face);
  box-shadow:0 0 0 1px var(--ck-tag-edge),0 6px 14px -8px rgba(28,28,70,.3);
  opacity:0;transform:translateY(-50%) scale(.9);transition:opacity .3s var(--ease),transform .45s var(--ease)}
.ck-lean .ck-demo--seo .ck-demo-tiles i{display:block;width:9px;height:7px;border-radius:2px;background:var(--ck-u1);
  box-shadow:inset 0 0 0 1px var(--ck-edge);opacity:0;transform:scale(.4);
  transition:opacity .3s var(--ease),transform .45s var(--ease),background-color .3s var(--ease),box-shadow .3s var(--ease)}
.ck-lean .ck-demo--seo .ck-demo-co:is([data-sv="2"],[data-sv="3"]) .ck-demo-tiles{opacity:1;transform:translateY(-50%)}
.ck-lean .ck-demo--seo .ck-demo-co:is([data-sv="2"],[data-sv="3"]) .ck-demo-tiles i{opacity:1;transform:none}
.ck-lean .ck-demo--seo .ck-demo-co[data-sv="2"] .ck-demo-tiles i{transition-delay:calc(.12s + var(--k) * var(--mv-s,70ms) * 1.5)}
.ck-lean .ck-demo--seo .ck-demo-co[data-sv="3"] .ck-demo-tiles i{background:var(--ac-amber-bg);
  box-shadow:inset 0 0 0 1.5px var(--ac-amber);transition-delay:calc(.12s + var(--k) * var(--mv-s,70ms))}

/* ── the drawn page, step 3: a ring where its main heading should be ── */
.ck-lean .ck-demo--seo .ck-demo-act{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}
.ck-lean .ck-demo--seo .ck-demo-act-h{fill:none;stroke:var(--ac-amber);stroke-width:1.3;opacity:0;
  transform-box:fill-box;transform-origin:50% 50%;transform:scale(1.06);
  transition:opacity .35s var(--ease),transform .45s var(--ease)}
.ck-lean .ck-demo--seo[data-sv="3"] .ck-demo-act-h{opacity:1;transform:none;transition-delay:.1s}

/* ── the result row: the counts in their own colours, then the score — on one line, with the caption under it (the
      panel's own compact layout, 20-demo.css): two counts and a score do not fit beside the caption on one line ── */
.ck-lean .ck-demo--seo .ck-demo-res{grid-column:1/-1;column-gap:16px}
.ck-lean .ck-demo--seo .ck-demo-cap{grid-column:1/-1;margin-top:6px;text-align:left}
.ck-lean .ck-demo--seo .ck-demo-iss.is-warn i{background:var(--ac-amber);box-shadow:0 0 0 3px var(--ac-amber-bg)}
.ck-lean .ck-demo--seo .ck-demo-iss.is-sug i{background:var(--panel);box-shadow:inset 0 0 0 1.5px var(--ac-amber),0 0 0 3px var(--ac-amber-bg)}

/* ── reduced motion: the final state of each step, nothing travels (20-demo.css stops the rest) ── */
@media (prefers-reduced-motion:reduce){
  .ck-lean .ck-mark--seo.in :is(.ck-mark-w,.ck-mark-l,.ck-mark-a){animation:none}
  .ck-lean .ck-demo--seo .ck-demo-tiles,.ck-lean .ck-demo--seo .ck-demo-tiles i,.ck-lean .ck-demo--seo .ck-demo-act-h{transition:none}
}

/* ── narrower objects (the compact desktop and the phone tree hide the cookie names on the lines; the tiles go
      with them — the word "9 read" carries the same fact) — LAST in this file on purpose ── */
@container ckdemo (max-width:499px){
  .ck-lean .ck-demo--seo .ck-demo-tiles{display:none}
}
/* ── short laptop screens (1366×768, 1280×720): this hook and its lead make the hero ~60 px taller than the cookie
      hero, and on a first visit the cookie bar covered the facts and came within 6 px of the Scan button (1280×720:
      field 586 vs bar 592). A 50 px headline (his brief: 48–60) and tighter steps lift the field and the facts above it. ── */
@media (min-width:981px) and (max-height:800px){
  .ck-lean .ck-hero2-l:has(>.ck-mark--seo)>.ck-h1{font-size:50px}
  .ck-lean .ck-hero2-l:has(>.ck-mark--seo)>.ck-mark{height:38px;margin-bottom:14px}
  .ck-lean .ck-hero2-l:has(>.ck-mark--seo)>.ck-lead{margin-top:14px}
  .ck-lean .ck-hero2-l:has(>.ck-mark--seo)>.ck-scan-hero{margin-top:28px}
}
/* ── phones: the field before the lead. This hook runs to three lines where the cookie's fits on one, and its lead to
      four–six: in the cookie hero's order the Scan button ended under the first-visit cookie bar on six of eight
      phone sizes (measured: 393×700 500 vs bar 506 … 320×568 425 vs 353). Reading order on a phone is now headline
      → field → facts → lead → "How the scan works"; nothing is cut, and each arrives in the order it is seen. ── */
@media (max-width:640px){
  .ck-lean .ck-hero2-l:has(>.ck-mark--seo){display:flex;flex-direction:column}
  .ck-lean .ck-hero2-l>.ck-mark--seo{align-self:flex-start}
  .ck-lean .ck-hero2-l:has(>.ck-mark--seo)>.ck-scan-hero{margin-top:22px}
  .ck-lean .ck-hero2-l:has(>.ck-mark--seo)>.ck-lead{order:1;margin-top:18px}
  .ck-lean .ck-hero2-l:has(>.ck-mark--seo)>.ck-hero-l{order:2}
  /* the field and the facts keep the cookie hero's clock (210 · 280 ms, 90-motion.css); the lead and the link follow them */
  .ck-lean .ck-hero2-l:has(>.ck-mark--seo)>.r-hero:nth-child(3){transition-delay:350ms!important}
  .ck-lean .ck-hero2-l:has(>.ck-mark--seo)>.r-hero:nth-child(6){transition-delay:420ms!important}
}
@media (max-width:640px) and (max-height:600px){
  .ck-lean .ck-hero2-l:has(>.ck-mark--seo)>.ck-scan-hero{margin-top:16px}
}

/* 30-checks.css — owned by one builder in the 2026-10-19 upgrade; see ~/tina-redesign/scanner-design/UPGRADE-1019.md
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   B3 · "What the scanner checks" — ONE plate, three visits on hairline rules (his §4: "one compact three-column
   section, separated by fine vertical rules. Use direct questions").
   The old version was three bordered boxes with tracked ALL-CAPS labels (two AI tells). Now:
   · one white plate that sits on the brand's panel shadow (never a border) — the three read as one sequence;
   · each column = the house drawing (IC) large, in the state colour, a thin line · "Visit 1" + the state in
     sentence case with its colour · his question as the content, set large;
   · the drawing acts its state out once, one visit after another, when the plate arrives (and on hover):
     before = a pulse curves out to the company · accept = a click, then a pulse flows · reject = the pulse
     stops at the bar. transform / opacity / stroke-dash only. Motion off or JS off = the complete drawing.
   ⛔ Every selector is under .ck-lean (2026-10-20): the bundle is shared by every tool page, and the
     how-it-works page has its own <section id="ck-checks"> — nothing here may reach it.
   ⛔ Plate radius/shadow use the brand tokens directly (--r-panel / --sh-panel): on this page `html .ck`
     (style.css) redefines --ck-r/--ck-sh to 14px / a 1px shadow and beats 00-system's `.ck-lean` values.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */
.ck-lean #ck-checks{
  --cx-pad:clamp(30px,3.3vw,48px);
  --cx-art:clamp(100px,9.4vw,136px);
}
.ck-lean #ck-checks .ck-cx-amber{--cx:var(--ac-amber);--cx-ink:var(--ac-amber-ink);--cx-bg:var(--ac-amber-bg)}
.ck-lean #ck-checks .ck-cx-green{--cx:var(--ac-green);--cx-ink:var(--ac-green-ink);--cx-bg:var(--ac-green-bg)}
.ck-lean #ck-checks .ck-cx-red{--cx:var(--ac-red);--cx-ink:var(--ac-red-ink);--cx-bg:var(--ac-red-bg)}

/* ── the gap under the hero (desktop) ── the hero is one full screen with its content centred, so ~150–290 px of
   its own air already sits under the content; the full section padding on top of that left a dead band of
   303 / 368 / 459 px at 1280 / 1440 / 1920 (every other section gap is 142–168). Here the section adds only a
   little, so the first section arrives on the page's rhythm. ⛔ the hero itself stays 100svh. */
@media (min-width:981px){
  .ck-lean #ck-checks.ck-sec{padding-top:clamp(24px,3vw,56px)}
}

/* ── the plate ── */
.ck-lean #ck-checks .ck-cx{position:relative;border-radius:var(--r-panel);background:var(--panel);box-shadow:var(--sh-panel)}
.ck-lean #ck-checks .ck-cx-l{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0;list-style:none}
.ck-lean #ck-checks .ck-cx-c{position:relative;min-width:0;padding:var(--cx-pad) var(--cx-pad) calc(var(--cx-pad) + 4px)}
/* the fine vertical rules: inset from the plate's edges, so they separate without enclosing */
.ck-lean #ck-checks .ck-cx-c+.ck-cx-c::before{content:"";position:absolute;left:0;top:var(--cx-pad);bottom:var(--cx-pad);width:1px;
  background:var(--line);transform-origin:50% 0}

/* ── the drawing: the house line, in the state's colour ── */
.ck-lean #ck-checks .ck-cx-art{display:block;color:var(--cx)}
.ck-lean #ck-checks .ck-ci2{display:block;width:var(--cx-art);height:auto;overflow:visible;
  /* optical alignment: the 64×48 box has air around the window (x 4, y 9–39). Pull the drawing out by that air so
     the window's line sits exactly on the text's left edge and on the column's top, like the type does. */
  margin:calc(var(--cx-art) * -.134 + 1.1px) 0 calc(var(--cx-art) * -.14 + 1.1px) calc(var(--cx-art) * -.0625 + 1.1px)}
.ck-lean #ck-checks .ck-ci2>*{vector-effect:non-scaling-stroke;stroke-width:2.2px}
/* the company the data goes to is a node with the state's pale ground; the packet in transit is solid */
.ck-lean #ck-checks .ck-ci2>circle,.ck-lean #ck-checks .ck-ci2>rect{fill:var(--cx-bg)}
.ck-lean #ck-checks .ck-cx-amber .ck-ci2>circle:nth-of-type(2){fill:currentColor;stroke-width:1.2px}
/* the cursor is a real cursor: solid, sitting on the page */
.ck-lean #ck-checks .ck-cx-green .ck-ci2>path:nth-of-type(2){fill:var(--panel)}

/* ── the label: "Visit 1" · the state, sentence case, in its colour ── */
.ck-lean #ck-checks .ck-cx-h{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:clamp(24px,2.3vw,32px) 0 0;
  font-size:14.5px;font-weight:600;line-height:1.3;letter-spacing:-.003em}
.ck-lean #ck-checks .ck-cx-v{color:var(--ink2);font-weight:500}
.ck-lean #ck-checks .ck-cx-s{display:inline-flex;align-items:center;gap:8px;color:var(--cx-ink)}
.ck-lean #ck-checks .ck-cx-s::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cx)}

/* ── his question: the content ── */
.ck-lean #ck-checks .ck-cx-q{margin-top:12px;max-width:21ch;font-size:clamp(19px,1.7vw,24.5px);font-weight:600;line-height:1.3;
  letter-spacing:-.019em;color:var(--ink);text-wrap:balance}

/* ── the scope sentence + link, under the plate on the page's left line ── */
.ck-lean #ck-checks .ck-scope{margin-top:clamp(20px,2vw,26px);font-size:15px;line-height:1.6;color:var(--ac-grey-ink);text-wrap:pretty}
.ck-lean #ck-checks .ck-slink{display:inline-flex;align-items:center;gap:6px;margin-left:3px;font-weight:600;color:var(--ac-blue-ink);
  white-space:nowrap;transition:color .2s ease}
.ck-lean #ck-checks .ck-slink .ck-arr{vertical-align:0;transition:transform .3s var(--ease)}
.ck-lean #ck-checks .ck-slink:hover .ck-arr,.ck-lean #ck-checks .ck-slink:focus-visible .ck-arr{transform:translateX(3px)}
.ck-lean #ck-checks .ck-slink:hover{color:var(--ac-blue)}
.ck-lean #ck-checks .ck-slink:focus-visible{outline-offset:5px;border-radius:8px}

/* ── reveal: the plate rises (app.js), then the rules draw down and the columns settle in sequence ── */
.ck.ck-go.ck-lean #ck-checks .ck-cx[data-reveal]{transform:translateY(28px)}
.ck.ck-go.ck-lean #ck-checks .ck-cx[data-reveal].ck-in{transform:none}
.ck.ck-go.ck-lean #ck-checks .ck-cx .ck-cx-c{transition:opacity .7s var(--ease),transform .9s var(--ease)}
.ck.ck-go.ck-lean #ck-checks .ck-cx .ck-cx-c+.ck-cx-c::before{transition:transform 1.1s var(--ease) .35s}
.ck.ck-go.ck-lean #ck-checks .ck-cx:not(.ck-in) .ck-cx-c{opacity:0;transform:translateY(10px)}
.ck.ck-go.ck-lean #ck-checks .ck-cx:not(.ck-in) .ck-cx-c+.ck-cx-c::before{transform:scaleY(0)}
.ck.ck-go.ck-lean #ck-checks .ck-cx .ck-cx-c:nth-child(2){transition-delay:.12s}
.ck.ck-go.ck-lean #ck-checks .ck-cx .ck-cx-c:nth-child(3){transition-delay:.24s}

/* ── the act (30-checks.js adds .is-play) ── the moving parts are invisible unless they are moving */
.ck-lean #ck-checks .ck-cx-fx>*{opacity:0}
.ck-lean #ck-checks .ck-cx-p{stroke:currentColor;stroke-width:3.4px;stroke-dasharray:.5 300;stroke-dashoffset:0}
.ck-lean #ck-checks .ck-cx-tr{stroke:currentColor;stroke-width:1.9px;stroke-dasharray:26 300;stroke-dashoffset:26}
.ck-lean #ck-checks .ck-cx-ping,.ck-lean #ck-checks .ck-cx-rip{fill:none;stroke:currentColor;stroke-width:1.4px;transform-box:fill-box;transform-origin:50% 50%}
.ck-lean #ck-checks .ck-ci2>path,.ck-lean #ck-checks .ck-ci2>circle{transform-box:fill-box;transform-origin:50% 50%}
/* ⛔ the dashed pulse keeps user units (a non-scaling stroke would change how its dash is measured) */
.ck-lean #ck-checks .ck-cx-ping,.ck-lean #ck-checks .ck-cx-rip{vector-effect:non-scaling-stroke}

/* before: a pulse curves out to the company, the company takes it */
.ck-lean #ck-checks .ck-cx-amber.is-play .ck-cx-p{animation:ckCxRun 1s cubic-bezier(.55,.05,.35,1) .05s both}
.ck-lean #ck-checks .ck-cx-amber.is-play .ck-cx-tr{animation:ckCxTrail 1s cubic-bezier(.55,.05,.35,1) .05s both}
.ck-lean #ck-checks .ck-cx-amber.is-play .ck-cx-ping{animation:ckCxPing .9s var(--ease) .95s both}
.ck-lean #ck-checks .ck-cx-amber.is-play .ck-ci2>circle:nth-of-type(1){animation:ckCxTake .6s var(--ease) .95s both}
/* accept: a click, then a pulse flows */
.ck-lean #ck-checks .ck-cx-green.is-play .ck-ci2>path:nth-of-type(2){transform-origin:0 0;animation:ckCxClick .42s var(--ease) both}
.ck-lean #ck-checks .ck-cx-green.is-play .ck-cx-rip{animation:ckCxRip .7s var(--ease) .1s both}
.ck-lean #ck-checks .ck-cx-green.is-play .ck-cx-p{animation:ckCxRun .85s cubic-bezier(.55,.05,.35,1) .42s both}
.ck-lean #ck-checks .ck-cx-green.is-play .ck-cx-tr{animation:ckCxTrail .85s cubic-bezier(.55,.05,.35,1) .42s both}
.ck-lean #ck-checks .ck-cx-green.is-play .ck-cx-ping{animation:ckCxPing .9s var(--ease) 1.2s both}
.ck-lean #ck-checks .ck-cx-green.is-play .ck-ci2>circle{animation:ckCxTake .6s var(--ease) 1.2s both}
/* reject: the pulse sets off and stops at the bar */
.ck-lean #ck-checks .ck-cx-red.is-play .ck-cx-p{animation:ckCxStop .8s cubic-bezier(.3,.6,.35,1) .05s both}
.ck-lean #ck-checks .ck-cx-red.is-play .ck-cx-tr{animation:ckCxStopTr .8s cubic-bezier(.3,.6,.35,1) .05s both}
.ck-lean #ck-checks .ck-cx-red.is-play .ck-ci2>path:nth-of-type(4){animation:ckCxBar .55s var(--ease) .62s both}

@keyframes ckCxRun{0%{opacity:0;stroke-dashoffset:0}12%{opacity:1}86%{opacity:1}100%{opacity:0;stroke-dashoffset:-100}}
/* the trail is the dot's own path, 26 units long, always ending at the dot (offset = 26 + the dot's offset) */
@keyframes ckCxTrail{0%{opacity:0;stroke-dashoffset:26}15%{opacity:.3}80%{opacity:.3}100%{opacity:0;stroke-dashoffset:-74}}
@keyframes ckCxStop{0%{opacity:0;stroke-dashoffset:0}12%{opacity:1}70%{opacity:1;stroke-dashoffset:-100}100%{opacity:0;stroke-dashoffset:-100}}
@keyframes ckCxStopTr{0%{opacity:0;stroke-dashoffset:26}15%{opacity:.35}70%{opacity:.3;stroke-dashoffset:-74}100%{opacity:0;stroke-dashoffset:-74}}
@keyframes ckCxPing{0%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(2.3)}}
@keyframes ckCxRip{0%{opacity:.6;transform:scale(.4)}100%{opacity:0;transform:scale(2.4)}}
@keyframes ckCxTake{0%,100%{transform:scale(1)}40%{transform:scale(1.22)}}
@keyframes ckCxClick{0%,100%{transform:scale(1)}40%{transform:scale(.82)}}
@keyframes ckCxBar{0%,100%{transform:none}30%{transform:translateX(-1.2px) scaleY(1.12)}60%{transform:translateX(.6px)}}

/* ── dark: tokens carry it; the hairline needs a touch more presence on the dark plate ── */
html[data-theme="dark"] .ck-lean #ck-checks .ck-cx-c+.ck-cx-c::before{background:var(--line-soft)}

/* below ~1000 px the sentence + link no longer fit one line: the link takes its own line instead of wrapping
   mid-sentence (which left "test." alone and a stray space in front of the link) */
@media (max-width:1000px){
  /* its own line here, so it is a real tap target: 44 px high (the extra hit area replaces the 6 px margin) */
  .ck-lean #ck-checks .ck-slink{display:flex;width:fit-content;min-height:44px;margin:0}
}
/* ── stacked: the rules turn horizontal, each visit becomes a row (drawing left, words right) ── */
@media (max-width:860px){
  .ck-lean #ck-checks{--cx-pad:clamp(20px,4.6vw,30px);--cx-art:clamp(70px,13vw,92px)}
  .ck-lean #ck-checks .ck-cx-l{grid-template-columns:minmax(0,1fr)}
  .ck-lean #ck-checks .ck-cx-c{display:grid;grid-template-columns:var(--cx-art) minmax(0,1fr);column-gap:clamp(18px,4vw,28px);
    align-items:start;padding:var(--cx-pad)}
  .ck-lean #ck-checks .ck-cx-art{grid-row:1 / span 2;padding-top:2px}
  .ck-lean #ck-checks .ck-cx-h{margin-top:0}
  .ck-lean #ck-checks .ck-cx-q{max-width:30ch;margin-top:8px;font-size:clamp(17.5px,4.4vw,20px)}
  .ck-lean #ck-checks .ck-cx-c+.ck-cx-c::before{left:var(--cx-pad);right:var(--cx-pad);top:0;bottom:auto;width:auto;height:1px;
    transform-origin:0 50%}
  .ck.ck-go.ck-lean #ck-checks .ck-cx:not(.ck-in) .ck-cx-c+.ck-cx-c::before{transform:scaleX(0)}
  .ck-lean #ck-checks .ck-scope{font-size:14.5px}
}
@media (max-width:420px){
  .ck-lean #ck-checks{--cx-art:clamp(56px,16vw,66px)}
  .ck-lean #ck-checks .ck-cx-c{column-gap:16px}
  .ck-lean #ck-checks .ck-cx-h{font-size:13.5px;gap:3px 8px}
}

/* ── motion off: the final drawing, nothing moves ── */
@media (prefers-reduced-motion:reduce){
  .ck-lean #ck-checks .ck-cx-c,.ck-lean #ck-checks .ck-cx-c::before,.ck-lean #ck-checks .ck-ci2 *{animation:none!important;transition:none!important}
  .ck-lean #ck-checks .ck-cx-fx>*{opacity:0!important}
}

/* ── 2026-10-21 · tablets and phones (session ck-mobile) — LAST in this file on purpose (trap 1) ─────────────
   His word: "nothing is made for mobile".
   · tablet / landscape phone rows (641–860): the question kept the desktop column's 30 ch measure inside a plate
     twice that wide, so the right half of every row stood empty — it takes the row's width now;
   · phones: the tablet row (drawing left, words right) squeezed his question into the plate's right two thirds —
     180 px wide on a 320 phone (three lines each), every question starting 99 px in from the plate's edge. Each
     visit is now a small header — the house drawing with "Visit 1 · Before consent" beside it — and his question
     under it, the content, on the plate's own left line and its full width. The plate keeps the page's phone
     inset (--ck-pp) and the question the page's one statement size (--ck-st). */
@media (min-width:641px) and (max-width:860px){
  .ck-lean #ck-checks .ck-cx-q{max-width:none}
}
@media (max-width:640px){
  .ck-lean #ck-checks{--cx-pad:var(--ck-pp,20px);--cx-art:52px}
  .ck-lean #ck-checks .ck-cx-c{grid-template-columns:var(--cx-art) minmax(0,1fr);column-gap:14px;row-gap:14px;align-items:center}
  .ck-lean #ck-checks .ck-cx-art{grid-row:1;grid-column:1;padding-top:0}
  .ck-lean #ck-checks .ck-cx-h{grid-row:1;grid-column:2;margin:0}
  .ck-lean #ck-checks .ck-cx-q{grid-row:2;grid-column:1/-1;max-width:none;margin:0;font-size:var(--ck-st,19px);line-height:1.28}
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   2026-10-23 · THE WEBSITE SEO SCANNER'S "What the scanner checks" — the Cookie Scanner's own plate (30-checks.css,
   sec_checks.py), with only what this tool adds (stage 2 of his redesign brief):
   · four columns = four plain questions a site owner asks, the engine's own fifteen check names under them (LIVE);
     ≥1180 px four across, 861–1179 two by two, narrower the cookie plate's own rows;
   · the drawings in the brand line (the house IC family's own stroke): they are questions, not results — the state
     colours stay for states (the report's red, amber and green);
   · each acts its question out once, one after another (30-checks.js adds .is-play): index — the pages line up as
     found tiles · links — a link reaches the next page, which opens · says — the page's name and description arrive
     as a search result · order — one line runs on past the page's edge.
   ⛔ Every rule is under #ck-checks.sq-checks — the cookie plate never carries .sq-checks. Phone rules LAST.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */
.ck-lean #ck-checks.sq-checks{--cx-pad:clamp(26px,2.4vw,36px);--cx-art:clamp(88px,7.2vw,108px)}
.ck-lean #ck-checks.sq-checks .ck-cx-brand{--cx:var(--blue);--cx-ink:var(--ink);--cx-bg:var(--ac-blue-bg)}
.ck-lean #ck-checks.sq-checks .ck-cx-q{max-width:none;font-size:clamp(18.5px,1.45vw,21px);line-height:1.28}
/* the checks under each question: the engine's own names, quiet, one per line */
.ck-lean #ck-checks.sq-checks .ck-cx-ul{display:grid;gap:8px;margin:16px 0 0;padding:0;list-style:none}
.ck-lean #ck-checks.sq-checks .ck-cx-ul li{position:relative;padding-left:16px;font-size:14.5px;line-height:1.45;color:var(--ink2)}
.ck-lean #ck-checks.sq-checks .ck-cx-ul li::before{content:"";position:absolute;left:1px;top:.62em;width:5px;height:5px;border-radius:50%;
  background:var(--grad)}
@media (min-width:1180px){
  .ck-lean #ck-checks.sq-checks .ck-cx-l{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* two by two: a vertical rule inside each row, a horizontal one between the rows */
@media (min-width:861px) and (max-width:1179px){
  .ck-lean #ck-checks.sq-checks .ck-cx-l{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ck-lean #ck-checks.sq-checks .ck-cx-c:nth-child(3)::before{left:var(--cx-pad);right:var(--cx-pad);top:0;bottom:auto;width:auto;height:1px}
  .ck-lean #ck-checks.sq-checks .ck-cx-c:nth-child(4)::after{content:"";position:absolute;left:var(--cx-pad);right:var(--cx-pad);top:0;
    height:1px;background:var(--line)}
}

/* ── the drawings ── the pale ground of the window, the tiles, the next page and the result card */
.ck-lean #ck-checks.sq-checks .ck-ci2 :is(.t,.b,.c,.g){transform-box:fill-box}
.ck-lean #ck-checks.sq-checks .ck-ci2 .t{transform-origin:50% 50%}
.ck-lean #ck-checks.sq-checks .ck-ci2 .b{transform-origin:0 50%}
.ck-lean #ck-checks.sq-checks .ck-ci2 :is(.c.l1,.c.l2,.c.l3,.g){transform-origin:0 50%}
/* the act */
.ck-lean #ck-checks.sq-checks .ck-cx-c.is-play .ck-cx-p{animation:ckCxRun .8s cubic-bezier(.55,.05,.35,1) .05s both}
.ck-lean #ck-checks.sq-checks .ck-cx-c.is-play .ck-cx-tr{animation:ckCxTrail .8s cubic-bezier(.55,.05,.35,1) .05s both}
.ck-lean #ck-checks.sq-checks .ck-cx-c[data-k="index"].is-play .t{animation:sqCxPop .45s cubic-bezier(.34,1.56,.64,1) both}
.ck-lean #ck-checks.sq-checks .ck-cx-c[data-k="index"].is-play .t:nth-of-type(2){animation-delay:.62s}
.ck-lean #ck-checks.sq-checks .ck-cx-c[data-k="index"].is-play .t:nth-of-type(3){animation-delay:.72s}
.ck-lean #ck-checks.sq-checks .ck-cx-c[data-k="index"].is-play .t:nth-of-type(4){animation-delay:.82s}
.ck-lean #ck-checks.sq-checks .ck-cx-c[data-k="index"].is-play .t:nth-of-type(5){animation-delay:.92s}
.ck-lean #ck-checks.sq-checks .ck-cx-c[data-k="links"].is-play .b{animation:sqCxOpen .55s var(--ease) .78s both}
.ck-lean #ck-checks.sq-checks .ck-cx-c[data-k="says"].is-play .c.l1{animation:sqCxGrow .4s var(--ease) .6s both}
.ck-lean #ck-checks.sq-checks .ck-cx-c[data-k="says"].is-play .c.l2{animation:sqCxGrow .4s var(--ease) .72s both}
.ck-lean #ck-checks.sq-checks .ck-cx-c[data-k="says"].is-play .c.l3{animation:sqCxGrow .4s var(--ease) .84s both}
.ck-lean #ck-checks.sq-checks .ck-cx-c[data-k="order"].is-play .g{animation:sqCxLong 1.3s var(--ease) .05s both}
@keyframes sqCxPop{0%{opacity:0;transform:scale(.3)}100%{opacity:1;transform:none}}
@keyframes sqCxOpen{0%,100%{transform:none}40%{transform:scaleX(1.12)}}
@keyframes sqCxGrow{0%{transform:scaleX(0)}100%{transform:none}}
@keyframes sqCxLong{0%,100%{transform:none}35%,75%{transform:scaleX(1.85)}}

/* ── tablets and phones: the cookie plate's rows; the checks under the question ── */
@media (max-width:860px){
  .ck-lean #ck-checks.sq-checks .ck-cx-ul{grid-column:2;margin-top:12px}
}
@media (max-width:640px){
  .ck-lean #ck-checks.sq-checks .ck-cx-q{font-size:var(--ck-st,19px)}
  .ck-lean #ck-checks.sq-checks .ck-cx-ul{grid-row:3;grid-column:1/-1;margin-top:0}
}

/* 40-why.css — owned by one builder in the 2026-10-19 upgrade; see ~/tina-redesign/scanner-design/UPGRADE-1019.md */
/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   B4 · "Why run this scan?" + "What do you get for FREE"            (markup: sec_why.py · motion: 40-why.js)
   His history on "why": centred → "super dead and not alive" → three numbered steps on a hairline → "can this
   be left aligned since this whole page is left aligned". 10-19: "i hate how ai generated whole page looks".
   ⇒ The gradient numbered circles were a stock "3 steps" template, and the three points are not steps — they
     are one argument. So: the statements are the content (big, ink), the explanation sits beside them, and in
     the margin the page's own drawings, joined by one thin thread that draws in as the argument goes on.
   ⇒ The FREE offer was a pale-blue tinted box with a centred heading = a generic CTA band. It is now the
     page's one dark plate (the brand's own case-study / footer material, restrained: only a faint trace of its glow),
     heading + action on the left, the four parts of the report on the right.
   New class names (.ck-y-*, .ck-free-*) on purpose: the old .ck-why-l / .ck-get rules in style.css carry the
   numbered-badge history and stay untouched for anything that still uses them.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── 1 · Why run this scan? ─────────────────────────────────────────────────────────────────────────────── */
.ck-lean .ck-y{
  --y-mw:clamp(56px,5vw,72px);                  /* the drawing's width (its viewBox is 64×48) */
  --y-mh:calc(var(--y-mw) * .75);
  --y-mt:-3px;                                  /* drawing top vs the statement's first line */
  --y-tx:calc(var(--y-mw) * 19 / 64);           /* the thread runs through the windows' centre (x 19 of 64) */
  --y-cg:clamp(28px,3.2vw,52px);
  --y-row:clamp(44px,4.8vw,72px);
  list-style:none;margin:0;padding:0;counter-reset:none}
.ck-lean .ck-y-i{position:relative;display:grid;
  /* ⭐ the explanation starts on the content's middle line — the same line the FREE plate's list starts on
     below, so the two sections share one second column (quiet precision instead of two unrelated grids) */
  grid-template-columns:var(--y-mw) minmax(0,calc(50% - var(--y-mw) - 2 * var(--y-cg))) minmax(0,1fr);
  column-gap:var(--y-cg);align-items:baseline;padding-bottom:var(--y-row)}
.ck-lean .ck-y-i:last-child{padding-bottom:0}
.ck-lean .ck-y-i::before,.ck-lean .ck-y-i::after{content:none}
.ck-lean .ck-y-mw{grid-column:1;grid-row:1 / span 2;align-self:start;display:block;width:var(--y-mw);
  height:var(--y-mh);margin-top:var(--y-mt)}
.ck-lean .ck-y-m{display:block;width:100%;height:100%;overflow:visible}
/* the statements share the checks questions' scale (.ck-cx-q): the page has ONE "statement as the content" size */
.ck-lean .ck-y-h{grid-column:2;margin:0;font-size:clamp(19px,1.7vw,24.5px);font-weight:600;letter-spacing:-.019em;
  line-height:1.3;color:var(--ink);text-wrap:balance;max-width:17em}
.ck-lean .ck-y-p{grid-column:3;margin:0;font-size:var(--ck-body);line-height:1.62;color:var(--ink2);max-width:44ch;
  text-wrap:pretty}

/* the drawing: quiet structure (your site's window) + the one part that carries the point, in its role colour */
.ck-lean .ck-y-m .s{color:var(--ac-grey);opacity:.85}
.ck-lean .ck-y-m--count .a{color:var(--ac-amber)}
.ck-lean .ck-y-m--banner .a{color:var(--ac-red)}
.ck-lean .ck-y-m--reach .a{color:var(--ac-blue)}

/* the thread: from the bottom of one window to the top of the next — it joins the argument, it encloses nothing */
.ck-lean .ck-y-i:not(:last-child)::after{content:"";position:absolute;left:calc(var(--y-tx) - .5px);width:1px;
  top:calc(var(--y-mt) + var(--y-mh) * 42 / 48 + 10px);bottom:calc(-1 * var(--y-mt) + 2px);
  background:linear-gradient(to bottom,var(--line-on),var(--line-on) 70%,transparent);
  transform-origin:50% 0}

/* ── motion (40-why.js adds .is-js only when motion is allowed and the observer exists; without it every row
      is simply complete). One row at a time: the thread arrives, the drawing draws, then acts its point. ── */
/* ⛔ the transitions live on .is-on only: hiding is instant, arriving is animated. (A transition on the hidden
      state too made Chrome reverse a half-run dash transition and leave the strokes stuck undrawn.) */
.ck-lean .ck-y.is-js .ck-y-i:not(.is-on) .ck-y-h,
.ck-lean .ck-y.is-js .ck-y-i:not(.is-on) .ck-y-p{opacity:0;transform:translateY(16px)}
.ck-lean .ck-y.is-js .ck-y-i.is-on .ck-y-h,
.ck-lean .ck-y.is-js .ck-y-i.is-on .ck-y-p{transition:opacity .8s var(--ease),transform 1s var(--ease)}
.ck-lean .ck-y.is-js .ck-y-i.is-on .ck-y-p{transition-delay:.09s}
.ck-lean .ck-y.is-js .ck-y-m [pathLength]{stroke-dasharray:1 1}
.ck-lean .ck-y.is-js .ck-y-i:not(.is-on) .ck-y-m [pathLength]{stroke-dashoffset:1;opacity:0}
.ck-lean .ck-y.is-js .ck-y-i.is-on .ck-y-m [pathLength]{stroke-dashoffset:0;
  transition:stroke-dashoffset .9s cubic-bezier(.65,0,.35,1),opacity .01s linear}
.ck-lean .ck-y.is-js .ck-y-i.is-on .ck-y-m .s{transition-delay:.12s}
.ck-lean .ck-y.is-js .ck-y-i.is-on .ck-y-m .a{transition-delay:.55s}
.ck-lean .ck-y.is-js .ck-y-i:not(.is-th)::after{transform:scaleY(0)}
.ck-lean .ck-y.is-js .ck-y-i.is-th:not(:last-child)::after{transition:transform .75s cubic-bezier(.65,0,.35,1)}

/* the list itself carries data-reveal only so a forced reveal (a full-page capture adds .ck-in to every
   [data-reveal]) still shows the rows — see 40-why.js. app.js's own fade on the list is switched off: the rows
   arrive one by one by themselves, and a fading parent would only blur that. */
.ck.ck-go.ck-lean .ck-y[data-reveal]{opacity:1;transform:none;transition:none}
.ck-lean .ck-y.is-now .ck-y-i *,.ck-lean .ck-y.is-now .ck-y-i::after{transition:none!important}

/* acting the point out (once on arrival, again on hover) — transform/opacity only, ~1.5 s, then still */
/* 1 · the bars rise one after another: what those companies record about your visitors */
.ck-lean .ck-y-i.is-act .ck-y-bar{animation:ckYbar 1.1s var(--ease) both}
.ck-lean .ck-y-i.is-act .ck-y-bar:nth-of-type(4){animation-delay:.12s}
.ck-lean .ck-y-i.is-act .ck-y-bar:nth-of-type(5){animation-delay:.24s}
.ck-lean .ck-y-i.is-act .ck-y-bn{animation:ckYbn 1.3s var(--ease) both}
.ck-lean .ck-y-i.is-act .ck-y-no{animation:ckYno 1.3s var(--ease) both}
.ck-lean .ck-y-i.is-act .ck-y-lens{animation:ckYlens 1.9s cubic-bezier(.45,0,.25,1) both}
.ck-lean .ck-y-i.is-act .ck-y-ar{animation:ckYar 1.9s ease both}
.ck-lean .ck-y-no{transform-box:fill-box;transform-origin:50% 50%}
.ck-lean .ck-y-bar{transform-box:fill-box;transform-origin:50% 100%}
@keyframes ckYbar{0%{transform:scaleY(.2)}100%{transform:none}}
@keyframes ckYbn{0%{transform:translateY(7px);opacity:0}45%{opacity:1}100%{transform:none;opacity:1}}
@keyframes ckYno{0%,55%{transform:none}70%{transform:scaleX(1.6)}100%{transform:none}}
/* the lens crosses your own window and finds nothing there (the window is empty on purpose); its "back to the
   site" arrow steps aside while it looks */
@keyframes ckYar{0%{opacity:1}12%,80%{opacity:0}100%{opacity:1}}
@keyframes ckYlens{0%{transform:none}45%{transform:translate(-25px,6px)}62%{transform:translate(-25px,6px)}100%{transform:none}}

/* ── 2 · What do you get for FREE — the page's offer, on the brand's dark plate ─────────────────────────── */
.ck-lean .ck-free{position:relative;isolation:isolate;overflow:hidden;display:grid;
  --f-g:clamp(40px,6.4vw,112px);
  /* the list starts on the content's middle line (see .ck-y-i): padding + col 1 + gap = 50 % of the plate */
  grid-template-columns:minmax(0,calc(50% - var(--f-g))) minmax(0,1fr);grid-template-areas:"h l" "b l";
  grid-template-rows:auto 1fr;column-gap:var(--f-g);row-gap:clamp(30px,3vw,40px);
  padding:clamp(48px,5.2vw,80px) clamp(28px,5.2vw,80px);border-radius:var(--r-panel);
  background:var(--dark);color:var(--white);
  /* a soft plate shadow, not the footer's page-end slab (that one threw a grey cloud over the FAQ heading) */
  box-shadow:0 34px 80px -46px rgba(10,10,12,.34),0 2px 8px rgba(10,10,12,.05);
  outline:1px solid var(--plate-ring);outline-offset:-1px;text-align:left}
html[data-theme="dark"] .ck-lean .ck-free{box-shadow:var(--sh-slab)}
/* ⛔ 2026-10-20 his word: "left side needs to be vertically centered" — the heading and its button travel as one
   group, centred against the list (two equal 1fr rows above and below them; the phone layout below is its own). */
@media (min-width:981px){
  .ck-lean .ck-free{grid-template-areas:". l" "h l" "b l" ". l";grid-template-rows:1fr auto auto 1fr}
  .ck-lean .ck-free-h,.ck-lean .ck-free-b{align-self:center}
  .ck-lean .ck-free-l{align-self:center}
}
.ck-lean .ck-free>*{position:relative;z-index:1}
/* a faint version of the footer's aurora, so the two dark plates are the same material — the offer stays quiet */
.ck-lean .ck-free-aur{position:absolute;inset:-30% -10%;z-index:0;filter:blur(80px);opacity:.30;pointer-events:none;
  transform:translateZ(0)}
.ck-lean .ck-free-aur i{position:absolute;display:block;border-radius:50%}
.ck-lean .ck-free-aur i:nth-child(1){background:var(--aur-c);left:-8%;top:34%;width:44%;height:80%}
.ck-lean .ck-free-aur i:nth-child(2){background:var(--aur-d);left:58%;top:-6%;width:48%;height:70%}
/* on the page's one heading scale (--ck-h2), like every section heading */
.ck-lean .ck-free-h{grid-area:h;align-self:start;margin:0;font-size:var(--ck-h2);font-weight:700;
  letter-spacing:-.034em;line-height:1.06;color:var(--white);max-width:9.5em;text-wrap:balance}
/* the footer's gradient on dark (.ct-hl) — the brand's blue → violet, lifted so it holds on the plate.
   ⛔ letters cut by negative letter-spacing: same fix as the site's .grad (padding out, margin back) */
.ck-lean .ck-free-g{background:linear-gradient(92deg,#8FB0FF,#C6A8FF);-webkit-background-clip:text;background-clip:text;
  color:transparent;padding:.1em .12em;margin:0 -.12em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ck-lean .ck-free-b{grid-area:b;align-self:start;justify-self:start}
.ck-lean .ck-free-b .ck-arr{transition:transform .3s var(--ease)}
.ck-lean .ck-free-b:hover .ck-arr{transform:translateX(3px)}
.ck-lean .ck-free-b:focus-visible{outline:2px solid #fff;outline-offset:3px}
.ck-lean .ck-free-l{grid-area:l;align-self:start;list-style:none;margin:0;padding:0;display:grid;row-gap:0}
.ck-lean .ck-free-l li{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:16px;align-items:start;
  padding:19px 0;font-size:clamp(16px,1.2vw,17.5px);line-height:1.52;color:var(--plate-1)}
.ck-lean .ck-free-l li+li{box-shadow:inset 0 1px 0 var(--plate-div)}
.ck-lean .ck-free-l li:first-child{padding-top:0}
.ck-lean .ck-free-l li:last-child{padding-bottom:0}
.ck-lean .ck-free-k{display:grid;place-items:center;width:24px;height:24px;margin-top:.5px;border-radius:50%;
  background:var(--white);color:var(--blue);box-shadow:var(--sh-chip)}
.ck-lean .ck-free-k svg{width:14px;height:14px}

/* the four parts tick in one after another when the plate arrives (app.js gives the plate .ck-in) */
.ck.ck-go.ck-lean .ck-free .ck-free-k{transition:transform .5s var(--ease),opacity .4s ease;
  transition-delay:calc(.45s + var(--i,0) * .12s)}
.ck.ck-go.ck-lean .ck-free .ck-free-k path{stroke-dasharray:1 1;transition:stroke-dashoffset .45s var(--ease);
  transition-delay:calc(.62s + var(--i,0) * .12s)}
.ck.ck-go.ck-lean .ck-free:not(.ck-in) .ck-free-k{transform:scale(.4);opacity:0}
.ck.ck-go.ck-lean .ck-free:not(.ck-in) .ck-free-k path{stroke-dashoffset:1}

/* forced reveal while off-screen (40-why.js): complete at once */
.ck.ck-go.ck-lean .ck-free.is-now,.ck.ck-go.ck-lean .ck-free.is-now .ck-free-k,
.ck.ck-go.ck-lean .ck-free.is-now .ck-free-k path{transition:none!important}

/* ── tablet: the explanation moves under its statement ─────────────────────────────────────────────────── */
@media (max-width:980px){
  .ck-lean .ck-y{--y-row:clamp(36px,5vw,48px)}
  .ck-lean .ck-y-i{grid-template-columns:var(--y-mw) minmax(0,1fr);row-gap:10px;align-items:start}
  .ck-lean .ck-y-h,.ck-lean .ck-y-p{grid-column:2}
  .ck-lean .ck-y-h{max-width:22em}
  .ck-lean .ck-y-p{max-width:56ch}
  .ck-lean .ck-free{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"h" "l" "b";
    row-gap:clamp(28px,4vw,36px)}
  .ck-lean .ck-free-l{align-self:start}
}
/* ── phone ───────────────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width:640px){
  .ck-lean .ck-y{--y-mw:44px;--y-mt:0px;--y-cg:16px;--y-row:34px}
  .ck-lean .ck-y-h{font-size:20px;line-height:1.22;letter-spacing:-.022em}
  .ck-lean .ck-y-p{font-size:15.5px;line-height:1.58}
  .ck-lean .ck-free{padding:36px 22px 28px;row-gap:26px}
  .ck-lean .ck-free-h{font-size:30px}
  .ck-lean .ck-free-l li{padding:15px 0;font-size:15.5px;column-gap:13px;grid-template-columns:22px minmax(0,1fr)}
  .ck-lean .ck-free-k{width:22px;height:22px}
  .ck-lean .ck-free-k svg{width:13px;height:13px}
  .ck-lean .ck-free-b{justify-self:stretch}
}
/* ── motion off: the final state, nothing plays ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .ck-lean .ck-y-i *{animation:none!important;transition:none!important}
  .ck-lean .ck-y-i::after{transform:none!important;transition:none!important}
  .ck-lean .ck-free-k,.ck-lean .ck-free-k path{transition:none!important;transform:none!important;opacity:1!important;
    stroke-dashoffset:0!important}
}
/* printing never waits for a scroll: every row complete */
@media print{
  .ck-lean .ck-y.is-js .ck-y-i *{opacity:1!important;transform:none!important;stroke-dashoffset:0!important}
  .ck-lean .ck-y.is-js .ck-y-i::after{transform:none!important}
}

/* ── 2026-10-21 · phones (session ck-mobile) — LAST in this file on purpose ───────────────────────────────────
   His word: "nothing is made for mobile". The argument keeps its thread and drawings in the margin (one left line:
   the drawings sit on it). What changes is the system:
   · the statements take the page's one statement size (--ck-st), the same as his checks questions above them —
     on the desktop the two share one scale, on a phone they had drifted to 20 vs 17.5 px;
   · the FREE plate keeps the page's phone inset (--ck-pp) like every other plate: its content sat 22 px in
     (36 px from the screen edge, every other plate's at 34) and its bottom (28) was lighter than its top (36). */
@media (max-width:640px){
  .ck-lean .ck-y-h{font-size:var(--ck-st,19px)}
  .ck-lean .ck-free{padding:28px var(--ck-pp,20px) var(--ck-pp,20px)}
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   2026-10-23 · THE WEBSITE SEO SCANNER'S "Why run this scan?" — the Cookie Scanner's own rows (40-why.css,
   sec_why.py); only the three drawings are this tool's: the part that carries each point in its role colour, and
   the act it plays once as its row arrives (40-why.js adds .is-act):
   hidden — blue (what the scan reads): a tag hangs from your page and swings — the part visitors never see
   repeat — amber (a warning): the same mark arrives on three pages, one after another
   drift  — red (a problem): the link that led straight to a page now takes a detour
   ⛔ Every rule is keyed on these drawings' own names (.ck-y-m--hidden/--repeat/--drift) — the cookie page never
     carries them.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */
.ck-lean .ck-y-m--hidden .a{color:var(--ac-blue)}
.ck-lean .ck-y-m--repeat .a{color:var(--ac-amber)}
.ck-lean .ck-y-m--drift .a{color:var(--ac-red)}
.ck-lean .ck-y-m--hidden .sq-y-tag{transform-box:fill-box;transform-origin:0 0}
.ck-lean .ck-y-m--repeat .sq-y-m{transform-box:fill-box;transform-origin:0 50%}
.ck-lean .ck-y-m--drift .sq-y-hop circle{transform-box:fill-box;transform-origin:50% 50%}
.ck-lean .ck-y-i.is-act .sq-y-tag{animation:sqYtag 1.15s var(--ease) both}
.ck-lean .ck-y-i.is-act .sq-y-m1{animation:sqYmark .5s var(--ease) both}
.ck-lean .ck-y-i.is-act .sq-y-m2{animation:sqYmark .5s var(--ease) .18s both}
.ck-lean .ck-y-i.is-act .sq-y-m3{animation:sqYmark .5s var(--ease) .36s both}
.ck-lean .ck-y-i.is-act .sq-y-hop path{animation:sqYhop .8s cubic-bezier(.65,0,.35,1) both}
.ck-lean .ck-y-i.is-act .sq-y-hop circle{animation:sqYhopN .5s cubic-bezier(.34,1.56,.64,1) .6s both}
@keyframes sqYtag{0%{transform:rotate(-16deg)}45%{transform:rotate(8deg)}72%{transform:rotate(-3deg)}100%{transform:none}}
@keyframes sqYmark{0%{transform:scaleX(0)}100%{transform:none}}
@keyframes sqYhop{0%{stroke-dashoffset:1}100%{stroke-dashoffset:0}}
@keyframes sqYhopN{0%{transform:scale(0)}100%{transform:none}}

/* 50-faq.css — owned by one builder in the 2026-10-19 upgrade; see ~/tina-redesign/scanner-design/UPGRADE-1019.md */
/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   2026-10-19 · "Cookie scanner FAQ" (sec_faq.py). Everything is scoped under `.ck-lean .ck-sec-faq` (or a class
   only this section uses): the bundle is shared by every tool page. The old rules for this block (.ck-learn*,
   .ck-faq-l, .ck-faq-side p …) still live in style.css; the new markup uses new class names, so none of that
   history reaches it.
   His word: "here all links should look the same and be below cookie scanner FAQ title all the same u get me,
   no need more about the tool and no need button, all same similar design".
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ⛔ 00-system.css sets --ck-r / --ck-sh on `.ck-lean` (0,1,0), but style.css sets them on `html .ck` (0,1,1),
   which wins on the same element — so on this page they resolve to the old 14 px / hairline values. Re-declared
   here, one level down, so this section gets the system's intended plate (--r-panel, --sh-panel). */
.ck-lean .ck-sec-faq{--ck-r:var(--r-panel);--ck-sh:var(--sh-panel);
  --fq-gl:32px;                        /* the +/− control */
  --fq-pad-x:clamp(24px,2.9vw,42px)}   /* the plate's side padding */

/* ── the grid: a title column (sticky on desktop) · the questions plate ── */
.ck-lean .ck-faq-g{grid-template-columns:minmax(0,.5fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start}

/* ── the title ── greedy wrap, not the site's balance: "Cookie scanner / FAQ", never "Cookie / scanner FAQ" */
.ck-lean .ck-sec-faq .ck-faq-side .h2{text-wrap:wrap}

/* ── the four links, directly under the title: one list, all identical (his ask) ── */
.ck-lean .ck-faq-nav{margin-top:clamp(24px,2.5vw,34px)}
.ck-lean .ck-faq-links{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin:0;padding:0;list-style:none}
.ck-lean .ck-faq-links a{display:inline-flex;align-items:center;gap:10px;min-height:40px;
  font-size:clamp(16px,1.15vw,17px);font-weight:550;letter-spacing:-.008em;line-height:1.35;color:var(--ink2);
  transition:color .25s var(--ease)}
.ck-lean .ck-faq-links .ck-arr{flex:none;width:15px;height:15px;color:var(--ac-blue);transition:transform .35s var(--ease)}
.ck-lean .ck-faq-links a:focus-visible{outline-offset:4px;border-radius:8px}

/* ── the questions plate ── */
.ck-lean .ck-sec-faq .ck-faq-p{padding:clamp(6px,.7vw,10px) var(--fq-pad-x);border-radius:var(--ck-r);
  box-shadow:var(--ck-sh);border-color:var(--line-soft)}
.ck-lean .ck-sec-faq .faq-item{border-bottom:1px solid var(--line)}
.ck-lean .ck-sec-faq .faq-item:last-child{border-bottom:0}

.ck-lean .ck-sec-faq .faq-q{align-items:center;gap:clamp(20px,2.4vw,36px);padding:clamp(19px,1.62vw,23px) 0;
  font-size:clamp(16.5px,1.28vw,18.5px);font-weight:600;letter-spacing:-.016em;line-height:1.38;color:var(--ink);
  -webkit-tap-highlight-color:transparent;transition:padding .38s var(--ease)}
.ck-lean .ck-sec-faq .faq-q:hover{color:var(--ink)}
/* an open question draws its answer up under it, so the two read as one */
.ck-lean .ck-sec-faq .faq-item.open .faq-q{padding-bottom:clamp(10px,.9vw,13px)}
.ck-lean .ck-sec-faq .ck-fq-t{min-width:0;text-wrap:pretty;transition:color .25s var(--ease)}
/* keyboard focus: a ring drawn around the row, reaching into the plate's padding — an outline would touch the
   question's first letter on the left and the open answer underneath */
.ck-lean .ck-sec-faq .faq-q{position:relative}
.ck-lean .ck-sec-faq .faq-q:focus-visible{outline:none}
.ck-lean .ck-sec-faq .faq-q:focus-visible::after{content:"";position:absolute;inset:6px calc(var(--fq-pad-x) * -.5);
  border-radius:16px;box-shadow:0 0 0 2px var(--blue);pointer-events:none}

/* the +/− control: a hairline ring with a thin cross. Open = a solid blue disc (blue = action, the one open
   answer is the thing being acted on) and the vertical bar lies down flat into a minus instead of vanishing. */
.ck-lean .ck-sec-faq .faq-q .ic{flex:none;position:relative;width:var(--fq-gl);height:var(--fq-gl);margin:0;
  border-radius:50%;background:transparent;box-shadow:inset 0 0 0 1px var(--line-on);color:var(--ink);
  transition:background .3s var(--ease),box-shadow .3s var(--ease),color .3s var(--ease)}
.ck-lean .ck-sec-faq .faq-q .ic::before,.ck-lean .ck-sec-faq .faq-q .ic::after{content:"";position:absolute;
  left:50%;top:50%;right:auto;bottom:auto;width:12px;height:1.75px;margin:-.875px 0 0 -6px;border-radius:2px;
  background:currentColor;opacity:1;transition:transform .42s var(--ease)}
.ck-lean .ck-sec-faq .faq-q .ic::after{transform:rotate(90deg)}
.ck-lean .ck-sec-faq .faq-item.open .faq-q .ic{background:var(--ac-blue);box-shadow:0 8px 18px -10px rgba(47,107,255,.85);color:#fff}
.ck-lean .ck-sec-faq .faq-item.open .faq-q .ic::after{transform:rotate(0deg);opacity:1}
.ck-lean .ck-sec-faq .faq-item.open .faq-q .ic::before{transform:rotate(180deg)}

/* the answer: a readable measure, clear of the control, and it settles in under its question as the row opens */
.ck-lean .ck-sec-faq .faq-a p{max-width:62ch;padding:0 calc(var(--fq-gl) + 24px) clamp(24px,2.2vw,30px) 0;
  font-size:var(--ck-body);line-height:1.68;color:var(--ink2);text-wrap:pretty;
  opacity:0;transform:translateY(-6px);transition:opacity .25s ease,transform .45s var(--ease)}
.ck-lean .ck-sec-faq .faq-item.open .faq-a p{opacity:1;transform:none;
  transition:opacity .45s ease .08s,transform .55s var(--ease) .05s}

/* hover only where there is a pointer — on a phone a tapped row would otherwise stay blue */
@media (hover:hover){
  .ck-lean .ck-faq-links a:hover{color:var(--ink)}
  .ck-lean .ck-faq-links a:hover .ck-arr{transform:translateX(4px)}
  .ck-lean .ck-sec-faq .faq-q:hover .ck-fq-t{color:var(--ac-blue-ink)}
  .ck-lean .ck-sec-faq .faq-q:hover .ic{box-shadow:inset 0 0 0 1px var(--ac-blue);color:var(--ac-blue)}
  .ck-lean .ck-sec-faq .faq-item.open .faq-q:hover .ic{box-shadow:0 8px 18px -10px rgba(47,107,255,.85);color:#fff}
}

/* ── entrance: the rows settle one after another inside the rising plate (motion on only; .ck-go is set by
   app.js only when motion is allowed, so with JS off or reduced motion the rows are simply there) ── */
.ck.ck-go .ck-sec-faq .ck-faq-p .faq-item{opacity:0;transform:translateY(10px);
  transition:opacity .28s ease-out,transform .62s var(--ease);transition-delay:calc(var(--i,0) * 28ms + 30ms)}
.ck.ck-go .ck-sec-faq .ck-faq-p.ck-in .faq-item{opacity:1;transform:none}
.ck-sec-faq .faq-item:nth-child(2){--i:1}.ck-sec-faq .faq-item:nth-child(3){--i:2}.ck-sec-faq .faq-item:nth-child(4){--i:3}
.ck-sec-faq .faq-item:nth-child(5){--i:4}.ck-sec-faq .faq-item:nth-child(6){--i:5}.ck-sec-faq .faq-item:nth-child(7){--i:6}
.ck-sec-faq .faq-item:nth-child(8){--i:7}

/* ── the gap to the footer: the last section ends on the page's rhythm, not on the footer's site-wide 216 px
   (style.css had 64–104 px; a touch more air before the dark slab) ── */
body:has(main.ck-lean) #kontaktai{margin-top:clamp(84px,8.5vw,128px)}

/* ── the phone sticky never sits under the live cookie bar ── style.css lifts it with html[data-cbar="1"], but
   nothing sets that attribute, so on a first visit the sticky (z 240) slid in behind the bar (z 250): its blue
   glow bled out under the bar's edge and it could not be tapped. The bar is open exactly while it carries `.on`
   (build.py TRACK_JS: show() adds it, hide() removes it before setting [hidden]), so the sticky waits until
   the visitor has answered. Hidden for keyboards too: visibility follows once the slide-out has finished. */
body:has(.cbar.on) main.ck-lean .ck-sticky{opacity:0;pointer-events:none;visibility:hidden;transform:translate(-50%,150%);
  transition:transform .5s var(--ease),opacity .3s ease,visibility 0s linear .5s}

/* ── desktop: the title column travels with the questions ── */
@media (min-width:981px){
  .ck-lean .ck-faq-side{position:sticky;top:clamp(104px,13vh,148px)}
  /* the title's cap line sits on the plate's top edge, not the line box's (half-leading pushed it ~6 px low) */
  .ck-lean .ck-sec-faq .ck-faq-side .h2{margin-top:-.13em}
}
/* ── tablet / phone: stacked — title, links, then the plate ── */
@media (max-width:980px){
  .ck-lean .ck-faq-g{grid-template-columns:minmax(0,1fr);gap:var(--ck-head)}
  .ck-lean .ck-faq-side{position:static}
}
@media (max-width:640px){
  .ck-lean .ck-sec-faq{--fq-gl:30px;--fq-pad-x:20px}
  .ck-lean .ck-faq-nav{margin-top:18px}
  .ck-lean .ck-faq-links{gap:0}
  .ck-lean .ck-faq-links a{min-height:44px}
  .ck-lean .ck-sec-faq .faq-q{padding:19px 0;font-size:16.5px;gap:18px}
  .ck-lean .ck-sec-faq .faq-a p{padding-right:0;font-size:15.5px;line-height:1.66}
  body:has(main.ck-lean) #kontaktai{margin-top:72px}
}
@media (prefers-reduced-motion:reduce){
  .ck-lean .ck-sec-faq .faq-a p,.ck-lean .ck-sec-faq .faq-item{opacity:1;transform:none}
}

/* ── 2026-10-21 · tablets and phones (session ck-mobile) — LAST in this file on purpose ──────────────────────
   On a touch screen the four links are tap targets: 44 px on a phone already, 40 px on a tablet / a landscape
   phone (641–980) until now. The questions plate keeps the page's phone inset (--ck-pp) by name. */
@media (max-width:980px){
  .ck-lean .ck-faq-links a{min-height:44px}
}
@media (max-width:640px){
  .ck-lean .ck-sec-faq{--fq-pad-x:var(--ck-pp,20px)}
}

/* 60-how-page.css — /tools/cookie-scanner/how-it-works/, the 2026-10-21 redesign (sec_how_*.py · 60-how-page.js).
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   His word: "how the check works page is still kinda old design and fucked and we need new design". The brief is
   ChatGPT's prompt from his pack (~/tina-redesign/scanner-design/how-redesign/), checked against his rules.
   The page now does three jobs, in order: EXPLAIN (the intro and the three-visit drawing are one first screen) ·
   PROVE (the real example report is the one bold place — 62-how-report.css) · ANSWER (the rest is quieter:
   open rows, a readable comparison, one calm plate for the law). Same canvas, type, plates, shadows and colour
   roles as the scanner page he accepted on 21 Oct; every section heading on the page's one left line.
   The compositions alternate on purpose so no two neighbours look alike: text + plate · text + list plate ·
   the big report plate · open comparison rows · open rows with drawings · text + one calm plate · two open
   columns · text + the scan field.
   ⛔ Every selector is under .ck-how-page (or body:has(main.ck-how-page)): the bundle is shared by every tool page.
   ⛔ style.css is never edited; this loads after it. Phone rules go LAST (the scanner page's trap 1).
   ⛔ No prefers-color-scheme anywhere: dark is html[data-theme="dark"] only, through the tokens.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── the page system: the scanner page's own values (up/00-system.css), under this page's names ───────── */
.ck-how-page{
  --w:1160px;                             /* the scanner page's content line */
  --hw-sec:clamp(112px,11.5vw,168px);     /* section → section */
  --hw-head:clamp(34px,3.6vw,52px);       /* a heading block → its content */
  --hw-lg:14px;                           /* heading → its lead */
  --hw-h2:clamp(30px,3.2vw,46px);
  --hw-h3:clamp(18px,1.35vw,20.5px);
  --hw-body:clamp(15.5px,1.1vw,17px);
  --hw-ring:rgba(10,10,12,.085);          /* hairline of the field and the secondary pill */
  --hw-ring-on:rgba(10,10,12,.16);
  --hw-lift:0 1px 2px rgba(10,10,12,.04),0 22px 44px -26px rgba(24,28,64,.30);
  --hw-lift-on:0 1px 2px rgba(10,10,12,.04),0 26px 52px -26px rgba(24,28,64,.36);
}
html[data-theme="dark"] .ck-how-page{
  --hw-ring:rgba(255,255,255,.11);
  --hw-ring-on:rgba(255,255,255,.2);
  --hw-lift:0 1px 2px rgba(0,0,0,.4),0 22px 44px -26px rgba(0,0,0,.8);
  --hw-lift-on:0 1px 2px rgba(0,0,0,.4),0 26px 52px -26px rgba(0,0,0,.9);
}
.ck-how-page .ck-hw-sec{padding-top:var(--hw-sec)}
.ck-how-page .ck-hw-sec[id]{scroll-margin-top:96px}   /* the floating header, when a section is jumped to */

/* every section heading: left, on the page's one line (.shead is centred site-wide) */
.ck-how-page .ck-hw-head{align-items:flex-start;text-align:left;gap:var(--hw-lg);margin-bottom:var(--hw-head)}
/* ⛔ 21 Oct his word on two headings wrapped at ~22ch: "why does text cut here" — they now run the full line and
   wrap only where the line truly ends (no ch caps on any heading of this page) */
.ck-how-page .ck-hw-head .h2{max-width:none;margin:0;font-size:var(--hw-h2);letter-spacing:-.034em;line-height:1.06;text-wrap:pretty}
.ck-how-page .ck-hw-head .lead{max-width:54ch;margin:0;text-wrap:pretty}

/* the tool's header Contact: the site's own white pill since 26 Oct (src.html) — no override here any more */
/* the last section ends on the page's rhythm, not on the footer's site-wide 216 px */
body:has(main.ck-how-page) #kontaktai{margin-top:clamp(96px,9vw,136px)}

/* ═══ A + B · the opening: the words left, the drawing right ═══════════════════════════════════════════ */
.ck-how-page .ck-hw-open{position:relative;padding-top:clamp(124px,15.5vh,176px)}
.ck-how-page .ck-hw-open-g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(40px,5vw,80px);
  align-items:center}
.ck-how-page .ck-hw-intro{min-width:0;max-width:500px}
.ck-how-page .ck-hw-open-r{min-width:0}
/* "Cookie Scanner": the tool's mark and its name, a quiet way back to it */
.ck-how-page .ck-hw-crumb{margin:0 0 clamp(20px,1.9vw,26px)}
.ck-how-page .ck-hw-crumb a{display:inline-flex;align-items:center;gap:10px;min-height:40px;margin:-4px 0;
  font-size:15.5px;font-weight:600;letter-spacing:-.008em;line-height:1.2;color:var(--ink2);transition:color .25s var(--ease)}
/* ⛔ 21 Oct his word: "this looks off badly aligned" — style.css gives every .ck-cookie display:block and an 18 px
   bottom margin (the scanner hero's mark), which lifted it 9 px above the words. Reset, and sized to the words. */
.ck-how-page .ck-hw-crumb .ck-cookie{flex:none;width:24px;height:24px;margin:0;overflow:visible}
.ck-how-page .ck-hw-crumb a:focus-visible{outline-offset:4px;border-radius:10px}
@media (hover:hover){.ck-how-page .ck-hw-crumb a:hover{color:var(--ink)}}
.ck-how-page .ck-hw-h1{max-width:none;margin:0;font-size:clamp(46px,4.75vw,64px);line-height:1.02;letter-spacing:-.04em;text-wrap:balance}
.ck-how-page .ck-hw-lead{max-width:27em;margin:clamp(18px,1.6vw,22px) 0 0;font-size:clamp(16.5px,1.25vw,18.5px);line-height:1.58;
  letter-spacing:-.006em;color:var(--ink2);text-wrap:pretty}
/* "Check your website": the scanner page's secondary pill */
.ck-how-page .ck-hw-go-w{margin:clamp(30px,2.9vw,40px) 0 0}
.ck-how-page .ck-hw-go{height:48px;gap:10px;padding:0 22px 0 24px;border:0;background:var(--panel);color:var(--ink);
  font-size:15px;font-weight:600;letter-spacing:-.006em;
  box-shadow:0 0 0 1px var(--hw-ring),0 1px 2px rgba(10,10,12,.04),0 14px 30px -22px rgba(24,28,64,.28);
  transition:box-shadow .32s var(--ease),transform .25s var(--ease),color .2s ease}
html[data-theme="dark"] .ck-how-page .ck-hw-go{box-shadow:0 0 0 1px var(--hw-ring),0 14px 30px -22px rgba(0,0,0,.8)}
.ck-how-page .ck-hw-go .ck-arr{color:var(--blue);transition:transform .35s var(--ease)}
.ck-how-page .ck-hw-go:hover{background:var(--panel);color:var(--ink);transform:translateY(-2px);
  box-shadow:0 0 0 1px var(--hw-ring-on),0 1px 2px rgba(10,10,12,.04),0 20px 38px -22px rgba(24,28,64,.34)}
.ck-how-page .ck-hw-go:hover .ck-arr{transform:translateX(3px)}
.ck-how-page .ck-hw-go:active{transform:translateY(0)}
.ck-how-page .ck-hw-go:focus-visible{border-radius:999px;outline-offset:4px}
/* the entrance, on the loader's clock (60-how-page.js): the words arrive in reading order, the drawing after */
.ck-how-page .ck-hw-intro>*{transition:opacity .75s var(--ease),transform .95s var(--ease)}
.ck-how-page .ck-hw-open.is-pre .ck-hw-intro>*{opacity:0;transform:translateY(18px)}
.ck-how-page .ck-hw-open.is-pre .ck-hw-open-r .ck-hwd{opacity:0;transform:translateY(26px) scale(.985)}
.ck-how-page .ck-hw-open-r .ck-hwd{transition:opacity .8s var(--ease) .18s,transform 1.05s var(--ease) .18s}
.ck-how-page .ck-hw-intro>:nth-child(2){transition-delay:.07s}
.ck-how-page .ck-hw-intro>:nth-child(3){transition-delay:.14s}
.ck-how-page .ck-hw-intro>:nth-child(4){transition-delay:.21s}
.ck-how-page .ck-hw-open.is-pre .ck-cookie path{stroke-dasharray:1 1;stroke-dashoffset:1}
.ck-how-page .ck-hw-open.is-in .ck-cookie path{animation:ckHwDraw 1.2s cubic-bezier(.65,0,.35,1) .1s both}
.ck-how-page .ck-hw-open.is-in .ck-cookie circle{transform-box:fill-box;transform-origin:50% 50%;animation:ckHwChip .6s cubic-bezier(.34,1.56,.64,1) both}
.ck-how-page .ck-hw-open.is-in .ck-cookie circle:nth-of-type(1){animation-delay:.7s}
.ck-how-page .ck-hw-open.is-in .ck-cookie circle:nth-of-type(2){animation-delay:.8s}
.ck-how-page .ck-hw-open.is-in .ck-cookie circle:nth-of-type(3){animation-delay:.9s}
.ck-how-page .ck-hw-open.is-in .ck-cookie circle:nth-of-type(4){animation-delay:1s}
@keyframes ckHwDraw{from{stroke-dasharray:1 1;stroke-dashoffset:1}to{stroke-dasharray:1 1;stroke-dashoffset:0}}
@keyframes ckHwChip{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}

/* ═══ C · the checks: heading + the page's section links left, the checks as one list right ═════════════ */
/* ⛔ 21 Oct his word on the checks and the law: "need to vertically center" — the words sit in the middle of the plate */
.ck-how-page .ck-hw-split{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);column-gap:clamp(40px,5.5vw,96px);
  align-items:center}
.ck-how-page .ck-hw-side{min-width:0}
.ck-how-page .ck-hw-side .ck-hw-head{margin-bottom:0}
/* the links: the scanner page's FAQ links (his "all the same" look), a down arrow because they stay on this page */
.ck-how-page .ck-hw-toc{margin-top:clamp(22px,2.1vw,30px)}
.ck-how-page .ck-hw-toc ul{margin:0;padding:0;list-style:none}
.ck-how-page .ck-hw-toc li{padding:9px 0;max-width:30ch}
/* inline, so a link that wraps keeps its arrow right after its last word (a flex box pushed it to the far edge) */
.ck-how-page .ck-hw-toc a{display:inline;padding:9px 0;font-size:clamp(15.5px,1.1vw,16.5px);font-weight:550;letter-spacing:-.008em;
  line-height:1.4;color:var(--ink2);transition:color .25s var(--ease)}
.ck-how-page .ck-hw-toc .ck-arr{display:inline-block;width:15px;height:15px;margin:0 0 0 9px;vertical-align:-2px;color:var(--ac-blue);
  transition:transform .35s var(--ease)}
.ck-how-page .ck-hw-toc a:focus-visible{outline-offset:4px;border-radius:8px}
@media (hover:hover){
  .ck-how-page .ck-hw-toc a:hover{color:var(--ink)}
  .ck-how-page .ck-hw-toc a:hover .ck-arr{transform:translateY(3px)}
}
/* the list plate */
.ck-how-page .ck-hw-cl{--ci-art:clamp(52px,4.4vw,64px);--ci-gap:clamp(20px,2.2vw,30px);
  margin:0;padding:clamp(6px,.8vw,10px) clamp(26px,3.2vw,46px);list-style:none;
  border-radius:var(--r-panel);background:var(--panel);box-shadow:var(--sh-panel)}
.ck-how-page .ck-hw-ci{display:grid;grid-template-columns:var(--ci-art) minmax(0,1fr);column-gap:var(--ci-gap);row-gap:7px;
  align-items:start;padding:clamp(22px,2.2vw,30px) 0}
.ck-how-page .ck-hw-ci+.ck-hw-ci{border-top:1px solid var(--line)}
.ck-how-page .ck-hw-ci-art{grid-row:1 / span 2;display:block;color:var(--cx)}
/* the 64×48 box has air around the window: pull the drawing up by it so the window's top line meets the title */
.ck-how-page .ck-hw-cx-i{display:block;width:var(--ci-art);height:auto;margin-top:calc(var(--ci-art) * -.105);overflow:visible}
.ck-how-page .ck-hw-cx-i>*{vector-effect:non-scaling-stroke;stroke-width:2.1px}
.ck-how-page .ck-hw-cx-i>circle,.ck-how-page .ck-hw-cx-i>rect{fill:var(--cx-bg)}
.ck-how-page .ck-hw-c-amber .ck-hw-cx-i>circle:nth-of-type(2){fill:currentColor;stroke-width:1.2px}
.ck-how-page .ck-hw-c-green .ck-hw-cx-i>path:nth-of-type(2){fill:var(--panel)}
.ck-how-page .ck-hw-c-blue .ck-hw-cx-i>rect:nth-of-type(2){fill:var(--panel)}
.ck-how-page .ck-hw-c-blue{--cx:var(--ac-blue);--cx-bg:var(--ac-blue-bg)}
.ck-how-page .ck-hw-c-amber{--cx:var(--ac-amber);--cx-bg:var(--ac-amber-bg)}
.ck-how-page .ck-hw-c-green{--cx:var(--ac-green);--cx-bg:var(--ac-green-bg)}
.ck-how-page .ck-hw-c-red{--cx:var(--ac-red);--cx-bg:var(--ac-red-bg)}
.ck-how-page .ck-hw-ci-h{margin:0;font-size:var(--hw-h3);font-weight:650;letter-spacing:-.018em;line-height:1.3;color:var(--ink)}
.ck-how-page .ck-hw-ci-p{max-width:56ch;margin:0;font-size:var(--hw-body);line-height:1.6;color:var(--ink2);text-wrap:pretty}
/* the closing sentence. ⛔ 21 Oct his word: "this part is most important, yet it's the smallest" — it reads at the titles'
   size now, its two checks set heavier, with the house 'count' drawing in the brand gradient (the "and more" row) */
.ck-how-page .ck-hw-ci--also{--cx-bg:var(--ac-blue-bg);align-items:center}
.ck-how-page .ck-hw-ci--also .ck-hw-ci-art{grid-row:auto}
.ck-how-page .ck-hw-ci--also .ck-hw-cx-i{margin-top:0}
.ck-how-page .ck-hw-ci-also{max-width:50ch;margin:0;font-size:var(--hw-h3);line-height:1.48;letter-spacing:-.014em;color:var(--ink2);text-wrap:pretty}
.ck-how-page .ck-hw-ci-also b{font-weight:650;color:var(--ink)}
.ck-how-page .ck-hw-ci--also .ck-hw-cx-i>path{transform-box:fill-box;transform-origin:50% 100%}
.ck-how-page .ck-hw-ci--also.is-play .ck-hw-cx-i>path:nth-of-type(3){animation:ckHwBars .8s cubic-bezier(.34,1.56,.64,1) .05s both}
.ck-how-page .ck-hw-ci--also.is-play .ck-hw-cx-i>path:nth-of-type(4){animation:ckHwBars .8s cubic-bezier(.34,1.56,.64,1) .17s both}
.ck-how-page .ck-hw-ci--also.is-play .ck-hw-cx-i>path:nth-of-type(5){animation:ckHwBars .8s cubic-bezier(.34,1.56,.64,1) .29s both}
@keyframes ckHwBars{0%{transform:scaleY(.25)}100%{transform:scaleY(1)}}
/* the act (60-how-page.js adds .is-play, once, in turn): the moving parts are invisible unless they move */
.ck-how-page .ck-hw-cx-fx>*{opacity:0}
.ck-how-page .ck-hw-cx-p{stroke:currentColor;stroke-width:3.4px;stroke-dasharray:.5 300;stroke-dashoffset:0}
.ck-how-page .ck-hw-cx-tr{stroke:currentColor;stroke-width:1.9px;stroke-dasharray:26 300;stroke-dashoffset:26}
.ck-how-page .ck-hw-cx-ping,.ck-how-page .ck-hw-cx-rip{fill:none;stroke:currentColor;stroke-width:1.4px;transform-box:fill-box;
  transform-origin:50% 50%;vector-effect:non-scaling-stroke}
.ck-how-page .ck-hw-cx-i>path,.ck-how-page .ck-hw-cx-i>circle{transform-box:fill-box;transform-origin:50% 50%}
.ck-how-page .ck-hw-c-blue.is-play .ck-hw-cx-rip{animation:ckHwRip .75s var(--ease) .1s both}
.ck-how-page .ck-hw-c-blue.is-play .ck-hw-cx-i>path:nth-of-type(3){animation:ckHwClick .42s var(--ease) both}
.ck-how-page .ck-hw-c-amber.is-play .ck-hw-cx-p{animation:ckHwRun 1s cubic-bezier(.55,.05,.35,1) .05s both}
.ck-how-page .ck-hw-c-amber.is-play .ck-hw-cx-tr{animation:ckHwTrail 1s cubic-bezier(.55,.05,.35,1) .05s both}
.ck-how-page .ck-hw-c-amber.is-play .ck-hw-cx-ping{animation:ckHwPing .9s var(--ease) .95s both}
.ck-how-page .ck-hw-c-amber.is-play .ck-hw-cx-i>circle:nth-of-type(1){animation:ckHwTake .6s var(--ease) .95s both}
.ck-how-page .ck-hw-c-green.is-play .ck-hw-cx-i>path:nth-of-type(2){transform-origin:0 0;animation:ckHwClick .42s var(--ease) both}
.ck-how-page .ck-hw-c-green.is-play .ck-hw-cx-rip{animation:ckHwRip .7s var(--ease) .1s both}
.ck-how-page .ck-hw-c-green.is-play .ck-hw-cx-p{animation:ckHwRun .85s cubic-bezier(.55,.05,.35,1) .42s both}
.ck-how-page .ck-hw-c-green.is-play .ck-hw-cx-tr{animation:ckHwTrail .85s cubic-bezier(.55,.05,.35,1) .42s both}
.ck-how-page .ck-hw-c-green.is-play .ck-hw-cx-ping{animation:ckHwPing .9s var(--ease) 1.2s both}
.ck-how-page .ck-hw-c-green.is-play .ck-hw-cx-i>circle{animation:ckHwTake .6s var(--ease) 1.2s both}
.ck-how-page .ck-hw-c-red.is-play .ck-hw-cx-p{animation:ckHwStop .8s cubic-bezier(.3,.6,.35,1) .05s both}
.ck-how-page .ck-hw-c-red.is-play .ck-hw-cx-tr{animation:ckHwStopTr .8s cubic-bezier(.3,.6,.35,1) .05s both}
.ck-how-page .ck-hw-c-red.is-play .ck-hw-cx-i>path:nth-of-type(4){animation:ckHwBar .55s var(--ease) .62s both}
@keyframes ckHwRun{0%{opacity:0;stroke-dashoffset:0}12%{opacity:1}86%{opacity:1}100%{opacity:0;stroke-dashoffset:-100}}
@keyframes ckHwTrail{0%{opacity:0;stroke-dashoffset:26}15%{opacity:.3}80%{opacity:.3}100%{opacity:0;stroke-dashoffset:-74}}
@keyframes ckHwStop{0%{opacity:0;stroke-dashoffset:0}12%{opacity:1}70%{opacity:1;stroke-dashoffset:-100}100%{opacity:0;stroke-dashoffset:-100}}
@keyframes ckHwStopTr{0%{opacity:0;stroke-dashoffset:26}15%{opacity:.35}70%{opacity:.3;stroke-dashoffset:-74}100%{opacity:0;stroke-dashoffset:-74}}
@keyframes ckHwPing{0%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(2.3)}}
@keyframes ckHwRip{0%{opacity:.6;transform:scale(.4)}100%{opacity:0;transform:scale(2.4)}}
@keyframes ckHwTake{0%,100%{transform:scale(1)}40%{transform:scale(1.22)}}
@keyframes ckHwClick{0%,100%{transform:scale(1)}40%{transform:scale(.82)}}
@keyframes ckHwBar{0%,100%{transform:none}30%{transform:translateX(-1.2px) scaleY(1.12)}60%{transform:translateX(.6px)}}
/* the reveal: the plate rises (app.js), then the rows settle in turn */
.ck.ck-go.ck-how-page .ck-hw-cl[data-reveal]{transform:translateY(30px)}
.ck.ck-go.ck-how-page .ck-hw-cl[data-reveal].ck-in{transform:none}
.ck.ck-go.ck-how-page .ck-hw-cl .ck-hw-ci{transition:opacity .7s var(--ease),transform .9s var(--ease)}
.ck.ck-go.ck-how-page .ck-hw-cl:not(.ck-in) .ck-hw-ci{opacity:0;transform:translateY(10px)}
.ck.ck-go.ck-how-page .ck-hw-cl .ck-hw-ci:nth-child(2){transition-delay:.08s}
.ck.ck-go.ck-how-page .ck-hw-cl .ck-hw-ci:nth-child(3){transition-delay:.16s}
.ck.ck-go.ck-how-page .ck-hw-cl .ck-hw-ci:nth-child(4){transition-delay:.24s}
.ck.ck-go.ck-how-page .ck-hw-cl .ck-hw-ci:nth-child(5){transition-delay:.32s}

/* ═══ E · how common: a readable comparison on the canvas, no plate ═══════════════════════════════════════ */
/* one size per website for both rows (--pw), so 3 and 10 compare honestly at every width */
.ck-how-page .ck-hw-stats{container-type:inline-size;--pw:min(44px,3.7cqi)}
.ck-how-page .ck-hw-stat{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,4.3fr) minmax(0,5fr);
  column-gap:clamp(28px,4vw,64px);align-items:center;padding:clamp(30px,3.2vw,46px) 0}
.ck-how-page .ck-hw-stat:first-child{padding-top:clamp(4px,.6vw,10px)}
.ck-how-page .ck-hw-stat+.ck-hw-stat{border-top:1px solid var(--line)}
.ck-how-page .ck-hw-stat-n{margin:0;font-size:clamp(54px,6.4vw,94px);font-weight:700;line-height:.98;letter-spacing:-.05em;white-space:nowrap}
.ck-how-page .ck-hw-stat-n .grad{padding-inline:.06em;margin-inline:-.06em}
.ck-how-page .ck-hw-stat-p{max-width:26ch;margin:0;font-size:clamp(18px,1.55vw,22px);font-weight:600;line-height:1.38;
  letter-spacing:-.017em;color:var(--ink);text-wrap:pretty}
.ck-how-page .ck-hw-stat-s{margin:10px 0 0;font-size:15px;font-weight:500;line-height:1.4;color:var(--ac-grey-ink);
  font-variant-numeric:tabular-nums}
.ck-how-page .ck-hw-stat-art{min-width:0;justify-self:start}
/* the websites: one unit (--pk) for both rows, so 3 and 10 compare honestly */
.ck-how-page .ck-hw-pict{display:block;width:calc(var(--n) * var(--pw));max-width:100%;height:auto;overflow:visible}
.ck-how-page .ck-hw-pi-w{fill:var(--panel);stroke:var(--ck-u3);stroke-width:1.7}
.ck-how-page .ck-hw-pi-b{fill:none;stroke:var(--ck-u3);stroke-width:1.7}
.ck-how-page .ck-hw-pi-l{fill:none;stroke:var(--ac-red);stroke-width:2;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:0}
.ck-how-page .ck-hw-pi-n{fill:var(--ac-red-bg);stroke:var(--ac-red);stroke-width:1.8;transform-box:fill-box;transform-origin:50% 50%}
.ck-how-page .ck-hw-pi.is-no .ck-hw-pi-w{stroke:color-mix(in srgb,var(--ac-red) 55%,var(--ck-u3))}
.ck-how-page .ck-hw-pi.is-no .ck-hw-pi-b{stroke:color-mix(in srgb,var(--ac-red) 55%,var(--ck-u3))}
/* the reveal: the figure arrives, then each tracked site sends its line out, one after another */
.ck.ck-go.ck-how-page .ck-hw-stat .ck-hw-pi-l{transition:stroke-dashoffset .7s var(--ease);transition-delay:calc(.35s + var(--i) * .07s)}
.ck.ck-go.ck-how-page .ck-hw-stat .ck-hw-pi-n{transition:opacity .4s var(--ease),transform .5s cubic-bezier(.34,1.56,.64,1);
  transition-delay:calc(.75s + var(--i) * .07s)}
.ck.ck-go.ck-how-page .ck-hw-stat:not(.ck-in) .ck-hw-pi-l{stroke-dashoffset:1}
.ck.ck-go.ck-how-page .ck-hw-stat:not(.ck-in) .ck-hw-pi-n{opacity:0;transform:scale(.4)}
.ck-how-page .ck-hw-caveat{max-width:72ch;margin:clamp(14px,1.4vw,20px) 0 0;font-size:clamp(15px,1.05vw,16px);line-height:1.62;
  color:var(--ink2);text-wrap:pretty}

/* ═══ F · why banners fail: open rows with the failure drawn, on shared columns ══════════════════════════ */
.ck-how-page .ck-hw-fails{--fa:clamp(66px,5.6vw,84px);margin:0;padding:0;list-style:none}
.ck-how-page .ck-hw-fail{display:grid;grid-template-columns:var(--fa) minmax(0,4.2fr) minmax(0,6fr);column-gap:clamp(24px,3.2vw,52px);
  align-items:start;padding:clamp(26px,2.6vw,36px) 0}
.ck-how-page .ck-hw-fail:first-child{padding-top:clamp(4px,.6vw,10px)}
.ck-how-page .ck-hw-fail+.ck-hw-fail{border-top:1px solid var(--line)}
.ck-how-page .ck-hw-fail-art{display:block;color:var(--ac-red)}
.ck-how-page .ck-hw-fail-i{display:block;width:var(--fa);height:auto;margin-top:calc(var(--fa) * -.11);overflow:visible}
.ck-how-page .ck-hw-fail-i>*{vector-effect:non-scaling-stroke;stroke-width:2.1px}
.ck-how-page .ck-hw-fail-i .s{stroke:var(--ac-grey);stroke-opacity:.85}
.ck-how-page .ck-hw-fail-i rect.s{fill:var(--panel)}
.ck-how-page .ck-hw-fail-i .a{stroke:var(--ac-red)}
.ck-how-page .ck-hw-fail-i .nb{fill:var(--ac-red-bg)}
.ck-how-page .ck-hw-fail-i .n{fill:var(--ac-red-bg);stroke:var(--ac-red)}
.ck-how-page .ck-hw-fail-i .g{fill:var(--panel);stroke:var(--ac-grey);stroke-opacity:.85}
.ck-how-page .ck-hw-fail-i .k{fill:var(--panel);stroke:var(--ink2)}
.ck-how-page .ck-hw-fail-h{max-width:none;margin:0;font-size:clamp(18.5px,1.5vw,22px);font-weight:650;letter-spacing:-.02em;line-height:1.3;
  color:var(--ink);text-wrap:balance}
.ck-how-page .ck-hw-fail-p{max-width:52ch;margin:0;font-size:var(--hw-body);line-height:1.62;color:var(--ink2);text-wrap:pretty}
/* the act: once as the row arrives (60-how-page.js adds .is-play), again on hover */
.ck-how-page .ck-hw-fail-i .fx>*{opacity:0;fill:none}
.ck-how-page .ck-hw-fail-i .p{stroke:var(--ac-red);stroke-width:3.4px;stroke-dasharray:.5 300;stroke-dashoffset:0}
.ck-how-page .ck-hw-fail-i .p-stop{stroke:var(--ac-grey)}
.ck-how-page .ck-hw-fail-i .rip{stroke:var(--ink2);stroke-width:1.4px;transform-box:fill-box;transform-origin:50% 50%}
.ck-how-page .ck-hw-fail-i .nb,.ck-how-page .ck-hw-fail-i .n,.ck-how-page .ck-hw-fail-i .k{transform-box:fill-box;transform-origin:50% 50%}
.ck-how-page .ck-hw-fail.is-play .p{animation:ckHwRun 1s cubic-bezier(.55,.05,.35,1) .1s both}
.ck-how-page .ck-hw-fail.is-play .p-stop{animation:ckHwStop .8s cubic-bezier(.3,.6,.35,1) .1s both}
.ck-how-page .ck-hw-fail.is-play .p-lost{animation:ckHwLost 1s cubic-bezier(.3,.6,.35,1) .45s both}
.ck-how-page .ck-hw-fail.is-play .n{animation:ckHwTake .6s var(--ease) 1.05s both}
.ck-how-page .ck-hw-fail.is-play .rip{animation:ckHwRip .7s var(--ease) .05s both}
.ck-how-page .ck-hw-fail.is-play .k{animation:ckHwClick .42s var(--ease) both}
.ck-how-page .ck-hw-fail.is-play .nb{animation:ckHwNew .7s cubic-bezier(.34,1.56,.64,1) both}
@keyframes ckHwLost{0%{opacity:0;stroke-dashoffset:0}12%{opacity:1}38%{opacity:1}52%{opacity:0;stroke-dashoffset:-48}100%{opacity:0;stroke-dashoffset:-48}}
@keyframes ckHwNew{0%{opacity:0;transform:scale(.2)}60%{opacity:1}100%{opacity:1;transform:scale(1)}}

/* ═══ G · the law: heading left, the three topics stacked on one calm plate ═════════════════════════════ */
.ck-how-page .ck-hw-split--law .ck-hw-head{margin-bottom:0}
.ck-how-page .ck-hw-lawl{margin:0;padding:clamp(6px,.8vw,10px) clamp(26px,3.2vw,46px);list-style:none;
  border-radius:var(--r-panel);background:var(--panel);box-shadow:var(--sh-panel)}
/* ⛔ 21 Oct his word: "here use flags and icons so its prettier" — each topic leads with its mark (sec_how_law.py) */
.ck-how-page .ck-hw-lawl{--lm:clamp(52px,4.4vw,62px)}
.ck-how-page .ck-hw-lawi{display:grid;grid-template-columns:var(--lm) minmax(0,1fr);column-gap:clamp(16px,1.8vw,24px);row-gap:8px;
  align-items:start;padding:clamp(22px,2.2vw,30px) 0}
.ck-how-page .ck-hw-lawi+.ck-hw-lawi{border-top:1px solid var(--line)}
.ck-how-page .ck-hw-lawi-m{grid-row:1 / span 2;display:flex;align-items:center;height:calc(var(--hw-h3) * 1.3)}
.ck-how-page .ck-hw-lawi-h{margin:0;font-size:var(--hw-h3);font-weight:650;letter-spacing:-.018em;line-height:1.3;color:var(--ink)}
.ck-how-page .ck-hw-lawi-p{max-width:62ch;margin:0;font-size:var(--hw-body);line-height:1.65;color:var(--ink2);text-wrap:pretty}
/* the site's round flags (the language switcher's look): a hairline ring, a soft drop; two of them overlap like a pair */
.ck-how-page .ck-hw-flag{position:relative;display:block;flex:none;width:28px;height:28px;border-radius:50%;overflow:hidden;
  box-shadow:0 2px 6px -3px rgba(10,10,12,.35)}
.ck-how-page .ck-hw-flag::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(10,10,12,.1)}
.ck-how-page .ck-hw-flag svg{display:block;width:100%;height:100%}
.ck-how-page .ck-hw-flag+.ck-hw-flag{margin-left:-9px;box-shadow:0 0 0 2px var(--panel),0 2px 6px -3px rgba(10,10,12,.35)}
html[data-theme="dark"] .ck-how-page .ck-hw-flag::after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.ck-how-page .ck-hw-lawi-i{display:block;width:46px;height:auto;overflow:visible;color:var(--ac-blue)}
.ck-how-page .ck-hw-lawi-i>*{vector-effect:non-scaling-stroke;stroke-width:2.1px}
.ck-how-page .ck-hw-lawi-i>rect,.ck-how-page .ck-hw-lawi-i>circle{fill:var(--ac-blue-bg)}
.ck-how-page .ck-hw-lawi-i>path:nth-of-type(2){fill:var(--panel)}
.ck.ck-go.ck-how-page .ck-hw-lawl[data-reveal]{transform:translateY(30px)}
.ck.ck-go.ck-how-page .ck-hw-lawl[data-reveal].ck-in{transform:none}

/* ═══ H · where and how often: two open columns, one hairline between ═══════════════════════════════════ */
.ck-how-page .ck-hw-two{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(48px,6vw,104px)}
.ck-how-page .ck-hw-two::before{content:"";position:absolute;left:50%;top:4px;bottom:4px;width:1px;background:var(--line);transform-origin:50% 0}
.ck-how-page .ck-hw-twoi{min-width:0}
.ck-how-page .ck-hw-twoi-h{margin:0;font-size:var(--hw-h3);font-weight:650;letter-spacing:-.018em;line-height:1.3;color:var(--ink)}
.ck-how-page .ck-hw-twoi-p{max-width:50ch;margin:10px 0 0;font-size:var(--hw-body);line-height:1.65;color:var(--ink2);text-wrap:pretty}
.ck.ck-go.ck-how-page .ck-hw-two::before{transition:transform 1.1s var(--ease) .3s}
.ck.ck-go.ck-how-page .ck-hw-two:not(.ck-in)::before{transform:scaleY(0)}

/* ═══ I · the close: one white plate — the heading left, the real scan field right ═══════════════════════════
   ⛔ 21 Oct his word: "this section is very important yet it becomes almost invisible… dont make it dark since footer is
   dark… need to make it pop". So it is the page's second floating object (the report is the first): a white plate on
   the float shadow, a bigger heading with the brand gradient on "your website", the field's gradient ring shown at rest
   (the gradient belongs to the primary action), and the facts centred under the field ("horizontally center"). */
.ck-how-page .ck-hw-final-p{position:relative;padding:clamp(40px,5.2vw,80px) clamp(28px,5vw,80px);border-radius:var(--r-panel);
  background:var(--panel);box-shadow:var(--sh-float)}
.ck.ck-go.ck-how-page .ck-hw-final-p[data-reveal]{transform:translateY(34px) scale(.992)}
.ck.ck-go.ck-how-page .ck-hw-final-p[data-reveal].ck-in{transform:none}
.ck-how-page .ck-hw-final-g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(40px,5vw,88px);align-items:center}
.ck-how-page .ck-hw-final-h{max-width:none;margin:0;font-size:clamp(36px,4.3vw,62px);letter-spacing:-.04em;line-height:1.03;text-wrap:balance}
.ck-how-page .ck-hw-final-f{min-width:0}
/* the field: finished like the scanner page's hero field (10-hero.css), on this page's names */
.ck-how-page .ck-hw-scan{max-width:none;margin:0}
.ck-how-page .ck-hw-scan .ck-scan-f{position:relative;height:68px;gap:0;padding:7px 7px 7px 28px;border:0;border-radius:999px;
  background:var(--panel);box-shadow:0 0 0 1px var(--hw-ring),var(--hw-lift);transition:box-shadow .32s var(--ease)}
.ck-how-page .ck-hw-scan .ck-scan-f:hover{box-shadow:0 0 0 1px var(--hw-ring-on),var(--hw-lift-on)}
.ck-how-page .ck-hw-scan .ck-scan-f::before{content:"";position:absolute;inset:-1.5px;z-index:0;border-radius:inherit;
  padding:1.5px;background:var(--grad);pointer-events:none;opacity:0;transition:opacity .32s var(--ease);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.ck-how-page .ck-hw-scan .ck-scan-f>*{position:relative;z-index:1}
.ck-how-page .ck-hw-scan .ck-scan-f:focus-within::before{opacity:1}
.ck-how-page .ck-hw-final .ck-hw-scan .ck-scan-f{box-shadow:var(--hw-lift-on)}
.ck-how-page .ck-hw-final .ck-hw-scan .ck-scan-f::before{opacity:.6;transition:opacity .5s var(--ease) .5s}
.ck.ck-go.ck-how-page .ck-hw-final-p:not(.ck-in) .ck-hw-scan .ck-scan-f::before{opacity:0}
.ck-how-page .ck-hw-final .ck-hw-scan .ck-scan-f:focus-within::before{opacity:1;transition-delay:0s}
.ck-how-page .ck-hw-scan .ck-scan-f:focus-within{box-shadow:0 0 0 6px var(--ring-soft),0 22px 44px -26px rgba(47,107,255,.42)}
.ck-how-page .ck-hw-scan .ck-scan-i{height:100%;font-size:17px;font-weight:500;letter-spacing:-.008em;color:var(--ink)}
.ck-how-page .ck-hw-scan .ck-scan-i::placeholder{color:var(--ink3);font-weight:450;opacity:1;transition:opacity .3s ease}
.ck-how-page .ck-hw-scan .ck-scan-i:focus::placeholder{opacity:.55}
.ck-how-page .ck-hw-scan .ck-scan-b{height:54px;gap:10px;padding:0 24px 0 26px;font-size:15.5px;font-weight:600;letter-spacing:-.006em;
  box-shadow:var(--sh-btn);transition:background .2s ease,box-shadow .32s var(--ease),transform .18s var(--ease)}
.ck-how-page .ck-hw-scan .ck-scan-b:hover{transform:none;background:var(--blueH);box-shadow:var(--sh-btn-on)}
.ck-how-page .ck-hw-scan .ck-scan-b:active{transform:scale(.975);box-shadow:var(--sh-btn)}
.ck-how-page .ck-hw-scan .ck-scan-b .ck-arr{transition:transform .35s var(--ease)}
.ck-how-page .ck-hw-scan .ck-scan-b:hover .ck-arr{transform:translateX(3px)}
.ck-how-page .ck-hw-scan .ck-scan-f:has(.ck-scan-i:not(:placeholder-shown)) .ck-scan-b{box-shadow:var(--sh-btn-on)}
.ck-how-page .ck-hw-scan .ck-scan-f::after{left:40px;right:40px;bottom:0}
.ck-how-page .ck-hw-scan.is-bad .ck-scan-f{box-shadow:0 0 0 1.5px var(--ac-red),0 0 0 6px var(--ac-red-bg),var(--hw-lift)}
.ck-how-page .ck-hw-scan.is-bad .ck-scan-f::before{opacity:0}
.ck-how-page .ck-hw-scan .ck-scan-b:focus-visible{border-radius:999px;outline-offset:4px}
.ck-how-page .ck-hw-scan .ck-scan-m{justify-content:flex-start;margin:13px 0 0 4px;font-size:14.5px;color:var(--ink)}
.ck-how-page .ck-hw-scan.is-bad .ck-scan-m::before{color:var(--ac-red)}
.ck-how-page .ck-hw-scan .ck-ts{justify-content:flex-start}
/* the three facts: one calm line, a small green tick on a pale green disc each (the scanner page's 20 Oct look) */
.ck-how-page .ck-hw-facts{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 26px;margin:20px 0 0;padding:0;list-style:none;
  font-size:15.5px;font-weight:550;line-height:1.4;letter-spacing:-.004em;color:var(--ink)}
.ck-how-page .ck-hw-facts li{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.ck-how-page .ck-hw-facts .ck-tk{flex:none;box-sizing:border-box;width:22px;height:22px;padding:5px;border-radius:50%;
  background:var(--ac-green-bg);color:var(--ac-green-ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ac-green) 22%,transparent)}

/* ═══ J · the phone sticky: it waits until the visitor has answered the cookie bar (the scanner page's rule) ═ */
body:has(.cbar.on) main.ck-how-page .ck-sticky{opacity:0;pointer-events:none;visibility:hidden;transform:translate(-50%,150%);
  transition:transform .5s var(--ease),opacity .3s ease,visibility 0s linear .5s}

/* ── motion off: everything final, nothing moves ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .ck-how-page .ck-hw-intro>*,.ck-how-page .ck-hw-open-r .ck-hwd,.ck-how-page .ck-cookie *,
  .ck-how-page .ck-hw-cl *,.ck-how-page .ck-hw-pict *,.ck-how-page .ck-hw-fail-i *,.ck-how-page .ck-hw-two::before{
    animation:none!important;transition:none!important}
  .ck-how-page .ck-hw-cx-fx>*,.ck-how-page .ck-hw-fail-i .fx>*{opacity:0!important}
}

/* ═══ tablet: one column; the opening's drawing comes under the words, on the same left line ════════════ */
@media (max-width:980px){
  .ck-how-page .ck-hw-open{padding-top:clamp(108px,15vw,132px)}
  .ck-how-page .ck-hw-open-g{grid-template-columns:minmax(0,1fr);row-gap:clamp(44px,7vw,64px)}
  .ck-how-page .ck-hw-intro{max-width:600px}
  .ck-how-page .ck-hw-open-r{max-width:680px}
  .ck-how-page .ck-hw-h1{font-size:clamp(40px,7vw,52px)}
  .ck-how-page .ck-hw-split,.ck-how-page .ck-hw-final-g{grid-template-columns:minmax(0,1fr);row-gap:var(--hw-head)}
  .ck-how-page .ck-hw-final-h{max-width:none}
  .ck-how-page .ck-hw-final-f{max-width:620px}
  .ck-how-page .ck-hw-stat{grid-template-columns:minmax(0,auto) minmax(0,1fr);column-gap:clamp(24px,4vw,40px);row-gap:20px}
  .ck-how-page .ck-hw-stat-n{grid-row:1}
  .ck-how-page .ck-hw-stat-art{grid-column:1 / -1;justify-self:start}
  .ck-how-page .ck-hw-fail{grid-template-columns:var(--fa) minmax(0,1fr);row-gap:10px}
  .ck-how-page .ck-hw-fail-art{grid-row:1 / span 2}
  .ck-how-page .ck-hw-fail-h{max-width:30ch}
}

/* ═══ phone — LAST on purpose (trap 1): designed for 320–430, not shrunk ═══════════════════════════════ */
@media (max-width:640px){
  .ck-how-page{--hw-sec:88px;--hw-head:28px;--hw-lg:12px}
  .ck-how-page .ck-hw-sec[id]{scroll-margin-top:84px}
  .ck-how-page .ck-hw-head .h2{font-size:clamp(28px,8vw,32px);line-height:1.08}
  .ck-how-page .ck-hw-head .lead{font-size:16px;line-height:1.58}
  .ck-how-page .ck-hw-open{padding-top:92px}
  .ck-how-page .ck-hw-open-g{row-gap:36px}
  .ck-how-page .ck-hw-crumb{margin-bottom:14px}
  .ck-how-page .ck-hw-crumb a{gap:9px;font-size:14.5px}
  .ck-how-page .ck-hw-crumb .ck-cookie{width:26px;height:26px}
  .ck-how-page .ck-hw-h1{font-size:clamp(36px,10.4vw,42px);line-height:1.04}
  .ck-how-page .ck-hw-lead{margin-top:14px;font-size:16.5px;line-height:1.56}
  .ck-how-page .ck-hw-go-w{margin-top:24px}
  .ck-how-page .ck-hw-go{height:46px;padding:0 20px 0 22px;font-size:14.5px}
  /* C: the links, the list — the drawings stay beside the start of each row, the words keep the width */
  .ck-how-page .ck-hw-toc{margin-top:22px}
  .ck-how-page .ck-hw-toc li{padding:11px 0}
  .ck-how-page .ck-hw-toc a{padding:11px 0;font-size:15.5px}
  .ck-how-page .ck-hw-cl{--ci-art:46px;--ci-gap:16px;padding:2px 20px;border-radius:24px}
  .ck-how-page .ck-hw-ci{padding:20px 0}
  .ck-how-page .ck-hw-ci-h{font-size:17.5px}
  .ck-how-page .ck-hw-ci-p{font-size:15.5px;line-height:1.58}
  .ck-how-page .ck-hw-ci--also{padding-left:0}
  /* E: each figure above its sentence and count, the sites under them at the same unit */
  .ck-how-page .ck-hw-stats{--pw:min(34px,8.4cqi)}
  .ck-how-page .ck-hw-stat{grid-template-columns:minmax(0,1fr);row-gap:14px;padding:26px 0}
  .ck-how-page .ck-hw-stat-n{font-size:clamp(52px,15vw,64px)}
  .ck-how-page .ck-hw-stat-p{font-size:18px}
  .ck-how-page .ck-hw-stat-s{margin-top:8px;font-size:14.5px}
  .ck-how-page .ck-hw-stat-art{grid-column:1;margin-top:6px}
  .ck-how-page .ck-hw-caveat{font-size:15px}
  /* F: the drawing beside the title, the explanation right under it */
  .ck-how-page .ck-hw-fails{--fa:52px}
  .ck-how-page .ck-hw-fail{column-gap:16px;row-gap:8px;padding:22px 0}
  .ck-how-page .ck-hw-fail-art{grid-row:1}
  .ck-how-page .ck-hw-fail-h{align-self:center;font-size:17.5px}
  .ck-how-page .ck-hw-fail-p{grid-column:1 / -1;font-size:15.5px;line-height:1.6}
  /* G: one column, the plate keeps a reading width */
  .ck-how-page .ck-hw-lawl{padding:2px 20px;border-radius:24px}
  .ck-how-page .ck-hw-lawi{padding:20px 0}
  .ck-how-page .ck-hw-lawi-h{font-size:17.5px}
  .ck-how-page .ck-hw-lawi-p{font-size:15.5px;line-height:1.6}
  /* H: the two topics stack, the hairline lies down between them */
  .ck-how-page .ck-hw-two{grid-template-columns:minmax(0,1fr);row-gap:44px}
  .ck-how-page .ck-hw-two::before{left:0;right:0;top:calc(50% - 0px);bottom:auto;width:auto;height:1px;transform-origin:0 50%}
  .ck.ck-go.ck-how-page .ck-hw-two:not(.ck-in)::before{transform:scaleX(0)}
  .ck-how-page .ck-hw-twoi-h{font-size:17.5px}
  .ck-how-page .ck-hw-twoi-p{font-size:15.5px;line-height:1.6}
  /* I: heading, field, button and facts stacked; the field never too narrow for the address */
  .ck-how-page .ck-hw-scan .ck-scan-f{height:60px;padding:5px 5px 5px 20px}
  .ck-how-page .ck-hw-scan .ck-scan-i{font-size:16px}
  .ck-how-page .ck-hw-scan .ck-scan-b{height:50px;gap:7px;padding:0 17px 0 19px;font-size:15px}
  .ck-how-page .ck-hw-scan .ck-scan-f::after{left:28px;right:28px}
  .ck-how-page .ck-hw-facts{gap:8px 16px;margin-top:16px;font-size:14.5px}
  .ck-how-page .ck-hw-facts li{gap:7px}
  .ck-how-page .ck-hw-facts .ck-tk{width:20px;height:20px;padding:4.5px}
  body:has(main.ck-how-page) #kontaktai{margin-top:80px}
  .ck-how-page .ck-hw-crumb .ck-cookie{width:22px;height:22px}
  .ck-how-page .ck-hw-ci--also .ck-hw-ci-art{align-self:start}
  .ck-how-page .ck-hw-ci-also{font-size:17px;line-height:1.5}
  .ck-how-page .ck-hw-lawl{--lm:44px}
  .ck-how-page .ck-hw-lawi{column-gap:14px}
  .ck-how-page .ck-hw-lawi-m{height:23px}
  .ck-how-page .ck-hw-flag{width:24px;height:24px}
  .ck-how-page .ck-hw-flag+.ck-hw-flag{margin-left:-8px}
  .ck-how-page .ck-hw-lawi-i{width:40px}
  .ck-how-page .ck-hw-final-p{padding:30px 20px 28px;border-radius:24px}
  .ck-how-page .ck-hw-final-h{max-width:none;font-size:clamp(32px,9vw,38px)}
}
/* phones on their side: a short screen — less air above the opening, a smaller headline */
@media (max-height:500px) and (orientation:landscape){
  .ck-how-page .ck-hw-open{padding-top:92px}
  .ck-how-page .ck-hw-h1{font-size:clamp(34px,5.4vw,44px)}
  .ck-how-page .ck-hw-lead{font-size:16.5px}
}
/* phones: inside the close's plate the field is ~40 px narrower, so the button takes its own full-width row and the
   address keeps the whole field (at 393 the placeholder ran into the button) */
@media (max-width:480px){
  .ck-how-page .ck-hw-scan .ck-scan-f{flex-wrap:wrap;height:auto;padding:0;border-radius:0;background:none;box-shadow:none;row-gap:10px}
  .ck-how-page .ck-hw-scan .ck-scan-f::before{content:none}
  .ck-how-page .ck-hw-scan .ck-scan-i{flex:1 1 100%;height:56px;padding:0 20px;border-radius:999px;background:var(--panel);
    box-shadow:0 0 0 1px var(--hw-ring),var(--hw-lift)}
  .ck-how-page .ck-hw-scan .ck-scan-f:focus-within,
  .ck-how-page .ck-hw-final .ck-hw-scan .ck-scan-f{box-shadow:none}
  .ck-how-page .ck-hw-scan .ck-scan-i:focus{box-shadow:0 0 0 1.5px var(--blue),0 0 0 6px var(--ring-soft)}
  .ck-how-page .ck-hw-scan .ck-scan-b{flex:1 1 100%;justify-content:center;height:52px}
}
@media (max-width:379px){
  .ck-how-page .ck-hw-h1{font-size:34px}
}

/* 61-how-demo.css — the three-visit drawing on the how-it-works page (how_demo.py · 61-how-demo.js), 2026-10-21.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   Used twice: (B) the illustration in the opening, on its own white plate, and (D) the one real scan inside the
   example report, flat on the report's plate (.ck-hwd--flat). The scanner page's hero object (20-demo.css) is the
   model — the same drawing, lines, ports, chips and colours — rebuilt under .ck-hwd-* so neither page can move the
   other. What differs here: the page's own sentence and captions (B), the drawn address bar ("your website" on B,
   empty on D), no result footer, and the data pulses run only while a visit is being shown (.is-flow) instead of
   for as long as the drawing is on screen.
   Colour = the visitor's state: amber = no choice yet · green = said yes / fine · red = a problem / said no ·
   grey = neutral (a cookie-free signal, stopped). Every state is also a word.
   ⛔ Every selector is under .ck-how-page (the bundle is shared by every tool page).
   ⛔ No prefers-color-scheme: dark = html[data-theme="dark"] only, and it works through the tokens.
   ⛔ Sizes are container-relative (.ck-hwd-box is the container), designed for 280–700 px wide.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */

.ck-how-page .ck-hwd-box{container-type:inline-size;container-name:ckhwd;min-width:0}

/* ── the object ─────────────────────────────────────────────────────────────────────────────────────────── */
.ck-how-page .ck-hwd{
  --dm-pad:clamp(18px,5.2cqi,32px);
  --dm-wire:clamp(30px,17cqi,132px);     /* the gap the lines travel through */
  --dm-run:70;                           /* px of straight line before a company (61-how-demo.js reads it) */
  --dm-pp:2.6s;                          /* one data pulse, site → company */
  --dm-line:var(--ck-u2);
  --dm-grey:var(--ac-grey);
  position:relative;margin:0;width:100%;
  padding:var(--dm-pad);border-radius:clamp(20px,4.6cqi,30px);
  background:var(--panel);box-shadow:var(--sh-panel);   /* the quieter plate: the report (D) is the page's one bold place */
  color:var(--ink);font-size:15px;line-height:1.4;
  -webkit-tap-highlight-color:transparent}
/* D: it lives inside the report's plate — no plate of its own (no card inside a card) */
.ck-how-page .ck-hwd--flat{padding:0;border-radius:0;background:none;box-shadow:none}

/* ── B · the page's sentence over the switch ───────────────────────────────────────────────────────────── */
.ck-how-page .ck-hwd-head{max-width:none;margin:0 0 clamp(18px,4.6cqi,26px);font-size:clamp(15px,2.6cqi,16.5px);
  line-height:1.5;letter-spacing:-.006em;color:var(--ink2);text-wrap:pretty}
.ck-how-page .ck-hwd-head b{font-weight:650;color:var(--ink)}

/* ── 1 · the visit switch: three tabs on one hairline, the shown one fills in its colour ────────────────── */
.ck-how-page .ck-hwd-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:clamp(10px,3cqi,18px);box-shadow:inset 0 -1px 0 var(--line)}
.ck-how-page .ck-hwd-tab{position:relative;display:flex;align-items:center;gap:9px;min-width:0;min-height:44px;
  margin:0;padding:0 0 13px;border:0;background:none;border-radius:0;cursor:pointer;
  font:inherit;font-size:15px;font-weight:600;letter-spacing:-.012em;line-height:1.2;text-align:left;
  color:var(--ink2);transition:color .3s var(--ease)}
.ck-how-page .ck-hwd-tab[data-c="amber"]{--tc:var(--ac-amber);--tc-bg:var(--ac-amber-bg);--tc-ink:var(--ac-amber-ink)}
.ck-how-page .ck-hwd-tab[data-c="green"]{--tc:var(--ac-green);--tc-bg:var(--ac-green-bg);--tc-ink:var(--ac-green-ink)}
.ck-how-page .ck-hwd-tab[data-c="red"]{--tc:var(--ac-red);--tc-bg:var(--ac-red-bg);--tc-ink:var(--ac-red-ink)}
.ck-how-page .ck-hwd-n{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  font-size:12px;font-weight:700;letter-spacing:0;font-variant-numeric:tabular-nums;color:var(--ink2);
  box-shadow:inset 0 0 0 1.5px var(--ck-u2);
  transition:background-color .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease)}
.ck-how-page .ck-hwd-tw{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ck-how-page .ck-hwd-tab:hover{color:var(--ink)}
.ck-how-page .ck-hwd-tab:hover .ck-hwd-n{box-shadow:inset 0 0 0 1.5px var(--ck-u3)}
.ck-how-page .ck-hwd-tab[aria-selected="true"]{color:var(--ink)}
.ck-how-page .ck-hwd-tab[aria-selected="true"] .ck-hwd-n{background:var(--tc-bg);color:var(--tc-ink);box-shadow:none}
.ck-how-page .ck-hwd-tab:focus{outline:none}
.ck-how-page .ck-hwd-tab:focus-visible{outline:2px solid var(--ac-blue);outline-offset:3px;border-radius:8px}
/* the progress line sits ON the hairline: full when chosen, filling while it plays */
.ck-how-page .ck-hwd-pr{position:absolute;left:0;right:0;bottom:-.5px;height:2px;border-radius:2px;overflow:hidden;pointer-events:none}
.ck-how-page .ck-hwd-pr i{display:block;width:100%;height:100%;border-radius:inherit;background:var(--tc);
  transform:scaleX(0);transform-origin:0 50%}
.ck-how-page .ck-hwd-tab[aria-selected="true"] .ck-hwd-pr i{transform:scaleX(1)}
.ck-how-page .ck-hwd.is-auto .ck-hwd-tab[aria-selected="true"] .ck-hwd-pr i{animation:ckHwdPr var(--dm-dur,5s) linear both}
.ck-how-page .ck-hwd.is-auto.is-paused .ck-hwd-tab[aria-selected="true"] .ck-hwd-pr i{animation-play-state:paused}
.ck-how-page .ck-hwd:is(.is-pre,.is-enter):not(.is-auto):not(.is-manual) .ck-hwd-pr i{transform:scaleX(0)}
@keyframes ckHwdPr{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ── B · the caption of the shown visit: all three share one cell, so switching never moves the page ────── */
.ck-how-page .ck-hwd-caps{display:grid;margin-top:clamp(18px,4.8cqi,26px)}
.ck-how-page .ck-hwd-cap{grid-area:1/1;min-width:0;opacity:0;transform:translateY(5px);visibility:hidden;
  transition:opacity .35s var(--ease),transform .5s var(--ease),visibility 0s linear .5s}
.ck-how-page .ck-hwd[data-sv="1"] .ck-hwd-cap[data-on="1"],
.ck-how-page .ck-hwd[data-sv="2"] .ck-hwd-cap[data-on="2"],
.ck-how-page .ck-hwd[data-sv="3"] .ck-hwd-cap[data-on="3"]{opacity:1;transform:none;visibility:visible;
  transition:opacity .35s var(--ease) .08s,transform .5s var(--ease) .08s,visibility 0s}
.ck-how-page .ck-hwd-ct{margin:0;font-size:clamp(18px,3.4cqi,21px);font-weight:650;letter-spacing:-.018em;line-height:1.25;color:var(--ink)}
.ck-how-page .ck-hwd-cp{max-width:none;margin:6px 0 0;font-size:clamp(15px,2.6cqi,16px);line-height:1.5;color:var(--ink2);text-wrap:pretty}

/* ── 2 · the stage: the site · the lines · the companies ─────────────────────────────────────────────────── */
.ck-how-page .ck-hwd-p{min-width:0;outline:none;border-radius:12px}
.ck-how-page .ck-hwd-p:focus-visible{outline:2px solid var(--ac-blue);outline-offset:8px}
.ck-how-page .ck-hwd-stage{position:relative;display:grid;align-items:center;
  grid-template-columns:minmax(0,1fr) var(--dm-wire) max-content;
  margin-top:clamp(22px,6cqi,34px)}
.ck-how-page .ck-hwd-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}

/* the site: the homepage's floating-window drawing, with the cookie banner as the subject */
.ck-how-page .ck-hwd-site{grid-column:1;position:relative;z-index:1;min-width:0;
  margin-bottom:var(--dm-lift,30px)}   /* = a state chip + its gap: the site's port lands level with the middle company */
.ck-how-page .ck-hwd-win{position:relative;overflow:hidden;border-radius:clamp(9px,2.4cqi,13px);background:var(--ck-face);
  box-shadow:0 0 0 1px var(--ck-edge),0 22px 40px -26px rgba(28,28,70,.38),0 2px 6px -2px rgba(28,28,70,.08)}
html[data-theme="dark"] .ck-how-page .ck-hwd-win{box-shadow:0 0 0 1px var(--ck-edge),0 22px 40px -22px rgba(0,0,0,.8)}
.ck-how-page .ck-hwd-chr{display:flex;align-items:center;gap:4px;height:clamp(15px,4cqi,21px);padding:0 clamp(7px,2cqi,10px);
  background:var(--ck-u0);box-shadow:inset 0 -1px 0 var(--ck-ln0)}
.ck-how-page .ck-hwd-chr i{flex:none;width:clamp(4px,1.05cqi,5.5px);aspect-ratio:1;border-radius:50%;background:var(--ck-u3)}
.ck-how-page .ck-hwd-chr b{flex:none;width:38%;height:clamp(5px,1.4cqi,7px);margin:0 auto;border-radius:99px;background:var(--ck-u1)}
/* B's address bar says what this is: a website — yours, not a real one */
.ck-how-page .ck-hwd--addr .ck-hwd-chr{height:clamp(19px,4.8cqi,25px)}
.ck-how-page .ck-hwd--addr .ck-hwd-chr b{display:flex;align-items:center;justify-content:center;width:44%;height:auto;
  min-height:clamp(13px,3.3cqi,17px);padding:0 8px;background:var(--ck-u1)}
.ck-how-page .ck-hwd-chr b span{overflow:hidden;font-size:clamp(10.5px,2cqi,12px);font-weight:600;line-height:1;letter-spacing:.005em;
  color:var(--ac-grey-ink);white-space:nowrap;text-overflow:ellipsis}
.ck-how-page .ck-hwd-vp{position:relative;aspect-ratio:200/150}
.ck-how-page .ck-hwd-pg{position:absolute;inset:0;display:block;width:100%;height:100%}
.ck-how-page .ck-hwd-pg .ck-dg-0{fill:var(--ck-u0)} .ck-how-page .ck-hwd-pg .ck-dg-2{fill:var(--ck-u2)}
.ck-how-page .ck-hwd-pg .ck-dg-5{fill:var(--ck-u5)} .ck-how-page .ck-hwd-pg .ck-dg-6{fill:var(--ck-u6)}
.ck-how-page .ck-hwd-pg .ck-dg-ln{fill:none;stroke:var(--ck-ln0);stroke-width:1}
.ck-how-page .ck-hwd-pg .ck-dg-gh{fill:none;stroke:var(--ck-u3);stroke-width:1}
.ck-how-page .ck-hwd-pg .ck-dg-sun{fill:var(--ck-sun)} .ck-how-page .ck-hwd-pg .ck-dg-hill{fill:var(--ck-hill)}
/* the cookie banner — what this visitor did with it */
.ck-how-page .ck-hwd-bn{position:absolute;left:5.5%;right:5.5%;bottom:6.5%;display:flex;align-items:center;gap:5px;
  padding:6px 6px 6px clamp(7px,2cqi,10px);border-radius:clamp(8px,2cqi,11px);background:var(--ck-face);
  box-shadow:0 0 0 1px var(--ck-edge),0 12px 24px -12px rgba(28,28,70,.34);
  transition:box-shadow .45s var(--ease)}
html[data-theme="dark"] .ck-how-page .ck-hwd-bn{box-shadow:0 0 0 1px var(--ck-edge),0 12px 24px -12px rgba(0,0,0,.7)}
.ck-how-page .ck-hwd-bt{flex:1;min-width:0;display:grid;gap:4px}
.ck-how-page .ck-hwd-bt i{display:block;height:3px;border-radius:2px;background:var(--ck-u2)}
.ck-how-page .ck-hwd-bt i+i{width:64%}
.ck-how-page .ck-hwd-b{position:relative;flex:none;display:inline-flex;align-items:center;height:22px;padding:0 9px;
  border-radius:99px;font-size:12px;font-weight:650;letter-spacing:-.005em;line-height:1;white-space:nowrap;
  transition:background-color .4s var(--ease),color .4s var(--ease),box-shadow .4s var(--ease)}
.ck-how-page .ck-hwd-b-r{color:var(--ck-u5);box-shadow:inset 0 0 0 1px var(--ck-u3)}
.ck-how-page .ck-hwd-b-a{color:var(--ck-face);background:var(--ck-u5)}
/* visit 2 / 3 — the pressed button takes the answer's colour, with the word still on it */
.ck-how-page .ck-hwd[data-sv="2"] .ck-hwd-b-a{background:var(--ac-green-bg);color:var(--ac-green-ink);box-shadow:inset 0 0 0 1.5px var(--ac-green)}
.ck-how-page .ck-hwd[data-sv="3"] .ck-hwd-b-r{background:var(--ac-red-bg);color:var(--ac-red-ink);box-shadow:inset 0 0 0 1.5px var(--ac-red)}
/* the click: a ring leaves the button the moment it is pressed */
.ck-how-page .ck-hwd-b::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0}
.ck-how-page .ck-hwd-b-a::after{box-shadow:0 0 0 1.5px var(--ac-green)}
.ck-how-page .ck-hwd-b-r::after{box-shadow:0 0 0 1.5px var(--ac-red)}
.ck-how-page .ck-hwd.is-live[data-sv="2"] .ck-hwd-b-a::after,
.ck-how-page .ck-hwd.is-live[data-sv="3"] .ck-hwd-b-r::after{animation:ckHwdRip .7s var(--ease) both}
@keyframes ckHwdRip{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.35,1.7)}}
/* the cursor (the house cursor) rests on the button this visitor pressed */
.ck-how-page .ck-hwd-cur{position:absolute;left:70%;top:60%;z-index:2;width:clamp(10px,2.6cqi,13px);pointer-events:none;opacity:0}
.ck-how-page .ck-hwd-cur svg{display:block;width:100%;height:auto;overflow:visible}
.ck-how-page .ck-hwd-cur path{fill:var(--ck-cur);stroke:var(--ck-cur-edge);stroke-width:1.2;stroke-linejoin:round}
.ck-how-page .ck-hwd[data-v="2"] .ck-hwd-b-a .ck-hwd-cur,
.ck-how-page .ck-hwd[data-v="3"] .ck-hwd-b-r .ck-hwd-cur{opacity:1}
.ck-how-page .ck-hwd.is-live[data-v="2"] .ck-hwd-b-a .ck-hwd-cur,
.ck-how-page .ck-hwd.is-live[data-v="3"] .ck-hwd-b-r .ck-hwd-cur{animation:ckHwdCur .8s var(--ease) both}
@keyframes ckHwdCur{
  0%{opacity:0;transform:translate(26px,22px)}
  25%{opacity:1}
  72%{transform:translate(0,0) scale(1)}
  84%{transform:translate(0,0) scale(.84)}
  100%{opacity:1;transform:translate(0,0) scale(1)}}
/* the site's port: where the lines leave it */
.ck-how-page .ck-hwd-sp{position:absolute;top:50%;right:-5px;width:10px;height:10px;margin-top:-5px;border-radius:50%;
  background:var(--panel);box-shadow:inset 0 0 0 2px var(--ck-u3)}

/* the lines. wb = the quiet track (always there) · wl = the state line · wg + wp = a pulse of data */
.ck-how-page .ck-hwd-w path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.ck-how-page .ck-hwd-wb{stroke:var(--dm-line);stroke-width:1.5;transition:stroke-dashoffset 1.1s var(--ease)}
/* ⛔ dash arrays only once the script has drawn the lines in real pixels (the scanner page's lesson: on the
   stretched no-script lines Chrome measures dashes on screen and the lines broke into pieces) */
.ck-how-page .ck-hwd.is-js .ck-hwd-wb{stroke-dasharray:100 100;stroke-dashoffset:0}
.ck-how-page .ck-hwd-wl{stroke:var(--dm-grey);stroke-width:1.5;stroke-opacity:.55;
  transition:stroke .45s var(--ease),stroke-opacity .45s var(--ease),stroke-dasharray .8s var(--ease),stroke-dashoffset 1.1s var(--ease)}
.ck-how-page .ck-hwd-wg,.ck-how-page .ck-hwd-wp{stroke:var(--dm-grey);stroke-dasharray:8 200;stroke-dashoffset:8;opacity:0;
  transition:stroke .45s var(--ease)}
.ck-how-page .ck-hwd-wg{stroke-width:7;stroke-opacity:.16}
.ck-how-page .ck-hwd-wp{stroke-width:2.6}
.ck-how-page .ck-hwd-w[data-st="no"] path:not(.ck-hwd-wb){stroke:var(--ac-red)}
.ck-how-page .ck-hwd-w[data-st="ok"] path:not(.ck-hwd-wb){stroke:var(--ac-green)}
.ck-how-page .ck-hwd-w[data-st="no"] .ck-hwd-wl,.ck-how-page .ck-hwd-w[data-st="ok"] .ck-hwd-wl{stroke-opacity:.82}
.ck-how-page .ck-hwd.is-js .ck-hwd-wl{stroke-dasharray:100 200;stroke-dashoffset:0}
.ck-how-page .ck-hwd.is-js .ck-hwd-w[data-st="stop"] .ck-hwd-wl{stroke-dasharray:var(--stop,78) 200}
.ck-how-page .ck-hwd-w[data-st="stop"] .ck-hwd-wl{stroke-opacity:.75}
/* the data runs while a visit is being shown (.is-flow), then the lines rest — drawn, not moving */
.ck-how-page .ck-hwd.is-flow .ck-hwd-w:not([data-st="stop"]) :is(.ck-hwd-wg,.ck-hwd-wp){
  animation:ckHwdPulse var(--dm-pp) linear infinite;animation-delay:calc(var(--i) * .42s)}
.ck-how-page .ck-hwd.is-flow .ck-hwd-w[data-st="free"] :is(.ck-hwd-wg,.ck-hwd-wp){animation-duration:calc(var(--dm-pp) * 1.5)}
.ck-how-page .ck-hwd-w[data-st="free"] .ck-hwd-wp{stroke-width:2}
@keyframes ckHwdPulse{
  0%{stroke-dashoffset:8;opacity:0}
  7%{opacity:1}
  62%{opacity:1}
  70%{stroke-dashoffset:-100;opacity:0}
  100%{stroke-dashoffset:-100;opacity:0}}

/* the companies */
.ck-how-page .ck-hwd-cos{grid-column:3;position:relative;z-index:1;display:grid;gap:clamp(16px,4.6cqi,26px);
  margin:0;padding:0;list-style:none}
.ck-how-page .ck-hwd-co{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:11px;row-gap:7px;
  align-items:center;margin:0;padding:0;transition:opacity .35s var(--ease)}
.ck-how-page .ck-hwd-co::before{content:none}
.ck-how-page .ck-hwd-port{grid-row:1;grid-column:1;position:relative;width:10px;height:10px;border-radius:50%;
  background:var(--panel);box-shadow:inset 0 0 0 2px var(--dm-grey);
  transition:background-color .45s var(--ease),box-shadow .45s var(--ease)}
.ck-how-page .ck-hwd-port::after{content:"";position:absolute;inset:0;border-radius:50%;opacity:0;
  box-shadow:0 0 0 1.5px var(--pc,var(--dm-grey))}
.ck-how-page .ck-hwd-co[data-st="no"]{--pc:var(--ac-red)}
.ck-how-page .ck-hwd-co[data-st="ok"]{--pc:var(--ac-green)}
.ck-how-page .ck-hwd-co[data-st="no"] .ck-hwd-port,.ck-how-page .ck-hwd-co[data-st="ok"] .ck-hwd-port{background:var(--pc);
  box-shadow:0 0 0 3.5px color-mix(in srgb,var(--pc) 16%,transparent)}
.ck-how-page .ck-hwd.is-flow .ck-hwd-co:not([data-st="stop"]) .ck-hwd-port::after{
  animation:ckHwdPing var(--dm-pp) linear infinite;animation-delay:calc(var(--i) * .42s)}
.ck-how-page .ck-hwd.is-flow .ck-hwd-co[data-st="free"] .ck-hwd-port::after{animation-duration:calc(var(--dm-pp) * 1.5)}
@keyframes ckHwdPing{0%,66%{opacity:0;transform:scale(1)}70%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(2.6)}}
.ck-how-page .ck-hwd-nm{grid-row:1;grid-column:2;font-size:15px;font-weight:650;letter-spacing:-.014em;line-height:20px;
  color:var(--ink);white-space:nowrap}
.ck-how-page .ck-hwd-st{grid-row:2;grid-column:2;display:grid;justify-items:start;min-width:0}
.ck-how-page .ck-hwd-sl{grid-area:1/1;display:inline-block;padding:3px 9px 4px;border-radius:99px;
  font-size:12.5px;font-weight:650;letter-spacing:-.004em;line-height:1.3;white-space:nowrap;
  opacity:0;transform:translateY(4px);transition:opacity .3s var(--ease),transform .45s var(--ease)}
.ck-how-page .ck-hwd-sl.is-no{background:var(--ac-red-bg);color:var(--ac-red-ink)}
.ck-how-page .ck-hwd-sl.is-ok{background:var(--ac-green-bg);color:var(--ac-green-ink)}
.ck-how-page .ck-hwd-sl.is-free,.ck-how-page .ck-hwd-sl.is-stop{background:var(--ac-grey-bg);color:var(--ac-grey-ink)}
.ck-how-page .ck-hwd-co[data-sv="1"] .ck-hwd-sl[data-on="1"],
.ck-how-page .ck-hwd-co[data-sv="2"] .ck-hwd-sl[data-on="2"],
.ck-how-page .ck-hwd-co[data-sv="3"] .ck-hwd-sl[data-on="3"]{opacity:1;transform:none;transition-delay:.08s}
/* D, visit 1: the cookie each company stored before any choice, sitting on its line */
.ck-how-page .ck-hwd-tag{position:absolute;right:100%;top:10px;margin-right:15px;padding:2px 7px 3px;border-radius:7px;
  background:var(--ck-face);box-shadow:0 0 0 1px var(--ck-tag-edge),0 6px 14px -8px rgba(28,28,70,.3);
  font-size:12px;font-weight:650;letter-spacing:.01em;line-height:1.3;color:var(--ink2);white-space:nowrap;
  font-variant-numeric:tabular-nums;opacity:0;transform:translateY(-50%) scale(.9);
  transition:opacity .3s var(--ease),transform .45s var(--ease)}
.ck-how-page .ck-hwd[data-sv="1"] .ck-hwd-tag{opacity:1;transform:translateY(-50%);transition-delay:calc(.12s + var(--i) * .08s)}
/* a stopped line ends at a bar before the company */
.ck-how-page .ck-hwd-bar{position:absolute;right:100%;top:10px;width:2px;height:14px;margin-right:22px;border-radius:2px;
  background:var(--dm-grey);opacity:0;transform:translateY(-50%) scaleY(.2);
  transition:opacity .3s var(--ease),transform .45s var(--ease)}
.ck-how-page .ck-hwd-co[data-st="stop"] .ck-hwd-bar{opacity:1;transform:translateY(-50%);transition-delay:.25s}
/* hover a company: its own line comes forward */
@media (hover:hover){
  .ck-how-page .ck-hwd:has(.ck-hwd-co:hover) .ck-hwd-co:not(:hover){opacity:.42}
  .ck-how-page .ck-hwd:has(.ck-hwd-co:nth-child(1):hover) .ck-hwd-w:not(:nth-child(1)),
  .ck-how-page .ck-hwd:has(.ck-hwd-co:nth-child(2):hover) .ck-hwd-w:not(:nth-child(2)),
  .ck-how-page .ck-hwd:has(.ck-hwd-co:nth-child(3):hover) .ck-hwd-w:not(:nth-child(3)){opacity:.3}
  .ck-how-page .ck-hwd-w{transition:opacity .35s var(--ease)}
}

/* ── the entrance: B when the site's loader lifts, D when the report comes into view ───────────────────── */
.ck-how-page .ck-hwd :is(.ck-hwd-head,.ck-hwd-tabs,.ck-hwd-caps,.ck-hwd-site){transition:opacity .7s var(--ease),transform .9s var(--ease)}
.ck-how-page .ck-hwd.is-pre :is(.ck-hwd-head,.ck-hwd-tabs,.ck-hwd-caps,.ck-hwd-site){opacity:0;transform:translateY(12px)}
.ck-how-page .ck-hwd.is-pre .ck-hwd-co{opacity:0;transform:translateX(-8px)}
.ck-how-page .ck-hwd.is-pre :is(.ck-hwd-wb,.ck-hwd-wl){stroke-dashoffset:100}
.ck-how-page .ck-hwd.is-pre .ck-hwd-tag{opacity:0}
.ck-how-page .ck-hwd.is-enter .ck-hwd-co{transition:opacity .6s var(--ease),transform .8s var(--ease)}
.ck-how-page .ck-hwd.is-enter .ck-hwd-head{transition-delay:0s}
.ck-how-page .ck-hwd.is-enter .ck-hwd-tabs{transition-delay:.06s}
.ck-how-page .ck-hwd.is-enter .ck-hwd-caps{transition-delay:.14s}
.ck-how-page .ck-hwd.is-enter .ck-hwd-site{transition-delay:.2s}
.ck-how-page .ck-hwd.is-enter :is(.ck-hwd-wb,.ck-hwd-wl){transition-delay:calc(.44s + var(--i,0) * .1s)}
.ck-how-page .ck-hwd.is-enter .ck-hwd-co{transition-delay:calc(.72s + var(--i) * .09s)}
.ck-how-page .ck-hwd.is-enter .ck-hwd-tag{transition-delay:calc(1.05s + var(--i) * .08s)}
/* off screen or in a background tab: nothing runs */
.ck-how-page .ck-hwd.is-off *,.ck-how-page .ck-hwd.is-off *::after{animation-play-state:paused!important}

/* ── container sizes ────────────────────────────────────────────────────────────────────────────────────── */
@container ckhwd (max-width:579px){
  .ck-how-page .ck-hwd{--dm-run:66;--dm-lift:29px}
  .ck-how-page .ck-hwd-tab{font-size:14.5px;gap:8px}
  .ck-how-page .ck-hwd-nm{font-size:14.5px}
  .ck-how-page .ck-hwd-sl{font-size:12px;padding:3px 8px}
}
/* compact (420–499 px): the same left-to-right composition, tightened; the cookie names rest (no room) */
@container ckhwd (min-width:420px) and (max-width:499px){
  .ck-how-page .ck-hwd{--dm-run:44;--dm-wire:clamp(30px,13cqi,132px)}
  .ck-how-page .ck-hwd-stage{margin-top:24px}
  .ck-how-page .ck-hwd-cos{gap:18px}
  .ck-how-page .ck-hwd-tag{display:none}
}
/* narrow (phones): the site on top at a real size, three lines leave its bottom edge in their own lanes and turn
   into each company — read top to bottom, like the page itself (61-how-demo.js draws it) */
@container ckhwd (max-width:419px){
  .ck-how-page .ck-hwd{--dm-dir:v;--dm-run:0}
  .ck-how-page .ck-hwd-stage{grid-template-columns:minmax(0,1fr);row-gap:clamp(28px,8cqi,34px);align-items:start;
    margin-top:clamp(20px,6cqi,26px)}
  .ck-how-page .ck-hwd-site{grid-column:1;grid-row:1;width:min(78%,300px);margin-bottom:0}
  .ck-how-page .ck-hwd-vp{aspect-ratio:200/105}
  .ck-how-page .ck-hwd-sp{top:100%;right:auto;left:30px;margin:-5px 0 0 -5px}
  .ck-how-page .ck-hwd-cos{grid-column:1;grid-row:2;gap:15px;padding-left:66px}
  .ck-how-page .ck-hwd-tag{display:none}
  .ck-how-page .ck-hwd-bar{margin-right:10px}
  /* no script: the stretched fallback lines cannot bend this way — one trunk down and a branch into each company */
  .ck-how-page .ck-hwd:not(.is-js) .ck-hwd-wires{display:none}
  .ck-how-page .ck-hwd:not(.is-js) .ck-hwd-cos::before{content:"";position:absolute;left:30px;top:calc(-1 * clamp(28px,8cqi,34px));
    bottom:calc(100% - (100% - 2 * 15px) / 3 * 2 - 2 * 15px - 10px);width:0;border-left:1.5px solid var(--ck-u3)}
  .ck-how-page .ck-hwd:not(.is-js) .ck-hwd-co::after{content:"";position:absolute;right:100%;top:10px;width:calc(66px - 30px - 5px);
    border-top:1.5px solid var(--ck-u3)}
  .ck-how-page .ck-hwd-tab{font-size:14px;gap:7px;padding-bottom:12px}
  .ck-how-page .ck-hwd-n{width:20px;height:20px;font-size:12px}
  .ck-how-page .ck-hwd-co{column-gap:9px;row-gap:6px}
  .ck-how-page .ck-hwd-nm{font-size:14px;line-height:19px}
  .ck-how-page .ck-hwd-bar{top:9.5px}
}
@container ckhwd (max-width:359px){
  .ck-how-page .ck-hwd-cos{padding-left:60px}
  .ck-how-page .ck-hwd-sp{left:26px}
  .ck-how-page .ck-hwd:not(.is-js) .ck-hwd-cos::before{left:26px}
  .ck-how-page .ck-hwd:not(.is-js) .ck-hwd-co::after{width:calc(60px - 26px - 5px)}
  .ck-how-page .ck-hwd-tab{gap:6px}
}
/* narrower than any phone we target: the banner keeps its two buttons only */
@container ckhwd (max-width:279px){
  .ck-how-page .ck-hwd-bt{display:none}
  .ck-how-page .ck-hwd-bn{justify-content:flex-end}
  .ck-how-page .ck-hwd-site{width:100%}
}

/* ── reduced motion: the final state of each visit, nothing travels ────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .ck-how-page .ck-hwd *,.ck-how-page .ck-hwd *::after{animation:none!important;transition:none!important}
  .ck-how-page .ck-hwd :is(.ck-hwd-wg,.ck-hwd-wp){display:none}
}

/* 62-how-report.css — (D) the example report on the how-it-works page (sec_how_report.py), 2026-10-21.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   The page's ONE bold place: the proof. One big plate on the hero object's float shadow, read in three levels —
   who/when + the outcome · "Technical details": where the data went (the real three visits, opened on Reject)
   with the score beside it, no longer folded away · the two issues with their evidence and fixes, then the
   passed checks. Inside the plate only hairlines and layout separate the parts: no card inside a card.
   ⛔ The rows, folds and the cookie-tool picker keep the report's own markup, so app.js drives them (ckRows,
      ckFolds, ckPickers); only their look is set here, scoped to .ck-how-page .ck-hw-rep.
   ⛔ The score is printed, not counted (no .ck-ring / data-count here): a reported result, not a reward.
   ⛔ Phone rules LAST. Dark = html[data-theme="dark"] through the tokens.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */

.ck-how-page .ck-hw-rep{--rp-pad:clamp(26px,3.6vw,54px);position:relative;padding:0 var(--rp-pad) clamp(8px,1vw,14px);
  border-radius:var(--r-panel);background:var(--panel);box-shadow:var(--sh-float)}
.ck.ck-go.ck-how-page .ck-hw-rep[data-reveal]{transform:translateY(36px) scale(.992)}
.ck.ck-go.ck-how-page .ck-hw-rep[data-reveal].ck-in{transform:none}

/* ── 1 · who, when, and the outcome ───────────────────────────────────────────────────────────────────── */
.ck-how-page .ck-hw-rep-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;
  padding:clamp(20px,2vw,26px) 0;border-bottom:1px solid var(--line)}
.ck-how-page .ck-hw-rep-id{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0}
.ck-how-page .ck-hw-rep-id b{font-size:15.5px;font-weight:650;letter-spacing:-.01em;color:var(--ink)}
.ck-how-page .ck-hw-tag{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;
  font-size:12.5px;font-weight:650;letter-spacing:-.002em;color:var(--ac-grey-ink);background:var(--ac-grey-bg)}
.ck-how-page .ck-hw-rep-when{margin:0;font-size:14px;font-weight:500;line-height:1.45;color:var(--ac-grey-ink);font-variant-numeric:tabular-nums}
.ck-how-page .ck-hw-rep-sum{padding:clamp(26px,2.8vw,38px) 0 clamp(26px,2.8vw,36px)}
.ck-how-page .ck-hw-band{display:inline-flex;align-items:center;gap:9px;height:30px;margin:0;padding:0 13px 0 11px;border-radius:999px;
  font-size:13.5px;font-weight:650;letter-spacing:-.004em;color:var(--ac-red-ink);background:var(--ac-red-bg)}
.ck-how-page .ck-hw-band i{width:8px;height:8px;border-radius:50%;background:var(--ac-red)}
.ck-how-page .ck-hw-rep-h{max-width:46ch;margin:clamp(14px,1.4vw,18px) 0 0;font-size:clamp(20px,2vw,27px);font-weight:650;
  letter-spacing:-.022em;line-height:1.3;color:var(--ink);text-wrap:pretty}
.ck-how-page .ck-hw-rep-sum .ck-counts{gap:8px 26px;margin:clamp(16px,1.6vw,20px) 0 0;padding:0;list-style:none;font-size:15px;color:var(--ink2)}
.ck-how-page .ck-hw-rep-sum .ck-counts .ck-mk{width:9px;height:9px}
.ck-how-page .ck-hw-rep-sum .ck-counts .ck-mk-no{background:var(--ac-red)}
.ck-how-page .ck-hw-rep-sum .ck-counts .ck-mk-na{box-shadow:inset 0 0 0 1.6px var(--ac-grey)}
.ck-how-page .ck-hw-rep-sum .ck-counts .ck-mk-ok{width:15px;height:15px;color:var(--ac-green)}
.ck-how-page .ck-hw-rep-sum .ck-counts .ck-mk-ok svg{width:15px;height:15px}

/* ── 2 · Technical details: where the data went, and the score beside it ──────────────────────────────── */
.ck-how-page .ck-hw-tech{padding:clamp(28px,3vw,40px) 0 clamp(30px,3.2vw,44px);border-top:1px solid var(--line)}
.ck-how-page .ck-hw-tech-hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.ck-how-page .ck-hw-tech-t{margin:0;font-size:clamp(17.5px,1.3vw,19.5px);font-weight:650;letter-spacing:-.016em;line-height:1.3;color:var(--ink)}
.ck-how-page .ck-hw-tech-s{margin:0;font-size:15px;line-height:1.45;color:var(--ac-grey-ink)}
.ck-how-page .ck-hw-tech-g{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);column-gap:clamp(32px,4.4vw,72px);
  align-items:start;margin-top:clamp(22px,2.4vw,30px)}
.ck-how-page .ck-hw-tech-map{min-width:0}
.ck-how-page .ck-hw-score{min-width:0;padding-left:clamp(28px,3.2vw,48px);border-left:1px solid var(--line)}
.ck-how-page .ck-hw-ring{position:relative;width:clamp(96px,8vw,112px);aspect-ratio:1}
.ck-how-page .ck-hw-ring svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}
.ck-how-page .ck-hw-ring circle{fill:none;stroke-width:6.5}
.ck-how-page .ck-hw-ring-t{stroke:var(--ck-u1)}
.ck-how-page .ck-hw-ring-v{stroke:url(#ck-gring);stroke-linecap:round;stroke-dasharray:var(--v) 100}
.ck-how-page .ck-hw-ring-n{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0}
.ck-how-page .ck-hw-ring-n b{font-size:clamp(30px,2.5vw,36px);font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums}
.ck-how-page .ck-hw-ring-n span{margin-top:3px;font-size:12px;font-weight:550;color:var(--ac-grey-ink)}
.ck-how-page .ck-hw-score-t{margin-top:clamp(18px,1.8vw,22px)}
.ck-how-page .ck-hw-score-h{margin:0;font-size:16px;font-weight:650;letter-spacing:-.012em;color:var(--ink)}
.ck-how-page .ck-hw-score-p{max-width:40ch;margin:7px 0 0;font-size:15px;line-height:1.6;color:var(--ink2);text-wrap:pretty}
.ck-how-page .ck-hw-note{max-width:40ch;margin:clamp(18px,1.8vw,22px) 0 0;padding-top:clamp(16px,1.6vw,20px);border-top:1px solid var(--line);
  font-size:14.5px;line-height:1.55;color:var(--ac-grey-ink);text-wrap:pretty}

/* ── 3 · the issues, their evidence and fixes, then the passed checks ─────────────────────────────────── */
.ck-how-page .ck-hw-rows{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.ck-how-page .ck-hw-rep .ck-row-h{padding:clamp(18px,1.8vw,22px) 0}
/* mark · words · status · "View evidence" · chevron (the report's row is four columns; this one has five) */
.ck-how-page .ck-hw-rep .ck-row-o .ck-row-h{grid-template-columns:18px minmax(0,1fr) auto auto 18px;gap:14px}
.ck-how-page .ck-hw-rep .ck-row-x{font-size:clamp(16px,1.25vw,17.5px);font-weight:650}
.ck-how-page .ck-hw-rep .ck-row-sub{font-size:15px}
.ck-how-page .ck-hw-rep .ck-row-w{margin-top:5px;font-size:13.5px;color:var(--ac-grey-ink)}
.ck-how-page .ck-hw-rep .ck-see{margin-top:2px;font-size:14px;font-weight:600;color:var(--ac-blue-ink)}
.ck-how-page .ck-hw-rep .ck-row-o.is-open .ck-see{color:var(--ac-grey-ink)}
.ck-how-page .ck-hw-rep button.ck-row-h:focus-visible{outline-offset:4px;border-radius:12px}
/* the evidence: what we saw and why it matters on the left, the fix beside them */
.ck-how-page .ck-hw-rep .ck-row-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px clamp(32px,4vw,64px);padding:4px 0 30px 32px}
.ck-how-page .ck-hw-rep .ck-row-in:has(.ck-part-fix)>.ck-part:not(.ck-part-fix){grid-column:1}
.ck-how-page .ck-hw-rep .ck-part-fix{grid-column:2;grid-row:1 / span 2}
.ck-how-page .ck-hw-rep .ck-part-h{font-size:14px;font-weight:650;color:var(--ink)}
.ck-how-page .ck-hw-rep .ck-ev-l{margin-top:7px;font-size:15px;line-height:1.62}
.ck-how-page .ck-hw-rep .ck-ev-l+.ck-ev-l{margin-top:10px}
.ck-how-page .ck-hw-rep .ck-part-p{font-size:15px;line-height:1.62}
/* the cookie tool: the one we found first, "Change platform" as the quiet second control (his 18 Oct brief) */
.ck-how-page .ck-hw-rep .ck-part-fix{display:flex;flex-direction:column}
.ck-how-page .ck-hw-rep .ck-fix-i{display:none}
.ck-how-page .ck-hw-rep .ck-fix-mi{display:block;order:1;margin-top:6px;font-size:15px;line-height:1.55;color:var(--ink2)}
.ck-how-page .ck-hw-rep .ck-part-fix .ck-fix{order:2;margin-top:14px;padding:16px 18px;border-radius:16px;background:var(--ck-u0);
  box-shadow:inset 0 0 0 1px var(--line)}
.ck-how-page .ck-hw-rep .ck-fix-n{display:inline-flex;align-items:center;height:26px;margin:0 0 10px;padding:0 11px;border-radius:999px;
  font-size:12.5px;font-weight:650;color:var(--canvas);background:var(--ink)}
.ck-how-page .ck-hw-rep .ck-fix-t{font-size:15px;line-height:1.68}
.ck-how-page .ck-hw-rep .ck-fix-pick{order:3;display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  min-height:44px;margin-top:12px;padding:6px 14px 6px 16px;border-radius:999px;border:0;background:var(--panel);
  box-shadow:inset 0 0 0 1px var(--line-on);font-size:14px;font-weight:600;color:var(--ink2);cursor:pointer;
  transition:color .2s ease,box-shadow .25s ease}
.ck-how-page .ck-hw-rep .ck-fix-pick:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink3)}
.ck-how-page .ck-hw-rep .ck-fix-pick:focus-visible{border-radius:999px;outline-offset:3px}
.ck-how-page .ck-hw-rep .ck-fix-pick .ck-chev{margin:0;transition:transform .35s var(--ease)}
.ck-how-page .ck-hw-rep .ck-part-fix.is-pick .ck-fix-pick .ck-chev{transform:rotate(180deg)}
.ck-how-page .ck-hw-rep .ck-part-fix .ck-tools{order:4;display:none;margin-top:10px}
.ck-how-page .ck-hw-rep .ck-part-fix.is-pick .ck-tools{display:flex}
/* code bits and cookie names wrap inside the column (never a sideways scroll) */
.ck-how-page .ck-hw-rep .ck-code{overflow-wrap:anywhere}
.ck-how-page .ck-hw-rep .ck-chip{overflow-wrap:anywhere}
/* the passed checks: a quiet fold at the end of the plate */
.ck-how-page .ck-hw-fold{margin-top:0;border-top:1px solid var(--line)}
.ck-how-page .ck-hw-fold .ck-fold-b{min-height:60px;padding:16px 0;font-size:16px;font-weight:650}
.ck-how-page .ck-hw-fold .ck-fs-n{font-size:14px;color:var(--ac-grey-ink)}
.ck-how-page .ck-hw-fold .ck-fold-b:focus-visible{outline-offset:4px;border-radius:12px}
.ck-how-page .ck-hw-fold .ck-rows{margin:0 0 10px;padding:0;list-style:none}
/* under the plate, on the page's left line */
.ck-how-page .ck-hw-after{max-width:none;margin:clamp(16px,1.6vw,22px) 0 0;font-size:15px;line-height:1.55;color:var(--ac-grey-ink);text-align:left}

/* ── tablet: the score comes under the drawing, on a hairline ─────────────────────────────────────────── */
@media (max-width:980px){
  .ck-how-page .ck-hw-tech-g{grid-template-columns:minmax(0,1fr);row-gap:30px}
  .ck-how-page .ck-hw-score{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:24px;align-items:center;
    padding:26px 0 0;border-left:0;border-top:1px solid var(--line)}
  .ck-how-page .ck-hw-score-t{margin-top:0}
  .ck-how-page .ck-hw-note{grid-column:1 / -1;max-width:none}
  .ck-how-page .ck-hw-score-p{max-width:60ch}
}
@media (max-width:860px){
  .ck-how-page .ck-hw-rep .ck-row-in{grid-template-columns:minmax(0,1fr);gap:22px}
  .ck-how-page .ck-hw-rep .ck-row-in:has(.ck-part-fix)>.ck-part:not(.ck-part-fix),
  .ck-how-page .ck-hw-rep .ck-part-fix{grid-column:1;grid-row:auto}
}

/* ── phone — LAST: summary, the drawing, the score, then the issues; everything in the document's flow ── */
@media (max-width:640px){
  .ck-how-page .ck-hw-rep{--rp-pad:20px;padding-bottom:4px;border-radius:24px}
  .ck-how-page .ck-hw-rep-top{flex-direction:column;align-items:flex-start;gap:8px;padding:18px 0}
  .ck-how-page .ck-hw-rep-when{font-size:13.5px}
  .ck-how-page .ck-hw-rep-sum{padding:22px 0}
  .ck-how-page .ck-hw-rep-h{font-size:clamp(18.5px,5.2vw,20px);line-height:1.36}
  .ck-how-page .ck-hw-rep-sum .ck-counts{gap:6px 18px;font-size:14.5px}
  .ck-how-page .ck-hw-tech{padding:24px 0 26px}
  .ck-how-page .ck-hw-tech-hd{display:block}
  .ck-how-page .ck-hw-tech-s{margin-top:4px;font-size:14.5px}
  .ck-how-page .ck-hw-score{grid-template-columns:auto minmax(0,1fr);column-gap:18px;padding-top:22px}
  .ck-how-page .ck-hw-ring{width:84px}
  .ck-how-page .ck-hw-ring-n b{font-size:28px}
  .ck-how-page .ck-hw-ring-n span{font-size:11px}
  .ck-how-page .ck-hw-score-p{font-size:14.5px}
  .ck-how-page .ck-hw-note{font-size:14px}
  /* the row: mark · words · chevron (the status sits after "where", "View evidence" is the row itself) */
  .ck-how-page .ck-hw-rep .ck-row-o .ck-row-h,
  .ck-how-page .ck-hw-rep .ck-row-h{grid-template-columns:16px minmax(0,1fr) 16px;gap:12px;padding:16px 0}
  .ck-how-page .ck-hw-rep .ck-row-x{font-size:16px}
  .ck-how-page .ck-hw-rep .ck-row-sub{font-size:14.5px}
  .ck-how-page .ck-hw-rep .ck-row-in{padding:0 0 22px 0}
  .ck-how-page .ck-hw-rep .ck-part-fix .ck-fix{padding:14px 15px}
  .ck-how-page .ck-hw-fold .ck-fold-b{flex-wrap:wrap;position:relative;padding-right:28px}
  .ck-how-page .ck-hw-fold .ck-fold-b .ck-chev{position:absolute;right:0;top:20px}
  .ck-how-page .ck-hw-after{font-size:14.5px}
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   2026-10-23 · THE WEBSITE SEO SCANNER'S HOW-IT-WORKS (tools/seo/seo_page_how.py) — the Cookie Scanner's
   how-it-works page system (60-how-page.css, 62-how-report.css, sec_how_open/sec_how_final), with only what this
   page adds (stage 2 of his redesign brief):
   · the crumb carries the scanner page's own mark (the house drawing `reach`);
   · the opening's drawing is the scanner hero's panel, each step with its caption over the drawing;
   · what it checks: the four questions with the engine's fifteen check names and their weights, then how serious a
     finding is (the three severities, LIVE);
   · the example report: what the scan covered, the crawl map at full width, the score printed under it;
   · what it cannot tell you (the six LIVE sentences) · the limits as four figures.
   ⛔ Every rule is under main.ck-how-page.sq (or the panel's own .ck-demo--how) — the cookie how-it-works never
     carries .sq. A suggestion is a hollow AMBER ring on the two SEO pages (it was blue, the action colour); the
     report keeps its own until stage 3. Phone rules LAST.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── a suggestion, in its role colour, on the scanner page and here ── */
:is(.ck-lean,.ck-how-page,.ck-rep).sq .ck-mk-sug{background:transparent;box-shadow:inset 0 0 0 2px var(--ac-amber)}
:is(.ck-lean,.ck-how-page,.ck-rep).sq .ck-st-sug{color:var(--ac-amber-ink)}

/* ── the opening ── */
.ck-how-page.sq .ck-hw-crumb .ck-hw-crumb-i{flex:none;width:32px;height:24px;margin:0;overflow:visible}
.ck-how-page.sq .sq-hw-panel{min-width:0}
/* the step captions over the drawing (sec_demo.py caps): one at a time, on the step that plays */
.ck-lean .ck-demo--how .ck-demo-cts{display:grid;margin-top:clamp(18px,5cqi,26px)}
.ck-lean .ck-demo--how .ck-demo-ct{grid-area:1/1;margin:0;font-size:15px;line-height:1.55;color:var(--ink2);
  opacity:0;transform:translateY(4px);transition:opacity .3s var(--ease),transform .45s var(--ease)}
.ck-lean .ck-demo--how .ck-demo-ct b{display:block;margin-bottom:3px;font-size:16.5px;font-weight:650;letter-spacing:-.014em;color:var(--ink)}
.ck-lean .ck-demo--how[data-sv="1"] .ck-demo-ct[data-on="1"],
.ck-lean .ck-demo--how[data-sv="2"] .ck-demo-ct[data-on="2"],
.ck-lean .ck-demo--how[data-sv="3"] .ck-demo-ct[data-on="3"]{opacity:1;transform:none;transition-delay:.08s}
.ck-lean .ck-demo--how .ck-demo-stage{margin-top:clamp(18px,5cqi,26px)}
.ck-lean .ck-demo--how :is(.ck-demo-cts){transition:opacity var(--mv-d,.7s) var(--ease),transform var(--mv-d,.7s) var(--ease)}
.ck-lean .ck-demo--how.is-pre .ck-demo-cts{opacity:0;transform:translateY(12px)}
.ck-lean .ck-demo--how.is-enter .ck-demo-cts{transition-delay:.07s}

/* ── what it checks: the four questions with their checks and weights ── */
.ck-how-page.sq .sq-hw-ci{--cx:var(--blue);--cx-bg:var(--ac-blue-bg)}
.ck-how-page.sq .sq-hw-w{grid-column:2;display:grid;gap:8px;margin:4px 0 0;padding:0;list-style:none}
.ck-how-page.sq .sq-hw-w li{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  font-size:var(--hw-body);line-height:1.45;color:var(--ink2)}
.ck-how-page.sq .sq-hw-w b{flex:none;display:inline-grid;place-items:center;min-width:28px;height:24px;padding:0 8px;border-radius:12px;
  font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink);background:var(--ck-u0);
  box-shadow:inset 0 0 0 1px var(--line)}
.ck-how-page.sq .sq-hw-ci .ck-hw-cx-i :is(.t,.b,.c,.g){transform-box:fill-box;transform-origin:0 50%}
.ck-how-page.sq .sq-hw-ci .ck-hw-cx-i .t{transform-origin:50% 50%}
/* the drawings act their question out as the list arrives (60-how-page.js .is-play) — the scanner page's acts */
.ck-how-page.sq .sq-hw-ci.is-play .ck-hw-cx-p{animation:ckHwRun .8s cubic-bezier(.55,.05,.35,1) .05s both}
.ck-how-page.sq .sq-hw-ci.is-play .ck-hw-cx-tr{animation:ckHwTrail .8s cubic-bezier(.55,.05,.35,1) .05s both}
.ck-how-page.sq .sq-hw-ci[data-k="index"].is-play .t{animation:sqCxPop .45s cubic-bezier(.34,1.56,.64,1) both}
.ck-how-page.sq .sq-hw-ci[data-k="index"].is-play .t:nth-of-type(2){animation-delay:.62s}
.ck-how-page.sq .sq-hw-ci[data-k="index"].is-play .t:nth-of-type(3){animation-delay:.72s}
.ck-how-page.sq .sq-hw-ci[data-k="index"].is-play .t:nth-of-type(4){animation-delay:.82s}
.ck-how-page.sq .sq-hw-ci[data-k="index"].is-play .t:nth-of-type(5){animation-delay:.92s}
.ck-how-page.sq .sq-hw-ci[data-k="links"].is-play .b{animation:sqCxOpen .55s var(--ease) .78s both}
.ck-how-page.sq .sq-hw-ci[data-k="says"].is-play .c.l1{animation:sqCxGrow .4s var(--ease) .6s both}
.ck-how-page.sq .sq-hw-ci[data-k="says"].is-play .c.l2{animation:sqCxGrow .4s var(--ease) .72s both}
.ck-how-page.sq .sq-hw-ci[data-k="says"].is-play .c.l3{animation:sqCxGrow .4s var(--ease) .84s both}
.ck-how-page.sq .sq-hw-ci[data-k="order"].is-play .g{animation:sqCxLong 1.3s var(--ease) .05s both}
/* how serious a finding is: no drawing — the row is the three severities and the note */
.ck-how-page.sq .sq-hw-sev{grid-template-columns:minmax(0,1fr)}
.ck-how-page.sq .sq-hw-sev>*{grid-column:1}
.ck-how-page.sq .sq-hw-sev .sq-sevs{margin-top:10px}
.ck-how-page.sq .sq-hw-sev .sq-sev-n{margin-top:6px}

/* ── the example report ── */
.ck-how-page.sq .sq-hw-band-warn{background:var(--ac-amber-bg);color:var(--ac-amber-ink)}
.ck-how-page.sq .sq-hw-band-warn i{background:var(--ac-amber)}
.ck-how-page.sq .sq-hw-band-ok{background:var(--ac-green-bg);color:var(--ac-green-ink)}
.ck-how-page.sq .sq-hw-band-ok i{background:var(--ac-green)}
.ck-how-page.sq .ck-hw-rep-sum .ck-counts .ck-mk-warn{width:9px;height:9px;background:var(--ac-amber)}
.ck-how-page.sq .ck-hw-rep-sum .ck-counts .ck-mk-sug{width:9px;height:9px;box-shadow:inset 0 0 0 1.6px var(--ac-amber)}
.ck-how-page.sq .sq-hw-map .sq-map{margin:clamp(18px,2vw,26px) 0 0}
.ck-how-page.sq .sq-hw-score{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(24px,2.6vw,36px);align-items:center;
  margin-top:clamp(26px,2.8vw,36px);padding:clamp(24px,2.6vw,32px) 0 0;border-left:0;border-top:1px solid var(--line)}
.ck-how-page.sq .sq-hw-score .ck-hw-score-t{margin-top:0}
.ck-how-page.sq .sq-hw-score .ck-hw-score-p{max-width:64ch}
.ck-how-page.sq .sq-hw-score .ck-hw-note{grid-column:1/-1}
.ck-how-page.sq .sq-hw-calc{padding:4px 0 6px}
/* ⛔ 2026-10-26 his word on the e-commerce how-it-works (same template as the website one): "THESE can be centered cause left
   aligned makes right look empty" — the example's map, its score and the formula line, on a computer.
   · the map: its drawing fills the left of its stage (the frame, then the lanes from 45.16 % + the widest lane, measured 336 px
     at every width), so the stage moves right by half of what is left over — the drawing sits in the middle, the legend under
     it was already centred. The moved stage's empty right edge is clipped, so no sideways scroll.
   · the score: see the next block (his later word). */
@media (min-width:861px){
  .ck-how-page.sq .sq-hw-map{overflow-x:clip}
  .ck-how-page.sq .sq-hw-map .sq-map-st{transform:translateX(calc(27.42% - 168px))}
}
/* ⛔ 2026-10-26 (later) his: "can u make this score centered above all its paragraph text" — one column on the page's centre
   line: the ring, then "Score N out of 100", its sentence, then the formula line with its short rule. Tablets and computers;
   phones keep their ring-beside-text row (95-phone / the ≤640 rule above) until his phone check. */
@media (min-width:641px){
  .ck-how-page.sq .sq-hw-score{grid-template-columns:minmax(0,64ch);justify-content:center;justify-items:center;
    row-gap:clamp(16px,1.6vw,20px);text-align:center}
  .ck-how-page.sq .sq-hw-score .ck-hw-note{justify-self:center;text-align:center}
}

/* ── what it cannot tell you: one sentence a row, its mark beside it ── */
.ck-how-page.sq .sq-hw-cn .ck-hw-lawi{align-items:start}
.ck-how-page.sq .sq-hw-cn .ck-hw-lawi-m{grid-row:1;display:grid;place-items:center;width:var(--lm,48px);height:26px;color:var(--ac-grey-ink)}
.ck-how-page.sq .sq-hw-cn .ck-hw-lawi-m .ck-al{width:20px;height:20px}
.ck-how-page.sq .sq-hw-cn .ck-hw-lawi-p{grid-row:1;grid-column:2;margin:0}

/* ── the limits: four figures ── */
.ck-how-page.sq .sq-hw-nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,40px);
  margin:0 0 clamp(36px,4vw,56px);padding:0;list-style:none}
.ck-how-page.sq .sq-hw-nums li{display:flex;flex-direction:column;gap:8px;min-width:0}
.ck-how-page.sq .sq-hw-nums b{font-size:clamp(40px,4.2vw,60px);font-weight:700;letter-spacing:-.045em;line-height:1;
  font-variant-numeric:tabular-nums}
.ck-how-page.sq .sq-hw-nums li>span{font-size:var(--hw-body);line-height:1.4;color:var(--ink2)}
.ck-how-page.sq .sq-hw-ua{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}

/* ── phones — LAST in this file on purpose ── */
/* the shortest phones (568–600 px tall): on a first visit the cookie bar covered the opening's button by 13 px at
   320×568 — a smaller crumb gap and a 15 px lead lift it above the bar (the scanner hero's own short-phone steps) */
@media (max-width:640px) and (max-height:600px){
  .ck-how-page.sq .ck-hw-crumb{margin-bottom:10px}
  .ck-how-page.sq .ck-hw-lead{margin-top:10px;font-size:15px;line-height:1.5}
  .ck-how-page.sq .ck-hw-go-w{margin-top:16px}
}
@media (max-width:640px){
  .ck-how-page.sq .sq-hw-w{grid-row:2;grid-column:1/-1}
  .ck-how-page.sq .sq-hw-nums{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:26px;margin-left:var(--ph-in);margin-right:var(--ph-in)}
  .ck-how-page.sq .sq-hw-score{grid-template-columns:auto minmax(0,1fr);column-gap:18px}
  .ck-how-page.sq .sq-hw-cn .ck-hw-lawi-m{width:26px}
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   2026-10-21 · THE REPORT, REBUILT AROUND HIS SCORE HERO (.ck-rep only — the cookie report's <main>).
   His words: "when the report lands i wanna display that score like we had designed first in hero" ·
   "Copy for developer and copy report link is not visible, those 2 buttons need more visibility" ·
   "whole page feels dead/blank and not structured concisely enough to make sense … need logical structure and
   better visuals and cleaner for an eye to understand everything and click … MORE UX FOCUSED" ·
   the two closing blocks "look good but need something more on one, they look too of the same" ·
   and the Safari cut: "/hich cookies" in Technical details.
   The page now reads as five answers, each a heading on the canvas + its plate:
     the verdict (B's centred ring hero, chips that jump, the two copy actions at full size)
     → What needs attention → Who got your visitors' data → What else did we check? (ONE plate, four rows)
     → Want us to fix it? (the brand's dark plate, with this report on it) → Check another website (light).
   A dock carries the score and the copy action once the hero's buttons have scrolled away.
   ⛔ NAME TRAPS that bit here: `.ck-tk` is the tick icon (my first card name turned every tick into a white card) and
      `.ck-more` is the scanner page's centred grey line (it centred the whole plate). New names were swept against
      style.css, up/*.css and the SEO CSS before shipping — sweep again before adding one.
   ⛔ ck.css is shared with the Website SEO Scanner (its report's <main> is .ck-report too) — every rule here
      sits under .ck-rep, which only the cookie report's shell (tools/ck/page_report.py) carries.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */
.ck-rep{
  --rp-sec:clamp(84px,8.4vw,128px);     /* section → section */
  --rp-head:clamp(20px,2vw,28px);       /* a section heading → its plate */
  --rp-pad:clamp(22px,3vw,44px);        /* a plate's side inset */
}

/* ── 1 · the verdict ─────────────────────────────────────────────────────────────────────────────────────── */
.ck-rep .ck-hx-sec{padding-top:clamp(112px,9.2vw,140px)}
.ck-rep .ck-hx{display:flex;flex-direction:column;align-items:center;text-align:center}
.ck-rep .ck-hx-host{margin:0;max-width:100%}
.ck-rep .ck-hx-when{display:flex;flex-wrap:wrap;justify-content:center;margin:14px 0 0;font-size:14px;line-height:1.5;color:var(--ink2)}
/* 2026-10-26: no pill eyebrow (his word) — the site's name leads the date line, in ink */
.ck-rep .ck-hx-when .ck-hx-site{font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.ck-rep .ck-hx-when span+span::before{content:"·";margin:0 9px;color:var(--ink3)}
.ck-rep .ck-ring.ck-hx-ring{width:clamp(150px,12.4vw,178px);margin-top:clamp(24px,2.4vw,32px)}
.ck-rep .ck-hx-ring .ck-ring-tr,.ck-rep .ck-hx-ring .ck-ring-v{stroke-width:7}
.ck-rep .ck-hx-ring .ck-ring-v{stroke:url(#gr)}
.ck-rep .ck-hx-ring .ck-ring-n b{font-size:clamp(50px,4.3vw,62px)}
/* an incomplete scan: the ring keeps its number but loses its colour — it is not a verdict */
.ck-rep .ck-ring.is-na .ck-ring-v{stroke:var(--st-na)}
.ck-rep .ck-hx-ring .ck-ring-n span{margin-top:6px;font-size:13.5px}
/* no score (nothing to score, all quiet): the outcome's own mark stands where the ring would */
.ck-rep .ck-hx-ok{display:grid;place-items:center;width:clamp(96px,8vw,112px);aspect-ratio:1;margin-top:clamp(24px,2.4vw,32px);
  border-radius:50%;background:var(--ac-green-bg);color:var(--st-ok);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--st-ok) 30%,transparent)}
.ck-rep .ck-hx-ok svg{width:46%;height:46%}
.ck-rep .ck-hx-ok .ck-tk{color:inherit}   /* style.css gives every .ck-tk the brand blue */
.ck-rep .ck-hx-band{margin:clamp(18px,1.8vw,22px) 0 0;font-size:15.5px}
.ck-rep .ck-hx-h{display:flex;align-items:center;justify-content:center;gap:14px;margin:clamp(12px,1.2vw,16px) 0 0;
  font-size:clamp(38px,4.3vw,60px);font-weight:700;letter-spacing:-.042em;line-height:1.04;color:var(--ink);text-wrap:balance}
.ck-rep .ck-hx-h .ck-mk{width:16px;height:16px}
.ck-rep .ck-hx-p{max-width:56ch;margin:clamp(14px,1.4vw,18px) 0 0;font-size:clamp(16.5px,1.32vw,19px);line-height:1.55;color:var(--ink2);text-wrap:balance}

/* the counts — each a chip that jumps to (and opens) what it counts */
.ck-rep .ck-hx-k{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:clamp(22px,2.2vw,28px) 0 0;padding:0;list-style:none}
.ck-rep .ck-hx-c{display:inline-flex;align-items:center;gap:9px;height:42px;padding:0 18px 0 15px;border-radius:999px;
  font-size:15px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;
  transition:transform .3s var(--ease),box-shadow .3s ease,background .2s ease}
.ck-rep .ck-hx-c b{margin-right:-4px;font-weight:700;font-variant-numeric:tabular-nums}
.ck-rep .ck-hx-c .ck-mk{width:9px;height:9px}
.ck-rep .ck-hx-c .ck-mk-ok,.ck-rep .ck-hx-c .ck-mk-ok svg{width:15px;height:15px}
.ck-rep .ck-hx-c-no{background:var(--ac-red-bg);color:var(--ac-red-ink)}
.ck-rep .ck-hx-c-warn{background:var(--ac-amber-bg);color:var(--ac-amber-ink)}
.ck-rep .ck-hx-c-ok{background:var(--ac-green-bg);color:var(--ac-green-ink)}
.ck-rep .ck-hx-c-na{background:var(--ac-grey-bg);color:var(--ac-grey-ink)}
.ck-rep .ck-hx-c:hover{transform:translateY(-2px);box-shadow:0 10px 22px -12px rgba(10,10,12,.22)}
.ck-rep .ck-hx-c:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.ck-rep .ck-hx-gap{max-width:60ch;margin:14px 0 0;font-size:14px;line-height:1.5;color:var(--ink2);text-wrap:balance}
.ck-rep .ck-hx-gap a{color:var(--blue);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}

/* the two copy actions: full size, their own glyph, the second one as visible as the first (blue on white) */
.ck-rep .ck-hx-a{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:clamp(28px,2.8vw,36px)}
.ck-rep .ck-hx-a .btn{height:58px;padding:0 30px 0 26px;font-size:16.5px;letter-spacing:-.01em}
.ck-rep .ck-copy .ck-copy-a,.ck-rep .ck-copy .ck-copy-b{gap:10px}
.ck-rep .ck-gl{flex:none;width:19px;height:19px}
.ck-rep .ck-cp1{box-shadow:0 14px 30px -14px rgba(47,107,255,.75),0 2px 6px rgba(47,107,255,.18)}
.ck-rep .ck-cp2{background:var(--panel);color:var(--blue);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--blue) 42%,transparent),0 10px 26px -16px rgba(47,107,255,.45)}
.ck-rep .ck-cp2:hover{background:var(--ac-blue-bg);color:var(--blue);
  box-shadow:inset 0 0 0 1.5px var(--blue),0 14px 30px -16px rgba(47,107,255,.5)}
.ck-rep .btn.ck-copy.ck-cp2 .ck-tk{color:var(--blue)}
.ck-rep .ck-hx-priv{max-width:62ch;margin:16px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink2);text-wrap:pretty}
@media (min-width:900px){ .ck-rep .ck-hx-priv{max-width:none} }
.ck-rep .ck-hx .ck-sum-x{width:min(640px,100%);margin-top:18px;text-align:left}
.ck-rep .ck-hx-m{display:flex;flex-wrap:wrap;justify-content:center;max-width:860px;margin:clamp(22px,2.2vw,28px) 0 0;
  font-size:13.5px;line-height:1.6;color:var(--ac-grey-ink)}
.ck-rep .ck-hx-m span+span::before{content:"·";margin:0 9px;color:var(--ink3)}
/* how the score works — a small fold at the foot of the verdict */
.ck-rep .ck-hx-sc{width:min(640px,100%);margin-top:6px}
.ck-rep .ck-hx-scb{display:inline-flex;width:auto;justify-content:center;gap:6px;min-height:40px;padding:0 6px;
  font-size:13.5px;font-weight:600;letter-spacing:0;color:var(--ink2)}
.ck-rep .ck-hx-scb .ck-chev{width:14px;height:14px;transition:transform .35s var(--ease)}
.ck-rep .ck-hx-scb[aria-expanded="true"] .ck-chev{transform:rotate(180deg)}
.ck-rep .ck-hx-sct{padding:4px 0 2px}
.ck-rep .ck-hx-sct p{font-size:14px;line-height:1.6;color:var(--ink2);text-wrap:pretty}
.ck-rep .ck-hx-sct p+p{margin-top:8px}

/* the verdict arrives in its own order, on the tool pages' one speed (up/90-motion.css): the ring draws (app.js
   ckRings), its word follows, the rest rises 70 ms apart. Its foot (coverage + "How the score works") is usually below
   the first screen, so it carries its own data-reveal and arrives when it is reached — hence :not([data-reveal]). */
.ck.ck-go.ck-rep .ck-hx>:not([data-reveal]){transition:opacity var(--mv-d,.7s) var(--ease),transform var(--mv-d,.7s) var(--ease)}
.ck.ck-go.ck-rep .ck-hx.ck-in>:not([data-reveal]){opacity:1;transform:none}
.ck.ck-go.ck-rep .ck-hx[data-reveal]{opacity:1;transform:none}
.ck.ck-go.ck-rep .ck-hx:not(.ck-in)>:not([data-reveal]){opacity:0;transform:translateY(14px)}
.ck.ck-go.ck-rep .ck-hx:not(.ck-in)>.ck-hx-ring{transform:scale(.94)}
/* the site's loader (html.ld-on, ~1.7 s on a fresh visit) covers the page while the report is drawn under it: the verdict
   waits for it to lift, so the landing is seen (app.js ckRings waits for the same moment before it counts) */
html.ld-on .ck.ck-go.ck-rep .ck-hx.ck-in>:not([data-reveal]){opacity:0;transform:translateY(14px)}
html.ld-on .ck.ck-go.ck-rep .ck-hx.ck-in .ck-hx-k li{opacity:0;transform:translateY(8px) scale(.96)}
.ck.ck-go.ck-rep .ck-hx>.ck-hx-when{transition-delay:.07s}
.ck.ck-go.ck-rep .ck-hx>.ck-hx-ring,.ck.ck-go.ck-rep .ck-hx>.ck-hx-ok{transition-delay:.14s}
.ck.ck-go.ck-rep .ck-hx>.ck-hx-band{transition-delay:.56s}
.ck.ck-go.ck-rep .ck-hx>.ck-hx-h{transition-delay:.21s}
.ck.ck-go.ck-rep .ck-hx>.ck-hx-p{transition-delay:.28s}
.ck.ck-go.ck-rep .ck-hx>.ck-hx-k,.ck.ck-go.ck-rep .ck-hx>.ck-hx-gap{transition-delay:.35s}
.ck.ck-go.ck-rep .ck-hx>.ck-hx-a{transition-delay:.42s}
.ck.ck-go.ck-rep .ck-hx>.ck-hx-priv{transition-delay:.49s}
.ck.ck-go.ck-rep .ck-hx-k li{transition:opacity var(--mv-d,.7s) var(--ease),transform var(--mv-d,.7s) var(--ease);transition-delay:calc(.35s + var(--k,0) * var(--mv-s,70ms))}
.ck.ck-go.ck-rep .ck-hx:not(.ck-in) .ck-hx-k li{opacity:0;transform:translateY(8px) scale(.96)}
.ck-rep .ck-hx-k li:nth-child(2){--k:1} .ck-rep .ck-hx-k li:nth-child(3){--k:2} .ck-rep .ck-hx-k li:nth-child(4){--k:3}

/* ── the sections: a heading on the canvas, then its plate ───────────────────────────────────────────────── */
.ck-rep .ck-rsec{padding-top:var(--rp-sec)}
.ck-rep .ck-rsec>.wrap>.ck-ph{margin-bottom:var(--rp-head)}
/* ⛔ only each section's own heading — the tables inside Technical details keep their small titles */
.ck-rep .ck-rsec>.wrap>.ck-ph .ck-h2{font-size:clamp(28px,2.7vw,38px);letter-spacing:-.032em;line-height:1.1}
.ck-rep .ck-rsec>.wrap>.ck-ph .ck-pl{margin-top:10px;font-size:clamp(15.5px,1.15vw,17px)}

/* ── 2 · What needs attention — rows with room, the state as a tag, the fix on its own tint ──────────────── */
.ck-rep .ck-iss{padding:6px var(--rp-pad)}
.ck-rep .ck-iss .ck-rows{margin-top:0}
.ck-rep .ck-iss .ck-row-h{grid-template-columns:20px minmax(0,1fr) auto 18px;gap:16px;padding:26px 0}
.ck-rep .ck-iss .ck-row-h>.ck-mk{width:12px;height:12px;margin:6px 0 0 4px}
.ck-rep .ck-iss .ck-row-h>.ck-mk-ok{width:18px;height:18px;margin:3px 0 0 1px}
.ck-rep .ck-iss .ck-row-x{max-width:66ch;font-size:clamp(16.5px,1.3vw,18.5px);letter-spacing:-.016em;line-height:1.42}
.ck-rep .ck-iss .ck-row-w{margin-top:7px;font-size:14px}
.ck-rep .ck-iss .ck-row-h>.ck-st{margin-top:1px;padding:5px 12px;border-radius:999px;font-size:13.5px}
.ck-rep .ck-iss .ck-row-h>.ck-st-no{background:var(--ac-red-bg)}
.ck-rep .ck-iss .ck-row-h>.ck-st-warn{background:var(--ac-amber-bg)}
.ck-rep .ck-iss .ck-row-h>.ck-st-ok{background:var(--ac-green-bg)}
.ck-rep .ck-iss .ck-row-h>.ck-st-na{background:var(--ac-grey-bg)}
.ck-rep .ck-iss .ck-row-h .ck-chev{margin-top:4px}
.ck-rep .ck-iss .ck-row-in{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:24px clamp(28px,3.4vw,52px);padding:0 0 30px 36px}
.ck-rep .ck-iss .ck-part-fix{padding:20px 22px 22px;border-radius:20px;background:var(--ac-blue-bg)}
.ck-rep .ck-iss .ck-part-fix .ck-part-h{color:var(--ac-blue-ink)}
.ck-rep .ck-iss .ck-part-fix .ck-tool:not([aria-pressed="true"]){background:var(--panel)}

/* ── 4 · What else did we check? — ONE plate, four rows, each with its state's mark ────────────────────── */
.ck-rep .ck-mplate{padding:4px var(--rp-pad)}
.ck-rep .ck-m+.ck-m{border-top:1px solid var(--line)}
.ck-rep .ck-m-b{display:grid;grid-template-columns:42px minmax(0,1fr) 18px;align-items:center;gap:18px;padding:22px 0;text-align:left;color:var(--ink)}
.ck-rep .ck-m-b:hover{color:var(--ink)}
.ck-rep .ck-m-b:hover .ck-m-h{color:var(--blue)}
.ck-rep .ck-ms{display:grid;place-items:center;width:42px;height:42px;border-radius:50%}
.ck-rep .ck-ms-ok{background:var(--ac-green-bg);color:var(--st-ok)}
.ck-rep .ck-ms-ok svg{width:18px;height:18px}
.ck-rep .ck-ms-ok .ck-tk{color:inherit}
.ck-rep .ck-ms-warn{background:var(--ac-amber-bg)}
.ck-rep .ck-ms-no{background:var(--ac-red-bg)}
.ck-rep .ck-ms-na{background:var(--ac-grey-bg)}
.ck-rep .ck-ms-t{background:var(--ac-blue-bg)}
.ck-rep .ck-m-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.ck-rep .ck-m-h{font-size:clamp(17px,1.35vw,19px);font-weight:700;letter-spacing:-.02em;line-height:1.3;color:var(--ink);transition:color .2s ease}
.ck-rep .ck-m-n{font-size:14.5px;line-height:1.45;color:var(--ink2)}
.ck-rep .ck-m-b .ck-chev{transition:transform .35s var(--ease)}
.ck-rep .ck-m-b[aria-expanded="true"] .ck-chev{transform:rotate(180deg)}
.ck-rep .ck-m-in{padding:0 0 28px 60px}
/* ⛔ THE SAFARI CUT ("/hich cookies"): the site gives every .panel `-webkit-mask-image` so Safari clips to its
   rounded corner. Inside a fold these tables lose their plate chrome and their padding, so the corner arc sliced
   the first letter of their heading (measured in the Mac's WebKit: the W's left 6 px gone; Chrome never shows it).
   A plate without chrome needs no mask and no corner. */
.ck-rep .ck-m-in .panel.ck-plate{border-radius:0;-webkit-mask-image:none;mask-image:none}

/* ── 5 · Want us to fix it? — the brand's dark plate (the scanner page's FREE material), this report on it ─ */
.ck-rep .ck-fx-sec{padding-top:clamp(104px,10vw,156px)}
.ck-rep .ck-fx{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  align-items:center;column-gap:clamp(32px,5.4vw,88px);row-gap:36px;padding:clamp(46px,5.2vw,80px) clamp(28px,5.2vw,80px);
  border-radius:var(--r-panel);background:var(--dark);color:var(--white);text-align:left;
  box-shadow:0 34px 80px -46px rgba(10,10,12,.34),0 2px 8px rgba(10,10,12,.05);outline:1px solid var(--plate-ring);outline-offset:-1px}
html[data-theme="dark"] .ck-rep .ck-fx{box-shadow:var(--sh-slab)}
.ck-rep .ck-fx>*{position:relative;z-index:1}
.ck-rep .ck-fx>.ck-fx-aur{position:absolute;inset:-30% -10%;z-index:0;filter:blur(80px);opacity:.34;pointer-events:none;transform:translateZ(0)}
.ck-rep .ck-fx-aur i{position:absolute;display:block;border-radius:50%}
.ck-rep .ck-fx-aur i:nth-child(1){background:var(--aur-c);left:-6%;top:40%;width:44%;height:80%}
.ck-rep .ck-fx-aur i:nth-child(2){background:var(--aur-d);left:56%;top:-10%;width:50%;height:72%}
.ck-rep .ck-fx-h{margin:0;font-size:clamp(34px,3.7vw,54px);font-weight:700;letter-spacing:-.036em;line-height:1.04;color:var(--white);text-wrap:balance}
/* the footer's gradient on dark — ⛔ letters cut by negative letter-spacing: padding out, margin back */
.ck-rep .ck-fx-g{background:linear-gradient(92deg,#8FB0FF,#C6A8FF);-webkit-background-clip:text;background-clip:text;color:transparent;
  padding:.1em .12em;margin:0 -.12em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ck-rep .ck-fx-p{max-width:40ch;margin:18px 0 0;font-size:clamp(16.5px,1.3vw,18.5px);line-height:1.55;color:var(--plate-1)}
.ck-rep .ck-fx-a{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:clamp(28px,2.8vw,36px)}
.ck-rep .ck-fx-b{height:56px;padding:0 28px;font-size:16px}
.ck-rep .ck-fx-b .ck-arr,.ck-rep .ck-fx-t .ck-arr{transition:transform .3s var(--ease)}
.ck-rep .ck-fx-b:hover .ck-arr,.ck-rep .ck-fx-t:hover .ck-arr{transform:translateX(3px)}
.ck-rep .ck-fx-b:focus-visible,.ck-rep .ck-fx-t:focus-visible{outline:2px solid #fff;outline-offset:3px}
.ck-rep .ck-fx-t{min-height:44px;color:var(--white)}
.ck-rep .ck-fx-t:hover{color:#C6D6FF}
/* the card: this report, handed over — a second sheet under it, the way a printed report lies on a desk */
.ck-rep .ck-fx-r{display:flex;justify-content:flex-end;min-width:0}
.ck-rep .ck-rc{position:relative;flex:0 1 430px;min-width:0;padding:22px 24px 20px;border-radius:24px;background:var(--panel);color:var(--ink);
  box-shadow:0 44px 80px -34px rgba(0,0,0,.7),0 2px 6px rgba(0,0,0,.22)}
.ck-rep .ck-rc::before{content:"";position:absolute;z-index:-1;inset:12px -12px -12px 12px;border-radius:24px;background:rgba(255,255,255,.10);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.ck-rep .ck-rc-hd{margin:0}
.ck-rep .ck-rc-host{display:block;margin:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:14px;font-weight:600;line-height:1.4;color:var(--ink)}
.ck-rep .ck-rc-row{display:flex;align-items:center;gap:15px;margin-top:18px}
.ck-rep .ck-rc-s{position:relative;flex:none;display:grid;place-items:center;width:60px;height:60px}
.ck-rep .ck-rc-s.ck-ring{width:60px}
.ck-rep .ck-rc-s svg{position:absolute;inset:0}
.ck-rep .ck-rc-s .ck-ring-tr,.ck-rep .ck-rc-s .ck-ring-v{stroke-width:9}
.ck-rep .ck-rc-s .ck-ring-v{stroke:url(#gr);transition:none}
.ck-rep .ck-rc-s.is-na .ck-ring-v,.ck-rep .ck-dk-s.is-na .ck-ring-v,.ck-rep .ck-hx-ring.is-na .ck-ring-v{stroke:var(--st-na)}
.ck-rep .ck-rc-s b{position:relative;font-size:20px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.ck-rep .ck-rc-s0{border-radius:50%;background:var(--ac-grey-bg)}
.ck-rep .ck-rc-o{display:flex;flex-direction:column;gap:3px;margin:0}
.ck-rep .ck-rc-o b{font-size:20px;font-weight:700;letter-spacing:-.024em;line-height:1.2}
.ck-rep .ck-rc-o span{font-size:14px;font-weight:600}
.ck-rep .ck-rc-l{margin:18px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.ck-rep .ck-rc-l li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:11px;align-items:start;padding:13px 0;
  border-bottom:1px solid var(--line);font-size:14px;line-height:1.45;color:var(--ink)}
.ck-rep .ck-rc-l li:last-child{border-bottom:0;padding-bottom:2px}
.ck-rep .ck-rc-l li>span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ck-rep .ck-rc-l .ck-mk{justify-self:center;margin-top:5px}
.ck-rep .ck-rc-l .ck-mk-ok{margin-top:1px}
.ck-rep .ck-rc-more{display:block!important;padding-left:27px!important;font-weight:600;color:var(--ink2)!important}
/* the card's wrapper (.ck-fx-r) carries its own data-reveal: beside the words on a computer it arrives with them, a
   step after the heading; under them on a phone it arrives when it is reached */

/* "Check another website" stays the light, quiet block under it */
.ck-rep #ck-ragain{padding-top:clamp(96px,9vw,140px)}

/* ── the dock ──────────────────────────────────────────────────────────────────────────────────────────── */
.ck-rep .ck-dock{position:fixed;z-index:240;left:50%;bottom:max(18px,env(safe-area-inset-bottom));width:max-content;max-width:calc(100vw - 28px);
  opacity:0;transform:translate(-50%,28px);pointer-events:none;transition:opacity .3s ease,transform .5s var(--ease)}
.ck-rep .ck-dock.is-on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.ck-rep .ck-dk-in{display:flex;align-items:center;gap:14px;height:66px;padding:0 9px 0 10px;border-radius:999px;
  background:var(--nav-bg);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
  box-shadow:0 24px 60px -24px rgba(10,10,12,.35),0 2px 8px rgba(10,10,12,.06),inset 0 0 0 1px var(--line)}
.ck-rep .ck-dk-s{position:relative;flex:none;display:grid;place-items:center;width:48px;height:48px}
.ck-rep .ck-dk-s.ck-ring{width:48px}
.ck-rep .ck-dk-s svg{position:absolute;inset:0}
.ck-rep .ck-dk-s .ck-ring-tr,.ck-rep .ck-dk-s .ck-ring-v{stroke-width:9}
.ck-rep .ck-dk-s .ck-ring-v{stroke:url(#gr);transition:none}
.ck-rep .ck-dk-s b{position:relative;font-size:16px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.ck-rep .ck-dk-s0{border-radius:50%;background:var(--ac-grey-bg)}
.ck-rep .ck-dk-t{display:flex;flex-direction:column;min-width:0;margin:0;padding-right:4px;line-height:1.25}
.ck-rep .ck-dk-t b{font-size:15px;font-weight:700;letter-spacing:-.015em;white-space:nowrap}
.ck-rep .ck-dk-t span{max-width:24ch;overflow:hidden;font-size:12.5px;color:var(--ink2);white-space:nowrap;text-overflow:ellipsis}
.ck-rep .ck-dk-a{display:flex;gap:8px}
.ck-rep .ck-dk-b{height:48px;padding:0 20px 0 17px;font-size:14.5px}
.ck-rep .ck-dk-b .ck-gl{width:17px;height:17px}
@media (max-width:860px){ .ck-rep .ck-dk-t{display:none} }

/* ── dark theme: the chips and tags keep their pale grounds (the -bg tokens turn to tints there) ────────── */
html[data-theme="dark"] .ck-rep .ck-cp2{background:var(--panel)}
html[data-theme="dark"] .ck-rep .ck-cp1{box-shadow:0 14px 30px -14px rgba(75,132,255,.6)}

/* ── reduced motion: everything in place at once ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .ck-rep .ck-dock,.ck-rep .ck-hx>*,.ck-rep .ck-hx-k li,.ck-rep .ck-rc{transition:none!important}
}

/* ── phones (≤640): one column, the buttons full width, the dock across the bottom ──────────────────────── */
@media (max-width:640px){
  .ck-rep{--rp-sec:72px;--rp-head:18px;--rp-pad:20px}
  .ck-rep .ck-hx-sec{padding-top:100px}
  .ck-rep .ck-hx-when{font-size:13.5px}
  .ck-rep .ck-ring.ck-hx-ring{width:148px;margin-top:22px}
  .ck-rep .ck-hx-ring .ck-ring-n b{font-size:48px}
  .ck-rep .ck-hx-h{font-size:clamp(32px,9.4vw,38px);gap:11px}
  .ck-rep .ck-hx-p{font-size:16.5px}
  .ck-rep .ck-hx-k{gap:8px}
  .ck-rep .ck-hx-c{height:40px;padding:0 15px 0 13px;font-size:14.5px}
  .ck-rep .ck-hx-a{flex-direction:column;align-self:stretch;gap:10px}
  .ck-rep .ck-hx-a .btn{width:100%;height:56px;justify-content:center}
  .ck-rep .ck-hx-m{display:block}
  .ck-rep .ck-hx-m span{display:block}
  .ck-rep .ck-hx-m span+span::before{content:none;margin:0}
  .ck-rep .ck-rsec>.wrap>.ck-ph .ck-h2{font-size:26px}
  .ck-rep .ck-iss .ck-row-h{grid-template-columns:16px minmax(0,1fr) 18px;gap:12px;padding:20px 0}
  .ck-rep .ck-iss .ck-row-h>.ck-mk{margin-left:2px}
  .ck-rep .ck-iss .ck-row-h>.ck-st-d{display:none}
  .ck-rep .ck-iss .ck-row-in{grid-template-columns:minmax(0,1fr);padding:0 0 24px 28px}
  .ck-rep .ck-iss .ck-part-fix{margin-left:-28px;padding:18px 16px 18px}
  .ck-rep .ck-m-b{grid-template-columns:36px minmax(0,1fr) 18px;gap:14px;padding:18px 0}
  .ck-rep .ck-ms{width:36px;height:36px}
  .ck-rep .ck-m-in{padding:0 0 22px}
  .ck-rep .ck-fx{grid-template-columns:minmax(0,1fr);padding:38px 22px 26px;row-gap:30px}
  .ck-rep .ck-fx-h{font-size:34px}
  .ck-rep .ck-fx-a{flex-direction:column;align-items:stretch;gap:8px}
  .ck-rep .ck-fx-b{justify-content:center}
  .ck-rep .ck-fx-t{justify-content:center}
  .ck-rep .ck-fx-r{display:block}
  .ck-rep .ck-rc{margin-right:12px;padding:18px 18px 16px}
  .ck-rep .ck-dock{left:12px;right:12px;width:auto;max-width:none;bottom:max(12px,env(safe-area-inset-bottom));transform:translateY(28px)}
  .ck-rep .ck-dock.is-on{transform:none}
  .ck-rep .ck-dk-in{gap:9px;height:62px;padding:0 7px 0 7px}
  .ck-rep .ck-dk-a{flex:1;min-width:0;gap:7px}
  .ck-rep .ck-dk-b{height:48px;padding:0 14px}
  .ck-rep .ck-dk-b.ck-cp1{flex:1;min-width:0}
  .ck-rep .ck-dk-b.ck-cp2{flex:none;width:48px;padding:0}
  .ck-rep .ck-dk-b.ck-cp2 .ck-cp-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   Website SEO Scanner report — STAGE 3 of his redesign (2026-10-26): "the SEO report rebuilt like the cookie report".
   Its <main> carries .ck-rep now, so the Cookie Scanner report's own layer (70-report.css) draws the score hero, the
   chips, the rows, the folds, the dark fix-it plate and the dock. This file holds only what the SEO report has and
   the cookie report has not. ⛔ Every rule under .sq-report — the cookie pages cannot be touched from here.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── a suggestion: the hollow amber ring's role colour (63-seo-how.css) on the chips, the row tags and the card ── */
.sq-report .ck-hx-c-sug{background:var(--ac-amber-bg);color:var(--ac-amber-ink)}
.sq-report .ck-hx-c .ck-mk-sug,.sq-report .ck-rc-l .ck-mk-sug{box-shadow:inset 0 0 0 1.6px var(--ac-amber)}
.sq-report .ck-iss .ck-row-h>.ck-st-sug{background:var(--ac-amber-bg)}

/* ── what needs attention: the engine's three severities, each a quiet line over its rows, inside ONE plate ── */
.sq-report .sq-sevg-h{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0;padding:26px 0 12px 4px;
  font-size:14.5px;line-height:1.5;color:var(--ink2)}
.sq-report .sq-sevg:first-child .sq-sevg-h{padding-top:24px}   /* his word: "above warning not enough padding" — the line sits where a row's words would */
.sq-report .sq-sevg+.sq-sevg{border-top:1px solid var(--line)}
.sq-report .sq-sevg-h b{font-weight:650;color:var(--ink)}
.sq-report .sq-sevg-h .ck-mk{width:10px;height:10px;margin-right:2px}
.sq-report .ck-iss .sq-ul{margin:0}

/* ── the score, worked out: the table inside the hero's fold, left-aligned, the width of a reading column ── */
.sq-report .ck-hx-sc{width:min(760px,100%)}
.sq-report .sq-hx-calc{padding-top:12px;text-align:left}
.sq-report .sq-hx-calc>*+*{margin-top:14px}
.sq-report .sq-calc-w{overflow-x:auto;-webkit-overflow-scrolling:touch}
.sq-report .sq-hx-calc .sq-calc{width:100%;min-width:460px}

/* ── what this scan covered: the map, then its counts ── */
.sq-report .sq-cov-p .sq-facts{margin-top:clamp(20px,2.4vw,30px)}
/* the stage keeps room for four lanes; with fewer it is mostly air above and below the drawn page — trim the plate's
   share of it (four lanes still clear: the top pill sits 50 px into the stage) */
@media (min-width:861px){
  .sq-report .sq-cov-p .sq-map{margin-top:-34px}
  .sq-report .sq-cov-p .sq-leg{margin-top:-34px}
}

/* ── the folds of "What else did we check?" — their contents sit on the fold's own line ── */
.sq-report .ck-m-in>.sq-rlead{margin:0 0 16px;max-width:68ch}
.sq-report .ck-m-in>:is(.sq-list,.sq-facts,.sq-cannot){margin:0}
.sq-report .sq-rlim{margin-top:clamp(16px,1.8vw,22px)}
.sq-report .sq-notes-w{margin-top:clamp(20px,2.2vw,28px)}
.sq-report .sq-notes-w .ck-part-h{margin-bottom:10px}
.sq-report .sq-ms-t{color:var(--ac-blue-ink)}
.sq-report .sq-ms-al{color:var(--ac-grey-ink)}
.sq-report .sq-ms-al .ck-al{width:18px;height:18px}

@media (max-width:640px){
  .sq-report .sq-sevg-h{padding:22px 0 10px 2px;font-size:14px}
  .sq-report .sq-sevg:first-child .sq-sevg-h{padding-top:20px}
  .sq-report .sq-hx-calc .sq-calc{min-width:420px}
}

/* ── the waiting picture: the pages the crawl reaches (seo_page_report.wait_wires, also the e-commerce report's) ──
   ⛔ 2026-10-26 his word: "looks unfinished … right side where it feels cut off / empty". Each line ends in a drawn
   page that lights when the dot arrives (SMIL, the dot's own clock); further right, dashed grey pages not yet opened. */
:is(.sq-report,.ck-botp) .sq-wc{fill:var(--panel);stroke:var(--line);stroke-width:1.2;filter:drop-shadow(0 8px 16px rgba(10,10,12,.07))}
:is(.sq-report,.ck-botp) .sq-wc-bar{fill:none;stroke:var(--line);stroke-width:1.2}
:is(.sq-report,.ck-botp) .sq-wc-d,:is(.sq-report,.ck-botp) .sq-wc-b{fill:var(--line)}
:is(.sq-report,.ck-botp) .sq-wc-hl{fill:none;stroke-width:2}
:is(.sq-report,.ck-botp) .sq-wg-l{fill:none;stroke:var(--ac-grey);stroke-width:1.3;stroke-dasharray:3 5;stroke-linecap:round;opacity:.55;
  animation:sqMarch 1.6s linear infinite}
:is(.sq-report,.ck-botp) .sq-wg-c{fill:none;stroke:var(--ac-grey);stroke-width:1.2;stroke-dasharray:4 4}
:is(.sq-report,.ck-botp) .sq-wg-b{fill:var(--ac-grey);opacity:.45}
:is(.sq-report,.ck-botp) .sq-wg{animation:sqGhost 2.8s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes sqMarch{to{stroke-dashoffset:-16}}
@keyframes sqGhost{0%,100%{opacity:.4}50%{opacity:.85}}
.sq-report .sq-wait.is-queue .sq-wc-hl{display:none}
.sq-report .sq-wait.is-queue .sq-wg,.sq-report .sq-wait.is-queue .sq-wg-l{animation:none;opacity:.35}
@media (prefers-reduced-motion:reduce){
  :is(.sq-report,.ck-botp) .sq-wc-hl{display:none}
  :is(.sq-report,.ck-botp) .sq-wg,:is(.sq-report,.ck-botp) .sq-wg-l{animation:none}
}
/* the drawn start page hangs ~45 px below the picture's box; with the pages beside it the list needs that air back */
@media (min-width:861px){
  .sq-report .sq-wait .sq-stages{margin-top:clamp(48px,4.4vw,64px)}
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   The closing scan section — the same space above it and below it, on every tool page that has one.
   ⛔ 2026-10-26 his word: "gap above is smaller than below, need equal gaps. on all pages this section make sure equal
   gap". Above it sits the page's own section step; below it the footer's top margin (#kontaktai), and the two were set
   apart (reports: 130 above · 192 below at 1440; how-it-works: 166 · 130). The footer now takes the page's step:
   the reports (cookie, website SEO, e-commerce — #ck-ragain's step) and the how-it-works pages (--hw-sec). Phones: 92.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */
body:has(main.ck-rep) #kontaktai{margin-top:clamp(96px,9vw,140px)}
body:has(main.ck-how-page) #kontaktai{margin-top:clamp(112px,11.5vw,168px)}
@media (max-width:640px){
  body:has(main:is(.ck-rep,.ck-how-page)) #kontaktai{margin-top:92px}
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   The robot page (/bot/) picture — his pick from the Claude Design canvas (board A, made symmetrical, soft green and
   red; 2026-10-26). The typed address forks into two identical frames; in each, one page branches into three cards:
   the cookie check's three visits and the SEO scan's pages. ≥1100 px the fork is drawn; narrower, a tree: one line
   down the left from the address, a branch into each check's title above its frame. Markup: tools/seo/build_seo.bot_figure().
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */
.ck-botp .ck-bf{max-width:1040px;margin:clamp(40px,4.4vw,60px) auto 0}
.ck-botp .ck-bf-box{position:relative;display:flex;align-items:center;justify-content:space-between;width:340px;max-width:100%;height:52px;
  margin:0 auto;padding:0 6px 0 22px;box-sizing:border-box;background:var(--panel);border-radius:999px;box-shadow:var(--sh-panel);
  font-size:16px;color:var(--ink2)}
.ck-botp .ck-bf-box i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--blue);color:#fff;
  box-shadow:0 14px 30px -14px rgba(47,107,255,.75)}
.ck-botp .ck-bf-fork{display:block;width:1040px;height:98px;margin:0 auto;overflow:visible}
.ck-botp .ck-bf-fork path,.ck-botp .ck-bf-ln path{fill:none;stroke-width:2;stroke-linecap:round}
.ck-botp .ck-bf-ln path{stroke-width:1.6}
.ck-botp .ck-bf-d{fill:var(--blue)}
.ck-botp .ck-bf-d2{fill:var(--g3)}
.ck-botp .ck-bf-cols{display:grid;grid-template-columns:repeat(2,minmax(0,400px));justify-content:center;column-gap:80px;row-gap:64px}
.ck-botp .ck-bf-col{position:relative;margin:0;min-width:0}
.ck-botp .ck-bf-node{position:absolute;z-index:3;left:50%;top:-7px;width:14px;height:14px;margin-left:-7px;border-radius:50%;
  background:var(--blue);box-shadow:0 0 0 4px var(--panel),0 6px 14px -4px rgba(47,107,255,.6)}
.ck-botp .ck-bf-fr .frame{text-align:left}
.ck-botp .ck-bf-vp{position:relative;aspect-ratio:400 / 220}
.ck-botp .ck-bf-ln{position:absolute;inset:0;width:100%;height:100%}
.ck-botp .ck-bf-pg,.ck-botp .ck-bf-kid{position:absolute;box-sizing:border-box;background:var(--panel);border:1.5px solid var(--line);border-radius:10px}
.ck-botp .ck-bf-pg{left:39.5%;top:6.4%;width:21%;height:20.9%;border-color:var(--blue)}
.ck-botp .ck-bf-kid{top:47.3%;width:25%;height:41.8%;animation:ckBfLit 4.2s var(--ease) infinite}
.ck-botp .ck-bf-k1{left:7.5%}
.ck-botp .ck-bf-k2{left:37.5%;animation-delay:.3s}
.ck-botp .ck-bf-k3{left:67.5%;animation-delay:.6s}
.ck-botp :is(.ck-bf-pg,.ck-bf-kid) i{position:absolute;left:10px;height:5px;border-radius:3px;background:var(--line)}
.ck-botp :is(.ck-bf-pg,.ck-bf-kid) i:first-child{top:12px;right:12px}
.ck-botp :is(.ck-bf-pg,.ck-bf-kid) i+i{top:24px;right:34px}
.ck-botp .ck-bf-chip{position:absolute;left:9px;bottom:9px;display:inline-flex;align-items:center;gap:5px;padding:3px 9px 3px 7px;border-radius:999px;
  font-size:11.5px;font-weight:600;line-height:1.3;white-space:nowrap;animation:ckBfPop 4.2s cubic-bezier(.34,1.56,.64,1) infinite;animation-delay:inherit}
.ck-botp .ck-bf-chip b{width:6px;height:6px;border-radius:50%}
.ck-botp .ck-bf-ok{background:var(--ac-green-bg);color:var(--ac-green-ink)}
.ck-botp .ck-bf-ok b{background:var(--ac-green)}
.ck-botp .ck-bf-no{background:var(--ac-red-bg);color:var(--ac-red-ink)}
.ck-botp .ck-bf-no b{background:var(--ac-red)}
.ck-botp .ck-bf-na{background:var(--ac-grey-bg);color:var(--ac-grey-ink)}
.ck-botp .ck-bf-na b{background:var(--ac-grey)}
.ck-botp .ck-bf-cap{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:22px;text-align:center}
.ck-botp .ck-bf-cap b{font-size:clamp(18px,1.5vw,21px);font-weight:650;letter-spacing:-.01em;line-height:1.25;color:var(--ink)}
.ck-botp .ck-bf-cap span{max-width:40ch;font-size:15px;line-height:1.5;color:var(--ink2);text-wrap:balance}
@keyframes ckBfLit{0%,8%{border-color:var(--line)}20%,80%{border-color:var(--blue)}100%{border-color:var(--line)}}
@keyframes ckBfPop{0%,14%{opacity:0;transform:scale(.8)}26%,86%{opacity:1;transform:none}100%{opacity:0;transform:scale(.8)}}
/* ── ≤1099 px: no room for the two frames side by side, so the fork becomes a tree — the house phone tree (the scanner
      hero's: one line down the left, a curve into each part). ⛔ 2026-10-26 his word on the stacked version before this:
      "this part is misleading cause it looks like cookie check and points down" — a line ran from the first frame's
      caption into the second frame, so the cookie check read as leading into the SEO scan. Now the address drops ONE
      line down the left; it branches into each check's title, and each title stands above its own frame.
      --sx the line · --ti the titles and frames · --ny a title's first-line centre · --r the curve · --g0/--rg gaps ── */
@media (max-width:1099px){
  .ck-botp .ck-bf{--sx:20px;--ti:48px;--ny:11px;--r:10px;--g0:30px;--rg:48px;max-width:460px}
  .ck-botp .ck-bf-fork{display:none}
  .ck-botp .ck-bf-box{width:100%;margin-bottom:var(--g0)}
  .ck-botp .ck-bf-box::after{content:"";position:absolute;left:var(--sx);top:100%;width:2px;height:var(--g0);margin-left:-1px;background:var(--g1)}
  .ck-botp .ck-bf-cols{grid-template-columns:minmax(0,1fr);row-gap:var(--rg)}
  .ck-botp .ck-bf-col{display:flex;flex-direction:column;padding-left:var(--ti)}
  /* the line down the left: past the first check and the gap after it, into the second one's curve */
  .ck-botp .ck-bf-col::before{content:"";position:absolute;left:var(--sx);top:0;width:2px;margin-left:-1px}
  .ck-botp .ck-bf-col:first-child::before{bottom:calc(-1 * var(--rg));background:linear-gradient(var(--g1),var(--g3))}
  .ck-botp .ck-bf-col:last-child::before{height:calc(var(--ny) - var(--r));background:var(--g3)}
  /* the branch into a title: a quarter curve off the line, ending in a dot — blue for the cookie check, violet for the
     SEO scan (the two dots that travel the desktop fork) */
  .ck-botp .ck-bf-node{--c:var(--g1);left:calc(var(--sx) - 1px);top:calc(var(--ny) - var(--r));width:calc(var(--ti) - var(--sx) - 14px);
    height:var(--r);margin:0;box-sizing:border-box;border:0 solid var(--c);border-width:0 0 2px 2px;border-radius:0 0 0 var(--r);
    background:none;box-shadow:none}
  .ck-botp .ck-bf-col:last-child .ck-bf-node{--c:var(--g3)}
  .ck-botp .ck-bf-node::after{content:"";position:absolute;right:-8px;bottom:-3px;width:8px;height:8px;border-radius:50%;background:var(--c)}
  /* the title and its line above the frame, on the tree's left line */
  .ck-botp .ck-bf-cap{order:-1;align-items:flex-start;margin:0 0 16px;text-align:left}
  .ck-botp .ck-bf-cap span{max-width:none}
  /* a narrower frame: wider cards (centres stay on the lines' 20 · 50 · 80 %) and a smaller word on each, so the word
     stays inside its card (at 320 px "Reject" and "Problem" ran out of theirs) */
  .ck-botp .ck-bf-fr{container-type:inline-size}
}
@container (max-width:339px){
  .ck-botp .ck-bf-kid{width:28%}
  .ck-botp .ck-bf-k1{left:6%}
  .ck-botp .ck-bf-k2{left:36%}
  .ck-botp .ck-bf-k3{left:66%}
  .ck-botp .ck-bf-chip{left:6px;bottom:7px;gap:4px;padding:2px 7px 2px 5px;font-size:10.5px}
}
@container (max-width:269px){
  .ck-botp .ck-bf-chip{left:5px;gap:3px;padding:2px 6px 2px 4px;font-size:9.5px}
  .ck-botp .ck-bf-chip b{width:5px;height:5px}
}
@media (max-width:640px){
  .ck-botp .ck-bf{margin-top:44px}
}
@media (prefers-reduced-motion:reduce){
  .ck-botp .ck-bf-d{display:none}
  .ck-botp .ck-bf-kid{animation:none;border-color:var(--blue)}
  .ck-botp .ck-bf-chip{animation:none}
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   2026-10-21 · THE .sq PULSE ON THE TOOL PAGES (v2 only — this file ships in ck.css, which only the tools load).
   src.html:680 gives every `.sq` the homepage's icon-square pulse (sqpulse, 40 % ↔ 100 % every 2.8 s). The Website SEO
   Scanner uses `sq` as its scope class on <main> (scanner + report), and 2e3545c put it on the /tools/ SEO card picture —
   so the whole SEO page, its report and that card faded in and out. Those three stop; a `.sq` inside them, and the
   homepage's own squares (no ck.css there), keep their pulse.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */
.ck.sq,.ck-tcard-pic.sq{animation:none}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   2026-10-21 · ONE SPEED for the Cookie Scanner pages (scanner · how-it-works · report). Loaded last (90-).
   His words: "some shit is preloaded instantly. i need everything on appear animation and nothing standing still and
   everything the same speed" — and on the "Why run this scan?" drawings: "really good … but a bit too slow, slower
   than others".
   Measured first (scratchpad motion-audit.mjs: scroll like a person, time every text/media element from entering the
   screen to fully shown): entrances ran 0.28–1.15 s, the Why rows took ~2.2 s, the report map's labels ~2 s, and tall
   blocks (issue rows, map legend, FAQ, how-it-works lists and example report) were already in place when reached.
   The system, in three numbers — tune HERE, nowhere else:
     --mv-d  every entrance (fade + rise) and every draw (lines, rings, the cookie mark)
     --mv-s  the step between things that arrive together
     --mv-y  how far an entrance rises
   Acts (a drawing performing its point) start ~.5 s after it appears and run ~1 s; a sequence of acts is .7 s apart
   (40-why.js · 30-checks.js · 60-how-page.js). Arrival per element: app.js data-reveal-kids / data-reveal-at.
   ⛔ Only durations and delays live here — no new look. Hover and state transitions keep their own quick timings.
   ⛔ Every selector repeats its original (same or higher specificity) so this file wins by order, not by force.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */
main.ck{--mv-d:.7s;--mv-s:70ms;--mv-y:20px}

/* ── the generic entrance (style.css "reveal") ── */
.ck.ck-go [data-reveal]{transform:translateY(var(--mv-y));
  transition:opacity var(--mv-d) var(--ease),transform var(--mv-d) var(--ease);transition-delay:calc(var(--rd,0) * var(--mv-s))}
.ck.ck-go .panel[data-reveal],.ck.ck-go .ck-pic[data-reveal]{transform:translateY(calc(var(--mv-y) + 8px))}
.ck.ck-go [data-reveal].ck-in{opacity:1;transform:none}

/* ── the site's loader-aware engine on the tool pages (src.html: hero 1–1.15 s with blur, picture .9 s) ── */
main.ck .r-hero,main.ck .r-img,main.ck .r-up,main.ck .rv{transition-duration:var(--mv-d)}
/* the first screen arrives 70 ms apart (the engine writes 108 ms inline; a stylesheet !important is the only override) */
.ck-lean .ck-hero2-l>.r-hero:nth-child(1){transition-delay:0ms!important}
.ck-lean .ck-hero2-l>.r-hero:nth-child(2){transition-delay:70ms!important}
.ck-lean .ck-hero2-l>.r-hero:nth-child(3){transition-delay:140ms!important}
.ck-lean .ck-hero2-l>.r-hero:nth-child(4){transition-delay:210ms!important}
.ck-lean .ck-hero2-l>.r-hero:nth-child(5){transition-delay:280ms!important}
.ck-lean .ck-hero2-l>.r-hero:nth-child(6){transition-delay:350ms!important}
.ck-lean .ck-hero2-l>.r-hero:nth-child(7){transition-delay:420ms!important}
.ck-lean .ck-shot-f.r-img{transition-delay:210ms!important}
/* the drawn cookie over the H1 (10-hero.css: 1.25 s draw, chips from .78 s) */
.ck-lean .ck-mark.in .ck-mark-o{animation-duration:var(--mv-d);animation-delay:.1s}
.ck-lean .ck-mark.in .ck-mark-c{animation-duration:.5s}
.ck-lean .ck-mark.in .ck-mark-c:nth-of-type(1){animation-delay:.49s}
.ck-lean .ck-mark.in .ck-mark-c:nth-of-type(2){animation-delay:.56s}
.ck-lean .ck-mark.in .ck-mark-c:nth-of-type(3){animation-delay:.63s}
.ck-lean .ck-mark.in .ck-mark-c:nth-of-type(4){animation-delay:.7s}

/* ── scanner hero: the live demo's parts (20-demo.css: .7/.9 s, the last part at ~1 s) ── */
.ck-lean .ck-demo :is(.ck-demo-tabs,.ck-demo-site,.ck-demo-say,.ck-demo-res,.ck-demo-cap){transition-duration:var(--mv-d)}
.ck-lean .ck-demo.is-enter .ck-demo-co{transition-duration:var(--mv-d)}
.ck-lean .ck-demo.is-enter .ck-demo-site{transition-delay:.07s}
.ck-lean .ck-demo.is-enter :is(.ck-demo-wb,.ck-demo-wl){transition-delay:calc(.21s + var(--i,0) * .07s)}
.ck-lean .ck-demo.is-enter .ck-demo-co{transition-delay:calc(.42s + var(--i) * .07s)}
.ck-lean .ck-demo.is-enter .ck-demo-tag{transition-delay:calc(.63s + var(--i) * .07s)}
.ck-lean .ck-demo.is-enter .ck-demo-say{transition-delay:.56s}
.ck-lean .ck-demo.is-enter :is(.ck-demo-res,.ck-demo-cap){transition-delay:.63s}

/* ── scanner: What the scanner checks (30-checks.css: columns .7/.9 s, the rules 1.1 s from .35 s) ── */
.ck.ck-go.ck-lean #ck-checks .ck-cx .ck-cx-c{transition-duration:var(--mv-d)}
.ck.ck-go.ck-lean #ck-checks .ck-cx .ck-cx-c+.ck-cx-c::before{transition-duration:var(--mv-d);transition-delay:.21s}
.ck.ck-go.ck-lean #ck-checks .ck-cx .ck-cx-c:nth-child(2){transition-delay:.07s}
.ck.ck-go.ck-lean #ck-checks .ck-cx .ck-cx-c:nth-child(3){transition-delay:.14s}

/* ── scanner: Why run this scan? — his favourite, on the same speed (40-why.css: text .8/1 s, draw .9 s, the drawn
      part from .55 s, the thread .75 s; the acts 1.1–1.9 s) ── */
.ck-lean .ck-y.is-js .ck-y-i.is-on .ck-y-h,
.ck-lean .ck-y.is-js .ck-y-i.is-on .ck-y-p{transition-duration:var(--mv-d)}
.ck-lean .ck-y.is-js .ck-y-i.is-on .ck-y-p{transition-delay:.07s}
.ck-lean .ck-y.is-js .ck-y-i.is-on .ck-y-m [pathLength]{transition-duration:var(--mv-d),.01s}
.ck-lean .ck-y.is-js .ck-y-i.is-on .ck-y-m .s{transition-delay:.07s}
.ck-lean .ck-y.is-js .ck-y-i.is-on .ck-y-m .a{transition-delay:.35s}
.ck-lean .ck-y.is-js .ck-y-i.is-th:not(:last-child)::after{transition-duration:.5s}
.ck-lean .ck-y-i.is-act .ck-y-bar{animation-duration:.8s}
.ck-lean .ck-y-i.is-act .ck-y-bar:nth-of-type(4){animation-delay:.09s}
.ck-lean .ck-y-i.is-act .ck-y-bar:nth-of-type(5){animation-delay:.18s}
.ck-lean .ck-y-i.is-act .ck-y-bn{animation-duration:.95s}
.ck-lean .ck-y-i.is-act .ck-y-no{animation-duration:.95s}
.ck-lean .ck-y-i.is-act .ck-y-lens{animation-duration:1.25s}
.ck-lean .ck-y-i.is-act .ck-y-ar{animation-duration:1.25s}

/* ── scanner: the FREE plate — the dark plate rises, then its heading, button and each of the four parts arrive as
      they are reached (sec_why.py data-reveal / data-reveal-kids); a part's tick pops just after its line
      (40-why.css keyed the ticks on the plate: .4/.5 s pops from .45 s, the tick drawn from .62 s) ── */
.ck.ck-go.ck-lean .ck-free .ck-free-k,.ck.ck-go.ck-lean .ck-free .ck-free-k path{transition-duration:var(--mv-d)}
.ck.ck-go.ck-lean .ck-free .ck-free-l>li[data-reveal]:not(.ck-in) .ck-free-k{transform:scale(.4);opacity:0}
.ck.ck-go.ck-lean .ck-free .ck-free-l>li[data-reveal]:not(.ck-in) .ck-free-k path{stroke-dashoffset:1}
.ck.ck-go.ck-lean .ck-free .ck-free-l>li[data-reveal] .ck-free-k{transition-delay:calc(.21s + var(--rd,0) * var(--mv-s))}
.ck.ck-go.ck-lean .ck-free .ck-free-l>li[data-reveal] .ck-free-k path{transition-delay:calc(.35s + var(--rd,0) * var(--mv-s))}

/* ── scanner: the FAQ — each question arrives as it is reached (50-faq.css let the whole list in with the plate) ── */
.ck.ck-go .ck-sec-faq .ck-faq-p .faq-item[data-reveal]{transition:opacity var(--mv-d) var(--ease),transform var(--mv-d) var(--ease);
  transition-delay:calc(var(--rd,0) * var(--mv-s))}
.ck.ck-go .ck-sec-faq .ck-faq-p .faq-item[data-reveal]:not(.ck-in){opacity:0;transform:translateY(var(--mv-y))}
.ck.ck-go .ck-sec-faq .ck-faq-p .faq-item[data-reveal].ck-in{opacity:1;transform:none}

/* ── how it works: the opening (60-how-page.css: .75/.95 s, the drawing .8/1.05 s from .18 s, the cookie 1.2 s) ── */
.ck-how-page .ck-hw-intro>*{transition-duration:var(--mv-d)}
.ck-how-page .ck-hw-open-r .ck-hwd{transition-duration:var(--mv-d);transition-delay:.21s}
.ck-how-page .ck-hw-open.is-in .ck-cookie path{animation-duration:var(--mv-d)}
.ck-how-page .ck-hw-open.is-in .ck-cookie circle{animation-duration:.5s}
.ck-how-page .ck-hw-open.is-in .ck-cookie circle:nth-of-type(1){animation-delay:.49s}
.ck-how-page .ck-hw-open.is-in .ck-cookie circle:nth-of-type(2){animation-delay:.56s}
.ck-how-page .ck-hw-open.is-in .ck-cookie circle:nth-of-type(3){animation-delay:.63s}
.ck-how-page .ck-hw-open.is-in .ck-cookie circle:nth-of-type(4){animation-delay:.7s}
/* its drawing (61-how-demo.css: .7/.9 s, the last part at ~1.1 s) */
.ck-how-page .ck-hwd :is(.ck-hwd-head,.ck-hwd-tabs,.ck-hwd-caps,.ck-hwd-site){transition-duration:var(--mv-d)}
.ck-how-page .ck-hwd.is-enter .ck-hwd-co{transition-duration:var(--mv-d)}
.ck-how-page .ck-hwd.is-enter .ck-hwd-tabs{transition-delay:.07s}
.ck-how-page .ck-hwd.is-enter .ck-hwd-caps{transition-delay:.14s}
.ck-how-page .ck-hwd.is-enter .ck-hwd-site{transition-delay:.21s}
.ck-how-page .ck-hwd.is-enter :is(.ck-hwd-wb,.ck-hwd-wl){transition-delay:calc(.35s + var(--i,0) * .07s)}
.ck-how-page .ck-hwd.is-enter .ck-hwd-co{transition-delay:calc(.49s + var(--i) * .07s)}
.ck-how-page .ck-hwd.is-enter .ck-hwd-tag{transition-delay:calc(.7s + var(--i) * .07s)}
/* the six checks: each row arrives as it is reached (was: all rows .08 s apart when the list's top showed) */
.ck.ck-go.ck-how-page .ck-hw-cl .ck-hw-ci[data-reveal]{transition:opacity var(--mv-d) var(--ease),transform var(--mv-d) var(--ease);
  transition-delay:calc(var(--rd,0) * var(--mv-s))}
.ck.ck-go.ck-how-page .ck-hw-cl .ck-hw-ci[data-reveal]:not(.ck-in){opacity:0;transform:translateY(var(--mv-y))}
/* how common: the figures' lines and dots (.7 s from .35 s, dots .4/.5 s from .75 s) */
.ck.ck-go.ck-how-page .ck-hw-stat .ck-hw-pi-l{transition-duration:var(--mv-d);transition-delay:calc(.21s + var(--i) * .07s)}
.ck.ck-go.ck-how-page .ck-hw-stat .ck-hw-pi-n{transition-duration:.5s;transition-delay:calc(.49s + var(--i) * .07s)}
/* where and how often: the hairline between the columns (1.1 s from .3 s) */
.ck.ck-go.ck-how-page .ck-hw-two::before{transition-duration:var(--mv-d);transition-delay:.21s}

/* ── the report: the map plays when a third of it is on screen (report.js data-reveal-at) — its frame, wires and
      company pills on the same speed (style.css: frame .8/1 s, wires 1.15 s from .35 s, pills from .55 s and the
      right-hand ones from ~1.9 s) ── */
.ck-fpos{transition-duration:var(--mv-d)}
.ck-ln-b{transition-duration:.5s,.5s,var(--mv-d),.45s}
.ck.ck-go .ck-map.ck-in .ck-ln-b{transition-delay:0s,0s,calc(.21s + var(--d,0s) * .2),0s}
.ck-co{transition-duration:var(--mv-d)}
.ck.ck-go .ck-map.ck-in .ck-co{transition-delay:calc(.35s + var(--o,0) * 35ms)}
.ck.ck-go .ck-map.ck-in .ck-co-1{transition-delay:calc(.49s + (var(--o,40) - 40) * 35ms)}
.ck-map :is(.ck-seg,.ck-cap,.ck-cap-i,.ck-vh,.ck-leg){transition-duration:var(--mv-d)}
/* each company pill (and the phone's "+ N loaded" line) also has its own entrance (report.js data-reveal-kids on
   .ck-nodes): on a phone the list runs below the picture — the pop keeps its small overshoot */
.ck.ck-go .ck-map .ck-co[data-reveal]{transition-timing-function:var(--ease),cubic-bezier(.34,1.56,.64,1)}
/* the score ring draws on the same speed (style.css 1.5 s; app.js ckRings counts in .9 s) */
main.ck .ck-ring-v{transition-duration:.9s}

/* ── phones and tablets (stacked hero): the two hero drawings wait until they are on screen (20-demo.js / 61-how-demo.js
      seen()) — and their box waits with them, so the first screen never ends on an empty white frame ── */
@media (max-width:980px){
  .ck-lean .ck-demo.r-img.is-pre{opacity:0!important;transform:translateY(var(--mv-y))!important}
  .ck-how-page .ck-hw-open-r .ck-hwd.is-pre{opacity:0;transform:translateY(var(--mv-y))}
}

/* ── state rules an arrived element must keep — the entrance's end state (.ck-in: opacity 1, transform none) would
      otherwise win over them by order (measured sweep of style.css + up/*.css + the site's .btn) ── */
.ck-map.has-sel .ck-co[data-reveal].ck-in:not(.is-sel){opacity:.42}
.ck.ck-go .btn[data-reveal].ck-in:hover{transform:translateY(-2px)}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   2026-10-22 · PHONES, ONE SYSTEM FOR ALL THREE COOKIE SCANNER PAGES (scanner · how-it-works · report) — and, the same
   day on his word, the tools hub (/tools/) and the robot page (/bot/), section 4. Loaded last.
   His word after the desktop was accepted: "mobile is not done at all, gaps are incorrect, nothing is aligned, no
   breathing room, squished items … HEro for example starts right below header without any breathing room".
   Measured at 393 px before changing anything (scratchpad dumps):
   · the first line of every hero sat 16–32 px under the floating header (the homepage's sits 52 px under it);
   · plain text ran on the 14 px surface line while everything inside a plate ran 20 px further in — two text lines
     on one screen, and words 14 px from the glass;
   · rows with a drawing kept their words in a narrow second column (263 · 267 · 223 · 241 px of a 393 screen) and the
     scanner's "Why" text ran to 14 px from the right edge;
   · three different section rhythms (92 · 88 · 72 px) and four H2 sizes (30 · 31.4 · 26 · 28 px);
   · the report's "Check another website" field had 148 px left for the address next to its button.
   The system, in numbers (≤640 px):
   · SURFACE line = the site's phone gutter (14 px): the header pill, every plate, field and full-width button;
   · TEXT line = 34 px: every bare word — headings, leads, links, lists — and everything inside a plate. It is the
     header's own word-mark line, so the logo, the headings and the plates' words stand on one line;
   · a hero's first line 52 px under the header (as on the homepage), 92 px between sections, 28 px from a heading
     block to its content, 12 px heading → lead; one H2 size (28 px);
   · a row with a drawing = the drawing and the title side by side, the explanation under both at full width.
   ⛔ Every rule sits in a max-width query — the desktop (≥981 px, accepted 21 Oct) cannot see this file.
   ⛔ No words and no markup changed. Motion is untouched (90-motion.css owns it).
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */
@media (max-width:640px){
  main.ck:is(.ck-lean,.ck-how-page,.ck-rep,.ck-toolsp,.ck-botp){
    --ph-in:20px;          /* plain text sits this far inside the surface line */
    --ph-top:120px;        /* a hero's first line: 52 px under the floating header (14 + 54) */
    --ph-sec:92px;         /* section → section */
    --ph-head:28px;        /* a heading block → its content */
    --ph-lg:12px;          /* heading → lead */
    --ph-h2:28px;
  }
}
@media (max-width:359px){
  main.ck:is(.ck-lean,.ck-how-page,.ck-rep,.ck-toolsp,.ck-botp){--ph-in:16px}
}
/* short screens: on a first visit the live cookie bar (~195–215 px) floats over the bottom of the screen and the
   scanner's Scan button must stay above it — so the air under the header shrinks with the screen's height
   (40 px on ≤680 px tall screens, 28 px on ≤600), never back to the old 16 */
@media (max-width:640px) and (max-height:680px){
  main.ck:is(.ck-lean,.ck-how-page,.ck-rep,.ck-toolsp,.ck-botp){--ph-top:108px}
}
@media (max-width:640px) and (max-height:600px){
  main.ck:is(.ck-lean,.ck-how-page,.ck-rep,.ck-toolsp,.ck-botp){--ph-top:96px}
}
/* a 320 × 568 phone: the headline on one line lifts the field above the bar */
@media (max-width:359px) and (max-height:600px){
  main.ck.ck-lean{--ph-top:92px}
  .ck-lean .ck-h1{font-size:28px}
  .ck-lean .ck-mark{width:24px;height:24px;margin-bottom:8px}
  .ck-lean .ck-lead{margin-top:8px}
  .ck-lean .ck-scan-hero{margin-top:12px}
}
/* one drawing column (48 px) and one gap (14 px) for every row that starts with a drawing, on both pages — so every
   title beside a drawing starts on one second line (96 px) instead of five (85–102 px) */
@media (max-width:640px){
  .ck-lean .ck-y{--y-mw:48px}
  .ck-lean #ck-checks{--cx-art:48px}
  .ck-how-page .ck-hw-cl{--ci-art:48px;--ci-gap:14px}
  .ck-how-page .ck-hw-fails{--fa:48px}
  .ck-how-page .ck-hw-fail{column-gap:14px}
  .ck-how-page .ck-hw-lawl{--lm:48px}
  /* the opening drawing's plate: the same 20 px inset as every plate (it was 19) */
  .ck-how-page .ck-hwd{--dm-pad:20px}
  /* one H1 size on the three pages (the scanner's and the report's) */
  .ck-how-page .ck-hw-h1{font-size:clamp(31px,9.4vw,38px);line-height:1.06}
}

/* ── 1 · THE SCANNER PAGE ─────────────────────────────────────────────────────────────────────────────────── */
@media (max-width:640px){
  .ck-lean{--ck-sec:var(--ph-sec);--ck-head:var(--ph-head);--ck-lg:var(--ph-lg)}
  .ck-lean .ck-hero{padding-top:var(--ph-top)}
  /* hero words → the drawing: ~48 px you can see on every page (the link's 44 px tap box carries 11 px of air itself) */
  .ck-lean .ck-hero2-g{row-gap:36px}
  /* the hero's words on the text line; the field stays on the surface line, so the address you type starts on the
     same line as the words above it */
  .ck-lean .ck-hero2-l>:is(.ck-h1,.ck-lead,.ck-hfacts,.ck-hero-l){margin-left:var(--ph-in);margin-right:var(--ph-in)}
  .ck-lean .ck-mark{margin-left:calc(var(--ph-in) - 4px)}          /* the drawn outline starts 4 px inside its box */
  .ck-lean .ck-scan-hero .ck-scan-lab,
  .ck-lean .ck-scan-hero .ck-scan-m,
  .ck-lean .ck-scan-hero .ck-ts{margin-left:var(--ph-in);margin-right:var(--ph-in)}
  /* every section heading, and the words that sit on the canvas */
  .ck-lean .ck-sec .h2{font-size:var(--ph-h2);line-height:1.1}
  .ck-lean .ck-sec>.wrap>.shead,
  .ck-lean #ck-checks .ck-scope,
  .ck-lean .ck-y,
  .ck-lean .ck-faq-side{margin-left:var(--ph-in);margin-right:var(--ph-in)}
  /* Why run this scan? — the drawing beside its statement, the explanation under both at the full width
     (was: a 44 px drawing column and the words in a 305 px column that ran to 14 px from the edge) */
  .ck-lean .ck-y{--y-row:36px}
  .ck-lean .ck-y-i{grid-template-columns:var(--y-mw) minmax(0,1fr);column-gap:14px;row-gap:12px;align-items:center}
  .ck-lean .ck-y-mw{grid-row:1;grid-column:1;align-self:center;margin-top:0}
  .ck-lean .ck-y-h{grid-row:1;grid-column:2;align-self:center;max-width:none}
  .ck-lean .ck-y-p{grid-row:2;grid-column:1 / -1;max-width:none}
  .ck-lean .ck-y-i:not(:last-child)::after{content:none}
}

/* ── 2 · HOW IT WORKS ─────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width:640px){
  .ck-how-page{--hw-sec:var(--ph-sec);--hw-head:var(--ph-head);--hw-lg:var(--ph-lg)}
  .ck-how-page .ck-hw-open{padding-top:var(--ph-top)}
  .ck-how-page .ck-hw-open-g{row-gap:48px}                         /* hero words → the drawing, as on the scanner page */
  .ck-how-page .ck-hw-head .h2{font-size:var(--ph-h2);line-height:1.1}
  .ck-how-page :is(.ck-hw-intro,.ck-hw-side,.ck-hw-after,.ck-hw-stats,.ck-hw-caveat,.ck-hw-fails,.ck-hw-two),
  .ck-how-page .ck-hw-sec>.wrap>.shead,
  .ck-how-page .ck-hw-split>.shead{margin-left:var(--ph-in);margin-right:var(--ph-in)}
  /* the checks list and the law plate: the drawing (or the flags) beside the title, the explanation under both */
  .ck-how-page .ck-hw-ci,
  .ck-how-page .ck-hw-lawi{column-gap:14px;row-gap:10px;align-items:center}
  .ck-how-page .ck-hw-ci-art,
  .ck-how-page .ck-hw-lawi-m{grid-row:1;grid-column:1;align-self:center}
  .ck-how-page .ck-hw-ci-h,
  .ck-how-page .ck-hw-lawi-h{grid-row:1;grid-column:2;align-self:center}
  .ck-how-page .ck-hw-ci-p,
  .ck-how-page .ck-hw-lawi-p{grid-row:2;grid-column:1 / -1;max-width:none}
  .ck-how-page .ck-hw-ci--also .ck-hw-ci-art{align-self:start}
  /* the example report's score: the ring above its words, not beside them in a 223 px column */
  .ck-how-page .ck-hw-score{grid-template-columns:minmax(0,1fr);row-gap:16px}
  .ck-how-page .ck-hw-score-t{grid-column:1}
}

/* the two drawings on how-it-works are the scanner hero's drawing rebuilt (61-how-demo.css), but they never got its
   21 Oct phone layout: the drawn site stopped at 78 % of the plate and each state hung under its company. Now the
   same as the scanner page — the site across the plate, its port 20 px in, the companies 44 px in, and from a 360 px
   plate each state on one right-hand line. ⛔ 61-how-demo.js draws the lanes from the MEASURED ports; these numbers
   and the no-script lines below move together (the 21 Oct trap) — re-measured after this change. */
@container ckhwd (max-width:419px){
  .ck-how-page .ck-hwd-site{width:100%}
  .ck-how-page .ck-hwd-sp{left:20px}
  .ck-how-page .ck-hwd-cos{padding-left:44px}
  .ck-how-page .ck-hwd-bar{margin-right:6px}
  .ck-how-page .ck-hwd-wg{stroke-width:4}
  .ck-how-page .ck-hwd:not(.is-js) .ck-hwd-cos::before{left:20px}
  .ck-how-page .ck-hwd:not(.is-js) .ck-hwd-co::after{width:calc(44px - 20px)}
}
@container ckhwd (min-width:360px) and (max-width:419px){
  .ck-how-page .ck-hwd-co{grid-template-columns:auto minmax(0,1fr) auto}
  .ck-how-page .ck-hwd-st{grid-row:1;grid-column:3;justify-items:end}
  .ck-how-page .ck-hwd-bar{top:50%}
  .ck-how-page .ck-hwd:not(.is-js) .ck-hwd-co::after{top:50%}
  .ck-how-page .ck-hwd:not(.is-js) .ck-hwd-cos::before{bottom:calc((100% - 2 * 15px) / 6)}
}

/* ── 3 · THE REPORT ───────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width:640px){
  .ck-rep{--rp-sec:var(--ph-sec);--rp-head:var(--ph-head)}
  .ck-rep .ck-hx-sec{padding-top:var(--ph-top)}
  /* the verdict stays centred; its sentences get the same breathing room as every other word */
  .ck-rep .ck-hx>:is(.ck-hx-p,.ck-hx-priv,.ck-hx-m){margin-left:var(--ph-in);margin-right:var(--ph-in)}
  .ck-rep .ck-rsec>.wrap>.ck-ph{margin-left:var(--ph-in);margin-right:var(--ph-in)}
  /* the legend is a full-row flex item of the map: inset its words, not its box (a margin pushed it 2 px out) */
  .ck-rep .ck-map--rep .ck-leg{padding-left:var(--ph-in);padding-right:var(--ph-in)}
  .ck-rep .ck-rsec>.wrap>.ck-ph .ck-h2{font-size:var(--ph-h2);line-height:1.1}
  .ck-rep .ck-rsec>.wrap>.ck-ph{margin-bottom:var(--ph-head)}
  /* an open issue: the mark beside its sentence, everything it opens to under both at the full width */
  .ck-rep .ck-iss .ck-row-in{padding-left:0}
  .ck-rep .ck-iss .ck-part-fix{margin-left:0}
  /* What else did we check? — the mark, the title and the chevron in one row, the note under them at the full width
     (it was a 241 px column between the mark and the chevron) */
  .ck-rep .ck-m-b{grid-template-columns:36px minmax(0,1fr) 18px;column-gap:14px;row-gap:6px;align-items:center}
  .ck-rep .ck-m-b>.ck-m-t{display:contents}
  .ck-rep .ck-m-b>.ck-ms{grid-row:1;grid-column:1}
  .ck-rep .ck-m-b .ck-m-h{grid-row:1;grid-column:2;align-self:center}
  .ck-rep .ck-m-b>.ck-chev{grid-row:1;grid-column:3}
  .ck-rep .ck-m-b .ck-m-n{grid-row:2;grid-column:1 / -1}
  /* the last two sections on the same 92 px as every other (they had 104 and 96) */
  .ck-rep .ck-fx-sec,
  .ck-rep #ck-ragain{padding-top:var(--ph-sec)}
  /* the dark plate on the same inset as every plate */
  .ck-rep .ck-fx{padding:30px var(--rp-pad,20px) var(--rp-pad,20px)}
  .ck-rep .ck-fx-h{font-size:30px}
  .ck-rep .ck-rc{margin-right:0}
  /* Check another website: the address gets the whole width, the button its own row (as on how-it-works) */
  .ck-rep .ck-again .ck-final>.h2{margin-left:var(--ph-in);margin-right:var(--ph-in);font-size:var(--ph-h2)}
  .ck-rep .ck-again .ck-facts{margin-left:var(--ph-in);margin-right:var(--ph-in)}
  .ck-rep .ck-dock{left:14px;right:14px}
}
/* ── 3b · THE WAITING SCREEN ("Checking now") and the endings ──────────────────────────────────────────────────
   Phones: the three visitors' steps ran in three 110 px columns of four two-line items each. Tablets (641–980): the
   computer's 3 × 280 px lanes (920 px) ran off both edges of the screen (measured 644–920 px; it was so before today).
   Now, on both: the portrait drawing; under it the three visitors side by side where the lines land (number + who);
   and their steps in one plate below, one full-width row each, numbered like the visitors above.
   ⛔ All of it under .ck-rep — the SEO report shares ck.css and has its own waiting screen; since 2026-10-26 its <main>
   carries .ck-rep too, so these rules skip it with :not(:where(.sq)) — zero specificity, the cookie page unchanged. */
@media (max-width:980px){
  .ck-rep:not(:where(.sq)) .ck-w-pic{aspect-ratio:365 / 270;max-width:365px;margin-top:20px}
  .ck-rep:not(:where(.sq)) .ck-w-wires-d{display:none}
  .ck-rep:not(:where(.sq)) .ck-w-wires-p{display:block}
  .ck-rep:not(:where(.sq)) .ck-w-frame{left:calc(52 / 365 * 100%);top:0;width:calc(260 / 365 * 100%)}
  .ck-rep:not(:where(.sq)) .ck-wport:nth-of-type(1){left:40.4%}
  .ck-rep:not(:where(.sq)) .ck-wport:nth-of-type(3){left:59.6%}
  .ck-rep:not(:where(.sq)) .ck-lanes{position:relative;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:8px;row-gap:0;
    max-width:365px;margin-inline:auto;text-align:left}
  .ck-rep:not(:where(.sq)) .ck-lane{display:contents}
  .ck-rep:not(:where(.sq)) .ck-lane-h{grid-row:1;flex-direction:column;align-self:start;justify-self:center;height:auto;padding:0;gap:6px;
    background:none;box-shadow:none;font-size:13.5px;line-height:1.3;white-space:normal;text-align:center}
  .ck-rep:not(:where(.sq)) .ck-lane[data-lane="1"] .ck-lane-h{grid-column:1}
  .ck-rep:not(:where(.sq)) .ck-lane[data-lane="2"] .ck-lane-h{grid-column:2}
  .ck-rep:not(:where(.sq)) .ck-lane[data-lane="3"] .ck-lane-h{grid-column:3}
  /* the plate behind the three step rows (the grid's own ::before, placed over rows 2–4) */
  .ck-rep:not(:where(.sq)) .ck-lanes::before{content:"";grid-column:1 / -1;grid-row:2 / 5;margin-top:22px;border-radius:var(--r-panel);
    background:var(--panel);box-shadow:var(--sh-panel)}
  .ck-rep:not(:where(.sq)) .ck-steps{position:relative;grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:3px 14px;
    width:auto;margin:0;padding:16px 20px 16px 54px}
  .ck-rep:not(:where(.sq)) .ck-lane[data-lane="1"] .ck-steps{grid-row:2;margin-top:22px;padding-top:20px}
  .ck-rep:not(:where(.sq)) .ck-lane[data-lane="2"] .ck-steps{grid-row:3}
  .ck-rep:not(:where(.sq)) .ck-lane[data-lane="3"] .ck-steps{grid-row:4;padding-bottom:20px}
  .ck-rep:not(:where(.sq)) .ck-lane+.ck-lane .ck-steps{box-shadow:inset 0 1px 0 var(--line)}
  .ck-rep:not(:where(.sq)) .ck-steps::before{position:absolute;left:20px;top:16px;display:grid;place-items:center;width:22px;height:22px;
    border-radius:50%;background:var(--ink);color:var(--canvas);font-size:11.5px;font-weight:700;line-height:1}
  .ck-rep:not(:where(.sq)) .ck-lane[data-lane="1"] .ck-steps::before{content:"1";top:20px}
  .ck-rep:not(:where(.sq)) .ck-lane[data-lane="2"] .ck-steps::before{content:"2"}
  .ck-rep:not(:where(.sq)) .ck-lane[data-lane="3"] .ck-steps::before{content:"3"}
  .ck-rep:not(:where(.sq)) .ck-steps li,
  .ck-rep:not(:where(.sq)) .ck-steps li:not(.now){display:inline-flex;align-items:center;gap:7px;padding:0;font-size:13.5px;line-height:22px;
    text-align:left;white-space:normal}
  .ck-rep:not(:where(.sq)) .ck-steps li i{display:block;width:5px;height:5px}
}
/* tablets: the three visit cards under the map (phones hide them) — each status took its full width beside the company
   and squeezed the name into a 32 px column ("Microsoft / Ads"). The status now sits under the name. */
@media (min-width:641px) and (max-width:980px){
  .ck-rep .ck-vc li{grid-template-columns:16px minmax(0,1fr);row-gap:1px}
  .ck-rep .ck-vc li>span:last-child{grid-column:2;text-align:left}
}
@media (max-width:640px){
  .ck-rep .ck-wait,
  .ck-rep .ck-end{padding-top:var(--ph-top)}
  .ck-rep .ck-wait .wrap>:is(.ck-w-big,.ck-w-title,.ck-w-lead,.ck-w-note){margin-left:var(--ph-in);margin-right:var(--ph-in)}
}
@media (max-width:480px){
  .ck-rep .ck-again .ck-scan-f,
  .ck-rep .ck-again .ck-scan.is-focus .ck-scan-f{flex-wrap:wrap;height:auto;padding:0;border:0;border-radius:0;background:none;
    box-shadow:none;row-gap:10px}
  .ck-rep .ck-again .ck-scan-f::before{content:none}
  .ck-rep .ck-again .ck-scan-i{flex:1 1 100%;height:56px;padding:0 20px;border-radius:999px;background:var(--panel);
    box-shadow:0 0 0 1px var(--line),var(--sh-panel)}
  .ck-rep .ck-again .ck-scan-i:focus{box-shadow:0 0 0 1.5px var(--blue),0 0 0 6px var(--ring-soft)}
  .ck-rep .ck-again .ck-scan-b{flex:1 1 100%;justify-content:center;height:52px}
}

/* ── 4 · THE TOOLS HUB (/tools/) AND THE ROBOT PAGE (/bot/) ──────────────────────────────────────────────────────
   His word the same day: "Yes, apply the same phone fixes to /tools/ and /bot/ on v2". Measured at 393 px: both heroes
   started 32 px under the header, every bare word ran on the 14 px edge and the hub's "why" block came 60 px after its
   cards (the robot page's questions already sit 92 px under its hero: 72 + their first row's 20). Same system as above: hero 52 px under the header, words on the
   34 px line (the centred headings keep their centre and get the same air at the sides), plates and buttons on 14,
   92 px between sections, hero words → the hero's drawing or cards ~48 px you can see (as on the other three pages).
   ⛔ Under .ck-toolsp / .ck-botp only — the SEO pages share ck.css and some of these class names. */
@media (max-width:640px){
  .ck-toolsp .ck-hero-s,
  .ck-botp .ck-hero-s{padding-top:var(--ph-top)}
  .ck-toolsp .ck-hero-s .wrap>:is(.ck-h1,.ck-lead),
  .ck-botp .ck-hero-s .wrap>:is(.ck-h1,.ck-lead){padding-left:var(--ph-in);padding-right:var(--ph-in)}
  /* the hub: its two tool cards come 44 px after the hero's words; its "why" block is a section of its own */
  .ck-toolsp .ck-tsec{padding-top:44px}
  .ck-toolsp .ck-hows{margin-top:var(--ph-sec);margin-left:var(--ph-in);margin-right:var(--ph-in)}
  /* the robot page: the questions on the text line */
  .ck-botp .ck-bot-pic{margin-top:44px}
  .ck-botp .ck-qa{margin-left:var(--ph-in);margin-right:var(--ph-in)}
}

/* ── 5 · 26 OCT — HIS PHONE LOOK AT THE THREE SCANNER PAGES (cookie · website SEO · e-commerce) ──────────────────────
   His words: "the heading that says what do you get for FREE it should be centered in that rectangle" · "after cookie
   scanner faq, the questions should go and only after them other menu links … same with ecommerce scanner … same with
   website scanner" · "in website seo scanner the svg in hero is bugged and not aligned … ecommerce seo scanner same".
   ⛔ Still max-width only: the desktop (accepted) never sees these. */
/* the FAQ, stacked: title → the questions → the four links. The side column steps aside (display:contents) so its title
   and its links become the grid's own rows; the plate moves between them. The grid's one gap (--ck-head) stays the
   rhythm: title → plate, plate → links. */
@media (max-width:980px){
  .ck-lean .ck-faq-side{display:contents}
  .ck-lean .ck-faq-main{order:1}
  .ck-lean .ck-faq-nav{order:2;margin-top:0}
}
@media (max-width:640px){
  /* the side column's text line (section 1) now belongs to its two children */
  .ck-lean .ck-faq-side>*{margin-left:var(--ph-in);margin-right:var(--ph-in)}
  /* the FREE plate: its heading on the plate's centre line (the list keeps its left line; the button is full width) */
  .ck-lean .ck-free-h{justify-self:center;text-align:center}
  /* the two SEO scanners' hero mark: 21-seo-hero.css pulls it 3 px out for the desktop (0,3,0), which beat section 1's
     text line, so on a phone it hung 23 px left of the headline. Now the window's outline stands on the text line,
     like the cookie mark's (the drawing starts 4 of 64 units in = ~2.7 px at 32 px tall). */
  .ck-lean .ck-mark.ck-mark--seo{margin-left:calc(var(--ph-in) - 3px)}
  /* the reports' "Want us to fix it?" plate, his word: "on mobile should also be centered" — the heading and its one
     sentence on the plate's centre line, like the FREE plate; the buttons under them are full width already, and the
     report card keeps its own left line */
  .ck-rep .ck-fx-l{text-align:center}
  .ck-rep .ck-fx-p{margin-left:auto;margin-right:auto}
}