/* KYOU website. Editorial website, tactile product (Creative Brief §2.1).
   Shared by the homepages and the use-case pages. */
/* Self-hosted fonts (SIL OFL 1.1, licences in fonts/). Latin variable fonts cover EN and DE,
   so no request leaves for a third-party font host. */
@font-face{font-family:"Albert Sans";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/albert-sans-latin-var.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/inter-latin-var.woff2") format("woff2")}

:root{
  color-scheme:light;
  /* Brand set, Creative Brief §5 */
  --base:#F7F7F8;
  --surface:#FFFFFF;
  --ink:#111111;
  --muted:#5B6168;
  --rule:#E3E6E9;
  --shadow:#ECEFF1;
  --emerald:#34C38F;
  --emerald-hover:#2CB282;
  --emerald-text:#13734F; /* Emerald derivation with AA contrast on Base */
  --burgundy:#E7B0BD;
  --sky:#D9E6F5;
  --amber:#F2E6B8;
  /* Product surfaces sampled from the registered TextCard screenshot (06.11.2026) */
  --card:#F4F4F4;
  --card-edge:#D6D6D6;
  --card-rule:#DCDCDC;
  /* Interaction roles (light values; dark values below) */
  --muted-2:#9AA0A6;
  --quiet-hover:#E1E5E8;
  --partial:#8E959B;
  --placeholder:#A3A9AE;
  --hot:color-mix(in srgb,#F2E6B8 70%,transparent);
  --armed:#E5EDF8;
  --armed-edge:#C6D5E8;
  --enter-bg:#C9D9EE;
  --enter-edge:#B9CDE8;
  --enter-ink:#2B3440;
  --touch:rgba(17,17,17,.10);
  --touch-edge:rgba(17,17,17,.25);
  --pedal-icon:#7A8086;
  --rec-pedal:#E7B0BD;
  --rec-icon:#111111;
  --drop:var(--drop);

  --display:"Albert Sans","Avenir Next","Segoe UI",system-ui,sans-serif;
  --body:"Inter","Segoe UI",system-ui,sans-serif;

  --ease-out:cubic-bezier(.22,.9,.24,1);
  --t-micro:160ms;
  --t-ui:260ms;

  --gutter:max(20px,env(safe-area-inset-left,0px));
}
/* Dark variant: product surfaces sampled from the registered dark iOS screenshots (06.11.2026) */
:root[data-theme="dark"]{
  color-scheme:dark;
  --base:#0E0E0E;
  --surface:#161616;
  --ink:#F2F2F2;
  --muted:#9A9FA4;
  --rule:#2A2A2A;
  --shadow:#1F1F1F;
  --emerald-text:#5FD8A9;
  --card:#1A1A1A;
  --card-edge:#2E2E2E;
  --card-rule:#2C2C2C;
  --muted-2:#6E7377;
  --quiet-hover:#2A2A2A;
  --partial:#8A8F94;
  --placeholder:#6B7075;
  --hot:rgba(242,230,184,.16);
  --armed:#1C2531;
  --armed-edge:#2E3D50;
  --enter-bg:#24344A;
  --enter-edge:#3A5070;
  --enter-ink:#DCE6F3;
  --touch:rgba(255,255,255,.12);
  --touch-edge:rgba(255,255,255,.3);
  --pedal-icon:#8C9196;
  --rec-pedal:#452227;
  --rec-icon:#F2F2F2;
  --drop:rgba(0,0,0,.7);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--base);color:var(--ink);font:400 1.0625rem/1.6 var(--body);-webkit-font-smoothing:antialiased}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--emerald-text);outline-offset:4px;border-radius:6px}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance;font-weight:500}
p{margin:0;text-wrap:pretty}
figure{margin:0}
.wrap{width:min(1200px,100% - 2*var(--gutter));margin-inline:auto}
/* Anchor jumps tuck the section divider under the sticky header (102px) so no double line shows. */
section[id]{scroll-margin-top:92px}
figure[id]{scroll-margin-top:118px}
.skip{position:absolute;left:1rem;top:-8rem;background:var(--surface);padding:.8rem 1rem;z-index:20;border-radius:8px}
.skip:focus{top:1rem}

/* Header */
.site-head{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--base) 88%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--rule)}
.nav{display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);min-height:102px;padding-top:16px}
.brand{display:flex;align-items:center;gap:1.15rem;text-decoration:none;margin-right:auto}
.brand .signet{width:51px;height:auto}
.brand .wordmark{height:29px;width:auto}
.nav-links{display:flex;gap:clamp(1rem,2.4vw,2rem)}
.nav-links a,.lang a{text-decoration:none;font-size:.95rem;color:var(--muted);transition:color var(--t-micro)}
.nav-links a:hover,.lang a:hover{color:var(--ink)}
.lang{display:flex;gap:.6rem;font-size:.85rem}
.lang [aria-current]{color:var(--ink);font-weight:600}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.55rem;font:500 1rem/1 var(--body);padding:1rem 1.35rem;border-radius:999px;text-decoration:none;border:0;cursor:pointer;transition:transform var(--t-micro) var(--ease-out),background-color var(--t-micro);white-space:nowrap}
.btn:active{transform:scale(.96)}
.btn-primary{background:var(--emerald);color:#062418}
.btn-primary:hover{background:var(--emerald-hover)}
.btn-quiet{background:var(--shadow);color:var(--ink)}
.btn-quiet:hover{background:var(--quiet-hover)}
.btn-quiet .play{width:0;height:0;border-left:8px solid currentColor;border-top:5.5px solid transparent;border-bottom:5.5px solid transparent}
.nav .btn{padding:.7rem 1.05rem;font-size:.92rem}

/* Hero */
.hero{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(2rem,5vw,5rem);align-items:center;padding-block:clamp(2.5rem,7vw,6.5rem) clamp(3rem,7vw,6rem)}
/* Homepage only (the hero with the stage): 70% of the regular top whitespace */
.hero:has(.stage){padding-top:clamp(1.75rem,4.9vw,4.55rem)}
/* Two columns: the "Early access" line and the stage caption share one baseline */
@media (min-width:901px){.hero:has(.stage){align-items:last baseline}.hero .stage-foot{align-items:last baseline}}
/* Homepage: the assurance line and the stage caption sit one text line lower so they breathe */
.hero:has(.stage) .assure{margin-top:calc(1rem + 1lh)}
.kicker{font:600 .78rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:1.4rem}
.hero h1{font-weight:400;font-size:clamp(3rem,6.2vw,6.4rem);line-height:.95;letter-spacing:-.05em}
.hero h1 b{font-weight:600}
.hero .lead{font-size:clamp(1.12rem,1.6vw,1.32rem);line-height:1.5;color:var(--muted);max-width:30ch;margin-top:1.6rem}
.hero .lead b{font-weight:600}
.hero .actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2.2rem}
.hero .assure{margin-top:1rem;font-size:.85rem;color:var(--muted)}

/* Signature stage: phone TextCard + destination window */
/* Computer screen across the full column, phone overlapping below and to the right:
   the swipe up sends the card toward the screen, the text lands in the field top left. */
.stage{display:grid;grid-template-columns:minmax(0,1fr)}
/* The destination reads as a real computer at a glance: monitor with bezel, browser bar, a Mac-style
   draft window (monochrome lights), a centred taskbar with generic Lucide glyphs (no third-party logos)
   and a fork stand. The phone overlaps the stand, so it stands in front of the desk. cqi resolves against .monitor. */
.monitor{grid-area:1/1;position:relative;min-width:0;container-type:inline-size;--bezel:#CDD2D7;--bezel-edge:#B3B9BF;--stand:#C5CACF;--stand-edge:#AEB4BA}
/* Light: aluminium bezel matching the stand. Dark: a near-black bezel that still separates from the page. */
:root[data-theme="dark"] .monitor{--bezel:#2C2D30;--bezel-edge:#3A3B3E;--stand:#3A3B3E;--stand-edge:#4A4B4F}
.screen{position:relative;aspect-ratio:16/10;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:var(--base);border:1.3cqi solid var(--bezel);border-radius:2.4cqi;box-shadow:0 0 0 1px var(--bezel-edge),0 30px 60px -40px var(--drop);overflow:hidden}
.browser-bar{display:flex;align-items:center;gap:1.8cqi;padding:1.3cqi 2.2cqi;background:var(--surface);border-bottom:1px solid var(--rule);color:var(--muted-2);font-size:max(.6rem,1.7cqi);line-height:1}
.browser-bar svg{width:2.3cqi;min-width:9px;flex:none}
.browser-bar .nav-icons{display:flex;gap:1.2cqi}
.browser-bar .url{flex:0 1 52%;margin-inline:auto;display:flex;align-items:center;justify-content:center;gap:1cqi;padding:.9cqi 2cqi;border-radius:999px;background:var(--base);border:1px solid var(--rule);color:var(--muted);white-space:nowrap;overflow:hidden}
.browser-bar .url svg{width:1.8cqi;min-width:8px}
.browser-bar .spacer{width:8.2cqi;flex:none}
.desk{position:relative;overflow:hidden}
.page-lines{position:absolute;right:4cqi;top:4cqi;width:27cqi;display:grid;gap:2.4cqi}
.page-lines i{display:block;height:1.5cqi;min-height:5px;border-radius:99px;background:var(--shadow)}
.page-lines i:nth-child(odd){width:64%}
.mac-window{position:absolute;left:3.4cqi;top:2.8cqi;width:58cqi;background:var(--surface);border:1px solid var(--rule);border-radius:1.6cqi;box-shadow:0 1.4cqi 4cqi -2cqi var(--drop);overflow:hidden}
.mac-window .window-bar{justify-content:flex-start;gap:1.6cqi;padding:1.7cqi 2.4cqi}
.mac-window .window-bar span:last-child{margin-left:auto}
.lights{display:flex;gap:.9cqi}
.lights i{width:1.5cqi;height:1.5cqi;min-width:6px;min-height:6px;border-radius:50%;background:color-mix(in srgb,var(--muted-2) 45%,transparent)}
.mac-window .window-doc{grid-template-columns:minmax(0,1fr);gap:2.4cqi;padding:2.6cqi 3.2cqi 3cqi}
.mac-window .field{min-height:18cqi}
.taskbar{position:relative;display:flex;align-items:center;justify-content:center;gap:1.5cqi;padding:.9cqi 2cqi 1.1cqi;background:color-mix(in srgb,var(--surface) 88%,transparent);border-top:1px solid var(--rule)}
.taskbar .app{position:relative;display:grid;place-items:center;width:3.6cqi;height:3.6cqi;min-width:13px;min-height:13px;color:var(--muted)}
.taskbar .app svg,.taskbar .app img{width:66%;height:auto}
.taskbar .app.on::after{content:"";position:absolute;left:50%;bottom:-.75cqi;translate:-50% 0;width:1.3cqi;height:.4cqi;min-height:2px;border-radius:99px;background:var(--muted)}
:root[data-theme="dark"] .taskbar .signet{filter:invert(1) brightness(.95)}
.stand{display:block;width:42%;height:auto;margin:-1px auto 0;color:var(--stand)}
.window-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:2.2cqi 3.2cqi;border-bottom:1px solid var(--rule);font-size:max(.7rem,2.1cqi);color:var(--muted)}
.window-bar b{font-weight:600;color:var(--ink)}
.window-doc{padding:3.4cqi 3.6cqi;font-size:max(.78rem,2.7cqi);line-height:1.55;display:grid;grid-template-columns:minmax(0,60fr) minmax(0,40fr);gap:3cqi 4cqi;align-items:start}
.field{border:1.5px solid color-mix(in srgb,var(--emerald) 55%,var(--rule));border-radius:1.4cqi;padding:2.2cqi 2.8cqi;background:var(--base);min-height:21cqi}
.skeleton{display:grid;gap:2.2cqi;padding-top:1.4cqi}
.skeleton i{display:block;height:1.5cqi;min-height:5px;border-radius:99px;background:var(--shadow)}
.skeleton i:nth-child(2n){width:72%}
.skeleton i:nth-child(3n){width:50%}
.skeleton.wide{grid-column:1/-1;padding-top:0}
.window-doc p + p{margin-top:.15em}
.window-doc .muted{color:var(--muted-2)}
.target-line{position:relative;min-height:1.6em}
.target-line .typed{border-radius:.2em;transition:background-color .9s ease}
.target-line .typed.landed{background:color-mix(in srgb,var(--emerald) 28%,transparent)}
.caret{display:inline-block;width:.09em;min-width:2px;height:1.05em;vertical-align:-.15em;background:var(--ink);margin-left:.04em;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.target-line .enter-mark{display:inline-flex;align-items:center;gap:.3em;margin-left:.4em;font-size:.7em;color:var(--emerald-text);opacity:0;transition:opacity var(--t-ui)}
.stage[data-state="entered"] .enter-mark{opacity:1}

/* .phone is only the size container; cqi inside .phone-screen resolves against it. */
.phone{grid-area:1/1;z-index:1;justify-self:end;width:34%;margin-right:6%;margin-top:30%;position:relative;container-type:inline-size;min-width:0}
/* The screen clips the card when it is thrown off the top; the header stays above it. */
.phone-screen{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--rule);border-radius:12cqi;padding:6cqi 5cqi 5cqi;box-shadow:0 2px 0 var(--shadow),0 40px 70px -40px var(--drop);display:grid;gap:4cqi}
.phone-head{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:3cqi;background:var(--surface);box-shadow:0 -12cqi 0 6cqi var(--surface)}
.phone-head .signet,.phone-head .undo{width:7.5cqi}
.phone-head .undo{display:none;color:var(--ink)}
.stage[data-state="sent"] .phone-head .signet{display:none}
.stage[data-state="sent"] .phone-head .undo{display:block}
.host-pill{flex:1;text-align:center;font-size:4.6cqi;line-height:1;padding:2.6cqi 3cqi;border:1.5px solid var(--emerald);border-radius:999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background-color var(--t-micro)}
.stage[data-state="dragging"] .host-pill{background:color-mix(in srgb,var(--emerald) 16%,var(--surface))}
.phone-head .tune{width:7cqi;color:var(--ink)}

/* Card mechanics follow the Android send clip (TextCardFlight+PostEnter): warm hot zone on touch,
   1:1 follow with a sky tint while armed, thrown off the top, drops back with a round Enter. */
.card{position:relative;z-index:1;aspect-ratio:1/1.45;background:var(--card);border:1px solid var(--card-edge);border-radius:6cqi;padding:5cqi 6cqi;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;will-change:transform;transition:background-color var(--t-micro),border-color var(--t-micro)}
.card:active{cursor:grabbing}
.card::after{content:"";position:absolute;inset:auto 0 0;height:34%;border-radius:0 0 6cqi 6cqi;background:linear-gradient(to top,var(--hot),transparent);opacity:0;transition:opacity var(--t-micro);pointer-events:none}
.card[data-touch]::after{opacity:1}
.stage[data-state="dragging"] .card,.stage[data-state="sent"] .card{background:var(--armed);border-color:var(--armed-edge)}
.stage[data-state="dragging"] .card::after{opacity:0}
.card-text{--lh:11.6cqi;font-size:8.6cqi;line-height:var(--lh);letter-spacing:-.01em;min-height:calc(var(--lh)*6);background-image:linear-gradient(to bottom,transparent calc(var(--lh) - 1px),var(--card-rule) calc(var(--lh) - 1px));background-size:100% var(--lh);overflow:hidden;transition:opacity var(--t-ui)}
.stage[data-state="dragging"] .card-text,.stage[data-state="sent"] .card-text{background-image:none}
.card-text.fading{opacity:0}
.card-text .partial{color:var(--partial)}
.card-text .placeholder{color:var(--placeholder)}
.card .caret{background:var(--burgundy);width:.08em}
.stage:not([data-state="recording"]) .card .caret{display:none}
.card-hint{position:absolute;left:50%;bottom:4.5cqi;translate:-50% 0;display:flex;align-items:center;gap:1.6cqi;font-size:4cqi;color:var(--muted);white-space:nowrap;opacity:0;transition:opacity var(--t-ui)}
.card-hint svg{width:4.6cqi}
.stage[data-state="staged"] .card:not([data-touch]) .card-hint{opacity:1}
.card-enter{position:absolute;left:50%;top:52%;width:30cqi;aspect-ratio:1;translate:-50% -50%;display:grid;place-items:center;border-radius:50%;background:var(--enter-bg);border:1px solid var(--enter-edge);color:var(--enter-ink);opacity:0;scale:.85;transition:opacity var(--t-ui),scale var(--t-ui) var(--ease-out);pointer-events:none}
.card-enter svg{width:11cqi}
.stage[data-state="sent"] .card-enter{opacity:1;scale:1}
.touch{position:absolute;z-index:3;left:50%;top:72%;width:9cqi;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:var(--touch);border:1px solid var(--touch-edge);opacity:0;pointer-events:none}
.touch.on{opacity:1}
.pedal{display:grid;place-items:center;aspect-ratio:2.75/1;background:var(--card);border:1px solid var(--card-edge);border-radius:6cqi;transition:background-color var(--t-ui);cursor:pointer}
.pedal svg{width:10cqi;color:var(--pedal-icon);transition:color var(--t-ui)}
.pedal{position:relative}
.pedal:focus-visible{outline:2px solid var(--emerald-text);outline-offset:2px}
/* Ready for a new tap: the mic breathes gently (opacity and colour only, so pedal and mic keep their geometry).
   Still while recording, dragging or sending. */
.stage:not([data-rec="on"]):not([data-state="dragging"]):not([data-state="sending"]):not([data-state="sent"]) .pedal > svg{animation:mic-breathe 2.4s ease-in-out infinite}
/* No scaling: scaling a small icon on desktop snaps between pixels and looks like wobbling. Brightness only. */
@keyframes mic-breathe{0%,100%{opacity:.45}50%{opacity:1;color:var(--ink)}}
.stage[data-rec="on"] .pedal{background:var(--rec-pedal)}
.stage[data-rec="on"] .pedal svg{color:var(--rec-icon)}

.stage-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:calc(1rem + 1lh);font-size:.85rem;color:var(--muted)}
.replay{font:500 .85rem/1 var(--body);color:var(--ink);background:none;border:1px solid var(--rule);border-radius:999px;padding:.55rem .9rem;cursor:pointer;white-space:nowrap}
.replay:hover{background:var(--surface)}

/* Chapters */
.chapter{border-top:1px solid var(--rule);padding-block:clamp(4rem,9vw,8rem)}
.chapter-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.chapter.flip .chapter-copy{order:2}
.chapter h2{font-size:clamp(2.4rem,4.8vw,4.6rem);line-height:.98;letter-spacing:-.045em;max-width:15ch}
.chapter .body{margin-top:1.4rem;font-size:clamp(1.05rem,1.4vw,1.2rem);color:var(--muted);max-width:38ch}
.chapter .aside{margin-top:1.4rem;font-family:var(--display);font-size:1.25rem;letter-spacing:-.015em;max-width:30ch}
.gestures{list-style:none;padding:0;margin:2.2rem 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink)}
.gestures li{padding:.9rem 1rem 0 0;display:grid;gap:.25rem}
.gestures li + li{padding-left:1rem;border-left:1px solid var(--rule)}
.gestures b{font:500 1.05rem/1.2 var(--display);letter-spacing:-.01em}
.gestures span{font-size:.9rem;color:var(--muted);line-height:1.4}
.places{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem}
.places span{font-size:.85rem;padding:.45rem .8rem;border-radius:999px;background:var(--surface);border:1px solid var(--rule)}
.motto{margin-top:2rem;font-family:var(--display);font-weight:500;font-size:1.35rem;letter-spacing:-.02em;color:var(--emerald-text)}

.clip{display:grid;justify-items:center;gap:.9rem}
.device{width:min(300px,72%);border-radius:34px;padding:10px;background:var(--surface);border:1px solid var(--rule);box-shadow:0 2px 0 var(--shadow),0 40px 70px -40px var(--drop)}
.device img{width:100%;height:auto;border-radius:25px}
.device video{width:100%;height:auto;aspect-ratio:1080/2400;border-radius:25px;background:var(--card)}
.clip figcaption{font-size:.85rem;color:var(--muted);text-align:center;max-width:36ch}

/* Use-case pages: static scene (registered product screen + destination) and the three demo beats */
.hero:has(.scene) h1{font-size:clamp(2.6rem,4.9vw,5rem);line-height:1}
.scene{display:grid;grid-template-columns:minmax(0,40fr) minmax(0,60fr);gap:5%;align-items:center}
.scene .device{width:100%;border-radius:30px;padding:8px}
.scene .device img{width:100%;height:auto;border-radius:23px}
.dest{container-type:inline-size;background:var(--surface);border:1px solid var(--rule);border-radius:16px;box-shadow:0 1px 0 var(--shadow),0 30px 60px -40px var(--drop);overflow:hidden}
.dest .window-bar{font-size:max(.75rem,3.4cqi)}
.dest-body{padding:6cqi 6cqi 8cqi;display:grid;gap:3cqi}
.dest-body .result{font:500 max(1.1rem,6.4cqi)/1.2 var(--display);letter-spacing:-.02em}
.dest-body .result .typed{background:color-mix(in srgb,var(--emerald) 22%,transparent);border-radius:.15em}
.dest-body .lines{display:grid;gap:2.4cqi}
.dest-body .lines i{display:block;height:2.4cqi;min-height:7px;border-radius:99px;background:var(--shadow)}
.dest-body .lines i:nth-child(2){width:78%}
.dest-body .lines i:nth-child(3){width:56%}
.scene-cap{margin-top:1rem;font-size:.85rem;color:var(--muted)}
.beats{border-top:1px solid var(--rule);padding-block:clamp(3.5rem,8vw,6rem)}
.beats h2{font-size:clamp(2rem,3.8vw,3.2rem);line-height:1;letter-spacing:-.04em}
.beat-list{list-style:none;padding:0;margin:clamp(1.8rem,4vw,2.6rem) 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink);counter-reset:beat}
.beat-list li{counter-increment:beat;padding:1.2rem 1.4rem 0 0;display:grid;gap:.5rem;font:500 clamp(1.15rem,1.9vw,1.5rem)/1.2 var(--display);letter-spacing:-.02em}
.beat-list li + li{padding-left:1.4rem;border-left:1px solid var(--rule)}
.beat-list li::before{content:counter(beat,decimal-leading-zero);font:500 .8rem/1 var(--body);letter-spacing:.08em;color:var(--emerald-text)}

/* Use cases */
.uses{border-top:1px solid var(--rule);padding-block:clamp(4rem,9vw,7rem)}
.uses h2{font-size:clamp(2.2rem,4.2vw,3.8rem);line-height:1;letter-spacing:-.04em}
.use-list{list-style:none;padding:0;margin:clamp(2rem,4vw,3rem) 0 0;border-top:1px solid var(--ink)}
.use-list a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) auto;align-items:baseline;gap:1rem 2rem;padding-block:1.4rem;border-bottom:1px solid var(--rule);text-decoration:none;transition:padding var(--t-ui) var(--ease-out)}
.use-list b{font:500 clamp(1.35rem,2.4vw,2rem)/1.1 var(--display);letter-spacing:-.025em}
.use-list span{color:var(--muted)}
.use-list i{font-style:normal;font-size:.9rem;color:var(--emerald-text);white-space:nowrap}
.use-list a:hover{padding-left:.6rem}
.use-list a:hover i{text-decoration:underline}

/* Closing CTA */
.closing{background:var(--surface);border-top:1px solid var(--rule)}
.closing-inner{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:2rem 4rem;align-items:end;padding-block:clamp(4rem,9vw,7.5rem)}
.closing h2{font-weight:400;font-size:clamp(2.6rem,5.4vw,5.2rem);line-height:.96;letter-spacing:-.05em}
.closing h2 b{font-weight:600}
.closing p{color:var(--muted);max-width:34ch;margin-bottom:1.6rem;font-size:1.1rem}

/* Footer */
.site-foot{border-top:1px solid var(--rule);padding-block:2rem;font-size:.88rem;color:var(--muted)}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.foot nav{display:flex;flex-wrap:wrap;gap:1.2rem}
.foot a{text-decoration:none}
.foot a:hover{color:var(--ink)}

@media (max-width:900px){
  .hero,.chapter-grid,.closing-inner{grid-template-columns:minmax(0,1fr)}
  .chapter.flip .chapter-copy{order:0}
  .hero h1{font-size:clamp(2.8rem,11vw,4.6rem)}
  /* Stacked: the computer sits above the phone, so the send is a literal swipe up. */
  .phone{width:40%;margin-right:3%;margin-top:40%}
  .use-list a{grid-template-columns:minmax(0,1fr) auto}
  .use-list span{grid-column:1/-1;grid-row:2}
  .scene{grid-template-columns:minmax(0,38fr) minmax(0,62fr)}
}
@media (max-width:640px){
  .nav-links{display:none}
  .gestures{grid-template-columns:minmax(0,1fr)}
  .gestures li,.gestures li + li{padding:.8rem 0;border-left:0;border-bottom:1px solid var(--rule)}
  /* Narrow screens: the phone moves right and below the draft, so the fork stand stays partly visible behind it;
     a small inset from the screen edge keeps it reading as standing in front of the monitor. */
  .phone{width:46%;margin-right:3%;margin-top:44%}
  .stage-foot{flex-wrap:wrap}
  .use-list a{grid-template-columns:minmax(0,1fr);gap:.4rem}
  .use-list span{grid-row:auto}
  .beat-list{grid-template-columns:minmax(0,1fr)}
  .beat-list li,.beat-list li + li{padding:1rem 0;border-left:0;border-bottom:1px solid var(--rule)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:1ms!important;animation:none!important}
}

/* Brand vectors are dark-filled; on the dark variant they are recoloured to the light ink role without changing the geometry. */
:root[data-theme="dark"] .brand img,
:root[data-theme="dark"] .phone-head .signet{filter:invert(1) brightness(.95)}

/* Day/night switch. The page theme lives on <html data-theme>; media that differ per theme
   carry data-theme-only and are swapped inside the transition snapshot. */
.theme-switch{display:grid;place-items:center;width:40px;height:40px;border-radius:999px;border:1px solid var(--rule);background:transparent;color:var(--ink);cursor:pointer;transition:background-color var(--t-micro),transform var(--t-micro) var(--ease-out)}
.theme-switch:hover{background:var(--shadow)}
.theme-switch:active{transform:scale(.94)}
.theme-switch svg{width:18px;height:18px}
.theme-switch .sun{display:none}
:root[data-theme="dark"] .theme-switch .sun{display:block}
:root[data-theme="dark"] .theme-switch .moon{display:none}
:root:not([data-theme="dark"]) [data-theme-only="dark"],
:root[data-theme="dark"] [data-theme-only="light"]{display:none!important}

/* Dusk: night settles from the top. Dawn: daylight rises from the bottom.
   The new theme is revealed through a soft, wide horizon edge. */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
:root.dusk::view-transition-new(root){
  -webkit-mask-image:linear-gradient(to bottom,#000 38%,transparent 62%);mask-image:linear-gradient(to bottom,#000 38%,transparent 62%);
  -webkit-mask-size:100% 260%;mask-size:100% 260%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  animation:kyou-dusk 950ms cubic-bezier(.45,0,.25,1) both}
:root.dawn::view-transition-new(root){
  -webkit-mask-image:linear-gradient(to top,#000 38%,transparent 62%);mask-image:linear-gradient(to top,#000 38%,transparent 62%);
  -webkit-mask-size:100% 260%;mask-size:100% 260%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  animation:kyou-dawn 950ms cubic-bezier(.45,0,.25,1) both}
:root.dawn::view-transition-old(root){animation:kyou-warm 950ms ease-out both}
@keyframes kyou-dusk{from{-webkit-mask-position:0 100%;mask-position:0 100%}to{-webkit-mask-position:0 0;mask-position:0 0}}
@keyframes kyou-dawn{from{-webkit-mask-position:0 0;mask-position:0 0}to{-webkit-mask-position:0 100%;mask-position:0 100%}}
/* A brief warm lift on the night layer as the sun comes up */
@keyframes kyou-warm{0%{filter:none}55%{filter:sepia(.35) brightness(1.15)}100%{filter:sepia(.2) brightness(1.3)}}
/* Browsers without view transitions: a slow colour fade instead */
:root.theme-fade *,:root.theme-fade *::before,:root.theme-fade *::after{transition:background-color .9s ease,color .9s ease,border-color .9s ease,fill .9s ease!important}
@media (prefers-reduced-motion:reduce){
  :root.dusk::view-transition-new(root),:root.dawn::view-transition-new(root),:root.dawn::view-transition-old(root){animation:none}
}

/* Homepage live-demo chapter: the demo beats and a quiet link to the full use case */
.chapter .beat-list{margin-top:2rem}
.chapter .beat-list li{font-size:clamp(1.02rem,1.5vw,1.2rem)}
.more-link{display:inline-block;margin-top:1.8rem;font-weight:500;color:var(--emerald-text);text-decoration:none}
.more-link:hover{text-decoration:underline}
.scene-fig{min-width:0}

/* Phone header: smaller brand so the early-access pill fits beside language and day/night;
   hero CTAs share one row. Placed last so it overrides the switch and button sizes above. */
@media (max-width:640px){
  .nav{gap:.5rem;min-height:64px;padding-top:8px}
  .nav > *{flex-shrink:0}
  /* Brand grows with the free header width: 29 px signet at 390 px up to 40 px on large phones */
  .brand{gap:.4rem;--s:clamp(29px,calc(29px + (100vw - 390px) * .2),40px)}
  .brand .signet{width:var(--s)}
  .brand .wordmark{height:calc(var(--s) * .538)}
  .lang{gap:.45rem}
  .lang a{font-size:.85rem}
  .nav .btn{padding:.5rem .65rem;font-size:.76rem}
  .theme-switch{width:32px;height:32px}
  .theme-switch svg{width:16px;height:16px}
  section[id]{scroll-margin-top:54px}
  figure[id]{scroll-margin-top:80px}
  .hero .actions{flex-wrap:nowrap;gap:.5rem}
  .hero .actions .btn{flex:1 1 auto;min-width:0;justify-content:center;padding:.85rem .7rem;font-size:.88rem}
}
/* Narrow phones: keep the larger brand and fit the German pill by tightening the other header parts;
   below 380 px the brand scales with the viewport so nothing overflows at 360 px. */
@media (max-width:420px){
  .nav{gap:.375rem}
  .lang{gap:.35rem}
  .nav .btn{padding:.5rem .55rem;font-size:.72rem}
  .theme-switch{width:30px;height:30px}
}
@media (max-width:380px){
  .nav{gap:.3rem}
  .brand{gap:.35rem}
  .brand .signet{width:7.2vw}
  .brand .wordmark{height:3.75vw}
}
/* Very small phones (≤340 px): signet alone, which Design.md allows without the wordmark */
@media (max-width:340px){
  .brand .wordmark{display:none}
  .brand .signet{width:26px}
}