:root{
  /* Tigr 2.0 tokens (UX/UI-Konzept 24.10.2026). Dark: Obsidian & Amber */
  --bg:#17140F;--surface:#211C16;--raised:#29231B;--sunk:#14110D;--plate:var(--raised);
  --line:#352D23;--line-2:#4A4235;--edge:#8A8276;
  --text:#F5F1EB;--muted:#ADA59A;--muted-r:#C9BDAF;--quiet:#948C81;
  --light:#FFE2AA;--core:#FFF7E2;--light-deep:#D6B47E;--on-accent:#17140F;--accent-soft:#3A2F1E;
  --danger:#FF8E78;
  --a-work:#C88A3E;--a-body:#6E9E7E;--a-people:#7C90C4;--a-mind:#A67FA8;
  --m-bg:#16130F;--m-head:#29231B;--m-sheet:#1D1A15;--m-under:#0B0A08;--m-row:#D9D2C7;--m-ph:#6F685E;--m-pick:#2A241D;--m-paper:#F3EEE6;--m-paper-ink:#1C1811;
  --mk-core:#FFF7E2;--mk-light:#FFE2AA;--mk-node:#17140F;
  --shadow:rgba(0,0,0,.55);
  --font:-apple-system,BlinkMacSystemFont,system-ui,"SF Pro Text","Inter","Segoe UI",Roboto,sans-serif;
  --ease:cubic-bezier(.2,.85,.3,1);--fast:.16s;--move:.24s;--travel:.45s;
  --step:5rem;
  color-scheme:light dark;
}
:root,.dark-scope,.watch,.notif .ic{
  --lit:color-mix(in srgb,var(--light) 55%,transparent);
  --glow:0 0 0 1px color-mix(in srgb,var(--light) 28%,transparent),0 0 32px color-mix(in srgb,var(--light) 16%,transparent),0 0 80px color-mix(in srgb,var(--light) 6%,transparent);
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{background:var(--bg);-webkit-text-size-adjust:100%;text-size-adjust:100%}
@supports (font:-apple-system-body){html{font:-apple-system-body}}
body{font-family:var(--font);font-size:1rem;line-height:1.6;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
h1,h2,h3,.rounded{font-family:var(--font);font-weight:600;letter-spacing:-.02em;line-height:1.12;text-wrap:balance}
h1{font-size:clamp(2.25rem,1.5rem + 3.2vw,3.5rem)}
h2{font-size:clamp(1.75rem,1.35rem + 1.7vw,2.5rem)}
h3{font-size:1.25rem}
p{text-wrap:pretty}
a{color:var(--text);text-decoration-color:var(--edge);text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{text-decoration-color:var(--light)}
:focus-visible{outline:2px solid var(--light);outline-offset:4px;border-radius:12px}
.skip{position:absolute;left:16px;top:-80px;padding:8px 16px;background:var(--plate);border-radius:12px;z-index:10}
.skip:focus{top:16px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* header */
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;max-width:1080px;width:100%;margin:0 auto;padding:20px 24px}
.brand{display:inline-flex;align-items:center;gap:8px;font-family:var(--font);font-weight:600;font-size:1.125rem;text-decoration:none;color:var(--text)}
.brand svg{width:48px;height:48px;margin:-2px -12px -18px -16px}
.langs{display:flex;gap:4px;font-size:.875rem;color:var(--quiet)}
.langs a{color:var(--quiet);text-decoration:none;padding:4px 8px;border-radius:12px}
.langs a[aria-current]{color:var(--text)}
.langs a:hover{color:var(--text)}

/* sections */
.sec{padding:96px 24px}
.wrap{max-width:520px;margin:0 auto;text-align:center}
.wrap p.lead{margin-top:12px;color:var(--muted);font-size:1.125rem}
.scene{position:relative;max-width:640px;margin:40px auto 0}
.hair{width:2px;height:80px;margin:0 auto;background:linear-gradient(transparent,var(--line),transparent)}

/* header nav */
.top-r{display:flex;align-items:center;gap:24px}
.nav{display:none;gap:24px;font-size:.9375rem}
.nav a{color:var(--muted);text-decoration:none}
.nav a:hover{color:var(--text)}
@media (min-width:720px){.nav{display:flex}}

/* hero */
.hero{display:grid;gap:40px;align-items:center;max-width:1120px;margin:0 auto;padding:16px 24px 80px}
.hero-text{text-align:center}
.eyebrow{display:inline-block;font-size:.8125rem;font-weight:600;letter-spacing:.02em;color:var(--light-deep);padding:6px 12px;border:1px solid color-mix(in srgb,var(--light-deep) 40%,transparent);border-radius:999px;margin-bottom:16px}
.hero h1{font-size:clamp(2.125rem,1.35rem + 3vw,3.25rem)}
.hero .lead{margin:16px auto 0;max-width:36ch;color:var(--muted);font-size:1.125rem}
.cta{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;justify-content:center;margin-top:28px}
.soon{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 20px;border-radius:12px;background:var(--plate);border:1px solid var(--edge);font-weight:600;font-family:var(--font);color:var(--text)}
.soon-dot{width:8px;height:8px;border-radius:50%;background:var(--light-deep)}
.how{font-weight:600;text-decoration:none}
.how:hover{text-decoration:underline}
.offer{margin-top:16px;color:var(--light-deep);font-weight:600;font-size:.9375rem}
.trust{list-style:none;padding:0;margin-top:24px;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 20px;font-size:.875rem;color:var(--quiet)}
.trust li::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--edge);margin-right:8px;vertical-align:.18em}
@media (min-width:880px){
  .hero{grid-template-columns:1.05fr .95fr;gap:56px;min-height:calc(100svh - 72px);padding-bottom:96px}
  .hero-text{text-align:left}
  .hero .lead{margin-left:0}
  .cta,.trust{justify-content:flex-start}
}

/* hero comparison */
.s-compare{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;max-width:520px;width:100%;margin:0 auto}
.panel{border-radius:20px;padding:14px 10px 12px;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;min-height:264px}
.panel .label{margin:0 0 10px 6px;text-align:left}
.panel ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.orow{display:flex;justify-content:space-between;gap:6px;font-size:.75rem;line-height:1.3;color:var(--muted);padding:8px 10px;border-radius:10px;background:var(--sunk)}
.orow span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.orow .late{color:var(--danger)}
.orow .due{color:var(--quiet)}
.omore{font-size:.75rem;color:var(--quiet);padding:2px 10px}
.panel.tigr{border-color:color-mix(in srgb,var(--light) 22%,transparent);background:var(--surface)}
.panel.tigr .card{margin-top:auto;padding:0 14px}
.panel.tigr .card .t{font-size:1rem}
.panel .rest{margin:12px 0 auto;font-size:.75rem;color:var(--quiet);text-align:center}
@media (min-width:880px){.panel{min-height:340px;padding:18px 14px}.orow{font-size:.8125rem;padding:10px 12px}}

/* comparison table */
.wrap.wide{max-width:640px}
.vs-sec .s-compare{margin-top:40px}
.vs{width:100%;max-width:640px;margin:40px auto 0;border-collapse:separate;border-spacing:0 8px;font-size:.9375rem;line-height:1.4}
.vs th{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--quiet);font-weight:600;text-align:left;padding:0 16px 4px}
.vs th:last-child{color:var(--light-deep)}
.vs td{padding:14px 16px;vertical-align:top}
.vs td:first-child{color:var(--quiet);background:var(--sunk);border-radius:16px 0 0 16px;width:42%}
.vs td:last-child{color:var(--text);background:var(--plate);border-radius:0 16px 16px 0}
@media (max-width:480px){.vs{font-size:.875rem}.vs td{padding:12px}}

/* journey */
.journey{list-style:none;padding:0;margin:64px auto 0;max-width:960px;display:grid;gap:96px}
.step{display:grid;gap:32px;align-items:center}
.step-text{max-width:420px;margin:0 auto;text-align:center}
.num{margin-bottom:16px}
.num span[aria-hidden]{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;border:2px solid var(--line);font-weight:600;font-size:.875rem;color:var(--muted);font-family:var(--font)}
.step h3{font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem)}
.step-text p:last-child{color:var(--muted);margin-top:12px;font-size:1.0625rem}
.step-scene .scene{margin:0 auto}
.step .s-hero{height:380px}
@media (min-width:880px){
  .step{grid-template-columns:1fr 1fr;gap:64px}
  .step-text{text-align:left;margin:0}
  .step:nth-child(even) .step-text{order:2}
}

/* thinks along */
.think{max-width:960px;margin:40px auto 0;display:grid;gap:16px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:32px 24px;text-align:left}
.tile h3{font-size:1.375rem}
.tile p{color:var(--muted);margin-top:8px}
.tile .scene{margin-top:32px}
@media (min-width:880px){.think{grid-template-columns:1fr 1fr}.tile{padding:40px 32px}}

/* who */
.kicker{margin-top:40px;font-weight:600;font-family:var(--font);font-size:1.125rem}
.pains{list-style:none;padding:0;margin:16px auto 0;display:grid;gap:8px;text-align:left;max-width:460px}
.pains li{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px 16px;color:var(--muted)}
.who-end{margin-top:24px;font-size:1.125rem}
.close .soon{margin-top:32px}
.note{margin-top:24px;background:var(--sunk);border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.note .label{color:var(--light-deep);margin-bottom:4px}
.tile .note p:last-child{margin-top:0;font-size:.9375rem;color:var(--text)}
@media (max-width:600px){
  .top{padding:14px 20px}
  .hero{padding-top:8px;gap:28px}
  .eyebrow{margin-bottom:12px;font-size:.75rem;padding:5px 10px;letter-spacing:0}
  .hero .lead{font-size:1.0625rem;margin-top:12px}
  .cta{margin-top:20px}
  .how{display:none}
  .offer{margin-top:14px}
  .trust{margin-top:10px;font-size:.8125rem;gap:4px 14px}
  .panel{min-height:0}
  .orow:nth-child(n+5){display:none}
  .panel.tigr .card .t{font-size:.9375rem}
}

/* badge (placeholder until the official Apple badge is dropped in) */
.badge{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 20px 0 16px;border-radius:12px;background:#000;border:1px solid #A6A6A6;color:#fff;text-decoration:none;line-height:1.05;text-align:left;transition:border-color var(--fast) var(--ease)}
.badge:hover{border-color:#fff}
.badge svg{width:22px;height:22px;flex:none}
.badge small{display:block;font-size:.6875rem;letter-spacing:.02em}
.badge b{display:block;font-size:1.3125rem;font-weight:600;letter-spacing:-.01em;font-family:var(--font)}
.price{margin-top:16px;color:var(--light-deep);font-weight:600;font-size:.9375rem}

/* cards */
.card{background:var(--plate);border:1px solid var(--line);border-radius:20px;padding:0 20px;min-height:4.25rem;display:flex;flex-direction:column;justify-content:center;text-align:left}
.card .t{font-family:var(--font);font-weight:600;font-size:1.0625rem;line-height:1.25}
.card .s{display:block;color:var(--quiet);font-size:.8125rem;line-height:1.3;margin-top:2px}
.lit{border-color:var(--lit);box-shadow:var(--glow)}
.label{font-size:.75rem;letter-spacing:.16em;font-weight:600;color:var(--quiet);text-transform:uppercase}

/* scene 1: hero stream */
.s-hero{height:440px;max-width:360px}
.s-hero .stream{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:linear-gradient(transparent,var(--line) 14%,var(--line) 86%,transparent)}
.s-hero .node{position:absolute;left:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--bg);border:2px solid var(--line)}
.s-hero .n1{top:16%}.s-hero .n2{top:50%}.s-hero .n3{top:84%}
.s-hero .card{position:absolute;left:10%;right:10%;top:calc(50% - 2.125rem);height:4.25rem;z-index:1}
.s-hero .glass{position:absolute;left:0;right:0;top:calc(50% - 64px);height:128px;border-radius:28px;border:1px solid rgba(255,226,170,.14);background:linear-gradient(180deg,rgba(255,247,226,.07),rgba(255,247,226,.015) 60%,rgba(255,247,226,.03));z-index:2;pointer-events:none}

/* scene 2: head */
.s-head{max-width:260px;display:flex;flex-direction:column;gap:8px}
.chip{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:10px 16px;color:var(--muted);text-align:left;font-size:.9375rem}
.chip.lit{color:var(--text);background:var(--plate)}

/* scene 3: rank */
.s-rank{max-width:340px}
.s-rank .labels{display:grid;justify-items:center;margin-bottom:16px}
.s-rank .labels span{grid-area:1/1}
.s-rank .la{opacity:0}
.s-rank .lb{color:var(--light-deep)}
.stack{position:relative;height:calc(var(--step) * 3 - .75rem)}
.stack .card{position:absolute;left:0;right:0;height:4.25rem}
.stack .p0{top:0}.stack .p1{top:var(--step)}.stack .p2{top:calc(var(--step) * 2)}

/* scene 4: areas */
.s-areas{max-width:340px}
.bars{display:grid;gap:12px;margin-bottom:32px}
.bar{display:grid;grid-template-columns:minmax(5.5rem,max-content) 1fr;align-items:center;gap:12px;font-size:.8125rem;color:var(--quiet);text-align:left}
.track{height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.fill{height:100%;border-radius:3px;opacity:.8}
.f-work{background:var(--a-work);width:78%}
.f-body{background:var(--a-body);width:56%}
.f-people{background:var(--a-people);width:16%;opacity:.35}
.f-mind{background:var(--a-mind);width:48%}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;vertical-align:.08em}
.card .t .dot{margin-right:10px}

/* scene 6: tomorrow */
.s-tomorrow{max-width:340px;display:flex;flex-direction:column;gap:12px}
.s-tomorrow .ghost{height:4.25rem;border-radius:20px;border:1px dashed color-mix(in srgb,var(--edge) 40%,transparent)}
.s-tomorrow .label{margin-top:12px;text-align:left;padding-left:4px}
.s-tomorrow .slot{border-radius:20px;background:var(--sunk);padding:8px}
.s-tomorrow .card{border-color:color-mix(in srgb,var(--light-deep) 40%,transparent)}

/* scene 5: hold */
.s-hold{max-width:340px}
.holdcard{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:5rem;padding:0 16px 0 24px;background:var(--plate);border:1px solid var(--lit);box-shadow:var(--glow);border-radius:20px;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;transition:transform var(--move) var(--ease)}
.holdcard:focus-visible{outline:2px solid var(--light);outline-offset:4px}
.holdcard.holding{transform:scale(.985)}
.holdcard .t{font-family:var(--font);font-weight:600;font-size:1.125rem;transition:opacity var(--travel) var(--ease),transform var(--travel) var(--ease)}
.holdcard.leaving .t{opacity:0;transform:translateY(-8px)}
.holdcard.arriving .t{opacity:0;transform:translateY(8px);transition:none}
.ring{width:44px;height:44px;flex:none;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:3}
.ring .rb{stroke:var(--line)}
.ring .rf{stroke:var(--light);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset var(--move) var(--ease)}
.holdcard.holding .rf{stroke-dashoffset:25;transition:stroke-dashoffset 1.5s linear}
.holdcard.closed .rf{stroke-dashoffset:0;transition:stroke-dashoffset var(--fast) var(--ease)}
.holdcard.reset .rf{transition:none}
.hint{margin-top:16px;color:var(--quiet);font-size:.875rem}
.done{margin-top:8px;min-height:1.6em;color:var(--muted)}
.js .done{opacity:0;transition:opacity var(--travel) var(--ease)}
.js .shown .done{opacity:1}

/* section 5: everywhere */
.s-watch{display:flex;justify-content:center}
.watch{position:relative;width:176px;height:212px;border-radius:54px;background:var(--sunk);border:7px solid var(--line);padding:12px}
.watch::after{content:"";position:absolute;right:-13px;top:56px;width:7px;height:36px;border-radius:4px;background:var(--line)}
.watch .screen{height:100%;border-radius:38px;background:#0E0C09;display:flex;flex-direction:column;justify-content:center;padding:12px 10px;gap:8px}
.watch .wt{align-self:flex-end;font-size:.75rem;color:var(--quiet);padding-right:10px;font-variant-numeric:tabular-nums}
.watch .card{min-height:3.5rem;padding:0 12px;border-radius:16px}
.watch .card .t{font-size:.9375rem}
.lines{list-style:none;padding:0;margin:40px auto 0;max-width:420px;display:grid;gap:16px;text-align:left}
.lines li{display:grid;grid-template-columns:8.5rem 1fr;gap:16px;color:var(--muted);font-size:.9375rem}
.lines b{font-weight:600;color:var(--text)}
@media (max-width:420px){.lines li{grid-template-columns:1fr;gap:2px}}

/* section 6: calm */
.foot-note{margin-top:24px;color:var(--quiet);font-size:.875rem}
.more{display:inline-block;margin-top:20px}

/* section 7: reminders */
.notif{max-width:360px;margin:40px auto 0;display:flex;gap:12px;align-items:center;text-align:left;padding:12px 16px;border-radius:20px;background:var(--surface);border:1px solid var(--line)}
.notif .ic{width:38px;height:38px;border-radius:9px;background:var(--bg);border:1px solid var(--line);flex:none;display:grid;place-items:center}
.notif .ic svg{width:34px;height:34px}
.notif .hd{display:flex;justify-content:space-between;gap:8px;font-size:.75rem;color:var(--quiet);text-transform:uppercase;letter-spacing:.06em}
.notif .bd{font-size:.9375rem;line-height:1.35}
.notif>div{flex:1}

/* close */
.close{padding-bottom:120px}
.close .end-mark{width:112px;height:112px;margin:0 auto -24px;display:block}
.close .badge{margin-top:32px}

/* footer */
footer{background:var(--sunk);border-top:1px solid var(--line);padding:40px 24px 48px;color:var(--quiet);font-size:.875rem}
footer .in{max-width:1080px;margin:0 auto;display:flex;flex-wrap:wrap;gap:16px 32px;justify-content:space-between;align-items:center}
footer nav{display:flex;flex-wrap:wrap;gap:8px 24px}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--text)}
.made .heart{display:inline-block;width:1em;height:1em;vertical-align:-.15em;margin:0 1px}

/* text pages */
.page{max-width:640px;margin:0 auto;padding:56px 24px 96px}
.page h1{font-size:clamp(2rem,1.5rem + 2vw,2.75rem)}
.page .lead{margin-top:12px;color:var(--muted);font-size:1.125rem}
.page .stamp{margin-top:8px;color:var(--quiet);font-size:.875rem}
.page h2{font-size:1.375rem;margin-top:48px}
.page h3{font-size:1.0625rem;margin-top:24px}
.page p,.page ul,.page address{margin-top:12px;color:var(--muted);max-width:60ch}
.page address{font-style:normal}
.page ul{padding-left:20px}
.page li+li{margin-top:6px}
.page strong{color:var(--text);font-weight:600}
.contact{margin-top:32px;padding:24px;border-radius:20px;background:var(--surface);border:1px solid var(--line)}
.contact p{margin-top:4px}
.contact a{font-size:1.125rem;font-family:var(--font);font-weight:600}
.faq{margin-top:40px;display:grid;gap:12px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:0 20px}
.faq summary{cursor:pointer;list-style:none;padding:16px 0;font-family:var(--font);font-weight:600;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--quiet);font-weight:400;transition:transform var(--move) var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 16px}
.ph{color:var(--light-deep)}


/* ---------- app mockups (rebuilt from the real UI) ---------- */
.s-phone{max-width:none;margin:0 auto;padding:12px 0 24px}
.phw{container-type:inline-size;width:min(300px,76vw);margin:0 auto}
.ph{font-size:calc(100cqw / 30);position:relative;aspect-ratio:1320/2868;border-radius:4.6em;background:var(--m-bg);overflow:hidden;
  box-shadow:0 0 0 .75em #0A0806,0 0 0 calc(.75em + 1px) #3A332B,0 3em 6em var(--shadow);
  font-family:var(--font);color:var(--text);text-align:left;line-height:1.3;
  -webkit-user-select:none;user-select:none}
.ph p{margin:0;text-wrap:initial}
.ph svg{display:block}
.ph-island{position:absolute;top:1.1em;left:50%;transform:translateX(-50%);width:9.2em;height:2.7em;border-radius:1.4em;background:#000;z-index:6}
.ph-status{display:flex;justify-content:space-between;align-items:center;height:4.6em;padding:1em 2.4em 0 3.4em;font-weight:600}
.ph-status .tm{font-size:1.5em;letter-spacing:.01em}
.ph-status .ic{display:flex;gap:.5em;align-items:center}
.ph-status .ic svg{height:1.15em;width:auto}
.ph-head{background:var(--m-head);border-bottom:1px solid var(--line);padding-bottom:1.5em}
.ph-title{display:flex;justify-content:space-between;align-items:flex-start;padding:1.4em 2.2em 0}
.ph-title .h{font-family:var(--font);font-size:2.6em;font-weight:700;line-height:1.1;letter-spacing:-.01em}
.ph-title .dt{font-size:1.2em;color:var(--muted);margin-top:.25em}
.ph-icons{display:flex;gap:1.3em;margin-top:.7em}
.ph-icons svg{width:2em;height:2em}
.ph-chips{display:flex;gap:.8em;padding:1.8em 0 0 2.2em;overflow:hidden;white-space:nowrap}
.ph-chip{flex:none;font-size:1.25em;padding:.45em 1em;border-radius:999px;border:1px solid color-mix(in srgb,var(--c) 60%,transparent);
  background:color-mix(in srgb,var(--c) 17%,transparent);display:inline-flex;align-items:center;gap:.5em}
.ph-chip i{background:var(--c)}
.ph-chip i,.ph-pill i,.ph-choice i,.hc i{display:inline-block;width:.55em;height:.55em;border-radius:50%;flex:none}
.ph-body{position:relative;padding:1.5em 2.2em 0 4.6em;background:var(--m-bg)}
.ph-body::before{content:"";position:absolute;left:2.75em;top:0;bottom:-40em;width:1px;background:var(--line)}
.ph-card{position:relative;border-radius:2.4em;padding:2em 2em 1.8em;background:var(--raised);border:1px solid var(--line-2)}
.ph-card.lit{border-color:var(--lit);box-shadow:0 0 0 1px color-mix(in srgb,var(--light) 12%,transparent),0 0 3em color-mix(in srgb,var(--light) 13%,transparent)}
.ph-card .ph-top{display:flex;justify-content:space-between;align-items:center;gap:.6em}
.ph-lab{font-size:.95em;letter-spacing:.17em;font-weight:600;color:var(--light-deep);text-transform:uppercase}
.ph-pill{font-size:1.05em;padding:.35em .85em;border-radius:999px;border:1px solid var(--line-2);display:inline-flex;gap:.5em;align-items:center;white-space:nowrap}
.ph-card .h{font-family:var(--font);font-size:2em;font-weight:600;margin-top:1em;color:var(--text)}
.ph-card .h.big{font-size:2.4em;font-weight:700;color:var(--text)}
.ph-card .sub{font-size:1.15em;color:var(--muted-r);margin-top:.55em}
.ph-btns{display:flex;justify-content:flex-end;gap:.7em;margin-top:2.4em}
.ph-btn{font-size:1.2em;padding:.45em 1em;border-radius:999px;border:1px solid var(--edge);white-space:nowrap}
.ph-node{position:absolute;left:-3.45em;bottom:.6em;width:3.2em;height:3.2em}
.ph-node svg{width:100%;height:100%}
.ph-moonnode{position:absolute;left:-2.95em;bottom:1.4em;width:2.2em;height:2.2em;border-radius:50%;background:var(--raised);border:1px solid var(--line-2);display:grid;place-items:center;box-shadow:0 0 1.5em color-mix(in srgb,var(--light) 12%,transparent)}
.ph-moonnode svg{width:1.3em;height:1.3em}
.ph-moon{width:2.6em;height:2.6em;border-radius:50%;background:var(--raised);border:1px solid var(--line-2);color:var(--light-deep);display:grid;place-items:center}
.ph-moon svg{width:1.5em;height:1.5em}
.ph-paper{display:inline-block;margin-top:2.6em;font-size:1.3em;font-weight:600;padding:.6em 1.4em;border-radius:999px;background:var(--m-paper);color:var(--m-paper-ink)}
.ph-row{position:relative;display:flex;justify-content:space-between;align-items:center;gap:.6em;font-size:1.4em;padding:.85em 0;color:var(--m-row)}
.ph-row::before{content:"";position:absolute;left:-1.79em;top:50%;width:.93em;height:.93em;margin-top:-.465em;border-radius:50%;border:1.5px solid var(--edge);background:var(--m-bg);box-sizing:border-box}
.ph-row .n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-row .m{flex:none;font-size:.8em;color:var(--quiet)}
.ph-row .tt{color:var(--light-deep);margin-right:1.1em;font-weight:500}
.ph-sep{display:flex;align-items:center;gap:1em;font-size:1.1em;font-weight:600;color:var(--muted);padding:1.6em 0 .5em;letter-spacing:.02em}
.ph-sep::after{content:"";flex:1;height:1px;background:var(--line)}
.ph-card+.ph-sep{padding-top:2.4em}
.ph::after{content:"";position:absolute;left:0;right:0;bottom:0;height:12em;background:linear-gradient(transparent,var(--m-bg) 70%);pointer-events:none;z-index:3}
.ph-float{position:absolute;left:2em;right:2em;bottom:2.4em;display:flex;align-items:center;gap:.7em;z-index:4}
.ph-rest{font-size:1.25em;padding:.75em 1.2em;border-radius:999px;background:var(--raised);color:var(--muted);margin-right:auto;white-space:nowrap}
.ph-now{font-size:1.25em;padding:.55em 1.1em .55em .6em;border-radius:999px;background:var(--accent-soft);color:var(--light);display:inline-flex;gap:.2em;align-items:center}
.ph-now svg{width:1.9em;height:1.9em}
.ph-fab{width:4.6em;height:4.6em;border-radius:50%;background:var(--m-paper);color:var(--m-paper-ink);display:grid;place-items:center;flex:none}
.ph-fab svg{width:2.2em;height:2.2em}
/* capture sheet */
.ph.cap{background:var(--m-under)}
.ph-sheet{position:absolute;left:0;right:0;top:5em;bottom:0;border-radius:3.2em 3.2em 0 0;background:var(--m-sheet);padding:1.6em 2em}
.ph-bar{display:flex;justify-content:space-between}
.ph-gbtn{font-size:1.4em;padding:.55em 1.1em;border-radius:999px;background:var(--raised);border:1px solid var(--line-2);color:var(--muted)}
.ph-gbtn.hl{color:var(--light)}
.ph-name{font-family:var(--font);font-size:2.6em;font-weight:700;margin-top:1.1em!important;min-height:1.25em;white-space:nowrap}
.caret{display:inline-block;width:2px;height:1.05em;background:var(--light);vertical-align:-.15em;margin-left:1px}
.js .s-cap.live .caret{animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.ph-notes{font-size:1.4em;color:var(--m-ph);margin-top:.3em!important}
.ph-sec{font-size:.95em;letter-spacing:.15em;font-weight:600;color:var(--quiet);text-transform:uppercase;margin-top:2.3em!important}
.ph-sec.sm{margin-top:1.1em!important}
.ph-choices{display:flex;flex-wrap:wrap;gap:.6em;margin-top:1em}
.ph-choice{font-size:1.2em;padding:.55em .95em;border-radius:999px;border:1px solid var(--line);display:inline-flex;gap:.5em;align-items:center;white-space:nowrap;transition:border-color var(--move) var(--ease),background var(--move) var(--ease)}
.ph-choice.pick{border-color:var(--pick-b);background:var(--m-pick)}
.js .s-cap.typing-on .ph-choice.pick{border-color:var(--line);background:none}
.js .s-cap.typing-on .ph-choice.first{border-color:var(--pick-b);background:var(--m-pick)}
.js .s-cap.typing-on.typed .ph-choice.pick{border-color:var(--pick-b);background:var(--m-pick)}
.js .s-cap.typing-on.typed .ph-choice.first{border-color:var(--line);background:none}
.ph-seg{display:grid;grid-template-columns:1fr 1fr;gap:.7em;margin-top:1em}
.ph-seg span{font-size:1.2em;text-align:center;padding:.75em .4em;border-radius:1.3em;border:1px solid var(--line);color:var(--muted)}
.ph-seg .on{border-color:var(--pick-b);background:var(--m-pick);color:var(--text)}
.ph-hint{font-size:1.08em;color:var(--quiet);margin-top:1.3em!important;line-height:1.4}
.ph-picker{margin-top:1em;border-radius:1.8em;background:var(--sunk);padding:1.2em 1.6em 1em;display:grid;grid-template-columns:1fr 1fr;gap:.8em;text-align:center}
.ph-picker div{display:grid;gap:.25em}
.ph-picker b{font-size:1.9em;font-weight:500;background:var(--raised);border-radius:.6em;padding:.1em 0}
.ph-picker .f{font-size:1.5em;color:var(--m-ph)}
.ph-picker p{grid-column:1/-1;font-size:1.1em;color:var(--quiet);margin-top:.4em!important}
.js .s-phone .ph-card.a{animation-name:rise,litup;animation-duration:.9s,1.2s;animation-delay:.3s,1s}
.js .s-phone .ph-row.a{animation-name:rise;--dur:.7s}
@media (min-width:880px){.hero .phw{width:320px}}

/* planner notice card */
.hc{margin-top:24px}
.hc>div{background:var(--sunk);border:1px solid var(--line-2);border-radius:20px;padding:16px 18px}
.hc-top{display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:1.0625rem}
.hc-top span:first-child{display:inline-flex;align-items:center;gap:10px}
.hc i{width:9px;height:9px}
.hc-top .d{color:var(--quiet);font-weight:400;font-size:.9375rem}
.hc-why{display:grid;grid-template-columns:20px 1fr;gap:10px;margin-top:12px}
.hc-why svg{width:20px;height:20px;margin-top:2px}
.tile .hc-why p{margin:0;color:var(--text);font-size:.9375rem;line-height:1.4}
.tile .hc-why p.fix{color:var(--quiet);font-size:.875rem;margin-top:4px}
.hc-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.hc-btns span{font-size:.875rem;padding:8px 14px;border-radius:999px;font-weight:600}
.hc-btns .yes{background:var(--light);color:var(--on-accent)}
.hc-btns .no{border:1px solid var(--line-2);color:var(--muted);font-weight:500}

/* calendar strip */
.cal ul{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:8px}
.cal li{display:grid;grid-template-columns:3.5rem 1fr auto;align-items:center;gap:12px;padding:12px 16px;border-radius:16px;font-size:.9375rem}
.cal .tm{color:var(--quiet);font-variant-numeric:tabular-nums;font-size:.875rem}
.cal .busy{background:repeating-linear-gradient(-45deg,var(--surface) 0 6px,var(--sunk) 6px 12px);border:1px dashed var(--line-2);color:var(--muted)}
.cal .busy small{display:block;font-size:.75rem;color:var(--quiet)}
.cal .task{background:var(--plate);border:1px solid var(--line-2)}
.cal .task .tm{color:var(--light-deep)}
.cal .task .n{display:inline-flex;align-items:center;gap:10px}
.cal i{display:inline-block;width:8px;height:8px;border-radius:50%}
.cal .d{color:var(--quiet);font-size:.875rem}

/* review radar */
.s-radar{max-width:320px;margin-top:24px!important}
.s-radar svg{width:100%;height:auto;overflow:visible}
.s-radar text{font-size:11px;fill:var(--muted);font-family:var(--font)}
@keyframes grow{from{transform:scale(.2);opacity:0}}
.js .s-radar .rp{animation-name:grow;--dur:1.2s;transform-origin:130px 104px}
.js .s-radar .rd{animation-name:fade;--dur:.6s;--d:1s}

/* ---------- motion: scenes play once when they become visible ---------- */
.js .scene .a{animation-duration:var(--dur,.45s);animation-timing-function:var(--ease);animation-fill-mode:both;animation-delay:var(--d,0s)}
.js .scene:not(.live) .a{animation-play-state:paused}
@keyframes fade{from{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(20px)}}
@keyframes litup{from{border-color:var(--line);box-shadow:none}}
@keyframes chiplit{from{border-color:var(--line);box-shadow:none;color:var(--muted);background:var(--surface)}}

.js .s-compare .orow,.js .s-compare .omore{animation-name:fade;--dur:.6s}
.js .s-compare .card{animation-name:rise,litup;animation-duration:.9s,1.2s;animation-delay:1.1s,1.8s}
.js .s-compare .rest{animation-name:fade;--dur:.9s;--d:1.9s}
.js .s-hero .node{animation-name:fade}
.js .s-hero .glass{animation-name:fade;--dur:.9s}
.js .s-hero .card{animation-name:rise,litup;--dur:.9s,1.2s}
.js .s-hero .card{animation-duration:.9s,1.2s;animation-delay:.9s,1.5s}

@keyframes swirl{
  0%{opacity:0;transform:translate(var(--x0),var(--y0)) rotate(var(--r0))}
  12%{opacity:1}
  45%{transform:translate(var(--x1),var(--y1)) rotate(var(--r1))}
  100%{opacity:1;transform:none}
}
.js .s-head .chip{animation-name:swirl;--dur:2.6s}
.js .s-head .chip.lit{animation-name:swirl,chiplit;animation-duration:2.6s,.9s;animation-delay:0s,2.6s}

@keyframes out{0%,35%{opacity:1}60%,100%{opacity:0}}
@keyframes inn{0%,40%{opacity:0}65%,100%{opacity:1}}
@keyframes upTwo{0%,40%{transform:translateY(calc(var(--step) * 2))}100%{transform:none}}
@keyframes downTwo{0%,40%{transform:translateY(calc(var(--step) * -2))}100%{transform:none}}
.js .s-rank .la{animation-name:out;--dur:3.2s}
.js .s-rank .lb{animation-name:inn;--dur:3.2s}
.js .s-rank .mom{animation-name:upTwo,litup;animation-duration:3.2s,1s;animation-delay:0s,3.2s}
.js .s-rank .tax{animation-name:downTwo;--dur:3.2s}

@keyframes quiet{0%,15%{width:60%;opacity:.8}100%{width:16%;opacity:.35}}
@keyframes climb{0%,30%{transform:translateY(calc(var(--step) * 2))}45%,62%{transform:translateY(var(--step))}80%,100%{transform:none}}
@keyframes yieldA{0%,62%{transform:translateY(calc(var(--step) * -1))}80%,100%{transform:none}}
@keyframes yieldB{0%,30%{transform:translateY(calc(var(--step) * -1))}45%,100%{transform:none}}
.js .s-areas .f-people{animation-name:quiet;--dur:1.8s}
.js .s-areas .up{animation-name:climb,litup;animation-duration:4.2s,1s;animation-delay:.6s,4.8s}
.js .s-areas .ya{animation-name:yieldA;--dur:4.2s;--d:.6s}
.js .s-areas .yb{animation-name:yieldB;--dur:4.2s;--d:.6s}

@keyframes glide{0%,25%{transform:translateY(calc(-1 * var(--dist)))}100%{transform:none}}
.s-tomorrow .card{--dist:calc(4.25rem + 12px + 12px + 1.2rem + 12px + 8px)}
.js .s-tomorrow .card{animation-name:glide;--dur:2.8s}
.js .s-tomorrow .ghost{animation-name:fade;--dur:1.2s;--d:1.6s}

.js .s-watch .card{animation-name:rise,litup;animation-duration:.9s,1.2s;animation-delay:.3s,1s}
.js .s-watch .wt{animation-name:fade;--dur:.9s}


/* ---------- page motion: entrance + reveal on scroll ---------- */
.js .hero-text>*{animation:rise .8s var(--ease) both}
.js .hero-text>:nth-child(2){animation-delay:.08s}
.js .hero-text>:nth-child(3){animation-delay:.16s}
.js .hero-text>:nth-child(4){animation-delay:.24s}
.js .hero-text>:nth-child(5){animation-delay:.32s}
.js .hero-text>:nth-child(6){animation-delay:.4s}
.js .hero .phw{animation:phonein 1.1s var(--ease) .25s both}
@keyframes phonein{from{opacity:0;transform:translateY(40px) scale(.97)}}
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease) var(--d,0s),transform .7s var(--ease) var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}
.num span[aria-hidden]{transition:border-color .6s var(--ease) .35s,color .6s var(--ease) .35s,box-shadow .6s var(--ease) .35s}
.js .step-text.in .num span[aria-hidden]{border-color:var(--light-deep);color:var(--light);box-shadow:0 0 16px color-mix(in srgb,var(--light) 18%,transparent)}
.tile{transition:border-color var(--move) var(--ease),opacity .7s var(--ease) var(--d,0s),transform .7s var(--ease) var(--d,0s)}
.tile:hover{border-color:var(--line-2)}
@keyframes slidein{from{opacity:0;transform:translateX(36px)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--light) 0%,transparent)}40%{box-shadow:0 0 0 6px color-mix(in srgb,var(--light) 22%,transparent),0 0 24px color-mix(in srgb,var(--light) 25%,transparent)}100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--light) 0%,transparent)}}
@keyframes drop{from{opacity:0;transform:translateY(-28px) scale(.98)}}
@keyframes beam{from{transform:scaleY(0);opacity:0}}
.js .cal .busy{animation-name:fade;--dur:.6s}
.js .cal .busy:nth-child(3){--d:.25s}
.js .cal .task{animation-name:slidein;--dur:.9s;--d:.8s}
.js .hc>.a{animation-name:rise;--dur:.8s}
.js .hc .yes{animation-name:pulse;--dur:1.6s;--d:1.1s;animation-fill-mode:none}
.js .s-notif .notif{animation-name:drop;--dur:.8s;--d:.2s}
.s-endmark{margin:0 auto}
.js .s-endmark .end-mark rect{transform-box:fill-box;transform-origin:50% 100%;animation:beam 1.4s var(--ease) .3s both;animation-play-state:paused}
.js .s-endmark.live .end-mark rect{animation-play-state:running}
@media (prefers-reduced-motion:reduce){
  .js .hero-text>*,.js .hero .phw,.js .s-endmark .end-mark rect{animation:none!important}
  .js .reveal{opacity:1;transform:none;transition:none}
  .num span[aria-hidden],.tile{transition:none}
}

@media (prefers-reduced-motion:reduce){
  .scene .a,.scene .a *{animation:none!important}
  .holdcard,.holdcard .t{transition:none!important}
  .caret{animation:none!important}
  html{scroll-behavior:auto}
}
.scene.cal{margin:0;max-width:none}
.s-notif{margin:0 auto}
.scene.hc{max-width:none}

/* ---------- layout v3 ---------- */
#who .pains{margin-top:16px}
#who .who-end{max-width:520px;margin:24px auto 0;text-align:center}
.vs-grid{display:grid;gap:32px;max-width:1040px;margin:40px auto 0;align-items:center}
.vs-grid .s-compare,.vs-grid .vs{margin:0 auto}
@media (min-width:960px){.vs-grid{grid-template-columns:1fr 1.05fr;gap:48px}}
.devices{max-width:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:40px;padding:12px 0 8px}
.padw{container-type:inline-size;width:min(560px,88vw)}
.ph.pad{font-size:calc(100cqw / 56);aspect-ratio:4/3;border-radius:2.6em}
.pad .ph-status{padding:.4em 2.4em 0;height:3.2em}
.pad .ph-title{padding-top:.6em}
.pad-body{display:grid;grid-template-columns:1fr 1.05fr;gap:2.4em;padding:2em 2.4em;align-items:start}
.pad-list{position:relative;padding-left:2.4em}
.pad-list::before{content:"";position:absolute;left:.55em;top:0;bottom:-20em;width:1px;background:var(--line)}
.pad .ph-row::before{left:-1.73em}
.pad .ph-sep{padding-top:1.2em}
.pad .ph-card{margin-top:.4em}
.pad.ph::after{height:6em}
.js .devices .ph-card.a{animation-name:rise,litup;animation-duration:.9s,1.2s;animation-delay:.3s,1s}
.js .devices .ph-row.a{animation-name:rise;--dur:.7s}
.watch .wl{align-self:flex-start;padding-left:4px;font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--light-deep)}
.js .s-watch .wl,.js .devices .wl{animation-name:fade;--dur:.6s;--d:.2s}
.js .devices .watch .card{animation-name:rise,litup;animation-duration:.9s,1.2s;animation-delay:.6s,1.3s}
.js .devices .wt{animation-name:fade;--dur:.9s}
.lines{max-width:720px}
@media (min-width:760px){.lines{grid-template-columns:1fr 1fr;gap:20px 40px}.lines li{grid-template-columns:7rem 1fr}}
.duo{max-width:960px;margin:0 auto;display:grid;gap:16px}
@media (min-width:880px){.duo{grid-template-columns:1fr 1fr}}
.tile-h{font-size:1.625rem}
.duo .tile p{color:var(--muted);margin-top:8px}
.duo .more{margin-top:16px}
.duo .notif{margin:24px 0 0;max-width:none}
.ics{display:inline-block;margin-top:12px;font-size:.9375rem;color:var(--muted)}

/* ---------- v5: founder quote + mini tiles ---------- */
.quote-sec{padding-top:72px;padding-bottom:72px}
.quote{max-width:780px;margin:0 auto;text-align:center}
.quote blockquote{margin:0}
.quote .statement{margin-top:16px;font-family:var(--font);font-weight:600;font-size:clamp(1.375rem,1.05rem + 1.5vw,2.125rem);line-height:1.32;letter-spacing:-.01em;color:var(--text);text-wrap:balance}
.quote .q-b{color:var(--light)}
.quote figcaption{margin-top:24px;display:inline-flex;align-items:center;gap:8px;color:var(--quiet);font-size:.9375rem;text-align:left}
.quote figcaption svg{width:36px;height:36px;flex:none;margin:-6px -6px -2px -10px}
.minis{max-width:960px;margin:16px auto 0;display:grid;gap:16px}
@media (min-width:880px){.minis{grid-template-columns:repeat(3,1fr)}}
.tile.mini{padding:28px 24px}
.tile.mini h3{font-size:1.1875rem}
.tile.mini p{font-size:.9375rem}
.opts,.prio{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.opts span,.prio span{font-size:.8125rem;padding:6px 12px;border-radius:999px;border:1px solid var(--line-2);color:var(--muted)}
.opts .on{border-color:var(--pick-b);background:var(--m-pick);color:var(--text)}
.prio .p0{border-color:var(--pick-b);color:var(--light)}
.prio .p1{color:var(--text)}
.prio .p2{border-style:dashed;color:var(--quiet)}
.reps{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:6px}
.reps li{display:flex;justify-content:space-between;gap:12px;font-size:.8125rem;padding:8px 12px;border-radius:12px;background:var(--sunk);color:var(--text)}
.reps .r{color:var(--light-deep);text-align:right}
@media (min-width:760px){.lines{grid-template-columns:1fr 1fr}}
.reps li{flex-direction:column;gap:2px}
.reps .r{text-align:left}
/* v7 */
.cta-ics{color:var(--text)}
@media (max-width:600px){.cta .cta-ics{display:inline-block}}
.home-faq{max-width:640px;margin:40px auto 0}
.home-faq details p{color:var(--muted)}
.ph-float{justify-content:flex-end}
.cta-ics{text-decoration:underline;text-decoration-color:var(--edge);text-underline-offset:.25em}
/* live: App Store links */
.store{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 22px;border-radius:12px;background:var(--light);color:var(--on-accent);font-weight:600;font-family:var(--font);text-decoration:none;transition:background var(--fast) var(--ease),transform var(--fast) var(--ease)}
.store:hover{background:var(--core)}
.store:active{transform:scale(.98)}
.store-i{width:20px;height:20px;flex:none}
.close .store{margin-top:32px}
.top-dl{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--edge);font-size:.9375rem;font-weight:600;text-decoration:none;color:var(--text)}
.top-dl:hover{border-color:var(--light);color:var(--light)}
@media (max-width:600px){.top-r{gap:14px}.top-dl{height:32px;padding:0 12px}}
/* design review 26.10.: design system 2.0 alignment */
.label,.vs th,.ph-lab,.ph-sec,.watch .wl,.notif .hd{text-transform:none;letter-spacing:0}
.label,.vs th{font-size:.8125rem}
.ph-lab{font-size:1.05em}
.ph-sec{font-size:1em}
.hc-why{grid-template-columns:1fr}
#who .wrap{max-width:640px}
.mid-cta{display:flex;flex-direction:column;align-items:center;margin:72px auto 0;text-align:center}
.mid-cta .offer{margin-top:14px}
@media (max-width:600px){
  .mid-cta{margin-top:48px}
  .s-hold .hint,.s-hold .done,.s-hold p{text-align:center}
}

/* ---------- Tigr 2.0: icon colours, mark, two atmospheres ---------- */
:root{--pick-b:color-mix(in srgb,var(--light-deep) 75%,transparent)}
.ph-status{color:var(--text)}
.ph-icons{color:var(--muted)}
.ph-moon,.ph-moonnode{color:var(--light-deep)}
.heart{color:var(--light)}
.mk-c{stop-color:var(--mk-core)}
.mk-l{stop-color:var(--mk-light)}
.mk-n{fill:var(--mk-node);stroke:var(--mk-light)}
.mk-bg{fill:var(--mk-node)}

/* Light: Linen & Ink, follows the system setting */
@media (prefers-color-scheme:light){
  :root{
    --bg:#F1EADF;--surface:#FBF7EF;--raised:#F6F0E5;--sunk:#E8DED0;
    --line:#DDD1C0;--line-2:#C9B9A5;--edge:#968674;
    --text:#28231D;--muted:#685D51;--muted-r:#685D51;--quiet:#685D51;
    --light:#815B2F;--core:#6B4A25;--light-deep:#815B2F;--on-accent:#F5F1EB;--accent-soft:#EADBC4;
    --danger:#B54132;
    --a-work:#B07A33;--a-body:#5D8B6C;--a-people:#6479B0;--a-mind:#8E6890;
    --m-bg:#F1EADF;--m-head:#FBF7EF;--m-sheet:#FBF7EF;--m-under:#D8CDBE;--m-row:#3A322A;--m-ph:#A39684;--m-pick:#E8DED0;--m-paper:#28231D;--m-paper-ink:#F5F1EB;
    --mk-core:#815B2F;--mk-light:#A57A45;--mk-node:#F1EADF;
    --shadow:rgba(40,35,29,.16);
  }
  .ph-card.lit,.lit,.holdcard{box-shadow:0 0 0 1px color-mix(in srgb,var(--light) 18%,transparent),0 10px 28px rgba(40,35,29,.10)}
  .js .step-text.in .num span[aria-hidden]{box-shadow:none}
  .ph{box-shadow:0 0 0 .75em #1C1915,0 0 0 calc(.75em + 1px) #3A332B,0 3em 6em var(--shadow)}
}
/* things that stay dark in both modes: app icon, Apple Watch */
.dark-scope,.watch,.notif .ic{
  --bg:#17140F;--surface:#211C16;--raised:#29231B;--plate:#29231B;--sunk:#14110D;--line:#352D23;--line-2:#4A4235;--edge:#8A8276;
  --text:#F5F1EB;--muted:#ADA59A;--muted-r:#C9BDAF;--quiet:#948C81;
  --light:#FFE2AA;--core:#FFF7E2;--light-deep:#D6B47E;--on-accent:#17140F;
  --mk-core:#FFF7E2;--mk-light:#FFE2AA;--mk-node:#17140F;
  color:var(--text);
}
@media (prefers-color-scheme:light){
  .watch{background:#1C1915;border-color:#2E2923}
  .watch::after{background:#2E2923}
  .watch .card{box-shadow:var(--glow)}
}
@media (prefers-contrast:more) and (prefers-color-scheme:dark){:root{--muted:#D9D2C7;--quiet:#C9C1B5;--line:#5C544A;--edge:#B3AA9D}}
@media (prefers-contrast:more) and (prefers-color-scheme:light){:root{--muted:#4A4036;--quiet:#4A4036;--line:#B9A994;--edge:#6E604F}}

.brand-p{font-weight:400}