Website for the Lede browser extension.
1/*
2 Lede landing — tokens derived from brand-guidelines.md (OKLCH + color-mix).
3 Neutrals tinted toward brand orange hue (~38–75 in OKLCH hue for warm paper).
4*/
5
6:root {
7 /* Hue anchor (orange family) for subtle neutral tint */
8 --hue-brand: 48;
9 --hue-ink: 55;
10
11 --color-canvas: oklch(96.2% 0.012 var(--hue-brand));
12 --color-subtle: oklch(93.5% 0.014 var(--hue-brand));
13 --color-border: oklch(88% 0.018 var(--hue-brand));
14 --color-border-hover: oklch(80% 0.02 var(--hue-brand));
15 --color-ink: oklch(12.8% 0.012 var(--hue-ink));
16 --color-ink-secondary: oklch(22% 0.012 var(--hue-ink));
17 --color-ink-muted: oklch(72% 0.02 var(--hue-ink));
18 --color-surface: oklch(99.4% 0.004 var(--hue-brand));
19
20 --color-brand: oklch(64.5% 0.205 38);
21 --color-brand-hover: oklch(58% 0.19 38);
22 --color-brand-active: oklch(51% 0.175 38);
23 --color-brand-soft: color-mix(in oklch, var(--color-brand) 14%, var(--color-canvas));
24 --color-on-brand: oklch(99% 0.01 95);
25
26 --color-link: oklch(38% 0.02 var(--hue-ink));
27 --color-link-hover: var(--color-brand);
28
29 /* Privacy band — soft apricot slab (light mode); hue locks to brand orange */
30 --color-dark-canvas: oklch(92.5% 0.022 38);
31 --color-dark-subtle: oklch(89.6% 0.025 38);
32 --color-dark-border: oklch(84% 0.03 40);
33 --color-dark-ink: var(--color-ink);
34 --color-dark-ink-secondary: var(--color-ink-secondary);
35
36 /* Typography */
37 --font-display: "Sora", system-ui, sans-serif;
38 --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
39 --font-mono: ui-monospace, "SF Mono", "Cascadia Code", monospace;
40
41 /* Fluid display scale (≥1.25 ratio between steps) */
42 --text-hero: clamp(2.85rem, 5.5vw + 1.15rem, 4.85rem);
43 --text-xl: clamp(1.9rem, 2.6vw + 1.05rem, 2.75rem);
44 --text-lg: clamp(1.35rem, 1.2vw + 1rem, 1.75rem);
45 --text-md: clamp(1.0625rem, 0.5vw + 0.95rem, 1.25rem);
46 --text-sm: 0.875rem;
47 --text-xs: 0.6875rem;
48
49 --leading-tight: 1.25;
50 --leading-ui: 1.35;
51 --leading-prose: 1.65;
52 --leading-prose-dark: 1.72;
53
54 --tracking-display: -0.02em;
55 --tracking-label: 0.08em;
56
57 /* 4pt-based semantic spacing */
58 --space-3xs: 0.25rem;
59 --space-2xs: 0.5rem;
60 --space-xs: 0.75rem;
61 --space-sm: 1rem;
62 --space-md: 1.5rem;
63 --space-lg: 2rem;
64 --space-xl: 3rem;
65 --space-2xl: 4rem;
66 --space-3xl: 6rem;
67
68 /* Section vertical rhythm (fluid where the page needs to breathe) */
69 --section-y: clamp(2.75rem, 5vw, 4.25rem);
70 --section-y-tight: clamp(1.35rem, 2.8vw, 2.25rem);
71 --section-y-room: clamp(3.25rem, 6.5vw, 5.5rem);
72 --section-y-hero-tail: clamp(3rem, 6vw, 5rem);
73
74 --radius-sm: 6px;
75 --radius-md: 8px;
76 --radius-pill: 14px;
77 /* Floated site header — slightly rounder than cards, tuned for blur + shadow */
78 --radius-nav-float: 13px;
79 --nav-float-max: 1280px;
80 /* Full-viewport top veil (html.site-nav-floated::before) — tall + opaque stops hide scroll “pop” */
81 --nav-top-fade-reach: clamp(2rem, 6vw, 3.5rem);
82 --nav-veil-pill-overlap: clamp(3.25rem, 8dvh, 6.25rem);
83
84 --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
85 /* Softer deceleration for first-paint choreography (no bounce) */
86 --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
87 --ease-out-disclosure: cubic-bezier(0.22, 1, 0.36, 1);
88 --duration-enter: 0.74s;
89 --duration-disclosure: 0.42s;
90 /* Fixed caps for <details> collapse — animating 0fr→1fr is skipped inconsistently in browsers */
91 --disclosure-collapse-max: min(92vh, 52rem);
92 --faq-collapse-max: min(60vh, 22rem);
93 --content-max: 70ch;
94 --page-gutter: clamp(1rem, 4vw, 2.5rem);
95
96 --focus-ring: 2px solid var(--color-brand);
97 --focus-offset: 2px;
98
99 /* Elevation (neutral black/alpha — not tied to --color-ink, so shadows work in dark mode) */
100 --shadow-card-edge: oklch(0% 0 0 / 0.07);
101 --shadow-card-soft: oklch(0% 0 0 / 0.11);
102 --shadow-popup:
103 0 0 0 1px color-mix(in oklch, var(--color-brand) 18%, oklch(0% 0 0 / 0.06)),
104 0 12px 28px oklch(0% 0 0 / 0.08),
105 0 32px 80px oklch(0% 0 0 / 0.12);
106}
107
108@media (prefers-color-scheme: dark) {
109 :root {
110 --color-canvas: oklch(17.2% 0.014 var(--hue-brand));
111 --color-subtle: oklch(20.8% 0.016 var(--hue-brand));
112 --color-border: oklch(28% 0.018 var(--hue-brand));
113 --color-border-hover: oklch(36% 0.02 var(--hue-brand));
114 --color-ink: oklch(95.5% 0.012 85);
115 --color-ink-secondary: oklch(83% 0.014 78);
116 --color-ink-muted: oklch(56% 0.022 70);
117 --color-surface: oklch(21.2% 0.014 var(--hue-brand));
118
119 --color-brand: oklch(70% 0.2 38);
120 --color-brand-hover: oklch(76% 0.2 40);
121 --color-brand-active: oklch(62% 0.175 38);
122 --color-brand-soft: color-mix(in oklch, var(--color-brand) 18%, var(--color-canvas));
123 --color-on-brand: oklch(14% 0.02 42);
124
125 --color-link: oklch(78% 0.04 72);
126 --color-link-hover: oklch(82% 0.12 48);
127
128 /* Privacy band: slightly lifted warm slab vs page canvas */
129 --color-dark-canvas: oklch(23.5% 0.017 var(--hue-ink));
130 --color-dark-subtle: oklch(27% 0.016 var(--hue-ink));
131 --color-dark-border: oklch(35% 0.015 var(--hue-ink));
132 --color-dark-ink: oklch(96.5% 0.01 85);
133 --color-dark-ink-secondary: oklch(87% 0.016 78);
134
135 --shadow-card-edge: oklch(100% 0 0 / 0.08);
136 --shadow-card-soft: oklch(0% 0 0 / 0.42);
137 --shadow-popup:
138 0 0 0 1px color-mix(in oklch, var(--color-brand) 28%, oklch(100% 0 0 / 0.12)),
139 0 14px 32px oklch(0% 0 0 / 0.45),
140 0 36px 88px oklch(0% 0 0 / 0.55);
141 }
142
143 .hero-mast {
144 background:
145 radial-gradient(ellipse 78% 58% at 0% 0%, color-mix(in oklch, var(--color-brand) 24%, transparent), transparent 55%),
146 linear-gradient(
147 172deg,
148 color-mix(in oklch, var(--color-subtle) 92%, #000) 0%,
149 var(--color-canvas) 48%,
150 oklch(14.5% 0.016 var(--hue-brand)) 100%
151 );
152 }
153
154 .hero-mast .eyebrow {
155 color: color-mix(in oklch, var(--color-brand) 48%, var(--color-ink-muted));
156 }
157
158 .hero-proof .extension-demo {
159 box-shadow:
160 0 0 0 1px color-mix(in oklch, var(--color-brand) 22%, oklch(100% 0 0 / 0.1)),
161 0 5px 14px oklch(0% 0 0 / 0.28),
162 0 14px 32px oklch(0% 0 0 / 0.36);
163 }
164}
165
166*,
167*::before,
168*::after {
169 box-sizing: border-box;
170}
171
172html {
173 scroll-behavior: smooth;
174 color-scheme: light dark;
175}
176
177@media (prefers-reduced-motion: reduce) {
178 html {
179 scroll-behavior: auto;
180 }
181}
182
183body {
184 margin: 0;
185 font-family: var(--font-body);
186 font-size: 1rem;
187 line-height: var(--leading-prose);
188 color: var(--color-ink);
189 background-color: var(--color-canvas);
190 text-rendering: optimizeLegibility;
191}
192
193img {
194 max-width: 100%;
195 height: auto;
196 display: block;
197}
198
199a {
200 color: var(--color-link);
201 text-decoration-thickness: 1px;
202 text-underline-offset: 0.18em;
203 transition: color 0.14s var(--ease-out);
204}
205
206a:hover {
207 color: var(--color-link-hover);
208}
209
210a:focus-visible {
211 outline: var(--focus-ring);
212 outline-offset: var(--focus-offset);
213 border-radius: 2px;
214}
215
216.skip-link {
217 position: absolute;
218 left: -9999px;
219 top: 0.5rem;
220 z-index: 100;
221 padding: var(--space-xs) var(--space-sm);
222 background: var(--color-surface);
223 color: var(--color-ink);
224 font-family: var(--font-display);
225 font-weight: 600;
226 border-radius: var(--radius-md);
227 border: 1px solid var(--color-border);
228}
229
230.skip-link:focus {
231 left: var(--page-gutter);
232}
233
234/* ——— Layout shell ——— */
235.page {
236 min-height: 100vh;
237 display: flex;
238 flex-direction: column;
239}
240
241.page-main {
242 flex: 1;
243}
244
245/* Mast gradient paints the full hero; nav sits in the same grid cell so it reads integrated */
246.hero-shell {
247 display: grid;
248 grid-template-areas: "stack";
249 position: relative;
250}
251
252.hero-shell > .site-header,
253.hero-shell > .hero-mast {
254 grid-area: stack;
255}
256
257.hero-shell > .hero-mast {
258 position: relative;
259 z-index: 0;
260}
261
262.hero-shell > .site-header {
263 position: sticky;
264 top: 0;
265 align-self: start;
266 justify-self: stretch;
267 width: 100%;
268 z-index: 50;
269}
270
271.wrap {
272 width: min(1120px, 100% - 2 * var(--page-gutter));
273 margin-inline: auto;
274}
275
276.prose {
277 max-width: var(--content-max);
278 color: var(--color-ink-secondary);
279}
280
281.prose p {
282 margin: 0 0 var(--space-md);
283}
284
285.prose p:last-child {
286 margin-bottom: 0;
287}
288
289/* ——— Type ——— */
290.font-display {
291 font-family: var(--font-display);
292}
293
294.eyebrow {
295 font-family: var(--font-display);
296 font-size: var(--text-xs);
297 font-weight: 600;
298 letter-spacing: var(--tracking-label);
299 text-transform: uppercase;
300 color: var(--color-ink-muted);
301}
302
303.display-hero {
304 font-family: var(--font-display);
305 font-size: var(--text-hero);
306 font-weight: 700;
307 line-height: 1.02;
308 letter-spacing: -0.028em;
309 color: var(--color-ink);
310 margin: 0 0 var(--space-sm);
311 text-wrap: balance;
312}
313
314.heading-xl {
315 font-family: var(--font-display);
316 font-size: var(--text-xl);
317 font-weight: 700;
318 line-height: var(--leading-tight);
319 letter-spacing: var(--tracking-display);
320 color: var(--color-ink);
321 margin: 0 0 var(--space-sm);
322}
323
324.heading-lg {
325 font-family: var(--font-display);
326 font-size: var(--text-lg);
327 font-weight: 600;
328 line-height: var(--leading-tight);
329 color: var(--color-ink);
330 margin: 0 0 var(--space-xs);
331}
332
333.heading-md {
334 font-family: var(--font-display);
335 font-size: var(--text-md);
336 font-weight: 600;
337 line-height: var(--leading-ui);
338 color: var(--color-ink);
339 margin: 0 0 var(--space-2xs);
340}
341
342.lede {
343 font-size: var(--text-md);
344 line-height: var(--leading-ui);
345 color: var(--color-ink-secondary);
346 max-width: 36em;
347 margin: 0;
348}
349
350.kbd {
351 font-family: var(--font-mono);
352 font-size: 0.85em;
353 padding: 0.12em 0.45em;
354 border-radius: var(--radius-sm);
355 border: 1px solid var(--color-border);
356 background: color-mix(in oklch, var(--color-subtle) 88%, transparent);
357 color: var(--color-ink);
358}
359
360/* ——— Header ———
361 In .hero-shell: sits over the mast gradient (integrated at top).
362 Floated: one painted surface on ::after (inset ring + shadow) avoids radius seam glitches.
363
364 Transition strategy:
365 - sticky→fixed is a layout change; transitions don't reliably start from the pre-change value.
366 - We use @keyframes (not transition) for the glass entrance — animations always fire.
367 - translateY slide on the pill parent covers the geometry snap visually.
368 - Exit is instant (glass snaps off, user is near top so sticky re-appears at same visual pos). */
369.site-header {
370 position: relative;
371 isolation: isolate;
372 z-index: 40;
373 background: transparent;
374 border: 1px solid transparent;
375 border-radius: 0;
376 box-shadow: none;
377 transition: border-radius 0.55s var(--ease-reveal);
378}
379
380.site-header::after {
381 content: "";
382 position: absolute;
383 inset: 0;
384 z-index: 0;
385 box-sizing: border-box;
386 border-radius: inherit;
387 border: 1px solid transparent;
388 background: transparent;
389 backdrop-filter: none;
390 -webkit-backdrop-filter: none;
391 opacity: 0;
392 pointer-events: none;
393 box-shadow: none;
394 /* No transition here — entrance is via @keyframes; exit is instant (glass snaps off at scroll≈0) */
395 transition: border-radius 0.55s var(--ease-reveal);
396 transform: translateZ(0);
397 -webkit-backface-visibility: hidden;
398 backface-visibility: hidden;
399}
400
401/* Full glass styles in scrolled state — opacity driven by the animation below */
402.site-header.site-header--scrolled::after {
403 opacity: 1;
404 border-color: transparent;
405 border-radius: inherit;
406 background: color-mix(in oklch, var(--color-canvas) 86%, transparent);
407 backdrop-filter: blur(18px) saturate(1.35);
408 -webkit-backdrop-filter: blur(18px) saturate(1.35);
409 box-shadow:
410 inset 0 0 0 1px var(--color-border),
411 0 14px 36px oklch(0% 0 0 / 0.07),
412 0 32px 72px oklch(0% 0 0 / 0.09);
413}
414
415/* Pill entrance: slide down + glass fade — both as keyframes so they fire despite the position change */
416@keyframes nav-glass-in {
417 from { opacity: 0; }
418 to { opacity: 1; }
419}
420
421@keyframes nav-pill-in {
422 from { transform: translateY(-10px); }
423 to { transform: translateY(0); }
424}
425
426@media (prefers-reduced-motion: no-preference) {
427 .site-header.site-header--scrolled::after {
428 animation: nav-glass-in 0.42s var(--ease-reveal) both;
429 }
430
431 html.site-nav-floated::before {
432 animation: nav-glass-in 0.42s var(--ease-reveal) both;
433 }
434
435 .hero-shell > .site-header.site-header--scrolled {
436 animation: nav-pill-in 0.45s var(--ease-reveal) both;
437 }
438}
439
440/* Full-bleed top veil: must live on html (not the pill) so width isn’t clipped and transform doesn’t trap position:fixed */
441html.site-nav-floated::before {
442 content: "";
443 position: fixed;
444 top: 0;
445 left: 0;
446 right: 0;
447 width: 100%;
448 height: calc(
449 env(safe-area-inset-top, 0px) + var(--space-sm) + var(--nav-top-fade-reach) + var(--nav-veil-pill-overlap)
450 );
451 z-index: 55;
452 pointer-events: none;
453 background: linear-gradient(
454 to bottom,
455 color-mix(in oklch, var(--color-canvas) 100%, transparent) 0%,
456 color-mix(in oklch, var(--color-canvas) 96%, transparent) 10%,
457 color-mix(in oklch, var(--color-canvas) 82%, transparent) 26%,
458 color-mix(in oklch, var(--color-canvas) 52%, transparent) 48%,
459 color-mix(in oklch, var(--color-canvas) 22%, transparent) 70%,
460 color-mix(in oklch, var(--color-canvas) 6%, transparent) 88%,
461 transparent 100%
462 );
463}
464
465.hero-shell > .site-header.site-header--scrolled {
466 position: fixed;
467 top: var(--space-sm);
468 left: calc(var(--space-2xs) + env(safe-area-inset-left, 0px));
469 right: calc(var(--space-2xs) + env(safe-area-inset-right, 0px));
470 z-index: 60;
471 width: auto;
472 max-width: var(--nav-float-max);
473 margin-inline: auto;
474 border-radius: var(--radius-nav-float);
475 border-color: transparent;
476 box-shadow: none;
477 overflow: clip;
478 will-change: transform;
479}
480
481.site-header .wrap {
482 position: relative;
483 z-index: 2;
484}
485
486.site-header__inner {
487 display: flex;
488 align-items: center;
489 justify-content: space-between;
490 gap: var(--space-md);
491 padding-block: var(--space-sm);
492}
493
494.hero-shell > .site-header.site-header--scrolled .site-header__inner {
495 padding-inline: clamp(var(--space-sm), 2.5vw, var(--space-lg));
496}
497
498.site-header__actions {
499 display: flex;
500 flex-wrap: wrap;
501 align-items: center;
502 justify-content: flex-end;
503 gap: var(--space-sm) var(--space-md);
504}
505
506.btn--sm {
507 padding: 0.45rem 0.9rem;
508 font-size: 0.8125rem;
509}
510
511.nav-install {
512 flex-shrink: 0;
513}
514
515.brand-lockup {
516 display: inline-flex;
517 align-items: center;
518 gap: var(--space-xs);
519 text-decoration: none;
520 color: inherit;
521 font-family: var(--font-display);
522 font-weight: 700;
523 font-size: 1.125rem;
524 letter-spacing: var(--tracking-display);
525 transition: transform 0.22s var(--ease-out), color 0.18s var(--ease-out);
526}
527
528.brand-lockup:hover {
529 color: var(--color-ink);
530 transform: translateY(-1px);
531}
532
533.brand-lockup:focus-visible {
534 outline: var(--focus-ring);
535 outline-offset: var(--focus-offset);
536 border-radius: var(--radius-sm);
537}
538
539/* Summarizer mark (no wordmark in asset) + “Lede” set in markup */
540.brand-lockup__mark {
541 width: auto;
542 height: 1.5rem;
543 max-height: 1.65rem;
544 flex-shrink: 0;
545 display: block;
546 transform-origin: 55% 60%;
547}
548
549@media (prefers-reduced-motion: no-preference) {
550 .brand-lockup__mark {
551 transition: transform 0.28s var(--ease-out);
552 }
553
554 .brand-lockup:hover .brand-lockup__mark {
555 transform: rotate(-5deg) scale(1.04);
556 }
557}
558
559.nav {
560 display: flex;
561 flex-wrap: wrap;
562 gap: var(--space-sm) var(--space-md);
563 list-style: none;
564 margin: 0;
565 padding: 0;
566}
567
568.nav a {
569 font-family: var(--font-display);
570 font-weight: 600;
571 font-size: 0.8125rem;
572 text-decoration: none;
573 color: var(--color-ink-secondary);
574 transition:
575 color 0.18s var(--ease-out),
576 transform 0.22s var(--ease-out);
577}
578
579.nav a:hover {
580 color: var(--color-brand);
581 transform: translateY(-1px);
582}
583
584.firefox-note {
585 margin-top: var(--space-md);
586 font-size: var(--text-sm);
587 color: var(--color-ink-secondary);
588 max-width: 65ch;
589}
590
591.disclosure {
592 margin-top: clamp(var(--space-lg), 3vw, var(--space-xl));
593 border: 1px solid var(--color-border);
594 border-radius: var(--radius-md);
595 background: var(--color-canvas);
596 overflow: hidden;
597}
598
599.disclosure summary {
600 cursor: pointer;
601 list-style: none;
602 padding: var(--space-md) var(--space-lg);
603 font-family: var(--font-display);
604 font-weight: 600;
605 font-size: var(--text-sm);
606 color: var(--color-ink);
607 display: flex;
608 align-items: center;
609 justify-content: space-between;
610 gap: var(--space-sm);
611 transition: background-color 0.22s var(--ease-out), color 0.18s var(--ease-out);
612}
613
614.disclosure summary:hover {
615 background: color-mix(in oklch, var(--color-subtle) 55%, var(--color-canvas));
616}
617
618.disclosure summary:focus-visible {
619 outline: var(--focus-ring);
620 outline-offset: var(--focus-offset);
621 border-radius: var(--radius-sm);
622}
623
624.disclosure summary:active {
625 background: color-mix(in oklch, var(--color-subtle) 72%, var(--color-canvas));
626}
627
628.disclosure summary::-webkit-details-marker {
629 display: none;
630}
631
632.disclosure summary::after {
633 content: "+";
634 flex-shrink: 0;
635 font-weight: 700;
636 color: var(--color-brand);
637 font-size: 1.1rem;
638 line-height: 1;
639 transition: transform var(--duration-disclosure) var(--ease-out-disclosure);
640 transform: rotate(0deg);
641}
642
643.disclosure[open] summary::after {
644 transform: rotate(45deg);
645}
646
647.disclosure.disclosure--animate > .disclosure__collapse {
648 display: block;
649 max-height: 0;
650 overflow: hidden;
651 transition: max-height var(--duration-disclosure) var(--ease-out-disclosure);
652}
653
654.disclosure.disclosure--animate[open] > .disclosure__collapse {
655 max-height: var(--disclosure-collapse-max);
656}
657
658.disclosure.disclosure--animate .disclosure__collapse-sheet {
659 overflow: visible;
660}
661
662.disclosure__body {
663 padding: 0 var(--space-lg) var(--space-md);
664 font-size: var(--text-sm);
665 color: var(--color-ink-secondary);
666 line-height: var(--leading-prose);
667 border-top: 1px solid var(--color-border);
668}
669
670.disclosure__body p {
671 margin: var(--space-sm) 0 0;
672}
673
674.disclosure__body p:first-child {
675 margin-top: var(--space-sm);
676}
677
678.beta-tag {
679 font-family: var(--font-display);
680 font-weight: 700;
681 font-size: 0.75rem;
682 letter-spacing: var(--tracking-label);
683 text-transform: uppercase;
684 color: var(--color-brand);
685}
686
687/* ——— Buttons ——— */
688.actions {
689 display: flex;
690 flex-wrap: wrap;
691 gap: var(--space-sm);
692 margin-top: clamp(var(--space-md), 2vw, var(--space-lg));
693}
694
695.btn {
696 display: inline-flex;
697 align-items: center;
698 justify-content: center;
699 gap: var(--space-2xs);
700 font-family: var(--font-display);
701 font-weight: 600;
702 font-size: 0.9375rem;
703 line-height: 1.2;
704 padding: 0.65rem 1.15rem;
705 border-radius: var(--radius-md);
706 border: 1px solid transparent;
707 cursor: pointer;
708 text-decoration: none;
709 transition:
710 background-color 0.14s var(--ease-out),
711 color 0.14s var(--ease-out),
712 border-color 0.14s var(--ease-out),
713 transform 0.14s var(--ease-out);
714}
715
716.btn:focus-visible {
717 outline: var(--focus-ring);
718 outline-offset: var(--focus-offset);
719}
720
721.btn--primary {
722 color: var(--color-on-brand);
723 background: var(--color-brand);
724 border-color: color-mix(in oklch, var(--color-brand) 78%, var(--color-ink));
725 box-shadow:
726 0 1px 0 color-mix(in oklch, var(--color-on-brand) 22%, transparent),
727 0 3px 0 color-mix(in oklch, var(--color-brand-active) 55%, var(--color-ink));
728}
729
730.btn--primary:hover {
731 background: var(--color-brand-hover);
732 border-color: var(--color-brand-hover);
733 color: var(--color-on-brand);
734 transform: translateY(-2px);
735 box-shadow:
736 0 1px 0 color-mix(in oklch, var(--color-on-brand) 28%, transparent),
737 0 5px 0 color-mix(in oklch, var(--color-brand-active) 45%, var(--color-ink)),
738 0 14px 28px color-mix(in oklch, var(--color-brand) 22%, transparent);
739}
740
741.btn--primary:active {
742 background: var(--color-brand-active);
743 border-color: var(--color-brand-active);
744 color: var(--color-on-brand);
745 transform: translateY(1px);
746 box-shadow: 0 1px 0 color-mix(in oklch, var(--color-on-brand) 15%, transparent);
747}
748
749.btn--secondary {
750 color: var(--color-ink-secondary);
751 background: transparent;
752 border-color: var(--color-border);
753}
754
755.btn--secondary:hover {
756 background: var(--color-subtle);
757 border-color: var(--color-border-hover);
758 transform: translateY(-1px);
759}
760
761.btn--secondary:active {
762 transform: translateY(1px);
763}
764
765/* ——— Sections ——— */
766.section {
767 padding-block: var(--section-y);
768}
769
770.section--tight-top {
771 padding-top: var(--section-y-tight);
772 padding-bottom: clamp(var(--space-lg), 3.5vw, var(--space-2xl));
773}
774
775.section--faq {
776 padding-bottom: clamp(3.25rem, 6vw, 5rem);
777}
778
779.section__head {
780 margin-bottom: clamp(var(--space-lg), 2.8vw, var(--space-xl));
781 max-width: 65ch;
782}
783
784/* Privacy dark band */
785.section--dark {
786 background-color: var(--color-dark-canvas);
787 /* Light mode: gentle brand glow on apricot base */
788 background-image:
789 radial-gradient(ellipse 125% 72% at 100% 0%, color-mix(in oklch, var(--color-brand) 13%, transparent) 0%, transparent 56%),
790 radial-gradient(ellipse 100% 58% at 0% 100%, oklch(70% 0.06 38 / 0.09), transparent 52%);
791 color: var(--color-dark-ink);
792 padding-block: calc(var(--space-3xl) + var(--space-md));
793 border-block: 1px solid var(--color-dark-border);
794}
795
796.section--dark .eyebrow {
797 color: color-mix(in oklch, var(--color-brand) 34%, var(--color-ink-muted));
798}
799
800.section--dark .heading-xl {
801 color: var(--color-dark-ink);
802}
803
804.section--dark .heading-md {
805 color: var(--color-dark-ink);
806}
807
808.section--dark h4.heading-md {
809 font-size: var(--text-sm);
810 font-weight: 700;
811 letter-spacing: -0.01em;
812 color: color-mix(in oklch, var(--color-dark-ink) 92%, var(--color-dark-ink-secondary));
813}
814
815.section--dark .prose {
816 color: var(--color-dark-ink-secondary);
817 line-height: var(--leading-prose-dark);
818}
819
820.section--dark a {
821 color: color-mix(in oklch, var(--color-dark-ink) 88%, var(--color-brand));
822}
823
824.section--dark a:hover {
825 color: color-mix(in oklch, var(--color-dark-ink) 70%, var(--color-brand));
826}
827
828@media (prefers-color-scheme: dark) {
829 .section--dark {
830 background-image:
831 radial-gradient(ellipse 120% 70% at 100% 0%, oklch(38% 0.06 48 / 0.4), transparent 52%),
832 radial-gradient(ellipse 90% 55% at 0% 100%, oklch(32% 0.07 38 / 0.35), transparent 48%);
833 }
834
835 .section--dark .eyebrow {
836 color: oklch(76% 0.055 55);
837 }
838}
839
840.split {
841 display: grid;
842 gap: var(--space-xl);
843}
844
845@media (min-width: 800px) {
846 .split {
847 grid-template-columns: 1fr 1fr;
848 gap: var(--space-2xl);
849 }
850}
851
852.split h3,
853.split h4 {
854 margin-top: 0;
855}
856
857/* Install callout — container query */
858.install-wrap {
859 container-type: inline-size;
860 container-name: install;
861}
862
863.install-panel {
864 margin-top: var(--space-xl);
865 padding: var(--space-xl);
866 background: var(--color-surface);
867 border: 1px solid var(--color-border);
868 border-radius: var(--radius-md);
869 display: grid;
870 gap: var(--space-lg);
871}
872
873@container install (min-width: 560px) {
874 .install-panel {
875 grid-template-columns: 1fr 1fr;
876 align-items: start;
877 }
878}
879
880.install-panel h3 {
881 margin: 0 0 var(--space-xs);
882}
883
884.install-panel ol {
885 margin: 0;
886 padding-left: 1.1em;
887 color: var(--color-ink-secondary);
888 font-size: var(--text-sm);
889 line-height: var(--leading-prose);
890 display: flex;
891 flex-direction: column;
892 gap: var(--space-sm);
893}
894
895/* Footer */
896.site-footer {
897 padding-block: clamp(var(--space-lg), 3vw, var(--space-xl));
898 border-top: 1px solid var(--color-border);
899 margin-top: clamp(var(--space-2xl), 5vw, var(--space-3xl));
900}
901
902.footer-inner {
903 display: flex;
904 flex-wrap: wrap;
905 align-items: baseline;
906 justify-content: space-between;
907 gap: var(--space-md) var(--space-xl);
908 font-size: var(--text-sm);
909 color: var(--color-ink-secondary);
910}
911
912.footer-brand-block {
913 display: flex;
914 flex-direction: column;
915 align-items: flex-start;
916 gap: var(--space-xs);
917 min-width: min(100%, 16rem);
918}
919
920.footer-brand-block .brand-lockup {
921 color: var(--color-ink);
922}
923
924.footer-whisper {
925 margin: 0;
926 max-width: 22rem;
927 font-size: 0.8125rem;
928 line-height: var(--leading-ui);
929 color: var(--color-ink-muted);
930 letter-spacing: -0.01em;
931}
932
933/* ——— Motion: staggered reveal (first load — opacity + transform, smooth ease-out) ——— */
934.reveal-group {
935 --stagger: 0.09s;
936}
937
938.reveal-item {
939 animation: reveal-in var(--duration-enter) var(--ease-reveal) both;
940 animation-delay: calc(var(--i, 0) * var(--stagger));
941}
942
943@keyframes reveal-in {
944 from {
945 opacity: 0;
946 transform: translateY(1.125rem);
947 }
948
949 to {
950 opacity: 1;
951 transform: translateY(0);
952 }
953}
954
955@media (prefers-reduced-motion: reduce) {
956 .reveal-item {
957 animation: none !important;
958 opacity: 1 !important;
959 transform: none !important;
960 }
961
962 .reveal-scroll {
963 opacity: 1 !important;
964 transform: none !important;
965 animation: none !important;
966 }
967
968 .disclosure.disclosure--animate > .disclosure__collapse,
969 .faq-disclosure.faq-disclosure--animate > .faq-disclosure__collapse {
970 transition-duration: 0.01ms;
971 }
972
973 .disclosure summary::after,
974 .faq-disclosure summary::after {
975 transition-duration: 0.01ms;
976 }
977
978 .install-timeline__link,
979 .install-snippet-copy,
980 .editorial-block,
981 .nav a,
982 .footer-links a,
983 .brand-lockup,
984 .hero-highlights li,
985 .site-header,
986 .site-header::after,
987 html.site-nav-floated::before {
988 transition: none;
989 animation: none !important;
990 }
991
992 .editorial-block:hover,
993 .nav a:hover,
994 .footer-links a:hover,
995 .brand-lockup:hover,
996 .install-timeline__link:hover {
997 transform: none;
998 }
999
1000 .brand-lockup:hover .brand-lockup__mark {
1001 transform: none;
1002 }
1003
1004 .hero-highlights li:hover .hero-highlights__icon svg {
1005 transform: none;
1006 }
1007
1008 .install-snippet-copy__icon {
1009 transition: opacity 0.01ms;
1010 }
1011}
1012
1013/* ========= Redesign: masthead hero + proof, install journey, editorial ========= */
1014
1015.site-header__tagline {
1016 display: none;
1017 margin: 0;
1018 padding-bottom: var(--space-xs);
1019 font-size: var(--text-xs);
1020 font-family: var(--font-display);
1021 font-weight: 600;
1022 letter-spacing: var(--tracking-label);
1023 text-transform: uppercase;
1024 color: var(--color-ink-muted);
1025 border-top: 1px solid color-mix(in oklch, var(--color-border) 70%, transparent);
1026 padding-top: var(--space-2xs);
1027}
1028
1029@media (min-width: 900px) {
1030 .site-header__tagline {
1031 display: block;
1032 }
1033}
1034
1035.deck {
1036 font-family: var(--font-display);
1037 font-size: clamp(1.2rem, 1.85vw + 0.7rem, 1.6rem);
1038 font-weight: 600;
1039 line-height: var(--leading-ui);
1040 letter-spacing: -0.018em;
1041 color: var(--color-ink);
1042 max-width: 28em;
1043 margin: 0 0 var(--space-sm);
1044}
1045
1046/* Hero: light wit — journalism-flavored, not gimmicky */
1047.hero-whisper {
1048 margin: 0;
1049 font-family: var(--font-body);
1050 font-size: clamp(0.9375rem, 0.35vw + 0.88rem, 1.0625rem);
1051 font-weight: 500;
1052 line-height: var(--leading-ui);
1053 color: color-mix(in oklch, var(--color-brand) 28%, var(--color-ink-muted));
1054 letter-spacing: -0.01em;
1055}
1056
1057.lede--tight {
1058 max-width: 32em;
1059 font-size: var(--text-sm);
1060}
1061
1062.hero-mast {
1063 position: relative;
1064 isolation: isolate;
1065 /* Breathing room under the header without pushing the headline down the tall demo column */
1066 padding-top: clamp(var(--space-md), 2.25vw + 0.65rem, var(--space-xl));
1067 padding-bottom: var(--section-y-hero-tail);
1068 border-bottom: 1px solid var(--color-border);
1069 background:
1070 radial-gradient(ellipse 85% 65% at 0% 0%, var(--color-brand-soft), transparent 58%),
1071 linear-gradient(
1072 168deg,
1073 color-mix(in oklch, var(--color-surface) 55%, var(--color-canvas)) 0%,
1074 var(--color-canvas) 42%,
1075 color-mix(in oklch, var(--color-subtle) 88%, var(--color-canvas)) 100%
1076 );
1077}
1078
1079/* Nav overlays the mast paint; reserve vertical space for the sticky header strip */
1080.hero-shell > .hero-mast {
1081 padding-top: calc(3.5rem + clamp(var(--space-md), 2.25vw + 0.65rem, var(--space-xl)));
1082}
1083
1084.hero-mast .eyebrow {
1085 color: color-mix(in oklch, var(--color-brand) 42%, var(--color-ink-muted));
1086}
1087
1088.hero-mast__copy {
1089 display: flex;
1090 flex-direction: column;
1091 align-items: flex-start;
1092 gap: clamp(var(--space-xs), 1.5vw, var(--space-sm));
1093}
1094
1095.hero-mast__copy .display-hero,
1096.hero-mast__copy .deck,
1097.hero-mast__copy .lede,
1098.hero-mast__copy .hero-whisper {
1099 margin: 0;
1100}
1101
1102.hero-mast__copy .actions {
1103 margin-top: clamp(var(--space-sm), 1.5vw, var(--space-md));
1104}
1105
1106.hero-mast__copy .hero-highlights + .actions {
1107 margin-top: clamp(var(--space-xs), 1.2vw, var(--space-sm));
1108}
1109
1110.hero-highlights {
1111 list-style: none;
1112 margin: 0;
1113 padding: 0;
1114 display: flex;
1115 flex-direction: column;
1116 gap: var(--space-2xs);
1117 max-width: min(22rem, 100%);
1118}
1119
1120.hero-highlights li {
1121 display: grid;
1122 grid-template-columns: 1.375rem 1fr;
1123 gap: var(--space-sm);
1124 align-items: center;
1125 font-family: var(--font-display);
1126 font-size: var(--text-sm);
1127 font-weight: 600;
1128 letter-spacing: -0.012em;
1129 line-height: var(--leading-ui);
1130 color: var(--color-ink-secondary);
1131 border-radius: var(--radius-sm);
1132 margin-inline: calc(var(--space-2xs) * -1);
1133 padding: var(--space-3xs) var(--space-2xs);
1134 transition: color 0.22s var(--ease-out), background-color 0.22s var(--ease-out);
1135}
1136
1137.hero-highlights li:hover {
1138 color: var(--color-ink);
1139 background: color-mix(in oklch, var(--color-brand-soft) 55%, transparent);
1140}
1141
1142.hero-highlights__icon {
1143 display: flex;
1144 align-items: center;
1145 justify-content: center;
1146 width: 1.375rem;
1147 height: 1.375rem;
1148 flex-shrink: 0;
1149 color: color-mix(in oklch, var(--color-brand) 58%, var(--color-ink-muted));
1150}
1151
1152.hero-highlights__icon svg {
1153 display: block;
1154 width: 1.125rem;
1155 height: 1.125rem;
1156}
1157
1158@media (prefers-reduced-motion: no-preference) {
1159 .hero-highlights__icon svg {
1160 transition: transform 0.26s var(--ease-out);
1161 }
1162
1163 .hero-highlights li:hover .hero-highlights__icon svg {
1164 transform: scale(1.07) rotate(-6deg);
1165 }
1166}
1167
1168.hero-mast__copy > p:not(.eyebrow):not(.deck):not(.lede):not(.hero-whisper) {
1169 margin: 0;
1170}
1171
1172.hero-mast__grid {
1173 display: grid;
1174 gap: var(--space-xl);
1175 align-items: stretch;
1176}
1177
1178@media (min-width: 960px) {
1179 .hero-mast__grid {
1180 grid-template-columns: minmax(0, 1.02fr) minmax(320px, 1.12fr);
1181 gap: clamp(var(--space-2xl), 4vw, var(--space-3xl));
1182 /* Top-align copy with the demo — centering pushed the splash block halfway down the tall iframe */
1183 align-items: start;
1184 }
1185}
1186
1187.hero-proof {
1188 margin: 0;
1189 display: flex;
1190 flex-direction: column;
1191 align-items: center;
1192 gap: 0;
1193}
1194
1195/* One composed column: embedded demo frame */
1196.hero-proof__column {
1197 display: flex;
1198 flex-direction: column;
1199 align-items: stretch;
1200 width: fit-content;
1201 max-width: 100%;
1202 margin-inline: auto;
1203 gap: var(--space-xs);
1204}
1205
1206.hero-proof__demo-wrap {
1207 width: 100%;
1208 max-width: 100%;
1209}
1210
1211.hero-proof__frame {
1212 border-radius: var(--radius-md);
1213 border: 1px solid var(--color-border);
1214 background: var(--color-surface);
1215 overflow: hidden;
1216 box-shadow: 0 1px 0 var(--shadow-card-edge), 0 18px 48px var(--shadow-card-soft);
1217}
1218
1219.hero-proof__frame img {
1220 width: 100%;
1221 height: auto;
1222 display: block;
1223}
1224
1225/* Demo: one surface only — no outer “device frame”; shadow reads like a browser popup. */
1226.hero-proof__frame--demo {
1227 padding: 0;
1228 display: flex;
1229 justify-content: center;
1230 align-items: flex-start;
1231 background: transparent;
1232 border: none;
1233 border-radius: 0;
1234 box-shadow: none;
1235 overflow: visible;
1236 animation: none;
1237}
1238
1239.extension-demo {
1240 display: block;
1241 width: 400px;
1242 max-width: 100%;
1243 height: 560px;
1244 margin: 0 auto;
1245 border: 0;
1246 border-radius: 12px;
1247 color-scheme: light dark;
1248 box-shadow: var(--shadow-popup);
1249}
1250
1251/* Hero: softer elevation on the embedded demo */
1252.hero-proof .extension-demo {
1253 box-shadow:
1254 0 0 0 1px color-mix(in oklch, var(--color-brand) 14%, oklch(0% 0 0 / 0.05)),
1255 0 4px 12px oklch(0% 0 0 / 0.05),
1256 0 12px 28px oklch(0% 0 0 / 0.07);
1257}
1258
1259@media (max-width: 440px) {
1260 .hero-proof__frame--demo {
1261 justify-content: flex-start;
1262 overflow-x: auto;
1263 overflow-y: visible;
1264 }
1265
1266 .extension-demo {
1267 max-width: none;
1268 }
1269}
1270
1271@media (prefers-reduced-motion: no-preference) {
1272 .hero-proof__frame:not(.hero-proof__frame--demo) {
1273 animation: hero-frame-in 0.95s var(--ease-reveal) both;
1274 animation-delay: 0.14s;
1275 }
1276
1277 @keyframes hero-frame-in {
1278 from {
1279 opacity: 0;
1280 transform: translateY(1.125rem) scale(0.988);
1281 }
1282 to {
1283 opacity: 1;
1284 transform: translateY(0) scale(1);
1285 }
1286 }
1287}
1288
1289@media (prefers-reduced-motion: reduce) {
1290 .hero-proof__frame:not(.hero-proof__frame--demo) {
1291 animation: none;
1292 }
1293}
1294
1295.section--install {
1296 position: relative;
1297 isolation: isolate;
1298 padding-top: clamp(var(--space-2xl), 5vw, var(--space-3xl));
1299 padding-bottom: var(--section-y-room);
1300 background:
1301 radial-gradient(ellipse 70% 55% at 100% 12%, var(--color-brand-soft), transparent 52%),
1302 radial-gradient(ellipse 55% 45% at 0% 88%, color-mix(in oklch, var(--color-subtle) 65%, var(--color-canvas)), transparent 50%),
1303 var(--color-canvas);
1304 border-top: 1px solid color-mix(in oklch, var(--color-border) 80%, transparent);
1305}
1306
1307#install-browser-details {
1308 scroll-margin-top: clamp(4.5rem, 12vh, 7rem);
1309}
1310
1311.section__head--install {
1312 margin-bottom: clamp(var(--space-md), 2vw, var(--space-lg));
1313}
1314
1315.install-deck {
1316 margin: clamp(var(--space-xs), 1.5vw, var(--space-sm)) 0 0;
1317 max-width: 38rem;
1318 font-family: var(--font-display);
1319 font-size: clamp(0.9375rem, 0.35vw + 0.86rem, 1.0625rem);
1320 font-weight: 600;
1321 line-height: var(--leading-ui);
1322 letter-spacing: -0.015em;
1323 color: color-mix(in oklch, var(--color-ink-secondary) 55%, var(--color-ink));
1324}
1325
1326/* Install: rail + markers (no heavy side stripe on the list) */
1327.install-timeline {
1328 list-style: none;
1329 margin: 0 0 clamp(var(--space-xl), 4vw, var(--space-2xl));
1330 padding: 0;
1331 display: flex;
1332 flex-direction: column;
1333 gap: clamp(var(--space-lg), 3vw, var(--space-xl));
1334}
1335
1336.install-timeline__step {
1337 display: grid;
1338 grid-template-columns: clamp(2.5rem, 4.2vw, 3.15rem) minmax(0, 1fr);
1339 column-gap: clamp(var(--space-md), 2.5vw, var(--space-lg));
1340 align-items: stretch;
1341}
1342
1343.install-timeline__rail {
1344 display: flex;
1345 flex-direction: column;
1346 align-items: center;
1347 padding-top: 0.2rem;
1348 min-width: 0;
1349}
1350
1351.install-timeline__marker {
1352 display: grid;
1353 place-items: center;
1354 width: 2.35rem;
1355 height: 2.35rem;
1356 border-radius: 50%;
1357 flex-shrink: 0;
1358 font-family: var(--font-display);
1359 font-weight: 700;
1360 font-size: 0.9375rem;
1361 letter-spacing: -0.04em;
1362 line-height: 1;
1363 color: var(--color-on-brand);
1364 background: var(--color-brand);
1365 box-shadow:
1366 0 0 0 2px color-mix(in oklch, var(--color-canvas) 88%, var(--color-brand)),
1367 0 6px 18px color-mix(in oklch, var(--color-brand) 22%, transparent);
1368}
1369
1370.install-timeline__step:not(:last-child) .install-timeline__rail::after {
1371 content: "";
1372 flex: 1 1 auto;
1373 width: 1px;
1374 margin-top: var(--space-xs);
1375 min-height: clamp(1.25rem, 3vw, 2rem);
1376 background: linear-gradient(
1377 180deg,
1378 color-mix(in oklch, var(--color-brand) 42%, var(--color-border)) 0%,
1379 color-mix(in oklch, var(--color-brand) 8%, var(--color-border)) 100%
1380 );
1381}
1382
1383.install-timeline__content {
1384 display: flex;
1385 flex-direction: column;
1386 gap: var(--space-sm);
1387 max-width: 72ch;
1388 min-width: 0;
1389 padding-bottom: var(--space-2xs);
1390}
1391
1392.install-timeline__kicker {
1393 margin: 0;
1394 font-family: var(--font-display);
1395 font-size: var(--text-xs);
1396 font-weight: 700;
1397 letter-spacing: var(--tracking-label);
1398 text-transform: uppercase;
1399 color: color-mix(in oklch, var(--color-brand) 38%, var(--color-ink-muted));
1400}
1401
1402.install-timeline__title {
1403 margin: calc(var(--space-3xs) * -1) 0 0;
1404 font-family: var(--font-display);
1405 font-weight: 600;
1406 font-size: var(--text-md);
1407 letter-spacing: -0.02em;
1408 line-height: var(--leading-tight);
1409 color: var(--color-ink);
1410}
1411
1412.install-timeline__body {
1413 margin: 0;
1414 font-size: var(--text-sm);
1415 color: var(--color-ink-secondary);
1416 line-height: var(--leading-prose);
1417}
1418
1419.install-timeline__body--compact {
1420 line-height: var(--leading-ui);
1421}
1422
1423.install-timeline__body--muted {
1424 color: var(--color-ink-muted);
1425 font-size: 0.8125rem;
1426}
1427
1428.install-timeline__body code {
1429 padding: 0.12em 0.32em;
1430 border-radius: 4px;
1431 font-size: 0.92em;
1432 font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
1433 background: color-mix(in oklch, var(--color-ink) 6%, var(--color-surface));
1434 border: 1px solid color-mix(in oklch, var(--color-border) 88%, var(--color-ink));
1435 color: var(--color-ink);
1436}
1437
1438.install-snippet-wrap {
1439 position: relative;
1440 max-width: 100%;
1441}
1442
1443.install-snippet-wrap .install-timeline__snippet {
1444 padding-block: var(--space-md);
1445 padding-inline: var(--space-md) clamp(2.65rem, 10vw, 3.25rem);
1446}
1447
1448.install-snippet-live {
1449 position: absolute;
1450 width: 1px;
1451 height: 1px;
1452 padding: 0;
1453 margin: -1px;
1454 overflow: hidden;
1455 clip: rect(0, 0, 0, 0);
1456 white-space: nowrap;
1457 border: 0;
1458}
1459
1460.install-snippet-copy {
1461 position: absolute;
1462 top: var(--space-xs);
1463 right: var(--space-xs);
1464 z-index: 2;
1465 display: grid;
1466 place-items: center;
1467 width: 2.125rem;
1468 height: 2.125rem;
1469 margin: 0;
1470 padding: 0;
1471 color: color-mix(in oklch, var(--color-ink-muted) 88%, var(--color-ink));
1472 background: color-mix(in oklch, var(--color-surface) 92%, transparent);
1473 border: 1px solid color-mix(in oklch, var(--color-border) 72%, transparent);
1474 border-radius: var(--radius-sm);
1475 cursor: pointer;
1476 box-shadow: 0 1px 2px oklch(0% 0 0 / 0.04);
1477 opacity: 0;
1478 pointer-events: none;
1479 transition:
1480 opacity 0.22s var(--ease-out),
1481 color 0.18s var(--ease-out),
1482 background-color 0.18s var(--ease-out),
1483 border-color 0.18s var(--ease-out),
1484 box-shadow 0.18s var(--ease-out);
1485}
1486
1487.install-snippet-copy__icon {
1488 grid-area: 1 / 1;
1489 display: flex;
1490 align-items: center;
1491 justify-content: center;
1492 transition:
1493 opacity 0.2s var(--ease-out),
1494 transform 0.22s var(--ease-out),
1495 color 0.18s var(--ease-out);
1496}
1497
1498.install-snippet-copy__icon svg {
1499 display: block;
1500}
1501
1502.install-snippet-copy__icon--copy {
1503 transform: scale(1);
1504}
1505
1506.install-snippet-copy__icon--check {
1507 opacity: 0;
1508 transform: scale(0.88);
1509 color: var(--color-brand);
1510}
1511
1512.install-snippet-wrap.is-copied .install-snippet-copy__icon--copy {
1513 opacity: 0;
1514 transform: scale(0.88);
1515}
1516
1517.install-snippet-wrap.is-copied .install-snippet-copy__icon--check {
1518 opacity: 1;
1519 transform: scale(1);
1520}
1521
1522@media (hover: hover) and (pointer: fine) {
1523 .install-snippet-wrap:is(:hover, :focus-within) .install-snippet-copy,
1524 .install-snippet-wrap.is-copied .install-snippet-copy {
1525 opacity: 1;
1526 pointer-events: auto;
1527 }
1528}
1529
1530@media (hover: none), (pointer: coarse) {
1531 .install-snippet-copy {
1532 opacity: 0.72;
1533 pointer-events: auto;
1534 }
1535
1536 .install-snippet-wrap:is(:hover, :focus-within) .install-snippet-copy,
1537 .install-snippet-wrap.is-copied .install-snippet-copy {
1538 opacity: 1;
1539 }
1540}
1541
1542.install-snippet-copy:hover {
1543 color: var(--color-ink);
1544 border-color: color-mix(in oklch, var(--color-brand) 32%, var(--color-border));
1545 background: color-mix(in oklch, var(--color-brand-soft) 38%, var(--color-surface));
1546 box-shadow: 0 2px 8px color-mix(in oklch, var(--color-brand) 7%, transparent);
1547}
1548
1549.install-snippet-copy:focus-visible {
1550 outline: var(--focus-ring);
1551 outline-offset: var(--focus-offset);
1552}
1553
1554.install-timeline__snippet {
1555 margin: 0;
1556 padding: var(--space-sm) var(--space-md);
1557 border-radius: var(--radius-md);
1558 background: color-mix(in oklch, var(--color-ink) 5.5%, var(--color-surface));
1559 border: 1px solid color-mix(in oklch, var(--color-border) 85%, var(--color-ink));
1560 font-size: 0.8125rem;
1561 line-height: 1.55;
1562 overflow-x: auto;
1563 -webkit-overflow-scrolling: touch;
1564 font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
1565}
1566
1567.install-timeline__snippet code {
1568 font-family: inherit;
1569 font-size: inherit;
1570 color: var(--color-ink);
1571 white-space: pre;
1572 word-break: normal;
1573}
1574
1575.install-browser-split {
1576 display: grid;
1577 gap: var(--space-md);
1578 margin-top: var(--space-2xs);
1579}
1580
1581@media (min-width: 640px) {
1582 .install-browser-split {
1583 grid-template-columns: 1fr 1fr;
1584 gap: var(--space-lg);
1585 align-items: start;
1586 }
1587}
1588
1589.install-browser-split__col {
1590 margin: 0;
1591 padding-top: var(--space-sm);
1592 border-top: 1px solid color-mix(in oklch, var(--color-brand) 18%, var(--color-border));
1593}
1594
1595.install-browser-split__tag {
1596 margin: 0 0 var(--space-2xs);
1597 font-family: var(--font-display);
1598 font-size: var(--text-xs);
1599 font-weight: 700;
1600 letter-spacing: var(--tracking-label);
1601 text-transform: uppercase;
1602 color: color-mix(in oklch, var(--color-brand) 48%, var(--color-ink-muted));
1603}
1604
1605.install-timeline__link {
1606 font-family: var(--font-display);
1607 font-weight: 600;
1608 font-size: 0.8125rem;
1609 align-self: flex-start;
1610 margin-top: var(--space-2xs);
1611 transition: color 0.18s var(--ease-out);
1612}
1613
1614.install-timeline__link:hover {
1615 color: color-mix(in oklch, var(--color-brand) 55%, var(--color-ink));
1616}
1617
1618.install-timeline__anchor {
1619 font-weight: 600;
1620 text-decoration: underline;
1621 text-underline-offset: 0.14em;
1622}
1623
1624.disclosure--install {
1625 background: color-mix(in oklch, var(--color-surface) 55%, var(--color-canvas));
1626 border-color: color-mix(in oklch, var(--color-brand) 14%, var(--color-border));
1627}
1628
1629.disclosure--install summary {
1630 font-size: var(--text-md);
1631 letter-spacing: -0.012em;
1632}
1633
1634.disclosure--install[open] {
1635 box-shadow: 0 12px 36px color-mix(in oklch, var(--color-brand) 6%, transparent);
1636}
1637
1638@media (prefers-color-scheme: dark) {
1639 .section--install {
1640 background:
1641 radial-gradient(ellipse 68% 52% at 100% 8%, color-mix(in oklch, var(--color-brand) 16%, transparent), transparent 54%),
1642 radial-gradient(ellipse 50% 42% at 0% 92%, color-mix(in oklch, var(--color-subtle) 45%, transparent), transparent 48%),
1643 var(--color-canvas);
1644 }
1645
1646 .install-timeline__marker {
1647 box-shadow:
1648 0 0 0 2px color-mix(in oklch, var(--color-canvas) 55%, var(--color-brand)),
1649 0 8px 22px oklch(0% 0 0 / 0.35);
1650 }
1651
1652 .install-snippet-copy {
1653 color: color-mix(in oklch, var(--color-ink-muted) 92%, var(--color-ink));
1654 background: color-mix(in oklch, var(--color-canvas) 78%, var(--color-subtle));
1655 border-color: color-mix(in oklch, var(--color-border) 80%, transparent);
1656 box-shadow: 0 1px 3px oklch(0% 0 0 / 0.35);
1657 }
1658
1659 .install-snippet-copy:hover {
1660 background: color-mix(in oklch, var(--color-brand-soft) 28%, var(--color-subtle));
1661 box-shadow: 0 2px 12px oklch(0% 0 0 / 0.42);
1662 }
1663
1664 .disclosure--install[open] {
1665 box-shadow: 0 14px 40px oklch(0% 0 0 / 0.38);
1666 }
1667}
1668
1669.section--editorial {
1670 padding-block: clamp(var(--space-2xl), 5vw, var(--space-3xl)) var(--section-y-room);
1671}
1672
1673.section--editorial .section__head {
1674 margin-bottom: clamp(var(--space-xl), 3.5vw, var(--space-2xl));
1675}
1676
1677.editorial-grid {
1678 display: grid;
1679 gap: clamp(var(--space-lg), 3vw, var(--space-xl));
1680}
1681
1682@media (min-width: 800px) {
1683 .editorial-grid {
1684 grid-template-columns: 1.18fr 0.92fr 0.92fr;
1685 gap: clamp(var(--space-lg), 3vw, var(--space-xl));
1686 align-items: start;
1687 }
1688}
1689
1690.editorial-block {
1691 padding-top: var(--space-lg);
1692 border-top: 3px solid color-mix(in oklch, var(--color-brand) 52%, var(--color-border));
1693 transition: border-color 0.24s var(--ease-out), transform 0.26s var(--ease-out);
1694}
1695
1696.editorial-block:hover {
1697 border-top-color: color-mix(in oklch, var(--color-brand) 72%, var(--color-border));
1698 transform: translateY(-2px);
1699}
1700
1701.editorial-block p {
1702 margin: var(--space-sm) 0 0;
1703 font-size: clamp(0.9375rem, 0.35vw + 0.88rem, 1.0625rem);
1704 line-height: var(--leading-prose);
1705 color: var(--color-ink-secondary);
1706}
1707
1708@media (min-width: 800px) {
1709 .editorial-block:first-child .heading-md {
1710 font-size: clamp(1.2rem, 0.9vw + 1rem, 1.45rem);
1711 }
1712}
1713
1714.usage-flow {
1715 list-style: none;
1716 margin: 0;
1717 padding: 0;
1718 display: flex;
1719 flex-direction: column;
1720 gap: 0;
1721}
1722
1723.usage-flow li {
1724 display: grid;
1725 grid-template-columns: auto 1fr;
1726 gap: clamp(var(--space-md), 2vw, var(--space-lg));
1727 padding-block: clamp(var(--space-md), 2.5vw, var(--space-xl));
1728 padding-inline: 0;
1729 border-top: 1px solid var(--color-border);
1730 border-radius: var(--radius-md);
1731 transition: background-color 0.22s var(--ease-out);
1732}
1733
1734.usage-flow li:hover {
1735 background: color-mix(in oklch, var(--color-subtle) 45%, var(--color-canvas));
1736}
1737
1738.usage-flow li:last-child {
1739 border-bottom: 1px solid var(--color-border);
1740}
1741
1742.usage-flow__label {
1743 font-family: var(--font-display);
1744 font-weight: 700;
1745 font-size: var(--text-sm);
1746 color: var(--color-brand);
1747 letter-spacing: 0.04em;
1748}
1749
1750.usage-flow p {
1751 margin: var(--space-2xs) 0 0;
1752 font-size: var(--text-sm);
1753 color: var(--color-ink-secondary);
1754 line-height: var(--leading-prose);
1755}
1756
1757.usage-afterword {
1758 margin: clamp(var(--space-lg), 3vw, var(--space-xl)) 0 0;
1759 max-width: 62ch;
1760 font-size: var(--text-sm);
1761 line-height: var(--leading-prose);
1762 color: var(--color-ink-secondary);
1763}
1764
1765.section__head--privacy {
1766 margin-bottom: clamp(var(--space-md), 2vw, var(--space-lg));
1767}
1768
1769.privacy-stack {
1770 display: flex;
1771 flex-direction: column;
1772 gap: clamp(var(--space-xl), 4vw, var(--space-2xl));
1773 padding-top: clamp(var(--space-lg), 3vw, var(--space-xl));
1774 border-top: 1px solid color-mix(in oklch, var(--color-dark-border) 72%, transparent);
1775}
1776
1777.privacy-point {
1778 display: grid;
1779 grid-template-columns: auto minmax(0, 1fr);
1780 gap: clamp(var(--space-md), 2.5vw, var(--space-lg));
1781 align-items: start;
1782 padding: clamp(var(--space-xs), 1.5vw, var(--space-sm))
1783 clamp(var(--space-sm), 2vw, var(--space-md));
1784 margin-inline: calc(var(--space-sm) * -1);
1785 border-radius: var(--radius-md);
1786 transition: background-color 0.22s var(--ease-out);
1787}
1788
1789@media (prefers-reduced-motion: reduce) {
1790 .privacy-point {
1791 transition: none;
1792 }
1793}
1794
1795.privacy-point:hover {
1796 background-color: color-mix(in oklch, var(--color-dark-subtle) 38%, transparent);
1797}
1798
1799.privacy-point__step {
1800 font-family: var(--font-display);
1801 font-weight: 700;
1802 font-size: var(--text-sm);
1803 letter-spacing: 0.05em;
1804 line-height: 1.2;
1805 padding-top: 0.28rem;
1806 color: color-mix(in oklch, var(--color-brand) 58%, var(--color-dark-ink-secondary));
1807}
1808
1809.privacy-point__body {
1810 min-width: 0;
1811}
1812
1813.privacy-point__body > .heading-md {
1814 margin-bottom: var(--space-2xs);
1815}
1816
1817.privacy-point__body > .prose {
1818 margin: 0;
1819}
1820
1821.privacy-point__body > .prose p {
1822 margin: 0;
1823 max-width: 62ch;
1824}
1825
1826.split--privacy {
1827 margin-top: clamp(var(--space-md), 2.2vw, var(--space-lg));
1828}
1829
1830.split--privacy .prose {
1831 max-width: none;
1832}
1833
1834.split--privacy .prose p {
1835 margin-top: var(--space-2xs);
1836}
1837
1838.prose--dark p {
1839 color: var(--color-dark-ink-secondary);
1840}
1841
1842.privacy-kicker {
1843 margin: clamp(var(--space-2xl), 5vw, var(--space-3xl)) 0 0;
1844 padding-top: clamp(var(--space-lg), 3vw, var(--space-xl));
1845 border-top: 1px solid color-mix(in oklch, var(--color-dark-border) 62%, transparent);
1846 font-family: var(--font-display);
1847 font-weight: 700;
1848 font-size: var(--text-md);
1849 letter-spacing: -0.02em;
1850 line-height: var(--leading-ui);
1851 max-width: 42ch;
1852 color: var(--color-dark-ink);
1853}
1854
1855.faq-stack {
1856 display: flex;
1857 flex-direction: column;
1858 gap: clamp(var(--space-sm), 1.5vw, var(--space-md));
1859}
1860
1861.faq-disclosure {
1862 border: 1px solid var(--color-border);
1863 border-radius: var(--radius-md);
1864 background: var(--color-surface);
1865 overflow: hidden;
1866}
1867
1868.faq-disclosure summary {
1869 cursor: pointer;
1870 list-style: none;
1871 padding: var(--space-md) var(--space-lg);
1872 font-family: var(--font-display);
1873 font-weight: 600;
1874 font-size: var(--text-md);
1875 color: var(--color-ink);
1876 display: flex;
1877 align-items: center;
1878 justify-content: space-between;
1879 gap: var(--space-sm);
1880 transition: background-color 0.22s var(--ease-out), color 0.18s var(--ease-out);
1881}
1882
1883.faq-disclosure summary:hover {
1884 background: color-mix(in oklch, var(--color-subtle) 70%, var(--color-surface));
1885}
1886
1887.faq-disclosure summary:focus-visible {
1888 outline: var(--focus-ring);
1889 outline-offset: var(--focus-offset);
1890 border-radius: var(--radius-sm);
1891}
1892
1893.faq-disclosure summary:active {
1894 background: color-mix(in oklch, var(--color-subtle) 88%, var(--color-surface));
1895}
1896
1897.faq-disclosure summary::-webkit-details-marker {
1898 display: none;
1899}
1900
1901.faq-disclosure summary::after {
1902 content: "+";
1903 font-weight: 700;
1904 color: var(--color-brand);
1905 flex-shrink: 0;
1906 transition: transform var(--duration-disclosure) var(--ease-out-disclosure);
1907 transform: rotate(0deg);
1908}
1909
1910.faq-disclosure[open] summary::after {
1911 transform: rotate(45deg);
1912}
1913
1914.faq-disclosure.faq-disclosure--animate > .faq-disclosure__collapse {
1915 display: block;
1916 max-height: 0;
1917 overflow: hidden;
1918 transition: max-height var(--duration-disclosure) var(--ease-out-disclosure);
1919}
1920
1921.faq-disclosure.faq-disclosure--animate[open] > .faq-disclosure__collapse {
1922 max-height: var(--faq-collapse-max);
1923}
1924
1925.faq-disclosure.faq-disclosure--animate .faq-disclosure__collapse-sheet {
1926 overflow: visible;
1927}
1928
1929.faq-disclosure__body {
1930 padding: 0 var(--space-lg) var(--space-md);
1931 border-top: 1px solid var(--color-border);
1932}
1933
1934.faq-disclosure__body p {
1935 margin: var(--space-sm) 0 0;
1936 font-size: var(--text-sm);
1937 color: var(--color-ink-secondary);
1938 line-height: var(--leading-prose);
1939}
1940
1941.footer-links {
1942 display: flex;
1943 flex-wrap: wrap;
1944 gap: var(--space-sm) var(--space-lg);
1945}
1946
1947.footer-links a {
1948 transition:
1949 color 0.18s var(--ease-out),
1950 transform 0.22s var(--ease-out);
1951}
1952
1953.footer-links a:hover {
1954 transform: translateY(-1px);
1955}
1956
1957/* ——— Scroll-driven section entrances (soft settle: small slide, gentle opacity lift) ——— */
1958.reveal-scroll {
1959 opacity: 1;
1960 transform: none;
1961}
1962
1963@keyframes reveal-scroll-enter {
1964 from {
1965 opacity: 0.82;
1966 transform: translateY(1rem);
1967 }
1968
1969 to {
1970 opacity: 1;
1971 transform: translateY(0);
1972 }
1973}
1974
1975@media (prefers-reduced-motion: no-preference) {
1976 @supports (animation-timeline: view(block)) {
1977 .reveal-scroll {
1978 opacity: 0.82;
1979 transform: translateY(1rem);
1980 /* Scroll timeline drives progress; ease maps scroll position → keyframes for a soft finish */
1981 animation: reveal-scroll-enter linear forwards;
1982 animation-timeline: view(block);
1983 animation-range: entry 8% cover 52%;
1984 animation-timing-function: var(--ease-reveal);
1985 }
1986 }
1987
1988 @supports not (animation-timeline: view(block)) {
1989 .reveal-scroll:not(.reveal-scroll--visible) {
1990 opacity: 0.82;
1991 transform: translateY(1rem);
1992 }
1993
1994 .reveal-scroll.reveal-scroll--visible {
1995 opacity: 1;
1996 transform: none;
1997 transition:
1998 opacity 0.55s var(--ease-reveal),
1999 transform 0.62s var(--ease-reveal);
2000 }
2001 }
2002}