/* =========================================================
   SEKTIONSSYSTEM
   =========================================================
   Byggt efter referenslasningen av klarna.com och glideapps.com:
   fullbreddssektioner med alternerande bakgrund, generos vertikal
   rytm, kort med mjuk radie och nastan osynlig skugga, och stora
   sjalvsakra rubriker.

   EGET NAMNRUM MED FLIT. Den arvda komponent-CSS:en ar finjusterad
   for en helt annan sajt, med hero-portratt och kontorskort. Att
   bygga vidare i den hade blivit ett specificitetskrig. Det har ar
   ett rent lager ovanpa.

   Alla sektioner ligger som .alignfull och bryter ut till full
   viewportbredd via sidmall.css. Sidpaddingen raknas fran
   sektionens EGEN bredd, aldrig fran 100vw, se noten nedan.
   ========================================================= */

/* ---------------------------------------------------------
   Sektionsskal
   --------------------------------------------------------- */
/* PADDING RAKNAS FRAN SEKTIONENS EGEN BREDD, INTE FRAN VIEWPORTEN.

   Forsta versionen anvande --ca-marginal, alltsa
   max(1.25rem, (100vw - 1200px) / 2). Den formeln forutsatter att
   elementet FAKTISKT ar 100vw brett. Blev det av nagon anledning
   kapat, till exempel av temats innehallsbredd, raknades paddingen
   anda fran viewporten: 680 px per sida inuti en 765 px bred
   sektion. Innehallet kollapsade da till en bokstav per rad.

   clamp mot sektionens egen bredd kan inte hamna i det laget.
   Maxbredden pa innehallet skots av .ca-s__inner i stallet. */
/* BOXBREDDEN LIGGER I PADDINGEN, INTE I EN INRE MAXBREDD.

   Sektionen gar fullbredd, men texten ska folja en boxad spalt.
   Forsta losningen var .ca-s__inner med max-width och auto-marginal.
   Den forlorade mot Astras regel for barnbarn:

       .entry-content[data-ast-blocks-layout] > *:not(...) > *

   som ar 0,3,0 och satter max-width: none. Innehallet lag darfor
   kvar i vansterkanten pa en 1900 px bred sektion.

   Nu gors centreringen av paddingen i stallet. Den raknas fran
   sektionens EGEN bredd via 100%, aldrig fran 100vw, och kan
   darfor varken kollapsa eller bli overkord av en regel langre in.

   max() valjer den storsta: pa en bred skarm blir det
   (100% - 1200px) / 2, pa en smal skarm klampen. */
.ca-s {
	padding-block: clamp(3.5rem, 7vw, 6.5rem);
	padding-inline: max(clamp(1.25rem, 5vw, 4rem), calc((100% - var(--ca-bredd)) / 2));
	background: var(--ca-ground);
}

/* Alternerande bakgrund ger rytmen. Bada referenserna gor det,
   och det ar det billigaste sattet att fa en lang sida att lasa
   som avsnitt i stallet for en rulle. */
.ca-s--ton   { background: var(--ca-surface); }
.ca-s--mork  { background: var(--ca-brand-deep); color: var(--ca-ink-invers); }
.ca-s--mork h2,
.ca-s--mork h3 { color: var(--ca-ink-invers); }
.ca-s--tat   { padding-block: clamp(2rem, 4vw, 3rem); }

.ca-s__inner { max-width: var(--ca-bredd); margin-inline: auto; }
.ca-s__smal  { max-width: 46rem; }

/* ---------------------------------------------------------
   Centrerad textsektion
   ---------------------------------------------------------
   For sektioner som bara bar text, utan bildspalt eller
   kortrutnat. Rubrik, ingress och knappar centreras.

   LISTAN CENTRERAS INTE. En punktlista med centrerad text far
   ojamn vanstermarginal och blir markbart svarare att lasa.
   Den ligger kvar vansterstalld inuti den centrerade spalten,
   vilket ar det som faktiskt ser avsiktligt ut.
   --------------------------------------------------------- */
.ca-s--mitt .ca-s__inner {
	max-width: 52rem;
	text-align: center;
}

/* SPECIFICITETEN AR HOJD MED FLIT.
   .ca-s--mitt h2 ar 0,1,1 och .ca-s h2 ar ocksa 0,1,1. Vid lika
   specificitet vinner den som star sist, och basregeln ligger langre
   ned i filen. Resultatet var att rubriken fick text-align: center men
   BEHOLL max-width: 20ch och margin: 0, sa texten centrerades inuti en
   528 px bred lada som satt kvar i vanster kant. Sag centrerat ut i
   koden, sag vansterstallt ut i webblasaren.
   Uppmatt med scripts/granska.py: vanster 120 px, hoger 792 px. */
.ca-s--mitt .ca-s__inner h2,
.ca-s--mitt .ca-s__inner .ca-s__lead {
	max-width: none;
	margin-inline: auto;
}

.ca-s--mitt .ca-knapprad2 { justify-content: center; }

.ca-s--mitt .ca-lofte,
.ca-s--mitt .ca-lucka {
	text-align: start;
	margin-inline: auto;
	max-width: 42rem;
}

/* ---------------------------------------------------------
   Rubriktypografi i sektioner
   --------------------------------------------------------- */
.ca-eyebrow {
	display: block;
	font-size: var(--ca-text-xs);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ca-brand-stark);
	margin-block-end: var(--ca-rum-4);
}

/* Pa mork botten (#43192E) matte varumarkesrosan #B1487D 2,88:1, under
   gransen 4,5:1 (Lighthouse 2026-09-30). Den ljusa rosan #E9B8D1 mater 8,6:1. */
.ca-s--mork .ca-eyebrow { color: var(--ca-dag-pa-mork, #E9B8D1); }

.ca-s h2 {
	font-size: var(--ca-text-3xl);
	max-width: 20ch;
	margin: 0;
}

/* ---------------------------------------------------------
   CENTRERADE SEKTIONSRUBRIKER, 2026-09-18 (Thomas: "det
   forekommer pa maaaassa sidor och det ser ju inte bra ut,
   ska val bade vara centrerat och inte ta upp sa manga
   rader").

   Halften av sektionerna hade redan klassen --rubrikmitt, sa
   sajten sag ut att byta stil mitt pa sidan. Nu galler samma
   sak for alla: rubriken centrerad over sitt innehall.

   20ch gav tre rader for en vanlig fraga som "Why do customers
   check your Facebook page before they book?" (55 tecken).
   34ch racker till tva rader och ligger anda under 75 tecken,
   alltsa inom den lasbara radlangden.

   Brodtexten centreras som block men behaller vansterstalld
   text: rader pa 1200 px ar for langa for att lasa, och
   centrerad brodtext ger ojamn vanstermarginal.
   --------------------------------------------------------- */
.ca-s > .ca-s__inner > .ca-eyebrow,
.ca-s > .ca-s__inner > h2,
.ca-s > .ca-s__inner > .ca-s__lead {
	text-align: center;
	margin-inline: auto;
}

.ca-s > .ca-s__inner > h2 { max-width: 34ch; }

.ca-s > .ca-s__inner > p {
	max-width: 68ch;
	margin-inline: auto;
}

/* Rubriken har margin: 0, sa forsta stycket lag tatt under den nar
   rubriken blev centrerad. Samma luft som mellan rubrik och ingress. */
.ca-s > .ca-s__inner > h2 + p { margin-block-start: var(--ca-rum-4); }

.ca-s__lead {
	font-size: var(--ca-text-lg);
	line-height: 1.55;
	color: var(--ca-ink-dampad);
	max-width: 46ch;
	margin-block-start: var(--ca-rum-4);
}

.ca-s--mork .ca-s__lead { color: rgba(255, 255, 255, .78); }

/* ---------------------------------------------------------
   Hero
   ---------------------------------------------------------
   Delad pa desktop, staplad pa mobil. Texten forst i DOM sa att
   den lases forst utan CSS och av skarmlasare.
   --------------------------------------------------------- */
.ca-topp {
	padding-block: clamp(3rem, 6vw, 5.5rem) clamp(3.5rem, 7vw, 6rem);
	padding-inline: max(clamp(1.25rem, 5vw, 4rem), calc((100% - var(--ca-bredd)) / 2));
	background: var(--ca-ground);
}

.ca-topp__inner {
	max-width: var(--ca-bredd);
	margin-inline: auto;
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

@media (min-width: 900px) {
	.ca-topp__inner { grid-template-columns: 1.05fr .95fr; }
}

.ca-topp h1,
.ca-topp .ca-topp__rubrik {
	font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.1rem);
	line-height: 1.04;
	letter-spacing: -.022em;
	margin: 0;
	max-width: 15ch;
}

.ca-topp__lead {
	font-size: var(--ca-text-lg);
	line-height: 1.55;
	color: var(--ca-ink-dampad);
	max-width: 44ch;
	margin-block-start: var(--ca-rum-5);
}

/* ---------------------------------------------------------
   Knappar
   --------------------------------------------------------- */
.ca-knapprad2 {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ca-rum-3);
	margin-block-start: var(--ca-rum-6);
}

.ca-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--ca-traffyta);
	padding: .8rem 1.6rem;
	border-radius: var(--ca-radie);
	font-weight: 600;
	font-size: var(--ca-text-sm);
	text-decoration: none;
	border: 1px solid transparent;
	transition: background .18s ease, border-color .18s ease;
}

.ca-btn--primar {
	background: var(--ca-brand);
	color: var(--ca-ink-invers);
}

.ca-btn--primar:hover,
.ca-btn--primar:focus-visible {
	background: var(--ca-brand-stark);
	color: var(--ca-ink-invers);
}

.ca-btn--sekundar {
	background: transparent;
	color: var(--ca-ink);
	border-color: var(--ca-line-2, var(--ca-line));
	border-color: var(--ca-ink-dampad);
}

.ca-btn--sekundar:hover,
.ca-btn--sekundar:focus-visible { background: var(--ca-surface); }

.ca-s--mork .ca-btn--sekundar {
	color: var(--ca-ink-invers);
	border-color: rgba(255, 255, 255, .45);
}

.ca-s--mork .ca-btn--sekundar:hover { background: rgba(255, 255, 255, .1); }

/* ---------------------------------------------------------
   Chips: korta faktapastaenden under heron
   --------------------------------------------------------- */
.ca-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ca-rum-2) var(--ca-rum-3);
	margin-block-start: var(--ca-rum-8);
	padding: 0;
	list-style: none;
}

.ca-chip {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .42rem .85rem;
	border: 1px solid var(--ca-line);
	border-radius: 100px;
	background: var(--ca-surface);
	font-size: var(--ca-text-xs);
	color: var(--ca-ink);
}

.ca-chip::before {
	content: "";
	width: .42rem;
	height: .42rem;
	border-radius: 50%;
	background: var(--ca-dag, var(--ca-brand));
	flex: none;
}

/* ---------------------------------------------------------
   Bildplats
   ---------------------------------------------------------
   Tydligt markerad platshallare. Den ska se avsiktlig ut i en
   demo men vara omojlig att forvaxla med en riktig bild, sa att
   ingen av misstag levererar en sajt full av gra rutor.
   --------------------------------------------------------- */
.ca-bildplats {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	border-radius: var(--ca-radie-stor);
	/* NEUTRALT GRATT, INTE TONAT ROSA.
	   Platshallaren ska laser som "har kommer en bild", inte som ett
	   designat element. En rosa ton lasers som ett medvetet val och gor
	   det svarare att se vilka ytor som faktiskt saknar material. */
	background:
		repeating-linear-gradient(
			135deg,
			#ECECEC 0 10px,
			#E4E4E4 10px 20px
		);
	border: 1px solid var(--ca-line);
	overflow: hidden;
}

.ca-bildplats--hog   { aspect-ratio: 3 / 4; }
.ca-bildplats--bred  { aspect-ratio: 16 / 9; }
.ca-bildplats--kvadrat { aspect-ratio: 1 / 1; }

.ca-bildplats__text {
	font-size: var(--ca-text-xs);
	color: var(--ca-ink-dampad);
	text-align: center;
	padding: var(--ca-rum-4);
	max-width: 26ch;
	line-height: 1.45;
}

.ca-bildplats__text strong {
	display: block;
	color: var(--ca-ink);
	letter-spacing: .08em;
	text-transform: uppercase;
	font-size: .68rem;
	margin-block-end: .35rem;
}

/* ---------------------------------------------------------
   Kortrutnat
   --------------------------------------------------------- */
.ca-rutnat {
	display: grid;
	gap: var(--ca-rum-5);
	margin-block-start: var(--ca-rum-8);
	grid-template-columns: 1fr;
}

@media (min-width: 640px) { .ca-rutnat { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .ca-rutnat--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .ca-rutnat--4 { grid-template-columns: repeat(4, 1fr); } }

.ca-k {
	display: flex;
	flex-direction: column;
	gap: var(--ca-rum-3);
	padding: var(--ca-rum-6);
	background: var(--ca-white);
	border: 1px solid var(--ca-line);
	border-radius: var(--ca-radie-stor);
	box-shadow: var(--ca-skugga);
}

.ca-s--ton .ca-k { background: var(--ca-ground); }

.ca-k__bild { margin: calc(var(--ca-rum-6) * -1) calc(var(--ca-rum-6) * -1) 0; border-radius: 0; border-inline: 0; border-block-start: 0; }
.ca-k__bild.ca-bildplats { border-radius: var(--ca-radie-stor) var(--ca-radie-stor) 0 0; }

.ca-k h3 { font-size: var(--ca-text-lg); margin: 0; }
.ca-k p  { margin: 0; color: var(--ca-ink-dampad); font-size: var(--ca-text-sm); line-height: 1.55; }

.ca-k__lank {
	margin-block-start: auto;
	padding-block-start: var(--ca-rum-2);
	font-size: var(--ca-text-sm);
	font-weight: 600;
	color: var(--ca-brand-stark);
	text-decoration: none;
}

.ca-k__lank:hover { color: var(--ca-ink); }

/*
 * Kanalen utan klickbar lank, idag LINE.
 *
 * Fargen ar dampad med flit. Ett personligt LINE-id gar inte att lanka
 * till, och att fa det att se ut som de tva andra korten hade lovat ett
 * klick som inte finns. Sjalva id:t ar det man ska kunna kopiera, sa det
 * ar den enda delen som far full ton och en markerbar bakgrund.
 *
 * Regeln behovs eftersom .ca-k p (0,1,1) slar .ca-k__lank (0,1,0) och
 * annars aterstaller bade marginal och farg pa ett <p>.
 */
.ca-k p.ca-k__lank--text {
	margin-block-start: auto;
	padding-block-start: var(--ca-rum-2);
	font-size: var(--ca-text-sm);
	color: var(--ca-ink-dampad);
}

.ca-k__lank--text strong {
	color: var(--ca-ink);
	font-weight: 600;
	background: var(--ca-surface-2);
	padding: 0.1em 0.35em;
	border-radius: 4px;
	user-select: all;
}

/* ---------------------------------------------------------
   Delad sektion: text plus bild, vaxlande sida
   --------------------------------------------------------- */
.ca-delad {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
	margin-block-start: var(--ca-rum-8);
}

@media (min-width: 900px) {
	.ca-delad { grid-template-columns: 1fr 1fr; }
	.ca-delad--omvand .ca-delad__text { order: 2; }
}

.ca-delad__text > * + * { margin-block-start: var(--ca-rum-4); }
.ca-delad__text p { color: var(--ca-ink-dampad); max-width: 46ch; }

/* ---------------------------------------------------------
   Processteg
   ---------------------------------------------------------
   Numrering anvands har for att innehallet FAKTISKT ar en
   sekvens. Stegen sker i ordning och ordningen bar information.
   --------------------------------------------------------- */
.ca-steg {
	list-style: none;
	padding: 0;
	margin-block-start: var(--ca-rum-8);
	display: grid;
	gap: var(--ca-rum-6);
	counter-reset: steg;
}

@media (min-width: 860px) { .ca-steg { grid-template-columns: repeat(4, 1fr); } }

.ca-steg li {
	counter-increment: steg;
	padding-block-start: var(--ca-rum-4);
	border-block-start: 2px solid var(--ca-line);
}

.ca-steg li::before {
	content: counter(steg, decimal-leading-zero);
	display: block;
	font-size: var(--ca-text-xs);
	font-weight: 600;
	letter-spacing: .1em;
	color: var(--ca-brand-stark);
	margin-block-end: var(--ca-rum-2);
	font-variant-numeric: tabular-nums;
}

.ca-steg strong { display: block; margin-block-end: var(--ca-rum-2); font-size: var(--ca-text-bas); }
.ca-steg p { margin: 0; color: var(--ca-ink-dampad); font-size: var(--ca-text-sm); line-height: 1.55; }

/* ---------------------------------------------------------
   Loftelista: det vi inte lovar
   ---------------------------------------------------------
   Sajtens viktigaste bevisyta. Referenserna anvander
   kundlogotyper har, vilket ar stangt for oss.
   --------------------------------------------------------- */
.ca-lofte {
	list-style: none;
	padding: 0;
	margin-block-start: var(--ca-rum-6);
	display: grid;
	gap: var(--ca-rum-4);
	max-width: 52rem;
}

/*
 * 🐛 ABSOLUT POSITIONERAT STRECK, INTE ETT RUTNAT.
 *
 * Raden var display:grid med tva kolumner, vilket forutsatte att varje
 * li innehall exakt en textnod. Ett <strong> i borjan av punkten blev
 * da ett EGET rutnatselement, trangdes in i kolumn tva som ar smal, och
 * bruttexten hamnade pa en implicit rad under. Resultatet var fetstil
 * med ett ord per rad langst ut till hoger och texten pa nasta rad.
 *
 * Hittad pa /how-it-works/ 2026-08-25, forsta gangen nagon skrev en
 * punkt med en fetstilt inledning. Streck som pseudoelement utanfor
 * flodet gor komponenten tolerant mot inline-markup, vilket den maste
 * vara: nasta person som vill fetstila fyra ord ska inte behova veta
 * hur listan ar byggd.
 */
.ca-lofte li {
	position: relative;
	padding-inline-start: calc(1.1rem + var(--ca-rum-3));
	padding-block-end: var(--ca-rum-4);
	border-block-end: 1px solid var(--ca-line);
	line-height: 1.55;
}

.ca-s--mork .ca-lofte li { border-block-end-color: rgba(255, 255, 255, .16); }

.ca-lofte li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: .78rem;
	width: 1.1rem;
	height: 2px;
	background: var(--ca-dag, var(--ca-brand));
}

.ca-s--mork .ca-lofte li::before { background: rgba(255, 255, 255, .55); }

/* ---------------------------------------------------------
   Slut-CTA
   --------------------------------------------------------- */
.ca-slut__inner {
	max-width: 44rem;
	margin-inline: auto;
	text-align: center;
}

.ca-slut h2 { max-width: none; margin-inline: auto; }
.ca-slut .ca-s__lead { margin-inline: auto; }
.ca-slut .ca-knapprad2 { justify-content: center; }

/* =========================================================
   RAK HERO
   =========================================================
   Efter referenslasningen av goread.io. Deras hero namner
   produkten i rubriken och lagger sex kopknappar direkt under.
   Besokaren behover inte tolka nagot for att veta vad som saljs.

   Vi tar samma rakhet men inte deras signaler. Ingen nedrakning,
   ingen "50% OFF", inget "100% safe". Falsk bradska ar det snabbaste
   sattet att tappa den kund vi vill ha.
   ========================================================= */

/* Faktaraden: korta pastaenden, inte saljargument.
   Ersatter de fyra stora chipsen, som tog for mycket plats och
   lasstes som en lista med formaner i stallet for som fakta. */
.ca-fakta {
	list-style: none;
	padding: 0;
	margin-block-start: var(--ca-rum-5);
	display: flex;
	flex-wrap: wrap;
	gap: var(--ca-rum-2) var(--ca-rum-5);
	font-size: var(--ca-text-xs);
	color: var(--ca-ink-dampad);
}

.ca-fakta li {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
}

.ca-fakta li::before {
	content: "";
	width: .95rem;
	height: .95rem;
	border-radius: 50%;
	flex: none;
	background: var(--ca-brand);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 11.2 3.8 8.5l1-1 1.7 1.7 4.7-4.7 1 1z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 11.2 3.8 8.5l1-1 1.7 1.7 4.7-4.7 1 1z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Kopknapparna. Sma, tata, och tydligt klickbara.
   Tva farger for att skilja plattformarna at utan att behova
   ikoner, precis som referensen gor. */
.ca-kopknappar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ca-rum-2);
	margin-block-start: var(--ca-rum-6);
}

.ca-kop {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .55rem 1rem;
	border-radius: var(--ca-radie);
	background: var(--ca-brand);
	color: var(--ca-ink-invers);
	font-size: var(--ca-text-xs);
	font-weight: 600;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background .18s ease;
}

.ca-kop::after {
	content: "›";
	font-size: 1.05em;
	line-height: 1;
	opacity: .8;
}

.ca-kop:hover,
.ca-kop:focus-visible { background: var(--ca-brand-stark); color: var(--ca-ink-invers); }

.ca-kop--mork {
	background: var(--ca-brand-deep);
}

.ca-kop--mork:hover,
.ca-kop--mork:focus-visible { background: var(--ca-ink); }

/* Hero-bilden. Egen kolumn, centrerad, och den far aldrig
   bli storre an sin egen upplosning. Platshallaren har ar
   400 px bred, och uppskalad ser den grynig ut. */
.ca-topp__media {
	display: flex;
	justify-content: center;
}

.ca-topp__bild {
	max-width: min(100%, 26rem);
	height: auto;
	border-radius: var(--ca-radie-stor);
}

/* =========================================================
   INGEN UNDERSTRYKNING NAGONSTANS
   =========================================================
   Astras installning "underline-content-links" ar AVSLAGEN i
   astra-settings. Temat skriver darfor inte langre ut

       .ast-single-post .entry-content a { text-decoration: underline }

   Det var den regeln som gjorde varenda knapp understruken.

   Ett tidigare forsok loste det med nio overskrivningar pa
   :any-link, urraknade for att sla Astras (0,2,1). De fungerade,
   men var fel sorts losning: nio regler for att neutralisera en
   regel som temat har en knapp for att stanga av.

   PROSALANKAR FAR TVA SKILLNADER, INTE EN.
   Beslutet ar att ingenting ska vara understruket. En lank som da
   bara skiljs ut med farg skulle bryta mot WCAG 1.4.1, som sager
   att information inte far formedlas enbart genom farg. Losningen
   ar halvfet vikt plus varumarkesfarg, alltsa tva visuella cues
   utan att en enda understrykning behovs. */
.ca-s p a:not(.ca-btn):not(.ca-kop):not(.ca-k__lank),
.ca-delad__text p a:not(.ca-btn):not(.ca-kop),
.entry-content > p a:not(.ca-btn):not(.ca-kop),
.entry-content > ul a:not(.ca-btn):not(.ca-kop) {
	color: var(--ca-brand-stark);
	font-weight: 600;
	text-decoration: none;
}

.ca-s--mork p a:not(.ca-btn):not(.ca-kop) {
	color: var(--ca-ink-invers);
}

/* ---------------------------------------------------------
   Centrerad INLEDNING, vansterstallt innehall
   ---------------------------------------------------------
   For sektioner som har ett kortrutnat eller ett rutnat under
   sig. Da ska rubriken sitta mitt over rutnatet, medan korten
   sjalva behaller vansterstalld text.

   SKILLNADEN MOT .ca-s--mitt AR HELA POANGEN. Den centrerar
   allt, vilket ar ratt for en ren textsektion men fel sa fort
   det finns kort: centrerad brodtext i tre spalter bredvid
   varandra ger tre ojamna vanstermarginaler och ser slarvigt
   ut, inte avsiktligt.
   --------------------------------------------------------- */
.ca-s--rubrikmitt > .ca-s__inner > .ca-eyebrow,
.ca-s--rubrikmitt > .ca-s__inner > h1,
.ca-s--rubrikmitt > .ca-s__inner > h2,
.ca-s--rubrikmitt > .ca-s__inner > .ca-s__lead {
	text-align: center;
	margin-inline: auto;
}

/* Ingressen behover kvar sin lasbredd, annars blir raderna for
   langa. Den centreras som block, inte breddas. */
.ca-s--rubrikmitt > .ca-s__inner > .ca-s__lead { max-width: 46rem; }
.ca-s--rubrikmitt > .ca-s__inner > h2 { max-width: 22ch; }

/* H1 fanns inte med, sa rubriken pa /build-your-own/ stod vanster under en
   centrerad eyebrow och ingress (Thomas 2026-09-16). */
.ca-s--rubrikmitt > .ca-s__inner > h1 { max-width: 28ch; }

/* =========================================================
   KOPSIDOR
   =========================================================
   Sidmall for /buy-instagram-followers/ och syskonen.

   SKILLNADEN MOT STARTSIDAN AR EN SAK: koprutan ligger direkt
   under rubriken, fore all forklaring. Den som kom hit fran en
   sokning pa "buy instagram followers" ar redan overtygad av
   sokresultatet. Att lata hen skrolla forbi sex stycken
   argumentation for att na ett pris ar att behandla en bestamd
   kopare som en obestamd.
   ========================================================= */

/* Heron ar smalare och har en spalt, inte tva. Det finns ingen
   bild att stalla bredvid: koprutan ar bilden. */
.ca-topp--smal { padding-block: clamp(2.5rem, 5vw, 4.5rem); }

.ca-topp__inner--en {
	grid-template-columns: 1fr;
	max-width: 60rem;
	margin-inline: auto;
	text-align: center;
}

.ca-topp--smal .ca-topp__rubrik { max-width: none; }

.ca-topp--smal .ca-topp__lead {
	max-width: 46rem;
	margin-inline: auto;
}

/* Faktaraden och knapparna ar flex och foljer inte text-align.
   Utan detta star de vansterstallda under en centrerad rubrik. */
.ca-topp__inner--en .ca-fakta,
.ca-topp__inner--en .ca-knapprad2 { justify-content: center; }

/* Ingen text-align: start har. Forsta versionen tvingade tillbaka
   vansterstallning pa hela koprutan, vilket ar exakt det jag skulle
   undvika. Rutan centrerar sig sjalv i paket.css. */
.ca-paket-wrap { margin-block-start: var(--ca-rum-7); }

/* ---------------------------------------------------------
   Tva spalter: vad du far, vad du inte far
   ---------------------------------------------------------
   Bredvid varandra med flit. Listorna ar lika langa och lika
   detaljerade, sa att den hogra inte laser som finstilt.
   --------------------------------------------------------- */
.ca-tvakol {
	display: grid;
	gap: var(--ca-rum-7);
}

@media (min-width: 48rem) {
	.ca-tvakol { grid-template-columns: 1fr 1fr; gap: var(--ca-rum-8); }
}

.ca-tvakol__del {
	background: var(--ca-white);
	border: 1px solid var(--ca-line);
	border-radius: var(--ca-radie-stor);
	padding: var(--ca-rum-6);
}

.ca-lista {
	list-style: none;
	margin: var(--ca-rum-4) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ca-rum-4);
	font-size: var(--ca-text-sm);
	line-height: 1.55;
}

.ca-lista li {
	display: grid;
	grid-template-columns: 1.35rem 1fr;
	gap: var(--ca-rum-3);
	align-items: start;
}

/* Tecknet ar dekoration. FARGEN BAR INGEN INFORMATION ENSAM:
   rubriken ovanfor sager redan vilken lista det ar, vilket ar
   kravet i WCAG 1.4.1. */
.ca-lista li::before {
	font-weight: 700;
	line-height: 1.5;
}

.ca-lista--ja li::before  { content: "\2713"; color: var(--ca-ok); }
.ca-lista--nej li::before { content: "\00D7"; color: var(--ca-fel); font-size: 1.15em; }

/* 🐛 EN LISTA UTAN TYP HADE INGET TECKEN, och radens forsta barn
   hamnade da i den 1.35rem breda teckenkolumnen. Uppmatt 2026-09-13
   (grinden, ux-02): texten brots bokstav for bokstav, Safety-listan
   blev 2 560 px hog. Lagat med en punkt i kolumnen, sa att rutnatet
   alltid har sitt tecken. */
.ca-lista:not(.ca-lista--ja):not(.ca-lista--nej) li::before {
	content: "";
	justify-self: center;
	width: .4rem;
	height: .4rem;
	margin-block-start: .6em;
	border-radius: 50%;
	background: var(--ca-brand);
}

/* ---------------------------------------------------------
   Tre steg pa rad
   --------------------------------------------------------- */
@media (min-width: 52rem) {
	.ca-steg--tre {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--ca-rum-7);
	}

	.ca-steg--tre li { margin: 0; }
}

/* ---------------------------------------------------------
   Jamforelsetabellen
   ---------------------------------------------------------
   TVA AV RADERNA GAR EMOT OSS, och det ar hela poangen. En
   tabell dar vi vinner varenda rad laser som reklam, en dar vi
   forlorar nagot laser som information.

   Scrollar i sin egen behallare pa smal skarm, sa att sidan
   aldrig kan skrollas i sidled.
   --------------------------------------------------------- */
.ca-jmf {
	margin-block-start: var(--ca-rum-7);
	overflow-x: auto;
	border-radius: var(--ca-radie);
}

.ca-jmf table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--ca-text-sm);
	min-width: 34rem;
}

.ca-jmf th,
.ca-jmf td {
	padding: var(--ca-rum-4) var(--ca-rum-5);
	text-align: center;
	vertical-align: middle;
	border-block-end: 1px solid rgba(255, 255, 255, .16);
	line-height: 1.5;
}

.ca-jmf thead th {
	font-size: var(--ca-text-xs);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ca-ink-invers);
	opacity: .75;
	white-space: nowrap;
	text-align: center;
}

.ca-jmf tbody th {
	font-weight: 600;
	white-space: nowrap;
	color: var(--ca-ink-invers);
}

/* Deras spalt ar dampad, var ar full styrka. Skillnaden ska synas
   utan att man laser. */
.ca-jmf tbody td:first-of-type { opacity: .62; }

/* Bottenlinjen star kvar pa sista raden.
   Forsta versionen tog bort den, vilket lamnade tabellen oppen nedat
   och fick den att se avkapad ut mot den morka ytan. En ram sluts. */
.ca-jmf tbody tr:last-child th,
.ca-jmf tbody tr:last-child td {
	border-block-end: 1px solid rgba(255, 255, 255, .16);
}

/* ---------------------------------------------------------
   FAQ pa kopsidorna
   ---------------------------------------------------------
   <details> och <summary>, inte JavaScript. Webblasarens egen
   version ar tangentbordsstyrd, sokbar och fungerar utan skript.
   En egen dragspelsimplementation hade varit tre saker att gora
   fel utan att vinna nagot.

   Det enda vi tar bort ar webblasarens standardtriangel, som ser
   ut som ett listtecken och inte som en knapp.
   --------------------------------------------------------- */
.ca-faq {
	margin-block-start: var(--ca-rum-7);
	border-block-start: 1px solid var(--ca-line);
}

.ca-faq details {
	border-block-end: 1px solid var(--ca-line);
}

.ca-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ca-rum-4);
	padding-block: var(--ca-rum-5);
	font-size: var(--ca-text-lg);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	min-height: var(--ca-traffyta);
}

/* Bada raderna behovs: den forsta for Safari, den andra for resten. */
.ca-faq summary::-webkit-details-marker { display: none; }
.ca-faq summary::marker { content: ""; }

/* Egen pil, ritad i CSS sa att den foljer textfargen. */
.ca-faq summary::after {
	content: "";
	flex: none;
	width: .55rem;
	height: .55rem;
	border-inline-end: 2px solid var(--ca-brand);
	border-block-end: 2px solid var(--ca-brand);
	transform: translateY(-.15em) rotate(45deg);
	transition: transform .2s ease;
}

.ca-faq details[open] summary::after {
	transform: translateY(.1em) rotate(-135deg);
}

@media (prefers-reduced-motion: reduce) {
	.ca-faq summary::after { transition: none; }
}

.ca-faq summary:focus-visible {
	outline: 2px solid var(--ca-brand);
	outline-offset: 3px;
	border-radius: var(--ca-radie);
}

.ca-faq details p {
	margin: 0 0 var(--ca-rum-5);
	max-width: 68ch;
	font-size: var(--ca-text-bas);
	line-height: 1.6;
	color: var(--ca-ink-dampad);
}

/* Luckorna sticker ut med flit, sa att de inte glider med till
   lansering. Se ca-lucka i komponenter.css. */
.ca-faq details p.ca-lucka { color: inherit; }

/* MORK SEKTION. --ca-ink-dampad ar gjord for ljus botten och matte
   2.50:1 mot --ca-brand-deep, pilen och fokusringen i --ca-brand
   2.89:1 (grinden 2026-09-13, ux-01 och ux-07). Samma vita ton som
   .ca-s--mork .ca-s__lead. */
.ca-s--mork .ca-faq details p { color: rgba(255, 255, 255, .78); }

.ca-s--mork .ca-faq summary::after { border-color: rgba(255, 255, 255, .78); }

.ca-s--mork .ca-faq summary:focus-visible { outline-color: var(--ca-ink-invers); }

/* Rubriken i summary behaller annars temats bottenmarginal (ux-13). */
.ca-faq summary h3 { margin: 0; }

/* Underrubriken pa kopsidorna.
   ETT <p>, INTE ETT <h2>. Den ska se ut som en rubrik men far inte
   rakna in i dispositionen: koprutan under har redan sina H2:or, och
   en extra rubriknivå har hade gjort innehallsforteckningen falsk. */
.ca-topp__under {
	margin: var(--ca-rum-4) auto 0;
	max-width: 34ch;
	font-size: var(--ca-text-xl);
	font-weight: 600;
	line-height: 1.3;
	color: var(--ca-brand-stark);
	text-wrap: balance;
}

.ca-topp--smal .ca-topp__lead {
	margin-block-start: var(--ca-rum-5);
}

/* ---------------------------------------------------------
   Trust-raden
   ---------------------------------------------------------
   Ligger mellan ingressen och koprutan, precis som pa
   referenssidorna. Deras version har stjarnbetyg, "Millions of
   Followers Delivered" och betalkortsikoner.

   VI KAN INTE FYLLA DEN MED SAMMA SAKER, och det ar viktigt att
   veta varfor:

     Stjarnbetyg   Vi har inga recensioner. Att rita fem stjarnor
                   utan att ha dem ar precis det kategorin gor.
     "Millions"    Kundens leveranssiffra ar inte verifierad.
     Betalikoner   Vi vet inte an vilka betalsatt kunden tar emot.

   Raden bar darfor bara sant som gar att sta for. Den ar kortare
   an deras, och det ar hela poangen.
   --------------------------------------------------------- */
.ca-trust {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	margin: var(--ca-rum-7) auto 0;
	width: fit-content;
	max-width: 100%;
	background: var(--ca-white);
	border: 1px solid var(--ca-line);
	border-radius: var(--ca-radie);
	overflow: hidden;
	box-shadow: var(--ca-skugga);
}

.ca-trust__cell {
	display: flex;
	align-items: center;
	gap: var(--ca-rum-3);
	padding: var(--ca-rum-4) var(--ca-rum-6);
	font-size: var(--ca-text-sm);
	font-weight: 600;
	color: var(--ca-ink);
	white-space: nowrap;
	border-inline-start: 1px solid var(--ca-line);
}

.ca-trust__cell:first-child { border-inline-start: 0; }

/* Ikonen ar dekoration. Texten bredvid bar hela informationen,
   vilket ar kravet i WCAG 1.4.1. */
.ca-trust__ikon {
	flex: none;
	width: 1.15rem;
	height: 1.15rem;
	color: var(--ca-brand);
}

.ca-trust__ikon svg { width: 100%; height: 100%; display: block; }

/* Luckan syns med flit tills kunden svarat om betalsatt. */
.ca-trust__cell--lucka {
	color: var(--ca-fel);
	font-weight: 700;
	background: var(--ca-surface-2);
}

@media (max-width: 46rem) {
	.ca-trust { width: 100%; }

	.ca-trust__cell {
		flex: 1 1 100%;
		justify-content: center;
		border-inline-start: 0;
		border-block-start: 1px solid var(--ca-line);
		white-space: normal;
	}

	.ca-trust__cell:first-child { border-block-start: 0; }
}

/* Punktlistan pa en rad, samma monster som i koprutan. */
.ca-lista--rad {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ca-rum-3) var(--ca-rum-6);
	margin-block-start: var(--ca-rum-7);
}

.ca-lista--rad li { grid-template-columns: 1.1rem auto; }

.ca-tvakol__del h3 {
	margin: 0 0 var(--ca-rum-4);
	font-size: var(--ca-text-lg);
}

/* Luft mellan sektionsrubriken och tvaspalten.
   .ca-tvakol ar ett rutnat och arver ingen toppmarginal fran
   rubriken ovanfor, sa den lag dikt an. */
.ca-s__inner > .ca-tvakol { margin-block-start: var(--ca-rum-8); }

/* Fyra steg pa rad. Samma monster som ca-steg--tre men med en
   brytpunkt hogre upp, eftersom fyra spalter behover mer bredd. */
@media (min-width: 64rem) {
	.ca-steg--fyra {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: var(--ca-rum-6);
	}

	.ca-steg--fyra li { margin: 0; }
}

/* Liten not under ett block, dampad och centrerad. */
.ca-s__not {
	margin: var(--ca-rum-7) auto 0;
	max-width: 62ch;
	font-size: var(--ca-text-sm);
	color: var(--ca-ink-dampad);
	line-height: 1.55;
}

/* ---------------------------------------------------------
   Tonad platta med text och bild
   ---------------------------------------------------------
   Skiljer sig fran .ca-delad pa en punkt: hela blocket ligger
   pa en egen tonad yta med rundade horn, i stallet for att
   flyta fritt i sektionen. Det gor att den kan sitta pa en
   ljus sektion utan att forsvinna.

   Bilden gar anda ut till plattans kant nedat, sa att en
   telefon i motivet ser ut att sticka upp ur den.
   --------------------------------------------------------- */
.ca-platta {
	display: grid;
	gap: var(--ca-rum-8);
	align-items: center;
	background: var(--ca-surface);
	border-radius: var(--ca-radie-stor);
	padding: var(--ca-rum-10) var(--ca-rum-8);
	overflow: hidden;
}

@media (min-width: 56rem) {
	.ca-platta {
		grid-template-columns: 1fr 1fr;
		gap: var(--ca-rum-12);
		padding-block-end: 0;
	}
}

.ca-platta__text h2 {
	margin: 0 0 var(--ca-rum-6);
	max-width: 18ch;
}

.ca-platta__text p {
	margin: 0 0 var(--ca-rum-5);
	max-width: 54ch;
	font-size: var(--ca-text-bas);
	line-height: 1.65;
	color: var(--ca-ink-dampad);
}

.ca-platta__text p:last-child { margin-block-end: 0; }

.ca-platta__media {
	align-self: end;
	line-height: 0;
}

.ca-platta__media img,
.ca-platta__media .ca-bildplats {
	width: 100%;
	height: auto;
	border-end-start-radius: 0;
	border-end-end-radius: 0;
}

/* ---------------------------------------------------------
   Delat kort: vit halva med text, tonad halva med bild
   ---------------------------------------------------------
   Referensen anvander samma form tre ganger pa varje sida:
   ett kort som gar rakt igenom, dar ena halvan ar innehall och
   den andra ar visuell. Det ar en effektiv form eftersom den
   ger tyngd at ett textblock utan att kraven en helsidesbild.

   VAR VERSION HAR EN SKILLNAD. Deras hogerhalva ar ofta fylld
   med namngivna kundomdomen. Vi kan inte gora det, se
   diskretionsblocket. Hogerhalvan bar darfor en bild eller en
   illustration i stallet.
   --------------------------------------------------------- */
.ca-kort2 {
	display: grid;
	background: var(--ca-white);
	border: 1px solid var(--ca-line);
	border-radius: var(--ca-radie-stor);
	overflow: hidden;
	box-shadow: var(--ca-skugga);
	text-align: start;
}

@media (min-width: 56rem) {
	.ca-kort2 { grid-template-columns: 1fr 1fr; }
}

.ca-kort2__text {
	padding: var(--ca-rum-10) var(--ca-rum-8);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.ca-kort2__text h3 {
	margin: 0 0 var(--ca-rum-5);
	font-size: var(--ca-text-2xl);
	max-width: 20ch;
}

.ca-kort2__text p {
	margin: 0 0 var(--ca-rum-5);
	max-width: 52ch;
	line-height: 1.65;
	color: var(--ca-ink-dampad);
}

.ca-kort2__text p:last-child { margin-block-end: 0; }

.ca-kort2__text ol {
	margin: 0 0 var(--ca-rum-5);
	padding-inline-start: 1.3rem;
	display: flex;
	flex-direction: column;
	gap: var(--ca-rum-3);
	color: var(--ca-ink-dampad);
	line-height: 1.5;
}

/* Ikonen ovanfor rubriken. Dekoration, bar ingen information. */
.ca-kort2__ikon {
	width: 3rem;
	height: 3rem;
	margin-block-end: var(--ca-rum-6);
	display: grid;
	place-items: center;
	border-radius: var(--ca-radie);
	background: var(--ca-brand);
	color: var(--ca-ink-invers);
	flex: none;
}

.ca-kort2__ikon svg { width: 1.5rem; height: 1.5rem; }

/* Den tonade halvan. Gar ut till kortets kant. */
.ca-kort2__media {
	background: var(--ca-brand-deep);
	display: grid;
	place-items: center;
	padding: var(--ca-rum-8);
	min-height: 18rem;
}

.ca-kort2__media img,
.ca-kort2__media .ca-bildplats {
	width: 100%;
	height: auto;
	border-radius: var(--ca-radie);
}

/* ---------- Tva vagar in, under heron ----------
   Added 2026-08-25. A quiet strip rather than another panel: it has to
   read as an aside to the buy buttons above it, not as a competitor. */
.ca-vagar {
	padding-block: var(--ca-rum-6);
	border-block-end: 1px solid var(--ca-line);
}

.ca-vagar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ca-rum-5);
}

.ca-vagar__text {
	margin: 0;
	max-width: 58ch;
	color: var(--ca-ink-dampad);
}

.ca-vagar__text strong {
	color: var(--ca-ink);
	display: block;
}

.ca-vagar .ca-knapprad2 { margin: 0; flex: 0 0 auto; }

/* ---------- CTA mellan innehallssektioner ----------
   Added 2026-08-25 for /how-it-works/.

   MEDVETET LATTARE AN .ca-slut. Slut-CTA:n ar mork och tar hela
   bredden eftersom den ar sidans sista ord. En mitt-CTA som gjorde
   samma sak skulle stoppa lasningen i stallet for att erbjuda en
   avstickare, och tre sadana pa en sida laser som en enda lang
   uppmaning. Den har ar en remsa med en kant, inte en vagg. */
.ca-cta {
	padding-block: var(--ca-rum-6);
	background: var(--ca-surface);
	border-block: 1px solid var(--ca-line);
}

.ca-cta__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ca-rum-5);
}

.ca-cta h2 {
	margin: 0 0 var(--ca-rum-2);
	font-size: var(--ca-text-xl);
}

.ca-cta p {
	margin: 0;
	max-width: 56ch;
	color: var(--ca-ink-dampad);
}

.ca-cta .ca-knapprad2 { margin: 0; flex: 0 0 auto; }


/* ---------------------------------------------------------
   TABELL, anvands av kakpolicyn
   ---------------------------------------------------------
   ⚠️ Svepet runt tabellen ar inte valfritt. Fyra kolumner med
   kaknamn far inte plats pa en telefon, och utan en egen
   rullande behallare skjuter tabellen ut hela sidan i sidled.
   Det ar en av de fa saker som gar sonder tyst: pa skrivbordet
   ser det perfekt ut.
   --------------------------------------------------------- */
.ca-tabell-svep {
	overflow-x: auto;
	margin-block: var(--ca-rum-4);
	-webkit-overflow-scrolling: touch;
}

.ca-tabell {
	width: 100%;
	min-width: 34rem;
	border-collapse: collapse;
	font-size: var(--ca-text-sm);
	text-align: start;
}

.ca-tabell th,
.ca-tabell td {
	padding: var(--ca-rum-3);
	border-block-end: 1px solid var(--ca-kant);
	vertical-align: top;
	text-align: start;
}

.ca-tabell thead th {
	font-weight: 600;
	color: var(--ca-ink);
	border-block-end-width: 2px;
	white-space: nowrap;
}

.ca-tabell td { color: var(--ca-ink-dampad); }
.ca-tabell tbody tr:last-child th,
.ca-tabell tbody tr:last-child td { border-block-end: 0; }

.ca-tabell code {
	font-size: 0.95em;
	color: var(--ca-ink);
	background: var(--ca-surface-2);
	padding: 0.1em 0.4em;
	border-radius: 4px;
	white-space: nowrap;
}

/* Startsidan med problemkort i hjalten. Pa mobil staplas bilden under
   korten och tog en hel skarm mellan de fyra forsta och de fyra sista
   problemen, uppmatt 2026-09-16. Problemen ska rymmas i de tva forsta
   skarmarna, bilden ar dekor. */
@media (max-width: 899px) {
	.ca-topp--problem .ca-topp__media { display: none; }
}

/* Rubriken och samtalet pa /build-your-own/ ar tva sektioner med full
   padding var. Mellanrummet blev 234 px pa desktop (Thomas 2026-09-16).
   Sektionen fore samtalet och samtalets sektion delar i stallet pa en
   vanlig luft. */
.ca-s:has(+ .ca-s > .ca-s__inner > .ca-samtal) { padding-block-end: var(--ca-rum-4); }
.ca-s:has(> .ca-s__inner > .ca-samtal) { padding-block-start: var(--ca-rum-4); }