/* vploq.com homepage · bundle.html (pre-order vploq Home + 6 months of vploq VPN) · phone first · plain CSS
Built 08.10.2026 from Funnel A (offer.css, kept below with its comments) plus the world map from Funnel B (vpn.css "2 · world map").
Bundle additions are marked "bundle". Lime: buttons, the map line (with its pin and the app's own switch) and a few muted accents.
----- Funnel A notes follow -----
Loads after site.css and only adds what the funnel needs. Tokens, type scale, buttons, header,
scroll-open, home-demo, home-offer, pill and interactions come from site.css.
Premium pass (07.10.2026, REVIEW-offer.md): fewer boxes, frameless renders, one lime element per screen,
1px hairlines only, radii 20 (media, panels) / 12 (small thumbs) / 999 (pills), reveals 12px / 400ms.
The scroll-open block is styled by site.css only (its JS and markup belong to another task). */
/* Funnel Display, self-hosted (round 3, replaces the render-blocking Google Fonts link in bundle.html). Variable font:
one file per subset covers weights 400 to 700. Latin is preloaded in bundle.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; }
:root { --strip-h: 0px; --r-lg: 20px; --r-sm: 12px; --hair: rgba(255, 255, 255, 0.12); }
/* bundle: tighter section rhythm on phone (as Funnel B), so the page stays near 10 phone screens */
@media (max-width: 767px) { .section { padding: 56px 0; } }
/* 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, no strip, no nav ---------- */
.oa-header .nav-pill { display: inline-flex; height: 44px; margin-left: auto; } /* 44px tap target */
@media (max-width: 767px) {
.oa-header .nav-pill { height: 44px; padding: 0 18px; } /* 44px tap target */
}
/* ==========================================================================
1 · hero (.oh) · rebuilt 08.10.2026 (marketing review: phone pasted into the render, small sub, labels twice, crowded strip)
Phone (390 x 844, all above the fold): headline, sub, one visual (the render in a fixed-height window), the two parts
once, price, button, microline. The window's height follows the screen height, so the button always stays on screen one.
Desktop (900px+): the render full-bleed behind (box on the right); left column headline, sub, the two parts;
a roomy buy strip at the bottom: price left, button with its one-line microline right.
RENDER SWAP: the pair render (phone + box, hero_bundle_*) only needs new image sources in bundle.html. Its crop is set
below in ".oh:has(img[src*="hero_bundle"])" (tune --oh-pos-phone / --oh-pos-desk once the files are in); the
interim app tile (.oh-app) hides by itself there.
========================================================================== */
.oh { --oh-pos-phone: 50% 67%; /* hero_phone (1290 x 2000): the box sits between 54 % and 80 % of its height */
--oh-pos-desk: 72% 50%; /* hero_desktop (2880 x 1620): box 51 to 87 % across; 0 % from 1200px (see below) */
position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column;
padding-top: calc(var(--nav-h) + var(--safe-top) + 12px); padding-bottom: 18px; }
/* the pair render: hide the interim app tile and use the pair's own crop [CHECK both positions when the files land] */
.oh:has(img[src*="hero_bundle"]) { --oh-pos-phone: 50% 45%; --oh-pos-desk: 100% 50%; } /* phone uses hero_bundle_phone_crop (rows 600 to 1780 of the 1290x2000 render) */
.oh:has(img[src*="hero_bundle"]) .oh-app { display: none; }
.oh__text, .oh__parts, .oh__buy { position: relative; z-index: 1; }
.oh__h { font-size: clamp(40px, 11.8vw, 64px); line-height: 0.96; letter-spacing: -0.045em; }
.oh__mute { color: var(--g1); }
.oh__sub { margin-top: 14px; max-width: 34em; font-size: clamp(17px, 4.4vw, 18px); line-height: 1.45; color: var(--g1); }
/* the visual: a window onto the render; its height is what is left of screen one, within limits */
.oh__stage { position: relative; z-index: 0; flex: none; height: clamp(180px, calc(100vh - 556px), 420px); margin: 2px 0 -4px; }
@supports (height: 100svh) { .oh__stage { height: clamp(180px, calc(100svh - 556px), 420px); } }
.oh__media { display: block; position: absolute; top: 0; bottom: 0; left: 50%; width: min(100%, 600px); transform: translateX(-50%);
-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 82%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
-webkit-mask-composite: source-in;
mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 82%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
mask-composite: intersect; }
.oh__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--oh-pos-phone); }
/* the two parts, once: lime dot = today / vploq VPN (with the app tile), hollow ring = around February 2027 / vploq Home */
.oh-parts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.oh-part { display: flex; align-items: center; min-width: 0; }
.oh-part--now { gap: 12px; padding-right: 12px; }
.oh-part--later { padding-left: 16px; border-left: 1px solid var(--line); }
.oh-tag { margin: 0; min-width: 0; font-size: var(--t-micro); font-weight: 500; line-height: 1.35; color: var(--g1); }
.oh-tag__when { display: flex; white-space: nowrap; }
.oh-tag__p { display: block; padding-left: 16px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; }
/* the interim vploq VPN app tile (ported from vpn.css ".ap", static: UK, switch on). --k scales the 400 x 866 screen;
the phone rises from the tile's bottom edge, so only its top (country + switch) shows. */
.oh-app { --k: 0.1; --pad: 8px; --top: 7px; position: relative; flex: none; margin: 0; overflow: hidden;
width: calc(400px * var(--k) + 12px + 2 * var(--pad)); height: 62px; border-radius: 14px;
background: radial-gradient(120% 90% at 50% 0%, #1B1B20 0%, #0F0F12 70%); box-shadow: inset 0 0 0 1px var(--hair); }
.oh-app::after { /* the phone fades into the tile's floor: a card, not a photo object */
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16%; pointer-events: none;
background: linear-gradient(180deg, rgba(15, 15, 18, 0), #0F0F12 92%); }
.oh-app .ap-body { position: absolute; left: var(--pad); top: var(--top); width: calc(400px * var(--k) + 12px); padding: 6px;
border-radius: calc(54px * var(--k) + 6px); background: #050506; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); }
.oh-app .ap-view { position: relative; width: calc(400px * var(--k)); height: calc(866px * var(--k)); overflow: hidden; border-radius: calc(54px * var(--k)); }
.oh-app .ap { position: absolute; left: 0; top: 0; width: 400px; height: 866px; transform: scale(var(--k)); transform-origin: 0 0; overflow: hidden;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 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; }
.oh-app .ap-sb { position: absolute; left: 0; right: 0; top: 0; height: 60px; }
.oh-app .ap-sb__t { position: absolute; left: 36px; top: 24px; font-size: 16px; font-weight: 600; }
.oh-app .ap-sb__sys { position: absolute; right: 22px; top: 27px; width: 76px; height: 16px; }
.oh-app .ap-hd { position: absolute; left: 26px; right: 18px; top: 80px; display: flex; align-items: center; gap: 14px; }
.oh-app .ap-flag { width: 40px; height: 40px; flex: none; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); }
.oh-app .ap-flag svg { display: block; width: 100%; height: 100%; }
.oh-app .ap-hd__t { flex: 1; min-width: 0; display: grid; }
.oh-app .ap-hd__n { font-size: 15px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oh-app .ap-hd__s { margin-top: 3px; font-size: 13px; font-weight: 600; color: var(--lime); }
.oh-app .ap-swap { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 11px; background: #1C1C1C; }
.oh-app .ap-swap svg { width: 22px; height: 22px; fill: none; stroke: #CFCFCF; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.oh-app .ap-sw { position: absolute; left: 72px; top: 355px; width: 257px; height: 95px; border-radius: 48px; background: #101010; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.07); }
.oh-app .ap-knob { position: absolute; left: 169px; top: 7.5px; width: 80px; height: 80px; display: grid; place-items: center; border-radius: 50%;
background: var(--lime); box-shadow: 0 0 30px rgba(164, 255, 0, 0.4); }
.oh-app .ap-knob svg { width: 44px; height: 44px; fill: none; stroke: #0D0D0D; stroke-width: 2.2; stroke-linecap: round; }
/* the buy strip: price, then the button with its one microline */
.oh__buy { display: grid; gap: 14px; margin-top: 16px; }
.oh-price { display: grid; gap: 2px; margin: 0; }
.oh-price__tag { font-size: var(--t-micro); font-weight: 500; color: var(--g1); }
.oh-price__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.oh-price__now { font-family: var(--f-display); font-size: 38px; font-weight: 500; line-height: 1.05; letter-spacing: -0.04em; color: var(--ink); }
.oh-price__vat { font-size: 16px; font-weight: 500; color: var(--g1); }
.oh-price__was { font-size: 16px; color: var(--g2); margin-left: 4px; }
.oh-price__was s { text-decoration-thickness: 1px; }
.oh__cta { display: grid; gap: 10px; }
.oh__btn { width: 100%; }
.oh__fine { margin: 0; text-align: center; font-size: var(--t-micro); line-height: 1.4; color: var(--g2); text-wrap: balance; }
@media (min-width: 560px) and (max-width: 899px) {
.oh__parts, .oh__buy { max-width: 600px; }
}
/* desktop and landscape tablet */
@media (min-width: 900px) {
.oh { min-height: max(700px, 100vh); min-height: max(700px, 100svh);
padding-top: calc(var(--nav-h) + var(--safe-top) + clamp(24px, 7vh, 96px)); padding-bottom: clamp(28px, 4.5vh, 52px); }
.oh__h { font-size: clamp(60px, 6.1vw, 104px); line-height: 0.95; }
.oh__sub { margin-top: clamp(20px, 3vh, 30px); max-width: 25em; font-size: clamp(21px, 1.6vw, 24px); line-height: 1.42; }
.oh__sub-b { display: block; text-wrap: balance; } /* one sentence per part: the VPN line, then the box line */
/* the render fills the section behind the text, cropped by object-position (works for any render size) */
.oh__stage { position: absolute; inset: 0; z-index: -1; height: auto; margin: 0; }
.oh__media { inset: 0; left: 0; width: auto; transform: none; -webkit-mask-image: none; mask-image: none; }
.oh__media img { object-position: var(--oh-pos-desk); }
.oh__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%); }
/* the two parts: one row under the sub, the app tile beside "Today" */
.oh__parts { margin-top: clamp(28px, 5.5vh, 60px); }
.oh-parts { display: inline-grid; grid-template-columns: auto auto; align-items: end; margin: 0; padding: 0; border: 0; }
.oh-part--now { align-items: flex-end; gap: 18px; padding-right: 36px; }
.oh-part--later { align-self: stretch; align-items: flex-end; padding-left: 36px; border-left-color: var(--line-strong); }
.oh-tag { font-size: 15px; }
.oh-tag__when { margin-bottom: 2px; }
.oh-tag__p { font-family: var(--f-display); font-size: 22px; font-weight: 500; letter-spacing: -0.02em; }
.oh-app { --k: 0.3; --pad: 16px; --top: 17px; height: 176px; border-radius: 20px; }
/* the buy strip: price left, button + microline right, on one hairline, with room around it */
.oh__buy { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: auto; padding-top: clamp(24px, 3.4vh, 36px);
background: linear-gradient(var(--hair), var(--hair)) var(--gutter) 0 / calc(100% - 2 * var(--gutter)) 1px no-repeat; }
.oh-price { gap: 6px; }
.oh-price__tag { font-size: 15px; }
.oh-price__row { gap: 2px 14px; }
.oh-price__now { font-size: clamp(46px, 3.8vw, 60px); }
.oh-price__vat, .oh-price__was { font-size: 18px; }
.oh__cta { justify-items: end; gap: 12px; }
.oh__btn { width: auto; height: 58px; padding: 0 40px; font-size: 18px; }
.oh__fine { text-align: right; font-size: 14px; white-space: nowrap; color: var(--g1); }
}
/* short laptop screens (1366 x 768 and the like): a smaller tile, so the strip keeps its room */
@media (min-width: 900px) and (max-height: 820px) {
.oh-app { --k: 0.26; height: 152px; }
}
/* landscape tablet / small laptop: the render sits in a smaller window on the right (soft edges), the parts row gets
tighter, so the box and the labels never meet */
@media (min-width: 900px) and (max-width: 1199px) {
.oh { --oh-pos-desk: 85% 50%; }
.oh__media { inset: 14% 0 14% 40%;
-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; }
.oh-part--now { gap: 14px; padding-right: 24px; }
.oh-part--later { padding-left: 24px; }
.oh-tag__p { font-size: 20px; }
.oh-app { --k: 0.24; --pad: 14px; --top: 15px; height: 136px; border-radius: 18px; }
}
@media (min-width: 1200px) {
.oh { --oh-pos-desk: 0% 50%; } /* wide: the box moves out to the right third, clear of the headline */
.oh:has(img[src*="hero_bundle"]) { --oh-pos-desk: 100% 50%; }
}
/* ---------- 2 · scroll-open: styled by site.css only (the "Inside the box" tag was removed 08.10.2026) ---------- */
/* ==========================================================================
3 · way home (.hw) · BEGIN · the "what it does" diagram (redesign 07.10.2026)
One quiet panel: you (phone + laptop glyph) → encrypted line → your home (the real render in a house outline),
then a row of what you reach. Phone: stacked top to bottom, centred. Desktop (900px+): one row.
No lime (the pill / the hero button carry it). Motion: offer.js block 4 adds .is-armed / .is-on (plays once)
and .is-vis (on screen); the pulse runs only while visible and only without reduced motion. transform/opacity only.
========================================================================== */
.oa-what .hw { --hw-bg: #0E0E11; --stage: 112px; --pulse: 56px;
--hs: 144px; --u: calc(var(--hs) / 150); /* home stage height; --u = one unit of the house drawing (viewBox 200 x 150) */
position: relative; margin: 40px 0 0; overflow: hidden;
border: 1px solid var(--line); border-radius: var(--r-lg);
background: radial-gradient(90% 260px at 50% 0%, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0) 100%), var(--hw-bg); }
/* the route: three steps in reading order */
.oa-what .hw-route { display: flex; flex-direction: column; align-items: center; padding: 40px 20px 0; text-align: center; }
.oa-what .hw-node { display: grid; justify-items: center; gap: 18px; width: 100%; max-width: 320px; }
.oa-what .hw-stage { position: relative; display: grid; place-items: center; width: 100%; height: var(--stage); }
.oa-what .hw-txt { display: grid; gap: 4px; }
.oa-what .hw-k { font-size: var(--t-micro); font-weight: 600; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; color: var(--g2); }
.oa-what .hw-t { margin-top: 2px; font-family: var(--f-display); font-size: 21px; font-weight: 500; line-height: 1.2; letter-spacing: -0.015em; color: var(--ink); }
.oa-what .hw-n { font-size: var(--t-small); line-height: 1.45; color: var(--g1); text-wrap: balance; }
/* glyphs: 1.5px ink outlines, like the icon set */
.oa-what .hw-devices { width: 120px; height: 80px; overflow: visible; fill: none; stroke: var(--ink); stroke-width: 1.5px; stroke-linecap: round; stroke-linejoin: round; }
.oa-what .hw-devices * { vector-effect: non-scaling-stroke; }
.oa-what .hw-devices .hw-dim { stroke: var(--line-strong); }
.oa-what .hw-devices .hw-solid { fill: var(--hw-bg); }
.oa-what .hw-devices .hw-wifi { stroke: var(--g2); }
/* the home (redesign 08.10.2026): a fine architectural drawing, 1px lines with a gradient from a dim lime at the roof apex
to grey, walls that stop just short of the roof and fade towards a floor line; the render stands on that floor line.
Units: the drawing is 200 x 150 (viewBox) at --u px per unit; floor y 140, walls x 40 / 160, apex (100, 4).
The render (hero_phone, box 962 px wide, front edge at y 1576) is scaled so the box is 92 units wide and its front
edge sits on the floor; its own dark background is pushed to black (brightness/contrast) and blended away (lighten),
so no rectangle shows: only the box and a soft reflection remain. */
.oa-what .hw-node--home .hw-stage { height: var(--hs); }
.oa-what .hw-house { position: absolute; left: 50%; top: 0; width: calc(200 * var(--u)); height: var(--hs); transform: translateX(-50%);
overflow: visible; fill: none; stroke-width: 1px; stroke-linecap: round; stroke-linejoin: round; }
.oa-what .hw-house * { vector-effect: non-scaling-stroke; }
.oa-what .hw-roof, .oa-what .hw-walls { stroke: url(#hw-house-line); }
.oa-what .hw-floor { stroke: url(#hw-house-floor); }
.oa-what .hw-box { position: absolute; left: calc(50% - 62.26 * var(--u)); top: calc(-10.71 * var(--u));
width: calc(123.37 * var(--u)); max-width: none; height: auto; aspect-ratio: 1290 / 2000;
filter: brightness(0.885) contrast(1.38); mix-blend-mode: lighten;
-webkit-mask-image: linear-gradient(90deg, transparent 4%, #000 12%, #000 89%, transparent 97%), linear-gradient(180deg, transparent 44%, #000 52%, #000 78.8%, transparent 86%);
-webkit-mask-composite: source-in;
mask-image: linear-gradient(90deg, transparent 4%, #000 12%, #000 89%, transparent 97%), linear-gradient(180deg, transparent 44%, #000 52%, #000 78.8%, transparent 86%);
mask-composite: intersect; }
/* the encrypted line: vertical on phone. Rail + drawn fill + a travelling pulse, all clipped to a 16px strip. */
.oa-what .hw-link { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; margin: 18px 0; padding: 38px 0; }
.oa-what .hw-track { position: absolute; left: 50%; top: 0; bottom: calc(-18px - 4 * var(--u)); width: 16px; margin-left: -8px; overflow: hidden; pointer-events: none; } /* phone: runs on to the roof apex */
.oa-what .hw-track::before, .oa-what .hw-fill { content: ""; position: absolute; left: 7.5px; top: 0; bottom: 0; width: 1px; }
.oa-what .hw-track::before { background: var(--line-strong); }
.oa-what .hw-fill { background: linear-gradient(180deg, rgba(245, 245, 243, 0.25), rgba(245, 245, 243, 0.6)); transform-origin: 50% 0; }
.oa-what .hw-pulse { position: absolute; inset: 0; opacity: 0; }
.oa-what .hw-pulse i { position: absolute; left: 50%; bottom: 100%; width: 2px; height: var(--pulse); margin-left: -1px; border-radius: 2px;
background: linear-gradient(180deg, rgba(245, 245, 243, 0), rgba(245, 245, 243, 0.9)); }
.oa-what .hw-pulse i::after { content: ""; position: absolute; left: 50%; bottom: -2.5px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%;
background: var(--ink); box-shadow: 0 0 6px 1px rgba(245, 245, 243, 0.45); }
.oa-what .hw-pill { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 15px 0 12px;
border-radius: var(--radius-pill); background: var(--hw-bg); box-shadow: inset 0 0 0 1px var(--line-strong);
font-size: 14px; font-weight: 500; letter-spacing: 0.01em; color: var(--ink); white-space: nowrap; }
.oa-what .hw-pill svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5px; stroke-linecap: round; stroke-linejoin: round; }
.oa-what .hw-link__n { position: relative; z-index: 1; max-width: 16em; padding: 2px 10px; background: var(--hw-bg); }
/* (the "what you reach" icon row was replaced by the app screens, 08.10.2026; see "app screens + who (agent 2)") */
@media (min-width: 900px) {
.oa-what .hw { --stage: 160px; --hs: 160px; --col: clamp(220px, 21vw, 300px); margin-top: 56px; }
.oa-what .hw-route { display: grid; grid-template-columns: var(--col) minmax(160px, 1fr) var(--col); align-items: start;
padding: 72px clamp(32px, 4vw, 64px) 0; }
.oa-what .hw-node { max-width: none; gap: 28px; }
.oa-what .hw-t { font-size: 23px; }
.oa-what .hw-devices { width: 156px; height: 104px; }
.oa-what .hw-link { display: grid; grid-template-rows: var(--stage) auto; justify-items: center; gap: 28px; margin: 0; padding: 0; }
/* the line starts 18px after the phone glyph (its edge is 66px from the column centre) and ends exactly on the house wall
(60 units from the column centre); it meets the wall at 75 units, just under the eaves */
.oa-what .hw-track { left: calc(84px - var(--col) / 2); right: calc(60 * var(--u) - var(--col) / 2); top: calc(var(--stage) / 2 - 8px); bottom: auto; width: auto; height: 16px; margin: 0; }
.oa-what .hw-track::before, .oa-what .hw-fill { left: 0; right: 0; top: 7.5px; bottom: auto; width: auto; height: 1px; }
.oa-what .hw-fill { background: linear-gradient(90deg, rgba(245, 245, 243, 0.25), rgba(245, 245, 243, 0.6)); transform-origin: 0 50%; }
.oa-what .hw-pulse i { left: auto; right: 100%; top: 50%; bottom: auto; width: var(--pulse); height: 2px; margin: -1px 0 0;
background: linear-gradient(90deg, rgba(245, 245, 243, 0), rgba(245, 245, 243, 0.9)); }
.oa-what .hw-pulse i::after { left: auto; right: -2.5px; bottom: auto; top: 50%; margin: -2.5px 0 0; }
.oa-what .hw-pill { align-self: center; }
.oa-what .hw-link__n { align-self: start; padding: 0; background: none; }
}
/* the one-time play, then the pulse while on screen */
.oa-what .hw.is-armed .hw-fill { transform: scaleY(0); }
.oa-what .hw.is-armed .hw-lit .hw-house, .oa-what .hw.is-armed .hw-lit .hw-box, .oa-what .hw.is-armed .hw-lit .hw-txt { opacity: 0.3; }
.oa-what .hw.is-armed.is-on .hw-fill { transform: none; transition: transform 900ms var(--ease) 250ms; }
.oa-what .hw.is-armed.is-on .hw-lit .hw-house, .oa-what .hw.is-armed.is-on .hw-lit .hw-box, .oa-what .hw.is-armed.is-on .hw-lit .hw-txt { opacity: 1; transition: opacity 500ms var(--ease) 1050ms; }
@media (min-width: 900px) {
.oa-what .hw.is-armed .hw-fill { transform: scaleX(0); }
.oa-what .hw.is-armed.is-on .hw-fill { transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
.oa-what .hw.is-on.is-vis .hw-pulse { animation: hw-run-y 3600ms cubic-bezier(0.45, 0, 0.25, 1) 1900ms infinite; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
.oa-what .hw.is-on.is-vis .hw-pulse { animation-name: hw-run-x; }
}
@keyframes hw-run-y {
0% { transform: translateY(0); opacity: 0; }
6% { opacity: 1; }
58% { transform: translateY(calc(100% + var(--pulse))); opacity: 1; }
100% { transform: translateY(calc(100% + var(--pulse))); opacity: 0; }
}
@keyframes hw-run-x {
0% { transform: translateX(0); opacity: 0; }
6% { opacity: 1; }
58% { transform: translateX(calc(100% + var(--pulse))); opacity: 1; }
100% { transform: translateX(calc(100% + var(--pulse))); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.oa-what .hw .hw-fill, .oa-what .hw .hw-lit .hw-house, .oa-what .hw .hw-lit .hw-box, .oa-what .hw .hw-lit .hw-txt { transform: none; opacity: 1; transition: none; }
.oa-what .hw .hw-pulse { display: none; }
}
/* ---------- 3 · way home (.hw) · END ---------- */
/* ==========================================================================
APP SCREENS + WHO (agent 2) · BEGIN · 08.10.2026
Real product evidence instead of icon tiles and equal cards:
a) .oa-app three vploq app screens in a hairline phone frame (swipe row on phone, three phones on desktop, middle raised)
b) (bundle: the benefits list with the top-view render is cut)
c) .oa-who "Two engineers, building vploq in public": product photo, the two founders, company facts
Assets: assets/funnel/*.webp (lazy, each under 200 KB). Same tokens as the page, no lime, no eyebrows.
========================================================================== */
.oa-what .hw-route { padding-bottom: 44px; } /* the panel ends with the route now */
/* a) the app */
.oa-app { margin-top: 64px; }
.oa-app__h { color: var(--ink); } /* round 3: .display-l in the markup, the same 72px tier as every section heading */
.oa-app__sub { margin-top: 8px; max-width: 30em; font-size: var(--t-small); line-height: 1.5; color: var(--g1); }
/* phone: one large screen at a time (about 300px on a 390px phone, was 219px), the next one peeks in by about 50px */
.oa-app__row { display: grid; grid-auto-flow: column; grid-auto-columns: min(calc(100% - 44px), 340px); gap: 16px;
margin: 32px calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter) 8px;
overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.oa-app__row::-webkit-scrollbar { display: none; }
.oa-app__item { min-width: 0; scroll-snap-align: start; }
.oa-phone { padding: var(--ph-pad); border-radius: var(--ph-r); background: var(--ph-bg);
box-shadow: var(--ph-shadow); }
.oa-phone img { display: block; width: 100%; height: auto; border-radius: var(--ph-scr); background: #0C0C0C; }
.oa-app__t { margin-top: 20px; font-family: var(--f-display); font-size: 19px; font-weight: 500; line-height: 1.2; letter-spacing: -0.015em; color: var(--ink); }
.oa-app__p { margin-top: 6px; max-width: 24em; font-size: var(--t-small); line-height: 1.5; color: var(--g1); }
.oa-app__reach { margin-top: 48px; max-width: 34em; font-size: 17px; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.oa-app__note { margin-top: 10px; font-family: var(--f-mono); font-size: var(--t-micro); color: var(--g2); }
/* three small bars under the swipe row: the current screen is a muted lime accent */
.oa-app__dots { display: flex; gap: 6px; margin-top: 18px; }
.oa-app__dots i { width: 18px; height: 3px; border-radius: 2px; background: var(--line-strong); transition: background-color 250ms var(--ease), width 250ms var(--ease); }
.oa-app__dots i.is-on { width: 28px; background: var(--ink); }
@media (prefers-reduced-motion: reduce) { .oa-app__dots i { transition: none; } }
@media (min-width: 900px) {
.oa-app__dots { display: none; }
.oa-what .hw-route { padding-bottom: 72px; }
.oa-app { margin-top: 112px; text-align: center; }
.oa-app__sub { margin: 10px auto 0; }
.oa-app__row { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 296px)); justify-content: center; gap: clamp(40px, 6vw, 96px);
margin: 72px 0 0; padding: 0; overflow: visible; }
.oa-app__item:nth-child(2) { transform: translateY(-36px); } /* the pairing phone sits a little higher: a hand-set row, not a grid */
.oa-app__p { margin-left: auto; margin-right: auto; }
.oa-app__reach { margin: 88px auto 0; }
}
/* c) who is behind it */
.oa-who__grid { display: grid; gap: 40px; }
.oa-who__media { margin: 0; }
.oa-who__photo { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-lg); background: #2a2a2c; }
.oa-who__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.oa-who__media figcaption { margin-top: 12px; font-family: var(--f-mono); font-size: var(--t-micro); line-height: 1.4; color: var(--g2); }
.oa-who__text { min-width: 0; }
.oa-who__lead { margin-top: 16px; }
.oa-who__people { margin-top: 28px; border-top: 1px solid var(--line); }
.oa-who__person { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.oa-who__person img { flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: #1a1a1d; }
.oa-who__name { font-family: var(--f-display); font-size: 18px; font-weight: 500; line-height: 1.25; color: var(--ink); }
.oa-who__role { margin-top: 2px; font-size: var(--t-small); line-height: 1.45; color: var(--g1); }
.oa-who__facts { margin: 22px 0 0; }
.oa-who__facts > div { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 12px; padding: 9px 0; font-size: var(--t-small); line-height: 1.45; }
.oa-who__facts dt { color: var(--g2); }
.oa-who__facts dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.oa-who__facts a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--g2); text-underline-offset: 3px; transition: text-decoration-color 200ms var(--ease); }
.oa-who__facts a:hover { text-decoration-color: var(--ink); }
@media (min-width: 1000px) {
.oa-who__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; align-items: center; }
}
/* ---------- APP SCREENS + WHO (agent 2) · END ---------- */
/* ==========================================================================
4 · steps · a timeline, 3 steps: one hairline rail, filled dots for order and updates, a hollow one for February.
No circles, no dashes, no lime.
========================================================================== */
.st { position: relative; margin-top: 40px; }
.st__step:not(:last-child)::before { content: ""; position: absolute; left: 4px; top: 13px; bottom: -4px; width: 1px; background: var(--line-strong); }
.st__step { position: relative; padding: 0 0 30px 32px; }
.st__step:last-child { padding-bottom: 0; }
.st__step::after { content: ""; position: absolute; left: 0; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); }
.st__step:last-child::after { background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--g1); }
.st__n { display: none; }
.st__when { display: block; font-size: var(--t-small); font-weight: 400; line-height: 1.3; color: var(--g2); } /* plain date line, not an eyebrow (08.10.2026) */
.st__step:last-child .st__when { color: var(--ink); }
.st__step h3 { margin-top: 6px; font-family: var(--f-display); font-size: 22px; font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; }
.st__step p { margin-top: 6px; font-size: var(--t-small); line-height: 1.5; color: var(--g1); max-width: 30em; }
@media (min-width: 1000px) {
.st { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; margin-top: 72px; }
.st::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: var(--line-strong); }
.st__step:not(:last-child)::before { display: none; }
.st__step { padding: 32px 0 0; }
.st__step:last-child { padding-bottom: 0; }
.st__step::after { top: 0; }
.st__step h3 { font-size: 24px; }
}
/* ==========================================================================
5 · offer · a product spec sheet, not a pricing table. Frameless renders beside it.
========================================================================== */
.oa-offer .ho-card { padding: 28px 22px 24px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #111114; }
.oa-offer .ho-card__top { align-items: baseline; }
.oa-offer .ho-card__badge { padding: 0; border: 0; border-radius: 0; color: var(--g2); }
.oa-offer .ho-price { gap: 4px 12px; margin-top: 22px; }
.oa-offer .ho-price__now { font-size: clamp(44px, 5vw, 72px); }
.oa-offer .ho-price__was { margin-left: 2px; color: var(--g2); }
.oa-offer .ho-price__note { margin-top: 10px; }
.oa-offer .ho-gift { grid-template-columns: minmax(0, 1fr); margin-top: 22px; padding: 16px 0; }
.oa-offer .ho-gift svg { display: none; }
.oa-offer .ho-card__btn { margin-top: 22px; }
.oa-offer .ho-card__safe { color: var(--g2); font-size: var(--t-micro); }
/* the sheet: two labelled tables in one row style; the labels are small sentence-case h3s, not eyebrows (08.10.2026) */
.ho-sheet__k { margin-top: 34px; 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); }
.oa-offer .ho-terms { margin: 0; border-top: 0; }
.oa-offer .ho-terms > div { grid-template-columns: 108px minmax(0, 1fr); padding: 13px 0; }
.oa-offer .ho-terms dd .todo { margin-left: 2px; }
.oa-offer .ho-keys { gap: 0; margin-top: 0; }
.oa-offer .ho-keys li { display: block; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: var(--t-small); font-weight: 500; line-height: 1.45; }
.oa-offer .ho-keys .ho-ico { display: none; }
/* renders: frameless, 20px radius. Bundle: one render (ports) beside the card on desktop, none under it on phone */
.oa-offer .ho-shot__frame { border: 0; border-radius: var(--r-lg); background: #0d0d0f; }
.oa-offer .ho-price__now { white-space: nowrap; }
.oa-offer .ho__media { display: none; }
.oa-offer .ho-shot--ports img { object-position: 62% 50%; transform: none; }
.oa-offer .ho-shot figcaption { color: var(--g2); }
@media (min-width: 560px) {
.oa-offer .ho-card { padding: 36px 34px 32px; }
.oa-offer .ho-keys { display: block; } /* bundle: 3 rows now, one column */
}
@media (min-width: 1000px) {
.oa-offer .ho__grid { gap: 24px; }
.oa-offer .ho-card { padding: 48px 48px 40px; }
.oa-offer .ho__media { display: block; }
.oa-offer .ho-shot--ports { position: sticky; top: calc(var(--nav-h-slim, 56px) + 24px); }
.oa-offer .ho-shot--ports .ho-shot__frame { aspect-ratio: 16 / 10; } /* the RJ45 stays inside the frame */
.oa-offer .ho-shot--ports img { object-position: 60% 50%; }
}
/* ==========================================================================
6 · FAQ · native details; a thin plus turns into a cross (400 ms), press dims (80 ms)
========================================================================== */
.oa-faq__grid { display: grid; gap: 32px; }
.oa-mail { color: var(--ink); text-decoration: underline; text-decoration-color: var(--g2); text-underline-offset: 3px; transition: text-decoration-color 200ms var(--ease); }
.oa-mail:hover { text-decoration-color: var(--ink); }
.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: 64px; padding: 18px 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); }
.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(--ink); 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); }
.faq__item summary:hover .faq__ico, .faq__item[open] .faq__ico { color: var(--ink); }
.faq__item[open] .faq__ico { transform: rotate(45deg); }
.faq__a p { padding: 0 44px 24px 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) {
.oa-faq__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; }
.faq__item summary { min-height: 72px; }
}
/* ==========================================================================
7 · final CTA · a bookend: the render, the headline, the lime button. No card.
========================================================================== */
.oa-final { padding-top: 0; }
.oa-final__card { position: relative; display: grid; }
.oa-final__img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-lg); background: #0d0d0f; }
.oa-final__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.oa-final__txt { display: flex; flex-direction: column; gap: 16px; padding: 28px 0 0; }
.oa-final__btn { width: 100%; margin-top: 8px; }
.oa-final__fine { font-size: var(--t-micro); text-align: center; }
@media (min-width: 900px) {
.oa-final__card { min-height: clamp(480px, 62vh, 620px); align-items: center; }
.oa-final__img { position: absolute; inset: 0 0 0 40%; aspect-ratio: auto; }
.oa-final__img img { object-position: 50% 50%; transform: none; }
.oa-final__img::after { content: ""; position: absolute; inset: 0;
background: linear-gradient(90deg, var(--bg) 0%, rgba(10, 10, 12, 0) 30%), linear-gradient(0deg, var(--bg) 0%, rgba(10, 10, 12, 0) 16%), linear-gradient(180deg, var(--bg) 0%, rgba(10, 10, 12, 0) 16%); }
.oa-final__txt { position: relative; z-index: 1; max-width: 46%; padding: 64px 24px 64px 0; }
.oa-final__btn { width: auto; align-self: flex-start; padding: 0 34px; }
.oa-final__fine { text-align: left; }
}
/* ---------- floating pill (phone): calmer glass, 56px ---------- */
.pill { height: 56px; padding: 0 6px 0 20px; background: rgba(16, 16, 19, 0.8);
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-size: var(--t-micro); color: var(--g1); }
/* ---------- footer: one quiet line ---------- */
.oa-footer { padding: 28px 0 calc(28px + env(safe-area-inset-bottom, 0px)); font-size: var(--t-small); }
.oa-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; color: var(--g2); }
.oa-footer__links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.oa-footer__links a { color: var(--g1); transition: color 150ms var(--ease); }
.oa-footer__links a:hover { color: var(--ink); }
.oa-footer__links a:active { opacity: 0.7; transition-duration: 80ms; }
@media (min-width: 900px) { .oa-footer { padding: 36px 0; } }
/* bundle: the footer line to the VPN-only page was removed 09.10.2026 (section 6b carries it) */
/* (round 2: the pill already steps aside 80px before the footer, so the footer needs no extra room under it) */
/* ==========================================================================
From version B (vploq.com shop, SPEC-offer-b-vploqcom.md): the shop lime and the shop button reactions.
Lime stays on the button only; nothing else on the page changes colour.
========================================================================== */
:root {
--lime: #A4FF00; /* shop --vp-green */
--lime-strong: #A4FF00; /* the CTA keeps its colour on hover: it lifts, glows and sheens instead */
--lime-ink: #0E0E0E; /* shop --vp-on-green */
--g2: #8A8F94; /* faint grey raised to 6:1 contrast (was 4.13:1) */
}
: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); }
/* primary button = shop .vp-cta: lift + lime glow + sheen on hover (mouse only), press 0.982 in 90 ms */
.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; }
}
@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; } }
/* header pill = shop .vp-nav-cta hover: fills lime (mouse only); default look unchanged */
@media (hover: hover) and (pointer: fine) {
.oa-header .nav-pill:hover { background: var(--lime); color: var(--lime-ink); box-shadow: inset 0 0 0 1px var(--lime); }
}
/* ==========================================================================
A touch more green (user, 08.10.2026): muted lime on small accents only.
The button stays the brightest thing on every screen; headlines stay white/grey.
========================================================================== */
:root {
--lime-soft: rgba(164, 255, 0, 0.78); /* small caps labels: still >= 9:1 on the dark surfaces */
--lime-dim: rgba(164, 255, 0, 0.3);
--lime-ghost: rgba(164, 255, 0, 0.05);
}
/* 1 · way home: bundle (08.10.2026) keeps it ink/grey: lime is the "today / vploq VPN" signal on this page, and the
way home belongs to vploq Home (around February 2027) */
/* 2 · the hero price label: sentence case, grey (it names vploq Home, so no lime): now in the hero block above */
/* 3 · steps: lime dots for today, February stays a hollow ring */
.st__step::after { background: var(--lime); box-shadow: 0 0 10px -2px rgba(164, 255, 0, 0.6); }
.st__step:last-child::after { background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--g1); }
.st__step:not(:last-child) .st__when { color: var(--g2); }
/* 4 · offer card: the bonus line gets a fine lime frame */
.oa-offer .ho-gift { padding: 14px 16px; border: 1px solid var(--lime-dim); border-radius: 12px;
background: linear-gradient(120deg, var(--lime-ghost), transparent 70%); }
/* ---------- 08.10.2026: calmer step dots (green check). Bundle: lime-soft only on "today", the middle dot ink ---------- */
.st__step::after { background: var(--ink); box-shadow: none; }
.st__step:first-child::after { background: var(--lime-soft); }
.st__step:first-child .st__when { color: var(--ink); }
.st__step:last-child::after { background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--g1); }
/* ==========================================================================
premium motion (08.10.2026) · driven by offer.js block 1 (one observer, .is-in once). transform only, calm ease-out.
Hidden states exist only under html.rv (offer.js running) and only without reduced motion, so content always shows
if the script fails, and reduced motion gets the final state at once.
========================================================================== */
:root { --ease-calm: cubic-bezier(0.2, 0.7, 0.25, 1); }
/* 1 · headings, line by line: the heading itself does not fade or rise; its words (.lw, offer.js) slide up from a clip
edge just under their line, one line after the other (80 ms). The clip reaches above and beside the word, so nothing
is cut once in place; inline-block words keep the normal line breaks and baselines. */
.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; }
}
/* 2 · renders and app screens settle from 1.04 to 1 inside their frames (the individual `scale` property composes with
any crop transform the image already has). Not on the hero, the scroll-open canvas, the house render or the portraits. */
.oa-phone__screen { overflow: hidden; border-radius: var(--ph-scr); }
@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; }
/* iOS Safari: keep the rounded clip while the image is composited */
.rv .oa-phone__screen, .rv .ob__img, .rv .oa-who__photo, .rv .ho-shot__frame, .rv .oa-final__img { -webkit-mask-image: -webkit-radial-gradient(#fff, #000); }
}
/* ==========================================================================
bundle · 3 · world map, ported from vpn.css "2 · world map" (unchanged; bundle tweaks after it)
========================================================================== */
/* ==========================================================================
2 · world map (.wm, data-section="vpn-map") · ported from the homepage prototype's vpn-demo (homepage-v2/v4-backup),
namespaced wm-. Stage: dotted map (wider than the frame on narrow stages, it pans to the country), the app on a
phone rising from the bottom edge, one lime line from the phone to the country you picked. State: data-state on/busy/off.
Phone: heading, sentence, the panel full width, chips wrap under it. Desktop: text left, the panel right.
========================================================================== */
.wm__grid { display: grid; gap: 24px; }
.wm__text { min-width: 0; }
.wm__text .lead { margin-top: 16px; max-width: 26em; }
.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 (vpn.css ".ap", at native size so it stays legible): 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-*, see "bundle · one phone style"). */
.wm-phone { position: absolute; z-index: 3; left: 50%; top: calc(100% - 214px);
width: 204px; height: 440px; margin-left: -102px; 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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 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__t { position: absolute; left: 20px; top: 11px; font-size: 11px; font-weight: 600; line-height: 1; }
.wm-sb__sys { position: absolute; right: 14px; top: 12px; width: 40px; height: 9px; }
.wm-hd { position: absolute; left: 14px; right: 12px; top: 42px; 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: 104px; 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.4); }
.wm-stage[data-state="busy"] .wm-knob svg, .wm-stage[data-state="on"] .wm-knob svg { stroke: #0D0D0D; }
.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 that wrap under the panel; the chosen one gets an ink outline (no lime) */
.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-radius: var(--radius-pill);
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; -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(--ink); }
.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); } }
.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 (min-width: 768px) {
.wm-stage { height: 540px; }
.wm-mapbox { top: 44px; }
.wm-phone { top: calc(100% - 246px); width: 220px; margin-left: -110px; }
.wm-hd { left: 16px; top: 44px; }
.wm-power { top: 110px; 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); }
}
@media (min-width: 1000px) {
.wm__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(48px, 6vw, 88px); align-items: center; } /* 88px max: the six chips stay on one row at 1920 */
.wm__text .lead { margin-top: 22px; }
}
@media (prefers-reduced-motion: reduce) {
.wm-mapbox, .wm-path, .wm-pin, .wm-tag, .wm-knob, .wm-knob svg, .wm-status { transition: none !important; }
}
/* bundle tweaks: chips hidden without JS (vpn.css rule) */
html:not(.js) .wm-chips { display: none; }
@media (prefers-reduced-motion: reduce) { .wm-chip { transition: none; } }
/* ==========================================================================
bundle · the pieces that tell the two parts apart
Time marks: a filled dot = today (vploq VPN), a hollow dot = around February 2027 (vploq Home). Sentence case, not eyebrows.
========================================================================== */
/* ONE DOT SYSTEM (08.10.2026): a lime-soft filled dot = today / vploq VPN, a hollow ring = around February 2027 / vploq Home.
Same 8px mark in the hero (the two parts, once), the timeline, the section labels,
the app row and the offer card. */
.bu-dot { display: inline-flex; align-items: center; gap: 8px; }
.bu-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.bu-dot--now::before { background: var(--lime-soft); }
.bu-dot--later::before { box-shadow: inset 0 0 0 1.5px var(--g1); }
.bu-when { margin-bottom: 14px; font-size: var(--t-small); line-height: 1.3; color: var(--ink); }
.bu-h { max-width: 15em; }
[data-section="scroll-open"] .so-intro .bu-when { margin-bottom: -6px; }
.bu-sofacts { font-size: var(--t-small); line-height: 1.5; color: var(--g1); }
/* section 2: the line under the timeline */
.bu-split { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); max-width: 36em; font-size: var(--t-body); line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.bu-split__b { color: var(--g1); }
@media (min-width: 1000px) { .bu-split { margin-top: 56px; } }
/* section 3: the fact sentence under the map */
.bu-facts { margin-top: 6px; font-size: var(--t-small); line-height: 1.5; color: var(--g1); max-width: 34em; }
/* offer card: the two parts as separate lines, in time order */
.bu-items { margin-top: 22px; border-top: 1px solid var(--line-strong); }
/* each line: a 52px picture (VPN: the app connected; Home: the box), name with its time dot, when, value */
.bu-item { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; column-gap: 14px; row-gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.bu-item__thumb { position: relative; grid-column: 1; grid-row: 1 / span 3; align-self: start; width: 52px; height: 52px; overflow: hidden; border-radius: var(--r-sm); background: #0C0C0C; }
.bu-item__thumb::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--line); pointer-events: none; }
.bu-item__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bu-item__thumb--home img { object-position: 50% 60%; transform: scale(1.25); }
.bu-item__name { grid-column: 2; font-family: var(--f-display); font-size: 18px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); }
.bu-item__when { grid-column: 2; font-size: var(--t-small); line-height: 1.4; color: var(--g1); }
.bu-item__val { grid-column: 3; grid-row: 1 / span 2; align-self: center; text-align: right; font-size: var(--t-small); font-weight: 500; line-height: 1.4; color: var(--ink); white-space: nowrap; }
.bu-item__val s { margin-left: 4px; color: var(--g2); font-weight: 400; text-decoration-thickness: 1px; }
/* the one price for both, under the two lines */
.bu-total { margin-top: 16px; font-size: var(--t-body); font-weight: 500; line-height: 1.45; color: var(--ink); }
/* scroll-open: shorter track (was 200vh desktop / 180vh phone); the canvas logic is unchanged */
[data-section="scroll-open"].so-live .so-track { height: 170vh; }
@media (max-width: 767px) {
[data-section="scroll-open"].so-live .so-track { height: 180vh; } /* bundle 08.10.2026 (round 2): 180vh, so each caption holds for a real scroll; the page trims elsewhere */
}
/* bundle · phone length (08.10.2026, measured at 390 x 844): calmer spacing and a smaller app row keep the page near 10 screens */
@media (max-width: 767px) {
.section { padding: 40px 0; }
.oa-final { padding-top: 0; }
.oa-what .hw-route { padding: 28px 20px 32px; }
.oa-what .hw-link { margin: 10px 0; padding: 26px 0; }
.oa-app { margin-top: 48px; }
.oa-app__row { grid-auto-columns: 196px; margin-top: 24px; }
.oa-app__t { margin-top: 14px; font-size: 17px; }
.oa-app__reach { margin-top: 32px; }
.wm-stage { height: 370px; }
.oa-offer .ho-terms > div { padding: 8px 0; } .st__step { padding-bottom: 24px; }
.oa-offer .ho-keys li { padding: 10px 0; }
.ho-sheet__k { margin-top: 28px; }
}
/* bundle · offer card without the big price block: the two lines carry the prices */
.oa-offer .bu-items { margin-top: 20px; }
.oa-offer .bu-item__val { font-family: var(--f-display); font-size: 17px; }
.oa-offer .bu-item__val s { font-family: var(--f-body, inherit); font-size: var(--t-small); }
.oa-offer .ho-price__note { margin-top: 12px; }
.bu-item__price { font-variant-numeric: tabular-nums; }
@media (max-width: 767px) {
.faq__item summary { min-height: 54px; padding: 14px 0; }
}
@media (max-width: 767px) {
.oa-what .hw { --stage: 96px; --hs: 128px; }
.oa-offer .ho-keys li { padding: 9px 0; }
.oa-final__img { aspect-ratio: 4 / 3; } /* the whole box, no cut top edge */
.oa-final__img img { object-position: 50% 50%; }
}
/* offer card lines: the struck reference price sits under the price, so the names keep their width on phone */
.oa-offer .bu-item__val s { display: block; margin: 2px 0 0; }
/* narrow phones: the value moves under the text (third row), so name and "when" keep a readable width */
@media (max-width: 559px) {
.bu-item__val, .oa-offer .bu-item__val { grid-column: 2; grid-row: auto; align-self: start; text-align: left; margin-top: 4px; }
.oa-offer .bu-item__val s { display: inline; margin-left: 6px; }
}
.oa-offer .ho-terms > div { grid-template-columns: 124px minmax(0, 1fr); }
/* app row label (Home chapter) */
.oa-app__head .bu-when { margin-bottom: 12px; }
/* ==========================================================================
bundle · desktop alignment (08.10.2026, REVIEW-bundle-visual.md §4)
1. scroll-open: the intro, captions and spec line start on the page container's text edge (112px at 1440), not at the gutter
2. the dead gap before the VPN section: the VPN text sits at the top of the map panel, and the two-parts section ends sooner
========================================================================== */
@media (min-width: 900px) {
[data-section="scroll-open"].so-live .so-intro { left: max(var(--gutter), calc((100% - 1360px) / 2 + var(--gutter))); }
[data-section="scroll-open"].so-live .so-captions,
[data-section="scroll-open"].so-live .so-spec { left: max(var(--gutter), calc((100% - 1360px) / 2 + var(--gutter))); right: max(var(--gutter), calc((100% - 1360px) / 2 + var(--gutter))); }
}
@media (min-width: 1000px) {
.wm__grid { align-items: start; }
.wm__text { padding-top: 8px; }
.bu-two { padding-bottom: calc(var(--pad-y) * 0.5); }
}
/* ==========================================================================
bundle · round 2 fixes (08.10.2026, REVIEW-bundle2-design / -clarity / -qa)
========================================================================== */
/* type: three body steps on this page. --t-body (lead and long answers), --t-small 15px (body notes), --t-micro 14px
(captions, tags, fine print; was 13px). Headings: .display-l for every section, the FAQ and the app heading included (round 3). */
:root { --t-micro: 14px; }
/* one phone style for the map phone and the app row: same bezel, radius and shadow (phone sizes below 768px) */
:root { --ph-r: 40px; --ph-pad: 6px; --ph-scr: 34px; --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); }
@media (max-width: 767px) { :root { --ph-r: 32px; --ph-pad: 5px; --ph-scr: 27px; } }
/* hero: one line under each name saying what it does */
.oh-tag__d { display: block; margin-top: 2px; padding-left: 16px; font-size: var(--t-micro); font-weight: 400; line-height: 1.35; color: var(--g1); text-wrap: balance; }
.oh__stage { height: clamp(170px, calc(100vh - 592px), 420px); }
@supports (height: 100svh) { .oh__stage { height: clamp(170px, calc(100svh - 592px), 420px); } }
@media (min-width: 900px) {
.oh-tag__d { margin-top: 4px; font-size: var(--t-small); white-space: nowrap; }
.oh__stage { height: auto; }
}
/* header: solid once scrolled, so no lime button shows through it as a green smudge */
.oa-header.is-scrolled { background: rgba(10, 10, 12, 0.98); }
.oa-header .logo { min-height: 44px; align-items: center; }
/* floating pill: an opaque bar, nothing shows through it */
.pill { background: #121215; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* scroll-open: no progress hairline (it read as a broken border at the end) */
[data-section="scroll-open"].so-live .so-progress { display: none; }
/* desktop: the captions keep about 40px clear of the render (left third, measured from the container edge) */
@media (min-width: 900px) {
[data-section="scroll-open"].so-live .so-cap { max-width: calc(33vw - max(var(--gutter), (100vw - 1360px) / 2 + var(--gutter)) - 16px); }
}
/* phone: the copy sits on top, the box below it, never on top of each other. All copy (intro, captions, spec) uses one
slot under the header; the canvas starts under that slot (bundle.js sizes the canvas by its own box). */
@media (max-width: 767px) {
[data-section="scroll-open"] { --so-top: calc(var(--nav-h-slim, 56px) + var(--safe-top, 0px) + 20px); --so-copy: 236px; }
[data-section="scroll-open"].so-live .so-intro { top: var(--so-top); }
[data-section="scroll-open"].so-live .so-captions { top: var(--so-top); bottom: auto; }
[data-section="scroll-open"].so-live .so-cap { top: 0; bottom: auto; max-width: none; }
[data-section="scroll-open"].so-live .so-spec { top: var(--so-top); bottom: auto; font-size: var(--t-body); color: var(--ink); max-width: 22em; }
[data-section="scroll-open"].so-live .so-canvas { top: calc(var(--so-top) + var(--so-copy)); height: calc(100% - var(--so-top) - var(--so-copy));
-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 36px); mask-image: linear-gradient(180deg, transparent 0, #000 36px); }
[data-section="scroll-open"].so-live .so-stage::after { display: none; }
}
/* tap targets: 44px for the footer links and the contact links */
.oa-footer__links { gap: 0 22px; }
.oa-footer__links a { display: inline-flex; align-items: center; min-height: 44px; }
.oa-who__facts > div { padding: 0; align-items: center; }
.oa-who__facts dd a { display: inline-flex; align-items: center; min-height: 44px; }
/* offer card: hardware rows in regular weight (the card had everything in bold) */
.oa-offer .ho-keys li { font-weight: 400; }
/* phone length (round 2, 390 x 844): the who render in a wider frame (the side view is 2.4:1), calmer gaps */
@media (max-width: 767px) {
.oa-who__photo { aspect-ratio: 2 / 1; }
.oa-who__grid { gap: 28px; }
.oa-footer { padding-top: 20px; }
.st { margin-top: 28px; }
.bu-split { margin-top: 28px; padding-top: 16px; }
.oa-app { margin-top: 40px; }
}
/* phone: the pair render must show the whole phone screen and the whole box in the short first-screen window */
@media (max-width: 899px) {
.oh:has(img[src*="hero_bundle"]) .oh__media img { object-fit: contain; object-position: 50% 50%; }
.oh:has(img[src*="hero_bundle"]) .oh__media {
-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 88%, transparent 100%);
mask-image: linear-gradient(180deg, #000 0%, #000 88%, transparent 100%); }
}
/* ==========================================================================
bundle · round 3 fixes (08.10.2026, REVIEW-bundle3-design / -clarity / -qa)
========================================================================== */
/* hero, phone: the render's own box (no letterbox), so its left and right edges can fade into the page; the fades stop
short of the phone (from 22 % across) and the box (to 83 % across), so both stay fully visible */
@media (max-width: 899px) {
.oh:has(img[src*="hero_bundle"]) .oh__media { width: auto; max-width: 100%; aspect-ratio: 1290 / 1180;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 17%, #000 85%, transparent 100%), linear-gradient(180deg, #000 0%, #000 86%, transparent 100%);
-webkit-mask-composite: source-in;
mask-image: linear-gradient(90deg, transparent 0%, #000 17%, #000 85%, transparent 100%), linear-gradient(180deg, #000 0%, #000 86%, transparent 100%);
mask-composite: intersect; }
}
/* hero, wide screens: the render moves 5vw to the right, so the headline keeps clear air before the phone
(its left edge is empty floor, faded into the page) */
@media (min-width: 1600px) {
.oh:has(img[src*="hero_bundle"]) .oh__media img { transform: translateX(5vw);
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%); mask-image: linear-gradient(90deg, transparent 0%, #000 22%); }
}
/* scroll-open: the stage fades into the page over its last 160px (110px on phone), so no seam shows as the scene
scrolls out. The spec line (z-index 2) stays above the fade. */
[data-section="scroll-open"].so-live .so-stage::after {
height: 45%;
background: linear-gradient(to top, var(--bg) 0, rgba(10, 10, 12, 0) 160px), linear-gradient(to top, rgba(10, 10, 12, 0.85), rgba(10, 10, 12, 0)); }
@media (max-width: 767px) {
[data-section="scroll-open"].so-live .so-stage::after { display: block; height: 110px; background: linear-gradient(to top, var(--bg) 0, rgba(10, 10, 12, 0) 100%); }
}
/* reduced motion / no JS: the still fades out at its bottom edge too */
[data-section="scroll-open"] .so-still { -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, #000 78%, transparent 100%); }
/* who: who_box (2400 x 1000) in its own shape, no frame */
.oa-who__photo { aspect-ratio: 12 / 5; border-radius: 0; background: transparent; }
.oa-who__photo picture { display: block; width: 100%; height: 100%; }
.oa-who__photo img { object-fit: cover; /* an ellipse: the box (33 to 66 % across) stays solid, the floor band, the reflection and every edge fade out */
-webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 48%, #000 46%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 48%, #000 46%, transparent 100%); }
/* offer: offer_box (16:10) fills the frame, centred */
.oa-offer .ho-shot--ports img { object-position: 50% 50%; }
/* offer card: the VPN thumb shows the screen header (flag, place) and the knob, not the whole phone */
.bu-item__thumb--vpn img { transform: scale(2.1); transform-origin: 51.5% 32%; } /* shows about x 162 to 447, y 100 to 385 of the 600px thumb_phone */
/* final CTA, desktop: a square of the render centred in the right part, faded in a circle, so no rectangle edge shows */
@media (min-width: 900px) {
.oa-final__img { background: transparent; border-radius: 0; overflow: visible; }
.oa-final__img::after { display: none; }
.oa-final__img img { left: 50%; right: auto; top: 0; width: auto; height: 100%; aspect-ratio: 1; transform: translateX(-50%);
-webkit-mask-image: radial-gradient(circle closest-side, #000 66%, transparent 100%); mask-image: radial-gradient(circle closest-side, #000 66%, transparent 100%); }
}
/* ==========================================================================
bundle · round 4 fixes (08.10.2026, REVIEW-bundle4-design / -clarity / -qa)
========================================================================== */
/* who: the box is about 31 % of who_box's width, so the frame crops in and scales until the box fills about 60 % of it.
The oval fade sits on the frame (not on the scaled img), so the frame edge never shows. Phone: full bleed. */
.oa-who .oa-who__photo { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 0; background: transparent;
-webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 48%, #000 70%, transparent 100%);
mask-image: radial-gradient(ellipse 50% 50% at 50% 48%, #000 70%, transparent 100%); }
.oa-who .oa-who__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
transform: scale(1.2); transform-origin: 50% 48%; -webkit-mask-image: none; mask-image: none; }
@media (max-width: 767px) {
.oa-who .oa-who__media { margin-inline: calc(-1 * var(--gutter)); }
}
@media (min-width: 768px) and (max-width: 999px) {
.oa-who .oa-who__media { max-width: 640px; margin-inline: auto; width: 100%; }
}
@media (min-width: 1000px) {
.oa-who .oa-who__photo { aspect-ratio: 4 / 3; }
.oa-who .oa-who__photo img { transform: scale(1.04); }
}
/* offer: offer_box2 (16:10, top three-quarter view) with a soft edge fade on all four sides, on the frame (the img has
the settle scale), so no rectangle shows even if its floor is a few levels off the page */
.oa-offer .ho-shot--ports .ho-shot__frame { border: 0; border-radius: 0; background: transparent;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, 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 16%, #000 84%, transparent 100%), linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
mask-composite: intersect; }
/* offer terms, narrow phones: label above value, so no value wraps into a narrow column */
@media (max-width: 479px) {
.oa-offer .ho-terms > div { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 10px 0; }
.oa-offer .ho-terms dt { font-size: var(--t-micro); }
}
/* phone: the floating pill (56px, 12px off the bottom) never covers a focused element or an opened FAQ answer */
@media (max-width: 767px) {
html { scroll-padding-bottom: calc(56px + 24px + env(safe-area-inset-bottom, 0px)); }
}
/* VPN item: the price after the free months sits under "6 months free", small and grey, like the struck box price */
.bu-item__then { display: block; margin-top: 2px; font-family: var(--f-body, inherit); font-size: var(--t-small); font-weight: 400; line-height: 1.35; color: var(--g1); white-space: normal; }
/* ==========================================================================
bundle · round 6 (09.10.2026, REVIEW-bundle5-design / -qa): final polish
========================================================================== */
/* 1 · one order, two parts: one quiet picture per step (decorative; the text carries the meaning).
Today = the VPN phone, until it ships = a "Build update" notification from vploq (thumb_message, 09.10.2026), around February 2027 = the box.
Round 7: all three sit in the same dark studio on the page colour (thumb_phone, thumb_message, thumb_box), in one
tile: same size, radius, hairline and background. Lime dot = today / vploq VPN, hollow ring = February / vploq Home.
Phone: a 72px tile beside the text; desktop (>= 1000px): a row of tiles above the rail. */
.st__vis { position: relative; overflow: hidden; border-radius: 14px; background: #0A0A0C; }
.st__vis::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--line); pointer-events: none; }
.st__vis img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* the rail starts in lime at "today" and settles to the hairline */
.st__step:first-child::before { background: linear-gradient(180deg, var(--lime-dim), var(--line-strong) 70%); }
@media (max-width: 999px) {
.st__step { display: grid; grid-template-columns: minmax(0, 1fr) 72px; column-gap: 16px; align-content: start; }
.st__step > * { grid-column: 1; }
.st__step > .st__vis { grid-column: 2; grid-row: 1 / span 3; align-self: start; width: 72px; height: 72px; }
.st__vis--vpn img { transform: scale(2.1); transform-origin: 51.5% 32%; }
.st__vis--msg img { transform: scale(1.15); transform-origin: 50% 53%; }
.st__vis--home img { transform: scale(1.5); transform-origin: 50% 52%; }
}
@media (min-width: 1000px) {
.st { --st-vh: clamp(160px, 13vw, 200px); }
.st::before { top: calc(var(--st-vh) + 32px); background: linear-gradient(90deg, var(--lime-dim), var(--line-strong) 28%); }
.st__step, .st__step:last-child { padding: 0; }
.st__step::after { top: calc(var(--st-vh) + 28px); }
.st__vis { height: var(--st-vh); margin-bottom: 60px; border-radius: 16px; }
.st__vis--vpn img { object-position: 50% 26%; } /* the whole top of the phone: bezel, place, status and the knob */
.st__vis--msg img { object-position: 50% 52%; }
.st__vis--home img { object-position: 50% 55%; }
}
/* 2 · VPN map: the facts as a short list. Phone: under the map. Desktop: under the lead, so the left column is not empty. */
.wm__facts { margin: 0; padding: 0; list-style: none; max-width: 30em; border-top: 1px solid var(--line); }
.wm__facts li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: var(--t-small); line-height: 1.4; color: var(--ink); }
/* round 7: one quiet text link under the facts to the VPN-only plan (6b); not a button, grey with a hairline underline */
.wm__more { min-width: 0; }
.wm__only { margin-top: 10px; font-size: var(--t-small); line-height: 1.4; }
.wm__only-link { display: inline-block; padding: 6px 0; color: var(--g1); text-decoration: underline; text-decoration-color: var(--line-strong); text-decoration-thickness: 1px; text-underline-offset: 4px;
transition: color 200ms var(--ease), text-decoration-color 200ms var(--ease); }
.wm__only-link:hover { color: var(--ink); text-decoration-color: var(--g1); }
.wm__only-link:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 4px; }
@media (min-width: 1000px) {
.wm__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto 1fr; row-gap: 0; }
.wm__text { grid-column: 1; grid-row: 1; }
.wm__demo { grid-column: 2; grid-row: 1 / span 2; }
.wm__more { grid-column: 1; grid-row: 2; align-self: start; margin-top: 40px; max-width: 26em; }
.wm__facts li { padding: 14px 0; font-size: 17px; }
.wm__only { margin-top: 14px; }
}
/* 3 · scroll-open captions, wide screens: the canvas starts at 22vw (its left edge fades into the page), so the box sits
right of centre and the captions get a real measure (2 to 3 lines at 1440 and 1920). The box's left edge is about
61vw - 27vh (the frame is drawn to the canvas height); the captions stop 40px before it. */
@media (min-width: 1200px) {
[data-section="scroll-open"].so-live .so-canvas { left: 22%; right: auto; width: 78%; /* a canvas is a replaced element: width must be explicit */
-webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.35) 9%, rgba(0, 0, 0, 0.75) 18%, #000 27%);
mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.35) 9%, rgba(0, 0, 0, 0.75) 18%, #000 27%); }
[data-section="scroll-open"].so-live .so-cap { font-size: clamp(44px, 3.3vw, 58px); line-height: 1.06; text-wrap: balance;
max-width: max(320px, calc(61vw - 27vh - 40px - max(var(--gutter), (100vw - 1360px) / 2 + var(--gutter)))); }
}
/* 4 · image edges: one long elliptical fade per frame, on a frame painted exactly in the page colour (#0A0A0C), so no
rectangle, oval or step shows at 1440 and 1920 */
/* round 7: the oval fade is baked into who_box and offer_box2 themselves (re-exported 09.10.2026 from 16-bit renders: the
same smoothstep falloff into #0A0A0C, with a fine grain, so the near-black never settles into flat 8-bit rings). The CSS
mask only softens the outer rim (where the image is already the page colour), in case a crop ever reaches the frame edge. */
.oa-offer .ho-shot--ports .ho-shot__frame { background: #0A0A0C;
--fade: #000 86%, rgba(0, 0, 0, 0.844) 89.5%, rgba(0, 0, 0, 0.5) 93%, rgba(0, 0, 0, 0.156) 96.5%, transparent 100%;
-webkit-mask-image: radial-gradient(ellipse closest-side at 50% 50%, var(--fade));
mask-image: radial-gradient(ellipse closest-side at 50% 50%, var(--fade));
-webkit-mask-composite: source-over; mask-composite: add; }
.oa-who .oa-who__photo { background: #0A0A0C;
--fade: #000 86%, rgba(0, 0, 0, 0.844) 89.5%, rgba(0, 0, 0, 0.5) 93%, rgba(0, 0, 0, 0.156) 96.5%, transparent 100%;
-webkit-mask-image: radial-gradient(ellipse closest-side at 50% 48%, var(--fade));
mask-image: radial-gradient(ellipse closest-side at 50% 48%, var(--fade)); }
/* 5 · final CTA heading: each sentence stays on one line where it fits ("Your VPN today. / Your box follows.") */
.oa-final .fin-s { display: inline-block; }
@media (min-width: 900px) {
.oa-final__txt { max-width: 52%; }
}
/* ==========================================================================
6b · VPN only (09.10.2026, round 7) · "Just want the VPN?" between the offer and the FAQ. Ported from vpn.css section 5
(.vc, .st), namespaced vo- so nothing touches the bundle's own .st. One step quieter than the bundle offer: a display-m
heading (one tier under the offer's display-l), a price well under the hero's and the offer's, an outline card with no
fill, and an auto-width ghost button (site.css .btn--ghost) no wider than the lime one. The page keeps one lime CTA per screen.
Phone: heading, card, steps. Desktop: heading, lead and steps left, the card right.
========================================================================== */
.vo__grid { display: grid; gap: 28px; grid-template-areas: "head" "card" "steps"; }
.vo__head { grid-area: head; }
.vo-card { grid-area: card; }
.vo-steps { grid-area: steps; min-width: 0; }
.vo__head .lead { max-width: 30em; }
.vo__note { display: block; margin-top: 6px; } /* the pre-order line on its own line, so pre-order buyers spot it */
/* the plan card: calmer than the offer card (outline only, no surface, a mid-size price) */
.vo-card { min-width: 0; padding: 22px 20px 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: transparent; }
.vo-card__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.vo-card__name { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.vo-card__tag { font-size: var(--t-micro); color: var(--g2); }
.vo-card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-top: 14px; }
.vo-card__now { font-family: var(--f-display); font-size: clamp(30px, 2.6vw, 38px); font-weight: 500; line-height: 1.05; letter-spacing: -0.035em; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.vo-card__per { font-size: var(--t-small); color: var(--g1); }
.vo-card__note { margin-top: 6px; font-size: var(--t-small); color: var(--g1); }
.vo-card__btn { height: 48px; padding: 0 26px; margin-top: 18px; font-size: 16px; } /* inline-flex: as wide as its label */
.vo-card__safe { margin-top: 10px; font-size: var(--t-micro); line-height: 1.5; color: var(--g2); text-align: left; }
.vo-card .vo-card__k { margin-top: 22px; }
.vo-terms { margin: 0; }
.vo-terms > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: var(--t-small); line-height: 1.45; }
.vo-terms > div:last-child { border-bottom: 0; padding-bottom: 0; }
.vo-terms dt { color: var(--g2); }
.vo-terms dd { margin: 0; color: var(--ink); }
/* after checkout: a three-step timeline (the page's step dots: lime-soft for today / vploq VPN, then ink) */
.vo-steps__h { font-family: var(--f-display); font-size: 17px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); }
.vo-st { margin: 16px 0 0; padding: 0; list-style: none; }
.vo-st__step { position: relative; padding: 0 0 16px 24px; }
.vo-st__step:last-child { padding-bottom: 0; }
.vo-st__step:not(:last-child)::before { content: ""; position: absolute; left: 4px; top: 13px; bottom: -4px; width: 1px; background: var(--line-strong); }
.vo-st__step::after { content: ""; position: absolute; left: 0; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); }
.vo-st__step:first-child::after { background: var(--lime-soft); }
.vo-st__step h4 { margin: 0; font-family: var(--f-display); font-size: 18px; font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); }
.vo-st__step p { margin-top: 4px; max-width: 30em; font-size: var(--t-small); line-height: 1.45; color: var(--g1); }
@media (min-width: 560px) {
.vo-card { max-width: 480px; padding: 28px 28px 24px; }
}
@media (min-width: 1000px) {
.vo__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-areas: "head card" "steps card"; grid-template-rows: auto 1fr; gap: 0 72px; align-items: start; }
.vo-card { width: 100%; max-width: 440px; justify-self: end; padding: 30px 32px 26px; }
.vo-steps { margin-top: 44px; max-width: 460px; }
.vo-st { margin-top: 20px; }
.vo-st__step { padding: 0 0 22px 30px; }
.vo-st__step h4 { font-size: 20px; }
}
/* ==========================================================================
round 8 · more brand green (09.10.2026, the marketing lead), calm: one hue (#A4FF00) at a few strengths.
The meaning stays: lime = vploq VPN / today / the primary action, the hollow ring = vploq Home / around February 2027.
No lime fills except the primary buttons; headings stay white/grey (only the hero H1 is two-tone); the VPN-only button
stays an outline. Lime text uses --lime-soft (.78, about 9.5:1 on #0A0A0C and #111114).
========================================================================== */
/* 0 · scroll progress, as on the vploq.com shop: a 2px lime bar on top. CSS scroll timeline (compositor only), no JS;
off with reduced motion and where scroll timelines are not supported. At the top of the page it has no width. */
@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: bu-progress linear both; animation-timeline: scroll(root); }
}
}
@keyframes bu-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* 1 · hero: the "today" part reads lime (label and name); the February part stays grey/white. Mirrored in the inline
critical CSS of bundle.html. */
.oh-part--now .oh-tag__when, .oh-part--now .oh-tag__p { color: var(--lime-soft); }
/* 2 · one order, two parts: the rail from "Today" to "Until it ships" runs lime to grey; "Today" in muted lime */
.st__step:first-child::before { background: linear-gradient(180deg, rgba(164, 255, 0, 0.6), var(--line-strong)); }
.st__step:first-child .st__when { color: var(--lime-soft); }
@media (min-width: 1000px) {
/* the second dot sits one column plus one gap in */
.st::before { background: linear-gradient(90deg, rgba(164, 255, 0, 0.6) 0, var(--line-strong) calc((100% - 80px) / 3 + 40px)); }
}
/* 3 · VPN section: a small lime tick per fact; the VPN-only link gets a lime underline on hover */
.wm__facts { --f-pad: 10px; }
.wm__facts li { position: relative; padding-left: 26px; }
.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__facts { --f-pad: 14px; } }
.wm__only-link:hover { color: var(--ink); text-decoration-color: var(--lime); }
/* 4 · offer card: a lime hairline on its top edge that fades out both ways; "6 months free" and the VPN dot in lime */
.oa-offer .ho-card { position: relative; }
.oa-offer .ho-card::before { 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)); }
.oa-offer .bu-now .bu-item__val { color: var(--lime-soft); }
.oa-offer .bu-now .bu-item__then { color: var(--g1); }
.oa-offer .bu-now .bu-dot--now::before { background: var(--lime); }
/* 5 · "Just want the VPN?": the plan label in muted lime; the outline button's ring turns lime on hover (still no fill) */
.vo-card__tag { color: var(--lime-soft); }
@media (hover: hover) and (pointer: fine) {
.vo .vo-card__btn:hover { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--lime); }
}
/* 6 · FAQ: the open item gets a lime cross and a faint lime wash; hover turns the question lime; lime focus ring */
.faq__item summary { transition: opacity 200ms var(--ease), color 200ms var(--ease); }
.faq__item summary:focus-visible { outline-color: var(--lime); }
.faq__item[open] { background: linear-gradient(180deg, rgba(164, 255, 0, 0.055), rgba(164, 255, 0, 0) 90%); }
.faq__item[open] .faq__ico { color: var(--lime-soft); }
@media (hover: hover) and (pointer: fine) {
.faq__item summary:hover, .faq__item summary:hover .faq__ico { color: var(--lime-soft); }
}
/* 7 · links: lime on hover (mouse only); focus rings are lime everywhere (site.css :focus-visible takes --lime) */
.oa-mail, .oa-who__facts a { transition: color 200ms var(--ease), text-decoration-color 200ms var(--ease); }
@media (hover: hover) and (pointer: fine) {
.oa-footer__links a:hover { color: var(--lime-soft); }
.oa-mail:hover, .oa-who__facts a:hover { color: var(--lime-soft); text-decoration-color: currentColor; }
}
/* 8 · final CTA: a soft lime glow under the button (static; the hover glow takes over on hover) */
.oa-final__btn { box-shadow: 0 20px 44px -18px rgba(164, 255, 0, 0.5); }
/* ==========================================================================
6b · the country picker (09.10.2026, the marketing lead: "exactly like vpn.html"). A 1:1 port of vpn.css 5b,
namespaced vo-pk- / vo-ap-sb: the app's "Select" sheet on a 400 px wide design screen, scaled by --k (0.54 phone,
0.6 from 1000px, as on vpn.html) and cropped 600 px down, so the phone is tall and its bottom fades out (no bottom
bezel). It sits inside step 3 of "After checkout", as on vpn.html. bundle.js 6b sets --y / --sx / --sy / --o per row
(wheel radius 380, selected band centred at y 433). Type: Inter where installed, else the system face (SF on iPhone);
no web font is loaded for it.
========================================================================== */
.vo-st__step--pick .vo-pk-fig { margin: 22px 0 0; }
.vo-pk-fig { --k: 0.54; --crop: 600px; flex: none;
-webkit-mask-image: linear-gradient(180deg, #000 84%, transparent 99%); mask-image: linear-gradient(180deg, #000 84%, transparent 99%); }
.vo-pk-body { width: calc(400px * var(--k) + 12px); padding: 6px 6px 0; border-radius: calc(54px * var(--k) + 6px) calc(54px * var(--k) + 6px) 0 0; background: #050506;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13), 0 0 0 1px rgba(0, 0, 0, 0.6); }
.vo-pk-view { position: relative; width: calc(400px * var(--k)); height: calc(var(--crop) * var(--k)); overflow: hidden; border-radius: calc(54px * var(--k)) calc(54px * var(--k)) 0 0; }
.vo-pk { position: absolute; left: 0; top: 0; width: 400px; height: var(--crop); transform: scale(var(--k)); transform-origin: 0 0; overflow: hidden;
font-family: Inter, -apple-system, "Segoe UI", sans-serif; 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; }
.vo-ap-sb { position: absolute; left: 0; right: 0; top: 0; height: 60px; }
.vo-ap-sb__t { position: absolute; left: 44px; top: 27px; font-size: 16px; font-weight: 600; }
.vo-ap-sb__i { position: absolute; left: 138px; top: 20px; width: 124px; height: 34px; border-radius: 17px; background: #000; }
.vo-ap-sb__sys { position: absolute; right: 22px; top: 30px; width: 76px; height: 16px; }
.vo-pk-hd { position: absolute; left: 20px; right: 20px; top: 78px; height: 40px; display: flex; align-items: center; justify-content: space-between; }
.vo-pk-hd__t { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.vo-pk-hd__i { width: 26px; height: 26px; fill: none; stroke: #E6E6E6; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.vo-pk-band { position: absolute; left: 0; right: 0; top: 397px; height: 72px; border-top: 1px solid rgba(255, 255, 255, 0.09); border-bottom: 1px solid rgba(255, 255, 255, 0.09); }
.vo-pk-mark { position: absolute; left: 25px; top: 426px; width: 14px; height: 14px; fill: #fff; }
.vo-pk-wheel { position: absolute; left: 84px; right: 12px; top: 433px; height: 0; }
.vo-pk-row { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 14px; height: 40px; margin-top: -20px; white-space: nowrap;
transform-origin: 0 50%; transform: translateY(calc(var(--y, 0) * 1px)) scale(var(--sx, 1), var(--sy, 1)); opacity: var(--o, 1); }
.vo-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); }
.vo-pk-flag svg { display: block; width: 100%; height: 100%; }
.vo-pk-name { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
@media (min-width: 1000px) {
.vo-pk-fig { --k: 0.6; }
/* the steps column runs longer than the card: the card rides along (sticky) */
.vo-card { position: sticky; top: calc(var(--nav-h-slim, 60px) + 32px); }
}
/* ==========================================================================
bundle · round 8 lime accents (09.10.2026, marketing lead). Meaning stays: lime = vploq VPN / today / action,
hollow ring = vploq Home / February 2027. Glows and hairlines only, no new lime fills; the lime button stays the
strongest lime on every screen. Lime text keeps >= 4.5:1 (--lime-soft on the page colour is about 13:1).
========================================================================== */
/* 1 · hero: a very faint lime floor glow under the phone (screen blend, so it only lifts the dark floor). Positioned in
the render's own coordinates: phone = the contained crop (the picture has the image's aspect), desktop = object-fit
cover anchored right, rebuilt with container units (Wi = rendered image width, Hi = height). Kept in sync with the
critical CSS in bundle.html. */
.oh:has(img[src*="hero_bundle"]) .oh__media::after { content: ""; position: absolute; left: 36%; top: 81%; width: 56%; height: 15%;
transform: translate(-50%, -50%); pointer-events: none; mix-blend-mode: screen;
background: radial-gradient(closest-side, rgba(164, 255, 0, 0.16), rgba(164, 255, 0, 0.06) 55%, rgba(164, 255, 0, 0)); }
@media (min-width: 900px) {
.oh:has(img[src*="hero_bundle"]) .oh__media { container-type: size; --wi: max(100cqw, 177.78cqh); --hi: max(56.25cqw, 100cqh); --sx: 0px; }
.oh:has(img[src*="hero_bundle"]) .oh__media::after { left: calc(100cqw - 0.37 * var(--wi) + var(--sx)); top: calc(50cqh + 0.205 * var(--hi));
width: calc(0.34 * var(--wi)); height: calc(0.1 * var(--hi)); }
}
@media (min-width: 1600px) { .oh:has(img[src*="hero_bundle"]) .oh__media { --sx: 5vw; } }
/* 2 · one order, two parts: the "Today" tile gets a thin lime ring (the February tile keeps the grey hairline) */
.st__step:first-child .st__vis::after { box-shadow: inset 0 0 0 1px rgba(164, 255, 0, 0.42); }
/* 3 · world map: a soft lime glow around the route's end point and the line, and a wider halo round the phone's knob;
the chosen chip gets a lime ring (its label stays white) */
.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-stage[data-state="on"] .wm-knob { box-shadow: 0 0 16px rgba(164, 255, 0, 0.45), 0 0 42px 6px rgba(164, 255, 0, 0.16); }
.wm-chip[aria-pressed="true"] { 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); } }
/* 4 · "Just want the VPN?": the plan card's outline in a dim lime */
.vo-card { border-color: rgba(164, 255, 0, 0.22); }
/* way-home diagram: lime for the encrypted connection (user request 09.10.2026): line, pulse, lock pill, roof apex */
.oa-what .hw-fill { background: linear-gradient(180deg, rgba(164, 255, 0, 0.25), rgba(164, 255, 0, 0.75)); }
.oa-what .hw-pulse i { background: linear-gradient(180deg, rgba(164, 255, 0, 0), rgba(164, 255, 0, 0.95)); }
.oa-what .hw-pulse i::after { background: var(--lime); box-shadow: 0 0 10px 1px rgba(164, 255, 0, 0.55); }
.oa-what .hw-pill { box-shadow: inset 0 0 0 1px rgba(164, 255, 0, 0.35), 0 0 24px -8px rgba(164, 255, 0, 0.35); }
.oa-what .hw-pill svg { stroke: var(--lime); }
@media (min-width: 900px) {
.oa-what .hw-fill { background: linear-gradient(90deg, rgba(164, 255, 0, 0.25), rgba(164, 255, 0, 0.75)); }
.oa-what .hw-pulse i { background: linear-gradient(90deg, rgba(164, 255, 0, 0), rgba(164, 255, 0, 0.95)); }
}
/* offer card: the two items read at a glance (receipt style): bigger names and values, lime for "6 months free" */
.oa-offer .bu-item { padding: 18px 0; }
.oa-offer .bu-item__name { font-family: var(--f-display); font-size: 20px; font-weight: 500; letter-spacing: -0.01em; }
.oa-offer .bu-item__val { font-size: 24px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; }
.oa-offer .bu-item__val s { font-size: 15px; }
.oa-offer .bu-item__thumb { width: 64px; height: 64px; }
.oa-offer .bu-item { grid-template-columns: 64px minmax(0, 1fr) auto; }
.oa-offer [data-copy="HP-INC-1-VAL"] { color: var(--lime); }
.oa-offer [data-copy="HP-INC-1-VAL"] .bu-item__then { color: var(--g1); }
.oa-offer .bu-total { font-size: 19px; font-weight: 500; color: var(--ink); }
@media (min-width: 1000px) {
.oa-offer .bu-item__name { font-size: 22px; }
.oa-offer .bu-item__val { font-size: 30px; }
}
@media (max-width: 599px) {
.oa-offer .bu-item__val { font-size: 22px; }
.oa-offer .bu-item { grid-template-columns: 56px minmax(0, 1fr); }
.oa-offer .bu-item__thumb { width: 56px; height: 56px; }
}
/* offer: the box beside the card reads ~20 % larger (the fade is baked into the image edges, so the whole frame scales) */
@media (min-width: 1000px) {
.oa-offer .ho-shot--ports .ho-shot__frame { transform: scale(1.18); transform-origin: 18% 50%; background: transparent; } /* grows mostly to the right so it never overlaps the card */
}@media (min-width: 1000px) and (max-width: 1279px) {
.oa-offer .ho-shot--ports .ho-shot__frame { transform: scale(1.08); }
}
/* ================= round 17 (12.10.2026): HOME-emotion / -urgency / -qa / -visual ================= */
/* phone hero: the sub repeats the two parts, so it goes; the render takes the room and the button sits above the real fold */
@media (max-width: 899px) {
.oh__sub { display: none; }
.oh__stage { height: clamp(190px, calc(100vh - 460px), 440px); }
}
@supports (height: 100svh) { @media (max-width: 899px) { .oh__stage { height: clamp(190px, calc(100svh - 460px), 440px); } } }
@media (min-width: 560px) and (max-width: 899px) { .oh__parts, .oh__buy { margin-left: 0; } }
/* why today, at the price: the saving as a quiet outline chip, the free months in white with the lime dot */
.oh-price__save { align-self: center; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); white-space: nowrap; }
.oh__fine-a { color: var(--ink); font-weight: 500; }
.bu-item__save { color: var(--ink); }
.oa-offer .ho-card__promise { margin-top: 8px; color: var(--g1); font-size: var(--t-micro); text-align: center; }
@media (min-width: 900px) { .oa-offer .ho-card__promise { text-align: left; } }
/* hardware folds away under the terms */
.ho-more > summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; cursor: pointer; list-style: none; }
.ho-more > summary::-webkit-details-marker { display: none; }
.ho-more > summary::after { content: "+"; font-family: var(--f-display); font-size: 20px; font-weight: 400; color: var(--g1); transition: transform 200ms var(--ease); }
.ho-more[open] > summary::after { transform: rotate(45deg); }
.ho-more > summary:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 4px; }
/* desktop and tablet: the header pill turns into the buy button while no other one is on screen (bundle.js 2) */
.oa-header .nav-pill__price { display: none; }
@media (min-width: 768px) {
.oa-header.cta-on .nav-pill { background: var(--lime); color: var(--lime-ink); box-shadow: none; }
.oa-header.cta-on .nav-pill__price { display: inline; margin-left: 6px; font-weight: 500; opacity: 0.7; white-space: pre; }
}
/* 320: no sideways scroll from "Around February 2027", and the pill text fits */
@media (max-width: 359px) {
.oh-part--later .oh-tag__when { white-space: normal; }
.pill__name { font-size: 14px; letter-spacing: -0.02em; }
}
/* tap targets */
.wm__only-link { padding: 12px 0; }
.oa-faq .oa-mail { display: inline-block; padding: 11px 0; margin: -11px 0; }
/* VPN only on phone: an aside, not a second funnel */
@media (max-width: 767px) {
.vo-pk-fig { display: none; }
.vo-terms > div:nth-child(n+3) { display: none; }
}
/* home moments (ported 1:1 from vpn.css .mo, round 17); the way-home diagram only from 768 px */
.hx-uses { margin-top: 32px; }
@media (max-width: 767px) { .oa-what .hx-way { display: none; } }
@media (min-width: 768px) { .oa-what .hx-way { margin-top: 56px; } }
.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-display); 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; } }
@media (min-width: 1000px) { .mo { margin-top: 20px; gap: 20px; } .mo__t { font-size: 21px; } }
@media (min-width: 1200px) { .mo { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* round 17: the saving chip sits on the tag line (one line on phone); the headline fits two lines on phone */
.oh-price__top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.oh-price__top .oh-price__save { align-self: auto; }
@media (max-width: 899px) { .oh__h { font-size: clamp(32px, 10vw, 46px); } }
/* the microline's dot: inline, so the date span sits in the sentence without flex gaps */
.oh__fine-a.bu-dot { display: inline; }
.oh__fine-a.bu-dot::before { display: inline-block; margin-right: 8px; vertical-align: 1px; }
/* 320 to 399: the box price and the struck price may wrap in the narrow offer column (no sideways scroll) */
@media (max-width: 399px) { .oa-offer .bu-item__val { white-space: normal; } .oa-offer .bu-item__val s { white-space: nowrap; } }
/* the longer headline ("Your home internet") stays clear of the render on desktop */
@media (min-width: 900px) { .oh__h { font-size: clamp(54px, 5.2vw, 92px); } }
/* round 18: step 1 tile on phone shows the whole phone top with the switch, not a dark crop of the screen */
@media (max-width: 999px) { .st__vis--vpn img { transform: scale(1.25); transform-origin: 50% 45%; } }
/* round 18b: the offer card VPN thumb shows the whole phone top with the switch (was a 2.1x crop) */
.bu-item__thumb--vpn img { transform: scale(1.25); transform-origin: 50% 45%; }
/* ===== round 19: the pre-order offer ends 28 February 2027, shown with a day counter (bundle.js 9) ===== */
.deal-ico { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--lime-soft); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.offer-left { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1;
color: var(--lime); background: rgba(164, 255, 0, 0.08); box-shadow: inset 0 0 0 1px rgba(164, 255, 0, 0.45); white-space: nowrap; font-variant-numeric: tabular-nums; }
.oh-price__top { gap: 6px 8px; }
.oh-price__tag--deal { color: var(--ink); font-weight: 600; }
@media (min-width: 900px) { .oh-price__tag--deal { font-size: 16px; } }
/* offer card banner */
.ho-deal { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; margin: 18px 0 6px; padding: 14px 16px; border-radius: 14px;
background: rgba(164, 255, 0, 0.05); box-shadow: inset 0 0 0 1px rgba(164, 255, 0, 0.32); }
.ho-deal__t { display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--f-display); font-size: 17px; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); }
.ho-deal__p { grid-column: 1 / -1; margin: 0; font-size: var(--t-small); line-height: 1.45; color: var(--g1); }
@media (max-width: 399px) { .ho-deal { grid-template-columns: 1fr; } .ho-deal .offer-left { justify-self: start; } }
/* final eyebrow */
.fin-deal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; font-size: var(--t-small); font-weight: 600; color: var(--ink); }
/* round 20: the hero pitch in three beats (desktop and large tablet; phone hides .oh__sub) */
.oh-pitch { max-width: 30em; }
.oh-pitch p { margin: 0; }
.oh-pitch__q { color: var(--ink); font-weight: 500; text-wrap: balance; }
.oh-pitch__a { margin-top: 8px !important; color: var(--g1); }
.oh-pitch__a strong { color: var(--ink); font-weight: 600; }
.oh-pitch__pts { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.oh-pitch__pts li { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px 0 12px; border-radius: 999px; font-size: 15px; 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; }
.oh-pitch__pts li::before { content: ""; width: 10px; height: 6px; margin-top: -3px; border: solid var(--g1); border-width: 0 0 1.6px 1.6px; transform: rotate(-45deg); }
@media (min-width: 900px) { .oh-pitch { max-width: min(28em, 46vw); } }
/* round 21: the pitch on phone too (question + answer; the three chips and the two-parts row step aside, the answer says
when the box arrives); desktop: a stronger left scrim and, on screens taller than 16:9, the render no longer grows past the
viewport width (it was cropped from the left and the phone slid under the headline) */
.oh-pitch__when { display: none; }
@media (max-width: 899px) {
.oh__sub.oh-pitch { display: block; margin-top: 12px; max-width: none; font-size: 16px; line-height: 1.4; }
.oh-pitch__pts, .oh__parts { display: none; }
.oh-pitch__a { margin-top: 4px !important; }
.oh-pitch__when { display: inline; }
}
@media (min-width: 900px) {
.oh__stage::after { background:
linear-gradient(90deg, rgba(10, 10, 12, 0.94) 0%, rgba(10, 10, 12, 0.8) 34%, rgba(10, 10, 12, 0.3) 50%, rgba(10, 10, 12, 0) 60%),
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%); }
}
@media (min-width: 1200px) and (max-aspect-ratio: 16/9) {
.oh:has(img[src*="hero_bundle"]) .oh__media { top: auto; bottom: min(9vh, calc(100vh - 56.25vw)); height: 56.25vw;
-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%); mask-image: linear-gradient(180deg, transparent 0%, #000 18%); }
}
/* round 22: the three chips on phone too, short labels in one row; the render gives up 40px for them */
.pt-s { display: none; }
@media (max-width: 899px) {
.oh__sub.oh-pitch .oh-pitch__pts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.oh-pitch__pts li { height: 28px; gap: 6px; padding: 0 10px 0 9px; font-size: 13px; }
.oh-pitch__pts li::before { width: 8px; height: 5px; }
.pt-l { display: none; }
.pt-s { display: inline; }
.oh__stage { height: clamp(180px, calc(100vh - 500px), 440px); }
}
@supports (height: 100svh) { @media (max-width: 899px) { .oh__stage { height: clamp(180px, calc(100svh - 500px), 440px); } } }
@media (max-width: 389px) { .oh-pitch__pts li { padding: 0 8px 0 7px; gap: 5px; font-size: 12.5px; } .oh__sub.oh-pitch .oh-pitch__pts { gap: 5px; } }
/* round 22b: the "then from ..." line wraps under the big value instead of widening the price column (desktop) */
.oa-offer .bu-item__then { max-width: 15em; margin-left: auto; white-space: normal; text-wrap: balance; }
@media (max-width: 767px) { .oa-offer .bu-item__then { margin-left: 0; } }
.offer-left { display: inline-flex; align-items: center; justify-content: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--lime); background: rgba(164, 255, 0, 0.08); box-shadow: inset 0 0 0 1px rgba(164, 255, 0, 0.45); }
.deal-ico { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--g1); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.oh-moment { position: absolute; z-index: 2; top: 12px; right: max(16px, calc(50% - 288px)); width: min(214px, 56%); pointer-events: none; }
.oh-moment__row { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; row-gap: 1px; align-items: center; padding: 10px 12px; border-radius: 12px; font-family: var(--f-display); color: #fff; background: rgba(12, 12, 12, 0.82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 18px 40px -18px rgba(0, 0, 0, 0.9); }
.oh-moment__ico { grid-row: 1 / span 3; width: 20px; height: 20px; fill: none; stroke: #D8D8D8; stroke-width: 1.6; stroke-linecap: round; }
.oh-moment__ico circle { fill: #D8D8D8; stroke: none; }
.oh-moment__name { font-size: 13px; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oh-moment__sub { font-size: 12px; font-weight: 500; line-height: 1.3; color: #8D8D8D; }
.oh-moment__st { display: grid; height: 18px; margin-top: 2px; font-size: 12px; font-weight: 600; line-height: 18px; }
.oh-moment__off, .oh-moment__on { grid-area: 1 / 1; }
.oh-moment__off { color: #8D8D8D; opacity: 0; }
.oh-moment__on { display: inline-flex; align-items: center; gap: 5px; color: var(--ink); }
.oh-moment__on svg { width: 14px; height: 14px; fill: none; stroke: var(--lime); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
.oh-moment__off { animation: ohm-off 1.6s var(--ease) both; }
.oh-moment__on { animation: ohm-on 420ms var(--ease) 1.5s both; }
}
@keyframes ohm-off { 0%, 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ohm-on { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (max-width: 899px) and (max-height: 760px) {
.oh-moment { top: 6px; width: auto; max-width: 60%; }
.oh-moment__row { padding: 8px 12px 8px 10px; column-gap: 8px; grid-template-columns: 18px minmax(0, 1fr); }
.oh-moment__sub { display: none; }
}
@media (max-width: 389px) {
.oh-price__top .deal-ico { display: none; }
}
@media (min-width: 900px) {
.oh-moment { top: 24%; right: 6vw; width: 260px; }
.oh-moment__row { padding: 12px 14px; }
.oh-moment__name { font-size: 14px; }
.oh__buy { justify-content: flex-start; gap: clamp(40px, 4vw, 72px); }
.oh__cta { justify-items: start; }
.oh__fine { text-align: left; }
}
/* ===== round 23 ===== */
.deal-ico { stroke: var(--g1); }
/* the struck price says what happens on 1 March (desktop has the room) */
@media (min-width: 900px) { .oh-price__was::after { content: " from 1 March"; color: var(--g1); font-size: 15px; } }
/* offer banner: the price step is the headline */
.ho-deal { background: rgba(164, 255, 0, 0.07); box-shadow: inset 0 0 0 1px rgba(164, 255, 0, 0.45); }
.ho-deal__t { font-size: 20px; }
.ho-deal__step { grid-column: 1 / -1; margin: 0; font-size: 16px; font-weight: 600; color: var(--ink); }
@media (min-width: 1000px) { .ho-deal__t { font-size: 22px; } }
.oa-offer .bu-now .bu-item__val { font-size: 0.85em; }
/* the price promise reads like a promise, not a footnote */
.oa-offer .ho-card__promise { margin-top: 12px; font-size: var(--t-small); font-weight: 500; color: var(--ink); }
/* moments: the flip is the payoff of each card; titles at full size */
.mo__st { height: 22px; font-size: 13px; line-height: 22px; }
.mo__on { padding: 0 9px 0 7px; border-radius: 999px; background: rgba(164, 255, 0, 0.08); box-shadow: inset 0 0 0 1px rgba(164, 255, 0, 0.3); }
.mo__t { font-size: 21px; }
@media (min-width: 1000px) { .mo__t { font-size: 24px; } }
/* the moments section, now right after the hero */
.oa-moments .hx-uses { margin-top: 28px; }
/* final eyebrow: the same weight as the banner */
.fin-deal { font-size: 17px; }
@media (min-width: 900px) { .fin-deal { font-size: 18px; } }
/* 1.3 px sideways overflow at 1280 from the scaled box render */
.oa-offer { overflow-x: clip; }
/* ===== round 24: the countdown (hero, offer card, final) ===== */
.cd { display: grid; gap: 10px; margin: 0 0 14px; }
.cd__t { margin: 0; font-family: var(--f-display); font-size: 17px; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); }
.cd__k { color: var(--g1); }
.cd__n { display: none; gap: 8px; }
.js .cd__n { display: flex; }
.cd__u { display: grid; justify-items: center; align-content: center; min-width: 64px; height: 64px; padding: 0 6px; border-radius: 14px;
background: rgba(164, 255, 0, 0.06); box-shadow: inset 0 0 0 1px rgba(164, 255, 0, 0.4); }
.cd__u b { font-family: var(--f-display); font-size: 30px; font-weight: 500; line-height: 1; letter-spacing: -0.03em; color: var(--lime); font-variant-numeric: tabular-nums; }
.cd__u i { margin-top: 5px; font-style: normal; font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; color: var(--g1); }
.cd__u:first-child { min-width: 78px; }
@media (max-width: 899px) {
.cd--hero { margin-bottom: 12px; }
.cd--hero .cd__n { gap: 6px; }
.cd--hero .cd__u { flex: 1 1 0; min-width: 0; height: 58px; }
.cd--hero .cd__u b { font-size: 26px; }
}
@media (min-width: 900px) {
.cd--hero .cd__t { font-size: 19px; }
.cd--hero .cd__u { min-width: 74px; height: 70px; }
.cd--hero .cd__u:first-child { min-width: 90px; }
.cd--hero .cd__u b { font-size: 34px; }
}
.cd--card { grid-column: 1 / -1; margin: 4px 0 6px; }
.cd--card .cd__t { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.cd--card .cd__d:empty { display: none; }
.cd--card .cd__n { gap: 6px; }
.cd--card .cd__u { flex: 1 1 0; min-width: 0; height: 60px; }
.cd--fin { margin-bottom: 4px; }
.cd--fin .cd__t { font-size: 18px; }
/* phone hero: the countdown costs about 70px, the render gives them up */
@media (max-width: 899px) {
.oh__stage { height: clamp(160px, calc(100vh - 590px), 440px); }
}
@supports (height: 100svh) { @media (max-width: 899px) { .oh__stage { height: clamp(160px, calc(100svh - 590px), 440px); } } }
/* round 24b: phone, the moment card sits compact in the top-right corner, clear of the phone in the render */
@media (max-width: 899px) {
.oh-moment { top: 8px; right: 12px; width: auto; max-width: 46%; }
.oh-moment__row { padding: 8px 12px 8px 10px; column-gap: 8px; grid-template-columns: 18px minmax(0, 1fr); }
.oh-moment__sub { display: none; }
}
/* round 24c: short phones (375x667): a slimmer countdown and render, so the button stays in the first screen */
@media (max-width: 899px) and (max-height: 720px) {
.cd--hero .cd__n { gap: 5px; }
.cd--hero .cd__u { height: 46px; border-radius: 12px; }
.cd--hero .cd__u b { font-size: 22px; }
.cd--hero .cd__u i { margin-top: 3px; font-size: 10px; }
.oh__stage { height: 100px !important; }
}
/* round 24d: short laptops (1280x720, 1366x768): the two-parts row steps aside for the countdown, so price and button stay in view */
@media (min-width: 900px) and (max-height: 820px) {
.oh__parts { display: none; }
.cd--hero .cd__u { min-width: 62px; height: 56px; }
.cd--hero .cd__u:first-child { min-width: 76px; }
.cd--hero .cd__u b { font-size: 28px; }
}
/* round 36: hero, less text; the bonus card */
.oh__parts { display: none !important; }
.oh-lede { color: var(--g1); }
.oh-bonus { position: relative; display: grid; gap: 8px; margin: 0 0 14px; padding: 14px 16px 16px; border-radius: 20px;
background: linear-gradient(135deg, rgba(164, 255, 0, 0.15), rgba(164, 255, 0, 0.04) 60%), #0F110D;
box-shadow: inset 0 0 0 1px rgba(164, 255, 0, 0.5), 0 24px 60px -32px rgba(164, 255, 0, 0.5); }
.oh-bonus__k { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #C6FF5C; }
.oh-bonus__k svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.oh-bonus__big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 0; font-family: var(--f-display); }
.oh-bonus__n { font-size: 46px; font-weight: 500; line-height: 0.95; letter-spacing: -0.045em; color: var(--lime); }
.oh-bonus__t { font-size: 21px; font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); }
.cd--bonus { margin: 6px 0 0; gap: 6px; }
.cd--bonus .cd__t { font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.cd--bonus .cd__k { color: var(--g1); }
.cd--bonus .cd__n { gap: 6px; }
.cd--bonus .cd__u { flex: 1 1 0; min-width: 0; height: 46px; border-radius: 11px; background: rgba(10, 10, 12, 0.55); box-shadow: inset 0 0 0 1px rgba(164, 255, 0, 0.25); }
.cd--bonus .cd__u:first-child { min-width: 0; }
.cd--bonus .cd__u b { font-size: 21px; }
.cd--bonus .cd__u i { margin-top: 3px; font-size: 9px; }
@media (min-width: 900px) {
.oh-bonus { width: 440px; padding: 16px 20px 18px; margin-bottom: 18px; }
.oh-bonus__n { font-size: 56px; }
.oh-bonus__t { font-size: 24px; }
}
@media (max-width: 899px) {
.oh__stage { height: clamp(150px, calc(100vh - 662px), 440px); }
}
@supports (height: 100svh) { @media (max-width: 899px) { .oh__stage { height: clamp(150px, calc(100svh - 662px), 440px); } } }
/* round 36b: short phones keep the bonus card and the button in the first screen: the chips step aside */
@media (max-width: 899px) and (max-height: 720px) { .oh__sub.oh-pitch .oh-pitch__pts { display: none; } .oh-bonus { padding: 12px 14px 14px; } .oh-bonus__n { font-size: 40px; } }
/* round 36c: short laptops, the bonus card in one row */
@media (min-width: 900px) and (max-height: 820px) {
.oh-bonus { width: 640px; grid-template-columns: auto minmax(0, 1fr); column-gap: 24px; row-gap: 4px; align-items: center; padding: 12px 18px; margin-bottom: 12px; }
.oh-bonus__k { grid-column: 1; }
.oh-bonus__big { grid-column: 1; }
.oh-bonus__n { font-size: 40px; }
.oh-bonus__t { font-size: 19px; }
.cd--bonus { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.oh__sub { margin-top: 16px; }
}
/* round 37: product and price first, the bonus as "included" under it */
.oh-price__name { margin: 0 0 2px; font-family: var(--f-display); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.oh-price__name span { font-weight: 400; color: var(--g1); }
.oh-price .oh-bonus { margin: 14px 0 0; }
@media (min-width: 900px) { .oh-price__name { font-size: 20px; } .oh-price .oh-bonus { margin-top: 16px; } }
@media (min-width: 900px) and (max-height: 820px) { .oh-price .oh-bonus { margin-top: 10px; } }
@media (max-width: 899px) and (max-height: 720px) { .oh-moment { display: none; } }
/* round 38: calm bonus card, slim countdown line, one buy column */
.oh-bonus { background: #111114; box-shadow: inset 0 0 0 1px rgba(164, 255, 0, 0.32); gap: 6px; }
.oh-bonus__k { color: var(--g1); letter-spacing: 0.08em; }
.oh-bonus__k svg { stroke: var(--lime); }
.cd--bonus { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; margin: 4px 0 0; }
.cd--bonus .cd__t { margin: 0; font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.cd--bonus .cd__k { color: var(--g1); }
.cd--bonus .cd__k::after { content: " \00B7"; }
.cd--bonus .cd__n { display: none; }
.js .cd--bonus .cd__n { display: inline-flex; align-items: baseline; gap: 6px; }
.cd--bonus .cd__u { display: inline-flex; align-items: baseline; gap: 4px; min-width: 0 !important; height: auto; padding: 0; border-radius: 0; background: none; box-shadow: none; flex: none; }
.cd--bonus .cd__u:nth-child(n+3) { display: none; }
.cd--bonus .cd__u b { font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--ink); }
.cd--bonus .cd__u i { margin: 0; font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--g1); }
.cd--bonus .cd__n::after { content: "left"; font-size: 13px; color: var(--g1); }
@media (max-width: 899px) { .oh-moment { display: none !important; } }
@media (min-width: 900px) {
.oh__buy { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 18px; }
.oh__cta { justify-items: start; }
.oh__fine { text-align: left; }
.oh-bonus { width: 420px; }
}
/* round 38b: short laptops, the button beside the bonus card */
@media (min-width: 900px) and (max-height: 820px) {
.oh__buy { flex-direction: row; align-items: flex-end; gap: 32px; }
.oh-bonus { width: 560px; }
}
/* round 38c: no hairline across the render above the buy column */
@media (min-width: 900px) {
.oh__buy { background: none; }
}
/* round 39: the deal box */
.deal { width: 100%; overflow: hidden; border-radius: 22px; background: #111114; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), 0 30px 80px -40px rgba(0, 0, 0, 1); }
.deal p { margin: 0; }
.deal__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 11px 16px; font-size: 13px;
background: rgba(164, 255, 0, 0.08); border-bottom: 1px solid rgba(164, 255, 0, 0.22); }
.deal__tag { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lime); }
.deal__end { font-weight: 500; color: var(--ink); }
.deal__left { display: none; }
.js .deal__left { display: inline; }
.deal__left b { color: var(--lime); font-weight: 700; font-variant-numeric: tabular-nums; }
.deal__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 0 16px; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.deal__n { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: center; font-family: var(--f-display); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.deal__n > span:not(.deal__plus) { grid-column: 1 / -1; }
.deal__row--bonus .deal__n > span:not(.deal__plus) { grid-column: 2; }
.deal__n small { grid-column: 1 / -1; margin-top: 2px; font-family: var(--f-body, inherit); font-size: 12.5px; font-weight: 400; letter-spacing: 0; color: var(--g1); }
.deal__row--bonus .deal__n small { grid-column: 2; }
.deal__plus { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(164, 255, 0, 0.14); }
.deal__plus svg { width: 13px; height: 13px; fill: none; stroke: var(--lime); stroke-width: 2.4; stroke-linecap: round; }
.deal__v { display: grid; justify-items: end; row-gap: 1px; text-align: right; }
.deal__price { font-family: var(--f-display); font-size: 26px; font-weight: 500; line-height: 1.05; letter-spacing: -0.03em; color: var(--ink); }
.deal__v s { font-size: 13px; color: var(--g2); text-decoration-thickness: 1px; }
.deal__v small { font-size: 12px; color: var(--g1); }
.deal__free { font-family: var(--f-display); font-size: 26px; font-weight: 500; letter-spacing: -0.03em; color: var(--lime); }
.deal__sum { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin: 0 16px; padding: 12px 0 14px; font-size: 13px; color: var(--g1); }
.deal__sum b { font-size: 15px; font-weight: 600; color: var(--ink); }
.deal__save { margin-left: 6px; font-weight: 600; color: var(--lime); }
.deal__btn { display: flex; width: calc(100% - 32px); margin: 0 16px; }
.deal__fine { padding: 9px 16px 14px; text-align: center; font-size: 12.5px; color: var(--g1); }
@media (min-width: 900px) {
.deal { width: 480px; }
.deal__top { padding: 12px 20px; }
.deal__row, .deal__sum { margin: 0 20px; }
.deal__btn { width: calc(100% - 40px); margin: 0 20px; height: 56px; font-size: 17px; }
.deal__fine { padding: 10px 20px 16px; }
.deal__price, .deal__free { font-size: 30px; }
}
/* round 39b: tighter deal box */
.deal__top { flex-wrap: nowrap; padding: 10px 16px; }
.deal__tag { white-space: nowrap; }
.deal__end { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; }
.deal__v { grid-template-columns: auto auto; column-gap: 6px; align-items: baseline; }
.deal__v .deal__price, .deal__v .deal__free { grid-column: 1 / -1; justify-self: end; }
.deal__row { padding: 12px 0; }
.deal__sum { padding: 10px 0 12px; }
@media (max-width: 374px) { .deal__tag { display: none; } .deal__top { justify-content: center; } }
.dl-s { display: none; }
@media (max-width: 459px) { .dl-l { display: none; } .dl-s { display: inline; } }
/* round 40: the clock above the button, the lit bonus row, the wide box on desktop */
.deal { box-shadow: inset 0 0 0 1px rgba(164, 255, 0, 0.3), 0 30px 90px -36px rgba(164, 255, 0, 0.32); }
.deal__top .deal__save { margin: 0; font-size: 13px; }
.deal__row--bonus { margin: 0; padding: 14px 16px; border-bottom: 0; background: linear-gradient(90deg, rgba(164, 255, 0, 0.11), rgba(164, 255, 0, 0.02)); }
.deal__clock { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 16px; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.deal__clock[hidden] { display: none; }
.deal__ck { display: grid; gap: 2px; font-size: 12.5px; line-height: 1.25; color: var(--g1); }
.deal__ck b { font-size: 14px; font-weight: 600; color: var(--ink); }
.deal__digits { display: none; gap: 6px; }
.js .deal__digits { display: flex; }
.deal__u { display: grid; justify-items: center; min-width: 60px; padding: 7px 8px 6px; border-radius: 11px; background: rgba(164, 255, 0, 0.08); box-shadow: inset 0 0 0 1px rgba(164, 255, 0, 0.32); }
.deal__u b { font-family: var(--f-display); font-size: 26px; font-weight: 500; line-height: 1; letter-spacing: -0.03em; color: var(--lime); font-variant-numeric: tabular-nums; }
.deal__u i { margin-top: 3px; font-size: 9.5px; font-style: normal; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--g1); }
@media (min-width: 900px) {
.deal { width: min(820px, 100%); display: grid; grid-template-columns: minmax(0, 1fr) 320px; }
.deal__top { grid-column: 1 / -1; }
.deal__row { grid-column: 1; }
.deal__row--bonus { padding: 16px 20px; }
.deal__row--bonus .deal__n > span:not(.deal__plus) { font-size: 20px; }
.deal__act { grid-column: 2; grid-row: 2 / span 2; display: flex; flex-direction: column; justify-content: center; padding: 16px 20px 0; border-left: 1px solid rgba(255, 255, 255, 0.07); }
.deal__clock { flex-direction: column; align-items: stretch; gap: 8px; margin: 0 0 14px; padding: 0; border: 0; }
.deal__ck { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.deal__u { flex: 1 1 0; padding: 9px 10px 7px; }
.deal__u b { font-size: 34px; }
.deal__act .deal__btn { width: 100%; margin: 0; }
.deal__act .deal__fine { padding: 10px 0 14px; }
}
.oh-lede__b { font-weight: 600; color: var(--ink); }
/* round 40b: short phones, a tighter deal box */
@media (max-width: 899px) and (max-height: 720px) {
.deal__top { padding: 8px 16px; }
.deal__row { padding: 9px 0; }
.deal__row--bonus { padding: 9px 16px; }
.deal__clock { padding: 8px 0; }
.deal__u { padding: 5px 8px 4px; }
.deal__u b { font-size: 23px; }
.deal__btn { height: 48px; }
}
/* round 40c: smaller laptops, keep the box off the render */
@media (min-width: 900px) and (max-width: 1365px) {
.deal { width: min(760px, 100%); grid-template-columns: minmax(0, 1fr) 300px; }
}
/* round 41: bold hero (eyebrow, "Finally.", the package card) */
.oh-eb { display: flex; width: max-content; max-width: 100%; align-items: center; gap: 8px; margin: 0 0 14px; padding: 6px 12px 6px 10px; border-radius: 999px;
background: rgba(164, 255, 0, 0.1); box-shadow: inset 0 0 0 1px rgba(164, 255, 0, 0.38); font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lime); }
.oh-eb i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); animation: ohPulse 2.2s ease-out infinite; }
@keyframes ohPulse { 0% { box-shadow: 0 0 0 0 rgba(164, 255, 0, 0.6); } 70%, 100% { box-shadow: 0 0 0 9px rgba(164, 255, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .oh-eb i { animation: none; } }
.oh-fin { margin: 0; font-family: var(--f-display); font-size: 19px; font-weight: 500; line-height: 1.28; letter-spacing: -0.015em; color: var(--g1); }
.oh-fin b { font-weight: 600; color: var(--lime); }
.pk { position: relative; width: 100%; overflow: hidden; border-radius: 24px;
background: radial-gradient(120% 140% at 0% 0%, rgba(164, 255, 0, 0.17), rgba(164, 255, 0, 0) 55%), #0D0F0A;
box-shadow: inset 0 0 0 1px rgba(164, 255, 0, 0.5), 0 40px 120px -40px rgba(164, 255, 0, 0.5); }
.pk p { margin: 0; }
.pk__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 16px; border-bottom: 1px solid rgba(164, 255, 0, 0.2); }
.pk__tag { font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lime); }
.pk__save { padding: 4px 10px; border-radius: 999px; background: var(--lime); color: #0A0A0A; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.pk__body { display: grid; gap: 8px; padding: 14px 16px 12px; }
.pk__get { font-family: var(--f-display); font-size: 21px; font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; }
.pk__a { color: var(--ink); }
.pk__b { color: var(--lime); }
.pk__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.pk__now { font-family: var(--f-display); font-size: 38px; font-weight: 500; line-height: 1; letter-spacing: -0.04em; color: var(--ink); }
.pk__meta { font-size: 13px; color: var(--g1); }
.pk__meta s { color: var(--g2); text-decoration-thickness: 1px; }
.pk__act { display: grid; gap: 10px; padding: 0 16px; }
.pk__end { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 14px; }
.pk__end[hidden] { display: none; }
.pk__end > b { font-weight: 600; color: var(--ink); }
.pk__left { color: var(--g1); }
.pk__left b { font-weight: 700; color: var(--lime); font-variant-numeric: tabular-nums; }
.pk__btn { display: flex; width: 100%; height: 54px; font-size: 17px; }
.pk__fine { padding: 10px 16px 14px; text-align: center; font-size: 12.5px; line-height: 1.4; color: var(--g1); }
.pk__lose { font-weight: 600; color: var(--ink); }
@media (min-width: 900px) {
.oh__h { font-size: clamp(50px, 4.7vw, 78px); }
.oh-eb { margin-bottom: 18px; font-size: 12.5px; }
.oh-fin { max-width: 560px; margin-top: 18px; font-size: 23px; }
.pk { width: 640px; }
.pk__top { padding: 13px 24px; }
.pk__body { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 20px; padding: 20px 24px 18px; }
.pk__get { display: grid; font-size: 28px; line-height: 1.1; }
.pk__price { display: grid; justify-items: end; gap: 4px; text-align: right; }
.pk__now { font-size: 60px; }
.pk__act { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 18px 24px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.pk__end { order: 2; display: grid; gap: 2px; padding: 0; border: 0; font-size: 17px; }
.pk__left { font-size: 14px; }
.pk__btn { height: 60px; font-size: 18px; }
.pk__fine { padding: 12px 24px 18px; text-align: left; }
}
@media (min-width: 900px) and (max-height: 820px) {
.oh-pitch__pts { display: none !important; }
.oh-eb { margin-bottom: 12px; }
.oh-fin { margin-top: 12px; font-size: 20px; }
.pk__body { padding: 14px 24px 12px; }
.pk__now { font-size: 50px; }
.pk__act { padding-top: 14px; }
.pk__btn { height: 54px; }
.pk__fine { padding: 10px 24px 14px; }
}
@media (max-width: 899px) and (max-height: 720px) {
.oh-eb { margin-bottom: 10px; }
.pk__body { padding: 10px 16px 8px; }
.pk__now { font-size: 32px; }
.pk__btn { height: 48px; }
.pk__fine { padding: 8px 16px 10px; }
}
/* round 41b: the card climbs, brighter "Finally." line */
.oh-fin { color: #D6D9DC; }
@media (min-width: 900px) { .oh__buy { margin-top: 30px; padding-top: 0; } }
@media (min-width: 900px) and (max-height: 820px) { .oh__buy { margin-top: 20px; } }
.pk__b { display: block; }
.pk__tag { white-space: nowrap; }
@media (max-width: 400px) { .pk__top { padding: 10px 14px; } .pk__tag { font-size: 10.5px; letter-spacing: 0.07em; } .pk__save { padding: 4px 8px; font-size: 12px; } }
/* 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: var(--ink); }
.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: var(--ink); }
.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: var(--ink); }
.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: var(--ink); 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: var(--ink); 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: var(--g1); }
.oc__fine b { font-weight: 600; color: var(--ink); }
@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; } }
/* round 43b: phone */
@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; } }
/* round 44: the new render (phone larger), the card keeps clear of it */
@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; }
}
/* round 44b: big screens, no 5vw shift for the new render (it cut the box) */
@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; }
}
/* round 44c: 900-1199, the new render full-bleed like the bigger screens */
@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%; }
}
/* round 45: the Hotel Wi-Fi card goes (user: unclear what it says) */
.oh .oh-moment { display: none !important; }
/* round 47: no extra lime glow on the new render (it has its own light) */
.oh.oh:has(img[src*="hero_bundle"]) .oh__media::after { display: none; }
/* round 48: the box is the product: no dark floor scrim over it (only the very bottom edge fades) */
@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 50: the leaner offer card */
.cd--dh .cd__u:nth-child(n+3) { display: none; }
.ho-card__safe { text-align: center; }
.ho-more .ho-terms { margin-top: 10px; }
.ho-card .bu-dot::before, .ho-card .bu-dot::after { display: none !important; }
.ho-card .bu-dot { padding-left: 0 !important; }
.ho-card .bu-now .bu-item__val { font-family: var(--f-display); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--lime); }
.ho-card .ho-card__btn { display: flex; width: 100%; justify-content: center; }
/* round 51: the offer image fills the column next to the card (tall Blender render of the real box, hero mood) */
@media (min-width: 900px) {
.oa-offer.oa-offer .ho__grid { align-items: stretch; }
.oa-offer.oa-offer .ho__media { display: block; }
.oa-offer.oa-offer .ho-shot--ports { position: relative; top: auto; height: 100%; margin: 0; }
.oa-offer.oa-offer .ho-shot--ports .ho-shot__frame { aspect-ratio: auto; height: 100%; min-height: 560px; transform: none; overflow: hidden;
border-radius: var(--r-lg, 24px); background: #0A0A0C; -webkit-mask-image: none; mask-image: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.oa-offer.oa-offer .ho-shot--ports picture, .oa-offer.oa-offer .ho-shot--ports img { display: block; width: 100%; height: 100%; }
.oa-offer.oa-offer .ho-shot--ports img { object-fit: cover; object-position: 30% 62%; transform: none; }
}
/* round 52: the offer loop fills the frame like the still did */
@media (min-width: 900px) {
.oa-offer.oa-offer .ho-shot--ports .ho-loop { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 30% 62%; background: #0A0A0C; }
}
/* 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: var(--ink); 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: var(--ink); 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; } }
}
/* round 53b: the countries strip on phones too */
@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: var(--ink); 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: var(--ink); 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 54: one light sheen over the offer still, once, when it comes into view */
.ho-shot__frame--sheen { position: relative; }
.ho-shot__frame--sheen::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: screen;
background: linear-gradient(105deg, rgba(255, 255, 255, 0) 30%, rgba(255, 248, 235, 0.16) 46%, rgba(255, 255, 255, 0.05) 52%, rgba(255, 255, 255, 0) 64%);
background-size: 250% 100%; background-position: 120% 0; }
.ho-shot.is-in .ho-shot__frame--sheen::after { animation: hoSheen 1.8s cubic-bezier(0.3, 0.1, 0.2, 1) 0.45s 1 both; }
@keyframes hoSheen { 0% { opacity: 0; background-position: 120% 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; background-position: -30% 0; } }
@media (prefers-reduced-motion: reduce) { .ho-shot.is-in .ho-shot__frame--sheen::after { animation: none; } }
/* round 54: the flags strip stops after 3 rounds (on the first country), the dot and dashes stop with it */
.vl.is-done .vl__dash { animation: none; }
.vl.is-done .vl__dot { animation: none; opacity: 0; }
/* round 55: the premium offer card (3-agent review) */
.oa-offer.oa-offer .ho-card { border-radius: 28px; padding: 28px 22px 10px; background: linear-gradient(180deg, #141417, #0E0E11);
border: 1px solid rgba(255, 255, 255, 0.07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 40px 80px -40px rgba(0, 0, 0, 0.8); }
.ho-card__eyebrow { margin: 0 0 8px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }
.oa-offer .ho-lines { margin: 0; padding: 0; list-style: none; }
.oa-offer .ho-lines .bu-item { padding: 20px 0; border-top: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); align-items: center; }
.oa-offer .ho-lines .bu-item__thumb { width: 56px; height: 56px; border-radius: 14px; background: #1A1A1E; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); overflow: hidden; }
.oa-offer .ho-lines .bu-item__thumb img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.25); }
.oa-offer .ho-lines .bu-item__name { font-family: var(--f-display); font-size: 19px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.oa-offer .ho-lines .bu-item__when { font-size: 14px; color: rgba(255, 255, 255, 0.55); }
.ho-plus { margin-right: 6px; color: rgba(255, 255, 255, 0.4); }
.oa-offer .ho-lines .bu-later .bu-item__val { display: grid; grid-template-columns: auto auto; align-items: baseline; justify-content: end; column-gap: 6px; text-align: right; }
.oa-offer .ho-lines .bu-item__price { font-family: var(--f-display); font-size: 34px; font-weight: 500; line-height: 1; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.ho-vat { font-size: 13px; color: rgba(255, 255, 255, 0.55); }
.oa-offer .ho-lines .bu-later .bu-item__val s { grid-column: 1 / -1; justify-self: end; margin-top: 4px; font-size: 14px; color: rgba(255, 255, 255, 0.4); text-decoration-color: rgba(255, 255, 255, 0.45); }
.oa-offer.oa-offer .ho-lines .bu-now .bu-item__val { font-family: var(--f-display); font-size: 20px; font-weight: 500; letter-spacing: -0.01em; color: var(--lime); }
.ho-dl { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0 6px; }
.ho-dl[hidden] { display: none; }
.ho-dl__k { display: inline-flex; align-items: center; gap: 9px; margin: 0; font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, 0.75); }
.ho-dl__k svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.ho-dl__v { margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.5); white-space: nowrap; }
.ho-dl__v b { font-family: var(--f-display); font-size: 22px; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.ho-dl__v i { font-style: normal; }
.ho-dl__after { margin: 0 0 22px; font-size: 13px; color: rgba(255, 255, 255, 0.5); }
.oa-offer.oa-offer .ho-card__btn { display: flex; width: 100%; height: 56px; justify-content: center; align-items: center; border-radius: 999px; font-size: 17px; font-weight: 600; box-shadow: none; transition: filter 0.2s, transform 0.2s; }
.oa-offer.oa-offer .ho-card__btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.ho-card__refund { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 16px 0 4px; font-size: 14.5px; font-weight: 500; color: var(--ink); }
.ho-card__refund svg { width: 17px; height: 17px; fill: none; stroke: var(--lime); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.oa-offer.oa-offer .ho-card__safe { margin: 0 0 18px; text-align: center; font-size: 13px; color: rgba(255, 255, 255, 0.45); }
.oa-offer .ho-more { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.oa-offer .ho-more > summary { padding: 18px 0; }
.oa-offer .ho-more > summary::after { font-size: 22px; color: var(--ink); margin-right: -3px; }
@media (min-width: 900px) {
.oa-offer.oa-offer .ho-card { padding: 44px 44px 16px; }
.oa-offer .ho-lines .bu-item__price { font-size: 40px; }
.oa-offer.oa-offer .ho-shot--ports .ho-shot__frame { border-radius: 28px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
.oa-offer.oa-offer .ho-shot--ports img { object-position: 30% 46%; }
}
/* round 56: the deadline row stands out a little more (lime panel, lime days) */
.oa-offer .ho-dl { margin-top: 16px; padding: 14px 16px; border-radius: 16px; background: rgba(164, 255, 0, 0.07); box-shadow: inset 0 0 0 1px rgba(164, 255, 0, 0.28); }
.oa-offer .ho-dl__k { color: var(--ink); }
.oa-offer .ho-dl__k svg { color: var(--lime); stroke: var(--lime); }
.oa-offer .ho-dl__v b { font-size: 26px; color: var(--lime); }
.oa-offer .ho-dl__after { margin-top: 10px; padding-left: 16px; }
/* round 57: the image keeps the closed card's height (bundle.js 13 sets --ho-h); when the terms open, it stays put and sticky */
@media (min-width: 900px) {
.oa-offer.oa-offer .ho__grid { align-items: start; }
.oa-offer.oa-offer .ho-shot--ports { position: sticky; top: calc(var(--nav-h, 64px) + 24px); height: auto; }
.oa-offer.oa-offer .ho-shot--ports .ho-shot__frame { height: var(--ho-h, 640px); min-height: 0; }
}
/* round 58: tall screens (narrower than 16:9): the hero render no longer ends in a hard black edge at the bottom;
it fades out at the top AND the bottom into the page colour */
@media (min-width: 1200px) and (max-aspect-ratio: 16/9) {
.oh.oh:has(img[src*="hero_bundle"]) .oh__media {
-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 80%, transparent 100%);
mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 80%, transparent 100%); }
}
/* round 59: one countdown format everywhere (days + hours): the final countdown drops min and sec */
.cd--fin .cd__u:nth-child(n+3) { display: none !important; }
/* round 60: the moments cards with photos; the status chip sits on the photo */
.oa-moments .mo__item { padding: 0 0 20px; overflow: hidden; gap: 8px; border-color: rgba(255, 255, 255, 0.07); background: linear-gradient(180deg, #141417, #0E0E11); }
.mo__ph { position: relative; margin: 0 0 8px; aspect-ratio: 4 / 3; overflow: hidden; }
.mo__ph picture, .mo__ph img { display: block; width: 100%; height: 100%; }
.mo__ph img { object-fit: cover; transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1); }
.mo__item:hover .mo__ph img { transform: scale(1.04); }
.mo__ph::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(14, 14, 17, 0) 45%, rgba(14, 14, 17, 0.55) 78%, #121215 100%); }
.mo__ph .mo__app { position: absolute; z-index: 1; left: 12px; right: 12px; bottom: 12px; margin: 0;
background: rgba(16, 16, 19, 0.72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 10px 30px -12px rgba(0, 0, 0, 0.8); }
.oa-moments .mo__t, .oa-moments .mo__p { padding: 0 18px; }
@media (min-width: 1200px) { .oa-moments .mo { gap: 18px; } }
/* round 60b: the chip sits at the top of the photo (the phones in the photos are in the lower half) */
.mo__ph .mo__app { top: 12px; bottom: auto; }
.mo__ph::before { content: ""; position: absolute; z-index: 0; left: 0; right: 0; top: 0; height: 45%; pointer-events: none; background: linear-gradient(180deg, rgba(10, 10, 12, 0.55), rgba(10, 10, 12, 0)); }
.mo__ph::after { background: linear-gradient(180deg, rgba(14, 14, 17, 0) 70%, #121215 100%); }
/* round 61: line drawings in the moments cards; desktop 2 x 2 so the fine lines read; no zoom on hover (keeps lines crisp) */
.mo__ph { background: #0A0A0C; }
.mo__item:hover .mo__ph img { transform: none; }
.mo__ph::after { background: linear-gradient(180deg, rgba(14, 14, 17, 0) 82%, #121215 100%); }
@media (min-width: 1000px) {
.oa-moments .mo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.oa-moments .mo__t { font-size: 24px; }
.oa-moments .mo__p { font-size: 16px; max-width: 46ch; }
.mo__ph .mo__app { left: 16px; right: auto; top: 16px; width: min(340px, calc(100% - 32px)); }
}
/* 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; }
/* round 77: "cheaper here than in the app" on the VPN-only card (Igor 12.10.2026), as on the VPN funnel */
.vo-card__cheap { display: flex; align-items: center; gap: 10px; margin: 14px 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); text-wrap: balance; }
.vo-card__cheap svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--lime); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vo-card__cheap b { color: var(--ink); font-weight: 700; }
.vo-card__cheap { text-wrap: wrap; } /* round 77b */