@charset "utf-8";
/* Chronaut – chronaut.app
   Design direction "Ruhe" (DESIGN-HANDOFF.md) carried over to the web.
   Brand tokens from DESIGN-Chronaut-Marke.md: Nachtblau only on brand surfaces
   (hero band, footer), never as a UI surface. */

/* ---------- Manrope (SIL OFL 1.1), self-hosted, latin subset ---------- */
@font-face{font-family:"Manrope";font-style:normal;font-weight:400;font-display:swap;
  src:url("manrope-latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Manrope";font-style:normal;font-weight:600;font-display:swap;
  src:url("manrope-latin-600-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Manrope";font-style:normal;font-weight:700;font-display:swap;
  src:url("manrope-latin-700-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Manrope";font-style:normal;font-weight:800;font-display:swap;
  src:url("manrope-latin-800-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ---------- Tokens (light) ---------- */
:root{
  color-scheme:light dark;

  --night:#131A3A;            /* brand only: hero band, footer */
  --night-line:#232E62;

  --bg:#F4F4F7;
  --surface:#FFFFFF;
  --surface-alt:#F8F8FD;
  --separator:#E7E8EF;
  --hairline:#F1F2F5;

  --ink:#14161A;
  --ink-2:#5F666F;
  --ink-3:#666D79;

  --accent:#5B56E0;
  --accent-pressed:#4B46CF;
  --accent-tint:#EEEDFB;
  --accent-ink:#312DA8;
  --accent-on-dark:#8F8BF0;
  --on-accent:#FFFFFF;

  --deleted:#A64E18;
  --deleted-tint:#FDEEE4;
  --created:#237A60;
  --created-tint:#E8F3EF;
  --progress:#237A60;         /* Erfolgsgrün, light rendering (brand green is the dark one) */
  --placeholder-bar:#D8DBE3;
  --control-border:#888E9A;   /* >=3:1 against surface and surfaceAlt (WCAG 1.4.11) */

  --cal-1:#2F9E7E;
  --cal-2:#E0824A;
  --cal-3:#8A5FA8;

  --shadow:0 1px 2px rgba(19,26,58,.05), 0 12px 32px -18px rgba(19,26,58,.22);
  /* Hairline around the device frames so they stay readable on the page bg. */
  --device-hairline:rgba(0,0,0,.08);
  /* The Mac screenshot has no bezel – its edge is drawn with drop-shadow,
     which spreads, so it needs a touch more alpha to read as a hairline. */
  --device-hairline-shot:rgba(0,0,0,.14);
  --radius-card:26px;
  --radius-tile:22px;
  --radius-control:18px;
  --radius-inner:14px;

  --measure:66ch;
  --wrap:1120px;
  --gutter:20px;

  /* Motion vocabulary – one set of curves for the whole site */
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
  --dur-press:120ms;
  --dur-hover:220ms;
  --dur-reveal:420ms;
  --dur-chrome:280ms;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0F1014;
    --surface:#191B21;
    --surface-alt:#15171C;
    --separator:#272A33;
    --hairline:#23252C;

    --ink:#F2F3F6;
    --ink-2:#A2A8B3;
    --ink-3:#8C93A3;

    --accent-tint:#24243A;
    --accent-ink:#A9A5F7;

    --deleted:#E99A63;
    --deleted-tint:#2B1C12;
    --created:#43B795;
    --created-tint:#17261F;
    --progress:#43B795;
    --placeholder-bar:#353945;
    --control-border:#7A8090;

    --cal-1:#43B795;
    --cal-2:#E99A63;
    --cal-3:#A37CC0;

    --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -18px rgba(0,0,0,.7);
    --device-hairline:rgba(255,255,255,.14);
    --device-hairline-shot:rgba(255,255,255,.28);
  }
}
:root[data-theme="dark"]{
  --bg:#0F1014;
  --surface:#191B21;
  --surface-alt:#15171C;
  --separator:#272A33;
  --hairline:#23252C;
  --ink:#F2F3F6;
  --ink-2:#A2A8B3;
  --ink-3:#8C93A3;
  --accent-tint:#24243A;
  --accent-ink:#A9A5F7;
  --deleted:#E99A63;
  --deleted-tint:#2B1C12;
  --created:#43B795;
  --created-tint:#17261F;
  --progress:#43B795;
  --placeholder-bar:#353945;
  --control-border:#7A8090;
  --cal-1:#43B795;
  --cal-2:#E99A63;
  --cal-3:#A37CC0;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -18px rgba(0,0,0,.7);
  --device-hairline:rgba(255,255,255,.14);
  --device-hairline-shot:rgba(255,255,255,.28);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Manrope",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;}
a{color:var(--accent-ink);text-decoration-thickness:1px;text-underline-offset:3px;}
a:hover{color:var(--accent);}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px;}
.night :focus-visible{outline-color:#B9B6F6;}

h1,h2,h3{text-wrap:balance;margin:0;letter-spacing:-0.025em;line-height:1.12;font-weight:800;}
h1{font-size:clamp(2.1rem,1.35rem + 3.1vw,3.6rem);}
h2{font-size:clamp(1.65rem,1.25rem + 1.7vw,2.5rem);}
h3{font-size:1.125rem;letter-spacing:-0.01em;line-height:1.3;font-weight:700;}
p{margin:0;}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);}
.skip{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}
a.skip:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;clip-path:none;white-space:normal;display:inline-block;}
.skip:focus{z-index:50;background:var(--surface);color:var(--ink);padding:13px 20px;border-radius:12px;margin:12px 0 0 12px;}

.eyebrow{
  font-size:.8125rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-2);margin:0 0 14px;
}
.lede{font-size:clamp(1.05rem,1rem + .35vw,1.25rem);color:var(--ink-2);max-width:var(--measure);}

section{padding-block:clamp(56px,7vw,104px);}
.section-head{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(28px,4vw,48px);}

/* ---------- Brand band (Nachtblau) ---------- */
.night{
  background:var(--night);
  color:#EDEEF6;
  position:relative;
  overflow:hidden;
}
.night::after{ /* faint orbit, echoes the icon geometry */
  content:"";position:absolute;right:-180px;top:-200px;width:620px;height:620px;
  border:1px solid rgba(143,139,240,.16);border-radius:50%;
  border-left-color:transparent;transform:rotate(18deg);pointer-events:none;
  z-index:0;
}
/* Content above the orbit, so it never cuts through the phone in the hero */
.night > .wrap{position:relative;z-index:1;}
.night a{color:#B9B6F6;}
.night a:hover{color:#D6D4FA;}
/* The night band is dark in both colour schemes, so a device frame sitting on
   it always takes the light hairline — not only in dark mode. */
.night .phone,.night .mac{--device-hairline:rgba(255,255,255,.14);--device-hairline-shot:rgba(255,255,255,.28);}

/* Header */
.masthead{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-block:22px 0;}
.logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none;}
.logo img.mark{width:34px;height:34px;border-radius:9px;display:block;}
.logo img.word{height:21px;width:auto;display:block;}
.nav{display:flex;align-items:center;gap:22px;flex-wrap:wrap;font-size:.9375rem;font-weight:600;}
.nav a{color:#C6C9DC;text-decoration:none;padding-block:7px;}
.nav a:hover{color:#fff;text-decoration:underline;}
.langswitch{
  display:inline-flex;gap:2px;background:rgba(255,255,255,.08);border-radius:999px;padding:3px;
  flex:none;position:relative;z-index:2;
}
.langswitch a{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:38px;padding:5px 12px;border-radius:999px;
  color:#C6C9DC;text-decoration:none;font-size:.875rem;font-weight:700;
  -webkit-tap-highlight-color:rgba(143,139,240,.3);touch-action:manipulation;
}
.langswitch a[aria-current="page"]{background:#fff;color:var(--night);}
/* Fingers need 44x44 - the switcher is the one control that must never miss. */
@media (pointer:coarse){.langswitch a{min-height:44px;}}

/* Hero */
.hero{display:grid;gap:clamp(36px,5vw,64px);align-items:center;padding-block:clamp(46px,6vw,78px) clamp(56px,7vw,86px);}
@media (min-width:900px){.hero{grid-template-columns:minmax(0,1fr) auto;}}
.hero h1{color:#fff;}
/* Hero headline: second line in the on-dark accent (5.76:1 on --night);
   forced onto its own line from 640px up, natural wrap below. */
.hero h1 .hero-line--accent{color:var(--accent-on-dark);}
@media (min-width:640px){.hero h1 .hero-line{display:block;}}
.hero-eyebrow{
  font-size:.8125rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#9C98F2;margin:0 0 12px;
}
.hero .sub{margin-top:20px;font-size:clamp(1.05rem,1rem + .4vw,1.28rem);color:#BFC3D8;max-width:36ch;}
.hero .promise{
  margin-top:26px;display:flex;align-items:flex-start;gap:10px;
  font-size:.9375rem;font-weight:700;color:#8FE0C6;max-width:42ch;
}
.hero .promise .dot{width:9px;height:9px;border-radius:50%;background:#43B795;flex:none;margin-top:8px;}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:32px;}

.badge-soon{
  display:inline-flex;align-items:center;gap:12px;
  border:1px solid rgba(255,255,255,.38);border-radius:14px;
  padding:9px 18px 9px 14px;color:#DFE1EE;text-decoration:none;
  background:rgba(255,255,255,.04);
}
.badge-soon .glyph{width:21px;height:26px;flex:none;display:block;}
.badge-soon small{display:block;font-size:.6875rem;letter-spacing:.09em;text-transform:uppercase;color:#9AA0BF;}
.badge-soon strong{display:block;font-size:.9375rem;font-weight:700;}
/* Official Google Play badge (unaltered, transparent padding trimmed); same height as .badge-soon.
   Not in use until the Play launch – see the comment in index.html. */
.badge-play{display:inline-block;line-height:0;border-radius:14px;}
.badge-play img{display:block;height:calc(20px + 2.6rem);width:auto;}
/* Both "soon" badges side by side, always the same width */
.badge-row{display:inline-grid;grid-template-columns:1fr 1fr;gap:14px;}
.badge-row .badge-soon{min-width:0;}
.badge-soon .glyph--line{width:22px;height:26px;}
@media (max-width:420px){
  .badge-row{display:grid;width:100%;gap:10px;}
  .badge-row .badge-soon{padding:9px 10px;gap:9px;}
  .badge-row .badge-soon small{letter-spacing:.04em;}
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:0;border-radius:var(--radius-control);
  padding:15px 26px;min-height:52px;
  font:inherit;font-weight:700;font-size:1rem;letter-spacing:-0.01em;
  cursor:pointer;text-decoration:none;
  background:var(--accent);color:var(--on-accent);
  transition:background .15s ease,transform .1s ease;
}
.btn:hover{background:var(--accent-pressed);color:#fff;}
.btn:active{transform:scale(.985);}
.night a.btn{color:var(--on-accent);}
.btn--light,.night a.btn--light{background:#fff;color:var(--night);}
.btn--light:hover,.night a.btn--light:hover{background:#E4E3FB;color:var(--night);}
.btn--block{width:100%;}
.btn[disabled]{opacity:.6;cursor:progress;}

/* ---------- Cards ---------- */
.card{
  background:var(--surface);border-radius:var(--radius-card);
  padding:clamp(22px,2.4vw,30px);box-shadow:var(--shadow);
}
.grid{display:grid;gap:clamp(14px,1.6vw,20px);}
@media (min-width:640px){.grid--2{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:640px){.grid--3{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:980px){.grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}}

.tile-icon{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none;
  background:var(--accent-tint);color:var(--accent-ink);
}
.tile-icon svg{width:19px;height:19px;display:block;}
.tile-icon--green{background:var(--created-tint);color:var(--created);}
.tile-icon--warm{background:var(--deleted-tint);color:var(--deleted);}

/* Steps: a real sequence, so the numbers carry information */
.steps{counter-reset:step;}
.step{display:flex;flex-direction:column;gap:14px;}
.step .n{counter-increment:step;font-size:.8125rem;font-weight:800;letter-spacing:.1em;}
.step .n::before{content:"0" counter(step);color:var(--accent-ink);}
.step h3{margin-top:2px;}
.step p{color:var(--ink-2);}

.feature{display:flex;flex-direction:column;gap:12px;}
.feature p{color:var(--ink-2);font-size:.9688rem;}

/* ---------- Pricing ---------- */
.table-scroll{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius-card);background:var(--surface);box-shadow:var(--shadow);}
table.plans{border-collapse:collapse;width:100%;min-width:640px;font-size:.9375rem;}
table.plans th,table.plans td{position:relative;padding:13px 16px;text-align:left;border-bottom:1px solid var(--hairline);vertical-align:top;}
table.plans thead th{border-bottom:1px solid var(--separator);vertical-align:bottom;}
table.plans thead th:not(:first-child){text-align:center;padding:24px 16px 18px;}
table.plans col.c-feat{width:40%;}
table.plans th:first-child{width:40%;}
table.plans tbody th{font-weight:600;color:var(--ink);}
table.plans td{text-align:center;color:var(--ink-2);font-variant-numeric:tabular-nums;}
table.plans tr:last-child th,table.plans tr:last-child td{border-bottom:0;}
.plan-name{display:block;font-size:1.0625rem;font-weight:800;color:var(--ink);letter-spacing:-0.01em;}
.plan-price{display:block;font-size:1.5rem;font-weight:800;color:var(--ink);letter-spacing:-0.02em;margin-top:6px;}
.plan-note{display:block;font-size:.8125rem;font-weight:600;color:var(--ink-2);margin-top:4px;}
.plan-pre{display:block;font-size:.75rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-ink);}
.col-hi{background:var(--accent-tint);}
.yes{color:var(--created);font-weight:700;}
.no{color:var(--ink-2);}
.scrollhint{display:none;font-size:.8125rem;font-weight:700;color:var(--ink-2);margin-bottom:10px;}
@media (max-width:720px){
  .scrollhint{display:block;}
  table.plans{min-width:600px;font-size:.875rem;}
  table.plans th:first-child{width:46%;}
  table.plans th,table.plans td{padding:11px 12px;}
}
.table-scroll:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}
.plans-foot{margin-top:18px;font-size:.875rem;color:var(--ink-2);max-width:var(--measure);}

/* ---------- Privacy ---------- */
.privacy{background:var(--accent-tint);border-radius:var(--radius-card);padding:clamp(24px,3vw,40px);}
.privacy h2{margin-bottom:10px;}
.privacy ul{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:14px;}
@media (min-width:760px){.privacy ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 30px;}}
.privacy li{display:flex;gap:12px;align-items:flex-start;font-size:.9688rem;color:var(--ink);}
.privacy li svg{width:19px;height:19px;flex:none;margin-top:3px;color:var(--created);}

/* ---------- Story ---------- */
.story p{max-width:var(--measure);color:var(--ink-2);margin-top:18px;}
.story .quote{
  margin:0;max-width:calc(var(--measure) + 3ch);
  border-left:3px solid var(--accent-ink);
  padding:2px 0 2px clamp(18px,3vw,30px);
}
.story .quote p{
  margin-top:16px;color:var(--ink);
  font-size:clamp(1.0625rem,1rem + .25vw,1.1875rem);line-height:1.62;
}
.story .quote p:first-of-type{margin-top:0;font-size:clamp(1.25rem,1.1rem + .6vw,1.5rem);font-weight:700;letter-spacing:-0.015em;line-height:1.3;}
.story .quote .quote-last{font-weight:700;}
.story .quote footer{margin-top:20px;font-size:.9375rem;color:var(--ink-2);}
.story .quote cite{font-style:normal;font-weight:700;color:var(--accent-ink);}
.story .story-task{margin-top:30px;}
.story .story-after{margin-top:18px;font-size:1.0625rem;color:var(--ink);font-weight:600;}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:10px;max-width:800px;}
details.qa{background:var(--surface);border-radius:var(--radius-inner);box-shadow:var(--shadow);}
details.qa summary{
  list-style:none;cursor:pointer;padding:18px 20px;
  font-weight:700;font-size:1.0313rem;letter-spacing:-0.01em;
  display:flex;gap:14px;align-items:flex-start;justify-content:space-between;
}
details.qa summary::-webkit-details-marker{display:none;}
details.qa summary::after{content:"+";font-size:1.375rem;line-height:1;color:var(--accent-ink);flex:none;font-weight:700;}
details.qa[open] summary::after{content:"–";}
details.qa .a{padding:0 20px 20px;color:var(--ink-2);max-width:var(--measure);}
details.qa .a p + p{margin-top:12px;}

/* ---------- Signup form ---------- */
.signup{background:var(--surface);border-radius:var(--radius-card);padding:clamp(24px,3vw,40px);box-shadow:var(--shadow);}
.signup .lede{margin-top:12px;}
.form{margin-top:26px;display:grid;gap:18px;max-width:520px;}
.field label{display:block;font-size:.8125rem;font-weight:700;color:var(--ink-2);margin-bottom:7px;}
.field input[type=email]{
  width:100%;font:inherit;font-size:1rem;color:var(--ink);
  background:var(--surface-alt);border:1px solid var(--control-border);
  border-radius:var(--radius-inner);padding:14px 16px;min-height:52px;
}
.field input[type=email]::placeholder{color:var(--ink-3);}
.field input[type=email]:focus{border-color:var(--accent);}
fieldset{border:0;margin:0;padding:0;}
fieldset legend{font-size:.8125rem;font-weight:700;color:var(--ink-2);margin-bottom:9px;padding:0;}
.checks{display:flex;flex-wrap:wrap;gap:9px;}
.check{display:inline-flex;align-items:center;gap:9px;background:var(--surface-alt);border:1px solid var(--control-border);
  border-radius:999px;padding:9px 16px 9px 13px;min-height:44px;cursor:pointer;font-size:.9375rem;font-weight:600;}
.check input{width:18px;height:18px;accent-color:var(--accent);margin:0;}
.check:has(input:checked){background:var(--accent-tint);border-color:var(--accent);color:var(--accent-ink);}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.fineprint{font-size:.8125rem;color:var(--ink-2);max-width:52ch;}
.formnote{border-radius:var(--radius-inner);padding:14px 16px;font-size:.9375rem;font-weight:600;}
.formnote[data-tone=success]{background:var(--created-tint);color:var(--created);}
.formnote[data-tone=error]{background:var(--deleted-tint);color:var(--deleted);}

/* ---------- Phone mockups (rendered UI, not screenshots) ---------- */
.phone{
  position:relative;
  width:296px;max-width:100%;flex:none;
  /* radii follow the real device: 62pt of a 402pt-wide screen */
  background:#0B0C10;border-radius:52px;padding:10px;
  box-shadow:0 0 0 1px var(--device-hairline), 0 2px 3px rgba(19,26,58,.2), 0 40px 70px -40px rgba(19,26,58,.6);
}
.phone .screen{
  background:var(--bg);border-radius:42px;overflow:hidden;
  /* the app itself ships SF Pro / system – keep the mockups honest */
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,"Segoe UI",sans-serif;
  font-size:13px;line-height:1.35;color:var(--ink);
  letter-spacing:-0.005em;
  display:flex;flex-direction:column;min-height:548px;
}
.phone .body{flex:1;}
.phone .statusbar{display:flex;justify-content:space-between;align-items:center;padding:12px 20px 4px;font-size:11px;font-weight:600;color:var(--ink);}
.phone .statusbar .sig{display:flex;gap:3px;align-items:flex-end;}
.phone .statusbar .sig i{display:block;width:3px;background:var(--ink);border-radius:1px;}
.phone .body{padding:8px 14px 16px;display:flex;flex-direction:column;gap:11px;}
.phone .h{font-size:22px;font-weight:700;letter-spacing:-0.03em;margin:4px 0 0;}
.phone .sub{font-size:12px;color:var(--ink-2);}
.pcard{background:var(--surface);border-radius:20px;padding:14px;}
.pcard--flush{padding:0;overflow:hidden;}
.prow{display:flex;gap:11px;align-items:center;padding:11px 14px;}
.prow + .prow{border-top:1px solid var(--hairline);}
.prow .txt{min-width:0;flex:1;display:block;}
.prow .t{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.prow .s{display:block;font-size:11px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ptile{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;font-size:14px;font-weight:700;}
.ptile--del{background:var(--deleted-tint);color:var(--deleted);}
.ptile--mod{background:var(--accent-tint);color:var(--accent-ink);}
.ptile--new{background:var(--created-tint);color:var(--created);}
.pdot{width:9px;height:9px;border-radius:50%;flex:none;}
.pchip{display:inline-flex;align-items:center;font-size:10px;font-weight:700;border-radius:999px;padding:3px 9px;white-space:nowrap;}
.pchip--del{background:var(--deleted-tint);color:var(--deleted);}
.pchip--mod{background:var(--accent-tint);color:var(--accent-ink);}
.pchip--ok{background:var(--created-tint);color:var(--created);}
.pgroup{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 14px 9px;font-size:12px;font-weight:700;color:var(--ink-2);}
.pgroup > span:first-child{white-space:nowrap;}
.pgroup > span:last-child{white-space:nowrap;text-align:right;}
.pbtn{
  display:flex;align-items:center;justify-content:center;gap:7px;
  background:var(--accent);color:#fff;border-radius:15px;padding:13px;font-size:14px;font-weight:700;
}
.pbtn--ink{background:var(--ink);color:var(--bg);}
.pbtn svg{width:16px;height:16px;flex:none;display:block;}
.btn svg{width:18px;height:18px;flex:none;}
.pbars{display:flex;gap:5px;margin-top:12px;}
.pbars i{display:block;height:7px;border-radius:4px;flex:1;background:var(--progress);}
.pbars i.off{background:var(--separator);}
.pbig{font-size:21px;font-weight:700;letter-spacing:-0.03em;line-height:1.2;}
.pmeta{font-size:11px;color:var(--ink-2);margin-top:9px;}
.pstat{display:flex;gap:9px;}
.pstat > div{flex:1;background:var(--surface);border-radius:17px;padding:12px;}
.pstat .v{font-size:19px;font-weight:700;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;}
.pstat .k{font-size:11px;color:var(--ink-2);}
.pdiff{display:flex;flex-direction:column;gap:9px;}
.pdiff .lbl{font-size:11px;font-weight:600;color:var(--ink-2);}
.pdiff .old{font-size:12.5px;color:var(--ink-2);text-decoration:line-through;}
.pdiff .new{font-size:12.5px;font-weight:600;color:var(--accent-ink);background:var(--accent-tint);border-radius:8px;padding:2px 8px;display:inline-block;margin-top:2px;}
.ptabs{display:flex;justify-content:space-around;border-top:1px solid var(--hairline);background:var(--surface);padding:9px 0 13px;font-size:9.5px;font-weight:600;color:var(--ink-2);}
.ptabs span{display:flex;flex-direction:column;align-items:center;gap:3px;}
.ptabs span.on{color:var(--accent-ink);}
.ptabs b{display:block;width:15px;height:15px;border-radius:4px;background:currentColor;opacity:.85;}

.screens{display:flex;gap:clamp(20px,4vw,52px);flex-wrap:wrap;justify-content:center;align-items:flex-start;}
.shot{display:flex;flex-direction:column;align-items:center;gap:16px;max-width:320px;}
.shot figcaption{font-size:.9063rem;color:var(--ink-2);text-align:center;max-width:30ch;}
.shot figcaption b{color:var(--ink);font-weight:700;display:block;}
.hero .phone{margin-inline:auto;}

/* ---------- Footer ---------- */
footer.night{padding-block:48px 40px;}
footer.night::after{display:none;}
.foot{display:flex;flex-wrap:wrap;gap:24px 40px;justify-content:space-between;align-items:flex-start;}
.foot p{font-size:.875rem;color:#9AA0BF;max-width:40ch;}
.foot p.foot-tm{font-size:.75rem;max-width:60ch;}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:.9063rem;font-weight:600;}
.foot nav a{color:#C6C9DC;text-decoration:none;padding-block:7px;}
.foot nav a:hover{color:#fff;text-decoration:underline;}
.foot .logo img.word{height:19px;}



/* ---------- Legal placeholder pages ---------- */
.legal{max-width:var(--measure);}
.legal h2{margin-top:40px;font-size:1.375rem;}
.legal p,.legal li{color:var(--ink-2);margin-top:14px;}
.legal .todo{
  background:var(--deleted-tint);color:var(--deleted);border-radius:var(--radius-inner);
  padding:16px 18px;font-weight:600;font-size:.9375rem;margin-top:24px;
}

@media (max-width:600px){
  .nav{gap:8px 16px;font-size:.875rem;}
  .langswitch a{padding:5px 10px;}
  .masthead{gap:12px;padding-block:18px 0;}
  .logo img.word{height:19px;}
}



/* ---------- Utilities replacing former inline styles (strict CSP) ---------- */
.mt-9{margin-top:9px;}
.mt-14{margin-top:14px;}
.mt-18{margin-top:18px;}
.mt-20{margin-top:20px;}
.mt-26{margin-top:26px;}
.ml-2{margin-left:2px;}
.ml-4{margin-left:4px;}
.ta-c{text-align:center;}
.eyebrow--hero{color:#9AA0BF;}
.lede--ink{color:var(--ink);}
.sub--back{color:var(--accent-ink);font-weight:600;}
.pdot--1{background:var(--cal-1);}
.pdot--2{background:var(--cal-2);}
.pdot--3{background:var(--cal-3);}
.pdot--inline{display:inline-block;vertical-align:middle;margin-right:6px;}
.sig i:nth-child(1){height:5px;}
.sig i:nth-child(2){height:7px;}
.sig i:nth-child(3){height:9px;}
.sig i:nth-child(4){height:11px;}
.masthead--legal{padding-bottom:22px;}
.wrap--legal{padding-block:clamp(40px,6vw,72px);}
.wrap--note{padding-block:clamp(56px,9vw,110px);}
.wrap--note-sm{padding-block:64px;}
.card--note{max-width:600px;margin-inline:auto;}
.card--note-sm{max-width:560px;}
.note-h{font-size:1.75rem;margin-top:18px;}
.note-h-sm{font-size:1.5rem;}

/* ---------- Pricing table: stacked cards below 640px ---------- */
@media (max-width:639px){
  .table-scroll{overflow-x:visible;background:none;box-shadow:none;border-radius:0;}
  table.plans{min-width:0;width:100%;display:block;font-size:.9375rem;}
  table.plans colgroup{display:none;}
  table.plans thead,table.plans tbody,table.plans tr,
  table.plans th,table.plans td{display:block;width:auto;}
  table.plans thead th:first-child{display:none;}
  table.plans tr{
    background:var(--surface);border-radius:var(--radius-card);box-shadow:var(--shadow);
    padding:6px 4px;margin-bottom:14px;
  }
  table.plans thead tr{padding-bottom:14px;}
  table.plans thead th,table.plans th,table.plans td{
    border-bottom:1px solid var(--hairline);padding:11px 16px;text-align:left;
  }
  table.plans thead th:not(:first-child){text-align:left;padding:14px 16px;}
  table.plans tr>*:last-child{border-bottom:0;}
  table.plans tbody th{
    font-size:1.0625rem;font-weight:800;color:var(--ink);
    border-bottom:1px solid var(--separator);padding-bottom:12px;
  }
  table.plans tbody td{
    display:flex;justify-content:space-between;align-items:baseline;gap:16px;
    text-align:right;color:var(--ink-2);
  }
  table.plans tbody td::before{
    content:attr(data-plan);text-align:left;font-weight:600;color:var(--ink);
  }
  table.plans .col-hi{background:var(--accent-tint);border-radius:var(--radius-inner);}
  table.plans thead .col-hi{padding-block:16px;}
}

/* =====================================================================
   v2 — sticky header, scroll reveals, micro-interactions, undo demo,
   screenshot slots. Everything here animates transform/opacity only and
   has a reduced-motion answer at the bottom of this file.
   ===================================================================== */

/* ---------- Sticky, shrinking header ---------- */
.site-header{
  position:sticky;top:0;z-index:40;
  background:var(--night);
  border-bottom:1px solid transparent;
  transition:background var(--dur-chrome) var(--ease-out),
             border-color var(--dur-chrome) var(--ease-out);
}
.site-header .masthead{padding-block:20px;transition:padding-block var(--dur-chrome) var(--ease-out);}
.site-header .logo img.mark{
  width:34px;height:34px;
  transition:width var(--dur-chrome) var(--ease-out),height var(--dur-chrome) var(--ease-out);
}
.site-header .logo img.word{height:21px;transition:height var(--dur-chrome) var(--ease-out);}
.site-header.is-scrolled{
  background:rgba(19,26,58,.86);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  backdrop-filter:saturate(180%) blur(16px);
  border-bottom-color:rgba(143,139,240,.24);
}
.site-header.is-scrolled .masthead{padding-block:9px;}
.site-header.is-scrolled .logo img.mark{width:27px;height:27px;}
.site-header.is-scrolled .logo img.word{height:17px;}
.site-header .nav a{position:relative;}
.site-header .nav a:hover{text-decoration:none;color:#fff;}
.site-header .nav > a::after{
  content:"";position:absolute;left:2px;right:2px;bottom:0;height:2px;border-radius:2px;
  background:#8F8BF0;transform:scaleX(0);transform-origin:center;
  transition:transform var(--dur-hover) var(--ease-out);
}
.site-header .nav > a:hover::after,
.site-header .nav > a.is-active::after{transform:scaleX(1);}
.site-header .nav > a.is-active{color:#fff;}
.langswitch a{transition:background var(--dur-hover) var(--ease-out),color var(--dur-hover) var(--ease-out);}
/* Below the desktop breakpoint the header is two rows at the top of the page
   and collapses to a single compact bar as soon as you scroll. */
@media (max-width:719px){
  .site-header .masthead{flex-wrap:wrap;row-gap:0;align-items:center;padding-block:12px;}
  .site-header .logo{order:1;margin-right:auto;}
  .site-header .langswitch{order:2;}
  .site-header:not(.has-menu) .nav{
    order:3;flex-basis:100%;flex-wrap:nowrap;gap:20px;
    overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
    max-height:42px;opacity:1;
    -webkit-mask-image:linear-gradient(to right,#000 86%,transparent);
    mask-image:linear-gradient(to right,#000 86%,transparent);
    transition:max-height var(--dur-chrome) var(--ease-out),opacity 170ms var(--ease-out);
  }
  .site-header:not(.has-menu) .nav::-webkit-scrollbar{display:none;}
  .site-header:not(.has-menu) .nav a{white-space:nowrap;}
  .site-header.is-scrolled .masthead{padding-block:8px;}
  /* Only the section nav collapses. The language switcher stays in the bar,
     full size and tappable, whether the header is shrunk or not. */
  .site-header:not(.has-menu).is-scrolled .nav{max-height:0;opacity:0;overflow:hidden;pointer-events:none;}
  .site-header .langswitch,
  .site-header.is-scrolled .langswitch{
    max-height:none;opacity:1;overflow:visible;pointer-events:auto;
  }
  .site-header .langswitch a{min-height:44px;}
  section[id],main[id]{scroll-margin-top:60px;}
}

/* ---------- Scroll reveals (once, short, staggered) ---------- */
.reveal{
  opacity:0;transform:translateY(16px);
  transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out);
}
.reveal.is-in{opacity:1;transform:none;}
.stagger > *{
  opacity:0;transform:translateY(16px);
  transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out);
}
.stagger.is-in > *{opacity:1;transform:none;}
.stagger.is-in > *:nth-child(2){transition-delay:55ms;}
.stagger.is-in > *:nth-child(3){transition-delay:110ms;}
.stagger.is-in > *:nth-child(4){transition-delay:165ms;}
.stagger.is-in > *:nth-child(5){transition-delay:200ms;}
.stagger.is-in > *:nth-child(6){transition-delay:230ms;}
.stagger.is-in > *:nth-child(7){transition-delay:255ms;}
.stagger.is-in > *:nth-child(8){transition-delay:275ms;}
/* Without JS nothing must stay invisible. */
.no-js .reveal,.no-js .stagger > *{opacity:1;transform:none;}

/* ---------- Hero lockup with a slow rewinding orbit ---------- */
.hero-mark{
  position:relative;display:inline-grid;place-items:center;
  width:78px;height:78px;margin-bottom:24px;
}
.hero-mark img{width:48px;height:48px;border-radius:13px;display:block;}
.hero-mark::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1.5px dashed rgba(143,139,240,.55);border-top-color:transparent;
}
.hero-mark--spin::before{animation:orbit-rewind 22s linear infinite;}
@keyframes orbit-rewind{from{transform:rotate(360deg);}to{transform:rotate(0deg);}}

/* ---------- Press and hover states ---------- */
.btn{transition:background var(--dur-hover) ease,transform var(--dur-press) var(--ease-out),box-shadow var(--dur-hover) var(--ease-out);}
.btn:active{transform:scale(.98);}
.badge-soon{transition:border-color var(--dur-hover) ease,background var(--dur-hover) ease;}
.card{transition:transform var(--dur-hover) var(--ease-out),box-shadow var(--dur-hover) var(--ease-out);}
details.qa summary{transition:color var(--dur-hover) ease;}
details.qa summary::after{transition:transform var(--dur-hover) var(--ease-out);}
details.qa[open] summary::after{content:"+";transform:rotate(45deg);}
.check{transition:transform var(--dur-press) var(--ease-out),background var(--dur-hover) ease,border-color var(--dur-hover) ease;}
.check:active{transform:scale(.98);}
@media (hover:hover) and (pointer:fine){
  .card:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(19,26,58,.07),0 24px 48px -24px rgba(19,26,58,.34);}
  .btn:hover{transform:translateY(-1px);}
  .badge-soon:hover{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.09);}
  details.qa summary:hover{color:var(--accent-ink);}
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .card:hover{box-shadow:0 2px 4px rgba(0,0,0,.5),0 24px 48px -24px rgba(0,0,0,.85);}
}

/* ---------- The undo demonstration ---------- */
.tt{
  background:var(--surface);border-radius:var(--radius-card);box-shadow:var(--shadow);
  padding:clamp(18px,2.4vw,28px);
  display:grid;gap:clamp(16px,2.4vw,28px);
}
@media (min-width:820px){.tt{grid-template-columns:minmax(0,1.7fr) minmax(210px,.9fr);align-items:start;}}
.tt-date{font-size:.8125rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-bottom:12px;}
.tt-list{list-style:none;margin:0;padding:0;display:grid;gap:8px;}
.tt-slot{display:flex;align-items:stretch;gap:14px;position:relative;min-height:62px;}
.tt-time{
  flex:none;width:52px;padding-top:15px;font-size:.8125rem;font-weight:700;color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}
.tt-ev{
  flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px;
  border-radius:var(--radius-inner);padding:11px 16px;
  background:var(--accent-tint);border-left:3px solid var(--accent-ink);
}
.tt-ev b{font-size:.9375rem;font-weight:700;color:var(--ink);}
.tt-ev i{font-style:normal;font-size:.8125rem;color:var(--ink-2);}
.tt-ev--fam{background:var(--created-tint);border-left-color:var(--created);}
.tt-ev--target{position:relative;z-index:1;}
.tt-gap{
  position:absolute;inset:0 0 0 66px;opacity:0;
  border:1.5px dashed var(--control-border);border-radius:var(--radius-inner);
  display:flex;align-items:center;padding-left:16px;
  font-size:.8125rem;font-weight:700;color:var(--ink-3);
}
.tt-side{display:flex;flex-direction:column;gap:14px;justify-content:center;}
.tt-log{position:relative;min-height:54px;}
.tt-line{
  position:absolute;inset:0;opacity:0;
  display:flex;gap:10px;align-items:flex-start;
  border-radius:var(--radius-inner);padding:11px 14px;font-size:.875rem;font-weight:600;line-height:1.35;
}
.tt-line--idle{background:var(--surface-alt);color:var(--ink-2);opacity:1;}
.tt-line--del{background:var(--deleted-tint);color:var(--deleted);opacity:0;}
.tt-line--ok{background:var(--created-tint);color:var(--created);}
.tt-line svg{width:17px;height:17px;flex:none;margin-top:1px;}
.tt-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--accent);color:#fff;border-radius:var(--radius-control);
  padding:14px 20px;font-size:.9375rem;font-weight:700;opacity:.4;
}
.tt-btn svg{width:17px;height:17px;flex:none;}
.tt-note{margin-top:16px;font-size:.875rem;color:var(--ink-2);max-width:var(--measure);}

.tt.is-playing .tt-ev--target{animation:tt-vanish 9s var(--ease-out) infinite,tt-flash 9s linear infinite;}
.tt.is-playing .tt-gap{animation:tt-gap 9s var(--ease-out) infinite;}
.tt.is-playing .tt-line--del{animation:tt-del 9s var(--ease-out) infinite;}
.tt.is-playing .tt-line--ok{animation:tt-ok 9s var(--ease-out) infinite;}
.tt.is-playing .tt-btn{animation:tt-btn 9s var(--ease-out) infinite;}

@keyframes tt-vanish{
  0%,16%{opacity:1;transform:none;}
  26%,54%{opacity:0;transform:translateX(-12px) scale(.96);}
  64%,100%{opacity:1;transform:none;}
}
@keyframes tt-gap{
  0%,20%{opacity:0;}
  28%,52%{opacity:1;}
  62%,100%{opacity:0;}
}
@keyframes tt-flash{
  0%,62%{box-shadow:0 0 0 0 rgba(67,183,149,0);}
  70%{box-shadow:0 0 0 4px rgba(67,183,149,.42);}
  84%,100%{box-shadow:0 0 0 0 rgba(67,183,149,0);}
}
@keyframes tt-del{
  0%,20%{opacity:0;transform:translateY(5px);}
  29%,52%{opacity:1;transform:none;}
  60%,100%{opacity:0;transform:translateY(-5px);}
}
@keyframes tt-ok{
  0%,60%{opacity:0;transform:translateY(5px);}
  69%,92%{opacity:1;transform:none;}
  100%{opacity:0;transform:translateY(-5px);}
}
@keyframes tt-btn{
  0%,28%{opacity:.4;transform:none;}
  37%,54%{opacity:1;transform:none;}
  57%,60%{opacity:1;transform:scale(.96);}
  66%,100%{opacity:.4;transform:none;}
}

/* ---------- Mockup: the running backup bar ---------- */
.pbars i.grow{transform-origin:left center;transform:scaleX(.18);}
.phone.is-in .pbars i.grow{animation:bar-fill 1400ms var(--ease-out) 260ms forwards;}
@keyframes bar-fill{from{transform:scaleX(.18);}to{transform:scaleX(1);}}

/* ---------- Screenshot slots ---------- */
/* Real screenshots go into assets/screens/ — see README-Screens.md.
   Until they exist the CSS mockups below stay visible. */
/* A real screenshot fills the frame edge to edge. */
.phone .device-shot{display:none;}
.phone .device-shot img{display:block;width:100%;height:auto;border-radius:42px;}
body.has-screens .phone > .device-shot{display:block;}
body.has-screens .phone:has(> .device-shot) > .screen{display:none;}
/* Captures leave the Dynamic Island area blank – draw it back in, on the
   screenshots and on the remaining mockup alike, so the frames match. */
body.has-screens .phone::after{
  content:"";position:absolute;z-index:1;left:50%;top:17px;transform:translateX(-50%);
  width:92px;height:26px;border-radius:999px;background:#000;
}
/* Keep a mockup the same height as a screenshot beside it (1206 × 2622). */
body.has-screens .phone > .screen{min-height:600px;}

.mac{
  width:min(620px,100%);
  background:#0B0C10;border-radius:16px;padding:9px;
  box-shadow:0 0 0 1px var(--device-hairline),0 2px 3px rgba(19,26,58,.2),0 40px 70px -40px rgba(19,26,58,.55);
}
/* The Mac shot is a window capture: it already carries its own rounded corners
   and transparent margins, so the bezel comes off and a shadow takes its place. */
.mac .device-shot{display:none;}
.mac .device-shot img{display:block;width:100%;height:auto;border-radius:0;}
body.has-screens .mac > .device-shot{display:block;}
body.has-screens .mac:has(> .device-shot){
  background:none;padding:0;border-radius:0;box-shadow:none;
  filter:drop-shadow(0 0 .5px var(--device-hairline-shot)) drop-shadow(0 0 .5px var(--device-hairline-shot)) drop-shadow(0 2px 3px rgba(19,26,58,.18)) drop-shadow(0 34px 50px rgba(19,26,58,.26));
}
body.has-screens .mac:has(> .device-shot) > .screen{display:none;}
.mac .screen{
  background:var(--bg);border-radius:9px;overflow:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,"Segoe UI",sans-serif;
  font-size:13px;line-height:1.4;color:var(--ink);
}
.mac .bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:var(--surface);border-bottom:1px solid var(--hairline);}
.mac .bar i{width:10px;height:10px;border-radius:50%;background:var(--placeholder-bar);display:block;}
.mac .bar span{margin-left:6px;font-size:11.5px;font-weight:700;color:var(--ink-2);}
.mac .body{padding:14px;display:grid;gap:10px;}
.mac .h{font-size:17px;font-weight:700;letter-spacing:-0.02em;margin:0;}
.shot--wide{max-width:660px;}

/* ---------- Performance ----------
   The heavy DOM here is the mockups. content-visibility:auto was tried on the
   long sections and removed again: it blanks them in full-page capture and in
   some print paths, and on a 36 KB static page it buys nothing measurable.
   What does the work instead: no framework, one stylesheet, one 4 KB script,
   fonts preloaded and self-hosted, every scroll handler rAF-batched + passive,
   and only transform/opacity animated. */

/* Print and forced-colors must never hide content behind a reveal. */
@media print{
  .reveal,.stagger > *{opacity:1 !important;transform:none !important;}
  .site-header{position:static;}
}

/* ---------- Reduced motion: gentler, not absent ---------- */
@media (prefers-reduced-motion:reduce){
  .hero-mark--spin::before{animation:none;}
  .tt.is-playing .tt-ev--target,
  .tt.is-playing .tt-gap,
  .tt.is-playing .tt-line--del,
  .tt.is-playing .tt-line--ok,
  .tt.is-playing .tt-btn,
  .phone.is-in .pbars i.grow{animation:none;}
  .tt-btn{opacity:1;}
  .pbars i.grow{transform:none;}
  .reveal,.stagger > *{transform:none;transition-duration:200ms;}
  .reveal.is-in,.stagger.is-in > *{transform:none;}
  .card:hover,.btn:hover{transform:none;}
  .btn:active,.check:active{transform:none;}
  .site-header,.site-header .masthead,
  .site-header .logo img.mark,.site-header .logo img.word{transition-duration:1ms;}
}

/* ---------- Anchors clear the sticky header ---------- */
section[id],main[id]{scroll-margin-top:86px;}
/* Anchor scrolling is tweened in site.js (slower, ease-in-out, header-aware).
   Native smooth scrolling would fight that tween, so it stays off. */
html{scroll-behavior:auto;}

/* ---------- Text selection, caret and scrollbar carry the brand ---------- */
::selection{background:var(--accent);color:#fff;}
.night ::selection{background:#8F8BF0;color:var(--night);}
input{caret-color:var(--accent);}

/* ---------- The trash-can litany, lead-in to the story ---------- */
.litany-section{padding-block:clamp(56px,7vw,104px) 0;}
.litany{
  display:flex;flex-direction:column;
  font-size:clamp(1.5rem,1.05rem + 2vw,2.6rem);
  font-weight:800;letter-spacing:-0.028em;line-height:1.16;
  color:var(--ink);max-width:22ch;
}
.litany > span{display:block;}
.litany > span + span{margin-top:2px;}
.litany-last{color:var(--accent-ink);}
.litany.is-in > *:nth-child(2){transition-delay:100ms;}
.litany.is-in > *:nth-child(3){transition-delay:200ms;}
.litany.is-in > *:nth-child(4){transition-delay:340ms;}


/* ---------- Burger menu (below 800px) ---------------------------------
   The section nav used to be a scrolling strip that vanished the moment the
   header shrank - on a phone it was simply gone. Now it lives in a sheet
   under the bar, opened by a 44x44 button. Desktop is untouched.
   --header-h is written by site.js from the real header height, so the sheet
   starts exactly below the bar in both the tall and the shrunk state. */
.burger{display:none;}
.nav > .langswitch{display:none;}

@media (max-width:799px){
  .site-header.has-menu .masthead{
    flex-wrap:nowrap;align-items:center;gap:10px;padding-block:12px;
  }
  .site-header.has-menu .logo{order:1;margin-right:auto;min-width:0;}
  .site-header.has-menu > .wrap > .masthead > .langswitch{order:2;}
  /* While the sheet is open its own pill takes over, so the bar does not show
     the same control twice (and the focus ring does not offer it twice). */
  .site-header.has-menu.is-open > .wrap > .masthead > .langswitch{display:none;}
  .site-header.has-menu .burger{order:3;}

  .burger{
    display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;flex:none;padding:0;
    background:rgba(255,255,255,.08);border:0;border-radius:13px;
    color:#fff;cursor:pointer;
    -webkit-tap-highlight-color:transparent;touch-action:manipulation;
    transition:background var(--dur-hover) var(--ease-out);
  }
  .burger:hover{background:rgba(255,255,255,.16);}
  .burger-box{position:relative;display:block;width:20px;height:14px;}
  .burger-box i{
    position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;
    transition:transform 250ms var(--ease-out),opacity 150ms var(--ease-out);
  }
  .burger-box i:nth-child(1){top:0;}
  .burger-box i:nth-child(2){top:6px;}
  .burger-box i:nth-child(3){top:12px;}
  .burger[aria-expanded="true"] .burger-box i:nth-child(1){transform:translateY(6px) rotate(45deg);}
  .burger[aria-expanded="true"] .burger-box i:nth-child(2){opacity:0;transform:scaleX(.3);}
  .burger[aria-expanded="true"] .burger-box i:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

  /* The sheet itself. z-index stays below the bar, so the bar and its close
     button are always on top. */
  .site-header.has-menu .nav{
    position:fixed;left:0;right:0;top:var(--header-h,64px);bottom:0;z-index:30;
    display:flex;flex-direction:column;align-items:stretch;gap:0;flex-wrap:nowrap;
    margin:0;padding:8px 0 max(28px,env(safe-area-inset-bottom));
    background:rgba(19,26,58,.97);
    -webkit-backdrop-filter:saturate(180%) blur(18px);
    backdrop-filter:saturate(180%) blur(18px);
    font-size:1.0625rem;
    overflow-y:auto;overscroll-behavior:contain;
    -webkit-mask-image:none;mask-image:none;max-height:none;
    opacity:0;transform:translateY(-10px);visibility:hidden;pointer-events:none;
    transition:opacity 250ms var(--ease-out),
               transform 250ms var(--ease-out),
               visibility 0s linear 250ms;
  }
  .site-header.has-menu.is-open .nav{
    opacity:1;transform:none;visibility:visible;pointer-events:auto;
    transition:opacity 250ms var(--ease-out),
               transform 250ms var(--ease-out),
               visibility 0s linear 0s;
  }
  .site-header.has-menu .nav > a{
    display:flex;align-items:center;min-height:56px;
    padding-inline:max(20px,env(safe-area-inset-left)) 20px;
    color:#E8EAF6;white-space:normal;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .site-header.has-menu .nav > a::after{display:none;}
  .site-header.has-menu .nav > a.is-active{color:#fff;background:rgba(143,139,240,.14);}
  /* In the sheet the switcher is a row of the list, not a second pill
     floating under it. */
  .site-header.has-menu .nav > .langswitch{
    display:flex;gap:0;margin:0;padding:0;background:none;border-radius:0;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .site-header.has-menu .nav > .langswitch a{
    flex:1 1 0;min-height:56px;min-width:0;border-radius:0;
    justify-content:flex-start;
    padding-inline:max(20px,env(safe-area-inset-left)) 20px;
    font-size:1.0625rem;color:#9AA0BF;
    border-right:1px solid rgba(255,255,255,.08);
  }
  .site-header.has-menu .nav > .langswitch a:last-child{border-right:0;}
  .site-header.has-menu .nav > .langswitch a[aria-current="page"]{
    background:rgba(143,139,240,.14);color:#fff;
  }
}

/* While the sheet is open the page behind it must not scroll. */
html.is-nav-open,html.is-nav-open body{overflow:hidden;}

@media (min-width:800px){
  .site-header.has-menu .nav{position:static;}
}

/* The sheet and the icon morph come last in the file, so their reduced-motion
   answer has to come after them. */
@media (prefers-reduced-motion:reduce){
  .site-header.has-menu .nav,
  .site-header.has-menu.is-open .nav,
  .burger,.burger-box i{transition-duration:1ms;}
  .site-header.has-menu .nav{transform:none;}
}


/* ---------- Guide pages (guide.html, de/anleitung.html) ----------------
   Long-form manual on the .legal layout. Screenshots live in /img/guide/;
   until a file exists, assets/guide.js marks its figure .is-missing and a
   dashed placeholder box takes the image's place (no broken-image icon,
   no inline handler - the CSP forbids those). */
.guide h2{margin-top:56px;}
.guide h3{margin-top:32px;font-size:1.125rem;}
.guide section[id],.guide [id]{scroll-margin-top:86px;}
.guide ol,.guide ul{padding-left:1.4em;}
.guide li + li{margin-top:8px;}
.guide .path{font-weight:600;color:var(--ink);}
.guide-lede{font-size:1.0625rem;}
.guide-toc{
  margin-top:28px;background:var(--surface);border-radius:var(--radius-tile);
  padding:20px 24px;box-shadow:var(--shadow);
}
.guide-toc h2{margin-top:0;font-size:1rem;letter-spacing:.02em;}
.guide-toc ol{margin-top:6px;}
.guide-toc li{margin-top:6px;}
.guide-toc li + li{margin-top:6px;}
.guide-toc a{font-weight:600;color:var(--accent-ink);text-decoration:none;}
.guide-toc a:hover{text-decoration:underline;}
.guide-note{
  margin-top:20px;background:var(--accent-tint);border-radius:var(--radius-inner);
  padding:14px 18px;
}
.guide-note p{margin-top:0;color:var(--ink);}
.guide-note p + p{margin-top:10px;}
.guide-faq h3{margin-top:28px;}
.guide-shot{margin:28px 0 0;display:flex;flex-direction:column;align-items:center;gap:12px;}
.guide-shot img{
  display:block;width:100%;height:auto;border-radius:var(--radius-inner);
  border:1px solid var(--device-hairline-shot);background:var(--surface-alt);
}
.guide-shot--ios img,.guide-shot--ios .guide-shot-ph{max-width:280px;}
.guide-shot--ipad img,.guide-shot--ipad .guide-shot-ph{max-width:100%;}
.guide-shot--mac img,.guide-shot--mac .guide-shot-ph{max-width:100%;}
.guide-shot--wide img,.guide-shot--wide .guide-shot-ph{max-width:420px;}
.guide-shot figcaption{font-size:.9063rem;color:var(--ink-2);text-align:center;max-width:46ch;}
.guide-shot-ph{display:none;}
/* With JS running, hold the image back until it is known to exist. */
html:not(.no-js) .guide-shot:not(.is-loaded) img{visibility:hidden;}
.guide-shot.is-missing img{display:none;}
.guide-shot.is-missing .guide-shot-ph{
  display:flex;align-items:center;justify-content:center;width:100%;
  border:2px dashed var(--control-border);border-radius:var(--radius-inner);
  background:var(--surface-alt);color:var(--ink-2);
  font-size:.875rem;font-weight:600;text-align:center;padding:16px;
}
.guide-shot--ios .guide-shot-ph{aspect-ratio:1206/2622;}
.guide-shot--ipad .guide-shot-ph{aspect-ratio:2752/2064;}
.guide-shot--mac .guide-shot-ph{aspect-ratio:2560/1600;}
.guide-shot--wide .guide-shot-ph{aspect-ratio:3/2;}
.guide-shot--android img,.guide-shot--android .guide-shot-ph{max-width:280px;}
.guide-shot--android .guide-shot-ph{aspect-ratio:1080/2400;}

/* ---------- Guide: platform switch (Apple | Android) -------------------
   assets/guide.js sets .platform-apple or .platform-android on <html> and
   hides the other platform's blocks ([data-platform]). Without JS both
   variants stay visible, each with a small "Apple" / "Android" badge, and
   the switch itself is hidden because it could not do anything. */
.platform-switch-wrap{margin-top:24px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;}
.platform-switch-label{margin:0;font-weight:600;color:var(--ink);}
.platform-switch{
  display:inline-flex;gap:2px;padding:3px;border-radius:999px;
  background:var(--surface);border:1px solid var(--control-border);box-shadow:var(--shadow);
}
.platform-switch button{
  appearance:none;-webkit-appearance:none;border:0;margin:0;background:transparent;
  font:inherit;font-size:.9375rem;font-weight:700;line-height:1.25;color:var(--ink-2);
  min-height:44px;min-width:44px;padding:8px 18px;border-radius:999px;cursor:pointer;
  touch-action:manipulation;-webkit-tap-highlight-color:rgba(91,86,224,.25);
  transition:background var(--dur-hover) var(--ease-out),color var(--dur-hover) var(--ease-out);
}
.platform-switch button:hover{color:var(--ink);}
.platform-switch button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);}
.platform-switch button:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px;}
.platform-switch-sub{font-weight:600;}
/* Narrow screens: keep every button on one line – the device list goes (the
   aria-pressed button name stays "Apple"), the full hint returns from 421px. */
@media (max-width:420px){.platform-switch-sub{display:none;}.platform-switch button{white-space:nowrap;padding-inline:16px;}}
html.no-js .platform-switch-wrap{display:none;}
html:not(.no-js) .platform-nojs{display:none;}
html:not(.no-js):not(.platform-android) [data-platform="android"]{display:none !important;}
html.platform-android [data-platform="apple"]{display:none !important;}
html.no-js [data-platform]::before{
  content:attr(data-platform);text-transform:capitalize;display:inline-block;
  margin:0 8px 6px 0;padding:1px 9px;border-radius:999px;
  background:var(--accent-tint);color:var(--accent-ink);
  font-size:.75rem;font-weight:700;letter-spacing:.02em;line-height:1.6;vertical-align:middle;
}
@media (prefers-reduced-motion:reduce){.platform-switch button{transition-duration:1ms;}}

/* ---------- Start page and help: same switch -------------------------
   assets/platform.js is shared by guide, start page and help; the choice
   is remembered across pages. On the start page the hero shows one phone
   per platform; without JS only the Apple one (the Android screens follow
   further down, labelled). Self-labelled blocks (screens, table rows,
   FAQ entries, privacy points) get no "Apple"/"Android" badge. */
.section-head .platform-switch-wrap{margin-top:4px;}
html.no-js .hero [data-platform="android"]{display:none;}
html.no-js .phone[data-platform]::before,
html.no-js .screens[data-platform]::before,
html.no-js tr[data-platform]::before,
html.no-js details[data-platform]::before,
html.no-js .privacy li[data-platform]::before{content:none;}
/* Android captures: no Dynamic Island, a small punch-hole camera instead. */
body.has-screens .phone--android::after{width:11px;height:11px;top:21px;}