, a bare text node becomes its own flex item and the bold sentence
breaks away into a second column. */
.lp-spine-trust { max-width: 1240px; margin: clamp(22px, 3vw, 34px) auto 0; display: flex; align-items: flex-start;
gap: 11px; font-size: clamp(15px, 1.4vw, 17px); line-height: 1.5; color: var(--ink-soft); }
.lp-spine-trust > span { max-width: 62ch; }
.lp-spine-trust svg { width: 21px; height: 21px; flex: none; color: var(--tan-deep); margin-top: 1px; }
.lp-spine-trust b { color: var(--ink); font-weight: 800; }
/* ── HIS EARS, HIS EYES ────────────────────────────────────────────────────
The mascot is not decoration here, it is the status display: ears where it
listens, eyes where it looks. The ears are the exact pair from the wordmark's
tittle, so the brand mark and the capability icon are literally the same art. */
.lp-ic-ears svg { width: 22px; height: 22px; }
.lp-ic-eyes svg { width: 23px; height: 23px; }
.lp-how-card:hover .lp-ic-ears svg { transform: translateY(-2px) scale(1.06); }
.lp-ic-ears svg, .lp-ic-eyes .pupil { transition: transform .25s ease; transform-origin: center; }
.lp-how-card:hover .lp-ic-eyes .pupil { transform: scaleY(.55); }
@media (prefers-reduced-motion: reduce) {
.lp-ic-ears svg, .lp-ic-eyes .pupil,
.lp-how-card:hover .lp-ic-ears svg, .lp-how-card:hover .lp-ic-eyes .pupil { transition: none; transform: none; }
}
/* the "Does it" card — a short log of things it went and did */
.lp-how-does-log p { display: flex; align-items: baseline; gap: 8px; margin: 0 0 7px; color: var(--ink-soft); }
.lp-how-does-log p:last-child { margin-bottom: 0; color: var(--ink); font-weight: 700; flex-wrap: wrap; }
.lp-how-does-log .tick { color: #2e7d4f; font-weight: 800; }
.lp-how-does-log .ask { color: var(--tan-deep); font-weight: 800; }
.lp-how-does-log b { margin-left: auto; background: var(--ink); color: #fff; font-size: 11.5px;
padding: 2px 9px; border-radius: 999px; font-weight: 800; }
/* ── WHAT FOR ──────────────────────────────────────────────────────────────
Five moments, and the same question under each one. The repetition is the
point — it is one question asked from five different places. */
.lp-what { background: var(--cream); padding: clamp(50px, 8vw, 100px) clamp(20px, 5vw, 64px); }
.lp-what-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; max-width: 1240px; margin: 0 auto; }
@media (max-width: 1100px) { .lp-what-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .lp-what-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lp-what-card { background: #fff; border: 1px solid var(--line, #e4d8c2); border-radius: 18px; padding: 20px 18px; }
.lp-what-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px;
background: var(--cream-2); color: var(--tan-deep); margin-bottom: 14px; }
.lp-what-ic svg { width: 20px; height: 20px; }
.lp-what-card h3 { font-size: 17px; font-weight: 800; margin: 0 0 6px; }
.lp-what-card .q { margin: 0; font-size: 14px; line-height: 1.45; color: var(--tan-deep); font-weight: 700; }
/* ── INDUSTRIES ────────────────────────────────────────────────────────────
Numbers-driven, and every number is named and dated. Nothing here claims an
outcome we have measured, because we have not measured one yet. */
.lp-ind { background: #fff; padding: clamp(50px, 8vw, 100px) clamp(20px, 5vw, 64px); }
.lp-ind-eyebrow { font-family: 'Figtree', sans-serif; font-weight: 800; font-size: 12.5px;
letter-spacing: .14em; text-transform: uppercase; color: var(--tan-deep); margin: 0 0 10px; }
.lp-ind-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 1240px; margin: 0 auto; }
@media (max-width: 860px) { .lp-ind-grid { grid-template-columns: minmax(0, 1fr); } }
.lp-ind-card { background: var(--cream); border-radius: var(--radius); padding: 26px 24px; display: flex; flex-direction: column; }
.lp-ind-stat { display: flex; align-items: baseline; gap: 14px; margin: 0 0 16px; }
.lp-ind-stat b { font-family: 'Figtree', sans-serif; font-weight: 900; font-size: clamp(34px, 3.4vw, 46px);
letter-spacing: -.03em; color: var(--ink); line-height: .95; flex: none; }
.lp-ind-stat span { font-size: 13.5px; line-height: 1.4; color: var(--ink-soft); }
.lp-ind-stat cite, .lp-ind-side cite { display: block; font-style: normal; font-size: 11.5px; color: #9a927f; margin-top: 4px; }
.lp-ind-side cite { display: inline; margin-left: 4px; }
.lp-ind-card h3 { font-size: 23px; font-weight: 800; margin: 0 0 9px; }
.lp-ind-card > p { font-size: 15px; line-height: 1.58; color: var(--ink-soft); margin: 0 0 14px; }
/* Qualified rather than !important: the base rule is `.lp-ind-card > p`, which
out-specifies a bare class. Matching that specificity and adding the class
wins honestly and stays overridable. */
.lp-ind-card > p.lp-ind-side { font-size: 13.5px; color: #857c6b; border-left: 2px solid var(--line, #e4d8c2);
padding-left: 12px; margin-bottom: 18px; }
.lp-ind-demo { margin-top: auto; align-self: flex-start; font-family: 'Figtree', sans-serif;
font-weight: 800; font-size: 15px; color: var(--ink); border-bottom: 2px solid var(--tan); padding-bottom: 2px; }
.lp-ind-demo span { display: inline-block; transition: transform .2s ease; }
.lp-ind-demo:hover span { transform: translateX(4px); }
/* ── the zero-gravity badge field ──────────────────────────────────────────
Behind the hero copy. pointer-events are off on the layer and on only for
the tiles themselves, or the hero buttons stop being clickable. */
/* Fixed to the viewport so the field covers the whole page rather than only the
hero. It sits ABOVE section backgrounds — which are opaque, so a layer behind
them would be invisible everywhere except the hero — and the tiles are kept
faint enough to pass over copy without competing with it. */
.lp-gravity { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 3; }
.lp-grav-tile {
position: absolute; top: 0; left: 0; display: grid; place-items: center;
border-radius: 30%; pointer-events: auto; cursor: grab;
box-shadow: 0 10px 22px -8px rgba(58,36,16,.34), inset 0 1px 0 rgba(255,255,255,.34);
opacity: .3; will-change: transform;
}
.lp-grav-tile:active { cursor: grabbing; }
.lp-grav-tile svg { width: 52%; height: 52%; }
/* the hero's own content has to sit above the field */
.lp-hero > .lp-top, .lp-hero > .lp-hero-grid { position: relative; z-index: 1; }
/* ── IN ACTION ─────────────────────────────────────────────────────────────
Four beats of one real job, ending on the headline. Built as markup rather
than screenshots so it stays crisp, translatable and editable — and so it
cannot drift out of date the way a pasted screenshot does. */
.lp-act { background: var(--cream); padding: clamp(50px, 8vw, 100px) clamp(20px, 5vw, 64px); }
.lp-act-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; max-width: 1240px; margin: 0 auto; }
@media (max-width: 1040px) { .lp-act-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
@media (max-width: 560px) {
.lp-act-grid { grid-template-columns: minmax(0, 1fr); }
/* One per row, so the handset has to be capped — stretched to the full column
it is 460px wide and stops reading as a phone at all. */
.lp-act-step { max-width: 300px; margin-inline: auto; }
}
.lp-act-step { margin: 0; }
.lp-act-step figcaption { margin-top: 15px; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.lp-act-step figcaption b { display: block; font-family: 'Figtree', sans-serif; font-weight: 800;
font-size: 15px; color: var(--ink); margin-bottom: 3px; }
/* the handset */
.lp-phone { background: #15110c; border-radius: 26px; padding: 9px; box-shadow: 0 22px 44px -18px rgba(50,34,16,.5); }
.lp-phone-screen { background: #fff; border-radius: 19px; padding: 20px 17px; min-height: 290px;
display: flex; flex-direction: column; }
.lp-phone-screen .sub { font-size: 12px; color: #9a927f; margin: auto 0 0; }
.lp-phone-screen .lbl { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
color: var(--tan-deep); margin: 0 0 7px; }
/* 1 — tap */
.lp-act-tap { align-items: center; text-align: center; justify-content: center; gap: 4px; }
.lp-act-nfc { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center;
background: linear-gradient(145deg, var(--gold), var(--tan-deep)); color: #fff; margin-bottom: 14px; }
.lp-act-nfc svg { width: 26px; height: 26px; }
.lp-act-tap .big { font-family: 'Figtree', sans-serif; font-weight: 900; font-size: 20px;
line-height: 1.18; margin: 0 0 8px; color: var(--ink); }
.lp-act-tap .sub { margin: 0; }
/* 2 — listening */
.lp-act-ears { display: block; color: var(--ink); margin-bottom: 16px; }
.lp-act-ears svg { width: 30px; height: 30px; }
.lp-act-bars { display: flex; align-items: flex-end; gap: 3px; height: 46px; margin-bottom: 16px; }
.lp-act-bars i { flex: 1; background: var(--tan); border-radius: 2px; opacity: .85; }
.lp-act-bars i:nth-child(odd) { height: 42%; }
.lp-act-bars i:nth-child(3n) { height: 86%; }
.lp-act-bars i:nth-child(4n) { height: 24%; }
.lp-act-bars i:nth-child(5n) { height: 68%; background: var(--tan-deep); }
.lp-act-listen .said { font-family: 'Figtree', sans-serif; font-weight: 800; font-size: 17px;
line-height: 1.3; margin: 0; color: var(--ink); }
/* 3 — the finding */
.lp-act-find .big2 { font-family: 'Figtree', sans-serif; font-weight: 900; font-size: 19px;
line-height: 1.16; margin: 0 0 15px; color: var(--ink); }
.lp-act-rows { list-style: none; margin: 0; padding: 0; }
.lp-act-rows li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0;
border-top: 1px solid #efe9db; font-size: 12.5px; color: #8d8475; }
.lp-act-rows li b { color: var(--ink); font-weight: 800; text-align: right; }
.lp-act-rows li b.warn { color: var(--tan-deep); }
/* 4 — the payoff */
.is-payoff .lp-phone { box-shadow: 0 26px 54px -18px rgba(255,95,30,.42), 0 22px 44px -18px rgba(50,34,16,.4); }
.lp-act-price .quote { font-family: 'Figtree', sans-serif; font-weight: 900; font-size: 42px;
letter-spacing: -.03em; line-height: 1; margin: 0 0 14px; color: var(--ink); }
.lp-act-price .verdict { margin: 15px 0 0; font-family: 'Figtree', sans-serif; font-weight: 900;
font-size: 17px; line-height: 1.2; color: var(--flame, #FF5F1E); }
.lp-act-price .verdict span { display: block; margin-top: 5px; font-family: 'Figtree', sans-serif;
font-weight: 500; font-size: 11.5px; color: #9a927f; }
.lp-act-fine { max-width: 1240px; margin: clamp(22px, 3vw, 32px) auto 0; font-size: 12.5px; color: #9a927f; }
/* ══ THE FILM HERO ══════════════════════════════════════════════════════════
Meta's construction, read off the live page: full-bleed footage, no scrim —
the grade carries the type — with the headline in the LOWER-MIDDLE third,
not centred. Three lines; the outer two hold the pun and only the middle
one swaps. Chrome is almost nothing: the mark, a few links, one pill. */
.lp-film {
position: relative; min-height: 100svh; min-height: 100vh;
padding: 92px clamp(20px, 5vw, 64px) 0;
overflow: hidden;
background: #15110c url('/film/ask.jpg') center/cover no-repeat;
/* The words and the mascot are ONE group, stacked and centred. They used to
be anchored independently — text at top:19vh, cat at bottom:0 — which held
together at 16:9 and fell apart on anything tall: at iPad portrait the two
ended up stranded at opposite ends with a dead gap between them. */
display: flex; flex-direction: column; align-items: center; justify-content: center;
}
/* Two stacked players. Only the INCOMING one animates: it rises from 0 to 1
over the outgoing frame, which is still sitting there at full opacity, so
the hero background never shows through and there is no dip to black.
`is-top` is what makes that work — without it the arriving clip would fade
in underneath on alternate swaps and you would see nothing happen. */
.lp-film-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
z-index: 0; opacity: 0; transition: opacity .2s linear; background: #15110c; }
.lp-film-v.is-on { opacity: 1; }
.lp-film-v.is-top { z-index: 1; }
.lp-film-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
z-index: 1; opacity: 1; transition: opacity .35s ease; pointer-events: none; }
.lp-film-poster.is-hidden { opacity: 0; }
/* A light vignette rather than a flat scrim — the footage is already graded
down, and a full overlay flattens it into mud. */
.lp-film-veil { position: absolute; inset: 0; z-index: 2; pointer-events: none;
background:
linear-gradient(180deg, rgba(10,8,5,.42) 0%, rgba(10,8,5,0) 26%, rgba(10,8,5,0) 48%, rgba(10,8,5,.52) 100%),
radial-gradient(120% 70% at 50% 72%, rgba(10,8,5,.34) 0%, rgba(10,8,5,0) 70%); }
/* Meta's bar, measured off their page: the mark at the far left with the links
grouped immediately beside it, and ONLY the CTA on the right. Links are 14px
at medium weight, not bold — bold is what made ours look like a toolbar.
Fixed, not just in the hero: theirs follows you the whole way down, going
from white-on-film to ink-on-cream once you are past the footage. */
.lp-filmbar {
position: fixed; top: 0; left: 0; right: 0; z-index: 40;
display: flex; align-items: center; justify-content: space-between; gap: 18px;
padding: 13px clamp(20px, 5vw, 64px);
transition: background .3s ease, box-shadow .3s ease;
}
.lp-nav-left { display: flex; align-items: center; gap: clamp(16px, 3vw, 44px); }
.lp-filmbar .lp-wm img { height: 27px; width: auto; display: block; filter: brightness(0) invert(1); }
.lp-filmnav { display: flex; align-items: center; gap: clamp(10px, 1.7vw, 28px); }
.lp-filmnav a { position: relative; color: rgba(255,255,255,.88); font-weight: 500; font-size: 14px; white-space: nowrap;
text-decoration: none; } /* store.css underlines every bare */
.lp-filmnav a:hover { color: #fff; }
/* the page you are on: brighter, heavier, with a flame underline */
.lp-filmnav a[aria-current="page"] { color: #fff; font-weight: 700; }
.lp-filmnav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
height: 2px; border-radius: 2px; background: var(--flame, #FF5F1E); }
/* past the film: solid cream, ink type */
.lp-filmbar.is-solid { background: rgba(252,240,228,.94); backdrop-filter: blur(10px);
box-shadow: 0 1px 0 rgba(120,95,50,.14); }
.lp-filmbar.is-solid .lp-wm img { filter: none; }
.lp-filmbar.is-solid .lp-filmnav a { color: var(--ink-soft); }
.lp-filmbar.is-solid .lp-filmnav a:hover { color: var(--ink); }
.lp-filmbar.is-solid .lp-filmnav a[aria-current="page"] { color: var(--ink); }
.lp-filmbar.is-solid .lp-pill { background: var(--ink); color: #fff; }
.lp-filmbar.is-solid .lp-pill:hover { background: #000; }
@media (max-width: 860px) { .lp-filmnav { display: none; } }
.lp-pill { font-family: 'Figtree', sans-serif; font-weight: 800; font-size: 14.5px;
padding: 11px 20px; border-radius: 999px; border: 0; cursor: pointer;
background: #fff; color: var(--ink); transition: transform .18s, background .18s; }
.lp-pill:hover { transform: translateY(-1px); background: var(--gold); }
.lp-pill-ink { background: var(--ink); color: #fff; }
.lp-pill-ink:hover { background: #000; color: #fff; }
/* the words — lower-middle third, hard-left like the rest of the page's type */
/* ── the centred lockup ────────────────────────────────────────────────────
Meta's own numbers: absolutely positioned at top:35vh desktop / 23vh mobile,
max 700px / 500px, centred, z-index 3.
Everything here is PERMANENT except the top line. The offer does not take
turns with the joke — it was previously one state of a six-state rotation
and so was off screen five sixths of the time. */
.lp-lockup {
/* The wordmark's aspect is a constant 4.090 (measured, not guessed), so its
right edge — the flame period — is exactly half-width from centre:
height x 2.045. Everything the mascot is pinned to derives from that, so
he tracks the logo at any viewport instead of hanging off the 700px
column, which was nowhere near the period. */
--wm-h: clamp(46px, 6vw, 88px);
--wm-half: calc(var(--wm-h) * 2.045);
--eyebrow-h: clamp(38px, 3vw, 43px); /* measured 40-43 incl. its margin */
--cat-h: calc(var(--wm-h) * 1.7); /* 1.5 read as a sticker, 2.1 crowded the line */
position: relative; z-index: 3; text-align: center; color: #fff;
width: min(700px, 100%);
/* both states share one grid cell: the cell is always the height of the
taller, so swapping cannot reflow the mascot below it */
display: grid;
}
.lp-lockup > * { grid-area: 1 / 1; align-self: start; }
@media (max-width: 767px) { .lp-lockup { width: min(500px, 100%); } }
/* the pun, three lines, centred. Meta's construction: the outer two hold and
only the middle pair moves. */
.lp-film-words {
margin: 0; font-family: 'Figtree', sans-serif; font-weight: 700;
font-size: clamp(25px, 3.4vw, 48px); line-height: 1.25; letter-spacing: -.018em;
text-shadow: 0 2px 30px rgba(0,0,0,.34);
display: flex; flex-direction: column; align-items: center;
}
/* Line by line, and the two blocks overlap: the arriving line is already
rising while the one it replaces is still fading, so the hero is never
empty. Long, soft, no snap at either end — Meta's curve, not a bounce.
The lines leave in the order they arrived, which keeps the eye moving down
the block rather than watching three things twitch at once. */
.lp-film-words .l {
display: block;
transition: opacity .62s cubic-bezier(.33,0,.1,1) var(--d, 0s),
transform .62s cubic-bezier(.33,0,.1,1) var(--d, 0s),
filter .62s cubic-bezier(.33,0,.1,1) var(--d, 0s);
}
.lp-film-words .l:nth-child(2) { --d: .075s; }
.lp-film-words .l:nth-child(3) { --d: .15s; }
.lp-film-words.is-off .l {
opacity: 0; transform: translateY(-.1em); filter: blur(5px);
transition-duration: .42s;
}
/* The brand mark standing in for the word, on every line. It is the logo
minus its flame period — a full stop in the middle of a sentence reads as
a sentence ending, not as a logo — and recoloured white, because an
cannot inherit currentColor the way the inline SVG in the lockup does.
Sized off the cap height so it sits in the line rather than on it. */
.lp-film-words .wm {
/* `vertical-align: baseline` puts the image's BOTTOM EDGE on the text
baseline — but the artwork's own baseline sits 5% of its height above
that edge, so it floats. The nudge is exactly that 5%: 138.93 is the
letters' baseline inside a viewBox running 126.2 to 139.6. Guessing at
this is what made the mark look mis-sized; it was sitting .089em low. */
height: 1.14em; width: auto; display: inline-block;
vertical-align: baseline; transform: translateY(.057em); margin-right: .06em;
}
/* "does" is the only word on the line that is not the brand, so it steps
back and lets the mark lead rather than matching it stroke for stroke. */
.lp-film-words .dz { font-size: .78em; font-weight: 600; opacity: .92; }
.lp-film-words .task { display: inline-flex; align-items: center; justify-content: center; gap: .36em; }
.lp-film-words .ic { display: inline-flex; width: .82em; height: .82em; flex: none; color: var(--gold); }
.lp-film-words .ic svg { width: 100%; height: 100%; }
.lp-film-words .l.is-out { opacity: 0; transform: translateY(-.1em); }
/* whichever state is not current is inert — faded, unclickable, out of the
accessibility tree's way */
/* visibility is NOT transitionable, so a bare `visibility:hidden` flips the
instant the class lands — the outgoing state vanished on a hard cut while
the incoming one faded in over 340ms. Delaying the visibility flip by the
length of the fade makes the exit fade properly; coming back in it flips at
0s so the element is there to fade onto. */
/* The words container itself no longer fades — its lines do, above. All it
does is go inert once they have gone. The visibility delay has to outlast
the longest line's exit (.42s + .15s of stagger) or the block is yanked
out from under a fade still in progress. */
.lp-film-words { transition: visibility 0s linear 0s; }
.lp-film-words.is-off { pointer-events: none; visibility: hidden; transition: visibility 0s linear .58s; }
/* The lockup is one block and stays one block: a wordmark and two buttons
staggering line by line reads as a glitch, not as motion. */
.lp-resolve { transition: opacity .5s cubic-bezier(.33,0,.1,1),
transform .5s cubic-bezier(.33,0,.1,1), visibility 0s linear 0s; }
.lp-resolve.is-off {
opacity: 0; transform: translateY(-.06em); pointer-events: none;
visibility: hidden; transition: opacity .4s cubic-bezier(.33,0,.1,1),
transform .4s cubic-bezier(.33,0,.1,1), visibility 0s linear .4s;
}
.lp-resolve { display: flex; flex-direction: column; align-items: center; }
.lp-resolve-eyebrow { margin: 0 0 14px; font-family: 'Figtree', sans-serif; font-weight: 600;
font-size: clamp(14px, 1.5vw, 19px); letter-spacing: .2em; text-transform: uppercase;
color: rgba(255,255,255,.8); }
/* ── the permanent ask ─────────────────────────────────────────────────────
Meta sets theirs in Optimistic, their own family — not licensable. Figtree is
the closest on Google Fonts, and it is now the ONLY family on the site: the
page used to run Figtree in the hero and a second, mismatched family
everywhere else, which is exactly the mismatch Kam was seeing. Figtree is also
the nearest of the candidates to the wordmark's own letterforms — compared
against the other serif/sans options at the mark's weight before switching.
Weights run to 700, not 900. Their headings run 400-700, and the black
weight is what made this shout. */
/* The logo IS the word "Kamochi", so the eyebrow above it reads
"Introducing / Kamochi." as one line — and with the question gone, the mark
is the whole headline. It carries the
for that reason: dropping the
question would otherwise leave the page with no top-level heading. */
.lp-resolve-mark { margin: 0 0 26px; line-height: 0; }
.lp-resolve-mark img { height: var(--wm-h); width: auto;
filter: brightness(0) invert(1); display: block; }
.lp-resolve-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.lp-pill-lg { font-size: 16px; padding: 15px 28px; }
.lp-pill-ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.55);
display: inline-flex; align-items: center; }
.lp-pill-ghost:hover { background: rgba(255,255,255,.14); color: #fff; }
.lp-resolve-fine { margin: 16px 0 0; font-size: 13.5px; color: rgba(255,255,255,.7); }
@media (prefers-reduced-motion: reduce) { .lp-film-words .l { transition: none; } }
/* ══ the garage panel, re-homed under the film ══════════════════════════════ */
.lp-gar { background: var(--cream); padding: clamp(50px, 8vw, 100px) clamp(20px, 5vw, 64px); }
.lp-gar-wrap { max-width: 1240px; margin: clamp(26px, 4vw, 44px) auto 0; }
.lp-gar .lp-garage { max-width: 760px; margin: 0 auto; }
/* shared section head, in Meta's shape: accent eyebrow, big heading, grey sub,
then the CTA pill repeated at section level rather than only in the nav */
.lp-sec-head { max-width: 1240px; margin: 0 auto; }
.lp-sec-head .lp-eyebrow { font-family: 'Figtree', sans-serif; font-weight: 800; font-size: 12.5px;
letter-spacing: .14em; text-transform: uppercase; color: var(--tan-deep); margin: 0 0 10px; }
.lp-sec-head h2 { font-size: clamp(34px, 5vw, 62px); font-weight: 900; letter-spacing: -.028em; margin: 0 0 12px; }
.lp-sec-head .lp-sec-sub { font-size: clamp(16px, 1.5vw, 19px); color: var(--ink-soft); max-width: 52ch; margin: 0 0 22px; }
/* ══ TRUST ══ Meta gives this a whole section with two flat cards and names the
audit trail outright; ours was a single line under the spine. */
.lp-trust { background: #fff; padding: clamp(50px, 8vw, 100px) clamp(20px, 5vw, 64px); }
.lp-trust-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px;
max-width: 1240px; margin: clamp(26px, 4vw, 44px) auto 0; }
@media (max-width: 820px) { .lp-trust-grid { grid-template-columns: minmax(0, 1fr); } }
.lp-trust-card { background: var(--cream); border-radius: var(--radius); padding: 28px 26px; }
.lp-trust-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
background: var(--ink); color: var(--gold); margin-bottom: 16px; }
.lp-trust-ic svg { width: 21px; height: 21px; }
.lp-trust-card h3 { font-size: 22px; font-weight: 800; margin: 0 0 9px; }
.lp-trust-card p { font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 0; }
/* ══ THE ASK ══ a section whose only job is the offer, the way TRY MUSE is. */
.lp-ask { background: var(--ink); color: #fff; text-align: center;
padding: clamp(56px, 9vw, 112px) clamp(20px, 5vw, 64px); }
.lp-ask-eyebrow { margin: 0 0 12px; font-family: 'Figtree', sans-serif; font-weight: 600; font-size: 12.5px;
letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.lp-ask-h2 { margin: 0 0 14px; font-family: 'Figtree', sans-serif; font-weight: 700;
font-size: clamp(32px, 4.6vw, 62px); line-height: 1.1; letter-spacing: -.022em; color: #fff; }
.lp-ask-sub { margin: 0 auto 30px; max-width: 48ch; font-size: clamp(16px, 1.5vw, 18.5px);
line-height: 1.55; color: rgba(255,255,255,.72); }
.lp-ask-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.lp-pill-line { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.5);
display: inline-flex; align-items: center; }
.lp-pill-line:hover { background: rgba(255,255,255,.12); color: #fff; }
.lp-ask-fine { margin: 20px 0 0; font-size: 13.5px; color: rgba(255,255,255,.52); }
/* ══ FAQ ══ on the page, not only behind a link. */
.lp-faq { background: var(--cream); padding: clamp(50px, 8vw, 100px) clamp(20px, 5vw, 64px); }
.lp-faq-list { max-width: 820px; margin: clamp(26px, 4vw, 40px) auto 0; }
.lp-faq-item { border-top: 1px solid var(--line, #e4d8c2); }
.lp-faq-item:last-of-type { border-bottom: 1px solid var(--line, #e4d8c2); }
.lp-faq-item summary { list-style: none; cursor: pointer; padding: 20px 36px 20px 0; position: relative;
font-family: 'Figtree', sans-serif; font-weight: 800; font-size: clamp(16.5px, 1.7vw, 19px);
color: var(--ink); }
.lp-faq-item summary::-webkit-details-marker { display: none; }
/* the +/− is drawn from the summary so there is no extra element to keep in sync */
.lp-faq-item summary::after { content: ''; position: absolute; right: 6px; top: 50%; width: 13px; height: 2px;
background: var(--tan-deep); transform: translateY(-50%); }
.lp-faq-item summary::before { content: ''; position: absolute; right: 11.5px; top: 50%; width: 2px; height: 13px;
background: var(--tan-deep); transform: translateY(-50%); transition: opacity .2s, transform .2s; }
.lp-faq-item[open] summary::before { opacity: 0; transform: translateY(-50%) rotate(90deg); }
.lp-faq-item p { margin: 0 0 22px; padding-right: 36px; font-size: 15.5px; line-height: 1.62; color: var(--ink-soft); }
.lp-faq-more { max-width: 820px; margin: 24px auto 0; }
.lp-faq-more a { font-family: 'Figtree', sans-serif; font-weight: 800; color: var(--ink);
border-bottom: 2px solid var(--tan); padding-bottom: 2px; }
/* ══ CROSS-SELL ══ the way Meta closes on "Explore Meta AI products". */
.lp-more { background: #fff; padding: clamp(50px, 8vw, 100px) clamp(20px, 5vw, 64px); }
.lp-more-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px;
max-width: 1240px; margin: clamp(26px, 4vw, 40px) auto 0; }
@media (max-width: 820px) { .lp-more-grid { grid-template-columns: minmax(0, 1fr); } }
.lp-more-card { display: block; background: var(--cream); border-radius: var(--radius); padding: 28px 26px;
transition: transform .22s ease, box-shadow .22s ease; }
.lp-more-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(80,60,30,.13); }
.lp-more-card h3 { font-size: 23px; font-weight: 800; margin: 0 0 9px; }
.lp-more-card p { font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 16px; }
.lp-more-go { font-family: 'Figtree', sans-serif; font-weight: 800; font-size: 15px; color: var(--ink); }
/* ── Kamochi in the hero ───────────────────────────────────────────────────
Centred underneath the pun. He was beside it, level with the type, pinned
to the period after the "i" — which read as him competing with the line
rather than standing under it, and on anything narrow the longest line ran
straight into him.
Still absolutely positioned, and still anchored to the LOCKUP rather than
the viewport: putting him in the flow would shove the type off-axis, and
anchoring him to the screen is what broke iPad portrait, where he sat at
the bottom and the text at the top and they drifted apart. */
.lp-cat {
/* Underneath the pun, centred, rather than beside it. Pinning him to the
period after the "i" put him level with the type, where he competed with
it for the same line and clipped the longest ones on narrow screens.
The offset is the words block's own height, derived rather than measured:
two lines at line-height 1.25 of the words' own clamp. It therefore
tracks the type at every viewport, with no media query and no number off
a screenshot. */
--words-h: calc(clamp(25px, 3.4vw, 48px) * 2.5);
position: absolute;
left: 50%; transform: translateX(-50%);
top: calc(var(--words-h) + 18px);
z-index: 2; pointer-events: none; line-height: 0;
/* both loops share one cell so they can cross-dissolve in place */
display: grid; justify-items: center;
}
.lp-cat[hidden] { display: none; }
.lp-cat > img { grid-area: 1 / 1; }
.lp-cat-v {
display: block; width: auto;
height: var(--cat-h);
transition: opacity .56s cubic-bezier(.33,0,.1,1), transform .56s cubic-bezier(.33,0,.1,1);
}
/* He arrives from slightly below and a touch small, so a swap reads as him
stepping in rather than a picture being replaced. */
.lp-cat-v.is-out { opacity: 0; transform: translateY(6px) scale(.96); }
@media (prefers-reduced-motion: reduce) { .lp-cat { display: none; } }
/* ══ THE NAV PAGES ══════════════════════════════════════════════════════════
The bar used to point at four anchors on one page. Every item is a real URL
now, which is the whole reason this exists: an anchor is not a page, and a
crawler cannot rank one. Meta's bar does the same — Products, AI Research,
Resources, About, and not a single in-page link among them.
On the landing page the bar starts transparent over the film and goes solid
once you are past it. On these pages there is no film, so it is solid from
the first pixel and the content starts below it. */
.lp-filmbar.is-static { position: sticky; background: var(--cream); color: var(--ink);
border-bottom: 1px solid var(--line, #E8DFCC); }
.subpage { background: var(--cream); }
.subpage main { padding-top: 0; }
.lp-subhero { max-width: 1240px; margin: 0 auto; padding: clamp(54px, 7vw, 104px) clamp(20px, 5vw, 64px) clamp(30px, 4vw, 54px); }
.lp-subhero h1 { font-family: 'Figtree', sans-serif; font-weight: 900; letter-spacing: -.025em;
font-size: clamp(36px, 5.6vw, 68px); line-height: 1.04; margin: 0 0 18px; color: var(--ink); }
.lp-subhero-lede { max-width: 640px; margin: 0; font-size: clamp(16px, 1.5vw, 19px);
line-height: 1.55; color: #6f6758; }
/* The home page keeps the idea, the page carries the proof. Neither is a copy
of the other, which is the only honest way to split one page into four. */
.lp-teaser { padding: clamp(56px, 7vw, 100px) clamp(20px, 5vw, 64px); background: var(--cream); }
.lp-teaser-in { max-width: 1240px; margin: 0 auto; }
.lp-teaser h2 { font-family: 'Figtree', sans-serif; font-weight: 900; letter-spacing: -.025em;
font-size: clamp(27px, 3.6vw, 46px); line-height: 1.1; margin: 0 0 16px; max-width: 16ch; color: var(--ink); }
.lp-teaser-body { max-width: 62ch; margin: 0 0 24px; font-size: clamp(15.5px, 1.4vw, 18px);
line-height: 1.6; color: #6f6758; }
.lp-teaser-go { display: inline-flex; align-items: center; font-weight: 700; font-size: 16px;
color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--flame, #FF5F1E);
padding-bottom: 2px; transition: gap .18s ease; }
.lp-teaser-go:hover { color: var(--flame, #FF5F1E); }
.lp-teaser-what { background: var(--paper, #FFFDF6); }
/* the simple pages' header grew a nav, so it needs to wrap on a phone */
.top-nav { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; font-weight: 500; }
.top-nav a { color: inherit; text-decoration: none; opacity: .78; }
.top-nav a:hover { opacity: 1; }
@media (max-width: 760px) { .top-nav { display: none; } }
/* ══ HAMBURGER + SIDE NAV ═══════════════════════════════════════════════════
Meta's pattern, lifted from the rendered Muse page: a three-bar button in
the bar that opens a panel in from the side. Their glyph, their placement —
immediately left of the wordmark.
It is visible at EVERY width, not just on a phone. The bar only has room
for four items; the panel is the whole map, so there is always one place
that shows everything. */
/* Burger is for mobile only: it shows at the same width the desktop nav
(.lp-filmnav) hides, 860px. On desktop the full nav is already visible, so
the burger would be a redundant second way to the same links. */
.lp-burger { display: none; align-items: center; justify-content: center;
width: 38px; height: 38px; margin-right: 4px; padding: 0; border: 0; border-radius: 10px;
background: transparent; color: #fff; cursor: pointer;
transition: background .16s ease, color .16s ease; }
.lp-burger:hover { background: rgba(255,255,255,.14); }
.lp-filmbar.is-solid .lp-burger, .top .lp-burger { color: var(--ink); }
.lp-filmbar.is-solid .lp-burger:hover, .top .lp-burger:hover { background: rgba(14,11,9,.07); }
.lp-burger svg { display: block; }
/* Show it only where the desktop nav is gone. Placed after the base rule above
so it wins the cascade (same specificity, last one applies). */
@media (max-width: 860px) { .lp-burger { display: inline-flex; } }
.lp-sidenav { position: fixed; inset: 0; z-index: 90; }
.lp-sidenav[inert] { pointer-events: none; }
.lp-sidenav-scrim { position: absolute; inset: 0; background: rgba(14,11,9,.46);
opacity: 0; transition: opacity .32s ease; }
.lp-sidenav.is-open .lp-sidenav-scrim { opacity: 1; }
.lp-sidenav-panel {
position: absolute; top: 0; bottom: 0; left: 0; width: min(380px, 86vw);
display: flex; flex-direction: column; gap: 6px;
padding: 20px clamp(20px, 4vw, 32px) 32px;
background: var(--cream, #FCF0E4); color: var(--ink);
box-shadow: 18px 0 60px -24px rgba(14,11,9,.5);
transform: translateX(-100%); transition: transform .34s cubic-bezier(.33,0,.1,1);
overflow-y: auto;
}
.lp-sidenav.is-open .lp-sidenav-panel { transform: none; }
.lp-sidenav-top { display: flex; align-items: center; justify-content: space-between;
margin-bottom: clamp(22px, 4vw, 38px); }
.lp-sidenav-top .lp-wm img { height: 28px; width: auto; display: block; }
.lp-sidenav-x { width: 42px; height: 42px; display: inline-flex; align-items: center;
justify-content: center; border: 0; border-radius: 50%; background: rgba(14,11,9,.06);
color: var(--ink); cursor: pointer; flex: none; transition: background .16s ease; }
.lp-sidenav-x:hover { background: rgba(14,11,9,.12); }
.lp-sidenav-x svg { width: 22px; height: 22px; }
.lp-sidenav-links { display: flex; flex-direction: column; }
.lp-sidenav-links a { font-family: 'Figtree', sans-serif; font-weight: 800;
font-size: clamp(22px, 3.2vw, 28px); letter-spacing: -.02em; line-height: 1.2;
color: var(--ink); text-decoration: none; padding: 11px 0;
border-bottom: 1px solid var(--line, #E8DFCC); transition: color .16s ease; }
.lp-sidenav-links a:hover { color: var(--flame, #FF5F1E); }
/* the page you are on, inside the mobile panel */
.lp-sidenav-links a[aria-current="page"] { color: var(--flame, #FF5F1E); }
.lp-sidenav-cta { margin-top: clamp(22px, 4vw, 32px); width: 100%; justify-content: center; }
.lp-sidenav-fine { margin: 12px 0 0; font-size: 13px; color: #8b8273; text-align: center; }
/* The panel slides; honour a request not to animate by just appearing. */
@media (prefers-reduced-motion: reduce) {
.lp-sidenav-panel, .lp-sidenav-scrim { transition: none; }
}
.lp-loader { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 22px; background: #15110c;
opacity: 1; transition: opacity .5s ease; }
.lp-loader.is-done { opacity: 0; pointer-events: none; }
.lp-loader-wm { width: 160px; height: auto; filter: brightness(0) invert(1); }
.lp-loader-bar { position: relative; width: 140px; height: 3px; border-radius: 3px;
background: rgba(255,255,255,.14); overflow: hidden; }
.lp-loader-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 40%; border-radius: 3px;
background: var(--tan, #c79a5b); animation: lp-load 1.1s ease-in-out infinite; }
@keyframes lp-load { 0% { left: -40%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .lp-loader-bar i { animation: none; width: 100%; } }