/* ── self-hosted fonts (CWV pass 2026-07-15) — latin variable subsets,
   downloaded from fonts.gstatic.com (Inter v20 wght 100–900, Space
   Grotesk v22 wght 300–700). Zero requests to fonts.googleapis/gstatic. ── */
@font-face{
  font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/static/fonts/inter-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('/static/fonts/space-grotesk-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* ── metric-matched fallbacks (CLS fix 2026-07-16) ────────────────────────
   Root cause of /pricing desktop CLS 0.371: font-display:swap first-paints
   the plan cards in the raw system fallback, which is ~55px TALLER per card
   in the >980px 4-col grid; when Space Grotesk/Inter swap in the cards
   shrink and every section below the grid jumps up. Preloading alone does
   NOT close the swap window on PSI's throttled cold load. Fix: pin the
   pre-swap fallback to Arial (aliases to Liberation Sans on Linux/PSI) with
   size-adjust + ascent/descent overrides derived from the real fonts'
   own OS/2 typo metrics + Capsize weighted avg advance (upm/asc/desc/xWidth:
   Inter 2048/1984/-494/969.8, SpaceGrotesk 1000/984/-292/489.4; Arial
   xWidthAvg 904/2048). The fallback then occupies the SAME box as the web
   font, so nothing reflows on swap. These families are 2nd in the stacks
   below and are only rendered for the brief pre-swap moment. */
@font-face{font-family:'Inter Fallback';src:local('Arial');
  size-adjust:107.28%;ascent-override:90.30%;descent-override:22.48%;line-gap-override:0%;}
@font-face{font-family:'Space Grotesk Fallback';src:local('Arial');
  size-adjust:110.87%;ascent-override:88.75%;descent-override:26.34%;line-gap-override:0%;}

/* ═══════════════════════════════════════════════════════════════════════
   GW EDITORIAL-PRODUCT — public funnel design system (Wave B skin)
   Spec: GW_FUNNEL_OVERHAUL_SPEC_2026-07-14.md §3 + Brandon 07-15 direction:
   differentiate from RecentBreaches as the security PRODUCT brand.
   Rules enforced here (the polish delta):
     · Space Grotesk display capped at 44px/700 (h1–h3, kicker, stat numerals);
       body stays Inter — Source Serif 4 is gone
     · cool slate paper (page stays light); CARDS are dark brutalist panels:
       #14171c, 2px ink border, hard 5px/5px offset shadow, NO blur
     · zero gradients on UI surfaces (gradients live in image assets)
     · motion = opacity/transform, 120–300ms, standard easing, reduced-motion safe
     · lime appears ONLY on primary CTAs + confirmed ticks;
       cyan ONLY as a small data accent where a second accent already exists
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --gw-paper:#f4f5f6; --gw-card:#ffffff; --gw-ink:#16181d; --gw-body:#3f4450;
  --gw-mut:#6b7080; --gw-faint:#9a9fad; --gw-hair:#dfe3e8; --gw-hair2:#ccd2d9;
  --gw-green-ink:#3f6212; --gw-lime:#84cc16; --gw-lime-d:#65a30d;
  --gw-cyan:#22d3ee;
  --gw-danger:#b91c1c; --gw-danger-bg:#fdf0ef; --gw-ok-bg:#f2f8e8;
  --gw-panel:#14171c; --gw-panel-2:#1a1f2a; --gw-edge:#0b0d10; --gw-edge-d:#05060a;
  --gw-ptxt:#e8eaee; --gw-pmut:#a7adb8;
  --gw-off:5px 5px 0 var(--gw-edge);
  --gw-disp:'Space Grotesk','Space Grotesk Fallback',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --gw-sans:'Inter','Inter Fallback',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --gw-sh1:0 1px 4px rgba(10,12,16,.05);
  --gw-sh2:0 4px 16px rgba(10,12,16,.10);
  --gw-sh3:0 10px 28px rgba(10,12,16,.18);
  --gw-r:8px; --gw-rs:7px;
  --gw-t:180ms; --gw-ease:cubic-bezier(.16,1,.3,1);
  --gw-max:1120px;
}

*,*::before,*::after{box-sizing:border-box;}
.gwe{background:var(--gw-paper);color:var(--gw-body);font-family:var(--gw-sans);
  font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased;margin:0;}
.gwe h1,.gwe h2,.gwe h3{font-family:var(--gw-disp);color:var(--gw-ink);font-weight:700;
  letter-spacing:-.012em;margin:0;}
.gwe h1{font-size:clamp(30px,4.2vw,44px);line-height:1.12;}
.gwe h2{font-size:clamp(22px,2.6vw,29px);line-height:1.2;margin:0 0 .5rem;}
.gwe h3{font-size:18px;line-height:1.3;}
.gwe p{margin:.4rem 0;}
.gwe a{color:var(--gw-green-ink);text-decoration:none;}
.gwe a:hover{text-decoration:underline;text-underline-offset:3px;}
.gwe img{max-width:100%;height:auto;display:block;}
.gwe :focus-visible{outline:3px solid var(--gw-lime);outline-offset:2px;border-radius:4px;}

.gwe .wrap{max-width:var(--gw-max);margin:0 auto;padding:0 22px;}
.gwe{overflow-x:clip;}
.gwe .scanpanel,.gwe .pframe,.gwe .artimg{max-width:100%;}
.gwe .sec{padding:clamp(36px,5.5vw,64px) 0;}
.gwe .sec.tight{padding:clamp(22px,3.5vw,36px) 0;}
.gwe .kicker{font-family:var(--gw-disp);font-size:.68rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gw-green-ink);display:block;margin-bottom:.55rem;}
.gwe .lede{font-size:clamp(15.5px,1.5vw,17.5px);color:var(--gw-body);max-width:640px;}
.gwe .fine{font-size:.72rem;color:var(--gw-faint);line-height:1.55;}

/* ── masthead + ticker ─────────────────────────────────────────────── */
.gwe .ticker{background:var(--gw-ink);color:#e7e9ee;font-size:.74rem;overflow:hidden;white-space:nowrap;}
.gwe .ticker .tk{display:inline-block;padding:7px 0;animation:gweTick 46s linear infinite;}
.gwe .ticker a{color:#e7e9ee;margin-right:2.2rem;}
.gwe .ticker .sev{color:#fca5a5;font-weight:700;margin-right:.35rem;}
.gwe .ticker .dt{color:var(--gw-cyan);margin-left:.4rem;}
@keyframes gweTick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.gwe .masthead{background:rgba(255,255,255,.86);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--gw-hair);
  position:sticky;top:0;z-index:50;}
.gwe .masthead .row{display:flex;align-items:center;gap:1.4rem;height:60px;}
.gwe .brand{display:flex;align-items:center;gap:.6rem;font-family:var(--gw-sans);
  font-weight:800;font-size:1.13rem;color:var(--gw-ink);letter-spacing:-.022em;}
.gwe .brand b{font-weight:800;color:var(--gw-green-ink);}
/* app-icon tile: the mark on an ink rounded-square — product identity,
   clearly kin to (but distinct from) RB's serif newspaper masthead */
.gwe .brand .btile{width:32px;height:32px;border-radius:9px;background:#0b0d14;
  border:1px solid rgba(132,204,22,.55);display:grid;place-items:center;
  box-shadow:0 2px 8px rgba(10,12,16,.25);}
.gwe .brand .btile img{width:19px;height:19px;}
.gwe .mnav{display:flex;gap:1.15rem;font-size:.86rem;font-weight:600;color:var(--gw-mut);
  margin-left:auto;}
.gwe .mnav a{color:var(--gw-mut);}
.gwe .mnav a:hover{color:var(--gw-ink);text-decoration:none;}
.gwe .mcta{background:var(--gw-lime);color:var(--gw-ink);font-weight:700;font-size:.85rem;
  padding:.5rem .95rem;border-radius:var(--gw-rs);border:2px solid var(--gw-edge);
  box-shadow:2px 2px 0 var(--gw-edge);transition:background var(--gw-t) var(--gw-ease);}
.gwe .mcta:hover{background:var(--gw-lime-d);text-decoration:none;}
@media(max-width:760px){.gwe .mnav{display:none;}
  /* masthead fit (Brandon 07-15: mcta protruded off the nav) — the
     431-760 range kept desktop CTA size + 1.4rem row gap and the brand
     never shrank, so brand + hamburger + 'Run a free scan' overflowed
     the bar on phones. Compact all three and space-between the row. */
  .gwe .masthead .row{gap:.6rem;justify-content:space-between;height:56px;}
  .gwe .brand{font-size:1rem;flex-shrink:0;gap:.45rem;}
  .gwe .brand .btile img{width:26px;height:26px;}
  .gwe .mcta{font-size:.76rem;padding:.4rem .7rem;white-space:nowrap;
    min-height:40px;box-shadow:2px 2px 0 var(--gw-edge);}
  .gwe .mnav-d{flex-shrink:0;}
  .gwe .mnav-d summary{min-height:40px;padding:.35rem .6rem;}
}

/* ── hero: a BRAND ENVIRONMENT, not a layout (product-site pass) ──────
   The Incogni lesson applied with GW's own world: full-bleed ink canvas,
   layered lime glows + grain (background = artwork), the dark scan panels
   floating on it. The page then hands off to light content sections —
   dark environment → light proof, dark panels carrying the product. */
.gwe .herodark{position:relative;overflow:hidden;background:#0b0d14;}
.gwe .herodark::before{content:"";position:absolute;inset:0;
  background:
    radial-gradient(1000px 480px at 8% -12%, rgba(132,204,22,.16), transparent 58%),
    radial-gradient(820px 460px at 96% 108%, rgba(101,163,13,.14), transparent 60%),
    radial-gradient(520px 300px at 78% -6%, rgba(132,204,22,.08), transparent 55%);}
.gwe .herodark::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");}
.gwe .herodark > *{position:relative;z-index:1;}
.gwe .herodark h1{color:#f4f5f7;}
.gwe .herodark .lede{color:#b9bec9;}
.gwe .herodark .lede a{color:#bef264;}
.gwe .herodark .kicker{color:#a3e635;}
.gwe .herodark .uln svg path{stroke:#a3e635;}

/* the real product, replicated live: the DoxxScan scanning card —
   dark-band variant: lighter charcoal + hard offset (near-black edge) */
.gwe .scanpanel{background:#141926;
  border:2px solid var(--gw-edge-d);border-radius:var(--gw-r);
  box-shadow:6px 6px 0 var(--gw-edge-d);padding:1.15rem 1.15rem 1rem;
  font-family:var(--gw-sans);min-width:0;max-width:100%;overflow:hidden;}
.gwe .scanpanel .sp-pill{display:flex;align-items:center;gap:.5rem;background:#161927;
  border:1px solid rgba(251,146,60,.35);border-radius:10px;padding:.5rem .8rem;
  font-size:.76rem;font-weight:700;letter-spacing:.06em;color:#fdba74;}
.gwe .scanpanel .sp-pill i{width:8px;height:8px;border-radius:50%;background:#fb923c;
  animation:gwePulse 1.4s ease-in-out infinite;}
@keyframes gwePulse{0%,100%{opacity:1}50%{opacity:.35}}
.gwe .scanpanel .sp-h{color:#f1f5f9;font-weight:800;font-size:1.06rem;text-align:center;
  margin:.85rem 0 .1rem;}
.gwe .scanpanel .sp-h em{font-style:normal;color:#a3e635;}
.gwe .scanpanel .sp-s{color:#8a90a0;font-size:.74rem;text-align:center;margin:0 0 .8rem;}
.gwe .scanpanel .sstep{display:flex;align-items:center;gap:.6rem;background:#0e1120;
  border:1px solid #1c2133;border-radius:10px;padding:.55rem .75rem;margin:.42rem 0;
  font-size:.8rem;color:#6b7080;transition:border-color .3s var(--gw-ease),color .3s var(--gw-ease);}
.gwe .scanpanel .sstep .n{flex:0 0 auto;width:20px;height:20px;border-radius:50%;
  background:#1c2133;color:#8a90a0;display:grid;place-items:center;font-size:.66rem;font-weight:800;
  transition:background .3s,color .3s;}
.gwe .scanpanel .sstep.on{border-color:rgba(132,204,22,.5);color:#d9f99d;}
.gwe .scanpanel .sstep.on .n{background:#84cc16;color:#0b0d14;}
.gwe .scanpanel .sstep.done{color:#9ca3af;}
.gwe .scanpanel .sstep.done .n{background:#2c3247;color:#a3e635;}
.gwe .scanpanel .sp-chips{display:flex;gap:.4rem;overflow:hidden;margin-top:.7rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.gwe .scanpanel .sp-chips span{flex:0 0 auto;background:#131728;border:1px solid #222842;
  color:#aab0c0;font-size:.66rem;font-weight:700;border-radius:7px;padding:.3rem .55rem;}
.gwe .scanpanel .sp-track{display:flex;gap:.4rem;animation:gweChips 22s linear infinite;}
@keyframes gweChips{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* two-column section split with brand art */
.gwe .split2{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(20px,3.5vw,48px);
  align-items:center;}
@media(max-width:820px){.gwe .split2{grid-template-columns:1fr;}}
.gwe .artimg{width:100%;max-width:360px;height:auto;border-radius:14px;
  box-shadow:var(--gw-sh2);justify-self:center;}
.gwe .artimg.dark{box-shadow:0 18px 44px rgba(0,0,0,.5);}

/* full-bleed tinted band for section alternation (cool slate tint) */
.gwe .band-tint{background:#e9edf1;border-top:1px solid #dbe0e6;border-bottom:1px solid #dbe0e6;}
/* dark trust footer — product sites end in the brand world */
.gwe .tfoot.dark{background:#0b0d14;border-top:0;color:#b9bec9;}
.gwe .tfoot.dark .brand{color:#f4f5f7;}
.gwe .tfoot.dark h4{color:#6b7080;}
.gwe .tfoot.dark a{color:#8a90a0;}
.gwe .tfoot.dark a:hover{color:#d9f99d;}
.gwe .tfoot.dark .fine{color:#6b7080;}
.gwe .hero{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);
  align-items:center;}
.gwe .hero > *{min-width:0;}  /* streaming chips must not inflate the column */
@media(max-width:880px){.gwe .hero{grid-template-columns:1fr;}}
.gwe .hero .sub{margin:.9rem 0 1.2rem;}
/* editorial ink underline on the money phrase */
.gwe .uln{position:relative;white-space:nowrap;}
.gwe .uln svg{position:absolute;left:0;right:0;bottom:-.14em;width:100%;height:.34em;
  overflow:visible;}
.gwe .uln svg path{fill:none;stroke:var(--gw-lime);stroke-width:3;stroke-linecap:round;
  opacity:.9;vector-effect:non-scaling-stroke;
  stroke-dasharray:1;stroke-dashoffset:1;animation:gweInk .9s var(--gw-ease) .5s forwards;}
@keyframes gweInk{to{stroke-dashoffset:0;}}

/* ── scroll reveal + motion craft (the WOW layer) ─────────────────────
   Opacity/transform only, 480ms, standard ease, staggered via --d. */
/* 2026-07-15 Android/Brave fix: script blockers left every .rise at
   opacity:0 forever (video-verified on Brave Android, Shields script
   block). The hide now only applies when the head snippet proves JS is
   actually executing (html.gwjs). No JS => fully visible static page. */
html.gwjs .gwe .rise{opacity:0;transform:translateY(14px);
  transition:opacity .48s var(--gw-ease),transform .48s var(--gw-ease);
  transition-delay:var(--d,0ms);}
/* CWV 2026-07-15: above-the-fold reveals must not wait for JS/IO — LCP
   was gated behind the observer/2.5s failsafe. Hero rises play as pure
   CSS animation the moment styles apply. */
/* 2026-07-16 Android fix: the hero used `animation:...both` with a
   from{opacity:0} keyframe — if a mobile WebView throttles/stalls the
   animation (common during load/scroll), `both` fill left the hero stuck
   INVISIBLE (the reported dark void). Hero LCP content is now
   unconditionally visible; the slide-in is a transform-only enhancement
   that can NEVER hide content (opacity is 1 throughout). */
html.gwjs .gwe .herodark .rise{opacity:1 !important;transform:none;
  animation:gweHeroSlide .5s var(--gw-ease) both;animation-delay:var(--d,0ms);}
@keyframes gweHeroSlide{from{transform:translateY(14px)}
  to{transform:none}}
@keyframes gweRiseIn{from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}}
/* ── BRAND HALLMARK (Brandon 07-15): small shield-G stamp, top-right,
   on every technical surface — bands, scanner panels, globe/radar.
   Quiet maker's mark, not a background. ── */
.gwe .inkband,.gwe .pipeband,.gwe .scanpanel{position:relative;}
.gwe .inkband::after,.gwe .pipeband::after,.gwe .scanpanel::after{
  content:"";position:absolute;top:14px;right:16px;width:30px;height:30px;
  background:url('/static/brand/gw-mark-lime.svg') no-repeat center/contain;
  opacity:.5;pointer-events:none;z-index:2;}
.gwe .inkband>*,.gwe .pipeband>*{position:relative;z-index:1;}

.gwe .rise.in{opacity:1;transform:none;}
.gwe .no-io .rise{opacity:1;transform:none;}  /* JS-less fallback */
/* 2026-07-21 hover fix: the .rise entrance rule (html.gwjs .gwe .rise) has
   higher specificity than .gwe .ocard, so it won the `transition` property —
   but it only transitioned opacity+transform (NOT box-shadow) and carried the
   stagger `transition-delay:var(--d)`. Result on hover: the offset shadow
   snapped 5px->7px instantly while the card crawled up-left after a delay —
   the reported "backwards/bugged" hover. Once revealed (.in) or in the no-IO
   fallback, restore a snappy symmetric transition that includes box-shadow. */
html.gwjs .gwe .rise.in,
html.gwjs .gwe .no-io .rise{
  transition:transform .18s var(--gw-ease),box-shadow .18s var(--gw-ease),
             opacity .3s var(--gw-ease);
  transition-delay:0s;}
/* hover lifts — brutalist pattern: card slides up-left, offset shadow grows */
.gwe .pcell,.gwe .tstep,.gwe .rev,.gwe .ocard{
  transition:transform .2s var(--gw-ease),box-shadow .2s var(--gw-ease),
             opacity .48s var(--gw-ease);}
.gwe .pcell:hover,.gwe .tstep:hover,.gwe .rev:hover{transform:translate(-2px,-2px);
  box-shadow:7px 7px 0 var(--gw-edge);}
.gwe .ocard:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--gw-edge);}
.gwe .btn{will-change:transform;}
.gwe .btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--gw-edge);}
.gwe .btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--gw-edge);}
/* live report theater: rows fade themselves in on load, then the scan line
   sweeps. Runs on load (no scroll-JS dependency) with `both` fill so rows
   ALWAYS end visible even if the animation never plays; reduced-motion and
   no-CSS-animation clients get instantly-visible rows via the guards below. */
.gwe .pframe .rrow{animation:gweRow .5s var(--gw-ease) both;}
.gwe .pframe .rrow:nth-child(1){animation-delay:.10s}
.gwe .pframe .rrow:nth-child(2){animation-delay:.30s}
.gwe .pframe .rrow:nth-child(3){animation-delay:.50s}
.gwe .pframe .rrow:nth-child(4){animation-delay:.70s}
.gwe .pframe .rrow:nth-child(5){animation-delay:.90s}
.gwe .pframe .rrow:nth-child(6){animation-delay:1.10s}
@keyframes gweRow{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){
  .gwe .pframe .rrow{animation:none;opacity:1;transform:none;}
}
.gwe .pf-scan{position:relative;height:3px;background:var(--gw-hair);border-radius:2px;
  overflow:hidden;margin:.65rem .1rem .15rem;}
.gwe .pf-scan i{position:absolute;top:0;bottom:0;left:-30%;width:30%;border-radius:2px;
  background:var(--gw-lime);animation:gweScan 2.4s var(--gw-ease) infinite;}
@keyframes gweScan{0%{left:-30%}60%{left:100%}100%{left:100%}}
.gwe .pf-cap{font-size:.66rem;color:var(--gw-faint);padding:0 .1rem .2rem;}

/* scanbox — the hero product, now a dark scanner terminal:
   dark panel + hard offset, the email input stays white for contrast */
.gwe .scanbox{background:var(--gw-panel);border:2px solid var(--gw-edge);border-radius:var(--gw-r);
  box-shadow:var(--gw-off);padding:1.15rem 1.15rem 1rem;max-width:520px;}
.gwe .scanbox .sb-l{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gw-pmut);margin-bottom:.6rem;}
.gwe .scanbox form{display:flex;gap:.55rem;flex-wrap:wrap;}
.gwe .scanbox input{flex:1 1 220px;border:2px solid var(--gw-edge);border-radius:var(--gw-rs);
  padding:.78rem .9rem;font-size:.95rem;font-family:inherit;color:var(--gw-ink);background:#fff;}
.gwe .scanbox input::placeholder{color:var(--gw-faint);}
.gwe .btn{border:2px solid var(--gw-edge);cursor:pointer;background:var(--gw-lime);
  color:var(--gw-ink);font-weight:800;
  font-size:.95rem;font-family:inherit;padding:.78rem 1.15rem;border-radius:var(--gw-rs);
  box-shadow:3px 3px 0 var(--gw-edge);
  transition:background var(--gw-t) var(--gw-ease),transform 120ms var(--gw-ease),
             box-shadow 120ms var(--gw-ease);}
.gwe .btn:hover{background:var(--gw-lime-d);}
.gwe .btn[disabled]{opacity:.65;cursor:default;}
/* ghost buttons live on dark cards: light border, light text, flat */
.gwe .btn.ghost{background:transparent;border:2px solid var(--gw-pmut);color:var(--gw-ptxt);
  font-weight:600;box-shadow:none;}
.gwe .btn.ghost:hover{background:rgba(255,255,255,.07);border-color:var(--gw-ptxt);
  box-shadow:none;transform:none;}
.gwe .scanbox .sb-fine{margin:.65rem 0 0;}
.gwe .scanbox .sb-err{display:none;color:#fca5a5;font-size:.82rem;margin-top:.5rem;}

/* product frame (screenshot chrome) — light, sits on light sections only */
.gwe .pframe{background:var(--gw-card);border:1px solid var(--gw-hair);border-radius:12px;
  box-shadow:var(--gw-sh3);overflow:hidden;}
.gwe .pframe .pf-bar{display:flex;align-items:center;gap:.35rem;background:#eceff2;
  border-bottom:1px solid var(--gw-hair);padding:.5rem .75rem;}
.gwe .pframe .pf-bar i{width:9px;height:9px;border-radius:50%;background:var(--gw-hair2);}
.gwe .pframe .pf-bar span{font-size:.68rem;color:var(--gw-faint);margin-left:.4rem;}
.gwe .pframe .pf-body{padding:1rem;}
.gwe .rrow{display:flex;justify-content:space-between;align-items:center;gap:.6rem;
  border-bottom:1px solid var(--gw-hair);padding:.5rem .1rem;font-size:.84rem;}
.gwe .rrow:last-child{border-bottom:0;}
.gwe .rrow .k{color:var(--gw-body);font-weight:600;}
.gwe .badge{font-size:.66rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:.18rem .5rem;border-radius:999px;}
.gwe .badge.ok{background:var(--gw-ok-bg);color:var(--gw-green-ink);}
.gwe .badge.sent{background:#eef1f6;color:#42506b;}
.gwe .badge.risk{background:var(--gw-danger-bg);color:var(--gw-danger);}

/* ── proof strip — dark stat panels, Space Grotesk numerals ─────────── */
.gwe .proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;}
.gwe .proof .pcell{background:var(--gw-panel);border:2px solid var(--gw-edge);
  border-radius:var(--gw-r);padding:1rem 1.1rem;box-shadow:var(--gw-off);}
.gwe .proof .pn{font-family:var(--gw-disp);font-size:clamp(24px,2.6vw,32px);font-weight:700;
  color:var(--gw-ptxt);font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
.gwe .proof .pl{font-size:.8rem;color:var(--gw-pmut);margin-top:.15rem;}
.gwe .proof .ps{font-size:.68rem;color:var(--gw-faint);margin-top:.35rem;}

/* ── timeline — dark step panels ───────────────────────────────────── */
.gwe .tl{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;
  counter-reset:gwstep;}
.gwe .tl .tstep{background:var(--gw-panel);border:2px solid var(--gw-edge);
  border-radius:var(--gw-r);padding:1rem 1.05rem;box-shadow:var(--gw-off);position:relative;}
.gwe .tl .tstep::before{counter-increment:gwstep;content:counter(gwstep);
  display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--gw-lime);color:var(--gw-edge);font-size:.72rem;font-weight:800;margin-bottom:.5rem;}
.gwe .tl .td{font-size:.7rem;font-weight:800;color:#a3e635;letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:.2rem;}
.gwe .tl h3{font-size:.98rem;font-family:var(--gw-sans);font-weight:700;color:var(--gw-ptxt);}
.gwe .tl p{font-size:.84rem;color:var(--gw-pmut);margin:.3rem 0 0;}

/* ── outcomes + glyph system ───────────────────────────────────────────
   One proprietary illustration language (the Incogni/Optery lesson):
   duotone ink+lime geometric glyphs, grain-textured — the tile stays
   LIGHT on the dark outcome panel so the ink glyph shapes keep reading. */
.gwe .glyph{width:54px;height:54px;border-radius:14px;background:var(--gw-ok-bg);
  display:grid;place-items:center;margin-bottom:.7rem;position:relative;overflow:hidden;}
.gwe .glyph::after{content:"";position:absolute;inset:0;opacity:.14;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23n)'/%3E%3C/svg%3E");}
.gwe .glyph svg{width:32px;height:32px;}
.gwe .outcomes{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;}
.gwe .outcome{background:var(--gw-panel);border:2px solid var(--gw-edge);
  border-radius:var(--gw-r);padding:1.15rem 1.15rem 1.05rem;box-shadow:var(--gw-off);
  transition:transform .2s var(--gw-ease),box-shadow .2s var(--gw-ease),
             opacity .48s var(--gw-ease);}
.gwe .outcome:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--gw-edge);}
.gwe .outcome h3{font-family:var(--gw-sans);font-size:.98rem;font-weight:700;color:var(--gw-ptxt);}
.gwe .outcome p{font-size:.85rem;color:var(--gw-pmut);margin:.35rem 0 0;}

/* ── audience toggle + gamer (cyberpunk) mode ─────────────────────────
   Audience self-selection: [Everyone | For gamers]. Gamer mode re-skins
   the outcomes into GW's dark world with neon cyan/lime — tasteful:
   static scanlines, no pulsing, reduced-motion safe. */
.gwe .aud-toggle{display:inline-flex;background:var(--gw-card);border:1px solid var(--gw-hair2);
  border-radius:999px;padding:4px;gap:2px;margin:.2rem 0 .2rem;}
.gwe .aud-toggle button{border:0;background:transparent;cursor:pointer;font-family:inherit;
  font-size:.82rem;font-weight:700;color:var(--gw-mut);padding:.45rem 1rem;border-radius:999px;
  transition:background var(--gw-t) var(--gw-ease),color var(--gw-t) var(--gw-ease);}
.gwe .aud-toggle button.on{background:var(--gw-ink);color:#d9f99d;}
.gwe .outwrap{border-radius:18px;transition:background .35s var(--gw-ease);padding:0;}
.gwe .outwrap .gset{display:none;}
.gwe .outwrap .gset.on{display:block;}
.gwe .outwrap.gamer{background:#0b0d14;padding:clamp(18px,3vw,34px);position:relative;
  overflow:hidden;box-shadow:var(--gw-sh3);}
.gwe .outwrap.gamer::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;
  background:repeating-linear-gradient(0deg,transparent 0 3px,#22d3ee 3px 4px);}
.gwe .outwrap.gamer > *{position:relative;z-index:1;}
.gwe .outwrap.gamer .kicker{color:#22d3ee;letter-spacing:.18em;}
.gwe .outwrap.gamer h2{color:#eafcff;}
.gwe .outwrap.gamer .outcome{background:#151a24;border-color:rgba(34,211,238,.28);
  box-shadow:5px 5px 0 var(--gw-edge-d);}
.gwe .outwrap.gamer .outcome:hover{border-color:rgba(34,211,238,.55);
  box-shadow:7px 7px 0 var(--gw-edge-d);}
.gwe .outwrap.gamer .outcome h3{color:#e7f9ff;}
.gwe .outwrap.gamer .outcome p{color:#8a94a8;}
.gwe .outwrap.gamer .glyph{background:#0d1720;border:1px solid rgba(34,211,238,.25);}
.gwe .outwrap.gamer .gtag{display:inline-block;font-size:.62rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:#22d3ee;background:rgba(34,211,238,.1);
  border:1px solid rgba(34,211,238,.3);border-radius:5px;padding:.14rem .45rem;margin-bottom:.45rem;}

/* ── ink chapter band (Incogni annual-plan pattern) ──────────────────── */
.gwe .inkband{background:var(--gw-ink);border-radius:18px;color:#e7e9ee;
  position:relative;overflow:hidden;padding:clamp(28px,4vw,52px) clamp(22px,4vw,56px);
  display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center;
  box-shadow:var(--gw-sh3);}
@media(max-width:760px){.gwe .inkband{grid-template-columns:1fr;}}
.gwe .inkband::before{content:"";position:absolute;inset:0;
  background:radial-gradient(620px 320px at 88% 110%, rgba(132,204,22,.22), transparent 60%);}
.gwe .inkband::after{content:"";position:absolute;inset:0;opacity:.06;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");}
.gwe .inkband > *{position:relative;z-index:1;}
.gwe .inkband h2{color:#fff;}
.gwe .inkband p{color:#b9bec9;font-size:.92rem;max-width:480px;}
.gwe .inkband .art{display:grid;place-items:center;}
.gwe .inkband .art canvas{width:min(280px,64vw);height:min(280px,64vw);}

/* depth: tinted panel offset behind the offer (Optery layering).
   CONSCIOUSLY LEFT LIGHT: ink headline + fine print overlap this pseudo-
   element, so a dark backdrop would kill their contrast without a layout
   change. Cooled from warm green to slate to match the new paper. */
.gwe .depth{position:relative;}
.gwe .depth::before{content:"";position:absolute;inset:38px -14px -26px 30%;
  background:#e6eaef;border-radius:20px;z-index:0;}
.gwe .depth > *{position:relative;z-index:1;}

/* links inside dark panels: the paper green-ink link is illegible there —
   flip to light lime (matches herodark lede links) */
.gwe .scanbox a,.gwe .pcell a,.gwe .tstep a,.gwe .outcome a,
.gwe .rev a,.gwe details a,.gwe .ocard a:not(.btn){color:#bef264;}

/* ── offer ─────────────────────────────────────────────────────────── */
.gwe .offer{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:860px;margin:0 auto;}
@media(max-width:720px){.gwe .offer{grid-template-columns:1fr;}}
.gwe .ocard{background:var(--gw-panel);border:2px solid var(--gw-edge);border-radius:var(--gw-r);
  padding:1.4rem 1.3rem;box-shadow:var(--gw-off);color:#ccd2dc;}
.gwe .ocard.lead{border-color:var(--gw-lime-d);}
.gwe .oprice{font-family:var(--gw-disp);font-size:34px;font-weight:700;color:var(--gw-ptxt);
  letter-spacing:-.02em;}
.gwe .oprice small{font-size:.82rem;font-weight:600;color:var(--gw-pmut);margin-left:.35rem;}
.gwe .ocard ul{list-style:none;margin:.8rem 0 1rem;padding:0;}
.gwe .ocard li{font-size:.87rem;padding:.3rem 0 .3rem 1.4rem;position:relative;}
.gwe .ocard li::before{content:"✓";position:absolute;left:.1rem;color:var(--gw-lime);
  font-weight:800;}
.gwe .btn.block{display:block;width:100%;text-align:center;}

/* ── reviews (Trustpilot strip, Incogni pattern) / faq / footer ─────── */
.gwe .revstrip{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:.2rem .2rem .8rem;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:var(--gw-hair2) transparent;}
.gwe .rev{flex:0 0 min(300px,82vw);scroll-snap-align:start;background:var(--gw-panel);
  border:2px solid var(--gw-edge);border-radius:var(--gw-r);
  padding:1.05rem 1.1rem;box-shadow:var(--gw-off);display:flex;flex-direction:column;}
.gwe .rev q{font-family:var(--gw-sans);font-size:.93rem;color:var(--gw-ptxt);line-height:1.5;
  quotes:"\201C" "\201D";flex:1 1 auto;}
.gwe .rev .who{font-size:.76rem;color:var(--gw-pmut);margin-top:.7rem;font-weight:600;}
.gwe .tp-stars{display:flex;gap:2px;margin-bottom:.55rem;}
.gwe .tp-stars i{width:16px;height:16px;background:#00b67a;display:grid;place-items:center;
  color:#fff;font-size:10px;font-style:normal;}
.gwe .tp-stars i::before{content:"\2605";}
.gwe .tp-line{display:flex;align-items:center;gap:.45rem;font-size:.8rem;color:var(--gw-mut);
  margin-top:.4rem;}
.gwe .tp-line .tpmark{color:#00b67a;font-weight:800;}
.gwe details{background:var(--gw-panel);border:2px solid var(--gw-edge);border-radius:var(--gw-r);
  box-shadow:var(--gw-off);padding:.85rem 1rem;margin-bottom:.75rem;max-width:760px;}
/* the masthead disclosure is a <details> too — the FAQ dark-panel rule
   above painted it as a charcoal blob on the white bar (Brandon 07-15) */
.gwe details.mnav-d{background:transparent;border:0;box-shadow:none;
  padding:0;margin:0;max-width:none;border-radius:0;}
.gwe details.mnav-d summary{color:var(--gw-ink);font-size:.85rem;}
.gwe summary{font-weight:700;font-size:.92rem;color:var(--gw-ptxt);cursor:pointer;}
.gwe details p{font-size:.87rem;color:#b8bfc9;margin:.55rem 0 0;}
.gwe .tfoot .brand img,.gwe .tfoot img{width:28px;height:28px;flex-shrink:0;}
.gwe .tfoot{border-top:1px solid var(--gw-hair);background:var(--gw-card);
  padding:2.2rem 0 2.6rem;margin-top:1rem;}
.gwe .tfoot .cols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:1.6rem;font-size:.84rem;}
@media(max-width:760px){.gwe .tfoot .cols{grid-template-columns:1fr 1fr;}}
.gwe .tfoot h4{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gw-faint);margin:0 0 .5rem;}
.gwe .tfoot a{display:block;color:var(--gw-mut);padding:.14rem 0;}

/* motion discipline */
@media(prefers-reduced-motion:reduce){
  .gwe *,.gwe *::before,.gwe *::after{animation:none!important;transition:none!important;}
}

/* ── engine pipeline (the 15 seconds, dramatized) ─────────────────────
   Full-bleed ink band; five nodes under an animated data-flow rail. A
   lime packet travels the rail; nodes light as it passes. Reduced-motion
   renders everything static and lit. */
.gwe .pipeband{background:#0b0d14;position:relative;overflow:hidden;}
.gwe .pipeband::before{content:"";position:absolute;inset:0;
  background:radial-gradient(800px 400px at 50% -20%, rgba(132,204,22,.10), transparent 60%);}
.gwe .pipeband::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");}
.gwe .pipeband > *{position:relative;z-index:1;}
.gwe .pipeflow{position:relative;height:3px;margin:1.6rem 0 1.2rem;border-radius:2px;
  background:repeating-linear-gradient(90deg,#242a3d 0 10px,transparent 10px 18px);}
.gwe .pipeflow i{position:absolute;top:50%;left:0;width:10px;height:10px;margin-top:-5px;
  border-radius:50%;background:#a3e635;box-shadow:0 0 12px rgba(163,230,53,.8);
  animation:gwePacket 6s linear infinite;}
@keyframes gwePacket{0%{left:0;opacity:0}6%{opacity:1}94%{opacity:1}100%{left:calc(100% - 10px);opacity:0}}
.gwe .pipe{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;}
/* nodes sit on the ink band already — lighter charcoal + hard offset */
.gwe .pnode{background:var(--gw-panel-2);border:2px solid var(--gw-edge-d);border-radius:var(--gw-r);
  box-shadow:5px 5px 0 var(--gw-edge-d);
  padding:1rem 1rem .9rem;transition:transform .2s var(--gw-ease),border-color .2s var(--gw-ease),
  box-shadow .2s var(--gw-ease),opacity .48s var(--gw-ease);}
.gwe .pnode:hover{transform:translate(-2px,-2px);border-color:rgba(163,230,53,.45);
  box-shadow:7px 7px 0 var(--gw-edge-d);}
.gwe .pnode .pn-n{display:inline-grid;place-items:center;width:22px;height:22px;
  border-radius:50%;background:#a3e635;color:#0b0d14;font-size:.72rem;font-weight:800;
  margin-bottom:.55rem;}
.gwe .pnode h3{font-family:var(--gw-sans);font-size:.92rem;font-weight:700;color:#e7e9ee;}
.gwe .pnode p{font-size:.78rem;line-height:1.5;color:#8a90a0;margin:.35rem 0 0;}
@media(prefers-reduced-motion:reduce){.gwe .pipeflow i{animation:none;left:calc(50% - 5px);}}

/* globe terminal feed — one line, cyber register, never a text pile */
.gwe .globefeed{margin-top:.8rem;text-align:center;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.72rem;font-weight:700;letter-spacing:.09em;color:#a3e635;min-height:1.2em;
  text-transform:uppercase;transition:color .3s var(--gw-ease);}
.gwe .gf-caret{display:inline-block;width:7px;height:12px;background:currentColor;
  margin-left:5px;vertical-align:-1px;animation:gweCaret 1s steps(1) infinite;}
@keyframes gweCaret{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.gwe .gf-caret{animation:none;}}

/* ── mobile pass (2026-07-15) ─────────────────────────────────────────
   Small-screen refinements only: every rule below is either inside a
   max-width media query or inert on desktop (.mnav-d markup is new and
   display:none above 760px; canvas max-width never binds at desktop
   sizes because all canvases are container-sized there). */
/* canvases (globe/radar) scale to their container; width/height attrs
   keep the aspect ratio when height computes to auto */
.gwe canvas{max-width:100%;height:auto;}
/* masthead disclosure — hidden wherever .mnav is visible */
.gwe .mnav-d{display:none;}

@media(max-width:768px){
  /* comfortable tap targets */
  .gwe .btn{min-height:44px;}
  .gwe .mcta{display:inline-flex;align-items:center;min-height:44px;}
  .gwe .aud-toggle button,.gwe .scanbox .sb-types button{min-height:44px;}
  .gwe summary{padding:.55rem 0;}
}

@media(max-width:760px){
  /* CSS-only nav disclosure: same 5 links as .mnav, mcta stays visible */
  .gwe .mnav-d{display:block;position:relative;margin-left:auto;}
  .gwe .mnav-d summary{list-style:none;cursor:pointer;display:inline-flex;
    align-items:center;gap:.45rem;min-height:44px;padding:.4rem .8rem;
    border:2px solid var(--gw-edge);border-radius:var(--gw-rs);
    background:var(--gw-paper);color:var(--gw-ink);font-size:.85rem;font-weight:700;
    box-shadow:2px 2px 0 var(--gw-edge);-webkit-user-select:none;user-select:none;}
  .gwe .mnav-d summary::-webkit-details-marker{display:none;}
  .gwe .mnav-d summary::marker{content:"";}
  .gwe .mnav-d .mn-i{width:14px;height:10px;flex:0 0 auto;
    background:linear-gradient(var(--gw-ink) 0 2px,transparent 2px 4px,
      var(--gw-ink) 4px 6px,transparent 6px 8px,var(--gw-ink) 8px 10px);}
  .gwe .mnav-d[open] summary{background:var(--gw-lime);}
  .gwe .mnav-d .mnav-dl{position:absolute;right:0;top:calc(100% + 8px);
    min-width:216px;background:var(--gw-paper);border:2px solid var(--gw-edge);
    border-radius:var(--gw-r);box-shadow:4px 4px 0 var(--gw-edge);
    padding:.35rem;z-index:60;}
  .gwe .mnav-d .mnav-dl a{display:flex;align-items:center;min-height:44px;
    padding:.55rem .8rem;color:var(--gw-ink);font-size:.92rem;font-weight:600;
    border-radius:6px;}
  .gwe .mnav-d .mnav-dl a:hover{background:var(--gw-hair);text-decoration:none;}
}

@media(max-width:560px){
  /* scanbox: input + button stack full-width */
  .gwe .scanbox form{flex-direction:column;}
  .gwe .scanbox input,.gwe .scanbox form .btn{width:100%;flex:1 1 auto;}
}

@media(max-width:430px){
  /* hard offset shadows shrink 5px→3px so stacked panels don't crowd */
  .gwe{--gw-off:3px 3px 0 var(--gw-edge);}
  .gwe .scanpanel{box-shadow:4px 4px 0 var(--gw-edge-d);}
  .gwe .pnode{box-shadow:3px 3px 0 var(--gw-edge-d);}
  /* hero display scale below the clamp() floor */
  .gwe h1{font-size:clamp(26px,7.5vw,30px);}
  /* single-column stacks: proof strip, engine-theater rail, timeline */
  .gwe .proof,.gwe .pipe,.gwe .tl{grid-template-columns:1fr;}
  /* masthead: tighter row so brand + menu + mcta fit 360–430px */
  .gwe .masthead .row{gap:.55rem;}
  .gwe .mcta{font-size:.78rem;padding:.45rem .65rem;white-space:nowrap;}
  .gwe .mnav-d summary{padding:.4rem .55rem;}
  .gwe .mnav-d .mn-t{display:none;}
  /* footer columns stack single-column */
  .gwe .tfoot .cols{grid-template-columns:1fr;}
  /* FAQ cards keep breathing room at the narrowest widths */
  .gwe details{padding:.8rem .85rem;}
}