/* =========================================================
   Respology — Free Reputation Audit landing

   Sizing system
   - Layout lengths are written in Figma pixels × var(--u).
     --u = 1px at 1920, shrinks proportionally down to .75px at 1440
     (so the 1400px column always keeps the same share of the screen and
     the free side margins of the frame), stays .75px down to 1200.
     Tablet/mobile (≤1199) use --u: 1px plus their own explicit values.
   - Font sizes come from the designer's text styles:
     1920px set → 1440px set (fluid in between), tablet uses the 1440 set,
     mobile uses the 375px set.
   ========================================================= */

/* latin + cyrillic subsets (Google Fonts split); the browser downloads a subset only when the page uses it */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/intertight-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Tight"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("../fonts/intertight-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/intertight-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter Tight"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("../fonts/intertight-italic-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

:root {
  --bg: #050A13;
  --card: #0D1624;
  --line: #2C2D30;
  --gray: #9E9E9E;
  --steel: #556A8A;
  --light: #C0C2C6;
  --white2: #F4F4F4;
  --green: #92FF45;
  --red: #FF3030;
  --red2: #FF7575;
  --blue: #669AF2;

  --t1: #FF3030; --t2: #E1A232; --t3: #DFD932; --t4: #BDE132; --t5: #92FF45;

  --hot: linear-gradient(90deg, #871414 0%, #E14F32 10.1%, #E18132 20.19%, #E1B232 33.17%, #E1D532 46.63%, #DBE132 59.62%, #B5E132 73.08%, #8CE132 86.54%, rgba(123, 225, 50, .64) 100%);
  --card-grad: linear-gradient(150.26deg, rgba(13, 22, 36, 0) 25.27%, #162336 100.6%);

  --f: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ft: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;

  /* 1920px text styles */
  --fs-h1: 100px;   /* H1 - 100 - SemiBold   (stats)            */
  --fs-h2: 50px;    /* H2 - 50 - SemiBold    (hero, tiers)      */
  --fs-big: 40px;   /* Big Text - 40 - Med   (section titles)   */
  --fs-h3: 24px;    /* H3 - 24 - SemiBold    (labels, cards)    */
  --fs-h4: 30px;    /* H4 - 30 - SB          (quote, FAQ)       */
  --fs-t1: 16px;    /* Text 1 - 16 - Reg                        */
  --fs-t2: 16px;    /* Text 2 - 16 - Med                        */
  --fs-t3: 20px;    /* Text 3 - 20 - Reg                        */
  --fs-t4: 20px;    /* Text 4 - 20 - Med                        */
  --fs-btn: 18px;   /* Text Button - 18 - Med                   */
  --fs-field: 16px; /* Field - 16 - Italic                      */
  --fs-desc: 12px;  /* Description - 12 - Reg                   */

  --u: 1px;
  --wrap: calc(1400 * var(--u));
  --g: 40px;                                /* minimum side gutter */
  --sec: calc(200 * var(--u));              /* vertical rhythm between blocks */
  --tier-gap: calc(62 * var(--u));
  --line-y: 66vh;                           /* scan line position (bottom edge); Figma «Расположение линии» 2026-10-16: 713 of 1080 (was 74.5%) */
  --hero-ref: 74.5vh;                       /* first-screen layout keeps the old reference, the hero must not move */
  --footer-h: clamp(200px, 15.6vw, 320px);    /* client 2026-10-16: much less green (was the frame's 669 at 1920) */
  --page-r: calc(60 * var(--u));           /* rounded bottom of the dark page */
  --ease: cubic-bezier(.16, 1, .3, 1);
}
@supports (height: 1svh) { :root { --line-y: 66svh; --hero-ref: 74.5svh; } }

/* 1200–1919: proportional to the 1920 frame, type follows 1920 → 1440 styles */
@media (min-width: 1200px) and (max-width: 1919.98px) {
  :root {
    --u: clamp(.75px, calc(100vw / 1920), 1px);
    --fs-h1:  clamp(80px, calc(80px + 20 * (100vw - 1440px) / 480), 100px);
    --fs-h2:  clamp(40px, calc(40px + 10 * (100vw - 1440px) / 480), 50px);
    --fs-big: clamp(32px, calc(32px + 8 * (100vw - 1440px) / 480), 40px);
    --fs-t1:  clamp(14px, calc(14px + 2 * (100vw - 1440px) / 480), 16px);
    --fs-t2:  clamp(14px, calc(14px + 2 * (100vw - 1440px) / 480), 16px);
    --fs-t3:  clamp(16px, calc(16px + 4 * (100vw - 1440px) / 480), 20px);
    --fs-t4:  clamp(16px, calc(16px + 4 * (100vw - 1440px) / 480), 20px);
    --fs-btn: clamp(16px, calc(16px + 2 * (100vw - 1440px) / 480), 18px);
    --fs-field: clamp(14px, calc(14px + 2 * (100vw - 1440px) / 480), 16px);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  font-family: var(--f);
  font-size: var(--fs-t1);
  line-height: 1.2;
  color: #fff;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
p, h1, h2, h3, ol, ul, dl, dd, blockquote, figure, fieldset { margin: 0; padding: 0; }
ol, ul { list-style: none; }
fieldset { border: 0; min-width: 0; }
b { font-weight: inherit; color: #fff; }
h1, h2, h3 { font-weight: inherit; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 6px; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 300; padding: 12px 16px; border-radius: 8px; background: var(--green); color: var(--bg); font-weight: 600; transition: top .2s; }
.skip:focus { top: 12px; }

.wrap { width: min(var(--wrap), 100% - 2 * var(--g)); margin-inline: auto; }

/* ---------- colour helpers ---------- */
.c-red { color: var(--red); }
.c-gray { color: var(--gray); }
.c-blue { color: var(--steel); }

/* ---------- type scale ---------- */
.h-hero { font-family: var(--ft); font-weight: 600; font-size: var(--fs-h2); line-height: 1.2; }
.h-big  { font-family: var(--f); font-weight: 500; font-size: var(--fs-big); line-height: 1.2; }
.h-card { font-family: var(--ft); font-weight: 600; font-size: var(--fs-h3); line-height: 1.2; color: #fff; display: block; }
.t-20   { font-family: var(--ft); font-size: var(--fs-t3); line-height: 1.2; color: var(--gray); }
.t-16   { font-size: var(--fs-t1); line-height: 1.2; }
.t-12   { font-size: var(--fs-desc); line-height: 1.25; color: var(--gray); }

.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--fs-t1); line-height: 1.2; color: var(--steel); }
.meta i, .flag i, .footer__meta i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; flex: none; }

/* =========================================================
   Page shell, grain, footer reveal
   ========================================================= */
.page {
  position: relative;
  z-index: 1;
  margin-bottom: var(--footer-h);
  border-radius: 0 0 var(--page-r) var(--page-r);
  background-color: var(--bg);
  background-image: url("../img/noise.webp");   /* pre-rendered: the live SVG noise filter cost Safari frames */
  overflow-x: clip;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .5);
}
.grain { display: none; }

.rail {
  position: fixed; top: 0; left: 0; z-index: 120;
  height: 2px; width: 100%;
  transform: scaleX(var(--p, 0)); transform-origin: 0 50%;
  background: var(--hot);
  pointer-events: none;
}

/* =========================================================
   Buttons — red glow; hover behaves like the current site
   (fills green, 200ms ease-out)
   ========================================================= */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: calc(20 * var(--u));
  height: calc(58 * var(--u)); padding: 0 calc(25 * var(--u));
  border: 1px solid var(--red);
  border-radius: 91px;
  background: radial-gradient(37.6% 150.44% at 97.87% 56.25%, #FF241F 0%, rgba(225, 54, 50, 0) 100%), var(--bg);
  box-shadow: 43px 0 12px rgba(225, 53, 51, .01), 27px 0 11px rgba(225, 53, 51, .09), 15px 0 9px rgba(225, 53, 51, .3), 7px 0 7px rgba(225, 53, 51, .51), 2px 0 4px rgba(225, 53, 51, .58);
  color: #fff;
  font-family: var(--f); font-weight: 500; font-size: var(--fs-btn); line-height: 1.2;
  white-space: nowrap;
  isolation: isolate;
  cursor: pointer;
  transition: background-color .14s ease-out, border-color .14s ease-out, color .14s ease-out, box-shadow .25s ease-out, transform .15s ease-out, opacity .3s;
  -webkit-tap-highlight-color: transparent;
}
.btn::before { /* green fill layer, under the label */
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit;
  background: var(--green);
  opacity: 0; transition: opacity .14s ease-out; will-change: opacity;   /* quick: no muddy half-green state */
}
.btn > * { position: relative; }
.btn__arrow { width: calc(24 * var(--u)); height: 10px; flex: none; transition: transform .3s var(--ease); }
@media (hover: hover) {
  .btn:hover { color: var(--bg); border-color: var(--green); box-shadow: 0 0 24px rgba(146, 255, 69, .35), 0 0 4px rgba(146, 255, 69, .6); }
  .btn:hover::before { opacity: 1; }
  .btn:hover .btn__arrow { transform: translateX(5px); }
}
.btn:active { transform: scale(.98); }

/* =========================================================
   Header
   ========================================================= */
.header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: calc(40 * var(--u)); }
.logo { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.logo img { width: calc(197 * var(--u)); height: auto; }
.logo__tag { font-size: var(--fs-t1); line-height: 1.2; color: var(--gray); }

/* =========================================================
   1 · Hero
   ========================================================= */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 622fr) minmax(0, 665fr);
  gap: calc(113 * var(--u));
  align-items: center;
  /* 200 on a 1080-high screen; shorter screens get less so the hero sits above the scan line */
  padding-top: clamp(40px, calc(var(--hero-ref) - 600 * var(--u)), calc(200 * var(--u)));
}
.hero__meta { margin-bottom: calc(40 * var(--u)); }
.hero__text .h-hero { margin-bottom: calc(20 * var(--u)); }
.hero__lede { margin-bottom: calc(40 * var(--u)); }

.hero__visual { position: relative; }
@media (min-width: 1200px) {
  /* --gk (set by JS) = hero text height / gauge height; the right edge stays on the content line */
  .hero__visual { width: calc(var(--gk, 1) * 100%); margin-left: calc((1 - var(--gk, 1)) * 100%); }
}
.hero__halo {
  position: absolute; left: 50%; top: 52%;
  width: 135%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(146, 255, 69, .16), rgba(146, 255, 69, .05) 55%, transparent 75%);
  pointer-events: none; opacity: .9;
}
.gauge { position: relative; width: 100%; height: auto; overflow: visible; }
.gauge__labels text { font-family: var(--f); font-weight: 600; font-size: calc(12px / var(--gk, 1)); fill: var(--bg); text-anchor: middle; }
.gauge__ticks line { stroke: var(--gray); stroke-width: 1; }
.gauge__ticks text { font-family: var(--f); font-size: 12px; fill: #fff; text-anchor: middle; }
.gauge__score { font-family: var(--ft); font-weight: 600; font-size: 50px; text-anchor: middle; fill: var(--t3); transition: fill .3s; font-variant-numeric: tabular-nums; }
.gauge__cap { font-family: var(--f); font-weight: 500; font-size: 20px; text-anchor: middle; fill: var(--gray); }
.gauge__mask { stroke-dasharray: 1 1; stroke-dashoffset: 0; }

/* hero intro sequence (JS toggles .is-playing; replays on re-enter) */
.hero__sweep {
  position: absolute; left: 4%; right: 4%; top: 0; height: 2px; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--red) 30%, #ff7a6b 50%, var(--red) 70%, transparent);
  box-shadow: 0 0 18px 3px rgba(255, 48, 48, .45);
}
.frags { position: absolute; inset: 0; pointer-events: none; }
.frag {
  position: absolute; opacity: 0;
  padding: 6px 12px; border-radius: 100px;
  border: 1px solid var(--line); background: rgba(13, 22, 36, .85);
  font-size: var(--fs-desc); line-height: 1.25; color: var(--light); white-space: nowrap;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .7);
}
/* client 2026-10-16: nothing behind the gauge — chips only in the free corners: above the
   arc's ends and below them, beside the score */
.frag:nth-child(1) { top: -3%; left: -2%; }
.frag:nth-child(2) { top: -3%; right: -2%; }
.frag:nth-child(3), .frag:nth-child(4) { display: none; }
.frag:nth-child(5) { top: 84%; left: -2%; }
.frag:nth-child(6) { top: 84%; right: -2%; }

.js .hero__visual:not(.is-ready) .gauge__mask { stroke-dashoffset: 1; }
.js .hero__visual:not(.is-ready) .hero__halo { opacity: 0; }
.hero__visual.is-playing .hero__halo { animation: haloIn 1.6s var(--ease) both, haloBreathe 6s ease-in-out 1.8s infinite; }
.hero__visual.is-playing .gauge__mask { animation: arcIn 1.5s cubic-bezier(.45, 0, .2, 1) .25s both; }
.hero__visual.is-playing .hero__sweep { animation: sweep 1.7s var(--ease) .1s both; }
.hero__visual.is-playing .frag { animation: frag 1.1s ease-out both; }
.hero__visual.is-playing .frag:nth-child(1) { animation-delay: .35s; }
.hero__visual.is-playing .frag:nth-child(2) { animation-delay: .6s; }
.hero__visual.is-playing .frag:nth-child(3) { animation-delay: .85s; }
.hero__visual.is-playing .frag:nth-child(4) { animation-delay: 1.1s; }
.hero__visual.is-playing .frag:nth-child(5) { animation-delay: 1.35s; }
.hero__visual.is-playing .frag:nth-child(6) { animation-delay: 1.6s; }
.hero__visual.is-done .gauge__score { animation: scorePop .9s var(--ease); }
@keyframes haloIn { from { opacity: 0; transform: translate(-50%, -50%) scale(.8); } to { opacity: .9; transform: translate(-50%, -50%) scale(1); } }
@keyframes haloBreathe { 0%, 100% { opacity: .9; } 50% { opacity: .55; } }
@keyframes arcIn { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes sweep { 0% { top: 0; opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { top: 96%; opacity: 0; } }
@keyframes frag { 0% { opacity: 0; transform: translateY(6px); } 22% { opacity: 1; transform: none; } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes scorePop { 0% { filter: none; } 40% { filter: drop-shadow(0 0 14px currentColor); } 100% { filter: none; } }

/* =========================================================
   Scan line (fixed) + mini Respology Index
   ========================================================= */
.scan {
  position: fixed; left: 0; right: 0; z-index: 40;
  top: calc(var(--line-y) - 85px); height: 170px;   /* 85px frame above the line + its mirror below */
  pointer-events: none;
  transition: opacity .6s ease;
}
.scan__half { position: absolute; left: 0; right: 0; height: 85px; overflow: hidden; }
.scan__half--up { top: 0; }
.scan__half--dn { top: 85px; }
.scan__flip { position: absolute; inset: 0; transform: scaleY(-1); }
.scan__glow {
  position: absolute; left: 0; top: -20px; width: 100%; height: 154px; display: block;   /* mask = the frame's y 700…854 */
  background: var(--scan-c);
  -webkit-mask: url("../img/scan-glow-wide.png") 0 0 / 100% 100% no-repeat;
  mask: url("../img/scan-glow-wide.png") 0 0 / 100% 100% no-repeat;
}
.scan__glow--narrow { -webkit-mask-image: url("../img/scan-glow-narrow.png"); mask-image: url("../img/scan-glow-narrow.png"); }
/* Kit «Controls/ Scan» has three states of the same shape: ×0.75, default, ×1.25,
   scaled from the shape's bottom (= the SVG's bottom edge). At rest the glow is the low
   ×0.75 state on both sides of the line; scrolling stretches the side you scroll towards
   (down → upper glow, up → lower glow) with the speed up to ×1.25 on a spring (JS sets
   --s-up / --s-dn). Colour follows the index value (JS sets --scan-c). */
.scan { --scan-c: #FF3030; --s-up: .75; --s-dn: .75; }
.scan__glow { transform-origin: 50% 100%; will-change: transform; }
.scan__half--up .scan__glow { transform: scaleY(var(--s-up)); }
.scan__half--dn .scan__glow { transform: scaleY(var(--s-dn)); }
.scan__glow--narrow { display: none; }
@media (max-width: 767px) {
  /* phones: centre part of the shape, 0.6 of the height → a lower, wider hump */
  .scan__glow--wide { display: none; }
  .scan__glow--narrow { display: block; top: calc(85px - 105px * .6); height: calc(154px * .6); }
}
.scan__edge {
  position: absolute; left: 0; right: 0; top: 84px; height: 1px; background: var(--scan-c);
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .4), #000 50%, rgba(0, 0, 0, .4));
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, .4), #000 50%, rgba(0, 0, 0, .4));
}
.scan.is-off { opacity: 0; }
html:not(.js) .scan, html:not(.js) .mini, .static .scan, .static .mini, .static .curtain { display: none; }

/* Figma: 180×203 at x 1700 / y 562 of the 1920 frame — sits in the free right margin */
.mini {
  position: fixed; z-index: 45; right: calc(40 * var(--u));
  top: calc(var(--line-y) - 243 * var(--u));
  width: calc(180 * var(--u)); padding: calc(12 * var(--u));
  display: flex; flex-direction: column; align-items: center; gap: calc(12 * var(--u));
  border-radius: calc(20 * var(--u));
  background: var(--card-grad), rgba(10, 16, 27, .72);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 20px 50px -30px #000;
  pointer-events: none;
  transition: opacity .5s ease, transform .5s var(--ease), box-shadow .5s;
}
.mini__cap { font-weight: 500; font-size: var(--fs-t2); line-height: 1.2; color: var(--gray); text-align: center; white-space: nowrap; }
.mini__gauge { width: calc(156 * var(--u)); height: auto; margin-bottom: calc(-6 * var(--u)); }
.mini__num { font-family: var(--ft); font-weight: 600; font-size: calc(24 * var(--u)); line-height: 1; color: var(--t1); font-variant-numeric: tabular-nums; transition: color .3s; }
.mini__tier { font-weight: 500; font-size: var(--fs-t4); line-height: 1.2; color: #fff; margin-top: calc(-4 * var(--u)); min-height: 1.2em; white-space: nowrap; }
.mini.is-off { opacity: 0; transform: translateX(16px); }
.mini.is-max { box-shadow: 0 0 0 1px rgba(146, 255, 69, .45), 0 0 40px -6px rgba(146, 255, 69, .55); }

/* =========================================================
   Skeleton scan (JS: html.sk-on, plates in .sk-layer)
   ========================================================= */
.sk-layer { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; z-index: 36; }
/* fixed curtain below the scan line: hides unread content without waiting for JS */
.curtain {
  position: fixed; left: 0; right: 0; top: var(--line-y); bottom: 0; z-index: 35;
  background-color: var(--bg);
  background-image: url("../img/noise.webp");   /* pre-rendered: the live SVG noise filter cost Safari frames */
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .35s ease, visibility 0s .35s;
}
.curtain.is-on { opacity: 1; visibility: visible; transition: opacity .35s ease; }
.sk-plate {
  position: absolute;
  border: 1px solid var(--line);
  background: rgba(13, 22, 36, .8);   /* designer 2026-10-16: was black 20%, now 80% — plates read better */
  transition: opacity .4s ease;
}
.sk-plate.is-gone { opacity: 0; transition-duration: .25s; }
/* Text blocks below the line are redacted word by word, like the client's reference:
   every word is a closed «window» — a hairline frame with a faint fill and the word inside
   still invisible. When the line touches the word, the window opens: the frame flashes
   green and the text fades in (staggered along the line), then the frame fades out.
   JS puts a copy of the word in the same type inside (--wc = its colour). */
.sk-word {
  position: absolute; box-sizing: border-box; border-radius: 4px;
  white-space: pre; overflow: visible; color: transparent;
  background: rgba(192, 194, 198, .06);
  box-shadow: inset 0 0 0 1px rgba(192, 194, 198, .16);
  transition: color .55s var(--ease), background-color .55s var(--ease), box-shadow .55s var(--ease), opacity .3s ease .25s;
  transition-delay: calc(var(--i, 0) * 34ms);
}
.sk-word.is-open { color: var(--wc, #fff); background-color: transparent; box-shadow: inset 0 0 0 1px rgba(192, 194, 198, 0); }
.sk-word.is-hot { box-shadow: inset 0 0 0 1px #92FF45, 0 0 12px rgba(146, 255, 69, .45); }
.sk-word.is-gone { opacity: 0; }
/* Reference look: blocks settle in once when they come on screen (JS adds .pop, then .is-in) */
.pop { opacity: 0; translate: 0 26px; transition: opacity .6s var(--ease), translate .6s var(--ease); transition-delay: calc(var(--pi, 0) * 90ms); }
.pop.sec-label, .pop.tier { translate: 0 10px; }
.pop.is-in { opacity: 1; translate: none; }
/* Reference look (default): the words themselves are the windows — no overlay, so they
   can't lag behind fast iOS scrolling. Closed: hairline frame + faint fill, text hidden
   (except the .sk-pv part); open: frame flashes green, text fades in, frame fades. */
.sk-ref .w {
  border-radius: 3px; color: transparent;
  background-color: rgba(192, 194, 198, .10);
  outline: 1px solid rgba(192, 194, 198, .18); outline-offset: -1px;   /* outline, not box-shadow: much cheaper for Safari to repaint */
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: color .55s var(--ease), background-color .55s var(--ease), outline-color .55s var(--ease);
  transition-delay: calc(var(--i, 0) * 34ms);
}
.sk-ref .w.is-open { color: inherit; background-color: transparent; outline-color: rgba(192, 194, 198, 0); }
.sk-ref .w.is-hot { outline-color: #92FF45; }
.sk-ref .w .sk-pv { color: rgba(192, 194, 198, .42); transition: color .55s var(--ease); transition-delay: inherit; }
.sk-ref .w.is-open .sk-pv { color: inherit; }
/* the part of a closed window that shows through (first letters / a whole word, dimly) */
.sk-word .sk-pv { color: rgba(192, 194, 198, .42); transition: color .55s var(--ease); transition-delay: inherit; }
.sk-word.is-open .sk-pv { color: inherit; }

/* ---- Experimental ?fx=repair: «the page is loading» below the line ----
   grey bars fill up left → right as they near the line (JS --fill 0 → 1), a light
   sweep runs over them in a wave, block plates show placeholder lines; at the line
   a bar vanishes at once so the text above is clean. */
@keyframes fxSweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.fx-repair .sk-word { overflow: hidden; transition: none; background: rgba(192, 194, 198, .07); box-shadow: inset 0 0 0 1px rgba(192, 194, 198, .10); }
.fx-repair .sk-word.is-hot { box-shadow: inset 0 0 0 1px rgba(192, 194, 198, .10); }
.fx-repair .sk-word::before, .fx-repair .sk-plate::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: calc(var(--fill, 0) * 100%);
  background: rgba(192, 194, 198, .13);
  transition: width .25s linear;
}
.fx-repair .sk-word::after, .fx-repair .sk-plate::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, .09) 50%, transparent 75%);
  animation: fxSweep 1.8s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 90ms);
}
.fx-repair .sk-plate {
  overflow: hidden;
  background:
    linear-gradient(rgba(192, 194, 198, .10), rgba(192, 194, 198, .10)) 7% 22% / 38% 9px no-repeat,
    linear-gradient(rgba(192, 194, 198, .07), rgba(192, 194, 198, .07)) 7% 42% / 76% 7px no-repeat,
    linear-gradient(rgba(192, 194, 198, .07), rgba(192, 194, 198, .07)) 7% 54% / 62% 7px no-repeat,
    linear-gradient(rgba(192, 194, 198, .07), rgba(192, 194, 198, .07)) 7% 66% / 70% 7px no-repeat,
    rgba(13, 22, 36, .8);
}
.fx-repair .sk-plate.is-gone { transition-duration: 0s; }

/* shared by every ?fx variant: a bar vanishes at once at the line (text above is clean) */
[class*="fx-"] .sk-word, [class*="fx-"] .sk-plate.is-gone { transition: none; }

/* ---- ?fx=blueprint: the page below the line is a drawing ----
   dashed outlines for words and blocks, crossed boxes like image placeholders, and a dot
   grid on the curtain that drifts up towards the line. Outlines get brighter near it. */
@keyframes bpDrift { to { background-position: 0 -24px; } }
@keyframes bpBreath { 50% { opacity: .55; } }
.fx-blueprint .curtain {
  background-image: radial-gradient(rgba(192, 194, 198, .16) 1px, transparent 1.4px);
  background-size: 24px 24px; animation: bpDrift 3s linear infinite;
}
.fx-blueprint .sk-word {
  background: none; box-shadow: none; border-radius: 2px;
  border: 1px dashed rgba(192, 194, 198, calc(.22 + .45 * var(--fill, 0)));
  animation: bpBreath 2.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 160ms);
}
.fx-blueprint .sk-plate {
  border: 1px dashed rgba(192, 194, 198, calc(.25 + .45 * var(--fill, 0)));
  background:
    linear-gradient(to top right, transparent calc(50% - .6px), rgba(192, 194, 198, .16) 50%, transparent calc(50% + .6px)),
    linear-gradient(to bottom right, transparent calc(50% - .6px), rgba(192, 194, 198, .16) 50%, transparent calc(50% + .6px)),
    rgba(5, 10, 19, .6);
}

/* ---- ?fx=pixels: a grey mosaic that sharpens towards the line ----
   far below the line the pixels are coarse (16px), next to it fine (3px), and they
   twinkle; at the line the real text takes over. */
@keyframes pxTwinkle { 25% { background-position: 50% 0; } 50% { background-position: 0 50%; } 75% { background-position: 50% 50%; } }
.fx-pixels .sk-word, .fx-pixels .sk-plate {
  --px: calc(3px + 13px * (1 - var(--fill, 0)));
  border: 0; box-shadow: none;
  background-color: rgba(192, 194, 198, .04);
  background-image:
    conic-gradient(rgba(192, 194, 198, .20) 25%, rgba(192, 194, 198, .07) 0 50%, rgba(192, 194, 198, .15) 0 75%, rgba(192, 194, 198, .02) 0),
    conic-gradient(from 90deg, rgba(192, 194, 198, .10) 25%, transparent 0 50%, rgba(192, 194, 198, .06) 0 75%, transparent 0);
  background-size: var(--px) var(--px), calc(var(--px) * 3) calc(var(--px) * 3);
  animation: pxTwinkle 1.1s steps(1) infinite; animation-delay: calc(var(--i, 0) * -170ms);
}
.fx-pixels .sk-word { border-radius: 1px; }

/* ---- ?fx=rain: a dim grey data stream under the line (canvas), grey word bars on top ---- */
.fx-rain-cv {
  position: fixed; left: 0; top: var(--line-y); width: 100%; z-index: 35; pointer-events: none;
  opacity: 0; transition: opacity .4s ease;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 90px); mask-image: linear-gradient(180deg, transparent, #000 90px);
}
html.fx-zone .fx-rain-cv { opacity: 1; }


/* =========================================================
   Sections
   ========================================================= */
.sec { padding-top: var(--sec); }
.sec--last { padding-bottom: var(--sec); }

.sec-head { display: grid; grid-template-columns: 1fr 1fr; gap: calc(20 * var(--u)); align-items: start; }
.sec-head--stack { grid-template-columns: minmax(0, calc(690 * var(--u))); gap: calc(40 * var(--u)); }
.sec-label {
  display: inline-flex; align-items: center; gap: 8px; width: fit-content;
  font-family: var(--ft); font-weight: 600; font-size: var(--fs-h3); line-height: 1.2; color: var(--gray);
}
.sec-label svg { width: 1.08em; height: 1.08em; flex: none; }
.sec-text { display: flex; flex-direction: column; gap: calc(20 * var(--u)); }
.sec-body { display: flex; flex-direction: column; gap: calc(40 * var(--u)); }

/* 2 · stakes quote */
.quote {
  padding: calc(40 * var(--u)); border: 1px solid var(--line); border-radius: calc(20 * var(--u)); background: var(--card);
  font-family: var(--f); font-weight: 600; font-size: var(--fs-h4); line-height: 1.2; color: var(--green);
}

/* =========================================================
   Cards (audit + patterns) — 335×314 in the frame
   ========================================================= */
.cards4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(20 * var(--u)); margin-top: calc(40 * var(--u)); }
.card {
  --ch: calc(314 * var(--u)); --ph: calc(160 * var(--u));
  position: relative; isolation: isolate;
  display: block; width: 100%; padding: 0; border: 0; border-radius: 12px;
  /* the card grows by however much the text panel needs, so the illustration above it
     stays as visible as in the design (JS sizeCards → --ph-fit = the row's tallest text) */
  height: calc(var(--ch) - var(--ph) + max(var(--ph), var(--ph-fit, 0px)));
  background: none; text-align: left; font: inherit; color: inherit; cursor: default;
  -webkit-tap-highlight-color: transparent;
}
.card__img { position: absolute; top: 0; right: 0; width: calc(250 * var(--u)); height: calc(250 * var(--u)); z-index: -1; object-fit: contain; transition: transform .6s var(--ease), filter .4s; }
/* Designer's spacing (2026-10-16): 16 top/left/right, 38 below the text. On hover the panel
   grows to the whole card in one smooth move — the title rides up with the panel's top edge,
   the text stays pinned to the bottom (margin-top: auto) as the bottom padding eases 38 → 16. */
.card__panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: max(var(--ph), var(--ph-fit, 0px));   /* level across the row (JS: the row's tallest text) */
  display: flex; flex-direction: column;
  padding: calc(16 * var(--u)) calc(16 * var(--u)) calc(38 * var(--u));
  border-radius: 12px;
  background: rgba(13, 22, 36, .2);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  transition: height .55s var(--ease), padding-bottom .55s var(--ease), background-color .35s ease;
}
.card__panel .h-card { margin-bottom: calc(20 * var(--u)); transition: color .3s; }
.card__text { margin-top: auto; font-size: var(--fs-t1); line-height: 1.2; color: var(--gray); transition: color .3s; }
.card__quote { display: block; margin-top: auto; font-family: var(--ft); font-style: italic; font-size: var(--fs-field); line-height: 1.2; color: var(--gray); }

/* audit card hover = design "AI answers" state */
@media (hover: hover) {
  .cards4 > article.card:hover .card__panel { height: 100%; padding-bottom: calc(16 * var(--u)); background: rgba(13, 22, 36, .8); }
  .cards4 > article.card:hover .h-card { color: var(--green); }
  .cards4 > article.card:hover .card__text { color: var(--white2); }
  .cards4 > article.card:hover .card__img { transform: scale(1.04) rotate(-2deg); }
}
.cards4 > article.card:focus-visible .card__panel { height: 100%; padding-bottom: calc(16 * var(--u)); background: rgba(13, 22, 36, .8); }
.cards4 > article.card:focus-visible .h-card { color: var(--green); }
/* touch "active" card: the panel stays at the bottom so the illustration stays visible */
.cards4 > article.card.is-active .h-card { color: var(--green); }
.cards4 > article.card.is-active .card__text { color: var(--white2); }
.cards4 > article.card.is-active .card__img { transform: scale(1.05) rotate(-2deg); }

/* Hover outline (client 2026-10-16, like the reference): the block's edge lights up
   white → green while the pointer is on it; on touch screens the «active» card gets it. */
.step, .stat, .faq__item, .doc, .quote, .after { position: relative; }
.card::after, .step::after, .stat::after, .faq__item::after, .doc::after, .quote::after, .after::after {
  content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1px;
  background: linear-gradient(105deg, #fff, #7BE132 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .35s ease; pointer-events: none;
}
@media (hover: hover) {
  .card:hover::after, .step:hover::after, .stat:hover::after, .faq__item:hover::after,
  .doc:hover::after, .quote:hover::after, .after:hover::after { opacity: 1; }
}
.card:focus-visible::after { opacity: 1; }
/* touch: the «active» card's edge flashes and fades on its own (client: it shouldn't stay on while scrolling) */
@keyframes edgeFlash { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }
.card.is-active::after, .step.is-active::after, .stat.is-active::after { animation: edgeFlash 1.1s ease-out both; }
.sk-ref .is-scanning::after { opacity: .85; }   /* scanned cards while the line runs over them */
/* below the line a card's pictures and big numbers are a grey skeleton until the line reaches them */
.sk-ref .card__img, .sk-ref .step__num, .sk-ref .stat__icon, .sk-ref .stat__num, .sk-ref .person__photo, .sk-ref .after__img {
  transition: filter .6s var(--ease), opacity .6s var(--ease), transform .6s var(--ease);
}
.sk-ref .is-below .card__img, .sk-ref .is-below .after__img, .sk-ref .is-below .person__photo { filter: grayscale(1) brightness(.55); opacity: .22; }
.sk-ref .is-below .step__num, .sk-ref .is-below .stat__num, .sk-ref .is-below .stat__icon { opacity: .14; }
.sk-ref .sec-label svg, .sk-ref .tabs__pill { transition: opacity .6s var(--ease), transform .45s var(--ease), width .45s var(--ease); }
.sk-ref .sec-label.is-below svg { opacity: .18; }
.sk-ref .tabs.is-below .tabs__pill { opacity: .12; }

/* pattern cards — hover (desktop) / tap (touch) reveals the detail */
.card--pattern { cursor: pointer; }
.card__back {
  position: absolute; inset: 0; z-index: 2;
  padding: calc(16 * var(--u)); border-radius: 12px;
  font-size: var(--fs-t1); line-height: 1.2; color: #fff;
  background: rgba(13, 22, 36, .8);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  opacity: 0; transform: translateY(12px);
  transition: opacity .35s ease, transform .5s var(--ease);
  pointer-events: none;
}
.card--pattern[aria-expanded="true"] .card__back { opacity: 1; transform: none; }
@media (hover: hover) {
  .card--pattern:hover .card__back { opacity: 1; transform: none; }
}
.only-touch { display: none; }
@media (hover: none) { .only-touch { display: inline; } .only-hover { display: none; } }

/* =========================================================
   4 · Index tiers (timeline fills with the scan line)
   ========================================================= */
.tiers {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--tier-gap); row-gap: calc(100 * var(--u));
  margin-top: calc(40 * var(--u)); padding-top: calc(129 * var(--u)); padding-bottom: 0;
}
.tiers__line {
  position: absolute; left: 50%; top: 0; bottom: calc(93 * var(--u)); width: 1px; transform: translateX(-50%);
  background: var(--line);
}
.tiers__fill {
  position: absolute; left: -1px; top: 0; width: 3px; height: 100%;
  transform-origin: 50% 0; transform: scaleY(var(--fill, 0));
  background: linear-gradient(180deg, var(--t1) 0%, var(--t2) 30%, var(--t3) 52%, var(--t4) 74%, var(--t5) 100%);
  background-size: 100% var(--fill-h, 1200px);
  border-radius: 3px;
  box-shadow: 0 0 10px rgba(255, 120, 60, .35);
}
.tier { position: relative; display: flex; flex-direction: column; gap: 8px; max-width: calc(674 * var(--u)); }
.tier:nth-child(even) { grid-column: 1; align-items: flex-end; text-align: right; justify-self: end; }
.tier:nth-child(odd)  { grid-column: 2; align-items: flex-start; }
.tier:nth-child(2) { grid-row: 1; } .tier:nth-child(3) { grid-row: 2; } .tier:nth-child(4) { grid-row: 3; }
.tier:nth-child(5) { grid-row: 4; } .tier:nth-child(6) { grid-row: 5; }
.tier__range { font-size: var(--fs-t1); line-height: 1.2; color: var(--line); transition: color .4s; }
.tier__name { font-family: var(--ft); font-weight: 600; font-size: var(--fs-h2); line-height: 1.2; color: var(--line); transition: color .4s, text-shadow .4s; }
.tier__text { margin-top: calc(12 * var(--u)); max-width: calc(480 * var(--u)); font-weight: 500; font-size: var(--fs-t4); line-height: 1.2; color: var(--line); transition: color .4s; }
.tier__dot {
  position: absolute; width: 13px; height: 13px; border-radius: 50%;
  /* centred on the tier name: range line + gap + half the name line */
  top: calc(var(--fs-t1) * 1.2 + 8px + var(--fs-h2) * .6 - 6.5px);
  background: var(--line); transition: background-color .4s, box-shadow .4s, transform .4s var(--ease);
}
.tier:nth-child(even) .tier__dot { right: calc(var(--tier-gap) / -2 - 6.5px); }
.tier:nth-child(odd) .tier__dot  { left: calc(var(--tier-gap) / -2 - 6.5px); }
.tier.is-on .tier__range { color: var(--gray); }
.tier.is-on .tier__name { color: var(--c); }
.tier.is-on .tier__text { color: #fff; }
.tier.is-on .tier__dot { background: var(--c); box-shadow: 0 0 0 4px rgba(5, 10, 19, 1), 0 0 16px var(--c); transform: scale(1.1); }

/* =========================================================
   5 · Dossier
   ========================================================= */
.dossier { display: flex; flex-direction: column; align-items: center; gap: calc(40 * var(--u)); margin-top: calc(40 * var(--u)); }
.tabs {
  position: relative; display: inline-flex; gap: 4px; padding: 8px;
  border: 1px solid var(--line); border-radius: 100px; background: var(--card);
}
.tabs__pill { position: absolute; top: 8px; left: 8px; height: calc(54 * var(--u)); width: calc(120 * var(--u)); border-radius: 100px; background: #fff; transition: transform .45s var(--ease), width .45s var(--ease); }
.tabs__btn {
  position: relative; z-index: 1; width: calc(120 * var(--u)); height: calc(54 * var(--u)); padding: 0 calc(24 * var(--u));
  border: 0; border-radius: 100px; background: none; cursor: pointer;
  font-weight: 500; font-size: var(--fs-btn); line-height: 1.2; color: var(--steel);
  transition: color .3s;
}
.tabs__btn[aria-selected="true"] { color: var(--bg); }
@media (hover: hover) { .tabs__btn:not([aria-selected="true"]):hover { color: #fff; } }

.doc {
  width: min(calc(926 * var(--u)), 100%); padding: calc(40 * var(--u) - 1px);   /* Figma stroke is inside the 40px padding */
  border: 1px solid var(--line); border-radius: calc(20 * var(--u));
  background: linear-gradient(164deg, rgba(13, 22, 36, 0) 25.3%, #162336 100.6%);   /* angle from the kit SVG handles */
}
.doc__panel { display: flex; flex-direction: column; gap: calc(40 * var(--u)); }
.doc__panel.is-active { animation: panelIn .5s var(--ease); }
@keyframes panelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.serp { display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
.serp__url { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--fs-desc); line-height: 1.25; color: var(--gray); }
.serp__url svg { width: 16px; height: 16px; color: var(--light); }
.serp__title { font-weight: 500; font-size: var(--fs-t4); line-height: 1.2; color: var(--blue); }
.serp--neg .serp__title { color: var(--red2); }
.serp__snip { font-size: var(--fs-t1); line-height: 1.2; color: var(--light); }
.redact { display: inline-block; vertical-align: middle; width: 60px; height: 16px; border: 1px solid var(--steel); border-radius: 4px; background: var(--card); }
.redact--lg { width: calc(90 * var(--u)); height: calc(24 * var(--u)); }
.serp__title .redact { margin: 0 4px; vertical-align: top; }   /* fills the 24px line, does not stretch it */
.flag {
  display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: 7px 12px;
  border: 1px solid var(--red2); border-radius: 100px; background: rgba(255, 48, 48, .1);
  font-size: var(--fs-desc); line-height: 1.25; color: var(--white2);
}
.flag .flag__dot { width: 8px; height: 8px; background: var(--red); box-shadow: 0 0 6px 2px rgba(255, 48, 48, .6); animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .35; } }

.doc__panel--fill { justify-content: space-between; min-height: calc(420 * var(--u)); }
.redact--sm { width: 60px; height: 16px; }
.redact--md { width: calc(90 * var(--u)); height: calc(24 * var(--u)); margin: 0 calc(4 * var(--u)); }
.chat { display: contents; }
.chat__msg { display: flex; flex-direction: column; gap: 8px; width: min(calc(451 * var(--u)), 100%); padding: 16px; border: 1px solid var(--steel); border-radius: 16px; font-size: var(--fs-t1); line-height: 1.2; }
.chat__msg--ask { width: max-content; min-width: min(calc(451 * var(--u)), 100%); max-width: 100%; background: var(--card); color: var(--light); }
.chat__msg--ans { align-self: flex-end; background: var(--steel); color: #fff; }
.chat__msg p { line-height: 1.5; }
.chat__msg--ans p { line-height: 1.2; }
.chat__tag { font-size: var(--fs-desc); line-height: 1.25; color: var(--gray); }
.chat__msg--ans .chat__tag { color: var(--light); }
.chat__note { width: 100%; text-align: center; font-size: var(--fs-t1); line-height: 1.2; color: var(--steel); }
.press { display: flex; flex-direction: column; gap: 12px; }
.press__head { font-weight: 500; font-size: var(--fs-big); line-height: 1.2; color: #fff; }
.press__sub { font-family: var(--ft); font-size: var(--fs-t3); line-height: 1.2; color: var(--gray); }
.press__quote { width: 100%; padding: 16px; border: 1px solid var(--steel); border-radius: 16px; background: var(--card); font-size: var(--fs-t1); line-height: 1.5; color: var(--light); }

/* =========================================================
   6 · Process steps — 453×314 in the frame
   ========================================================= */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(20 * var(--u)); margin-top: calc(40 * var(--u)); }
.step { position: relative; isolation: isolate; height: calc(314 * var(--u)); border-radius: 12px; overflow: hidden; }
.step__num {
  position: absolute; top: 0; right: 0; z-index: -1;
  width: calc(250 * var(--u)); height: calc(250 * var(--u)); display: flex; align-items: center; justify-content: center;
  font-family: var(--ft); font-weight: 600; font-size: calc(275 * var(--u)); line-height: 1; letter-spacing: -.02em;
  transition: transform .6s var(--ease);
}
.step__num span {
  color: #fff;
  background: var(--hot); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: #fff;
  transition: -webkit-text-fill-color .35s;
}
.step__panel {
  position: absolute; left: 0; right: 0; bottom: 0; min-height: calc(120 * var(--u));
  display: flex; flex-direction: column; justify-content: flex-start; gap: calc(20 * var(--u)); padding: calc(16 * var(--u));
  border: 1px solid transparent; border-radius: 12px;
  background: rgba(13, 22, 36, .2);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  transition: background-color .35s, border-color .35s;
}
.step__panel .card__text { margin-top: 0; }
@media (hover: hover) {
  .step:hover .step__num { transform: translateY(-6px); }
  .step:hover .step__num span { -webkit-text-fill-color: transparent; }
  .step:hover .step__panel { background: rgba(13, 22, 36, .8); border-color: var(--card); }
  .step:hover .card__text { color: var(--white2); }
}
.step:focus-visible .step__num span, .step.is-active .step__num span { -webkit-text-fill-color: transparent; }
.step.is-active .step__num { transform: translateY(-6px); }
.step.is-active .step__panel { background: rgba(13, 22, 36, .8); border-color: var(--card); }
.step.is-active .card__text { color: var(--white2); }

/* =========================================================
   7 · Team
   ========================================================= */
.person { display: flex; align-items: center; gap: calc(20 * var(--u)); }
.person__photo { width: calc(120 * var(--u)); height: calc(120 * var(--u)); border-radius: 50%; object-fit: cover; flex: none; background: var(--card); }
.person__name { display: flex; align-items: center; gap: 8px; margin-bottom: calc(12 * var(--u)); font-family: var(--ft); font-weight: 600; font-size: var(--fs-h3); line-height: 1.2; }
.person__name img { width: 20px; height: 20px; }
.person__role { font-weight: 500; font-size: var(--fs-t4); line-height: 1.2; color: var(--steel); }

/* =========================================================
   8 · Record — logos marquee + stats
   ========================================================= */
.logos { margin-top: calc(80 * var(--u)); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.logos__track { display: flex; align-items: center; width: max-content; animation: marquee 40s linear infinite; }
.logos__track li { flex: none; margin-right: calc(100 * var(--u)); }
.logos__track img { height: calc(71 * var(--u)); width: auto; transition: filter .25s, opacity .25s; }
.logos:hover .logos__track { animation-play-state: paused; }
@media (hover: hover) { .logos__track li:hover img { filter: brightness(4.2); } }
@keyframes marquee { to { transform: translateX(calc(-100% / var(--copies, 2))); } }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(12 * var(--u)); margin-top: calc(80 * var(--u)); }
.stat {
  display: flex; flex-direction: column; gap: calc(20 * var(--u)); min-height: calc(239 * var(--u)); padding: calc(20 * var(--u));
  border: 1px solid transparent; border-radius: 12px; background: var(--card-grad);
  transition: border-color .3s;
}
.stat__icon { width: calc(40 * var(--u)); height: calc(40 * var(--u)); object-fit: contain; transition: filter .3s; }
.stat__num {
  order: 2;
  font-family: var(--ft); font-weight: 600; font-size: var(--fs-h1); line-height: 1.1; letter-spacing: -.01em;
  color: #fff; background: var(--hot); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: #fff;
  font-variant-numeric: tabular-nums; transition: -webkit-text-fill-color .35s;
}
.stat__label { order: 3; margin-top: calc(-10 * var(--u)); font-size: var(--fs-t1); line-height: 1.2; color: var(--gray); transition: color .3s; }
@media (hover: hover) {
  .stat:hover { border-color: var(--card); }
  .stat:hover .stat__num { -webkit-text-fill-color: transparent; }
  .stat:hover .stat__label { color: #fff; }
  .stat:hover .stat__icon { filter: brightness(0) invert(1); } /* icon turns white on hover, as in the design */
}
.stat.is-active { border-color: var(--card); }
.stat.is-active .stat__num { -webkit-text-fill-color: transparent; }
.stat.is-active .stat__label { color: #fff; }
.stat.is-active .stat__icon { filter: brightness(0) invert(1); }

/* =========================================================
   10 · After the audit — 926 wide in the frame
   ========================================================= */
.after {
  width: min(calc(926 * var(--u)), 100%); margin-inline: auto; padding: calc(40 * var(--u));
  display: flex; flex-direction: column; gap: calc(40 * var(--u));
  border: 1px solid var(--line); border-radius: calc(20 * var(--u)); background: var(--card-grad);
}
.after__top { display: flex; justify-content: space-between; gap: calc(40 * var(--u)); }
.after__img { width: calc(350 * var(--u)); height: calc(350 * var(--u)); flex: none; animation: floaty 7s ease-in-out infinite; }
@keyframes floaty { 50% { transform: translateY(-10px) rotate(-1.5deg); } }
.after__text { display: flex; flex-direction: column; gap: calc(12 * var(--u)); max-width: calc(456 * var(--u)); }
.after__text .t-16 { color: var(--gray); }
.after__note { padding: calc(16 * var(--u)); border: 1px solid var(--steel); border-radius: calc(16 * var(--u)); background: var(--card); font-size: var(--fs-t1); line-height: 1.2; color: var(--light); text-align: center; }
/* Desktop: the whole block is sized from its body text (1em = Text 1), so the 1920 frame's proportions
   hold at every width — with the 1440 type set the text used to be relatively bigger and wrap more
   (designer, 2026-10-16). Numbers are the frame's px / 16. */
@media (min-width: 1200px) {
  .after { font-size: var(--fs-t1); width: min(57.875em, 100%); padding: 2.5em; gap: 2.5em; border-radius: 1.25em; }
  .after__top { gap: 2.5em; }
  .after__img { width: 21.875em; height: 21.875em; }
  .after__text { gap: .75em; max-width: 28.5em; }
  .after__text .t-12 { font-size: .75em; }
  .after__text .h-big { font-size: 2.5em; }
  .after__text .t-16 { font-size: 1em; }
  .after__note { padding: 1em; border-radius: 1em; font-size: 1em; }
}

/* =========================================================
   11 · FAQ
   ========================================================= */
.faq-head { display: flex; justify-content: space-between; align-items: flex-start; gap: calc(40 * var(--u)); }
.faq { display: flex; flex-direction: column; gap: calc(20 * var(--u)); margin-top: calc(40 * var(--u)); }
.faq__item { border-radius: calc(20 * var(--u)); background: rgba(13, 22, 36, .8); transition: background-color .35s; overflow: hidden; }
.faq__item[open] { background: rgba(13, 22, 36, .2); }
.faq__item summary {
  display: flex; align-items: center; gap: calc(20 * var(--u)); padding: calc(40 * var(--u));
  list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__q { flex: 1; font-weight: 600; font-size: var(--fs-h4); line-height: 1.2; color: #fff; }
.faq__icon { width: calc(40 * var(--u)); height: calc(40 * var(--u)); flex: none; color: var(--gray); transition: transform .5s var(--ease), color .3s; }
.faq__item[open] .faq__icon { transform: rotate(45deg) scale(.82); color: var(--red); }
.faq__item[open].is-closing .faq__icon { transform: none; color: var(--gray); }   /* turns back with the closing, not after it */
@media (hover: hover) {
  .faq__item:not([open]) summary:hover .faq__icon { transform: rotate(90deg); color: #fff; }
  .faq__item:not([open]):hover { background: rgba(22, 35, 54, .85); }
}
.faq__a { padding: 0 calc(40 * var(--u)) calc(40 * var(--u)); margin-top: calc(-20 * var(--u)); }
.faq__a p { font-family: var(--ft); font-size: var(--fs-t3); line-height: 1.2; color: var(--gray); }

/* =========================================================
   12 · Request access form — card 900 wide in the frame
   ========================================================= */
.request { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, calc(900 * var(--u))); gap: calc(40 * var(--u)); align-items: start; }
.request__label { position: relative; z-index: 2; }
.request__star {
  /* star-3d.webp: the star takes the middle 72% of the canvas width (margins for the 3D tilt),
     so the box is 935×1166 to keep the star 674 wide at the old centre */
  position: absolute; z-index: 0; left: calc(-205 * var(--u)); top: calc(var(--sec) - 132 * var(--u));
  width: calc(935 * var(--u)); max-width: none; height: auto; pointer-events: none;
  animation: starSpin 18s ease-in-out infinite;
  transform-origin: 50% 50%;
}
/* 3D star: same box as the image; replaces it from 1200px (the star tilts itself, no spin) */
.request__star--3d { display: none; aspect-ratio: 1163 / 1450; animation: none; }
@media (min-width: 1200px) {
  .request__star--3d { display: block; }
  img.request__star { display: none; }
}
@keyframes starSpin { 0%, 100% { transform: rotate(0) translateY(0); } 50% { transform: rotate(6deg) translateY(-14px); } }
.form-card {
  position: relative; z-index: 1;
  padding: calc(40 * var(--u)); border-radius: calc(20 * var(--u));
  background: linear-gradient(137.95deg, rgba(13, 22, 36, 0) -12.18%, #162336 94%);
  -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px);
}
.form { display: flex; flex-direction: column; gap: calc(40 * var(--u)); }
.form__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.form__title { font-family: var(--ft); font-weight: 600; font-size: var(--fs-h3); line-height: 1.2; color: #fff; }
.form__req { flex: none; font-size: var(--fs-t1); line-height: 1.2; color: var(--gray); }
.form__intro { font-weight: 500; font-size: var(--fs-t4); line-height: 1.2; color: var(--gray); }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(40 * var(--u)) calc(20 * var(--u)); }
.field--wide { grid-column: 1 / -1; }

.field { position: relative; display: block; padding-top: 0; }
.field__input {
  display: block; width: 100%; height: calc(var(--fs-field) * 1.2 + 16px + 1px); padding: 0 28px 16px 0;
  border: 0; border-bottom: 1px solid var(--light); border-radius: 0; background: none;
  font-family: var(--ft); font-style: italic; font-size: var(--fs-field); line-height: 1.2; color: #fff;
  text-align: left; outline: none;
  transition: border-color .25s;
}
.field__input:focus, .field__input[aria-expanded="true"] { border-bottom-color: #fff; }
.field__label {
  position: absolute; left: 0; top: 0;
  font-family: var(--ft); font-style: italic; font-size: var(--fs-field); line-height: 1.2; color: var(--gray);
  pointer-events: none; transform-origin: 0 0;
  transition: transform .3s var(--ease), color .3s;
}
.field__label--static { position: static; display: block; margin-bottom: 8px; padding: 0; }
input.field__input:focus + .field__label,
input.field__input:not(:placeholder-shown) + .field__label,
.field.has-value .field__label { transform: translateY(-20px) scale(.75); }
.field__ok { position: absolute; right: 0; top: 0; width: 19px; height: 19px; color: var(--green); opacity: 0; transform: scale(.6); transition: opacity .3s, transform .4s var(--ease); }
.field.is-valid .field__ok { opacity: 1; transform: none; }
.field__err { display: block; max-height: 0; overflow: hidden; margin-top: 0; font-size: var(--fs-desc); line-height: 1.25; color: var(--red); opacity: 0; transition: max-height .3s, opacity .3s, margin .3s; }
.is-invalid > .field__err { max-height: 30px; margin-top: 8px; opacity: 1; }
.field.is-invalid .field__input { border-bottom-color: var(--red); }
.field.is-invalid { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }

/* custom selects */
.select__btn { cursor: pointer; }
.select__value { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 1.2em; }
.select__chev { position: absolute; right: 12px; top: 4px; width: 12px; height: 12px; color: var(--gray); pointer-events: none; transition: transform .3s var(--ease); }
.field--select.is-open .select__chev { transform: rotate(180deg); }
.field--select .field__ok { display: none; }
.select__list {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 10;
  min-width: 200px; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 12px;
  background: rgba(13, 22, 36, .96);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: 0 20px 40px -20px #000;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s, transform .3s var(--ease), visibility 0s .3s;
}
.field--select.is-open .select__list { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .3s var(--ease); }
.select__list li {
  position: relative; padding: 10px 28px 8px 0; border-bottom: 1px solid var(--line);
  font-size: var(--fs-t1); line-height: 1.2; color: var(--light); cursor: pointer;
  transition: color .2s;
}
.select__list li:last-child { border-bottom: 0; }
.select__list li:hover, .select__list li.is-active { color: #fff; }
.select__list li[aria-selected="true"] { color: var(--green); }
.select__list li[aria-selected="true"]::after { content: ""; position: absolute; right: 2px; top: 13px; width: 10px; height: 6px; border-left: 1.5px solid var(--green); border-bottom: 1.5px solid var(--green); transform: rotate(-45deg); }

/* tags */
.tags-field__hint { margin-bottom: 16px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { position: relative; cursor: pointer; }
.tag input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tag span {
  display: inline-flex; align-items: center; height: 39px; padding: 0 calc(24 * var(--u));
  border: 1px solid var(--light); border-radius: 100px;
  font-size: var(--fs-desc); line-height: 1.25; color: var(--light);
  transition: background-color .2s, color .2s, border-color .2s, transform .15s;
}
.tag input:checked + span { background: #fff; border-color: #fff; color: var(--bg); }
.tag input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 2px; }
@media (hover: hover) { .tag:hover span { border-color: #fff; color: #fff; } .tag:hover input:checked + span { color: var(--bg); } }
.tag:active span { transform: scale(.96); }
.tags-field.is-invalid .tag span { border-color: rgba(255, 48, 48, .7); }

/* consent */
.check { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check__box { flex: none; width: 20px; height: 20px; border: 1.5px solid var(--light); border-radius: 6px; background: rgba(255, 255, 255, .04); display: grid; place-items: center; transition: background-color .2s, border-color .2s, box-shadow .2s; }
@media (hover: hover) { .check:hover .check__box { border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .08); } }
.check__box svg { width: 14px; height: 14px; color: var(--bg); opacity: 0; transform: scale(.5); transition: opacity .2s, transform .3s var(--ease); }
.check input:checked + .check__box { background: var(--green); border-color: var(--green); }
.check input:checked + .check__box svg { opacity: 1; transform: none; }
.check input:focus-visible + .check__box { outline: 2px solid var(--green); outline-offset: 2px; }
.check__text { font-size: var(--fs-t1); line-height: 1.2; color: var(--gray); }
.check.is-invalid .check__box { border-color: var(--red); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.btn--submit[aria-disabled="true"] { opacity: .2; }
.btn--submit[aria-disabled="true"]:hover { opacity: .35; }
.btn__spin { display: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .3); border-top-color: #fff; animation: spin .7s linear infinite; }
.btn.is-loading .btn__spin { display: inline-block; }
.btn.is-loading .btn__arrow { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.form__note { font-size: var(--fs-t1); line-height: 1.2; color: var(--gray); } /* client: was too dark */
.form__status { font-size: 14px; line-height: 18px; color: var(--red); min-height: 0; }

.success { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 40px 0; animation: panelIn .6s var(--ease); }
.success__icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--green); box-shadow: 0 0 30px -6px rgba(146, 255, 69, .6); }
.success__icon svg { width: 26px; height: 26px; color: var(--green); }

/* =========================================================
   Footer (green, revealed under the rounded page) — 669 high in the frame
   ========================================================= */
.footer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 0;
  height: calc(var(--footer-h) + var(--page-r)); /* extends under the page's rounded corners */
  background: var(--green);   /* Figma New Footer: plain #92FF45, no noise (checked 2026-10-16) */
  color: rgba(13, 22, 36, .8);
  overflow: hidden;
}
.footer__mark { position: absolute; left: 0; right: 0; bottom: calc(20px + 1.2 * var(--fs-t1)); height: min(12vw, 250px); display: flex; align-items: flex-end; } /* Figma: wordmark ends where the footer text line starts (39 px at 1920) */
.footer__drift { display: flex; width: max-content; height: 100%; animation: drift 36s linear infinite; }
.footer__drift img { height: 100%; width: auto; max-width: none; margin-right: 12vw; opacity: .05; }
@keyframes drift { to { transform: translateX(-50%); } }
.footer__bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px;
  padding: 0 20px 20px;
  font-size: var(--fs-t1); line-height: 1.2;
}
.footer__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.footer__copy { text-align: center; }
.footer__nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 20px; }
/* hidden while the page fully covers it: iOS Safari tints its toolbar from fixed
   elements touching the screen edge, and a covered green footer would still count */
.footer.is-away { visibility: hidden; }
.footer.is-away .footer__drift { animation-play-state: paused; }
.footer__nav a { position: relative; }
.footer__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .3s var(--ease); }
@media (hover: hover) { .footer__nav a:hover::after { transform: scaleX(1); transform-origin: left; } }

/* =========================================================
   TABLET ≤ 1199 — type from the 1440px text styles
   ========================================================= */
@media (max-width: 1199px) {
  :root {
    --u: 1px; --g: 32px; --sec: 140px; --wrap: 1400px; --tier-gap: 56px;
    --fs-h1: clamp(56px, 7vw, 80px); --fs-h2: 40px; --fs-big: 32px; --fs-h3: 24px; --fs-h4: 30px;
    --fs-t1: 14px; --fs-t2: 14px; --fs-t3: 16px; --fs-t4: 16px; --fs-btn: 16px; --fs-field: 14px;
  }

  .btn { height: 52px; padding: 0 22px; gap: 16px; }

  .hero { grid-template-columns: 1fr; gap: 56px; padding-top: 120px; }
  .hero__text { max-width: 720px; }
  .hero__visual { width: min(640px, 100%); justify-self: center; }

  .sec-head { grid-template-columns: 1fr; gap: 24px; }
  .sec-head > .sec-text, .sec-head > .sec-body { max-width: 760px; }
  .quote { padding: 32px; }

  .cards4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card__img { width: 230px; height: 230px; }

  .tiers { row-gap: 72px; padding-top: 80px; }
  .tiers__line { bottom: 80px; }

  .steps { gap: 16px; }
  .step { height: 280px; }
  .step__num { width: 190px; height: 210px; font-size: 200px; }

  .logos { margin-top: 64px; }
  .logos__track li { margin-right: 72px; }
  .logos__track img { height: 56px; }
  .stats { margin-top: 64px; }
  .stat { min-height: 200px; }

  .after__img { width: 260px; height: 260px; }

  .faq__item summary { padding: 32px; }
  .faq__a { padding: 0 32px 32px; margin-top: -16px; }
  .faq__icon { width: 32px; height: 32px; }

  .request { grid-template-columns: 1fr; gap: 32px; }
  .request__star { width: 583px; left: auto; right: -162px; top: calc(var(--sec) - 201px); opacity: .9; }
  .form-card { max-width: 900px; width: 100%; }

  .footer__bar { grid-template-columns: 1fr 1fr; row-gap: 8px; }
  .footer__copy { grid-column: 1 / -1; grid-row: 2; text-align: left; }
}

/* ≤1199 (as in the reference): the Respology Index is a small square card floating
   bottom-centre over the text, with the scan line running just above it. */
@media (max-width: 1199px) {
  /* line runs just above the index card, as in the reference */
  /* client: line a finger (~80px) higher than first built, so the empty skeleton zone under it is visible */
  :root { --below: 253px; --line-y: calc(100vh - var(--below)); }
  @supports (height: 1dvh) { :root { --line-y: calc(100dvh - var(--below) - env(safe-area-inset-bottom, 0px)); } }
  /* index card: centred in the space between the line and the bottom of the screen */
  .mini {
    left: 50%; right: auto; bottom: auto;
    top: calc(var(--line-y) + var(--below) / 2);
    width: 156px; padding: 12px 12px 14px; gap: 5px;
    border: 1px solid var(--line); border-radius: 16px;
    background: var(--card-grad), rgba(10, 16, 27, .7);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .8);
    transform: translate(-50%, -50%);
  }
  .mini.is-off { transform: translate(-50%, calc(-50% + 12px)); }
  .mini__cap { font-size: 13px; }
  .mini__gauge { width: 124px; margin-bottom: -5px; }
  .mini__num { font-size: 30px; }
  .mini__tier { font-size: 16px; margin-top: -2px; }
}

/* phones: less room under the line, the card fills it (client: bigger and centred) */
@media (max-width: 767px) {
  :root { --below: 205px; }
  .mini { width: 136px; padding: 10px 10px 12px; gap: 4px; border-radius: 15px; }
  .mini__cap { font-size: 11px; }
  .mini__gauge { width: 108px; margin-bottom: -4px; }
  .mini__num { font-size: 26px; }
  .mini__tier { font-size: 14px; margin-top: -2px; }
}

@media (max-width: 999px) {
  .steps { grid-template-columns: 1fr; }
  .step { height: 240px; }
  .step__num { width: 200px; height: 220px; font-size: 210px; }
  .step__panel { min-height: 0; }

  /* index timeline goes single-sided */
  .tiers { grid-template-columns: 1fr; row-gap: 56px; padding: 40px 0 0 48px; }
  .tiers__line { left: 6px; transform: none; }
  .tier, .tier:nth-child(even), .tier:nth-child(odd) { grid-column: 1; align-items: flex-start; text-align: left; justify-self: start; }
  .tier:nth-child(even) .tier__dot, .tier:nth-child(odd) .tier__dot { left: -48px; right: auto; }
}

/* =========================================================
   MOBILE ≤ 767 — type from the 375px text styles
   (H4 stays 20 instead of the set's 30: the set repeats the desktop
   value and 30px quotes/FAQ questions don't fit a 335px column)
   ========================================================= */
@media (max-width: 767px) {
  :root {
    --g: 20px; --sec: 100px; --footer-h: 200px; /* client: page stops higher, less green (was 360) */

    --fs-h1: 40px; --fs-h2: 24px; --fs-big: 20px; --fs-h3: 18px; --fs-h4: 20px;
    --fs-t1: 14px; --fs-t2: 14px; --fs-t3: 16px; --fs-t4: 16px; --fs-btn: 16px; --fs-field: 14px;
  }


  .quote { padding: 24px; border-radius: 16px; }
  .sec-body { gap: 32px; }

  .btn { height: 52px; padding: 0 22px; gap: 16px; }
  .btn--sm { height: 44px; padding: 0 16px; gap: 10px; font-size: 14px; }
  .btn--sm .btn__arrow { width: 18px; }

  .header { padding-top: 20px; gap: 12px; }
  .logo { gap: 4px; }
  .logo img { width: 132px; }
  .logo__tag { font-size: 12px; }

  .hero { padding-top: 56px; gap: 32px; }
  .hero__visual { order: -1; } /* client: on phones the gauge goes above the text and button */
  .sec--last { padding-bottom: var(--g); } /* client: gap under the form = side gap */
  .hero__meta { margin-bottom: 24px; }
  .hero__text .h-hero { margin-bottom: 16px; }
  .hero__lede { margin-bottom: 32px; }
  .hero__text .btn { width: 100%; }
  .frag { font-size: 10px; padding: 4px 9px; }
  .gauge__labels { display: none; }
  .gauge__ticks text { font-size: 22px; }
  .gauge__cap { font-size: 26px; }
  .frags { display: none; }   /* phones: no free corner around the gauge for the chips */

  .sec-head { gap: 20px; }
  .sec-text { gap: 16px; }

  .cards4 { grid-template-columns: 1fr; gap: 16px; margin-top: 32px; }
  .card { --ch: 300px; --ph: 150px; }
  .card__img { width: 230px; height: 230px; }

  .tiers { padding-left: 36px; row-gap: 44px; margin-top: 32px; }
  .tier__text { margin-top: 6px; }
  .tier:nth-child(even) .tier__dot, .tier:nth-child(odd) .tier__dot { left: -36px; }

  .dossier { gap: 24px; margin-top: 32px; }
  .tabs { width: 100%; }
  .tabs__btn { flex: 1; width: auto; padding: 0 8px; height: 46px; }
  .tabs__pill { height: 46px; }
  .doc { padding: 20px; border-radius: 16px; }
  .doc__panel { gap: 28px; }
  .doc__panel--fill { min-height: 0; }
  #panel-media { gap: 24px; }
  .redact--lg { width: 64px; height: 18px; }
  .redact--md { width: 64px; height: 18px; margin: 0 2px; }
  .doc__panel--fill { gap: 16px; }
  .chat__msg { width: 88%; }
  .chat__msg--ask { width: 88%; min-width: 0; }

  .steps { margin-top: 32px; gap: 16px; }
  .step { height: 220px; }
  .step__num { width: 170px; height: 190px; font-size: 180px; }

  .person { gap: 16px; }
  .person__photo { width: 88px; height: 88px; }
  .person__name { margin-bottom: 6px; }

  .logos { margin-top: 48px; }
  .logos__track { animation-duration: 28s; }
  .logos__track li { margin-right: 48px; }
  .logos__track img { height: 42px; }
  .stats { grid-template-columns: 1fr; margin-top: 48px; gap: 12px; }
  .stat { min-height: 0; gap: 12px; }
  .stat__label { margin-top: -6px; }

  .after { padding: 20px; gap: 24px; border-radius: 16px; }
  .after__top { flex-direction: column; align-items: center; gap: 8px; }
  .after__img { width: 200px; height: 200px; }
  .after__text { max-width: none; }
  .after__note { text-align: left; border-radius: 12px; }

  .faq-head { flex-direction: column; gap: 16px; }
  .faq { gap: 12px; margin-top: 32px; }
  .faq__item { border-radius: 16px; }
  .faq__item summary { padding: 20px; gap: 16px; }
  .faq__icon { width: 26px; height: 26px; }
  .faq__a { padding: 0 20px 20px; margin-top: -8px; }

  .request { gap: 24px; }
  .request__star { width: 361px; right: -121px; top: calc(var(--sec) - 118px); }
  .form-card { padding: 24px 20px; border-radius: 16px; background: linear-gradient(137.95deg, rgba(13, 22, 36, .55) -12.18%, #162336 94%); }
  .form { gap: 32px; }
  .form__head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .form__grid { grid-template-columns: 1fr; gap: 36px; }
  .tag span { padding: 0 18px; height: 36px; }
  .btn--submit { width: 100%; }

  .footer__mark { bottom: 44px; height: 34vw; } /* wordmark sits right behind the footer text */
  .footer__drift img { margin-right: 20vw; }
  .footer__bar { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 8px; padding: 0 16px 20px; font-size: 13px; }
  .footer__copy { grid-row: auto; text-align: center; }
  .footer__meta { justify-content: center; }
  .footer__nav { justify-content: center; }
  :root { --page-r: 32px; }
}

@media (max-width: 380px) {
  .btn--sm { padding: 0 12px; font-size: 13px; }
  .btn--sm .btn__arrow { display: none; }
}

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .scan, .frags, .hero__sweep { display: none; }
  .logos__track { animation: none; }
}

/* =========================================================
   Legal pages (privacy.html, terms.html)
   ========================================================= */
.legal { padding-top: calc(160 * var(--u)); padding-bottom: var(--sec); max-width: calc(900 * var(--u)); margin-left: max(var(--g), (100% - var(--wrap)) / 2); }
.legal__title { margin: calc(24 * var(--u)) 0 calc(40 * var(--u)); }
.legal__body { display: flex; flex-direction: column; gap: 16px; }
.legal__lead { font-family: var(--ft); font-size: var(--fs-t3); line-height: 1.3; color: var(--light); padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.legal__body h2 { margin-top: calc(32 * var(--u)); font-family: var(--ft); font-weight: 600; font-size: var(--fs-h3); line-height: 1.2; color: #fff; }
.legal__body p, .legal__body li { font-family: var(--ft); font-size: var(--fs-t3); line-height: 1.4; color: var(--gray); }
.legal__body ul { display: flex; flex-direction: column; gap: 10px; }
.legal__body li { position: relative; padding-left: 22px; }
.legal__body li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px rgba(146, 255, 69, .5); }
.legal__body a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.legal__back { display: inline-flex; align-items: center; gap: 10px; margin-top: calc(56 * var(--u)); font-size: var(--fs-btn); color: var(--gray); transition: color .2s; }
.legal__back svg { width: 22px; height: 10px; transform: rotate(180deg); transition: transform .3s var(--ease); }
@media (hover: hover) { .legal__back:hover { color: #fff; } .legal__back:hover svg { transform: rotate(180deg) translateX(5px); } }
.footer__nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1199px) { .legal { padding-top: 96px; margin-left: auto; } }
@media (max-width: 767px) { .legal { padding-top: 56px; } .legal__body li::before { width: 6px; height: 6px; } }