(session-local). */
.ctabs__vid {
display: block;
width: 100%;
height: auto;
}
.ctabs__vid[hidden] { display: none; }
.ctabs__vid {
-webkit-mask-image: url("../assets/ctabs-tee-mask.png");
mask-image: url("../assets/ctabs-tee-mask.png");
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
/* Rise + settle as the band comes into view, matching the copy's reveal.
Built on the INDEPENDENT translate/scale properties, not `transform`:
.reveal animates transform, and the stage already spends transform on its
own translateY(-50%) centring — sharing the property would cancel it. */
.ctabs__stage {
translate: 0 34px;
scale: .955;
opacity: 0;
transition: translate 1s var(--ease), scale 1s var(--ease), opacity .8s var(--ease);
}
.ctabs__stage.is-in { translate: 0 0; scale: 1; opacity: 1; }
/* NOTE: the plate deliberately has NO tab-swap animation (chris 2026-08-24).
It was dipped and re-expanded on every switch for a while; the tablet
holding still while the clip restarts under it reads cleaner. The sub-copy
still carries the swap. */
@media (prefers-reduced-motion: reduce) {
.ctabs__stage { transition: none; translate: none; scale: 1; opacity: 1; }
}
/* the sub-copy is a .lede in every respect but its centring — same ramp,
leading, tracking, weight and dim-on-dark colour, so it sits on the site
scale instead of the comp's bespoke 24/32 584 */
.ctabs__cap {
position: relative; /* z-index is inert on a static box, and the
stage above it is z:1 — this is what puts
the copy in front of the plate on phones */
z-index: 3;
font-weight: 400;
line-height: 1.42;
letter-spacing: -.013em;
text-align: center;
color: var(--ink-d2, #a8abb4);
}
/* Both captions share ONE grid cell, so the box is always as tall as the
TALLER of the two at every width (user 2026-08-27). Each tab's copy runs a
different length and wraps to 2 or 3 lines depending on the viewport, so
switching tabs used to reflow the section — the JS already deferred the
reflow by 220ms with a timer, but the jump was still there. Reserving the
max kills it at the root, with no per-breakpoint min-height to re-tune.
The font-size lives HERE and the s inherit it: the breakpoints'
`max-width: 42ch` is declared on this box, and ch is measured against ITS
font-size. */
.ctabs__caps {
position: relative;
z-index: 3;
display: grid;
font-size: clamp(1.12rem, 1.9vw, 1.4rem);
}
.ctabs__caps > .ctabs__cap { grid-area: 1 / 1; }
/* Contrast veil behind the copy (user 2026-08-27). The cloud field
(clouds.js, #dbe9ff up to alpha .72) lifts the background luminance right
under this line: measured, at just 25% density the text drops from 6.35:1
to 4.50:1, and in dense fog to 1.58:1 — well below AA.
Lowering the clouds' alpha does not solve it (not even .30 clears dense
fog) and it changes the whole band, so the veil goes local and ON TOP of
them. At .66 the worst case is 4.9:1 and the best 7:1.
Full-bleed across, fading only vertically: that is the same language as the
section's top and bottom scrims, so it does not read as a smudge — a radial
would be cut off against .ctabs' edges (overflow: clip). */
.ctabs__caps::before {
content: "";
position: absolute;
z-index: -1; /* behind the text, in front of the clouds */
left: 50%;
top: 50%;
width: 100vw;
height: 380%; /* height is set by the TALLER caption */
transform: translate(-50%, -50%);
pointer-events: none;
background: linear-gradient(to bottom,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, .22) 18%,
rgba(0, 0, 0, .55) 30%,
rgba(0, 0, 0, .66) 38%,
rgba(0, 0, 0, .66) 62%,
rgba(0, 0, 0, .55) 70%,
rgba(0, 0, 0, .22) 82%,
rgba(0, 0, 0, 0) 100%);
}
/* visibility, not display: the inactive line keeps its box (and therefore the
row's height) but still leaves the accessibility tree */
.ctabs__cap[hidden] { display: block; visibility: hidden; }
/* tab swap: the line lifts out and the next one rises in. Built on the
independent translate property, not transform — .reveal animates transform
and would cancel it. The out leg is 220ms (matched to the JS timer that
un-flows the old line), the in leg 520ms so it settles.
The two legs get different curves rather than the site ease. var(--ease) is
.22,.61,.36,1 — it leaves the start line fast, which is what read as a jolt
on the way in. The entry now uses a soft-start/soft-stop curve so the line
gathers speed instead of snapping, and the exit uses an ease-IN so the old
line accelerates away rather than dawdling.
The line also EXPANDS as it fades in — scale .972 -> 1 — so the swap reads as
the copy opening up rather than just sliding. Built on the independent scale
property for the same reason translate is: transform belongs to .reveal.
transform-origin sits at the top centre so the block grows downward from a
fixed first baseline instead of drifting up into the tablet.
(chris 2026-08-24) */
.ctabs__cap {
transform-origin: 50% 0;
transition: opacity .52s cubic-bezier(.33, 0, .2, 1),
translate .52s cubic-bezier(.33, 0, .2, 1),
scale .52s cubic-bezier(.33, 0, .2, 1);
}
.ctabs__cap.is-leaving {
opacity: 0;
translate: 0 -9px;
scale: 1.012; /* keeps opening on the way out, so the two
lines never look like one sliding block */
transition: opacity .22s cubic-bezier(.4, 0, .85, .5),
translate .22s cubic-bezier(.4, 0, .85, .5),
scale .22s cubic-bezier(.4, 0, .85, .5);
}
.ctabs__cap.is-entering {
opacity: 0;
translate: 0 12px;
scale: .972;
transition: none;
}
@media (prefers-reduced-motion: reduce) {
.ctabs__cap,
.ctabs__cap.is-leaving,
.ctabs__cap.is-entering {
transition: none; translate: none; scale: 1; opacity: 1;
}
}
/* ---------- corner card (user 2026-08-25) ----------
A get-the-app prompt in the hero's bottom-right corner, in the site's own
card language rather than the reference's: our --r-card radius, the hairline
the dark surfaces use, and the store glyphs already pulled out of the badge
SVGs (they are currentColor, so the buttons tint them). */
.getcard {
position: absolute;
z-index: 4; /* over the render, over the copy column */
/* tight to the corner and compact on purpose: the render's phone reaches
into this side of the frame, and every px the card gives back is a px of
the phone's readouts it would otherwise cover.
The card lives in the copy column (so it can flow with the copy on
phones), but the corner it wants is the SECTION's — hence the negative
right: it backs out of the column's own inset to reach the frame edge. */
right: calc(clamp(16px, 2.6vw, 40px) - (100vw - min(1100px, 92vw)) / 2);
bottom: clamp(18px, 3vh, 40px);
/* one word and two buttons: let it be as small as its content, so the
render keeps as much of the frame as possible */
width: fit-content;
padding: 18px 20px 20px;
border: 1px solid rgba(255, 255, 255, .12);
border-radius: var(--r-card, 28px);
/* glass, not a flat slab: the aerial and the cloud field both move behind
this, and a solid panel would read as a hole punched in them */
background: rgba(9, 11, 10, .58);
-webkit-backdrop-filter: saturate(150%) blur(18px);
backdrop-filter: saturate(150%) blur(18px);
}
.getcard__copy {
margin: 0 0 14px;
font-size: clamp(14px, 1.05vw, 16px);
line-height: 1.2;
text-align: center;
color: var(--ink-d1, #f5f5f6);
opacity: .82;
}
/* the QR sits on a white tile: the card is near-black, and an inverted code
(light modules on dark) is read by fewer scanners than the conventional
dark-on-light. Same width as the button row below it. */
.getcard__qr {
display: block;
width: 120px;
height: 120px;
margin: 0 auto 12px;
padding: 8px;
border-radius: 12px;
background: #fff;
}
.getcard__btns { display: flex; gap: 12px; }
.getcard__btn {
display: grid;
place-items: center;
width: 54px;
height: 54px;
border: 1px solid rgba(255, 255, 255, .14);
border-radius: var(--r-panel, 18px);
background: rgba(255, 255, 255, .05);
color: #fff;
transition: background .25s var(--ease), border-color .25s var(--ease),
transform .25s var(--ease);
}
.getcard__btn:hover {
background: rgba(255, 255, 255, .11);
border-color: rgba(255, 255, 255, .3);
transform: translateY(-2px);
}
.getcard__btn img {
display: block;
width: 24px;
height: auto;
/* both glyphs pure white: icon-googleplay.svg ships the store's four-colour
mark, and one coloured button next to a white one reads as a mistake */
filter: brightness(0) invert(1);
}
/* phones: no corner to tuck into — a floating card would sit on the devices.
It is the hero's only download now, so it joins the copy column as a block
rather than dropping out. Has to come AFTER the rules above, not in the
hero's own phone block further up the sheet, or the desktop card wins on
source order. */
@media (max-width: 700px) {
/* The card is out on phones and the pills under the copy are the download
(user 2026-09-01). The card was already QR-less and static here, i.e. a
dark slab in the copy column doing what two capsules do more plainly.
The pills inherit the auto-margin trick the card had: `margin: auto auto 0`
is what centers the copy block and drops the download toward the devices,
so it moves onto the row that replaced it. */
.getcard { display: none; }
.mhero-b__stores {
display: flex;
justify-content: center;
/* order:0 undoes the `order:5` the generic .mhero__ctas phone rule carries
for the OTHER hero — it would drop the pills below the scenehold, i.e.
under the devices and off the fold. 0 restores DOM order: under the
lede, above the render. */
order: 0;
margin: auto auto 0;
}
}
/* tablets (user 2026-08-31): the devices grow 15% (16vw side inset → 11vw) and
ride 20% of their own height higher (the ~8vh added to the gap), and the
copy centers between the bar and the ANIMATION's visible top — the corner
card is out of flow here, so the second auto margin lands on the scenehold.
For the centering to aim at the devices and not at an empty box, the
scenehold is sized to exactly the rendered art plus the gap under it. */
@media (min-width: 701px) and (max-width: 1068px) {
/* the art is sized by BOTH axes: 11vw of side inset is the wide-viewport
look, and the svh cap reins it in on short windows — landscape tablets
and squat desktop windows were growing the render taller than the space
left under the bar + copy, gluing the tablet to the lede.
--hero-copy ≈ the copy block's height; it is a hand-measured stand-in
(the JS-measured --copy-h cannot be used here: it depends on the auto
margins, which depend on the scenehold, which would depend on it). */
.mhero--b {
--hero-copy: 310px;
/* the ×1.3 cap and the gap's 32px floor work as a pair: bigger art,
seated lower, at the cost of a slight dip past the fold on the
shortest windows. On tall windows neither term binds: gap stays
13.5vh, side stays 11vw (user 2026-08-31) */
--hero-artmax: max(364px, (78svh - var(--hero-copy)) * 1.3);
--hero-side: max(11vw, (100vw - var(--hero-artmax) * var(--hero-ar)) / 2);
--hero-art: calc((100vw - 2 * var(--hero-side)) / var(--hero-ar));
--hero-gap: clamp(32px, min(13.5vh, 100svh - 74px - var(--hero-copy) - var(--hero-art)), 170px);
}
/* +20% optical air between the wordmark and the headline (user 2026-08-31;
supersedes the 2026-08-27 note further down that kept tablets tight) */
.mhero--b .hero__title { margin-top: 8px; }
.mhero-b__scenehold {
margin-top: auto;
min-height: calc(var(--hero-art) + var(--hero-gap));
}
/* portrait tablets only: the corner card and the phone wanted the same
~83px (768x1024 covered the readout column). The 56px paint-time
`translate` does nearly all the clearing (--copy-h and the copy centering
are untouched, and it composes with the JS parallax, which writes
`transform`); the tighter padding buys the last 8px — the card's width is
set by its 120px button row, so shrinking the QR would buy nothing. What
remains overlaps only the phone's bezel (verified 2026-08-31 at 768x1024:
the readout column clears the card). Landscape stays centered: the card
is clear there. */
@media (orientation: portrait) {
.mhero-b__plate--fg { translate: -56px 0; }
.getcard { padding: 14px 16px 16px; }
}
}
/* ---- stacked ----
The switch is at 1068, NOT 1000: that is where .why__grid in the drills
section above drops from three columns to one (styles.css BREAKPOINTS), so
the two sections change shape on the same line.
Every negative margin went with the plate PNG: the video is cropped flush to
the chassis, so its box IS the tablet and the gaps are simply gaps. The
tablet runs wider here than the reference's 49% — at 393px, 49% would be a
thumbnail. */
@media (max-width: 1068px) {
/* same two constraints as desktop — the plate is wider here, so without the
vh term a short landscape window cut the head or the copy off */
.ctabs__stage {
width: clamp(62%, calc((100vh - 470px) * 1.875), 88%);
width: clamp(62%, calc((100svh - 470px) * 1.875), 88%);
margin-top: clamp(18px, 4.3vw, 38px);
}
.ctabs__caps {
margin: clamp(16px, 3.8vw, 35px) auto 0;
max-width: 42ch;
padding-inline: 24px;
}
}
/* ---- desktop (>=1069, i.e. while the drills grid above is still a row) ----
Flow layout, not absolute. The previous build pinned every element to a
percentage of a fixed 1725/1150 box. That only held while the head's clamp
was capped (>=1333px); below that the head grew with vw faster than its
fixed slot and ran into the tabs. Here every element sits in normal flow and
the gaps are proportional to --frame, measured off the element above — so
the head can be any height and nothing can collide.
Since the plate became a video cropped flush to the chassis there is no
transparent art left to cancel, so these are plain positive gaps. */
@media (min-width: 1069px) {
.ctabs__head { position: relative; z-index: 3; }
/* Sized off the reference (49% of the frame) but stepped down to 42% and
given a SECOND constraint: the height left over once the head, tabs and
sub-copy have taken their share. Without it the band ran 1292px tall at
the comp width, so on any normal laptop viewport either the headline or
the copy was always cut off on the way past. The vh term keeps the whole
composition inside the window; the frame term stops it inflating on tall
ones. 1.306 is the plate's own aspect. (chris 2026-08-24) */
.ctabs__stage {
position: relative;
width: clamp(calc(var(--frame) * .39),
calc((100vh - 536px) * 1.875),
calc(var(--frame) * .51));
width: clamp(calc(var(--frame) * .39),
calc((100svh - 536px) * 1.875),
calc(var(--frame) * .51));
margin-top: calc(var(--frame) * .019);
}
.ctabs__caps {
width: calc(var(--frame) * .4325); /* 746/1725 */
max-width: 100%;
margin: calc(var(--frame) * .018) auto 0;
padding: 0 24px;
}
}
@media (prefers-reduced-motion: reduce) {
.ctabs__thumb { transition: none; }
}
/* ======================================================================
FAQ · "FAQs" composition (Figma 1458:7888, shipped 2026-08-26)
Replaces the light two-column FAQ with the dark one: the blurred studio
plate as ground, the hand+phone mockup over it, "FAQs" set large and
centred BEHIND that mockup, and the eight rows split into two columns.
Everything is scoped to .faq--v3 so the base .faq / .qa rules in
styles.css (2552-2609) stay exactly as they are — this is a layer on
top, not a rewrite, and pulling the modifier off the section restores
the old light block untouched.
====================================================================== */
.faq--v3 {
position: relative;
overflow: hidden;
padding: 0 0 var(--faq-foot, 260px);
background: var(--black);
/* Igualado al padding vertical (user 2026-08-26). El
inset no le cuesta ancho al texto — la card sangra hacia afuera lo
mismo que el texto padea hacia adentro, así que la línea de la
pregunta no se acorta. Lo que sí consume es aire entre columnas, y
eso dejó de importar al pasar a solo-una-abierta: nunca hay dos
cards visibles lado a lado. */
--faq-inset: 22px; /* = el padding vertical del summary (26-4), para que
el texto quede a la misma distancia de los cuatro
bordes de la card (user 2026-08-26) */
}
/* --- ground. NOT a gradient though it renders as one: it is a studio
plate under a ~213px blur. The plate is 222%-wide in the Figma's own
framing, hung off the left edge — that offset is what puts its bright
side under the FAQ column and its dark side under the headline.
Box and position are written by js/appfaq.js, because `top` and
`height` in percent would resolve against the section's HEIGHT, which
grows with every open row; these have to track its WIDTH. --- */
.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;
/* REQUIRED, not defensive: styles.css:87 ships `img, svg { max-width:
100% }`, which caps this plate at the section's width and destroys the
whole point of it — the 152%/-19% framing is what puts the photo's
bright side under the FAQ column and its dark side under the headline.
Measured before the fix: a 594px plate rendered 421px wide.
The same trap is already documented in this file at .compat, where it
capped a 135% lineup and shoved it off centre. */
max-width: none;
/* the radius has to SCALE with the section, not sit at a fixed 60px. A
CSS blur fades the element's own edges over roughly 3x its radius, and
the plate only overhangs by a fraction of the width — so at 1440 the
484px of right-hand overhang swallows a 180px fade, while at 390 the
overhang is 97px and a fixed 60px blur ate a visible black strip down
the edge. Proportional keeps the fade a constant fraction. */
filter: blur(var(--faq-blur-r, clamp(24px, 4.2vw, 60px)));
/* the blur samples past the element's own edges, which would bleed the
page's black in as a dark vignette; scaling up hides the fringe */
transform: scale(1.08);
}
.faq--v3 .faq__bg::after {
content: ""; position: absolute; inset: 0;
/* Three layers, bottom-up: a flat 10% black (the Figma's own), a 28%
scrim over it, and a black ramp down the top 62% (1112 of the Figma's
1781) which is what sinks the hand into black while the FAQ column
stays lit.
The 28% is not decoration — with the Figma's values alone the rows
measure 2.6:1 against the type, and AA wants 4.5:1 for 16px at weight
584 (the "large text" exemption starts at 24px, or 18.66px at 700). */
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);
}
/* --- the hand plate. Right-aligned at the Figma's own 1353/1440, which is
not a taste call: the word is centred in the section, so at a smaller
plate the centre lands on its empty left side and the overlap that the
whole composition depends on never happens. --- */
.faq--v3 .faq__hand {
position: relative; z-index: 3;
display: flex; justify-content: flex-end;
pointer-events: none;
padding-top: clamp(20px, 4vh, 56px);
}
.faq--v3 .faq__hand img {
width: min(1353px, 94vw); height: auto; display: block;
max-width: none; /* styles.css:87, same trap */
/* scroll parallax, written by js/appfaq.js. No clipping window and no
scale: the plate is an alpha cutout on black, so there is no window
edge to protect and the travel is not capped by faked slack. */
transform: translate3d(0, var(--faq-par, 0px), 0);
will-change: transform;
}
/* --- head + list --- */
.faq--v3 .faq__grid {
position: relative; z-index: 1;
display: block;
padding-top: var(--faq-head-pad, 0px);
}
.faq--v3 .faq__head {
position: absolute; left: 0; right: 0;
top: var(--faq-title-y, 0px);
z-index: 2; /* over the ground, UNDER the hand */
text-align: center;
pointer-events: none;
}
.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
this is THE title-to-questions gap, and it is Premier's rule verbatim
(user 2026-09-04, "replicate the relationship"). On desktop appfaq.js
reads this value, zeroes it inline and carries it as grid padding
instead — a margin here would collapse through the block grid — or,
when the head floats too far above the grid, slides the grid up under
it; see place(). On phones the head is in flow and drops its own
margin-bottom, so this margin is the whole gap. */
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;
}
/* asterisk footnote under an answer (user 2026-09-04): a step smaller and
quieter than the answer, tucked up under the paragraph it qualifies — the
answer's own bottom padding would otherwise hold it ~22px away. */
.faq--v3 .qa__panel .qa__note {
margin-top: -12px;
font-size: 13px;
line-height: 1.5;
color: rgba(255, 255, 255, .45);
}
/* 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 ese
sangrado muere en la calle interna y en los 43px de margen del 94vw;
con los gutters chicos de tablet/teléfono se comía el margen del sitio
entero (16px de gutter - 22 de sangrado = filete FUERA de la pantalla).
El padding devuelve el sangrado adentro de la lista: la card y su
hairline caen exacto en el borde del contenedor — el mismo borde que
las why-cards — y el texto conserva sus 22px de aire interno. */
@media (max-width: 1024px) {
.faq--v3 .faq__list { padding-inline: var(--faq-inset, 22px); }
}
/* On a phone the overlap is dropped: it only ever worked because the plate
was wide enough for the word to land on the wrist. Stack it literally —
a BIGGER hand on top, clear air, the word, the list. js/appfaq.js stops
writing --faq-title-y and --faq-head-pad below 700 to match. */
@media (max-width: 700px) {
.faq--v3 .faq__hand { justify-content: center; padding-top: 0; }
.faq--v3 .faq__hand img { width: 132vw; max-width: none; }
.faq--v3 .faq__grid { padding-top: clamp(28px, 7vw, 56px); }
.faq--v3 .faq__head { position: static; margin-bottom: 0; } /* the list's margin-top owns the gap, same as Premier (user 2026-09-04) */
.faq--v3 .qa summary { font-size: 17px; }
.faq--v3 .qa__panel p { padding-right: var(--faq-inset, 10px); font-size: 16px; }
/* the foot, -40% (user 2026-08-27): 260 -> 156. Phone block ONLY; from 701
up there is already its own 182 (the -30% from 2026-08-26) and that
decision stays untouched. */
.faq--v3 { --faq-foot: 156px; }
}
@media (min-width: 701px) {
/* two columns halve the measure, so 20px runs long */
.faq--v3 .qa summary { font-size: 16px; line-height: 24px; }
.faq--v3 .qa__panel p { font-size: 16px; line-height: 1.6; }
/* the foot, 30% tighter (user 2026-08-26). 260 -> 182. */
.faq--v3 { --faq-foot: 182px; }
/* ...and the seam with the section above pulled in. Measured on the page:
the 120px between the "Explore Foresight+" button and this section is
ALL of .thisis's own padding-bottom — none of it is ours — and .thisis
is shared with other pages, so it cannot be the thing that changes.
A negative margin here is the scoped equivalent: it lifts this section
over that empty padding without editing anyone else's rule.
Verified safe first: the only thing living in that 120px band is the
CTA's own , which ends 15px in, leaving ~105px genuinely empty.
The perceived gap is larger than the CSS one — 201px, because the hand
plate's alpha is empty for its top 11% — so after the lift it still
reads as ~105px of air, which is a normal section break. */
.faq--v3 { margin-top: -96px; }
}
@media (prefers-reduced-motion: reduce) {
.faq--v3 .faq__hand img { transform: none; }
}
/* ----------------------------------------------------------------------
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 {
font-size: 20px; line-height: 1.2; font-weight: 584; letter-spacing: -.02em;
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: 16px; }
.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: 15px; }
.faq--v3 .faqcta__btn { padding: 8px 12px; font-size: 13px; }
}
@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; }
}
/* ======================================================================
AIR AROUND THE COURSES BAND, +40% ON PHONE / SMALL TABLET
(user 2026-08-27)
Neither of the two gaps comes from a single rule — each one is built by two
neighbouring sections. Measured at 733px:
top = .train padding-bottom 64 + .ctabs --padT 112 = 176px
bottom = .ctabs --padB 112 + .compat padding-top 86 = 198px
That is why the +40% is applied to all FOUR values rather than one: each gap
grows by exactly 40% (176->246, 198->277) and the proportion between the
scrim's runway and the neighbours' padding is preserved. .ctabs' scrim
follows on its own, since its stops are fractions of --padT/--padB.
====================================================================== */
@media (max-width: 820px) {
.train { padding-bottom: clamp(90px, 12.6vh, 168px); } /* x1.4 of 64/9vh/120 */
.ctabs {
--padT: clamp(157px, min(calc(var(--frame) * .154), 25.2vh), 280px);
--padB: clamp(157px, min(calc(var(--frame) * .154), 25.2vh), 280px);
}
.compat { padding-top: clamp(118px, 16.8vh, 224px); } /* x1.4 of 84/12vh/160 */
}
/* styles.css drops .compat to 64/9vh/92 below 640 — that one x1.4 too */
@media (max-width: 640px) {
.compat { padding-top: clamp(90px, 12.6vh, 129px); }
}
/* The air between the MOBILE wordmark and the headline, TRIPLED and PHONE
ONLY (user 2026-08-27): .35rem -> 1.05rem, i.e. 5.6 -> 16.8px. Then +20%
OPTICAL on top of that (user 2026-08-31): the optical gap is the margin
plus the h1's half-leading (~6px), so 16.8 + 6 = 22.8 x1.2 ≈ 27.4 →
margin 21.6px = 1.35rem. (Tablets moved separately the same day — their
8px lives in the 701-1068 hero block, superseding the 2026-08-27 rejection
noted here.)
MIND: this rule wins over the hero block's own margin-top by source order —
the phone value must be edited HERE, not there; a duplicate declared there
is dead on arrival, which is exactly how the 2026-08-31 first attempt
silently no-opped. */
@media (max-width: 700px) {
.mhero--b .hero__title { margin-top: 1.35rem; }
}
/* The gap between the drills cards and the courses band, +30% ON DESKTOP
(user 2026-08-27). As above, the gap is built by two sections: at 1440 it is
.train padding-bottom 81 + --padT 158.4 = 240px. Both x1.3 -> 105 + 206 =
311px, which preserves the proportion between the neighbour's padding and
the scrim's runway.
--padB gets the same clamp even though the bottom gap was not flagged:
asymmetric was tried (206 top / 158 bottom) and the band read unbalanced,
with a longer entry than exit. The scrim takes each ramp's length from its
own variable, so matching them keeps both seams at the same slope.
>=1069 is where .ctabs returns to its desktop layout; from 820 down the
mobile block and its +40% takes over. */
@media (min-width: 1069px) {
.train { padding-bottom: clamp(83px, 11.7vh, 156px); } /* x1.3 de 64/9vh/120 */
.ctabs {
--padT: clamp(146px, min(calc(var(--frame) * .143), 23.4vh), 260px);
--padB: clamp(146px, min(calc(var(--frame) * .143), 23.4vh), 260px);
}
}
/* See-your-game's plate, flat black ON DESKTOP (user 2026-08-27).
The gradient ended at #06070a right against .train, which is flat #000: a
6/7/10-per-channel step, and a blue-tinted one at that (the B channel rises
10 against red's 6), so the bottom seam read as a line.
Scoped to >=1001 because that is where the card lifts off: from 1000 down it
has padding 0 and radius 0, covers the plate on all four sides and the
gradient is never visible — changing it there or not makes no difference. */
@media (min-width: 1001px) {
.deck--see { background: #000; }
}
/* Short phones (SE, older Androids): the dedicated max-height block that
lived here retired on 2026-08-31 — it was written against the old
viewport-sized scenehold (min(86vw, 460px)) and, sitting later in the
sheet, silently overrode the art-sized geometry the hero block computes
now. That geometry is height-aware by itself: the scenehold's 45svh term
scales with short viewports and the padding is already down to 74px. */