/* =============================================================================
WhichPost design system · landing/assets/style.css
-----------------------------------------------------------------------------
The handbook is landing/DESIGN.md; the live catalogue is landing/styleguide.html.
- Every colour, space, radius, shadow and duration comes from a token (var(--…)).
- Logical properties only (margin-inline, inset-inline-start, text-align: start)
so Arabic, Hebrew, Persian and Urdu mirror for free.
- Signal green means paying users or a good outcome. Never decoration.
- Cascade layers, later wins: reset < tokens < base < layout < type < components
< utilities. The unlayered LEGACY block at the end keeps the pre-template pages
(index.html, start.html, analyzer.html) working until they are rebuilt; new
pages must not use its classes.
============================================================================= */
@layer reset, tokens, base, layout, type, components, utilities;
/* 1. RESET ================================================================== */
@layer reset {
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; }
h1, h2, h3, h4, h5, h6, figure, blockquote, dl, dd { margin: 0; }
img, svg, video, canvas, picture { display: block; max-inline-size: 100%; }
img, video { block-size: auto; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
table { border-collapse: collapse; }
}
/* 2. TOKENS ================================================================= */
@layer tokens {
:root {
color-scheme: light dark;
/* Colour — light. Pairs used for text are WCAG AA (≥ 4.5:1); input borders ≥ 3:1. */
--bg: #FFFFFF; /* page */
--bg-2: #F5F6F8; /* tinted bands, tool pages, footer */
--bg-3: #ECEEF2; /* wells, segmented tracks, skeletons */
--surface: #FFFFFF; /* cards, panels, windows */
--surface-2: #FFFFFF; /* popovers, menus, toasts on light */
--tint-card-border: transparent; /* card border on .section--tint */
--ink: #14161B; /* primary text */
--ink-2: #4A505C; /* secondary text */
--ink-3: #636975; /* tertiary text, hints, captions */
--line: #E4E7EC; /* hairlines */
--line-2: #D2D7DE; /* stronger hairlines, secondary-button ring */
--line-input: #8E959F; /* form control borders (3:1) */
--views: #C8CED7; /* neutral data (views, baselines) */
--signal: #08875F; /* paying users, good outcomes: fills, bars, big numbers */
--signal-ink: #066B4B; /* signal as small text, on any light surface incl. tints */
--signal-2: #E3F3EC; /* signal tint */
--on-signal: #FFFFFF;
--warn: #9A6100; /* "test again", caution */
--warn-2: #FBF1DE;
--danger: #BF3B33; /* "pause", errors */
--danger-2: #FBEAE8;
--info: #2462D2;
--info-2: #E8F0FD;
--focus: #2A6BE0;
--scrim: rgb(14 16 20 / .36);
--nav-bg: rgb(255 255 255 / .78);
--amber: var(--warn); /* legacy names */
--red: var(--danger);
/* Elevation: layered soft shadows, lowest to highest */
--shadow-1: 0 1px 2px rgb(16 24 40 / .06);
--shadow-2: 0 1px 2px rgb(16 24 40 / .04), 0 4px 12px -2px rgb(16 24 40 / .08);
--shadow-3: 0 1px 2px rgb(16 24 40 / .04), 0 6px 16px -4px rgb(16 24 40 / .08), 0 24px 48px -16px rgb(16 24 40 / .16);
--shadow-4: 0 1px 1px rgb(16 24 40 / .03), 0 4px 8px -2px rgb(16 24 40 / .04), 0 18px 36px -10px rgb(16 24 40 / .10), 0 50px 100px -30px rgb(16 24 40 / .24);
--shadow-pop: 0 0 0 1px rgb(16 24 40 / .06), 0 10px 24px -6px rgb(16 24 40 / .16), 0 28px 60px -18px rgb(16 24 40 / .22);
--shadow: var(--shadow-4);
/* Radii */
--radius-xs: 6px;
--radius-sm: 10px;
--radius-md: 14px;
--radius-lg: 20px;
--radius-xl: 28px;
--radius-pill: 999px;
--radius: var(--radius-lg);
/* Spacing: fixed steps for components, fluid steps for page rhythm */
--space-3xs: 4px;
--space-2xs: 8px;
--space-xs: 12px;
--space-s: 16px;
--space-m: 24px;
--space-l: 32px;
--space-xl: 48px;
--space-2xl: 64px;
--space-3xl: 96px;
--space-4xl: 128px;
--space-block: clamp(40px, 1.75rem + 3vw, 96px); /* section head to content */
--space-section: clamp(72px, 3.5rem + 6vw, 176px); /* section padding */
/* Layout: gutters stay 5 % of the viewport up to 3840 px, so wide screens keep proportionate margins
(2560 px: 128 px each side, no extra empty space). Line lengths are capped by components, not here. */
--gutter: clamp(16px, 5vw, 192px);
--container-max: 2880px;
--measure: 68ch;
--grid-gap: clamp(16px, .75rem + 1.2vw, 40px);
--nav-h: 56px;
/* Type: system fonts only (no downloads). Script-specific stacks below. */
--font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
--font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
--font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
--font: var(--font-text);
--text-display: clamp(2.75rem, 1.2rem + 4vw, 6rem); /* 44 → 96 */
--text-headline: clamp(2rem, 1.3rem + 2.5vw, 4.25rem); /* 32 → 68 */
--text-title-lg: clamp(1.5rem, 1.15rem + 1vw, 2.25rem); /* 24 → 36 */
--text-title: clamp(1.1875rem, 1.05rem + .4vw, 1.5rem); /* 19 → 24 */
--text-intro: clamp(1.1875rem, 1.02rem + .55vw, 1.625rem); /* 19 → 26 */
--text-body: clamp(1rem, .96rem + .12vw, 1.0625rem); /* 16 → 17 */
--text-small: .875rem; /* 14 */
--text-fine: .8125rem; /* 13 */
--text-micro: .75rem; /* 12 */
--leading-display: 1.03;
--leading-headline: 1.07;
--leading-title: 1.2;
--leading-intro: 1.4;
--leading-body: 1.55;
--track: 1; /* multiplier for negative tracking; 0 for scripts that must not be tracked */
--script-scale: 1; /* body size multiplier (Nastaliq needs a little more) */
/* Motion */
--ease-out: cubic-bezier(.2, .75, .15, 1);
--ease-in-out: cubic-bezier(.65, 0, .35, 1);
--ease-standard: cubic-bezier(.25, .1, .25, 1);
--ease-spring: cubic-bezier(.3, 1.35, .5, 1);
--dur-1: 120ms; /* press */
--dur-2: 200ms; /* hover, colour */
--dur-3: 320ms; /* open, close, move */
--dur-4: 640ms; /* reveal */
--dur-5: 900ms; /* data growing in */
/* Stacking */
--z-nav: 50;
--z-drawer: 60;
--z-pop: 70;
--z-toast: 80;
--z-skip: 100;
/* Brand "Aurora" (CLAUDE.md 2b): colour for appeal only, never for data. Data keeps --signal / --warn /
--danger. The gradient runs navy → teal → emerald; emerald is a glow at partial strength, never a flat
surface behind text (white on pure emerald is 2.7:1). Text on Aurora is white or --aurora-ink-2. */
--brand-navy: #071A24;
--brand-teal: #0E6E6A;
--brand-emerald: #19B37C;
--brand-glow: #2F7FD0; /* soft blue glow blob */
--brand-accent: #0E7C74; /* brand accent on light pages: 5.1:1 on --bg, 4.7:1 on --bg-2 */
--brand-accent-2: #E2F2EF; /* accent tint */
--aurora-ink: #FFFFFF;
--aurora-ink-2: rgb(255 255 255 / .88); /* ≥ 5.9:1 on every Aurora stop behind text */
--aurora-ink-3: rgb(255 255 255 / .78); /* ≥ 4.6:1; captions and labels */
--aurora-line: rgb(255 255 255 / .16);
--glass-bg: rgb(255 255 255 / .08);
--glass-line: rgb(255 255 255 / .16);
--glass-blur: 18px;
--glass-light-bg: rgb(255 255 255 / .66); /* frosted panel on light pages */
--dur-6: 1400ms; /* numbers counting up */
/* Direction helpers (physical transforms only) */
--dir: 1;
--origin-start: left;
--origin-end: right;
/* Icons for CSS masks */
--i-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
--i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
--i-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E");
--i-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}
[dir="rtl"] { --dir: -1; --origin-start: right; --origin-end: left; }
@media (prefers-reduced-motion: reduce) {
:root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-4: 0ms; --dur-5: 0ms; --dur-6: 0ms; }
}
/* Colour — dark (system preference unless the page forces light) */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg: #0E1014; --bg-2: #15181E; --bg-3: #23272F; --surface: #1B1F26; --surface-2: #22262E; --tint-card-border: #2A2F37;
--ink: #F2F4F7; --ink-2: #B3B9C3; --ink-3: #8D94A0;
--line: #262A31; --line-2: #353A44; --line-input: #6B7280; --views: #3A414C;
--signal: #3FCF9B; --signal-ink: #45D6A2; --signal-2: #102A20; --on-signal: #06140E;
--warn: #E7A93B; --warn-2: #2A2112; --danger: #F07A72; --danger-2: #2E1715;
--info: #7FA8F0; --info-2: #142036; --focus: #7FA8F0;
--brand-accent: #5CCFBF; --brand-accent-2: #0F2A27; --glass-light-bg: rgb(27 31 38 / .62);
--scrim: rgb(0 0 0 / .55); --nav-bg: rgb(14 16 20 / .72);
--shadow-1: 0 1px 2px rgb(0 0 0 / .5);
--shadow-2: 0 1px 2px rgb(0 0 0 / .4), 0 6px 16px -4px rgb(0 0 0 / .5);
--shadow-3: 0 0 0 1px rgb(255 255 255 / .04), 0 8px 24px -6px rgb(0 0 0 / .55), 0 30px 60px -20px rgb(0 0 0 / .6);
--shadow-4: 0 0 0 1px rgb(255 255 255 / .05), 0 20px 40px -12px rgb(0 0 0 / .6), 0 60px 120px -30px rgb(0 0 0 / .75);
--shadow-pop: 0 0 0 1px rgb(255 255 255 / .08), 0 16px 40px -8px rgb(0 0 0 / .6);
}
}
/* Forced dark (data-theme="dark") and dark bands inside light pages (.theme-dark) */
:root[data-theme="dark"], .theme-dark, .aurora {
color-scheme: dark;
--bg: #0E1014; --bg-2: #15181E; --bg-3: #23272F; --surface: #1B1F26; --surface-2: #22262E; --tint-card-border: #2A2F37;
--ink: #F2F4F7; --ink-2: #B3B9C3; --ink-3: #8D94A0;
--line: #262A31; --line-2: #353A44; --line-input: #6B7280; --views: #3A414C;
--signal: #3FCF9B; --signal-ink: #45D6A2; --signal-2: #102A20; --on-signal: #06140E;
--warn: #E7A93B; --warn-2: #2A2112; --danger: #F07A72; --danger-2: #2E1715;
--info: #7FA8F0; --info-2: #142036; --focus: #7FA8F0;
--brand-accent: #5CCFBF; --brand-accent-2: #0F2A27; --glass-light-bg: rgb(27 31 38 / .62);
--scrim: rgb(0 0 0 / .55); --nav-bg: rgb(14 16 20 / .72);
--shadow-1: 0 1px 2px rgb(0 0 0 / .5);
--shadow-2: 0 1px 2px rgb(0 0 0 / .4), 0 6px 16px -4px rgb(0 0 0 / .5);
--shadow-3: 0 0 0 1px rgb(255 255 255 / .04), 0 8px 24px -6px rgb(0 0 0 / .55), 0 30px 60px -20px rgb(0 0 0 / .6);
--shadow-4: 0 0 0 1px rgb(255 255 255 / .05), 0 20px 40px -12px rgb(0 0 0 / .6), 0 60px 120px -30px rgb(0 0 0 / .75);
--shadow-pop: 0 0 0 1px rgb(255 255 255 / .08), 0 16px 40px -8px rgb(0 0 0 / .6);
}
:root[data-theme="light"] { color-scheme: light; }
@media (prefers-contrast: more) {
:root { --line: #B9C0CA; --line-2: #8E959F; --ink-3: #4A505C; --line-input: #5F6672; }
}
/* Script-aware typography -------------------------------------------------
System fonts only. -apple-system already picks the right Apple face per
language; the named families cover Windows, Android and Linux. */
:lang(ja) {
--font-text: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, "Noto Sans JP", "Noto Sans CJK JP", sans-serif;
--font-display: var(--font-text);
}
:lang(ko) {
--font-text: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Noto Sans CJK KR", sans-serif;
--font-display: var(--font-text);
}
:lang(zh-Hans) {
--font-text: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
--font-display: var(--font-text);
}
:lang(zh-Hant) {
--font-text: -apple-system, BlinkMacSystemFont, "PingFang TC", "Microsoft JhengHei UI", "Microsoft JhengHei", "Noto Sans TC", "Noto Sans CJK TC", "Source Han Sans TC", sans-serif;
--font-display: var(--font-text);
}
:is(:lang(ar), :lang(fa)) {
--font-text: "SF Arabic", -apple-system, BlinkMacSystemFont, "Geeza Pro", "Segoe UI", "Noto Sans Arabic", "Noto Naskh Arabic", Tahoma, sans-serif;
--font-display: var(--font-text);
}
:lang(ur) {
--font-text: "Noto Nastaliq Urdu", "Urdu Typesetting", "Jameel Noori Nastaleeq", "SF Arabic", "Geeza Pro", "Segoe UI", "Noto Sans Arabic", Tahoma, sans-serif;
--font-display: var(--font-text);
}
:lang(he) {
--font-text: "SF Hebrew", -apple-system, BlinkMacSystemFont, "Arial Hebrew", "Segoe UI", "Noto Sans Hebrew", Arial, sans-serif;
--font-display: var(--font-text);
}
:lang(hi) {
--font-text: -apple-system, BlinkMacSystemFont, "Kohinoor Devanagari", "Devanagari Sangam MN", "Nirmala UI", "Noto Sans Devanagari", Mangal, sans-serif;
--font-display: var(--font-text);
}
:lang(bn) {
--font-text: -apple-system, BlinkMacSystemFont, "Kohinoor Bangla", "Bangla Sangam MN", "Nirmala UI", "Noto Sans Bengali", Vrinda, sans-serif;
--font-display: var(--font-text);
}
:lang(th) {
--font-text: -apple-system, BlinkMacSystemFont, Thonburi, "Sukhumvit Set", "Leelawadee UI", "Noto Sans Thai", Tahoma, sans-serif;
--font-display: var(--font-text);
}
/* No negative tracking for CJK, Arabic-script, Hebrew, Indic and Thai; roomier lines. */
:is(:lang(ja), :lang(ko), :lang(zh)) {
--track: 0; --leading-body: 1.75; --leading-intro: 1.6; --leading-title: 1.35; --leading-headline: 1.25; --leading-display: 1.18;
}
:is(:lang(ar), :lang(fa), :lang(he)) {
--track: 0; --leading-body: 1.7; --leading-intro: 1.55; --leading-title: 1.4; --leading-headline: 1.3; --leading-display: 1.25;
}
:lang(ur) {
--track: 0; --script-scale: 1.06; --leading-body: 2.05; --leading-intro: 1.95; --leading-title: 1.85; --leading-headline: 1.8; --leading-display: 1.75;
}
:is(:lang(hi), :lang(bn), :lang(th)) {
--track: 0; --leading-body: 1.8; --leading-intro: 1.65; --leading-title: 1.45; --leading-headline: 1.35; --leading-display: 1.3;
}
:lang(vi) { --leading-display: 1.14; --leading-headline: 1.16; --leading-title: 1.3; }
:is(:lang(el), :lang(ru), :lang(uk), :lang(bg)) { --track: .6; }
}
/* 3. BASE =================================================================== */
@layer base {
html {
scroll-padding-block-start: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 16px);
interpolate-size: allow-keywords;
hanging-punctuation: first;
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
min-block-size: 100vh;
min-block-size: 100dvh;
background: var(--bg);
color: var(--ink);
font-family: var(--font-text);
font-size: calc(var(--text-body) * var(--script-scale));
line-height: var(--leading-body);
letter-spacing: calc(-0.011em * var(--track));
font-variant-numeric: tabular-nums;
font-kerning: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
-webkit-tap-highlight-color: transparent;
overflow-wrap: break-word;
}
/* A nested language (menu items, samples) gets its own script stack and tracking. */
[lang]:not(html) { font-family: var(--font-text); letter-spacing: calc(-0.011em * var(--track)); }
:lang(ko) { word-break: keep-all; overflow-wrap: anywhere; }
p { margin: 0 0 .875rem; }
a { color: inherit; text-decoration-thickness: from-font; text-underline-offset: .2em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }
main:focus, :is(h1, h2, h3, section, article)[tabindex="-1"]:focus { outline: none; }
::selection { background: color-mix(in srgb, var(--signal) 26%, transparent); }
hr { border: 0; border-block-start: 1px solid var(--line); margin-block: var(--space-l); }
code, kbd, samp, pre { font-family: var(--font-mono); font-size: .9em; }
abbr[title] { text-decoration: underline dotted; cursor: help; }
table { font-variant-numeric: tabular-nums; }
.theme-dark, .aurora { background-color: var(--bg); color: var(--ink); }
.skip-link {
position: fixed; inset-block-start: calc(8px + env(safe-area-inset-top, 0px)); inset-inline-start: 8px; z-index: var(--z-skip);
padding: 10px 18px; border-radius: var(--radius-pill); background: var(--ink); color: var(--bg);
font-weight: 600; font-size: var(--text-small); text-decoration: none;
transform: translateY(-200%); transition: transform var(--dur-2) var(--ease-out);
}
.skip-link:focus { transform: none; }
}
/* 4. LAYOUT ================================================================= */
@layer layout {
/* Container: fluid gutters, width grows with the viewport (≈1150 at 1280, 1440 at 1600,
1730 at 1920, 2300 at 2560) and caps at 2880 from 3200 px. Gutters are physical so safe-area
insets apply. Reading text keeps its own measure (.measure, .prose, intros, steps, cards). */
.container, .wrap {
inline-size: 100%;
max-inline-size: calc(var(--container-max) + 2 * var(--gutter));
margin-inline: auto;
padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.container--narrow { --container-max: 1040px; } /* focused tasks: forms, dialogs-as-pages */
.container--text { --container-max: 46rem; } /* a single long read */
.narrow { max-inline-size: 760px; } /* legacy */
/* Sections are full-bleed; their background spans the viewport, content sits in .container. */
.section { padding-block: var(--space-section); }
.section--tight { padding-block: var(--space-block); }
.section--flush-top { padding-block-start: 0; }
.section--tint, .tint { background: var(--bg-2); }
.section--ink { background: var(--bg); color: var(--ink); } /* use with .theme-dark */
.section--rule > .container { border-block-start: 1px solid var(--line); padding-block-start: var(--space-section); }
.section--rule { padding-block-start: 0; }
/* Section head: eyebrow + headline + intro. --split puts the intro in its own column. */
.section-head { display: grid; gap: var(--space-s); max-inline-size: 56rem; margin-block-end: var(--space-block); }
.section-head > * { margin: 0; }
.section-head--center { text-align: center; justify-items: center; margin-inline: auto; }
@media (min-width: 1024px) {
.section-head--split {
max-inline-size: none; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
column-gap: clamp(48px, 5vw, 144px); align-items: end;
}
.section-head--split > :first-child { display: grid; gap: var(--space-s); }
.section-head--split > .intro { max-inline-size: 52ch; } /* stays readable in very wide containers */
}
/* 12-column grid. Children span all 12 by default; .col-* / .col-md-* / .col-lg-* / .col-xl-*. */
.grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: var(--grid-gap-y, var(--grid-gap)) var(--grid-gap);
}
.grid > * { grid-column: 1 / -1; min-inline-size: 0; }
.grid > [class*="col-"] { grid-column: auto / span 12; }
.grid > .col-1 { grid-column-end: span 1; } .grid > .col-2 { grid-column-end: span 2; } .grid > .col-3 { grid-column-end: span 3; } .grid > .col-4 { grid-column-end: span 4; } .grid > .col-5 { grid-column-end: span 5; } .grid > .col-6 { grid-column-end: span 6; } .grid > .col-7 { grid-column-end: span 7; } .grid > .col-8 { grid-column-end: span 8; } .grid > .col-9 { grid-column-end: span 9; } .grid > .col-10 { grid-column-end: span 10; } .grid > .col-11 { grid-column-end: span 11; } .grid > .col-12 { grid-column-end: span 12; }
@media (min-width: 768px) {
.grid > .col-md-1 { grid-column-end: span 1; } .grid > .col-md-2 { grid-column-end: span 2; } .grid > .col-md-3 { grid-column-end: span 3; } .grid > .col-md-4 { grid-column-end: span 4; } .grid > .col-md-5 { grid-column-end: span 5; } .grid > .col-md-6 { grid-column-end: span 6; } .grid > .col-md-7 { grid-column-end: span 7; } .grid > .col-md-8 { grid-column-end: span 8; } .grid > .col-md-9 { grid-column-end: span 9; } .grid > .col-md-10 { grid-column-end: span 10; } .grid > .col-md-11 { grid-column-end: span 11; } .grid > .col-md-12 { grid-column-end: span 12; }
.grid > .start-md-1 { grid-column-start: 1; } .grid > .start-md-2 { grid-column-start: 2; } .grid > .start-md-3 { grid-column-start: 3; } .grid > .start-md-4 { grid-column-start: 4; } .grid > .start-md-5 { grid-column-start: 5; } .grid > .start-md-6 { grid-column-start: 6; } .grid > .start-md-7 { grid-column-start: 7; } .grid > .start-md-8 { grid-column-start: 8; } .grid > .start-md-9 { grid-column-start: 9; } .grid > .start-md-10 { grid-column-start: 10; } .grid > .start-md-11 { grid-column-start: 11; } .grid > .start-md-12 { grid-column-start: 12; } .grid > .start-md-auto { grid-column-start: auto; }
}
@media (min-width: 1024px) {
.grid > .col-lg-1 { grid-column-end: span 1; } .grid > .col-lg-2 { grid-column-end: span 2; } .grid > .col-lg-3 { grid-column-end: span 3; } .grid > .col-lg-4 { grid-column-end: span 4; } .grid > .col-lg-5 { grid-column-end: span 5; } .grid > .col-lg-6 { grid-column-end: span 6; } .grid > .col-lg-7 { grid-column-end: span 7; } .grid > .col-lg-8 { grid-column-end: span 8; } .grid > .col-lg-9 { grid-column-end: span 9; } .grid > .col-lg-10 { grid-column-end: span 10; } .grid > .col-lg-11 { grid-column-end: span 11; } .grid > .col-lg-12 { grid-column-end: span 12; }
.grid > .start-lg-1 { grid-column-start: 1; } .grid > .start-lg-2 { grid-column-start: 2; } .grid > .start-lg-3 { grid-column-start: 3; } .grid > .start-lg-4 { grid-column-start: 4; } .grid > .start-lg-5 { grid-column-start: 5; } .grid > .start-lg-6 { grid-column-start: 6; } .grid > .start-lg-7 { grid-column-start: 7; } .grid > .start-lg-8 { grid-column-start: 8; } .grid > .start-lg-9 { grid-column-start: 9; } .grid > .start-lg-10 { grid-column-start: 10; } .grid > .start-lg-11 { grid-column-start: 11; } .grid > .start-lg-12 { grid-column-start: 12; } .grid > .start-lg-auto { grid-column-start: auto; }
}
@media (min-width: 1440px) {
.grid > .col-xl-1 { grid-column-end: span 1; } .grid > .col-xl-2 { grid-column-end: span 2; } .grid > .col-xl-3 { grid-column-end: span 3; } .grid > .col-xl-4 { grid-column-end: span 4; } .grid > .col-xl-5 { grid-column-end: span 5; } .grid > .col-xl-6 { grid-column-end: span 6; } .grid > .col-xl-7 { grid-column-end: span 7; } .grid > .col-xl-8 { grid-column-end: span 8; } .grid > .col-xl-9 { grid-column-end: span 9; } .grid > .col-xl-10 { grid-column-end: span 10; } .grid > .col-xl-11 { grid-column-end: span 11; } .grid > .col-xl-12 { grid-column-end: span 12; }
.grid > .start-xl-1 { grid-column-start: 1; } .grid > .start-xl-2 { grid-column-start: 2; } .grid > .start-xl-3 { grid-column-start: 3; } .grid > .start-xl-4 { grid-column-start: 4; } .grid > .start-xl-5 { grid-column-start: 5; } .grid > .start-xl-6 { grid-column-start: 6; } .grid > .start-xl-7 { grid-column-start: 7; } .grid > .start-xl-8 { grid-column-start: 8; } .grid > .start-xl-9 { grid-column-start: 9; } .grid > .start-xl-10 { grid-column-start: 10; } .grid > .start-xl-11 { grid-column-start: 11; } .grid > .start-xl-12 { grid-column-start: 12; } .grid > .start-xl-auto { grid-column-start: auto; }
}
/* Auto grid: as many columns as fit, never narrower than --min. */
.grid-auto {
display: grid; gap: var(--grid-gap-y, var(--grid-gap)) var(--grid-gap);
grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--min, 280px)), 1fr));
}
.grid-auto--fit { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 280px)), 1fr)); }
/* Split: heading column + body column on wide screens, stacked on phones. */
.split { display: grid; gap: var(--space-xl) var(--grid-gap); }
.split > * { min-inline-size: 0; }
@media (min-width: 1024px) {
.split {
grid-template-columns: minmax(0, var(--split-start, 5fr)) minmax(0, var(--split-end, 7fr));
column-gap: clamp(48px, 5vw, 144px); align-items: start;
}
.split--even { --split-start: 1fr; --split-end: 1fr; }
.split--narrow-start { --split-start: 4fr; --split-end: 8fr; }
.split--wide-start { --split-start: 7fr; --split-end: 5fr; }
.split--center { align-items: center; }
.split--reverse > :first-child { order: 2; }
.split__sticky { position: sticky; inset-block-start: calc(var(--nav-h) + var(--sticky-offset, 0px) + var(--space-l)); }
}
/* Stacks and clusters */
.stack { display: flex; flex-direction: column; gap: var(--stack, var(--space-s)); }
.stack > * { margin-block: 0; }
.stack--2xs { --stack: var(--space-2xs); }
.stack--xs { --stack: var(--space-xs); }
.stack--m { --stack: var(--space-m); }
.stack--l { --stack: var(--space-l); }
.stack--xl { --stack: var(--space-xl); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster, var(--space-xs)); }
.cluster--between { justify-content: space-between; }
:is(ul, ol):is(.stack, .cluster, .actions, .btn-row) { list-style: none; margin: 0; padding: 0; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.flow > * + * { margin-block-start: var(--flow, 1em); }
.measure { max-inline-size: var(--measure); }
.measure-narrow { max-inline-size: 46ch; }
}
/* 5. TYPE =================================================================== */
@layer type {
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display); color: var(--ink); font-weight: 700;
line-height: var(--leading-title); letter-spacing: calc(-0.02em * var(--track));
text-wrap: balance; overflow-wrap: break-word;
}
p, li, dd, figcaption, blockquote { text-wrap: pretty; }
/* Long compounds (German, Finnish, Dutch, Hungarian, Nordic) hyphenate on narrow screens. */
@media (max-width: 767.98px) {
:is(:lang(de), :lang(fi), :lang(nl), :lang(hu), :lang(sv), :lang(da), :lang(nb), :lang(et), :lang(lt), :lang(lv), :lang(sl), :lang(hr), :lang(el), :lang(ga), :lang(mt)) :is(h1, h2, h3, p, li, .display, .headline, .title, .btn) {
hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4;
}
}
.display {
font-family: var(--font-display); font-size: var(--text-display); line-height: var(--leading-display);
font-weight: 700; letter-spacing: calc(-0.038em * var(--track));
}
.headline {
font-family: var(--font-display); font-size: var(--text-headline); line-height: var(--leading-headline);
font-weight: 700; letter-spacing: calc(-0.03em * var(--track));
}
.title-lg {
font-family: var(--font-display); font-size: var(--text-title-lg); line-height: var(--leading-title);
font-weight: 700; letter-spacing: calc(-0.024em * var(--track));
}
.title {
font-family: var(--font-display); font-size: var(--text-title); line-height: var(--leading-title);
font-weight: 650; letter-spacing: calc(-0.02em * var(--track));
}
.intro, .lede {
font-size: var(--text-intro); line-height: var(--leading-intro); color: var(--ink-2);
letter-spacing: calc(-0.017em * var(--track));
}
.eyebrow {
display: inline-flex; align-items: center; gap: 8px; margin: 0;
font-size: var(--text-small); font-weight: 600; color: var(--eyebrow, var(--ink-2)); letter-spacing: 0;
}
.eyebrow--signal { --eyebrow: var(--signal-ink); }
.small { font-size: var(--text-small); color: var(--ink-2); }
.fine { font-size: var(--text-fine); color: var(--ink-3); }
.muted { color: var(--ink-2); }
.subtle { color: var(--ink-3); }
.text-signal { color: var(--signal-ink); }
.text-warn { color: var(--warn); }
.text-danger { color: var(--danger); }
.num, .tabular { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.mono-text { font-family: var(--font-mono); font-size: .9em; }
.link {
color: var(--ink); font-weight: 600; text-decoration: underline;
text-decoration-color: var(--line-2); text-decoration-thickness: 1.5px; text-underline-offset: 4px;
transition: text-decoration-color var(--dur-2) var(--ease-standard);
}
.link:hover { text-decoration-color: currentColor; }
.link--arrow { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.link--arrow .icon { inline-size: 1em; block-size: 1em; transition: translate var(--dur-2) var(--ease-out); }
.link--arrow:hover { text-decoration: underline; text-decoration-color: var(--line-2); }
.link--arrow:hover .icon { translate: calc(3px * var(--dir)) 0; }
/* Long reading text: keeps ~68ch even inside wide layouts. */
.prose { max-inline-size: var(--measure); }
.prose > * { margin-block: 0; }
.prose > * + * { margin-block-start: 1em; }
.prose h2 { font-size: var(--text-title-lg); margin-block-start: 1.6em; }
.prose h3 { font-size: var(--text-title); margin-block-start: 1.4em; }
.prose a { font-weight: 600; text-decoration-color: var(--line-2); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: currentColor; }
.prose :is(ul, ol) { padding-inline-start: 1.3em; }
.prose li + li { margin-block-start: .4em; }
.prose code { background: var(--bg-3); padding: .1em .4em; border-radius: var(--radius-xs); }
kbd, .kbd {
display: inline-block; padding: 1px 6px; border-radius: var(--radius-xs); border: 1px solid var(--line-2);
border-block-end-width: 2px; background: var(--surface); font-size: var(--text-micro); font-family: var(--font-mono);
}
}
/* 6. COMPONENTS ============================================================= */
@layer components {
/* Icons ----------------------------------------------------------------- */
.icon { display: inline-block; inline-size: 1.25em; block-size: 1.25em; flex: none; vertical-align: -0.25em; }
[dir="rtl"] .icon--dir { transform: scaleX(-1); }
/* Brand ----------------------------------------------------------------- */
.brand {
display: inline-flex; align-items: center; gap: 9px; flex: none;
font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--ink);
letter-spacing: calc(-0.02em * var(--track)); text-decoration: none;
}
.brand-mark { inline-size: 18px; block-size: 18px; flex: none; }
/* Site navigation ------------------------------------------------------- */
.site-nav {
position: sticky; inset-block-start: 0; z-index: var(--z-nav);
padding-block-start: env(safe-area-inset-top, 0px);
border-block-end: 1px solid transparent;
transition: border-color var(--dur-2) var(--ease-standard);
}
/* The blur lives on a pseudo-element so the header does not become the containing
block of the fixed mobile drawer. */
.site-nav::before {
content: ""; position: absolute; inset: 0; z-index: -1;
background: var(--nav-bg);
-webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.site-nav::before { background: var(--bg); }
}
.site-nav[data-scrolled], .no-js .site-nav, .site-nav--minimal { border-block-end-color: var(--line); }
.site-nav__bar { display: flex; align-items: center; gap: var(--space-m); min-block-size: var(--nav-h); }
.site-nav__label { font-size: var(--text-small); color: var(--ink-3); padding-inline-start: var(--space-s); border-inline-start: 1px solid var(--line-2); line-height: 1.3; }
.site-nav__menu { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 40px); margin-inline-start: auto; }
.site-nav__links { display: flex; align-items: center; gap: clamp(20px, 2.2vw, 36px); list-style: none; margin: 0; padding: 0; font-size: var(--text-small); }
.site-nav__links a { display: block; padding-block: 8px; color: var(--ink-2); text-decoration: none; transition: color var(--dur-2) var(--ease-standard); }
.site-nav__links a:hover, .site-nav__links a[aria-current="page"] { color: var(--ink); }
.site-nav__links a[aria-current="page"] { font-weight: 600; }
.site-nav__actions { display: flex; align-items: center; gap: 10px; }
.site-nav__drawer-only { display: none; } /* shown only inside the phone/tablet drawer (below) */
.site-nav__actions--minimal { margin-inline-start: auto; }
.site-nav__toggle {
display: none; position: relative; inline-size: 44px; block-size: 44px; margin-inline: auto -10px;
border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink);
}
.site-nav__bars { position: absolute; inset: 0; margin: auto; inline-size: 18px; block-size: 12px; }
.site-nav__bars::before, .site-nav__bars::after {
content: ""; position: absolute; inset-inline: 0; block-size: 1.75px; border-radius: 2px; background: currentColor;
transition: transform var(--dur-3) var(--ease-out), top var(--dur-3) var(--ease-out);
}
.site-nav__bars::before { top: 2px; }
.site-nav__bars::after { top: 8.5px; }
.site-nav__toggle[aria-expanded="true"] .site-nav__bars::before { top: 5.25px; transform: rotate(45deg); }
.site-nav__toggle[aria-expanded="true"] .site-nav__bars::after { top: 5.25px; transform: rotate(-45deg); }
@media (min-width: 900px) and (max-width: 1179.98px) {
.site-nav__actions .langmenu__current { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 899.98px) {
.js .site-nav__toggle { display: inline-block; }
.js .site-nav__menu {
position: fixed; z-index: var(--z-drawer);
inset: calc(var(--nav-h) + env(safe-area-inset-top, 0px)) 0 0 0;
flex-direction: column; align-items: stretch; justify-content: flex-start; gap: var(--space-l);
margin: 0; padding: var(--space-m) max(var(--gutter), env(safe-area-inset-right, 0px)) calc(var(--space-xl) + env(safe-area-inset-bottom, 0px)) max(var(--gutter), env(safe-area-inset-left, 0px));
background: var(--bg); overflow-y: auto; overscroll-behavior: contain;
visibility: hidden; opacity: 0; transform: translateY(-12px);
transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out), visibility 0s linear var(--dur-3);
}
.nav-open .site-nav__menu { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.nav-open .site-nav { border-block-end-color: var(--line); }
.nav-open .site-nav::before { background: var(--bg); }
.js .site-nav__links { flex-direction: column; align-items: stretch; gap: 0; font-size: clamp(1.375rem, 1rem + 2vw, 1.75rem); }
.js .site-nav__links a {
padding-block: 14px; color: var(--ink); font-weight: 600; border-block-end: 1px solid var(--line);
letter-spacing: calc(-0.02em * var(--track)); font-family: var(--font-display);
}
.js .site-nav__links .site-nav__drawer-only { display: block; }
.js .site-nav__actions { flex-direction: column-reverse; align-items: stretch; gap: var(--space-m); }
.js .site-nav__actions .btn { min-block-size: 52px; font-size: 17px; }
.js .site-nav__menu .langmenu__panel { position: static; inline-size: auto; max-block-size: 50vh; margin-block-start: 8px; box-shadow: none; border: 1px solid var(--line); animation: none; }
.js .site-nav__menu .langmenu__button { inline-size: 100%; min-block-size: 48px; padding-inline: 14px; justify-content: flex-start; border: 1px solid var(--line); border-radius: var(--radius-md); font-size: 16px; }
.js .site-nav__menu .langmenu__chev { margin-inline-start: auto; }
.no-js .site-nav__bar { flex-wrap: wrap; padding-block: 10px; }
.no-js .site-nav__menu { inline-size: 100%; margin-inline-start: 0; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.no-js .site-nav__links { flex-wrap: wrap; gap: 4px 18px; }
}
html.nav-open, html.nav-open body { overflow: hidden; }
/* Local (sticky) navigation for long pages ------------------------------- */
.subnav {
position: sticky; inset-block-start: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); z-index: calc(var(--z-nav) - 1);
border-block-end: 1px solid var(--line);
}
.subnav::before {
content: ""; position: absolute; inset: 0; z-index: -1; background: var(--nav-bg);
-webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
}
.subnav__bar { display: flex; align-items: center; gap: var(--space-m); min-block-size: 52px; }
.subnav__title { flex: none; font-family: var(--font-display); font-weight: 650; font-size: 19px; letter-spacing: calc(-0.02em * var(--track)); }
.subnav__links {
display: flex; gap: 6px; list-style: none; margin: 0; margin-inline-start: auto; padding: 0;
overflow-x: auto; scrollbar-width: none; font-size: var(--text-fine);
mask-image: linear-gradient(to var(--fade-to, right), #000 calc(100% - 32px), transparent);
}
[dir="rtl"] .subnav__links { --fade-to: left; }
.subnav__links::-webkit-scrollbar { display: none; }
.subnav__links a { display: block; padding: 6px 10px; border-radius: var(--radius-pill); color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.subnav__links a:hover { color: var(--ink); background: var(--bg-3); }
.subnav__links a[aria-current="true"] { color: var(--ink); background: var(--bg-3); font-weight: 600; }
@media (max-width: 767.98px) { .subnav__title { display: none; } .subnav__links { margin-inline: calc(-1 * var(--gutter)) 0; padding-inline: var(--gutter); } }
html:has(.subnav) { scroll-padding-block-start: calc(var(--nav-h) + 52px + env(safe-area-inset-top, 0px) + 16px); }
/* Language menu ----------------------------------------------------------- */
.langmenu { position: relative; display: inline-block; vertical-align: middle; }
.langmenu__button {
list-style: none; display: inline-flex; align-items: center; gap: 6px; min-block-size: 36px; padding-inline: 10px;
border-radius: var(--radius-pill); color: var(--ink-2); font-size: var(--text-small); cursor: pointer; user-select: none;
transition: color var(--dur-2) var(--ease-standard), background-color var(--dur-2) var(--ease-standard);
}
.langmenu__button::-webkit-details-marker { display: none; }
.langmenu__button:hover, .langmenu[open] > .langmenu__button { color: var(--ink); background: var(--bg-3); }
.langmenu__globe { inline-size: 18px; block-size: 18px; }
.langmenu__chev { inline-size: 14px; block-size: 14px; transition: rotate var(--dur-3) var(--ease-out); }
.langmenu[open] .langmenu__chev { rotate: 180deg; }
.langmenu__current { max-inline-size: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.langmenu__panel {
position: absolute; inset-block-start: calc(100% + 8px); inset-inline-end: 0; z-index: var(--z-pop);
inline-size: min(340px, calc(100vw - 2 * var(--gutter))); max-block-size: min(70vh, 560px);
display: flex; flex-direction: column;
background: var(--surface-2); color: var(--ink); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); overflow: hidden;
animation: wp-pop var(--dur-2) var(--ease-out);
}
.langmenu--up .langmenu__panel { inset-block: auto calc(100% + 8px); inset-inline: 0 auto; animation-name: wp-pop-up; }
.langmenu__search { position: relative; padding: 10px; border-block-end: 1px solid var(--line); }
.langmenu__search-icon { position: absolute; inset-inline-start: 22px; inset-block-start: 50%; margin-block-start: -9px; inline-size: 18px; block-size: 18px; color: var(--ink-3); pointer-events: none; }
.langmenu .langmenu__input { min-block-size: 40px; padding-block: 8px; padding-inline: 40px 12px; border-radius: var(--radius-sm); border-color: var(--line-2); background: var(--bg-2); font-size: 16px; }
.langmenu__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.langmenu__list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; overscroll-behavior: contain; }
.langmenu__item {
display: flex; align-items: baseline; gap: 10px; padding: 9px 12px 9px 8px; border-radius: var(--radius-sm);
color: var(--ink); text-decoration: none; font-size: 15px; line-height: 1.35;
}
.langmenu__item:hover { background: var(--bg-2); }
.langmenu__item:focus-visible { outline-offset: -2px; background: var(--bg-2); }
.langmenu__item[aria-current="true"] { font-weight: 600; }
.langmenu__mark { inline-size: 16px; flex: none; align-self: center; color: var(--ink); }
.langmenu__mark .icon { inline-size: 16px; block-size: 16px; display: block; }
.langmenu__native { flex: 0 1 auto; min-inline-size: 0; max-inline-size: 72%; }
.langmenu__english { flex: 0 1 auto; min-inline-size: 0; margin-inline-start: auto; padding-inline-start: 12px; color: var(--ink-3); font-size: var(--text-fine); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.langmenu__empty { margin: 0; padding: 16px; color: var(--ink-3); font-size: var(--text-small); }
/* Account menu (partials/acctmenu.html): same disclosure pattern as the language menu ------------------ */
.site-nav__signin { display: inline-flex; align-items: center; min-block-size: 36px; padding-inline: 10px; border-radius: var(--radius-pill);
color: var(--ink-2); font-size: var(--text-small); font-weight: 600; text-decoration: none; white-space: nowrap; }
.site-nav__signin:hover { color: var(--ink); background: var(--bg-3); }
.acctmenu { position: relative; display: inline-block; vertical-align: middle; }
.acctmenu__button {
list-style: none; display: inline-flex; align-items: center; gap: 8px; min-block-size: 36px; padding-inline: 4px 10px;
border-radius: var(--radius-pill); color: var(--ink-2); font-size: var(--text-small); cursor: pointer; user-select: none;
transition: color var(--dur-2) var(--ease-standard), background-color var(--dur-2) var(--ease-standard);
}
.acctmenu__button::-webkit-details-marker { display: none; }
.acctmenu__button:hover, .acctmenu[open] > .acctmenu__button { color: var(--ink); background: var(--bg-3); }
.acctmenu__avatar { inline-size: 28px; block-size: 28px; font-size: 13px; }
.acctmenu__chev { inline-size: 14px; block-size: 14px; transition: rotate var(--dur-3) var(--ease-out); }
.acctmenu[open] .acctmenu__chev { rotate: 180deg; }
.acctmenu__panel {
position: absolute; inset-block-start: calc(100% + 8px); inset-inline-end: 0; z-index: var(--z-pop);
inline-size: min(300px, calc(100vw - 2 * var(--gutter))); padding: 6px;
background: var(--surface-2); color: var(--ink); border-radius: var(--radius-md); box-shadow: var(--shadow-pop);
animation: wp-pop var(--dur-2) var(--ease-out);
}
.acctmenu__who { margin: 0; padding: 10px 12px 8px; border-block-end: 1px solid var(--line); color: var(--ink-3); font-size: var(--text-fine); overflow-wrap: anywhere; }
.acctmenu__list { list-style: none; margin: 0; padding: 6px 0; border-block-end: 1px solid var(--line); }
.acctmenu__signout { margin: 0; padding-block-start: 6px; }
.acctmenu__item {
display: flex; align-items: center; gap: 10px; inline-size: 100%; padding: 10px 12px; border: 0; border-radius: var(--radius-sm);
background: none; color: var(--ink); font: inherit; font-size: 15px; line-height: 1.35; text-align: start; text-decoration: none; cursor: pointer;
}
.acctmenu__item .icon { inline-size: 16px; block-size: 16px; color: var(--ink-3); }
.acctmenu__item:hover, .acctmenu__item:focus-visible { background: var(--bg-2); }
.acctmenu__item:focus-visible { outline-offset: -2px; }
.acctmenu__item[aria-current="page"] { font-weight: 600; }
@media (max-width: 899.98px) {
.js .site-nav__menu .acctmenu { display: block; }
.js .site-nav__menu .acctmenu__button { inline-size: 100%; min-block-size: 48px; padding-inline: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-md); font-size: 16px; }
.js .site-nav__menu .acctmenu__chev { margin-inline-start: auto; }
.js .site-nav__menu .acctmenu__panel { position: static; inline-size: auto; margin-block-start: 8px; box-shadow: none; border: 1px solid var(--line); animation: none; }
.js .site-nav__menu .site-nav__signin { justify-content: center; min-block-size: 48px; font-size: 16px; }
.js .site-nav__actions--minimal { flex-direction: row; align-items: center; gap: 4px; } /* not a drawer */
}
/* Minimal nav (brand, optional label, language, account or sign-in) fits from 320 px in every language, signed
in or out: the brand and the account control keep their size; the label shrinks first, with an ellipsis; the
language name drops out below 640 px and the label below 480 px (the stepper or page title says where you are;
the summary's aria-label still names the language, and the menu lists every language by name). */
.site-nav--minimal .brand, .site-nav--minimal .acctmenu, .site-nav--minimal .site-nav__signin { flex: none; }
.site-nav--minimal .site-nav__label { flex: 0 10 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-nav--minimal .site-nav__actions--minimal { flex: 0 1 auto; min-inline-size: 0; }
.site-nav--minimal .langmenu { flex: 0 1 auto; min-inline-size: 0; }
.site-nav--minimal .langmenu__button { max-inline-size: 100%; }
.site-nav--minimal .langmenu__globe, .site-nav--minimal .langmenu__chev { flex: none; }
.site-nav--minimal .langmenu__current { min-inline-size: 0; }
@media (max-width: 479.98px) {
.site-nav--minimal .site-nav__bar { gap: var(--space-xs); }
.site-nav--minimal .site-nav__label { display: none; }
.site-nav--minimal .acctmenu__label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 639.98px) { .site-nav--minimal .langmenu__current { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
/* Buttons ------------------------------------------------------------------ */
.btn {
--btn-bg: var(--ink); --btn-fg: var(--bg); --btn-ring: transparent; --btn-h: 48px; --btn-px: 24px;
position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-block-size: var(--btn-h); padding-block: 6px; padding-inline: var(--btn-px);
border: 0; border-radius: var(--radius-pill); background: var(--btn-bg); color: var(--btn-fg);
box-shadow: inset 0 0 0 1.5px var(--btn-ring);
font: inherit; font-size: 17px; font-weight: 600; line-height: 1.2; letter-spacing: calc(-0.01em * var(--track));
text-align: center; text-decoration: none; cursor: pointer; touch-action: manipulation; user-select: none;
transition: background-color var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard), transform var(--dur-1) var(--ease-standard);
}
.btn:hover { --btn-bg: color-mix(in srgb, var(--ink) 86%, var(--signal)); }
.btn:active { transform: scale(.975); }
.btn .icon { inline-size: 18px; block-size: 18px; }
.btn--secondary, .btn.secondary { --btn-bg: transparent; --btn-fg: var(--ink); --btn-ring: var(--line-2); }
.btn--secondary:hover, .btn.secondary:hover { --btn-bg: transparent; --btn-ring: var(--ink); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); }
.btn--ghost:hover { --btn-bg: var(--bg-3); }
.btn--danger { --btn-bg: var(--danger); --btn-fg: #FFFFFF; }
.btn--danger:hover { --btn-bg: color-mix(in srgb, var(--danger) 88%, #000); }
.btn--on-dark { --btn-bg: #F2F4F7; --btn-fg: #0E1014; }
.btn--sm, .btn.small { --btn-h: 36px; --btn-px: 16px; font-size: var(--text-small); }
.btn--lg { --btn-h: 56px; --btn-px: 32px; font-size: 18px; }
.btn--block { display: flex; inline-size: 100%; }
.btn--icon { --btn-px: 0; inline-size: var(--btn-h); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { color: transparent; pointer-events: none; }
.btn[aria-busy="true"] > * { visibility: hidden; }
.btn[aria-busy="true"]::after {
content: ""; position: absolute; inset: 0; margin: auto; inline-size: 18px; block-size: 18px; border-radius: 50%;
border: 2px solid var(--btn-fg); border-inline-end-color: transparent; animation: wp-spin .75s linear infinite;
}
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn-row--end { justify-content: flex-end; }
.btn-row--between { justify-content: space-between; }
@media (max-width: 479.98px) { .btn-row--stack-sm { flex-direction: column-reverse; align-items: stretch; } }
/* Quiet text button (secondary path) */
.text-btn {
display: inline-flex; align-items: center; gap: 6px; padding: 8px 2px; border: 0; background: none;
color: var(--ink-2); font: inherit; font-size: 15px; text-decoration: underline; text-decoration-color: var(--line-2);
text-underline-offset: 4px; cursor: pointer;
}
.text-btn:hover { color: var(--ink); text-decoration-color: currentColor; }
/* Hero (split) -------------------------------------------------------------- */
.hero-split { padding-block: clamp(40px, 2rem + 4vw, 112px) var(--space-section); overflow: clip; }
.hero-split__grid { display: grid; gap: clamp(40px, 5vw, 96px); align-items: center; }
.hero-split__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-m); min-inline-size: 0; }
.hero-split__copy > * { margin: 0; }
.hero-split__copy .intro { max-inline-size: 34ch; }
.hero-split__copy .actions { margin-block-start: var(--space-2xs); }
.hero-split__note { font-size: var(--text-small); color: var(--ink-3); max-inline-size: 46ch; }
.hero-split__visual { min-inline-size: 0; }
@media (min-width: 1024px) {
.hero-split__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.hero-split__visual--bleed { margin-inline-end: calc(-1 * var(--gutter)); }
.hero-split__visual--bleed > .window { border-start-end-radius: 0; border-end-end-radius: 0; border-inline-end: 0; }
}
@media (min-width: 1440px) { .hero-split:not(.hero-split--balanced) .hero-split__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
@media (max-width: 1023.98px) { .hero-split__copy .intro { max-inline-size: 40ch; } }
@media (max-width: 479.98px) {
.hero-split__copy .actions, .cta-band .actions { align-self: stretch; }
.hero-split__copy .actions .btn, .cta-band .actions .btn { flex: 1 1 100%; }
}
/* Product window and device frame ------------------------------------------ */
.window {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
box-shadow: var(--shadow-4); overflow: hidden; text-align: start; isolation: isolate;
}
.window__chrome, .window-bar {
display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; min-block-size: 46px; padding: 10px 16px;
border-block-end: 1px solid var(--line); background: var(--bg-2);
}
.window-bar { justify-content: space-between; padding: 14px 20px; }
.window__dots { display: flex; gap: 7px; flex: none; }
.window__dots i { inline-size: 11px; block-size: 11px; border-radius: 50%; background: var(--line-2); }
.window__title { flex: 1; min-inline-size: 0; font-size: var(--text-fine); line-height: 1.35; color: var(--ink-3); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Narrow windows: no dots, and the title may take two lines instead of cutting off the dates. A title made of
parts (app · dates) puts each part on its own line and hides the separator. */
@container window (max-width: 560px) {
.window__dots { display: none; }
.window__title { min-inline-size: min(100%, 9.5rem); white-space: normal; text-align: start; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; } /* too little room: the badge moves under the title */
.window__title:has(> bdi + bdi) { display: block; font-size: 0; }
.window__title:has(> bdi + bdi) > bdi { display: block; font-size: var(--text-fine); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
.window__body { display: grid; }
.window__split { display: grid; grid-template-columns: minmax(0, 1fr); }
.window__aside { padding: clamp(20px, 2vw, 28px); border-block-end: 1px solid var(--line); }
.window__main { min-inline-size: 0; }
@container window (min-width: 760px) {
.window__split { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); }
.window__aside { border-block-end: 0; border-inline-end: 1px solid var(--line); }
}
@container window (max-width: 759.98px) {
.window__aside { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 16px 32px; align-items: start; }
}
.window { container: window / inline-size; }
.figure > figcaption, .window + figcaption { margin-block-start: 16px; font-size: var(--text-fine); color: var(--ink-3); }
.device {
position: relative; inline-size: min(100%, 340px); aspect-ratio: 9 / 19; margin-inline: auto;
padding: 10px; border-radius: 48px; background: #0B0C0F;
box-shadow: var(--shadow-4), inset 0 0 0 1.5px rgb(255 255 255 / .12), inset 0 0 0 4px #1B1D22;
}
.device::before {
content: ""; position: absolute; inset-block-start: 20px; inset-inline-start: 50%; z-index: 2;
inline-size: 30%; block-size: 26px; margin-inline-start: -15%; border-radius: 20px; background: #0B0C0F;
}
.device__screen {
block-size: 100%; border-radius: 38px; overflow: hidden; background: var(--bg); color: var(--ink);
padding: 56px 18px 18px; display: flex; flex-direction: column; gap: 12px; font-size: 14px;
}
/* Cards ------------------------------------------------------------------------ */
.card {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
padding: clamp(20px, 1rem + 1vw, 36px);
}
.card p { max-inline-size: var(--measure); } /* wide grid cells on 2560 px screens stay readable */
.card--raised { border-color: transparent; box-shadow: var(--shadow-3); }
.card--tint { background: var(--bg-2); border-color: transparent; }
.card--link { display: block; color: inherit; text-decoration: none; transition: box-shadow var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
.card--link:hover { box-shadow: var(--shadow-3); transform: translateY(-2px); }
.section--tint .card { border-color: var(--tint-card-border); }
/* Bento / feature grid --------------------------------------------------------- */
.bento { --bento-cols: 1; display: grid; gap: var(--grid-gap); grid-template-columns: repeat(var(--bento-cols), minmax(0, 1fr)); grid-auto-flow: dense; }
.bento__item {
position: relative; display: flex; flex-direction: column; gap: var(--space-xs); min-inline-size: 0; min-block-size: 260px;
padding: clamp(24px, 1.2rem + 1.4vw, 44px); border-radius: var(--radius-xl); background: var(--bg-2); overflow: hidden;
}
.section--tint .bento__item { background: var(--surface); }
.bento__item > * { margin: 0; }
.bento__icon { inline-size: 40px; block-size: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.section--tint .bento__icon { background: var(--bg-2); box-shadow: none; }
.bento__icon .icon { inline-size: 22px; block-size: 22px; }
.bento__title { font-family: var(--font-display); font-size: var(--text-title); font-weight: 700; line-height: var(--leading-title); letter-spacing: calc(-0.02em * var(--track)); }
.bento__text { color: var(--ink-2); max-inline-size: 48ch; }
.bento__visual { margin-block-start: auto; padding-block-start: var(--space-m); }
.bento__item.theme-dark { background: var(--bg); color: var(--ink); }
@media (min-width: 768px) {
.bento { --bento-cols: 2; }
.bento__item--wide { grid-column: span 2; }
.bento__item--tall { grid-row: span 2; }
}
@media (min-width: 1280px) {
.bento { --bento-cols: 4; }
.bento--3 { --bento-cols: 3; }
.bento__item--hero { grid-column: span 2; grid-row: span 2; }
}
/* Stats band ------------------------------------------------------------------------ */
.stats { display: grid; gap: var(--space-l) var(--grid-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); margin: 0; }
.stat { display: flex; flex-direction: column; gap: 6px; padding-block-start: var(--space-m); border-block-start: 1px solid var(--line-2); margin: 0; }
.stat__value {
order: -1; font-family: var(--font-display); font-size: clamp(2.5rem, 1.6rem + 2.6vw, 5rem); font-weight: 700; line-height: 1;
letter-spacing: calc(-0.035em * var(--track)); font-variant-numeric: tabular-nums; color: var(--ink); margin: 0;
}
.stat__value--signal { color: var(--signal); }
.stat__label { font-size: var(--text-body); color: var(--ink-2); margin: 0; max-inline-size: 28ch; }
/* Steps ------------------------------------------------------------------------------ */
ol.steps, .steps { list-style: none; padding: 0; margin: 0; counter-reset: step; display: grid; gap: 30px; }
.steps > li { counter-increment: step; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; }
.steps > li::before {
content: counter(step); inline-size: 28px; block-size: 28px; border-radius: 50%; display: grid; place-items: center;
font-size: 13px; font-weight: 700; color: var(--signal-ink); background: var(--signal-2); margin-block-start: 1px;
}
.steps h3 { font-size: 18px; letter-spacing: calc(-0.015em * var(--track)); margin-block-end: 4px; }
.steps p { color: var(--ink-2); font-size: 16px; margin: 0; max-inline-size: var(--measure); }
@media (min-width: 1024px) {
.steps--row { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--grid-gap); }
.steps--row > li { grid-template-columns: minmax(0, 1fr); gap: 18px; position: relative; }
.steps--row > li:not(:last-child)::after {
content: ""; position: absolute; inset-block-start: 15px; inset-inline: 44px 0; border-block-start: 1px solid var(--line-2);
}
}
/* Tables: data table, responsive stacking, comparison ------------------------------ */
/* .table-wrap is a size container: the table adapts to its own width, not the viewport.
≥ 760 px full table · 560–760 px the .col-bar column hides · < 560 px .table--stack rows become records. */
.table-wrap { container: table / inline-size; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.section--tint .table-wrap { border-color: var(--tint-card-border); }
.table { inline-size: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.table :is(th, td) { padding: 14px 16px; text-align: start; vertical-align: middle; border-block-end: 1px solid var(--line); }
.table thead th { font-size: var(--text-fine); font-weight: 600; color: var(--ink-3); background: var(--bg-2); white-space: nowrap; }
.table tbody tr:last-child > * { border-block-end: 0; }
.table tbody tr { transition: background-color var(--dur-2) var(--ease-standard); }
.table tbody tr:hover { background: color-mix(in srgb, var(--bg-2) 70%, transparent); }
.table tbody th { font-weight: 600; }
.table :is(th, td).num, .table .num { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.table .sub { display: block; font-size: var(--text-fine); color: var(--ink-3); font-weight: 400; }
.table .decision { white-space: nowrap; }
.table--compact :is(th, td) { padding: 10px 12px; }
.table .col-bar { inline-size: 30%; min-inline-size: 140px; }
@container table (max-width: 759.98px) { .table .col-bar { display: none; } }
@container table (max-width: 559.98px) {
.table--stack thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
.table--stack, .table--stack tbody, .table--stack tr, .table--stack :is(th, td) { display: block; }
.table--stack tr { padding: 6px 16px 10px; border-block-end: 1px solid var(--line); }
.table--stack tbody tr:last-child { border-block-end: 0; }
.table--stack :is(th, td) { position: relative; border: 0 !important; padding: 7px 0; padding-inline-start: 42%; min-block-size: 36px; text-align: end; white-space: normal; }
.table--stack :is(th, td)[data-label]::before {
content: attr(data-label); position: absolute; inset-inline-start: 0; inset-block-start: 7px; max-inline-size: 40%;
color: var(--ink-3); font-size: var(--text-fine); font-weight: 500; text-align: start; line-height: 1.6;
}
.table--stack th[scope="row"] { padding-inline-start: 0; padding-block: 10px 4px; text-align: start; font-size: 17px; }
.table--stack .col-bar { display: block; inline-size: auto; min-inline-size: 0; }
.table--stack tbody tr:hover { background: none; }
}
.compare { inline-size: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.compare :is(th, td) { padding: 16px; border-block-end: 1px solid var(--line); text-align: center; vertical-align: middle; }
.compare thead th { font-size: var(--text-small); font-weight: 650; color: var(--ink); vertical-align: bottom; }
.compare tbody th { text-align: start; font-weight: 500; color: var(--ink); inline-size: 40%; }
.compare .compare__us { background: var(--bg-2); }
.compare thead .compare__us { border-start-start-radius: var(--radius-md); border-start-end-radius: var(--radius-md); }
.compare tbody tr:last-child .compare__us { border-end-start-radius: var(--radius-md); border-end-end-radius: var(--radius-md); }
.compare tbody tr:last-child > * { border-block-end: 0; }
.compare__val { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; font-size: var(--text-fine); color: var(--ink-2); }
.compare__val::before { content: ""; inline-size: 22px; block-size: 22px; border-radius: 50%; background: var(--bg-3); }
.compare__val--yes::before { background: var(--signal); -webkit-mask: var(--i-check) center / 14px no-repeat, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: var(--i-check) center / 14px no-repeat, linear-gradient(#000 0 0); mask-composite: exclude; }
.compare__val--no::before { background: var(--line-input); -webkit-mask: var(--i-cross) center / 12px no-repeat, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: var(--i-cross) center / 12px no-repeat, linear-gradient(#000 0 0); mask-composite: exclude; }
.compare__val--part::before { background: linear-gradient(to var(--fill-to, right), var(--warn) 50%, transparent 50%); box-shadow: inset 0 0 0 2px var(--warn); }
[dir="rtl"] .compare__val--part { --fill-to: left; }
@media (max-width: 639.98px) {
.compare :is(th, td) { padding: 12px 6px; }
.compare thead th { font-size: var(--text-micro); }
.compare tbody th { font-size: var(--text-small); padding-inline-start: 0; }
.compare__val { font-size: 11px; }
}
/* Pricing ------------------------------------------------------------------------- */
.plans { display: grid; gap: var(--grid-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); align-items: stretch; max-inline-size: 1560px; margin-inline: auto; }
.plan {
position: relative; display: flex; flex-direction: column; padding: clamp(24px, 1.2rem + 1.2vw, 40px);
border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface);
}
.section--tint .plan { border-color: var(--tint-card-border); }
.plan--featured, .plan.pick { border-color: transparent; box-shadow: inset 0 0 0 2px var(--ink), var(--shadow-3); }
.plan > * { margin-block: 0; }
.plan__badge { position: absolute; inset-block-start: 0; inset-inline-start: clamp(24px, 1.2rem + 1.2vw, 40px); transform: translateY(-50%); }
.plan .title, .plan__name { margin-block-end: 4px; }
.plan .for, .plan__for { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
@media (min-width: 768px) { .plan .for, .plan__for { min-block-size: 3em; } }
.price, .plan__price {
font-family: var(--font-display); font-size: clamp(2.5rem, 2rem + 1.2vw, 3.25rem); font-weight: 700;
letter-spacing: calc(-0.035em * var(--track)); line-height: 1.05; margin-block: 22px 4px;
}
.price small { font-family: var(--font-text); font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--ink-2); }
.plan__period { font-size: var(--text-small); color: var(--ink-2); }
.plan ul { list-style: none; padding: 0; margin: 24px 0 32px; font-size: 15px; display: grid; gap: 12px; }
.plan li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; color: var(--ink-2); }
.plan li::before { content: ""; inline-size: 18px; block-size: 18px; margin-block-start: 2px; background: var(--signal); -webkit-mask: var(--i-check) center / 16px no-repeat; mask: var(--i-check) center / 16px no-repeat; }
.plan .btn { margin-block-start: auto; }
.plans-note, .founding { text-align: center; margin-block-start: 28px; font-size: 15px; color: var(--ink-2); }
/* FAQ accordion --------------------------------------------------------------------- */
.faq { border-block-start: 1px solid var(--line-2); }
.faq details { border-block-end: 1px solid var(--line); }
.faq summary {
list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 22px; cursor: pointer;
font-family: var(--font-display); font-size: clamp(1.0625rem, 1rem + .3vw, 1.3125rem); font-weight: 600; line-height: 1.35;
letter-spacing: calc(-0.017em * var(--track));
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: ""; flex: none; inline-size: 20px; block-size: 20px; background: var(--ink-2);
-webkit-mask: var(--i-plus) center / 20px no-repeat; mask: var(--i-plus) center / 20px no-repeat;
transition: rotate var(--dur-3) var(--ease-out), background-color var(--dur-2) var(--ease-standard);
}
.faq summary:hover::after { background: var(--ink); }
.faq details[open] summary::after { rotate: 45deg; }
.faq summary:focus-visible { outline-offset: 4px; border-radius: var(--radius-xs); }
.faq details > :not(summary) { margin: 0; padding-block-end: 22px; color: var(--ink-2); max-inline-size: 68ch; }
.faq details > :not(summary) + :not(summary) { margin-block-start: -10px; }
.faq details::details-content {
block-size: 0; overflow: clip;
transition: block-size var(--dur-3) var(--ease-out), content-visibility var(--dur-3) allow-discrete;
}
.faq details[open]::details-content { block-size: auto; }
/* CTA band ---------------------------------------------------------------------------- */
.cta-band { padding-block: clamp(80px, 4rem + 6vw, 184px); text-align: center; }
.cta-band__inner { display: grid; justify-items: center; gap: var(--space-m); }
.cta-band__inner > * { margin: 0; }
.cta-band .headline { max-inline-size: 20ch; }
.cta-band .intro { max-inline-size: 44ch; }
.cta-band .actions { justify-content: center; margin-block-start: var(--space-2xs); }
/* Dark bands on a dark page: .theme-dark repaints with the page's own colours, so the band would merge with
the section above. Lift it with a soft tint and a hairline (dark tiles get a hairline ring). */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) :is(.cta-band, .section).theme-dark { background: linear-gradient(var(--bg-2), var(--bg)); border-block-start: 1px solid var(--line); }
:root:not([data-theme="light"]) .bento__item.theme-dark { box-shadow: inset 0 0 0 1px var(--line); }
}
:root[data-theme="dark"] :is(.cta-band, .section).theme-dark { background: linear-gradient(var(--bg-2), var(--bg)); border-block-start: 1px solid var(--line); }
:root[data-theme="dark"] .bento__item.theme-dark { box-shadow: inset 0 0 0 1px var(--line); }
/* Site footer --------------------------------------------------------------------------- */
.site-footer {
background: var(--bg-2); border-block-start: 1px solid var(--line); color: var(--ink-2); font-size: var(--text-small);
padding-block: clamp(48px, 2rem + 3vw, 88px) calc(32px + env(safe-area-inset-bottom, 0px));
}
.site-footer__grid { display: grid; gap: 40px var(--grid-gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-footer__brand { grid-column: 1 / -1; display: grid; gap: 14px; align-content: start; }
.site-footer__brand p { margin: 0; max-inline-size: 36ch; }
.site-footer h2 { font-family: var(--font-text); font-size: var(--text-fine); font-weight: 600; color: var(--ink); letter-spacing: 0; margin-block-end: 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-footer a:not(.brand):not(.langmenu__item) { color: var(--ink-2); text-decoration: none; }
.site-footer a:not(.brand):not(.langmenu__item):hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.site-footer__lang { grid-column: 1 / -1; }
.site-footer__lang .langmenu__button { margin-inline-start: -10px; }
@media (min-width: 768px) { .site-footer .langmenu--up .langmenu__panel { inset-inline: auto 0; } }
.site-footer__bottom {
display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; margin-block-start: clamp(40px, 4vw, 64px);
padding-block-start: 20px; border-block-start: 1px solid var(--line); color: var(--ink-3); font-size: var(--text-fine);
}
.site-footer__bottom p { margin: 0; }
@media (min-width: 768px) {
.site-footer__grid { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); }
.site-footer__brand, .site-footer__lang { grid-column: auto; }
}
@media (min-width: 1280px) { .site-footer__grid { grid-template-columns: minmax(0, 5fr) repeat(2, minmax(0, 2fr)) minmax(0, 3fr); } }
/* Forms ----------------------------------------------------------------------------- */
.form { display: grid; gap: var(--space-m); }
.form-row { display: grid; gap: var(--space-s) var(--space-m); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.field { display: grid; gap: 8px; margin-block-end: 20px; align-content: start; }
.form > .field, .form-row > .field, .stack > .field { margin-block-end: 0; }
.field > label, .field__label, .fieldset > legend { font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.field__optional { font-weight: 400; color: var(--ink-3); }
.hint, .field__hint, .field .hint { font-size: var(--text-fine); color: var(--ink-3); line-height: 1.45; }
.field__error, .field__success { display: flex; align-items: flex-start; gap: 6px; font-size: var(--text-fine); font-weight: 500; line-height: 1.45; }
.field__error { color: var(--danger); }
.field__success { color: var(--signal-ink); }
.field__error .icon, .field__success .icon { inline-size: 16px; block-size: 16px; margin-block-start: 1px; }
.fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 12px; min-inline-size: 0; }
.fieldset > legend { padding: 0; margin-block-end: 12px; }
.input,
input:is([type="text"], [type="password"], [type="number"], [type="email"], [type="date"], [type="url"], [type="search"], [type="tel"], [type="time"], [type="datetime-local"], [type="month"]),
textarea, select {
display: block; inline-size: 100%; min-block-size: 48px; padding: 11px 14px;
font: inherit; font-size: max(16px, 1rem); line-height: 1.4; color: var(--ink);
background: var(--surface); border: 1px solid var(--line-input); border-radius: var(--radius-sm);
transition: border-color var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard), background-color var(--dur-2) var(--ease-standard);
}
textarea { min-block-size: 140px; resize: vertical; }
.input--mono, textarea.input--mono { font-family: var(--font-mono); font-size: 14px; line-height: 1.6; }
::placeholder { color: var(--ink-3); opacity: 1; }
:is(.input, input, textarea, select):hover:not(:disabled):not(:focus) { border-color: var(--ink-3); }
:is(.input, input, textarea, select):focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 22%, transparent); }
:is(.input, input, textarea, select)[aria-invalid="true"], .is-invalid :is(.input, input, textarea, select) { border-color: var(--danger); }
:is(.input, input, textarea, select)[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 20%, transparent); }
.is-valid :is(.input, input, textarea, select) { border-color: var(--signal); }
:is(.input, input, textarea, select):disabled { background: var(--bg-2); color: var(--ink-3); cursor: not-allowed; }
input[type="file"] { font-size: var(--text-small); }
input[type="number"] { font-variant-numeric: tabular-nums; }
.select { position: relative; display: block; }
.select select { appearance: none; -webkit-appearance: none; padding-inline-end: 42px; cursor: pointer; }
.select::after {
content: ""; position: absolute; inset-inline-end: 14px; inset-block-start: 50%; inline-size: 16px; block-size: 16px; margin-block-start: -8px;
background: var(--ink-2); -webkit-mask: var(--i-chevron) center / 16px no-repeat; mask: var(--i-chevron) center / 16px no-repeat; pointer-events: none;
}
.input-group { display: flex; align-items: stretch; border: 1px solid var(--line-input); border-radius: var(--radius-sm); background: var(--surface); transition: border-color var(--dur-2), box-shadow var(--dur-2); }
.input-group:focus-within { border-color: var(--focus); box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 22%, transparent); }
.input-group:hover:not(:focus-within) { border-color: var(--ink-3); }
.input-group > :is(input, .input) { border: 0; box-shadow: none !important; background: transparent; min-inline-size: 0; flex: 1; }
.input-group__addon { display: flex; align-items: center; padding-inline: 14px; color: var(--ink-3); font-size: 15px; white-space: nowrap; }
.input-group__addon:first-child { padding-inline-end: 0; }
.input-group__addon:last-child { padding-inline-start: 0; }
.check { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 15px; line-height: 1.45; }
.check input { flex: none; inline-size: 20px; block-size: 20px; margin: 1px 0 0; accent-color: var(--ink); cursor: pointer; }
.check .hint { display: block; }
/* Segmented control: radios (preferred), buttons with aria-pressed, or legacy spans with .on */
.segmented {
display: inline-flex; max-inline-size: 100%; padding: 3px; gap: 2px; border-radius: 12px; background: var(--bg-3);
font-size: var(--text-small); font-weight: 600; vertical-align: middle;
}
.segmented--block { display: flex; }
.segmented { flex-wrap: wrap; }
@media (max-width: 479.98px) {
.segmented--stack-sm { display: flex; flex-direction: column; }
.segmented > label > span, .segmented > button, .segmented > span { padding-inline: 10px; }
}
.segmented > label { position: relative; display: flex; flex: 1 1 auto; min-inline-size: 0; }
.segmented input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.segmented > label > span, .segmented > button, .segmented > span {
flex: 1; display: flex; align-items: center; justify-content: center; min-block-size: 32px; padding: 5px 14px; border: 0;
border-radius: 9px; background: transparent; color: var(--ink-2); font: inherit; text-align: center; line-height: 1.25;
transition: background-color var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard);
}
.segmented > label:hover > span, .segmented > button:hover, .segmented > span:hover { color: var(--ink); }
.segmented > label > input:checked + span, .segmented > button[aria-pressed="true"], .segmented > span.on { background: var(--seg-on, var(--surface)); color: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 1px 1px rgb(0 0 0 / .04); }
.theme-dark .segmented, :root[data-theme="dark"] .segmented { --seg-on: #3A3F48; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .segmented { --seg-on: #3A3F48; } }
.segmented input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 1px; }
.segmented input:disabled + span, .segmented button:disabled { opacity: .45; cursor: not-allowed; }
/* Choice cards: big radio/checkbox targets */
.choice-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.choice-card {
position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px;
padding: 18px; border: 1.5px solid var(--line); border-radius: var(--radius-md); background: var(--surface); cursor: pointer;
transition: border-color var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard);
}
.choice-card:hover { border-color: var(--line-input); }
.choice-card > input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.choice-card:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.choice-card:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.choice-card:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.choice-card:has(input:disabled):hover { border-color: var(--line); }
.choice-card__icon { inline-size: 40px; block-size: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--bg-2); color: var(--ink-2); font-weight: 700; font-size: 15px; }
.choice-card__icon .icon { inline-size: 22px; block-size: 22px; }
.choice-card__title { display: block; font-weight: 650; font-size: 16px; line-height: 1.35; }
.choice-card__text { display: block; font-size: var(--text-small); color: var(--ink-2); line-height: 1.45; }
.choice-card__meta { justify-self: end; display: flex; align-items: center; gap: 10px; }
.choice-card__check { inline-size: 22px; block-size: 22px; border-radius: 50%; border: 1.5px solid var(--line-input); flex: none; transition: background-color var(--dur-2), border-color var(--dur-2); }
.choice-card:has(input:checked) .choice-card__check { border-color: var(--ink); background: var(--ink); box-shadow: inset 0 0 0 4px var(--surface); }
.choice-card:has(input[type="checkbox"]) .choice-card__check { border-radius: 6px; }
.choice-card:has(input[type="checkbox"]:checked) .choice-card__check { box-shadow: none; -webkit-mask: var(--i-check) center / 14px no-repeat, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: var(--i-check) center / 14px no-repeat, linear-gradient(#000 0 0); mask-composite: exclude; }
@media (max-width: 479.98px) { .choice-card { grid-template-columns: auto minmax(0, 1fr); } .choice-card__meta { grid-column: 2; justify-self: start; } }
/* File drop zone: the native file input covers the zone, so click, keyboard and drag-and-drop
work without JavaScript. site.js shows the chosen file and the drag state. */
.dropzone {
position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 8px;
padding: clamp(24px, 3vw, 40px) 24px; text-align: center; /* one shrinkable column: long file names ellipsize */
border: 1.5px dashed var(--line-input); border-radius: var(--radius-lg); background: var(--surface);
transition: border-color var(--dur-2) var(--ease-standard), background-color var(--dur-2) var(--ease-standard);
}
.dropzone:hover, .dropzone.is-dragover { border-color: var(--ink); background: var(--bg-2); }
.dropzone.is-dragover { border-style: solid; }
.dropzone:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.dropzone__input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; opacity: 0; cursor: pointer; z-index: 1; }
.dropzone__icon { inline-size: 44px; block-size: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--bg-3); color: var(--ink-2); }
.dropzone__icon .icon { inline-size: 22px; block-size: 22px; }
.dropzone__title { font-weight: 600; font-size: 16px; }
.dropzone__hint { font-size: var(--text-fine); color: var(--ink-3); }
.dropzone__file {
position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; max-inline-size: 100%;
padding: 8px 8px 8px 12px; border-radius: var(--radius-sm); background: var(--bg-2); font-size: var(--text-small); text-align: start;
}
.dropzone__file .icon { inline-size: 18px; block-size: 18px; color: var(--ink-2); }
.dropzone__name { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.dropzone__remove { display: grid; place-items: center; inline-size: 28px; block-size: 28px; flex: none; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); }
.dropzone__remove:hover { background: var(--bg-3); color: var(--ink); }
.dropzone__remove .icon { inline-size: 16px; block-size: 16px; }
.dropzone.has-file { border-style: solid; border-color: var(--line-2); }
.dropzone.has-file .dropzone__icon { background: var(--signal-2); color: var(--signal-ink); }
.dropzone.is-invalid { border-color: var(--danger); }
/* Status line under a form (legacy name kept) */
.message { min-block-size: 22px; font-size: var(--text-small); font-weight: 600; margin-block-start: 10px; }
.message.ok { color: var(--signal-ink); }
.message.err { color: var(--danger); }
/* Alerts --------------------------------------------------------------------------- */
.alert {
--alert-bg: var(--bg-2); --alert-accent: var(--ink-2);
display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: start; gap: 12px;
padding: 14px 16px; border-radius: var(--radius-md); background: var(--alert-bg); color: var(--ink); font-size: 15px; line-height: 1.5;
}
.alert > .icon { inline-size: 20px; block-size: 20px; color: var(--alert-accent); margin-block-start: 1px; }
.alert__body > * { margin: 0; max-inline-size: var(--measure); }
.alert__body > * + * { margin-block-start: 4px; }
.alert__title { font-weight: 650; }
.alert__close { display: grid; place-items: center; inline-size: 28px; block-size: 28px; margin: -4px -6px 0 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); }
.alert__close:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.alert__close .icon { inline-size: 16px; block-size: 16px; }
.alert--info { --alert-bg: var(--info-2); --alert-accent: var(--info); }
.alert--success { --alert-bg: var(--signal-2); --alert-accent: var(--signal-ink); }
.alert--warning { --alert-bg: var(--warn-2); --alert-accent: var(--warn); }
.alert--danger { --alert-bg: var(--danger-2); --alert-accent: var(--danger); }
.alert:not(:has(.alert__close)) { grid-template-columns: 20px minmax(0, 1fr); }
/* Toasts (created by WP.toast) */
.toasts {
position: fixed; inset-inline: 0; inset-block-end: max(16px, env(safe-area-inset-bottom, 0px)); z-index: var(--z-toast);
display: grid; justify-items: center; gap: 8px; padding-inline: var(--gutter); pointer-events: none;
}
.toast {
pointer-events: auto; display: flex; align-items: center; gap: 12px; max-inline-size: min(560px, 100%);
padding: 12px 12px 12px 16px; border-radius: var(--radius-md); background: #1B1E24; color: #F2F4F7;
box-shadow: 0 0 0 1px rgb(255 255 255 / .06), 0 16px 40px -10px rgb(0 0 0 / .45); font-size: 15px; line-height: 1.4;
animation: wp-toast-in var(--dur-3) var(--ease-spring);
}
.toast > .icon { inline-size: 20px; block-size: 20px; flex: none; }
.toast--success > .icon { color: #3FCF9B; }
.toast--error > .icon { color: #F07A72; }
.toast--info > .icon { color: #7FA8F0; }
.toast__msg { flex: 1; min-inline-size: 0; }
.toast__action { flex: none; border: 0; background: none; color: #F2F4F7; font: inherit; font-weight: 650; padding: 6px 8px; border-radius: 8px; }
.toast__action:hover { background: rgb(255 255 255 / .1); }
.toast__close { flex: none; display: grid; place-items: center; inline-size: 28px; block-size: 28px; border: 0; border-radius: 50%; background: none; color: #B3B9C3; }
.toast__close:hover { background: rgb(255 255 255 / .1); color: #fff; }
.toast__close .icon { inline-size: 16px; block-size: 16px; }
.toast.is-leaving { opacity: 0; transform: translateY(8px); transition: opacity var(--dur-2), transform var(--dur-2); }
/* Badges, tags, decisions, dots ---------------------------------------------------- */
.badge, .tag {
--badge-bg: var(--bg-3); --badge-fg: var(--ink-2);
display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-pill);
background: var(--badge-bg); color: var(--badge-fg); font-size: var(--text-micro); font-weight: 600; line-height: 1.5;
letter-spacing: 0; white-space: nowrap; vertical-align: middle;
}
.tag { --badge-bg: var(--signal-2); --badge-fg: var(--signal-ink); } /* legacy: tag = signal */
.tag.muted, .badge--neutral { --badge-bg: var(--bg-3); --badge-fg: var(--ink-2); }
.badge--signal { --badge-bg: var(--signal-2); --badge-fg: var(--signal-ink); }
.badge--warn { --badge-bg: var(--warn-2); --badge-fg: var(--warn); }
.badge--danger { --badge-bg: var(--danger-2); --badge-fg: var(--danger); }
.badge--info { --badge-bg: var(--info-2); --badge-fg: var(--info); }
.badge--solid { --badge-bg: var(--ink); --badge-fg: var(--bg); }
.badge--outline { --badge-bg: transparent; box-shadow: inset 0 0 0 1px var(--line-2); }
.badge .icon { inline-size: 14px; block-size: 14px; }
.dot { display: inline-block; inline-size: 8px; block-size: 8px; border-radius: 50%; flex: none; background: var(--ink-3); }
.dot--signal, .dot.rebook { background: var(--signal); }
.dot--warn, .dot.test { background: var(--warn); }
.dot--danger, .dot.pause { background: var(--danger); }
.decision { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; font-size: var(--text-small); white-space: nowrap; }
.decision::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; background: currentColor; flex: none; }
.decision--rebook { color: var(--signal-ink); }
.decision--test { color: var(--warn); }
.decision--pause { color: var(--danger); }
.avatar {
display: grid; place-items: center; inline-size: 32px; block-size: 32px; flex: none; border-radius: 50%;
background: var(--bg-2); border: 1px solid var(--line); color: var(--ink-2); font-size: var(--text-micro); font-weight: 700;
}
/* Tooltips: hover and focus; Esc dismisses (site.js keeps the bubble on screen) ---------- */
.tip { position: relative; display: inline-flex; vertical-align: middle; }
.tip__trigger {
display: grid; place-items: center; inline-size: 24px; block-size: 24px; padding: 0; border: 0; border-radius: 50%;
background: transparent; color: var(--ink-3); cursor: help;
}
.tip__trigger:hover { color: var(--ink); background: var(--bg-3); }
.tip__trigger .icon { inline-size: 18px; block-size: 18px; }
.tip__bubble {
position: absolute; inset-block-end: calc(100% + 8px); left: 50%; z-index: var(--z-pop);
display: none; inline-size: max-content; max-inline-size: min(280px, calc(100vw - 32px));
padding: 8px 12px; border-radius: 10px; background: #1B1E24; color: #F2F4F7;
font-size: var(--text-fine); font-weight: 500; line-height: 1.45; text-align: start; letter-spacing: 0;
box-shadow: 0 8px 24px -6px rgb(0 0 0 / .35);
translate: calc(-50% + var(--tip-shift, 0px)) 0;
opacity: 1; transition: opacity var(--dur-2) var(--ease-standard), translate var(--dur-2) var(--ease-out), display var(--dur-2) allow-discrete;
}
.tip:is(:hover, :focus-within):not(.is-dismissed) .tip__bubble { display: block; }
@starting-style { .tip:is(:hover, :focus-within) .tip__bubble { opacity: 0; translate: calc(-50% + var(--tip-shift, 0px)) 4px; } }
.tip--below .tip__bubble { inset-block: calc(100% + 8px) auto; }
/* Metric: one estimate with its range (the core reading of every report) ----------------- */
.metric { display: grid; gap: 6px; align-content: start; }
.metric > * { margin: 0; }
.metric__label { font-size: var(--text-fine); color: var(--ink-3); font-weight: 500; }
.metric__value {
font-family: var(--font-display); font-size: clamp(2.5rem, 2rem + 1.4vw, 3.5rem); font-weight: 700; line-height: 1;
letter-spacing: calc(-0.04em * var(--track)); font-variant-numeric: tabular-nums; color: var(--ink);
}
.metric__value--signal { color: var(--signal); }
.metric__range { font-size: var(--text-small); color: var(--ink-2); }
.metric--sm .metric__value { font-size: 1.75rem; letter-spacing: calc(-0.03em * var(--track)); }
.dl { display: grid; gap: 10px; margin: 0; font-size: var(--text-small); }
.dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.dl dt { color: var(--ink-2); }
.dl dd { margin: 0; font-weight: 650; font-size: 16px; color: var(--ink); font-variant-numeric: tabular-nums; text-align: end; }
/* Range bar: estimate (point) with its likely range (band) and an optional threshold (mark).
Positions are percentages of the scale: style="--lo:36%; --mid:43%; --hi:50%; --mark:62%". */
.rangebar {
--rb-color: var(--signal); --rb-h: 8px;
position: relative; display: block; block-size: 22px; min-inline-size: 80px;
}
.rangebar__track { position: absolute; inset-inline: 0; inset-block-start: 50%; block-size: 2px; margin-block-start: -1px; border-radius: 2px; background: var(--line); }
.rangebar__band {
position: absolute; inset-block-start: 50%; block-size: var(--rb-h); margin-block-start: calc(var(--rb-h) / -2);
inset-inline-start: var(--lo, 0%); inline-size: max(4px, calc(var(--hi, 0%) - var(--lo, 0%)));
border-radius: var(--rb-h); background: color-mix(in srgb, var(--rb-color) 30%, transparent);
transform-origin: var(--origin-start); transition: transform var(--dur-5) var(--ease-out);
}
.rangebar__point {
position: absolute; inset-block-start: 50%; inset-inline-start: var(--mid, 0%);
inline-size: 12px; block-size: 12px; margin-block-start: -6px; margin-inline-start: -6px; border-radius: 50%;
background: var(--rb-color); box-shadow: 0 0 0 2px var(--surface);
transition: opacity var(--dur-3) var(--ease-standard) calc(var(--dur-5) * .5);
}
.rangebar__mark {
position: absolute; inset-block: 0; inset-inline-start: var(--mark, 100%); inline-size: 0;
border-inline-start: 1.5px dashed var(--ink-3);
}
.rangebar--warn { --rb-color: var(--warn); }
.rangebar--danger { --rb-color: var(--danger); }
.rangebar--muted { --rb-color: var(--ink-3); }
.rangebar--lg { --rb-h: 12px; block-size: 28px; }
.rangebar-scale { display: flex; justify-content: space-between; font-size: var(--text-micro); color: var(--ink-3); margin-block-start: 2px; }
.reveal-ready [data-reveal]:not(.is-revealed) .rangebar__band { transform: scaleX(0); }
.reveal-ready [data-reveal]:not(.is-revealed) .rangebar__point { opacity: 0; }
/* Ranked list: the product's signature view (who to rebook, with ranges) -------------------
The list is one grid and every row a subgrid of it, so columns line up across rows while the value and
decision columns size to their widest content in the page's language ("Wieder buchen", "Probar de
nuevo"). The name column keeps room for a handle before the bar shrinks. The list's own width decides:
> 560 px name · range bar · value · decision
≤ 560 px the bar hides and the name spans its track
≤ 340 px the value and the avatar hide too
The name spans with negative line numbers, so rows still lay out if a page gives them its own columns. */
.ranklist {
container: ranklist / inline-size;
display: grid; column-gap: 18px;
grid-template-columns: minmax(min(12.5rem, 38%), 1.3fr) minmax(0, 2fr) auto auto;
}
.ranklist__head, .ranklist__row {
grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center;
padding: 13px clamp(16px, 2vw, 24px);
}
.ranklist__head { align-items: end; padding-block: 14px 8px; font-size: var(--text-micro); font-weight: 500; line-height: 1.3; color: var(--ink-3); }
.ranklist__row + .ranklist__row { border-block-start: 1px solid var(--line); }
.ranklist__head > * { font-size: inherit; font-weight: inherit; color: inherit; }
.ranklist__who { display: flex; align-items: center; gap: 12px; min-inline-size: 0; }
.ranklist__who > span:last-child { min-inline-size: 0; }
.ranklist__name { display: block; font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ranklist__meta { display: block; font-size: var(--text-micro); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ranklist__value, .ranklist__call { text-align: end; }
.ranklist__row > .ranklist__value { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }
.ranklist__value small, .ranklist__call small { display: block; font-size: var(--text-micro); font-weight: 500; color: var(--ink-3); white-space: nowrap; }
.ranklist__call .decision { justify-content: flex-end; }
.ranklist__bar .rangebar { min-inline-size: 0; } /* just above 560 px the bar track can be narrower than 80 px */
@container ranklist (max-width: 560px) {
.ranklist__head, .ranklist__row { column-gap: 12px; }
.ranklist__bar { display: none; }
:is(.ranklist__head, .ranklist__row) > :first-child { grid-column: 1 / -3; }
}
@container ranklist (max-width: 340px) {
.ranklist__value { display: none; }
.ranklist__who .avatar { display: none; }
:is(.ranklist__head, .ranklist__row) > :first-child { grid-column: 1 / -2; }
}
/* Browsers without subgrid (before 2023): each row is its own grid with fixed value and decision widths. */
@supports not (grid-template-columns: subgrid) {
.ranklist { display: block; }
.ranklist__head, .ranklist__row { column-gap: 18px; grid-template-columns: minmax(0, 1.3fr) minmax(0, 2fr) minmax(84px, auto) minmax(112px, auto); }
@container ranklist (max-width: 560px) { .ranklist__head, .ranklist__row { column-gap: 12px; grid-template-columns: minmax(0, 1fr) 72px 112px; } }
@container ranklist (max-width: 340px) { .ranklist__head, .ranklist__row { grid-template-columns: minmax(0, 1fr) 112px; } }
}
/* Wizard stepper -------------------------------------------------------------------------- */
.stepper { list-style: none; margin: 0; padding: 0; display: flex; counter-reset: stp; }
.stepper__item { counter-increment: stp; position: relative; flex: 1 1 0; min-inline-size: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: var(--ink-3); font-size: var(--text-fine); font-weight: 500; }
.stepper__item::before {
content: counter(stp); position: relative; z-index: 1; display: grid; place-items: center; inline-size: 28px; block-size: 28px; border-radius: 50%;
border: 1.5px solid var(--line-2); background: var(--bg); color: var(--ink-3); font-size: 13px; font-weight: 700;
transition: background-color var(--dur-3), border-color var(--dur-3), color var(--dur-3);
}
.stepper__item:not(:last-child)::after {
content: ""; position: absolute; inset-block-start: 14px; inset-inline-start: calc(50% + 20px); inline-size: calc(100% - 40px);
border-block-start: 1.5px solid var(--line-2);
}
.stepper__item.is-done { color: var(--ink-2); }
.stepper__item.is-done::before { content: ""; border-color: var(--signal); background: var(--signal); -webkit-mask: var(--i-check) center / 14px no-repeat, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: var(--i-check) center / 14px no-repeat, linear-gradient(#000 0 0); mask-composite: exclude; }
.stepper__item.is-done:not(:last-child)::after { border-color: var(--signal); }
.stepper__item[aria-current="step"] { color: var(--ink); font-weight: 650; }
.stepper__item[aria-current="step"]::before { border-color: var(--ink); color: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 8%, transparent); }
@media (max-width: 559.98px) {
.stepper__item:not([aria-current="step"]) .stepper__label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.stepper--vertical { flex-direction: column; gap: 0; }
.stepper--vertical .stepper__item { flex-direction: row; text-align: start; gap: 12px; padding-block: 10px; font-size: 15px; }
.stepper--vertical .stepper__item:not(:last-child)::after { inset-block-start: 42px; inset-inline-start: 13px; inline-size: 0; block-size: calc(100% - 32px); border-block-start: 0; border-inline-start: 1.5px solid var(--line-2); }
.stepper--vertical .stepper__item.is-done:not(:last-child)::after { border-color: var(--signal); }
.stepper--vertical .stepper__item .stepper__label { position: static !important; inline-size: auto !important; block-size: auto !important; overflow: visible !important; clip-path: none !important; white-space: normal !important; }
/* Task list: what is happening right now (analysis progress) ------------------------------ */
.tasklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.tasklist > li { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: 16px; }
.tasklist > li::before { content: ""; flex: none; inline-size: 20px; block-size: 20px; border-radius: 50%; border: 2px solid var(--line-2); }
.tasklist > li.is-active { color: var(--ink); }
.tasklist > li.is-active::before { border-color: var(--ink); border-inline-end-color: transparent; animation: wp-spin .8s linear infinite; }
.tasklist > li.is-done { color: var(--ink-2); }
.tasklist > li.is-warn { color: var(--ink); }
.tasklist > li.is-warn::before { border-color: var(--warn); background: var(--warn-2); }
.tasklist > li.is-done::before { border-color: var(--signal); background: var(--signal); -webkit-mask: var(--i-check) center / 12px no-repeat, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: var(--i-check) center / 12px no-repeat, linear-gradient(#000 0 0); mask-composite: exclude; }
/* Meter (determinate progress) */
.meter { position: relative; block-size: 6px; border-radius: 6px; background: var(--bg-3); overflow: hidden; }
.meter > span { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: var(--value, 0%); border-radius: inherit; background: var(--ink); transition: inline-size var(--dur-4) var(--ease-out); }
.meter--signal > span { background: var(--signal); }
.spinner { display: inline-block; inline-size: 20px; block-size: 20px; flex: none; border-radius: 50%; border: 2px solid currentColor; border-inline-end-color: transparent; animation: wp-spin .8s linear infinite; vertical-align: middle; }
/* Skeleton loaders ---------------------------------------------------------------------- */
.skeleton { position: relative; display: block; overflow: hidden; border-radius: var(--radius-xs); background: var(--bg-3); color: transparent; user-select: none; }
.skeleton::after {
content: ""; position: absolute; inset: 0; transform: translateX(calc(-100% * var(--dir)));
background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--bg) 55%, transparent), transparent);
animation: wp-shimmer 1.6s var(--ease-in-out) infinite;
}
.skeleton--text { block-size: .85em; margin-block: .45em; }
.skeleton--title { block-size: 1.5em; inline-size: 55%; margin-block-end: .6em; border-radius: var(--radius-sm); }
.skeleton--circle { inline-size: 40px; aspect-ratio: 1; border-radius: 50%; }
.skeleton--block { block-size: 180px; border-radius: var(--radius-md); }
.skeleton--w75 { inline-size: 75%; }
.skeleton--w50 { inline-size: 50%; }
@media (prefers-reduced-motion: reduce) { .skeleton::after { animation: none; display: none; } }
/* Empty state ---------------------------------------------------------------------------- */
.empty {
display: grid; justify-items: center; gap: 12px; padding: clamp(40px, 6vw, 96px) 24px; text-align: center;
border: 1.5px dashed var(--line-2); border-radius: var(--radius-lg);
}
.empty > * { margin: 0; }
.empty__icon { inline-size: 56px; block-size: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--bg-2); color: var(--ink-3); margin-block-end: 4px; }
.empty__icon .icon { inline-size: 26px; block-size: 26px; }
.empty__title { font-family: var(--font-display); font-size: var(--text-title); font-weight: 650; letter-spacing: calc(-0.02em * var(--track)); }
.empty__text { color: var(--ink-2); max-inline-size: 46ch; }
.empty .actions { justify-content: center; margin-block-start: 8px; }
/* =========================================================================================
APPEAL (CLAUDE.md 2b): Aurora section, glass, odometer, creator orbit, springy segmented,
reveal groups. Colour for appeal comes from --brand-*; data colours keep their meaning.
Motion explains or rewards, never sits behind or over reading text, and stops under
prefers-reduced-motion. Handbook: landing/DESIGN.md §6 "Appeal".
========================================================================================= */
/* Aurora: the full-colour brand band (hero, closing CTA). Scopes the dark tokens (see TOKENS), so buttons,
links, badges and data colours inside it just work. Layers: navy base + gradient, blobs (.aurora__bg),
faint grid and grain (::before / ::after). Blobs are placed with logical insets, so RTL mirrors. */
.aurora {
--ink: var(--aurora-ink); --ink-2: var(--aurora-ink-2); --ink-3: var(--aurora-ink-3);
--line: var(--aurora-line); --line-2: rgb(255 255 255 / .34); --bg-3: rgb(255 255 255 / .1);
--badge-line: rgb(255 255 255 / .34);
position: relative; isolation: isolate; overflow: clip;
background-color: var(--brand-navy);
background-image:
linear-gradient(to bottom, rgb(7 26 36 / 0) 45%, rgb(7 26 36 / .7)),
linear-gradient(var(--aurora-angle, 155deg), var(--brand-navy) 0%, #0A2E3A 42%, var(--brand-teal) 100%);
}
[dir="rtl"] .aurora { --aurora-angle: 205deg; }
.aurora::before, .aurora::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* Faint grid, fading out towards the edges */
.aurora::before {
background-image: linear-gradient(rgb(255 255 255 / .045) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .045) 1px, transparent 1px);
background-size: 56px 56px; background-position: center top;
-webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 85%);
mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 85%);
}
/* Grain: a tiny SVG noise tile (data URI; no request) */
.aurora::after {
opacity: .14; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.aurora__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.aurora__blob { position: absolute; border-radius: 50%; filter: blur(clamp(48px, 7vw, 120px)); }
/* Emerald glow sits behind the visual (inline-end), at partial strength so text over it stays ≥ 4.5:1. */
.aurora__blob--emerald { inset-block-start: 8%; inset-inline-end: -6%; inline-size: min(62vw, 1100px); aspect-ratio: 1; background: var(--brand-emerald); opacity: .26; }
.aurora__blob--blue { inset-block-end: -18%; inset-inline-end: 24%; inline-size: min(48vw, 820px); aspect-ratio: 1.3; background: var(--brand-glow); opacity: .15; }
.aurora__blob--teal { inset-block-start: -22%; inset-inline-start: -12%; inline-size: min(52vw, 880px); aspect-ratio: 1; background: var(--brand-teal); opacity: .38; }
@media (max-width: 1023.98px) {
.aurora__blob--emerald { inset-block-start: auto; inset-block-end: -10%; inline-size: 110vw; opacity: .22; }
}
/* Gentle parallax: only the glow behind the visual moves, and only with the scroll (never behind text). */
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: scroll()) {
.aurora--parallax .aurora__blob--emerald, .aurora--parallax .aurora__blob--blue {
animation: wp-aurora-drift linear both; animation-timeline: scroll(root); animation-range: 0 100vh;
}
.aurora--parallax .aurora__blob--blue { animation-name: wp-aurora-drift-2; }
}
}
@keyframes wp-aurora-drift { to { translate: 0 18vh; } }
@keyframes wp-aurora-drift-2 { to { translate: 0 -10vh; } }
.aurora .badge--outline { box-shadow: inset 0 0 0 1px var(--badge-line); }
.aurora .btn--secondary { --btn-ring: rgb(255 255 255 / .42); }
.aurora .btn--secondary:hover { --btn-ring: #FFFFFF; }
.aurora .link { text-decoration-color: rgb(255 255 255 / .45); }
.aurora .link:hover, .aurora .link--arrow:hover { text-decoration-color: currentColor; }
.aurora .eyebrow { --eyebrow: var(--aurora-ink-2); }
@media (forced-colors: active) { .aurora__bg, .aurora::before, .aurora::after { display: none; } }
/* Soft Aurora for light pages: a quiet tinted backdrop for one framed object (the sample report window). */
.aurora-soft { position: relative; isolation: isolate; }
.aurora-soft::before {
content: ""; position: absolute; inset: -6% -4%; z-index: -1; pointer-events: none; border-radius: var(--radius-xl);
background:
radial-gradient(42% 60% at 18% 30%, color-mix(in srgb, var(--brand-teal) 34%, transparent), transparent 70%),
radial-gradient(38% 55% at 82% 70%, color-mix(in srgb, var(--brand-emerald) 30%, transparent), transparent 70%),
radial-gradient(30% 45% at 60% 10%, color-mix(in srgb, var(--brand-glow) 16%, transparent), transparent 70%);
filter: blur(24px);
}
/* Glass: frosted translucent panel. On Aurora it is white at ~8 %; .glass--light is for light pages. */
.glass {
--ink-2: rgb(255 255 255 / .92); /* glass lightens what is behind it, so secondary text is a step brighter */
background: var(--glass-bg); border: 1px solid var(--glass-line); border-radius: var(--radius-lg);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%); backdrop-filter: blur(var(--glass-blur)) saturate(140%);
box-shadow: inset 0 1px 0 rgb(255 255 255 / .10), 0 18px 40px -24px rgb(0 0 0 / .45);
}
.glass--light {
--ink-2: inherit;
--glass-bg: var(--glass-light-bg); --glass-line: color-mix(in srgb, var(--ink) 9%, transparent);
box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), var(--shadow-4);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.glass { background: color-mix(in srgb, var(--brand-navy) 70%, var(--brand-teal)); }
.glass--light { background: var(--surface); }
}
.badge--glass { --badge-bg: rgb(255 255 255 / .10); --badge-fg: var(--ink); box-shadow: inset 0 0 0 1px var(--glass-line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
/* Product window, frosted (on .aurora-soft or any tinted backdrop) */
.window--glass {
background: var(--glass-light-bg); border-color: color-mix(in srgb, var(--ink) 9%, transparent);
-webkit-backdrop-filter: blur(28px) saturate(160%); backdrop-filter: blur(28px) saturate(160%);
}
.window--glass .window__chrome { background: color-mix(in srgb, var(--bg-2) 55%, transparent); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .window--glass { background: var(--surface); } }
/* Brand accent eyebrow on light pages (teal, AA on --bg and --bg-2) */
.eyebrow--brand { --eyebrow: var(--brand-accent); }
/* Glass tiles: a key number in words. Value, then what it is ("paying users found"), then its range. */
.glass-tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--grid-gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .glass-tiles { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } }
.glass-tile { position: relative; display: grid; align-content: start; gap: 4px; padding: clamp(18px, .9rem + 1vw, 30px); min-inline-size: 0; }
.glass-tile > * { margin: 0; }
.glass-tile__value {
display: flex; align-items: baseline; gap: 10px; font-family: var(--font-display); font-weight: 700; line-height: 1.05;
font-size: clamp(2.25rem, 1.6rem + 1.8vw, 3.5rem); letter-spacing: calc(-0.035em * var(--track)); color: var(--ink);
}
.glass-tile__value .dot { inline-size: 10px; block-size: 10px; align-self: center; }
.glass-tile__label { font-size: var(--text-body); font-weight: 600; color: var(--ink); line-height: 1.35; }
.glass-tile__note { font-size: var(--text-small); color: var(--ink-2); }
@media (max-width: 559.98px) {
.glass-tile { grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: center; }
.glass-tile__value { grid-row: span 2; font-size: 2.25rem; }
}
/* Pulse-glow: one number the eye should land on. Two soft pulses after it counts up, then still. */
.pulse-glow { position: relative; }
.pulse-glow::after {
content: ""; position: absolute; inset: -10% -6%; z-index: -1; border-radius: var(--radius-lg); pointer-events: none;
background: radial-gradient(closest-side, color-mix(in srgb, var(--brand-emerald) 35%, transparent), transparent); opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
.pulse-glow.is-counted::after { animation: wp-pulse-glow 2.4s var(--ease-in-out) 2; }
}
@keyframes wp-pulse-glow { 50% { opacity: 1; } }
/* Odometer: digits roll into place when the number comes into view (assets/aurora.js). The server renders
the final, formatted number; the script only adds rolling reels over it (screen readers keep the text). */
.odometer { display: inline-flex; white-space: nowrap; font-variant-numeric: tabular-nums; }
.odometer__reel { display: inline-block; block-size: 1.05em; overflow: hidden; line-height: 1.05; vertical-align: top; }
.odometer__strip { display: flex; flex-direction: column; transform: translateY(0); transition: transform var(--dur-6) var(--ease-out); }
.odometer__strip > span { block-size: 1.05em; }
/* Creator orbit: each dot a creator. Distance from the centre = paying users per 1,000 views; dot size =
views; colour = decision (data colours); creators whose views look bought are grey and drift without
orbiting. The stage is a size container: positions are fractions of its half-width (--r 0..1), sizes a
percentage of its width (--s). Arms rotate (transform), so motion is compositor-only. */
.orbit { position: relative; container: orbit / inline-size; }
.orbit__body { display: grid; gap: var(--space-m); }
.orbit__caption { inline-size: min(100%, var(--orbit-max, 640px)); justify-self: center; }
.orbit__frame { perspective: 1100px; }
.orbit__stage {
position: relative; inline-size: min(100%, var(--orbit-max, 640px)); aspect-ratio: 1; margin-inline: auto;
container-type: inline-size; transform-style: preserve-3d;
transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
transition: transform var(--dur-4) var(--ease-out);
}
.orbit__ring {
position: absolute; inset: calc((1 - var(--r)) * 50%); border-radius: 50%;
border: 1px solid rgb(255 255 255 / .13); pointer-events: none;
}
.orbit__ring--dashed { border-style: dashed; border-color: rgb(255 255 255 / .10); }
.orbit__ring-label {
position: absolute; inset-block-start: 0; left: 50%; translate: -50% -50%; z-index: 1;
padding: 2px 9px; border-radius: var(--radius-pill); background: rgb(7 26 36 / .72);
font-size: 11px; font-weight: 500; line-height: 1.5; color: var(--aurora-ink-2); white-space: nowrap;
}
@container (max-width: 480px) { .orbit__ring--dashed .orbit__ring-label { display: none; } .orbit__ring-label { font-size: 10px; padding: 1px 7px; } }
.orbit__core {
position: absolute; inset: 41%; z-index: 2; display: grid; place-items: center; padding: 4px; border-radius: 50%;
background: radial-gradient(circle at 35% 30%, rgb(255 255 255 / .22), rgb(255 255 255 / .06));
border: 1px solid rgb(255 255 255 / .22); box-shadow: 0 0 40px 4px rgb(25 179 124 / .25);
font-size: clamp(9px, 2.1cqi, 12px); font-weight: 650; line-height: 1.15; color: var(--aurora-ink); text-align: center;
}
.orbit__dots { list-style: none; margin: 0; padding: 0; }
.orbit__arm { position: absolute; inset: 0; pointer-events: none; rotate: var(--a); }
.orbit__dot {
--c: var(--signal);
position: absolute; inset-block-start: 50%; left: 50%; z-index: 3;
inline-size: calc(var(--s) * 1cqi); block-size: calc(var(--s) * 1cqi);
margin-top: calc(var(--s) * -.5cqi); margin-left: calc(var(--s) * -.5cqi); /* the stage is dir=ltr: geometry, not text */
translate: calc(var(--r) * 50cqi) 0;
padding: 0; border: 0; border-radius: 50%; pointer-events: auto; cursor: pointer;
background: radial-gradient(circle at 34% 30%, color-mix(in srgb, var(--c) 55%, #fff), var(--c) 62%);
box-shadow: 0 0 0 1.5px rgb(7 26 36 / .55), 0 0 18px -2px color-mix(in srgb, var(--c) 70%, transparent);
transition: scale var(--dur-2) var(--ease-spring), box-shadow var(--dur-2) var(--ease-standard);
}
.orbit__dot::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; } /* bigger tap target */
.orbit__dot--test { --c: var(--warn); }
/* Pause dots: a brighter coral fill plus an opaque navy ring. No red reaches 3:1 against the emerald glow, so the
ring carries the non-text contrast (a navy + white double ring: one of the two is >= 3:1 against any part of the gradient); the fill keeps the "pause" meaning. */
.orbit__dot--pause { --c: #FF9A90; box-shadow: 0 0 0 2px #071A24, 0 0 0 3.5px rgb(255 255 255 / .9), 0 0 16px -2px rgb(255 154 144 / .6); }
.orbit__dot--bought {
background: radial-gradient(circle at 34% 30%, rgb(214 220 228 / .55), rgb(150 160 172 / .38) 65%);
box-shadow: 0 0 0 2px #071A24, 0 0 0 3.5px #FF9A90; /* navy + coral double ring: visible on every part of the gradient */
}
.orbit__dot:hover, .orbit__dot:focus-visible, .orbit__dot[aria-expanded="true"] { scale: 1.28; z-index: 4; }
.orbit__dot:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
.orbit--live .orbit__arm:not(.orbit__arm--bought) { animation: wp-orbit var(--t, 180s) linear infinite; }
.orbit--live .orbit__arm--bought .orbit__dot { animation: wp-drift var(--t, 12s) var(--ease-in-out) infinite alternate; }
.orbit--live .orbit__arm--bought:nth-child(odd) .orbit__dot { animation-direction: alternate-reverse; }
.orbit--live:is(:hover, :focus-within, .is-idle, .is-holding) :is(.orbit__arm, .orbit__dot) { animation-play-state: paused; }
}
@keyframes wp-orbit { to { transform: rotate(1turn); } }
@keyframes wp-drift { 0% { transform: translate(0, 0); } 50% { transform: translate(.6cqi, -.8cqi); } 100% { transform: translate(-.7cqi, .5cqi); } }
/* Tooltip (one per orbit, placed by aurora.js beside the active dot) */
.orbit__tip {
position: absolute; z-index: var(--z-pop); inset-block-start: 0; left: 0; inline-size: max-content; max-inline-size: min(260px, 80cqi);
display: grid; gap: 2px; padding: 10px 14px; border-radius: var(--radius-md);
background: rgb(7 26 36 / .94); border: 1px solid var(--glass-line); color: var(--aurora-ink);
box-shadow: 0 16px 40px -12px rgb(0 0 0 / .6); font-size: var(--text-fine); line-height: 1.45; text-align: start; pointer-events: none;
opacity: 0; transition: opacity var(--dur-2) var(--ease-standard);
}
.orbit__tip.is-on { opacity: 1; }
.orbit__tip > * { margin: 0; }
.orbit__tip strong { font-size: var(--text-small); font-weight: 650; }
.orbit__tip span { color: var(--aurora-ink-2); }
.orbit__tip .decision { margin-block-start: 4px; }
/* Caption and legend */
.orbit__caption { display: grid; gap: var(--space-xs); align-content: start; }
.orbit__caption > * { margin: 0; }
.orbit__title { font-family: var(--font-display); font-size: var(--text-title); font-weight: 700; line-height: var(--leading-title); letter-spacing: calc(-0.02em * var(--track)); color: var(--ink); }
.orbit__text { font-size: var(--text-small); color: var(--ink-2); max-inline-size: 44ch; }
.orbit__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--text-fine); color: var(--ink-2); }
.orbit__legend li { display: inline-flex; align-items: center; gap: 7px; }
.orbit__legend .dot--bought { background: rgb(180 188 198 / .55); box-shadow: 0 0 0 1.5px var(--danger); }
@container orbit (min-width: 820px) {
.orbit__body { grid-template-columns: minmax(0, 1fr) minmax(220px, 20rem); align-items: center; column-gap: var(--space-xl); }
.orbit__caption { inline-size: auto; justify-self: stretch; }
}
/* Springy segmented control: equal segments and a sliding thumb with a spring ease. CSS only: radios in
labels (as .segmented), up to 5 options; the thumb follows :checked through :has(). */
.segmented--spring { --n: 2; --i: 0; position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); isolation: isolate; }
.segmented--spring:has(> :nth-child(3)) { --n: 3; }
.segmented--spring:has(> :nth-child(4)) { --n: 4; }
.segmented--spring:has(> :nth-child(5)) { --n: 5; }
.segmented--spring:has(> :nth-child(2) > input:checked) { --i: 1; }
.segmented--spring:has(> :nth-child(3) > input:checked) { --i: 2; }
.segmented--spring:has(> :nth-child(4) > input:checked) { --i: 3; }
.segmented--spring:has(> :nth-child(5) > input:checked) { --i: 4; }
.segmented--spring::before {
content: ""; position: absolute; z-index: -1; inset-block: 3px; inset-inline-start: 3px;
inline-size: calc((100% - 6px - (var(--n) - 1) * 2px) / var(--n)); border-radius: 9px;
background: var(--seg-on, var(--surface)); box-shadow: 0 1px 2px rgb(0 0 0 / .1), 0 2px 6px -2px rgb(0 0 0 / .12);
translate: calc(var(--i) * (100% + 2px) * var(--dir)) 0; transition: translate var(--dur-3) var(--ease-spring);
}
.segmented--spring > label > input:checked + span { background: transparent; box-shadow: none; }
.segmented--spring > label > span { transition: color var(--dur-2) var(--ease-standard); }
.segmented--spring > label:active > span { scale: .96; transition: scale var(--dur-1) var(--ease-standard); }
@supports not selector(:has(*)) { .segmented--spring::before { display: none; } .segmented--spring > label > input:checked + span { background: var(--seg-on, var(--surface)); } }
/* Reveal on scroll (site.js adds .reveal-ready unless reduced motion) ---------------------- */
.reveal-ready [data-reveal]:not([data-reveal="load"]) {
transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out);
transition-delay: var(--reveal-delay, 0ms);
}
.reveal-ready [data-reveal]:not([data-reveal="load"]):not(.is-revealed) { opacity: 0; transform: translateY(24px); }
.wp-failed [data-reveal] { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: no-preference) {
[data-reveal="load"] { animation: wp-fade-up var(--dur-4) var(--ease-out) both; animation-delay: var(--reveal-delay, 0ms); }
}
/* Keyframes */
@keyframes wp-spin { to { transform: rotate(360deg); } }
@keyframes wp-pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
@keyframes wp-pop-up { from { opacity: 0; transform: translateY(6px) scale(.98); } }
@keyframes wp-fade-up { from { opacity: 0; transform: translateY(20px); } }
@keyframes wp-toast-in { from { opacity: 0; transform: translateY(16px) scale(.97); } }
@keyframes wp-shimmer { to { transform: translateX(calc(100% * var(--dir))); } }
/* =========================================================================================
APPEAL ON APP AND PUBLIC PAGES (rollout, 7 Oct 2026): Aurora strip, overlap, Aurora panel,
brand wash, glass plan, orbit preview. Builds on APPEAL above; additive only. Task flows
(setup, sign-in, account) get the slim strip and no motion; the one reward moment is the
setup result. Handbook: landing/DESIGN.md §6 "Appeal on app and public pages".
========================================================================================= */
/* Aurora strip: a slim brand band under the nav that holds the page title (or the setup stepper). The
gradient runs across (navy at the start, deep teal at the end) and stops short of full teal, so white text
stays ≥ 7:1 and --aurora-ink-3 ≥ 5:1 everywhere on it. No blobs: one faint glow in the far top corner. */
:root { --strip-overlap: clamp(32px, 1.5rem + 2vw, 72px); }
.aurora-strip {
--aurora-angle: 100deg; --strip-glow-x: 100%;
padding-block: clamp(28px, 1rem + 2.4vw, 64px);
background-image:
radial-gradient(42% 120% at var(--strip-glow-x) 0%, color-mix(in srgb, var(--brand-emerald) 12%, transparent), transparent 70%),
linear-gradient(var(--aurora-angle), var(--brand-navy) 0%, #0A2E3A 50%, #0D5D5C 100%);
}
[dir="rtl"] .aurora-strip { --aurora-angle: 260deg; --strip-glow-x: 0%; }
.aurora-strip::before { background-size: 44px 44px; }
.aurora-strip--slim { padding-block: clamp(14px, .5rem + 1vw, 24px); }
.aurora-strip--flush { padding-block-end: calc(clamp(28px, 1rem + 2.4vw, 64px) + var(--strip-overlap)); }
.aurora-strip--slim.aurora-strip--flush { padding-block-end: calc(clamp(14px, .5rem + 1vw, 24px) + var(--strip-overlap)); }
.aurora-strip__head { display: grid; gap: var(--space-2xs); }
.aurora-strip__head > * { margin: 0; }
.aurora-strip__head :is(.headline, .title-lg) { text-wrap: balance; }
.aurora-strip__lede { color: var(--ink-2); max-inline-size: 62ch; }
/* The card (or grid) right after a --flush strip rides up over its lower edge. */
.aurora-overlap { position: relative; z-index: 1; margin-block-start: calc(-1 * var(--strip-overlap)); }
/* Steppers on Aurora: hollow circles on the band, not page-coloured holes. */
.aurora .stepper__item::before { background: rgb(7 26 36 / .55); }
.aurora .stepper__item[aria-current="step"]::before { background: rgb(255 255 255 / .12); }
.aurora .stepper__item { color: var(--ink-2); } /* labels ≥ 5:1 even on a grid line in the glow corner */
/* Aurora panel: a rounded Aurora box inside a light page, for one reward moment (the setup result, the free
analysis result): glass tiles and the creator orbit. Same tokens as .aurora; the gradient stops at the deep
teal of the strip (fine print stays ≥ 5:1) and only the teal blob is used (no emerald glow behind text). */
.aurora-panel {
border-radius: var(--radius-xl); padding: clamp(18px, .75rem + 2vw, 44px);
background-image:
linear-gradient(to bottom, rgb(7 26 36 / 0) 45%, rgb(7 26 36 / .7)),
linear-gradient(var(--aurora-angle, 155deg), var(--brand-navy) 0%, #0A2E3A 42%, #0D5D5C 100%);
}
.aurora-panel > .aurora__bg .aurora__blob { filter: blur(clamp(36px, 5vw, 80px)); }
/* Brand wash: a light full-bleed band with a soft Aurora tint (pricing). The tints glow behind the plans (low
and to the start), never behind the eyebrow or the fine print, so every text colour keeps AA. */
.aurora-wash { position: relative; isolation: isolate; background-color: var(--bg-2); }
.aurora-wash::before {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background:
radial-gradient(50% 34% at 18% 58%, color-mix(in srgb, var(--brand-teal) 24%, transparent), transparent 72%),
radial-gradient(44% 30% at 50% 66%, color-mix(in srgb, var(--brand-emerald) 20%, transparent), transparent 72%),
radial-gradient(40% 30% at 84% 54%, color-mix(in srgb, var(--brand-glow) 14%, transparent), transparent 72%);
}
[dir="rtl"] .aurora-wash::before { transform: scaleX(-1); }
/* The featured plan as frosted glass with a brand ring (on .aurora-wash). */
.plan--glass {
background: var(--glass-light-bg); border-color: transparent;
-webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%);
box-shadow: inset 0 0 0 2px var(--brand-accent), inset 0 1px 0 rgb(255 255 255 / .5), var(--shadow-3);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .plan--glass { background: var(--surface); } }
/* Orbit preview (setup result): the stage waits with a softly breathing core while the report is built,
then each creator's dot pops in, one after another (--d). Reduced motion: no breathing, dots just appear. */
.orbit--preview .orbit__dot[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
.orbit--waiting .orbit__core { animation: wp-breathe 2.6s var(--ease-in-out) infinite; }
.orbit--preview .orbit__dot.is-new { animation: wp-dot-in var(--dur-4) var(--ease-spring) backwards; animation-delay: var(--d, 0ms); }
}
@keyframes wp-breathe { 50% { box-shadow: 0 0 56px 10px rgb(25 179 124 / .32); } }
@keyframes wp-dot-in { from { opacity: 0; scale: .2; } }
}
/* 7. UTILITIES ============================================================== */
@layer utilities {
.sr-only, .visually-hidden {
position: absolute !important; inline-size: 1px !important; block-size: 1px !important; padding: 0 !important; margin: -1px !important;
overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important;
}
.center { text-align: center; margin-inline: auto; }
.text-start { text-align: start; }
.text-end { text-align: end; }
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.mt-0 { margin-block-start: 0; } .mb-0 { margin-block-end: 0; }
.mt-s { margin-block-start: var(--space-s); } .mt-m { margin-block-start: var(--space-m); } .mt-l { margin-block-start: var(--space-l); } .mt-xl { margin-block-start: var(--space-xl); }
.mb-s { margin-block-end: var(--space-s); } .mb-m { margin-block-end: var(--space-m); } .mb-l { margin-block-end: var(--space-l); } .mb-xl { margin-block-end: var(--space-xl); }
.w-full { inline-size: 100%; }
.flip-rtl:dir(rtl), [dir="rtl"] .flip-rtl { transform: scaleX(-1); }
.no-js .js-only { display: none !important; }
.js .no-js-only { display: none !important; }
@media (max-width: 767.98px) { .hide-phone { display: none !important; } }
@media (min-width: 768px) { .only-phone { display: none !important; } }
@media (max-width: 1023.98px) { .hide-below-lg { display: none !important; } }
}
/* 8. PRINT ================================================================== */
@media print {
.site-nav, .subnav, .site-footer, .toasts, .skip-link, .nav { display: none !important; }
body { background: #fff; color: #000; }
.section { padding-block: 24px; }
[data-reveal] { opacity: 1 !important; transform: none !important; }
.window, .card, .plan { box-shadow: none !important; }
}
@media (forced-colors: active) {
.btn { border: 1px solid ButtonText; }
.segmented input:checked + span, .segmented button[aria-pressed="true"] { outline: 2px solid Highlight; }
.choice-card:has(input:checked) { outline: 2px solid Highlight; }
.rangebar__band, .rangebar__point, .dot, .decision::before { forced-color-adjust: none; }
}
/* =============================================================================
LEGACY (unlayered). Keeps index.html, start.html and analyzer.html looking right
until the page tracks rebuild them on layouts/base.html. Do not use these classes
in new pages; use the components above. Every rule here is scoped so it cannot
leak into components (unlayered rules beat every layer).
============================================================================= */
/* Old navigation bar */
.nav {
position: sticky; top: 0; z-index: 50; padding-block-start: env(safe-area-inset-top, 0px);
background: var(--nav-bg); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
border-block-end: 1px solid var(--line);
}
.nav > .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-block-size: var(--nav-h); }
.nav-links { display: flex; align-items: center; gap: clamp(20px, 2.2vw, 36px); list-style: none; margin: 0; padding: 0; font-size: 14px; }
.nav-links a:not(.btn) { text-decoration: none; color: var(--ink-2); }
.nav-links a:not(.btn):hover { color: var(--ink); }
@media (max-width: 720px) { .nav-links .hide-sm { display: none; } }
/* Old centred hero */
.hero:not(.hero-split) { text-align: center; padding-block: clamp(56px, 2.5rem + 5vw, 128px) 0; }
.hero:not(.hero-split) .display { max-inline-size: 16ch; margin: 0 auto 22px; }
.hero:not(.hero-split) .intro { max-inline-size: 36ch; margin: 0 auto 32px; }
.hero:not(.hero-split) .actions { justify-content: center; }
.hero .assurance { margin: 18px 0 0; font-size: 14px; color: var(--ink-3); }
.product { margin: clamp(48px, 6vw, 96px) auto 0; max-inline-size: min(100%, 1400px); }
.product figcaption { text-align: center; margin-block-start: 16px; font-size: 13px; color: var(--ink-3); }
/* Old product window internals */
.window-bar .who { font-weight: 600; font-size: 14px; }
.window-bar .when { font-size: 13px; color: var(--ink-3); }
.window-body { display: grid; grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); }
@media (max-width: 860px) { .window-body { grid-template-columns: minmax(0, 1fr); } }
.window-body > .summary { padding: 28px 24px; border-inline-end: 1px solid var(--line); }
@media (max-width: 860px) { .window-body > .summary { border-inline-end: 0; border-block-end: 1px solid var(--line); } }
.summary .label { font-size: 13px; color: var(--ink-3); font-weight: 500; }
.summary .big { font-family: var(--font-display); font-size: 56px; line-height: 1; font-weight: 700; letter-spacing: -0.04em; margin: 8px 0 6px; color: var(--signal); }
.summary .range { font-size: 14px; color: var(--ink-2); }
.summary hr { border: 0; border-block-start: 1px solid var(--line); margin: 22px 0; }
.summary .kv { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; margin-block-end: 10px; }
.summary .kv b { font-size: 17px; font-weight: 650; }
.summary .spark { margin: 6px 0 18px; }
.summary .tally { display: grid; gap: 8px; font-size: 14px; }
.summary .tally span { display: flex; align-items: center; gap: 8px; }
.rows { padding-block: 8px; }
.rows > .row { display: grid; grid-template-columns: minmax(150px, 1.2fr) minmax(140px, 2fr) 90px 104px; align-items: center; gap: 18px; padding: 13px 24px; }
.rows > .row + .row { border-block-start: 1px solid var(--line); }
.rows > .row.head { font-size: 12px; color: var(--ink-3); font-weight: 500; padding-block: 14px 8px; }
.rows > .row.head + .row { border-block-start: 0; }
@media (max-width: 640px) {
.rows > .row { grid-template-columns: minmax(0, 1fr) 60px 84px; gap: 10px; padding-inline: 16px; }
.rows .bar, .rows > .row.head .h-bar { display: none; }
}
.who-cell { display: flex; align-items: center; gap: 12px; min-inline-size: 0; }
.who-cell > span:last-child { min-inline-size: 0; }
.who-cell .mono { inline-size: 32px; block-size: 32px; border-radius: 50%; background: var(--bg-2); border: 1px solid var(--line); display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--ink-2); flex: none; }
.who-cell .handle { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; max-inline-size: 100%; vertical-align: bottom; }
.who-cell .meta { font-size: 12px; color: var(--ink-3); }
.rows .bar { position: relative; block-size: 22px; }
.rows .bar .track { position: absolute; left: 0; right: 0; top: 10px; height: 2px; background: var(--line); border-radius: 2px; }
.rows .bar .fill { position: absolute; left: 0; top: 7px; height: 8px; border-radius: 8px; background: var(--signal); transform-origin: left; }
.rows .bar .whisker { position: absolute; top: 4px; height: 14px; border-left: 2px solid var(--ink-3); border-right: 2px solid var(--ink-3); opacity: .55; }
.rows .bar .whisker::after { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: var(--ink-3); }
.rows .num { text-align: end; font-size: 15px; font-weight: 600; }
.rows .num small { display: block; font-size: 12px; color: var(--ink-3); font-weight: 500; }
.rows .call { text-align: end; font-size: 14px; font-weight: 650; }
.rows .call.rebook { color: var(--signal-ink); } .rows .call.test { color: var(--warn); } .rows .call.pause { color: var(--danger); }
.js-grow .fill { animation: wp-legacy-grow var(--dur-5) var(--ease-out) both; }
.js-grow .row:nth-child(3) .fill { animation-delay: .08s; } .js-grow .row:nth-child(4) .fill { animation-delay: .16s; }
.js-grow .row:nth-child(5) .fill { animation-delay: .24s; } .js-grow .row:nth-child(6) .fill { animation-delay: .32s; }
.js-grow .row:nth-child(7) .fill { animation-delay: .40s; }
@keyframes wp-legacy-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Old section head: on wide screens the intro moves into its own column */
@media (min-width: 1280px) {
.wrap > .section-head:not(.center):has(> .headline + .intro) {
max-inline-size: none; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; column-gap: clamp(48px, 6vw, 160px);
}
.wrap > .section-head:not(.center):has(> .headline + .intro) > .intro { max-inline-size: 40ch; }
/* FAQ section: questions beside the heading */
.wrap:has(> .faq) { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(48px, 6vw, 160px); align-items: start; }
.wrap:has(> .faq) > .section-head { position: sticky; top: calc(var(--nav-h) + 32px); }
}
/* Connections: three columns divided by hairlines */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block-start: 1px solid var(--line-2); }
.trio > div { padding-block: 32px 8px; padding-inline-end: clamp(24px, 3vw, 56px); }
.trio > div + div { padding-inline-start: clamp(24px, 3vw, 56px); border-inline-start: 1px solid var(--line); }
@media (max-width: 860px) {
.trio { grid-template-columns: minmax(0, 1fr); }
.trio > div { padding-inline-end: 0; }
.trio > div + div { padding-inline-start: 0; border-inline-start: 0; border-block-start: 1px solid var(--line); }
}
.glyph { inline-size: 40px; block-size: 40px; margin-block-end: 20px; }
.trio .title { margin-block-end: 8px; }
.trio p { color: var(--ink-2); font-size: 16px; }
.trio .tag { margin-block-end: 14px; }
.reads { list-style: none; padding: 0; margin: 16px 0 0; font-size: 14px; color: var(--ink-2); }
.reads li { padding-block: 7px; border-block-start: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; }
.reads li span:last-child { color: var(--ink-3); }
.aside-note { margin-block-start: 40px; font-size: 15px; color: var(--ink-2); max-inline-size: 64ch; }
/* Method: chart beside numbered steps */
.method { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 120px); align-items: center; }
@media (max-width: 920px) { .method { grid-template-columns: minmax(0, 1fr); gap: 40px; } }
.chart-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px 24px 16px; }
.chart-card .legend { display: flex; flex-wrap: wrap; gap: 10px 18px; font-size: 13px; color: var(--ink-2); margin-block-start: 12px; }
.chart-card .legend i { display: inline-block; width: 14px; height: 10px; border-radius: 3px; margin-inline-end: 7px; vertical-align: -1px; }
/* Privacy: 2×2 on tablets, 4 across on wide screens */
.quad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block-start: 1px solid var(--line-2); }
.quad > div { padding-block: 28px 20px; padding-inline-end: clamp(24px, 3vw, 48px); border-block-end: 1px solid var(--line); }
.quad > div:nth-child(even) { padding-inline-start: clamp(24px, 3vw, 48px); border-inline-start: 1px solid var(--line); }
@media (min-width: 1440px) {
.quad { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.quad > div { border-block-end: 0; }
.quad > div + div { padding-inline-start: clamp(24px, 2.4vw, 48px); border-inline-start: 1px solid var(--line); }
}
@media (max-width: 720px) {
.quad { grid-template-columns: minmax(0, 1fr); }
.quad > div { padding-inline-end: 0; }
.quad > div:nth-child(even) { padding-inline-start: 0; border-inline-start: 0; }
}
.quad h3 { font-size: 18px; margin-block-end: 6px; letter-spacing: -0.015em; }
.quad p { color: var(--ink-2); font-size: 16px; margin: 0; }
/* Closing call to action */
.closer { text-align: center; padding-block: clamp(96px, 4rem + 7vw, 184px); }
.closer .headline { max-inline-size: 22ch; margin: 0 auto 28px; }
/* Old one-line footer */
footer.site { border-block-start: 1px solid var(--line); padding-block: 28px calc(44px + env(safe-area-inset-bottom, 0px)); font-size: 13px; color: var(--ink-3); }
footer.site > .wrap { display: flex; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
footer.site a { color: var(--ink-2); text-decoration: none; margin-inline-start: 20px; }
footer.site a:first-child { margin-inline-start: 0; }
/* Upload tool (analyzer.html): side gutters back, two cards side by side on wide screens */
.wrap.tool-wrap { padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)); }
@media (min-width: 1280px) {
.wrap.tool-wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: start; }
.tool-wrap > h1, .tool-wrap > .intro, .tool-wrap > .card:last-of-type { grid-column: 1 / -1; }
.tool-wrap > .card { max-inline-size: none; }
}
@media (max-width: 480px) {
.tool-wrap > .card { padding: 20px; }
.tool-wrap .cols code { overflow-wrap: anywhere; }
}
/* One-tap questions on the home page (partials/feedback_ask.html, kinds fit and pricing): a calm full-width card
below the section's content; on wide screens the question and its answers share one row. */
.fb-ask--row { margin-block-start: clamp(32px, 1.5rem + 1.5vw, 48px); }
@media (min-width: 1024px) {
.fb-ask--row .fb-ask__step:not([hidden]) { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 32px; }
.fb-ask--row .fb-ask__opts { justify-content: flex-end; }
}
.aurora .fb-ask { background: color-mix(in srgb, var(--surface) 70%, transparent);
-webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); }
/* Footer with the Guides column (partials/footer.html): phones give it a full row (its links are long); from 768 px
the brand takes a row above Product, More, Guides and Language; from 1280 px all five share one row. */
@layer components {
.site-footer__guides { grid-column: 1 / -1; }
@media (min-width: 768px) {
.site-footer__grid:has(.site-footer__guides) { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.4fr); }
.site-footer__grid:has(.site-footer__guides) .site-footer__brand { grid-column: 1 / -1; }
.site-footer__guides { grid-column: auto; }
}
@media (min-width: 1280px) {
.site-footer__grid:has(.site-footer__guides) { grid-template-columns: minmax(0, 4fr) repeat(2, minmax(0, 2fr)) minmax(0, 3fr) minmax(0, 3fr); }
.site-footer__grid:has(.site-footer__guides) .site-footer__brand { grid-column: auto; }
}
}
/* Footer with the Free tools column too (partials/footer.html, whichpost/pages.py TOOLS): from 768 px three link
columns a row under the brand (Product, More, Guides; then Free tools and Language); from 1280 px all six share one row. */
@layer components {
@media (min-width: 768px) {
.site-footer__grid:has(.site-footer__guides):has(.site-footer__tools) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
.site-footer__grid:has(.site-footer__guides):has(.site-footer__tools) { grid-template-columns: minmax(0, 3fr) repeat(2, minmax(0, 2fr)) minmax(0, 3fr) repeat(2, minmax(0, 2.5fr)); }
}
}