without auto side-margins becomes a narrow box pinned to the LEFT of a
centred column — its text centred inside that box, and the box in the wrong
place. It looks like a mis-centred line and reads as a mistake.
It shipped exactly that way: the eyebrow's own rule carried a tracking
override AND `margin-inline: auto`, and when the tracking override stopped
being needed I deleted the whole rule, taking the centring with it. The
eyebrow went to production 277px left of the headline.
Setting it once here means no future paragraph in the hero can lose it. */
.hero p { margin-inline: auto; }
/* The statement column. Narrower than the page so the line breaks fall where
the sentence does, not where the container happens to end. */
.hero h1 {
/* SMALLER THAN THE GLOBAL h1 ON PURPOSE. It was sized when it was the only
thing above the fold; it now shares the hero with a sub-line, a lede, the
form and its note, and at the global clamp (up to 6rem) three lines of caps
ate ~40% of the viewport and pushed the product screenshots off the bottom
of the screen. The argument was crowding out the proof. */
font-size: clamp(2.5rem, 6.2vw, 4.4rem);
max-width: 15ch;
margin-inline: auto;
margin-bottom: var(--s-m);
}
.hero .lede {
max-width: 52ch;
margin-inline: auto;
margin-bottom: clamp(28px, 4vw, 40px);
/* Even the rag. Centred copy has no left margin for the eye to return to,
so a long-then-short pair reads worse than it would flush left. */
text-wrap: balance;
}
/* NO TRACKING OVERRIDE HERE ANY MORE. It was halved to 0.07em while this line
read "For creators and streamers who already have an audience" — 54
characters of letterspaced caps, which is a label treatment applied to a
sentence. Cari cut it to "For creators and streamers", so it is a label
again and inherits the site's eyebrow setting like every other one.
The disqualifier is not lost: the H1 directly beneath says "You already have
the audience." in the largest type on the page, and the two together were
saying it twice. */
.hero .eyebrow { margin-bottom: var(--s-m); }
.hero .waitlist { justify-content: center; margin-inline: auto; }
.hero .cta-note {
margin-top: var(--s-m);
margin-inline: auto;
max-width: 46ch;
/* Stops a single word being stranded on its own line directly under the
button. It was orphaning "live." — a one-word line at the exact moment the
page asks for an email address. */
text-wrap: balance;
}
/* ---------------------------------------------- the product surfaces ---- */
/* Real crops of the shipping build, arranged as a cluster rather than a
device frame. A flex row (not absolute positioning) so the composition
survives every viewport width instead of only the one it was tuned at —
each card carries its own rotation and vertical offset. */
.surfaces {
display: flex;
justify-content: center;
align-items: flex-start;
gap: clamp(10px, 2.2vw, 30px);
margin-top: clamp(46px, 6.5vw, 84px);
/* The cluster bleeds past the text column and is cropped by .hero. */
width: max-content;
margin-inline: auto;
padding-bottom: clamp(40px, 6vw, 80px);
}
.surface {
margin: 0;
flex: 0 0 auto;
width: clamp(178px, 27vw, 330px);
border-radius: 20px;
overflow: hidden;
background: var(--card, #E3DACA);
border: 1px solid var(--hairline);
/* Two shadows: a wide soft drop that lifts the card off the paper, and a
tight one at the contact edge so it does not look like it is hovering. */
box-shadow:
0 28px 64px -28px rgba(10, 10, 12, 0.34),
0 3px 10px -4px rgba(10, 10, 12, 0.16);
}
.surface img { width: 100%; height: auto; display: block; }
/* ENTRANCE. The cards rise into place one after another when the hero comes
into view, which on this page is immediately on load.
WRITTEN OUT LONGHAND, both states, on purpose. The obvious way is a shared
`.reveal` class, but `.reveal.is-in { transform: none }` outranks
`.surface--request` and would silently flatten the rotations that make this
a cluster rather than a row. The tidier way is a --enter custom property
composed into one transform, and that works — but it depends on a var()
change triggering a transform transition, which is exactly the kind of
cleverness this codebase keeps getting punished for. Two explicit states
cannot surprise anyone.
The container carries `reveal` only so the observer sees it; it is pinned
visible here so the group does not fade as a block on top of the stagger. */
.surfaces.reveal { opacity: 1; transform: none; }
.surface {
opacity: 0;
transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.surface--request { transform: rotate(-4deg) translateY(34px); transition-delay: 0ms; }
.surface--earn { transform: rotate(2.5deg) translateY(14px); transition-delay: 90ms; }
.surface--calls { transform: rotate(-1.5deg) translateY(84px); transition-delay: 180ms; }
.surfaces.is-in .surface { opacity: 1; }
.surfaces.is-in .surface--request { transform: rotate(-4deg) translateY(4px); }
.surfaces.is-in .surface--earn { transform: rotate(2.5deg) translateY(-16px); }
.surfaces.is-in .surface--calls { transform: rotate(-1.5deg) translateY(54px); }
/* Under a phone width the cluster stops being a composition and starts being
three tiny illegible cards. Keep the one that explains the product. */
@media (max-width: 720px) {
.surfaces { width: auto; gap: 0; }
.surface--earn, .surface--calls { display: none; }
.surface--request,
.surfaces.is-in .surface--request {
width: min(300px, 78vw);
transform: translateY(22px);
}
.surfaces.is-in .surface--request { transform: none; }
}
.cta-note { font-size: 0.85rem; color: var(--text-3); margin-top: var(--s-l); }
/* Captions under the product crops.
Hopkins held that the line under a picture is read more often than the body
copy, and our own App Store notes say the same thing — "most people read the
caption and swipe". These figures had no captions at all, so the only text
describing them lived in `alt`, which a sighted reader never sees.
WHAT THESE DELIBERATELY DO NOT SAY: the dollar totals. An alt attribute
describes a picture; a figcaption is body copy in our own voice, and
"a creator earned $40.50 this week" is an outcome claim with no
substantiation while payments are in test mode. Durations, states and
mechanics are claims about how the product BEHAVES, and those are true
today. */
.surface__cap {
margin: 0;
padding: 12px 14px 14px;
font-size: 0.72rem;
line-height: 1.45;
color: var(--text-2);
text-align: left;
border-top: 1px solid var(--hairline);
background: color-mix(in srgb, var(--bg) 72%, transparent);
}
.surfaces__note {
margin: clamp(20px, 3vw, 30px) auto 0;
font-size: 0.72rem;
color: var(--text-3);
text-align: center;
max-width: 46ch;
}
/* The hero's second line is the TAGLINE ITSELF, with one word of hinge.
It briefly read "Put a price on the next ten minutes of your time" — the
audit wanted a figure here, but ten is not a default anywhere in the
product, so it was an invented number that also anchored low. Specificity
is worth having where it is TRUE (the held card in the lede, the captions,
the itemised step) and worth nothing where it is manufactured.
"Now" carries the turn: the headline states what the reader already has,
this states the thing they have not done with it. And it means the nav,
the footer, the page title, the App Store subtitle and the hero all say the
same five words instead of five variants. */
.hero__sub {
/* THE SYSTEM FACE, NOT THE DISPLAY ONE. Set in Archivo it was a second
headline arguing with the first — three typographic voices stacked (huge
display, small display, system) and the reader had to work out which two
belonged together. In the body face it reads as the back half of one
sentence: the H1 names what you have, this names what you have not done
with it. Larger and darker than the lede so the ladder still descends. */
font-family: var(--font);
font-weight: 600;
font-size: clamp(1.1rem, 2.2vw, 1.45rem);
letter-spacing: -0.015em;
line-height: 1.3;
color: var(--text);
max-width: 26ch;
margin: 0 auto var(--s-m);
text-wrap: balance;
}
@media (max-width: 720px) {
.surface__cap { font-size: 0.78rem; }
}
/* --------------------------------------------------------------- reel --- */
.reel { padding-block: clamp(64px, 9vw, 116px); }
.reel__grid {
display: grid;
grid-template-columns: 1fr minmax(0, 300px);
gap: clamp(36px, 6vw, 88px);
align-items: center;
}
.reel__copy h2 { margin-bottom: var(--s-xl); }
.reel__steps {
list-style: none;
margin: 0; padding: 0;
display: grid; gap: var(--s-l);
counter-reset: step;
max-width: 46ch;
}
.reel__steps li {
counter-increment: step;
position: relative;
padding-left: 40px;
font-size: 0.96rem;
color: var(--text-2);
}
.reel__steps li::before {
content: counter(step);
position: absolute; left: 0; top: -1px;
width: 26px; height: 26px;
display: grid; place-items: center;
border-radius: 50%;
border: 1px solid var(--stroke-soft);
font-size: 0.78rem; font-weight: 700;
color: var(--text);
font-variant-numeric: tabular-nums;
}
.reel__steps strong { color: var(--text); font-weight: 600; }
/* A frame, not a phone. A skeuomorphic handset would be a second illustration
competing with the real screens inside it; this is the same shadow and
radius language the hero cards already use, so the two read as one family. */
.reel__device {
margin: 0;
border-radius: 26px;
overflow: hidden;
background: var(--surface, #000);
border: 1px solid var(--hairline);
box-shadow:
0 34px 74px -30px rgba(10, 10, 12, 0.38),
0 3px 12px -5px rgba(10, 10, 12, 0.18);
}
.reel__video { display: block; width: 100%; height: auto; }
@media (max-width: 880px) {
.reel__grid { grid-template-columns: 1fr; justify-items: center; }
.reel__copy { justify-self: stretch; }
.reel__device { width: min(300px, 74vw); }
}
/* prefers-reduced-motion is handled in JS as well as here: `autoplay` is an
attribute, and CSS cannot stop a video that has already started. This rule
is the belt to that braces — the poster stays put and nothing loops. */
@media (prefers-reduced-motion: reduce) {
.reel__video { animation: none; }
}
/* ------------------------------------------------------ privacy strip --- */
.privacy-strip {
padding-block: clamp(36px, 5vw, 56px);
border-top: 1px solid var(--hairline);
}
.privacy-strip .privacy {
/* .privacy still carries the rule it needed when it sat inside the hero
column; in its own strip that doubles the section's hairline. */
margin: 0 auto;
padding-top: 0;
border-top: 0;
}
/* --------------------------------------------------------- how it works - */
.steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--s-xl);
counter-reset: step;
}
.step {
padding: var(--s-xl);
border-radius: var(--r-card);
border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 14%, transparent), rgba(255, 255, 255, 0.025));
box-shadow: 0 18px 44px rgba(6, 4, 22, 0.45);
}
.step__n {
counter-increment: step;
width: 34px; height: 34px; border-radius: 50%;
display: grid; place-items: center;
background: var(--cta); color: #fff;
font-size: 0.85rem; font-weight: 700;
margin-bottom: var(--s-l);
}
.step__n::before { content: counter(step); }
.step h3 { margin-bottom: 8px; }
.step p { font-size: 0.94rem; margin: 0; }
/* ------------------------------------------------------------- cards ---- */
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--s-l);
}
.card {
padding: var(--s-xl);
border-radius: var(--r-card);
border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 16%, transparent), rgba(255, 255, 255, 0.03));
box-shadow: 0 18px 44px rgba(6, 4, 22, 0.45);
}
.card h3 { margin-bottom: 10px; }
.card p { font-size: 0.94rem; margin: 0; }
.card__icon { font-size: 1.5rem; margin-bottom: var(--s-m); }
.card--feature { position: relative; overflow: hidden; }
.card--feature::after {
/* Card glow, same reasoning as .hero::after. */
background: none;
}
/* ------------------------------------------------------------ split ----- */
.split {
display: grid; grid-template-columns: 1fr 1fr;
gap: clamp(28px, 5vw, 72px); align-items: center;
}
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.list-check { list-style: none; padding: 0; margin: 0; }
.list-check li {
position: relative; padding-left: 30px; margin-bottom: var(--s-m);
color: var(--text-2); font-size: 0.97rem;
}
.list-check li::before {
content: ""; position: absolute; left: 0; top: 8px;
width: 8px; height: 8px; border-radius: 50%;
background: var(--accent);
}
/* ----------------------------------------------------------- pricing ---- */
.pricebox {
border-radius: var(--r-card);
border: 1px solid var(--hairline);
background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 28%, transparent), rgba(255,255,255,0.03));
border-radius: var(--r-halo);
box-shadow: 0 30px 80px rgba(6, 4, 22, 0.55);
padding: clamp(28px, 5vw, 52px);
text-align: center;
}
.pricebox__n {
font-size: clamp(3.6rem, 11vw, 6.4rem);
font-weight: 800; letter-spacing: -0.05em; line-height: 1;
}
.pricebox__l { color: var(--text-2); margin-top: 8px; }
.pricebox__note { font-size: 0.85rem; color: var(--text-3); margin-top: var(--s-l); }
/* --------------------------------------------------------------- faq ---- */
.faq-list { border-top: 1px solid var(--hairline); max-width: 820px; }
.faq-item { border-bottom: 1px solid var(--hairline); }
.faq-item summary {
cursor: pointer; list-style: none;
padding: 22px 40px 22px 0;
font-weight: 600; font-size: 1.02rem;
position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: "+"; position: absolute; right: 6px; top: 20px;
font-size: 1.4rem; font-weight: 400; color: var(--text-3);
transition: transform 0.25s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding-bottom: 22px; font-size: 0.96rem; }
/* ------------------------------------------------------------- final ---- */
.finale {
/* Finale glow. The section keeps its spacing and loses the wash. */
background: none;
}
.finale h2 { margin-bottom: var(--s-m); }
.finale p { margin-inline: auto; }
.finale .cta-row { justify-content: center; }
/* ------------------------------------------------------------ footer ---- */
.footer {
border-top: 1px solid var(--hairline);
padding-block: var(--s-2xl);
font-size: 0.88rem;
}
.footer__grid {
display: grid; grid-template-columns: 1.4fr repeat(3, 1fr);
gap: var(--s-xl);
}
@media (max-width: 780px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
.footer h4 { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); margin-bottom: var(--s-m); font-weight: 600; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 9px; }
.footer a { color: var(--text-2); text-decoration: none; }
.footer a:hover { color: var(--text); }
.footer__legal { margin-top: var(--s-2xl); color: var(--text-3); font-size: 0.8rem; }
/* -------------------------------------------------------------- blog ---- */
.post-list { display: grid; gap: var(--s-l); max-width: 860px; }
.post-card {
display: block; text-decoration: none;
padding: var(--s-xl);
border-radius: var(--r-card);
border: 1px solid var(--hairline);
background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 13%, transparent), rgba(255,255,255,0.025));
transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.post-card:hover { border-color: var(--stroke-soft); transform: translateY(-2px); background: rgba(255,255,255,0.045); }
.post-card h3 { margin-bottom: 8px; }
.post-card p { margin: 0; font-size: 0.94rem; }
.post-meta { font-size: 0.78rem; color: var(--text-3); margin-bottom: 10px; letter-spacing: 0.02em; }
.prose { max-width: 720px; }
.prose h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-top: var(--s-2xl); }
.prose h3 { margin-top: var(--s-xl); }
.prose ul, .prose ol { color: var(--text-2); padding-left: 22px; margin-bottom: var(--s-l); }
.prose li { margin-bottom: 8px; }
.prose blockquote {
margin: var(--s-xl) 0; padding: var(--s-l) var(--s-xl);
border-left: 3px solid var(--accent);
background: rgba(255,255,255,0.03);
border-radius: 0 var(--r-thumb) var(--r-thumb) 0;
color: var(--text);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose table { width: 100%; border-collapse: collapse; margin-bottom: var(--s-l); font-size: 0.94rem; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--hairline); color: var(--text-2); }
.prose th { color: var(--text); font-weight: 600; }
.table-scroll { overflow-x: auto; }
.page-head { padding-top: clamp(48px, 7vw, 80px); padding-bottom: clamp(24px, 4vw, 40px); }
.breadcrumb { font-size: 0.82rem; color: var(--text-3); margin-bottom: var(--s-m); }
.breadcrumb a { color: var(--text-3); text-decoration: none; }
.breadcrumb a:hover { color: var(--text); }
/* ------------------------------------------------------------ reveal ---- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-in { opacity: 1; transform: none; }
/* ----------------------------------------------------- reduced motion --- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
.reveal { opacity: 1; transform: none; }
/* The hero cards animate in, so their resting state is invisible. Under
reduced motion they must simply be there, not depend on a transition. */
.surface { opacity: 1; }
.phone__camera { animation: none; }
}
/* ------------------------------------------------- article headline ----- */
/* Post titles keep the poster voice but step down a size, so an article
opens like a magazine spread without shouting over its own body copy.
Section and card headings inside the article stay in the system face. */
.post-title {
font-size: clamp(2rem, 5vw, 3.4rem);
max-width: 20ch;
line-height: 0.94;
}
/* Standing pages (FAQ, Support, Privacy, Terms) take the poster voice. */
.page-head h1.display { margin-bottom: var(--s-l); }
/* ========================================================== backdrop ===== */
/* The video wall. Five WebGL scenes cross-fading behind everything. It sits
below the starfield and below all content; a scrim over it keeps type
legible no matter which scene is playing. */
.backdrop {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.backdrop__canvas {
width: 100%;
height: 100%;
display: block;
}
/* Legibility scrim — darker top and bottom where the nav and copy live,
more transparent through the middle so the scene still reads. */
.backdrop::after {
content: "";
position: absolute; inset: 0;
background:
linear-gradient(180deg,
rgba(8, 8, 14, 0.86) 0%,
rgba(8, 8, 14, 0.60) 26%,
rgba(8, 8, 14, 0.58) 68%,
rgba(8, 8, 14, 0.88) 100%);
}
/* No WebGL: the static night gradient underneath is already the fallback. */
.backdrop.is-fallback { display: none; }
/* When the backdrop is live, the body gradient steps back so the two
don't fight each other. */
body.has-backdrop {
background: var(--night-top);
}
body.has-backdrop .stars { opacity: 0.35; }
@media (prefers-reduced-motion: reduce) {
.backdrop__canvas { animation: none; }
}
/* ------------------------------------------------------- tuning panel --- */
/* Dev-only. Opened with ?bg — removed before launch. */
.bg-panel {
position: fixed; right: 18px; bottom: 18px; z-index: 90;
width: 244px; padding: 14px 16px 12px;
border-radius: 18px;
background: rgba(12, 10, 24, 0.94);
border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
font-size: 0.76rem;
color: var(--text);
}
.bg-panel__head {
display: flex; align-items: center; justify-content: space-between;
font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
font-size: 0.68rem; color: var(--text-3); margin-bottom: 10px;
}
.bg-panel__x {
background: none; border: 0; color: var(--text-3);
font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0 2px;
}
.bg-panel__x:hover { color: #fff; }
.bg-panel__scenes { display: grid; gap: 4px; margin-bottom: 12px; }
.bg-panel__scenes button,
.bg-panel__row button {
font-family: inherit; font-size: 0.76rem;
padding: 7px 10px; border-radius: 9px; cursor: pointer;
background: rgba(255, 255, 255, 0.06);
border: 1px solid transparent;
color: var(--text-2); text-align: left;
}
.bg-panel__scenes button:hover,
.bg-panel__row button:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.bg-panel__scenes button.is-on,
.bg-panel__row button.is-on {
background: var(--cta); color: #fff; border-color: transparent;
}
.bg-panel label {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; margin-bottom: 7px; color: var(--text-3);
}
.bg-panel input[type=range] { width: 120px; accent-color: var(--accent); }
.bg-panel__row {
display: flex; gap: 4px; margin-top: 10px;
}
.bg-panel__row button { flex: 1; text-align: center; }
.bg-panel__note {
margin: 10px 0 0; font-size: 0.7rem; color: var(--text-3);
}
/* ============================================================== theme ==== */
/* Brand colour lives in these tokens and in the shader's ink ramp, both owned
by theme.js. Open the picker with ?theme on any page. Defaults below are
only a fallback — theme.js overwrites them on :root at boot.
--cta-ink is the text colour on a filled button, so a pale button stays
readable when the theme is light. */
/* PAPER on an ink button. Inverted with the ground: white lettering on the
new #0A0A0C CTA would still have read, but --cta-ink is the pair to --cta
and leaving it white would have made the two drift the first time somebody
picked a pale theme. */
:root { --cta-ink: #EAE2D4; }
.pill--cta { color: var(--cta-ink); }
.theme-panel {
position: fixed; left: 18px; bottom: 18px; z-index: 95;
width: 236px; padding: 14px 16px 12px;
border-radius: 18px;
background: rgba(12, 12, 16, 0.95);
border: 1px solid rgba(255, 255, 255, 0.16);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
font-size: 0.76rem;
color: var(--text);
}
.theme-panel__head {
display: flex; align-items: center; justify-content: space-between;
font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
font-size: 0.68rem; color: var(--text-3); margin-bottom: 10px;
}
.theme-panel__x {
background: none; border: 0; color: var(--text-3);
font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.theme-panel__x:hover { color: #fff; }
.theme-panel__presets { display: flex; flex-wrap: wrap; gap: 4px; }
.theme-panel__presets button,
.theme-panel__copy {
font-family: inherit; font-size: 0.74rem;
padding: 6px 10px; border-radius: 8px; cursor: pointer;
background: rgba(255, 255, 255, 0.07);
border: 1px solid transparent; color: var(--text-2);
}
.theme-panel__presets button:hover,
.theme-panel__copy:hover { background: rgba(255,255,255,0.14); color: #fff; }
.theme-panel__presets button.is-on {
background: var(--cta); color: var(--cta-ink);
}
.theme-panel__note {
margin: 9px 0 4px; font-size: 0.7rem; color: var(--text-3); line-height: 1.4;
}
.theme-panel__label {
margin: 12px 0 6px; font-size: 0.64rem; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--text-3);
}
.theme-panel__stops { display: flex; gap: 5px; }
.theme-stop { flex: 1; text-align: center; }
.theme-stop span {
display: block; font-size: 0.56rem; color: var(--text-3); margin-top: 3px;
}
.theme-row {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 5px; color: var(--text-3);
}
.theme-panel input[type=color] {
width: 100%; height: 26px; padding: 0;
border: 1px solid rgba(255,255,255,0.16); border-radius: 6px;
background: none; cursor: pointer;
}
.theme-row input[type=color] { width: 56px; }
.theme-panel__copy { width: 100%; margin-top: 12px; text-align: center; }
.theme-panel__msg {
margin: 9px 0 0; font-size: 0.66rem; color: var(--text-3); line-height: 1.4;
}
/* ------------------------------------------------------ privacy line --- */
/* The one claim on this page that is about safety rather than money, so it
gets its own rule and its own mark instead of competing as a fourth stat. */
.privacy {
display: flex;
align-items: center;
gap: var(--s-m);
margin: var(--s-xl) 0 0;
padding-top: var(--s-l);
border-top: 1px solid var(--hairline);
max-width: 46ch;
font-size: 0.92rem;
color: var(--text-2);
}
.privacy strong { color: var(--text); font-weight: 600; }
.privacy__at {
flex: 0 0 34px;
height: 34px;
display: grid;
place-items: center;
border-radius: 50%;
border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
color: var(--text);
font-weight: 700;
font-size: 1rem;
}
/* ---------------------------------------------------------- waitlist --- */
.waitlist {
display: flex;
gap: var(--s-m);
flex-wrap: wrap;
max-width: 34rem;
}
/*
* NOT REDUNDANT. `hidden`'s display:none comes from the UA stylesheet, and
* ANY author rule beats the UA sheet — so the flex above overrode it and
* `form.hidden = true` in waitlist.js has never visually hidden this form:
* a confirmed signup kept its empty email box on screen. Found by
* screenshotting the success state, not by reading the code.
*/
.waitlist[hidden] { display: none; }
.waitlist__input {
flex: 1 1 15rem;
min-height: 52px;
padding: 12px 18px;
border-radius: var(--r-pill);
border: 1px solid var(--hairline);
background: rgba(255, 255, 255, 0.06);
color: var(--text);
font: inherit;
font-size: 1rem;
outline: none;
}
.waitlist__input::placeholder { color: var(--text-3); }
.waitlist__input:focus { border-color: var(--stroke-soft); }
.waitlist__go { flex: 0 0 auto; }
.waitlist__go[disabled] { opacity: 0.7; cursor: default; }
.cta-note.is-good { color: var(--text); }
.cta-note.is-bad { color: color-mix(in srgb, var(--live-red) 70%, white); }
/* ------------------------------------------- waitlist success ceremony ---
The app's signature moment is the rim that ignites when a call runs short:
a conic border that sweeps and pulses (web/styles/app.css `.rim`). This is
that moment translated to paper. The gradient is INK, not red — red means
live state and stays inside the phone — so the sweep reads as motion in the
border's weight rather than a colour change. */
@property --wl-angle {
syntax: "