:root {
  color-scheme: light;
  --ink: #12213a;
  --muted: #5d6a7d;
  --line: #dce3ed;
  --surface: #ffffff;
  --soft: #f4f7fb;
  --brand: #245fbd;
  --brand-strong: #17498f;
  --accent: #78a9ef;
  --success: #177359;
  --warning: #855b13;
  --radius: 18px;
  --shadow: 0 18px 55px rgba(22, 49, 86, .11);
  --container: 1180px;
  --section: clamp(4.5rem, 8vw, 7.5rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--surface);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-underline-offset: .2em; }
img, svg, video { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid #90b9f4; outline-offset: 3px; }
.skip-link { position: fixed; inset: .75rem auto auto .75rem; z-index: 100; padding: .7rem 1rem; background: #12213a; color: white; border-radius: 8px; transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.container { width: min(calc(100% - 2rem), var(--container)); margin-inline: auto; }
.site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--header-border); background: var(--header-bg); backdrop-filter: blur(16px); }
.nav-shell { min-height: 76px; display: flex; align-items: center; gap: 2rem; }
.brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; font-size: 1.1rem; font-weight: 760; letter-spacing: -.025em; }
.brand-mark { display: grid; place-items: center; width: 2rem; height: 2rem; color: white; background: var(--brand); border-radius: 10px; font-size: .95rem; }
.main-nav { display: flex; align-items: center; gap: 1.1rem; margin-inline: auto; }
.main-nav a, .language-selector a { color: var(--nav-text); text-decoration: none; font-size: .93rem; font-weight: 620; }
.main-nav a:hover, .language-selector a:hover { color: var(--brand); }
.nav-actions { display: flex; align-items: center; gap: .55rem; }
.nav-actions .button { min-height: 40px; padding: .5rem .85rem; font-size: .9rem; }
.language-selector { display: inline-flex; align-items: center; gap: .38rem; color: var(--language-text); }
.language-selector a { padding: .25rem; border-radius: 6px; }
.language-selector a[aria-current="page"] { color: var(--brand); font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; }
.button { display: inline-flex; justify-content: center; align-items: center; min-height: 44px; padding: .65rem 1rem; border: 1px solid transparent; border-radius: 11px; text-decoration: none; font-weight: 700; cursor: pointer; }
.button-primary { color: white; background: var(--brand); box-shadow: 0 7px 18px rgba(36,95,189,.2); }
.button-primary:hover { background: var(--brand-strong); }
.button:disabled { cursor: not-allowed; opacity: .58; box-shadow: none; }
.button-secondary { color: var(--ink); background: var(--surface); border-color: var(--line); }
.menu-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--ink); }
.hero { overflow: hidden; padding: clamp(5rem, 10vw, 8.5rem) 0 var(--section); background: linear-gradient(180deg, var(--soft) 0%, var(--surface) 88%); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.07fr) minmax(320px, .93fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.eyebrow { margin: 0 0 1rem; color: var(--brand); font-size: .78rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
h1, h2, h3 { margin-top: 0; line-height: 1.12; letter-spacing: -.035em; }
h1 { max-width: 14ch; margin-bottom: 1.35rem; font-size: clamp(2.65rem, 6vw, 5.3rem); }
h2 { margin-bottom: 1rem; font-size: clamp(2rem, 4vw, 3.25rem); }
h3 { margin-bottom: .6rem; font-size: 1.12rem; letter-spacing: -.015em; }
.lead { max-width: 62ch; margin: 0; color: var(--muted); font-size: clamp(1.08rem, 2vw, 1.28rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.trust-line { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; margin-top: 2rem; color: var(--trust-text); font-size: .88rem; }
.trust-line span::before { content: "✓"; margin-right: .45rem; color: var(--success); font-weight: 800; }
/* The hero mockup is a fixed-appearance product screenshot — same intent
   as the Dark-palette comment further down, but every color here is now
   an explicit hardcoded value
   (not a var(--ink)/--muted/--soft token) so nothing inside it can ever
   flip to a light-on-light or dark-text-on-white combination when the
   site's own theme changes. Text/status stay legible in Light, Dark and
   Auto because they never change at all. */
.product-window { position: relative; padding: 1.1rem; border: 1px solid #cdd9ea; border-radius: 24px; background: rgba(255,255,255,.93); box-shadow: var(--shadow); }
.window-bar { display: flex; align-items: center; justify-content: space-between; padding: .2rem .1rem 1rem; color: #5d6a7d; font-size: .78rem; }
.window-dots { display: flex; gap: .35rem; }
.window-dots i { width: .52rem; height: .52rem; border-radius: 50%; background: #cbd6e4; }
.process-card { padding: 1.25rem; border-radius: 16px; color: #12213a; background: #f4f7fb; }
.process-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.status { display: inline-flex; align-items: center; gap: .4rem; padding: .32rem .6rem; border-radius: 999px; color: #14624d; background: #daf2e9; font-size: .75rem; font-weight: 750; }
.process-list { display: grid; gap: .7rem; margin-top: 1.15rem; }
.process-row { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: .8rem; padding: .75rem; border: 1px solid #dce3ed; border-radius: 12px; color: #12213a; background: white; font-size: .85rem; }
.process-row b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: #245fbd; background: #e8f0fc; }
.section { padding: var(--section) 0; }
/* Scoped to betaAccessPage() only: .page-hero already carries its own
   generous top/bottom padding, so stacking the standard .section top
   padding straight after it left a large empty gap between the intro
   copy and the form. Bottom padding is untouched (var(--section)),
   keeping the page's own closing rhythm identical to every other page —
   only the top is pulled in. */
.section-tight-top { padding-top: clamp(1.25rem, 3vw, 2rem); }
.section-soft { background: var(--soft); }
.section-intro { max-width: 720px; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.narrow { max-width: 850px; }
.page-hero { padding: clamp(4rem, 8vw, 7rem) 0; background: linear-gradient(180deg, var(--soft) 0%, var(--surface) 88%); }
.page-hero h1 { max-width: 18ch; font-size: clamp(2.5rem, 5vw, 4.5rem); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.card { padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.card p { margin: 0; color: var(--muted); }
.icon-tile { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 1rem; border-radius: 12px; color: var(--brand); background: var(--icon-tile-bg); font-weight: 800; }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
/* One of the 8 approved product illustrations (public-site/src/assets/
   0N-*.png), framed as a moderate, secondary visual next to real HTML
   heading/text — see visualFrame()/visualSplit() in templates.mjs. Sits
   as one child of an existing .split section (already responsive, no
   extra breakpoint work needed) so the illustration reads as one column
   of an integrated two-column section rather than a separate sticker or
   a full-bleed poster. Deliberately capped well below the column's full
   width (roughly 260–380px on desktop) and centered within it, leaving
   breathing room either side.
   The frame background is a soft, theme-aware tint (var(--visual-frame-
   bg)/-border, defined alongside the other dark-palette tokens below) —
   a faint tinted blue-grey in light mode, a subtly lighter-than-surface
   navy in dark mode — rather than a hard white box, so the illustration
   reads as embedded in the page rather than "glued on". Images
   themselves are never recolored. .section-dark is a fixed-dark accent
   section independent of the site's own light/dark theme (see the
   Dark-palette comment below), so it gets its own explicit override
   further down rather than using the theme-reactive tokens.
   .visual-feature-followup adds generous spacing above a block stacked
   below other content already inside the same section (e.g. the
   workflow steps below the "How it works" intro+illustration, or the
   roadmap cards above the Offline & Auto-Sync section) so illustrations
   never sit flush against neighbouring elements. */
.visual-frame { max-width: clamp(240px, 30vw, 380px); margin-inline: auto; padding: clamp(1.25rem, 3vw, 1.75rem); border: 1px solid var(--visual-frame-border); border-radius: calc(var(--radius) + 2px); background: var(--visual-frame-bg); box-shadow: 0 14px 32px rgba(22,49,86,.05); }
.visual-frame img { display: block; width: 100%; height: auto; }
.visual-feature-followup { margin-top: clamp(2.75rem, 6vw, 4.5rem); }
/* .steps also sets margin: 0 (shorthand) below, which otherwise wins the
   cascade over .visual-feature-followup's margin-top at equal specificity.
   This higher-specificity override restores the intended gap for the
   "How it works" steps list only. */
.steps.visual-feature-followup { margin-top: clamp(2rem, 5vw, 3rem); }
.section-dark .visual-frame { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); box-shadow: none; }
/* Team & roles illustration only ("Klare Rollen statt gemeinsamer
   Zugangsdaten" / "Clear roles instead of shared credentials"), scoped by
   its unique .role-cards sibling so no other .visual-frame is affected. */
.split:has(.role-cards) .visual-frame { max-width: clamp(270px, 34vw, 430px); }
.section-action, .cta-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.use-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.use-strip a { padding: 1.15rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); text-decoration: none; font-weight: 700; }
.use-strip a:hover { border-color: var(--accent); color: var(--brand); }
.steps { display: grid; gap: .8rem; margin: 0; padding: 0; list-style: none; }
.steps li { display: grid; grid-template-columns: 42px 1fr; gap: 1rem; padding: 1.1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.steps li > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: var(--brand); background: var(--icon-tile-bg); font-weight: 800; }
.steps h3, .steps p { margin: 0; }
.steps p { color: var(--muted); }
.section-dark { color: #eef4fc; background: #132541; }
.section-dark .eyebrow { color: #91baf5; }
.section-dark .lead, .section-dark p { color: #bcc9db; }
.check-list { display: grid; gap: .7rem; padding: 0; list-style: none; }
.check-list li::before { content: "✓"; margin-right: .65rem; color: #62d0aa; font-weight: 800; }
.trust-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.trust-grid article { display: grid; gap: .35rem; padding: 1.25rem; border: 1px solid var(--line); border-radius: 14px; }
.trust-grid span, .fine-print { color: var(--muted); }
.fine-print { max-width: 85ch; margin-top: 1.5rem; font-size: .9rem; }
.role-cards, .values { display: grid; gap: 1rem; }
.pricing-preview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.compact-plan { position: relative; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.compact-plan.is-recommended, .plan-card.is-recommended { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.compact-plan p { color: var(--muted); }
.price { color: var(--ink) !important; font-size: 1.45rem; font-weight: 780; }
.price span { font-size: .85rem; font-weight: 600; }
.price-tax { display: block; margin-top: .2rem; color: var(--muted); font-size: .72rem; font-style: normal; font-weight: 650; }
.pricing-tax-note, .annual-price-note { color: var(--muted); font-size: .86rem; }
.pricing-tax-note { margin-top: 1rem; }
.annual-price-note { margin: 1rem 0 1.5rem; text-align: center; }
.annual-saving { display: block; margin-top: .25rem; color: var(--brand-dark); font-size: .76rem; font-style: normal; font-weight: 750; }
.recommendation { display: inline-flex; margin-bottom: .75rem; padding: .3rem .6rem; border-radius: 999px; color: var(--badge-blue-text); background: var(--badge-blue-bg); font-size: .72rem; font-weight: 800; }
.cta-panel { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: clamp(2rem, 5vw, 4rem); border: 1px solid var(--cta-panel-border); border-radius: 24px; background: var(--cta-panel-bg); }
.cta-panel h2 { max-width: 18ch; }
.cta-panel p { max-width: 65ch; color: var(--muted); }
.support-band { padding-top: 2rem; }
.feature-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.use-cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.use-case { scroll-margin-top: 100px; padding: clamp(1.5rem, 4vw, 2.4rem); border: 1px solid var(--line); border-radius: var(--radius); }
.use-case h2 { font-size: 1.8rem; }
.use-case > p:not(.eyebrow), .use-case-support p { color: var(--muted); }
.use-case-support { margin: 1.25rem 0; padding: 1rem; border-radius: 12px; background: var(--soft); }
.use-case-support p { margin-bottom: 0; }
/* Homepage use-case teaser: an <a class="card"> link, so .card's own
   rules (padding/border/background) need an explicit block display and
   un-linked color/underline to read as a card, not an inline text link. */
.card.use-case-teaser { display: block; color: inherit; text-decoration: none; transition: border-color .15s ease; }
.card.use-case-teaser:hover { border-color: var(--accent); }
/* Solutions use-case card: title + one audience sentence + a 3-point
   check-list. .card p already has margin: 0, so the list needs its own
   top spacing to read as a separate group rather than sitting flush
   under the sentence above it. */
.use-case-detail { scroll-margin-top: 100px; }
.use-case-detail .check-list { margin-top: 1rem; }
.text-link { color: var(--brand); font-weight: 750; }
.pricing-section { padding: 2.5rem 0 var(--section); }
.billing-toggle { display: inline-flex; gap: .3rem; margin-bottom: 2rem; padding: .3rem; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); }
.billing-toggle button { min-height: 42px; padding: .55rem 1rem; border: 0; border-radius: 9px; color: var(--muted); background: transparent; cursor: pointer; }
.billing-toggle button[aria-pressed="true"] { color: white; background: var(--brand); }
.plan-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.plan-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 1.35rem; border: 1px solid var(--line); border-radius: var(--radius); }
.plan-card h2 { margin-bottom: .6rem; font-size: 1.45rem; }
.plan-price { min-height: 2.8rem; font-size: 1.35rem; font-weight: 800; }
.plan-price small { font-size: .75rem; font-weight: 600; }
.plan-price .price-tax { margin-top: .2rem; }
.price-request { font-size: 1.15rem; }
.one-time-product { position: relative; margin-bottom: 1.5rem; padding: 1.5rem; border: 1px dashed var(--line); border-radius: var(--radius); background: var(--soft); }
.one-time-badge { display: inline-flex; margin-bottom: .75rem; padding: .3rem .6rem; border-radius: 999px; color: var(--badge-blue-text); background: var(--badge-blue-bg); font-size: .72rem; font-weight: 800; }
.one-time-body { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.one-time-body h2 { margin-bottom: .4rem; font-size: 1.25rem; }
.one-time-includes { grid-auto-flow: column; grid-template-columns: repeat(2, auto); gap: .4rem 1.5rem; margin-top: .75rem; font-size: .85rem; }
.one-time-cta { flex: 0 0 auto; text-align: right; }
.one-time-cta .plan-price { min-height: 0; }
.one-time-cta .price-tax { margin-bottom: .75rem; }
.plan-description { min-height: 5.2rem; color: var(--muted); font-size: .88rem; }
.trial-note { color: var(--brand); font-size: .8rem; font-weight: 750; }
.plan-divider { margin: .7rem 0 1rem; border-top: 1px solid var(--line); }
.plan-limits { display: grid; gap: .6rem; margin: 0; }
.plan-limits div { display: flex; justify-content: space-between; gap: .8rem; font-size: .79rem; }
.plan-limits dt { color: var(--muted); }
.plan-limits dd { margin: 0; text-align: right; font-weight: 750; }
.plan-features { display: grid; gap: .45rem; margin: 1.1rem 0; padding-top: 1rem; border-top: 1px solid var(--line); }
.plan-features > div { display: flex; justify-content: space-between; gap: .5rem; font-size: .79rem; }
.feature-state { display: inline-flex; gap: .25rem; font-weight: 700; }
.feature-state.included { color: var(--success); }
.feature-state.excluded { color: var(--muted); }
.plan-cta { width: 100%; margin-top: auto; }
.catalog-note { color: var(--muted); font-size: .86rem; }
.addon-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.addon-card { display: grid; align-content: space-between; min-height: 210px; padding: 1.3rem; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); }
.addon-card p { margin: 0; color: var(--muted); }
.addon-price { font-weight: 780; }
.availability { justify-self: start; padding: .32rem .58rem; border-radius: 999px; font-size: .72rem; font-weight: 800; }
.availability-coming-soon { color: var(--badge-amber-text); background: var(--badge-amber-bg); }
.availability-available { color: var(--badge-green-text); background: var(--badge-green-bg); }
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.comparison-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: .88rem; }
.comparison-table th, .comparison-table td { padding: .9rem 1rem; border-bottom: 1px solid var(--line); text-align: left; }
.comparison-table thead { background: var(--soft); }
.comparison-table thead span { display: block; color: var(--brand); font-size: .68rem; }
.emphasis-card { border-color: var(--emphasis-border); background: var(--emphasis-bg); }
.faq-list { max-width: 850px; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { padding: 1.3rem 0; font-weight: 750; cursor: pointer; }
.faq-list p { margin-top: 0; color: var(--muted); }
.contact-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr); gap: 3rem; align-items: start; }
.contact-form { display: grid; gap: 1rem; padding: clamp(1.2rem, 4vw, 2rem); border: 1px solid var(--line); border-radius: var(--radius); }
.contact-form label { display: grid; gap: .4rem; font-size: .86rem; font-weight: 700; }
/* Overrides the generic .contact-form label grid above (which stacks a
   field's label text over its input) for the one label that is itself a
   checkbox + its own consent text, not a label-for-a-separate-field —
   without this the checkbox rendered on its own line above the text. */
.contact-form label.settings-checkbox { display: flex; align-items: flex-start; gap: .55rem; font-size: .88rem; font-weight: 400; cursor: pointer; }
.contact-form label.settings-checkbox input[type="checkbox"] { flex-shrink: 0; width: auto; margin: .15rem 0 0; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; padding: .72rem .8rem; border: 1px solid var(--input-border); border-radius: 10px; color: var(--ink); background: var(--surface); }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--brand); outline: 3px solid #d7e7fc; }
.contact-form [aria-invalid="true"] { border-color: #a73333; }
.field-error { color: var(--field-error-text); font-size: .8rem; font-weight: 650; }
.form-note, .form-status { margin: 0; color: var(--muted); font-size: .8rem; }
.form-status:not(:empty) { padding: .85rem 1rem; border-radius: 10px; background: var(--soft); }
.turnstile-panel { display: grid; gap: .55rem; min-width: 0; padding: .9rem; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); }
.turnstile-panel iframe { max-width: 100%; }
.contact-aside { position: sticky; top: 100px; }
.placeholder-badge { display: inline-flex; padding: .35rem .65rem; border-radius: 999px; color: var(--badge-amber-text); background: var(--badge-amber-bg); font-size: .75rem; font-weight: 800; }
.private-beta-badge { display: inline-flex; margin-bottom: .75rem; padding: .35rem .65rem; border-radius: 999px; color: var(--badge-blue-text); background: var(--badge-blue-bg); font-size: .75rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.legal-placeholder p { color: var(--muted); }
.legal-note { margin: 0 0 2rem; padding: 1.25rem; border-radius: 12px; background: var(--soft); }
.legal-note:first-child + * { margin-top: 0; }
.legal-document h2, .legal-document h3, .legal-document h4 { margin-top: 2rem; }
.legal-document p, .legal-document li { color: var(--ink); line-height: 1.6; }
.legal-document .legal-date { color: var(--muted); font-size: .9rem; }
.legal-document ul { padding-left: 1.25rem; }
.legal-table { width: 100%; margin: 1rem 0; border-collapse: collapse; }
.legal-table th, .legal-table td { padding: .55rem .75rem; border: 1px solid var(--line); text-align: left; }
.legal-table th { background: var(--soft); }
.legal-related { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; }
.legal-related a { color: inherit; }
.cookie-dialog { width: min(calc(100% - 2rem), 560px); padding: 1.5rem; border: 0; border-radius: var(--radius); color: var(--ink); background: var(--surface); box-shadow: var(--shadow); }
.cookie-dialog::backdrop { background: rgba(8,20,38,.58); }
.dialog-head { display: flex; justify-content: space-between; gap: 1rem; }
.dialog-head h2 { font-size: 1.5rem; }
.dialog-head button { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); cursor: pointer; }
.footer-link-button { padding: 0; border: 0; color: #bac8db; background: none; text-align: left; cursor: pointer; font-size: .9rem; }
.privacy-notice { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 70; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; max-width: 760px; margin: 0 auto; padding: 1rem 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); background: var(--surface); box-shadow: var(--shadow); }
.privacy-notice p { margin: 0; flex: 1 1 320px; font-size: .88rem; color: var(--muted); }
.privacy-notice-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.privacy-notice-actions a { color: var(--ink); font-size: .88rem; text-decoration: underline; }
/* The notice is position: fixed, so while it's showing it floats over
   whatever content is scrolled to the bottom of the viewport — reserve
   room under the page content so it never lands on top of the last
   interactive control (e.g. a form's submit button). Purely presentational
   (:has(), no script change): it only applies while the notice is actually
   visible, and disappears the instant [data-privacy-notice-close] sets
   hidden = true, via the exact same acknowledgement site.js already does. */
body:has(.privacy-notice:not([hidden])) #main-content { padding-bottom: 6rem; }
.brand-footer { color: white; }
.not-found { min-height: 100vh; display: grid; place-items: center; padding: 2rem; text-align: center; background: var(--soft); }
.site-footer { padding: 4rem 0 2rem; color: #dbe5f3; background: #10203a; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 2rem; }
.footer-title { color: white; font-weight: 750; }
.footer-links { display: grid; gap: .55rem; margin-top: 1rem; }
.footer-links a { color: #bac8db; text-decoration: none; font-size: .9rem; }
.footer-bottom { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.13); color: #93a4bc; font-size: .82rem; }

/* --- Theme switch (dark/light/auto) -------------------------------------
   Compact icon-only utility, positioned in the header next to the
   language selector (see header() in templates.mjs) — content is rendered
   by site.js once the resolved theme is known, see theme-bootstrap.js for
   the pre-paint step that avoids a flash of the wrong theme. */
.theme-switch { position: relative; }
.theme-trigger { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: var(--surface); cursor: pointer; }
.theme-trigger:hover { border-color: var(--accent); color: var(--brand); }
.theme-trigger svg { width: 18px; height: 18px; }
.theme-popover { position: absolute; top: calc(100% + .5rem); right: 0; z-index: 60; display: grid; gap: .15rem; min-width: 168px; padding: .4rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.theme-option { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .55rem .65rem; border: 0; border-radius: 9px; color: var(--ink); background: transparent; font-size: .88rem; font-weight: 620; text-align: left; cursor: pointer; }
.theme-option:hover { background: var(--soft); }
.theme-option[aria-checked="true"] { color: var(--brand); background: var(--soft); font-weight: 750; }
.theme-option-icon { display: grid; place-items: center; width: 20px; height: 20px; flex-shrink: 0; }
.theme-option-icon svg { width: 18px; height: 18px; }

/* --- Dark palette --------------------------------------------------------
   "auto" (no explicit choice) follows the OS preference; an explicit
   choice (data-theme="dark"/"light" on <html>, set by theme-bootstrap.js
   and site.js) always wins over the OS preference. Every dark-specific
   value — including the ones that can't be expressed by the shared
   --ink/--muted/etc. tokens (badges, header glass background, gradients)
   — is defined once here as its own custom property, so the component
   rules further down reference a variable and never need a duplicate
   "system dark" + "explicit dark" copy of themselves. Deliberately NOT
   applied to the product mockup (.product-window, .process-card,
   .process-row and friends) or the already-dark .section-dark/
   .site-footer accent sections — those are
   fixed-appearance illustrations/accents by design, same as a screenshot
   would be, and stay visually identical regardless of site theme. */
:root {
  --header-border: rgba(220,227,237,.8);
  --header-bg: rgba(255,255,255,.92);
  --nav-text: #34435a;
  --language-text: #8995a6;
  --trust-text: #44536a;
  --icon-tile-bg: #e8f0fc;
  --badge-blue-text: #17498f;
  --badge-blue-bg: #deebfc;
  --badge-amber-text: #704d0d;
  --badge-amber-bg: #fff1cc;
  --badge-green-text: #175d43;
  --badge-green-bg: #dff4e9;
  --cta-panel-border: #bcd0ec;
  --cta-panel-bg: linear-gradient(135deg, #edf5ff, white);
  --emphasis-border: #9cbbe6;
  --emphasis-bg: #f6faff;
  --input-border: #b9c5d5;
  --field-error-text: #922c2c;
  --visual-frame-bg: #eef3fb;
  --visual-frame-border: #d8e3f2;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]), :root[data-theme="dark"] {
    --ink: #eef2f7;
    --muted: #9aa7ba;
    --line: #2a3444;
    --surface: #141b28;
    --soft: #0f1520;
    --brand: #6d9df2;
    --brand-strong: #8fb4f5;
    --accent: #4a7fd1;
    --success: #3ec49a;
    --warning: #d0a861;
    --header-border: rgba(42,52,68,.9);
    --header-bg: rgba(11,17,28,.92);
    --nav-text: #c3cddc;
    --language-text: #7c8aa0;
    --trust-text: #b7c3d6;
    --icon-tile-bg: rgba(109,157,242,.16);
    --badge-blue-text: #a9c8f7;
    --badge-blue-bg: rgba(109,157,242,.18);
    --badge-amber-text: #eecf9a;
    --badge-amber-bg: rgba(208,168,97,.18);
    --badge-green-text: #8fe4c3;
    --badge-green-bg: rgba(62,196,154,.16);
    --cta-panel-border: #33445c;
    --cta-panel-bg: linear-gradient(135deg, #182437, #10151f);
    --emphasis-border: #3a4a63;
    --emphasis-bg: #16202f;
    --input-border: #33404f;
    --field-error-text: #e59c96;
    --visual-frame-bg: #1a2740;
    --visual-frame-border: rgba(255,255,255,.10);
  }
}
:root[data-theme="dark"] {
  --ink: #eef2f7;
  --muted: #9aa7ba;
  --line: #2a3444;
  --surface: #141b28;
  --soft: #0f1520;
  --brand: #6d9df2;
  --brand-strong: #8fb4f5;
  --accent: #4a7fd1;
  --success: #3ec49a;
  --warning: #d0a861;
  --header-border: rgba(42,52,68,.9);
  --header-bg: rgba(11,17,28,.92);
  --nav-text: #c3cddc;
  --language-text: #7c8aa0;
  --trust-text: #b7c3d6;
  --icon-tile-bg: rgba(109,157,242,.16);
  --badge-blue-text: #a9c8f7;
  --badge-blue-bg: rgba(109,157,242,.18);
  --badge-amber-text: #eecf9a;
  --badge-amber-bg: rgba(208,168,97,.18);
  --badge-green-text: #8fe4c3;
  --badge-green-bg: rgba(62,196,154,.16);
  --cta-panel-border: #33445c;
  --cta-panel-bg: linear-gradient(135deg, #182437, #10151f);
  --emphasis-border: #3a4a63;
  --emphasis-bg: #16202f;
  --input-border: #33404f;
  --field-error-text: #e59c96;
  --visual-frame-bg: #1a2740;
  --visual-frame-border: rgba(255,255,255,.10);
}

@media (max-width: 1199px) {
  .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Switches to the hamburger nav at the container's own max-width (1180px)
   rather than waiting until items visibly collide — this is what keeps
   narrower desktop windows and iPad landscape (1024px) from ever cramming
   the header's links/buttons together. */
@media (max-width: 1180px) {
  .main-nav, .nav-actions .language-selector, .nav-actions > .button { display: none; }
  .nav-actions { margin-left: auto; }
  .menu-toggle { display: grid; place-items: center; }
  .main-nav[data-open="true"] { position: absolute; inset: 76px 1rem auto; display: grid; gap: 0; padding: .65rem; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
  .main-nav[data-open="true"] a { padding: .8rem; }
  .main-nav[data-open="true"] .mobile-only { display: flex; }
  .main-nav[data-open="true"] .language-selector { padding: .35rem .55rem; }
  .main-nav[data-open="true"] .language-selector a { padding: .45rem .25rem; }
}
@media (min-width: 1181px) { .mobile-only { display: none !important; } }
@media (max-width: 1023px) {
  .hero-grid { grid-template-columns: 1fr; }
  .product-window { max-width: 680px; }
  .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .use-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .addon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .container { width: min(calc(100% - 1.25rem), var(--container)); }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .split, .feature-groups, .use-cases, .pricing-preview, .plan-grid, .addon-grid, .contact-layout { grid-template-columns: 1fr; }
  .trust-grid, .field-grid { grid-template-columns: 1fr; }
  .use-strip { grid-template-columns: 1fr; }
  .hero { padding-top: 4.5rem; }
  .hero-actions .button { width: 100%; }
  .process-row { grid-template-columns: 30px 1fr; }
  .process-row > :last-child { grid-column: 2; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
  .footer-bottom { display: grid; }
  .cta-panel { display: grid; }
  .contact-aside { position: static; }
  .one-time-body { flex-direction: column; align-items: flex-start; }
  .one-time-cta { text-align: left; }
  .one-time-includes { grid-auto-flow: row; grid-template-columns: 1fr; }
  .plan-description { min-height: 0; }
  /* The notice's own text/actions wrap onto extra lines at this width,
     so it needs more reserved space than the desktop/tablet default above. */
  body:has(.privacy-notice:not([hidden])) #main-content { padding-bottom: 9rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}