@font-face {
font-family: 'Figtree';
src: url('/assets/fonts/figtree.woff2') format('woff2');
font-weight: 300 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Figtree fallback';
src: local('Roboto'), local('Arial');
size-adjust: 99.8%;
ascent-override: 95.2%;
descent-override: 25.1%;
line-gap-override: 0%;
}
:root {
--bg: #0A0B10;
--bg-2: #0F1118;
--surface: #151821;
--surface-2: #1C202B;
--line: #262B37;
--line-2: #323846;
--ink: #F4F5F8;
--ink-2: #A9AFBC;
--ink-3: #848B99;
--accent: #C4A8FF;
--focus: #C4A8FF;
--cta-bg: #F4F5F8;
--cta-ink: #0A0B10;
--cta-hover: #FFFFFF;
--pill-bg: #1C202B;
--header-bg: rgba(10, 11, 16, 0.82);
--shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.35);
--theme-color: #0A0B10;
--g-low: #FF5C7A;
--g-in: #39D98A;
--g-high: #FFC73A;
--app-bg: #0F1115;
--app-card: #161A20;
--app-line: #232935;
--app-ink: #FFFFFF;
--app-muted: #9AA4B2;
--app-accent: #B794F4;
--app-band: rgba(142, 111, 208, 0.22);
--phone-ring: rgba(255, 255, 255, 0.16);
--app-dot: #9F7AEA;
--app-row: #12161D;
--app-urgent: #B3261E;
--app-urgent-bg: #3A1A1C;
--app-problem: #FFB4AB;
--app-badge: #6840AD;
--app-bubble: #12161D;
--app-home: #07090D;
--app-chips: #22262B;
--app-chip-on: #372E52;
--app-chip-ink: #9AA4B2;
--app-band-hi: #1F2121;
--app-band-in: #1E1E2D;
--app-band-lo: #231E25;
--app-graph-dot: #8D6ECE;
--app-axis: #A7B0BE;
--app-greet: #8E6FD0;
--app-btn: #2A3140;
--app-btn-line: #2A2F38;
color-scheme: dark;
}
:root[data-theme="light"] {
--bg: #FAFAFC;
--bg-2: #F2F2F7;
--surface: #FFFFFF;
--surface-2: #F4F4F8;
--line: #E3E5EC;
--line-2: #D3D6DF;
--ink: #0D0F14;
--ink-2: #4B5262;
--ink-3: #5F6675;
--accent: #6840AD;
--focus: #6840AD;
--cta-bg: #0D0F14;
--cta-ink: #FFFFFF;
--cta-hover: #262A33;
--pill-bg: #FFFFFF;
--header-bg: rgba(250, 250, 252, 0.86);
--shadow: 0 1px 2px rgba(13, 15, 20, 0.06), 0 12px 32px rgba(13, 15, 20, 0.08);
--theme-color: #FAFAFC;
--g-low: #C6284D;
--g-in: #117A4A;
--g-high: #8A5A00;
--app-bg: #F8F4FF;
--app-card: #FFFFFF;
--app-line: #E2E8F0;
--app-ink: #1A202C;
--app-muted: #4A5568;
--app-accent: #6840AD;
--app-band: rgba(104, 64, 173, 0.12);
--phone-ring: rgba(127, 140, 153, 0.35);
--app-dot: #6840AD;
--app-row: #F8F4FF;
--app-urgent: #B3261E;
--app-urgent-bg: #FDECEA;
--app-problem: #B3261E;
--app-badge: #6840AD;
--app-bubble: #FFFFFF;
--app-home: #F8F4FF;
--app-chips: #F3F4F6;
--app-chip-on: #E2D6F5;
--app-chip-ink: #6B7280;
--app-band-hi: #FAF8F5;
--app-band-in: #F1EDF7;
--app-band-lo: #FCF3F5;
--app-graph-dot: #957AD2;
--app-axis: #545B66;
--app-greet: #6840AD;
--app-btn: #E2E8F0;
--app-btn-line: #746C7D;
color-scheme: light;
}
:root {
--m-calm-sm: url("/assets/img/mascot-purple-calm-160.webp");
--m-calm-md: image-set(url("/assets/img/mascot-purple-calm-160.webp") 2x, url("/assets/img/mascot-purple-calm-320.webp") 3x);
--m-calm-lg: image-set(url("/assets/img/mascot-purple-calm-320.webp") 2x, url("/assets/img/mascot-purple-calm-480.webp") 3x);
--m-happy-md: image-set(url("/assets/img/mascot-purple-happy-160.webp") 2x, url("/assets/img/mascot-purple-happy-320.webp") 3x);
--m-happy-lg: image-set(url("/assets/img/mascot-purple-happy-320.webp") 2x, url("/assets/img/mascot-purple-happy-480.webp") 3x);
--m-body-sm: url("/assets/img/mascot-purple-body-160.webp");
--m-strip: url("/assets/img/mascot-strip-purple.webp");
--m-glow: 142, 111, 208;
--m2-calm-sm: url("/assets/img/mascot-green-calm-160.webp");
--m2-calm-md: image-set(url("/assets/img/mascot-green-calm-160.webp") 2x, url("/assets/img/mascot-green-calm-320.webp") 3x);
--m2-calm-lg: image-set(url("/assets/img/mascot-green-calm-320.webp") 2x, url("/assets/img/mascot-green-calm-480.webp") 3x);
--m2-happy-md: image-set(url("/assets/img/mascot-green-happy-160.webp") 2x, url("/assets/img/mascot-green-happy-320.webp") 3x);
--m2-happy-lg: image-set(url("/assets/img/mascot-green-happy-320.webp") 2x, url("/assets/img/mascot-green-happy-480.webp") 3x);
--m2-body-sm: url("/assets/img/mascot-green-body-160.webp");
--m2-strip: url("/assets/img/mascot-strip-green.webp");
--m2-glow: 63, 191, 138;
}
:root[data-mascot="purple"] {
--m-calm-sm: url("/assets/img/mascot-purple-calm-160.webp");
--m-calm-md: image-set(url("/assets/img/mascot-purple-calm-160.webp") 2x, url("/assets/img/mascot-purple-calm-320.webp") 3x);
--m-calm-lg: image-set(url("/assets/img/mascot-purple-calm-320.webp") 2x, url("/assets/img/mascot-purple-calm-480.webp") 3x);
--m-happy-md: image-set(url("/assets/img/mascot-purple-happy-160.webp") 2x, url("/assets/img/mascot-purple-happy-320.webp") 3x);
--m-happy-lg: image-set(url("/assets/img/mascot-purple-happy-320.webp") 2x, url("/assets/img/mascot-purple-happy-480.webp") 3x);
--m-body-sm: url("/assets/img/mascot-purple-body-160.webp");
--m-strip: url("/assets/img/mascot-strip-purple.webp");
--m-glow: 142, 111, 208;
}
:root[data-mascot2="purple"] {
--m2-calm-sm: url("/assets/img/mascot-purple-calm-160.webp");
--m2-calm-md: image-set(url("/assets/img/mascot-purple-calm-160.webp") 2x, url("/assets/img/mascot-purple-calm-320.webp") 3x);
--m2-calm-lg: image-set(url("/assets/img/mascot-purple-calm-320.webp") 2x, url("/assets/img/mascot-purple-calm-480.webp") 3x);
--m2-happy-md: image-set(url("/assets/img/mascot-purple-happy-160.webp") 2x, url("/assets/img/mascot-purple-happy-320.webp") 3x);
--m2-happy-lg: image-set(url("/assets/img/mascot-purple-happy-320.webp") 2x, url("/assets/img/mascot-purple-happy-480.webp") 3x);
--m2-body-sm: url("/assets/img/mascot-purple-body-160.webp");
--m2-strip: url("/assets/img/mascot-strip-purple.webp");
--m2-glow: 142, 111, 208;
}
:root[data-mascot="blue"] {
--m-calm-sm: url("/assets/img/mascot-blue-calm-160.webp");
--m-calm-md: image-set(url("/assets/img/mascot-blue-calm-160.webp") 2x, url("/assets/img/mascot-blue-calm-320.webp") 3x);
--m-calm-lg: image-set(url("/assets/img/mascot-blue-calm-320.webp") 2x, url("/assets/img/mascot-blue-calm-480.webp") 3x);
--m-happy-md: image-set(url("/assets/img/mascot-blue-happy-160.webp") 2x, url("/assets/img/mascot-blue-happy-320.webp") 3x);
--m-happy-lg: image-set(url("/assets/img/mascot-blue-happy-320.webp") 2x, url("/assets/img/mascot-blue-happy-480.webp") 3x);
--m-body-sm: url("/assets/img/mascot-blue-body-160.webp");
--m-strip: url("/assets/img/mascot-strip-blue.webp");
--m-glow: 74, 144, 226;
}
:root[data-mascot2="blue"] {
--m2-calm-sm: url("/assets/img/mascot-blue-calm-160.webp");
--m2-calm-md: image-set(url("/assets/img/mascot-blue-calm-160.webp") 2x, url("/assets/img/mascot-blue-calm-320.webp") 3x);
--m2-calm-lg: image-set(url("/assets/img/mascot-blue-calm-320.webp") 2x, url("/assets/img/mascot-blue-calm-480.webp") 3x);
--m2-happy-md: image-set(url("/assets/img/mascot-blue-happy-160.webp") 2x, url("/assets/img/mascot-blue-happy-320.webp") 3x);
--m2-happy-lg: image-set(url("/assets/img/mascot-blue-happy-320.webp") 2x, url("/assets/img/mascot-blue-happy-480.webp") 3x);
--m2-body-sm: url("/assets/img/mascot-blue-body-160.webp");
--m2-strip: url("/assets/img/mascot-strip-blue.webp");
--m2-glow: 74, 144, 226;
}
:root[data-mascot="green"] {
--m-calm-sm: url("/assets/img/mascot-green-calm-160.webp");
--m-calm-md: image-set(url("/assets/img/mascot-green-calm-160.webp") 2x, url("/assets/img/mascot-green-calm-320.webp") 3x);
--m-calm-lg: image-set(url("/assets/img/mascot-green-calm-320.webp") 2x, url("/assets/img/mascot-green-calm-480.webp") 3x);
--m-happy-md: image-set(url("/assets/img/mascot-green-happy-160.webp") 2x, url("/assets/img/mascot-green-happy-320.webp") 3x);
--m-happy-lg: image-set(url("/assets/img/mascot-green-happy-320.webp") 2x, url("/assets/img/mascot-green-happy-480.webp") 3x);
--m-body-sm: url("/assets/img/mascot-green-body-160.webp");
--m-strip: url("/assets/img/mascot-strip-green.webp");
--m-glow: 63, 191, 138;
}
:root[data-mascot2="green"] {
--m2-calm-sm: url("/assets/img/mascot-green-calm-160.webp");
--m2-calm-md: image-set(url("/assets/img/mascot-green-calm-160.webp") 2x, url("/assets/img/mascot-green-calm-320.webp") 3x);
--m2-calm-lg: image-set(url("/assets/img/mascot-green-calm-320.webp") 2x, url("/assets/img/mascot-green-calm-480.webp") 3x);
--m2-happy-md: image-set(url("/assets/img/mascot-green-happy-160.webp") 2x, url("/assets/img/mascot-green-happy-320.webp") 3x);
--m2-happy-lg: image-set(url("/assets/img/mascot-green-happy-320.webp") 2x, url("/assets/img/mascot-green-happy-480.webp") 3x);
--m2-body-sm: url("/assets/img/mascot-green-body-160.webp");
--m2-strip: url("/assets/img/mascot-strip-green.webp");
--m2-glow: 63, 191, 138;
}
:root[data-mascot="orange"] {
--m-calm-sm: url("/assets/img/mascot-orange-calm-160.webp");
--m-calm-md: image-set(url("/assets/img/mascot-orange-calm-160.webp") 2x, url("/assets/img/mascot-orange-calm-320.webp") 3x);
--m-calm-lg: image-set(url("/assets/img/mascot-orange-calm-320.webp") 2x, url("/assets/img/mascot-orange-calm-480.webp") 3x);
--m-happy-md: image-set(url("/assets/img/mascot-orange-happy-160.webp") 2x, url("/assets/img/mascot-orange-happy-320.webp") 3x);
--m-happy-lg: image-set(url("/assets/img/mascot-orange-happy-320.webp") 2x, url("/assets/img/mascot-orange-happy-480.webp") 3x);
--m-body-sm: url("/assets/img/mascot-orange-body-160.webp");
--m-strip: url("/assets/img/mascot-strip-orange.webp");
--m-glow: 243, 154, 61;
}
:root[data-mascot2="orange"] {
--m2-calm-sm: url("/assets/img/mascot-orange-calm-160.webp");
--m2-calm-md: image-set(url("/assets/img/mascot-orange-calm-160.webp") 2x, url("/assets/img/mascot-orange-calm-320.webp") 3x);
--m2-calm-lg: image-set(url("/assets/img/mascot-orange-calm-320.webp") 2x, url("/assets/img/mascot-orange-calm-480.webp") 3x);
--m2-happy-md: image-set(url("/assets/img/mascot-orange-happy-160.webp") 2x, url("/assets/img/mascot-orange-happy-320.webp") 3x);
--m2-happy-lg: image-set(url("/assets/img/mascot-orange-happy-320.webp") 2x, url("/assets/img/mascot-orange-happy-480.webp") 3x);
--m2-body-sm: url("/assets/img/mascot-orange-body-160.webp");
--m2-strip: url("/assets/img/mascot-strip-orange.webp");
--m2-glow: 243, 154, 61;
}
:root[data-mascot="pink"] {
--m-calm-sm: url("/assets/img/mascot-pink-calm-160.webp");
--m-calm-md: image-set(url("/assets/img/mascot-pink-calm-160.webp") 2x, url("/assets/img/mascot-pink-calm-320.webp") 3x);
--m-calm-lg: image-set(url("/assets/img/mascot-pink-calm-320.webp") 2x, url("/assets/img/mascot-pink-calm-480.webp") 3x);
--m-happy-md: image-set(url("/assets/img/mascot-pink-happy-160.webp") 2x, url("/assets/img/mascot-pink-happy-320.webp") 3x);
--m-happy-lg: image-set(url("/assets/img/mascot-pink-happy-320.webp") 2x, url("/assets/img/mascot-pink-happy-480.webp") 3x);
--m-body-sm: url("/assets/img/mascot-pink-body-160.webp");
--m-strip: url("/assets/img/mascot-strip-pink.webp");
--m-glow: 232, 106, 168;
}
:root[data-mascot2="pink"] {
--m2-calm-sm: url("/assets/img/mascot-pink-calm-160.webp");
--m2-calm-md: image-set(url("/assets/img/mascot-pink-calm-160.webp") 2x, url("/assets/img/mascot-pink-calm-320.webp") 3x);
--m2-calm-lg: image-set(url("/assets/img/mascot-pink-calm-320.webp") 2x, url("/assets/img/mascot-pink-calm-480.webp") 3x);
--m2-happy-md: image-set(url("/assets/img/mascot-pink-happy-160.webp") 2x, url("/assets/img/mascot-pink-happy-320.webp") 3x);
--m2-happy-lg: image-set(url("/assets/img/mascot-pink-happy-320.webp") 2x, url("/assets/img/mascot-pink-happy-480.webp") 3x);
--m2-body-sm: url("/assets/img/mascot-pink-body-160.webp");
--m2-strip: url("/assets/img/mascot-strip-pink.webp");
--m2-glow: 232, 106, 168;
}
:root[data-mascot="gray"] {
--m-calm-sm: url("/assets/img/mascot-gray-calm-160.webp");
--m-calm-md: image-set(url("/assets/img/mascot-gray-calm-160.webp") 2x, url("/assets/img/mascot-gray-calm-320.webp") 3x);
--m-calm-lg: image-set(url("/assets/img/mascot-gray-calm-320.webp") 2x, url("/assets/img/mascot-gray-calm-480.webp") 3x);
--m-happy-md: image-set(url("/assets/img/mascot-gray-happy-160.webp") 2x, url("/assets/img/mascot-gray-happy-320.webp") 3x);
--m-happy-lg: image-set(url("/assets/img/mascot-gray-happy-320.webp") 2x, url("/assets/img/mascot-gray-happy-480.webp") 3x);
--m-body-sm: url("/assets/img/mascot-gray-body-160.webp");
--m-strip: url("/assets/img/mascot-strip-gray.webp");
--m-glow: 138, 147, 166;
}
:root[data-mascot2="gray"] {
--m2-calm-sm: url("/assets/img/mascot-gray-calm-160.webp");
--m2-calm-md: image-set(url("/assets/img/mascot-gray-calm-160.webp") 2x, url("/assets/img/mascot-gray-calm-320.webp") 3x);
--m2-calm-lg: image-set(url("/assets/img/mascot-gray-calm-320.webp") 2x, url("/assets/img/mascot-gray-calm-480.webp") 3x);
--m2-happy-md: image-set(url("/assets/img/mascot-gray-happy-160.webp") 2x, url("/assets/img/mascot-gray-happy-320.webp") 3x);
--m2-happy-lg: image-set(url("/assets/img/mascot-gray-happy-320.webp") 2x, url("/assets/img/mascot-gray-happy-480.webp") 3x);
--m2-body-sm: url("/assets/img/mascot-gray-body-160.webp");
--m2-strip: url("/assets/img/mascot-strip-gray.webp");
--m2-glow: 138, 147, 166;
}
.mascot { --ms: var(--m-strip); }
.mascot.mascot--calm.mascot--sm { --mb: var(--m-calm-sm); }
.mascot.mascot--calm.mascot--md { --mb: var(--m-calm-md); }
.mascot.mascot--calm.mascot--lg { --mb: var(--m-calm-lg); }
.mascot.mascot--happy.mascot--sm { --mb: var(--m-happy-md); }
.mascot.mascot--happy.mascot--md { --mb: var(--m-happy-md); }
.mascot.mascot--happy.mascot--lg { --mb: var(--m-happy-lg); }
.mascot.mascot--body.mascot--sm { --mb: var(--m-body-sm); }
.mascot.mascot--body.mascot--md { --mb: var(--m-body-sm); }
.mascot.mascot--body.mascot--lg { --mb: var(--m-body-sm); }
.mascot.mascot--alt { --ms: var(--m2-strip); }
.mascot.mascot--alt.mascot--calm.mascot--sm { --mb: var(--m2-calm-sm); }
.mascot.mascot--alt.mascot--calm.mascot--md { --mb: var(--m2-calm-md); }
.mascot.mascot--alt.mascot--calm.mascot--lg { --mb: var(--m2-calm-lg); }
.mascot.mascot--alt.mascot--happy.mascot--sm { --mb: var(--m2-happy-md); }
.mascot.mascot--alt.mascot--happy.mascot--md { --mb: var(--m2-happy-md); }
.mascot.mascot--alt.mascot--happy.mascot--lg { --mb: var(--m2-happy-lg); }
.mascot.mascot--alt.mascot--body.mascot--sm { --mb: var(--m2-body-sm); }
.mascot.mascot--alt.mascot--body.mascot--md { --mb: var(--m2-body-sm); }
.mascot.mascot--alt.mascot--body.mascot--lg { --mb: var(--m2-body-sm); }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 5rem; background: var(--bg); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
margin: 0; min-height: 100svh; background: var(--bg); color: var(--ink);
font: 400 1.0625rem/1.55 "Figtree", "Figtree fallback", system-ui, sans-serif;
font-feature-settings: "kern", "liga", "calt"; overflow-x: clip; overflow-wrap: anywhere; -webkit-tap-highlight-color: transparent;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: 0.07em; }
a:hover { text-decoration-thickness: 0.13em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 8px; }
::selection { background: rgba(196, 168, 255, 0.3); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
li + li { margin-top: 0.35em; }
strong { font-weight: 700; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--ink); color: var(--bg); padding: 0.75rem 1rem; border-radius: 12px; font-weight: 700; }
.skip:focus { top: 0.75rem; }
[hidden] { display: none !important; }
h1, h2, h3 { font-weight: 800; letter-spacing: -0.03em; line-height: 1.06; margin: 0 0 0.5em; text-wrap: balance; color: var(--ink); }
h1 { font-size: clamp(2.5rem, 1.6rem + 4.4vw, 4.75rem); line-height: 1.02; }
h2 { font-size: clamp(1.875rem, 1.35rem + 2.4vw, 3rem); }
h3 { font-size: 1.25rem; letter-spacing: -0.015em; line-height: 1.2; }
.lead { font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.accent { color: var(--accent); }
.muted { color: var(--ink-2); }
.small { font-size: 0.9375rem; }
.eyebrow { font-size: 0.875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 0.75rem; }
.tnum { font-variant-numeric: tabular-nums lining-nums; }
.wrap { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: max(1.25rem, env(safe-area-inset-left)) max(1.25rem, env(safe-area-inset-right)); }
.wrap--text { max-width: 44rem; }
.section { padding-block: clamp(4rem, 3rem + 5vw, 7.5rem); }
.section--alt { background: var(--bg-2); }
.section__head { max-width: 36rem; margin: 0 auto clamp(2rem, 1.5rem + 2vw, 3.25rem); text-align: center; }
.section__head p { color: var(--ink-2); }
.center { text-align: center; }
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3.25rem; padding: 0.75rem 1.5rem;
border-radius: 999px; border: 1px solid transparent; font-family: inherit; font-weight: 700; font-size: 1.0625rem; line-height: 1.2; text-decoration: none; cursor: pointer;
touch-action: manipulation; user-select: none; text-align: center; max-width: 100%;
transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.btn:active { transform: scale(0.98); }
.btn--cta { background: var(--cta-bg); color: var(--cta-ink); }
.btn--cta:hover { background: var(--cta-hover); }
.btn--line { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--line:hover { border-color: var(--ink-2); }
.btn--sm { min-height: 2.75rem; padding: 0.5rem 1.1rem; font-size: 0.9375rem; }
.btn--lg { min-height: 3.5rem; padding-inline: 2rem; font-size: 1.125rem; }
.btn--block { width: 100%; }
.btn svg { width: 1.2rem; height: 1.2rem; flex: none; }
.pill {
display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.9rem; border-radius: 999px;
background: var(--pill-bg); border: 1px solid var(--line); color: var(--ink-2); font-size: 0.875rem; font-weight: 600;
}
.pill .dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--g-in); }
.tag { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.8125rem; font-weight: 700; color: var(--accent); border: 1px solid currentColor; vertical-align: 0.15em; }
.tag--next { white-space: nowrap; }
.sample-tag { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 6px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--line); }
.site-header { position: sticky; top: 0; z-index: 30; background: var(--header-bg); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color 0.2s ease; }
.site-header.is-scrolled { border-bottom-color: var(--line); }
.bar { display: flex; align-items: center; gap: 1rem; min-height: 3.75rem; }
.brand { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 2.75rem; color: var(--ink); text-decoration: none; font-weight: 800; letter-spacing: -0.01em; font-size: 1.0625rem; }
.brand__mark { position: relative; display: block; width: 1.65rem; aspect-ratio: 506 / 622; flex: none; }
.brand__mark img { position: absolute; max-width: none; }
.brand__mark .mascot__body { inset: 0; width: 100%; height: 100%; }
.brand__mark .mascot__strip { left: 41.8972%; top: 0.9646%; width: 18.3794%; height: 20.2572%; }
.nav { display: none; margin-left: auto; }
.nav ul { display: flex; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
.nav li { margin: 0; }
.nav a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.85rem; border-radius: 999px; color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 0.9375rem; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.bar__end { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
.menu-btn { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; color: var(--ink); border: 1px solid var(--line); }
.menu-btn svg { width: 1.25rem; height: 1.25rem; }
@media (min-width: 52rem) {
.nav { display: block; }
.bar__end { margin-left: 0.5rem; }
.menu-btn { display: none; }
}
.sheet {
margin: auto auto 0; padding: 0; border: 0; width: 100%; max-width: 32rem; max-height: min(92dvh, 44rem);
border-radius: 24px 24px 0 0; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); overscroll-behavior: contain;
}
.sheet::backdrop { background: rgba(0, 0, 0, 0.55); }
.sheet[open] { display: flex; flex-direction: column; }
.sheet__grab { display: flex; justify-content: center; padding: 0.75rem 0 0.25rem; touch-action: none; cursor: grab; }
.sheet__grab span { width: 2.75rem; height: 0.3rem; border-radius: 1rem; background: var(--line-2); }
.sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 0.25rem 1.25rem 0.5rem; touch-action: none; }
.sheet__title { font-size: 1.0625rem; margin: 0; letter-spacing: 0; }
.sheet__body { overflow-y: auto; padding: 0 1.25rem calc(1.25rem + env(safe-area-inset-bottom)); display: grid; gap: 1rem; }
.sheet__nav { list-style: none; margin: 0; padding: 0; }
.sheet__nav li { margin: 0; border-bottom: 1px solid var(--line); }
.sheet__nav a { display: flex; align-items: center; justify-content: space-between; min-height: 3.5rem; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 1.1875rem; }
.sheet__nav a::after { content: "\203A"; color: var(--ink-3); font-size: 1.5rem; line-height: 1; }
.sheet__nav a[aria-current="page"] { color: var(--accent); }
.sheet__small { display: flex; flex-wrap: wrap; gap: 0 1.25rem; list-style: none; margin: 0; padding: 0; }
.sheet__small li { margin: 0; }
.sheet__small a { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; min-width: 2.75rem; color: var(--ink-2); }
.icon-btn { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); cursor: pointer; }
.icon-btn svg { width: 1.2rem; height: 1.2rem; }
@media (prefers-reduced-motion: no-preference) {
.sheet[open] { animation: sheet-in 0.28s cubic-bezier(0.2, 0.9, 0.25, 1); }
.sheet[open]::backdrop { animation: fade-in 0.2s ease; }
}
@keyframes sheet-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 40rem) { .sheet { margin: auto; border-radius: 24px; } }
.theme-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: var(--ink-2); font-size: 0.9375rem; }
.seg { display: inline-flex; gap: 0.25rem; padding: 0.25rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); }
.seg button { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; padding: 0 1rem; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font-family: inherit; font-weight: 600; font-size: 0.9375rem; line-height: 1; cursor: pointer; }
.seg svg { width: 1rem; height: 1rem; }
.seg [aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.site-footer { padding-block: 3.5rem calc(2.5rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--bg); color: var(--ink-2); font-size: 0.9375rem; }
.site-footer .wrap { display: grid; gap: 1.75rem; }
.foot-top { display: grid; gap: 0.5rem; }
.foot-tag { margin: 0; max-width: 32rem; }
.foot-safety { margin: 0; max-width: 44rem; }
.foot-safety strong { color: var(--ink); }
.foot-links { display: grid; gap: 1rem; }
.foot-links ul { display: flex; flex-wrap: wrap; gap: 0 1.5rem; list-style: none; margin: 0; padding: 0; }
.foot-links li { margin: 0; }
.foot-links a { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; min-width: 2.75rem; color: var(--ink); text-decoration: none; font-weight: 600; }
.foot-links a:hover { text-decoration: underline; }
.foot-small { display: grid; gap: 0.5rem; font-size: 0.8125rem; color: var(--ink-3); }
.foot-small p { margin: 0; }
.foot-small a { color: var(--ink-2); }
.mascot { position: relative; display: inline-block; flex: none; aspect-ratio: 506 / 622; width: 4rem; }
.mascot__body { position: absolute; inset: 0; background: var(--mb) center / contain no-repeat; }
.mascot__strip { position: absolute; left: 41.8972%; top: 0.9646%; width: 18.3794%; height: 20.2572%; background: var(--ms) 0 0 / 100% 100% no-repeat; }
.mascot--sm { width: 2rem; }
.mascot--lg { width: 9rem; }
.hero { position: relative; overflow: clip; padding-top: clamp(2.5rem, 2rem + 3vw, 5rem); }
.hero__grid { display: grid; gap: 2.5rem; justify-items: center; text-align: center; }
.hero__copy { max-width: 38rem; display: grid; justify-items: center; gap: 1.25rem; }
.hero__copy h1 { margin: 0; }
.hero__copy .lead { margin: 0; max-width: 30rem; }
.hero__actions { display: grid; justify-items: center; gap: 1rem; }
.hero__visual { position: relative; width: 100%; max-width: 26rem; display: grid; justify-items: center; }
.hero__phone { position: relative; z-index: 1; width: min(18.5rem, 78%); height: clamp(26rem, 105vw, 32rem); overflow: clip; }
.hero__phone .phone { --pw: 18.5rem; width: 100%; }
.hero__glow { position: absolute; z-index: 0; left: 50%; top: 18%; width: 150%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--m-glow), 0.4), rgba(var(--m-glow), 0.1) 50%, transparent 70%); pointer-events: none; }
.hero__char { position: absolute; z-index: 4; left: 0; bottom: 0.25rem; width: clamp(5.5rem, 24vw, 8.5rem); }
.hero__char .mascot { width: 100%; }
.hero__phone { -webkit-mask-image: linear-gradient(#000 calc(100% - 4.5rem), transparent); mask-image: linear-gradient(#000 calc(100% - 4.5rem), transparent); }
@media (min-width: 64rem) {
.hero { padding-top: 4rem; }
.hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; text-align: left; justify-items: start; gap: 3rem; }
.hero__copy { justify-items: start; }
.hero__actions { justify-items: start; }
.hero__visual { justify-self: center; max-width: 30rem; }
.hero__phone { height: 36rem; }
.hero__copy h1 { font-size: clamp(3rem, 1rem + 3.6vw, 4.25rem); }
.hero__glow { top: 4%; width: 125%; }
.hero__char { left: -5rem; width: 11rem; }
}
.who { display: grid; gap: 1rem; max-width: 52rem; margin-inline: auto; }
.who__card { position: relative; display: grid; align-content: start; gap: 0.75rem; padding: 1.75rem 1.5rem 1.5rem; border-radius: 28px; background: var(--surface); border: 1px solid var(--line); overflow: clip; }
.who__card .mascot { width: 4.5rem; }
.who__card h3 { font-size: 1.5rem; margin: 0.25rem 0 0; }
.who__role { margin: 0; color: var(--ink-2); }
.who__list { list-style: none; margin: 0.25rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.who__list li { margin: 0; display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: 0.6rem; align-items: start; }
.who__list svg { width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; color: var(--accent); }
@media (min-width: 48rem) { .who { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.closing { text-align: center; display: grid; justify-items: center; gap: 1.25rem; }
.closing .mascot { width: 6rem; }
.closing h2 { margin: 0; }
.closing p { margin: 0; color: var(--ink-2); max-width: 30rem; }
.safety { max-width: 36rem; margin: 0 auto; text-align: center; color: var(--ink-2); display: grid; justify-items: center; gap: 0.75rem; }
.safety svg { width: 1.75rem; height: 1.75rem; color: var(--ink-3); }
.safety p { margin: 0; }
.safety strong { color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
.js .reveal { opacity: 0; transform: translateY(0.75rem); transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.js .reveal.is-in { opacity: 1; transform: none; }
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.2s; }
}
@font-face { font-family: "Roboto App"; src: url("/assets/fonts/roboto-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Roboto App"; src: url("/assets/fonts/roboto-500.woff2") format("woff2"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: "Roboto App"; src: url("/assets/fonts/roboto-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Roboto App"; src: url("/assets/fonts/roboto-900.woff2") format("woff2"); font-weight: 800 900; font-display: swap; }
.phone {
--pw: 17.5rem;
position: relative; width: min(var(--pw), 100%); aspect-ratio: 9 / 19.5;
border-radius: 2.6rem; padding: 0.55rem; background: #0C1218;
box-shadow: var(--shadow-lg), 0 0 0 1px var(--phone-ring);
}
.phone::before { content: ""; position: absolute; top: 1.05rem; left: 50%; width: 0.7rem; height: 0.7rem; margin-left: -0.35rem; border-radius: 50%; background: #05080B; z-index: 3; }
.phone__screen { position: relative; height: 100%; border-radius: 2.1rem; overflow: hidden; background: var(--app-bg); color: var(--app-ink); }
.phone--lg { --pw: 19.5rem; }
.phone__label {
display: block; text-align: center; margin-top: 0.85rem; font-weight: 700; font-size: 0.9375rem; color: var(--ink-2);
}
.app { font-family: system-ui, Roboto, sans-serif; font-size: 0.8125rem; line-height: 1.35; padding: 2.4rem 0.8rem 0.8rem; height: 100%; display: flex; flex-direction: column; gap: 0.55rem; }
.app__status { position: absolute; top: 0.6rem; left: 1.4rem; right: 6rem; display: flex; justify-content: space-between; font-size: 0.6875rem; font-weight: 600; color: var(--app-muted); }
.phone { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 30px 60px -24px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--phone-ring); }
.phone, .phone * { overflow-wrap: normal; word-break: normal; }
.phone--app .phone__screen { --u: calc(100cqw / 412); container-type: inline-size; background: var(--app-home); }
.sample { position: absolute; right: 1.1rem; top: 0.5rem; z-index: 6; font: 700 0.625rem/1 system-ui, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.3rem 0.45rem; border-radius: 0.4rem; background: var(--app-card); color: var(--app-muted); border: 1px solid var(--app-line); }
.phone--app .sample { top: calc(10 * var(--u)); right: calc(92 * var(--u)); padding: calc(3 * var(--u)) calc(6 * var(--u)); font-size: calc(10 * var(--u)); border-radius: calc(6 * var(--u)); }
.phone--app::before { z-index: 7; }
.aapp {
position: absolute; inset: 0 0 auto; padding: calc(40 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u)); display: flex; flex-direction: column; gap: calc(10 * var(--u));
font: 400 calc(14 * var(--u)) / 1.43 "Roboto App", Roboto, system-ui, sans-serif; color: var(--app-ink); background: var(--app-home);
transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.aapp[hidden] { display: none; }
.aapp p { margin: 0; }
.astatus { position: absolute; z-index: 4; inset: 0 0 auto; background: var(--app-home); display: flex; justify-content: space-between; align-items: center; height: calc(40 * var(--u)); padding: calc(4 * var(--u)) calc(26 * var(--u)) 0; font-size: calc(14 * var(--u)); font-weight: 500; color: var(--app-ink); }
.astatus__icons { display: flex; gap: calc(5 * var(--u)); align-items: center; margin-right: 0; }
.astatus__icons svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); fill: currentColor; }
.astatus__icons svg:last-child { width: calc(24 * var(--u)); }
.astatus--light { color: #fff; background: none; }
.astatus[hidden] { display: none; }
.astatus { font-family: "Roboto App", Roboto, system-ui, sans-serif; }
.ahead { padding-block: calc(4 * var(--u)); display: grid; gap: calc(2 * var(--u)); }
.ahead__greet { font-size: calc(16 * var(--u)); line-height: 1.25; font-weight: 600; letter-spacing: calc(0.2 * var(--u)); color: var(--app-greet); }
.ahead__title { font-size: calc(32 * var(--u)); line-height: 1.125; font-weight: 800; letter-spacing: calc(-0.5 * var(--u)); }
.ahero { display: grid; grid-template-columns: 43fr 57fr; gap: calc(6 * var(--u)); align-items: center; min-height: calc(184 * var(--u)); }
.ahero__char { position: relative; height: calc(160 * var(--u)); display: grid; place-items: end center; }
.ahero__mascot { width: calc(118 * var(--u)); }
.ahero__shadow { position: absolute; bottom: 0; left: 9%; right: 9%; height: calc(24 * var(--u)); border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.05) 60%, transparent); }
.ahero__bubble { position: relative; margin-left: calc(9 * var(--u)); padding: calc(14 * var(--u)) calc(28 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u)); border-radius: calc(24 * var(--u)); background: var(--app-bubble); border: 1px solid var(--app-line); display: grid; gap: calc(4 * var(--u)); }
.ahero__bubble::before { content: ""; position: absolute; left: calc(-9 * var(--u)); top: 50%; width: calc(16 * var(--u)); height: calc(16 * var(--u)); margin-top: calc(-8 * var(--u)); background: var(--app-bubble); border-left: 1px solid var(--app-line); border-bottom: 1px solid var(--app-line); transform: rotate(45deg); }
.ahero__h { font-size: calc(18 * var(--u)); line-height: 1.28; font-weight: 700; letter-spacing: calc(-0.1 * var(--u)); }
.ahero__b { font-size: calc(13 * var(--u)); line-height: 1.38; color: var(--app-muted); }
.ahero__heart { position: absolute; right: calc(12 * var(--u)); bottom: calc(10 * var(--u)); width: calc(18 * var(--u)); height: calc(18 * var(--u)); color: var(--app-accent); fill: currentColor; }
.acard { background: var(--app-card); border: 1px solid var(--app-line); border-radius: calc(24 * var(--u)); padding: calc(10 * var(--u)) calc(14 * var(--u)); }
.abg { display: grid; gap: calc(2 * var(--u)); padding-bottom: calc(14 * var(--u)); }
.abg__who { font-size: calc(12 * var(--u)); color: var(--app-muted); letter-spacing: calc(0.4 * var(--u)); }
.abg__label { font-size: calc(11 * var(--u)); font-weight: 700; letter-spacing: calc(0.9 * var(--u)); color: var(--app-muted); }
.abg__value { display: flex; align-items: center; gap: calc(8 * var(--u)); }
.abg__num { font-size: calc(33 * var(--u)); line-height: 1.15; font-weight: 800; letter-spacing: calc(-1.4 * var(--u)); font-variant-numeric: tabular-nums; }
.abg__unit { align-self: flex-start; margin-top: calc(6 * var(--u)); font-size: calc(11 * var(--u)); font-weight: 700; color: var(--app-muted); }
.abg__arrow { font-size: calc(20 * var(--u)); font-weight: 700; color: var(--app-greet); margin-top: calc(8 * var(--u)); }
.abg__row { display: flex; justify-content: space-between; align-items: center; padding-bottom: calc(8 * var(--u)); border-bottom: 1px solid var(--app-line); }
.abg__state { font-size: calc(16 * var(--u)); font-weight: 700; color: var(--g-in); }
.abg__chips { display: flex; padding: calc(3 * var(--u)); border-radius: 999px; background: var(--app-chips); }
.abg__chips span { padding: calc(2 * var(--u)) calc(9 * var(--u)); border-radius: 999px; font-size: calc(11 * var(--u)); font-weight: 700; color: var(--app-chip-ink); }
.abg__chips .is-on { background: var(--app-chip-on); color: var(--app-accent); }
.ag { display: block; width: 100%; height: auto; margin-top: calc(4 * var(--u)); font-family: "Roboto App", Roboto, system-ui, sans-serif; }
.ag__t { font-size: 12px; font-weight: 500; fill: var(--app-axis); text-anchor: middle; }
.ag__y { font-size: 11px; font-weight: 700; fill: var(--app-axis); }
.ag__y--range { fill: var(--app-accent); }
.ag__hi { fill: var(--app-band-hi); }
.ag__in { fill: var(--app-band-in); }
.ag__lo { fill: var(--app-band-lo); }
.ag__line { stroke: var(--app-line); stroke-width: 1; }
.ag__dot { fill: var(--app-graph-dot); }
.ag__dot--now { stroke: var(--app-ink); stroke-width: 1.4; }
.anudges { display: grid; gap: calc(8 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); }
.anudges__head { display: flex; justify-content: space-between; align-items: center; font-size: calc(11 * var(--u)); line-height: 1.36; font-weight: 800; letter-spacing: calc(0.85 * var(--u)); color: var(--app-muted); }
.anudges__badge { padding: calc(2 * var(--u)) calc(10 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--app-badge); color: #fff; font-size: calc(12 * var(--u)); font-weight: 700; letter-spacing: calc(0.1 * var(--u)); }
.anudges__quiet { min-height: calc(56 * var(--u)); padding-block: calc(12 * var(--u)); color: var(--app-muted); font-size: calc(16 * var(--u)); }
.anudges__quiet[hidden], .asend__sent[hidden], .asend__list[hidden] { display: none; }
.anrow { border-radius: calc(16 * var(--u)); background: var(--app-row); padding: calc(4 * var(--u)) 0 calc(8 * var(--u)); }
.anrow--help { background: var(--app-urgent-bg); box-shadow: inset 0 0 0 calc(1.5 * var(--u)) var(--app-urgent); }
.anrow__l1 { display: flex; align-items: center; gap: calc(8 * var(--u)); padding: 0 calc(4 * var(--u)) 0 calc(10 * var(--u)); min-height: calc(48 * var(--u)); }
.anrow__char { flex: none; width: calc(32 * var(--u)); height: calc(32 * var(--u)); border-radius: 50%; background: rgba(142, 111, 208, 0.12); display: grid; place-items: center; }
.anrow__char .mascot { width: calc(20 * var(--u)); }
.anrow__name { font-size: calc(18 * var(--u)); font-weight: 700; margin-right: auto; }
.anrow__when { font-size: calc(13 * var(--u)); color: var(--app-muted); }
.anrow__btn { width: calc(48 * var(--u)); height: calc(48 * var(--u)); display: grid; place-items: center; color: var(--app-accent); }
.anrow__btn svg { width: calc(26 * var(--u)); height: calc(26 * var(--u)); }
.anrow__msg { padding: 0 calc(10 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 500; }
.anrow--help .anrow__msg { color: var(--app-problem); }
.anrow__bg { padding: calc(2 * var(--u)) calc(10 * var(--u)) 0; font-size: calc(13 * var(--u)); font-weight: 500; font-variant-numeric: tabular-nums; }
.asend { display: grid; gap: calc(10 * var(--u)); }
.asend__row { display: grid; grid-template-columns: 1fr 1fr; gap: calc(10 * var(--u)); }
.asend__list { display: grid; gap: calc(10 * var(--u)); }
.abtn {
min-height: calc(48 * var(--u)); padding: calc(8 * var(--u)) calc(16 * var(--u)); border-radius: calc(18 * var(--u)); border: 0;
font: 500 calc(15 * var(--u)) / 1.2 "Roboto App", Roboto, system-ui, sans-serif; color: var(--app-ink); background: none; cursor: pointer;
display: flex; align-items: center; justify-content: center; gap: calc(6 * var(--u)); text-align: center;
}
.abtn { position: relative; }
.abtn::after { content: ""; position: absolute; inset: -7px -3px; }
.abtn--help { background: var(--app-urgent); color: #fff; border-radius: calc(16 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 700; }
.abtn--line { box-shadow: inset 0 0 0 1px var(--app-btn-line); }
.abtn--soft { background: var(--app-btn); font-size: calc(17 * var(--u)); font-weight: 600; }
.abtn--wide { width: 100%; }
.abtn:focus-visible { outline: calc(3 * var(--u)) solid var(--app-accent); outline-offset: calc(2 * var(--u)); }
.abtn[aria-pressed="true"] { box-shadow: 0 0 0 calc(3 * var(--u)) var(--app-accent); }
.asend__to { display: flex; justify-content: space-between; align-items: center; min-height: calc(48 * var(--u)); font-size: calc(14 * var(--u)); color: var(--app-muted); }
.asend__change { color: var(--app-accent); font-weight: 500; padding: 0 calc(12 * var(--u)); }
.asend__sent { display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 600; }
.asend__sent svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); color: #2FBF86; }
.alock { position: absolute; inset: 0; padding: 0 calc(12 * var(--u)); background: linear-gradient(170deg, #26304A, #0D1220 70%); color: #fff; font-family: "Roboto App", Roboto, system-ui, sans-serif; }
.alock[hidden] { display: none; }
.alock p { margin: 0; text-align: center; }
.alock__time { margin-top: calc(56 * var(--u)) !important; font-size: calc(92 * var(--u)); line-height: 1; font-weight: 400; letter-spacing: calc(-2 * var(--u)); }
.alock__date { margin-top: calc(8 * var(--u)) !important; font-size: calc(16 * var(--u)); opacity: 0.9; }
.anotif {
display: grid; gap: calc(2 * var(--u)); width: 100%; margin-top: calc(40 * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u)); border: 0; border-radius: calc(26 * var(--u));
background: rgba(240, 238, 246, 0.94); color: #1B1B1F; text-align: left; font: inherit; cursor: pointer;
}
.anotif[hidden] { display: none; }
.anotif:focus-visible { outline: calc(3 * var(--u)) solid #fff; outline-offset: calc(2 * var(--u)); }
.anotif__app { display: flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(12 * var(--u)); color: #46464F; }
.anotif__app svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); padding: calc(3 * var(--u)); border-radius: 50%; background: #5F5F6B; fill: #fff; }
.anotif__title { font-size: calc(15 * var(--u)); font-weight: 600; }
.anotif__text { font-size: calc(14 * var(--u)); color: #46464F; }
.try__stage { display: grid; gap: 2rem; justify-items: center; }
.try__dev { margin: 0; display: grid; justify-items: center; gap: 1rem; width: 100%; min-width: 0; }
.try__dev figcaption { font-weight: 700; font-size: 0.9375rem; color: var(--ink-2); }
.try__dev figcaption:focus { outline: none; }
.try__dev figcaption:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.try__dev .phone { --pw: 19rem; }
.try__controls { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; width: min(100%, 22rem); }
.try__controls .btn { min-height: 3rem; padding-inline: 0.9rem; font-size: 0.9375rem; }
.btn--help { background: var(--app-urgent); color: #fff; }
.btn--help:hover { background: #9E2019; }
.try__more { grid-column: 1 / -1; }
.try__more-list { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.try__controls [aria-pressed="true"] { box-shadow: 0 0 0 3px var(--focus); }
.try__note { max-width: 20rem; margin: 0; color: var(--ink-2); font-size: 0.9375rem; text-align: center; }
.abtn.is-pressed { box-shadow: 0 0 0 calc(3 * var(--u)) var(--app-accent); }
@media (min-width: 64rem) {
.try__stage { grid-template-columns: repeat(2, minmax(0, 22rem)); justify-content: center; align-items: start; column-gap: 5rem; }
.try__stage > [aria-live] { grid-column: 1 / -1; }
.try__back { display: none; }
}
@media (max-width: 63.99rem) {
.js .try__stage[data-step="beet"] [data-dev="buddy"], .js .try__stage:not([data-step="beet"]) [data-dev="beet"] { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
.try__stage.is-new .anotif:not([hidden]) { animation: drop-in 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.try__stage.is-new [data-try-buddy-home]:not([hidden]) .anudges { animation: rise 0.4s ease; }
}
@keyframes drop-in { from { transform: translateY(-1rem); } to { transform: none; } }
@keyframes rise { from { transform: translateY(0.75rem); } to { transform: none; } }
.gcard { margin: 0 auto; max-width: 30rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }
.gcard__card { background: var(--app-card); color: var(--app-ink); border: 1px solid var(--app-line); border-radius: 26px; padding: 0.9rem 1rem 0.75rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.15rem; font-family: "Roboto App", Roboto, system-ui, sans-serif; }
.gcard__top { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.gcard__who { margin: 0; font-size: 0.8125rem; color: var(--app-muted); }
.gcard__label { margin: 0.2rem 0 0; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; color: var(--app-muted); min-height: 1.2em; }
.gcard__value { margin: 0; display: flex; align-items: center; gap: 0.5rem; min-height: 3.1rem; }
.gcard__num { font-size: 2.6rem; line-height: 1.1; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; min-width: 1ch; }
.gcard__unit { align-self: flex-start; margin-top: 0.45rem; font-size: 0.8125rem; font-weight: 700; color: var(--app-muted); }
.gcard__arrow { font-size: 1.5rem; font-weight: 700; color: var(--app-greet); margin-top: 0.4rem; }
.gcard__row { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--app-line); flex-wrap: wrap; }
.gcard__state { font-size: 1.125rem; font-weight: 700; color: var(--g-in); }
.gcard__ranges { display: flex; flex-wrap: wrap; padding: 0.2rem; border-radius: 999px; background: var(--app-chips); }
.gcard__ranges button { min-width: 2.75rem; min-height: 2.75rem; padding: 0 0.6rem; border: 0; border-radius: 999px; background: none; color: var(--app-muted); font-family: inherit; font-weight: 700; font-size: 0.8125rem; line-height: 1; cursor: pointer; }
.gcard__ranges [aria-pressed="true"] { background: var(--app-chip-on); color: var(--app-accent); }
.gcard__plot { position: relative; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; border-radius: 12px; margin-top: 0.25rem; }
.gcard__plot:focus-visible { outline-offset: 2px; }
.gsvg { display: block; width: 100%; height: auto; overflow: visible; font-family: "Roboto App", Roboto, system-ui, sans-serif; }
.gsvg__hi { fill: var(--app-band-hi); }
.gsvg__in { fill: var(--app-band-in); }
.gsvg__lo { fill: var(--app-band-lo); }
.gsvg__edge { stroke: var(--app-accent); stroke-opacity: 0.35; stroke-width: 0.8; }
.gsvg__y { font-size: 11px; font-weight: 700; fill: var(--app-axis); }
.gsvg__y--range { fill: var(--app-accent); }
.gsvg__t { font-size: 11px; font-weight: 500; fill: var(--app-axis); text-anchor: middle; }
.gsvg__date { font-size: 10px; font-weight: 700; fill: var(--app-axis); }
.gsvg__day { stroke: var(--app-axis); stroke-opacity: 0.5; stroke-dasharray: 3 3; stroke-width: 0.8; }
.gsvg__dot { fill: var(--app-graph-dot); }
.gsvg__dot--now { stroke: var(--app-ink); stroke-width: 1.4; }
.gsvg__dot--sel { fill: var(--app-accent); stroke: var(--app-card); stroke-width: 1.5; }
.gsvg__cursor { stroke: var(--app-accent); stroke-width: 1; stroke-dasharray: 2 2; }
.gsvg__ring { fill: none; stroke: var(--g-low); stroke-width: 1.8; }
.gsvg__hair { stroke: var(--app-axis); stroke-opacity: 0.6; stroke-dasharray: 2 3; stroke-width: 0.8; }
.gsvg__sensor { fill: var(--app-card); stroke: var(--app-axis); stroke-width: 1.4; }
.gsvg__sensor-dot { fill: var(--app-axis); }
.gcard__mark { position: absolute; width: 2.75rem; height: 2.75rem; margin: -1.375rem 0 0 -1.375rem; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.gcard__mark:focus-visible { outline: 3px solid var(--focus); outline-offset: -6px; }
.gcard__chip { position: absolute; left: 0.5rem; right: 0.5rem; top: 2.2rem; display: grid; gap: 0.1rem; padding: 0.6rem 0.8rem; border-radius: 14px; background: var(--app-bubble); border: 1px solid var(--app-line); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); font-size: 0.875rem; pointer-events: none; }
.gcard__chip strong { font-weight: 700; }
.gcard__chip span { color: var(--app-muted); }
.gcard__live { position: absolute; right: 0.5rem; bottom: 0.25rem; min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--app-line); border-radius: 999px; background: var(--app-bubble); color: var(--app-accent); font-family: inherit; font-weight: 700; font-size: 0.875rem; line-height: 1; cursor: pointer; }
.gcard__help { margin: 0; text-align: center; color: var(--ink-2); font-size: 0.9375rem; }
.gcard__alert { display: grid; gap: 0.75rem; padding: 1.1rem; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); }
.gcard__alert-head { margin: 0; font-weight: 800; font-size: 1.0625rem; }
.gcard__alert-note { margin: 0; color: var(--ink-2); font-size: 0.9375rem; }
.gnotif { display: grid; gap: 0.15rem; padding: 0.8rem 1rem; border-radius: 20px; background: rgba(240, 238, 246, 0.96); color: #1B1B1F; font-family: "Roboto App", Roboto, system-ui, sans-serif; border-left: 4px solid var(--app-urgent); }
.gnotif__app { font-size: 0.75rem; color: #46464F; }
.gnotif__title { font-weight: 700; font-size: 0.9375rem; }
.gnotif__body { font-size: 0.875rem; color: #303036; }
.alife { max-width: 30rem; margin-inline: auto; display: grid; gap: 0.6rem; font-family: "Roboto App", Roboto, system-ui, sans-serif; }
.alife__top { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding-inline: 0.25rem; }
.alife__label { margin: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.09em; color: var(--app-greet); }
.alife__card { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; padding: 1.25rem; border-radius: 24px; background: var(--app-card); border: 1px solid var(--app-line); color: var(--app-ink); }
.alife__icon { display: grid; place-items: center; width: 3rem; height: 3rem; }
.alife__icon svg { width: 2.125rem; height: 2.125rem; }
.alife__shape { fill: var(--app-accent); }
.alife__shine { fill: #fff; fill-opacity: 0.16; }
.alife__text { display: grid; gap: 0.2rem; min-width: 0; }
.alife__text p { margin: 0; }
.alife__title { font-weight: 700; font-size: 0.875rem; }
.alife__left { font-size: 0.875rem; line-height: 1.36; }
.alife__meta { font-size: 0.75rem; line-height: 1.45; color: var(--app-muted); }
.alife__edit { align-self: center; padding: 0.6rem 0.75rem; font-size: 0.875rem; font-weight: 500; color: var(--app-muted); }
.life__buddy { margin: 1.5rem auto 0; max-width: 34rem; display: flex; justify-content: center; align-items: center; gap: 0.6rem; text-align: center; color: var(--ink-2); }
.life__buddy svg { width: 1.25rem; height: 1.25rem; flex: none; color: var(--accent); }
.section--tight { padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); }
.phead { padding-block: clamp(2.75rem, 2rem + 4vw, 5.5rem) clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.phead .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.phead h1 { margin: 0; font-size: clamp(2.25rem, 1.6rem + 3.2vw, 3.75rem); }
.phead .lead { margin: 0; max-width: 38rem; }
.phead__meta { margin: 0; color: var(--ink-3); font-size: 0.9375rem; }
.phead--split .wrap { gap: 2.5rem; }
.phead__visual { display: grid; justify-items: center; }
@media (min-width: 64rem) {
.phead--split .wrap { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; }
}
.jump { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0.5rem 0 0; padding: 0; }
.jump li { margin: 0; }
.jump a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.9375rem; }
.jump a:hover { border-color: var(--ink-2); }
.block { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.block + .block { border-top: 1px solid var(--line); }
.block__head { display: grid; gap: 0.5rem; margin-bottom: 1.75rem; max-width: 38rem; }
.block__head h2 { margin: 0; font-size: clamp(1.625rem, 1.3rem + 1.6vw, 2.25rem); }
.block__head p { margin: 0; color: var(--ink-2); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; counter-reset: step; }
.steps > li { margin: 0; position: relative; display: grid; gap: 0.35rem; padding: 1.25rem 1.25rem 1.25rem 4rem; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); counter-increment: step; }
.steps > li::before { content: counter(step); position: absolute; left: 1.15rem; top: 1.15rem; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--line-2); color: var(--ink); font-weight: 800; font-size: 0.9375rem; }
.steps h3 { margin: 0; font-size: 1.125rem; }
.steps p { margin: 0; color: var(--ink-2); }
.steps--line > li { background: none; border: 0; border-radius: 0; padding-block: 0.25rem 1.25rem; }
.steps--line > li::before { top: 0; }
.steps--line > li:not(:last-child)::after { content: ""; position: absolute; left: 2.15rem; top: 2.4rem; bottom: 0.1rem; width: 1px; background: var(--line-2); }
.fcards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
.fcard { display: grid; align-content: start; gap: 0.5rem; padding: 1.35rem; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); }
.fcard__icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 12px; background: var(--surface-2); color: var(--accent); }
.fcard__icon svg { width: 1.3rem; height: 1.3rem; }
.fcard h3 { margin: 0.25rem 0 0; font-size: 1.125rem; }
.fcard p { margin: 0; color: var(--ink-2); font-size: 0.96875rem; }
@media (min-width: 40rem) { .fcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .fcards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.chips li { margin: 0; padding: 0.45rem 0.9rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); font-size: 0.9375rem; font-weight: 600; }
.note { display: grid; gap: 0.4rem; padding: 1.15rem 1.25rem; border-radius: 20px; background: var(--surface); border: 1px solid var(--line-2); }
.note strong { color: var(--ink); }
.note p { margin: 0; color: var(--ink-2); }
.split2 { display: grid; gap: 0.75rem; }
@media (min-width: 48rem) { .split2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mt { margin-top: 1.5rem; }
.textlink { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 700; }
.small-print { font-size: 0.8125rem; color: var(--ink-3); }
.faq { display: grid; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.5rem; padding: 0.85rem 0; cursor: pointer; list-style: none; font-weight: 700; font-size: 1.0625rem; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 0.6rem; height: 0.6rem; margin-right: 0.25rem; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg) translateY(-0.15rem); transition: transform 0.2s ease; }
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-0.1rem); }
.faq__a { padding: 0 0 1.15rem; color: var(--ink-2); }
.faq__a strong { color: var(--ink); }
.help-group { padding-top: 1rem; }
.help-group + .help-group { margin-top: 2rem; }
.help-group h2 { font-size: 1.375rem; margin: 0 0 0.5rem; letter-spacing: -0.02em; }
.qs { display: grid; gap: 0.75rem; }
.qs .card { padding: 1.4rem 1.35rem; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); }
.qs .card h2 { font-size: 1.25rem; margin: 0 0 0.6rem; letter-spacing: -0.015em; }
.qs .card p, .qs .card li { color: var(--ink-2); }
.qs .card ul { margin: 0; }
.qs .card p:last-child { margin-bottom: 0; }
.doc { display: grid; gap: 1.5rem; padding-bottom: clamp(3rem, 2rem + 4vw, 6rem); }
.doc__body { min-width: 0; max-width: 44rem; }
.doc__body section { padding-top: 1.75rem; }
.doc__body section + section { margin-top: 1rem; border-top: 1px solid var(--line); }
.doc__body h2 { font-size: 1.5rem; letter-spacing: -0.02em; margin-bottom: 0.75rem; }
.doc__body h3 { font-size: 1.125rem; margin: 1.5rem 0 0.5rem; }
.doc__body p, .doc__body li { color: var(--ink-2); }
.doc__body strong { color: var(--ink); }
.doc__body table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.doc__body th, .doc__body td { text-align: left; vertical-align: top; padding: 0.6rem 0.75rem 0.6rem 0; border-bottom: 1px solid var(--line); }
.doc__body th { color: var(--ink); }
.table-wrap { overflow-x: auto; margin-bottom: 1em; }
.toc { position: sticky; top: 4.25rem; z-index: 5; align-self: start; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.toc summary { display: flex; align-items: center; justify-content: space-between; min-height: 3rem; padding: 0 1.1rem; cursor: pointer; list-style: none; font-weight: 700; }
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after { content: ""; width: 0.55rem; height: 0.55rem; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg) translateY(-0.15rem); }
.toc[open] summary::after { transform: rotate(-135deg); }
.toc ol { list-style: none; margin: 0; padding: 0 0.5rem 0.75rem; max-height: 60vh; overflow-y: auto; }
.toc li { margin: 0; }
.toc a { display: flex; align-items: center; min-height: 2.75rem; padding: 0 0.6rem; border-radius: 10px; color: var(--ink-2); text-decoration: none; font-size: 0.9375rem; }
.toc a:hover, .toc a[aria-current="true"] { color: var(--ink); background: var(--surface-2); }
@media (min-width: 64rem) {
.doc { grid-template-columns: 15rem minmax(0, 1fr); gap: 4rem; }
.toc { top: 5.5rem; background: none; border: 0; }
.toc summary { padding: 0 0.6rem; color: var(--ink-3); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; }
.toc ol { max-height: none; padding: 0; }
}
.center-page { min-height: 70svh; display: grid; place-items: center; text-align: center; padding-block: 4rem; }
.center-page .wrap { display: grid; justify-items: center; gap: 1.25rem; width: 100%; min-width: 0; }
.center-page h1 { margin: 0; }
.center-page .lead { margin: 0; max-width: 30rem; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.blank { background: #FFF1C2; color: #4A3600; padding: 0 0.3em; border-radius: 4px; font-weight: 650; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.phead__copy { display: grid; gap: 1rem; }
.phead__copy .eyebrow { margin: 0; }
.phead__visual--crop { height: clamp(22rem, 90vw, 28rem); overflow: clip; position: relative; }
.phead__visual--crop .phone { --pw: 18rem; }
.phead__visual--crop { -webkit-mask-image: linear-gradient(#000 calc(100% - 4rem), transparent); mask-image: linear-gradient(#000 calc(100% - 4rem), transparent); }
.flow { list-style: none; margin: 0; padding: 0; }
.flow > li { margin: 0; }
html[data-signups="closed"] [data-when="open"], html:not([data-signups="closed"]) [data-when="closed"] { display: none !important; }
.signup { display: grid; gap: 1.5rem; padding: clamp(1.25rem, 1rem + 2vw, 2.25rem); border-radius: 28px; background: var(--surface); border: 1px solid var(--line); }
.form { display: grid; gap: 1.75rem; }
.field { display: grid; gap: 0.5rem; border: 0; padding: 0; margin: 0; min-width: 0; }
.field > label, .field > legend { font-weight: 700; font-size: 1.0625rem; padding: 0; color: var(--ink); }
.field > legend { margin-bottom: 0.5rem; }
.field__hint { font-size: 0.9375rem; color: var(--ink-2); margin: 0; }
.field__opt { font-weight: 500; color: var(--ink-3); }
.input, .textarea {
width: 100%; min-height: 3.25rem; padding: 0.75rem 1rem; border-radius: 14px; border: 1px solid var(--line-2);
background: var(--bg); color: var(--ink); font-family: inherit; font-weight: 400; font-size: 1.0625rem; line-height: 1.4; -webkit-appearance: none; appearance: none;
}
.textarea { min-height: 6rem; resize: vertical; }
.input:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--line-2); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--g-low); }
.error { margin: 0; color: var(--g-low); font-weight: 650; font-size: 0.9375rem; }
.error:empty { display: none; }
.choice { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice label {
display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.875rem; padding: 0.5rem 1rem; border-radius: 999px;
border: 1px solid var(--line-2); background: var(--bg); color: var(--ink); font-weight: 600; font-size: 0.9875rem; cursor: pointer; user-select: none;
}
.choice label { position: relative; padding-inline: 1.2rem; }
.choice label::before { content: ""; position: absolute; left: 0.55rem; top: 50%; margin-top: -0.5rem; width: 0.4rem; height: 0.75rem; border: solid transparent; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translateY(-2px) scale(0); transition: transform 0.15s ease; }
.choice input:checked + label { border-color: var(--ink); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--ink); }
.choice input:checked + label::before { border-color: var(--ink); transform: rotate(45deg) translateY(-2px) scale(1); }
.choice input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }
.choice input:disabled + label { opacity: 0.45; cursor: not-allowed; }
.choice input[aria-invalid="true"] + label { border-color: var(--g-low); }
.choice--stack { display: grid; }
.choice--stack label { border-radius: 16px; width: 100%; }
.choice--two { display: grid; grid-template-columns: 1fr 1fr; }
.choice--two label { justify-content: center; min-height: 3.25rem; }
.choice--list { display: grid; gap: 0.5rem; }
.choice--list label { border-radius: 16px; width: 100%; min-height: 3rem; }
.check { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: 0.75rem; align-items: start; min-height: 2.75rem; cursor: pointer; color: var(--ink); }
.check input { width: 1.375rem; height: 1.375rem; margin: 0.1rem 0 0; accent-color: var(--ink); }
.checks { display: grid; gap: 0.6rem; }
.consent { display: grid; gap: 0.75rem; padding: 1rem 1.1rem 1.1rem; border-radius: 18px; border: 1px solid var(--line-2); background: var(--bg); }
.consent__title { margin: 0; font-size: 1rem; }
.consent p { margin: 0; color: var(--ink-2); font-size: 0.9375rem; }
.consent__list { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.3rem; color: var(--ink-2); font-size: 0.9375rem; }
.consent__list li { margin: 0; }
.pick-tools { display: grid; gap: 0.6rem; }
.pick-group { display: grid; gap: 0.5rem; }
.pick-group__title { margin: 0.5rem 0 0; font-weight: 700; font-size: 0.875rem; color: var(--ink-3); }
.brand-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.brand-chip { min-height: 2.75rem; padding: 0.4rem 0.95rem; border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg); color: var(--ink); font-family: inherit; font-weight: 600; font-size: 0.9375rem; line-height: 1.2; cursor: pointer; }
.brand-chip[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--surface-2); }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.turnstile:empty { display: none; }
.form-status { margin: 0; padding: 0.9rem 1.1rem; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line-2); }
.form-status--error { border-color: var(--g-low); }
.form__send { display: grid; gap: 0.75rem; }
.success { display: grid; justify-items: start; gap: 1rem; }
.success:focus { outline: none; }
.success h2 { margin: 0; font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem); }
.success .lead { margin: 0; }
.next-steps { margin: 0; padding-left: 1.25rem; display: grid; gap: 0.6rem; color: var(--ink-2); }
.next-steps li { margin: 0; }
.next-steps strong { color: var(--ink); }
.more { display: grid; gap: 1.5rem; width: 100%; margin-top: 0.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.more__head { display: grid; gap: 0.35rem; }
.more__head h3 { margin: 0; font-size: 1.375rem; }
.more__head p { margin: 0; color: var(--ink-2); }
.more__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.link-list { list-style: none; margin: 0; padding: 0; }
.link-list li { margin: 0; }
.link-list a { display: flex; align-items: center; min-height: 2.75rem; font-weight: 600; }
.beta-facts { margin: 0; color: var(--ink-3); font-weight: 600; }
.closed-note { display: grid; gap: 0.75rem; }
.closed-note h2 { margin: 0; font-size: 1.5rem; }
.closed-note p { margin: 0; color: var(--ink-2); }
.phead .pill, .phead .eyebrow { justify-self: start; }
.note + .qs { margin-top: 0.75rem; }
.phead .jump + .note { margin-top: 0.5rem; }
.doc__body section { scroll-margin-top: 8rem; }
@media (min-width: 64rem) { .doc__body section { scroll-margin-top: 6rem; } }
.try__dev .phone { --pw: min(19rem, calc((100svh - 15rem) * 9 / 19.5)); }
.try__dev figcaption { scroll-margin-top: 5rem; }
.alock__hint { display: none; margin-top: calc(120 * var(--u)) !important; font-size: calc(15 * var(--u)); color: rgba(255, 255, 255, 0.72); }
.js .try__stage[data-step="beet"] .alock__hint { display: block; }
@media (min-width: 64rem) {
.split-sec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); gap: 4rem; align-items: center; }
.split-sec .section__head { text-align: left; margin: 0; max-width: 28rem; }
.split-sec .gcard, .split-sec .alife { margin: 0; }
.split-sec .life__buddy { justify-content: flex-start; text-align: left; margin-left: 0; }
.split-sec .gcard__help { text-align: left; }
}
.gsvg__mlabel { font-size: 9.5px; font-weight: 600; fill: var(--app-axis); }
.hero__status { margin: -0.25rem 0 0; font-size: 0.9375rem; font-weight: 600; color: var(--ink-3); }
.hero__copy .hero__status + .hero__actions { margin-top: 1.25rem; }
.about { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.about li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: 0.85rem; align-items: start; margin: 0; color: var(--ink-2); }
.about li svg { width: 1.5rem; height: 1.5rem; color: var(--accent); margin-top: 0.1rem; }
.about strong { color: var(--ink); }
.loop-start { display: grid; justify-items: start; gap: 0.75rem; margin-top: 1.5rem; }
.loop-start__done { margin: 0; font-weight: 600; color: var(--ink); }
.loop-start__done:focus { outline: none; }
html.loop-open { overflow: hidden; }
.loop {
--l-bg: #0F1115; --l-card: #161A20; --l-on: #1D2129; --l-line: #2A303C; --l-ink: #FFFFFF; --l-muted: #A7B0BE; --l-accent: #B794F4;
position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
background: var(--l-bg); color: var(--l-ink); font-family: "Roboto App", "Figtree", system-ui, sans-serif; overflow: hidden;
}
:root[data-theme="light"] .loop { --l-bg: #F6F7FA; --l-card: #FFFFFF; --l-on: #FFFFFF; --l-line: #D5DAE3; --l-ink: #1A202C; --l-muted: #4A5568; --l-accent: #6840AD; }
.loop[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.loop::backdrop { background: rgba(0, 0, 0, 0.6); }
.loop__bar { display: grid; grid-template-columns: 3rem minmax(0, 1fr) 3rem; align-items: center; gap: 0.5rem;
padding: max(0.5rem, env(safe-area-inset-top)) max(0.5rem, env(safe-area-inset-right)) 0.5rem max(0.5rem, env(safe-area-inset-left)); }
.loop__icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; border: 0; background: transparent; color: var(--l-ink); cursor: pointer; }
.loop__icon:hover { background: var(--l-card); }
.loop__icon svg { width: 1.5rem; height: 1.5rem; }
.loop__icon[hidden] { display: grid !important; visibility: hidden; }
.loop__dots { display: flex; justify-content: center; gap: 0.4rem; }
.loop__dots span { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--l-line); transition: width 0.25s ease, background-color 0.25s ease; }
.loop__dots .is-done { background: var(--l-muted); }
.loop__dots .is-on { width: 1.5rem; background: var(--l-ink); }
.loop__scroll { overflow-y: auto; overscroll-behavior: contain; padding: 0.5rem max(1rem, env(safe-area-inset-right)) 2rem max(1rem, env(safe-area-inset-left)); }
.loop__scroll > *, .loop__btns { width: 100%; max-width: 34rem; margin-inline: auto; }
.loop__hello { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 0.85rem; align-items: center; margin-bottom: 1.25rem; }
.loop__mascot { grid-row: 1 / span 2; width: 3.25rem; }
.loop__title { margin: 0; align-self: end; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--l-muted); }
.loop__count { margin: 0; align-self: start; font-size: 0.9375rem; color: var(--l-muted); }
.loop__count:empty { display: none; }
.loop__step { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 0.75rem; }
.loop__legend { padding: 0; margin: 0 0 0.75rem; max-width: 100%; }
.loop__q { margin: 0; font-size: clamp(1.5rem, 1.3rem + 1vw, 1.875rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: var(--l-ink); }
.loop__q:focus { outline: none; }
.loop__hint, .loop__lead { margin: 0; color: var(--l-muted); font-size: 1rem; }
.loop__error { margin: 0; color: var(--g-low); font-weight: 600; font-size: 0.9375rem; }
.loop__error:empty { display: none; }
.tiles { display: grid; gap: 0.6rem; }
.tiles--two { grid-template-columns: 1fr 1fr; }
.tile__in { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.tile { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.75rem; align-items: center; min-height: 3.75rem;
padding: 0.8rem 1rem; border-radius: 16px; background: var(--l-card); border: 1px solid var(--l-line); color: var(--l-ink); cursor: pointer;
font-size: 1.0625rem; font-weight: 500; line-height: 1.3; transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease; }
.tile--sm { min-height: 3.25rem; }
.tile__label { grid-column: 1; }
.tile__sub { grid-column: 1; font-size: 0.9375rem; font-weight: 400; color: var(--l-muted); }
.tile__tick { grid-column: 2; grid-row: 1 / span 2; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 2px solid var(--l-line); color: transparent; }
.tile__tick svg { width: 0.95rem; height: 0.95rem; stroke-width: 3; }
.tile:hover { border-color: var(--l-muted); }
.tile__in:checked + .tile { border-color: var(--l-accent); box-shadow: inset 0 0 0 1px var(--l-accent); background: var(--l-on); }
.tile__in:checked + .tile .tile__tick { border-color: var(--l-accent); background: var(--l-accent); color: var(--l-bg); }
.tile__in:focus-visible + .tile { outline: 3px solid var(--l-accent); outline-offset: 2px; }
.tile__in[aria-invalid="true"] + .tile { border-color: var(--g-low); }
.tile__in[hidden] + .tile, .tile[hidden] { display: none; }
.loop__other, .loop__field { display: grid; gap: 0.45rem; margin-top: 0.25rem; }
.loop__label { font-weight: 600; color: var(--l-ink); }
.loop .input { background: var(--l-card); border-color: var(--l-line); color: var(--l-ink); }
.loop .input:focus { border-color: var(--l-accent); box-shadow: 0 0 0 3px var(--l-line); }
.loop .field__hint { color: var(--l-muted); }
.loop__aside { margin: 0.5rem 0 0; padding: 0.85rem 1rem; border-radius: 14px; border: 1px dashed var(--l-line); color: var(--l-muted); font-size: 0.9375rem; }
.loop__aside a, .loop__why a, .loop .check a, .loop__next a { color: var(--l-accent); }
.loop__why { margin: 0.25rem 0 0; padding: 0.9rem 1rem; border-radius: 14px; background: var(--l-card); border: 1px solid var(--l-line); color: var(--l-muted); font-size: 0.9375rem; }
.loop__why strong { color: var(--l-ink); }
.loop .check { color: var(--l-ink); }
.loop .check input { accent-color: var(--l-accent); }
.check__more, .check__hint { margin: 0; padding-left: 2.25rem; }
.check__more a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; }
.check__hint { margin-top: -0.25rem; }
.loop .checks { margin-top: 0.25rem; }
.loop .turnstile { margin-top: 0.25rem; }
.loop__done { display: grid; gap: 0.85rem; }
.loop__sub { margin: 0.5rem 0 0; font-size: 1.0625rem; color: var(--l-ink); }
.loop__next { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.loop__next li { display: grid; grid-template-columns: 1.375rem minmax(0, 1fr); gap: 0.75rem; align-items: start; margin: 0; padding: 0.9rem 1rem; border-radius: 14px; background: var(--l-card); border: 1px solid var(--l-line); }
.loop__next svg { width: 1.375rem; height: 1.375rem; color: var(--l-accent); }
.loop .form { gap: 1.5rem; }
.loop .field > legend { color: var(--l-ink); }
.loop .choice label { background: var(--l-card); border-color: var(--l-line); color: var(--l-ink); }
.loop .choice input:checked + label { border-color: var(--l-accent); box-shadow: inset 0 0 0 1px var(--l-accent); background: var(--l-on); }
.loop .choice input:checked + label::before { border-color: var(--l-accent); }
.loop .brand-chip { background: var(--l-card); border-color: var(--l-line); color: var(--l-ink); }
.loop__foot { padding: 0.75rem max(1rem, env(safe-area-inset-right)) max(0.75rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); border-top: 1px solid var(--l-line); background: var(--l-bg); }
.loop__btns { display: grid; gap: 0.75rem; }
.loop__btns--two { grid-template-columns: 1fr 1fr; }
.loop .btn--cta { background: var(--l-ink); color: var(--l-bg); }
.loop .btn--line { color: var(--l-ink); border-color: var(--l-line); }
@media (prefers-reduced-motion: no-preference) {
.loop[open] { animation: loop-up 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
.loop__step:not([hidden]), .loop__done:not([hidden]) { animation: loop-in 0.3s ease both; }
.loop__mascot.is-hop { animation: loop-hop 0.6s cubic-bezier(0.3, 1.5, 0.5, 1); }
.tile:active { transform: scale(0.985); }
}
@keyframes loop-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes loop-in { from { opacity: 0; transform: translateX(1.25rem); } to { opacity: 1; transform: none; } }
@keyframes loop-hop { 0% { transform: none; } 40% { transform: translateY(-0.4rem) rotate(-4deg); } 100% { transform: none; } }
.menu-btn { flex: none; }
@media (max-width: 23.99rem) { .bar { gap: 0.5rem; } .brand { min-width: 2.75rem; } .brand__word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }