/* ksak website. Dark only. Values come from the ksak design system tokens (tokens.json v3). */

:root{
  color-scheme:dark;
  --bg:#0b0b0c;--surface:#161618;--surface-raised:#202023;--surface-sunken:#070708;
  --line:#232326;--line-strong:#66666e;
  --text:#f5f5f6;--text-muted:#a3a3aa;--text-faint:#6c6c74;
  --accent:#ffb9e8;--on-accent:#1b1450;--focus:#ffb9e8;
  --income:#a8bcff;--expense:#ffb9e8;--reserve:#cdb8ff;--danger:#ff5d7d;--warning:#f3e3a0;
  --income-fill:#2e5afb;--expense-fill:#f08ccc;--reserve-fill:#8978eb;--danger-fill:#e8456b;
  --coin-white:#fefefe;--coin-blush:#f8e3ed;--coin-pink:#ffb9e8;--coin-peach:#fed7cc;--coin-rose:#db6791;
  --glow-blue:#2e5afb;--glow-sky:#7292fb;--glow-lavender:#8978eb;--glow-violet:#9064e0;--glow-indigo:#353a98;--glow-white:#fff6f0;
  --hero-ground:#1c221e;
  --font-display:Fraunces,Georgia,serif;
  --font-sans:"Space Grotesk",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --radius-xs:8px;--radius-sm:12px;--radius-md:16px;--radius-lg:20px;--radius-xl:32px;--radius-pill:999px;
  --shadow-card:0 1px 0 rgba(255,255,255,.04) inset,0 8px 24px rgba(0,0,0,.28);
  --shadow-float:0 18px 48px rgba(0,0,0,.5);
  --shadow-coin:0 4px 0 #db6791,0 12px 30px rgba(255,185,232,.35);
  --glow-hero:0 0 30px rgba(255,246,240,.5);
  --grain-opacity:.07;--bloom-blur:40px;
  --gutter:20px;--max:1200px;
  --glass:rgba(32,32,35,.72);
}
/* iOS / OS Increase Contrast */
@media (prefers-contrast:more){
  :root{
    --bg:#000;--surface:#141416;--surface-raised:#232327;--surface-sunken:#000;
    --line:#3a3a40;--line-strong:#8a8a92;
    --text:#fff;--text-muted:#c9c9cf;--text-faint:#9a9aa2;
    --accent:#ffc9ee;--focus:#fff;
    --income:#c3d0ff;--expense:#ffd0f0;--reserve:#ddd0ff;--danger:#ff8aa0;--warning:#f8edc0;
    --grain-opacity:.03;
  }
}
@media (prefers-reduced-transparency:reduce){:root{--glass:#202023}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.6 var(--font-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,h4,p{margin:0}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:6px}
.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}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--text);color:var(--bg);padding:10px 16px;border-radius:var(--radius-pill);font-weight:600;text-decoration:none}
.skip:focus{top:12px}

.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
@media (min-width:760px){:root{--gutter:40px}}

/* ── type ─────────────────────────────────────────── */
.display,.h1,.h2,.h3,.num-hero{font-family:var(--font-display);font-variation-settings:'SOFT' 100;letter-spacing:-.01em}
.h1{font-weight:900;font-size:clamp(44px,7.2vw,92px);line-height:1.02;letter-spacing:-.025em}
.h2{font-weight:900;font-size:clamp(34px,4.6vw,58px);line-height:1.05;letter-spacing:-.02em}
.h3{font-weight:800;font-size:clamp(22px,2.2vw,26px);line-height:1.2}
.lead{font-size:clamp(18px,1.7vw,21px);line-height:1.55;color:var(--text-muted)}
.overline{font:600 12px/16px var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.muted{color:var(--text-muted)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.in{color:var(--income)}.out{color:var(--expense)}.res{color:var(--reserve)}.warn{color:var(--warning)}

/* ── buttons: the coin is the one primary action ──── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:var(--radius-pill);font:600 16px/20px var(--font-sans);text-decoration:none;cursor:pointer;border:0;white-space:nowrap;transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease}
.btn:active{transform:scale(.96);transition-duration:.08s}
.btn svg{width:18px;height:18px;flex:none}
.btn-coin{color:var(--on-accent);background:radial-gradient(90% 140% at 30% 20%,var(--coin-white),var(--coin-blush) 45%,var(--coin-pink) 85%);box-shadow:var(--shadow-coin)}
.btn-coin:hover{box-shadow:0 4px 0 #db6791,0 14px 40px rgba(255,185,232,.5)}
.btn-secondary{background:var(--surface-raised);color:var(--text);border:1px solid var(--line-strong)}
.btn-secondary:hover{background:#2a2a2e}
.btn-ghost{color:var(--text-muted);padding:0 14px}
.btn-ghost:hover{color:var(--text)}
.btn-sm{min-height:44px;padding:0 18px;font-size:15px}
.btn-sm.btn-coin{box-shadow:0 3px 0 #db6791,0 8px 22px rgba(255,185,232,.3)}

/* ── header ───────────────────────────────────────── */
.site-header{position:fixed;inset:0 0 auto;z-index:100;transition:background-color .2s,border-color .2s;border-bottom:1px solid transparent}
.site-header.scrolled{background:rgba(11,11,12,.8);border-bottom-color:var(--line);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
@media (prefers-reduced-transparency:reduce){.site-header.scrolled{background:var(--bg)}}
.site-header .wrap{height:72px;display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none;min-height:44px}
.brand img{height:26px;width:auto}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav a.link{display:none;padding:12px 14px;color:var(--text-muted);text-decoration:none;font-weight:500;font-size:15px;border-radius:var(--radius-pill)}
.nav a.link:hover{color:var(--text)}
@media (min-width:900px){.nav a.link{display:inline-flex}}

/* ── ambient glow: the icon's backdrop rising from the top, fading into bg ── */
.ambient{position:relative;isolation:isolate;overflow-x:clip}
.ambient::before{content:"";position:absolute;z-index:-2;left:-10%;right:-10%;top:-8%;height:var(--ambient-h,880px);filter:blur(var(--bloom-blur));pointer-events:none;
  background:
    radial-gradient(30% 34% at 22% 26%,rgba(137,120,235,.95),transparent 70%),
    radial-gradient(42% 40% at 52% 30%,rgba(46,90,251,.95),transparent 72%),
    radial-gradient(30% 26% at 46% 6%,rgba(114,146,251,.9),transparent 70%),
    radial-gradient(30% 32% at 86% 46%,rgba(144,100,224,.85),transparent 70%),
    radial-gradient(20% 20% at 36% 58%,rgba(255,185,232,.45),transparent 70%)}
.ambient::after{content:"";position:absolute;z-index:-1;left:0;right:0;top:0;height:calc(var(--ambient-h,880px) + 2px);pointer-events:none;
  background:linear-gradient(to bottom,rgba(11,11,12,.1) 0%,rgba(11,11,12,.25) 35%,var(--bg) 100%)}
.ambient.soft{--ambient-h:420px}
.ambient.soft::before{opacity:.65}
@media (prefers-contrast:more){.ambient::before{opacity:.7}}
.grain{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:var(--grain-opacity);mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* glow card: one contained hero fact */
.glow-card{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--radius-xl);color:var(--glow-white);background:var(--glow-blue)}
.glow-card::before{content:"";position:absolute;inset:-20%;z-index:-2;filter:blur(28px);
  background:radial-gradient(48% 50% at 15% 12%,var(--glow-lavender),transparent 70%),radial-gradient(45% 45% at 50% 0%,var(--glow-sky),transparent 70%),radial-gradient(60% 65% at 100% 105%,var(--glow-violet),transparent 70%),radial-gradient(40% 45% at 78% 95%,rgba(255,185,232,.85),transparent 70%)}
.glow-card .overline{color:rgba(255,246,240,.88)}
.num-hero{font-weight:900;color:var(--glow-white);text-shadow:var(--glow-hero);letter-spacing:-.03em;line-height:1}
.num-hero small{font:500 .26em var(--font-mono);letter-spacing:0;margin-left:.3em;opacity:.88;text-shadow:none}

/* surfaces */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 14px;border-radius:var(--radius-pill);background:var(--surface-raised);color:var(--text-muted);font:600 13px var(--font-sans);border:1px solid transparent;white-space:nowrap}
.chip.on{background:var(--text);color:var(--bg)}
.chip.dashed{background:transparent;border:1px dashed var(--line-strong)}
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:var(--radius-xs);background:var(--surface-raised);color:var(--text-muted);font:600 10px/14px var(--font-sans);letter-spacing:.6px;text-transform:uppercase}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease-out,transform .7s ease-out}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{transform:none;transition:opacity .3s}
  *,*::before,*::after{animation:none!important}
}
.no-js .reveal{opacity:1;transform:none}

/* ── footer ───────────────────────────────────────── */
.site-footer{border-top:1px solid var(--line);padding:56px 0 40px;margin-top:40px}
.foot-grid{display:grid;gap:36px;grid-template-columns:1fr}
@media (min-width:760px){.foot-grid{grid-template-columns:2fr 1fr 1fr}}
.foot-grid h2{font:600 12px/16px var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:12px}
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-grid li a{display:inline-flex;min-height:40px;align-items:center;color:var(--text);text-decoration:none;font-size:15px}
.foot-grid li a:hover{color:var(--accent)}
.foot-note{margin-top:40px;padding-top:24px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:13px;color:var(--text-muted)}

/* ── document pages (support, privacy) ───────────── */
.doc{max-width:760px;margin:0 auto;padding:148px var(--gutter) 64px}
.doc .h1{font-size:clamp(42px,6vw,68px);margin:14px 0 18px}
.doc .lead{margin-bottom:48px;max-width:560px}
.doc-section{padding:36px 0;border-top:1px solid var(--line)}
.doc-section h2{font:800 24px/1.25 var(--font-display);font-variation-settings:'SOFT' 100;margin-bottom:14px}
.doc-section h3{font:600 15px/1.4 var(--font-sans);margin:22px 0 8px}
.doc-section p,.doc-section li{color:var(--text-muted);font-size:16px;line-height:1.7}
.doc-section p+p{margin-top:12px}
.doc-section ul{margin:10px 0 0;padding-left:20px}
.doc-section li+li{margin-top:6px}
.doc-section strong{color:var(--text);font-weight:600}
.doc-section a{color:var(--accent)}
.doc-date{font:500 13px var(--font-mono);color:var(--text-muted)}

/* ── phone mockups (built from the app's components, not screenshots) ── */
.phone{--pw:330px;position:relative;width:var(--pw);height:calc(var(--pw) * 2.165);flex:none;border-radius:48px;padding:10px;background:#1b1b1e;box-shadow:0 0 0 1px #2c2c31,0 40px 80px rgba(0,0,0,.6),0 0 120px rgba(46,90,251,.18)}
.screen{position:relative;height:100%;border-radius:38px;overflow:hidden;background:var(--bg);isolation:isolate;font-family:var(--font-sans);color:var(--text)}
.screen .s-glow{position:absolute;inset:-12% -25% auto;height:62%;z-index:-2;filter:blur(26px);
  background:radial-gradient(40% 40% at 25% 30%,var(--glow-lavender),transparent 70%),radial-gradient(50% 45% at 55% 40%,var(--glow-blue),transparent 72%),radial-gradient(35% 35% at 50% 15%,var(--glow-sky),transparent 70%),radial-gradient(40% 35% at 88% 65%,var(--glow-violet),transparent 70%),radial-gradient(28% 26% at 40% 72%,rgba(255,185,232,.6),transparent 70%)}
.screen .s-glow.calm{opacity:.55}
.screen .s-fade{position:absolute;inset:0 0 auto;height:62%;z-index:-1;background:linear-gradient(to bottom,transparent 40%,var(--bg))}
.s-status{display:flex;justify-content:space-between;align-items:center;padding:14px 26px 0;font:600 12px var(--font-sans)}
.s-status i{display:inline-block;width:5px;height:5px;border-radius:9px;background:#fff;margin-left:3px}
.s-head{display:flex;align-items:center;gap:6px;padding:12px 14px 0}
.s-pill{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px 0 4px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);font:600 11px var(--font-sans)}
.s-pill b{width:20px;height:20px;border-radius:999px;background:rgba(255,255,255,.2);display:grid;place-items:center;font-size:9px}
.s-streak{margin-left:auto;display:inline-flex;align-items:center;gap:3px;height:28px;padding:0 9px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);font:600 11px var(--font-sans)}
.s-avatar{width:28px;height:28px;border-radius:999px;display:grid;place-items:center;font:700 11px var(--font-sans);color:var(--on-accent);background:radial-gradient(70% 80% at 35% 25%,var(--coin-white),var(--coin-blush) 45%,var(--coin-pink) 80%,var(--coin-peach));box-shadow:0 2px 0 var(--coin-rose)}
.s-hero{text-align:center;padding:22px 18px 0}
.s-hero .ov{font:600 9px/12px var(--font-sans);letter-spacing:.7px;text-transform:uppercase;color:rgba(255,246,240,.88)}
.s-hero .n{font:900 52px/56px var(--font-display);font-variation-settings:'SOFT' 100;letter-spacing:-1.5px;color:var(--glow-white);text-shadow:var(--glow-hero);margin-top:4px}
.s-hero .n small{font:500 13px var(--font-mono);letter-spacing:0;margin-left:4px;opacity:.88;text-shadow:none}
.s-bar{height:8px;border-radius:999px;background:rgba(255,255,255,.18);overflow:hidden;margin:12px 6px 6px}
.s-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--glow-white),var(--coin-pink))}
.s-meta{display:flex;justify-content:space-between;font:500 10px var(--font-sans);color:rgba(255,246,240,.88);padding:0 6px}
.s-note{font:500 10px var(--font-sans);color:rgba(255,246,240,.88);margin-top:6px}
.s-pp{display:flex;justify-content:center;gap:6px;margin-top:12px}
.s-pp span{height:26px;padding:0 11px;border-radius:999px;display:inline-flex;align-items:center;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);font:600 10px var(--font-sans)}
.s-pp span.on{background:var(--glow-white);color:var(--on-accent);border-color:transparent}
.s-card{margin:16px 12px 0;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:12px;box-shadow:var(--shadow-card)}
.s-ov{font:600 8.5px/12px var(--font-sans);letter-spacing:.6px;text-transform:uppercase;color:var(--text-muted)}
.s-cap{font:500 9.5px/13px var(--font-sans);color:var(--text-muted)}
.s-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line)}
.s-row:first-of-type{border-top:0}
.s-ico{width:30px;height:30px;border-radius:10px;background:var(--surface-sunken);display:grid;place-items:center;font-size:13px;flex:none}
.s-row.planned .s-ico{background:transparent;border:1.5px dashed var(--line-strong)}
.s-row .t{flex:1;min-width:0;font:600 11px/14px var(--font-sans)}
.s-row .t small{display:block;font:500 9.5px/13px var(--font-sans);color:var(--text-muted)}
.s-m{font:500 11px var(--font-mono);white-space:nowrap}
.s-row.planned .s-m{color:var(--text-muted)}
.s-acts{display:flex;gap:6px;padding:0 0 8px 40px}
.s-acts span{height:24px;padding:0 10px;border-radius:999px;display:inline-flex;align-items:center;font:600 9.5px var(--font-sans);background:var(--surface-raised);border:1px solid var(--line-strong)}
.s-acts span.coin{background:radial-gradient(90% 140% at 30% 20%,var(--coin-white),var(--coin-blush) 45%,var(--coin-pink) 85%);color:var(--on-accent);border:0;box-shadow:0 2px 0 var(--coin-rose)}
.s-tabbar{position:absolute;left:10px;right:10px;bottom:12px;height:58px;border-radius:26px;background:rgba(32,32,35,.86);border:1px solid var(--line);box-shadow:var(--shadow-float);display:flex;justify-content:space-around;align-items:center;padding:0 6px;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.s-tab{display:flex;flex-direction:column;align-items:center;gap:3px;font:600 8.5px var(--font-sans);color:var(--text-muted);min-width:48px}
.s-tab svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.s-tab.on{color:var(--text)}.s-tab.on svg{color:var(--accent);filter:drop-shadow(0 0 6px rgba(255,185,232,.8))}
.s-fab{position:absolute;right:16px;bottom:84px;width:50px;height:50px;border-radius:999px;display:grid;place-items:center;color:var(--on-accent);font:300 30px/1 var(--font-sans);background:radial-gradient(90% 140% at 30% 20%,var(--coin-white),var(--coin-blush) 45%,var(--coin-pink) 85%);box-shadow:0 4px 0 var(--coin-rose),0 10px 26px rgba(255,185,232,.5)}