/* Homepage: kleur en beweging (founder 11 nov 2026, gekozen op de voorbeeldpagina /homepage-levendig/:
 * voorstel A, het paneel, zonder patronen). Alleen op de negen homepages, in beide bomen
 * (scripts/home-lively.mjs zet de link en het script in de head); js/home-lively.js maakt de rookwolk
 * en de Grip-regel, regelt de puls van de slotband en zet .sg-lively op <html>.
 *   - De vijf kaarten elk een eigen kleur, licht en donker om en om: Kansen groen, Buy Box oker,
 *     Klanten zwart, Provisiecontrole rood, Grip zand met het zwarte Grip-vak. Kleur = betekenis uit
 *     het dashboard (groen geld en Kansen, amber aandacht, rood geld op het spel). Nooit rood naast
 *     groen of oker naast rood. Oker is NIET het geel #ffd400: dat is van de demo en de lanceerbalk.
 *   - "Alles voor winst": één paneel, icoontjes neutraal, Grip als regel over de volle breedte.
 *   - "Koppel je shop" op een okerband; de slotband zwart met de stippen en de puls van de hero.
 *   - De hero: een rookwolk achter het dashboard (licht Ochtend, donker Gloed) in plaats van stippen.
 * Geen gloed, geen verloop als vlak, geen gekleurde streep langs een rand. Beweging één keer en
 * rustig; bij "minder beweging" meteen de eindstand. */

:root {
	--lv-green: #0f3d27;
	--lv-ochre: #e0a43c;
	--lv-ink: #0b0b0b;
	--lv-red: #d40f1a;
	--lv-sand: #f2ebdd;
	--lv-sand-line: #e2d6bf;
	--lv-ochre-wash: #f8edd3;
	--lv-dash: #c9c9c9;
}
html[data-theme="dark"] {
	--lv-green: #113b26;
	--lv-ochre: #d29a37;
	--lv-red: #b50d17;
	--lv-sand: #ddd3c0;
	--lv-sand-line: #ddd3c0;
	--lv-ochre-wash: #2a2416;
	--lv-dash: #4a4a4a;
}
@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) {
		--lv-green: #113b26;
		--lv-ochre: #d29a37;
		--lv-red: #b50d17;
		--lv-sand: #ddd3c0;
		--lv-sand-line: #ddd3c0;
		--lv-ochre-wash: #2a2416;
		--lv-dash: #4a4a4a;
	}
}

/* ------------------------------------------------------------------ de vijf kaarten */
html[data-lv2][lang] body.home:not(.sg-academy) .sk-stack > .sk-card.sk-c1 {
	--t-bg: var(--lv-green); --t-bd: var(--lv-green); --t-ink: #fff; --t-lead: rgba(255, 255, 255, 0.84);
	--t-link: #fff; --t-num: rgba(255, 255, 255, 0.4);
}
html[data-lv2][lang] body.home:not(.sg-academy) .sk-stack > .sk-card.sk-c2 {
	--t-bg: var(--lv-ochre); --t-bd: var(--lv-ochre); --t-ink: #171717; --t-lead: rgba(23, 23, 23, 0.82);
	--t-link: #171717; --t-num: rgba(23, 23, 23, 0.4);
}
html[data-lv2][lang] body.home:not(.sg-academy) .sk-stack > .sk-card.sk-c3 {
	--t-bg: var(--lv-ink); --t-bd: var(--lv-ink); --t-ink: #fff; --t-lead: rgba(255, 255, 255, 0.74);
	--t-link: #f2525c; --t-num: rgba(255, 255, 255, 0.28);
}
html[data-theme="dark"][data-lv2][lang] body.home:not(.sg-academy) .sk-stack > .sk-card.sk-c3 {
	--t-bd: #2a2a2a;
}
@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"])[data-lv2][lang] body.home:not(.sg-academy) .sk-stack > .sk-card.sk-c3 {
		--t-bd: #2a2a2a;
	}
}
html[data-lv2][lang] body.home:not(.sg-academy) .sk-stack > .sk-card.sk-c4 {
	--t-bg: var(--lv-red); --t-bd: var(--lv-red); --t-ink: #fff; --t-lead: #fff;
	--t-link: #fff; --t-num: rgba(255, 255, 255, 0.45);
}
html[data-lv2][lang] body.home:not(.sg-academy) .sk-stack > .sk-card.sk-c5 {
	--t-bg: var(--lv-sand); --t-bd: var(--lv-sand-line); --t-ink: #171717; --t-lead: #46423b;
	--t-link: #b30d17; --t-num: rgba(23, 23, 23, 0.32);
}
html[data-lv2][lang] body.home:not(.sg-academy) .sk-stack > .sk-card:is(.sk-c1, .sk-c2, .sk-c3, .sk-c4, .sk-c5) {
	--sk-bg: var(--t-bg);
	border-color: var(--t-bd);
	color: var(--t-ink);
}
html[data-lv2][lang] body.home:not(.sg-academy) .sk-card:is(.sk-c1, .sk-c2, .sk-c3, .sk-c4, .sk-c5) :is(.zz-h, .sk-label) {
	color: var(--t-ink);
}
html[data-lv2][lang] body.home:not(.sg-academy) .sk-card:is(.sk-c1, .sk-c2, .sk-c3, .sk-c4, .sk-c5) .zz-lead {
	color: var(--t-lead);
}
html[data-lv2][lang] body.home:not(.sg-academy) .sk-card:is(.sk-c1, .sk-c2, .sk-c3, .sk-c4, .sk-c5) .sk-num {
	border-color: var(--t-num);
	background: transparent;
	color: var(--t-ink);
}
html[data-lv2][lang] body.home:not(.sg-academy) .sk-card:is(.sk-c1, .sk-c2, .sk-c3, .sk-c4, .sk-c5) .link-arrow {
	color: var(--t-link);
}
html[data-lv2][lang] body.home:not(.sg-academy) .sk-card:is(.sk-c1, .sk-c2, .sk-c3, .sk-c4, .sk-c5) .link-arrow:focus-visible {
	outline-color: var(--t-ink);
}
/* "Voorbeeld" boven het zwarte Grip-vak staat op de zandkleur zelf. */
html[data-lv2][lang] body.home:not(.sg-academy) .sk-card.sk-c5 :is(.gx-label, .gx-label .sg-label) {
	color: rgba(23, 23, 23, 0.62);
}
html[data-lv2][lang] body.home:not(.sg-academy) .sk-card.sk-c5 .gx-label .sg-label::before {
	background: rgba(23, 23, 23, 0.62);
}

/* ------------------------------------------------------------------ "Alles voor winst": één paneel
 * Vier kolommen in één paneel, icoontjes neutraal; Grip werkt over alles heen en staat als regel over
 * de volle breedte, met de tekst van zijn kaart. (De genummerde haltes zijn op 11 nov weer weggehaald.) */
.sg-grid-grip {
	display: none;
}
html[data-lv2][lang] body.home:not(.sg-academy) .sk-grid-cols {
	gap: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius-card, 16px);
	background: var(--card);
	overflow: hidden;
}
html[data-lv2][lang] body.home:not(.sg-academy) .sk-grid-col {
	padding: 24px 22px 10px;
	border: 0;
	border-radius: 0;
	background: transparent;
	/* scheidingslijn links en boven; aan de buitenrand valt hij buiten het paneel en is weg */
	box-shadow: -1px 0 0 var(--line), 0 -1px 0 var(--line);
}
html.sg-lively body.home:not(.sg-academy) .sg-grid-grip {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr) auto;
	gap: 10px 16px;
	align-items: center;
	padding: 16px 22px;
	background: var(--paper-2);
	box-shadow: 0 -1px 0 var(--line);
	color: inherit;
	text-decoration: none;
}
html.sg-lively body.home .sg-grid-grip .sg-grip-av {
	display: block;
	width: 22px;
	height: 22px;
}
html.sg-lively body.home .sg-grid-grip .sg-grip-av canvas {
	display: block;
	width: 100%;
	height: 100%;
}
html.sg-lively body.home .sg-grid-grip .sk-grid-txt strong {
	display: inline;
}
html.sg-lively body.home .sg-grid-grip .sk-grid-txt > span {
	display: inline;
	margin: 0 0 0 12px;
	font-size: 0.9375rem;
}
html.sg-lively body.home .sg-grid-grip .link-arrow {
	color: var(--red-text-strong); /* zoals "Alle 50 functies" erboven */
	font-size: 0.9375rem;
	font-weight: 650;
	white-space: nowrap;
}
html.sg-lively body.home .sg-grid-grip:hover strong {
	text-decoration: underline;
	text-underline-offset: 3px;
}
html.sg-lively body.home .sg-grid-grip:hover .sk-grid-ico {
	border-color: var(--ink);
}
html.sg-lively body.home .sg-grid-grip:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: -2px;
}
@media (max-width: 700px) {
	html.sg-lively body.home .sg-grid-grip {
		grid-template-columns: 30px minmax(0, 1fr);
	}
	html.sg-lively body.home .sg-grid-grip .sk-grid-txt > span {
		display: block;
		margin: 2px 0 0;
	}
	html.sg-lively body.home .sg-grid-grip .link-arrow {
		grid-column: 2;
	}
}
/* Desktop: "Alles voor winst" is net als de hero en de okerband precies één scherm hoog onder de kop,
 * inhoud in het midden (founder 11 nov: "ook 1 schermgrootte", de ruimte onder het paneel was krap).
 * De stapel erboven houdt alleen zijn eigen 48px onderruimte; die staat hier ook onder het paneel,
 * zodat boven de kop en onder het paneel evenveel lucht zit. */
@media (min-width: 960px) {
	html[data-lv2][lang] body.home:not(.sg-academy) .sk-section {
		padding-bottom: 0;
	}
	html[data-lv2][lang] body.home:not(.sg-academy) .section.sk-grid {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: calc(100svh / var(--vz, 1) - var(--header-h));
		padding-top: 0;
		padding-bottom: 48px;
	}
	html[data-lv2][lang] body.home:not(.sg-academy) .section.sk-grid > .wrap {
		width: 100%;
	}
}

/* Desktop: het Academy-blok (door de Worker ingevoegd, src/lead.ts) ook precies één scherm, inhoud in
 * het midden (founder 11 nov). */
@media (min-width: 960px) {
	html[data-lv2][lang] body.home:not(.sg-academy) .section.ld-section#academy {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: calc(100svh / var(--vz, 1) - var(--header-h));
	}
	html[data-lv2][lang] body.home:not(.sg-academy) .section.ld-section#academy > .wrap {
		width: 100%;
	}
}

/* ------------------------------------------------------------------ "Koppel je shop" op een okerband */
html[data-lv2][lang] body.home:not(.sg-academy) .sk-connect {
	background: var(--lv-ochre-wash);
}
/* Desktop: de band is precies één scherm hoog onder de kop, inhoud in het midden (founder 11 nov:
 * "1 schermgrootte vullen"), zoals de hero het eerste scherm vult. Scroll je erheen, dan sluit hij
 * aan op de kop en op de onderrand. Telefoon: gewoon zo hoog als de inhoud. */
@media (min-width: 960px) {
	html[data-lv2][lang] body.home:not(.sg-academy) .sk-connect {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: calc(100svh / var(--vz, 1) - var(--header-h));
	}
	html[data-lv2][lang] body.home:not(.sg-academy) .sk-connect > .wrap {
		width: 100%;
	}
}

/* ------------------------------------------------------------------ slot: de stippen en de puls van de hero
 * Boven- en onderkant van de site hetzelfde patroon en dezelfde beweging. Stip en raster als de hero
 * (1,25px op 22px, 11px verschoven), het sterkst tussen tekst en knop. De golf is die van de hero
 * (--sg-breath en de keyframes sg-breath en sg-breath-now-a/-b in landingv2.css): één keer als de band
 * in beeld komt en bij elke klik of tik op de band opnieuw, vanaf de knop. Op de telefoon, net als de
 * hero daar, rechtsboven en met de kortere golf hieronder. */
html[data-lv2][lang] body.home:not(.sg-academy) .section.final {
	--fin-dot: #3a3a3a;
	--fin-dot-strong: #8c8c8c;
	--fin-x: 82%;
	--fin-y: 50%;
	--fin-area: radial-gradient(ellipse 58% 150% at 70% 50%, #000 0%, rgba(0, 0, 0, 0.8) 45%, rgba(0, 0, 0, 0.3) 70%, transparent 92%);
	position: relative;
	isolation: isolate;
	background: var(--lv-ink);
	color: #fff;
	-webkit-tap-highlight-color: transparent;
}
html[data-theme="dark"][data-lv2][lang] body.home:not(.sg-academy) .section.final {
	border-block: 1px solid #2a2a2a;
}
html[data-lv2][lang] body.home:not(.sg-academy) .section.final::before,
html[data-lv2][lang] body.home:not(.sg-academy) .section.final::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: radial-gradient(circle, var(--fin-dot) 1.25px, transparent 1.75px);
	background-size: 22px 22px;
	background-position: 11px 11px;
	-webkit-mask-image: var(--fin-area);
	mask-image: var(--fin-area);
}
html[data-lv2][lang] body.home:not(.sg-academy) .section.final::after {
	opacity: 0;
	background-image: radial-gradient(circle, var(--fin-dot-strong) 1.25px, transparent 1.75px);
	-webkit-mask-image: radial-gradient(circle 1100px at var(--fin-x) var(--fin-y), transparent calc(var(--sg-breath) - var(--ring-a, 220px)), #000 calc(var(--sg-breath) - var(--ring-b, 60px)), #000 var(--sg-breath), transparent calc(var(--sg-breath) + var(--ring-c, 90px))), var(--fin-area);
	-webkit-mask-composite: source-in;
	mask-image: radial-gradient(circle 1100px at var(--fin-x) var(--fin-y), transparent calc(var(--sg-breath) - var(--ring-a, 220px)), #000 calc(var(--sg-breath) - var(--ring-b, 60px)), #000 var(--sg-breath), transparent calc(var(--sg-breath) + var(--ring-c, 90px))), var(--fin-area);
	mask-composite: intersect;
}
html[data-lv2][lang] body.home:not(.sg-academy) .final-box h2 {
	color: #fff;
}
html[data-lv2][lang] body.home:not(.sg-academy) .final-box :is(.lead, .lead a, .fine, .fine a, .final-free) {
	color: rgba(255, 255, 255, 0.86);
}
html[data-lv2][lang] body.home:not(.sg-academy) .final-box .final-free,
html[data-lv2][lang] body.home:not(.sg-academy) .final-box .final-free .lk-nosignup {
	color: #fff;
}
@media (prefers-reduced-motion: no-preference) {
	html.sg-lively body.home:not(.sg-academy) .section.final.sg-in::after {
		animation: sg-breath 5s cubic-bezier(0.35, 0.1, 0.35, 1) 0.1s 1 both;
	}
	html.sg-lively body.home:not(.sg-academy) .section.final.sg-pulse-a::after {
		animation: sg-breath-now-a 3.6s cubic-bezier(0.25, 0.5, 0.35, 1) 0s 1 both;
	}
	html.sg-lively body.home:not(.sg-academy) .section.final.sg-pulse-b::after {
		animation: sg-breath-now-b 3.6s cubic-bezier(0.25, 0.5, 0.35, 1) 0s 1 both;
	}
}

/* ------------------------------------------------------------------ telefoon: de golf ook daar
 * De golf van de hero is gemaakt voor desktopafstanden (120 tot 1000px, eerst onzichtbaar) en loopt
 * daarom pas vanaf 960px. Op de telefoon is het stippenvlak rechtsboven maar ~270px: daar zou de ring
 * er al doorheen zijn voordat hij zichtbaar wordt. Dus een kortere golf (0 tot 560px) met een dunnere
 * ring, meteen zichtbaar, voor de hero en de slotband gelijk. home-lively.js laat de hero-stippen kort
 * na het laden één keer ademen (de intro van het dashboard, die dat op desktop doet, speelt op de
 * telefoon pas als het venster ver genoeg in beeld is). Sinds de rookwolk (11 nov) alleen nog de slotband. */
@keyframes sg-phone-breath {
	0% { --sg-breath: 0px; opacity: 1; }
	80% { opacity: 0.9; }
	100% { --sg-breath: 560px; opacity: 0; }
}
@keyframes sg-phone-pulse-a {
	0% { --sg-breath: 0px; opacity: 1; }
	80% { opacity: 0.9; }
	100% { --sg-breath: 560px; opacity: 0; }
}
@keyframes sg-phone-pulse-b {
	0% { --sg-breath: 0px; opacity: 1; }
	80% { opacity: 0.9; }
	100% { --sg-breath: 560px; opacity: 0; }
}
@media (max-width: 959px) {
	html[data-lv2][lang] body.home:not(.sg-academy) .section.final {
		--ring-a: 120px;
		--ring-b: 30px;
		--ring-c: 50px;
		--fin-x: 100%;
		--fin-y: 0%;
		--fin-area: radial-gradient(ellipse 80% 300px at 100% 0%, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.35) 55%, transparent 100%);
	}
}
@media (max-width: 959px) and (prefers-reduced-motion: no-preference) {
	html.sg-lively body.home:not(.sg-academy) .section.final.sg-in::after {
		animation: sg-phone-breath 3.2s cubic-bezier(0.35, 0.1, 0.35, 1) 0.1s 1 both;
	}
	html.sg-lively body.home:not(.sg-academy) .section.final.sg-pulse-a::after {
		animation: sg-phone-pulse-a 2.6s cubic-bezier(0.25, 0.5, 0.35, 1) 0s 1 both;
	}
	html.sg-lively body.home:not(.sg-academy) .section.final.sg-pulse-b::after {
		animation: sg-phone-pulse-b 2.6s cubic-bezier(0.25, 0.5, 0.35, 1) 0s 1 both;
	}
}

/* ------------------------------------------------------------------ hero: rookwolk in plaats van stippen
 * Founder 11 nov 2026 (getest op /homepage-levendig/): achter en rond het dashboard drijven vier zachte
 * kleurvlakken langzaam door elkaar. Licht: Ochtend (oker, abrikoos, zacht rozé; geen echt rood, zodat
 * de rode knop het felste blijft). Donker: Gloed (wijnrood, amber, koper). De stippen van de hero en hun
 * golf maken plaats; de streepjeslijn blijft. Alleen transform beweegt, geen filter: soepel op de
 * telefoon. Bij "minder beweging" staat de rook stil. */
.sg-smoke {
	display: none;
}
html[data-lv2] body.home:not(.sg-academy) .hero:has(.hero-copy) > .sg-smoke {
	display: block;
	position: absolute;
	z-index: -2;
	inset: -8% -6% -12% 30%;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%), linear-gradient(180deg, transparent 0, #000 14%, #000 78%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(90deg, transparent 0, #000 26%), linear-gradient(180deg, transparent 0, #000 14%, #000 78%, transparent 100%);
	mask-composite: intersect;
	--s1: rgba(232, 168, 56, 0.48);
	--s2: rgba(255, 179, 122, 0.5);
	--s3: rgba(244, 166, 160, 0.46);
	--s4: rgba(214, 140, 40, 0.24);
}
html[data-theme="dark"][data-lv2] body.home:not(.sg-academy) .hero:has(.hero-copy) > .sg-smoke {
	--s1: rgba(143, 12, 44, 0.42);
	--s2: rgba(210, 154, 55, 0.3);
	--s3: rgba(184, 102, 45, 0.34);
	--s4: rgba(170, 20, 60, 0.24);
}
@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"])[data-lv2] body.home:not(.sg-academy) .hero:has(.hero-copy) > .sg-smoke {
		--s1: rgba(143, 12, 44, 0.42);
		--s2: rgba(210, 154, 55, 0.3);
		--s3: rgba(184, 102, 45, 0.34);
		--s4: rgba(170, 20, 60, 0.24);
	}
}
html.sg-lively[data-lv2] body.home:not(.sg-academy) .hero:has(.hero-copy)::before,
html.sg-lively[data-lv2] body.home:not(.sg-academy) .hero:has(.hero-copy)::after {
	display: none;
}
.sg-smoke i {
	position: absolute;
	display: block;
	border-radius: 50%;
	background: radial-gradient(closest-side, var(--s) 0%, color-mix(in srgb, var(--s) 70%, transparent) 40%, color-mix(in srgb, var(--s) 25%, transparent) 72%, transparent 100%);
	will-change: transform;
}
.sg-smoke .s1 { --s: var(--s1); left: 18%; top: 0%; width: 64%; height: 74%; }
.sg-smoke .s2 { --s: var(--s2); left: 44%; top: 30%; width: 56%; height: 62%; }
.sg-smoke .s3 { --s: var(--s3); left: 6%; top: 42%; width: 50%; height: 56%; }
.sg-smoke .s4 { --s: var(--s4); left: 56%; top: -6%; width: 44%; height: 50%; }
@media (prefers-reduced-motion: no-preference) {
	.sg-smoke .s1 { animation: sg-drift-1 26s ease-in-out infinite alternate; }
	.sg-smoke .s2 { animation: sg-drift-2 21s ease-in-out -6s infinite alternate; }
	.sg-smoke .s3 { animation: sg-drift-3 31s ease-in-out -12s infinite alternate; }
	.sg-smoke .s4 { animation: sg-drift-4 24s ease-in-out -3s infinite alternate; }
}
@keyframes sg-drift-1 {
	0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1, 1); }
	50% { transform: translate3d(-9%, 7%, 0) rotate(24deg) scale(1.14, 0.92); }
	100% { transform: translate3d(5%, -4%, 0) rotate(48deg) scale(0.96, 1.08); }
}
@keyframes sg-drift-2 {
	0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1, 1); }
	50% { transform: translate3d(8%, -10%, 0) rotate(-30deg) scale(0.9, 1.12); }
	100% { transform: translate3d(-6%, 6%, 0) rotate(-52deg) scale(1.1, 0.95); }
}
@keyframes sg-drift-3 {
	0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1, 1); }
	50% { transform: translate3d(12%, -6%, 0) rotate(36deg) scale(1.18, 0.88); }
	100% { transform: translate3d(4%, 8%, 0) rotate(70deg) scale(0.94, 1.06); }
}
@keyframes sg-drift-4 {
	0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1, 1); }
	50% { transform: translate3d(-12%, 10%, 0) rotate(-20deg) scale(1.2, 1); }
	100% { transform: translate3d(-4%, 16%, 0) rotate(-44deg) scale(0.92, 1.12); }
}
/* Telefoon: de rook achter het dashboard, dat daar onder de tekst staat. */
@media (max-width: 959px) {
	html[data-lv2] body.home:not(.sg-academy) .hero:has(.hero-copy) > .sg-smoke {
		inset: 34% -24% -6% -24%;
		-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 82%, transparent 100%);
		mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 82%, transparent 100%);
	}
}

/* ------------------------------------------------------------------ hero: geen witte vlakken in de rook
 * De hero gaf het partnerlogo een dichte achtergrond, zodat de stippen er niet doorheen schenen
 * (landingv2.css). Zonder stippen staat dat als wit blok in de rook (founder, 11 nov 2026). */
html[data-lv2][lang] body.home:not(.sg-academy) .hero :is(.lv2-badge, .lv2-badge-t) {
	background-color: transparent;
}

/* ------------------------------------------------------------------ "Koppel je shop": een hele telefoon
 * Founder 11 nov 2026: de telefoon was onderaan afgesneden en vervaagd en leek daardoor uitgerekt. Nu een
 * hele iPhone in zijn echte verhouding (71,6 x 147,6 mm), met ronde onderkant, op elke schermgrootte. */
html[data-lv2][lang] body.home:not(.sg-academy) #connect.sk-connect .lk-phone.lk-phone-mail {
	width: 320px;
	height: auto;
	padding: 0 6px;
	overflow: visible;
	-webkit-mask-image: none;
	mask-image: none;
}
html[data-lv2][lang] body.home:not(.sg-academy) #connect.sk-connect .lk-phone-mail .lk-ph-body {
	position: relative;
	inset: auto;
	height: auto;
	aspect-ratio: 71.6 / 147.6;
	border-radius: 15.5% / 7.5%;
}
html[data-lv2][lang] body.home:not(.sg-academy) #connect.sk-connect .lk-phone-mail .lk-ph-screen {
	border-radius: 13.5% / 6.5%;
}
@media (max-width: 959px) {
	html[data-lv2][lang] body.home:not(.sg-academy) #connect.sk-connect .lk-phone.lk-phone-mail {
		width: 280px;
	}
}
@media (max-width: 640px) {
	html[data-lv2][lang] body.home:not(.sg-academy) #connect.sk-connect .lk-phone.lk-phone-mail {
		width: 252px;
		padding: 0 4px;
	}
}
/* Geen "Voorbeeld" in de telefoon bij "Koppel je shop" (founder, 11 nov 2026); de ruimte blijft, zodat
 * het terug-pijltje en de mail niet verschuiven. De figuur zegt het nog wel voor schermlezers (aria-label). */
html[data-lv2][lang] body.home:not(.sg-academy) #connect .sk-cn-phone .lk-ml-bar .hero-today-sample {
	visibility: hidden;
}