/* ================= GX: graphic edition (staging) ================= */
:root{--gx-ink:#111111;--gx-black:#000000;--gx-paper:#F4F4F0;--gx-beige:#EFEDE6;--gx-sand:#DDD5C2;--gx-neon:#3DFF3D;--gx-grey:#C8C8C2;--gx-mute:#8B8B86;--gx-dim:#55554F;--gx-moss:#102015;--gx-out:cubic-bezier(.16,1,.3,1);--gx-sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--gx-serif:"Newsreader 60 Pt",Georgia,"Times New Roman",serif;--gx-serif-on:"Newsreader","Newsreader 60 Pt",Georgia,"Times New Roman",serif}
/* ---------- shared ---------- */
.gx-sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
.gx-lab{margin:0;font-family:var(--gx-sans);font-size:11px;font-weight:500;line-height:1.25;letter-spacing:.14em;text-transform:uppercase}
.gx-odo{display:inline-flex;align-items:flex-start;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1,"lnum" 1;line-height:1;white-space:nowrap}
.gx-odo-c{display:inline-block;height:1em;overflow:hidden}
.gx-odo-c+.gx-odo-c{margin-left:-.055em}
.gx-odo-s{display:block}
.gx-odo-s i{display:block;height:1em;line-height:1em;font-style:normal;text-align:center}
.gx-odo-x{display:inline-block;line-height:1em}
/* The clip is widened with clip-path rather than padding plus a cancelling negative margin: lines such as the
   priority fix title set their own margins, which silently drop the cancel and shift the text sideways. */
.gx-line{display:block;clip-path:inset(-.06em -.16em -.28em -.12em)}
.gx-line-i{display:block}
.gx-t{position:relative;isolation:isolate;min-width:0;overflow:hidden;box-sizing:border-box}
.gx-fill{position:absolute;inset:0;z-index:-1;background:var(--bg,transparent);pointer-events:none}
.gx-sh,.gx-mark{display:block;width:100%;height:auto;overflow:visible}
@keyframes gxPulse{50%{opacity:.15}}
@keyframes gxSpin{to{transform:rotate(360deg)}}
/* eyes: the whites, a pupil with a catchlight, and a blink. Both pupils travel together:
   0 is looking left, 57.7% straight ahead, 115.4% right (the white is 1.9em, the pupil .78em). */
.gx-eyes{display:inline-flex;gap:.2em;font-size:var(--eye,40px);line-height:0}
.gx-eye{position:relative;display:block;flex:none;width:1.9em;height:1em;border-radius:1em;background:var(--gx-paper);overflow:hidden;transform-origin:50% 50%;animation:gxLid 5.2s ease-in-out infinite}
.gx-eye i{position:absolute;top:.11em;left:.11em;width:.78em;height:.78em;border-radius:50%;background:var(--gx-ink);transform:translateX(57.7%)}
.gx-eye i::after{content:"";position:absolute;top:.13em;right:.15em;width:.21em;height:.21em;border-radius:50%;background:var(--gx-paper)}
@keyframes gxGo{0%{box-shadow:0 0 0 0 rgba(61,255,61,.7)}70%,100%{box-shadow:0 0 0 12px rgba(61,255,61,0)}}
@keyframes gxLid{0%,44%,49%,100%{transform:scaleY(1)}46.5%{transform:scaleY(.08)}}
@keyframes gxEyeLook{0%,12%{transform:translateX(57.7%)}22%,40%{transform:translateX(0)}50%,68%{transform:translateX(115.4%)}78%,100%{transform:translateX(57.7%)}}
@keyframes gxEyeRead{0%{transform:translateX(0)}78%{transform:translateX(115.4%)}100%{transform:translateX(0)}}
@keyframes gxEyeIdle{0%,34%{transform:translateX(57.7%)}40%,52%{transform:translateX(8%)}58%,72%{transform:translateX(57.7%)}78%,88%{transform:translateX(108%)}94%,100%{transform:translateX(57.7%)}}
/* kinetic type: a line whose old and new words cross in one mask */
.gx-x{display:grid!important;overflow:hidden;padding:.08em .18em .32em .14em;margin:-.08em -.18em -.32em -.14em}
.gx-xw{grid-area:1/1;display:block;white-space:nowrap}
/* kinetic numbers: one digit per box */
.gx-dg{display:inline-block;vertical-align:bottom}
.gx-dgi{display:inline-block}
/* kinetic type: one word per mask */
/* room on every side for italic tails and descenders (the f and g of Newsreader reach well outside) */
.gx-w{display:inline-block;overflow:hidden;vertical-align:top;padding:.08em .18em .32em .14em;margin:-.08em -.18em -.32em -.14em}
.gx-wi{display:inline-block}

@media screen{
/* ---------- example report card ----------
   Laid out from the studio's mock-up. No frame: the blocks are the card, square-cornered and touching,
   in DD green, the dark green, beige and sand, with shades of the green stepping between them. */
.wc-xr.gx-on{container-type:inline-size;position:relative}
.wc-xr.gx-on>.wc-xr-body,.wc-xr.gx-on>.wc-xr-bar{display:none!important}
/* Until the card script has taken the card over (it is deferred), the original card would show for a moment,
   ring spinning. It is held back instead; if the script never arrives it shows after 4s. */
.wc-xr:not(.gx-on)>.wc-xr-body,.wc-xr:not(.gx-on)>.wc-xr-bar{animation:gxLate .01s 4s both}
@keyframes gxLate{from{visibility:hidden}to{visibility:visible}}
[data-wc-preview] .wc-ex.gx-ex,[data-wc-preview] .wc-ex.gx-ex:hover{background:transparent!important;border:0!important;border-radius:0!important;padding:0!important;overflow:visible!important;box-shadow:none!important}
[data-wc-preview] .wc-ex.gx-ex>.wc-ex-sum{padding:0 0 14px!important;border:0!important;background:transparent!important}
/* The example's name sits under the card with its note, so the green block's top lines up with the copy
   beside it. Where the card folds away (the audit page on phones) its heading stays as the toggle. */
[data-wc-preview] details[data-wc-lock].gx-ex>.wc-ex-sum{display:none!important}
@media (min-width:992px){[data-wc-preview] .wc-ex.gx-ex>.wc-ex-sum{display:none!important}}
/* Below 992px the collapsed toggle already names the example, so the foot would repeat it once opened. */
@media (max-width:991px){[data-wc-preview] details.gx-ex:not([data-wc-lock]) .gx-c-name{display:none}}
/* folded away on smaller screens: a plus that turns to a cross says it opens */
[data-wc-preview] details.gx-ex:not([data-wc-lock])>.wc-ex-sum::after{content:"+";margin-left:auto;color:var(--gx-neon);font-size:18px;line-height:1;transition:transform .3s var(--gx-out)}
[data-wc-preview] details.gx-ex[open]:not([data-wc-lock])>.wc-ex-sum::after{transform:rotate(45deg)}
[data-wc-preview] .wc-ex-body.gx-ex-body{padding:0!important;margin-top:0!important;background:transparent!important}
/* side by side with the copy, the green starts level with the top of the eyebrow's letters */
@media (min-width:992px){[data-wc-preview] .wc-ex-body.gx-ex-body{margin-top:5px!important}}
[data-wc-preview] .wc-ex-body.gx-ex-body>.wc-ex-note{display:none!important}
.gx-c-chip:empty{display:none}
.gx-c-chip{flex:none;margin:5.3px 0;padding:4px 9px;border:1px solid rgba(244,244,240,.24);border-radius:999px;font-family:var(--gx-sans);font-size:9.5px;font-weight:500;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;color:var(--gx-grey)}
.gx-card{--pad:clamp(12px,2.7cqw,20px);position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));font-family:var(--gx-sans);color:var(--gx-paper);-webkit-font-smoothing:antialiased;overflow:hidden}
.gx-card .gx-t{padding:var(--pad)}
/* 2px past the block on every side: its soft edges fall outside the block's clip, so no seam shows */
.gx-cover{display:none;position:absolute;inset:-2px;z-index:5;background:var(--gx-neon);pointer-events:none}
.gx-card.gx-rev .gx-cover{display:block}
/* while the green is still handing blocks back, anything showing between two blocks is green too */
.gx-card.gx-rev{background:var(--gx-neon)}
.gx-card.gx-rev .gx-t.gx-wait>.gx-fill{visibility:hidden}

/* the blocks */
.gx-c-score{grid-column:1/-1;--bg:var(--gx-neon);color:var(--gx-ink);display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto 1fr auto;column-gap:18px;row-gap:12px}
.gx-c-arcs{grid-column:5/span 2;--bg:var(--gx-beige);padding:0!important;min-height:110px}
.gx-c-pages{grid-column:1/span 4;--bg:var(--gx-sand);color:var(--gx-ink);display:flex;flex-direction:column;gap:10px}
.gx-c-checks{grid-column:1/-1;--bg:var(--gx-moss);color:var(--gx-paper);display:flex;flex-direction:column;gap:10px}
.gx-c-cat{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto clamp(56px,20cqw,80px);grid-template-rows:auto auto;column-gap:12px;align-items:center}
.gx-c-cat[data-n="1"]{--bg:var(--gx-moss);color:var(--gx-neon)}
.gx-c-cat[data-n="2"]{--bg:var(--gx-neon);color:var(--gx-ink)}
.gx-c-cat[data-n="3"]{--bg:var(--gx-beige);color:var(--gx-ink)}
/* the discs are sized from the block's width, so the block keeps enough height for both faces at any width */
.gx-c-circ{grid-column:1/-1;--bg:#14331B;padding:0!important;min-height:clamp(120px,20cqw,300px)}
.gx-c-fix{grid-column:1/-1;--bg:var(--gx-moss);color:var(--gx-paper);display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:clamp(16px,3.2cqw,26px);padding-left:calc(var(--pad) * 1.6)!important}

/* score */
.gx-c-fl{grid-column:1/-1;grid-row:1}
.gx-c-big{grid-column:1;grid-row:2;align-self:end;margin:0 0 -.12em;display:flex;align-items:flex-end;font-weight:600;font-size:clamp(70px,14.8cqw,118px);line-height:1;letter-spacing:-.025em;font-variant-numeric:lining-nums proportional-nums}
.gx-c-den{font-size:.17em;font-weight:600;letter-spacing:0;line-height:1;margin:0 0 .72em .08em}
.gx-c-verdict{grid-column:2;grid-row:2;align-self:end;justify-self:end;margin:0 0 .25em;font-family:var(--gx-serif-on);font-variation-settings:"opsz" 60;font-style:italic;font-weight:300;font-size:clamp(18px,3.3cqw,26px);line-height:1.1;letter-spacing:-.01em;max-width:13ch;text-align:right}
.gx-c-prog{grid-column:1/-1;grid-row:3;position:relative;display:block;height:clamp(12px,2.3cqw,18px);border-radius:999px;background:rgb(50,202,50);overflow:hidden}
.gx-c-prog i{position:absolute;left:0;top:0;bottom:0;display:block;border-radius:999px;background:var(--gx-ink);transform-origin:0 50%;overflow:hidden}
.gx-c-prog i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(61,255,61,.55),transparent);transform:translateX(-100%)}
.gx-c-score.gx-shine .gx-c-prog i::after{animation:gxShine 1.2s cubic-bezier(.45,0,.2,1)}
@keyframes gxShine{to{transform:translateX(100%)}}

/* three stacked Ds, from the left edge */
.gx-c-arcs{overflow:hidden}
/* Three equal Ds in a row: each is a bar that starts off the block's left edge and ends in the same half
   circle, a little taller than the block, stepping dark, mid, bright towards the beige. Because every bar
   starts off-edge, sliding them never opens a gap. */
.gx-arc{position:absolute;left:-100%;top:50%;translate:0 -50%;display:block;height:112%;border-radius:0 9999px 9999px 0;transition:transform .9s var(--gx-out)}
.gx-arc[data-a="3"]{width:189%}
.gx-arc[data-a="2"]{width:162%}
.gx-arc[data-a="1"]{width:134%}

/* pages: the logo's D, darkest to brightest, touching */
.gx-c-ds{display:flex;gap:0;margin:auto 0 0}
.gx-c-d{display:block;flex:none;width:clamp(20px,4.5cqw,36px)}
.gx-c-d:not(.on){opacity:.3}

/* checks: a matrix that fades across, and brightens around the pointer */
/* the 100 points: whole-pixel dots (--dot), spread across the row; capped so they stop growing at 13px */
.gx-c-dots{display:grid;grid-template-columns:repeat(var(--cols,25),var(--dot,1fr));justify-content:space-between;row-gap:3px;max-width:calc(25 * 13px + 24 * 3px);margin:auto 0 0}
.gx-c-dots i{display:block;box-sizing:border-box;width:var(--dot,auto);aspect-ratio:1;border-radius:50%}
.gx-c-checks.gx-glow .gx-c-dots i{transition:background-color .25s ease,transform .35s var(--gx-out)}
.gx-c-checks:not(.gx-glow) .gx-c-dots i{transition:background-color .7s ease,transform .5s var(--gx-out)}
.gx-c-k{margin:0;font-size:13px;line-height:1.2;opacity:.8}
.gx-c-k b{font-weight:600;font-size:18px;letter-spacing:-.03em;margin-right:2px}

/* the three parts, each with stepped bars that deepen towards the bottom */
.gx-c-cat>.gx-lab{grid-column:1/-1;grid-row:1;display:flex;gap:8px;align-items:baseline}
.gx-c-i{opacity:.55;margin-right:8px}
.gx-c-cv,.gx-c-num{white-space:nowrap}
.gx-c-fig{grid-column:2;grid-row:2;margin:6px 0 0;display:flex;align-items:flex-end;font-weight:600;font-size:clamp(30px,6.4cqw,48px);line-height:1;letter-spacing:-.025em;font-variant-numeric:lining-nums proportional-nums}
.gx-c-cd{font-size:max(11px,.3em);font-weight:600;letter-spacing:0;margin:0 0 .52em .06em;opacity:.7}
.gx-c-q{grid-column:1;grid-row:2;margin:6px 0 0;font-size:12.5px;line-height:1.35;opacity:.85}
/* each stack is seven even slots, lit from the bottom as far as the score goes (see stack() in the card script) */
.gx-c-stack{--sh:72px;grid-column:3;grid-row:1/-1;align-self:end;display:flex;flex-direction:column;justify-content:flex-end;gap:3px;height:var(--sh)}
.gx-c-stack i{display:block;flex:none;height:calc((var(--sh) - 18px) / 7);min-height:2px;border-radius:4px;transform-origin:0 50%}

/* two stacks of discs, the brightest one wearing the smiley */
.gx-stk{position:absolute;top:0;bottom:0;width:38%;transition:transform 1.1s var(--gx-out)}
.gx-stk-l{left:8%}
.gx-stk-r{left:54%}
.gx-disc{position:absolute;left:0;display:grid;place-items:center;width:100%;aspect-ratio:1;border-radius:50%;color:var(--gx-moss)}
/* discs a fifth of the block apart, so every shade shows as a band; both faces sit high enough to show whole */
.gx-stk-l .gx-disc{top:calc(-4% + var(--k) * 21%)}
.gx-stk-r .gx-disc{top:calc(-52% + var(--k) * 21%)}
.gx-face{width:58%;height:auto;overflow:visible}
.gx-face-e{transform-box:fill-box;transform-origin:50% 50%;transition:transform .18s ease}
.gx-face.wink .gx-face-e{transform:scaleY(.15)}
.gx-c-circ.gx-go .gx-stk-l{transform:translateY(-9%)}
.gx-c-circ.gx-go .gx-stk-r{transform:translateY(9%)}

/* priority fix: the dark green and green pairing */
.gx-c-ast{display:block;flex:none;width:clamp(36px,7cqw,54px);color:var(--gx-neon)}
.gx-c-ast .gx-sh{animation:gxSpin 30s linear infinite}
.gx-c-fx{min-width:0;max-width:60ch}
.gx-c-fx .gx-lab{color:var(--gx-neon)}
.gx-c-ft{margin:5px 0 0;font-size:clamp(15px,2.45cqw,18px);font-weight:500;line-height:1.3}
.gx-c-fn{margin:3px 0 0;font-size:13px;line-height:1.45;color:var(--gx-grey)}

/* under the card */
.gx-c-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:16px 0 0}
.gx-c-name{flex:1 1 auto;min-width:0;margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.gx-c-name .gx-lab{color:var(--gx-grey)}
.gx-c-host{font-size:14px;color:var(--gx-paper);overflow-wrap:anywhere}
.gx-c-note{flex:1 1 100%;margin:0;font-size:12px;line-height:1.55;color:var(--gx-mute);max-width:68ch}
.gx-c-replay{flex:none;display:inline-flex;align-items:center;gap:8px;padding:8px 16px 8px 12px;border:1px solid rgba(244,244,240,.26);border-radius:999px;background:transparent;color:var(--gx-paper);font:500 11px/1.2 var(--gx-sans);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background-color .35s ease,border-color .35s ease,color .35s ease}
.gx-c-replay svg{flex:none;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .8s cubic-bezier(.16,1,.3,1)}
@media (hover:hover){.gx-c-replay:hover svg{transform:rotate(-360deg)}.gx-c-replay:hover{background:var(--gx-neon);border-color:var(--gx-neon);color:var(--gx-ink)}}
.gx-c-replay:focus-visible{outline:2px solid var(--gx-neon);outline-offset:3px}
.gx-c-replay[hidden]{display:none}

/* the eyes sit on the score block, above the loading green, so they watch the whole scan */
.gx-c-eyes{position:absolute;z-index:8;top:var(--pad);right:var(--pad);--eye:clamp(16px,3.2cqw,24px);pointer-events:none}
.gx-c-eyes .gx-eye i{animation:gxEyeIdle 8s var(--gx-out) infinite}
.gx-card[data-gx-stage="0"] .gx-c-eyes .gx-eye i,.gx-card[data-gx-stage="1"] .gx-c-eyes .gx-eye i{animation:gxEyeLook 2.2s var(--gx-out) infinite}
.gx-card[data-gx-stage="2"] .gx-c-eyes .gx-eye i{animation:gxEyeRead 1.3s cubic-bezier(.45,0,.55,1) infinite}
.gx-card[data-gx-stage="3"] .gx-c-eyes .gx-eye i{animation:gxEyeLook 1.7s var(--gx-out) infinite}
.gx-card[data-gx-stage="4"] .gx-c-eyes .gx-eye i{animation:gxEyeRead 1.1s cubic-bezier(.45,0,.55,1) infinite}
.gx-card[data-gx-stage="5"] .gx-c-eyes .gx-eye i{animation:none;transform:translateX(4%);transition:transform 1s var(--gx-out)}
.gx-c-eyes.track .gx-eye i{animation:none!important;transform:translateX(calc(var(--look,.5) * 115.4%));transition:transform .7s var(--gx-out)}

/* the loading layer: a green block that fills the card from the top, with the percentage on its edge */
.gx-c-load{display:none;position:absolute;inset:0;z-index:6;background:var(--gx-neon);color:var(--gx-ink);overflow:hidden;clip-path:inset(0 0 100% 0)}
.gx-card.gx-pre .gx-c-load,.gx-card.gx-rev .gx-c-load{display:block}
/* the same inset from the green's left edge as from its leading edge */
.gx-c-ride{--inset:calc(var(--pad) * 1.8);position:absolute;left:var(--inset);right:var(--pad);top:0;padding-bottom:var(--inset);display:flex;align-items:flex-end;align-items:last baseline;gap:clamp(12px,3cqw,22px);will-change:transform;transform:translateY(-100%)}
.gx-c-pct{margin:0 0 -.17em -.05em;display:flex;align-items:flex-end;font-weight:600;font-size:clamp(60px,15cqw,116px);line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.gx-c-pp{font-size:1em;font-weight:600;letter-spacing:0;line-height:1;margin:0 0 0 .01em}
.gx-c-ls{margin:0 0 -.3em;min-width:0;display:flex;flex-direction:column;gap:6px}
.gx-c-li{font-size:11px;font-weight:600;letter-spacing:.14em}
.gx-c-lw{font-family:var(--gx-serif-on);font-variation-settings:"opsz" 60;font-style:italic;font-weight:300;font-size:clamp(20px,4.3cqw,32px);line-height:1.12;white-space:nowrap}

/* before the green arrives: an empty grid of fine lines */
.gx-card.gx-pre .gx-fill{visibility:hidden}
.gx-card.gx-pre .gx-t{box-shadow:inset 0 0 0 .5px rgba(244,244,240,.16)}
.gx-card.gx-pre .gx-t>:not(.gx-fill):not(.gx-cover){opacity:0}
.gx-card.gx-pre .gx-t>.gx-lab{opacity:.38;color:var(--gx-paper)}

/* width steps. Phone: score; pages beside the Ds; checks; the three parts as rows; discs; fix.
   From 380px, as the mock-up: score and Ds; pages and checks; the three parts; discs and fix. */
.gx-c-score{order:1}.gx-c-pages{order:2}.gx-c-arcs{order:3}.gx-c-checks{order:4}.gx-c-cat{order:5}.gx-c-circ{order:6}.gx-c-fix{order:7}
@container (min-width:380px){
  .gx-c-score{grid-column:1/span 4}
  .gx-c-arcs{order:2;grid-column:5/span 2}
  .gx-c-pages{order:3;grid-column:1/span 3}
  .gx-c-checks{order:4;grid-column:4/span 3}
  .gx-c-cat{order:5;grid-column:span 2;grid-template-columns:minmax(0,1fr) clamp(42px,10cqw,76px);grid-template-rows:auto auto 1fr;min-height:118px;align-items:start}
  .gx-c-cat>.gx-lab{grid-column:1/-1}
  .gx-c-fig{grid-column:1;grid-row:2;margin:10px 0 0}
  .gx-c-q{grid-column:1;grid-row:3;align-self:end;margin:8px 0 0}
  .gx-c-stack{--sh:clamp(66px,11.5cqw,90px);grid-column:2;grid-row:2/-1;margin-top:8px}
  .gx-c-circ{order:6;grid-column:1/span 2}
  .gx-c-fix{order:7;grid-column:3/span 4}
  .gx-c-eyes{right:calc(100% / 3 + var(--pad))}
}
/* On a phone the disc block is a full-width band: it keeps the desktop block's proportions, so the discs
   (sized from its width) always fit its height and neither face is cut off. */
/* the narrowest two-column card (a side column on a landscape tablet): the three parts tighten up */
@container (min-width:380px) and (max-width:479px){
  .gx-c-cat{grid-template-columns:minmax(0,1fr) 28px;column-gap:6px;min-height:0}
  .gx-c-cat>.gx-lab{font-size:10px;letter-spacing:.1em}
  /* the part's name says enough here; its question needs more room than a third of this card */
  .gx-c-q{display:none}
  .gx-c-stack{--sh:58px}
}
@container (max-width:379px){
  .gx-c-circ{min-height:0;aspect-ratio:1.64/1}
}
@container (max-width:419px){
  .gx-c-verdict{grid-column:1/-1;grid-row:3;justify-self:start;text-align:left;max-width:none;margin:8px 0 0}
  .gx-c-score{grid-template-rows:auto 1fr auto auto}
  .gx-c-prog{grid-row:4}
  .gx-c-ls{margin-bottom:8px}
}
@container (max-width:379px){.gx-c-cat{grid-template-columns:minmax(0,1fr) auto 56px}}

/* ---------- the full-screen scan ----------
   The example card's loading green at full size: a faint grid of blocks, filled from the top by DD green,
   the percentage and stage riding its leading edge, the eyes above it. */
html.gx-lock,html.gx-lock body{overflow:hidden!important}
html.gx-lock{scrollbar-gutter:stable}
.gx-scan{position:fixed;inset:0;z-index:9000;font-family:var(--gx-sans);color:var(--gx-paper);background:var(--gx-ink);-webkit-font-smoothing:antialiased;overscroll-behavior:contain;transition:background-color .55s ease}
.gx-scan[hidden]{display:none!important}
.gx-scan.gx-s-away{background:transparent}
.gx-s-top{position:absolute;z-index:4;left:0;right:0;top:0;height:64px;display:flex;align-items:center;gap:clamp(12px,2vw,28px);padding:0 clamp(16px,3vw,40px);box-sizing:border-box;background:var(--gx-ink);border-bottom:1px solid rgba(244,244,240,.12)}
.gx-s-brand{display:inline-flex;align-items:center;gap:12px;font-size:14px;white-space:nowrap}
.gx-s-brand .gx-mark{width:30px;color:var(--gx-neon)}
.gx-s-host{margin-left:auto;min-width:0;font-size:14px;color:#CFCFCA;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gx-s-time{flex:none;font-weight:600;font-size:14px;letter-spacing:.02em;font-variant-numeric:tabular-nums;min-width:3.2em;text-align:right}
.gx-s-min{flex:none;height:36px;padding:0 16px;border:1px solid rgba(244,244,240,.3);border-radius:999px;background:transparent;color:var(--gx-paper);font:400 13px/1 var(--gx-sans);cursor:pointer;transition:background-color .25s ease,color .25s ease,border-color .25s ease}
.gx-s-min:hover{background:var(--gx-paper);border-color:var(--gx-paper);color:var(--gx-ink)}
.gx-s-min:focus-visible{outline:2px solid var(--gx-neon);outline-offset:3px}
.gx-s-stage{position:absolute;left:0;right:0;top:64px;bottom:0;background-image:linear-gradient(rgba(244,244,240,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(244,244,240,.08) 1px,transparent 1px);background-size:calc(100% / 6) calc(100% / 3);background-position:0 -1px;transition:opacity .4s ease}
.gx-scan.gx-s-away .gx-s-stage{opacity:0}
.gx-s-green{position:absolute;inset:0;z-index:1;background:var(--gx-neon);clip-path:inset(64px 0 100% 0)}
.gx-s-ride{position:absolute;z-index:3;left:clamp(24px,4.6vw,72px);right:clamp(16px,3vw,40px);top:0;padding-bottom:clamp(26px,4.4vh,56px);display:flex;align-items:flex-end;align-items:last baseline;flex-wrap:wrap;gap:6px clamp(18px,2.4vw,40px);color:var(--gx-ink);will-change:transform;transform:translateY(-100%)}
.gx-s-pct{margin:0 0 -.17em -.05em;display:flex;align-items:flex-end;font-weight:600;font-size:clamp(110px,min(27vh,26vw),330px);line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.gx-s-pp{font-size:1em;font-weight:600;letter-spacing:0;line-height:1;margin:0 0 0 .01em}
.gx-s-ls{margin:0 0 -.3em;min-width:0;display:flex;flex-direction:column;gap:8px}
.gx-s-li{font-size:12px;font-weight:600;letter-spacing:.14em}
.gx-s-lw{font-family:var(--gx-serif-on);font-variation-settings:"opsz" 60;font-style:italic;font-weight:300;font-size:clamp(28px,4.8vh,58px);line-height:1.12;white-space:nowrap}
.gx-s-eyes{position:absolute;z-index:3;top:calc(64px + clamp(24px,5vh,56px));right:clamp(24px,4.6vw,72px);--eye:clamp(38px,7.2vh,86px);pointer-events:none}
.gx-s-eyes .gx-eye i{animation:gxEyeLook 2.4s var(--gx-out) infinite}
.gx-scan[data-stage="1"] .gx-s-eyes .gx-eye i{animation:gxEyeRead 1.3s cubic-bezier(.45,0,.55,1) infinite}
.gx-scan[data-stage="2"] .gx-s-eyes .gx-eye i{animation:gxEyeLook 1.7s var(--gx-out) infinite}
.gx-scan[data-stage="3"] .gx-s-eyes .gx-eye i{animation:gxEyeRead 1.1s cubic-bezier(.45,0,.55,1) infinite}
@media (max-width:767px){
  .gx-s-top{height:56px}
  .gx-s-stage{top:56px;background-size:50% 25%}
  .gx-s-pct{font-size:clamp(80px,25vw,150px)}
  .gx-s-lw{font-size:clamp(24px,7vw,34px)}
  .gx-s-eyes{top:78px;--eye:clamp(30px,9vw,46px)}
  /* the stage name always under the number: beside it, it would jump underneath the moment the number widened */
  .gx-s-ride{flex-direction:column;align-items:flex-start;row-gap:10px}
  .gx-s-ls{gap:4px}
}
@media (max-width:479px){.gx-s-brand span{display:none}}

/* ---------- the report's card, in the hero ----------
   The page's score panel steps aside for the card; its screen reader line stays. */
html body #wc-hero .wc-hp.gx-yc-on{display:block!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important;min-height:0!important}
html body #wc-hero .wc-hp.gx-yc-on>:not(.gx-yc):not([data-wc-hp-sr]){display:none!important}
/* the page's own panel, still used for a scan that could not finish, takes the blocks' square corners */
html:has(#wc-results.gx-on) #wc-hero .wc-hp{border-radius:0!important}
.gx-yc{container-type:inline-size;position:relative}
/* the URL field, focused after a reset, lands clear of the fixed site header */
html:has(#wc-results.gx-on) #wc-url{scroll-margin-top:110px}
/* with a report on screen, the questions about the scan have been answered: they go, as the method section does */
html:has(#wc-results.gx-rep-on) #wc-faq{display:none!important}
@media (max-width:991px){html:has(#wc-results.gx-on) #wc-url{scroll-margin-top:84px}}
@media (min-width:992px){.gx-yc{margin-top:5px}}
/* a report's checks: one glyph each, in its outcome */
.gx-c-cta svg{order:2}
.gx-c-cta:hover svg{transform:translateY(3px)}
/* once the report is ready: the button's line turns studio green and pulses outwards three times, then stays green */
.gx-c-cta.gx-c-go{border-color:var(--gx-neon);animation:gxGo 1.5s cubic-bezier(.16,1,.3,1) .3s 3}
.gx-c-cta.gx-c-go svg{color:var(--gx-neon)}
.gx-c-prog[hidden]{display:none}
}
@media screen and (prefers-reduced-motion:reduce){
  .gx-c-ast .gx-sh,.gx-eye,.gx-eye i{animation:none!important}
  .gx-c-cta.gx-c-go{animation:none!important}
}
/* ---------- Next steps: the band after the report ----------
   Under html.gx-next, set by the scan script wherever the graphic edition runs.
   The report's dark green carries on into the band, and the offer is one more poster of touching blocks:
   DD green for the name, price and actions, sand for what the review covers (one dot per deliverable),
   and a darker green for the note saying why it is recommended. Under the headline on narrower screens, rows
   of dots fading into the dark green; the pointer lights up the dots around it. */
html.gx-next:has(#wc-results.gx-on) #wc-review-band{
  --ns-moss:#102015;--ns-dk:#14331B;--ns-mid:#269228;--ns-neon:#3DFF3D;--ns-sand:#DDD5C2;--ns-paper:#F4F4F0;--ns-ink:#111111;--ns-mute:#9AAE9A;
  --ns-p:clamp(24px,2.8vw,44px);
  --ns-h:min(clamp(40px,5.6vw,84px),calc((100vw - 2 * var(--wc-gut,24px)) / 8.7));
  display:grid!important;grid-template-columns:minmax(0,1fr)!important;row-gap:0!important;column-gap:clamp(32px,4vw,64px)!important;
  background:var(--ns-moss)!important;color:var(--ns-paper)!important;font-family:var(--gx-sans)!important;
  padding-top:clamp(96px,11vw,176px)!important;padding-bottom:clamp(96px,11vw,176px)!important;border-top:1px solid rgba(61,255,61,.18)!important;
  -webkit-font-smoothing:antialiased
}
html.gx-next:has(#wc-results.gx-on) #wc-review-band>.wc-eyebrow-light{grid-column:1;grid-row:1;color:var(--ns-mute)!important;margin:0 0 18px!important}
html.gx-next:has(#wc-results.gx-on) #wc-review-band .wc-rule-light{background:var(--ns-neon)!important}

/* the headline: the report's scene title, with the promise in DD green on a line of its own. The measure
   (in em, so it holds at any size) breaks it after "gaps."; the size is capped so that first sentence
   still fits on one line on a phone. Colour by line covers the plain heading (reduced motion) and the
   word-split one alike. */
html.gx-next:has(#wc-results.gx-on) #wc-review-band>h2{
  grid-column:1;grid-row:2;
  max-width:8.7em!important;margin:0!important;
  font-family:var(--gx-serif)!important;font-style:italic!important;font-weight:200!important;
  font-size:var(--ns-h)!important;line-height:1.04!important;letter-spacing:-.02em!important;
  color:var(--ns-neon)!important;text-wrap:wrap!important
}
html.gx-next:has(#wc-results.gx-on) #wc-review-band>h2::first-line{color:var(--ns-paper)}
html.gx-next:has(#wc-results.gx-on) #wc-review-band>h2>.dd-hw:nth-of-type(-n+5){color:var(--ns-paper)}

/* ---------- the field: 100 dots, one row of the card's "checks run" fade in each of four rows ---------- */
html.gx-next:has(#wc-results.gx-on) #wc-review-band>.gx-ns-field{
  grid-column:1;grid-row:3;align-self:end;
  display:grid;grid-template-columns:repeat(var(--cols,25),var(--dot,10px));gap:var(--gap,3px);justify-content:start;
  width:100%;max-width:100%;min-width:0;margin:clamp(26px,4vw,40px) 0 0;padding:0;line-height:0;
  pointer-events:auto;-webkit-tap-highlight-color:transparent
}
html.gx-next:has(#wc-results.gx-on) #wc-review-band>.gx-ns-field i{display:block;width:var(--dot,10px);height:var(--dot,10px);border-radius:50%;transform-origin:50% 50%}
html.gx-next:has(#wc-results.gx-on) #wc-review-band>.gx-ns-field.gx-ns-wait i{opacity:0;transform:scale(.2)}
html.gx-next:has(#wc-results.gx-on) #wc-review-band>.gx-ns-field.gx-ns-wait.gx-ns-in i{
  opacity:1;transform:none;
  transition:opacity .5s ease calc(var(--c) * 34ms + var(--r) * 45ms),transform .8s var(--gx-out,cubic-bezier(.16,1,.3,1)) calc(var(--c) * 34ms + var(--r) * 45ms)
}
html.gx-next:has(#wc-results.gx-on) #wc-review-band>.gx-ns-field.gx-ns-glow i{transition:background-color .25s ease,transform .35s var(--gx-out,cubic-bezier(.16,1,.3,1))}
html.gx-next:has(#wc-results.gx-on) #wc-review-band>.gx-ns-field:not(.gx-ns-glow):not(.gx-ns-wait) i{transition:background-color .7s ease,transform .5s var(--gx-out,cubic-bezier(.16,1,.3,1))}
html.gx-next:has(#wc-results.gx-on) #wc-review-band>.gx-ns-field.gx-ns-full i{background-color:var(--ns-neon)!important;transition:background-color .4s ease calc(var(--c) * 24ms),transform .5s var(--gx-out,cubic-bezier(.16,1,.3,1))!important}

/* ---------- the poster ---------- */
html.gx-next:has(#wc-results.gx-on) #wc-review-band>.wc-review{
  grid-column:1/-1;grid-row:4;display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:0!important;
  margin:clamp(32px,4.4vw,64px) 0 0!important;padding:0!important;border:0!important;color:var(--ns-ink)!important
}
html.gx-next:has(#wc-results.gx-on) #wc-review-band .wc-review>div:first-child{margin:0!important;padding:0!important;min-width:0}

/* why it is recommended: a darker green strip on top, marked with the studio's asterisk */
html.gx-next:has(#wc-results.gx-on) #wc-review-band .wc-review-recommend[hidden],html.gx-next:has(#wc-results.gx-on) #wc-review-band .wc-review-recommend:empty{display:none!important}
html.gx-next:has(#wc-results.gx-on) #wc-review-band .wc-review-recommend{
  display:flex;align-items:center;gap:16px;max-width:none!important;margin:0!important;padding:18px var(--ns-p)!important;
  background:var(--ns-dk)!important;border:0!important;border-radius:0!important;
  color:var(--ns-paper)!important;font-family:var(--gx-sans)!important;font-size:clamp(15px,1.2vw,17px)!important;line-height:1.45!important
}
html.gx-next:has(#wc-results.gx-on) #wc-review-band .wc-review-recommend::before{
  content:"";flex:none;width:22px;height:22px;background:var(--ns-neon);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='41' width='18' height='100'/%3E%3Crect x='41' width='18' height='100' transform='rotate(45 50 50)'/%3E%3Crect x='41' width='18' height='100' transform='rotate(90 50 50)'/%3E%3Crect x='41' width='18' height='100' transform='rotate(135 50 50)'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='41' width='18' height='100'/%3E%3Crect x='41' width='18' height='100' transform='rotate(45 50 50)'/%3E%3Crect x='41' width='18' height='100' transform='rotate(90 50 50)'/%3E%3Crect x='41' width='18' height='100' transform='rotate(135 50 50)'/%3E%3C/svg%3E") center/contain no-repeat;
  animation:gxSpin 30s linear infinite
}

/* the offer: sand is the card; the DD green block is painted by the card's own ::before, so it sits behind
   the name, price and actions wherever the grid puts them (on a phone, a second green block, ::after, holds
   the actions at the foot) */
html.gx-next:has(#wc-results.gx-on) #wc-review-band .wc-review>div:nth-child(2){
  position:relative;isolation:isolate;display:grid!important;margin:0!important;padding:0!important;
  background:var(--ns-sand)!important;border:0!important;border-radius:0!important;box-shadow:none!important;
  gap:0!important;row-gap:0!important;column-gap:0!important;align-items:start!important;
  grid-template-columns:var(--ns-p) minmax(0,1fr) var(--ns-p)!important;
  grid-template-rows:var(--ns-p) auto auto var(--ns-p) var(--ns-p) auto auto var(--ns-p) var(--ns-p) auto var(--ns-p)!important
}
html.gx-next:has(#wc-results.gx-on) #wc-review-band .wc-review>div:nth-child(2)::before,
html.gx-next:has(#wc-results.gx-on) #wc-review-band .wc-review>div:nth-child(2)::after{content:""!important;display:block!important;z-index:-1;align-self:stretch;background:var(--ns-neon);grid-column:1/-1}
html.gx-next:has(#wc-results.gx-on) #wc-review-band .wc-review>div:nth-child(2)::before{grid-row:1/5}
html.gx-next:has(#wc-results.gx-on) #wc-review-band .wc-review>div:nth-child(2)::after{grid-row:9/12;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74.45 63.18'%3E%3Cpath fill='%23111' d='M10.21,0H0v63.18h10.21v-.03c17.43,0,31.57-14.14,31.57-31.57S27.64,0,10.21,0Z'/%3E%3Cpath fill='%23111' d='M45.62.11v62.95c16.15-1.4,28.83-14.96,28.83-31.48S61.77,1.51,45.62.11Z'/%3E%3C/svg%3E") right var(--ns-p) center/auto 26px no-repeat,var(--ns-neon)}
html.gx-next:has(#wc-results.gx-on) #wc-review-band .wc-review>div:nth-child(2)>*{min-width:0}
html.gx-next:has(#wc-results.gx-on) #wc-review-band .wc-review-price,html.gx-next:has(#wc-results.gx-on) #wc-review-band .wc-review-deliverables,html.gx-next:has(#wc-results.gx-on) #wc-review-band .wc-review-ctas{max-width:none!important}

html.gx-next:has(#wc-results.gx-on) #wc-review-band .wc-review-offer{
  grid-area:2/2!important;display:block!important;max-width:none!important;margin:0!important;padding-right:clamp(96px,9vw,130px)!important;
  font-family:var(--gx-serif-on)!important;font-style:italic!important;font-weight:300!important;
  font-size:clamp(30px,3.1vw,46px)!important;line-height:1.04!important;letter-spacing:-.015em!important;color:var(--ns-ink)!important
}
html.gx-next:has(#wc-results.gx-on) #wc-review-band .wc-review-offer::before{display:none!important}

/* the price, set like the report's score: a big number with a small denominator */
html.gx-next:has(#wc-results.gx-on) #wc-review-band .wc-review-price{
  grid-area:3/2!important;display:flex!important;align-items:flex-end;flex-wrap:nowrap;white-space:nowrap;
  margin:clamp(22px,2.6vw,40px) 0 0 -.04em!important;
  font-family:var(--gx-sans)!important;font-style:normal!important;font-weight:600!important;
  font-size:clamp(60px,8vw,128px)!important;line-height:.84!important;letter-spacing:-.035em!important;color:var(--ns-ink)!important;
  font-variant-numeric:lining-nums proportional-nums
}
html.gx-next:has(#wc-results.gx-on) #wc-review-band .wc-review-price-sub{
  margin:0 0 .12em .3em!important;font-family:var(--gx-sans)!important;font-style:normal!important;font-weight:600!important;
  font-size:.24em!important;line-height:1!important;letter-spacing:0!important;color:var(--ns-ink)!important;opacity:.72;vertical-align:baseline!important
}

/* what it covers: a checklist of glyphs, one dot per deliverable */
html.gx-next:has(#wc-results.gx-on) #wc-review-band .wc-review-desc{
  grid-area:6/2!important;align-self:start!important;max-width:44ch!important;margin:0 0 clamp(22px,2.4vw,34px)!important;text-wrap:balance;
  font-family:var(--gx-sans)!important;font-size:clamp(17px,1.35vw,20px)!important;line-height:1.45!important;color:var(--ns-ink)!important
}
html.gx-next:has(#wc-results.gx-on) #wc-review-band .wc-review-deliverables{
  grid-area:7/2!important;display:grid!important;grid-template-columns:minmax(0,1fr)!important;column-gap:clamp(20px,2.6vw,40px)!important;row-gap:0!important;
  margin:0!important;padding:0!important;border:0!important;list-style:none!important
}
html.gx-next:has(#wc-results.gx-on) #wc-review-band .wc-review-deliverable{
  position:relative!important;margin:0!important;padding:12px 0 12px 28px!important;border-top:1px solid rgba(17,17,17,.16);
  font-family:var(--gx-sans)!important;font-size:15px!important;line-height:1.4!important;color:var(--ns-ink)!important
}
html.gx-next:has(#wc-results.gx-on) #wc-review-band .wc-review-deliverable::before{
  content:""!important;position:absolute!important;left:0!important;top:calc(12px + .7em - 7px)!important;
  width:14px!important;height:14px!important;border-radius:50%!important;background:var(--ns-dk)!important;
  transition:transform .35s var(--gx-out,cubic-bezier(.16,1,.3,1))
}

/* the actions: pills, ink on the green */
html.gx-next:has(#wc-results.gx-on) #wc-review-band .wc-review-ctas{grid-area:10/2!important;display:flex!important;flex-wrap:wrap!important;gap:10px!important;margin:0!important;padding:0!important;border:0!important}
html.gx-next:has(#wc-results.gx-on) #wc-review-band .wc-review-cta-primary,
html.gx-next:has(#wc-results.gx-on) #wc-review-band .wc-review-cta-secondary{
  height:52px!important;min-height:52px!important;padding:0 28px!important;border-radius:999px!important;border:1.5px solid var(--ns-ink)!important;
  font-family:var(--gx-sans)!important;font-size:15px!important;font-weight:500!important;letter-spacing:0!important;text-decoration:none!important;
  transition:background-color .25s ease,color .25s ease,border-color .25s ease!important
}
html.gx-next:has(#wc-results.gx-on) #wc-review-band .wc-review-cta-primary{background:var(--ns-ink)!important;color:var(--ns-neon)!important}
html.gx-next:has(#wc-results.gx-on) #wc-review-band .wc-review-cta-secondary{background:transparent!important;color:var(--ns-ink)!important}
html.gx-next:has(#wc-results.gx-on) #wc-review-band .wc-review-cta-primary:hover{background:var(--ns-dk)!important;border-color:var(--ns-dk)!important;color:var(--ns-neon)!important}
html.gx-next:has(#wc-results.gx-on) #wc-review-band .wc-review-cta-secondary:hover{background:var(--ns-ink)!important;border-color:var(--ns-ink)!important;color:var(--ns-neon)!important}
html.gx-next:has(#wc-results.gx-on) #wc-review-band .wc-review-cta-primary:focus-visible,
html.gx-next:has(#wc-results.gx-on) #wc-review-band .wc-review-cta-secondary:focus-visible{outline:2px solid var(--ns-ink)!important;outline-offset:3px!important}

/* the eyes, keeping watch on the price; they follow the pointer while it is over the band */
html.gx-next:has(#wc-results.gx-on) #wc-review-band .gx-ns-eyes{grid-area:2/2;justify-self:end;align-self:start;--eye:clamp(20px,2.1vw,30px);z-index:1;pointer-events:none}
html.gx-next:has(#wc-results.gx-on) #wc-review-band .gx-ns-eyes .gx-eye i{transform:translate(6%,14%);animation:gxNsWatch 9s cubic-bezier(.16,1,.3,1) infinite}
html.gx-next:has(#wc-results.gx-on) #wc-review-band .gx-ns-eyes.track .gx-eye i{animation:none!important;transform:translate(calc(var(--look,.5) * 115.4%),14%);transition:transform .7s var(--gx-out,cubic-bezier(.16,1,.3,1))}
@keyframes gxNsWatch{0%,58%{transform:translate(6%,14%)}64%,80%{transform:translate(57.7%,0)}86%,100%{transform:translate(6%,14%)}}

/* the site's cursor is a DD green dot, which would vanish over the green block: over the offer card it turns ink */
html.gx-next:has(#wc-results.gx-on):has(#wc-review-band .wc-review>div:nth-child(2):hover) #dd-cursor{filter:brightness(0)}

/* the links under the poster */
html.gx-next:has(#wc-results.gx-on) #wc-review-band>.wc-quiet-links{grid-column:1/-1;grid-row:5;margin:clamp(24px,2.6vw,36px) 0 0!important;gap:4px 28px!important}
html.gx-next:has(#wc-results.gx-on) #wc-review-band .wc-quiet-link{
  color:rgba(244,244,240,.74)!important;font-family:var(--gx-sans)!important;font-size:14px!important;
  background-image:linear-gradient(rgba(244,244,240,.26),rgba(244,244,240,.26))!important;transition:color .25s ease
}
html.gx-next:has(#wc-results.gx-on) #wc-review-band .wc-quiet-link:hover{color:var(--ns-neon)!important;background-image:linear-gradient(var(--ns-neon),var(--ns-neon))!important}
html.gx-next:has(#wc-results.gx-on) #wc-review-band .wc-quiet-link:focus-visible{outline:2px solid var(--ns-neon)!important;outline-offset:3px!important;color:var(--ns-paper)!important}

/* ---------- wider ---------- */
@media (min-width:740px){
  html.gx-next:has(#wc-results.gx-on) #wc-review-band .wc-review-deliverables{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:repeat(5,auto);grid-auto-flow:column}
}
/* the dots are for narrower screens; a wide head is the headline alone */
@media (min-width:900px){
  html.gx-next:has(#wc-results.gx-on) #wc-review-band>.gx-ns-field{display:none}
}
/* 900-1359: the actions sit beside the price in the green head (the DD mark gives way here, as on a phone) */
@media (min-width:900px) and (max-width:1359px){
  html.gx-next:has(#wc-results.gx-on) #wc-review-band .wc-review>div:nth-child(2){grid-template-rows:var(--ns-p) auto auto var(--ns-p) var(--ns-p) auto auto var(--ns-p)!important}
  html.gx-next:has(#wc-results.gx-on) #wc-review-band .wc-review>div:nth-child(2)::after{display:none!important}
  html.gx-next:has(#wc-results.gx-on) #wc-review-band .wc-review-price{justify-self:start}
  html.gx-next:has(#wc-results.gx-on) #wc-review-band .wc-review-ctas{grid-area:3/2!important;justify-self:end;align-self:end}
}
/* the split: DD green on the left, sand on the right */
@media (min-width:1360px){
  html.gx-next:has(#wc-results.gx-on) #wc-review-band .wc-review>div:nth-child(2){
    grid-template-columns:var(--ns-p) minmax(0,2fr) var(--ns-p) var(--ns-p) minmax(0,3fr) var(--ns-p)!important;
    grid-template-rows:var(--ns-p) auto auto 1fr auto var(--ns-p)!important
  }
  html.gx-next:has(#wc-results.gx-on) #wc-review-band .wc-review>div:nth-child(2)::before{grid-column:1/4;grid-row:1/-1;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74.45 63.18'%3E%3Cpath fill='%23111' d='M10.21,0H0v63.18h10.21v-.03c17.43,0,31.57-14.14,31.57-31.57S27.64,0,10.21,0Z'/%3E%3Cpath fill='%23111' d='M45.62.11v62.95c16.15-1.4,28.83-14.96,28.83-31.48S61.77,1.51,45.62.11Z'/%3E%3C/svg%3E") right var(--ns-p) bottom calc(var(--ns-p) + 13px)/auto 26px no-repeat,var(--ns-neon)}
  html.gx-next:has(#wc-results.gx-on) #wc-review-band .wc-review>div:nth-child(2)::after{display:none!important}
  html.gx-next:has(#wc-results.gx-on) #wc-review-band .wc-review-ctas{grid-area:5/2!important;align-self:end!important;margin-top:clamp(32px,3.4vw,52px)!important;padding-right:calc(26px * 74.45 / 63.18 + 16px)!important}
  html.gx-next:has(#wc-results.gx-on) #wc-review-band .wc-review-desc{grid-area:2/5!important}
  html.gx-next:has(#wc-results.gx-on) #wc-review-band .wc-review-deliverables{grid-area:3/5/6/6!important;column-gap:24px!important}
}
/* a small phone: the eyes take the top of the green block, so the name keeps the full width */
@media (max-width:599px){
  html.gx-next:has(#wc-results.gx-on) #wc-review-band .wc-review-recommend{align-items:flex-start}
  html.gx-next:has(#wc-results.gx-on) #wc-review-band .wc-review-recommend::before{margin-top:2px}
  html.gx-next:has(#wc-results.gx-on) #wc-review-band .wc-review-ctas{flex-direction:column!important}
  html.gx-next:has(#wc-results.gx-on) #wc-review-band .wc-review-cta-primary,html.gx-next:has(#wc-results.gx-on) #wc-review-band .wc-review-cta-secondary{width:100%!important;justify-content:center!important;display:inline-flex!important;align-items:center!important}
  html.gx-next:has(#wc-results.gx-on) #wc-review-band .wc-review>div:nth-child(2)::after{background:var(--ns-neon)}
}
@media (max-width:379px){
  html.gx-next:has(#wc-results.gx-on) #wc-review-band .gx-ns-eyes{--eye:20px}
  html.gx-next:has(#wc-results.gx-on) #wc-review-band .wc-review-offer{padding-right:0!important;padding-top:34px!important}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  html.gx-next:has(#wc-results.gx-on) #wc-review-band .wc-review-deliverable:hover::before{transform:scale(1.36)}
}

@media (prefers-reduced-motion:reduce){
  html.gx-next:has(#wc-results.gx-on) #wc-review-band .wc-review-recommend::before,
  html.gx-next:has(#wc-results.gx-on) #wc-review-band .gx-ns-eyes .gx-eye,
  html.gx-next:has(#wc-results.gx-on) #wc-review-band .gx-ns-eyes .gx-eye i{animation:none!important}
  html.gx-next:has(#wc-results.gx-on) #wc-review-band>.gx-ns-field i{transition:none!important;opacity:1!important;transform:none!important}
  html.gx-next:has(#wc-results.gx-on) #wc-review-band>.gx-ns-field.gx-ns-full i{transition:none!important}
}

@media print{
  /* the report's card is for the screen; on paper the page's own letterhead carries the score */
  .gx-scan,.gx-c-chip,.gx-c-cta,.gx-yc{display:none!important}
  /* with the new report, its first scene carries the score: the letterhead keeps the site, verdict and date */
  .wc-hp.gx-yc-on .wc-gauge{display:none!important}
  .wc-hp.gx-yc-on{grid-template-columns:minmax(0,1fr)!important}
  .wc-hp.gx-yc-on>*{grid-column:1!important}
  .wc-hp.gx-yc-on .wc-hp-verdict{display:none!important}
  /* the letterhead prints on white even with background graphics on, its icon in ink */
  html body #wc-hero .wc-hp.gx-yc-on{background:#fff!important;color:#111!important}
  html body #wc-hero .wc-hp.gx-yc-on .wc-ic{background-color:#111!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  /* With the graphic report under it, the letterhead is the studio's logo with the coverage note beside it, set as a
     scene's lede is; the site, the date and the pages read follow in the report's own head, the site in Newsreader
     italic (see GX_REPORT_CSS). The panel's own line naming the site and the print-only date would repeat them. */
  html:has(#wc-results.gx-rep-on) #wc-hero .wc-hp.gx-yc-on{grid-template-columns:minmax(0,7fr) minmax(0,5fr)!important;column-gap:8mm!important;align-items:end!important;margin:0 0 9mm!important}
  html:has(#wc-results.gx-rep-on) #wc-hero .wc-hp.gx-yc-on::before{grid-column:1!important;grid-row:1;width:40mm!important;height:9.2mm!important;margin:0!important}
  html:has(#wc-results.gx-rep-on) #wc-hero .wc-hp.gx-yc-on>.wc-hp-cov{grid-column:2!important;grid-row:1;margin:0!important;font-family:var(--gx-sans)!important;font-size:8pt!important;line-height:1.45!important;color:var(--gx-dim)!important;text-wrap:pretty}
  html:has(#wc-results.gx-rep-on) #wc-hero .wc-hp.gx-yc-on>.wc-hp-top,html:has(#wc-results.gx-rep-on) #wc-hero .wc-hp.gx-yc-on>.wx-print-date{display:none!important}
  /* A scan that could not finish, or a visitor past a limit. The panel's blocks are for the screen (gx-limit.ts keeps
     them off paper), and the site's sheets give the panel its charcoal in every medium (report-css.ts) and its words
     ink on paper, which printed ink on ink. On paper it is the letterhead again: white, square, the logo, then the
     page's own words after a short green rule, the title in Newsreader italic. The button has nothing to do there. */
  html body #wc-hero .wc-hp:is(.gx-lf-on,.gx-lim-on){display:block!important;margin:0 0 8mm!important;padding:0!important;border:0!important;border-radius:0!important;background:#fff!important;color:#111!important}
  html body #wc-hero .wc-hp:is(.gx-lf-on,.gx-lim-on)::before{width:40mm!important;height:9.2mm!important;margin:0 0 14mm!important}
  html body #wc-hero .wc-hp:is(.gx-lf-on,.gx-lim-on)>.wc-hp-fail{display:block!important;margin:0!important;padding:0!important;text-align:left!important;break-inside:avoid}
  html body #wc-hero .wc-hp:is(.gx-lf-on,.gx-lim-on)>.wc-hp-fail::before{content:"";display:block;width:7mm;height:1.6pt;margin:0 0 5mm;background:var(--gx-neon);-webkit-print-color-adjust:exact;print-color-adjust:exact}
  html body #wc-hero .wc-hp:is(.gx-lf-on,.gx-lim-on) .wc-hp-fail-t{margin:0!important;max-width:22ch;font-family:var(--gx-serif)!important;font-style:italic!important;font-weight:200!important;font-size:30pt!important;line-height:1.06!important;letter-spacing:-.015em!important;color:var(--gx-ink)!important;text-align:left!important;text-wrap:balance}
  html body #wc-hero .wc-hp:is(.gx-lf-on,.gx-lim-on) .wc-hp-fail-b{margin:4mm 0 0!important;max-width:62ch!important;font-family:var(--gx-sans)!important;font-size:10pt!important;line-height:1.5!important;color:var(--gx-dim)!important;text-align:left!important}
  html body #wc-hero .wc-hp:is(.gx-lf-on,.gx-lim-on)>.wc-hp-retry,html body #wc-hero .wc-hp:is(.gx-lf-on,.gx-lim-on)>.wc-hp-cta{display:none!important}
  /* every page of a graphic report is a "gx" page, so the running heads below apply to it and to nothing else;
     a scan that could not finish prints on one too */
  html:has(#wc-results.gx-rep-on) body,html:has(#wc-hero .wc-hp:is(.gx-lf-on,.gx-lim-on)) body{page:gx}
  /* the page's spacer under the navigation is not needed on paper */
  html:has(.gx-yc-on,.gx-lf-on,.gx-lim-on) #dd-nav+div:not([class]){display:none!important}
  /* the staging subdomain's badge would otherwise print on every page */
  html:has(.gx-rep) .w-webflow-badge{display:none!important}
}
/* The running heads of a graphic report, in its own type: small tracked capitals for the words, and the page
   count set like a scene's number. They apply to "gx" pages only (see the print block above), and are important
   because Chrome settles margin boxes by load order, and the site's own @page rules load after this sheet. The
   first page leaves the head to the letterhead. (Margin boxes open each block, so the test that GX rules only
   select GX classes reads them as at-rules.) */
@page gx{@top-left{content:"Website audit report"!important;font:500 7pt "Instrument Sans",Arial,sans-serif!important;letter-spacing:.14em;text-transform:uppercase;color:#6B6B66!important}@top-right{content:"dd-design.com.au"!important;font:500 7pt "Instrument Sans",Arial,sans-serif!important;letter-spacing:.04em;color:#6B6B66!important}@bottom-left{content:"DD Design  \00B7  Free Website Audit + AI Readiness Scan"!important;font:500 7pt "Instrument Sans",Arial,sans-serif!important;letter-spacing:.14em;text-transform:uppercase;color:#6B6B66!important}@bottom-right{content:counter(page, decimal-leading-zero) " / " counter(pages, decimal-leading-zero)!important;font:600 8.5pt "Instrument Sans",Arial,sans-serif!important;letter-spacing:.02em;color:#111!important}}
@page gx:first{@top-left{content:none!important}@top-right{content:none!important}}

/* ================= GX: the report ================= */
#wc-results [data-wc-panel]>.gx-rep{grid-column:1/-1!important;order:-1;min-width:0;margin:0!important}
/* html body: the page's own sheet loads after this one on the live page, and its section rule has the same weight */
html body #wc-results.gx-rep-on [data-wc-panel]>.gx-gone{display:none!important}
.gx-rep{container-type:inline-size;font-family:var(--gx-sans);color:var(--gx-paper);-webkit-font-smoothing:antialiased;--pad:clamp(20px,2.6cqw,38px)}
.gx-rep *{box-sizing:border-box}
.gx-rep p,.gx-rep ul,.gx-rep ol,.gx-rep blockquote{margin:0}
.gx-rep ul,.gx-rep ol{padding:0;list-style:none}

/* ---------- the head of the report ---------- */
.gx-rep-h{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;padding:0 0 clamp(24px,3cqw,44px);border-bottom:1px solid rgba(244,244,240,.14)}
.gx-sc-e{display:flex;align-items:center;gap:14px;font-size:16px;color:#8B8B86}
.gx-sc-dash{flex:none;width:28px;height:2px;background:var(--gx-neon)}
.gx-sc-n{font-weight:600;color:var(--gx-neon);letter-spacing:.02em}
.gx-rep-t{margin:0;font-family:var(--gx-serif);font-style:italic;font-weight:200;font-size:clamp(30px,min(7.4cqw,calc(170cqw / var(--n,12))),112px);line-height:1;letter-spacing:-.025em;color:var(--gx-paper);overflow-wrap:normal}
.gx-rep-m{font-size:15px;color:#A6A6A1}
.gx-toc ol{display:flex;flex-wrap:wrap;gap:8px 8px;margin-top:6px}
.gx-toc a{display:inline-flex;align-items:baseline;gap:8px;padding:8px 14px 8px 12px;border:1px solid rgba(244,244,240,.2);border-radius:999px;color:var(--gx-paper);font-size:13px;line-height:1.2;text-decoration:none;transition:background-color .3s ease,border-color .3s ease,color .3s ease}
.gx-toc a span{font-weight:600;font-size:11px;color:var(--gx-neon);transition:color .3s ease}
@media (hover:hover){.gx-toc a:hover{background:var(--gx-neon);border-color:var(--gx-neon);color:var(--gx-ink)}.gx-toc a:hover span{color:var(--gx-ink)}}
.gx-toc a:focus-visible{outline:2px solid var(--gx-neon);outline-offset:3px}
/* the chips sit in even rows (8 across, 4 and 4, or pairs) rather than wrapping one onto a row of its own */
.gx-toc ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.gx-toc li{min-width:0}
.gx-toc a{display:flex;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@container (min-width:640px){.gx-toc ol{grid-template-columns:repeat(4,minmax(0,1fr))}}
@container (min-width:1180px){.gx-toc ol{grid-template-columns:repeat(8,minmax(0,max-content))}}

/* ---------- a scene: a numbered heading over a poster of blocks ---------- */
.gx-sc{margin:clamp(88px,10cqw,168px) 0 0;scroll-margin-top:110px}
.gx-sc-h{display:grid;grid-template-columns:minmax(0,1fr);gap:14px 40px;margin:0 0 clamp(24px,2.8cqw,40px)}
.gx-sc-t{margin:0;font-family:var(--gx-serif);font-style:italic;font-weight:200;font-size:clamp(40px,5.6cqw,82px);line-height:1.02;letter-spacing:-.02em;color:var(--gx-paper)}
.gx-sc-l{font-size:clamp(15px,1.4cqw,18px);line-height:1.55;color:#A6A6A1;max-width:52ch}
@container (min-width:900px){
  .gx-sc-h{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end}
  /* the lede spans the eyebrow and the headline, so the eyebrow always sits the same distance above the headline */
  .gx-sc-e{grid-column:1;grid-row:1}
  .gx-sc-t{grid-column:1;grid-row:2}
  .gx-sc-l{grid-column:2;grid-row:1/span 2;align-self:end}
  .gx-sc-l{padding-bottom:.5em}
}
.gx-pst{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));isolation:isolate}
/* zero specificity, so each block's own column rules (in the width steps below) always win */
:where(.gx-pst>.gx-t){grid-column:1/-1}
.gx-pst>.gx-t{padding:var(--pad);display:flex;flex-direction:column;gap:14px}
.gx-pst>.gx-t>:not(.gx-fill):not(.gx-cover){position:relative;z-index:1}
.gx-rep .gx-lab{letter-spacing:.14em}
.gx-r-def{font-size:13px;line-height:1.5;opacity:.78;max-width:60ch}

/* before and while a scene plays: each block is green until its green drains away */
.gx-rep .gx-cover{display:none;position:absolute;inset:-2px;z-index:5;background:var(--gx-neon);pointer-events:none}
.gx-sc.gx-armed .gx-cover,.gx-sc.gx-rev .gx-cover{display:block}
.gx-sc.gx-armed .gx-sc-h{opacity:0}
.gx-sc.gx-rev .gx-pst{background:var(--gx-neon)}
.gx-sc.gx-rev .gx-t.gx-wait>.gx-fill{visibility:hidden}

/* ---------- numbers ---------- */
/* proportional figures, lightly tracked: a 1 sits as close to its neighbours as a 0 does, so every gap reads the same */
.gx-big{display:flex;align-items:flex-end;margin-left:-.04em;font-weight:600;font-size:clamp(64px,7.4cqw,112px);line-height:.9;letter-spacing:-.025em;font-variant-numeric:lining-nums proportional-nums}
.gx-big-d{font-size:.26em;font-weight:600;letter-spacing:0;line-height:1;margin:0 0 .3em .08em;opacity:.7}
.gx-big-xl{font-size:clamp(120px,15.5cqw,232px);letter-spacing:-.035em}
.gx-big-xl .gx-big-d{font-size:.15em;margin-bottom:.42em;opacity:1}
.gx-big-l{font-size:clamp(76px,8.6cqw,132px)}

/* ---------- the glyphs: full, half (a D), missed, within reach, not checked ---------- */
.gx-rep{--g-on:var(--gx-neon);--g-off:rgba(244,244,240,.3);--g-reach:var(--gx-neon)}
.gx-g{position:relative;display:block;flex:none;width:var(--gs,18px);height:var(--gs,18px);border-radius:50%;background:transparent}
.gx-g-f{background:var(--g-on)}
.gx-g-h{background:linear-gradient(90deg,var(--g-on) 50%,transparent 50%);box-shadow:inset 0 0 0 1.5px var(--g-off)}
.gx-g-hr{background:linear-gradient(90deg,var(--g-on) 50%,transparent 50%);box-shadow:inset 0 0 0 2px var(--g-reach)}
.gx-g-m{box-shadow:inset 0 0 0 1.5px var(--g-off)}
.gx-g-r{box-shadow:inset 0 0 0 2.5px var(--g-reach)}
.gx-g-u{border:1.5px dashed var(--g-off)}
/* half within reach, half missed: the ring is green on the left half only */
.gx-g-rm{box-shadow:inset 0 0 0 1.5px var(--g-off)}
.gx-g-rm::before{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 2.5px var(--g-reach);clip-path:inset(0 50% 0 0)}
.gx-key{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:12px;line-height:1.2}
.gx-key>span{display:inline-flex;align-items:center;gap:8px}
.gx-key .gx-g{--gs:12px}
/* on the light blocks, the glyphs are ink */
.gx-r-hero,.gx-r-m-checks,.gx-r-m-titles,.gx-r-m-sd,.gx-r-m-pages,.gx-r-lift,.gx-r-part:nth-child(2),.gx-r-part:nth-child(3),.gx-r-ver,.gx-r-pg,.gx-r-fine,.gx-r-asp[data-m="ok"],.gx-r-asp[data-m="mid"],.gx-r-clar{--g-on:var(--gx-ink);--g-off:rgba(17,17,17,.34);--g-reach:var(--gx-ink)}

/* ---------- 01 the score ---------- */
.gx-r-hero{--bg:var(--gx-neon);color:var(--gx-ink)}
.gx-r-hero .gx-big{margin:clamp(6px,1.4cqw,20px) 0 0 -.04em}
.gx-r-eyes{position:absolute!important;top:var(--pad);right:var(--pad);--eye:clamp(20px,2.4cqw,30px)}
.gx-r-eyes .gx-eye i{animation:gxEyeIdle 8s var(--gx-out) infinite}
.gx-eyes.track .gx-eye i{animation:none!important;transform:translateX(calc(var(--look,.5) * 115.4%));transition:transform .7s var(--gx-out)}
.gx-r-verdict{font-family:var(--gx-serif-on);font-variation-settings:"opsz" 60;font-style:italic;font-weight:300;font-size:clamp(24px,2.5cqw,34px);line-height:1.12;letter-spacing:-.01em;max-width:18ch}
.gx-r-none{font-family:var(--gx-serif-on);font-style:italic;font-weight:300;font-size:clamp(48px,6cqw,84px);line-height:1}
/* above the element reset at the top, which would otherwise take these margins away */
.gx-rep .gx-r-none,.gx-rep .gx-eq{margin-top:auto}
.gx-rep .gx-big,.gx-rep .gx-r-fn{margin-left:-.04em}
.gx-r-hero-none{--bg:var(--gx-beige)}
.gx-r-hero-none .gx-eye{box-shadow:inset 0 0 0 1.5px rgba(17,17,17,.35)}
.gx-r-hero>.gx-lab{padding-right:calc(clamp(20px,2.4cqw,30px) * 4.4)}
.gx-eq{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px clamp(8px,1.2cqw,14px);margin-top:auto;padding-top:10px}
.gx-eq-t{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.gx-eq-g{display:inline-flex;align-items:flex-end;gap:inherit}
@container (max-width:559px){.gx-eq{row-gap:14px}}
.gx-eq-t b{font-weight:600;font-size:clamp(21px,2.6cqw,36px);line-height:1;letter-spacing:-.035em}
.gx-eq-t i{font-style:normal;font-size:10.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.gx-eq-op{font-weight:500;font-size:clamp(17px,2cqw,28px);line-height:1.2;opacity:.45;padding-bottom:19px}
.gx-eq-s b{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}
.gx-r-note{font-size:13px;line-height:1.45;opacity:.8;max-width:52ch}
.gx-band{display:flex;flex-direction:column;gap:8px}
.gx-band-bar{position:relative;display:block;height:12px;border-radius:999px;background:rgba(17,17,17,.14);overflow:hidden}
.gx-band-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--gx-ink);transform-origin:0 50%}
.gx-band-row{display:flex}
.gx-band-s{flex:1 1 0;min-width:0;padding:0 0 0 7px;border-left:1.5px solid rgba(17,17,17,.3)}
/* a label too long for its band wraps onto a second line rather than being cut short */
.gx-band-s i{display:block;font-style:normal;font-size:10.5px;font-weight:500;line-height:1.2;letter-spacing:.1em;text-transform:uppercase;overflow-wrap:normal;opacity:.5}
.gx-band-s.on{border-left-color:var(--gx-ink)}
.gx-band-s.on i{opacity:1;font-weight:600}
/* on a phone only the band the score is in is named; its name covers the ticks it runs across */
@container (max-width:559px){.gx-band-s:not(.on) i{visibility:hidden}.gx-band-s.on{position:relative;z-index:1}.gx-band-s.on i{position:relative;display:inline-block;overflow:visible;white-space:nowrap;padding-right:6px;background:var(--bg,var(--gx-neon))}.gx-band-s.on:last-child i{float:right;padding:0 0 0 6px}}
.gx-r-mx{--bg:var(--gx-moss);color:var(--gx-paper)}
/* the dots grow with the tile, so on a wide screen the matrix still fills its block */
.gx-mx{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(14px,4cqw,72px);max-width:max(600px,62cqw);margin:auto 0 0;padding-top:10px;--dot:clamp(13px,2.7cqw,46px);--gap:clamp(4px,.7cqw,12px)}
.gx-mx-c{display:flex;flex-direction:column;gap:14px;transition:opacity .4s ease}
.gx-mx-b{display:grid;grid-template-columns:repeat(var(--c),var(--dot));gap:var(--gap);transform:scaleY(-1)}
.gx-mx-b .gx-g{--gs:var(--dot)}
.gx-mx.gx-mx-focus .gx-mx-c:not(.on){opacity:.28}
.gx-mx-l{display:flex;flex-direction:column;gap:4px}
.gx-mx-v{font-weight:600;font-size:clamp(20px,2.1cqw,30px);line-height:1;letter-spacing:-.03em}
.gx-mx-v span{font-size:max(11px,.5em);letter-spacing:0;opacity:.6;margin-left:2px}
.gx-mx-n{font-size:10.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.gx-mx-foot{font-size:14px;line-height:1.45;color:var(--gx-grey)}
.gx-mx-foot b{color:var(--gx-neon);font-weight:600}
@container (min-width:900px){
  .gx-r-hero{grid-column:1/span 5;min-height:clamp(520px,50cqw,640px)}
  .gx-r-mx{grid-column:6/span 7}
}

/* ---------- 02 at a glance ---------- */
.gx-r-m .gx-big{margin-top:clamp(10px,1.6cqw,22px)}
.gx-r-m .gx-marks{margin-top:auto;padding-top:14px}
.gx-r-m-pages{--bg:var(--gx-sand);color:var(--gx-ink)}
.gx-r-m-checks{--bg:var(--gx-neon);color:var(--gx-ink)}
.gx-r-m-titles{--bg:var(--gx-moss);color:var(--gx-paper)}
.gx-r-m-sd{--bg:var(--gx-beige);color:var(--gx-ink)}
.gx-r-m-alt{--bg:var(--gx-neon);color:var(--gx-ink)}
.gx-marks{display:flex;flex-direction:column;gap:12px}
.gx-ds{display:flex}
.gx-d{display:block;flex:none;width:clamp(26px,3.6cqw,48px);color:var(--c,var(--gx-ink))}
.gx-d:not(.on){color:rgba(17,17,17,.14)}
.gx-gs{display:flex;flex-wrap:wrap;gap:clamp(5px,.7cqw,9px)}
.gx-gs .gx-g{--gs:clamp(16px,2.3cqw,30px)}
/* titles: one bar per page, as long as its title; the band is the length search results show in full */
.gx-tls{display:flex;flex-direction:column;gap:8px}
.gx-tl{display:grid;grid-template-columns:minmax(0,5.4em) minmax(0,1fr) 2.2em;align-items:center;gap:12px;font-size:11.5px;line-height:1.2}
.gx-tl-p{opacity:.72;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gx-tl-n{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.gx-tl-b{position:relative;display:block;height:14px}
.gx-tl-b::before{content:"";position:absolute;top:-4px;bottom:-4px;left:var(--lo);width:calc(var(--hi) - var(--lo));background:rgba(61,255,61,.13)}
.gx-tl-b i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:rgba(244,244,240,.3);transform-origin:0 50%}
.gx-tl.on .gx-tl-b i{background:var(--gx-neon)}
.gx-tl-x .gx-tl-b{height:12px}
.gx-tl-x .gx-tl-b::before{bottom:auto;top:-4px;height:4px}
.gx-tl-x em{position:absolute;top:2px;transform:translateX(-50%);font-style:normal;font-size:10.5px;font-weight:600;color:var(--gx-neon)}
/* hidden labels: a label per page, filled when it carries structured data that parses */
.gx-lbs{display:flex;flex-wrap:wrap;gap:8px}
.gx-lb{display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:8px 14px;border-radius:999px;font-size:12.5px;font-weight:500;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:rgba(17,17,17,.7);box-shadow:inset 0 0 0 1.5px rgba(17,17,17,.24)}
.gx-lb.on{background:var(--gx-moss);color:var(--gx-neon);box-shadow:none}
.gx-lb.on::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--gx-neon)}
/* images: one block per image, page by page, solid when described */
.gx-ims{display:flex;flex-direction:column;gap:8px}
.gx-im{display:grid;grid-template-columns:minmax(0,5.4em) minmax(0,1fr) 3em;align-items:center;gap:12px;font-size:11.5px;line-height:1.2}
.gx-im-s{display:flex;flex-wrap:wrap;gap:3px}
/* up to --n blocks share a row, shrinking to fit it; --im makes them smaller still on pages with a great many images */
.gx-im-s i{display:block;flex:none;width:min(var(--im,clamp(10px,1.05cqw,14px)),calc((100% - (var(--n,1) - 1) * 3px) / var(--n,1)));min-width:4px;aspect-ratio:1;border-radius:3px;box-shadow:inset 0 0 0 1.5px rgba(17,17,17,.38)}
.gx-im-s i.on{background:var(--gx-ink);box-shadow:none}
@container (min-width:900px){
  .gx-r-m{min-height:clamp(300px,27cqw,360px)}
  .gx-r-m-checks{grid-column:1/span 8}
  .gx-r-m-pages{grid-column:9/span 4}
  .gx-r-m-titles{grid-column:1/span 4}
  .gx-r-m-sd{grid-column:5/span 4}
  .gx-r-m-alt{grid-column:9/span 4}
  .gx-r-m-end{grid-column-end:-1}
}
@container (min-width:560px) and (max-width:899px){
  .gx-r-m{grid-column:span 6}
  .gx-r-m-checks,.gx-r-m-odd{grid-column:1/-1}
  .gx-r-m-pages .gx-d{width:clamp(36px,7cqw,64px)}
}

/* ---------- 03 fix these first ---------- */
.gx-r-fix{--bg:var(--gx-moss);color:var(--gx-paper)}
.gx-r-fix>.gx-lab{color:var(--gx-neon);padding-right:64px}
.gx-r-ast{position:absolute!important;top:var(--pad);right:var(--pad);width:clamp(40px,4.4cqw,62px);color:var(--gx-neon)}
.gx-r-ast .gx-sh{animation:gxSpin 30s linear infinite}
.gx-r-fn{font-weight:600;font-size:clamp(64px,7cqw,108px);line-height:.85;letter-spacing:-.025em;font-variant-numeric:lining-nums proportional-nums;color:var(--gx-neon)}
.gx-r-ft{font-size:clamp(19px,1.85cqw,25px);font-weight:500;line-height:1.28;letter-spacing:-.01em}
.gx-r-why{font-size:14px;line-height:1.5;color:var(--gx-grey)}
.gx-r-do{display:flex;flex-direction:column;gap:6px;padding:14px 0 0;border-top:1px solid rgba(244,244,240,.16)}
.gx-r-do .gx-lab{color:var(--gx-neon);font-size:10.5px}
.gx-r-dt{font-size:15px;line-height:1.45}
.gx-ev-ph{visibility:hidden;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.gx-r-worth{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:auto;padding-top:6px}
.gx-gs-r{gap:6px}
.gx-gs-r .gx-g{--gs:16px}
.gx-r-pts{font-size:14px;color:var(--gx-grey)}
.gx-r-pts b{font-weight:600;font-size:18px;color:var(--gx-neon);letter-spacing:-.02em}
.gx-chip{display:inline-block;padding:5px 11px;border:1px solid currentColor;border-radius:999px;font-size:10.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;opacity:.8}
.gx-ev{font-size:13px;line-height:1.5;color:var(--gx-grey)}
.gx-ev summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--gx-paper)}
.gx-ev summary::-webkit-details-marker{display:none}
.gx-ev summary::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .3s ease}
.gx-ev[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.gx-ev summary:focus-visible{outline:2px solid var(--gx-neon);outline-offset:3px}
.gx-ev p{margin-top:8px!important;overflow-wrap:anywhere}
.gx-r-lift{--bg:var(--gx-neon);color:var(--gx-ink);display:grid!important;grid-template-columns:minmax(0,1fr);gap:18px}
.gx-r-lt{font-size:clamp(20px,2cqw,28px);line-height:1.25;letter-spacing:-.01em;font-weight:500;max-width:34ch}
.gx-r-lt b{font-weight:600}
.gx-lift{display:grid;grid-template-columns:repeat(100,minmax(0,1fr));gap:2px;height:clamp(34px,4cqw,56px)}
.gx-lift i{display:block;border-radius:2px;background:rgba(17,17,17,.12);transform-origin:50% 100%}
/* on a phone, four rows of 25, so each bar is wide enough to show whether it is earned or within reach */
@container (max-width:559px){.gx-lift{grid-template-columns:repeat(25,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));row-gap:4px;height:112px}}
.gx-lift i.on{background:var(--gx-ink)}
.gx-lift i.up{background:repeating-linear-gradient(135deg,var(--gx-ink) 0 2px,transparent 2px 5px);box-shadow:inset 0 0 0 1.5px var(--gx-ink)}
.gx-r-lnum{align-items:center;gap:clamp(12px,1.6cqw,24px)}
.gx-r-lfrom{font-size:.42em;opacity:.45;letter-spacing:-.02em;font-variant-numeric:tabular-nums;text-align:right}
.gx-r-larrow{display:block;width:.42em;flex:none}
.gx-r-larrow svg{display:block;width:100%;height:auto;opacity:.6}
.gx-r-clear{--bg:var(--gx-neon);color:var(--gx-ink)}
.gx-r-clear-f{width:clamp(64px,7cqw,104px)}
.gx-r-clear-t{font-family:var(--gx-serif-on);font-style:italic;font-weight:300;font-size:clamp(34px,4cqw,56px);line-height:1.05}
@container (min-width:900px){
  .gx-r-fix{grid-column:span 4;min-height:clamp(440px,38cqw,500px)}
  .gx-r-fix[data-of="1"]{grid-column:1/-1;min-height:0}
  .gx-r-fix[data-of="2"]{grid-column:span 6}
  .gx-r-fix[data-of="1"] .gx-r-ft{max-width:40ch}
  .gx-r-lift{grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:48px}
  .gx-r-lift>.gx-lab{grid-column:1/-1}
  .gx-r-lt{grid-column:1;grid-row:2}
  .gx-lift{grid-column:1;grid-row:3}
  .gx-r-lnum{grid-column:2;grid-row:2/span 2}
  .gx-rep .gx-r-lnum{margin-bottom:-.08em}
}
@container (min-width:560px) and (max-width:899px){
  .gx-r-fix{grid-column:span 6}
  .gx-r-fix[data-of="1"],.gx-r-fix[data-of="3"]:nth-child(3){grid-column:1/-1}
}
.gx-r-fix:nth-child(2){--bg:#14331B}
/* Fixes side by side share their rows, so each part (number, name, finding, why, do this, points, what we
   found) starts level with its neighbours', however long the words in any one of them run. */
@supports (grid-template-rows:subgrid){
  @container (min-width:900px){
    .gx-r-fix[data-of="2"],.gx-r-fix[data-of="3"]{display:grid;grid-row:span 7;grid-template-rows:subgrid;row-gap:14px;min-height:0}
    .gx-r-fix[data-of="2"]>.gx-r-worth,.gx-r-fix[data-of="3"]>.gx-r-worth{align-self:end}
  }
}

/* ---------- 04 the three parts ---------- */
.gx-r-part{display:grid!important;grid-template-columns:minmax(0,1fr);gap:28px}
.gx-r-part:nth-child(1){--bg:var(--gx-moss);color:var(--gx-paper)}
.gx-r-part:nth-child(1) .gx-r-pi{color:var(--gx-neon)}
.gx-r-part:nth-child(1) .gx-r-pq{color:var(--gx-paper)}
.gx-r-part:nth-child(2){--bg:var(--gx-neon);color:var(--gx-ink)}
.gx-r-part:nth-child(3){--bg:var(--gx-beige);color:var(--gx-ink)}
.gx-r-pi{display:flex;flex-direction:column;gap:14px}
.gx-r-pn{opacity:.55;margin-right:10px}
.gx-r-pq{font-family:var(--gx-serif);font-style:italic;font-weight:200;font-size:clamp(34px,3.8cqw,54px);line-height:1.05;letter-spacing:-.015em;max-width:14ch}
.gx-r-part:nth-child(2) .gx-r-pq{font-family:var(--gx-serif-on);font-weight:300}
.gx-r-pi .gx-big{margin-top:auto}
.gx-r-pc{font-size:14px;font-weight:500}
.gx-r-part:nth-child(1) .gx-r-def,.gx-r-part:nth-child(1) .gx-r-pc{color:var(--gx-paper)}
.gx-cks{display:flex;flex-direction:column}
.gx-cks-h{display:flex;justify-content:space-between;padding:0 0 10px;font-size:10.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;opacity:.6}
.gx-ck{border-top:1px solid color-mix(in srgb,currentColor 18%,transparent)}
.gx-ck:last-child{border-bottom:1px solid color-mix(in srgb,currentColor 18%,transparent)}
.gx-ck summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:18px minmax(0,1fr) minmax(0,38%) 4.2em;align-items:center;gap:14px;padding:13px 0;font-size:15px;line-height:1.3}
.gx-ck summary::-webkit-details-marker{display:none}
.gx-ck summary:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.gx-ck summary .gx-g{--gs:16px}
.gx-ck-l{min-width:0}
.gx-ck-bar{position:relative;display:block;height:14px;width:calc(var(--w) * 100%);border-radius:4px;background:color-mix(in srgb,currentColor 15%,transparent);overflow:hidden}
.gx-ck-bar i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--c) * 100%);border-radius:4px;background:currentColor;transform-origin:0 50%}
.gx-r-part:nth-child(1) .gx-ck-bar i{background:var(--gx-neon)}
.gx-ck[data-o="unavailable"] .gx-ck-bar{background:transparent;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,currentColor 35%,transparent)}
.gx-ck-p{text-align:right;font-weight:600;font-size:14px;letter-spacing:-.01em;white-space:nowrap}
.gx-ck-d{display:flex;flex-direction:column;gap:8px;padding:0 0 16px 32px;font-size:14px;line-height:1.5;opacity:.85}
.gx-ck-d ul{display:flex;flex-direction:column;gap:3px;font-size:13px;overflow-wrap:anywhere}
.gx-ck-d li span{font-weight:600}
.gx-ck-rec b{font-weight:600;margin-right:6px}
@container (min-width:900px){
  .gx-r-part{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(32px,4cqw,64px)}
}
@container (max-width:559px){
  .gx-ck summary{grid-template-columns:16px minmax(0,1fr) 3.8em;row-gap:8px}
  .gx-ck-bar{grid-column:2/-1;grid-row:2;max-width:100%}
}

/* ---------- 05 your message ---------- */
.gx-r-asp[data-m="ok"]{--bg:var(--gx-neon);color:var(--gx-ink)}
.gx-r-asp[data-m="mid"]{--bg:var(--gx-sand);color:var(--gx-ink)}
.gx-r-asp[data-m="no"]+.gx-r-asp[data-m="no"]{--bg:#14331B}
.gx-r-asp[data-m="ok"]+.gx-r-asp[data-m="ok"]{--bg:rgb(50,202,50)}
.gx-r-asp[data-m="mid"]+.gx-r-asp[data-m="mid"]{--bg:var(--gx-beige)}
.gx-r-asp[data-m="no"]{--bg:var(--gx-moss);color:var(--gx-paper)}
.gx-r-bigface{display:block;width:clamp(72px,7.6cqw,112px)}
.gx-r-bigface .gx-face{width:100%;height:auto}
.gx-r-mood{font-family:var(--gx-serif);font-style:italic;font-weight:200;font-size:clamp(34px,3.6cqw,52px);line-height:1.02;letter-spacing:-.015em}
.gx-r-asp[data-m="ok"] .gx-r-mood{font-family:var(--gx-serif-on);font-weight:300}
.gx-r-val{font-size:15px;line-height:1.45;font-weight:500;max-width:40ch}
.gx-q{margin:auto 0 0!important;padding:14px 0 0!important;border:0!important;border-top:1px solid color-mix(in srgb,currentColor 22%,transparent)!important;font-size:inherit!important;line-height:inherit!important}
.gx-q p{font-family:var(--gx-serif);font-style:italic;font-weight:200;font-size:clamp(18px,1.6cqw,22px);line-height:1.3}
.gx-q p::before{content:"\201C"}
.gx-q p::after{content:"\201D"}
.gx-r-asp[data-m="ok"] .gx-q p{font-family:var(--gx-serif-on);font-weight:300}
.gx-q cite{display:block;margin-top:8px;font-style:normal;font-size:12px;font-weight:500;letter-spacing:.02em;opacity:.65}
.gx-face-search .gx-face-p{animation:gxSearch 3.4s var(--gx-out) infinite}
@keyframes gxSearch{0%,15%{transform:translateX(0)}30%,45%{transform:translateX(-1.6px)}60%,75%{transform:translateX(1.6px)}90%,100%{transform:translateX(0)}}
.gx-r-clar{--bg:var(--gx-paper);color:var(--gx-ink);display:grid!important;grid-template-columns:minmax(0,1fr);gap:28px}
.gx-r-cl{display:flex;flex-direction:column;gap:12px}
.gx-r-word{font-family:var(--gx-serif);font-style:italic;font-weight:200;font-size:clamp(64px,8cqw,124px);line-height:.95;letter-spacing:-.03em}
.gx-r-lists{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
.gx-r-list{display:flex;flex-direction:column;gap:12px}
.gx-r-list ul{display:flex;flex-direction:column;gap:14px}
.gx-r-list li>p{font-size:15px;line-height:1.45;font-weight:500}
.gx-r-list .gx-q{margin-top:8px!important;padding-top:8px!important}
.gx-r-list .gx-q p{font-size:17px}
.gx-r-msg-none{--bg:var(--gx-moss);color:var(--gx-paper)}
@container (min-width:900px){
  .gx-r-asp{grid-column:span 4;min-height:clamp(480px,42cqw,560px)}
  .gx-r-clar{grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:clamp(32px,4cqw,64px)}
  .gx-r-lists{grid-template-columns:repeat(auto-fit,minmax(0,1fr));column-gap:clamp(20px,2.4cqw,40px)}
}

/* ---------- 06 search and AI ---------- */
.gx-r-ver{--bg:var(--gx-paper);color:var(--gx-ink)}
.gx-ai{display:flex;flex-direction:column}
.gx-ai-i{display:grid;grid-template-columns:18px minmax(0,1fr);gap:14px;padding:14px 0;border-top:1px solid rgba(17,17,17,.14)}
.gx-ai-i .gx-g{--gs:16px;margin-top:2px}
.gx-ai-l{font-size:15px;line-height:1.35;font-weight:500}
.gx-ai-s{margin-top:4px!important;font-size:13px;line-height:1.45;opacity:.72;overflow-wrap:anywhere}
.gx-ai-s b{font-weight:600}
.gx-r-bots{--bg:var(--gx-moss);color:var(--gx-paper);gap:22px!important}
.gx-bots-g{display:flex;flex-direction:column;gap:12px}
.gx-bots-g .gx-lab{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.gx-bots-note{font-size:11px;letter-spacing:0;text-transform:none;font-weight:400;color:var(--gx-grey)}
.gx-bots{display:flex;flex-wrap:wrap;gap:8px}
/* a robot is a pill: green when robots.txt lets it in, outlined and struck through when it blocks it */
.gx-bot{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--gx-neon);color:var(--gx-ink);font-size:13px;font-weight:500;line-height:1.1}
.gx-bot::before,.gx-bot-k{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:currentColor}
.gx-bot[data-s="open"]{background:transparent;color:var(--gx-neon);box-shadow:inset 0 0 0 1.5px var(--gx-neon)}
.gx-bot[data-s="block"],.gx-bot[data-s="unknown"]{background:transparent;color:rgba(244,244,240,.55);box-shadow:inset 0 0 0 1.5px rgba(244,244,240,.28)}
.gx-bot[data-s="block"] .gx-bot-n{text-decoration:line-through;text-decoration-thickness:1.5px}
.gx-bot[data-s="block"]::before{width:9px;height:1.5px;border-radius:1px}
.gx-bot-k{display:inline-block;width:10px;height:10px;background:var(--gx-neon)}
.gx-bot-k[data-s="open"]{background:transparent;box-shadow:inset 0 0 0 1.5px var(--gx-neon)}
.gx-bot-k[data-s="block"]{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(244,244,240,.4)}
.gx-r-bots .gx-r-eyes{--eye:clamp(18px,2cqw,26px)}
.gx-r-bots-h{padding-right:90px}
.gx-r-bots .gx-key{margin-top:auto;color:var(--gx-grey)}
.gx-r-fine{--bg:var(--gx-sand);color:var(--gx-ink)}
.gx-r-llms{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;font-size:14px;line-height:1.45}
.gx-r-llms .gx-lab{text-transform:none;letter-spacing:.02em}
@container (min-width:900px){
  .gx-r-ver{grid-column:1/span 6}
  .gx-r-bots{grid-column:7/span 6}
}

/* ---------- 07 already working ---------- */
.gx-r-stack{--bg:var(--gx-moss);color:var(--gx-paper)}
.gx-r-stack .gx-big{color:var(--gx-neon)}
.gx-dstk{position:relative;height:clamp(300px,32cqw,440px);margin-top:auto;--ds:clamp(92px,9.4cqw,124px)}
.gx-dstk .gx-disc{position:absolute;left:0;width:var(--ds);height:var(--ds);aspect-ratio:auto;display:grid;place-items:center;border-radius:50%;color:var(--gx-moss);background:var(--c);bottom:calc((100% - var(--ds)) * var(--k) / max(1, var(--n) - 1))}
.gx-dstk .gx-face{width:58%;height:auto}
.gx-r-win{--bg:var(--gx-neon);color:var(--gx-ink)}
.gx-r-win:nth-of-type(odd){--bg:var(--gx-beige)}
.gx-r-winf{display:block;width:44px}
.gx-r-winf .gx-face{width:100%;height:auto}
.gx-r-wt{font-size:clamp(18px,1.7cqw,22px);line-height:1.3;font-weight:500;max-width:36ch}
@container (min-width:640px){
  .gx-r-stack{grid-column:1/span 5;grid-row:span 3}
  .gx-r-win{grid-column:6/span 7}
}

/* ---------- 08 pages we read ---------- */
/* pages wrap like words, and a page left alone on the last row takes the whole row, so no row has a hole */
.gx-sc-pages .gx-pst{display:flex;flex-wrap:wrap}
.gx-r-pg{flex:1 1 calc(100% / var(--per,5) - 1px);min-width:0;--bg:var(--gx-paper);color:var(--gx-ink)}
.gx-r-pg-no{--bg:transparent!important;color:var(--gx-paper);box-shadow:inset 0 0 0 1px rgba(244,244,240,.24)}
.gx-r-pp{font-weight:600;font-size:clamp(20px,1.9cqw,26px);letter-spacing:-.02em;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* one height for every page's title, so the lines of text below start level across the row */
.gx-r-ptl{font-size:13px;line-height:1.4;height:4.2em;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow-wrap:anywhere}
.gx-r-wc{margin-top:auto!important}
/* lines of text: every line the same number of words, the last as long as the words left over */
@container (min-width:900px){.gx-r-pf li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
/* From 900px the pages sit in one row and share its rows, so every word count and legend lines up */
@supports (grid-template-rows:subgrid){
  @container (min-width:900px){
    .gx-sc-pages .gx-pst{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);grid-template-rows:repeat(5,auto)}
    .gx-r-pg{display:grid!important;grid-column:auto!important;grid-row:span 5;grid-template-rows:subgrid;row-gap:14px}
    .gx-r-pg>.gx-r-wc{align-self:end}
  }
}
/* every page draws its lines at one width (--lw, the narrowest page's), so a page that has a row to itself
   never looks wordier than the rest */
.gx-lines{display:flex;flex-direction:column;gap:4px;min-height:calc(30 * 7px);padding-top:6px;width:100%;max-width:var(--lw,280px)}
.gx-lines i{display:block;width:100%;height:3px;border-radius:2px;background:currentColor;transform-origin:0 50%}
/* on a phone a page is not compared across a row, so its lines take only the room they need */
@container (max-width:559px){.gx-lines{min-height:0}}
.gx-r-wc{font-size:14px}
.gx-r-wc b{font-weight:600;font-size:clamp(28px,2.6cqw,38px);letter-spacing:-.04em;margin-right:4px}
.gx-r-pf{display:flex;flex-direction:column;gap:7px;font-size:13px;line-height:1.3}
.gx-r-pf li{display:flex;align-items:center;gap:9px}
.gx-r-pf .gx-g{--gs:12px}

/* ---------- the fine print ---------- */
.gx-fine{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;margin:clamp(72px,8cqw,120px) 0 0;padding:28px 0 0;border-top:1px solid rgba(244,244,240,.14);font-size:13px;line-height:1.55;color:#8B8B86}
.gx-fine .gx-lab{color:var(--gx-grey);margin-bottom:10px}
.gx-fine ul{display:flex;flex-direction:column;gap:6px}
.gx-fine p+p{margin-top:6px}
@container (min-width:900px){.gx-fine{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}}

/* ---------- type finish ---------- */
.gx-r-pg .gx-r-ptl{opacity:1}
.gx-r-lt,.gx-r-wt,.gx-r-ft,.gx-r-verdict{text-wrap:balance}
.gx-fine li,.gx-r-def,.gx-r-why{text-wrap:pretty}

/* ---------- answering the pointer ---------- */
.gx-gs .gx-g,.gx-mx .gx-g{transition:transform .35s var(--gx-out)}
.gx-tl{transition:opacity .3s ease}
.gx-r-m-titles.gx-tl-focus .gx-tl:not(.hot):not(.gx-tl-x){opacity:.32}
/* the read-out keeps one fixed height, so the list above it never moves under the pointer */
.gx-tl-cap{height:4.2em;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;font-size:12.5px;line-height:1.4;color:var(--gx-neon)}
.gx-tl-b i{transition:filter .3s ease,box-shadow .3s ease}
.gx-tl.hot .gx-tl-b i{box-shadow:0 0 0 2px rgba(61,255,61,.35)}
.gx-tl-n{transition:color .3s ease}
.gx-tl.hot .gx-tl-n{color:var(--gx-neon)}
.gx-tls{cursor:default}
.gx-lb,.gx-bot{transition:transform .35s var(--gx-out)}
@media (hover:hover){.gx-lb:hover{transform:translateY(-3px)}}
/* a fix, pointed at: its rings fill in, one after another, as if it were done */
.gx-gs-r .gx-g-r{transition:background-color .35s ease calc(var(--i,0) * 70ms)}
.gx-r-fix.gx-win .gx-gs-r .gx-g-r{background:var(--g-reach)}
.gx-gs-r .gx-g-rm::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--g-reach);clip-path:inset(0 50% 0 0);opacity:0;transition:opacity .35s ease calc(var(--i,0) * 70ms)}
.gx-r-fix.gx-win .gx-gs-r .gx-g-rm::after{opacity:1}
/* fix all three, pointed at: the points to win back pour in */
.gx-lift i{position:relative;overflow:hidden}
.gx-lift i.up::after{content:"";position:absolute;inset:0;background:var(--gx-ink);transform:scaleY(0);transform-origin:50% 100%;transition:transform .45s var(--gx-out) calc(var(--i,0) * 45ms)}
.gx-r-lift.go .gx-lift i.up::after{transform:none}
/* already working: the worm is driven frame by frame, so it carries no transition of its own */
.gx-dstk .gx-disc{will-change:transform}
/* the worm swims behind the figure and its words */
.gx-r-stack>.gx-dstk{z-index:0!important}
.gx-r-stack>:not(.gx-dstk):not(.gx-fill):not(.gx-cover){z-index:2!important;pointer-events:none}
.gx-face-p{transition:transform .5s var(--gx-out)}
.gx-face-e{transform-box:fill-box;transform-origin:50% 50%;transition:transform .18s ease}
.gx-face.wink .gx-face-e{transform:scaleY(.15)}
.gx-r-pg,.gx-r-fix,.gx-r-lift,.gx-r-hero{cursor:default}
.gx-r-hero .gx-big{transition:transform .9s var(--gx-out)}
/* a check row, pointed at: a soft band behind it and its bar brightening, nothing reset */
.gx-ck summary{position:relative;transition:background-color .3s ease}
@media (hover:hover){.gx-ck summary:hover{background:color-mix(in srgb,currentColor 7%,transparent)}.gx-ck summary:hover .gx-ck-bar i{filter:brightness(1.12)}}
.gx-ck-bar i{transition:filter .3s ease}
@media screen and (prefers-reduced-motion:reduce){
  .gx-r-ast .gx-sh,.gx-face-search .gx-face-p,.gx-r-eyes .gx-eye,.gx-r-eyes .gx-eye i{animation:none!important}
}
/* ---------- on paper ----------
   The same block poster, printed on A4: the colour blocks touching, the numbers huge and tight, the Newsreader
   titles, the glyphs and the studio's shapes, on white paper. The report's head follows the letterhead on the first
   page; after that the scenes run on, so no page is left half empty, while no block, scene head or check row is
   split by a page turn. Every fill is printed exactly, so a browser printing without background graphics prints
   the same page. The site's print sheet sets every element in the results to ink with no background (!important),
   so each colour the report needs is stated again here under #wc-results .gx-rep, which out-specifies it. */
@media print{
  .gx-rep{--pad:5mm;font-size:9pt;line-height:1.4}
  .gx-rep,.gx-rep *{-webkit-print-color-adjust:exact;print-color-adjust:exact;color-adjust:exact;animation:none!important;transition:none!important}
  .gx-rep .gx-cover,.gx-toc,.gx-tl-cap,.gx-scr,.gx-rep .gx-ev summary::after{display:none!important}
  .gx-sc.gx-armed .gx-sc-h{opacity:1!important}
  .gx-rep [style*="transform"]{transform:none!important}
  .gx-rep .gx-t>.gx-fill{visibility:visible!important}
  .gx-rep .gx-eye i{transform:translateX(57.7%)!important}

  /* ---- colour: each tile's text and fill, then the marks, as on screen ---- */
  #wc-results .gx-rep *{color:inherit!important}
  #wc-results .gx-rep{color:var(--gx-ink)!important}
  #wc-results .gx-rep .gx-fill{background-color:var(--bg,transparent)!important}
  #wc-results .gx-rep .gx-t{color:var(--gx-ink)!important}
  /* the dark green tiles, and the page tiles the report gave light text (their colour is in their own style) */
  #wc-results .gx-rep .gx-r-mx,#wc-results .gx-rep .gx-r-m-titles,#wc-results .gx-rep .gx-r-fix,#wc-results .gx-rep .gx-r-part:nth-child(1),
  #wc-results .gx-rep .gx-r-asp[data-m="no"],#wc-results .gx-rep .gx-r-msg-none,#wc-results .gx-rep .gx-r-bots,#wc-results .gx-rep .gx-r-stack,
  #wc-results .gx-rep .gx-r-pg[style*="color:var(--gx-paper)"]{color:var(--gx-paper)!important}
  /* the light tiles, on white paper: a hairline where the page would otherwise swallow their edge */
  .gx-rep :is(.gx-r-m-sd,.gx-r-part:nth-child(3),.gx-r-clar,.gx-r-ver,.gx-r-win:nth-of-type(odd),.gx-r-pg:last-child,.gx-r-hero-none){box-shadow:inset 0 0 0 .6pt rgba(17,17,17,.16)}
  .gx-rep .gx-r-asp[data-m="mid"]+.gx-r-asp[data-m="mid"]{box-shadow:inset 0 0 0 .6pt rgba(17,17,17,.16)}
  #wc-results .gx-rep .gx-r-pg-no{color:var(--gx-ink)!important;box-shadow:inset 0 0 0 .6pt rgba(17,17,17,.3)}
  /* words in the studio green, on the dark green */
  #wc-results .gx-rep .gx-r-fn,#wc-results .gx-rep .gx-r-fix>.gx-lab,#wc-results .gx-rep .gx-r-do .gx-lab,#wc-results .gx-rep .gx-r-pts b,
  #wc-results .gx-rep .gx-mx-foot b,#wc-results .gx-rep .gx-r-stack .gx-big,#wc-results .gx-rep .gx-r-part:nth-child(1) .gx-r-pi,
  #wc-results .gx-rep .gx-tl-x em,#wc-results .gx-rep .gx-r-ast{color:var(--gx-neon)!important}
  #wc-results .gx-rep .gx-r-part:nth-child(1) .gx-r-pq,#wc-results .gx-rep .gx-r-part:nth-child(1) .gx-r-def,#wc-results .gx-rep .gx-r-part:nth-child(1) .gx-r-pc,
  #wc-results .gx-rep .gx-ev summary{color:var(--gx-paper)!important}
  /* quieter words on the dark green */
  #wc-results .gx-rep .gx-mx-foot,#wc-results .gx-rep .gx-r-why,#wc-results .gx-rep .gx-r-pts,#wc-results .gx-rep .gx-ev,
  #wc-results .gx-rep .gx-bots-note,#wc-results .gx-rep .gx-r-bots .gx-key{color:var(--gx-grey)!important}
  /* and on the white page, around the blocks */
  #wc-results .gx-rep .gx-sc-e,#wc-results .gx-rep .gx-rep-m,#wc-results .gx-rep .gx-sc-l,#wc-results .gx-rep .gx-fine{color:var(--gx-dim)!important}
  #wc-results .gx-rep .gx-sc-n,#wc-results .gx-rep .gx-fine .gx-lab{color:var(--gx-ink)!important}
  /* the marks */
  #wc-results .gx-rep .gx-sc-dash{background-color:var(--gx-neon)!important}
  #wc-results .gx-rep .gx-g-f{background-color:var(--g-on)!important}
  #wc-results .gx-rep .gx-eye{background-color:var(--gx-paper)!important}
  #wc-results .gx-rep .gx-eye i{background-color:var(--gx-ink)!important}
  #wc-results .gx-rep .gx-band-bar{background-color:rgba(17,17,17,.14)!important}
  #wc-results .gx-rep .gx-band-bar i,#wc-results .gx-rep .gx-im-s i.on,#wc-results .gx-rep .gx-lift i.on{background-color:var(--gx-ink)!important}
  #wc-results .gx-rep .gx-d.on{color:var(--c)!important}
  #wc-results .gx-rep .gx-d:not(.on){color:rgba(17,17,17,.14)!important}
  #wc-results .gx-rep .gx-tl-b i{background-color:rgba(244,244,240,.3)!important}
  #wc-results .gx-rep .gx-tl.on .gx-tl-b i{background-color:var(--gx-neon)!important}
  #wc-results .gx-rep .gx-lb{color:rgba(17,17,17,.7)!important}
  #wc-results .gx-rep .gx-lb.on{background-color:var(--gx-moss)!important;color:var(--gx-neon)!important}
  #wc-results .gx-rep .gx-lift i{background-color:rgba(17,17,17,.12)!important}
  #wc-results .gx-rep .gx-lift i.up{background-color:transparent!important}
  #wc-results .gx-rep .gx-ck-bar{background-color:color-mix(in srgb,currentColor 15%,transparent)!important}
  #wc-results .gx-rep .gx-ck-bar i{background-color:currentColor!important}
  #wc-results .gx-rep .gx-r-part:nth-child(1) .gx-ck-bar i{background-color:var(--gx-neon)!important}
  #wc-results .gx-rep .gx-ck[data-o="unavailable"] .gx-ck-bar{background-color:transparent!important}
  #wc-results .gx-rep .gx-bot,#wc-results .gx-rep .gx-bot-k{background-color:var(--gx-neon)!important;color:var(--gx-ink)!important}
  #wc-results .gx-rep .gx-bot[data-s="open"]{background-color:transparent!important;color:var(--gx-neon)!important}
  #wc-results .gx-rep .gx-bot[data-s="block"],#wc-results .gx-rep .gx-bot[data-s="unknown"]{background-color:transparent!important;color:rgba(244,244,240,.55)!important}
  #wc-results .gx-rep .gx-bot-k[data-s]{background-color:transparent!important}
  #wc-results .gx-rep .gx-lines i{background-color:currentColor!important}
  #wc-results .gx-rep .gx-disc{background-color:var(--c)!important;color:var(--gx-moss)!important}

  /* ---- the report's head, under the letterhead on the first page ---- */
  .gx-rep-h{gap:1.5mm;padding:0 0 1mm;border-bottom:0;break-inside:avoid;break-after:avoid}
  .gx-rep-h .gx-sc-e{font-size:8.5pt}
  /* as on screen, a long address steps down with its length and breaks only after a dot or a hyphen */
  .gx-rep-t{font-size:max(22pt,min(46pt,calc(150cqw / var(--n,12))));line-height:1.02}
  .gx-rep-m{font-size:9pt}

  /* ---- scenes run on: a head never ends a page, and no block is ever split ---- */
  .gx-sc{margin:9mm 0 0!important;break-before:auto;page-break-before:auto}
  .gx-rep-h+.gx-sc{margin-top:8mm!important}
  .gx-sc-h{grid-template-columns:minmax(0,7fr) minmax(0,5fr)!important;align-items:end;gap:1.2mm 8mm;margin:0 0 4mm;break-inside:avoid;page-break-inside:avoid;break-after:avoid;page-break-after:avoid}
  .gx-sc-h>.gx-sc-e{grid-column:1;grid-row:1;gap:3mm;font-size:8pt}
  .gx-sc-t{grid-column:1;grid-row:2;font-size:26pt;line-height:1.04}
  .gx-sc-l{grid-column:2;grid-row:1/span 2;align-self:end;max-width:none;padding-bottom:.35em;font-size:8pt;line-height:1.45}
  .gx-sc-dash{width:7mm;height:1.6pt}
  .gx-pst>.gx-t{gap:2.2mm;min-height:0!important;break-inside:avoid;page-break-inside:avoid}
  .gx-rep .gx-lab{font-size:7pt;letter-spacing:.14em}
  .gx-big{font-size:38pt}
  .gx-big-l{font-size:46pt}
  .gx-r-def,.gx-r-why,.gx-ai-s,.gx-ev,.gx-r-note{font-size:7.5pt;line-height:1.45}
  .gx-key{font-size:7.5pt;gap:1.5mm 4mm}
  .gx-key .gx-g{--gs:9px}

  /* ---- 01 the score: the green block and the dot field side by side ---- */
  .gx-r-hero{grid-column:1/span 6!important}
  .gx-r-mx{grid-column:7/span 6!important}
  .gx-big-xl{font-size:86pt;letter-spacing:-.035em}
  .gx-r-hero .gx-big{margin-top:2mm}
  .gx-r-eyes{--eye:19px}
  .gx-r-verdict{font-size:15pt;line-height:1.14}
  .gx-r-none{font-size:34pt}
  .gx-eq{gap:1.5mm 2.4mm;padding-top:2mm}
  .gx-eq-t{gap:1.2mm}
  .gx-eq-t b{font-size:16pt}
  .gx-eq-t i{font-size:7pt}
  .gx-eq-op{font-size:11pt;padding-bottom:4.4mm}
  .gx-eq-s b{text-underline-offset:3px;text-decoration-thickness:2px}
  .gx-band-bar{height:9px}
  /* only the band the score is in is named, as on a phone: the narrow bands have no room for their names */
  .gx-band-s i{font-size:7pt}
  .gx-band-s:not(.on) i{visibility:hidden}
  .gx-mx{--dot:14px;--gap:4px;max-width:none;gap:5mm;padding-top:1mm}
  .gx-mx-c{gap:2.4mm}
  .gx-mx-v{font-size:17pt}
  .gx-mx-n{font-size:7pt}
  .gx-mx-foot{font-size:8pt}

  /* ---- 02 at a glance: two rows, as on a wide screen ---- */
  .gx-r-m-checks{grid-column:1/span 8!important}.gx-r-m-pages{grid-column:9/span 4!important}
  .gx-r-m-titles{grid-column:1/span 4!important}.gx-r-m-sd{grid-column:5/span 4!important}.gx-r-m-alt{grid-column:9/span 4!important}
  .gx-r-m-end{grid-column-end:-1!important}
  /* without the checks block, the rest run on three to a row, and a block left over takes its row's width,
     so the pages block never leaves a hole beside it */
  .gx-sc-glance .gx-pst:not(:has(>.gx-r-m-checks)){display:flex;flex-wrap:wrap}
  .gx-sc-glance .gx-pst:not(:has(>.gx-r-m-checks))>.gx-r-m{flex:1 1 calc(100% / 3 - 1px)}
  .gx-r-m .gx-big{margin-top:1mm}
  .gx-r-m .gx-marks{padding-top:1mm;gap:2mm}
  .gx-gs{gap:4px}
  .gx-gs .gx-g{--gs:15px}
  .gx-r-m-pages .gx-d{width:9mm!important}
  .gx-tls{gap:1.4mm}
  .gx-tl,.gx-im{grid-template-columns:minmax(0,5.6em) minmax(0,1fr) 2.6em;gap:2mm;font-size:7.5pt}
  .gx-tl-b{height:9px}
  .gx-tl-x .gx-tl-b{height:10px}
  .gx-tl-x em{font-size:7pt}
  .gx-lbs{gap:1.4mm}
  .gx-lb{padding:1.3mm 2.6mm;font-size:7.5pt}
  .gx-ims{gap:1.4mm}
  .gx-im-s{gap:.5mm}
  .gx-im-s i{width:min(2mm,calc((100% - (var(--n,1) - 1) * .5mm) / var(--n,1)))!important;min-width:0;border-radius:.4mm}

  /* ---- 03 fix these first ---- */
  .gx-r-fix{grid-column:span 4!important}
  .gx-r-fix[data-of="1"]{grid-column:1/-1!important}
  .gx-r-fix[data-of="2"]{grid-column:span 6!important}
  .gx-r-fix[data-of="1"] .gx-r-ft{max-width:40ch}
  .gx-r-fix>.gx-lab{padding-right:12mm}
  .gx-r-ast{width:10mm}
  .gx-r-fn{font-size:34pt}
  .gx-r-ft{font-size:10pt;line-height:1.3}
  .gx-r-do{gap:1mm;padding-top:2.4mm}
  .gx-r-dt{font-size:8.5pt}
  .gx-r-worth{gap:2mm 3mm;padding-top:0}
  .gx-gs-r{gap:4px}
  .gx-gs-r .gx-g{--gs:12px}
  .gx-r-pts{font-size:8pt}
  .gx-r-pts b{font-size:11pt}
  .gx-chip{padding:1mm 2.2mm;font-size:7pt}
  .gx-rep .gx-ev{display:block}
  .gx-rep .gx-ev summary{list-style:none;font-size:7pt}
  .gx-rep .gx-ev p{margin-top:1mm!important}
  .gx-r-lift{grid-column:1/-1!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:end;gap:2.4mm 8mm!important}
  .gx-r-lift>.gx-lab{grid-column:1/-1}.gx-r-lt{grid-column:1;grid-row:2}.gx-lift{grid-column:1;grid-row:3}.gx-r-lnum{grid-column:2;grid-row:2/span 2}
  .gx-rep .gx-r-lnum{margin-bottom:-.08em}
  .gx-r-lt{font-size:11pt}
  .gx-lift{height:10mm;gap:1.5px}
  .gx-r-lnum{font-size:44pt}
  .gx-r-clear-f{width:16mm}
  .gx-r-clear-t{font-size:24pt}
  @supports (grid-template-rows:subgrid){
    .gx-r-fix[data-of="2"],.gx-r-fix[data-of="3"]{display:grid!important;grid-row:span 7;grid-template-rows:subgrid;row-gap:2.4mm}
    .gx-r-fix>.gx-r-worth{align-self:end}
  }

  /* ---- 04 the three parts: the question and its number beside the checks ---- */
  .gx-r-part{grid-template-columns:minmax(0,5fr) minmax(0,7fr)!important;column-gap:7mm;row-gap:3mm}
  .gx-r-pi{gap:2mm}
  .gx-r-pq{font-size:18pt;line-height:1.06}
  .gx-r-pi .gx-big{margin-top:1mm}
  .gx-r-pc{font-size:8pt}
  .gx-cks-h{padding-bottom:1.6mm;font-size:7pt}
  .gx-ck summary{grid-template-columns:12px minmax(0,1fr) minmax(0,34%) 3.6em;gap:3mm;padding:2mm 0;font-size:8.5pt}
  .gx-ck summary .gx-g{--gs:11px}
  .gx-ck-bar{height:9px}
  .gx-ck-p{font-size:8.5pt}

  /* ---- 05 your message ---- */
  .gx-r-asp{grid-column:span 4!important}
  .gx-r-bigface{width:10mm}
  .gx-r-mood{font-size:18pt}
  .gx-r-val{font-size:9pt}
  .gx-q{padding-top:2.4mm!important}
  .gx-q p{font-size:9.5pt}
  .gx-q cite{margin-top:1.2mm;font-size:7.5pt}
  .gx-r-clar{grid-template-columns:minmax(0,4fr) minmax(0,8fr)!important;column-gap:7mm;row-gap:4mm}
  .gx-r-cl{gap:2mm}
  .gx-r-word{font-size:46pt}
  .gx-r-lists{grid-template-columns:repeat(auto-fit,minmax(0,1fr))!important;gap:4mm 5mm}
  .gx-r-list{gap:2mm}
  .gx-r-list ul{gap:3mm}
  .gx-r-list li>p{font-size:8.5pt}
  .gx-r-list .gx-q{margin-top:1.6mm!important;padding-top:1.6mm!important}
  .gx-r-list .gx-q p{font-size:9pt}

  /* ---- 06 search and AI ---- */
  .gx-r-ver{grid-column:1/span 6!important}.gx-r-bots{grid-column:7/span 6!important}
  .gx-sc-ai .gx-pst:not(:has(>.gx-r-bots))>.gx-r-ver,.gx-sc-ai .gx-pst:not(:has(>.gx-r-ver))>.gx-r-bots{grid-column:1/-1!important}
  .gx-ai-i{grid-template-columns:12px minmax(0,1fr);gap:3mm;padding:1.5mm 0}
  .gx-ai-i .gx-g{--gs:11px;margin-top:1px}
  .gx-ai-l{font-size:8.5pt}
  .gx-ai-s{margin-top:.6mm!important}
  .gx-r-bots{gap:4mm!important}
  .gx-r-bots .gx-r-eyes{--eye:17px}
  .gx-r-bots-h{padding-right:16mm}
  .gx-bots-g{gap:2mm}
  .gx-bots-note{font-size:7pt}
  .gx-bots{gap:1.4mm}
  .gx-bot{gap:1.6mm;padding:1.4mm 2.8mm;font-size:8pt}
  .gx-bot::before{width:5px;height:5px}
  .gx-bot[data-s="block"]::before{width:7px;height:1.2px}
  .gx-bot-k{width:8px;height:8px}
  .gx-r-llms{font-size:8.5pt}

  /* ---- 07 already working: the disc stack beside the strengths, as tall as they are ---- */
  .gx-r-stack{grid-column:1/span 5!important;grid-row:span 1}
  .gx-r-stack:only-child{grid-column:1/-1!important}
  .gx-sc-working .gx-pst:has(>.gx-r-win:nth-child(3)) .gx-r-stack{grid-row:span 2}
  .gx-sc-working .gx-pst:has(>.gx-r-win:nth-child(4)) .gx-r-stack{grid-row:span 3}
  .gx-r-win{grid-column:6/span 7!important}
  .gx-dstk{height:40mm;--ds:15mm}
  .gx-r-winf{width:9mm}
  .gx-r-wt{font-size:10.5pt}

  /* ---- 08 pages we read: one row sharing its rows, or rows of three when there are more than five ---- */
  .gx-r-pg{flex:1 1 0!important}
  .gx-r-pp{font-size:11pt}
  .gx-r-ptl{height:auto;min-height:0;font-size:7.5pt;line-height:1.35}
  .gx-lines{min-height:0;gap:2px;max-width:none;padding-top:1mm}
  .gx-lines i{height:2px}
  .gx-r-wc{font-size:8pt}
  .gx-r-wc b{font-size:17pt}
  .gx-r-pf{gap:1.4mm;font-size:7.5pt}
  .gx-r-pf li{gap:1.6mm;align-items:flex-start}
  .gx-r-pf .gx-g{--gs:9px;margin-top:.15em}
  @supports (grid-template-rows:subgrid){
    .gx-sc-pages .gx-pst{display:grid!important;grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);grid-template-rows:repeat(5,auto)}
    .gx-sc-pages .gx-pst:has(>.gx-r-pg:nth-child(6)){grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-auto-flow:row;grid-template-rows:none}
    .gx-r-pg{display:grid!important;grid-column:auto!important;grid-row:span 5;grid-template-rows:subgrid;row-gap:2.4mm}
    .gx-r-pg>.gx-r-wc{align-self:end}
  }

  /* ---- the fine print ----
     Small and tight, so it fits under the last scene more often. When it does not, it takes the last scene's last
     row of blocks (or the whole scene, as a scene's head never ends a page) over with it, rather than printing alone
     on a last page: Chrome honours the avoid before it by stepping back to the break before that row. */
  .gx-fine{grid-template-columns:minmax(0,7fr) minmax(0,5fr)!important;gap:2mm 8mm;margin:6mm 0 0!important;padding:3mm 0 0;border-top:.6pt solid rgba(17,17,17,.2);font-size:7pt;line-height:1.38;break-inside:avoid;page-break-inside:avoid;break-before:avoid;page-break-before:avoid}
  .gx-fine .gx-lab{margin-bottom:1.2mm}
  .gx-fine ul{gap:.6mm}
  .gx-fine p+p{margin-top:.8mm}
}
/* The page's closing note, printed after the report as one more block, in DD green with the studio's mark. The
   site's print sheet (report-css.ts) adds it after the results; with the graphic report it is set at the foot of
   the fine print instead, in the same words, so the two always share a page: Chrome will not step back to break
   before the fine print to keep them together, and would split the note or leave it alone on a last page.
   Keep the words in step with the site's print sheet. */
@media print{
  #wc-results.gx-rep-on::after{display:none!important}
  .gx-rep .gx-fine::after{content:"Want an expert eye on your brand and website? A Brand + Website Clarity Review goes through your message, identity and website by hand, with a prioritised plan and a 30-minute walkthrough.  dd-design.com.au  \00B7  drew@dd-design.com.au";grid-column:1/-1;display:block;margin:1mm 0 0;padding:3mm 17mm 3mm 4mm;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74.45 63.18'%3E%3Cpath fill='%23111' d='M10.21,0H0v63.18h10.21v-.03c17.43,0,31.57-14.14,31.57-31.57S27.64,0,10.21,0Z'/%3E%3Cpath fill='%23111' d='M45.62.11v62.95c16.15-1.4,28.83-14.96,28.83-31.48S61.77,1.51,45.62.11Z'/%3E%3C/svg%3E") right 4mm center/auto 6.5mm no-repeat,var(--gx-neon);color:var(--gx-ink);font:500 7.5pt/1.4 var(--gx-sans);letter-spacing:0;text-transform:none;text-wrap:pretty;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ================= GX: the scan limit ================= */
@media screen{
/* A limit shows the page's panel for a moment before enhance.js has marked it; that moment is held back (up
   to .6s, then it shows whatever happens) so the plain panel never flashes before the poster. */
html:has(#wc-results.gx-on) #wc-hero .wc-hp[data-wc-hp="failed"]:not(.gx-lim-on):not(.gx-lf-on){animation:gxLimHold .01s .6s both}
@keyframes gxLimHold{from{visibility:hidden}to{visibility:visible}}

/* the panel becomes a grid of touching blocks: six columns, the top row taking any spare height */
html body #wc-hero .wc-hp.gx-lim-on,html body #wc-hero .wc-hp.gx-lf-on{
  container:gxlim/inline-size;display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;grid-template-rows:minmax(auto,1fr) auto auto auto auto;
  gap:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
  font-family:var(--gx-sans);-webkit-font-smoothing:antialiased;overflow:hidden
}
html body #wc-hero .wc-hp.gx-lim-on>*,html body #wc-hero .wc-hp.gx-lf-on>*{--p:clamp(18px,4.8cqw,30px);min-width:0;box-sizing:border-box}
html body #wc-hero .wc-hp.gx-lim-on>:not(.gx-lim-x):not(.wc-hp-fail):not(.wc-hp-retry):not(.wc-sr),
html body #wc-hero .wc-hp.gx-lf-on>:not(.gx-lim-x):not(.wc-hp-fail):not(.wc-hp-retry):not(.wc-sr){display:none!important}
/* level with the top of the copy's eyebrow, as the report's card is */
@media (min-width:992px){html body #wc-hero .wc-hp.gx-lim-on,html body #wc-hero .wc-hp.gx-lf-on{margin-top:5px}}

.gx-lim-x{position:relative;display:flex;flex-direction:column;overflow:hidden}
.gx-lim-a{--eye:clamp(16px,4.4cqw,24px);grid-area:1/1/2/5;background:var(--gx-neon);color:var(--gx-ink);padding:var(--p)}
.gx-lim-b{grid-area:1/5/2/7;background:var(--gx-beige);align-items:center;justify-content:center;padding:var(--p) calc(var(--p) * .8)}
.gx-lim-c{grid-area:2/1/3/4;background:var(--gx-sand);color:var(--gx-ink);padding:var(--p);gap:10px}
.gx-lim-d{grid-area:2/4/3/7;background:var(--gx-moss);color:var(--gx-paper);padding:var(--p);gap:14px}
.gx-lim-e{grid-area:3/1/5/7;background:var(--gx-paper)}
html body #wc-hero .wc-hp.gx-lim-on[data-gx-lim="none"]>.gx-lim-c,html body #wc-hero .wc-hp.gx-lim-on[data-gx-lim="none"]>.gx-lim-d{display:none!important}

/* the green: what the wait is, and how long is left */
.gx-lim-k{display:block}
/* the zone under the reset time; only with no retry time */
.gx-lim-s{display:none;margin:14px 0 0;opacity:.72}
html body #wc-hero .wc-hp.gx-lim-on[data-gx-lim="none"] .gx-lim-s{display:block}
.gx-lim-a>.gx-lim-k{max-width:calc(100% - var(--eye) * 4 - 14px);margin-bottom:clamp(22px,5cqw,40px)}
.gx-lim-n{display:flex;align-items:flex-end;flex-wrap:wrap;gap:0 .16em;margin:auto 0 -.1em -.04em;font-weight:600;font-size:clamp(64px,26cqw,128px);line-height:1;letter-spacing:-.035em;font-variant-numeric:lining-nums tabular-nums}
.gx-lim-pr{display:inline-flex;align-items:flex-end;white-space:nowrap}
/* each rolling digit is its own clipped column: letter-spacing would cut its right edge, so the columns overlap instead */
.gx-lim-n .gx-odo-s i{letter-spacing:0}
.gx-lim-u{font-size:.2em;font-weight:600;letter-spacing:0;line-height:1;margin:0 0 .52em .06em}
.gx-lim-w{display:block;max-width:9ch;margin:0 0 .1em;font-family:var(--gx-serif-on);font-variation-settings:"opsz" 60;font-style:italic;font-weight:300;font-size:clamp(40px,13cqw,64px);line-height:1;letter-spacing:-.02em;text-wrap:balance}
.gx-lim-eyes{position:absolute!important;top:var(--p);right:var(--p)}
/* eyes shut: no pupil, no blink, the lid a soft curve; they open when the wait is over and look about */
.gx-lim-eyes .gx-eye i{transition:transform .5s var(--gx-out) .15s}
.gx-lim-eyes .gx-eye::before{content:"";position:absolute;left:.46em;right:.46em;top:.26em;height:.3em;border-bottom:.1em solid var(--gx-ink);border-radius:0 0 1em 1em;transition:opacity .25s ease}
.gx-lim-eyes.gx-shut .gx-eye{animation:none}
.gx-lim-eyes.gx-shut .gx-eye i{transform:translateX(57.7%) scale(0);transition:transform .25s ease}
.gx-lim-eyes:not(.gx-shut) .gx-eye::before{opacity:0}
.gx-lim-eyes:not(.gx-shut) .gx-eye i{animation:gxEyeIdle 8s var(--gx-out) 1s infinite}
.gx-lim-eyes.gx-shut{animation:gxLimDoze 4.8s ease-in-out infinite}
@keyframes gxLimDoze{0%,100%{transform:none}50%{transform:translateY(.06em)}}

/* the beige: a clock at the time it opens again */
.gx-lim-clock{display:block;width:100%;max-width:150px;height:auto;overflow:visible}
.gx-lim-face{fill:var(--gx-moss)}
.gx-lim-tk{fill:var(--gx-beige);opacity:.55}
.gx-lim-hh,.gx-lim-mh{stroke:var(--gx-neon);stroke-linecap:round;transform-box:view-box;transform-origin:50px 50px}
.gx-lim-hh{stroke-width:7}
.gx-lim-mh{stroke-width:4.5}
.gx-lim-pin{fill:var(--gx-neon)}

/* the sand: the time, in the visitor's own clock */
.gx-lim-t{display:flex;align-items:flex-end;margin:auto 0 0 -.03em;font-weight:600;font-size:clamp(40px,11cqw,64px);line-height:1;letter-spacing:-.03em;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.gx-lim-ap{font-size:.3em;letter-spacing:0;margin:0 0 .3em .12em}
.gx-lim-z{opacity:.72}

/* the dark green: a dot per minute left, out of the hour; they go out as it passes */
.gx-lim-d{--g-on:var(--gx-neon);--g-off:rgba(244,244,240,.3)}
.gx-lim-dots{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));gap:clamp(3px,.9cqw,5px);margin-top:auto;max-width:calc(20 * 16px + 19 * 5px)}
/* an hour a dot: two rows of twelve, capped so a wide block does not blow them up */
.gx-lim-dots[data-n="24"]{grid-template-columns:repeat(12,minmax(0,1fr));max-width:calc(12 * 22px + 11 * 5px)}
.gx-lim-dots .gx-g{width:100%;height:auto;aspect-ratio:1;transition:background-color .6s ease,box-shadow .6s ease}

/* the paper: the page's own words and button, in place (their order is the page's, for every reader) */
html body #wc-hero .wc-hp.gx-lim-on>.wc-hp-fail{grid-area:3/1/4/7;z-index:1;display:block!important;margin:0!important;padding:var(--p) var(--p) 0!important;color:var(--gx-ink);text-align:left}
html body #wc-hero .wc-hp.gx-lim-on>.wc-hp-retry{grid-area:4/1/5/7;z-index:1;justify-self:start;align-self:end;margin:clamp(20px,4cqw,26px) var(--p) var(--p)!important}
html body #wc-hero .wc-hp.gx-lim-on .wc-hp-fail-t{margin:0!important;max-width:22ch;font-family:var(--gx-serif)!important;font-style:italic!important;font-weight:200!important;font-size:clamp(26px,6.4cqw,38px)!important;line-height:1.06!important;letter-spacing:-.015em!important;color:var(--gx-ink)!important;text-align:left!important;text-wrap:balance}
html body #wc-hero .wc-hp.gx-lim-on .wc-hp-fail-b{margin:12px 0 0!important;max-width:50ch!important;font-family:var(--gx-sans)!important;font-size:14.5px!important;line-height:1.55!important;color:rgba(17,17,17,.74)!important;text-align:left!important}
html body #wc-hero .wc-hp.gx-lim-on .wc-hp-count{display:flex!important;gap:12px;align-items:flex-start;margin:18px 0 0!important;padding:16px 0 0!important;border:0!important;border-top:1px solid rgba(17,17,17,.16)!important;border-radius:0!important;background:transparent!important;font-family:var(--gx-sans)!important;font-size:15px!important;font-weight:500;line-height:1.45!important;color:var(--gx-ink)!important;text-align:left!important}
html body #wc-hero .wc-hp.gx-lim-on .wc-hp-count::before{content:""!important;flex:none;width:12px!important;height:12px!important;margin:.2em 0 0!important;border-radius:50%!important;background:var(--gx-ink)!important}
/* ready: the line's dot turns DD green, ringed so it holds up on the paper */
html body #wc-hero .wc-hp.gx-lim-on[data-gx-lim="done"] .wc-hp-count::before{background:var(--gx-neon)!important;box-shadow:inset 0 0 0 2px var(--gx-ink)}

/* the button, the report's way: ink on light, DD green on dark */
html body #wc-hero .wc-hp.gx-lim-on>.wc-hp-retry,html body #wc-hero .wc-hp.gx-lf-on>.wc-hp-retry{height:48px!important;min-height:48px!important;padding:0 28px!important;border-radius:999px!important;font-family:var(--gx-sans)!important;font-size:15px!important;font-weight:500!important;transition:background-color .25s ease,color .25s ease,border-color .25s ease}
html body #wc-hero .wc-hp.gx-lim-on>.wc-hp-retry{background:var(--gx-ink)!important;border:1.5px solid var(--gx-ink)!important;color:var(--gx-neon)!important}
html body #wc-hero .wc-hp.gx-lim-on>.wc-hp-retry:hover{background:var(--gx-moss)!important;border-color:var(--gx-moss)!important}
html body #wc-hero .wc-hp.gx-lim-on>.wc-hp-retry:focus-visible{outline:2px solid var(--gx-ink)!important;outline-offset:3px!important}

/* ---------- any other failure: one dark green block ---------- */
.gx-lim-f{grid-area:1/1/5/7;background:var(--gx-moss)}
.gx-lim-fa{grid-area:1/1/2/7;z-index:1;padding:var(--p) var(--p) 0;background:transparent}
.gx-lim-ast{display:block;width:clamp(34px,8cqw,48px);color:var(--gx-neon)}
.gx-lim-ast .gx-sh{animation:gxSpin 30s linear infinite}
html body #wc-hero .wc-hp.gx-lf-on>.wc-hp-fail{grid-area:3/1/4/7;z-index:1;display:block!important;margin:0!important;padding:clamp(24px,7cqw,56px) var(--p) 0!important;text-align:left}
html body #wc-hero .wc-hp.gx-lf-on>.wc-hp-retry{grid-area:4/1/5/7;z-index:1;justify-self:start;align-self:end;margin:clamp(20px,4cqw,26px) var(--p) var(--p)!important;background:var(--gx-neon)!important;border:1.5px solid var(--gx-neon)!important;color:var(--gx-ink)!important}
html body #wc-hero .wc-hp.gx-lf-on>.wc-hp-retry:hover{background:var(--gx-paper)!important;border-color:var(--gx-paper)!important}
html body #wc-hero .wc-hp.gx-lf-on>.wc-hp-retry:focus-visible{outline:2px solid var(--gx-neon)!important;outline-offset:3px!important}
html body #wc-hero .wc-hp.gx-lf-on .wc-hp-fail-t{margin:0!important;max-width:20ch;font-family:var(--gx-serif)!important;font-style:italic!important;font-weight:200!important;font-size:clamp(28px,7cqw,42px)!important;line-height:1.06!important;letter-spacing:-.015em!important;color:var(--gx-paper)!important;text-align:left!important;text-wrap:balance}
html body #wc-hero .wc-hp.gx-lf-on .wc-hp-fail-b{margin:12px 0 0!important;max-width:48ch!important;font-family:var(--gx-sans)!important;font-size:14.5px!important;line-height:1.55!important;color:var(--gx-grey)!important;text-align:left!important}

/* ---------- a phone: the green across the top, then the time beside the clock, the dots, the words ---------- */
@container gxlim (max-width:479px){
  .gx-lim-a{grid-area:1/1/2/7}
  .gx-lim-c{grid-area:2/1/3/5}
  .gx-lim-b{grid-area:2/5/3/7}
  .gx-lim-d{grid-area:3/1/4/7}
  .gx-lim-e{grid-area:4/1/6/7}
  html body #wc-hero .wc-hp.gx-lim-on>.wc-hp-fail{grid-area:4/1/5/7}
  html body #wc-hero .wc-hp.gx-lim-on>.wc-hp-retry{grid-area:5/1/6/7}
  /* with no time given there is no time or dots to sit beside it, and the clock gives the green its width */
  html body #wc-hero .wc-hp.gx-lim-on[data-gx-lim="none"]>.gx-lim-b{display:none!important}
  .gx-lim-n{font-size:clamp(56px,27cqw,110px)}
  .gx-lim-n[data-n="2"]{font-size:clamp(48px,21cqw,90px)}
}
/* wide: the dots run in rows of fifteen, a quarter of the hour each */
@container gxlim (min-width:480px){
  .gx-lim-dots{grid-template-columns:repeat(15,minmax(0,1fr));max-width:calc(15 * 16px + 14 * 5px)}
  .gx-lim-n{font-size:clamp(64px,24cqw,150px)}
  .gx-lim-n[data-n="2"]{font-size:clamp(56px,16.5cqw,112px)}
  .gx-lim-w{font-size:clamp(40px,10cqw,64px)}
  html body #wc-hero .wc-hp.gx-lim-on[data-gx-lim="none"] .gx-lim-n{font-size:clamp(64px,30cqw,190px)}
}
}
@media screen and (prefers-reduced-motion:reduce){
  .gx-lim-eyes,.gx-lim-eyes .gx-eye,.gx-lim-eyes .gx-eye i,.gx-lim-ast .gx-sh{animation:none!important}
  .gx-lim-eyes .gx-eye i,.gx-lim-dots .gx-g{transition:none!important}
}
@media print{.gx-lim-x{display:none!important}}