/* ============ tokens ============ */
:root{
  --wc-g1:#3DFF3D;--wc-g2:#1FC957;--wc-g3:#0D7A3D;--wc-g4:#6E806E;
  --wc-ink0:#F4F4F0;--wc-ink1:#CBDBCB;--wc-ink2:#9AAE9A;--wc-ink3:#6E806E;
  --wc-hair:rgba(61,255,61,.14);--wc-hair2:rgba(244,244,240,.08);
  --wc-surface:#0D140D;
}
/* ===== example report card =====
   Every page-specific rule that shapes the website audit page's example card, copied verbatim
   and in cascade order from that page (they all load before report.css there). The homepage
   loads this file too, so both cards are built from one set of rules. Edit here, not in Webflow. */
.wc-ex-sum:focus-visible{outline: 2px solid var(--wc-g1); outline-offset: 3px;}
[data-wc-preview]{min-width: 0px;}
[data-wc-preview]{color: var(--wc-ink0);}
.wc-ex{border: 1px solid var(--wc-hair); border-radius: 8px; background: var(--wc-surface); margin: 0px; padding: clamp(24px, 2.6vw, 34px);}
.wc-ex-sum{cursor: pointer; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wc-ink2); display: flex; align-items: center; gap: 12px; list-style: none; flex-wrap: wrap; min-height: 28px;}
.wc-ex-sum::-webkit-details-marker{display: none;}
.wc-ex-note{font-size: 11px; color: var(--wc-ink3); margin: 14px 0px 0px; line-height: 1.55;}
.wc-ex-body{display: block;}
[data-wc-preview] .wc-ex{overflow: hidden; background: rgb(11, 17, 11) !important; border: 1px solid rgba(61, 255, 61, 0.16) !important; border-radius: 12px !important; padding: 0px !important;}
[data-wc-preview] .wc-ex .wc-ex-sum{border-bottom: 1px solid rgba(244, 244, 240, 0.07); padding: 16px 22px !important;}
[data-wc-preview] .wc-ex .wc-ex-note{margin: 16px 22px 0px !important;}
.wc-xr{--g1: #3DFF3D; --g2: #1FC957; --g3: #0D7A3D; --i0: #F4F4F0; --i1: #CBDBCB; --i2: #9AAE9A; --i3: #6E806E; --hr: rgba(244,244,240,.08); font-family: "Instrument Sans", system-ui, sans-serif;}
.wc-xr-bar{display: flex; align-items: center; gap: 7px; padding: 12px 22px; border-bottom: 1px solid var(--hr); background: rgb(14, 21, 14);}
.wc-xr-dot{width: 7px; height: 7px; border-radius: 50%; background: rgb(32, 48, 31); flex: 0 0 auto;}
.wc-xr-dot:first-child{background: rgb(42, 58, 41);}
.wc-xr-host{margin-left: 10px; font-size: 11.5px; color: var(--i3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.wc-xr-body{padding: 22px;}
.wc-xr-hero{display: grid; grid-template-columns: auto minmax(0px, 1fr); align-items: center; gap: 20px;}
.wc-xr-gauge{position: relative; width: 104px; height: 104px; flex: 0 0 auto; display: grid; place-items: center;}
.wc-xr-ring{width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible;}
.wc-xr-trk{fill: none; stroke: rgb(21, 33, 21); stroke-width: 7;}
.wc-xr-arc{fill: none; stroke: var(--g1); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 242, 327; stroke-dashoffset: 0;}
.wc-xr-num{position: absolute; inset: 0px; display: flex; align-items: center; justify-content: center; font-family: "Newsreader 60 Pt", Georgia, serif; font-style: italic; font-weight: 200; font-size: 44px; line-height: 1; letter-spacing: -0.03em; color: var(--g1); padding-bottom: 12px;}
.wc-xr-out{position: absolute; left: 0px; right: 0px; bottom: 24px; text-align: center; font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--i3);}
.wc-xr-verdict{margin: 0px; font-family: "Newsreader 60 Pt", Georgia, serif; font-style: italic; font-weight: 200; font-size: 21px; line-height: 1.2; color: var(--i0);}
.wc-xr-cov{margin: 8px 0px 0px; font-size: 11.5px; line-height: 1.5; color: var(--i3);}
.wc-xr-cats{margin-top: 22px; padding-top: 6px; border-top: 1px solid var(--hr);}
.wc-xr-cat{display: grid; grid-template-columns: auto minmax(0px, 1fr) auto; align-items: center; gap: 6px 11px; padding: 13px 0px; border-bottom: 1px solid var(--hr);}
.wc-xr-cat:last-child{border-bottom: 0px;}
.wc-xr-i{width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: var(--g1); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; align-self: center;}
.wc-xr-cn{font-size: 13px; font-weight: 600; color: var(--i0); min-width: 0px;}
.wc-xr-cs{font-family: "Newsreader 60 Pt", Georgia, serif; font-style: italic; font-weight: 200; font-size: 26px; line-height: 1; letter-spacing: -0.03em; color: var(--g1); white-space: nowrap;}
.wc-xr-seg{grid-column: 1 / -1; display: block; height: 5px; border-radius: 3px; background: rgb(21, 33, 21); overflow: hidden;}
.wc-xr-p85{width: 85%;}
.wc-xr-p65{width: 65%; background: var(--g2) !important;}
.wc-xr-p70{width: 70%; background: var(--g3) !important;}
.wc-xr-fix{display: grid; grid-template-columns: auto minmax(0px, 1fr); gap: 12px; margin-top: 20px; padding: 18px; border: 1px solid rgba(61, 255, 61, 0.16); border-radius: 10px; background: rgb(14, 21, 14);}
.wc-xr-ia{stroke: var(--g2);}
.wc-xr-ft{margin: 0px; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--i0);}
.wc-xr-fb{margin: 7px 0px 0px; font-size: 12px; line-height: 1.55; color: var(--i2);}
.wc-xr-fn{margin: 10px 0px 0px; padding-top: 10px; border-top: 1px solid var(--hr); font-size: 12px; line-height: 1.55; color: var(--i1);}
.wc-xr-foot{margin: 18px 0px 0px; font-size: 11px; line-height: 1.55; color: var(--i3);}
@media (max-width: 520px){.wc-xr-hero{grid-template-columns: minmax(0px, 1fr); justify-items: center; text-align: center;}}
.wc-xr-cn,.wc-xr-ft{font-weight: 400;}
.wc-xr-cs{letter-spacing: -0.055em;}
.wc-xr-den-s{letter-spacing: 0px;}
[data-wc-preview] .wc-ex-note{display: none;}
[data-wc-preview] .wc-xr-bar{display: none;}
[data-wc-preview] .wc-ex-sum{display: flex; align-items: baseline; gap: 14px; padding: 15px 22px; background: rgb(14, 21, 14);}
[data-wc-preview] .wc-ex-sum span{font-size: 14px; letter-spacing: 0px; text-transform: none; color: rgb(203, 219, 203); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0px;}
[data-wc-preview] .wc-ex-body{padding-top: 0px;}
.wc-xr-body{padding: 20px 22px 22px;}
.wc-xr-gauge{width: 116px; height: 116px;}
.wc-xr-ring{width: 116px; height: 116px;}
.wc-xr-num{font-size: 34px; letter-spacing: -0.04em; padding-bottom: 15px;}
.wc-xr-out{bottom: 30px; font-size: 7.5px; letter-spacing: 0.14em;}
.wc-xr-cats{margin-top: 16px;}
.wc-xr-cat{padding: 12px 0px;}
.wc-xr-fix{margin-top: 16px; padding: 16px;}
.wc-xr-foot{margin-top: 14px;}
@media (prefers-reduced-motion: reduce){.wc-xr-seg span{transition: none !important; transform: none !important;}}
[data-wc-preview][hidden]{display:none!important}
.wc-ic{flex:none;width:22px;height:22px;display:block}
.wc-ic path,.wc-ic line,.wc-ic circle,.wc-ic polyline,.wc-ic rect,.wc-ic polygon{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.wc-ic-s{width:16px;height:16px}
.wc-ic-s path,.wc-ic-s line,.wc-ic-s circle,.wc-ic-s polyline{stroke-width:1.75}
.wc-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Webflow ships flex:0 1 100% on form children; in a column flex container that makes every
   auto-height child claim the container height and shrink to an arbitrary slice. Pin them to content. */
#wc-form>*{flex:0 0 auto}
/* Turnstile is interaction-only. Until it has rendered we reserve no space for it. */
.wc-turnstile:empty,.wc-turnstile[data-collapsed]{display:none!important}

/* ============ hero result panel ============ */
.wc-hero-right{min-width:0;display:flex;flex-direction:column}
.wc-hp{border:1px solid var(--wc-hair);border-radius:8px;background:var(--wc-surface);padding:clamp(24px,2.6vw,34px);display:flex;flex-direction:column}
.wc-hp[hidden]{display:none!important}
.wc-hp-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 clamp(18px,2vw,26px);min-height:24px}
.wc-hp-label{display:inline-flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--wc-ink2)}
.wc-hp-label .wc-ic{color:var(--wc-g2)}
.wc-hp-host{font-size:12.5px;color:var(--wc-ink2);overflow-wrap:anywhere;min-width:0;text-align:right}

/* score gauge: one grid cell, ring and number stacked, both centred by the grid */
.wc-gauge{display:grid;place-items:center;width:min(210px,58%);aspect-ratio:1;margin:0 auto clamp(18px,2vw,24px)}
.wc-gauge>*{grid-area:1/1}
.wc-ring{display:block;width:100%;height:100%;transform:rotate(-90deg)}
.wc-ring-track{fill:none;stroke:rgba(61,255,61,.13);stroke-width:1.5}
.wc-ring-arc{fill:none;stroke:var(--wc-g1);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:339.292;stroke-dashoffset:339.292;transform-origin:60px 60px}
.wc-gauge-num{display:grid;place-items:center;text-align:center;line-height:1}
.wc-hp-num{font-family:"Newsreader 60 Pt",Georgia,serif;font-style:normal;font-weight:400;font-size:clamp(54px,6vw,76px);line-height:1;color:var(--wc-g1);font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1;letter-spacing:0;display:block}
.wc-hp-outof{display:block;margin-top:6px;font-family:"Instrument Sans",system-ui,sans-serif;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--wc-ink3)}
.wc-hp-stage{font-family:"Instrument Sans",system-ui,sans-serif;font-size:13px;color:var(--wc-ink1);text-align:center;max-width:11ch;line-height:1.35}
.wc-hp-verdict{margin:0;font-size:16px;line-height:1.5;color:var(--wc-ink0);text-wrap:pretty}
.wc-hp-cov{margin:10px 0 0;font-size:12.5px;line-height:1.55;color:var(--wc-ink2)}
.wc-hp-cta{margin:clamp(18px,2vw,24px) 0 0;align-self:flex-start}
.wc-hp-fail-t{margin:0 0 8px;font-size:17px;font-weight:500;color:var(--wc-ink0)}
.wc-hp-fail-b{margin:0 0 20px;font-size:14px;line-height:1.6;color:var(--wc-ink1)}
.wc-hp .wc-stages{margin:clamp(18px,2vw,24px) 0 0;padding:18px 0 0;border-top:1px solid var(--wc-hair);display:flex;flex-direction:column;gap:10px;list-style:none}
.wc-hp .wc-stage{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--wc-ink3);transition:color .3s ease}
.wc-hp .wc-stage[data-done]{color:var(--wc-ink2)}
.wc-hp .wc-stage[data-active]{color:var(--wc-ink0)}
.wc-stage-dot{width:6px;height:6px;border-radius:50%;background:#1E3A1E;flex:none;transition:background-color .3s ease}
.wc-stage[data-done] .wc-stage-dot{background:var(--wc-g3)}
.wc-stage[data-active] .wc-stage-dot{background:var(--wc-g1)}
/* per-state visibility */
.wc-hp .wc-stages,.wc-hp-fail,.wc-hp-retry,.wc-hp-cta,.wc-hp-stage{display:none}
.wc-hp[data-wc-hp="scanning"] .wc-stages{display:flex}
.wc-hp[data-wc-hp="scanning"] .wc-hp-stage{display:block}
.wc-hp[data-wc-hp="scanning"] .wc-gauge-num,.wc-hp[data-wc-hp="scanning"] .wc-hp-verdict,.wc-hp[data-wc-hp="scanning"] .wc-hp-cov{display:none}
/* Scanning spinner. Three things fight for this ring, so these rules are deliberate:
   1. The page head still carries an older spinner that rotates the SVG at 1.5s while this file
      rotated the arc at 1.25s. Two spins at different periods read as a wobble, and the SVG's
      base rotate(-90deg) is dropped while its animation runs, so the ring jumped on completion.
      The SVG is held still here and only the arc moves.
   2. The controller writes stroke-dasharray/stroke-dashoffset inline for the score arc. Inline
      beats a normal declaration, which is why "58 282" never applied and the spinner was really
      the finished score arc going round. Keyframes outrank inline, so the dash length is
      animated rather than declared.
   3. After a completed scan a finished Web Animations handle holds stroke-dashoffset with
      fill:both, and that outranks keyframes too. Only !important beats it, so the offset is
      pinned and every bit of motion comes from the dash length and the rotation. */
.wc-hp[data-wc-hp="scanning"] .wc-ring{animation:none!important}
.wc-hp[data-wc-hp="scanning"] .wc-ring-arc{stroke-dashoffset:0!important;animation:wcSpin 1.8s linear infinite,wcArc 1.35s ease-in-out infinite}
.wc-hp[data-wc-hp="complete"] .wc-hp-cta{display:inline-flex}
.wc-hp[data-wc-hp="partial"] .wc-hp-num{color:var(--wc-ink0);font-size:clamp(40px,4vw,52px)}
.wc-hp[data-wc-hp="partial"] .wc-hp-outof{visibility:hidden}
.wc-hp[data-wc-hp="failed"] .wc-gauge,.wc-hp[data-wc-hp="failed"] .wc-hp-verdict,.wc-hp[data-wc-hp="failed"] .wc-hp-cov,.wc-hp[data-wc-hp="failed"] .wc-hp-top{display:none}
.wc-hp[data-wc-hp="failed"] .wc-hp-fail{display:block}
.wc-hp[data-wc-hp="failed"] .wc-hp-retry{display:inline-flex}
@keyframes wcSpin{to{transform:rotate(360deg)}}
@keyframes wcArc{0%,100%{stroke-dasharray:14 325}50%{stroke-dasharray:170 169}}
@media(prefers-reduced-motion:reduce){.wc-hp[data-wc-hp="scanning"] .wc-ring-arc{animation:none!important;stroke-dasharray:90 249!important}}

/* ============ detailed report shell ============ */
#wc-results{display:none}
#wc-results[data-wc-state="complete"],#wc-results[data-wc-state="partial"]{display:grid}
#wc-results[hidden]{display:none!important}
[data-wc-panel]:not([hidden]){display:block!important;background:transparent!important;border:0!important;border-radius:0!important;padding:0!important;overflow:visible!important}
[data-wc-panel]>*{grid-column:1/-1!important;border:0!important;padding:0!important;margin:0!important;min-width:0}
.wc-sec{padding:clamp(38px,4.4vw,64px) 0!important;border-top:1px solid var(--wc-hair2)!important}
.wc-sec-h{display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--wc-ink2);margin:0 0 8px!important}
.wc-sec-h .wc-ic{color:var(--wc-g2)}
.wc-sec-sub{margin:0 0 clamp(24px,2.6vw,34px);font-size:13.5px;line-height:1.6;color:var(--wc-ink3);max-width:70ch}

/* ============ keep-this-report + print-and-reset: one shared row ============ */
/* These two are the report's closing actions and belong side by side. They are already adjacent
   siblings, so the panel becomes a two-column grid rather than gaining a wrapper element: every
   other section spans both columns and only these two take one each. No column-gap, so the
   section hairline runs unbroken across the top and the vertical rule does the separating. */
/* The page head already lays the panel out as a 12-column grid, and its #wc-results [data-wc-panel]
   selector outranks anything unprefixed here, so these two just claim six columns each rather than
   redefining the template. display is forced because this file previously flattened the panel to
   block, which killed that grid. */
[data-wc-panel]:not([hidden]){display:grid!important}
.wc-gate.wc-sec{grid-column:1/span 6!important;padding-right:clamp(28px,3.4vw,56px)!important}
.wc-actions-sec{grid-column:7/-1!important;border-left:1px solid var(--wc-hair2)!important;padding-left:clamp(28px,3.4vw,56px)!important}
/* An example report has no email gate — there is nothing real to send — and the gate is hidden
   with [hidden], so it generates no grid item. Without this the actions would sit in column two
   beside a blank column one. */
[data-wc-panel]:has(.wc-gate[hidden]) .wc-actions-sec{grid-column:1/-1!important;border-left:0!important;padding-left:0!important}
/* The head stretches these buttons and sets width:100% on them, which was right when the section
   ran the full canvas width but makes them 500px slabs in a half-width column. They are discrete
   actions, so they size to their own label. The head already has a [data-wc-row] variant that does
   exactly this, but nothing sets that attribute, so it is done here instead. */
.wc-actions-sec .wc-actions{align-items:flex-start!important}
.wc-actions-sec .wc-actions>*{width:auto!important}

/* Consent checkbox. Webflow ships a block label with padding-left:20px and floats the input into
   that gutter, but the float has margin:0 here, so the box sat indented 20px from the left edge
   every other field starts at, and the label text wrapped around the float instead of sitting
   beside it. A flex row puts the box flush with the fields above and keeps the text alongside it
   when it wraps; flex-start pins it to the first line rather than the centre of a wrapped block. */
.wc-gate .w-checkbox{display:flex;align-items:flex-start;gap:12px;padding-left:0!important;margin:0!important}
.wc-gate .w-checkbox-input{float:none!important;margin:0!important;flex:0 0 auto}
/* Webflow's clearfix pseudo-elements exist only to contain that float. In a flex row they become
   flex items, so ::before took the first slot and the gap pushed the real box 12px off the edge. */
.wc-gate .w-checkbox::before,.wc-gate .w-checkbox::after{display:none!important}
.wc-gate .w-checkbox .w-form-label{margin:0}
.wc-gate .wc-lead{margin-bottom:18px!important}

/* ============ links to the privacy policy ============ */
/* Where personal details are collected, the policy is one click away. The Webflow builder could not
   attach a class to these two links, so they are found by where they point. */
.wc-gate a[href$="/privacy"]{display:block;margin:6px 0 0;padding:0;width:fit-content;font-size:13px;line-height:1.5;color:var(--wc-ink2);text-decoration:none;border-bottom:1px solid var(--wc-g2);transition:color .18s ease,border-color .18s ease}
.wc-gate a[href$="/privacy"]:hover,.wc-gate a[href$="/privacy"]:focus-visible{color:var(--wc-ink0);border-bottom-color:var(--wc-g1)}
.wc-gate:has([data-wc-gate-submit][aria-disabled="true"]) a[href$="/privacy"]{display:none!important}
.wc-q-a a[href$="/privacy"]{display:block;margin-top:12px;width:fit-content;color:inherit;text-decoration:none;border-bottom:1px solid #3DFF3D}
.wc-q-a a[href$="/privacy"]:hover{border-bottom-color:currentColor}

/* ============ gate confirmation ============ */
/* Submitting already set a message, but as a small grey note under the button it read as nothing
   having happened. The only success signal available to CSS is the aria-disabled the page sets on
   the submit button, so that drives a real confirmation: the fields collapse and the message
   becomes the whole panel. An error leaves aria-disabled off, so the form stays put and the same
   panel shows the error instead. Reset clears both, and the form returns. */
.wc-gate [data-wc-gate-status]:not(:empty){margin-top:20px!important;padding:18px 20px;border:1px solid var(--wc-hair2);border-left:3px solid var(--wc-g2);background:rgba(244,244,240,.03);font-size:14px;line-height:1.6;color:var(--wc-ink1)}
.wc-gate [data-wc-gate-submit][aria-disabled="true"]~[data-wc-gate-status]:not(:empty){border-left-color:var(--wc-g1)}
.wc-gate [data-wc-gate-submit][aria-disabled="true"]~[data-wc-gate-status]:not(:empty)::before{content:"Thank you.";display:block;margin:0 0 6px;font-family:"Newsreader 60 Pt",Georgia,serif;font-style:italic;font-size:20px;color:var(--wc-ink0)}
.wc-gate:has([data-wc-gate-submit][aria-disabled="true"]) .wc-label,
.wc-gate:has([data-wc-gate-submit][aria-disabled="true"]) .wc-gate-input,
.wc-gate:has([data-wc-gate-submit][aria-disabled="true"]) textarea,
.wc-gate:has([data-wc-gate-submit][aria-disabled="true"]) .wc-check-row2,
.wc-gate:has([data-wc-gate-submit][aria-disabled="true"]) .wc-btn{display:none!important}

/* ============ hero heading optical alignment ============ */
/* The head guards italic swashes from clipping with padding:0 .16em plus a matching negative
   margin, so the net offset is zero. But #wc-hero .wc-h1{margin:0} wipes the compensating margin
   and leaves the padding, so the headline sat .16em right of the eyebrow and body copy. Restoring
   the horizontal halves is idempotent: where the guard still applies this sets the same value. */
.wc-h1,.wc-h2,.wc-h3{margin-left:-.16em!important;margin-right:-.16em!important}

/* ============ closing row: no top rule ============ */
/* The vertical divider already separates the two columns, and the section padding holds it apart
   from the evidence section above, so the hairline just cut across the top of the pair. */
.wc-gate.wc-sec,.wc-actions-sec{border-top:0!important}

/* ============ secondary fields: underline, matching the site's #contact ============ */
/* The site's own form (.dd-input) is a transparent field on a hairline rule, not a pill. The
   scanner's secondary fields now match it so the page stops reading as a stack of rounded boxes.
   The hero URL field is deliberately NOT included: it is the page's primary call to action and
   should still look like a button-sized target next to the green button. */
.wc-gate-input,.wc-ctx-input,.wc-gate textarea,.wc-ctx textarea{
  background:transparent!important;border:0!important;border-bottom:1px solid rgba(244,244,240,.35)!important;
  border-radius:0!important;padding:6px 0 10px!important;height:auto!important;max-width:none!important;
  font-size:16px!important;color:var(--wc-ink0)!important;transition:border-color .18s ease}
.wc-gate-input:hover,.wc-ctx-input:hover{border-bottom-color:rgba(244,244,240,.6)!important}
/* Green underline on focus, as in the mockup. The existing focus ring is left alone so keyboard
   users still get the outline that was verified against the rest of the page. */
.wc-gate-input:focus,.wc-ctx-input:focus{border-bottom-color:var(--wc-g1)!important}
/* Sentence-case labels at the site's size, rather than the small uppercase eyebrow style. */
.wc-ctx-label,.wc-gate .wc-label{text-transform:none!important;letter-spacing:normal!important;font-size:13px!important;color:var(--wc-ink1)!important;font-weight:400!important;margin:0 0 8px!important}
/* Flattening the label margin above also removed the space between one field and the next
   label, leaving 4px. Put it back only where a label follows a field, so the first label
   still sits tight under the section intro. */
.wc-gate .wc-gate-input+.wc-label,.wc-gate textarea+.wc-label{margin-top:22px!important}

/* ============ optional context fields ============ */
/* One column. Three of these sit inside the hero's ~440px column, which left each about 139px —
   narrow enough to clip the example text mid-word ("e.g. Custom joinery for renov..."). Stacked
   underline fields also read like the site's own contact form, and it sidesteps the alignment
   problem three columns had, where one wrapped label pushed only its own input down. */
.wc-ctx-grid{grid-template-columns:minmax(0,1fr)!important;row-gap:18px!important}
@media(max-width:859px){
.wc-gate.wc-sec{grid-column:1/-1!important;padding-right:0!important}
.wc-actions-sec{grid-column:1/-1!important;border-left:0!important;padding-left:0!important}
}

/* Supplied page-and-reset mark. It is a filled glyph, while the icon set is stroked, so it is
   painted as a mask over currentColor instead of being restyled: it then inherits the same
   green as every other section heading and stays correct if that token changes. !important is
   required because the page head already masks this exact element with the old 24x24 mark, at a
   specificity an unprefixed selector here cannot reach. */
.wc-actions-sec .wc-sec-h .wc-ic>*{display:none}
.wc-actions-sec .wc-sec-h .wc-ic{background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23.31 28.82'%3E%3Cpath fill='black' d='M22.29,6.95L16.18.97c-.64-.62-1.48-.97-2.37-.97H3.4C1.52,0,0,1.52,0,3.4v22.03c0,1.87,1.52,3.4,3.4,3.4h16.52c1.87,0,3.4-1.52,3.4-3.4V9.37c0-.91-.37-1.79-1.02-2.43ZM21.39,7.86c.12.12.22.25.31.4h-4.54c-1.16,0-2.11-.95-2.11-2.11V1.7c.08.06.16.11.23.18l6.11,5.98ZM19.92,27.53H3.4c-1.16,0-2.11-.95-2.11-2.11V3.4c0-1.16.95-2.11,2.11-2.11h10.37v4.86c0,1.87,1.52,3.4,3.4,3.4h4.86v15.88c0,1.16-.95,2.11-2.11,2.11Z'/%3E%3Cpath fill='black' d='M16.54,15.54c-.19-.07-.37-.06-.54.02-.16.08-.28.2-.35.37-.07.16-.09.33-.04.51.22.72.24,1.45.06,2.19-.18.74-.54,1.38-1.1,1.93-.81.81-1.78,1.22-2.92,1.22s-2.11-.41-2.92-1.22c-.81-.81-1.22-1.78-1.22-2.92s.41-2.11,1.22-2.92c.53-.53,1.15-.89,1.86-1.08.71-.19,1.42-.19,2.14,0l-1.56,1.56c-.14.14-.21.3-.21.49,0,.19.07.35.21.49s.3.21.49.21c.19,0,.35-.07.49-.21l2.43-2.43c.14-.14.21-.3.21-.49s-.07-.35-.21-.49l-2.43-2.43c-.14-.14-.3-.21-.49-.21-.19,0-.35.07-.49.21-.14.14-.21.3-.21.49,0,.19.07.35.21.49l.85.85c-.8-.07-1.56.04-2.31.32-.74.28-1.39.7-1.95,1.26-1.09,1.09-1.63,2.39-1.63,3.89s.54,2.81,1.63,3.89c1.09,1.09,2.39,1.63,3.89,1.63s2.81-.54,3.89-1.63c.75-.75,1.25-1.63,1.47-2.64s.18-2-.13-2.98c-.05-.18-.17-.3-.35-.38Z'/%3E%3C/svg%3E") no-repeat center/contain!important;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23.31 28.82'%3E%3Cpath fill='black' d='M22.29,6.95L16.18.97c-.64-.62-1.48-.97-2.37-.97H3.4C1.52,0,0,1.52,0,3.4v22.03c0,1.87,1.52,3.4,3.4,3.4h16.52c1.87,0,3.4-1.52,3.4-3.4V9.37c0-.91-.37-1.79-1.02-2.43ZM21.39,7.86c.12.12.22.25.31.4h-4.54c-1.16,0-2.11-.95-2.11-2.11V1.7c.08.06.16.11.23.18l6.11,5.98ZM19.92,27.53H3.4c-1.16,0-2.11-.95-2.11-2.11V3.4c0-1.16.95-2.11,2.11-2.11h10.37v4.86c0,1.87,1.52,3.4,3.4,3.4h4.86v15.88c0,1.16-.95,2.11-2.11,2.11Z'/%3E%3Cpath fill='black' d='M16.54,15.54c-.19-.07-.37-.06-.54.02-.16.08-.28.2-.35.37-.07.16-.09.33-.04.51.22.72.24,1.45.06,2.19-.18.74-.54,1.38-1.1,1.93-.81.81-1.78,1.22-2.92,1.22s-2.11-.41-2.92-1.22c-.81-.81-1.22-1.78-1.22-2.92s.41-2.11,1.22-2.92c.53-.53,1.15-.89,1.86-1.08.71-.19,1.42-.19,2.14,0l-1.56,1.56c-.14.14-.21.3-.21.49,0,.19.07.35.21.49s.3.21.49.21c.19,0,.35-.07.49-.21l2.43-2.43c.14-.14.21-.3.21-.49s-.07-.35-.21-.49l-2.43-2.43c-.14-.14-.3-.21-.49-.21-.19,0-.35.07-.49.21-.14.14-.21.3-.21.49,0,.19.07.35.21.49l.85.85c-.8-.07-1.56.04-2.31.32-.74.28-1.39.7-1.95,1.26-1.09,1.09-1.63,2.39-1.63,3.89s.54,2.81,1.63,3.89c1.09,1.09,2.39,1.63,3.89,1.63s2.81-.54,3.89-1.63c.75-.75,1.25-1.63,1.47-2.64s.18-2-.13-2.98c-.05-.18-.17-.3-.35-.38Z'/%3E%3C/svg%3E") no-repeat center/contain!important}

/* ============ key numbers: ledger, not cards ============ */
/* Four statistics read as one band across the canvas. The numeral sits above its label rather than
   beside it: beside it, a value like "16/20" at display size leaves the label a hyphenating sliver. */
.wc-kf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(20px,2.4vw,34px)}
.wc-kf-item{min-width:0;padding:clamp(20px,2vw,26px) 0 0;border-top:1px solid var(--wc-hair2);display:grid;grid-template-columns:minmax(0,1fr);row-gap:clamp(10px,1vw,14px);align-items:start}
.wc-kf-num{font-family:"Newsreader 60 Pt",Georgia,serif;font-style:normal;font-weight:400;font-size:clamp(46px,4.4vw,66px);line-height:.92;color:var(--wc-ink0);font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1;display:flex;align-items:baseline;white-space:nowrap}
.wc-kf-den{font-size:.36em;color:var(--wc-ink3);margin-left:.06em}
.wc-kf-body{min-width:0;padding-top:0}
.wc-kf-lab{margin:0;font-family:"Instrument Sans",system-ui,sans-serif;font-size:13px;font-weight:500;color:var(--wc-ink0);letter-spacing:.01em}
.wc-kf-pct{margin:6px 0 0;font-size:12px;color:var(--wc-ink2);font-variant-numeric:tabular-nums}
.wc-kf-rail{margin:10px 0 0;height:2px;background:rgba(244,244,240,.1);border-radius:2px;overflow:hidden;max-width:180px}
.wc-kf-rail>i{display:block;height:100%;transform-origin:left center;border-radius:2px}
.wc-kf-item:nth-child(4n+1) .wc-kf-rail>i{background:var(--wc-g1)}
.wc-kf-item:nth-child(4n+2) .wc-kf-rail>i{background:var(--wc-g2)}
.wc-kf-item:nth-child(4n+3) .wc-kf-rail>i{background:var(--wc-g3)}
.wc-kf-item:nth-child(4n+4) .wc-kf-rail>i{background:var(--wc-g4)}
.wc-kf-scope{margin:10px 0 0;font-size:11.5px;line-height:1.5;color:var(--wc-ink3)}
.wc-kf-note{margin:5px 0 0;font-size:11.5px;line-height:1.5;color:var(--wc-ink2)}
.wc-kf-def{margin:8px 0 0}
.wc-kf-def>summary{list-style:none;cursor:pointer;font-size:11.5px;color:var(--wc-ink3);display:inline-flex;align-items:center;gap:6px;min-height:32px}
.wc-kf-def>summary::-webkit-details-marker{display:none}
.wc-kf-def>summary::before{content:"+";color:var(--wc-g2);font-size:13px}
.wc-kf-def[open]>summary::before{content:"\2013"}
.wc-kf-def>summary:hover{color:var(--wc-ink1)}
.wc-kf-def>p{margin:2px 0 0;font-size:11.5px;line-height:1.6;color:var(--wc-ink2);max-width:52ch}
/* Four across needs the full canvas. Below it, two across keeps the numerals large rather than
   letting four columns squeeze them; one across only once two would be too narrow to read. */
@media(max-width:1023px){.wc-kf{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,3vw,44px)}.wc-kf-num{font-size:clamp(52px,6vw,74px)}}
@media(max-width:539px){.wc-kf{grid-template-columns:minmax(0,1fr)}.wc-kf-num{font-size:clamp(54px,14vw,68px)}}

/* ============ categories ============ */
.wc-cats{display:flex;flex-direction:column}
.wc-cat{padding:clamp(24px,2.6vw,34px) 0;border-top:1px solid var(--wc-hair2)}
.wc-cat:first-child{border-top:0;padding-top:0}
.wc-cat:last-child{padding-bottom:0}
.wc-cat-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 24px;align-items:start}
.wc-cat-name{margin:0;display:flex;align-items:center;gap:11px;font-family:"Instrument Sans",system-ui,sans-serif;font-size:16.5px;font-weight:500;color:var(--wc-ink0);min-width:0}
.wc-cat-name .wc-ic{color:var(--wc-g2)}
.wc-cat-score{text-align:right;white-space:nowrap;line-height:1}
.wc-cat-score b{font-family:"Newsreader 60 Pt",Georgia,serif;font-style:normal;font-weight:400;font-size:clamp(30px,3.2vw,40px);color:var(--wc-ink0);font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1}
.wc-cat-score span{color:var(--wc-ink3);font-size:.5em}
.wc-cat-score i{display:block;margin-top:6px;font-style:normal;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--wc-ink3)}
.wc-cat-def{margin:12px 0 0;font-size:13.5px;line-height:1.65;color:var(--wc-ink1);max-width:66ch}
.wc-segs{display:flex;gap:2px;margin:18px 0 0;height:6px;border-radius:3px;overflow:hidden;background:rgba(244,244,240,.07)}
.wc-segs>i{display:block;height:100%;transform-origin:left center}
.wc-segs>i[data-k="pass"]{background:var(--wc-g2)}
.wc-segs>i[data-k="att"]{background:var(--wc-g1)}
.wc-segs>i[data-k="un"]{background:var(--wc-g4)}
.wc-cat-counts{margin:12px 0 0;display:flex;flex-wrap:wrap;gap:6px 20px;font-size:12px;color:var(--wc-ink2);font-variant-numeric:tabular-nums}
.wc-cat-counts span{display:inline-flex;align-items:center;gap:7px}
.wc-cat-counts .wc-key{width:8px;height:8px;border-radius:2px;flex:none}
.wc-cat-counts .p .wc-key{background:var(--wc-g2)}
.wc-cat-counts .a .wc-key{background:var(--wc-g1)}
.wc-cat-counts .u .wc-key{background:var(--wc-g4)}
.wc-cat-top{margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--wc-hair2);font-size:13px;line-height:1.6;color:var(--wc-ink1);max-width:66ch}
.wc-cat-top b{display:block;font-weight:400;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--wc-ink3);margin-bottom:5px}
@media(max-width:560px){.wc-cat-head{grid-template-columns:minmax(0,1fr)}.wc-cat-score{text-align:left}}

/* ============ checks (inside folds) ============ */
.wc-checks{display:flex;flex-direction:column;gap:20px;padding:4px 0 0}
.wc-check{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start}
.wc-check>.wc-ic{margin-top:2px;color:var(--wc-ink3)}
.wc-check[data-o="pass"]>.wc-ic{color:var(--wc-g2)}
.wc-check[data-o="partial"]>.wc-ic,.wc-check[data-o="fail"]>.wc-ic{color:var(--wc-g1)}
.wc-check-b{min-width:0}
.wc-check-t{margin:0;font-size:14px;color:var(--wc-ink0);display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
.wc-check-o{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--wc-ink2)}
.wc-check-w{font-size:10.5px;color:var(--wc-ink3);font-variant-numeric:tabular-nums}
.wc-check-d{margin:5px 0 0;font-size:12.5px;line-height:1.6;color:var(--wc-ink1);max-width:66ch}
.wc-check-ev{margin:9px 0 0;padding:0 0 0 12px;border-left:1px solid var(--wc-hair);list-style:none;display:flex;flex-direction:column;gap:3px}
.wc-check-ev li{font-size:11.5px;line-height:1.55;color:var(--wc-ink2);overflow-wrap:anywhere}
.wc-check-ev b{color:var(--wc-ink3);font-weight:400}
.wc-check-rec{margin:9px 0 0;font-size:12.5px;line-height:1.6;color:var(--wc-ink0);max-width:66ch}
.wc-check-rec b{color:var(--wc-g1);font-weight:400}

/* ============ priority + strength ============ */
.wc-cards2{display:flex;flex-direction:column}
.wc-ecard{background:transparent!important;border:0!important;border-radius:0!important;margin:0!important;padding:0 0 26px 20px!important;position:relative;display:flex;flex-direction:column;gap:9px}
.wc-ecard:last-child{padding-bottom:0!important}
.wc-ecard::before{content:"";position:absolute;left:0;top:7px;bottom:26px;width:2px;background:var(--wc-g1);border-radius:2px}
.wc-ecard:last-child::before{bottom:0}
.wc-ecard[data-kind="strength"]{padding-left:20px!important;padding-bottom:20px!important}
.wc-ecard[data-kind="strength"]::before{background:var(--wc-g3)}
.wc-ecard-t{margin:0;font-size:15.5px;color:var(--wc-ink0);font-family:"Instrument Sans",system-ui,sans-serif;font-weight:500;display:block}
.wc-ecard-t::before{display:none!important}
.wc-ecard[data-kind="strength"] .wc-ecard-t{font-size:14px;font-weight:400;color:var(--wc-ink1)}
.wc-ecard-p{margin:0;font-size:13.5px;line-height:1.65;color:var(--wc-ink1);max-width:64ch}
.wc-ecard-meta{margin:0;font-size:12px;line-height:1.6;color:var(--wc-ink2);max-width:64ch;overflow-wrap:anywhere}
.wc-ecard-meta b{color:var(--wc-ink3);font-weight:400}
.wc-ecard-next{margin:3px 0 0;font-size:13.5px;line-height:1.65;color:var(--wc-ink0);max-width:64ch}
.wc-ecard-next b{color:var(--wc-g1);font-weight:400}
.wc-ecard[data-kind="strength"] .wc-ecard-p{font-size:12.5px;color:var(--wc-ink2)}

/* ============ brand message ============ */
.wc-snapshot{background:transparent!important;border:0!important;border-radius:0!important;padding:0!important}
.wc-bm{display:flex;flex-direction:column}
.wc-bm-row{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:8px clamp(24px,3vw,48px);padding:20px 0;border-top:1px solid var(--wc-hair2)}
.wc-bm-row:first-child{border-top:0;padding-top:0}
.wc-bm-k{font-size:12.5px;color:var(--wc-ink2);min-width:0;display:flex;align-items:flex-start;gap:9px}
.wc-bm-k .wc-ic-s{margin-top:2px;color:var(--wc-ink3)}
.wc-bm-v{min-width:0}
.wc-bm-val{margin:0;font-size:14.5px;line-height:1.65;color:var(--wc-ink0);max-width:62ch}
.wc-bm-val.none{color:var(--wc-ink2)}
.wc-bm-st{margin:8px 0 0;display:inline-flex;align-items:center;gap:7px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--wc-ink2)}
.wc-bm-st[data-s="clear"]{color:var(--wc-g2)}
.wc-bm-st[data-s="unclear"]{color:var(--wc-g1)}
.wc-bm-ex{margin:12px 0 0;padding:0 0 0 14px;border-left:2px solid rgba(61,255,61,.25);font-size:13px;line-height:1.7;color:var(--wc-ink1);font-style:italic;max-width:62ch}
.wc-bm-src{display:block;margin:7px 0 0;font-size:11.5px;color:var(--wc-ink3);overflow-wrap:anywhere;font-style:normal}
.wc-bm-src a{color:var(--wc-ink2);text-decoration:underline;text-underline-offset:2px}
.wc-bm-src a:hover{color:var(--wc-g1)}
.wc-bm-notes{margin:24px 0 0;padding:20px 0 0;border-top:1px solid var(--wc-hair2);display:flex;flex-direction:column;gap:9px}
.wc-bm-note{margin:0;font-size:12px;line-height:1.65;color:var(--wc-ink3);max-width:76ch}
@media(max-width:700px){.wc-bm-row{grid-template-columns:minmax(0,1fr);gap:6px}}

/* ============ search + AI readiness ============ */
.wc-ai-legend{display:flex;flex-wrap:wrap;gap:8px 10px;margin:0 0 26px}
.wc-ai-legend span{display:inline-flex;align-items:center;gap:7px;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--wc-ink3);border:1px solid var(--wc-hair2);border-radius:999px;padding:5px 12px}
.wc-ai-legend .wc-key{width:7px;height:7px;border-radius:50%;flex:none;background:var(--wc-ink3)}
.wc-ai-legend .v .wc-key{background:var(--wc-g2)}
.wc-ai-legend .d .wc-key{background:var(--wc-g1)}
.wc-ai-grp{margin:0 0 28px}
.wc-ai-grp:last-child{margin-bottom:0}
.wc-ai-gh{margin:0 0 12px;display:flex;align-items:center;gap:9px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--wc-ink3)}
.wc-ai-gh .wc-ic-s{color:var(--wc-ink3)}
.wc-ai-item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;padding:15px 0;border-top:1px solid var(--wc-hair2)}
.wc-ai-grp .wc-ai-item:first-of-type{border-top:0;padding-top:0}
.wc-ai-item>.wc-ic-s{margin-top:3px;color:var(--wc-ink3)}
.wc-ai-item[data-s="ok"]>.wc-ic-s{color:var(--wc-g2)}
.wc-ai-item[data-s="warn"]>.wc-ic-s{color:var(--wc-g1)}
.wc-ai-b{min-width:0}
.wc-ai-t{margin:0;font-size:14px;color:var(--wc-ink0);display:flex;flex-wrap:wrap;align-items:baseline;gap:9px}
.wc-ai-st{font-size:12.5px;color:var(--wc-ink1)}
.wc-ai-kind{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;border:1px solid var(--wc-hair2);border-radius:999px;padding:3px 9px;color:var(--wc-ink3);white-space:nowrap}
.wc-ai-kind[data-k="verified"]{border-color:rgba(31,201,87,.4);color:var(--wc-g2)}
.wc-ai-kind[data-k="declared"]{border-color:rgba(61,255,61,.32);color:var(--wc-g1)}
.wc-ai-d{margin:5px 0 0;font-size:12.5px;line-height:1.6;color:var(--wc-ink1);max-width:68ch}
.wc-ai-ev{margin:7px 0 0;font-size:11.5px;line-height:1.55;color:var(--wc-ink2);overflow-wrap:anywhere}
.wc-ai-sc{margin:6px 0 0;font-size:11px;color:var(--wc-ink3)}
.wc-ai-ag{margin:10px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.wc-ai-ag span{font-size:11px;color:var(--wc-ink2);border:1px solid var(--wc-hair2);border-radius:4px;padding:4px 9px;display:inline-flex;gap:6px}
.wc-ai-ag span[data-a="Blocked"]{color:var(--wc-ink0);border-color:rgba(244,244,240,.22)}
.wc-ai-ag b{font-weight:400;color:var(--wc-ink3)}

/* ============ evidence, pages, gaps ============ */
.wc-covmap{display:flex;flex-direction:column;list-style:none;margin:0;padding:0}
.wc-covrow{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:11px 0;border-bottom:1px solid var(--wc-hair2);font-size:12.5px}
.wc-covmap>:last-child{border-bottom:0}
.wc-covurl{color:var(--wc-ink1);overflow-wrap:anywhere;min-width:0}
/* The status carries the page title, which has no bounded length, so it must be allowed to shrink
   and wrap. flex:none sized it to max-content and pushed it past the viewport on narrow screens. */
.wc-covstatus{flex:0 1 auto;min-width:0;color:var(--wc-ink3);font-size:11.5px;text-align:right;overflow-wrap:anywhere}
.wc-covrow[data-ok="0"] .wc-covstatus{color:var(--wc-ink0)}
@media(max-width:539px){.wc-covrow{flex-direction:column;align-items:stretch;gap:4px}.wc-covstatus{text-align:left}}
.wc-gaps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.wc-gaps li{font-size:12px;line-height:1.6;color:var(--wc-ink2);padding-left:14px;position:relative}
.wc-gaps li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:1px;background:var(--wc-ink3)}
[data-wc-meta]{font-size:11.5px;line-height:1.6;color:var(--wc-ink3);word-break:break-word}

/* ============ folds ============ */
details.wc-fold{border-top:1px solid var(--wc-hair2);margin:0}
details.wc-fold:first-of-type{border-top:0}
.wc-cat details.wc-fold{border-top:0;margin-top:14px}
details.wc-fold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 0;min-height:44px;font-size:13px;color:var(--wc-ink2);transition:color .22s ease}
.wc-cat details.wc-fold>summary{padding:10px 0}
details.wc-fold>summary::-webkit-details-marker{display:none}
details.wc-fold>summary::after{content:"";width:9px;height:9px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);flex:none;transition:transform .22s ease}
details.wc-fold[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
details.wc-fold>summary:hover{color:var(--wc-ink0)}
details.wc-fold>.wc-fold-body{padding:0 0 20px}

/* ============ actions + gate ============ */
.wc-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.wc-gate{background:transparent!important;border:0!important}
#wc-results a:focus-visible,#wc-results button:focus-visible,#wc-results input:focus-visible,#wc-results summary:focus-visible,[data-wc-retry]:focus-visible,[data-wc-hero-cta]:focus-visible{outline:2px solid var(--wc-g1);outline-offset:3px;border-radius:3px}

/* ============ print ============ */

/* ============ plain-English pass: one icon set, one order, one voice ============ */
:root{--wc-mk-brick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='14' rx='1.5'/%3E%3Cpath d='M3.5 9.67h17M3.5 14.33h17M12 5v4.67M7.5 9.67v4.66M16.5 9.67v4.66M12 14.33V19'/%3E%3C/svg%3E");--wc-mk-globe:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M4 12h16M12 4c2.5 2.4 2.5 13.2 0 16M12 4c-2.5 2.4-2.5 13.2 0 16'/%3E%3C/svg%3E");--wc-mk-struct:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='2'/%3E%3Cpath d='M4 9h16M8 13h8M8 16.5h5'/%3E%3C/svg%3E");--wc-mk-biz:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V8l8-4 8 4v12'/%3E%3Cpath d='M9.5 20v-5h5v5'/%3E%3Cpath d='M3 20h18'/%3E%3C/svg%3E");--wc-mk-chat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5h14v10H9l-4 4z'/%3E%3Cpath d='M9 9h6M9 12h4'/%3E%3C/svg%3E");--wc-mk-prio:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v10'/%3E%3Cpath d='M7.5 8.5 12 4l4.5 4.5'/%3E%3Ccircle cx='12' cy='18.5' r='.6'/%3E%3C/svg%3E");}

/* "Website foundations" mark. The old three-block stack read as something else entirely; a brick
   wall says foundations. The page head already masks these two elements with the old mark, so this
   needs !important to replace it. */
.wc-hp-label .wc-ic,.wc-sec:has([data-wc-cats]) .wc-sec-h .wc-ic{-webkit-mask:var(--wc-mk-brick) no-repeat center/contain!important;mask:var(--wc-mk-brick) no-repeat center/contain!important}

/* Key numbers are the technical proof behind the score, not the first thing a visitor needs.
   They move to the end of the analysis, just above the raw evidence. order only reorders what is
   painted, so reading order for keyboard and screen-reader users follows the source. The category
   section leads now, so it takes the first-section treatment. */
[data-wc-panel] .wc-sec:has(.wc-kf){order:1}
[data-wc-panel] .wc-sec:has(.wc-gaps){order:2}
[data-wc-panel] .wc-gate.wc-sec,[data-wc-panel] .wc-actions-sec{order:3}
.wc-sec:has([data-wc-cats]){border-top:0!important;padding-top:0!important}
.wc-check-w{display:none}

/* limit countdown, written by enhance.js under the message */
.wc-hp-count{margin:16px 0 22px;padding:11px 14px;border:1px solid var(--wc-hair);border-radius:8px;background:rgba(61,255,61,.05);font-size:13.5px;line-height:1.5;color:var(--wc-ink0);display:flex;gap:10px;align-items:flex-start}
.wc-hp-count::before{content:"";flex:none;width:8px;height:8px;margin-top:.5em;border-radius:50%;background:var(--wc-g1)}

/* ---------- example report in the hero ---------- */
/* the three plain names each need a line saying what they mean, so the row becomes name, score,
   explainer, bar rather than name, score, bar */
.wc-xr-i{grid-row:1;grid-column:1}
.wc-xr-cn{grid-row:1;grid-column:2}
.wc-xr-cs{grid-row:1;grid-column:3}
/* the explainer is the only paragraph inside a row. It is targeted structurally because the
   Webflow builder that inserted it could not attach a new class name to it. */
.wc-xr-cat>p{grid-row:2;grid-column:2/-1;margin:0;font-size:12px;line-height:1.5;color:var(--wc-ink2)}
.wc-xr-seg{grid-row:3}
.wc-xr-cn{font-size:14px}
.wc-xr-i>*{display:none}
.wc-xr-i{stroke:none;background:var(--wc-g1);width:22px;height:22px;-webkit-mask:var(--wc-mk-globe) no-repeat center/contain;mask:var(--wc-mk-globe) no-repeat center/contain}
.wc-xr-cat:nth-child(2) .wc-xr-i{-webkit-mask-image:var(--wc-mk-struct);mask-image:var(--wc-mk-struct)}
.wc-xr-cat:nth-child(3) .wc-xr-i{-webkit-mask-image:var(--wc-mk-biz);mask-image:var(--wc-mk-biz)}
/* "Next" becomes a labelled priority fix, with the same mark as the Priority fixes section */
.wc-xr-nx{display:flex;align-items:center;gap:6px;margin:0 0 4px;font-weight:500;color:var(--wc-g1);white-space:nowrap}
.wc-xr-nx::before{content:"";width:15px;height:15px;background:currentColor;-webkit-mask:var(--wc-mk-prio) no-repeat center/contain;mask:var(--wc-mk-prio) no-repeat center/contain}

/* ---------- how it works ---------- */
/* An icon per column, the same ones the report itself uses, and headings large enough to scan.
   The old short green dash becomes the icon holder. */
#wc-method .wc-li{padding-top:28px;max-width:none}
#wc-method .wc-dash{position:static;display:block;width:34px;height:34px;margin:0 0 20px;background:var(--wc-g1);-webkit-mask:var(--wc-mk-brick) no-repeat center/contain;mask:var(--wc-mk-brick) no-repeat center/contain}
#wc-method .wc-li:nth-child(2) .wc-dash{-webkit-mask-image:var(--wc-mk-chat);mask-image:var(--wc-mk-chat)}
#wc-method .wc-li:nth-child(3) .wc-dash{-webkit-mask-image:var(--wc-mk-prio);mask-image:var(--wc-mk-prio)}
#wc-method .wc-li-h,#wc-method .wc-li>div:first-of-type{font-family:var(--wc-serif);font-style:italic;font-weight:200;font-size:clamp(28px,2.7vw,36px);line-height:1.08;letter-spacing:-.01em;color:var(--wc-ink0);margin:0 0 14px}
#wc-method .wc-li{font-size:16px;line-height:1.6;color:var(--wc-ink1)}
/* the limitation is a real answer to "what can't this do", so it reads as one, not as small print */
#wc-method .wc-body{max-width:none;padding:18px 22px;border:0;border-left:2px solid var(--wc-g2);background:rgba(61,255,61,.04);font-size:15px;line-height:1.65;color:var(--wc-ink1)}

/* ---------- Brand + Website Clarity Review card ---------- */
/* The icon stacked above the title made row one about 160px tall while the description beside it
   was 70px, so a gap opened under the description. With the icon beside the title the two share a
   row height and the card reads as a block. */
#wc-review-band .wc-review-offer{display:flex!important;align-items:center;gap:18px;max-width:none!important}
#wc-review-band .wc-review-offer::before{flex:none;width:46px!important;height:46px!important;margin:0!important}
#wc-review-band .wc-review-price{margin-top:clamp(14px,1.6vw,22px)!important}
/* Row one is as tall as the title, so a short description left a gap under it. Centring it against
   the title splits that gap above and below, and a tighter row gap closes the rest. */
#wc-review-band .wc-review>div:nth-child(2){row-gap:22px!important}
#wc-review-band .wc-review-desc{align-self:center}

/* The call to action above the card. It is inserted as a plain h2 directly inside the band because
   the Webflow builder could not attach a class to it, so it is styled by position. It shows in
   the idle page as well as the results, where the section above it only appears after a scan. */
/* Two short sentences, meant to read as two lines. 24ch suited the old single-headline text; this
   one is wider so text-wrap:balance settles on the natural "gaps. / We" break instead of a ragged
   three-line wrap. */
#wc-review-band>h2{margin:0 0 clamp(28px,3.4vw,48px);max-width:30ch;font-family:var(--wc-serif);font-style:italic;font-weight:200;font-size:clamp(34px,4.2vw,58px);line-height:1.08;letter-spacing:-.015em;color:var(--wc-ink);text-wrap:balance}
#wc-review-band .wc-review-desc{margin-bottom:22px!important}
/* the dash markers were a dull dark green; the site's own bright green, deepened just enough to
   show on beige (the pure neon is the same lightness as the card and vanishes) */
#wc-review-band .wc-review-deliverable::before{background-color:#17D24B!important;width:10px!important;height:2px!important}
/* the secondary action fills black on hover, matching the primary's weight */
#wc-review-band .wc-review-cta-secondary{transition:background-color .18s ease,color .18s ease,border-color .18s ease}
#wc-review-band .wc-review-cta-secondary:hover,#wc-review-band .wc-review-cta-secondary:focus-visible{background:#111!important;color:#F4F4F0!important;border-color:#111!important}
/* The privacy link joins the two enquiry links as a third .wc-quiet-link, pushed to the far end of
   the row so it reads as a quiet, separate item rather than a third equal option. Below 600px the
   row already wraps top-to-bottom; an auto margin there would strand it alone on its own line with
   nothing to push against, so it drops back to the normal left-aligned flow. */
#wc-review-band .wc-quiet-links>a:last-child{margin-left:auto}
@media(max-width:599px){#wc-review-band .wc-quiet-links>a:last-child{margin-left:0}}

/* ============ print / PDF ============ */
/* A printed check is a document, not a screenshot of a web page. Three things follow from that:
   the marketing around the report is dropped (it was padding the PDF out to eight pages), the
   page leads with a letterhead rather than the sales headline, and every card is kept whole
   across page turns — without the break rules a category or a finding splits down the middle.
   The nav logo is reused here because it is already dark type on a light ground. */
@page{margin:14mm 12mm}
@media print{
/* only the report itself, and the panel that identifies it */
.wc-h1,.wc-lead,.wc-eyebrow,#wc-form,.wc-scope-line,.wc-ctx,#wc-method,#wc-services,#wc-faq,#wc-tail,
#wc-review-band,.wc-gate,.wc-actions-sec,.wc-panel-meta,.wc-hp .wc-stages,.wc-hp-retry,
.wc-hp-cta,[data-wc-preview],.wc-demo-flag,#wc-status,.wc-hp-count,a[href$="/privacy"]{display:none!important}
/* .wc-panel-box wraps the hero result panel. Hiding it (as this block used to) took the score,
   the host and the verdict out of the PDF with it, which is why the printed report had no header
   at all. Flatten it instead. The marketing above is hidden by name, not by position, so a DOM
   change cannot silently take the panel with it again. */
.wc-panel-box{display:block!important;background:transparent!important;border:0!important;padding:0!important;box-shadow:none!important}
/* #top.dd-page carries the site's near-black. Chrome drops backgrounds when printing by
   default, but anyone who ticks "Background graphics" would otherwise get black on black. */
html,body,#top,.dd-page{background:#fff!important}
body{font-size:10.5pt;line-height:1.5}
#wc-results,#wc-results *,.wc-hp,.wc-hp *{color:#111!important;background-color:transparent!important}
#wc-results{padding:0!important;margin:0!important;display:block!important}
.wc-hero-right,.wc-hp{display:block!important}

/* letterhead: logo, then the host and score the panel already carries */
.wc-hp{background:#fff!important;border:0!important;padding:0!important;margin:0 0 7mm!important}
.wc-hp::before{content:"";display:block;width:46mm;height:10.6mm;margin:0 0 7mm;background:url("https://cdn.prod.website-files.com/6a9e4e9f785d2056b5059e43/6a9e76a1fc84bdabd1ef10dc_dd-logo-nav-green.svg") left top/contain no-repeat;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.wc-hp-top{margin:0 0 4mm!important}
/* The screen gauge is a 60mm focal point; on a letterhead it only needs to carry the number. */
.wc-gauge{width:38mm!important;margin:0 0 5mm!important}
/* The score keeps its bright green through an !important rule in the page head, which is right on
   black and illegible on paper. Out-specify it rather than relying on source order. */
.wc-hp .wc-gauge .wc-hp-num{color:#111!important}

/* nothing splits across a page turn, and a heading never ends one */
.wc-sec{padding:6mm 0!important;border-top:.4pt solid #cfcfcf!important}
.wc-sec:has([data-wc-cats]){border-top:0!important;padding-top:0!important}
.wc-sec-h,.wc-h2,.wc-h3,.wc-sec-sub{break-after:avoid;page-break-after:avoid}
.wc-cat,.wc-kf-item,.wc-ai-item,.wc-bm-row,.wc-covrow,.wc-ecard,details.wc-fold,.wc-check-row{break-inside:avoid;page-break-inside:avoid}

/* everything collapsed on screen is open on paper: a PDF cannot be expanded */
details.wc-fold>.wc-fold-body,.wc-kf-def>p{display:block!important}
details.wc-fold>summary::after,.wc-kf-def>summary::before{content:""!important;border:0!important}
details.wc-fold[hidden],[hidden]{display:none!important}

/* ink-on-paper equivalents of the screen accents; bars need exact adjust or they print blank */
.wc-ring-track{stroke:#ddd!important}
.wc-ring-arc{stroke:#111!important;animation:none!important}
.wc-ecard::before{background:#111!important}
.wc-kf-rail,.wc-segs{background:#e6e6e6!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.wc-kf-rail>i,.wc-segs>i{background:#111!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.wc-sec,details.wc-fold,.wc-cat,.wc-ai-item,.wc-bm-row,.wc-kf-item,.wc-covrow{border-color:#ddd!important}
a{text-decoration:none}
}

/* ===== example report card: motion and hover, shared by both pages =====
   The resting state is the finished card, so with no script or with reduced motion it is
   complete and correct. Transitions are listed per property: the reveal moves transform,
   opacity and filter slowly, hover moves colour and shadow quickly, and neither slows the other. */
[data-wc-preview] .wc-ex{transition:border-color .5s ease}
[data-wc-preview] .wc-ex:hover{border-color:rgba(61,255,61,.32)!important}
details[data-wc-lock]>.wc-ex-sum{cursor:default}
.wc-xr-body{transition:opacity .3s ease}
.wc-xr.wx-hush .wc-xr-body{opacity:0}
.wc-xr-verdict,.wc-xr-cov{transition:opacity .22s ease}
.wc-xr .wx-fade{opacity:0}
.wc-xr-ring{transition:filter .5s ease}
.wc-xr-hero:hover .wc-xr-ring{filter:drop-shadow(0 0 7px rgba(61,255,61,.45))}
.wc-xr-num{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.wc-xr-hero:hover .wc-xr-num{transform:scale(1.05)}
.wc-xr-arc{transition:stroke-dasharray 1.6s cubic-bezier(.22,1,.36,1) .05s}
/* Pointing at a category brings it forward and lets the other two fall back. There is no tinted panel:
   the rows sit edge to edge in the card, so a box around one had no room and looked cramped. */
.wc-xr-cat{transition:opacity .45s cubic-bezier(.22,1,.36,1)}
@media (hover:hover){.wc-xr-cats:hover .wc-xr-cat:not(:hover){opacity:.4}}
.wc-xr-i{transition:opacity .6s ease,transform .45s cubic-bezier(.22,1,.36,1)}
.wc-xr-cat:hover .wc-xr-i{transform:scale(1.12)}
.wc-xr-cs{transition:opacity .7s ease,filter .9s cubic-bezier(.22,1,.36,1),color .35s ease,transform .45s cubic-bezier(.22,1,.36,1)}
.wc-xr-cat:hover .wc-xr-cs{color:#8BFF8B;transform:translateY(-2px)}
.wc-xr-cat>p{transition:color .35s ease}
.wc-xr-cat:hover>p{color:var(--wc-ink1)}
.wc-xr-seg{position:relative}
.wc-xr-seg>span{transform-origin:left center;transition:transform 1.3s cubic-bezier(.22,1,.36,1),filter .35s ease,box-shadow .35s ease}
.wc-xr-cat:hover .wc-xr-seg>span{filter:brightness(1.2);box-shadow:0 0 12px rgba(61,255,61,.45)}
.wc-xr-seg::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:40%;border-radius:3px;background:rgba(61,255,61,.55);opacity:0}
.wc-xr-fix{transition:opacity .7s ease,transform .9s cubic-bezier(.22,1,.36,1),border-color .4s ease,background-color .4s ease}
.wc-xr-fix:hover{border-color:rgba(61,255,61,.5);background-color:#112011}
.wc-xr-nx::before{transition:transform .45s cubic-bezier(.22,1,.36,1)}
.wc-xr-fix:hover .wc-xr-nx::before{transform:translateY(-2px)}
.wc-xr-foot{transition:opacity .7s ease,transform .9s cubic-bezier(.22,1,.36,1)}
/* while the example plays */
.wc-xr.wx-armed .wc-xr-arc,.wc-xr.wx-armed .wc-xr-seg>span,.wc-xr.wx-armed .wc-xr-cs,.wc-xr.wx-armed .wc-xr-i,.wc-xr.wx-armed .wc-xr-fix,.wc-xr.wx-armed .wc-xr-foot{transition:none}
.wc-xr.wx-armed .wc-xr-arc{stroke-dasharray:0 327}
.wc-xr.wx-armed .wc-xr-trk{animation:wxBreathe 1.4s ease-in-out infinite}
.wc-xr.wx-armed .wc-xr-seg>span{transform:scaleX(0)}
.wc-xr.wx-armed .wc-xr-seg::after{opacity:1;animation:wxMeasure 1.4s cubic-bezier(.45,0,.55,1) infinite}
.wc-xr.wx-armed .wc-xr-cat:nth-child(2) .wc-xr-seg::after{animation-delay:.2s}
.wc-xr.wx-armed .wc-xr-cat:nth-child(3) .wc-xr-seg::after{animation-delay:.4s}
.wc-xr.wx-armed .wc-xr-cs{opacity:.28;filter:blur(4px)}
.wc-xr.wx-armed .wc-xr-i{opacity:.45}
.wc-xr.wx-armed .wc-xr-fix,.wc-xr.wx-armed .wc-xr-foot{opacity:0;transform:translateY(10px)}
@keyframes wxBreathe{0%,100%{stroke-opacity:1}50%{stroke-opacity:.4}}
@keyframes wxMeasure{to{left:100%}}
/* the reveal builds top to bottom */
.wc-xr.wx-reveal .wc-xr-cat:nth-child(1) .wc-xr-seg>span{transition-delay:.25s,0s,0s}
.wc-xr.wx-reveal .wc-xr-cat:nth-child(2) .wc-xr-seg>span{transition-delay:.4s,0s,0s}
.wc-xr.wx-reveal .wc-xr-cat:nth-child(3) .wc-xr-seg>span{transition-delay:.55s,0s,0s}
.wc-xr.wx-reveal .wc-xr-cat:nth-child(1) .wc-xr-cs{transition-delay:.25s,.25s,0s,0s}
.wc-xr.wx-reveal .wc-xr-cat:nth-child(2) .wc-xr-cs{transition-delay:.4s,.4s,0s,0s}
.wc-xr.wx-reveal .wc-xr-cat:nth-child(3) .wc-xr-cs{transition-delay:.55s,.55s,0s,0s}
.wc-xr.wx-reveal .wc-xr-fix{transition-delay:.95s,.95s,0s,0s}
.wc-xr.wx-reveal .wc-xr-foot{transition-delay:1.2s,1.2s}
@media(prefers-reduced-motion:reduce){.wc-xr-cat:hover .wc-xr-i,.wc-xr-cat:hover .wc-xr-cs,.wc-xr-hero:hover .wc-xr-num,.wc-xr-fix:hover .wc-xr-nx::before{transform:none}}

/* ===== website audit page: type reads white, problem icons read yellow =====
   The report's secondary text used sage greens (#CBDBCB, #9AAE9A, #6E806E), which were hard to
   read on black. They are neutral whites and greys now; hierarchy is kept by brightness alone.
   Icons stay green, except icons that flag a problem (partly met, missing, unclear), which are
   yellow. Score numbers and bars keep their greens.
   Scoped to the page's dark sections and the example card; the light review band is untouched. */
#wc-hero,#wc-results,#wc-method,#wc-services,#wc-faq,[data-wc-preview]{--wc-ink1:#ECECE7;--wc-ink2:#CFCFCA;--wc-ink3:#A6A6A1}
.wc-xr{--i1:#ECECE7;--i2:#CFCFCA;--i3:#A6A6A1}
#wc-results{--wc-warn:#F2C94C}
/* icons for things that passed keep their greens; the "came across clearly" tick stays green although its text is white */
#wc-results .wc-bm-st[data-s="clear"] .wc-ic{color:var(--wc-g2)}
#wc-results .wc-check[data-o="partial"] > .wc-ic,#wc-results .wc-check[data-o="fail"] > .wc-ic,
#wc-results .wc-ai-item[data-s="warn"] > .wc-ic,
#wc-results .wc-bm-st[data-s="unclear"] .wc-ic,#wc-results .wc-bm-st:not([data-s]) .wc-ic{color:var(--wc-warn)}
#wc-results .wc-bm-st[data-s="clear"],
#wc-results .wc-check-rec b,#wc-results .wc-ecard-next b{color:var(--wc-ink0)}
#wc-faq .wc-q-a a{color:var(--wc-ink0);text-decoration:none}
/* a few rules hard-code the sage greens instead of using the tokens */
.wc-xr .wc-xr-host,.wc-xr .wc-xr-den-s{color:var(--i3)}
[data-wc-preview] .wc-ex .wc-ex-sum span{color:var(--wc-ink1)}
#wc-hero .wc-hp-outof{color:var(--wc-ink3)!important}
#wc-results .wc-check-row2 .w-form-label{color:var(--wc-ink1)!important}

/* ===== form focus: one green line, the way the rest of the site does it ===== */
#wc-results .wc-gate-input:focus,#wc-results .wc-gate-input:focus-visible,#wc-results .wc-ctx-input:focus,#wc-results .wc-ctx-input:focus-visible,.wc-gate-input:focus-visible,.wc-ctx-input:focus-visible{outline:none!important;box-shadow:0 1px 0 0 var(--wc-g1)!important;border-bottom-color:var(--wc-g1)!important}
#wc-hero .wc-input:focus,#wc-hero .wc-input:focus-visible{outline:none!important;box-shadow:none!important;border-color:var(--wc-g1)!important}

/* ===== "Keep this report": a real thank-you, and nothing jumps =====
   Webflow's own form script also handles this form. On submit it hides the <form> and shows its
   generic "done" box, which the page hides, so only the heading was left and it slid down into the
   empty space. Keep the form in view so the thank-you below is what people see. */
.wc-gate form[data-wc-gate]{display:block!important}
.wc-gate{align-self:start!important}
.wc-gate:has([data-wc-gate-submit][aria-disabled="true"]) .wc-lead{display:none!important}

/* ===== website audit hero eyebrow: same as the homepage's section labels ===== */
#wc-hero .wc-eyebrow{display:flex!important;align-items:center;gap:14px!important;margin:0 0 22px!important;font-size:16px!important;font-weight:400!important;line-height:1.4!important;letter-spacing:normal!important;text-transform:none!important;color:#8B8B86!important}
#wc-hero .wc-eyebrow .wc-rule{flex:none;width:28px!important;height:2px!important;background:#3dff3d!important;margin:0!important}

/* ===== "What this can't do": the review link ===== */
#wc-method .wc-body a{color:var(--wc-ink0);text-decoration:none;border-bottom:1px solid var(--wc-g1);transition:color .24s ease}
#wc-method .wc-body a:hover,#wc-method .wc-body a:focus-visible{color:var(--wc-g1)}

/* ===== homepage: the example report spans columns two and three =====
   On the homepage the card runs from the second service column to the right gutter, so it is too wide
   for the stacked layout. From 900px of card width the three categories sit side by side, echoing the
   three service columns above, and the score gets a little more room. Only the homepage section makes
   the card a container, so the website audit page keeps the narrow card. */
#wc-home [data-wc-preview]{container:wcx/inline-size}
/* the site stylesheet caps .wc-ex at 760px, which is right for the website audit hero but not here */
#wc-home [data-wc-preview] .wc-ex{max-width:none}
@container wcx (min-width:900px){
  .wc-xr-body{padding:40px 44px}
  .wc-xr-hero{gap:32px}
  .wc-xr-gauge,.wc-xr-ring{width:156px;height:156px}
  .wc-xr-num{font-size:50px;padding-bottom:20px}
  .wc-xr-out{bottom:42px;font-size:8.5px}
  .wc-xr-verdict{font-size:34px}
  .wc-xr-cov{margin-top:10px;font-size:14px}
  .wc-xr-cats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:44px;margin-top:36px;padding-top:30px}
  .wc-xr-cat{grid-template-rows:auto 1fr auto;align-content:stretch;padding:2px 0 4px;border-bottom:0}
  .wc-xr-cn{font-size:16px}
  .wc-xr-cs{font-size:34px}
  .wc-xr-i{width:24px;height:24px}
  .wc-xr-cat>p{align-self:start;font-size:13.5px;line-height:1.55}
  .wc-xr-seg{align-self:end;height:6px;margin-top:18px}
  .wc-xr-fix{margin-top:36px;padding:24px 26px;gap:14px}
  .wc-xr-ft{font-size:16px}
  .wc-xr-fb,.wc-xr-fn{font-size:14px}
  .wc-xr-foot{margin-top:22px;font-size:13px}
}

/* ===== section marks that sit next to the supplied print mark =====
   "The full evidence" used the same stroked page icon as "The numbers behind your score", so beside
   the supplied print mark it read as a near copy at a heavier weight. It is now drawn in the print
   mark's own style (rounded page, folded corner, same line weight) with a magnifier: see the working.
   The envelope for "Keep this report" is redrawn the same way, larger and finer, so the three match. */
#wc-results .wc-sec:has(> .wc-fold) .wc-sec-h .wc-ic>*,.wc-gate .wc-sec-h .wc-ic>*{display:none}
#wc-results .wc-sec:has(> .wc-fold) .wc-sec-h .wc-ic{background:currentColor;stroke:none!important;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23.31 28.82' fill='none' stroke='black' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.6 .9H3.4A2.6 2.6 0 0 0 .8 3.5v21.8a2.6 2.6 0 0 0 2.6 2.6h16.5a2.6 2.6 0 0 0 2.6-2.6V8.8z'/%3E%3Cpath d='M14.6 .9v5.3a2.6 2.6 0 0 0 2.6 2.6h5.3'/%3E%3Ccircle cx='10.4' cy='16.3' r='4.2'/%3E%3Cpath d='M13.5 19.4l3.4 3.4'/%3E%3C/svg%3E") no-repeat center/contain!important;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23.31 28.82' fill='none' stroke='black' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.6 .9H3.4A2.6 2.6 0 0 0 .8 3.5v21.8a2.6 2.6 0 0 0 2.6 2.6h16.5a2.6 2.6 0 0 0 2.6-2.6V8.8z'/%3E%3Cpath d='M14.6 .9v5.3a2.6 2.6 0 0 0 2.6 2.6h5.3'/%3E%3Ccircle cx='10.4' cy='16.3' r='4.2'/%3E%3Cpath d='M13.5 19.4l3.4 3.4'/%3E%3C/svg%3E") no-repeat center/contain!important}
.wc-gate .wc-sec-h .wc-ic{width:34px!important;height:34px!important;background:currentColor;stroke:none!important;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28.82 23.31' fill='none' stroke='black' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='.8' y='.8' width='27.22' height='21.71' rx='2.6'/%3E%3Cpath d='M2.2 3.4l12.21 9.1 12.21-9.1'/%3E%3C/svg%3E") no-repeat center/contain!important;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28.82 23.31' fill='none' stroke='black' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='.8' y='.8' width='27.22' height='21.71' rx='2.6'/%3E%3Cpath d='M2.2 3.4l12.21 9.1 12.21-9.1'/%3E%3C/svg%3E") no-repeat center/contain!important}

/* ===== underlined text links: the site's green line and its wipe on hover =====
   The site's own script draws these as a 2px background line and wipes it on hover, but it does
   not run on this page, so enhance.js wires the same wipe. The text keeps its colour, as on the site. */
#wc-method .wc-body a,#wc-faq .wc-q-a a,.wc-gate a[href$="/privacy"]{border-bottom:0!important;text-decoration:none!important;background-image:linear-gradient(var(--wc-g1),var(--wc-g1));background-repeat:no-repeat;background-position:0 100%;background-size:100% 2px;padding-bottom:2px}
#wc-method .wc-body a:hover,#wc-method .wc-body a:focus-visible,#wc-faq .wc-q-a a:hover,.wc-gate a[href$="/privacy"]:hover,.wc-gate a[href$="/privacy"]:focus-visible{color:var(--wc-ink0)!important}

/* ===== website audit page: the site grid instead of a locked 1100px canvas =====
   Every other page runs edge to edge inside the header's gutters, so this one does too: content starts on
   the logo line and ends in line with "Let's talk". The desktop grid is the homepage's three service
   columns (gap clamp(32px,4vw,64px)). Reading measures stay capped inside it, so nothing stretches.
   The page head sizes every section with minmax(0,var(--wc-canvas)); lifting that one variable unlocks them. */
#wc-hero,#wc-results,#wc-method,#wc-services,#wc-faq,#wc-review-band{--wc-canvas:100%}

/* Hero, from 992px: copy in column one, exactly as on the homepage; the example report, or the live score
   panel once a scan runs, spans columns two and three. */
@media (min-width:992px){
  #wc-hero{container-type:inline-size}
  #wc-hero .wc-hero{--g:clamp(32px,4vw,64px);grid-template-columns:max(min(480px,50cqw),calc((100cqw - 2 * var(--g)) / 3)) minmax(0,1fr)!important;column-gap:var(--g)!important}
  #wc-hero .wc-hero>*{grid-column:auto!important;min-width:0}
  /* The right column runs the full height of the copy; the score panel fills it with its content centred,
     so a finished scan does not leave a short box beside a tall column. */
  #wc-hero .wc-hero-right{container:wchp/inline-size;align-self:stretch}
  #wc-hero [data-wc-preview]{flex:0 0 auto;width:100%;min-width:0;container:wcx/inline-size}
  #wc-hero [data-wc-preview] .wc-ex{max-width:none}
  #wc-hero .wc-hp{flex:1 1 auto;width:100%;justify-content:center}
}
/* A wide score panel puts the gauge beside the verdict instead of above it. */
@container wchp (min-width:820px){
  .wc-hp{display:grid!important;grid-template-columns:minmax(0,250px) minmax(0,1fr);column-gap:clamp(40px,4vw,72px);align-items:center;align-content:center;padding:clamp(34px,3vw,52px)!important}
  .wc-hp>*{grid-column:2;min-width:0}
  .wc-hp>.wc-hp-top{grid-column:1/-1}
  .wc-hp>.wc-gauge{grid-column:1;grid-row:2/span 8;width:min(100%,250px)!important;max-width:none;margin:0!important}
  .wc-hp>.wc-hp-verdict{font-size:clamp(18px,1.5vw,24px);line-height:1.4;text-align:left}
  .wc-hp>.wc-hp-cov{max-width:56ch;margin-left:0;margin-right:0;text-align:left}
  .wc-hp>.wc-hp-cta{justify-self:start}
  .wc-hp[data-wc-hp="failed"]>*{grid-column:1/-1}
}

/* Report, from 1200px: each section's heading and intro sit in column one, its content fills columns two
   and three. Floats rather than grid rows, because the page script decides how many blocks a section has. */
@media (min-width:1200px){
  #wc-results [data-wc-panel]{--g:clamp(32px,4vw,64px);container-type:inline-size;grid-template-columns:repeat(3,minmax(0,1fr))!important;column-gap:var(--g)!important}
  #wc-results .wc-sec:not(.wc-gate):not(.wc-actions-sec){--rail:calc((100cqw - 2 * var(--g)) / 3);display:flow-root!important;grid-column:1/-1!important}
  #wc-results .wc-sec:not(.wc-gate):not(.wc-actions-sec)>.wc-sec-h,
  #wc-results .wc-sec:not(.wc-gate):not(.wc-actions-sec)>.wc-sec-sub{float:left;clear:left;width:var(--rail);max-width:none;padding-right:clamp(0px,1.5vw,24px)}
  #wc-results .wc-sec:not(.wc-gate):not(.wc-actions-sec)>.wc-sec-h{align-items:flex-start}
  #wc-results .wc-sec:not(.wc-gate):not(.wc-actions-sec)>.wc-sec-sub{margin-bottom:0}
  #wc-results .wc-sec:not(.wc-gate):not(.wc-actions-sec)>:not(.wc-sec-h):not(.wc-sec-sub){margin-left:calc(var(--rail) + var(--g));min-width:0}
  /* The closing band: keep-this-report across columns one and two, print and reset in column three. */
  #wc-results .wc-gate.wc-sec{grid-column:1/3!important}
  #wc-results .wc-gate form{max-width:560px}
  #wc-results .wc-actions-sec{grid-column:3/4!important}
  #wc-results [data-wc-panel]:has(.wc-gate[hidden]) .wc-actions-sec{grid-column:1/-1!important}
}

/* What you'll find out: the three items are the three site columns; the note spans two of them. */
@media (min-width:992px){
  #wc-method .wc-list{column-gap:clamp(32px,4vw,64px)!important}
  #wc-method .wc-body{max-width:calc((100% - 2 * clamp(32px,4vw,64px)) / 3 * 2 + clamp(32px,4vw,64px))}
}

/* FAQ, from 1200px: heading in column one, questions in columns two and three. */
@media (min-width:1200px){
  #wc-faq{--g:clamp(32px,4vw,64px);grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-template-rows:auto 1fr;column-gap:var(--g)!important;align-items:start}
  #wc-faq>.wc-eyebrow-light{grid-column:1;grid-row:1}
  #wc-faq>.wc-h2{grid-column:1;grid-row:2;align-self:start}
  #wc-faq>.wc-faq{grid-column:2/-1;grid-row:1/span 2}
}

/* Review band: the offer on the left third, the detail across the other two. */
@media (min-width:1200px){
  #wc-review-band .wc-review>div:nth-child(2){grid-template-columns:minmax(0,1fr) minmax(0,2fr)!important;column-gap:clamp(32px,4vw,64px)!important}
}

/* ===== website audit page nav =====
   Both rules are scoped to this page with :has(#wc-results): report.css also loads on the homepage.
   Logo: the page head turns the whole logo white with a filter, because the page is dark, which also
   lost the green DD. A light copy of the same file (green DD, "Design" in the nav's off-white) is drawn
   behind the link; the original image stays in place, invisible, so its alt text and size are unchanged.
   Links: the page head colours them off-white with an ID selector, which also cancelled the site's
   hover colour, so they did nothing on hover. They now fade slightly, like the site's own hover. */
html:has(#wc-results) #dd-nav .dd-logo-link{background:url("data:image/svg+xml,%3Csvg id='Layer_2' data-name='Layer 2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2110.43 484.96'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cg%3E%3Cpath fill='%23F4F4F0' d='M907.79,77.82c42.6,0,77.83,15.13,105.7,45.36,27.86,30.24,41.79,67.26,41.79,111.06s-13.93,80.82-41.79,111.06c-27.86,30.24-63.09,45.36-105.7,45.36h-117.54V77.82h117.54ZM907.79,368.31c36.35,0,66.14-12.88,89.38-38.66,23.24-25.77,34.86-57.58,34.86-95.42s-11.62-69.64-34.86-95.42c-23.24-25.77-53.04-38.66-89.38-38.66h-93.85v268.15h93.85Z'%3E%3C/path%3E%3Cpath fill='%23F4F4F0' d='M1211.25,162.28c32.77,0,59.36,11.62,79.77,34.86,20.4,23.24,30.61,50.8,30.61,82.68,0,1.19-.08,2.98-.22,5.36-.15,2.39-.22,4.18-.22,5.36h-202.45c2.68,25.03,12.74,45.21,30.17,60.56,17.43,15.35,38.95,23.02,64.58,23.02,17.88,0,33.52-3.72,46.93-11.17,13.41-7.44,23.53-17.28,30.39-29.5l19.66,11.62c-9.24,15.5-22.35,27.79-39.33,36.87-16.98,9.08-36.35,13.63-58.1,13.63-34.27,0-62.42-10.95-84.47-32.85-22.05-21.9-33.07-49.83-33.07-83.8s10.8-61.15,32.4-83.35c21.6-22.19,49.38-33.29,83.35-33.29ZM1211.25,183.74c-25.33,0-46.48,7.9-63.46,23.69-16.98,15.79-26.67,36.2-29.05,61.23h179.66c-2.39-26.51-11.84-47.3-28.38-62.34-16.54-15.04-36.13-22.57-58.77-22.57Z'%3E%3C/path%3E%3Cpath fill='%23F4F4F0' d='M1380.18,225.05c0,10.84,4.66,19.34,14.01,25.5s20.64,10.97,33.9,14.46c13.25,3.49,26.58,7,39.99,10.52,13.41,3.53,24.68,9.95,33.81,19.27,9.13,9.32,13.7,21.75,13.7,37.32,0,18.48-7.37,33.67-22.12,45.59-14.75,11.92-34.04,17.88-57.88,17.88-21.45,0-39.55-4.55-54.3-13.63-14.75-9.09-24.96-21.08-30.61-35.98l19.22-11.17c4.17,12.22,11.99,21.83,23.46,28.83,11.47,7,25.54,10.5,42.23,10.5s30.46-3.64,41.34-10.94c10.87-7.29,16.31-17.64,16.31-31.04,0-11.02-4.62-19.8-13.86-26.35-9.25-6.55-20.5-11.56-33.75-15.05-13.26-3.49-26.59-7-39.99-10.53-13.41-3.53-24.73-9.76-33.96-18.7-9.24-8.94-13.85-20.85-13.85-35.75,0-17.88,7.07-32.92,21.23-45.14,14.15-12.21,32.4-18.32,54.75-18.32,17.88,0,33.44,4.02,46.7,12.07,13.25,8.04,23.02,18.92,29.27,32.62l-18.77,10.73c-4.47-11.02-11.92-19.44-22.35-25.25-10.43-5.81-22.05-8.71-34.86-8.71-15.2,0-27.93,3.74-38.21,11.21-10.28,7.47-15.42,17.51-15.42,30.1Z'%3E%3C/path%3E%3Cpath fill='%23F4F4F0' d='M1582.18,107.98c-3.58,3.43-7.75,5.14-12.51,5.14s-8.94-1.71-12.51-5.14c-3.58-3.42-5.36-7.67-5.36-12.74,0-4.76,1.79-8.86,5.36-12.29,3.58-3.42,7.74-5.14,12.51-5.14s8.94,1.72,12.51,5.14c3.58,3.43,5.36,7.53,5.36,12.29,0,5.07-1.79,9.32-5.36,12.74ZM1558.5,390.66v-223.46h22.35v223.46h-22.35Z'%3E%3C/path%3E%3Cpath fill='%23F4F4F0' d='M1839.16,167.2h22.35v212.73c0,32.47-10.58,58.1-31.73,76.87-21.16,18.77-47.67,28.16-79.55,28.16-25.63,0-47.53-4.77-65.7-14.3-18.18-9.54-31.44-22.65-39.78-39.33l19.67-11.17c14.3,28.9,42.9,43.35,85.81,43.35,27.71,0,49.46-7.53,65.25-22.57,15.79-15.05,23.69-35.38,23.69-61v-41.12c-9.24,17.58-22.28,31.44-39.1,41.56-16.84,10.13-35.83,15.2-56.98,15.2-32.18,0-59.52-11.24-82.01-33.74-22.5-22.49-33.74-50.12-33.74-82.9s11.24-60.4,33.74-82.9c22.49-22.49,49.83-33.74,82.01-33.74,21.15,0,40.15,5.07,56.98,15.2,16.83,10.13,29.87,23.99,39.1,41.56v-51.84ZM1677.15,346.41c18.32,18.48,40.74,27.71,67.26,27.71s48.94-9.23,67.26-27.71c18.32-18.47,27.49-40.96,27.49-67.48s-9.16-49.01-27.49-67.48c-18.32-18.47-40.75-27.71-67.26-27.71s-48.94,9.24-67.26,27.71c-18.32,18.48-27.49,40.97-27.49,67.48s9.16,49.02,27.49,67.48Z'%3E%3C/path%3E%3Cpath fill='%23F4F4F0' d='M2023.73,162.28c26.51,0,47.6,8.12,63.24,24.36,15.64,16.24,23.46,37.92,23.46,65.03v138.99h-22.79v-138.99c0-20.85-5.74-37.39-17.21-49.61-11.47-12.21-27.64-18.32-48.49-18.32-22.95,0-41.72,7.6-56.31,22.79-14.6,15.2-21.9,37.25-21.9,66.14v117.99h-22.35v-223.46h22.35v42.46c16.09-31.58,42.75-47.37,80-47.37Z'%3E%3C/path%3E%3C/g%3E%3Cpath fill='%233DFF3D' d='M548.73,232.82c0,121.74-93.42,221.66-212.49,232V.83c119.07,10.33,212.49,110.25,212.49,232Z'%3E%3C/path%3E%3Cpath fill='%233DFF3D' d='M307.94,232.71c0,128.46-104.24,232.71-232.71,232.71v.25H0V0h75.23c128.46,0,232.71,104.12,232.71,232.71Z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E") no-repeat left center/contain}
html:has(#wc-results) #dd-nav .dd-logo-1{filter:none!important;opacity:0}
html:has(#wc-results) #dd-nav .dd-link-1:not([data-dd-audit]){transition:color .3s ease}
html:has(#wc-results) #dd-nav .dd-link-1:not([data-dd-audit]):hover,html:has(#wc-results) #dd-nav .dd-link-1:not([data-dd-audit]):focus-visible{color:rgba(244,244,240,.6)}

/* ===== website audit page: motion and section rhythm, matching the rest of the site =====
   motion.ts adds these classes; they only ever hide something that is about to animate in. The hero
   guard (an embed above the hero) carries its own copy of the first rule, because this file loads after
   the hero has painted. */
html.wx-anim:not(.wx-ready) #wc-hero .wc-hero{opacity:0}
/* The hidden states apply instantly; only the reveal (.wx-in) carries a transition. If the hidden state
   transitioned too, an element would fade out on its stagger delay instead of starting hidden. */
.wx-w{display:inline-block;opacity:0;transform:translateY(.4em)}
.wx-fd{opacity:0}
.wx-up{opacity:0;transform:translateY(16px)}
.wx-rv{opacity:0;transform:translateY(20px)}
.wx-w.wx-in{opacity:1;transform:none;transition:transform 1.2s cubic-bezier(.16,1,.3,1) var(--d,0s),opacity 1.1s ease var(--d,0s)}
.wx-fd.wx-in{opacity:1;transition:opacity 1.5s ease var(--d,0s)}
.wx-up.wx-in{opacity:1;transform:none;transition:opacity 1s cubic-bezier(.16,1,.3,1) var(--d,0s),transform 1.1s cubic-bezier(.16,1,.3,1) var(--d,0s)}
.wx-rv.wx-in{opacity:1;transform:none;transition:opacity 1s cubic-bezier(.16,1,.3,1) var(--d,0s),transform 1.2s cubic-bezier(.16,1,.3,1) var(--d,0s)}
/* The page head pins the method and FAQ headings (and FAQ items) to opacity:1 !important; out-rank it only while hidden. */
#wc-light-wrap .wx-rv:not(.wx-in),#wc-tail .wx-rv:not(.wx-in){opacity:0!important}
@media print{html.wx-anim #wc-hero .wc-hero,.wx-w,.wx-fd,.wx-up,.wx-rv{opacity:1!important;transform:none!important;transition:none!important}}
@media (prefers-reduced-motion:reduce){.wx-w,.wx-fd,.wx-up,.wx-rv{opacity:1!important;transform:none!important;transition:none!important}}
/* Section spacing = the site's dark sections (.dd-dark): clamp(120px,15vw,220px) top and bottom, 140px on
   tablet, 120px on phone. The report's own sections get more room between them too. */
#wc-method,#wc-services,#wc-faq,#wc-review-band{--wc-sec:clamp(120px,15vw,220px)}
@media (max-width:991px){#wc-method,#wc-services,#wc-faq,#wc-review-band{--wc-sec:140px}}
@media (max-width:767px){#wc-method,#wc-services,#wc-faq,#wc-review-band{--wc-sec:120px}}
#wc-method{padding-top:var(--wc-sec)!important}
#wc-results .wc-sec,#wc-results .wc-sec:has([data-wc-findings]){padding-top:clamp(56px,6.5vw,110px);padding-bottom:clamp(56px,6.5vw,110px)}
#wc-results .wc-sec:first-of-type{padding-top:0}

/* ===== website audit page, phones and tablets: the "automated read" note fills its box =====
   At 15px in a full-width box the note read small and left the right side of the box empty. On narrow
   screens it steps up to the size of the body copy around it and wraps more evenly. */
@media (max-width:991px){
  #wc-method .wc-body{padding:24px 22px 26px 20px;font-size:17px;line-height:1.6;text-wrap:pretty}
}

/* ===== one neutral charcoal for every dark surface (homepage, Approach, audit page) =====
   The example card's frame, its header strip and priority-fix box, the live score panel and the address
   field were a green-tinted near-black (#0B110B to #0E150E) beside the card body's neutral #111, so the top
   of the card read green. They now share the body's charcoal, one step lighter where a surface needs lift.
   The score bar tracks stay dark green on purpose. */
[data-wc-preview] .wc-ex{background:#111!important}
[data-wc-preview] .wc-ex-sum,.wc-xr-bar,.wc-xr-fix{background:#151515!important}
.wc-hp{background:#111!important}
#wc-hero .wc-input{background:#151515!important}

/* ===== website audit page: once a report is on screen =====
   "What you'll find out" explains the scan before it runs. With the report showing it only repeats it, so
   it goes, and so does the hero's "How it works" link that pointed at it. Both return after a reset. */
body:has(#wc-results:is([data-wc-state="complete"],[data-wc-state="partial"])) #wc-method,
body:has(#wc-results:is([data-wc-state="complete"],[data-wc-state="partial"])) #wc-hero .wc-method-link{display:none!important}
/* Section labels in the site's style, as on the homepage and in the hero: a 28px green dash, then 16px
   sentence-case grey (#8B8B86 on dark, #6B6B66 on the beige band). They were 11px uppercase. */
#wc-light-wrap .wc-eyebrow-light,#wc-tail .wc-eyebrow-light{display:flex!important;align-items:center;gap:14px!important;margin:0 0 22px!important;font-size:16px!important;font-weight:400!important;line-height:1.4!important;letter-spacing:normal!important;text-transform:none!important;color:#8B8B86!important}
#wc-light-wrap .wc-rule-light,#wc-tail .wc-rule-light{flex:none;display:inline-block!important;width:28px!important;height:2px!important;background:#3dff3d!important;margin:0!important}
#wc-review-band .wc-eyebrow-light{color:#6B6B66!important}
/* Hero: more room under the nav on desktop (it was 72px). */
@media (min-width:992px){#wc-hero{padding-top:clamp(110px,10vw,180px)!important}}

/* ===== print, second pass: about three pages instead of ten (23 Sep 2026) =====
   A printed check was ten pages: the browser's own date, title and the full private report link on every
   page, the site's cursor dot, a label above the logo, category and evidence folds printing as bare headings
   (Chrome will not print the inside of a closed <details>), four pages of AI readiness explanations and a
   key number per half page. Paper now carries the summary; the full evidence stays in the online report.
   Page margin boxes replace the browser's header and footer, which also keeps the report link off paper. */
@page{margin:16mm 13mm 16mm;@top-left{content:"Website audit report";font:8pt "Instrument Sans",Arial,sans-serif;color:#6B6B66}@top-right{content:"dd-design.com.au";font:8pt "Instrument Sans",Arial,sans-serif;color:#6B6B66}@bottom-left{content:"DD Design  \00B7  Free Website Audit + AI Readiness Scan";font:8pt "Instrument Sans",Arial,sans-serif;color:#6B6B66}@bottom-right{content:counter(page) " / " counter(pages);font:8pt "Instrument Sans",Arial,sans-serif;color:#6B6B66}}
.wx-print-date{display:none}
@media print{
  /* screen furniture */
  #dd-cursor,.dd-stk,#wc-hero .wc-eyebrow,#wc-hero .wc-method-link,.wx-again,#dd-nav,.dd-burger,.dd-mnav{display:none!important}
  /* letterhead: logo; then a small gauge beside the site, verdict, coverage and scan date */
  .wc-hp{display:grid!important;grid-template-columns:30mm minmax(0,1fr);column-gap:7mm;align-items:center;margin:0 0 4mm!important}
  .wc-hp::before{grid-column:1/-1;margin:0 0 6mm!important}
  .wc-hp>*{grid-column:2;min-width:0}
  .wc-hp>.wc-hp-top{grid-column:1/-1;margin:0 0 3mm!important}
  .wc-hp>.wc-gauge{grid-column:1;grid-row:3/span 4;width:28mm!important;margin:0!important}
  .wc-hp-verdict{font-size:13pt!important;line-height:1.35!important;text-align:left!important}
  .wc-hp-cov{text-align:left!important;margin:1.5mm 0 0!important;max-width:none!important;font-size:9pt!important}
  .wx-print-date{display:block!important;margin:1.5mm 0 0!important;font-size:9pt;color:#6B6B66!important}
  /* sections: tighter than on screen */
  #wc-results .wc-sec,#wc-results .wc-sec:has([data-wc-findings]){padding:4.5mm 0!important;margin:0!important}
  #wc-results .wc-sec-h{font-size:15pt!important;margin:0 0 1.5mm!important}
  #wc-results .wc-sec-h .wc-ic,#wc-results .wc-sec-h .wc-ic-s{width:15pt!important;height:15pt!important}
  #wc-results .wc-sec-sub{font-size:9pt!important;line-height:1.45!important;margin:0 0 3mm!important;max-width:none!important}
  /* the three parts of the score: name, points, bar and counts; the per-check lists stay online */
  #wc-results .wc-cat{padding:3mm 0!important}
  #wc-results .wc-cat details.wc-fold{display:none!important}
  #wc-results .wc-cat-score b{font-size:20pt!important}
  #wc-results .wc-cat-def{font-size:9pt!important;margin-top:1.5mm!important}
  /* key numbers: one row of four */
  #wc-results .wc-kf{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:5mm!important}
  #wc-results .wc-kf-num{font-size:22pt!important}
  #wc-results .wc-kf-def,#wc-results .wc-kf-scope,#wc-results .wc-kf-note{display:none!important}
  /* priority fixes and strengths: full width, one after another */
  #wc-results [data-wc-findings],#wc-results [data-wc-strengths]{grid-template-columns:minmax(0,1fr)!important;gap:3mm!important}
  #wc-results .wc-ecard{padding:3.5mm 4mm!important}
  #wc-results .wc-ecard-meta{font-size:8.5pt!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  /* AI readiness: what was checked and what we found; the explanations and optional extras stay online */
  #wc-results .wc-ai-d,#wc-results .wc-ai-ev,#wc-results .wc-ai-sc,#wc-results .wc-ai-ag,#wc-results .wc-ai-legend,#wc-results .wc-ai-kind,#wc-results .wc-bm-note{display:none!important}
  #wc-results .wc-ai-item:has(.wc-ai-kind[data-k="optional"]),
  #wc-results .wc-ai-grp:has(.wc-ai-kind[data-k="optional"]):not(:has(.wc-ai-kind[data-k="verified"])):not(:has(.wc-ai-kind[data-k="declared"])){display:none!important}
  #wc-results .wc-ai-item{padding:1mm 0!important}
  #wc-results .wc-ai-gh{margin:3mm 0 1mm!important}
  /* the full evidence section is folds only, which paper cannot open */
  #wc-results .wc-sec:has(> details.wc-fold){display:none!important}
  /* the score fits its smaller ring */
  .wc-hp .wc-gauge .wc-hp-num{font-size:24pt!important}
  .wc-hp .wc-hp-outof{font-size:5.5pt!important;margin-top:.8mm!important}
  /* priority fixes: title, what we saw, where, and what to do; the "why" and help lines stay online */
  #wc-results [data-wc-findings] .wc-ecard-meta:has(+ .wc-ecard-next),
  #wc-results [data-wc-findings] .wc-ecard-meta:last-child,
  #wc-results [data-wc-strengths] .wc-ecard-meta{display:none!important}
  #wc-results [data-wc-strengths] .wc-ecard{padding:2.5mm 4mm!important}
  /* tighter rhythm inside cards and categories; the three strengths sit side by side */
  #wc-results .wc-ecard{gap:1.2mm!important;row-gap:1.2mm!important}
  #wc-results .wc-ecard>*{margin-top:0!important;margin-bottom:0!important}
  #wc-results .wc-ecard-t{font-size:11pt!important}
  #wc-results [data-wc-strengths]{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  #wc-results .wc-cat-counts{margin-top:1.5mm!important}
  #wc-results .wc-cat-top{margin-top:2mm!important;padding-top:2mm!important}
  #wc-results .wc-ai-grp{margin:0 0 1.5mm!important;padding:0!important}
  #wc-results .wc-ai-gh{margin:1.5mm 0 .5mm!important}
  /* AI readiness groups in two columns */
  #wc-results ul:has(> .wc-ai-grp){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:8mm;align-items:start}
  #wc-results .wc-ai-grp{break-inside:avoid}
  /* close with where to go next */
  #wc-results::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";display:block;margin:5mm 0 0;padding:4mm 0 0;border-top:.4pt solid #cfcfcf;font-size:9pt;line-height:1.5;color:#111;break-inside:avoid}
}

/* ================= 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}}