/* ==========================================================================
   SITE — the header and the parts the public pages share
   ==========================================================================
   Loaded after landing.css on every public page (lib/site-shell.js, and by
   hand in public/index.html and views/die-app.html). The header is
   lib/site-shell.js headerHtml, its script js/header.js.

   The calmer half of the site: no glow, no motion beyond a fade, hairlines
   and the brand's greys. Colour only where the program uses it for a state.
   ========================================================================== */

[data-i="menu"] { --m: url("/app/vendor/lucide/menu.svg"); }
[data-i="x"] { --m: url("/app/vendor/lucide/x.svg"); }
[data-i="handshake"] { --m: url("/app/vendor/lucide/handshake.svg"); }
[data-i="message-square"] { --m: url("/app/vendor/lucide/message-square.svg"); }
[data-i="circle-help"] { --m: url("/app/vendor/lucide/circle-help.svg"); }
[data-i="headset"] { --m: url("/app/vendor/lucide/headset.svg"); }
[data-i="arrow-up-right"] { --m: url("/app/vendor/lucide/arrow-up-right.svg"); }
[data-i="minus"] { --m: url("/app/vendor/lucide/minus.svg"); }
[data-i="life-buoy"] { --m: url("/app/vendor/lucide/life-buoy.svg"); }
[data-i="play"] { --m: url("/app/vendor/lucide/play.svg"); }

/* ── Header ───────────────────────────────────────────────────────────── */
.ln-nav { display: flex; align-items: center; }
.ln-nav-list { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ln-nav-link {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 11px;
  border: 0; border-radius: var(--r-sm); background: none;
  color: var(--ink-muted); font: inherit; font-size: var(--t-md); cursor: pointer;
  transition: color var(--d-fast) ease, background var(--d-fast) ease;
}
.ln-nav-link[aria-current], .ln-dd-btn.is-current, .ln-dd.is-open > .ln-dd-btn { color: var(--ink); }
.ln-nav-link:focus-visible, .ln-dd-item:focus-visible, .ln-dd-foot:focus-visible, .ln-burger:focus-visible { outline: 2px solid var(--ink-muted); outline-offset: 2px; }

.ln-dd { position: relative; }
.ln-dd-btn .ln-i { --ln-i: 14px; opacity: .7; transition: transform var(--d-fast) var(--ease-out); }
.ln-dd.is-open > .ln-dd-btn .ln-i { transform: rotate(180deg); }
.ln-dd-panel {
  position: absolute; left: -12px; top: calc(100% + 12px); z-index: 60; width: 540px; padding: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-dialog);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity var(--d-fast) ease, transform var(--d-fast) var(--ease-out), visibility 0s linear var(--d-fast);
}
/* The way down from the button into the panel stays inside the menu. */
.ln-dd-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.ln-dd.is-open > .ln-dd-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.ln-dd-label { display: none; }
.ln-dd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ln-dd-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: var(--r-md); color: var(--ink); transition: background var(--d-fast) ease; }
.ln-dd-ico {
  display: grid; place-items: center; flex: none; width: 34px; height: 34px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-raised); color: var(--ink-muted);
  transition: color var(--d-fast) ease, border-color var(--d-fast) ease;
}
.ln-dd-item b { display: block; font-size: var(--t-md); font-weight: var(--w-medium); line-height: 1.3; }
.ln-dd-item small { display: block; margin-top: 3px; color: var(--ink-faint); font-size: var(--t-sm); line-height: 1.4; }
.ln-dd-item[aria-current] .ln-dd-ico { color: var(--ink); border-color: var(--line-strong); }
.ln-dd-foot {
  display: flex; align-items: center; gap: 10px; margin: 6px -8px -8px; padding: 13px 20px;
  border-top: 1px solid var(--line-soft); border-radius: 0 0 var(--r-lg) var(--r-lg);
  color: var(--ink-muted); font-size: var(--t-base); transition: color var(--d-fast) ease, background var(--d-fast) ease;
}
.ln-dd-foot small { color: var(--ink-faint); font-size: var(--t-sm); }
.ln-dd-foot .ln-i:last-child { margin-left: auto; transition: transform var(--d-fast) var(--ease-out); }
.ln-nav-mobile-cta { display: none; }
.ln-burger { display: none; }
@media (hover: hover) and (pointer: fine) {
  .ln-nav-link:hover { color: var(--ink); background: var(--surface-hover); }
  .ln-dd-item:hover { background: var(--surface-hover); }
  .ln-dd-item:hover .ln-dd-ico { color: var(--ink); border-color: var(--line-strong); }
  .ln-dd-foot:hover { color: var(--ink); background: var(--surface-hover); }
  .ln-dd-foot:hover .ln-i:last-child { transform: translateX(3px); }
}
@media (min-width: 1024px) and (max-width: 1180px) {
  .ln-header-in { gap: 18px; }
  .ln-nav-link { padding: 0 9px; }
}

/* Below 1024 px: one sheet under the header, every menu an open list. */
@media (max-width: 1023px) {
  .ln-burger {
    display: inline-grid; place-items: center; width: 36px; height: 36px; margin-left: 2px;
    border: 1px solid var(--line); border-radius: var(--r-sm); background: none; color: var(--ink); cursor: pointer;
  }
  .ln-nav {
    position: fixed; left: 0; right: 0; top: var(--ln-header); bottom: 0; z-index: 49;
    display: none; flex-direction: column; align-items: stretch; gap: 28px;
    padding: 8px var(--ln-gut) 40px; overflow-y: auto; overscroll-behavior: contain;
    background: var(--canvas); border-top: 1px solid var(--line);
  }
  .ln-header.is-menu-open .ln-nav { display: flex; animation: ln-sheet-in var(--d-fast) var(--ease-out); }
  .ln-header.is-menu-open { border-bottom-color: var(--line); }
  .ln-nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .ln-nav-list > li { border-bottom: 1px solid var(--line-soft); }
  .ln-nav-list > li > .ln-nav-link { width: 100%; height: 54px; padding: 0; color: var(--ink); font-size: 17px; font-weight: var(--w-medium); }
  .ln-dd-btn { display: none !important; }
  .ln-dd-label { display: block; padding: 20px 0 4px; color: var(--ink-faint); font-size: var(--t-sm); font-weight: var(--w-medium); }
  .ln-dd-panel { position: static; width: auto; padding: 0 0 12px; border: 0; border-radius: 0; background: none; box-shadow: none; opacity: 1; visibility: visible; transform: none; }
  .ln-dd-panel::before { display: none; }
  .ln-dd-grid { grid-template-columns: 1fr; }
  .ln-dd-item { padding: 10px 0; }
  .ln-dd-foot { margin: 0; padding: 12px 0; border: 0; border-radius: 0; }
  .ln-nav-mobile-cta { display: grid; gap: 10px; }
  .ln-nav-mobile-cta .btn { justify-content: center; }
}
@keyframes ln-sheet-in { from { opacity: 0; transform: translateY(-6px); } }
html.ln-menu-lock, html.ln-menu-lock body { overflow: hidden; }
@media (max-width: 520px) {
  .ln-header-cta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ln-header.is-menu-open .ln-nav { animation: none; }
}

/* ── Page hero (every site page, and the landing page) ────────────────── */
.st-hero { width: min(100% - var(--ln-gut) * 2, 880px); margin: 0 auto; padding: 104px 0 0; text-align: center; }
.st-hero.is-home { position: relative; isolation: isolate; padding-top: 128px; }
/* The landing page's hero keeps its light: the product's ruled paper,
   fading out from the headline, and a soft slate glow behind it. Light is
   added, never colour (landing.css, "Rules for the light"). Both reach the
   full width of the window; html clips the overflow. */
.st-hero.is-home::before, .st-hero.is-home::after { content: ""; position: absolute; z-index: -1; left: 50%; pointer-events: none; }
.st-hero.is-home::before {
  top: 0; width: 100vw; height: 760px; transform: translateX(-50%);
  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; background-position: center top;
  -webkit-mask-image: radial-gradient(60% 55% at 50% 30%, #000 20%, transparent 100%);
  mask-image: radial-gradient(60% 55% at 50% 30%, #000 20%, transparent 100%);
}
.st-hero.is-home::after {
  top: 40px; width: min(1100px, 120vw); height: 520px; transform: translateX(-50%);
  border-radius: 50%; background: radial-gradient(closest-side, var(--ln-light-strong), transparent);
  filter: blur(60px);
}
.st-hero.is-left { margin: 0; text-align: left; }
.st-title { font-size: clamp(38px, 5.2vw, 62px); font-weight: var(--w-semi); line-height: 1.05; letter-spacing: -0.045em; text-wrap: balance; }
.st-title.is-display { font-size: clamp(44px, 6.6vw, 82px); line-height: 1.02; letter-spacing: -0.05em; }
.st-lead { max-width: 60ch; margin: 24px auto 0; color: var(--ink-muted); font-size: 18px; line-height: 1.6; }
.st-actions { justify-content: center; margin-top: 36px; }
.st-note { margin-top: 20px; color: var(--ink-faint); font-size: var(--t-md); line-height: 1.5; }
.st-note .ln-i { margin-right: 7px; vertical-align: -3px; }
.st-hero.is-left .st-note { text-align: left; }
.st-note .mono { color: var(--ink-muted); }

/* ── Partners under the hero ──────────────────────────────────────────── */
.st-partners { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 80px; padding-top: 32px; border-top: 1px solid var(--line-soft); }
.st-partners-label { color: var(--ink-faint); font-size: var(--t-sm); }
.st-partners-list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 24px 56px; margin: 0; padding: 0; list-style: none; }
.st-partners-list a { display: block; padding: 6px; border-radius: var(--r-sm); }
.st-logo { display: block; width: auto; filter: brightness(0) invert(1); opacity: .72; transition: opacity var(--d-fast) ease; }
.st-partners-more { color: var(--ink-muted); font-size: var(--t-base); }
@media (hover: hover) and (pointer: fine) { .st-partners-list a:hover .st-logo { opacity: 1; } }

/* ── Sections ─────────────────────────────────────────────────────────── */
.st-section { width: min(100% - var(--ln-gut) * 2, var(--ln-max)); margin: 0 auto; padding: 128px 0 0; }
.st-section.st-first, .ln-section.st-first { padding-top: 80px; }
.st-head { max-width: 720px; margin: 0 auto; text-align: center; }
.st-head > p { max-width: 60ch; margin: 18px auto 0; color: var(--ink-muted); font-size: 17px; line-height: 1.6; }
.st-head.is-left { margin: 0; text-align: left; }
.st-head.is-left > p { margin-left: 0; }
.st-head .ln-inline-link { margin-top: 22px; }
.st-center { margin-top: 36px; text-align: center; }

.st-card-ico {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-raised); color: var(--ink);
}
.st-checks { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.st-checks li { display: flex; gap: 10px; color: var(--ink-muted); font-size: var(--t-md); line-height: 1.45; }
.st-checks .ln-i { --ln-i: 15px; margin-top: 3px; color: var(--ink); }

.st-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 48px 0 0; padding: 0; list-style: none; }
.st-grid.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 920px; margin-inline: auto; }
.st-card { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.st-card h3 { font-size: 18px; font-weight: var(--w-semi); letter-spacing: -0.01em; }
.st-card > p { color: var(--ink-muted); font-size: var(--t-md); line-height: 1.6; }
.st-card .ln-inline-link { margin-top: auto; padding-top: 6px; }

/* ── The three parts on the landing page ──────────────────────────────── */
.st-pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 56px; }
.st-pillar { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.st-pillar.is-wide { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); grid-template-rows: none; align-items: stretch; }
.st-pillar-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 32px; }
.st-pillar-copy h3 { margin-top: 4px; font-size: 22px; font-weight: var(--w-semi); letter-spacing: -0.02em; }
.st-pillar-copy > p { color: var(--ink-muted); font-size: var(--t-md); line-height: 1.6; }
.st-pillar-copy .ln-inline-link { margin-top: auto; padding-top: 8px; }
.st-pillar-media { position: relative; margin: 0; overflow: hidden; }

/* The pictures: real captures in the site's own frames (landing.css
   .ln-desk-stage and .ln-browser, phone.css .dv), on a stage of ruled paper
   and light. The stage runs out at the bottom into the card. */
.st-stage {
  isolation: isolate; min-height: 300px;
  background:
    radial-gradient(60% 70% at 50% 35%, var(--ln-light-strong), transparent 70%),
    var(--surface-raised);
  border-bottom: 1px solid var(--line-soft);
}
.st-stage::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(to right, var(--line-soft) 1px, transparent 1px), linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent);
  mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent);
}
.st-stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 56px; background: linear-gradient(to bottom, transparent, var(--surface-raised)); pointer-events: none; }

/* Büro: Mac in front, Windows behind, as on /desktop. */
.st-stage.is-desk { display: flex; align-items: center; padding: 48px 0 40px 40px; border-bottom: 0; border-left: 1px solid var(--line-soft); }
.st-stage.is-desk::after { display: none; }
.st-stage.is-desk .ln-desk-stage { flex: none; width: 116%; margin: 0; }

/* App: two iPhones, the Fahrlehrer's in front, cut by the card's edge. */
.st-stage.is-phones { height: 340px; }
.st-phone { position: absolute; }
.st-stage.is-phones .st-phone { --w: 200px; top: 40px; }
.st-stage.is-phones .is-front { left: calc(50% - 175px); z-index: 2; }
.st-stage.is-phones .is-back { left: calc(50% - 15px); top: 76px; opacity: .9; }

/* Fahrschulseite: the page in a browser, the same page on a phone. */
.st-stage.is-site { height: 340px; }
.st-site-browser { position: absolute; left: 36px; right: -60px; top: 40px; }
.st-site-browser .ln-browser-view { height: 420px; }
.st-stage.is-site .is-site-phone { --w: 132px; left: auto; right: 28px; top: 120px; z-index: 2; }

.st-stores { display: flex; flex-wrap: wrap; gap: 10px; }
.st-stores img { display: block; width: auto; height: 40px; }

/* ── Steps ────────────────────────────────────────────────────────────── */
.st-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 48px 0 0; padding: 0; list-style: none; }
.st-steps li { padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.st-step-num { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line-strong); border-radius: 50%; font-family: var(--font-mono); font-size: var(--t-sm); }
.st-steps h3 { margin-top: 18px; font-size: 17px; font-weight: var(--w-semi); }
.st-steps p { margin-top: 8px; color: var(--ink-muted); font-size: var(--t-md); line-height: 1.6; }

/* ── Bands: the price teaser and the closing call ─────────────────────── */
.st-teaser, .st-band { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 40px 44px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.st-band { width: min(100% - var(--ln-gut) * 2, var(--ln-max)); margin: 128px auto 0; }
.st-band-title { font-size: clamp(24px, 2.6vw, 32px); font-weight: var(--w-semi); line-height: 1.15; letter-spacing: -0.03em; }
.st-teaser p, .st-band p { max-width: 58ch; margin-top: 10px; color: var(--ink-muted); font-size: 16px; line-height: 1.6; }
.st-teaser .ln-cta, .st-band .ln-cta { flex: none; margin-top: 0; justify-content: flex-end; }
.st-faq { margin-top: 40px; }

/* ── /preise ──────────────────────────────────────────────────────────── */
.st-price { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 56px; align-items: start; padding-top: 72px; }
.st-price-card { padding: 34px; border: 1px solid var(--line-strong); border-radius: 20px; background: var(--surface); }
.st-price-top { display: flex; align-items: center; gap: 12px; }
.st-price-top h2 { font-size: 17px; font-weight: var(--w-medium); }
.st-price-value { margin-top: 28px; font-size: 56px; font-weight: var(--w-semi); line-height: 1; letter-spacing: -0.045em; }
.st-price-value span { margin-left: 10px; color: var(--ink-muted); font-size: 16px; font-weight: var(--w-regular, 400); letter-spacing: 0; }
.st-price-sub { margin-top: 12px; color: var(--ink-faint); font-size: var(--t-md); }
.st-price-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin: 28px 0; }
.st-price-card .st-checks { padding-top: 24px; border-top: 1px solid var(--line-soft); }
.st-points { display: grid; gap: 32px; margin: 0; padding: 8px 0 0; list-style: none; }
.st-points li { display: flex; gap: 18px; }
.st-points h3 { font-size: 17px; font-weight: var(--w-semi); }
.st-points p { margin-top: 6px; color: var(--ink-muted); font-size: var(--t-md); line-height: 1.6; }
.st-table { margin-top: 48px; border-top: 1px solid var(--line); }
.st-table-row { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.st-table-row h3 { font-size: 16px; font-weight: var(--w-semi); }
.st-table-row ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 32px; margin: 0; padding: 0; list-style: none; }
.st-table-row li { display: flex; gap: 10px; color: var(--ink-muted); font-size: var(--t-md); }
.st-table-row .ln-i { --ln-i: 15px; margin-top: 3px; color: var(--ink); }

/* ── /kontakt ─────────────────────────────────────────────────────────── */
.st-contact {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "intro form" "more form"; grid-template-rows: auto 1fr;
  gap: 0 72px; align-items: start; width: min(100% - var(--ln-gut) * 2, var(--ln-max)); margin: 0 auto; padding: 88px 0 0;
}
.st-contact-intro { grid-area: intro; }
.st-contact-intro .st-lead { margin-left: 0; }
.st-contact .st-form-card { grid-area: form; }
.st-contact-more { grid-area: more; }
.st-next { margin-top: 36px; }
.st-channels { display: grid; gap: 8px; margin-top: 40px; }
.st-channel { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); transition: background var(--d-fast) ease, border-color var(--d-fast) ease; }
.st-channel b { display: block; font-size: var(--t-md); font-weight: var(--w-medium); }
.st-channel small { display: block; margin-top: 2px; color: var(--ink-faint); font-size: var(--t-sm); }
.st-form-title { margin-bottom: 22px; font-size: 20px; font-weight: var(--w-semi); letter-spacing: -0.015em; }
.st-form-note { margin-top: -8px; color: var(--ink-faint); font-size: var(--t-sm); line-height: 1.5; }
.st-form-card { scroll-margin-top: calc(var(--ln-header) + 24px); }
.st-aside { padding-top: 64px; color: var(--ink-muted); text-align: center; }
.st-aside p { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
@media (hover: hover) and (pointer: fine) {
  .st-channel:hover { background: var(--surface-hover); border-color: var(--line-strong); }
}

/* ── /partner ─────────────────────────────────────────────────────────── */
.st-partner-list { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.st-partner { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); scroll-margin-top: calc(var(--ln-header) + 24px); }
.st-partner-logo { display: grid; place-items: center; padding: 48px 40px; border-right: 1px solid var(--line-soft); background: var(--surface-raised); }
.st-partner-logo .st-logo { max-width: 100%; height: auto; opacity: .9; }
.st-partner-body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 34px; }
.st-partner-body h2 { font-size: 24px; font-weight: var(--w-semi); letter-spacing: -0.02em; }
.st-partner-meta { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-faint); font-size: var(--t-md); }
.st-partner-body > p:not(.st-partner-meta) { max-width: 62ch; color: var(--ink-muted); font-size: var(--t-md); line-height: 1.6; }
.st-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 4px; padding: 0; list-style: none; }
.st-tags li { padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-muted); font-size: var(--t-sm); }

/* ── Smaller screens ──────────────────────────────────────────────────── */
@media (max-width: 959px) {
  .st-pillars, .st-pillar.is-wide { grid-template-columns: minmax(0, 1fr); }
  .st-pillar.is-wide { grid-template-rows: auto auto; }
  .st-pillar.is-wide .st-pillar-media { order: -1; }
  .st-stage.is-desk { padding: 32px 0 28px 24px; border-left: 0; border-bottom: 1px solid var(--line-soft); }
  .st-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-steps { grid-template-columns: minmax(0, 1fr); }
  .st-teaser, .st-band { flex-direction: column; align-items: flex-start; padding: 32px; }
  .st-price, .st-contact { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .st-contact { grid-template-areas: "intro" "form" "more"; grid-template-rows: none; gap: 40px; }
  .st-table-row { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .st-partner { grid-template-columns: minmax(0, 1fr); }
  .st-partner-logo { padding: 40px 32px; border-right: 0; border-bottom: 1px solid var(--line-soft); }
}
@media (max-width: 640px) {
  .st-hero { padding-top: 64px; }
  .st-hero.is-home { padding-top: 72px; }
  .st-hero.is-home::before { height: 620px; background-size: 44px 44px; }
  .st-hero.is-home::after { height: 420px; }
  .st-lead { font-size: 16.5px; }
  .st-actions .btn { flex: 1 1 100%; justify-content: center; }
  .st-section { padding-top: 96px; }
  .st-section.st-first, .ln-section.st-first { padding-top: 56px; }
  .st-grid, .st-grid.is-two, .st-table-row ul { grid-template-columns: minmax(0, 1fr); }
  .st-card, .st-steps li, .st-pillar-copy, .st-partner-body { padding: 24px; }
  .st-teaser, .st-band { padding: 26px 24px; }
  .st-teaser .ln-cta, .st-band .ln-cta { width: 100%; }
  .st-teaser .btn, .st-band .btn { flex: 1 1 100%; justify-content: center; }
  .st-band { margin-top: 96px; }
  .st-stage.is-phones, .st-stage.is-site { height: 290px; }
  .st-stage.is-phones .st-phone { --w: 170px; top: 32px; }
  .st-stage.is-phones .is-front { left: calc(50% - 150px); }
  .st-stage.is-phones .is-back { left: calc(50% - 12px); top: 64px; }
  .st-site-browser { left: 20px; top: 32px; }
  .st-stage.is-site .is-site-phone { --w: 112px; right: 16px; top: 104px; }
  .st-partners { margin-top: 56px; }
  .st-price-value { font-size: 46px; }
  .st-contact { padding-top: 56px; }
}

/* The closing band already ends the page: the footer follows closer. */
main:has(> .st-band:last-child) + .sf { margin-top: 96px; }