/* LiveGreeks landing — Final. V2's page with selected V3 components (see index-final.html).
   Served under the landing CSP: no inline styles, no data: URIs, no web fonts.
   Part 1 is landing-v2.css as the global base, minus the parts Final removes (beam video, numbers,
   in-focus, V2 pricing, V2 footer). Part 2 is landing-v3.css for the migrated components, every
   selector scoped under .v3s so V3 tokens and rules reach only elements inside V3 wrappers. */
:root {
  --bg: #0a0a0a;
  --bg-2: #101010;
  --surface: #151515;
  --surface-2: #1b1b1b;
  --line: #232323;
  --line-2: #2f2f2f;
  --text: #ececec;
  --text-2: #bdbdbd;
  --muted: #7b7b7b;
  --dim: #3b3b3b;
  --ink: #cdcdcd;            /* large display type */
  --accent: #00b8e6;         /* LiveGreeks blue */
  --accent-2: #00d2ff;
  --accent-soft: rgba(0, 184, 230, .1);
  --accent-ink: #04060a;
  --display: Impact, "Anton", "Haettenschweiler", "HelveticaNeue-CondensedBlack", "Helvetica Neue Condensed Black", "Arial Narrow", "Roboto Condensed", sans-serif-condensed, sans-serif;
  --sans: Inter, "Inter Display", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(16px, 1.8vw, 28px);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
  --nav-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); font: 400 16px/1.45 var(--sans); letter-spacing: -.011em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ol, ul { list-style: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
::selection { background: var(--accent); color: var(--accent-ink); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: fixed; z-index: 300; top: 10px; left: 10px; padding: 10px 14px; background: var(--accent); color: var(--accent-ink); font-weight: 600; transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.label { color: var(--muted); font: 500 11px/1.3 var(--sans); letter-spacing: .04em; text-transform: uppercase; }
.live-dot { display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: #2ee66b; vertical-align: 1px; box-shadow: 0 0 0 0 rgba(46, 230, 107, .6); animation: live-pulse 2.4s ease-out infinite; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(46, 230, 107, .55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(46, 230, 107, 0); } }
.i-arrow { width: .9em; height: .9em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform .45s var(--ease); }
a:hover .i-arrow, button:hover .i-arrow { transform: translate(2px, -2px); }

/* Split text: chars/words are wrapped by landing-v2.js. */
.char, .word { display: inline-block; }
.split-mask { white-space: nowrap; }
.split-mask { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .04em; margin-bottom: -.04em; }

/* ---------- Pills ---------- */
.pill { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 40px; padding: 0 18px; border: 1px solid transparent; border-radius: 999px; background: none; font: 600 12px/1 var(--sans); letter-spacing: .01em; text-transform: uppercase; white-space: nowrap; transition: background-color .3s, border-color .3s, color .3s, transform .5s var(--ease); }
.pill-dark { background: #161616; border-color: #262626; color: var(--text); }
.pill-dark:hover { background: #222; }
.pill-line { border-color: var(--line-2); color: var(--text); }
.pill-line:hover { border-color: var(--text-2); }
.pill-accent { background: var(--accent); color: #fff; }
.pill-accent:hover { background: #1fc1e9; }
.pill-accent-line { border: 1.5px solid var(--accent); background: var(--accent-soft); color: var(--accent); }
.pill-accent-line:hover { background: var(--accent); color: #fff; }
.pill-accent-text { border-color: var(--line-2); color: var(--accent); }
.pill-accent-text:hover { border-color: var(--accent); }
.pill-glass { border-color: rgba(255, 255, 255, .28); background: rgba(14, 14, 14, .45); color: #f2f2f2; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.pill-glass:hover { background: rgba(255, 255, 255, .14); }
.pill-block { width: 100%; }
.pill-small { min-height: 34px; padding: 0 14px; font-size: 11px; }
.pill-wide { display: flex; width: min(440px, calc(100% - 2 * var(--gutter))); margin: 0 auto; border-color: var(--line-2); color: var(--accent); }
.pill-wide:hover { border-color: var(--accent); background: var(--accent-soft); }

/* ---------- Wordmark (fixed; JS scrubs translate + scale) ---------- */
.mark { position: fixed; z-index: 94; top: 0; left: 0; display: flex; align-items: flex-start; gap: .04em; color: var(--ink); font: 400 var(--mark-size, 12vw)/.8 var(--display); letter-spacing: .004em; transform-origin: 0 0; transform: translate3d(var(--gutter), 18px, 0); will-change: transform; white-space: nowrap; }
.mark-word { display: inline-flex; overflow: hidden; padding-top: .02em; }
.mark-badge { margin-top: .05em; padding: .16em .32em .12em; border: max(1px, .012em) solid currentColor; border-radius: .2em; font: 700 max(7px, .07em)/1 var(--sans); letter-spacing: .06em; opacity: var(--badge, 1); }
html.js body:not(.is-ready) .mark .char { transform: translateY(115%); }
.is-ready .mark .char { transform: none; transition: transform 1.1s var(--ease); transition-delay: calc(var(--i, 0) * .045s); }

/* ---------- Nav ---------- */
.nav { position: fixed; z-index: 98; top: 0; right: 0; display: flex; align-items: center; gap: clamp(14px, 2vw, 34px); height: var(--nav-h); padding: 0 var(--gutter); }
body::before { content: ""; position: fixed; z-index: 91; inset: 0 0 auto; height: 96px; background: linear-gradient(var(--bg) 10%, rgba(10, 10, 10, .78) 45%, rgba(10, 10, 10, 0)); opacity: 0; transition: opacity .4s; pointer-events: none; }
body.is-scrolled::before { opacity: 1; }
.nav-status, .nav-clock { display: grid; gap: 2px; }
.nav-status-line { color: var(--text); font: 600 13px/1.2 var(--sans); font-variant-numeric: tabular-nums; }
.nav-status-sub { color: var(--muted); font: 500 10px/1.2 var(--sans); letter-spacing: .03em; text-transform: uppercase; }
.nav-signin { color: var(--text-2); font: 600 12px/1 var(--sans); text-transform: uppercase; transition: color .2s; }
.nav-signin:hover { color: var(--text); }
.nav-cta { min-height: 38px; }
.nav-menu { position: relative; width: 40px; height: 40px; padding: 0; border: 1px solid #262626; border-radius: 50%; background: #161616; }
.nav-menu span { position: absolute; left: 12px; right: 12px; height: 1.5px; background: var(--text); transition: transform .45s var(--ease); }
.nav-menu span:first-child { top: 16px; }
.nav-menu span:last-child { top: 22px; }
.nav-menu[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.nav-menu[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }
html.js body:not(.is-ready) .nav > * { opacity: 0; transform: translateY(-10px); }
.is-ready .nav > * { opacity: 1; transform: none; transition: opacity .8s, transform .8s var(--ease); transition-delay: calc(.35s + var(--i, 0) * .06s); }

/* ---------- Menu overlay ---------- */
.menu { position: fixed; z-index: 96; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--nav-h) + 6vh) var(--gutter) var(--gutter); background: #0c0c0c; clip-path: inset(0 0 100% 0); transition: clip-path .8s var(--ease-io); }
.menu[hidden] { display: flex; visibility: hidden; }
.menu.is-open { clip-path: inset(0 0 0 0); }
.menu-links { display: grid; }
.menu-links a { display: flex; align-items: flex-start; gap: 14px; overflow: hidden; color: var(--ink); font: 400 clamp(46px, 7.4vh, 92px)/.98 var(--display); text-transform: uppercase; transition: color .25s; }
.menu-links a:hover { color: var(--accent); }
.menu-links a { transform: translateY(40px); opacity: 0; }
/* Final: the entrance stagger applies to transform and opacity only, so the hover colour responds at once. */
.menu.is-open .menu-links a { transform: none; opacity: 1; transition: transform .9s var(--ease), opacity .9s, color .25s; transition-delay: calc(.2s + var(--i, 0) * .05s), calc(.2s + var(--i, 0) * .05s), 0s; }
.menu-foot { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px; padding-top: 22px; border-top: 1px solid var(--line); }
.menu-mail { color: var(--accent); font: 500 clamp(20px, 2.4vw, 30px)/1 var(--sans); letter-spacing: -.03em; }
.menu-actions { display: flex; gap: 10px; }

/* ---------- Hero ---------- */
.hero { position: relative; height: 175vh; }
.hero-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.hero-media { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.hero-tagline { position: absolute; top: max(17vh, calc(var(--mark-h, 160px) + 40px)); right: var(--gutter); display: grid; justify-items: end; color: var(--text); font: 500 clamp(28px, 3.25vw, 50px)/.98 var(--sans); letter-spacing: -.045em; text-align: right; opacity: var(--to, 1); }
.hero-tagline .line { display: block; overflow: hidden; padding-bottom: .04em; }
.hero-tagline .line > span { display: inline-block; }
.hero-tagline .muted { color: #8a8a8a; }
html.js body:not(.is-ready) .hero-tagline .line > span { transform: translateY(105%); }
.is-ready .hero-tagline .line > span { transform: none; transition: transform 1.2s var(--ease); transition-delay: calc(.3s + var(--i, 0) * .08s); }
.hero-statement { position: absolute; left: var(--gutter); bottom: 98px; max-width: 22em; color: #8a8a8a; font: 500 clamp(18px, 1.72vw, 26px)/1.06 var(--sans); letter-spacing: -.035em; }
.hero-statement-strong { color: var(--text); }
.hero-bottom { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 16px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
html.js body:not(.is-ready) [data-hero-fade] { opacity: 0; transform: translateY(16px); }
.is-ready [data-hero-fade] { opacity: var(--fo, 1); transform: translateY(var(--fy, 0px)); transition: opacity 1s .65s, transform 1.2s .65s var(--ease); }
.is-scrubbing [data-hero-fade] { transition: none; }
.hero-inside { display: flex; align-items: center; gap: 22px; min-width: 0; }
.hero-inside-label { flex: none; color: var(--muted); font: 600 10px/1 var(--sans); text-transform: uppercase; letter-spacing: .04em; }
.marquee { width: min(620px, 46vw); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
/* The script appends one copy of the items and the track slides by half its width. Each item carries its own
   trailing space (not a flex gap, which falls between items only), so half the track is exactly one set and the
   loop restarts on the same frame it ends on. */
.marquee-track { display: flex; width: max-content; animation: marquee 46s linear infinite; }
.marquee-track span { display: inline-flex; align-items: center; gap: 8px; margin-right: 40px; color: #d6d6d6; font: 700 15px/1 var(--sans); letter-spacing: -.03em; white-space: nowrap; }
.marquee-track i { color: var(--muted); font-style: normal; font-size: 14px; }
@keyframes marquee { to { transform: translateX(-50%); } }
.hero-cta { min-height: 54px; padding: 0 22px 0 24px; gap: 46px; font: 600 clamp(15px, 1.4vw, 21px)/1 var(--sans); letter-spacing: -.02em; }
.hero-cta .i-arrow { width: 16px; height: 16px; }

/* ---------- About (scroll-scrubbed words) ---------- */
/* Final: 20vh taller than V2, so the fully lit statement holds for a moment before it scrolls away. */
.about { position: relative; height: 260vh; margin-top: -75vh; }
.about-pin { position: sticky; top: 0; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-items: start; align-content: center; gap: 2vw; height: 100vh; height: 100svh; padding: 0 var(--gutter); }
.about-text { max-width: 24em; color: var(--text); font: 500 clamp(28px, calc(2.45vw + 4px), 44px)/1.12 var(--sans); letter-spacing: -.038em; text-align: center; }
html.js [data-scrub-words] .word { color: #3a3a3a; transition: color .35s; }
html.js [data-scrub-words] .word.is-lit { color: var(--text); }

/* ---------- Big titles ---------- */
.big-title-wrap { display: flex; align-items: flex-start; justify-content: center; gap: 8px; padding: 22vh var(--gutter) 9vh; }
.big-title-wrap-left { justify-content: flex-start; padding: 0; }
.big-title { color: var(--ink); font: 400 clamp(64px, 10.4vw, 176px)/.84 var(--display); letter-spacing: .002em; text-transform: uppercase; white-space: nowrap; }
.big-title-left { font-size: clamp(64px, 8.4vw, 140px); }
.big-title-sup { padding-top: .8em; color: var(--text-2); font: 500 12px/1 var(--sans); text-transform: uppercase; }
html.js [data-title] .char { transform: translateY(115%); }
html.js [data-title].is-in .char { transform: none; transition: transform 1.1s var(--ease); transition-delay: calc(var(--i, 0) * .03s); }

/* ---------- Platform ---------- */
.platform { position: relative; padding-bottom: 14vh; }
.platform-grid { display: grid; grid-template-columns: minmax(250px, 32%) minmax(0, 1fr); gap: 3vw; padding: 0 var(--gutter); }
.platform-side { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; height: 100svh; padding: calc(var(--nav-h) + 6vh) 0 9vh; }
/* Final: the number and index also follow the viewport height, so on short, wide laptop windows the panel leaves
   room for a two-sentence caption (screens 900px and taller are unchanged). */
.platform-num { display: flex; align-items: flex-end; color: #3a3a3a; font: 400 clamp(88px, min(9.2vw, 16vh), 156px)/.84 var(--display); }
.platform-num-roll { display: flex; flex-direction: column; height: .84em; overflow: hidden; }
.platform-num-roll span { display: block; height: .84em; transform: translateY(calc(var(--n, 0) * -100%)); transition: transform .8s var(--ease); }
.platform-num i { color: var(--accent); font-style: normal; }
.platform-index { display: grid; gap: 4px; margin-top: 28px; }
.platform-index li { display: flex; align-items: center; gap: 0; color: var(--dim); font: 500 clamp(30px, min(3.2vw, 5.8vh), 50px)/1.3 var(--sans); transition: color .4s, gap .5s var(--ease); }
.platform-index li::before { content: ""; width: 0; height: 1px; background: var(--text); transition: width .5s var(--ease); }
.platform-index li.is-active { gap: 8px; color: var(--text); }
.platform-index li.is-active::before { width: 16px; }
/* Final: the active index item doubles as the title, so the description sits right under the index. */
.platform-caption { margin-top: 24px; }
.platform-caption-desc { max-width: 24em; color: #8a8a8a; font: 500 clamp(15px, 1.25vw, 19px)/1.15 var(--sans); letter-spacing: -.03em; }
.platform-caption.is-swapping { opacity: 0; transform: translateY(12px); }
.platform-caption { transition: opacity .35s, transform .5s var(--ease); }
.platform-list { display: flex; flex-direction: column; gap: 8vh; padding: 14vh 0 10vh; }
/* Scroll pause: the item sticks while its hold spacer scrolls past. */
.work-hold::after { content: ""; display: block; height: var(--hold, 45vh); }
.work { position: sticky; top: calc(var(--nav-h) + 6vh); }
.work-meta { display: none; }
.work-media { position: relative; display: grid; place-items: center; overflow: hidden; aspect-ratio: 1.34; max-height: calc(100vh - var(--nav-h) - 9vh); max-height: calc(100svh - var(--nav-h) - 9vh); border-radius: 3px; background: radial-gradient(120% 95% at 28% 18%, #262626, #121212 55%, #0b0b0b); perspective: 1600px; }
.work-media::before { content: ""; position: absolute; inset: 0; background: repeating-radial-gradient(circle at 70% 30%, rgba(255, 255, 255, .018) 0 2px, transparent 2px 7px); pointer-events: none; }
.work-media > img { width: 94%; max-height: 94%; object-fit: contain; transform: translate3d(0, var(--py, 0px), 0) scale(var(--ps, 1)); will-change: transform; }
/* Final: the GEX Surface laptop fills its frame, with no backdrop. */
.work-media-stage { background: none; }
.work-media-stage::before { display: none; }
.work-media-stage > img { width: 100%; height: 100%; max-height: none; }
.device { position: relative; display: flex; flex-direction: column; width: 84%; max-height: 90%; overflow: hidden; border: 1px solid #333; border-radius: 10px; background: #0c0c0c; box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .02); transform: translate3d(0, var(--py, 0px), 0) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--ps, 1)); transform-style: preserve-3d; will-change: transform; }
.device-bar { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 12px; border-bottom: 1px solid #242424; background: #141414; }
.device-bar i { width: 7px; height: 7px; border-radius: 50%; background: #333; }
.device-bar span { margin-left: 10px; color: var(--muted); font: 500 10px/1 var(--sans); }
.device video, .device img { flex: 1 1 auto; min-height: 0; width: 100%; height: auto; object-fit: contain; }
.work-link { position: absolute; left: 7%; bottom: 7%; }

/* ---------- Reveal on view ---------- */
html.js [data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity 1s, transform 1.2s var(--ease); transition-delay: calc(var(--i, 0) * .09s); }
html.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Workspaces (services accordion) ---------- */
.services { position: relative; }
.services .big-title-wrap { padding-bottom: 6vh; }
.services-track { position: relative; }
.services-pin { position: relative; }
/* Final: seven rows (V2 had four), each with V2's 48vh of pinned scroll. */
html.js .services.is-pinned .services-track { height: calc(100vh + 7 * 48vh); }
html.js .services.is-pinned .services-pin { position: sticky; top: calc(var(--nav-h) + 4px); }
.service { position: relative; display: grid; grid-template-columns: minmax(0, .55fr) minmax(0, 1.55fr) minmax(0, 1fr); gap: 0 2vw; padding: 1.8vh var(--gutter); border-top: 1px solid var(--line); transition: background-color .6s, padding .7s var(--ease); }
.service:last-child { border-bottom: 1px solid var(--line); }
.service-hit { position: absolute; z-index: 1; inset: 0; width: 100%; padding: 0; border: 0; background: none; }
.service-num { color: #5c5c5c; font: 500 clamp(18px, 1.5vw, 24px)/1 var(--sans); letter-spacing: -.04em; transition: font-size .7s var(--ease), color .5s; }
.service-num i { color: var(--accent); font-style: normal; }
/* Final: above the row's full-size button, so the open screenshot can be clicked to expand. */
.service-media-wrap { position: relative; z-index: 2; display: grid; grid-template-rows: 1fr; transition: grid-template-rows .7s var(--ease); }
/* Final: the screenshots are browser windows (see .post-window); the figure's -16px margin cancels the
   frame's 16px padding, which gives the tilted window room inside the figure's clip. */
.service-media { width: fit-content; max-width: calc(100% + 32px); margin: -16px; overflow: hidden; min-height: 0; border-radius: 3px; transition: opacity .5s, transform .8s var(--ease); }
html.js .service:not(.is-open) .service-media-wrap, html.js .service:not(.is-open) .service-more { grid-template-rows: 0fr; }
html.js .service:not(.is-open) .service-media { opacity: 0; transform: scale(.94); }
/* Whole screenshot, sized so the open row still fits the pinned viewport. */
/* Final: seven rows must fit the pinned view, so rows sit tighter than V2's four (1.8vh closed, 3.2vh open) and
   the open screenshot takes the height left over: 100vh less the pin's top, six closed rows, the open row's
   padding, the window bar and a 12px margin. */
.service-media img { width: auto; max-width: 100%; height: auto; max-height: max(120px, calc(72vh - 287px)); }
.service-copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-self: stretch; pointer-events: none; }
.service-name { color: var(--text); font: 500 clamp(19px, 1.75vw, 26px)/1.05 var(--sans); letter-spacing: -.04em; transition: font-size .7s var(--ease); }
.service-more { flex: 1 1 auto; display: grid; grid-template-rows: 1fr; transition: grid-template-rows .7s var(--ease); }
.service-more > div { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.service-more p { max-width: 26em; margin-top: 10px; color: #8a8a8a; font: 500 clamp(14px, 1.2vw, 18px)/1.18 var(--sans); letter-spacing: -.025em; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 3.2vh; pointer-events: auto; }
.tags a { display: inline-flex; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--text-2); font: 500 12px/1 var(--sans); transition: border-color .25s, color .25s, background-color .25s; }
.tags a:hover { border-color: var(--accent); color: #fff; background: var(--accent-soft); }
.service.is-open { padding-top: 3.2vh; padding-bottom: 3.2vh; background: #141414; }
.service.is-open .service-num { color: #6c6c6c; font-size: clamp(40px, 4.2vw, 68px); }
.service.is-open .service-media { transition-delay: .1s; }
.service.is-open .service-name { font-size: clamp(30px, 3.1vw, 48px); }
/* Final: the rows fall in two of the app sidebar's groups, Market Intelligence and Research. Each label sits on its
   group's first rule, so it adds no height to the pinned list. */
.service-group { position: absolute; z-index: 2; top: 0; right: var(--gutter); padding: 5px 10px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--bg); color: var(--muted); font: 500 10px/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; transform: translateY(-50%); pointer-events: none; }

/* ---------- Process (horizontal) ---------- */
.process { position: relative; }
.process-pin { position: relative; overflow: hidden; }
html.js .process.is-pinned .process-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; }
.process-track { display: flex; align-items: center; gap: 0; width: max-content; padding: 14vh var(--gutter); will-change: transform; }
.process-head { position: relative; flex: none; display: flex; align-items: flex-start; gap: 10px; padding-right: 3vw; }
.process-title { display: grid; color: var(--ink); font: 400 clamp(80px, 11.5vw, 196px)/.84 var(--display); text-transform: uppercase; }
.process-head .label { padding-top: .5em; color: var(--text-2); }
.steps { display: flex; }
.step { display: flex; flex-direction: column; width: clamp(260px, 25vw, 380px); min-height: min(54vh, 500px); padding: 22px 22px 26px; border: 1px solid var(--line); margin-left: -1px; }
.step-num { color: #8a8a8a; font: 500 clamp(20px, 1.8vw, 26px)/1 var(--sans); letter-spacing: -.04em; text-transform: uppercase; }
.step-num i { color: var(--accent); font-style: normal; }
.step h3 { margin-top: auto; color: var(--step-ink, var(--text)); font: 500 clamp(30px, 2.9vw, 46px)/1 var(--sans); letter-spacing: -.05em; transition: color .4s; }
.step p { margin-top: 18px; color: #8a8a8a; font: 500 clamp(14px, 1.18vw, 18px)/1.15 var(--sans); letter-spacing: -.02em; }
/* Final: every description holds three lines, so the step headings line up across the cards. */
.step h3 + p { min-height: 3lh; }
.step.is-dim h3 { color: #4a4a4a; }
.process-progress { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 6vh; height: 1px; background: var(--line); }
.process-progress i { position: absolute; inset: 0; background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--pp, 0)); }
.process:not(.is-pinned) .process-progress { display: none; }

/* ---------- FAQ ---------- */
.faq { position: relative; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 2fr); gap: 2.4vw; padding: 16vh var(--gutter); overflow: hidden; }
.faq-side { position: relative; }
.faq-sub { margin-top: 18px; color: var(--text-2); font: 500 13px/1.35 var(--sans); }
.faq-sub a { color: var(--accent); }
.faq-list { position: relative; display: grid; gap: 8px; align-content: start; }
.qa { border: 1px solid var(--line); border-radius: 3px; background: rgba(21, 21, 21, .85); transition: border-color .3s, background-color .3s; }
.qa:hover, .qa.is-open { border-color: var(--line-2); background: #181818; }
.qa h3 { font: inherit; }
.qa button { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; padding: 20px 20px; border: 0; background: none; color: var(--text); font: 500 clamp(17px, 1.55vw, 23px)/1.15 var(--sans); letter-spacing: -.035em; text-align: left; }
.plus { position: relative; flex: none; width: 12px; height: 12px; }
.plus::before, .plus::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 1.5px; margin-top: -.75px; background: var(--accent); transition: transform .5s var(--ease); }
.plus::after { transform: rotate(90deg); }
.qa.is-open .plus::after { transform: rotate(0deg); }
.qa-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
.qa-a > div { min-height: 0; overflow: hidden; }
.qa-a p { max-width: 46em; padding: 0 20px 22px; color: #8f8f8f; font: 500 14px/1.45 var(--sans); }
.qa.is-open .qa-a { grid-template-rows: 1fr; }

/* ---------- Closing CTA ---------- */
.cta { position: relative; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: center; gap: 3vw; min-height: 100vh; min-height: 100svh; padding: 14vh var(--gutter); overflow: hidden; }
/* Final: like Platform's items, the section holds at the top of the viewport (the spotlight switches on)
   while this spacer scrolls past, then the footer arrives. */
.cta-hold { --hold: 90vh; }
.cta-hold::after { content: ""; display: block; height: var(--hold); }
.cta-hold > .cta { position: sticky; top: 0; }
.cta-light { position: absolute; inset: 0; pointer-events: none; }
/* Final: the spotlight stays dark until the section's top reaches the top of the viewport, then flickers on. */
html.js .cta-light { opacity: 0; }
html.js .cta-light.is-on { opacity: 1; animation: light-on .6s linear; }
@keyframes light-on { 0% { opacity: 1; } 14% { opacity: .35; } 28% { opacity: 1; } 42% { opacity: .6; } 56%, 100% { opacity: 1; } }
.cta-light::before { content: ""; position: absolute; left: var(--lx, 42%); top: -30%; width: 52vw; height: 120%; background: radial-gradient(ellipse 50% 60% at 50% 30%, rgba(120, 190, 230, .2), rgba(0, 184, 230, .06) 45%, transparent 70%); transform: translateX(-50%) rotate(-12deg); filter: blur(6px); transition: left 1.2s var(--ease); }
.cta-light video { position: absolute; left: var(--lx, 42%); top: var(--ly, 52%); width: min(62vw, 980px); transform: translate(-50%, -50%); opacity: .5; -webkit-mask-image: radial-gradient(ellipse 47% 52% at 50% 50%, #000 20%, transparent 72%); mask-image: radial-gradient(ellipse 47% 52% at 50% 50%, #000 20%, transparent 72%); transition: left 1.2s var(--ease), top 1.2s var(--ease); filter: saturate(1.2); }
.cta-title { position: relative; display: grid; color: var(--ink); font: 400 clamp(72px, 10.6vw, 184px)/.84 var(--display); text-transform: uppercase; }
.cta-side { position: relative; display: grid; gap: 24px; width: 100%; max-width: 380px; justify-self: end; }
/* Final: two sentences, one per line. */
.cta-side p { color: var(--text-2); font: 500 clamp(16px, 1.3vw, 20px)/1.15 var(--sans); letter-spacing: -.03em; white-space: nowrap; }
.cta-side .pill { min-height: 56px; font-size: 16px; }

/* ---------- Signup dialog ---------- */
.signup-dialog { width: min(520px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 32px; border: 1px solid var(--line-2); border-radius: 6px; background: #121212; color: var(--text); box-shadow: 0 40px 120px rgba(0, 0, 0, .7); }
.signup-dialog[open] { animation: dialog-in .6s var(--ease); }
.signup-dialog::backdrop { background: rgba(0, 0, 0, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(24px) scale(.98); } }
.signup-close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line-2); border-radius: 50%; background: none; color: var(--text-2); font-size: 18px; line-height: 1; }
.signup-heading h2 { margin-top: 14px; font: 400 clamp(40px, 6vw, 56px)/.9 var(--display); letter-spacing: .004em; text-transform: uppercase; color: var(--ink); }
.signup-heading p:last-child { margin-top: 12px; color: var(--text-2); font: 500 14px/1.4 var(--sans); }
.signup-status { margin-top: 18px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 3px; color: var(--text-2); font: 500 13px/1.4 var(--sans); }
.signup-status.success { border-color: rgba(46, 230, 107, .45); color: #b8f5cc; }
.signup-status.error { border-color: rgba(255, 110, 110, .5); color: #ffc2c2; }
.signup-dev-link { color: var(--accent); text-decoration: underline; }
#signup-form { display: grid; gap: 14px; margin-top: 22px; }
#signup-form[hidden] { display: none; }
.signup-name-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#signup-form label { display: grid; gap: 6px; color: var(--text-2); font: 500 12px/1.2 var(--sans); }
#signup-form input { width: 100%; padding: 12px 12px; border: 1px solid var(--line-2); border-radius: 3px; background: #0b0b0b; color: var(--text); font: 500 15px/1.2 var(--sans); outline: none; transition: border-color .25s; }
#signup-form input:focus { border-color: var(--accent); }
.signup-help { color: var(--muted); font: 500 12px/1.4 var(--sans); }
.signup-help a, .signup-existing a { color: var(--accent); }
.signup-submit { min-height: 50px; margin-top: 4px; font-size: 13px; }
.signup-submit:disabled { opacity: .6; cursor: progress; }
.signup-existing { margin-top: 18px; color: var(--muted); font: 500 13px/1.4 var(--sans); text-align: center; }

/* ---------- Tablet ---------- */
@media (max-width: 1080px) {
  .nav-status { display: none; }
  .platform-grid { grid-template-columns: minmax(220px, 30%) minmax(0, 1fr); }
  .faq { grid-template-columns: 1fr; gap: 6vh; }
}

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  :root { --nav-h: 64px; }
  .nav { gap: 10px; }
  .nav-clock, .nav-signin { display: none; }
  .nav-cta { min-height: 36px; padding: 0 14px; font-size: 11px; }
  .nav-menu { width: 36px; height: 36px; }
  .menu-links a { font-size: min(11.4vw, 6.6vh); }
  .nav-menu span { left: 11px; right: 11px; }
  .nav-menu span:first-child { top: 14px; }
  .nav-menu span:last-child { top: 20px; }
  .hero { height: 160vh; }
  .hero-tagline { top: calc(var(--mark-bottom, 140px) + 22px); font-size: clamp(30px, 9vw, 40px); }
  .hero-statement { bottom: 150px; right: var(--gutter); font-size: 20px; }
  .hero-bottom { flex-direction: column; align-items: stretch; gap: 16px; }
  .hero-inside { gap: 12px; }
  .marquee { width: auto; flex: 1; }
  .hero-cta { width: 100%; min-height: 54px; justify-content: space-between; font-size: 17px; }
  .about { height: 240vh; margin-top: -60vh; }
  .about-pin { grid-template-columns: 1fr; align-content: center; gap: 18px; }
  .about-text { font-size: clamp(28px, calc(7vw + 4px), 34px); }
  .big-title-wrap { padding-top: 14vh; padding-bottom: 6vh; }
  .big-title { font-size: clamp(56px, 17vw, 96px); white-space: normal; }
  .big-title-wrap { justify-content: flex-start; }
  .platform-grid { display: block; }
  .platform-side { display: none; }
  .platform-list { gap: 6vh; padding: 0; }
  .work-hold { --hold: 34vh; }
  .cta-hold { --hold: 68vh; }
  .work { top: calc(var(--nav-h) + 8px); }
  .work { display: grid; gap: 16px; }
  .work-meta { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: baseline; }
  .work-num { grid-row: span 2; color: #3a3a3a; font: 400 64px/.84 var(--display); }
  .work-num i { color: var(--accent); font-style: normal; }
  .work-meta h3 { color: var(--text); font: 500 30px/1 var(--sans); letter-spacing: -.05em; }
  .work-meta p { color: #8a8a8a; font: 500 15px/1.2 var(--sans); letter-spacing: -.02em; }
  .work-media { aspect-ratio: auto; height: min(calc((100vw - 2 * var(--gutter)) / 1.05), calc(100vh - var(--nav-h) - 230px)); height: min(calc((100vw - 2 * var(--gutter)) / 1.05), calc(100svh - var(--nav-h) - 230px)); min-height: 220px; max-height: none; }
  .device { width: 90%; }
  .work-link { left: 50%; transform: translateX(-50%); bottom: 6%; font-size: 11px; }
  .service { grid-template-columns: auto minmax(0, 1fr); gap: 0 14px; padding: 1.4vh var(--gutter); }
  .service-num { grid-row: 1; padding-top: 3px; }
  .service-copy { grid-column: 2; grid-row: 1; }
  .service-media-wrap { grid-column: 1 / -1; grid-row: 2; }
  .service-media { margin: -2px -16px -16px; }
  .service-media img { max-height: max(150px, calc(78vh - 438px)); }
  .service.is-open { padding-top: 2.2vh; padding-bottom: 2.2vh; }
  .service.is-open .service-num { font-size: 36px; }
  .service.is-open .service-name { font-size: 28px; }
  .tags { padding-top: 14px; }
  html.js .services.is-pinned .services-track { height: calc(100vh + 7 * 42vh); }
  .process-track { padding: 12vh var(--gutter); }
  .process-head { flex-direction: column; gap: 14px; padding-right: 10vw; }
  .process-title { font-size: clamp(72px, 22vw, 120px); }
  .step { width: 76vw; min-height: 52vh; }
  .cta { grid-template-columns: 1fr; align-content: center; gap: 6vh; }
  .cta-title { font-size: clamp(56px, 16.4vw, 120px); }
  .cta-side { justify-self: stretch; max-width: none; }
  .cta-light video { width: 140vw; }
  .signup-dialog { padding: 26px 20px; }
  .signup-name-row { grid-template-columns: 1fr; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .marquee-track { animation: none; }
}

/* =====================================================================
   Final: placement of V3 components inside V2 sections (position only)
   ===================================================================== */
/* Section 1: V3's 3D monogram takes the beam's place in the hero. The stage keeps the beam's scroll
   fade, and is 10% wider than the monogram's V3 column, so the object is drawn 10% larger than in V3. */
.hero-stage { width: calc(((min(100vw, 1640px) - 2 * clamp(18px, 6.6vw, 104px)) / 2 - 1vw) * 1.1); opacity: var(--ho, 1); transform: translate3d(0, var(--my, 0px), 0) scale(var(--hs, 1)); }
/* Section 3: Realm, Heat Matrix and Volatility Skew sit in browser windows (the What's Inside window style)
   that fill V2's frame in place of its backdrop; V2's pill stays on top. */
.work-media-window { background: none; }
.work-media-window::before { display: none; }
.v3s.pf-window { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(255, 255, 255, .09); border-radius: 10px; background: #0b0e13; }
.v3s.pf-window > .post-bar { flex: none; }
.v3s.pf-window > .case-media, .pf-shot { flex: 1; min-height: 0; }
/* Volatility Skew: the whole chart, inside the window; it keeps V2's scroll drift (the window passes it down). */
.pf-shot { position: relative; overflow: hidden; }
.pf-shot img { width: 100%; height: 100%; object-fit: contain; transform: translate3d(0, var(--py, 0px), 0) scale(var(--ps, 1)); will-change: transform; }
/* Realm, Heat Matrix and Volatility Skew: the window takes its footage's shape (nothing cropped, no empty space),
   as large as the frame allows (28px = bar + border), and drifts as a whole with V2's scroll parallax. The drift
   snaps to whole pixels and the window carries no will-change, so text inside it is never drawn from a cached,
   offset or rescaled raster (the Realm reaction labels blurred that way). */
/* No clipping: a window as tall as the frame (Heat Matrix) may drift a few pixels past its edges. */
.work-media-fit { overflow: visible; container-type: size; --win-w: min(100cqw, (100cqh - 28px) * var(--ratio)); }
.work-media-fit.fit-realm { --ratio: 1504 / 882; }
.work-media-fit.fit-heat { --ratio: 1; }
.work-media-fit.fit-vol { --ratio: 1514 / 909; }
.v3s.pf-window-fit { position: relative; inset: auto; width: var(--win-w); transform: translate3d(0, round(var(--py, 0px), 1px), 0) scale(var(--ps, 1)); }
.v3s.pf-window-fit > .case-media, .pf-window-fit > .pf-shot { flex: none; aspect-ratio: var(--ratio); }
/* The footage shows whole: no zoom, no edge fade, and the Realm effect box sits at 0,0 rather than a -50% shift. */
.v3s.pf-window-fit .fx-box { top: 0; left: 0; width: 100%; transform: none; }
.v3s.pf-window-fit .case-media > video { transform: none; }
.v3s.pf-window-fit .case-media-contain > video { -webkit-mask-image: none; mask-image: none; }
.pf-window-fit .pf-shot img { transform: none; }
/* V2's pill keeps its place at the window's lower left when the window is narrower than the frame. */
.work-media-fit > .work-link { left: calc((100cqw - var(--win-w)) / 2 + var(--win-w) * .07); }
@media (max-width: 1080px) {
  .hero-stage { width: calc(((100vw - 2 * clamp(18px, 6.6vw, 104px)) * 5 / 12 - 7vw / 6) * 1.1); }
}
@media (max-width: 760px) {
  .hero-stage { width: calc((100vw - 36px) * 1.1); }
  .work-media-fit > .work-link { left: 50%; }
}

/* =====================================================================
   Part 2 — V3 components, scoped under .v3s
   ===================================================================== */
.v3s {
  --bg: #ffffff;
  --panel: #f1f1f1;
  --panel-2: #e7e7e7;
  --ink: #121212;
  --ink-2: #393939;
  --muted: #7d7d7d;
  --soft: #c6c6c6;
  --line: #e3e3e3;
  --dark: #141414;
  --dark-2: #1c1c1c;
  --dark-line: #2b2b2b;
  --lime: #a8ff1f;           /* accent */
  --lime-2: #8ee600;
  --warn: #f0882a;
  --sans: "Inter Display", Inter, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --pad: clamp(18px, 6.6vw, 104px);
  --nav-h: 76px;
  --cut: 34px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
}
/* V3's body type and colour, for everything inside a V3 wrapper. */
.v3s { font: 400 16px/1.5 var(--sans); letter-spacing: -.012em; color: var(--ink); }
/* V3's sections sat on its white page. */
.v3s-page { background: var(--bg); }
.v3s :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.v3s ::selection { background: var(--lime); color: var(--ink); }
.v3s .sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.v3s .mono { font-family: var(--mono); font-weight: 500; letter-spacing: .02em; text-transform: uppercase; }
.v3s .wrap { width: 100%; max-width: 1640px; margin: 0 auto; padding-inline: var(--pad); }
.v3s .chamfer-br { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%); }
.v3s .chamfer-tr { clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); }
.v3s .word { display: inline-block; }

/* ---------- Buttons: the arrow tab's colour sweeps across on hover ---------- */
.v3s .btn { position: relative; z-index: 0; display: inline-flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 44px; padding: 4px 4px 4px 14px; overflow: hidden; border: 1px solid transparent; border-radius: 2px; font: 500 14px/1 var(--sans); letter-spacing: -.01em; white-space: nowrap; transition: color .45s var(--ease), border-color .3s; }
.v3s .btn::before { content: ""; position: absolute; z-index: -1; inset: 0; background: var(--sweep, var(--lime)); transform: scaleX(0); transform-origin: 100% 50%; transition: transform .6s var(--ease); }
.v3s .btn:hover::before, .v3s .btn:focus-visible::before { transform: scaleX(1); }
.v3s .btn b { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 2px; transition: background-color .45s var(--ease), color .45s var(--ease); }
.v3s .btn b svg { width: 12px; height: 12px; transition: transform .5s var(--ease); }
.v3s .btn:hover b svg { transform: rotate(45deg); }
.v3s .btn-dark { background: var(--ink); color: #fff; }
.v3s .btn-dark b { background: var(--lime); color: var(--ink); }
.v3s .btn-dark:hover { color: var(--ink); }
.v3s .btn-dark:hover b { background: var(--ink); color: var(--lime); }
.v3s .btn-light { background: var(--panel); border-color: var(--line); color: var(--ink); }
.v3s .btn-light b { background: var(--panel-2); color: var(--ink); }
.v3s .btn-light:hover b { background: var(--ink); color: var(--lime); }
.v3s .btn-lime { --sweep: #fff; background: var(--lime); color: var(--ink); }
.v3s .btn-lime b { background: var(--ink); color: var(--lime); }
.v3s .btn-outline { --sweep: var(--ink); min-height: 38px; padding: 0 14px; border-color: #cfcfcf; background: transparent; color: var(--ink); }
.v3s .btn-outline:hover { color: #fff; border-color: var(--ink); }
.v3s .btn-block { width: 100%; }
.v3s .btn-small { min-height: 38px; gap: 14px; font-size: 13px; }
.v3s .btn-small b { width: 28px; height: 28px; }

/* ---------- Rule labels (line draws in, label decodes) ---------- */
.v3s .rule-label { position: relative; padding-top: 16px; color: var(--ink-2); font-size: 11.5px; line-height: 1.2; }
.v3s .rule-label::before, .v3s .rule-label::after { content: ""; position: absolute; top: 0; left: 0; transform-origin: 0 50%; transition: transform 1.2s var(--ease); }
.v3s .rule-label::before { right: 0; height: 1px; background: var(--line); }
.v3s .rule-label::after { width: min(150px, 40%); height: 3px; margin-top: -1px; background: var(--soft); transition-delay: .15s; }
html.js .v3s [data-rule]:not(.is-in).rule-label::before, html.js .v3s [data-rule]:not(.is-in).rule-label::after, html.js .v3s [data-rule]:not(.is-in) .rule-label::before, html.js .v3s [data-rule]:not(.is-in) .rule-label::after { transform: scaleX(0); }

/* ---------- Text reveal ---------- */
html.js .v3s [data-words] .word { color: var(--word-off, #cbcbcb); transition: color .7s var(--ease); }
html.js .v3s [data-words]:not([data-scrub]).is-in .word { color: inherit; transition-delay: calc(var(--i, 0) * 60ms); }
html.js .v3s [data-scrub] .word.is-lit { color: inherit; }
html.js .v3s [data-rise] { opacity: 0; transform: translateY(34px); transition: opacity .9s, transform 1.1s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
html.js .v3s [data-rise].is-in { opacity: 1; transform: none; }

/* ---------- Preloader ---------- */
.v3s .pre { position: fixed; z-index: 300; inset: 0; display: grid; place-items: center; background: var(--dark); animation: pre-failsafe .01s 5s forwards; }
.v3s .pre-logo { animation: pre-in 1s var(--ease) both; }
.v3s .pre-logo img { width: clamp(220px, 26vw, 360px); height: auto; }
@keyframes pre-in { from { opacity: 0; transform: translateY(10px); filter: blur(6px); } }
@keyframes pre-failsafe { to { visibility: hidden; } }
/* Section 0: the overlay leaves with V2's 1s clip-path wipe, split at the centre line: the top half wipes up
   and the bottom half wipes down. While closed the halves overlap by 2px, so no seam shows. */
.v3s .pre { clip-path: polygon(0 0, 100% 0, 100% calc(50% + 1px), 0 calc(50% + 1px), 0 calc(50% - 1px), 100% calc(50% - 1px), 100% 100%, 0 100%); }
.v3s .pre.is-done { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0, 0 100%, 100% 100%, 100% 100%, 0 100%); transition: clip-path 1s var(--ease-io); }
.v3s .pre.is-gone { display: none; }

/* ---------- Hero object (3D monogram) ---------- */
/* Final: the monogram is drawn 10% larger than V3 (box, perspective, face and extrusion depth; see landing-final.js),
   never scaled, so the 1146px artwork is still drawn below its native size. */
.v3s .hero-object { position: relative; grid-column: 1 / span 6; display: grid; place-items: center; height: clamp(308px, 36.3vw, 550px); perspective: 1540px; }
.v3s .lg3d { position: relative; width: min(86%, 506px); aspect-ratio: 1; transform-style: preserve-3d; transform: rotateX(var(--rx, 24deg)) rotateY(var(--ry, -26deg)) rotateZ(-8deg) translateY(var(--fy, 0px)); will-change: transform; }
.v3s .lg-layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: translateZ(var(--z, 0px)); }
.v3s .lg-front { object-fit: contain; filter: drop-shadow(0 0 1px rgba(0, 90, 255, .35)); }
.v3s .lg-side { -webkit-mask: url(/livegreeks-monogram.png?v=1) center / contain no-repeat; mask: url(/livegreeks-monogram.png?v=1) center / contain no-repeat; background: linear-gradient(135deg, var(--c1, #8ea3b8) 0 42%, var(--c2, #0a49d8) 58% 100%); }
.v3s .hero-object-shadow { position: absolute; bottom: 4%; left: 22%; width: 56%; height: 12%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .2), transparent); filter: blur(8px); transform: scale(var(--ss, 1)); }
html.js body:not(.is-ready) .v3s .hero-object { opacity: 0; transform: scale(.9) translateY(30px); }
.is-ready .v3s .hero-object { opacity: 1; transform: none; transition: opacity 1.2s .2s, transform 1.6s .2s var(--ease); }

/* ---------- Blind spots → the difference (one pinned scene) ---------- */
/* Final merges V3's pain points and difference. The resting layout is the finished comparison: the title, then
   the two cards with each blind spot opposite its answer (no JS, reduced motion). JS adds .is-live, which pins the
   scene and starts from the pain points: the four blind spots float around the title, then each flies into its
   row of the Premium Platforms card (--dx/--dy, while --m turns the chip into a row) and the LiveGreeks card rises. */
.v3s .versus { --them-ink: #cfcfcf; position: relative; padding: 16vh var(--pad); }
.v3s .vs-pin { position: relative; display: flex; flex-direction: column; }
/* Final: the scene sits on the site's black; its titles take the about text's colours. */
.v3s .vs-title { --word-off: #3a3a3a; max-width: 13em; margin: 0 auto 12vh; color: #ececec; font: 500 clamp(30px, 3.6vw, 58px)/1.06 var(--sans); letter-spacing: -.045em; text-align: center; }
.v3s .vs-spot { display: none; }
/* Unpinned, nothing scrubs the titles, so they show lit. */
.v3s .versus:not(.is-live) [data-words] .word { color: inherit; }
/* One grid holds both cards, so every blind spot and its answer share a row height. */
.v3s .vs-board { position: relative; display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; width: min(1040px, 100%); margin: 0 auto; }
.v3s .vs-sub { --word-off: #3a3a3a; grid-column: 1 / -1; margin-bottom: clamp(22px, 4.5vh, 44px); color: #ececec; font: 500 clamp(30px, 3.4vw, 56px)/1.05 var(--sans); letter-spacing: -.045em; text-align: center; }
.v3s .vs-shell { --cut: 30px; grid-row: 2 / 4; }
.v3s .vs-shell-them { grid-column: 1; background: #181818; }
.v3s .vs-shell-us { grid-column: 2; background: var(--panel); }
.v3s .vs-head { position: relative; grid-row: 2; display: flex; align-items: center; padding: 22px 22px 12px; font: 600 clamp(19px, 1.7vw, 24px)/1.1 var(--sans); letter-spacing: -.04em; }
.v3s .vs-head::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 8px; width: 4px; background: #c9c9c9; }
.v3s .vs-head-them { grid-column: 1; color: #fff; }
.v3s .vs-head-us { grid-column: 2; }
.v3s .vs-head-us::before { background: var(--accent); }
/* The wordmark keeps its white + blue colours, so on the light card it sits on the nav's dark chip (V3's .brand). */
.v3s .vs-logo { box-sizing: content-box; width: auto; height: 22px; padding: 7px 11px; border-radius: 7px; background: #0b0f14; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 6px 18px rgba(0, 0, 0, .12); }
.v3s .vs-pairs { grid-column: 1 / -1; grid-row: 3; padding-bottom: 10px; }
.v3s .vs-pair { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; }
.v3s .vs-cell { position: relative; isolation: isolate; display: flex; align-items: center; padding: 13px 22px; font: 400 clamp(14px, 1.15vw, 16.5px)/1.3 var(--sans); }
/* The row's rule (on phones, the same layer is the cell's background). */
.v3s .vs-cell::before { content: ""; position: absolute; z-index: -1; top: 0; left: 22px; right: 22px; height: 1px; }
.v3s .vs-them { color: var(--them-ink); }
.v3s .vs-them::before { background: rgba(255, 255, 255, .08); }
.v3s .vs-us { color: var(--ink-2); }
/* 11% (not the dark card's 8%) so both cards' rules read at the same weight. */
.v3s .vs-us::before { background: rgba(18, 18, 18, .11); }
/* The price row is the sharpest contrast with "$200+", so it carries the head's blue bar over a light blue wash, in
   firmer type with the price itself bold. */
.v3s .vs-key { color: var(--ink); font-weight: 500; }
.v3s .vs-key strong { font-weight: 650; }
.v3s .vs-key::after { content: ""; position: absolute; z-index: -1; inset: 0; border-left: 4px solid var(--accent); background: rgba(0, 184, 230, .1); }
.v3s .vs-blind, .v3s .vs-fix { position: relative; display: inline-flex; align-items: center; gap: 12px; max-width: 100%; }
.v3s .vs-icon { display: grid; flex: none; }
.v3s .vs-icon svg, .v3s .vs-fix svg { grid-area: 1 / 1; width: 18px; height: 18px; flex: none; padding: 2px; border-radius: 2px; }
.v3s .vs-x { background: #d8d8d8; color: #555; }
.v3s .vs-icon .vs-warn { padding: 0; color: var(--warn); opacity: 0; }
.v3s .vs-fix svg { background: var(--accent); color: var(--ink); }
/* A blind spot's chip face (V3's pain chip), shown while it floats. */
.v3s [data-vs-chip] { z-index: 1; }
.v3s [data-vs-chip]::before { content: ""; position: absolute; z-index: -1; inset: -12px -15px; border-radius: 2px; background: var(--panel); opacity: 0; }

/* Live scene. Spots mark where each chip floats: --ax/--ay say which of its corners sits on the spot. */
@property --lift { syntax: "<length>"; inherits: false; initial-value: 0px; }
.v3s .versus.is-live { height: 400vh; padding: 0; }
.v3s .is-live .vs-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; padding: calc(var(--nav-h) + 2vh) var(--pad) 4vh; }
.v3s .is-live .vs-title { position: absolute; top: 50%; left: 50%; width: max-content; max-width: min(13em, calc(100% - 2 * var(--pad))); margin: 0; opacity: var(--to, 1); transform: translate(-50%, -50%) scale(var(--ts, 1)); }
.v3s .is-live .vs-spot { position: absolute; display: block; }
.v3s .vs-spot-1 { --ax: 0; --ay: 0; top: 14%; left: 10%; }
.v3s .vs-spot-2 { --ax: 1; --ay: 0; top: 24%; right: 7%; }
.v3s .vs-spot-3 { --ax: 0; --ay: 1; bottom: 26%; left: 15%; }
.v3s .vs-spot-4 { --ax: 1; --ay: 1; bottom: 15%; right: 13%; }
/* Auto margins centre the board, and let a board taller than the view start at the top (--bs scrolls it). */
.v3s .is-live .vs-board { margin: auto; transform: translateY(var(--bs, 0px)); }
/* While it is scrolled, the board fades out under the nav instead of running beneath it. */
.v3s .versus.is-shifted .vs-pin { -webkit-mask-image: linear-gradient(transparent var(--nav-h), #000 calc(var(--nav-h) + 16px)); mask-image: linear-gradient(transparent var(--nav-h), #000 calc(var(--nav-h) + 16px)); }
.v3s .is-live .vs-sub { opacity: var(--so, 0); }
.v3s .is-live .vs-shell-them, .v3s .is-live .vs-head-them { opacity: var(--lo, 0); }
.v3s .is-live .vs-shell-them, .v3s .is-live .vs-head-them, .v3s .is-live .vs-them { transform: translateY(var(--ly, 40px)); }
.v3s .is-live .vs-shell-us, .v3s .is-live .vs-head-us { opacity: var(--ro, 0); }
.v3s .is-live .vs-shell-us, .v3s .is-live .vs-head-us, .v3s .is-live .vs-us { transform: translateY(var(--ry, 50vh)); }
.v3s .is-live .vs-them { --m: 0; }
.v3s .is-live .vs-them::before { opacity: var(--lo, 0); }
.v3s .is-live .vs-us::before { opacity: var(--ro, 0); }
.v3s .is-live [data-vs-chip] { --lift: 18px; color: color-mix(in srgb, var(--them-ink) calc(var(--m) * 100%), var(--ink-2)); opacity: 0; scale: .94; filter: blur(6px); transform: translate3d(var(--dx, 0px), calc(var(--dy, 0px) + var(--lift)), 0); transform: translate3d(var(--dx, 0px), calc(var(--dy, 0px) + round(var(--lift), var(--snap, 1px))), 0); transition: opacity .6s, scale .8s var(--ease), filter .6s, --lift .8s var(--ease); }
/* The float is V3's: a translate animation, which the browser runs on the compositor, moving text and chip as one.
   (Redrawn every frame at fractional offsets, the text would snap to the pixel grid and tick against its chip; the
   scripted offsets and the lift stay on whole device pixels for the same reason.) Docking pauses the float and the
   flight cancels whatever offset it paused at. */
.v3s .is-live [data-vs-chip].is-on { --lift: 0px; opacity: 1; scale: 1; filter: none; animation: vs-float 6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.4s); }
.v3s .is-live [data-vs-chip].is-docking { animation-play-state: paused; }
.v3s .is-live [data-vs-chip]::before, .v3s .is-live [data-vs-chip] .vs-warn { opacity: calc(1 - var(--m)); }
.v3s .is-live [data-vs-chip] .vs-x { opacity: var(--m); }
@keyframes vs-float { 50% { translate: 0 -6px; } }
.v3s .is-live .vs-blind:not([data-vs-chip]), .v3s .is-live .vs-fix { opacity: 0; translate: -10px 0; transition: opacity .5s, translate .7s var(--ease); }
.v3s .is-live .is-in > .vs-blind, .v3s .is-live .is-in > .vs-fix { opacity: 1; translate: none; }
/* The price row's wash settles in just after its text. */
.v3s .is-live .vs-key::after { opacity: 0; transition: opacity .7s .2s; }
.v3s .is-live .vs-key.is-in::after { opacity: 1; }

/* ---------- Sections ---------- */
.v3s .section { position: relative; padding: 13vh 0; }
.v3s .sec-head { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 36%); align-items: end; gap: 24px 4vw; margin-bottom: 4.4vh; padding-top: 16px; }
/* The header owns its rule so the line spans both columns. */
.v3s .sec-head::before, .v3s .sec-head::after { content: ""; position: absolute; top: 0; left: 0; transform-origin: 0 50%; transition: transform 1.2s var(--ease); }
.v3s .sec-head::before { right: 0; height: 1px; background: var(--line); }
.v3s .sec-head::after { width: min(150px, 30%); height: 3px; margin-top: -1px; background: var(--soft); transition-delay: .15s; }
html.js .v3s .sec-head:not(.is-in)::before, html.js .v3s .sec-head:not(.is-in)::after { transform: scaleX(0); }
.v3s .sec-head .rule-label { padding-top: 0; }
.v3s .sec-head .rule-label::before, .v3s .sec-head .rule-label::after { display: none; }
.v3s .sec-head-solo { grid-template-columns: 1fr; }
.v3s .sec-head h2 { margin-top: 18px; font: 500 clamp(32px, 4vw, 62px)/1.04 var(--sans); letter-spacing: -.045em; }
.v3s .sec-copy { max-width: 30em; color: var(--ink-2); font: 400 15.5px/1.5 var(--sans); }
.v3s .sec-head > .btn, .v3s .sec-head > .toggle { justify-self: end; }

/* Case media: Realm (with its effect layer) and Heat Matrix */
.v3s .case-media { --cut: 44px; position: relative; display: block; overflow: hidden; background: #0d0d0d; }
.v3s .case-media { container-type: size; }
.v3s .case-media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(var(--ps, 1.08)) translateY(var(--py, 0px)); }
.v3s .case-media video { filter: brightness(var(--vb, 1)); transition: filter .5s; }
.v3s .case-media:hover video { filter: brightness(calc(var(--vb, 1) * 1.12)) saturate(1.1); }
.v3s .case-media-contain { background: radial-gradient(70% 90% at 50% 45%, #0f1a21, #05080b 70%); }
.v3s .case-media-contain > video { object-fit: contain; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
/* The Realm video and its effect layer share one cover-sized box so overlay coordinates match the footage. */
.v3s .fx-box { position: absolute; top: 50%; left: 50%; width: max(100cqw, calc(100cqh * 1504 / 882)); aspect-ratio: 1504 / 882; transform: translate(-50%, -50%) translateY(var(--py, 0px)) scale(var(--ps, 1.08)); }
.v3s .fx-box video { display: block; width: 100%; height: 100%; }
.v3s .fx-layer { position: absolute; inset: 0; pointer-events: none; }
.v3s .fx-ev { position: absolute; inset: 0; opacity: 0; transition: opacity .35s; }
.v3s .fx-ev.is-on { opacity: 1; }
.v3s .fx-line { position: absolute; left: 0; right: 0; top: var(--ly); height: 2px; margin-top: -1px; background: linear-gradient(90deg, transparent, rgba(236, 228, 255, .9) 12%, #fff 50%, rgba(236, 228, 255, .9) 88%, transparent); box-shadow: 0 0 10px 2px rgba(196, 166, 255, .75), 0 0 30px 8px rgba(150, 110, 255, .35); transform: scaleX(0); transform-origin: var(--lx) 50%; transition: transform .7s var(--ease); }
.v3s .fx-ev.is-on .fx-line { transform: scaleX(1); }
.v3s .fx-pull { display: none; position: absolute; left: var(--px); top: var(--pt); width: 2px; height: max(0px, calc(var(--ly) - var(--pt))); margin-left: -1px; background: linear-gradient(rgba(110, 226, 255, .95), rgba(196, 166, 255, .95)); box-shadow: 0 0 8px rgba(110, 226, 255, .7); transform: scaleY(0); transform-origin: 50% 0; transition: transform .9s var(--ease) .15s; }
.v3s .fx-pull::after { content: ""; position: absolute; left: 50%; bottom: -1px; border: 5px solid transparent; border-top: 7px solid rgba(196, 166, 255, .95); border-bottom: 0; transform: translateX(-50%); }
.v3s .fx-has-pull .fx-pull { display: block; }
.v3s .fx-ev.is-on .fx-pull { transform: scaleY(1); }
.v3s .fx-ring, .v3s .fx-core { position: absolute; left: var(--px); top: var(--pt); border-radius: 50%; transform: translate(-50%, -50%); }
.v3s .fx-core { width: 1.1%; aspect-ratio: 1; background: #b8f6ff; box-shadow: 0 0 10px 3px rgba(80, 220, 255, .9); }
.v3s .fx-ring { width: 9%; aspect-ratio: 1; border: 1.5px solid rgba(110, 226, 255, .95); box-shadow: 0 0 12px rgba(80, 220, 255, .55), inset 0 0 10px rgba(80, 220, 255, .35); opacity: 0; }
.v3s .fx-ev.is-on .fx-ring { animation: fx-ripple 1.7s cubic-bezier(.2, .7, .3, 1) both; }
.v3s .fx-ev.is-on .fx-ring:nth-of-type(4) { animation-delay: .28s; }
.v3s .fx-ev.is-on .fx-ring:nth-of-type(5) { animation-delay: .56s; }
@keyframes fx-ripple { from { opacity: 1; transform: translate(-50%, -50%) scale(.15); } to { opacity: 0; transform: translate(-50%, -50%) scale(1.5); } }
.v3s .fx-label { position: absolute; left: var(--px); top: var(--pt); padding: 4px 7px; border: 1px solid rgba(110, 226, 255, .6); border-radius: 2px; background: rgba(6, 12, 18, .82); color: #c6f5ff; font-size: clamp(8px, .9cqw, 11px); white-space: nowrap; transform: translate(14px, round(-170%, 1px)); opacity: 0; transition: opacity .3s .15s, transform .5s .15s var(--ease); }
.v3s .fx-ev.fx-left .fx-label { transform: translate(round(calc(-100% - 14px), 1px), round(-170%, 1px)); }
.v3s .fx-ev.is-on .fx-label { opacity: 1; }

/* Cursor-follow tag */
.v3s .cursor-tag { position: fixed; z-index: 150; top: 0; left: 0; display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid var(--lime); background: #0f1a02; color: var(--lime); font-size: 11px; pointer-events: none; opacity: 0; transform: translate3d(var(--cx, 0px), var(--cy, 0px), 0) scale(.6); transition: opacity .25s, transform .25s; }
.v3s .cursor-tag svg { width: 10px; height: 10px; }
.v3s .cursor-tag.is-on { opacity: 1; transform: translate3d(var(--cx, 0px), var(--cy, 0px), 0) scale(1); transition: opacity .25s, scale .25s; }


/* Dashboard showcase (interactive spotlight over the product screen) */
/* Final: the dashboard sits on the page black. Its wrapper drops V3's white page, so the body's black shows through. */
.v3s-page:has(> .dash-sec) { background: none; }
/* Final: the scroll pauses on the dashboard, then moves on to What's Inside. The section sticks where it's fully in
   view (--dash-top, set by the script: its bottom on the viewport's, or centred when it's shorter than the view)
   for --hold of scrolling. The #dashboard anchor is the wrapper, which (unlike the sticky section) always starts
   where the section does. */
html.js .dash-hold { --hold: 80vh; }
html.js .dash-hold::after { content: ""; display: block; height: var(--hold); }
html.js .dash-hold > .dash-sec { position: sticky; top: var(--dash-top, 0px); }
.v3s .dash-sec { padding-top: 8vh; }
/* Final: same gradient and direction, with the far stops lifted so the card never drops below the page black;
   a hairline inset edge and a soft shadow (neither changes the box) lift it off the page. */
.v3s .dash { position: relative; overflow: hidden; padding: clamp(28px, 4.6vw, 70px) clamp(20px, 4.6vw, 70px) 0; border-radius: 24px; background: radial-gradient(120% 90% at 18% 0%, #2a2a2a, #141414 48%, #0b0b0b); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 30px 70px -34px rgba(0, 0, 0, .8); color: #f5f5f5; }
.v3s .dash::before { content: ""; position: absolute; inset: 0; background: radial-gradient(40% 50% at 50% 100%, rgba(0, 130, 255, .18), transparent 70%); pointer-events: none; }
.v3s .dash-top { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 4vw; }
.v3s .dash-title { max-width: 13em; font: 500 clamp(30px, 3.1vw, 48px)/1.08 var(--sans); letter-spacing: -.04em; }
.v3s .dash-title span { color: #929292; }
.v3s .dash-copy > p { max-width: 30em; margin-top: 22px; color: #a3a3a3; font: 400 clamp(15px, 1.25vw, 18px)/1.6 var(--sans); }
.v3s .dash-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.v3s .dbtn { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 20px; border: 1px solid transparent; border-radius: 8px; font: 500 15px/1 var(--sans); transition: background-color .3s, border-color .3s, transform .4s var(--ease); }
.v3s .dbtn svg { width: 15px; height: 15px; transition: transform .4s var(--ease); }
.v3s .dbtn:hover svg { transform: translateX(3px); }
.v3s .dbtn-white { background: #fff; color: var(--ink); }
.v3s .dbtn-white:hover { background: var(--lime); }
.v3s .dbtn-line { border-color: rgba(255, 255, 255, .15); color: #fff; background: rgba(255, 255, 255, .02); }
.v3s .dbtn-line:hover { border-color: #8a8a8a; }
.v3s .dash-feats { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(255, 255, 255, .1); }
.v3s .dash-feats li { border-bottom: 1px solid rgba(255, 255, 255, .1); }
.v3s .dash-feats li:nth-child(odd) { border-right: 1px solid rgba(255, 255, 255, .1); }
.v3s .dfeat { display: flex; align-items: center; gap: 14px; width: 100%; height: 100%; min-height: 124px; padding: 22px 22px; border: 0; background: none; color: #929292; font: 400 clamp(14px, 1.15vw, 16.5px)/1.45 var(--sans); text-align: left; transition: color .35s, background-color .35s; }
.v3s .dfeat svg { width: 20px; height: 20px; flex: none; color: #777; transition: color .35s, transform .5s var(--ease); }
.v3s .dfeat:hover, .v3s .dfeat.is-active { color: #f5f5f5; background: rgba(255, 255, 255, .03); }
.v3s .dfeat.is-active svg { color: var(--lime); transform: scale(1.12); }
.v3s .dash-window { --bar-h: 34px; position: relative; width: min(100%, 1180px); margin: clamp(40px, 6vw, 80px) auto -4%; border-radius: 16px 16px 0 0; background: #0b0e13; box-shadow: 0 -1px 0 rgba(255, 255, 255, .08), 0 40px 90px rgba(0, 0, 0, .6); transform: perspective(1600px) rotateX(var(--wrx, 0deg)) scale(var(--wsc, 1)); transform-origin: 50% 0; }
.v3s .dash-bar { display: flex; align-items: center; gap: 7px; height: var(--bar-h); padding: 0 14px; border-bottom: 1px solid #1c222b; border-radius: 16px 16px 0 0; background: #0e1219; }
.v3s .dash-bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.v3s .dash-bar i:nth-child(2) { background: #febc2e; }
.v3s .dash-bar i:nth-child(3) { background: #28c840; }
.v3s .dash-bar span { margin-left: 12px; color: #5d6875; font-size: 10.5px; }
.v3s .dash-screen { position: relative; overflow: hidden; }
.v3s .dash-screen img { width: 100%; height: auto; }
.v3s .dash-spot { position: absolute; left: var(--sx, 13.5%); top: var(--sy, 23.7%); width: var(--sw, 73%); height: var(--sh, 74%); border: 1px solid rgba(168, 255, 31, .85); border-radius: 8px; box-shadow: 0 0 0 200vmax rgba(4, 7, 11, .58), 0 0 24px rgba(168, 255, 31, .25); pointer-events: none; transition: left .8s var(--ease), top .8s var(--ease), width .8s var(--ease), height .8s var(--ease), opacity .4s; }
.v3s .dash-overlay { position: absolute; z-index: 2; inset: var(--bar-h) 0 0; pointer-events: none; }
.v3s .dash-overlay > * { pointer-events: auto; }
.v3s .dash-tag { position: absolute; left: var(--tx, 14%); top: var(--ty, 23%); padding: 5px 9px; border-radius: 4px; background: var(--lime); color: var(--ink); font-size: 10.5px; white-space: nowrap; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); transform: var(--tt, translate(12px, calc(-100% - 10px))); transition: left .8s var(--ease), top .8s var(--ease), transform .8s var(--ease); pointer-events: none; }
.v3s .dash-dot { position: absolute; left: var(--dx); top: var(--dy); width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none; transform: translate(-50%, -50%); }
.v3s .dash-dot i { position: absolute; inset: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); animation: dot-pulse 2.2s ease-out infinite; }
.v3s .dash-dot.is-active i { background: var(--lime); }
@keyframes dot-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); } 70%, 100% { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); } }

/* Pricing */
.v3s .toggle { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: min(100%, 330px); padding: 3px; background: var(--dark); }
.v3s .toggle button { position: relative; z-index: 1; min-height: 36px; padding: 0 14px; border: 0; background: none; color: #fff; font: 500 14px/1 var(--sans); transition: color .4s; }
.v3s .toggle button i { margin-left: 6px; padding: 2px 4px; background: #2b2b2b; color: #cfcfcf; font-size: 9.5px; font-style: normal; transition: background-color .4s, color .4s; }
.v3s .toggle button[aria-pressed="true"] { color: var(--ink); }
.v3s .toggle button[aria-pressed="true"] i { background: rgba(0, 0, 0, .12); color: var(--ink); }
.v3s .toggle-thumb { position: absolute; top: 3px; bottom: 3px; right: 3px; width: calc(50% - 3px); background: var(--lime); transition: transform .65s var(--ease); }
.v3s .toggle.is-later .toggle-thumb { transform: translateX(-100%); }
.v3s .plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.v3s .plan { --cut: 30px; display: flex; flex-direction: column; padding: 26px; background: var(--panel); color: var(--ink); transition: background-color .6s var(--ease), color .6s var(--ease), transform .8s var(--ease); }
.v3s .plan h3 { font: 500 22px/1.1 var(--sans); letter-spacing: -.035em; transition: color .5s; }
.v3s .plan-sub { margin-top: 4px; color: var(--muted); font: 400 13px/1.3 var(--sans); }
.v3s .plan-price { position: relative; margin-top: 30px; padding-bottom: 18px; font: 600 clamp(38px, 3.4vw, 52px)/1 var(--sans); letter-spacing: -.05em; }
.v3s .plan-price span { margin-left: 6px; color: var(--muted); font-size: 10.5px; letter-spacing: .02em; font-weight: 500; }
.v3s .plan-price::after { content: ""; position: absolute; left: 0; bottom: 0; width: 40%; height: 3px; background: var(--soft); }
.v3s .plan-price-text { font-weight: 500; }
.v3s .plan ul { display: grid; gap: 14px; margin: 26px 0 30px; }
.v3s .plan li { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font: 400 14.5px/1.3 var(--sans); transition: color .5s; }
.v3s .plan li svg { width: 16px; height: 16px; flex: none; padding: 2px; border-radius: 2px; background: #d6d6d6; color: #444; transition: background-color .5s, color .5s; }
.v3s .plan-btn { margin-top: auto; background: var(--ink); color: #fff; }
.v3s .plan-btn b { background: var(--lime); color: var(--ink); }
.v3s .plan-btn:hover { color: var(--ink); }
.v3s .plan-btn:hover b { background: var(--ink); color: var(--lime); }
/* Final: on the black section the featured card is #f1f1f1 like the others, with the light cards' text colours;
   it keeps its lift, lime checks, dark underline and lime button. */
.v3s .plan.is-featured { background: #f1f1f1; transform: translateY(-8px); }
.v3s .plan.is-featured li svg { background: var(--lime); color: var(--ink); }
.v3s .plan.is-featured .plan-price::after { background: #3a3a3a; }
.v3s .plan.is-featured .plan-btn { --sweep: #fff; background: var(--lime); color: var(--ink); }
.v3s .plan.is-featured .plan-btn b { background: var(--ink); color: var(--lime); }
/* Final: the heading takes the about text's colours and the label V2's label grey, so both read on black. */
.v3s #pricing .sec-head h2 { --word-off: #3a3a3a; color: #ececec; }
.v3s #pricing .rule-label { color: #7b7b7b; }

/* ---------- Dark CTA + footer ---------- */
.v3s .dark { --cut: clamp(40px, 5vw, 80px); position: relative; overflow: hidden; background: var(--dark); color: #fff; padding-top: 16vh; }
.v3s .v3-cta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 4vw; }
.v3s .v3-cta-title { --word-off: #3e3e3e; max-width: 12em; margin-bottom: 34px; font: 500 clamp(34px, 4.2vw, 66px)/1.04 var(--sans); letter-spacing: -.045em; }
.v3s .v3-cta .btn { min-width: min(100%, 290px); min-height: 50px; }
.v3s .neon { position: relative; display: grid; place-items: center; height: clamp(240px, 26vw, 380px); }
.v3s .neon-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.v3s .neon-lines path { fill: none; stroke: var(--lime); stroke-width: 1; stroke-dasharray: 60 260; opacity: .55; animation: neon-run 4s linear infinite; }
@keyframes neon-run { to { stroke-dashoffset: -320; } }
.v3s .neon-box { position: relative; display: grid; place-items: center; width: clamp(180px, 20vw, 280px); aspect-ratio: 1; border: 1px solid #2f2f2f; border-radius: 18px; background: linear-gradient(145deg, #222, #121212); box-shadow: inset 0 0 0 6px #181818, 0 30px 60px rgba(0, 0, 0, .5); transform: perspective(900px) rotateX(var(--nrx, 0deg)) rotateY(var(--nry, 0deg)); transition: transform .4s var(--ease); }
.v3s .neon-box::before { content: ""; position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 170, 255, .32), rgba(0, 90, 255, .12) 55%, transparent 75%); animation: neon-breathe 5s ease-in-out infinite; pointer-events: none; }
.v3s .neon-mark { position: relative; width: 72%; height: auto; filter: drop-shadow(0 0 6px rgba(0, 200, 255, .8)) drop-shadow(0 0 26px rgba(0, 110, 255, .55)); opacity: 0; transform: scale(.88); transition: opacity 1.2s, transform 1.4s var(--ease); }
.v3s .neon.is-in .neon-mark { opacity: 1; transform: none; }
@keyframes neon-breathe { 50% { opacity: .65; transform: scale(.94); } }
.v3s .foot { position: relative; display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, .7fr)); gap: 30px 3vw; margin-top: 16vh; padding-top: 6vh; padding-bottom: 7vh; }
.v3s .plus-mark { position: absolute; top: 0; width: 12px; height: 12px; }
.v3s .plus-mark::before, .v3s .plus-mark::after { content: ""; position: absolute; background: #3a3a3a; }
.v3s .plus-mark::before { left: 5.5px; top: 0; width: 1px; height: 12px; }
.v3s .plus-mark::after { top: 5.5px; left: 0; width: 12px; height: 1px; }
.v3s .pm-1 { left: var(--pad); } .v3s .pm-2 { left: 50%; } .v3s .pm-3 { right: var(--pad); }
.v3s .foot .mono { color: #777; font-size: 10.5px; }
.v3s .foot-contact { display: grid; align-content: start; gap: 6px; }
.v3s .foot-mail { margin-bottom: 14px; color: var(--lime); font: 500 clamp(20px, 2vw, 28px)/1.1 var(--sans); letter-spacing: -.035em; }
.v3s .foot-sub { margin-bottom: 20px; font: 400 16px/1.2 var(--sans); }
.v3s .foot-mail:hover, .v3s .foot-sub:hover { text-decoration: underline; text-underline-offset: 4px; }
.v3s .foot-signup { display: grid; gap: 10px; max-width: 420px; }
.v3s .foot-signup div { display: flex; gap: 8px; }
.v3s .foot-signup input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--dark-line); border-radius: 2px; background: var(--dark-2); color: #fff; font: 400 14px/1.2 var(--sans); outline: none; transition: border-color .3s; }
.v3s .foot-signup input:focus { border-color: var(--lime); }
.v3s .foot-col { display: grid; align-content: start; gap: 12px; }
.v3s .foot-col a, .v3s .foot-col button { justify-self: start; padding: 0; border: 0; background: none; color: #e9e9e9; font: 400 16.5px/1.2 var(--sans); letter-spacing: -.02em; text-align: left; transition: color .25s; }
.v3s .foot-col a:hover, .v3s .foot-col button:hover { color: var(--lime); }
.v3s .foot-gap { margin-top: 18px; }
.v3s .foot-legal { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 40px; padding-top: 18px; padding-bottom: 26px; }
.v3s .foot-legal::before { content: ""; position: absolute; top: 0; left: var(--pad); width: min(150px, 30%); height: 3px; background: #2f2f2f; }
.v3s .foot-legal .mono { color: #6f6f6f; font-size: 10px; }
.v3s .foot-disclaimer { max-width: 62em; color: #626262; font: 400 11px/1.55 var(--sans); }
.v3s .giant { height: 12.5vw; padding: 0 var(--pad); overflow: hidden; }
.v3s .giant-img { width: 100%; height: auto; opacity: .1; filter: saturate(.6); transform: translateY(var(--gy, 40%)); transition: transform 1.4s var(--ease); }
.v3s .giant.is-in .giant-img { --gy: 6%; }

/* What's Inside screenshots as browser windows that tilt toward the cursor: V3's feature-guide windows,
   without the hover zoom (image scale and lift). The whole screenshot shows, as in V2. */
.ws-frame { padding: 16px; perspective: 1200px; }
.v3s .post-window { position: relative; overflow: hidden; border-radius: 10px; background: #0b0e13; box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 18px 40px rgba(10, 14, 20, .18); transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; transition: transform .6s var(--ease), box-shadow .6s var(--ease); will-change: transform; }
.v3s .post-window.is-tilting { box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 34px 70px rgba(10, 14, 20, .3); transition: transform .12s linear, box-shadow .6s var(--ease); }
.v3s .post-bar { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-bottom: 1px solid #1c222b; background: #0e1219; }
.v3s .post-bar i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #ff5f57; }
.v3s .post-bar i:nth-child(2) { background: #febc2e; }
.v3s .post-bar i:nth-child(3) { background: #28c840; }
/* Zero width so the address never widens the window past its screenshot. */
.v3s .post-bar span { flex: 1; width: 0; overflow: hidden; margin-left: 8px; color: #5d6875; font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.v3s .post-shot { position: relative; overflow: hidden; }
.v3s .post-glare { position: absolute; inset: 0; background: radial-gradient(60% 60% at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .16), transparent 60%); opacity: 0; transition: opacity .5s; pointer-events: none; }
.v3s .post-window.is-tilting .post-glare { opacity: 1; }

/* ---------- Tablet ---------- */
@media (max-width: 1080px) {
  .v3s .plans { grid-template-columns: 1fr 1fr; }
  .v3s .plans .plan:last-child { grid-column: span 2; }
  .v3s .dash-top { grid-template-columns: 1fr; }
  .v3s .foot { grid-template-columns: 1fr 1fr 1fr; }
  .v3s .foot-contact { grid-column: 1 / -1; }
}

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  .v3s { --nav-h: 64px; --pad: 18px; }
  html.js .dash-hold { --hold: 60vh; }
  .v3s .hero-object { grid-column: 1 / -1; grid-row: 2; height: 72.6vw; }
  /* Phones: each blind spot stacks above its answer as one two-tone pair; the heads become a key. */
  .v3s .versus { --them-ink: #9a9a9a; }
  .v3s .vs-title { font-size: clamp(28px, 8.4vw, 38px); }
  /* Two sentences, three lines on a phone: a step smaller, so the whole comparison still fits a typical phone. */
  .v3s .vs-sub { margin-bottom: 14px; font-size: clamp(24px, 6.6vw, 30px); }
  .v3s .vs-board { column-gap: 8px; }
  .v3s .vs-shell { display: none; }
  .v3s .vs-head { padding: 10px 12px 10px 15px; border-radius: 2px; font-size: 15px; }
  .v3s .vs-head::before { top: 9px; bottom: 9px; width: 3px; }
  .v3s .vs-head-them { background: #181818; }
  .v3s .vs-head-us { background: var(--panel); }
  .v3s .vs-logo { height: 15px; padding: 5px 8px; border-radius: 5px; }
  .v3s .vs-pairs { display: grid; gap: 8px; margin-top: 8px; padding: 0; }
  .v3s .vs-pair { grid-template-columns: 1fr; }
  .v3s .vs-cell { padding: 9px 12px; font-size: 13px; }
  .v3s .vs-cell::before { inset: 0; height: auto; }
  .v3s .vs-them::before { border-radius: 2px 2px 0 0; background: #181818; }
  .v3s .vs-us::before { border-radius: 0 0 2px 2px; background: var(--panel); }
  .v3s .vs-key::after { border-left-width: 3px; border-radius: 0 0 2px 2px; }
  .v3s .vs-blind, .v3s .vs-fix { gap: 10px; }
  .v3s .vs-icon svg, .v3s .vs-fix svg { width: 16px; height: 16px; }
  .v3s [data-vs-chip]::before { inset: -9px -12px; }
  .v3s .is-live .vs-pin { padding: calc(var(--nav-h) + 12px) var(--pad) 16px; }
  /* Stacked, the LiveGreeks side can't rise as one card: each answer appears under its blind spot, and each cell's
     background arrives with its text (a docking chip's cell follows its --m). */
  .v3s .is-live .vs-us, .v3s .is-live .vs-head-us { transform: none; }
  .v3s .is-live .vs-them::before { opacity: var(--m); }
  .v3s .is-live .vs-us::before { opacity: 0; transition: opacity .5s; }
  .v3s .is-live .vs-them.is-in::before, .v3s .is-live .vs-us.is-in::before { opacity: 1; transition: opacity .5s; }
  /* Spots are inset by the chip face, so a floating chip lines up with the page's side padding. */
  .v3s .vs-spot-1 { top: max(13%, calc(var(--nav-h) + 34px)); left: calc(var(--pad) + 12px); }
  .v3s .vs-spot-2 { top: 24%; right: calc(var(--pad) + 12px); }
  .v3s .vs-spot-3 { bottom: 25%; left: calc(var(--pad) + 12px); }
  .v3s .vs-spot-4 { bottom: 13%; right: calc(var(--pad) + 12px); }
  .v3s .section { padding: 10vh 0; }
  .v3s .sec-head { grid-template-columns: 1fr; }
  .v3s .sec-head > .btn, .v3s .sec-head > .toggle { justify-self: start; }
  .v3s .plans { grid-template-columns: 1fr; }
  .v3s .dfeat { min-height: 0; padding: 16px 12px; gap: 10px; font-size: 13.5px; }
  .v3s .dash { border-radius: 16px; }
  .v3s .dash-window { border-radius: 10px 10px 0 0; margin-bottom: -2%; }
  .v3s .dash-window { --bar-h: 24px; }
  .v3s .dash-bar { border-radius: 10px 10px 0 0; }
  .v3s .dash-bar i { width: 7px; height: 7px; }
  .v3s .dash-dot { width: 22px; height: 22px; }
  .v3s .dash-dot i { inset: 6px; }
  .v3s .dash-tag { font-size: 9px; padding: 4px 7px; }
  .v3s .plans .plan:last-child { grid-column: auto; }
  .v3s .plan.is-featured { transform: none; }
  .v3s .v3-cta { grid-template-columns: 1fr; }
  .v3s .neon { order: -1; height: 64vw; }
  .v3s .foot { grid-template-columns: 1fr 1fr; margin-top: 10vh; }
  .v3s .foot-col:last-child { grid-column: 1 / -1; }
  .v3s .pm-2 { display: none; }
  .v3s .giant { height: 13vw; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .v3s .pre { display: none; }
}

/* =====================================================================
   Final: Platform and What's Inside media expand full screen
   ===================================================================== */
/* A clear button over each piece of media opens it; V2's pills stay on top and keep their links. */
.media-zoom { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
button.media-zoom:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.lightbox { width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: none; overflow: hidden; }
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: rgba(4, 5, 7, .88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.lightbox-frame { position: relative; }
/* As large as the screen allows at the media's own shape (--ratio is set when it opens). */
.lightbox-stage { position: relative; width: min(94vw, 88vh * var(--ratio, 1.6)); aspect-ratio: var(--ratio, 1.6); overflow: hidden; border-radius: 12px; container-type: size; }
.lightbox[open] .lightbox-stage { animation: lightbox-in .45s var(--ease); }
@keyframes lightbox-in { from { opacity: 0; transform: scale(.96); } }
.lightbox-stage > img, .lightbox-stage > video { display: block; width: 100%; height: 100%; object-fit: contain; }
/* The Realm player moves in whole, reactions and all; it fills the stage instead of its window. */
.v3s .lightbox-stage > .fx-box { top: 0; left: 0; width: 100%; height: 100%; transform: none; }
.lightbox-x { position: absolute; z-index: 1; top: -14px; right: -14px; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%; background: #111; color: #fff; font: 400 20px/1 var(--sans); box-shadow: 0 6px 18px rgba(0, 0, 0, .5); cursor: pointer; transition: background-color .25s, border-color .25s; }
.lightbox-x:hover { background: #222; border-color: rgba(255, 255, 255, .4); }
button.lightbox-x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 760px) {
  .lightbox-x { top: -46px; right: 0; }
}