/* H2 — Aurora UI, ON BRAND. Same style, but every colour sampled from
   startandscale.io: #14151A base, #173ACA brand blue, tints derived from it.
   One accent, chosen by Aaron Nov 2026: #FFD400, his video punch colour, for
   buttons, punch words and the big numbers only. No magenta, no cyan. */
@import url('_base.css?v=20261027d');
@font-face{font-family:"Visby CF";src:url("assets/fonts/visbycf-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Visby CF";src:url("assets/fonts/visbycf-400i.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Visby CF";src:url("assets/fonts/visbycf-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Visby CF";src:url("assets/fonts/visbycf-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Visby CF";src:url("assets/fonts/visbycf-600i.woff2") format("woff2");font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:"Visby CF";src:url("assets/fonts/visbycf-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Visby CF";src:url("assets/fonts/visbycf-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Visby CF";src:url("assets/fonts/visbycf-900.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}

:root{--accent:#FFD400;--on-accent:#14151A;--brand:#173ACA;--brand-hi:#3AA0FF;--mag:#2A4EE0;--cy:#6E8CFF;--txt:#C3CBDA;--ink:#fff;--line:rgba(255,255,255,.13);--max:1140px;
  /* --surface-2 was referenced by ten section backgrounds across four pages
     and never defined, so every alternating band has been rendering
     transparent. Translucent black so the body's Aurora gradient still
     reads through the band rather than being covered by a flat panel. */
  --surface-2:rgba(8,9,13,.42)}
body{color:var(--txt);font-family:"Visby CF","Visby Round",system-ui,sans-serif;font-size:17px;line-height:1.66;
 background:radial-gradient(900px 620px at 8% -8%,rgba(23,58,202,.55),transparent 62%),
 radial-gradient(780px 560px at 96% 4%,rgba(42,78,224,.34),transparent 60%),
 radial-gradient(760px 620px at 48% 108%,rgba(110,140,255,.20),transparent 62%),#14151A;background-attachment:fixed}
h1,h2,h3{color:var(--ink);font-weight:800;letter-spacing:-.025em;line-height:1.1}
h1{font-size:clamp(2.2rem,5.4vw,3.6rem)} h2{font-size:clamp(1.8rem,3.8vw,2.55rem)} h3{font-size:1.2rem}
h1 em,h2 em{font-style:normal;color:var(--accent)}
strong{color:var(--ink)}
.valuebar{background:rgba(255,255,255,.07);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);color:#D4DCFF}
.nav{border-bottom:1px solid var(--line)}
.btn{min-height:64px;padding:20px 40px;font-size:18px;font-weight:800;background:var(--accent);color:var(--on-accent);font-family:inherit;border-radius:999px;box-shadow:0 10px 30px rgba(255,212,0,.26);transition:transform .2s,box-shadow .2s;border:1px solid transparent}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(255,212,0,.36)}
.eyebrow{display:inline-block;background:rgba(255,255,255,.07);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#AFC2FF;margin-bottom:20px}
/* _base.css sets .hero{padding:56px 0 66px} after .wrap, which zeroed the side
   gutter and put the hero text against the screen edge on phones. */
.hero{padding-left:var(--gutter,20px);padding-right:var(--gutter,20px)}
.hero .sub{font-size:clamp(17px,2.2vw,20.5px);max-width:44ch;margin:0 0 24px}
.ticks li{border-bottom:1px solid var(--line)} .ticks svg{color:#6E8CFF}
.vsl{background:rgba(255,255,255,.05);backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:22px;box-shadow:0 26px 70px rgba(0,0,0,.55)}
.strip{background:rgba(255,255,255,.04);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .strip .names{color:#fff}
.stats{gap:1px;background:var(--line);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.stat{background:rgba(255,255,255,.04);backdrop-filter:blur(14px)} .stat b{font-size:clamp(2rem,3.8vw,2.8rem);font-weight:700;color:var(--accent)}
.card,.case,.quote,.step,.pains li,.deliver li,.forwho>div,.compare,.callout,.founder-photo,.embed{background:rgba(255,255,255,.05);backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:20px;transition:transform .2s,border-color .2s}
.card:hover,.case:hover,.step:hover{transform:translateY(-3px);border-color:rgba(110,140,255,.48)}
.card,.case,.quote,.step,.forwho>div{padding:26px}
.blame div{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:14px;border-left:1px solid #6E8CFF} .blame div strong{color:#fff}
.pains .x{color:#E5484D} .pains b{color:#fff}
.step .n{background:linear-gradient(100deg,#173ACA,#2A4EE0);color:#fff;border-radius:50%}
.deliver svg{color:#6E8CFF} .deliver b{color:#fff}
.case .result{font-weight:700;font-size:clamp(1.35rem,2.6vw,1.8rem);color:#fff}
.quote p{color:#fff} .quote .who{color:#AFC2FF}
.forwho .yes,.forwho .no{border-top:1px solid var(--line)}
.forwho .yes{background:linear-gradient(180deg,rgba(110,140,255,.10),rgba(255,255,255,.05) 120px)}
.forwho .no{background:linear-gradient(180deg,rgba(229,72,77,.09),rgba(255,255,255,.05) 120px)}
.forwho li{border-bottom:1px solid var(--line)} .forwho .yes li i{color:#6E8CFF} .forwho .no li i{color:#E5484D}
.faq{border-top:1px solid var(--line)} .faq details{border-bottom:1px solid var(--line)} .faq summary{color:#fff} .faq summary::after{color:#6E8CFF}
.final{background:var(--brand);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.final h2{color:#fff} .final h2 em{color:var(--accent)} .final p{color:#E6EBFF}
.final a:focus-visible{outline-color:#fff}
.progress i{background:var(--line);border-radius:999px} .progress i.on{background:linear-gradient(90deg,#6E8CFF,#2A4EE0)}
.tick-big{background:rgba(110,140,255,.16);border:1px solid #6E8CFF;color:#6E8CFF;border-radius:50%}
.nextlist li{border-bottom:1px solid var(--line)} .nextlist .n{background:rgba(255,255,255,.07);border-radius:50%;color:#AFC2FF}
footer{border-top:1px solid var(--line)} footer a{color:#AFC2FF}
.sticky-cta{background:rgba(7,10,20,.9);backdrop-filter:blur(16px);border-top:1px solid var(--line);
  display:flex;align-items:center;gap:10px;transition:transform .28s cubic-bezier(.2,.7,.3,1),visibility .28s}
.sticky-cta:not(.show){visibility:hidden}
.sticky-cta .btn{flex:1;min-height:56px;padding:14px 20px;font-size:17px}
/* WhatsApp stays the quieter second option: dark pill, green glyph. */
.wa-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-width:56px;height:56px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid var(--line);color:#fff;text-decoration:none;transition:border-color .2s}
.wa-btn svg{color:#25D366;flex:none}
.wa-btn span{display:none;font-size:15px;font-weight:700}
.wa-btn:hover{border-color:#25D366}
@media(min-width:900px){
  .sticky-cta{left:auto;right:24px;bottom:24px;padding:0;background:none;backdrop-filter:none;border:0;transform:translateY(calc(100% + 32px))}
  .sticky-cta .btn{flex:none;width:auto;padding:14px 30px}
  .wa-btn{padding:0 20px;background:rgba(14,16,24,.94)}
  .wa-btn span{display:inline}
  body.has-sticky{padding-bottom:88px}
}
.compare thead th{background:rgba(255,255,255,.06);color:#fff} .compare thead th:last-child{background:rgba(23,58,202,.34);color:#D4DCFF}
.compare th,.compare td{border-bottom:1px solid var(--line)}
.founder-creds li{background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:999px;color:#D4DCFF}

/* ===== Video testimonial wall (click-to-play facade) ===== */
.vids{display:grid;gap:16px}
@media(min-width:620px){.vids{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.vids{grid-template-columns:repeat(3,1fr)}}
.vid{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;cursor:pointer;
  background:#0E1018 center/cover no-repeat;border:1px solid var(--line);padding:0;width:100%;display:block;
  transition:transform .2s cubic-bezier(.2,.7,.3,1),border-color .2s}
.vid:hover{transform:translateY(-3px);border-color:#6E8CFF}
.vid:focus-visible{outline:3px solid #6E8CFF;outline-offset:3px}
.vid::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,12,20,.1),rgba(10,12,20,.82))}
.vid-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:58px;height:58px;border-radius:50%;background:rgba(23,58,202,.92);
  display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.45);
  transition:transform .2s}
.vid:hover .vid-play{transform:translate(-50%,-50%) scale(1.08)}
/* Portrait video in the hero. 350px keeps the whole 9:16 box in view on a laptop. */
.hero-video{width:100%;max-width:350px;justify-self:center;align-self:start}
.vid-916{aspect-ratio:9/16;border-radius:22px;box-shadow:0 26px 70px rgba(0,0,0,.55)}
.vid-916::after{background:linear-gradient(180deg,transparent 62%,rgba(10,12,20,.55))}
/* Play sits low so it never covers the words burned into the poster frame. */
.vid-916 .vid-play{top:78%;width:72px;height:72px;background:var(--accent);color:var(--on-accent)}
/* Phones: the video sits under the subhead, not two screens down below the ticks. */
@media(max-width:979px){
  .hero-grid{gap:0;grid-template-columns:minmax(0,1fr)}
  .hero-copy{display:contents}
  .hero-copy>*{order:2}
  .hero-copy>h1,.hero-copy>.sub{order:0}
  .hero-copy>.btn{justify-self:start}
  .hero-video{order:1;margin:4px auto 30px}
}
.vid-meta{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px 16px;text-align:left}
.vid-name{display:block;font-family:var(--display);font-weight:800;font-size:16px;color:#fff;letter-spacing:-.01em}
.vid-sub{display:block;font-size:13px;color:#C9D0E4;margin-top:2px}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}
.vid.playing::after,.vid.playing .vid-play,.vid.playing .vid-meta{display:none}

/* =========================================================================
   MEDIA + AUTHORITY PASS — 2026-10-24
   Real photography, press logos, founder portrait, and the browser surfaces
   that ship with no design system of their own.
   ========================================================================= */

:root{--display:"Visby CF","Visby Round",system-ui,sans-serif}

/* ---- Browser surfaces: these are drawn by the browser unless you claim them ---- */
::selection{background:rgba(58,160,255,.32);color:#fff}
html{scrollbar-color:rgba(110,140,255,.45) transparent;scrollbar-width:thin}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:rgba(255,255,255,.03)}
::-webkit-scrollbar-thumb{background:rgba(110,140,255,.38);border-radius:999px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(110,140,255,.62);background-clip:content-box}
body{caret-color:#6E8CFF}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid #8FA8FF;outline-offset:3px;border-radius:6px}
a{text-underline-offset:3px;text-decoration-thickness:1px}
/* figures in the stat band must not reflow as they count */
.stat b{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ---- Press bar: his own logo sheet, on the white it was drawn for ---- */
.press{padding:30px 0 34px}
.press p{text-align:center;font-size:12px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:#AFC2FF;margin:0 0 18px}
.press-plate{background:#fff;border-radius:16px;padding:18px 26px;max-width:720px;margin:0 auto;
  box-shadow:0 18px 44px rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.18)}
.press-plate img{display:block;width:100%;height:auto}

/* ---- Authority: an editorial photo set, not a card grid ----
   Ratios are chosen per photo so nothing is upscaled past its pixels:
   stage-main is 1080px wide, so it leads at 16/9 and is never cropped tall. */
.auth-hero{margin-top:34px}
.auth-strip{display:grid;gap:14px;margin-top:14px}
@media(min-width:620px){
  .auth-strip{grid-template-columns:repeat(2,1fr);gap:16px}
  .auth-strip>:nth-child(3){grid-column:1 / -1}
  .auth-strip.two{grid-template-columns:1.5fr 1fr;align-items:start}
  .auth-strip.two>:nth-child(3){grid-column:auto}
}
@media(min-width:900px){
  .auth-strip{grid-template-columns:repeat(3,1fr)}
  .auth-strip>:nth-child(3){grid-column:auto}
}

figure.frame{position:relative;margin:0;border-radius:18px;overflow:hidden;
  border:1px solid var(--line);background:#0E1018;
  box-shadow:0 18px 46px rgba(0,0,0,.42);aspect-ratio:16/10}
figure.frame>picture{display:block;position:absolute;inset:0}
figure.frame img{display:block;width:100%;height:100%;object-fit:cover}
figure.frame.lead{aspect-ratio:16/9}
figure.frame.tall{aspect-ratio:4/5}
figure.frame figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px 18px 14px;
  font-size:13.5px;line-height:1.45;color:#E4E9F7;
  background:linear-gradient(180deg,rgba(10,12,20,0),rgba(10,12,20,.9) 58%)}
figure.frame figcaption b{display:block;color:#fff;font-weight:700;font-size:15px;letter-spacing:-.01em;margin-bottom:2px}
figure.frame.lead figcaption{padding:22px 24px 20px}
figure.frame.lead figcaption b{font-size:18px}

/* the one authored moment on the page: the photo set resolves from a blur */
@media (prefers-reduced-motion:no-preference){
  .auth-hero .frame,.auth-strip .frame{
    opacity:0;filter:blur(14px) saturate(.6);transform:scale(1.03);
    transition:opacity .9s cubic-bezier(.16,1,.3,1),filter 1.1s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1)}
  .auth-hero.in .frame,.auth-strip.in .frame{opacity:1;filter:none;transform:none}
  .auth-strip.in .frame:nth-child(2){transition-delay:.10s}
  .auth-strip.in .frame:nth-child(3){transition-delay:.20s}
}

/* ---- Founder: the portrait earns its place next to the claims ---- */
.founder-grid{display:grid;gap:26px;align-items:start}
@media(min-width:820px){
  .founder-grid{grid-template-columns:300px 1fr;gap:38px}
  .founder-portrait{margin:0;max-width:none}
  .founder-sig{text-align:left}
}
.founder-sig{text-align:center}
.founder-portrait{margin:0 auto;max-width:300px;border-radius:20px;overflow:hidden;border:1px solid var(--line);
  background:#0E1018;box-shadow:0 22px 56px rgba(0,0,0,.5);position:relative}
.founder-portrait img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.founder-sig{margin:16px 0 0;font-size:13px;color:#AFC2FF}
.founder-sig b{display:block;color:#fff;font-size:15px;font-weight:700}

/* ---- Video wall: a named count, and room for all of them ---- */
.vids-more{display:none}
.vids-more.open{display:contents}
.vid-more-wrap{text-align:center;margin-top:24px}
.btn-ghost{background:rgba(255,255,255,.06);border:1px solid var(--line);color:#D4DCFF;
  border-radius:999px;padding:13px 26px;font:inherit;font-weight:600;cursor:pointer;
  transition:border-color .2s,background .2s,transform .2s}
.btn-ghost:hover{border-color:rgba(110,140,255,.6);background:rgba(110,140,255,.12);transform:translateY(-2px)}
.vid-len{position:absolute;top:10px;right:10px;z-index:2;font-size:11.5px;font-weight:600;
  color:#E4E9F7;background:rgba(10,12,20,.74);border:1px solid rgba(255,255,255,.16);
  border-radius:999px;padding:3px 9px;letter-spacing:.02em}
.vid.playing .vid-len{display:none}

/* authored check / cross icons, one stroke weight across the page */
.pains .x svg,.forwho li i svg{width:18px;height:18px;display:block}
.forwho li i{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.h3-ic{display:inline-flex;vertical-align:-3px;margin-right:6px}
.h3-ic svg{width:19px;height:19px;display:block}
.h3-ic.ok{color:#6E8CFF} .h3-ic.no{color:#E5484D}


/* ---- Accent text needs a fallback ----
   Yellow h1/h2 accents and stat figures do not survive Windows High Contrast
   or white paper. Restore a readable solid fill in those modes. */
@media (forced-colors: active){
  h1 em,h2 em,.stat b{
    background:none !important;
    -webkit-background-clip:border-box !important;
    background-clip:border-box !important;
    -webkit-text-fill-color:currentColor !important;
    color:CanvasText !important;
    forced-color-adjust:none;
  }
  .btn,.btn-ghost{border:1px solid ButtonText}
  .vid:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid Highlight}
}
@media print{
  h1 em,h2 em,.stat b{
    background:none;
    -webkit-background-clip:border-box;
    background-clip:border-box;
    -webkit-text-fill-color:#173ACA;
    color:#173ACA;
  }
}

/* footer links were 22px tall, under the 24px minimum target size (WCAG 2.5.8) */
footer a{display:inline-block;padding:4px 2px}

/* skip link, visible only once focused */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:#173ACA;color:#fff;
  padding:12px 18px;border-radius:0 0 10px 0;font-weight:600}
.skip:focus{left:0}

/* The logo carries width/height attributes so the browser reserves the right box
   before it loads. The CSS sets height only, so width must be released back to
   auto or the attribute's 2000px wins and stretches the mark. */
.nav img,footer img{width:auto}


/* MagnetLines hero field (React Bits). The shell is a plain block so the effect
   spans the full viewport width; .hero carries .wrap's max-width and padding,
   which is why mounting inside it produced a boxed rectangle. Masked so it
   fades out behind the copy column and before the stat band. */
.hero-shell{position:relative;overflow:hidden}
#hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%),
                     linear-gradient(90deg,transparent 0%,#000 46%,#000 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%),
                     linear-gradient(90deg,transparent 0%,#000 46%,#000 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
@media(max-width:979px){
  /* single column on mobile: keep the field off the copy entirely */
  #hero-bg{opacity:.34;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);
            mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%)}
}

/* ===== Authority wall (React Bits Masonry) =====
   The grid sizes itself from the images, so it only needs room and a floor
   height while the first measurements come in. Lightbox and caption colours
   are pulled onto the brand rather than left on the component's defaults. */
.wrap-wide{max-width:1320px}
.wall-grid{min-height:420px;position:relative}
.wall-grid .masonry__image{display:block;width:100%;height:100%;object-fit:cover}
.wall-grid .masonry__caption{
  background:linear-gradient(180deg,rgba(20,21,26,0) 0%,rgba(20,21,26,.88) 100%);
  color:#fff;padding:28px 14px 12px;font-size:.82rem;line-height:1.35;letter-spacing:.01em}
.wall-grid .masonry__title{font-weight:600}
.wall-grid .masonry__card{box-shadow:0 10px 28px rgba(8,10,20,.28)}
.wall-grid .masonry__card:focus-visible{outline:3px solid var(--cy);outline-offset:3px}
.masonry-lightbox{background:rgba(12,13,18,.94)}

.wall-fallback{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.wall-fallback img{width:100%;height:100%;object-fit:cover;border-radius:14px;aspect-ratio:4/3}

@media (max-width:719px){
  .wall-grid{min-height:300px}
  .wall-fallback{grid-template-columns:repeat(2,1fr)}
  /* captions are a hover affordance; on touch they would never appear, so the
     photo simply stands on its own */
  .wall-grid .masonry__caption{display:none}
}

/* ===== Authority wall: the clipped half =====
   maxHeight is written by the script from real card positions, so the cut
   always lands on a row edge rather than through a photograph. */
.wall-clip{position:relative;transition:max-height .5s cubic-bezier(.22,.61,.36,1)}
.wall-clip.clipped{overflow:hidden}
.wall-clip.clipped::after{
  content:"";position:absolute;inset:auto 0 0;height:190px;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,21,26,0) 0%,var(--surface-2) 92%)}
.wall-more{display:flex;justify-content:center;margin-top:22px}
@media (prefers-reduced-motion:reduce){.wall-clip{transition:none}}

/* ===== Results cards: industry tag, and colour on the figure that matters =====
   The sector is data the result line does not carry, so it rides with the icon
   as a tag rather than sitting over the number as a label. */
.cases .case{display:flex;flex-direction:column;gap:12px}
.case-tag{display:flex;align-items:center;gap:9px;margin:0;
  font-size:.82rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:#9FB2E8}
.case-ico{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;
  border-radius:10px;color:var(--cy);
  background:rgba(110,140,255,.13);border:1px solid rgba(110,140,255,.26)}
.case-ico svg{width:19px;height:19px;display:block}
.cases .result{margin:0}
.cases .who{margin:0}
/* solid colour, never a gradient: the figure is the one thing to find in a scan */
.case .fig{color:var(--accent);font-weight:800}
.case:hover .case-ico{background:rgba(110,140,255,.2);border-color:rgba(110,140,255,.44)}

/* Trustpilot sits on its own line above the stat row. Both marks are theirs,
   self-hosted, with explicit boxes so the hero never shifts as they load. */
.tp-row{display:inline-flex;align-items:center;gap:10px;margin:18px 0 2px;
  text-decoration:none;color:var(--txt);font-size:.88rem;line-height:1}
.tp-stars{width:98px;height:auto;display:block;flex:0 0 auto}
.tp-logo{width:76px;height:auto;display:block;flex:0 0 auto}
.tp-score{white-space:nowrap}
.tp-score strong{color:#fff;font-weight:700}
.tp-sep{margin:0 7px;opacity:.5}
.tp-row:hover .tp-score{color:#fff}
.tp-row:focus-visible{outline:3px solid var(--cy);outline-offset:4px;border-radius:6px}
@media (max-width:420px){
  .tp-row{gap:8px;font-size:.82rem}
  .tp-stars{width:86px} .tp-logo{width:68px}
  .tp-sep{margin:0 5px}
}

@media (forced-colors:active){
  .case .fig{color:LinkText}
  .case-ico{border-color:ButtonBorder;background:ButtonFace;color:ButtonText}
}

/* ===================================================================
   27 Oct 2026: blame-chain diagrams, ad rail, Metric Vision, Trustpilot
   =================================================================== */

/* --- Blame chain: two exploded diagrams, before and after --- */
.xpair{display:grid;gap:22px}
@media(min-width:900px){.xpair{grid-template-columns:1fr 1fr;gap:28px}}
.xfig{margin:0;border:1px solid var(--line);border-radius:20px;padding:22px 14px 8px;background:rgba(255,255,255,.03)}
.xfig-us{border-color:rgba(110,140,255,.42);background:rgba(110,140,255,.07)}
.xfig figcaption{display:flex;flex-direction:column;gap:3px;margin:0 8px 4px}
.xfig figcaption b{color:var(--ink);font-size:1.12rem;font-weight:700}
.xfig figcaption span{color:var(--txt);font-size:.93rem;line-height:1.45}
.xdiag{display:block;width:100%;height:auto}
.xpunch{max-width:660px;margin:30px auto 0}
/* On a phone the sub-labels would render below 8px; the part names still tell
   the story, and the captions above each diagram carry the contrast. */
@media(max-width:600px){.xdiag .xsub{display:none}.xfig{padding:18px 6px 4px}}

/* --- Ad rail: the creatives themselves, swiped sideways --- */
.adrail-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:52px 0 16px}
.adrail-head h3{margin:0;font-size:1.35rem}
.adrail-head p{margin:0;color:var(--txt);font-size:.95rem}
.adrail-hint{display:inline-flex;align-items:center;gap:6px;color:var(--cy);font-weight:600;margin-left:6px}
.adrail-hint::after{content:"";width:22px;height:1.5px;background:currentColor;border-radius:2px}
.adrail{display:flex;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  padding:2px 2px 16px;scrollbar-width:thin;scrollbar-color:rgba(110,140,255,.5) transparent}
.adrail:focus-visible{outline:3px solid var(--cy);outline-offset:4px;border-radius:12px}
.ad{flex:0 0 auto;margin:0;scroll-snap-align:start;display:flex;flex-direction:column;gap:10px}
.ad video,.ad img{display:block;height:clamp(280px,38vw,420px);width:auto;aspect-ratio:var(--ar);
  border-radius:16px;object-fit:cover;background:#0c0d13;border:1px solid var(--line);box-shadow:0 14px 34px rgba(4,6,14,.45)}
.ad figcaption{display:flex;flex-direction:column;gap:1px;padding:0 4px}
.ad figcaption b{color:var(--ink);font-size:.98rem}
.ad figcaption span{color:var(--txt);font-size:.85rem}

/* --- Metric Vision --- */
.mv-grid{display:grid;gap:34px;align-items:start}
@media(min-width:1000px){.mv-grid{grid-template-columns:1.6fr 1fr;gap:40px}}
.mv{margin:0}
.mv figcaption{margin-top:12px;color:var(--txt);font-size:.85rem;text-align:center}
.mv-frame{border-radius:16px;overflow:hidden;border:1px solid rgba(110,140,255,.3);background:#0A0B10;
  box-shadow:0 30px 70px rgba(4,6,14,.6),0 0 0 1px rgba(255,255,255,.03) inset;font-size:13px;line-height:1.35;color:#C9CEDC}
.mv-bar{display:flex;align-items:center;gap:12px;padding:9px 14px;background:#12141C;border-bottom:1px solid #1F2230}
.mv-dots{display:flex;gap:6px}.mv-dots i{width:9px;height:9px;border-radius:50%;background:#2A2E3E;display:block}
.mv-url{font-size:11px;color:#7E87A3;letter-spacing:.02em}
.mv-app{display:grid;grid-template-columns:132px 1fr;min-height:0}
.mv-nav{display:flex;flex-direction:column;gap:3px;padding:14px 10px;background:#0E1016;border-right:1px solid #1C1F2B}
.mv-logo{font-weight:800;color:#fff;font-size:14px;letter-spacing:-.01em;margin:0 6px 12px;display:block}
.mv-logo span{color:var(--cy);margin-left:2px}
.mv-nav > span{padding:6px 8px;border-radius:7px;color:#8A93AE;font-size:12px}
.mv-nav > span.on{background:rgba(110,140,255,.16);color:#fff;font-weight:600}
.mv-main{padding:14px 16px 16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.mv-sources{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.mv-sources span{font-size:10.5px;padding:3px 8px 3px 18px;border-radius:999px;border:1px solid #23283A;color:#AEB6CF;position:relative}
.mv-sources span::before{content:"";position:absolute;left:7px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#3DBE7A}
.mv-sources em{font-style:normal;font-size:10.5px;color:#7E87A3;margin-left:auto}
.mv-verdict{margin:0;font-size:15px;line-height:1.4;color:#E7EAF3;font-weight:600}
.mv-verdict b{color:#fff}
.mv-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.mv-kpis div{background:#12141C;border:1px solid #1F2230;border-radius:10px;padding:10px 11px;display:flex;flex-direction:column;gap:4px;min-width:0}
.mv-kpis span{font-size:10.5px;color:#8A93AE;line-height:1.25}
.mv-kpis b{font-size:clamp(15px,1.45vw,19px);color:#fff;font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.mv-kpis .hi{border-color:rgba(110,140,255,.5);background:rgba(110,140,255,.1)}
.mv-kpis .hi b{color:var(--cy)}
.mv-kpis .warn{border-color:rgba(240,176,64,.5);background:rgba(240,176,64,.08)}
.mv-kpis .warn b{color:#F2B544}
.mv-kpis em{font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#F2B544}
.mv-split{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mv-card{background:#12141C;border:1px solid #1F2230;border-radius:10px;padding:11px 12px;display:flex;flex-direction:column;gap:8px;min-width:0}
.mv-card h4{margin:0;font-size:11.5px;color:#fff;font-weight:700}
.mv-step,.mv-loc{display:grid;grid-template-columns:1fr auto;gap:3px 8px;align-items:center}
.mv-step span,.mv-loc span{font-size:10.5px;color:#AEB6CF}
.mv-step b,.mv-loc b{font-size:12px;color:#fff;font-variant-numeric:tabular-nums}
.mv-step i,.mv-loc i{grid-column:1/-1;grid-row:2;height:7px;border-radius:4px;background:#1C2030;position:relative;overflow:hidden;display:block}
.mv-step i::after,.mv-loc i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:4px;background:var(--cy)}
.mv-step.leak i::after{background:#F2B544}
.mv-step.leak b{color:#F2B544}
.mv-loc.dim i::after{background:#4A5578}
.mv-note{margin:0;font-size:10.5px;color:#8A93AE}
.mv-note b{color:#F2B544}
@media(max-width:640px){
  .mv-app{grid-template-columns:1fr}
  .mv-nav{flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid #1C1F2B;padding:10px}
  .mv-logo{margin:0 8px 0 4px;align-self:center}
  .mv-nav > span:not(.on){display:none}
  .mv-kpis{grid-template-columns:1fr 1fr}
  .mv-split{grid-template-columns:1fr}
  .mv-sources em{margin-left:0;width:100%}
}
.mv-points{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.mv-points li{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start}
.mv-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;color:var(--cy);
  background:rgba(110,140,255,.13);border:1px solid rgba(110,140,255,.28)}
.mv-points b{display:block;color:var(--ink);font-size:1.02rem;margin-bottom:2px}
.mv-points span{color:var(--txt);font-size:.95rem;line-height:1.55}
.mv-points li:last-child .mv-ico{background:rgba(110,140,255,.28);border-color:rgba(110,140,255,.55);color:#fff}

/* --- Trustpilot: twenty real reviews in two drifting rows --- */
.tp-sum{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:10px 12px;color:var(--txt);text-decoration:none;font-size:.95rem}
.tp-sum-stars{width:110px;height:auto}
.tp-sum-logo{width:84px;height:auto}
.tp-sum:hover{color:var(--ink)}
.tp-marquee{display:grid;gap:16px;overflow:hidden;padding:6px 0 10px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.tp-marquee:focus-visible{outline:3px solid var(--cy);outline-offset:2px}
.tp-rowm{display:flex;width:max-content;animation:tp-drift var(--dur,110s) linear infinite}
.tp-rowm.rev{animation-direction:reverse}
.tp-marquee:hover .tp-rowm,.tp-marquee:focus-within .tp-rowm{animation-play-state:paused}
.tp-track{display:flex;gap:16px;padding-right:16px}
@keyframes tp-drift{to{transform:translateX(-50%)}}
.tpc{flex:0 0 272px;display:flex;flex-direction:column;gap:12px;background:#fff;color:#191919;
  border-radius:14px;padding:20px 20px 16px;box-shadow:0 12px 30px rgba(4,6,14,.35)}
.tpc-stars{width:108px;height:auto;display:block}
.tpc-text{margin:0;font-size:.93rem;line-height:1.55;color:#1d1d1f;
  display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.tpc footer{margin-top:auto;display:flex;justify-content:space-between;gap:10px;font-size:.8rem;color:#6b6b70}
.tpc footer b{color:#191919;font-weight:700}
@media(max-width:620px){.tpc{flex-basis:260px;padding:16px}}
@media(prefers-reduced-motion:reduce){
  .tp-rowm{animation:none}
  .tp-marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .tp-track[aria-hidden]{display:none}
}

/* videos: ten tiles in a three column grid leave one alone on the last row */
@media(min-width:960px){.vids-more.open > .vid:last-child:nth-child(4){grid-column:2}}