";
initial-value: 0.28;
inherits: true;
}
.btn--ring::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background:
conic-gradient(from var(--cta-angle) at 50% 50%,
rgba(255, 255, 255, var(--cta-ring)) 0deg,
rgba(255, 255, 255, 1) 48deg,
rgba(255, 255, 255, var(--cta-ring)) 96deg,
rgba(255, 255, 255, var(--cta-ring)) 360deg),
linear-gradient(rgba(255, 255, 255, var(--cta-ring)) 0 0);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
pointer-events: none;
animation: cta-stroke 3.6s linear infinite;
}
@keyframes cta-stroke { to { --cta-angle: 360deg; } }
/* hover: the whole pill outlines in solid white, body untouched */
.btn--ring:hover { --cta-ring: 1; }
@media (prefers-reduced-motion: reduce) {
.compat__cta { transition: none; }
.btn--ring::before { animation: none; }
}
/* --- the comp's frame, rebuilt as layers (user 2026-08-18) ---------------
Everything is positioned as a % of Figma's 1440x1129 frame, so the whole
stage scales with the column. Measured against the flat export, this
reconstruction lands at a mean error of 1.3/255 — the comp's four blurred
#0A0A0A blobs turned out to be invisible over the near-black base and were
dropped rather than carried as four more nodes.
NOTE: Figma stretches the lineup into its 1090x529 box (the source plate is
1024x795), so both axes are pinned here on purpose — do not "fix" the
aspect, it would no longer match the comp. */
.compat__stage {
position: relative;
overflow: hidden; /* clips every plate's overhang */
width: min(1720px, 100%);
aspect-ratio: 1440 / 1129;
/* less negative than before (user 2026-08-21): the lineup grew 20%, so the
stage was riding up into the headline and CTA — pulling it down is what
lifts the copy clear */
margin: clamp(-330px, -19vw, -80px) auto 0;
/* melts the stage's top edge into the section black, as the flat plate did */
-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%);
mask-image: linear-gradient(180deg, transparent 0, #000 30%);
}
.compat__stage > * { position: absolute; max-width: none; }
.compat__sky {
inset: 0;
background: linear-gradient(90deg, #050404, #1e2128);
}
/* the rocks: the comp's plate scaled up 6% about its centre purely to buy
bottom overhang — its bottom row is fully opaque, so the edge must never
climb into frame when the layer drifts up */
.compat__mtn {
left: -57.842%;
top: 28.722%;
width: 223.115%;
height: 74.266%;
transform: translate3d(0, calc(var(--par, 0px) * .35), 0);
}
/* the comp's bottom fade, between the rocks and the lineup */
.compat__haze {
left: 0;
right: 0;
bottom: 0;
height: 30.115%;
background: linear-gradient(0deg, #0a0a0a, rgba(10, 10, 10, 0));
}
/* the lineup, 20% smaller than the comp (user 2026-08-18). It keeps the comp's
TOP edge rather than its base — shrinking off the base dropped the visual
centre 53px and left the air lopsided (119px above, 21px below).
Travels ~5x the rocks — that gap IS the parallax. The plate's own bottom row
is still mid-shadow (alpha 72), so the last 9% is faded out: the solid bodies
end at 90.7% of the source, so this only tapers the shadow and the cut can
never read as an edge wherever the drift leaves it. */
.compat__rig {
/* The old plate was a stretched export, so both axes were pinned. The new
lineup render (user 2026-08-19) is a true 2048x1590 and must keep its own
aspect — height is free, and the box is anchored by its FEET so the extra
height grows upward into the frame's air rather than pushing the units
down through the fade. */
left: 21.7%; /* re-centred for the narrower box */
bottom: 1.2%; /* sits lower in the frame (user 2026-08-21) */
width: 56.6%;
height: auto;
/* belt and braces: if a height ever lands on this box again, contain keeps
the render from stretching — the old rule squashed it 1.6x wide */
aspect-ratio: 2048 / 1590;
object-fit: contain;
/* grows as it rides up the page: --parp is the driver's raw 0→1 pass, and
the origin sits at the feet so the lineup scales up out of the ground
rather than swelling from its middle (user 2026-08-21) */
/* starts 20% up on where it used to sit and still grows on the way past
(user 2026-08-21) */
transform: translate3d(0, calc(var(--par, 0px) * 1.8), 0)
scale(calc(1.2 + var(--parp, 0) * 0.14));
transform-origin: 50% 100%;
will-change: transform;
-webkit-mask-image: linear-gradient(180deg, #000 91%, transparent 100%);
mask-image: linear-gradient(180deg, #000 91%, transparent 100%);
}
/* The comp's frame bottoms out at #090909, not black, so it met the next
section's #000 as a visible seam. This pins the fade to the SECTION (not the
stage) so it stays put while the layers drift. */
.compat::after {
content: "";
position: absolute;
inset: auto 0 0;
height: clamp(90px, 13vh, 170px);
background: linear-gradient(180deg, rgba(0, 0, 0, 0), #000 78%);
pointer-events: none;
}
@media (max-width: 640px) {
/* the 1440-wide comp scales down to nothing on a phone — blow the stage up
and re-centre it so the lineup still reads, and pull the head tighter.
The global `img { max-width: 100% }` (line 83) capped the old 135% here,
so the plate never grew and the negative margin just shoved it off centre. */
.compat { padding-top: clamp(64px, 9vh, 92px); }
.compat__stage {
max-width: none;
width: 178%;
margin-left: -39%; /* (100 - 178) / 2 — keeps the lineup centred */
margin-top: clamp(-360px, -55vw, -150px);
}
.compat::after { height: clamp(70px, 10vh, 110px); }
}
/* the drift is a desktop nicety; on a phone it costs a scroll-linked write per
frame for a few px of travel, so the plates sit still */
@media (max-width: 640px), (prefers-reduced-motion: reduce) {
.compat__mtn, .compat__rig { transform: none; will-change: auto; }
}
/* WIDE WINDOWS (user 2026-09-21). The stage stops growing at 1720px, and past
that it sat as a box in the section's black: the rocks and the lit side of
the sky both ended in a hard vertical edge. The rocks plate is 2.23 frames
wide, so there was always more of it to show. From here up the STAGE runs
edge to edge and only the FRAME keeps the cap: every horizontal measure is
the same fraction as above, taken off --frame and hung from the centre, so
the crop inside the frame does not move and the window just opens onto more
plate. Heights still read the stage, which the strut holds at the frame's
own height, so nothing vertical changes either. */
@media (min-width: 1721px) {
.compat__stage {
/* a %, so it resolves against whatever reads it: the stage's width in the
plates' left/width, the sky's own box in its gradient. The min() is for
a classic scrollbar, which leaves the section just under the cap while
the window is already over it — there this all equals the rules above. */
--frame: min(1720px, 100%);
width: 100%;
aspect-ratio: auto;
}
.compat__stage::before {
content: "";
display: block;
width: var(--frame);
aspect-ratio: 1440 / 1129;
}
/* the same ramp across the frame, holding its end colours outward. The lit
side falls back to the dark one over the stretch where the rocks fade out
(92%-100% of the plate, see below), so a window wider than the plate ends
dark on both sides rather than in a bare column of sky; up to ~3350px that
stretch is still off screen. */
.compat__sky {
background: linear-gradient(90deg,
#050404 calc(50% - var(--frame) / 2),
#1e2128 calc(50% + var(--frame) / 2),
#1e2128 calc(50% + var(--frame) * .97424),
#050404 calc(50% + var(--frame) * 1.15273));
}
.compat__mtn {
left: calc(50% - var(--frame) * 1.07842); /* -57.842% of the frame */
width: calc(var(--frame) * 2.23115);
}
.compat__rig {
left: calc(50% - var(--frame) * .283); /* 21.7% of the frame */
width: calc(var(--frame) * .566);
}
}
/* The plate runs out at ~3700px of window on the left and ~3970px on the right.
Its ends are faded from 3000px, while both are still off screen, so they melt
into the sky when they arrive instead of cutting — and nothing pops on the
way there. */
@media (min-width: 3000px) {
.compat__mtn {
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
}
/* DITHER (user 2026-09-21) — the sky climbs some 30 levels across the whole
frame and is then multiplied by the stage's top fade, so every 1/255 step is
a patch dozens of pixels across and the two ramps draw a grid of blocks; the
wider the window, the easier it is to see. Same remedy as the noise tile over
the Premier screenshots' veil: scatter each step boundary over a few pixels
and the eye integrates a smooth ramp. It lives INSIDE the stage, so the top
fade tapers it with everything else and the section's black stays pure, and
UNDER the lineup, which has no ramp to hide. */
.compat__stage::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: .05;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 160px 160px;
}
.compat__rig { z-index: 1; }
/* ==========================================================================
FORESIGHT+ ECOSYSTEM BAND — ported from the Foresight+ page (user
2026-08-18) so the Premier page shows the offering as the wired hub
instead of a bullet row. Same component, Premier's own CTAs beneath.
========================================================================== */
.thisis {
position: relative;
/* doubled top air (user 2026-08-14): the band needs room off the hero */
/* the Foresight+ page tucks the course marquee under this band, so its
bottom padding was tiny. Here the venues band follows straight after,
so the CTA needs real air beneath it (user 2026-08-18). */
padding: clamp(90px, 12vh, 160px) 0 clamp(120px, 16vh, 210px); /* halved off compat (user 2026-08-18) */
background: var(--black);
overflow: clip;
text-align: center;
}
.thisis__head { position: relative; z-index: 2; }
.thisis__head .h2--xl { line-height: .875; } /* the mock's tight two-line leading */
/* the break is a desktop-only device: tablet and phone read it on one line */
@media (max-width: 1024px) {
.thisis__br { display: none; }
.thisis__head .h2--xl { line-height: 1.02; }
}
.thisis__lede {
position: relative;
z-index: 2;
/* Text xl/Semibold — 20/30, 60% on-brand white, 586px box (3 lines) */
max-width: min(760px, 92vw); /* wider, single-flow copy (user 2026-08-14) */
margin: clamp(1.75rem, 2.78vw, 2.5rem) auto 0;
padding-inline: 24px;
font-size: clamp(1.05rem, 1.39vw, 1.25rem);
font-weight: 584;
line-height: 1.5;
color: rgba(245, 245, 246, .6);
}
/* ---- the band: two halves of the frame, hub overlapping between them ---- */
.thisis__stage {
--wp: 0;
--msc: .8; /* module scale, picked in the lab */
--lw: .5px; /* wire hairline */
--ch: 5px; /* comet head height */
--cblur: 1.09px;
position: relative;
z-index: 2;
width: min(1440px, 96vw);
margin: clamp(48px, 6.5vw, 93px) auto 0;
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 0;
align-items: center;
}
.thisis__col { display: contents; }
.thisis__col--premier > * { grid-column: 1; }
.thisis__col--app > * { grid-column: 2; }
/* ---- wire ---- */
.thisis__wire {
position: absolute;
inset: 0;
z-index: 1;
width: 100%;
height: 100%;
pointer-events: none;
opacity: min(1, calc(var(--wp) * 5)); /* first pixels ease in, not pop */
}
.thisis__trace {
fill: none;
/* pathLength=1 normalises both sides, and the offset comes from ONE custom
property so the driver writes a single value instead of six inline styles */
stroke-dasharray: 1;
stroke-dashoffset: var(--dash, 1);
}
.thisis__trace--core { stroke: rgba(255, 255, 255, .92); stroke-width: var(--lw); }
/* the glow is drawn as real strokes under the core, not left to a blur, so
it stays glued to the line at every width */
.thisis__trace--glow { stroke: #fff; stroke-width: calc(var(--lw) * 3.6); opacity: .16; }
.thisis__trace--glow2 { stroke: #fff; stroke-width: calc(var(--lw) * 8.8); opacity: .06; }
.thisis__hot { /* short bright segment of the rail under the hub */
fill: none;
stroke: url(#thisis-hotgrad);
stroke-width: 1.5;
opacity: calc(var(--wp) * .9);
}
/* the comet: a soft blob riding the drawn tip (Figma 12692:3689 — a quick
ramp to a peak just behind the tip, then a long smooth fade) */
.thisis__comet {
pointer-events: none;
filter: blur(var(--cblur));
/* Rasterise the blur ONCE and then only move the layer. Without this the
browser re-runs the filter every frame; `mix-blend-mode: screen` used to
sit here too and forced a backdrop read-back per frame — on black a white
shape screens to itself, so dropping it costs nothing visually. */
will-change: transform;
/* NO css opacity here: it would beat the SVG presentation attribute the
driver animates, and the comet would never show */
}
/* ---- hub ---- */
.thisis__cube {
position: relative;
z-index: 3;
grid-column: 1 / -1;
grid-row: 1;
justify-self: center;
margin: 0 0 0 2vw; /* the file sits the hub just right of centre */
width: calc(clamp(285px, 30.9vw, 444px) * var(--msc)); /* +50% (user 2026-08-14) */
}
.thisis__cube img {
position: relative;
width: 100%;
height: auto;
will-change: transform;
animation: thisis-float 6.5s ease-in-out infinite;
}
@keyframes thisis-float {
0%, 100% { transform: translateY(-4px) rotate(-1.1deg); }
50% { transform: translateY(4px) rotate(1.1deg); }
}
.thisis__cube::before { /* junction glow blooms as the wire completes */
content: "";
position: absolute;
inset: -40%;
z-index: -1;
background: radial-gradient(closest-side, rgba(82, 148, 255, .34), rgba(59, 165, 255, .12) 46%, transparent 72%);
opacity: calc((.25 + var(--wp) * .75) * .2);
}
/* ---- products: both renders carry their own alpha, so the wire passes
behind them without a black plate cutting it ---- */
.thisis__scene {
grid-row: 1;
position: relative;
z-index: 2;
justify-self: center;
align-self: center;
}
.thisis__scene img { width: 100%; height: auto; }
/* the vertical offsets are set by thisis-wire.js, which aligns each product
to the measured rail (40.3% / 45.1% of its box, per the file) */
.thisis__scene--bay { width: calc(clamp(240px, 25.7vw, 370px) * var(--msc)); }
.thisis__scene--phone { width: calc(clamp(180px, 18.78vw, 271px) * var(--msc)); }
/* ---- captions on shared rows across both columns ---- */
.thisis__prodlogo {
grid-row: 2;
justify-self: center;
align-self: center;
height: calc(clamp(18px, 1.65vw, 23.7px) * var(--msc));
width: auto;
margin-top: clamp(14px, 1.6vw, 22px);
position: relative;
z-index: 2;
}
.thisis__prodname {
grid-row: 2;
justify-self: center;
align-self: center;
margin-top: clamp(14px, 1.6vw, 22px);
font-size: calc(clamp(1.5rem, 2.22vw, 2rem) * var(--msc));
font-weight: 640;
letter-spacing: -.02em;
line-height: 1;
color: #fff;
position: relative;
z-index: 2;
}
.thisis__col p {
grid-row: 3;
justify-self: center;
max-width: calc(min(424px, 92%) * var(--msc));
margin-top: clamp(10px, .97vw, 14px);
font-size: calc(clamp(1rem, 1.25vw, 1.2rem) * var(--msc));
line-height: 1.6;
color: rgba(255, 255, 255, .82);
position: relative;
z-index: 2;
}
/* scene → caption gap halved on desktop/tablet (user 2026-08-19). The slack
isn't the margin — it's row 1's height (the hub) plus each scene's rail
offset, measured 43/61px at 842w and 67/99px at 1440w, so the pull-up is
vw-linear and freezes with the stage's 1440px cap. The whole caption block
(rows 2-4) rides up together; phones keep the stacked spacing. */
@media (min-width: 701px) {
/* Both captions share grid row 2 and centre in it, which is what keeps the
PREMIER logo and the Mobile App label on one line — so the pull-up has to
be IDENTICAL on the two. (Splitting it per element to equalise the two
gaps is what knocked them out of alignment, user 2026-08-19.) The gaps
under each render differ on their own — the phone sits higher on the rail
than the bay — and that difference is inherent to row 1, not to these
margins. Shared pull-up: 67/99 → 27/58 at desktop. */
.thisis__prodlogo,
.thisis__prodname { margin-top: calc(clamp(14px, 1.6vw, 22px) - min(2.8vw, 40px)); }
}
.thisis__col .link-arrow {
grid-row: 4;
justify-self: center;
margin-top: clamp(9px, .85vw, 12px);
position: relative;
z-index: 2;
}
/* ---- dot field: the footer's halftone shader pooled around the hub ---- */
.thisis__dots {
position: absolute;
z-index: 0;
pointer-events: none;
}
/* ---- entrance: the driver owns these, not the global reveal observer,
so the hub can land before the wire and the columns ---- */
/* the reveal rides `translate`, NOT `transform` — the scenes carry their
rail alignment in `transform`, and a shared property would cancel it */
.thisis__rv {
opacity: 0;
translate: 0 28px;
/* promoted BEFORE the entrance runs: letting the browser create these
layers on the first animated frame is what makes the reveal stutter */
will-change: opacity, translate;
transition: opacity .9s var(--ease) var(--d, 0s),
translate .9s var(--ease) var(--d, 0s);
}
.thisis__rv.in { opacity: 1; translate: none; }
/* …and released once it has landed, so the layers are not kept forever */
.thisis__stage.is-settled .thisis__rv,
.thisis__stage.is-settled .thisis__cube img { will-change: auto; }
/* one CTA under the band now (user 2026-08-18): the column links and the
trial footnote came off, so this is just the single button, centred */
.thisis__tail { position: relative; z-index: 2; margin-top: clamp(48px, 7vh, 84px); }
.thisis__tail .plusband__cta { margin-top: 0; display: flex; justify-content: center; }
/* stacked band on phones (user 2026-08-18): cube -> Premier -> App run
vertically, the wire chaining down between them */
@media (max-width: 700px) {
.thisis__stage {
display: flex;
flex-direction: column;
align-items: center;
row-gap: clamp(40px, 11vw, 64px);
}
.thisis__cube { order: 1; margin: 0; width: clamp(200px, 56vw, 270px); }
.thisis__col { display: flex; flex-direction: column; align-items: center; }
.thisis__col--premier { order: 2; }
.thisis__col--app { order: 3; margin-top: clamp(24px, 8vw, 48px); }
.thisis__col--premier .thisis__prodlogo { margin-top: clamp(-34px, -8vw, -20px); } /* hugs the bay render */
.thisis__scene--bay { width: min(72vw, 330px); }
.thisis__scene--phone { width: min(56vw, 255px); }
.thisis__col p { max-width: 30ch; }
}
/* sub header appears on scroll only, on tablet/phone (user 2026-08-18) */
@media (max-width: 1024px) {
.localnav {
transform: translateY(-14px);
opacity: 0;
pointer-events: none;
transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.localnav.scrolled {
transform: none;
opacity: 1;
pointer-events: auto;
}
}
/* return-scroll global header on tablet/phone (user 2026-08-18) */
@media (max-width: 1024px) {
.gnav--fixed {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 70;
transform: translateY(-100%);
transition: transform .35s var(--ease);
}
.gnav--fixed.gnav--reveal { transform: translateY(0); }
}
/* --- the Premier mark leads the hero now that the local nav is gone
(user 2026-08-18): sits where the bracketed eyebrow was --- */
.phero__logo {
width: clamp(178px, 17vw, 268px);
height: auto;
margin: 0 auto clamp(18px, 2.4vh, 30px);
}
/* ==========================================================================
COURSE CARD (user 2026-08-21) — replaces the baked 551x600 PNGs with a real
component: a clean photo plus live type. Per the brief this card carries no
bookmark, no download button and no difficulty dots — just where it is,
what it is, and how it plays. Proportions follow the old export (551:600)
so the marquee's rhythm is unchanged.
========================================================================== */
.crs { flex: none; width: var(--cw); will-change: transform; }
.crs__card {
position: relative;
margin: 0;
aspect-ratio: 551 / 600;
/* 8% of the card, not of the viewport: the PNGs this replaced carried a
constant ~22px radius on a 275px card, and a vw-based clamp only reached
that above a 1571px window — every real screen got a tighter corner than
the original. --cw is the card width, so this tracks it. */
border-radius: calc(var(--cw) * .08);
overflow: clip;
background: #0b0d0f;
container-type: inline-size; /* type scales with the card, not the page */
/* The belt rotates each card ±3deg (the arc wheel in main.js). Without its
own compositing layer the rounded clip is a geometric op applied at
composite time, with no alpha ramp to rotate — so the corners stair-step
at these shallow angles. The cards this replaced were PNGs whose rounded
corners were baked in as an antialiased alpha ramp, which is why the old
belt read smooth. Promoting the card rasterises the clip WITH antialiasing
once, and the GPU then filters that texture through the rotation. */
will-change: transform;
backface-visibility: hidden;
}
.crs__art {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* The type sits on a plain black ramp over the bottom quarter (user
2026-08-24). This replaced a progressive blur — three blurred copies of the
art, masked at increasing depths — which softened the bottom third of every
card and read as airbrushed. These are 4K course renders and the section's
whole claim is "rendered in 4K", so holding them sharp to the edge matters
more than the depth effect. Dropping it also takes 3 of the 4 ![]()
per card
and every blur() out of the compositing path. */
.crs__card::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(180deg,
rgba(0, 0, 0, 0) 62%,
rgba(0, 0, 0, .72) 82%,
rgba(0, 0, 0, .90) 100%);
}
.crs__body {
position: absolute;
z-index: 1;
left: 0;
right: 0;
bottom: 0;
padding: 0 8.5cqw 8cqw;
text-align: center;
}
.crs__loc {
margin: 0 0 2.2cqw;
font-family: var(--mono);
font-size: 3.1cqw;
font-weight: 400;
letter-spacing: .1em;
text-transform: uppercase;
color: rgba(255, 255, 255, .82);
}
.crs__name {
margin: 0;
font-size: 7.4cqw;
font-weight: 700;
line-height: 1.08;
letter-spacing: -.02em;
color: #fff;
}
.crs__spec {
margin: 3cqw 0 0;
font-family: var(--mono);
font-size: 3.1cqw;
font-weight: 400;
letter-spacing: .06em;
color: rgba(255, 255, 255, .74);
}
/* ======================================================================
FAQ · "Premier FAQs" (Figma 1462:7775, 2026-08-26)
El mismo sistema de la landing de mobile (mobile.css, "FAQs"
composition): sección oscura, placa de estudio blureada, dos columnas
reales, glass "Mix" en la fila abierta y el módulo CTA. Lo que cambia
es la pieza de arriba: en vez de la mano con el teléfono, una ventana
centrada (870x580 en el frame de 1440) con el render del sim bay, que
js/faqv3.js va rotando por los cinco launch monitors con el noise-melt
del showcase de 4K. El título va DEBAJO de la ventana, no detrás.
Todo scopeado a .faq--v3: las reglas base .faq / .qa (la sección clara
que esto reemplaza) quedan intactas, y este bloque va al final del
archivo así sus repetidas le ganan a la base por orden.
====================================================================== */
.faq--v3 {
position: relative;
overflow: hidden;
padding: 0 0 var(--faq-foot, 200px);
background: var(--black);
--faq-inset: 22px; /* = el padding vertical del summary (26-4): texto a
la misma distancia de los cuatro bordes de la card */
}
/* --- la placa: la MISMA de la landing de mobile (la silueta en niebla
oscura, mobile/assets/faq-blur.webp copiada acá), pedido 2026-08-26 —
la azul clara del Figma de Premier arrancaba la sección en claro y su
borde inferior asomaba como un gradiente cortado detrás de las filas.
Con la de mobile el principio y el final son oscuros.
Caja y posición las escribe js/faqv3.js, porque `top` y `height` en %
resolverían contra el ALTO de la sección, que crece con cada fila
abierta; y la ancla es la LISTA: la primera fila cae en el 80% de la
placa, en su cola desvanecida — eso es lo que hace legibles las filas
(la misma lección medida en mobile: 7.9:1 anclada a la lista contra
2.6:1 pinneada al techo). --- */
.faq--v3 .faq__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.faq--v3 .faq__blur {
position: absolute; top: var(--faq-bg-top, 0px); left: var(--faq-bg-left, 0px);
width: var(--faq-bg-w, 152%); height: var(--faq-bg-h, auto);
object-fit: cover; object-position: center;
max-width: none; /* styles.css:87 capa img a 100% y pierde el encuadre */
/* proporcional: el fade de bordes de un blur es ~3x su radio, y a 60px
fijos se come el sobrante lateral en pantallas chicas */
filter: blur(clamp(24px, 4.2vw, 60px));
/* el blur muestrea más allá de los bordes y mete el negro de la página
como viñeta; escalar esconde el fleco */
transform: scale(1.08);
}
.faq--v3 .faq__bg::after {
content: ""; position: absolute; inset: 0;
/* tres capas, de abajo hacia arriba: 10% negro plano, scrim del 28%
(AA: sin él las filas de mobile medían 2.6:1), y la rampa negra del
62% superior, que hunde el arranque en negro */
background:
linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 62%),
linear-gradient(0deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, .28)),
rgba(0, 0, 0, .1);
}
/* --- la ventana del render. El webp trae alfa real: el bay flota sobre la
placa, sin marco. El canvas del melt y el still comparten caja; cuando el
GL levanta (faq--gl-live) el still se apaga y queda de fallback. --- */
.faq--v3 .faq__grid {
position: relative; z-index: 1;
display: block;
/* 80% of the v3 spec (was 180 at the 1440 frame): the whole module rides
higher so the bay window meets the venues CTA sooner — the seam padding
above was already trimmed and the leftover read as dead air
(user 2026-08-28) */
padding-top: clamp(77px, 10vw, 144px);
}
.faq--v3 .faq__stage {
position: relative;
width: min(870px, 92vw);
/* The Falcon render is an alpha cutout sitting in a 3/2 file with ~12%
transparent padding above the bay and ~19% below (measured row by row,
2026-08-28) — at the file's own aspect the box reserved all of it as
dead layout space, which is what read as "mucho espacio" between the
venues CTA and the bay. 2/1 + the 40% object-position below shows the
image band from 10% to 85%: every visible pixel kept, a quarter of the
box's height gone. */
aspect-ratio: 2 / 1;
margin-inline: auto;
}
.faq--v3 .faq__gl,
.faq--v3 .faq__still {
position: absolute; inset: 0;
width: 100%; height: 100%; max-width: none;
/* parallax de scroll, escrito por js/faqv3.js en el WRAPPER (.faq__stage):
las custom properties heredan, así canvas y still viajan juntos. Sin
ventana de recorte: el render es un recorte con alfa, como la mano. */
transform: translate3d(0, var(--faq-par, 0px), 0);
will-change: transform;
}
.faq--v3 .faq__still { object-fit: cover; object-position: 50% 40%; transition: opacity .35s var(--ease); }
.faq--v3 .faq__gl { opacity: 0; transition: opacity .35s var(--ease); }
.faq--v3.faq--gl-live .faq__gl { opacity: 1; }
.faq--v3.faq--gl-live .faq__still { opacity: 0; }
/* --- el título, DEBAJO de la ventana (la base .faq__head es sticky). El
box del Figma solapa 25px con la ventana; el leading .8 es lo que lo
hace leer debajo. --- */
.faq--v3 .faq__head {
position: static;
text-align: center;
/* El solape negativo del Figma (-25, luego -4.5vw) tenía sentido cuando
la ventana terminaba en un 19% de relleno transparente — el título
montaba sobre aire. Con la ventana recortada a 2/1 (2026-08-28) el mat
llega casi al borde del box y el solape lo pisaba, así que el margen
se da vuelta: positivo, dimensionado para restituir el aire visual que
había entre el mat y el título antes del recorte (~70px a 1440). */
/* -20% sobre el aire visual (2026-08-28). El gap que se ve = este margen
+ la tira transparente al pie de la ventana (~5% de su alto), así que
el margen absorbe la reducción completa de ambos. */
margin-top: clamp(22px, 2.4vw, 35px);
}
.faq--v3 .faq__head .h2 {
/* Sin overrides tipograficos (user 2026-08-26, "igual que Get started
with Foresight+"): el titulo es el .h2 estandar de las secciones —
72/700/1.25/-2% salen de la base. Del spec original del Figma
(100px/.8/-5px) no queda nada. Solo el blanco y el max-width: la
base lo capa y aca va centrado. OJO: los tres valores van explicitos
igual — la base .faq__head .h2 (la FAQ clara vieja) es mas especifica
que .h2 y sin esto el titulo caia a SU tamano (32px), no al estandar. */
font-size: clamp(2.4rem, 5.4vw, 4.5rem);
line-height: 1.25;
letter-spacing: -.02em;
max-width: none;
color: #fff;
}
.faq--v3 .faq__list {
/* was 0 while the "We got ya covered" CTA module sat between the title
and the questions and carried the spacing; with that module removed
(user 2026-09-04) the list holds its own air under the title */
margin-top: clamp(48px, 6vh, 72px);
display: grid;
/* two REAL containers, not CSS columns and not a shared grid: either of
those couples the sides, and opening a row on the left would push or
gap the right */
grid-template-columns: 1fr 1fr;
/* La calle se mide DESCONTANDO el sangrado de las cards: aire real =
gap - 2 x inset(22). El gap anterior (43 a 1440) quedó en cero cuando
el inset subió a 22 y los filetes de las dos columnas casi se tocaban
(user 2026-08-26, "aca tiene que haber mas espacio"). Con esto el aire
real es ~50px a 1440 y nunca baja de ~28. El costo: la pregunta larga
ahora se parte en dos lineas por debajo de ~1250px (antes ~1205). */
column-gap: clamp(72px, 6.5vw, 94px);
align-items: start;
}
/* --- rows --- */
.faq--v3 .qa {
border-top: 1px solid rgba(255, 255, 255, .1);
border-radius: 12px;
/* how far the card bleeds past the text. In two columns this is charged
TWICE to the gutter, so it is the cheapest place to buy column width
back. Text stays flush because summary and panel pad by the same
number. Measured: the long second question needs 535px and fits on one
line from ~1205px up. */
margin-inline: calc(var(--faq-inset, 10px) * -1);
/* a few px between EVERY row, so an open card never butts straight into
the next row's rule. Closed it is invisible: the rule is a border-top,
so it simply sits a few px lower. */
margin-block-end: 6px;
/* the full border exists while closed, transparent. Declaring the sides
only on [open] flashes a white ring: their width jumps 0->1px at once
and the colour transition then starts from the unset value, which is
currentColor. */
border: 1px solid transparent;
border-top-color: rgba(255, 255, 255, .1);
-webkit-backdrop-filter: saturate(100%) blur(0px);
backdrop-filter: saturate(100%) blur(0px);
transition: background .45s var(--ease), border-color .45s var(--ease),
backdrop-filter .45s var(--ease), -webkit-backdrop-filter .45s var(--ease);
}
.faq--v3 .qa:last-child {
/* sin regla de cierre (user 2026-08-26): la lista termina en el aire, no
en una linea. `transparent` y no `0` para que la caja no cambie de alto
respecto de sus hermanas. */
border-bottom-color: transparent;
margin-block-end: 0;
}
.faq--v3 .qa summary {
padding: calc(var(--faq-pad, 26px) - 4px) var(--faq-inset, 10px);
color: rgba(255, 255, 255, .9);
transition: padding-bottom .3s var(--ease);
}
.faq--v3 .qa summary:hover { color: rgba(255, 255, 255, .9); }
/* The question-to-answer gap comes off the SUMMARY's bottom pad, never off
a negative margin on the answer: .qa__panel is overflow:hidden (it has to
be, the open/close animates its height) so pulling the up moves its
top edge outside the box and the paint stops there. Shrinking the pad
below the question is equivalent and safe — it sits BELOW the text, so
the question does not move; only the panel comes up.
Why 10px less at all: the box gap already carries the question's
half-leading ((24-16)/2 = 4px) plus the answer's (4.2px), so a "22px"
pad optically reads as ~30. */
.faq--v3 .qa[open] summary { padding-bottom: calc(var(--faq-pad, 26px) - 14px); }
/* el + al 80% de blanco (user 2026-08-26). El #57575c del Figma daba ~2.4:1
contra este fondo y AA pide 3:1 para elementos no textuales, asi que esto
ademas cierra ese hueco. */
.faq--v3 .qa summary .qa__icon::before,
.faq--v3 .qa summary .qa__icon::after { background: rgba(255, 255, 255, .8); }
.faq--v3 .qa:hover { background: rgba(255, 255, 255, .035); }
/* Mix: the blur and the dim of the hero's Download card, but every rule
stays where it was — the row does not detach, so the list's rhythm
survives an open. Values lifted verbatim from .getcard. */
.faq--v3 .qa[open] {
background: rgba(9, 11, 10, .58);
border-color: rgba(255, 255, 255, .12); /* width already there; colour only */
-webkit-backdrop-filter: saturate(150%) blur(18px);
backdrop-filter: saturate(150%) blur(18px);
}
.faq--v3 .qa__panel p {
padding: 0 60px calc(var(--faq-pad, 26px) - 4px) var(--faq-inset, 10px);
color: rgba(255, 255, 255, .62);
max-width: none;
}
/* stacked, col 1's closing rule lands on col 2's opening one and the seam
draws twice. `transparent` rather than `0` keeps the box the same height. */
@media (max-width: 860px) {
.faq--v3 .faq__list { grid-template-columns: 1fr; }
.faq--v3 .faq__col:first-child .qa:last-child { border-bottom-color: transparent; }
}
/* La card sangra --faq-inset por fuera del contenedor; en desktop eso muere
en la calle interna y el margen del 94vw, pero con los gutters chicos de
tablet/teléfono el filete quedaba fuera del margen del sitio (la misma
lección de la landing de mobile). El padding devuelve el sangrado adentro:
la card cae exacto en el borde del contenedor. */
@media (max-width: 1024px) {
.faq--v3 .faq__list { padding-inline: var(--faq-inset, 22px); }
}
/* tipografía por ancho — dos columnas parten la medida en desktop; en
teléfono la composición apila y el cuerpo vuelve a crecer */
@media (max-width: 700px) {
.faq--v3 .faq__grid { padding-top: clamp(48px, 10vw, 96px); }
.faq--v3 .qa summary { font-size: 17px; }
.faq--v3 .qa__panel p { padding-right: var(--faq-inset, 10px); font-size: 16px; }
}
@media (min-width: 701px) {
.faq--v3 .qa summary { font-size: 16px; line-height: 24px; }
.faq--v3 .qa__panel p { font-size: 16px; line-height: 1.6; }
.faq--v3 { --faq-foot: 182px; }
}
/* ----------------------------------------------------------------------
Módulo CTA bajo el título (Figma Tests-email 389:3830)
Base del Figma: píldora oscura al 20% de negro, radio completo, y un
resplandor azul que sube del borde inferior — rgba(59,165,255,.3) al
centro, rgba(30,109,255,.09) al 42%, transparente al 70%, elipse 130x39.
El hover está calcado del gesto de la referencia (threeui sylva), mirado
cuadro a cuadro con y sin hover. Lo que hace NO es un resplandor interno:
· el BORDE se enciende como un filete especular, con un punto de luz
que recorre el anillo;
· un BLOOM sale hacia afuera, por debajo sobre todo;
· la píldora crece apenas.
Y casi no sigue al puntero — comparando dos posiciones de hover el filete
es prácticamente el mismo. Por eso el puntero aquí sólo inclina el brillo,
no lo arrastra: mandar la luz detrás del mouse se veía más "linterna" que
vidrio.
Su versión corre en WebGL (cada botón tiene su canvas .liquid-fx y el
botón real lleva `background: none`). Esto no es su implementación: es el
mismo gesto en CSS — un anillo enmascarado de 1px sobre un cónico que
gira, más box-shadow para el bloom. Sin canvas ni dependencias.
---------------------------------------------------------------------- */
@property --faqcta-a { syntax: ""; inherits: false; initial-value: 0deg; }
@property --faqcta-x { syntax: ""; inherits: false; initial-value: 50%; }
/* el módulo sube (user 2026-08-26): el aire sobre él baja un 80% — de 88 a
18px, que lo escribe appfaq.js como padding del grid — y lo que se le
quita arriba se le suma abajo, para separarlo de las preguntas. */
.faq--v3 .faq__cta { display: flex; justify-content: center; margin-bottom: clamp(72px, 10vh, 112px); }
/* El módulo se sube con margen, no con el padding del grid: appfaq.js ya
clampea ese padding a 0 y aquí ya estaba en 0 — el título flota 95px por
encima del grid, así que la cuenta daba negativa y el módulo ya estaba lo
más arriba que la caja permite. Los -20 llevan el hueco visible de 38 a
18, que es el 80% menos pedido. Sólo en desktop: en teléfono la cabecera
vuelve al flujo y esto la pisaría. */
@media (min-width: 701px) { .faq--v3 .faq__cta { margin-top: -20px; } }
.faq--v3 .faqcta {
position: relative;
display: flex; align-items: center; gap: 16px;
padding: 10px 10px 10px 19px; /* left +20% (user 2026-08-26): el label respiraba menos que el boton */
border-radius: 9999px;
background: rgba(0, 0, 0, .2);
border: 1px solid rgba(255, 255, 255, .10);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
isolation: isolate;
/* magnético (user 2026-08-26): appfaq.js escribe --tx/--ty con la
distancia del puntero al centro, y el transform los COMPONE con el
scale del hover — si el JS escribiera element.style.transform pisaría
al hover y viceversa. La transición con leve overshoot es el resorte:
amortigua el arrastre mientras el puntero se mueve y devuelve la
píldora con un rebotecito al salir. */
transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0);
transition: transform .45s cubic-bezier(.3, 1.3, .5, 1),
border-color .5s var(--ease),
box-shadow .5s var(--ease), background-color .5s var(--ease);
}
/* EL FILETE GIRATORIO — estado por DEFECTO, no hover (user 2026-08-26).
El anillo se pinta enmascarando la caja contra su propio content-box:
queda sólo el 1px del borde, y ahí abajo va un cónico que gira. El
`padding` define el grosor.
Tirado al azul y no al blanco: sobre este fondo el blanco leía como un
borde de UI, y el azul lo emparenta con el resplandor del Figma. */
.faq--v3 .faqcta::before {
content: ""; position: absolute; inset: 0; border-radius: inherit;
padding: 1px;
background: conic-gradient(from var(--faqcta-a),
rgba(120,180,255,0) 0deg,
rgba(110,180,255,.45) 34deg,
rgba(190,225,255,.92) 62deg,
rgba(90,160,255,.55) 96deg,
rgba(120,180,255,0) 150deg,
rgba(120,180,255,0) 360deg);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: faqcta-spin 5.2s linear infinite;
transition: opacity .45s var(--ease);
pointer-events: none;
}
/* en hover no se enciende: ya estaba encendido. Se acelera y sube el brillo. */
.faq--v3 .faqcta:hover::before { animation-duration: 2.8s; }
@keyframes faqcta-spin { to { --faqcta-a: 360deg; } }
/* la luz de adentro. Dos capas: la del Figma, fija al pie, y la del hover.
La del hover está calcada del close-up de la referencia (user 2026-08-26):
NO son manchas radiales — es una BANDA que ocupa casi todo el ancho de la
píldora, abrazada al borde inferior, con el núcleo casi blanco y el propio
borde de abajo encendido como una línea. Tres capas, de arriba de todo
hacia abajo: la línea del borde, el núcleo ancho y brillante, y el cuerpo
que sube hasta media altura. Quieta y centrada, como en el ejemplo — el
seguimiento del puntero se probó y leía a linterna, no a vidrio. En azul
(pedido explícito), con el núcleo empujado hacia blanco como allá. */
.faq--v3 .faqcta__glow {
position: absolute; inset: 0; border-radius: inherit; z-index: -1;
overflow: hidden; pointer-events: none;
}
.faq--v3 .faqcta__glow::before,
.faq--v3 .faqcta__glow::after {
background:
/* la línea del borde inferior */
linear-gradient(0deg, rgba(215,240,255,.75) 0%, rgba(215,240,255,0) 9%),
/* el núcleo: ancho, bajo, casi blanco — su centro es --faqcta-x, que la
animación mece de lado a lado (los rayos se probaron y no cerraron;
en su lugar la luz VIVA es esto: la banda de siempre, respirando) */
radial-gradient(82% 30% at var(--faqcta-x, 50%) 102%,
rgba(205,232,255,.78) 0%, rgba(150,205,255,.30) 52%, rgba(120,185,255,0) 76%),
/* el cuerpo la sigue a medio paso, para que no viaje como un bloque */
radial-gradient(105% 68% at calc(50% + (var(--faqcta-x, 50%) - 50%) / 2) 106%,
rgba(95,175,255,.40) 0%, rgba(45,125,255,.15) 48%, rgba(30,109,255,0) 78%);
opacity: 0; transition: opacity .5s var(--ease);
}
/* el vaivén sólo corre en hover — a opacidad 0 sería pintar de gusto */
.faq--v3 .faqcta:hover .faqcta__glow::after {
animation: faqcta-sway 4.2s ease-in-out infinite;
}
@keyframes faqcta-sway {
0% { --faqcta-x: 50%; }
28% { --faqcta-x: 43%; }
72% { --faqcta-x: 57%; }
100% { --faqcta-x: 50%; }
}
.faq--v3 .faqcta:hover .faqcta__glow::after { opacity: 1; }
/* el bloom hacia afuera */
.faq--v3 .faqcta:hover {
transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) scale(1.02);
border-color: rgba(150,195,255,.22);
background-color: rgba(90,150,255,.05);
box-shadow: 0 12px 48px -10px rgba(70,150,255,.50),
0 0 76px -16px rgba(120,185,255,.28);
}
/* El anillo que se expande — el "expandido" del botón de play de la
referencia. Medido ahí: el botón es 57x57 y su canvas 255x255, o sea 4,5x,
que es el aire que necesita para crecer.
Crece por INSET, no por scale (user 2026-08-26). Escalar un pill deforma
su radio: el `border-radius: 9999px` está capado a la mitad de la altura,
así que al agrandarlo las esquinas se estiran y el anillo deja de ser
paralelo al módulo. Animando el inset la línea se aleja en paralelo y
queda proporcional a cualquier tamaño, en desktop y en teléfono.
UN solo anillo, no dos: con dos desfasados se veían dos líneas a la vez y
leía como un blanco de tiro. */
.faq--v3 .faqcta__rings {
position: absolute; inset: 0; border-radius: inherit;
pointer-events: none; z-index: -1;
}
.faq--v3 .faqcta__rings::before {
content: ""; position: absolute; inset: 0; border-radius: inherit;
border: 1px solid rgba(190, 220, 255, .55);
opacity: 0;
}
/* el pulso corre SIEMPRE (user 2026-08-26): el módulo respira solo. Lo que
queda reservado al hover es lo de adentro — la luz y el crecimiento. */
.faq--v3 .faqcta__rings::before {
animation: faqcta-ring 3.2s var(--ease) infinite;
}
.faq--v3 .faqcta:hover .faqcta__rings::before { animation-duration: 2.4s; }
@keyframes faqcta-ring {
0% { inset: 0; opacity: .55; }
70% { opacity: .10; }
100% { inset: -26px; opacity: 0; }
}
.faq--v3 .faqcta__label {
/* same type as the button beside it, colour apart (user 2026-08-28):
16/24/584, tracking INHERITED like the button's (declaring it in em
re-resolves at 16px and lands 0.01px off the button's computed value) —
the 20px/-2% it had made the pair read as two different voices */
font-size: 16px; line-height: 24px; font-weight: 584;
color: rgba(255, 255, 255, .9); white-space: nowrap;
}
.faq--v3 .faqcta__btn {
flex: none;
padding: 10px 16px; border-radius: 9999px;
background: #fff; color: #000;
font-size: 16px; line-height: 24px; font-weight: 584; white-space: nowrap;
/* el botón tira un 35% extra hacia el puntero: dos capas moviéndose a
velocidades distintas es lo que hace leer el conjunto como imán y no
como un simple translate */
transform: translate3d(calc(var(--tx, 0px) * .35), calc(var(--ty, 0px) * .35), 0);
transition: transform .45s cubic-bezier(.3, 1.3, .5, 1), box-shadow .4s var(--ease);
}
.faq--v3 .faqcta:hover .faqcta__btn {
transform: translate3d(calc(var(--tx, 0px) * .35), calc(var(--ty, 0px) * .35), 0) scale(1.03);
box-shadow: 0 0 22px -4px rgba(255,255,255,.5);
}
/* En teléfono el módulo sigue en UNA línea, como en desktop (user
2026-08-26) — antes se apilaba en columna. Se compacta lo justo para
que label + botón entren en los 343px de un viewport de 375 con los
gutters de 16; el nowrap del label queda, que es lo que garantiza la
línea única. */
@media (max-width: 560px) {
.faq--v3 .faqcta { gap: 12px; padding: 8px 8px 8px 17px; }
.faq--v3 .faqcta__label { font-size: 14px; line-height: 22px; }
.faq--v3 .faqcta__btn { padding: 8px 14px; font-size: 14px; line-height: 22px; }
}
/* el compacto mide 298px — en un viewport de 320 con gutters de 16 hay
288 disponibles, así que falta un escalón más */
@media (max-width: 360px) {
.faq--v3 .faqcta { gap: 10px; padding: 8px 8px 8px 14px; }
.faq--v3 .faqcta__label { font-size: 13px; }
.faq--v3 .faqcta__btn { padding: 8px 12px; font-size: 13px; }
}
/* Acá el head está en flujo (en mobile es absolute y el módulo se ubica con
márgenes negativos contra el padding del grid): la distancia medida del
sistema es título→módulo 27px y módulo→preguntas 72px, declarada directo. */
.faq--v3 .faq__cta { margin-top: 32px; margin-bottom: 72px; } /* 27 + 20% (user 2026-08-26) */
@media (min-width: 701px) { .faq--v3 .faq__cta { margin-top: 32px; } }
@media (max-width: 700px) { .faq--v3 .faq__cta { margin-top: 22px; margin-bottom: 56px; } }
/* --- The tail of the FAQ section (2026-09-21).
Air above only: .faq--v3 already ends on its 200px --faq-foot, and a
margin under the line would double it. The link is held to one line —
.link-arrow draws its underline as an absolutely positioned bar across
the whole box, so a link that wrapped would get ONE rule spanning both
lines instead of two. --- */
.faq--v3 .faq__more {
margin: clamp(56px, 7vh, 88px) 0 0;
text-align: center;
font-size: 16px; line-height: 24px;
color: rgba(255, 255, 255, .62);
}
/* a hair more than the word space it inherits (user 2026-09-21): at a plain
space the question and the link read as one run of text. The margin sits
OUTSIDE the link box, so .link-arrow's underline — an absolutely
positioned bar at left:0/right:0 — does not stretch under the gap. */
.faq--v3 .faq__more .link-arrow { font-size: inherit; white-space: nowrap; margin-left: .35em; }
/* 44px of touch on a 24px line (user 2026-09-21), invisibly. NOT padding:
.link-arrow is an inline-BLOCK, so vertical padding would grow its line box
and push the section's foot down — and it would drag the underline with it,
since ::after is pinned to the bottom of that box. This is a transparent
::before instead: absolutely positioned inside the link (which is already
position:relative for the underline), so it adds nothing to layout and
leaves ::after where it is. Height only — left/right stay on the link's own
edges, so the strip never reaches over "Still have questions?" beside it,
and the 10px it gains above and below fall in the empty air between the
last question and the section's 200px foot. */
.faq--v3 .faq__more .link-arrow::before {
content: "";
position: absolute;
left: 0; right: 0; top: 50%;
height: 44px;
transform: translateY(-50%);
}
@media (max-width: 700px) { .faq--v3 .faq__more { margin-top: 44px; } }
@media (prefers-reduced-motion: reduce) {
.faq--v3 .faq__gl { display: none; }
.faq--v3.faq--gl-live .faq__still { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.faq--v3 .faqcta, .faq--v3 .faqcta__btn { transition: none; transform: none; }
.faq--v3 .faqcta:hover { transform: none; }
.faq--v3 .faqcta:hover::before { animation: none; }
}
/* ---------- the rendered scroll clip (user 2026-08-28) ----------
Replaces .phero__zoom's three layers and the .phero__hi frame: the camera
move is in the render, main.js only seeks it. Sized to cover the pin, since
the sequence ends full-bleed on the course rather than on a plate. */
.phero__media:has(.phero__scroll) {
/* the clip owns the pin: the sequence ends full-bleed on the course, so it
needs the whole frame, not the 1450px plate the old layers sat on. The
old negative margin went with them — that ate the dead space above the
bay in the previous canvas, which this render does not have. */
position: absolute;
inset: 0;
width: auto;
margin: 0;
z-index: 1;
}
.phero__scroll {
display: block;
width: 100%;
height: 100%;
/* contain, not cover: cover would crop the early frames, where the bay is
small and high in the frame. The letterbox lands on the section's own
black, so it is invisible. */
object-fit: contain;
}
/* Phones: no pin, no scrub (user 2026-09-17 — the scrubbed clip stuttered
on mobile). main.js swaps the video for its poster below this same
breakpoint; here the section falls back into flow and the still is
oversized and offset so the bay itself fills the width. The poster is the
16:9 render with the bay sitting in roughly x 24-76%, y 43-92% of the
frame, so 180% width centres it and the top offset (a share of the 3:2
box's height) lifts the dead air above the enclosure out of view. */
@media (max-width: 700px) {
.phero { height: auto; }
.phero__pin {
position: relative;
height: auto;
padding-bottom: 0; /* the statement below closes the section; .fsx brings its own top padding */
}
.phero__dim { display: none; }
/* "Play real courses" comes back on phones as a plain title + lede between
the still and the course cards (user 2026-09-18) — on desktop it lands
over the last frames of the dive, which a phone never plays. It repeats
the pair above the still rather than adding a third size: the words take
the H1's ramp, the copy the hero lede's.
!important on opacity/transform: js never writes them at this width on a
phone, but a desktop window narrowed after load still carries the
scrub's inline values, and the title would sit at opacity 0. */
.phero__playreal {
display: block;
position: relative; /* in flow; positioned only so it can sit over the beams */
inset: auto;
z-index: 1;
padding: 80px 16px 0; /* the still -> the statement (user 2026-09-18: doubled from 40) */
text-align: center;
/* the pin's beams are masked around 62% of its height and clipped at its
bottom edge, which used to fall against the still. With the section
now ending under this copy the clip showed as a hard blue edge on the
right, so the block fades the beams to black over its top padding and
the words sit on clean black. */
background: linear-gradient(to bottom, transparent, var(--black) 80px);
/* the H1's ramp sits on the box, not on the two spans, so the space
BETWEEN them is set in it too — at the body size it read as
"Play realcourses" */
font-size: clamp(3.2rem, 8.5vw, 6rem); /* = .hero__title */
font-weight: 700;
line-height: 1.25;
letter-spacing: -.02em;
}
.phero__pl1, .phero__pl2 {
position: static;
display: inline;
font-size: inherit;
line-height: inherit;
letter-spacing: inherit;
word-spacing: normal;
white-space: normal;
color: inherit;
opacity: 1 !important;
transform: none !important;
will-change: auto;
}
.phero__plcopy {
position: static;
translate: none;
width: auto;
max-width: 64ch;
margin: 1.4rem auto 0;
font-size: clamp(1.1rem, 1.4vw, 1.25rem); /* = .hero__lede */
font-weight: 500;
line-height: 1.5;
letter-spacing: 0;
text-wrap: balance; /* keeps "in 4K." from sitting alone on the last line */
color: var(--ink-d2);
opacity: 1 !important;
transform: none !important;
will-change: auto;
}
.phero__media:has(.phero__scroll) {
position: relative;
inset: auto;
width: 100%;
aspect-ratio: 3 / 2;
margin-top: 28px;
overflow: hidden;
}
.phero__scroll {
position: absolute;
left: -40%;
top: -52%;
width: 180%;
height: auto;
max-width: none;
aspect-ratio: 16 / 9;
object-fit: contain;
transform: none;
}
}
@media (max-width: 480px) {
/* the H1 drops to its one-line phone ramp here; the statement follows it */
.phero__playreal { font-size: clamp(1.9rem, 8vw, 3.9rem); }
}
/* The button's display style must not override its initial/recovery hidden state. */
[data-course-retry][hidden] { display: none; }