/* ==========================================================================
Job Creatives — one-pager
Tokens → reset → type → primitives → sections.
Motion follows the house rules: transform/opacity only, strong custom
ease-out, UI under 300ms, marketing/explanatory allowed to run longer,
hover gated to fine pointers, reduced motion honoured everywhere.
========================================================================== */
:root {
--nav-h: 68px; /* .nav__inner: 40px control + 14px padding each side */
color-scheme: light;
/* paper & ink */
--paper: #FBFAFD;
--paper-2: #F4F2FA;
--card: #FFFFFF;
--ink: #16121F;
--ink-2: #453F58;
--ink-3: #6E6784;
--ink-4: #736D85;
--line: rgba(22, 18, 31, .10);
--line-2: rgba(22, 18, 31, .055);
/* accent */
--violet: #5B3DF5;
--violet-lift: #7C5CFF;
--violet-deep: #3D22C4;
--sky: #3E9BF0;
--sky-soft: #A6D6FB;
--amber: #E8933A;
/* night */
--night: #0C0916;
--night-2: #14101F;
--night-3: #1B1629;
--night-line: rgba(255, 255, 255, .10);
--night-ink: #F4F2F9;
--night-ink-2: rgba(244, 242, 249, .68);
--night-ink-3: rgba(244, 242, 249, .56);
/* type */
--sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
/* motion */
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
/* shape */
--r-sm: 10px;
--r-md: 16px;
--r-lg: 22px;
--r-xl: 30px;
/* layout */
--wrap: 1140px;
--gutter: clamp(20px, 5vw, 40px);
--sec-y: clamp(84px, 11vw, 150px);
--shadow-sm: 0 1px 2px rgba(22,18,31,.05), 0 1px 1px rgba(22,18,31,.03);
--shadow-md: 0 1px 2px rgba(22,18,31,.04), 0 10px 24px -8px rgba(22,18,31,.10);
--shadow-lg: 0 1px 2px rgba(22,18,31,.04), 0 20px 50px -16px rgba(22,18,31,.14),
0 44px 90px -44px rgba(61,34,196,.30);
}
/* --------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
margin: 0;
background: var(--paper);
color: var(--ink-2);
font-family: var(--sans);
font-size: 17px;
line-height: 1.62;
font-weight: 400;
letter-spacing: -.011em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: clip;
}
/* Paper grain. One cheap fixed layer; it is what keeps the purple warm. */
body::after {
content: "";
position: fixed;
inset: 0;
z-index: 9998;
pointer-events: none;
opacity: .05;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p, ul, ol, dl, dd, blockquote, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: rgba(91, 61, 245, .16); color: var(--ink); }
:focus-visible {
outline: 2px solid var(--violet);
outline-offset: 3px;
border-radius: 4px;
}
.skip {
position: fixed;
top: 12px; left: 12px;
z-index: 10000;
padding: 10px 16px;
border-radius: 999px;
background: var(--ink);
color: #fff;
font-size: .85rem;
transform: translateY(-160%);
transition: transform 200ms var(--ease-out);
}
.skip:focus { transform: none; }
/* ---------------------------------------------------------------- type -- */
.display {
font-family: var(--serif);
font-optical-sizing: none;
font-variation-settings: "opsz" 84, "SOFT" 34, "WONK" 1;
font-weight: 400;
color: var(--ink);
letter-spacing: -.022em;
line-height: 1.06;
font-size: clamp(2rem, 1.15rem + 3.5vw, 3.35rem);
text-wrap: balance;
}
.display em {
font-style: italic;
font-variation-settings: "opsz" 84, "SOFT" 60, "WONK" 1;
color: var(--violet-deep);
}
.display--xl {
font-size: clamp(2.55rem, 1.1rem + 6vw, 4.6rem);
letter-spacing: -.03em;
line-height: 1.015;
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: .6em;
font-family: var(--mono);
font-size: .715rem;
font-weight: 500;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ink-3);
}
.eyebrow__dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--violet);
box-shadow: 0 0 0 4px rgba(91, 61, 245, .13);
}
.label {
font-family: var(--mono);
font-size: .68rem;
font-weight: 500;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ink-4);
}
.lede {
font-size: clamp(1.03rem, .96rem + .34vw, 1.2rem);
line-height: 1.6;
color: var(--ink-2);
max-width: 34em;
text-wrap: pretty;
}
.lede--quiet { color: var(--ink-3); margin-top: .85em; }
.prose { color: var(--ink-2); text-wrap: pretty; }
.prose + .prose { margin-top: 1.1em; }
.prose--strong { color: var(--ink); font-weight: 500; }
/* ---------------------------------------------------------- primitives -- */
.wrap {
width: 100%;
max-width: var(--wrap);
margin-inline: auto;
padding-inline: var(--gutter);
}
.section {
position: relative;
padding-block: var(--sec-y);
}
/* The tint lives on a layer BELOW the trail (-2 vs -1) rather than on the
section itself. A section background paints with the section's own box, which
would sit on top of the trail and swallow the comet over this one section. */
.section--tinted::before {
content: "";
position: absolute;
inset: 0;
z-index: -2;
background: var(--paper-2);
pointer-events: none;
}
.sec-head { max-width: 46rem; margin-bottom: clamp(40px, 5vw, 68px); }
.sec-head--narrow { max-width: 40rem; }
.sec-head--center { max-width: 42rem; margin-inline: auto; text-align: center; }
.sec-head .eyebrow { margin-bottom: 1.15em; }
.sec-head__sub {
margin-top: 1.15em;
font-size: clamp(1rem, .95rem + .25vw, 1.12rem);
color: var(--ink-3);
max-width: 36em;
text-wrap: pretty;
}
.sec-head--center .sec-head__sub { margin-inline: auto; }
.sec-head__sub--tight { margin-top: .7em; color: var(--ink-2); }
.closer {
margin: clamp(40px, 5vw, 64px) auto 0;
max-width: 34em;
text-align: center;
font-family: var(--serif);
font-optical-sizing: none;
font-variation-settings: "opsz" 28, "SOFT" 50, "WONK" 0;
font-size: clamp(1.14rem, 1rem + .55vw, 1.42rem);
line-height: 1.42;
letter-spacing: -.015em;
color: var(--ink);
text-wrap: pretty;
}
.closer em { font-style: italic; color: var(--violet-deep); }
.closer--left { margin-inline: 0; text-align: left; }
/* buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 48px;
padding-inline: 1.45em;
border: 0;
border-radius: 999px;
background-image: linear-gradient(180deg, #7C5CFF 0%, #5B3DF5 54%, #4A2CE0 100%);
color: #fff;
font-size: .96rem;
font-weight: 500;
letter-spacing: -.008em;
cursor: pointer;
white-space: nowrap;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .30),
0 1px 2px rgba(22, 18, 31, .18),
0 10px 26px -10px rgba(91, 61, 245, .75);
transition: transform 160ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
.btn--lg { height: 54px; padding-inline: 1.75em; font-size: 1rem; }
.btn--sm { height: 40px; padding-inline: 1.1em; font-size: .875rem; }
.btn:active { transform: scale(.97); }
/* Hover: the violet fill washes over to violet-and-blue. background-image
can't transition, so the second gradient is a layer that fades in behind the
label. Nothing here changes the button's box, so hovering never nudges the
elements around it. */
.btn { position: relative; isolation: isolate; }
.btn::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
pointer-events: none;
background-image: linear-gradient(100deg, #7C5CFF 0%, #5B7CF5 52%, #3E9BF0 100%);
opacity: 0;
transition: opacity 320ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
.btn:hover {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .34),
0 1px 2px rgba(22, 18, 31, .18),
0 16px 38px -12px rgba(62, 155, 240, .8);
}
.btn:hover::before { opacity: 1; }
}
.btn:focus-visible::before { opacity: 1; }
.btn--on-dark {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .34),
0 1px 2px rgba(0, 0, 0, .4),
0 14px 40px -12px rgba(124, 92, 255, .85);
}
.cta-block { margin-top: clamp(28px, 3.4vw, 40px); }
.cta-block--center { text-align: center; }
.microcopy {
margin-top: .95em;
font-size: .875rem;
color: var(--ink-3);
max-width: 30em;
}
.cta-block--center .microcopy { margin-inline: auto; }
.link-arrow {
display: inline-flex;
align-items: baseline;
gap: .45em;
margin-top: 1.6em;
font-size: .92rem;
color: var(--ink-3);
text-decoration: underline;
text-decoration-color: var(--line);
text-decoration-thickness: 1px;
text-underline-offset: 5px;
transition: color 200ms ease, text-decoration-color 200ms ease;
}
.link-arrow__ico {
display: inline-block;
transition: transform 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
.link-arrow:hover { color: var(--ink); text-decoration-color: var(--violet); }
.link-arrow:hover .link-arrow__ico { transform: translateX(3px); }
}
.tag {
display: inline-flex;
align-items: center;
height: 28px;
padding-inline: .8em;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--card);
font-family: var(--mono);
font-size: .68rem;
font-weight: 500;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ink-3);
white-space: nowrap;
}
/* ------------------------------------------------------------- aurora -- */
/* Soft radial gradients, not blur filters — same look, none of the cost. */
.aurora {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
.blob {
position: absolute;
display: block;
border-radius: 50%;
will-change: transform;
}
.blob--violet {
width: 78vw; height: 78vw;
max-width: 980px; max-height: 980px;
top: -34%; right: -18%;
background: radial-gradient(closest-side, rgba(124, 92, 255, .40), rgba(124, 92, 255, 0));
animation: drift-a 26s var(--ease-in-out) infinite alternate;
}
.blob--sky {
width: 62vw; height: 62vw;
max-width: 760px; max-height: 760px;
top: 8%; left: -22%;
background: radial-gradient(closest-side, rgba(90, 175, 245, .34), rgba(90, 175, 245, 0));
animation: drift-b 32s var(--ease-in-out) infinite alternate;
}
.blob--orchid {
width: 48vw; height: 48vw;
max-width: 560px; max-height: 560px;
bottom: -22%; left: 26%;
background: radial-gradient(closest-side, rgba(176, 138, 255, .30), rgba(176, 138, 255, 0));
animation: drift-c 38s var(--ease-in-out) infinite alternate;
}
@keyframes drift-a { to { transform: translate3d(-6%, 5%, 0) scale(1.1); } }
@keyframes drift-b { to { transform: translate3d(8%, -4%, 0) scale(1.14); } }
@keyframes drift-c { to { transform: translate3d(-9%, -6%, 0) scale(1.08); } }
/* Pointer parallax. JS writes --px/--py (-1..1) onto the aurora of whichever
section the cursor is in; each orb answers at its own depth, so the field has
a little dimension without ever competing with the copy. `translate` is its
own property, so it layers over the drift keyframes instead of fighting them,
and both stay on the compositor. The long transition is the point: the orbs
trail the cursor rather than tracking it, which reads as depth, not cursor UI. */
.aurora { --px: 0; --py: 0; }
.blob {
translate: calc(var(--px) * var(--depth, 24px)) calc(var(--py) * var(--depth, 24px));
transition: translate 820ms var(--ease-out);
}
.blob--violet { --depth: 30px; }
.blob--sky { --depth: -38px; }
.blob--orchid { --depth: 22px; }
/* Sections that were flat get the orb trail instead of a static field — the
orbs chase the cursor, each at its own lag, so they string out into a comet
behind it and gather back into one when the pointer stops.
Only `transform` and the container's `opacity` ever change, so a moving
cursor costs one compositor update per frame and no layout or paint. */
.trail {
position: fixed;
inset: 0;
overflow: hidden;
pointer-events: none;
/* Behind every in-flow element but still above the page background, so the
comet slides under the copy and across section edges without being clipped. */
z-index: -1;
opacity: 0;
transition: opacity 420ms var(--ease-out);
}
.trail[data-on] { opacity: 1; }
.orb {
position: absolute;
top: 0;
left: 0;
width: var(--size);
height: var(--size);
border-radius: 50%;
will-change: transform;
}
/* Smaller and stronger than instinct suggests: at 30rem the four overlapped
into one pale blob and the trail read as a single smudge. Tapering the size
is what makes it legible as a comet. */
.orb--1 { --size: 21rem; background: radial-gradient(closest-side, rgba(124, 92, 255, .44), rgba(124, 92, 255, 0)); }
.orb--2 { --size: 16rem; background: radial-gradient(closest-side, rgba(90, 175, 245, .38), rgba(90, 175, 245, 0)); }
.orb--3 { --size: 12rem; background: radial-gradient(closest-side, rgba(176, 138, 255, .32), rgba(176, 138, 255, 0)); }
.orb--4 { --size: 8.5rem; background: radial-gradient(closest-side, rgba(108, 198, 245, .26), rgba(108, 198, 245, 0)); }
.aurora--dark .blob--violet { background: radial-gradient(closest-side, rgba(124, 92, 255, .34), rgba(124, 92, 255, 0)); }
.aurora--dark .blob--sky { background: radial-gradient(closest-side, rgba(62, 155, 240, .28), rgba(62, 155, 240, 0)); }
.aurora--dark .blob--orchid { background: radial-gradient(closest-side, rgba(150, 116, 245, .24), rgba(150, 116, 245, 0)); }
.wrap, .section > *:not(.aurora) { position: relative; z-index: 1; }
/* ------------------------------------------------------------- motion -- */
.reveal {
opacity: 0;
transform: translateY(16px);
transition: opacity 640ms var(--ease-out), transform 640ms var(--ease-out);
}
.reveal[data-visible] { opacity: 1; transform: none; }
[data-stagger] > * {
opacity: 0;
transform: translateY(14px) rotate(var(--rot, 0deg));
transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out);
}
[data-stagger][data-visible] > * {
opacity: var(--o, 1);
transform: translateY(var(--dy, 0px)) rotate(var(--rot, 0deg));
}
[data-stagger] > *:nth-child(1) { transition-delay: 0ms; }
[data-stagger] > *:nth-child(2) { transition-delay: 45ms; }
[data-stagger] > *:nth-child(3) { transition-delay: 90ms; }
[data-stagger] > *:nth-child(4) { transition-delay: 135ms; }
[data-stagger] > *:nth-child(5) { transition-delay: 180ms; }
[data-stagger] > *:nth-child(6) { transition-delay: 225ms; }
[data-stagger] > *:nth-child(7) { transition-delay: 260ms; }
[data-stagger] > *:nth-child(8) { transition-delay: 295ms; }
[data-stagger] > *:nth-child(9) { transition-delay: 330ms; }
[data-stagger] > *:nth-child(10) { transition-delay: 360ms; }
[data-stagger] > *:nth-child(11) { transition-delay: 390ms; }
[data-stagger] > *:nth-child(12) { transition-delay: 415ms; }
[data-stagger] > *:nth-child(13) { transition-delay: 440ms; }
[data-stagger] > *:nth-child(14) { transition-delay: 460ms; }
/* No JS: nothing stays hidden. */
html:not(.js) .reveal,
html:not(.js) [data-stagger] > * { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.reveal, [data-stagger] > * {
transform: none !important;
transition-duration: 300ms;
}
.blob { animation: none; translate: none; transition: none; }
.trail { display: none; }
[data-anim], [data-anim] * { animation: none !important; }
}
/* ---------------------------------------------------------------- glow -- */
/* The card hover, shared. Same idea as .half: a real gradient can't live in a
box-shadow, so it's a blurred layer sitting behind the card. Only opacity and
the card's transform animate, so both stay on the compositor.
The wrapper exists to be a positioning parent that is NOT a stacking context
for the card — that's what lets the glow sit under the card's own background. */
.glow {
position: relative;
isolation: isolate; /* keeps the glow under the card, not under the page */
display: flex;
}
.glow > * {
position: relative;
z-index: 1;
flex: 1;
min-width: 0;
transition: transform 280ms var(--ease-out), box-shadow 280ms var(--ease-out);
}
.glow::before {
content: "";
position: absolute;
inset: 10px 2px -12px 2px;
border-radius: var(--r-xl);
background: linear-gradient(122deg, #5FB4F5 0%, #7C5CFF 52%, #C489FF 100%);
filter: blur(18px);
opacity: 0;
transition: opacity 300ms var(--ease-out);
pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
.glow:hover::before { opacity: .52; }
.glow:hover > * { transform: translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) {
.glow:hover > * { transform: none; }
}
/* Two cards opt out: the founding-client note is an aside rather than an offer,
and the "probably not" column shouldn't invite the same hand as the "yes" one. */
.glow--flat::before { content: none; }
@media (hover: hover) and (pointer: fine) {
.glow--flat:hover > * { transform: none; }
}
/* The wrappers inherit the layout roles their cards used to hold.
.glow--tall's row span is set with the bento grid itself, at >=900px only. */
.glow--founding { margin-top: clamp(22px, 2.8vw, 32px); }
.glow--founding > .founding { margin-top: 0; }
/* ============================================================== nav ===== */
.nav {
position: sticky;
top: 0;
z-index: 900;
transition: background-color 260ms ease, box-shadow 260ms ease, backdrop-filter 260ms ease;
}
.nav__inner {
display: flex;
align-items: center;
gap: clamp(16px, 3vw, 40px);
max-width: var(--wrap);
margin-inline: auto;
padding: 14px var(--gutter);
}
.nav[data-stuck] {
background: rgba(251, 250, 253, .74);
-webkit-backdrop-filter: blur(14px) saturate(1.6);
backdrop-filter: blur(14px) saturate(1.6);
box-shadow: 0 1px 0 var(--line-2), 0 10px 30px -22px rgba(22, 18, 31, .5);
}
.wordmark {
display: inline-flex;
align-items: center;
flex: none;
}
/* The lockup already contains the name, so height is the only dimension set;
width follows the 314x72 intrinsic ratio. */
.wordmark__logo {
display: block;
width: auto;
height: 34px;
}
.foot .wordmark__logo { height: 28px; }
.nav__links {
display: none;
gap: 1.6em;
margin-left: auto;
font-size: .9rem;
color: var(--ink-3);
}
.nav__links a { transition: color 180ms ease; }
@media (hover: hover) and (pointer: fine) { .nav__links a:hover { color: var(--ink); } }
.nav .btn { margin-left: auto; }
@media (min-width: 900px) {
.nav__links { display: flex; }
.nav .btn { margin-left: 0; }
}
.btn__short { display: none; }
@media (max-width: 520px) {
.nav .btn { padding-inline: .95em; font-size: .82rem; }
.nav .btn .btn__full { display: none; }
.nav .btn .btn__short { display: inline; }
}
/* ============================================================= hero ===== */
.hero {
position: relative;
display: flex;
flex-direction: column;
/* The nav sits above the hero in flow, so subtract it and the first screen is
the pitch and the proof together, with nothing else peeking in.
min-height, not height: on a short laptop the hero grows rather than clips. */
min-height: calc(100svh - var(--nav-h));
padding-top: clamp(28px, 3.4vw, 50px);
padding-bottom: clamp(18px, 2.2vw, 30px);
overflow: hidden;
}
.hero__grid { flex: 1 0 auto; align-content: center; }
.hero__proof { margin-top: clamp(26px, 3.6vw, 46px); }
.hero__grid {
display: grid;
gap: clamp(48px, 6vw, 76px);
align-items: center;
}
@media (min-width: 940px) {
.hero__grid { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); }
}
.hero__copy .eyebrow { margin-bottom: 1.5em; }
.hero h1 { margin-bottom: .5em; }
.hero .lede:not(.lede--quiet) { margin-top: 0; }
/* hero figure — the headline, drawn */
.hero__figure { display: flex; justify-content: center; }
/* The figure runs one sequence: site -> scroll -> form -> submit -> system.
The cards define the box; the browser sits over it, then recedes behind it. */
.flow {
position: relative;
width: min(100%, 392px);
animation: float 8s ease-in-out infinite alternate;
transition: opacity 420ms var(--ease-out); /* FADE in main.js must match */
}
@keyframes float { to { transform: translateY(-10px); } }
/* The blink the loop hides its rewind behind. */
.flow[data-cycling] { opacity: 0; }
/* One painted frame with everything frozen, so resetting to frame one is a cut
and not five transitions running backwards at once. */
.flow[data-cut],
.flow[data-cut] * {
transition-duration: 0s !important;
animation-duration: 0s !important;
animation-delay: 0s !important;
}
.stage-cards {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 8px 0;
}
.flow__glow {
position: absolute;
z-index: 0;
inset: -14% -22%;
border-radius: 50%;
background: radial-gradient(closest-side, rgba(124, 92, 255, .22), rgba(124, 92, 255, 0));
pointer-events: none;
}
.flow__node {
position: relative;
width: 100%;
padding: 15px 17px 16px;
border: 1px solid var(--line);
border-radius: 18px;
background: rgba(255, 255, 255, .88);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
box-shadow: var(--shadow-lg);
}
.flow__node--board { width: calc(100% - 4px); margin-left: 26px; }
.flow__node--stall { width: calc(100% - 14px); margin-left: 8px; }
.node__head {
display: flex;
align-items: center;
gap: .6em;
margin-bottom: .8em;
}
.node__label {
font-family: var(--mono);
font-size: .68rem;
font-weight: 500;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ink-4);
}
.node__time, .node__count, .node__stat {
margin-left: auto;
font-family: var(--mono);
font-size: .7rem;
color: var(--ink-4);
}
.node__stat { color: var(--amber); }
.node__title {
font-size: .95rem;
font-weight: 500;
color: var(--ink);
letter-spacing: -.012em;
}
.node__meta { margin-top: .2em; font-size: .82rem; color: var(--ink-3); }
.node__human { display: flex; align-items: center; gap: .6em; margin-top: .85em; }
.node__human .node__meta { margin-top: 0; }
.avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px; height: 26px;
border-radius: 50%;
background: linear-gradient(150deg, #FFC59B, #F09A6B);
color: #5A2A0E;
font-size: .6rem;
font-weight: 600;
letter-spacing: .02em;
box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
.chip {
display: inline-flex;
align-items: center;
gap: .45em;
height: 22px;
padding-inline: .6em;
border-radius: 999px;
font-family: var(--mono);
font-size: .64rem;
font-weight: 500;
letter-spacing: .06em;
text-transform: uppercase;
}
.chip--live {
background: rgba(91, 61, 245, .10);
color: var(--violet-deep);
}
.chip--live::before {
content: "";
width: 5px; height: 5px;
border-radius: 50%;
background: var(--violet);
}
.chip--warn {
background: rgba(232, 147, 58, .14);
color: #A9631A;
}
@keyframes breathe { 50% { opacity: .58; } }
.flow__node--stall {
border-color: rgba(232, 147, 58, .30);
background:
linear-gradient(180deg, rgba(255, 244, 234, .9), rgba(255, 255, 255, .86));
}
.stages { display: flex; gap: 5px; }
.stage {
flex: 1;
display: flex;
flex-direction: column;
gap: 6px;
font-family: var(--mono);
font-size: .58rem;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--ink-4);
}
.stage span {
display: block;
height: 4px;
border-radius: 999px;
background: var(--line);
}
.stage--on { color: var(--violet-deep); }
.stage--on span { background: linear-gradient(90deg, var(--violet-lift), var(--violet)); }
.flow__wire {
position: relative;
width: 2px;
height: 32px;
margin-left: 34px;
border-radius: 2px;
background: linear-gradient(180deg, rgba(91, 61, 245, .55), rgba(91, 61, 245, .16));
box-shadow: 0 0 8px rgba(91, 61, 245, .35);
}
.flow__wire--dim {
margin-left: 20px;
background: linear-gradient(180deg, rgba(232, 147, 58, .55), rgba(232, 147, 58, .14));
}
.pulse {
position: absolute;
left: 50%;
top: 0;
width: 8px; height: 8px;
margin-left: -4px;
border-radius: 50%;
opacity: 0;
}
.pulse--a {
background: var(--violet-lift);
box-shadow: 0 0 0 4px rgba(124, 92, 255, .16), 0 0 12px rgba(124, 92, 255, .9);
}
.pulse--b {
background: #EDA45C;
box-shadow: 0 0 0 4px rgba(232, 147, 58, .16), 0 0 12px rgba(232, 147, 58, .8);
}
@keyframes travel-a {
0% { opacity: 0; transform: translateY(-4px); }
4% { opacity: 1; }
20% { opacity: 1; transform: translateY(28px); }
25%, 100% { opacity: 0; transform: translateY(28px); }
}
@keyframes travel-b {
0%, 24% { opacity: 0; transform: translateY(-4px); }
28% { opacity: 1; }
44% { opacity: 1; transform: translateY(28px); }
49%, 100% { opacity: 0; transform: translateY(28px); }
}
/* -------------------------------------------------- hero figure: the site -- */
.site {
position: absolute;
z-index: 3;
top: 50%;
left: 0;
width: 100%;
margin-top: -147px;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
box-shadow: var(--shadow-lg);
transition:
transform 760ms var(--ease-out),
opacity 640ms var(--ease-out),
filter 640ms var(--ease-out);
}
/* Blur bridges the two states so it reads as one object moving back,
not two objects swapping. */
.flow[data-stage="system"] .site {
z-index: 1;
transform: translate3d(-7%, -8%, 0) scale(.87);
opacity: .42;
filter: blur(1.6px);
}
.site__chrome {
display: flex;
align-items: center;
gap: 10px;
height: 32px;
padding-inline: 11px;
border-bottom: 1px solid var(--line-2);
background: var(--paper-2);
}
.site__dots { display: flex; gap: 5px; }
.site__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.site__url {
display: inline-flex;
align-items: center;
gap: 5px;
height: 19px;
padding-inline: 9px;
border: 1px solid var(--line-2);
border-radius: 999px;
background: #fff;
font-size: .575rem;
letter-spacing: -.004em;
color: var(--ink-3);
}
.site__lock { width: 8px; height: 8px; color: var(--ink-4); }
.site__viewport { height: 262px; overflow: hidden; }
.site__page { transition: transform 900ms var(--ease-in-out); }
.flow:is([data-stage="scroll"], [data-stage="form"], [data-stage="submit"], [data-stage="system"]) .site__page {
transform: translateY(-238px);
}
.site__hero {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
padding: 24px 18px 22px;
background: linear-gradient(170deg, #fff, #FAF7FE);
}
.sk { display: block; border-radius: 4px; background: var(--line); }
.sk--eyebrow { width: 60px; height: 5px; margin-bottom: 3px; background: rgba(91, 61, 245, .3); }
.sk--h1 {
width: 82%; height: 11px;
border-radius: 5px;
background: linear-gradient(90deg, rgba(22, 18, 31, .84), rgba(22, 18, 31, .56));
}
.sk--h1b { width: 54%; }
.sk--p { width: 88%; height: 6px; }
.sk--pb { width: 66%; }
.site__btn {
display: inline-flex;
align-items: center;
height: 26px;
margin-top: 7px;
padding-inline: 13px;
border-radius: 999px;
background: linear-gradient(180deg, #7C5CFF, #5B3DF5);
color: #fff;
font-size: .6rem;
font-weight: 500;
box-shadow: 0 6px 14px -6px rgba(91, 61, 245, .85);
}
.site__band {
position: relative;
height: 76px;
overflow: hidden;
background: linear-gradient(120deg, #E8E0FE, #D6E7FB 55%, #FDE2D3);
}
.site__proof { display: flex; gap: 6px; margin-top: 10px; }
.site__proof i { width: 34px; height: 6px; border-radius: 4px; background: rgba(91, 61, 245, .17); }
.site__proof i:nth-child(2) { width: 22px; }
.site__proof i:nth-child(3) { width: 28px; }
.site__band-glow {
position: absolute;
inset: -50% -12%;
background: radial-gradient(closest-side, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0));
}
.site__form {
display: flex;
flex-direction: column;
gap: 7px;
padding: 17px 18px 22px;
background: #fff;
}
.site__formlabel {
margin-bottom: 3px;
font-family: var(--mono);
font-size: .55rem;
font-weight: 500;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--ink-4);
}
.field {
display: flex;
align-items: center;
gap: 8px;
height: 30px;
padding-inline: 9px;
border: 1px solid var(--line);
border-radius: 8px;
background: #fff;
}
.field__label {
flex: none;
font-family: var(--mono);
font-size: .52rem;
font-weight: 500;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ink-4);
}
.field__value { flex: 1; min-width: 0; overflow: hidden; }
.field__typed {
display: inline-block;
font-size: .7rem;
color: var(--ink);
white-space: nowrap;
clip-path: inset(0 100% 0 0);
transition: clip-path 520ms var(--ease-out);
}
.field__tick {
position: relative;
flex: none;
width: 13px;
height: 13px;
border-radius: 50%;
background: var(--violet);
opacity: 0;
transform: scale(.6);
transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out);
}
.field__tick::before {
content: "";
position: absolute;
left: 3.6px;
top: 4.5px;
width: 5px;
height: 2.6px;
border-left: 1.4px solid #fff;
border-bottom: 1.4px solid #fff;
transform: rotate(-45deg);
}
/* Typing: the text is revealed left to right, the tick lands when it finishes.
Once filled, the fields stay filled for the rest of the sequence. */
.flow:is([data-stage="form"], [data-stage="submit"], [data-stage="system"]) .field .field__typed { clip-path: inset(0 0 0 0); }
.flow:is([data-stage="form"], [data-stage="submit"], [data-stage="system"]) .field .field__tick { opacity: 1; transform: none; }
.field:nth-of-type(1) .field__typed { transition-delay: 100ms; }
.field:nth-of-type(2) .field__typed { transition-delay: 740ms; }
.field:nth-of-type(3) .field__typed { transition-duration: 640ms; transition-delay: 1380ms; }
.field:nth-of-type(1) .field__tick { transition-delay: 600ms; }
.field:nth-of-type(2) .field__tick { transition-delay: 1240ms; }
.field:nth-of-type(3) .field__tick { transition-delay: 1990ms; }
/* A focus ring needs to arrive and leave, which a transition can't do alone. */
@keyframes field-focus {
0% { border-color: var(--line); box-shadow: 0 0 0 0 rgba(91, 61, 245, 0); }
12%, 84% { border-color: rgba(91, 61, 245, .5); box-shadow: 0 0 0 3px rgba(91, 61, 245, .14); }
100% { border-color: var(--line); box-shadow: 0 0 0 0 rgba(91, 61, 245, 0); }
}
.flow[data-stage="form"] .field:nth-of-type(1) { animation: field-focus 700ms var(--ease-out) 60ms both; }
.flow[data-stage="form"] .field:nth-of-type(2) { animation: field-focus 700ms var(--ease-out) 700ms both; }
.flow[data-stage="form"] .field:nth-of-type(3) { animation: field-focus 800ms var(--ease-out) 1340ms both; }
.site__submit {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
align-self: flex-start;
height: 30px;
margin-top: 6px;
padding-inline: 15px;
border-radius: 999px;
background: linear-gradient(180deg, #7C5CFF, #5B3DF5);
color: #fff;
font-size: .635rem;
font-weight: 500;
box-shadow: 0 6px 16px -6px rgba(91, 61, 245, .85);
}
.site__submit-lbl { transition: opacity 220ms var(--ease-out); }
.site__submit-lbl--done {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
}
.flow:is([data-stage="submit"], [data-stage="system"]) .site__submit-lbl { opacity: 0; }
.flow:is([data-stage="submit"], [data-stage="system"]) .site__submit-lbl--done { opacity: 1; }
@keyframes submit-press {
0% { transform: none; }
26% { transform: scale(.955); }
100% { transform: none; }
}
.flow[data-stage="submit"] .site__submit { animation: submit-press 440ms var(--ease-out) both; }
/* ------------------------------------------------ hero figure: the system -- */
.stage-cards .flow__node,
.stage-cards .flow__wire {
opacity: 0;
transform: translateY(18px) scale(.96);
transition: opacity 540ms var(--ease-out), transform 540ms var(--ease-out);
}
.flow[data-stage="system"] .flow__node,
.flow[data-stage="system"] .flow__wire { opacity: 1; transform: none; }
.flow[data-stage="system"] .flow__node--in { transition-delay: 60ms; }
.flow[data-stage="system"] .flow__wire { transition-delay: 250ms; }
.flow[data-stage="system"] .flow__node--board { transition-delay: 190ms; }
.flow[data-stage="system"] .flow__wire--dim { transition-delay: 410ms; }
.flow[data-stage="system"] .flow__node--stall { transition-delay: 350ms; }
.flow[data-stage="system"] .pulse--a { animation: travel-a 6s var(--ease-in-out) 1000ms infinite; }
.flow[data-stage="system"] .pulse--b { animation: travel-b 6s var(--ease-in-out) 1000ms infinite; }
.flow[data-stage="system"] .chip--warn { animation: breathe 2.6s ease-in-out 1300ms infinite; }
@media (prefers-reduced-motion: reduce) {
.flow, .flow * { transition: none !important; animation: none !important; }
}
/* ============================================================ strip ===== */
.strip__label {
margin-bottom: 18px;
text-align: center;
font-family: var(--mono);
font-size: .64rem;
font-weight: 500;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ink-4);
}
/* Logo row. Real marks come in wildly different proportions — a 13:1 wordmark
at the same height as a square badge reads twice as loud — so each one sets
its own optical height with --h rather than sharing a single value. */
.logos {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: clamp(24px, 3vw, 40px);
}
/* Real marks come in wildly different proportions — a 13:1 wordmark at the same
height as a square badge reads twice as loud — so each sets its own optical
height with --h rather than sharing one value. */
.logos__mark {
height: var(--h, 40px);
width: auto;
max-width: 44vw; /* only bites on narrow screens */
object-fit: contain;
opacity: .72;
filter: grayscale(1);
}
@media (max-height: 940px) and (min-width: 781px) {
.logos__mark { height: calc(var(--h, 40px) * .84); }
}
/* Short windows: give the row back as much height as it can spare before the
copy itself becomes the thing that overflows. */
@media (max-height: 860px) and (min-width: 781px) {
.logos__mark { height: calc(var(--h, 40px) * .7); }
.hero__proof { margin-top: 22px; }
.strip__label { margin-bottom: 12px; }
}
@media (max-width: 780px) {
.logos { justify-content: center; gap: clamp(24px, 6vw, 40px); }
.logos__mark { height: calc(var(--h, 40px) * .72); }
}
/* ========================================================= symptoms ===== */
/* Overheard, not gridded. The untidiness is the point. */
.section--symptoms { padding-bottom: calc(var(--sec-y) * .9); }
.murmur {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: center;
gap: clamp(20px, 3vw, 32px) clamp(20px, 3vw, 38px);
max-width: 62rem;
margin-inline: auto;
}
.murmur__item {
position: relative;
padding-left: .35em;
font-family: var(--serif);
font-optical-sizing: none;
font-variation-settings: "opsz" 30, "SOFT" 70, "WONK" 0;
font-style: italic;
line-height: 1.25;
letter-spacing: -.012em;
color: var(--ink-2);
text-wrap: nowrap;
}
.murmur__t::before {
content: "\201C";
position: absolute;
left: -.34em;
top: -.02em;
font-size: 1.5em;
line-height: 1;
color: rgba(91, 61, 245, .22);
transition: color 180ms ease;
}
.murmur__item:nth-child(3n+1) { font-size: clamp(1.06rem, .95rem + .6vw, 1.42rem); --rot: -.7deg; --dy: -4px; --o: .95; }
.murmur__item:nth-child(3n+2) { font-size: clamp(.94rem, .88rem + .3vw, 1.1rem); --rot: .6deg; --dy: 8px; --o: .72; }
.murmur__item:nth-child(3n) { font-size: clamp(1.15rem, 1rem + .8vw, 1.62rem); --rot: -.25deg; --dy: 2px; --o: 1; }
.murmur__item:nth-child(4n) { --rot: .85deg; --dy: -7px; }
.murmur__item:nth-child(5n) { --rot: -1deg; --dy: 6px; }
.murmur__item:nth-child(7n) { color: var(--ink); --o: 1; }
@media (max-width: 620px) { .murmur__item { text-wrap: pretty; } }
@media (max-width: 400px) {
.murmur__btn::before { inset: -.4em -.62em; }
.murmur__btn::after { right: -.28em; bottom: -.7em; }
}
.murmur__hint {
margin: 0 auto clamp(30px, 4vw, 46px);
text-align: center;
font-family: var(--mono);
font-size: .7rem;
letter-spacing: .04em;
color: var(--ink-4);
}
/* Each murmur is a toggle. Hovering shows the thought it would become;
clicking keeps it. */
.murmur__btn {
position: relative;
display: inline-block;
padding: 0;
border: 0;
background: none;
font: inherit;
color: inherit;
text-align: left;
cursor: pointer;
transition: transform 150ms var(--ease-out), color 180ms ease;
}
.murmur__btn:active { transform: scale(.975); }
.murmur__t { position: relative; z-index: 1; }
/* The bubble. Irregular radii so it reads as a thought, not a chip. */
.murmur__btn::before {
content: "";
position: absolute;
inset: -.46em -.8em;
border: 1px solid rgba(91, 61, 245, .17);
border-radius: .9em 1.05em .95em 1.1em / .95em .85em 1.05em .9em;
background: rgba(255, 255, 255, .92);
box-shadow:
0 1px 2px rgba(22, 18, 31, .035),
0 8px 20px -12px rgba(91, 61, 245, .35);
opacity: 0;
transform: scale(.965);
transition: opacity 140ms var(--ease-out), transform 140ms var(--ease-out);
}
/* Two trailing dots — the bit that makes it a thought bubble. */
.murmur__btn::after {
content: "";
position: absolute;
right: -.42em;
bottom: -.78em;
width: .3em;
height: .3em;
border-radius: 50%;
background: rgba(124, 92, 255, .3);
box-shadow: .36em .3em 0 -.06em rgba(124, 92, 255, .22);
opacity: 0;
transform: scale(.7);
transition: opacity 130ms var(--ease-out), transform 130ms var(--ease-out);
}
/* Enter is a touch slower than exit — the thought forms, then lets go. */
@media (hover: hover) and (pointer: fine) {
.murmur__btn:hover::before { opacity: 1; transform: none; transition-duration: 190ms; }
.murmur__btn:hover::after { opacity: 1; transform: none; transition-duration: 180ms; transition-delay: 55ms; }
.murmur__btn:hover { color: var(--ink); }
.murmur__btn:hover .murmur__t::before { color: rgba(91, 61, 245, .42); }
}
.murmur__btn:focus-visible::before { opacity: 1; transform: none; }
.murmur__btn:focus-visible::after { opacity: 1; transform: none; }
.murmur__btn[aria-pressed="true"] { color: var(--ink); }
.murmur__btn[aria-pressed="true"] .murmur__t::before { color: rgba(91, 61, 245, .55); }
.murmur__btn[aria-pressed="true"]::before {
opacity: 1;
transform: none;
border-color: rgba(91, 61, 245, .52);
background: linear-gradient(158deg, rgba(124, 92, 255, .19), rgba(124, 92, 255, .095));
box-shadow:
0 1px 2px rgba(22, 18, 31, .04),
0 12px 30px -14px rgba(91, 61, 245, .65);
}
.murmur__btn[aria-pressed="true"]::after {
opacity: 1;
transform: none;
background: rgba(124, 92, 255, .45);
box-shadow: .36em .3em 0 -.06em rgba(124, 92, 255, .32);
}
/* A kept thought comes up to full weight, whatever its resting opacity was. */
.murmur__item:has([aria-pressed="true"]) { opacity: 1; transition-duration: 220ms; }
.tally {
margin-top: clamp(30px, 4vw, 44px);
text-align: center;
font-family: var(--mono);
font-size: .74rem;
letter-spacing: .05em;
color: var(--ink-3);
opacity: 0;
transform: translateY(5px);
transition:
opacity 240ms var(--ease-out),
transform 240ms var(--ease-out),
color 300ms ease;
}
.tally[data-on] { opacity: 1; transform: none; }
.tally__n { font-weight: 500; color: var(--ink); }
/* Four or more is the number the closing line is about. */
.tally[data-many] { color: var(--violet-deep); }
.tally[data-many] .tally__n { color: var(--violet-deep); }
@media (prefers-reduced-motion: reduce) {
.murmur__btn, .murmur__btn::before, .murmur__btn::after, .tally { transform: none !important; }
}
.verdict {
max-width: 40rem;
margin: clamp(30px, 4vw, 48px) auto 0;
text-align: center;
font-size: clamp(1rem, .95rem + .3vw, 1.14rem);
color: var(--ink-3);
text-wrap: pretty;
}
.verdict span { color: var(--ink); font-weight: 500; }
/* ======================================================== distinction === */
.split {
display: grid;
gap: clamp(28px, 4vw, 64px);
}
@media (min-width: 900px) {
.split { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
.split__lead { position: sticky; top: 96px; align-self: start; }
}
.split--faq { align-items: start; }
.symptoms { margin-bottom: 1.9em; }
.symptoms li {
display: flex;
align-items: baseline;
gap: .8em;
padding-block: .62em;
border-bottom: 1px solid var(--line-2);
}
.symptoms li:first-child { border-top: 1px solid var(--line-2); }
.symptoms b { font-weight: 500; color: var(--ink); letter-spacing: -.014em; }
.symptoms i {
margin-left: auto;
font-family: var(--mono);
font-style: normal;
font-size: .72rem;
letter-spacing: .04em;
color: var(--ink-4);
white-space: nowrap;
}
.pullquote {
position: relative;
max-width: 44rem;
margin: clamp(56px, 7vw, 92px) auto 0;
padding-left: clamp(20px, 3vw, 34px);
border-left: 2px solid;
border-image: linear-gradient(180deg, var(--violet), rgba(62, 155, 240, .5)) 1;
}
.pullquote p {
font-family: var(--serif);
font-optical-sizing: none;
font-variation-settings: "opsz" 60, "SOFT" 50, "WONK" 1;
font-style: italic;
font-size: clamp(1.32rem, 1.05rem + 1.1vw, 2.05rem);
line-height: 1.24;
letter-spacing: -.024em;
color: var(--ink);
text-wrap: balance;
}
/* ============================================================ halves ==== */
/* Two treatments, deliberately unlike each other: one polished,
one a schematic. The contrast is the argument. */
.halves {
display: grid;
gap: clamp(18px, 2.4vw, 26px);
}
@media (min-width: 860px) { .halves { grid-template-columns: 1fr 1fr; } }
.half {
position: relative;
isolation: isolate; /* keeps the glow under the card, not under the page */
display: flex;
}
.half__card {
position: relative;
z-index: 1;
flex: 1;
display: flex;
flex-direction: column;
border-radius: var(--r-xl);
overflow: hidden;
transition: transform 280ms var(--ease-out), box-shadow 280ms var(--ease-out);
}
.half--seen .half__card {
border: 1px solid var(--line);
background: linear-gradient(180deg, #fff, #FCFBFE);
box-shadow: var(--shadow-lg);
}
.half--unseen .half__card {
border: 1px solid rgba(22, 18, 31, .13);
background: var(--paper-2);
box-shadow: var(--shadow-sm);
}
/* A real gradient can't live in box-shadow, so it's a blurred layer behind the
card. The blur is static; only opacity animates, so it composites cheaply. */
.half::before {
content: "";
position: absolute;
inset: 14px 2px -14px 2px;
border-radius: var(--r-xl);
background: linear-gradient(122deg, #5FB4F5 0%, #7C5CFF 52%, #C489FF 100%);
filter: blur(18px);
opacity: 0;
transition: opacity 300ms var(--ease-out);
pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
.half:hover::before { opacity: .52; }
.half:hover .half__card { transform: translateY(-5px); }
.half--seen:hover .half__card { box-shadow: var(--shadow-md); }
}
.half__art { padding: clamp(20px, 2.6vw, 28px) clamp(20px, 2.6vw, 28px) 0; }
.half__body { padding: clamp(22px, 2.8vw, 30px); }
.half__label {
margin-bottom: 1.15em;
font-family: var(--serif);
font-optical-sizing: none;
font-variation-settings: "opsz" 24, "SOFT" 40, "WONK" 0;
font-size: 1.24rem;
letter-spacing: -.02em;
color: var(--ink);
}
/* polished: a page, abstracted */
.mock {
border: 1px solid var(--line);
border-radius: 14px;
overflow: hidden;
background: #fff;
box-shadow: 0 12px 30px -18px rgba(22, 18, 31, .5);
}
.mock__bar {
display: flex;
align-items: center;
gap: 5px;
height: 26px;
padding-inline: 11px;
background: var(--paper-2);
border-bottom: 1px solid var(--line-2);
}
.mock__bar span { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.mock__stage {
position: relative;
height: 236px;
overflow: hidden;
background: linear-gradient(180deg, #fff, #FAF7FE);
}
/* Forward through a funnel reads left, so screens leave left and arrive right. */
.screen {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 9px;
padding: 24px 22px 26px;
opacity: 0;
transform: translateX(16px);
transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
}
.mock[data-screen="1"] .screen--page,
.mock[data-screen="2"] .screen--apply,
.mock[data-screen="3"] .screen--done { opacity: 1; transform: none; }
.mock[data-screen="2"] .screen--page,
.mock[data-screen="3"] .screen--page,
.mock[data-screen="3"] .screen--apply { transform: translateX(-16px); }
.scr__top { display: flex; align-items: center; gap: 10px; width: 100%; margin-bottom: 3px; }
.scr__step {
font-family: var(--mono);
font-size: .55rem;
font-weight: 500;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ink-4);
white-space: nowrap;
}
.scr__bar { flex: 1; height: 4px; border-radius: 999px; background: var(--line); overflow: hidden; }
.scr__bar i { display: block; width: 66%; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #7C5CFF, #5B3DF5); }
.mock__p--q { width: 72%; height: 7px; }
.scr__opts { display: flex; gap: 6px; }
.opt {
padding: 5px 11px;
border: 1px solid var(--line);
border-radius: 999px;
background: #fff;
font-size: .6rem;
color: var(--ink-3);
}
.opt--on { border-color: rgba(91, 61, 245, .45); background: rgba(91, 61, 245, .08); color: var(--violet-deep); }
.scr__field { width: 100%; height: 26px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.scr__tick {
position: relative;
width: 30px; height: 30px;
border-radius: 50%;
background: linear-gradient(155deg, #7C5CFF, #5B3DF5);
box-shadow: 0 8px 18px -8px rgba(91, 61, 245, .85);
}
.scr__tick::before {
content: "";
position: absolute;
left: 9px; top: 10.5px;
width: 11px; height: 6px;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(-45deg);
}
.mock__h1--done { width: 58%; margin-top: 4px; }
.scr__next {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
width: 100%;
margin-top: 7px;
padding: 12px 13px;
border: 1px dashed rgba(91, 61, 245, .32);
border-radius: 11px;
background: rgba(124, 92, 255, .05);
}
.scr__nextlabel {
font-family: var(--mono);
font-size: .52rem;
font-weight: 500;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--violet-deep);
}
.mock__p--next { width: 84%; }
.mock__cta.mock__cta--ghost {
height: 26px;
margin-top: 0;
background: none;
border: 1px solid rgba(91, 61, 245, .35);
color: var(--violet-deep);
font-size: .615rem;
box-shadow: none;
}
.mock__h1 {
height: 13px; width: 76%;
border-radius: 5px;
background: linear-gradient(90deg, rgba(22,18,31,.84), rgba(22,18,31,.56));
}
.mock__h1--short { width: 50%; }
.mock__p { height: 7px; width: 88%; border-radius: 4px; background: var(--line); }
.mock__p--short { width: 62%; }
.mock__cta {
display: inline-flex;
align-items: center;
height: 30px;
margin-top: 7px;
padding-inline: 15px;
border-radius: 999px;
background: linear-gradient(180deg, #7C5CFF, #5B3DF5);
color: #fff;
font-size: .7rem;
font-weight: 500;
box-shadow: 0 7px 18px -7px rgba(91, 61, 245, .9);
}
.mock__proof { display: flex; gap: 6px; margin-top: 9px; }
.mock__proof span { height: 6px; width: 46px; border-radius: 4px; background: rgba(91, 61, 245, .17); }
/* schematic: an engineering drawing */
.schema {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 262px; /* = the mock's bar + stage, so the labels align */
padding: 22px 20px;
border: 1px solid rgba(22, 18, 31, .15);
border-radius: 14px;
background-color: #F8F6FC;
background-image:
linear-gradient(rgba(22, 18, 31, .045) 1px, transparent 1px),
linear-gradient(90deg, rgba(22, 18, 31, .045) 1px, transparent 1px);
background-size: 22px 22px;
}
.schema__tick { position: absolute; width: 9px; height: 9px; border-color: rgba(22, 18, 31, .3); border-style: solid; border-width: 0; }
.schema__tick--tl { top: 7px; left: 7px; border-top-width: 1px; border-left-width: 1px; }
.schema__tick--tr { top: 7px; right: 7px; border-top-width: 1px; border-right-width: 1px; }
.schema__tick--bl { bottom: 7px; left: 7px; border-bottom-width: 1px; border-left-width: 1px; }
.schema__tick--br { bottom: 7px; right: 7px; border-bottom-width: 1px; border-right-width: 1px; }
.schema__rows { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 11px; }
.schema__row {
opacity: 0;
transform: translateY(7px);
transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out);
}
.schema[data-visible] .schema__row { opacity: 1; transform: none; }
.schema[data-visible] .schema__row:nth-child(1) { transition-delay: 170ms; }
.schema[data-visible] .schema__row:nth-child(2) { transition-delay: 350ms; }
.schema[data-visible] .schema__row:nth-child(3) { transition-delay: 530ms; }
.schema[data-visible] .schema__row:nth-child(4) { transition-delay: 710ms; }
.schema[data-visible] .schema__row:nth-child(5) { transition-delay: 890ms; }
.schema[data-visible] .schema__row:nth-child(6) { transition-delay: 1070ms; }
.schema__row {
display: flex;
align-items: center;
gap: .75em;
font-family: var(--mono);
font-size: .715rem;
letter-spacing: .01em;
color: var(--ink-2);
}
.schema__row i {
flex: none;
width: 9px; height: 9px;
border: 1.5px solid var(--violet);
border-radius: 50%;
background: #F8F6FC;
}
.schema__row--end { color: var(--ink-4); }
.schema__row--end i { border-color: var(--ink-4); border-style: dashed; }
/* The spine draws down as the rows land, then keeps a slow pulse so the
finished diagram reads as something running rather than something drawn. */
.schema__spine {
position: absolute;
left: 4px;
top: 8px;
bottom: 8px;
width: 1px;
overflow: hidden;
background: linear-gradient(180deg, rgba(91, 61, 245, .55), rgba(91, 61, 245, .10));
transform: scaleY(0);
transform-origin: top;
transition: transform 1250ms var(--ease-out) 180ms;
}
.schema[data-visible] .schema__spine { transform: scaleY(1); }
/* A full-height band, so translateY percentages are the spine's own length —
no measuring needed. */
.schema__pulse {
position: absolute;
left: -1.5px;
right: -1.5px;
top: 0;
bottom: 0;
border-radius: 2px;
background: linear-gradient(180deg, rgba(124, 92, 255, 0) 34%, rgba(124, 92, 255, .95) 44%, rgba(124, 92, 255, 0) 56%);
opacity: 0;
}
.schema[data-visible] .schema__pulse { animation: spine-run 4.4s var(--ease-in-out) 1600ms infinite; }
@keyframes spine-run {
0% { opacity: 0; transform: translateY(-100%); }
10% { opacity: 1; }
58% { opacity: 1; transform: translateY(100%); }
70%, 100% { opacity: 0; transform: translateY(100%); }
}
.ticks li, .nodes li {
position: relative;
padding-left: 1.65em;
padding-block: .42em;
font-size: .96rem;
color: var(--ink-2);
}
.ticks li::before {
content: "";
position: absolute;
left: 0; top: .78em;
width: 8px; height: 8px;
border-radius: 50%;
background: linear-gradient(160deg, var(--violet-lift), var(--violet));
box-shadow: 0 0 0 3px rgba(91, 61, 245, .11);
}
.nodes li { font-family: var(--mono); font-size: .8rem; line-height: 1.55; letter-spacing: -.002em; }
.nodes li::before {
content: "+";
position: absolute;
left: 0; top: .28em;
font-family: var(--mono);
font-size: .8rem;
color: var(--violet);
}
.nodes li:not(:last-child)::after {
content: "";
position: absolute;
left: 5px; top: 1.85em; bottom: -.35em;
width: 1px;
background: rgba(22, 18, 31, .12);
}
/* ------------------------------------------------- who: the person / unicorn -- */
.sec-head--intro { max-width: 52rem; }
.intro {
display: flex;
align-items: flex-start;
gap: clamp(16px, 2.4vw, 30px);
}
.intro__head { flex: 1; min-width: 0; }
.intro .eyebrow { margin-bottom: 1.1em; }
/* balance re-flows the whole heading on every keystroke; pretty doesn't. */
.display--typed { text-wrap: pretty; }
.who { flex: none; perspective: 900px; }
.who__frame {
position: relative;
width: clamp(88px, 9.5vw, 118px);
aspect-ratio: 1;
transform-style: preserve-3d;
transition: transform 760ms var(--ease-in-out);
}
.who__frame[data-face="unicorn"] { transform: rotateY(180deg); }
/* The radius and shadow live on the faces — overflow:hidden would flatten
the 3D and kill the turn. */
.who__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border-radius: 26px;
object-fit: cover;
background: linear-gradient(150deg, #EFEAFB, #DCE9FA);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
box-shadow:
0 1px 2px rgba(22, 18, 31, .06),
0 14px 34px -14px rgba(61, 34, 196, .35);
}
.who__img--unicorn { transform: rotateY(180deg); }
.type { white-space: nowrap; }
.type__word {
font-style: italic;
font-variation-settings: "opsz" 84, "SOFT" 60, "WONK" 1;
color: var(--violet-deep);
}
.type__word::after {
content: "";
display: inline-block;
width: .05em;
height: .74em;
margin-left: .08em;
vertical-align: -.04em;
border-radius: 2px;
background: var(--violet);
animation: caret 1.05s steps(1) infinite;
}
.type[data-typing] .type__word::after { animation: none; }
@keyframes caret { 50% { opacity: 0; } }
@media (max-width: 600px) {
.intro { display: block; }
.who { margin-bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) {
.who__frame { transition: none; }
.schema__row, .screen { transform: none !important; }
.type__word::after { animation: none; }
}
/* =============================================================== ask ==== */
/* Six roles, six lenses. Hovering one puts words in their mouth. */
.ask__hint {
margin: 0 auto clamp(26px, 3.4vw, 40px);
text-align: center;
font-family: var(--mono);
font-size: .7rem;
letter-spacing: .04em;
color: var(--ink-4);
}
.ask__row {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: clamp(6px, 1.4vw, 20px);
align-items: start;
}
@media (max-width: 780px) {
.ask__row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 26px; }
}
.ask__person {
display: flex;
flex-direction: column;
align-items: center;
gap: .85em;
width: 100%;
padding: 0;
border: 0;
background: none;
font: inherit;
color: inherit;
cursor: pointer;
transition: transform 170ms var(--ease-out);
}
.ask__person:active { transform: scale(.97); }
.ask__face {
position: relative;
width: 100%;
max-width: 94px;
aspect-ratio: 1;
border-radius: 50%;
box-shadow:
0 1px 2px rgba(22, 18, 31, .05),
0 10px 22px -12px rgba(22, 18, 31, .38);
transition: transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out);
}
/* The icons ship their own gradient disc, so the face is just a frame for them. */
.fig {
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
-webkit-user-drag: none;
user-select: none;
}
.ask__who {
max-width: 12em;
font-size: .775rem;
line-height: 1.32;
text-align: center;
text-wrap: balance;
color: var(--ink-3);
transition: color 180ms ease;
}
.ask__says { /* real content, read by screen readers, shown in the bubble */
position: absolute;
width: 1px; height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.ask__person[data-on] .ask__face {
transform: translateY(-6px) scale(1.045);
box-shadow:
0 1px 2px rgba(22, 18, 31, .05),
0 18px 34px -14px rgba(91, 61, 245, .55),
0 0 0 3px rgba(124, 92, 255, .16);
}
.ask__person[data-on] .ask__who { color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
.ask__person:hover .ask__face { transform: translateY(-6px) scale(1.045); }
}
/* What they'd tell you — one bubble, with a tail that points at whoever's talking. */
.ask__bubble {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
gap: .55em;
max-width: 40rem;
min-height: 104px;
margin: clamp(34px, 4.4vw, 52px) auto 0;
padding: 20px clamp(20px, 3vw, 30px);
border: 1px solid rgba(91, 61, 245, .2);
border-radius: 20px;
background: rgba(255, 255, 255, .82);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
box-shadow:
0 1px 2px rgba(22, 18, 31, .04),
0 16px 38px -20px rgba(91, 61, 245, .55);
text-align: center;
opacity: 0;
transform: translateY(7px);
transition:
opacity 260ms var(--ease-out),
transform 260ms var(--ease-out),
border-color 260ms ease,
background-color 260ms ease;
}
.ask[data-picked] .ask__bubble { opacity: 1; transform: none; }
.ask[data-you] .ask__bubble {
border-color: rgba(91, 61, 245, .42);
background: linear-gradient(160deg, rgba(124, 92, 255, .1), rgba(255, 255, 255, .86));
}
.ask__tail {
position: absolute;
top: -7px;
left: 0;
width: 13px;
height: 13px;
margin-left: -6.5px;
border-top: 1px solid rgba(91, 61, 245, .2);
border-left: 1px solid rgba(91, 61, 245, .2);
border-radius: 4px 0 0 0;
background: rgba(255, 255, 255, .95);
transform: translateX(var(--tail, 50%)) rotate(45deg);
transition: transform 340ms var(--ease-out);
}
.ask[data-you] .ask__tail { border-color: rgba(91, 61, 245, .42); }
.ask__label {
font-family: var(--mono);
font-size: .64rem;
font-weight: 500;
letter-spacing: .13em;
text-transform: uppercase;
color: var(--ink-4);
}
.ask__quote {
font-family: var(--serif);
font-optical-sizing: none;
font-variation-settings: "opsz" 34, "SOFT" 50, "WONK" 0;
font-size: clamp(1.02rem, .94rem + .42vw, 1.24rem);
line-height: 1.36;
letter-spacing: -.016em;
color: var(--ink);
text-wrap: pretty;
}
.ask__note {
max-width: 34rem;
margin-inline: auto;
font-size: .82rem;
line-height: 1.45;
letter-spacing: -.002em;
color: var(--ink-4);
text-wrap: pretty;
}
.ask__note::before {
content: "";
display: block;
width: 26px;
height: 1px;
margin: 0 auto .6em;
background: rgba(91, 61, 245, .22);
}
.ask[data-you] .ask__quote { color: var(--violet-deep); }
.ask[data-you] .ask__note::before { background: rgba(91, 61, 245, .38); }
@media (prefers-reduced-motion: reduce) {
.ask__face, .ask__bubble, .ask__tail { transform: none !important; }
}
/* ========================================================= manifesto ==== */
/* The boldest treatment on the page. Full width, big type, lots of air. */
.manifesto {
position: relative;
overflow: hidden;
padding-block: clamp(112px, 15vw, 208px);
text-align: center;
border-block: 1px solid var(--line-2);
background: linear-gradient(180deg, var(--paper) 0%, #F5F1FC 50%, var(--paper) 100%);
}
.manifesto__inner { position: relative; z-index: 1; }
.manifesto__kicker {
display: block;
margin-bottom: clamp(18px, 2.6vw, 32px);
font-family: var(--mono);
font-size: .74rem;
font-weight: 500;
letter-spacing: .17em;
text-transform: uppercase;
color: var(--ink-3);
}
.manifesto__line {
display: block;
font-family: var(--serif);
font-optical-sizing: none;
font-variation-settings: "opsz" 144, "SOFT" 22, "WONK" 1;
font-size: clamp(3rem, .6rem + 11.4vw, 8.2rem);
line-height: .93;
letter-spacing: -.045em;
color: var(--ink);
text-wrap: balance;
}
.manifesto__body {
max-width: 34rem;
margin: clamp(32px, 4.4vw, 56px) auto 0;
font-size: clamp(1rem, .95rem + .34vw, 1.14rem);
color: var(--ink-2);
text-wrap: pretty;
}
.manifesto__body em { font-style: italic; color: var(--ink); }
/* ====================================================== dark / the rig == */
.section--dark {
background: var(--night);
color: var(--night-ink-2);
overflow: hidden;
}
.section--dark .display { color: var(--night-ink); }
.section--dark .display em { color: #C4B2FF; }
.section--dark .sec-head__sub { color: var(--night-ink-2); }
.section--dark .eyebrow { color: var(--night-ink-3); }
.rig { position: relative; }
.rig__frame {
position: relative;
border: 1px solid var(--night-line);
border-radius: var(--r-lg);
overflow: hidden; /* fallback */
overflow: clip;
overflow-clip-margin: 26px; /* so the annotation pins aren't cut off */
background: linear-gradient(180deg, rgba(255, 255, 255, .062), rgba(255, 255, 255, .016));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .10),
0 40px 90px -44px rgba(0, 0, 0, .95),
0 0 90px -30px rgba(124, 92, 255, .35);
}
.rig__chrome {
position: relative;
display: flex;
align-items: center;
gap: .9em;
padding: 13px 16px;
border-bottom: 1px solid var(--night-line);
}
.rig__crumb {
font-family: var(--mono);
font-size: .66rem;
font-weight: 500;
letter-spacing: .13em;
text-transform: uppercase;
color: var(--night-ink-3);
white-space: nowrap;
}
/* Keep the chrome bar on one line, or the 04 pin lands on the label. */
@media (max-width: 640px) {
.rig__chrome { padding: 11px 13px; gap: .5em; }
.rig__crumb { font-size: .55rem; letter-spacing: .09em; }
.rig__today { font-size: .72rem; white-space: nowrap; }
.rig__today b { min-width: 18px; height: 18px; font-size: .62rem; }
}
.rig__today {
position: relative;
margin-left: auto;
display: inline-flex;
align-items: center;
gap: .55em;
font-size: .8rem;
color: var(--night-ink-2);
}
.rig__today b {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px; height: 20px;
padding-inline: 5px;
border-radius: 999px;
background: linear-gradient(160deg, #7C5CFF, #5B3DF5);
color: #fff;
font-size: .68rem;
font-weight: 600;
position: relative;
}
.rig__board {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
padding: 16px;
}
@media (max-width: 700px) {
.rig__board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.col--won { display: none; }
}
.col {
min-width: 0;
padding: 10px;
border-radius: 16px;
background: rgba(255, 255, 255, .022);
}
.col__head {
position: relative;
display: flex;
align-items: center;
gap: .5em;
margin-bottom: 10px;
font-family: var(--mono);
font-size: .6rem;
font-weight: 500;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--night-ink-3);
white-space: nowrap;
}
.col__head i { margin-left: auto; font-style: normal; }
.col__dot { flex: none; width: 6px; height: 6px; border-radius: 50%; }
.col__dot--new { background: #7C5CFF; }
.col__dot--qual { background: #3E9BF0; }
.col__dot--prop { background: var(--amber); }
.col__dot--won { background: #4BBF8A; }
.lead {
position: relative;
padding: 11px 12px;
margin-bottom: 8px;
border: 1px solid var(--night-line);
border-radius: 13px;
background: rgba(255, 255, 255, .045);
}
.lead__name { font-size: .8rem; font-weight: 500; color: var(--night-ink); letter-spacing: -.01em; }
.lead__meta { margin-top: 2px; font-size: .69rem; color: var(--night-ink-3); }
.lead__auto {
display: inline-flex;
margin-top: 9px;
padding: 3px 8px;
border-radius: 999px;
background: rgba(124, 92, 255, .20);
font-family: var(--mono);
font-size: .565rem;
font-weight: 500;
letter-spacing: .06em;
text-transform: uppercase;
color: #CBBCFF;
}
.lead__auto--warn { background: rgba(232, 147, 58, .20); color: #F2C48B; }
.lead--fresh {
border-color: rgba(124, 92, 255, .45);
background: rgba(124, 92, 255, .085);
box-shadow: 0 0 0 1px rgba(124, 92, 255, .12), 0 0 26px -10px rgba(124, 92, 255, .8);
}
.lead--ghost {
height: 46px;
border-style: dashed;
border-color: rgba(255, 255, 255, .09);
background: transparent;
}
.rig__toast {
display: flex;
align-items: center;
gap: .7em;
margin: 0 16px 16px;
padding: 11px 14px;
border: 1px solid var(--night-line);
border-radius: 14px;
background: rgba(20, 16, 31, .92);
box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 1);
font-size: .8rem;
color: var(--night-ink-2);
}
.rig__toast b { color: var(--night-ink); font-weight: 500; }
.rig__toast-dot {
flex: none;
width: 7px; height: 7px;
border-radius: 50%;
background: var(--amber);
box-shadow: 0 0 0 4px rgba(232, 147, 58, .16);
}
/* Enters once, when the section arrives. No looping slide. */
.rig[data-anim] .rig__toast {
opacity: 0;
transform: translateY(10px);
transition: opacity 420ms var(--ease-out) 700ms, transform 420ms var(--ease-out) 700ms;
}
.rig[data-anim][data-visible] .rig__toast { opacity: 1; transform: none; }
.pin {
position: absolute;
z-index: 3;
display: inline-flex;
align-items: center;
justify-content: center;
width: 23px; height: 23px;
border-radius: 50%;
background: linear-gradient(160deg, #8B6DFF, #5B3DF5);
color: #fff;
font-family: var(--mono);
font-size: .58rem;
font-weight: 500;
letter-spacing: .02em;
box-shadow: 0 0 0 3px var(--night), 0 0 20px -2px rgba(124, 92, 255, .8);
}
.pin--tl { top: -11px; left: -11px; }
.pin--stage { top: -19px; left: -17px; }
.pin--head { top: -15px; right: -15px; }
.lead__auto { position: relative; }
.legend {
display: grid;
gap: 14px 30px;
margin-top: clamp(26px, 3.4vw, 42px);
}
@media (min-width: 720px) { .legend { grid-template-columns: 1fr 1fr; } }
.legend__item {
display: flex;
align-items: baseline;
gap: .8em;
font-size: .93rem;
color: var(--night-ink-2);
}
.legend__n {
flex: none;
font-family: var(--mono);
font-size: .66rem;
font-weight: 500;
letter-spacing: .08em;
color: #B7A3FF;
}
.undercut {
max-width: 38rem;
margin-top: clamp(30px, 4vw, 46px);
font-size: .96rem;
color: var(--night-ink-3);
text-wrap: pretty;
}
/* ============================================================== work ==== */
.works { display: grid; gap: clamp(22px, 3vw, 34px); }
.work {
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--r-xl);
background: var(--card);
box-shadow: var(--shadow-md);
}
@media (min-width: 940px) {
.work { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: stretch; }
}
.work__frames { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-2); }
@media (min-width: 940px) {
.work__frames { grid-template-rows: minmax(260px, 1fr); }
.work__frames .frame { aspect-ratio: auto; }
}
.frame {
position: relative;
display: grid;
place-items: center;
aspect-ratio: 4 / 3;
overflow: hidden;
}
.frame--before { background: linear-gradient(152deg, #EFECF5, #E4E0EC); }
.frame--after { background: linear-gradient(152deg, #F0ECFE, #E2EDFB); }
.frame__label {
position: absolute;
top: 12px; left: 12px;
padding: 4px 9px;
border-radius: 999px;
background: rgba(255, 255, 255, .78);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
font-family: var(--mono);
font-size: .58rem;
font-weight: 500;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ink-3);
}
/* ------------------------------------------------------- before/after wipe */
/* Both screenshots sit full-size on top of each other; the top one is clipped
to the handle position. clip-path animates on the compositor, so dragging
costs no layout and no paint. */
.ba {
position: relative;
overflow: hidden;
aspect-ratio: 4 / 3;
background: var(--paper-2);
touch-action: pan-y; /* vertical scrolling still belongs to the page */
cursor: ew-resize;
}
@media (min-width: 940px) {
.ba { aspect-ratio: auto; height: 100%; min-height: 340px; }
}
.ba__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center; /* the top of the page is the part that changed */
user-select: none;
-webkit-user-drag: none;
}
.ba__clip {
position: absolute;
inset: 0;
clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.ba__line {
position: absolute;
top: 0;
bottom: 0;
left: var(--pos);
width: 2px;
margin-left: -1px;
background: rgba(255, 255, 255, .9);
box-shadow: 0 0 0 1px rgba(91, 61, 245, .35), 0 2px 12px rgba(22, 18, 31, .3);
pointer-events: none;
}
.ba__grip {
position: absolute;
top: 50%;
left: 50%;
width: 36px;
height: 36px;
transform: translate(-50%, -50%);
border-radius: 50%;
background: rgba(255, 255, 255, .96);
box-shadow: 0 2px 10px rgba(22, 18, 31, .28), inset 0 1px 0 rgba(255,255,255,.9);
}
/* Two chevrons, drawn rather than shipped as an icon. */
.ba__grip::before,
.ba__grip::after {
content: "";
position: absolute;
top: 50%;
width: 6px;
height: 6px;
border: 1.6px solid var(--violet-deep);
border-width: 1.6px 1.6px 0 0;
}
.ba__grip::before { left: 9px; transform: translateY(-50%) rotate(-135deg); }
.ba__grip::after { right: 9px; transform: translateY(-50%) rotate(45deg); }
.ba__tag { pointer-events: none; }
.ba__tag--before { top: 12px; left: 12px; }
.ba__tag--after {
top: 12px;
left: auto;
right: 12px;
background: linear-gradient(100deg, #7C5CFF 0%, #5B7CF5 52%, #3E9BF0 100%);
color: #fff;
box-shadow: 0 2px 10px -2px rgba(91, 61, 245, .6);
}
/* The real control: full-bleed, invisible, and the only thing that is focusable.
Pointer-down anywhere on a range jumps the thumb there, so the whole image
behaves like a drag surface while arrow keys still work. */
.ba__range {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
opacity: 0;
appearance: none;
-webkit-appearance: none;
background: transparent;
cursor: ew-resize;
}
.ba__range::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 100vh; }
.ba__range::-moz-range-thumb { width: 44px; height: 100vh; border: 0; }
.ba__range:focus-visible { opacity: 1; outline: none; }
.ba__range:focus-visible + .ba__tag,
.ba:has(.ba__range:focus-visible) .ba__line { box-shadow: 0 0 0 2px var(--violet), 0 2px 12px rgba(22, 18, 31, .3); }
/* The drawn "before" for a launch: there is no old page to photograph, so the
before frame is an empty browser. Same primitives as the hero figure —
chrome dots, a URL pill, mono labels — so the two read as one family. */
.nopage {
position: absolute;
inset: 0;
/* Inset so the corner tags land on the frame, not on the mock's chrome bar. */
padding: 38px 14px 0;
background: linear-gradient(158deg, #F6F4FC 0%, #EDEAF7 100%);
}
.nopage__win {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
border: 1px solid rgba(22, 18, 31, .09);
border-radius: 12px 12px 0 0;
background: rgba(255, 255, 255, .55);
box-shadow: 0 10px 30px -18px rgba(22, 18, 31, .45);
}
.nopage__chrome {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 11px;
border-bottom: 1px solid rgba(22, 18, 31, .07);
background: rgba(255, 255, 255, .7);
}
.nopage__dots { display: flex; gap: 4px; }
.nopage__dots i {
width: 7px;
height: 7px;
border-radius: 50%;
background: rgba(22, 18, 31, .13);
}
.nopage__url {
flex: 1;
padding: 4px 10px;
border-radius: 999px;
border: 1px dashed rgba(22, 18, 31, .16);
background: rgba(255, 255, 255, .5);
font-family: var(--mono);
font-size: .58rem;
letter-spacing: .06em;
color: var(--ink-4);
}
.nopage__body {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .5em;
/* Weighted left so the drawing centres inside the half the wipe leaves
visible at rest, rather than straddling the handle. Static, so dragging
stays a clip-path change and never triggers layout. */
padding: 16px 50% 16px 16px;
text-align: center;
}
/* An empty sheet: outline only, with two faint rules where copy would go. */
.nopage__sheet {
position: relative;
width: min(58%, 92px);
aspect-ratio: 3 / 4;
margin-bottom: .7em;
border: 1.5px dashed rgba(91, 61, 245, .3);
border-radius: 8px;
}
.nopage__sheet::before,
.nopage__sheet::after {
content: "";
position: absolute;
left: 22%;
right: 22%;
height: 3px;
border-radius: 2px;
background: rgba(91, 61, 245, .13);
}
.nopage__sheet::before { top: 34%; }
.nopage__sheet::after { top: 52%; right: 42%; }
.nopage__lede {
font-family: var(--serif);
font-optical-sizing: none;
font-variation-settings: "opsz" 26, "SOFT" 40, "WONK" 0;
font-size: 1.05rem;
letter-spacing: -.02em;
color: var(--ink-2);
}
.nopage__sub {
font-family: var(--mono);
font-size: .58rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--ink-4);
}
/* Placeholder mark — replace .frame contents with a real ![]()
. */
.frame__slot {
width: 42px; height: 34px;
border: 1.5px dashed rgba(22, 18, 31, .18);
border-radius: 7px;
}
.work__body {
display: flex;
flex-direction: column;
padding: clamp(22px, 2.8vw, 32px);
}
.work__who {
margin-bottom: 1.1em;
font-family: var(--serif);
font-optical-sizing: none;
font-variation-settings: "opsz" 24, "SOFT" 40, "WONK" 0;
font-size: 1.22rem;
letter-spacing: -.02em;
color: var(--ink);
}
.work__ba { display: grid; gap: .8em; }
.work__ba > div { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 1em; align-items: baseline; }
.work__ba dt {
font-family: var(--mono);
font-size: .6rem;
font-weight: 500;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ink-4);
}
.work__ba dd { font-size: .95rem; color: var(--ink-2); }
.work__after-click {
margin-top: auto;
padding-top: 1.2em;
border-top: 1px solid var(--line-2);
font-family: var(--serif);
font-optical-sizing: none;
font-variation-settings: "opsz" 20, "SOFT" 60, "WONK" 0;
font-style: italic;
font-size: .98rem;
color: var(--ink-3);
}
.work__ba + .work__after-click { margin-top: 1.5em; }
/* ============================================================ bento ===== */
.bento { display: grid; gap: clamp(16px, 2vw, 22px); }
@media (min-width: 900px) {
.bento { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.glow--tall { grid-row: span 2; }
}
.bento__cell {
display: flex;
flex-direction: column;
gap: 1.15em;
padding: clamp(20px, 2.4vw, 28px);
border: 1px solid var(--line);
border-radius: var(--r-xl);
background: var(--card);
box-shadow: var(--shadow-md);
}
.bento__cell--quote { justify-content: space-between; }
.bento__cell--quote blockquote p {
font-family: var(--serif);
font-optical-sizing: none;
font-variation-settings: "opsz" 32, "SOFT" 50, "WONK" 0;
font-size: 1.05rem;
line-height: 1.46;
letter-spacing: -.014em;
color: var(--ink);
text-wrap: pretty;
}
.attrib {
display: flex;
align-items: center;
gap: .7em;
font-size: .85rem;
color: var(--ink-3);
}
.attrib b { color: var(--ink); font-weight: 500; }
.attrib__face {
width: 40px;
height: 40px;
flex: none;
border-radius: 50%;
object-fit: cover;
background: var(--paper-2);
box-shadow: 0 1px 2px rgba(22, 18, 31, .06), 0 0 0 1px rgba(22, 18, 31, .05);
}
.attrib__who { display: flex; flex-direction: column; line-height: 1.35; }
.attrib__role { font-size: .8rem; color: var(--ink-3); }
.player {
position: relative;
display: grid;
place-items: center;
aspect-ratio: 16 / 10;
border-radius: var(--r-lg);
overflow: hidden;
background: #1B1533;
}
/* The clip is shot vertical (9:16), so the player is too. Capped in width or a
portrait video in a full-width cell would tower over everything beside it. */
.player--tall {
aspect-ratio: 9 / 16;
width: 100%;
max-width: 19rem;
margin-inline: auto;
}
.player__poster {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* A scrim only under the button, so the play affordance survives a light frame
without washing out the poster itself. */
.player::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(60% 40% at 50% 50%, rgba(20, 14, 40, .34), transparent 70%);
pointer-events: none;
}
.player__btn {
position: relative;
z-index: 1;
display: grid;
place-items: center;
width: 62px; height: 62px;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, .94);
cursor: pointer;
box-shadow: 0 12px 34px -12px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255,255,255,.9);
transition: transform 170ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
.player__btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
.player__btn:hover { transform: scale(1.05); box-shadow: 0 18px 44px -14px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255,255,255,.9); }
}
.player__tri {
width: 0; height: 0;
margin-left: 5px;
border-left: 17px solid var(--ink);
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
.player__cap { display: flex; flex-direction: column; gap: .7em; }
.player__quote {
font-family: var(--serif);
font-optical-sizing: none;
font-variation-settings: "opsz" 32, "SOFT" 60, "WONK" 0;
font-style: italic;
font-size: 1.1rem;
line-height: 1.4;
letter-spacing: -.018em;
color: var(--ink);
}
.founding {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: clamp(20px, 3vw, 40px);
margin-top: clamp(22px, 2.8vw, 32px);
padding: clamp(24px, 3vw, 36px);
border: 1px solid var(--line);
border-radius: var(--r-xl);
background: linear-gradient(142deg, rgba(124, 92, 255, .075), rgba(62, 155, 240, .05));
}
.founding__body { flex: 1 1 30rem; }
.founding h3 {
margin-bottom: .55em;
font-family: var(--serif);
font-optical-sizing: none;
font-variation-settings: "opsz" 26, "SOFT" 40, "WONK" 0;
font-size: 1.24rem;
letter-spacing: -.02em;
color: var(--ink);
}
.founding p { font-size: .95rem; color: var(--ink-2); text-wrap: pretty; }
/* ============================================================ steps ===== */
/* The steps stack. Each card sticks a little lower than the one before it, so
the steps you have read stay on screen as a deck rather than scrolling away.
Pure CSS — `--i` on each item is the only thing JS-free stacking needs.
The sticky element itself must never be transformed (that would make it the
containing block and break the stick), so the reveal animation lives on the
card inside it. */
.steps {
display: grid;
gap: clamp(18px, 2.2vw, 26px);
max-width: 62rem;
}
.steps__item {
position: sticky;
top: calc(var(--stack-top) + var(--i) * var(--stack-step));
--stack-top: 96px;
--stack-step: 14px;
}
/* Each card arrives before it stacks: it fades and rises while it is still in
the lower half of the screen, and is fully formed by the time it reaches its
sticky position. The trigger is deliberately late (the card has to clear two
thirds of the viewport) — the page-wide .reveal fires on the first visible
pixel, which for a stacking card means it is already solid long before it
moves, and you never see it arrive.
The transform sits on the card, never on the sticky : transforming a
sticky element makes it a containing block and kills the stick. */
.steps__card {
opacity: 0;
transform: translateY(32px) scale(.968);
transition: opacity 520ms var(--ease-out), transform 620ms var(--ease-out);
}
.steps__card[data-visible] { opacity: 1; transform: none; }
html:not(.js) .steps__card { opacity: 1; transform: none; }
/* --------------------------------------------------- step figure motion --
Each figure performs its own idea once the card has arrived: the call gets
its people, the map traces the journey to the gap, the verdict lands row by
row, the build fills, the test lead passes each stage. Keyed to the card's
[data-visible] so a figure never plays to an empty screen, and every one of
them is transform/opacity only. */
@keyframes fig-pop { from { opacity: 0; transform: scale(.72); } to { opacity: 1; transform: none; } }
@keyframes fig-slide { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes fig-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fig-fill { from { transform: scaleX(0); } to { transform: scaleX(.75); } }
@keyframes fig-drop { from { opacity: 0; transform: translateY(-6px); } 40% { opacity: 1; } to { opacity: 0; transform: translateY(14px); } }
@keyframes fig-ring { 0% { opacity: .5; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes fig-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.steps__card[data-visible] .sfig__face { animation: fig-pop 420ms var(--ease-out) both; }
.steps__card[data-visible] .sfig__face--me { animation-delay: 130ms; }
/* 01 — the chosen slot keeps a slow ring, so the card never looks frozen. */
.slot--on { position: relative; }
.slot--on::after {
content: "";
position: absolute;
inset: -2px;
border-radius: 9px;
border: 1.5px solid rgba(124, 92, 255, .5);
opacity: 0;
}
.steps__card[data-visible] .slot--on::after { animation: fig-ring 2.8s var(--ease-out) 600ms infinite; }
/* 02 — the dots light down the chain, then a pulse keeps running the route. */
.steps__card[data-visible] .map__dot--on { animation: fig-pop 380ms var(--ease-out) both; }
.steps__card[data-visible] .map > *:nth-child(3) .map__dot { animation-delay: 130ms; }
.steps__card[data-visible] .map > *:nth-child(5) .map__dot { animation-delay: 260ms; }
.map__wire { position: relative; overflow: hidden; }
.map__wire:not(.map__wire--gap)::after {
content: "";
position: absolute;
left: -1px;
width: 4px;
height: 8px;
border-radius: 2px;
background: var(--violet);
opacity: 0;
}
.steps__card[data-visible] .map > *:nth-child(2)::after { animation: fig-drop 2.4s linear 900ms infinite; }
.steps__card[data-visible] .map > *:nth-child(4)::after { animation: fig-drop 2.4s linear 1300ms infinite; }
.steps__card[data-visible] .map__gap { animation: fig-breathe 2.6s ease-in-out 1700ms infinite; }
/* 03 — the verdict lands a row at a time. */
.steps__card[data-visible] .vrow { animation: fig-slide 380ms var(--ease-out) both; }
.steps__card[data-visible] .vrow:nth-child(2) { animation-delay: 70ms; }
.steps__card[data-visible] .vrow:nth-child(3) { animation-delay: 140ms; }
.steps__card[data-visible] .vrow:nth-child(4) { animation-delay: 210ms; }
.steps__card[data-visible] .vrow:nth-child(5) { animation-delay: 280ms; }
/* 04 — ticks land, then the bar fills to meet them. */
.steps__card[data-visible] .brow--done .btick { animation: fig-pop 340ms var(--ease-out) both; }
.steps__card[data-visible] .brow:nth-child(2) .btick { animation-delay: 110ms; }
.steps__card[data-visible] .brow:nth-child(3) .btick { animation-delay: 220ms; }
.steps__card[data-visible] .bbar__fill { animation: fig-fill 900ms var(--ease-out) 320ms both; }
.steps__card[data-visible] .brow--now .btick { animation: fig-breathe 1.9s ease-in-out 900ms infinite; }
/* 05 — the test lead clears each stage in turn. */
.steps__card[data-visible] .run__step { animation: fig-pop 340ms var(--ease-out) both; }
.steps__card[data-visible] .run__step:nth-child(2) { animation-delay: 120ms; }
.steps__card[data-visible] .run__step:nth-child(3) { animation-delay: 240ms; }
.steps__card[data-visible] .run__step:nth-child(4) { animation-delay: 360ms; }
.steps__card[data-visible] .hchip { animation: fig-rise 420ms var(--ease-out) both; }
.steps__card[data-visible] .hchip:nth-child(2) { animation-delay: 560ms; }
.steps__card[data-visible] .hchip:nth-child(3) { animation-delay: 640ms; }
.steps__card[data-visible] .hchip:nth-child(1) { animation-delay: 480ms; }
@media (prefers-reduced-motion: reduce) {
.steps__card[data-visible] .sfig__face,
.steps__card[data-visible] .slot--on::after,
.steps__card[data-visible] .map__dot--on,
.steps__card[data-visible] .map__wire::after,
.steps__card[data-visible] .map__gap,
.steps__card[data-visible] .vrow,
.steps__card[data-visible] .btick,
.steps__card[data-visible] .bbar__fill,
.steps__card[data-visible] .run__step,
.steps__card[data-visible] .hchip { animation: none; }
.bbar__fill { transform: scaleX(.75); }
}
@media (prefers-reduced-motion: reduce) {
.steps__card { transform: none; transition-duration: 260ms; }
}
/* The last card needs room beneath it or the stack never finishes unstacking. */
.steps__item:last-child { margin-bottom: clamp(10px, 4vw, 48px); }
.steps__card {
display: grid;
gap: clamp(20px, 3vw, 38px);
padding: clamp(22px, 2.8vw, 32px);
border: 1px solid var(--line);
border-radius: var(--r-xl);
background: linear-gradient(180deg, #fff, #FCFBFE);
box-shadow: var(--shadow-lg);
}
@media (min-width: 860px) {
.steps__card { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); align-items: center; }
}
.steps__main {
display: grid;
grid-template-columns: 46px minmax(0, 1fr);
gap: clamp(12px, 2vw, 22px);
align-items: start;
}
.steps__n {
padding-top: .3em;
font-family: var(--mono);
font-size: .78rem;
font-weight: 500;
letter-spacing: .07em;
color: var(--violet);
}
.steps__body h3 {
margin-bottom: .38em;
font-family: var(--serif);
font-optical-sizing: none;
font-variation-settings: "opsz" 28, "SOFT" 40, "WONK" 0;
font-size: 1.3rem;
letter-spacing: -.024em;
color: var(--ink);
}
.steps__body p { font-size: .98rem; color: var(--ink-2); text-wrap: pretty; }
.calls { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 1.1em; }
.calls li {
padding: 5px 11px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--card);
font-family: var(--mono);
font-size: .645rem;
font-weight: 500;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--ink-3);
}
.calls li:first-child {
border-color: rgba(91, 61, 245, .34);
background: rgba(91, 61, 245, .07);
color: var(--violet-deep);
}
/* ---------------------------------------------------------- step figures --
Same vocabulary as the hero: soft cards, mono micro-labels, skeleton bars,
glowing wires. Schematics of the artefact each step produces, not pictures. */
.steps__fig { display: none; }
@media (min-width: 860px) { .steps__fig { display: block; } }
.sfig { display: grid; gap: 10px; }
.sfig__card {
padding: 14px 16px 15px;
border: 1px solid var(--line);
border-radius: 18px;
background: rgba(255, 255, 255, .9);
box-shadow: var(--shadow-md);
}
.sfig__card .sk { margin-top: 7px; }
.sfig__head { display: flex; align-items: center; gap: .6em; margin-bottom: .8em; }
.sfig__meta {
margin-left: auto;
font-family: var(--mono);
font-size: .64rem;
letter-spacing: .06em;
color: var(--ink-4);
}
.sfig__label {
font-family: var(--mono);
font-size: .62rem;
font-weight: 500;
letter-spacing: .13em;
text-transform: uppercase;
color: var(--ink-4);
}
/* 01 — the call */
.sfig__faces { display: flex; align-items: center; gap: 8px; }
.sfig__face {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px; height: 30px;
border-radius: 50%;
border: 1px solid var(--line);
background: linear-gradient(150deg, #EDE7FD, #DCEAFB);
font-family: var(--mono);
font-size: .58rem;
color: var(--violet-deep);
}
.sfig__face--me { background: linear-gradient(150deg, var(--violet-lift), var(--violet-deep)); color: #fff; border-color: transparent; }
.sfig__slots { display: flex; gap: 6px; }
.slot { flex: 1; height: 22px; border-radius: 7px; border: 1px solid var(--line); background: rgba(255,255,255,.7); }
.slot--on {
border-color: rgba(91, 61, 245, .38);
background: rgba(91, 61, 245, .1);
box-shadow: 0 0 0 3px rgba(124, 92, 255, .12);
}
/* 02 — the journey map */
.map { display: grid; gap: 0; }
.map__row { display: flex; align-items: center; gap: 10px; }
.map__dot {
width: 9px; height: 9px;
flex: none;
border-radius: 50%;
border: 1.5px solid var(--line-2);
background: #fff;
}
.map__dot--on { border-color: var(--violet); background: var(--violet); box-shadow: 0 0 0 3px rgba(124, 92, 255, .14); }
.map__lbl { font-size: .82rem; color: var(--ink-2); }
.map__lbl--dim { color: var(--ink-4); }
.map__wire {
width: 2px;
height: 18px;
margin-left: 3.5px;
border-radius: 2px;
background: linear-gradient(180deg, rgba(91, 61, 245, .5), rgba(91, 61, 245, .18));
}
.map__wire--gap {
display: flex;
align-items: center;
gap: 8px;
height: 24px;
background: none;
border-left: 2px dashed rgba(91, 61, 245, .3);
width: auto;
}
.map__gap {
margin-left: 14px;
font-family: var(--mono);
font-size: .56rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--violet-deep);
background: rgba(91, 61, 245, .09);
border-radius: 999px;
padding: 2px 8px;
}
/* 03 — the verdict */
.verdicts { display: grid; gap: 6px; }
.vrow {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 11px;
border: 1px solid var(--line);
border-radius: 11px;
background: rgba(255, 255, 255, .82);
}
.vpart { flex: 1; font-size: .82rem; color: var(--ink-2); }
.vtag {
font-family: var(--mono);
font-size: .58rem;
font-weight: 500;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--ink-4);
}
.vtag--keep { color: var(--violet-deep); }
/* 04 — the build */
.build { display: grid; gap: 7px; }
.brow { display: flex; align-items: center; gap: 9px; }
.btick {
width: 15px; height: 15px;
flex: none;
border-radius: 50%;
border: 1.5px solid var(--line-2);
background: #fff;
}
.brow--done .btick {
border-color: transparent;
background: var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.2l2.2 2.2 4.6-4.6' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.brow--now .btick { border-color: var(--violet); border-style: dashed; }
.blbl { font-size: .82rem; color: var(--ink-2); }
.brow--now .blbl { color: var(--ink-4); }
.bbar { height: 5px; margin-top: 12px; border-radius: 999px; background: var(--line); overflow: hidden; }
.bbar__fill {
display: block;
width: 100%;
height: 100%;
border-radius: 999px;
transform: scaleX(.75);
transform-origin: left;
background: linear-gradient(90deg, var(--violet-lift), var(--violet-deep));
}
/* 05 — the proof run and the handover */
.run { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.run__step {
display: flex;
align-items: center;
gap: .5em;
padding: 5px 10px;
border-radius: 9px;
border: 1px solid rgba(91, 61, 245, .24);
background: rgba(91, 61, 245, .06);
font-family: var(--mono);
font-size: .58rem;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--violet-deep);
}
.run__step::before {
content: "";
width: 11px; height: 11px;
flex: none;
border-radius: 50%;
background: var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.2l2.2 2.2 4.6-4.6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 9px no-repeat;
}
.handover { display: flex; gap: 6px; }
.hchip {
flex: 1;
padding: 7px 0;
text-align: center;
border: 1px solid var(--line);
border-radius: 10px;
background: rgba(255, 255, 255, .8);
font-family: var(--mono);
font-size: .58rem;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ink-3);
}
@media (prefers-reduced-motion: reduce) {
.steps__item { position: static; }
}
/* ============================================================== fit ===== */
.fit { display: grid; gap: clamp(18px, 2.4vw, 26px); }
@media (min-width: 840px) { .fit { grid-template-columns: 1fr 1fr; align-items: start; } }
.fit__col {
padding: clamp(24px, 3vw, 36px);
border: 1px solid var(--line);
border-radius: var(--r-xl);
}
.fit__col--yes { background: var(--card); box-shadow: var(--shadow-md); }
.fit__col--no { border-style: dashed; border-color: rgba(22, 18, 31, .16); background: transparent; }
.fit__label {
margin-bottom: 1.35em;
font-family: var(--mono);
font-size: .67rem;
font-weight: 500;
letter-spacing: .14em;
text-transform: uppercase;
}
.fit__col--yes .fit__label { color: var(--violet-deep); }
.fit__col--no .fit__label { color: var(--ink-4); }
.fit__col li {
position: relative;
padding-left: 1.7em;
padding-block: .5em;
font-size: .96rem;
text-wrap: pretty;
}
.fit__col--yes li { color: var(--ink-2); }
.fit__col--no li { color: var(--ink-3); }
.fit__col--yes li::before {
content: "";
position: absolute;
left: 2px; top: .82em;
width: 9px; height: 5px;
border-left: 1.7px solid var(--violet);
border-bottom: 1.7px solid var(--violet);
transform: rotate(-45deg);
}
.fit__col--no li::before {
content: "";
position: absolute;
left: 2px; top: 1.08em;
width: 10px; height: 1.6px;
border-radius: 2px;
background: var(--ink-4);
}
/* ============================================================== faq ===== */
.faq { border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line-2); }
.qa summary {
display: flex;
align-items: center;
gap: 1.2em;
padding-block: 1.05em;
list-style: none;
cursor: pointer;
color: var(--ink);
font-weight: 450;
letter-spacing: -.014em;
transition: color 180ms ease;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary span { flex: 1; }
@media (hover: hover) and (pointer: fine) {
.qa summary:hover { color: var(--violet-deep); }
}
.qa summary i { position: relative; flex: none; width: 14px; height: 14px; }
.qa summary i::before,
.qa summary i::after {
content: "";
position: absolute;
border-radius: 2px;
background: var(--ink-4);
transition: transform 240ms var(--ease-out), opacity 240ms var(--ease-out);
}
.qa summary i::before { left: 0; top: 6.2px; width: 14px; height: 1.6px; }
.qa summary i::after { left: 6.2px; top: 0; width: 1.6px; height: 14px; }
.qa[data-expanded] summary i::after { transform: rotate(90deg); opacity: 0; }
.qa[data-expanded] summary i::before { background: var(--violet); }
.qa__wrap {
display: grid;
grid-template-rows: 0fr;
opacity: 0;
transition: grid-template-rows 260ms var(--ease-out), opacity 200ms var(--ease-out);
}
.qa[data-expanded] .qa__wrap { grid-template-rows: 1fr; opacity: 1; }
.qa__inner { overflow: hidden; }
.qa__inner p {
padding-bottom: 1.3em;
padding-right: 2em;
font-size: .96rem;
color: var(--ink-3);
text-wrap: pretty;
}
html:not(.js) .qa__wrap { grid-template-rows: 1fr; opacity: 1; }
/* ============================================================ close ===== */
.close {
position: relative;
overflow: hidden;
padding-block: clamp(96px, 13vw, 170px);
text-align: center;
border-top: 1px solid var(--line-2);
background: linear-gradient(180deg, var(--paper) 0%, #F3EFFB 100%);
}
.close__inner { position: relative; z-index: 1; max-width: 44rem; margin-inline: auto; }
.close .lede { margin: 1.5em auto 0; }
.close .link-arrow { margin-top: 2em; }
/* =========================================================== footer ===== */
.foot { padding-block: 38px; border-top: 1px solid var(--line-2); }
.foot__inner { display: flex; flex-wrap: wrap; align-items: center; gap: .8em 2em; }
.foot__line { font-size: .88rem; color: var(--ink-3); }
.foot__reg {
flex-basis: 100%;
margin-top: .6em;
padding-top: 22px;
border-top: 1px solid var(--line-2);
}
.foot__reg img { display: block; width: 224px; height: auto; border-radius: 6px; }
.foot__meta {
margin-left: auto;
font-family: var(--mono);
font-size: .68rem;
letter-spacing: .07em;
color: var(--ink-4);
}
/* ==================================================== anchors & load-in == */
section[id], .close, .hero { scroll-margin-top: 84px; }
/* The hero is in view at load, so its reveal doubles as the page entrance.
Short delays only — this is the one screen that can afford a beat. */
.hero__copy > .reveal:nth-child(1) { transition-delay: 40ms; }
.hero__copy > .reveal:nth-child(2) { transition-delay: 100ms; }
.hero__copy > .reveal:nth-child(3) { transition-delay: 165ms; }
.hero__copy > .reveal:nth-child(4) { transition-delay: 205ms; }
.hero__copy > .reveal:nth-child(5) { transition-delay: 245ms; }
.hero__copy > .reveal:nth-child(6) { transition-delay: 285ms; }
.hero__figure { transition-delay: 190ms; }
@media (prefers-reduced-motion: reduce) {
.hero__copy > .reveal, .hero__figure { transition-delay: 0ms; }
}