/* ─────────────────────────────────────────────────────────────────────────────
Notey — the landing page.
The palette is the app's own, copied token for token from src/styles.css so
the site and the product are recognisably one thing. Copied rather than
imported: the app's stylesheet is Tailwind output carrying a hundred
utilities a marketing page has no use for. Every text/surface pair used here
was computed with the same WCAG maths as src/theme.test.ts; the tightest is
--ink-faint on --panel at 4.66:1.
Motion is here to show the product working, not to decorate it. Everything
that moves has a reason in a comment, and every one of them is switched off
or reduced to a fade under prefers-reduced-motion at the bottom of the file.
───────────────────────────────────────────────────────────────────────────── */
:root {
color-scheme: light;
/* Surfaces, lightest last — the order the hover states depend on. */
--panel: hsl(205 32% 94%);
--canvas: hsl(205 38% 97%);
--card: hsl(0 0% 100%);
/* A hairline, and the dashed form of it. Solid --line-strong is too loud. */
--line: hsl(205 20% 79%);
--line-strong: hsl(205 20% 62%);
/* 15.5:1, 7.6:1 and 5.3:1 on white. */
--ink: hsl(205 30% 14%);
--ink-muted: hsl(205 14% 33%);
--ink-faint: hsl(205 10% 42%);
--accent: hsl(205 90% 36%);
--accent-ink: hsl(0 0% 100%);
--accent-wash: hsl(205 90% 36% / 0.08);
/* Red is reserved for the recording indicator, exactly as in the app. */
--danger: hsl(0 72% 51%);
--danger-wash: hsl(0 72% 51% / 0.1);
/* The two tracks. "Them" takes the brand blue; "You" takes a green that is
4.78:1 on the panel. Blue/green is the pair that survives the common
colour-vision deficiencies — and nothing on the page relies on hue alone:
a track is also a position, a label, and a moving bar. */
--you: hsl(152 45% 32%);
--you-wash: hsl(152 45% 32% / 0.1);
--them: var(--accent);
--them-wash: var(--accent-wash);
/* The floating island is dark in the app for a reason it documents: it
floats over other applications, so the user's theme says nothing about
what is behind it. The call mock uses the same dark ground. */
--dark: hsl(205 30% 9%);
--dark-raised: hsl(205 22% 15%);
--dark-line: hsl(205 18% 26%);
--dark-ink: hsl(205 20% 92%);
--dark-muted: hsl(205 12% 70%);
--accent-on-dark: hsl(205 86% 50%);
/* Spacing ladder, from the app: 16 / 32 / 56. */
--gutter: 1rem;
--section: 2rem;
--region: 3.5rem;
/* A radius per role, smallest for the thing you click. */
--r-control: 0.5rem;
--r-card: 0.875rem;
--r-surface: 1.125rem;
/* Elevation steps, from the app. */
--shadow-raised: 0 1px 2px -1px hsl(205 30% 14% / 0.16), 0 1px 1px -0.5px hsl(205 30% 14% / 0.08);
--shadow-lifted: 0 1px 2px -1px hsl(205 30% 14% / 0.1), 0 8px 20px -12px hsl(205 30% 14% / 0.3);
--shadow-overlay: 0 2px 6px -2px hsl(205 30% 14% / 0.16), 0 16px 32px -14px hsl(205 30% 14% / 0.34);
--shadow-modal: 0 4px 12px -4px hsl(205 30% 14% / 0.2), 0 32px 64px -24px hsl(205 30% 14% / 0.45);
--shadow-filled: inset 0 0 0 1px hsl(205 40% 10% / 0.22), inset 0 1px 0 0 hsl(0 0% 100% / 0.22),
0 1px 2px -1px hsl(205 30% 14% / 0.3);
--font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
--mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
/* Curves that settle rather than bounce. */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--ease-in: cubic-bezier(0.5, 0, 0.75, 0);
--dur-fast: 150ms;
--dur: 320ms;
--dur-slow: 700ms;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--canvas);
color: var(--ink);
font: 16px/1.6 var(--font);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: clip;
}
/* One focus ring, everywhere. The app has exactly one too. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: 72rem; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }
.narrow { max-width: 48rem; }
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
position: absolute; left: 1rem; top: -4rem; z-index: 100;
background: var(--ink); color: var(--card); padding: .6rem 1rem;
border-radius: var(--r-control); font-weight: 600; text-decoration: none;
}
.skip:focus { top: 1rem; }
p { color: var(--ink-muted); margin: 0 0 1rem; }
h1, h2, h3, h4 { color: var(--ink); }
/* ── Navigation ───────────────────────────────────────────────────────────── */
.top {
position: sticky; top: 0; z-index: 30;
background: hsl(205 38% 97% / 0.84);
-webkit-backdrop-filter: saturate(160%) blur(14px);
backdrop-filter: saturate(160%) blur(14px);
box-shadow: 0 1px 0 0 var(--line);
}
.top .wrap { display: flex; align-items: center; gap: 1.5rem; height: 3.75rem; }
.brand {
display: inline-flex; align-items: center; gap: .6rem; font-weight: 700; letter-spacing: -.01em;
text-decoration: none; color: var(--ink); margin-right: auto; font-size: 1.05rem;
}
.mark { display: inline-flex; align-items: flex-end; gap: 3px; height: 20px; }
.mark i { display: block; width: 5px; border-radius: 3px; background: var(--accent); }
.mark i:nth-child(1) { height: 11px; }
.mark i:nth-child(2) { height: 20px; background: hsl(205 86% 45%); }
.mark i:nth-child(3) { height: 15px; }
.top-links { display: flex; gap: 1.6rem; }
.top-links a {
position: relative; color: var(--ink-muted); text-decoration: none; font-size: .92rem;
font-weight: 500; padding: .3rem 0; transition: color var(--dur-fast);
}
.top-links a::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 1px;
background: var(--accent); transform: scaleX(0); transform-origin: left;
transition: transform var(--dur) var(--ease-out);
}
.top-links a:hover { color: var(--ink); }
.top-links a:hover::after { transform: scaleX(1); }
@media (max-width: 48rem) { .top-links { display: none; } }
/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
font: inherit; font-weight: 600; text-decoration: none; border-radius: var(--r-control);
padding: .8rem 1.35rem; border: 1px solid transparent; white-space: nowrap; cursor: pointer;
transition: filter var(--dur-fast), background-color var(--dur-fast), transform var(--dur-fast) var(--ease-out),
box-shadow var(--dur-fast);
}
/* Filled buttons darken on hover, never lighten: lightening a fill under
white text is the contrast bug the app fixed, and it is one character away. */
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-filled); }
.btn-primary:hover { filter: brightness(.95); }
.btn-primary:active { filter: brightness(.9); transform: translateY(1px); }
.btn-ghost { color: var(--ink); border-color: var(--line); background: var(--card); box-shadow: var(--shadow-raised); }
.btn-ghost:hover { background: var(--panel); }
.btn-ghost:active { transform: translateY(1px); }
.btn-sm { padding: .5rem 1rem; font-size: .9rem; }
.btn svg { width: 1.05em; height: 1.05em; flex: none; }
/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero { position: relative; padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(3rem, 6vw, 5rem); overflow: hidden; }
/* A faint ruler, like the ticks along a timeline — the page is about time
captured in two lanes. Kept at 7% so it is texture, not a grid. */
.hero::before {
content: ""; position: absolute; inset: 0 0 auto 0; height: 26rem; pointer-events: none;
background: repeating-linear-gradient(90deg, hsl(205 30% 14% / .07) 0 1px, transparent 1px 14px);
-webkit-mask-image: linear-gradient(to bottom, hsl(0 0% 0% / .8), transparent 75%);
mask-image: linear-gradient(to bottom, hsl(0 0% 0% / .8), transparent 75%);
}
.hero::after {
content: ""; position: absolute; left: 50%; top: 34rem; width: 90rem; height: 46rem; pointer-events: none;
transform: translateX(-50%);
background: radial-gradient(closest-side, hsl(205 90% 36% / .09), transparent 72%);
}
.hero .wrap { position: relative; z-index: 1; }
.hero-copy { max-width: 46rem; }
.pill {
display: inline-flex; align-items: center; gap: .5rem; font-size: .82rem; font-weight: 600;
color: var(--accent); background: var(--accent-wash); border: 1px solid hsl(205 90% 36% / .2);
padding: .32rem .85rem .32rem .7rem; border-radius: 999px; margin: 0 0 1.5rem;
}
.pill-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); }
h1 {
font-size: clamp(2.7rem, 7vw, 4.7rem); line-height: .98; letter-spacing: -.04em; font-weight: 700;
margin: 0 0 1.3rem; text-wrap: balance;
}
h1 .quiet { display: block; color: var(--ink-faint); font-weight: 600; text-wrap: balance; }
.lede {
font-size: clamp(1.08rem, 2vw, 1.3rem); color: var(--ink-muted); margin: 0 0 2rem; max-width: 38rem;
line-height: 1.5; text-wrap: pretty;
}
.cta { display: flex; gap: .75rem; flex-wrap: wrap; }
.fine { color: var(--ink-faint); font-size: .86rem; margin-top: 1rem; }
/* Staggered arrival, once, on load. The hero is the only thing on the page
that animates on its own without being scrolled to. */
.js .hero-copy > * { opacity: 0; transform: translateY(12px); animation: rise var(--dur-slow) var(--ease-out) forwards; }
.js .hero-copy > :nth-child(1) { animation-delay: 40ms; }
.js .hero-copy > :nth-child(2) { animation-delay: 120ms; }
.js .hero-copy > :nth-child(3) { animation-delay: 220ms; }
.js .hero-copy > :nth-child(4) { animation-delay: 320ms; }
.js .hero-copy > :nth-child(5) { animation-delay: 400ms; }
.js .app { opacity: 0; transform: translateY(18px); animation: rise 900ms var(--ease-out) 380ms forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }
/* ── The app, working ─────────────────────────────────────────────────────── */
.app { margin: clamp(2.5rem, 6vw, 4rem) 0 0; }
.app-window {
background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r-surface);
box-shadow: var(--shadow-modal); overflow: hidden; font-size: .8rem; line-height: 1.35;
}
.app-top {
position: relative; z-index: 2; height: 3.25rem; background: var(--panel);
box-shadow: 0 1px 0 0 var(--line), 0 6px 14px -10px hsl(205 30% 14% / .5);
display: flex; align-items: center; gap: .7rem; padding: 0 .9rem;
}
/* Grey lights: the window is not the frontmost one, because the user is in
the call. Also the one place on this page a red circle would lie. */
.lights { display: flex; gap: .42rem; margin-right: .45rem; flex: none; }
.lights i { width: .68rem; height: .68rem; border-radius: 50%; background: var(--line-strong); opacity: .7; }
.seg {
display: flex; gap: 2px; padding: 2px; border: 1px solid var(--line); background: var(--canvas);
border-radius: var(--r-card); flex: none;
}
.seg b { font-weight: 600; font-size: .72rem; padding: .28rem .55rem; border-radius: var(--r-control); color: var(--ink-muted); }
.seg b.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow-raised); }
.search {
flex: 1 1 auto; min-width: 0; max-width: 24rem; height: 2rem; border: 1px solid var(--line); background: var(--card);
box-shadow: var(--shadow-raised); border-radius: 999px; display: flex; align-items: center; gap: .45rem;
padding: 0 .55rem 0 .7rem; color: var(--ink-faint); font-size: .72rem;
}
.search svg { width: .85rem; height: .85rem; flex: none; }
.search span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search kbd { border: 1px solid var(--line); background: var(--panel); border-radius: 5px; padding: 0 .3rem; font: inherit; font-size: .64rem; }
.rule { width: 1px; height: 1.6rem; background: var(--line); flex: none; }
/* The legal recording indicator, drawn as the app draws it: a tinted pill
with a full-strength red ring, the dot in undiluted red, the clock in ink.
The one direction this control is not allowed to move is quieter. */
.rec-pill {
margin-left: auto; height: 2.1rem; display: inline-flex; align-items: center; gap: .5rem; flex: none;
padding: 0 .85rem 0 .7rem; border-radius: 999px; background: var(--danger-wash);
box-shadow: inset 0 0 0 1px var(--danger), var(--shadow-raised);
}
.rec-dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--danger); animation: pulse 2s var(--ease-in-out) infinite; flex: none; }
@keyframes pulse { 50% { opacity: .5; } }
.rec-time { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); font-size: .8rem; letter-spacing: .01em; }
.stop {
height: 2.1rem; display: inline-flex; align-items: center; gap: .45rem; padding: 0 .85rem; flex: none;
border-radius: var(--r-control); background: var(--danger); color: var(--accent-ink); font-weight: 600;
box-shadow: var(--shadow-filled); font-size: .78rem;
}
.stop i { width: .6rem; height: .6rem; background: currentColor; border-radius: 2px; }
.account { display: inline-flex; align-items: center; gap: .45rem; color: var(--ink-muted); font-weight: 500; font-size: .74rem; flex: none; }
.account i {
width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1px solid var(--line); background: var(--card);
box-shadow: var(--shadow-raised); display: grid; place-items: center;
}
.account svg { width: .8rem; height: .8rem; }
.app-body { display: grid; grid-template-columns: 13.5rem 1fr; min-height: 24rem; }
.app-side {
position: relative; z-index: 1; background: var(--panel); padding: .9rem .6rem;
box-shadow: 1px 0 0 0 var(--line), 6px 0 14px -10px hsl(205 30% 14% / .4);
}
.side-head, .side-day {
font-size: .62rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint);
padding: 0 .5rem .5rem;
}
.side-day { padding-top: .9rem; }
.side-row {
display: flex; flex-direction: column; gap: .15rem; padding: .5rem .6rem; margin-bottom: .3rem;
border-radius: var(--r-card); border: 1px solid transparent; color: var(--ink); font-weight: 600; font-size: .76rem;
}
.side-row small { font-weight: 500; color: var(--ink-faint); font-size: .66rem; }
.side-row.on { background: var(--card); border-color: var(--line); box-shadow: var(--shadow-raised); }
.app-main { padding: 1rem 1.25rem 0; display: flex; flex-direction: column; min-width: 0; }
.meet-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.meet-head h4 { font-size: 1rem; margin: 0; letter-spacing: -.01em; }
.meet-head span { color: var(--ink-faint); font-size: .72rem; white-space: nowrap; }
/* Two lanes. This is the product: one track for the microphone, one for what
the Mac plays, drawn separately because they are recorded separately. The
app's own floating island draws the same two histories, labelled the same. */
.lanes {
display: grid; gap: .35rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
padding: .5rem .75rem; box-shadow: var(--shadow-raised);
}
.lane { display: grid; grid-template-columns: 7.75rem minmax(0, 1fr); align-items: center; gap: .75rem; height: 3rem; }
.lane + .lane { border-top: 1px dashed var(--line); padding-top: .35rem; height: 3.35rem; }
.lane-you { --lane: var(--you); --lane-wash: var(--you-wash); }
.lane-them { --lane: var(--them); --lane-wash: var(--them-wash); }
.lane-label { display: flex; flex-direction: column; gap: .05rem; min-width: 0; }
.lane-label b {
display: flex; align-items: center; gap: .4rem; font-size: .76rem; font-weight: 700; letter-spacing: .01em;
color: var(--ink-faint); transition: color var(--dur-fast);
}
.lane-label b::before {
content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--lane); opacity: .3; flex: none;
transition: opacity var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.lane-label small { font-size: .64rem; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lane.live .lane-label b { color: var(--lane); }
.lane.live .lane-label b::before { opacity: 1; transform: scale(1.15); }
/* The canvas is taken out of flow: its intrinsic width must never feed the
grid's min-content sizing, or the lane grows to fit the canvas that was
sized to fit the lane, and the label column is squeezed off the row. */
.wave, .bars { position: relative; min-width: 0; height: 100%; overflow: hidden; display: block; }
.wave canvas, .bars canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.script { position: relative; margin-top: .9rem; height: 11.5rem; overflow: hidden; }
.script::before {
content: ""; position: absolute; inset: 0 0 auto 0; height: 2rem; z-index: 1; pointer-events: none;
background: linear-gradient(var(--canvas), transparent);
}
.script-inner { display: flex; flex-direction: column; justify-content: flex-end; min-height: 100%; gap: .55rem; padding-bottom: .75rem; }
.line {
display: grid; grid-template-columns: 2.4rem 4.6rem minmax(0, 1fr); gap: .55rem; align-items: start;
font-size: .84rem; line-height: 1.45; animation: line-in .45s var(--ease-out);
}
.line-you { --lane: var(--you); --lane-wash: var(--you-wash); }
.line-them { --lane: var(--them); --lane-wash: var(--them-wash); }
@keyframes line-in { from { opacity: 0; transform: translateY(6px); } }
.line time { font-family: var(--mono); font-size: .68rem; color: var(--ink-faint); padding-top: .22rem; font-variant-numeric: tabular-nums; }
/* The chip carries a three-bar meter driven by the same envelope as the lane
above it. That is the link: the bars next to "Them" jump exactly when the
Them lane jumps, so a line visibly belongs to the track it came from. */
.chip {
display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; font-size: .7rem; color: var(--lane);
padding: .12rem .5rem .12rem .4rem; border-radius: 999px; background: var(--lane-wash); white-space: nowrap;
}
.chip .m { display: inline-flex; align-items: center; gap: 1.5px; height: .7rem; }
.chip .m b { width: 2px; height: 100%; border-radius: 1px; background: currentColor; transform-origin: center; transform: scaleY(.18); }
.chip .m b:nth-child(1) { transform: scaleY(var(--a1, .18)); }
.chip .m b:nth-child(2) { transform: scaleY(var(--a2, .18)); }
.chip .m b:nth-child(3) { transform: scaleY(var(--a3, .18)); }
.line p { margin: 0; color: var(--ink); text-wrap: pretty; }
/* A phrase the recogniser is still revising is shown at reduced opacity rather
than hidden until it settles — the app does exactly this. */
.line .w { transition: opacity .4s; }
.line .w.soft { opacity: .42; }
.app-status {
display: flex; justify-content: space-between; gap: 1rem; height: 2.1rem; align-items: center; padding: 0 var(--gutter);
background: var(--panel); box-shadow: 0 -1px 0 0 var(--line), 0 -6px 14px -10px hsl(205 30% 14% / .45);
color: var(--ink-faint); font-size: .68rem; position: relative; z-index: 1;
}
.app-status span { display: inline-flex; align-items: center; gap: .4rem; }
.app-status svg { width: .8rem; height: .8rem; }
.app-caption { margin: 1.1rem 0 0; color: var(--ink-faint); font-size: .88rem; text-align: center; text-wrap: pretty; }
@media (max-width: 52rem) {
.app-body { grid-template-columns: 1fr; }
.app-side, .account, .rule { display: none; }
.seg b:not(.on) { display: none; }
}
@media (max-width: 36rem) {
.search { display: none; }
.app-main { padding: .9rem .8rem 0; }
.lane { grid-template-columns: 5.4rem minmax(0, 1fr); gap: .5rem; }
.lane-label small { display: none; }
.line { grid-template-columns: 2.4rem minmax(0, 1fr); font-size: .82rem; }
.line time { grid-row: 1; }
.line .chip { grid-column: 2; justify-self: start; }
.line p { grid-column: 2; }
.script { height: 12.5rem; }
}
/* ── Sections ─────────────────────────────────────────────────────────────── */
main > section { padding: clamp(4rem, 9vw, 7rem) 0; }
main > section.edge { border-top: 1px solid var(--line); }
main > section.tint { background: var(--panel); --sec-bg: var(--panel); }
.sec-head { max-width: 42rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head.center .tag { justify-content: center; }
.tag {
display: flex; align-items: center; gap: .6rem; font-family: var(--mono); font-size: .72rem; font-weight: 600;
letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 0 0 1rem;
}
.tag::before { content: ""; width: 1.4rem; height: 2px; background: var(--accent); border-radius: 1px; }
h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); line-height: 1.06; letter-spacing: -.03em; margin: 0 0 1rem; font-weight: 700; text-wrap: balance; }
.sub { font-size: clamp(1rem, 1.6vw, 1.15rem); color: var(--ink-muted); margin: 0; line-height: 1.55; text-wrap: pretty; }
h3 { font-size: 1.05rem; margin: 0 0 .4rem; letter-spacing: -.01em; }
/* Scroll reveals: a short rise as a block enters. Without JS nothing is
hidden — the initial state is only applied under `.js`. */
.js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.js [data-reveal].in { opacity: 1; transform: none; }
/* ── The difference: two calls, side by side ─────────────────────────────── */
.versus { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 52rem) { .versus { grid-template-columns: 1fr; } }
.scene {
margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-surface);
box-shadow: var(--shadow-lifted); overflow: hidden; display: flex; flex-direction: column;
}
.scene figcaption { order: 2; padding: 1rem 1.25rem 1.1rem; display: flex; flex-direction: column; gap: .25rem; border-top: 1px solid var(--line); }
.scene-kicker { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; }
.scene-notey .scene-kicker { color: var(--accent); }
.scene-caption { font-weight: 600; font-size: 1rem; color: var(--ink); min-height: 1.6em; transition: opacity var(--dur-fast); }
.scene-caption.swap { opacity: 0; }
.call { position: relative; background: var(--dark); padding: 2.5rem .8rem .8rem; aspect-ratio: 16 / 10.5; overflow: hidden; }
@media (max-width: 36rem) { .call { aspect-ratio: 4 / 3.4; } }
.call-bar {
position: absolute; top: 0; left: 0; right: 0; height: 2.1rem; display: flex; align-items: center; gap: .6rem;
padding: 0 .9rem; color: var(--dark-muted); font-size: .68rem; font-family: var(--mono); letter-spacing: .03em;
}
.call-bar i { width: .45rem; height: .45rem; border-radius: 50%; background: hsl(152 45% 45%); }
.tiles { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: .5rem; height: 100%; }
.tile { position: relative; background: var(--dark-raised); border-radius: .7rem; display: grid; place-items: center; overflow: hidden; }
.tile.me { box-shadow: inset 0 0 0 2px var(--accent-on-dark); }
.avatar {
width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .78rem;
font-style: normal; color: var(--dark-ink); background: hsl(205 22% 38%); letter-spacing: .02em;
}
.tile > span {
position: absolute; left: .5rem; bottom: .45rem; font-size: .66rem; font-weight: 500; color: var(--dark-ink);
background: hsl(205 30% 6% / .75); padding: .12rem .45rem; border-radius: .35rem;
}
.tile.bot { opacity: 0; transform: translateY(1.1rem); transition: transform .55s var(--ease-out), opacity .35s; }
.tile.bot .avatar { background: hsl(205 10% 46%); }
.tile.bot .avatar svg { width: 1.3rem; height: 1.3rem; }
.denied {
position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; font-size: .82rem; color: var(--accent-ink);
background: hsl(0 72% 51% / .88); opacity: 0; transition: opacity .25s; letter-spacing: .02em;
}
.denied span { display: inline-flex; align-items: center; gap: .35rem; }
.toast {
position: absolute; left: 50%; top: 2.6rem; z-index: 2; transform: translate(-50%, -10px); opacity: 0;
background: hsl(205 30% 8% / .97); color: var(--dark-ink); border: 1px solid var(--dark-line); border-radius: .75rem;
padding: .5rem .55rem .5rem .8rem; display: flex; align-items: center; gap: .7rem; font-size: .72rem; white-space: nowrap;
box-shadow: var(--shadow-overlay); transition: transform .45s var(--ease-out), opacity .3s;
}
.toast-btns { display: flex; gap: .35rem; }
.toast-btns b { padding: .25rem .55rem; border-radius: .4rem; background: hsl(205 20% 22%); font-weight: 600; transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast); }
.toast-btns .deny { background: hsl(0 72% 51% / .16); color: hsl(0 85% 82%); }
.bubble {
position: absolute; z-index: 2; right: calc(50% + .6rem); top: 3.6rem; opacity: 0; transform: translateY(6px);
background: var(--card); color: var(--ink); font-size: .72rem; padding: .4rem .65rem; border-radius: .7rem .7rem .7rem .2rem;
box-shadow: var(--shadow-overlay); transition: transform .4s var(--ease-out), opacity .3s; white-space: nowrap;
}
.bubble b { color: var(--ink-faint); font-weight: 600; margin-right: .3rem; }
/* Phase choreography for the dial-in call. Phases are set by site.js on
`.versus[data-phase]`; the transitions above do the moving. */
[data-phase="1"] .tile.bot, [data-phase="2"] .tile.bot, [data-phase="3"] .tile.bot, [data-phase="4"] .tile.bot { opacity: 1; transform: none; }
[data-phase="5"] .tile.bot, [data-phase="6"] .tile.bot { opacity: 0; transform: translateY(1.1rem); transition-timing-function: var(--ease-in); }
[data-phase="1"] .toast, [data-phase="2"] .toast, [data-phase="3"] .toast { opacity: 1; transform: translate(-50%, 0); }
[data-phase="3"] .toast .deny { background: var(--danger); color: var(--accent-ink); transform: scale(.96); }
[data-phase="2"] .bubble, [data-phase="3"] .bubble { opacity: 1; transform: none; }
[data-phase="4"] .denied, [data-phase="5"] .denied { opacity: 1; }
/* Notey's side: the island the app actually shows when a call starts. */
.island { position: absolute; right: .8rem; top: .45rem; z-index: 2; display: grid; }
.island > * { grid-area: 1 / 1; justify-self: end; }
.island-prompt {
width: 15.5rem; max-width: calc(100vw - 4rem); background: var(--dark); color: var(--dark-ink); border-radius: .95rem;
padding: .75rem .85rem .8rem; box-shadow: var(--shadow-modal), inset 0 0 0 1px var(--dark-line);
transform: translateY(-10px); opacity: 0; transition: transform .45s var(--ease-out), opacity .3s;
}
.island-prompt b { display: flex; align-items: center; gap: .45rem; font-size: .78rem; }
.island-prompt b::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent-on-dark); }
.island-prompt .detail { display: block; color: var(--dark-muted); font-size: .68rem; line-height: 1.4; margin: .3rem 0 .6rem; }
.island-btns { display: flex; gap: .4rem; }
.island-btns b {
display: inline-flex; align-items: center; height: 1.8rem; padding: 0 .8rem; border-radius: .5rem; font-size: .72rem;
background: hsl(205 20% 20%); color: var(--dark-ink); transition: filter var(--dur-fast), transform var(--dur-fast);
}
.island-btns .allow { background: var(--accent-on-dark); color: var(--accent-ink); }
.island-rec {
display: inline-flex; align-items: center; gap: .5rem; height: 2.1rem; padding: 0 .35rem 0 .7rem; border-radius: 999px;
background: var(--dark); color: var(--dark-ink); box-shadow: var(--shadow-modal), inset 0 0 0 1px var(--dark-line);
transform: translateY(-10px); opacity: 0; transition: transform .45s var(--ease-out), opacity .3s;
font-variant-numeric: tabular-nums; font-weight: 600; font-size: .78rem;
}
.island-rec .stop-b {
display: inline-flex; align-items: center; gap: .35rem; height: 1.5rem; padding: 0 .6rem; border-radius: 999px;
background: var(--danger); color: var(--accent-ink); font-size: .68rem; transition: filter var(--dur-fast), transform var(--dur-fast);
}
.island-rec .stop-b i { width: .5rem; height: .5rem; background: currentColor; border-radius: 2px; }
[data-phase="1"] .island-prompt, [data-phase="2"] .island-prompt { opacity: 1; transform: none; }
[data-phase="2"] .island-prompt { opacity: 0; transform: translateY(-6px); transition-delay: .45s; }
[data-phase="2"] .island-btns .allow { filter: brightness(.8); transform: scale(.96); }
[data-phase="2"] .island-rec, [data-phase="3"] .island-rec, [data-phase="4"] .island-rec, [data-phase="5"] .island-rec, [data-phase="6"] .island-rec { opacity: 1; transform: none; }
[data-phase="2"] .island-rec { transition-delay: .6s; }
[data-phase="6"] .island-rec .stop-b { filter: brightness(.8); transform: scale(.96); }
[data-phase="6"] .island-rec { opacity: 0; transform: translateY(-6px); transition-delay: .4s; }
.vs-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 1.25rem; }
@media (max-width: 52rem) { .vs-lists { grid-template-columns: 1fr; } }
.vs-card { border-radius: var(--r-card); padding: 1.35rem 1.5rem; border: 1px solid var(--line); background: var(--card); }
.vs-card.them { background: var(--panel); }
.vs-card ul { list-style: none; padding: 0; margin: 0; }
.vs-card li { display: flex; gap: .65rem; font-size: .94rem; color: var(--ink-muted); padding: .42rem 0; align-items: baseline; }
.vs-card li span { flex: none; font-weight: 700; font-family: var(--mono); }
.no span { color: var(--danger); }
.yes span { color: var(--you); }
/* ── How it works: the flow ───────────────────────────────────────────────── */
.flow { display: grid; justify-items: center; }
.flow-mac {
position: relative; width: 100%; border: 1.5px dashed var(--line-strong); border-radius: var(--r-surface);
padding: 2.25rem 1.5rem 1.5rem; display: grid; gap: 0;
grid-template-columns: minmax(0, 1fr) 3.5rem minmax(0, 1.35fr) 3.5rem minmax(0, 1fr);
grid-template-areas: "mic w1 core w2 mac" ". . w3 . ." ". . out . .";
align-items: center;
}
.flow-mac-label {
position: absolute; top: -.75rem; left: 1.5rem; padding: 0 .6rem; background: var(--sec-bg, var(--canvas));
font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600;
display: inline-flex; align-items: center; gap: .45rem;
}
.flow-mac-label svg { width: .9rem; height: .9rem; }
.node {
background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: .95rem 1.1rem;
box-shadow: var(--shadow-raised); width: 100%; position: relative;
}
.node b { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; font-size: .95rem; letter-spacing: -.005em; }
.node b svg { width: 1rem; height: 1rem; flex: none; }
.node small { display: block; color: var(--ink-faint); font-size: .8rem; margin-top: .3rem; line-height: 1.45; }
.node.you { --lane: var(--you); grid-area: mic; }
.node.them { --lane: var(--them); grid-area: mac; }
.node.you b, .node.them b { color: var(--lane); }
.node.core { grid-area: core; background: var(--ink); border-color: var(--ink); color: var(--card); box-shadow: var(--shadow-lifted); }
.node.core b { color: var(--card); }
.node.core small { color: var(--dark-muted); }
.node.out { grid-area: out; }
.node.ai { max-width: 26rem; }
.badge {
display: inline-block; font-family: var(--mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase;
color: var(--accent); background: var(--accent-wash); border: 1px solid hsl(205 90% 36% / .25); border-radius: 999px;
padding: .12rem .5rem; margin-left: .4rem; vertical-align: middle; font-weight: 600; white-space: nowrap;
}
/* Wires draw themselves when the diagram scrolls in. The two source wires
are the two tracks; the third is the transcript coming out; the dashed one
is the only thing that crosses the boundary, and it is text. */
.wire { position: relative; --wire: var(--line-strong); }
.wire::before { content: ""; position: absolute; background: var(--wire); transform: scale(0); transition: transform .7s var(--ease-out); transition-delay: var(--d, 0s); }
.wire::after {
content: ""; position: absolute; width: .55rem; height: .55rem; border-right: 2px solid var(--wire); border-top: 2px solid var(--wire);
opacity: 0; transition: opacity .25s; transition-delay: calc(var(--d, 0s) + .55s);
}
.wire.you { --wire: var(--you); grid-area: w1; --d: .15s; }
.wire.them { --wire: var(--them); grid-area: w2; --d: .3s; }
.wire.down { grid-area: w3; --d: .75s; --wire: var(--ink); }
.wire.h { height: 2.5rem; }
.wire.h::before { top: 50%; left: 0; right: 0; height: 2px; margin-top: -1px; transform: scaleX(0); }
.wire.h.you::before { transform-origin: left; }
.wire.h.them::before { transform-origin: right; }
.wire.h.you::after { right: 1px; top: 50%; transform: translateY(-50%) rotate(45deg); }
.wire.h.them::after { left: 1px; top: 50%; transform: translateY(-50%) rotate(-135deg); }
.wire.v { height: 2.75rem; width: 100%; }
.wire.v::before { left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; transform: scaleY(0); transform-origin: top; }
.wire.v::after { left: 50%; bottom: 1px; transform: translateX(-50%) rotate(135deg); }
.wire.cross { height: 3.5rem; width: 2px; --wire: var(--accent); --d: 1.1s; }
.wire.cross::before { left: 0; top: 0; bottom: 0; width: 2px; transform: scaleY(0); transform-origin: top;
background: repeating-linear-gradient(to bottom, var(--wire) 0 5px, transparent 5px 9px); }
.wire.cross::after { left: 1px; bottom: 1px; transform: translateX(-50%) rotate(135deg); }
.cross-label {
display: inline-flex; align-items: center; gap: .45rem; font-family: var(--mono); font-size: .7rem; letter-spacing: .06em;
color: var(--accent); font-weight: 600; margin: .5rem 0 .55rem; text-transform: uppercase;
}
.flow-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem 2rem; margin-top: clamp(2rem, 5vw, 3rem); }
.flow-notes p { margin: 0; font-size: .95rem; }
.flow-notes b { display: block; color: var(--ink); margin-bottom: .25rem; font-size: 1rem; }
@media (max-width: 52rem) {
.flow-mac {
grid-template-columns: 1fr 1fr; padding: 2rem 1rem 1rem;
grid-template-areas: "mic mac" "w1 w2" "core core" "w3 w3" "out out";
}
.wire.h { height: 2.5rem; }
.wire.h.you::before, .wire.h.them::before { left: 50%; top: 0; bottom: 0; width: 2px; height: auto; margin: 0 0 0 -1px; transform: scaleY(0); transform-origin: top; }
.wire.h.you::after, .wire.h.them::after { left: 50%; right: auto; top: auto; bottom: 1px; transform: translateX(-50%) rotate(135deg); }
.flow-notes { grid-template-columns: 1fr; }
}
@media (max-width: 36rem) { .flow-mac-label { left: 1rem; } .node { padding: .8rem .9rem; } }
/* Last, and one class more specific than any wire variant above or inside the
media query, so the drawn state cannot be undone by source order. */
.flow.drawn .wire::before { transform: none; }
.flow.drawn .wire::after { opacity: 1; }
/* ── What it does: a ledger, not a wall of cards ─────────────────────────── */
.ledger { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 3.5rem; border-top: 1px solid var(--line); }
@media (max-width: 44rem) { .ledger { grid-template-columns: 1fr; } }
.ledger li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: .5rem; padding: 1.5rem 0 1.6rem; border-bottom: 1px solid var(--line); }
.ledger .num { font-family: var(--mono); font-size: .76rem; color: var(--accent); font-weight: 600; padding-top: .3rem; }
.ledger h3 { font-size: 1.12rem; margin: 0 0 .35rem; }
.ledger p { margin: 0; font-size: .95rem; text-wrap: pretty; }
/* ── Pricing ─────────────────────────────────────────────────────────────── */
.billing {
display: grid; grid-template-columns: 1fr 1fr; position: relative; padding: 3px; margin: 0 auto 2.25rem; width: max-content;
border: 1px solid var(--line); background: var(--panel); border-radius: 999px;
}
.billing::before {
content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); background: var(--card);
border-radius: 999px; box-shadow: var(--shadow-raised); transition: transform var(--dur) var(--ease-out);
}
.billing[data-on="monthly"]::before { transform: translateX(100%); }
.bill {
appearance: none; border: 0; background: transparent; font: inherit; font-weight: 600; font-size: .9rem; min-width: 7.5rem;
padding: .5rem 1.1rem; border-radius: 999px; color: var(--ink-muted); cursor: pointer; position: relative; z-index: 1;
transition: color var(--dur-fast);
}
.bill[aria-pressed="true"] { color: var(--ink); }
.bill small { display: block; font-weight: 500; font-size: .72rem; color: var(--ink-faint); line-height: 1.1; }
.plans { display: grid; gap: 1.1rem; grid-template-columns: repeat(4, 1fr); align-items: stretch; }
@media (max-width: 62rem) { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 36rem) { .plans { grid-template-columns: 1fr; } }
.plan {
position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
padding: 1.5rem; display: flex; flex-direction: column; box-shadow: var(--shadow-raised);
transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.plan:hover { transform: translateY(-3px); box-shadow: var(--shadow-lifted); }
.plan.best { border-color: var(--accent); box-shadow: var(--shadow-lifted); }
.plan.best:hover { box-shadow: var(--shadow-overlay); }
.plan.best::after {
content: "Most people"; position: absolute; top: -.7rem; left: 1.25rem; background: var(--accent); color: var(--accent-ink);
font-size: .68rem; font-weight: 700; padding: .2rem .65rem; border-radius: 999px; letter-spacing: .03em; font-family: var(--mono);
}
.plan h3 { font-size: 1.05rem; }
.price { display: flex; align-items: baseline; gap: .2rem; margin: .5rem 0 .1rem; font-weight: 700; letter-spacing: -.03em; font-size: 2.2rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.price small { font-size: .9rem; font-weight: 500; color: var(--ink-faint); letter-spacing: 0; }
.amount { display: inline-block; }
.amount.flip { animation: price-in var(--dur) var(--ease-out); }
@keyframes price-in { from { opacity: 0; transform: translateY(5px); } }
.per { font-size: .8rem; color: var(--ink-faint); margin-bottom: 1rem; min-height: 1.3em; }
.hours { font-weight: 600; color: var(--ink); font-size: .92rem; margin-bottom: .6rem; display: flex; align-items: flex-start; gap: .5rem; line-height: 1.4; }
.hours i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); flex: none; margin-top: .45em; }
.plan p { font-size: .9rem; flex: 1; }
.plan .btn { align-self: flex-start; }
/* ── Privacy ledger ──────────────────────────────────────────────────────── */
.leaves { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
@media (max-width: 44rem) { .leaves { grid-template-columns: 1fr; } }
.leave {
background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 1.35rem 1.5rem;
box-shadow: var(--shadow-raised); display: grid; grid-template-columns: auto 1fr; gap: .4rem .9rem; align-items: start;
}
.leave .k {
grid-row: span 2; width: 2.25rem; height: 2.25rem; border-radius: .6rem; display: grid; place-items: center; margin-top: .1rem;
}
.leave .k svg { width: 1.1rem; height: 1.1rem; }
.leave.stay .k { background: var(--you-wash); color: var(--you); }
.leave.go .k { background: var(--accent-wash); color: var(--accent); }
.leave h3 { margin: 0; }
.leave .when { display: block; font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; margin-top: .3rem; }
.leave.stay .when { color: var(--you); }
.leave.go .when { color: var(--accent); }
.leave p { margin: 0; font-size: .93rem; }
/* ── FAQ ──────────────────────────────────────────────────────────────────── */
details { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 0 1.25rem; margin-bottom: .7rem; transition: box-shadow var(--dur); }
details[open] { box-shadow: var(--shadow-lifted); }
summary { font-weight: 600; cursor: pointer; list-style: none; padding: 1rem 0; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
summary::-webkit-details-marker { display: none; }
summary::after {
content: ""; flex: none; width: .55rem; height: .55rem; border-right: 2px solid var(--ink-faint); border-bottom: 2px solid var(--ink-faint);
transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--dur) var(--ease-out); margin-right: .2rem;
}
details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
details p { margin: 0; padding: 0 0 1.1rem; font-size: .95rem; animation: rise var(--dur) var(--ease-out); }
/* ── Closing ──────────────────────────────────────────────────────────────── */
.closer {
position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-surface);
padding: clamp(2.5rem, 6vw, 4rem) 2rem; text-align: center; box-shadow: var(--shadow-lifted);
}
.closer::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: repeating-linear-gradient(90deg, hsl(205 30% 14% / .05) 0 1px, transparent 1px 14px);
-webkit-mask-image: radial-gradient(closest-side, hsl(0 0% 0% / .9), transparent);
mask-image: radial-gradient(closest-side, hsl(0 0% 0% / .9), transparent);
}
.closer > * { position: relative; }
.closer h2 { margin-bottom: .6rem; }
.closer .sub { margin: 0 auto 1.8rem; max-width: 30rem; }
footer { border-top: 1px solid var(--line); padding: 2.5rem 0 3.5rem; color: var(--ink-faint); font-size: .9rem; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: flex-start; }
footer a { color: var(--ink-muted); text-decoration: none; }
footer a:hover { color: var(--accent); }
.links { display: flex; gap: 1.25rem; flex-wrap: wrap; }
/* Utilities that replace inline styles: the CSP forbids `style=""` attributes
(style-src 'self', deliberately without 'unsafe-inline'), and a blocked
inline style fails silently. */
.mt-2 { margin-top: 2rem; }
.mt-05 { margin-top: .5rem; }
.brand-sm { font-size: .95rem; }
/* ── Policy page ─────────────────────────────────────────────────────────── */
article { padding: 3rem 0 4rem; }
.policy-head { padding-bottom: 1.5rem; }
article section.policy { border-top: 1px solid var(--line); padding: 1.5rem 0 0; }
article h1 { font-size: 2.2rem; }
article h2 { text-align: left; font-size: 1.35rem; margin-top: 2.4rem; }
article h3 { margin-top: 1.5rem; }
article ul { color: var(--ink-muted); padding-left: 1.2rem; }
article li { margin-bottom: .5rem; }
article a { color: var(--accent); }
.updated { color: var(--ink-faint); font-size: .9rem; }
/* ── Reduced motion ──────────────────────────────────────────────────────────
Someone who gets motion sick from a parallax page is a person the page just
lost. Everything that moves is switched off here; what remains is a fade or
nothing. The hero renders one still frame (site.js), the call scenes hold
their final state, the diagram arrives fully drawn. */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.js .hero-copy > *, .js .app { animation: none; opacity: 1; transform: none; }
.js [data-reveal] { transition: opacity var(--dur); transform: none; }
.rec-dot { animation: none; }
.line { animation: none; }
.line .w { transition: none; }
.amount.flip, details p { animation: none; }
.btn, .plan, .top-links a::after, .billing::before, summary::after { transition: none; }
.plan:hover { transform: none; }
.wire::before, .wire::after, .tile.bot, .toast, .bubble, .denied, .island-prompt, .island-rec, .scene-caption,
.toast-btns b, .island-btns b, .island-rec .stop-b { transition: none !important; }
.wire::before { transform: none !important; }
.wire::after { opacity: 1 !important; }
}
/* ── Screens: slots for screenshots, mocks until they land, annotations ───
A `.shot` is a slot. Its `.shot-frame` holds either a real screenshot as an
![]()
or a mock drawn with the hero's own styles; swapping one for the
other is a change inside the frame and nothing else. Callouts sit in the
same grid cell as the frame and are positioned in percentages, so they
survive the swap. */
.annotated { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; position: relative; }
@media (max-width: 56rem) { .annotated { grid-template-columns: 1fr; } .island-shot { max-width: 28rem; } }
#inside .wrap { position: relative; }
.shot { margin: 0; position: relative; display: grid; }
.shot .shot-frame, .shot .callouts { grid-area: 1 / 1; }
.shot figcaption { grid-row: 2; margin-top: .85rem; font-size: .86rem; color: var(--ink-faint); text-wrap: pretty; }
.shot-frame { position: relative; min-width: 0; container-type: inline-size; }
@container (max-width: 40rem) {
.app-window .seg b:not(.on), .app-window .search, .app-window .account, .app-window .rule { display: none; }
}
/* A screen that is not one of the four top-level surfaces has nothing to
highlight in the segmented control, so the control is not drawn at all. */
.shot-frame .seg:not(:has(.on)) { display: none; }
.shot-frame > img, .shot-open > img, .shot-open > picture > img {
display: block; width: 100%; height: auto; border-radius: var(--r-surface); border: 1px solid var(--line);
box-shadow: var(--shadow-modal); background: var(--card);
}
.shot-open { appearance: none; border: 0; padding: 0; margin: 0; background: none; display: block; width: 100%; cursor: zoom-in; border-radius: var(--r-surface); }
.shot-frame .app-window { font-size: .74rem; pointer-events: none; }
.shot-frame.dark { background: var(--dark); border-radius: var(--r-surface); padding: 1.25rem; box-shadow: var(--shadow-modal); }
.island-states { display: grid; gap: .9rem; justify-items: start; }
.island-states .island-prompt, .island-states .island-rec { opacity: 1; transform: none; transition: none; }
.island-states .island-prompt { width: 100%; max-width: 21rem; }
.island-prompt.ending b .rec-dot { width: .5rem; height: .5rem; }
.island-prompt.ending b::before { display: none; }
.island-tick { display: flex; align-items: center; gap: .45rem; margin-top: .65rem; font-size: .66rem; color: var(--dark-muted); }
.island-tick i { width: .8rem; height: .8rem; border: 1px solid var(--dark-line); border-radius: .2rem; background: hsl(205 20% 16%); flex: none; }
.script.static { height: auto; }
.script.static::before { display: none; }
.script.static .script-inner { justify-content: flex-start; min-height: 0; padding-bottom: .2rem; }
.script.static .line { animation: none; }
.script.static.tall .line { font-size: .78rem; }
.center { text-align: center; }
.billing-wrap { display: flex; justify-content: center; }
/* Callouts: numbered pins on the real controls. The label shows on hover,
focus or tap; pins arrive one after another as the figure scrolls in, so
they read as pointing rather than shouting. */
.callouts { list-style: none; margin: 0; padding: 0; position: relative; pointer-events: none; z-index: 3; display: none; }
.js .callouts { display: block; }
.callout { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); pointer-events: auto; }
.js .callout { opacity: 0; transition: opacity var(--dur) var(--ease-out), transform var(--dur-slow) var(--ease-out); transform: translate(-50%, -30%); transition-delay: calc(.35s + var(--k, 0) * 110ms); }
.js .in .callout { opacity: 1; transform: translate(-50%, -50%); }
.pin {
position: relative; appearance: none; border: 0; width: 1.75rem; height: 1.75rem; border-radius: 50%; padding: 0;
background: var(--accent); color: var(--accent-ink); font: 700 .74rem/1 var(--mono); display: grid; place-items: center;
cursor: pointer; box-shadow: 0 0 0 3px var(--card), var(--shadow-lifted); transition: transform var(--dur-fast) var(--ease-out);
}
.pin::after {
content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0;
animation: ping 2.6s var(--ease-out) infinite; animation-delay: calc(var(--k, 0) * 300ms);
}
@keyframes ping { 0% { transform: scale(.7); opacity: .6; } 60%, 100% { transform: scale(1.35); opacity: 0; } }
.pin:hover, .callout.show .pin { transform: scale(1.1); }
.callout.show .pin::after { animation: none; }
.callout-label {
position: absolute; left: 50%; top: calc(100% + .7rem); transform: translate(-50%, -4px); width: max-content; max-width: 17rem;
background: var(--ink); color: var(--card); font-size: .8rem; line-height: 1.45; padding: .6rem .8rem; border-radius: var(--r-control);
box-shadow: var(--shadow-overlay); opacity: 0; pointer-events: none; z-index: 5; text-wrap: pretty;
transition: opacity var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.callout.show .callout-label { opacity: 1; transform: translate(-50%, 0); }
.callout.flip .callout-label { top: auto; bottom: calc(100% + .7rem); }
.callout.left .callout-label { left: auto; right: -.25rem; transform: translate(0, -4px); }
.callout.left.show .callout-label { transform: none; }
.callout.right .callout-label { left: -.25rem; transform: translate(0, -4px); }
.callout.right.show .callout-label { transform: none; }
@media (max-width: 36rem) { .callout-label { max-width: min(17rem, 78vw); } }
/* The loupe: a magnified copy of what a pin points at. */
.loupe {
position: absolute; z-index: 7; width: 15rem; height: 7.5rem; border-radius: var(--r-card); background: var(--card);
border: 1px solid var(--line); box-shadow: var(--shadow-modal); overflow: hidden; pointer-events: none;
opacity: 0; transform: scale(.94); transform-origin: left center; transition: opacity var(--dur-fast), transform var(--dur) var(--ease-out);
}
.loupe.on { opacity: 1; transform: none; }
.loupe.dark { background: var(--dark); border-color: var(--dark-line); }
.loupe-inner { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(2.3); transform-origin: center; font-size: .74rem; white-space: nowrap; }
.loupe-inner.is-crop { inset: 0; transform: none; }
.loupe-inner .crop { position: absolute; inset: 0; background-repeat: no-repeat; }
.loupe .rec-pill, .loupe .island-rec { margin: 0; opacity: 1; transform: none; }
@media (max-width: 36rem) { .loupe { display: none; } }
/* The feature tour. */
.tour { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); gap: 2rem; align-items: start; }
.tour-tabs { display: flex; flex-direction: column; gap: .25rem; position: sticky; top: 4.75rem; }
.tour-tabs [role="tab"] {
appearance: none; border: 1px solid transparent; background: transparent; font: inherit; font-weight: 600; font-size: .95rem;
color: var(--ink-muted); text-align: left; padding: .65rem .9rem; border-radius: var(--r-control); cursor: pointer;
display: flex; align-items: center; gap: .8rem; transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.tour-tabs [role="tab"] .n { font-family: var(--mono); font-size: .7rem; color: var(--ink-faint); font-weight: 600; }
.tour-tabs [role="tab"]:hover { background: var(--card); color: var(--ink); }
.tour-tabs [role="tab"][aria-selected="true"] { background: var(--card); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-raised); }
.tour-tabs [role="tab"][aria-selected="true"] .n { color: var(--accent); }
/* `display` here would otherwise override the `hidden` attribute the tabs set. */
.tour-panels [role="tabpanel"][hidden] { display: none; }
.tour-panels [role="tabpanel"] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 2rem; align-items: start; animation: rise var(--dur) var(--ease-out); border-radius: var(--r-card); }
.tour-copy h3 { font-size: 1.45rem; letter-spacing: -.02em; margin: 0 0 1rem; }
.facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .85rem; }
.facts li { font-size: .93rem; color: var(--ink-muted); line-height: 1.55; padding-left: 1.1rem; position: relative; text-wrap: pretty; }
.facts li::before { content: ""; position: absolute; left: 0; top: .62em; width: .4rem; height: .4rem; border-radius: 50%; background: var(--accent); }
.facts b { color: var(--ink); }
@media (max-width: 64rem) { .tour-panels [role="tabpanel"] { grid-template-columns: 1fr; } }
@media (max-width: 52rem) {
.tour { grid-template-columns: 1fr; gap: 1.25rem; }
.tour-tabs { position: static; flex-direction: row; overflow-x: auto; gap: .35rem; padding: 2px 2px .5rem; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.tour-tabs [role="tab"] { white-space: nowrap; flex: none; padding: .5rem .8rem; font-size: .88rem; }
}
/* Mock innards used by the tour. */
.mock-body { padding: 1rem 1.1rem 1.2rem; display: grid; gap: .8rem; min-height: 17rem; align-content: start; }
.mock-body.split { grid-template-columns: minmax(0, 1fr) 15rem; gap: 1rem; }
.mock-column { min-width: 0; }
.mock-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: .8rem .9rem; box-shadow: var(--shadow-raised); display: grid; gap: .35rem; justify-items: start; }
.mock-card > b { font-size: .8rem; }
.mock-card > small { color: var(--ink-faint); font-size: .68rem; line-height: 1.4; }
.mock-card .eyebrow { text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: .6rem; color: var(--ink-faint); }
.mock-card code { font-family: var(--mono); font-size: .72rem; background: var(--panel); border: 1px solid var(--line); border-radius: .4rem; padding: .35rem .5rem; }
.mock-card.arm, .mock-card.upnext { border-color: hsl(205 90% 36% / .35); box-shadow: inset 0 0 0 1px hsl(205 90% 36% / .2), var(--shadow-raised); }
.mock-row { display: flex; justify-content: space-between; gap: .75rem; align-items: baseline; padding: .4rem .5rem; border-radius: var(--r-control); font-weight: 600; font-size: .74rem; width: 100%; }
.mock-row small { color: var(--ink-faint); font-weight: 500; font-size: .66rem; text-align: right; }
.mock-row.on { background: var(--panel); }
.mock-row.warn small { color: var(--danger); }
.mock-row.faint span { color: var(--ink-faint); }
.mock-btn { display: inline-flex; align-items: center; gap: .35rem; height: 1.8rem; padding: 0 .7rem; border-radius: var(--r-control); font-weight: 600; font-size: .72rem; }
.mock-btn.ghost { border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow-raised); margin-top: .3rem; }
.mock-btn.primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-filled); height: 2.1rem; }
.mock-btn.right { margin-left: auto; }
.mock-btn svg { width: .85rem; height: .85rem; }
.mock-tabs { display: flex; gap: 1rem; border-bottom: 1px solid var(--line); margin-bottom: .6rem; }
.mock-tabs b { padding: .3rem 0 .5rem; font-size: .76rem; color: var(--ink-faint); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.mock-tabs b.on { color: var(--ink); border-color: var(--accent); }
.mock-names { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .6rem; }
.mock-pills { display: flex; gap: .35rem; flex-wrap: wrap; }
.mock-pills span { font-size: .68rem; font-weight: 600; padding: .25rem .6rem; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-muted); background: var(--card); }
.mock-pills span.on { background: var(--ink); color: var(--card); border-color: var(--ink); }
.mock-note { display: grid; gap: .4rem; }
.mock-note p, .mock-note li { font-size: .76rem; color: var(--ink); margin: 0; line-height: 1.5; }
.mock-note ul { margin: 0; padding-left: 1rem; }
.mock-note-head { display: flex; align-items: center; gap: .5rem; margin-top: .4rem; font-size: .8rem; }
.mock-note-head .badge { margin: 0; }
.mock-lines { display: grid; gap: .55rem; padding: .4rem 0; }
.mock-lines i { display: block; height: .5rem; border-radius: 3px; background: var(--panel); }
.mock-lines i:nth-child(1) { width: 92%; } .mock-lines i:nth-child(2) { width: 78%; } .mock-lines i:nth-child(3) { width: 85%; }
.mock-lines i:nth-child(4) { width: 60%; } .mock-lines i:nth-child(5) { width: 88%; } .mock-lines i:nth-child(6) { width: 70%; }
.mock-panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-raised); padding: .75rem; display: grid; gap: .55rem; align-content: start; }
.mock-panel-head { font-weight: 700; font-size: .76rem; padding-bottom: .4rem; border-bottom: 1px solid var(--line); }
.mock-q { justify-self: end; background: var(--accent); color: var(--accent-ink); font-size: .72rem; padding: .45rem .65rem; border-radius: .7rem .7rem .2rem .7rem; max-width: 92%; }
.mock-a { background: var(--panel); font-size: .72rem; color: var(--ink); padding: .5rem .65rem; border-radius: .7rem .7rem .7rem .2rem; display: grid; gap: .3rem; line-height: 1.45; }
.mock-a .badge { margin: 0; width: max-content; }
.mock-input { border: 1px solid var(--line); border-radius: 999px; padding: .4rem .7rem; font-size: .7rem; color: var(--ink-faint); margin-top: .2rem; }
.mock-switch { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: .7rem .9rem; box-shadow: var(--shadow-raised); }
.mock-switch b { display: block; font-size: .78rem; }
.mock-switch small { color: var(--ink-faint); font-size: .68rem; }
.mock-switch i { width: 2.1rem; height: 1.25rem; border-radius: 999px; background: var(--line); position: relative; flex: none; }
.mock-switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: calc(1.25rem - 4px); height: calc(1.25rem - 4px); border-radius: 50%; background: var(--card); box-shadow: var(--shadow-raised); }
.mock-switch i.on { background: var(--accent); }
.mock-switch i.on::after { left: auto; right: 2px; }
.mock-person { display: flex; align-items: center; gap: .7rem; padding: .4rem .2rem; width: 100%; }
.mock-person .avatar { width: 2rem; height: 2rem; font-size: .66rem; background: var(--panel); color: var(--ink); }
.mock-person > span { flex: 1; display: grid; min-width: 0; }
.mock-person b { font-size: .78rem; }
.mock-person small { color: var(--ink-faint); font-size: .66rem; }
.mock-person em { font-style: normal; font-size: .68rem; color: var(--ink-muted); border: 1px solid var(--line); border-radius: var(--r-control); padding: .25rem .5rem; white-space: nowrap; }
@media (max-width: 40rem) {
.mock-body.split { grid-template-columns: 1fr; }
.mock-body { padding: .8rem .8rem 1rem; }
}
/* The lightbox. A native