/* Margin Scan explainer (margin-scan.html) — the homepage's own design language on a flowing page.
   Built 2026-09-10. It reuses the homepage components as they are (.hero, .band + .hatch-row,
   .quote/.author/.stats/.stat, .h-big, .item/.icon/.item-text, .slot + .feather, .plan-hatch, .wave,
   .cta, .footer, shared .btn variants) and only relaxes their fixed heights and absolute placement so
   German copy can grow. Every override is scoped to body.ms, so the homepage keeps its traced geometry.
   Type rule: Space Grotesk stays on titles only (.hero h1, .h-big). */

/* ---------- hero ---------- */
.ms .hero { height: auto; padding: 196px 0 108px; }
.ms .hero-copy { position: static; width: 1100px; margin: 0 auto; }
/* The homepage headline is held to one line; this one runs over two. */
.ms .hero h1 { white-space: normal; text-wrap: balance; }
.ms .hero-sub { width: 900px; margin: 16px auto 0; }
.ms .hero-sub2 { margin-top: 6px; }
.ms .hero-btns { margin-top: 30px; }
.ms-meta { margin-top: 24px; text-align: center; font-size: 15px; line-height: 22px; letter-spacing: .1px; color: var(--g500); }

/* ---------- band: the three pains, then the client quote and what we typically find ---------- */
.ms .band { height: auto; }
.ms .band-row1 { height: auto; display: flex; gap: 40px; align-items: flex-start; padding: 39px; }
.ms .band-title { position: static; flex: none; width: 250px; }
.ms-pains { flex: 1 1 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ms-pains p { font-size: 16px; line-height: 24px; letter-spacing: .1px; color: var(--g700); }
.ms .band-row3 { height: auto; padding: 39px; }
.ms-qrow { display: flex; gap: 60px; justify-content: space-between; align-items: flex-start; }
.ms .quote { position: static; width: 1000px; }
.ms .author { position: static; flex: none; margin-top: 6px; }
.ms-slbl { margin-top: 48px; font-size: 14px; line-height: 20px; letter-spacing: .2px; color: var(--g500); }
.ms .stats { position: static; width: auto; margin-top: 16px; }

/* ---------- flowing sections in the homepage rhythm ---------- */
.ms-sec { position: relative; padding: 128px 0; }
.ms-sec.on-white { background: var(--white); }
.ms-sec .h-big span { color: #737373; font-weight: 500; }
.ms-lead { margin: 22px auto 0; width: 860px; text-align: center; font-size: 20px; line-height: 28px; font-weight: 450; letter-spacing: .1px; color: var(--g700); }
.ms-note { margin: 60px auto 0; width: 980px; text-align: center; font-size: 14px; line-height: 20px; letter-spacing: .2px; color: var(--g500); }

/* two items per row, exactly the homepage stat-row grid (105 icon + 20 + 480 text) */
.ms-grid { margin-top: 88px; display: flex; flex-wrap: wrap; gap: 60px 270px; align-content: flex-start; }
.icon.num { display: flex; align-items: center; justify-content: center; }
.icon.num b { font-size: 30px; line-height: 38px; font-weight: 500; letter-spacing: -.4px; color: var(--g900); }
.icon.num b i { font-style: normal; color: var(--g400); }
.item-text .eff { margin-top: 8px; font-size: 14px; line-height: 20px; letter-spacing: .2px; color: var(--g500); }

/* ---------- outcome section: reuses .benefits (headline, cockpit loop, four items) ---------- */
.ms .benefits { height: auto; margin-top: 0; padding: 128px 0; }
.ms .benefits .h-big { position: static; width: auto; translate: none; white-space: normal; }
.ms .benefits .slot { position: relative; left: auto; top: auto; width: 1480px; margin-top: 88px; }
.ms .stat-row { position: static; width: auto; margin-top: 96px; }

/* ---------- "Included": a band-style box (white row, hatch strip, grey list) ---------- */
.ms-inc { margin-top: 88px; border: 1px solid var(--g200); border-radius: 20px; overflow: hidden; background: var(--white); }
.ms-inc-hd { display: flex; gap: 60px; justify-content: space-between; align-items: baseline; padding: 39px; }
.ms-inc-hd h3 { flex: none; font-size: 30px; line-height: 38px; font-weight: 500; letter-spacing: -.4px; }
.ms-inc-hd p { width: 800px; font-size: 20px; line-height: 28px; font-weight: 450; letter-spacing: .1px; color: var(--g700); }
.ms-inc .plan-hatch { border-left: 0; border-right: 0; }
.ms-inc-list { padding: 39px; background: var(--g100); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, auto); grid-auto-flow: column; gap: 20px 60px; }
.ms-inc-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; line-height: 24px; letter-spacing: .1px; color: var(--g700); }
.ms-inc-list li img { flex: none; width: 16px; height: 16px; margin-top: 4px; }

/* ---------- investment: one container, two body columns over three equal cells ----------
   Same shape as the Included box (white row, hatch strip, grey row), so the cells are exactly equal in
   width and height and every caption sits on the same baseline. */
.ms-panel { margin-top: 88px; border: 1px solid var(--g200); border-radius: 20px; overflow: hidden; background: var(--white); }
.ms-panel-row { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; padding: 39px; }
.ms-panel-row p { font-size: 20px; line-height: 28px; font-weight: 450; letter-spacing: .1px; color: var(--g700); }
.ms-inc .plan-hatch, .ms-panel .plan-hatch { border-left: 0; border-right: 0; }
.ms-panel-foot { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--g100); }
.ms-cell { margin: 0; padding: 39px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.ms-cell + .ms-cell { border-left: 1px solid var(--g200); }
.ms-cell blockquote, .ms-cell > p { margin: 0; font-size: 20px; line-height: 28px; font-weight: 450; letter-spacing: .1px; color: var(--g900); }
.ms-cell figcaption, .ms-cell .cap { font-size: 13px; line-height: 18px; color: #8c929c; }

/* Testimonials read as spoken words, so the client quotes carry typographic quotation marks (Shahad,
   2026-09-10). They come from CSS, so the German dictionary keys stay unchanged, and they switch to
   German marks when the page is in DE. The prerequisite cell is not a quote and stays unmarked. */
.ms .quote, .ms .ms-cell blockquote { quotes: "\201C" "\201D"; }
html[lang="de"] .ms .quote, html[lang="de"] .ms .ms-cell blockquote { quotes: "\201E" "\201C"; }
.ms .quote::before, .ms .ms-cell blockquote::before { content: open-quote; }
.ms .quote::after, .ms .ms-cell blockquote::after { content: close-quote; }

/* ---------- the five objections: one bordered box, hairline rows ---------- */
.ms-qa { margin-top: 88px; border: 1px solid var(--g200); border-radius: 20px; overflow: hidden; background: var(--white); }
.ms-qa-row { display: flex; gap: 60px; justify-content: space-between; align-items: flex-start; padding: 39px; }
.ms-qa-row + .ms-qa-row { border-top: 1px solid var(--g200); }
.ms-qa-row h3 { flex: none; width: 460px; font-size: 30px; line-height: 38px; font-weight: 500; letter-spacing: -.4px; }
.ms-qa-row p { flex: 1 1 auto; font-size: 20px; line-height: 28px; font-weight: 450; letter-spacing: .1px; color: var(--g700); }
.ms-qa-row p a { color: var(--brand600); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(79,70,229,.35); }
.ms-qa-row p a:hover { text-decoration-color: var(--brand600); }

/* ---------- CTA and the capacity line under it ---------- */
.ms .cta-sec { padding-top: 96px; }
.ms-tail { margin-top: 40px; display: flex; gap: 40px; justify-content: space-between; align-items: baseline; }
.ms-tail p { font-size: 14px; line-height: 20px; letter-spacing: .2px; color: var(--g500); }
.ms-tail p a { color: var(--brand600); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(79,70,229,.35); }
.ms-tail p a:hover { text-decoration-color: var(--brand600); }
.ms-tail .tag { white-space: nowrap; }

/* The two hero lines that the Motion reveal list does not cover rise with the rest of the hero. */
@keyframes ms-rise { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
html.rv .ms .ms-meta { animation: ms-rise .9s cubic-bezier(.16,1,.3,1) .58s both; }
@media (prefers-reduced-motion: reduce) { html.rv .ms .ms-meta { animation: none; } }