/* Public pages: landing (site/index.html), legal page (site/recht.html) and blog (templates/public/blog*.html), in the look
   of the portal. Builds on maske.css (tokens, fonts, .btn/.btn2/.tag, the wordmark). Light and dark follow the portal
   (saved choice, else the system).

   One system for the whole landing:
   - Dark always means "your team at work": hero, the night band, the finale and the footer switch to color-scheme dark,
     so the portal's light-dark() tokens turn dark inside them - no second set of colours.
   - Type: h1, h2, h3, lead, body, small. Three radii: 12 (controls), 18 (cards, bubbles), 24 (frames). Two shadows.
     Orange for the main button, the active state, our replies, the calculator and the horizon line.
   - ONE frame (.lp-frame) for every piece of real UI: the night chat, the films, the live portal and the calculator.
   - Motion: one soft easing (--lp-out). The hero builds up line by line, sections rise in once as they come into view
     (heading first, then the rest one after the other), icons draw themselves, the steps' line draws across; where the
     browser can, the portal tilts up and the sun rises with the scrolling. The hero video loops. Reduced motion:
     everything in its end state, the video stays on the still picture. */

:root {
  --lp-night: #0e0d0c;
  --lp-glow: #ffc49b;
  --lp-horizon: linear-gradient(90deg, transparent, var(--accent) 22%, var(--lp-glow) 50%, var(--accent) 78%, transparent);
  --lp-sh-1: 0 1px 2px var(--shadow-c), 0 8px 24px var(--shadow-c);
  --lp-sh-2: 0 2px 6px var(--shadow-c), 0 32px 72px -24px light-dark(rgba(20, 18, 15, .22), rgba(0, 0, 0, .75));
  --lp-bar-h: 72px;
  --lp-out: cubic-bezier(.16, 1, .3, 1);
  --lp-spring: cubic-bezier(.34, 1.4, .64, 1);
  --lp-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] { --lp-night: #0a0908; }

/* ---------- Base ---------- */
body.lp { font-size: 16px; line-height: 1.6; background: var(--page); }
.lp :where(h1, h2, h3) { margin: 0; font-family: var(--font-d); font-weight: 700; color: var(--ink); text-wrap: balance; }
.lp :where(p) { margin: 0; }
:where(.lp a) { color: inherit; }
.lp :focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.lp-in { width: min(1200px, 100% - 48px); margin-inline: auto; }
.lp-wide { width: min(1320px, 100% - 48px); margin-inline: auto; }
.lp-skip { position: absolute; left: 16px; top: -48px; z-index: 100; padding: 8px 14px; border-radius: 10px; background: var(--ink); color: var(--page); text-decoration: none; }
.lp-skip:focus-visible { top: 12px; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.lp-lead { max-width: 60ch; color: var(--ink2); font-size: 19px; line-height: 1.6; }
.lp-head { display: grid; gap: 16px; margin-bottom: 56px; }
.lp-head h2, .lp-night h2, .lp-finale h2 { font-size: clamp(34px, 3.6vw, 52px); line-height: 1.06; letter-spacing: -.03em; max-width: 20ch; }
.lp-head .lp-lead a { color: var(--accent-text); font-weight: 600; }
.lp-sec { padding: 128px 0; }
.lp-alt { border-block: 1px solid var(--line); background: var(--surface); }

/* Buttons: the portal's, a little larger; no glow, hover only brightens */
.lp .btn, .lp .btn2, .lp-bar .btn { text-decoration: none; white-space: nowrap; }
.lp-btn-l { height: 48px; padding: 0 22px; border-radius: 12px; font-size: 15px; text-decoration: none; }
.lp-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 32px; }
.lp .lp-ghost { border-color: rgba(255, 255, 255, .32); background: rgba(255, 255, 255, .07); color: #fff; backdrop-filter: blur(8px); }
.lp .lp-ghost:hover { background: rgba(255, 255, 255, .15); }
/* the main button carries an arrow that steps forward on hover */
.lp-go .ic { width: 18px; height: 18px; margin-right: -4px; rotate: -90deg; transition: translate .3s var(--lp-out); }
.lp-go:hover .ic { translate: 4px 0; }
.lp .lp-go { transition: filter .15s, transform .3s var(--lp-out), box-shadow .3s var(--lp-out); }
.lp .lp-go:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--accent) 70%, transparent); }
.lp-more { display: inline-flex; align-items: center; gap: 4px; width: fit-content; color: var(--accent-text); font-weight: 600; text-decoration: none; }
.lp-more .ic { rotate: -90deg; }
.lp-more:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Bar: transparent over the sunset, solid as soon as the page moves; its tone follows the section below ---------- */
.lp-bar {
  position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--line); color: var(--ink);
  background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: saturate(1.4) blur(14px);
  transition: background-color .25s, border-color .25s;
}
.lp-bar-in { display: flex; align-items: center; gap: 28px; height: var(--lp-bar-h); }
.lp-bar .brand { margin: 0; }
.lp-nav { display: flex; gap: 2px; }
.lp-nav a, .lp-menu a {
  display: inline-flex; align-items: center; height: 40px; padding: 0 12px; border-radius: 10px; color: var(--ink2);
  font-size: 15px; font-weight: 500; text-decoration: none; transition: background-color .15s, color .15s;
}
.lp-nav a:hover, .lp-menu a:hover { background: var(--sunken); color: var(--ink); }
.lp-nav a[aria-current="page"] { color: var(--ink); background: var(--sunken); }
.lp-bar-r { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.lp-login {
  display: inline-flex; align-items: center; height: 40px; padding: 0 12px; border-radius: 10px; color: var(--ink);
  font-size: 15px; font-weight: 500; text-decoration: none; transition: background-color .15s;
}
.lp-login:hover { background: var(--sunken); }
/* light or dark, as in the portal: the moon switches to dark, the sun back to light */
.lp-theme-btn {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: none;
  color: var(--ink2); cursor: pointer; transition: background-color .15s, color .15s;
}
.lp-theme-btn:hover { background: var(--sunken); color: var(--ink); }
.lp-theme-btn .ic { width: 18px; height: 18px; }
.lp-theme-btn .i-sun, :root[data-theme="dark"] .lp-theme-btn .i-moon { display: none; }
:root[data-theme="dark"] .lp-theme-btn .i-sun { display: block; }
.lp-bar-cta { height: 40px; padding: 0 16px; }
.lp-menu-btn {
  display: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line2); border-radius: 12px;
  background: transparent; color: var(--ink); cursor: pointer;
}
.lp-menu-btn .ic { width: 18px; height: 18px; }
.lp-menu {
  position: fixed; inset: calc(var(--lp-bar-h) + 6px) 16px auto auto; width: min(280px, calc(100vw - 32px)); margin: 0; padding: 6px;
  border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--ink); box-shadow: var(--pop);
}
.lp-menu:popover-open { display: grid; animation: lp-pop .25s var(--ease); }
@keyframes lp-pop { from { opacity: 0; transform: translateY(-6px); } }
.lp-menu a { height: 44px; }

.lp-hero-page .lp-bar { position: fixed; inset: 0 0 auto 0; }
.lp-hero-page .lp-bar:not(.is-solid) { border-bottom-color: transparent; background: transparent; backdrop-filter: none; }
.lp-hero-page .lp-bar:not(.is-solid), .lp-bar[data-tone="dark"] { color-scheme: dark; }
.lp-hero-page .lp-bar:not(.is-solid) .lp-nav a { color: rgba(255, 255, 255, .84); }
.lp-hero-page .lp-bar:not(.is-solid) :is(.lp-nav a, .lp-login, .lp-theme-btn):hover { background: rgba(255, 255, 255, .12); }
.lp-hero-page .lp-bar:not(.is-solid) .lp-theme-btn { color: rgba(255, 255, 255, .84); }
.lp-bar.is-solid[data-tone="dark"] { border-bottom-color: rgba(255, 255, 255, .08); background: rgba(14, 13, 12, .8); }

/* ---------- Hero: the sunset, the promise ---------- */
.lp-hero {
  position: relative; isolation: isolate; display: grid; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden;
  min-height: max(660px, min(100svh, 1000px)); background: var(--lp-night); color-scheme: dark; color: var(--ink);
}
.lp-hero-media { position: absolute; inset: 0; z-index: -1; }
.lp-hero-media img, .lp-hero-media video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
}
.lp-hero-media video { opacity: 0; transition: opacity .4s var(--ease); }
.lp-hero-media video.is-on { opacity: 1; }
/* the promise stands in the middle, right in front of the sun: a soft dark halo behind the text keeps it readable
   (at least 4.5:1 for the subline over the brightest frame), the glow of the sunset shows around it; darker at the top
   for the bar and at the bottom for the facts */
.lp-hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 9, 8, .62) 0, rgba(10, 9, 8, 0) 200px),
    linear-gradient(0deg, rgba(10, 9, 8, .82) 0, rgba(10, 9, 8, 0) 240px),
    radial-gradient(ellipse 46% 40% at 50% 50%, rgba(10, 9, 8, .74) 0%, rgba(10, 9, 8, .64) 60%, rgba(10, 9, 8, .36) 100%),
    rgba(10, 9, 8, .3);
}
.lp-hero-in { display: grid; justify-items: center; align-self: center; padding: calc(var(--lp-bar-h) + 56px) 0 64px; text-align: center; }
.lp-hero h1 { color: #fff; font-size: clamp(44px, 5vw, 76px); line-height: 1.02; letter-spacing: -.035em; text-shadow: 0 2px 32px rgba(10, 9, 8, .45); }
.lp-hero h1 span { display: block; }
.lp-hero h1 .lp-h1-glow { color: var(--lp-glow); }
.lp-hero-sub { max-width: 34em; margin-top: 24px; color: rgba(255, 255, 255, .88); font-size: 20px; line-height: 1.55; text-shadow: 0 1px 20px rgba(10, 9, 8, .5); }
.lp-hero .lp-cta { justify-content: center; margin-top: 36px; }
.lp-micro { margin-top: 14px; color: rgba(255, 255, 255, .74); font-size: 14px; }
.lp-hero-foot { border-top: 1px solid rgba(255, 255, 255, .14); }
.lp-hero-foot-in { position: relative; display: flex; align-items: center; justify-content: center; gap: 16px; min-height: 76px; }
.lp-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 32px; margin: 0; padding: 0; list-style: none; color: rgba(255, 255, 255, .84); font-size: 14.5px; font-weight: 500; }
.lp-facts li { display: inline-flex; align-items: center; gap: 8px; }
.lp-facts li::before { content: ""; width: 16px; height: 16px; background: var(--lp-glow); -webkit-mask: var(--lp-check) center / contain no-repeat; mask: var(--lp-check) center / contain no-repeat; }

/* the hero builds up: the three lines of the promise one after the other, then subline, buttons and facts; the last
   line catches the light once */
@keyframes lp-up { from { opacity: 0; transform: translateY(28px); } }
@keyframes lp-fade { from { opacity: 0; } }
@keyframes lp-shine { from { background-position: 100% 0; } to { background-position: 0 0; } }
.lp-hero h1 span, .lp-hero-sub, .lp-hero .lp-cta, .lp-micro, .lp-facts li { animation: lp-up .9s var(--lp-out) both; }
.lp-hero h1 span:nth-child(2) { animation-delay: .12s; }
.lp-hero h1 span:nth-child(3) { animation-delay: .24s; }
.lp-hero-sub { animation-delay: .4s; }
.lp-hero .lp-cta { animation-delay: .52s; }
.lp-micro { animation-delay: .62s; }
.lp-facts li { animation-name: lp-fade; animation-duration: .7s; }
.lp-facts li:nth-child(1) { animation-delay: .75s; }
.lp-facts li:nth-child(2) { animation-delay: .83s; }
.lp-facts li:nth-child(3) { animation-delay: .91s; }
.lp-facts li:nth-child(4) { animation-delay: .99s; }
.lp-hero h1 .lp-h1-glow {
  background: linear-gradient(100deg, var(--lp-glow) 0%, var(--lp-glow) 40%, #fff6ee 50%, var(--lp-glow) 60%, var(--lp-glow) 100%) 100% 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 2px 24px rgba(10, 9, 8, .45));   /* a text-shadow would paint over the clipped colour */
  animation: lp-up .9s .24s var(--lp-out) both, lp-shine 1.8s 1s var(--lp-out) both;
}

/* ---------- The frame: every piece of real UI on the page sits in it ---------- */
.lp-frame { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); box-shadow: var(--lp-sh-2); }
.lp-frame-bar {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 12px 0 18px; border-bottom: 1px solid var(--line);
  color: var(--ink2); font-size: 13.5px; font-weight: 500;
}

/* ---------- Night: the one dark band (night, team, sunrise) ---------- */
.lp-band { position: relative; isolation: isolate; background: var(--lp-night); color-scheme: dark; color: var(--ink); }
.lp-band::before {
  content: ""; position: absolute; inset: 0 0 auto 0; z-index: -1; height: 640px; pointer-events: none;
  background: radial-gradient(70% 100% at 72% 0%, rgba(243, 115, 56, .14), transparent 70%);
}
.lp-band .lp-frame { border-color: rgba(255, 255, 255, .1); box-shadow: 0 40px 90px -36px rgba(0, 0, 0, .85); }
.lp-night { position: relative; padding: 128px 0 112px; }
/* the night sky: two star layers that twinkle out of step and a crescent moon that sinks while you scroll past */
.lp-sky { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(#000 25%, transparent 92%); mask-image: linear-gradient(#000 25%, transparent 92%); }
.lp-sky::before, .lp-sky::after { content: ""; position: absolute; inset: 0; }
.lp-sky::before {
  background-image: radial-gradient(1.2px 1.2px at 24px 38px, rgba(255, 255, 255, .95), transparent), radial-gradient(1px 1px at 132px 84px, rgba(255, 255, 255, .8), transparent),
    radial-gradient(1.5px 1.5px at 210px 22px, rgba(255, 228, 200, .95), transparent), radial-gradient(1px 1px at 286px 150px, rgba(255, 255, 255, .7), transparent),
    radial-gradient(1.2px 1.2px at 70px 196px, rgba(255, 255, 255, .8), transparent);
  background-size: 320px 240px; opacity: .5; animation: lp-twinkle 5s ease-in-out infinite alternate;
}
.lp-sky::after {
  background-image: radial-gradient(1px 1px at 60px 120px, rgba(255, 255, 255, .85), transparent), radial-gradient(1.6px 1.6px at 300px 40px, rgba(255, 236, 214, .9), transparent),
    radial-gradient(1px 1px at 400px 260px, rgba(255, 255, 255, .7), transparent), radial-gradient(1.3px 1.3px at 180px 300px, rgba(255, 255, 255, .8), transparent);
  background-size: 460px 340px; opacity: .3; animation: lp-twinkle 7s ease-in-out -2.5s infinite alternate;
}
@keyframes lp-twinkle { from { opacity: .18; } to { opacity: .62; } }
.lp-moon {
  position: absolute; top: 18px; right: max(24px, calc(50% - 600px)); width: 54px; height: 54px; border-radius: 50%;
  box-shadow: inset -13px 7px 0 0 #f5e3c8; rotate: -18deg; filter: drop-shadow(0 0 18px rgba(255, 210, 160, .4));
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .lp-moon { animation: lp-moon linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  }
}
@keyframes lp-moon { from { translate: 0 -12px; } to { translate: -40px 48px; } }
.lp-night-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; align-items: center; }
.lp-night .lp-lead { margin-top: 20px; }
/* three steps on a line that fills as the conversation plays (start.js marks them .is-on) */
.lp-timeline { position: relative; display: grid; gap: 22px; margin: 44px 0 0; padding: 0; list-style: none; }
.lp-timeline::before, .lp-timeline::after { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; border-radius: 2px; background: var(--line); }
.lp-timeline::after { background: linear-gradient(var(--accent), var(--lp-glow)); transform: scaleY(var(--tl, 0)); transform-origin: 50% 0; transition: transform .9s var(--lp-out); }
.lp-timeline li { position: relative; z-index: 1; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: center; }
.lp-tl-ic {
  display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line2); border-radius: 50%; background: var(--surface); color: var(--ink3);
  transition: background-color .4s var(--lp-out), border-color .4s, color .4s, transform .5s var(--lp-spring), box-shadow .4s;
}
.lp-tl-ic .ic { width: 18px; height: 18px; }
.lp-timeline li.is-on .lp-tl-ic { border-color: var(--accent); background: var(--accent); color: var(--on-accent); transform: scale(1.08); box-shadow: 0 0 0 6px rgba(243, 115, 56, .16); }
.lp-timeline b { display: block; color: var(--ink); font-size: 16.5px; font-weight: 600; }
.lp-timeline li > div > span { display: block; color: var(--ink2); font-size: 15px; }
/* while the chat plays, steps not reached yet stay dim; the step just reached sends out a ring a few times */
.lp-timeline.is-playing li > div { opacity: .42; transition: opacity .6s var(--lp-out); }
.lp-timeline.is-playing li.is-on > div { opacity: 1; }
.lp-tl-ic { position: relative; }
.lp-timeline li.is-now .lp-tl-ic::after { content: ""; position: absolute; inset: -1px; border: 2px solid var(--accent); border-radius: 50%; animation: lp-ring 1.6s var(--lp-out) 3; opacity: 0; }
@keyframes lp-ring { from { transform: scale(1); opacity: .75; } to { transform: scale(1.75); opacity: 0; } }

/* the night chat: the portal's bubbles, dark */
.lp-chat-h { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.lp-chat-h > span:nth-child(2) { display: grid; line-height: 1.3; }
.lp-chat-h b { color: var(--ink); font-size: 15px; }
.lp-chat-h small { color: var(--ink3); font-size: 12.5px; }
.lp-shift { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 4px 11px; border-radius: 999px; background: var(--sunken); color: var(--ink2); font-size: 12.5px; font-weight: 600; }
.lp-shift .ic { width: 14px; height: 14px; color: var(--lp-glow); }
.lp-av { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: #4f6b8f; color: #fff; font-family: var(--font-d); font-size: 13px; font-weight: 700; }
.lp-chat-log { display: flex; flex-direction: column; gap: 14px; padding: 24px 20px 28px; background: var(--page); }
.lp-row { position: relative; display: flex; flex-direction: column; align-items: flex-start; max-width: 84%; }
.lp-row.us { align-self: flex-end; align-items: flex-end; }
.lp-bub { padding: 10px 14px; border-radius: 18px; background: var(--them); color: var(--ink); font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.lp-row.fan .lp-bub { border-bottom-left-radius: 6px; }
.lp-row.us .lp-bub { background: var(--us); color: var(--us-ink); border-bottom-right-radius: 6px; }
.lp-meta { margin-top: 5px; padding: 0 4px; color: var(--ink3); font-size: 12px; font-variant-numeric: tabular-nums; }
.lp-dots { position: absolute; right: 0; top: 0; display: none; gap: 4px; padding: 14px 16px; border-radius: 18px 18px 6px 18px; background: var(--us); }
.lp-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--us-ink); opacity: .5; animation: lp-dot 1.2s infinite ease-in-out; }
.lp-dots i:nth-child(2) { animation-delay: .15s; }
.lp-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes lp-dot { 30% { opacity: 1; } 60% { opacity: .5; } }
/* played once when it comes into view (start.js): the space is kept, so nothing jumps; bubbles pop from their corner */
.lp-chat.is-playing [data-seq] > :not(.lp-dots) { opacity: 0; transform: translateY(10px) scale(.94); }
.lp-row.fan > .lp-bub { transform-origin: 0 100%; }
.lp-row.us > .lp-bub { transform-origin: 100% 100%; }
.lp-chat.is-playing [data-seq].is-in > :not(.lp-dots) { opacity: 1; transform: none; transition: opacity .35s var(--lp-out), transform .55s var(--lp-spring); }
.lp-chat.is-playing [data-seq].is-in > .lp-meta { transition-delay: .2s; }
.lp-chat.is-playing [data-seq].is-typing .lp-dots { display: inline-flex; animation: lp-pop .25s var(--lp-out); }

/* what the team noted about the fan, pinned into the conversation */
.lp-note {
  align-self: center; display: flex; align-items: center; gap: 8px; max-width: 94%; padding: 8px 14px; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 12px; background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--ink2); font-size: 13.5px; line-height: 1.4;
}
.lp-note .ic { flex: none; width: 15px; height: 15px; color: var(--accent-text); }
.lp-note b { color: var(--ink); font-weight: 600; }
.lp-chat.is-playing .lp-note { opacity: 0; transform: translateY(8px) scale(.96); }
.lp-chat.is-playing .lp-note.is-in { opacity: 1; transform: none; transition: opacity .4s var(--lp-out), transform .6s var(--lp-spring); }

/* an image from the release: blurred with a lock until the fan buys it */
.lp-img { display: flex; align-items: center; gap: 12px; padding: 8px 16px 8px 8px; border-radius: 18px 18px 6px 18px; background: var(--us); color: var(--us-ink); }
.lp-row.us > .lp-img { transform-origin: 100% 100%; }
.lp-img-ph { position: relative; display: grid; place-items: center; flex: none; width: 70px; height: 86px; overflow: hidden; border-radius: 12px; background: #3a231b; }
.lp-img-ph::before {
  content: ""; position: absolute; inset: -10px; filter: blur(7px); transition: filter 1s var(--lp-out);
  background: radial-gradient(34% 26% at 50% 34%, #f2c3a2 0 60%, transparent 62%), radial-gradient(70% 48% at 50% 100%, #d9895f 0 70%, transparent 72%), linear-gradient(165deg, #8a5242, #2c1914);
}
.lp-img-lock { position: relative; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(0, 0, 0, .5); color: #fff; transition: opacity .4s, transform .5s var(--lp-spring); }
.lp-img-lock .ic { width: 15px; height: 15px; }
.lp-img-t { display: grid; gap: 5px; }
.lp-img-t b { font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.lp-img-t small { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; }
.lp-fsk { padding: 1px 7px; border-radius: 6px; background: rgba(255, 255, 255, .16); font-size: 12px; font-weight: 600; }
.lp-img-got { display: none; align-items: center; gap: 4px; font-weight: 600; }
.lp-img-got .ic { width: 14px; height: 14px; }
.lp-img.is-bought .lp-img-ph::before { filter: blur(0); }
.lp-img.is-bought .lp-img-lock { opacity: 0; transform: scale(.5); }
.lp-img.is-bought .lp-img-wait { display: none; }
.lp-img.is-bought .lp-img-got { display: inline-flex; animation: lp-pop .4s var(--lp-spring); }

/* the portal line under the chat: what the night brought, counted up while it plays */
.lp-chat-f { display: grid; gap: 10px; padding: 14px 20px 16px; border-top: 1px solid var(--line); background: var(--surface); transition: background-color .8s var(--lp-out), box-shadow .8s var(--lp-out); }
.lp-chat-f-h { display: inline-flex; align-items: center; gap: 8px; color: var(--ink3); font-size: 12.5px; font-weight: 600; transition: color .6s; }
.lp-chat-f-h .ic { width: 15px; height: 15px; }
.lp-chat-f dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.lp-chat-f dl > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 2px; }
.lp-chat-f dt { color: var(--ink3); font-size: 12.5px; }
.lp-chat-f dd { margin: 0; color: var(--ink); font-family: var(--font-d); font-size: 22px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; transform-origin: 0 70%; }
.lp-chat-f dd.is-bump { animation: lp-bump .55s var(--lp-spring); }
@keyframes lp-bump { 35% { transform: scale(1.2); color: var(--accent-text); } }
.lp-chat-f.is-lit { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent) 55%, transparent); }
.lp-chat-f.is-lit .lp-chat-f-h { color: var(--accent-text); }

/* ---------- Team: who writes, and five films from the mask ---------- */
.lp-team { padding: 24px 0 120px; }
.lp-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 52px 40px; margin: 0 0 88px; padding: 0; list-style: none; }
.lp-points li { display: grid; align-content: start; gap: 10px; }
.lp-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-text); }
.lp-ic .ic { width: 20px; height: 20px; }
.lp-points h3 { margin-top: 8px; font-size: 20px; line-height: 1.3; }
/* the team's six points stand centred under their icons (the security list beside the film stays left) */
.lp-team .lp-points li { justify-items: center; text-align: center; }
.lp-team .lp-head { justify-items: center; text-align: center; }
.lp-team .lp-head .lp-lead { max-width: 62ch; }
.lp-team .lp-points p { max-width: 36ch; }
.lp-points p { color: var(--ink2); font-size: 15.5px; }

.lp-player { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; align-items: start; }
.lp-chapters { display: grid; gap: 4px; }
.lp-chapters button {
  position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 18px 16px 22px 20px; border: 0; border-radius: 12px;
  background: none; color: var(--ink2); text-align: left; cursor: pointer; transition: background-color .15s;
}
.lp-chapters button:hover { background: var(--sunken); }
.lp-chapters button::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 22px; width: 2px; border-radius: 2px; background: transparent; transition: background-color .25s; }
.lp-chapters button[aria-selected="true"]::before { background: var(--accent); }
.lp-ch-n { padding-top: 1px; color: var(--ink3); font-family: var(--font-d); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lp-chapters [aria-selected="true"] .lp-ch-n { color: var(--accent-text); }
.lp-ch-t { display: grid; gap: 4px; }
.lp-ch-t b { color: var(--ink); font-size: 17px; font-weight: 600; line-height: 1.35; }
.lp-ch-t small { color: var(--ink2); font-size: 14.5px; line-height: 1.5; }
.lp-ch-p { position: absolute; left: 68px; right: 16px; bottom: 10px; display: none; height: 2px; overflow: hidden; border-radius: 2px; background: var(--line); }
.lp-chapters [aria-selected="true"] .lp-ch-p { display: block; }
.lp-ch-p i { display: block; width: 100%; height: 100%; background: var(--accent); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; transition: transform .4s var(--ease); }

/* the training's films (mod-schulung.css, loaded by start.js): the stage fills the frame; the space is kept until then */
.lp-film .demo { gap: 0; }
/* a wider stage than the training's (760 x 466 instead of 620 x 380), so the films show at about their real size */
.lp-film .stage { aspect-ratio: 760 / 466; border: 0; border-radius: 0; box-shadow: none; background: var(--page); visibility: hidden; }
.lp-film .stage-in { width: 760px; height: 466px; }
.lp-films-ready .lp-film .stage { visibility: visible; }
.lp-film .demo-c { gap: 14px; min-height: 60px; padding: 10px 16px; border-top: 1px solid var(--line); }
.lp-film .demo-say { color: var(--ink); font-size: 15px; line-height: 1.45; }
.lp-film .demo-replay { height: 36px; border-radius: 10px; font-size: 13.5px; }
.lp-next {
  display: inline-flex; align-items: center; gap: 4px; height: 36px; margin-left: auto; padding: 0 8px 0 12px; border: 1px solid var(--line2); border-radius: 10px;
  background: var(--surface); color: var(--ink); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background-color .15s;
}
.lp-next:hover { background: var(--sunken); }
.lp-next .ic { width: 16px; height: 16px; rotate: -90deg; }

/* the sunrise: the band ends in the morning light (dark design: an ember glow into the dark page); a soft sun climbs
   while you scroll through it where the browser supports scroll-driven animations */
.lp-sunrise { position: relative; overflow: hidden; height: 360px; background: linear-gradient(180deg, var(--lp-night) 0%, #2a160d 30%, #8a3d1c 55%, #f6b98f 78%, #faf8f5 100%); }
:root[data-theme="dark"] .lp-sunrise { background: linear-gradient(180deg, var(--lp-night) 0%, #2a160d 42%, #3a1d10 62%, #12110f 100%); }
:root[data-theme="dark"] .lp-sunrise::after { content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: var(--lp-horizon); }
.lp-sun {
  position: absolute; left: 50%; bottom: -300px; width: 560px; height: 560px; margin-left: -280px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 214, 170, .85) 0%, rgba(255, 170, 110, .45) 30%, rgba(243, 115, 56, .14) 55%, transparent 70%);
  transform: translateY(-60px);
}
:root[data-theme="dark"] .lp-sun { opacity: .5; }

/* ---------- More than answers: six cards ---------- */
.lp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.lp-card {
  position: relative; display: grid; align-content: start; gap: 10px; padding: 28px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px;
  background: var(--surface); transition: transform .4s var(--lp-out), box-shadow .4s var(--lp-out), border-color .3s;
}
/* a warm light follows into the card on hover */
.lp-card::before {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0; pointer-events: none; transition: opacity .4s var(--lp-out);
  background: radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%);
}
.lp-card > * { position: relative; z-index: 1; }
.lp-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); box-shadow: var(--lp-sh-2); }
.lp-card:hover::before { opacity: 1; }
.lp-card .lp-ic { transition: background-color .3s, color .3s, transform .5s var(--lp-spring); }
.lp-card:hover .lp-ic { background: var(--accent); color: var(--on-accent); transform: rotate(-6deg) scale(1.06); }
.lp-card h3 { margin-top: 10px; font-size: 20px; line-height: 1.3; }
.lp-card p { color: var(--ink2); font-size: 15.5px; }

/* ---------- Portal: one frame, the real portal as a live demo ---------- */
.lp-portal { padding-top: 40px; }
.lp-demo .lp-frame-bar { flex-wrap: wrap; gap: 8px 12px; padding: 8px 10px 8px 18px; }
.lp-tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--sunken); }
.lp-tabs button {
  height: 36px; padding: 0 14px; border: 0; border-radius: 9px; background: none; color: var(--ink2); font-size: 14px; font-weight: 500;
  cursor: pointer; transition: background-color .15s, color .15s;
}
.lp-tabs button:hover { color: var(--ink); }
.lp-tabs button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px var(--shadow-c), 0 0 0 1px var(--line); }
.lp-demo-end {
  display: inline-flex; align-items: center; gap: 8px; height: 42px; margin-left: auto; padding: 0 10px 0 14px; border: 1px solid var(--line2); border-radius: 10px;
  background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 600; cursor: pointer;
}
.lp-demo-end:hover { background: var(--sunken); }
.lp-demo-end kbd { padding: 1px 6px; border: 1px solid var(--line2); border-radius: 6px; color: var(--ink3); font: 600 11.5px var(--font); }
.lp-demo-view { position: relative; height: 760px; background: var(--page); }
.lp-demo-in, .lp-demo-in iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }
.lp-demo-in[inert] iframe { pointer-events: none; }
.lp-demo-start { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding: 0 0 28px; border: 0; background: none; cursor: pointer; }
.lp-demo-start > span {
  display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: 999px; background: var(--toast); color: #fff;
  font-size: 14.5px; font-weight: 600; box-shadow: var(--pop); transition: filter .15s;
}
.lp-demo-start:hover > span { filter: brightness(1.18); }
.lp-demo-start:focus-visible { outline: 0; }
.lp-demo-start:focus-visible > span { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.lp-demo.is-active .lp-demo-start { display: none; }
.lp-caption { margin-top: 16px; color: var(--ink3); font-size: 14px; text-align: center; }

/* ---------- Security ---------- */
.lp-safe { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.lp-points-col { grid-template-columns: minmax(0, 1fr); gap: 28px; margin: 0; }
.lp-points-col li { grid-template-columns: 44px minmax(0, 1fr); gap: 4px 16px; }
.lp-points-col .lp-ic { grid-row: span 2; }
.lp-points-col h3 { margin-top: 0; font-size: 18px; align-self: end; }
.lp-points-col p { grid-column: 2; }
.lp-rules { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
.lp-rules h3 { margin-bottom: 14px; font-family: var(--font); font-size: 15px; font-weight: 600; }
.lp-rules ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.lp-rules li { display: flex; gap: 10px; color: var(--ink2); font-size: 15.5px; }
.lp-rules li::before {
  content: ""; flex: none; width: 18px; height: 18px; margin-top: 3px; background: var(--ok);
  -webkit-mask: var(--lp-check) center / contain no-repeat; mask: var(--lp-check) center / contain no-repeat;
}

/* ---------- Calculator: three sliders, the result counts along (start.js) ---------- */
.lp-calc { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.lp-calc-in { display: grid; align-content: start; gap: 30px; padding: 36px; }
.lp-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 6px 16px; }
.lp-field label { color: var(--ink); font-size: 16px; font-weight: 600; }
.lp-field output {
  min-width: 72px; color: var(--accent-text); font-family: var(--font-d); font-size: 24px; font-weight: 800; text-align: right;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.lp-field .lp-range, .lp-field small { grid-column: 1 / -1; }
.lp-field small { margin-top: -2px; color: var(--ink3); font-size: 13.5px; }
/* the native range input, styled (track, filled part, thumb, focus) - start.js keeps --p in step with the value */
.lp-range {
  --p: 50%; --track: 6px; --thumb: 24px;
  appearance: none; -webkit-appearance: none; width: 100%; height: 36px; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer;
}
.lp-range::-webkit-slider-runnable-track {
  height: var(--track); border: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent) var(--p), var(--line2) var(--p));
}
.lp-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: var(--thumb); height: var(--thumb); margin-top: calc((var(--track) - var(--thumb)) / 2);
  border: 3px solid var(--accent); border-radius: 50%; background: var(--surface); box-shadow: 0 2px 8px rgba(20, 18, 15, .22);
  transition: transform .25s var(--lp-spring), box-shadow .25s;
}
.lp-range:hover::-webkit-slider-thumb { transform: scale(1.12); }
.lp-range:active::-webkit-slider-thumb { transform: scale(1.2); box-shadow: 0 0 0 8px var(--accent-soft), 0 2px 8px rgba(20, 18, 15, .22); }
.lp-range::-moz-range-track { height: var(--track); border: 0; border-radius: 999px; background: var(--line2); }
.lp-range::-moz-range-progress { height: var(--track); border-radius: 999px; background: var(--accent); }
.lp-range::-moz-range-thumb {
  width: calc(var(--thumb) - 6px); height: calc(var(--thumb) - 6px); border: 3px solid var(--accent); border-radius: 50%; background: var(--surface);
  box-shadow: 0 2px 8px rgba(20, 18, 15, .22);
}
.lp .lp-range:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 4px; border-radius: 8px; }

.lp-calc-out { display: grid; align-content: start; gap: 12px; padding: 36px; border-left: 1px solid var(--line); background: var(--sunken); }
.lp-calc-k { color: var(--ink2); font-size: 15px; font-weight: 600; }
.lp-calc-big { color: var(--ink); font-family: var(--font-d); font-size: clamp(44px, 5vw, 64px); font-weight: 800; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.lp-calc-big.is-low { color: var(--bad); }
.lp-calc-bar { display: flex; height: 12px; margin-top: 8px; overflow: hidden; border-radius: 999px; background: var(--line); }
.lp-calc-bar i { display: block; height: 100%; transition: flex-basis .6s var(--lp-out); }
.lp-calc-bar .keep { flex: 0 0 62%; background: linear-gradient(90deg, var(--accent), var(--lp-glow)); }
.lp-calc-bar .cost { flex: 0 0 38%; background: var(--ink3); }
.lp-calc-legend { display: flex; gap: 18px; color: var(--ink2); font-size: 13px; }
.lp-calc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lp-calc-legend span::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--accent); }
.lp-calc-legend .cost::before { background: var(--ink3); }
.lp-calc-rows { display: grid; margin: 12px 0 0; border-top: 1px solid var(--line2); }
.lp-calc-rows > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line2); }
.lp-calc-rows dt { color: var(--ink2); font-size: 15px; }
.lp-calc-rows dd { margin: 0; color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lp-calc-warn { color: var(--bad); font-size: 14px; font-weight: 600; }
.lp-calc-note { grid-column: 1 / -1; padding: 16px 36px; border-top: 1px solid var(--line); color: var(--ink3); font-size: 13.5px; }

/* ---------- Price list and terms, side by side ---------- */
.lp-price-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; margin-top: 72px; }
.lp-price-grid h3 { margin-bottom: 16px; font-size: 22px; }
.lp-prices { margin: 0; border-top: 1px solid var(--line2); }
.lp-prices > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line2); }
.lp-prices dt { color: var(--ink2); font-size: 15.5px; }
.lp-prices dd { display: grid; justify-items: end; margin: 0; color: var(--ink); font-family: var(--font-d); font-size: 18px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lp-prices dd small { color: var(--ok); font-family: var(--font); font-size: 12.5px; font-weight: 600; }
.lp-prices-note { margin-top: 14px; color: var(--ink3); font-size: 14px; }
.lp-price-grid .lp-more { margin-top: 18px; }

/* ---------- Questions: heading left, the content right ---------- */
.lp-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.lp-split > .lp-head { position: sticky; top: 112px; margin: 0; }
.lp-terms { margin: 0; border-top: 1px solid var(--line2); }
.lp-terms > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line2); }
.lp-terms dt { color: var(--ink); font-weight: 600; }
.lp-terms dd { margin: 0; color: var(--ink2); font-size: 15.5px; }

/* ---------- The way in: four steps on one horizon ---------- */
.lp-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin: 0; padding: 0; list-style: none; }
.lp-steps::before { content: ""; position: absolute; inset: 15px 0 auto 0; height: 1px; background: var(--lp-horizon); transform-origin: 0 50%; }
.lp-steps li { position: relative; display: grid; align-content: start; gap: 10px; }
.lp-step-n {
  display: inline-grid; place-items: center; width: fit-content; height: 30px; padding: 0 12px; border: 1px solid var(--line2); border-radius: 999px;
  background: var(--page); color: var(--accent-text); font-family: var(--font-d); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
  transition: background-color .3s, color .3s, border-color .3s;
}
.lp-steps li:hover .lp-step-n { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
/* the line draws across, then the numbers pop in one after the other (start.js adds .is-drawn) */
.lp-steps.is-pre::before { transform: scaleX(0); }
.lp-steps.is-pre .lp-step-n { opacity: 0; transform: scale(.5); }
.lp-steps.is-drawn::before { transform: none; transition: transform 1.2s var(--lp-out); }
.lp-steps.is-drawn .lp-step-n { opacity: 1; transform: none; transition: opacity .4s var(--lp-out), transform .6s var(--lp-spring), background-color .3s, color .3s, border-color .3s; }
.lp-steps.is-drawn li:nth-child(2) .lp-step-n { transition-delay: .25s; }
.lp-steps.is-drawn li:nth-child(3) .lp-step-n { transition-delay: .5s; }
.lp-steps.is-drawn li:nth-child(4) .lp-step-n { transition-delay: .75s; }
.lp-steps h3 { margin-top: 10px; font-size: 20px; line-height: 1.3; }
.lp-steps p { color: var(--ink2); font-size: 15.5px; }

/* ---------- Questions: one open at a time, opening smoothly where the browser can ---------- */
.lp-faq { border-top: 1px solid var(--line2); interpolate-size: allow-keywords; }
.lp-faq details { border-bottom: 1px solid var(--line2); }
.lp-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 16px 2px; cursor: pointer; list-style: none;
  color: var(--ink); font-family: var(--font-d); font-size: 19px; font-weight: 700; transition: color .15s;
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after {
  content: ""; flex: none; width: 20px; height: 20px; background-color: var(--ink3); transition: rotate .25s var(--ease), background-color .25s;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.lp-faq details[open] summary::after { rotate: 180deg; background-color: var(--accent-text); }
.lp-faq summary:hover { color: var(--accent-text); }
.lp-faq summary:focus-visible { border-radius: 8px; }
.lp-faq details p { max-width: 64ch; padding: 0 2px 22px; color: var(--ink2); font-size: 15.5px; line-height: 1.65; }
.lp-faq details::details-content { height: 0; overflow: clip; transition: height .25s var(--ease), content-visibility .25s allow-discrete; }
.lp-faq details[open]::details-content { height: auto; }

/* ---------- Finale: the evening again, as a still picture ---------- */
.lp-finale { position: relative; isolation: isolate; overflow: hidden; padding: 168px 0; background: var(--lp-night); color-scheme: dark; color: var(--ink); text-align: center; }
.lp-finale-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.lp-finale::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 9, 8, .9) 0%, rgba(10, 9, 8, .72) 50%, rgba(10, 9, 8, .9) 100%); }
.lp-finale .lp-in { display: grid; justify-items: center; gap: 20px; }
.lp-finale h2 { max-width: 18ch; color: #fff; }
.lp-finale p { max-width: 52ch; color: rgba(255, 255, 255, .84); font-size: 18px; }
.lp-finale .lp-cta { justify-content: center; gap: 16px 24px; margin-top: 12px; }
.lp-textlink { color: rgba(255, 255, 255, .86); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 4px; }
.lp-textlink:hover { color: #fff; text-decoration-color: currentColor; }

/* ---------- Footer: night in both designs, the horizon line on top ---------- */
.lp-foot { position: relative; padding: 56px 0 24px; background: var(--lp-night); color-scheme: dark; color: var(--ink2); font-size: 14.5px; }
.lp-foot::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: var(--lp-horizon); }
.lp-foot a { color: var(--ink2); text-decoration: none; transition: color .15s; }
.lp-foot a:hover { color: var(--ink); }
.lp-foot-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 48px; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.lp-foot-head .brand { margin: 0; }
.lp-foot-head .cm-logo { font-size: 24px; }
.lp-foot-claim { flex-basis: 100%; max-width: 48ch; color: var(--ink3); }
.lp-foot-ask { color: var(--ink3); }
.lp-foot .lp-foot-ask a { color: var(--accent-text); font-weight: 600; }
.lp-foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding: 32px 0; }
.lp-foot-col { display: grid; align-content: start; gap: 10px; }
.lp-foot-col h2 { margin: 0 0 2px; color: var(--ink3); font-family: var(--font); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.lp-foot-col a { width: fit-content; }
.lp-foot-col p { margin: 0; color: var(--ink3); font-size: 14px; line-height: 1.6; }
.lp-foot-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--ink3); font-size: 13px; }
.lp-foot-bottom p { margin: 0; }
.lp-foot-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }

/* ---------- Phones: the way to the request stays in reach ---------- */
.lp-sticky { display: none; }

/* ---------- Reveal on scroll (start.js): once, rising in, items of a list one after the other ---------- */
.lp-reveal { opacity: 0; transform: translateY(32px); transition: opacity .8s var(--lp-out), transform 1s var(--lp-out); transition-delay: var(--d, 0ms); }
.lp-reveal.is-in { opacity: 1; transform: none; }
/* section heads: the heading first, then the lead */
.lp-head.lp-reveal { opacity: 1; transform: none; }
.lp-head.lp-reveal > * { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--lp-out), transform 1s var(--lp-out); }
.lp-head.lp-reveal > :nth-child(2) { transition-delay: .12s; }
.lp-head.lp-reveal > :nth-child(3) { transition-delay: .24s; }
.lp-head.lp-reveal.is-in > * { opacity: 1; transform: none; }
/* the icons of cards and lists draw their lines once they are in */
.lp-reveal .lp-ic .ic { stroke-dasharray: 80; stroke-dashoffset: 80; transition: stroke-dashoffset 1.4s .25s var(--lp-out); }
.lp-reveal.is-in .lp-ic .ic { stroke-dashoffset: 0; }
/* where the browser can: the portal tilts up as it scrolls in, the sun climbs through the sunrise */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .lp-demo {
      transform-origin: 50% 100%; animation: lp-tilt linear both; animation-timeline: view(); animation-range: entry 0% cover 35%;
    }
    @keyframes lp-tilt { from { opacity: .3; transform: perspective(1600px) rotateX(16deg) translateY(40px) scale(.94); } to { opacity: 1; transform: none; } }
    .lp-sun { animation: lp-rise linear both; animation-timeline: view(); animation-range: entry 0% exit 60%; }
    @keyframes lp-rise { from { transform: translateY(80px) scale(.85); } to { transform: translateY(-140px) scale(1.05); } }
  }
}

/* ---------- Laptops and tablets ---------- */
@media (max-width: 1080px) {
  .lp-nav { display: none; }
  .lp-menu-btn { display: grid; }
  .lp-night-in { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .lp-night-t { max-width: 640px; }
  .lp-player { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .lp-chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-chapters button:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .lp-safe, .lp-split { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .lp-split > .lp-head { position: static; }
  .lp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
  .lp-steps::before { display: none; }
  .lp-demo-view { height: 680px; }
  .lp-film { width: 100%; max-width: 762px; margin-inline: auto; }   /* one column: the film never grows above its size */
  .lp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-calc { grid-template-columns: minmax(0, 1fr); }
  .lp-calc-out { border-top: 1px solid var(--line); border-left: 0; }
  .lp-price-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
}
@media (max-width: 820px) {
  .lp-sec { padding: 96px 0; }
  .lp-night { padding: 96px 0 88px; }
  .lp-team { padding-bottom: 96px; }
  /* the sunset becomes a picture at the top, the text sits on the night below it */
  .lp-hero { display: block; min-height: 0; }
  .lp-hero-media { bottom: auto; height: min(68svh, 640px); }
  .lp-hero-media img, .lp-hero-media video { object-position: 50% 40%; }
  .lp-hero-media::after { background: linear-gradient(180deg, rgba(10, 9, 8, .55) 0, rgba(10, 9, 8, 0) 140px), linear-gradient(0deg, var(--lp-night) 0%, rgba(14, 13, 12, .92) 30%, rgba(14, 13, 12, 0) 52%); }
  .lp-hero-in { padding: max(48svh, 300px) 0 40px; }
  .lp-hero-foot-in { padding: 16px 0 20px; }
  .lp-hero-foot-in { position: static; }
  .lp-points { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .lp-points:not(.lp-points-col) { margin-bottom: 56px; }
  .lp-points li { grid-template-columns: 44px minmax(0, 1fr); gap: 4px 16px; }
  .lp-points .lp-ic { grid-row: span 2; }
  .lp-points h3 { margin-top: 0; align-self: end; }
  .lp-points p { grid-column: 2; }
  /* the team keeps its centred points: two columns here, one on phones */
  .lp-team .lp-points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 28px; }
  .lp-team .lp-points li { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .lp-team .lp-points .lp-ic { grid-row: auto; }
  .lp-team .lp-points h3 { margin-top: 8px; align-self: auto; }
  .lp-team .lp-points p { grid-column: auto; }
  .lp-terms > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .lp-foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-sticky {
    position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 45; display: flex; align-items: center; gap: 12px;
    padding: 8px 8px 8px 16px; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: blur(12px); box-shadow: var(--pop); transform: translateY(calc(100% + 28px)); transition: transform .25s var(--ease);
  }
  .lp-sticky.is-on { transform: none; }
  .lp-sticky span { flex: 1; color: var(--ink2); font-size: 13.5px; }
  .lp-sticky .btn { height: 44px; padding: 0 18px; }
  .lp-foot { padding-bottom: 104px; }
  /* the sticky bar carries the request on the landing: no second button in the top bar, nothing hidden under the bar */
  .lp-hero-page .lp-bar-cta { display: none; }
  html:has(.lp-sticky) { scroll-padding-bottom: 96px; }
}
/* films on narrow screens: their own narrow stage at full size instead of a shrunken desktop one */
@media (max-width: 760px) {
  .lp-film { max-width: 400px; }
  .lp-film .stage { aspect-ratio: 360 / 460; }
  .lp-film .stage-in { width: 360px; height: 460px; }
  /* the narrow stage has no room for two columns: taboos above, profile below */
  .lp-film .mk-model.wide.mk-two { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 18px 16px; align-content: start; }
  .lp-film .mk-split { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .lp-film .mk-side { border-top: 1px solid var(--line); border-left: 0; }
  .lp-film .mkp-b { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .lp-film .mkp-side { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; border-top: 1px solid var(--line); border-left: 0; }
  .lp-film .mkp-prev { grid-column: 1; grid-row: 1 / 3; width: 52px; }
  .lp-film .mkp-side > b { grid-column: 2; grid-row: 1; }
  .lp-film .mkp-tags { grid-column: 2; grid-row: 2; }
  .lp-film .mkp-go { grid-column: 3; grid-row: 1 / 3; margin: 0; }
  .lp-film .mk-rule { width: calc(100% - 32px); }
  .lp-film .st-toast.in-chat { left: 50%; }
  .lp-film .demo-c { flex-wrap: wrap; gap: 10px; padding: 14px 16px; }
  .lp-film .demo-say { order: -1; flex-basis: 100%; }
}
@media (max-width: 560px) {
  .lp-team .lp-points { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  :root { --lp-bar-h: 60px; }
  .lp-in, .lp-wide { width: calc(100% - 32px); }
  .lp-bar-in { gap: 12px; }
  .lp-login { display: none; }
  .lp-bar-cta { height: 40px; padding: 0 14px; font-size: 14px; }
  .lp-sec { padding: 64px 0; }
  .lp-head { margin-bottom: 32px; }
  .lp-points { gap: 24px; }
  .lp-points:not(.lp-points-col) { margin-bottom: 40px; }
  .lp-terms > div { padding: 16px 0; }
  .lp-rules { margin-top: 28px; padding-top: 24px; }
  .lp-lead { font-size: 17px; }
  .lp-hero h1 { font-size: clamp(36px, 10.4vw, 46px); }
  .lp-hero-sub { font-size: 17px; }
  .lp-hero .lp-cta .lp-btn-l { flex: 1 1 100%; }
  .lp-facts { gap: 8px 20px; font-size: 14px; }
  .lp-facts li:nth-child(4) { display: none; }
  .lp-night { padding: 72px 0; }
  .lp-cards { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .lp-card { padding: 22px; }
  .lp-calc-in, .lp-calc-out { padding: 24px 20px; gap: 24px; }
  .lp-calc-out { gap: 10px; }
  .lp-calc-note { padding: 14px 20px; }
  .lp-field output { font-size: 21px; }
  .lp-prices > div { padding: 12px 0; }
  .lp-price-grid { margin-top: 56px; }
  .lp-chat-log { padding: 18px 14px 22px; }
  .lp-row { max-width: 92%; }
  .lp-team { padding-bottom: 72px; }
  .lp-chapters { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lp-chapters button { padding: 14px 12px 18px 16px; }
  .lp-ch-t small { display: none; }
  .lp-chapters [aria-selected="true"] .lp-ch-t small { display: block; }
  .lp-sunrise { height: 220px; }
  .lp-demo .lp-frame-bar { padding: 10px 12px; }
  .lp-tabs { order: 3; width: 100%; margin: 0; overflow-x: auto; }
  .lp-tabs button { flex: 1 0 auto; height: 40px; padding: 0 12px; }
  .lp-demo-view { height: 560px; }
  .lp-steps { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .lp-faq summary { font-size: 17.5px; }
  .lp-finale { padding: 96px 0; }
  .lp-finale .lp-cta { flex-direction: column; }
  .lp-foot { padding-top: 44px; }
  .lp-foot-cols { gap: 28px 20px; }
  .lp-foot-cols > :last-child { grid-column: 1 / -1; }
}
@media (pointer: coarse) {
  .lp-nav a, .lp-login, .lp-bar-cta, .lp-tabs button, .lp-next, .lp-demo-end, .lp-film .demo-replay { min-height: 44px; }
  .lp-theme-btn { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-reveal, .lp-head.lp-reveal > * { opacity: 1; transform: none; transition: none; }
  .lp-reveal .lp-ic .ic { stroke-dashoffset: 0; transition: none; }
  .lp-chat.is-playing [data-seq] > :not(.lp-dots), .lp-chat.is-playing .lp-note { opacity: 1; transform: none; }
  .lp-sky::before, .lp-sky::after, .lp-timeline li.is-now .lp-tl-ic::after, .lp-chat-f dd.is-bump { animation: none; }
  .lp-dots i, .lp-menu:popover-open { animation: none; }
  .lp-hero h1 span, .lp-hero h1 .lp-h1-glow, .lp-hero-sub, .lp-hero .lp-cta, .lp-micro, .lp-facts li { animation: none; }
  .lp-hero-media video { display: none !important; }
  .lp-steps.is-pre::before, .lp-steps.is-pre .lp-step-n { opacity: 1; transform: none; }
  .lp-card, .lp-card:hover, .lp-card:hover .lp-ic, .lp .lp-go:hover, .lp-go:hover .ic { transform: none; translate: none; }
  .lp-faq summary::after, .lp-sticky, .lp-ch-p i, .lp-timeline::after, .lp-tl-ic, .lp-chapters button::before, .lp-calc-bar i, .lp-card { transition: none; }
  /* own rules: a browser drops a whole list when it does not know one of the pseudo-elements in it */
  .lp-faq details::details-content { transition: none; }
  .lp-range::-webkit-slider-thumb { transition: none; }
}