inside a filtered group repaints continuously. It looks fine in Chrome
and dies on the device this page exists to sell. */
.c-flame {
inline-size: clamp(140px, 20vw, 200px);
block-size: auto;
overflow: visible;
animation: flame-ignite 360ms var(--ease-out) both;
animation-delay: 160ms;
}
@keyframes flame-ignite {
from {
opacity: 0;
scale: 0.86;
}
62% {
opacity: 1;
scale: 1.06;
}
to {
scale: 1;
}
}
.c-flame__g {
transform-origin: 50px 70px;
animation: flame-breathe 1500ms var(--ease-in-out) 580ms infinite alternate;
animation-play-state: paused;
}
[data-on] .c-flame__g {
animation-play-state: running;
}
@keyframes flame-breathe {
to {
scale: 1.045;
}
}
.c-flame__glow {
transform-origin: 50px 70px;
animation: glow-breathe 1500ms var(--ease-in-out) 580ms infinite alternate;
animation-play-state: paused;
}
[data-on] .c-flame__glow {
animation-play-state: running;
}
@keyframes glow-breathe {
to {
opacity: 1;
scale: 1.08;
}
}
.c-embers {
position: absolute;
inset: 0;
pointer-events: none;
overflow: clip;
}
.c-ember {
position: absolute;
left: var(--x);
bottom: 34%;
inline-size: var(--sz, 5px);
aspect-ratio: 1;
border-radius: 50%;
background: var(--c, var(--ember-warm));
opacity: 0;
animation: ember-rise var(--dur, 1000ms) var(--ease-out) var(--lag, 0ms) infinite;
animation-play-state: paused;
}
[data-on] .c-ember {
animation-play-state: running;
}
@keyframes ember-rise {
0% {
opacity: 0;
translate: 0 0;
scale: 1;
}
12% {
opacity: 1;
}
70% {
opacity: 0.8;
}
100% {
opacity: 0;
translate: var(--dx, 0) var(--rise, -100px);
scale: 0.5;
}
}
/* ── Mon–Sun streak strip ──────────────────────────────────────────── */
.c-week {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: clamp(6px, 1.4vw, 12px);
inline-size: min(100%, 340px);
margin-inline: auto;
}
.c-week div {
display: grid;
gap: 7px;
justify-items: center;
}
.c-week span {
font-size: 0.625rem;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--text-3);
}
.c-week i {
inline-size: 100%;
max-inline-size: 36px;
aspect-ratio: 1;
border-radius: 50%;
background: transparent;
box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.16);
animation: week-fill 200ms var(--ease-out) both;
animation-delay: calc(720ms + var(--wi, 0) * 80ms);
}
.c-week i[data-lit] {
background: color-mix(in oklab, var(--ember-warm) 82%, transparent);
box-shadow: none;
}
/* Today lands last and overshoots — the app's own 1.16 then settle. */
.c-week i[data-today] {
animation-name: week-today;
animation-duration: 320ms;
}
@keyframes week-fill {
from {
opacity: 0;
scale: 0.6;
}
}
@keyframes week-today {
from {
opacity: 0;
scale: 0.6;
}
58% {
opacity: 1;
scale: 1.16;
}
to {
scale: 1;
}
}
.c-confetti {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
pointer-events: none;
z-index: var(--z-raised);
}
}
@layer sections {
/* ── §1 Hero ───────────────────────────────────────────────────────────
Asymmetric, and the media runs off the right edge. The first build fanned
three phones symmetrically around a centre axis, which is the single most
template-looking composition available; it also deleted the side phones
entirely below 768px, so mobile — the audience for a phone app — got one
250px mockup floating in a lot of navy. Crop, never delete. */
.s-hero__stack {
position: relative;
display: grid;
justify-items: center;
min-block-size: calc(340px * 852 / 393 + 40px); /* reserve → CLS 0 */
}
@media (max-width: 767px) {
.s-hero__stack {
min-block-size: calc(288px * 852 / 393 * 0.78);
align-items: start;
overflow: clip;
}
}
.s-hero__lead-phone {
position: relative;
z-index: var(--z-raised);
rotate: -3deg;
}
.s-hero__lead-phone .c-phone {
--pw: 340px;
}
@media (max-width: 767px) {
.s-hero__lead-phone .c-phone {
--pw: 288px;
}
}
/* The companion screenshot is cropped by the viewport, which is what makes
it read as a device rather than a thumbnail of one. */
inside it follow the ground. */
a cropped one reads as a photograph. */
/* ── §12 Celebration ───────────────────────────────────────────────── */
.s-celebrate__count {
font-size: var(--t-stat);
font-weight: 800;
line-height: 0.9;
letter-spacing: -0.05em;
color: #fff;
text-shadow: 0 0 34px rgb(255 140 66 / 0.45);
}
.s-celebrate__cap {
font-size: var(--t-h3);
font-weight: 700;
color: #ffd9b0;
}
}
@layer sections {
/* ── §6 Console — split, not stacked-centred ───────────────────────── */
.s-console {
display: grid;
gap: clamp(32px, 4vw, 64px);
justify-items: stretch;
align-items: center;
}
@media (min-width: 1024px) {
.s-console {
grid-template-columns: minmax(0, 1fr) auto;
}
}
.s-console__chips {
display: flex;
flex-wrap: wrap;
gap: var(--s-2);
justify-content: flex-start;
max-width: 560px;
}
@media (max-width: 1023px) {
/* Four ragged wrapped lines of pills is a mess on a phone; one snapping
row is how the app itself presents suggestion chips. */
.s-console__chips {
display: grid;
grid-auto-flow: column;
grid-auto-columns: max-content;
flex-wrap: nowrap;
overflow-x: auto;
scroll-snap-type: x proximity;
scrollbar-width: none;
max-width: none;
padding-bottom: 4px;
}
.s-console__chips::-webkit-scrollbar {
display: none;
}
.s-chip {
scroll-snap-align: start;
white-space: nowrap;
}
}
.s-console__note {
max-width: 62ch;
text-align: left;
font-size: 0.9375rem;
color: var(--text-3);
line-height: 1.6;
}
.s-console .c-phone {
--pw: 340px;
}
@media (max-width: 767px) {
.s-console .c-phone {
--pw: 300px;
}
}
}
@layer components {
/* ── Press feedback ────────────────────────────────────────────────────
The first build had exactly ONE :active rule on the whole page. On a
touch device — the primary audience here — that means almost nothing on
the page acknowledges being tapped. The app's own numbers: 90ms in,
160ms out, scale 0.96. Asymmetric durations are what make it feel like a
physical key rather than a rubber band. */
.s-chip,
.c-replay,
.c-toggle button,
.c-badge,
.c-panel,
.c-tool,
.c-card {
transition: background-color var(--d-micro) var(--ease-out),
border-color var(--d-micro) var(--ease-out), color var(--d-micro) var(--ease-out),
transform var(--d-press-out) var(--ease-out), box-shadow var(--d-micro) var(--ease-out);
}
.s-chip:active,
.c-replay:active,
.c-toggle button:active,
.c-badge:active {
transform: scale(0.96);
transition-duration: var(--d-press-in);
}
/* Cards lift further and bloom in their own accent rather than all sharing
one 2px nudge. */
.c-card:hover,
.c-tool:hover {
transform: translateY(-4px);
box-shadow: var(--sh-3), var(--line-inner);
}
.c-tool:hover {
box-shadow: var(--sh-3), 0 0 40px -20px color-mix(in oklab, var(--accent) 80%, transparent);
}
.c-tool .c-chip,
.c-panel .c-chip {
transition: scale var(--d-micro) var(--ease-out);
}
.c-tool:hover .c-chip,
.c-panel:hover .c-chip {
scale: 1.08;
}
/* The three most commercially important cards on the page were the only
ones with no hover state at all. */
.c-plan {
transition: border-color var(--d-micro) var(--ease-out),
transform var(--d-micro) var(--ease-out), box-shadow var(--d-micro) var(--ease-out);
}
.c-plan:hover {
transform: translateY(-4px);
border-color: var(--line-strong);
box-shadow: var(--sh-3);
}
.c-plan--feature {
box-shadow: 0 0 0 1px rgb(99 102 241 / 0.2), var(--sh-4),
0 30px 70px -30px rgb(99 102 241 / 0.5);
}
.c-plan--feature:hover {
border-color: var(--brand);
box-shadow: 0 0 0 1px rgb(99 102 241 / 0.3), var(--sh-4),
0 34px 80px -30px rgb(99 102 241 / 0.65);
}
/* Section eyebrow that is not the same block eleven times. */
.c-eyebrow {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 7px 14px 7px 10px;
border-radius: var(--r-pill);
background: var(--surface);
border: 1px solid var(--line);
font-size: var(--t-micro);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-2);
}
.c-eyebrow i {
inline-size: 7px;
block-size: 7px;
border-radius: 50%;
background: var(--accent, var(--brand));
flex: none;
}
}
@layer utilities {
.u-bleed-fig {
max-width: none;
}
.u-measure {
max-width: var(--measure-lead);
}
.u-relative {
position: relative;
}
}
@layer components {
/* Console messages are created and appended by JS, so a plain animation on
the class plays the moment each one lands. The first build appended them
with no entrance at all — bubbles, the tool pill and the whole action
card simply blinked into existence, which is the one place the page's
best set piece looked cheap. */
.ph-bubble,
.ph-tool,
.ph-action {
animation: bubble-in 280ms var(--ease-reveal) both;
}
.ph-action__row {
animation: bubble-in 240ms var(--ease-reveal) both;
animation-delay: calc(var(--ri, 0) * 70ms + 60ms);
}
@keyframes bubble-in {
from {
opacity: 0;
translate: 0 8px;
scale: 0.97;
}
}
}
@layer sections {
/* An inline-flex pill inside a grid track still stretches — grid stretches
items, and inline-flex only governs the box's own inner layout. */
.c-eyebrow {
justify-self: start;
}
/* A 393x852 frame at 340px is 736px tall; three cards fill about half of it.
Top-aligning is what a real app screen does, but on a marketing page it
reads as an unfinished mockup. */
.s-fold__state {
justify-content: center;
}
}
@layer sections {
/* `.s-celebrate p` is (0,1,1) and `.s-celebrate__count` is (0,1,0), so the
generic paragraph rule was silently winning and rendering the page's
largest number at lead size. Scope the generic rule to unclassed . */
.s-celebrate p {
font-size: inherit;
max-width: none;
}
.s-celebrate p:not([class]) {
color: #d6cfe4;
font-size: var(--t-lead);
max-width: 42ch;
}
.s-celebrate__count {
font-size: var(--t-stat);
}
.s-celebrate__cap {
font-size: var(--t-h3);
}
/* scroll-snap-type: x mandatory snaps the FIRST item to the scrollport
start on load, which scrolls padding-inline-start straight out of view —
the rail rendered flush to x=0 despite a 160px pad. scroll-padding is the
property that actually governs where a snap target lands. */
.c-rail {
scroll-padding-inline: var(--edge, var(--gutter)) var(--gutter);
}
/* The section header sits in .l-container--wide (1360), not 1200. */
.l-edge {
--edge: max(var(--gutter), calc((100% - 1360px) / 2 + var(--gutter)));
}
/* Today reads as today. */
.c-week i[data-today] {
box-shadow: 0 0 0 2px rgb(255 255 255 / 0.75), 0 0 18px -2px var(--ember-warm);
}
}
@layer sections {
/* The render's ground samples near #08051f at the corners — DARKER than the
violet field — so an under-tight mask leaves a visible dark rectangle.
The previous radius (120% 100%, opaque to 55%) put the whole opaque stop
outside the image box, which masked nothing at all.
mix-blend-mode: lighten does the rest: it keeps whichever of image and
field is brighter, so the quokka survives untouched and the dark ground
is replaced by the field it sits on. */
.s-mascot__fig img {
mask-image: radial-gradient(72% 58% at 54% 46%, #000 42%, transparent 84%);
-webkit-mask-image: radial-gradient(72% 58% at 54% 46%, #000 42%, transparent 84%);
mix-blend-mode: lighten;
}
}
@layer sections {
/* is an inline box. In the hero it would claim a grid cell while
its absolutely-positioned ![]()
escapes; in the mascot it would break the
img's 100% sizing. display:contents removes the wrapper box entirely and
lets the ![]()
be the grid item it used to be. */
.s-hero__stack > picture {
display: contents;
}
.s-mascot__fig picture {
display: block;
}
/* 136 decorative tiles are real style + layout work on every recalc. They
are also the last thing on a long section, so skipping them until they
are near the viewport costs nothing and saves the main thread. The
intrinsic size keeps the box reserved, so CLS stays 0. */
.c-field {
content-visibility: auto;
/* Four-value form: [auto none] for the inline axis, [auto 460px] for the
block axis. A single length applies to BOTH axes, which put a 460px
floor on the width and overflowed every viewport narrower than that. */
contain-intrinsic-size: auto none auto 460px;
}
}
@layer sections {
/* A grid/flex item's automatic minimum size is its CONTENT size, so an
overflow-x:auto scroller nested in a grid still forces the track wide
enough for all of it — the scrollbar never engages and the document
overflows instead. Eight nowrap chips did exactly that: 2078px of layout
inside a 375px viewport.
min-inline-size: 0 is what lets the scroller actually scroll. */
.s-console,
.s-console > *,
.s-console__chips,
.c-rail,
.l-edge {
min-inline-size: 0;
}
}
@layer components {
/* Every child of a grid container becomes a grid item — including bare text
nodes and inline elements. So `10 AI chat messages … lifetime,
not monthly` split into three items and wrapped into a second row, where
"lifetime" landed in the icon column on top of the following text.
Flex keeps the icon fixed and lets the rest stay inline flow. */
.c-plan li {
display: flex;
gap: 10px;
align-items: flex-start;
}
.c-plan li svg {
flex: none;
}
}
@layer sections {
/* The phone column is ~740px tall; centring the copy column against it
opened a dead gap between the section heading and the first chip. */
.s-console {
align-items: start;
}
}
@layer components {
/* ── Film grain ────────────────────────────────────────────────────────
One 64px quantised-noise tile, inlined (1.2KB), tiled as a STATIC
pseudo-element per act section. No fixed layers, no animation — the
texture is the point, not the motion. Sits above content at 5%: film
grain grades the whole frame, type included. */
.u-grain {
position: relative;
}
.u-grain::before {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABAAgMAAADXB5lNAAAADFBMVEX///+qqqpVVVUAAAABM1s0AAAACXBIWXMAAAPoAAAD6AG1e1JrAAAES0lEQVR42gFABL/7AI42H0EDRKI5TmrvnlNYfEAAO+50eJ3Ez05vWZbOs8HevwCt9UY1DtM1hSh5VrRyt1sGANSKTZMJy22prCjoPLMwnF4AP9Avsy1xrI5hHi1JrolRlQA6f5S4og6O4IjHQm8aEFJNACFHI6wpMxZUFJ9S8m+YfYEAKWraDL/XlsvI+fc394tT5ADbvOBptWTHreOFK0ee9UqZACiQ/gxNsDDMLBQCGzxJY1UAmsYRnhbv8r8Iz6N6GaePigDOr9/xyMSYr5LhZALxc41hAKhCIaD8bjLbLsWZxePaP4QALRWTE8DCwTEzFUJ1vccIhwCMQaHcBNrG4cOyhTx+8uaSAObzoOCS2gYXJo/JiR764woAaM5C1gnlPgltT3ENHCIfRgCA4LMrVoC+KYUwDxYyLHFUAI4y4gN7zRTfcmoyphh63V4AgS0UkpfbAEuSAjiBHAd6AACUt4CFPCvZ/7QZwnzWc3/yAEwzibl2lNuQzLMC/PXE9dIAjRY0u+e5W0XCJjXc5+Z1eQDLFdzxPCbA893jgkYA2yK7AONqJfKNoYXtMlINrSttEUwA1+RBa1lAiQ46CrKNcLpyZgAQEE2bDaHz8H6C+s0vyNdvAAga6kdEF4Cs11F67BFLTisAVuEiQ3RuN9E4DqtJQcmb6QD73LRWctYTo0F6o877dGGHAO+EzGfmh44jfiYwVMwwW38AvllAhreVv8Yn5eSOeGFyDgAunomX4ANidejzK1kuRQoqACCOg/Hg5LDNOkL1Oa53qEoArV3K7OmfdzWCjcjfrRkUrwBfEGd/wCqRpjqN90Vi3AKuAFKi/EMtbudPH4AxQF+aZXIAWv6N8oCXaRsfXPAZUaEQkADvwIGE1piKyLLHiAMa3NIYAJYdSVT4i2Srym4Nvrt9YWkAV1xNFLP5HETsmr3j+hQgxQAZK9opLQVlVQN4Z8Ln2DRxAFgMLlR4yyL1qGT2y+/g7lwA9hItS/KyphjMGx+wB5VcpAAnWdbY3mgC5lnGNOzlKQPnAFBbWu14zDB20tU27/KBXRgA+K2wyjXXtRaT86/31d0uFQCPDEslz6zOasgAv2V4Y2JlAAz2M/6heyvzxhNe9U6OwlAAhG6uHMuNMr/2vqWo6qvdzQACGnjIwkHE1dvlRorZk7coAOdtmtlsiAuksglOItg8qz4AONJYZvjvTiVGh8dkKsdv9wB7eE6fcwtOr+WRtDH6rjKgAL9Qj6RJGih/iH3A6jWeI+QAHr7b5Vg7sreXOSMExarO/QDjWvmnAzJL/SqSdDavPxDtAK5hPuBGB5GqlvMt3ygmhRgAVupNU9uFnXPNJ/JbWPQcZQDe85RNT+NmKKttb3Zgttz4ANFY2I4OHbFmWXvrHKtOl4wA+AjLmMtyVsepk19f+ft1+wCPcNGQvIvfzS5iz9nagrsrAD5Ad3cB9go6kgzhspP3YzTaxwTOBhmrXAAAAABJRU5ErkJggg==")
repeat;
background-size: 64px 64px;
opacity: var(--grain-a);
}
/* The paper interlude is a printed sheet — heavier tooth reads as stock. */
.t-paper.u-grain::before {
opacity: 0.07;
mix-blend-mode: multiply;
}
/* ── Screenshot phone ──────────────────────────────────────────────────
The frame adopts the SHOT_CROP ratio so the image is never letterboxed;
the Dynamic Island pseudo supplies the hardware the crop removed. */
.c-phone--shot {
aspect-ratio: var(--shot-ar);
}
.c-phone--shot .c-phone__screen {
padding: 0;
display: block;
}
/* The SHOT_CROP already removed the status-bar band, so the app's greeting
sits at the very top of the image — an overlaid Dynamic Island pseudo
would cover it. Screen-only, like every store screenshot. */
.c-phone--shot .c-phone__screen::before {
display: none;
}
.c-phone--shot .c-phone__screen :is(picture, img) {
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
border-radius: inherit;
}
}
/* ── The act sections ────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════════
PART FOUR — MIDNIGHT
---------------------------------------------------------------------------
The 2026-07-30 rebuild of the rebuild. Verdict on ONE NIGHT: the serif read
as a broadsheet, the paper interlude broke the spell, and too many scenes
were re-dressed drafts. MIDNIGHT is one continuous world instead: a single
near-black ground the whole way down, every scene lit by its own glow
field, glass surfaces with hairline borders, and a contemporary display
grotesk (Bricolage, opsz 96 static instance) in place of the serif.
Discipline unchanged: M1–M6 all hold. Glow is painted in gradient STOPS,
never blur filters; loops are transform/opacity and gated by [data-on];
the default CSS state is the final visible state.
═══════════════════════════════════════════════════════════════════════════ */
@layer tokens {
:root {
/* The one ground. Sections never change it — light does the work. */
--mid: #060714;
--mid-2: #0a0b1f; /* washes and card interiors, one step up */
--mid-3: #0e0f26;
/* Glow accents as bare triplets, so alpha is composable at use sites. */
--gl-violet: 99 102 241; /* brand */
--gl-lilac: 167 139 250;
--gl-mint: 134 239 172;
--gl-pink: 249 168 212;
--gl-sky: 125 211 252;
--gl-amber: 252 211 77;
--gl-ember: 255 128 84;
/* Display face. PJS remains the UI voice; Bricolage speaks in headlines
and big numerals only. No italic instance exists — accent words take a
gradient fill instead of a slant. */
--font-disp: "Bricolage Grotesque", "Bricolage Fallback", system-ui, sans-serif;
--t-poster: clamp(2.75rem, 1.55rem + 5.1vw, 6.125rem); /* 44 → 98 */
--t-scene: clamp(2rem, 1.53rem + 2vw, 3.25rem); /* 32 → 52 */
/* Grain stays, quieter: on a near-black ground 5% reads as dirt. */
--grain-a: 0.04;
}
}
/* Self-hosted static instance — 22.4KB. font-weight spans 300–900 so faux
bold can never be synthesised on top of it. */
@font-face {
font-family: "Bricolage Grotesque";
font-style: normal;
font-weight: 300 900;
font-display: swap;
src: url("/assets/fonts/bricolage-latin-opsz96-w700-v9.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Bricolage Fallback";
src: local("Arial Bold"), local("Arial");
size-adjust: 99%;
ascent-override: 94%;
descent-override: 24%;
}
@layer base {
/* The whole site sits on the midnight ground — features/legal/404 inherit
it too, which finally puts every page in the same world. */
body {
background: var(--mid);
}
::selection {
background: rgb(var(--gl-violet) / 0.4);
color: #fff;
}
main.t-mid :is(h1, h2):not(.u-vh) {
font-family: var(--font-disp);
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.02;
font-synthesis: none;
}
main.t-mid h1 {
font-size: var(--t-poster);
letter-spacing: -0.032em;
}
main.t-mid :is(h1, h2):not(.u-vh) em {
/* No italic cut in the static instance — the accent word glows instead.
The padding/negative-margin pair exists because background-clip only
paints inside the box, and Bricolage glyphs overhang their advance
width — without it terminals get shaved off. */
font-style: normal;
background: linear-gradient(100deg, #a5b4fc 10%, #7dd3fc 55%, #86efac 105%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
padding: 0.06em 0.1em;
margin: -0.06em -0.1em;
}
main.t-mid .c-stat__v,
main.t-mid .c-plan__price,
main.t-mid .s-celebrate__count,
main.t-mid .m-ledger__resv,
main.t-mid .m-big {
font-family: var(--font-disp);
font-weight: 700;
font-synthesis: none;
}
}
/* ── Components ──────────────────────────────────────────────────────────── */
@layer components {
/* Glass surface — the page's one card recipe. --glow tints the border and
the top light; leave it unset for neutral glass. */
.m-glass {
position: relative;
border-radius: var(--r-card);
background: linear-gradient(180deg, rgb(255 255 255 / 0.055), rgb(255 255 255 / 0.018) 55%),
var(--mid-2);
border: 1px solid rgb(255 255 255 / 0.09);
box-shadow: 0 28px 70px -32px rgb(0 0 0 / 0.85), inset 0 1px 0 rgb(255 255 255 / 0.08);
}
.m-glass--glow {
border-color: color-mix(in srgb, rgb(var(--glow, var(--gl-violet))) 32%, rgb(255 255 255 / 0.1));
box-shadow: 0 28px 70px -32px rgb(0 0 0 / 0.85),
0 0 64px -18px rgb(var(--glow, var(--gl-violet)) / 0.38),
inset 0 1px 0 rgb(255 255 255 / 0.09);
}
.m-glass--glow::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background: radial-gradient(
60% 44% at 50% 0%,
rgb(var(--glow, var(--gl-violet)) / 0.16),
transparent 70%
);
}
/* Eyebrow — kept from the old kit but recoloured per scene via --accent. */
/* Proof chips — the honest strip. */
.m-proof {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
}
.m-proof li {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: var(--t-meta);
font-weight: 600;
color: #c9cae4;
padding: 7px 13px;
border-radius: var(--r-pill);
background: rgb(255 255 255 / 0.045);
border: 1px solid rgb(255 255 255 / 0.1);
}
.m-proof li[hidden] {
display: none;
}
.m-proof li::before {
content: "";
inline-size: 5px;
block-size: 5px;
border-radius: 50%;
background: rgb(var(--gl-mint));
box-shadow: 0 0 8px rgb(var(--gl-mint) / 0.8);
}
.m-proof li svg {
inline-size: 14px;
block-size: 14px;
}
.m-proof li:has(svg)::before {
display: none;
}
/* Floating data chips around tour screenshots. */
.m-float {
position: absolute;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 13px;
border-radius: 14px;
background: linear-gradient(180deg, rgb(20 21 44 / 0.92), rgb(12 13 30 / 0.92));
border: 1px solid color-mix(in srgb, rgb(var(--fc, var(--gl-violet))) 34%, rgb(255 255 255 / 0.1));
box-shadow: 0 16px 40px -12px rgb(0 0 0 / 0.7), 0 0 28px -8px rgb(var(--fc, var(--gl-violet)) / 0.35);
font-size: 0.8125rem;
font-weight: 700;
color: #e6e7f5;
white-space: nowrap;
translate: 0 calc((var(--p, 0.5) - 0.5) * var(--depth, 0) * -70px);
}
.m-float i {
inline-size: 7px;
block-size: 7px;
border-radius: 50%;
background: rgb(var(--fc, var(--gl-violet)));
box-shadow: 0 0 10px rgb(var(--fc, var(--gl-violet)) / 0.9);
flex: none;
}
.m-float b {
font-weight: 800;
color: #fff;
}
.m-float small {
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: rgb(var(--fc, var(--gl-violet)) / 0.95);
}
/* On a phone the screenshot IS the data — chips would sit on top of the
very numbers they repeat. */
@media (max-width: 767px) {
.m-float {
display: none;
}
}
/* ── The glass ledger (pin scene) ────────────────────────────────────── */
.m-ledger {
inline-size: min(100%, 460px);
margin-inline: auto;
padding: clamp(18px, 2vw, 28px);
display: grid;
gap: 4px;
}
.m-ledger__head {
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: var(--t-micro);
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--text-3);
padding-block-end: 12px;
border-block-end: 1px solid rgb(255 255 255 / 0.08);
margin-block-end: 8px;
}
.m-ledger__row {
display: grid;
grid-template-columns: 10px 1fr auto;
align-items: center;
column-gap: 12px;
padding-block: 11px;
border-block-end: 1px solid rgb(255 255 255 / 0.05);
}
.m-ledger__row i {
inline-size: 8px;
block-size: 8px;
border-radius: 50%;
background: var(--lc, var(--brand-soft));
box-shadow: 0 0 12px color-mix(in srgb, var(--lc, var(--brand-soft)) 70%, transparent);
}
.m-ledger__n {
font-size: 0.9375rem;
font-weight: 700;
color: #eceef8;
line-height: 1.25;
}
.m-ledger__n small {
display: block;
font-size: 0.75rem;
font-weight: 500;
color: var(--text-3);
margin-block-start: 1px;
}
.m-ledger__a {
font-size: 0.9375rem;
font-weight: 800;
font-variant-numeric: tabular-nums;
color: #fff;
letter-spacing: -0.01em;
}
.m-ledger__a--in {
color: var(--income);
}
.m-ledger__a--out {
color: #f5c0c0;
}
.m-ledger__tag {
grid-column: 2 / -1;
justify-self: start;
margin-block-start: 7px;
font-size: 0.6875rem;
font-weight: 700;
color: var(--income);
background: rgb(var(--gl-mint) / 0.1);
border: 1px solid rgb(var(--gl-mint) / 0.3);
border-radius: var(--r-pill);
padding: 3px 9px;
}
.m-ledger__div {
display: flex;
align-items: center;
gap: 12px;
padding-block: 12px 6px;
font-size: var(--t-meta);
font-weight: 700;
color: var(--text-2);
white-space: nowrap;
}
.m-ledger__div::before,
.m-ledger__div::after {
content: "";
block-size: 1px;
flex: 1;
background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.18), transparent);
}
.m-ledger__res {
display: grid;
justify-items: center;
gap: 2px;
padding-block: 10px 6px;
text-align: center;
}
.m-ledger__resk {
font-size: var(--t-micro);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-3);
}
.m-ledger__resv {
font-size: clamp(3rem, 2.2rem + 3.4vw, 4.75rem);
line-height: 1;
letter-spacing: -0.02em;
color: #fff;
text-shadow: 0 0 44px rgb(var(--gl-violet) / 0.55);
}
.m-ledger__resd {
font-size: var(--t-body);
font-weight: 600;
color: var(--text-2);
}
/* ── Bento cell ──────────────────────────────────────────────────────── */
.m-cell {
position: relative;
overflow: clip;
display: flex;
flex-direction: column;
gap: 14px;
padding: clamp(18px, 1.8vw, 26px);
border-radius: var(--r-panel);
transition: translate var(--d-micro) var(--ease-out), border-color var(--d-micro) var(--ease-out),
box-shadow var(--d-micro) var(--ease-out);
}
@media (hover: hover) {
.m-cell:hover {
translate: 0 -3px;
border-color: color-mix(in srgb, rgb(var(--glow, var(--gl-violet))) 45%, rgb(255 255 255 / 0.12));
box-shadow: 0 28px 70px -32px rgb(0 0 0 / 0.85),
0 0 54px -14px rgb(var(--glow, var(--gl-violet)) / 0.45),
inset 0 1px 0 rgb(255 255 255 / 0.09);
}
}
/* Cursor spotlight — JS writes --mx/--my per cell; hover fades it in. */
.m-cell::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
opacity: 0;
transition: opacity 320ms var(--ease-out);
background: radial-gradient(
200px circle at var(--mx, 50%) var(--my, 50%),
rgb(255 255 255 / 0.07),
transparent 70%
);
}
[data-spot]:hover .m-cell::after {
opacity: 1;
}
.m-cell h3 {
font-size: 1.0625rem;
font-weight: 800;
letter-spacing: -0.01em;
margin-block-start: auto;
}
.m-cell > p {
font-size: 0.875rem;
color: var(--text-2);
line-height: 1.55;
max-inline-size: 44ch;
}
.m-cell__k {
font-size: var(--t-micro);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: color-mix(in srgb, rgb(var(--glow, var(--gl-violet))) 80%, #fff);
display: inline-flex;
align-items: center;
gap: 8px;
}
.m-cell__k::before {
content: "";
inline-size: 6px;
block-size: 6px;
border-radius: 50%;
background: rgb(var(--glow, var(--gl-violet)));
box-shadow: 0 0 10px rgb(var(--glow, var(--gl-violet)) / 0.9);
}
.m-cell__fig {
min-block-size: 86px;
display: grid;
align-items: center;
justify-items: start;
}
.m-cell__fig svg {
max-inline-size: 100%;
inline-size: 100%;
block-size: auto;
max-block-size: 150px;
}
/* Bills — a month of dots. */
.m-dots {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 8px;
inline-size: min(100%, 240px);
}
.m-dots i {
aspect-ratio: 1;
border-radius: 50%;
background: rgb(255 255 255 / 0.1);
}
.m-dots i[data-paid] {
background: rgb(var(--gl-mint) / 0.85);
box-shadow: 0 0 10px rgb(var(--gl-mint) / 0.5);
}
.m-dots i[data-due] {
background: rgb(var(--gl-amber));
box-shadow: 0 0 0 4px rgb(var(--gl-amber) / 0.18), 0 0 14px rgb(var(--gl-amber) / 0.7);
}
/* Repeats / to-dos — mini ledger rows outside a phone: --u is 1px here. */
.m-rows {
--u: 1px;
display: grid;
gap: 8px;
align-content: center;
}
.m-rows .ph-row {
background: rgb(255 255 255 / 0.04);
border: 1px solid rgb(255 255 255 / 0.07);
border-radius: 12px;
padding: 9px 12px;
}
.m-rows__stamp {
justify-self: start;
font-size: 0.6875rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--p-teal);
border: 1.5px dashed color-mix(in srgb, var(--p-teal) 55%, transparent);
border-radius: 8px;
padding: 4px 9px;
rotate: -2deg;
}
/* To-do check rows */
.m-todo {
display: grid;
gap: 8px;
align-content: center;
}
.m-todo div {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 10px;
background: rgb(255 255 255 / 0.04);
border: 1px solid rgb(255 255 255 / 0.07);
border-radius: 12px;
padding: 9px 12px;
font-size: 0.8125rem;
font-weight: 600;
color: #dfe1f0;
}
.m-todo i {
inline-size: 16px;
block-size: 16px;
border-radius: 6px;
border: 1.5px solid rgb(255 255 255 / 0.28);
flex: none;
display: grid;
place-items: center;
}
.m-todo div[data-done] i {
background: var(--p-teal);
border-color: var(--p-teal);
}
.m-todo div[data-done] i::before {
content: "";
inline-size: 8px;
block-size: 5px;
border-inline-start: 2px solid #071018;
border-block-end: 2px solid #071018;
rotate: -45deg;
translate: 0 -1px;
}
.m-todo div[data-done] {
/* No line-through: text-decoration paints through inline children, so it
would strike the link-tag chip too. The check + dim carry "done". */
color: var(--text-3);
}
.m-todo span {
margin-inline-start: auto;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--p-sky);
background: rgb(var(--gl-sky) / 0.1);
border: 1px solid rgb(var(--gl-sky) / 0.3);
border-radius: var(--r-pill);
padding: 2px 8px;
white-space: nowrap;
}
/* Reports — a pure-CSS donut. Shares from the worked example. */
.m-donut {
inline-size: 96px;
aspect-ratio: 1;
border-radius: 50%;
background: conic-gradient(
#fdba74 0 197deg,
#7dd3fc 197deg 261deg,
#fcd34d 261deg 298deg,
#c4b5fd 298deg 326deg,
#f9a8d4 326deg 345deg,
#86efac 345deg 360deg
);
-webkit-mask: radial-gradient(closest-side, transparent 60%, #000 61%);
mask: radial-gradient(closest-side, transparent 60%, #000 61%);
}
/* Calculators + currencies — the numerals ARE the figure. */
.m-big {
font-size: clamp(2.5rem, 2rem + 1.6vw, 3.5rem);
line-height: 1;
letter-spacing: -0.02em;
color: #fff;
}
.m-big + small {
display: block;
font-size: var(--t-meta);
font-weight: 600;
color: var(--text-2);
margin-block-start: 4px;
}
/* ── Privacy scene pieces ────────────────────────────────────────────── */
.m-taglist {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.m-taglist li {
font-size: 0.8125rem;
font-weight: 600;
color: #d9f5e3;
background: rgb(var(--gl-mint) / 0.07);
border: 1px solid rgb(var(--gl-mint) / 0.22);
border-radius: var(--r-pill);
padding: 6px 12px;
}
.m-privrows {
list-style: none;
margin: 0;
padding: 0;
display: grid;
}
.m-privrows li {
display: grid;
gap: 3px;
padding-block: 12px;
border-block-end: 1px solid rgb(255 255 255 / 0.06);
}
.m-privrows li:last-child {
border-block-end: 0;
}
.m-privrows b {
font-size: 0.9375rem;
font-weight: 700;
color: #eceef8;
}
.m-privrows span {
font-size: 0.875rem;
color: var(--text-2);
line-height: 1.5;
}
/* ── Tax card ────────────────────────────────────────────────────────── */
.m-taxcard {
--u: 1px; /* ph-micro is sized in app points; outside a phone 1pt = 1px */
inline-size: min(100%, 430px);
margin-inline: auto;
padding: clamp(22px, 2.2vw, 32px);
display: grid;
gap: 10px;
justify-items: center;
text-align: center;
}
.m-taxcard__amt {
font-family: var(--font-disp);
font-weight: 700;
font-synthesis: none;
font-size: clamp(3rem, 2.4rem + 2.6vw, 4.5rem);
line-height: 1;
color: #fff;
text-shadow: 0 0 44px rgb(var(--gl-amber) / 0.4);
}
.m-taxcard__chips {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
}
.m-taxcard__chips span {
font-size: var(--t-micro);
font-weight: 700;
color: #ffd88a;
background: rgb(var(--gl-amber) / 0.09);
border: 1px solid rgb(var(--gl-amber) / 0.28);
border-radius: var(--r-pill);
padding: 4px 10px;
}
.m-taxcard__bands {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
padding-block-start: 8px;
border-block-start: 1px solid rgb(255 255 255 / 0.07);
}
.m-taxcard__bands span {
font-size: var(--t-micro);
font-weight: 600;
color: var(--text-2);
background: rgb(255 255 255 / 0.045);
border: 1px solid rgb(255 255 255 / 0.09);
border-radius: var(--r-pill);
padding: 4px 10px;
}
}
/* ── Chrome re-skin: nav pill + reused kit on the new ground ─────────────── */
@layer components {
.c-nav {
background: transparent;
border-block-end: 0;
}
.c-nav__inner {
margin-block-start: 10px;
border-radius: var(--r-pill);
border: 1px solid rgb(255 255 255 / 0.08);
background: rgb(8 9 24 / 0.55);
-webkit-backdrop-filter: blur(16px) saturate(1.4);
backdrop-filter: blur(16px) saturate(1.4);
padding-inline: clamp(14px, 2vw, 22px);
min-block-size: 58px;
transition: border-color var(--d-micro) var(--ease-out), background-color var(--d-micro) var(--ease-out);
}
html.is-scrolled .c-nav__inner {
border-color: rgb(255 255 255 / 0.12);
background: rgb(8 9 24 / 0.78);
}
.c-nav__links a {
color: #c6c7e2;
}
.c-nav__links a:hover {
color: #fff;
}
/* Chips reused by the console demo. */
.t-mid .s-chip {
background: rgb(255 255 255 / 0.04);
border-color: rgb(255 255 255 / 0.1);
}
.t-mid .s-chip[aria-pressed="true"] {
background: rgb(var(--gl-sky) / 0.12);
border-color: rgb(var(--gl-sky) / 0.5);
color: #d9f1ff;
}
/* Pricing kit on glass. */
.t-mid .c-toggle {
background: rgb(255 255 255 / 0.045);
border: 1px solid rgb(255 255 255 / 0.1);
}
.t-mid .c-plan {
border-radius: var(--r-card);
background: linear-gradient(180deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.016) 55%),
var(--mid-2);
border: 1px solid rgb(255 255 255 / 0.09);
box-shadow: 0 28px 70px -32px rgb(0 0 0 / 0.85), inset 0 1px 0 rgb(255 255 255 / 0.08);
}
.t-mid .c-plan--feature {
border-color: color-mix(in srgb, rgb(var(--gl-violet)) 45%, rgb(255 255 255 / 0.12));
box-shadow: 0 28px 70px -32px rgb(0 0 0 / 0.85), 0 0 74px -16px rgb(var(--gl-violet) / 0.45),
inset 0 1px 0 rgb(255 255 255 / 0.1);
}
.t-mid .c-plan__price {
letter-spacing: -0.02em;
}
/* FAQ as a quiet divider list — no boxes. The cards crowded their own
text; here the air IS the design. */
.t-mid .c-faq {
border-block-start: 1px solid rgb(255 255 255 / 0.1);
}
.t-mid .c-faq details {
border: 0;
border-radius: 0;
background: none;
border-block-end: 1px solid rgb(255 255 255 / 0.1);
}
.t-mid .c-faq summary {
padding-block: clamp(20px, 2.4vw, 27px);
padding-inline: 2px;
font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
font-weight: 700;
letter-spacing: -0.01em;
color: #dfe0f0;
transition: color var(--d-micro) var(--ease-out);
}
.t-mid .c-faq summary:hover {
color: #fff;
}
.t-mid .c-faq details[open] summary {
color: #fff;
padding-block-end: 12px;
}
.t-mid .c-faq summary::after {
border-color: var(--text-3);
}
.t-mid .c-faq details[open] summary::after {
border-color: var(--brand-soft);
}
.t-mid .c-faq .c-faq__a {
padding-block: 0 28px;
padding-inline: 2px;
max-inline-size: 66ch;
color: #a5a6c5;
line-height: 1.65;
}
/* ── Quokka cameos — the mascot, cropped from one render ─────────────── */
.m-cameo {
margin: 0;
/* Explicit block-size, not aspect-ratio: the image's intrinsic height
would stretch an aspect-ratio box into an oval. */
inline-size: var(--sz, 72px);
block-size: var(--sz, 72px);
border-radius: 50%;
overflow: clip;
border: 2px solid rgb(255 255 255 / 0.16);
box-shadow: 0 8px 28px -8px rgb(0 0 0 / 0.7),
0 0 34px -8px rgb(var(--ring, var(--gl-violet)) / 0.55);
background: radial-gradient(120% 120% at 50% 20%, #3a1c6e, #1b0d33);
flex: none;
}
.m-cameo img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
object-position: 52% 30%;
scale: 1.4;
transform-origin: 52% 30%;
}
.m-cameo figcaption {
position: absolute;
inset-block-start: 100%;
inset-inline-start: 50%;
translate: -50% 8px;
font-size: var(--t-micro);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-3);
white-space: nowrap;
}
/* Stat band re-skin. */
.t-mid .c-stat {
border-block-start: 1px solid rgb(255 255 255 / 0.12);
padding-block-start: 22px;
}
.t-mid .c-stat__v {
font-size: clamp(2.75rem, 1.9rem + 3.6vw, 5rem);
letter-spacing: -0.025em;
line-height: 1;
}
.t-mid .c-stat__tag {
display: inline-block;
font-size: var(--t-micro);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-3);
border: 1px solid rgb(255 255 255 / 0.14);
border-radius: var(--r-pill);
padding: 4px 10px;
}
/* The action field as a constellation of dots. */
.t-mid .c-field {
justify-items: center;
}
.t-mid .c-field i {
border-radius: 50%;
inline-size: clamp(12px, 1.4vw, 20px);
block-size: auto;
aspect-ratio: 1;
}
.t-mid .c-field__key i {
border-radius: 50%;
}
}
/* ── Scenes ──────────────────────────────────────────────────────────────── */
@layer sections {
/* Shared glow-field primitives: pre-painted radials, softness in stops. */
.m-halo {
position: absolute;
pointer-events: none;
}
/* ═══ 1 · Hero — the overture ═══
No grain, no starfield. The opening is a LIVING aurora field: four
pre-painted colour blobs drifting on the compositor (translate/scale
only, softness baked into the stops — the c-mesh discipline at hero
scale), light rays turning slowly behind the lead device, and the brand
line landing in three staged beats. Every entrance is a from-only
keyframe with `backwards` fill, so the finished frame IS the author
state — parallax, tilt and floats resume untouched after the overture,
and with JS off the page simply opens settled (M1). */
.m-hero {
position: relative;
overflow: clip;
min-block-size: 100svh;
display: grid;
grid-template-rows: 1fr auto;
justify-items: center;
padding-block-start: clamp(104px, 13svh, 144px);
background: radial-gradient(130% 100% at 50% -24%, #171441, var(--mid) 64%);
}
/* The mascot stands among the devices — real character, not ambient glow.
The render's rectangular ground is feathered away by the mask; the float
loop lives on the img so it can never fight the figure's positioning
translate. */
.m-hero__q {
/* Floats in the open air to the right of the headline — anchored to the
SECTION, beside the copy block. Hidden below 1280px, where it would
collide with the lead paragraph. */
position: absolute;
z-index: 1;
margin: 0;
inset-block-start: clamp(170px, 24svh, 250px);
inset-inline-end: clamp(24px, 6vw, 120px);
inline-size: clamp(180px, 15vw, 245px);
rotate: 4deg;
pointer-events: none;
-webkit-mask-image: radial-gradient(ellipse 66% 78% at 50% 52%, #000 42%, transparent 70%);
mask-image: radial-gradient(ellipse 66% 78% at 50% 52%, #000 42%, transparent 70%);
animation: m-q-in 800ms var(--ease-reveal) backwards 820ms;
}
.m-hero__q img {
inline-size: 100%;
block-size: auto;
}
@keyframes m-q-in {
from {
opacity: 0;
}
}
[data-on] .m-hero__q img {
animation: m-float 8s var(--ease-in-out) -2.5s infinite alternate;
}
@media (max-width: 1279px) {
.m-hero__q {
display: none;
}
}
.m-hero__copy {
position: relative;
z-index: 1;
display: grid;
justify-items: center;
gap: clamp(16px, 2svh, 24px);
text-align: center;
padding-inline: var(--gutter);
max-inline-size: 960px;
align-content: center;
}
.m-hero__kick {
display: inline-flex;
align-items: center;
gap: 9px;
font-size: var(--t-meta);
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #cdcdea;
padding: 8px 16px;
border-radius: var(--r-pill);
background: rgb(var(--gl-violet) / 0.12);
border: 1px solid rgb(var(--gl-violet) / 0.34);
box-shadow: 0 0 26px -6px rgb(var(--gl-violet) / 0.5);
}
.m-hero__kick::before {
content: "";
inline-size: 6px;
block-size: 6px;
border-radius: 50%;
background: rgb(var(--gl-lilac));
box-shadow: 0 0 10px rgb(var(--gl-lilac));
}
/* The three-beat brand line. Each word rises out of its own clipped slot;
the padding/negative-margin pair keeps descenders inside the clip. */
.m-hero h1 {
display: flex;
flex-wrap: wrap;
justify-content: center;
column-gap: 0.26em;
line-height: 1;
}
.hw {
display: inline-block;
overflow: clip;
padding-block: 0.14em;
margin-block: -0.14em;
}
.hw i {
display: inline-block;
font-style: normal;
animation: m-word 760ms var(--ease-reveal) backwards;
animation-delay: calc(180ms + var(--hd, 0) * 140ms);
}
@keyframes m-word {
from {
translate: 0 120%;
}
}
.hw--g i {
background: linear-gradient(100deg, #a5b4fc 5%, #7dd3fc 52%, #86efac 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
padding-inline: 0.08em;
margin-inline: -0.08em;
}
.m-hero__lead {
font-size: var(--t-lead);
line-height: 1.55;
color: #a9aaca;
max-inline-size: 54ch;
text-wrap: pretty;
}
.m-hero__actions {
display: grid;
justify-items: center;
gap: 14px;
}
.m-hero__note {
font-size: var(--t-meta);
color: var(--text-3);
}
/* The stage: three real screens over a pool of light. */
.m-hero__stage {
position: relative;
z-index: 1;
inline-size: 100%;
block-size: clamp(340px, 46svh, 500px);
margin-block-start: clamp(20px, 3svh, 44px);
}
.m-hero__stage::before {
content: "";
position: absolute;
inset: auto -14% -46% -14%;
block-size: 120%;
pointer-events: none;
background: radial-gradient(
52% 68% at 50% 100%,
rgb(var(--gl-violet) / 0.5),
rgb(var(--gl-violet) / 0.15) 46%,
transparent 72%
),
radial-gradient(30% 42% at 50% 100%, rgb(var(--gl-lilac) / 0.55), transparent 68%),
radial-gradient(76% 96% at 50% 106%, rgb(var(--gl-sky) / 0.12), transparent 74%);
}
.m-hero__dev {
/* Anchored to the stage TOP and growing downward, so a tall phone can
only ever sink below the fold (section clip crops it) — it can never
climb up into the copy. */
position: absolute;
inset-block-start: 0;
inset-inline-start: 50%;
translate: 0 calc((var(--p, 0.32) - 0.32) * var(--depth, 0) * -120px);
will-change: translate;
}
.m-hero__pos {
translate: calc(-50% + var(--ox, 0px)) var(--oy, 0px);
rotate: var(--tilt, 0deg);
animation: m-dev-in 900ms var(--ease-reveal) backwards;
animation-delay: var(--dd, 420ms);
}
/* from-only: interpolates INTO the author transform, so the entrance can
never pin the parallax/positioning values it animates through. */
@keyframes m-dev-in {
from {
opacity: 0;
translate: calc(-50% + var(--ox, 0px)) calc(var(--oy, 0px) + 72px);
}
}
.m-hero__dev--lead {
z-index: 3;
--depth: 0.5;
}
.m-hero__dev--lead .m-hero__pos {
--oy: 0px;
--dd: 640ms;
}
.m-hero__dev--lead .c-phone {
--pw: clamp(224px, 24vw, 300px);
box-shadow: var(--sh-phone), 0 0 90px -12px rgb(var(--gl-violet) / 0.55),
inset 0 1px 0 rgb(255 255 255 / 0.22);
}
.m-hero__dev--l,
.m-hero__dev--r {
z-index: 2;
}
.m-hero__dev--l {
--depth: 0.95;
}
.m-hero__dev--r {
--depth: 0.72;
}
.m-hero__dev--l .m-hero__pos {
--ox: clamp(-330px, -24vw, -230px);
--oy: 12%;
--tilt: -9deg;
--dd: 380ms;
}
.m-hero__dev--r .m-hero__pos {
--ox: clamp(230px, 24vw, 330px);
--oy: 15%;
--tilt: 9deg;
--dd: 500ms;
}
.m-hero__dev--l .c-phone,
.m-hero__dev--r .c-phone {
--pw: clamp(158px, 17vw, 226px);
filter: brightness(0.62) saturate(0.92);
}
/* The lead leans toward the pointer (initTilt writes --tx/--ty). */
.m-hero__dev--lead .c-phone {
transform: perspective(1100px) rotateY(var(--tx, 0deg)) rotateX(var(--ty, 0deg));
}
/* Idle float, gated: only while the hero is on screen. */
[data-on] .m-hero__dev--lead .c-phone {
animation: m-float 7s var(--ease-in-out) infinite alternate;
}
[data-on] .m-hero__dev--l .c-phone {
animation: m-float 9s var(--ease-in-out) -3s infinite alternate;
}
[data-on] .m-hero__dev--r .c-phone {
animation: m-float 8s var(--ease-in-out) -5s infinite alternate;
}
@keyframes m-float {
from {
translate: 0 0;
}
to {
translate: 0 -10px;
}
}
/* Floating data chips: a positioned wrapper carries parallax; the chip
itself carries entrance + endless bob (sequential, so no property war). */
.m-hero__chip {
position: absolute;
z-index: 4;
translate: 0 calc((var(--p, 0.32) - 0.32) * var(--depth, 0.6) * -90px);
}
.m-hero__chip .m-float {
position: static;
translate: none;
}
[data-on] .m-hero__chip .m-float {
animation: m-chip-in 700ms var(--ease-reveal) backwards var(--cd, 1.15s),
m-bob var(--bd, 5.4s) var(--ease-in-out) calc(var(--cd, 1.15s) + 700ms) infinite;
}
@keyframes m-chip-in {
from {
opacity: 0;
translate: 0 18px;
}
}
@keyframes m-bob {
0%,
100% {
translate: 0 0;
}
50% {
translate: 0 -7px;
}
}
@media (max-width: 767px) {
.m-hero__chip {
display: none;
}
}
.m-hero__cue {
position: absolute;
z-index: 4;
inset-block-end: 18px;
inset-inline-start: 50%;
translate: -50% 0;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: var(--t-micro);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #b9bada;
opacity: clamp(0, 1 - var(--p, 0) * 9, 1);
}
.m-hero__cue svg {
inline-size: 12px;
block-size: 12px;
}
[data-on] .m-hero__cue svg {
animation: m-cue 1.6s var(--ease-in-out) infinite;
}
@keyframes m-cue {
0%,
100% {
translate: 0 0;
opacity: 1;
}
50% {
translate: 0 4px;
opacity: 0.5;
}
}
@media (max-width: 767px) {
.m-hero__dev--l .m-hero__pos {
--ox: -31vw;
--oy: 16%;
}
.m-hero__dev--r .m-hero__pos {
--ox: 31vw;
--oy: 18%;
}
.m-hero__dev--l .c-phone,
.m-hero__dev--r .c-phone {
--pw: 128px;
}
.m-hero__dev--lead .c-phone {
--pw: 224px;
}
}
/* ═══ 2 · The statement — words ignite as you pass ═══ */
.m-said {
position: relative;
padding-block: var(--section-y-tall);
background: var(--mid);
}
.m-said h2 {
max-inline-size: 24ch;
margin-inline: auto;
text-align: center;
font-size: var(--t-scene);
line-height: 1.14;
text-wrap: balance;
}
.m-said__b {
display: block; /* the answer gets its own lines */
margin-block-start: 0.25em;
}
.m-said .w {
opacity: calc(0.13 + 0.87 * clamp(0, (var(--p, 1) - (0.12 + var(--wi, 0) * 0.026)) * 14, 1));
transition: opacity 80ms linear;
}
.m-said__b .w {
background: linear-gradient(100deg, #b5c0ff 0%, #8fd8ff 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
padding: 0.06em 0.08em;
margin: -0.06em -0.08em;
}
.m-said__coda {
text-align: start;
font-size: var(--t-lead);
color: var(--text-2);
max-inline-size: 34ch;
}
.m-said__after {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
margin-block-start: clamp(28px, 4vw, 44px);
}
/* ═══ 3 · How the number is made — the pin ═══ */
.m-make {
position: relative;
background: var(--mid);
}
.m-make__track {
position: relative;
}
.m-make__stage {
position: relative;
padding-block: var(--section-y);
}
/* The scene's light: a low violet pool behind the ledger. */
.m-make__stage::before {
content: "";
position: absolute;
inset: 10% -10% 0 30%;
pointer-events: none;
background: radial-gradient(46% 42% at 68% 52%, rgb(var(--gl-violet) / 0.17), transparent 72%);
}
.m-make__grid {
position: relative;
display: grid;
gap: clamp(28px, 4vw, 72px);
align-items: center;
}
.m-make__caps {
display: grid;
gap: 18px;
align-content: start;
}
.m-make__cap {
padding-block: 4px;
}
.m-make__cap b {
display: block;
font-size: 1.125rem;
font-weight: 800;
letter-spacing: -0.01em;
margin-block-end: 6px;
}
.m-make__cap p {
font-size: var(--t-body);
color: var(--text-2);
max-inline-size: 38ch;
}
.m-make__run {
display: inline-block;
margin-block-start: 10px;
font-size: var(--t-meta);
font-weight: 800;
font-variant-numeric: tabular-nums;
color: color-mix(in srgb, var(--lc, var(--brand-soft)) 82%, #fff);
background: color-mix(in srgb, var(--lc, var(--brand-soft)) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--lc, var(--brand-soft)) 34%, transparent);
border-radius: var(--r-pill);
padding: 5px 12px;
}
/* Ledger build: rows above the current beat hide ONLY while the pin is
driving (data-beat present) — the no-JS and mobile default is the full
ledger (M1). */
[data-scrub][data-beat] .m-ledger :is(.m-ledger__row, .m-ledger__div, .m-ledger__res) {
transition: opacity 460ms var(--ease-reveal), translate 460ms var(--ease-reveal);
}
[data-scrub][data-beat="0"] .m-ledger :is([data-b="1"], [data-b="2"], [data-b="3"], [data-b="4"]),
[data-scrub][data-beat="1"] .m-ledger :is([data-b="2"], [data-b="3"], [data-b="4"]),
[data-scrub][data-beat="2"] .m-ledger :is([data-b="3"], [data-b="4"]),
[data-scrub][data-beat="3"] .m-ledger [data-b="4"] {
opacity: 0;
translate: 0 18px;
}
/* Captions: stacked and all visible by default; while pinned they occupy
one cell and crossfade. */
@media (min-width: 900px) and (min-height: 640px) {
html.js .m-make__track {
block-size: calc((var(--beats, 5) - 1) * 92svh + 100svh);
}
html.js .m-make__stage {
position: sticky;
inset-block-start: 0;
min-block-size: 100svh;
display: grid;
align-content: center;
}
html.js .m-make__grid {
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}
html.js [data-scrub][data-beat] .m-make__caps {
display: grid;
}
html.js [data-scrub][data-beat] .m-make__cap {
grid-area: 1 / 1;
opacity: 0;
translate: 0 12px;
transition: opacity 420ms var(--ease-reveal), translate 420ms var(--ease-reveal);
}
html.js [data-scrub][data-beat] .m-make__cap.is-on {
opacity: 1;
translate: 0 0;
transition-delay: 60ms;
}
}
/* ═══ 4 · Product tours ═══ */
.m-tour {
position: relative;
overflow: clip;
padding-block: clamp(56px, 6.5vw, 104px);
background: var(--mid);
}
.m-tour__grid {
display: grid;
gap: clamp(32px, 5vw, 84px);
align-items: center;
}
@media (min-width: 900px) {
.m-tour__grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.m-tour--flip .m-tour__grid > :first-child {
order: 2;
}
}
.m-tour h2 {
font-size: var(--t-scene);
max-inline-size: 16ch;
margin-block: 10px 16px;
}
.m-tour__copy p {
max-inline-size: 52ch;
color: var(--text-2);
}
.m-tour__media {
position: relative;
display: grid;
justify-items: center;
padding-block: 26px;
}
.m-tour__media::before {
content: "";
position: absolute;
inset: -6% -18%;
pointer-events: none;
background: radial-gradient(
44% 52% at 50% 52%,
rgb(var(--tc, var(--gl-violet)) / 0.24),
rgb(var(--tc, var(--gl-violet)) / 0.07) 52%,
transparent 74%
);
}
.m-tour__media .c-phone {
--pw: clamp(230px, 24vw, 296px);
rotate: var(--lean, -3deg);
box-shadow: var(--sh-phone), 0 0 80px -16px rgb(var(--tc, var(--gl-violet)) / 0.5),
inset 0 1px 0 rgb(255 255 255 / 0.22);
}
.m-tour--flip .m-tour__media .c-phone {
--lean: 3deg;
}
/* ═══ 5 · Bento — the toolset ═══ */
.m-bento {
position: relative;
padding-block: var(--section-y);
background: var(--mid);
}
.m-bento__grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 14px;
margin-block-start: clamp(30px, 4vw, 52px);
}
.m-cell {
grid-column: span 12;
}
@media (min-width: 640px) {
.m-cell {
grid-column: span 6;
}
.m-cell--w {
grid-column: span 12;
}
}
@media (min-width: 1024px) {
.m-cell {
grid-column: span 3; /* 8 cells → two even rows of four */
}
}
/* The supervisor: peeking in from the header's far right — anchored to the
WIDE container, not the centred text block, so it can never sit on the
headline. */
.m-bento > .l-container {
position: relative;
}
.m-bento__peek {
position: absolute;
inset-block-start: 6px;
inset-inline-end: clamp(8px, 3vw, 48px);
rotate: 6deg;
--ring: var(--gl-lilac);
}
@media (max-width: 1023px) {
.m-bento__peek {
display: none;
}
}
/* ═══ 6 · Ask Qashly ═══ */
.m-ai {
position: relative;
overflow: clip;
padding-block: var(--section-y);
background: var(--mid);
}
.m-ai::before {
content: "";
position: absolute;
inset: -6% -20% auto 30%;
block-size: 70%;
pointer-events: none;
background: radial-gradient(44% 46% at 62% 38%, rgb(var(--gl-sky) / 0.2), transparent 70%),
radial-gradient(30% 40% at 78% 60%, rgb(var(--gl-violet) / 0.24), transparent 72%);
}
.m-ai .s-console {
position: relative;
}
.m-ai .s-console .c-phone {
box-shadow: var(--sh-phone), 0 0 84px -16px rgb(var(--gl-sky) / 0.45),
inset 0 1px 0 rgb(255 255 255 / 0.22);
}
/* ═══ 7 · Privacy ═══ */
.m-priv {
position: relative;
overflow: clip;
padding-block: var(--section-y);
background: var(--mid);
}
.m-priv::before {
content: "";
position: absolute;
inset: 12% -14% auto -14%;
block-size: 56%;
pointer-events: none;
background: radial-gradient(46% 44% at 50% 40%, rgb(var(--gl-mint) / 0.1), transparent 72%);
}
.m-priv__guard {
position: relative;
margin-inline: auto;
margin-block-start: clamp(26px, 3.5vw, 44px);
border-color: rgb(var(--gl-mint) / 0.38);
--ring: var(--gl-mint);
}
.m-priv__guard + .m-priv__claim {
margin-block-start: 16px;
}
.m-priv__claim {
position: relative;
text-align: center;
font-family: var(--font-disp);
font-weight: 700;
font-synthesis: none;
font-size: var(--t-scene);
letter-spacing: -0.02em;
line-height: 1.05;
max-inline-size: 18ch;
margin-inline: auto;
margin-block: clamp(30px, 4vw, 52px);
text-wrap: balance;
}
.m-priv__claim em {
font-style: normal;
background: linear-gradient(100deg, #9ff0bd, #7dd3fc);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
padding: 0.06em 0.1em;
margin: -0.06em -0.1em;
}
.m-priv__cols {
position: relative;
display: grid;
gap: 14px;
}
@media (min-width: 900px) {
.m-priv__cols {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
align-items: stretch;
}
}
.m-priv__col {
padding: clamp(20px, 2.2vw, 30px);
display: grid;
gap: 16px;
align-content: start;
}
/* The tag-cloud card is naturally shorter — let it be, rather than
stretching to match its neighbour with a slab of empty glass. */
.m-priv__col--on {
align-self: start;
}
.m-priv__col h3 {
font-size: var(--t-micro);
font-weight: 700;
letter-spacing: 0.11em;
text-transform: uppercase;
display: flex;
align-items: center;
gap: 9px;
}
.m-priv__col--on h3 {
color: #a9f0c4;
}
.m-priv__col--out h3 {
color: #a8d9f8;
}
.m-priv__col h3 svg {
inline-size: 15px;
block-size: 15px;
flex: none;
}
.m-priv__foot {
font-size: 0.875rem;
color: var(--text-3);
}
.m-priv__notes {
max-inline-size: 70ch;
margin-inline: auto;
margin-block-start: clamp(28px, 4vw, 44px);
display: grid;
gap: 14px;
text-align: center;
}
.m-priv__notes p {
color: var(--text-2);
font-size: var(--t-body);
}
/* ═══ 8 · UK tax ═══ */
.m-tax {
position: relative;
overflow: clip;
padding-block: var(--section-y);
background: var(--mid);
}
.m-tax__grid {
display: grid;
gap: clamp(32px, 5vw, 84px);
align-items: center;
}
@media (min-width: 900px) {
.m-tax__grid {
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}
}
.m-tax h2 {
font-size: var(--t-scene);
max-inline-size: 16ch;
margin-block: 10px 16px;
}
.m-tax__copy p {
max-inline-size: 54ch;
color: var(--text-2);
}
.m-tax__kick {
display: inline-block;
margin-block-start: 18px;
font-size: var(--t-body);
font-weight: 800;
color: #ffd88a;
background: rgb(var(--gl-amber) / 0.09);
border: 1px solid rgb(var(--gl-amber) / 0.32);
border-radius: var(--r-pill);
padding: 9px 16px;
box-shadow: 0 0 34px -8px rgb(var(--gl-amber) / 0.5);
}
.m-tax__micro {
margin-block-start: 12px;
font-size: var(--t-meta);
color: var(--text-3);
}
.m-tax__stage {
position: relative;
padding-block: 30px;
}
/* The desk lamp: a warm cone from above the card. */
.m-tax__stage::before {
content: "";
position: absolute;
inset: -18% -12% 0 -12%;
pointer-events: none;
background: radial-gradient(40% 50% at 50% 30%, rgb(var(--gl-amber) / 0.16), transparent 70%);
}
/* ═══ 9 · Stats ═══ */
.m-stats {
padding-block: var(--section-y-tight);
background: var(--mid);
}
.m-stats__grid {
display: grid;
gap: clamp(22px, 3vw, 40px);
}
@media (min-width: 640px) {
.m-stats__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.m-stats__grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
/* ═══ 10 · Pricing / 11 · FAQ ═══ */
.m-price {
position: relative;
overflow: clip;
padding-block: var(--section-y);
background: var(--mid);
}
.m-price::before {
content: "";
position: absolute;
inset: 6% -16% auto -16%;
block-size: 50%;
pointer-events: none;
background: radial-gradient(42% 44% at 50% 30%, rgb(var(--gl-violet) / 0.13), transparent 72%);
}
.m-faqs {
padding-block: var(--section-y-tight) var(--section-y);
background: var(--mid);
}
/* ═══ 12 · The close ═══ */
.m-end {
position: relative;
overflow: clip;
/* Tight on top and a snug anchor offset: "Get Qashly" (#get) must land
with the WHOLE closer framed — quokka, headline, badges — not a
viewport of padding with the mascot's ears at the fold. */
padding-block: clamp(32px, 4svh, 52px) var(--section-y);
/* html's scroll-padding-top (88px) already clears the nav; the default
96px :target margin on top of it is what buried the closer. */
scroll-margin-top: 0;
background: var(--mid);
text-align: center;
}
/* Dawn: the one warm flood on the page, rising from the footer line. */
.m-end::before {
content: "";
position: absolute;
inset: auto -20% -34% -20%;
block-size: 80%;
pointer-events: none;
background: radial-gradient(
50% 62% at 50% 100%,
rgb(var(--gl-ember) / 0.34),
rgb(var(--gl-ember) / 0.1) 48%,
transparent 72%
),
radial-gradient(70% 80% at 50% 108%, rgb(var(--gl-violet) / 0.22), transparent 74%);
}
.m-end__stack {
position: relative;
display: grid;
justify-items: center;
gap: 18px;
}
.m-end h2 {
font-size: clamp(2.25rem, 1.6rem + 2.8vw, 4rem);
max-inline-size: 16ch;
text-wrap: balance;
}
.m-end__quokka {
inline-size: min(58vw, 300px);
margin-block-start: 8px;
-webkit-mask-image: radial-gradient(ellipse 68% 80% at 50% 54%, #000 44%, transparent 70%);
mask-image: radial-gradient(ellipse 68% 80% at 50% 54%, #000 44%, transparent 70%);
}
.m-end__quokka img {
inline-size: 100%;
block-size: auto;
}
}
/* ── Reduced motion for the new loops ────────────────────────────────────── */
@layer motion {
@media (prefers-reduced-motion: reduce) {
[data-on] :is(.m-hero__dev--lead, .m-hero__dev--l, .m-hero__dev--r) .c-phone,
[data-on] .m-hero__cue svg,
[data-on] .m-hero__q img,
[data-on] .m-hero__chip .m-float,
.m-hero__pos,
.m-hero__q,
.hw i {
animation: none !important;
}
.m-said .w {
transition: none;
}
.m-float {
translate: 0 0;
}
/* The pin stays (scroll-driven is user-driven), but beat changes become
instant swaps rather than crossfades. */
[data-scrub][data-beat] .m-ledger :is(.m-ledger__row, .m-ledger__div, .m-ledger__res),
html.js [data-scrub][data-beat] .m-make__cap {
transition: none !important;
}
/* Parallax and pointer-tilt retire to their resting frame. */
.m-hero__dev {
translate: 0 0;
}
.m-hero__dev--lead .c-phone {
transform: none;
}
}
/* The JS-mirrored attribute must agree with the OS preference
(motion.js re-syncs live). */
html[data-motion="reduce"] [data-on] :is(.m-hero__dev--lead, .m-hero__dev--l, .m-hero__dev--r) .c-phone,
html[data-motion="reduce"] [data-on] .m-hero__cue svg,
html[data-motion="reduce"] [data-on] .m-hero__q img,
html[data-motion="reduce"] [data-on] .m-hero__chip .m-float,
html[data-motion="reduce"] .m-hero__pos,
html[data-motion="reduce"] .m-hero__q,
html[data-motion="reduce"] .hw i {
animation: none !important;
}
html[data-motion="reduce"] .m-hero__dev {
translate: 0 0;
}
html[data-motion="reduce"] .m-hero__dev--lead .c-phone {
transform: none;
}
html[data-motion="reduce"] .m-said .w {
transition: none;
}
html[data-motion="reduce"] .m-float {
translate: 0 0;
}
html[data-motion="reduce"] [data-scrub][data-beat] .m-ledger :is(.m-ledger__row, .m-ledger__div, .m-ledger__res),
html.js[data-motion="reduce"] [data-scrub][data-beat] .m-make__cap {
transition: none !important;
}
}
/* ── The console's undo affordance (re-homed from the retired act layer) ── */
@layer components {
.s-console__undo h3 {
font-size: var(--t-h3);
margin-block-end: 6px;
}
.s-console__undo p {
color: var(--text-2);
max-width: 52ch;
}
.ph-action__undo {
cursor: pointer;
user-select: none;
}
.ph-action[data-undone] {
opacity: 0.62;
}
.ph-action[data-undone] .ph-action__row {
text-decoration: line-through;
text-decoration-color: rgb(255 255 255 / 0.5);
}
.ph-action__undone {
display: flex;
align-items: center;
gap: calc(7 * var(--u));
font-size: calc(12 * var(--u));
font-weight: 700;
color: var(--income);
}
/* The quokka sticker: the mascot's one appearance outside the finale. */
.ph-action__undone::before {
content: "";
inline-size: calc(22 * var(--u));
aspect-ratio: 1;
border-radius: 50%;
background: url("/assets/img/hero/quokka-320.webp") 54% 12% / 300% no-repeat;
border: 1.5px solid rgb(134 239 172 / 0.5);
}
}