/*
 * home.css — laddas bara på startsidan.
 *
 * Måtten är avlästa på longevitylabs.se så att de två sajterna känns som
 * samma varumärke: kort på ljusgrå yta med 16 px radie, produktbild på en
 * något varmare grå, pris i accentfärgen, pill-formade knappar.
 *
 * Karusellerna är riktiga scroll-områden med scroll-snap, inte
 * JS-transformer. Det betyder att de fungerar med finger, styrplatta,
 * piltangenter och skärmläsare även om home.js aldrig laddas — pilarna är
 * det enda JS lägger till.
 *
 * Budget: ≤ 5 kB gzippad — mät med ./scripts/css-budget.py. Filen ligger
 * på ~2,6 kB och täcker elva sektioner. Räcker inte budgeten är det ett
 * tecken på att en sektion borde återanvända en befintlig komponent i
 * stället för att få en egen.
 */

@layer layout {

	/*
	 * Samma spalt som .wrap men utan lodrät padding — startsidan styr
	 * sin egen rytm med marginaler mellan sektionerna istället.
	 */
	.home-wrap {
		max-width: var(--wrap-max);
		margin-inline: auto;
		padding-inline: var(--wrap-gutter);
	}

	.home-section {
		margin-block-start: var(--space-2xl);
	}

	/*
	 * Heron går kant i kant och har därför varken ränna eller luft här.
	 * Allt sitter på ytan inuti — se @layer components.
	 */
	.home-hero {
		padding: 0;
	}

	.home-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-m) var(--space-s);
		padding: 0;
		margin: 0;
		list-style: none;
	}

	@media (min-width: 768px) {
		.home-grid {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
	}

	@media (min-width: 1200px) {
		.home-grid {
			grid-template-columns: repeat(4, minmax(0, 1fr));
			gap: var(--space-l) 20px;
		}
	}
}

@layer components {

	/* ---------------------------------------------------------------- */
	/* Gemensamma byggstenar                                             */
	/* ---------------------------------------------------------------- */

	.home-section__title {
		margin-block-end: var(--space-m);
		font-family: var(--font-display);
		font-size: var(--step-3);
		font-weight: 600;
		letter-spacing: -0.02em;
		line-height: 1.2;
		color: var(--color-ink);
	}

	.home-accent {
		color: var(--color-accent);
	}

	/*
	 * Överraden är accentfärgad, som på .se. Den är sektionens enda
	 * färgklick ovanför rubriken och det som gör att avsnittet läses som
	 * en egen enhet — i grått försvann den i stället in i bakgrunden.
	 *
	 * -ink-varianten och inte --color-accent: raden är 11 px, och under
	 * ~14 px kräver kontrastkravet den mörkare tonen (se tokens).
	 */
	.home-eyebrow {
		margin: 0 0 var(--space-2xs);
		font-family: var(--font-sans);
		font-size: 0.6875rem;
		font-weight: 700;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--color-accent-ink);
	}

	.home-button {
		display: inline-block;
		padding: 0.7em 1.6em;
		border: 0;
		border-radius: var(--radius-pill);
		background: var(--color-button);
		color: var(--color-button-text);
		font-family: var(--font-sans);
		font-size: var(--step--1);
		font-weight: 500;
		line-height: 1.4;
		text-decoration: none;
		white-space: nowrap;
		transition: background-color 0.15s;
	}

	.home-button:hover,
	.home-button:focus-visible {
		background: var(--color-accent);
	}

	/* ---------------------------------------------------------------- */
	/* Stora bildytor: hero, löftet, nyhetsbrev                          */
	/* ---------------------------------------------------------------- */

	/*
	 * Tre sektioner visar en stor bild med samma behandling. Proportionen
	 * skiljer sig och sätts per sektion; allt annat står här en gång.
	 */
	.home-hero__img,
	.home-hero__placeholder,
	.home-promise__img,
	.home-promise__placeholder,
	.home-newsletter__img {
		width: 100%;
		border-radius: var(--radius-panel);
		object-fit: cover;
	}

	/*
	 * Platshållare när ingen bild är uppladdad. Ritade i märkets
	 * formspråk, så att en tom sektion ser ut som varumärket och inte
	 * som ett fel.
	 */
	.home-hero__placeholder,
	.home-promise__placeholder {
		overflow: hidden;
		background: linear-gradient(
			165deg,
			color-mix(in srgb, var(--color-accent) 24%, #fff),
			var(--color-surface-warm)
		);
		color: var(--color-accent);
	}

	.home-hero__placeholder svg,
	.home-promise__placeholder svg {
		width: 100%;
		height: 100%;
	}

	/* ---------------------------------------------------------------- */
	/* Hero                                                              */
	/* ---------------------------------------------------------------- */

	/*
	 * Heron är ett foto över hela första skärmen, med sidhuvudet
	 * genomskinligt ovanpå och texten nere till vänster. Kampanjbildens
	 * upplägg, valt av Linus 2026-08-12 (se docs/04).
	 *
	 * Skillnaden mot en vanlig sektion är att fotot inte har någon egen
	 * plats i flödet: det ligger absolut bakom allt annat och är därför
	 * exakt lika stort som skärmen. Ytan under det är mörk också utan
	 * foto — hinner bilden inte fram står vit text mot mörkt och inte mot
	 * vitt, och en LCP-bild som laddar sent får aldrig göra rubriken
	 * oläslig.
	 *
	 * `isolation: isolate` gör sektionen till egen staplingskontext, så
	 * att fotots `z-index: -1` hamnar bakom texten men framför sektionens
	 * bakgrund i stället för bakom hela sidan.
	 */
	.home-hero {
		position: relative;
		isolation: isolate;
		background: var(--color-surface-ink);
		color: var(--color-paper);
	}

	/*
	 * En skärm hög, minus sidhuvudet. Raden är vit och klibbig och tar sin
	 * egen plats i flödet, alltså börjar heron under den — utan avdraget
	 * hade fotots underkant och löftena hamnat en radhöjd under vikningen.
	 *
	 * Höjden mäts av main.js och skrivs till `--header-height`, eftersom
	 * logotypen bestämmer den och Linus byter logotyp i Customizern.
	 * Reservvärdet är radens höjd med dagens fil, så att första bildrutan
	 * sitter rätt även innan skriptet vaknat.
	 *
	 * `svh` och inte `vh` eller `dvh`: på en telefon räknar vh med
	 * adressfältet som glider undan, och heron hade då stuckit ut lika
	 * mycket som fältet är högt. `dvh` följer fältet i stället — men
	 * ändras då mitt i skrollen, heron växer några tiotals pixlar och
	 * fotot bakom (`object-fit: cover`) skalas om. Det såg ut som att
	 * bilden zoomade in (Linus 2026-08-15). `svh` är det lägre måttet
	 * med fältet synligt och rör sig aldrig; när fältet gått undan tittar
	 * nästa sektion fram en aning under, vilket är rätt. Raden före är
	 * fallbacken.
	 *
	 * Texten hamnar i botten av tre rader: ett tomt spår som tar allt
	 * överskott, texten, och foten. Rännan ligger som padding och räknas
	 * inifrån och ut — halva överskottet mellan fönstret och
	 * innehållsbredden, plus rännan — så att första bokstaven hamnar exakt
	 * där innehållet i nästa sektion börjar.
	 */
	.home-hero__inner {
		display: grid;
		grid-template-rows: 1fr auto auto;
		min-height: calc(100vh - var(--header-height, 68px));
		min-height: calc(100svh - var(--header-height, 68px));
		max-width: none;
		padding-block: var(--space-l);
		padding-inline: calc((100% - min(100%, var(--wrap-max))) / 2 + var(--wrap-gutter));
	}

	/*
	 * Genvägsraden på telefon ligger fast över sidans fot. Utan avdraget
	 * hamnar löftena bakom den.
	 */
	@media (max-width: 1199px) {
		.has-mobile-bar .home-hero__inner {
			min-height: calc(100svh - var(--header-height, 68px) - 55px - env(safe-area-inset-bottom));
		}
	}

	.home-hero__text {
		grid-row: 2;
		max-width: 40ch;
	}

	.home-hero__foot {
		grid-row: 3;
		margin-block-start: var(--space-xl);
	}

	/* ---- Bilden ------------------------------------------------------ */

	/*
	 * Fotot fyller sektionen och ligger bakom allt. `inset: 0` räknas mot
	 * sektionens paddingruta, alltså hela fönstrets bredd — rännan i
	 * `__inner` håller texten på innehållsbredden men får inte hålla
	 * tillbaka bilden.
	 */
	.home-hero__aside {
		position: absolute;
		inset: 0;
		z-index: -1;
	}

	.home-hero__media,
	.home-hero__slide,
	.home-hero__photo,
	.home-hero__img,
	.home-hero__placeholder {
		width: 100%;
		height: 100%;
	}

	/*
	 * Produktrutorna hör till rutnätet på desktop och finns inte på telefon,
	 * där fotot fyller hela skärmen och texten ligger ovanpå. De står ändå i
	 * markupen på alla bredder — se hero.php — och kostar ingen förfrågan
	 * här: deras bilder ligger bakom en `<source media>` med samma brytpunkt
	 * som det här blocket, se lg_home_hero_tile().
	 */
	.home-hero__tile {
		display: none;
	}

	/*
	 * Bildtexten hör också till rutnätet. På telefon ligger rubriken och
	 * knapparna i fotots nedre vänstra hörn, alltså är hörnet upptaget.
	 */
	.home-hero__caption {
		display: none;
	}

	.home-hero__media {
		position: absolute;
		inset: 0;
		grid-template-rows: minmax(0, 1fr);
		overflow: hidden;
	}

	.home-hero__img,
	.home-hero__placeholder {
		border-radius: 0;
		object-fit: cover;
		/*
		 * Beskärningen håller i överkanten. Båda porträtten har huvudet
		 * högst upp, och allt som ryker ska göra det underifrån: ett
		 * avkapat huvud ser ut som ett misstag, ett avkapat knä gör det
		 * inte.
		 *
		 * Gäller åt båda hållen. Blueprint-bilden är stående 3:4 och
		 * beskärs på höjden i telefonens smala ruta; Lineage-bilden är
		 * kvadratisk och beskärs på höjden överallt.
		 */
		object-position: 50% 0;
	}

	/*
	 * Toningen över fotot. En enda kvar, och den kommer underifrån: texten
	 * står där, och ett foto vi inte kan förutsäga får aldrig avgöra om
	 * rubriken går att läsa.
	 *
	 * De två andra är borta. Den uppifrån fanns för det genomskinliga
	 * sidhuvudets skull och sidhuvudet är vitt igen. Den från vänster lade
	 * ett grått raster över hela bildens vänstra hälft — alltså över
	 * ansiktet — för att skydda en textspalt som redan skyddas underifrån.
	 * Linus bad om ett foto utan mörker på, 2026-08-13, och den kostade
	 * mest bild per läsbarhet.
	 *
	 * Den här måste vara kvar, och nå ända upp bakom rubriken. Testat utan:
	 * rubrikens accentfärgade ord hamnar då på bar himmel och mäter under
	 * 2:1. Ansiktet sitter i den övre tredjedelen och ligger utanför
	 * toningen — det är den delen av bilden som blev fri.
	 *
	 * Tonen är ytans egen och inte svart. Ett svart raster över ett foto
	 * gör det grått; ytans mörkgrönblå binder ihop bilden med resten av
	 * sektionen i stället.
	 */
	.home-hero__aside::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(
			to top,
			color-mix(in srgb, var(--color-surface-ink) 86%, transparent) 0%,
			color-mix(in srgb, var(--color-surface-ink) 58%, transparent) 30%,
			color-mix(in srgb, var(--color-surface-ink) 30%, transparent) 50%,
			transparent 68%
		);
	}

	/*
	 * Lägena staplas i samma rutnätscell i stället för att positioneras
	 * absolut, så att övergången kan tonas.
	 *
	 * `pointer-events: none` på det som inte visas: det översta läget tar
	 * emot musen även vid opacity 0, och ett osynligt lager som fångar
	 * klick är precis den bugg som fällde ut megamenyn mitt på sidan.
	 */
	.home-hero__slide {
		grid-area: 1 / 1;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.6s ease;
	}

	.home-hero__slide.is-active {
		opacity: 1;
		pointer-events: auto;
	}

	/*
	 * Utan JS är inget läge markerat som aktivt av skriptet — men läge 1
	 * har `is-active` redan från PHP, så heron står still med rätt bild och
	 * rätt knapp. Rutnätet slås bara på när det finns fler än ett läge,
	 * det vill säga när elementet har data-hero.
	 */
	[data-hero] {
		display: grid;
	}

	/* ---- Rutnätet på desktop ------------------------------------------ */

	/*
	 * Över 1024 px är heron inte ett foto med text ovanpå utan ett rutnät:
	 * porträttet till vänster, två varor ur samma märke till höger, texten
	 * över alltihop och löftesbandet under. Valt av Linus 2026-08-13 (se
	 * docs/04).
	 *
	 * Skälet är att vi säljer sju märken och en bild bara kan visa ett. Med
	 * rutorna säger första skärmen både vilket märke bilden gäller och vad
	 * det faktiskt går att köpa, utan att någon behöver skrolla.
	 *
	 * Telefonen rör vi inte: där ligger fotot kvar över hela skärmen med
	 * texten nere till vänster, vilket är hela poängen med att växlingen
	 * sker här och inte i markupen.
	 */
	@media (min-width: 1200px) {

		/*
		 * Två spalter och två rader: texten till vänster, rutnätet till
		 * höger, foten tvärs under båda.
		 *
		 * Texten står bredvid bilderna och inte ovanför dem, trots att
		 * skissen hade den ovanför. Skälet är höjden: rubriken är sidans
		 * största typografi och tar en tredjedel av skärmen, och läggs den
		 * ovanpå rutnätet blir porträttet en liggande list på varje laptop
		 * med 900 px höjd eller mindre. Bredvid varandra får bilden hela
		 * höjden i stället.
		 */
		/*
		 * Extra luft i överkanten, utöver sektionens egen. Båda porträtten
		 * har huvudet högt i bild — Paul-bilden har bara ett par procent
		 * grönska ovanför hårfästet — och med sektionens vanliga ränna
		 * hamnade hjässan drygt fyrtio pixlar under menyraden. Det läste som
		 * att bilden tryckte upp i sidhuvudet.
		 *
		 * Luften läggs på hela rutnätet och inte bara på bilden, så att
		 * texten till vänster följer med. Flyttas bara bilden ned tappar de
		 * två spalterna sin gemensamma överkant.
		 */
		.home-hero__inner {
			grid-template-columns: minmax(0, 30rem) minmax(0, 1fr);
			grid-template-rows: minmax(0, 1fr) auto;
			column-gap: var(--space-xl);
			padding-block-start: var(--space-xl);
		}

		.home-hero__text {
			grid-area: 1 / 1;
			align-self: center;
			max-width: none;
		}

		/*
		 * Bildytan lämnar sin absoluta position och blir en spalt i
		 * rutnätet. `relative` blir kvar: lägena inuti ligger fortfarande
		 * ovanpå varandra och behöver något att räknas mot.
		 *
		 * Minsta höjden hindrar att porträttet pressas till en list på en
		 * låg laptop. Heron blir då högre än skärmen, vilket är rätt
		 * avvägning: en avhuggen bild är värre än en sektion som visar att
		 * det finns mer under.
		 */
		.home-hero__aside {
			position: relative;
			grid-area: 1 / 2;
			z-index: auto;
			min-height: 26rem;
		}

		.home-hero__foot {
			grid-row: 2;
			grid-column: 1 / -1;
		}

		/*
		 * Toningarna hör till telefonen. Här står ingen text på fotot —
		 * den ligger ovanför rutnätet på den mörka plattan — och ett
		 * raster över bilden hade bara gjort den grå utan att göra något
		 * läsbart.
		 */
		.home-hero__aside::after {
			content: none;
		}

		/*
		 * 1,6 mot 1 mellan porträttet och korten.
		 *
		 * Ett försök att låta bilderna fylla kortets bredd och ändå visa
		 * hela varan är provat och bortvalt (Linus 2026-08-13). Det krävde
		 * kvadratisk bildyta, och eftersom kortets höjd då är sin egen bredd
		 * plus texten fick korten pressas ned till 210 px för att heron
		 * skulle rymmas på en skärm. Resultatet blev smala kort med kapade
		 * produktnamn och ett porträtt som beskars hårt i underkant.
		 */
		.home-hero__slide {
			display: grid;
			grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
			grid-template-rows: repeat(2, minmax(0, 1fr));
			gap: var(--space-s);
		}

		/*
		 * Porträttet tar hela vänsterspalten. Rundningen ligger på ramen
		 * och inte på bilden, så att beskärningen klipps av samma kant som
		 * rutorna bredvid har.
		 */
		.home-hero__photo {
			position: relative;
			grid-row: 1 / span 2;
			overflow: hidden;
			border-radius: var(--radius-panel);
		}

		/*
		 * Namnet på den som står på bilden. Egen mörk pill och ingen
		 * textskugga: fotona är oförutsägbara i just det hörnet — himmel på
		 * det ena, kött på det andra — och en skugga räcker inte mot allt.
		 * Pillen är samma form som knapparna ovanför, så den läser som en
		 * del av sidan och inte som en vattenstämpel.
		 */
		.home-hero__caption {
			display: block;
			position: absolute;
			inset-block-end: var(--space-m);
			inset-inline-start: var(--space-m);
			margin: 0;
			padding: 0.45em 0.9em;
			border-radius: var(--radius-pill);
			background: color-mix(in srgb, var(--color-surface-ink) 62%, transparent);
			color: var(--color-paper);
			font-size: 0.6875rem;
			font-weight: 600;
			letter-spacing: 0.14em;
			text-transform: uppercase;
		}

		/*
		 * Varorna är samma kort som resten av sajten, inte en egen sort:
		 * ljusgrå platta med 16 px radie, bilden på sin egen varmgrå ruta
		 * överst, namn och pris under. Se `.home-card` längre ned i filen —
		 * värdena är avsiktligt identiska, och ändras det ena ska det andra
		 * följa med.
		 *
		 * Ingen ram och ingen skugga. Ett kort som redan har egen platta
		 * mot ett vitt underlag behöver ingen kant för att läsas som kort,
		 * och kanten var det som fick de här att se hopsnickrade ut bredvid
		 * butikens egna.
		 */
		/*
		 * Hela kortet svarar på pekaren, inte bilden inuti det. Bilden växte
		 * fyra procent förut, som butikens kort gör — men de står i ett
		 * rutnät om fyra där rörelsen säger "det här är det du pekar på",
		 * medan de här två står ensamma bredvid ett porträtt och en
		 * bild som andades i sin ram bara såg ostadig ut. Kortet lyfter i
		 * stället, och skuggan under det är det som gör lyftet läsbart mot
		 * en vit sida.
		 */
		.home-hero__tile {
			display: grid;
			grid-template-rows: minmax(0, 1fr) auto;
			overflow: hidden;
			border-radius: var(--radius-card);
			background: var(--color-surface);
			color: var(--color-ink);
			/*
			 * Rutan är en länk, och länkar är understrukna i @layer base.
			 * Här bär hela kortet klicket — namnet och priset är inte var
			 * sin länk — och streck under dem läste som två separata mål.
			 * Samma rad finns på `.home-card` av samma skäl.
			 */
			text-decoration: none;
			transition: translate 0.2s ease, box-shadow 0.2s ease;
		}

		/*
		 * Litet lyft och en tät skugga tätt under kortet. Första försöket
		 * lyfte fyra pixlar, bytte plattan till gräddvitt och la en vid
		 * skugga under — tre saker på en gång, och kortet såg ut att lossna
		 * från sidan i stället för att svara. Kvar är rörelsen och skuggan
		 * som gör rörelsen läsbar; plattan står still.
		 */
		.home-hero__tile:hover,
		.home-hero__tile:focus-visible {
			translate: 0 -2px;
			box-shadow: 0 4px 14px rgb(27 35 39 / 0.09);
		}

		/*
		 * `contain` är förvalet, och skälet står kvar: en kvadratisk
		 * packshot i en liggande ruta kan inte både fylla bredden och
		 * behålla sina kanter. `cover` testades på dem (Linus 2026-08-13)
		 * och föll på att varan beskars. Priset blev den grå listen på var
		 * sida, och plattan under bilden är därför fortfarande varm och
		 * inte vit — listen ska se ut som en ram, inte som ett hål.
		 *
		 * Vägen ur det var aldrig en annan `object-fit` utan ett annat
		 * foto. En vara som har en bred bild i mediabiblioteket får den
		 * här i stället, och då är beskärningen inte längre ett ingrepp i
		 * en packshot utan den vanliga bakgrundsytan i ett miljöfoto —
		 * se `--wide` nedan och lg_wide_image_id().
		 */
		.home-hero__tile-media {
			display: block;
			min-height: 0;
			overflow: hidden;
			background: var(--color-surface-warm);
		}

		/*
		 * `contents`: `picture` finns bara för att bära media-villkoret och
		 * ska inte lägga sig som en inline-låda mellan rutan och bilden —
		 * då tappar bilden sin höjd.
		 */
		.home-hero__tile-media picture {
			display: contents;
		}

		.home-hero__tile-img {
			width: 100%;
			height: 100%;
			object-fit: contain;
		}

		/*
		 * Rutans proportion följer heron och står inte still — 1,88 vid
		 * 1280 px, 1,58 vid 1600. Därför beskärs det breda fotot här och
		 * inte i WordPress: en fast storlek hade passat vid en bredd och
		 * lämnat lister vid alla andra.
		 */
		.home-hero__tile-img--wide {
			object-fit: cover;
		}

		/*
		 * Texten: tre rader med varsin uppgift och varsin vikt — vad varan
		 * heter, vad den är, vad den kostar. Namnet är delat på tankstrecket
		 * i PHP (se lg_home_hero_tile_name()) just för att raderna ska bli
		 * tre korta i stället för en lång som bryter var den vill.
		 *
		 * Priset står avskilt med lite mer luft över sig än raderna emellan
		 * har. Det är den enda siffran i rutan, och den ska gå att hitta
		 * utan att läsa namnet först.
		 */
		.home-hero__tile-body {
			display: grid;
			gap: 0.15rem;
			padding: var(--space-s);
		}

		/*
		 * En rad var, med uteslutningstecken. Ett namn som bryter till två
		 * rader trycker priset ur linje mot rutan bredvid, och två rutor
		 * vars pris ligger på olika höjd ser slarviga ut även när ingen kan
		 * säga varför.
		 */
		.home-hero__tile-name,
		.home-hero__tile-meta {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		/*
		 * Etiketten över namnet. Versaler i petrol och inte en färgad pill:
		 * kortet har redan en bild i full bredd över sig, och en bricka
		 * ovanpå den hade blivit ett tredje lager i en ruta på 340 px.
		 * Raden ovanför namnet räcker för att säga vad den säger.
		 */
		.home-hero__tile-label {
			font-size: 0.6875rem;
			font-weight: 600;
			letter-spacing: 0.12em;
			text-transform: uppercase;
			line-height: 1.3;
			color: var(--color-accent-ink);
		}

		.home-hero__tile-name {
			font-size: var(--step--1);
			font-weight: 600;
			line-height: 1.35;
		}

		/* Underradens typografi delas med produktkortet — se .home-card__cat. */

		.home-hero__tile-price {
			margin-block-start: var(--space-3xs);
			font-size: var(--step--1);
			font-weight: 700;
			color: var(--color-accent-ink);
		}
	}

	/* ---- Texten ------------------------------------------------------- */

	/*
	 * Överraden. Bär märkets bricka och märkets namn — ett läge i
	 * karusellen är ett märke, och det ska stå överst där man läser först.
	 */
	.home-hero__eyebrow {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		margin: 0 0 var(--space-m);
		font-size: 0.6875rem;
		font-weight: 600;
		letter-spacing: 0.18em;
		text-transform: uppercase;
		color: var(--color-accent-soft);
	}

	/*
	 * På telefon står raden på fotot, och i ljus petrol försvann den helt när
	 * toningen över bildens övre del togs bort (Linus 2026-08-13) — 11 px
	 * versaler i en ljus färg mot en ljus himmel är ingenting att läsa.
	 *
	 * Två lösningar testades och båda är borta på Linus begäran: en mörk pill
	 * runt hela raden (ett block mitt i bilden, bredare än "Lineage
	 * Provisions") och en tät textskugga (syntes som en skugga).
	 *
	 * Kvar är bara vitt. Det är den enda färgen som håller mot både en
	 * blå himmel och en grön häck, och raden ligger dessutom i bildens
	 * mörkare vänsterkant på båda fotona. Kontrasten är svagare än på den
	 * vita plattan över brytpunkten — raden är en överrad, inte något man
	 * behöver läsa för att förstå sidan, och märkesbrickan bredvid bär
	 * samma information i bild.
	 */
	@media (max-width: 1199px) {
		.home-hero__eyebrow {
			color: var(--color-paper);
		}
	}

	/*
	 * Strecket ritas bara när brickan saknas, alltså när raden är en
	 * överrad ur Customizern och inte ett märke. Det är dekor, och en
	 * skärmläsare ska höra texten och inte ett bindestreck.
	 */
	.home-hero__eyebrow--rule::before {
		content: "";
		width: 2.25rem;
		height: 1px;
		background: currentColor;
		opacity: 0.55;
	}

	/*
	 * Märkesbrickan. Båda filerna är kvadratiska med mörk botten och
	 * märkesnamnet inuti — alltså ikoner, inte ordbilder. Krympta till
	 * radens höjd blev de en mörk fläck man inte kunde läsa; här får de sin
	 * egen ruta med rundade hörn, ungefär som en appikon.
	 *
	 * Kvadrat och inte cirkel: Lineages ordbild går nästan ut i kanterna
	 * och hade tappat sina yttersta bokstäver i en rund mask.
	 *
	 * Måttet i rem och inte i em: radens grad är 11 px, och 2,9em av det
	 * landar på ett brutet pixelmått. En bild som skalas dit ritas mellan
	 * bildpunkterna och ser mjuk ut hur bra källan än är.
	 */
	.home-hero__badge {
		flex: 0 0 auto;
		width: 2.25rem;
		height: 2.25rem;
		border-radius: 0.45rem;
		object-fit: cover;
	}

	/*
	 * Egen skala och inte --step-4: hero-rubriken är sidans enda riktigt
	 * stora typografi. Den fick gå upp igen när panelen blev mörk — vit
	 * text på nästan svart tål mer storlek än svart på vitt, och det är
	 * rubriken som ska bära första skärmen.
	 *
	 * `text-wrap: balance` jämnar ut raderna så att den sista inte blir
	 * ett ensamt ord.
	 */
	.home-hero__heading {
		margin: 0;
		font-size: clamp(2.3rem, 1.35rem + 2.7vw, 3.75rem);
		font-weight: 600;
		line-height: 1.06;
		letter-spacing: -0.03em;
		text-wrap: balance;
		color: var(--color-paper);
	}

	/*
	 * Accentfärgen byter ton på den mörka plattan — grundtonen mäter bara
	 * 4,2:1 mot den och blir grumlig i så stora ord.
	 *
	 * `nowrap`: "Anti-Aging" innehåller ett bindestreck, och en
	 * radbrytning är tillåten efter ett sådant. I sidans största typsnitt
	 * blev det "Anti-" på en rad och "Aging" på nästa — en avstavning
	 * ingen bett om.
	 */
	.home-hero__heading .home-accent {
		white-space: nowrap;
		color: var(--color-accent-soft);
	}

	.home-hero__lead {
		margin-block-start: var(--space-m);
		max-width: 46ch;
		font-size: var(--step-1);
		line-height: 1.55;
		color: var(--color-body-inverse);
	}

	/* ---- Knapparna --------------------------------------------------- */

	/*
	 * Butiken först i fylld knapp, märket bredvid i ihålig. Två knappar med
	 * samma vikt hade blivit två alternativ i stället för ett
	 * förstahandsval och ett andra.
	 */
	.home-hero__buttons {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-s);
		margin: var(--space-l) 0 0;
	}

	/*
	 * Vit platta med mörk text. På den mörka panelen är det den starkaste
	 * kontrast som finns, och den hör hemma på sidans huvudspår.
	 */
	.home-hero__shop {
		padding: 0.9em 2em;
		background: var(--color-paper);
		color: var(--color-surface-ink);
		font-size: var(--step-0);
		font-weight: 600;
	}

	.home-hero__shop:hover,
	.home-hero__shop:focus-visible {
		background: var(--color-accent-soft);
		color: var(--color-surface-ink);
	}

	/*
	 * Märkesknappen. Ihålig med kantlinje: den ska synas utan att slåss med
	 * den vita.
	 *
	 * Pilen ritas i CSS och inte i markupen — den är dekor, och en
	 * skärmläsare ska höra "Shop Blueprint", inte "Shop Blueprint högerpil".
	 */
	.home-hero__cta {
		display: inline-flex;
		align-items: center;
		gap: 0.6em;
		padding: 0.75em 1.2em;
		border: 1px solid var(--color-line-inverse);
		background: transparent;
		color: var(--color-paper);
		font-size: var(--step--1);
		font-weight: 600;
		transition: background-color 0.15s, border-color 0.15s;
	}

	.home-hero__cta::after {
		content: "→";
		font-size: 1.05em;
		line-height: 1;
		translate: 0 -0.03em;
		transition: translate 0.15s;
	}

	.home-hero__cta:hover,
	.home-hero__cta:focus-visible {
		border-color: var(--color-paper);
		background: rgb(255 255 255 / 0.08);
	}

	.home-hero__cta:hover::after {
		translate: 0.2em -0.03em;
	}

	/* ---- Texten på telefon ------------------------------------------- */

	/*
	 * På telefon står texten på fotot, och med skrivbordets grad täckte
	 * rubrik, ingress och två knappstaplade knappar mer än halva bilden
	 * (Linus 2026-08-15). Ansiktet försvann bakom orden.
	 *
	 * Mönstret från de mobila butiker som gör det här bäst: texten är ett
	 * kompakt block längst ned, bilden får resten. Rubriken går ned till
	 * en grad som fortfarande är sidans största men lämnar bilden i fred,
	 * ingressen till brödtextens grad, och de två knapparna står bredvid
	 * varandra i samma höjd i stället för på var sin rad. Avståndet till
	 * foten krymper så att hela blocket sjunker ned mot bandet.
	 */
	@media (max-width: 1199px) {
		.home-hero__eyebrow {
			margin-block-end: var(--space-s);
		}

		.home-hero__heading {
			font-size: clamp(1.85rem, 1.25rem + 2.6vw, 2.5rem);
			line-height: 1.08;
		}

		.home-hero__lead {
			margin-block-start: var(--space-xs);
			max-width: 34ch;
			font-size: var(--step-0);
			line-height: 1.5;
		}

		.home-hero__buttons {
			margin-block-start: var(--space-m);
			gap: var(--space-xs);
		}

		.home-hero__shop,
		.home-hero__cta {
			padding: 0.8em 1.35em;
			font-size: var(--step--1);
		}

		.home-hero__foot {
			margin-block-start: var(--space-l);
		}
	}

	/* ---- Sidhuvudet ovanför heron ------------------------------------- */

	/*
	 * Sidhuvudet låg tidigare genomskinligt *på* fotot, med vit text och en
	 * toning över bildens överkant för att texten skulle gå att läsa. Den
	 * vita raden är tillbaka (Linus 2026-08-13): en meny med egna kanter är
	 * lättare att träffa än en som flyter på ett foto, och toningen som
	 * fanns bara för menyns skull kunde tas bort med den — det var den som
	 * gjorde bildens överkant mörkast av allt.
	 *
	 * Kvar blir en enda regel. Plattan bakom raden är ett pseudoelement (se
	 * base.css) och är svagt genomskinlig med oskärpa i resten av sajten;
	 * här är den tät. Skillnaden är vad som glider under den: mot vitt
	 * innehåll är genomskinligheten en detalj, mot ett foto är den brus.
	 * Filen laddas bara på startsidan, alltså behöver väljaren ingen klass.
	 */
	.site-header::before {
		background: var(--color-paper);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	/* ---- Foten: löftena ----------------------------------------------- */

	/*
	 * Ett hårstreck tvärs över ytan, och under det löftena till vänster och
	 * karusellens reglage till höger. Löftena låg förut på en ljusgrå platta
	 * inne i textspalten: en platta inuti en yta är en ruta för mycket, och
	 * på 540 px klippte det rullande bandet mitt i orden.
	 */
	/*
	 * `min-width: 0` är inte kosmetika. Foten är ett rutnätsobjekt, och
	 * ett sådant är per grundregel aldrig smalare än sitt innehålls
	 * minsta bredd — här det rullande bandets fulla längd, ett par tusen
	 * pixlar. Utan raden blåser foten upp spalten och drar ut rubriken ur
	 * skärmen på mobil.
	 */
	.home-hero__foot {
		min-width: 0;
		padding-block-start: var(--space-m);
		border-block-start: 1px solid var(--color-line-inverse);
	}

	/*
	 * `overflow: hidden` håller det rullande bandet innanför kanten och
	 * nollar samtidigt lådans automatiska minsta bredd — utan det ärver
	 * den spårets `max-content`-bredd rakt igenom och drar ut foten.
	 */
	.home-hero__usps {
		min-width: 0;
		overflow: hidden;
	}

	/*
	 * Tre klasser djupt, inte två: bandets egen färgregel längre ned i
	 * filen är lika stark och står senare, och hade annars satt tillbaka
	 * bläckfärgen på den mörka panelen.
	 */
	.home-hero__usps .home-marquee--usp .home-marquee__item {
		color: var(--color-body-inverse);
	}

	.home-hero__usps .home-usp__icon {
		width: 1.5rem;
		height: 1.5rem;
	}

	/*
	 * Var sin färg på de tre ikonerna i stället för en gemensam — blå, gul,
	 * röd, valt av Linus. Det är paletten ljusa accenter: den ljusa petrolen
	 * som redan bär överraden, den dammiga rosa som Linus valt tidigare, och
	 * en gul satt i samma tonläge som de två.
	 *
	 * De är ljusa med flit, alltså lågmälda mot den vita plattan. Ikonerna
	 * är dekor och står bredvid sin egen text — inget här hänger på att man
	 * kan skilja färgerna åt.
	 *
	 * Färgen räknas på plats och inte på löftets innehåll. Ikonens *form*
	 * väljs redan på nyckelord i lg_home_usp_icon(), och två regelverk som
	 * båda läser samma text hade förr eller senare gett en klocka i
	 * lastbilens färg. Positionen är dessutom det enda som är stabilt: byter
	 * Linus ut ett löfte i Customizern följer färgen platsen, inte ordet.
	 *
	 * Räkningen går per grupp om tre, och bandets kopia är en egen `ul` —
	 * alltså börjar den om på blått och slingan går ihop.
	 */
	.home-hero__usps .home-marquee__item:nth-child(3n + 1) .home-usp__icon {
		color: var(--color-accent-soft);
	}

	.home-hero__usps .home-marquee__item:nth-child(3n + 2) .home-usp__icon {
		color: var(--color-accent-sun);
	}

	.home-hero__usps .home-marquee__item:nth-child(3n) .home-usp__icon {
		color: var(--color-accent-warm);
	}

	/*
	 * Bandet rullar på alla skärmar, likadant. Det stod still från 900 px
	 * och hade i stället streck och pilar bredvid sig för bildväxlingen;
	 * båda är borta (Linus 2026-08-13). Rörelsen är det som säger att raden
	 * är en rad och inte tre lösryckta löften, och den säger det lika bra
	 * på en skärm som i en hand. Löftena får hela foten i bredd.
	 *
	 * Luften mellan löftena växer med skärmen, annars ligger tre korta
	 * fraser och trängs i mitten av en tvåtusen pixlar bred rad.
	 */
	@media (min-width: 900px) {
		.home-hero__usps .home-marquee__group {
			gap: clamp(var(--space-l), 6vw, 8rem);
			padding-inline-end: clamp(var(--space-l), 6vw, 8rem);
		}
	}

	/*
	 * Mobil: allt står i en spalt inuti panelen. Avstånden är det enda som
	 * grupperar där, så rubriken får luft under sig och knapparna hålls
	 * ifrån bilden — två mörka former som rör vid varandra läses som en.
	 */
	@media (max-width: 1099px) {
		.home-hero__text {
			max-width: none;
		}

		.home-hero__foot {
			margin-block-start: var(--space-l);
		}
	}

	/*
	 * Utan masken glider ett löfte ut över den rundade kanten och plattan
	 * ser kapad ut.
	 *
	 * 14 % och inte 5. Fem procent av en spalt är knappt trettio pixlar,
	 * och på den sträckan hinner ett ord inte tona ut — det blev bara
	 * avhugget ("...hipping over 169 €") med en svag skugga över snittet,
	 * vilket ser ut som ett fel och inte som en kant. Utblekningen måste
	 * vara bredare än ett par bokstäver för att läsas som avsiktlig.
	 */
	.home-marquee--usp {
		mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
	}

	/*
	 * Egen fart. 45 s är satt för mediabandets arton namn; de tre löftena
	 * här är ett mycket kortare spår och rör sig därför bara omkring en
	 * tredjedel så snabbt vid samma tid. 25 s ger ungefär samma tempo i
	 * pixlar per sekund som resten av sidan.
	 */
	.home-marquee--usp .home-marquee__track {
		animation-duration: 25s;
	}

	/*
	 * Färgerna på den ljusa plattan står här och inte i blocket längre
	 * upp, av en enda anledning: reglerna de skriver över står mellan de
	 * två ställena, och lika stark specificitet avgörs av ordningen i
	 * filen. Flyttas något av det här uppåt blir rubriken vit på rosa igen.
	 */
	@media (min-width: 1200px) {
		/*
		 * Sektionen är vit här, inte mörk. Resten av sidan har ingen
		 * bakgrund alls — varenda sektion under heron ligger på papperet —
		 * och en hero med egen platta blev därför ett fält som inte hörde
		 * ihop med något. Två färgade plattor testades först, mörk och
		 * rosa, och båda gjorde samma sak: de blev en ram runt ett foto och
		 * två kort i stället för en bakgrund. Det som ska bära första
		 * skärmen är porträttet och typografin, inte ytan bakom dem.
		 *
		 * Telefonen är kvar på mörkt: där ligger texten fortfarande på
		 * fotot, och det ändras inte.
		 */
		.home-hero {
			background: var(--color-paper);
			color: var(--color-ink);
		}

		.home-hero__eyebrow {
			color: var(--color-accent-ink);
		}

		.home-hero__heading {
			color: var(--color-ink);
		}

		.home-hero__heading .home-accent {
			color: var(--color-accent);
		}

		.home-hero__lead {
			color: var(--color-body);
		}

		/*
		 * Huvudknappen: svart pill, ingen pil. Pilen fanns här ett tag och
		 * togs bort (Linus 2026-08-13) — märkesknappen bredvid har en, och
		 * två pilar i rad läste som två likvärdiga vägar vidare i stället
		 * för ett förstahandsval och ett andra. Nu är det den fyllda
		 * plattan som skiljer dem åt, vilket är det enda som behöver göra
		 * det.
		 *
		 * Vikt 500 och inte 600: på en vit yta räcker den svarta plattan
		 * för att göra knappen till sidans tyngsta element, och fetare text
		 * ovanpå den blir bara kompakt.
		 */
		.home-hero__shop {
			padding: 0.95em 1.9em;
			background: var(--color-ink);
			color: var(--color-paper);
			font-weight: 500;
			transition: background-color 0.15s;
		}

		.home-hero__shop:hover,
		.home-hero__shop:focus-visible {
			background: var(--color-accent-ink);
			color: var(--color-paper);
		}

		.home-hero__cta {
			border-color: var(--color-ink-muted);
			color: var(--color-ink);
		}

		.home-hero__cta:hover,
		.home-hero__cta:focus-visible {
			border-color: var(--color-ink);
			background: rgb(0 0 0 / 0.04);
		}

		.home-hero__foot {
			border-block-start-color: var(--color-line);
		}

		.home-hero__usps .home-marquee--usp .home-marquee__item {
			color: var(--color-body);
		}

	}

	/* ---------------------------------------------------------------- */
	/* Rullande band                                                     */
	/* ---------------------------------------------------------------- */

	.home-marquee {
		overflow: hidden;
	}

	/*
	 * Innehållet finns i två identiska grupper. Spåret flyttas exakt en
	 * halv spårbredd och börjar om — då hamnar kopian precis där
	 * originalet stod och slingan går ihop utan hopp.
	 */
	.home-marquee__track {
		display: flex;
		width: max-content;
		animation: home-marquee 45s linear infinite;
	}

	.home-marquee--reverse .home-marquee__track {
		animation-direction: reverse;
	}

	.home-marquee:hover .home-marquee__track {
		animation-play-state: paused;
	}

	.home-marquee__group {
		display: flex;
		align-items: center;
		gap: var(--space-xl);
		padding: 0;
		padding-inline-end: var(--space-xl);
		margin: 0;
		list-style: none;
	}

	.home-marquee__item {
		white-space: nowrap;
	}

	@keyframes home-marquee {
		to {
			transform: translateX(-50%);
		}
	}

	/*
	 * Reset-lagret stoppar redan animationen vid prefers-reduced-motion.
	 * Kvar blir ett stillastående band — då ska det gå att scrolla för
	 * hand istället.
	 */
	@media (prefers-reduced-motion: reduce) {
		.home-marquee {
			overflow-x: auto;
		}
	}

	.home-marquee--usp .home-marquee__item {
		display: flex;
		align-items: center;
		gap: var(--space-2xs);
		font-size: var(--step--1);
		color: var(--color-ink);
	}

	/*
	 * Fasta mått och `flex: none`: ikonen ska varken krympa när raden är
	 * trång eller skalas med radhöjden. Färgen sätts här och inte i
	 * SVG:n — strecken ritas i `currentColor`, så en ändring av accenten
	 * i tokens slår igenom på alla tre ikonerna.
	 */
	.home-usp__icon {
		flex: none;
		width: 1.75rem;
		height: 1.75rem;
		color: var(--color-accent-warm);
	}

	/* ---------------------------------------------------------------- */
	/* Sett i media                                                      */
	/* ---------------------------------------------------------------- */

	/*
	 * Bandet ligger på en egen platta i stället för fritt på sidan. Utan
	 * den ser raden ut som lös text mitt i vitt — plattan är det som gör
	 * den till en sektion.
	 */
	/*
	 * Fetare platta än USP-bandets, på alla skärmar. Bandet här bär bara
	 * en rad logotyper i grått — utan luft omkring dem läser plattan som
	 * en remsa i stället för som en sektion.
	 */
	/*
	 * Bandet går kant i kant med fönstret. Plattan ligger utanför wrappen
	 * i markupen (se media.php), alltså behövs varken negativ marginal
	 * eller `vw` — den är helt enkelt så bred som sektionen. Utan hörn att
	 * runda finns ingen radie heller.
	 */
	.home-media__panel {
		padding-block: var(--space-l);
		background: var(--color-surface-cream);
	}

	/*
	 * Undantaget från den accentfärgade överraden: "sett i media" är en
	 * neutral upplysning ovanför en rad logotyper, inte en sektion med
	 * eget budskap. Grå på .se, grå här.
	 */
	.home-media__eyebrow {
		margin-block-end: var(--space-s);
		text-align: center;
		color: var(--color-ink-muted);
	}

	/*
	 * Kanterna tonas ut i stället för att kapas tvärt. Utan masken ser
	 * bandet ut att gå sönder vid plattans kant; med den glider namnen in
	 * och ut. Masken är också det enda som gör radien synlig — annars
	 * ligger ett namn ovanpå hörnet.
	 */
	.home-marquee--media {
		mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	}

	.home-marquee--media .home-marquee__group {
		gap: 0;
		padding-inline-end: 0;
	}

	/*
	 * Varje redaktion i sin egen stil, som på .se. Familjerna är lokala
	 * namn utan @font-face: har systemet Didot eller Old English Text
	 * används det, annars ramlar namnet ned på Georgia. Det kostar noll
	 * requests och bryter alltså inte mot beslutet om systemfonter — vi
	 * ber om typsnitt som redan finns, vi hämtar inga.
	 */
	.home-media__name {
		display: flex;
		align-items: center;
		height: 44px;
		padding-inline: clamp(1.25rem, 4vw, 2.5rem);
		font-family: var(--font-display);
		font-size: var(--step-1);
		font-weight: 500;
		letter-spacing: 0.04em;
		line-height: 1;
		text-transform: uppercase;
		color: var(--color-ink);
		opacity: 0.7;
		transition: opacity 0.2s;
	}

	.home-media__name:hover {
		opacity: 1;
	}

	.home-media__name--vogue {
		font-family: Didot, "Bodoni MT", Georgia, serif;
		font-size: 1.75rem;
		font-weight: 400;
		letter-spacing: 0.08em;
	}

	.home-media__name--gq {
		font-family: Didot, "Bodoni MT", Georgia, serif;
		font-size: 2rem;
		font-weight: 900;
		letter-spacing: -0.02em;
	}

	.home-media__name--vice {
		font-family: "Arial Black", var(--font-sans);
		font-size: 1.4rem;
		font-weight: 900;
		font-style: italic;
		letter-spacing: -0.04em;
	}

	.home-media__name--the-washington-post,
	.home-media__name--dn,
	.home-media__name--svd {
		font-family: Georgia, "Times New Roman", serif;
		font-weight: 700;
		text-transform: none;
	}

	.home-media__name--the-washington-post {
		font-size: 1.1rem;
	}

	.home-media__name--dn {
		font-size: 1.9rem;
		text-transform: uppercase;
	}

	.home-media__name--svd {
		font-size: 1.55rem;
		font-style: italic;
	}

	.home-media__name--the-new-york-times {
		font-family: "Old English Text MT", "Times New Roman", serif;
		font-size: 1.2rem;
		font-weight: 400;
		letter-spacing: 0.01em;
		text-transform: none;
	}

	.home-media__name--forbes {
		font-family: "Times New Roman", Georgia, serif;
		font-size: 1.7rem;
		font-weight: 800;
		font-style: italic;
		letter-spacing: -0.02em;
	}

	.home-media__name--bloomberg,
	.home-media__name--business-insider {
		font-family: "Helvetica Neue", var(--font-sans);
		font-weight: 900;
		letter-spacing: -0.02em;
	}

	.home-media__name--bloomberg {
		font-size: 1.1rem;
		text-transform: none;
	}

	.home-media__name--business-insider {
		font-size: 1rem;
	}

	.home-media__name--wired {
		font-family: "Arial Black", var(--font-sans);
		font-size: 1.45rem;
		font-weight: 900;
		letter-spacing: -0.04em;
	}

	.home-media__name--cnn {
		font-family: "Helvetica Neue", var(--font-sans);
		font-size: 1.7rem;
		font-weight: 900;
		font-style: italic;
		letter-spacing: -0.04em;
		color: #c00;
	}

	/*
	 * Enda namnet som sätts i flera rader — på en rad blir det dubbelt så
	 * brett som allt annat i bandet. Två saker krävs för att det ska
	 * hålla sig inom sin egen box, och båda saknades:
	 *
	 * `white-space` måste tillbaka till normal. Bandets items är nowrap
	 * så att ettordsnamn aldrig bryts, men då bröts inte det här heller.
	 *
	 * `content-box` måste sättas. Resten av sidan ärver border-box, och
	 * då räknas bandets sidoluft in i max-width — textytan blev noll bred
	 * och namnet rann ut åt båda håll och lade sig ovanpå BBC. Måttet
	 * ska gälla textraden, inte boxen.
	 *
	 * Bredden rymmer "EXPERIENCE", det längsta ordet, och höjden får bli
	 * vad tre rader kräver i stället för bandets 44 px — samma sak som de
	 * färgade plattorna nedan gör.
	 */
	.home-media__name--the-joe-rogan-experience {
		box-sizing: content-box;
		max-width: 13ch;
		height: auto;
		font-family: "Helvetica Neue", var(--font-sans);
		font-size: 0.8rem;
		font-weight: 800;
		letter-spacing: 0.04em;
		line-height: 1.15;
		white-space: normal;
		text-align: center;
	}

	/*
	 * Fyra redaktioner har en färgad platta i stället för bara text. Den
	 * gemensamma delen står här; färgen är det enda som skiljer.
	 */
	.home-media__name--time,
	.home-media__name--svt,
	.home-media__name--aftonbladet,
	.home-media__name--di,
	.home-media__name--bbc {
		margin-inline: clamp(1.25rem, 4vw, 2.5rem);
		padding-inline: 0.5em;
		height: auto;
		padding-block: 0.28em;
		color: #fff;
	}

	.home-media__name--time {
		background: #d52b1e;
		font-family: "Times New Roman", Georgia, serif;
		font-size: 1.7rem;
		font-weight: 700;
	}

	.home-media__name--svt {
		border-radius: 3px;
		background: #1f9a3a;
		font-family: "Helvetica Neue", var(--font-sans);
		font-size: 1.45rem;
		font-weight: 800;
		letter-spacing: -0.02em;
	}

	.home-media__name--aftonbladet {
		background: #ec1c24;
		font-family: "Helvetica Neue", var(--font-sans);
		font-size: 0.875rem;
		font-weight: 800;
	}

	.home-media__name--di {
		background: #ed8b00;
		font-family: "Helvetica Neue", var(--font-sans);
		font-size: 0.875rem;
		font-weight: 800;
		letter-spacing: 0.02em;
	}

	.home-media__name--bbc {
		background: #000;
		font-family: "Helvetica Neue", var(--font-sans);
		font-size: 1rem;
		font-weight: 900;
		letter-spacing: 0.18em;
		/* Spärrningen lägger luft efter sista B:et — kompensera. */
		text-indent: 0.18em;
	}

	/* ---------------------------------------------------------------- */
	/* Karusell                                                          */
	/* ---------------------------------------------------------------- */

	/*
	 * Wrappern klipper vågrätt, trots att spåret inuti redan har
	 * `overflow-x: auto`.
	 *
	 * Så fort spåret har scrollats läcker dess återstående högra
	 * överskott ut i förfädernas scrollbara yta, ända upp till
	 * dokumentet. Målningen klipps korrekt, så inget syns utanför — men
	 * sidan gick att dra åt höger ut i rent tomrum. Mätt vid 800 px vy:
	 * 785 px synligt mot 1674 px scrollbredd, och de 889 px däremellan
	 * var tomma. Av de tre karusellerna läckte bara bästsäljarnas, den
	 * enda vars spår stod på `scrollLeft` 256 i stället för 0.
	 *
	 * `clip` och inte `hidden`: `hidden` hade gjort wrappern till ett
	 * eget scrollområde ovanpå spårets, och pilarna ligger absolut
	 * positionerade inuti den. `clip` klipper utan att skapa något att
	 * scrolla, och är det enda värdet som får stå kvar bredvid ett
	 * lodrätt `visible` — höjden ska inte kapas.
	 */
	.home-carousel {
		position: relative;
		overflow-x: clip;
	}

	.home-carousel__track {
		display: flex;
		gap: var(--space-s);
		padding: 0;
		margin: 0;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		list-style: none;
		/* Scrollbaren får inte skjuta korten uppåt när den dyker upp. */
		overscroll-behavior-x: contain;
		/*
		 * Kanten tonas ut i stället för att kapas tvärt — ett kort som är
		 * avskuret mitt itu ska läsa som "raden fortsätter", inte som en
		 * bild som tagit slut.
		 *
		 * Måtten är noll som utgångsläge och sätts av home.js först åt det
		 * håll där något faktiskt är avskuret (klasserna nedan). Med noll
		 * ligger gradientens två första stopp på samma punkt, alltså finns
		 * ingen övergång alls och masken kostar ingenting.
		 *
		 * Masken ligger på spåret och inte på wrappen: den ska följa
		 * scrollportens kant. Pilarna är syskon utanför den och förblir
		 * skarpa, vilket är hela poängen — de ska synas tydligast just där
		 * raden är som blekast.
		 */
		--fade-start: 0px;
		--fade-end: 0px;
		mask-image: linear-gradient(
			to right,
			transparent,
			#000 var(--fade-start),
			#000 calc(100% - var(--fade-end)),
			transparent
		);
	}

	.home-carousel__track.is-cut-start {
		--fade-start: 3rem;
	}

	.home-carousel__track.is-cut-end {
		--fade-end: 3rem;
	}

	.home-carousel__track::-webkit-scrollbar {
		display: none;
	}

	.home-carousel__item {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}

	.home-carousel__track--product > .home-carousel__item {
		width: clamp(160px, 45vw, 240px);
	}

	.home-carousel__track--cat > .home-carousel__item {
		width: clamp(200px, 60vw, 294px);
	}

	.home-carousel__track--brand > .home-carousel__item {
		width: clamp(150px, 40vw, 220px);
	}

	/*
	 * Plattan bakom varumärkena.
	 *
	 * Sektionen ligger redan utanför wrappen och är alltså fönsterbred —
	 * bakgrunden läggs rakt på den, utan `100vw` och utan negativa
	 * marginaler (samma grepp som mediabandet, se .home-media__panel).
	 *
	 * Tonen är svag med flit. Brickorna är vita med ett hårstreck runt sig,
	 * och det hårstrecket är det enda som håller ihop raden — mot en stark
	 * platta försvinner det och korten blir hål i färgen i stället för kort.
	 * Krämvitt som går över i en aning petrol räcker för att raden ska läsa
	 * som en egen sektion, och gör samtidigt de vita korten synligare än de
	 * var mot papperet.
	 *
	 * Paddingen ersätter sektionens vanliga avstånd nedåt: en platta måste
	 * ha luft innanför sin egen kant, annars ser den ut som en remsa.
	 */
	.home-brands {
		padding-block: var(--space-xl);
		background: linear-gradient(
			180deg,
			var(--color-surface-cream),
			color-mix(in srgb, var(--color-accent) 8%, var(--color-surface-cream))
		);
	}

	/*
	 * Varumärkesraden ligger utanför wrappen och är alltså fönsterbred.
	 * Paddingen ger tillbaka wrappens vänsterkant, så första brickan står
	 * i linje med rubriken medan raden fortsätter ut ur bild åt höger.
	 *
	 * Uträkningen går i procent av sektionen och inte i `vw`: `vw` räknar
	 * med rullningslisten, och några pixlar för mycket ger sidan en vågrät
	 * rullning. `scroll-padding` följer med, annars snappar spåret till
	 * ett kort som ligger halvt under den vänstra kanten.
	 */
	.home-brands .home-carousel__track {
		padding-inline: max(
			var(--wrap-gutter),
			(100% - var(--wrap-max)) / 2 + var(--wrap-gutter)
		);
		scroll-padding-inline-start: max(
			var(--wrap-gutter),
			(100% - var(--wrap-max)) / 2 + var(--wrap-gutter)
		);
		/*
		 * Luft över och under korten, och lika mycket negativ marginal
		 * tillbaka. Skälet är inte avstånd utan klippning: `overflow-x:
		 * auto` gör även den lodräta axeln till en scroll-box, och ett kort
		 * som lyfts två pixlar vid hover — plus sin skugga — kapades rakt
		 * av mot spårets överkant. Paddingen ger skuggan plats innanför
		 * boxen; marginalen ser till att raden ändå tar exakt lika mycket
		 * plats i sektionen som förut.
		 *
		 * Mer under än över: skuggan är förskjuten nedåt (0 10px 24px), så
		 * den når 14 px över kortet och 34 px under. Lyftet på fyra pixlar
		 * läggs till uppåt. Måtten här är de talen avrundade uppåt — ändras
		 * skuggan i .home-brand:hover måste de räknas om.
		 */
		padding-block: 1.5rem 2.25rem;
		margin-block: -1.5rem -2.25rem;
	}

	/*
	 * Widescreen: alla varumärken på en gång, inget avskuret.
	 *
	 * Brickorna får krympa i stället för att fortsätta ut ur bild. Med sju
	 * märken landar de på knappt 180 px och fyller spalten exakt — raden
	 * står alltså mitt på sidan i samma spalt som rubriken, och `safe
	 * center` håller den centrerad även om ett märke faller bort.
	 *
	 * Golvet är det som gör detta hållbart. Läggs det till fler märken än
	 * spalten rymmer slutar de krympa vid 150 px och raden blir en karusell
	 * igen, med pilar och uttoning — home.js räknar om det själv. Utan
	 * golvet hade det tionde märket gjort alla tio oläsliga.
	 *
	 * Nedanför brytpunkten rörs ingenting: där ska raden fortsätta ut ur
	 * bild, som den alltid gjort. 1400 och inte 1280, för att krympningen
	 * ska vara en liten justering och inte ett hopp — vid 1280 hade sju
	 * märken pressats ner till 154 px, alltså en tredjedel mindre än
	 * brickan är en pixel tidigare.
	 */
	@media (min-width: 1400px) {
		.home-brands .home-carousel__track {
			justify-content: safe center;
		}

		.home-brands .home-carousel__item {
			flex-shrink: 1;
			min-width: 150px;
		}
	}

	@media (min-width: 1200px) {
		.home-carousel__track {
			gap: 20px;
		}
	}

	/*
	 * Pilarna ligger `hidden` i markupen och tas fram av home.js först när
	 * spåret faktiskt går att scrolla. Utan JS finns de inte alls — och
	 * karusellen fungerar ändå.
	 */
	.home-carousel__arrow {
		position: absolute;
		inset-block-start: 50%;
		z-index: 2;
		display: grid;
		place-items: center;
		width: 40px;
		height: 40px;
		padding: 0;
		border: 1px solid var(--color-line);
		border-radius: var(--radius-pill);
		background: var(--color-paper);
		color: var(--color-ink);
		translate: 0 -50%;
		transition: border-color 0.15s, color 0.15s, opacity 0.15s;
	}

	.home-carousel__arrow svg {
		width: 18px;
		height: 18px;
	}

	/*
	 * Pilarna ligger innanför spåret, inte utanför wrappen. Negativa
	 * offsets hade lagt dem utanför sidans spalt och gett vågrät scroll
	 * på precis de bredder där wrappen redan fyller skärmen.
	 */
	.home-carousel__arrow--prev {
		inset-inline-start: var(--space-2xs);
	}

	.home-carousel__arrow--next {
		inset-inline-end: var(--space-2xs);
	}

	.home-carousel__arrow:hover {
		border-color: var(--color-accent);
		color: var(--color-accent);
	}

	.home-carousel__arrow[disabled] {
		opacity: 0.35;
		cursor: default;
	}

	/*
	 * En rad som rullar av sig själv går också att ta tag i. Handen säger
	 * att raden är ett grepp och inte bara en bild — utan den vet man inte
	 * att den går att dra, och pilarna är för små för att räcka som enda
	 * signal. Klassen sätts av home.js, alltså bara när dragningen finns.
	 */
	.home-carousel__track.is-draggable {
		cursor: grab;
	}

	.home-carousel__track.is-dragging {
		cursor: grabbing;
		/* Under ett drag ska texten i brickorna inte markeras i stället. */
		user-select: none;
		scroll-snap-type: none;
	}

	/* ---------------------------------------------------------------- */
	/* Produktkort på startsidan                                         */
	/* ---------------------------------------------------------------- */

	.home-card {
		display: flex;
		flex-direction: column;
		height: 100%;
		border-radius: var(--radius-card);
		background: var(--color-surface);
		text-decoration: none;
		overflow: hidden;
	}

	.home-card__media {
		display: block;
		background: var(--color-surface-warm);
		overflow: hidden;
	}

	/* aspect-ratio reserverar ytan innan bilden laddats — det är det som
	   håller CLS nere när åtta kort trillar in samtidigt. */
	.home-card__img {
		width: 100%;
		aspect-ratio: 1 / 1;
		object-fit: contain;
		transition: transform 0.3s ease;
	}


	.home-card__body {
		display: flex;
		flex-direction: column;
		gap: var(--space-3xs);
		padding: var(--space-s);
	}

	/* En h3 i markupen (rubrikordningen på startsidan), kortets typografi i utseendet. */
	.home-card__name {
		font-size: var(--step--1);
		font-weight: 600;
		letter-spacing: normal;
		line-height: 1.35;
		color: var(--color-ink);
	}

	.home-card:hover .home-card__name,
	.home-bundle:hover .home-card__name {
		color: var(--color-accent-ink);
	}

	/*
	 * Underraden under ett namn, samma i produktkortet som i hero-rutan.
	 * Hero-rutans regel låg förut i 1200px-blocket med identiskt innehåll;
	 * den får stå här i stället, och att den nu gäller även smalare skärmar
	 * syns inte — rutorna är `display: none` under 1200 px.
	 */
	.home-card__cat,
	.home-hero__tile-meta {
		font-size: 0.75rem;
		line-height: 1.4;
		color: var(--color-ink-muted);
	}

	.home-card__price,
	.home-card__price .price {
		margin: 0;
		font-size: var(--step--1);
		font-weight: 700;
		color: var(--color-accent-ink);
	}

	.home-card__price del {
		margin-inline-end: var(--space-3xs);
		font-weight: 400;
		color: var(--color-ink-muted);
	}

	.home-card__price ins,
	.home-bundle__oprice ins {
		text-decoration: none;
	}

	/* ---------------------------------------------------------------- */
	/* Paketsektionen                                                    */
	/* ---------------------------------------------------------------- */

	/*
	 * Gräddvit platta med heron radie. Sektionen ligger inklämd mellan den
	 * mörka heron och en vit karusell, och utan egen yta hade den flutit
	 * ihop med det som kommer efter. Plattan är dessutom det som gör fem
	 * kort till ett erbjudande i stället för fem varor.
	 */
	.home-bundles__plate {
		/* min() i stället för en brytpunkt: ~15 px på telefonen, 48 på
		   desktop, och varje bredd däremellan får sitt. */
		padding: min(4vw, 3rem);
		border-radius: var(--radius-hero);
		background: var(--color-surface-cream);
	}

	.home-bundles__head {
		margin-block-end: var(--space-l);
	}

	/*
	 * Sektionens rubrik går ett steg över de andra sektionernas. Det är
	 * sidans enda säljyta med egen platta, och en rubrik i vanlig grad
	 * gjorde plattan till en parentes i stället för ett kapitel.
	 */
	.home-bundles .home-section__title {
		font-size: var(--step-4);
	}


	/*
	 * Textlänk, inte en pillerknapp. Plattan har redan ett stort kort som
	 * pockar — två fyllda ytor som slåss om klicket är en för mycket, och
	 * "se alla" är en sidoutgång, inte sektionens ärende.
	 */
	.home-bundles__all {
		color: var(--color-ink);
	}

	/* Rutnätet är .home-grid — bara featurekortets spann är eget. Det tar
	   hela bredden tills det finns minst tre spalter att dela på. */
	.home-bundles__item--feature {
		grid-column: 1 / -1;
	}

	/*
	 * Kortlöst: en bildplatta och text direkt på den gräddvita ytan, inga
	 * vita boxar. Boxarna gjorde sektionen till en Woo-grid till; foto­-
	 * plattorna gör den till ett uppslag. Textraderna återanvänder
	 * produktkortets klasser — samma typografi, ingen ny CSS.
	 */
	.home-bundle {
		display: flex;
		flex-direction: column;
		gap: var(--space-xs);
		height: 100%;
		text-decoration: none;
	}

	/*
	 * Bildplattan delar regler med kategorikortet — samma yta, samma
	 * radie, samma 3:4 och samma zoom — se "Kategorikort" nedan. `cover`
	 * för att paketbilderna är miljöfoton, inte frilagda burkar, och ska
	 * fylla plattan som ett foto.
	 */
	.home-bundle__img,
	.home-cat__img {
		width: 100%;
		aspect-ratio: 3/4;
		object-fit: cover;
		transition: transform 0.4s;
	}

	/*
	 * Frostad vit bricka i stället för en fylld färgplatta: den ligger på
	 * foton med okänt innehåll, och vitt med blur läser på alla utan att
	 * skrika. Procenten är golvad i lg_bundle_savings().
	 */
	.home-bundle__save {
		position: absolute;
		inset: var(--space-xs) auto auto var(--space-xs);
		padding: 0.4em 0.85em;
		border-radius: var(--radius-pill);
		background: rgb(255 255 255 / 0.88);
		font-size: 0.6875rem;
		font-weight: 700;
		color: var(--color-ink);
	}

	.home-bundle__body {
		display: grid;
		gap: var(--space-3xs);
	}

	/*
	 * Featurekortets text ligger i bilden, på en toning i plattans mörka
	 * ton — samma grepp som kategorikorten, uppskalat. Toningen börjar
	 * under bildens mitt så att fotot får behålla sin överdel.
	 */
	.home-bundle__overlay {
		position: absolute;
		inset: 0;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		gap: var(--space-2xs);
		padding: var(--space-m);
		background: linear-gradient(transparent 45%, rgb(27 35 39 / 0.78));
	}

	.home-bundle__title {
		font-size: var(--step-2);
		font-weight: 600;
		line-height: 1.15;
		color: var(--color-paper);
	}

	/*
	 * Innehållet som en stilla rad under namnet. Namnen är det man frågar
	 * efter först om ett paket — före priset — men de är kulissen, inte
	 * repliken, och får därför viska.
	 */
	.home-bundle__list {
		color: var(--color-body-inverse);
	}

	.home-bundle__oprice {
		font-weight: 700;
		color: var(--color-paper);
	}

	.home-bundle__oprice del {
		font-weight: 400;
		color: var(--color-body-inverse);
	}

	/* Samma brytpunkt som .home-grid går till tre spalter på. */
	@media (min-width: 768px) {
		/*
		 * `end` gör också länkens egen margin-block-start verkningslös —
		 * en topmarginal påverkar inte ett flexbarn som riktas nedåt.
		 */
		.home-bundles__head {
			display: flex;
			align-items: end;
			justify-content: space-between;
		}

		/*
		 * Två spalter och två rader: featurekortet blir exakt lika högt
		 * som de små bredvid.
		 */
		.home-bundles__item--feature {
			grid-column: span 2;
			grid-row: span 2;
		}

		/*
		 * Bilden absolut, och det är hela knepet: en bild i flödet räknas
		 * in i cellens minsta höjd, och eftersom kortet spänner över två
		 * rader hade bägge raderna växt efter den. Ur flödet bestämmer de
		 * små korten radhöjden och featurekortet fyller precis två av dem.
		 */
		.home-bundle--feature .home-bundle__media {
			height: 100%;
		}

		.home-bundle--feature .home-bundle__img {
			position: absolute;
			inset: 0;
			height: 100%;
		}

		.home-bundle__title {
			font-size: var(--step-3);
		}
	}

	/* ---------------------------------------------------------------- */
	/* Kategorikort                                                      */
	/* ---------------------------------------------------------------- */

	/* Delas med paketens bildplatta — bildmåtten står vid Paketsektionen. */
	.home-cat,
	.home-bundle__media {
		position: relative;
		display: block;
		border-radius: var(--radius-card);
		background: var(--color-surface-warm);
		text-decoration: none;
		overflow: hidden;
	}

	.home-cat:hover .home-cat__img,
	.home-bundle:hover .home-bundle__img,
	.home-card:hover .home-card__img {
		transform: scale(1.04);
	}

	/*
	 * Namnet ligger ovanpå bilden. Gradienten är det som gör texten
	 * läsbar oavsett vad bilden råkar innehålla i underkanten.
	 */
	.home-cat__name {
		position: absolute;
		inset-inline: 0;
		inset-block-end: 0;
		padding: var(--space-l) var(--space-s) var(--space-s);
		background: linear-gradient(to top, rgb(0 0 0 / 55%), transparent);
		color: #fff;
		font-family: var(--font-display);
		font-size: var(--step-0);
		font-weight: 600;
		letter-spacing: -0.01em;
		line-height: 1.25;
	}

	/* ---------------------------------------------------------------- */
	/* Varumärkeskort                                                    */
	/* ---------------------------------------------------------------- */

	/*
	 * `min-height: 0` är det som gör att alla brickor blir lika höga. En
	 * box med `aspect-ratio` har annars innehållet som minsta höjd, så en
	 * kvadratisk logotyp sköt kortet från 4:3 till 1:1 medan en liggande
	 * logotyp bredvid låg kvar — raden blev ojämn. Nollan låter förhållandet
	 * bestämma höjden och logotypen krympa in i den i stället.
	 */
	.home-brand {
		display: grid;
		/*
		 * En uttalad rad och spalt, inte bara `place-items`. Ett implicit
		 * `auto`-spår mäts på innehållet, och då har logotypens `max-height:
		 * 100%` inget bestämt tal att räkna procent på — den ignorerades, och
		 * en kvadratisk logotyp rann ut nedanför kortet. `minmax(0, 1fr)`
		 * fyller kortets innermått och ger procenten sitt tal.
		 */
		grid-template-rows: minmax(0, 1fr);
		grid-template-columns: minmax(0, 1fr);
		place-items: center;
		/*
		 * 3:2 och inte 4:3. Logotyper är liggande, och den högre rutan gav
		 * varje märke en tom överkant och en tom underkant — raden läste
		 * som sex tomma kort med något litet i mitten.
		 */
		aspect-ratio: 3 / 2;
		min-height: 0;
		padding: var(--space-s);
		border: 1px solid var(--color-line);
		border-radius: var(--radius-card);
		/*
		 * Vitt kort, inte grått. Halva sortimentets logotyper är levererade
		 * med vit botten inbakad i filen — mot en grå platta syntes de som
		 * vita rutor inuti korten, och det såg ut som ett fel. Mot vitt
		 * försvinner kanten och kvar blir bara märket. Hårstrecket runt
		 * kortet är det som håller ihop raden i stället för plattan.
		 */
		background: var(--color-paper);
		text-decoration: none;
		transition: border-color 0.15s, box-shadow 0.15s, translate 0.15s;
	}

	/*
	 * Hovern lyfter kortet, den färgar det inte. En accentfärgad ram
	 * lästes som "markerad" — ett kort såg utvalt ut bland sex, mitt i en
	 * rad som dessutom rör sig av sig själv. Skuggan och de två pixlarna
	 * säger samma sak ("det här går att klicka på") utan att påstå något
	 * om vilket märke som är intressantast.
	 */
	.home-brand:hover,
	.home-brand:focus-visible {
		/*
		 * Neutralt grått hårstreck, inte accentfärgat. Färgen var det som
		 * gjorde att ett kort läste som "markerat" — men utan någon
		 * kantförändring alls kändes hovern inte av. Grått firmar upp
		 * kanten utan att påstå att just det märket är utvalt.
		 */
		border-color: color-mix(in srgb, var(--color-ink) 22%, #fff);
		box-shadow: 0 10px 24px rgb(0 0 0 / 0.12);
		translate: 0 -4px;
	}

	/*
	 * Ett gemensamt tak i stället för hela innerytan: filerna är beskurna
	 * olika hårt, och utan taket avgör beskärningen hur stort ett märke
	 * ser ut. Lägre i höjd än i bredd, eftersom en kvadratisk logotyp
	 * annars fyller kortet medan en liggande blir en smal remsa.
	 */
	.home-brand__img {
		max-width: 94%;
		max-height: 90%;
		object-fit: contain;
	}

	.home-brand__name {
		font-family: var(--font-display);
		font-size: var(--step-1);
		color: var(--color-ink);
		text-align: center;
	}

	/* ---------------------------------------------------------------- */
	/* Löftet                                                            */
	/* ---------------------------------------------------------------- */

	/*
	 * Löftet och nyhetsbrevet är samma layout: en text och en bild sida vid
	 * sida från 900 px, staplade under. De stod som var sitt regelpar med
	 * identiskt innehåll — nu delar de, och plikten som följer är att de
	 * också ska ändras tillsammans. Ska bara den ena bli trespaltig får den
	 * bryta ur sig här först.
	 */
	.home-promise__inner,
	.home-newsletter__inner {
		display: grid;
		gap: var(--space-l);
		align-items: center;
	}

	@media (min-width: 900px) {
		.home-promise__inner,
		.home-newsletter__inner {
			grid-template-columns: 1fr 1fr;
			gap: var(--space-xl);
		}
	}

	.home-promise__lead,
	.home-bundles__lead {
		max-width: 46ch;
	}

	.home-promise__points {
		display: flex;
		flex-direction: column;
		gap: var(--space-2xs);
		padding: 0;
		margin-block-start: var(--space-m);
		list-style: none;
		font-size: var(--step--1);
		color: var(--color-ink);
	}

	.home-promise__points li {
		display: flex;
		gap: var(--space-2xs);
		align-items: baseline;
	}

	.home-promise__points li::before {
		content: "✓";
		color: var(--color-accent);
		font-weight: 700;
	}

	.home-promise__actions {
		margin-block-start: var(--space-m);
	}

	/*
	 * 11:12 är proportionen .se använder på sitt media i den här
	 * sektionen (606×660) — knappt kvadratiskt, aningen stående.
	 */
	.home-promise__img,
	.home-promise__placeholder {
		aspect-ratio: 11 / 12;
	}

	/* ---------------------------------------------------------------- */
	/* Vetenskapen                                                       */
	/* ---------------------------------------------------------------- */

	.home-science__header {
		max-width: 60ch;
		margin-block-end: var(--space-l);
	}

	.home-science__intro {
		margin-block-start: var(--space-s);
	}

	.home-science__grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
		gap: var(--space-m);
	}

	.home-fact {
		display: flex;
		flex-direction: column;
		align-items: start;
		gap: var(--space-2xs);
		padding: var(--space-l) var(--space-m);
		border: 1px solid var(--color-line);
		border-radius: var(--radius-panel);
		background: var(--color-surface-card);
	}

	.home-fact__tag {
		padding: 4px 12px;
		border-radius: var(--radius-pill);
		background: color-mix(in srgb, var(--color-accent) 12%, transparent);
		color: var(--color-accent-ink);
		font-size: 0.6875rem;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	.home-fact__stat {
		font-family: var(--font-display);
		font-size: clamp(2.25rem, 1.8rem + 1.9vw, 3.5rem);
		font-weight: 700;
		letter-spacing: -0.03em;
		line-height: 1.05;
		color: var(--color-ink);
	}

	/*
	 * Enheten hör ihop med talet och ska läsas som en enhet: "+15 %
	 * cognition", inte ett tal och en fristående etikett. Därför
	 * relativa mått — enheten följer talet oavsett var i clamp-skalan
	 * det råkar hamna — och bara ett hårstreck emellan.
	 *
	 * Drygt en tredjedel av talet, inte hälften: vid halva storleken
	 * konkurrerade "years lifespan" med siffran om blicken, och det är
	 * siffran som är sektionens poäng. I den mindre graden bär den inte
	 * längre en display-grad, så den sätts som en etikett — halvfet med
	 * en aning spärr, vilket också håller den optiskt jämnstor med
	 * talets tyngd trots att den är mycket mindre.
	 *
	 * Teckenavståndet ärvs inte: talets hoptryckta spärr är till för
	 * siffror i display-storlek och gör små ord svårlästa.
	 */
	.home-fact__unit {
		margin-inline-start: 0.22em;
		font-size: 0.36em;
		font-weight: 600;
		letter-spacing: 0.01em;
		color: var(--color-accent);
	}

	.home-fact__headline {
		margin: 0;
		font-size: var(--step-1);
	}

	.home-fact__desc {
		margin: 0;
	}

	/* Sätts av home.js så att texten aldrig är avklippt utan en knapp
	   som fäller ut den. */
	.home-fact__desc.is-clamped {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		line-clamp: 3;
		overflow: hidden;
	}

	.home-fact__more {
		display: inline-flex;
		gap: var(--space-3xs);
		align-items: center;
		padding: 0;
		border: 0;
		background: none;
		color: var(--color-accent-ink);
		font-size: var(--step--1);
		font-weight: 600;
	}

	.home-fact__more[aria-expanded="true"] .home-fact__chevron {
		rotate: 180deg;
	}

	.home-fact__chevron {
		display: inline-block;
		transition: rotate 0.15s;
	}

	.home-fact__source {
		margin: auto 0 0;
		padding-block-start: var(--space-2xs);
		font-size: 0.75rem;
		color: var(--color-ink-muted);
	}

	.home-science__cta {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-m);
		align-items: center;
		justify-content: space-between;
		margin-block-start: var(--space-l);
		padding: var(--space-m);
		border-radius: var(--radius-panel);
		background: var(--color-surface);
	}

	.home-science__cta-title {
		margin: 0;
		font-family: var(--font-display);
		font-size: var(--step-1);
		font-weight: 600;
		letter-spacing: -0.015em;
		color: var(--color-ink);
	}

	.home-science__cta-text {
		margin: var(--space-3xs) 0 0;
		font-size: var(--step--1);
	}

	/* ---------------------------------------------------------------- */
	/* Ingredienser                                                      */
	/* ---------------------------------------------------------------- */

	.home-ingredients__title {
		max-width: 22ch;
		margin-inline: auto;
		margin-block-end: var(--space-l);
		text-align: center;
	}

	.home-ingredients__stage {
		display: flex;
		flex-direction: column;
		gap: var(--space-s);
	}

	.home-ingredients .home-marquee__group {
		gap: var(--space-s);
		padding-inline-end: var(--space-s);
	}

	/* Vägen ut ur bandet. Centrerad under raderna, som rubriken över dem. */
	.home-ingredients__link {
		margin-block-start: var(--space-l);
		text-align: center;
	}

	/*
	 * Chipsen bär samma gräddvita ton som bandet "sett i media". Ramen
	 * står kvar: mot den vita sidan är skillnaden liten, och utan kant
	 * flyter pillren ihop med bakgrunden i stället för att se ut som
	 * egna objekt.
	 */
	.home-chip {
		padding: 0.45em 1.1em;
		border: 1px solid var(--color-line);
		border-radius: var(--radius-pill);
		background: var(--color-surface-cream);
		color: var(--color-ink);
		font-size: var(--step-0);
		font-weight: 500;
		white-space: nowrap;
	}

	/* ---------------------------------------------------------------- */
	/* Omdömen                                                           */
	/* ---------------------------------------------------------------- */

	.home-testimonials__header {
		max-width: 55ch;
		margin-block-end: var(--space-l);
	}

	.home-testimonials__rating {
		display: flex;
		gap: var(--space-2xs);
		align-items: center;
		margin-block-start: var(--space-s);
		font-size: var(--step--1);
	}

	.home-stars {
		margin: 0;
		color: var(--color-accent);
		letter-spacing: 0.1em;
	}

	.home-testimonials__grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
		gap: var(--space-m);
		padding: 0;
		margin: 0;
		list-style: none;
	}

	.home-quote {
		display: flex;
		flex-direction: column;
		gap: var(--space-2xs);
		height: 100%;
		padding: var(--space-l) var(--space-m);
		margin: 0;
		border-radius: var(--radius-panel);
		background: var(--color-surface-card);
	}

	.home-quote__text {
		margin: 0;
		color: var(--color-ink);
	}

	.home-quote__by {
		margin-block-start: auto;
		padding-block-start: var(--space-s);
		font-size: var(--step--1);
	}

	.home-quote__name {
		display: block;
		font-weight: 600;
		color: var(--color-ink);
	}

	.home-quote__meta {
		color: var(--color-ink-muted);
	}

	/* ---------------------------------------------------------------- */
	/* Nyhetsbrev                                                        */
	/* ---------------------------------------------------------------- */

	/* Rutnätet delas med löftessektionen — se där. */

	.home-newsletter__img {
		aspect-ratio: 4 / 5;
	}

	.home-newsletter__text {
		margin-block-start: var(--space-s);
		max-width: 46ch;
	}

	.home-newsletter__form {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2xs);
		margin-block-start: var(--space-m);
	}

	.home-newsletter__input {
		flex: 1 1 16rem;
		padding: 0.7em 1.2em;
		border: 1px solid var(--color-line);
		border-radius: var(--radius-pill);
		background: var(--color-paper);
		font-size: var(--step--1);
	}

	.home-newsletter__input:focus-visible {
		border-color: var(--color-accent);
	}
}