/* Diagnostix360 website v22.0 — loaded last on every page.
   1. Self-hosted fonts (the earlier CSS named them but never shipped the files)
   2. One type scale for every page
   3. Quieter section labels, readable small text
   4. Home: problem-path strip, proof line, "also from" pair
   5. Language switch, Arabic (RTL) and French pages
   Fonts: Inter, Space Grotesk, IBM Plex Mono, IBM Plex Sans Arabic — SIL Open Font License 1.1. */

/* ---------- 1. Fonts ------------------------------------------------------ */
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:100 900;
  src:url(/assets/fonts/inter-latin-wght-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:100 900;
  src:url(/assets/fonts/inter-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Space Grotesk';font-style:normal;font-display:swap;font-weight:300 700;
  src:url(/assets/fonts/space-grotesk-latin-wght-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-display:swap;font-weight:300 700;
  src:url(/assets/fonts/space-grotesk-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-display:swap;font-weight:400;src:url(/assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-display:swap;font-weight:500;src:url(/assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:400;src:url(/assets/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:500;src:url(/assets/fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:600;src:url(/assets/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:700;src:url(/assets/fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}

/* Headings get Space Grotesk (the brand's own display face, already used for the
   wordmark); body stays Inter. Arabic falls through to IBM Plex Sans Arabic. */
:root{
  --disp:'Space Grotesk','IBM Plex Sans Arabic',system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --body:'Inter','IBM Plex Sans Arabic',system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --night:#0B1622;
  --step-h1:clamp(2.125rem,1.35rem + 3.2vw,3rem);       /* inner pages: 34 → 48 */
  --step-h1-home:clamp(2.5rem,1.4rem + 4.4vw,4rem);     /* home: 40 → 64 */
  --step-h2:clamp(1.75rem,1.3rem + 1.7vw,2.375rem);     /* 28 → 38 */
  --step-h3:clamp(1.1875rem,1.1rem + .35vw,1.375rem);   /* 19 → 22 */
  --step-lead:clamp(1.0625rem,1rem + .3vw,1.1875rem);   /* 17 → 19 */
}
body{font-family:var(--body);font-size:17px;line-height:1.6;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.foot-h{font-family:var(--disp);font-weight:600;letter-spacing:-.022em}

/* ---------- 2. One type scale --------------------------------------------- */
h1,.page-hero h1,.doc h1,.article h1,.hero h1{font-size:var(--step-h1);line-height:1.08}
.v18-hero h1,.home-hero h1{font-size:var(--step-h1-home);line-height:1.02;letter-spacing:-.03em;max-width:15ch}
h2,.sec-head h2{font-size:var(--step-h2);line-height:1.12}
h3{font-size:var(--step-h3);line-height:1.25}
.lead,.v18-hero .lead,.hero .lead{font-size:var(--step-lead);line-height:1.62;max-width:62ch}
main p,main li{font-size:inherit}
.doc p,.doc li,.article p,.article li{font-size:17px;line-height:1.7}
.small-note,.legal-line,figcaption{font-size:14px;line-height:1.55}
.hero-phone-card figcaption span{font-size:14px}
.navlinks a{font-size:14px}
@media (max-width:980px){.navlinks a{font-size:16px}}

/* ---------- 3. Section labels and small text ------------------------------ */
/* Labels were 11–12 px monospace on every section. Now: readable sentence-case
   Inter, no leading rule, and only where a label adds information. */
.eyebrow{font-family:var(--body);font-size:14px;font-weight:600;letter-spacing:0;text-transform:none}
.eyebrow::before{display:none}
.hero .trust,.v18-hero .trust{font-family:var(--body);font-size:14px;color:#9FB0BE}
.story-n{font-family:var(--body);font-size:14px;font-weight:700}
.foot-h{font-family:var(--body);font-size:14px;font-weight:700;letter-spacing:0}
.mono,.metric{font-family:var(--mono)}

/* Replaces an inline style the Content-Security-Policy was silently blocking. */
.icon-grid.two-col{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:620px){.icon-grid.two-col{grid-template-columns:1fr}}
.note-on-dark{color:#AAB8CA}
.provider-fineprint{margin-top:12px;font-size:13.5px;color:#8FA2B4}

/* ---------- 4. Home ------------------------------------------------------- */
.home-hero .grid{align-items:center}
.home-hero h1{color:#fff}
.proof-line{display:flex;flex-wrap:wrap;gap:6px 18px;margin:22px 0 0;padding:0;list-style:none;color:#B9C6D1;font-size:15px}
.proof-line li{display:flex;align-items:center;gap:8px}
.proof-line li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--trace);flex-shrink:0}
.proof-line .stars{color:#F5C451;letter-spacing:1px}

/* The problem path: the one memorable element. It is the app's own idea —
   phone, Wi-Fi/router, provider, internet — drawn as a measured line with
   one stop flagged, exactly the way a result reads. */
.problem-path{margin-top:44px;padding-top:26px;border-top:1px solid rgba(255,255,255,.10)}
.problem-path h2{font-family:var(--body);font-size:15px;font-weight:600;color:#9FB0BE;letter-spacing:0;margin:0 0 18px}
.path-line{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.path-line::before{content:"";position:absolute;left:12.5%;right:12.5%;top:23px;height:2px;background:linear-gradient(90deg,var(--trace) 0 30%,#E0A33A 30% 36%,var(--trace) 36% 100%);transform-origin:left center;animation:trace-in 1.1s ease-out .2s both}
[dir=rtl] .path-line::before{transform-origin:right center;background:linear-gradient(270deg,var(--trace) 0 30%,#E0A33A 30% 36%,var(--trace) 36% 100%)}
@keyframes trace-in{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.path-line::before{animation:none}}
.path-line li{position:relative;text-align:center;color:#DCE6EE}
.path-dot{display:grid;place-items:center;width:48px;height:48px;margin:0 auto 12px;border-radius:50%;background:#0F2233;border:2px solid var(--trace);color:#fff;position:relative;z-index:1}
.path-dot svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.path-line .is-issue .path-dot{border-color:#E0A33A;background:#2A2012;box-shadow:0 0 0 6px rgba(224,163,58,.14)}
.path-name{display:block;font-weight:600;font-size:16px}
.path-val{display:block;margin-top:4px;font-family:var(--mono);font-size:13.5px;color:#8FD6E6}
.is-issue .path-val{color:#F2C177}
.path-verdict{margin:22px auto 0;max-width:60ch;text-align:center;color:#C9D5DF;font-size:15.5px}
.path-verdict strong{color:#fff}
@media (max-width:620px){
  .path-line{grid-template-columns:1fr;gap:0}
  .path-line::before{left:23px;right:auto;top:24px;bottom:24px;width:2px;height:auto;transform-origin:top center;background:linear-gradient(180deg,var(--trace) 0 30%,#E0A33A 30% 40%,var(--trace) 40% 100%)}
  [dir=rtl] .path-line::before{left:auto;right:23px}
  .path-line li{display:grid;grid-template-columns:48px 1fr;column-gap:14px;align-items:center;text-align:start;padding:6px 0}
  .path-dot{margin:0;grid-row:span 2}
  .path-val{margin-top:0}
  .path-verdict{text-align:start}
}

/* Section rhythm: backgrounds alternate instead of two "alt" bands in a row. */
.band-plain{background:var(--paper)}
.band-tint{background:var(--canvas)}

/* "Also from Diagnostix360": two equal cards instead of two stacked banners. */
.also-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.also-card{display:flex;flex-direction:column;gap:10px;padding:28px;border:1px solid var(--line);border-radius:14px;background:#fff}
.also-card h3{margin:0}
.also-card p{margin:0;color:var(--ink-soft,#3B4651);flex:1}
.also-card .btn{align-self:flex-start;margin-top:8px}
.also-card .tag{font-size:14px;font-weight:600;color:var(--signal)}
@media (max-width:760px){.also-grid{grid-template-columns:1fr}}

/* Feature cards: a little more air and a readable body size. */
.ux-card p{font-size:15.5px;line-height:1.6}
.ux-card h3{font-size:19px}

/* ---------- 5. Language switch, RTL, French -------------------------------- */
.lang-switch{display:flex;align-items:center;gap:4px;margin-inline-start:6px;padding-inline-start:14px;border-inline-start:1px solid rgba(255,255,255,.18)}
.navlinks .lang-switch a{padding:4px 7px;border:1px solid transparent;border-radius:6px;font-size:13.5px;color:#B6BFC7}
.navlinks .lang-switch a[aria-current=true]{border-color:rgba(0,165,196,.55);color:#fff}
.navlinks .lang-switch a[lang=ar]{font-family:'IBM Plex Sans Arabic',var(--body);font-size:15px}
@media (max-width:980px){
  .lang-switch{margin:14px 0 0;padding:0;border:0;gap:8px}
  .navlinks .lang-switch a{padding:8px 12px;border:1px solid rgba(255,255,255,.18);font-size:15px}
}

html[lang=ar] body{font-family:'IBM Plex Sans Arabic',var(--body);font-size:18px;line-height:1.75}
html[lang=ar] h1,html[lang=ar] h2,html[lang=ar] h3,html[lang=ar] .foot-h{font-family:'IBM Plex Sans Arabic',var(--disp);letter-spacing:0;font-weight:700}
html[lang=ar] .home-hero h1{line-height:1.25;max-width:18ch}
html[lang=ar] h2{line-height:1.35}
html[lang=ar] .lead{line-height:1.85}
html[lang=ar] .eyebrow{font-family:'IBM Plex Sans Arabic',var(--body)}
[dir=rtl] .navlinks,[dir=rtl] .cta,[dir=rtl] .proof-line{direction:rtl}
[dir=rtl] .story-card,[dir=rtl] .ux-card,[dir=rtl] .report-new-card,[dir=rtl] .also-card,[dir=rtl] .sec-head{text-align:right}
[dir=rtl] .ltr{direction:ltr;unicode-bidi:isolate}
html[lang=fr] .home-hero h1{max-width:17ch}
.lang-note{font-size:14px;color:var(--muted);margin-top:10px}

/* ---------- 6. Focus visibility (keyboard) -------------------------------- */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--trace);outline-offset:3px;border-radius:4px}

/* Skip link hidden by clipping instead of left:-9999px, which in right-to-left
   pages created a 10,000 px horizontal scroll. */
.skip-link{left:12px;inset-inline-start:12px;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap;padding:0;border:0}
.skip-link:focus{clip-path:none;width:auto;height:auto;overflow:visible;padding:10px 14px;border:1px solid var(--signal)}
html[lang=ar] .path-val{font-family:'IBM Plex Sans Arabic',var(--mono);font-size:14.5px}

/* ---------- 7. Minimum readable sizes on inner pages ---------------------- */
.article-hero h1{font-size:var(--step-h1);line-height:1.1}
footer .foot-h{font-family:var(--body);font-size:14px;font-weight:700;letter-spacing:0}
footer .fine,footer .fine a,footer .fine span{font-size:13.5px}
.crumb,.crumb a,.crumb span{font-size:13.5px}
.article-hero span,.article-hero a{font-size:13.5px}
.jump strong,.jump a{font-size:14px}
main .tag,.brand-tag{font-size:13px;letter-spacing:0;text-transform:none}
.peek-h,.provider-flow header{font-size:13px;letter-spacing:.02em}
main span.tag.watch{font-size:12.5px}

/* ===================== v22.1 ===================== */
/* Benefit sections: a short number-free label tying each block to the hero promise. */
.benefit-tag{display:inline-block;font-size:14px;font-weight:700;color:var(--signal);margin-bottom:6px}
.features-2026 .benefit-tag{color:#5FD3E6}
.more-link{display:inline-block;margin-top:18px;font-weight:600;color:var(--signal);text-decoration:underline;text-underline-offset:3px}

/* Real Google Play reviews */
.reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0;padding:0;list-style:none}
.reviews li{margin:0;padding:24px;border:1px solid var(--line);border-radius:14px;background:#fff;display:flex;flex-direction:column;gap:12px}
.reviews blockquote{margin:0;font-family:var(--disp);font-size:20px;line-height:1.35;color:var(--ink)}
.reviews .stars{color:#C9921C;letter-spacing:2px;font-size:15px}
.reviews cite{font-style:normal;font-size:14px;color:var(--muted)}
.reviews-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:24px}
.reviews-head h2{margin:0}
.reviews-head p{margin:0;color:var(--muted);font-size:15px}
@media (max-width:860px){.reviews{grid-template-columns:1fr}}

/* Data Insight promotion: its own band with a small "overnight" readout,
   the same numbers the Data Insight page illustrates. */
.di-band{background:#0F1C2A;color:#DCE6EE}
.di-band .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);gap:56px;align-items:center}
.di-band h2{color:#fff;margin:6px 0 14px}
.di-band p{color:#B9C6D1;font-size:var(--step-lead);line-height:1.6;max-width:56ch;margin:0}
.di-band .tag{font-size:14px;font-weight:600;color:#5FD3E6}
.di-band .cta{margin-top:24px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.di-band .facts{margin:18px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:15px;color:#9FB0BE}
.di-band .facts li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#5FD3E6;margin-inline-end:8px;vertical-align:middle}
.night-card{border:1px solid rgba(95,211,230,.28);border-radius:18px;background:#0A1520;padding:24px}
.night-card .when{font-size:14px;color:#9FB0BE}
.night-card .big{font-family:var(--disp);font-size:56px;font-weight:600;color:#fff;line-height:1;margin:10px 0 4px}
.night-card .big small{font-size:22px;color:#9FB0BE;margin-inline-start:6px}
.night-card .sub{font-size:15px;color:#B9C6D1}
.night-card ol{list-style:none;margin:18px 0 0;padding:14px 0 0;border-top:1px solid rgba(255,255,255,.08);display:grid;gap:10px}
.night-card li{display:flex;justify-content:space-between;gap:12px;font-size:15px;color:#DCE6EE}
.night-card li span:last-child{font-family:var(--mono);color:#8FD6E6}
.night-card .ex{display:block;margin-top:14px;font-size:13px;color:#7F8E9B}
@media (max-width:860px){.di-band .wrap{grid-template-columns:1fr;gap:32px}}

/* Slim ISP + privacy strip */
.isp-strip{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:24px 28px;border:1px solid var(--line);border-radius:14px;background:#fff}
.isp-strip h3{margin:4px 0 6px}
.isp-strip p{margin:0;color:var(--ink-soft,#3B4651);max-width:60ch}
.isp-strip .tag{font-size:14px;font-weight:600;color:var(--signal)}

/* Phones: a download bar appears once the hero button has scrolled away. */
.get-bar{position:fixed;inset:auto 0 0 0;z-index:60;display:none;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(11,22,34,.97);border-top:1px solid rgba(0,165,196,.35);backdrop-filter:blur(8px)}
.get-bar a{display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;border-radius:10px;background:var(--trace);color:#06131C;font-weight:700;font-size:16px;text-decoration:none}
.get-bar a span{font-weight:500;opacity:.8}
@media (max-width:760px){.get-bar.show{display:block}body.has-get-bar{padding-bottom:76px}}
@media (prefers-reduced-motion:no-preference){.get-bar.show{animation:bar-in .25s ease-out}}
@keyframes bar-in{from{transform:translateY(100%)}to{transform:none}}
.di-band .btn-primary{background:var(--trace);border-color:var(--trace);color:#06131C}
.di-band .btn-primary:hover{background:#2BC0DA;border-color:#2BC0DA;color:#06131C}

/* ===================== v23.0 ===================== */
/* Hero demo video in the phone card */
.hero-video video{display:block;width:100%;height:auto;aspect-ratio:392/760;max-height:620px;object-fit:contain;background:#07111b;cursor:pointer}
.hero-video{max-width:360px;margin-inline:auto}

/* QR code for visitors on a computer (hidden on phones and touch screens) */
.qr-card{display:none;align-items:center;gap:14px;margin-top:22px;padding:10px 16px 10px 10px;border-radius:14px;background:#fff;color:#10161C;width:max-content;max-width:100%}
.qr-card img{width:96px;height:96px;display:block}
.qr-card span{display:flex;flex-direction:column;gap:2px;font-size:14px;line-height:1.4;color:#3C4750}
.qr-card strong{font-size:15px;color:#10161C}
@media (min-width:900px) and (hover:hover) and (pointer:fine){.qr-card{display:flex}}

/* Symptom checker */
.checker{margin-top:28px}
.sym-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.sym-chip{display:flex;align-items:center;gap:12px;min-height:60px;padding:12px 16px;border:1px solid var(--line);border-radius:14px;background:var(--paper);color:var(--ink);font:600 16px/1.3 var(--body);text-align:start;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s}
.sym-chip:hover{border-color:var(--trace)}
.sym-chip[aria-pressed="true"]{border-color:var(--trace);background:#E7F7FA;box-shadow:inset 0 0 0 1px var(--trace)}
.sym-ico{flex:0 0 36px;height:36px;display:grid;place-items:center;border-radius:10px;background:#0F2233;color:#5FD3E6}
.sym-ico svg,.share-row svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sym-panels{margin-top:18px}
.sym-panel{border:1px solid var(--line);border-radius:18px;background:var(--paper);padding:24px 26px;margin-top:14px}
.js-checker .sym-panel{display:none;margin-top:0}
.js-checker .sym-panel.open{display:block;animation:sym-in .2s ease-out}
@keyframes sym-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.sym-panel h3{margin:0 0 16px}
.sym-cols{display:grid;grid-template-columns:1fr 1.15fr 1.15fr;gap:24px;margin-bottom:22px}
.sym-h{margin:0 0 8px;font-size:14px;font-weight:700;color:var(--muted)}
.sym-cols p,.sym-cols li{font-size:16px;line-height:1.55;color:var(--ink-soft);margin:0}
.sym-cols ul{margin:0;padding-inline-start:18px;display:grid;gap:6px}
.sym-panel .btn-primary{background:var(--trace);border-color:var(--trace);color:#06131C}
.sym-panel .btn-primary:hover{background:#2BC0DA;border-color:#2BC0DA}
@media (max-width:860px){.sym-chips{grid-template-columns:repeat(2,minmax(0,1fr))}.sym-cols{grid-template-columns:1fr;gap:16px}}
@media (max-width:420px){.sym-chip{font-size:15px;padding:10px 12px;gap:10px}.sym-ico{flex-basis:32px;height:32px}}

/* Real app screens: swipeable rail */
.shot-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(190px,232px);gap:20px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding:6px 2px 16px;margin-top:28px;scrollbar-width:thin}
.shot-rail figure{margin:0;scroll-snap-align:start}
.shot-rail img{display:block;width:100%;height:auto;aspect-ratio:738/1430;object-fit:contain;object-position:top;border-radius:18px;border:1px solid rgba(16,22,28,.12);background:#0B1622;box-shadow:0 12px 30px rgba(16,22,28,.12);cursor:zoom-in}
.shot-rail figcaption{margin-top:10px;font-size:15px;font-weight:600;color:var(--ink)}
.shot-rail:focus-visible{outline:2px solid var(--trace);outline-offset:4px}

/* Data Insight: real screenshot in the home band */
.di-shot{margin:0 auto;width:100%;max-width:300px}
.di-shot img{display:block;width:100%;height:auto;border-radius:22px;box-shadow:0 24px 60px rgba(0,0,0,.4)}

/* FAQ */
.faq-home{margin-top:24px;display:grid;gap:12px;max-width:860px}
.faq-home details{border:1px solid var(--line);border-radius:14px;background:var(--paper);padding:0 22px}
.faq-home summary{cursor:pointer;list-style:none;padding:18px 32px 18px 0;font-weight:600;font-size:17px;color:var(--ink);position:relative}
[dir=rtl] .faq-home summary{padding:18px 0 18px 32px}
.faq-home summary::-webkit-details-marker{display:none}
.faq-home summary::after{content:"+";position:absolute;inset-inline-end:0;top:50%;transform:translateY(-50%);font-size:24px;font-weight:400;color:var(--muted)}
.faq-home details[open] summary::after{content:"–"}
.faq-home details p{margin:0 0 18px;color:var(--ink-soft);font-size:16px;line-height:1.6}

/* Share + QR in the final call to action */
.share-row{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;align-items:center;margin-top:22px}
.share-row .qr-card{margin-top:0}
.btn-wa{background:#1FAF5A;color:#fff;border-color:#1FAF5A;font-size:15px;padding:12px 20px}
.btn-wa:hover{background:#198F4A;border-color:#198F4A;color:#fff}

/* Data Insight page: store screens */
.di-gallery .shot-rail{grid-auto-columns:minmax(200px,250px)}
.di-gallery .shot-rail img{border-color:rgba(255,255,255,.12)}

/* Speed test page video */
.speed-video{display:block;width:100%;max-width:340px;height:auto;aspect-ratio:392/760;border-radius:20px;background:#07111b;margin-inline:auto}

/* v23.0: keep the brand clear of the first menu link (French menu is longer) */
.nav .brand{margin-inline-end:20px;flex-shrink:0}

/* ===================== v23.1 ===================== */
/* Video play/pause button */
.vid-wrap{position:relative;display:block}
.vid-toggle{position:absolute;inset-inline-start:12px;bottom:12px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(7,17,27,.78);color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(4px);transition:background .15s,transform .15s}
.vid-toggle:hover{background:rgba(0,165,196,.9)}
.vid-toggle:focus-visible{outline:3px solid #5FD3E6;outline-offset:2px}
.vid-toggle svg{width:20px;height:20px;fill:currentColor}
.vid-wrap.is-paused .vid-toggle{width:56px;height:56px;inset-inline-start:calc(50% - 28px);bottom:calc(50% - 28px);background:rgba(0,165,196,.92);border-color:transparent}
.vid-wrap.is-paused .vid-toggle svg{width:26px;height:26px}
.hero-video figcaption span{line-height:1.5}

/* Real screens inside "How it works" */
.inside{margin-top:44px;padding-top:32px;border-top:1px solid var(--line)}
.inside-h{margin:0}
.inside-lead{margin:6px 0 0;color:var(--muted);font-size:16px}
.inside .shot-rail{margin-top:18px}

/* Reviews inside the reports section */
.mt-xl{margin-top:56px}
#reports .reviews-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 24px}
#reports .reviews-head h3{margin:0;font-size:var(--step-h3)}
#reports .reviews-head p{margin:0;color:var(--muted);font-size:14px}

/* Quieter closing sections */
.quiet{padding-top:64px;padding-bottom:64px}
.quiet .sec-head h2,.quiet .trust-compact h2{font-size:clamp(1.5rem,1.2rem + 1vw,1.875rem)}

/* Data Insight page: real screen beside the headline and in each section */
.di-hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(220px,.75fr);gap:48px;align-items:center}
.di-hero-shot,.di-real{margin:0}
.di-hero-shot img,.di-real img{display:block;width:100%;max-width:320px;height:auto;margin-inline:auto;border-radius:22px;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.di-real figcaption{margin-top:10px;text-align:center;font-size:14px;color:var(--muted)}
.di-gallery-dark{background:#0F1C2A}
.di-gallery-dark h2{color:#fff}.di-gallery-dark .lead{color:#B9C6D1}.di-gallery-dark .eyebrow{color:#5FD3E6}
.di-gallery-dark .shot-rail figcaption{color:#DCE6EE}
.di-gallery-dark .shot-rail img{aspect-ratio:9/16;border-color:rgba(255,255,255,.12)}
@media (max-width:860px){.di-hero-grid{grid-template-columns:1fr;gap:28px}.di-hero-shot img{max-width:260px}}