/* ========================================================================= HELIO — Public landing · Light-first · Quiet Aura atmosphere Dark mode: charcoal/slate (#0F1115 canvas), not brown. Theme: data-theme="light|dark" on . Default light. Never auto-dark. ========================================================================= */ /* Fonts loaded via Google Fonts link in HTML head. DM Sans · DM Mono · Instrument Serif — see FINAL_SHELL_SPEC.md §1 */ /* ── LIGHT THEME — canonical default ── */ :root, [data-theme="light"] { /* surfaces */ --color-page: #F5F3EE; /* warmer, more distinct from white */ --color-surface: #FFFFFF; --color-surface-sunken: #EDEBE5; /* more visible as secondary surface */ --color-surface-muted: #E2DFD8; --canvas: var(--color-page); --paper: var(--color-surface); --sink: var(--color-surface-sunken); --muted: var(--color-surface-muted); /* named section backgrounds — section-level atmosphere */ --sec-hero: linear-gradient(160deg,#DDE7F5 0%,#E5DDF5 35%,#F0DDD6 70%,#DDE8E4 100%); --sec-features: linear-gradient(175deg,#EDE9DF 0%,#E3D8F0 100%); --sec-how: linear-gradient(175deg,#E8E4DA 0%,#DAE4D8 100%); --sec-status: linear-gradient(160deg,#DDE5F5 0%,#E3DEF5 100%); --sec-boundary: linear-gradient(90deg,#DEDAD0 0%,#D6DDD4 100%); --sec-footer: linear-gradient(160deg,#1E1C17 0%,#23201A 100%); /* ink */ --color-text: #1a1916; --color-text-secondary: #565350; --color-text-faint: #636057; /* AA: ≥4.5:1 on canvas/paper/sink and the pastel hero washes (was #8A8782 ≈3.2:1) */ --ink: var(--color-text); --ink2: var(--color-text-secondary); --ink3: var(--color-text-faint); /* borders */ --color-border: #E5E3DE; --color-border-strong: #D2CFC8; --line: var(--color-border); --line-firm: var(--color-border-strong); /* semantic — fixed meaning, never decorative */ --color-success: #197A47; --color-success-soft: #E6F2EB; --color-success-border: #BFE0CD; --color-warning: #9A6020; --color-warning-soft: #F5E9D6; --color-warning-border: #E6CFA8; --color-error: #8B2E2E; --color-error-soft: #F6E4E4; --ok: var(--color-success); --ok-tint: var(--color-success-soft); --ok-line: var(--color-success-border); --warn: var(--color-warning); --warn-tint: var(--color-warning-soft); --warn-line: var(--color-warning-border); --err: var(--color-error); --err-tint: var(--color-error-soft); /* accent — soft multi-color, cosmetic only */ --a-blue: #5B7FB5; --a-sage: #7C9A78; --a-clay: #BE8A6A; --a-violet: #8A7BB0; --a-yellow: #C2A24E; --a-rose: #C07C8E; --a-lavender: #A7A2C8; /* atmosphere — section washes, visible enough to feel designed */ --atm-1: rgba(123,154,180,.48); /* blue-mist */ --atm-2: rgba(176,162,200,.40); /* lavender */ --atm-3: rgba(198,168,150,.36); /* blush-clay */ --atm-4: rgba(180,200,190,.36); /* sage-mist */ /* persistent full-page gradient — layered behind all content */ --page-atm: radial-gradient(1100px 820px at 8% 12%,rgba(134,160,192,.22),transparent 65%), radial-gradient(900px 700px at 94% 8%,rgba(180,162,208,.20),transparent 65%), radial-gradient(1000px 720px at 72% 92%,rgba(196,166,148,.19),transparent 65%), radial-gradient(780px 620px at 18% 88%,rgba(160,196,176,.18),transparent 65%); /* glass */ --glass-bg: rgba(255,255,255,.72); --glass-line: rgba(255,255,255,.85); --glass-blur: 14px; /* type */ --sans: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --mono: "DM Mono", ui-monospace, "SFMono-Regular", Consolas, monospace; --serif: "Instrument Serif", Georgia, serif; /* geometry */ --r-xs:3px; --r-sm:6px; --r-md:10px; --r-lg:15px; --r-xl:22px; --nav-h:62px; --maxw:1160px; /* shadows */ --sh-sm: 0 1px 2px rgba(20,15,10,.06), 0 2px 6px rgba(20,15,10,.06); --sh-md: 0 1px 3px rgba(20,15,10,.07), 0 8px 24px -10px rgba(20,15,10,.16); --sh-lg: 0 2px 10px rgba(20,15,10,.08), 0 28px 52px -20px rgba(20,15,10,.24); /* gradient-border ink */ --gb-strong: rgba(22,21,19,.20); --gb-soft: rgba(22,21,19,.05); /* ── FINAL_SHELL_SPEC surface tokens (reference warm ramp) ── */ --warm: #f0ece3; /* rail/sidebar background */ --panel: #ffffff; /* card / elevated surface */ --surface: #eceae2; /* secondary surface */ --ink-soft: #2e2c29; --ink-faint: #9a9890; --ink-ghost: #b8b6b0; --border: rgba(26,25,22,0.09); --border-mid: rgba(26,25,22,0.15); --lav: radial-gradient( 120% 100% at 80% 0%, rgba(226,220,242,0.55) 0%, rgba(240,232,236,0.30) 38%, rgba(245,242,235,0) 70% ); } /* ── DARK THEME — opt-in only, cool charcoal-slate (FINAL_SHELL_SPEC.md §2.4) ── Nocturnal indigo/violet/lavender atmosphere. Software-first, private, calm. Not warm-charcoal, not sepia, not wellness-earthy. (#0F1115 canvas) */ [data-theme="dark"] { --color-page: #0F1115; /* cool charcoal-slate — not brown */ --color-surface: #17191F; --color-surface-sunken: #20232B; --color-surface-muted: #292C35; --canvas: var(--color-page); --paper: var(--color-surface); --sink: var(--color-surface-sunken); --muted: var(--color-surface-muted); --warm: #14161B; /* rail/sidebar background — cool charcoal, no warm tint */ --panel: #17191F; --surface: #20232B; --color-text: #F4F1EA; --color-text-secondary: #C9C3B8; --color-text-faint: #8F8A82; --ink: var(--color-text); --ink-soft: #C9C3B8; --ink-faint: #6E6B73; --ink-ghost: #34373F; --ink2: var(--color-text-secondary); --ink3: var(--color-text-faint); --color-border: rgba(255,255,255,0.10); --color-border-strong: rgba(255,255,255,0.16); --line: var(--color-border); --line-firm: var(--color-border-strong); --border: var(--color-border); --border-mid: var(--color-border-strong); --color-success: #4FB07A; --color-success-soft: #0D1F17; --color-success-border: #1E4D35; --color-warning: #D29A4E; --color-warning-soft: #1C1608; --color-warning-border: #4A3510; --color-error: #D87A7A; --color-error-soft: #200E0E; --ok: var(--color-success); --ok-tint: var(--color-success-soft); --ok-line: var(--color-success-border); --warn: var(--color-warning); --warn-tint: var(--color-warning-soft); --warn-line: var(--color-warning-border); --err: var(--color-error); --err-tint: var(--color-error-soft); --lav: radial-gradient( 120% 100% at 80% 0%, rgba(60,54,98,0.42) 0%, rgba(40,38,62,0.26) 40%, rgba(15,17,21,0) 72% ); --a-blue: #8FA8CE; --a-sage: #8FA8CE; --a-clay: #9E9BB8; --a-violet: #AB9DCE; --a-yellow: #9E9BB8; --a-rose: #9BA7C0; --a-lavender: #BCB7DC; --atm-1: rgba(143,168,206,.14); /* blue-mist */ --atm-2: rgba(171,157,206,.12); /* lavender */ --atm-3: rgba(150,160,206,.11); /* periwinkle — no warm clay in dark */ --atm-4: rgba(150,185,165,.10); /* sage-mist */ --sec-hero: linear-gradient(160deg,#131620 0%,#161228 40%,#1A1220 70%,#121A1A 100%); --sec-features: linear-gradient(175deg,#0F1115 0%,#13101E 100%); --sec-how: linear-gradient(175deg,#0F1115 0%,#111610 100%); --sec-status: linear-gradient(160deg,#0F131E 0%,#13101E 100%); --sec-boundary: linear-gradient(90deg,#0F1115 0%,#101410 100%); --sec-footer: linear-gradient(160deg,#080A0D 0%,#0A0C10 100%); --glass-bg: rgba(23,25,31,.72); --glass-line: rgba(255,255,255,.10); --glass-blur: 16px; --sh-sm: 0 1px 2px rgba(0,0,0,.5); --sh-md: 0 1px 3px rgba(0,0,0,.5), 0 8px 22px -10px rgba(0,0,0,.65); --sh-lg: 0 2px 8px rgba(0,0,0,.55), 0 24px 48px -20px rgba(0,0,0,.8); --gb-strong: rgba(255,255,255,.16); --gb-soft: rgba(255,255,255,.04); /* page-atm for dark — nocturnal indigo/lavender, calm and private. */ /* Deep violet at top-right, quiet navy at top-left, dark canvas dominant. */ --page-atm: radial-gradient(78% 58% at 88% 4%,rgba(76,58,118,.12),transparent 62%), radial-gradient(64% 48% at 4% 22%,rgba(36,52,88,.09),transparent 60%), radial-gradient(54% 42% at 62% 96%,rgba(54,40,80,.08),transparent 58%), radial-gradient(70% 52% at 16% 90%,rgba(28,46,68,.07),transparent 62%); /* ── Semantic bridge: dark mode overrides ── */ --bg: var(--canvas); --bg-page: var(--canvas); --bg-page-2: var(--sink); --surface-paper: var(--panel); --surface-sunken: var(--sink); --surface-tinted: var(--muted); --surface-elev: var(--muted); --surface-card: var(--panel); --text-primary: var(--ink); --text-secondary: var(--ink2); --text-faint: var(--ink3); --text-muted: var(--ink3); --text-dim: var(--ink-faint); --border-default: var(--border); --border-strong: var(--border-mid); --line-faint: rgba(245,242,235,0.04); --cta-bg: var(--panel); --cta-bg-hover: var(--surface); --cta-text: var(--ink); --shadow-sm: 0 1px 2px rgba(0,0,0,0.45); --shadow-md: var(--sh-md); --focus-ring: color-mix(in srgb, var(--ink) 25%, transparent); --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--ink) 22%, transparent); --status-error: var(--err); --status-error-soft: var(--err-tint); --status-success: var(--ok); --status-success-soft: var(--ok-tint); --status-warning: var(--warn); --status-warning-soft: var(--warn-tint); --ok-soft: var(--ok-tint); --notice: var(--warn); --notice-soft: var(--warn-tint); --sage: var(--ok); --sage-soft: var(--ok-tint); --sage-border: var(--ok-line); --accent-primary: var(--ok); --accent-soft: var(--ok-tint); --cream: var(--ink); --field-bg: var(--panel); --field-border: var(--border); } /* theme transition — smooth, motion-safe */ @media(prefers-reduced-motion:no-preference){ html.theme-anim, html.theme-anim *{transition:background-color .3s ease,border-color .3s ease,color .3s ease;} } /* ── RESET ── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} html{scroll-behavior:smooth;} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}} body{ font-family:var(--sans); background:var(--page-atm),var(--canvas); background-attachment:fixed; color:var(--ink); font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* background-attachment:fixed causes GPU repaint on scroll in iOS Safari — disable on mobile */ @media(max-width:860px){ body{background-attachment:scroll;} } a{color:inherit;text-decoration:none;} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;} input,textarea{font:inherit;} img,svg{display:block;} ::selection{background:var(--muted);color:var(--ink);} /* Production utilities shared by public pages, auth gates, and app shell. */ .container{ width:min(var(--maxw),calc(100% - 40px)); margin:0 auto; } .page-main{ position:relative; z-index:1; } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .micro{ font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink3); } .skip-link{ position:fixed; top:.75rem; left:.75rem; z-index:100; transform:translateY(-150%); padding:.7rem .95rem; border:1px solid var(--ok-line); border-radius:var(--r-sm); background:var(--paper); color:var(--ink); font-size:.9rem; font-weight:600; text-decoration:none; box-shadow:var(--sh-md); transition:transform .14s ease; } .skip-link:focus-visible{ transform:translateY(0); } :focus-visible{ outline:2px solid var(--a-blue); outline-offset:3px; } @media(max-width:720px){ .container{width:min(100% - 28px,var(--maxw));} } /* ── MOTION (progressive enhancement) ── */ @media(prefers-reduced-motion:no-preference){ .reveal{opacity:0;transform:translateY(13px);transition:opacity .5s ease,transform .5s ease;} .reveal.in{opacity:1;transform:none;} } @media(prefers-reduced-motion:reduce){ *{animation:none!important;} .reveal{opacity:1!important;transform:none!important;} } /* ── PROTOTYPE CHROME ── */ .proto-bar{ position:sticky;top:0;z-index:400;background:#161513;border-bottom:1px solid #2a2824; display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding:8px 14px; font-family:var(--mono);font-size:11px; } .pb-lbl{color:#6d6a64;letter-spacing:.12em;text-transform:uppercase;margin-right:6px;} .pb-btn{ color:#a5a29b;background:transparent;border:1px solid #34322d;padding:5px 10px; border-radius:5px;font-family:var(--mono);font-size:10px;letter-spacing:.03em; transition:all .1s;white-space:nowrap; } .pb-btn:hover{border-color:#54514a;color:#f2ede4;} .pb-btn.on{background:#f2ede4;color:#161513;border-color:#f2ede4;} .pview{display:none;} .pview.on{display:block;} /* ── LAYOUT ── */ .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;} .wrap-n{max-width:720px;margin:0 auto;padding:0 28px;} /* Deck §05: spacing scale — 96px desktop, 72px tablet, 56px mobile */ .sec{padding:96px 0;} .sec-sm{padding:56px 0;} @media(max-width:860px){.sec{padding:72px 0;}.sec-sm{padding:44px 0;}} @media(max-width:560px){.sec{padding:56px 0;}.sec-sm{padding:36px 0;}} hr.rule{border:none;height:1px;background:var(--line);} /* ── TYPE ── */ /* Display: Instrument Serif 400 italic · Sans: DM Sans 300–600 · Mono: DM Mono 400–500 */ .t-hero{font-size:clamp(38px,5.4vw,62px);font-weight:600;letter-spacing:-.03em;line-height:1.03;} .t-page{font-size:clamp(27px,3.6vw,42px);font-weight:600;letter-spacing:-.024em;line-height:1.1;} .t-sec {font-size:clamp(21px,2.3vw,27px);font-weight:600;letter-spacing:-.018em;line-height:1.18;} /* Deck: body 16/1.55 — was 1.62 */ .t-lead{font-size:clamp(16px,1.4vw,18.5px);line-height:1.55;color:var(--ink2);} .t-label{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:500;} .t-meta {font-family:var(--mono);font-size:12.5px;letter-spacing:.01em;} .serif{font-family:var(--serif);font-weight:400;font-style:italic;letter-spacing:-.01em;} .muted{color:var(--ink2);} .faint{color:var(--ink3);} /* ── GRADIENT BORDER (layered background-clip, no dependency) ── */ .gb{ position:relative;border:1.5px solid transparent;border-radius:var(--r-lg); background: linear-gradient(var(--paper),var(--paper)) padding-box, linear-gradient(150deg,var(--gb-strong) 0%,var(--gb-soft) 45%,var(--gb-strong) 100%) border-box; } /* animated variant — one demo surface only, very slow, motion-safe */ @property --gb-angle{syntax:'';initial-value:0deg;inherits:false;} .gb-anim{ position:relative;border:1.5px solid transparent;border-radius:var(--r-lg); background: linear-gradient(var(--paper),var(--paper)) padding-box, conic-gradient(from var(--gb-angle), var(--gb-soft) 0deg,var(--a-blue) 70deg,var(--gb-soft) 140deg, var(--a-violet) 220deg,var(--gb-soft) 290deg,var(--a-blue) 360deg) border-box; } @media(prefers-reduced-motion:no-preference){ .gb-anim{animation:gb-spin 18s linear infinite;} } @keyframes gb-spin{to{--gb-angle:360deg;}} /* ── GLASS ── */ .glass{ background:var(--glass-bg); backdrop-filter:saturate(150%) blur(var(--glass-blur)); -webkit-backdrop-filter:saturate(150%) blur(var(--glass-blur)); border:1px solid var(--glass-line); } /* ── NAV ── */ .nav{ position:sticky;top:0;z-index:120;height:var(--nav-h); background:color-mix(in srgb,var(--paper) 82%,transparent); backdrop-filter:saturate(160%) blur(10px); -webkit-backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid var(--line); } .nav-in{ max-width:var(--maxw);margin:0 auto;height:100%; display:flex;align-items:center;justify-content:space-between;padding:0 28px;gap:18px; } .brand, .nav-logo{ display:flex; align-items:center; flex:none; color:inherit; text-decoration:none; } .wordmark{ display:block; font-family:"Instrument Serif", Georgia, serif; font-style:italic; font-weight:400; font-size:22px; line-height:1; letter-spacing:-.01em; color:#1a1916; } [data-theme="dark"] .wordmark{color:#f5f2eb;} /* Inline SVG brand marks (pill / wordmark) inherit color via currentColor */ .brand-mark{display:block;color:#1a1916;} [data-theme="dark"] .brand-mark{color:#f5f2eb;} /* Footer sits on a dark ground in both themes — mark stays light */ .site-footer .brand-mark{color:#E8E2D8;} .nav-links{display:flex;align-items:center;gap:2px;} .nav-links a{ font-size:14px;font-weight:500;color:var(--ink2);padding:7px 11px; border-radius:var(--r-sm);transition:color .12s,background .12s; } .nav-links a:hover{color:var(--ink);background:var(--muted);} .nav-right{display:flex;align-items:center;gap:8px;flex:none;} .nav-pipe{width:1px;height:18px;background:var(--line-firm);} @media(max-width:860px){.nav-links{display:none;}} /* Mobile nav — lighter chrome, fits 375px without horizontal overflow */ @media(max-width:560px){ :root{--nav-h:54px;} .nav-in{padding:0 16px;gap:8px;} .theme-tog{display:none;} /* light is canonical default; drop the switcher on mobile to free space */ .nav-pipe{display:none;} .nav-right{gap:8px;} .nav .btn-ghost{padding:8px 6px;font-size:14px;} .nav .btn-primary{padding:8px 13px;font-size:13.5px;} } /* ── THEME TOGGLE ── */ .theme-tog{position:relative;} .theme-btn{ width:38px;height:38px;border-radius:var(--r-sm); display:flex;align-items:center;justify-content:center; color:var(--ink2);border:1px solid var(--line);transition:all .12s; } .theme-btn:hover{color:var(--ink);border-color:var(--line-firm);background:var(--paper);} .theme-menu{ position:absolute;top:46px;right:0;width:160px; background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md); box-shadow:var(--sh-md);padding:5px;z-index:200; opacity:0;visibility:hidden;transform:translateY(-4px); transition:opacity .13s,transform .13s,visibility .13s; } .theme-menu.open{opacity:1;visibility:visible;transform:none;} .theme-opt{ display:flex;align-items:center;gap:9px;width:100%;padding:8px 9px; border-radius:var(--r-sm);font-size:13.5px;color:var(--ink);transition:background .1s; } .theme-opt:hover{background:var(--muted);} .theme-opt .to-ic{width:15px;height:15px;flex:none;color:var(--ink2);} .theme-opt .to-chk{margin-left:auto;width:14px;height:14px;color:var(--ok);opacity:0;} .theme-opt.sel .to-chk{opacity:1;} .theme-opt.sel{font-weight:500;} /* ── BUTTONS ── */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:7px; font-weight:500;font-size:14.5px;letter-spacing:-.005em;border-radius:var(--r-sm); white-space:nowrap;transition:background .13s,color .13s,border-color .13s,transform .07s; min-height:44px; } .btn:active{transform:translateY(1px);} .btn:focus-visible{outline:2px solid var(--a-blue);outline-offset:2px;} .btn-primary{background:var(--ink);color:var(--canvas);padding:10px 20px;} .btn-primary:hover{background:var(--ink2);} .btn-secondary{background:transparent;color:var(--ink);padding:9px 18px;border:1px solid var(--line-firm);} .btn-secondary:hover{border-color:var(--ink2);background:var(--paper);} .btn-ghost{color:var(--ink2);padding:9px 12px;} .btn-ghost:hover{color:var(--ink);} .btn-lg{font-size:15.5px;padding:12px 24px;min-height:48px;} .btn-block{display:flex;width:100%;} .btn-link{font-size:13.5px;font-weight:500;color:var(--ink2);} .btn-link:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px;} .btn-link:focus-visible{outline:2px solid var(--a-blue);outline-offset:2px;border-radius:2px;} main[data-auth-section] [data-app-locked] .btn.btn-primary{ background:var(--cta-bg)!important; color:var(--cta-text)!important; } main[data-auth-section] [data-app-locked] .btn.btn-primary:hover{ background:var(--cta-bg-hover)!important; } main[data-auth-section] [data-app-locked] .btn.btn-secondary{ border-color:var(--border-strong)!important; background:transparent!important; color:var(--text-primary)!important; } main[data-auth-section] [data-app-locked] .btn.btn-secondary:hover{ border-color:var(--text-primary)!important; background:var(--surface-paper)!important; } /* nav links keyboard focus */ .nav-links a:focus-visible{outline:2px solid var(--a-blue);outline-offset:2px;} /* FAQ question keyboard focus */ .faq-q:focus-visible{outline:2px solid var(--a-blue);outline-offset:2px;border-radius:3px;} /* ── EYEBROW ── */ .eyebrow{display:flex;align-items:center;gap:9px;margin-bottom:14px;} .eyebrow-dot{width:5px;height:5px;border-radius:50%;background:var(--a-blue);} /* ── HERO ── */ .hero{position:relative;padding:74px 0 88px;overflow:hidden;background:var(--sec-hero);} .hero-atm{ position:absolute;inset:-30% -10% auto -10%;height:600px;z-index:0;pointer-events:none; background: radial-gradient(640px 520px at 14% 18%,var(--atm-1),transparent 68%), radial-gradient(700px 540px at 88% 8%,var(--atm-2),transparent 68%), radial-gradient(580px 460px at 72% 72%,var(--atm-3),transparent 68%), radial-gradient(640px 380px at 24% 84%,var(--atm-4),transparent 68%), radial-gradient(520px 480px at 82% 52%,rgba(176,162,200,.22),transparent 72%); filter:blur(6px); } .hero-grid{ position:relative;z-index:1; display:grid;grid-template-columns:1.05fr 1fr;gap:52px;align-items:center; } .hero h1{margin-bottom:18px;} .hero h1 .serif{color:var(--ink);} .hero-lead{max-width:27em;margin-bottom:24px;} .hero-form{display:flex;gap:8px;flex-wrap:wrap;max-width:420px;margin-bottom:14px;} .hero-form .inp{flex:1;min-width:200px;} .hero-chips{display:flex;gap:7px 16px;flex-wrap:wrap;margin-top:20px;} .hero-chip{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink2);} .hero-chip .hc-dot{ width:13px;height:13px;flex:none;border-radius:50%;background:var(--ok-tint);color:var(--ok); display:flex;align-items:center;justify-content:center;font-size:8px; } @media(max-width:860px){ .hero{padding:40px 0 48px;} .hero-grid{grid-template-columns:1fr;gap:28px;} .hero-form{max-width:100%;} .ac-status{font-size:15px;} } /* Mobile hero — denser first screen, screenshot arrives sooner */ @media(max-width:560px){ .hero{padding:24px 0 32px;} .hero-grid{gap:22px;} .hero h1{margin-bottom:12px;} .wrap{padding:0 20px;} .sec-head{margin-bottom:28px;} /* hero-chips duplicate the microcopy line above and the trust strip below — hide on mobile to surface the product card sooner */ .hero-chips{display:none;} } @media(max-width:440px){ .hero{padding:20px 0 28px;} .wrap{padding:0 16px;} .sec{padding:48px 0;} .sec-sm{padding:32px 0;} } /* ── APP CARD ── */ .appcard{box-shadow:var(--sh-lg);overflow:hidden;} .ac-chrome{ display:flex;align-items:center;justify-content:space-between; padding:11px 15px;border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--canvas) 60%,transparent); } .ac-brand{display:flex;align-items:center;font-weight:600;font-size:13px;} .wordmark-preview{font-size:16px;letter-spacing:0;} .wordmark-display{font-size:36px;letter-spacing:-.015em;} .ac-body{padding:17px 18px 19px;} .ac-lede{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin-bottom:5px;} .ac-status{font-size:18px;font-weight:600;letter-spacing:-.015em;margin-bottom:15px;} .ac-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line);} .ac-row:first-of-type{border-top:none;} .ac-k{font-size:13px;color:var(--ink3);} .ac-v{font-size:13px;font-weight:500;text-align:right;} .ac-v small{display:block;font-size:11.5px;font-weight:400;color:var(--ink2);margin-top:1px;} .ac-foot{ display:flex;align-items:center;justify-content:space-between; padding:11px 18px;border-top:1px solid var(--line); background:color-mix(in srgb,var(--canvas) 60%,transparent); } .ac-saved{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;color:var(--ink3);} .ac-dot{display:none;} /* ── TRUST STRIP — deck: gets a clear top + bottom rule ── */ .trust{ border-top:1px solid var(--line-firm);border-bottom:1px solid var(--line-firm); padding:20px 0; background:color-mix(in srgb,var(--paper) 78%,transparent); backdrop-filter:saturate(120%) blur(8px); -webkit-backdrop-filter:saturate(120%) blur(8px); } .trust-in{ max-width:var(--maxw);margin:0 auto;padding:0 28px; display:flex;align-items:center;justify-content:center;gap:14px 26px;flex-wrap:wrap; } .trust-item{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink2);} .trust-item .ti-ic{width:14px;height:14px;flex:none;color:var(--a-sage);} .trust-pipe{width:1px;height:13px;background:var(--line-firm);} /* ── SECTION HEAD ── */ .sec-head{margin-bottom:46px;} .sec-head .t-lead{margin-top:11px;max-width:33em;} /* ── BENTO ── */ .bento{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;} /* Quiet aura behind the bento grid — positional, not on cards themselves */ .bento-aura{ position:relative; overflow:hidden; /* prevent horizontal bleed on mobile */ } .bento-aura::before{ content:'';pointer-events:none; position:absolute; inset:-80px -60px; z-index:0; background: radial-gradient(900px 600px at 15% 40%,rgba(123,154,180,.16),transparent 70%), radial-gradient(800px 560px at 82% 25%,rgba(176,162,200,.14),transparent 70%), radial-gradient(700px 500px at 50% 85%,rgba(198,168,150,.12),transparent 70%); filter:blur(8px); } @media(max-width:560px){ .bento-aura::before{ inset:-40px -20px; background: radial-gradient(400px 300px at 20% 40%,rgba(123,154,180,.14),transparent 70%), radial-gradient(360px 280px at 80% 60%,rgba(176,162,200,.12),transparent 70%); } } .bento-aura > .bento{position:relative;z-index:1;} .bcell{ background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg); overflow:hidden;display:flex;flex-direction:column;container-type:inline-size; transition:border-color .14s,box-shadow .14s,transform .14s; } .bcell.col6{grid-column:span 6;} .bcell.col3{grid-column:span 3;} .bcell.col2{grid-column:span 2;} .bc-tint{height:6px;width:100%;} /* Card hover: lift + shadow instead of just border */ .bcell:hover{box-shadow:0 4px 20px -6px rgba(20,19,17,.18),0 1px 4px rgba(20,19,17,.07);border-color:var(--line-firm);} .bc-head{padding:17px 19px 13px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;} .bc-title{font-size:15px;font-weight:600;letter-spacing:-.008em;margin-bottom:3px;} .bc-desc{font-size:12.5px;color:var(--ink2);line-height:1.55;} .bc-body{padding:0 19px 18px;flex:1;} @container (min-width:420px){.bc-body-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}} /* status badge */ .badge{ display:inline-flex;align-items:center;gap:5px;flex:none; font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase; padding:3px 8px;border-radius:20px; } .badge .bd{width:5px;height:5px;border-radius:50%;background:currentColor;} .badge-now {background:var(--ok-tint);color:var(--ok);} .badge-next{background:transparent;color:var(--ink3);border:1px dashed var(--line-firm);} /* ── LEDGER ── */ .ledger{display:flex;flex-direction:column;} .lr{display:grid;grid-template-columns:54px 1fr auto;gap:9px;align-items:baseline;padding:7px 0;border-top:1px solid var(--line);} .lr:first-child{border-top:none;} .lr-d{font-family:var(--mono);font-size:10px;color:var(--ink3);line-height:1.3;} .lr-s{font-size:13px;font-weight:500;} .lr-s small{display:block;font-size:11px;font-weight:400;color:var(--ink2);} .lr-a{font-family:var(--mono);font-size:11.5px;color:var(--ink2);} /* recon helper */ .recon{display:flex;flex-direction:column;} .rcs{display:flex;align-items:center;gap:9px;padding:6.5px 0;border-top:1px solid var(--line);font-size:12.5px;} .rcs:first-child{border-top:none;} .rcs-n{width:17px;height:17px;flex:none;border-radius:50%;background:var(--sink);color:var(--ink2); font-family:var(--mono);font-size:9px;display:flex;align-items:center;justify-content:center;} .rcs-eq{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--ink);} .mini-note{margin-top:10px;padding:9px 11px;background:var(--sink);border-radius:var(--r-xs); font-size:11px;color:var(--ink2);line-height:1.55;} /* food-noise */ .fn-bars{display:flex;gap:5px;margin-bottom:7px;} .fn-b{flex:1;height:30px;border-radius:var(--r-xs);background:var(--sink); display:flex;align-items:flex-end;justify-content:center;padding-bottom:4px; font-family:var(--mono);font-size:9px;color:var(--ink3);} .fn-b.sel{background:var(--ok-tint);color:var(--ok);} .fn-cap{display:flex;justify-content:space-between;font-size:11px;color:var(--ink2);} /* habits */ .hab-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;} .hab{display:flex;align-items:center;gap:7px;padding:8px 10px;border:1px solid var(--line); border-radius:var(--r-sm);font-size:12.5px;} .hab.done{background:var(--ok-tint);border-color:var(--ok-line);} .hab-box{width:14px;height:14px;flex:none;border-radius:3px;border:1.5px solid var(--line-firm);} .hab.done .hab-box{background:var(--ok);border-color:var(--ok);display:flex;align-items:center; justify-content:center;color:var(--paper);font-size:8px;} /* vial notice */ .notice{background:var(--warn-tint);border:1px solid var(--warn-line);border-radius:var(--r-sm); padding:10px 12px;margin-top:10px;} .notice-h{display:flex;align-items:center;gap:6px;font-weight:500;font-size:12.5px;color:var(--warn);margin-bottom:3px;} .notice p{font-size:12px;color:var(--ink2);line-height:1.55;} /* site figure */ .site-fig{display:flex;gap:13px;align-items:flex-start;} .site-leg{font-size:12px;color:var(--ink2);display:flex;flex-direction:column;gap:6px;} .site-leg .sl{display:flex;align-items:center;gap:7px;} .site-leg .sw{width:9px;height:9px;border-radius:2px;flex:none;} @media(max-width:860px){ .bento{grid-template-columns:repeat(2,1fr);} .bcell.col6,.bcell.col3,.bcell.col2{grid-column:span 2;} } @media(max-width:560px){ .bento{grid-template-columns:1fr;} .bcell.col6,.bcell.col3,.bcell.col2{grid-column:span 1;} } /* ── DEMO SECTION ── */ .demo-layout{display:grid;grid-template-columns:1fr 1.1fr;gap:52px;align-items:center;} .demo-steps{display:flex;flex-direction:column;gap:22px;} .demo-step{display:flex;gap:16px;cursor:pointer;} .ds-num{ width:26px;height:26px;flex:none;border-radius:50%;border:1.5px solid var(--line-firm); font-family:var(--mono);font-size:10px;color:var(--ink3);margin-top:2px; display:flex;align-items:center;justify-content:center;transition:all .14s; } .demo-step.on .ds-num{background:var(--ink);border-color:var(--ink);color:var(--canvas);} .ds-t{font-size:15.5px;font-weight:600;letter-spacing:-.007em;margin-bottom:3px;transition:color .13s;} .demo-step.on .ds-t{color:var(--ink);} .ds-d{font-size:13.5px;color:var(--ink2);line-height:1.6;} .demo-panel{border-radius:var(--r-xl);box-shadow:var(--sh-lg);overflow:hidden;min-height:360px;} .dp-chrome{ display:flex;align-items:center;justify-content:space-between;padding:12px 16px; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--canvas) 70%,transparent); } .dp-tab{display:none;} .dp-tab.on{display:block;} @media(max-width:860px){.demo-layout{grid-template-columns:1fr;}.demo-panel{min-height:auto;}} /* ── LIVE DEMO ANIMATION ── */ .live-demo{position:relative;height:420px;overflow:hidden;} .demo-frame{ position:absolute;inset:0;padding:20px 18px; display:flex;flex-direction:column;gap:10px; opacity:0;transition:opacity .5s ease; } .demo-frame.active{opacity:1;} .demo-frame.exiting{opacity:0;} .demo-progress{ position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--line); } .demo-progress-bar{ height:100%;background:linear-gradient(90deg,var(--a-blue),var(--a-violet)); border-radius:3px;transition:width .1s linear; } @media(prefers-reduced-motion:reduce){ .demo-frame{opacity:1;transition:none;} .demo-progress-bar{transition:none;} } /* step items within live demo */ .ditem{ background:var(--glass-bg);border:1px solid var(--glass-line);border-radius:var(--r-md); padding:11px 13px;font-size:13px; backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); } .ditem-head{font-weight:600;font-size:13px;margin-bottom:4px;display:flex;align-items:center;gap:7px;} .ditem-sub{font-size:12px;color:var(--ink2);line-height:1.5;} .d-ok{color:var(--ok);} .d-warn{color:var(--warn);} /* ── STATUS BOARD ── */ .status-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:1px; background:var(--line);border:1px solid var(--line);border-radius:var(--r-xl); overflow:hidden;box-shadow:var(--sh-md); } .status-col{background:var(--paper);padding:24px 22px;} .status-col h4{margin-bottom:14px;} .status-col ul{list-style:none;display:flex;flex-direction:column;gap:8px;} .status-col li{display:flex;gap:7px;font-size:13.5px;color:var(--ink2);line-height:1.45;} .status-col li strong{color:var(--ink);font-weight:500;} .li-arr{color:var(--ink3);font-size:11px;margin-top:4px;flex:none;} @media(max-width:860px){.status-grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:560px){.status-grid{grid-template-columns:1fr;}} /* ── BOUNDARY ── */ .boundary-sec{ border-top:1px solid var(--line);border-bottom:1px solid var(--line); padding:56px 0;text-align:center; } /* ── FAQ ── */ .faq-list{display:flex;flex-direction:column;max-width:700px;} .faq-item{border-bottom:1px solid var(--line);} .faq-item:first-child{border-top:1px solid var(--line);} .faq-q{ display:flex;align-items:center;justify-content:space-between;gap:14px; padding:16px 0;cursor:pointer;font-size:15.5px;font-weight:500;letter-spacing:-.005em; transition:color .1s; } .faq-q:hover{color:var(--ink2);} .faq-arr{font-size:11px;color:var(--ink3);flex:none;transition:transform .18s ease;} .faq-item.open .faq-arr{transform:rotate(180deg);} .faq-a{font-size:14px;color:var(--ink2);line-height:1.65;max-height:0;overflow:hidden;transition:max-height .28s ease,padding .28s ease;} .faq-item.open .faq-a{max-height:400px;padding-bottom:16px;} /* ── FORM ── */ .field{margin-bottom:13px;} .field-label{display:block;margin-bottom:5px;} .inp{ width:100%;font-family:var(--sans);font-size:16px; background:var(--sink);border:1px solid var(--line-firm); border-radius:var(--r-sm);padding:11px 13px;color:var(--ink); transition:border-color .14s,box-shadow .14s; } .inp::placeholder{color:var(--ink3);} .inp:focus{outline:none;border-color:var(--a-blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--a-blue) 18%,transparent);} .form-fine{margin-top:10px;text-align:center;font-size:11.5px;color:var(--ink3);} /* ── FOOTER ── */ .site-footer{background:var(--sec-footer);border-top:none;} .footer-in{ max-width:var(--maxw);margin:0 auto;padding:64px 28px 32px; display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:32px; } .f-tagline{font-size:13.5px;color:#A09890;max-width:24em;line-height:1.65;margin:10px 0 8px;} .f-status{font-family:var(--mono);font-size:10.5px;color:#978F85;line-height:1.7;max-width:24em;} .site-footer h5{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase; color:#A09890;font-weight:500;margin-bottom:12px;} .site-footer ul{list-style:none;display:flex;flex-direction:column;gap:8px;} .site-footer ul a{font-size:13px;color:#A09890;transition:color .1s;} .site-footer ul a:hover{color:#E8E2D8;} .footer-base{ max-width:var(--maxw);margin:0 auto;padding:16px 28px 32px; border-top:1px solid rgba(255,255,255,.07); display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap; font-family:var(--mono);font-size:10.5px;color:#978F85; } @media(max-width:740px){.footer-in{grid-template-columns:1fr 1fr;}} @media(max-width:560px){.footer-in{padding:48px 20px 28px;gap:28px;}.footer-base{padding:16px 20px 28px;}} @media(max-width:440px){.footer-in{grid-template-columns:1fr;padding:44px 16px 24px;}.footer-base{padding:14px 16px 24px;}} /* ── MOBILE STAGE ── */ .mob-stage{padding:40px 24px 64px;display:flex;flex-direction:column;align-items:center;background:var(--sink);} .mob-frame{ width:390px;max-width:100%;border:1px solid var(--line-firm);border-radius:30px; background:var(--canvas);overflow:hidden;box-shadow:var(--sh-lg); } .mob-nav{height:54px;display:flex;align-items:center;justify-content:space-between; padding:0 18px;border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--canvas) 85%,transparent); position:sticky;top:0;z-index:5;} .mob-burger{width:44px;height:44px;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:5px;margin-right:-10px;} .mob-burger span{display:block;width:18px;height:1.5px;background:var(--ink);border-radius:2px;} .mob-body{max-height:720px;overflow-y:auto;} .mob-hero{ padding:30px 18px 22px;position:relative;overflow:hidden; background:radial-gradient(400px 280px at 80% 10%,var(--atm-2),transparent 70%), radial-gradient(360px 260px at 10% 80%,var(--atm-1),transparent 70%); } .mob-trust{display:flex;flex-direction:column;gap:1px;background:var(--line); border-top:1px solid var(--line);border-bottom:1px solid var(--line);} .mob-trust span{background:var(--canvas);padding:11px 18px; font-size:12.5px;color:var(--ink2);font-family:var(--mono);} .mob-feat{border:1px solid var(--line);border-radius:var(--r-md); padding:13px 14px;background:var(--paper);} .mob-feat-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px;} .mob-actionbar{ position:sticky;bottom:0;padding:12px 18px;background:var(--canvas); border-top:1px solid var(--line);} .mob-caption{margin-top:18px;font-size:12.5px;color:var(--ink3);text-align:center;max-width:34em;line-height:1.6;} /* ── AUTH ── */ .auth-shell{display:flex;min-height:calc(100dvh - var(--nav-h));} .auth-aside{ flex:0 0 40%;background:var(--sink);padding:56px 44px; display:flex;flex-direction:column;justify-content:space-between; border-right:1px solid var(--line); } .auth-copy h2{font-size:clamp(22px,2.6vw,30px);font-weight:600;letter-spacing:-.02em; color:var(--ink);line-height:1.2;margin-bottom:10px;} .auth-copy p{font-size:14px;color:var(--ink2);max-width:22em;line-height:1.65;margin-bottom:20px;} .auth-pts{list-style:none;display:flex;flex-direction:column;gap:10px;} .auth-pts li{display:flex;gap:8px;font-size:13px;color:var(--ink2);} .auth-pts .ap-tick{width:14px;height:14px;flex:none;margin-top:2px;border-radius:50%; background:var(--ok-tint);color:var(--ok);display:flex;align-items:center;justify-content:center;font-size:8px;} .auth-foot-note{font-family:var(--mono);font-size:10.5px;color:var(--ink2);margin-top:28px;line-height:1.6;} .auth-main{flex:1;display:flex;align-items:center;justify-content:center; padding:48px 36px;background:var(--canvas);} .auth-form-wrap{width:100%;max-width:400px;border-radius:var(--r-xl); padding:38px 36px 32px;box-shadow:var(--sh-md);} .auth-eyebrow{color:var(--ink3);margin-bottom:8px;} .auth-form-wrap h1{font-size:26px;font-weight:600;letter-spacing:-.02em;margin-bottom:5px;} .auth-sub{font-size:13.5px;color:var(--ink2);margin-bottom:22px;} .auth-seg{display:flex;background:var(--sink);border:1px solid var(--line); border-radius:var(--r-sm);padding:3px;margin-bottom:18px;} .auth-seg button{flex:1;padding:7px;font-family:var(--mono);font-size:10px;letter-spacing:.08em; text-transform:uppercase;color:var(--ink2);border-radius:5px;transition:all .12s;} .auth-seg button.on{background:var(--paper);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.05);} .auth-div{display:flex;align-items:center;gap:10px;margin:16px 0;} .auth-div .rule{flex:1;height:1px;background:var(--line);} .auth-div span{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--ink3);} .auth-bottom{margin-top:20px;text-align:center;font-size:12px;color:var(--ink2);} @media(max-width:680px){.auth-shell{flex-direction:column;}.auth-aside{padding:36px 24px;flex:none;}} /* ── PAY ── */ .pay-shell{min-height:calc(100dvh - var(--nav-h));display:flex;align-items:center; justify-content:center;padding:56px 28px;background:var(--canvas);} .pay-card{width:100%;max-width:490px;background:var(--paper); border-radius:var(--r-xl);box-shadow:var(--sh-md);padding:42px 38px;text-align:center;} .pay-seal{width:48px;height:48px;margin:0 auto 20px;border-radius:11px; box-shadow:var(--sh-sm);overflow:hidden;display:flex;} .pay-seal svg{display:block;width:100%;height:100%;} .pay-eyebrow{color:var(--ink2);margin-bottom:8px;} .pay-card h1{font-size:24px;font-weight:600;letter-spacing:-.018em;margin-bottom:7px;} .pay-sub{font-size:14px;color:var(--ink2);margin-bottom:18px;line-height:1.6;} .pay-checking{display:flex;align-items:center;justify-content:center;gap:7px; background:var(--sink);border:1px solid var(--line);border-radius:var(--r-sm); padding:10px 14px;margin-bottom:20px;font-size:12.5px;color:var(--ink2);font-family:var(--mono);} .pay-active{display:flex;align-items:center;justify-content:center;gap:7px; background:var(--ok-tint);border:1px solid var(--ok-line);border-radius:var(--r-sm); padding:10px 14px;margin-bottom:20px;font-size:12.5px;color:var(--ok);font-weight:500;font-family:var(--mono);} .pay-dot{width:6px;height:6px;border-radius:50%;background:currentColor;} .receipt{text-align:left;background:var(--canvas);border:1px solid var(--line); border-radius:var(--r-md);padding:3px 14px;margin-bottom:18px;} .rr{display:flex;justify-content:space-between;gap:12px;padding:9px 0; border-bottom:1px solid var(--line);font-size:12.5px;} .rr:last-child{border-bottom:none;} .rk{font-family:var(--mono);font-size:10.5px;color:var(--ink3);} .rv{font-weight:500;} .rv.mono{font-family:var(--mono);font-weight:400;font-size:11px;} .pay-next{text-align:left;background:var(--sink);border-radius:var(--r-sm);padding:13px 15px;margin-bottom:18px;} .pn-head{font-size:12px;font-weight:500;color:var(--ink2);margin-bottom:6px;} .pay-next ol{padding-left:14px;display:flex;flex-direction:column;gap:4px;} .pay-next li{font-size:12.5px;color:var(--ink2);line-height:1.55;} .pay-actions{display:flex;gap:9px;} .pay-fine{margin-top:16px;font-size:11px;color:var(--ink3);line-height:1.55;} /* ── INNER-TAB PAGES ── */ .page-wrap{max-width:860px;margin:0 auto;padding:0 28px 80px;} .page-head{padding:52px 0 40px;} .page-head h2{margin-bottom:10px;} .page-sec{padding:36px 0;border-bottom:1px solid var(--line);} .page-sec:last-child{border-bottom:none;padding-bottom:0;} .page-sec h3{font-size:18px;font-weight:600;letter-spacing:-.01em;margin-bottom:12px;} .page-sec p,.page-sec li{font-size:14px;color:var(--ink2);line-height:1.7;} .page-sec ul,.page-sec ol{margin:9px 0 0 18px;display:flex;flex-direction:column;gap:6px;} .page-sec strong{color:var(--ink);font-weight:500;} code{font-family:var(--mono);font-size:12px;background:var(--sink);padding:2px 5px;border-radius:3px;} /* logo tab */ .logo-sec{padding:30px 0;border-bottom:1px solid var(--line);} .logo-sec:last-child{border-bottom:none;} .logo-sec h3{font-size:18px;font-weight:600;letter-spacing:-.01em;margin-bottom:12px;} .logo-sec p{font-size:14px;color:var(--ink2);line-height:1.7;} .logo-row{display:flex;gap:18px;align-items:center;margin-top:14px;flex-wrap:wrap;} .logo-cell{display:flex;align-items:center;gap:14px;padding:26px 30px;border:1px solid var(--line);border-radius:var(--r-md);flex:0 0 auto;} .logo-note{font-size:12.5px;color:var(--ink3);line-height:1.6;max-width:20em;} .logo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:10px;} .logo-tile{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;} .logo-tile-art{height:90px;display:flex;align-items:center;justify-content:center;} .logo-tile-label{padding:10px 12px;border-top:1px solid var(--line);font-size:12px;font-weight:500;line-height:1.5;} .fav-row{display:flex;gap:12px;align-items:flex-end;margin-top:14px;flex-wrap:wrap;} .fav-chip{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px; border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper);min-width:72px;} .fav-chip span{font-family:var(--mono);font-size:10.5px;color:var(--ink3);} @media(max-width:580px){.logo-grid{grid-template-columns:repeat(2,1fr);}} /* checklist items */ .ck-list{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:12px!important;margin-left:0!important;} .ck-list li{display:flex;gap:9px;align-items:flex-start;} .ck-y{width:16px;height:16px;flex:none;margin-top:2px;border-radius:50%;background:var(--ok-tint);color:var(--ok);display:flex;align-items:center;justify-content:center;font-size:8.5px;} .ck-n{width:16px;height:16px;flex:none;margin-top:2px;border-radius:50%;background:var(--err-tint);color:var(--err);display:flex;align-items:center;justify-content:center;font-size:8.5px;} /* token rows */ .tok-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);} .tok-row:last-child{border-bottom:none;} .tok-sw{width:20px;height:20px;border-radius:4px;flex:none;border:1px solid rgba(22,21,19,.08);} .tok-name{font-family:var(--mono);font-size:12px;color:var(--ink2);flex:1;} .tok-hex{font-family:var(--mono);font-size:12px;color:var(--ink);} .tok-note{font-size:11.5px;color:var(--ink3);} /* mode picker */ .mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px;} .mode-card{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;cursor:pointer;transition:border-color .12s,box-shadow .12s;} .mode-card.sel{border-color:var(--ink);box-shadow:0 0 0 3px rgba(22,21,19,.08);} .mode-preview{height:90px;display:flex;flex-direction:column;gap:6px;padding:12px;} .mode-bar{height:8px;border-radius:3px;} .mode-label{padding:9px 11px;border-top:1px solid var(--line);font-size:13px;font-weight:500; display:flex;align-items:center;justify-content:space-between;} .mode-check{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--line-firm); display:flex;align-items:center;justify-content:center;font-size:8px;color:var(--paper);} .mode-card.sel .mode-check{background:var(--ink);border-color:var(--ink);} /* accent dots */ .accent-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;} .acc-dot{width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent; transition:border-color .12s,transform .08s;display:flex;align-items:center;justify-content:center;} .acc-dot:hover{transform:scale(1.1);} .acc-dot.sel{border-color:var(--ink);} .acc-dot svg{display:none;} .acc-dot.sel svg{display:block;} /* impl split */ .impl-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px;} .impl-col{border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px;} .impl-col ul{margin:8px 0 0 16px;display:flex;flex-direction:column;gap:5px;} .impl-col li{font-size:13px;color:var(--ink2);line-height:1.5;} .impl-h{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;color:var(--ink);} .impl-ok{border-left:2px solid var(--ok);} .impl-no{border-left:2px solid var(--err);} /* gb demo */ .gb-demo{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px;} .gb-demo-card .logo-note{max-width:none;} /* ── RETURNING ARC MOTIF — section decoration ── */ .arc-motif{ position:absolute;right:-40px;bottom:-60px; width:280px;height:280px;pointer-events:none;z-index:0;opacity:.035; overflow:visible; } .arc-divider{ display:flex;align-items:center;gap:16px;margin:0;padding:0; color:var(--line-firm); } .arc-divider::before,.arc-divider::after{ content:'';flex:1;height:1px;background:currentColor; } .arc-divider svg{flex:none;opacity:.5;} /* ── SECTION-SPECIFIC TYPOGRAPHY LIFT ── */ /* How-it-works step numbers get a warm tint ring */ .demo-step.on .ds-num{ box-shadow:0 0 0 4px color-mix(in srgb,var(--a-blue) 18%,transparent); } /* ── FOOTER — editorial dark ── */ .site-footer{ background:var(--sec-footer); border-top:none; color:#C8C2B8; } .site-footer .footer-in{color:#C8C2B8;} .site-footer h5{color:#A09890;} .site-footer ul a{color:#A09890;} .site-footer ul a:hover{color:#E8E2D8;} .site-footer .wordmark{font-size:16px;letter-spacing:0;color:#E8E2D8;} .footer-base{ border-top:1px solid rgba(255,255,255,.08); color:#978F85; } [data-theme="dark"] .site-footer{background:var(--sec-footer);} /* ── STATUS BOARD — card polish ── */ .status-col:first-child{ background:color-mix(in srgb,var(--ok-tint) 40%,var(--paper)); } .status-col:nth-child(2){ background:color-mix(in srgb,var(--a-blue) 5%,var(--paper)); } .status-col:last-child{ background:color-mix(in srgb,var(--a-lavender) 5%,var(--paper)); } /* ── BOUNDARY SECTION — stone band ── */ .boundary-sec{border:none;background:var(--sec-boundary)!important;} /* live demo tab */ .live-stage{ background:var(--canvas);border:1px solid var(--line);border-radius:var(--r-xl); overflow:hidden;box-shadow:var(--sh-lg);margin-top:18px; } .live-header{ padding:14px 18px;border-bottom:1px solid var(--line); display:flex;align-items:center;gap:10px; background:color-mix(in srgb,var(--canvas) 80%,transparent); } .live-body{padding:20px 18px;min-height:360px;position:relative;} /* accent indicator in live demo */ .step-badge{ display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px; letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:20px;margin-bottom:8px; } /* atm color chips in theme tab */ .atm-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;} .atm-chip{ width:52px;height:52px;border-radius:var(--r-md);border:1px solid var(--line); display:flex;align-items:flex-end;padding:4px; font-family:var(--mono);font-size:9px;color:rgba(22,21,19,.6); } /* ── PRICE CHIP ── */ .price-chip{ display:inline-flex;align-items:center;gap:7px; background:color-mix(in srgb,var(--ok-tint) 60%,var(--canvas)); border:1px solid var(--ok-line);border-radius:20px; padding:4px 12px;margin-bottom:16px; font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ok); } /* ── DEMO STEP ACTIVE: warm tint ring ── */ .demo-step.on .ds-num{ box-shadow:0 0 0 4px color-mix(in srgb,var(--a-blue) 20%,transparent); } /* ── APP SHELL — interior, calmer than landing ── */ /* Deck: "refined interior of the same house" — rail + single panel, no atmosphere */ .app-shell{ display:flex;min-height:calc(100dvh - 44px);background:var(--canvas); } .app-rail{ width:220px;flex:none;border-right:1px solid var(--line); background:color-mix(in srgb,var(--canvas) 95%,var(--paper)); display:flex;flex-direction:column; position:sticky;top:44px;height:calc(100dvh - 44px);overflow-y:auto; } .rail-brand{ display:flex;align-items:center;gap:8px;padding:16px 18px 12px; border-bottom:1px solid var(--line); } .rail-brand .wordmark{font-size:22px;} .rail-nav{flex:1;padding:8px 0;} .rail-item{ display:flex;align-items:center;gap:10px;padding:9px 18px; font-size:14px;color:var(--ink2);cursor:pointer; border-left:2px solid transparent;transition:all .1s; } .rail-item:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 4%,transparent);} .rail-item.on{color:var(--ink);border-left-color:var(--ink);background:color-mix(in srgb,var(--ink) 5%,transparent);font-weight:500;} .rail-item .ri-ic{width:16px;height:16px;flex:none;color:currentColor;opacity:.7;} .rail-today{ margin:0 12px 8px;padding:10px 12px;border-radius:var(--r-sm); border:1px solid var(--line);background:var(--paper); } .rail-today-lbl{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin-bottom:3px;} .rail-today-val{font-size:13px;font-weight:500;color:var(--ink);} .rail-log-btn{ display:flex;align-items:center;justify-content:center;gap:6px; width:calc(100% - 24px);margin:0 12px 12px; padding:9px;background:var(--ink);color:var(--canvas); border-radius:var(--r-sm);font-size:13.5px;font-weight:500; cursor:pointer;transition:background .12s; } .rail-log-btn:hover{background:var(--ink2);} .rail-footer{ padding:12px 18px;border-top:1px solid var(--line); display:flex;flex-direction:column;gap:2px; } .rail-footer-item{ font-size:13px;color:var(--ink3);padding:6px 0;cursor:pointer; display:flex;align-items:center;gap:8px;transition:color .1s; } .rail-footer-item:hover{color:var(--ink2);} .rail-footer-item .ri-ic{width:14px;height:14px;flex:none;} .app-panel{flex:1;overflow-y:auto;} .panel-head{ padding:22px 36px 18px;border-bottom:1px solid var(--line); display:flex;align-items:baseline;justify-content:space-between;gap:12px; position:sticky;top:0;z-index:10; background:color-mix(in srgb,var(--canvas) 88%,transparent); backdrop-filter:saturate(140%) blur(12px); -webkit-backdrop-filter:saturate(140%) blur(12px); } .panel-head-eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin-bottom:4px;} .panel-head h2{font-size:clamp(20px,2.4vw,28px);font-weight:600;letter-spacing:-.02em;line-height:1.1;} .panel-head .serif{font-size:inherit;} .panel-saved{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;color:var(--ink3);} .panel-dot{display:none;} .panel-body{padding:32px 36px 64px;} /* Today view — three data points */ .today-dp{margin-bottom:32px;} .dp-label{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin-bottom:6px;} .dp-value{font-size:clamp(24px,3vw,36px);font-weight:600;letter-spacing:-.022em;line-height:1.15;color:var(--ink);} .dp-sub{font-size:13px;color:var(--ink2);margin-top:3px;line-height:1.5;} .dp-divider{height:1px;background:var(--line);margin:24px 0;} /* Today primary CTA */ .today-cta{ display:inline-flex;align-items:center;gap:8px; padding:13px 28px;background:var(--ink);color:var(--canvas); border-radius:var(--r-sm);font-size:15px;font-weight:500; cursor:pointer;transition:background .12s,transform .07s; min-height:48px; } .today-cta:hover{background:var(--ink2);} .today-cta:active{transform:translateY(1px);} .today-cta-note{ display:inline-flex;align-items:center;gap:6px;margin-left:12px; font-size:13.5px;color:var(--ink2);cursor:pointer;padding:13px 12px; border-radius:var(--r-sm);transition:color .1s,background .1s; } .today-cta-note:hover{color:var(--ink);background:var(--muted);} /* App shell shell note (deck: "three things, never more") */ .shell-note{ margin-top:48px;max-width:48em; font-family:var(--mono);font-size:11.5px;color:var(--ink3);line-height:1.7; } /* Journal view */ .journal-controls{ display:flex;align-items:center;gap:8px;flex-wrap:wrap; padding:0 36px 20px; } .jc-btn{ display:flex;align-items:center;gap:6px;padding:7px 13px; font-size:13px;color:var(--ink2);border:1px solid var(--line-firm); border-radius:var(--r-sm);cursor:pointer;background:transparent;transition:all .1s; } .jc-btn:hover{border-color:var(--ink2);color:var(--ink);background:var(--paper);} .jc-btn.primary{background:var(--ink);color:var(--canvas);border-color:var(--ink);} .jc-btn.primary:hover{background:var(--ink2);} .j-month{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);padding:0 36px 8px;display:flex;align-items:center;justify-content:space-between;} .j-month span{color:var(--ink3);} .j-entry{ display:grid;grid-template-columns:80px 1fr 70px 52px;gap:10px;align-items:baseline; padding:12px 36px;border-top:1px solid var(--line);transition:background .1s;cursor:pointer; } .j-entry:hover{background:color-mix(in srgb,var(--ink) 3%,transparent);} .j-date{font-family:var(--mono);font-size:11px;color:var(--ink3);line-height:1.4;} .j-site{font-size:14px;font-weight:500;color:var(--ink);} .j-note{font-size:12px;color:var(--ink2);margin-top:1px;} .j-dose{font-family:var(--mono);font-size:12px;color:var(--ink2);text-align:right;} .j-chip{ font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;padding:2px 7px; border-radius:12px;background:var(--ok-tint);color:var(--ok);white-space:nowrap; text-align:right; } .j-load-more{ padding:20px 36px;font-family:var(--mono);font-size:11px;color:var(--ink3); letter-spacing:.06em; } /* Vial view */ .vial-card{ background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg); padding:24px;margin-bottom:16px; } .vial-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:20px;} .vial-name{font-size:20px;font-weight:600;letter-spacing:-.015em;} .vial-sub{font-size:13px;color:var(--ink2);margin-top:2px;} .vial-timeline{ display:flex;align-items:center;gap:0;margin-bottom:20px;position:relative; } .vt-point{display:flex;flex-direction:column;align-items:center;gap:4px;flex:none;} .vt-dot{width:10px;height:10px;border-radius:50%;background:var(--ok);border:2px solid var(--canvas);box-shadow:0 0 0 1px var(--ok);} .vt-dot.today{background:var(--ink);} .vt-dot.discard{background:var(--warn);} .vt-line{flex:1;height:2px;background:var(--line-firm);margin:0 -1px;align-self:center;position:relative;top:-14px;} .vt-line.elapsed{background:var(--ok);} .vt-label{font-family:var(--mono);font-size:10px;color:var(--ink3);} .vt-val{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--ink);} .vial-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px;} .vg-row{padding:8px 0;border-bottom:1px solid var(--line);} .vg-row:last-child{border-bottom:none;} .vg-k{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin-bottom:2px;} .vg-v{font-size:13.5px;color:var(--ink);font-weight:500;} .vg-note{font-size:12px;color:var(--ink2);margin-top:1px;} /* App notice — vial — amber only, never red */ .app-notice{ background:var(--warn-tint);border:1px solid var(--warn-line);border-radius:var(--r-sm); padding:11px 13px;margin:16px 0; display:flex;align-items:flex-start;gap:8px; } .app-notice-ic{width:14px;height:14px;flex:none;margin-top:1px;color:var(--warn);} .app-notice p{font-size:12.5px;color:var(--ink2);line-height:1.55;} .app-notice strong{color:var(--warn);font-weight:500;} /* Check-ins view */ .ci-section{margin-bottom:28px;} .ci-section h3{font-size:14px;font-weight:600;letter-spacing:-.005em;margin-bottom:3px;color:var(--ink);} .ci-section p{font-size:12.5px;color:var(--ink2);margin-bottom:12px;} .fn-scale{display:flex;gap:6px;} .fn-opt{ flex:1;padding:10px 6px;text-align:center;border:1px solid var(--line-firm);border-radius:var(--r-sm); font-size:13px;cursor:pointer;transition:all .12s;color:var(--ink2); } .fn-opt:hover{border-color:var(--ink2);color:var(--ink);} .fn-opt.sel{background:var(--ok-tint);border-color:var(--ok-line);color:var(--ok);font-weight:500;} .fn-opt-lbl{font-size:10px;font-family:var(--mono);display:block;margin-top:2px;color:var(--ink3);} .hab-grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px;} .hab2{ display:flex;align-items:center;gap:9px;padding:10px 12px; border:1px solid var(--line);border-radius:var(--r-sm);font-size:14px;cursor:pointer; transition:all .12s; } .hab2:hover{border-color:var(--line-firm);background:var(--paper);} .hab2.done{background:var(--ok-tint);border-color:var(--ok-line);} .hab2-box{ width:16px;height:16px;flex:none;border-radius:4px;border:1.5px solid var(--line-firm); display:flex;align-items:center;justify-content:center; } .hab2.done .hab2-box{background:var(--ok);border-color:var(--ok);color:var(--paper);font-size:9px;} .hab2-note{font-size:11px;color:var(--ink2);margin-top:1px;} .ci-week-note{ margin-top:16px;padding:12px 14px;background:var(--sink);border-radius:var(--r-sm); font-size:12.5px;color:var(--ink2);line-height:1.55; } /* Settings view */ .settings-section{margin-bottom:0;border-bottom:1px solid var(--line);padding:24px 0;} .settings-section:last-child{border-bottom:none;} .settings-section h3{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin-bottom:14px;} .settings-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line);} .settings-row:last-child{border-bottom:none;} .sr-k{font-size:14px;color:var(--ink);} .sr-v{font-size:14px;color:var(--ink2);text-align:right;} .sr-v a{color:var(--a-blue);text-decoration:underline;text-underline-offset:2px;font-size:13px;} .sr-v.mono{font-family:var(--mono);font-size:12.5px;} .sr-btn{ font-size:13px;color:var(--ink2);padding:5px 10px;border:1px solid var(--line-firm); border-radius:var(--r-xs);cursor:pointer;background:transparent;transition:all .1s; } .sr-btn:hover{border-color:var(--ink2);color:var(--ink);} .theme-seg{display:flex;background:var(--sink);border:1px solid var(--line);border-radius:var(--r-sm);padding:3px;} .ts-opt{ flex:1;padding:6px 12px;font-size:13px;color:var(--ink2);border-radius:5px;cursor:pointer;transition:all .12s;text-align:center; } .ts-opt.sel{background:var(--paper);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.06);} /* Mobile app frame (390px) */ .mob-app-wrap{ display:flex;justify-content:center;padding:32px 16px 48px; background:var(--sink);min-height:100dvh; } .mob-app-frame{ width:390px;max-width:100%;border-radius:30px;overflow:hidden; border:1px solid var(--line-firm);background:var(--canvas); box-shadow:0 24px 64px -20px rgba(20,15,10,.3),0 4px 12px rgba(20,15,10,.1); display:flex;flex-direction:column;min-height:720px; } .mob-app-nav{ height:54px;display:flex;align-items:center;justify-content:space-between; padding:0 18px;border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--canvas) 88%,transparent); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); position:sticky;top:0;z-index:5;flex:none; } .mob-app-body{flex:1;overflow-y:auto;padding:24px 20px;} /* Three data points — deck spec */ .mob-dp{margin-bottom:20px;} .mob-dp-label{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin-bottom:4px;} .mob-dp-value{font-size:28px;font-weight:600;letter-spacing:-.022em;line-height:1.15;} .mob-dp-sub{font-size:12px;color:var(--ink2);margin-top:2px;} .mob-dp-rule{height:1px;background:var(--line);margin:16px 0;} .mob-saved-bar{ display:flex;align-items:center;gap:6px; font-family:var(--mono);font-size:10.5px;color:var(--ok); margin-bottom:20px; } .mob-tab-bar{ display:grid;grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); background:color-mix(in srgb,var(--canvas) 94%,transparent); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); flex:none; } .mob-tab{ display:flex;flex-direction:column;align-items:center;gap:3px; padding:10px 4px;font-size:10px;color:var(--ink3);cursor:pointer;transition:color .1s; } .mob-tab.on{color:var(--ink);} .mob-tab .mt-ic{width:18px;height:18px;flex:none;} .mob-cta-bar{ padding:10px 18px;background:var(--canvas);border-top:1px solid var(--line);flex:none; } /* ── LEGAL / DOC PAGES ── */ .legal-hero{position:relative;overflow:hidden;background:var(--sec-hero); padding:72px 0 40px;border-bottom:1px solid var(--line);} .legal-hero-atm{ position:absolute;inset:-40% -10% auto -10%;height:480px;z-index:0;pointer-events:none; background: radial-gradient(560px 440px at 16% 16%,var(--atm-1),transparent 70%), radial-gradient(600px 460px at 86% 6%,var(--atm-2),transparent 70%), radial-gradient(520px 400px at 70% 78%,var(--atm-4),transparent 72%); } .legal-hero .wrap-n{position:relative;z-index:1;} .legal-hero .t-page{margin-top:4px;} .legal-hero .t-lead{margin-top:14px;max-width:34em;} .legal-meta{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--ink3);margin-top:20px;} .legal-body{padding:52px 0 84px;} .legal{max-width:660px;} .legal h2{font-size:19px;font-weight:600;letter-spacing:-.015em;color:var(--ink);margin:42px 0 11px;} .legal h2:first-child{margin-top:0;} .legal h2 .serif{font-weight:400;font-style:italic;} .legal p{font-size:15.5px;line-height:1.72;color:var(--ink2);margin-bottom:14px;} .legal p strong{color:var(--ink);font-weight:600;} .legal ul{list-style:none;margin:2px 0 18px;padding:0;} .legal li{position:relative;padding-left:20px;font-size:15.5px;line-height:1.62;color:var(--ink2);margin-bottom:9px;} .legal li::before{content:"";position:absolute;left:2px;top:10px;width:5px;height:5px;border-radius:50%;background:var(--a-blue);} .legal a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-firm);transition:text-decoration-color .12s;} .legal a:hover{text-decoration-color:var(--ink2);} .legal a:focus-visible{outline:2px solid var(--a-blue);outline-offset:2px;border-radius:2px;} .legal-note{margin-top:30px;padding:18px 20px;background:var(--sink);border:1px solid var(--line);border-radius:var(--r-md);} .legal-note p{font-size:13.5px;line-height:1.65;color:var(--ink2);margin:0;} @media(max-width:560px){.legal-hero{padding:52px 0 34px;}.legal-body{padding:40px 0 64px;}} /* Production landing hooks: visual no-op until a form status exists. */ .form-status:empty{display:none;} .form-status{flex-basis:100%;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--ink3);line-height:1.5;margin-top:2px;} .form-status[data-state=success]{color:var(--ok);} .form-status[data-state=error]{color:var(--err);} .form-status[data-state=pending]{color:var(--ink3);} /* ========================================================================== APP-INTERIOR UTILITY TOKENS Tokens with no direct landing-page equivalent — required by app.css. Consumed only by app.html. Do not reference these in landing or auth CSS. ========================================================================== */ /* Spacing — theme-independent. App step scale (s-1…s-7). Values match existing app-interior usage for zero layout drift. */ :root{ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; } :root,[data-theme="light"]{ /* Motion — every animation picks one of these */ --ease-standard: cubic-bezier(0.4,0,0.2,1); --ease-out-quart: cubic-bezier(0.25,1,0.5,1); --dur-quick: 140ms; --dur-base: 220ms; --dur-deliberate: 360ms; --transition-ui: var(--dur-quick) var(--ease-standard); --transition-surface: border-color var(--transition-ui),background var(--transition-ui),color var(--transition-ui),box-shadow var(--transition-ui),opacity var(--transition-ui); /* Interaction utility */ --focus-ring: color-mix(in srgb,var(--ink) 22%,transparent); --touch-target: 44px; --field-height: 48px; /* Surface aliases — legacy names mapped to canonical primitives */ --bg: var(--canvas); --bg-page: var(--canvas); --bg-page-2: var(--sink); --surface-card: var(--paper); --surface-paper: var(--paper); --surface-elev: var(--paper); --surface-tinted: var(--muted); --surface-sunken: var(--sink); /* Text aliases */ --text-primary: var(--ink); --text-secondary: var(--ink2); --text-muted: var(--ink2); --text-faint: var(--ink3); --text-dim: var(--ink3); /* Border aliases */ --border-default: var(--line); --border-strong: var(--line-firm); --line-strong: var(--line-firm); --line-faint: rgba(22,21,19,.05); /* Semantic — legacy names for ok/warn/err */ --accent-primary: var(--ok); --accent-soft: var(--ok-tint); --sage: var(--ok); --sage-soft: var(--ok-tint); --sage-border: var(--ok-line); --success: var(--ok); --ok-soft: var(--ok-tint); --error: var(--err); --error-soft: var(--err-tint); --notice: var(--warn); --notice-soft: var(--warn-tint); --notice-line: var(--warn-line); --status-success: var(--ok); --status-success-soft:var(--ok-tint); --status-error: var(--err); --status-error-soft: var(--err-tint); --status-warning: var(--warn); --status-warning-soft:var(--warn-tint); /* CTA aliases — canonical: ink-on-canvas */ --cta-bg: var(--ink); --cta-bg-hover: var(--ink2); --cta-text: var(--canvas); /* Field */ --field-bg: var(--sink); --field-border: var(--line-firm); /* Shadow aliases */ --shadow-sm: var(--sh-sm); --shadow-md: var(--sh-md); --shadow-card: var(--sh-md); --shadow-soft: var(--sh-lg); --shadow-focus: 0 0 0 3px var(--focus-ring); /* Typography aliases */ --font-sans: var(--sans); --font-serif: var(--serif); --font-mono: var(--mono); /* Brand */ --cream: var(--canvas); } [data-theme="dark"]{ --focus-ring: color-mix(in srgb,var(--ink) 30%,transparent); --surface-elev: var(--muted); --line-faint: rgba(255,255,255,.05); } /* ── WHY HELIO — comparison ── */ .compare{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:8px; } .compare-col{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md); padding:24px 24px 22px; } .compare-helio{ border-color:var(--line-firm); box-shadow:var(--sh-sm); } .compare-h{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink3); margin-bottom:14px; } .compare-helio .compare-h{ color:var(--ink); } .compare-list{ list-style:none; margin:0; padding:0; } .compare-list li{ position:relative; padding:9px 0 9px 26px; font-size:14px; line-height:1.5; color:var(--ink2); border-top:1px solid var(--line); } .compare-list li:first-child{ border-top:0; } .compare-diy .compare-list li::before{ content:"–"; position:absolute; left:4px; color:var(--ink3); } .compare-helio .compare-list li{ color:var(--ink); } .compare-helio .compare-list li::before{ content:""; position:absolute; left:2px; top:13px; width:11px; height:6px; border-left:1.5px solid var(--a-sage); border-bottom:1.5px solid var(--a-sage); transform:rotate(-45deg); } .compare-close{ font-size:clamp(18px,2.2vw,22px); line-height:1.45; color:var(--ink); text-align:center; max-width:30em; margin:30px auto 0; } @media(max-width:720px){ .compare{ grid-template-columns:1fr; } } /* ── WHAT'S INCLUDED ── */ .included-wrap{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md); padding:26px 28px; box-shadow:var(--sh-sm); } .included-intro{ font-size:14px; color:var(--ink2); margin-bottom:16px; } .included-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:0 36px; } .included-list li{ position:relative; padding:11px 0 11px 26px; font-size:14px; line-height:1.5; color:var(--ink2); border-top:1px solid var(--line); } .included-list li strong{ color:var(--ink); font-weight:600; } .included-list li::before{ content:""; position:absolute; left:2px; top:16px; width:11px; height:6px; border-left:1.5px solid var(--a-sage); border-bottom:1.5px solid var(--a-sage); transform:rotate(-45deg); } .roadmap{ margin-top:22px; max-width:520px; } .roadmap-h{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink3); margin-bottom:8px; } .roadmap-list{ list-style:none; margin:0 0 8px; padding:0; display:flex; flex-wrap:wrap; gap:8px 18px; } .roadmap-list li{ font-size:13.5px; color:var(--ink2); } .roadmap-note{ font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--ink3); } @media(max-width:640px){ .included-list{ grid-template-columns:1fr; } } /* ── PRODUCT UPDATES ── */ .updates-form{ text-align:left; } .updates-form .field-label{ display:block; margin-bottom:6px; } .updates-row{ display:flex; gap:8px; flex-wrap:wrap; } .updates-row .inp{ flex:1; min-width:200px; } .updates-form .form-fine{ margin-top:10px; }