/* Bilanzera homepage. Self-hosted font, no external requests (CSP: 'self' only). */
@font-face{font-family:"Geist";src:url("/static/home-font.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:optional}

:root{
  --bg:#f6f6f2;--bg-2:#eef0ea;--surface:#fdfdfb;--ink:#1b2025;--muted:#59636b;--faint:#677078;
  --line:#e2e5df;--line-strong:#cfd5cd;--control-line:#7a838a;
  --accent:#3d625f;--accent-strong:#2b4a47;--accent-soft:#e3ece8;--accent-ink:#f4f8f6;
  --ok:#2e7656;--ok-soft:#e1efe7;--wait:#8a6418;--wait-soft:#f5ecd8;--danger:#b42318;
  --stage-0:#e8eae4;--stage-1:#fbfbf8;--stage-2:#d8e7e1;--stage-line:#666f76;
  --shadow:0 1px 2px rgb(27 32 37 / .05),0 12px 32px -12px rgb(27 32 37 / .14);
  --shadow-lg:0 2px 4px rgb(27 32 37 / .04),0 30px 80px -24px rgb(27 32 37 / .28);
  --ease:cubic-bezier(.23,1,.32,1);--dur-fast:.15s;--dur:.25s;--dur-slow:.6s;--ease-io:cubic-bezier(.77,0,.175,1);
  --font:"Geist",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --page:min(1180px,100% - 2*clamp(20px,5vw,48px));--inset:clamp(8px,1.2vw,16px);
  color-scheme:light
}
/* Dark theme: follows the system unless the visitor chose a theme (data-theme). */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0e1113;--bg-2:#13171a;--surface:#161a1e;--ink:#e8ebe8;--muted:#a2abb1;--faint:#8b959c;
  --line:#242a2f;--line-strong:#323a40;--control-line:#6b757c;
  --accent:#86b9ae;--accent-strong:#a6cec5;--accent-soft:#1a2927;--accent-ink:#0e1113;
  --ok:#7cc4a0;--ok-soft:#16261f;--wait:#dcb15e;--wait-soft:#2a2215;--danger:#ff9b8f;
  --stage-0:#0a0c0e;--stage-1:#34393d;--stage-2:#16302c;--stage-line:#8f989f;
  --shadow:0 1px 2px rgb(0 0 0 / .4),0 16px 40px -16px rgb(0 0 0 / .6);
  --shadow-lg:0 2px 6px rgb(0 0 0 / .4),0 40px 90px -30px rgb(0 0 0 / .85);
  color-scheme:dark
}}
:root[data-theme="dark"]{
  --bg:#0e1113;--bg-2:#13171a;--surface:#161a1e;--ink:#e8ebe8;--muted:#a2abb1;--faint:#8b959c;
  --line:#242a2f;--line-strong:#323a40;--control-line:#6b757c;
  --accent:#86b9ae;--accent-strong:#a6cec5;--accent-soft:#1a2927;--accent-ink:#0e1113;
  --ok:#7cc4a0;--ok-soft:#16261f;--wait:#dcb15e;--wait-soft:#2a2215;--danger:#ff9b8f;
  --stage-0:#0a0c0e;--stage-1:#34393d;--stage-2:#16302c;--stage-line:#8f989f;
  --shadow:0 1px 2px rgb(0 0 0 / .4),0 16px 40px -16px rgb(0 0 0 / .6);
  --shadow-lg:0 2px 6px rgb(0 0 0 / .4),0 40px 90px -30px rgb(0 0 0 / .85);
  color-scheme:dark
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--font);letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:500;letter-spacing:-.035em;text-wrap:balance}
p{margin:0;text-wrap:pretty}
ul,ol,dl,dd{margin:0;padding:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
::selection{background:var(--accent-soft)}
.dim{color:var(--muted)}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono)}
svg path,svg circle,svg rect{vector-effect:non-scaling-stroke}

.skip{position:fixed;left:16px;top:-80px;z-index:100;background:var(--surface);color:var(--ink);padding:10px 16px;border-radius:10px;box-shadow:var(--shadow)}
.skip:focus{top:12px}
.top-sentinel{position:absolute;top:0;height:8px;width:1px}

/* Navigation: brand, centred pill with a glider, controls on the right. */
.nav{position:sticky;top:0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;
  padding:12px max((100% - 1180px)/2,clamp(16px,4vw,48px));border-bottom:1px solid transparent;
  transition:background-color .25s var(--ease),border-color .25s var(--ease)}
.nav.is-scrolled{background:color-mix(in srgb,var(--bg) 84%,transparent);border-color:var(--line);
  -webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px)}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:21px;letter-spacing:-.04em;text-decoration:none;justify-self:start}
.nav-pill{position:relative;display:flex;gap:2px;padding:4px;border-radius:999px;border:1px solid var(--line);
  background:color-mix(in srgb,var(--surface) 88%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.nav-pill a{position:relative;z-index:1;padding:7px 15px;border-radius:999px;color:var(--muted);font-size:15px;text-decoration:none;transition:color .2s var(--ease)}
.nav-pill a.is-active,.nav-pill a[aria-current]{color:var(--ink)}
.nav-glider{position:absolute;z-index:0;inset:4px 0;border-radius:999px;background:var(--bg-2);opacity:0;
  clip-path:inset(0 calc(100% - var(--gx,0px) - var(--gw,0px)) 0 var(--gx,0px) round 999px);
  transition:clip-path .35s var(--ease),opacity var(--dur) var(--ease)}
.nav-pill.has-glider .nav-glider{opacity:1}
.nav-end{justify-self:end;display:flex;align-items:center;gap:8px}
.nav-login{display:inline-flex;align-items:center;min-height:36px;padding:0 10px;border-radius:999px;color:var(--muted);font-size:15px;text-decoration:none;transition:color .2s var(--ease)}
.nav-end .menu-button{display:none}
.menu-button .icon-close,.menu-button[aria-expanded="true"] .icon-menu{opacity:0}
.menu-button[aria-expanded="true"] .icon-close{opacity:1}
.menu-button svg{transition:opacity .15s var(--ease)}
.mobile-menu{position:absolute;top:calc(100% + 6px);left:max((100% - 1180px)/2,clamp(16px,4vw,48px));right:max((100% - 1180px)/2,clamp(16px,4vw,48px));
  display:grid;gap:2px;padding:8px;border-radius:18px;background:var(--surface);border:1px solid var(--line-strong);box-shadow:var(--shadow-lg);
  transform-origin:100% 0;animation:menu-in .2s var(--ease)}
.mobile-menu[hidden]{display:none}
.mobile-menu a{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:12px;color:var(--ink);font-size:17px;text-decoration:none}
@keyframes menu-in{from{opacity:0;transform:translateY(-6px) scale(.98)}}
.icon{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.icon-button{display:grid;place-items:center;width:36px;height:36px;padding:0;border-radius:999px;border:1px solid var(--control-line);
  background:var(--surface);color:var(--muted);cursor:pointer;font:inherit}
.icon-button svg{grid-area:1/1;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icon-button .icon-play{fill:currentColor;stroke-width:1.5;opacity:0}
.icon-button[aria-pressed="true"]{color:var(--ink)}
.icon-button[aria-pressed="true"] .icon-pause{opacity:0}
.icon-button[aria-pressed="true"] .icon-play{opacity:1}
/* Light/dark switch: sun left, moon right; knob shows the active side. */
.theme-switch{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;align-items:center;width:66px;height:36px;padding:0 3px;
  border:1px solid var(--control-line);border-radius:999px;background:var(--surface);color:var(--muted);cursor:pointer;font:inherit}
.theme-icon{position:relative;z-index:1;display:grid;place-items:center;height:100%;transition:color .2s var(--ease)}
.theme-icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.theme-knob{position:absolute;top:3px;left:3px;width:29px;height:28px;border-radius:999px;background:var(--accent);transition:transform .25s var(--ease)}
.theme-switch[aria-checked="true"] .theme-knob{transform:translateX(29px)}
.theme-switch[aria-checked="false"] .theme-sun,.theme-switch[aria-checked="true"] .theme-moon{color:var(--accent-ink)}

/* Buttons */
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:999px;cursor:pointer;border:0;font-family:inherit;
  background:var(--accent);color:var(--accent-ink);font-weight:550;font-size:16px;text-decoration:none;white-space:nowrap;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .16),0 1px 2px rgb(27 32 37 / .12);
  transition:transform .16s var(--ease),background-color .2s var(--ease)}
.button:active{transform:scale(.97)}
.button-small{min-height:36px;padding:0 15px;font-size:15px;gap:7px}
.button-ghost{background:color-mix(in srgb,var(--surface) 55%,transparent);color:var(--ink);box-shadow:inset 0 0 0 1px var(--control-line)}
.button-chip{padding:0 6px 0 22px;gap:14px}
.chip{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--accent-ink);color:var(--accent)}
.chip svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
/* Rolling label on primary buttons (fine pointers). */
.roll{display:inline-flex;flex-direction:column;height:1.3em;line-height:1.3;overflow:hidden}
.roll::after{content:attr(data-label)}
.roll>span,.roll::after{transition:transform .25s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .nav-pill a:hover,.nav-login:hover{color:var(--ink)}
  .mobile-menu a:hover{background:var(--bg-2)}
  .theme-switch:hover,.icon-button:hover{background:var(--bg-2)}
  .button:hover{background:var(--accent-strong)}
  .button-ghost:hover{background:var(--bg-2)}
  .button:hover .roll>span,.button:hover .roll::after{transform:translateY(-100%)}
  .button-chip:hover .chip svg{transform:translateX(2px)}
}

/* Badges, section heads, links */
.section{width:var(--page);margin:0 auto;padding:clamp(80px,11vw,140px) 0}
.section h2{font-size:clamp(34px,4.6vw,60px);line-height:1.02;letter-spacing:-.04em}
h2 .dim{display:block}
.section-top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:clamp(28px,4vw,44px)}
.more{display:inline-flex;align-items:center;gap:6px;flex:none;min-height:36px;color:var(--muted);font-size:15px;text-decoration:none;transition:color .2s var(--ease)}
.more svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
@media (hover:hover) and (pointer:fine){.more:hover{color:var(--ink)}.more:hover svg{transform:translateX(3px)}}
.center-head{display:grid;justify-items:center;text-align:center;margin:0 auto clamp(36px,5vw,56px);max-width:820px}
.center-head>p{margin-top:16px;color:var(--muted);max-width:52ch}
.mark{display:grid;place-items:center;width:56px;height:56px;margin-bottom:22px;border-radius:16px;background:var(--surface);
  border:1px solid var(--line-strong);box-shadow:var(--shadow),0 0 0 6px color-mix(in srgb,var(--accent-soft) 55%,transparent)}
.mark svg{width:26px;height:26px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Stage: framed, cinematic surface. WebGL draws the light when available; the CSS gradient is the fallback. */
.stage{position:relative;isolation:isolate;overflow:hidden;border-radius:clamp(20px,2.4vw,30px);border:1px solid var(--line);
  background:radial-gradient(70% 90% at 16% 28%,var(--stage-1),transparent 72%),radial-gradient(55% 65% at 86% 82%,var(--stage-2),transparent 72%),var(--stage-0)}
.stage-canvas{position:absolute;inset:0;z-index:-1;width:100%;height:100%;opacity:0;transition:opacity .8s var(--ease)}
.stage.gl-on .stage-canvas{opacity:1}
/* Controls on the stage keep 3:1 against its brightest light. */
.stage .button-ghost{box-shadow:inset 0 0 0 1px var(--stage-line)}

/* Hero */
.hero{padding:4px var(--inset) 0}
.hero .stage{display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(48px,9vh,96px) clamp(16px,4vw,48px) 0;min-height:calc(100svh - 76px)}
.hero-copy{display:grid;justify-items:center;max-width:980px}
.hero h1{margin-top:0;font-size:clamp(46px,8vw,96px);line-height:.96;letter-spacing:-.04em}
.lead{margin-top:26px;max-width:40ch;font-size:clamp(18px,1.6vw,21px);line-height:1.55;color:var(--muted)}
.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:36px}
.hero-copy>*{animation:rise var(--dur-slow) var(--ease) both}
.hero-copy>h1{animation:none}
.hero-copy>:nth-child(3){animation-delay:.28s}.hero-copy>:nth-child(4){animation-delay:.36s}
.hero h1 .w{display:inline-block;animation:word var(--dur-slow) var(--ease) both}
.hero h1 .w:nth-child(1){animation-delay:.06s}.hero h1 .w:nth-child(2){animation-delay:.12s}
.hero h1 .w:nth-child(3){animation-delay:.2s}.hero h1 .w:nth-child(4){animation-delay:.26s}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes word{from{opacity:0;transform:translateY(.32em) scale(.96)}to{opacity:1;transform:none}}

/* Hero product shot: tilted at the top, flattens while scrolling (--tilt from home.js). */
.hero-shot{width:min(1060px,100%);margin:clamp(44px,7vh,76px) 0 -56px;perspective:1600px;animation:shot .7s var(--ease) .25s both}
@keyframes shot{from{opacity:0;transform:translateY(48px)}to{opacity:1;transform:none}}
.js .hero-shot{--tilt:1}
.hero-window{text-align:left;transform-origin:50% 0;
  transform:rotateX(calc(var(--tilt,0)*14deg)) scale(calc(1 - var(--tilt,0)*.04))}

/* Window chrome shared by all product mock-ups */
.window{position:relative;border-radius:18px;background:var(--surface);border:1px solid var(--line-strong);box-shadow:var(--shadow-lg);overflow:hidden}
.window-bar{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--bg-2)}
.dots{display:flex;gap:6px;flex:none}
.dots i{width:9px;height:9px;border-radius:50%;background:var(--line-strong)}
.path{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 12px/1.6 var(--mono);color:var(--muted);
  background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:1px 10px}
.demo-chip{flex:none;margin-left:auto;font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:2px 10px;background:var(--surface)}
.cursor{position:absolute;z-index:3;display:flex;align-items:flex-start;pointer-events:none;opacity:0}
.cursor svg{fill:var(--ink);stroke:var(--surface);stroke-width:1.4;filter:drop-shadow(0 2px 3px rgb(0 0 0 / .25));transition:transform .12s var(--ease)}
.cursor b{margin:15px 0 0 -2px;font-size:11px;font-weight:600;line-height:1.5;background:var(--accent);color:var(--accent-ink);border-radius:6px;padding:1px 6px}
.file{display:grid;place-items:center;width:30px;height:36px;border-radius:7px;background:var(--surface);border:1px solid var(--line-strong);font:600 10px var(--mono);color:var(--muted)}

/* Hero batch demo: arrive, recognise, select, approve, book (classes b-1 … b-6 from home.js). */
.inbox{padding:18px 20px 72px;transition:opacity .3s var(--ease)}
.inbox-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.inbox-title b{display:block;font-size:18px;font-weight:600;letter-spacing:-.02em}
.inbox-title small{font-size:13px;color:var(--muted)}
.bulk{display:grid;align-items:center;min-width:min(330px,100%);height:44px;font-size:14px}
.bulk>*{grid-area:1/1;display:flex;align-items:center;gap:12px;height:100%;opacity:0;transform:scale(.97);transition:opacity .25s var(--ease),transform .25s var(--ease)}
.bulk-idle{padding:0 14px 0 36px;border-radius:999px;border:1px solid var(--line-strong);color:var(--muted);position:relative}
.bulk-idle::before{content:"";position:absolute;left:14px;top:50%;width:10px;height:10px;margin-top:-7px;border-radius:50%;border:1.6px solid var(--muted)}
.bulk-idle::after{content:"";position:absolute;left:24px;top:50%;width:5px;height:1.6px;margin-top:3px;background:var(--muted);transform:rotate(45deg)}
.bulk-select{justify-content:flex-end;padding-left:12px}
.bulk-select b{font-weight:600}
.bulk-button{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-weight:600;transition:transform .12s var(--ease)}
.bulk-run{padding:0 14px;border-radius:999px;background:var(--bg-2);border:1px solid var(--line)}
.bulk-label{flex:none;font-weight:550}
.bulk-track{flex:1;height:6px;border-radius:999px;background:var(--line);overflow:hidden}
.bulk-track i{display:block;height:100%;width:100%;border-radius:inherit;background:var(--accent);transform:scaleX(0);transform-origin:0 50%}
.bulk-done{justify-content:center;border-radius:999px;background:var(--ok-soft);color:var(--ok);font-weight:600}
.hero-window:not(.b-3) .bulk-idle,.b-3:not(.b-5) .bulk-select,.b-5:not(.b-6) .bulk-run,.b-6 .bulk-done{opacity:1;transform:none}
.b-5 .bulk-track i{transform:scaleX(1);transition:transform 2.3s cubic-bezier(.4,0,.6,1)}
.b-4.is-pressed .bulk-button{transform:scale(.95)}
.rows{list-style:none;margin-top:16px;display:grid;gap:8px}
.row{display:grid;grid-template-columns:18px 30px minmax(0,1.5fr) minmax(0,1.1fr) auto 112px;align-items:center;gap:14px;
  padding:10px 14px;border-radius:12px;border:1px solid var(--line);background:var(--bg);
  opacity:0;transform:translateY(10px);transition:opacity .4s var(--ease),transform .4s var(--ease),border-color .3s var(--ease)}
.row-main{min-width:0}
.row-main b{display:block;font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-main small{font-size:12.5px;color:var(--muted);white-space:nowrap}
.row-acct{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-amt{font-size:14px;font-weight:600;white-space:nowrap}
.row-state{display:grid;justify-items:end}
.row-state i{grid-area:1/1;font-style:normal;font-size:12px;font-weight:600;border-radius:999px;padding:3px 10px;white-space:nowrap;
  opacity:0;transform:scale(.92);transition:opacity .25s var(--ease),transform .25s var(--ease)}
.row-state i:nth-child(1){background:var(--wait-soft);color:var(--wait)}
.row-state i:nth-child(2){background:var(--accent-soft);color:var(--accent)}
.row-state i:nth-child(3){background:var(--ok-soft);color:var(--ok)}
.box{width:18px;height:18px;border-radius:5px;box-shadow:inset 0 0 0 1.5px var(--control-line);position:relative;transition:background-color .2s var(--ease),box-shadow .2s var(--ease)}
.box::after{content:"";position:absolute;left:6px;top:2.5px;width:5px;height:9px;border:solid var(--accent-ink);border-width:0 2px 2px 0;transform:rotate(45deg) scale(.4);opacity:0;transition:opacity .2s var(--ease),transform .2s var(--ease)}
.b-1 .row{opacity:1;transform:none}
.row:nth-child(2){transition-delay:.12s}.row:nth-child(3){transition-delay:.24s}.row:nth-child(4){transition-delay:.36s}
.b-1:not(.b-2) .row-state i:nth-child(1){opacity:1;transform:none;animation:breathe 1.2s ease-in-out infinite}
@keyframes breathe{50%{opacity:.55}}
.b-2:not(.b-5) .row-state i:nth-child(2),.b-5 .row-state i:nth-child(3){opacity:1;transform:none}
.b-2 .row:nth-child(2) .row-state i,.b-3 .row:nth-child(2) .box,.b-3 .row:nth-child(2) .box::after{transition-delay:.15s}
.b-2 .row:nth-child(3) .row-state i,.b-3 .row:nth-child(3) .box,.b-3 .row:nth-child(3) .box::after{transition-delay:.3s}
.b-2 .row:nth-child(4) .row-state i,.b-3 .row:nth-child(4) .box,.b-3 .row:nth-child(4) .box::after{transition-delay:.45s}
.b-5 .row:nth-child(1) .row-state i{transition-delay:.4s}.b-5 .row:nth-child(2) .row-state i{transition-delay:1s}
.b-5 .row:nth-child(3) .row-state i{transition-delay:1.6s}.b-5 .row:nth-child(4) .row-state i{transition-delay:2.2s}
.b-3 .box{background:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent)}
.b-3 .box::after{opacity:1;transform:rotate(45deg) scale(1)}
.b-3 .row{border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.b-6 .row{border-color:var(--line)}
.hero-window .cursor{left:calc(100% - 108px);top:76px;transform:translate(70px,150px);transition:opacity .3s var(--ease),transform .8s var(--ease)}
.b-4:not(.b-5) .cursor{opacity:1;transform:none}
.b-4.is-pressed .cursor svg{transform:scale(.86)}
.b-5 .cursor{opacity:0;transform:translate(24px,30px)}
.hero-window.is-resetting .inbox{opacity:0}

/* Trust strip: verifiable facts instead of logos. */
.proof{width:var(--page);margin:clamp(72px,9vw,112px) auto 0;padding:26px 0;border-block:1px solid var(--line);display:grid;gap:18px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.proof-list{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px 22px}
.proof-list li{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:500;line-height:1.35}
.proof-list svg{flex:none;width:22px;height:22px;fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#belege{padding-top:clamp(64px,8vw,112px)}

/* Receipt cards (getlayers-style gallery): media with a small looping scene, caption with a mono tag. */
.cards{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.card-media{position:relative;aspect-ratio:16/11;border-radius:18px;overflow:hidden;isolation:isolate;border:1px solid var(--line);
  background:radial-gradient(80% 70% at 50% 0%,color-mix(in srgb,var(--accent-soft) 80%,transparent),transparent 70%),var(--bg-2)}
.card-media>*{position:absolute;inset:0;transition:transform .5s var(--ease)}
.card-cap{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 4px 0}
.card-cap h3{font-size:17px;font-weight:550;letter-spacing:-.02em}
.tag{flex:none;font:500 12px var(--mono);color:var(--faint);letter-spacing:0}
.card>p{padding:6px 4px 0;font-size:14.5px;line-height:1.55;color:var(--muted);max-width:44ch}
/* Pointer-following edge light (cards, control list). */
.card-media::after,.litem::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),var(--accent),transparent 65%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  transition:opacity .3s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .card:hover .card-media>*{transform:scale(1.035)}
  .card:hover .card-media::after,.litem:hover::after{opacity:1}
}
.pop{position:absolute;right:7%;bottom:9%;padding:5px 11px;border-radius:999px;background:var(--accent);color:var(--accent-ink);
  font-size:12.5px;font-weight:600;white-space:nowrap;box-shadow:var(--shadow)}
.paper,.invoice,.fx-card,.page,.statement,.env,.mini-inbox li{background:var(--surface);border:1px solid var(--line-strong);box-shadow:var(--shadow)}
.paper i,.invoice i,.page i{display:block;height:6px;border-radius:4px;background:var(--line);margin-top:9px}
.paper i:nth-of-type(2),.invoice i:nth-of-type(2),.page i:nth-of-type(2){width:72%}
.paper i:nth-of-type(3),.page i:nth-of-type(3){width:56%}

/* Scene 1: thermal receipt prints, scan light passes, account chip appears. */
.sc-receipt{container-type:size}
.sc-receipt .paper{position:absolute;left:50%;top:12%;width:44%;height:78%;margin-left:-22%;padding:12% 9% 0;border-radius:6px 6px 0 0;font-size:12px;
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 7px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/12px 7px repeat-x;
  mask:linear-gradient(#000 0 0) top/100% calc(100% - 7px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/12px 7px repeat-x;
  animation:print 6s var(--ease) infinite}
.paper b{display:block;font-weight:600;font-size:12.5px;line-height:1.3}
.paper-total{display:flex;justify-content:space-between;gap:6px;margin-top:14px;padding-top:8px;border-top:1px dashed var(--line-strong);font-weight:600;font-size:12px}
.scanline{position:absolute;left:24%;right:24%;top:12%;height:2px;border-radius:2px;background:var(--accent);box-shadow:0 0 18px 4px color-mix(in srgb,var(--accent) 45%,transparent);
  opacity:0;animation:scan 6s var(--ease-io) infinite}
.sc-receipt .pop{animation:pop 6s var(--ease) infinite}
@keyframes print{0%{transform:translateY(34%);opacity:0}18%,86%{transform:none;opacity:1}100%{transform:translateY(-6%);opacity:0}}
@keyframes scan{0%,22%{transform:translateY(0);opacity:0}26%{opacity:1}52%{transform:translateY(74cqh);opacity:1}56%,100%{opacity:0;transform:translateY(74cqh)}}
@keyframes pop{0%,56%{opacity:0;transform:translateY(8px) scale(.94)}64%,88%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-4px) scale(.98)}}

/* Scene 2: QR invoice, scan brackets lock on. */
.sc-qr .invoice{position:absolute;left:14%;top:12%;width:48%;height:80%;padding:7% 7% 0;border-radius:8px;font-size:12px}
.invoice b{display:block;font-weight:600;font-size:12.5px}
.qr{position:absolute;right:9%;bottom:9%;width:44%;aspect-ratio:1}
.qr svg{width:100%;height:100%;fill:var(--ink)}
.qr .qr-cross{fill:var(--ink)}
.qr .qr-plus{fill:var(--surface)}
.bracket{position:absolute;inset:-9px;border:2px solid var(--accent);border-radius:7px;
  -webkit-mask:conic-gradient(at 11px 11px,#0000 75%,#000 0) 0 0/calc(100% - 11px) calc(100% - 11px);
  mask:conic-gradient(at 11px 11px,#0000 75%,#000 0) 0 0/calc(100% - 11px) calc(100% - 11px);animation:lock 6s var(--ease) infinite}
.sc-qr .pop{animation:pop 6s var(--ease) infinite}
@keyframes lock{0%,10%{transform:scale(1.5);opacity:0}30%{transform:scale(1.06);opacity:1}38%,88%{transform:scale(1);opacity:1}100%{opacity:0;transform:scale(1)}}

/* Scene 3: foreign currency converted with the ESTV rate. */
.sc-fx{display:grid;place-items:center}
.fx-card{position:relative;display:grid;justify-items:center;gap:6px;padding:18px 26px 16px;border-radius:14px;min-width:58%}
.fx-from{font-size:clamp(22px,2.2vw,28px);font-weight:600;letter-spacing:-.03em;animation:fx-a 6s var(--ease) infinite}
.fx-arrow svg{width:20px;height:20px;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fx-arrow{animation:fx-b 6s var(--ease) infinite}
.fx-to{font-size:15px;font-weight:600;animation:fx-c 6s var(--ease) infinite}
.fx-badge{margin-top:4px;font-size:11.5px;font-weight:600;color:var(--accent);background:var(--accent-soft);border-radius:999px;padding:3px 10px;animation:fx-d 6s var(--ease) infinite}
@keyframes fx-a{0%{opacity:0;transform:translateY(-8px)}12%,88%{opacity:1;transform:none}100%{opacity:0}}
@keyframes fx-b{0%,14%{opacity:0;transform:translateY(-6px)}26%{opacity:1;transform:translateY(3px)}32%,88%{opacity:1;transform:none}100%{opacity:0}}
@keyframes fx-c{0%,30%{opacity:0;transform:translateY(8px)}42%,88%{opacity:1;transform:none}100%{opacity:0}}
@keyframes fx-d{0%,46%{opacity:0;transform:scale(.9)}56%,88%{opacity:1;transform:none}100%{opacity:0}}

/* Scene 4: forwarded mail flies into the inbox. */
.env{position:absolute;left:5%;top:14%;width:22%;aspect-ratio:3/2;border-radius:8px;overflow:hidden;animation:fly 6s var(--ease) infinite}
.env-flap{position:absolute;inset:0 0 40% 0;background:var(--bg-2);clip-path:polygon(0 0,100% 0,50% 100%);border-bottom:1px solid var(--line)}
.env-file{position:absolute;left:12%;bottom:12%;font:600 10px var(--mono);color:var(--muted)}
.mini-inbox{position:absolute;right:5%;top:22%;width:65%;list-style:none;display:grid;gap:8px}
.mini-inbox li{display:flex;justify-content:space-between;align-items:center;gap:8px;min-width:0;height:34px;padding:0 10px;border-radius:9px;font-size:11.5px}
.mini-inbox li b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 11px var(--mono)}
.mini-inbox li em{flex:none;font-style:normal;font-weight:600;color:var(--ok);background:var(--ok-soft);border-radius:999px;padding:2px 8px;white-space:nowrap}
.mini-inbox li:not(:first-child) b,.mini-inbox li:not(:first-child) em{display:block;height:6px;width:40%;padding:0;border-radius:4px;background:var(--line)}
.mini-inbox li:not(:first-child) em{width:24%}
.mini-inbox li:first-child{animation:land 6s var(--ease) infinite}
@keyframes fly{0%{opacity:0;transform:translate(-30%,-20%) rotate(-8deg)}14%{opacity:1;transform:none}36%{opacity:1;transform:translate(150%,30%) scale(.6) rotate(4deg)}42%,100%{opacity:0;transform:translate(160%,32%) scale(.5)}}
@keyframes land{0%,36%{opacity:0;transform:translateY(-8px)}46%,90%{opacity:1;transform:none;box-shadow:0 0 0 2px var(--accent)}100%{opacity:0}}

/* Scene 5: pages of a monthly invoice fan out and stack. */
.page{position:absolute;left:50%;top:14%;width:32%;height:74%;margin-left:-16%;padding:6% 5% 0;border-radius:7px;font-size:11px;transform-origin:50% 100%}
.page b{display:block;font-weight:600;font-size:11.5px}
.page:nth-child(1){z-index:3;animation:fan-a 6s var(--ease) infinite}
.page:nth-child(2){z-index:2;animation:fan-b 6s var(--ease) infinite;transform:translate(6px,-6px)}
.page:nth-child(3){z-index:1;animation:fan-c 6s var(--ease) infinite;transform:translate(12px,-12px)}
.sc-pages .pop{z-index:4;animation:pop 6s var(--ease) infinite}
@keyframes fan-a{0%,8%{transform:none}24%,40%{transform:translateX(-62%) rotate(-10deg)}58%,100%{transform:none}}
@keyframes fan-b{0%,8%{transform:translate(6px,-6px)}24%,40%{transform:translateY(-4%)}58%,100%{transform:translate(6px,-6px)}}
@keyframes fan-c{0%,8%{transform:translate(12px,-12px)}24%,40%{transform:translateX(62%) rotate(10deg)}58%,100%{transform:translate(12px,-12px)}}

/* Scene 6: bank fee line is picked from the statement. */
.statement{position:absolute;left:12%;top:14%;width:62%;list-style:none;padding:8px;border-radius:12px;display:grid;gap:2px;font-size:12px}
.statement li{display:flex;justify-content:space-between;gap:10px;padding:7px 10px;border-radius:8px;color:var(--muted)}
.statement .hit{color:var(--ink);font-weight:600;background:var(--accent-soft);box-shadow:inset 0 0 0 1.5px var(--accent);animation:hit 6s var(--ease) infinite}
.sc-bank .pop{animation:pop 6s var(--ease) infinite}
@keyframes hit{0%,18%{background:transparent;box-shadow:inset 0 0 0 0 var(--accent);transform:none}30%,88%{background:var(--accent-soft);box-shadow:inset 0 0 0 1.5px var(--accent);transform:scale(1.04)}100%{background:transparent;transform:none}}


/* Receipt stack: scattered receipts settle into the journal (--p 0 to 1, set by home.js). */
.stack{--p:1;position:relative;overflow:clip}
.stack-sticky{width:var(--page);margin:0 auto;padding:clamp(72px,11vw,136px) 0;display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,5vw,72px);align-items:center}
.js .stack{height:200vh}
.js .stack-sticky{position:sticky;top:0;height:100vh;padding:0}
.stack-copy h2{display:grid;font-size:clamp(36px,4.6vw,60px);line-height:1.02;letter-spacing:-.04em}
.stack-copy h2>span{grid-area:1/1}
.stack-before{opacity:calc(1 - clamp(0,(var(--p) - .4)*6,1))}
.stack-after{opacity:clamp(0,(var(--p) - .58)*6,1);color:var(--accent)}
.stack-copy p{margin-top:20px;color:var(--muted);max-width:34ch}
.stack-stage{--row:64px;--slip-w:min(400px,100% - 28px);--spread:1;position:relative;height:500px;perspective:1200px}
.journal{position:absolute;left:50%;top:50%;width:calc(var(--slip-w) + 28px);height:calc(5*var(--row) + 122px);
  margin:calc(-2.5*var(--row) - 60px) 0 0 calc((var(--slip-w) + 28px)/-2);
  display:flex;justify-content:space-between;align-items:flex-start;padding:14px 16px;font-size:14px;font-weight:600;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:20px;box-shadow:var(--shadow-lg);
  opacity:clamp(0,(var(--p) - .5)*3,1);transform:scale(calc(.96 + .04*clamp(0,(var(--p) - .5)*3,1)))}
.slip{--e:clamp(0,(var(--p) - var(--d))*1.7,1);--s:calc(var(--e)*var(--e)*(3 - 2*var(--e)));
  --y1:calc((var(--i) - 2.5)*var(--row) + 20px);
  position:absolute;left:50%;top:50%;width:var(--slip-w);height:56px;margin:-28px 0 0 calc(var(--slip-w)/-2);
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-rows:auto auto;column-gap:14px;align-content:center;
  padding:0 14px;background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 1px 2px rgb(27 32 37 / .06),0 calc(18px*(1 - var(--s))) calc(40px*(1 - var(--s))) -18px rgb(27 32 37 / .3);
  transform:translate3d(calc(var(--x)*var(--spread)*(1 - var(--s))),calc(var(--y0)*(1 - var(--s)) + var(--y1)*var(--s)),0)
    rotateX(calc(var(--rx)*(1 - var(--s)))) rotate(calc(var(--r)*(1 - var(--s))))}
.slip-kind{font-weight:600;font-size:15px;grid-row:1}
.slip-account{grid-row:2;font-size:12px;color:var(--muted);opacity:clamp(0,(var(--e) - .6)*3,1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slip-amount{grid-row:1/3;grid-column:2;align-self:center;font-weight:600;font-size:15px}
.slip-state{grid-row:1/3;grid-column:3;align-self:center;display:grid;font-size:12px;font-weight:600}
.slip-state i{grid-area:1/1;font-style:normal;border-radius:999px;padding:3px 10px;text-align:center}
.slip-state i:first-child{background:var(--wait-soft);color:var(--wait);opacity:calc(1 - clamp(0,(var(--e) - .85)*8,1))}
.slip-state i:last-child{background:var(--ok-soft);color:var(--ok);opacity:clamp(0,(var(--e) - .85)*8,1)}
.slip:nth-child(2){--i:0;--d:0;--x:-210px;--y0:-150px;--r:-12deg;--rx:18deg}
.slip:nth-child(3){--i:1;--d:.06;--x:170px;--y0:-175px;--r:9deg;--rx:24deg}
.slip:nth-child(4){--i:2;--d:.12;--x:-60px;--y0:-30px;--r:-5deg;--rx:14deg}
.slip:nth-child(5){--i:3;--d:.18;--x:220px;--y0:40px;--r:13deg;--rx:20deg}
.slip:nth-child(6){--i:4;--d:.24;--x:-225px;--y0:125px;--r:8deg;--rx:26deg}
.slip:nth-child(7){--i:5;--d:.3;--x:80px;--y0:175px;--r:-9deg;--rx:16deg}

/* Process tabs: numbered cards drive the window below (ARIA tabs, autoplay with progress). */
.tablist{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:14px}
.tab{position:relative;display:grid;align-content:start;gap:4px;min-height:132px;padding:14px 16px 18px;border-radius:16px;text-align:left;
  border:1px solid var(--line);background:var(--surface);color:var(--muted);font:inherit;cursor:pointer;overflow:hidden;
  transition:background-color .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease)}
.tab-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.tab-top svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tab-num{font:500 12px var(--mono);color:var(--faint)}
.tab b{font-size:16px;font-weight:600;color:var(--ink);letter-spacing:-.015em}
.tab-text{font-size:13.5px;line-height:1.45}
.tab[aria-selected="true"]{background:var(--bg-2);border-color:var(--control-line);color:var(--ink)}
.tab[aria-selected="true"] .tab-top svg{color:var(--accent)}
.tab[aria-selected="true"] .tab-num{color:var(--muted)}
.tab-bar{position:absolute;left:16px;right:16px;bottom:8px;height:2px;border-radius:2px;background:var(--line);opacity:0}
.tab-bar i{display:block;height:100%;border-radius:inherit;background:var(--accent);transform:scaleX(0);transform-origin:0 50%}
.tabs.is-auto .tab[aria-selected="true"] .tab-bar{opacity:1}
.tabs{--step:7s}  /* time per step; own token, the global --dur is a short UI transition */
.tabs.is-auto .tab[aria-selected="true"] .tab-bar i{animation:fill var(--step) linear forwards}
.tabs.is-held .tab-bar i{animation-play-state:paused!important}
@keyframes fill{to{transform:scaleX(1)}}
@media (hover:hover) and (pointer:fine){.tab:hover{border-color:var(--line-strong);color:var(--ink)}}
.flow-window .path{max-width:60%}
.panel{display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:484px}
.panel:focus-visible{outline-offset:-4px}
.panel[hidden]{display:none}
.panel:not([hidden]){animation:panel-in var(--dur) var(--ease)}
@keyframes panel-in{from{opacity:0;transform:translateY(4px)}}
.panel-text{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:8px 32px;align-items:baseline;padding:20px 24px;border-top:1px solid var(--line);background:var(--bg-2)}
.panel-text h3{font-size:19px;font-weight:600;letter-spacing:-.02em}
.panel-text p{color:var(--muted);font-size:15.5px}
.step-next{grid-column:1/-1;justify-self:start;margin-top:6px}
.pv{position:relative;padding:clamp(20px,3vw,36px)}
/* Panels are revealed by home.js; their one-shot animations end in the finished state. */
.pv-mail{display:grid;align-content:center;gap:18px;max-width:640px;width:100%;margin:0 auto}
.mail-list{list-style:none;display:grid;gap:8px}
.mail-list li{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:12px;height:58px;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:var(--bg)}
.avatar{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--bg-2);border:1px solid var(--line-strong);font-weight:600;font-size:13px;color:var(--muted)}
.mail-who{min-width:0}
.mail-who b{display:block;font-size:14px;font-weight:600}
.mail-who small{display:block;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clip{font:500 11.5px var(--mono);color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:3px 9px;background:var(--surface)}
.mail-new{border-color:var(--accent)!important;background:var(--accent-soft)!important;animation:mail-in .7s var(--ease) both}
.mail-new .avatar{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.mail-list li:not(.mail-new){animation:nudge .7s var(--ease) both}
@keyframes mail-in{from{opacity:0;transform:translateY(-16px) scale(.98)}}
@keyframes nudge{from{transform:translateY(-66px)}}
.pv-checks{display:flex;flex-wrap:wrap;gap:8px}
.pv-checks span,.checklist li{position:relative;padding:6px 12px 6px 32px;border-radius:999px;font-size:13.5px;font-weight:550;background:var(--ok-soft);color:var(--ok)}
.pv-checks span::before,.checklist li::before{content:"";position:absolute;left:12px;top:50%;width:5px;height:9px;margin-top:-6px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg)}
.pv-checks span{animation:chip-in .45s var(--ease) both}
.pv-checks span:nth-child(1){animation-delay:.7s}.pv-checks span:nth-child(2){animation-delay:1s}.pv-checks span:nth-child(3){animation-delay:1.3s}
@keyframes chip-in{from{opacity:0;transform:translateY(6px) scale(.94)}}
.pv-read{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(20px,4vw,48px);align-items:center;max-width:760px;width:100%;margin:0 auto}
.slipdoc{position:relative;display:grid;gap:8px;padding:22px 20px;border-radius:8px;background:var(--surface);border:1px solid var(--line-strong);box-shadow:var(--shadow);font-size:13px;overflow:hidden}
.slipdoc b{font-weight:600}
.slipdoc i{display:block;height:6px;border-radius:4px;background:var(--line)}
.slipdoc i:nth-of-type(2){width:70%}
.hl{justify-self:start;padding:1px 6px;margin-left:-6px;border-radius:5px;box-shadow:inset 0 0 0 1.5px var(--accent);background:var(--accent-soft);animation:hl .5s var(--ease) both}
.hl-1{animation-delay:.5s}.hl-2{animation-delay:.8s}.hl-3{animation-delay:1.1s}.hl-4{animation-delay:1.4s}
@keyframes hl{from{box-shadow:inset 0 0 0 0 var(--accent);background:transparent}}
.slipdoc .beam{position:absolute;left:0;right:0;top:0;height:2px;background:var(--accent);box-shadow:0 0 16px 3px color-mix(in srgb,var(--accent) 45%,transparent);opacity:0;animation:sweep 1.5s var(--ease-io) .2s both}
@keyframes sweep{0%{opacity:1;transform:translateY(0)}90%{opacity:1}100%{opacity:0;transform:translateY(230px)}}
.read-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px}
.read-fields div{min-width:0}
.read-fields dt{font-size:12px;color:var(--muted)}
.read-fields dd{font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:rise .45s var(--ease) both}
.read-fields div:nth-child(1) dd{animation-delay:.6s}.read-fields div:nth-child(2) dd{animation-delay:.75s}.read-fields div:nth-child(3) dd{animation-delay:.9s}
.read-fields div:nth-child(4) dd{animation-delay:1.05s}.read-fields div:nth-child(5) dd{animation-delay:1.2s}
.read-suggest{grid-column:1/-1;padding:10px 12px;border-radius:12px;background:var(--accent-soft);animation:chip-in .5s var(--ease) 1.5s both}
.read-suggest dt{color:var(--accent)}
.read-suggest dd{animation:none;color:var(--ink)}
.pv-check{display:grid;place-items:center}
.checklist{list-style:none;display:grid;gap:10px;width:min(460px,100%)}
.checklist li{border-radius:12px;padding:12px 14px 12px 38px;font-size:14.5px;animation:chip-in .45s var(--ease) both}
.checklist li::before{left:16px}
.checklist li:nth-child(1){animation-delay:.2s}.checklist li:nth-child(2){animation-delay:.45s}.checklist li:nth-child(3){animation-delay:.7s}
.checklist .check-open{display:grid;gap:8px;animation:open-done .5s var(--ease) 2.6s both}
.checklist .check-open::before{top:23px;margin-top:0;animation:tick .3s var(--ease) 2.6s both}
@keyframes open-done{from{background:var(--wait-soft);color:var(--wait)}}
@keyframes tick{from{opacity:0;transform:rotate(45deg) scale(.4)}}
.check-field{display:block;padding:8px 12px;border-radius:9px;background:var(--surface);border:1px solid var(--control-line);color:var(--ink);font-weight:500}
.typed{display:inline-block;animation:type 1.2s steps(18,end) 1.2s both}
@keyframes type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
.pv-approve{display:grid;justify-items:center;align-content:center;gap:22px}
.entry{width:min(440px,100%);border-radius:14px;border:1px solid var(--line-strong);background:var(--bg);overflow:hidden}
.entry-row{display:flex;justify-content:space-between;gap:16px;padding:12px 16px;font-size:14.5px;animation:rise .45s var(--ease) both}
.entry-row+.entry-row{border-top:1px solid var(--line)}
.entry-row span{color:var(--muted)}
.entry-row b{font-weight:600}
.entry-row:nth-child(2){animation-delay:.12s}.entry-row:nth-child(3){animation-delay:.24s}
.approve-zone{position:relative;display:grid;width:min(440px,100%);height:48px}
.approve-btn,.approved{grid-area:1/1;display:flex;align-items:center;justify-content:center;border-radius:999px;font-size:15px;font-weight:600}
.approve-btn{opacity:0;background:var(--accent);color:var(--accent-ink);animation:btn-go 2.2s var(--ease) both}
.approved{background:var(--ok-soft);color:var(--ok);animation:done-in 2.2s var(--ease) both}
.pv-approve .cursor{left:56%;top:14px;animation:cur 2.2s var(--ease) both}
@keyframes btn-go{0%,72%{opacity:1;transform:none}64%{transform:scale(.96)}86%,100%{opacity:0;transform:scale(.98)}}
@keyframes done-in{0%,76%{opacity:0;transform:scale(.95)}90%,100%{opacity:1;transform:none}}
@keyframes cur{0%{opacity:0;transform:translate(70px,60px)}30%{opacity:1;transform:translate(70px,60px)}56%,66%{opacity:1;transform:none}100%{opacity:0;transform:translate(20px,24px)}}
.pv-post{display:grid;align-content:center;gap:14px;max-width:680px;width:100%;margin:0 auto}
.ledger{list-style:none;display:grid;gap:8px}
.ledger li{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;align-items:center;gap:14px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--bg);font-size:14px}
.ledger li span:nth-child(2){color:var(--muted);font-family:var(--mono);font-size:13px}
.ledger li span:nth-child(3){font-weight:600}
.att{font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:2px 8px;background:var(--surface)}
.ledger em{font-style:normal;font-size:12px;font-weight:600;color:var(--ok);background:var(--ok-soft);border-radius:999px;padding:3px 10px}
.ledger-new{border-color:var(--accent)!important;background:var(--accent-soft)!important;animation:mail-in .7s var(--ease) .2s both}
.ledger li:not(.ledger-new){animation:nudge .7s var(--ease) .2s both}
.ledger-note{font-size:13px;color:var(--muted);text-align:center;animation:rise .5s var(--ease) .9s both}

/* Pair of feature windows */
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.pair .window{height:330px;box-shadow:var(--shadow)}
.control-pair{margin-top:clamp(16px,2vw,24px)}
.pair-cap{display:grid;gap:6px;padding:18px 4px 0}
.pair-cap h3{font-size:19px;font-weight:550;letter-spacing:-.02em}
.pair-cap p{color:var(--muted);font-size:15.5px;max-width:48ch}
.pv-search{display:grid;align-content:start;gap:12px;max-width:400px;margin:0 auto}
.combo+.combo{margin-top:-2px}
.search-head{display:flex;justify-content:space-between;font-size:14px}
.search-head b{font-weight:600}
.combo{display:grid;grid-template-columns:56px 1fr;align-items:center;gap:10px}
.combo-label{font-size:13px;color:var(--muted)}
.combo-field{position:relative;display:grid;align-items:center;height:42px;padding:0 12px;border-radius:10px;border:1.5px solid var(--accent);background:var(--bg);font-size:14.5px;font-weight:550}
.combo-field>span:not(.caret){grid-area:1/1}
.combo-static{border-width:1px;border-color:var(--line-strong);color:var(--ink)}
.combo-old{color:var(--muted);text-decoration:line-through;opacity:0;animation:c-old 7s var(--ease) infinite}
.combo-typed{font-family:var(--mono);opacity:0;animation:c-typed 7s steps(2,end) infinite}
.combo-new{animation:c-new 7s var(--ease) infinite}
.caret{position:absolute;left:12px;top:11px;width:1.5px;height:20px;background:var(--ink);opacity:0;animation:c-caret 7s steps(1) infinite}
.options{position:absolute;z-index:2;left:-1.5px;right:-1.5px;top:calc(100% + 6px);list-style:none;padding:6px;border-radius:12px;border:1px solid var(--line-strong);background:var(--surface);box-shadow:var(--shadow);font-size:13.5px;
  opacity:0;transform-origin:50% 0;animation:c-list 7s var(--ease) infinite}
.options li{padding:7px 10px;border-radius:8px;color:var(--muted)}
.options .opt-pick{color:var(--ink);font-weight:600;animation:c-pick 7s var(--ease) infinite}
.search-ok{justify-self:start;margin-left:66px;font-size:12.5px;font-weight:600;color:var(--ok);background:var(--ok-soft);border-radius:999px;padding:3px 10px;animation:c-ok 7s var(--ease) infinite}
@keyframes c-old{0%,22%{opacity:1}26%,100%{opacity:0}}
@keyframes c-typed{0%,26%{opacity:0;clip-path:inset(0 100% 0 0)}30%{opacity:1}40%,62%{opacity:1;clip-path:inset(0)}64%,100%{opacity:0}}
@keyframes c-new{0%,62%{opacity:0;transform:translateY(4px)}68%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes c-caret{0%,24%{opacity:0}25%,64%{opacity:1}65%,100%{opacity:0}}
@keyframes c-list{0%,30%{opacity:0;transform:scaleY(.92) translateY(-4px)}36%,60%{opacity:1;transform:none}64%,100%{opacity:0;transform:scaleY(.96)}}
@keyframes c-pick{0%,44%{background:transparent}48%,62%{background:var(--accent-soft)}}
@keyframes c-ok{0%,68%{opacity:0;transform:scale(.92)}74%,94%{opacity:1;transform:none}100%{opacity:0}}
.pv-dup{height:calc(100% - 45px);display:grid;place-items:center}
.dup{--bx:-22px;--by:-36px;grid-area:1/1;display:grid;grid-template-columns:1fr auto;gap:2px 16px;width:min(370px,88%);padding:14px 16px;border-radius:14px;border:1px solid var(--line-strong);background:var(--surface);box-shadow:var(--shadow);font-size:14px}
.dup b{font-weight:600}
.dup small{grid-row:2;color:var(--muted);font-size:12.5px}
.dup .num{grid-row:1;grid-column:2;font-weight:600;text-align:right}
.dup em{grid-row:2;grid-column:2;white-space:nowrap;font-style:normal;font-size:12px;font-weight:600;border-radius:999px;padding:2px 9px;background:var(--ok-soft);color:var(--ok);text-align:center}
.dup-a{transform:translate(var(--bx),var(--by))}
.dup-b{--bx:22px;--by:30px;transform:translate(var(--bx),var(--by));border:1px dashed var(--wait);animation:dup-b 6s var(--ease) infinite}
.dup-b em{background:var(--wait-soft);color:var(--wait)}
.dup-note{position:absolute;bottom:20px;font-size:12.5px;font-weight:600;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:3px 11px;background:var(--surface);animation:dup-n 6s var(--ease) infinite}
@keyframes dup-b{0%{opacity:0;transform:translate(calc(var(--bx) + 100px),var(--by))}20%{opacity:1;transform:translate(var(--bx),var(--by))}30%{box-shadow:0 0 0 3px var(--wait)}46%,90%{opacity:1;box-shadow:var(--shadow);transform:translate(var(--bx),var(--by))}100%{opacity:0;transform:translate(var(--bx),var(--by))}}
@keyframes dup-n{0%,52%{opacity:0;transform:translateY(6px)}60%,90%{opacity:1;transform:none}100%{opacity:0}}

/* Control: protocol window and linked list cards */
.control-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(16px,2vw,24px);align-items:start}
.log-window{position:sticky;top:96px}
.log{list-style:none;position:relative;display:grid;gap:4px;padding:22px 22px 26px}
.log::before{content:"";position:absolute;left:95px;top:34px;bottom:44px;width:1px;background:var(--line-strong)}
.log li{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:22px;padding:10px 12px;border-radius:12px;
  transition:background-color .25s var(--ease),opacity .5s var(--ease),transform .5s var(--ease)}
.log li::before{content:"";position:absolute;left:69px;top:17px;width:9px;height:9px;border-radius:50%;background:var(--surface);box-shadow:inset 0 0 0 2px var(--control-line);transition:box-shadow .25s var(--ease),background-color .25s var(--ease)}
.log li>span{grid-row:1/3;font:500 12.5px/1.9 var(--mono);color:var(--muted)}
.log li b{padding-left:14px;font-size:15px;font-weight:600}
.log li small{padding-left:14px;font-size:13px;color:var(--muted)}
.log li:last-child::before{background:var(--ok);box-shadow:0 0 0 4px var(--ok-soft)}
.js .log-window:not(.is-visible) .log li{opacity:0;transform:translateY(8px)}
.log li:nth-child(2){transition-delay:.12s}.log li:nth-child(3){transition-delay:.24s}.log li:nth-child(4){transition-delay:.36s}
.log li:nth-child(5){transition-delay:.48s}.log li:nth-child(6){transition-delay:.6s}
.log-window.is-visible .log li{transition-delay:0s}
.log[data-focus~="e1"] [data-k="e1"],.log[data-focus~="e2"] [data-k="e2"],.log[data-focus~="e3"] [data-k="e3"],
.log[data-focus~="e4"] [data-k="e4"],.log[data-focus~="e5"] [data-k="e5"],.log[data-focus~="e6"] [data-k="e6"]{background:var(--accent-soft)}
.log[data-focus~="e1"] [data-k="e1"]::before,.log[data-focus~="e2"] [data-k="e2"]::before,.log[data-focus~="e3"] [data-k="e3"]::before,
.log[data-focus~="e4"] [data-k="e4"]::before,.log[data-focus~="e5"] [data-k="e5"]::before{background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.control-list{list-style:none;display:grid;gap:10px}
.litem{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr);gap:16px;align-items:start;padding:18px;border-radius:16px;border:1px solid var(--line);background:var(--surface);
  transition:border-color .25s var(--ease),transform .25s var(--ease)}
.thumb{display:grid;place-items:center;width:52px;height:52px;border-radius:13px;background:radial-gradient(circle at 30% 20%,var(--surface),var(--accent-soft));border:1px solid var(--line-strong)}
.thumb svg{width:24px;height:24px;fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.litem h3{font-size:16.5px;font-weight:600;letter-spacing:-.015em}
.litem p{margin-top:4px;color:var(--muted);font-size:14.5px;line-height:1.55}
@media (hover:hover) and (pointer:fine){.litem:hover{border-color:var(--line-strong);transform:translateX(-3px)}}

/* Bexio */
.bexio{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
.bexio-copy>p{margin-top:20px;color:var(--muted);max-width:44ch}
.ticks{list-style:none;margin-top:28px;display:grid;gap:12px}
.ticks li{position:relative;padding-left:32px}
.ticks li::before{content:"";position:absolute;left:0;top:4px;width:20px;height:20px;border-radius:50%;background:var(--accent-soft)}
.ticks li::after{content:"";position:absolute;left:7px;top:8px;width:5px;height:9px;border:solid var(--accent);border-width:0 2px 2px 0;transform:rotate(45deg)}
.note{margin-top:24px;font-size:15px;color:var(--faint)}
.connect{display:grid;gap:22px;padding:clamp(22px,3vw,36px);background:var(--surface);border:1px solid var(--line-strong);border-radius:22px;box-shadow:var(--shadow-lg)}
.connect-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px}
.connect-node{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:18px;padding:12px 16px;border-radius:14px;background:var(--bg);border:1px solid var(--line-strong)}
.connect-target{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.beam svg{width:100%;height:20px;overflow:visible}
.beam path{fill:none;stroke-width:2;stroke-linecap:round}
.beam-base{stroke:var(--accent);stroke-dasharray:4 6}
.ticker{height:176px;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent)}
.ticker ul{list-style:none;display:grid;gap:8px;animation:ticker 22s linear infinite}
.ticker li{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:12px;align-items:center;font-size:14px;padding:10px 14px;border-radius:12px;background:var(--bg);border:1px solid var(--line)}
.ticker li b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ticker li span{color:var(--muted);white-space:nowrap}
.ticker li em{font-style:normal;font-size:12px;font-weight:600;color:var(--ok);background:var(--ok-soft);border-radius:999px;padding:2px 9px}
@keyframes ticker{to{transform:translateY(calc(-50% - 4px))}}

/* Pricing: one plan card, price on request. */
.plan{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);max-width:980px;margin:0 auto;border-radius:24px;
  border:1px solid var(--line-strong);background:var(--surface);box-shadow:var(--shadow-lg);overflow:hidden}
.plan-head{display:grid;align-content:start;justify-items:start;gap:12px;padding:clamp(24px,3.4vw,40px);
  background:radial-gradient(120% 90% at 0% 0%,var(--accent-soft),transparent 70%),var(--bg-2);border-right:1px solid var(--line)}
.plan-name{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:18px;letter-spacing:-.02em}
.plan-price{margin-top:8px;font-size:clamp(32px,3.6vw,44px);font-weight:500;line-height:1.05;letter-spacing:-.04em}
.plan-note{color:var(--muted);font-size:15px;max-width:30ch}
.plan-head .button{margin-top:14px}
.plan-body{padding:clamp(24px,3.4vw,40px)}
.plan-body h3{font-size:15px;font-weight:600;letter-spacing:.02em;color:var(--muted)}
.plan-features{margin-top:18px}
.plan-features li{font-size:15.5px}
.plan::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),var(--accent),transparent 65%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  transition:opacity .3s var(--ease)}
@media (hover:hover) and (pointer:fine){.plan:hover::after{opacity:1}}

/* FAQ */
.faq{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(32px,6vw,96px);align-items:start}
.faq-side{position:sticky;top:110px}
.faq-side>p{margin-top:18px;color:var(--muted);max-width:32ch}
.faq-list{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 0;font-size:18.5px;font-weight:500;letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--control-line);
  background:linear-gradient(currentColor 0 0) 50%/11px 1.6px no-repeat,linear-gradient(currentColor 0 0) 50%/1.6px 11px no-repeat;
  color:var(--muted);transition:transform .3s var(--ease),background-color .2s var(--ease)}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq details p{padding:0 0 24px;color:var(--muted);max-width:62ch}
.faq details[open] p{animation:fade .35s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (hover:hover) and (pointer:fine){.faq summary:hover::after{background-color:var(--bg-2)}}
@supports selector(::details-content){
  .faq details::details-content{block-size:0;overflow:clip;transition:block-size .35s var(--ease),content-visibility .35s allow-discrete}
  .faq details[open]::details-content{block-size:auto;block-size:calc-size(auto,size)}
}

/* Closing stage */
.cta{padding:0 var(--inset);margin:clamp(24px,4vw,48px) 0 clamp(64px,9vw,112px)}
.stage-cta{display:grid;place-items:center;min-height:min(560px,80svh);padding:clamp(48px,8vw,96px) clamp(16px,5vw,64px)}
.cta-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(32px,5vw,72px);align-items:center;width:min(1120px,100%)}
.cta-copy{display:grid;justify-items:start;align-content:center}
.cta h2{font-size:clamp(36px,5vw,68px);line-height:1;letter-spacing:-.04em}
.cta-copy>p{margin-top:18px;color:var(--muted);max-width:40ch}
.cta-copy>.button{margin-top:28px}
.cta-direct a,.form-note a,.form-target a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* Contact form: posts to /kontakt (fetch with JS, plain form post without). */
.contact-form{position:relative;display:grid;gap:14px;padding:clamp(20px,3vw,32px);border-radius:22px;
  background:var(--surface);border:1px solid var(--line-strong);box-shadow:var(--shadow-lg)}
.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.field{display:grid;gap:6px;min-width:0;align-content:start}
.field label{font-size:14px;font-weight:550;color:var(--ink)}
.optional{font-weight:400;color:var(--muted)}
.field input,.field textarea{width:100%;min-height:46px;padding:11px 13px;border-radius:12px;border:1px solid var(--control-line);
  background:var(--bg);color:var(--ink);font:400 16px/1.45 var(--font);letter-spacing:-.006em;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.field textarea{min-height:140px;resize:vertical}
.field input,.field textarea{caret-color:var(--accent)}
.field input:focus,.field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.field input:user-invalid,.field textarea:user-invalid,.field [aria-invalid="true"]{border-color:var(--danger)}
.field-hint{font-size:13px;color:var(--muted)}
.field-error{display:flex;align-items:flex-start;gap:7px;font-size:13.5px;font-weight:550;line-height:1.4;color:var(--danger)}
.field-error:empty{display:none}
.field-error::before{content:"!";display:grid;place-items:center;flex:none;width:16px;height:16px;margin-top:1px;border-radius:50%;
  background:var(--danger);color:var(--surface);font-size:11px;font-weight:700}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.form-note{font-size:13.5px;line-height:1.5;color:var(--muted)}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.form-status{font-size:14.5px;color:var(--muted)}
.form-status:empty{display:none}
.form-status.is-ok{color:var(--ok);font-weight:550}
.form-status.is-error{color:var(--danger);font-weight:550}
.contact-form button:disabled{opacity:.65;cursor:progress}
.form-target{display:none;padding:12px 14px;border-radius:12px;font-size:14.5px;font-weight:550}
.form-target:target{display:block}
.form-target.is-ok{background:var(--ok-soft);color:var(--ok)}
.form-target.is-error{background:var(--wait-soft);color:var(--wait)}

/* Footer */
.footer{width:var(--page);margin:0 auto;padding:56px 0 0;border-top:1px solid var(--line);font-size:15px;color:var(--muted)}
.footer-top{display:grid;grid-template-columns:1fr auto;gap:40px 64px}
.footer-brand .brand{color:var(--ink)}
.footer-brand p{margin-top:8px}
.footer-cols{display:grid;grid-template-columns:repeat(3,minmax(120px,auto));gap:24px 56px}
.footer-cols div{display:grid;align-content:start;gap:6px}
.footer-cols h2{margin-bottom:6px;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--ink)}
.footer-cols a{text-decoration:none;padding:2px 0}
.legal p a,.faq p a,.faq-side p a{text-decoration:underline;text-underline-offset:3px}
.legal{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:32px;margin-top:48px;padding-top:32px;border-top:1px solid var(--line)}
.legal h2{font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ink);margin-bottom:8px}
.legal p{font-size:14px;line-height:1.65;max-width:60ch}
.footer-base{position:relative;margin-top:40px;overflow:hidden}
.copyright{font-size:13px;color:var(--faint)}
.wordmark{margin:18px 0 -0.18em;font-size:clamp(72px,19vw,260px);font-weight:600;letter-spacing:-.04em;line-height:1;text-align:center;
  color:var(--line-strong);user-select:none}
@media (hover:hover) and (pointer:fine){.footer-cols a:hover,.legal a:hover,.faq-side a:hover{color:var(--ink)}}

/* Scroll reveals (classes set by home.js; content stays visible without JS) */
.js [data-reveal]{opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js [data-reveal].is-visible{opacity:1;transform:none}
.cards [data-reveal]:nth-child(3n+2){transition-delay:.07s}.cards [data-reveal]:nth-child(3n){transition-delay:.14s}
.control-list [data-reveal]:nth-child(2){transition-delay:.05s}.control-list [data-reveal]:nth-child(3){transition-delay:.1s}
.control-list [data-reveal]:nth-child(4){transition-delay:.15s}.control-list [data-reveal]:nth-child(5){transition-delay:.2s}
.pair [data-reveal]:nth-child(2){transition-delay:.08s}
/* Looping scenes only run while on screen (is-live from home.js). Gallery cards play one at a time. */
.js .card:not(.is-playing) .card-media *{animation:none}
.js [data-live]:not(.is-live) *,.js [data-live]:not(.is-live)::after{animation-play-state:paused}

/* Layout breakpoints */
@media (max-width:1080px){
  .nav{grid-template-columns:1fr auto}
  .nav-pill,.nav-login{display:none}
  .js .nav-end .menu-button{display:grid}
  .proof-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tablist{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(210px,1fr);overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:4px;scrollbar-width:none}
  .tablist::-webkit-scrollbar{display:none}
  .tab{scroll-snap-align:start;min-height:120px}
}
@media (max-width:980px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stack-sticky,.bexio,.faq,.control-grid,.cta-grid,.plan{grid-template-columns:1fr}
  .js .stack{height:190vh}
  .stack-sticky{align-content:center;gap:24px}
  .stack-stage{height:460px}
  .plan-head{border-right:0;border-bottom:1px solid var(--line)}
  .log-window,.faq-side{position:static}
  .pair{grid-template-columns:1fr}
  .row{grid-template-columns:18px 30px minmax(0,1fr) auto 104px}
  .row-acct{display:none}
}
@media (max-width:720px){
  body{font-size:16px}
  .hero .stage{min-height:0;padding-top:56px}
  .actions{width:100%}
  .actions .button{flex:1 1 auto}
  .hero-shot{margin-bottom:-90px}
  .inbox{padding:14px 14px 96px}
  .inbox-head{display:grid;gap:12px}
  .bulk{min-width:0}
  .hero-window .cursor{top:132px}
  .row{grid-template-columns:18px minmax(0,1fr) auto;gap:10px;padding:10px 12px}
  .row .file,.row-amt{display:none}
  .row-state{grid-column:3}
  .cards{grid-template-columns:1fr}
  .section-top{display:grid;justify-items:start;gap:12px}
  .panel{min-height:0}
  .pv{min-height:300px}
  .panel-text{grid-template-columns:1fr;padding:18px}
  .pv-read{grid-template-columns:1fr}
  .slipdoc{display:none}
  .ledger li{grid-template-columns:auto minmax(0,1fr) auto;gap:10px}
  .ledger li .att,.ledger li span:nth-child(3){display:none}
  .mail-list .clip{display:none}
  .mail-list li{grid-template-columns:36px minmax(0,1fr)}
  .dup{width:94%;grid-template-columns:1fr auto}
  .dup em{grid-row:3;grid-column:1/-1;justify-self:start;margin-top:6px}
  .dup-a{--bx:-8px;--by:-46px}
  .dup-b{--bx:8px;--by:40px}
  .connect{padding:20px 16px}
  .connect-row{gap:10px}
  .connect-node{font-size:16px;padding:10px 12px}
  .ticker li{grid-template-columns:1fr auto auto}
  .ticker li span:not(.num){display:none}
  .footer-top{grid-template-columns:1fr}
  .footer-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .field-row{grid-template-columns:1fr}
  .proof-list{grid-template-columns:1fr}
  .stack-copy p{font-size:15px}
  .stack-stage{--row:56px;--spread:.42;height:400px}
  .slip{height:50px;margin-top:-25px;padding:0 12px}
  .slip-kind,.slip-amount{font-size:14px}
  .env-file{font-size:8.5px}
  .mini-inbox li{padding:0 7px;gap:6px}
  .mini-inbox li b{font-size:10px}
  .mini-inbox li em{font-size:10.5px;padding:2px 6px}
  .form-foot .button{flex:1 1 auto}
}
@media (max-width:440px){
  .brand-word{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .nav-end{gap:8px}
  .pair .window{height:340px}
}

/* Still: visitor paused animations (button) or asked for reduced motion. Scenes show their finished state. */
.still *,.still *::before,.still *::after{animation:none!important}
.still .bulk-track i{transition:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important}
  .js .hero-shot{--tilt:0}
  .js .stack{height:auto}
  .js .stack-sticky{position:static;height:auto;padding:clamp(72px,11vw,136px) 0}
  .theme-knob,.theme-icon,.nav-glider,.row,.row-state i,.box,.box::after,.bulk>*,.cursor,.bulk-track i{transition:none!important}
  .js [data-reveal],.js .log-window:not(.is-visible) .log li{transform:none!important}
  .js [data-reveal]{transition:opacity .2s linear}
  .card-media>*{transition:none}
}

/* Forced colours (e.g. Windows contrast themes): keep switch, toggles and focus visible. */
@media (forced-colors:active){
  .theme-switch,.icon-button,.tab{border-color:ButtonText}
  .theme-knob{background:Highlight;forced-color-adjust:none}
  .theme-switch[aria-checked] .theme-icon{color:ButtonText}
  .tab[aria-selected="true"]{border-color:Highlight;outline:2px solid Highlight}
  .stage-canvas{display:none}
  :focus-visible{outline-color:Highlight}
}