:root {
  --ink: #202326;
  --muted: #5c6368;
  --paper: #f4f3f0;
  --ivory: #faf9f6;
  --ivory-deep: #e8e6e1;
  --line: rgba(32, 35, 38, .13);
  --brand: #8f3a2b;
  --brand-deep: #171a1c;
  --brand-soft: #f5e7e3;
  --accent: #8f3a2b;
  --accent-soft: #ffc3b7;
  --accent-ink: #171a1c;
  --action: #8f3a2b;
  --action-ink: #fff;
  --display-brand: #8f3a2b;
  --display-accent: #ef6b5b;
  --display-accent-soft: #ffc3b7;
  --compare-accent: #ef6b5b;
  --hero-saturation: .9;
  --compare-saturation: .94;
  --wrap: min(1220px, calc(100% - 64px));
  --header-height: 82px;
  color-scheme: light;
  font-family: "Avenir Next", Avenir, "Segoe UI", system-ui, -apple-system, sans-serif;
  font-synthesis: none;
  scroll-behavior: smooth;
}

/* Horizontales Coretec-Logo: weiß auf dem Hero, farbig auf heller Navigation */
.logo{position:relative;width:clamp(184px,16vw,228px);min-height:42px}
.brand-logo{display:block;width:100%;height:auto}
.brand-logo--dark{position:absolute;inset:auto 0;opacity:0;transition:opacity .25s ease}
.brand-logo--light{transition:opacity .25s ease}
.site-header.is-scrolled .brand-logo--dark{opacity:1}
.site-header.is-scrolled .brand-logo--light{opacity:0}
footer .brand-logo--dark{display:none}
footer .brand-logo--light{opacity:1}
@media(max-width:560px){.logo{width:174px}}

* { box-sizing: border-box; }
.static-fallback{max-width:820px;margin:120px auto;padding:32px;font:17px/1.65 system-ui;background:#fff;border-radius:24px}.static-fallback>p:first-child{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.static-fallback h1{font-size:clamp(42px,7vw,72px);line-height:.95}.static-fallback h2{margin-top:42px;font-size:28px}.static-fallback a{display:inline-flex;margin-top:20px;padding:14px 20px;color:#fff;border-radius:999px;background:var(--brand-deep)}.static-note{max-width:820px;margin:0 auto 80px;padding:0 32px}
html { min-width: 320px; background: var(--paper); overflow-x: clip; }
body { margin: 0; color: var(--ink); background: var(--paper); font-size: 16px; line-height: 1.55; overflow-x: clip; }
body, button, input { font: inherit; }
img, video, svg { display: block; max-width: 100%; }
img { width: 100%; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
::selection { color: var(--accent-ink); background: var(--accent-soft); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; clip: rect(0,0,0,0); overflow: hidden; white-space: nowrap; }
.skip-link { position: fixed; z-index: 200; top: 10px; left: 10px; padding: 11px 16px; color: var(--accent-ink); border-radius: 999px; background: var(--accent-soft); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.site-header { position: fixed; z-index: 100; top: 0; right: 0; left: 0; display: grid; height: var(--header-height); grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; padding: 0 max(32px, calc((100vw - 1350px) / 2)); color: #fff; border-bottom: 1px solid rgba(255,255,255,.14); transition: height .35s ease, color .35s ease, background .35s ease, box-shadow .35s ease, backdrop-filter .35s ease; }
.site-header.is-scrolled { height: 70px; color: var(--ink); border-color: var(--line); background: rgba(251,250,247,.9); box-shadow: 0 8px 30px rgba(15,24,23,.06); backdrop-filter: blur(18px) saturate(1.4); }
.logo { display: inline-flex; width: max-content; align-items: center; gap: 11px; font-size: 17px; letter-spacing: -.045em; }
.logo-mark { display: grid; width: 35px; height: 35px; border-radius: 10px; color: var(--accent-ink); background: var(--display-accent); font-size: 10px; font-weight: 850; letter-spacing: -.04em; place-items: center; }
.logo-mark svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.logo-name { display: flex; flex-direction: column; font-weight: 450; line-height: 1; }
.logo-name b { font-weight: 680; }
.logo-name small { margin-top: 5px; font-size: 7px; font-weight: 720; letter-spacing: .16em; text-transform: uppercase; }
.desktop-nav { display: flex; align-items: center; gap: 30px; color: rgba(255,255,255,.72); font-size: 12px; font-weight: 620; }
.site-header.is-scrolled .desktop-nav { color: var(--muted); }
.desktop-nav a { position: relative; padding: 8px 0; }
.desktop-nav a::after { content: ""; position: absolute; right: 0; bottom: 1px; left: 0; height: 1px; background: var(--accent); transform: scaleX(0); transition: transform .25s ease; transform-origin: right; }
.desktop-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.header-cta { justify-self: end; }
.button { display: inline-flex; min-height: 54px; align-items: center; justify-content: center; gap: 12px; padding: 0 22px; border: 1px solid transparent; border-radius: 999px; font-size: 12px; font-weight: 780; letter-spacing: -.01em; transition: transform .2s ease, color .2s ease, background .2s ease, border-color .2s ease; }
.button:hover { transform: translateY(-2px); }
.button span { font-size: 17px; }
.button-accent { color: var(--action-ink); background: var(--action); box-shadow: 0 12px 38px color-mix(in srgb, var(--action) 22%, transparent); }
.button-accent:hover { color: var(--action-ink); background: var(--action); }
.button-dark { color: #fff; background: var(--brand-deep); }
.button-light { color: var(--brand-deep); background: #fff; }
.menu-button, .mobile-menu { display: none; }

.hero { position: relative; min-height: 100svh; color: #fff; background: var(--brand-deep); overflow: hidden; isolation: isolate; }
.hero::before { content: ""; position: absolute; z-index: 3; right: 0; bottom: 0; left: 0; height: 1px; background: rgba(255,255,255,.18); }
.hero-glow { position: absolute; z-index: -1; top: -28vw; left: -20vw; width: 60vw; height: 60vw; border-radius: 50%; background: color-mix(in srgb, var(--display-brand) 88%, white 12%); filter: blur(90px); opacity: .34; mix-blend-mode: screen; }
.hero-visual { position: absolute; z-index: -3; inset: 0; width: 100%; overflow: hidden; }
.hero-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,8,8,.2), transparent 42%, rgba(4,8,8,.42)); }
.hero-visual img { height: 112%; object-fit: cover; object-position: var(--hero-position, center); filter: saturate(var(--hero-saturation)) contrast(1.03); will-change: transform; }
.hero-shade { position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--brand-deep) 92%, transparent) 0%, color-mix(in srgb, var(--brand-deep) 82%, transparent) 27%, color-mix(in srgb, var(--brand-deep) 44%, transparent) 51%, color-mix(in srgb, var(--brand-deep) 6%, transparent) 78%), linear-gradient(180deg, rgba(0,0,0,.28), transparent 30%, rgba(0,0,0,.18)); }
.hero-grid { position: relative; display: grid; width: min(1350px, calc(100% - 64px)); min-height: 100svh; margin-inline: auto; padding: 140px 0 86px; grid-template-columns: minmax(0, 1fr) minmax(260px, .52fr); align-items: center; gap: 90px; }
.hero-copy { max-width: 790px; }
.eyebrow { margin: 0 0 24px; color: var(--brand); font-size: 11px; font-weight: 820; letter-spacing: .18em; text-transform: uppercase; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--display-accent-soft); }
.hero-eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--display-accent); }
.hero h1 { max-width: 900px; margin: 0; font-size: clamp(58px, 7.2vw, 116px); font-weight: 590; letter-spacing: -.075em; line-height: .84; }
.hero-title-line { display: block; padding: 0 .08em .09em 0; overflow: hidden; }
.hero-title-line > span { display: block; }
.hero .title-accent { color: var(--display-accent); }
.hero-intro { max-width: 600px; margin: 24px 0 0; color: rgba(255,255,255,.72); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.62; }
.hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 38px; }
.hero-actions > p { margin: 0; padding-left: 26px; border-left: 1px solid rgba(255,255,255,.22); }
.hero-actions b, .hero-actions span { display: block; }
.hero-actions b { font-size: 16px; letter-spacing: -.02em; }
.hero-actions span { color: rgba(255,255,255,.55); font-size: 10px; }
.hero-proof { align-self: end; justify-self: end; width: min(370px, 100%); margin-bottom: 12px; color: rgba(255,255,255,.8); }
.hero-proof p { display: flex; align-items: center; gap: 14px; margin: 0; padding: 18px 0; border-top: 1px solid rgba(255,255,255,.22); }
.hero-proof strong { color: var(--display-accent); font-size: 44px; font-weight: 560; letter-spacing: -.07em; line-height: 1; }
.hero-proof span { max-width: 190px; font-size: 11px; line-height: 1.45; }
.hero-proof i { width: 9px; height: 9px; border-radius: 50%; background: var(--display-accent); box-shadow: 0 0 0 7px color-mix(in srgb, var(--display-accent) 15%, transparent); }
.scroll-cue { position: absolute; z-index: 4; bottom: 28px; left: max(32px, calc((100vw - 1350px) / 2)); display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.56); font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.scroll-cue i { display: grid; width: 29px; height: 29px; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; font-style: normal; place-items: center; }

.proof-strip { width: 100%; padding: 18px 0; color: var(--accent-ink); background: var(--display-accent); overflow: hidden; }
.proof-track { display: flex; width: max-content; align-items: center; gap: 34px; will-change: transform; }
.proof-track span { font-size: 11px; font-weight: 820; letter-spacing: .11em; text-transform: uppercase; white-space: nowrap; }
.proof-track i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent-ink); opacity: .5; }

.section-heading, .story-intro, .benefits, .diagram-section, .pricing { width: var(--wrap); margin-inline: auto; }
.section-heading h2, .story-intro h2, .benefits-heading h2, .impact-heading h2, .diagram-heading h2, .price-head h2, .final-copy h2 { margin: 0; padding-bottom: .08em; font-size: clamp(43px, 5.2vw, 76px); font-weight: 590; letter-spacing: -.066em; line-height: 1.02; text-wrap: balance; }
.section-heading > p:last-child, .story-intro > p:last-child, .impact-heading > p:last-child, .diagram-heading > p:last-child, .price-head > p:last-child { max-width: 670px; margin: 24px 0 0; color: var(--muted); font-size: 17px; }

.compare-section { padding: 150px 0 160px; background: var(--paper); }
.compare-section .section-heading { max-width: 1060px; margin-bottom: 68px; text-align: center; }
.compare-section .section-heading > p:last-child { margin-inline: auto; }
.compare-shell { --compare: 50%; width: min(1280px, calc(100% - 40px)); margin-inline: auto; border: 1px solid rgba(22,30,28,.13); border-radius: 26px; background: #fff; box-shadow: 0 45px 120px rgba(25,31,30,.14); overflow: hidden; }
.browser-chrome { display: grid; height: 48px; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 18px; color: #777b79; background: #efefec; font-size: 9px; }
.browser-chrome > span { display: flex; gap: 7px; }
.browser-chrome .browser-lights i { display: block; width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.browser-lights i:nth-child(1) { background: #ff5f57; }
.browser-lights i:nth-child(2) { background: #febc2e; }
.browser-lights i:nth-child(3) { background: #28c840; }
.browser-chrome p { display: flex; align-items: center; gap: 12px; margin: 0; color: #454b49; font-size: 11px; letter-spacing: .12em; }
.browser-chrome p b { font-weight: 840; }
.browser-chrome p b:last-child { color: var(--display-brand); }
.browser-chrome p i { color: var(--compare-accent); font-size: 12px; font-style: normal; }
.browser-chrome em { justify-self: end; font-style: normal; }
.compare-canvas { --preview-height: clamp(480px, 59vw, 760px); position: relative; height: var(--preview-height); overflow: hidden; background: #fff; }
.compare-top-labels { position: absolute; z-index: 8; top: 18px; right: 18px; left: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 34px; pointer-events: none; }
.compare-top-labels span { display: grid; min-width: 168px; justify-self: start; gap: 2px; padding: 11px 15px 10px; border: 1px solid rgba(255,255,255,.52); border-radius: 12px; color: #fff; background: rgba(18,24,23,.8); box-shadow: 0 12px 32px rgba(0,0,0,.2); backdrop-filter: blur(12px); }
.compare-top-labels b { font-size: clamp(17px,1.7vw,25px); font-weight: 900; letter-spacing: .08em; line-height: 1; }
.compare-top-labels small { font-size: 9px; font-weight: 720; letter-spacing: .08em; text-transform: uppercase; }
.compare-top-labels span:last-child { justify-self: end; color: var(--accent-ink); border-color: color-mix(in srgb,var(--compare-accent) 70%,#fff); background: color-mix(in srgb,var(--compare-accent) 88%,#fff); }
.compare-scroll { position: absolute; z-index: 1; inset: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: color-mix(in srgb, var(--compare-accent) 65%, #fff) rgba(255,255,255,.18); scrollbar-width: thin; }
.compare-scroll:focus-visible { outline: 3px solid var(--compare-accent); outline-offset: -3px; }
.compare-scroll::-webkit-scrollbar { width: 8px; }
.compare-scroll::-webkit-scrollbar-track { background: rgba(255,255,255,.18); }
.compare-scroll::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: color-mix(in srgb, var(--compare-accent) 72%, #fff); background-clip: padding-box; }
.compare-pages { position: relative; height: calc(var(--preview-height) + 500px); }
.old-site, .after-site { position: absolute; inset: 0; min-height: 100%; overflow: hidden; }
.old-site { color: #3d4141; background: #fff; font: clamp(9px, 1vw, 13px) Arial, sans-serif; }
.old-hero, .after-hero { position: relative; height: var(--preview-height); overflow: hidden; }
.old-top { padding: 7px 5%; color: #6e7172; background: #ececec; font-size: .8em; text-align: right; }
.old-site header { min-height: 92px; padding: 19px 7%; background: linear-gradient(#fff,#f3f3f1); }
.old-site header b, .old-site header small { display: block; }
.old-site header b { color: #3d5968; font-family: Georgia, serif; font-size: clamp(21px, 2.6vw, 38px); font-weight: normal; }
.old-site header small { margin-top: 4px; color: #777; }
.old-site nav { padding: 11px 7%; color: #fff; background: linear-gradient(#617680,#3e535d); white-space: nowrap; }
.old-content { display: grid; max-width: 1050px; grid-template-columns: 48% 1fr; gap: 34px; margin: 0 auto; padding: 36px 5% 25px; }
.old-content img { height: clamp(190px, 29vw, 360px); border: 1px solid #bfc3c1; object-fit: cover; filter: saturate(.64) contrast(.9); }
.old-content h3 { margin: 0 0 12px; color: #3d5968; font-family: Georgia, serif; font-size: clamp(22px, 2.5vw, 36px); font-weight: normal; }
.old-content p { margin: 0; line-height: 1.62; }
.old-content a { display: inline-block; margin-top: 18px; color: #315f85; text-decoration: underline; }
.old-boxes { display: grid; max-width: 950px; grid-template-columns: repeat(3,1fr); margin: 0 auto; border-top: 1px solid #c9ccca; border-bottom: 1px solid #c9ccca; }
.old-boxes span { padding: 18px; }
.old-boxes span + span { border-left: 1px solid #c9ccca; }
.old-boxes b, .old-boxes small { display: block; }
.old-boxes b { color: #425b68; font-family: Georgia,serif; font-weight: normal; }
.old-boxes small { margin-top: 4px; color: #777; }
.old-preview-services { min-height: 500px; padding: 52px 7% 70px; border-top: 1px solid #cacaca; background: #f1f1ee; }
.old-preview-services h4 { margin: 0 0 24px; color: #3d5968; font-family: Georgia,serif; font-size: clamp(24px, 3vw, 38px); font-weight: normal; }
.old-preview-services ul { display: grid; max-width: 1050px; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
.old-preview-services li { min-height: 118px; padding: 18px; border: 1px solid #c5c8c6; background: #fff; }
.old-preview-services li b, .old-preview-services li span { display: block; }
.old-preview-services li b { color: #425b68; font-family: Georgia,serif; font-size: 1.12em; font-weight: normal; }
.old-preview-services li span { margin-top: 10px; color: #777; font-size: .84em; line-height: 1.5; }
.old-preview-services > p { margin: 25px 0 0; color: #737676; font-size: .82em; }
.after-site { z-index: 2; color: #fff; background: var(--brand-deep); clip-path: inset(0 0 0 var(--compare)); will-change: clip-path; }
.after-hero > img { position: absolute; inset: 0; height: 100%; object-fit: cover; filter: saturate(var(--compare-saturation)); }
.after-shade { position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--brand-deep) 96%, transparent) 0%, color-mix(in srgb, var(--brand-deep) 78%, transparent) 43%, color-mix(in srgb, var(--brand-deep) 4%, transparent) 78%), linear-gradient(0deg, rgba(0,0,0,.45), transparent 55%); }
.after-nav { position: relative; display: grid; min-height: 80px; grid-template-columns: 1fr auto auto; align-items: center; gap: 30px; margin: 0 5%; border-bottom: 1px solid rgba(255,255,255,.24); font-size: 11px; }
.after-nav b { font-size: clamp(15px, 1.7vw, 23px); letter-spacing: -.04em; }
.after-nav span { color: rgba(255,255,255,.7); }
.after-nav em { padding: 9px 13px; border: 1px solid rgba(255,255,255,.5); border-radius: 999px; font-size: 9px; font-style: normal; }
.after-copy { position: relative; max-width: 670px; margin: clamp(75px, 11vw, 150px) 5% 0; }
.after-copy small { color: var(--accent-soft); font-size: 10px; font-weight: 830; letter-spacing: .17em; }
.after-copy h3 { margin: 13px 0; font-size: clamp(42px, 5.6vw, 78px); font-weight: 580; letter-spacing: -.068em; line-height: .92; }
.after-copy p { margin: 0; color: rgba(255,255,255,.74); font-size: clamp(13px, 1.5vw, 19px); }
.after-copy > b { display: inline-flex; margin-top: 28px; padding: 12px 17px; border-radius: 999px; color: var(--accent-ink); background: var(--compare-accent); font-size: 10px; }
.after-proof { position: absolute; right: 5%; bottom: 24px; left: 5%; display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid rgba(255,255,255,.25); }
.after-proof span { padding-top: 16px; color: rgba(255,255,255,.75); font-size: 10px; }
.after-preview-services { min-height: 390px; padding: 54px 5% 44px; color: var(--ink); background: color-mix(in srgb, var(--brand-soft) 40%, #fff); }
.after-preview-services > small { color: var(--display-brand); font-size: 9px; font-weight: 850; letter-spacing: .16em; }
.after-preview-services h4 { max-width: 650px; margin: 10px 0 30px; color: var(--brand-deep); font-size: clamp(28px, 3.7vw, 50px); font-weight: 600; letter-spacing: -.055em; line-height: .96; }
.after-preview-services > div { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.after-service-card { position: relative; min-height: 152px; padding: 20px; border: 1px solid color-mix(in srgb, var(--display-brand) 18%, transparent); border-radius: 17px; background: rgba(255,255,255,.82); box-shadow: 0 12px 36px rgba(19,31,28,.07); opacity: .38; transform: translateY(24px) scale(.97); transition: opacity .5s ease var(--service-delay), transform .62s cubic-bezier(.2,.75,.2,1) var(--service-delay), box-shadow .5s ease var(--service-delay); }
.is-preview-scrolled .after-service-card { opacity: 1; box-shadow: 0 18px 45px rgba(19,31,28,.12); transform: translateY(0) scale(1); }
.after-service-card > span { color: var(--display-brand); font-size: 8px; font-weight: 850; letter-spacing: .12em; }
.after-service-card h5 { margin: 16px 0 8px; color: var(--brand-deep); font-size: clamp(15px, 1.7vw, 22px); letter-spacing: -.03em; }
.after-service-card p { max-width: 32ch; margin: 0; color: var(--muted); font-size: clamp(9px, .95vw, 12px); line-height: 1.5; }
.after-service-card i { position: absolute; right: 18px; bottom: 16px; color: var(--display-brand); font-size: 13px; font-style: normal; }
.after-preview-cta { display: flex; min-height: 110px; align-items: center; justify-content: space-between; gap: 30px; padding: 20px 5%; color: #fff; background: var(--brand-deep); }
.after-preview-cta p { margin: 0; }
.after-preview-cta p small, .after-preview-cta p b { display: block; }
.after-preview-cta p small { color: var(--accent-soft); font-size: 8px; letter-spacing: .16em; }
.after-preview-cta p b { margin-top: 5px; font-size: clamp(15px, 2vw, 24px); }
.after-preview-cta > span { padding: 11px 15px; border-radius: 999px; color: var(--accent-ink); background: var(--compare-accent); font-size: 9px; font-weight: 800; }
.compare-scroll-hint { position: absolute; z-index: 7; right: 18px; bottom: 18px; display: flex; min-height: 38px; align-items: center; gap: 8px; padding: 0 13px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; color: #fff; background: rgba(10,20,19,.72); box-shadow: 0 9px 28px rgba(0,0,0,.2); font-size: 9px; font-weight: 760; letter-spacing: .04em; pointer-events: none; backdrop-filter: blur(10px); transition: opacity .3s ease, transform .3s ease; }
.compare-scroll-hint span { color: var(--compare-accent); font-size: 15px; animation: compare-scroll-cue 1.4s ease-in-out infinite; }
.is-preview-scrolled .compare-scroll-hint { opacity: 0; transform: translateY(8px); }
@keyframes compare-scroll-cue { 50% { transform: translateY(4px); } }
.compare-divider { position: absolute; z-index: 5; top: 0; bottom: 0; left: var(--compare); width: 2px; background: #fff; box-shadow: 0 0 18px rgba(0,0,0,.35); pointer-events: none; transform: translateX(-1px); }
.compare-divider span { position: absolute; top: 50%; left: 50%; display: grid; width: 52px; height: 52px; border: 1px solid rgba(255,255,255,.72); border-radius: 50%; color: var(--brand-deep); background: rgba(255,255,255,.94); box-shadow: 0 10px 30px rgba(0,0,0,.22); font-size: 18px; place-items: center; transform: translate(-50%,-50%); }
.compare-range { position: absolute; z-index: 6; top: calc(50% - 42px); right: 0; left: 0; width: 100%; height: 84px; margin: 0; opacity: 0; cursor: ew-resize; appearance: none; touch-action: pan-y; }
.compare-range::-webkit-slider-thumb { width: 54px; height: 100%; appearance: none; }
.compare-range::-moz-range-thumb { width: 54px; height: 100%; border: 0; border-radius: 0; background: transparent; }
.compare-legend { display: grid; min-height: 78px; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 22px; padding: 0 24px; color: var(--muted); background: linear-gradient(90deg,#f0f0ed 0 50%,color-mix(in srgb,var(--brand-soft) 55%,#fff) 50%); font-size: 13px; }
.compare-legend span { display: flex; align-items: center; gap: 9px; font-weight: 820; letter-spacing: .12em; text-transform: uppercase; }
.compare-legend span:last-child { justify-self: end; }
.compare-legend i { width: 7px; height: 7px; border-radius: 50%; background: var(--compare-accent); }
.after-panel .after-shade { background: linear-gradient(90deg, rgba(7,13,12,.08), rgba(7,13,12,.16) 45%, color-mix(in srgb, var(--brand-deep) 74%, transparent)); }
.after-panel .after-copy { position: absolute; top: 50%; right: 4.5%; width: 42%; max-width: 520px; margin: 0; padding: clamp(22px, 3vw, 42px); border: 1px solid rgba(255,255,255,.22); border-radius: 26px; background: color-mix(in srgb, var(--brand-deep) 82%, transparent); box-shadow: 0 24px 65px rgba(0,0,0,.28); backdrop-filter: blur(18px); transform: translateY(-48%); }
.after-panel .after-copy h3 { font-size: clamp(34px, 4.2vw, 61px); }
.after-panel .after-proof { left: 54%; }
.compare-legend p { margin: 0; text-align: center; }

.story-section { padding: 145px 0; color: #fff; background: var(--brand-deep); overflow: clip; }
.story-intro { margin-bottom: 60px; }
.story-intro .eyebrow { color: var(--display-accent); }
.story-intro > p:last-child { color: rgba(255,255,255,.58); }
.story-layout { display: grid; width: var(--wrap); margin-inline: auto; grid-template-columns: .78fr 1.22fr; gap: clamp(60px, 8vw, 140px); }
.story-copy { padding-bottom: 8vh; }
.story-beat { display: grid; min-height: 58vh; grid-template-columns: 76px 1fr; align-content: center; gap: 22px; opacity: .32; transition: opacity .45s ease; }
.story-beat.is-active { opacity: 1; }
.story-beat > span { color: var(--display-accent); font-size: 28px; font-weight: 720; letter-spacing: -.055em; line-height: 1; }
.story-beat h3 { margin: 0; font-size: clamp(31px, 3.6vw, 52px); font-weight: 590; letter-spacing: -.055em; line-height: 1; }
.story-beat p { max-width: 430px; margin: 18px 0 0; color: rgba(255,255,255,.58); font-size: 15px; }
.story-beat-mobile { display: none; }
.story-stage { position: sticky; top: 100px; height: calc(100svh - 140px); max-height: 780px; align-self: start; background: transparent; perspective: 1500px; transform-style: preserve-3d; overflow: visible; }
.story-stage::before { content: ""; position: absolute; inset: 9% 5% 5% 9%; border-radius: 32px; background: color-mix(in srgb,var(--display-brand) 70%,#000); box-shadow: 0 38px 90px rgba(0,0,0,.35); transform: translateZ(-240px) rotateY(-5deg); }
.story-stage::after { content: "3D · SCROLL STORY"; position: absolute; z-index: 8; top: 18px; left: 5px; color: rgba(255,255,255,.46); font-size: 8px; font-weight: 820; letter-spacing: .16em; pointer-events: none; }
.story-image { position: absolute; inset: 6% 4% 4% 7%; margin: 0; border: 1px solid rgba(255,255,255,.16); border-radius: 30px; box-shadow: 0 32px 80px rgba(0,0,0,.3); opacity: .42; overflow: hidden; transform-style: preserve-3d; will-change: transform,opacity; }
.story-image.is-active { opacity: 1; }
.story-image img { height: 100%; object-fit: cover; }
.story-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 58%, rgba(0,0,0,.7)); }
.story-image figcaption { position: absolute; z-index: 2; right: 32px; bottom: 28px; left: 32px; display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 720; }
.story-image figcaption span { color: var(--display-accent); font-size: 19px; }
.story-progress { position: absolute; z-index: 6; top: 28px; right: 24px; width: 2px; height: calc(100% - 56px); background: rgba(255,255,255,.18); }
.story-progress i { display: block; width: 100%; height: 100%; background: var(--display-accent); }

.benefits { padding: 150px 0; overflow: clip; }
.benefits-heading { max-width: 950px; }
.benefit-map { max-width: 1080px; margin: 54px 0 0; padding: 25px 28px 22px; border: 1px solid var(--line); border-radius: 24px; background: rgba(255,255,255,.72); box-shadow: 0 20px 60px rgba(18,25,24,.06); }
.benefit-map > div { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.benefit-map article { position: relative; display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 11px; min-width: 0; padding-right: 22px; }
.benefit-map article:not(:last-child)::after { position: absolute; top: 50%; right: 2px; color: var(--display-accent); font-size: 18px; transform: translateY(-50%); content: "→"; }
.benefit-map article > span { display: grid; width: 42px; height: 42px; border-radius: 13px; color: var(--brand); background: var(--brand-soft); place-items: center; }
.benefit-map article svg { width: 20px; height: 20px; }
.benefit-map article b, .benefit-map article small { display: block; }
.benefit-map article b { color: var(--brand-deep); font-size: 10px; font-weight: 820; letter-spacing: .05em; text-transform: uppercase; }
.benefit-map article small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.benefit-map > b { display: block; height: 3px; margin-top: 16px; border-radius: 999px; background: var(--ivory-deep); overflow: hidden; }
.benefit-map > b i { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--brand),var(--display-accent)); }
.benefit-list { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 34px; }
.benefit { position: relative; min-height: 410px; padding: 28px; border: 1px solid var(--line); border-radius: 26px; background: linear-gradient(145deg,rgba(255,255,255,.9),rgba(255,255,255,.45)); box-shadow: 0 22px 60px rgba(18,25,24,.05); overflow: hidden; transform-style: preserve-3d; }
.benefit::after { content: ""; position: absolute; z-index: -1; right: -35%; bottom: -48%; width: 78%; aspect-ratio: 1; border-radius: 50%; background: color-mix(in srgb,var(--brand-soft) 74%,transparent); }
.benefit + .benefit { padding-left: 28px; }
.benefit > small { display: block; color: color-mix(in srgb,var(--display-brand) 72%,transparent); font-size: clamp(72px,8vw,118px); font-weight: 570; letter-spacing: -.095em; line-height: .82; }
.benefit-icon { display: grid; width: 48px; height: 48px; border-radius: 15px; color: var(--brand); background: var(--brand-soft); place-items: center; }
.benefit-icon svg { width: 23px; height: 23px; }
.benefit > .benefit-icon { position: absolute; top: 29px; right: 28px; }
.benefit > div { margin-top: 78px; }
.benefit > div > b { color: var(--display-brand); font-size: 8px; letter-spacing: .16em; }
.benefit h3 { margin: 8px 0 14px; font-size: clamp(25px, 2.5vw, 34px); font-weight: 620; letter-spacing: -.05em; line-height: 1.05; }
.benefit p { margin: 0; color: var(--muted); font-size: 14px; }
.image-mosaic { display: grid; height: 850px; grid-template-columns: 1.15fr .85fr; grid-template-rows: 1.06fr .94fr; gap: 18px; margin-top: 90px; }
.image-mosaic figure { position: relative; margin: 0; border-radius: 28px; background: var(--ivory-deep); overflow: hidden; }
.image-mosaic img { height: 112%; object-fit: cover; }
.image-mosaic figcaption { position: absolute; right: 18px; bottom: 18px; padding: 9px 13px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: #fff; background: rgba(12,18,17,.56); backdrop-filter: blur(12px); font-size: 9px; font-weight: 720; }
.mosaic-1 { grid-row: 1 / 3; }

.impact-section { position: relative; width: min(1380px, calc(100% - 32px)); margin: 0 auto 145px; padding: 120px max(36px, calc((100% - 1160px) / 2)); color: #fff; border-radius: 38px; background: radial-gradient(circle at 88% 4%,color-mix(in srgb,var(--display-brand) 82%,white 18%),transparent 31%),var(--brand-deep); overflow: hidden; isolation: isolate; }
.impact-section::before { position: absolute; z-index: -1; inset: 0; background-image: linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(135deg,#000,transparent 74%); content: ""; }
.impact-heading { max-width: 940px; }
.impact-heading .eyebrow { color: var(--display-accent); }
.impact-heading > p:last-child { color: rgba(255,255,255,.64); }
.impact-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 62px; }
.impact-photo { position: relative; height: 340px; margin: 0; border: 1px solid rgba(255,255,255,.16); border-radius: 25px; background: #121817; overflow: hidden; }
.impact-photo img { height: 100%; object-fit: cover; }
.impact-photo-old img { filter: grayscale(.78) saturate(.48) contrast(.88); }
.impact-photo::after { position: absolute; inset: 0; background: linear-gradient(180deg,transparent 42%,rgba(5,9,9,.82)); content: ""; }
.impact-photo figcaption { position: absolute; z-index: 2; right: 25px; bottom: 23px; left: 25px; }
.impact-photo figcaption small,.impact-photo figcaption b { display: block; }
.impact-photo figcaption small { color: rgba(255,255,255,.55); font-size: 8px; font-weight: 840; letter-spacing: .16em; }
.impact-photo-new figcaption small { color: var(--display-accent); }
.impact-photo figcaption b { margin-top: 6px; font-size: clamp(20px,2vw,28px); font-weight: 610; letter-spacing: -.04em; }
.impact-labels { display: grid; grid-template-columns: 1fr 1fr; gap: 84px; margin: 40px 0 15px; }
.impact-labels p { display: flex; align-items: center; gap: 11px; margin: 0; color: rgba(255,255,255,.76); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.impact-labels p:last-child { color: #fff; }
.impact-labels span { display: grid; width: 30px; height: 30px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; color: #ffaaa3; font-size: 17px; place-items: center; }
.impact-labels p:last-child span { color: var(--accent-ink); border-color: transparent; background: var(--display-accent); }
.impact-comparison { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.impact-row { display: grid; min-height: 116px; grid-template-columns: minmax(0,1fr) 68px minmax(0,1fr); align-items: stretch; gap: 8px; }
.impact-side { display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 15px; min-width: 0; padding: 19px 22px; border: 1px solid rgba(255,255,255,.11); border-radius: 19px; background: rgba(255,255,255,.045); }
.impact-new { border-color: color-mix(in srgb,var(--display-accent) 34%,transparent); background: color-mix(in srgb,var(--display-brand) 22%,transparent); }
.impact-side > span { display: grid; width: 36px; height: 36px; border-radius: 12px; color: #ffaaa3; background: rgba(255,126,115,.1); font-size: 20px; place-items: center; }
.impact-new > span { color: var(--accent-ink); background: var(--display-accent); font-size: 14px; font-weight: 900; }
.impact-side p { margin: 0; color: rgba(255,255,255,.66); font-size: 13px; line-height: 1.5; }
.impact-new p { color: rgba(255,255,255,.9); }
.impact-side small { display: block; margin-bottom: 5px; color: rgba(255,255,255,.34); font-size: 8px; font-weight: 820; letter-spacing: .12em; }
.impact-new small { color: var(--display-accent); }
.impact-arrow { display: grid; align-content: center; justify-items: center; gap: 3px; color: var(--display-accent); font-style: normal; }
.impact-arrow svg { width: 22px; height: 22px; }
.impact-arrow b { font-size: 18px; font-weight: 400; }
.impact-summary { display: grid; grid-template-columns: 56px minmax(0,1fr) auto; align-items: center; gap: 21px; margin-top: 30px; padding: 25px; border: 1px solid rgba(255,255,255,.15); border-radius: 23px; background: rgba(255,255,255,.075); }
.impact-summary > span { display: grid; width: 56px; height: 56px; border-radius: 17px; color: var(--accent-ink); background: var(--display-accent); place-items: center; }
.impact-summary > span svg { width: 27px; height: 27px; }
.impact-summary p { max-width: 650px; margin: 0; }
.impact-summary b,.impact-summary small { display: block; }
.impact-summary b { font-size: 17px; letter-spacing: -.025em; }
.impact-summary small { margin-top: 5px; color: rgba(255,255,255,.55); font-size: 10px; }
.impact-summary .button { min-width: 230px; }

.mid-cta { position: relative; width: min(1380px, calc(100% - 32px)); min-height: 690px; margin: 0 auto 145px; color: #fff; border-radius: 38px; background: radial-gradient(circle at 82% 26%, color-mix(in srgb, var(--display-brand) 82%, white 18%), transparent 34%), var(--brand-deep); overflow: hidden; isolation: isolate; }
.mid-cta::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(90deg, black, transparent 78%); opacity: .28; }
.mid-cta-grid { position: relative; display: grid; width: min(1160px, calc(100% - 72px)); min-height: 690px; margin-inline: auto; grid-template-columns: .84fr 1.16fr; align-items: center; gap: 70px; }
.mid-cta-copy { position: relative; z-index: 4; max-width: 520px; }
.mid-cta-copy .eyebrow { color: var(--display-accent); }
.mid-cta-copy h2 { margin: 0; font-size: clamp(45px, 5vw, 72px); font-weight: 590; letter-spacing: -.067em; line-height: .96; }
.mid-cta-copy > p:last-of-type { margin: 24px 0 0; color: rgba(255,255,255,.62); font-size: 16px; }
.mid-cta-copy .button { margin-top: 34px; }
.mid-cta-visual { position: relative; height: 560px; perspective: 1100px; }
.cta-card { position: absolute; margin: 0; border: 1px solid rgba(255,255,255,.2); border-radius: 24px; background: var(--brand); box-shadow: 0 35px 80px rgba(0,0,0,.32); overflow: hidden; }
.cta-card img { height: 100%; object-fit: cover; }
.cta-card-a { z-index: 3; top: 70px; right: 7%; width: 64%; height: 390px; transform: rotate(2.5deg); }
.cta-card-b { z-index: 2; top: 18px; left: 0; width: 44%; height: 280px; transform: rotate(-7deg); }
.cta-card-c { z-index: 4; right: 0; bottom: 22px; width: 39%; height: 225px; transform: rotate(7deg); }
.cta-orbit { position: absolute; z-index: 5; right: 41%; bottom: 42px; display: grid; width: 104px; height: 104px; align-content: center; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; color: var(--accent-ink); background: var(--display-accent); box-shadow: 0 16px 40px rgba(0,0,0,.25); place-items: center; }
.cta-orbit b { font-size: 28px; font-weight: 720; letter-spacing: -.07em; line-height: .9; }
.cta-orbit small { margin-top: 4px; font-size: 9px; font-weight: 820; letter-spacing: .08em; text-transform: uppercase; }

.diagram-section { padding: 145px 0; border-top: 1px solid var(--line); }
.diagram-heading { max-width: 1050px; }
.diagram-heading > p:last-child { max-width: 700px; }
.process-journey { position: relative; margin-top: 70px; }
.process-journey ol { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin: 0; padding: 0; list-style: none; perspective: 1400px; }
.process-step { position: relative; min-width: 0; border: 1px solid var(--line); border-radius: 26px; background: #fff; box-shadow: 0 22px 64px rgba(18,25,24,.065); overflow: hidden; }
.process-step figure { height: 220px; margin: 0; background: var(--ivory-deep); overflow: hidden; }
.process-step figure img { width: 100%; height: 112%; object-fit: cover; transform-origin: center; }
.process-step > div { position: relative; min-height: 250px; padding: 28px 24px 30px; }
.process-step > div > span { color: var(--display-accent); font-size: 12px; font-weight: 860; letter-spacing: .12em; }
.process-step > div > i { position: absolute; top: 21px; right: 21px; display: grid; width: 42px; height: 42px; border-radius: 13px; color: var(--brand); background: var(--brand-soft); place-items: center; }
.process-step > div > i svg { width: 20px; height: 20px; }
.process-step h3 { margin: 46px 0 12px; font-size: clamp(22px,2vw,29px); font-weight: 650; letter-spacing: -.045em; line-height: 1; }
.process-step p { margin: 0; color: var(--muted); font-size: 13px; }
.process-line { height: 4px; margin-top: 26px; border-radius: 999px; background: var(--ivory-deep); overflow: hidden; }
.process-line i { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--brand),var(--display-accent)); }
.process-facts { display: grid; grid-template-columns: repeat(3,1fr) auto; align-items: center; gap: 18px; margin-top: 26px; padding: 22px 24px; border: 1px solid var(--line); border-radius: 22px; background: rgba(255,255,255,.58); }
.process-facts p { margin: 0; }
.process-facts b, .process-facts span { display: block; }
.process-facts b { color: var(--brand-deep); font-size: 15px; }
.process-facts span { margin-top: 2px; color: var(--muted); font-size: 10px; }
.video-button { display: inline-flex; min-height: 46px; align-items: center; gap: 10px; padding: 5px 6px 5px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: var(--paper); cursor: pointer; }
.video-button b { font-size: 9px; }
.video-button i { display: grid; width: 34px; height: 34px; border-radius: 50%; color: #fff; background: var(--brand-deep); font-size: 9px; font-style: normal; place-items: center; }
.process-note { max-width: 760px; margin: 16px 0 0; color: var(--muted); font-size: 10px; }

.pricing { padding: 145px 0; }
.price-head { max-width: 920px; }
.price-recommendation { display: flex; width: fit-content; align-items: center; gap: 8px; margin: 48px 0 18px auto; color: var(--muted); font-size: 12px; }
.price-recommendation span { padding: 8px 11px; border-radius: 999px; color: var(--accent-ink); background: var(--display-accent); font-size: 8px; font-weight: 840; letter-spacing: .08em; text-transform: uppercase; }
.price-recommendation b { color: var(--brand-deep); }
.price-options { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 0; }
.price-option { position: relative; display: block; min-height: 590px; padding: clamp(30px, 4vw, 52px); border: 1px solid var(--line); border-radius: 28px; background: rgba(255,255,255,.5); cursor: pointer; transition: border-color .25s,box-shadow .25s,transform .25s; }
.price-option:hover { transform: translateY(-3px); }
.price-option.is-selected { border-color: var(--display-accent); box-shadow: 0 0 0 4px color-mix(in srgb,var(--display-accent) 28%,transparent),0 28px 78px rgba(18,25,24,.12); }
.price-option:focus-within { outline: 3px solid color-mix(in srgb,var(--display-accent) 55%,#fff); outline-offset: 4px; }
.plan-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.plan-choice { position: absolute; z-index: 2; top: 22px; right: 22px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.82); font-size: 9px; font-weight: 820; letter-spacing: .06em; text-transform: uppercase; }
.price-option.is-selected .plan-choice { color: var(--accent-ink); border-color: transparent; background: var(--display-accent); }
.plan-label { display: flex; min-height: 92px; align-items: center; gap: 14px; padding-top: 28px; }
.plan-label > span { display: grid; width: 54px; height: 54px; border-radius: 17px; color: var(--brand); background: var(--brand-soft); place-items: center; }
.plan-label svg { width: 25px; height: 25px; }
.plan-label p { margin: 0; }
.plan-label strong, .plan-label small { display: block; }
.plan-label strong { font-size: 26px; font-weight: 680; letter-spacing: -.05em; }
.plan-label small { margin-top: 1px; color: var(--muted); font-size: 10px; }
.plan-price { margin-top: 38px; }
.plan-price strong, .plan-price small { display: block; }
.plan-price strong { font-size: clamp(66px, 7vw, 96px); font-weight: 590; letter-spacing: -.08em; line-height: .9; }
.plan-price small { color: var(--muted); font-size: 10px; }
.plan-visual { display: flex; min-height: 54px; align-items: center; gap: 6px; margin-top: 35px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 15px; background: var(--ivory); }
.plan-visual i { display: block; width: 25px; height: 34px; border: 1px solid color-mix(in srgb, var(--brand) 36%, transparent); border-radius: 4px; background: #fff; }
.plan-visual b { margin-left: auto; color: var(--brand); font-size: 11px; }
.plan-many i:nth-child(2) { margin-left: -17px; transform: translateY(-3px); }
.plan-many i:nth-child(3) { margin-left: -17px; transform: translateY(3px); }
.price-option h3 { max-width: 420px; margin: 34px 0 18px; font-size: 24px; font-weight: 640; letter-spacing: -.04em; }
.price-option ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.price-option li { color: var(--muted); font-size: 13px; }
.price-option li::before { content: "✓"; margin-right: 10px; color: var(--display-accent); font-weight: 850; }
.price-pro { color: #fff; border-color: var(--brand-deep); background: var(--brand-deep); box-shadow: 0 30px 80px color-mix(in srgb, var(--brand-deep) 17%, transparent); }
.price-pro > small, .price-pro li { color: rgba(255,255,255,.58); }
.price-pro .plan-label > span { color: var(--accent-ink); background: var(--display-accent); }
.price-pro .plan-label small, .price-pro .plan-price small { color: rgba(255,255,255,.58); }
.price-pro .plan-visual { border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.07); }
.price-pro .plan-visual i { border-color: rgba(255,255,255,.42); background: rgba(255,255,255,.11); }
.price-pro .plan-visual b { color: var(--display-accent-soft); }
.price-pro .plan-choice { color: rgba(255,255,255,.7); border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.08); }
.price-pro.is-selected .plan-choice { color: var(--accent-ink); background: var(--display-accent); }
.plan-action { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 24px; padding: 24px 28px; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: 0 18px 54px rgba(18,25,24,.06); }
.plan-action p { margin: 0; }
.plan-action small,.plan-action strong { display: block; }
.plan-action small { color: var(--muted); font-size: 9px; font-weight: 760; letter-spacing: .1em; text-transform: uppercase; }
.plan-action strong { margin-top: 3px; font-size: 20px; letter-spacing: -.035em; }
.disclosures { margin-top: 52px; border-top: 1px solid var(--line); }
.disclosures details { border-bottom: 1px solid var(--line); }
.disclosures summary { display: flex; min-height: 92px; align-items: center; justify-content: space-between; gap: 24px; font-size: 19px; font-weight: 640; cursor: pointer; list-style: none; }
.disclosures summary::-webkit-details-marker { display: none; }
.disclosures summary span { display: grid; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; font-size: 22px; font-weight: 400; transition: transform .25s ease; place-items: center; }
.disclosures details[open] summary span { transform: rotate(45deg); }
.detail-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; padding: 0 0 38px; }
.detail-grid p, .faq-compact p { margin: 0; padding: 22px; border-radius: 18px; background: rgba(255,255,255,.6); }
.detail-grid b, .detail-grid span, .detail-grid small, .faq-compact b, .faq-compact span { display: block; }
.detail-grid span { margin-top: 6px; color: var(--brand); font-size: 13px; font-weight: 800; }
.detail-grid small { margin-top: 10px; color: var(--muted); }
.market-compact { max-width: 850px; padding-bottom: 38px; }
.market-compact p { margin: 0; color: var(--muted); }
.market-compact small { display: block; margin-top: 16px; color: var(--muted); font-size: 10px; }
.market-compact a { text-decoration: underline; }
.faq-compact { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; padding-bottom: 38px; }
.faq-compact span { margin-top: 10px; color: var(--muted); font-size: 13px; }
.price-action { display: flex; align-items: center; justify-content: space-between; gap: 40px; margin-top: 52px; padding: 28px 0; }
.price-action p { max-width: 610px; margin: 0; }
.price-action strong, .price-action span { display: block; }
.price-action strong { font-size: 24px; letter-spacing: -.035em; }
.price-action span { margin-top: 5px; color: var(--muted); font-size: 13px; }
.legal-copy { max-width: 820px; margin: 0; color: var(--muted); font-size: 9px; }

.final-cta { position: relative; display: flex; min-height: 86svh; align-items: center; justify-content: center; padding: 100px 32px; color: #fff; background: var(--brand-deep); overflow: hidden; isolation: isolate; text-align: center; }
.final-image { position: absolute; z-index: -2; inset: -6%; }
.final-image img { height: 112%; object-fit: cover; }
.final-shade { position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--brand-deep) 45%, transparent), color-mix(in srgb, var(--brand-deep) 94%, transparent) 80%); }
.final-rings { position: absolute; z-index: -1; top: 50%; left: 50%; width: min(74vw,920px); aspect-ratio: 1; transform: translate(-50%,-50%); pointer-events: none; }
.final-rings i { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; }
.final-rings i:nth-child(2) { inset: 14%; border-style: dashed; border-color: color-mix(in srgb, var(--display-accent) 55%, transparent); }
.final-rings i:nth-child(3) { inset: 30%; box-shadow: 0 0 90px color-mix(in srgb, var(--display-brand) 34%, transparent); }
.final-copy { max-width: 960px; }
.final-copy .eyebrow { color: var(--accent); }
.final-copy .button { margin-top: 40px; }

footer { padding: 70px max(32px, calc((100vw - 1220px) / 2)) 30px; color: #fff; background: #0d1110; }
.footer-main { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; }
footer .logo { grid-row: 1; }
footer .footer-main > p { grid-row: 2; margin: 0; color: rgba(255,255,255,.46); font-size: 12px; }
.footer-main nav { display: flex; grid-column: 2; grid-row: 1 / 3; gap: 24px; color: rgba(255,255,255,.68); font-size: 12px; }
.footer-legal { display: flex; justify-content: space-between; gap: 18px; margin: 42px 0 0; padding-top: 22px; color: rgba(255,255,255,.5); border-top: 1px solid rgba(255,255,255,.12); font-size: 10px; }
.footer-legal nav { display: flex; gap: 18px; }
.footer-legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.mobile-cta { display: none; }

.video-dialog { width: min(960px, calc(100% - 30px)); max-width: none; padding: 0; border: 0; border-radius: 24px; color: #fff; background: #111; box-shadow: 0 40px 130px rgba(0,0,0,.6); overflow: hidden; }
.video-dialog::backdrop { background: rgba(10,10,10,.78); backdrop-filter: blur(8px); }
.video-dialog header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; }
.video-dialog-logo { width: 142px; height: auto; margin-right: auto; }
.video-dialog header b, .video-dialog header span { display: block; }
.video-dialog header span { color: rgba(255,255,255,.5); font-size: 11px; }
.video-dialog button { width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; color: #fff; background: transparent; font-size: 25px; cursor: pointer; }
.video-dialog video { width: 100%; max-height: 75svh; background: #000; }
.video-frame { position: relative; background: #000; }
.video-frame-logo { position: absolute; z-index: 2; top: 16px; left: 16px; width: min(150px, 28%); height: auto; padding: 8px 10px; border-radius: 10px; background: rgba(4,19,38,.62); pointer-events: none; backdrop-filter: blur(8px); }

.has-gsap .reveal, .has-gsap .media-reveal { will-change: transform, opacity; }
.no-motion .reveal, .no-motion .media-reveal { opacity: 1 !important; transform: none !important; clip-path: none !important; }

@media (max-width: 1080px) {
  .site-header { grid-template-columns: 1fr auto; }
  .desktop-nav { display: none; }
  .header-cta { margin-left: auto; }
  .hero-grid { grid-template-columns: 1fr; align-content: center; }
  .hero-copy { padding-top: 40px; }
  .hero-proof { position: absolute; right: 0; bottom: 42px; width: 310px; }
  .story-layout { grid-template-columns: .82fr 1.18fr; gap: 55px; }
  .process-journey ol { grid-template-columns: repeat(2,1fr); }
  .process-facts { grid-template-columns: repeat(2,1fr); }
  .mid-cta-grid { grid-template-columns: .9fr 1.1fr; gap: 35px; }
}

@media (max-width: 820px) {
  :root { --wrap: min(100% - 40px, 680px); --header-height: 70px; }
  .site-header { grid-template-columns: 1fr auto; padding: 0 20px; }
  .header-cta { display: none; }
  .menu-button { display: grid; width: 48px; height: 48px; padding: 0; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; background: transparent; place-content: center; gap: 5px; }
  .site-header.is-scrolled .menu-button { border-color: var(--line); }
  .menu-button > span:not(.sr-only) { display: block; width: 18px; height: 1px; background: currentColor; transition: transform .2s ease; }
  .menu-button.is-open > span:first-child { transform: translateY(3px) rotate(45deg); }
  .menu-button.is-open > span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }
  .mobile-menu { position: absolute; top: 62px; right: 14px; left: 14px; display: grid; gap: 4px; padding: 14px; color: var(--ink); border: 1px solid var(--line); border-radius: 20px; background: rgba(251,250,247,.97); box-shadow: 0 22px 60px rgba(16,24,22,.18); backdrop-filter: blur(18px); }
  .mobile-menu[hidden] { display: none; }
  .mobile-menu > a:not(.button) { min-height: 48px; padding: 13px 12px; border-bottom: 1px solid var(--line); font-size: 14px; }
  .mobile-menu .button { margin-top: 8px; }
  .hero-visual { width: 100%; opacity: .72; }
  .hero-visual img { object-position: var(--hero-position, 62% center); }
  .hero-shade { background: linear-gradient(90deg, color-mix(in srgb, var(--brand-deep) 97%, transparent), color-mix(in srgb, var(--brand-deep) 68%, transparent)), linear-gradient(0deg, color-mix(in srgb, var(--brand-deep) 90%, transparent), transparent 68%); }
  .hero-grid { width: var(--wrap); padding: 120px 0 110px; }
  .hero h1 { font-size: clamp(55px, 12vw, 86px); }
  .hero-copy { max-width: 650px; }
  .hero-proof { position: static; width: 100%; margin: 30px 0 0; }
  .scroll-cue { display: none; }
  .compare-section, .benefits, .diagram-section, .pricing { padding-top: 110px; padding-bottom: 110px; }
  .compare-shell { width: calc(100% - 24px); }
  .compare-canvas { --preview-height: 540px; }
  .old-site header { min-height: 75px; }
  .old-content { grid-template-columns: 1fr; gap: 18px; padding-top: 22px; }
  .old-content img { height: 230px; }
  .old-content p { max-height: 62px; overflow: hidden; }
  .after-copy { margin-top: 96px; }
  .after-panel .after-copy { right: 3%; width: 47%; padding: 22px; }
  .after-panel .after-copy h3 { font-size: 38px; }
  .after-panel .after-proof { left: 51%; }
  .after-nav span { display: none; }
  .story-section { padding: 110px 0; }
  .story-layout { display: flex; flex-direction: column; }
  .story-copy { order: 2; }
  .story-stage { position: sticky; top: 88px; z-index: 3; order: 1; width: calc(100% - 28px); height: min(76vw, 620px); margin: 0 auto 24px; }
  .story-copy { display: grid; gap: 12px; padding: 0; }
  .story-beat { min-height: 0; padding: 24px; border: 1px solid rgba(255,255,255,.14); border-radius: 20px; background: rgba(255,255,255,.04); opacity: 1; }
  .story-beat h3 { font-size: 28px; }
  .story-beat-mobile { display: none; }
  .benefit-list { grid-template-columns: 1fr; }
  .benefit-map { max-width: none; }
  .benefit-map > div { grid-template-columns: repeat(2,1fr); gap: 18px; }
  .benefit-map article:nth-child(2)::after { display: none; }
  .benefit { min-height: 330px; padding: 26px; }
  .benefit + .benefit { padding-left: 26px; }
  .benefit > div { margin-top: 48px; }
  .image-mosaic { height: 680px; }
  .impact-section { margin-bottom: 110px; padding: 92px 34px; border-radius: 30px; }
  .impact-photos { margin-top: 48px; }
  .impact-photo { height: 285px; }
  .impact-labels { gap: 68px; }
  .impact-row { grid-template-columns: minmax(0,1fr) 52px minmax(0,1fr); }
  .impact-summary { grid-template-columns: 56px 1fr; }
  .impact-summary .button { grid-column: 1 / 3; width: 100%; }
  .mid-cta { width: calc(100% - 24px); min-height: 820px; margin-bottom: 110px; border-radius: 30px; }
  .mid-cta-grid { width: min(100% - 44px, 680px); min-height: 820px; grid-template-columns: 1fr; align-content: center; gap: 24px; }
  .mid-cta-copy { max-width: 600px; padding-top: 45px; }
  .mid-cta-visual { height: 380px; }
  .cta-card-a { top: 36px; right: 5%; height: 270px; }
  .cta-card-b { height: 210px; }
  .cta-card-c { height: 170px; }
  .cta-orbit { right: 39%; bottom: 12px; width: 82px; height: 82px; }
  .cta-orbit b { font-size: 23px; }
  .price-options { grid-template-columns: 1fr; }
  .process-journey ol { grid-template-columns: repeat(2,1fr); }
  .price-option { min-height: 480px; }
  .plan-action { align-items: stretch; flex-direction: column; }
  .plan-action .button { width: 100%; }
  .detail-grid { grid-template-columns: 1fr; }
  .price-action { align-items: flex-start; flex-direction: column; }
  .faq-compact { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  :root { --wrap: calc(100% - 32px); }
  body { padding-bottom: 74px; }
  .logo-name { font-size: 15px; }
  .hero-grid { padding-top: 100px; }
  .hero h1 { font-size: clamp(48px, 15vw, 70px); line-height: .88; }
  .hero-intro { font-size: 16px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 18px; }
  .hero-actions > p { padding: 0; border-left: 0; }
  .hero-actions .button { width: 100%; }
  .proof-strip { padding: 15px 0; }
  .section-heading h2, .story-intro h2, .benefits-heading h2, .impact-heading h2, .diagram-heading h2, .price-head h2, .final-copy h2 { font-size: clamp(39px, 12vw, 55px); }
  .compare-section .section-heading { margin-bottom: 42px; padding-inline: 16px; }
  .compare-shell { width: calc(100% - 16px); border-radius: 18px; }
  .browser-chrome { height: 42px; padding: 0 12px; }
  .browser-chrome em { display: none; }
  .browser-chrome p { gap: 6px; font-size: 8px; }
  .compare-top-labels { top: 10px; right: 8px; left: 8px; gap: 8px; }
  .compare-top-labels span { min-width: 0; gap: 1px; padding: 8px 9px 7px; border-radius: 9px; }
  .compare-top-labels b { font-size: 13px; letter-spacing: .06em; }
  .compare-top-labels small { font-size: 6px; letter-spacing: .04em; }
  .compare-canvas { --preview-height: 480px; }
  .compare-pages { height: calc(var(--preview-height) + 410px); }
  .old-top { padding: 6px 12px; font-size: 7px; }
  .old-site header { min-height: 64px; padding: 12px 16px; }
  .old-site header b { font-size: 21px; }
  .old-site nav { padding: 8px 12px; font-size: 8px; overflow: hidden; }
  .old-content { padding: 16px 14px; }
  .old-content img { height: 185px; }
  .old-content h3 { font-size: 22px; }
  .old-content p { font-size: 10px; }
  .old-boxes { margin: 0 14px; }
  .old-boxes span { padding: 10px 7px; }
  .old-boxes small { font-size: 7px; }
  .old-preview-services { min-height: 410px; padding: 34px 14px 48px; }
  .old-preview-services h4 { margin-bottom: 18px; font-size: 24px; }
  .old-preview-services ul { grid-template-columns: 1fr; gap: 7px; }
  .old-preview-services li { min-height: 68px; padding: 11px 13px; }
  .old-preview-services li span { margin-top: 5px; }
  .old-preview-services > p { margin-top: 16px; }
  .after-nav { min-height: 62px; margin-inline: 18px; }
  .after-nav b { font-size: 14px; }
  .after-nav em { padding: 7px 8px; font-size: 7px; }
  .after-copy { margin: 90px 18px 0; }
  .after-copy h3 { font-size: 42px; }
  .after-copy p { font-size: 12px; }
  .after-proof { right: 18px; bottom: 16px; left: 18px; }
  .after-proof span { font-size: 7px; }
  .after-panel .after-copy { top: 46%; right: 12px; width: calc(50% - 18px); padding: 16px 13px; border-radius: 16px; transform: translateY(-44%); backdrop-filter: blur(10px); }
  .after-panel .after-copy small { font-size: 6px; letter-spacing: .1em; }
  .after-panel .after-copy h3 { margin: 8px 0; font-size: 25px; }
  .after-panel .after-copy p { font-size: 8px; }
  .after-panel .after-copy > b { margin-top: 13px; padding: 8px 9px; font-size: 7px; }
  .after-panel .after-proof { left: 52%; }
  .after-preview-services { min-height: 320px; padding: 32px 18px 28px; }
  .after-preview-services h4 { margin: 7px 0 20px; font-size: 28px; }
  .after-preview-services > div { grid-template-columns: 1fr; gap: 7px; }
  .after-service-card { min-height: 82px; padding: 12px 14px; border-radius: 12px; }
  .after-service-card h5 { margin: 7px 0 3px; font-size: 15px; }
  .after-service-card p { max-width: calc(100% - 22px); font-size: 8px; }
  .after-service-card i { right: 13px; bottom: 11px; }
  .after-preview-cta { min-height: 90px; padding: 15px 18px; }
  .after-preview-cta > span { padding: 9px 10px; font-size: 7px; }
  .compare-scroll-hint { right: 10px; bottom: 82px; min-height: 34px; padding-inline: 10px; font-size: 8px; }
  .compare-divider span { width: 46px; height: 46px; }
  .compare-legend { min-height: 58px; grid-template-columns: 1fr 1fr; padding: 0 15px; }
  .compare-legend p { display: none; }
  .story-section { padding: 96px 0; }
  .story-intro { margin-bottom: 42px; }
  .story-stage { height: 92vw; border-radius: 24px; }
  .story-stage { display: none; }
  .story-beat { grid-template-columns: 48px 1fr; padding: 20px 16px; }
  .story-beat > span { font-size: 23px; }
  .story-beat-mobile { display: block; height: 220px; margin: 0 0 22px; border-radius: 15px; overflow: hidden; }
  .story-beat-mobile img { height: 100%; object-fit: cover; }
  .story-beat p { font-size: 13px; }
  .benefit-map { margin-top: 36px; padding: 18px 16px; }
  .benefit-map > div { grid-template-columns: 1fr; gap: 10px; }
  .benefit-map article { min-height: 56px; padding: 7px 34px 7px 7px; border-radius: 15px; background: rgba(255,255,255,.72); }
  .benefit-map article:not(:last-child)::after { top: auto; right: 13px; bottom: -10px; display: block; font-size: 15px; transform: rotate(90deg); }
  .benefit { min-height: 310px; padding: 22px; border-radius: 20px; }
  .benefit + .benefit { padding-left: 22px; }
  .benefit > small { font-size: 76px; }
  .benefit > .benefit-icon { top: 22px; right: 22px; }
  .benefit > div { margin-top: 46px; }
  .image-mosaic { height: auto; grid-template-columns: 1fr 1fr; grid-template-rows: 390px 245px; gap: 10px; margin-top: 60px; }
  .mosaic-1 { grid-column: 1 / 3; grid-row: 1; }
  .image-mosaic figure { border-radius: 19px; }
  .image-mosaic img { height: 105%; }
  .image-mosaic figcaption { right: 9px; bottom: 9px; left: 9px; padding: 7px 9px; text-align: center; }
  .impact-section { width: calc(100% - 16px); margin-bottom: 96px; padding: 76px 16px 22px; border-radius: 23px; }
  .impact-heading { padding-inline: 6px; }
  .impact-photos { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 34px; }
  .impact-photo { height: 170px; border-radius: 16px; }
  .impact-photo figcaption { right: 12px; bottom: 12px; left: 12px; }
  .impact-photo figcaption b { font-size: 15px; }
  .impact-labels { display: none; }
  .impact-comparison { gap: 8px; margin-top: 18px; }
  .impact-row { grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; border: 1px solid rgba(255,255,255,.1); border-radius: 17px; background: rgba(0,0,0,.08); }
  .impact-side { min-height: 122px; grid-template-columns: 26px 1fr; align-content: start; gap: 8px; padding: 12px 10px; border-radius: 13px; }
  .impact-side > span { width: 26px; height: 26px; border-radius: 9px; font-size: 15px; }
  .impact-new > span { font-size: 11px; }
  .impact-side p { font-size: 11px; line-height: 1.38; }
  .impact-side small { margin-bottom: 3px; font-size: 7px; }
  .impact-arrow { display: none; }
  .impact-summary { grid-template-columns: 45px 1fr; margin-top: 18px; padding: 18px; border-radius: 18px; }
  .impact-summary > span { width: 45px; height: 45px; border-radius: 14px; }
  .impact-summary b { font-size: 15px; }
  .impact-summary .button { grid-column: 1 / 3; min-width: 0; width: 100%; }
  .mid-cta { min-height: 760px; margin-bottom: 96px; border-radius: 23px; }
  .mid-cta-grid { width: calc(100% - 32px); min-height: 760px; }
  .mid-cta-copy { padding-top: 56px; }
  .mid-cta-copy h2 { font-size: 43px; }
  .mid-cta-copy .button { width: 100%; }
  .mid-cta-visual { height: 300px; }
  .cta-card-a { top: 28px; right: 0; width: 68%; height: 220px; }
  .cta-card-b { width: 47%; height: 165px; }
  .cta-card-c { right: 0; width: 42%; height: 135px; }
  .cta-orbit { right: 43%; bottom: 0; width: 70px; height: 70px; font-size: 13px; }
  .cta-orbit b { font-size: 20px; }
  .cta-orbit small { font-size: 7px; }
  .process-journey { margin-top: 48px; }
  .process-journey ol { grid-template-columns: 1fr; }
  .process-step figure { height: 210px; }
  .process-step > div { min-height: 220px; padding: 24px 20px 26px; }
  .process-step h3 { margin-top: 40px; }
  .process-facts { grid-template-columns: 1fr; padding: 20px; }
  .process-facts .video-button { justify-content: space-between; }
  .price-recommendation { align-items: flex-start; margin: 36px 0 14px; line-height: 1.4; }
  .price-options { margin-top: 0; }
  .price-option { min-height: 440px; padding: 30px 24px; }
  .price-option h3 { margin-top: 30px; }
  .disclosures summary { min-height: 82px; font-size: 16px; }
  .final-cta { min-height: 78svh; padding-inline: 20px; }
  .footer-main { display: block; }
  .footer-main nav { display: grid; grid-template-columns: 1fr 1fr; margin-top: 34px; }
  .footer-legal { align-items: flex-start; flex-direction: column; }
  footer .footer-main > p { margin-top: 12px; }
  .mobile-cta { position: fixed; z-index: 90; right: 10px; bottom: 10px; left: 10px; display: flex; min-height: 62px; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 9px 8px 17px; color: #fff; border: 1px solid rgba(255,255,255,.16); border-radius: 18px; background: color-mix(in srgb, var(--brand-deep) 95%, transparent); box-shadow: 0 14px 45px rgba(0,0,0,.28); backdrop-filter: blur(16px); }
  .mobile-cta small, .mobile-cta b { display: block; }
  .mobile-cta small { color: rgba(255,255,255,.55); font-size: 8px; }
  .mobile-cta b { font-size: 13px; }
  .mobile-cta strong { padding: 11px 13px; border-radius: 12px; color: var(--accent-ink); background: var(--accent); font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .hero-visual img, .image-mosaic img, .final-rings i { transform: none !important; }
}

/* Abschließende Größenregel nach den allgemeinen Logo-Stilen */
.site-header .logo, footer .logo { width: clamp(220px, 20vw, 280px); min-height: 42px; }
.site-header .brand-logo, footer .brand-logo { width: 100%; height: auto; }
@media (max-width: 560px) { .site-header .logo, footer .logo { width: 220px; } }

/* Abschlusskorrekturen: Navigation A, durchgängiger Vergleich, kompaktere Wirkung */
.site-header{grid-template-columns:auto 1fr auto}
.desktop-nav{justify-self:end}
.compare-canvas{height:calc(var(--preview-height) + 500px);overflow:hidden}
.compare-scroll{position:absolute;inset:0;overflow:hidden;overscroll-behavior:auto;scrollbar-width:none}
.compare-scroll::-webkit-scrollbar{display:none}
.after-service-card{opacity:1;transform:none}
.compare-divider span{top:94px}
.compare-range{top:52px}
.benefit-map{max-width:none}
.impact-section{padding-top:92px;padding-bottom:92px}
.impact-photos{margin-top:44px}
.impact-photo{height:250px}
.impact-labels{margin-top:28px}
.impact-row{min-height:88px}
.impact-side{padding:14px 18px}
.impact-summary{margin-top:20px;padding:20px}
.process-facts{grid-template-columns:repeat(3,1fr)}
.video-feature{position:relative;display:grid;width:100%;min-height:210px;grid-template-columns:240px 1fr auto;align-items:center;gap:26px;margin-top:18px;padding:14px 24px 14px 14px;color:#fff;border:0;border-radius:24px;background:var(--brand-deep);box-shadow:0 22px 55px rgba(18,25,24,.12);overflow:hidden;text-align:left;cursor:pointer}
.video-feature::after{position:absolute;inset:0;content:"";background:linear-gradient(90deg,transparent 20%,color-mix(in srgb,var(--brand-deep) 72%,transparent) 52%,var(--brand-deep));pointer-events:none}
.video-feature>img{position:relative;z-index:1;width:100%;height:182px;border-radius:16px;object-fit:cover}
.video-feature>span,.video-feature>i{position:relative;z-index:2}
.video-feature small,.video-feature b,.video-feature em{display:block}
.video-feature small{color:var(--display-accent);font-size:9px;font-weight:850;letter-spacing:.16em}
.video-feature b{margin-top:8px;font-size:clamp(22px,2.5vw,34px);letter-spacing:-.04em}
.video-feature em{margin-top:4px;color:rgba(255,255,255,.62);font-size:12px;font-style:normal}
.video-feature>i{display:grid;width:62px;height:62px;border-radius:50%;color:var(--accent-ink);background:var(--display-accent);font-size:16px;font-style:normal;place-items:center;transition:transform .25s ease}
.video-feature:hover>i{transform:scale(1.08)}
.region-section{display:grid;width:var(--wrap);grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:80px;margin:0 auto;padding:20px 0 145px}
.region-copy h2{margin:0;font-size:clamp(42px,5vw,70px);font-weight:590;letter-spacing:-.065em;line-height:.96}
.region-copy>p:last-child{max-width:650px;margin:24px 0 0;color:var(--muted)}
.region-list{display:grid;align-content:start;gap:0;margin:0;padding:0;border-top:1px solid var(--line);list-style:none}
.region-list li{padding:17px 2px;border-bottom:1px solid var(--line);color:var(--brand-deep);font-size:clamp(17px,2vw,24px);font-weight:640;letter-spacing:-.03em}
.footer-legal button{padding:0;color:inherit;border:0;background:transparent;font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.mobile-cta{transition:opacity .25s ease,transform .25s ease}
.mobile-cta.is-hidden{opacity:0;pointer-events:none;transform:translateY(calc(100% + 24px))}
@media(max-width:1080px){
  .site-header{grid-template-columns:auto 1fr auto auto}
  .menu-button{display:grid;width:46px;height:46px;padding:0;border:1px solid rgba(255,255,255,.3);border-radius:50%;background:transparent;place-content:center;gap:5px}
  .site-header.is-scrolled .menu-button{border-color:var(--line)}
  .menu-button>span:not(.sr-only){display:block;width:18px;height:1px;background:currentColor;transition:transform .2s ease}
  .menu-button.is-open>span:first-child{transform:translateY(3px) rotate(45deg)}
  .menu-button.is-open>span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}
  .mobile-menu{position:absolute;top:70px;right:20px;display:grid;width:min(360px,calc(100vw - 40px));gap:4px;padding:14px;color:var(--ink);border:1px solid var(--line);border-radius:20px;background:rgba(251,250,247,.97);box-shadow:0 22px 60px rgba(16,24,22,.18);backdrop-filter:blur(18px)}
  .mobile-menu[hidden]{display:none}
  .mobile-menu>a:not(.button){min-height:48px;padding:13px 12px;border-bottom:1px solid var(--line);font-size:14px}
  .mobile-menu .button{margin-top:8px}
  .process-facts{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:820px){
  .site-header{grid-template-columns:1fr auto}
  .compare-canvas{height:calc(var(--preview-height) + 500px)}
  .impact-section{padding-top:76px;padding-bottom:60px}
  .impact-photo{height:235px}
  .region-section{grid-template-columns:1fr;gap:38px;padding-bottom:110px}
}
@media(max-width:560px){
  .compare-canvas{height:calc(var(--preview-height) + 410px)}
  .compare-divider span{top:76px}
  .compare-range{top:34px}
  .impact-photos{grid-template-columns:1fr 1fr}
  .impact-photo{height:170px}
  .impact-photo figcaption b{font-size:15px}
  .impact-row{min-height:0}
  .video-feature{min-height:310px;grid-template-columns:1fr 52px;gap:14px;padding:14px}
  .video-feature::after{background:linear-gradient(0deg,var(--brand-deep) 28%,color-mix(in srgb,var(--brand-deep) 42%,transparent))}
  .video-feature>img{grid-column:1 / 3;height:170px}
  .video-feature>i{width:52px;height:52px}
  .region-section{padding-bottom:96px}
  .plan-label{padding-right:78px}
  .plan-label em{position:absolute;top:70px;right:24px;margin:0}
}

/* Availability follows the same product catalog as the configurator. */
.price-option.is-unavailable{border-style:dashed;cursor:default;box-shadow:none}
.price-option.is-unavailable .plan-choice{color:var(--muted);background:var(--ivory-deep)}
.price-option.is-unavailable .plan-price strong{color:var(--muted)}
.plan-action a[aria-disabled="true"]{opacity:.6;cursor:wait}

.hero-film{display:inline-flex;align-items:center;gap:12px;margin-top:22px;padding:0;border:0;color:#fff;background:none;text-align:left;cursor:pointer;font:inherit}
.hero-film i{display:grid;width:46px;height:46px;border:1px solid #ffffff70;border-radius:50%;place-items:center;font-size:12px;font-style:normal;transition:background .2s,transform .2s}
.hero-film span{font-size:14px;font-weight:650;line-height:1.4}
.hero-film small{display:block;font-size:11px;font-weight:400;color:#ffffffb3}
.hero-film:hover i{background:#ffffff20;transform:scale(1.08)}
.hero-film:focus-visible{outline:2px solid #fff;outline-offset:7px;border-radius:24px}
@media(prefers-reduced-motion:reduce){.hero-film i{transition:none}}