/* ==========================================================================
   Google Ads industry pages, September 2026 redesign (Trades first). Built
   on ind-wdp.css (the approved web design pages); this file holds what is
   new for Google Ads: the live-auction hero, the forked 41 second
   storyboard, the eight rule pictures, the leaky pipe, the two budget
   receipts, the seven step track, the exploded ad, the example flows,
   the tap and the wall (ads against SEO), and the three ways to start.
   Transforms and opacity for motion; no backdrop-filter anywhere.
   ========================================================================== */
.gx .gi-c11{background:linear-gradient(100deg,#F4A000 20%,#FFD27A 45%,#F4A000 70%);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:wdpSheen 7s ease-in-out infinite}
.gx-sr{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@keyframes gxBlink{50%{opacity:0}}
@keyframes gxRowIn{from{opacity:0;transform:translateY(10px)}}
@keyframes gxRing{0%,100%{transform:none}20%{transform:rotate(-14deg) scale(1.1)}40%{transform:rotate(12deg) scale(1.1)}60%{transform:rotate(-8deg)}80%{transform:rotate(5deg)}}
@keyframes gxVoice{50%{transform:scaleY(1)}}
@keyframes gxPulse{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(1.6)}}
@keyframes gxDash{to{stroke-dashoffset:-40}}
@keyframes gxGrow{from{width:0}}
.gx-tap{position:absolute;right:-7px;bottom:-7px;width:22px;height:22px;border-radius:50%;border:2px solid #fff;opacity:0;pointer-events:none}
@keyframes gxTap{0%,55%{opacity:0;transform:scale(1.8)}62%{opacity:1;transform:scale(1)}70%{opacity:.9;transform:scale(.85)}82%,100%{opacity:0;transform:scale(1.4)}}
/* a pictured search bar keeps its width (the full width of its slot) while
   the query types: the words sit left and the caret hugs the last letter.
   Never an ellipsis, never two lines: ind-gax.js sizes the words down once,
   for the whole query, when it would not fit */
.gx-search{display:flex;align-items:center;width:100%;min-width:0;height:44px;padding:0 16px 0 14px;border-radius:100px;border:1px solid var(--gold-line);
  background:#181B21;color:var(--gold);font-size:14px;white-space:nowrap;box-shadow:0 0 0 4px rgba(244,160,0,.06)}
.gx-search__ic{display:grid;flex:0 0 auto;margin-right:9px}
.gx-search__ic svg{display:block;width:17px;height:17px}
.gx-search__q{flex:0 0 auto;color:var(--text);font-weight:500;white-space:nowrap}
.gx-caret{flex:0 0 auto;width:2px;height:1.25em;margin-left:1px;border-radius:1px;background:var(--gold);animation:gxBlink 1s steps(2) infinite}
.gx-note{margin:22px 0 0;max-width:820px;font-size:14px;line-height:1.6;color:var(--text-dim)}
.gx-note--c{margin-inline:auto;text-align:center}
.gx-toolnote{margin:12px 0 0;max-width:860px;font-size:16px;line-height:1.6;color:var(--text-mid)}
.gx-toolnote a,.gx-link{color:var(--gold);font-weight:600}
.gx-link{display:inline-block;margin-top:12px}

/* ==========================================================================
   HERO: the live auction. The query types into a bar that hugs it, the
   bids land (yours is not the highest; your ad rank is), your ad takes the
   top of the page, the call button is tapped and the call runs
   ========================================================================== */
.gx-tagline{margin:-6px 0 14px;font-family:var(--font-head);font-weight:700;font-size:clamp(18px,1.6vw,22px);color:var(--text)}
.gx-auction{position:relative;min-height:604px;border-radius:34px;border:1px solid var(--edge-2);overflow:hidden;isolation:isolate;
  background:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px) 0 0 / 100% 40px,linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px) 0 0 / 40px 100%,#0A0C10;
  box-shadow:0 60px 120px -60px rgba(0,0,0,.95)}
.gx-au__halo{position:absolute;z-index:-1;right:-90px;top:-40px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(244,160,0,.16),transparent 62%);pointer-events:none}
.gx-au__phone{position:absolute;right:28px;top:34px;display:flex;flex-direction:column;gap:12px;width:284px;height:536px;padding:12px 12px 0;border-radius:46px;
  border:1px solid rgba(255,255,255,.16);background:#0E1015;overflow:hidden;
  box-shadow:inset 0 0 0 7px #06070A,inset 0 0 0 8px rgba(255,255,255,.06),0 50px 90px -34px #000}
.gx-au__status{display:flex;align-items:center;justify-content:space-between;flex:0 0 auto;height:30px;padding:6px 22px 0;font:700 13px/1 var(--font-head);color:var(--text)}
.gx-au__island{width:84px;height:24px;border-radius:14px;background:#000}
.gx-au__sig{display:flex;align-items:flex-end;gap:2px;height:11px}
.gx-au__sig i{width:3px;height:5px;border-radius:1px;background:var(--text)}
.gx-au__sig i:nth-child(2){height:8px}.gx-au__sig i:nth-child(3){height:11px}
.gx-au__bar{display:flex;padding:4px 6px 0}
.gx-au__serp{list-style:none;margin:0;padding:0 6px;display:grid;gap:9px}
.gx-au__ad{position:relative;display:grid;gap:6px;padding:12px 13px 13px;border-radius:16px;border:1px solid var(--edge);background:#14171C}
.gx-au__ad.is-you{border-color:var(--gold-line);background:linear-gradient(180deg,rgba(244,160,0,.13),rgba(244,160,0,.035));box-shadow:0 0 0 1px rgba(244,160,0,.16),0 18px 40px -18px rgba(244,160,0,.5)}
.gx-au__meta{display:flex;flex-wrap:wrap;align-items:center;gap:3px 7px;min-width:0;font-size:11.5px;line-height:1.3;color:var(--text-dim)}
.gx-au__meta .is-plabel{font-weight:800;color:var(--text)}
.gx-au__meta .is-you{padding:1px 7px;border-radius:100px;background:var(--gold);color:#111;font-weight:700}
.gx-au__t{margin-right:50px;font-size:15px;line-height:1.3;color:var(--text)}
.gx-au__lines{display:grid;gap:5px}
.is-you > .gx-au__lines{margin-right:50px}
.gx-au__lines i{height:5px;width:88%;border-radius:3px;background:rgba(255,255,255,.12)}
.gx-au__lines i.s{width:58%;opacity:.6}
.gx-au__call{position:absolute;right:12px;bottom:12px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--gold);color:#111;box-shadow:0 8px 20px -6px rgba(244,160,0,.7)}
.gx-au__call svg{width:18px;height:18px}
.gx-au__tap{position:absolute;inset:-6px;border-radius:50%;border:2px solid #fff;opacity:0}
.gx-au__org{display:grid;gap:7px;padding:10px 13px}
.gx-au__org i{height:6px;width:92%;border-radius:3px;background:rgba(255,255,255,.07)}
.gx-au__org i:nth-child(2){width:74%}.gx-au__org i.s{width:48%}
.gx-au__board{position:absolute;z-index:2;left:20px;top:104px;display:grid;gap:14px;width:246px;padding:16px 16px 18px;border-radius:22px;border:1px solid var(--edge-2);background:#101318;
  box-shadow:0 40px 70px -28px rgba(0,0,0,.95)}
.gx-au__k{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.gx-au__k i{position:relative;width:8px;height:8px;border-radius:50%;background:var(--coral)}
.gx-au__k i::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid var(--coral);animation:gxPulse 1.6s ease-out infinite}
.gx-au__bid{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:6px 9px}
.gx-au__who{grid-column:2 / -1}
.gx-au__amt{grid-column:3;grid-row:2}
.gx-au__pos{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.08);font:800 11px/1 var(--font-head);font-style:normal;color:var(--text-mid);
  transition:opacity .4s,transform .45s cubic-bezier(.34,1.6,.5,1),background .4s}
.gx-au__bid.is-you .gx-au__pos{background:var(--gold);color:#111;box-shadow:0 0 14px rgba(244,160,0,.6)}
.gx-au__who{min-width:0;overflow:hidden;white-space:nowrap;font-size:12.5px;color:var(--text-soft)}
.gx-au__bid.is-you .gx-au__who{font-weight:700;color:var(--text)}
.gx-au__amt{font:700 14px/1 var(--font-head);font-variant-numeric:tabular-nums;color:var(--text-mid)}
.gx-au__bid.is-you .gx-au__amt{color:var(--gold)}
.gx-au__rank{grid-column:2;grid-row:2;height:8px;border-radius:8px;background:rgba(255,255,255,.07);overflow:hidden}
.gx-au__rank i{display:block;width:var(--rank);height:100%;border-radius:inherit;background:rgba(255,255,255,.28);transition:width 1.3s var(--ease) calc(var(--i) * .12s)}
.gx-au__bid.is-you .gx-au__rank i{background:linear-gradient(90deg,#F4A000,#FFD27A);box-shadow:0 0 12px rgba(244,160,0,.6)}
.gx-au__ring{position:absolute;z-index:2;left:20px;top:330px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:6px 12px;width:246px;padding:14px 16px;
  border-radius:20px;border:1px solid var(--teal-line);background:#0F1A18;box-shadow:0 30px 60px -24px rgba(0,0,0,.95)}
.gx-au__ring-ic{grid-row:span 2;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--teal);color:#0A1512;animation:gxRing 1.4s ease infinite}
.gx-au__ring-ic svg{width:20px;height:20px}
.gx-au__ring-who{grid-column:2 / -1;min-width:0;overflow:hidden;white-space:nowrap;font-size:13px;font-weight:600;color:var(--text)}
.gx-au__ring b{grid-column:3;grid-row:2;font:800 18px/1 var(--font-head);font-variant-numeric:tabular-nums;color:var(--teal)}
.gx-au__wave{grid-column:2;grid-row:2;display:flex;align-items:center;gap:3px;height:22px}
.gx-au__wave i{flex:1;height:100%;border-radius:2px;background:var(--teal);opacity:.8;transform:scaleY(.3);animation:gxVoice 1s ease-in-out infinite;animation-delay:calc(var(--i) * -.13s)}
.gx-auction__cap{position:absolute;z-index:2;left:24px;bottom:34px;width:216px;margin:0;padding-left:14px;border-left:2px solid var(--gold);font-family:var(--font-head);font-weight:700;font-size:17px;line-height:1.35;color:var(--text);text-wrap:balance}
/* the loop (ind-gax.js adds .is-run, then each beat); without it the finished frame shows */
.gx-auction.is-run .gx-au__rank i{width:0}
.gx-auction.is-run.is-bid .gx-au__rank i{width:var(--rank)}
.gx-auction.is-run .gx-au__pos{opacity:0;transform:scale(.4)}
.gx-auction.is-run.is-won .gx-au__pos{opacity:1;transform:none}
.gx-auction.is-run .gx-au__serp > li{opacity:.14;transform:translateY(-6px);transition:opacity .3s,transform .3s}
.gx-auction.is-run.is-serp .gx-au__serp > li{opacity:1;transform:none;transition:opacity .5s ease,transform .7s var(--ease)}
.gx-auction.is-run.is-serp .gx-au__serp > li:nth-child(2){transition-delay:.15s}
.gx-auction.is-run.is-serp .gx-au__serp > li:nth-child(3){transition-delay:.3s}
.gx-auction.is-run.is-serp .gx-au__serp > li:nth-child(4){transition-delay:.45s}
.gx-auction.is-tap .gx-au__tap{animation:gxTap 1.1s ease forwards}
.gx-auction.is-run .gx-au__ring{opacity:0;transform:translateY(14px) scale(.97);transition:opacity .35s,transform .35s}
.gx-auction.is-run.is-call .gx-au__ring{opacity:1;transform:none;transition:opacity .5s ease,transform .7s var(--ease)}
.gx-auction.is-run:not(.is-call) .gx-au__ring-ic,.gx-auction.is-run:not(.is-call) .gx-au__wave i{animation-play-state:paused}

/* ==========================================================================
   THE RACE: one storyboard. 0:00 and 0:08 are shared; after the search
   the timeline forks into two lanes, with your ad and without
   ========================================================================== */
.gx-race{padding:26px 24px 26px;border-radius:30px;border:1px solid var(--edge-2);background:#0D0F13}
.gx-race__mast{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin:0 6px 20px}
.gx-race__tag{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;font-size:15px;color:var(--text-dim)}
.gx-race__tag .is-k{font-family:var(--font-head);font-weight:800;font-size:19px;color:var(--text)}
.gx-race__clock{display:inline-flex;align-items:center;gap:10px;padding:9px 18px;border-radius:100px;border:1px solid var(--edge-2);background:#08090C}
.gx-race__clock i{width:9px;height:9px;border-radius:50%;background:var(--coral);box-shadow:0 0 10px var(--coral);animation:gxBlink 1.2s steps(2) infinite}
.gx-race__clock b{min-width:3ch;font:800 24px/1 var(--font-head);font-variant-numeric:tabular-nums;color:var(--text)}
.gx-sb{display:grid;grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr) 44px minmax(0,1fr) 22px minmax(0,1fr);grid-template-rows:auto 1fr 1fr;row-gap:14px}
.gx-sb__ruler{position:relative;grid-column:1 / -1;grid-row:1;display:grid;grid-template-columns:subgrid;align-items:center;height:18px;margin-bottom:2px}
.gx-sb__ruler::before,.gx-sb__fill{content:"";position:absolute;left:0;top:50%;height:3px;margin-top:-1.5px;border-radius:3px}
.gx-sb__ruler::before{right:0;background:rgba(255,255,255,.08)}
.gx-sb__fill{width:var(--p,100%);background:linear-gradient(90deg,var(--teal),var(--gold));transition:width 1.1s var(--ease)}
.gx-sb__dot{position:relative;grid-column:var(--c);justify-self:center;width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.24);background:#0D0F13;transition:background .4s,border-color .4s,box-shadow .4s}
.gx-sb__dot.is-done{border-color:var(--teal);background:var(--teal)}
.gx-sb__dot.is-now{border-color:var(--gold);background:var(--gold);box-shadow:0 0 0 6px rgba(244,160,0,.15),0 0 18px rgba(244,160,0,.6)}
.gx-sb__f{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0;padding:18px 18px 20px;border-radius:22px;border:1px solid var(--edge);background:#0A0B0E;
  transition:opacity .6s ease,border-color .5s,box-shadow .5s}
.gx-sb__f--a{grid-column:1;grid-row:2 / 4}
.gx-sb__f--b{grid-column:3;grid-row:2 / 4}
.gx-sb__stamp{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.gx-sb__stamp b{font:800 28px/1 var(--font-head);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--text)}
.gx-sb__stamp span{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim)}
.gx-sb__f h3{margin:0;font-family:var(--font-head);font-weight:800;font-size:clamp(19px,1.55vw,23px);line-height:1.14;letter-spacing:-.02em;text-wrap:balance}
.gx-sb__copy{display:grid;gap:8px}
.gx-sb__copy p{margin:0;font-size:16px;line-height:1.55;color:var(--text-mid)}
.gx-sb__ctx{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.gx-sb__art{position:relative;flex:1 1 auto;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;min-height:190px;border-radius:16px;border:1px solid var(--edge);background:#060709;overflow:hidden}
.gx-sb__join{grid-row:2 / 4;align-self:center;justify-self:center;width:100%;height:2px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.3) 0 5px,transparent 5px 10px)}
.gx-sb__join--ab{grid-column:2}
.gx-sb__lane > .gx-sb__join{grid-row:2;grid-column:2}
.gx-sb__fork{grid-column:4;grid-row:2 / 4;width:100%;height:100%;overflow:visible}
.gx-sb__fork path{fill:none;stroke-width:2;stroke-dasharray:5 5;vector-effect:non-scaling-stroke}
.gx-sb__fork .is-you{stroke:var(--gold)}
.gx-sb__fork .is-lost{stroke:var(--coral);opacity:.8}
.gx-sb__lane{grid-column:5 / 8;display:grid;grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr);grid-template-rows:auto 1fr;gap:8px 0}
.gx-sb__lane.is-you{grid-row:2}
.gx-sb__lane.is-lost{grid-row:3}
.gx-sb__lane > .gx-sb__f:nth-of-type(1){grid-column:1}
.gx-sb__lane > .gx-sb__f:nth-of-type(2){grid-column:3}
.gx-sb__lk{grid-column:1 / -1;justify-self:start;display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:100px;font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.gx-sb__lane.is-you > .gx-sb__lk{border:1px solid var(--gold-line);background:var(--gold-soft);color:var(--gold)}
.gx-sb__lane.is-lost > .gx-sb__lk{border:1px solid var(--coral-line);background:var(--coral-soft);color:var(--coral)}
.gx-sb__lane.is-you .gx-sb__f{border-color:var(--gold-line);background:linear-gradient(180deg,rgba(244,160,0,.07),#0A0B0E 70%)}
.gx-sb__lane.is-lost .gx-sb__f{border-color:rgba(255,122,107,.26)}
.gx-sb__lane.is-lost .gx-sb__f h3{color:var(--text-mid)}
.gx-sb__lane .gx-sb__stamp b{font-size:22px}
/* the phone player's moment picker (see the phone rules) */
.gx-sb__steps{display:none}
/* the storyboard plays once (ind-gax.js): frames not reached yet wait dimmed */
.gx-race.is-run .gx-sb__f:not(.is-on){opacity:.26}
.gx-sb__f.is-now{box-shadow:0 0 0 1px var(--gold),0 0 44px -12px rgba(244,160,0,.55)}
/* every frame is its own control on wider screens (ind-gax.js lays a button
   over it: a click, or Tab onto it, focuses that moment); the ruler's dots
   pick too. Phones hide these and use the picker under the stage */
.gx-sb__go{position:absolute;inset:0;z-index:2;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:inherit;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.gx-sb__go:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.gx-sb__f:has(> .gx-sb__go):hover:not(.is-now){box-shadow:0 0 0 1px rgba(255,255,255,.2)}
.gx-race.is-run .gx-sb__f:not(.is-on):hover{opacity:.62}
.gx-sb__dot{cursor:pointer}
.gx-sb__dot::after{content:"";position:absolute;inset:-12px}
.gx-sb__thumb{display:none}
/* Trades on wider screens: the whole storyboard and its heading in one
   screen (1440x900 under the nav). The shared frames give the lanes more of
   the width, the pictures take the height the lanes leave them */
@media (min-width:1081px){
  main[data-ga-page="trades"] .gx-race{padding:16px 22px 17px}
  main[data-ga-page="trades"] .gx-race__mast{margin:0 6px 8px}
  main[data-ga-page="trades"] .gx-race__clock{padding:6px 15px}
  main[data-ga-page="trades"] .gx-race__clock b{font-size:21px}
  main[data-ga-page="trades"] .gx-sb{grid-template-columns:minmax(0,.86fr) 18px minmax(0,.86fr) 36px minmax(0,1.14fr) 16px minmax(0,1.14fr);grid-template-rows:auto auto auto;row-gap:8px}
  main[data-ga-page="trades"] .gx-sb__f{gap:8px;padding:14px 15px 15px}
  main[data-ga-page="trades"] .gx-sb__stamp b{font-size:24px}
  main[data-ga-page="trades"] .gx-sb__stamp span{font-size:11.5px}
  main[data-ga-page="trades"] .gx-sb__f h3{font-size:19px;line-height:1.15}
  main[data-ga-page="trades"] .gx-sb__copy{gap:6px}
  main[data-ga-page="trades"] .gx-sb__copy p{font-size:14.5px;line-height:1.5}
  main[data-ga-page="trades"] .gx-sb__ctx{font-size:11.5px}
  main[data-ga-page="trades"] .gx-sb__art{contain:size;min-height:150px;margin-bottom:2px}
  main[data-ga-page="trades"] .gx-burst svg{position:absolute;inset:0}
  main[data-ga-page="trades"] .gx-typing{padding:12px 8px 0}
  main[data-ga-page="trades"] .gx-typing__phone{gap:8px;padding:12px 7px 0}
  main[data-ga-page="trades"] .gx-typing .gx-search{height:36px;padding:0 9px 0 8px}
  main[data-ga-page="trades"] .gx-typing__skel{flex:1 1 0;min-height:0;grid-template-rows:repeat(3,minmax(0,30px));gap:6px}
  main[data-ga-page="trades"] .gx-typing__skel i{height:auto}
  main[data-ga-page="trades"] .gx-typing__keys{gap:5px;padding:8px 6px 10px}
  main[data-ga-page="trades"] .gx-typing__keys i{height:19px}
  main[data-ga-page="trades"] .gx-sb__lane{gap:6px 0}
  main[data-ga-page="trades"] .gx-sb__lk{padding:4px 11px;font-size:11.5px}
  main[data-ga-page="trades"] .gx-sb__lane .gx-sb__f{gap:7px;padding:12px 14px 13px}
  main[data-ga-page="trades"] .gx-sb__lane .gx-sb__stamp b{font-size:19px}
  main[data-ga-page="trades"] .gx-lane__ad{gap:5px;padding:9px 12px 11px}
  main[data-ga-page="trades"] .gx-lane__ad small{gap:2px 8px;font-size:11px}
  main[data-ga-page="trades"] .gx-lane__ad strong{font-size:14.5px;line-height:1.3}
  main[data-ga-page="trades"] .gx-lane__call{margin-top:1px;padding:6px 13px;font-size:13px}
  main[data-ga-page="trades"] .gx-lane__rivals{gap:6px}
  main[data-ga-page="trades"] .gx-lane__rivals span{padding:8px 11px}
  main[data-ga-page="trades"] .gx-lane__log,main[data-ga-page="trades"] .gx-lane__gone{padding:10px}
  main[data-ga-page="trades"] .gx-lane__result{font-size:15px}
}
/* Trades on phones (one moment at a time): the stage takes the height of the
   tallest moment's words and lanes, the pictures fill what that leaves, so
   stage, picker and previous / next fit one screen under the nav */
@media (max-width:700px){
  html.el8-js main[data-ga-page="trades"] .gx-sb{grid-template-rows:auto auto auto auto}
  html.el8-js main[data-ga-page="trades"] .gx-race__mast{margin-bottom:10px}
  html.el8-js main[data-ga-page="trades"] .gx-sb__art{contain:size;min-height:200px}
  html.el8-js main[data-ga-page="trades"] .gx-burst svg{position:absolute;inset:0}
  html.el8-js main[data-ga-page="trades"] .gx-typing__skel{flex:1 1 0;min-height:0;grid-template-rows:repeat(3,minmax(0,34px))}
  html.el8-js main[data-ga-page="trades"] .gx-typing__skel i{height:auto}
  html.el8-js main[data-ga-page="trades"] .gx-lane__ad{gap:4px;padding:9px 12px 10px}
  html.el8-js main[data-ga-page="trades"] .gx-lane__ad small{gap:2px 8px;font-size:11px}
  html.el8-js main[data-ga-page="trades"] .gx-lane__ad strong{font-size:14.5px}
  html.el8-js main[data-ga-page="trades"] .gx-lane__call{padding:6px 13px;font-size:13px}
}
/* 0:00 a burst pipe */
.gx-burst svg{width:100%;height:100%;overflow:visible}
.gx-burst__tiles{fill:none;stroke:rgba(255,255,255,.045);stroke-width:1}
.gx-burst__floor{stroke:rgba(255,255,255,.16);stroke-width:2}
.gx-burst__pipe{fill:none;stroke:#343943;stroke-width:15;stroke-linecap:round}
.gx-burst__cap{fill:none;stroke:#4A505B;stroke-width:6;stroke-linecap:round}
.gx-burst__valve circle{fill:#0A0B0E;stroke:var(--gold);stroke-width:3}
.gx-burst__valve path{stroke:var(--gold);stroke-width:3;stroke-linecap:round}
.gx-burst__crack{fill:none;stroke:var(--coral);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px rgba(255,122,107,.8))}
.gx-burst__drop{fill:#86BDFF;opacity:.85;transform-box:fill-box;transform:translate(calc(var(--x) * .55),calc(var(--y) * .55))}
.gx-burst__pool{fill:rgba(134,189,255,.2);stroke:rgba(134,189,255,.45);stroke-width:1.5;transform-box:fill-box;transform-origin:center}
.gx-burst__drip circle{fill:#86BDFF;opacity:0;transform-box:fill-box}
.gx-sb__f.is-on .gx-burst__drop{animation:gxSpray 1.1s ease-out infinite;animation-delay:calc(var(--i) * -.09s)}
.gx-sb__f.is-on .gx-burst__pool{animation:gxPool 3s ease-in-out infinite}
.gx-sb__f.is-on .gx-burst__drip circle{animation:gxDrip 1.8s ease-in infinite;animation-delay:calc(var(--i) * .6s)}
@keyframes gxSpray{0%{opacity:0;transform:none}12%{opacity:.95}100%{opacity:0;transform:translate(var(--x),var(--y))}}
@keyframes gxPool{50%{transform:scaleX(1.14)}}
@keyframes gxDrip{0%{opacity:0;transform:none}15%{opacity:.9}100%{opacity:0;transform:translateY(150px)}}
.gx-burst__time{position:absolute;left:12px;top:12px;padding:5px 11px;border-radius:100px;border:1px solid var(--edge-2);background:#101318;font:700 12px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text)}
/* 0:08 the search, on a phone, typed on its keyboard */
.gx-typing{place-items:stretch;padding:16px 10px 0}
.gx-typing__phone{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0;padding:14px 9px 0;border-radius:26px 26px 0 0;border:1px solid var(--edge-2);border-bottom:0;background:#0E1015;overflow:hidden}
.gx-typing .gx-search{align-self:stretch;width:auto;font-size:12.5px;height:40px;padding:0 11px 0 10px}
.gx-typing__skel{display:grid;gap:8px;align-self:stretch}
.gx-typing__skel i{height:34px;border-radius:10px;border:1px solid var(--edge);background:#13161B}
.gx-sb__f.is-now .gx-typing__skel i{animation:gxRowIn .5s var(--ease) both;animation-delay:calc(1.8s + var(--n, 0) * .15s)}
.gx-typing__skel i:nth-child(2){--n:1}.gx-typing__skel i:nth-child(3){--n:2}
.gx-typing__keys{align-self:stretch;display:grid;gap:6px;margin:auto -9px 0;padding:10px 6px 12px;border-top:1px solid var(--edge);background:#0A0C10}
.gx-typing__keys > span{display:flex;justify-content:center;gap:4px}
.gx-typing__keys i{flex:0 0 auto;width:calc((100% - 36px) / 10);height:24px;border-radius:5px;background:#1B1F26}
.gx-typing__keys .is-space i{width:52%}
.gx-sb__f.is-now .gx-typing__keys i{animation:gxKey 1.1s steps(1) infinite;animation-delay:calc(var(--k) * -.1s)}
@keyframes gxKey{0%{background:#1B1F26}8%{background:rgba(244,160,0,.6)}18%,100%{background:#1B1F26}}
/* 0:23 and 0:41 in the lanes */
.gx-lane__ad{display:grid;gap:7px;padding:13px;border-radius:14px;border:1px solid var(--gold-line);background:#15130D}
.gx-lane__ad small{display:flex;flex-wrap:wrap;gap:3px 8px;font-size:11.5px;color:var(--text-dim)}
.gx-lane__ad small .gx-lane__where{flex-basis:100%;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.gx-lane__ad small span:nth-child(2){flex-basis:100%;font-weight:800;color:var(--text)}
.gx-lane__ad strong{font-size:15px;line-height:1.35;color:#BFD3FF}
.gx-lane__call{position:relative;justify-self:start;display:inline-flex;align-items:center;gap:8px;margin-top:2px;padding:8px 15px;border-radius:100px;background:var(--gold);color:#111;font-weight:700;font-size:13.5px}
.gx-lane__call svg{width:15px;height:15px}
.gx-sb__f.is-on .gx-lane__call .gx-tap{animation:gxTap 2.4s ease .8s infinite}
.gx-lane__log{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;border:1px solid var(--teal-line);background:rgba(79,191,160,.07)}
.gx-lane__ring{display:grid;place-items:center;flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--teal);color:#0A1512}
.gx-lane__ring svg{width:18px;height:18px}
.gx-sb__f.is-on .gx-lane__log .gx-lane__ring{animation:gxRing 1s ease .3s 2}
.gx-lane__log div{flex:1;display:grid;gap:2px;min-width:0}
.gx-lane__log strong{font-size:14.5px;color:var(--text)}
.gx-lane__log div span{font-size:13px;line-height:1.35;color:var(--text-dim)}
.gx-lane__voice{display:flex;align-items:center;gap:3px;height:30px}
.gx-lane__voice i{width:3px;height:var(--h);border-radius:2px;background:var(--teal);transform:scaleY(.35);animation:gxVoice 1s ease-in-out infinite;animation-delay:calc(var(--i) * -.14s)}
.gx-lane__result{display:flex;align-items:center;gap:10px;margin:auto 0 0;font-weight:700;font-size:16px}
.gx-lane__result svg{flex:0 0 auto;width:24px;height:24px;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.gx-lane__result.is-good{color:var(--teal)}
.gx-lane__result.is-good svg{stroke:var(--teal)}
.gx-lane__result.is-lost{color:var(--coral)}
.gx-lane__result.is-lost svg{stroke:var(--coral)}
.gx-lane__rivals{display:grid;gap:7px}
.gx-lane__rivals span{display:grid;grid-template-columns:14px minmax(0,1fr);align-items:center;gap:5px 9px;padding:10px 12px;border-radius:10px;border:1px solid var(--edge);background:#12151A}
.gx-lane__rivals b{grid-row:span 2;width:14px;height:14px;border-radius:50%;background:#6E7FD9}
.gx-lane__rivals span:nth-child(2) b{background:#8E6ED9}.gx-lane__rivals span:nth-child(3) b{background:#5A9BD9}
.gx-lane__rivals i{height:6px;width:86%;border-radius:3px;background:rgba(255,255,255,.14)}
.gx-lane__rivals i.s{width:54%;opacity:.6}
.gx-sb__f.is-on .gx-lane__rivals span{animation:gxRowIn .5s var(--ease) both;animation-delay:calc(var(--i) * .15s + .3s)}
.gx-lane__gone{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px 12px;padding:12px;border-radius:14px;border:1px dashed rgba(255,255,255,.14);opacity:.7}
.gx-lane__gone .gx-lane__ring{grid-row:span 2;background:rgba(255,255,255,.1);color:var(--text-dim)}
.gx-lane__gone i{height:6px;width:80%;border-radius:3px;background:rgba(255,255,255,.12)}
.gx-lane__gone i.s{width:50%}
.gx-takeaway{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:end;gap:20px 60px;margin-top:56px}
.gx-takeaway__big{margin:0;font-family:var(--font-head);font-weight:800;font-size:clamp(28px,3vw,42px);line-height:1.1;letter-spacing:-.028em;color:var(--text-dim);text-wrap:balance}
.gx-takeaway__big strong{color:var(--gold)}
.gx-takeaway__d{margin:0;font-size:17px;line-height:1.65;color:var(--text-mid)}
.gx-takeaway__d strong{color:var(--text)}

/* ==========================================================================
   THE PLAYER (s1, review round 2): the storyboard one moment at a time.
   The moment picker sits right on the stage; the stage keeps one height
   (every scene shares one grid cell, so nothing jumps); previous and next
   sit under it. A shared moment shows its picture and words side by side,
   a forked moment both lanes side by side. Plays by itself while in view,
   holds once the reader picks (ind-gax.js, [data-gx-play]). Without JS every
   scene shows, one after another. Round 3 put every s1 back on the
   storyboard (.gx-race / .gx-sb above); the player stays for healthcare's
   section-6. Spec: GA-PATTERNS.md
   ========================================================================== */
.gx-play{--n:4;display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding:20px 24px 18px;border-radius:30px;border:1px solid var(--edge-2);background:#0D0F13}
.gx-play__mast{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;margin:0 4px}
.gx-play__mast .gx-race__clock{padding:7px 16px}
.gx-play__mast .gx-race__clock b{font-size:21px}
/* the picker: one chapter per moment, its bar filling while it plays */
.gx-play__picks{display:none}
html.el8-js .gx-play__picks{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:10px}
.gx-play__pick{position:relative;display:flex;align-items:center;gap:10px;min-width:0;padding:15px 6px 6px;border:0;background:none;color:var(--text-dim);font:inherit;text-align:left;cursor:pointer}
.gx-play__pick::before,.gx-play__bar{content:"";position:absolute;left:0;right:0;top:0;height:4px;border-radius:4px}
.gx-play__pick::before{background:rgba(255,255,255,.09)}
.gx-play__bar{background:var(--teal);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease),background .3s}
.gx-play__pick.is-done .gx-play__bar{transform:none}
.gx-play__pick.is-now .gx-play__bar{background:var(--gold);transform:none}
.gx-play.is-play .gx-play__pick.is-now .gx-play__bar{transform:scaleX(var(--k,0));transition:transform .2s linear}
.gx-play__dot{flex:0 0 auto;width:13px;height:13px;border-radius:50%;border:2px solid rgba(255,255,255,.26);transition:background .35s,border-color .35s,box-shadow .35s}
.gx-play__pick.is-done .gx-play__dot{border-color:var(--teal);background:var(--teal)}
.gx-play__pick.is-now .gx-play__dot{border-color:var(--gold);background:var(--gold);box-shadow:0 0 0 5px rgba(244,160,0,.14),0 0 14px rgba(244,160,0,.55)}
.gx-play__pick b{font:800 21px/1 var(--font-head);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--text-mid);transition:color .3s}
.gx-play__pick span{min-width:0;font-size:13px;font-weight:700;line-height:1.2;letter-spacing:.1em;text-transform:uppercase;text-wrap:balance;transition:color .3s}
.gx-play__pick:hover b,.gx-play__pick:hover span{color:var(--text)}
.gx-play__pick.is-now b{color:var(--text)}
.gx-play__pick.is-now span{color:var(--gold)}
.gx-play__pick:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:8px}
/* the stage */
.gx-play__stage{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
html.el8-js .gx-play__stage{gap:0;overflow-x:clip}
html.el8-js .gx-play__scene{grid-area:1 / 1;opacity:0;visibility:hidden;transform:translateX(22px);pointer-events:none;
  transition:opacity .28s ease,transform .4s var(--ease),visibility 0s .4s}
html.el8-js .gx-play__scene.is-past{transform:translateX(-22px)}
html.el8-js .gx-play__scene.is-now{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .45s ease .06s,transform .55s var(--ease) .06s,visibility 0s}
/* a frame (one moment, or one lane of it); .gx-sb__f adds Trades' look */
.gx-play__f{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0;padding:18px;border-radius:22px;border:1px solid var(--edge);background:#0A0B0E}
.gx-play .gx-sb__f{padding:18px}
.gx-play .gx-sb__f.is-now{box-shadow:none}
/* a shared moment: the picture, and beside it the time and the words */
.gx-play__scene--solo .gx-play__f{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);align-items:center;gap:20px 48px;height:100%;padding:16px 40px 16px 16px}
/* the picture has a height of its own (a portrait SVG would otherwise set it) */
.gx-play__scene--solo .gx-play__art{align-self:stretch;height:344px;min-height:0}
.gx-play__words{display:grid;gap:16px;align-content:center;max-width:520px}
.gx-play__scene--solo .gx-sb__stamp b{font-size:40px}
.gx-play__scene--solo .gx-sb__stamp span{font-size:13px}
.gx-play__scene--solo .gx-sb__copy{gap:12px}
.gx-play__scene--solo .gx-sb__f h3{font-size:clamp(26px,2.5vw,36px);line-height:1.08;letter-spacing:-.026em}
.gx-play__scene--solo .gx-sb__copy p{font-size:18px;line-height:1.6}
.gx-play .gx-typing{justify-items:center}
.gx-play .gx-typing__phone{width:min(100%,310px)}
/* a forked moment: both lanes side by side; their rows line up (subgrid) */
.gx-play__scene--fork{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto auto minmax(0,1fr) auto;column-gap:22px}
/* a lane's frame reads: time, words, picture (centred in the room left), result */
.gx-play__lane > .gx-play__f > :nth-child(3){align-self:center}
.gx-play__lane{grid-row:1 / -1;display:grid;grid-template-rows:subgrid;row-gap:12px;min-width:0}
.gx-play__lk{grid-row:1;justify-self:start;display:inline-flex;align-items:center;padding:6px 13px;border-radius:100px;font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.gx-play__lane > .gx-play__f{grid-row:2 / -1;display:grid;grid-template-rows:subgrid;row-gap:14px;padding:20px 22px 22px}
.gx-play__lane.is-you .gx-play__lk{border:1px solid var(--gold-line);background:var(--gold-soft);color:var(--gold)}
.gx-play__lane.is-lost .gx-play__lk{border:1px solid var(--coral-line);background:var(--coral-soft);color:var(--coral)}
.gx-play__lane.is-you .gx-play__f{border-color:var(--gold-line);background:linear-gradient(180deg,rgba(244,160,0,.08),#0A0B0E 70%)}
.gx-play__lane.is-lost .gx-play__f{border-color:rgba(255,122,107,.26)}
.gx-play__lane.is-lost .gx-play__f h3{color:var(--text-mid)}
.gx-play__scene--fork .gx-sb__stamp b{font-size:26px}
.gx-play__scene--fork .gx-sb__f h3{font-size:clamp(21px,1.8vw,26px)}
/* the lanes' pictures at the stage's size */
.gx-play__scene--fork .gx-lane__ad{gap:10px;padding:20px 22px 22px}
.gx-play__scene--fork .gx-lane__ad small{font-size:13px}
.gx-play__scene--fork .gx-lane__ad strong{font-size:21px;line-height:1.3}
.gx-play__scene--fork .gx-lane__call{margin-top:6px;padding:11px 20px;font-size:15px}
.gx-play__scene--fork .gx-lane__rivals{gap:10px}
.gx-play__scene--fork .gx-lane__rivals span{grid-template-columns:18px minmax(0,1fr);gap:10px 14px;padding:17px 18px}
.gx-play__scene--fork .gx-lane__rivals b{width:18px;height:18px}
.gx-play__scene--fork .gx-lane__rivals i{height:8px}
.gx-play__scene--fork .gx-lane__log,.gx-play__scene--fork .gx-lane__gone{gap:10px 16px;padding:22px 20px}
.gx-play__scene--fork .gx-lane__ring{width:54px;height:54px}
.gx-play__scene--fork .gx-lane__ring svg{width:23px;height:23px}
.gx-play__scene--fork .gx-lane__log strong{font-size:18px}
.gx-play__scene--fork .gx-lane__log div span{font-size:15px}
.gx-play__scene--fork .gx-lane__voice{gap:4px;height:40px}
.gx-play__scene--fork .gx-lane__voice i{width:4px}
.gx-play__scene--fork .gx-lane__gone i{height:8px}
.gx-play__scene--fork .gx-lane__result{align-self:end;margin:0;font-size:17px}
/* previous and next, each naming the moment it goes to */
.gx-play__ctl{display:none}
html.el8-js .gx-play__ctl{display:flex;align-items:center;justify-content:space-between;gap:12px}
.gx-play__step{display:inline-flex;align-items:center;gap:10px;min-width:0;height:42px;padding:0 18px;border-radius:100px;border:1px solid var(--edge-2);background:#0A0B0E;color:var(--text-mid);
  font:600 14.5px/1 Inter,system-ui,sans-serif;cursor:pointer;transition:border-color .3s,color .3s,background .3s,opacity .3s}
.gx-play__step b{font-family:var(--font-head);font-weight:800;font-variant-numeric:tabular-nums;color:var(--text)}
.gx-play__step span{min-width:0;white-space:nowrap}
.gx-play__step em{font-style:normal}
.gx-play__step svg{flex:0 0 auto;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.gx-play__step:hover:not(:disabled){border-color:var(--gold-line);color:var(--text)}
.gx-play__step.is-next{border-color:var(--gold-line);background:var(--gold-soft);color:var(--text)}
.gx-play__step.is-next svg{color:var(--gold)}
.gx-play__step:disabled{visibility:hidden}
.gx-play__step:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.gx-play__count{font:600 13px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;color:var(--text-dim)}
.gx-play__count b{color:var(--text)}
@media (prefers-reduced-motion:reduce){
  html.el8-js .gx-play__scene,html.el8-js .gx-play__scene.is-now{transform:none;transition:none}
}
/* tablets: the chapters stack their time over their name; picture and words share the width */
@media (min-width:701px) and (max-width:1080px){
  .gx-play{padding:18px 18px 16px}
  .gx-play__pick{flex-direction:column;align-items:flex-start;gap:5px;padding-top:14px}
  .gx-play__dot{display:none}
  .gx-play__pick span{font-size:11.5px;letter-spacing:.08em}
  .gx-play__scene--solo .gx-play__f{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 28px;padding:14px 24px 14px 14px}
  .gx-play__scene--solo .gx-play__art{height:320px}
  .gx-play__scene--solo .gx-sb__stamp b{font-size:32px}
  .gx-play__scene--solo .gx-sb__f h3{font-size:25px}
  .gx-play__scene--solo .gx-sb__copy p{font-size:16px}
  .gx-play__scene--fork{column-gap:14px}
  .gx-play__lane > .gx-play__f{padding:16px}
  .gx-play__scene--fork .gx-sb__f h3{font-size:20px}
  .gx-play__scene--fork .gx-lane__ad strong{font-size:18px}
}

/* ==========================================================================
   EIGHT DIFFERENCES: a picture for each place trade work breaks the
   generic playbook
   ========================================================================== */
.gx-rules__key{display:flex;flex-wrap:wrap;gap:10px 12px;margin:-28px 0 30px}
.gx-rules__key > span{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:4px 9px;padding:10px 18px;border-radius:100px;font-size:15px;font-weight:700}
.gx-rules__key .is-old{border:1px solid var(--coral-line);background:var(--coral-soft);color:var(--coral)}
.gx-rules__key .is-new{border:1px solid var(--teal-line);background:var(--teal-soft);color:var(--teal)}
.gx-rules__key small{font-size:.93em;font-weight:500;color:var(--text-dim)}
.gx-rules__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.gx-rule{display:flex;flex-direction:column;gap:12px;padding:14px 14px 24px;border-radius:26px;border:1px solid var(--edge-2);background:linear-gradient(180deg,#111318,#0B0C0F)}
.gx-rule__art{height:156px;margin-bottom:6px;border-radius:17px;border:1px solid var(--edge);background:radial-gradient(80% 90% at 50% 100%,rgba(244,160,0,.05),transparent 70%),#07080A;overflow:hidden}
.gx-rule__k,.gx-rule__t,.gx-rule__old,.gx-rule__new{margin-inline:8px}
.gx-rule__k{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.gx-rule__k b{font:700 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;color:var(--text-dim)}
.gx-rule__t{margin-block:0;font-family:var(--font-head);font-weight:800;font-size:22px;line-height:1.12;letter-spacing:-.022em;text-wrap:balance}
.gx-rule__old{display:flex;align-items:baseline;gap:8px;margin-block:0;font-size:15px;color:var(--text-dim)}
.gx-rule__old b{flex:0 0 auto;font-size:13px;color:var(--coral)}
.gx-rule__old s{text-decoration-color:rgba(255,122,107,.8);text-decoration-thickness:1.5px}
.gx-rule__new{padding-left:13px;border-left:2px solid var(--teal)}
.gx-rule__new p{margin:0;font-size:16px;line-height:1.55;color:var(--text)}
/* the pictures (resources/views/industries/gads/trades/rule.blade.php) */
.gxr{display:block;width:100%;height:100%;font-family:Inter,system-ui,sans-serif}
.gxr *{transform-box:fill-box;transform-origin:center}
.gxr .gxr-card{fill:#12151B;stroke:rgba(255,255,255,.12)}
.gxr-field{fill:rgba(255,255,255,.08)}
.gxr-field.is-btn{fill:rgba(255,255,255,.16)}
.gxr-form{opacity:.55}
.gxr-no circle{fill:#2A1414;stroke:var(--coral);stroke-width:1.5}
.gxr-no path,.gxr-cross{fill:none;stroke:var(--coral);stroke-width:2.2;stroke-linecap:round}
.gxr-cross.is-lg{stroke-width:2.6}
.gxr-arrow{fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gxr-halo{fill:rgba(79,191,160,.09)}
.gxr-disc{fill:var(--teal)}
.gxr-handset path,.gxr-log__ph{fill:none;stroke:#0A1512;stroke-width:2.2;stroke-linejoin:round}
.gxr-handset{animation:gxRing 1.6s ease infinite}
.gxr .gxr-arc{fill:none;stroke:var(--teal);stroke-width:2.4;stroke-linecap:round;animation:gxBlinkSoft 1.6s ease-in-out infinite}
.gxr .gxr-arc.is-2{opacity:.5;animation-delay:.2s}
@keyframes gxBlinkSoft{50%{opacity:.15}}
.gxr-wave rect{fill:var(--teal);transform:scaleY(.4);animation:gxVoice 1s ease-in-out infinite;animation-delay:calc(var(--i) * -.12s)}
.gxr-dot{fill:rgba(255,255,255,.1)}
.gxr-reach{fill:rgba(255,122,107,.05);stroke:var(--coral);stroke-width:1.5;stroke-dasharray:5 6;opacity:.8}
.gxr-radius{fill:rgba(79,191,160,.16);stroke:var(--teal);stroke-width:2;animation:gxBreathe 3s ease-in-out infinite}
@keyframes gxBreathe{50%{transform:scale(1.07)}}
.gxr-route{fill:none;stroke:var(--coral);stroke-width:1.8;stroke-dasharray:4 5;animation:gxDash 2s linear infinite}
.gxr-pin{fill:var(--gold)}
.gxr-pin.is-far{fill:#3A2020;stroke:var(--coral);stroke-width:1.5}
.gxr-pin__dot{fill:#111}
.gxr-tag{font-size:13px;font-weight:700;font-family:var(--font-head)}
.gxr-tag.is-coral{fill:var(--coral)}.gxr-tag.is-teal{fill:var(--teal)}.gxr-tag.is-gold{fill:var(--gold)}
.gxr-tagbox{fill:#0E1015;stroke:rgba(255,255,255,.14)}
.gxr-perf{stroke:rgba(255,255,255,.16);stroke-width:1.5;stroke-dasharray:3 4}
.gxr-price{font-family:var(--font-head);font-weight:800;font-size:19px;fill:var(--text)}
.gxr-docket.is-big .gxr-price{fill:var(--gold)}
.gxr-coin{fill:#C98400;stroke:#FFD27A;stroke-width:1.2}
.gxr-docket.is-big .gxr-coin{fill:#E39A00}
.gxr-coin.is-top{animation:gxCoin 3.2s cubic-bezier(.34,1.3,.5,1) infinite}
@keyframes gxCoin{0%,20%{opacity:0;transform:translateY(-26px)}35%,85%{opacity:1;transform:none}100%{opacity:0}}
.gxr-fork{fill:none;stroke-width:2;stroke-dasharray:5 5;animation:gxDash 1.6s linear infinite}
.gxr-fork.is-gold{stroke:var(--gold)}.gxr-fork.is-teal{stroke:var(--teal)}
.gxr-node{fill:#181B21;stroke:var(--gold-line)}
.gxr-lens{fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round}
.gxr-lane.is-urgent .gxr-card{stroke:var(--gold-line)}
.gxr-lane.is-planned .gxr-card{stroke:var(--teal-line)}
.gxr-lane.is-urgent .gxr-badge{fill:rgba(244,160,0,.16)}
.gxr-lane.is-planned .gxr-badge{fill:rgba(79,191,160,.16)}
.gxr-bolt{fill:var(--gold);animation:gxFlicker 2.4s steps(1) infinite}
@keyframes gxFlicker{0%,100%{opacity:1}46%{opacity:.35}50%{opacity:1}54%{opacity:.5}}
.gxr-cal{fill:none;stroke:var(--teal);stroke-width:1.8;stroke-linecap:round}
.gxr-cal__day{fill:var(--teal)}
.gxr-line{fill:rgba(255,255,255,.16)}
.gxr-line.is-s{fill:rgba(255,255,255,.08)}
.gxr-live{fill:var(--coral);animation:gxBlink 1s steps(2) infinite}
.gxr-sub{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.08)}
.gxr-sub.is-fringe{fill:rgba(244,160,0,.12);stroke:rgba(244,160,0,.3)}
.gxr-sub.is-home{fill:rgba(79,191,160,.3);stroke:var(--teal)}
.gxr-sub.is-block{fill:rgba(255,122,107,.12);stroke:var(--coral);stroke-dasharray:3 3}
.gxr-sweep rect{fill:var(--gold);opacity:.7;filter:drop-shadow(0 0 6px rgba(244,160,0,.9))}
.gxr-sweep{transform-box:view-box;animation:gxSweep 5s cubic-bezier(.45,0,.55,1) infinite}
@keyframes gxSweep{0%{transform:translateX(0);opacity:0}8%{opacity:1}85%{opacity:1}100%{transform:translateX(262px);opacity:0}}
.gxr-term .gxr-card{stroke:rgba(255,255,255,.12)}
.gxr-term.is-keep .gxr-card{stroke:var(--teal-line);fill:rgba(79,191,160,.06)}
.gxr-q{font-size:13px;font-weight:500;fill:var(--text)}
.gxr-term.is-cut .gxr-q{fill:var(--text-dim)}
.gxr-strike{fill:none;stroke:var(--coral);stroke-width:2;stroke-linecap:round;stroke-dasharray:1 1;animation:gxStrike 4s ease infinite;animation-delay:calc(var(--i) * .5s)}
@keyframes gxStrike{0%,12%{stroke-dashoffset:1}40%,100%{stroke-dashoffset:0}}
.gxr-chip{fill:rgba(255,255,255,.05)}
.gxr-term.is-cut .gxr-chip{fill:rgba(255,122,107,.16)}
.gxr-term.is-keep .gxr-chip{fill:rgba(79,191,160,.2)}
.gxr-minus{stroke:var(--coral);stroke-width:2.2;stroke-linecap:round}
.gxr-tick{fill:none;stroke:var(--teal);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.gxr-direct{fill:none;stroke:rgba(255,255,255,.14);stroke-width:1.6;stroke-dasharray:3 6}
.gxr-via{fill:none;stroke:var(--coral);stroke-width:1.8;stroke-dasharray:5 5;opacity:.75}
.gxr-platform path{fill:rgba(255,122,107,.12);stroke:var(--coral);stroke-width:1.6;stroke-linejoin:round}
.gxr-van rect,.gxr-van path{fill:rgba(244,160,0,.16);stroke:var(--gold);stroke-width:1.6;stroke-linejoin:round}
.gxr-van circle{fill:#0A0B0E;stroke:var(--gold);stroke-width:1.6}
.gxr-lead{fill:var(--teal);stroke:#0A1512;stroke-width:2;animation:gxLead 4.8s ease-in-out infinite}
@keyframes gxLead{0%,8%{opacity:0;transform:none}14%{opacity:1;transform:none}44%,54%{opacity:1;transform:translate(94px,-40px)}88%{opacity:1;transform:translate(188px,4px)}100%{opacity:0;transform:translate(188px,4px)}}
.gxr-dial{fill:#0C0E12;stroke:rgba(255,255,255,.08);stroke-width:1.5}
.gxr .gxr-arc.is-day,.gxr .gxr-arc.is-eve,.gxr .gxr-arc.is-night{animation:none;stroke-width:9}
.gxr .gxr-arc.is-day{stroke:var(--gold)}
.gxr .gxr-arc.is-eve{stroke:rgba(244,160,0,.4)}
.gxr .gxr-arc.is-night{stroke:rgba(255,255,255,.1);stroke-dasharray:2 5}
.gxr-hr{fill:rgba(255,255,255,.25)}
.gxr-hand{transform-box:view-box;transform-origin:84px 80px;animation:gxHand 14s linear infinite}
.gxr-hand path{stroke:var(--text);stroke-width:2.4;stroke-linecap:round}
.gxr-hand circle{fill:var(--text)}
@keyframes gxHand{to{transform:rotate(360deg)}}
.gxr-pause{fill:#181B21;stroke:rgba(255,255,255,.2)}
.gxr-pause__bars{stroke:var(--text-mid);stroke-width:2;stroke-linecap:round}
.gxr-miss{fill:var(--coral);animation:gxBlinkSoft 1.4s ease-in-out infinite}
.gxr-log.is-miss .gxr-card{stroke:var(--coral-line)}
.gxr-log.is-ok .gxr-card{stroke:var(--teal-line)}
.gxr-log.is-miss .gxr-log__ic{fill:rgba(255,122,107,.8)}
.gxr-log.is-ok .gxr-log__ic{fill:var(--teal)}

/* the rule's words sit together under its picture */
.gx-rule__body{display:flex;flex-direction:column;gap:12px}
/* ==========================================================================
   THE DIFFERENCES, FEATURED (s2, review round 2): one rule at a time, large,
   with its picture, the playbook struck out and what replaces it, beside a
   compact index of every rule (any count). It steps by itself while in view
   and holds once the reader picks (ind-gax.js, [data-gx-feat]). Phones keep
   the swipe carousel of cards. Spec: GA-PATTERNS.md
   ========================================================================== */
.gx-feat__index{display:none}
@media (min-width:701px){
  .gx-feat{display:grid;grid-template-columns:minmax(250px,.64fr) minmax(0,1fr);align-items:stretch;gap:22px}
  .gx-feat__index{display:grid;grid-auto-rows:minmax(0,1fr);gap:6px}
  .gx-feat__pick{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;gap:12px;min-height:0;padding:10px 16px 10px 14px;border-radius:16px;border:1px solid var(--edge);
    background:#0C0D11;color:var(--text-mid);font:inherit;text-align:left;cursor:pointer;overflow:hidden;transition:border-color .3s,background .3s,color .3s}
  .gx-feat__pick > b{font:700 12.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em;color:var(--text-dim);transition:color .3s}
  .gx-feat__pick > span{display:grid;gap:4px;min-width:0;font:800 16.5px/1.22 var(--font-head);letter-spacing:-.012em;text-wrap:balance}
  .gx-feat__pick small{font:800 11px/1.2 Inter,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);transition:color .3s}
  .gx-feat__pick:hover{border-color:var(--edge-2);color:var(--text)}
  .gx-feat__pick.is-on{border-color:var(--gold-line);background:linear-gradient(90deg,rgba(244,160,0,.11),rgba(244,160,0,.025) 80%),#0C0D11;color:var(--text)}
  .gx-feat__pick.is-on > b,.gx-feat__pick.is-on small{color:var(--gold)}
  .gx-feat__pick:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
  .gx-feat__bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--gold);transform:scaleX(0);transform-origin:0 50%;opacity:0}
  .gx-feat.is-play .gx-feat__pick.is-on .gx-feat__bar{opacity:1;transform:scaleX(var(--k,0));transition:transform .2s linear}
  .gx-feat__car{min-width:0}
  .gx .gx-feat .gx-feat__stage{grid-template-columns:minmax(0,1fr);gap:0}
  .gx-feat .gx-rule{grid-area:1 / 1;gap:0;padding:14px 14px 30px;border-radius:28px}
  html.el8-js .gx-feat .gx-feat__stage > .gx-rule:not(.is-on){opacity:0;visibility:hidden;transform:translateY(10px);pointer-events:none;transition:opacity .25s ease,transform .4s var(--ease),visibility 0s .4s}
  html.el8-js .gx-feat .gx-feat__stage > .gx-rule.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .45s ease .05s,transform .55s var(--ease) .05s,visibility 0s}
  .gx-feat .gx-rule__art{height:auto;aspect-ratio:300 / 142;max-height:330px;margin:0 0 24px;border-radius:20px}
  .gx-feat .gx-rule__art > svg{display:block;width:100%;height:100%}
  .gx-feat .gx-rule__body{gap:14px;padding:0 14px}
  .gx-feat .gx-rule__k,.gx-feat .gx-rule__t,.gx-feat .gx-rule__old,.gx-feat .gx-rule__new{margin-inline:0}
  .gx-feat .gx-rule__k{font-size:13px}
  .gx-feat .gx-rule__t{font-size:clamp(26px,2.4vw,36px);line-height:1.08;letter-spacing:-.026em}
  .gx-feat .gx-rule__old{font-size:17px}
  .gx-feat .gx-rule__new{padding-left:16px;border-left-width:3px}
  .gx-feat .gx-rule__new p{max-width:640px;font-size:18px;line-height:1.6}
}
@media (min-width:701px) and (max-width:1080px){
  .gx-feat{grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:16px}
  .gx-feat__pick{grid-template-columns:24px minmax(0,1fr);gap:8px;padding:9px 12px}
  .gx-feat__pick > span{font-size:15px}
  .gx-feat .gx-rule__art{margin-bottom:18px}
  .gx-feat .gx-rule__new p{font-size:16.5px}
}
@media (prefers-reduced-motion:reduce){
  html.el8-js .gx-feat .gx-feat__stage > .gx-rule{transform:none!important;transition:none!important}
}

/* ==========================================================================
   LEAKS: the budget's pipe
   ========================================================================== */
.gx-pipe{display:grid;gap:22px}
.gx-pipe__art{position:relative;height:118px;margin:0 34px}
.gx-pipe__art > svg{position:absolute;left:0;right:0;top:0;width:100%;height:100px;overflow:visible}
.gx-pipe__tube{fill:none;stroke:#23272F;stroke-width:22;stroke-linecap:round;vector-effect:non-scaling-stroke}
.gx-pipe__flow{fill:none;stroke:var(--gold);stroke-width:4;stroke-linecap:round;stroke-dasharray:3 24;vector-effect:non-scaling-stroke;opacity:.85;animation:gxFlow 1.1s linear infinite}
@keyframes gxFlow{to{stroke-dashoffset:-27}}
.gx-pipe__in,.gx-pipe__out{position:absolute;top:50px;display:grid;place-items:center;width:52px;height:52px;margin-top:-26px;border-radius:16px}
.gx-pipe__in{left:-34px;background:var(--gold);color:#111}
.gx-pipe__out{right:-34px;background:var(--teal);color:#0A1512}
.gx-pipe__in svg,.gx-pipe__out svg{width:24px;height:24px}
.gx-pipe__leak{position:absolute;left:var(--x);top:50px;width:0;height:0;opacity:.45;transition:opacity .4s}
.gx-pipe__leak.is-on{opacity:1}
.gx-pipe__joint{position:absolute;left:-17px;top:-19px;width:34px;height:38px;border-radius:7px;border:1px solid rgba(255,255,255,.12);background:#2E333C;transition:border-color .4s,box-shadow .4s}
.gx-pipe__leak.is-on .gx-pipe__joint{border-color:var(--coral);box-shadow:0 0 20px rgba(255,122,107,.5)}
.gx-pipe__drop{position:absolute;left:-5px;top:18px;width:10px;height:14px;border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;background:var(--coral);opacity:0;
  animation:gxLeakDrop 1.6s ease-in infinite;animation-delay:calc(var(--d) * .5s)}
@keyframes gxLeakDrop{0%{opacity:0;transform:scale(.6)}15%{opacity:.95}100%{opacity:0;transform:translateY(46px)}}
.gx .gx-pipe__tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 18px;padding:0;border:0;background:none}
.gx-pipe__tabs button{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-radius:100px;border:1px solid var(--edge-2);background:transparent;color:var(--text-dim);
  font:600 14px/1 Inter,system-ui,sans-serif;cursor:pointer;transition:color .3s,border-color .3s,background .3s}
.gx-pipe__tabs button b{font:800 12px/1 var(--font-head);color:var(--text-dim)}
.gx-pipe__tabs button.is-on{border-color:rgba(255,122,107,.55);background:rgba(255,122,107,.1);color:var(--text)}
.gx-pipe__tabs button.is-on b{color:var(--coral)}
.gx-pipe__panels{display:grid}
.gx-leak{grid-area:1/1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:36px;padding:30px;border-radius:26px;border:1px solid var(--edge-2);background:#0E1014;
  opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .45s var(--ease),transform .5s var(--ease)}
.gx-leak.is-on{opacity:1;transform:none;pointer-events:auto}
.gx-leak__k{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--coral)}
.gx-leak h3{margin:8px 0 18px;font-family:var(--font-head);font-weight:800;font-size:clamp(24px,2.2vw,30px);letter-spacing:-.02em}
.gx-leak__list{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:gxl}
.gx-leak__list li{position:relative;padding-left:40px}
.gx-leak__list li::before{counter-increment:gxl;content:counter(gxl);position:absolute;left:0;top:0;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:rgba(255,122,107,.12);font:800 12px/1 var(--font-head);color:var(--coral)}
.gx-leak__list h4{margin:0 0 4px;font-size:16px;color:var(--text)}
.gx-leak__list p{margin:0;font-size:14.5px;line-height:1.55;color:var(--text-mid)}
.gx-ledger{align-self:start;padding:18px;border-radius:18px;border:1px solid var(--edge-2);background:#0A0B0E;font-size:13.5px}
.gx-ledger__k{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim)}
.gx-ledger h4{margin:6px 0 10px;font-size:16px;color:var(--text)}
.gx-ledger table{width:100%;border-collapse:collapse}
.gx-ledger th,.gx-ledger td{padding:9px 0;border-top:1px solid var(--edge);text-align:left;font-weight:500;color:var(--text-soft)}
.gx-ledger td{padding-left:12px;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.gx-ledger tr.is-hi td,.gx-ledger tr.is-good td{color:var(--teal)}
.gx-ledger tr.is-bad td{color:var(--coral)}
.gx-ledger tr.is-bad th{color:var(--text-dim)}
.gx-leak.is-on .gx-ledger tbody tr{animation:gxRowIn .5s var(--ease) both;animation-delay:calc(var(--i) * .12s + .3s)}
.gx-ledger__total{display:flex;justify-content:space-between;gap:12px;margin-top:8px;padding-top:12px;border-top:1px dashed rgba(255,122,107,.45);font-size:13px;color:var(--text-dim)}
.gx-ledger__total strong{font-size:15px;color:var(--coral)}
/* the buttons that turn a leak card over are for phones only */
.gx-leak__turn{display:none}

/* ==========================================================================
   BUDGET: the same month, itemised twice, as two receipts
   ========================================================================== */
.gx-till__k{display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.gx-till__k i{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px rgba(244,160,0,.8)}
.gx-till__pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;align-items:stretch}
.gx-rcpt{--paper:#121418;position:relative;display:flex;flex-direction:column;gap:20px;margin-bottom:14px;padding:30px 32px 30px;border-radius:22px 22px 4px 4px;background:var(--paper);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.95)}
/* the torn edge */
.gx-rcpt::after{content:"";position:absolute;left:0;right:0;bottom:-12px;height:12px;
  background:linear-gradient(135deg,var(--paper) 50%,transparent 50%) 0 0 / 16px 12px repeat-x,linear-gradient(-135deg,var(--paper) 50%,transparent 50%) 0 0 / 16px 12px repeat-x}
.gx-rcpt.is-before{border-top:4px solid var(--coral)}
.gx-rcpt.is-after{border-top:4px solid var(--teal)}
.gx-rcpt__head{display:grid;gap:6px;padding-bottom:18px;border-bottom:2px dashed rgba(255,255,255,.13)}
.gx-rcpt__head h3{margin:0;font-family:var(--font-head);font-weight:800;font-size:30px;line-height:1.05;letter-spacing:-.028em}
.gx-rcpt.is-before .gx-rcpt__head h3{color:var(--coral)}
.gx-rcpt.is-after .gx-rcpt__head h3{color:var(--teal)}
.gx-rcpt__head span{font-size:16px;color:var(--text-dim)}
.gx-rcpt__lines{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.gx-rcpt__lines li{display:grid;grid-template-columns:12px minmax(0,1fr) auto;align-items:baseline;gap:12px;padding:7px 0;font-size:17px;color:var(--text-soft);
  transition:opacity .45s ease calc(var(--i) * .1s + var(--d,0s)),transform .5s var(--ease) calc(var(--i) * .1s + var(--d,0s))}
.gx-rcpt__lines li > i{width:12px;height:12px;border-radius:3px;background:rgba(255,122,107,.75);transform:translateY(1px)}
.gx-rcpt__lines li.is-useful > i{background:var(--teal)}
.gx-rcpt__lines li.is-testing > i{background:var(--gold)}
.gx-rcpt__lines span{display:flex;align-items:baseline;gap:10px;min-width:0}
.gx-rcpt__lines span::after{content:"";flex:1 1 12px;min-width:12px;border-bottom:2px dotted rgba(255,255,255,.16)}
.gx-rcpt__lines b{font:700 18px/1 var(--font-head);font-variant-numeric:tabular-nums;color:var(--coral)}
.gx-rcpt__lines li.is-useful b{color:var(--teal)}
.gx-rcpt__lines li.is-testing b{color:var(--gold)}
.gx-rcpt__lines li.is-zero{opacity:.34}
.gx-rcpt__lines li.is-zero b{color:var(--text-dim)}
.gx-rcpt__bar{display:flex;height:24px;border-radius:8px;background:rgba(255,255,255,.06);overflow:hidden}
.gx-rcpt__bar i{width:var(--w);height:100%;background:rgba(255,122,107,.7);transition:width 1.1s var(--ease) calc(var(--i) * .08s + .5s + var(--d,0s))}
.gx-rcpt__bar i + i{box-shadow:inset 2px 0 0 var(--paper)}
.gx-rcpt__bar i.is-useful{background:var(--teal)}
.gx-rcpt__bar i.is-testing{background:var(--gold)}
.gx-rcpt__total{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:20px;border-top:2px dashed rgba(255,255,255,.13)}
.gx-money__sum strong{display:block;font:800 clamp(46px,4.6vw,66px)/1 var(--font-head);letter-spacing:-.035em;color:var(--teal)}
.gx-money__sum span{display:block;max-width:250px;margin-top:10px;font-size:15.5px;line-height:1.45;color:var(--text-mid)}
.gx-rcpt__stamp{flex:0 0 auto;display:grid;justify-items:center;gap:6px;width:132px;padding:14px 10px 12px;border-radius:14px;border:3px solid currentColor;text-align:center;transform:rotate(-8deg);
  transition:opacity .3s ease calc(1.5s + var(--d,0s)),transform .5s cubic-bezier(.34,1.5,.5,1) calc(1.5s + var(--d,0s))}
.gx-rcpt.is-before .gx-rcpt__stamp{color:var(--coral)}
.gx-rcpt.is-after .gx-rcpt__stamp{color:var(--teal)}
.gx-rcpt__stamp b{font:800 44px/1 var(--font-head);letter-spacing:-.03em}
.gx-rcpt__stamp small{font-size:.5em;margin-left:1px}
.gx-rcpt__stamp em{font-style:normal;font-size:11px;font-weight:800;line-height:1.3;letter-spacing:.06em;text-transform:uppercase}
.gx-money__verdict{margin:auto 0 0;padding:15px 18px;border-radius:14px;background:rgba(255,255,255,.045);font-size:17px;font-weight:600;line-height:1.5;color:var(--text)}
.gx-rcpt.is-after{--d:.45s}
/* printed on the way in; without JS (or with reduced motion) it simply shows */
html.el8-js .gx-till:not(.is-in) .gx-rcpt__lines li{opacity:0;transform:translateY(-8px)}
html.el8-js .gx-till:not(.is-in) .gx-rcpt__bar i{width:0}
html.el8-js .gx-till:not(.is-in) .gx-rcpt__stamp{opacity:0;transform:rotate(-8deg) scale(1.9)}
.gx-till__tabs button{flex:1 1 0;height:40px;padding:0 12px;border:0;border-radius:100px;background:none;color:var(--text-dim);font:600 14px/1 Inter,system-ui,sans-serif;cursor:pointer;transition:background .3s,color .3s}
.gx-till__tabs button.is-on{background:var(--gold);color:#111}

/* ==========================================================================
   APPROACH: seven steps on one track, one at a time with its example
   ========================================================================== */
.gx-plan{display:grid;grid-template-columns:minmax(0,1fr);gap:30px}
.gx-plan__rail{position:relative;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:8px}
.gx-plan__track{position:absolute;left:calc(100% / var(--n) / 2);right:calc(100% / var(--n) / 2);top:25px;height:3px;border-radius:3px;background:rgba(255,255,255,.08)}
.gx-plan__track i{display:block;width:var(--p,0%);height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--teal),var(--gold));transition:width .8s var(--ease)}
.gx-plan__tab{position:relative;display:grid;justify-items:center;align-content:start;gap:12px;padding:0 2px;border:0;background:none;color:var(--text-dim);font:inherit;cursor:pointer}
.gx-plan__tab b{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:2px solid rgba(255,255,255,.18);background:#0A0B0E;font:800 17px/1 var(--font-head);color:var(--text-mid);
  transition:background .35s,border-color .35s,color .35s,box-shadow .35s}
.gx-plan__tab span{font-size:15.5px;font-weight:600;line-height:1.25;text-align:center;transition:color .3s}
.gx-plan__tab:hover span{color:var(--text)}
.gx-plan__tab.is-done b{border-color:var(--teal);color:var(--teal)}
.gx-plan__tab.is-on b{border-color:var(--gold);background:var(--gold);color:#111;box-shadow:0 0 0 7px rgba(244,160,0,.13),0 0 26px rgba(244,160,0,.5)}
.gx-plan__tab.is-on span{color:var(--text)}
.gx-plan__tab:focus-visible{outline:none}
.gx-plan__tab:focus-visible b{outline:2px solid var(--gold);outline-offset:4px}
.gx-plan__stage{display:grid}
.gx-plan__step{grid-area:1 / 1;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center;gap:48px;padding:40px;border-radius:30px;border:1px solid var(--edge-2);
  background:linear-gradient(180deg,#101217,#0A0B0E);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .45s var(--ease),transform .55s var(--ease)}
.gx-plan__step.is-on{opacity:1;transform:none;pointer-events:auto}
.gx-plan__k{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.gx-plan__k b{display:none}
.gx-plan__copy h3{margin:14px 0 16px;font-family:var(--font-head);font-weight:800;font-size:clamp(30px,3vw,44px);line-height:1.04;letter-spacing:-.032em;text-wrap:balance}
.gx-plan__copy p{margin:0;font-size:18px;line-height:1.62;color:var(--text-mid)}
.gx-plan__pts{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.gx-plan__pts li{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:100px;border:1px solid var(--teal-line);background:var(--teal-soft);font-size:15px;font-weight:600;line-height:1.25;color:var(--text)}
.gx-plan__pts svg{flex:0 0 auto;width:15px;height:15px;fill:none;stroke:var(--teal);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.gx-plan__step.is-on .gx-plan__pts li{animation:gxRowIn .5s var(--ease) both;animation-delay:calc(var(--i) * .12s + .25s)}
.gx-plan__vis{position:relative;display:grid;align-content:center;min-height:400px;padding:58px 34px 34px;border-radius:24px;border:1px solid var(--edge);
  background:radial-gradient(70% 60% at 50% 40%,rgba(244,160,0,.07),transparent 70%),#08090C}
.gx-plan__label{position:absolute;z-index:2;top:20px;left:22px;display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim)}
.gx-plan__label i{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px rgba(244,160,0,.8);animation:gxBlink 1.6s steps(2) infinite}
/* the working examples, larger than before (resources/views/industries/gads/trades/example.blade.php) */
.gxw{width:100%;max-width:520px;margin:0 auto}
.gxw .wdp-panel__title{padding:18px 22px 8px;font-size:23px}
.gxw .wdp-panel__row{padding:14px 10px;font-size:16px}
.gxw .wdp-panel__row b,.gxw-tree__leaf b,.gxw-area__row b{padding:3px 11px;border-radius:100px;font-size:13px;font-weight:700;color:var(--text-mid)}
.gxw .is-teal b{background:var(--teal-soft);color:var(--teal)}
.gxw .is-gold b{background:var(--gold-soft);color:var(--gold)}
.gxw .is-cut b{background:rgba(255,122,107,.12);color:var(--coral)}
.gxw-rows{display:grid;padding:6px 12px 14px}
.gx-plan__step.is-on .gxw-rows .wdp-panel__row{animation:gxRowIn .5s var(--ease) both;animation-delay:calc(var(--i) * .15s + .2s)}
.gxw-tree{display:grid;gap:16px;padding:8px 22px 22px}
.gxw-tree__root{justify-self:center;display:grid;justify-items:center;gap:3px;padding:12px 22px;border-radius:14px;background:var(--gold);color:#111;font-size:13.5px;text-align:center}
.gxw-tree__root .is-k{font-weight:800;font-size:16px}
.gxw-tree__branches{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding-top:20px}
.gxw-tree__branches::before{content:"";position:absolute;left:16.6%;right:16.6%;top:0;height:16px;border:1.5px solid rgba(255,255,255,.2);border-bottom:0;border-radius:8px 8px 0 0}
.gxw-tree__branches::after{content:"";position:absolute;left:50%;top:-16px;height:16px;border-left:1.5px solid rgba(255,255,255,.2)}
.gxw-tree__leaf{display:grid;justify-items:center;gap:9px;padding:14px 8px;border-radius:14px;border:1px solid var(--edge-2);background:#111419;font-size:14.5px;line-height:1.3;text-align:center;color:var(--text-soft)}
.gxw-tree__leaf.is-cut span{text-decoration:line-through;text-decoration-color:var(--coral)}
.gx-plan__step.is-on .gxw-tree__leaf{animation:gxRowIn .5s var(--ease) both;animation-delay:calc(var(--i) * .15s + .3s)}
.gxw-area{display:grid;grid-template-columns:140px minmax(0,1fr);align-items:center;gap:20px;padding:8px 22px 22px}
.gxw-area__map{position:relative;aspect-ratio:1}
.gxw-area__ring{position:absolute;border-radius:50%}
.gxw-area__ring.is-far{inset:0;border:1.5px dashed rgba(255,122,107,.55);background:rgba(255,122,107,.07)}
.gxw-area__ring.is-mid{inset:18%;border:1.5px solid var(--gold-line);background:rgba(244,160,0,.1)}
.gxw-area__ring.is-home{inset:34%;border:1.5px solid var(--teal);background:rgba(79,191,160,.22)}
.gx-plan__step.is-on .gxw-area__ring{animation:gxRingIn .7s var(--ease) both}
.gx-plan__step.is-on .gxw-area__ring.is-mid{animation-delay:.15s}
.gx-plan__step.is-on .gxw-area__ring.is-far{animation-delay:.3s}
@keyframes gxRingIn{from{opacity:0;transform:scale(.6)}}
.gxw-area__pin{position:absolute;left:50%;top:50%;width:24px;height:24px;margin:-18px 0 0 -12px;color:var(--text)}
.gxw-area__pin svg{width:100%;height:100%}
.gxw-area__x{position:absolute;right:4%;top:4%;width:14px;height:14px}
.gxw-area__x::before,.gxw-area__x::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--coral);transform:rotate(45deg)}
.gxw-area__x::after{transform:rotate(-45deg)}
.gxw-area__row{display:grid;grid-template-columns:12px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--edge)}
.gxw-area__row:first-child{border-top:0}
.gxw-area__row > i{width:12px;height:12px;border-radius:50%}
.gxw-area__row.is-home > i{background:var(--teal)}
.gxw-area__row.is-mid > i{background:var(--gold)}
.gxw-area__row.is-far > i{background:var(--coral)}
.gxw-area__row span{display:grid;gap:2px;min-width:0}
.gxw-area__row em{font-style:normal;font-size:13px;line-height:1.35;color:var(--text-dim)}
.gxw-area__row em.is-k{font-size:15.5px;font-weight:600;color:var(--text)}
.gxw-area__row.is-home b{background:var(--teal-soft);color:var(--teal)}
.gxw-area__row.is-mid b{background:var(--gold-soft);color:var(--gold)}
.gxw-area__row.is-far b{background:rgba(255,122,107,.12);color:var(--coral)}
.gxw-term__q{display:inline-flex;align-items:center;gap:9px;min-width:0}
.gxw-term__q svg{flex:0 0 auto;width:16px;height:16px;color:var(--text-dim)}
.gxw-term.is-cut .gxw-term__q span{text-decoration:line-through;text-decoration-color:var(--coral);color:var(--text-dim)}
.gxw .gxw-call{display:grid;grid-template-columns:32px minmax(0,1fr) 40px auto;align-items:center;gap:12px}
.gxw-call__ic{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--teal-soft);color:var(--teal)}
.gxw-call.is-gold .gxw-call__ic{background:var(--gold-soft);color:var(--gold)}
.gxw-call.is-cut .gxw-call__ic{background:rgba(255,122,107,.12);color:var(--coral)}
.gxw-call__ic svg{width:16px;height:16px}
.gxw-call__t{min-width:0;font-size:15px}
.gxw-call__wave{display:flex;align-items:center;gap:2px;height:20px}
.gxw-call__wave i{flex:1;height:100%;border-radius:2px;background:var(--teal);transform:scaleY(.3);animation:gxVoice 1.1s ease-in-out infinite;animation-delay:calc(var(--w) * -.15s)}
.gxw-call.is-gold .gxw-call__wave i{background:var(--gold)}
.gxw-call.is-cut .gxw-call__wave i{background:rgba(255,122,107,.4);animation:none}
.gxw-day{padding:12px 22px 22px}
.gxw-day__bar{position:relative;display:flex;height:48px;border-radius:12px;border:1px solid var(--edge);overflow:hidden}
.gxw-day__bar > i{width:var(--w)}
.gxw-day__bar .is-off{background:repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 6px,transparent 6px 12px)}
.gxw-day__bar .is-full{background:var(--teal)}
.gxw-day__bar .is-low{background:rgba(244,160,0,.55)}
.gxw-day__now{position:absolute;inset:0;pointer-events:none;animation:gxNow 9s linear infinite}
.gxw-day__now::after{content:"";position:absolute;left:0;top:-4px;bottom:-4px;width:2px;background:#fff;box-shadow:0 0 8px #fff}
@keyframes gxNow{from{transform:none}to{transform:translateX(100%)}}
.gxw-day__axis{display:flex;justify-content:space-between;margin-top:10px;font-size:13px;color:var(--text-dim)}
.gxw-day__legend{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px;font-size:15px;color:var(--text-soft)}
.gxw-day__legend li{display:flex;align-items:center;gap:10px}
.gxw-day__legend i{width:14px;height:14px;border-radius:4px}
.gxw-day__legend .is-full i{background:var(--teal)}
.gxw-day__legend .is-low i{background:rgba(244,160,0,.55)}
.gxw-day__legend .is-off i{background:repeating-linear-gradient(45deg,rgba(255,255,255,.2) 0 3px,transparent 3px 6px);border:1px solid var(--edge-2)}
.gxw-land{position:relative;display:grid;gap:10px;margin:8px 22px 22px;padding:20px;border-radius:16px;border:1px solid var(--edge-2);background:#111419}
.gxw-land__url{font:500 13px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--teal)}
.gxw-land__h{font-family:var(--font-head);font-weight:800;font-size:25px;line-height:1.15;color:var(--text)}
.gxw-land__match{display:inline-flex;align-items:center;gap:7px;font-size:14.5px;color:var(--teal)}
.gxw-land__match i{font-style:normal;font-weight:800}
.gxw-land__call{position:relative;justify-self:start;padding:12px 22px;border-radius:100px;background:var(--gold);color:#111;font-size:15px}
.gx-plan__step.is-on .gxw-land__call .gx-tap{animation:gxTap 2.6s ease 1s infinite}
.gxw-land__fold{position:relative;display:block;margin-top:16px;border-top:1.5px dashed rgba(255,255,255,.28)}
.gxw-land__fold small{position:absolute;right:0;top:-20px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim)}

/* ==========================================================================
   ANATOMY: the ad in an exploded view; the part in focus explains itself
   ========================================================================== */
.gx-anat{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);align-items:start;gap:64px}
.gx-xp{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding-left:52px;transition:gap .9s var(--ease) .2s}
.gx-xp::before{content:"";position:absolute;left:17px;top:84px;bottom:26px;border-left:2px dashed rgba(255,255,255,.14)}
.gx-xp__meta{display:flex;align-items:center;gap:10px;padding:4px 6px 6px;font-size:14.5px;color:var(--text-dim)}
.gx-xp__meta b{font-weight:800;color:var(--text)}
.gx-xp__meta span:last-child{min-width:0;overflow-wrap:break-word}
/* review round 2 (.gx-xp__meta--rows): Sponsored on a row of its own
   (.gx-xp__spon); the favicon and the address below it, in one line
   (.gx-xp__site, data-gx-line) */
.gx-xp__meta--rows{flex-wrap:wrap;gap:7px 10px}
.gx-xp__spon{flex:0 0 100%}
.gx-xp__site{display:flex;align-items:center;gap:10px;min-width:0;max-width:100%}
.gx-xp__url{min-width:0;overflow-wrap:break-word}
.gx-xp__fav{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--gold),#FFD27A)}
.gx-xp__part{position:relative;display:flex;align-items:center;min-height:58px;padding:13px 20px;border:1px solid var(--edge-2);border-radius:16px;background:#101318;color:inherit;font:inherit;text-align:left;cursor:pointer;
  box-shadow:0 18px 30px -22px rgba(0,0,0,.9);transition:transform .55s var(--ease),border-color .3s,background .3s,box-shadow .4s,opacity .3s}
.gx-xp__part:hover{border-color:rgba(244,160,0,.5)}
.gx-xp__part:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.gx-xp__n{position:absolute;left:-52px;top:50%;display:grid;place-items:center;width:36px;height:36px;margin-top:-18px;border-radius:50%;border:2px solid rgba(255,255,255,.2);background:#07080A;
  font:800 14px/1 var(--font-head);color:var(--text-mid);transition:background .35s,border-color .35s,color .35s,box-shadow .35s}
.gx-xp__n::after{content:"";position:absolute;left:100%;top:50%;width:16px;border-top:2px dashed rgba(255,255,255,.16)}
.gx-xp__part.is-on{border-color:var(--gold);background:linear-gradient(90deg,rgba(244,160,0,.12),#101318 70%);transform:translateX(16px);box-shadow:0 0 0 4px rgba(244,160,0,.08),0 24px 44px -20px rgba(0,0,0,.95)}
.gx-xp__part.is-on .gx-xp__n{border-color:var(--gold);background:var(--gold);color:#111;box-shadow:0 0 18px rgba(244,160,0,.6)}
.gx-xp__part:not(.is-on) .gx-xp__txt{opacity:.72}
.gx-xp__txt{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 8px;transition:opacity .3s}
.gx-xp__part--1 .gx-xp__txt{font-size:25px;font-weight:700;line-height:1.2;color:#9DB8FF}
.gx-xp__part--2 .gx-xp__txt,.gx-xp__part--3 .gx-xp__txt{font-size:21px;line-height:1.25;color:#9DB8FF}
.gx-xp__part--4 .gx-xp__txt{display:block;font-size:16.5px;line-height:1.55;color:var(--text-mid)}
.gx-xp__price{color:var(--teal)}
.gx-xp__btn{display:inline-flex;align-items:center;gap:9px;padding:9px 18px;border-radius:100px;border:1px solid var(--gold-line);font-weight:700;font-size:16px;color:var(--gold)}
.gx-xp__part--6 .gx-xp__txt{font-size:15.5px;color:var(--text-dim)}
.gx-xp__part svg{width:17px;height:17px}
.gx-xp__links{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:15.5px;color:#9DB8FF}
/* on the way in the parts sit together as one ad, then pull apart */
html.el8-js .gx-anat:not(.is-in) .gx-xp{gap:0}
html.el8-js .gx-anat:not(.is-in) .gx-xp__part{border-color:transparent;box-shadow:none;border-radius:0}
.gx-anat__read{position:relative;transform:translateY(var(--y,0px));transition:transform .7s var(--ease)}
.gx-anat__cards{display:grid}
.gx-anat__card{grid-area:1 / 1;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .4s var(--ease),transform .5s var(--ease)}
.gx-anat__card.is-on{opacity:1;transform:none;pointer-events:auto}
.gx-anat__n{display:block;font:800 68px/1 var(--font-head);letter-spacing:-.04em;color:var(--gold)}
.gx-anat__card h3{margin:16px 0 12px;font-family:var(--font-head);font-weight:800;font-size:clamp(26px,2.5vw,36px);line-height:1.08;letter-spacing:-.026em;text-wrap:balance}
.gx-anat__card p{margin:0;max-width:500px;font-size:18px;line-height:1.62;color:var(--text-mid)}
.gx-anat__steps{display:flex;gap:6px;margin:28px 0 18px}
.gx-anat__steps i{flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.1);transition:background .4s}
.gx-anat__steps i.is-done{background:var(--gold-line)}
.gx-anat__steps i.is-on{background:var(--gold)}
.gx-anat__note{margin:0;font-family:var(--font-head);font-weight:700;font-size:20px;color:var(--text)}

/* ==========================================================================
   MISTAKES: seven flip cards read as four and three, all the same size
   ========================================================================== */
@media (min-width:1081px){
  .gx .gx-flips--7{grid-template-columns:repeat(8,minmax(0,1fr));gap:18px}
  .gx .gx-flips--7 > .wdp-flip:nth-child(n){grid-column:span 2}
  .gx .gx-flips--7 > .wdp-flip:nth-child(5){grid-column:2 / span 2}
  .gx .gx-flips--7 .wdp-flip__face{padding:26px 24px;min-height:270px}
  .gx .gx-flips--7 .wdp-flip__t{font-size:22px}
  .gx .gx-flips--7 .wdp-flip__t--ans{font-size:18.5px;line-height:1.36}
  .gx .gx-flips--7 .wdp-flip__num{font-size:80px}
}

/* ==========================================================================
   EXAMPLES: before, then what changed, then the direction
   ========================================================================== */
.gx-cases{display:grid;gap:18px}
.gx-case{display:grid;grid-template-columns:320px minmax(0,1fr);border-radius:28px;border:1px solid var(--edge-2);background:linear-gradient(180deg,#111318,#0B0C0F);overflow:hidden}
.gx-case__id{display:grid;align-content:start;gap:6px;padding:16px 20px 24px 16px;border-right:1px solid var(--edge)}
.gx-case__art{height:176px;margin-bottom:14px;border-radius:17px;border:1px solid var(--edge);background:#07080A;overflow:hidden}
.gx-case__id h3{margin:0 4px;font-family:var(--font-head);font-weight:800;font-size:25px;line-height:1.1;letter-spacing:-.022em}
.gx-case__when{margin:0 4px;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim)}
.gx-case__flow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1fr)}
.gx-case__step{position:relative;display:grid;align-content:center;gap:12px;padding:30px 34px}
.gx-case__k{font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.gx-case__step.is-before .gx-case__k{color:var(--coral)}
.gx-case__step.is-dir .gx-case__k{color:var(--teal)}
.gx-case__step p{margin:0;font-size:17px;line-height:1.55;color:var(--text-mid)}
.gx-case__step.is-change{background:rgba(244,160,0,.035);border-inline:1px dashed rgba(244,160,0,.28)}
.gx-case__step.is-change p b{display:block;margin-bottom:10px;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.gx-case__step.is-dir{background:linear-gradient(90deg,rgba(79,191,160,.02),rgba(79,191,160,.09))}
.gx-case__step.is-dir p{font-family:var(--font-head);font-size:21px;font-weight:700;line-height:1.3;letter-spacing:-.012em;color:var(--text)}
/* the arrows between the three */
.gx-case__arrow{position:absolute;z-index:2;top:50%;width:30px;height:30px;margin-top:-15px;border-radius:50%;border:1px solid var(--gold-line);background:#15130D}
.gx-case__arrow.is-in{left:-15px}
.gx-case__arrow.is-out{right:-15px}
.gx-case__arrow::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -6px;border-top:2px solid var(--gold);border-right:2px solid var(--gold);transform:rotate(45deg)}
/* the pictures (resources/views/industries/gads/trades/case.blade.php) */
.gxc{display:block;width:100%;height:100%;font-family:Inter,system-ui,sans-serif}
.gxc *{transform-box:fill-box;transform-origin:center}
.gxc-funnel{fill:rgba(244,160,0,.06);stroke:rgba(244,160,0,.4);stroke-width:1.5;stroke-linejoin:round}
.gxc-mesh{stroke:var(--gold);stroke-width:4;stroke-dasharray:10 6;stroke-linecap:round}
.gxc-click{opacity:0}
.gxc-click.is-keep{fill:var(--teal);animation:gxKeep 4.2s ease-in infinite;animation-delay:calc(var(--i) * .45s)}
.gxc-click.is-cut{fill:var(--coral);animation:gxCut 4.2s ease-in infinite;animation-delay:calc(var(--i) * .45s)}
@keyframes gxKeep{0%{opacity:0;transform:none}8%{opacity:1}40%{opacity:1;transform:translate(0,62px)}72%{opacity:1;transform:translate(var(--tx),128px) scale(.7)}80%,100%{opacity:0;transform:translate(var(--tx),140px) scale(.5)}}
@keyframes gxCut{0%{opacity:0;transform:none}8%{opacity:1}40%{opacity:1;transform:translate(0,56px)}70%{opacity:.8;transform:translate(var(--tx),34px)}82%,100%{opacity:0;transform:translate(var(--tx),60px)}}
.gxc-phone{fill:var(--teal);animation:gxBreathe 2.2s ease-in-out infinite}
.gxc-phone__ic{fill:none;stroke:#0A1512;stroke-width:2.4;stroke-linejoin:round}
.gxc-tile{fill:rgba(255,255,255,.045);stroke:rgba(255,255,255,.08)}
.gxc-tile.is-near{fill:rgba(244,160,0,.08);stroke:rgba(244,160,0,.22)}
.gxc-tile.is-home{fill:rgba(244,160,0,.22);stroke:var(--gold)}
.gxc-tile.is-new{fill:rgba(79,191,160,.1);stroke:var(--teal-line);animation:gxLight 5s ease infinite;animation-delay:calc(var(--i) * .8s)}
@keyframes gxLight{0%,15%{fill:rgba(79,191,160,.06)}35%,85%{fill:rgba(79,191,160,.42)}100%{fill:rgba(79,191,160,.06)}}
.gxc-tile.is-off{fill:transparent;stroke:rgba(255,122,107,.3);stroke-dasharray:3 3}
.gxc-go{fill:none;stroke:var(--teal);stroke-width:2;stroke-dasharray:4 5;animation:gxDash 1.8s linear infinite}
.gxc-ping{fill:none;stroke:var(--teal);stroke-width:2;opacity:0;animation:gxPing2 5s ease-out infinite;animation-delay:calc(var(--i) * .8s + .6s)}
@keyframes gxPing2{0%,20%{opacity:0;transform:scale(.6)}28%{opacity:.9}55%,100%{opacity:0;transform:scale(1.7)}}
.gxc-pin{fill:var(--gold)}
.gxc-pin__dot{fill:#111}
.gxc-bar{fill:rgba(244,160,0,.2);stroke:rgba(244,160,0,.35)}
.gxc-m{font-size:11px;font-weight:600;fill:var(--text-dim)}
.gxc-flat{stroke:var(--coral);stroke-width:2;stroke-dasharray:6 5;opacity:.85}
.gxc-paced{fill:none;stroke:var(--teal);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;filter:drop-shadow(0 0 5px rgba(79,191,160,.5));animation:gxPace 6s ease infinite}
@keyframes gxPace{0%,10%{stroke-dashoffset:1}55%,92%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}

/* ==========================================================================
   ADS AGAINST SEO: the tap and the wall, then the same four rows side by side
   ========================================================================== */
.gx-vs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(8,auto);column-gap:22px}
.gx-vs__col{grid-row:span 8;display:grid;grid-template-rows:subgrid;padding:16px 28px 14px;border-radius:30px;border:1px solid var(--edge-2);background:#0E1014}
.gx-vs__col--ads{border-color:var(--gold-line);background:linear-gradient(180deg,rgba(244,160,0,.06),#0E1014 50%)}
.gx-vs__col--seo{border-color:var(--teal-line);background:linear-gradient(180deg,rgba(79,191,160,.05),#0E1014 50%)}
.gx-vs__scene{height:200px;margin:0 -12px 24px;border-radius:20px;border:1px solid var(--edge);background:#07080A;overflow:hidden}
.gx-vs__k{font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.gx-vs__col--seo .gx-vs__k{color:var(--teal)}
.gx-vs__col h3{margin:8px 0 12px;font-family:var(--font-head);font-weight:800;font-size:36px;letter-spacing:-.03em}
.gx-vs__d{margin:0 0 18px;font-size:17px;line-height:1.6;color:var(--text-mid)}
.gx-vs__d a{color:var(--teal);font-weight:600}
.gx-vs__d strong{color:var(--text)}
.gx-vs__list{display:contents;list-style:none}
.gx-vs__list li{display:flex;align-items:baseline;gap:12px;padding:15px 0;border-top:1px solid var(--edge);font-size:17px;line-height:1.45;color:var(--text-soft)}
.gx-vs__list li span{flex:0 0 auto;font-weight:800;color:var(--gold)}
.gx-vs__col--seo .gx-vs__list li span{color:var(--teal)}
.gx-vs__list li.is-minus span{color:var(--coral)}
.gx-vs__tabs button{flex:1 1 0;height:40px;padding:0 12px;border:0;border-radius:100px;background:none;color:var(--text-dim);font:600 14px/1 Inter,system-ui,sans-serif;cursor:pointer}
.gx-vs__tabs button.is-on{background:var(--gold);color:#111}
.gx-verdict{display:flex;align-items:flex-start;gap:14px;margin:26px 0 0;padding:22px 26px;border-radius:22px;border:1px solid var(--edge-2);background:#0E1014;font-size:17px;line-height:1.6;color:var(--text-mid)}
.gx-verdict a{color:var(--gold);font-weight:600}
.gx-verdict__ic{flex:0 0 auto;width:11px;height:11px;margin-top:8px;background:var(--gold);transform:rotate(45deg)}
/* the pictures (resources/views/industries/gads/trades/versus.blade.php) */
.gxv{display:block;width:100%;height:100%}
.gxv *{transform-box:fill-box;transform-origin:center}
.gxv-pipe{fill:none;stroke:#343943;stroke-width:16;stroke-linecap:round}
.gxv-spout{fill:none;stroke:#4A505B;stroke-width:14;stroke-linecap:round;stroke-linejoin:round}
.gxv-handle path{fill:none;stroke:var(--gold);stroke-width:6;stroke-linecap:round}
.gxv-handle{transform-origin:50% 100%;animation:gxTapTurn 8s ease-in-out infinite}
@keyframes gxTapTurn{0%,60%{transform:none}66%,88%{transform:rotate(90deg)}94%,100%{transform:none}}
.gxv-flow{fill:none;stroke:var(--gold);stroke-width:5;stroke-linecap:round;stroke-dasharray:2 12;animation:gxFlow2 .9s linear infinite,gxFlowOn 8s ease infinite}
@keyframes gxFlow2{to{stroke-dashoffset:-14}}
@keyframes gxFlowOn{0%,62%{opacity:1}66%,90%{opacity:0}95%,100%{opacity:1}}
.gxv-vis{fill:rgba(244,160,0,.55);transform-origin:50% 100%;animation:gxVisOn 8s ease infinite;animation-delay:calc(var(--i) * .04s)}
@keyframes gxVisOn{0%,62%{transform:none}70%,90%{transform:scaleY(.06)}98%,100%{transform:none}}
.gxv-base{stroke:rgba(255,255,255,.14);stroke-width:1.5}
.gxv-halo{fill:rgba(244,160,0,.08)}
.gxv-phone{fill:var(--gold);animation:gxPhoneOn 8s ease infinite}
@keyframes gxPhoneOn{0%,62%{opacity:1}68%,90%{opacity:.25}96%,100%{opacity:1}}
.gxv-phone__ic{fill:none;stroke:#111;stroke-width:2.3;stroke-linejoin:round}
.gxv-ring{fill:none;stroke:var(--gold);stroke-width:2.4;stroke-linecap:round;animation:gxPhoneOn 8s ease infinite}
.gxv-brick{fill:rgba(79,191,160,.22);stroke:var(--teal);stroke-width:1.2;animation:gxBrick 11s ease infinite backwards;animation-delay:calc(var(--i) * .16s)}
@keyframes gxBrick{0%{opacity:0;transform:translateY(-14px)}3%,88%{opacity:1;transform:none}96%,100%{opacity:0}}
.gxv-trend{fill:none;stroke:var(--teal);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1 1;animation:gxTrend 11s ease infinite}
@keyframes gxTrend{0%,20%{stroke-dashoffset:1;opacity:1}60%,88%{stroke-dashoffset:0;opacity:1}96%,100%{stroke-dashoffset:0;opacity:0}}
.gxv-call circle{fill:var(--teal)}
.gxv-call .gxv-phone__ic{stroke:#0A1512;stroke-width:3}
.gxv-call{animation:gxCallPop 11s ease infinite backwards;animation-delay:calc(var(--i) * .5s)}
@keyframes gxCallPop{0%,52%{opacity:0;transform:scale(.4)}58%,88%{opacity:1;transform:none}96%,100%{opacity:0}}

/* ==========================================================================
   KEEP EXPLORING: the web design card's picture (the shared styles for it
   live in the SEO pages' stylesheet, which this page does not load)
   ========================================================================== */
.gx .wpa-site{position:absolute;inset:18px 26px 0;display:grid;align-content:start;gap:9px;padding:0 18px 18px;border-radius:14px 14px 0 0;border:1px solid var(--edge-2);border-bottom:0;background:#101318;overflow:hidden}
.gx .wpa-site__bar{display:flex;gap:5px;margin:0 -18px 6px;padding:10px 14px;border-bottom:1px solid var(--edge)}
.gx .wpa-site__bar i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.18)}
.gx .wpa-site__h{height:10px;width:70%;border-radius:5px;background:rgba(255,255,255,.4)}
.gx .wpa-site__h.s{width:46%;background:var(--gold)}
.gx .wpa-site__btn{width:84px;height:20px;border-radius:10px;background:var(--gold);box-shadow:0 8px 20px -8px rgba(244,160,0,.8)}
.gx .wpa-site__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:4px}
.gx .wpa-site__cards i{height:40px;border-radius:8px;border:1px solid var(--edge);background:rgba(255,255,255,.03)}
.gx .wdp-path.is-in .wpa-site > :not(.wpa-site__bar){animation:gxBuild 6s var(--ease) infinite}
.gx .wdp-path.is-in .wpa-site > :nth-child(3){animation-delay:.15s}
.gx .wdp-path.is-in .wpa-site > :nth-child(4){animation-delay:.3s}
.gx .wdp-path.is-in .wpa-site > :nth-child(5){animation-delay:.45s}
@keyframes gxBuild{0%{opacity:0;transform:translateY(8px)}12%,86%{opacity:1;transform:none}100%{opacity:0}}

/* ==========================================================================
   THREE WAYS TO START
   ========================================================================== */
.gx-start__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.gx-start{display:flex;flex-direction:column;gap:12px;padding:18px 18px 22px;border-radius:26px;border:1px solid var(--edge-2);background:linear-gradient(180deg,#111318,#0B0C0F)}
.gx-start__art{position:relative;height:160px;border-radius:16px;border:1px solid var(--edge);background:#0A0B0E;overflow:hidden}
.gx-start__n{position:absolute;z-index:1;left:12px;top:10px;font:800 13px/1 var(--font-head);color:var(--gold)}
.gx-start__t{margin:6px 0 0;font-family:var(--font-head);font-weight:800;font-size:22px;letter-spacing:-.02em}
.gx-start__d{margin:0;font-size:15px;line-height:1.6;color:var(--text-mid)}
.gx-start__out{margin-top:auto;padding:12px 14px;border-radius:14px;border:1px solid var(--teal-line);background:rgba(79,191,160,.06)}
.gx-start__out span{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--teal)}
.gx-start__out p{margin:4px 0 0;font-size:14px;line-height:1.5;color:var(--text)}
.gx-start__btn{align-self:flex-start;margin-top:4px}
.gxs{position:absolute;inset:0}
.gxs svg{position:absolute;inset:0;width:100%;height:100%}
/* a plan drawing itself (one SVG: stems always meet their boxes) */
.gxs-plan__line{fill:none;stroke:rgba(244,160,0,.6);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1}
.gxs-plan__root{fill:var(--gold)}
.gxs-plan__node{fill:rgba(79,191,160,.14);stroke:rgba(79,191,160,.5);stroke-width:1}
.gxs-plan__leaf{fill:rgba(79,191,160,.22);stroke:var(--teal);stroke-width:1}
.gxs-plan__node,.gxs-plan__leaf{transform-box:fill-box;transform-origin:center}
.gx-start.is-in .gxs-plan__line{animation:gxPlan 6s ease infinite}
@keyframes gxPlan{0%{stroke-dashoffset:1}40%,90%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.gx-start.is-in .gxs-plan__node,.gx-start.is-in .gxs-plan__leaf{animation:gxPop 6s ease infinite;animation-delay:calc(var(--i) * .2s + 1s)}
.gx-start.is-in .gxs-plan__leaf{animation-delay:calc(var(--i) * .2s + 1.6s)}
@keyframes gxPop{0%,6%{opacity:0;transform:scale(.4)}14%,88%{opacity:1;transform:none}100%{opacity:0}}
/* a leaking account, patched: the drip stops, the bar fills back up and turns healthy */
.gxs-fix__base{stroke:var(--edge-2);stroke-width:1}
.gxs-fix__bar{fill:rgba(79,191,160,.55)}
.gxs-fix__bar.is-leak{fill:var(--coral);transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(.46)}
.gxs-fix__crack{fill:none;stroke:#7A2A22;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.gxs-fix__pool{fill:rgba(255,107,91,.5)}
.gxs-fix__drop{fill:var(--coral);opacity:0}
.gxs-fix__patch{fill:var(--teal);opacity:0}
.gxs-fix__ok{opacity:0;transform-box:fill-box;transform-origin:center}
.gxs-fix__ok circle{fill:var(--teal)}
.gxs-fix__ok path{fill:none;stroke:#0A1512;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gx-start.is-in .gxs-fix__bar.is-leak{animation:gxFixBar 6s ease infinite}
@keyframes gxFixBar{0%,50%{fill:var(--coral);transform:scaleY(.46)}64%,92%{fill:rgba(79,191,160,.55);transform:none}100%{fill:var(--coral);transform:scaleY(.46)}}
.gx-start.is-in .gxs-fix__crack{animation:gxFixGone 6s ease infinite}
.gx-start.is-in .gxs-fix__pool{animation:gxFixGone 6s ease infinite}
@keyframes gxFixGone{0%,48%{opacity:1}58%,94%{opacity:0}100%{opacity:1}}
.gx-start.is-in .gxs-fix__drop{animation:gxFixDrop 6s ease-in infinite}
.gx-start.is-in .gxs-fix__drop.is-b{animation-delay:.6s}
@keyframes gxFixDrop{0%,2%{opacity:0;transform:none}5%{opacity:.95}15%{opacity:0;transform:translateY(12px)}20%{opacity:0;transform:none}23%{opacity:.95}33%,100%{opacity:0;transform:translateY(12px)}}
.gx-start.is-in .gxs-fix__patch{animation:gxFixPatch 6s cubic-bezier(.3,1.4,.5,1) infinite}
@keyframes gxFixPatch{0%,38%{opacity:0;transform:translateY(-28px)}47%,66%{opacity:1;transform:none}76%,100%{opacity:0;transform:none}}
.gx-start.is-in .gxs-fix__ok{animation:gxFixOk 6s ease infinite}
@keyframes gxFixOk{0%,62%{opacity:0;transform:scale(.4)}70%,90%{opacity:1;transform:none}96%,100%{opacity:0}}
/* a map, and your pin arriving */
.gxs-map__grid{position:absolute;inset:0;background-image:linear-gradient(rgba(79,191,160,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(79,191,160,.1) 1px,transparent 1px);background-size:22px 22px}
.gxs-map__pin{position:absolute;left:var(--x);top:var(--y);width:18px;height:18px;margin:-18px 0 0 -9px;border-radius:50% 50% 50% 0;background:#6E7FD9;transform:rotate(-45deg)}
.gxs-map__pin.is-you{background:var(--gold);box-shadow:0 0 16px rgba(244,160,0,.7);opacity:0}
.gx-start.is-in .gxs-map__pin.is-you{animation:gxPinDrop 6s cubic-bezier(.34,1.5,.5,1) infinite}
@keyframes gxPinDrop{0%,20%{opacity:0;transform:translateY(-30px) rotate(-45deg)}32%,90%{opacity:1;transform:rotate(-45deg)}100%{opacity:0;transform:rotate(-45deg)}}
.gxs-map__ring{position:absolute;left:50%;top:58%;width:30px;height:30px;margin:-15px;border-radius:50%;border:1.5px solid var(--gold);opacity:0}
.gx-start.is-in .gxs-map__ring{animation:gxPing 6s ease-out infinite}
@keyframes gxPing{0%,32%{opacity:0;transform:scale(.5)}36%{opacity:1}60%,100%{opacity:0;transform:scale(3)}}

/* ==========================================================================
   GETTING STARTED: the conversation, then the setup
   ========================================================================== */
.gx-need__stages{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:22px}
.gx-need__label{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.gx-need__label span{display:grid;place-items:center;flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--gold);font:800 13px/1 var(--font-head);color:#111}
.gx-need__stage--setup .gx-need__label span{background:var(--teal);color:#0A1512}
.gx-need__label h3{margin:0;font-family:var(--font-head);font-weight:800;font-size:22px;letter-spacing:-.02em}
.gx-need__cards{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.gx-need__ic{display:grid;place-items:center;width:38px;height:38px;margin-bottom:10px;border-radius:12px;border:1px solid var(--edge-2);color:var(--gold)}
.gx-need__ic svg{width:18px;height:18px}
/* both stages start their cards on one line and end on one line */
.gx-need__stage{display:flex;flex-direction:column}
.gx-need__cards,.gx-need__stage--setup .wdp-need__card{flex:1}
.gx-need__d{margin:20px 0 0;padding-top:16px;border-top:1px dashed var(--edge-2);font-size:14px;line-height:1.6;color:var(--text-dim)}


/* ==========================================================================
   Tablet and phone
   ========================================================================== */
@media (max-width:1180px) and (min-width:1081px){
  .gx-rule__t{font-size:20px}
}
@media (max-width:1080px){
  .gx-auction{width:100%;max-width:640px;margin:0 auto}
  /* the storyboard: the shared frames side by side, then each lane in full */
  .gx-sb{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;gap:14px}
  .gx-sb__ruler,.gx-sb__fork,.gx-sb__join--ab{display:none}
  .gx-sb__f--a,.gx-sb__f--b{grid-column:auto;grid-row:auto}
  .gx-sb__lane{grid-column:1 / -1;grid-row:auto!important;margin-top:8px}
  .gx-takeaway{grid-template-columns:minmax(0,1fr)}
  .gx-rules__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gx-leak{grid-template-columns:minmax(0,1fr);gap:22px}
  .gx-till__pair{gap:24px}
  .gx-rcpt{padding:26px 24px}
  .gx-rcpt__total{flex-wrap:wrap}
  .gx-plan__tab span{font-size:13.5px}
  .gx-plan__step{grid-template-columns:minmax(0,1fr);gap:28px;padding:30px}
  .gx-plan__vis{min-height:0}
  .gx-anat{grid-template-columns:minmax(0,1fr);gap:40px}
  .gx-anat__read{transform:none}
  .gx-case{grid-template-columns:260px minmax(0,1fr)}
  .gx-case__flow{grid-template-columns:minmax(0,1fr)}
  .gx-case__step{padding:22px 26px}
  .gx-case__step.is-change{border-inline:0;border-block:1px dashed rgba(244,160,0,.28)}
  .gx-case__arrow.is-in{left:28px;top:0}
  .gx-case__arrow.is-out{left:28px;right:auto;top:100%}
  .gx-case__arrow::after{transform:rotate(135deg);margin:-6px 0 0 -4px}
  .gx-need__stages{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  /* hero: the phone keeps its screen, full width: the whole query, then
     the results with their places numbered, your ad first above the two
     rivals. The auction that put it there, the call and the line follow */
  .gx-auction{display:flex;flex-direction:column;gap:12px;min-height:0;padding:14px 10px 18px;border-radius:26px}
  .gx-au__halo{right:-200px;top:40px}
  .gx-au__phone{position:relative;right:auto;top:auto;width:auto;height:auto;gap:10px;padding:10px 8px 12px;border-radius:30px;
    box-shadow:inset 0 0 0 5px #06070A,inset 0 0 0 6px rgba(255,255,255,.06),0 30px 60px -30px #000}
  .gx-au__status{height:24px;padding:4px 20px 0;font-size:12px}
  .gx-au__island{width:66px;height:19px}
  .gx-au__bar{padding:0 2px}
  .gx-au__serp{counter-reset:gx-pos;gap:8px;padding:0 2px}
  .gx-au__org{display:none}
  .gx-au__ad{gap:5px;padding:10px 10px 11px 40px;border-radius:14px}
  .gx-au__ad::before{counter-increment:gx-pos;content:counter(gx-pos);position:absolute;left:10px;top:10px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
    background:rgba(255,255,255,.08);font:800 11.5px/1 var(--font-head);color:var(--text-mid)}
  .gx-au__ad.is-you::before{background:var(--gold);color:#111;box-shadow:0 0 12px rgba(244,160,0,.55)}
  .gx-au__meta{min-height:22px;gap:3px 5px;font-size:12px}
  .gx-au__meta .is-you{padding:1px 6px}
  .gx-au__ad:not(.is-you) .gx-au__lines i.s{display:none}
  .gx-au__t{margin-right:48px;font-size:15.5px}
  .gx-auction.is-run .gx-au__serp > li{opacity:.22;transform:none}
  .gx-auction.is-run .gx-au__ring{opacity:.28;transform:none}
  .gx-auction.is-run.is-serp .gx-au__serp > li,.gx-auction.is-run.is-call .gx-au__ring{opacity:1}
  .gx-au__board{position:relative;left:auto;top:auto;width:auto;padding:14px 16px 16px;gap:12px}
  .gx-au__ring{position:relative;left:auto;top:auto;width:auto}
  .gx-auction__cap{position:relative;left:auto;bottom:auto;width:auto;margin-top:4px;font-size:16px}
  .gx-race{padding:16px 12px 16px;border-radius:24px}
  .gx-race__mast{margin:0 4px 14px}
  .gx-race__tag .is-k{font-size:17px}
  .gx-race__clock{padding:7px 14px}
  .gx-race__clock b{font-size:20px}
  .gx-sb{grid-template-columns:minmax(0,1fr);gap:12px}
  .gx-sb__lane{grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:10px;margin-top:10px}
  .gx-sb__lane > .gx-sb__f:nth-of-type(n){grid-column:auto}
  .gx-sb__join{display:none}
  .gx-sb__f{padding:16px 16px 18px}
  .gx-sb__art{min-height:170px}
  .gx-sb__stamp b{font-size:24px}
  .gx-sb__f h3{font-size:20px}
  /* with JS the storyboard plays one moment at a time on a stage that keeps
     the height of its tallest moment (without JS every frame stacks). The
     two lanes of a moment show together, with your ad above, without below */
  html.el8-js .gx-sb__thumb{display:grid;gap:8px;margin-top:12px}
  html.el8-js .gx-sb__go{display:none}
  html.el8-js .gx-sb__steps{--p:0;position:relative;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr))}
  html.el8-js .gx-sb__steps::before,html.el8-js .gx-sb__steps::after{content:"";position:absolute;left:calc(50% / var(--n,4));top:8px;height:3px;border-radius:3px}
  html.el8-js .gx-sb__steps::before{right:calc(50% / var(--n,4));background:rgba(255,255,255,.1)}
  html.el8-js .gx-sb__steps::after{width:calc((100% - 100% / var(--n,4)) * var(--p));background:linear-gradient(90deg,var(--teal),var(--gold));transition:width .8s var(--ease)}
  .gx-sb__steps button{position:relative;z-index:1;display:grid;justify-items:center;align-content:start;gap:6px;min-width:0;padding:0 2px 2px;border:0;background:none;color:var(--text-dim);font:inherit;cursor:pointer}
  .gx-sb__steps i{width:19px;height:19px;border-radius:50%;border:2px solid rgba(255,255,255,.26);background:#0D0F13;transition:background .35s,border-color .35s,box-shadow .35s}
  .gx-sb__steps .is-done i{border-color:var(--teal);background:var(--teal)}
  .gx-sb__steps .is-now i{border-color:var(--gold);background:var(--gold);box-shadow:0 0 0 5px rgba(244,160,0,.15),0 0 14px rgba(244,160,0,.6)}
  .gx-sb__steps b{font:800 17px/1 var(--font-head);font-variant-numeric:tabular-nums;color:var(--text-mid)}
  .gx-sb__steps span{font-size:11.5px;font-weight:600;line-height:1.2;text-align:center}
  .gx-sb__steps .is-now b{color:var(--text)}
  .gx-sb__steps .is-now span{color:var(--gold)}
  .gx-sb__steps button:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:10px}
  .gx-sb__steps button{min-height:48px}
  /* previous / next: thumb sized, the next moment named in full */
  .gx-sb__ctl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px}
  .gx-sb__step{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:48px;padding:0 18px;border-radius:100px;border:1px solid var(--edge-2);background:#101318;color:var(--text-mid);font:inherit;font-size:14px;font-weight:600;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .gx-sb__step b{font-family:var(--font-head);font-weight:800;font-variant-numeric:tabular-nums;color:var(--text)}
  .gx-sb__step span{min-width:0;overflow:hidden;white-space:nowrap}
  .gx-sb__step em{font-style:normal}
  .gx-sb__step.is-prev em{display:none}
  .gx-sb__step svg{flex:0 0 auto;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
  .gx-sb__step.is-next{border-color:var(--gold-line);background:var(--gold-soft);color:var(--text)}
  .gx-sb__step.is-next svg{color:var(--gold)}
  .gx-sb__step:disabled{visibility:hidden}
  .gx-sb__step:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
  html.el8-js .gx-sb{grid-template-rows:auto minmax(0,1fr) auto minmax(0,1fr);gap:8px;touch-action:pan-y}
  html.el8-js .gx-race__mast{flex-wrap:nowrap;align-items:flex-start}
  html.el8-js .gx-sb__lane{display:contents}
  html.el8-js .gx-sb__f--a,html.el8-js .gx-sb__f--b{grid-column:1;grid-row:1 / 5}
  /* both frames of a lane share one cell: only the moment in view shows */
  html.el8-js .gx-sb__lane > .gx-sb__f:nth-of-type(n),html.el8-js .gx-sb__lane > .gx-sb__lk{grid-column:1}
  html.el8-js .gx-sb__lane.is-you > .gx-sb__lk{grid-row:1}
  html.el8-js .gx-sb__lane.is-you > .gx-sb__f{grid-row:2}
  html.el8-js .gx-sb__lane.is-lost > .gx-sb__lk{grid-row:3;margin-top:6px}
  html.el8-js .gx-sb__lane.is-lost > .gx-sb__f{grid-row:4}
  html.el8-js .gx-race .gx-sb__f,html.el8-js .gx-race .gx-sb__lk{opacity:0;visibility:hidden;transform:translateX(16px);
    transition:opacity .25s ease,transform .35s var(--ease),visibility 0s .35s}
  html.el8-js .gx-race[data-now="0"] .gx-sb__f[data-at="0"],html.el8-js .gx-race[data-now="1"] .gx-sb__f[data-at="1"],
  html.el8-js .gx-race[data-now="2"] .gx-sb__f[data-at="2"],html.el8-js .gx-race[data-now="3"] .gx-sb__f[data-at="3"],
  html.el8-js .gx-race[data-now="2"] .gx-sb__lk,html.el8-js .gx-race[data-now="3"] .gx-sb__lk{opacity:1;visibility:visible;transform:none;
    transition:opacity .45s ease .1s,transform .55s var(--ease) .1s,visibility 0s}
  html.el8-js .gx-sb__f.is-now{box-shadow:none}
  html.el8-js .gx-sb__f{gap:10px;padding:14px 14px 16px}
  html.el8-js .gx-sb__lane .gx-sb__f{gap:9px;padding:12px 14px 14px}
  html.el8-js .gx-sb__lane .gx-sb__stamp b{font-size:18px}
  html.el8-js .gx-sb__lane .gx-sb__f h3{font-size:18px}
  html.el8-js .gx-sb__lk{padding:5px 11px;font-size:11.5px}
  html.el8-js .gx-lane__ad{gap:5px;padding:10px 12px}
  html.el8-js .gx-lane__rivals{gap:6px}
  html.el8-js .gx-lane__rivals span{padding:8px 11px}
  /* the player (s1) on a phone: the same component in one column. The
     picker's four chapters share the width; a shared moment reads time,
     picture, words; a forked moment stacks its lanes, your ad above */
  .gx-play{gap:12px;padding:14px 12px 12px;border-radius:24px}
  .gx-play__mast{flex-wrap:nowrap;align-items:flex-start;margin:0 4px}
  .gx-play__mast .gx-race__clock{padding:6px 13px}
  .gx-play__mast .gx-race__clock b{font-size:19px}
  html.el8-js .gx-play__picks{gap:6px}
  .gx-play__pick{flex-direction:column;align-items:center;gap:5px;padding:13px 0 2px;text-align:center}
  .gx-play__dot{display:none}
  .gx-play__pick b{font-size:17px}
  .gx-play__pick span{max-width:100%;font-size:11.5px;font-weight:600;letter-spacing:0;line-height:1.2;text-transform:none;white-space:normal;overflow:visible;text-wrap:balance}
  .gx-play .gx-play__f,.gx-play .gx-play__lane .gx-play__f{gap:10px;padding:14px}
  .gx-play__scene--solo .gx-play__f{display:flex;flex-direction:column;align-items:stretch;padding:14px}
  .gx-play__words{display:contents}
  .gx-play__scene--solo .gx-sb__stamp{order:-1}
  .gx-play__scene--solo .gx-play__art{flex:1 1 auto;height:auto;min-height:236px}
  .gx-play__scene--solo .gx-burst svg{position:absolute;inset:0}
  .gx-play__scene--solo .gx-sb__stamp b{font-size:24px}
  .gx-play__scene--solo .gx-sb__stamp span{font-size:12px}
  .gx-play__scene--solo .gx-sb__f h3{font-size:20px}
  .gx-play__scene--solo .gx-sb__copy{gap:6px}
  .gx-play__scene--solo .gx-sb__copy p{font-size:15.5px;line-height:1.5}
  .gx-play__scene--fork{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:12px}
  .gx-play__lane{grid-row:auto;grid-template-rows:none;row-gap:8px}
  .gx-play__lane > .gx-play__f{grid-row:auto;display:flex;grid-template-rows:none}
  .gx-play__lane > .gx-play__f > :nth-child(3){align-self:stretch}
  .gx-play__scene--fork .gx-lane__result{align-self:auto;margin:auto 0 0}
  .gx-play__lk{padding:5px 11px;font-size:11.5px}
  .gx-play__scene--fork .gx-sb__stamp b{font-size:18px}
  .gx-play__scene--fork .gx-sb__f h3{font-size:18px}
  .gx-play__scene--fork .gx-lane__ad{gap:6px;padding:12px 14px}
  .gx-play__scene--fork .gx-lane__ad small{font-size:11.5px}
  .gx-play__scene--fork .gx-lane__ad strong{font-size:16px}
  .gx-play__scene--fork .gx-lane__call{margin-top:2px;padding:8px 15px;font-size:13.5px}
  .gx-play__scene--fork .gx-lane__rivals{gap:6px}
  .gx-play__scene--fork .gx-lane__rivals span{grid-template-columns:14px minmax(0,1fr);gap:5px 10px;padding:9px 12px}
  .gx-play__scene--fork .gx-lane__rivals b{width:14px;height:14px}
  .gx-play__scene--fork .gx-lane__rivals i{height:6px}
  .gx-play__scene--fork .gx-lane__log,.gx-play__scene--fork .gx-lane__gone{gap:6px 12px;padding:12px}
  .gx-play__scene--fork .gx-lane__ring{width:40px;height:40px}
  .gx-play__scene--fork .gx-lane__ring svg{width:18px;height:18px}
  .gx-play__scene--fork .gx-lane__log strong{font-size:15px}
  .gx-play__scene--fork .gx-lane__log div span{font-size:13px}
  .gx-play__scene--fork .gx-lane__voice{gap:3px;height:30px}
  .gx-play__scene--fork .gx-lane__voice i{width:3px}
  .gx-play__scene--fork .gx-lane__result{font-size:15.5px}
  html.el8-js .gx-play__ctl{gap:8px}
  .gx-play__step{gap:7px;height:38px;padding:0 14px;font-size:13.5px}
  /* on a phone the picker above names the moments: previous and next show the time */
  .gx-play__step em{display:none}
  .gx-play__step svg{width:14px;height:14px}
  .gx-takeaway{margin-top:36px}
  .gx-rules__key{margin:-24px 0 22px}
  .gx-rules__key > span{padding:9px 14px;font-size:14px}
  .gx-rule{padding:12px 12px 20px}
  .gx-rule__art{height:170px}
  .gx-pipe__art{height:96px;margin:0 26px}
  .gx-pipe__art > svg{height:80px}
  .gx-pipe__in,.gx-pipe__out{top:40px;width:40px;height:40px;margin-top:-20px;border-radius:12px}
  .gx-pipe__in{left:-26px}
  .gx-pipe__out{right:-26px}
  .gx-pipe__in svg,.gx-pipe__out svg{width:19px;height:19px}
  .gx-pipe__leak{top:40px}
  .gx-pipe__joint{left:-13px;top:-15px;width:26px;height:30px}
  .gx-leak{grid-area:auto;opacity:1;transform:none;pointer-events:auto;padding:20px 18px;align-content:start}
  /* leaks (review round 2): the pipe, the tabs and the whole card fit one
     screen. The card has two faces of one height, the leak's points and its
     account snapshot; the example label turns it over and the leak's name
     turns it back (ind-gax.js adds both buttons). Without JS both faces
     show, one after the other */
  html.el8-js .gx-pipe__car .gx-leak{grid-template-rows:minmax(0,1fr);align-content:stretch;padding:16px 16px 14px}
  html.el8-js .gx-pipe__car .gx-leak > .gx-leak__copy,html.el8-js .gx-pipe__car .gx-leak > .gx-ledger{grid-area:1 / 1;display:flex;flex-direction:column;align-self:stretch;min-width:0;
    transition:opacity .35s ease .05s,transform .45s var(--ease) .05s,visibility 0s}
  html.el8-js .gx-pipe__car .gx-leak:not(.is-snap) > .gx-ledger,html.el8-js .gx-pipe__car .gx-leak.is-snap > .gx-leak__copy{opacity:0;visibility:hidden;transform:translateX(16px);pointer-events:none;
    transition:opacity .2s ease,transform .3s var(--ease),visibility 0s .3s}
  html.el8-js .gx-pipe__car .gx-leak.is-snap > .gx-leak__copy{transform:translateX(-16px)}
  html.el8-js .gx-pipe__car .gx-ledger{margin:0}
  html.el8-js .gx-pipe__car .gx-ledger__k{display:none}
  html.el8-js .gx-pipe__car .gx-ledger h4{margin-top:4px}
  html.el8-js .gx-pipe__car .gx-ledger__total{margin-top:auto}
  html.el8-js .gx-pipe__car .gx-ledger table{margin-bottom:8px}
  .gx-leak h3{margin:6px 0 12px;font-size:21px}
  .gx-leak__list{gap:11px}
  .gx-leak__list li{padding-left:34px}
  .gx-leak__list li::before{width:24px;height:24px;font-size:11.5px}
  .gx-leak__list h4{margin-bottom:2px;font-size:15px}
  .gx-leak__list p{font-size:14px;line-height:1.5}
  .gx-leak__turn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:42px;margin-top:auto;padding:0 16px;border-radius:100px;border:1px solid var(--gold-line);
    background:var(--gold-soft);color:var(--text);font:600 14px/1.2 Inter,system-ui,sans-serif;cursor:pointer}
  html.el8-js .gx-pipe__car .gx-leak__list{margin-bottom:14px}
  .gx-leak__turn svg{flex:0 0 auto;width:15px;height:15px;fill:none;stroke:var(--gold);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
  .gx-leak__turn.is-back{align-self:flex-start;min-height:32px;margin:0 0 8px;padding:0 12px 0 8px;border-color:var(--edge-2);background:transparent;color:var(--text-mid);font-size:13px}
  .gx-leak__turn.is-back svg{stroke:var(--text-mid)}
  .gx-leak__turn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
  /* budget (review round 2): the two receipts swipe sideways like the other
     carousels (the neighbour peeks, the dots follow); the tabs stay as a
     shortcut. Both receipts keep one height, so a swipe reads as the same
     month spent again */
  .gx-till__k{margin-bottom:14px}
  .gx-till .gx-till__pair.wdp-car__track{align-items:stretch;padding-bottom:22px}
  .gx-till .gx-rcpt.wdp-car__item{margin:0}
  .gx-rcpt{padding:18px 18px 18px;gap:12px}
  .gx-rcpt__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;padding-bottom:12px}
  .gx-rcpt__head h3{font-size:21px}
  .gx-rcpt__head span{font-size:13.5px}
  .gx-rcpt__lines{gap:0}
  .gx-rcpt__lines li{gap:10px;padding:5px 0;font-size:15px}
  .gx-rcpt__lines li > i{width:10px;height:10px}
  .gx-rcpt__lines b{font-size:15.5px}
  .gx-rcpt__bar{height:14px;border-radius:6px}
  .gx-rcpt__total{flex-wrap:nowrap;align-items:center;gap:12px;padding-top:14px}
  .gx-money__sum strong{font-size:40px}
  .gx-money__sum span{margin-top:6px;font-size:13.5px}
  .gx-rcpt__stamp{width:94px;gap:4px;padding:8px 6px;border-width:2.5px}
  .gx-rcpt__stamp b{font-size:28px}
  .gx-rcpt__stamp em{font-size:9.5px}
  .gx-money__verdict{padding:11px 14px;font-size:15px}
  .gx-till.is-in .gx-rcpt.is-cur .gx-rcpt__bar i{animation:gxGrow .9s var(--ease) both;animation-delay:calc(var(--i) * .07s + .1s)}
  .gx-till.is-in .gx-rcpt.is-cur .gx-rcpt__lines b{animation:gxRowIn .45s var(--ease) both;animation-delay:calc(var(--i) * .06s)}
  .gx-plan{gap:18px}
  .gx-plan__rail{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--gutter,20px) * -1);padding:2px var(--gutter,20px)}
  .gx-plan__rail::-webkit-scrollbar{display:none}
  .gx-plan__track{display:none}
  .gx-plan__tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;padding:5px 14px 5px 5px;border-radius:100px;border:1px solid var(--edge-2)}
  .gx-plan__tab b{width:30px;height:30px;font-size:12.5px;border-width:1.5px}
  .gx-plan__tab.is-on b{box-shadow:none}
  .gx-plan__tab.is-on{border-color:var(--gold-line);background:var(--gold-soft)}
  .gx-plan__tab span{font-size:14px;white-space:nowrap}
  /* approach: every step card keeps the height of the tallest (no growing
     or shrinking while swiping); the working example fills the rest of the
     card and reads in one column: labels on one line, badges at the row's
     end or on a line of their own, never over the words */
  .gx-plan__stage.wdp-car__track{align-items:stretch}
  .gx-plan__step{grid-area:auto;display:flex;flex-direction:column;align-items:stretch;opacity:1;transform:none;pointer-events:auto;gap:14px;padding:16px 16px 14px;border-radius:24px}
  .gx-plan__copy h3{margin:0 0 8px;font-size:23px}
  .gx-plan__copy p{font-size:15px;line-height:1.52}
  .gx-plan__pts{margin-top:12px;gap:6px}
  .gx-plan__pts li{padding:6px 11px;font-size:13px}
  .gx-plan__vis{flex:1 1 auto;display:flex;flex-direction:column;padding:32px 8px 8px;border-radius:18px}
  .gx-plan__vis > .gxw{flex:1 1 auto}
  .gx-plan__label{top:11px;left:14px;font-size:11px}
  /* approach (review round 2): the rail and one whole step fit one screen,
     with no empty stretches. Every card keeps one height, set by its words
     and a working example box of --gx-vis (the box never grows with its
     picture). The box takes whatever room the words leave, its picture
     centred in it and, where taller, zoomed out until it fits (ind-gax.js).
     The step number is on the rail */
  .gx-plan__k{display:none}
  html.el8-js .gx-plan__vis{flex:1 1 0;justify-content:center;min-height:var(--gx-vis,270px);overflow:hidden}
  html.el8-js .gx-plan__vis > :not(.gx-plan__label){flex:0 0 auto}
  .gxw{max-width:none}
  .gxw .wdp-panel__title{font-size:18px;padding:14px 14px 4px}
  .gxw .wdp-panel__bar{display:none}
  .gxw-rows{padding:2px 8px 10px}
  .gxw .wdp-panel__row{flex-wrap:wrap;gap:6px 10px;padding:11px 6px;font-size:14.5px}
  .gxw .wdp-panel__row > b{margin-left:auto}
  .gxw .gxw-call{grid-template-columns:30px minmax(0,1fr) auto;column-gap:10px;row-gap:6px}
  .gxw-call__ic{width:30px;height:30px}
  .gxw-call__t{font-size:14px}
  .gxw-call__ic{grid-row:1 / 3}
  .gxw-call__t{grid-column:2 / -1}
  .gxw-call__wave{grid-column:2;width:60px}
  .gxw-call > b{grid-column:3;margin:0}
  .gxw-tree{gap:12px;padding:6px 14px 14px}
  .gxw-tree__root{justify-self:start;justify-items:start;padding:10px 16px;text-align:left}
  .gxw-tree__branches{grid-template-columns:minmax(0,1fr);gap:8px;padding:0 0 0 26px}
  .gxw-tree__branches::before{left:12px;right:auto;top:-12px;bottom:20px;width:0;height:auto;border:0;border-left:1.5px solid rgba(255,255,255,.2);border-radius:0}
  .gxw-tree__branches::after{display:none}
  .gxw-tree__leaf{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px;padding:10px 12px;font-size:14.5px;text-align:left}
  .gxw-tree__leaf::before{content:"";position:absolute;left:-14px;top:50%;width:13px;border-top:1.5px solid rgba(255,255,255,.2)}
  .gxw-tree__leaf b{padding:3px 10px;font-size:12px}
  .gxw-area{grid-template-columns:minmax(0,1fr);gap:6px;padding:4px 14px 12px}
  .gxw-area__map{justify-self:center;width:96px}
  .gxw-area__row{column-gap:10px;row-gap:2px;padding:9px 0}
  .gxw-area__row > i{grid-row:1;grid-column:1}
  .gxw-area__row span{display:contents}
  .gxw-area__row em.is-k{grid-row:1;grid-column:2}
  .gxw-area__row > b{grid-row:1;grid-column:3}
  .gxw-area__row em:not(.is-k){grid-column:2 / -1}
  .gxw-land{margin:6px 12px 14px;padding:16px}
  .gxw-land__url{font-size:12px;overflow-wrap:anywhere}
  .gxw-land{gap:8px}
  .gxw-land__h{font-size:19px}
  .gxw-day{padding:10px 14px 16px}
  /* anatomy: the ad stays assembled, at a phone's size, with its parts
     numbered down the side; the part in focus lights up in place and its
     explanation sits right under the ad, so both stay in view together
     (tap a part, or swipe the explanation) */
  .gx-anat{display:flex;flex-direction:column;gap:18px}
  .gx-xp{gap:0;padding:12px 10px 12px 44px;border:1px solid var(--edge-2);border-radius:20px;background:#101318;box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
  .gx-xp::before{left:21px;top:80px;bottom:34px;border-left-width:1.5px}
  .gx-xp__meta{gap:8px;padding:2px 8px 8px;font-size:13px}
  .gx-xp__fav{width:20px;height:20px}
  .gx-xp__part,.gx-xp__part.is-on{min-height:0;padding:6px 8px;border-color:transparent;border-radius:10px;background:none;box-shadow:none;transform:none}
  .gx-xp__part.is-on{border-color:var(--gold);background:rgba(244,160,0,.1)}
  .gx-xp__part:not(.is-on) .gx-xp__txt{opacity:.8}
  .gx-xp__n{left:-35px;width:24px;height:24px;margin-top:-12px;border-width:1.5px;font-size:11px}
  .gx-xp__n::after{width:9px}
  .gx-xp__part--1 .gx-xp__txt{font-size:18px}
  .gx-xp__part--2 .gx-xp__txt,.gx-xp__part--3 .gx-xp__txt{font-size:15.5px}
  .gx-xp__part--4 .gx-xp__txt{font-size:14px;line-height:1.5}
  .gx-xp__btn{gap:7px;padding:6px 14px;font-size:14px}
  .gx-xp__part--6 .gx-xp__txt{flex-wrap:nowrap;align-items:flex-start;font-size:13px}
  .gx-xp__part svg{width:15px;height:15px}
  .gx-xp__links{gap:4px 14px;font-size:13px}
  .gx-anat__read{touch-action:pan-y}
  .gx-anat__card{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:12px}
  .gx-anat__n{font-size:34px}
  .gx-anat__card h3{margin:0;font-size:21px}
  .gx-anat__card p{grid-column:1 / -1;margin-top:10px;font-size:15.5px;line-height:1.55}
  .gx-anat__steps{margin:16px 0 12px}
  .gx-anat__note{font-size:17px}
  .gx-case{grid-template-columns:minmax(0,1fr);border-radius:24px}
  .gx-case__id{padding:12px 12px 18px;border-right:0;border-bottom:1px solid var(--edge)}
  .gx-case__art{height:160px}
  .gx-case__id h3{font-size:22px}
  .gx-case__step{padding:20px 20px}
  .gx-case__step p{font-size:16px}
  .gx-case__step.is-dir p{font-size:19px}
  .gx-vs__col{display:flex;flex-direction:column;padding:12px 18px 10px;border-radius:24px}
  .gx-vs__scene{height:160px;margin:0 -6px 18px}
  .gx-vs__col h3{font-size:30px}
  .gx-vs__d{font-size:16px}
  .gx-vs__list li{font-size:16px;padding:13px 0}
  .gx-verdict{padding:18px;font-size:16px}
  .gx-need__cards{grid-template-columns:minmax(0,1fr)}
  /* one line each: the words size down to fit (ind-gax.js, [data-gx-line]) */
  .gx-rules__key > span,.gx-plan__pts li{flex-wrap:nowrap;white-space:nowrap;max-width:100%}
  .gx-plan__copy{min-width:0;max-width:100%}
  .gx-xp__meta{gap:.5em;padding:2px 4px 8px;white-space:nowrap}
  .gx-xp__meta--rows{gap:5px .5em}
  .gx-xp__meta .gx-xp__fav{width:1.3em;height:1.3em}
  .gx-xp__meta span:last-child{min-width:auto}
  .gx-xp__site{gap:.5em}
  [data-gx-line].is-wrap{flex-wrap:wrap;white-space:normal}
  /* a checklist chip that has to wrap keeps its tick beside the words (the words wrap, not the row) */
  .gx-plan__pts li.is-wrap{flex-wrap:nowrap;border-radius:14px}
  /* the key's two pills always stack on phones: the name on the first row, its grey caption on the second, so no
     wording (now or after a CMS edit) runs into the pill's edge */
  .gx-rules__key > span{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;row-gap:2px;width:100%;padding:10px 16px;border-radius:16px;white-space:normal}
  .gx-rules__key small{grid-column:2}
  .gx-need .wdp-band__btn{width:100%;justify-content:center}
  /* a fork scene shorter than the stage: its lane label keeps its own height */
  .gx-play__lane{grid-template-rows:auto minmax(0,1fr)}
  /* a start button spans its card on one line: long words size down (data-gx-line,
     to 12px) and only wrap past that, rather than breaking at 390 */
  .gx-start__btn{width:100%;max-width:100%;height:auto;min-height:50px;padding:12px 18px;white-space:nowrap;text-align:center;line-height:1.3}
  .gx .wpa-site{inset:16px 20px 0}
}
@media (prefers-reduced-motion:reduce){
  .gx *,.gx *::before,.gx *::after{animation:none!important}
  .gxc-click{opacity:1}
  .gxc-click.is-cut{opacity:.8}
  .gxs-map__pin.is-you,.gxs-plan__node,.gxs-plan__leaf{opacity:1!important}
  .gxs-plan__line{stroke-dashoffset:0!important}
  .gxs-fix__bar.is-leak{fill:rgba(79,191,160,.55);transform:none}
  .gxs-fix__crack,.gxs-fix__pool{opacity:0}
  .gxs-fix__ok{opacity:1}
}