/* Funnel B · vpn.html (vploq VPN, test ad set) · phone first · plain CSS
   Rebuilt 09.10.2026 to the level of the vploq.com homepage (bundle.html / bundle.css): its hero technique (render in a
   window on phone, full-bleed on desktop), its world map (1:1), one phone style (--ph-*), the "who" block, the plan card
   and picker, FAQ, final render, pill and footer, plus its motion (line-by-line headings, renders settle 1.04 to 1) and
   its lime rules (lime = act, on, the route; muted lime for small labels; headings plain, two-tone only in the hero H1).
   Loads after site.css (tokens, type scale, buttons, header, pill base) and only adds what this page needs.
   PUBLISH: no rule depends on a class on <body> (build_publish.py keeps only the body's inner HTML).
   The hero, header, pill and token rules are repeated in the critical CSS in vpn.html: keep both in sync. */

/* Funnel Display, self-hosted (no Google Fonts). Variable font: one file per subset covers weights 400 to 700.
   Latin is preloaded in vpn.html; Latin Extended loads only if needed. */
@font-face { font-family: "Funnel Display"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("assets/fonts/funnel-display-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: "Funnel Display"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("assets/fonts/funnel-display-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* metric-matched fallback (Arial scaled to Funnel Display's width, measured 09.10.2026), so the swap to the web font
   does not rewrap the first screen (no layout shift while the font arrives) */
@font-face { font-family: "Funnel Display Fallback"; font-style: normal; font-weight: 400 500; src: local("Arial"), local("ArialMT");
  size-adjust: 104.5%; ascent-override: 95.7%; descent-override: 23.9%; line-gap-override: 0%; }
@font-face { font-family: "Funnel Display Fallback"; font-style: normal; font-weight: 600 700; src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 99.5%; ascent-override: 100.5%; descent-override: 25.1%; line-gap-override: 0%; }

/* ---------- tokens (as bundle.css) ---------- */
:root {
  --f-display: "Funnel Display", "Funnel Display Fallback", -apple-system, "Segoe UI", sans-serif;
  --strip-h: 0px; --r-lg: 20px; --r-sm: 12px; --hair: rgba(255, 255, 255, 0.12);
  --lime: #A4FF00; --lime-strong: #A4FF00; --lime-ink: #0E0E0E; --g1: #ADB2B7; --g2: #9A9FA4;   /* round 7: greys lifted for reading on black */
  --lime-soft: rgba(164, 255, 0, 0.78); --lime-dim: rgba(164, 255, 0, 0.3); --lime-ghost: rgba(164, 255, 0, 0.05);
  --ease-calm: cubic-bezier(0.2, 0.7, 0.25, 1);
  --t-micro: 14px;
  /* the app mockups use the system face (SF on iPhone, Segoe UI on Windows); no web font is loaded for them */
  --f-app: var(--f-display);   /* round 6: the real app is set in Funnel Display (confirmed 09.10.2026), not the system font */
  /* ONE phone for every mockup on the page (map, devices, picker; the hero render aside): one width per breakpoint, the
     same frame radius, bezel, shadow and status bar (9:41, island, system icons), open at the bottom where it fades out */
  --ph-w: 288px; --ph-r: 42px; --ph-pad: 6px; --ph-scr: 36px; --ph-bg: #050506;
  --ph-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13), 0 0 0 1px rgba(0, 0, 0, 0.6), 0 28px 60px -32px rgba(0, 0, 0, 0.9);
  /* one desktop grid for every two-column section: 5 + 6 columns, one gap, the same left edge (the container) */
  --gx: clamp(48px, 6vw, 86px);
}
@media (max-width: 767px) {
  :root { --ph-w: 248px; --ph-r: 36px; --ph-pad: 5px; --ph-scr: 31px; }
  .section { padding: 48px 0; }
  /* the floating pill (56px, 12px off the bottom) never covers a focused element or an opened FAQ answer */
  html { scroll-padding-bottom: calc(56px + 24px + env(safe-area-inset-bottom, 0px)); }
}
.nw { white-space: nowrap; }

/* the one phone: frame (.ph), screen (.ph__screen), open bottom that fades into the page (.ph--open), island (.ph-island) */
.ph { position: relative; width: var(--ph-w); max-width: 100%; padding: var(--ph-pad); border-radius: var(--ph-r); background: var(--ph-bg); box-shadow: var(--ph-shadow); }
.ph__screen { position: relative; overflow: hidden; border-radius: var(--ph-scr); background: #0C0C0C; }
.ph--open { padding-bottom: 0; border-radius: var(--ph-r) var(--ph-r) 0 0;
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 99%); mask-image: linear-gradient(180deg, #000 72%, transparent 99%); }
.ph--open .ph__screen { border-radius: var(--ph-scr) var(--ph-scr) 0 0; }
.ph-island { position: absolute; left: 34.5%; top: calc((var(--ph-w) - 2 * var(--ph-pad)) * 0.05); width: 31%; height: calc((var(--ph-w) - 2 * var(--ph-pad)) * 0.085); border-radius: 999px; background: #000; }

/* calmer reveals: 12px, 400ms (motion only when welcome; site.css keeps the reduced-motion fade) */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { transform: translateY(12px); transition: opacity 400ms var(--ease), transform 400ms var(--ease); transition-delay: var(--d, 0ms); }
  .js [data-reveal].is-in { transform: none; }
}

/* ---------- header: logo + one small CTA, solid once scrolled ---------- */
.fv-header .nav-pill { display: inline-flex; height: 44px; margin-left: auto; padding: 0 18px; }
.fv-header .logo { min-height: 44px; align-items: center; }
.fv-header.is-scrolled { background: rgba(10, 10, 12, 0.98); }

/* ---------- buttons: shop reactions (bundle.css) ---------- */
:focus-visible { outline-color: var(--lime); }
.btn:focus-visible, .nav-pill:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: var(--radius-pill); }
.btn--lime:hover { background: var(--lime); }
@media (hover: hover) and (pointer: fine) {
  .btn--lime:hover { box-shadow: 0 12px 30px -16px rgba(164, 255, 0, 0.5), 0 0 0 1px rgba(164, 255, 0, 0.12); }
  .btn--lime:active { box-shadow: none; }
  .fv-header .nav-pill:hover { background: var(--lime); color: var(--lime-ink); box-shadow: inset 0 0 0 1px var(--lime); }
}
@media (prefers-reduced-motion: no-preference) {
  .btn--lime { transition: transform 220ms var(--ease-ui), box-shadow 220ms var(--ease-ui), background-color 220ms var(--ease-ui); }
  .btn--lime::before { background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%); }
  .btn--lime:active { transform: translateY(0) scale(0.982); box-shadow: none; transition-duration: var(--t-press); }
}
@media (prefers-reduced-motion: reduce) { .btn--lime:active { opacity: 0.85; box-shadow: none; } }

/* section heads: .display-l for every section (site.css 36 to 72px), one plain colour */
.head { display: flex; flex-direction: column; gap: 16px; max-width: 820px; }
.display-l { color: var(--ink); }

/* ==========================================================================
   1 · hero (.fh) · the homepage hero technique (bundle.css "1 · hero", .oh), for the phone-only VPN render.
   Phone (390 x 844, all above the fold): headline, sub, the render in a window whose height is what is left of
   screen one, price, button, microline. Desktop (900px+): the render full-bleed behind (phone on the right),
   headline and sub left, a buy strip at the bottom. The H1 keeps two lines at every width (each line nowrap).
   ========================================================================== */
.fh { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column;
  padding-top: calc(var(--nav-h) + var(--ipbar-h, 0px) + var(--safe-top) + 12px); padding-bottom: 18px; }
.fh__text, .fh__buy { position: relative; z-index: 1; }
.fh__h { font-size: clamp(40px, 11.8vw, 64px); line-height: 0.96; letter-spacing: -0.045em; }
.fh__l { white-space: nowrap; }
.fh__mute { color: var(--g1); }
.fh__sub { margin-top: 14px; max-width: 34em; font-size: 17px; line-height: 1.5; color: var(--g1); }

/* the visual: a window onto the render (contained, the render's own aspect), soft left, right and bottom edges */
.fh__stage { position: relative; z-index: 0; flex: none; height: clamp(170px, calc(100vh - 500px - var(--ipbar-h, 0px)), 440px); margin: 6px 0 -4px; }
@supports (height: 100svh) { .fh__stage { height: clamp(170px, calc(100svh - 500px - var(--ipbar-h, 0px)), 440px); } }
.fh__media { display: block; position: absolute; top: 0; bottom: 0; left: 50%; width: auto; max-width: 100%; aspect-ratio: 1290 / 1180; overflow: hidden; transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 8%, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 8%, #000 80%, transparent 100%);
  mask-composite: intersect; }
.fh__media img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; transform: scale(1.06); transform-origin: 50% 50%; }   /* round 11: the Room 412 night render, the whole scene */

/* the buy strip: price, then the button with its one microline */
.fh__buy { display: grid; gap: 14px; margin-top: 16px; }
.fh-price { display: grid; gap: 2px; }
.fh-price__tag { font-size: var(--t-micro); font-weight: 500; color: var(--g1); }
.fh-price__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.fh-price__now { font-family: var(--f-display); font-size: 38px; font-weight: 500; line-height: 1.05; letter-spacing: -0.04em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fh-price__per { font-size: 16px; font-weight: 500; color: var(--g1); }
.fh__cta { display: grid; gap: 10px; }
.fh__btn { width: 100%; }
.fh__fine { text-align: center; font-size: var(--t-micro); line-height: 1.4; color: var(--g2); text-wrap: balance; }
.fh__fine-b { display: block; }
@media (min-width: 560px) and (max-width: 899px) { .fh__buy { max-width: 600px; } }

@media (min-width: 900px) {
  .fh { min-height: max(700px, 100vh); min-height: max(700px, 100svh);
    padding-top: calc(var(--nav-h) + var(--ipbar-h, 0px) + var(--safe-top) + clamp(24px, 9vh, 120px)); padding-bottom: clamp(28px, 4.5vh, 52px); }
  .fh__h { font-size: clamp(60px, 6.1vw, 104px); line-height: 0.95; }
  .fh__sub { margin-top: clamp(20px, 3vh, 30px); max-width: 23em; font-size: clamp(21px, 1.6vw, 24px); line-height: 1.42; }
  .fh__sub-b { display: block; margin-top: 0.4em; }   /* one sentence per idea: countries, then Wi-Fi */

  /* the render fills the section behind the text, anchored right (the phone sits in the right part of the frame) */
  .fh__stage { position: absolute; inset: 0; z-index: -1; height: auto; margin: 0; }
  .fh__media { inset: 0; left: 0; width: auto; max-width: none; aspect-ratio: auto; transform: none; -webkit-mask-image: none; mask-image: none; }
  .fh__media img { object-fit: cover; object-position: 100% 50%; transform: none; }
  .fh__stage::after { /* scrims, no colour: legible text on the left, a calm floor under the buy strip */
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
      linear-gradient(90deg, rgba(10, 10, 12, 0.92) 0%, rgba(10, 10, 12, 0.6) 30%, rgba(10, 10, 12, 0) 56%),
      linear-gradient(0deg, var(--bg) 0%, rgba(10, 10, 12, 0.75) 18%, rgba(10, 10, 12, 0) 40%),
      linear-gradient(180deg, rgba(10, 10, 12, 0.6) 0%, rgba(10, 10, 12, 0) 18%); }

  .fh__buy { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: auto; padding-top: clamp(24px, 3.4vh, 36px); min-height: calc(90px + clamp(24px, 3.4vh, 36px));
    background: linear-gradient(var(--hair), var(--hair)) var(--gutter) 0 / calc(100% - 2 * var(--gutter)) 1px no-repeat; }
  .fh-price { gap: 6px; }
  .fh-price__tag { font-size: 15px; }
  .fh-price__row { gap: 2px 14px; }
  .fh-price__now { font-size: clamp(46px, 3.8vw, 60px); }
  .fh-price__per { font-size: 18px; }
  .fh__cta { justify-items: end; gap: 12px; }
  .fh__btn { width: auto; height: 58px; padding: 0 40px; font-size: 18px; }
  .fh__fine { text-align: right; font-size: 14px; white-space: nowrap; color: var(--g1); }
  .fh__fine-b { display: inline; }
}
/* landscape tablet / small laptop: the render in a smaller window on the right with soft edges */
@media (min-width: 900px) and (max-width: 1199px) {
  .fh__media { inset: 12% 0 12% 38%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%), linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0%, #000 22%), linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
    mask-composite: intersect; }
  .fh__media img { object-position: 82% 50%; }
}
/* wide screens: the render moves 5vw right, so the headline keeps clear air before the phone */
@media (min-width: 1600px) {
  .fh__media img { transform: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%); mask-image: linear-gradient(90deg, transparent 0%, #000 22%); }
}

/* ==========================================================================
   2 · world map (.wm) · bundle.css "bundle · 3 · world map" + round 6 / 8 tweaks, 1:1
   ========================================================================== */
.wm__grid { display: grid; gap: 24px; }
.wm__text { min-width: 0; }
.wm__text .lead { margin-top: 16px; max-width: 26em; }
.wm__h { max-width: 15em; }
.wm__demo { display: grid; gap: 12px; min-width: 0; }
.wm-ico { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5px; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.wm-ico * { vector-effect: non-scaling-stroke; }
.wm-stage { position: relative; height: 470px; overflow: hidden; border-radius: var(--r-lg); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.wm-stage::after { /* soft cut where the phone leaves the frame */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28px; z-index: 4; pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 20, 23, 0), var(--card)); }
.wm-mapbox { position: absolute; left: 0; top: 30px; width: 100%; transition: transform 700ms var(--ease); }
.wm-map { display: block; width: 100%; height: auto; overflow: visible; }
.wm-land { fill: none; stroke: #36363C; stroke-width: 1.05; stroke-linecap: round; }
.wm-mk { fill: var(--g2); }
.wm-pin { opacity: 0; transition: opacity 300ms var(--ease); }
.wm-pin__ring { fill: var(--card); stroke: var(--lime); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.wm-pin__dot { fill: var(--lime); }
.wm-tag { position: absolute; left: 0; top: 0; transform: translate(-50%, calc(-100% - 12px));
  padding: 4px 10px; border-radius: var(--radius-pill); background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-strong);
  font-size: var(--t-micro); font-weight: 600; line-height: 1.3; white-space: nowrap; color: var(--ink);
  opacity: 0; transition: opacity 300ms var(--ease); }
.wm-line { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.wm-path { fill: none; stroke: var(--lime); stroke-width: 1.5px; stroke-linecap: round; opacity: 0; transition: opacity 200ms var(--ease); }
.wm-stage[data-state="on"] .wm-path { opacity: 1; transition: stroke-dashoffset 900ms var(--ease-calm), opacity 150ms var(--ease); }
.wm-stage[data-state="on"] .wm-pin,
.wm-stage[data-state="on"] .wm-tag { opacity: 1; transition-delay: 500ms; }
.js .wm-stage:not(.is-ready) .wm-line { visibility: hidden; }

/* the app: the real vploq VPN app at native size: status bar, a dark grid, the header (round flag, place, status) and one
   switch whose knob slides to lime when connected. The frame is the page's one phone style (--ph-*). */
.wm-phone { position: absolute; z-index: 3; left: 50%; top: calc(100% - 214px);
  width: var(--ph-w); height: calc(var(--ph-w) * 2.05); margin-left: calc(var(--ph-w) / -2); padding: var(--ph-pad);
  border-radius: var(--ph-r); background: var(--ph-bg); box-shadow: var(--ph-shadow), 0 0 0 10px var(--card); }
.wm-screen { position: relative; height: 100%; overflow: hidden; border-radius: var(--ph-scr);
  font-family: var(--f-app); color: #fff; text-align: left; user-select: none; -webkit-user-select: none;
  background:
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(255, 255, 255, 0.035) 39px 40px),
    repeating-linear-gradient(180deg, transparent 0 59px, rgba(255, 255, 255, 0.035) 59px 60px), #0C0C0C; }
.wm-sb { position: absolute; left: 0; right: 0; top: 0; height: 30px; }
.wm-sb { height: 40px; }
.wm-sb__t { position: absolute; left: 11%; top: 16px; font-size: 11px; font-weight: 600; line-height: 1; }
.wm-sb__sys { position: absolute; right: 6%; top: 17px; width: 40px; height: 9px; }
.wm-hd { position: absolute; left: 16px; right: 14px; top: 50px; display: flex; align-items: center; gap: 9px; }
.wm-hd__flag { width: 26px; height: 26px; flex: none; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); }
.wm-hd__flag svg { display: block; width: 100%; height: 100%; }
.wm-hd__t { flex: 1; min-width: 0; display: grid; }
.wm-hd__n { font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-status { margin-top: 1px; font-size: 11px; font-weight: 600; line-height: 1.3; color: #8D8D8D; white-space: nowrap; transition: color 300ms var(--ease); }
.wm-stage[data-state="on"] .wm-status { color: var(--lime); }
.wm-stage[data-state="busy"] .wm-status { color: var(--ink); }
.wm-power { position: absolute; left: 50%; top: 112px; width: 132px; height: 50px; margin-left: -66px; padding: 0; border: 0; border-radius: 25px;
  background: #101010; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.07); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.wm-power:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; border-radius: 25px; }
.wm-knob { position: absolute; left: 4px; top: 4px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #4A4A4A, #2A2A2A 80%);
  transition: transform 560ms var(--ease-calm), background-color 300ms var(--ease), box-shadow 400ms var(--ease); }
.wm-knob svg { width: 22px; height: 22px; fill: none; stroke: #D8D8D8; stroke-width: 2.2; stroke-linecap: round; transition: stroke 300ms var(--ease); }
.wm-stage[data-state="busy"] .wm-knob { transform: translateX(82px); background: #6F9A12; }
.wm-stage[data-state="on"] .wm-knob { transform: translateX(82px); background: var(--lime); box-shadow: 0 0 16px rgba(164, 255, 0, 0.45), 0 0 42px 6px rgba(164, 255, 0, 0.16); }
.wm-stage[data-state="busy"] .wm-knob svg, .wm-stage[data-state="on"] .wm-knob svg { stroke: #0D0D0D; }
.wm-stage[data-state="on"] .wm-pin { filter: drop-shadow(0 0 3px rgba(164, 255, 0, 0.75)) drop-shadow(0 0 10px rgba(164, 255, 0, 0.4)) drop-shadow(0 0 24px rgba(164, 255, 0, 0.22)); }
.wm-stage[data-state="on"] .wm-path { filter: drop-shadow(0 0 3px rgba(164, 255, 0, 0.35)); }
.wm-flag { width: 24px; height: 24px; flex: none; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1); }
.wm-flag svg { display: block; width: 100%; height: 100%; }

/* chips: hairline pills under the panel; the chosen one gets a muted lime ring (its label stays white) */
.wm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.wm-chip { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px 0 8px; border: 0; border-radius: var(--radius-pill);
  font-family: var(--f-text); font-size: var(--t-small); font-weight: 600; color: var(--g1); background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--line-strong);
  white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: box-shadow 200ms var(--ease-ui), color 200ms var(--ease-ui), transform 200ms var(--ease-ui); }
.wm-chip:hover { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--g2); }
.wm-chip[aria-pressed="true"] { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--lime-soft); }
@media (hover: hover) and (pointer: fine) { .wm-chip[aria-pressed="true"]:hover { box-shadow: inset 0 0 0 1.5px var(--lime); } }
.wm-chip:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) { .wm-chip:active { transform: scale(0.95); transition-duration: var(--t-press); } }
html:not(.js) .wm-chips { display: none; }
.wm-cap { display: flex; align-items: center; gap: 10px; font-size: var(--t-small); line-height: 1.4; color: var(--g1); }
.wm-cap .wm-ico { width: 18px; height: 18px; flex: none; color: var(--g2); }
/* phone: one row that scrolls sideways, bleeding to the screen edges (no page overflow) */
@media (max-width: 559px) {
  .wm-chips { flex-wrap: nowrap; overflow-x: auto; margin: 1px calc(-1 * var(--gutter)) 0; padding: 3px var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent); }
  .wm-chips::-webkit-scrollbar { display: none; }
  .wm-chip { flex: none; }
}
@media (max-width: 767px) { .wm-stage { height: 370px; } }
@media (min-width: 768px) {
  .wm-stage { height: 540px; }
  .wm-mapbox { top: 44px; }
  .wm-phone { top: calc(100% - 252px); }
  .wm-hd { left: 18px; top: 54px; }
  .wm-power { top: 122px; width: 144px; height: 54px; margin-left: -72px; border-radius: 27px; }
  .wm-knob { width: 46px; height: 46px; }
  .wm-stage[data-state="busy"] .wm-knob, .wm-stage[data-state="on"] .wm-knob { transform: translateX(90px); }
}
/* the facts: a short list with small lime ticks. Phone: under the map. Desktop: under the lead. */
.wm__more { min-width: 0; }
@media (max-width: 999px) { .wm__more { display: none; } }   /* round 7: on phone the facts repeat the hero and the plan card; desktop keeps them in the left column */
.wm__facts { --f-pad: 10px; margin: 0; padding: 0; list-style: none; max-width: 30em; border-top: 1px solid var(--line); }
.wm__facts li { position: relative; padding: var(--f-pad) 0 var(--f-pad) 26px; border-bottom: 1px solid var(--line); font-size: var(--t-small); line-height: 1.4; color: var(--ink); }
.wm__facts li::before { content: ""; position: absolute; left: 1px; top: calc(var(--f-pad) + 0.7em - 5px); width: 10px; height: 5px;
  border-left: 1.5px solid var(--lime-soft); border-bottom: 1.5px solid var(--lime-soft); transform: rotate(-45deg); }
@media (min-width: 1000px) {
  .wm__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto 1fr; gap: 0 var(--gx); align-items: start; }
  .wm__text { grid-column: 1; grid-row: 1; padding-top: 8px; }
  .wm__text .lead { margin-top: 22px; }
  .wm__demo { grid-column: 2; grid-row: 1 / span 2; }
  .wm__more { grid-column: 1; grid-row: 2; align-self: end; margin-top: 40px; max-width: 26em; }   /* round 4: the facts end level with the map caption, no dead zone */
  .wm__facts { --f-pad: 14px; }
  .wm__facts li { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .wm-mapbox, .wm-path, .wm-pin, .wm-tag, .wm-knob, .wm-knob svg, .wm-status, .wm-chip { transition: none !important; }
}

/* ==========================================================================
   3 · public Wi-Fi, when it helps + devices (.wd) · round 3: "When it helps" and the Wi-Fi list merged into one section.
   Four moments as small dark app-style cards (.mo): the network (it stays "Open network") and, with vploq VPN on, a lime
   lock + "Encrypted" for the connection; then the Profile screen in the one phone (.ph).
   Phone: heading, lead, cards, phone. 640px+: cards 2 x 2. Desktop: heading + lead left, the phone right (on the container
   edge), the cards in one row of four below (1200px+).
   ========================================================================== */
.wd__grid { display: grid; gap: 32px; grid-template-areas: "text" "uses" "media"; }
.wd__text { grid-area: text; min-width: 0; }
.wd__text .lead { margin-top: 16px; }
.wd__text .display-l { max-width: 14em; }
.wd__uses { grid-area: uses; min-width: 0; }
.mo-h { font-family: var(--f-display); font-size: 17px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); }
.mo { display: grid; gap: 12px; margin-top: 16px; }
.mo__item { display: grid; align-content: start; gap: 6px; padding: 12px 12px 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #111114; }
/* the app row: as the app draws a network / place row (system face, dark grid tile, hairline) */
/* name on the first line (full width), "Open network" and the status on the second, so long names never truncate */
.mo__app { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 1px; margin-bottom: 10px; padding: 12px 14px;
  border-radius: 12px; font-family: var(--f-app); color: #fff;
  background: #0C0C0C; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }   /* round 4: no grid lines, one quiet inset */
.mo__ico, .mo__flag { grid-row: 1 / span 2; }
.mo__ico { width: 22px; height: 22px; justify-self: center; fill: none; stroke: #D8D8D8; stroke-width: 1.6; stroke-linecap: round; }
.mo__ico circle { fill: #D8D8D8; stroke: none; }
.mo__flag { width: 24px; height: 24px; justify-self: center; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); }
.mo__flag svg { display: block; width: 100%; height: 100%; }
.mo__net { display: contents; }
.mo__name { grid-column: 2 / 4; grid-row: 1; min-width: 0; font-size: 14px; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mo__sub { grid-column: 2; grid-row: 2; min-width: 0; font-size: 12px; font-weight: 500; line-height: 1.3; color: #8D8D8D; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mo__st { grid-column: 3; grid-row: 2; height: 18px; font-size: 12px; font-weight: 600; line-height: 18px; white-space: nowrap; }   /* fixed height: no shift when the status flips */
.mo__off { display: none; color: #8D8D8D; }
.mo__on { display: inline-flex; align-items: center; gap: 5px; color: var(--ink); }   /* round 4: white word, only the lock in lime */
.mo__lock { width: 14px; height: 14px; fill: none; stroke: var(--lime); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mo.is-armed .mo__item:not(.is-on) .mo__off { display: inline; }
.mo.is-armed .mo__item:not(.is-on) .mo__on { display: none; }
.mo.is-armed .mo__item.is-on .mo__on { animation: mo-in 420ms var(--ease) both; }
@keyframes mo-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.mo__t { margin: 0; padding: 0 6px; font-family: var(--f-display); font-size: 19px; font-weight: 500; line-height: 1.25; letter-spacing: -0.015em; color: var(--ink); }
.mo__p { padding: 0 6px; font-size: var(--t-small); line-height: 1.5; color: var(--g1); }
/* phone (round 4): one row that scrolls sideways with a peek of the next card, instead of about 1,100 px of stacked cards */
@media (max-width: 639px) {
  .mo { grid-auto-flow: column; grid-auto-columns: min(80%, 300px); gap: 12px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin: 16px calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter) 2px; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .mo::-webkit-scrollbar { display: none; }
  .mo__item { scroll-snap-align: start; }
  .js .mo [data-reveal] { transform: none; transition-property: opacity; }   /* round 5: fade only inside the row, so it never scrolls vertically */
  .mo:focus-visible { outline-offset: -2px; }
  /* a quiet position cue under the row: four hairlines, the current card's in lime (vpn.js 3b) */
  .mo-dots { display: flex; justify-content: center; gap: 6px; margin-top: 16px; }
  .mo-dots span { width: 18px; height: 2px; border-radius: 1px; background: var(--line-strong); transition: background-color 250ms var(--ease); }
  .mo-dots span.is-on { background: var(--lime); }
}
@media (min-width: 640px) { .mo-dots { display: none; } }
/* round 7: under 400 px the status gets its own line, so "Open network" never truncates */
@media (max-width: 399px) { .mo__sub { grid-column: 2 / 4; } .mo__st { grid-column: 2 / 4; grid-row: 3; margin-top: 2px; } }
@media (min-width: 640px) { .mo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }

/* the devices phone: the one phone, open at the bottom; the screen shows the top of the Profile tab */
.wd__media { grid-area: media; margin: 0; min-width: 0; display: flex; justify-content: center; }
/* round 6: the real Profile screen down to "Add Device"; the fade starts lower so that last row stays readable */
.wd-phone { -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, #000 82%, transparent 100%); }
.wd-phone__screen { aspect-ratio: 800 / 1060; }
.wd-phone__screen img { display: block; width: 100%; height: auto; max-width: none; transform-origin: 50% 0; }
@media (min-width: 1000px) {
  /* the text takes the room the phone leaves (the phone sits on the container's right edge, like the map, card and portraits) */
  .wd__grid { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "text media" "uses uses"; column-gap: var(--gx); row-gap: 72px; align-items: center; }
  .wd__text { max-width: 760px; }
  .wd__text .lead { margin-top: 22px; }
  .wd__media { justify-content: flex-end; }
  .wd-phone__screen { aspect-ratio: 800 / 1100; }
  .mo-h { font-size: 19px; }
  .mo { margin-top: 20px; gap: 20px; }
  .mo__t { font-size: 21px; }
}
@media (min-width: 1200px) { .mo { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ==========================================================================
   4 · who runs your VPN (.who) · round 8: the homepage "who" layout (bundle.css c): heading, lead, the founders as a
   list with 64 px round photos (one shared grade), the facts; beside it the one moving footage on the page, a real
   screen recording of the app connecting, in the page's one phone style. Phone: text, then the phone. Desktop: text left,
   the phone right (as the box render on the homepage).
   ========================================================================== */
.who__grid { display: grid; gap: 40px; }
.who__text { min-width: 0; }
.who__lead { margin-top: 16px; }
.who__people { margin: 28px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.who__person { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.who__person img { flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; background: #1a1a1d; filter: saturate(0.85); }
.who__person:first-child img { filter: brightness(0.88) contrast(1.04) saturate(0.85); }   /* Carsten's lighter shoot brought down to Igor's */
.who__name { font-family: var(--f-display); font-size: 18px; font-weight: 500; line-height: 1.25; color: var(--ink); }
.who__role { margin-top: 2px; font-size: var(--t-small); line-height: 1.45; color: var(--g1); }
.who__body { margin-top: 22px; }
.who__facts { margin: 0; }
.who__facts > div { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 44px; font-size: var(--t-small); line-height: 1.45; }
.who__facts dt { color: var(--g2); }
.who__facts dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.who__facts a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--g2); text-underline-offset: 3px;
  transition: color 200ms var(--ease), text-decoration-color 200ms var(--ease); }
@media (max-width: 359px) {
  .who__facts > div { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 6px 0; }
  .who__facts dt { font-size: var(--t-micro); }
}
/* the phone with the real recording: status bar on top (as the map phone), then the video; the bottom fades into the page */
.who__media { margin: 0; min-width: 0; display: grid; justify-items: center; gap: 14px; }
.who-phone { -webkit-mask-image: linear-gradient(180deg, #000 84%, transparent 100%); mask-image: linear-gradient(180deg, #000 84%, transparent 100%); }
.who-phone__screen { aspect-ratio: 800 / 900; background: #0C0C0C; }
.who-vid { display: block; width: 100%; height: auto; margin-top: 40px; background: #0C0C0C; }
.who__cap { font-size: var(--t-micro); line-height: 1.4; color: var(--g2); text-align: center; }
@media (min-width: 1000px) {
  .who__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--gx); align-items: center; }
  .who__media { justify-items: end; }
  .who-phone__screen { aspect-ratio: 800 / 1700; }   /* desktop: the whole app screen, so the phone matches the text column */
  .who-phone { -webkit-mask-image: linear-gradient(180deg, #000 90%, transparent 100%); mask-image: linear-gradient(180deg, #000 90%, transparent 100%); }
  .who__cap { justify-self: end; width: var(--ph-w); text-align: right; }
}
/* the social proof slot (hidden until real quotes exist) */
.proof { grid-column: 1 / -1; }
.proof__h { font-family: var(--f-display); font-size: 17px; font-weight: 500; color: var(--ink); }
.proof__note { margin-top: 10px; font-size: var(--t-micro); color: var(--g2); }

/* ==========================================================================
   5 · plan (.pl) · the price card (.pc), "After checkout" (.pl-st) and the country picker (.pk, 1:1 from vpn.html /
   bundle.css 6b). Desktop: heading and lead across, then steps + picker left and the card right (sticky). Phone: heading, card, steps.
   ========================================================================== */
.pl__grid { display: grid; gap: 28px; grid-template-areas: "head" "card" "steps"; }
.pl__head { grid-area: head; }
.pc { grid-area: card; }
.pl-steps { grid-area: steps; min-width: 0; }

.pc { position: relative; min-width: 0; padding: 22px 20px 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #111114; }
.pc::before { /* a lime hairline on the top edge that fades out both ways (bundle offer card) */
  content: ""; position: absolute; top: -1px; left: var(--r-lg); right: var(--r-lg); height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(164, 255, 0, 0), rgba(164, 255, 0, 0.6) 32%, rgba(164, 255, 0, 0.25) 62%, rgba(164, 255, 0, 0)); }
.pc__top { display: flex; align-items: center; gap: 14px; }
.pc__top { align-items: baseline; gap: 12px; }
/* round 4: no thumbnail (it read as a dark box): the homepage card head, a lime dot (lime dot = vploq VPN) + name + plan */
.pc__dot { flex: none; align-self: center; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(164, 255, 0, 0.12); }
.pc__id { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; min-width: 0; }
.pc__name { font-family: var(--f-display); font-size: 19px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.pc__tag { font-size: var(--t-micro); color: var(--lime-soft); }
.pc__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin-top: 20px; }
.pc__now { font-family: var(--f-display); font-size: clamp(44px, 4.4vw, 64px); font-weight: 500; line-height: 1; letter-spacing: -0.045em; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pc__per { font-size: var(--t-body); color: var(--g1); }
.pc__note { margin-top: 8px; font-size: var(--t-small); color: var(--g1); }
.pc__btn { width: 100%; height: 56px; margin-top: 20px; }
.pc__safe { margin-top: 12px; font-size: var(--t-micro); line-height: 1.5; color: var(--g2); }
.pc__k { margin-top: 26px; padding-bottom: 10px; border-bottom: 1px solid var(--line-strong);
  font-family: var(--f-display); font-size: 17px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); }
.pc__terms { margin: 0; }
.pc__terms > div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: var(--t-small); line-height: 1.45; }
.pc__terms > div:last-child { border-bottom: 0; padding-bottom: 0; }
.pc__terms dt { color: var(--g2); }
.pc__terms dd { margin: 0; color: var(--ink); }
.pc__mail { color: var(--ink); text-decoration: underline; text-decoration-color: var(--g2); text-underline-offset: 3px; transition: color 200ms var(--ease), text-decoration-color 200ms var(--ease); }
@media (max-width: 359px) {
  .pc__terms > div { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 9px 0; }
  .pc__terms dt { font-size: var(--t-micro); }
}
@media (min-width: 560px) { .pc { max-width: 520px; padding: 30px 30px 26px; } }

/* how to start: a three-step timeline (step 1 dot in muted lime, then ink) */
.pl-steps__h { font-family: var(--f-display); font-size: 17px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); }
.pl-st { margin: 16px 0 0; padding: 0; list-style: none; }
.pl-st__step { position: relative; padding: 0 0 18px 26px; }
.pl-st__step:last-child { padding-bottom: 0; }
.pl-st__step:not(:last-child)::before { content: ""; position: absolute; left: 4px; top: 13px; bottom: -4px; width: 1px; background: var(--line-strong); }
.pl-st__step:first-child::before { background: linear-gradient(180deg, rgba(164, 255, 0, 0.6), var(--line-strong)); }
.pl-st__step::after { content: ""; position: absolute; left: 0; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); }
.pl-st__step:first-child::after { background: var(--lime-soft); }
.pl-st__step h4 { margin: 0; font-family: var(--f-display); font-size: 19px; font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); }
.pl-st__step p { margin: 4px 0 0; max-width: 30em; font-size: var(--t-small); line-height: 1.45; color: var(--g1); }

@media (min-width: 1000px) {
  /* heading across, then steps + picker left and the card right, so both columns start and end together */
  .pl__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-areas: "head head" "steps card"; grid-template-rows: auto 1fr; gap: 0 var(--gx); align-items: start; }
  .pc { width: 100%; max-width: 480px; justify-self: end; padding: 36px 36px 30px; position: sticky; top: calc(var(--nav-h-slim, 60px) + 32px); }
  .pc__name { font-size: 22px; }
  .pl-steps { margin-top: 56px; max-width: 460px; }
  .pc { margin-top: 56px; }
  .pl-st { margin-top: 20px; }
  .pl-st__step { padding: 0 0 24px 30px; }
  .pl-st__step h4 { font-size: 21px; }
}
@media (min-width: 1400px) {   /* round 5: a fixed card track, so the steps take the width and no empty middle remains */
  .pl__grid { grid-template-columns: minmax(0, 1fr) 480px; column-gap: 120px; }
  .pl-steps { max-width: 640px; }
  .pl-st__step p { max-width: 34em; }
}

/* the country picker: the app's "Select" sheet on a 400px wide design screen inside the one phone (.ph.ph--open), scaled by
   --k = (phone width - 2 x bezel) / 400 and cropped --crop down. Round 3: the list starts right under the header (no empty
   top third). vpn.js 3d sets --y / --sx / --sy / --o per row; every row is a button (tap = select, as in the app). */
.pl-st__step--pick .pk-fig { margin: 22px 0 0; }
.pk-fig { --k: 0.595; --crop: 540px; flex: none; }
.pk-body { width: var(--ph-w); }
.pk-view { width: calc(400px * var(--k)); height: calc(var(--crop) * var(--k)); }
.pk { position: absolute; left: 0; top: 0; width: 400px; height: var(--crop); transform: scale(var(--k)); transform-origin: 0 0; overflow: hidden;
  font-family: var(--f-app); color: #fff; text-align: left; user-select: none; -webkit-user-select: none;
  background:
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(255, 255, 255, 0.035) 79px 80px),
    repeating-linear-gradient(180deg, transparent 0 119px, rgba(255, 255, 255, 0.035) 119px 120px), #0C0C0C; }
.pk-sb { position: absolute; left: 0; right: 0; top: 0; height: 60px; }
.pk-sb__t { position: absolute; left: 44px; top: 27px; font-size: 16px; font-weight: 600; }
.pk-sb__i { position: absolute; left: 138px; top: 20px; width: 124px; height: 34px; border-radius: 17px; background: #000; }
.pk-sb__sys { position: absolute; right: 22px; top: 30px; width: 76px; height: 16px; }
.pk-hd { position: absolute; left: 20px; right: 20px; top: 78px; height: 40px; display: flex; align-items: center; justify-content: space-between; }
.pk-hd__t { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.pk-hd__i { width: 26px; height: 26px; fill: none; stroke: #E6E6E6; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pk-band { position: absolute; left: 0; right: 0; top: 262px; height: 72px; border-top: 1px solid rgba(255, 255, 255, 0.09); border-bottom: 1px solid rgba(255, 255, 255, 0.09); pointer-events: none; }
.pk-mark { position: absolute; left: 25px; top: 291px; width: 14px; height: 14px; fill: #fff; pointer-events: none; }
.pk-wheel { position: absolute; left: 84px; right: 12px; top: 298px; height: 0; }
.pk-row { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 14px; height: 40px; margin: -20px 0 0; padding: 0 12px 0 0; border: 0; background: none;
  font: inherit; color: inherit; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transform-origin: 0 50%; transform: translateY(calc(var(--y, 0) * 1px)) scale(var(--sx, 1), var(--sy, 1)); opacity: var(--o, 1); }
.pk-row::before { /* a tall hit area (72 design px, 43 to 50 px on screen) across the whole row of the sheet */
  content: ""; position: absolute; left: -84px; right: -200px; top: -16px; bottom: -16px; }
.pk-row:focus-visible { outline: 3px solid var(--lime); outline-offset: 4px; border-radius: 8px; opacity: 1; }
.pk-flag { width: 32px; height: 32px; flex: none; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); }
.pk-flag svg { display: block; width: 100%; height: 100%; }
.pk-name { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
@media (min-width: 768px) { .pk-fig { --k: 0.69; } }

/* ==========================================================================
   6 · FAQ (.fq) · native details; a thin plus turns into a cross; the open item gets a lime cross and a faint lime wash
   ========================================================================== */
.fq__grid { display: grid; gap: 28px; }
.fq__mail { color: var(--ink); text-decoration: underline; text-decoration-color: var(--g2); text-underline-offset: 3px; transition: color 200ms var(--ease), text-decoration-color 200ms var(--ease); }
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 56px; padding: 14px 0;
  list-style: none; cursor: pointer; font-size: var(--t-body); font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink);
  -webkit-tap-highlight-color: transparent; transition: opacity 200ms var(--ease), color 200ms var(--ease); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::marker { content: ""; }
.faq__item summary:active { opacity: 0.7; transition-duration: 80ms; }
.faq__item summary:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; border-radius: 4px; }
.faq__ico { position: relative; flex: none; width: 16px; height: 16px; color: var(--g1); transition: transform 400ms var(--ease-ui, var(--ease)), color 200ms var(--ease); }
.faq__ico::before, .faq__ico::after { content: ""; position: absolute; left: 0; top: 50%; width: 16px; height: 1.5px; margin-top: -0.75px; background: currentColor; border-radius: 1px; }
.faq__ico::after { transform: rotate(90deg); }
/* the open item's lime wash fades out on the left and right instead of stopping at the edges */
.faq__item { position: relative; isolation: isolate; }
.faq__item::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(164, 255, 0, 0.06), rgba(164, 255, 0, 0) 90%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  transition: opacity 360ms var(--ease); }
.faq__item[open]::before { opacity: 1; }
.faq__item[open] .faq__ico { transform: rotate(45deg); color: var(--lime-soft); }
.faq__a p { padding: 0 44px 22px 0; font-size: var(--t-body); line-height: 1.6; color: var(--g1); max-width: 38em; }
@media (prefers-reduced-motion: no-preference) { .faq__item[open] .faq__a { animation: faq-in 360ms var(--ease) both; } }
@media (prefers-reduced-motion: reduce) { .faq__ico { transition: none; } }
@keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (min-width: 1000px) {
  .fq__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--gx); align-items: start; }
  .faq__item summary { min-height: 72px; padding: 18px 0; }
}

/* ==========================================================================
   7 · final CTA (.fn) · a bookend: the second render, the headline, the lime button. No card.
   Phone: the render (16:10, faded on every edge), then the text. Desktop: the render on the right, faded into the page.
   Round 3: the render itself is graded so every pixel outside a soft halo around the phone is exactly #0A0A0C (dithered,
   no 8-bit rings), so the masks below only soften; no frame, oval or rectangle can show on any screen.
   ========================================================================== */
.fn { padding-top: 0; }
.fn__card { position: relative; display: grid; }
.fn__img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; margin: 0 calc(-1 * var(--gutter));
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.5) 6%, #000 14%, #000 86%, rgba(0, 0, 0, 0.5) 94%, transparent 100%), linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.5) 5%, #000 12%, #000 82%, rgba(0, 0, 0, 0.5) 92%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.5) 6%, #000 14%, #000 86%, rgba(0, 0, 0, 0.5) 94%, transparent 100%), linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.5) 5%, #000 12%, #000 82%, rgba(0, 0, 0, 0.5) 92%, transparent 100%);
  mask-composite: intersect; }
.fn__img picture { display: block; width: 100%; height: 100%; }
.fn__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transform: scale(1.04); transform-origin: 50% 50%; }   /* the phone fills the frame */
.fn__txt { display: flex; flex-direction: column; gap: 16px; padding: 16px 0 0; }
.fn__btn { width: 100%; height: 56px; margin-top: 8px; box-shadow: 0 20px 44px -18px rgba(164, 255, 0, 0.5); }
.fn__fine { font-size: var(--t-micro); color: var(--g2); text-align: center; }
@media (min-width: 900px) {
  .fn__card { min-height: clamp(480px, 62vh, 640px); align-items: center; }
  .fn__img { position: absolute; inset: 0 calc(-1 * var(--gutter)) 0 34%; margin: 0; aspect-ratio: auto;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 28%, #000 92%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%); -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0%, #000 28%, #000 92%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%); mask-composite: intersect; }   /* round 12: the bright morning render, no oval */
  .fn__img img { transform: scale(1.06); }
  .fn__txt { position: relative; z-index: 1; max-width: 44%; padding: 64px 24px 64px 0; }
  .fn__btn { width: auto; align-self: flex-start; padding: 0 34px; }
  .fn__fine { text-align: left; }
}

/* ---------- floating pill (phone): an opaque 56px bar ---------- */
.pill { height: 56px; padding: 0 6px 0 20px; background: #121215; -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 12px 32px -16px rgba(0, 0, 0, 0.7); }
.pill__name { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
.pill__price { font-family: var(--f-display); font-size: var(--t-micro); color: var(--g1); }
@media (max-width: 374px) {   /* round 7: "+ VAT" always fits on small Android phones (320 to 374 px) */
  .pill { padding-left: 16px; gap: 8px; }
  .pill .btn--sm { padding: 0 12px; }
  .pill__price { font-size: 12.5px; }
}

/* ---------- footer: one quiet line, 44px tap targets ---------- */
.fv-footer { padding: 20px 0 calc(28px + env(safe-area-inset-bottom, 0px)); font-size: var(--t-small); }
.fv-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px; color: var(--g2); }
.fv-footer__links { display: flex; flex-wrap: wrap; gap: 0 22px; }
.fv-footer__links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--g1); transition: color 150ms var(--ease); }
.fv-footer__links a:active { opacity: 0.7; transition-duration: 80ms; }
@media (min-width: 900px) { .fv-footer { padding: 36px 0; } }

/* ---------- links: lime on hover (mouse only) ---------- */
@media (hover: hover) and (pointer: fine) {
  .fv-footer__links a:hover { color: var(--lime-soft); }
  .fq__mail:hover, .who__facts a:hover, .pc__mail:hover { color: var(--lime-soft); text-decoration-color: currentColor; }
  .faq__item summary:hover, .faq__item summary:hover .faq__ico { color: var(--lime-soft); }
}

/* ==========================================================================
   scroll progress, as on the homepage: a 2px lime bar on top. CSS scroll timeline (compositor only), no JS;
   off with reduced motion and where scroll timelines are not supported.
   ========================================================================== */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    body::before { content: ""; position: fixed; left: 0; right: 0; top: env(safe-area-inset-top, 0px); z-index: 60; height: 2px;
      background: var(--lime); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none;
      animation: fv-progress linear both; animation-timeline: scroll(root); }
  }
}
@keyframes fv-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ==========================================================================
   premium motion (bundle.css) · driven by vpn.js block 1 (one observer, .is-in once). Hidden states only under html.rv
   and only without reduced motion, so content always shows if the script fails.
   ========================================================================== */
/* headings, line by line: words slide up from a clip edge under their line, one line after the other (80 ms) */
.js [data-reveal][data-lines] { opacity: 1; transform: none; transition: none; animation: none; }
.lw { display: inline-block; -webkit-clip-path: inset(-0.4em -0.3em -0.18em -0.3em); clip-path: inset(-0.4em -0.3em -0.18em -0.3em); }
.lw__i { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .rv [data-lines] .lw__i { transform: translateY(135%);
    transition: transform 850ms var(--ease-calm); transition-delay: calc(var(--li, 0) * 80ms + var(--d, 0ms)); }
  .rv [data-lines].is-in .lw__i { transform: none; }
}
/* renders and app screens settle from 1.04 to 1 inside their frames (not the hero, not the portraits) */
@media (prefers-reduced-motion: no-preference) {
  .rv [data-settle] { scale: 1.04; transition: scale 1150ms var(--ease-calm); }
  .rv [data-settle].is-in { scale: 1; }
  .rv .ph__screen { -webkit-mask-image: -webkit-radial-gradient(#fff, #000); }   /* iOS: keeps the rounded clip while composited */
}

/* ---------- round 10 · emotion pass ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mo { margin-top: 0; }
.fh-new { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.5;
  color: var(--lime); box-shadow: inset 0 0 0 1px rgba(164, 255, 0, 0.45); vertical-align: 1px; }
.wd__media { flex-direction: column; align-items: center; gap: 14px; }
.wd__cap { max-width: 22em; font-size: var(--t-small); line-height: 1.45; color: var(--g1); text-align: center; }
.fn__fine a { color: var(--g1); text-decoration: underline; text-decoration-color: var(--g2); text-underline-offset: 3px; }
@media (min-width: 1000px) { .wd__media { align-items: flex-end; } .wd__cap { text-align: right; } }

/* ---------- round 12 ---------- */
.fv-header .nav-pill { background: rgba(10, 10, 12, 0.55); }
.fh__fine-a { color: var(--ink); }
@media (min-width: 900px) { .fh-new { font-size: 15px; padding: 2px 10px; } }   /* round 13: the offer reads on desktop */
.pc__now { letter-spacing: -0.03em; }   /* round 15: "Free" as the big figure */
@media (max-width: 359px) and (max-height: 700px) { .fh__stage { height: 170px; } }   /* round 15: 320 x 640 keeps the button in view */
/* round 16: the two live Whop plans in the price card, the yearly one first and marked */
.pc__plans { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.pc__plan { display: grid; grid-template-columns: auto 1fr; gap: 0 12px; align-items: baseline; padding: 12px 14px; border-radius: var(--r-sm, 10px); box-shadow: inset 0 0 0 1px var(--line); }
.pc__plan--best { box-shadow: inset 0 0 0 1px rgba(164, 255, 0, 0.45); }
.pc__plan-n { font-family: var(--f-display); font-size: 17px; font-weight: 500; color: var(--ink); }
.pc__plan-p { justify-self: end; font-size: var(--t-small); color: var(--ink); font-variant-numeric: tabular-nums; }
.pc__plan-s { grid-column: 1 / -1; font-size: var(--t-micro); color: var(--g1); }
.pc__plan--best .pc__plan-s { color: var(--lime-soft); }

/* ===== round 25: the free month as the big price; desktop text legible over the lamp ===== */
.fh-price__now--free { color: var(--lime); }
.fh-price__then { font-size: var(--t-small); font-weight: 500; line-height: 1.35; color: var(--g1); }
@media (min-width: 900px) {
  .fh-price__then { font-size: 16px; }
  .fh__sub { max-width: 21em; text-shadow: 0 1px 14px rgba(10, 10, 12, 0.75); }
  .fh__h { text-shadow: 0 2px 24px rgba(10, 10, 12, 0.5); }
  .fh__stage::after { background:
      linear-gradient(90deg, rgba(10, 10, 12, 0.94) 0%, rgba(10, 10, 12, 0.82) 34%, rgba(10, 10, 12, 0.35) 52%, rgba(10, 10, 12, 0) 64%),
      linear-gradient(0deg, var(--bg) 0%, rgba(10, 10, 12, 0.75) 18%, rgba(10, 10, 12, 0) 40%),
      linear-gradient(180deg, rgba(10, 10, 12, 0.6) 0%, rgba(10, 10, 12, 0) 18%); }
}

/* ===== round 26: hero points + the risk numbers ===== */
.fh-pts { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.fh-pts li { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 9px; border-radius: 999px; font-size: 13px; font-weight: 500; line-height: 1;
  color: var(--ink); background: rgba(10, 10, 12, 0.55); box-shadow: inset 0 0 0 1px var(--line-strong); white-space: nowrap; }
.fh-pts li::before { content: ""; width: 8px; height: 5px; margin-top: -3px; border: solid var(--lime); border-width: 0 0 1.6px 1.6px; transform: rotate(-45deg); }
.fh-pts .pt-l { display: none; }
@media (max-width: 374px) { .fh-pts li { padding: 0 8px 0 7px; gap: 5px; font-size: 12px; } }
@media (min-width: 900px) {
  .fh-pts { gap: 8px; margin-top: 18px; max-width: 34em; }
  .fh-pts li { height: 34px; padding: 0 14px 0 12px; font-size: 15px; gap: 8px; }
  .fh-pts li::before { width: 10px; height: 6px; }
  .fh-pts .pt-l { display: inline; }
  .fh-pts .pt-s { display: none; }
}
.rk__grid { display: grid; gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }
.rk__card { display: grid; align-content: start; gap: 10px; padding: 24px 22px 26px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #111114; }
.rk__n { font-family: var(--f-display); font-size: 56px; font-weight: 500; line-height: 1; letter-spacing: -0.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.rk__t { font-size: var(--t-body, 17px); line-height: 1.45; color: var(--g1); }
.rk__src { margin: 14px 0 0; font-size: var(--t-micro); color: var(--g2); }
.rk__out { margin: 28px 0 0; font-size: 19px; line-height: 1.45; color: var(--g1); }
.rk__out strong { color: var(--ink); font-weight: 600; }
@media (min-width: 760px) { .rk__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1000px) { .rk__n { font-size: 80px; } .rk__card { padding: 32px 28px 34px; } .rk__out { font-size: 22px; } }

/* ===== round 27: status line, what the Wi-Fi sees, protection grid ===== */
.fh-status { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 12px; padding: 6px 12px 6px 10px; border-radius: 999px;
  font-size: 13px; font-weight: 500; line-height: 1.2; color: var(--g1); background: rgba(255, 77, 77, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 77, 77, 0.45); }
.fh-status strong { color: #FF5A52; font-weight: 700; }
.fh-status__dot { width: 8px; height: 8px; border-radius: 50%; background: #FF5A52; box-shadow: 0 0 0 4px rgba(255, 90, 82, 0.18); }
@media (prefers-reduced-motion: no-preference) { .fh-status__dot { animation: st-pulse 1.6s ease-in-out infinite; } }
@keyframes st-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(255, 90, 82, 0.25); } 50% { box-shadow: 0 0 0 7px rgba(255, 90, 82, 0); } }
.fh-status__ip { color: var(--ink); font-variant-numeric: tabular-nums; }
@media (min-width: 900px) { .fh-status { margin-bottom: 18px; padding: 8px 16px 8px 12px; font-size: 15px; } }

.sn { margin: 32px 0 0; padding: 18px; border-radius: var(--r-lg); background: #0C0C0E; box-shadow: inset 0 0 0 1px var(--line); font-family: var(--f-display); }
.sn__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sn__net { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink); }
.sn__net svg { width: 20px; height: 20px; fill: none; stroke: #D8D8D8; stroke-width: 1.6; stroke-linecap: round; }
.sn__net svg circle { fill: #D8D8D8; stroke: none; }
.sn__sw { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; font: 600 14px/1 var(--f-display); cursor: pointer;
  color: var(--ink); background: rgba(255, 90, 82, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 90, 82, 0.5); transition: background-color 300ms var(--ease), box-shadow 300ms var(--ease); }
.sn__sw-v { color: #FF5A52; }
.sn[data-state="on"] .sn__sw { background: rgba(164, 255, 0, 0.1); box-shadow: inset 0 0 0 1px rgba(164, 255, 0, 0.5); }
.sn[data-state="on"] .sn__sw-v { color: var(--lime); }
.sn__k { margin: 18px 0 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--g2); }
.sn__list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sn__list li { position: relative; display: grid; height: 40px; align-items: center; padding: 0 12px; border-radius: 10px; background: #141417; overflow: hidden;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 14px; }
.sn__a, .sn__b { grid-area: 1 / 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 350ms var(--ease), transform 350ms var(--ease); }
.sn__a { color: #FF8A84; }
.sn__b { color: var(--lime); opacity: 0; transform: translateY(6px); letter-spacing: 0.06em; }
.sn[data-state="on"] .sn__a { opacity: 0; transform: translateY(-6px); }
.sn[data-state="on"] .sn__b { opacity: 1; transform: none; }
.sn__list li:nth-child(2) .sn__a, .sn__list li:nth-child(2) .sn__b { transition-delay: 80ms; }
.sn__list li:nth-child(3) .sn__a, .sn__list li:nth-child(3) .sn__b { transition-delay: 160ms; }
.sn__list li:nth-child(4) .sn__a, .sn__list li:nth-child(4) .sn__b { transition-delay: 240ms; }
.sn__note { margin: 14px 0 0; font-family: var(--f-body, inherit); font-size: 15px; font-weight: 500; line-height: 1.45; }
.sn__note--off { color: #FF8A84; }
.sn__note--on { display: none; color: var(--lime-soft); }
.sn[data-state="on"] .sn__note--off { display: none; }
.sn[data-state="on"] .sn__note--on { display: block; }
@media (min-width: 760px) { .sn { padding: 24px 28px; } .sn__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.pg__grid { display: grid; gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }
.pg__t { display: grid; align-content: start; gap: 8px; padding: 22px 20px 24px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #111114; }
.pg__i { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 6px; border-radius: 12px; background: rgba(164, 255, 0, 0.07); box-shadow: inset 0 0 0 1px rgba(164, 255, 0, 0.3); }
.pg__i svg { width: 22px; height: 22px; fill: none; stroke: var(--lime); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pg__h { margin: 0; font-family: var(--f-display); font-size: 20px; font-weight: 500; line-height: 1.2; letter-spacing: -0.015em; color: var(--ink); }
.pg__p { margin: 0; font-size: var(--t-small); line-height: 1.5; color: var(--g1); }
@media (min-width: 560px) { .pg__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .pg__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .pg__h { font-size: 22px; } }
.sn__sw { white-space: nowrap; flex: none; }
@media (max-width: 559px) { .sn { padding: 16px; } .sn__net { font-size: 13px; gap: 6px; } .sn__sw { padding: 0 12px; font-size: 13px; } }

/* ===== round 28: the IP bar ===== */
.ipbar { height: 32px; background: #120B0B; border-bottom: 1px solid rgba(255, 90, 82, 0.28); font-size: 12px; line-height: 1; color: var(--g1); }
.ipbar[hidden] { display: none; }
.ipbar__in { height: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; overflow: hidden; }
.ipbar b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.ipbar b.ipbar__bad { color: #FF5A52; }
.ipbar__sep { color: var(--g2); }
.ipbar__isp { display: none; }
.is-scrolled .ipbar { display: none; }
@media (min-width: 640px) { .ipbar__isp { display: inline; } .ipbar { font-size: 13px; } }

/* ===== round 28: the live scene ===== */
.rk--live { position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(70% 45% at 80% 18%, rgba(255, 58, 48, 0.2), transparent 70%), radial-gradient(60% 40% at 0% 100%, rgba(255, 58, 48, 0.12), transparent 70%), #0B0708; }
.rk--live::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.35;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 4px); }
.rk-live { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #FF5A52; }
.rk-live__dot { width: 9px; height: 9px; border-radius: 50%; background: #FF3A30; box-shadow: 0 0 12px rgba(255, 58, 48, 0.9); }
@media (prefers-reduced-motion: no-preference) { .rk-live__dot { animation: rk-blink 1.1s steps(2, start) infinite; } }
@keyframes rk-blink { to { visibility: hidden; } }
.rk__h { margin: 0; max-width: 13em; font-family: var(--f-display); font-size: clamp(38px, 10.5vw, 96px); font-weight: 500; line-height: 0.98; letter-spacing: -0.045em; color: var(--ink); text-wrap: balance; }
.rk__red { color: #FF5A52; }
.rk-story { display: grid; gap: 14px; margin: 32px 0 0; padding: 0; list-style: none; max-width: 40em; }
.rk-story li { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 12px; align-items: baseline; font-size: 19px; line-height: 1.4; color: var(--ink); }
.rk-story time { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 14px; color: #FF8A84; }
.tap { margin: 36px 0 0; border-radius: 18px; overflow: hidden; background: #070505; box-shadow: inset 0 0 0 1px rgba(255, 90, 82, 0.35), 0 30px 80px -30px rgba(255, 58, 48, 0.45);
  transition: box-shadow 600ms var(--ease); }
.tap[data-state="on"] { box-shadow: inset 0 0 0 1px rgba(164, 255, 0, 0.4), 0 30px 80px -30px rgba(164, 255, 0, 0.25); }
.tap__bar { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px; background: #120B0B; border-bottom: 1px solid rgba(255, 90, 82, 0.25); font-size: 12px; color: var(--g1); }
.tap[data-state="on"] .tap__bar { background: #0D1206; border-bottom-color: rgba(164, 255, 0, 0.25); }
.tap__dots { display: inline-flex; gap: 5px; } .tap__dots i { width: 9px; height: 9px; border-radius: 50%; background: #2C2C30; }
.tap__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.tap__rec { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; letter-spacing: 0.08em; color: #FF5A52; }
.tap__rec::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #FF3A30; }
.tap[data-state="on"] .tap__rec { color: var(--g2); } .tap[data-state="on"] .tap__rec::before { background: var(--g2); }
.tap__feed { display: grid; gap: 2px; margin: 0; padding: 14px; list-style: none; min-height: 236px; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 13px; }
.tap__feed li { display: grid; grid-template-columns: auto auto auto minmax(0, 1fr); gap: 8px; align-items: center; height: 36px; padding: 0 10px; border-radius: 8px;
  opacity: 0; transform: translateY(6px); transition: opacity 260ms var(--ease), transform 260ms var(--ease), background-color 400ms var(--ease); }
.tap__feed li.is-in { opacity: 1; transform: none; background: rgba(255, 58, 48, 0.06); }
.no-js .tap__feed li, .tap.is-static .tap__feed li { opacity: 1; transform: none; }
.tap__feed time { color: var(--g2); }
.tap__dev { color: var(--g1); }
.tap__arr { color: var(--g2); }
.tap__site { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #FF8A84; font-weight: 600; }
.tap[data-state="on"] .tap__feed li { background: rgba(164, 255, 0, 0.04); }
.tap[data-state="on"] .tap__site { color: var(--lime); letter-spacing: 0.04em; }
.tap__foot { display: grid; gap: 12px; padding: 14px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.tap__sw { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 20px; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 16px/1 var(--f-display); color: var(--ink); background: #1A1A1E; box-shadow: inset 0 0 0 1px var(--line-strong); }
.tap__knob { position: relative; width: 40px; height: 24px; border-radius: 999px; background: #2C2C30; transition: background-color 250ms var(--ease); }
.tap__knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #8A8F94; transition: transform 250ms var(--ease), background-color 250ms var(--ease); }
.tap[data-state="on"] .tap__knob { background: rgba(164, 255, 0, 0.3); }
.tap[data-state="on"] .tap__knob::after { transform: translateX(16px); background: var(--lime); }
.tap.is-ready .tap__sw { animation: tap-pulse 1.4s var(--ease) infinite; }
.tap[data-state="on"] .tap__sw { animation: none; }
@keyframes tap-pulse { 0%, 100% { box-shadow: inset 0 0 0 1px var(--line-strong), 0 0 0 0 rgba(164, 255, 0, 0.45); } 50% { box-shadow: inset 0 0 0 1px rgba(164, 255, 0, 0.6), 0 0 0 10px rgba(164, 255, 0, 0); } }
.tap__res { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.45; }
.tap__res-off { color: #FF8A84; }
.tap__res-on { display: none; color: var(--g1); } .tap__res-on b { color: var(--lime); }
.tap[data-state="on"] .tap__res-off { display: none; } .tap[data-state="on"] .tap__res-on { display: inline; }
.rk__grid--live .rk__card { background: rgba(20, 10, 10, 0.7); border-color: rgba(255, 90, 82, 0.2); }
.rk__grid--live .rk__n { color: #FF6A62; }
.rk__cta { display: grid; gap: 10px; justify-items: start; margin-top: 32px; }
.rk__btn { width: 100%; }
.rk__cta-n { margin: 0; font-size: var(--t-small); color: var(--g1); }
@media (min-width: 760px) {
  .tap__feed { font-size: 14px; padding: 18px; }
  .tap__foot { grid-template-columns: auto minmax(0, 1fr); align-items: center; padding: 16px 18px; }
  .rk__btn { width: auto; height: 58px; padding: 0 40px; font-size: 18px; }
}
@media (min-width: 1000px) {
  .rk-story li { grid-template-columns: 70px minmax(0, 1fr); font-size: 22px; }
  .rk-story time { font-size: 16px; }
  .tap { max-width: 900px; }
}
@media (max-width: 420px) { .tap__feed li { grid-template-columns: auto minmax(0, 1fr); } .tap__dev, .tap__arr { display: none; } }

/* ===== round 29: the scene calm (no red room), the window keeps its effect ===== */
.rk--calm { background: none; }
.rk--calm::before { display: none; }
.rk--calm .tap { box-shadow: inset 0 0 0 1px var(--line-strong), 0 30px 80px -40px rgba(0, 0, 0, 0.9); background: #0A0A0C; }
.rk--calm .tap[data-state="on"] { box-shadow: inset 0 0 0 1px rgba(164, 255, 0, 0.35), 0 30px 80px -40px rgba(164, 255, 0, 0.18); }
.rk--calm .tap__bar { background: #111114; border-bottom-color: var(--line); }
.rk--calm .tap__feed li.is-in { background: #111114; }
.rk--calm .rk__grid--live .rk__card { background: #111114; border-color: var(--line); }
.rk--calm .rk__grid--live .rk__n { color: var(--ink); }
.rk--calm .tap { margin-top: 28px; }

/* ===== round 29: feature cards with an app-style picture ===== */
.pg__t { padding: 0 0 22px; overflow: hidden; }
.pg__t .pg__h, .pg__t .pg__p { padding: 0 20px; }
.pg__vis { display: grid; place-items: center; height: 168px; margin-bottom: 10px; padding: 16px; overflow: hidden;
  background: radial-gradient(80% 70% at 50% 0%, rgba(164, 255, 0, 0.07), transparent 70%), #0C0C0E; border-bottom: 1px solid var(--line); }
.mk { width: 100%; max-width: 260px; font-family: var(--f-display); color: var(--ink); }
.mk-ico { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mk-ico--lime { stroke: var(--lime); }
.mk-enc { display: grid; gap: 8px; justify-items: center; }
.mk-line { width: 100%; padding: 9px 12px; border-radius: 10px; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 12px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: #17171B; }
.mk-line--plain { color: var(--g1); }
.mk-line--noise { color: var(--lime); letter-spacing: 0.06em; box-shadow: inset 0 0 0 1px rgba(164, 255, 0, 0.3); }
.mk-arrow { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(164, 255, 0, 0.12); }
.mk-arrow .mk-ico { width: 16px; height: 16px; stroke: var(--lime); }
.mk-list { display: grid; gap: 6px; }
.mk-row { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px; border-radius: 10px; background: #17171B; font-size: 13px; font-weight: 500; color: var(--g1); }
.mk-row.is-on { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(164, 255, 0, 0.4); }
.mk-row i { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 600; color: var(--lime); }
.mk-flag { width: 20px; height: 20px; flex: none; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); }
.mk-flag svg { display: block; width: 100%; height: 100%; }
.mk-stat { display: grid; gap: 4px; padding: 14px 16px; border-radius: 14px; background: #17171B; }
.mk-stat__k { font-size: 12px; font-weight: 500; color: var(--g1); }
.mk-stat__n { font-size: 34px; font-weight: 500; line-height: 1; letter-spacing: -0.03em; color: var(--lime); }
.mk-bars { display: flex; align-items: flex-end; gap: 5px; height: 34px; margin-top: 6px; }
.mk-bars i { flex: 1; height: var(--h); border-radius: 3px; background: rgba(164, 255, 0, 0.35); }
.mk-toast { display: grid; gap: 10px; }
.mk-url { padding: 9px 12px; border-radius: 999px; background: #17171B; font-size: 12px; color: var(--g2); text-decoration: line-through; text-align: center; }
.mk-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #17171B; box-shadow: inset 0 0 0 1px rgba(164, 255, 0, 0.3); }
.mk-card b, .mk-set b { display: block; font-size: 14px; font-weight: 600; }
.mk-card small, .mk-set small { display: block; margin-top: 2px; font-size: 11px; color: var(--g1); }
.mk-toggle { display: grid; gap: 8px; }
.mk-set { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #17171B; }
.mk-set--dim { opacity: 0.55; }
.mk-sw { position: relative; flex: none; width: 40px; height: 24px; border-radius: 999px; background: #2C2C30; }
.mk-sw i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #8A8F94; }
.mk-sw.is-on { background: rgba(164, 255, 0, 0.3); } .mk-sw.is-on i { left: 19px; background: var(--lime); }
.mk-dev { display: grid; gap: 14px; justify-items: center; }
.mk-devs { display: flex; gap: 10px; }
.mk-devs svg { width: 38px; height: 38px; padding: 7px; border-radius: 12px; background: #17171B; fill: none; stroke: var(--ink); stroke-width: 1.5; }
.mk-pill { padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--lime); box-shadow: inset 0 0 0 1px rgba(164, 255, 0, 0.4); }
.mk-knob { display: grid; gap: 12px; justify-items: center; }
.mk-track { position: relative; width: 150px; height: 64px; border-radius: 999px; background: #17171B; box-shadow: inset 0 0 0 1px var(--line-strong); }
.mk-dot { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 30px rgba(164, 255, 0, 0.45); }
.mk-dot svg { width: 24px; height: 24px; fill: none; stroke: #0A0A0C; stroke-width: 2.2; stroke-linecap: round; }
.mk-knob__t { font-size: 13px; font-weight: 600; color: var(--lime); }
.mk-mail { display: grid; gap: 8px; }
.mk-msg { max-width: 88%; padding: 9px 12px; border-radius: 14px; font-family: var(--f-body, inherit); font-size: 12px; line-height: 1.4; }
.mk-msg--in { justify-self: start; background: #17171B; color: var(--g1); border-bottom-left-radius: 4px; }
.mk-msg--out { justify-self: end; background: rgba(164, 255, 0, 0.12); color: var(--ink); border-bottom-right-radius: 4px; }
/* phone: one sideways row with snap, like the Wi-Fi moments */
@media (max-width: 559px) {
  .pg__grid { grid-auto-flow: column; grid-auto-columns: min(82%, 300px); grid-template-columns: none; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
    margin: 28px calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter) 4px; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .pg__grid::-webkit-scrollbar { display: none; }
  .pg__t { scroll-snap-align: start; }
  .js .pg__grid [data-reveal] { transform: none; transition-property: opacity; }
}
/* round 29: the example bar in the artifact viewer says so */
.ipbar.is-demo .ipbar__in::after { content: "Example"; margin-left: 6px; padding: 2px 6px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--g1); box-shadow: inset 0 0 0 1px var(--line-strong); }

/* ===== round 30: the IP bar bigger; the Room 208 card premium (no window chrome) ===== */
.ipbar { height: 40px; font-size: 14px; }
.ipbar__in { gap: 10px; }
.ipbar b.ipbar__bad { padding: 4px 10px; border-radius: 999px; background: rgba(255, 90, 82, 0.14); box-shadow: inset 0 0 0 1px rgba(255, 90, 82, 0.45); }
@media (min-width: 640px) { .ipbar { height: 46px; font-size: 15px; } .ipbar__in { gap: 14px; } }

.rk .tap { position: relative; isolation: isolate; max-width: 960px; margin-top: 32px; padding: 26px 28px 24px; border-radius: 28px; overflow: hidden;
  background: linear-gradient(180deg, #131316 0%, #0D0D10 100%); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 50px 120px -50px rgba(0, 0, 0, 0.95); }
.rk .tap::before, .rk .tap::after { content: ""; position: absolute; inset: -30% -10% auto 40%; height: 90%; z-index: -1; pointer-events: none; transition: opacity 700ms var(--ease); }
.rk .tap::before { background: radial-gradient(closest-side, rgba(255, 90, 82, 0.16), transparent); opacity: 1; }
.rk .tap::after { background: radial-gradient(closest-side, rgba(164, 255, 0, 0.14), transparent); opacity: 0; }
.rk .tap[data-state="on"]::before { opacity: 0; }
.rk .tap[data-state="on"]::after { opacity: 1; }
.rk .tap[data-state="on"] { box-shadow: 0 0 0 1px rgba(164, 255, 0, 0.18), 0 50px 120px -50px rgba(0, 0, 0, 0.95); }
.tap__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.tap__k { display: inline-flex; align-items: center; gap: 10px; min-width: 0; font-family: var(--f-display); font-size: 15px; font-weight: 500; color: var(--g1); }
.tap__k svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--g1); stroke-width: 1.6; stroke-linecap: round; }
.tap__k svg circle { fill: var(--g1); stroke: none; }
.tap__k span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tap__badge { display: inline-flex; align-items: center; gap: 8px; flex: none; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 600;
  color: #FF8A84; background: rgba(255, 90, 82, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 90, 82, 0.35); transition: color 400ms var(--ease), background-color 400ms var(--ease), box-shadow 400ms var(--ease); }
.tap__badge i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tap__badge-on { display: none; }
.tap[data-state="on"] .tap__badge { color: var(--lime); background: rgba(164, 255, 0, 0.08); box-shadow: inset 0 0 0 1px rgba(164, 255, 0, 0.35); }
.tap[data-state="on"] .tap__badge-off { display: none; } .tap[data-state="on"] .tap__badge-on { display: inline; }
.rk .tap__feed { gap: 0; padding: 0; min-height: 0; font-family: var(--f-display); font-size: 17px; }
.rk .tap__feed li { grid-template-columns: 64px 76px minmax(0, 1fr); gap: 12px; height: 56px; padding: 0; border-radius: 0; background: none !important; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.rk .tap__feed li:last-child { border-bottom: 0; }
.rk .tap__feed time { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 13px; color: var(--g2); }
.rk .tap__dev { font-size: 14px; color: var(--g2); }
.rk .tap__site { font-weight: 500; color: #FF8A84; letter-spacing: -0.005em; }
.rk .tap[data-state="on"] .tap__site { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 15px; font-weight: 600; color: var(--lime); letter-spacing: 0.06em; }
.rk .tap__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 18px; padding: 20px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.rk .tap__sw { min-height: 60px; padding: 0 24px 0 10px; gap: 14px; font-size: 17px; background: #1A1A1E; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.rk .tap__knob { width: 64px; height: 40px; }
.rk .tap__knob::after { top: 4px; left: 4px; width: 32px; height: 32px; }
.rk .tap[data-state="on"] .tap__knob::after { transform: translateX(24px); box-shadow: 0 0 18px rgba(164, 255, 0, 0.6); }
.rk .tap__res { flex: 1 1 220px; font-size: 17px; }
@media (max-width: 559px) {
  .rk .tap { padding: 20px 18px 18px; border-radius: 22px; }
  .tap__k { font-size: 13px; }
  .rk .tap__feed { font-size: 15px; }
  .rk .tap__feed li { grid-template-columns: 58px minmax(0, 1fr); height: 50px; }
  .rk .tap__dev { display: none; }
  .rk .tap[data-state="on"] .tap__site { font-size: 13px; }
  .rk .tap__sw { width: 100%; justify-content: flex-start; }
  .rk .tap__res { font-size: 15px; }
}
.rk .tap { max-width: none; }
/* round 30b: phone shows the short label */
.tk-s { display: none; }
@media (max-width: 559px) { .tap__k .tk-l { display: none; } .tap__k .tk-s { display: inline; } }

/* ===== round 31: the Room 208 card as a product panel ===== */
.rk .tap--v2 { display: grid; gap: 0; padding: 0; border-radius: 30px;
  background: linear-gradient(160deg, #16161A 0%, #0E0E11 55%, #0B0B0D 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 60px 140px -60px rgba(0, 0, 0, 1); }
.rk .tap--v2::before, .rk .tap--v2::after { display: none; }
.tap--v2 .tap__list { padding: 26px 28px 18px; min-width: 0; }
.tap--v2 .tap__head { margin-bottom: 8px; }
.rk .tap--v2 .tap__feed { font-family: var(--f-display); }
.rk .tap--v2 .tap__feed li { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; height: 68px; border-bottom: 1px solid rgba(255, 255, 255, 0.055); }
.tap__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: linear-gradient(180deg, #1D1D22, #16161A); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
.tap__ico svg { width: 20px; height: 20px; fill: none; stroke: var(--g1); stroke-width: 1.6; stroke-linecap: round; }
.tap__main { display: grid; gap: 3px; min-width: 0; }
.rk .tap--v2 .tap__site { font-size: 17px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 400ms var(--ease); }
.tap__meta { font-size: 12.5px; color: var(--g2); }
.tap__tag { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap;
  color: #FF8A84; background: rgba(255, 90, 82, 0.09); transition: color 400ms var(--ease), background-color 400ms var(--ease); }
.tap__tag svg { width: 14px; height: 14px; margin-right: 6px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.tap__tag-on { display: none; }
.tap--v2[data-state="on"] .tap__tag { color: var(--lime); background: rgba(164, 255, 0, 0.08); }
.tap--v2[data-state="on"] .tap__tag-off { display: none; } .tap--v2[data-state="on"] .tap__tag-on { display: inline; }
.rk .tap--v2[data-state="on"] .tap__site { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 15px; font-weight: 600; color: var(--lime); letter-spacing: 0.06em; }

.tap__panel { position: relative; isolation: isolate; display: grid; align-content: center; justify-items: center; gap: 14px; padding: 34px 28px 30px; text-align: center; overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.06); background: rgba(255, 255, 255, 0.015); }
.tap__panel::before { content: ""; position: absolute; left: 50%; top: 26%; width: 340px; height: 340px; margin: -170px 0 0 -170px; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 90, 82, 0.22), transparent); transition: background 700ms var(--ease); }
.tap--v2[data-state="on"] .tap__panel::before { background: radial-gradient(closest-side, rgba(164, 255, 0, 0.2), transparent); }
.tap__orb { display: grid; place-items: center; width: 112px; height: 112px; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #232328, #121215 70%); box-shadow: inset 0 0 0 1px rgba(255, 90, 82, 0.4), 0 0 60px rgba(255, 90, 82, 0.25);
  transition: box-shadow 600ms var(--ease); }
.tap--v2[data-state="on"] .tap__orb { box-shadow: inset 0 0 0 1px rgba(164, 255, 0, 0.5), 0 0 70px rgba(164, 255, 0, 0.3); }
.tap__lock { width: 54px; height: 54px; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.tap__lock-body { stroke: #FF8A84; transition: stroke 400ms var(--ease); }
.tap__lock-arc { stroke: #FF8A84; transform-origin: 31px 21px; transform: rotate(-28deg) translate(4px, -2px); transition: transform 500ms var(--ease), stroke 400ms var(--ease); }
.tap__lock-dot { fill: #FF8A84; stroke: none; transition: fill 400ms var(--ease); }
.tap--v2[data-state="on"] .tap__lock-body, .tap--v2[data-state="on"] .tap__lock-arc { stroke: var(--lime); }
.tap--v2[data-state="on"] .tap__lock-arc { transform: none; }
.tap--v2[data-state="on"] .tap__lock-dot { fill: var(--lime); }
.tap__count { margin: 6px 0 0; font-family: var(--f-display); font-size: 17px; font-weight: 500; color: var(--g1); }
.tap__count b { display: block; font-size: 72px; font-weight: 500; line-height: 1; letter-spacing: -0.05em; color: #FF6A62; font-variant-numeric: tabular-nums; transition: color 400ms var(--ease); }
.tap--v2[data-state="on"] .tap__count b { color: var(--lime); }
.rk .tap--v2 .tap__res { flex: none; max-width: 22em; margin: 0; font-size: 15px; color: var(--g1); }
.rk .tap--v2 .tap__res-off { color: var(--g1); }
.rk .tap--v2 .tap__sw { width: 100%; max-width: 320px; justify-content: center; margin-top: 6px; }
@media (min-width: 900px) {
  .rk .tap--v2 { grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); }
  .tap--v2 .tap__list { padding: 30px 34px 22px; }
  .tap__panel { border-top: 0; border-left: 1px solid rgba(255, 255, 255, 0.06); padding: 40px 36px; }
  .tap__orb { width: 132px; height: 132px; }
  .tap__lock { width: 62px; height: 62px; }
  .tap__count b { font-size: 92px; }
}
@media (max-width: 559px) {
  .tap--v2 .tap__list { padding: 20px 16px 10px; }
  .rk .tap--v2 .tap__feed li { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; height: 62px; }
  .tap__ico { width: 38px; height: 38px; border-radius: 11px; }
  .rk .tap--v2 .tap__site { font-size: 15px; }
  .rk .tap--v2[data-state="on"] .tap__site { font-size: 13px; }
  .tap__tag { padding: 0 9px; font-size: 11px; }
  .tap__tag svg { display: none; }
  .tap__panel { padding: 28px 18px 24px; }
  .tap__count b { font-size: 60px; }
}

/* ===== round 32: the Room 208 panel, high-end details ===== */
@property --tap-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
/* a quiet tech grid behind the section, fading out to the edges */
.rk--calm { position: relative; isolation: isolate; }
.rk--calm::before { content: ""; display: block !important; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 1;
  background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 56px 56px; -webkit-mask-image: radial-gradient(70% 60% at 50% 45%, #000 0%, transparent 75%); mask-image: radial-gradient(70% 60% at 50% 45%, #000 0%, transparent 75%); }
/* a light that travels around the edge (red while readable, lime once encrypted) */
.rk .tap--v2 { border: 1px solid transparent;
  background: linear-gradient(160deg, #17171B 0%, #0E0E11 55%, #0B0B0D 100%) padding-box,
              conic-gradient(from var(--tap-a), rgba(255, 255, 255, 0.07) 0deg, rgba(255, 106, 98, 0.75) 50deg, rgba(255, 255, 255, 0.07) 120deg, rgba(255, 255, 255, 0.07) 360deg) border-box;
  box-shadow: 0 60px 140px -60px rgba(0, 0, 0, 1), 0 0 80px -30px rgba(255, 90, 82, 0.25); transition: box-shadow 700ms var(--ease); }
.rk .tap--v2[data-state="on"] { box-shadow: 0 60px 140px -60px rgba(0, 0, 0, 1), 0 0 90px -30px rgba(164, 255, 0, 0.28);
  background: linear-gradient(160deg, #17171B 0%, #0E0E11 55%, #0B0B0D 100%) padding-box,
              conic-gradient(from var(--tap-a), rgba(255, 255, 255, 0.07) 0deg, rgba(164, 255, 0, 0.8) 50deg, rgba(255, 255, 255, 0.07) 120deg, rgba(255, 255, 255, 0.07) 360deg) border-box; }
@media (prefers-reduced-motion: no-preference) { .rk .tap--v2 { animation: tap-spin 7s linear infinite; } }
@keyframes tap-spin { to { --tap-a: 360deg; } }
/* a glass highlight on the top edge */
.rk .tap--v2::after { content: ""; display: block !important; position: absolute; top: 0; left: 12%; right: 12%; height: 1px; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent); opacity: 1; inset: 0 12% auto 12%; }
.tap--v2 .tap__k { text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px; font-weight: 600; color: var(--g2); }
.tap--v2 .tap__k svg { stroke: var(--g2); } .tap--v2 .tap__k svg circle { fill: var(--g2); }
/* the scan: one lime line sweeps down the list when the VPN turns on */
.tap--v2 .tap__list { position: relative; }
.tap--v2 .tap__feed { position: relative; }
.tap--v2 .tap__feed::after { content: ""; position: absolute; left: -8px; right: -8px; top: 0; height: 64px; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(164, 255, 0, 0.16) 70%, rgba(164, 255, 0, 0.9) 98%, transparent);
  border-radius: 6px; transform: translateY(-64px); }
.tap--v2.is-scanning .tap__feed::after { animation: tap-scan 950ms cubic-bezier(.4, 0, .2, 1) both; }
@keyframes tap-scan { 0% { opacity: 0; transform: translateY(-64px); } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; transform: translateY(var(--scan-h, 380px)); } }
/* rows: device tiles light up once encrypted */
.tap--v2 .tap__ico { transition: box-shadow 500ms var(--ease), background 500ms var(--ease); }
.tap--v2[data-state="on"] .tap__ico { box-shadow: inset 0 0 0 1px rgba(164, 255, 0, 0.35), 0 0 18px -6px rgba(164, 255, 0, 0.5); }
.tap--v2[data-state="on"] .tap__ico svg { stroke: var(--lime); }
.rk .tap--v2 .tap__feed li { transition: opacity 260ms var(--ease), transform 260ms var(--ease), background-color 300ms var(--ease); border-radius: 12px; }
@media (hover: hover) { .rk .tap--v2 .tap__feed li:hover { background: rgba(255, 255, 255, 0.025) !important; } }
/* the orb: radar pulses while readable, a steady lime halo once encrypted */
.tap__orb { position: relative; }
.tap__orb::before, .tap__orb::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; pointer-events: none; box-shadow: 0 0 0 1px rgba(255, 106, 98, 0.55); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .tap--v2[data-state="off"] .tap__orb::before { animation: tap-radar 2.4s cubic-bezier(.2, .6, .3, 1) infinite; }
  .tap--v2[data-state="off"] .tap__orb::after { animation: tap-radar 2.4s cubic-bezier(.2, .6, .3, 1) 1.2s infinite; }
}
@keyframes tap-radar { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }
.tap--v2[data-state="on"] .tap__orb::before { opacity: 1; inset: -10px; box-shadow: 0 0 0 1px rgba(164, 255, 0, 0.25); }
.tap--v2[data-state="on"] .tap__orb::after { opacity: 1; inset: -22px; box-shadow: 0 0 0 1px rgba(164, 255, 0, 0.12); }
/* the count in a gradient */
.tap__count b { background: linear-gradient(180deg, #FF8A84, #FF4A40); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.tap--v2[data-state="on"] .tap__count b { background: linear-gradient(180deg, #D8FF7A, #A4FF00); -webkit-background-clip: text; background-clip: text; }
.tap__count span { display: block; margin-top: 6px; font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--g2); }
.tap__panel { gap: 16px; }

/* ===== round 33: restraint. One strong moment (the switch), the rest quiet ===== */
/* no grid, no radar, no endless edge light */
.rk--calm::before { display: none !important; }
.tap--v2 .tap__orb::before, .tap--v2 .tap__orb::after { animation: none !important; }
.tap--v2[data-state="off"] .tap__orb::before, .tap--v2[data-state="off"] .tap__orb::after { opacity: 0; }
.rk .tap--v2 { animation: none !important; --tap-a: 200deg;
  background: linear-gradient(160deg, #17171B 0%, #0E0E11 55%, #0B0B0D 100%) padding-box,
              conic-gradient(from var(--tap-a), rgba(255, 255, 255, 0.06) 0deg, rgba(255, 255, 255, 0.16) 60deg, rgba(255, 255, 255, 0.06) 140deg, rgba(255, 255, 255, 0.06) 360deg) border-box;
  box-shadow: 0 60px 140px -60px rgba(0, 0, 0, 1); }
.rk .tap--v2[data-state="on"] {
  background: linear-gradient(160deg, #17171B 0%, #0E0E11 55%, #0B0B0D 100%) padding-box,
              conic-gradient(from var(--tap-a), rgba(255, 255, 255, 0.06) 0deg, rgba(164, 255, 0, 0.55) 60deg, rgba(255, 255, 255, 0.06) 140deg, rgba(255, 255, 255, 0.06) 360deg) border-box;
  box-shadow: 0 60px 140px -60px rgba(0, 0, 0, 1), 0 0 90px -40px rgba(164, 255, 0, 0.22); }
/* the edge light runs once, when the VPN turns on */
@media (prefers-reduced-motion: no-preference) { .rk .tap--v2.is-sweep { animation: tap-sweep 1.3s cubic-bezier(.4, 0, .2, 1) 1 !important; } }
@keyframes tap-sweep { from { --tap-a: -160deg; } to { --tap-a: 200deg; } }
/* rows: no pill per line */
.tap--v2 .tap__tag { display: none; }
.rk .tap--v2 .tap__feed li { grid-template-columns: 44px minmax(0, 1fr); }
@media (max-width: 559px) { .rk .tap--v2 .tap__feed li { grid-template-columns: 38px minmax(0, 1fr); } }
/* a muted coral instead of alarm red */
.tap--v2 .tap__badge { color: #E39A90; background: rgba(227, 154, 144, 0.08); box-shadow: inset 0 0 0 1px rgba(227, 154, 144, 0.3); }
.tap--v2 .tap__orb { box-shadow: inset 0 0 0 1px rgba(227, 154, 144, 0.28), 0 0 50px rgba(227, 154, 144, 0.12); }
.tap--v2 .tap__lock-body, .tap--v2 .tap__lock-arc { stroke: #E39A90; }
.tap--v2 .tap__lock-dot { fill: #E39A90; }
.tap--v2 .tap__panel::before { background: radial-gradient(closest-side, rgba(227, 154, 144, 0.1), transparent); }
.tap--v2 .tap__count b { background: linear-gradient(180deg, #F0B4AB, #D9786B); -webkit-background-clip: text; background-clip: text; }
.tap--v2[data-state="on"] .tap__count b { background: linear-gradient(180deg, #D8FF7A, #A4FF00); -webkit-background-clip: text; background-clip: text; }
.tap--v2[data-state="on"] .tap__badge { color: var(--lime); background: rgba(164, 255, 0, 0.08); box-shadow: inset 0 0 0 1px rgba(164, 255, 0, 0.35); }
.tap--v2[data-state="on"] .tap__orb { box-shadow: inset 0 0 0 1px rgba(164, 255, 0, 0.5), 0 0 70px rgba(164, 255, 0, 0.26); }
.tap--v2[data-state="on"] .tap__lock-body, .tap--v2[data-state="on"] .tap__lock-arc { stroke: var(--lime); }
.tap--v2[data-state="on"] .tap__lock-dot { fill: var(--lime); }
.tap--v2[data-state="on"] .tap__panel::before { background: radial-gradient(closest-side, rgba(164, 255, 0, 0.16), transparent); }
/* the numbers below in the same family as the panel */
.rk--calm .rk__grid--live .rk__card { position: relative; border: 1px solid transparent; border-radius: 24px;
  background: linear-gradient(160deg, #17171B 0%, #0E0E11 60%, #0B0B0D 100%) padding-box,
              linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04) 40%) border-box; }
.rk--calm .rk__grid--live .rk__n { background: linear-gradient(180deg, #FFFFFF, #A9ADB2); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.rk--calm .rk__grid--live .rk__t { color: var(--g1); }

/* ===== round 34: lifestyle photos ===== */
.rk__photo, .pg__photo, .pl__photo { position: relative; margin: 0; overflow: hidden; border-radius: 24px; background: #111114;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 40px 100px -50px rgba(0, 0, 0, 1); }
.rk__photo img, .pg__photo img, .pl__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rk__photo::after, .pg__photo::after, .pl__photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); background: linear-gradient(180deg, transparent 60%, rgba(10, 10, 12, 0.35)); }
.rk__top { display: grid; gap: 24px; }
.rk__photo { aspect-ratio: 3 / 2; }
.pg__photo { aspect-ratio: 16 / 9; margin-top: 28px; }
.pg__photo img { object-position: 70% 50%; }
.pl__photo { aspect-ratio: 1122 / 760; margin-top: 24px; }
@media (min-width: 760px) { .pg__photo { aspect-ratio: 1916 / 821; } }
@media (min-width: 900px) {
  .rk__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: 56px; }
  .rk__top .head { margin: 0; }
  .pg__photo { margin-top: 36px; border-radius: 28px; }
  .pl__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); align-items: center; column-gap: 56px; }
  .pl__head > :not(.pl__photo) { grid-column: 1; }
  .pl__photo { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
}

/* ===== round 35: app chips on the photos ===== */
.ph-chip { position: absolute; z-index: 2; left: 16px; bottom: 16px; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; column-gap: 12px;
  max-width: calc(100% - 32px); padding: 12px 14px; border-radius: 16px; font-family: var(--f-display); color: #fff;
  background: rgba(12, 12, 14, 0.72); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 20px 50px -20px rgba(0, 0, 0, 0.9); }
.ph-chip__ico { width: 20px; height: 20px; fill: none; stroke: #D8D8D8; stroke-width: 1.6; stroke-linecap: round; }
.ph-chip__ico circle { fill: #D8D8D8; stroke: none; }
.ph-chip__t { display: grid; gap: 2px; min-width: 0; }
.ph-chip__t b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-chip__t small { font-size: 12px; color: #9A9FA4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-chip__st { display: grid; font-size: 13px; font-weight: 600; white-space: nowrap; }
.ph-chip__off, .ph-chip__on { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; transition: opacity 400ms var(--ease), transform 400ms var(--ease); }
.ph-chip__off { color: #E39A90; background: rgba(227, 154, 144, 0.14); }
.ph-chip__off i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ph-chip__on { color: var(--lime); background: rgba(164, 255, 0, 0.12); }
.ph-chip__on svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ph-chip--risk .ph-chip__on { opacity: 0; transform: translateY(4px); }
#risk.is-safe .ph-chip--risk .ph-chip__off { opacity: 0; transform: translateY(-4px); }
#risk.is-safe .ph-chip--risk .ph-chip__on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) { .ph-chip--risk .ph-chip__off i { animation: chip-blink 1.6s ease-in-out infinite; } }
@keyframes chip-blink { 50% { opacity: 0.25; } }
.pg__photo .ph-chip { left: auto; right: 16px; }
@media (min-width: 900px) {
  .ph-chip { left: 24px; bottom: 24px; padding: 14px 16px; }
  .pg__photo .ph-chip { left: auto; right: 28px; bottom: 28px; }
  .ph-chip__t b { font-size: 15px; }
}
@media (max-width: 389px) { .ph-chip__t small { display: none; } }
/* round 35b: chips sit on calm parts of each photo (sky, window), never over a face or hands */
.rk__photo .ph-chip { top: 16px; bottom: auto; }
.pl__photo .ph-chip { left: auto; right: 16px; top: 16px; bottom: auto; }
@media (max-width: 899px) { .pg__photo .ph-chip { right: auto; left: 16px; } }
@media (min-width: 900px) { .rk__photo .ph-chip { top: 24px; } .pl__photo .ph-chip { right: 24px; top: 24px; } }
/* round 35c: phone, the chips are compact (status under the name), so they stay off faces */
@media (max-width: 899px) {
  .ph-chip { grid-template-columns: 18px auto; row-gap: 8px; column-gap: 10px; max-width: 62%; padding: 10px 12px; border-radius: 14px; }
  .ph-chip__st { grid-column: 1 / -1; justify-self: start; font-size: 12px; }
  .ph-chip__t b { font-size: 13px; }
  .ph-chip__ico { width: 18px; height: 18px; }
}
/* round 35d: the plan head uses the full width (the .head 820px cap made the gate photo small), the chip sits bottom right
   over the window, clear of her face */
@media (min-width: 900px) {
  .pl__head { max-width: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); column-gap: 64px; }
  .pl__photo { border-radius: 28px; }
}
.pl__photo .ph-chip { top: auto; bottom: 16px; right: 16px; left: auto; }
@media (min-width: 900px) { .pl__photo .ph-chip { bottom: 24px; right: 24px; top: auto; } }
/* round 35e: the café chip sits on the window side, not on the coffee */
.pg__photo .ph-chip { right: auto !important; left: 16px; }
@media (min-width: 900px) { .pg__photo .ph-chip { left: 28px; } }

/* round 62: the homepage hero system, copied for the VPN hero */
/* round 43: ChatGPT mock 2 (solid lime eyebrow, sentence-case H1, the two-column offer card with the trust row) */
.oh-pitch__pts { display: none !important; }
.oh-eb { background: var(--lime); color: #0A0A0A; box-shadow: 0 0 34px -8px rgba(164, 255, 0, 0.6); }
.oh-eb i { background: #0A0A0A; animation: none; }
.eb-sep { flex: none; width: 1px; height: 12px; margin: 0 4px; background: rgba(10, 10, 10, 0.45); }
.oh__h--x { font-size: clamp(42px, 13vw, 58px); font-weight: 700; line-height: 0.88; letter-spacing: -0.05em; text-wrap: nowrap; }
.hx1 { color: #F5F5F3; }
.hx2 { color: #CDD1D5; }
.hx3 { color: var(--lime); }
.oh-fin--x { margin-top: 12px; font-size: 17px; font-weight: 400; line-height: 1.3; color: #C9CDD1; }
.oh__buy { position: relative; }
.oh__buy::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: -40px; height: 160px; pointer-events: none;
  background: radial-gradient(50% 60% at 40% 50%, rgba(164, 255, 0, 0.3), rgba(164, 255, 0, 0) 70%); filter: blur(10px); }
.oc { position: relative; display: flex; flex-direction: column; gap: 12px; width: 100%; padding: 16px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(20, 22, 16, 0.94), rgba(10, 11, 9, 0.96));
  box-shadow: inset 0 0 0 1.5px rgba(164, 255, 0, 0.6), 0 0 40px -6px rgba(164, 255, 0, 0.45), 0 30px 80px -30px rgba(164, 255, 0, 0.5); }
.oc p, .oc ul { margin: 0; }
.oc__l, .oc__r { display: contents; }
.oc__get { order: 1; display: grid; gap: 3px; font-family: var(--f-display); }
.oc__a { font-size: 27px; font-weight: 700; line-height: 1.02; letter-spacing: -0.035em; color: #F5F5F3; }
.oc__b { font-size: 17px; font-weight: 700; line-height: 1.15; letter-spacing: -0.005em; text-transform: uppercase; color: var(--lime); }
.oc__price { order: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.oc__now { font-family: var(--f-display); font-size: 38px; font-weight: 700; line-height: 1; letter-spacing: -0.04em; color: #F5F5F3; }
.oc__price s { font-size: 14px; color: #9A9FA4; text-decoration-thickness: 1px; }
.oc__save { padding: 5px 11px; border-radius: 999px; background: var(--lime); color: #0A0A0A; font-size: 13px; font-weight: 700; white-space: nowrap; }
.oc__vat { font-size: 13px; color: #C9CDD1; }
.oc__btn { order: 3; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 56px; padding: 0 20px; font-size: 17px; font-weight: 600; white-space: nowrap; }
.oc__btn svg { flex: none; width: 20px !important; height: 20px !important; margin: 0 !important; opacity: 1 !important; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s; }
.oc__btn:hover svg { transform: translateX(3px); }
.oc__end { order: 4; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.oc__end[hidden] { display: none; }
.oc__k { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #C9CDD1; }
.oc__left { display: flex; align-items: center; gap: 8px; }
.oc__left svg { width: 22px; height: 22px; fill: none; stroke: #F5F5F3; stroke-width: 1.8; stroke-linecap: round; }
.oc__left b { font-family: var(--f-display); font-size: 32px; font-weight: 700; line-height: 1; letter-spacing: -0.04em; color: var(--lime); font-variant-numeric: tabular-nums; }
.oc__left span { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #F5F5F3; white-space: nowrap; }
.oc__trust { order: 5; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; padding: 0; list-style: none; font-size: 12.5px; color: #C9CDD1; }
.oc__trust li { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.oc__trust svg { flex: none; width: 16px; height: 16px; fill: none; stroke: #C9CDD1; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.oc__fine { position: relative; margin: 12px 0 0; text-align: center; font-size: 12.5px; color: #ADB2B7; }
.oc__fine b { font-weight: 600; color: #F5F5F3; }
@media (min-width: 900px) {
.oh__buy { flex-direction: column !important; align-items: flex-start !important; gap: 0 !important; margin-top: 26px; padding-top: 0; }
.oh__h--x { font-size: clamp(60px, 6.2vw, 100px); line-height: 0.87; }
.oh-fin--x { margin-top: 16px; font-size: clamp(19px, 1.6vw, 24px); }
.oc { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 30px; flex: none; width: min(780px, 52vw); padding: 24px 28px 18px; }
.oc__l, .oc__r { display: grid; align-content: start; gap: 18px; }
.oc__r { padding-left: 30px; border-left: 1px solid rgba(255, 255, 255, 0.14); }
.oc__a { font-size: 44px; }
.oc__b { font-size: 22px; }
.oc__price { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center; gap: 4px 12px; }
.oc__now { grid-column: 1 / -1; font-size: 60px; }
.oc__price s { grid-column: 1 / -1; }
.oc__btn { height: 64px; font-size: 19px; }
.oc__end { display: grid; gap: 8px; padding-top: 16px; }
.oc__k { font-size: 11.5px; }
.oc__left b { font-size: 50px; }
.oc__left svg { width: 30px; height: 30px; }
.oc__left span { font-size: 13px; }
.oc__trust { grid-column: 1 / -1; justify-content: flex-start; gap: 6px 22px; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 13px; }
.oc__fine { width: min(780px, 52vw); margin-top: 14px; padding-left: 4px; text-align: left; font-size: 13px; }
}
@media (min-width: 900px) and (max-height: 820px) {
.oh__h--x { font-size: clamp(50px, 5vw, 64px); }
.oh-fin--x { margin-top: 10px; font-size: 18px; }
.oh__buy { margin-top: 16px; }
.oc { padding: 16px 24px 12px; }
.oc__l, .oc__r { gap: 12px; }
.oc__a { font-size: 34px; }
.oc__b { font-size: 18px; }
.oc__now { font-size: 46px; }
.oc__btn { height: 54px; font-size: 17px; }
.oc__end { padding-top: 10px; }
.oc__left b { font-size: 38px; }
.oc__trust { margin-top: 12px; padding-top: 10px; }
.oc__fine { margin-top: 10px; }
}
@media (max-width: 899px) and (max-height: 720px) {
.oh-fin--x { margin-top: 8px; font-size: 15.5px; }
.oc { gap: 9px; padding: 12px 14px; }
.oc__a { font-size: 22px; }
.oc__b { font-size: 15.5px; }
.oc__now { font-size: 30px; }
.oc__btn { height: 50px; }
.oc__end { padding-top: 9px; }
.oc__left b { font-size: 26px; }
.oc__trust { display: none; }
.oc__fine { margin-top: 8px; }
}
@media (min-width: 900px) {
.oc__l { align-content: space-between; }
.oc__save { padding: 6px 14px; font-size: 15px; }
.oh-eb { padding: 8px 16px 8px 13px; font-size: 13.5px; }
}
@media (min-width: 900px) and (max-height: 820px) { .oh-eb { padding: 6px 13px 6px 11px; font-size: 12px; } }
@media (max-width: 899px) {
.oh-eb { white-space: nowrap; font-size: 11px; letter-spacing: 0.06em; padding: 6px 12px 6px 10px; }
.oh-fin--x br { display: none; }
.oc__get { padding-right: 150px; }
.oc__save { position: absolute; top: 16px; right: 16px; }
.oc__k { max-width: 130px; line-height: 1.35; }
}
@media (max-width: 899px) and (max-height: 720px) { .oc__get { padding-right: 140px; } .oc__save { top: 12px; right: 14px; } }
@media (max-width: 899px) { .oc__get { padding-right: 0 !important; } .oc__a { padding-right: 150px; } }
@media (max-width: 899px) and (max-height: 720px) { .oc__a { padding-right: 140px; } }
@media (max-width: 899px) and (max-height: 720px) { .oc__save { top: 10px; padding: 3px 9px; font-size: 12px; } .oc__get { gap: 5px; } }
@media (min-width: 900px) { .oc, .oc__fine { width: min(760px, 50vw); } }
@media (min-width: 900px) { .oh .oh-moment { top: 21%; right: 2.5vw; } }
@media (max-width: 899px) {
.oh.oh:has(img[src*="hero_bundle"]) .oh__media {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%), linear-gradient(transparent 0%, #000 16%, #000 82%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%), linear-gradient(transparent 0%, #000 16%, #000 82%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
}
@media (min-width: 1600px) {
.oh.oh:has(img[src*="hero_bundle"]) .oh__media img { transform: none; }
.oh.oh:has(img[src*="hero_bundle"]) .oh__media { --sx: 0px; }
}
@media (min-width: 900px) and (max-width: 1199px) {
.oh.oh:has(img[src*="hero_bundle"]) .oh__media { inset: 0; -webkit-mask-image: none; mask-image: none; }
.oh.oh:has(img[src*="hero_bundle"]) .oh__media img { object-fit: cover; object-position: 100% 50%; }
.oh .oh-moment { top: 18%; }
}
.oh .oh-moment { display: none !important; }
.oh.oh:has(img[src*="hero_bundle"]) .oh__media::after { display: none; }
@media (min-width: 900px) {
.oh.oh .oh__stage::after { background: linear-gradient(90deg, rgba(10, 10, 12, 0.92) 0%, rgba(10, 10, 12, 0.6) 30%, rgba(10, 10, 12, 0) 56%),
  linear-gradient(0deg, var(--bg) 0%, rgba(10, 10, 12, 0) 9%),
  linear-gradient(180deg, rgba(10, 10, 12, 0.6) 0%, rgba(10, 10, 12, 0) 18%); }
}
/* round 53: the VPN countries strip in the hero card */
.vl { display: none; }
@media (min-width: 900px) {
.vl { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.vl__phone { flex: none; width: 22px; height: 36px; fill: none; stroke: #F5F5F3; stroke-width: 1.8; stroke-linecap: round; opacity: 0.9; }
.vl__path { flex: none; width: 64px; height: 16px; overflow: visible; }
.vl__dash { fill: none; stroke: var(--lime); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 3 6; animation: vlDash 1.1s linear infinite; opacity: 0.85; }
.vl__head { fill: none; stroke: var(--lime); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vl__dot { fill: var(--lime); filter: drop-shadow(0 0 4px rgba(164, 255, 0, 0.9)); animation: vlDot 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
@keyframes vlDash { to { stroke-dashoffset: -18; } }
@keyframes vlDot { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(64px); opacity: 0; } }
.vl__flags { display: flex; align-items: center; padding: 6px 4px 6px 8px; }
.vl__f { position: relative; flex: none; width: 34px; height: 34px; margin-left: -9px; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 2px #121410, inset 0 0 0 1px rgba(255, 255, 255, 0.18); opacity: 0.5; filter: saturate(0.6) brightness(0.8);
  transform: scale(0.9); transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.55s, filter 0.55s, box-shadow 0.55s; }
.vl__f:first-child { margin-left: 0; }
.vl__f svg { display: block; width: 100%; height: 100%; }
.vl__f::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(120% 90% at 30% 20%, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 55%); }
.vl__f.is-on { z-index: 2; opacity: 1; filter: none; transform: scale(1.32);
  box-shadow: 0 0 0 2px #121410, 0 0 0 4px var(--lime), 0 0 22px 2px rgba(164, 255, 0, 0.45); }
.vl__name { display: inline-flex; align-items: center; gap: 7px; margin-left: 10px; font-size: 13.5px; font-weight: 600; color: #F5F5F3; white-space: nowrap; }
.vl__name i { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 8px rgba(164, 255, 0, 0.8); }
.vl__name b { font-weight: 600; transition: opacity 0.3s; }
.vl__name b.is-fade { opacity: 0; }
}
@media (min-width: 900px) and (max-width: 1365px) { .vl__name { display: none; } }
@media (prefers-reduced-motion: reduce) { .vl__dash, .vl__dot { animation: none; } .vl__dot { opacity: 0; } }
@media (min-width: 900px) {
.vl { order: 2; gap: 8px; }
.vl__path { width: 46px; }
.vl__f { margin-left: -12px; }
.vl__name { margin-left: 8px; font-size: 13px; }
@keyframes vlDot { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(46px); opacity: 0; } }
}
@media (max-width: 899px) {
.vl { order: 2; display: flex; align-items: center; gap: 7px; margin: 2px 0 2px; }
.vl__phone { flex: none; width: 17px; height: 28px; fill: none; stroke: #F5F5F3; stroke-width: 2; stroke-linecap: round; opacity: 0.9; }
.vl__path { flex: none; width: 34px; height: 14px; overflow: visible; }
.vl__dash { fill: none; stroke: var(--lime); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 3 5; animation: vlDash 1.1s linear infinite; opacity: 0.85; }
.vl__head { fill: none; stroke: var(--lime); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.vl__dot { fill: var(--lime); filter: drop-shadow(0 0 4px rgba(164, 255, 0, 0.9)); animation: vlDotM 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
@keyframes vlDash { to { stroke-dashoffset: -16; } }
@keyframes vlDotM { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(46px); opacity: 0; } }
.vl__flags { display: flex; align-items: center; padding: 5px 2px 5px 6px; }
.vl__f { position: relative; flex: none; width: 27px; height: 27px; margin-left: -9px; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 2px #121410, inset 0 0 0 1px rgba(255, 255, 255, 0.18); opacity: 0.5; filter: saturate(0.6) brightness(0.8);
  transform: scale(0.9); transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.55s, filter 0.55s, box-shadow 0.55s; }
.vl__f:first-child { margin-left: 0; }
.vl__f svg { display: block; width: 100%; height: 100%; }
.vl__f::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(120% 90% at 30% 20%, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 55%); }
.vl__f.is-on { z-index: 2; opacity: 1; filter: none; transform: scale(1.3); box-shadow: 0 0 0 2px #121410, 0 0 0 3.5px var(--lime), 0 0 16px 1px rgba(164, 255, 0, 0.45); }
.vl__name { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; font-size: 12.5px; font-weight: 600; color: #F5F5F3; white-space: nowrap; }
.vl__name i { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 8px rgba(164, 255, 0, 0.8); }
.vl__name b { font-weight: 600; transition: opacity 0.3s; }
.vl__name b.is-fade { opacity: 0; }
}
@media (max-width: 379px) { .vl__name { display: none; } }
@media (max-width: 899px) and (max-height: 720px) { .vl { margin: 0; } .vl__f { width: 24px; height: 24px; } .vl__phone { height: 24px; } }

/* round 62: VPN hero layout on top of the homepage hero blocks */
.oc__price { flex-wrap: wrap; }
.oc__cancel { order: 4; display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: #C9CDD1; }
.oc__cancel svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--lime); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fh .oc__save { position: static; }
.fh .oc__get { padding-right: 0 !important; }
.fh .oc__a { padding-right: 0; }
.fh .vl { order: 2; }
@media (min-width: 900px) {
  .fh .fh__buy { display: block; min-height: 0; padding-top: 0; margin-top: 28px; background: none; }
  .fh .fh__media { inset: 0; left: 0; width: auto; max-width: none; aspect-ratio: auto; transform: none; -webkit-mask-image: none; mask-image: none; }
  .fh .fh__media img { object-fit: cover; object-position: 100% 50%; transform: none; }
  .fh .fh__stage::after { background: linear-gradient(90deg, rgba(10, 10, 12, 0.92) 0%, rgba(10, 10, 12, 0.6) 30%, rgba(10, 10, 12, 0) 52%),
    linear-gradient(0deg, var(--bg) 0%, rgba(10, 10, 12, 0) 9%), linear-gradient(180deg, rgba(10, 10, 12, 0.6) 0%, rgba(10, 10, 12, 0) 18%); }
  .fh .oc__price { display: grid; grid-template-columns: auto; justify-items: start; gap: 6px; }
  .fh .oc__now { grid-column: auto; font-size: 64px; }
  .fh .oc__save { grid-column: auto; grid-row: auto; justify-self: start; }
  .fh .oc__vat { grid-column: auto; grid-row: auto; max-width: 220px; line-height: 1.35; }
  .fh .oc__r { align-content: space-between; }
  .fh .oc__cancel { padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
}
@media (min-width: 900px) and (max-height: 820px) { .fh .fh__buy { margin-top: 16px; } .fh .oc__now { font-size: 50px; } }
@media (max-width: 899px) {
  .fh .oc__save { position: static; }
  .fh .oc__cancel { order: 4; }
}
.fh .oh-eb { display: inline-flex !important; width: auto !important; max-width: max-content; border-radius: 999px !important; padding: 8px 16px 8px 13px !important; font-size: 13.5px !important; }
/* round 62b: phone, the new hero text is taller: the render gives way so the button stays on the first screen */
@media (max-width: 899px) {
  .fh .fh__stage { height: clamp(130px, calc(100vh - 660px - var(--ipbar-h, 0px)), 300px); }
  .fh .oh-fin--x { margin-top: 10px; }
}
@supports (height: 100svh) { @media (max-width: 899px) { .fh .fh__stage { height: clamp(130px, calc(100svh - 660px - var(--ipbar-h, 0px)), 300px); } } }
@media (max-width: 899px) and (max-height: 720px) { .fh .fh__stage { height: 66px; } .fh .oc__trust { display: none; } }

/* round 63: hero image v4 (hand + phone photo) and the floating feature cards */
.fh__fx { display: none; }
@media (min-width: 900px) {
  .fh .fh__stage { container-type: size; }
  .fh .fh__media, .fh .fh__fx { position: absolute; inset: auto 0 0 auto; width: min(100cqw, 177.78cqh); height: auto; aspect-ratio: 16 / 9; }
  .fh .fh__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transform: none; }
  .fh .fh__stage::after { background: linear-gradient(0deg, var(--bg) 0%, rgba(10, 10, 12, 0) 7%); }
  .fh__fx { display: block; z-index: 2; pointer-events: none; font-size: clamp(11px, 0.95cqw, 15px); }
  .fx { position: absolute; display: flex; align-items: center; gap: 0.85em; padding: 0.8em 1.3em 0.8em 0.8em; border-radius: 1.15em;
    background: rgba(22, 24, 26, 0.62); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 1.6em 3.4em rgba(0, 0, 0, 0.55);
    white-space: nowrap; opacity: 0; animation: fx-in 0.8s cubic-bezier(0.2, 0.7, 0.25, 1) both, fx-float 6s ease-in-out infinite alternate; }
  .fx i { flex: none; display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 50%; background: rgba(164, 255, 0, 0.14); box-shadow: inset 0 0 0 1px rgba(164, 255, 0, 0.35), 0 0 1.4em rgba(164, 255, 0, 0.22); }
  .fx svg { width: 1.35em; height: 1.35em; fill: none; stroke: var(--lime); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .fx b { display: block; font-size: 1.12em; font-weight: 600; line-height: 1.2; color: var(--ink); letter-spacing: -0.005em; }
  .fx small { display: block; margin-top: 0.2em; font-size: 0.86em; line-height: 1.2; color: var(--g1); }
  .fx--1 { left: 76.4%; top: 26.5%; animation-delay: 0.7s, 1.5s; }
  .fx--2 { left: 79.5%; top: 57%; animation-delay: 1.05s, 1.85s; }
}
@keyframes fx-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes fx-float { from { opacity: 1; transform: translateY(0); } to { opacity: 1; transform: translateY(-7px); } }
@media (prefers-reduced-motion: reduce) { .fx { animation: none !important; opacity: 1 !important; } }

/* round 64: 7-day trial: the deadline in the hero card, the "cheaper than in the app" line, the plan card note */
.fh .oc__end { order: 4; }
.fh .oc__k { margin: 0; font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.fh .oc__fine { margin: 12px 0 0; font-size: 12.5px; color: var(--g1); }
.fh .oc__fine b { font-weight: 600; color: var(--lime); }
.pc__why { margin: 18px 0 4px; padding: 14px 16px; border-radius: 14px; background: rgba(164, 255, 0, 0.06); box-shadow: inset 0 0 0 1px rgba(164, 255, 0, 0.28); }
.pc__why-h { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: var(--lime); }
.pc__why-p { margin: 0; font-size: 14px; line-height: 1.5; color: #C9CDD1; }
@media (min-width: 900px) { .fh .oc__fine { margin-top: 12px; text-align: left; } }

/* round 64b: the deadline row on one line on desktop (label left, days right), so the card stays above the fold */
@media (min-width: 900px) {
  .fh .oc__end { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; }
  .fh .oc__left b { font-size: 40px; }
  .fh .oc__left svg { width: 26px; height: 26px; }
}

/* round 64c: the right column is narrow on desktop: label on two lines next to the days */
@media (min-width: 900px) {
  .fh .oc__end { width: 100%; min-width: 0; justify-self: stretch; }
  .fh .oc__k { flex: 1 1 0; min-width: 0; font-size: 11.5px; line-height: 1.35; }
  .fh .oc__left { flex: none; gap: 6px; }
  .fh .oc__left b { font-size: 34px; }
  .fh .oc__left svg { width: 22px; height: 22px; }
  .fh .oc__left span { font-size: 10.5px; letter-spacing: 0.12em; }
}
@media (min-width: 900px) { .fh .oc { grid-template-columns: minmax(330px, 1.1fr) minmax(0, 1fr); } }

/* round 65: "cheaper than in the app" as a visible lime-tinted strip under the card */
.fh .oc__fine { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; padding: 11px 16px; border-radius: 14px; font-size: 15px; line-height: 1.4; text-align: left; color: #E4E6E8;
  background: rgba(164, 255, 0, 0.08); box-shadow: inset 0 0 0 1px rgba(164, 255, 0, 0.32); }
.fh .oc__fine svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--lime); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fh .oc__fine b { font-weight: 700; color: var(--lime); }
@media (min-width: 900px) { .fh .oc__fine { display: inline-flex; margin-top: 14px; font-size: 16px; padding: 10px 18px 10px 14px; } }
@media (min-width: 900px) and (max-height: 820px) { .fh .oc__fine { margin-top: 10px; font-size: 15px; padding: 8px 16px 8px 12px; } }

/* round 65b: desktop: the H1 scales with the screen height, so card + "cheaper than in the app" strip fit screen one */
@media (min-width: 900px) {
  .fh .fh__h.oh__h--x { font-size: min(var(--t-hero), 10.4vh) !important; }
  .fh .fh__buy { margin-top: 20px; }
}
@media (min-width: 900px) { .fh { padding-top: clamp(150px, 17vh, 203px) !important; } }   /* round 65c: less air above the pill */

/* round 66: the line drawings replace the three photos; on the gate drawing the chip sits in the empty upper right */
.pl__photo .ph-chip { top: 16px !important; bottom: auto !important; left: auto !important; right: 16px !important; }
@media (min-width: 900px) { .pl__photo .ph-chip { top: 24px !important; right: 24px !important; } }
@media (max-width: 899px) { .pg__photo { aspect-ratio: 4 / 3 !important; } .pg__photo img { object-position: 62% 50% !important; } }   /* round 66b: the laptop stays clear of the chip */

/* round 68: less neon (4-agent review): the button is the only solid lime area and the one that glows */
.fh .oh-eb { background: rgba(164, 255, 0, 0.07) !important; color: var(--lime) !important; font-weight: 600 !important; box-shadow: inset 0 0 0 1.5px rgba(164, 255, 0, 0.55) !important; }
.fh .oh-eb i { background: var(--lime) !important; box-shadow: 0 0 8px rgba(164, 255, 0, 0.7) !important; }
.fh .oh-eb .eb-sep { background: rgba(164, 255, 0, 0.45) !important; }
.fh .oc { box-shadow: inset 0 0 0 1px rgba(164, 255, 0, 0.36), 0 30px 70px -40px rgba(164, 255, 0, 0.22) !important; }
.fh .oc__btn { box-shadow: 0 12px 36px -8px rgba(164, 255, 0, 0.6), 0 0 0 1px rgba(164, 255, 0, 0.7) !important; }
.fh .oc__b { color: var(--ink) !important; }
.fh .oc__save { background: transparent !important; color: var(--lime) !important; box-shadow: inset 0 0 0 1.5px rgba(164, 255, 0, 0.6) !important; }
.fh .oc__vat { font-size: 15px !important; line-height: 1.4; color: var(--ink) !important; }
.fh .oc__fine { background: rgba(255, 255, 255, 0.04) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13) !important; color: #C9CDD1 !important; }
.fh .oc__fine b { color: var(--ink) !important; }
/* the deadline: red, one line, right above the button */
.fh .oc__dl { order: 3; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 9px; margin: 2px 0 0; padding: 9px 14px; border-radius: 12px;
  font-size: 15px; font-weight: 600; line-height: 1.25; color: #FF5A52; background: rgba(255, 90, 82, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 90, 82, 0.38); }
.fh .oc__dl[hidden] { display: none; }
.fh .oc__dl svg { flex: none; width: 18px; height: 18px; fill: none; stroke: #FF5A52; stroke-width: 2; stroke-linecap: round; }
.fh .oc__dl b { font-weight: 800; font-variant-numeric: tabular-nums; }
.fh .oc__dl-sep { width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 90, 82, 0.7); }
.fh .oc__btn { order: 3; }
@media (min-width: 900px) {
  .fh .oc__dl { justify-content: flex-start; margin: 16px 0 12px; font-size: 15px; }
  .fh .oc__r { align-content: center; }
}
/* phone: a smaller photo, so price, deadline and button share screen one */
@media (max-width: 899px) {
  .fh .fh__stage { height: clamp(96px, calc(100vh - 720px - var(--ipbar-h, 0px)), 260px) !important; }
}
@supports (height: 100svh) { @media (max-width: 899px) { .fh .fh__stage { height: clamp(96px, calc(100svh - 720px - var(--ipbar-h, 0px)), 260px) !important; } } }
@media (max-width: 899px) { .fh .oc__dl { padding: 8px 12px; font-size: 14.5px; } .fh .oc__vat { text-wrap: balance; } }   /* round 68b */
/* round 68c: desktop: the deadline sits in the right column under the price, level with the button (the card stays above the fold); phone: above the button. Small phones drop the photo. */
.fh .oc__dl--r { display: none; }
@media (min-width: 900px) { .fh .oc__dl--l { display: none; } .fh .oc__dl--r { display: flex; margin: 14px 0 0; padding: 8px 12px; font-size: 14px; } .fh .oc__dl--r[hidden] { display: none; } }
@media (max-width: 899px) and (max-height: 720px) { .fh .fh__stage { display: none !important; } }

/* round 69: the hero card's left column has a fixed width (it followed the widest line, so the button grew with
   "United Kingdom"); short country names; the name slot has a fixed minimum width, so nothing moves while it cycles */
@media (min-width: 900px) { .oc__l { grid-template-columns: minmax(0, 1fr) !important; min-width: 0; } }
.vl { max-width: 100%; }
.vl__name { min-width: 5.4em; }
.fh .oc__btn { box-shadow: none !important; }   /* round 69: no glow on the button (user) */

/* round 70: after the 2-agent before/after check: no green blob behind the card; desktop deadline stronger; phone
   deadline as a bold red line without a box (it read like a second button) */
.fh .fh__buy::before { display: none !important; }
.fh .oc { box-shadow: inset 0 0 0 1px rgba(164, 255, 0, 0.36) !important; }
@media (max-width: 899px) { .fh .oc__dl--l { padding: 2px 0 0; background: none; box-shadow: none; font-size: 15.5px; font-weight: 700; } }
@media (min-width: 900px) { .fh .oc__dl--r { width: 100%; justify-content: flex-start; padding: 10px 14px; font-size: 15.5px; font-weight: 700; } .fh .oc__dl--r b { font-size: 1.15em; } }
@media (min-width: 900px) { .fh .oc__dl--r { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; row-gap: 1px; padding: 9px 14px; font-size: 14px; font-weight: 600; }
  .fh .oc__dl--r svg { grid-row: span 2; width: 22px; height: 22px; } .fh .oc__dl--r .oc__dl-sep { display: none; }
  .fh .oc__dl--r span:last-of-type { font-size: 18px; font-weight: 800; } .fh .oc__dl--r b { font-size: 1em; } }   /* round 70b: desktop deadline on two intended lines */

/* round 71: Room 208 demo, calmer "on", scarier "off" (4-agent review) */
.tap--v2 .tap__site { color: var(--ink); font-weight: 600; }
.tap--v2[data-state="on"] .tap__site { color: rgba(164, 255, 0, 0.5) !important; font-weight: 400 !important; letter-spacing: 0.04em !important; }
.tap--v2 .tap__ico, .tap--v2[data-state="on"] .tap__ico { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important; }
.rk .tap.tap--v2, .rk .tap.tap--v2[data-state="on"], .rk--calm .tap.tap--v2[data-state="on"] { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 40px 100px -50px rgba(0, 0, 0, 0.95) !important; }
.tap--v2[data-state="on"] .tap__orb { box-shadow: inset 0 0 0 1.5px rgba(164, 255, 0, 0.55) !important; }
.tap--v2[data-state="on"] .tap__orb::before, .tap--v2[data-state="on"] .tap__orb::after { opacity: 0 !important; }
.tap--v2.is-sweep[data-state="on"] .tap__orb { animation: tap-orb-pulse 1s cubic-bezier(0.2, 0.7, 0.25, 1) 0.55s 1 both; }
@keyframes tap-orb-pulse { 0% { box-shadow: inset 0 0 0 1.5px rgba(164, 255, 0, 0.55), 0 0 0 0 rgba(164, 255, 0, 0.45); } 100% { box-shadow: inset 0 0 0 1.5px rgba(164, 255, 0, 0.55), 0 0 0 34px rgba(164, 255, 0, 0); } }
.tap[data-state="on"] .tap__knob::after, .rk .tap[data-state="on"] .tap__knob::after { box-shadow: none !important; }
.tap--v2[data-state="on"] .tap__badge { color: #C9CDD1 !important; background: rgba(255, 255, 255, 0.05) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12) !important; }
.tap--v2[data-state="on"] .tap__badge i { background: var(--lime) !important; box-shadow: none !important; }
.tap--v2[data-state="on"] .tap__tag { color: #9DA3A8 !important; background: rgba(255, 255, 255, 0.05) !important; }
.tap__res-on b { color: var(--ink) !important; font-weight: 700; }
.tap__res-off { font-weight: 600; }
/* readability: no spaced caps, larger and brighter labels */
.tap--v2 .tap__k { text-transform: none !important; letter-spacing: 0 !important; font-size: 15px !important; font-weight: 500 !important; color: #C9CDD1 !important; }
.tap__count span { text-transform: none !important; letter-spacing: 0 !important; font-size: 16px !important; font-weight: 500 !important; color: #C9CDD1 !important; }
.tap__meta { font-size: 13.5px !important; color: #9DA3A8 !important; }
@media (prefers-reduced-motion: reduce) { .tap--v2.is-sweep[data-state="on"] .tap__orb { animation: none; } }
.fh .oc__trust { border-top: 0 !important; }   /* round 71b: no divider above the trust row (user) */
.tap--v2[data-state="on"] .tap__ico { background: linear-gradient(180deg, #1D1D22, #16161A) !important; } .tap--v2[data-state="on"] .tap__ico svg { stroke: #8A8F94 !important; }   /* round 71c: neutral icon boxes */
.tap--v2 .tap__panel::before { display: none !important; }   /* round 71d: no lime halo behind the lock */

/* round 72: the photo's top and left edges fade out by mask, so no edge shows where the image box starts (its near-black
   differs from the page colour by 1-2 levels after decoding, visible on good screens) */
@media (min-width: 900px) {
  .fh .fh__media { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 24%), linear-gradient(90deg, transparent 0%, #000 34%); -webkit-mask-composite: source-in;
    mask-image: linear-gradient(180deg, transparent 0%, #000 24%), linear-gradient(90deg, transparent 0%, #000 34%); mask-composite: intersect; }
}
@media (min-width: 900px) { .fh .fh__media { -webkit-mask-image: none !important; mask-image: none !important; } }   /* round 73: no mask, the hero WebP has alpha now */

/* round 74: small desktops / tablets landscape (900-1199, e.g. laptops at 125-150 % zoom): the two-column card got a
   79 px right column ("USD 0" broke, the deadline ran under the phone). Here the card stacks like on the phone
   (name, countries, price, deadline, button, trust) and stays narrow, so the photo keeps the right side. */
.fh .oc__now { white-space: nowrap; }
@media (min-width: 900px) and (max-width: 1199px) {
  .fh .oc { display: flex !important; flex-direction: column; gap: 16px; width: min(500px, 52vw) !important; }
  .fh .oc__l, .fh .oc__r { display: contents !important; }
  .fh .oc__get { order: 1; } .fh .vl { order: 2; } .fh .oc__price { order: 3; }
  .fh .oc__dl--l { display: flex !important; order: 4; justify-content: flex-start; padding: 0; background: none; box-shadow: none; font-size: 15.5px; font-weight: 700; }
  .fh .oc__dl--l[hidden], .fh .oc__dl--r { display: none !important; }
  .fh .oc__btn { order: 5; width: 100%; }
  .fh .oc__trust { order: 6; }
  .fh .oc__price { display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
  .fh .oc__vat { flex-basis: 100%; max-width: none !important; }
  .fh .oc__now { font-size: 54px !important; }
  .fh .oc__fine { width: min(500px, 52vw); }
}
.tap--v2[data-state="on"] .tap__site { color: var(--lime) !important; font-weight: 400 !important; }   /* round 75: brand lime, not olive (user); thin weight keeps it calm */

/* round 76: the plan card in the homepage offer-card pattern */
.pc-x__eyebrow { margin: 0 0 4px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.pc--x .pc__price { margin-top: 8px; }
.pc-x__then { margin: 18px 0 0; font-size: 15px; color: #C9CDD1; }
.pc--x .pc__plans { margin-top: 10px; }
.pc-x__dl { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; margin: 18px 0 0; font-size: 15.5px; font-weight: 700; color: #FF5A52; }
.pc-x__dl[hidden] { display: none; }
.pc-x__dl svg { flex: none; width: 19px; height: 19px; fill: none; stroke: #FF5A52; stroke-width: 2; stroke-linecap: round; }
.pc-x__dl b { font-weight: 800; font-variant-numeric: tabular-nums; }
.pc-x__sep { width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 90, 82, 0.7); }
.pc--x .pc__btn { margin-top: 14px; box-shadow: none; }
.pc-x__refund { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 0 2px; font-size: 14.5px; font-weight: 500; color: var(--ink); }
.pc-x__refund svg { width: 17px; height: 17px; fill: none; stroke: var(--lime); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pc-x__safe { margin: 0; text-align: center; font-size: 13px; color: rgba(255, 255, 255, 0.5); }
.pc-x__cheap { display: flex; align-items: center; gap: 10px; margin: 18px 0 0; padding: 11px 14px; border-radius: 12px; font-size: 14px; line-height: 1.4; color: #C9CDD1; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.pc-x__cheap svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--lime); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pc-x__cheap b { color: var(--ink); font-weight: 700; }
.pc-more { margin-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.pc-more > summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 14px 0 6px; cursor: pointer; list-style: none; font-size: 15px; font-weight: 600; color: var(--ink); }
.pc-more > summary::-webkit-details-marker { display: none; }
.pc-more > summary::after { content: "+"; font-family: var(--f-display); font-size: 22px; font-weight: 400; color: var(--ink); transition: transform 200ms var(--ease); }
.pc-more[open] > summary::after { transform: rotate(45deg); }
.pc-more > summary:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 4px; }
.pc-more .pc__terms { margin-top: 6px; }
.pc-x__safe, .pc-x__cheap span { text-wrap: balance; }   /* round 76b */