/* Public website (start page and sub-pages, 22.10.2026). Same tokens as the app: light
   green-tinted paper, graphite bar with the lime edge, IBM Plex Serif headings, one lime
   accent. Motion: entrance of the hero, reveal on scroll, the demo research in the hero,
   a scroll story, Lupo (lupo.js). Everything sits still with "reduce motion". No inline
   styles anywhere (CSP 'self'); scripts only set classes and custom properties. */
[hidden]{display:none!important}
body.site{display:block;min-height:100vh;font-size:15.5px;line-height:1.6;overflow-x:clip}
.site h1,.site h2{font-family:var(--serif);font-weight:700;letter-spacing:-.015em;text-wrap:balance}
.site h3{font-weight:650;letter-spacing:-.005em}
.site a{text-underline-offset:3px}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.26s}
.s-top{view-transition-name:site-top}

/* ── Top bar ─────────────────────────────────────────────────────────────── */
.s-top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:18px;height:64px;padding:0 max(20px,calc((100vw - 1200px)/2));background:var(--graphite);border-bottom:3px solid var(--lime);color:var(--on-dark)}
.s-brand{flex:none;display:inline-flex;align-items:center;gap:10px;color:var(--lime);text-decoration:none!important}
.s-brand strong{font:700 16px var(--sans);letter-spacing:.16em;color:var(--on-dark)}
.s-nav{display:flex;align-items:center;gap:2px;margin-inline-end:auto;white-space:nowrap}
.s-nav a{position:relative;padding:8px 12px;border-radius:8px;color:var(--on-dark-muted);font-size:14px;font-weight:500;text-decoration:none!important;transition:color .15s var(--ease),background-color .15s var(--ease)}
.s-nav a:hover{color:var(--on-dark);background:var(--graphite-2)}
.s-nav a[aria-current="page"]{color:var(--lime)}
.s-nav a[aria-current="page"]::after{content:"";position:absolute;inset-inline:12px;bottom:3px;height:2px;border-radius:2px;background:var(--lime)}
.s-nav .s-nav-only{display:none}
.s-lang select{width:auto;max-width:140px}
.s-actions{flex:none;display:flex;align-items:center;gap:6px}
.s-login{padding:8px 12px;border-radius:8px;color:var(--on-dark);font-size:14px;font-weight:600;text-decoration:none!important;white-space:nowrap}
.s-login:hover{background:var(--graphite-2)}
.s-top .s-btn{height:38px;background:var(--lime);color:var(--graphite)}
.s-menu{display:none;flex:none;flex-direction:column;justify-content:center;gap:6px;width:40px;height:40px;padding:0 10px;border:0;border-radius:9px;background:none;cursor:pointer}
.s-menu:hover{background:var(--graphite-2)}
.s-menu span{display:block;height:2px;border-radius:2px;background:var(--on-dark);transition:transform .2s var(--ease)}
.s-top.is-open .s-menu span:first-child{transform:translateY(4px) rotate(45deg)}
.s-top.is-open .s-menu span:last-child{transform:translateY(-4px) rotate(-45deg)}
/* Scroll progress along the lime edge. */
.s-progress{position:absolute;inset-inline:0;bottom:-3px;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left center;pointer-events:none}
[dir="rtl"] .s-progress{transform-origin:right center}
@supports (animation-timeline:scroll()){
  .s-progress{animation:s-progress linear both;animation-timeline:scroll(root)}
}
@keyframes s-progress{to{transform:scaleX(1)}}
/* When the menu does not fit (narrow screen or a long language), it folds into a button.
   landing.js measures and sets .is-compact; the media query covers the first paint. */
.s-top.is-compact .s-nav{display:none}
.s-top.is-compact .s-menu{display:inline-flex}
.s-top.is-compact .s-lang{margin-inline-start:auto}
.s-top.is-compact.is-open .s-nav{position:absolute;top:calc(100% + 3px);inset-inline:0;display:flex;flex-direction:column;align-items:stretch;gap:2px;padding:10px max(20px,calc((100vw - 1200px)/2)) 18px;background:var(--graphite);border-bottom:3px solid var(--lime);box-shadow:0 24px 40px -24px oklch(0.15 0.02 140 / .6)}
.s-top.is-compact.is-open .s-nav a{padding:12px 12px;font-size:16px}
.s-top.is-compact.is-open .s-nav a[aria-current="page"]::after{inset-inline:12px auto;bottom:8px;width:24px}
@media (max-width:900px){
  .s-nav{display:none}
  .s-menu{display:inline-flex}
  .s-lang{margin-inline-start:auto}
  .s-top.is-open .s-nav{position:absolute;top:calc(100% + 3px);inset-inline:0;display:flex;flex-direction:column;align-items:stretch;gap:2px;padding:10px 20px 18px;background:var(--graphite);border-bottom:3px solid var(--lime)}
  .s-top.is-open .s-nav a{padding:12px;font-size:16px}
  .s-top.is-open .s-nav a[aria-current="page"]::after{inset-inline:12px auto;bottom:8px;width:24px}
  .s-top.is-open .s-nav .s-nav-only{display:block}
}

/* ── Shared pieces ───────────────────────────────────────────────────────── */
.s-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none!important;transition:transform .15s var(--ease),filter .15s var(--ease)}
.s-btn:hover{transform:translateY(-1px)}
.s-btn:active{transform:scale(.98)}
.s-btn-big{height:50px;padding:0 26px;border-radius:11px;font-size:15.5px}
.s-ghost{display:inline-flex;align-items:center;gap:9px;height:50px;padding:0 20px;border:1.5px solid var(--line);border-radius:11px;background:var(--surface);color:var(--fg);font-size:15px;font-weight:600;text-decoration:none!important;transition:border-color .15s var(--ease),transform .15s var(--ease)}
.s-ghost:hover{border-color:var(--fg);transform:translateY(-1px)}
.s-ghost i.ph{font-size:20px;color:var(--accent)}
.s-eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:14px;font:600 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--green-ink)}
.s-eyebrow::before{content:"";width:22px;height:2px;background:var(--accent)}
.s-head{max-width:760px}
.s-head h2{font-size:clamp(30px,3.6vw,46px);line-height:1.1}
.s-sub{margin-top:16px;max-width:62ch;font-size:17px;line-height:1.6;color:var(--muted)}
.s-sub+.s-sub{margin-top:10px}
.s-lead{margin-top:22px;max-width:52ch;font-size:clamp(17px,1.4vw,19px);line-height:1.6;color:var(--muted)}
.s-fine{margin-top:16px;font-size:13.5px;color:var(--faint)}
.s-live{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);animation:breathe 1.6s ease-in-out infinite}
.s-chip{display:inline-flex;align-items:center;gap:9px;padding:6px 13px;border:1px solid var(--lime-line);border-radius:999px;background:var(--lime-wash);font-size:13px;font-weight:600;color:var(--green-ink)}
.s-more{margin-top:36px}
.s-more a,.s-text-link{display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-weight:650;text-decoration:none}
.s-more a:hover,.s-text-link:hover{text-decoration:underline}
.s-more i.ph,.s-text-link i.ph{transition:transform .2s var(--ease)}
.s-more a:hover i.ph,.s-text-link:hover i.ph{transform:translateX(4px)}
[dir="rtl"] .s-more a:hover i.ph,[dir="rtl"] .s-text-link:hover i.ph{transform:translateX(-4px)}
[dir="rtl"] .ph-arrow-right{transform:scaleX(-1)}
.s-section{padding:104px max(24px,calc((100vw - 1200px)/2))}
.s-section+.s-section{border-top:1px solid var(--line-soft)}
.s-section-tight{padding-top:64px}
.s-note{max-width:70ch;margin-top:28px;font-size:14px;color:var(--faint)}
/* Faint graph paper behind heroes: the dossier feel of the app. */
.s-hero,.s-page-hero{position:relative;isolation:isolate;background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);background-size:44px 44px;background-position:-1px -1px}
.s-hero::before,.s-page-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 75% 85% at 28% 18%,oklch(0.958 0.016 128 / .5),var(--bg) 78%)}

/* Entrance and reveal. Without JS everything is simply visible. */
.s-enter{animation:s-rise .7s var(--ease) both}
.s-enter:nth-child(2){animation-delay:.08s}
.s-enter:nth-child(3){animation-delay:.16s}
.s-enter:nth-child(4){animation-delay:.24s}
.s-enter:nth-child(5){animation-delay:.32s}
@keyframes s-rise{from{opacity:0;transform:translateY(18px)}}
.js-ready [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
.js-ready [data-reveal].is-in{opacity:1;transform:none}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.s-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center;padding:76px max(24px,calc((100vw - 1200px)/2)) 112px}
.s-hero h1{margin-top:22px;font-size:clamp(44px,6.2vw,80px);line-height:1;letter-spacing:-.03em;max-width:11ch}
.s-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:34px}
.s-stage{position:relative;padding-inline-start:150px;padding-bottom:40px}
.s-demo{position:relative;margin:0;padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:0 46px 90px -52px oklch(0.3 0.06 135 / .55),0 1px 0 var(--line-soft)}
.s-demo-input{display:flex;align-items:center;gap:10px;padding:11px 13px;border:1px solid var(--line);border-radius:11px;background:var(--bg);font-size:13.5px}
.s-demo-input>i.ph{font-size:17px;color:var(--faint)}
.s-demo-address{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.s-demo-address::after{content:"";display:inline-block;width:2px;height:1.05em;margin-inline-start:2px;vertical-align:-2px;background:var(--fg);animation:s-caret 1s steps(1) infinite}
.s-demo[data-phase="tiles"] .s-demo-address::after,.s-demo[data-phase="report"] .s-demo-address::after,.s-demo[data-phase="done"] .s-demo-address::after{display:none}
@keyframes s-caret{50%{opacity:0}}
.s-demo-state{display:inline-flex;align-items:center;gap:7px;margin-inline-start:auto;flex:none;font-size:12px;color:var(--muted)}
.s-demo[data-phase="typing"] .s-demo-state{visibility:hidden}
.s-demo[data-phase="done"] .s-demo-state .s-live{animation:none}
.s-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:14px 0 0;padding:0;list-style:none}
.s-tiles li{display:grid;gap:3px;padding:10px 12px;border:1px solid var(--line-soft);border-radius:11px;background:var(--surface);transition:border-color .5s var(--ease),background-color .5s var(--ease)}
.s-k{font-size:11.5px;color:var(--faint)}
.s-v{font:650 15px var(--sans);font-variant-numeric:tabular-nums;color:var(--fg);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.js-ready .s-tiles li:not(.is-on) .s-v{opacity:0;transform:translateY(5px)}
.js-ready .s-tiles li:not(.is-on){background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface) 50%,var(--surface-2) 75%);background-size:200% 100%;animation:shimmer 1.4s linear infinite}
.s-tiles li.is-flash{border-color:var(--accent);background:var(--lime-wash)}
.s-demo-report{margin-top:12px;padding:14px;border-radius:12px;background:var(--bg);font-size:13.5px;line-height:1.55;color:var(--muted);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js-ready .s-demo:not([data-phase="report"]):not([data-phase="done"]) .s-demo-report{opacity:0;transform:translateY(8px)}
.s-demo-report-head{display:flex;align-items:center;gap:7px;margin-bottom:6px;font:700 11px var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--green-ink)}
.s-demo-sources{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.s-demo-sources span{padding:2px 9px;border:1px solid var(--line-soft);border-radius:999px;background:var(--surface);font-size:11.5px;color:var(--muted)}
.s-demo-sources span::after{content:" ↗";color:var(--faint)}
.s-demo figcaption{margin-top:10px;font-size:11.5px;color:var(--faint);text-align:end}
/* Lupo stands beside the card, his lens over its free corner; his first words sit below
   him so they never cover the demo. */
.s-hero-lupo{position:absolute;inset-inline-start:-36px;bottom:-30px;z-index:2;width:236px}
.s-hero-lupo .lupo-bubble{bottom:auto;top:calc(100% + 4px);inset-inline-start:28px;border-radius:16px;border-start-start-radius:4px;transform-origin:0 0}
[dir="rtl"] .s-hero-lupo .lupo-bubble{transform-origin:100% 0}
.s-hero-lupo .lupo-bubble::after{top:auto;bottom:100%;inset-inline-start:0;border:0;border-bottom:10px solid var(--graphite);border-inline-end:12px solid transparent}

/* ── Lupo ────────────────────────────────────────────────────────────────── */
.lupo-button{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .25s var(--ease)}
.lupo-button:hover{transform:translateY(-3px) rotate(-1.5deg)}
.lupo-button:active{transform:scale(.97)}
.lupo-button:focus-visible{outline:3px solid var(--accent);outline-offset:4px;border-radius:24px}
.lupo-figure,.lupo-figure .tracer-svg,.s-final-lupo .tracer-svg,.s-scene-lupo .tracer-svg{display:block;width:100%;height:auto}
.lupo-bubble{position:absolute;bottom:calc(100% - 6px);inset-inline-start:24px;z-index:3;width:max-content;max-width:min(300px,78vw);padding:13px 15px;border-radius:16px;border-end-start-radius:4px;background:var(--graphite);color:var(--on-dark);font-size:14.5px;line-height:1.45;box-shadow:0 22px 40px -22px oklch(0.15 0.02 140 / .7);transform-origin:0 100%}
[dir="rtl"] .lupo-bubble{transform-origin:100% 100%}
.lupo-bubble::after{content:"";position:absolute;inset-inline-start:22px;top:100%;border:9px solid transparent;border-top-color:var(--graphite);border-inline-start-color:var(--graphite);border-bottom:0}
.lupo-bubble.is-pop{animation:lupo-pop .45s var(--ease) both}
.lupo-bubble.is-pop .lupo-line{animation:lupo-wipe .7s .08s var(--ease) both}
@keyframes lupo-pop{from{opacity:0;transform:scale(.85) translateY(8px)}}
@keyframes lupo-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
[dir="rtl"] .lupo-bubble.is-pop .lupo-line{animation-name:lupo-wipe-rtl}
@keyframes lupo-wipe-rtl{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
.lupo-bubble-foot{display:flex;align-items:center;gap:8px;margin-top:10px}
.lupo-cta{padding:5px 12px;border-radius:999px;background:var(--lime);color:var(--graphite);font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap}
.lupo-cta:hover{filter:brightness(1.08)}
.lupo-close{margin-inline-start:auto}
.lupo-next{padding:5px 12px;border:1px solid var(--graphite-line);border-radius:999px;background:var(--graphite-2);color:var(--lime);font-size:13px;font-weight:600;cursor:pointer}
.lupo-next:hover{border-color:var(--lime)}
.lupo-close{display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:none;color:var(--on-dark-muted);cursor:pointer}
.lupo-close:hover{background:var(--graphite-2);color:var(--on-dark)}
/* The dock: Lupo stays with you on every page. On the start page he comes in once
   the big one in the hero has scrolled away. */
.lupo-dock{position:fixed;inset-inline-end:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));z-index:40;width:96px;transform:translateY(160%);transition:transform .6s var(--ease)}
.lupo-dock.is-shown{transform:none}
.lupo-dock.is-shown.is-tucked{transform:translateY(160%)}   /* phones: aside while reading (lupo.js) */
.lupo-dock .lupo-bubble{inset-inline-start:auto;inset-inline-end:18px;bottom:calc(100% + 44px);border-end-start-radius:16px;border-end-end-radius:4px;transform-origin:100% 100%}
[dir="rtl"] .lupo-dock .lupo-bubble{transform-origin:0 100%}
.lupo-dock .lupo-bubble::after{inset-inline-start:auto;inset-inline-end:22px;border-inline-start-color:transparent;border-inline-end-color:var(--graphite)}
.lupo-dock .lupo-button{filter:drop-shadow(0 12px 18px oklch(0.25 0.04 140 / .28))}
.lupo-dock .lupo-figure{transform-origin:100% 100%;transition:transform .45s var(--ease)}
[dir="rtl"] .lupo-dock .lupo-figure{transform-origin:0 100%}
.lupo-dock.is-waving .lupo-figure{transform:scale(1.45)}

/* ── Marquee ─────────────────────────────────────────────────────────────── */
.s-marquee{overflow:hidden;padding:18px 0;border-block:1px solid var(--line-soft);background:var(--surface);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.s-marquee-track{display:flex;width:max-content;direction:ltr;animation:s-marquee 46s linear infinite}
.s-marquee:hover .s-marquee-track{animation-play-state:paused}
.s-marquee-list{display:flex;flex:none;margin:0;padding:0;list-style:none}
.s-marquee-list li{display:flex;align-items:center;gap:28px;padding-inline-end:28px;font:600 13px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.s-marquee-list li::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
@keyframes s-marquee{to{transform:translateX(-50%)}}

/* ── Video ───────────────────────────────────────────────────────────────── */
.s-video{background:linear-gradient(var(--lime-wash),var(--bg))}
.s-player{position:relative;max-width:1040px;margin:44px 0 0;border:1px solid var(--graphite-line);border-radius:20px;overflow:hidden;background:var(--graphite);box-shadow:0 60px 110px -60px oklch(0.25 0.05 135 / .8)}
.s-player video{display:block;width:100%;aspect-ratio:16/9;background:var(--graphite)}
/* The play button sits in the lower corner: the poster's stopwatch and "$GATO" stay visible. */
.s-play{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:flex-start;gap:14px;padding:28px;border:0;background:linear-gradient(transparent 55%,oklch(0.15 0.012 140 / .7));color:var(--on-dark);text-align:start;cursor:pointer}
.s-play-icon{display:grid;place-items:center;width:68px;height:68px;border-radius:50%;background:var(--lime);color:var(--graphite);font-size:28px;box-shadow:0 0 0 8px oklch(0.87 0.13 125 / .22);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.s-play:hover .s-play-icon{transform:scale(1.07);box-shadow:0 0 0 14px oklch(0.87 0.13 125 / .18)}
.s-play-label{margin-bottom:22px;font-size:17px;font-weight:650}
.s-play-time{margin-bottom:23px;padding:2px 10px;border-radius:999px;background:oklch(0.15 0.012 140 / .7);font:600 12.5px var(--mono)}
.s-chapters{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.s-chapters button{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--fg);font-size:14px;cursor:pointer;transition:border-color .15s var(--ease)}
.s-chapters button:hover{border-color:var(--accent)}
.s-chapters span{font:600 12.5px var(--mono);color:var(--accent)}

/* ── Who it is for, rules: numbered rows, not cards ──────────────────────── */
.s-who{display:grid;margin:48px 0 0;padding:0;list-style:none;counter-reset:who;border-top:1px solid var(--line)}
.s-who li{counter-increment:who;display:grid;grid-template-columns:76px 56px minmax(0,1fr);align-items:start;gap:16px;padding:30px 0;border-bottom:1px solid var(--line)}
.s-who li::before{content:counter(who,decimal-leading-zero);font:700 34px/1 var(--serif);color:var(--accent);letter-spacing:-.02em}
.s-who-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--graphite);color:var(--lime);font-size:22px}
.s-who h3{font-size:20px}
.s-who p{margin-top:6px;max-width:66ch;color:var(--muted)}

/* ── What you get: three layers ──────────────────────────────────────────── */
.s-bento{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-template-rows:auto auto;gap:18px;margin-top:48px}
.s-tile{position:relative;padding:30px;border:1px solid var(--line);border-radius:20px;background:var(--surface);overflow:hidden}
.s-tile h3{margin-top:10px;font:700 24px/1.2 var(--serif)}
.s-tile>p:not(.s-tile-time){margin-top:10px;max-width:46ch;color:var(--muted)}
.s-tile-time{display:inline-flex;align-items:center;gap:7px;font:600 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--green-ink)}
.s-tile-quick{grid-row:span 2;background:var(--graphite);border-color:var(--graphite);color:var(--on-dark)}
.s-tile-quick h3{color:var(--on-dark)}
.s-tile-quick>p:not(.s-tile-time){color:var(--on-dark-muted)}
.s-tile-quick .s-tile-time{color:var(--lime)}
.s-mini-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:26px 0 0;padding:0;list-style:none}
.s-mini-tiles li{display:grid;gap:2px;padding:11px 13px;border:1px solid var(--graphite-line);border-radius:11px;background:var(--graphite-2)}
.s-mini-tiles span{font-size:11.5px;color:var(--on-dark-muted)}
.s-mini-tiles b{font:650 16px var(--sans);font-variant-numeric:tabular-nums;color:var(--on-dark)}
.js-ready .s-mini-tiles li{opacity:0;transform:scale(.94);transition:opacity .45s var(--ease),transform .45s var(--ease),border-color .6s var(--ease)}
.js-ready .is-in .s-mini-tiles li,.js-ready .s-mini-tiles.is-in li{opacity:1;transform:none;border-color:var(--lime-line)}
.s-mini-tiles li:nth-child(2){transition-delay:.12s}
.s-mini-tiles li:nth-child(3){transition-delay:.24s}
.s-mini-tiles li:nth-child(4){transition-delay:.36s}
.s-mini-tiles li:nth-child(5){transition-delay:.48s}
.s-mini-tiles li:nth-child(6){transition-delay:.6s}
.s-mini-tiles li:nth-child(7){transition-delay:.72s}
/* The example report (26.10.2026): real sentences with source numbers and one open question,
   the lines appear one after another. */
.s-mini-doc{display:grid;gap:9px;margin-top:22px;padding:16px 18px;border-radius:12px;background:var(--bg);font-size:13.5px;line-height:1.5;color:var(--muted)}
.s-mini-doc p{margin:0}
.s-mini-doc .s-mini-doc-head{display:flex;align-items:center;gap:7px;font:700 11px var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--green-ink)}
.s-mini-doc em{display:inline-grid;place-items:center;width:18px;height:18px;margin-inline-start:6px;border-radius:50%;background:var(--accent-soft);font:600 10.5px var(--mono);font-style:normal;color:var(--green-ink);vertical-align:1px}
.s-mini-doc .s-mini-open{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;padding:7px 10px;border:1px dashed var(--line);border-radius:8px}
.s-mini-open span{font:700 11px var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.s-mini-note{font-size:12.5px;color:var(--muted)}
.s-mini-wrap .s-mini-note,.s-mini-x .s-mini-note{margin-top:10px}
.js-ready .s-mini-doc>p{opacity:0;transform:translateY(6px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js-ready .is-in .s-mini-doc>p,.js-ready .s-mini-doc.is-in>p{opacity:1;transform:none}
.s-mini-doc>p:nth-child(2){transition-delay:.12s}
.s-mini-doc>p:nth-child(3){transition-delay:.24s}
.s-mini-doc>p:nth-child(4){transition-delay:.36s}
.s-mini-doc>p:nth-child(5){transition-delay:.48s}
/* The X check in numbers: all posts, the share that counts and the share sorted out. */
.s-mini-x{margin-top:22px}
.s-mini-x-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13.5px;color:var(--muted)}
.s-mini-x-head b{font:650 18px var(--sans);font-variant-numeric:tabular-nums;color:var(--fg)}
.s-mini-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin:12px 0 0;padding:0;list-style:none;font-size:13.5px;color:var(--muted)}
.s-mini-legend li{display:flex;align-items:center;gap:7px}
.s-mini-legend li::before{content:"";flex:none;width:10px;height:10px;border-radius:3px;background:var(--accent)}
.s-mini-legend li.is-cut::before{background:repeating-linear-gradient(135deg,var(--danger) 0 3px,oklch(0.85 0.06 28) 3px 6px)}
.s-mini-legend b{font-weight:650;font-variant-numeric:tabular-nums;color:var(--fg)}
.s-mini-bars{display:flex;height:14px;margin-top:10px;border-radius:7px;overflow:hidden;background:var(--surface-2)}
.s-mini-bars span{display:block;height:100%;transform-origin:left center;transition:transform 1s var(--ease)}
[dir="rtl"] .s-mini-bars span{transform-origin:right center}
.s-mini-bars .is-real{width:82%;background:var(--accent)}
.s-mini-bars .is-cut{width:18%;background:repeating-linear-gradient(135deg,var(--danger) 0 4px,oklch(0.85 0.06 28) 4px 8px);transition-delay:.5s}
.js-ready .s-mini-bars span{transform:scaleX(0)}
.js-ready .is-in .s-mini-bars span,.js-ready .s-mini-bars.is-in span{transform:none}

/* ── Scroll story ────────────────────────────────────────────────────────── */
.s-story-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;margin-top:40px}
.s-story-stage{position:sticky;top:120px;align-self:start}
.s-screen{position:relative;aspect-ratio:4/3;border:1px solid var(--line);border-radius:20px;background:var(--surface);overflow:hidden;box-shadow:0 40px 80px -56px oklch(0.3 0.06 135 / .5)}
.s-screen-bar{display:flex;gap:6px;padding:12px 14px;border-bottom:1px solid var(--line-soft);background:var(--graphite)}
.s-screen-bar span{width:9px;height:9px;border-radius:50%;background:var(--graphite-line)}
.s-screen-bar span:first-child{background:var(--lime)}
.s-scene{position:absolute;inset:44px 0 0;display:grid;place-items:center;padding:28px;opacity:0;transform:translateY(14px) scale(.98);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.s-story-stage[data-step="1"] .s-scene-1,.s-story-stage[data-step="2"] .s-scene-2,.s-story-stage[data-step="3"] .s-scene-3,.s-story-stage[data-step="4"] .s-scene-4{opacity:1;transform:none}
.s-fake-input{display:flex;align-items:center;gap:10px;width:100%;max-width:400px;padding:13px 14px;border:2px solid var(--accent);border-radius:12px;background:var(--bg);font-size:14px}
.s-fake-input i.ph{font-size:18px;color:var(--faint)}
.s-fake-input .mono{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.s-fake-input kbd{margin-inline-start:auto;animation:s-press 1.6s var(--ease) infinite}
@keyframes s-press{0%,60%,100%{transform:none}70%{transform:translateY(2px);background:var(--lime)}}
/* Step 2: the instant card with example values, tile by tile as the sources answer. */
.s-fake-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%;margin:0;padding:0;list-style:none}
.s-fake-tiles li{display:grid;align-content:start;gap:3px;min-height:62px;padding:10px 11px;border:1px solid var(--line-soft);border-radius:10px;background:var(--bg)}
.s-fake-tiles .s-v{font-size:14px;overflow-wrap:anywhere}
.s-story-stage[data-step="2"] .s-fake-tiles li{animation:s-tile-in .5s var(--ease) both}
.s-fake-tiles li:nth-child(2){animation-delay:.08s}
.s-fake-tiles li:nth-child(3){animation-delay:.16s}
.s-fake-tiles li:nth-child(4){animation-delay:.24s}
.s-fake-tiles li:nth-child(5){animation-delay:.32s}
.s-fake-tiles li:nth-child(6){animation-delay:.4s}
.s-fake-tiles li:nth-child(7){animation-delay:.48s}
.s-fake-tiles li:nth-child(8){animation-delay:.56s}
@keyframes s-tile-in{from{opacity:0;transform:scale(.9)}50%{border-color:var(--accent)}}
/* Step 3: an example report, line by line. */
.s-fake-doc{display:grid;gap:8px;width:100%;max-width:440px;padding:16px 18px;border-radius:12px;background:var(--bg);font-size:13.5px;line-height:1.55;color:var(--muted)}
.s-fake-doc .s-demo-report-head{margin-bottom:0}
.s-fake-doc .s-demo-sources{margin-top:2px}
.s-story-stage[data-step="3"] .s-fake-doc>p{animation:s-text-in .6s var(--ease) both}
.s-fake-doc>p:nth-child(2){animation-delay:.12s}
.s-fake-doc>p:nth-child(3){animation-delay:.24s}
.s-fake-doc>p:nth-child(4){animation-delay:.36s}
.s-fake-doc>p:nth-child(5){animation-delay:.48s}
@keyframes s-text-in{from{opacity:0;transform:translateY(6px)}}
.s-scene-lupo{width:min(300px,70%)}
.s-story-progress{height:4px;margin-top:14px;border-radius:2px;background:var(--line-soft);overflow:hidden}
.s-story-progress span{display:block;height:100%;background:var(--accent);transform-origin:left center;transform:scaleX(calc(var(--p,1) / 4));transition:transform .5s var(--ease)}
[dir="rtl"] .s-story-progress span{transform-origin:right center}
.s-story-stage[data-step="1"]{--p:1}.s-story-stage[data-step="2"]{--p:2}.s-story-stage[data-step="3"]{--p:3}.s-story-stage[data-step="4"]{--p:4}
.s-steps{display:grid;margin:0;padding:0;list-style:none;counter-reset:step}
.s-steps li{counter-increment:step;min-height:52vh;padding:24px 0;transition:opacity .4s var(--ease)}
.s-steps li:last-child{min-height:auto}
.js-ready .s-steps li:not(.is-active){opacity:.35}
.s-steps li::before{content:counter(step);display:grid;place-items:center;width:38px;height:38px;margin-bottom:16px;border-radius:50%;background:var(--graphite);color:var(--lime);font:700 16px var(--mono)}
.s-steps h3{font:700 clamp(24px,2.4vw,30px)/1.2 var(--serif)}
.s-steps p{margin-top:10px;max-width:46ch;font-size:17px;color:var(--muted)}

/* ── Without and with TRACER ─────────────────────────────────────────────── */
.s-compare{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;margin-top:48px}
.s-compare-col{padding:32px;border-radius:20px}
.s-compare-col h3{font:700 12px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.s-compare-without{border:1px dashed var(--line);background:var(--surface-2)}
.s-compare-without h3{color:var(--faint)}
.s-compare-without>p{margin-top:18px;color:var(--muted)}
.s-tabs-pile{display:grid;gap:8px;margin:18px 0 0;padding:0;list-style:none;counter-reset:tab}
.s-tabs-pile li{counter-increment:tab;display:flex;align-items:baseline;gap:10px;padding:10px 14px;border:1px solid var(--line-soft);border-radius:10px;background:var(--surface);font-size:14.5px}
.s-tabs-pile li::before{content:counter(tab);flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--surface-2);font:600 11px var(--mono);color:var(--faint)}
.s-tabs-pile span{margin-inline-start:auto;color:var(--faint);text-align:end}
.js-ready .s-compare-without.is-in .s-tabs-pile li{animation:s-tab-in .5s var(--ease) both}
.s-tabs-pile li:nth-child(even){transform:rotate(-.6deg)}
.s-tabs-pile li:nth-child(3n){transform:rotate(.7deg)}
.s-tabs-pile li:nth-child(2){animation-delay:.08s!important}.s-tabs-pile li:nth-child(3){animation-delay:.16s!important}.s-tabs-pile li:nth-child(4){animation-delay:.24s!important}.s-tabs-pile li:nth-child(5){animation-delay:.32s!important}.s-tabs-pile li:nth-child(6){animation-delay:.4s!important}
@keyframes s-tab-in{from{opacity:0;translate:0 10px}}
.s-compare-with{display:flex;flex-direction:column;align-items:flex-start;background:var(--graphite);color:var(--on-dark)}
.s-compare-with h3{color:var(--lime)}
.s-compare-big{margin-top:16px;font:700 clamp(30px,3.4vw,44px)/1.08 var(--serif);letter-spacing:-.02em;color:var(--on-dark)}
.s-compare-with .s-checks li{color:var(--on-dark-muted)}
.s-compare-with .s-checks li::before{border-color:var(--lime)}
.s-checks.s-checks-one{grid-template-columns:minmax(0,1fr);gap:10px;margin:24px 0 28px}
.s-compare-with .s-btn{margin-top:auto;background:var(--lime);color:var(--graphite)}

/* ── Conversion helpers: trial form, trust line, inline calls ────────────── */
.s-try{display:flex;gap:8px;max-width:560px;margin-top:32px;padding:6px;border:1.5px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:0 24px 50px -36px oklch(0.3 0.06 135 / .5);transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.s-try:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.s-try-field{flex:1;display:flex;align-items:center;gap:10px;min-width:0;padding-inline-start:12px}
.s-try-field i.ph{flex:none;font-size:19px;color:var(--faint)}
.s-try-field input{flex:1;min-width:0;height:44px;border:0;background:none;font:14.5px var(--mono);color:var(--fg);outline:none}
.s-try-field input::placeholder{font-family:var(--sans);color:var(--faint)}
.s-try .s-btn-big{height:48px;padding:0 20px;border-radius:10px}
.s-try.is-shake{animation:s-shake .35s var(--ease)}
@keyframes s-shake{25%{translate:-5px 0}75%{translate:5px 0}}
.s-try-note{margin-top:8px;font-size:13px;color:var(--danger)}
.s-trust{display:flex;flex-wrap:wrap;gap:6px 18px;margin:16px 0 0;padding:0;list-style:none;font-size:14px;color:var(--muted)}
.s-trust li{display:inline-flex;align-items:center;gap:6px}
.s-trust i.ph{font-size:15px;color:var(--accent)}
.s-video-link{display:inline-flex;align-items:center;gap:8px;margin-top:18px;color:var(--fg);font-size:14.5px;font-weight:600;text-decoration:none}
.s-video-link i.ph{font-size:22px;color:var(--accent);transition:transform .2s var(--ease)}
.s-video-link:hover{text-decoration:underline}
.s-video-link:hover i{transform:scale(1.12)}
.s-inline-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:36px}
.s-inline-cta p{font:700 clamp(20px,2vw,24px)/1.3 var(--serif)}
.s-rail-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:28px}
.s-final .s-trust{margin-top:18px}

/* ── Rules: struck words ─────────────────────────────────────────────────── */
.s-nots{display:grid;margin:44px 0 0;padding:0;list-style:none}
.s-nots li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:32px;align-items:center;padding:28px 0;border-top:1px solid var(--line)}
.s-nots li:last-child{border-bottom:1px solid var(--line)}
.s-strike{position:relative;justify-self:start;font:700 clamp(26px,3.4vw,44px)/1.1 var(--serif);letter-spacing:-.02em;color:var(--fg)}
.s-strike::after{content:"";position:absolute;inset-inline:-4px;top:54%;height:4px;border-radius:2px;background:var(--danger);transform-origin:left center;transition:transform .7s .25s var(--ease)}
[dir="rtl"] .s-strike::after{transform-origin:right center}
.js-ready [data-reveal]:not(.is-in) .s-strike::after{transform:scaleX(0)}
.s-nots p{max-width:48ch;color:var(--muted);font-size:16.5px}

/* ── Plans ───────────────────────────────────────────────────────────────── */
.s-plan-rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:44px 0 0;padding:0;list-style:none;border:1px solid var(--line);border-radius:18px;background:var(--surface);overflow:hidden}
.s-plan-rail li{display:grid;gap:4px;padding:26px 24px;border-inline-start:1px solid var(--line-soft)}
.s-plan-rail li:first-child{border-inline-start:0}
.s-plan-rail li.is-pick{background:var(--lime-wash);box-shadow:inset 0 3px 0 var(--accent)}
.s-plan-rail b{font-size:15px}
.s-plan-price{font:700 34px/1.1 var(--serif);letter-spacing:-.02em}
.s-plan-rail span:last-child{font-size:14px;color:var(--muted)}
.s-plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.s-plan{position:relative;display:flex;flex-direction:column;padding:30px 24px 24px;border:1px solid var(--line);border-radius:20px;background:var(--surface)}
.s-plan.is-pick{border:2px solid var(--accent);box-shadow:0 30px 60px -40px oklch(0.4 0.1 135 / .55)}
.s-plan-tag{position:absolute;top:-13px;inset-inline-start:22px;padding:3px 11px;border-radius:999px;background:var(--graphite);color:var(--lime);font-size:12px;font-weight:650}
.s-plan h2{font-size:24px}
.s-plan-for{margin-top:6px;min-height:3.2em;font-size:14.5px;color:var(--muted)}
.s-plan-price-big{display:flex;align-items:baseline;gap:8px;margin-top:18px;font:700 46px/1 var(--serif);letter-spacing:-.03em}
.s-plan-price-big small{font:500 14px var(--sans);letter-spacing:0;color:var(--faint)}
.s-plan-coins{margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft);font-size:16px;font-weight:650;color:var(--fg)}
.s-plan-day{margin-top:2px;font-size:13.5px;color:var(--faint)}
.s-plans-trust{justify-content:center;margin-top:28px}
.s-plans-note{margin-top:10px;font-size:13px;color:var(--faint);text-align:center}
.s-plans-note a{margin-inline-start:6px;color:var(--accent)}
/* Booking (public/pricing.js): monthly or yearly, euro or dollar, the current plan. */
.s-billing{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 20px;margin-bottom:24px}
.s-switch{display:inline-flex;padding:4px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.s-switch button{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border:0;border-radius:999px;background:none;color:var(--muted);font:600 14px var(--sans);cursor:pointer}
.s-switch button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.s-save{padding:2px 8px;border-radius:999px;background:var(--lime);color:var(--graphite);font-size:11.5px;font-weight:700}
.s-currency{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.s-currency select{height:38px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--fg);font:600 14px var(--sans)}
.s-banner{max-width:720px;margin:0 auto 20px;padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-size:15px;text-align:center}
.s-banner[data-kind="success"]{border-color:var(--accent);background:var(--lime-wash)}
.s-banner[data-kind="error"]{border-color:var(--danger);color:var(--danger)}
.s-plan.is-current{border:2px solid var(--fg)}
.s-plan-cta[aria-disabled="true"]{opacity:.55;cursor:default;pointer-events:none}
/* Forms: booking dialog, "Verträge hier kündigen", "Vertrag widerrufen" (public/contract.js). */
.s-order{width:min(520px,calc(100vw - 32px));padding:0;border:1px solid var(--line);border-radius:20px;background:var(--surface);color:var(--fg);box-shadow:0 40px 90px -40px oklch(0.25 0.05 135 / .6)}
.s-order::backdrop{background:oklch(0.2 0.03 135 / .45)}
.s-order .s-form{padding:28px}
.s-order h2{font:700 24px/1.2 var(--serif)}
.s-contract{max-width:640px}
.s-form{display:grid;gap:18px}
.s-field{display:grid;gap:6px;margin:0;padding:0;border:0;min-width:0}
.s-field>span,.s-field legend{font-size:14px;font-weight:600;color:var(--fg)}
.s-field legend{margin-bottom:6px;padding:0}
.s-field input:not([type="radio"]),.s-field textarea{width:100%;min-height:46px;padding:10px 14px;border:1.5px solid var(--line);border-radius:11px;background:var(--surface);color:var(--fg);font:15px var(--sans)}
.s-field textarea{resize:vertical;line-height:1.5}
.s-field input:focus,.s-field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.s-field small{font-size:13px;color:var(--faint)}
.s-radio,.s-check{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.5;cursor:pointer}
.s-radio+.s-radio{margin-top:8px}
.s-radio input,.s-check input{flex:none;width:18px;height:18px;margin-top:2px;accent-color:var(--accent)}
.s-check{padding:12px 14px;border:1px solid var(--line-soft);border-radius:12px;background:var(--bg);font-size:14px}
.s-form-error{padding:10px 14px;border:1px solid var(--danger);border-radius:10px;font-size:14px;color:var(--danger)}
.s-form-note{font-size:14px;color:var(--muted)}
.s-form-note a{color:var(--accent)}
.s-form-submit{justify-self:start}
.s-form-actions{display:flex;flex-wrap:wrap;gap:10px}
.s-receipt-box{display:grid;gap:16px}
.s-receipt-box h2{font:700 28px/1.2 var(--serif)}
.s-receipt-box h2:focus{outline:none}
.s-receipt{display:grid;margin:0;border-top:1px solid var(--line-soft)}
.s-receipt>div{display:grid;grid-template-columns:minmax(120px,38%) 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-soft)}
.s-receipt dt{font-size:14px;color:var(--muted)}
.s-receipt dd{margin:0;font-size:15px;font-weight:500;overflow-wrap:anywhere}
@media (max-width:560px){.s-receipt>div{grid-template-columns:1fr;gap:2px}.s-form-submit{justify-self:stretch}}
@media print{.s-top,.s-foot,.lupo-dock,.s-form-actions,.s-page-hero{display:none!important}}

/* ── Legal text (AGB) ────────────────────────────────────────────────────── */
.s-legal-note{display:inline-block;margin-top:18px;padding:6px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);font-size:13.5px;color:var(--muted)}
.s-legal-doc{max-width:760px;font-size:15.5px;line-height:1.7;overflow-wrap:break-word;hyphens:auto}
.s-legal-meta{margin-bottom:28px;font:600 12.5px var(--mono);color:var(--faint)}
.s-legal-doc section{padding-bottom:28px;margin-bottom:28px;border-bottom:1px solid var(--line-soft);scroll-margin-top:96px}
.s-legal-doc h2{margin-bottom:12px;font-size:22px;line-height:1.25}
.s-legal-doc h3{margin-bottom:8px;font-size:17px}
.s-legal-doc h4{margin:16px 0 6px;font-size:15px}
.s-legal-doc p{color:var(--muted)}
.s-legal-doc p+p{margin-top:10px}
.s-legal-doc strong{color:var(--fg)}
.s-legal-doc ul{margin:10px 0;padding-inline-start:22px;color:var(--muted)}
.s-legal-doc li+li{margin-top:6px}
.s-legal-box{margin-top:18px;padding:22px 24px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.s-todo{padding:0 4px;border-radius:4px;background:oklch(0.93 0.09 95);color:var(--fg)}
.s-plan .s-plan-cta{justify-content:center;width:100%;height:46px;margin-top:auto}
.s-plan-coins+.s-plan-cta{margin-top:24px}
.s-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 32px;margin:0;padding:0;list-style:none}
.s-checks li{position:relative;padding-inline-start:28px;font-size:16px}
.s-checks li::before{content:"";position:absolute;inset-inline-start:3px;top:.5em;width:12px;height:7px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.s-usage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:64px;align-items:center}
.s-usage .s-text-link{margin-top:22px}
.s-usage-card{padding:26px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:0 36px 70px -50px oklch(0.3 0.06 135 / .5)}
.s-usage-head{font:700 11.5px var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--green-ink)}
/* Label and value side by side, the value below when both do not fit: in a grid the value kept its
   width and squeezed the label to one word per line (Hungarian at 320 px: 36 px for the label). */
.s-meter{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 12px;margin-top:18px}
.s-meter b{font:650 15px var(--mono)}
.s-bar{flex-basis:100%;display:block;height:10px;border-radius:5px;background:var(--surface-2);overflow:hidden}
.s-bar i{display:block;height:100%;background:var(--accent);transform-origin:left center;transform:scaleX(.74);transition:transform 1.1s .2s var(--ease)}
[dir="rtl"] .s-bar i{transform-origin:right center}
.js-ready [data-reveal]:not(.is-in) .s-bar i{transform:scaleX(0)}
.s-usage-left{margin-top:14px;font-weight:650}
.s-usage-reset{margin-top:4px;font-size:13px;color:var(--faint)}

/* ── Final call ──────────────────────────────────────────────────────────── */
.s-final{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:center;padding:112px max(24px,calc((100vw - 1200px)/2));border-top:1px solid var(--line-soft);background:linear-gradient(var(--bg),var(--lime-wash))}
.s-final h2{max-width:18ch;margin-bottom:30px;font-size:clamp(34px,4.6vw,60px);line-height:1.05;letter-spacing:-.025em}

/* ── Sub-pages ───────────────────────────────────────────────────────────── */
.s-page-hero{padding:80px max(24px,calc((100vw - 1200px)/2)) 64px;border-bottom:1px solid var(--line-soft)}
.s-page-hero h1{max-width:20ch;font-size:clamp(38px,5.2vw,66px);line-height:1.04;letter-spacing:-.025em}
.s-doc{display:grid;grid-template-columns:220px minmax(0,1fr);gap:64px;padding:64px max(24px,calc((100vw - 1200px)/2)) 104px}
.s-toc{position:sticky;top:96px;align-self:start;display:grid}
.s-toc h2{margin-bottom:12px;font:700 11.5px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.s-toc a{padding:7px 0;padding-inline-start:14px;border-inline-start:2px solid var(--line-soft);color:var(--muted);font-size:14.5px;text-decoration:none;transition:color .15s var(--ease),border-color .15s var(--ease)}
.s-toc a:hover{color:var(--fg)}
.s-toc a.is-active{border-color:var(--accent);color:var(--fg);font-weight:600}
.s-block{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:48px;align-items:start;padding-bottom:64px;margin-bottom:64px;border-bottom:1px solid var(--line-soft);scroll-margin-top:96px}
.s-block:has(> :only-child){grid-template-columns:minmax(0,1fr)}
.s-block-num{display:flex;align-items:center;gap:8px;font:600 12.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--green-ink)}
.s-block-num i.ph{font-size:17px}
.s-block h2{margin-top:10px;font-size:clamp(26px,2.6vw,34px);line-height:1.15}
.s-block-text>p:not(.s-block-num){margin-top:14px;max-width:62ch;font-size:16.5px;color:var(--muted)}
.s-facts{display:grid;gap:10px;margin:20px 0 0;padding:0;list-style:none}
.s-facts li{position:relative;padding-inline-start:22px;color:var(--muted)}
.s-facts li::before{content:"";position:absolute;inset-inline-start:2px;top:.62em;width:8px;height:8px;border-radius:2px;background:var(--accent)}
.s-facts b{display:block;color:var(--fg)}
.s-facts span{display:block}
.s-mini-tiles-wide{margin-top:8px;padding:18px;border-radius:18px;background:var(--graphite)}
.s-mini-doc-wide,.s-mini-x-wide{margin-top:8px}
.s-mini-bars-wide{height:22px;border-radius:11px}
.s-next{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.s-next p{flex-basis:100%;margin-bottom:6px;font:700 clamp(22px,2.4vw,28px)/1.25 var(--serif)}
.s-next-wide{padding:88px max(24px,calc((100vw - 1200px)/2)) 104px;border-top:1px solid var(--line-soft);background:linear-gradient(var(--bg),var(--lime-wash))}
.s-timeline{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;margin:56px 0 0;padding:0;list-style:none}
.s-timeline::before,.s-timeline::after{content:"";position:absolute;inset-inline:0;top:9px;height:3px;border-radius:2px;background:var(--line-soft)}
.s-timeline::after{background:var(--accent);transform-origin:left center;transition:transform 1.6s .2s var(--ease)}
[dir="rtl"] .s-timeline::after{transform-origin:right center}
.js-ready .s-timeline:not(.is-in)::after{transform:scaleX(0)}
.s-timeline li{position:relative;padding-top:34px}
.s-timeline li::before{content:"";position:absolute;inset-inline-start:0;top:0;width:21px;height:21px;box-sizing:border-box;border:3px solid var(--accent);border-radius:50%;background:var(--surface)}
.s-time{display:block;font:700 22px var(--mono);color:var(--fg)}
.s-timeline b{display:block;margin-top:4px;font-size:16px}
.s-timeline p{margin-top:6px;font-size:14.5px;color:var(--muted)}
.s-table-wrap{margin-top:40px;overflow-x:auto;border:1px solid var(--line);border-radius:18px;background:var(--surface)}
.s-table{width:100%;border-collapse:collapse;font-size:15.5px}
.s-table th,.s-table td{padding:16px 22px;text-align:start;vertical-align:top;border-bottom:1px solid var(--line-soft)}
.s-table tr:last-child th,.s-table tr:last-child td{border-bottom:0}
.s-table thead th{font:700 11.5px var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--on-dark);background:var(--graphite)}
.s-table tbody th{width:32%;font-weight:650}
.s-table td{color:var(--muted)}
.s-split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px;align-items:start}
.s-split h2{font-size:clamp(28px,3vw,38px);line-height:1.12}
.s-split-text p{max-width:62ch;font-size:17px;line-height:1.65;color:var(--muted)}
.s-split-text p+p{margin-top:16px}
.s-lupo-section{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:center;background:linear-gradient(var(--lime-wash),var(--bg))}
.s-lupo-stage{position:relative;max-width:380px;padding-top:90px}
.s-faq-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.s-faq-nav a{padding:8px 16px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--fg);font-size:14.5px;font-weight:550;text-decoration:none;transition:border-color .15s var(--ease),background-color .15s var(--ease)}
.s-faq-nav a:hover{border-color:var(--accent);background:var(--lime-wash)}
.s-faq-group{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:48px;align-items:start;scroll-margin-top:72px}
.s-faq-group h2{font-size:clamp(24px,2.4vw,30px);line-height:1.2}
.s-faq{display:grid;max-width:820px;margin-top:8px;border-top:1px solid var(--line)}
.s-faq-group .s-faq{margin-top:0}
.s-faq details{border-bottom:1px solid var(--line)}
.s-faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;font-size:16.5px;font-weight:600;cursor:pointer;list-style:none}
.s-faq summary::-webkit-details-marker{display:none}
.s-faq summary::after{content:"";flex:none;width:9px;height:9px;margin-inline-end:4px;border-inline-end:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg);transition:transform .25s var(--ease)}
.s-faq details[open] summary::after{transform:rotate(225deg)}
.s-faq p{max-width:68ch;padding-bottom:20px;color:var(--muted)}
#fragen .s-faq{margin-top:36px}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.s-foot{padding:64px max(24px,calc((100vw - 1200px)/2)) 36px;background:var(--graphite);border-top:3px solid var(--lime);color:var(--on-dark-muted);font-size:14.5px}
.s-foot-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));gap:36px}
.s-foot-brand p{margin-top:14px;max-width:30ch}
.s-foot-col{display:grid;align-content:start;gap:2px}
.s-foot-col h2{margin-bottom:10px;font:700 11.5px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark)}
.s-foot-col a{padding:4px 0;color:var(--on-dark-muted);text-decoration:none}
.s-foot-col a:hover{color:var(--lime)}
.s-foot-social{display:flex;gap:8px}
.s-foot-social a{display:inline-grid;place-items:center;width:40px;height:40px;border:1px solid var(--graphite-line);border-radius:10px;color:var(--on-dark-muted);font-size:19px;text-decoration:none;transition:color .2s,border-color .2s}
.s-foot-social a:hover{color:var(--lime);border-color:var(--lime-line)}
.s-legal{display:grid;gap:2px}
.s-disclaimer{margin-top:48px;padding-top:22px;border-top:1px solid var(--graphite-line);font-size:13px;color:var(--on-dark-muted)}

/* ── Smaller screens ─────────────────────────────────────────────────────── */
@media (max-width:1100px){
  .s-hero{gap:48px}
  .s-stage{padding-inline-start:120px}
  .s-hero-lupo{inset-inline-start:-30px;width:200px}
  .s-plans{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
  .s-foot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .s-foot-brand{grid-column:1/-1}
}
@media (max-width:900px){
  .s-hero{grid-template-columns:minmax(0,1fr);padding-top:48px;padding-bottom:80px}
  .s-stage{margin-top:96px;padding-inline-start:0}
  .s-hero-lupo{inset-inline-start:auto;inset-inline-end:-10px;bottom:auto;top:-128px;width:168px}
  .s-hero-lupo .lupo-bubble{inset-inline-start:auto;inset-inline-end:120px;bottom:auto;top:20px;border-radius:16px;border-start-end-radius:4px;transform-origin:100% 0}
  .s-hero-lupo .lupo-bubble::after{display:none}
  .s-section{padding-top:76px;padding-bottom:76px}
  .s-bento,.s-story-grid,.s-compare,.s-split,.s-usage,.s-lupo-section,.s-faq-group,.s-final,.s-block,.s-doc{grid-template-columns:minmax(0,1fr)}
  .s-tile-quick{grid-row:auto}
  .s-story-stage{display:none}
  .s-steps li{min-height:auto;padding:18px 0}
  .js-ready .s-steps li:not(.is-active){opacity:1}
  .s-compare-col{padding:24px}
  .s-nots li{grid-template-columns:minmax(0,1fr);gap:10px}
  .s-plan-rail{grid-template-columns:repeat(2,minmax(0,1fr))}
  .s-plan-rail li:nth-child(3){border-inline-start:0}
  .s-plan-rail li:nth-child(n+3){border-top:1px solid var(--line-soft)}
  .s-timeline{grid-template-columns:minmax(0,1fr);gap:0}
  .s-timeline::before,.s-timeline::after{inset-inline:auto;inset-inline-start:9px;top:0;bottom:0;width:3px;height:auto}
  .s-timeline::after{transform-origin:center top}
  .js-ready .s-timeline:not(.is-in)::after{transform:scaleY(0)}
  .s-timeline li{padding:0 0 26px;padding-inline-start:40px}
  .s-timeline li::before{top:2px}
  .s-toc{display:none}
  .s-doc{padding-top:40px}
  .s-final{gap:12px}
  .s-final-lupo{order:-1;width:180px}
  .s-lupo-stage{max-width:300px;margin-inline:auto}
}
@media (max-width:600px){
  body.site{font-size:15px}
  .site h1,.site h2{hyphens:auto;overflow-wrap:break-word}
  .s-top{gap:8px;padding-inline:14px}
  .s-brand strong{display:none}
  .s-lang{position:relative;justify-content:center;width:38px;padding:0}
  .s-lang select{position:absolute;inset:0;width:100%;height:100%;opacity:0}
  .s-login{display:none}
  .s-top .s-btn{height:36px;padding:0 13px;font-size:13.5px}
  .s-try{flex-direction:column;padding:8px}
  .s-try-field{padding:0 6px}
  .s-try .s-btn-big{width:100%}
  .s-inline-cta .s-btn-big,.s-rail-cta .s-btn-big,.s-compare-with .s-btn-big{width:100%}
  /* Long texts wrap instead of widening the page: Russian at 320 px had 237 px of text in a
     224 px button and "Конфиденциальность" wider than its footer column (page 328 px wide). */
  .s-btn-big,.s-try .s-btn-big{height:auto;min-height:48px;padding-block:12px;white-space:normal;text-wrap:balance;text-align:center}
  .s-foot-col a{overflow-wrap:anywhere}
  .s-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .s-who li,.s-rules li{grid-template-columns:46px minmax(0,1fr);gap:12px}
  .s-who li::before{font-size:24px}
  .s-who-icon{display:none}
  .s-plans,.s-plan-rail,.s-checks{grid-template-columns:minmax(0,1fr)}
  .s-plan-rail li{border-inline-start:0;border-top:1px solid var(--line-soft)}
  .s-plan-rail li:first-child{border-top:0}
  .s-tabs-pile li{flex-wrap:wrap}
  .s-tabs-pile span{flex-basis:100%;margin-inline-start:30px;text-align:start}
  .s-tile{padding:22px}
  .s-foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lupo-dock{width:76px}
  .s-table th,.s-table td{padding:12px 14px}
  /* The video's play button: on a phone the poster is ~190 px high, the label sat on the stopwatch. */
  .s-play{gap:10px;padding:16px;background:linear-gradient(transparent 30%,oklch(0.15 0.012 140 / .8))}
  .s-play-icon{width:52px;height:52px;font-size:22px;box-shadow:0 0 0 6px oklch(0.87 0.13 125 / .22)}
  .s-play-label{margin-bottom:15px;font-size:15px}
  .s-play-time{margin-bottom:16px}
}
@media (prefers-reduced-motion:reduce){
  .s-enter,.s-marquee-track,.s-live,.s-demo-address::after,.s-fake-input kbd,.lupo-bubble.is-pop,.lupo-bubble.is-pop .lupo-line,.s-fake-tiles li,.s-fake-doc>p,.s-tabs-pile li,.s-try.is-shake{animation:none!important}
  .lupo-dock .lupo-figure{transition:none!important}
  .js-ready [data-reveal],.js-ready .s-mini-tiles li,.js-ready .s-mini-doc>p,.js-ready .s-mini-bars span{opacity:1!important;transform:none!important;transition:none!important}
  .js-ready .s-tiles li .s-v,.js-ready .s-demo .s-demo-report{opacity:1!important;transform:none!important}
  .js-ready .s-tiles li{animation:none!important}
  .s-strike::after,.s-timeline::after,.s-bar i{transition:none!important}
  .js-ready [data-reveal]:not(.is-in) .s-strike::after,.js-ready .s-timeline:not(.is-in)::after{transform:none!important}
  .js-ready [data-reveal]:not(.is-in) .s-bar i{transform:scaleX(.74)!important}
  .s-scene,.lupo-dock,.s-btn,.s-ghost,.lupo-button{transition:none!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
}