/* Partnernetz. Farben sind die Stitch-Tokens (src/theme/stitch.css), hier gespiegelt, weil diese
   Seiten bewusst ausserhalb des App-Bundles liegen. Playfair nur fuer Ueberschriften, Gelesenes in
   Manrope; die grosse Goldflaeche nur fuer die EINE Hauptaktion je Ansicht. */
@font-face { font-family: Manrope; font-weight: 200 800; font-display: swap; src: url("/fonts/manrope-latin.woff2") format("woff2"); }
@font-face { font-family: Manrope; font-weight: 200 800; font-display: swap; src: url("/fonts/manrope-latin-ext.woff2") format("woff2"); unicode-range: U+0100-024F; }
@font-face { font-family: Playfair; font-weight: 400 900; font-display: swap; src: url("/fonts/playfair-normal-latin.woff2") format("woff2"); }
:root {
  --ground: #fff8f3; --card: #fffdfa; --line: #efe4d8; --text: #1e1b18; --muted: #6b645c;
  --accent: #7f5f24; --champagne: #c29447; --sel: #1e1b18; --sel-fg: #fff8f3;
  --action: linear-gradient(170deg, #7a5e1b 0%, #8a6a1f 38%, #7a5e1b 100%); --action-fg: #fff;
  --ok: #2f6b4a; --warn: #8a5a12; --bad: #a33a2c; --r: 14px; --s: 0 1px 2px rgba(60,40,10,.05);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0f131d; --card: #171b26; --line: rgba(217,186,128,.15); --text: #f8f9fa; --muted: #a0a6b5;
    --accent: #d9ba80; --champagne: #d9ba80; --sel: rgba(217,186,128,.16); --sel-fg: #d9ba80;
    --action: #d9ba80; --action-fg: #0f131d; --ok: #7fc8a0; --warn: #e5b567; --bad: #ef9a8d; --s: none;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--text); font: 400 16px/1.6 Manrope, system-ui, sans-serif; }
a { color: var(--accent); }
h1, h2, h3 { line-height: 1.15; margin: 0; }
h1, h2 { font-family: Playfair, Georgia, serif; font-weight: 700; letter-spacing: -.01em; }
h3 { font-weight: 700; font-size: 1.05rem; }
p { margin: 0; }
.wrap { width: min(1120px, 100% - 40px); margin-inline: auto; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.num { font-variant-numeric: tabular-nums; }

/* Knoepfe */
button, .btn { font: inherit; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--text); font-weight: 600; text-decoration: none; cursor: pointer; transition: border-color .15s, transform .1s; }
.btn:hover { border-color: var(--champagne); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: default; }
.btn.main { background: var(--action); color: var(--action-fg); border: 0; }
.btn.danger { color: var(--bad); }
.btn.sm { min-height: 36px; padding: 0 12px; font-size: .875rem; border-radius: 10px; }
:focus-visible { outline: 2px solid var(--champagne); outline-offset: 2px; }

/* Formulare */
label { display: block; font-weight: 600; font-size: .875rem; margin-bottom: 14px; }
label .hint { display: block; font-weight: 400; color: var(--muted); margin-top: 2px; }
input, select, textarea { display: block; width: 100%; margin-top: 6px; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--ground); color: var(--text); font: 400 1rem/1.4 Manrope, system-ui, sans-serif; }
input[type=checkbox] { display: inline-block; width: 18px; min-height: 18px; margin: 0 8px 0 0; vertical-align: -3px; accent-color: var(--accent); }
textarea { min-height: 96px; resize: vertical; }
.grid2 { display: grid; gap: 0 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.err { color: var(--bad); font-size: .9rem; margin: 8px 0; min-height: 1.2em; }

/* Karten und Tabellen */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; box-shadow: var(--s); }
.stats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; box-shadow: var(--s); }
.stat b { display: block; font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; margin-top: 2px; overflow-wrap: anywhere; }
.stat span { color: var(--muted); font-size: .8125rem; }
.stat.hi b { color: var(--accent); }
.tw { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th { text-align: start; font-weight: 600; color: var(--muted); font-size: .8125rem; white-space: nowrap; }
th, td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
td.r, th.r { text-align: end; font-variant-numeric: tabular-nums; }
.tag { display: inline-block; padding: 1px 9px; border-radius: 99px; font-size: .75rem; font-weight: 600; border: 1px solid var(--line); white-space: nowrap; }
.tag.ok { color: var(--ok); border-color: currentColor; }
.tag.warn { color: var(--warn); border-color: currentColor; }
.tag.bad { color: var(--bad); border-color: currentColor; }
.empty { padding: 28px 16px; text-align: center; color: var(--muted); }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.between { justify-content: space-between; }
.stack > * + * { margin-top: 16px; }
.mono { font-family: ui-monospace, Menlo, monospace; font-size: .8125rem; overflow-wrap: anywhere; }
.pager { display: flex; gap: 8px; justify-content: flex-end; align-items: center; margin-top: 10px; }
.banner { padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); font-size: .9rem; }
.banner.warn { border-color: var(--warn); }

/* Portal-Rahmen */
.shell { display: grid; grid-template-columns: 228px 1fr; min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 18px 12px; border-inline-end: 1px solid var(--line); background: var(--card); display: flex; flex-direction: column; gap: 2px; }
.brand { display: flex; gap: 10px; align-items: center; font-weight: 700; padding: 4px 10px 14px; text-decoration: none; color: var(--text); font-size: .95rem; line-height: 1.2; }
.brand i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--champagne); }
.nav { display: block; padding: 9px 12px; border-radius: 10px; color: var(--text); text-decoration: none; font-weight: 500; font-size: .9375rem; transition: background .15s, color .15s; }
.nav:hover { background: var(--ground); }
.nav.on { background: var(--sel); color: var(--sel-fg); font-weight: 600; }
.side .end { margin-top: auto; padding-top: 12px; }
.content { padding: 26px clamp(16px, 3vw, 36px) 60px; min-width: 0; }
.content h1 { font-size: 1.75rem; margin-bottom: 18px; }
.content h2 { font-size: 1.2rem; margin: 26px 0 12px; font-family: Manrope, system-ui, sans-serif; font-weight: 700; letter-spacing: 0; }
.fade { animation: fade .22s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } *, *::before, *::after { transition: none !important; animation: none !important; } }
@media (max-width: 820px) {
  .shell { display: block; }
  .side { position: sticky; z-index: 5; height: auto; flex-direction: row; overflow-x: auto; padding: 8px 10px; border-inline-end: 0; border-bottom: 1px solid var(--line); gap: 4px; }
  .brand { display: none; }
  .nav { white-space: nowrap; padding: 8px 10px; }
  .side .end { margin: 0; padding: 0; }
}

/* Dashboard: eigener Stand, erste Schritte, Vorschau */
.home { display: grid; grid-template-columns: 1fr minmax(240px, 340px); gap: 24px 36px; align-items: end; padding: 26px clamp(18px, 3vw, 32px); margin-bottom: 18px; border-radius: 18px; background: #0f131d; color: #f8f9fa; border-bottom: 3px solid #d9ba80; animation: fade .35s ease; }
.home-hi { color: #d9ba80; font-weight: 600; }
.home-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-top: 6px; }
.home .big { font-size: clamp(2.6rem, 6vw, 4rem); color: #fff; font-variant-numeric: lining-nums tabular-nums; }
.home-sum span { color: #a0a6b5; }
.home-pay { color: #a0a6b5; }
.home-pay b { color: #fff; font-variant-numeric: tabular-nums; }
.home .track { margin-top: 8px; background: rgba(255,255,255,.14); }
.home .track i { background: #d9ba80; }
.start { margin-bottom: 26px; }
.start h2 { margin: 0 !important; }
.start ol { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px 22px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.start li { display: flex; gap: 10px; align-items: center; font-weight: 600; }
.start li a { color: var(--text); text-decoration: none; }
.start li a:hover { color: var(--accent); }
.start li i { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); }
.start li.ok i { border-color: var(--ok); background: var(--ok); box-shadow: inset 0 0 0 3px var(--card); }
.start li.ok a { color: var(--muted); font-weight: 500; text-decoration: line-through; }
.earn { margin-top: 30px; padding: clamp(18px, 3vw, 30px); }
.earn h2 { margin: 0 0 6px !important; font-family: Playfair, Georgia, serif !important; font-size: clamp(1.5rem, 3vw, 2rem) !important; }
.earn > .muted { margin-bottom: 22px; }
.earn .stack-c { height: clamp(220px, 34vh, 320px); }
.earn-sc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 20px; }
.sc { text-align: start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--ground); color: var(--text); cursor: pointer; transition: border-color .15s, transform .15s; }
.sc:hover { border-color: var(--champagne); transform: translateY(-1px); }
.sc[aria-pressed=true] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.sc b { display: block; font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.sc span { display: block; font-size: .8125rem; color: var(--muted); line-height: 1.3; margin-top: 2px; }
.earn-goal { margin: 16px 0 8px; font-weight: 600; }

/* Werbematerial */
.mat-f { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.mat-g { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); align-items: start; grid-auto-flow: dense; }
.mat { display: flex; flex-direction: column; gap: 10px; padding: 14px; animation: fade .3s ease; }
.mat.txt { grid-column: span 2; }
.mat-img { display: block; width: 100%; border-radius: 10px; overflow: hidden; background: var(--line); }
.mat-img img { display: block; width: 100%; height: auto; max-height: 340px; object-fit: contain; transition: transform .25s ease; }
.mat-img:hover img { transform: scale(1.02); }
video.mat-img { aspect-ratio: 9 / 16; max-height: 460px; object-fit: contain; background: #000; }
.mat > .row.between { flex-wrap: nowrap; align-items: flex-start; }
.mat-body { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: .9rem; margin: 0; max-height: 320px; overflow: auto; }
.mat-body.mono { font: .8125rem/1.5 ui-monospace, Menlo, monospace; }
/* Neben einem Medium ist der Text Beigabe: begrenzt, damit die Karten im Raster gleich ruhig bleiben. */
.mat:not(.txt) .mat-body { max-height: 8.5em; padding: 10px 12px; border-radius: 10px; background: var(--ground); }
@media (max-width: 620px) { .mat.txt { grid-column: auto; } }

/* Onboarding */
dialog.ob { width: min(520px, 100vw - 24px); padding: 0; overflow: hidden; border-radius: 18px; box-shadow: 0 30px 80px rgba(10,8,4,.35); }
dialog.ob[open] { animation: obIn .35s cubic-bezier(.2,.8,.2,1); }
@keyframes obIn { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.ob-bar { height: 4px; background: var(--line); }
.ob-bar i { display: block; height: 100%; background: var(--accent); transition: width .35s ease; }
.ob-body { padding: 26px 28px 8px; min-height: 250px; }
.ob-body h2 { font-family: Playfair, Georgia, serif; font-size: 1.8rem; line-height: 1.15; margin: 8px 0 12px; }
.ob-body p + p { margin-top: 12px; }
.ob-code { font-size: 1.7rem; font-weight: 800; letter-spacing: .04em; color: var(--accent); overflow-wrap: anywhere; }
.ob-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; }
.ob-nums b { display: block; font-size: 1.9rem; font-weight: 800; line-height: 1.1; color: var(--accent); font-variant-numeric: tabular-nums; }
.ob-nums span { display: block; font-size: .8125rem; color: var(--muted); line-height: 1.3; margin-top: 4px; }
.ob-prods { display: grid; gap: 10px; margin-top: 14px; }
.ob-p { justify-content: flex-start; min-height: 56px; width: 100%; }
.ob-p img { border-radius: 8px; }
.ob-ok { color: var(--ok); font-weight: 700; margin-top: 12px; }
.ob-foot { padding: 14px 28px 24px; }
@media (max-width: 860px) { .home { grid-template-columns: 1fr; } .earn-sc { grid-template-columns: 1fr; } }

/* Dialog */
dialog { border: 1px solid var(--line); border-radius: var(--r); background: var(--card); color: var(--text); padding: 22px; width: min(560px, 100vw - 24px); max-height: 88vh; }
dialog::backdrop { background: rgba(15, 12, 8, .45); }
dialog h3 { margin-bottom: 14px; font-size: 1.15rem; }
.toast { position: fixed; bottom: 18px; inset-inline-start: 50%; transform: translateX(-50%); background: var(--text); color: var(--ground); padding: 10px 16px; border-radius: 10px; font-size: .9rem; z-index: 50; max-width: 90vw; }

/* Chart */
.chart { width: 100%; height: auto; display: block; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: .8125rem; color: var(--muted); margin-top: 8px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 6px; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.seg button { border: 1px solid var(--line); background: var(--card); color: var(--text); border-radius: 9px; padding: 6px 11px; font-size: .8125rem; font-weight: 600; cursor: pointer; }
.seg button.on { background: var(--sel); color: var(--sel-fg); border-color: transparent; }
.track { height: 8px; border-radius: 9px; background: var(--line); overflow: hidden; }
.track i { display: block; height: 100%; background: var(--champagne); border-radius: 9px; animation: grow .9s cubic-bezier(.2,.8,.2,1); }
@keyframes grow { from { width: 0; } }

/* Auth-Seiten */
.auth { max-width: 460px; margin: 0 auto; padding: 44px 18px 60px; }
.auth.wide { max-width: 680px; }
.auth h1 { font-size: 1.9rem; margin-bottom: 8px; }

/* Anmeldung mit Google und Apple */
.social { max-width: 400px; margin: 18px auto 0; }
.remember { font-weight: 500; font-size: .9375rem; margin: 0 0 14px; }
#g-btn { min-height: 44px; display: flex; justify-content: center; }
.btn.apple { width: 100%; margin-top: 10px; background: #000; color: #fff; border-color: #000; }
.social .err:empty { display: none; }
.social-or { display: flex; align-items: center; gap: 12px; margin-top: 18px; color: var(--muted); font-size: .875rem; }
.social-or::before, .social-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
@media (prefers-color-scheme: dark) { .btn.apple { background: #fff; color: #000; border-color: #fff; } }

/* Landing */
.lp-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; }
.lp-top .brand { padding: 0; }
.lang { width: auto; min-height: 36px; margin: 0; padding: 4px 8px; font-size: .875rem; }
.hero { padding: 36px 0 44px; }
.hero h1 { font-size: clamp(2.5rem, 6.4vw, 5rem); max-width: 15em; text-wrap: balance; }
.hero .lead { font-size: 1.15rem; color: var(--muted); margin: 18px 0 34px; max-width: 38em; }
.hero .lead b { color: var(--text); }
.big { font-family: Playfair, Georgia, serif; font-weight: 700; font-variant-numeric: lining-nums; line-height: 1; letter-spacing: -.01em; color: var(--accent); }

/* Der Einnahmen-Stapel: das eine laute Element der Seite. Jede Schicht ist ein Monatsjahrgang. */
.model { display: grid; grid-template-columns: minmax(270px, 340px) 1fr; gap: 40px; align-items: stretch; }
.m-side { display: flex; flex-direction: column; gap: 16px; align-items: stretch; }
.m-sum { display: flex; flex-direction: column; gap: 6px; }
.m-sum .big { font-size: clamp(3.4rem, 7vw, 5.2rem); font-variant-numeric: lining-nums tabular-nums; }
.m-sum span { color: var(--muted); }
.m-n { margin: 6px 0 0; font-size: .95rem; }
.m-n output { float: inline-end; font-size: 1.35rem; font-weight: 800; line-height: 1.1; color: var(--accent); font-variant-numeric: tabular-nums; }
input[type=range] { padding: 0; border: 0; background: none; min-height: 34px; margin-top: 8px; accent-color: var(--accent); cursor: grab; }
.m-more { font-size: .95rem; color: var(--muted); }
.m-more b { color: var(--text); font-variant-numeric: tabular-nums; }
.m-side .btn.main { margin-top: auto; min-height: 52px; }
.m-chart { margin: 0; display: flex; flex-direction: column; min-width: 0; }
.stack-c { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(3px, .8vw, 10px); height: clamp(260px, 42vh, 400px); position: relative; }
.col { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; text-align: center; }
.col span { display: block; flex: none; height: 24px; line-height: 24px; font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.col .bar { display: flex; flex-direction: column-reverse; gap: 1px; border-radius: 5px 5px 0 0; overflow: hidden; transition: height .45s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i) * 110ms); }
.stack-c.ready .col .bar { transition-delay: 0s; }
.stack-c.rest .col .bar { height: 0 !important; }
.col .bar i { display: block; min-height: 1px; background: var(--champagne); opacity: calc(1 - var(--c) * .058); }
.col .bar i:last-child { background: var(--accent); opacity: 1; }
.col .val { position: absolute; inset-inline-start: 50%; transform: translateX(-50%); white-space: nowrap; font-size: .8125rem; font-weight: 700; font-variant-numeric: tabular-nums; transition: bottom .45s cubic-bezier(.2,.8,.2,1), opacity .3s; transition-delay: calc(var(--i) * 110ms); }
.col:last-child .val { inset-inline-start: auto; inset-inline-end: 0; transform: none; }
.col:first-child .val { inset-inline-start: 0; transform: none; }
.stack-c.ready .col .val { transition-delay: 0s; }
.stack-c.rest .col .val { opacity: 0; }
.m-chart figcaption { text-align: center; font-size: .75rem; color: var(--muted); margin-top: 2px; }
.m-note { margin-top: 18px; max-width: 62em; }

/* Zahlenleiste */
.strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; padding: 30px 0; border-top: 1px solid var(--line); }
.strip b { display: block; font-size: clamp(1.7rem, 3.2vw, 2.5rem); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.strip span { display: block; color: var(--muted); font-size: .875rem; line-height: 1.35; margin-top: 4px; }

/* Rechnung je Abonnent */
.led-g { display: grid; grid-template-columns: 1.2fr 1fr; gap: 44px; }
.led-g h3 { font-size: 1.15rem; margin-bottom: 10px; }
.led dl { display: grid; grid-template-columns: 1fr auto; margin: 0; }
.led dt, .led dd { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--line); }
.led dt { color: var(--muted); }
.led dd { font-weight: 700; text-align: end; font-variant-numeric: tabular-nums; }
.dots { display: grid; grid-template-columns: repeat(12, 1fr); gap: 5px; margin-top: 18px; }
.dots i { display: block; height: 10px; border-radius: 3px; background: var(--champagne); }
.dots i:first-child { background: var(--accent); }
.js [data-in] .dots i { transform: scaleX(0); transform-origin: left; transition: transform .35s ease; transition-delay: calc(var(--i) * 90ms); }
.js [data-in].seen .dots i { transform: none; }
.led-t { margin-top: 14px; color: var(--muted); }
.led-t b { font-size: 1.7rem; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; margin-inline-end: 4px; }

/* Kosten des Wartens */
.wait .seg { margin-bottom: 20px; }
.seg button[aria-pressed=true] { background: var(--sel); color: var(--sel-fg); border-color: transparent; }
.w-rows { display: grid; gap: 12px; max-width: 760px; }
.w-row { display: grid; grid-template-columns: minmax(120px, 170px) 1fr 84px; gap: 14px; align-items: center; }
.w-row span { font-size: .9375rem; }
.w-row b { text-align: end; font-weight: 800; font-variant-numeric: tabular-nums; }
.w-track { height: 18px; border-radius: 5px; background: var(--line); overflow: hidden; }
.w-track i { display: block; height: 100%; background: var(--accent); transition: width .55s cubic-bezier(.2,.8,.2,1); }
.w-row.later .w-track i { background: var(--champagne); }
.w-gap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin-top: 26px; }
.w-gap .big { font-size: clamp(2.8rem, 6vw, 4.4rem); font-variant-numeric: lining-nums tabular-nums; }
.w-gap span { color: var(--muted); font-size: 1.05rem; }
.sec { padding: 54px 0; border-top: 1px solid var(--line); }
.sec > h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin-bottom: 10px; }
.sec > p.lead { color: var(--muted); max-width: 42em; margin-bottom: 26px; }
.bens { display: grid; gap: 2px 28px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 22px; }
.bens li { list-style: none; padding: 9px 0 9px 22px; position: relative; border-bottom: 1px solid var(--line); }
.bens li::before { content: ""; position: absolute; inset-inline-start: 2px; top: 18px; width: 8px; height: 8px; border-radius: 50%; background: var(--champagne); }
.bens { padding: 0; }
.prods { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.prod { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.prod img.hero-i { width: 100%; height: 170px; object-fit: cover; display: block; }
.prod .in { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.prod .logo { width: 44px; height: 44px; border-radius: 11px; }
.prod h3 { font-size: 1.3rem; font-family: Playfair, Georgia, serif; }
.prod dl { margin: 0; font-size: .9rem; }
.prod dt { color: var(--muted); font-size: .8125rem; margin-top: 8px; }
.prod dd { margin: 0; }
.prod-l { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: auto; padding-top: 6px; font-size: .9375rem; font-weight: 600; }
.prod-l a { padding: 6px 0; }
.prod .btn { margin-top: 6px; }
.forwho { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.faq details { border-bottom: 1px solid var(--line); padding: 14px 0; }
.faq summary { font-weight: 600; cursor: pointer; }
.faq p { margin-top: 8px; color: var(--muted); max-width: 46em; }
.foot { padding: 30px 0 50px; color: var(--muted); font-size: .875rem; border-top: 1px solid var(--line); }
.legalnote { border: 1px dashed var(--warn); border-radius: 12px; padding: 12px 16px; color: var(--warn); font-size: .9rem; margin-bottom: 18px; }
.doc h2 { font-size: 1.25rem; margin: 24px 0 8px; font-family: Manrope, system-ui, sans-serif; }
@media (max-width: 860px) {
  .hero { padding-top: 18px; }
  .model, .led-g { grid-template-columns: 1fr; gap: 26px; }
  .m-chart { order: -1; }
  .m-side .btn.main { margin-top: 6px; }
  .stack-c { height: 240px; }
  .strip { grid-template-columns: repeat(3, 1fr); }
  .w-row { grid-template-columns: 1fr 76px; }
  .w-row span { grid-column: 1 / -1; }
}