/* ==========================================================================
   LANDING PAGE — fahrschulportal.com
   ==========================================================================

   The dashboard's design system (tokens and base rules come from
   /styles.css), plus the one thing the dashboard does not have: light.

   Rules for the light, so it stays light and not decoration:

     · Light is added, never a surface lifted. The canvas and every card stay
       the dashboard's black; a glow sits BEHIND a panel, blurred, and a
       hairline may fade out at its ends.
     · No gradient under running text, none on a button, none in a progress
       bar — a bar's fill is its state, and a ramp would say a second thing.
     · No colour for decoration. The page has no brand hue: the primary
       action is the ink itself (white on black), and colour appears only
       where the program uses it for a state — amber for planned, red for
       cancelled. The school's own accent is a setting of the dashboard; the
       public page wears none.

   Everything that moves is transform, opacity or filter, enters with the
   dashboard's --ease-out, and is off under prefers-reduced-motion (the global
   rule in /styles.css; the scripted parts check it themselves).

   The brand colours: the logo (portal/public/brand/, traced from the draft
   in tools/brand/) is a cool charcoal with a slate "Portal". This page takes
   its greys from there, not from the dashboard's warm ramp — the canvas stays
   black, everything drawn on it turns a few degrees cooler. They live here
   under `--ln-`, because they are the brand's and the landing page's; the
   dashboard keeps its own palette in tokens.css.

   The miniatures of the program (.ln-app, .ln-win and what is inside them)
   are copies of the real screens — layout.css, components.css and
   pages/overview.css — at the real sizes. Page-local measures carry the
   `--ln-` prefix (see app/DESIGN.md §12).
   ========================================================================== */

@font-face {
  font-family: "Syncopate";
  src: url("/fonts/Syncopate-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* ── Page-local measures ───────────────────────────────────────────────────
   The colours (neutral accent, cool slate greys) come from /brand.css, which
   the school picker shares. */
.ln {
  /* The colours are the brand's: /brand.css (.brand-theme on <body>). */

  --ln-max: 1160px;
  --ln-gut: 24px;
  --ln-header: 64px;
  --ln-light: rgb(var(--ln-tint) / 0.09);
  --ln-light-strong: rgb(var(--ln-tint) / 0.16);
  --ln-display: clamp(42px, 6.4vw, 80px);
  --ln-h2: clamp(30px, 3.8vw, 50px);
  --ln-brand-font: "Avenir Next", "SF Pro Display", var(--font-sans);
  --ln-ulifyi-font: "Syncopate", var(--font-sans);
  --ln-glide: cubic-bezier(0.32, 0.72, 0, 1);   /* = --fm-glide, --da-glide: things that travel */
}

/* clip, not hidden: the glows may reach past the edge, and clip keeps the
   sticky sections working (it does not make the root a scroll container). */
html { overflow-x: clip; scroll-behavior: smooth; }
/* The anchor offset is the header's height + 8px, written out: --ln-header
   lives on body.ln, so on <html> a var() of it resolves to nothing. */
html:has(> body.ln) { scroll-padding-top: 72px; }
@media (max-width: 1080px) { html:has(> body.ln > .ln-header.is-strip) { scroll-padding-top: 112px; } }
@media (max-width: 640px) {
  html:has(> body.ln) { scroll-padding-top: 66px; }
  html:has(> body.ln > .ln-header.is-strip) { scroll-padding-top: 106px; }
}
/* A gradient, not a flat colour — see the canvas rule in brand.css. */
body.ln { min-height: 100%; height: auto; overflow-x: clip; background: var(--canvas) linear-gradient(var(--canvas), var(--canvas)); }
.ln main { display: block; }
.ln [hidden] { display: none !important; }
.ln textarea, .ln select { font: inherit; color: inherit; }
.ln h1, .ln h2, .ln h3 { text-wrap: balance; }
.ln p { text-wrap: pretty; }

.ln-skip { position: fixed; left: 16px; top: -60px; z-index: 100; padding: 8px 12px; border-radius: var(--r-sm); background: var(--ink); color: var(--canvas); font-weight: var(--w-medium); transition: top var(--d-fast) var(--ease-out); }
.ln-skip:focus { top: 12px; }

/* ── Icons: Lucide, served by the portal, drawn as a mask ──────────────── */
.ln-i {
  display: inline-block;
  flex: 0 0 auto;
  width: var(--ln-i, 16px);
  height: var(--ln-i, 16px);
  background: currentColor;
  mask: var(--m) center / contain no-repeat;
  -webkit-mask: var(--m) center / contain no-repeat;
}
[data-i="arrow-down"] { --m: url("/app/vendor/lucide/arrow-down.svg"); }
[data-i="arrow-right"] { --m: url("/app/vendor/lucide/arrow-right.svg"); }
[data-i="arrow-up-right"] { --m: url("/app/vendor/lucide/arrow-up-right.svg"); }
[data-i="badge-check"] { --m: url("/app/vendor/lucide/badge-check.svg"); }
[data-i="bike"] { --m: url("/app/vendor/lucide/bike.svg"); }
[data-i="book-open"] { --m: url("/app/vendor/lucide/book-open.svg"); }
[data-i="building-2"] { --m: url("/app/vendor/lucide/building-2.svg"); }
[data-i="calendar-clock"] { --m: url("/app/vendor/lucide/calendar-clock.svg"); }
[data-i="calendar-days"] { --m: url("/app/vendor/lucide/calendar-days.svg"); }
[data-i="car-front"] { --m: url("/app/vendor/lucide/car-front.svg"); }
[data-i="caravan"] { --m: url("/app/vendor/lucide/caravan.svg"); }
[data-i="check"] { --m: url("/app/vendor/lucide/check.svg"); }
[data-i="chevron-down"] { --m: url("/app/vendor/lucide/chevron-down.svg"); }
[data-i="chevron-right"] { --m: url("/app/vendor/lucide/chevron-right.svg"); }
[data-i="circle-arrow-up"] { --m: url("/app/vendor/lucide/circle-arrow-up.svg"); }
[data-i="circle-check"] { --m: url("/app/vendor/lucide/circle-check.svg"); }
[data-i="clipboard-check"] { --m: url("/app/vendor/lucide/clipboard-check.svg"); }
[data-i="clock-3"] { --m: url("/app/vendor/lucide/clock-3.svg"); }
[data-i="credit-card"] { --m: url("/app/vendor/lucide/credit-card.svg"); }
[data-i="download"] { --m: url("/app/vendor/lucide/download.svg"); }
[data-i="file-signature"] { --m: url("/app/vendor/lucide/file-signature.svg"); }
[data-i="file-text"] { --m: url("/app/vendor/lucide/file-text.svg"); }
[data-i="globe"] { --m: url("/app/vendor/lucide/globe.svg"); }
[data-i="graduation-cap"] { --m: url("/app/vendor/lucide/graduation-cap.svg"); }
[data-i="inbox"] { --m: url("/app/vendor/lucide/inbox.svg"); }
[data-i="key-round"] { --m: url("/app/vendor/lucide/key-round.svg"); }
[data-i="layout-dashboard"] { --m: url("/app/vendor/lucide/layout-dashboard.svg"); }
[data-i="link"] { --m: url("/app/vendor/lucide/link.svg"); }
[data-i="list-checks"] { --m: url("/app/vendor/lucide/list-checks.svg"); }
[data-i="lock"] { --m: url("/app/vendor/lucide/lock.svg"); }
[data-i="log-in"] { --m: url("/app/vendor/lucide/log-in.svg"); }
[data-i="log-out"] { --m: url("/app/vendor/lucide/log-out.svg"); }
[data-i="mail"] { --m: url("/app/vendor/lucide/mail.svg"); }
[data-i="mail-check"] { --m: url("/app/vendor/lucide/mail-check.svg"); }
[data-i="map-pin"] { --m: url("/app/vendor/lucide/map-pin.svg"); }
[data-i="palette"] { --m: url("/app/vendor/lucide/palette.svg"); }
[data-i="phone"] { --m: url("/app/vendor/lucide/phone.svg"); }
[data-i="plus"] { --m: url("/app/vendor/lucide/plus.svg"); }
[data-i="receipt-text"] { --m: url("/app/vendor/lucide/receipt-text.svg"); }
[data-i="refresh-cw"] { --m: url("/app/vendor/lucide/refresh-cw.svg"); }
[data-i="route"] { --m: url("/app/vendor/lucide/route.svg"); }
[data-i="search"] { --m: url("/app/vendor/lucide/search.svg"); }
[data-i="send"] { --m: url("/app/vendor/lucide/send.svg"); }
[data-i="settings-2"] { --m: url("/app/vendor/lucide/settings-2.svg"); }
[data-i="shield-check"] { --m: url("/app/vendor/lucide/shield-check.svg"); }
[data-i="signature"] { --m: url("/app/vendor/lucide/signature.svg"); }
[data-i="smartphone"] { --m: url("/app/vendor/lucide/smartphone.svg"); }
[data-i="sparkles"] { --m: url("/app/vendor/lucide/sparkles.svg"); }
[data-i="star"] { --m: url("/app/vendor/lucide/star.svg"); }
[data-i="tag"] { --m: url("/app/vendor/lucide/tag.svg"); }
[data-i="triangle-alert"] { --m: url("/app/vendor/lucide/triangle-alert.svg"); }
[data-i="users-round"] { --m: url("/app/vendor/lucide/users-round.svg"); }
[data-i="wallet-cards"] { --m: url("/app/vendor/lucide/wallet-cards.svg"); }
[data-i="euro"] { --m: url("/app/vendor/lucide/euro.svg"); }
[data-i="bell"] { --m: url("/app/vendor/lucide/bell.svg"); }
[data-i="cake"] { --m: url("/app/vendor/lucide/cake.svg"); }
[data-i="circle-arrow-down"] { --m: url("/app/vendor/lucide/circle-arrow-down.svg"); }

/* ── Type ─────────────────────────────────────────────────────────────── */
.ln-display {
  max-width: 16ch;
  font-size: var(--ln-display);
  font-weight: var(--w-semi);
  line-height: 1.02;
  letter-spacing: -0.052em;
}
.ln-h2 {
  font-size: var(--ln-h2);
  font-weight: var(--w-semi);
  line-height: 1.07;
  letter-spacing: -0.042em;
}
.ln-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  color: var(--ln-slate);
  font-size: var(--t-md);
  font-weight: var(--w-medium);
}
.ln-lead {
  max-width: 58ch;
  margin-top: 26px;
  color: var(--ink-muted);
  font-size: 18px;
  line-height: 1.6;
}
.ln-inline-link { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-size: var(--t-md); font-weight: var(--w-medium); }
.ln-inline-link .ln-i { transition: transform var(--d-base) var(--ease-out); }
.mono { font-family: var(--font-mono); }

/* ── Buttons (the dashboard's .btn, one size up for a page you read) ─── */
.ln-btn-xl { height: 46px; padding: 0 20px; border-radius: var(--r-md); font-size: 15px; gap: 10px; }
.ln .btn-primary { background: var(--accent); color: var(--accent-ink); }
.ln .btn-secondary { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.ln .btn .ln-i { transition: transform var(--d-base) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .ln .btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
  .ln .btn-secondary:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--grey-500); }
  .ln .btn:hover .ln-i[data-i="arrow-right"], .ln-inline-link:hover .ln-i[data-i="arrow-right"] { transform: translateX(3px); }
  .ln .btn:hover .ln-i[data-i="arrow-down"], .ln-inline-link:hover .ln-i[data-i="arrow-down"] { transform: translateY(2px); }
  .ln-inline-link:hover .ln-i[data-i="arrow-up-right"] { transform: translate(2px, -2px); }
}

/* ── Header ───────────────────────────────────────────────────────────── */
.ln-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--canvas);
  border-bottom: 1px solid transparent;
  transition: border-color var(--d-slow) ease;
}
.ln-header.is-scrolled { border-bottom-color: var(--line); }
.ln-header-in {
  display: flex;
  align-items: center;
  gap: 28px;
  width: min(100% - var(--ln-gut) * 2, var(--ln-max));
  height: var(--ln-header);
  margin: 0 auto;
}
.ln-brand { display: flex; align-items: center; height: 100%; }
.ln-brand img { display: block; width: auto; height: 28px; transition: opacity var(--d-fast) ease; }
.ln-nav { display: flex; gap: 2px; }
.ln-nav a { padding: 8px 11px; border-radius: var(--r-sm); color: var(--ink-muted); font-size: var(--t-md); transition: color var(--d-fast) ease, background var(--d-fast) ease; }
.ln-nav a[aria-current] { color: var(--ink); }
.ln-header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ln-link-quiet { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: var(--r-sm); color: var(--ink-muted); font-size: var(--t-md); font-weight: var(--w-medium); transition: color var(--d-fast) ease, background var(--d-fast) ease; }
.ln-header-cta { height: 34px; padding: 0 14px; font-size: var(--t-md); }
.ln-header-bar { position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; background: var(--ink-muted); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; opacity: .7; }
@media (hover: hover) and (pointer: fine) {
  .ln-nav a:hover, .ln-link-quiet:hover { color: var(--ink); background: var(--surface-hover); }
  .ln-brand:hover img { opacity: .85; }
}
/* On touch the header actions keep their look (32–34 px) but take a 44 px
   hit area, inside the 58/64 px row (-7 px: the inset counts from inside the
   1 px border); the -4 px sides just meet across the 8 px gap. */
@media (pointer: coarse) {
  .ln-header-actions > a { position: relative; }
  .ln-header-actions > a::after { content: ""; position: absolute; inset: -7px -4px; }
}

/* ── The account, for whoever is signed in (public/js/account.js) ────────
   Takes the place of "Anmelden" once /me has answered: initials and first
   name, and a card under it with who, which school, the way in and
   "Abmelden". It arrives a moment after the page, so it fades in rather
   than jumping into the row. */
/* Opacity only, and not held after it ends: a transform on .ln-account
   would make it the box the phone's position: fixed card is laid out in. */
.ln-account { position: relative; animation: ln-account-in var(--d-slow) var(--ease-out) backwards; }
@keyframes ln-account-in { from { opacity: 0; } }
.ln-account-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px 0 4px;
  border: 1px solid transparent; border-radius: 999px; background: none;
  color: var(--ink-muted); font: inherit; font-size: var(--t-md); font-weight: var(--w-medium); cursor: pointer;
  transition: color var(--d-fast) ease, background var(--d-fast) ease, border-color var(--d-fast) ease;
}
.ln-account.is-open .ln-account-btn { color: var(--ink); background: var(--surface-hover); border-color: var(--line); }
.ln-account-btn:focus-visible { outline: 2px solid var(--ink-muted); outline-offset: 2px; }
.ln-account-caret { --ln-i: 14px; transition: transform var(--d-fast) var(--ease-out); }
.ln-account.is-open .ln-account-caret { transform: rotate(180deg); }
.ln-avatar {
  display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink); font-size: var(--t-xs); font-weight: var(--w-medium); letter-spacing: .02em; line-height: 1;
}
.ln-avatar.is-lg { width: 38px; height: 38px; font-size: var(--t-base); }

.ln-account-card {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; width: 288px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-dialog);
  transform-origin: calc(100% - 24px) 0; animation: ln-account-pop var(--d-fast) var(--ease-out);
}
@keyframes ln-account-pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.ln-account-card[hidden] { display: none; }
.ln-account-who { display: flex; align-items: center; gap: 12px; padding: 10px 10px 12px; }
.ln-account-id { display: grid; min-width: 0; gap: 2px; }
.ln-account-id strong { overflow: hidden; color: var(--ink); font-size: var(--t-md); font-weight: var(--w-medium); text-overflow: ellipsis; white-space: nowrap; }
.ln-account-id span { overflow: hidden; color: var(--ink-faint); font-size: var(--t-sm); text-overflow: ellipsis; white-space: nowrap; }
.ln-account-school {
  display: flex; align-items: center; gap: 8px; margin: 0 4px 6px; padding: 9px 10px;
  border-radius: var(--r-md); background: var(--surface-raised); color: var(--ink-muted); font-size: var(--t-base);
}
.ln-account-school span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ln-account-school em { flex: none; color: var(--ink-faint); font-size: var(--t-sm); font-style: normal; }
.ln-account-links { display: grid; gap: 2px; padding-top: 6px; border-top: 1px solid var(--line-soft); }
.ln-account-links a {
  display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: var(--r-sm);
  color: var(--ink-muted); font-size: var(--t-md); transition: color var(--d-fast) ease, background var(--d-fast) ease;
}
.ln-account-links a span { flex: 1; }
.ln-account-links a:first-child { color: var(--ink); font-weight: var(--w-medium); }
.ln-account-go { opacity: .6; transition: transform var(--d-fast) var(--ease-out), opacity var(--d-fast) ease; }
.ln-account-links a:focus-visible { outline: 2px solid var(--ink-muted); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) {
  .ln-account-btn:hover { color: var(--ink); background: var(--surface-hover); }
  .ln-account-links a:hover { color: var(--ink); background: var(--surface-hover); }
  .ln-account-links a:hover .ln-account-go { opacity: 1; transform: translateX(3px); }
}
@media (pointer: coarse) {
  .ln-account-btn { position: relative; }
  .ln-account-btn::after { content: ""; position: absolute; inset: -7px -4px; }
  .ln-account-links a { height: 44px; }
}
/* A phone: the initials alone, and the card as wide as the screen allows. */
@media (max-width: 640px) {
  .ln-account-name, .ln-account-caret { display: none; }
  .ln-account-btn { padding: 0 4px; }
  .ln-account-card { position: fixed; left: var(--ln-gut); right: var(--ln-gut); top: calc(var(--ln-header) + 6px); width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .ln-account, .ln-account-card { animation: none; }
}

/* ── Sections ─────────────────────────────────────────────────────────── */
.ln-section { width: min(100% - var(--ln-gut) * 2, var(--ln-max)); margin: 0 auto; padding: 140px 0 0; }
.ln-section-head { max-width: 760px; margin: 0 auto; text-align: center; }
.ln-section-head > p:not(.ln-kicker) { max-width: 60ch; margin: 20px auto 0; color: var(--ink-muted); font-size: 17px; line-height: 1.6; }
.ln-section-head.is-left { margin: 0; text-align: left; }
.ln-section-head.is-left > p:not(.ln-kicker) { margin-left: 0; }

/* ── Entrances ────────────────────────────────────────────────────────── */
.js .ln-enter { animation: ln-enter 900ms var(--ease-out) both; animation-delay: calc(var(--ln-d, 0) * 80ms + 60ms); }
@keyframes ln-enter { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } }

.js [data-split] .ln-word { display: inline-block; animation: ln-word 900ms var(--ease-out) both; animation-delay: calc(var(--i) * 55ms + 120ms); }
@keyframes ln-word { from { opacity: 0; transform: translateY(0.35em); filter: blur(10px); } }

.js .ln-reveal { opacity: 0; transform: translateY(26px); filter: blur(5px); transition: opacity 800ms var(--ease-out), transform 1000ms var(--ease-out), filter 800ms var(--ease-out); transition-delay: calc(var(--ln-d, 0) * 80ms); }
.js .ln-reveal.is-in { opacity: 1; transform: none; filter: none; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.ln-hero { position: relative; padding: 84px 0 0; }
.ln-hero::before { /* a faint grid, fading out: the product's own ruled paper */
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 760px;
  background-image:
    linear-gradient(to right, var(--line-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(60% 55% at 50% 30%, #000 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(60% 55% at 50% 30%, #000 20%, transparent 100%);
  pointer-events: none;
}
.ln-hero-copy { position: relative; display: flex; flex-direction: column; align-items: center; width: min(100% - var(--ln-gut) * 2, 900px); margin: 0 auto; text-align: center; }
.ln-eyebrow { display: inline-flex; align-items: center; gap: 10px; height: 34px; margin-bottom: 28px; padding: 0 12px 0 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--ink-muted); font-size: var(--t-base); transition: border-color var(--d-fast) ease, color var(--d-fast) ease; }
.ln-eyebrow .ln-i { --ln-i: 14px; color: var(--ink-faint); transition: transform var(--d-base) var(--ease-out); }
.ln-dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.ln-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--ink-faint); animation: ln-ping 2.4s var(--ease-out) infinite; }
@keyframes ln-ping { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
@media (hover: hover) and (pointer: fine) {
  .ln-eyebrow:hover { border-color: var(--line-strong); color: var(--ink); }
  .ln-eyebrow:hover .ln-i { transform: translateX(3px); }
}
.ln-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }
.ln-cta-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 22px; color: var(--ink-faint); font-size: var(--t-base); }
.ln-cta-note .ln-i { --ln-i: 14px; }
/* On a phone the note wraps: no separator left hanging at a line end, the gap does their job. */
@media (max-width: 640px) { .ln-cta-note { row-gap: 10px; } .ln-cta-note > span[aria-hidden] { display: none; } .ln-cta-note > a { margin-inline: 4px; } }

.ln-hero-stage { position: relative; width: min(100% - var(--ln-gut) * 2, 1200px); margin: 72px auto 0; perspective: 2000px; }
.ln-hero-glow {
  position: absolute;
  left: 8%;
  right: 8%;
  top: -40px;
  height: 58%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--ln-light-strong), transparent);
  filter: blur(60px);
  pointer-events: none;
}
.ln-hero-stage .ln-scale {
  transform: rotateX(var(--ln-tilt, 0deg)) scale(var(--ln-tilt-s, 1));
  transform-origin: 50% 0;
  will-change: transform;
}
.ln-hero-stage::after { /* the bottom of the app runs out into the page */
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: -2px;
  height: 9%;
  background: linear-gradient(to bottom, transparent, var(--canvas) 95%);
  pointer-events: none;
}

/* A fixed-size miniature, scaled to its container by js/landing.js. */
.ln-scale { position: relative; height: calc(var(--ln-h, 700) * 1px); }
.ln-scale > * { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform: scale(var(--k, 1)); }

/* ── The program, in miniature: the app shell (layout.css) ────────────── */
.ln-app {
  width: 1200px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--canvas);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.6), 0 50px 120px -30px rgb(0 0 0 / 0.9);
  color: var(--ink);
  font-size: var(--t-base);
  text-align: left;
  user-select: none;
}
.ln-app::before { /* the lit top edge */
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--grey-300), transparent);
  opacity: .5;
  z-index: 2;
}
.ln-app.is-compact { width: 600px; }
.ln-app-top { display: flex; align-items: center; height: var(--topbar-h); border-bottom: 1px solid var(--line); }
.ln-app-school { display: flex; align-items: center; gap: var(--s-3); width: var(--sidebar-w); height: 100%; padding: 0 var(--s-4); border-right: 1px solid var(--line); }
.ln-app-school-name b, .ln-app-school-name small, .ln-app-me b, .ln-app-me small { display: block; line-height: 1.25; }
.ln-app-school-name b { font-size: var(--t-base); font-weight: var(--w-semi); }
.ln-app-school-name small, .ln-app-me small { color: var(--ink-muted); font-size: var(--t-xs); }
.ln-app-crumbs { flex: 1; padding: 0 var(--s-5); font-weight: var(--w-medium); }
.ln-app-search { display: flex; align-items: center; gap: var(--s-2); width: 320px; height: var(--control-h); margin-right: var(--s-4); padding: 0 6px 0 var(--s-3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink-faint); }
.ln-app-search .ln-i { --ln-i: 15px; }
.ln-app-search kbd { margin-left: auto; padding: 0 5px; border: 1px solid var(--line-strong); border-radius: var(--r-xs); font-family: var(--font-mono); font-size: var(--t-xs); }
.ln-app-body { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 690px; }
.ln-app-side { display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; border-right: 1px solid var(--line); }
.ln-app-side > span { position: relative; display: flex; align-items: center; gap: var(--s-3); height: 40px; padding: 0 var(--s-3); border-radius: var(--r-sm); color: var(--ink-muted); font-size: var(--t-md); }
.ln-app-side > span .ln-i { --ln-i: 18px; color: var(--ink-faint); }
.ln-app-side > span.is-on { background: var(--surface-raised); color: var(--ink); }
.ln-app-side > span.is-on .ln-i { color: var(--ink); }
.ln-app-side hr { height: 1px; margin: 12px; border: 0; background: var(--line); }
.ln-app-count {
  margin-left: auto;
  min-width: 22px;
  padding: 0 6px;
  border: 1px solid var(--wait-line);
  border-radius: var(--r-xs);
  background: var(--wait-quiet);
  color: var(--wait-text);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-style: normal;
  line-height: 1.6;
  text-align: center;
}
.ln-app-count.is-bump { animation: ln-bump 700ms var(--ease-out); }
@keyframes ln-bump { 30% { transform: scale(1.35); } }
.ln-app-me { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 14px 6px 4px; border-top: 1px solid var(--line); }
.ln-app-me b { font-size: var(--t-base); font-weight: var(--w-medium); }
.ln-app-main { min-width: 0; }
.ln-app-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px var(--s-5); border-bottom: 1px solid var(--line); background: var(--surface-head); }
.ln-app-head h3 { font-size: 18px; font-weight: var(--w-semi); }
.ln-app-head p { margin-top: 2px; color: var(--ink-muted); font-size: var(--t-sm); }
.ln-app-actions { display: flex; align-items: center; gap: var(--s-2); }
.ln-app-content { display: grid; gap: var(--s-4); padding: var(--s-5); }

.ln-mark { display: inline-grid; flex: 0 0 auto; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-sunken); color: var(--ink-muted); font-size: var(--t-sm); font-weight: var(--w-semi); }
.ln-mark.is-round { border-radius: 50%; }
.ln-mark.is-lg { width: 44px; height: 44px; font-size: var(--t-md); }
.ln-mark.is-ulifyi { background: var(--grey-990); border-color: var(--line-strong); color: var(--ink); font-family: var(--ln-ulifyi-font); font-size: 13px; font-weight: 400; }

/* The dashboard's buttons, as pictures (components.css .btn). */
.ln-mbtn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); height: var(--control-h); padding: 0 var(--s-3); border: 1px solid var(--line-control); border-radius: var(--r-sm); background: var(--surface-raised); color: var(--ink); font-size: var(--t-base); font-weight: var(--w-medium); white-space: nowrap; transition: transform var(--d-press) var(--ease-out), background var(--d-fast) ease, opacity var(--d-base) ease; }
.ln-mbtn .ln-i { --ln-i: 15px; margin-left: -2px; }
.ln-mbtn.is-primary { border-color: transparent; background: var(--accent); color: var(--accent-ink); }
.ln-mbtn.is-sm { height: 26px; padding: 0 10px; font-size: var(--t-sm); gap: var(--s-1); }
.ln-mbtn.is-block { width: 100%; }
.ln-mbtn.is-pressed { transform: scale(.95); }
.ln-mbtn.is-gone { opacity: 0; transform: scale(.95); }
.ln-msep { width: 1px; height: 20px; margin: 0 4px; background: var(--line-strong); }

.ln-card { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.ln-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 0 var(--s-4); border-bottom: 1px solid var(--line); }
.ln-card-head b { display: flex; align-items: center; gap: var(--s-2); font-weight: var(--w-semi); }
.ln-card-head b .ln-i { --ln-i: 15px; color: var(--ink-faint); }
.ln-card-head > span { color: var(--ink-muted); font-size: var(--t-sm); }
.ln-card-tabs { display: flex; align-items: stretch; gap: 22px; height: 44px; padding: 0 var(--s-4); border-bottom: 1px solid var(--line); }
.ln-card-tabs > * { display: flex; align-items: center; gap: 6px; }
.ln-card-tabs b { font-weight: var(--w-semi); }
.ln-card-tabs span { color: var(--ink-muted); }
.ln-card-tabs span.is-on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.ln-card-tabs em { padding: 0 5px; border-radius: var(--r-xs); background: var(--surface-active); font-family: var(--font-mono); font-size: var(--t-xs); font-style: normal; }

.ln-app-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ln-app-metrics > div { padding: 20px 24px; border-right: 1px solid var(--line); }
.ln-app-metrics > div:last-child { border-right: 0; }
.ln-app-metrics span, .ln-app-metrics small { display: block; color: var(--ink-muted); font-size: var(--t-sm); }
.ln-app-metrics b { display: block; margin: 4px 0 6px; font-size: 24px; font-weight: var(--w-semi); letter-spacing: -0.025em; transition: color var(--d-slow) ease; }
.ln-app-metrics b.is-stop { color: var(--stop-text); }
.ln-app-metrics b.is-flash { animation: ln-flash 1200ms var(--ease-out); }
@keyframes ln-flash { 20% { text-shadow: 0 0 22px rgb(var(--ln-tint) / 0.55); } }

.ln-app-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.ln-app-blinki-body { padding: var(--s-4) var(--s-5) var(--s-3); }

/* Blinki — copy of ui/blinki.js and pages/overview.css. On this page the
   body is the ink: Blinki takes the accent, and this page has none. */
.ln-blinki { display: inline-grid; flex: 0 0 auto; place-items: center; width: 40px; height: 40px; }
.ln-blinki svg { width: 100%; height: 100%; overflow: visible; }
.ln-blinki .blinki-body { fill: var(--accent); }
.ln-blinki .blinki-eye { fill: var(--accent-ink); transform-box: fill-box; transform-origin: center; animation: blinki-blink 5.8s ease-in-out infinite; }
.ln-blinki .blinki-eye-right { animation-delay: 30ms; }
.ln-blinki .blinki-gaze { transform-box: view-box; transform-origin: center; transform: translate(var(--bx, 0), var(--by, 0)); transition: transform var(--d-fast) var(--ease-out); }
.ln-blinki.is-xl { width: 64px; height: 64px; margin-bottom: 26px; }
@keyframes blinki-blink { 0%, 87%, 100% { transform: scaleY(1); } 90%, 93% { transform: scaleY(0.12); } 96% { transform: scaleY(1); } }
.ln-blinki-line { display: flex; align-items: center; gap: 14px; }
.ln-blinki-line p { font-size: 16px; font-weight: var(--w-medium); line-height: 1.4; }
.ln-blinki-line.is-lg p { font-size: 17px; }

/* Hints (overview.css .bk-hint): the tone in a square, the title, the link. */
.ln-hints { margin-top: 12px; list-style: none; }
.ln-hints li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.ln-hints li:last-child { border-bottom: 0; }
.ln-hints li > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ln-hints a { display: inline-flex; align-items: center; gap: 2px; color: var(--ink); font-size: var(--t-sm); font-weight: var(--w-medium); }
.ln-hints a .ln-i { --ln-i: 13px; color: var(--ink-faint); }
.ln-hint-ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-sm); background: var(--idle-quiet); color: var(--ink-muted); }
.ln-hint-ico .ln-i { --ln-i: 14px; }
.is-stop > .ln-hint-ico, .ln-hint-ico.is-stop { background: var(--stop-quiet); color: var(--stop-text); }
.is-wait > .ln-hint-ico, .ln-hint-ico.is-wait { background: var(--wait-quiet); color: var(--wait-text); }
.ln-hints li.is-new { animation: ln-row-in 700ms var(--ease-out) both; }
@keyframes ln-row-in { from { opacity: 0; transform: translateY(-8px); filter: blur(4px); } }

/* Badges (components.css .badge). */
.ln-badge { display: inline-flex; align-items: center; gap: var(--s-1); padding: 1px 7px; border: 1px solid var(--idle-line); border-radius: var(--r-xs); background: var(--idle-quiet); color: var(--idle-text); font-size: var(--t-xs); font-style: normal; font-weight: var(--w-medium); line-height: 1.6; white-space: nowrap; transition: background var(--d-slow) ease, border-color var(--d-slow) ease, color var(--d-slow) ease; }
.ln-badge.is-go { border-color: var(--go-line); background: var(--go-quiet); color: var(--go-text); }
.ln-badge.is-wait { border-color: var(--wait-line); background: var(--wait-quiet); color: var(--wait-text); }
.ln-badge.is-stop { border-color: var(--stop-line); background: var(--stop-quiet); color: var(--stop-text); }
.ln-badge.is-accent { border-color: var(--accent-line); background: var(--accent-quiet); color: var(--accent-text); }
.ln-badge.is-class { border-color: var(--line-strong); background: transparent; color: var(--ink); font-family: var(--font-mono); letter-spacing: 0.02em; }
.ln-badge.is-go::before { content: ""; width: 10px; height: 10px; margin-left: -2px; background: currentColor; mask: url("/app/vendor/lucide/check.svg") center / contain no-repeat; -webkit-mask: url("/app/vendor/lucide/check.svg") center / contain no-repeat; }
.ln-badge.is-pop { animation: ln-pop 520ms var(--ease-out); }
@keyframes ln-pop { 0% { transform: scale(.9); } 45% { transform: scale(1.12); } }

/* Today's lessons (overview.css todayCard). */
.ln-lessons { list-style: none; }
.ln-lessons li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; align-items: center; gap: var(--s-3); min-height: 54px; padding: 8px var(--s-4); border-bottom: 1px solid var(--line-soft); }
.ln-lessons li:last-child { border-bottom: 0; }
.ln-lessons time { color: var(--ink-muted); font-family: var(--font-mono); font-size: var(--t-sm); }
.ln-lessons b, .ln-lessons small { display: block; }
.ln-lessons b { font-weight: var(--w-medium); }
.ln-lessons small { overflow: hidden; color: var(--ink-muted); font-size: var(--t-sm); text-overflow: ellipsis; white-space: nowrap; }
.ln-lessons li.is-cancelled b { color: var(--ink-muted); text-decoration: line-through; }
.ln-lessons li[data-lesson-live] { transition: background var(--d-slow) ease; }
.ln-lessons li[data-lesson-live].is-hot { background: var(--surface-hover); }

/* Toast (components.css .toast), stacked in the corner of the app. */
.ln-toasts { position: absolute; left: var(--sidebar-w); right: 0; bottom: 26px; z-index: 3; display: grid; justify-items: center; }
.ln-toasts > * { grid-area: 1 / 1; }
.ln-app.is-compact .ln-toasts { left: 0; bottom: 16px; }
.ln-toast { display: flex; align-items: center; gap: var(--s-2); max-width: 420px; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface-raised); box-shadow: var(--shadow-pop); font-size: var(--t-base); opacity: 0; transform: translateY(10px) scale(.98); transition: opacity 320ms var(--ease-out), transform 420ms var(--ease-out); }
.ln-toast.is-in { opacity: 1; transform: none; }
.ln-toast .ln-i { --ln-i: 16px; color: var(--ink); }
.ln-toast.is-wait .ln-i { color: var(--wait-text); }
.ln-toast small { color: var(--ink-muted); }

/* The pointer that clicks through the demo. */
.ln-cursor { position: absolute; left: 0; top: 0; z-index: 4; width: 22px; height: 22px; opacity: 0; transform: translate(var(--cx, 900px), var(--cy, 400px)); transition: transform 1100ms var(--ease-in-out), opacity 300ms ease; pointer-events: none; }
.ln-cursor svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 2px 4px rgb(0 0 0 / 0.6)); }
.ln-cursor path { fill: var(--grey-100); stroke: var(--grey-990); stroke-width: 1.4; stroke-linejoin: round; }
.ln-cursor.is-on { opacity: 1; }
.ln-cursor.is-click svg { animation: ln-click 360ms var(--ease-out); }
@keyframes ln-click { 40% { transform: scale(.82); } }

.ln-app.is-compact .ln-app-side, .ln-app.is-compact .ln-app-crumbs, .ln-app.is-compact .ln-app-search, .ln-app.is-compact .ln-hide-compact { display: none; }
.ln-app.is-compact .ln-app-body { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-bottom: 64px; }
.ln-app.is-compact .ln-app-school { width: auto; flex: 1; border-right: 0; }
.ln-app.is-compact .ln-app-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ln-app.is-compact .ln-app-metrics > div { padding: 16px; }
.ln-app.is-compact .ln-app-metrics > div:nth-child(3) { border-right: 0; }
.ln-app.is-compact .ln-app-metrics b { font-size: 20px; }
.ln-app.is-compact .ln-app-metrics small { display: none; }
.ln-app.is-compact .ln-app-grid { grid-template-columns: minmax(0, 1fr); }
.ln-app.is-compact .ln-app-actions .ln-mbtn:first-child, .ln-app.is-compact .ln-msep { display: none; }
.ln-app.is-compact .ln-app-content { padding: 16px; }

/* ── Marquee ──────────────────────────────────────────────────────────── */
.ln-marquee { position: relative; padding: 40px 0 0; }
.ln-marquee-title { margin-bottom: 26px; color: var(--ink-faint); font-size: var(--t-md); text-align: center; }
.ln-marquee-row { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.ln-marquee-row + .ln-marquee-row { margin-top: 10px; }
.ln-marquee-track { display: flex; gap: 10px; width: max-content; animation: ln-marquee 60s linear infinite; }
.ln-marquee-row.is-reverse .ln-marquee-track { animation-direction: reverse; animation-duration: 70s; }
.ln-marquee-track > span { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--ink-muted); font-size: var(--t-md); white-space: nowrap; }
.ln-marquee-track .ln-i { color: var(--ink-faint); }
@keyframes ln-marquee { to { transform: translateX(-50%); } }
@media (hover: hover) and (pointer: fine) { .ln-marquee-row:hover .ln-marquee-track { animation-play-state: paused; } }
.ln-marquee-track small { margin-left: -2px; color: var(--ink-faint); font-size: var(--t-sm); }   /* a quiet second word, e.g. "iPhone & Android" */
/* WCAG 2.2.2: the rows can be stopped, by keyboard and touch too (the step players' button). */
.ln-marquee .ln-marquee-ctl { display: flex; width: max-content; margin: -12px auto 18px; }
.ln-marquee.is-held .ln-marquee-track { animation-play-state: paused; }

/* ── Statement: the words light up as you scroll ─────────────────────── */
.ln-statement { position: relative; height: 160vh; margin-top: -8vh; }
.ln-statement-sticky { position: sticky; top: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; padding: 0 var(--ln-gut); text-align: center; }
.ln-statement-text { max-width: 940px; font-size: clamp(28px, 4.5vw, 56px); font-weight: var(--w-semi); line-height: 1.16; letter-spacing: -0.04em; }
.ln .ln-statement-text { text-wrap: balance; }   /* centred display type: even lines, never one word alone (outranks `.ln p`) */
.js .ln-statement-text .ln-w { color: var(--grey-700); transition: color 380ms ease, text-shadow 600ms ease; }
.js .ln-statement-text .ln-w.is-on { color: var(--ink); }

/* ── Feature tour (sticky) ────────────────────────────────────────────── */
.ln-tour { position: relative; height: calc(var(--ln-count) * var(--ln-step, 90vh) + 100vh); }
.ln-tour-sticky {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 64px;
  align-items: center;
  width: min(100% - var(--ln-gut) * 2, var(--ln-max));
  height: 100vh;
  margin: 0 auto;
  padding: calc(var(--ln-header) + 24px) 0 32px;
}
.ln-tour-copy .ln-h2 { font-size: clamp(28px, 3vw, 40px); }
.ln-chapters { margin-top: 30px; border-top: 1px solid var(--line); list-style: none; }
.ln-chapter { position: relative; border-bottom: 1px solid var(--line); }
.ln-chapter-tab { display: flex; align-items: center; gap: 12px; width: 100%; padding: 15px 0; color: var(--ink-faint); font-size: 16px; font-weight: var(--w-medium); text-align: left; transition: color var(--d-slow) ease; }
.ln-chapter-tab .ln-i { --ln-i: 17px; }
.ln-chapter.is-active .ln-chapter-tab { color: var(--ink); }
.ln-chapter-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; overflow: hidden; }
.ln-chapter-bar i { display: block; height: 100%; background: var(--ink); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
.ln-chapter-body { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 520ms var(--ease-out), opacity 420ms ease; }
.ln-chapter-body > div { overflow: hidden; }
.ln-chapter.is-active .ln-chapter-body { grid-template-rows: 1fr; opacity: 1; }
.ln-chapter-body h3 { font-size: 20px; letter-spacing: -0.02em; }
.ln-chapter-body p { margin-top: 8px; color: var(--ink-muted); font-size: 15px; line-height: 1.6; }
.ln-chapter-body .ln-points { padding-bottom: 20px; }
.ln-chapter-slot { display: none; }
@media (hover: hover) and (pointer: fine) { .ln-chapter-tab:hover { color: var(--ink); } }

.ln-points { display: grid; gap: 9px; margin-top: 16px; list-style: none; }
.ln-points li { display: flex; align-items: flex-start; gap: 10px; color: var(--ink-muted); font-size: var(--t-md); text-wrap: pretty; }
.ln-points li::before { content: ""; flex: 0 0 15px; width: 15px; height: 15px; margin-top: 3px; background: var(--ink); mask: url("/app/vendor/lucide/check.svg") center / contain no-repeat; -webkit-mask: url("/app/vendor/lucide/check.svg") center / contain no-repeat; }

.ln-tour-stage { position: relative; height: min(600px, calc(100vh - var(--ln-header) - 80px)); }
.ln-stage-glow { position: absolute; inset: 12% 6%; border-radius: 50%; background: radial-gradient(closest-side, var(--ln-light), transparent); filter: blur(50px); pointer-events: none; }
.ln-screen { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(18px) scale(.985); filter: blur(8px); transition: opacity 520ms var(--ease-out), transform 700ms var(--ease-out), filter 520ms var(--ease-out); pointer-events: none; }
.ln-screen.is-active { opacity: 1; transform: none; filter: none; }

/* A window of the program: page bar, then the page. */
.ln-win { position: relative; width: 100%; max-width: 640px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--surface); box-shadow: 0 40px 100px -40px rgb(0 0 0 / 0.95); font-size: var(--t-base); }
.ln-win::before { content: ""; position: absolute; left: 12%; right: 12%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--grey-300), transparent); opacity: .45; }
.ln-win-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; padding: 0 var(--s-4); border-bottom: 1px solid var(--line); background: var(--surface-head); font-weight: var(--w-medium); }
.ln-win-bar > span { display: inline-flex; align-items: center; gap: 6px; }
.ln-win-bar .ln-i { --ln-i: 13px; color: var(--ink-faint); }
.ln-win-meta { color: var(--ink-faint); font-size: var(--t-sm); font-weight: var(--w-normal); }
.ln-win-body { padding: var(--s-5); }
.ln-win-body.is-flush { padding: 0; }

/* Staggered rows inside the active screen. */
.ln-screen [data-stagger] > * { opacity: 0; transform: translateY(8px); transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms + 160ms); }
.ln-screen.is-active [data-stagger] > *, .ln-guide-slot [data-stagger] > *, .ln-chapter-slot [data-stagger] > * { opacity: 1; transform: none; }

/* 1 · Start */
.ln-hints.is-steps { margin-top: 16px; }
.ln-ask { margin-top: 18px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-raised); }
.ln-ask b { font-weight: var(--w-semi); }
.ln-ask-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ln-ask-chips span { padding: 5px 10px; border: 1px solid var(--line-control); border-radius: var(--r-sm); color: var(--ink-muted); font-size: var(--t-sm); transition: border-color var(--d-slow) ease, color var(--d-slow) ease, background var(--d-slow) ease; }
.ln-ask-chips span.is-on { border-color: var(--grey-500); background: var(--surface-active); color: var(--ink); }
.ln-ask-answer { min-height: 42px; margin-top: 12px; color: var(--ink); line-height: 1.5; }
.ln-ask-answer.is-typing::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -0.15em; background: var(--ink); animation: ln-caret 900ms steps(1) infinite; }
@keyframes ln-caret { 50% { opacity: 0; } }

/* 2 · Akte */
.ln-person { display: flex; align-items: center; gap: 14px; }
.ln-person > div { flex: 1; min-width: 0; }
.ln-person b { display: block; font-size: 17px; font-weight: var(--w-semi); }
.ln-person > div > span { display: flex; gap: 6px; margin-top: 5px; }
.ln-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; border: 1px solid var(--line); border-radius: var(--r-md); }
.ln-facts > div { padding: 12px 14px; border-right: 1px solid var(--line); }
.ln-facts > div:last-child { border-right: 0; }
.ln-facts span { display: block; color: var(--ink-muted); font-size: var(--t-sm); }
.ln-facts b { display: block; margin-top: 4px; font-weight: var(--w-medium); }
.ln-facts b.is-stop, .ln-saldo b.is-stop { color: var(--stop-text); }
.ln-sub { margin: 20px 0 10px; font-weight: var(--w-semi); }
.ln-progs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
.ln-prog { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.ln-prog span { color: var(--ink); }
.ln-prog b { font-weight: var(--w-medium); }
.ln-prog i { grid-column: 1 / -1; display: block; height: 4px; overflow: hidden; border-radius: 2px; background: var(--surface-sunken); }
.ln-prog em { display: block; height: 100%; border-radius: inherit; background: var(--meter); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; transition: transform 1100ms var(--ease-out), background var(--d-slow) ease; }
.ln-prog.is-wait em { background: var(--wait); }
.ln-prog.is-done em { background: var(--go); }
.ln-exams { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.ln-exams > div { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); }

/* 3 · Termine (appointments-calendar.css) */
.ln-seg { display: inline-flex; padding: 2px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-sunken); font-size: var(--t-sm); font-weight: var(--w-normal); }
.ln-seg span { padding: 3px 10px; border-radius: var(--r-xs); color: var(--ink-muted); }
.ln-seg .is-on { background: var(--surface-raised); box-shadow: 0 0 0 1px var(--line-strong); color: var(--ink); }
.ln-week-head, .ln-week-grid { display: grid; grid-template-columns: 52px repeat(5, minmax(0, 1fr)); }
.ln-week-head span { padding: 10px 10px 8px; border-left: 1px solid var(--line-soft); color: var(--ink-muted); font-size: var(--t-sm); font-weight: var(--w-medium); }
.ln-week-head span:first-child { border-left: 0; }
.ln-week-head .is-today { color: var(--ink); }
.ln-week-grid { position: relative; grid-template-rows: repeat(7, 46px); border-top: 1px solid var(--line); background-image: linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px); background-size: 100% 46px; }
.ln-week-times { grid-column: 1; grid-row: 1 / -1; display: grid; grid-template-rows: repeat(5, 1fr); padding: 4px 8px; color: var(--ink-faint); font-family: var(--font-mono); font-size: var(--t-xs); }
.ln-week-grid::before { content: ""; position: absolute; inset: 0 0 0 52px; background-image: linear-gradient(to right, var(--line-soft) 1px, transparent 1px); background-size: 20% 100%; pointer-events: none; }
.ln-ev {
  position: absolute;
  left: calc(52px + (100% - 52px) / 5 * (var(--c) - 1) + 4px);
  top: calc(var(--r) * 46px - 34px);
  width: calc((100% - 52px) / 5 - 8px);
  height: calc(var(--h) * 46px - 4px);
  overflow: hidden;
  padding: 5px 8px;
  border: 1px solid var(--idle-line);
  border-radius: var(--r-sm);
  background: var(--surface-raised);
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  line-height: 1.3;
  white-space: nowrap;      /* one line per row: a long name ends in "…" instead of pushing the type under the edge */
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(6px) scale(.97);
  transition: opacity 380ms var(--ease-out), transform 480ms var(--ease-out), background var(--d-slow) ease, border-color var(--d-slow) ease;
  transition-delay: calc(var(--i, 0) * 80ms + 120ms);
}
.ln-ev b { display: block; color: var(--ink-muted); font-family: var(--font-mono); font-size: var(--t-xs); font-weight: var(--w-normal); }
.ln-ev small { display: block; overflow: hidden; color: var(--ink-muted); font-size: var(--t-xs); font-weight: var(--w-normal); text-overflow: ellipsis; white-space: nowrap; }
.ln-ev-short { display: none; }   /* "Lena H." where a column cannot hold "Hoffmann" (640 px and less) */
.ln-ev.is-go { border-color: var(--line-strong); background: var(--surface-active); }
.ln-ev.is-wait { border-color: var(--wait-line); background: var(--wait-quiet); }
.ln-ev.is-stop { border-color: var(--stop-line); background: var(--stop-quiet); }
.ln-ev.is-stop s { color: var(--ink-muted); }
.ln-ev.is-theory { border-style: dashed; border-color: var(--line-strong); background: transparent; }
.ln-ev.is-exam { border-color: var(--grey-500); background: var(--surface); box-shadow: inset 2px 0 0 var(--ink); }
.ln-screen.is-active .ln-ev, .ln-chapter-slot .ln-ev { opacity: 1; transform: none; }
.ln-ev.is-new { transition-delay: 0ms; }
.ln-screen.is-active .ln-ev.is-new:not(.is-shown), .ln-chapter-slot .ln-ev.is-new:not(.is-shown) { opacity: 0; transform: translateY(-6px) scale(.97); }
.ln-week-foot { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }
.ln-week-foot span { padding: 5px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink-muted); font-size: var(--t-sm); }
.ln-week-foot b { margin-right: 6px; color: var(--ink); font-weight: var(--w-medium); }

/* 4 · Konto */
.ln-ledger { list-style: none; border: 1px solid var(--line); border-radius: var(--r-md); }
.ln-ledger li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
.ln-ledger li:last-child { border-bottom: 0; }
.ln-ledger li span { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-muted); }
.ln-ledger li b { font-weight: var(--w-medium); }
.ln-ledger li.is-in span, .ln-ledger li.is-in b { color: var(--ink); }
.ln-ledger li.is-in .ln-i { --ln-i: 15px; }
.ln-ledger li[data-pay] { opacity: 0; transform: translateY(-6px); transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-out); }
.ln-ledger li[data-pay].is-shown, .ln-chapter-slot .ln-ledger li[data-pay] { opacity: 1; transform: none; }
.ln-saldo { display: flex; align-items: baseline; justify-content: space-between; margin-top: 14px; padding: 0 2px; }
.ln-saldo span { color: var(--ink-muted); }
.ln-saldo b { font-size: 22px; font-weight: var(--w-semi); letter-spacing: -0.02em; transition: color var(--d-slow) ease; }
.ln-doc { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-raised); opacity: 0; transform: translateY(10px); transition: opacity 480ms var(--ease-out), transform 600ms var(--ease-out); }
.ln-doc.is-shown, .ln-chapter-slot .ln-doc { opacity: 1; transform: none; }
.ln-doc > span:nth-child(2) { flex: 1; min-width: 0; }
.ln-doc b, .ln-doc small { display: block; }
.ln-doc small { color: var(--ink-muted); font-size: var(--t-sm); }
.ln-doc-ico { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); color: var(--ink); }

/* 5 · Fuhrpark (vehicles.css) */
.ln-notice { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-raised); color: var(--ink-muted); opacity: 0; transform: translateY(-6px); transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-out); }
.ln-notice.is-wait { border-color: var(--wait-line); background: var(--wait-quiet); color: var(--ink); }
.ln-notice.is-wait .ln-i { color: var(--wait-text); }
.ln-notice.is-shown, .ln-chapter-slot .ln-notice { opacity: 1; transform: none; }
.ln-fleet { display: grid; gap: 8px; margin-top: 12px; list-style: none; }
.ln-fleet li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); }
.ln-fleet li.is-dim { opacity: .75; }
.ln-fleet b, .ln-fleet small { display: block; }
.ln-fleet b { font-weight: var(--w-semi); }
.ln-fleet small { color: var(--ink-muted); font-size: var(--t-sm); }
.ln-fleet-ico { display: grid; place-items: center; width: 40px; height: 34px; border-radius: var(--r-sm); background: var(--surface-sunken); color: var(--ink-muted); }
.ln-chips { display: flex; gap: 4px; }
.ln-team { display: grid; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.ln-team > div { display: grid; grid-template-columns: 150px minmax(0, 1fr) 60px; align-items: center; gap: 14px; }
.ln-team b, .ln-team small { display: block; }
.ln-team span b { font-weight: var(--w-medium); }
.ln-team small { color: var(--ink-muted); font-size: var(--t-xs); }
.ln-team i { display: block; height: 6px; overflow: hidden; border-radius: 3px; background: var(--surface-sunken); }
.ln-team em { display: block; height: 100%; border-radius: inherit; background: var(--meter); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1200ms var(--ease-out) 300ms; }
.ln-screen.is-active .ln-team em, .ln-chapter-slot .ln-team em { transform: scaleX(var(--w)); }
.ln-team > div > b { text-align: right; font-weight: var(--w-medium); }

/* ── Tutorial (sticky) ────────────────────────────────────────────────── */
.ln-guide-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 72px; margin-top: 56px; }
.ln-guide-steps { position: relative; list-style: none; }
/* The line between the steps is the icon's lane marking: dashes, not a rule. */
.ln-guide-steps::before, .ln-guide-steps::after { content: ""; position: absolute; left: 18.5px; top: 30vh; bottom: 30vh; width: 3px; border-radius: 2px; background: repeating-linear-gradient(to bottom, var(--line-strong) 0 14px, transparent 14px 26px); }
.ln-guide-steps::after { background: repeating-linear-gradient(to bottom, var(--ink) 0 14px, transparent 14px 26px); clip-path: inset(0 0 calc((1 - var(--p, 0)) * 100%) 0); }
.ln-guide-step { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 24px; align-content: center; min-height: 64vh; opacity: .32; transition: opacity 500ms ease; }
.ln-guide-step.is-active, .ln-guide-step.is-done { opacity: 1; }
.ln-guide-step.is-done:not(.is-active) { opacity: .55; }
.ln-guide-num { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--canvas); color: var(--ink-muted); font-family: var(--font-mono); font-size: var(--t-base); transition: background var(--d-slow) ease, color var(--d-slow) ease, border-color var(--d-slow) ease, transform 500ms var(--ease-out); }
.ln-guide-step.is-active .ln-guide-num { border-color: var(--ink); background: var(--ink); color: var(--canvas); transform: scale(1.06); }
.ln-guide-step h3 { font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -0.03em; }
.ln-guide-step p { max-width: 46ch; margin-top: 10px; color: var(--ink-muted); font-size: 16px; line-height: 1.6; }
.ln-guide-step .ln-inline-link { margin-top: 16px; }
.ln-guide-slot { display: none; }
.ln-guide-stage { position: relative; }
.ln-guide-sticky { position: sticky; top: calc(50vh - 250px + var(--ln-header) / 2); height: 500px; }
.ln-guide-sticky .ln-screen { align-items: center; }

/* g1 · the request form, typing itself */
.ln-mini-form { display: grid; gap: 12px; }
.ln-mini-form label { display: grid; gap: 5px; }
.ln-mini-form label > span:first-child { color: var(--ink-muted); font-size: var(--t-sm); font-weight: var(--w-medium); }
.ln-mini-form label > b { display: flex; align-items: center; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-sunken); font-weight: var(--w-normal); transition: border-color var(--d-fast) ease; }
.ln-mini-form label > b.is-typing { border-color: var(--grey-300); }
.ln-mini-form label > b.is-typing::after { content: ""; width: 1.5px; height: 16px; margin-left: 1px; background: var(--ink); animation: ln-caret 900ms steps(1) infinite; }
.ln-mini-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ln-mini-chips em { padding: 7px 12px; border: 1px solid var(--line-control); border-radius: var(--r-sm); background: var(--surface-sunken); color: var(--ink-muted); font-style: normal; transition: all var(--d-slow) ease; }
.ln-mini-chips em.is-on { border-color: var(--ink); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.ln-mini-form .ln-mbtn { height: 40px; margin-top: 4px; font-size: var(--t-md); }
.ln-mini-ok { display: flex; align-items: center; gap: 8px; color: var(--ink); opacity: 0; transform: translateY(6px); transition: opacity 400ms var(--ease-out), transform 500ms var(--ease-out); }
.ln-mini-ok.is-shown { opacity: 1; transform: none; }

/* g2 · the mail */
.ln-mail { display: grid; gap: 12px; }
.ln-mail-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.ln-mail-head > span:nth-child(2) { flex: 1; }
.ln-mail-head b, .ln-mail-head small { display: block; }
.ln-mail-head small { color: var(--ink-muted); }
.ln-mail-head time { color: var(--ink-faint); font-family: var(--font-mono); font-size: var(--t-sm); }
.ln-mail p { color: var(--ink-muted); line-height: 1.6; }
.ln-mail .ln-mbtn { justify-self: start; height: 38px; padding: 0 18px; }
.ln-mbtn.is-glow { box-shadow: 0 0 0 0 rgb(var(--ln-tint) / 0.5); animation: ln-glow 1.8s var(--ease-out) infinite; }
@keyframes ln-glow { 70% { box-shadow: 0 0 0 10px rgb(var(--ln-tint) / 0); } 100% { box-shadow: 0 0 0 0 rgb(var(--ln-tint) / 0); } }
.ln-mail-list { display: grid; gap: 7px; padding-top: 12px; border-top: 1px solid var(--line); }
.ln-mail-list span { display: flex; align-items: center; gap: 8px; color: var(--ink-muted); }
.ln-mail-list .ln-i { --ln-i: 14px; color: var(--ink); }

/* g3 · Einrichtung */
.ln-checklist { display: grid; gap: 2px; margin-top: 12px; list-style: none; }
.ln-checklist li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); color: var(--ink-faint); transition: color 300ms ease; }
.ln-checklist li:last-child { border-bottom: 0; }
.ln-checklist .ln-i { --ln-i: 14px; display: grid; width: 20px; height: 20px; padding: 3px; border: 1px solid var(--line-strong); border-radius: 50%; background: transparent; mask: none; -webkit-mask: none; }
.ln-checklist .ln-i::before { content: ""; display: block; width: 100%; height: 100%; background: currentColor; mask: var(--m) center / contain no-repeat; -webkit-mask: var(--m) center / contain no-repeat; opacity: 0; transform: scale(.6); transition: opacity 300ms var(--ease-out), transform 400ms var(--ease-out); }
.ln-checklist li.is-done { color: var(--ink); }
.ln-checklist li.is-done .ln-i { border-color: var(--ink); background: var(--ink); color: var(--canvas); }
.ln-checklist li.is-done .ln-i::before { opacity: 1; transform: none; }
.ln-setup-bar { display: block; height: 4px; margin-top: 14px; overflow: hidden; border-radius: 2px; background: var(--surface-sunken); }
.ln-setup-bar em { display: block; height: 100%; background: var(--ink); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; transition: transform 600ms var(--ease-out); }
[data-accent-demo] .ln-blinki .blinki-body { fill: var(--accent); transition: fill 500ms ease; }

/* g4 · Verknüpfungen */
.ln-conn { padding: 16px; border: 1px solid var(--line); border-radius: var(--r-md); }
.ln-conn-head { display: flex; align-items: center; gap: 10px; }
.ln-conn-head b { flex: 1; font-size: var(--t-md); }
.ln-conn > p { margin-top: 10px; color: var(--ink-muted); }
.ln-conn ul { display: grid; gap: 6px; margin-top: 10px; list-style: none; }
.ln-conn li { display: flex; align-items: center; gap: 8px; color: var(--ink-muted); font-size: var(--t-sm); }
.ln-conn li .ln-i { --ln-i: 13px; color: var(--ink); }
.ln-conn-plan { display: flex; align-items: center; justify-content: space-between; max-height: 0; margin-top: 0; padding: 0 12px; overflow: hidden; border: 1px solid transparent; border-radius: var(--r-sm); background: var(--surface-raised); opacity: 0; transition: max-height 500ms var(--ease-out), margin 500ms var(--ease-out), padding 500ms var(--ease-out), opacity 400ms ease, border-color 400ms ease; }
.ln-conn-plan.is-shown { max-height: 60px; margin-top: 14px; padding: 10px 12px; border-color: var(--line); opacity: 1; }
.ln-conn-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); color: var(--ink-muted); font-size: var(--t-sm); }
.ln-inbox-mini { display: grid; gap: 6px; margin-top: 14px; }
.ln-inbox-mini > div { display: grid; grid-template-columns: 28px auto auto 1fr; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-md); opacity: 0; transform: translateY(-6px); transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-out); }
.ln-inbox-mini > div.is-shown { opacity: 1; transform: none; }
.ln-inbox-mini b { font-weight: var(--w-medium); }
.ln-inbox-mini small { color: var(--ink-muted); text-align: right; }

/* g5 · the first student */
.ln-flow { display: grid; gap: 8px; margin-top: 18px; }
.ln-flow > div { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); opacity: 0; transform: translateX(-8px); transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-out); }
.ln-flow > div.is-shown { opacity: 1; transform: none; }
.ln-flow .ln-i { color: var(--ink-muted); }
.ln-flow b { font-weight: var(--w-medium); }

/* Screens that sit in their chapter or step on a narrow page are simply
   shown in their end state; see js/landing.js. */
.ln-chapter-slot .ln-screen, .ln-guide-slot .ln-screen { position: relative; inset: auto; opacity: 1; transform: none; filter: none; pointer-events: auto; }

/* ── Ulifyi ───────────────────────────────────────────────────────────── */
.ln-ulifyi-mark { font-family: var(--ln-ulifyi-font); font-size: 13px; letter-spacing: .02em; color: var(--ink); }
.ln-flowmap { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 200px minmax(0, 1fr); align-items: center; max-width: 1000px; margin: 64px auto 0; }
.ln-flowmap::before { content: ""; position: absolute; inset: -10% 10%; border-radius: 50%; background: radial-gradient(closest-side, var(--ln-light), transparent); filter: blur(50px); pointer-events: none; }
.ln-flow-card { position: relative; padding: 18px; border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--surface); font-size: var(--t-base); }
.ln-flow-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ln-flow-card-head b, .ln-flow-card-head small { display: block; }
.ln-flow-card-head small { color: var(--ink-muted); font-size: var(--t-sm); }
.ln-flow-form { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--canvas); }
.ln-flow-form label { display: grid; gap: 4px; color: var(--ink-muted); font-size: var(--t-sm); }
.ln-flow-form label span { display: flex; align-items: center; height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-sunken); color: var(--ink); font-size: var(--t-base); transition: opacity 300ms ease; }
.ln-flow-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; list-style: none; }
.ln-flow-tags li { padding: 3px 9px; border: 1px solid var(--line); border-radius: var(--r-xs); color: var(--ink-muted); font-size: var(--t-xs); }
.ln-flow-wire { position: relative; height: 40px; margin: 0 -1px; }
.ln-flow-wire svg { width: 100%; height: 100%; overflow: visible; }
.ln-flow-wire path { fill: none; stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; animation: ln-dash 1.4s linear infinite; }
@keyframes ln-dash { to { stroke-dashoffset: -16; } }
.ln-flowmap.is-rest .ln-flow-wire path { animation-play-state: paused; }   /* after its one pass the wire stands still too */
.ln-flow-wire small { position: absolute; top: calc(100% + 6px); left: 0; right: 0; color: var(--ink-faint); font-size: var(--t-xs); text-align: center; }
.ln-packet { position: absolute; top: 50%; left: 0; display: grid; place-items: center; width: 32px; height: 32px; margin: -16px 0 0 -16px; border-radius: var(--r-sm); background: var(--ink); color: var(--canvas); box-shadow: 0 0 24px rgb(var(--ln-tint) / 0.35); opacity: 0; }
.ln-packet .ln-i { --ln-i: 15px; }
.ln-flow-inbox { list-style: none; }
.ln-flow-inbox li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--line-soft); transition: background 800ms ease; }
.ln-flow-inbox b, .ln-flow-inbox small { display: block; }
.ln-flow-inbox b { font-weight: var(--w-medium); }
.ln-flow-inbox small { color: var(--ink-muted); font-size: var(--t-xs); }
.ln-flow-inbox li.is-new { animation: ln-row-in 700ms var(--ease-out) both; background: var(--surface-hover); }
.ln-flow-take { margin-top: 14px; }
.ln-flow-take.is-glow, .ln-mbtn.is-glow { animation: ln-glow 1.8s var(--ease-out) infinite; }

/* ── Price ────────────────────────────────────────────────────────────── */
.ln-price-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 72px; align-items: center; }
.ln-price-card { position: relative; padding: 32px; border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--surface); }
.ln-price-glow { position: absolute; inset: -30px; z-index: -1; border-radius: 40px; background: radial-gradient(closest-side, var(--ln-light-strong), transparent); filter: blur(40px); pointer-events: none; }
.ln-price-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ln-price-top h3 { font-size: 17px; letter-spacing: -0.015em; }
.ln-price-value { margin-top: 28px; font-size: clamp(40px, 4vw, 54px); font-weight: var(--w-semi); letter-spacing: -0.05em; line-height: 1; }
.ln-price-value span { margin-left: 10px; color: var(--ink-faint); font-size: var(--t-md); font-weight: var(--w-normal); letter-spacing: 0; }
.ln-price-card .ln-points { margin-top: 26px; }
.ln-price-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 30px; }
.ln-price-note { margin-top: 20px; color: var(--ink-faint); font-size: var(--t-sm); }

/* ── Request ──────────────────────────────────────────────────────────── */
.ln-request-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 72px; align-items: start; }
.ln-request-copy { position: sticky; top: calc(var(--ln-header) + 40px); }
.ln-request-copy > p:not(.ln-kicker) { margin-top: 20px; color: var(--ink-muted); font-size: 17px; line-height: 1.6; }
.ln-next { display: grid; gap: 4px; margin-top: 32px; list-style: none; }
.ln-next li { display: flex; align-items: center; gap: 14px; padding: 10px 0; }
.ln-next li > span { display: grid; flex: 0 0 auto; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line-strong); border-radius: var(--r-md); color: var(--ink); }
.ln-next b, .ln-next small { display: block; }
.ln-next b { font-weight: var(--w-medium); }
.ln-next small { color: var(--ink-muted); font-size: var(--t-base); }
.ln-request-direct { margin-top: 28px; color: var(--ink-faint); }
.ln-request-direct a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }

.ln-request-card { position: relative; padding: 32px; border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--surface); }
.ln-request-card::before { content: ""; position: absolute; inset: -40px; z-index: -1; border-radius: 60px; background: radial-gradient(closest-side, var(--ln-light), transparent); filter: blur(40px); pointer-events: none; }
.ln-form { display: grid; gap: 20px; }
.ln-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ln-field { display: grid; gap: 7px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ln-field > span, .ln-field > legend { padding: 0; color: var(--ink); font-size: var(--t-md); font-weight: var(--w-medium); }
.ln-field > legend { margin-bottom: 7px; }
.ln-field em { color: var(--ink-faint); font-style: normal; }
.ln-form .input { height: 42px; padding: 0 14px; font-size: var(--t-md); }
.ln-form textarea.input { height: auto; min-height: 88px; padding: 11px 14px; line-height: 1.5; resize: vertical; }
.ln-field.is-invalid .input { border-color: var(--stop); }
.ln-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.ln-choices label { position: relative; }
.ln-choices input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ln-choices span { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border: 1px solid var(--line-control); border-radius: var(--r-sm); background: var(--surface-sunken); color: var(--ink-muted); font-size: var(--t-md); transition: border-color var(--d-fast) ease, color var(--d-fast) ease, background var(--d-fast) ease, box-shadow var(--d-fast) ease, transform var(--d-press) var(--ease-out); }
.ln-choices input:checked + span { border-color: var(--ink); background: var(--surface-raised); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.ln-choices input:focus-visible + span { outline: 2px solid var(--line-focus); outline-offset: 2px; }
.ln-choices label:active span { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .ln-choices label:hover input:not(:checked) + span { border-color: var(--line-strong); color: var(--ink); } }
.ln-consent { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; color: var(--ink-muted); font-size: var(--t-base); line-height: 1.5; cursor: pointer; }
.ln-consent input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--grey-100); }
.ln-consent a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.ln-consent.is-invalid { color: var(--stop-text); }
.ln-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ln-form-error { padding: 10px 14px; border: 1px solid var(--stop-line); border-radius: var(--r-sm); background: var(--stop-quiet); color: var(--stop-text); font-size: var(--t-base); }
.ln-submit { width: 100%; height: 50px; }
.ln-submit.is-busy { pointer-events: none; opacity: .75; }
.ln-submit.is-busy .ln-i { animation: ln-fly 900ms var(--ease-in-out) infinite; }
@keyframes ln-fly { 50% { transform: translate(4px, -4px); opacity: .4; } }

.ln-done { display: grid; justify-items: center; padding: 32px 8px; text-align: center; outline: none; }
.ln-done-check { width: 64px; height: 64px; }
.ln-done-check svg { width: 100%; height: 100%; }
.ln-done-check circle { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 151; stroke-dashoffset: 151; animation: ln-draw 700ms var(--ease-out) forwards; }
.ln-done-check path { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: ln-draw 500ms var(--ease-out) 450ms forwards; }
@keyframes ln-draw { to { stroke-dashoffset: 0; } }
.ln-done h3 { margin-top: 22px; font-size: 24px; letter-spacing: -0.03em; }
.ln-done > p { max-width: 42ch; margin-top: 10px; color: var(--ink-muted); line-height: 1.6; }
.ln-done .ln-next.is-compact { grid-auto-flow: column; gap: 18px; margin-top: 28px; }
.ln-done .ln-next.is-compact li { flex-direction: column; gap: 8px; padding: 0; text-align: center; font-size: var(--t-sm); }
.js .ln-done:not([hidden]) { animation: ln-enter 700ms var(--ease-out) both; }

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.ln-faq-list { max-width: 840px; margin: 48px auto 0; border-top: 1px solid var(--line); }
.ln-faq-list details { border-bottom: 1px solid var(--line); }
.ln-faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 2px; font-size: 17px; font-weight: var(--w-medium); list-style: none; cursor: pointer; transition: color var(--d-fast) ease; }
.ln-faq-list summary::-webkit-details-marker { display: none; }
.ln-faq-list summary .ln-i { --ln-i: 18px; color: var(--ink-faint); transition: transform 320ms var(--ease-out), color var(--d-fast) ease; }
.ln-faq-list details[open] summary .ln-i { transform: rotate(45deg); color: var(--ink); }
.ln-faq-list details > div { padding: 0 2px 24px; }
.ln-faq-list details[open] > div { animation: ln-faq 420ms var(--ease-out); }
@keyframes ln-faq { from { opacity: 0; transform: translateY(-6px); } }
.ln-faq-list details p { max-width: 66ch; color: var(--ink-muted); font-size: 16px; line-height: 1.65; }
@media (hover: hover) and (pointer: fine) { .ln-faq-list summary:hover .ln-i { color: var(--ink); } }

/* ── Closing ──────────────────────────────────────────────────────────── */
.ln-closing { position: relative; display: flex; flex-direction: column; align-items: center; width: min(100% - var(--ln-gut) * 2, var(--ln-max)); margin: 140px auto 0; padding: 88px 24px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); text-align: center; }
.ln-closing-glow { position: absolute; left: 50%; top: -40%; width: 70%; height: 90%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, var(--ln-light-strong), transparent); filter: blur(40px); pointer-events: none; }
.ln-closing::after { content: ""; position: absolute; left: 20%; right: 20%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--grey-300), transparent); opacity: .5; }
.ln-closing > * { position: relative; }
.ln-closing-icon { display: block; width: 72px; height: 72px; margin-bottom: 26px; }
.ln-closing > p { margin-top: 16px; color: var(--ink-muted); font-size: 17px; }

/* ── Header: "Fahrschule finden", and the nav as a second row below 1080 px ─ */
.ln-nav-find { display: none; }
@media (max-width: 1240px) { .ln-header-find span { display: none; } .ln-header-find { padding: 0 9px; } }
@media (max-width: 1080px) {
  .ln:has(> .ln-header.is-strip) { --ln-header: 104px; }
  .ln-header.is-strip .ln-header-in { flex-wrap: wrap; height: auto; column-gap: 28px; row-gap: 0; }
  .ln-header.is-strip .ln-brand, .ln-header.is-strip .ln-header-actions { height: 64px; }
  .ln-header.is-strip .ln-nav { display: flex; order: 3; flex: 0 0 calc(100% + var(--ln-gut) * 2); height: 40px; margin: 0 calc(var(--ln-gut) * -1); padding: 0 calc(var(--ln-gut) - 10px); overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; border-top: 1px solid var(--line-soft); }
  /* Links that run past an edge fade out instead of being cut (the first link's text starts 16px in, so it stays whole). */
  .ln-header.is-strip .ln-nav { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent); mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent); }
  .ln-header.is-strip .ln-nav::-webkit-scrollbar { display: none; }
  .ln-header.is-strip .ln-nav a { flex: none; padding: 0 10px; border-radius: 0; line-height: 40px; }
  /* The strip scrolls, so it clips above and below: the ring goes inside the link. */
  .ln-header.is-strip .ln-nav a:focus-visible { outline-offset: -6px; border-radius: 10px; }
}
@media (max-width: 640px) {
  .ln:has(> .ln-header.is-strip) { --ln-header: 98px; }
  /* 375: logo 157 + actions 171 of 343 px; margin-left: auto spaces them, a 28px gap would wrap the actions
     (here) or push them past the gutter (the site-shell pages, /fahrschulen and the school pages). */
  .ln-header-in, .ln-header.is-strip .ln-header-in { column-gap: 12px; }
  .ln-header.is-strip .ln-brand, .ln-header.is-strip .ln-header-actions { height: 58px; }
  .ln-header-find { display: none; }
  .ln-header.is-strip .ln-nav-find { display: inline-block; }
}

/* ── Statement: the four audiences ─────────────────────────────────────── */
.ln-who-index { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 40px; }
.ln-who-index a { display: inline-flex; align-items: center; gap: 12px; padding: 10px 16px 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--canvas); text-align: left; transition: border-color var(--d-fast) ease; }
/* The tile is the box, the glyph its ::before (a mask on the box would erase its border; = .ln-checklist .ln-i). */
.ln-who-index .ln-i { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line-strong); border-radius: 10px; background: transparent; color: var(--ink); mask: none; -webkit-mask: none; transition: transform var(--d-fast) var(--ease-out); }
.ln-who-index .ln-i::before { content: ""; width: 18px; height: 18px; background: currentColor; mask: var(--m) center / contain no-repeat; -webkit-mask: var(--m) center / contain no-repeat; }
.ln-who-index b { display: block; color: var(--ink); font-size: var(--t-md); font-weight: var(--w-semi); }
.ln-who-index small { display: block; color: var(--ink-faint); font-size: var(--t-sm); }
.js .ln-who-index a { opacity: 0; transform: translateY(10px); transition: opacity 420ms var(--ease-out) calc(var(--i) * 70ms), transform 520ms var(--ease-out) calc(var(--i) * 70ms), border-color var(--d-fast) ease; }
.js .ln-statement.is-done .ln-who-index a, .js .ln-who-index:focus-within a { opacity: 1; transform: none; }   /* Tab into the pills early: all four come, not one alone */
.ln-who-index a:focus-visible { outline: 2px solid var(--line-focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .ln-who-index a:hover { border-color: var(--line-strong); } .ln-who-index a:hover .ln-i { transform: translateY(-1px); } }
@media (max-width: 959px) and (min-width: 641px) { .ln-who-index { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; } }   /* 2 × 2, not 3 + 1 */
@media (max-width: 640px) { .ln-who-index { display: grid; grid-template-columns: 1fr 1fr; } .ln-who-index a { gap: 10px; padding: 10px; } .ln-who-index small { display: none; } }
@media (prefers-reduced-motion: reduce) { .js .ln-who-index a { opacity: 1; transform: none; } }

/* ── Tour additions: Anfragen, the free slot, the invoice on paper ──────── */
/* 2 · Anfragen (pages/inquiries: the list left, the open one right) */
.ln-inq { display: grid; grid-template-columns: minmax(0, 270px) minmax(0, 1fr); min-height: 330px; }
.ln-inq-list { margin: 0; padding: 0; border-right: 1px solid var(--line); list-style: none; }
/* Like the inbox (inquiries.css .anf-msg): the envelope, then name and tag on one line, the meta under both — one line each. */
.ln-inq-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; padding: 11px 14px; border-bottom: 1px solid var(--line-soft); }
.ln-inq-list li > span:nth-child(2) { display: contents; }
.ln-inq-list .ln-hint-ico { grid-row: 1 / 3; align-self: start; margin-top: 1px; }
.ln-inq-list b, .ln-inq-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ln-inq-list b { grid-area: 1 / 2; font-weight: var(--w-semi); }
.ln-inq-list li > .ln-badge { grid-area: 1 / 3; }
.ln-inq-list small { grid-area: 2 / 2 / 3 / 4; color: var(--ink-faint); font-size: var(--t-xs); }
.ln-inq-list li.is-sel { background: var(--surface-active); }
.js .ln-screen [data-inq-lena] { opacity: 0; transform: translateY(-8px); transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-out), background 600ms ease; }
.js .ln-screen [data-inq-lena].is-new, .js .ln-chapter-slot [data-inq-lena] { opacity: 1; transform: none; }
.ln-inq-detail { display: grid; align-content: start; gap: 14px; padding: var(--s-5); }
.ln-inq-from { color: var(--ink-faint); font-size: var(--t-sm); }
.ln-inq-dl { display: grid; gap: 8px; margin: 0; }
.ln-inq-dl div { display: grid; grid-template-columns: 110px minmax(0, 1fr); }
.ln-inq-dl dt { color: var(--ink-faint); }
.ln-inq-dl dd { margin: 0; }
/* The button and the result share one cell: "angelegt" takes the button's place. */
.ln-inq-detail > .ln-mbtn, .ln-inq-done { grid-area: 3 / 1; }
.ln-inq-done { display: flex; align-items: center; gap: 8px; min-height: var(--control-h); font-weight: var(--w-medium); opacity: 0; transform: translateY(6px); transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-out); }
.ln-inq-done .ln-i { --ln-i: 15px; }
.ln-inq-done.is-shown, .ln-chapter-slot .ln-inq-done.is-shown { opacity: 1; transform: none; }
/* 4 · Termine: the free slot the search found */
/* Like a toast over the calendar's last rows, in the free band of Do and Fr
   (Fr is empty after the 15:00 exam, Do after 13:00; Mi has Theorie at
   18:00, so the card never reaches into Mi). It sits on the foot, which stays
   one line from 641 px up (57 px tall, 53 px below 1161 px), so the card always clears it. Narrower
   stages drop the icon so the card stays inside Do + Fr. */
.ln-free { position: absolute; right: 6px; bottom: 72px; z-index: 2; width: max-content; margin: 0; box-shadow: var(--shadow-pop); }
.ln-week-foot { flex-wrap: nowrap; }
@media (max-width: 1160px) {
  .ln-free .ln-doc-ico { display: none; }
  .ln-free { bottom: 68px; padding: 10px 12px; }
  .ln-week-foot { gap: 6px; padding: 12px; }
  .ln-week-foot span { padding: 4px 8px; font-size: var(--t-xs); white-space: nowrap; }
}
/* 5 · Konto: the invoice, as the sheet it prints on */
.ln-paper { position: absolute; right: -2%; bottom: -10%; z-index: 3; width: 38%; height: auto; border-radius: 3px; box-shadow: 0 30px 60px -20px rgb(0 0 0 / .9); opacity: 0; transform: translateY(28px) rotate(6deg); transition: opacity 600ms var(--ease-out), transform 900ms var(--ln-glide); }
.ln-paper.is-shown { opacity: 1; transform: rotate(4deg); }
.ln-chapter-slot .ln-paper { display: none; }
@media (max-width: 640px) {
  .ln-inq { grid-template-columns: minmax(0, 1fr); min-height: 0; }   /* one row each: no stretched gap under Lena */
  .ln-inq-list { border-right: 0; border-bottom: 1px solid var(--line); }
  .ln-inq-list li:nth-child(n + 2) { display: none; }
  /* A phone has no free band: the card becomes the window's last row, the foot may wrap. */
  .ln-free { position: static; width: auto; margin: 12px; box-shadow: none; }
  .ln-free .ln-doc-ico { display: grid; }
  .ln-week-foot { flex-wrap: wrap; }
}

/* ── Tour, October 2026: what the office got since ───────────────────────
   Blinki's "Demnächst" and the answer's link (pages/overview.js), the
   record's tabs and Blinki's tips (pages/students/detail.js), an invoice
   with its status, and Offene Posten (pages/receivables/list.js). Colour
   only as state: red overdue, amber partly paid or a letter due. */
.ln-soon { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); }
.ln-soon-h { color: var(--ink-muted); font-size: var(--t-sm); font-weight: var(--w-medium); }
.ln-soon-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin-top: 8px; }
.ln-soon-rows > span { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.ln-soon-rows .ln-i { --ln-i: 15px; color: var(--ink-faint); }
.ln-soon-rows b, .ln-soon-rows small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ln-soon-rows b { font-weight: var(--w-medium); }
.ln-soon-rows small { color: var(--ink-muted); font-size: var(--t-xs); }
.ln-soon-rows small .ln-badge { margin-left: 4px; padding: 0 5px; }
.ln-soon-rows > span > em { color: var(--ink-faint); font-size: var(--t-xs); font-style: normal; white-space: nowrap; }
.ln-ask-go { display: inline-flex; align-items: center; gap: 2px; margin-top: 6px; color: var(--ink); font-size: var(--t-sm); font-weight: var(--w-medium); opacity: 0; transition: opacity 420ms var(--ease-out); }
.ln-ask-go .ln-i { --ln-i: 13px; color: var(--ink-faint); }
.ln-ask-go.is-shown { opacity: 1; }
.ln-chapter-body .ln-inline-link { margin: 2px 0 16px; }
/* Akte: the record's tab row, "Offener Betrag" at its end */
.ln-rtabs { display: flex; align-items: center; gap: 16px; margin: 16px calc(var(--s-5) * -1) 0; padding: 0 var(--s-5); border-bottom: 1px solid var(--line); color: var(--ink-muted); font-size: var(--t-sm); white-space: nowrap; }
.ln-rtabs > span { padding: 9px 0; }
.ln-rtabs > .is-on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.ln-rtabs-due { margin-left: auto; color: var(--ink-muted); }
.ln-rtabs-due b { margin-left: 6px; color: var(--stop-text); font-weight: var(--w-semi); }
.ln-tips { margin-top: 14px; padding: 10px 14px 4px; border: 1px solid var(--line); border-radius: var(--r-md); }
.ln-tips-lead { color: var(--ink-muted); font-size: var(--t-sm); }
.ln-tips-lead b { margin-right: 4px; color: var(--ink); font-weight: var(--w-semi); }
.ln-tips ul { margin: 6px 0 0; padding: 0; list-style: none; }
.ln-tips li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line-soft); font-size: var(--t-sm); }
.ln-tips li > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ln-tips li.is-stop > span:nth-child(2) { color: var(--stop-text); }
.ln-tips .ln-hint-ico { width: 24px; height: 24px; }
.ln-tips .ln-hint-ico .ln-i { --ln-i: 13px; }
.ln-tips a { display: inline-flex; align-items: center; gap: 2px; color: var(--ink); font-weight: var(--w-medium); white-space: nowrap; }
.ln-tips a .ln-i { --ln-i: 12px; color: var(--ink-faint); }
.is-go > .ln-hint-ico { background: var(--idle-quiet); color: var(--ink); }
/* Konto: charges and money in, as the record's ledger marks them */
.ln-ledger li span .ln-i { --ln-i: 15px; color: var(--ink-faint); }
.ln-doc b .ln-badge { margin-left: 6px; vertical-align: 1px; }
/* Offene Posten */
.ln-op-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ln-op-metrics b { display: block; font-size: 17px; font-weight: var(--w-semi); letter-spacing: -0.01em; }
.ln-op-metrics b.is-stop { color: var(--stop-text); }
.ln-op-metrics b.is-wait { color: var(--wait-text); }
.ln-op-metrics span { display: block; margin-top: 2px; color: var(--ink-muted); font-size: var(--t-xs); }
.ln-op-seg { margin-top: 14px; }
.ln-op { margin-top: 12px; border: 1px solid var(--line); border-radius: var(--r-md); }
.ln-op-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.5fr) 86px minmax(0, 1.25fr); align-items: center; gap: 10px; padding: 9px 12px; border-top: 1px solid var(--line-soft); font-size: var(--t-sm); }
.ln-op-row:first-child { border-top: 0; }
.ln-op-row.is-head { color: var(--ink-muted); font-size: var(--t-xs); }
.ln-op-row > span:first-child b { display: block; font-weight: var(--w-medium); }
.ln-op-row small { color: var(--ink-faint); font-size: var(--t-xs); }
.ln-op-row > span:nth-child(2) { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.ln-op-row > b { font-weight: var(--w-semi); text-align: right; }
.ln-op-row > b.is-stop { color: var(--stop-text); }
.ln-op-step { display: grid; justify-items: start; }
.ln-op-step > * { grid-area: 1 / 1; }
.ln-op-done { align-self: center; color: var(--ink-muted); opacity: 0; transform: translateY(6px); transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-out); }
.ln-op-done.is-shown { opacity: 1; transform: none; }
.ln-op-row.is-head > span:nth-child(3) { text-align: right; }
@media (max-width: 640px) {
  .ln-soon-rows { grid-template-columns: minmax(0, 1fr); }
  .ln-rtabs .ln-hide-sm { display: none; }
  .ln-rtabs { gap: 12px; font-size: var(--t-xs); }
  .ln-tips li > a { display: none; }
  .ln-tips li > span:nth-child(2) { white-space: normal; }
  .ln-tips li { grid-template-columns: 24px minmax(0, 1fr); align-items: start; }
  .ln-op-metrics { grid-template-columns: 1fr 1fr; }
  .ln-op-seg { display: none; }
  .ln-op-row { grid-template-columns: minmax(0, 1fr) 78px; }
  .ln-op-row > span:nth-child(2), .ln-op-row.is-head > span:nth-child(2) { display: none; }
  .ln-op-step { grid-column: 1 / -1; }
  .ln-op-row.is-head > span:nth-child(4) { display: none; }
}

/* ── Audiences: Fahrlehrer, Fahrschüler (step players) ───────────────────
   One component for both. The hairline under a step is its clock (a CSS
   animation; js/landing.js advances on animationend), so pausing the bar
   pauses the player. Without JS every step body is open. */
.ln-anchor { display: block; height: 0; }
.ln-who-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
.ln-who.is-flip .ln-who-copy { order: 2; }
.ln-who-lead { max-width: 46ch; margin-top: 20px; color: var(--ink-muted); font-size: 17px; line-height: 1.6; }
.ln-who-player { margin-top: 32px; }
.ln-who-steps { margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.ln-who-step { position: relative; border-bottom: 1px solid var(--line); }
.ln-who-tab { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 0; color: var(--ink-faint); font-size: 16px; font-weight: var(--w-medium); text-align: left; transition: color var(--d-slow) ease; }
.ln-who-num { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border: 1px solid var(--line-strong); border-radius: 50%; font-size: var(--t-sm); transition: border-color var(--d-slow) ease, color var(--d-slow) ease; }
.ln-who-step.is-active .ln-who-tab { color: var(--ink); }
.ln-who-step.is-active .ln-who-num { border-color: var(--ink); color: var(--ink); }
.ln-who-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; overflow: hidden; }
.ln-who-bar i { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; }
.ln-who-step.is-run .ln-who-bar i { animation: ln-who-fill var(--dur, 3600ms) linear forwards; }   /* the clock: animationend advances */
.ln-who.is-held .ln-who-bar i { animation-play-state: paused; }
.ln-who-step.is-past .ln-who-bar i { transform: scaleX(1); }
@keyframes ln-who-fill { to { transform: scaleX(1); } }
.js .ln-who-body { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 520ms var(--ease-out), opacity 420ms ease; }
.ln-who-body > div { overflow: hidden; }
.ln-who-body p { padding: 0 0 18px 44px; color: var(--ink-muted); font-size: 15px; line-height: 1.6; }
.js .ln-who-step.is-active .ln-who-body { grid-template-rows: 1fr; opacity: 1; }
.ln-who-ctl { display: inline-flex; align-items: center; gap: 8px; height: 32px; margin-top: 14px; padding: 0 12px 0 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-muted); font-size: var(--t-sm); font-weight: var(--w-medium); transition: color var(--d-fast) ease, border-color var(--d-fast) ease, transform var(--d-press) var(--ease-out); }
.ln-who-ctl .ln-i { --ln-i: 13px; }
.ln-who-ctl { position: relative; }
.ln-who-ctl::after { content: ""; position: absolute; inset: -7px -2px; }   /* same look, a 44 px hit height (inside the 1 px border: 30 + 14) */
.ln-who-ctl:active { transform: scale(.96); }
.ln-who-tab:focus-visible, .ln-who-ctl:focus-visible { outline: 2px solid var(--line-focus); outline-offset: 2px; border-radius: var(--r-sm); }
.ln-who-foot { display: grid; justify-items: start; gap: 14px; margin-top: 28px; }
.ln-who-foot .ln-mob-badges { margin-top: 0; }
.ln-who-foot .ln-mob-cta { margin-top: 6px; }   /* badges and button read as one group */
.ln-who-note { color: var(--ink-faint); font-size: 14px; }
.ln-who-note a { color: var(--ink-muted); text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .ln-who-tab:hover { color: var(--ink); } .ln-who-ctl:hover { border-color: var(--line-strong); color: var(--ink); } }

/* The stage. Every device rule starts at .ln-who-stage: phone.css comes
   later and sets --w and position on .dv. */
.ln-who-stage { --land: min(600px, 52vw); position: relative; height: 640px; perspective: 1600px; }
.ln-who-stage .dv { position: absolute; left: 50%; top: 50%; transition: transform 900ms var(--ln-glide), opacity 600ms var(--ease-out), filter 600ms var(--ease-out); }
.ln-who-stage .ln-who-phone { --w: 270px; z-index: 2; transform: translate(-50%, -50%) rotate(-3deg); }
.ln-who-stage[data-step="1"] .ln-who-phone { transform: translate(-50%, -50%) rotate(-1.5deg); }
.ln-who-stage[data-step="2"] .ln-who-phone { transform: translate(-52%, -50%) rotate(-2.5deg); }
.ln-who-stage .ln-who-chip { left: auto; right: 0; top: 12%; }
.ln-who-chip > span, .ln-who-chip > .ln-i { transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out); }
.ln-who-chip.is-swap > span, .ln-who-chip.is-swap > .ln-i { opacity: 0; transform: translateY(4px); transition-duration: 150ms; }
/* A step without a chip (04): the whole glass fades with its words, and comes back with the next ones. */
.ln-who-stage .ln-who-chip { transition: opacity 200ms var(--ease-out), transform 900ms var(--ln-glide); }
.ln-who-stage .ln-who-chip.is-off { opacity: 0; pointer-events: none; }
.ln-tap { position: absolute; z-index: 5; left: var(--x); top: var(--y); width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 2px solid rgb(255 255 255 / .9); border-radius: 50%; background: rgb(255 255 255 / .18); opacity: 0; pointer-events: none; }
.ln-tap.is-tap { animation: ln-tap 620ms var(--ease-out); }
@keyframes ln-tap { 0% { opacity: 0; transform: scale(.6); } 20% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }
/* The pad's green "Unterschreiben und abschließen" sits at 85–96 % of the
   picture, which is 81.3–94 % of the device box (bezel included, the same
   at every --w); the white pad ends at 78.9 %. A close-up dissolves the
   button into the page: fully gone by 80 %. */
.ln-who-stage .ln-who-land { --w: var(--land); z-index: 3; opacity: 0; transform: translate(-50%, -50%) rotate(90deg) scale(.86); -webkit-mask-image: linear-gradient(#000 66%, transparent 80%); mask-image: linear-gradient(#000 66%, transparent 80%); }
.ln-who-stage.is-turned .ln-who-phone { opacity: 0; transform: translate(-50%, -50%) rotate(-90deg) scale(.86); }
.ln-who-stage.is-turned .ln-who-land { opacity: 1; transform: translate(-50%, -50%) rotate(-2deg); transition-delay: 120ms; }
.ln-who-stage.is-final .ln-who-land { transform: translate(-62%, -100%) rotate(-4deg) scale(.72); filter: brightness(.55); transition-delay: 0ms; }
.ln-ink { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.ln-ink path, .ln-sig.is-live path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.ln-who-stage.is-signing .ln-ink path { animation: ln-draw calc(var(--len) * 1s) cubic-bezier(.5, 0, .3, 1) forwards; }   /* @keyframes ln-draw: see .ln-done-check */
.ln-who-stage.is-signing .ln-ink path:nth-child(1) { animation-delay: 300ms; }
.ln-who-stage.is-signing .ln-ink path:nth-child(2) { animation-delay: 700ms; }
.ln-who-stage.is-signing .ln-ink path:nth-child(3) { animation-delay: 1900ms; }
.ln-who-stage.is-signed .ln-ink path { stroke-dashoffset: 0; animation: none; }
.ln-who-toast { position: absolute; z-index: 5; left: 50%; top: calc(50% + var(--land) * .155); display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 12px; border: 1px solid rgb(var(--ln-tint) / .12); border-radius: 16px; background: rgb(18 22 28 / .62); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); box-shadow: 0 20px 40px -12px rgb(0 0 0 / .7); white-space: nowrap; opacity: 0; transform: translate(-50%, 10px); transition: opacity 500ms var(--ease-out), transform 700ms var(--ln-glide); pointer-events: none; }
.ln-who-toast .ln-i { --ln-i: 20px; color: var(--ink); }
.ln-who-toast strong { display: block; font-size: var(--t-md); font-weight: var(--w-semi); }
.ln-who-toast small { display: block; color: var(--ink-faint); font-size: var(--t-sm); }
.ln-who-toast.is-shown { opacity: 1; transform: translate(-50%, 0); }
/* 03 → 04: the toast leaves fast, and only then the list comes, so no word ever sits on another. */
.ln-who-stage.is-final .ln-who-toast { opacity: 0; transition: opacity 140ms var(--ease-out), transform 140ms var(--ease-out); }
.ln-who-card { position: absolute; z-index: 4; right: 0; bottom: 0; width: min(560px, 92%); opacity: 0; transform: translateY(24px); transition: opacity 520ms var(--ease-out), transform 700ms var(--ln-glide); pointer-events: none; }
.ln-who-stage.is-final .ln-who-card { opacity: 1; transform: none; transition-delay: 140ms; }
/* The Fahrstunden-Liste (pages/appointments/list.js) in miniature */
.ln-sig-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px 8px; }
.ln-sig-check { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-muted); font-size: var(--t-sm); }
.ln-sig-check i { width: 14px; height: 14px; border: 1px solid var(--line-strong); border-radius: 4px; }
.ln-sig-count { padding: 0 14px 10px; color: var(--ink-faint); font-size: var(--t-xs); }
.ln-sig-table { display: grid; border-top: 1px solid var(--line); }
.ln-sig-row { display: grid; grid-template-columns: 54px minmax(0, 1.2fr) 100px minmax(0, .8fr) 86px; align-items: center; gap: 10px; min-height: 46px; padding: 0 14px; border-bottom: 1px solid var(--line-soft); font-size: var(--t-sm); transition: background 600ms ease; }
.ln-sig-row:last-child { border-bottom: 0; }
.ln-sig-row.is-head { min-height: 34px; color: var(--ink-faint); font-size: var(--t-xs); }
.ln-sig-row.is-live { background: rgb(var(--ln-tint) / .05); }
.ln-sig-row > .ln-badge { justify-self: start; }
.ln-sig { display: block; width: 96px; height: 36px; color: var(--ink); }
.ln-sig path { fill: none; stroke: currentColor; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; } /* user units; NO vector-effect — it breaks pathLength dashes */
.ln-siglist.is-signing .ln-sig.is-live path { animation: ln-draw 900ms cubic-bezier(.5, 0, .3, 1) forwards; }
.ln-siglist.is-signing .ln-sig.is-live path:nth-child(2) { animation-delay: 120ms; }
.ln-siglist.is-signing .ln-sig.is-live path:nth-child(3) { animation-delay: 360ms; }
.ln-siglist.is-done .ln-sig.is-live path { stroke-dashoffset: 0; animation: none; }
.ln-sig-none { color: var(--ink-faint); }
/* Two columns: reached from the nav (scroll-padding 72 + the section's 140), kicker to
   "Nochmal abspielen" and the stage beside them fit one 1440 × 900 screen under the header,
   04's list included. The stage stands at the top of the row, beside heading and steps, not in
   the middle of a column that also holds the foot; the steps sit a little closer. */
@media (min-width: 960px) {
  .ln-who-stage { align-self: start; }
  .ln-who-player { margin-top: 24px; }
  .ln-who-tab { padding: 10px 0; }
}
@media (max-width: 959px) {
  /* One column: the heading, then the device, then the steps right under it,
     so a tapped step changes the screen just above. The copy column melts
     into the grid for that (display: contents). */
  .ln-who-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ln-who-copy { display: contents; }
  .ln-who-stage { --land: min(540px, calc(100vw - 48px)); order: 1; height: 560px; }
  .ln-who-player { order: 2; margin-top: 0; }
  .ln-who-foot { order: 3; margin-top: 0; }
  .ln-who-stage .ln-who-phone { --w: 240px; }
  .ln-who-stage.is-final .ln-who-land { transform: translate(-50%, -116%) rotate(-3deg) scale(.7); }
  .ln-who-card { left: 0; width: auto; margin-inline: auto; }   /* .ln-win caps it at 640px: centred under the device */
  /* 03 turns the phone into the landscape pad, and the stage takes the pad's height instead of the
     phone's, so no empty band stands above or below it; 04 needs the full height again. The height
     glides with the pad. The reveal's own transitions (.js .ln-reveal) stay in the list.
     Here --land is 540px: chip at 12 %, the pad 12 px under it (its tilted box is 280 px tall),
     the toast over the pad's faded edge, 24 px to spare. */
  .js .ln-who-stage { transition: opacity 800ms var(--ease-out), transform 1000ms var(--ease-out), filter 800ms var(--ease-out), height 900ms var(--ln-glide); transition-delay: calc(var(--ln-d, 0) * 80ms), calc(var(--ln-d, 0) * 80ms), calc(var(--ln-d, 0) * 80ms), 0s; }
  .ln-who-stage.is-turned:not(.is-final) { height: 434px; }
  .ln-who-stage.is-turned:not(.is-final) .ln-who-land { transform: translate(-50%, calc(-50% + 48px)) rotate(-2deg); }
  .ln-who-toast { top: calc(50% + var(--land) * .155 + 48px); }
  /* The steps under the stage are what the reader holds on to. Chrome and Firefox anchor the scroll
     on them (the heading never takes that role), so a stage that changes height above them moves
     the page above it instead of the steps. Without scroll anchoring the steps glide with it. */
  .ln-who-copy > :first-child { overflow-anchor: none; }
}
@media (max-width: 640px) {
  .ln-who-stage { --land: calc(100vw - 32px); height: 480px; }
  .ln-who-stage .ln-who-phone { --w: 210px; }
  /* 04: the pad sits just above the list (measured: 116 px tall at .7, top 20 px), not half behind it. */
  .ln-who-stage.is-final .ln-who-land { transform: translate(-50%, -148%) scale(.7); }
  /* 03 (see above), stacked: the pad 8 px from the top (its tilted box is --land × .519 tall), the
     toast over its faded edge, the chip under the toast, 8 px to spare. The offsets count from the
     middle of this height, --land × .2073 + 75px. */
  .ln-who-stage.is-turned:not(.is-final) { height: calc(var(--land) * .4145 + 150px); }
  .ln-who-stage.is-turned:not(.is-final) .ln-who-land { transform: translate(-50%, calc(-50% + var(--land) * .0523 - 67px)) rotate(-2deg); }
  .ln-who-toast { top: calc(50% + var(--land) * .2073 - 67px); }
  .ln-who-body p { padding-left: 0; }
  /* The chip goes under the phone's tab bar, not over its title; in 03 under the toast. */
  .ln-who-stage .ln-who-chip { right: 0; top: auto; bottom: 8px; }
  .ln-sig-row { grid-template-columns: 44px minmax(0, 1fr) 74px 78px; gap: 8px; }
  .ln-sig-row > :nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ln-sig-row > :nth-child(4) { display: none; }
  .ln-sig { width: 74px; height: 28px; }
}
/* Reduced motion shortens durations only (styles.css), not delays: the pad and the list switch at once. */
@media (prefers-reduced-motion: reduce) {
  .ln-tap { display: none; }
  .ln-who-bar { display: none; }
  .ln-who-stage.is-turned .ln-who-land, .ln-who-stage.is-final .ln-who-card { transition-delay: 0s; }
}

/* ── Fahrschulseite & Verzeichnis ───────────────────────────────────────── */
/* p.: it has to outrank `.ln-section-head > p:not(.ln-kicker)` (the lead). */
.ln-section-head > p.ln-grow-url { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; max-width: none; margin: 22px 0 0; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-size: 13px; line-height: 1.4; }
.ln-grow-url .ln-i { --ln-i: 14px; color: var(--ink-faint); }
.ln-grow-url small { color: var(--ink-faint); font-size: var(--t-sm); }
/* A browser around a real capture (= the dashboard's .sp-browser, app/styles/pages/school-page.css:31–60). Black, never grey. */
.ln-browser { position: relative; margin: 0; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--canvas); box-shadow: 0 40px 100px -40px rgb(0 0 0 / .95); }
.ln-browser::before { content: ""; position: absolute; z-index: 1; left: 12%; right: 12%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--grey-300), transparent); opacity: .45; }
.ln-browser-bar { display: flex; align-items: center; gap: 12px; height: 36px; padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--surface-head); }
.ln-browser-dots { display: flex; flex: none; gap: 6px; }
.ln-browser-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.ln-browser-url { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 72%; height: 22px; margin: 0 auto; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-sunken); color: var(--ink-faint); font: 500 11px/1 var(--font-mono); white-space: nowrap; }
.ln-browser-url .ln-i { --ln-i: 11px; }
.ln-browser-url span { overflow: hidden; text-overflow: ellipsis; }
.ln-browser-view { position: relative; overflow: hidden; }
.ln-browser-view img { display: block; width: 100%; height: auto; }

.ln-grow-stage { position: relative; height: 640px; margin-top: 64px; }
.ln-grow-stage .ln-browser { position: absolute; }
.ln-grow-stage .is-back { left: 0; top: 0; width: 58%; filter: brightness(.78); transform: translate3d(0, calc((1 - var(--p, 1)) * 20px), 0); }
.ln-grow-stage .is-front { right: 0; top: 84px; z-index: 2; width: 70%; transform: translate3d(0, calc((1 - var(--p, 1)) * 56px), 0); }
.ln-grow-stage .is-front .ln-browser-view { height: 500px; }
.ln-grow-stage .is-front .ln-browser-view img { transform: translate3d(0, calc(var(--k, 0) * var(--travel, 0px) * -1), 0); will-change: transform; } /* follows the scroll frame by frame: no transition */
.ln-grow-stage .ln-grow-phone { display: none; }
/* Chips 1 and 3 sit in the free corner under the dashboard and only touch
   the public page's empty left margin (it starts 11 % into the front
   browser): neither covers a word of either capture. */
.ln-grow-stage .ln-mob-chip { left: calc(30% - 176px); top: 372px; }
.ln-grow-stage .ln-mob-chip.is-two { left: auto; right: -12px; top: 46%; bottom: auto; }
.ln-grow-stage .ln-mob-chip.is-three { left: calc(30% - 214px); top: auto; bottom: 40px; animation-delay: -1.5s; }
.js .ln-grow-stage .ln-mob-chip { opacity: 0; transform: scale(.96); transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-out); }
.js .ln-grow-stage .ln-mob-chip.is-on { opacity: 1; transform: none; }
.ln-grow-points { justify-content: center; grid-auto-flow: column; gap: 28px; margin-top: 36px; }
.ln-grow-note { margin-top: 14px; color: var(--ink-faint); font-size: var(--t-sm); text-align: center; }

/* The loop: Gefunden → Überzeugt → Angemeldet → Bewertet, and back. */
.ln-loop-wrap { position: relative; margin-top: 88px; }
.ln-loop { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; text-align: center; }
.ln-loop::before { content: ""; position: absolute; left: calc((100% - 72px) / 8); right: calc((100% - 72px) / 8); top: 19px; height: 1px; background: var(--line); }   /* centre of the first icon to centre of the last (4 columns, 3 gaps of 24px) */
.ln-loop li { position: relative; display: grid; align-content: start; justify-items: center; gap: 8px; }
.ln-loop-ico { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--canvas); color: var(--ink-faint); transition: border-color 400ms ease, color 400ms ease, box-shadow 600ms ease; }
.ln-loop li.is-on .ln-loop-ico { border-color: var(--ink); color: var(--ink); box-shadow: 0 0 0 6px rgb(var(--ln-tint) / .06); }   /* light, not colour */
.ln-loop b { font-size: 16px; font-weight: var(--w-semi); }
.ln-loop p { max-width: 26ch; color: var(--ink-muted); font-size: var(--t-md); line-height: 1.5; }
.ln-loop .ln-inline-link { display: inline-flex; margin-top: 6px; font-size: var(--t-sm); }
.ln-loop-dot { position: absolute; left: 0; top: 15px; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); opacity: 0; pointer-events: none; }
.ln-loop-back { display: block; width: 100%; height: 56px; margin-top: 8px; overflow: visible; }   /* clear of the third station's link */
.ln-loop-back path { fill: none; stroke: var(--ink-faint); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 800ms var(--ease-out); } /* pathLength="1" dash, NO vector-effect (it breaks pathLength dashes); the 1000×56 box stretches ~1.16× wide, so 1 unit stays ~1 px. The ends, 116 and 884, are the outer icons' centres (11.6 % / 88.4 % of the row). */
.ln-loop-wrap.is-closed .ln-loop-back path { stroke-dashoffset: 0; }
/* The tip under "Gefunden" says which way the loop runs; it comes once the arc has arrived. */
.ln-loop-back .ln-loop-tip { stroke-dasharray: none; stroke-dashoffset: 0; opacity: 0; transition: opacity 300ms ease; }
.ln-loop-wrap.is-closed .ln-loop-back .ln-loop-tip { opacity: 1; transition-delay: 650ms; }
.ln-loop-note { color: var(--ink-faint); font-size: var(--t-base); text-align: center; }

/* Reviews: typed on the card, then found on the page. */
.ln-review { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; margin-top: 120px; }
.ln-h3 { font-size: clamp(24px, 2.6vw, 32px); font-weight: var(--w-semi); line-height: 1.15; letter-spacing: -0.03em; }
.ln-review-copy > p { max-width: 46ch; margin-top: 16px; color: var(--ink-muted); font-size: 16px; line-height: 1.6; }
/* The card sits in front of the page's lower-left corner, below the spot (which ends at 55 % of the capture) at every width ≥ 960. */
.ln-review-visual { position: relative; padding-bottom: 220px; }
.ln-review-visual .ln-browser { margin-left: 16%; }
.ln-spot { position: absolute; left: var(--sx); top: var(--sy); width: var(--sw); height: var(--sh); border: 1px solid var(--ink); border-radius: 12px; box-shadow: 0 0 0 6px rgb(var(--ln-tint) / .06), 0 0 40px var(--ln-light-strong); opacity: 0; transition: opacity 500ms var(--ease-out) 200ms; pointer-events: none; }
.ln-review.is-sent .ln-spot { opacity: 1; }
.ln-rate { position: absolute; left: 0; bottom: 0; z-index: 2; width: min(330px, 62%); transition: transform 420ms var(--ease-out), filter 420ms var(--ease-out); }
.ln-review.is-sent .ln-rate { filter: brightness(.6); transform: translateX(-12px) scale(.97); }   /* dimmed, not see-through: no text over text */
.ln-rate .ln-win-body { display: grid; gap: 8px; padding: 18px; }
.ln-rate-h { font-weight: var(--w-semi); }
.ln-rate-sub, .ln-rate-label { color: var(--ink-faint); font-size: var(--t-sm); }
.ln-rate-stars { display: flex; gap: 6px; margin-top: 4px; }
.ln-rate-stars i { width: 26px; height: 26px; background: var(--ink); -webkit-mask: var(--sd-star) center / contain no-repeat; mask: var(--sd-star) center / contain no-repeat; }   /* --sd-star: /school-card.css */
.js .ln-rate-stars i:not(.is-on) { background: var(--line-strong); }
.ln-rate-stars i.is-on { animation: ln-star-pop 220ms var(--ease-out); }
@keyframes ln-star-pop { 50% { transform: scale(1.18); } }
.ln-rate-word { color: var(--ink-muted); font-size: var(--t-sm); }
.ln-rate-text { min-height: calc(6em + 22px); padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-sunken); font-size: var(--t-sm); line-height: 1.5; }   /* four lines reserved: the card must not grow while the text types */
.ln-rate-text.is-typing::after { content: ""; display: inline-block; width: 1px; height: 1em; margin-left: 1px; background: var(--ink); vertical-align: -2px; animation: ln-caret 1s steps(2) infinite; }   /* @keyframes ln-caret: see .ln-ask-answer */
.ln-rate-names { display: flex; gap: 6px; }
.ln-rate-names span { padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-faint); font-size: var(--t-xs); }
.ln-rate-names .is-on { border-color: var(--ink); color: var(--ink); }
.ln-rate-done { display: none; align-items: center; gap: 8px; height: var(--control-h); font-weight: var(--w-medium); }
.ln-rate-done .ln-i { --ln-i: 15px; }
.ln-review.is-sent [data-rate-send] { display: none; }
.ln-review.is-sent .ln-rate-done { display: flex; }

/* The directory teaser: a plain GET form to /fahrschulen. */
.ln-find { max-width: 760px; margin: 104px auto 0; padding: 40px; border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--surface); text-align: center; }
.ln-find .ln-kicker { justify-content: center; }
.ln-find h3 { font-size: clamp(24px, 2.6vw, 32px); font-weight: var(--w-semi); line-height: 1.15; letter-spacing: -0.03em; }
.ln-find > p:not(.ln-kicker):not(.ln-find-cap) { max-width: 54ch; margin: 14px auto 0; color: var(--ink-muted); font-size: 16px; line-height: 1.6; }
.ln-find-search { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; max-width: 560px; height: 54px; margin: 24px auto 0; padding: 0 7px 0 46px; border: 1px solid var(--line-strong); border-radius: 14px; background: rgb(var(--ln-tint) / .03); transition: border-color var(--d-base) ease, box-shadow var(--d-slow) ease; }
.ln-find-search:focus-within { border-color: var(--ink-faint); box-shadow: 0 0 0 4px rgb(var(--ln-tint) / .06); }
.ln-find-search > .ln-i { --ln-i: 18px; position: absolute; left: 16px; color: var(--ink-faint); }
.ln-find-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 16px; outline: none; -webkit-appearance: none; appearance: none; } /* 16px: no zoom on iOS */
.ln-find-search input::placeholder { color: var(--ink-faint); }
.ln-find-go { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--accent); color: var(--accent-ink); transition: transform var(--d-press) var(--ease-out), background var(--d-fast) ease; }
.ln-find-go:active { transform: scale(.96); }
.ln-find-go:focus-visible { outline: 2px solid var(--line-focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .ln-find-go:hover { background: var(--accent-hover); } }
.ln-find-cap { margin: 28px 0 10px; color: var(--ink-faint); font-size: var(--t-sm); }
.ln-find-sample { max-width: 520px; margin: 0 auto; }
.ln-find-sample .sd-classes li { transition: opacity 300ms var(--ease-out); }
.js .ln-find:not(.is-in) .sd-stars::after { width: 0; }
.ln-find .sd-stars::after { transition: width 900ms var(--ease-out) 300ms; }
.ln-find > .ln-inline-link { margin-top: 22px; }

/* Ulifyi: the facts in one line */
.ln-facts-line { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin: 28px 0 0; padding: 0; color: var(--ink-faint); font-size: var(--t-base); list-style: none; }
.ln-facts-line li { display: inline-flex; align-items: center; gap: 8px; }
.ln-facts-line .ln-i { --ln-i: 14px; }

@media (max-width: 959px) {
  .ln-grow-stage { height: 520px; margin-top: 48px; }
  .ln-grow-stage .ln-browser { display: none; }
  .ln-grow-stage .ln-grow-phone { --w: 240px; display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-3deg); }
  .ln-grow-stage .ln-mob-chip { left: 0; top: 10%; }
  .ln-grow-stage .ln-mob-chip.is-two { display: none; }
  .ln-grow-stage .ln-mob-chip.is-three { left: auto; right: 0; bottom: 10%; }
  .ln-grow-points { grid-auto-flow: row; justify-content: center; gap: 9px; }   /* a centred block under the centred phone; the lines stay left-aligned */
  .ln-loop { grid-template-columns: minmax(0, 1fr); gap: 22px; text-align: left; }
  /* Stacked: a hairline from each icon down to the next one, never past the last. */
  .ln-loop::before { display: none; }
  .ln-loop li:not(:last-child)::after { content: ""; position: absolute; left: 19px; top: 38px; bottom: -22px; width: 1px; background: var(--line); }
  .ln-loop li { grid-template-columns: 38px minmax(0, 1fr); justify-items: start; column-gap: 16px; }
  .ln-loop li > b, .ln-loop li > p { grid-column: 2; }
  .ln-loop-ico { grid-row: 1 / 3; }
  .ln-loop-dot { left: 15px; top: 0; }
  .ln-loop-back { display: none; }
  .ln-loop-note { margin-top: 28px; text-align: left; }
  .ln-review { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .ln-review-visual { padding-bottom: 40px; }
  .ln-review-visual .ln-browser { margin-left: 0; }
  .ln-rate { position: relative; width: min(340px, calc(100% - 24px)); margin: -32px 0 0 auto; }   /* always clearly offset from the browser's left edge, never 3 px off it */
  /* Stacked, the card no longer covers the page: it stays bright (the thank-you is readable) and in its column. */
  .ln-review.is-sent .ln-rate { filter: none; transform: none; }
}
@media (max-width: 640px) {
  .ln-grow-stage { height: 470px; }
  .ln-grow-stage .ln-grow-phone { --w: 210px; }
  .ln-find { margin-top: 72px; padding: 24px 18px; }
  .ln-find-sample .sd-card { text-align: left; }
  /* The facts as one left-aligned column, centred as a block: the three icons line up. */
  .ln-facts-line { flex-direction: column; align-items: flex-start; width: fit-content; margin-inline: auto; }
  .ln-facts-line li { align-items: flex-start; }
  .ln-facts-line .ln-i { margin-top: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .ln-grow-stage .ln-mob-chip { opacity: 1; transform: none; }
  .ln-grow-stage .ln-browser, .ln-grow-stage .is-front .ln-browser-view img { transform: none; }
}

/* ── Narrow pages ─────────────────────────────────────────────────────── */
@media (max-height: 800px) and (min-width: 960px) {
  .ln-tour-copy .ln-h2 { font-size: 30px; }
  .ln-chapters { margin-top: 20px; }
  .ln-chapter-tab { padding: 11px 0; }
  .ln-chapter-body .ln-points { display: none; }
  .ln-chapter-body p { padding-bottom: 14px; }
}

@media (max-width: 1080px) {
  .ln-nav { display: none; }
}

@media (max-width: 959px) {
  .ln-tour { height: auto; }
  .ln-tour-sticky { position: static; display: block; height: auto; padding: 140px 0 0; }
  .ln-tour-stage { display: none; }
  .ln-chapters { border-top: 0; }
  .ln-chapter { padding: 28px 0 36px; border-bottom: 1px solid var(--line); }
  .ln-chapter-tab { padding: 0 0 12px; color: var(--ink-muted); font-size: var(--t-md); pointer-events: none; }
  .ln-chapter-bar { display: none; }
  .ln-chapter-body { grid-template-rows: 1fr; opacity: 1; }
  .ln-chapter-body h3 { font-size: 22px; }
  .ln-chapter-slot { display: block; margin-top: 8px; }

  .ln-guide-grid { display: block; margin-top: 40px; }
  .ln-guide-steps::before, .ln-guide-steps::after { top: 0; bottom: 0; }
  .ln-guide-step { min-height: 0; padding: 0 0 56px; opacity: 1; }
  .ln-guide-stage { display: none; }
  .ln-guide-slot { display: block; grid-column: 2; }

  .ln-price-grid, .ln-request-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .ln-request-copy { position: static; }

  .ln-flowmap { grid-template-columns: minmax(0, 1fr); max-width: 460px; }
  .ln-flow-wire { height: 90px; margin: 0; }
  .ln-flow-wire svg { position: absolute; left: 50%; top: 0; width: 90px; height: 40px; transform: translate(-50%, 25px) rotate(90deg); }
  .ln-flow-wire small { top: auto; bottom: 50%; left: 50%; right: auto; margin: 0 0 -8px 26px; }
  .ln-packet { left: 50%; top: 0; margin: 0 0 0 -16px; }
}

@media (max-width: 640px) {
  .ln { --ln-gut: 16px; --ln-header: 58px; }
  .ln-header-cta { height: 32px; padding: 0 12px; font-size: var(--t-base); }
  /* Icon only, but the word stays the link's name for screen readers (display: none would leave it nameless). */
  .ln-link-quiet { position: relative; padding: 0 9px; }
  .ln-link-quiet span { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .ln-hero { padding-top: 48px; }
  .ln-eyebrow { height: auto; min-height: 32px; padding: 6px 10px; font-size: var(--t-sm); }
  .ln-lead { font-size: 16px; }
  .ln-cta { flex-direction: column; align-self: stretch; }
  .ln-cta .btn { width: 100%; }
  .ln-hero-stage { margin-top: 48px; }
  .ln-section { padding-top: 104px; }
  .ln-statement { height: 150vh; }
  .ln-form-row { grid-template-columns: minmax(0, 1fr); }
  .ln-request-card, .ln-price-card { padding: 22px; }
  .ln-win-body { padding: 16px; }
  .ln-progs, .ln-exams { grid-template-columns: minmax(0, 1fr); }
  .ln-facts { grid-template-columns: 1fr 1fr; }
  .ln-facts > div:nth-child(2) { border-right: 0; }
  .ln-facts > div:nth-child(3) { grid-column: 1 / -1; border-top: 1px solid var(--line); }
  .ln-fleet li { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .ln-fleet .ln-chips { display: none; }
  /* Plate on its line, gearbox under it: no "·" left hanging at the end of a wrapped line. */
  .ln-fleet-sep { display: none; }
  .ln-fleet-kind { display: block; }
  /* Start: a hint reads in full (two lines at most), its link goes under it instead of beside it. */
  .ln-hints.is-steps li { grid-template-columns: 28px minmax(0, 1fr); row-gap: 2px; }
  .ln-hints.is-steps li > span:nth-child(2) { overflow: visible; white-space: normal; }
  .ln-hints.is-steps li > a { grid-column: 2; justify-self: start; }
  .ln-team > div { grid-template-columns: 110px minmax(0, 1fr) 52px; gap: 10px; }
  .ln-lessons li { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .ln-guide-step { grid-template-columns: 34px minmax(0, 1fr); gap: 16px; }
  .ln-guide-num { width: 34px; height: 34px; font-size: var(--t-sm); }
  .ln-guide-steps::before, .ln-guide-steps::after { left: 15.5px; }
  .ln-guide-slot { position: relative; z-index: 1; grid-column: 1 / -1; margin-top: 4px; }
  .ln-ev { padding: 4px 5px; font-size: var(--t-xs); white-space: normal; }   /* no type line here, so a name may take two */
  .ln-ev small { display: none; }
  .ln-ev-full { display: none; }
  .ln-ev-short { display: inline; }
  .ln-week-head, .ln-week-grid { grid-template-columns: 40px repeat(5, minmax(0, 1fr)); }
  .ln-week-grid::before { inset: 0 0 0 40px; }
  .ln-ev { left: calc(40px + (100% - 40px) / 5 * (var(--c) - 1) + 2px); width: calc((100% - 40px) / 5 - 4px); }
  .ln-week-times { padding: 4px 4px; }
  .ln-closing { padding: 64px 20px; border-radius: var(--r-lg); }
  .ln-done .ln-next.is-compact { grid-auto-flow: row; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .ln-reveal, .js .ln-enter, .js [data-split] .ln-word { opacity: 1; transform: none; filter: none; animation: none; }
  .ln-hero-stage .ln-scale { transform: none; }
  .ln-screen { transform: none; filter: none; }
  .ln-marquee-track { animation: none; }
  .ln-dot::after { display: none; }
}

/* ── App pieces (hero note, Fahrlehrer/Fahrschüler, Fahrschulseite) ─────
   Loaded before /phone.css, so a device's size (--w) and position go
   through its stage (.ln-who-stage, .ln-grow-stage): `.dv` alone would
   lose to phone.css. The official store badges are Apple's and Google's
   artwork, untouched, each a link to its listing. */
[data-i="timer"] { --m: url("/app/vendor/lucide/timer.svg"); }
.ln-mob-muted { color: var(--ln-slate); }
.ln-mob-new { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 999px; background: var(--ink); color: var(--canvas); font-size: 11px; font-weight: var(--w-semi); letter-spacing: .02em; }
.ln-cta-mob { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-muted); transition: color var(--d-fast) ease; }
@media (hover: hover) and (pointer: fine) { .ln-cta-mob:hover { color: var(--ink); } }
.ln-mob-badges { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.ln-store { position: relative; display: inline-flex; transition: transform var(--d-slow) var(--ease-out); }
.ln-store img { display: block; width: auto; height: 46px; }
.ln-store:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 8px; }
.ln-mob-cta { margin-top: 28px; }

.ln-mob-glow { position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, var(--ln-light-strong), transparent); filter: blur(30px); }
.ln-mob-chip { position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 12px; border: 1px solid rgb(var(--ln-tint) / 0.12); border-radius: 16px; background: rgb(18 22 28 / 0.62); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); box-shadow: 0 20px 40px -12px rgb(0 0 0 / 0.7); white-space: nowrap; animation: ln-mob-bob 6s ease-in-out infinite alternate; transition: transform 900ms cubic-bezier(0.32, 0.72, 0, 1); }
.ln-mob-chip .ln-i { --ln-i: 20px; color: var(--ink); }
.ln-mob-chip strong { display: block; font-size: var(--t-md); font-weight: var(--w-semi); }
.ln-mob-chip small { display: block; color: var(--ink-faint); font-size: var(--t-sm); }
.ln-mob-chip { left: 2%; top: 22%; }
.ln-mob-chip.is-two { left: auto; right: 0; top: auto; bottom: 18%; animation-delay: -3s; }
@keyframes ln-mob-bob { from { translate: 0 -5px; } to { translate: 0 6px; } }
@media (hover: hover) and (pointer: fine) {
  .ln-store:hover { transform: translateY(-2px); }
}
@media (max-width: 640px) {
  .ln-mob-chip { left: 0; }
  .ln-store img { height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .ln-mob-chip { animation: none; } }


/* ── Footer (every public page; markup in src/lib/site-shell.js) ────────
   Brand on the left, three short columns, one quiet line at the bottom.
   No surface of its own: the canvas runs through, a hairline separates. */
.sf { width: min(100% - var(--ln-gut) * 2, var(--ln-max)); margin: 140px auto 0; padding: 56px 0 32px; border-top: 1px solid var(--line); color: var(--ink-faint); font-size: var(--t-md); }
.sf-in { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.sf-logo img { display: block; width: auto; height: 26px; }
.sf-brand p { max-width: 34ch; margin-top: 16px; color: var(--ink-faint); line-height: 1.6; }
.sf-app { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-muted); font-size: var(--t-base); transition: border-color var(--d-fast) ease, color var(--d-fast) ease; }
.sf-app .ln-i { --ln-i: 15px; }
.sf-app .ln-i:last-child { transition: transform var(--d-base) var(--ease-out); }
.sf-h { margin-bottom: 14px; color: var(--ink); font-size: var(--t-base); font-weight: var(--w-semi); }
.sf-col ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sf-col a, .sf-bottom a { color: var(--ink-faint); transition: color var(--d-fast) ease; }
.sf-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line-soft); font-size: var(--t-base); }
.sf-ulifyi { display: inline-flex; align-items: baseline; gap: 8px; }
.sf-ulifyi strong { color: var(--ink-muted); font-family: var(--ln-ulifyi-font); font-size: 14px; font-weight: 400; transition: color var(--d-fast) ease; }
@media (hover: hover) and (pointer: fine) {
  .sf-col a:hover, .sf-bottom a:hover, .sf-ulifyi:hover strong { color: var(--ink); }
  .sf-app:hover { border-color: var(--line-strong); color: var(--ink); }
  .sf-app:hover .ln-i:last-child { transform: translateX(3px); }
}
@media (max-width: 900px) { .sf-in { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sf-brand { grid-column: 1 / -1; } }
@media (max-width: 560px) {
  .sf { margin-top: 100px; padding-top: 40px; }
  .sf-in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .sf-bottom { flex-direction: column-reverse; align-items: flex-start; gap: 12px; }
}


/* ── Desktop-App (#desktop, and the stage on /desktop) ──────────────────
   "FahrschulPortal Büro" in its own window: two real captures of /buero
   inside the app (img/site/desktop-buero-*.webp, taken with the app's
   bridge in place — macOS with its three buttons in the sidebar, Windows
   with its caption buttons over the top right). The Mac in front, Windows
   behind it to the right. Corners as the systems draw them (12 px Mac,
   8 px Windows); the three buttons are grey, as in a window in the
   background — this page has no colour that is not a state.
   On the landing page the stage is an .ln-reveal: the Windows window comes
   out from behind the Mac once the stage is in. /desktop has no reveals and
   shows both at once. Markup: public/index.html, lib/desktop-page.js. */
[data-i="laptop"] { --m: url("/app/vendor/lucide/laptop.svg"); }
[data-i="monitor"] { --m: url("/app/vendor/lucide/monitor.svg"); }
[data-i="printer"] { --m: url("/app/vendor/lucide/printer.svg"); }
[data-i="command"] { --m: url("/app/vendor/lucide/command.svg"); }
[data-i="bell-ring"] { --m: url("/app/vendor/lucide/bell-ring.svg"); }

.ln-desk-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.ln-desk-cta .btn .ln-i:first-child { --ln-i: 17px; }
.ln-desk-tag { display: inline-flex; align-items: center; height: 20px; margin-left: 2px; padding: 0 7px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink-muted); font-size: 11px; font-weight: var(--w-semi); letter-spacing: .02em; }
.ln-section-head > p.ln-desk-note { margin-top: 16px; color: var(--ink-faint); font-size: var(--t-base); }

/* Mac 76 % of the width, Windows 60 %, both 16 : 10; Windows starts 13 %
   of the width higher. Height = 0.13 + 0.76 × 0.625 of the width. */
.ln-desk-stage { position: relative; width: 100%; aspect-ratio: 1000 / 605; margin-top: 64px; }
.ln-desk-stage .ln-stage-glow { inset: 6% 4% 0; }
.ln-dwin { position: absolute; margin: 0; overflow: hidden; background: var(--canvas); }
.ln-dwin img { display: block; width: 100%; height: auto; }
.ln-dwin::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(var(--ln-tint) / 0.13); pointer-events: none; }
.ln-dwin.is-mac { left: 0; top: 21.49%; z-index: 2; width: 76%; border-radius: 12px; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.7), 0 60px 120px -30px rgb(0 0 0 / 0.95), 0 24px 48px -24px rgb(0 0 0 / 0.8); }
.ln-dwin.is-mac::before { content: ""; position: absolute; z-index: 1; left: 12%; right: 12%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--grey-300), transparent); opacity: .45; }
.ln-dwin.is-win { right: 0; top: 0; width: 60%; border-radius: 8px; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.6), 0 40px 90px -30px rgb(0 0 0 / 0.9); }
.ln-dwin.is-win img { filter: brightness(.78); }
.js .ln-desk-stage.ln-reveal .ln-dwin.is-win { transition: transform 1100ms var(--ln-glide) 260ms, opacity 700ms var(--ease-out) 260ms; }
.js .ln-desk-stage.ln-reveal:not(.is-in) .ln-dwin.is-win { opacity: 0; transform: translate3d(-14%, 6%, 0) scale(.96); }

.ln-desk .ln-facts-line { margin-top: 40px; }

@media (max-width: 640px) {
  .ln-desk-cta { margin-top: 26px; }
  .ln-desk-cta .btn { flex: 1 1 140px; }
  /* Mac 92 %, Windows 70 %, 18 % apart: the Mac stays legible. */
  .ln-desk-stage { aspect-ratio: 1000 / 755; margin-top: 44px; }
  .ln-dwin.is-mac { top: 23.84%; width: 92%; border-radius: 9px; }
  .ln-dwin.is-win { width: 70%; border-radius: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .ln-desk-stage.ln-reveal:not(.is-in) .ln-dwin.is-win { opacity: 1; transform: none; }
}