/* Kolday site, "Zine" world: same tokens and rules as the iOS app (voicemind/src/theme/tokens.ts, docs/ui.md). */
:root{
  --bg:#FFF4DD;--surface:#FFFFFF;--surface-alt:#EDE2CC;--ink:#14122B;--shadow:#14122B;
  --text:#14122B;--muted:#55526F;
  --primary:#2438E8;--on-primary:#FFFFFF;--primary-text:#2438E8;
  --coral:#FF6B4A;--butter:#FFD84D;--pink:#FF9FB2;--mint:#9FE3C2;--on-sticker:#14122B;
  --flash:color-mix(in srgb,var(--butter) 45%,var(--surface));
  --stroke:2.5px;--stroke-tag:2px;--lift-btn:4px;--lift-card:4px;--lift-hero:5px;
  --r-card:22px;--r-row:18px;
  --page:min(1180px,100% - 2*clamp(20px,5vw,72px));
  --ease:cubic-bezier(.23,1,.32,1);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#14122B;--surface:#1F1C45;--surface-alt:#2C2860;--ink:#FFF4DD;--shadow:#FF6B4A;
    --text:#FFF4DD;--muted:#B8B0DA;
    --primary:#7D8BFF;--on-primary:#14122B;--primary-text:#9AA6FF;
    --flash:color-mix(in srgb,var(--butter) 20%,var(--surface))}
}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:88px;accent-color:var(--primary);scrollbar-color:var(--ink) var(--bg)}
body{background:var(--bg);color:var(--text);font:500 17px/1.6 -apple-system,BlinkMacSystemFont,"SF Pro Text","SF Hebrew",system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-variant-numeric:tabular-nums}
input,textarea{caret-color:var(--primary)}
::selection{background:var(--butter);color:var(--on-sticker)}
a{color:inherit;text-decoration-color:var(--primary-text);text-underline-offset:.22em;text-decoration-thickness:2px}
a:hover{text-decoration-thickness:3px}
:focus-visible{outline:3px solid var(--primary);outline-offset:3px;border-radius:8px}
svg.i{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
h1,h2,h3{font-weight:900;letter-spacing:-.03em;line-height:1.05;text-wrap:balance}
p{text-wrap:pretty}
.wrap{width:var(--page);margin-inline:auto}
/* marker highlight: butter behind ink, both schemes (app greeting marker) */
.mark{background:var(--butter);color:var(--on-sticker);padding:0 .12em;border-radius:.12em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* header */
.top{position:sticky;top:0;z-index:5;background:var(--bg);border-bottom:var(--stroke) solid var(--ink)}
.top .wrap{display:flex;align-items:center;gap:24px;min-height:64px}
.brand{font-weight:900;letter-spacing:-.03em;font-size:21px;text-decoration:none}
.top nav{display:flex;gap:6px;margin-inline-start:auto;align-items:center}
.top nav a{padding:10px 12px;min-height:44px;display:inline-flex;align-items:center;text-decoration:none;color:var(--muted);font-weight:700;border-radius:999px;font-size:16px}
.top nav a.lang{border:var(--stroke-tag) solid var(--ink);background:var(--surface);color:var(--text);font-weight:800;padding-inline:16px}
@media (max-width:760px){.top nav a:not(.lang){display:none}}
@media (hover:hover) and (pointer:fine){.top nav a:not(.lang):hover{color:var(--text);background:var(--surface-alt)}}

/* hero */
.hero{padding:clamp(40px,7vw,96px) 0 clamp(48px,7vw,104px)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,88px);align-items:center}
@media (max-width:960px){.hero .wrap{grid-template-columns:1fr}}
.hero h1{font-size:clamp(44px,7vw,88px);letter-spacing:-.04em;line-height:1.02}
.hero p.lead{font-size:clamp(19px,2vw,23px);color:var(--muted);margin:24px 0 32px;max-width:34ch}
.pill{display:inline-flex;align-items:center;gap:10px;background:var(--primary);color:var(--on-primary);border:var(--stroke) solid var(--ink);border-radius:999px;
  padding:13px 26px;font-weight:800;font-size:17px;letter-spacing:-.01em;text-decoration:none;min-height:52px;box-shadow:var(--lift-btn) var(--lift-btn) 0 var(--shadow)}
.pill[aria-disabled=true]{cursor:default}
/* press = stamp: the face travels onto its own hard shadow (shadows stay bottom-right in RTL too, as in the app) */
a.pill,.switch .track{transition:transform .1s ease-out,box-shadow .1s ease-out,opacity .1s ease-out}
a.pill:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--shadow)}

/* ledger */
.ledger{background:var(--surface);border:var(--stroke) solid var(--ink);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--lift-hero) var(--lift-hero) 0 var(--shadow)}
.ledger>header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:16px 24px;border-bottom:var(--stroke) solid var(--ink);background:var(--bg)}
.ledger header b{font-size:17px;font-weight:900;letter-spacing:-.01em}
.switch{display:inline-flex;align-items:center;gap:14px;background:none;border:0;color:var(--text);font:inherit;font-size:17px;font-weight:800;cursor:pointer;min-height:44px;padding:0}
.switch .track{width:62px;height:36px;border-radius:999px;background:var(--surface-alt);border:var(--stroke) solid var(--ink);position:relative;flex:none;box-shadow:3px 3px 0 var(--shadow)}
.switch .track::after{content:"";position:absolute;top:2.5px;inset-inline-start:3px;width:26px;height:26px;border-radius:50%;background:var(--surface);border:var(--stroke) solid var(--ink);transition:transform .25s var(--ease)}
.switch[aria-checked=true] .track{background:var(--primary)}
.switch[aria-checked=true] .track::after{transform:translateX(25px)}
[dir=rtl] .switch[aria-checked=true] .track::after{transform:translateX(-25px)}
.switch:active .track{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--shadow)}
.rows{list-style:none;padding:0}
.rows li{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr) minmax(0,1.5fr);gap:8px 20px;align-items:center;padding:18px 24px;border-bottom:var(--stroke-tag) solid var(--ink)}
.rows li:last-child{border:0}
.rows .what{font-weight:800}
/* state stickers: mint = stays on the phone, butter = leaves only with consent, white = off / none */
.tag{display:inline-block;border:var(--stroke-tag) solid var(--ink);border-radius:999px;padding:2px 11px;font-size:14px;font-weight:800;line-height:1.45;white-space:nowrap;transform:rotate(-2deg)}
.rows li:nth-child(even) .tag{transform:rotate(1.5deg)}
.tag.ok{background:var(--mint);color:var(--on-sticker)}
.tag.ask{background:var(--butter);color:var(--on-sticker)}
.tag.idle{background:var(--surface);color:var(--text)}
.when{color:var(--muted);font-size:15.5px}
.where,.when,.switch .st{display:grid}
.where{justify-items:start}
.where>.off-only,.where>.on-only,.when>.off-only,.when>.on-only,.switch .st>span{grid-area:1/1;visibility:hidden}
.ledger[data-ai=off] .where>.off-only,.ledger[data-ai=off] .when>.off-only,.ledger[data-ai=on] .where>.on-only,.ledger[data-ai=on] .when>.on-only,
.ledger[data-ai=off] .switch .st>.off-only,.ledger[data-ai=on] .switch .st>.on-only{visibility:visible}
.switch>span:first-child{display:inline-flex;gap:.3em}
.how{padding:14px 24px;color:var(--muted);font-size:16px;border-bottom:var(--stroke-tag) solid var(--ink)}
.ledger.flash li.chg{animation:chg .6s var(--ease)}
@keyframes chg{from{background:var(--flash)}to{background:transparent}}
@media (max-width:620px){.rows li{grid-template-columns:1fr auto;padding:16px 18px}.rows .when{grid-column:1/-1}.ledger>header,.how{padding-inline:18px}}

/* sections */
section{padding:clamp(48px,7vw,104px) 0}
section h2{font-size:clamp(34px,5vw,60px);letter-spacing:-.035em;max-width:18ch}
.intro{color:var(--muted);font-size:20px;max-width:46ch;margin-top:18px}

/* flow: ruled block, coral stickers */
.flow{list-style:none;padding:0;margin-top:44px;border-top:var(--stroke) solid var(--ink)}
.flow li{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr) 60px;gap:8px 32px;align-items:center;padding:30px 0;border-bottom:var(--stroke-tag) solid var(--ink)}
.flow h3{font-size:clamp(30px,4vw,48px);letter-spacing:-.035em}
.flow p{color:var(--muted);font-size:19px;max-width:40ch}
.flow svg.i{width:58px;height:58px;padding:13px;background:var(--coral);color:var(--on-sticker);border:var(--stroke) solid var(--ink);border-radius:50%;justify-self:end;transform:rotate(-2deg)}
.flow li:nth-child(even) svg.i{transform:rotate(1.5deg)}
@media (max-width:720px){.flow li{grid-template-columns:1fr 50px}.flow p{grid-column:1/-1;grid-row:2}.flow svg.i{width:50px;height:50px;padding:11px}}

/* example */
.example{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,4vw,56px);margin-top:48px;align-items:start}
@media (max-width:900px){.example{grid-template-columns:1fr}}
.say{background:var(--surface);border:var(--stroke) solid var(--ink);border-radius:var(--r-card);padding:30px;box-shadow:var(--lift-hero) var(--lift-hero) 0 var(--shadow);position:sticky;top:96px}
@media (max-width:900px){.say{position:static}}
.say q{display:block;font-size:21px;line-height:1.75;quotes:none;font-weight:600}
.say q em{font-style:normal;font-weight:800;background:var(--butter);color:var(--on-sticker);padding:.05em .15em;border-radius:6px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.say small{display:block;margin-top:20px;color:var(--muted);font-size:14px}
.acts{display:grid;gap:18px}
.act{background:var(--surface);border:var(--stroke) solid var(--ink);border-radius:var(--r-card);padding:20px 22px;box-shadow:var(--lift-card) var(--lift-card) 0 var(--shadow)}
.act h3{font-size:17px;font-weight:800;letter-spacing:-.01em;margin-bottom:12px;display:flex;align-items:center;gap:10px}
.check{display:flex;align-items:center;gap:12px;padding:6px 0;font-size:18px}
.check span.b{width:24px;height:24px;border-radius:6px;border:var(--stroke) solid var(--ink);flex:none;position:relative;background:var(--surface)}
.check.done span.b{background:var(--primary)}
.check.done span.b::after{content:"";position:absolute;inset:3px 4px 7px 4px;border:solid var(--on-primary);border-width:0 0 2.5px 2.5px;transform:rotate(-45deg) translate(1px,-1px)}
.check.done{color:var(--muted);text-decoration:line-through}
.mail dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:16px}
.mail dt{color:var(--muted)}
.mail dd{font-weight:700}
.mail p{margin-top:12px;padding-top:12px;border-top:var(--stroke-tag) dashed var(--ink);font-size:16px}
.event{display:flex;gap:16px;align-items:center}
.date{flex:none;border:var(--stroke) solid var(--ink);border-radius:14px;text-align:center;min-width:76px;overflow:hidden;background:var(--surface);font-variant-numeric:tabular-nums}
.date b{display:block;background:var(--coral);color:var(--on-sticker);font-size:13px;font-weight:800;padding:3px 8px;border-bottom:var(--stroke-tag) solid var(--ink)}
.date span{display:block;font-size:24px;font-weight:900;letter-spacing:-.02em;padding:4px 12px}
.event p{font-size:18px;font-weight:800}.event small{color:var(--muted);font-size:15px;display:block;font-weight:500}

/* inside: ruled definition grid, sticker icons */
.inside{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(32px,6vw,96px);margin-top:44px}
@media (max-width:820px){.inside{grid-template-columns:1fr}}
.inside div{display:grid;grid-template-columns:46px 1fr;gap:4px 16px;padding:22px 0;border-top:var(--stroke-tag) solid var(--ink)}
.inside svg.i{grid-row:span 2;width:46px;height:46px;padding:10px;border:var(--stroke-tag) solid var(--ink);border-radius:50%;background:var(--butter);color:var(--on-sticker);transform:rotate(-2deg)}
.inside div:nth-child(3n+2) svg.i{background:var(--pink);transform:rotate(1.5deg)}
.inside div:nth-child(3n) svg.i{background:var(--mint)}
.inside h3{font-size:20px;letter-spacing:-.015em}
.inside p{color:var(--muted);grid-column:2}
.plans{margin-top:40px;color:var(--muted);max-width:60ch}
.plans b{color:var(--text);font-weight:800}

/* close */
.close{text-align:start}
.close h2{max-width:14ch}
.close .status{margin-top:20px;color:var(--muted);font-size:20px}

footer{border-top:var(--stroke) solid var(--ink);padding:40px 0 56px;color:var(--muted);font-size:15px}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between}
footer nav{display:flex;flex-wrap:wrap;gap:8px 22px}
footer a{color:var(--text);font-weight:800;min-height:44px;display:inline-flex;align-items:center}
footer p{max-width:60ch}

/* legal pages: calm reading, plain ink on paper; thick outlines only on tables and the draft callout */
.doc{padding:clamp(32px,5vw,72px) 0 80px}
.doc .wrap{max-width:780px}
.doc h1{font-size:clamp(36px,5vw,56px);letter-spacing:-.035em;margin-bottom:24px}
.doc h2{font-size:26px;font-weight:800;margin:44px 0 12px;letter-spacing:-.02em;max-width:none}
.doc h3{font-size:19px;font-weight:800;margin:28px 0 8px}
.doc p,.doc li{max-width:72ch;margin-bottom:12px}
.doc ul,.doc ol{padding-inline-start:1.3em;margin-bottom:12px}
.doc blockquote{background:var(--butter);color:var(--on-sticker);border:var(--stroke) solid var(--ink);border-radius:var(--r-row);padding:14px 18px;margin:0 0 32px;box-shadow:var(--lift-card) var(--lift-card) 0 var(--shadow)}
.doc blockquote p{margin:0}
.doc blockquote a{text-decoration-color:currentColor}
.doc code{font:15px ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--surface-alt);color:var(--text);padding:1px 6px;border-radius:6px}
.tw{overflow-x:auto;background:var(--surface);border:var(--stroke) solid var(--ink);border-radius:var(--r-row);margin:16px 0 32px;box-shadow:var(--lift-card) var(--lift-card) 0 var(--shadow)}
.doc table{width:100%;border-collapse:collapse;font-size:15.5px;font-variant-numeric:tabular-nums}
.doc th,.doc td{text-align:start;vertical-align:top;padding:10px 14px;border-bottom:1px solid var(--ink)}
.doc tr:last-child td{border-bottom:0}
.doc th{background:var(--surface-alt);font-weight:800;border-bottom:var(--stroke-tag) solid var(--ink)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  a.pill:active,.switch:active .track{transform:none;box-shadow:var(--lift-btn) var(--lift-btn) 0 var(--shadow);opacity:.7}
  .switch:active .track{box-shadow:3px 3px 0 var(--shadow)}
}