/*!
 * Docsurance – Website-Styles (TYPO3-Sitepackage docsurance_sitepackage 1.0.0)
 * Design 2.6 – identisch mit dem bisherigen WordPress-Theme.
 * Keine externen Requests: Schriften lokal (LG München I, 3 O 17493/20).
 */
/* Self-hosted fonts (latin subset) — no requests to Google (LG München I, 3 O 17493/20) */
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../Fonts/dm-sans-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../Fonts/dm-sans-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 500;
  font-display: swap;
  src: url('../Fonts/fraunces-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../Fonts/fraunces-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root {
	/* Warm neutrals (one temperature) */
	--paper:        #F7F2E9;
	--paper-2:      #EFE6D6;
	--paper-3:      #E6DAC5;
	--surface:      #FFFCF6;
	--ink:          #221D18;
	--ink-2:        #463F36;
	--muted:        #6F665A;
	--line:         #E3D8C5;
	--line-strong:  #CDBFA7;

	/* Brand */
	--teal:         #0A6E5C;
	--teal-600:     #0D7F6A;
	--teal-700:     #075547;
	--teal-900:     #0F332C;
	--teal-50:      #E4EEE7;
	--clay:         #F5A361;
	--clay-700:     #A95A22;

	/* Semantic */
	--on-accent:    #FFFCF6;
	--success:      #2B7A55;
	--error:        #B03E2A;
	--error-bg:     #F8E6DF;
	--focus:        #0A6E5C;

	/* Type */
	--f-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
	--f-body:    'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

	--t-display: clamp(2.55rem, 1.6rem + 3.9vw, 4.55rem);
	--t-h2:      clamp(1.95rem, 1.35rem + 2.3vw, 3.1rem);
	--t-h3:      clamp(1.18rem, 1.05rem + .45vw, 1.4rem);
	--t-lead:    clamp(1.05rem, 1rem + .3vw, 1.2rem);
	--t-body:    1rem;
	--t-small:   .875rem;
	--t-label:   .75rem;

	/* Space */
	--s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
	--s-6: 2rem;   --s-7: 3rem; --s-8: 4rem;   --s-9: 6rem;
	--section: clamp(4.5rem, 3rem + 6vw, 8.5rem);
	--gutter: clamp(1.25rem, .8rem + 2vw, 2.5rem);
	--max: 1240px;

	/* Shape */
	--r-input: 12px;
	--r-card: 20px;
	--r-media: 28px;
	--r-pill: 999px;

	/* Depth (tinted to paper) */
	--sh-1: 0 1px 2px rgba(74, 52, 28, .06), 0 1px 1px rgba(74, 52, 28, .04);
	--sh-2: 0 10px 30px -12px rgba(74, 52, 28, .22), 0 2px 6px rgba(74, 52, 28, .06);
	--sh-3: 0 30px 60px -24px rgba(40, 30, 18, .35), 0 8px 20px -10px rgba(40, 30, 18, .18);

	/* Motion */
	--ease-out: cubic-bezier(.22, 1, .36, 1);
	--ease-soft: cubic-bezier(.4, 0, .2, 1);
	--dur-1: .18s; --dur-2: .35s; --dur-3: .8s;
	/* Spring: slight overshoot for things you touch (thumbs, actions, cards) */
	--ease-spring: cubic-bezier(.34, 1.36, .64, 1);

	/* Layers */
	--z-base: 1; --z-sticky: 40; --z-nav: 50; --z-sheet: 60;

	--nav-h: 64px;
	color-scheme: light;
}

/* ==========================================================================
   2. Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--nav-h) + 40px);
}
body {
	font-family: var(--f-body);
	font-size: var(--t-body);
	line-height: 1.65;
	color: var(--ink-2);
	background: var(--paper);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}
[hidden] { display: none !important; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
h1, h2, h3, h4 { color: var(--ink); font-weight: 500; line-height: 1.1; text-wrap: balance; }
p { text-wrap: pretty; }
strong { font-weight: 600; color: var(--ink); }
::selection { background: var(--teal); color: var(--on-accent); }

:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 3px;
	border-radius: 6px;
}

.container {
	width: min(100% - 2 * var(--gutter), var(--max));
	margin-inline: auto;
}
.sr-only {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
	position: fixed; top: 12px; left: 12px; z-index: 100;
	padding: .7rem 1.1rem; border-radius: var(--r-pill);
	background: var(--ink); color: var(--paper); font-weight: 600; text-decoration: none;
	transform: translateY(-160%); transition: transform var(--dur-2) var(--ease-out);
}
.skip-link:focus { transform: none; }

.num { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; }

/* Type roles */
.eyebrow {
	display: inline-flex; align-items: center; gap: .6rem;
	font-size: var(--t-label); font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
	color: var(--teal-700);
}
.eyebrow::before {
	content: ""; width: 18px; height: 1.5px; background: currentColor; opacity: .55;
}
.display {
	font-family: var(--f-display);
	font-size: var(--t-display);
	font-weight: 450;
	font-variation-settings: "opsz" 144, "SOFT" 50;
	letter-spacing: -.028em;
	line-height: 1.02;
}
.display em, .h2 em {
	font-style: italic; font-weight: 350; color: var(--teal);
}
.h2 {
	font-family: var(--f-display);
	font-size: var(--t-h2);
	font-weight: 450;
	font-variation-settings: "opsz" 120;
	letter-spacing: -.022em;
	line-height: 1.06;
}
.h3 {
	font-family: var(--f-display);
	font-size: var(--t-h3);
	font-weight: 500;
	letter-spacing: -.01em;
	line-height: 1.2;
}
.lead { font-size: var(--t-lead); line-height: 1.6; color: var(--ink-2); max-width: 58ch; }
.small { font-size: var(--t-small); color: var(--muted); }
.section-head { display: grid; gap: var(--s-4); max-width: 44rem; }
.section-head .lead { margin-top: var(--s-2); }

/* ==========================================================================
   3. Buttons, chips, fields
   ========================================================================== */
.btn {
	--btn-bg: var(--teal); --btn-fg: var(--on-accent); --btn-bd: transparent;
	position: relative; isolation: isolate; overflow: hidden;
	display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
	min-height: 52px; padding: .8rem 1.45rem;
	border-radius: var(--r-pill); border: 1.5px solid var(--btn-bd);
	background: var(--btn-bg); color: var(--btn-fg);
	font-weight: 600; font-size: .98rem; line-height: 1.1; text-decoration: none; white-space: nowrap;
	transition: transform .45s var(--ease-spring), box-shadow var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out), color var(--dur-2);
	-webkit-tap-highlight-color: transparent;
}
.btn .icon { transition: transform var(--dur-2) var(--ease-out); }
.btn:hover .icon--arrow { transform: translateX(3px); }
.btn:active { transform: scale(.96); transition-duration: .1s; }
.btn--primary { box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 10px 24px -12px rgba(10, 110, 92, .8); }
/* Directional fill on hover */
.btn--primary::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: var(--teal-700);
	transform: translateX(-101%);
	transition: transform .45s var(--ease-out);
}
.btn--primary:hover::after { transform: none; }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line-strong); }
.btn--ghost:hover { --btn-bg: var(--surface); --btn-bd: var(--ink); }
.btn--cream { --btn-bg: var(--paper); --btn-fg: var(--teal-900); }
.btn--cream:hover { --btn-bg: #fff; }
.btn--block { width: 100%; }
.btn[disabled], .btn.is-loading { cursor: progress; opacity: .85; }
.btn .spinner {
	width: 16px; height: 16px; border-radius: 50%;
	border: 2px solid currentColor; border-right-color: transparent;
	animation: spin .7s linear infinite; display: none;
}
.btn.is-loading .spinner { display: inline-block; }
.btn.is-loading .icon--arrow { display: none; }

.chip {
	display: inline-flex; align-items: center; gap: .45rem;
	min-height: 38px; padding: .4rem .95rem; border-radius: var(--r-pill);
	border: 1px solid var(--line-strong); background: transparent;
	font-size: .88rem; font-weight: 500; color: var(--ink-2);
	transition: background-color var(--dur-2), color var(--dur-2), border-color var(--dur-2), transform .4s var(--ease-spring);
	-webkit-tap-highlight-color: transparent;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip:active { transform: scale(.94); transition-duration: .1s; }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip .count { font-size: .75rem; opacity: .6; }

.field { display: grid; gap: .45rem; }
.field__label { font-size: .85rem; font-weight: 600; color: var(--ink); }
.field__label .opt { font-weight: 400; color: var(--muted); }
.field__help { font-size: .8rem; color: var(--muted); }
.field__control {
	width: 100%; min-height: 50px; padding: .75rem .95rem;
	border-radius: var(--r-input); border: 1.5px solid var(--line-strong);
	background: var(--surface); color: var(--ink);
	transition: border-color var(--dur-2), box-shadow var(--dur-2), background-color var(--dur-2);
	-webkit-appearance: none; appearance: none;
}
select.field__control {
	padding-right: 2.6rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23463F36' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 1rem center;
}
.field__control::placeholder { color: #A39785; }
.field__control:hover { border-color: var(--ink-2); }
.field__control:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(10, 110, 92, .14); }
.field__control[aria-invalid="true"] { border-color: var(--error); box-shadow: 0 0 0 4px rgba(176, 62, 42, .1); }
.field__error { display: none; align-items: center; gap: .35rem; font-size: .82rem; font-weight: 500; color: var(--error); }
.field__error:not(:empty) { display: flex; }
.field--check { grid-template-columns: auto 1fr; align-items: start; gap: .75rem; }
.field--check input {
	width: 22px; height: 22px; margin-top: 2px; accent-color: var(--teal); cursor: pointer;
}
.field--check label { font-size: .88rem; line-height: 1.5; color: var(--ink-2); cursor: pointer; }
.field--check .field__error { grid-column: 2; }

/* ==========================================================================
   4. Header / navigation
   ========================================================================== */
.site-header {
	position: fixed; inset: 14px 0 auto; z-index: var(--z-nav);
	pointer-events: none;
}

.nav {
	pointer-events: auto;
	display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-5);
	height: var(--nav-h); padding: 0 .55rem 0 1.15rem;
	border-radius: var(--r-pill);
	background: rgba(255, 252, 246, .72);
	border: 1px solid rgba(205, 191, 167, .55);
	box-shadow: 0 1px 0 rgba(255,255,255,.7) inset;
	-webkit-backdrop-filter: blur(16px) saturate(160%);
	backdrop-filter: blur(16px) saturate(160%);
	transition: box-shadow var(--dur-2) var(--ease-out), background-color var(--dur-2);
}
.is-scrolled .nav { background: rgba(255, 252, 246, .9); box-shadow: var(--sh-2); }

.brand {
	display: inline-flex; align-items: center; gap: .6rem;
	font-family: var(--f-display); font-size: 1.32rem; font-weight: 550; letter-spacing: -.02em;
	color: var(--ink); text-decoration: none;
}
.brand__logo { display: block; height: 36px; width: auto; max-width: none; flex-shrink: 0; }
.brand img { max-height: 36px; width: auto; }
@media (max-width: 480px) { .brand__logo, .brand img { height: 30px; } }

.nav__menu { justify-self: center; position: relative; }
.nav__menu ul { display: flex; gap: .15rem; list-style: none; padding: 0; position: relative; }
.nav__menu a { white-space: nowrap;
	position: relative; z-index: 1; display: block;
	padding: .55rem .95rem; border-radius: var(--r-pill);
	font-size: .92rem; font-weight: 500; color: var(--ink-2); text-decoration: none;
	transition: color var(--dur-2);
}
.nav__menu a:hover, .nav__menu a[aria-current="true"], .nav__menu .current-menu-item > a { color: var(--ink); }
.nav__menu .menu-item-cta { display: none; } /* CTA lives in .nav__cta on desktop */
.nav__indicator {
	position: absolute; top: 50%; left: 0; height: 38px; width: 0; z-index: 0;
	border-radius: var(--r-pill); background: var(--paper-2);
	transform: translate(var(--ind-x, 0), -50%); width: var(--ind-w, 0);
	opacity: var(--ind-o, 0);
	transition: transform .45s var(--ease-out), width .45s var(--ease-out), opacity var(--dur-2);
	pointer-events: none;
}
.nav__cta { display: flex; align-items: center; gap: .3rem; }
.nav__cta .btn { min-height: 46px; padding: .6rem 1.15rem; font-size: .92rem; }
.nav__login {
	display: inline-flex; align-items: center; gap: .45rem; min-height: 46px; padding: .55rem .95rem;
	border-radius: var(--r-pill); font-size: .92rem; font-weight: 500; color: var(--ink-2); text-decoration: none;
	transition: background-color var(--dur-2), color var(--dur-2);
}
.nav__login:hover { background: var(--paper-2); color: var(--ink); }
.nav__login .icon { color: var(--teal); }
.nav__toggle {
	display: none; width: 46px; height: 46px; border-radius: 50%;
	place-items: center; color: var(--ink); background: var(--paper-2);
	transition: transform var(--dur-1);
}
.nav__toggle:active { transform: scale(.94); }
.nav__toggle .icon--close { display: none; }
.nav-open .nav__toggle .icon--close { display: block; }
.nav-open .nav__toggle .icon--menu { display: none; }

.nav-sheet {
	pointer-events: auto;
	position: absolute; left: 0; right: 0; top: calc(100% + 10px);
	padding: var(--s-4); border-radius: 26px;
	background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-3);
	opacity: 0; transform: translateY(-8px) scale(.98); transform-origin: top center;
	visibility: hidden;
	transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), visibility 0s linear var(--dur-2);
}
.nav-open .nav-sheet { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.nav-sheet ul { list-style: none; padding: 0; display: grid; }
.nav-sheet a:not(.btn) {
	display: flex; justify-content: space-between; align-items: center;
	padding: 1rem .9rem; border-radius: 14px;
	font-family: var(--f-display); font-size: 1.35rem; color: var(--ink); text-decoration: none;
}
.nav-sheet a:not(.btn):hover { background: var(--paper); }
.nav-sheet li + li { border-top: 1px solid var(--line); }
.nav-sheet .menu-item-cta { display: none; }
.nav-sheet .btn { margin-top: var(--s-4); width: 100%; }

/* Scroll progress (thin, integrated in nav bottom edge) */
.nav__progress {
	position: absolute; left: 26px; right: 26px; bottom: -1px; height: 2px; overflow: hidden;
	border-radius: 2px; pointer-events: none;
}
.nav__progress span {
	display: block; height: 100%; background: var(--teal);
	transform-origin: left; transform: scaleX(var(--progress, 0));
}
.nav-wrap { position: relative; }

/* ==========================================================================
   5. Hero
   ========================================================================== */
.hero { position: relative; }

/* Full-bleed stage: photo spans the whole viewport width */
.hero__stage {
	position: relative; isolation: isolate; overflow: hidden;
	display: grid; align-items: center;
	min-height: clamp(600px, 90svh, 880px);
	padding-top: calc(var(--nav-h) + clamp(2.5rem, 1.5rem + 3vw, 4.5rem));
	padding-bottom: clamp(5.5rem, 4rem + 4vw, 8rem); /* room for the pulse card */
	background: var(--teal-900);
	color: #FFFCF6;
}
.hero__media { position: absolute; inset: 0; z-index: -2; margin: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 78% 28%; }
.hero__media--center img { object-position: 50% 30%; }
.hero__media--left img { object-position: 22% 28%; }
.hero__scrim {
	position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background:
		linear-gradient(90deg, rgba(8, 32, 27, .9) 0%, rgba(8, 32, 27, .78) 34%, rgba(8, 32, 27, .3) 58%, rgba(8, 32, 27, 0) 72%),
		linear-gradient(180deg, rgba(8, 32, 27, .35) 0%, rgba(8, 32, 27, 0) 22%, rgba(8, 32, 27, 0) 70%, rgba(8, 32, 27, .45) 100%);
}
.hero__media--center ~ .hero__scrim, .hero__media--left ~ .hero__scrim {
	background: linear-gradient(90deg, rgba(8, 32, 27, .88) 0%, rgba(8, 32, 27, .7) 45%, rgba(8, 32, 27, .35) 100%);
}
.hero__inner { position: relative; }
.hero__copy { display: grid; gap: var(--s-5); max-width: 640px; }
.hero__copy .eyebrow { color: #CFE6DD; }
.hero__copy .eyebrow::before { background: var(--clay); }
.hero__title { max-width: 14ch; color: #FFFCF6; text-wrap: balance; }
.hero__title em { color: var(--clay); }
.hero__lead { max-width: 52ch; color: rgba(255, 252, 246, .86); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); }
.hero__assure {
	display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: var(--s-2);
	list-style: none; padding: 0; font-size: .9rem; color: rgba(255, 252, 246, .8);
}
.hero__assure li { display: inline-flex; align-items: center; gap: .45rem; }
.hero__assure .icon { color: var(--clay); }

.btn--ghost-light { --btn-bg: rgba(255, 252, 246, .06); --btn-fg: #FFFCF6; --btn-bd: rgba(255, 252, 246, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.btn--ghost-light:hover { --btn-bg: rgba(255, 252, 246, .16); --btn-bd: #FFFCF6; }

/* Pulse card (one big number + round quick actions) overlaps the photo's lower edge */
.hero__below { position: relative; z-index: 2; margin-top: clamp(-4.5rem, -3rem - 2vw, -3rem); padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }

/* Partners */
.partners {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 2rem;
	margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line);
	font-size: .88rem; color: var(--muted);
}
.partners ul { display: flex; flex-wrap: wrap; gap: .4rem 2rem; list-style: none; padding: 0; }
.partners li { font-family: var(--f-display); font-size: 1.12rem; color: var(--ink); letter-spacing: -.01em; }
.partners__markets { margin-left: .3rem; font-family: var(--f-body); font-size: .7rem; font-weight: 600; letter-spacing: .08em; color: var(--muted); vertical-align: middle; }

/* ==========================================================================
   6. Process rail
   ========================================================================== */
.process { padding-block: calc(var(--section) * .8) var(--section); }
.process__head {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6) clamp(2rem, 5vw, 5rem);
	align-items: end;
}
.process__note {
	display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start;
	padding: 1.1rem 1.25rem; border-radius: var(--r-card);
	background: var(--teal-50); color: var(--teal-900); font-size: .95rem;
}
.process__note .icon { color: var(--teal); margin-top: 2px; }
.process__note strong { color: var(--teal-900); }
.rail {
	position: relative; counter-reset: step;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem);
	margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); padding: 0; list-style: none;
}
.rail::before, .rail::after {
	content: ""; position: absolute; top: 27px; left: 28px; right: 28px; height: 1.5px;
	background: var(--line-strong);
}
.rail::after {
	background: var(--teal); transform-origin: left; transform: scaleX(var(--rail, 0));
	transition: transform 1.4s var(--ease-out);
}
.rail.is-inview { --rail: 1; }
.rail__step { position: relative; z-index: 1; display: grid; gap: .7rem; align-content: start; }
.rail__num {
	display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
	background: var(--paper); border: 1.5px solid var(--line-strong);
	font-family: var(--f-display); font-size: 1.3rem; color: var(--ink);
	transition: background-color .5s var(--ease-out), border-color .5s, color .5s;
}
.rail.is-inview .rail__step .rail__num { background: var(--teal); border-color: var(--teal); color: var(--on-accent); }
.rail.is-inview .rail__step:nth-child(2) .rail__num { transition-delay: .45s; }
.rail.is-inview .rail__step:nth-child(3) .rail__num { transition-delay: .9s; }
.rail__step h3 { margin-top: .6rem; }
.rail__step p { max-width: 34ch; color: var(--ink-2); }

/* ==========================================================================
   7. Products ledger
   ========================================================================== */
.products { padding-block: var(--section); border-top: 1px solid var(--line); }
.products__grid {
	display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr);
	gap: clamp(2.5rem, 5vw, 6rem); align-items: start;
}
.products__aside { position: sticky; top: calc(var(--nav-h) + 48px); display: grid; gap: var(--s-5); }
.filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.ledger {
	list-style: none; padding: .4rem;
	background: var(--surface); border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--sh-1);
}
.ledger__row {
	display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: .35rem 1.25rem; align-items: start;
	padding: 1.2rem 1.1rem; border-radius: 22px; position: relative;
	transition: background-color var(--dur-2) var(--ease-out), opacity var(--dur-2), transform .45s var(--ease-spring);
}
/* Inset dividers between visible rows (grouped-list look) */
.ledger__row:not([hidden]) ~ .ledger__row:not([hidden])::before {
	content: ""; position: absolute; top: 0; left: 5.1rem; right: 1.1rem; height: 1px; background: var(--line);
	transition: opacity var(--dur-2);
}
.ledger__row:hover { background: var(--paper); }
.ledger__row:hover::before, .ledger__row:hover + .ledger__row::before { opacity: 0; }
.ledger__row:active { transform: scale(.985); transition-duration: .12s; }
.ledger__row:has(.ledger__cta:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.ledger__row[hidden] { display: none; }
.ledger__row.is-entering { animation: rowIn .5s var(--ease-spring) both; }
.ledger__icon {
	display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
	background: var(--teal-50); color: var(--teal-700);
	transition: background-color var(--dur-2), color var(--dur-2), transform .45s var(--ease-spring);
}
.ledger__row:hover .ledger__icon { background: var(--teal); color: var(--on-accent); transform: rotate(-6deg) scale(1.04); }
.ledger__main { display: grid; gap: .45rem; min-width: 0; }
.ledger__cat { font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ledger__facts { display: flex; flex-wrap: wrap; gap: .2rem .9rem; list-style: none; padding: 0; font-size: .9rem; color: var(--ink-2); }
.ledger__facts li { display: inline-flex; align-items: center; gap: .4rem; }
.ledger__facts li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--clay); }
.ledger__provider { font-size: .82rem; color: var(--muted); }
.ledger__side { display: grid; justify-items: end; align-content: start; gap: .55rem; }
.ledger__price { text-align: right; white-space: nowrap; padding-top: .15rem; }
.ledger__price--quote b { display: block; font-size: 1.15rem; }
.ledger__price--quote { display: flex; flex-direction: column; align-items: flex-end; }
.ledger__cta {
	display: inline-flex; align-items: center; gap: .2rem; min-height: 32px; padding: .3rem .55rem .3rem .85rem;
	border-radius: var(--r-pill); background: var(--teal-50); color: var(--teal-700);
	font-size: .8rem; font-weight: 600; text-decoration: none; white-space: nowrap;
	transition: background-color var(--dur-2), color var(--dur-2);
}
.ledger__cta .icon { transition: transform .4s var(--ease-spring); }
.ledger__cta::after { content: ""; position: absolute; inset: 0; border-radius: 22px; } /* whole row is tappable */
.ledger__cta:focus-visible { outline: none; }
.ledger__row:hover .ledger__cta { background: var(--teal); color: var(--on-accent); }
.ledger__row:hover .ledger__cta .icon { transform: translateX(2px); }

/* Country switch (Deutschland / Schweiz) */
.market-switch {
	display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .25rem; padding: .3rem;
	border-radius: var(--r-pill); background: var(--paper-2); border: 1px solid var(--line);
}
.market-switch__btn {
	display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .5rem 1.15rem;
	border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink-2);
	font: inherit; font-weight: 600; font-size: .92rem; cursor: pointer;
	transition: background-color var(--dur-2), color var(--dur-2), box-shadow var(--dur-2);
}
.market-switch__btn .count { font-size: .75rem; opacity: .6; }
.market-switch__btn:hover { color: var(--ink); }
.market-switch__btn[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }
.note-ch {
	display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start; margin-top: var(--s-5);
	padding: 1rem 1.15rem; border-radius: var(--r-card); background: var(--teal-50); color: var(--teal-900); font-size: .9rem;
}
.note-ch .icon { color: var(--teal); margin-top: 2px; }
.ledger__price small { display: block; font-size: .75rem; color: var(--muted); }
.ledger__price b { font-family: var(--f-display); font-weight: 500; font-size: 1.5rem; color: var(--ink); letter-spacing: -.01em; }
.ledger__foot { margin-top: var(--s-4); font-size: .8rem; color: var(--muted); max-width: 60ch; }

/* ==========================================================================
   8. Membership + calculator
   ========================================================================== */
.membership {
	position: relative; padding-block: var(--section);
	margin-inline: clamp(0px, 1.4vw, 24px);
	background: var(--paper-2);
	border-radius: clamp(28px, 4vw, 48px);
}
.membership__grid {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: clamp(2rem, 4vw, 4rem); margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); align-items: start;
}
.tiers { display: grid; gap: .6rem; border: 0; padding: 0; min-width: 0; }
.tier {
	position: relative;
	display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem;
	padding: 1.1rem 1.25rem; border-radius: 18px;
	background: rgba(255, 252, 246, .55); border: 1.5px solid transparent;
	cursor: pointer;
	transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2), transform .45s var(--ease-spring), box-shadow var(--dur-2);
	-webkit-tap-highlight-color: transparent;
}
.tier:hover { background: var(--surface); }
.tier:active { transform: scale(.98); transition-duration: .1s; }
.tier input { position: absolute; opacity: 0; pointer-events: none; }
.tier__radio {
	width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--surface);
	display: grid; place-items: center; transition: border-color var(--dur-2);
}
.tier__radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--teal); transform: scale(0); transition: transform var(--dur-2) var(--ease-out); }
.tier__name { font-family: var(--f-display); font-size: 1.28rem; color: var(--ink); letter-spacing: -.01em; }
.tier__meta { display: block; font-size: .85rem; color: var(--muted); }
.tier__badge {
	margin-left: .5rem; padding: .15rem .55rem; border-radius: var(--r-pill);
	background: var(--clay); color: var(--teal-900); font-family: var(--f-body); font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; vertical-align: middle;
}
.tier__discount { text-align: right; }
.tier__discount b { display: block; font-family: var(--f-display); font-weight: 500; font-size: 1.7rem; color: var(--teal); letter-spacing: -.02em; line-height: 1; }
.tier__discount span { font-size: .75rem; color: var(--muted); }
.tier:has(input:checked) { background: var(--surface); border-color: var(--teal); box-shadow: var(--sh-2); }
.tier:has(input:checked) .tier__radio { border-color: var(--teal); }
.tier:has(input:checked) .tier__radio::after { transform: scale(1); }
.tier:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }

.calc {
	padding: clamp(1.5rem, 1rem + 2vw, 2.25rem); border-radius: 26px;
	background: var(--surface); box-shadow: var(--sh-2); border: 1px solid var(--line);
	display: grid; gap: var(--s-5);
}
.calc__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.calc__head h3 { font-size: 1.25rem; }
.calc__head output { font-family: var(--f-display); font-size: 1.5rem; color: var(--ink); }
.range { --fill: 24%; width: 100%; height: 28px; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.range::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--teal) var(--fill), var(--paper-3) var(--fill)); }
.range::-moz-range-track { height: 6px; border-radius: 6px; background: var(--paper-3); }
.range::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--teal); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--teal); box-shadow: var(--sh-2); transition: transform var(--dur-1); }
.range::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--surface); border: 2px solid var(--teal); box-shadow: var(--sh-2); }
.range:active::-webkit-slider-thumb { transform: scale(1.12); }
.range__scale { display: flex; justify-content: space-between; font-size: .78rem; color: var(--muted); margin-top: -.6rem; }
.calc__rows { display: grid; gap: .55rem; padding: var(--s-4) 0; border-block: 1px solid var(--line); }
.calc__row { display: flex; justify-content: space-between; gap: 1rem; font-size: .95rem; }
.calc__row span:last-child { color: var(--ink); font-weight: 500; }
.calc__result { display: flex; justify-content: space-between; align-items: end; gap: 1rem; flex-wrap: wrap; }
.calc__result p { font-size: .9rem; color: var(--muted); }
.calc__result strong { display: block; font-family: var(--f-display); font-weight: 500; font-size: clamp(2.3rem, 1.8rem + 2vw, 3.2rem); color: var(--teal); letter-spacing: -.03em; line-height: 1; }
.calc__features { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .45rem 1rem; font-size: .88rem; }
.calc__features li { display: flex; gap: .45rem; align-items: start; }
.calc__features .icon { color: var(--teal); flex-shrink: 0; margin-top: 3px; }
.calc__note { font-size: .78rem; color: var(--muted); }

.compare { margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); }
.compare summary {
	display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; list-style: none;
	font-weight: 600; color: var(--ink);
}
.compare summary::-webkit-details-marker { display: none; }
.compare summary .icon { transition: transform var(--dur-2) var(--ease-out); }
.compare[open] summary .icon { transform: rotate(45deg); }
.table-scroll { margin-top: var(--s-5); overflow-x: auto; border-radius: var(--r-card); border: 1px solid var(--line-strong); background: var(--surface); }
.compare table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .92rem; }
.compare th, .compare td { padding: .95rem 1.1rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { font-family: var(--f-display); font-weight: 500; font-size: 1.1rem; color: var(--ink); background: var(--paper); }
.compare tbody th { font-weight: 500; color: var(--muted); width: 22%; }
.compare tr:last-child > * { border-bottom: 0; }
.compare .is-rec { background: var(--teal-50); }

/* ==========================================================================
   9. App section
   ========================================================================== */
.app { padding-block: var(--section); }
.app__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: center; }
.app__stage {
	position: relative; display: grid; place-items: center; padding: clamp(2.5rem, 5vw, 4.5rem) 0;
	border-radius: var(--r-media); background: var(--paper-3);
}
.phone {
	position: relative; width: min(290px, 78%); aspect-ratio: 9 / 19;
	border-radius: 44px; padding: 10px; background: #1B1814;
	box-shadow: 0 0 0 1.5px #4A433A inset, var(--sh-3);
	transform: rotate(2.5deg);
	transition: transform .8s var(--ease-out);
}
.app__stage:hover .phone { transform: rotate(0deg) translateY(-6px); }
.phone__screen {
	height: 100%; border-radius: 34px; overflow: hidden; background: var(--paper);
	display: flex; flex-direction: column; gap: .7rem; padding: 2.3rem .9rem .9rem; position: relative;
	font-size: .72rem; color: var(--ink-2);
}
.phone__island { position: absolute; top: 10px; left: 50%; width: 78px; height: 22px; border-radius: 12px; background: #1B1814; transform: translateX(-50%); }
.phone__tabs { margin-top: auto; display: flex; justify-content: space-around; padding-top: .55rem; border-top: 1px solid var(--line); color: var(--muted); }
.phone__tabs svg { width: 18px; height: 18px; }
.phone__tabs .is-active { color: var(--teal); }

.features-list { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 2rem; margin-top: var(--s-6); }
.features-list li { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start; }
.features-list .icon { color: var(--teal); margin-top: 2px; }
.features-list h3 { font-family: var(--f-body); font-size: 1rem; font-weight: 600; letter-spacing: 0; }
.features-list p { font-size: .9rem; color: var(--muted); margin-top: .2rem; }
.app__actions { margin-top: var(--s-6); display: flex; gap: var(--s-3); flex-wrap: wrap; }

/* ==========================================================================
   10. Testimonials (rendered only with real content)
   ========================================================================== */
.voices { padding-block: var(--section); }
.voices__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(2rem, 4vw, 4rem); margin-top: var(--s-7); align-items: start; }
.voice { display: grid; gap: 1.2rem; }
.voice blockquote { font-family: var(--f-display); font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); line-height: 1.35; color: var(--ink); letter-spacing: -.01em; }
.voice--lead blockquote { font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.45rem); }
.voice figcaption { display: flex; align-items: center; gap: .8rem; font-size: .9rem; color: var(--muted); }
.voice figcaption b { color: var(--ink); font-weight: 600; display: block; }
.voice__side { display: grid; gap: var(--s-6); padding-left: clamp(0rem, 3vw, 3rem); border-left: 1px solid var(--line-strong); }

/* ==========================================================================
   11. FAQ
   ========================================================================== */
.faq { padding-block: var(--section); border-top: 1px solid var(--line); }
.faq__grid { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: start; }
.faq__aside { position: sticky; top: calc(var(--nav-h) + 48px); display: grid; gap: var(--s-5); }
.faq__contact { display: grid; gap: .5rem; padding-top: var(--s-5); border-top: 1px solid var(--line); font-size: .95rem; }
.faq__contact a { display: inline-flex; align-items: center; gap: .55rem; color: var(--ink); font-weight: 500; text-decoration: none; }
.faq__contact a:hover { color: var(--teal); }
.faq__list { border-top: 1px solid var(--ink); counter-reset: q; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
	counter-increment: q;
	display: grid; grid-template-columns: 2.6rem 1fr 28px; gap: .6rem; align-items: baseline;
	padding: 1.35rem 0; cursor: pointer; list-style: none;
	font-family: var(--f-display); font-size: clamp(1.1rem, 1rem + .45vw, 1.35rem); color: var(--ink); letter-spacing: -.01em; line-height: 1.3;
	transition: color var(--dur-2);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::before { content: counter(q, decimal-leading-zero); font-family: var(--f-body); font-size: .8rem; font-weight: 600; color: var(--muted); letter-spacing: .05em; }
.faq__item summary .icon { align-self: center; color: var(--teal); transition: transform var(--dur-2) var(--ease-out); }
.faq__item[open] summary .icon { transform: rotate(45deg); }
.faq__item summary:hover { color: var(--teal-700); }
.faq__answer { padding: 0 2.5rem 1.5rem 3.2rem; color: var(--ink-2); max-width: 66ch; }
.faq__item[open] .faq__answer { animation: faqIn .45s var(--ease-out); }

/* ==========================================================================
   12. Inquiry (lead form)
   ========================================================================== */
.inquiry { padding-block: var(--section); background: var(--paper-2); }
.inquiry__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: stretch; }
.inquiry__media { position: relative; margin: 0; border-radius: var(--r-media); overflow: hidden; min-height: 520px; background: var(--paper-3); }
.inquiry__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.inquiry__steps {
	position: absolute; left: 16px; right: 16px; bottom: 16px;
	padding: 1.2rem 1.3rem; border-radius: 20px;
	background: rgba(255, 252, 246, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	box-shadow: var(--sh-2);
}
.inquiry__steps h3 { font-size: 1.05rem; font-family: var(--f-body); font-weight: 600; }
.inquiry__steps ol { list-style: none; padding: 0; margin-top: .8rem; display: grid; gap: .6rem; counter-reset: s; }
.inquiry__steps li { counter-increment: s; display: grid; grid-template-columns: 26px 1fr; gap: .7rem; font-size: .88rem; color: var(--ink-2); }
.inquiry__steps li::before {
	content: counter(s); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
	background: var(--teal); color: var(--on-accent); font-size: .74rem; font-weight: 700;
}
.form-card {
	padding: clamp(1.5rem, 1rem + 2.5vw, 2.75rem); border-radius: 28px;
	background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-2);
	display: grid; gap: var(--s-5); align-content: start;
}
.form-card__head { display: grid; gap: .6rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1rem; }
.lead-form { display: grid; gap: 1.75rem; }
.form-grid .span-2 { grid-column: 1 / -1; }
.form-alert {
	display: none; gap: .6rem; align-items: start; padding: .9rem 1rem; border-radius: 14px;
	background: var(--error-bg); color: var(--error); font-size: .9rem; font-weight: 500;
}
.form-alert.is-visible { display: flex; }
.form-meta { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--muted); }
.form-meta .icon { color: var(--teal); }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-success { display: none; gap: var(--s-4); justify-items: start; text-align: left; }
.form-success__icon { position: relative; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--teal-50); color: var(--teal); }
.is-sent .form-success { display: grid; animation: faqIn .6s var(--ease-out); }
.is-sent form, .is-sent .form-card__head, .is-sent .form-alert, .is-sent .stepper { display: none; }

/* ==========================================================================
   13. Footer
   ========================================================================== */
.site-footer { background: var(--teal-900); color: #CFC7B8; padding-top: clamp(4rem, 3rem + 4vw, 6.5rem); }
.site-footer a:not(.btn) { color: #EDE6DA; text-decoration: none; }
.site-footer a:not(.btn):hover { color: var(--clay); }
.footer__claim { display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: var(--s-6); align-items: end; padding-bottom: clamp(3rem, 5vw, 4.5rem); border-bottom: 1px solid rgba(237, 230, 218, .14); }
.footer__claim p { font-family: var(--f-display); font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3.2rem); line-height: 1.08; letter-spacing: -.025em; color: #F3EEE4; max-width: 20ch; }
.footer__claim em { color: var(--clay); font-weight: 350; }
.footer__cols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--s-6); padding-block: clamp(2.5rem, 4vw, 3.5rem); }
.footer__brand .brand { color: #F3EEE4; }
.footer__brand .brand__logo { height: 40px; }
.footer__brand p { margin-top: var(--s-4); font-size: .9rem; max-width: 36ch; }
.footer__col h2 { font-family: var(--f-body); font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #9FB2AA; margin-bottom: var(--s-4); }
.footer__col ul { list-style: none; padding: 0; display: grid; gap: .6rem; font-size: .93rem; }
.footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 2rem; padding-block: var(--s-5) calc(var(--s-5) + env(safe-area-inset-bottom)); border-top: 1px solid rgba(237, 230, 218, .14); font-size: .8rem; color: #9FB2AA; }
.footer__legal p { max-width: 70ch; }

/* Mobile sticky CTA */
.mobile-cta {
	position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: var(--z-sticky);
	display: none;
	transform: translateY(140%); transition: transform .55s var(--ease-spring);
}
.mobile-cta.is-visible { transform: none; }
.mobile-cta [data-cta-label] { display: inline-block; transition: opacity .16s var(--ease-soft), transform .16s var(--ease-soft); }
.mobile-cta.is-swapping [data-cta-label] { opacity: 0; transform: translateY(6px); }
.nav-open .mobile-cta { transform: translateY(140%); }
.mobile-cta .btn { width: 100%; box-shadow: var(--sh-3); }

/* ==========================================================================
   14. Generic pages (page, single, index, 404)
   ========================================================================== */
.page-shell { padding-top: calc(var(--nav-h) + clamp(4rem, 3rem + 4vw, 7rem)); padding-bottom: var(--section); }
.page-shell .container { max-width: 760px; }
.page-shell__head { display: grid; gap: var(--s-4); margin-bottom: var(--s-7); padding-bottom: var(--s-5); border-bottom: 1px solid var(--line-strong); }
.entry-meta { font-size: .88rem; color: var(--muted); }
.entry-content > * + * { margin-top: 1.15em; }
.entry-content h2 { font-family: var(--f-display); font-size: 1.8rem; margin-top: 2em; }
.entry-content h3 { font-family: var(--f-display); font-size: 1.35rem; margin-top: 1.6em; }
.entry-content a { color: var(--teal-700); }
.entry-content ul, .entry-content ol { padding-left: 1.3rem; }
.entry-content img, .entry-content figure { border-radius: var(--r-card); }
.entry-content blockquote { padding-left: 1.2rem; border-left: 3px solid var(--clay); font-family: var(--f-display); font-size: 1.3rem; color: var(--ink); }
.post-list { list-style: none; padding: 0; border-top: 1px solid var(--ink); }
.post-list li { border-bottom: 1px solid var(--line); }
.post-list a { display: grid; gap: .4rem; padding: 1.6rem 0; text-decoration: none; }
.post-list a:hover h2 { color: var(--teal); }
.post-list h2 { font-family: var(--f-display); font-size: 1.5rem; transition: color var(--dur-2); }
.nav-links { display: flex; justify-content: space-between; gap: 1rem; margin-top: var(--s-7); }
.nav-links a, .page-numbers { text-decoration: none; }
.pagination .nav-links { justify-content: center; gap: .4rem; }
.page-numbers { display: inline-grid; place-items: center; min-width: 42px; height: 42px; padding: 0 .6rem; border-radius: var(--r-pill); border: 1px solid var(--line-strong); }
.page-numbers.current { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.error-404 { text-align: left; }
.error-404 .display { font-size: clamp(4rem, 3rem + 6vw, 8rem); color: var(--teal); }

/* ==========================================================================
   15. Motion
   ========================================================================== */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes riseIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes heroZoom { from { transform: scale(1.06); } to { transform: none; } }
@keyframes rowIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes stepIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes dotFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop { 0% { transform: scale(.6); } 60% { transform: scale(1.08); } 100% { transform: none; } }
@keyframes ring { from { opacity: .45; transform: scale(1); } to { opacity: 0; transform: scale(1.7); } }

.js .hero [data-hero] { opacity: 0; animation: riseIn .9s var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 90ms + 80ms); }
.js .hero__media img { animation: heroZoom 1.8s var(--ease-out) both; }

.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); transition-delay: calc(var(--d, 0) * 70ms); }
.js [data-reveal].is-inview { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
	.js .hero [data-hero], .js [data-reveal] { opacity: 1; transform: none; }
	.js .hero__media img { transform: none; }
	.phone { transform: none; }
}

/* ==========================================================================
   16. Responsive
   ========================================================================== */
@media (max-width: 1240px) {
	.nav__menu a { padding-inline: .6rem; font-size: .88rem; }
}
@media (max-width: 1080px) {
	.brand__logo { height: 32px; }
	.nav { gap: 1rem; }
	.nav__login span { display: none; }
	.footer__cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
	:root { --nav-h: 60px; }
	.nav { grid-template-columns: 1fr auto auto; gap: .5rem; padding-left: 1rem; }
	.nav__menu { display: none; }
	.nav__toggle { display: grid; }
	.nav__cta .btn { padding-inline: 1rem; }
	.hero__title { max-width: 16ch; }
	.process__head, .products__grid, .membership__grid, .app__grid, .faq__grid, .inquiry__grid, .voices__grid { grid-template-columns: minmax(0, 1fr); }
	.products__aside, .faq__aside { position: static; }
	.app__stage { order: 2; }
	.inquiry__media { min-height: 420px; }
	.voice__side { padding-left: 0; border-left: 0; padding-top: var(--s-6); border-top: 1px solid var(--line-strong); }
	.footer__claim { grid-template-columns: 1fr; align-items: start; }
	.mobile-cta { display: block; }
	.has-mobile-cta .footer__legal { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}
@media (min-width: 961px) and (max-width: 1240px) {
	.hero__copy { max-width: 540px; }
	.hero__scrim { background:
		linear-gradient(90deg, rgba(8, 32, 27, .92) 0%, rgba(8, 32, 27, .82) 42%, rgba(8, 32, 27, .35) 66%, rgba(8, 32, 27, 0) 80%),
		linear-gradient(180deg, rgba(8, 32, 27, .35) 0%, rgba(8, 32, 27, 0) 22%, rgba(8, 32, 27, 0) 70%, rgba(8, 32, 27, .45) 100%); }
}
@media (max-width: 960px) {
	.hero__stage { align-items: end; min-height: 0; padding-top: calc(var(--nav-h) + min(62vw, 380px)); padding-bottom: 6rem; }
	.hero__media { top: calc(var(--nav-h) + 10px); bottom: auto; height: calc(min(62vw, 380px) + 14rem); }
	.hero__media img { object-position: 80% 18%; }
	.hero__media--center img { object-position: 50% 18%; }
	.hero__media--left img { object-position: 20% 18%; }
	.hero__scrim, .hero__media--center ~ .hero__scrim, .hero__media--left ~ .hero__scrim {
		background: linear-gradient(180deg, var(--teal-900) 0%, var(--teal-900) calc(var(--nav-h) + 10px), rgba(8, 32, 27, 0) calc(var(--nav-h) + 5rem), rgba(8, 32, 27, 0) calc(var(--nav-h) + min(62vw, 380px) - 5rem), rgba(8, 32, 27, .9) calc(var(--nav-h) + min(62vw, 380px) + 4rem), var(--teal-900) calc(var(--nav-h) + min(62vw, 380px) + 14rem));
	}
	.hero__copy { gap: var(--s-4); }
}
@media (max-width: 640px) {
	.nav__cta { display: none; }
	.hero__actions .btn { flex: 1 1 100%; }
	.rail { grid-template-columns: 1fr; gap: 2rem; }
	.rail::before, .rail::after { top: 28px; bottom: 28px; left: 27px; right: auto; width: 1.5px; height: auto; transform-origin: top; transform: scaleY(var(--rail, 0)); }
	.rail::before { transform: none; }
	.rail__step { grid-template-columns: 56px 1fr; column-gap: 1.1rem; }
	.rail__step > :not(.rail__num) { grid-column: 2; }
	.rail__step h3 { margin-top: .8rem; }
	.ledger { padding: .25rem; border-radius: 24px; }
	.ledger__row { grid-template-columns: 42px minmax(0, 1fr); padding: 1rem .85rem; gap: .35rem .9rem; }
	.ledger__main .h3 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
	.ledger__row:not([hidden]) ~ .ledger__row:not([hidden])::before { left: 4.2rem; right: .85rem; }
	.ledger__icon { width: 42px; height: 42px; }
	.ledger__side { grid-column: 2; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem .75rem; margin-top: .25rem; min-width: 0; }
	.ledger__price, .ledger__price--quote { text-align: left; display: flex; flex-direction: row; align-items: baseline; gap: .4rem; }
	.ledger__price small { display: inline; }
	.ledger__price b { font-size: 1.3rem; }
	.tier { grid-template-columns: auto 1fr; }
	.tier__discount { grid-column: 2; text-align: left; display: flex; align-items: baseline; gap: .4rem; }
	.tier__discount b { display: inline; font-size: 1.3rem; }
	.calc__features, .features-list, .form-grid { grid-template-columns: 1fr; }
	.faq__answer { padding: 0 0 1.4rem 3.2rem; }
	.footer__cols { grid-template-columns: 1fr; }
}

/* ==========================================================================
   17. Interaction layer (2.6) — one big number, round quick actions,
       segmented controls, plan carousel, savings chart, stepper, feedback.
       Same patterns as the Docsurance app and member portal.
   ========================================================================== */
@supports (transition-timing-function: linear(0, 1)) {
	:root {
		--ease-spring: linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017 20.5%, 1.043 24.5%, 1.035 28.4%, 1.011 37.4%, .998 46.7%, 1);
	}
}
.anchor { display: block; height: 0; }

/* Segmented control with a sliding thumb (country switch, plan tabs) */
[data-seg] { position: relative; isolation: isolate; }
.seg__thumb {
	position: absolute; top: .3rem; bottom: .3rem; left: 0; z-index: -1;
	width: var(--seg-w, 0); transform: translateX(var(--seg-x, 0));
	border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--sh-1);
	opacity: 0; pointer-events: none;
	transition: transform .55s var(--ease-spring), width .55s var(--ease-spring), opacity .2s;
}
.has-thumb .seg__thumb { opacity: 1; }
.has-thumb > [aria-pressed="true"] { background: transparent; box-shadow: none; }

/* ---- Hero pulse card ---- */
.pulse {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(1.25rem, 3vw, 3rem); align-items: center;
	padding: clamp(1.2rem, .9rem + 1vw, 1.8rem) clamp(1.25rem, 1rem + 1.4vw, 2.25rem);
	border-radius: 30px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-3);
}
.metric { min-width: 0; }
.metric__track {
	display: flex; list-style: none; padding: 0; margin: 0;
	overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
	scrollbar-width: none; border-radius: 14px;
}
.metric__track::-webkit-scrollbar { display: none; }
.metric__track:focus-visible { outline-offset: 4px; }
.metric__slide {
	flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always;
	display: grid; gap: .2rem; align-content: start; padding-right: 1rem;
	transition: opacity .45s var(--ease-out);
}
.metric__slide:not(.is-active) { opacity: .3; }
.metric__label { font-size: .88rem; font-weight: 500; color: var(--muted); }
.metric__value {
	font-family: var(--f-display); font-weight: 450; font-variation-settings: "opsz" 144;
	font-size: clamp(2.6rem, 2rem + 2.6vw, 4rem); line-height: 1.02; letter-spacing: -.035em; color: var(--ink);
}
.metric__note { font-size: .9rem; color: var(--ink-2); }
.metric__dots { display: flex; gap: .3rem; margin-top: 1rem; }
.metric__dot { display: grid; align-items: center; width: 34px; height: 24px; padding: 0; }
.metric__dot span { position: relative; display: block; height: 4px; border-radius: 4px; background: var(--paper-3); overflow: hidden; }
.metric__dot span::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--teal); transform: scaleX(0); transform-origin: left; }
.metric__dot[aria-pressed="true"] span::after { transform: none; }
.is-auto .metric__dot[aria-pressed="true"] span::after { animation: dotFill 5.2s linear both; } /* story-style timer */
.metric__dot:hover span { background: var(--line-strong); }

.quick ul { display: flex; gap: clamp(.5rem, 1.5vw, 1.25rem); list-style: none; padding: 0; }
.quick__btn {
	display: grid; justify-items: center; gap: .5rem; min-width: 60px;
	font-size: .82rem; font-weight: 600; color: var(--ink); text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}
.quick__icon {
	display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%;
	background: var(--teal-50); color: var(--teal-700);
	transition: transform .5s var(--ease-spring), background-color var(--dur-2), color var(--dur-2), box-shadow var(--dur-2);
}
.quick__btn:hover .quick__icon { background: var(--teal); color: var(--on-accent); transform: translateY(-3px); box-shadow: 0 12px 22px -12px rgba(10, 110, 92, .75); }
.quick__btn:active .quick__icon { transform: scale(.88); transition-duration: .1s; }
.quick__btn:focus-visible { outline: none; }
.quick__btn:focus-visible .quick__icon { outline: 2px solid var(--focus); outline-offset: 3px; }

/* ---- Products toolbar ---- */
.products__toolbar { display: grid; gap: var(--s-4); justify-items: start; margin-top: var(--s-5); }

/* ---- Membership: plan tabs, plan carousel, savings chart ---- */
.tiers-wrap { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.tier-tabs { display: none; }
.calc__chart { display: grid; gap: .8rem; padding-top: var(--s-2); }
.calc__chart-head { display: flex; justify-content: space-between; gap: 1rem; font-size: .85rem; font-weight: 500; color: var(--muted); }
.calc__chart-head [data-chart-readout] { color: var(--ink); font-weight: 600; transition: color var(--dur-2); }
.is-scrubbing .calc__chart-head [data-chart-readout] { color: var(--teal-700); }
.bars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; height: 150px; touch-action: pan-y; }
.bar {
	display: grid; grid-template-rows: auto 1fr auto; gap: .35rem; height: 100%; padding: 0;
	color: var(--muted); text-align: center; -webkit-tap-highlight-color: transparent;
}
.bar__val { font-size: .72rem; font-weight: 600; color: var(--ink); opacity: 0; transform: translateY(4px); transition: opacity var(--dur-2), transform .4s var(--ease-spring); }
.bar[aria-pressed="true"] .bar__val, .bar.is-scrub .bar__val { opacity: 1; transform: none; }
.is-scrubbing .bar[aria-pressed="true"]:not(.is-scrub) .bar__val { opacity: 0; }
.bar__col { position: relative; display: block; border-radius: 12px; background: var(--paper-2); overflow: hidden; }
.bar__fill {
	position: absolute; left: 0; right: 0; bottom: 0; height: var(--h, 4%);
	border-radius: 12px; background: #BFD8CD;
	transition: height .7s var(--ease-spring), background-color var(--dur-2);
}
.bar[aria-pressed="true"] .bar__fill { background: var(--teal); }
.bar.is-scrub .bar__fill { background: var(--teal-600); }
.bar__name { font-size: .76rem; font-weight: 600; }
.bar[aria-pressed="true"] .bar__name { color: var(--ink); }
.bar:active .bar__col { transform: scale(.96); }
.bar__col { transition: transform .4s var(--ease-spring); }

/* ---- App mockup: app home ---- */
.phone__top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .45rem; }
.phone__avatar { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--teal-900); color: #fff; font-size: .58rem; font-weight: 700; letter-spacing: .03em; }
.phone__search { display: flex; align-items: center; gap: .35rem; height: 26px; padding: 0 .6rem; border-radius: 999px; background: var(--paper-2); color: var(--muted); font-size: .64rem; }
.phone__search svg, .phone__bell svg { width: 13px; height: 13px; }
.phone__bell { position: relative; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--paper-2); color: var(--ink); }
.phone__bell i { position: absolute; top: 5px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--clay); box-shadow: 0 0 0 1.5px var(--paper-2); }
.phone__metric { display: grid; justify-items: center; gap: .15rem; padding: .5rem 0 .1rem; text-align: center; }
.phone__metric small { font-size: .62rem; color: var(--muted); }
.phone__metric b { font-family: var(--f-display); font-weight: 450; font-size: 1.95rem; line-height: 1.05; letter-spacing: -.03em; color: var(--ink); }
.phone__pill { margin-top: .2rem; padding: .2rem .55rem; border-radius: 999px; background: var(--teal-50); color: var(--teal-700); font-size: .58rem; font-weight: 600; }
.phone__dots { display: flex; gap: 3px; margin-top: .35rem; }
.phone__dots i { width: 14px; height: 3px; border-radius: 3px; background: var(--paper-3); }
.phone__dots i.is-on { background: var(--teal); }
.phone__actions { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; padding: 0; text-align: center; font-size: .56rem; font-weight: 600; color: var(--ink); }
.phone__actions li { display: grid; justify-items: center; gap: .25rem; }
.phone__actions span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--teal-50); color: var(--teal-700); }
.phone__actions svg { width: 15px; height: 15px; }
.phone__feed { padding: .35rem .5rem .5rem; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.phone__day { margin: .35rem .1rem .1rem; font-size: .56rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.phone__feed ul { list-style: none; padding: 0; display: grid; }
.phone__feed li { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: .45rem; padding: .38rem .1rem; }
.phone__feed li + li { border-top: 1px solid var(--line); }
.phone__feed .dot { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--teal-50); color: var(--teal); }
.phone__feed .dot--clay { background: #FBE3CF; color: var(--clay-700); }
.phone__feed .dot svg { width: 12px; height: 12px; }
.phone__feed b { display: block; font-weight: 600; color: var(--ink); font-size: .64rem; }
.phone__feed span span { font-size: .56rem; color: var(--muted); }
.phone__feed em { font-style: normal; font-weight: 600; color: var(--ink); font-size: .64rem; }
.phone__feed em.is-pos { color: var(--success); }
.phone__wallet { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem .75rem; border-radius: 14px; background: var(--teal-900); color: #EDE6DA; }
.phone__wallet small { display: block; font-size: .54rem; color: #9FB2AA; }
.phone__wallet b { display: block; font-size: .68rem; font-weight: 600; letter-spacing: .04em; color: #fff; }
.phone__qr { width: 28px; height: 28px; border-radius: 5px; border: 3px solid #fff; background: repeating-conic-gradient(var(--teal-900) 0 25%, #fff 0 50%) 0 0 / 6px 6px; }
.js .app__stage .phone__feed li { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease-out), transform .6s var(--ease-spring); }
.js .app__stage.is-inview .phone__feed li { opacity: 1; transform: none; }
.app__stage.is-inview .phone__feed ul:nth-of-type(1) li:nth-child(1) { transition-delay: .55s; }
.app__stage.is-inview .phone__feed ul:nth-of-type(1) li:nth-child(2) { transition-delay: .7s; }
.app__stage.is-inview .phone__feed ul:nth-of-type(2) li { transition-delay: .85s; }

/* ---- Lead form: three steps ---- */
.stepper { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.stepper li { display: grid; gap: .45rem; font-size: .78rem; font-weight: 600; color: var(--muted); transition: color var(--dur-2); }
.stepper__bar { display: block; height: 4px; border-radius: 4px; background: var(--paper-3); overflow: hidden; }
.stepper__bar i { display: block; height: 100%; background: var(--teal); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-out); }
.stepper .is-done .stepper__bar i, .stepper .is-current .stepper__bar i { transform: none; }
.stepper .is-current { color: var(--ink); }
.stepper .is-done { color: var(--teal-700); }
.step { border: 0; padding: 0; margin: 0; min-width: 0; }
.step__title {
	float: left; grid-column: 1 / -1; width: 100%; padding: 0; margin-bottom: .1rem; /* float → normal grid item */
	font-family: var(--f-display); font-size: 1.3rem; font-weight: 500; letter-spacing: -.01em; color: var(--ink);
}
.step__nav { display: flex; gap: .75rem; }
.step__nav .btn--primary { flex: 1 1 auto; }
.lead-form:not(.is-stepper) .step__nav:not(.step__nav--submit),
.lead-form:not(.is-stepper) [data-step-back] { display: none; }
.lead-form:not(.is-stepper) .step__nav--submit .btn--primary { width: 100%; }
.lead-form:not(.is-stepper) .picks { display: none; }
.is-stepper .step:not(.is-current) { display: none; }
.is-stepper .step.is-current { animation: stepIn .45s var(--ease-out); }
.picks { display: grid; gap: .5rem; }
.picks__row { display: flex; flex-wrap: wrap; gap: .5rem; }
.picks .chip[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: var(--on-accent); }
.recap { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1rem; padding: .9rem 1.05rem; border-radius: 16px; background: var(--paper); border: 1px solid var(--line); }
.recap dt { font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.recap dd { margin-top: .15rem; font-size: .9rem; font-weight: 500; color: var(--ink); }

/* Success: drawn tick, pop and a soft ring */
.tick__ring { stroke-dasharray: 158; stroke-dashoffset: 158; opacity: .35; }
.tick__mark { stroke-dasharray: 34; stroke-dashoffset: 34; }
.is-sent .form-success__icon { animation: pop .6s var(--ease-spring) both; }
.is-sent .tick__ring { animation: draw .6s var(--ease-out) .1s forwards; }
.is-sent .tick__mark { animation: draw .45s var(--ease-out) .5s forwards; }
.form-success__icon::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--teal); opacity: 0; pointer-events: none; }
.is-sent .form-success__icon::after { animation: ring 1s var(--ease-out) .85s; }
.timeline { list-style: none; padding: 0; display: grid; width: 100%; margin: .25rem 0 .5rem; }
.timeline li { position: relative; display: grid; gap: .1rem; padding: 0 0 1.05rem 2rem; font-size: .9rem; }
.timeline li::before { content: ""; position: absolute; left: 0; top: .3rem; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--surface); }
.timeline li:not(:last-child)::after { content: ""; position: absolute; left: 6px; top: 1.3rem; bottom: .1rem; width: 2px; background: var(--line); }
.timeline li.is-done::before { border-color: var(--teal); background: var(--teal); box-shadow: 0 0 0 4px var(--teal-50); }
.timeline b { font-weight: 600; color: var(--ink); }
.timeline span { font-size: .82rem; color: var(--muted); }

/* ---- Responsive (interaction layer) ---- */
@media (max-width: 1080px) {
	.pulse { grid-template-columns: 1fr; }
	.quick ul { justify-content: space-between; }
}
@media (max-width: 960px) {
	/* Sticky country switch + scrollable chips while browsing products */
	.products__grid { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
	.products__grid > *, .products__toolbar > * { min-width: 0; }
	.products__aside { display: contents; }
	.products__aside .section-head { margin-bottom: .5rem; }
	.products__toolbar {
		position: sticky; top: calc(var(--nav-h) + 22px); z-index: 5;
		margin: 0 calc(-1 * var(--gutter)); padding: .65rem var(--gutter);
		justify-items: stretch; gap: .65rem;
		background: rgba(247, 242, 233, .9);
		-webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
	}
	.products__toolbar .market-switch { display: grid; }
	.filters {
		flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
		margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
	}
	.filters::-webkit-scrollbar { display: none; }
	.filters .chip { flex: 0 0 auto; }
	.note-ch { margin-top: 0; }

	/* Plan carousel with synced tabs */
	.tier-tabs:not([hidden]) {
		display: grid; grid-auto-flow: column; grid-auto-columns: auto; gap: .2rem; padding: .3rem;
		border-radius: var(--r-pill); background: rgba(255, 252, 246, .55); border: 1px solid var(--line);
	}
	.tier-tabs__btn {
		min-width: 0; min-height: 40px; padding: .4rem .2rem; border-radius: var(--r-pill);
		overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
		font-size: .82rem; font-weight: 600; color: var(--ink-2); transition: color var(--dur-2);
		-webkit-tap-highlight-color: transparent;
	}
	.tier-tabs__btn[aria-pressed="true"] { color: var(--ink); }
	.tier-tabs:not(.has-thumb) .tier-tabs__btn[aria-pressed="true"] { background: var(--surface); }
	.is-enhanced .tiers {
		display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
		margin-inline: calc(-1 * var(--gutter)); padding: .4rem var(--gutter) 1.4rem; scroll-padding-inline: var(--gutter);
	}
	.is-enhanced .tiers::-webkit-scrollbar { display: none; }
	.is-enhanced .tier {
		flex: 0 0 min(76%, 300px); scroll-snap-align: center;
		grid-template-columns: 1fr; align-content: space-between; gap: 1.2rem; min-height: 168px; padding: 1.3rem 1.35rem;
	}
	.is-enhanced .tier__radio { display: none; }
	.is-enhanced .tier__badge { margin-left: 0; }
	.is-enhanced .tier__name { margin-right: .5rem; }
	.is-enhanced .tier__discount { grid-column: auto; text-align: left; display: flex; align-items: baseline; gap: .45rem; }
	.is-enhanced .tier__discount b { display: inline; font-size: 2.6rem; }
	.is-enhanced .tier:not(:has(input:checked)) { opacity: .72; transform: scale(.97); }
}
@media (max-width: 640px) {
	.pulse { padding: 1.15rem 1.1rem 1.25rem; border-radius: 26px; gap: 1.1rem; }
	.quick ul { gap: .25rem; }
	.quick__btn { min-width: 0; flex: 1; font-size: .74rem; }
	.quick li { flex: 1; display: flex; justify-content: center; }
	.quick__icon { width: 52px; height: 52px; }
	.bars { height: 130px; gap: .45rem; }
	.recap { grid-template-columns: 1fr; }
	.step__nav { flex-wrap: wrap; }
	.step__nav--submit .btn--primary { order: -1; flex-basis: 100%; }
	.step__nav--submit .btn--ghost { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.js .app__stage .phone__feed li { opacity: 1; transform: none; }
	.is-enhanced .tier:not(:has(input:checked)) { transform: none; }
	.metric__slide:not(.is-active) { opacity: 1; }
}
/* Narrow phones: nothing may force the page wider than the viewport */
.calc { grid-template-columns: minmax(0, 1fr); }
.quick li { min-width: 0; }
.quick__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) {
	.calc__result .btn { white-space: normal; text-align: center; flex: 1 1 100%; }
}
@media (max-width: 370px) {
	.quick__icon { width: 46px; height: 46px; }
	.quick__btn { font-size: .68rem; gap: .4rem; }
	.metric__value { font-size: 2.35rem; }
}
@media (max-width: 640px) {
	.calc__head { flex-wrap: wrap; row-gap: .25rem; }
}

/* Reveal/hero stagger without inline style attributes (CSP) */
.d-0 { --d: 0; } .d-1 { --d: 1; } .d-2 { --d: 2; } .d-3 { --d: 3; } .d-4 { --d: 4; } .d-5 { --d: 5; } .d-6 { --d: 6; } .d-7 { --d: 7; }
.i-0 { --i: 0; } .i-1 { --i: 1; } .i-2 { --i: 2; } .i-3 { --i: 3; } .i-4 { --i: 4; }
.error-404__lead { margin-block: 1rem 2rem; }

/* fluid_styled_content elements inside content pages */
.entry-content .frame { margin: 0; }
.entry-content .frame + .frame { margin-top: 1.6em; }
.entry-content header h2, .entry-content header h3 { margin-top: 0; }
.dcs-placeholder { padding: 1rem 1.2rem; border-radius: var(--r-card); background: var(--teal-50); color: var(--teal-900); }