/* ============================================================
   Pantry Tracker — pantrytrackerapp.com
   Shared stylesheet for index.html, the legal pages, the
   account-deletion page and 404.html.

   Design system imported from the app: dark only, plum accent
   #D0BCFF, Roboto system stack, 12px radii. No build step, no
   external fonts/CDNs — every asset is same-origin so the site
   runs under the strict CSP in _headers (style-src 'self').

   The home page is deliberately dense: one screen per idea, no
   section taller than a laptop viewport. The app mock screens
   live in app-mock.css.
   ============================================================ */

/* ---------- tokens: colors ---------- */
:root{
  --bg:#0F1115;
  --surface:#151823;
  --surface-tonal:#1E1A2E;
  --surface-deep:#1F1530;
  --outline:rgba(230,225,230,0.12);
  --outline-strong:rgba(230,225,230,0.24);
  --accent:#D0BCFF;
  --accent-deep:#4F378B;
  --accent-ink:#1A102C;
  --pink:#EFB8C8;
  --green:#3DDC84;
  --danger:#F2A8A8;
  --text:#E6E1E6;
  --muted:#9A94A6;
  --halo:rgba(208,188,255,0.16);
  --surface-card:var(--surface-tonal);
  --text-body:var(--text);
  --text-secondary:var(--muted);
  --interactive:var(--accent);
  --interactive-ink:var(--accent-ink);
  --accent-wash:rgba(208,188,255,0.10);
  --accent-wash-faint:rgba(208,188,255,0.08);
  --pink-wash:rgba(239,184,200,0.10);
  --pink-outline:rgba(239,184,200,0.25);
  --green-wash:rgba(61,220,132,0.08);
  --green-outline:rgba(61,220,132,0.25);
  --danger-wash:rgba(242,168,168,0.08);
  --danger-outline:rgba(242,168,168,0.28);
  /* typography */
  --font-body:Roboto,"Segoe UI",system-ui,-apple-system,sans-serif;
  --display-1:clamp(34px,4.3vw,52px);
  --display-2:clamp(24px,2.8vw,32px);
  --heading-3:16px;
  --text-lead:17px;
  --text-base:15px;
  --text-small:14px;
  --text-caption:13px;
  --text-label:12px;
  --text-tag:11px;
  --weight-regular:400;
  --weight-medium:500;
  --weight-bold:700;
  --leading-body:1.6;
  --leading-display:1.06;
  --leading-heading:1.15;
  --tracking-display:-0.03em;
  --tracking-heading:-0.02em;
  --tracking-label:0.14em;
  --tracking-field-label:0.04em;
  /* spacing */
  --radius:12px;
  --radius-sm:10px;
  --radius-input:10px;
  --radius-icon:10px;
  --radius-pill:999px;
  --wrap-max:1120px;
  --wrap-pad:24px;
  --section-pad:clamp(44px,5.4vw,68px);
  --card-pad:20px;
  --form-card-pad:22px;
  --grid-gap:18px;
  --nav-height:60px;
  --measure:720px;
  /* effects */
  --shadow-halo-rest:0 0 0 0 var(--halo);
  --shadow-halo-hover:0 0 0 8px var(--halo);
  --focus-ring:0 0 0 3px rgba(208,188,255,0.12);
  --ease-reveal:cubic-bezier(.2,.7,.2,1);
  --dur-reveal:0.6s;
  --reveal-distance:18px;
  /* theme-dependent one-offs (each has a light counterpart below) */
  --text-strong:#FFFFFF;
  --selection-ink:#FFFFFF;
  --nav-bg:rgba(15,17,21,0.85);
  --nav-bg-solid:rgba(15,17,21,0.97);
  --glow-1:rgba(79,55,139,0.46);
  --glow-2:rgba(239,184,200,0.07);
  --glow-sub:rgba(79,55,139,0.30);
  --mark-ring:rgba(208,188,255,0.06);
  --mark-shadow:rgba(8,6,16,0.55);
  --phone-shadow:rgba(8,6,16,0.6);
  --phone-ring:rgba(208,188,255,0.05);
}

/* ---------- theme: light (manual only) ----------
   Dark is the default and the ONLY automatic state — there is no
   prefers-color-scheme query anywhere, so a phone or browser set to light
   mode still gets the dark site. Light applies only after the visitor
   presses the nav toggle (main.js sets data-theme="light" on <html> and
   theme.js restores it on the next visit).

   The app itself is dark-only today, so everything that depicts the app
   (app-mock.css: phone screens, UI fragments, product art) keeps its own
   hard-coded dark palette and ignores these tokens. When the app gains a
   light theme, add [data-theme="light"] overrides there. */
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#F6F3FA;
  --surface:#FFFFFF;
  --surface-tonal:#EFEAF7;
  --surface-deep:#E8E1F4;
  --outline:rgba(27,21,37,0.12);
  --outline-strong:rgba(27,21,37,0.26);
  --accent:#5B3FA8;
  --accent-deep:#D5C7F4;
  --accent-ink:#FFFFFF;
  --pink:#A2456B;
  --green:#17794A;
  --danger:#B3261E;
  --text:#1B1525;
  --muted:#5F586C;
  --halo:rgba(91,63,168,0.20);
  --accent-wash:rgba(91,63,168,0.09);
  --accent-wash-faint:rgba(91,63,168,0.06);
  --pink-wash:rgba(162,69,107,0.08);
  --pink-outline:rgba(162,69,107,0.28);
  --green-wash:rgba(23,121,74,0.08);
  --green-outline:rgba(23,121,74,0.30);
  --danger-wash:rgba(179,38,30,0.06);
  --danger-outline:rgba(179,38,30,0.30);
  --focus-ring:0 0 0 3px rgba(91,63,168,0.18);
  --text-strong:#0E0A15;
  --selection-ink:#1B1525;
  --nav-bg:rgba(246,243,250,0.86);
  --nav-bg-solid:rgba(246,243,250,0.98);
  --glow-1:rgba(208,188,255,0.70);
  --glow-2:rgba(239,184,200,0.32);
  --glow-sub:rgba(208,188,255,0.55);
  --mark-ring:rgba(91,63,168,0.10);
  --mark-shadow:rgba(27,21,37,0.24);
  --phone-shadow:rgba(27,21,37,0.30);
  --phone-ring:rgba(91,63,168,0.10);
}

/* ---------- theme: Graphite minimal (v2, opt-in) ----------
   Add class="theme-graphite" to <body> to switch. Default = v1 plum. */
.theme-graphite{
  --bg:#121316;
  --surface:#17181C;
  --surface-tonal:#1B1C21;
  --surface-deep:#1B1C21;
  --surface-card:#1B1C21;
  --text:#E8E8EA;
  --muted:#8F9099;
  --accent:#AFA6D2;
  --accent-deep:#3A3B44;
  --accent-ink:#141519;
  --outline:rgba(232,232,234,0.10);
  --outline-strong:rgba(232,232,234,0.20);
  --halo:rgba(236,235,240,0.10);
  --accent-wash:rgba(232,232,234,0.05);
  --accent-wash-faint:rgba(232,232,234,0.05);
  --pink:#8F9099;
  --pink-wash:transparent;
  --pink-outline:rgba(232,232,234,0.20);
  --green:#8F9099;
  --green-wash:transparent;
  --green-outline:rgba(232,232,234,0.20);
}
.theme-graphite ::selection{background:#3A3B44;color:#fff}
.theme-graphite .pt-btn-primary{background:#ECEBF0;color:#141519}
.theme-graphite .pt-btn-primary:hover{background:#DBDAE2}
.theme-graphite .pt-icon{color:var(--text)}
.theme-graphite .pt-section-label{color:var(--muted)}
.theme-graphite .pt-field input:focus,.theme-graphite .pt-field textarea:focus{box-shadow:0 0 0 3px rgba(175,166,210,0.14)}
.theme-graphite .hero::before,.theme-graphite #how::before{display:none}
.theme-graphite .support-info .glyph{color:var(--text)}
.theme-graphite .how-num{color:var(--text)}
.theme-graphite.site-nav.scrolled,.theme-graphite .site-nav.scrolled{background:rgba(18,19,22,0.85)}

/* ---------- base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{color-scheme:dark;scroll-behavior:smooth;scroll-padding-top:var(--nav-height);-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);line-height:var(--leading-body);overflow-x:hidden;-webkit-font-smoothing:antialiased}
::selection{background:var(--accent-deep);color:var(--selection-ink)}
h1,h2,h3{text-wrap:balance}
p,li,dd{text-wrap:pretty}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
a,button,summary,label,input,textarea{touch-action:manipulation}
a,button,summary,label{-webkit-tap-highlight-color:transparent}
img{max-width:100%;display:block}
svg{flex:none}
section{padding:var(--section-pad) 0}
/* anchor offset comes from scroll-padding-top on <html> alone; sections bring their own top padding */
#download{scroll-margin-top:300px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
.skip-link{position:absolute;left:-9999px;top:0;z-index:300;background:var(--accent);color:var(--accent-ink);padding:10px 16px;border-radius:0 0 10px 0;font-weight:700}
.skip-link:focus{left:0}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- component classes (pt-*) ---------- */
.pt-body{background:var(--bg);color:var(--text);font-family:var(--font-body);line-height:var(--leading-body)}
.pt-wrap{max-width:var(--wrap-max);margin:0 auto;padding:0 max(var(--wrap-pad),env(safe-area-inset-right)) 0 max(var(--wrap-pad),env(safe-area-inset-left))}
.pt-h1{font-size:var(--display-1);font-weight:700;line-height:var(--leading-display);letter-spacing:var(--tracking-display)}
.pt-h2{font-size:var(--display-2);font-weight:700;line-height:var(--leading-heading);margin-bottom:8px;letter-spacing:var(--tracking-heading)}
.pt-h3{font-size:var(--heading-3);font-weight:700;letter-spacing:-.005em}
.pt-lead{color:var(--muted);font-size:var(--text-lead);line-height:1.55;max-width:58ch}
.pt-plum{color:var(--accent)}
/* eyebrow: plain small-caps label with a short rule (no pill) */
.pt-section-label{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.pt-section-label::before{content:"";width:18px;height:1px;background:currentColor;opacity:.7}
.pt-section-label+.pt-h2{margin-top:10px}
.pt-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;border-radius:999px;padding:12px 24px;font-size:15px;font-weight:700;cursor:pointer;border:none;font-family:inherit;transition:transform .2s,box-shadow .3s,background .2s,border-color .2s,color .2s;text-decoration:none}
.pt-btn:hover{text-decoration:none;transform:translateY(-1px)}
.pt-btn:active{transform:translateY(0) scale(.98)}
.pt-btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 0 0 0 var(--halo)}
.pt-btn-primary:hover{box-shadow:0 0 0 8px var(--halo)}
.pt-btn-outline{background:transparent;color:var(--text);border:1px solid var(--outline-strong)}
.pt-btn-outline:hover{border-color:var(--accent);color:var(--accent)}
.pt-btn-sm{padding:9px 18px;font-size:14px}
.pt-btn svg{width:18px;height:18px;display:block}
.pt-icon{width:38px;height:38px;border-radius:var(--radius-icon);display:flex;align-items:center;justify-content:center;color:var(--accent);background:var(--accent-wash);border:1px solid var(--outline)}
.pt-icon svg{width:21px;height:21px;display:block}
/* segmented control: real radios, so arrow keys and form state come for free */
.pt-seg{display:flex;background:var(--surface);border:1px solid var(--outline-strong);border-radius:12px;padding:3px;margin-bottom:16px}
.pt-seg label{flex:1;position:relative;cursor:pointer}
.pt-seg input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.pt-seg span{display:block;text-align:center;color:var(--muted);font-size:14px;font-weight:500;padding:9px 4px;border-radius:9px;transition:background .2s,color .2s}
.pt-seg label:hover span{color:var(--text)}
.pt-seg input:checked+span{background:var(--surface-tonal);color:var(--text-strong);font-weight:700;box-shadow:inset 0 0 0 1px var(--outline)}
.pt-seg input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.pt-field{margin-bottom:12px}
.pt-field label{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:5px;letter-spacing:.04em;text-transform:uppercase}
.pt-field input,.pt-field textarea{width:100%;background:var(--surface);border:1px solid var(--outline-strong);border-radius:10px;color:var(--text);font-family:inherit;font-size:15px;padding:10px 13px;transition:border-color .2s,box-shadow .2s;resize:vertical;box-sizing:border-box}
.pt-field textarea{min-height:96px}
.pt-field input::placeholder,.pt-field textarea::placeholder{color:var(--muted);opacity:.75}
.pt-field input:focus,.pt-field textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--focus-ring)}
.pt-form-card{background:var(--surface-tonal);border:1px solid var(--outline);border-radius:16px;padding:var(--form-card-pad)}
/* FAQ: divided list, no boxes */
.pt-faq details{border-bottom:1px solid var(--outline)}
.pt-faq details:first-child{border-top:1px solid var(--outline)}
.pt-faq summary{cursor:pointer;padding:14px 2px;font-weight:500;font-size:16px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;color:var(--text);transition:color .2s}
.pt-faq summary:hover{color:var(--accent)}
.pt-faq summary::-webkit-details-marker{display:none}
.pt-faq summary::after{content:"";flex:none;width:12px;height:12px;color:var(--accent);background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 100% no-repeat;transition:transform .25s}
.pt-faq details[open] summary::after{transform:rotate(45deg)}
.pt-faq .pt-faq-a{padding:0 36px 16px 2px;color:var(--muted);font-size:14.5px;line-height:1.6}
.pt-faq .pt-faq-a a{color:var(--accent)}
/* scroll reveal — content is visible by default; main.js opts in by adding
   .reveal-ready to <html>, so the page never depends on JS to show itself */
.pt-reveal{transition:opacity var(--dur-reveal) var(--ease-reveal),transform var(--dur-reveal) var(--ease-reveal)}
.reveal-ready .pt-reveal{opacity:0;transform:translateY(var(--reveal-distance))}
.reveal-ready .pt-reveal.in{opacity:1;transform:none}
.pt-reveal.d1{transition-delay:.06s}.pt-reveal.d2{transition-delay:.12s}.pt-reveal.d3{transition-delay:.18s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .pt-reveal,.reveal-ready .pt-reveal{opacity:1;transform:none;transition:none}
  .pt-btn:hover,.pt-btn:active{transform:none}
  *{scroll-behavior:auto}
}

/* ---------- nav ---------- */
nav.site-nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .3s,border-color .3s,backdrop-filter .3s;border-bottom:1px solid transparent}
nav.site-nav.scrolled{background:var(--nav-bg);backdrop-filter:blur(14px);border-bottom-color:var(--outline)}
.nav-inner{display:flex;align-items:center;gap:22px;height:var(--nav-height);max-width:var(--wrap-max);margin:0 auto;padding:0 max(var(--wrap-pad),env(safe-area-inset-right)) 0 max(var(--wrap-pad),env(safe-area-inset-left))}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto;font-weight:700;font-size:16px;color:var(--text)}
.brand:hover{text-decoration:none}
.brand img{width:30px;height:30px;border-radius:8px;object-fit:cover}
/* light/dark switch — sits left of "How it works"; sun = go light, moon = back to dark */
.theme-toggle{flex:none;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;border:1px solid var(--outline);background:none;color:var(--muted);cursor:pointer;padding:0;transition:color .2s,border-color .2s}
.theme-toggle:hover{color:var(--text);border-color:var(--outline-strong)}
.theme-toggle svg{width:18px;height:18px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .ic-moon,[data-theme="light"] .theme-toggle .ic-sun{display:none}
[data-theme="light"] .theme-toggle .ic-moon{display:block}
.nav-links{display:flex;gap:24px;align-items:center}
.nav-links a{color:var(--muted);font-size:14px;font-weight:500;transition:color .2s}
.nav-links a:hover{color:var(--text);text-decoration:none}
.nav-links a.nav-cta{color:var(--accent-ink)}
.nav-links a.nav-cta:hover{color:var(--accent-ink)}
.nav-toggle{display:none}
@media (max-width:760px){
  .nav-links{display:none}
  .nav-inner{gap:10px}
  .theme-toggle{width:44px;height:44px}
  .nav-links.open{display:flex;flex-direction:column;position:absolute;top:var(--nav-height);left:0;right:0;background:var(--nav-bg-solid);backdrop-filter:blur(14px);padding:16px 24px 22px;gap:4px;border-bottom:1px solid var(--outline);align-items:stretch}
  .nav-links.open a{padding:10px 0;font-size:16px}
  .nav-links.open a.nav-cta{margin-top:8px;padding:11px 18px}
  .nav-toggle{display:flex;align-items:center;justify-content:center;background:none;border:1px solid var(--outline);color:var(--text);border-radius:10px;width:44px;height:44px;cursor:pointer;padding:0}
  .nav-toggle svg{width:20px;height:20px;display:block}
}

/* ---------- hero (home) ---------- */
/* Clip sideways only: the 900px top-right glow hangs past the right edge (that
   would widen the page), but nothing may be sliced at the bottom edge — with
   overflow:hidden the phone's drop shadow ended in a hard line there on a phone
   in light mode (2026-10-05). `clip` on one axis leaves the other visible. */
.hero{position:relative;padding:calc(var(--nav-height) + clamp(22px,3.6vw,44px)) 0 clamp(36px,4.4vw,56px);overflow-x:clip;overflow-y:visible}
.hero::before{content:"";position:absolute;top:-220px;right:-160px;width:900px;height:900px;pointer-events:none;background:radial-gradient(closest-side,var(--glow-1),transparent 70%)}
/* The lower-left glow is NOT a hero pseudo-element: it straddles the hero/how
   boundary (where overflow:hidden used to slice it into a hard line, 2026-10-05)
   and has to sit behind the next section's content, so #how::before draws it
   (see "how it works") as a full circle, like the top-right glow sits behind
   the phone. */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:36px;align-items:center;position:relative;z-index:1}
/* The app's loading mark above the slogan. Timing mirrors PantryLoadingAnimation.kt: one
   5.2s cycle — glyphs cascade in (0 / 5.5 / 11 / 16.5%, 11% each, ease-out),
   hold, cascade out (40 / 43.5 / 47 / 50.5%, 9% each), then the arc collapses
   (56→76%) and regrows (76→93%). The resting state below is the app's own
   still frame (everything visible), which is what reduced-motion users get. */
/* Dark (default): the bare mark drawn straight on the page with a soft halo,
   as on the app's startup screen — a dark tile just melted into the dark page.
   The 128px box is the layout footprint; the 164px mark overhangs it evenly so
   its ring lines up with the text edge. */
.hero-mark{position:relative;width:128px;height:128px;margin-bottom:22px}
.hero-mark::before{content:"";position:absolute;inset:-18px;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(124,92,214,0.30),rgba(124,92,214,0) 74%)}
.lm{position:absolute;left:50%;top:50%;width:164px;height:164px;transform:translate(-50%,-50%);display:block;overflow:visible}
/* Light: the launcher-icon tile, same footprint. The ring spans 60% of the
   tile's width (svg 79% x arc 76%). */
[data-theme="light"] .hero-mark{border-radius:30px;background:#0B0C0F;box-shadow:0 0 0 7px var(--mark-ring),0 22px 54px var(--mark-shadow)}
[data-theme="light"] .hero-mark::before{display:none}
[data-theme="light"] .lm{width:79%;height:79%}
.lm-arc{fill:none;stroke:var(--lm-ink,#F4F2F7);stroke-width:3;stroke-linecap:round;stroke-dasharray:100 200;stroke-dashoffset:0}
.lm-word{fill:var(--lm-ink,#F4F2F7)}
.lm-g{transform-box:fill-box;transform-origin:center}
.lm-g path{fill:none;stroke:var(--lm-ink,#F4F2F7);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:no-preference){
  .lm-arc{animation:lm-arc 5.2s linear infinite}
  .lm-g1{animation:lm-g1 5.2s linear infinite}
  .lm-g2{animation:lm-g2 5.2s linear infinite}
  .lm-g3{animation:lm-g3 5.2s linear infinite}
  .lm-g4{animation:lm-g4 5.2s linear infinite}
}
@keyframes lm-arc{
  0%,56%{stroke-dashoffset:0;animation-timing-function:cubic-bezier(.45,0,.55,1)}
  76%{stroke-dashoffset:100;animation-timing-function:cubic-bezier(.45,0,.55,1)}
  93%,100%{stroke-dashoffset:0}
}
@keyframes lm-g1{
  0%{opacity:0;transform:scale(.3);animation-timing-function:cubic-bezier(.5,1,.89,1)}
  11%{opacity:1;transform:scale(1)}
  40%{opacity:1;transform:scale(1);animation-timing-function:cubic-bezier(.5,1,.89,1)}
  49%,100%{opacity:0;transform:scale(.6)}
}
@keyframes lm-g2{
  0%,5.5%{opacity:0;transform:scale(.3);animation-timing-function:cubic-bezier(.5,1,.89,1)}
  16.5%{opacity:1;transform:scale(1)}
  43.5%{opacity:1;transform:scale(1);animation-timing-function:cubic-bezier(.5,1,.89,1)}
  52.5%,100%{opacity:0;transform:scale(.6)}
}
@keyframes lm-g3{
  0%,11%{opacity:0;transform:scale(.3);animation-timing-function:cubic-bezier(.5,1,.89,1)}
  22%{opacity:1;transform:scale(1)}
  47%{opacity:1;transform:scale(1);animation-timing-function:cubic-bezier(.5,1,.89,1)}
  56%,100%{opacity:0;transform:scale(.6)}
}
@keyframes lm-g4{
  0%,16.5%{opacity:0;transform:scale(.3);animation-timing-function:cubic-bezier(.5,1,.89,1)}
  27.5%{opacity:1;transform:scale(1)}
  50.5%{opacity:1;transform:scale(1);animation-timing-function:cubic-bezier(.5,1,.89,1)}
  59.5%,100%{opacity:0;transform:scale(.6)}
}
.hero .pt-h1{margin-top:14px}
.h1-line{display:block}
.hero .pt-lead{margin-top:16px;max-width:50ch}
.hero-ctas{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}
.play-note{margin-top:12px;font-size:13px;color:var(--muted)}
.play-soon{display:none;margin-top:12px;font-size:13px;color:var(--accent);background:var(--accent-wash);border:1px solid var(--outline);border-radius:10px;padding:10px 14px;max-width:440px}
.play-soon.show{display:block}
.hero-stats{display:flex;margin-top:26px;padding-top:20px;border-top:1px solid var(--outline);max-width:520px}
.hero-stats>div{flex:1;padding-right:16px}
.hero-stats>div+div{padding-left:20px;border-left:1px solid var(--outline)}
.hero-stats dt{font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.2;font-variant-numeric:tabular-nums;color:var(--text)}
.hero-stats dd{margin-top:2px;font-size:13px;line-height:1.4;color:var(--muted)}

/* app demo: page list + phone that pages through the real app layouts */
.demo{display:grid;grid-template-columns:auto auto;gap:20px;align-items:center;justify-content:end}
.demo-side{display:flex;flex-direction:column;gap:10px}
.demo-tabs{list-style:none;display:flex;flex-direction:column;gap:2px}
.demo-tab{display:flex;align-items:center;gap:10px;width:100%;padding:7px 14px 7px 10px;border-radius:10px;border:1px solid transparent;background:none;color:var(--muted);font:inherit;font-size:14px;font-weight:500;line-height:1.3;cursor:pointer;text-align:left;transition:color .2s,background .2s,border-color .2s}
.demo-tab svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.demo-tab:hover{color:var(--text)}
.demo-tab[aria-pressed="true"]{color:var(--text);background:var(--accent-wash);border-color:var(--outline)}
.demo-tab[aria-pressed="true"] svg{color:var(--accent)}
.demo-ctl{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-left:10px;padding:6px 10px 6px 0;background:none;border:0;color:var(--muted);font:inherit;font-size:12px;font-weight:500;cursor:pointer;transition:color .2s}
.demo-ctl:hover{color:var(--text)}
.demo-ctl svg{width:14px;height:14px;fill:currentColor}
.demo-ctl .ic-play,.demo-ctl[aria-pressed="true"] .ic-pause{display:none}
.demo-ctl[aria-pressed="true"] .ic-play{display:block}
.no-js-hide{display:none}
.reveal-ready .no-js-hide{display:inline-flex}
/* name of the page on screen — only shown once the list has collapsed to icons */
.demo-now{display:none;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
@media (min-width:901px){
  .h1-line{white-space:nowrap}
}
/* icon-only page list: shared by the narrow-laptop rail and the phone row */
@media (max-width:1120px){
  .demo-tab{padding:0;justify-content:center}
  .demo-tab span,.demo-ctl span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .demo-ctl{margin-left:0;padding:0;justify-content:center;align-self:center}
}
/* narrow laptop / tablet landscape: keep two columns, but the list becomes a
   rail so the phone can never run into the headline */
@media (min-width:901px) and (max-width:1120px){
  .hero-grid{gap:28px}
  .demo{gap:12px}
  .demo .pt-phone{--pw:256}
  .demo-tab{width:40px;height:38px}
  .demo-ctl{width:40px;height:34px}
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:30px;text-align:center}
  .hero-mark{margin-left:auto;margin-right:auto}
  .hero .pt-lead{margin-left:auto;margin-right:auto}
  .hero-ctas{justify-content:center}
  .hero-stats{margin-left:auto;margin-right:auto;text-align:left}
  .play-soon{margin-left:auto;margin-right:auto}
  .demo{grid-template-columns:minmax(0,1fr);justify-items:center;justify-content:center;gap:12px}
  .demo .pt-phone{--pw:270}
  .demo-side{flex-direction:row;align-items:center;gap:4px;width:100%;max-width:400px}
  .demo-tabs{flex:1;min-width:0;flex-direction:row;gap:2px}
  .demo-tabs li{flex:1;min-width:0}
  .demo-tab{width:100%;height:42px}
  .demo-ctl{flex:none;width:40px;height:42px}
  .demo-now{display:block}
}
@media (max-width:600px){
  .hero-mark{width:108px;height:108px;margin-bottom:18px}
  .hero-mark::before{inset:-15px}
  .lm{width:138px;height:138px}
  [data-theme="light"] .hero-mark{border-radius:25px}
  .hero .pt-lead{font-size:16px}
  /* one clear action on a phone; the next section is a thumb-scroll away anyway */
  .hero-ctas{margin-top:20px}
  .hero-ctas .pt-btn{flex:1 1 100%}
  .hero-ctas .pt-btn-outline{display:none}
  .hero-stats{margin-top:20px;padding-top:16px}
  .hero-stats dt{font-size:19px}
  .hero-stats dd{font-size:12.5px}
  .hero-stats>div{padding-right:10px}
  .hero-stats>div+div{padding-left:12px}
}
@media (max-width:359px){
  .xs-hide{display:none}
  .demo .pt-phone{--pw:248}
  .hero-stats dt{font-size:17px}
  .hero-stats>div+div{padding-left:10px}
  .hero-stats>div{padding-right:6px}
}

/* ---------- section head ---------- */
.sec-head{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:8px 48px;align-items:end}
.sec-head .pt-h2{margin-bottom:0}
.sec-head .pt-lead{font-size:16px;margin-bottom:3px}
@media (max-width:860px){.sec-head{grid-template-columns:1fr}}

/* ---------- how it works ---------- */
/* The hero's lower-left glow lives here: a full circle centred on the hero/how
   boundary (top:0 + translateY(-50%)), hanging half into the hero. z-index:-1
   inside this section's own stacking context puts it behind the heading and
   the cards (the hero text sits above it too: .hero-grid is z-index:1). Width
   is capped at 100% so it never widens a phone viewport, and `circle
   closest-side` fades it out well inside its own square box at any size. */
#how{position:relative;z-index:0}
#how::before{content:"";position:absolute;top:0;left:0;width:min(640px,100%);aspect-ratio:1;transform:translateY(-50%);z-index:-1;pointer-events:none;background:radial-gradient(circle closest-side,var(--glow-2),transparent 70%)}
.how-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap);margin-top:26px}
.how-card{position:relative;background:var(--surface);border:1px solid var(--outline);border-radius:18px;overflow:hidden}
/* a window onto the (dark-only) app: fixed dark in both themes, and purely
   illustrative — nothing in it reacts to the pointer */
.how-media{position:relative;height:214px;overflow:hidden;border-bottom:1px solid var(--outline);background:radial-gradient(120% 100% at 50% 0%,rgba(79,55,139,0.30),transparent 72%),#0F1115;pointer-events:none}
.how-media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:44px;background:linear-gradient(180deg,rgba(15,17,21,0),rgba(15,17,21,0.9));pointer-events:none}
.how-body{padding:16px 20px 20px}
.how-num{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--accent);font-variant-numeric:tabular-nums}
.how-body h3{font-size:18px;margin:4px 0 6px;letter-spacing:-.01em}
.how-body p{color:var(--muted);font-size:14px;line-height:1.55}
/* launch video under the three steps — the same card as .how-card, video 16:9 edge to edge,
   centred inside the page wrap. 936px = the 720px first cut + 30% (owner, 2026-10-05:
   "a bit too small"); it still fits the 1072px content width and shrinks with the wrap
   below that. On phones the card is simply full width, so turning the phone sideways
   roughly doubles it — nothing else is needed for rotation. */
.how-video{max-width:936px;margin:calc(var(--grid-gap) + 8px) auto 0;background:var(--surface);border:1px solid var(--outline);border-radius:18px;overflow:hidden}
.how-video video{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:16/9;background:#0F1115}
.how-video figcaption{display:flex;justify-content:center;align-items:baseline;flex-wrap:wrap;gap:4px 10px;padding:14px 20px 16px;border-top:1px solid var(--outline);color:var(--muted);font-size:14px;text-align:center}
.how-video figcaption b{color:var(--text);font-size:16px;letter-spacing:-.01em}
@media (max-width:860px){
  /* three steps become one swipeable row instead of three stacked screens */
  .how-grid{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:22px calc(var(--wrap-pad)*-1) 0;padding:0 var(--wrap-pad) 4px;scroll-padding:0 var(--wrap-pad)}
  .how-grid::-webkit-scrollbar{display:none}
  .how-card{flex:0 0 min(84%,340px);scroll-snap-align:start}
}

/* ---------- features: compact index, no cards ---------- */
.features-section{background:var(--surface);border-top:1px solid var(--outline);border-bottom:1px solid var(--outline)}
.feature-grid{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 36px;margin-top:28px}
.feature{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start}
.feature p{color:var(--muted);font-size:14px;line-height:1.5;margin-top:2px}
@media (max-width:900px){.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){
  .feature-grid{grid-template-columns:1fr;gap:14px;margin-top:22px}
  .feature{gap:12px}
  .feature p{font-size:13.5px}
}

/* ---------- faq ---------- */
.faq-grid{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:48px;align-items:start}
.faq-intro{position:sticky;top:calc(var(--nav-height) + 24px)}
.faq-intro p{margin-top:6px;color:var(--muted);font-size:15px}
@media (max-width:860px){
  .faq-grid{grid-template-columns:1fr;gap:20px}
  .faq-intro{position:static}
}

/* ---------- support ---------- */
.support-section{background:var(--surface);border-top:1px solid var(--outline);border-bottom:1px solid var(--outline)}
.support-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:start}
@media (max-width:860px){.support-grid{grid-template-columns:1fr;gap:22px}}
@media (max-width:600px){.support-info .row:not(:last-child){display:none}}
.support-info .pt-lead{font-size:16px;margin-bottom:6px}
.support-info .row{display:flex;gap:14px;margin-top:16px;align-items:flex-start}
.support-info .glyph{flex:0 0 auto;width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--accent);background:var(--accent-wash);border:1px solid var(--outline)}
.support-info .glyph svg{width:19px;height:19px;display:block}
.support-info .row p{color:var(--muted);font-size:14px;line-height:1.5;margin-top:2px}
.form-note{font-size:12px;color:var(--muted);margin-top:10px;line-height:1.5}
.form-sent{display:none;margin-top:12px;font-size:14px;color:var(--green);background:var(--green-wash);border:1px solid var(--green-outline);border-radius:10px;padding:10px 14px}
.form-sent.show{display:block}
.btn-full{width:100%;justify-content:center}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--outline);padding:40px 0 28px;background:var(--surface)}
.support-section+footer,main:has(.support-section:last-child)+footer{border-top:0;background:var(--bg)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:36px}
@media (max-width:900px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr;gap:28px}}
@media (max-width:720px){.foot-grid{grid-template-columns:1fr 1fr;gap:24px}.foot-brand{grid-column:1/-1}}
.foot-grid h4,.foot-h{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.foot-grid ul{list-style:none}
.foot-grid li{margin-bottom:7px}
.foot-grid li a{color:var(--text);font-size:14px;overflow-wrap:anywhere}
.foot-grid li a:hover{color:var(--accent)}
.foot-brand p{color:var(--muted);font-size:13px;margin-top:10px;max-width:300px}
.foot-made{display:block;margin-top:10px;font-size:12px;color:var(--muted)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px 16px;flex-wrap:wrap;margin-top:28px;padding-top:20px;border-top:1px solid var(--outline);color:var(--muted);font-size:13px}
.foot-bottom a{color:var(--muted);text-decoration:underline}
.foot-bottom a:hover{color:var(--accent)}

/* ============================================================
   Sub-pages (legal, delete account, 404)
   ============================================================ */
body.subpage nav.site-nav{background:var(--nav-bg);backdrop-filter:blur(14px);border-bottom-color:var(--outline)}
.subpage-main{padding-top:var(--nav-height)}

.page-head{position:relative;padding:64px 0 34px;overflow:hidden;border-bottom:1px solid var(--outline);background:var(--surface)}
.page-head::before{content:"";position:absolute;top:-260px;left:50%;transform:translateX(-50%);width:900px;height:520px;pointer-events:none;background:radial-gradient(closest-side,var(--glow-sub),transparent 70%)}
.page-head>*{position:relative;z-index:1}
.page-head .pt-h1{font-size:clamp(30px,4.4vw,44px);margin-top:16px}
.page-head .pt-lead{margin-top:14px}
.crumbs{font-size:13px;color:var(--muted)}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--accent)}
.crumbs span{margin:0 8px;opacity:.6}

/* ---------- legal article ---------- */
.legal-layout{display:grid;grid-template-columns:1fr;gap:48px;padding:52px 0 96px}
@media (min-width:1100px){
  .legal-layout{grid-template-columns:minmax(0,var(--measure)) 240px;justify-content:center;gap:56px}
}
.legal-article{max-width:var(--measure);min-width:0;font-size:16px;color:var(--text)}
.legal-article h1{font-size:clamp(30px,4.4vw,42px);font-weight:700;line-height:1.14;letter-spacing:-.02em;margin-bottom:6px}
.legal-article p.effective{display:inline-block;font-size:13px;font-weight:700;line-height:1.45;color:var(--accent);background:var(--accent-wash-faint);border:1px solid var(--outline);border-radius:10px;padding:5px 12px;margin:6px 0 28px}
.legal-article h2{font-size:22px;font-weight:700;line-height:1.25;letter-spacing:-.01em;margin:44px 0 14px;padding-top:26px;border-top:1px solid var(--outline)}
.legal-article h2:first-of-type{margin-top:32px;padding-top:0;border-top:none}
.legal-article h3{font-size:16px;font-weight:700;margin:26px 0 8px;color:var(--text)}
.legal-article p{margin:0 0 16px;color:var(--text);line-height:1.72}
.legal-article ul,.legal-article ol{margin:0 0 18px;padding-left:24px}
.legal-article ul{list-style:disc}
.legal-article ol{list-style:decimal}
.legal-article li{margin-bottom:9px;line-height:1.7;color:var(--text)}
.legal-article li::marker{color:var(--accent)}
.legal-article ul ul,.legal-article ol ol,.legal-article ul ol,.legal-article ol ul{margin:9px 0 0}
.legal-article a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.legal-article strong{font-weight:700;color:var(--text-strong)}
.legal-article em{font-style:italic;color:var(--text)}
/* "The short version" summary box — the list under the document's first heading */
.legal-article h2:first-of-type+ul{list-style:none;padding:22px 26px;margin-bottom:30px;background:var(--surface-tonal);border:1px solid var(--outline);border-radius:var(--radius)}
.legal-article h2:first-of-type+ul li{position:relative;padding-left:26px;font-size:15px;color:var(--text)}
.legal-article h2:first-of-type+ul li::before{content:"";position:absolute;left:2px;top:10px;width:8px;height:8px;border-radius:999px;background:var(--accent)}
.legal-article h2:first-of-type+ul li:last-child{margin-bottom:0}

.legal-note,p.legal-note{display:flex;gap:12px;align-items:flex-start;margin:0 0 30px;padding:14px 18px;background:var(--accent-wash-faint);border:1px solid var(--outline);border-radius:var(--radius);font-size:14px;color:var(--muted);line-height:1.6}
.legal-note svg{width:18px;height:18px;color:var(--accent);margin-top:2px}
.legal-note strong{color:var(--text)}

.legal-foot{margin-top:48px;padding-top:24px;border-top:1px solid var(--outline);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.legal-siblings{margin-top:30px;display:flex;gap:10px;flex-wrap:wrap}
.legal-siblings a{font-size:13px;font-weight:500;color:var(--muted);border:1px solid var(--outline);border-radius:999px;padding:7px 16px;text-decoration:none}
.legal-siblings a:hover{color:var(--accent);border-color:var(--accent);text-decoration:none}
.legal-siblings a[aria-current="page"]{color:var(--accent-ink);background:var(--accent);border-color:var(--accent);font-weight:700}

/* sticky "on this page" */
.legal-toc{display:none}
.legal-toc[hidden]{display:none !important}
@media (min-width:1100px){
  .legal-toc{display:block;position:sticky;top:calc(var(--nav-height) + 28px);align-self:start;max-height:calc(100vh - var(--nav-height) - 56px);overflow-y:auto}
}
.legal-toc h2{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.legal-toc ol{list-style:none;border-left:1px solid var(--outline)}
.legal-toc li{margin:0}
.legal-toc a{display:block;padding:6px 0 6px 14px;margin-left:-1px;border-left:1px solid transparent;font-size:13px;line-height:1.4;color:var(--muted);text-decoration:none}
.legal-toc a:hover{color:var(--text);text-decoration:none}
.legal-toc a.active{color:var(--accent);border-left-color:var(--accent);font-weight:500}

/* back to top */
.to-top{position:fixed;right:22px;bottom:22px;z-index:90;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:999px;background:var(--surface-tonal);border:1px solid var(--outline-strong);color:var(--accent);cursor:pointer;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .25s,transform .25s,visibility .25s,border-color .2s}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{border-color:var(--accent);text-decoration:none}
.to-top svg{width:18px;height:18px;display:block}

/* ---------- delete account page ---------- */
.delete-layout{max-width:var(--measure);margin:0 auto;padding:52px 0 96px}
.callout{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border-radius:var(--radius);border:1px solid var(--outline);background:var(--surface-tonal);margin-bottom:28px}
.callout svg{width:20px;height:20px;flex:none;margin-top:2px}
.callout h3{font-size:15px;font-weight:700;margin-bottom:6px}
.callout p{font-size:14px;color:var(--muted);line-height:1.65}
.callout p+p{margin-top:8px}
.callout-danger{background:var(--danger-wash);border-color:var(--danger-outline)}
.callout-danger svg{color:var(--danger)}
.callout-accent svg{color:var(--accent)}

.path-card{background:var(--surface-tonal);border:1px solid var(--outline);border-radius:var(--radius);padding:26px;margin-bottom:18px}
.path-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.path-num{flex:none;width:34px;height:34px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;color:var(--accent-ink);background:var(--accent)}
.path-head h2{font-size:19px;font-weight:700;letter-spacing:-.01em}
.path-card p{color:var(--muted);font-size:14px;line-height:1.7;margin-bottom:14px}
.path-card p:last-child{margin-bottom:0}
.path-card ol,.path-card ul{color:var(--muted);font-size:14px;line-height:1.75;margin:0 0 16px;padding-left:22px}
.path-card ol{list-style:decimal}
.path-card ul{list-style:disc}
.path-card li{margin-bottom:6px}
.path-card li::marker{color:var(--accent)}
.path-card strong{color:var(--text)}
.path-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px solid var(--outline);border-radius:999px;padding:3px 10px;margin-left:auto}
.fact-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:8px 0 34px}
@media (max-width:700px){.fact-grid{grid-template-columns:1fr}}
.fact{background:var(--surface-tonal);border:1px solid var(--outline);border-radius:var(--radius);padding:20px 22px}
.fact h3{font-size:14px;font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.fact h3 svg{width:16px;height:16px;color:var(--accent)}
.fact ul{list-style:none;font-size:14px;color:var(--muted);line-height:1.7}
.fact li{position:relative;padding-left:16px;margin-bottom:6px}
.fact li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:999px;background:var(--accent);opacity:.7}
.fact-keeps li::before{background:var(--muted)}

/* ---------- 404 ---------- */
.nf{min-height:calc(100vh - var(--nav-height));display:flex;align-items:center;justify-content:center;text-align:center;padding:120px 0 90px;position:relative;overflow:hidden}
.nf::before{content:"";position:absolute;top:-300px;left:50%;transform:translateX(-50%);width:1000px;height:640px;pointer-events:none;background:radial-gradient(closest-side,var(--glow-sub),transparent 70%)}
.nf-inner{position:relative;z-index:1;max-width:560px;margin:0 auto}
.nf-code{font-size:clamp(64px,14vw,120px);font-weight:700;line-height:1;letter-spacing:-.04em;color:var(--accent)}
.nf h1{font-size:clamp(24px,4vw,34px);font-weight:700;letter-spacing:-.02em;margin-top:12px}
.nf p{color:var(--muted);font-size:16px;margin-top:14px}
.nf-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.nf-links{margin-top:38px;padding-top:22px;border-top:1px solid var(--outline);display:flex;gap:8px 22px;justify-content:center;flex-wrap:wrap;font-size:14px}
.nf-links a{color:var(--muted)}
.nf-links a:hover{color:var(--accent)}