/* ==========================================================================
   SEO industry pages, September 2026 redesign (Trades first).
   Builds on the web design redesign's system (ind-wdp.css): tokens, section
   headers, buttons, carousels, bands, tiles, flips, fit, checklist, paths.
   This file holds what is new for SEO: the service-area radar hero, the
   stacked "why" cards, the season dial, own vs rent rounds, the supporting
   work, the van's route, the rules and their stamp, the case files, and
   each industry kit's scenes (.sxw, .sxc, .sxv, .sxs, .sxj, .sxr).
   ========================================================================== */

.sx .so-c11{color:var(--gold);font-size:inherit!important;line-height:inherit!important}
.sx-hero .wdp-hero__title{font-size:clamp(44px,4.9vw,72px)}
.sx .wdp-lede a{text-decoration:underline;text-underline-offset:3px}

/* a small live label beside a section's visual */
.sx-bar--meta{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:0 0 40px}
.sx-meta{display:inline-flex;align-items:center;gap:10px;font:600 12.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;color:var(--text-dim);text-transform:uppercase}
.sx-meta i{width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px rgba(79,191,160,.8)}
.sx .wdp-sec .sx-sub{margin:0 0 20px;font-family:var(--font-head);font-weight:800;font-size:24px;letter-spacing:-.02em}

/* shared map pieces (hero, why, approach, journey) */
.sx-map__streets path{fill:none;stroke:rgba(255,255,255,.05);stroke-width:1.2}
.sx-map__roads path{fill:none;stroke:rgba(255,255,255,.12);stroke-width:5;stroke-linecap:round}
.sx-map__water{fill:rgba(79,191,160,.05);stroke:rgba(79,191,160,.18);stroke-width:1.2}
.sx-map__park{fill:rgba(79,191,160,.07)}
.sx-pin{position:absolute;left:var(--x);top:var(--y);width:16px;height:16px;margin:-17px 0 0 -8px;z-index:2}
.sx-pin i{position:absolute;inset:0;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#5B6573;box-shadow:0 4px 10px rgba(0,0,0,.6)}
.sx-pin i::after{content:"";position:absolute;inset:5px;border-radius:50%;background:#0B0D11}
.sx-pin--you{width:22px;height:22px;margin:-23px 0 0 -11px;z-index:3}
.sx-pin--you i{background:var(--gold);box-shadow:0 0 18px rgba(244,160,0,.8)}
.sx-pin--you::before{content:"";position:absolute;left:50%;bottom:-6px;width:28px;height:10px;margin-left:-14px;border-radius:50%;
  border:1.5px solid rgba(244,160,0,.7);animation:sxHalo 2.2s ease-out infinite}
@keyframes sxHalo{0%{transform:scale(.4);opacity:1}100%{transform:scale(2.2);opacity:0}}
html.el8-js .is-in .sx-pin,html.el8-js .sx-local .sx-pin{animation:sxDrop .7s cubic-bezier(.34,1.5,.5,1) both;animation-delay:calc(var(--d,0) * .14s + .2s)}
@keyframes sxDrop{0%{transform:translateY(-26px);opacity:0}100%{transform:none;opacity:1}}
.sx-caret{display:inline-block;width:2px;height:1.05em;margin-left:2px;vertical-align:-2px;background:var(--gold);animation:sxBlink 1s steps(2) infinite}
@keyframes sxBlink{50%{opacity:0}}
.sxw-tap{position:absolute;right:16px;top:50%;width:30px;height:30px;margin-top:-15px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.5),rgba(255,255,255,.12) 55%,transparent 70%);opacity:0}
.is-in .sxw-tap,.is-on .sxw-tap{animation:sxTap 3.6s ease 1.6s infinite}
@keyframes sxTap{0%,60%{opacity:0;transform:scale(1.6)}68%{opacity:1;transform:scale(1)}76%{opacity:.9;transform:scale(.8)}88%,100%{opacity:0;transform:scale(1.4)}}

/* ==========================================================================
   HERO: a radar sweeps the service area; every search it catches runs to
   your pin, and your listing rides to the top of the map pack
   ========================================================================== */
.sx-radar{position:relative;height:640px;border-radius:34px;overflow:hidden;border:1px solid var(--edge-2);isolation:isolate;
  background:radial-gradient(60% 50% at 50% 40%,rgba(244,160,0,.07),transparent 72%),#0A0C10;box-shadow:0 60px 120px -60px rgba(0,0,0,.95)}
.sx-radar::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:radial-gradient(120% 90% at 50% 45%,transparent 50%,rgba(5,6,8,.85))}
.sx-radar__map{position:absolute;inset:0;width:100%;height:100%;opacity:.75}
.sx-scope{position:absolute;z-index:2;left:50%;top:41%;width:min(440px,80%);aspect-ratio:1;transform:translate(-50%,-50%)}
.sx-scope__ring{position:absolute;left:50%;top:50%;width:var(--r);height:var(--r);transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(244,160,0,.16)}
.sx-scope__ring[style*="100%"]{border-color:rgba(244,160,0,.34);box-shadow:0 0 40px -10px rgba(244,160,0,.35),inset 0 0 60px -20px rgba(244,160,0,.25)}
.sx-scope__cross{position:absolute;left:0;right:0;top:50%;height:1px;background:linear-gradient(90deg,transparent,rgba(244,160,0,.2),transparent)}
.sx-scope__cross--v{left:50%;right:auto;top:0;bottom:0;width:1px;height:auto;background:linear-gradient(transparent,rgba(244,160,0,.2),transparent)}
.sx-scope__sweep{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0deg,transparent 290deg,rgba(244,160,0,.06) 320deg,rgba(244,160,0,.3) 356deg,rgba(255,214,130,.85) 359.4deg,transparent 360deg);
  animation:czSpin 5s linear infinite}
.sx-scope__blips{position:absolute;inset:0}
.sx-scope__lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.sx-scope__lines path{fill:none;stroke:var(--gold);stroke-width:.4;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1;filter:drop-shadow(0 0 1px rgba(244,160,0,.9));
  animation:sxLine 1.9s ease-out forwards}
@keyframes sxLine{0%{stroke-dashoffset:1}45%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.sx-blip{position:absolute;width:9px;height:9px;margin:-4.5px;border-radius:50%;background:#FFD27A;box-shadow:0 0 12px rgba(244,160,0,.95);animation:sxBlip 3.2s ease-out forwards}
.sx-blip::before{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid rgba(244,160,0,.75);animation:sxRing 1.4s ease-out forwards}
@keyframes sxBlip{0%{transform:scale(0);opacity:0}8%{transform:scale(1.5);opacity:1}20%{transform:scale(1)}80%{opacity:.9}100%{opacity:0}}
@keyframes sxRing{0%{transform:scale(.6);opacity:1}100%{transform:scale(4);opacity:0}}
.sx-blip__q{position:absolute;left:16px;top:50%;padding:4px 10px;font-style:normal;border-radius:100px;border:1px solid var(--gold-line);background:#12151A;white-space:nowrap;
  font-size:12px;font-weight:600;color:var(--text);animation:sxQ 3.2s ease forwards}
.sx-blip.is-left .sx-blip__q{left:auto;right:16px}
@keyframes sxQ{0%,6%{opacity:0;transform:translateY(-50%) translateX(-6px)}14%,76%{opacity:1;transform:translateY(-50%)}100%{opacity:0;transform:translateY(-50%)}}
.sx-scope__you{position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--gold);
  box-shadow:0 0 26px rgba(244,160,0,.9)}
.sx-scope__you::after{content:"";position:absolute;inset:6px;border-radius:50%;background:#0A0C10}
.sx-scope__you i{position:absolute;inset:-10px;border-radius:50%;border:1.5px solid rgba(244,160,0,.6);animation:sxHalo2 2.4s ease-out infinite}
@keyframes sxHalo2{0%{transform:scale(.5);opacity:1}100%{transform:scale(2.2);opacity:0}}
.sx-scope__you.is-hit{animation:sxHit .6s ease}
@keyframes sxHit{40%{transform:rotate(-45deg) scale(1.35)}}
.sx-packcard{position:absolute;z-index:3;right:20px;bottom:20px;width:300px;padding:12px 10px 8px;border-radius:18px;border:1px solid var(--edge-2);background:#101318;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.95)}
.sx-packcard__label{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:0 4px 9px}
.sx-packcard__label b{font-family:var(--font-head);font-size:13.5px;color:var(--text)}
.sx-packcard__label span{font-size:10.5px;color:var(--text-dim);text-align:right}
.sx-radar__cap{position:absolute;z-index:3;left:26px;bottom:26px;max-width:220px;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.3;letter-spacing:-.01em;color:var(--text);text-wrap:balance}
.sx-pack{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.sx-pack__row{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:9px;padding:8px 8px;border-radius:12px;
  border:1px solid transparent;transition:background .5s,border-color .5s,opacity .5s,box-shadow .5s}
.sx-pack__row.is-you{background:var(--gold-soft);border-color:var(--gold-line)}
.sx-pack__row.is-low{opacity:.45;background:rgba(255,255,255,.02);border-color:var(--edge)}
.sx-pack__n{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.08);font:700 11px/1 var(--font-head);color:var(--text-mid)}
.sx-pack__row.is-you .sx-pack__n{background:var(--gold);color:#111}
.sx-pack__body{display:grid;gap:2px;min-width:0}
.sx-pack__name{display:flex;align-items:center;gap:7px;min-width:0}
.sx-pack__name b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:var(--text)}
.sx-pack__name em{flex:0 0 auto;padding:1px 7px;border-radius:100px;background:var(--gold);color:#111;font:700 9.5px/1.6 Inter,system-ui,sans-serif;font-style:normal}
.sx-pack__meta{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text-dim)}
.sx-pack__meta b{color:var(--gold);font-weight:700}
.sx-pack__meta span{white-space:nowrap}
.sx-pack__meta i{font-style:normal;letter-spacing:1px;color:var(--gold);font-size:10px}
.sx-pack__note{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10.5px;color:var(--text-dim)}
.sx-pack__call{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--gold);color:#111}
.sx-pack__row.is-call .sx-pack__call{animation:sxRingPhone .9s ease}
.sx-pack__row.is-call{box-shadow:0 0 0 1px var(--gold),0 0 30px -6px rgba(244,160,0,.7)}
@keyframes sxRingPhone{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(6deg)}}
/* ==========================================================================
   WHY IT MATTERS: cards that stack as you scroll
   ========================================================================== */
.sx-stack__track{display:grid;gap:26px}
.sx-card{position:sticky;top:calc(118px + var(--n) * 18px);display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:56px;align-items:center;
  min-height:440px;padding:46px 50px;border-radius:32px;border:1px solid var(--edge-2);transform-origin:50% 0;
  background:radial-gradient(70% 90% at 100% 0%,rgba(244,160,0,.06),transparent 60%),linear-gradient(160deg,#13161C,#0B0D11);
  box-shadow:0 -40px 80px -50px rgba(0,0,0,.95);scale:calc(1 - var(--cover,0) * .045);filter:brightness(calc(1 - var(--cover,0) * .4))}
.sx-card__k{display:flex;align-items:baseline;gap:12px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.sx-card__k b{font-family:var(--font-head);font-size:15px}
.sx-card__t{margin:18px 0 16px;font-family:var(--font-head);font-weight:800;font-size:clamp(28px,2.6vw,38px);line-height:1.08;letter-spacing:-.03em;text-wrap:balance}
.sx-card__d{margin:0;max-width:520px;font-size:17px;line-height:1.65;color:var(--text-mid)}
.sx-card__art{position:relative}
.sxw{position:relative;border-radius:22px;border:1px solid var(--edge);background:#0A0B0E;overflow:hidden;font-size:13px}

/* map pack */
.sxw-map__map{position:relative;height:120px;border-bottom:1px solid var(--edge);background:#0E1115}
.sxw-map__map svg{position:absolute;inset:0;width:100%;height:100%}
.sxw-map__chip{position:absolute;right:12px;bottom:10px;padding:3px 9px;border-radius:100px;background:rgba(255,255,255,.07);font:600 10.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim)}
.sxw-rows{display:grid}
.sxw-row{display:grid;gap:4px;padding:13px 18px;border-top:1px solid var(--edge);transition:background .5s}
.sxw-row:first-child{border-top:0}
.sxw-row__name{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:600;color:var(--text-soft)}
.sxw-row__name em{padding:2px 9px;border-radius:100px;background:var(--gold);color:#111;font-style:normal;font-size:11px;font-weight:700}
.sxw-row__meta{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-dim)}
.sxw-row__meta b{color:var(--text-soft)}
.sxw-row__meta i{font-style:normal;color:var(--text-dim);letter-spacing:1px}
.sxw-row.is-top{background:var(--gold-soft)}
.sxw-row.is-top .sxw-row__name b{color:var(--text)}
.sxw-row.is-top .sxw-row__meta b,.sxw-row.is-top .sxw-row__meta i{color:var(--gold)}
.sx-card.is-in .sxw-row.is-top{animation:sxGlowRow 4s ease 1s infinite}
@keyframes sxGlowRow{0%,100%{box-shadow:inset 3px 0 0 var(--gold)}50%{box-shadow:inset 3px 0 0 var(--gold),inset 0 0 40px rgba(244,160,0,.12)}}
.sx-card.is-in .sxw-row:not(.is-top){animation:sxDim 4s ease 1s infinite}
@keyframes sxDim{0%,100%{opacity:1}50%{opacity:.45}}

/* near me */
.sxw--near{display:grid;gap:10px;padding:18px}
.sxw-near__alert{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-radius:14px;background:#15181E;border:1px solid var(--edge)}
.sxw-near__time{font:600 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text-dim)}
.sxw-near__what{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--coral)}
.sxw-near__what i{width:8px;height:8px;border-radius:50%;background:var(--coral);box-shadow:0 0 10px rgba(255,122,107,.8);animation:sxBlink 1.4s steps(2) infinite}
.sxw-near__search{display:flex;align-items:center;min-width:0;height:42px;padding:0 16px 0 14px;border-radius:100px;border:1px solid var(--gold-line);background:#181B21;color:var(--gold);font-size:14px}
.sxw-near__hit{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:14px;
  border:1px solid var(--gold-line);background:var(--gold-soft)}
.sxw-near__q{font-weight:600;color:var(--text)}
.sxw-near__q b{color:var(--gold)}
.sxw-near__hit em,.sxw-near__ghost em{flex:0 0 auto;padding:2px 9px;border-radius:100px;font-style:normal;font-size:11px;font-weight:700}
.sxw-near__hit em{background:var(--teal-soft);color:var(--teal);margin-right:34px}
.sxw-near__ghost{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-radius:12px;border:1px solid var(--edge);color:var(--text-dim);opacity:.6}
.sxw-near__ghost em{background:var(--coral-soft);color:var(--coral)}

/* referrals */
.sxw--ref{display:grid;gap:12px;padding:20px 20px 16px}
.sxw-ref__k{font-weight:600;color:var(--text-soft)}
.sxw-ref__chart{position:relative;display:flex;align-items:flex-end;gap:10px;height:170px;padding:22px 4px 0;border-bottom:1px solid var(--edge)}
.sxw-ref__ceiling{position:absolute;left:0;right:0;top:14px;border-top:2px dashed rgba(255,122,107,.55)}
.sxw-ref__bar{position:relative;flex:1;height:var(--h);border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,var(--gold),rgba(244,160,0,.35));transform-origin:bottom}
.sxw-ref__bar.is-quiet{background:linear-gradient(180deg,rgba(255,122,107,.8),rgba(255,122,107,.2))}
.sxw-ref__bar b{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);font-family:var(--font-head);font-size:22px;color:var(--coral)}
html.el8-js .sx-card:not(.is-in) .sxw-ref__bar{transform:scaleY(0)}
.sx-card .sxw-ref__bar{transition:transform .8s var(--ease) calc(var(--i) * .08s + .3s)}
.sx-card.is-in .sxw-ref__bar:not(.is-quiet){animation:sxBump 5s ease calc(var(--i) * .2s + 1.4s) infinite}
@keyframes sxBump{0%,70%,100%{transform:none}80%{transform:scaleY(1.07)}88%{transform:scaleY(.98)}}
.sx-card.is-in .sxw-ref__ceiling{animation:sxCeil 5s ease 1.4s infinite}
@keyframes sxCeil{0%,70%,100%{border-color:rgba(255,122,107,.4)}82%{border-color:var(--coral);box-shadow:0 0 14px rgba(255,122,107,.6)}}
.sxw-ref__legend{display:flex;gap:18px;font-size:12px;color:var(--text-dim)}
.sxw-ref__legend span{display:inline-flex;align-items:center;gap:7px}
.sxw-ref__legend i{width:10px;height:10px;border-radius:3px}
.sxw-ref__legend .is-busy i{background:var(--gold)}
.sxw-ref__legend .is-quiet i{background:var(--coral)}

/* competitors */
.sxw--comp{display:grid;gap:8px;padding:18px}
.sxw-comp__row{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;border:1px solid var(--edge);background:#111419}
.sxw-comp__n{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.07);font:800 13px/1 var(--font-head);color:var(--text-mid)}
.sxw-comp__name{font-weight:600;color:var(--text-soft)}
.sxw-comp__row em{font-style:normal;font-size:11.5px;font-weight:700;color:var(--teal)}
.sxw-comp__gap{display:flex;justify-content:center;gap:6px;padding:4px 0}
.sxw-comp__gap i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.18)}
.sxw-comp__row.is-you{border-style:dashed;border-color:var(--coral-line);background:transparent}
.sxw-comp__row.is-you .sxw-comp__name{color:var(--text-dim)}
.sxw-comp__row.is-you em{color:var(--coral)}
.sx-card.is-in .sxw-comp__row.is-up{animation:sxClimb 4.8s var(--ease) infinite;animation-delay:calc(var(--i) * .3s + .8s)}
@keyframes sxClimb{0%,100%{transform:none}10%{transform:translateY(-5px);border-color:var(--teal-line);box-shadow:0 10px 24px -14px rgba(79,191,160,.6)}25%{transform:none}}
.sx-card.is-in .sxw-comp__row.is-you{animation:sxSink 4.8s ease 1.4s infinite}
@keyframes sxSink{0%,100%{transform:none;opacity:1}30%,70%{transform:translateY(6px);opacity:.45}}

/* ==========================================================================
   WHO WE HELP
   ========================================================================== */
.sx-who .wdp-who__type{margin-bottom:22px}

/* ==========================================================================
   CHALLENGES: five tiles, the last across the row
   ========================================================================== */
.sx-bento .sx-tile--0,.sx-bento .sx-tile--3{grid-column:span 7}
.sx-bento .sx-tile--1,.sx-bento .sx-tile--2{grid-column:span 5}
.sx-bento .sx-tile--full{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-rows:auto 1fr;column-gap:44px;align-items:start}
.sx-tile--full .wdp-pill{grid-column:1;justify-self:start}
.sx-tile--full .sx-tile__copy{grid-column:1}
.sx-tile--full .sx-scene{grid-column:2;grid-row:1 / span 2;margin:34px 0 0;padding:0;align-self:start}
.sx-tile__copy{display:grid;gap:14px}
.sx-scene{margin-top:auto;padding-top:10px}
.sxc{position:relative;height:190px;border-radius:16px;border:1px solid var(--edge);background:#0A0B0E;overflow:hidden}
.sxc-bar{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--edge)}
.sxc-bar .wdp-dots i{width:7px;height:7px}
.sxc-q{flex:1;height:8px;border-radius:4px;background:rgba(255,255,255,.1)}

/* 0 platforms */
.sxc--plat{display:grid;align-content:start}
.sxc-plat__row{position:relative;display:grid;grid-template-columns:22px 1fr;grid-template-rows:auto auto;gap:5px 12px;align-items:center;padding:9px 14px;border-bottom:1px solid var(--edge)}
.sxc-plat__logo{grid-row:span 2;width:22px;height:22px;border-radius:6px;background:var(--c);opacity:.85}
.sxc-plat__l{height:6px;border-radius:3px;background:rgba(255,255,255,.16);width:70%}
.sxc-plat__l.s{width:44%;background:rgba(255,255,255,.08)}
.sxc-plat__row.is-you{border-bottom:0;background:var(--gold-soft)}
.sxc-plat__row.is-you .sxc-plat__logo{background:var(--gold);box-shadow:0 0 12px rgba(244,160,0,.6)}
.sxc-plat__coin{position:absolute;right:18px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#FFE29A,var(--gold));opacity:0}
.wdp-tile.is-in .sxc-plat__coin{animation:sxCoin 5.4s ease-in-out infinite;animation-delay:calc(var(--i) * .5s + .6s)}
@keyframes sxCoin{0%{transform:translateY(calc(96px - var(--i) * 33px)) scale(.6);opacity:0}8%{opacity:1}30%{transform:none scale(1);opacity:1}40%,100%{transform:none;opacity:0}}
.wdp-tile.is-in .sxc-plat__row.is-you{animation:sxPushed 5.4s ease-in-out infinite}
@keyframes sxPushed{0%,100%{opacity:1}35%,60%{opacity:.55}}

/* 1 service areas */
.sxc--area svg{position:absolute;inset:0;width:100%;height:100%}
.sxc-area__sub{fill:rgba(255,255,255,.025);stroke:rgba(255,255,255,.12);stroke-width:1}
.sxc-area__sub.is-home{fill:rgba(244,160,0,.16);stroke:var(--gold-line)}
.wdp-tile.is-in .sxc-area__sub:not(.is-home){animation:sxLit 7s ease infinite;animation-delay:calc(var(--i) * .5s + 1s)}
@keyframes sxLit{0%,8%{fill:rgba(255,255,255,.025);stroke:rgba(255,255,255,.12)}14%,78%{fill:rgba(79,191,160,.14);stroke:var(--teal-line)}90%,100%{fill:rgba(255,255,255,.025);stroke:rgba(255,255,255,.12)}}
.sxc-area__pin path{fill:var(--gold)}
.sxc-area__pin circle{fill:#0A0B0E}
.sxc-area__page{position:absolute;left:var(--x);top:var(--y);display:grid;gap:3px;width:22px;height:26px;padding:6px 4px;border-radius:4px;background:#E8ECF0;opacity:0;box-shadow:0 6px 14px rgba(0,0,0,.5)}
.sxc-area__page i{height:2px;border-radius:2px;background:#9AA3AD}
.wdp-tile.is-in .sxc-area__page{animation:sxPage 7s var(--ease) infinite;animation-delay:calc(var(--i) * .5s + .8s)}
@keyframes sxPage{0%{transform:translate(0,40px) scale(.5);opacity:0}8%,70%{transform:none;opacity:1}82%,100%{opacity:0}}

/* 2 time */
.sxc--time{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;gap:16px 16px;align-content:center;padding:18px}
.sxc-time__clock{position:relative;grid-row:span 2;width:62px;height:62px;border-radius:50%;border:2px solid var(--edge-2)}
.sxc-time__clock i{position:absolute;left:50%;bottom:50%;width:2px;height:22px;margin-left:-1px;border-radius:2px;background:var(--gold);transform-origin:bottom}
.sxc-time__clock i.m{height:15px;background:var(--text-mid)}
.wdp-tile.is-in .sxc-time__clock i:not(.m){animation:sxSpin 3s linear infinite}
.wdp-tile.is-in .sxc-time__clock i.m{animation:sxSpin 36s linear infinite}
@keyframes sxSpin{to{transform:rotate(360deg)}}
.sxc-time__day{display:flex;gap:4px;padding:4px;border-radius:12px;border:1px solid var(--edge);background:rgba(255,255,255,.02)}
.sxc-time__blk{display:grid;place-items:center;flex:1;height:40px;border-radius:9px;background:rgba(244,160,0,.14);border:1px solid var(--gold-line);color:var(--gold)}
.sxc-time__blk svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
html.el8-js .wdp-tile:not(.is-in) .sxc-time__blk{transform:scaleX(0)}
.sxc-time__blk{transform-origin:left;transition:transform .6s var(--ease) calc(var(--i) * .15s + .3s)}
.sxc-time__task{display:grid;grid-template-columns:12px 1fr;gap:6px 8px;align-items:center;width:62%;padding:10px 12px;border-radius:10px;border:1px dashed var(--coral-line);background:var(--coral-soft)}
.sxc-time__box{width:12px;height:12px;border-radius:3px;border:1.5px solid rgba(255,122,107,.7)}
.sxc-time__l{height:5px;border-radius:3px;background:rgba(255,122,107,.4)}
.sxc-time__l.s{width:60%}
.wdp-tile.is-in .sxc-time__task{animation:sxNoRoom 5s var(--ease) 1.2s infinite}
@keyframes sxNoRoom{0%,100%{transform:translateX(0)}30%{transform:translateX(52%)}36%{transform:translateX(44%)}40%{transform:translateX(50%)}46%{transform:translateX(46%)}60%{transform:translateX(0)}}

/* 3 slow website */
.sxc--slow{display:flex;align-items:center;justify-content:center;gap:22px}
.sxc-slow__phone,.sxc-slow__fast{display:grid;align-content:start;gap:7px;width:92px;height:150px;padding:10px 9px;border-radius:16px;border:1px solid var(--edge-2);background:#101318}
.sxc-slow__bar{height:4px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden}
.sxc-slow__bar i{display:block;height:100%;width:22%;background:var(--coral)}
.sxc-slow__bar.is-done i{width:100%;background:var(--teal)}
.wdp-tile.is-in .sxc-slow__phone .sxc-slow__bar i{animation:sxCrawl 6s ease infinite}
@keyframes sxCrawl{0%{width:0}40%,100%{width:26%}}
.sxc-slow__spin{justify-self:center;width:24px;height:24px;margin:18px 0 10px;border-radius:50%;border:2.5px solid rgba(255,255,255,.1);border-top-color:var(--coral)}
.wdp-tile.is-in .sxc-slow__spin{animation:sxSpin 1s linear infinite}
.sxc-slow__sk{height:6px;border-radius:3px;background:rgba(255,255,255,.07)}
.sxc-slow__sk.s{width:60%}
.sxc-slow__exit{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--coral-line);color:var(--coral);opacity:0}
.sxc-slow__exit svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.wdp-tile.is-in .sxc-slow__exit{animation:sxExit 6s ease infinite}
@keyframes sxExit{0%,45%{opacity:0;transform:translateX(10px)}55%,85%{opacity:1;transform:none}100%{opacity:0}}
.sxc-slow__fast .sxc-slow__h{height:9px;border-radius:4px;background:rgba(255,255,255,.4)}
.sxc-slow__fast .sxc-slow__h.s{width:64%;background:var(--gold)}
.sxc-slow__btn{width:56px;height:16px;margin-top:6px;border-radius:8px;background:var(--gold)}
.sxc-slow__fast{border-color:var(--teal-line)}

/* 4 seasonal demand */
.sxc--demand{height:210px;padding:22px 22px 18px}
.sxc-demand__plot{position:relative;display:flex;align-items:flex-end;gap:8px;height:100%;border-bottom:1px solid var(--edge)}
.sxc-demand__bar{flex:1;height:var(--h);border-radius:6px 6px 2px 2px;background:rgba(255,255,255,.1);transform-origin:bottom;transition:transform .7s var(--ease) calc(var(--i) * .06s + .2s)}
.sxc-demand__bar.is-peak{background:linear-gradient(180deg,var(--gold),rgba(244,160,0,.3))}
html.el8-js .wdp-tile:not(.is-in) .sxc-demand__bar{transform:scaleY(0)}
.sxc-demand__mark{position:absolute;left:var(--x);top:0;bottom:0;width:0}
.sxc-demand__mark::before{content:"";position:absolute;top:8px;bottom:0;left:0;border-left:2px dashed currentColor;opacity:.7}
.sxc-demand__mark i{position:absolute;left:-12px;top:-4px;width:24px;height:28px;border-radius:5px;background:currentColor;box-shadow:0 8px 18px -6px currentColor}
.sxc-demand__mark i::before,.sxc-demand__mark i::after{content:"";position:absolute;left:5px;right:5px;height:2px;border-radius:2px;background:#0A0B0E}
.sxc-demand__mark i::before{top:9px}
.sxc-demand__mark i::after{top:15px;right:9px}
.sxc-demand__mark--early{color:var(--teal)}
.sxc-demand__mark--late{color:var(--coral)}
.wdp-tile.is-in .sxc-demand__mark--early{animation:sxEarly 7s var(--ease) infinite}
.wdp-tile.is-in .sxc-demand__mark--late{animation:sxLate 7s var(--ease) infinite}
@keyframes sxEarly{0%{opacity:0;transform:translateY(-20px)}10%,80%{opacity:1;transform:none}100%{opacity:0}}
@keyframes sxLate{0%,40%{opacity:0;transform:translateY(-20px)}50%,80%{opacity:1;transform:none}100%{opacity:0}}
.wdp-tile.is-in .sxc-demand__bar.is-peak{animation:sxPeak 7s ease infinite}
@keyframes sxPeak{0%,100%{filter:none}30%{filter:drop-shadow(0 0 10px rgba(244,160,0,.7))}}

/* ==========================================================================
   SEASON: the year as a dial, the time you build ahead of each peak
   ========================================================================== */
.sx-season__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:center}
.sx-dial{position:relative;width:100%;max-width:440px;margin:0 auto;aspect-ratio:1}
.sx-dial::before{content:"";position:absolute;inset:14%;border-radius:50%;background:radial-gradient(circle,rgba(244,160,0,.08),transparent 70%)}
.sx-dial svg{position:relative;display:block;width:100%;height:100%;overflow:visible}
.sx-dial__rim{fill:none;stroke:rgba(255,255,255,.08)}
.sx-dial__tick{stroke:rgba(255,255,255,.3);stroke-width:2;stroke-linecap:round}
.sx-dial__year{fill:none;stroke:var(--teal);stroke-width:5;stroke-opacity:.6;stroke-dasharray:2 7;stroke-linecap:round}
.sx-dial__peak,.sx-dial__build{fill:none;stroke-width:22;stroke-linecap:round;transition:opacity .4s,stroke-width .4s}
.sx-dial__peak--summer{stroke:var(--gold)}
.sx-dial__peak--winter{stroke:#8FA7BF}
.sx-dial__build{stroke-width:22;stroke-dasharray:2 6;stroke-linecap:butt;opacity:.55}
.sx-dial__build--summer{stroke:var(--gold)}
.sx-dial__build--winter{stroke:#8FA7BF}
.sx-dial__peak{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s var(--ease) .4s,opacity .4s}
.sx-season__grid.is-in .sx-dial__peak{stroke-dashoffset:0}
.sx-dial__hand{transform-origin:150px 150px;transform:rotate(var(--a,0deg));transition:transform 1.8s var(--ease) .6s}
.sx-dial__hand line{stroke:var(--text);stroke-width:2.5;stroke-linecap:round}
.sx-dial__hand circle{fill:#FFE6A8;filter:drop-shadow(0 0 8px rgba(244,160,0,.9))}
.sx-dial__hub{fill:#0A0B0E;stroke:var(--gold);stroke-width:2.5}
.sx-season__grid[data-hot] .sx-dial [data-season]{opacity:.22}
.sx-season__grid[data-hot="summer"] .sx-dial [data-season="summer"],.sx-season__grid[data-hot="winter"] .sx-dial [data-season="winter"],.sx-season__grid[data-hot="year"] .sx-dial [data-season="year"]{opacity:1}
.sx-season__list{display:grid;gap:14px}
.sx-seas.is-hot{border-color:color-mix(in srgb,var(--c) 55%,transparent);background:#101216}
.sx-season__tabs button.is-on.is-summer{background:var(--gold);color:#111}
.sx-season__tabs button.is-on.is-winter{background:#8FA7BF;color:#0B0F14}
.sx-season__tabs button.is-on.is-year{background:var(--teal);color:#0A1512}
.sx-seas{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px 18px;padding:22px 24px;border-radius:22px;border:1px solid var(--edge);background:#0D0F13;
  transition:border-color .35s,transform .35s var(--ease),background .35s;cursor:default}
.sx-seas:hover{transform:translateX(4px)}
.sx-seas__ic{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;border:1px solid var(--edge-2);color:var(--c)}
.sx-seas__ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.sx-seas__head{display:grid;gap:4px;align-content:center}
.sx-seas__head h3{margin:0;font-family:var(--font-head);font-weight:800;font-size:22px;letter-spacing:-.02em}
.sx-seas__head span{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--c)}
.sx-seas__chips{grid-column:2;display:flex;flex-wrap:wrap;gap:7px;list-style:none;margin:0;padding:0}
.sx-seas__chips li{padding:6px 12px;border-radius:100px;border:1px solid var(--edge-2);background:rgba(255,255,255,.03);font-size:13px;color:var(--text-soft)}
.sx-seas--summer{--c:var(--gold)}
.sx-seas--winter{--c:#8FA7BF}
.sx-seas--year{--c:var(--teal)}
.sx-seas:hover{border-color:color-mix(in srgb,var(--c) 50%,transparent)}
.sx-season__note{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;margin-top:40px;padding:22px 26px;border-radius:22px;
  border:1px solid var(--teal-line);background:linear-gradient(135deg,rgba(79,191,160,.1),rgba(79,191,160,.02))}
.sx-season__noteic{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--teal);color:#0A1512;box-shadow:0 0 22px rgba(79,191,160,.45)}
.sx-season__note b{display:block;margin-bottom:6px;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.sx-season__note p{margin:0;font-size:16.5px;line-height:1.6;color:var(--text-mid)}

/* ==========================================================================
   COMPARISON: what you own compounds; what you rent stops with the payments
   ========================================================================== */
.sx-vs__chart{position:relative;height:240px;margin-bottom:34px;border-radius:28px;border:1px solid var(--edge);background:#0A0C10;overflow:hidden}
.sx-vs__chart svg{position:absolute;left:0;right:0;bottom:0;width:100%;height:calc(100% - 34px)}
.sx-vs__grid line{stroke:rgba(255,255,255,.05);vector-effect:non-scaling-stroke}
.sx-vs__area{fill:rgba(244,160,0,.08);opacity:0;transition:opacity 1s ease 1.2s}
.sx-vs__own,.sx-vs__rent{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.sx-vs__own{stroke:var(--gold);stroke-width:3.5;filter:drop-shadow(0 0 8px rgba(244,160,0,.6))}
.sx-vs__rent{stroke:var(--coral);stroke-width:2.5;stroke-dasharray:6 6}
.sx-vs__chart svg{clip-path:inset(0 100% 0 0);transition:clip-path 2.4s var(--ease) .3s}
.sx-vs__chart.is-in svg{clip-path:inset(0 0 0 0)}
.sx-vs__chart.is-in .sx-vs__area{opacity:1}
.sx-vs__stop{fill:var(--coral);opacity:0;transition:opacity .4s ease 1.6s}
.sx-vs__chart.is-in .sx-vs__stop{opacity:1;animation:sxStop 2s ease 2s infinite}
@keyframes sxStop{0%,100%{filter:none}50%{filter:drop-shadow(0 0 8px rgba(255,122,107,.9))}}
.sx-vs__tag{position:absolute;padding:6px 12px;border-radius:100px;font-size:12.5px;font-weight:700;white-space:nowrap}
.sx-vs__tag--own{top:16px;right:22px;background:var(--gold);color:#111}
.sx-vs__tag--rent{left:22px;top:calc(34px + (100% - 34px) * .68 - 42px);background:var(--coral-soft);color:var(--coral);border:1px solid var(--coral-line)}
/* five rounds, own against rent; the knot is pulled to your side */
.sx-rounds{margin-top:6px}
.sx-rounds__head,.sx-round{display:grid;grid-template-columns:minmax(0,1fr) 180px minmax(0,1fr);align-items:center}
.sx-rounds__head{padding:0 0 18px;border-bottom:1px solid var(--edge)}
.sx-rounds__side small{display:block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.sx-rounds__side b{display:block;margin-top:6px;font-family:var(--font-head);font-weight:800;font-size:clamp(20px,2vw,26px);letter-spacing:-.02em;color:var(--text)}
.sx-rounds__side--rent{text-align:right}
.sx-rounds__side--rent small{color:var(--text-dim)}
.sx-rounds__side--rent b{color:var(--text-mid)}
.sx-rounds__vs{justify-self:center;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1px solid var(--gold-line);background:#07080A;
  font:800 14px/1 var(--font-head);color:var(--gold);box-shadow:0 0 30px -8px rgba(244,160,0,.5)}
.sx-rounds__list{list-style:none;margin:0;padding:0}
.sx-round{padding:18px 0;border-bottom:1px solid var(--edge)}
.sx-round__own,.sx-round__rent{display:flex;align-items:center;gap:12px;font-size:16px;line-height:1.45}
.sx-round__own{color:var(--text)}
.sx-round__own i{color:var(--teal);font-style:normal;font-weight:700}
.sx-round__rent{flex-direction:row-reverse;text-align:right;color:var(--text-dim)}
.sx-round__rent i{color:var(--coral);font-style:normal;font-weight:700}
.sx-round__rope{position:relative;height:30px}
.sx-round__line{position:absolute;left:12px;right:12px;top:50%;height:4px;margin-top:-2px;border-radius:4px;
  background:repeating-linear-gradient(-60deg,rgba(0,0,0,.35) 0 2px,transparent 2px 5px),linear-gradient(90deg,var(--teal),var(--teal) 28%,rgba(255,255,255,.18) 50%,var(--coral) 72%,var(--coral));opacity:.75}
.sx-round__rope::before{content:"";position:absolute;left:50%;top:4px;bottom:4px;width:1px;background:rgba(255,255,255,.3)}
.sx-round__knot{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:38px;height:26px;margin:-13px 0 0 -19px;border-radius:9px;border:1px solid var(--gold-line);
  background:#12151A;font:800 11px/1 var(--font-head);color:var(--gold);
  transition:transform 1.1s cubic-bezier(.34,1.45,.5,1) calc(var(--i) * .18s + .3s),background .4s ease calc(var(--i) * .18s + .6s),color .4s ease calc(var(--i) * .18s + .6s)}
.sx-rounds.is-in .sx-round__knot{transform:translateX(-58px);background:var(--gold);color:#111;animation:sxTug 3.6s ease-in-out calc(var(--i) * .18s + 1.6s) infinite}
@keyframes sxTug{0%,100%{transform:translateX(-58px)}50%{transform:translateX(-51px)}}
.sx-round__own,.sx-round__rent{transition:opacity .6s ease calc(var(--i) * .18s + .4s)}
html.el8-js .sx-rounds:not(.is-in) .sx-round__own{opacity:.35}
.sx-rounds.is-in .sx-round__rent{opacity:.7}
.sx-verdict{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:28px;padding:18px 26px;border-radius:100px;border:1px solid var(--gold-line);background:var(--gold-soft)}
.sx-verdict__k{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);padding-right:18px;border-right:1px solid var(--gold-line)}
.sx-verdict__k i{width:10px;height:10px;transform:rotate(45deg);border-radius:2px;background:var(--gold)}
.sx-verdict p{margin:0;flex:1;font-size:16.5px;line-height:1.5;color:var(--text-mid)}
.sx-verdict b{color:var(--text)}
.sx-verdict em{font-style:normal;color:var(--gold)}

/* ==========================================================================
   APPROACH: the pinned story (ind-wdp) with SEO visuals; then the kit
   ========================================================================== */
.sx-stage__label{position:absolute;z-index:2;top:16px;left:18px;display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim)}
.sx-stage__label i{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px rgba(244,160,0,.8);animation:sxBlink 1.6s steps(2) infinite}
.sxv{max-width:440px;margin:0 auto}
.sxv-map,.sxv-areas__map{position:relative;height:96px;border-bottom:1px solid var(--edge);background:#0E1115}
.sxv-map svg,.sxv-areas__map svg{position:absolute;inset:0;width:100%;height:100%}
.sxv-map__you{background:var(--gold-soft);border-radius:10px}
.sxv-map__you span{display:grid;gap:2px}
.sxv-map__you small{font-size:11.5px;color:var(--text-dim)}
.sxv-areas__sub{fill:rgba(255,255,255,.03);stroke:rgba(255,255,255,.12)}
.sxv-areas__sub.is-lit{fill:rgba(79,191,160,.14);stroke:var(--teal-line)}
.wdp-vis.is-on .sxv-areas__sub.is-lit{animation:sxLitOnce .8s ease both;animation-delay:calc(var(--i) * .15s + .3s)}
@keyframes sxLitOnce{from{fill:rgba(255,255,255,.03);stroke:rgba(255,255,255,.12)}}
.sxv-q{display:inline-flex;align-items:center;gap:9px}
.sxv-q i{width:12px;height:12px;border-radius:50%;border:1.8px solid var(--text-dim)}
.sxv-track__live{display:flex;align-items:center;gap:14px;padding:16px 18px;border-bottom:1px solid var(--edge)}
.sxv-track__ic{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--teal);color:#0A1512;box-shadow:0 0 18px rgba(79,191,160,.5)}
.sxv-track__wave{display:flex;align-items:center;gap:3px;flex:1;height:30px}
.sxv-track__wave i{flex:1;height:30%;border-radius:2px;background:var(--teal);opacity:.7}
.wdp-vis.is-on .sxv-track__wave i{animation:sxWave 1.2s ease-in-out infinite;animation-delay:calc(var(--i) * -.13s)}
@keyframes sxWave{0%,100%{height:20%}50%{height:95%}}
/* the supporting work: three cards with their own scenes */
.sx-kit{margin-top:96px;padding-top:56px;border-top:1px solid var(--edge)}
.sx-sup-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.sx-sup{display:flex;flex-direction:column;padding:20px 20px 26px;border-radius:26px;border:1px solid var(--edge);background:linear-gradient(180deg,#111318,#0B0C0F)}
.sx-sup__art{position:relative;height:176px;margin-bottom:22px;border-radius:16px;border:1px solid var(--edge);background:#0A0B0E;overflow:hidden}
.sx-sup__n{font:800 14px/1 var(--font-head);color:var(--gold)}
.sx-sup__t{margin:10px 0 8px;font-family:var(--font-head);font-weight:800;font-size:21px;line-height:1.15;letter-spacing:-.02em}
.sx-sup__d{margin:0;font-size:15px;line-height:1.6;color:var(--text-mid)}
.sxs{position:absolute;inset:0;display:grid;align-content:center;gap:8px;padding:16px 18px}
/* 0 reviews earned, and answered */
.sxs-rev__stars{display:flex;gap:6px;margin-bottom:4px;font-size:22px;line-height:1;color:rgba(255,255,255,.14)}
.sxs-rev__stars i{font-style:normal}
.sx-sup.is-in .sxs-rev__stars i{animation:sxsStar 6s ease infinite;animation-delay:calc(var(--i) * .18s)}
@keyframes sxsStar{0%,4%{color:rgba(255,255,255,.14);transform:none}10%{color:var(--gold);transform:scale(1.28)}16%,86%{color:var(--gold);transform:none}94%,100%{color:rgba(255,255,255,.14)}}
.sxs-rev__card{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:10px;padding:7px 10px;border-radius:10px;border:1px solid var(--edge);background:#111419}
.sxs-rev__face{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,rgba(244,160,0,.45),rgba(79,191,160,.35))}
.sxs-rev__lines{display:grid;gap:4px}
.sxs-rev__lines i{height:5px;border-radius:3px;background:rgba(255,255,255,.16)}
.sxs-rev__lines i.s{width:60%}
.sxs-rev__reply{width:28px;height:14px;border-radius:7px;background:var(--teal-soft);border:1px solid var(--teal-line)}
.sx-sup.is-in .sxs-rev__card{animation:sxsIn 6s var(--ease) infinite;animation-delay:calc(var(--i) * .35s + .9s)}
@keyframes sxsIn{0%{opacity:0;transform:translateY(8px)}10%,86%{opacity:1;transform:none}96%,100%{opacity:0}}
.sx-sup.is-in .sxs-rev__reply{animation:sxsReply 6s ease infinite;animation-delay:calc(var(--i) * .35s + 1.6s)}
@keyframes sxsReply{0%,8%{opacity:0;transform:scale(.4)}14%,86%{opacity:1;transform:none}96%,100%{opacity:0}}
/* 1 the page structure snaps into order; the speed needle swings to green */
.sxs--tech{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:center;gap:16px}
.sxs-tech__page{display:grid;gap:8px;padding:12px;border-radius:10px;border:1px solid var(--edge);background:#111419}
.sxs-tech__h1{height:9px;width:80%;border-radius:4px;background:var(--gold)}
.sxs-tech__row{display:grid;grid-template-columns:10px 1fr;gap:6px;align-items:center}
.sxs-tech__row.is-deep{margin-left:14px}
.sxs-tech__row b{width:10px;height:10px;border-radius:3px;border:1px solid var(--teal-line);background:var(--teal-soft)}
.sxs-tech__row i{height:6px;border-radius:3px;background:rgba(255,255,255,.18)}
.sx-sup.is-in .sxs-tech__row{animation:sxsSnap 6s var(--ease) infinite;animation-delay:calc(var(--i) * .15s)}
@keyframes sxsSnap{0%,6%{transform:translateX(calc(var(--i) * 6px - 9px)) rotate(-4deg);opacity:.45}24%,86%{transform:none;opacity:1}100%{transform:translateX(calc(var(--i) * 6px - 9px)) rotate(-4deg);opacity:.45}}
.sxs-tech__gauge{position:relative;aspect-ratio:10 / 6}
.sxs-tech__gauge svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sxs-tech__arc,.sxs-tech__good{fill:none;stroke-width:7;stroke-linecap:round}
.sxs-tech__arc{stroke:rgba(255,255,255,.12)}
.sxs-tech__good{stroke:var(--teal)}
.sxs-tech__needle{position:absolute;left:50%;bottom:13%;width:3px;height:54%;margin-left:-1.5px;border-radius:3px;background:var(--text);transform-origin:50% 100%;transform:rotate(58deg)}
.sxs-tech__needle::after{content:"";position:absolute;left:50%;bottom:-5px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--text)}
.sx-sup.is-in .sxs-tech__needle{animation:sxsNeedle 6s var(--ease) infinite}
@keyframes sxsNeedle{0%,10%{transform:rotate(-70deg)}40%,86%{transform:rotate(58deg)}100%{transform:rotate(-70deg)}}
/* 2 a question becomes the answer */
.sxs--intent{gap:12px}
.sxs-int__q{display:flex;align-items:center;gap:10px;height:40px;padding:0 8px 0 14px;border-radius:100px;border:1px solid var(--gold-line);background:#181B21;color:var(--gold)}
.sxs-int__typed{flex:0 0 auto;width:56%;height:7px;border-radius:4px;background:rgba(255,255,255,.55);transform-origin:left}
.sx-sup.is-in .sxs-int__typed{animation:sxsType 6s steps(10) infinite}
@keyframes sxsType{0%{transform:scaleX(0)}34%,86%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.sxs-int__mark{margin-left:auto;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--gold-soft);font-weight:800;color:var(--gold)}
.sx-sup.is-in .sxs-int__mark{animation:sxsMark 6s ease infinite}
@keyframes sxsMark{0%,34%{transform:none}40%{transform:scale(1.35)}48%,100%{transform:none}}
.sxs-int__answer{position:relative;display:grid;gap:7px;padding:14px;border-radius:12px;border:1px solid var(--teal-line);background:rgba(79,191,160,.06)}
.sxs-int__answer i{height:6px;border-radius:3px;background:rgba(255,255,255,.16)}
.sxs-int__answer .sxs-int__h{width:70%;height:9px;background:var(--teal)}
.sxs-int__answer i.s{width:55%}
.sxs-int__badge{position:absolute;right:10px;top:10px;width:14px;height:14px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px rgba(79,191,160,.7)}
.sx-sup.is-in .sxs-int__answer{animation:sxsAns 6s var(--ease) infinite}
@keyframes sxsAns{0%,38%{opacity:0;transform:translateY(10px)}48%,86%{opacity:1;transform:none}96%,100%{opacity:0}}

/* included in every campaign: switches flip on in turn */
.sx-panel{margin-top:28px;padding:26px 30px 16px;border-radius:26px;border:1px solid var(--teal-line);
  background:radial-gradient(90% 70% at 100% 0%,rgba(79,191,160,.1),transparent 60%),#0B0F0E}
.sx-panel__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:10px}
.sx .sx-panel__head .sx-sub{margin:0;color:var(--teal)}
.sx-panel__count{font:700 14px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text-dim)}
.sx-panel__count b{font-size:22px;color:var(--teal)}
.sx-panel__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 26px}
.sx-panel__list li{display:flex;align-items:center;gap:12px;padding:13px 0;border-top:1px solid rgba(79,191,160,.14);font-size:14.5px;color:var(--text-mid);transition:color .35s}
.sx-switch{position:relative;flex:0 0 auto;width:34px;height:20px;border-radius:20px;border:1px solid var(--edge-2);background:rgba(255,255,255,.08);transition:background .35s,border-color .35s}
.sx-switch i{position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#7E8794;transition:transform .4s cubic-bezier(.34,1.5,.5,1),background .35s}
.sx-panel li.is-on,.sx-panel:not(.is-armed) li{color:var(--text)}
.sx-panel li.is-on .sx-switch,.sx-panel:not(.is-armed) .sx-switch{background:var(--teal);border-color:var(--teal)}
.sx-panel li.is-on .sx-switch i,.sx-panel:not(.is-armed) .sx-switch i{transform:translateX(14px);background:#fff}

/* ==========================================================================
   JOURNEY: a van drives the route from the search to the booked job
   ========================================================================== */
.sx-road__map{position:relative;height:236px;margin:0 0 12px}
.sx-road__svg{position:absolute;left:0;right:0;top:40px;width:100%;height:150px;overflow:visible}
.sx-road__edge,.sx-road__asphalt,.sx-road__dash{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
.sx-road__edge{stroke:rgba(255,255,255,.07);stroke-width:36}
.sx-road__asphalt{stroke:#15181D;stroke-width:28}
.sx-road__dash{stroke:rgba(255,255,255,.2);stroke-width:2;stroke-dasharray:10 12}
.sx-road__done{fill:none;stroke:var(--gold);stroke-width:3.5;stroke-linecap:round;opacity:0;filter:drop-shadow(0 0 6px rgba(244,160,0,.7))}
.sx-road.is-set .sx-road__done{opacity:1}
.sx-road__stops{list-style:none;margin:0;padding:0}
.sx-stop{position:absolute;left:var(--x,0);top:var(--y,0);z-index:2;transform:translate(-50%,-50%)}
.sx-stop button{display:block;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
.sx-stop button:focus-visible .sx-stop__n{outline:2px solid var(--gold);outline-offset:3px}
.sx-stop__n{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:2px solid #2A2E36;background:#0D0F13;font:800 13px/1 var(--font-head);color:var(--text-dim);
  transition:background .4s,color .4s,border-color .4s,box-shadow .4s}
.sx-stop.is-done .sx-stop__n{border-color:var(--gold-line);color:var(--gold)}
.sx-stop.is-on .sx-stop__n{background:var(--gold);border-color:var(--gold);color:#111;box-shadow:0 0 0 6px rgba(244,160,0,.15),0 0 26px rgba(244,160,0,.6)}
.sx-stop__t{position:absolute;left:50%;top:calc(100% + 10px);width:150px;margin-left:-75px;text-align:center;font-size:13.5px;font-weight:600;line-height:1.3;color:var(--text-dim);transition:color .3s}
.sx-stop.is-up .sx-stop__t{top:auto;bottom:calc(100% + 10px)}
.sx-stop:last-child .sx-stop__t{left:auto;right:-8px;margin:0;text-align:right}
.sx-stop.is-on .sx-stop__t,.sx-stop button:hover .sx-stop__t{color:var(--text)}
.sx-van{position:absolute;left:0;top:0;z-index:3;width:56px;height:32px;margin:-27px 0 0 -28px;transform-origin:50% 84%;pointer-events:none}
.sx-van svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 6px 10px rgba(0,0,0,.7))}
.sx-van__body{fill:var(--gold)}
.sx-van__win{fill:#1A1D22}
.sx-van__stripe{fill:rgba(17,17,17,.35)}
.sx-van__wheel{fill:#111}
.sx-van__hub{fill:#8B93A0}
.sx-van__light{stroke:#FFF3C8;stroke-width:2.4;stroke-linecap:round}
.sx-road.is-driving .sx-van svg{animation:sxJolt .28s ease-in-out infinite}
@keyframes sxJolt{50%{transform:translateY(-1.5px)}}
.sx-road__legs{display:grid}
.sx-leg{grid-area:1/1;display:grid;grid-template-columns:330px minmax(0,1fr);gap:56px;align-items:center;opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .5s var(--ease),transform .6s var(--ease)}
.sx-leg.is-on{opacity:1;transform:none;pointer-events:auto}
.sx-leg__screen{display:grid;align-items:center;min-height:330px;padding:22px 18px;border-radius:26px;border:1px solid var(--edge-2);background:#0B0D11;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.95),0 0 60px -30px rgba(244,160,0,.25)}
.sx-screen{min-width:0}
.sx-leg__k{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.sx-leg__t{margin:12px 0 14px;font-family:var(--font-head);font-weight:800;font-size:clamp(28px,2.6vw,40px);line-height:1.05;letter-spacing:-.03em}
.sx-leg__d{margin:0;max-width:540px;font-size:17.5px;line-height:1.65;color:var(--text-mid)}

/* the six screens */
.sxj{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;font-size:13px}
.sxj__k{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}
.sxj-search{display:flex;align-items:center;min-width:0;height:46px;padding:0 18px 0 16px;border-radius:100px;border:1px solid var(--gold-line);background:#181B21;color:var(--gold);font-size:14px}
/* a typed search keeps the full width of its picture; inside it the words sit left and the caret
   follows straight after the last letter as they type. The words stay on one line and are never cut
   short: ind-seox.js sets a query too long for its bar smaller, once, from the whole query */
.sxj-search,.sxw-near__search{overflow:hidden}
.sxj-search > svg,.sxw-near__search > svg{flex:0 0 auto;margin-right:10px}
.sxj-search > span,.sxw-near__search > span{flex:0 0 auto;color:var(--text);font-weight:500;white-space:nowrap}
.sxj-search > .sx-caret,.sxw-near__search > .sx-caret{flex:0 0 auto;margin-left:1px}
.sxj-clock{display:grid;justify-items:center;gap:2px;margin:26px 0 30px}
.sxj-clock b{font-family:var(--font-head);font-weight:800;font-size:64px;line-height:1;letter-spacing:-.04em;color:var(--text)}
.sxj-clock span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}
.sxj-search__chips{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-top:6px}
.sxj-search__chips span{padding:5px 11px;border-radius:100px;border:1px solid var(--edge-2);color:var(--text-dim);font-size:12px}
.sxj-map{position:relative;height:110px;border-radius:14px;overflow:hidden;border:1px solid var(--edge);background:#0F1216}
.sxj-map svg{position:absolute;inset:0;width:100%;height:100%}
.sxj-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px;border-radius:12px;border:1px solid var(--edge);background:#111419;color:var(--text-soft)}
.sxj-row span{display:grid;gap:2px;min-width:0}
.sxj-row small{font-size:11px;color:var(--text-dim)}
.sxj-row em{flex:0 0 auto;font-style:normal;font-weight:700;font-size:12px;color:var(--text-mid)}
.sxj-row.is-you{border-color:var(--gold-line);background:var(--gold-soft)}
.sxj-row.is-you em{color:var(--gold)}
.sxj-row em.is-teal{padding:2px 9px;border-radius:100px;background:var(--teal-soft);color:var(--teal)}
.sxj-row em.is-gold{padding:2px 9px;border-radius:100px;background:var(--gold-soft);color:var(--gold)}
.sx-screen.is-on .sxj--track .sxj-row{animation:sxRowIn .6s var(--ease) both;animation-delay:calc(var(--i) * .25s + .2s)}
@keyframes sxRowIn{from{opacity:0;transform:translateY(10px)}}
.sxj--proof{justify-items:center;text-align:center}
.sxj-proof__stars{display:flex;gap:4px;font-size:26px;color:var(--gold)}
.sx-screen.is-on .sxj-proof__stars i{animation:sxStar .5s cubic-bezier(.34,1.6,.5,1) both;animation-delay:calc(var(--i) * .1s + .15s)}
@keyframes sxStar{from{transform:scale(0) rotate(-40deg);opacity:0}}
.sxj-proof__stars i{font-style:normal}
.sxj-proof__count{font-weight:700;color:var(--text)}
.sxj-proof__quote{margin:4px 0;padding:14px 16px;border-radius:14px;border:1px solid var(--edge);background:#111419;font-style:italic;line-height:1.5;color:var(--text-soft)}
.sxj-proof__photos{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:100%}
.sxj-proof__photos i{aspect-ratio:1;border-radius:10px;background:linear-gradient(135deg,rgba(244,160,0,.3),rgba(79,191,160,.2)),#1A1D22}
.sxj-proof__chips{display:flex;gap:6px}
.sxj-proof__chips span{padding:4px 10px;border-radius:100px;background:var(--teal-soft);color:var(--teal);font-size:11.5px;font-weight:600}
.sxj--call{justify-items:stretch;gap:12px}
.sxj-call__btn{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;height:62px;border-radius:18px;background:var(--gold);color:#111;font:800 18px/1 var(--font-head);box-shadow:0 18px 40px -14px rgba(244,160,0,.7)}
.sxj-call__alt{display:flex;align-items:center;justify-content:center;height:52px;border-radius:16px;border:1px solid var(--edge-2);color:var(--text);font-weight:600}
.sxj-call__cap{margin:4px 0 0;text-align:center;color:var(--text-dim)}
.sx-screen.is-on .sxj-call__btn .sxw-tap{animation:sxTap 3s ease .8s infinite}
.sxj--won{justify-items:center;text-align:center;gap:8px}
.sxj-won__tick{display:grid;place-items:center;width:78px;height:78px;border-radius:50%;background:var(--teal);color:#0A1512;box-shadow:0 0 40px rgba(79,191,160,.5)}
.sx-screen.is-on .sxj-won__tick{animation:sxWon .8s cubic-bezier(.34,1.6,.5,1) both}
@keyframes sxWon{from{transform:scale(.3);opacity:0}}
.sxj-won__t{margin-top:8px;font-family:var(--font-head);font-size:24px;letter-spacing:-.02em}
.sxj-won__job{color:var(--text-soft)}
.sxj-won__note{margin-top:6px;padding:5px 12px;border-radius:100px;background:var(--gold-soft);color:var(--gold);font-weight:600;font-size:12px}

/* ==========================================================================
   EXPERTISE
   ========================================================================== */
.sx-know__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:80px;align-items:start}
.sx-know__head{position:sticky;top:120px}
.sx-know__head .wdp-h2{margin-top:0}
.sx-signals{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:28px 0 0;padding:0}
.sx-signals li{padding:7px 13px;border-radius:100px;border:1px solid var(--teal-line);color:var(--teal);font-size:13.5px;background:rgba(79,191,160,.04)}
.sx-know__head.is-in .sx-signals li{animation:sxSignal 6s ease infinite;animation-delay:calc(var(--i) * .6s + .6s)}
@keyframes sxSignal{0%,14%,100%{background:rgba(79,191,160,.04);box-shadow:none}6%{background:rgba(79,191,160,.2);box-shadow:0 0 18px rgba(79,191,160,.35)}}
.sx-rules{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 36px}
.sx-rules li{display:grid;grid-template-columns:auto minmax(0,1fr);align-content:start;gap:16px;padding:24px 0;border-top:1px solid var(--edge);
  transition:opacity .5s ease calc(var(--i) * .08s + .2s),transform .6s var(--ease) calc(var(--i) * .08s + .2s)}
html.el8-js .sx-know__list:not(.is-in) .sx-rules li{opacity:0;transform:translateY(10px)}
.sx-rules__art{position:relative;display:grid;place-items:center;width:62px;height:62px;border-radius:18px;border:1px solid var(--teal-line);background:var(--teal-soft);color:var(--teal);overflow:hidden}
.sxr{position:relative;display:block;width:42px;height:42px}
.sxr svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sx-know__list.is-in .sxr *{animation-play-state:running}
/* follow up: the timer closes fast */
.sxr-follow__track{fill:none;stroke:rgba(79,191,160,.2);stroke-width:3}
.sxr-follow__timer{fill:none;stroke:var(--teal);stroke-width:3;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1;transform:rotate(-90deg);transform-origin:center;transform-box:fill-box}
.sx-know__list.is-in .sxr-follow__timer{animation:sxrTimer 4s ease-in-out infinite}
@keyframes sxrTimer{0%{stroke-dashoffset:1}40%,80%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.sxr .sxr-follow__phone{inset:auto;left:27%;top:27%;width:46%;height:46%;fill:currentColor}
.sx-know__list.is-in .sxr-follow__phone{animation:sxRingPhone 1s ease 1.6s infinite}
/* local intent: the pin's radius pulses over the suburb grid */
.sxr-local__grid{position:absolute;inset:0;background-image:linear-gradient(rgba(79,191,160,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(79,191,160,.18) 1px,transparent 1px);background-size:10px 10px;border-radius:8px}
.sxr-local__ring{position:absolute;left:50%;top:58%;width:36px;height:36px;margin:-18px;border-radius:50%;border:1.5px solid var(--teal);opacity:0}
.sx-know__list.is-in .sxr-local__ring{animation:sxRing 2.4s ease-out infinite}
.sx-know__list.is-in .sxr-local__ring--b{animation-delay:1.2s}
.sxr .sxr-local__pin{inset:auto;left:22%;top:6%;width:56%;height:62%;fill:var(--teal)}
.sxr-local__pin circle{fill:#0A1512}
/* reviews: the stars fill */
.sxr--stars{display:flex;align-items:center;justify-content:center;gap:0;font-size:10.5px;letter-spacing:-.5px;color:rgba(79,191,160,.25)}
.sxr--stars i{font-style:normal}
.sx-know__list.is-in .sxr--stars i{animation:sxrStar 4s ease infinite;animation-delay:calc(var(--i) * .15s)}
@keyframes sxrStar{0%,5%{color:rgba(79,191,160,.25)}14%,80%{color:var(--teal)}92%,100%{color:rgba(79,191,160,.25)}}
/* mobile speed: the needle swings to green */
.sxr-speed__arc,.sxr-speed__ok{fill:none;stroke-width:4;stroke-linecap:round}
.sxr-speed__arc{stroke:rgba(79,191,160,.2)}
.sxr-speed__ok{stroke:var(--teal)}
.sxr--speed svg{inset:6px 0 auto;height:26px}
.sxr-speed__needle{position:absolute;left:50%;top:10px;width:2px;height:22px;margin-left:-1px;border-radius:2px;background:var(--text);transform-origin:50% 100%;transform:rotate(52deg)}
.sx-know__list.is-in .sxr-speed__needle{animation:sxsNeedle 4s var(--ease) infinite}
/* quote forms: the fields fill and the button goes */
.sxr--form{display:grid;align-content:center;gap:5px}
.sxr-form__f{height:7px;border-radius:3px;border:1px solid var(--teal-line);background:linear-gradient(90deg,var(--teal) 50%,transparent 50%) 100% 0/200% 100%}
.sxr-form__btn{width:24px;height:9px;border-radius:5px;background:var(--gold);justify-self:end}
.sxr-form__f{transform-origin:left}
.sx-know__list.is-in .sxr-form__f{animation:sxrField 4s ease infinite;animation-delay:calc(var(--i) * .5s)}
@keyframes sxrField{0%{background-position:100% 0}30%,85%{background-position:0 0}100%{background-position:100% 0}}
.sx-know__list.is-in .sxr-form__btn{animation:sxrPress 4s ease infinite}
@keyframes sxrPress{0%,55%{transform:none}62%{transform:scale(.8)}70%,100%{transform:none}}
/* attribution: one source outgrows the rest */
.sxr.sxr--source{display:flex;align-items:flex-end;justify-content:center;gap:5px;height:34px;margin-top:4px}
.sxr--source i{width:9px;height:var(--h);border-radius:3px 3px 1px 1px;background:rgba(79,191,160,.45);transform-origin:bottom}
.sxr--source i.is-top{background:var(--gold)}
.sx-know__list.is-in .sxr--source i{animation:sxrBar 4s var(--ease) infinite;animation-delay:calc(var(--i) * .15s)}
@keyframes sxrBar{0%{transform:scaleY(.2)}35%,85%{transform:none}100%{transform:scaleY(.2)}}
.sx-rules h4{margin:2px 0 6px;font-family:var(--font-head);font-weight:700;font-size:19px}
.sx-rules p{margin:0;font-size:15px;line-height:1.55;color:var(--text-mid)}
/* the last line lands like a rubber stamp when it comes into view */
.sx-bills{margin:84px 0 0;padding:52px 0 18px;border-top:1px solid var(--edge);text-align:center;font-family:var(--font-head);font-weight:800;
  font-size:clamp(28px,3.6vw,52px);line-height:1.1;letter-spacing:-.035em;text-wrap:balance}
.sx-bills__a{color:var(--text-dim);transition:opacity .6s ease .5s}
.sx-bills__b{position:relative;display:inline-block;margin:.12em 0 0 .3em;color:var(--teal);white-space:nowrap}
.sx-bills__b > span{display:inline-block}
.sx-bills__ink{position:absolute;inset:-.16em -.24em -.1em;border:.07em solid var(--teal);border-radius:.22em;opacity:.55;transform:rotate(-2deg);pointer-events:none}
.sx-bills__ink::after{content:"";position:absolute;inset:-2px;border-radius:inherit;border:2px solid var(--teal);opacity:0}
html.el8-js .sx-bills:not(.is-stamped) .sx-bills__b > span{opacity:0;transform:scale(2.3) rotate(-9deg)}
html.el8-js .sx-bills:not(.is-stamped) .sx-bills__ink{opacity:0;transform:scale(1.35) rotate(-2deg)}
.sx-bills.is-stamped .sx-bills__b > span{animation:sxStamp .55s cubic-bezier(.2,1.5,.4,1) both;transform:rotate(-2deg)}
.sx-bills.is-stamped .sx-bills__ink{animation:sxInk .6s ease-out .3s both}
.sx-bills.is-stamped .sx-bills__ink::after{animation:sxShock .9s ease-out .32s both}
.sx-bills.is-stamped{animation:sxShake .35s ease .32s}
.sx-bills.is-stamped .sx-bills__a{opacity:.6}
@keyframes sxStamp{0%{opacity:0;transform:scale(2.3) rotate(-9deg)}55%{opacity:1;transform:scale(.94) rotate(-2deg)}100%{opacity:1;transform:scale(1) rotate(-2deg)}}
@keyframes sxInk{0%{opacity:0;transform:scale(1.3) rotate(-2deg)}40%{opacity:.95}100%{opacity:.55;transform:scale(1) rotate(-2deg)}}
@keyframes sxShock{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.35)}}
@keyframes sxShake{25%{transform:translate(2px,1px)}50%{transform:translate(-2px,-1px)}75%{transform:translate(1px,-1px)}}

/* ==========================================================================
   RESULTS: case files
   ========================================================================== */
.sx-link{display:inline-flex;margin-top:18px;font-weight:600;color:var(--gold)}
.sx-link:hover{color:var(--gold-hover)}
.sx-proof__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.sx-case{display:flex;flex-direction:column;padding:30px 30px 26px;border-radius:26px;border:1px solid var(--edge);background:linear-gradient(180deg,#111318,#0B0C0F)}
.sx-case__tag{align-self:flex-start;padding:6px 12px;border-radius:100px;border:1px solid var(--edge-2);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-mid)}
.sx-case__num{margin:22px 0 4px;font-family:var(--font-head);font-weight:800;font-size:clamp(56px,5.4vw,80px);line-height:.95;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.sx-case__sub{margin:0;font-family:var(--font-head);font-weight:700;font-size:18px;color:var(--gold)}
.sx-case__line{width:100%;height:56px;margin:18px 0 6px;overflow:visible}
.sx-case__line{clip-path:inset(-10px 100% -10px -10px);transition:clip-path 1.6s var(--ease) calc(var(--i) * .15s + .4s)}
.sx-case.is-in .sx-case__line{clip-path:inset(-10px -10px -10px -10px)}
.sx-case__line path{fill:none;stroke:var(--gold);stroke-width:2;vector-effect:non-scaling-stroke}
.sx-case__line circle{fill:var(--gold);opacity:0;transition:opacity .4s ease calc(var(--i) * .15s + 1.6s);filter:drop-shadow(0 0 6px rgba(244,160,0,.9))}
.sx-case.is-in .sx-case__line circle{opacity:1}
.sx-case__dl{margin:0 0 20px}
.sx-case__dl dt{margin:16px 0 6px;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}
.sx-case__dl dt.is-gold{color:var(--gold)}
.sx-case__dl dd{margin:0;font-size:15px;line-height:1.55;color:var(--text-mid)}
.sx-case__foot{display:grid;gap:14px;margin-top:auto;padding-top:18px;border-top:1px solid var(--edge)}
.sx-case__proof{display:flex;gap:8px;font-size:14px;color:var(--teal)}
.sx-case__foot a{font-weight:600;color:var(--text)}
.sx-case__foot a:hover{color:var(--gold)}

/* the approved FAQ keeps its own spacing inside the redesign */
.sx-faq{padding:0 0 110px}

/* keep exploring: a web design door */
.wpa-site{display:grid;align-content:start;gap:8px;width:100%;height:100%;padding:0 18px 18px;overflow:hidden}
.wpa-site__bar{display:flex;gap:5px;margin:0 -18px 6px;padding:10px 14px;border-bottom:1px solid var(--edge)}
.wpa-site__bar i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.18)}
.wpa-site__h{height:10px;width:74%;border-radius:5px;background:rgba(255,255,255,.4)}
.wpa-site__h.s{width:48%;background:var(--gold)}
.wpa-site__btn{width:78px;height:18px;border-radius:9px;background:var(--gold)}
.wpa-site__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:4px}
.wpa-site__cards i{height:34px;border-radius:7px;border:1px solid var(--edge);background:rgba(255,255,255,.03)}
.wdp-path.is-in .wpa-site > *{animation:sxBuild 6s var(--ease) infinite}
.wdp-path.is-in .wpa-site > :nth-child(2){animation-delay:.15s}.wdp-path.is-in .wpa-site > :nth-child(3){animation-delay:.3s}
.wdp-path.is-in .wpa-site > :nth-child(4){animation-delay:.45s}.wdp-path.is-in .wpa-site > :nth-child(5){animation-delay:.6s}
@keyframes sxBuild{0%{opacity:0;transform:translateY(8px)}10%,80%{opacity:1;transform:none}92%,100%{opacity:0}}

/* ==========================================================================
   SHARED KIT (resources/views/industries/seo/shared): the typed scenes the
   other seven industries use, in the Trades language. Icons come from the
   approved SEO industry symbol set (32 unit line icons).
   ========================================================================== */

/* hero: organic results instead of a map pack */
.sx-packcard--web{width:320px}
@media (min-width:701px){.sx-packcard--web ~ .sx-radar__cap{max-width:170px}}
.sx-pack__row--web{align-items:start}
.sx-pack__row--web .sx-pack__n{margin-top:1px}
.sx-pack__url{display:flex;align-items:center;gap:6px;min-width:0;font-size:10.5px;color:var(--teal)}
.sx-pack__url > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sx-pack__url em{flex:0 0 auto;padding:1px 7px;border-radius:100px;background:var(--gold);color:#111;font:700 9.5px/1.6 Inter,system-ui,sans-serif;font-style:normal}
.sx-pack__title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12.5px;line-height:1.3;font-weight:600;color:#BFD3FF}
.sx-pack__row--web.is-you .sx-pack__title{color:var(--text)}
.sx-pack__row--web .sx-pack__note{white-space:normal;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
.sx-pack__call svg{width:15px;height:15px}

/* why: what a client is worth over time */
.sxw--value{display:grid;gap:10px;padding:18px}
.sxw-value__k{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}
.sxw-value__row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 12px;padding:12px 14px 17px;border-radius:14px;border:1px solid var(--edge);background:#111419;overflow:hidden}
.sxw-value__row.is-top{border-color:var(--gold-line);background:var(--gold-soft)}
.sxw-value__name{display:grid;gap:2px;min-width:0;color:var(--text-soft)}
.sxw-value__name b{color:var(--text)}
.sxw-value__name em{font-style:normal;font-size:11.5px;color:var(--text-dim)}
.sxw-value__row strong{font-family:var(--font-head);font-weight:800;font-size:15px;color:var(--text-mid)}
.sxw-value__row.is-top{grid-template-columns:minmax(0,1fr)}
.sxw-value__row.is-top strong{font-size:22px;color:var(--gold)}
.sxw-value__bar{position:absolute;left:14px;right:14px;bottom:7px;height:3px;border-radius:3px;background:rgba(255,255,255,.08)}
.sxw-value__bar::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w);border-radius:inherit;background:var(--teal);transform-origin:left;transition:transform 1.2s var(--ease) calc(var(--i) * .2s + .4s)}
.sxw-value__row.is-top .sxw-value__bar::after{background:var(--gold)}
html.el8-js .sx-card:not(.is-in) .sxw-value__bar::after{transform:scaleX(0)}

/* pillar panels: ranks rising, a category tree, a checklist, ticks landing */
.sxv-track__ic svg{width:18px;height:18px}
.sxv-serp{display:grid;gap:7px;padding:16px 18px 4px}
.sxv-serp__row{display:flex;align-items:center;gap:10px}
.sxv-serp__row b{display:grid;place-items:center;flex:0 0 auto;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.08);font:700 10px/1 var(--font-head);color:var(--text-mid)}
.sxv-serp__row i{height:8px;width:var(--w);border-radius:4px;background:rgba(255,255,255,.12);transform-origin:left;animation:sxvGrow 6s var(--ease) infinite;animation-delay:calc(var(--i) * .2s)}
.sxv-serp__row.is-you b{background:var(--gold);color:#111}
.sxv-serp__row.is-you i{background:linear-gradient(90deg,var(--gold),rgba(244,160,0,.35))}
@keyframes sxvGrow{0%{transform:scaleX(.25)}30%,86%{transform:none}100%{transform:scaleX(.25)}}
.sxv-tree{position:relative;height:82px;margin:14px 18px 0}
.sxv-tree__root{position:absolute;left:50%;top:0;width:48px;height:16px;margin-left:-24px;border-radius:5px;background:var(--gold);box-shadow:0 0 16px rgba(244,160,0,.4)}
.sxv-tree__stem{position:absolute;left:16.66%;right:16.66%;top:30px;height:16px;border:1.5px solid rgba(255,255,255,.2);border-bottom:0;border-radius:7px 7px 0 0}
.sxv-tree__stem::before{content:"";position:absolute;left:50%;top:-14px;height:30px;border-left:1.5px solid rgba(255,255,255,.2)}
.sxv-tree__leaf{position:absolute;top:50px;left:calc(16.66% + var(--i) * 33.33% - 32px);width:64px;height:28px;border-radius:7px;border:1px solid var(--edge-2);background:#111419;animation:sxvLeaf 6s ease infinite;animation-delay:calc(var(--i) * .5s)}
.sxv-tree__leaf.is-lit{border-color:var(--gold-line);background:var(--gold-soft)}
@keyframes sxvLeaf{0%,100%{transform:none}12%{transform:translateY(-4px)}22%{transform:none}}
.sxv-crumbs{font:600 12.5px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text)}
.sxv-note span{display:inline-flex;align-items:center;gap:8px;color:var(--teal);font-size:13px}
.sxv-note span::before{content:"✓";font-weight:800}
.sxv-check{display:inline-flex;align-items:center;gap:10px}
.sxv-check > i{display:grid;place-items:center;flex:0 0 auto;width:20px;height:20px;border-radius:6px;border:1.5px solid var(--edge-2);animation:sxvBox 7s ease infinite;animation-delay:calc(var(--i) * .5s + .3s)}
.sxv-check svg{width:12px;height:12px;fill:none;stroke:#0A1512;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@keyframes sxvBox{0%,6%{background:transparent;border-color:var(--edge-2)}12%,88%{background:var(--teal);border-color:var(--teal)}100%{background:transparent;border-color:var(--edge-2)}}
.sxv--track .sxv-tick b{animation:sxvPop 7s ease infinite;animation-delay:calc(var(--i) * .6s + .4s)}
@keyframes sxvPop{0%,4%,20%,100%{transform:none}10%{transform:scale(1.14)}}

/* journey screens: the typed ones (they replay each time their step comes round) */
.sxj-brief__ping{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,122,107,.4);background:rgba(255,122,107,.08);color:var(--text)}
.sxj-brief__ic{position:relative;display:grid;place-items:center;flex:0 0 auto;width:36px;height:36px;border-radius:50%;background:var(--coral);color:#1A0B08}
.sxj-brief__ic svg{width:18px;height:18px}
.sxj-brief__ic::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1.5px solid var(--coral);opacity:0}
.sx-leg.is-on .sxj-brief__ic::after{animation:sxPing 1.6s ease-out .3s 3}
@keyframes sxPing{0%{opacity:1;transform:none}100%{opacity:0;transform:scale(1.7)}}
.sxj-brief__list{display:flex;flex-wrap:wrap;gap:8px}
.sxj-brief__list span{padding:7px 12px;border-radius:100px;border:1px solid var(--edge-2);background:#111419;color:var(--text-soft);font-size:12.5px}
.sx-leg.is-on .sxj-brief__list span{animation:sxRowIn .5s var(--ease) both;animation-delay:calc(var(--i) * .18s + .5s)}
.sxj-results{display:grid;gap:6px;margin-top:4px}
.sxj-results span{display:grid;gap:5px;padding:10px 12px;border-radius:10px;border:1px solid var(--edge);background:#111419}
.sxj-results i{height:6px;width:80%;border-radius:3px;background:rgba(255,255,255,.14)}
.sxj-results i.s{width:55%;background:rgba(255,255,255,.07)}
.sxj-results span.is-you{border-color:var(--gold-line);background:var(--gold-soft)}
.sxj-results span.is-you i:first-child{background:var(--gold)}
.sx-leg.is-on .sxj-results span{animation:sxRowIn .5s var(--ease) both;animation-delay:calc(var(--i) * .15s + 1.4s)}
.sxj-call__ic{display:grid;place-items:center}
.sxj-call__ic svg{width:18px;height:18px}
.sxj-short__firm{display:grid;grid-template-columns:26px minmax(0,1fr);align-items:center;gap:12px;padding:11px 12px;border-radius:12px;border:1px solid var(--edge);background:#111419}
.sxj-short__firm > span:last-child{display:grid;gap:2px;min-width:0}
.sxj-short__firm b{font-size:13px;color:var(--text)}
.sxj-short__firm small{font-size:11px;color:var(--text-dim)}
.sxj-short__mark{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--edge-2);color:var(--text-dim);font-weight:800}
.sxj-short__firm.is-you{border-color:var(--gold-line);background:var(--gold-soft)}
.sxj-short__firm.is-you .sxj-short__mark{background:var(--gold);border-color:var(--gold);color:#111}
.sx-leg.is-on .sxj-short__firm{animation:sxRowIn .5s var(--ease) both;animation-delay:calc(var(--i) * .15s + .2s)}
.sx-leg.is-on .sxj-short__firm:not(.is-you){animation:sxRowIn .5s var(--ease) both,sxFadeTo .6s ease 1.4s forwards;animation-delay:calc(var(--i) * .15s + .2s),1.4s}
.sx-leg.is-on .sxj-short__firm.is-you .sxj-short__mark{animation:sxStar .5s cubic-bezier(.34,1.6,.5,1) 1.1s both}
@keyframes sxFadeTo{to{opacity:.55}}
.sxj-check > span{display:flex!important;align-items:center;gap:10px;white-space:nowrap}
.sxj-check em{white-space:nowrap}
.sxj-check__box{display:grid;place-items:center;flex:0 0 auto;width:20px;height:20px;border-radius:6px;border:1.5px solid var(--edge-2)}
.sxj-check__box svg{width:12px;height:12px;fill:none;stroke:#0A1512;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.sx-leg.is-on .sxj-check__box{animation:sxBoxOn .35s ease both;animation-delay:calc(var(--i) * .45s + .5s)}
.sx-leg.is-on .sxj-check__box svg,.sx-leg.is-on .sxj-check em{animation:sxShow .35s ease both;animation-delay:calc(var(--i) * .45s + .6s)}
.sxj-check em{opacity:.35}
@keyframes sxBoxOn{to{background:var(--teal);border-color:var(--teal)}}
@keyframes sxShow{to{opacity:1}}
.sxj-read__bar{height:4px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}
.sxj-read__bar i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--gold));transform-origin:left;transform:scaleX(.06)}
.sx-leg.is-on .sxj-read__bar i{animation:sxFill 4.6s var(--ease) .3s forwards}
@keyframes sxFill{to{transform:none}}
.sxj-read__t{font-family:var(--font-head);font-weight:800;font-size:17px;line-height:1.25;color:var(--text)}
.sxj-read__d{margin:0;font-size:13px;line-height:1.55;color:var(--text-mid)}
.sxj-read__lines{display:grid;gap:6px}
.sxj-read__lines i{height:6px;border-radius:3px;background:rgba(255,255,255,.09)}
.sxj-read__lines i.s{width:60%}
.sxj-compare__row{display:grid;gap:8px;padding:11px 12px;border-radius:12px;border:1px solid var(--edge);background:#111419;color:var(--text-soft)}
.sxj-compare__row > span{display:grid;gap:2px}
.sxj-compare__row b{color:var(--text)}
.sxj-compare__row small{font-size:11px;color:var(--text-dim)}
.sxj-compare__row.is-you{border-color:var(--gold-line);background:var(--gold-soft)}
.sxj-compare__bar{position:relative;height:5px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden}
.sxj-compare__bar::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w);border-radius:inherit;background:var(--text-dim);transform-origin:left;transform:scaleX(0)}
.sxj-compare__row.is-you .sxj-compare__bar::after{background:var(--gold)}
.sx-leg.is-on .sxj-compare__bar::after{animation:sxFill 1.2s var(--ease) .4s forwards}

/* the other vehicles */
.sx-van--bus{width:62px;margin-left:-31px}
.sx-van--truck{width:60px;margin-left:-30px}

/* the rules: an icon without a scene of its own draws itself in, centred in its tile
   (ind-seox.js sets pathLength, then .is-ready) */
.sxr--icon{display:grid;place-items:center}
.sxr.sxr--icon svg{position:static;width:30px;height:30px}
.sxr--icon svg.is-ready *{stroke-dasharray:1 1}
.sx-know__list.is-in .sxr--icon svg.is-ready *{animation:sxrDraw 6s ease-in-out infinite;animation-delay:calc(var(--i) * .35s)}
@keyframes sxrDraw{0%{stroke-dashoffset:1}35%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}

/* the rules on the other seven pages: one scene per principle (seo/shared/rules.blade.php), drawn
   on a 48 unit square and centred in the tile. The markup is the finished picture; while the list
   is on screen each scene loops on a 6 s cycle (per-part delays in --d). */
.sxr.sxk{width:50px;height:50px}
.sxk svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sxk [class*="a-"],.sxk [class*="sxk-"]{transform-box:fill-box;transform-origin:center}
.sxk .d{stroke:rgba(79,191,160,.36)}
.sxk .s{stroke-width:1.4}
.sxk .w{stroke:var(--text)}
.sxk .df{fill:rgba(79,191,160,.16)}
.sxk .dt{fill:rgba(79,191,160,.36);stroke:none}
.sxk .t{fill:var(--teal);stroke:none}
.sxk .g{stroke:var(--gold)}
.sxk .gf{fill:var(--gold);stroke:none}
.sxk .gs{fill:rgba(244,160,0,.14)}
.sxk .c{stroke:var(--coral)}
.sxk .cf{fill:var(--coral);stroke:none}
.sxk .k{stroke:#0B0E12;stroke-width:1.8}
.sxk .bgf{fill:#101E1C}
.sxk .blk{fill:rgba(79,191,160,.16);stroke-width:1.4}
.sxk .a-star{fill:var(--gold);stroke:none}
.sxk .a-lit{fill:var(--teal);stroke:none}
.sxk .a-out,.sxk .a-ring,.sxk .sxk-scan,.sxk .sxk-flip,.sxk .sxk-hit{opacity:0}
.sx-know__list.is-in .sxk .a-in{animation:sxkIn 6s var(--ease) var(--d,0s) infinite both}
.sx-know__list.is-in .sxk .a-show{animation:sxkShow 6s ease var(--d,0s) infinite both}
.sx-know__list.is-in .sxk .a-draw{animation:sxkDraw 6s ease-in-out var(--d,0s) infinite both}
.sx-know__list.is-in .sxk .a-zip{animation:sxkZip 6s ease-out var(--d,0s) infinite both}
.sx-know__list.is-in .sxk .a-x{transform-origin:0 50%;animation:sxkX 6s var(--ease) var(--d,0s) infinite both}
.sx-know__list.is-in .sxk .a-y{transform-origin:50% 100%;animation:sxkY 6s var(--ease) var(--d,0s) infinite both}
.sx-know__list.is-in .sxk .a-star{animation:sxkStar 6s ease var(--d,0s) infinite both}
.sx-know__list.is-in .sxk .a-lit{animation:sxkLit 6s ease var(--d,0s) infinite both}
.sx-know__list.is-in .sxk .a-out{animation:sxkOut 6s ease var(--d,0s) infinite both}
.sx-know__list.is-in .sxk .a-snap{animation:sxkSnap 6s var(--ease) var(--d,0s) infinite both}
.sx-know__list.is-in .sxk .a-ring{animation:sxkRing 2.4s ease-out var(--d,0s) infinite both}
.sx-know__list.is-in .sxk .a-beat{animation:sxkBeat 1.6s ease infinite}
@keyframes sxkIn{0%{opacity:0;transform:scale(.3)}7%{opacity:1;transform:scale(1.15)}12%,86%{opacity:1;transform:none}95%,100%{opacity:0;transform:scale(.6)}}
@keyframes sxkShow{0%{opacity:0;transform:translateY(3px)}9%,86%{opacity:1;transform:none}95%,100%{opacity:0}}
@keyframes sxkDraw{0%{stroke-dasharray:1 1;stroke-dashoffset:1}18%,86%{stroke-dasharray:1 1;stroke-dashoffset:0;opacity:1}95%,100%{stroke-dasharray:1 1;stroke-dashoffset:0;opacity:0}}
@keyframes sxkZip{0%{stroke-dasharray:1 1;stroke-dashoffset:1}9%,86%{stroke-dasharray:1 1;stroke-dashoffset:0;opacity:1}95%,100%{stroke-dasharray:1 1;stroke-dashoffset:0;opacity:0}}
@keyframes sxkX{0%{transform:scaleX(0)}16%,86%{transform:none;opacity:1}95%,100%{transform:none;opacity:0}}
@keyframes sxkY{0%{transform:scaleY(0)}16%,86%{transform:none;opacity:1}95%,100%{transform:none;opacity:0}}
@keyframes sxkStar{0%,3%{fill:rgba(79,191,160,.22);transform:scale(.6)}11%,86%{fill:var(--gold);transform:none}95%,100%{fill:rgba(79,191,160,.22);transform:none}}
@keyframes sxkLit{0%,3%{fill:rgba(79,191,160,.2)}9%,86%{fill:var(--teal)}95%,100%{fill:rgba(79,191,160,.2)}}
@keyframes sxkOut{0%,16%{opacity:.85;transform:none}36%,100%{opacity:0;transform:translate(var(--ox,-4px),var(--oy,0)) scale(.85)}}
@keyframes sxkSnap{0%{opacity:0;transform:translate(var(--tx,0),var(--ty,0))}14%,86%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
@keyframes sxkRing{0%{opacity:.9;transform:scale(.6)}70%,100%{opacity:0;transform:scale(2)}}
@keyframes sxkBeat{0%,45%,100%{transform:none}12%,30%{transform:scale(1.2)}21%{transform:scale(.96)}}
@keyframes sxkSpin{to{transform:rotate(360deg)}}
/* scene by scene */
.sx-know__list.is-in .sxk-read{animation:sxkRead 6s var(--ease) infinite both}
@keyframes sxkRead{0%,10%{transform:translateX(-26.5px)}22%,32%{transform:translateX(-13.5px)}44%,86%{transform:none}100%{transform:translateX(-26.5px)}}
.sxk-ptr{fill:var(--text);stroke:#0B0E12;stroke-width:1}
.sx-know__list.is-in .sxk-ptr{animation:sxkPtr 6s ease infinite both}
@keyframes sxkPtr{0%,18%{opacity:0;transform:translate(12px,8px)}28%{opacity:1}40%{opacity:1;transform:none}45%{transform:scale(.8)}50%,86%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
.sx-know__list.is-in .sxk-ecg{animation:sxkEcg 2.4s linear infinite}
@keyframes sxkEcg{0%{stroke-dasharray:.32 1.2;stroke-dashoffset:.32}100%{stroke-dasharray:.32 1.2;stroke-dashoffset:-1}}
.sx-know__list.is-in .sxk-scan{animation:sxkScanY 3s ease-in-out infinite}
@keyframes sxkScanY{0%{opacity:0;transform:none}12%{opacity:1}62%{opacity:1;transform:translateY(22px)}72%,100%{opacity:0;transform:translateY(22px)}}
.sxk-gear__teeth{stroke-linecap:butt}
.sx-know__list.is-in .sxk-gear{animation:sxkSpin 12s linear infinite}
.sxk-fix{fill:var(--teal)}
.sxk-fix__bang{opacity:0}
.sx-know__list.is-in .sxk-fix{animation:sxkFix 6s ease infinite}
.sx-know__list.is-in .sxk-fix__bang{animation:sxkFixOut 6s ease infinite}
.sx-know__list.is-in .sxk-fix__tick{animation:sxkFixIn 6s ease infinite}
@keyframes sxkFix{0%,34%{fill:var(--coral)}44%,92%{fill:var(--teal)}100%{fill:var(--coral)}}
@keyframes sxkFixOut{0%,34%{opacity:1}40%,94%{opacity:0}100%{opacity:1}}
@keyframes sxkFixIn{0%,38%{opacity:0;transform:scale(.4)}46%,92%{opacity:1;transform:none}100%{opacity:0}}
.sx-know__list.is-in .sxk-bob{animation:sxkBob 3s ease-in-out infinite}
@keyframes sxkBob{50%{transform:translate(1.5px,-1.5px)}}
.sx-know__list.is-in .sxk-flow{animation:sxkFlow 1.1s linear infinite}
@keyframes sxkFlow{to{stroke-dashoffset:-8.8}}
.sx-know__list.is-in .sxk-print{animation:sxkPrint 6s infinite both}
@keyframes sxkPrint{0%{transform:translateY(24px);animation-timing-function:steps(8,end)}36%,88%{transform:none;opacity:1}96%,100%{transform:none;opacity:0}}
.sx-know__list.is-in .sxk-drop{animation:sxkDrop 6s ease-in infinite both}
@keyframes sxkDrop{0%{opacity:0;transform:translateY(-12px)}10%{opacity:1;transform:none;animation-timing-function:ease-out}15%{transform:translateY(-3px);animation-timing-function:ease-in}20%,88%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
.sx-know__list.is-in .sxk-slide{animation:sxkSlide 6s var(--ease) .3s infinite both}
@keyframes sxkSlide{0%{opacity:0;transform:translate(9px,-7px) rotate(9deg)}14%,86%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
.sxk-cut{opacity:.35}
.sx-know__list.is-in .sxk-cut{animation:sxkCut 6s ease infinite both}
@keyframes sxkCut{0%,20%{opacity:1}34%,90%{opacity:.35}100%{opacity:1}}
.sx-know__list.is-in .sxk-walk{animation:sxkWalk 6s ease-in-out infinite both}
.sx-know__list.is-in .sxk-walk--in{animation-name:sxkWalkIn}
@keyframes sxkWalk{0%,30%{opacity:1;transform:none}55%,100%{opacity:0;transform:translateX(-7px)}}
@keyframes sxkWalkIn{0%,45%{opacity:0;transform:translateX(7px)}70%,100%{opacity:1;transform:none}}
.sxk-swing{transform-box:view-box!important;transform-origin:35px 11px!important}
.sx-know__list.is-in .sxk-swing{animation:sxkSwing 3s ease-in-out infinite}
@keyframes sxkSwing{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
.sx-know__list.is-in .sxk-rise{animation:sxkRise 6s var(--ease) infinite both}
@keyframes sxkRise{0%,8%{transform:translateY(14px)}28%,86%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
.sxk .sxk-mo{stroke:var(--teal);stroke-width:2.2;transform-box:view-box;transform-origin:0 0}
.sx-know__list.is-in .sxk-mo{animation:sxkMo 6s linear var(--d,0s) infinite both}
@keyframes sxkMo{0%{stroke:rgba(79,191,160,.22)}1%{stroke:var(--gold)}10%,86%{stroke:var(--teal)}100%{stroke:rgba(79,191,160,.22)}}
.sxk-hand{transform-box:view-box!important;transform-origin:24px 24px!important}
.sx-know__list.is-in .sxk-hand{animation:sxkSpin 6s linear infinite}
.sxk-hl{fill:rgba(244,160,0,.24);stroke:none}
.sx-know__list.is-in .sxk-shoot{animation:sxkShoot 6s cubic-bezier(.55,0,.9,.45) infinite both}
@keyframes sxkShoot{0%,8%{opacity:0;transform:translate(16px,-16px)}12%{opacity:1}18%,86%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
.sx-know__list.is-in .sxk-hit{animation:sxkHit 6s ease-out infinite both}
@keyframes sxkHit{0%,17%{opacity:0;transform:scale(.6)}19%{opacity:1}40%,100%{opacity:0;transform:scale(2.4)}}
.sx-know__list.is-in .sxk-glow{animation:sxkGlow 6s ease infinite both}
@keyframes sxkGlow{0%,26%{fill:rgba(79,191,160,.06)}34%,86%{fill:rgba(79,191,160,.3)}100%{fill:rgba(79,191,160,.06)}}
.sx-know__list.is-in .sxk-slow{animation:sxkSlow 6s linear infinite both}
@keyframes sxkSlow{0%{stroke-dasharray:1 1;stroke-dashoffset:1}55%,88%{stroke-dasharray:1 1;stroke-dashoffset:0;opacity:1}96%,100%{stroke-dasharray:1 1;stroke-dashoffset:0;opacity:0}}
.sx-know__list.is-in .sxk-climb{animation:sxkClimb 6s ease-in-out infinite both}
@keyframes sxkClimb{0%,8%{opacity:0;transform:translate(-22px,18px)}12%,20%{opacity:1;transform:translate(-22px,18px)}26%{transform:translate(-16.5px,10px)}30%,38%{transform:translate(-11px,9px)}44%{transform:translate(-5.5px,1px)}48%,88%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
.sxk-flip{fill:rgba(79,191,160,.2);transform-box:view-box!important;transform-origin:24px 26px!important}
.sx-know__list.is-in .sxk-flip{animation:sxkFlip 6s ease-in-out .2s infinite both}
@keyframes sxkFlip{0%{opacity:0;transform:none}4%{opacity:1}18%{opacity:1;transform:scaleX(-1)}22%,100%{opacity:0;transform:scaleX(-1)}}
.sxk-win{stroke:var(--gold)}
.sx-know__list.is-in .sxk-win{animation:sxkWin 6s ease infinite both}
@keyframes sxkWin{0%,16%{stroke:rgba(79,191,160,.36)}26%,86%{stroke:var(--gold)}100%{stroke:rgba(79,191,160,.36)}}
.sx-know__list.is-in .sxk-stamp{animation:sxkStamp 6s ease-out var(--d,0s) infinite both}
@keyframes sxkStamp{0%{opacity:0;transform:scale(2)}8%{opacity:1;transform:scale(.88)}13%,86%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}

/* ---- challenge scenes by theme ---- */
.sxc svg{overflow:visible}
/* commission: the booking goes through the platform, a slice stays there */
.sxc--cut{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 18px}
.sxc-cut__order{display:grid;grid-template-columns:28px minmax(0,1fr);grid-template-rows:auto auto;gap:5px 8px;align-items:center;width:34%;padding:10px;border-radius:12px;border:1px solid var(--gold-line);background:var(--gold-soft)}
.sxc-cut__ic{grid-row:span 2;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--gold);color:#111}
.sxc-cut__ic svg{width:16px;height:16px}
.sxc-cut__l{height:6px;border-radius:3px;background:rgba(255,255,255,.3)}
.sxc-cut__l.s{width:60%;background:rgba(255,255,255,.14)}
.sxc-cut__gate{display:grid;gap:4px;width:14%}
.sxc-cut__gate i{height:26px;border-radius:7px;background:#6E7FD9;opacity:.85}
.sxc-cut__gate i:nth-child(2){background:#4FBFA0}
.sxc-cut__gate i:nth-child(3){background:#C98BD6}
.sxc-cut__pie{position:relative;flex:0 0 auto;width:66px;height:66px}
.sxc-cut__pie svg{width:100%;height:100%}
.sxc-cut__whole{fill:rgba(244,160,0,.22);stroke:var(--gold);stroke-width:1.5}
.sxc-cut__slice{fill:var(--coral);transform-box:fill-box;transform-origin:0 100%}
.sxc-cut__pie b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:800 12px/1 var(--font-head);color:var(--text)}
.sxc-cut__you{display:grid;gap:6px;width:18%;padding:10px;border-radius:10px;border:1px solid var(--edge);background:#111419;opacity:.6}
.sxc-cut__you i{height:6px;border-radius:3px;background:rgba(255,255,255,.18)}
.sxc-cut__you i.s{width:60%}
.wdp-tile.is-in .sxc-cut__order{animation:sxToGate 4.8s ease-in-out infinite}
.wdp-tile.is-in .sxc-cut__slice{animation:sxSlice 4.8s ease-in-out infinite}
@keyframes sxToGate{0%,100%{transform:none}35%,55%{transform:translateX(26px)}}
@keyframes sxSlice{0%,40%,100%{transform:none}55%,80%{transform:translate(5px,-5px);filter:drop-shadow(0 0 6px rgba(255,122,107,.9))}}
/* research: a long run of research before anyone makes contact */
.sxc-res__line{position:absolute;left:8%;right:8%;top:46%;height:2px;background:rgba(255,255,255,.1)}
.sxc-res__line i{position:absolute;inset:0;background:linear-gradient(90deg,var(--teal),var(--gold));transform-origin:left;transform:scaleX(0)}
.sxc-res__stop{position:absolute;left:var(--x);top:46%;display:grid;place-items:center;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:1.5px solid var(--edge-2);background:#101318;color:var(--text-dim)}
.sxc-res__stop svg{width:16px;height:16px}
.sxc-res__weeks{position:absolute;left:8%;right:8%;bottom:30px;display:flex;justify-content:space-between}
.sxc-res__weeks i{width:1px;height:9px;background:rgba(255,255,255,.2)}
.wdp-tile.is-in .sxc-res__line i{animation:sxResLine 7s var(--ease) infinite}
.wdp-tile.is-in .sxc-res__stop{animation:sxResStop 7s ease infinite;animation-delay:calc(var(--i) * .8s)}
.wdp-tile.is-in .sxc-res__stop.is-end{animation-name:sxResEnd}
@keyframes sxResLine{0%{transform:scaleX(0);opacity:1}72%,90%{transform:none;opacity:1}100%{transform:none;opacity:0}}
@keyframes sxResStop{0%,3%{border-color:var(--edge-2);color:var(--text-dim);background:#101318}9%,88%{border-color:var(--teal-line);color:var(--teal);background:#0E1A17}100%{border-color:var(--edge-2);color:var(--text-dim);background:#101318}}
@keyframes sxResEnd{0%,3%{border-color:var(--edge-2);color:var(--text-dim);background:#101318}9%,88%{border-color:var(--gold);color:#111;background:var(--gold);box-shadow:0 0 18px rgba(244,160,0,.6)}100%{border-color:var(--edge-2);color:var(--text-dim);background:#101318}}
/* trust: credentials checked one by one */
.sxc--trust{display:grid;grid-template-columns:minmax(0,1fr) 64px;grid-template-rows:auto 1fr;gap:12px;padding:18px}
.sxc-trust__card{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;border:1px solid var(--edge);background:#111419}
.sxc-trust__face{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,rgba(244,160,0,.4),rgba(79,191,160,.3))}
.sxc-trust__lines{flex:1;display:grid;gap:6px}
.sxc-trust__lines i,.sxc-trust__l{height:6px;border-radius:3px;background:rgba(255,255,255,.16)}
.sxc-trust__lines i.s{width:60%;background:rgba(255,255,255,.08)}
.sxc-trust__checks{display:grid;gap:9px;align-content:start}
.sxc-trust__checks span{display:flex;align-items:center;gap:10px}
.sxc-trust__l{flex:1}
.sxc-trust__box{display:grid;place-items:center;flex:0 0 auto;width:18px;height:18px;border-radius:5px;border:1.5px solid var(--edge-2)}
.sxc-trust__box svg{width:11px;height:11px;fill:none;stroke:#0A1512;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.sxc-trust__shield{grid-column:2;grid-row:1 / span 2;align-self:center;display:grid;place-items:center;width:64px;height:64px;border-radius:18px;border:1px solid var(--edge-2);color:var(--text-dim)}
.sxc-trust__shield svg{width:30px;height:30px}
.wdp-tile.is-in .sxc-trust__box{animation:sxTrustBox 6s ease infinite;animation-delay:calc(var(--i) * .6s + .4s)}
.wdp-tile.is-in .sxc-trust__box svg{animation:sxTrustTick 6s ease infinite;animation-delay:inherit}
.wdp-tile.is-in .sxc-trust__shield{animation:sxTrustShield 6s ease infinite}
@keyframes sxTrustBox{0%,6%{background:transparent;border-color:var(--edge-2)}12%,86%{background:var(--teal);border-color:var(--teal)}100%{background:transparent;border-color:var(--edge-2)}}
@keyframes sxTrustTick{0%,6%{opacity:0}12%,86%{opacity:1}100%{opacity:0}}
@keyframes sxTrustShield{0%,42%,100%{color:var(--text-dim);border-color:var(--edge-2);box-shadow:none}50%,86%{color:var(--teal);border-color:var(--teal-line);box-shadow:0 0 24px -4px rgba(79,191,160,.6)}}
/* compliance: the risky claims struck out, careful words back in */
.sxc--comply{display:grid;align-content:center;gap:15px;padding:22px 76px 22px 24px}
.sxc-comply__line{display:flex;gap:8px}
.sxc-comply__line i{height:8px;border-radius:4px;background:rgba(255,255,255,.14)}
.sxc-comply__line .sxc-comply__flag{position:relative;background:rgba(255,122,107,.55)}
.sxc-comply__flag::after{content:"";position:absolute;left:-3px;right:-3px;top:50%;height:2px;margin-top:-1px;background:var(--coral);transform-origin:left;transform:scaleX(0)}
.sxc-comply__pen{position:absolute;right:20px;top:18px;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--gold);color:#111;box-shadow:0 10px 20px -8px rgba(244,160,0,.6)}
.sxc-comply__pen svg{width:18px;height:18px}
.wdp-tile.is-in .sxc-comply__flag{animation:sxFlag 6s ease infinite;animation-delay:calc(var(--i) * .5s)}
.wdp-tile.is-in .sxc-comply__flag::after{animation:sxStrike 6s ease infinite;animation-delay:calc(var(--i) * .5s)}
.wdp-tile.is-in .sxc-comply__pen{animation:sxPen 6s ease-in-out infinite}
@keyframes sxFlag{0%,22%{background:rgba(255,122,107,.55)}32%,86%{background:rgba(79,191,160,.6)}100%{background:rgba(255,122,107,.55)}}
@keyframes sxStrike{0%,6%{transform:scaleX(0);opacity:1}16%,24%{transform:none;opacity:1}32%,100%{transform:none;opacity:0}}
@keyframes sxPen{0%,100%{transform:none}14%{transform:translate(-60px,16px) rotate(-12deg)}30%{transform:translate(-30px,64px) rotate(-8deg)}46%{transform:none}}
/* sameness: pages that all say the same thing, and one that doesn't */
.sxc--same{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:18px}
.sxc-same__card{display:grid;align-content:start;gap:6px;padding:10px;border-radius:10px;border:1px solid var(--edge);background:#111419}
.sxc-same__card i{height:6px;border-radius:3px;background:rgba(255,255,255,.14)}
.sxc-same__card i:first-child{width:70%;height:8px}
.sxc-same__card i.s{background:rgba(255,255,255,.07)}
.wdp-tile.is-in .sxc-same__card{animation:sxSame 6s ease infinite;animation-delay:calc(var(--i) * .12s)}
.wdp-tile.is-in .sxc-same__card.is-you{animation:sxStandOut 6s var(--ease) infinite}
.wdp-tile.is-in .sxc-same__card.is-you i:first-child{animation:sxGoldBar 6s ease infinite}
@keyframes sxSame{0%,20%,100%{opacity:.9}35%,75%{opacity:.5}}
@keyframes sxStandOut{0%,20%,100%{transform:none;border-color:var(--edge);background:#111419;box-shadow:none}35%,75%{transform:translateY(-6px) scale(1.06);border-color:var(--gold-line);background:var(--gold-soft);box-shadow:0 14px 30px -10px rgba(244,160,0,.5)}}
@keyframes sxGoldBar{0%,20%,100%{background:rgba(255,255,255,.14)}35%,75%{background:var(--gold)}}
/* structure: one brand, several locations, a person at each */
.sxc--tree > svg{position:absolute;inset:0;width:100%;height:100%}
.sxc-tree__edge{fill:none;stroke:rgba(255,255,255,.2);stroke-width:1.5;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
.sxc-tree__node{position:absolute;left:var(--x);top:var(--y);display:grid;place-items:center;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:10px;border:1px solid var(--teal-line);background:#0E1A17;color:var(--teal)}
.sxc-tree__node svg{width:18px;height:18px}
.sxc-tree__node.is-root{width:40px;height:40px;margin:-20px 0 0 -20px;border-color:var(--gold);background:var(--gold);color:#111}
.sxc-tree__leaf{position:absolute;left:var(--x);top:81%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;border:1.5px solid var(--teal-line);background:var(--teal-soft)}
.sxc-tree__leaf.is-gap{border:1.5px dashed var(--coral);background:transparent}
.wdp-tile.is-in .sxc-tree__edge{animation:czFlow 1.6s linear infinite}
.wdp-tile.is-in .sxc-tree__leaf.is-gap{animation:sxStop 2.2s ease infinite}
.wdp-tile.is-in .sxc-tree__node:not(.is-root){animation:sxRowIn .6s var(--ease) both;animation-delay:calc(var(--i) * .2s + .2s)}
/* sensitive topics, written gently and reviewed */
.sxc--care{display:grid;grid-template-columns:56px minmax(0,1fr);align-items:center;gap:18px;padding:22px 26px}
.sxc-care__heart{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:rgba(255,122,107,.12);color:#FF9C8F}
.sxc-care__heart svg{width:28px;height:28px}
.sxc-care__text{display:grid;gap:10px}
.sxc-care__text i{height:7px;width:var(--w);border-radius:4px;background:rgba(255,255,255,.14);transform-origin:left}
.sxc-care__ok{position:absolute;right:18px;bottom:16px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--teal);opacity:0}
.sxc-care__ok svg{width:14px;height:14px;fill:none;stroke:#0A1512;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.wdp-tile.is-in .sxc-care__heart{animation:sxBeat 2.4s ease-in-out infinite}
.wdp-tile.is-in .sxc-care__text i{animation:sxSlowWrite 7s ease infinite;animation-delay:calc(var(--i) * .7s)}
.wdp-tile.is-in .sxc-care__ok{animation:sxOk 7s ease infinite}
@keyframes sxBeat{0%,100%{transform:none}12%{transform:scale(1.1)}24%{transform:none}36%{transform:scale(1.06)}}
@keyframes sxSlowWrite{0%{transform:scaleX(0);opacity:.4}25%,88%{transform:none;opacity:1}100%{transform:none;opacity:0}}
@keyframes sxOk{0%,58%{opacity:0;transform:scale(.4)}64%,90%{opacity:1;transform:none}100%{opacity:0}}
/* scale: hundreds of pages, too many thin */
.sxc--scale{padding:16px}
.sxc-scale__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:1fr;gap:5px;height:100%}
.sxc-scale__grid i{border-radius:3px;background:rgba(255,255,255,.1)}
.sxc-scale__grid i.is-thin{background:rgba(255,122,107,.45)}
.sxc-scale__count{position:absolute;right:14px;bottom:12px;display:grid;justify-items:end;padding:8px 12px;border-radius:10px;border:1px solid var(--edge-2);background:#101318}
.sxc-scale__count b{font-family:var(--font-head);font-weight:800;font-size:20px;line-height:1;color:var(--text)}
.sxc-scale__count small{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim)}
.wdp-tile.is-in .sxc-scale__grid i{animation:sxTile 6s ease infinite;animation-delay:calc(var(--i) * 40ms)}
@keyframes sxTile{0%{transform:scale(0)}8%,88%{transform:none}100%{transform:scale(0)}}
/* technical: links break as the site grows, and the crawler can't get through */
.sxc--crawl > svg{position:absolute;inset:0;width:100%;height:100%}
.sxc-crawl__links path{fill:none;stroke:rgba(79,191,160,.45);stroke-width:1.5;vector-effect:non-scaling-stroke}
.sxc-crawl__links path.is-broken{stroke:var(--coral);stroke-dasharray:4 5}
.sxc-crawl__node{position:absolute;left:var(--x);top:var(--y);width:16px;height:16px;margin:-8px;border-radius:5px;border:1.5px solid var(--teal);background:#12221E}
.sxc-crawl__node.is-lost{border-color:var(--coral);background:rgba(255,122,107,.12)}
.sxc-crawl__bot{position:absolute;inset:0;pointer-events:none;transform:translate(50%,18%)}
.sxc-crawl__bot::after{content:"";position:absolute;left:0;top:0;width:12px;height:12px;margin:-6px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px rgba(244,160,0,.8)}
.wdp-tile.is-in .sxc-crawl__links path.is-broken{animation:sxBroken 2.4s steps(2) infinite}
.wdp-tile.is-in .sxc-crawl__bot{animation:sxBot 7s ease-in-out infinite}
@keyframes sxBroken{50%{opacity:.25}}
@keyframes sxBot{0%,100%{transform:translate(50%,18%)}14%{transform:translate(23%,47%)}26%{transform:translate(13%,80%)}38%{transform:translate(23%,47%)}50%{transform:translate(50%,51%)}60%{transform:translate(50%,82%)}63%{transform:translate(47%,82%)}66%{transform:translate(53%,82%)}69%{transform:translate(50%,82%)}82%{transform:translate(50%,51%)}}
/* invisible: the site is there; the results don't show it */
.sxc-ghost__row{display:grid;gap:5px;padding:10px 14px;border-bottom:1px solid var(--edge)}
.sxc-ghost__row i{height:6px;width:70%;border-radius:3px;background:rgba(255,255,255,.16)}
.sxc-ghost__row i.s{width:45%;background:rgba(255,255,255,.08)}
.sxc-ghost__site{position:absolute;right:14px;bottom:12px;display:grid;grid-template-columns:28px minmax(0,1fr);grid-template-rows:auto auto;gap:5px 10px;align-items:center;width:46%;padding:10px;border-radius:12px;border:1px dashed var(--gold-line);background:#15130D}
.sxc-ghost__eye{grid-row:span 2;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:rgba(244,160,0,.15);color:var(--gold)}
.sxc-ghost__eye svg{width:16px;height:16px}
.sxc-ghost__site > i:not(.sxc-ghost__eye){height:6px;border-radius:3px;background:rgba(255,255,255,.2)}
.sxc-ghost__site > i.s{width:60%}
.wdp-tile.is-in .sxc-ghost__site{animation:sxGhost 5s ease-in-out infinite}
@keyframes sxGhost{0%,100%{opacity:.9;transform:none}50%{opacity:.16;transform:translateY(6px)}}
/* gbp: the business profile half done, and stuck */
.sxc--gbp{display:grid;grid-template-columns:minmax(0,1fr) 72px;align-items:center;gap:16px;padding:16px 18px}
.sxc-gbp__card{display:grid;gap:8px;padding:12px;border-radius:12px;border:1px solid var(--edge);background:#111419}
.sxc-gbp__head{display:flex;align-items:center;gap:10px}
.sxc-gbp__logo{display:grid;place-items:center;flex:0 0 auto;width:28px;height:28px;border-radius:8px;background:var(--gold);color:#111}
.sxc-gbp__logo svg{width:16px;height:16px}
.sxc-gbp__name{flex:1;height:8px;border-radius:4px;background:rgba(255,255,255,.3)}
.sxc-gbp__field{display:block;height:14px;border-radius:5px;border:1px solid var(--teal-line);background:rgba(79,191,160,.14)}
.sxc-gbp__field.is-empty{border:1px dashed rgba(255,122,107,.6);background:transparent}
.sxc-gbp__meter{position:relative;display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:conic-gradient(var(--coral) 0 40%,rgba(255,255,255,.08) 40% 100%)}
.sxc-gbp__meter i{position:absolute;inset:8px;border-radius:50%;background:#0A0B0E}
.sxc-gbp__meter b{position:relative;font:800 15px/1 var(--font-head);color:var(--coral)}
.wdp-tile.is-in .sxc-gbp__field.is-empty{animation:sxBroken 1.6s steps(2) infinite;animation-delay:calc(var(--i) * .3s)}
.wdp-tile.is-in .sxc-gbp__meter{animation:sxStuck 3.2s ease-in-out infinite}
@keyframes sxStuck{0%,60%,100%{transform:none}40%{transform:rotate(-10deg)}50%{transform:rotate(7deg)}}
/* mirror: the website repeats the portal listing */
.sxc--mirror{display:flex;align-items:center;justify-content:center;gap:40px;padding:18px}
.sxc-mirror__card{display:grid;gap:6px;width:36%;padding:10px;border-radius:12px;border:1px solid rgba(110,127,217,.7);background:rgba(110,127,217,.08)}
.sxc-mirror__card.is-you{border-color:var(--gold-line);background:var(--gold-soft)}
.sxc-mirror__img{height:52px;border-radius:8px;background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.04))}
.sxc-mirror__l{height:6px;border-radius:3px;background:rgba(255,255,255,.2)}
.sxc-mirror__l.s{width:60%;background:rgba(255,255,255,.1)}
.sxc-mirror__price{width:40%;height:9px;border-radius:4px;background:rgba(255,255,255,.3)}
.sxc-mirror__eq{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:800 24px/1 var(--font-head);color:var(--coral)}
.wdp-tile.is-in .sxc-mirror__card.is-you{animation:sxCopy 5s ease infinite}
.wdp-tile.is-in .sxc-mirror__eq{animation:sxEq 5s ease infinite}
@keyframes sxCopy{0%,18%{transform:translateX(-60%);opacity:0}34%,100%{transform:none;opacity:1}}
@keyframes sxEq{0%,34%{opacity:0;transform:translate(-50%,-50%) scale(.5)}44%,90%{opacity:1;transform:translate(-50%,-50%)}100%{opacity:0;transform:translate(-50%,-50%)}}
/* turnover: an agent leaves, the page goes, the links break */
.sxc-turn__card{position:absolute;left:18px;top:24px;display:grid;grid-template-columns:34px minmax(0,1fr);grid-template-rows:auto auto;gap:6px 10px;align-items:center;width:52%;padding:10px;border-radius:12px;border:1px solid var(--edge-2);background:#111419}
.sxc-turn__face{grid-row:span 2;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,rgba(244,160,0,.4),rgba(79,191,160,.3))}
.sxc-turn__card.is-new .sxc-turn__face{background:linear-gradient(135deg,rgba(110,127,217,.5),rgba(201,139,214,.4))}
.sxc-turn__card > i:not(.sxc-turn__face){height:6px;border-radius:3px;background:rgba(255,255,255,.2)}
.sxc-turn__card > i.s{width:60%}
.sxc-turn__card.is-new{opacity:0}
.sxc-turn__link{position:absolute;right:20px;top:34px;width:30%;height:24px}
.sxc-turn__link svg{width:100%;height:100%}
.sxc-turn__link path{fill:none;stroke:var(--teal);stroke-width:3;stroke-linecap:round}
.sxc-turn__404{position:absolute;right:26px;bottom:26px;font:800 34px/1 var(--font-head);letter-spacing:-.02em;color:var(--coral);opacity:0}
.wdp-tile.is-in .sxc-turn__card.is-old{animation:sxLeave 6s ease infinite}
.wdp-tile.is-in .sxc-turn__card.is-new{animation:sxArrive 6s ease infinite}
.wdp-tile.is-in .sxc-turn__gap{animation:sxSnap 6s ease infinite}
.wdp-tile.is-in .sxc-turn__link path:not(.sxc-turn__gap){animation:sxLinkCol 6s ease infinite}
.wdp-tile.is-in .sxc-turn__404{animation:sx404 6s ease infinite}
@keyframes sxLeave{0%,25%{transform:none;opacity:1}40%,100%{transform:translateX(-120%);opacity:0}}
@keyframes sxArrive{0%,48%{transform:translateX(30%);opacity:0}62%,94%{transform:none;opacity:1}100%{opacity:0}}
@keyframes sxSnap{0%,30%{opacity:1}36%,100%{opacity:0}}
@keyframes sxLinkCol{0%,30%{stroke:var(--teal)}36%,100%{stroke:var(--coral)}}
@keyframes sx404{0%,36%{opacity:0;transform:scale(.6)}44%,92%{opacity:1;transform:none}100%{opacity:0}}
/* dense: written for the regulator, not the reader */
.sxc--dense{padding:16px 20px}
.sxc-dense__page{display:grid;gap:6px}
.sxc-dense__page i{height:5px;width:var(--w);border-radius:2px;background:rgba(255,255,255,.14)}
.sxc-dense__lens{position:absolute;inset:0;pointer-events:none;transform:translate(24%,30%)}
.sxc-dense__lens i{position:absolute;left:0;top:0;width:64px;height:64px;margin:-32px;border-radius:50%;border:3px solid var(--gold);background:rgba(10,11,14,.55)}
.sxc-dense__lens i::before{content:"?";position:absolute;inset:0;display:grid;place-items:center;font:800 22px/1 var(--font-head);color:var(--gold)}
.sxc-dense__lens i::after{content:"";position:absolute;right:-15px;bottom:-9px;width:22px;height:5px;border-radius:3px;background:var(--gold);transform:rotate(45deg)}
.wdp-tile.is-in .sxc-dense__lens{animation:sxLens 8s ease-in-out infinite}
@keyframes sxLens{0%,100%{transform:translate(24%,30%)}25%{transform:translate(70%,40%)}50%{transform:translate(42%,68%)}75%{transform:translate(78%,72%)}}
/* targeting: broad searches miss, the specific one hits */
.sxc--target{display:grid;place-items:center}
.sxc-target__board{position:relative;width:140px;height:140px}
.sxc-target__board i{position:absolute;left:50%;top:50%;width:var(--r);height:var(--r);transform:translate(-50%,-50%);border-radius:50%;border:1.5px solid rgba(255,255,255,.16)}
.sxc-target__board i:last-child{border-color:var(--gold-line);background:rgba(244,160,0,.2)}
.sxc-target__dart{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px;border-radius:50%;background:rgba(255,122,107,.8);opacity:0;transform:translate(var(--x),var(--y))}
.sxc-target__dart.is-hit{width:12px;height:12px;margin:-6px;background:var(--gold);box-shadow:0 0 14px rgba(244,160,0,.9)}
.wdp-tile.is-in .sxc-target__dart{animation:sxDart 6s ease infinite;animation-delay:calc(var(--i) * .7s)}
@keyframes sxDart{0%{opacity:0;transform:translate(calc(var(--x) * 2),calc(var(--y) * 2 - 50px)) scale(1.6)}6%,80%{opacity:1;transform:translate(var(--x),var(--y))}100%{opacity:0;transform:translate(var(--x),var(--y))}}
/* authority: a slick new site with almost none behind it */
.sxc--auth{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:center;gap:18px;padding:18px}
.sxc-auth__site{display:grid;gap:8px;padding:10px;border-radius:12px;border:1px solid var(--edge-2);background:#111419}
.sxc-auth__hero{height:56px;border-radius:8px;background:linear-gradient(120deg,#6E7FD9,#C98BD6 60%,#4FBFA0)}
.sxc-auth__l{height:6px;width:80%;border-radius:3px;background:rgba(255,255,255,.2)}
.sxc-auth__btn{width:40%;height:14px;border-radius:7px;background:var(--gold)}
.sxc-auth__gauge{position:relative;aspect-ratio:10 / 6}
.sxc-auth__gauge svg{position:absolute;inset:0;width:100%;height:100%}
.sxc-auth__arc,.sxc-auth__low{fill:none;stroke-width:7;stroke-linecap:round}
.sxc-auth__arc{stroke:rgba(255,255,255,.12)}
.sxc-auth__low{stroke:var(--coral)}
.sxc-auth__needle{position:absolute;left:50%;bottom:13%;width:3px;height:54%;margin-left:-1.5px;border-radius:3px;background:var(--text);transform-origin:50% 100%;transform:rotate(-62deg)}
.sxc-auth__needle::after{content:"";position:absolute;left:50%;bottom:-5px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--text)}
.wdp-tile.is-in .sxc-auth__needle{animation:sxWeak 5s ease-in-out infinite}
.wdp-tile.is-in .sxc-auth__hero{animation:sxShine 5s ease-in-out infinite}
@keyframes sxWeak{0%,100%{transform:rotate(-62deg)}40%{transform:rotate(-22deg)}55%{transform:rotate(-66deg)}70%{transform:rotate(-56deg)}}
@keyframes sxShine{0%,100%{opacity:1}50%{opacity:.75}}
/* workflow: every page waits in the review queue */
.sxc-queue__desk{position:absolute;right:22px;top:50%;display:grid;place-items:center;width:70px;height:70px;margin-top:-35px;border-radius:14px;border:1px solid var(--edge-2);background:#101318}
.sxc-queue__stamp{width:30px;height:30px;border-radius:7px;background:var(--coral);transform:translateY(-6px)}
.sxc-queue__doc{position:absolute;top:50%;left:calc(22px + var(--i) * 13%);display:grid;align-content:start;gap:5px;width:54px;height:66px;margin-top:-33px;padding:8px;border-radius:8px;border:1px solid var(--edge-2);background:#111419}
.sxc-queue__doc i{height:5px;border-radius:3px;background:rgba(255,255,255,.2)}
.sxc-queue__doc i.s{width:60%}
.sxc-queue__clock{position:absolute;left:22px;top:16px;width:28px;height:28px;border-radius:50%;border:2px solid var(--coral)}
.sxc-queue__clock i{position:absolute;left:50%;bottom:50%;width:2px;height:9px;margin-left:-1px;border-radius:2px;background:var(--coral);transform-origin:50% 100%}
.sxc-queue__clock i.m{height:6px}
.wdp-tile.is-in .sxc-queue__stamp{animation:sxStampDown 3s ease infinite}
.wdp-tile.is-in .sxc-queue__doc{animation:sxWait 3s ease-in-out infinite;animation-delay:calc(var(--i) * .15s)}
.wdp-tile.is-in .sxc-queue__clock i{animation:czSpin 2s linear infinite}
.wdp-tile.is-in .sxc-queue__clock i.m{animation-duration:12s}
@keyframes sxStampDown{0%,70%,100%{transform:translateY(-6px)}78%{transform:translateY(4px) scale(.94)}86%{transform:none}}
@keyframes sxWait{0%,100%{transform:none}50%{transform:translateY(-3px)}}
/* database: course pages that read like rows in a table */
.sxc--db{padding:14px}
.sxc-db__row{display:grid;grid-template-columns:1.2fr 2fr .8fr .8fr;gap:8px;padding:9px 6px;border-bottom:1px solid var(--edge)}
.sxc-db__row i{height:6px;border-radius:2px;background:rgba(255,255,255,.14)}
.sxc-db__row.is-head i{background:rgba(255,255,255,.3)}
.sxc-db__scan{position:absolute;left:0;right:0;top:0;height:30px;background:linear-gradient(transparent,rgba(79,191,160,.14),transparent);transform:translateY(-30px)}
.wdp-tile.is-in .sxc-db__scan{animation:sxScan 4s linear infinite}
.wdp-tile.is-in .sxc-db__row:not(.is-head){animation:sxDim 4s ease infinite;animation-delay:calc(var(--i) * .4s)}
@keyframes sxScan{to{transform:translateY(200px)}}
/* priority: courses shuffle, nothing says which comes first */
.sxc--prio{display:grid;align-content:center;gap:6px;padding:8px 18px}
.sxc-prio__row{display:flex;align-items:center;gap:10px;padding:5px 10px;border-radius:9px;border:1px solid var(--edge);background:#111419}
.sxc-prio__row b{display:grid;place-items:center;flex:0 0 auto;width:18px;height:18px;border-radius:5px;background:rgba(255,255,255,.08);font:800 10px/1 var(--font-head);color:var(--text-dim)}
.sxc-prio__row i{height:6px;width:var(--w);border-radius:3px;background:rgba(255,255,255,.16)}
.wdp-tile.is-in .sxc-prio__row{animation:sxShuffle 4.5s ease-in-out infinite;animation-delay:calc(var(--i) * -.9s)}
@keyframes sxShuffle{0%,100%{transform:none}25%{transform:translateY(34px)}50%{transform:translateY(-10px)}75%{transform:translateY(14px)}}

/* ---- supporting work scenes by theme ---- */
.sxs svg{overflow:visible}
.sxs--profiles{gap:12px}
.sxs-pro__card{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:12px;padding:12px;border-radius:12px;border:1px solid var(--edge);background:#111419}
.sxs-pro__face{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,rgba(244,160,0,.35),rgba(79,191,160,.3));color:var(--text)}
.sxs-pro__face svg{width:22px;height:22px}
.sxs-pro__lines{display:grid;gap:6px}
.sxs-pro__lines i{height:7px;border-radius:4px;background:rgba(255,255,255,.22)}
.sxs-pro__lines i.s{width:60%;background:rgba(255,255,255,.1)}
.sxs-pro__seal{position:absolute;right:-6px;top:-6px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--teal);opacity:0;transform:scale(.4)}
.sxs-pro__seal svg,.sxs-gd__badge svg{width:12px;height:12px;fill:none;stroke:#0A1512;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sxs-pro__badges{display:flex;gap:8px}
.sxs-pro__badges span{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;border:1px solid var(--edge-2);background:#101318;color:var(--gold)}
.sxs-pro__badges svg{width:18px;height:18px}
.sx-sup.is-in .sxs-pro__seal{animation:sxsSeal 6s ease infinite}
.sx-sup.is-in .sxs-pro__badges span{animation:sxsBadge 6s var(--ease) infinite;animation-delay:calc(var(--i) * .3s + .3s)}
@keyframes sxsSeal{0%,40%{opacity:0;transform:scale(.4)}48%,88%{opacity:1;transform:none}100%{opacity:0;transform:scale(.4)}}
@keyframes sxsBadge{0%{opacity:0;transform:translateY(10px) scale(.7)}10%,86%{opacity:1;transform:none}96%,100%{opacity:0}}
.sxs--local{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:14px}
.sxs-loc__map{position:relative;height:124px;border-radius:12px;border:1px solid var(--edge);overflow:hidden;background-color:#0E1210;
  background-image:linear-gradient(rgba(79,191,160,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(79,191,160,.12) 1px,transparent 1px);background-size:16px 16px}
.sxs-loc__pin{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-24px 0 0 -15px;color:var(--gold)}
.sxs-loc__pin svg{width:100%;height:100%}
.sxs-loc__ring{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px;border-radius:50%;border:1.5px solid var(--gold);opacity:0}
.sxs-loc__cites{display:grid;gap:10px}
.sxs-loc__cites span{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:10px;border:1px solid var(--edge);background:#111419}
.sxs-loc__dot{flex:0 0 auto;width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.2)}
.sxs-loc__l{flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.16)}
.sx-sup.is-in .sxs-loc__ring{animation:sxRing 3s ease-out infinite}
.sx-sup.is-in .sxs-loc__ring--b{animation-delay:1.5s}
.sx-sup.is-in .sxs-loc__dot{animation:sxsSync 6s ease infinite;animation-delay:calc(var(--i) * .4s + .6s)}
@keyframes sxsSync{0%,6%{background:rgba(255,255,255,.2);box-shadow:none}12%,86%{background:var(--teal);box-shadow:0 0 8px rgba(79,191,160,.8)}100%{background:rgba(255,255,255,.2);box-shadow:none}}
.sxs--schema{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:14px}
.sxs-sch__code{display:grid;gap:7px;padding:10px 12px;border-radius:10px;border:1px solid var(--edge);background:#0E1015;font:700 14px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--gold)}
.sxs-sch__code span{display:flex;gap:6px;padding-left:10px;transform-origin:left}
.sxs-sch__code i{height:6px;border-radius:3px;background:rgba(255,255,255,.18)}
.sxs-sch__code i.k{flex:0 0 auto;width:24px;background:rgba(79,191,160,.6)}
.sxs-sch__rich{display:grid;gap:6px;padding:12px;border-radius:12px;border:1px solid var(--teal-line);background:rgba(79,191,160,.06)}
.sxs-sch__t{height:9px;width:80%;border-radius:4px;background:#BFD3FF}
.sxs-sch__stars{font-size:12px;letter-spacing:1px;color:var(--gold)}
.sxs-sch__l{height:6px;border-radius:3px;background:rgba(255,255,255,.16)}
.sxs-sch__faq{display:grid;gap:4px}
.sxs-sch__faq i{height:12px;border-radius:4px;border:1px solid var(--edge-2)}
.sx-sup.is-in .sxs-sch__code span{animation:sxsKey 6s steps(5) infinite;animation-delay:calc(var(--i) * .35s)}
.sx-sup.is-in .sxs-sch__rich{animation:sxsAns 6s var(--ease) infinite}
@keyframes sxsKey{0%{transform:scaleX(0)}22%,88%{transform:none}100%{transform:scaleX(0)}}
.sxs--tracking{display:block}
.sxs-trk__chart{position:absolute;left:16px;top:16px;width:calc(100% - 32px);height:92px}
.sxs-trk__grid{fill:none;stroke:rgba(255,255,255,.07);stroke-width:1;vector-effect:non-scaling-stroke}
.sxs-trk__line{fill:none;stroke:var(--teal);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1}
.sxs-trk__drop{position:absolute;left:var(--x);top:24px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px rgba(244,160,0,.8);opacity:0}
.sxs-trk__tray{position:absolute;left:16px;right:16px;bottom:14px;display:flex;align-items:center;justify-content:flex-end;height:28px;padding:0 10px;border-radius:8px;border:1px solid var(--gold-line);background:var(--gold-soft)}
.sxs-trk__tray b{font:800 13px/1 var(--font-head);color:var(--gold)}
.sx-sup.is-in .sxs-trk__line{animation:sxsDraw 6s ease infinite}
.sx-sup.is-in .sxs-trk__drop{animation:sxsDrop 6s ease-in infinite;animation-delay:calc(var(--i) * .5s + 1.4s)}
@keyframes sxsDraw{0%{stroke-dashoffset:1}40%,88%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes sxsDrop{0%{opacity:0;transform:none}6%{opacity:1}30%{opacity:1;transform:translateY(104px) scale(.7)}34%,100%{opacity:0;transform:translateY(104px) scale(.7)}}
.sxs--calendar{padding:18px 56px 18px 18px}
.sxs-cal__grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.sxs-cal__grid i{height:24px;border-radius:5px;border:1px solid var(--edge);background:rgba(255,255,255,.05)}
.sxs-cal__grid i.is-peak{border-color:var(--gold-line);background:rgba(244,160,0,.18)}
.sxs-cal__flag{position:absolute;right:14px;top:14px;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--gold);color:#111}
.sxs-cal__flag svg{width:16px;height:16px}
.sx-sup.is-in .sxs-cal__grid i.is-prep{animation:sxsPrep 6s ease infinite;animation-delay:calc((var(--i) - 8) * .22s)}
.sx-sup.is-in .sxs-cal__grid i.is-peak{animation:sxsPeak 6s ease infinite}
@keyframes sxsPrep{0%,5%{border-color:var(--edge);background:rgba(255,255,255,.05)}12%,88%{border-color:var(--teal);background:var(--teal)}100%{border-color:var(--edge);background:rgba(255,255,255,.05)}}
@keyframes sxsPeak{0%,40%,100%{box-shadow:none}55%,85%{box-shadow:0 0 12px -2px rgba(244,160,0,.8)}}
.sxs--workflow{display:block}
.sxs-flow__lanes{position:absolute;left:18px;right:18px;top:22px;display:flex;justify-content:space-between}
.sxs-flow__lanes span{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;border:1px solid var(--edge-2);background:#101318;color:var(--text-dim)}
.sxs-flow__lanes svg{width:20px;height:20px}
.sxs-flow__rail{position:absolute;left:40px;right:40px;bottom:48px;height:2px;border-radius:2px;background:rgba(255,255,255,.1)}
.sxs-flow__mover{position:absolute;left:22px;right:22px;bottom:20px;height:56px}
.sxs-flow__doc{position:absolute;left:0;top:0;display:grid;align-content:start;gap:5px;width:44px;height:56px;padding:8px;border-radius:7px;border:1px solid var(--gold-line);background:#1A160C}
.sxs-flow__doc i{height:5px;border-radius:3px;background:rgba(244,160,0,.6)}
.sxs-flow__doc i.s{width:60%}
.sx-sup.is-in .sxs-flow__mover{animation:sxsDoc 6s ease-in-out infinite}
.sx-sup.is-in .sxs-flow__lanes span{animation:sxsLane 6s ease infinite}
.sx-sup.is-in .sxs-flow__lanes span:nth-child(2){animation-name:sxsLane2}
.sx-sup.is-in .sxs-flow__lanes span:nth-child(3){animation-name:sxsLane3}
@keyframes sxsDoc{0%,12%{transform:none}30%,48%{transform:translateX(calc(50% - 22px))}66%,92%{transform:translateX(calc(100% - 44px))}100%{transform:translateX(calc(100% - 44px));opacity:0}}
@keyframes sxsLane{0%,14%{color:var(--teal);border-color:var(--teal-line)}22%,100%{color:var(--text-dim);border-color:var(--edge-2)}}
@keyframes sxsLane2{0%,28%,56%,100%{color:var(--text-dim);border-color:var(--edge-2)}32%,48%{color:var(--teal);border-color:var(--teal-line)}}
@keyframes sxsLane3{0%,64%,100%{color:var(--text-dim);border-color:var(--edge-2);box-shadow:none}68%,92%{color:var(--gold);border-color:var(--gold-line);box-shadow:0 0 16px -4px rgba(244,160,0,.6)}}
.sxs--guides{padding:16px 54px 16px 16px}
.sxs-gd__table{display:grid;gap:5px}
.sxs-gd__table span{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:6px}
.sxs-gd__table i{position:relative;height:22px;border-radius:5px;border:1px solid var(--edge);background:rgba(255,255,255,.04)}
.sxs-gd__table span.is-head i{background:rgba(255,255,255,.14)}
.sxs-gd__table i.is-yes::after{content:"✓";position:absolute;inset:-1px;display:grid;place-items:center;border-radius:5px;background:var(--teal);font-size:11px;font-weight:800;color:#0A1512;opacity:0}
.sxs-gd__badge{position:absolute;right:12px;top:14px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--gold);color:#111;font-size:14px;opacity:0}
.sx-sup.is-in .sxs-gd__table i.is-yes::after{animation:sxsYes 6s ease infinite;animation-delay:calc(var(--i) * .12s)}
.sx-sup.is-in .sxs-gd__badge{animation:sxsSeal 6s ease infinite}
@keyframes sxsYes{0%,8%{opacity:0;transform:scale(.5)}16%,88%{opacity:1;transform:none}100%{opacity:0}}

@media (max-width:700px){
  .sx-packcard--web{width:auto}
  .sxc--comply{padding-right:64px}
  .sxc-target__board{width:118px;height:118px}
  .sxc--cut{padding:0 12px}
  .sxc-mirror__card{width:40%}
  .sxc--mirror{gap:24px}
  .sxs--calendar{padding-right:52px}
}

/* ==========================================================================
   Tablet and phone
   ========================================================================== */
@media (max-width:1080px){
  .sx-radar{height:600px;max-width:620px;margin:0 auto;width:100%}
  .sx-card{grid-template-columns:minmax(0,1fr);gap:28px;min-height:0;padding:36px}
  .sx-season__grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .sx-dial{max-width:340px}
  .sx-sup-grid{grid-template-columns:minmax(0,1fr)}
  .sx-sup{display:grid;grid-template-columns:260px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:26px;align-items:start}
  .sx-sup__art{grid-row:1 / span 3;margin:0}
  .sx-panel__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sx-leg{grid-template-columns:280px minmax(0,1fr);gap:34px}
  .sx-stop__t{width:110px;margin-left:-55px;font-size:12.5px}
  .sx-know__grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .sx-know__head{position:static}
  .sx-proof__grid{grid-template-columns:minmax(0,1fr)}
  .sx-bento .sx-tile--full{grid-template-columns:minmax(0,1fr);row-gap:14px}
  .sx-tile--full .sx-scene{grid-column:1;grid-row:auto}
  .sx-rounds__head,.sx-round{grid-template-columns:minmax(0,1fr) 140px minmax(0,1fr)}
  .sx-rounds.is-in .sx-round__knot{transform:translateX(-40px)}
  @keyframes sxTug{0%,100%{transform:translateX(-40px)}50%{transform:translateX(-34px)}}
}
@media (max-width:700px){
  .sx-bar--meta{margin:0 0 26px}

  /* hero: the radar, then the map pack under it */
  .sx-radar{height:auto;padding:22px 0 20px;border-radius:26px}
  .sx-scope{position:relative;left:auto;top:auto;width:84%;margin:0 auto;transform:none}
  .sx-blip__q{font-size:10.5px;padding:3px 8px}
  .sx-packcard{position:relative;right:auto;bottom:auto;width:auto;margin:18px 14px 0}
  .sx-pack__note{display:none}
  .sx-packcard__label{flex-direction:column;align-items:flex-start;gap:2px}
  .sx-packcard__label span{text-align:left}
  .sx-pack__meta{flex-wrap:wrap;gap:2px 5px}
  .sx-pack__meta i{font-size:9px;letter-spacing:0}
  .sx-radar__cap{position:relative;left:auto;bottom:auto;max-width:none;margin:18px 18px 0;font-size:16px}

  /* why: a swipe of cards instead of the stack */
  .sx-card{position:relative;top:auto;scale:none;filter:none;padding:22px 20px;border-radius:24px;gap:20px;align-content:start}
  .sx-card__art{order:-1}
  .sx-card__t{margin:12px 0 10px;font-size:23px}
  .sx-card__d{font-size:15px}
  .sxw{font-size:12.5px}
  .sxw-map__map{height:86px}
  .sxw-row{padding:10px 14px}
  .sxw--near{padding:14px;gap:8px}
  .sxw-near__hit{flex-wrap:wrap;row-gap:7px;padding-right:54px}
  .sxw-near__q{flex:1 1 auto}
  .sxw-near__hit em{margin-right:0}
  .sxw-near__ghost:last-child{display:none}
  .sxw-ref__chart{height:120px}
  .sxw--comp{padding:14px;gap:6px}

  /* challenges: the fifth tile's chart fills its card (it had shrunk to one bar) */
  .sx-bento .sx-tile--full{display:flex}
  .sx-tile--full .sx-scene{align-self:stretch;margin:auto 0 0;padding-top:10px}
  .sxc{height:176px}
  .sxc-plat__row{padding:7px 12px;gap:4px 10px}
  .sxc-plat__logo{width:18px;height:18px}
  .sxc-bar{padding:8px 12px}
  .sxc--demand{height:176px;padding:18px 16px 14px}
  .sxc-demand__plot{gap:5px}
  .sxc--time{padding:14px}
  .sxc-time__clock{width:48px;height:48px}

  /* season: the dial, the season tabs and one season, on one screen */
  .sx-season__grid{gap:18px}
  .sx-dial{max-width:230px}
  .sx-seas{padding:18px;gap:12px 14px;height:100%}
  .sx-seas:hover{transform:none}
  .sx-seas__ic{width:40px;height:40px}
  .sx-seas__chips{grid-column:1 / -1}
  .sx-season__tabs button{flex:1 1 0;min-width:0;height:40px;flex-direction:row;font-size:13px;padding:0 6px}
  .sx-season__note{padding:18px}
  .sx-season__note p{font-size:15px}

  /* own vs rent: the chart, then the rounds stacked */
  .sx-vs__chart{height:180px;border-radius:22px;margin-bottom:22px}
  .sx-vs__tag{font-size:11px;padding:5px 10px}
  .sx-vs__tag--own{right:12px;top:12px}
  .sx-vs__tag--rent{left:12px}
  .sx-rounds__head{grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);gap:8px}
  .sx-rounds__side b{font-size:17px}
  .sx-rounds__side small{font-size:10.5px}
  .sx-rounds__vs{width:40px;height:40px;font-size:12px}
  .sx-round{grid-template-columns:minmax(0,1fr);gap:8px;padding:16px 0}
  .sx-round__own,.sx-round__rent{font-size:15px;gap:10px}
  .sx-round__rent{flex-direction:row;text-align:left}
  .sx-round__rope{order:2;height:24px}
  .sx-round__rent{order:3}
  .sx-rounds.is-in .sx-round__knot{transform:translateX(-90px)}
  @keyframes sxTug{0%,100%{transform:translateX(-90px)}50%{transform:translateX(-82px)}}
  .sx-verdict{border-radius:22px;padding:18px 20px;gap:10px}
  .sx-verdict__k{border-right:0;padding-right:0}
  .sx-verdict p{flex-basis:100%;font-size:15px}

  /* approach */
  .sx-stage__label{display:none}
  .sx-appr .wdp-story__rail button b{display:inline;font-size:14px}
  .sx-appr .sx-rail__t{display:none}
  .sx-appr .wdp-story__stage :is(.sxv-map,.sxv-areas__map,.sxv-track__live,.wdp-panel__bar){display:none}
  .sx-kit{margin-top:56px;padding-top:36px}
  .sx-sup{display:flex;align-items:stretch;padding:16px 16px 22px}
  .sx-sup__art{height:160px;margin-bottom:18px}
  .sxs{padding:12px 14px;gap:6px}
  .sx-panel{padding:20px 18px 10px}
  .sx-panel__list{grid-template-columns:minmax(0,1fr)}

  /* journey: a short road across the top, the steps as a swipe */
  .sx-road__map{height:84px;margin:0 0 16px}
  .sx-road__svg{top:2px;height:80px}
  .sx-road__edge{stroke-width:24}
  .sx-road__asphalt{stroke-width:18}
  .sx-stop__n{width:30px;height:30px;font-size:11px;border-width:1.5px}
  .sx-stop__t{display:none}
  .sx-van{width:42px;height:24px;margin:-20px 0 0 -21px}
  .sx-leg{grid-area:auto;grid-template-columns:minmax(0,1fr);gap:16px;opacity:1;transform:none;pointer-events:auto;align-content:start;
    padding:16px;border-radius:24px;border:1px solid var(--edge);background:#0E1014}
  .sx-leg__screen{min-height:250px;padding:16px 14px;border-radius:18px}
  .sx-leg__t{margin:8px 0 10px;font-size:23px}
  .sx-leg__d{font-size:15px}
  .sxj{font-size:12px;gap:8px}
  .sxj-map{height:80px}
  .sxj-search{height:42px;padding:0 14px 0 12px;font-size:12.5px}
  .sxj-search > svg,.sxw-near__search > svg{margin-right:8px}
  .sxj-check{padding:10px;gap:8px}
  .sxj-check > span{gap:7px}
  .sxj-check .sxj-check__box{width:17px;height:17px;border-radius:5px}
  .sxj-check em.is-teal{padding:2px 7px;font-size:10.5px}
  .sxj-clock{margin:4px 0 14px}
  .sxj-clock b{font-size:42px}
  .sxj-proof__photos{display:none}
  .sxj-call__btn{height:54px;font-size:16px}

  /* expertise */
  .sx-rules{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
  .sx-rules li{grid-template-columns:minmax(0,1fr);gap:10px;padding:18px 0}
  .sx-rules__art{width:52px;height:52px;border-radius:15px}
  .sxr{width:36px;height:36px}
  .sxr.sxk{width:42px;height:42px}
  .sx-rules h4{margin:0 0 4px;font-size:16px}
  .sx-rules p{font-size:13.5px}
  .sx-bills{margin-top:50px;padding-top:36px}

  /* results */
  .sx-case{padding:24px 22px 22px}
  .sx-case__num{margin-top:16px}
}
/* the narrowest phones: less chrome round the typed searches and the check rows, so the words fit */
@media (max-width:360px){
  .sx-leg{padding:12px}
  .sx-leg__screen{padding:14px 10px}
  .sxw--near{padding:12px 10px}
  .sxj-search,.sxw-near__search{padding:0 11px 0 10px}
  .sxj-search > svg,.sxw-near__search > svg{width:13px;height:13px;margin-right:6px}
  .sxj-check{padding:9px 8px;gap:6px}
  .sxj-check > span{gap:6px}
  .sxj-check .sxj-check__box{width:15px;height:15px}
  .sxj-check em.is-teal{padding:2px 6px;font-size:10px}
}
@media (prefers-reduced-motion:reduce){
  .sx *,.sx *::before,.sx *::after{animation:none!important}
  .sx-dial__peak{stroke-dashoffset:0!important}
  .sx-vs__chart svg,.sx-case__line{clip-path:none!important}
}
.sxj-search__chips .is-hot{border-color:var(--teal-line);color:var(--teal);background:var(--teal-soft)}