/*
 * VRLT V2 shell for the static pages of virality.black.
 *
 * The V2 landing (/, /brands, /creators, /start) is a JS bundle built in
 * viralty/business. Every other page here is a static HTML file. This sheet
 * gives those pages the same tokens, type, header and footer, and remaps the
 * legacy design tokens so their content picks up the V2 look in both themes.
 *
 * The legacy stylesheets put everything in `@layer components` / Tailwind
 * layers. Everything below is deliberately UNLAYERED, so it wins without
 * specificity games.
 *
 * Theme and language are shared with every VRLT site through cookies on
 * .virality.black (vrlt_theme, vrlt_lang). The pre-paint snippet in each
 * page's <head> stamps data-theme before first paint; no choice = follow the OS.
 */

/* ---------- fonts ----------
 * All self-hosted in /site/fonts (no Google Fonts request on any page).
 * Geist (vercel/geist-font v1.7.2, OFL — site/fonts/OFL-Geist.txt): one
 * variable woff2 for every weight, Latin + Cyrillic incl. Kazakh letters.
 * Unbounded stays as the display accent (wordmark), same as the cabinet;
 * same variable woff2 subsets Google serves, fetched only when used.
 * Neither font has a ₸ glyph: the sign falls back to Arial, as before. */
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;src:url(/site/fonts/geist-1.7.2.woff2) format('woff2')}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:600 800;font-display:swap;src:url(/site/fonts/unbounded-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:600 800;font-display:swap;src:url(/site/fonts/unbounded-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:600 800;font-display:swap;src:url(/site/fonts/unbounded-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:600 800;font-display:swap;src:url(/site/fonts/unbounded-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}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:600 800;font-display:swap;src:url(/site/fonts/unbounded-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}

/* ---------- tokens (byte-for-byte the V2 ladder) ---------- */
:root{
 --bg:#0a0a0a;--surface:#161616;--raised:#202020;--raised-2:#292929;
 --line:#303030;--line-2:#414141;--line-3:#636363;
 --text:#fafaf7;--text-2:#c1c1c1;--text-3:#969696;
 --green:#7cfc00;--green-ink:#7cfc00;--on-green:#101a06;--green-bright:#9fff40;
 --shadow:rgba(0,0,0,.55);--header-bg:rgba(10,10,10,.94);
 --olive-bg:#171a14;--olive-bg-2:#1f3610;--olive-line:#3c4830;--olive-line-2:#578530;
 --v2-sans:'Geist',Arial,sans-serif;--v2-display:'Unbounded','Geist',Arial,sans-serif;
 color-scheme:dark}
:root[data-theme="light"]{
 --bg:#ffffff;--surface:#f6f6f3;--raised:#eeeeea;--raised-2:#e5e5e0;
 --line:#e2e2dc;--line-2:#cfcfc8;--line-3:#a9a9a1;
 --text:#0f0f0e;--text-2:#44443f;--text-3:#6c6c65;
 --green-ink:#3c7a00;--green-bright:#5fce00;
 --shadow:rgba(16,16,14,.14);--header-bg:rgba(255,255,255,.92);
 --olive-bg:#f2f5ec;--olive-bg-2:#e8f2dc;--olive-line:#d5dec6;--olive-line-2:#8fbf5e;
 color-scheme:light}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){
 --bg:#ffffff;--surface:#f6f6f3;--raised:#eeeeea;--raised-2:#e5e5e0;
 --line:#e2e2dc;--line-2:#cfcfc8;--line-3:#a9a9a1;
 --text:#0f0f0e;--text-2:#44443f;--text-3:#6c6c65;
 --green-ink:#3c7a00;--green-bright:#5fce00;
 --shadow:rgba(16,16,14,.14);--header-bg:rgba(255,255,255,.92);
 --olive-bg:#f2f5ec;--olive-bg-2:#e8f2dc;--olive-line:#d5dec6;--olive-line-2:#8fbf5e;
 color-scheme:light}}

/* Hidden until the page is translated (EN/KZ); 3 s safety net in <head>. */
.i18n-pending body{visibility:hidden}

/* ---------- header ---------- */
.v2-skip{position:fixed;top:-100px;left:20px;z-index:100;padding:14px 16px;border-radius:10px;background:var(--green);color:var(--on-green);font:800 13px/1 var(--v2-sans);text-decoration:none}
.v2-skip:focus{top:10px}
.v2-header{position:sticky;top:0;z-index:60;background:var(--header-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--line);font-family:var(--v2-sans);color:var(--text)}
.v2-header *{box-sizing:border-box}
.v2-header-in{display:flex;align-items:center;justify-content:space-between;gap:22px;max-width:1440px;margin:0 auto;padding:18px 40px;position:relative}
.v2-logo{display:inline-flex;align-items:baseline;gap:10px;line-height:1;color:var(--text);text-decoration:none;flex:none}
.v2-wordmark{font:800 29px/1 'Unbounded',sans-serif;letter-spacing:-2px}
.v2-wordmark>span{color:var(--green-ink)}
.v2-logo small{font:700 13px/1 var(--v2-sans);color:var(--text-2);letter-spacing:0}
.v2-nav{display:flex;align-items:center;gap:28px;font-size:11px;font-weight:600}
.v2-nav>a{color:var(--text-2);text-decoration:none}
.v2-nav>a:hover{color:var(--text)}
.v2-switch{display:flex;padding:4px;border:1px solid var(--line);border-radius:99px;gap:4px}
.v2-switch a{padding:7px 14px;color:var(--text-3);border-radius:99px;text-decoration:none}
.v2-switch a:hover{color:var(--text)}
.v2-switch [aria-current]{background:var(--raised-2);color:var(--text)}
.v2-actions{display:flex;align-items:center;gap:20px}
.v2-login{font-size:11px;font-weight:600;white-space:nowrap;color:var(--text-2);text-decoration:none}
.v2-login:hover{color:var(--text)}
.v2-btn{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:42px;padding:10px 20px;border-radius:99px;border:1px solid transparent;background:var(--green);color:var(--on-green);font:800 11px/1 var(--v2-sans);white-space:nowrap;text-decoration:none;cursor:pointer;transition:background .2s,transform .2s}
.v2-btn:hover{background:var(--green-bright);transform:translateY(-2px)}
.v2-btn svg{width:18px;height:18px;flex:none}
.v2-menu{display:none;width:40px;height:40px;border:0;background:transparent;color:var(--text);font-size:22px;line-height:1;cursor:pointer;padding:0}
.v2-mnav{position:absolute;top:100%;left:0;right:0;padding:12px 24px 22px;display:grid;background:var(--surface);border-bottom:1px solid var(--line)}
.v2-mnav[hidden]{display:none}
.v2-mnav a{padding:13px 0;border-bottom:1px solid var(--line);color:var(--text);text-decoration:none;font-size:15px;font-weight:600}

/* RU / KZ / EN + sun/moon — same look as the cabinets' SitePrefs. */
.v2-prefs{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;color:var(--text);font:600 12px/1 var(--v2-sans);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.v2-langs{display:inline-flex;align-items:center;height:32px;padding:2px;border-radius:999px;border:1px solid color-mix(in srgb,currentColor 18%,transparent)}
.v2-lang{appearance:none;margin:0;border:0;background:transparent;color:inherit;font:inherit;height:26px;min-width:30px;padding:0 8px;border-radius:999px;opacity:.6;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .15s,opacity .15s}
.v2-lang:hover{opacity:1}
.v2-lang[aria-pressed="true"]{opacity:1;background:color-mix(in srgb,currentColor 14%,transparent)}
.v2-theme{position:relative;width:32px;height:32px;flex:0 0 32px;display:inline-flex;align-items:center;justify-content:center;border:1px solid color-mix(in srgb,currentColor 18%,transparent);border-radius:99px;background:transparent;color:inherit;cursor:pointer;padding:0}
.v2-theme:hover{background:color-mix(in srgb,currentColor 10%,transparent)}
.v2-theme span{position:absolute;display:grid;place-content:center;transition:opacity .22s,transform .22s}
.v2-theme svg{width:16px;height:16px}
.v2-theme-moon{opacity:0;transform:rotate(-35deg) scale(.7)}
:root[data-theme="light"] .v2-theme-sun{opacity:0;transform:rotate(35deg) scale(.7)}
:root[data-theme="light"] .v2-theme-moon{opacity:1;transform:none}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .v2-theme-sun{opacity:0;transform:rotate(35deg) scale(.7)}:root:not([data-theme="dark"]) .v2-theme-moon{opacity:1;transform:none}}

:where(.v2-header,.v2-footer) a:focus-visible,:where(.v2-header,.v2-footer) button:focus-visible{outline:2px solid var(--green);outline-offset:4px;border-radius:8px}

@media (max-width:1150px){.v2-nav{gap:17px}.v2-nav>a{font-size:10px}.v2-switch a{padding:7px 10px}.v2-actions{gap:14px}.v2-header-in{padding-left:25px;padding-right:25px}}
@media (max-width:900px){.v2-nav{display:none}.v2-menu{display:block}.v2-header-in{padding:14px 25px}.v2-login{display:none}}
@media (max-width:650px){.v2-header-in{padding:12px 16px;gap:10px}.v2-wordmark{font-size:24px}.v2-logo small{display:none}.v2-actions{gap:6px}.v2-btn{min-height:38px;padding:10px 14px;font-size:10px}.v2-btn svg{display:none}.v2-menu{width:34px}.v2-prefs{gap:4px}.v2-lang{min-width:28px;padding:0 6px}}
/* Narrow phones: the three languages collapse to one chip that cycles
   RU → KZ → EN (same rule as the cabinets, viralty/virality#4386). */
@media (max-width:479px){.v2-lang:not([aria-pressed="true"]){display:none}.v2-lang[aria-pressed="true"]{background:transparent;min-width:34px}}
@media (prefers-reduced-motion:reduce){.v2-btn:hover{transform:none}.v2-theme span{transition:none}}

/* ---------- footer ---------- */
.v2-footer{max-width:1280px;margin:0 auto;padding:80px 40px 30px;font-family:var(--v2-sans);color:var(--text);background:transparent}
.v2-footer *{box-sizing:border-box}
.v2-footer a{color:inherit;text-decoration:none}
.v2-footer p{margin:0}
.v2-ftop{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}
.v2-ftop>div:first-child p{font-size:20px;color:var(--text);line-height:1.4;margin:25px 0 16px;letter-spacing:-.03em;font-weight:600}
.v2-ftop>div:first-child span{font-size:10px;color:var(--text-3)}
.v2-ftop h3{font:700 11px/1.4 var(--v2-sans);letter-spacing:0;margin:0 0 20px;color:var(--text-3)}
.v2-ftop>div:not(:first-child)>a{display:block;font-size:11px;line-height:2.7;color:var(--text-2)}
.v2-ftop a:hover{color:var(--green-ink)}
.v2-flegal{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:flex-start;padding:26px 0 4px;border-top:1px solid var(--line);margin-top:34px}
.v2-flegal-info{display:grid;gap:7px;max-width:640px}
.v2-flegal-info p{font-size:11.5px;line-height:1.6;color:var(--text-3)}
.v2-flegal-info strong{color:var(--text);font-weight:700}
.v2-flegal-info a{text-decoration:underline;text-underline-offset:2px}
.v2-flegal-info a:hover{color:var(--text)}
.v2-pay{display:flex;gap:10px;align-items:center;flex:none}
.v2-pay img{height:30px;width:auto;border-radius:4px;background:#fff;padding:3px 5px}
.v2-fbottom{border-top:1px solid var(--line);margin-top:40px;padding-top:20px;font-size:10px;color:var(--text-3);display:flex;gap:20px;justify-content:space-between;flex-wrap:wrap}
.v2-fbottom>div{display:flex;gap:20px;flex-wrap:wrap}
.v2-fbottom a:hover{color:var(--text)}
@media (max-width:900px){.v2-ftop{gap:25px;grid-template-columns:1.3fr 1fr 1fr}.v2-ftop>div:last-child{grid-column:2}}
@media (max-width:650px){.v2-footer{padding:60px 20px 26px}.v2-ftop{grid-template-columns:1fr 1fr}.v2-ftop>div:first-child{grid-column:1/-1}.v2-ftop>div:last-child{grid-column:auto}.v2-pay img{height:26px}}

/* Russian-only legal documents: a note under the H1 in KZ / EN. */
.v2-doc-note{margin:18px 0 0;padding:12px 16px;border:1px solid var(--line-2);border-radius:12px;background:var(--surface);color:var(--text-2);font:600 14px/1.5 var(--v2-sans);max-width:62ch}

/* ---------- store badges (creator CTAs) ---------- */
.v2-stores{display:flex;flex-wrap:wrap;gap:10px}
.v2-store{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:8px 18px 8px 14px;border-radius:14px;border:1px solid var(--line-2);background:var(--surface);color:var(--text);text-decoration:none;font-family:var(--v2-sans);transition:background .2s,border-color .2s,transform .2s}
.v2-store span{display:grid;line-height:1.1;text-align:left}
.v2-store small{font-size:10px;font-weight:600;letter-spacing:.04em;color:var(--text-3)}
.v2-store strong{font-size:15px;font-weight:800;letter-spacing:-.01em}
.v2-store svg{width:20px;height:20px;flex:none}
.v2-store:hover{background:var(--raised);border-color:var(--line-3);transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.v2-store,.v2-store:hover{transition:none;transform:none}}

/* ======================================================================
 * Skin for the legacy pages (<html class="v2-skin">). Their stylesheets read
 * --color-* / --font-* (Tailwind @theme) and the short aliases (--bg,
 * --accent, --mono, --display). Point all of them at the V2 ladder.
 * ==================================================================== */
:root.v2-skin{
 --color-bg:var(--bg);--color-bg-card:var(--surface);--color-bg-card-hover:var(--raised);
 --color-border:var(--line);--color-border-bright:var(--line-2);
 --color-text:var(--text);--color-text-muted:var(--text-2);--color-text-dim:var(--text-3);
 --color-accent:var(--green-ink);--color-accent-dim:var(--olive-line-2);
 --font-mono:var(--v2-sans);--font-sans:var(--v2-sans);--font-display:var(--v2-sans);
 --bg-card:var(--surface);--bg-card-hover:var(--raised);--border:var(--line);--border-bright:var(--line-2);
 --text-muted:var(--text-2);--text-dim:var(--text-3);--accent:var(--green-ink);--accent-dim:var(--olive-line-2);
 --mono:var(--v2-sans);--sans:var(--v2-sans);--display:var(--v2-sans)}
:root.v2-skin body{background:var(--bg);color:var(--text);font-family:var(--v2-sans);-webkit-font-smoothing:antialiased;font-synthesis:none}
/* Numbers and prices line up in columns and don't jitter while counting. */
html{font-variant-numeric:tabular-nums}
/* Legacy bodies paint a green grid; V2 is a clean ground. */
:root.v2-skin body::before,:root.v2-skin body:before{display:none!important}

/* Type: V2 headings are Geist semibold with tight tracking. */
:root.v2-skin :is(h1,h2,h3,.section-title,.hero h1,.download-title){font-family:var(--v2-sans);font-weight:700;letter-spacing:-.05em}
:root.v2-skin h1{letter-spacing:-.055em}
:root.v2-skin :is(.hero-eyebrow,.section-label,.half-eyebrow,.privacy-eyebrow){font-family:var(--v2-sans);font-weight:700;letter-spacing:.13em}
/* Everything that named a font literally instead of through the tokens. */
:root.v2-skin :is(.chooser-cta,.chooser-name,.chooser-num,.chooser-stats li,.hflow-chaos-views,.hflow-chaos-views-sub,.hflow-label-counter,.hflow-label-counter-sub,.hflow-label-title,.hflow-payouts-amount,.hflow-payouts-title,.hflow-payouts-total-label,.hflow-payouts-total-value,.hflow-payouts-views,.hflow-wall-disclaimer,.hflow-wall-payout,.hflow-wall-summary-label,.hflow-wall-summary-note,.hflow-wall-summary-value,.hflow-wall-title,.hflow-wall-views,.home-pricing-fineprint,.home-pricing-min-hint,.home-pricing-notice-body,.home-pricing-notice-tag,.home-pricing-result-label,.home-pricing-result-value,.home-pricing-row-label,.home-pricing-views,.home-pricing-views-unit,.home-table-head .home-table-cell,.home-table-label,.home-table-link,.pricing-pill){font-family:var(--v2-sans)}
:root.v2-skin :is(input,select,textarea,button){font-family:var(--v2-sans)}

/* Green FIELDS keep the real brand green with dark ink in both themes; the
   token above only darkens green used as TEXT on a light ground. */
:root.v2-skin :is(.btn-primary,.nav-cta,.hflow-next-btn,.calc-seg-btn.is-active,.calc-how-num,.consult-success-check,.flow-creator,.mobile-cta-primary,.half-cta,.demo-form-chip input:checked+span){background:var(--green);color:var(--on-green);border-color:var(--green)}
:root.v2-skin :is(.btn-primary,.nav-cta,.mobile-cta-primary,.half-cta):hover{background:var(--green-bright)}
:root.v2-skin :is(.audience-card,.hero-eyebrow,.section-label,.half-eyebrow,.hflow-payouts-views)::before{background:var(--green)}
:root.v2-skin input[type=range]::-webkit-slider-thumb{background:var(--green)}
:root.v2-skin input[type=range]::-moz-range-thumb{background:var(--green)}
:root.v2-skin .btn{border-radius:99px}
:root.v2-skin .btn-primary{border-radius:99px}

/* Video overlays and the dark "screen" mock-ups are pictures of a dark UI —
   they keep dark tokens in the light theme so their white text stays legible. */
:root.v2-skin :is(.hflow,.hflow-stage,.reels-tile,.reels-marquee-tile,.reel-tile){--bg:#0a0a0a;--surface:#161616;--raised:#202020;--line:#303030;--line-2:#414141;--text:#fafaf7;--text-2:#c1c1c1;--text-3:#969696;--green-ink:#7cfc00;color-scheme:dark}

/* The legacy header and footer are replaced by the V2 ones in the markup. */
.creator-hero .v2-stores{margin-top:18px}
.final-cta .v2-stores{justify-content:center;margin-top:18px}
/* Long Russian words («конфиденциальности») must not push a 390 px page sideways. */
:root.v2-skin :is(h1,h2){overflow-wrap:break-word;hyphens:auto}

/* Tap targets: every control in the header and footer gets a 44×44 px hit
   area (viralty/virality#4556). The extra size is transparent padding; where
   a control has a visible chip or ring, that is drawn by ::before at the old
   size, and negative margins keep the old footprint, so the header and the
   footer lay out exactly as before. Same rules as the V2 bundle (style.css). */
.v2-header .v2-logo,.v2-footer .v2-logo{align-items:center;min-height:44px;margin-block:-8px}
.v2-nav>a{display:inline-flex;align-items:center;min-height:44px;margin-block:-13px}
.v2-switch a{position:relative;isolation:isolate;display:inline-flex;align-items:center;min-height:44px;padding-block:0;margin-block:-6px;background:none!important}
.v2-switch a::before{content:"";position:absolute;inset:6px 0;z-index:-1;border-radius:99px}
.v2-switch [aria-current]::before{background:var(--raised-2)}
@media (min-width:901px){.v2-login{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding-inline:6px;margin:-13px -6px}}
.v2-btn{min-height:44px}
.v2-menu{width:44px;height:44px}
.v2-lang{position:relative;isolation:isolate;height:44px;min-width:44px;margin-block:-9px;background:none!important}
.v2-lang::before{content:"";position:absolute;inset:9px 5px;z-index:-1;border-radius:999px;transition:background-color .15s}
.v2-lang[aria-pressed="true"]::before{background:color-mix(in srgb,currentColor 14%,transparent)}
.v2-theme{width:44px;height:44px;flex:0 0 44px;margin:-6px;border-color:transparent;background:none}
.v2-theme::before{content:"";position:absolute;inset:6px;border-radius:99px;border:1px solid color-mix(in srgb,currentColor 18%,transparent);transition:background-color .2s}
.v2-theme:hover{background:none}
.v2-theme:hover::before{background:color-mix(in srgb,currentColor 10%,transparent)}
.v2-ftop>div:not(:first-child)>a{display:flex;align-items:center;min-height:44px;line-height:1.3}
.v2-flegal-info a{padding-block:14.5px}
/* The footer wordmark was caught by `.v2-ftop>div:first-child span` and shrank
   to 10 px grey; it is the same 29 px wordmark as in the header. */
.v2-ftop>div:first-child .v2-wordmark{font-size:29px;color:var(--text)}
.v2-ftop>div:first-child .v2-wordmark>span{font-size:inherit;color:var(--green-ink)}
.v2-fbottom a{display:inline-flex;align-items:center;min-height:44px;margin-block:-14px}
/* Three 44 px chips do not fit next to the CTA below 480 px, so the
   one-chip RU → KZ → EN cycle now starts at 479 px instead of 399 px
   (the click handler uses the same query). */
@media (max-width:650px){.v2-lang{min-width:44px;padding:0 6px}}
@media (max-width:479px){.v2-lang[aria-pressed="true"]{min-width:44px}.v2-lang[aria-pressed="true"]::before{background:transparent}}