/*
 * The short treatment page: three chapters rebuilt from the website's own
 * pieces, laid as sheets that slide over one another (Kajal, 2026-09-17, on
 * the plain first version: "I like the idea of having a shorter treatment page
 * but I don't like the design … make the scrolling more interesting and
 * engaging"; of three filmed scroll looks she chose C, "Layers").
 *
 * Loaded only on a skin landing page whose content carries the class pv-s
 * (inc/render-skin-area.php). Every piece is one the site already has,
 * measured on the start page and Så fungerar det (2026-09-17) and rebuilt
 * under own class names:
 *
 *   glass        bone glass card, 22px corners, konjak hairline along the top
 *   dark glass   the dark section's card (white 6%, konjak hairline)
 *   discs        konjak-tinted icon discs (44px), the rose one for "seek care"
 *   photo        melts into its card through a mask, never a paint-over
 *   grounds      the start page's warm gradient, the espresso dark section
 *
 * How the page answers to scrolling:
 *
 *   layers   every chapter from here down is a rounded sheet lapping over the
 *            foot of the one before, its top edge drawn by a konjak hairline;
 *            while the next sheet slides up, the section below (ours or the
 *            site's own: questions, reviews) sinks back as one piece and fades
 *   glide    cards and rows glide in from alternating sides as they arrive,
 *            the photos settle into their frames
 *   journey  in the dark chapter a konjak line draws itself from step to
 *            step and each step's icon lights up as the line reaches it; the
 *            trust discs fill as they pass; cards answer to the pointer
 *
 * No numbers anywhere (Kajal, 2026-09-17): the five steps carry icons, the
 * three treatment points plain konjak circles.
 *
 * All movement is CSS only, tied to the scroll position (animation-timeline).
 * Browsers without it, and visitors who ask for reduced motion, get the same
 * page standing still — nothing is ever hidden waiting for a script. The two
 * looks she did not choose (A glide only, B the journey line that lights up)
 * are in commit c74346d.
 */

.pv-s {
	--s-ink: #2a251f;
	--s-body: #514840;
	--s-muted: #6a5f53;
	--s-bone: #f5efe5;
	--s-dark: #2a251f;
	--s-konjak: #c88a4e;
	--s-rose: rgb(168 92 82);
	--s-hairline: linear-gradient(
		90deg,
		rgb(200 138 78 / 0%) 4%,
		rgb(200 138 78 / 65%) 38%,
		rgb(220 167 110 / 80%) 55%,
		rgb(200 138 78 / 0%) 96%
	);
	position: relative;
	overflow-x: clip;
	color: var(--s-body);
	font-size: 16px;
	line-height: 1.65;
	text-wrap: pretty;
}

/* Every chapter is followed by a sheet that laps 28px over its foot: the
   bottom padding carries that lap on top of the section rhythm. */
.treat-page > section.pv-s {
	padding-top: 56px !important;
	padding-bottom: 84px !important;
}

.pv-s__wrap {
	max-width: 760px;
	margin-inline: auto;
}

.pv-s__wrap--wide {
	max-width: 1080px;
}

#dc-root .pv-s h2 {
	margin: 0;
	color: var(--s-ink);
	text-align: center;
}

#dc-root .pv-s h3 {
	margin: 0;
	color: var(--s-ink);
	font-family: Jost, Futura, sans-serif;
	font-size: 22px !important;
	font-weight: 400;
	line-height: 1.3;
}

.pv-s ul,
.pv-s ol,
.pv-s dl {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pv-s p {
	margin: 0 0 12px;
}

.pv-s strong {
	display: block;
	color: var(--s-ink);
	font-family: Jost, Futura, sans-serif;
	font-size: 19px;
	font-weight: 500;
	line-height: 1.3;
}

/* The site's glass card and its konjak hairline. */
.pv-s__glass,
.pv-s__glass--dark {
	position: relative;
	border: 1px solid rgb(255 255 255 / 72%);
	border-radius: 22px;
	background: rgb(245 239 229 / 62%);
	box-shadow: 0 14px 32px -24px rgb(42 37 31 / 30%);
}

.pv-s__glass--dark {
	border-color: rgb(255 255 255 / 10%);
	background: rgb(255 255 255 / 6%);
	box-shadow: none;
}

.pv-s__glass::before,
.pv-s__glass--dark::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 1px;
	background: var(--s-hairline);
	pointer-events: none;
}

/* The icon discs. */
.pv-s__disc {
	display: grid;
	flex: none;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: rgb(200 138 78 / 16%);
	color: var(--s-konjak);
}

.pv-s__disc--alert {
	background: rgb(214 160 150 / 24%);
	color: var(--s-rose);
}

.pv-s__disc--dark {
	border: 1px solid rgb(200 138 78 / 45%);
	background: rgb(200 138 78 / 18%);
}

.pv-s__disc--step {
	border: 1px solid rgb(200 138 78 / 45%);
	background: rgb(200 138 78 / 18%);
}

/* A treatment point's plain circle: the start page's journey dot. */
.pv-s__dot {
	width: 11px;
	height: 11px;
	margin: 16px 0 0 5px;
	border: 2px solid var(--s-bone);
	border-radius: 999px;
	background: var(--s-konjak);
	box-shadow: 0 0 0 1px rgb(200 138 78 / 45%);
}

/* Chapter 2 — understand: a calm warm ground in the bone family, glass rows.
   (It began as the start page's tan gradient; Kajal, 2026-09-28: "too
   yellow" — now paler bone tints, greyed a little towards espresso.) */

.pv-s--understand {
	background: linear-gradient(158deg, #f4efe8 0, #eae2d7 45%, #dfd5c7 100%);
}

.pv-s__acc {
	display: grid;
	gap: 12px;
	margin-top: 32px;
}

.pv-s__row summary {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border-radius: 22px;
	list-style: none;
	cursor: pointer;
}

.pv-s__row summary::-webkit-details-marker {
	display: none;
}

.pv-s__row summary:focus-visible {
	outline: 2px solid var(--s-konjak);
	outline-offset: 2px;
}

.pv-s__row-title {
	flex: 1;
	color: var(--s-ink);
	font-family: Jost, Futura, sans-serif;
	font-size: 19px;
	line-height: 1.3;
}

.pv-s__plus {
	display: grid;
	flex: none;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 1px solid rgb(42 37 31 / 22%);
	border-radius: 999px;
	color: var(--s-ink);
	transition:
		transform 0.3s ease,
		background-color 0.3s ease,
		color 0.3s ease;
}

.pv-s__row[open] .pv-s__plus {
	background: var(--s-ink);
	color: var(--s-bone);
	transform: rotate(45deg);
}

.pv-s__panel {
	padding: 4px 20px 22px;
}

@media (prefers-reduced-motion: no-preference) {
	.pv-s__row[open] .pv-s__panel {
		animation: pv-s-open 0.4s ease both;
	}
}

@keyframes pv-s-open {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
}

.pv-s__panel > :last-child {
	margin-bottom: 0;
}

.pv-s__list li {
	position: relative;
	padding: 9px 0 9px 20px;
	border-top: 1px solid rgb(42 37 31 / 9%);
}

.pv-s__list li:first-child {
	border-top: 0;
}

.pv-s__list li::before {
	content: "";
	position: absolute;
	top: 20px;
	left: 2px;
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: var(--s-konjak);
}

.pv-s .pv-s__dl {
	margin: 6px 0 14px;
}

.pv-s__pair {
	padding: 12px 0;
	border-top: 1px solid rgb(42 37 31 / 9%);
}

.pv-s__pair dt {
	color: var(--s-ink);
	font-weight: 600;
}

.pv-s__pair dd {
	margin: 2px 0 0;
}

.pv-s .pv-s__fine {
	color: var(--s-muted);
	font-size: 14.5px;
}

/* "Seek care" — always visible, the site's rose disc marks it. */
.pv-s__safety {
	margin-top: 20px;
	padding: 24px 22px;
}

.pv-s__safety-head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 12px;
}

.pv-s__safety .pv-s__list li::before {
	background: var(--s-rose);
}

/* Chapter 3 — how it works here, why it is safe: the espresso dark section */

.pv-s--dark {
	background:
		radial-gradient(70% 34% at 10% 0%, rgb(200 138 78 / 14%), rgb(200 138 78 / 0%) 70%),
		radial-gradient(60% 30% at 100% 58%, rgb(200 138 78 / 9%), rgb(200 138 78 / 0%) 70%), var(--s-dark);
	color: rgb(245 239 229 / 80%);
}

#dc-root .pv-s--dark h2,
#dc-root .pv-s--dark h3 {
	color: var(--s-bone);
}

.pv-s--dark strong {
	color: var(--s-bone);
}

.pv-s .pv-s__sub {
	max-width: 34em;
	margin: 14px auto 0;
	color: rgb(245 239 229 / 72%);
	text-align: center;
}

.pv-s .pv-s__sub--left {
	margin: 8px 0 0;
	text-align: left;
}

/* The journey: a disc per step, a thin konjak line from disc to disc. The
   steps touch (padding, no gap) so the line runs unbroken. */
.pv-s .pv-s__steps {
	margin-top: 36px;
}

.pv-s__step {
	position: relative;
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: 16px;
	padding-bottom: 28px;
}

.pv-s__step:last-child {
	padding-bottom: 0;
}

.pv-s__step::before,
.pv-s__step::after {
	content: "";
	position: absolute;
	top: 50px;
	bottom: 6px;
	left: 21.5px;
	width: 1px;
	background: rgb(200 138 78 / 38%);
}

/* The bright part of the line: folded away until the scroll draws it. */
.pv-s__step::after {
	background: var(--s-konjak);
	transform: scaleY(0);
	transform-origin: top;
}

.pv-s__step:last-child::before,
.pv-s__step:last-child::after,
.pv-s__step--dot::after {
	display: none;
}

/* The plain-circle journey of the treatment card: a narrower rail. */
.pv-s__step--dot {
	grid-template-columns: 21px minmax(0, 1fr);
}

.pv-s__step--dot::before {
	top: 33px;
	bottom: -11px;
	left: 10px;
}

/* The chapter's photo (the start page's "En läkare granskar"), whole, with
   no fade at its foot (Kajal, 2026-09-18: "remove the fade on the photo"). */
.pv-s__story-photo {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	margin-top: 28px;
	border-radius: 22px;
}

.pv-s__story-photo image-slot,
.pv-s__story-photo img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%;
}

.pv-s__step > div {
	padding-top: 9px;
}

.pv-s__step span:not(.pv-s__disc) {
	display: block;
	margin-top: 4px;
	font-size: 15.5px;
	line-height: 1.6;
}

.pv-s__cols {
	display: grid;
	gap: 40px;
	margin-top: 56px;
}

.pv-s .pv-s__trust {
	display: grid;
	gap: 12px;
	margin-top: 20px;
}

.pv-s__trust-row {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: 16px;
	padding: 18px;
}

.pv-s__trust-row,
.pv-s__privacy-card,
.pv-s__row {
	transition:
		translate 0.35s ease,
		border-color 0.35s ease,
		background-color 0.35s ease;
}

@media (hover: hover) {
	.pv-s__trust-row:hover,
	.pv-s__privacy-card:hover {
		border-color: rgb(200 138 78 / 45%);
		background: rgb(255 255 255 / 9%);
		translate: 0 -3px;
	}

	.pv-s__row:hover {
		background: rgb(250 246 239 / 80%);
		translate: 0 -2px;
	}
}

.pv-s__trust-row span:not(.pv-s__disc) {
	display: block;
	margin-top: 4px;
	color: rgb(245 239 229 / 72%);
	font-size: 15.5px;
	line-height: 1.6;
}

.pv-s__privacy-card {
	padding: 26px 22px;
}

.pv-s .pv-s__privacy {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px 16px;
	margin-top: 22px;
}

.pv-s__privacy li {
	display: grid;
	grid-template-columns: 18px minmax(0, 1fr);
	gap: 10px;
	color: var(--s-konjak);
}

.pv-s__privacy svg {
	margin-top: 3px;
}

.pv-s__privacy strong {
	font-family: inherit;
	font-size: 15.5px;
	font-weight: 600;
}

.pv-s__privacy span {
	display: block;
	margin-top: 2px;
	color: rgb(245 239 229 / 72%);
	font-size: 14px;
	line-height: 1.5;
}

/* Chapter 4 — treatment: ONE glass card, the photo melts into it */

.pv-s__card {
	overflow: hidden;
	margin-top: 32px;
}

.pv-s__photo {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 11;
	-webkit-mask-image: linear-gradient(180deg, #000 46%, rgb(0 0 0 / 76%) 62%, rgb(0 0 0 / 40%) 76%, rgb(0 0 0 / 12%) 90%, rgb(0 0 0 / 0%));
	mask-image: linear-gradient(180deg, #000 46%, rgb(0 0 0 / 76%) 62%, rgb(0 0 0 / 40%) 76%, rgb(0 0 0 / 12%) 90%, rgb(0 0 0 / 0%));
}

.pv-s__photo image-slot,
.pv-s__photo img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pv-s__card-body {
	padding: 6px 22px 26px;
}

.pv-s .pv-s__steps--light {
	margin-top: 0;
}

/* The three closing notes: inside the card, under a hairline, quiet. */
.pv-s .pv-s__notes {
	display: grid;
	gap: 8px;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid rgb(42 37 31 / 10%);
}

.pv-s__notes li {
	position: relative;
	padding-left: 18px;
	color: var(--s-muted);
	font-size: 14.5px;
	line-height: 1.55;
}

.pv-s__notes li::before {
	content: "";
	position: absolute;
	top: 9px;
	left: 3px;
	width: 5px;
	height: 5px;
	border-radius: 999px;
	background: var(--s-konjak);
}

/* Wider screens */

@media (width >= 760px) {
	.treat-page > section.pv-s {
		padding-top: 80px !important;
		padding-bottom: 108px !important;
	}

	.pv-s__row summary {
		padding: 16px 20px;
	}

	.pv-s__panel {
		padding: 4px 78px 26px;
	}

	.pv-s__safety {
		padding: 28px 30px;
	}

	.pv-s .pv-s__trust {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* The treatment card lies down: the photo on the left melts to the right
	   (the start page's step cards do the same). */
	.pv-s__card {
		display: grid;
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
		align-items: center;
	}

	.pv-s__photo {
		height: 100%;
		min-height: 420px;
		aspect-ratio: auto;
		-webkit-mask-image: linear-gradient(90deg, #000 52%, rgb(0 0 0 / 76%) 66%, rgb(0 0 0 / 40%) 78%, rgb(0 0 0 / 12%) 90%, rgb(0 0 0 / 0%));
		mask-image: linear-gradient(90deg, #000 52%, rgb(0 0 0 / 76%) 66%, rgb(0 0 0 / 40%) 78%, rgb(0 0 0 / 12%) 90%, rgb(0 0 0 / 0%));
	}

	.pv-s__card-body {
		padding: 40px 44px 36px 16px;
	}

	.pv-s__story-photo {
		aspect-ratio: 16 / 7;
	}
}

@media (width >= 1000px) {
	/* Side by side, the privacy box starts and ends level with the block of
	   four cards (Kajal, 2026-09-17). The left column dissolves into the
	   grid, so "Varför Provitalia" takes the first row alone and the cards
	   and the box share the second: one row, one height, no measured offset.
	   Inside the taller box its four points spread over the room. */
	.pv-s__cols {
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
		align-items: stretch;
		gap: 20px 32px;
	}

	.pv-s__cols > div:first-child {
		display: contents;
	}

	.pv-s__cols > div:first-child > h3 {
		grid-row: 1;
		grid-column: 1;
	}

	.pv-s .pv-s__cols .pv-s__trust {
		grid-row: 2;
		grid-column: 1;
		margin-top: 0;
	}

	.pv-s__privacy-card {
		display: flex;
		flex-direction: column;
		grid-row: 2;
		grid-column: 2;
	}

	.pv-s .pv-s__privacy-card .pv-s__privacy {
		flex: 1;
		align-content: space-evenly;
	}

	/* The scroll story (the start page's "Så här jobbar vi" does the same):
	   the heading and the photo hold still on the left while the five steps
	   go by on the right and light up one after another. */
	.pv-s__story {
		display: grid;
		grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
		gap: 72px;
		align-items: start;
	}

	.pv-s__story-head {
		position: sticky;
		top: 132px;
	}

	#dc-root .pv-s .pv-s__story-head h2,
	.pv-s .pv-s__story-head .pv-s__sub {
		margin-inline: 0;
		text-align: left;
	}

	.pv-s__story-photo {
		aspect-ratio: 4 / 3;
		margin-top: 32px;
	}

	.pv-s .pv-s__story .pv-s__steps {
		margin-top: 6px;
	}

	.pv-s .pv-s__story .pv-s__step {
		padding-bottom: 64px;
	}

	.pv-s .pv-s__story .pv-s__step:last-child {
		padding-bottom: 8px;
	}
}

/* ---------- How the page answers to scrolling ---------- */

/* Layers: from the first chapter down, every section is a rounded sheet laid
   over the foot of the one before. They stand like this with or without
   movement. */
.treat-page > section.pv-s,
.treat-page > section.pv-s ~ section {
	position: relative;
	z-index: 1;
	margin-top: -28px;
	border-radius: 28px 28px 0 0;
	box-shadow: 0 -22px 44px -30px rgb(27 23 18 / 45%);
}

/* Every sheet's top edge is drawn by the konjak hairline of the site's
   glass cards, so bone on bone still reads as one layer over another. */
.treat-page > section.pv-s::before,
.treat-page > section.pv-s ~ section::before {
	content: "";
	position: absolute;
	top: 0;
	right: 28px;
	left: 28px;
	height: 1px;
	background: linear-gradient(90deg, rgb(200 138 78 / 0%) 4%, rgb(200 138 78 / 65%) 38%, rgb(220 167 110 / 80%) 55%, rgb(200 138 78 / 0%) 96%);
	pointer-events: none;
}

/* The site's own sections further down have no ground of their own: bone,
   and the site's deeper bone (the questions' old topic box) in turn. */
.treat-page > section.pv-s ~ section:not(.pv-s) {
	background-color: #f5efe5;
}

.treat-page > section.pv-s--treatment + section {
	background-color: rgb(239 231 218);
}

.treat-page > section.pv-s--treatment + section + section + section {
	background-color: rgb(239 231 218);
}

/* The questions' topics: a light row instead of a boxed grid with a konjak
   bar (Kajal: "the topics of the FAQ do not look good"). Phones: small pills
   that wrap, the chosen one espresso. From 760px: plain words on a hairline,
   the chosen one dark with a konjak underline. */
.provitalia-mirror .treat-page > section.pv-s ~ section .faq-tabs {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
}

.provitalia-mirror .treat-page > section.pv-s ~ section .faq-tabs > .faq-tab {
	width: auto !important;
	max-width: none !important;
	min-height: 38px;
	margin: 0 !important;
	padding: 8px 16px !important;
	border: 1px solid rgb(42 37 31 / 18%) !important;
	border-radius: 999px !important;
	background: rgb(255 255 255 / 45%) !important;
	color: #514840 !important;
	font-size: 14px !important;
	white-space: nowrap;
}

.provitalia-mirror .treat-page > section.pv-s ~ section .faq-tabs > .faq-tab[aria-selected="true"] {
	border-color: #2a251f !important;
	background: #2a251f !important;
	color: #f5efe5 !important;
}

@media (width >= 760px) {
	/* Tablets (760–999px): five topics with long names do not fit one row —
	   the strip wraps onto the hairline instead of pushing the page sideways
	   (Kajal's iPad review, 2026-09-29). From 1000px one row as before. */
	.provitalia-mirror .treat-page > section.pv-s ~ section .faq-tabs {
		flex-wrap: wrap;
		gap: 0 26px;
		border-bottom: 1px solid rgb(42 37 31 / 12%) !important;
	}

	.provitalia-mirror .treat-page > section.pv-s ~ section .faq-tabs > .faq-tab {
		min-height: 44px;
		padding: 10px 2px 14px !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: none !important;
		color: #6a5f53 !important;
		font-size: 15px !important;
		box-shadow: inset 0 -2px 0 rgb(200 138 78 / 0%) !important;
		transition:
			color 0.25s ease,
			box-shadow 0.25s ease;
	}

	.provitalia-mirror .treat-page > section.pv-s ~ section .faq-tabs > .faq-tab:hover {
		color: #2a251f !important;
	}

	.provitalia-mirror .treat-page > section.pv-s ~ section .faq-tabs > .faq-tab[aria-selected="true"] {
		background: none !important;
		color: #2a251f !important;
		box-shadow: inset 0 -2px 0 #c88a4e !important;
	}
}

@media (width >= 1000px) {
	.provitalia-mirror .treat-page > section.pv-s ~ section .faq-tabs {
		flex-wrap: nowrap;
	}
}

.pv-s--treatment {
	background: #f5efe5;
}

/* The site's own sections end with 19px of padding, less than the 28px the
   next sheet laps over them: without this the sheet would cut into their
   last row. Those further down also lag behind while the next sheet comes
   up, so their last card needs the same foot room as our chapters. */
.treat-page > section:not(.pv-s):has(+ section.pv-s) {
	padding-bottom: 56px !important;
}

.treat-page > section.pv-s ~ section:not(.pv-s):has(+ section) {
	padding-bottom: 84px !important;
}

@keyframes pv-s-glide {
	from {
		opacity: 0;
		transform: translate3d(var(--s-from, 0), 22px, 0);
	}
}

@keyframes pv-s-settle {
	from {
		transform: scale(1.14);
	}
}

/* The chapter below may still be read while the next sheet comes up (its
   last piece is the "seek care" card). So the two halves of the sinking run
   apart: it lags behind from the moment the sheet appears, but fades only
   once the sheet has covered half the screen, when what is left of the
   chapter sits at the very top. */
@keyframes pv-s-lag {
	to {
		transform: translate3d(0, 16vh, 0);
	}
}

@keyframes pv-s-fade {
	to {
		opacity: 0.2;
	}
}

/* The site's own sections hold several pieces side by side in the flow: they
   lag together, unscaled. */
@keyframes pv-s-lag-plain {
	to {
		transform: translate3d(0, 12vh, 0);
	}
}

@keyframes pv-s-draw {
	to {
		transform: scaleY(1);
	}
}

@keyframes pv-s-light-disc {
	to {
		border-color: var(--s-konjak);
		background: var(--s-konjak);
		box-shadow: 0 0 0 7px rgb(200 138 78 / 14%);
		color: var(--s-ink);
	}
}

@keyframes pv-s-light-strong {
	from {
		color: rgb(245 239 229 / 66%);
	}
}

@keyframes pv-s-light-text {
	from {
		color: rgb(245 239 229 / 58%);
	}
}

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		/* While the next sheet slides up over it, the section below sinks back
		   AS ONE PIECE — ground and words together (Kajal, 2026-09-28: when only
		   the words sank, the space between them and the top of their ground
		   grew instead of the next layer covering them). Timed by the SECTION
		   (a named timeline its pieces share), counted back from "cover 100%"
		   (the section's foot leaves at the top): the sinking starts when the
		   section's top edge has left the screen AND its foot is on the screen
		   (whichever comes later — a sheet whose top edge is still visible must
		   not slide down and open a gap above it), the fade when its foot is
		   48vh + 28px from the top — the next sheet laps 28px over that foot,
		   so its edge has then passed the middle. The last section has nothing
		   sliding over it and stays as it is. */
		.treat-page > section.pv-s,
		.treat-page > section.pv-s ~ section:not(:last-of-type) {
			view-timeline: --pv-sheet block;
		}

		.treat-page > section.pv-s {
			animation: pv-s-lag linear both;
			animation-timeline: --pv-sheet;
			animation-range: cover max(100vh, 100% - 100vh) cover 100%;
		}

		.treat-page > section.pv-s > .pv-s__wrap {
			animation: pv-s-fade linear both;
			animation-timeline: --pv-sheet;
			animation-range: cover calc(100% - 48vh - 28px) cover 100%;
		}

		.treat-page > section.pv-s ~ section:not(.pv-s, :last-of-type) {
			animation: pv-s-lag-plain linear both;
			animation-timeline: --pv-sheet;
			animation-range: cover max(100vh, 100% - 100vh) cover 100%;
		}

		.treat-page > section.pv-s ~ section:not(.pv-s, :last-of-type) > * {
			animation: pv-s-fade linear both;
			animation-timeline: --pv-sheet;
			animation-range: cover calc(100% - 48vh - 28px) cover 100%;
		}

		/* The journey lights up. The tip of the bright line rides at 62% of the
		   screen's height: a step's stretch of line starts to draw when the
		   step's top passes that level and is done when its bottom does, so the
		   line runs on unbroken from step to step. The icon disc and the words
		   light up as the tip arrives, and go out again if you scroll back. */
		.pv-s--dark .pv-s__step::after {
			animation: pv-s-draw linear both;
			animation-timeline: view();
			animation-range: cover 38vh cover calc(100% - 62vh);
		}

		.pv-s--dark .pv-s__step .pv-s__disc {
			animation: pv-s-light-disc linear both;
			animation-timeline: view();
			animation-range: cover calc(38vh - 8px) cover calc(38vh + 36px);
		}

		.pv-s--dark .pv-s__step strong {
			animation: pv-s-light-strong linear both;
			animation-timeline: view();
			animation-range: cover calc(38vh - 8px) cover calc(38vh + 60px);
		}

		.pv-s--dark .pv-s__step span:not(.pv-s__disc) {
			animation: pv-s-light-text linear both;
			animation-timeline: view();
			animation-range: cover calc(38vh - 8px) cover calc(38vh + 60px);
		}

		/* The trust discs fill as their card passes. */
		.pv-s__trust-row .pv-s__disc {
			animation: pv-s-light-disc linear both;
			animation-timeline: view();
			animation-range: cover 30vh cover calc(30vh + 60px);
		}

		/* Everything glides in, rows from alternating sides. Tied to the
		   scroll over a short stretch, so it follows the finger and is long
		   finished before the piece reaches the middle of the screen. */
		.pv-s [data-glide] {
			animation: pv-s-glide linear both;
			animation-timeline: view();
			animation-range: cover 0% cover 19%;
		}

		.pv-s__acc > :nth-child(odd),
		.pv-s__trust > :nth-child(odd) {
			--s-from: -26px;
		}

		.pv-s__acc > :nth-child(even),
		.pv-s__trust > :nth-child(even) {
			--s-from: 26px;
		}

		/* The photos settle into their frames as they come in. */
		.pv-s__photo img,
		.pv-s__story-photo img {
			animation: pv-s-settle linear both;
			animation-timeline: view();
			animation-range: cover 0% cover 45%;
		}
	}
}

/* ===== Round 6 (2026-09-18): three parts redesigned =====
   Kajal: "När du bör söka vård direkt", "Varför Provitalia" and "Din
   integritet, hela vägen" did not match the vibe of the page and were not as
   engaging as the rest; "search online and make them purposefully designed".
   Two designs each were built from the research (NHS warning callout,
   Kry/Min Doktor hairline statements, Apple's self-drawing privacy icons,
   Klarna's security points) and shown side by side; she chose:

   care    the notice as its own soft blush layer — no alarm icon (NHS: the
           wording carries the message better than a "!"), heading and
           sentence first, the five signs with hollow rose rings
   why     four pillars without boxes: large line icons that draw themselves
           as the pillar arrives; from 1000px four columns between konjak
           hairlines
   vault   the seal: a konjak padlock in a ring that draws itself, the four
           points below; from 1000px in a row, joined by one line that runs
           "hela vägen" and lights each point as it reaches it
   The trial with both designs of each is kept in the evidence folder. */

/* ---- När du bör söka vård direkt ---- */
.treat-page > section.pv-s--care {
	background: rgb(241 228 218);
}

#dc-root .pv-s .pv-s__care-intro h2 {
	text-align: left;
}

.pv-s .pv-s__care-intro p {
	max-width: 34em;
	margin: 14px 0 0;
	color: var(--s-body);
}

/* The five signs: hollow rose rings, never filled — a filled mark would read
   as "you have this". */
.pv-s .pv-s__signs {
	display: grid;
	margin-top: 22px;
}

.pv-s__signs li {
	position: relative;
	padding: 14px 0 14px 30px;
	border-top: 1px solid rgb(168 92 82 / 22%);
	color: var(--s-ink);
	font-size: 17px;
}

.pv-s__signs li::before {
	content: "";
	position: absolute;
	top: 23px;
	left: 3px;
	box-sizing: border-box;
	width: 11px;
	height: 11px;
	border: 1.5px solid var(--s-rose);
	border-radius: 999px;
}

/* ---- Varför Provitalia: four pillars, no boxes ---- */
.pv-s__why {
	margin-top: 72px;
}

.pv-s .pv-s__why .pv-s__trust {
	display: block;
	margin-top: 14px;
}

.pv-s__point {
	position: relative;
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	gap: 16px;
	padding: 24px 0;
	border-top: 1px solid rgb(245 239 229 / 12%);
}

.pv-s__point > div {
	padding-top: 8px;
}

.pv-s--dark .pv-s__point strong {
	font-size: 21px;
	font-weight: 400;
}

.pv-s__point span:not(.pv-s__pillar-icon) {
	display: block;
	margin-top: 6px;
	color: rgb(245 239 229 / 72%);
	font-size: 15.5px;
	line-height: 1.6;
}

.pv-s__pillar-icon {
	display: block;
	color: var(--s-konjak);
}

.pv-s__pillar-icon svg {
	display: block;
	width: 44px;
	height: 44px;
}

/* ---- Din integritet, hela vägen: the seal ---- */
/* Three classes deep on purpose: the privacy list's ".pv-s__privacy span"
   (block, pale bone) would otherwise win over one class and push the icon
   into the circle's corner. */
.pv-s .pv-s__vault .pv-s__vault-icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 48px;
	height: 48px;
	margin: 0;
	border: 1px solid rgb(200 138 78 / 45%);
	border-radius: 999px;
	background: rgb(200 138 78 / 14%);
	color: var(--s-konjak);
	font-size: 0;
}

.pv-s .pv-s__vault .pv-s__vault-icon svg {
	width: 22px;
	height: 22px;
	margin: 0;
}

.pv-s__vault {
	position: relative;
	margin-top: 80px;
	padding-top: 64px;
	text-align: center;
}

.pv-s__vault::before {
	content: "";
	position: absolute;
	top: 0;
	right: 10%;
	left: 10%;
	height: 1px;
	background: var(--s-hairline);
}

.pv-s__seal {
	width: 104px;
	height: 104px;
	margin: 0 auto 24px;
	color: var(--s-konjak);
}

.pv-s__seal-art {
	display: block;
	width: 100%;
	height: 100%;
}

.pv-s__seal-inner {
	stroke-opacity: 0.4;
}

#dc-root .pv-s .pv-s__vault h3 {
	font-size: 30px !important;
	font-weight: 300;
	line-height: 1.2;
}

.pv-s .pv-s__vault .pv-s__sub {
	margin: 12px auto 0;
}

.pv-s .pv-s__vault .pv-s__privacy {
	display: block;
	margin-top: 32px;
	text-align: left;
}

.pv-s .pv-s__vault .pv-s__privacy li {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	gap: 16px;
	align-items: start;
	padding: 18px 0;
	border-top: 1px solid rgb(245 239 229 / 10%);
	color: inherit;
}

.pv-s .pv-s__vault .pv-s__privacy li > div {
	padding-top: 3px;
}

.pv-s .pv-s__vault .pv-s__privacy strong {
	font-family: Jost, Futura, sans-serif;
	font-size: 19px;
	font-weight: 500;
}

.pv-s .pv-s__vault .pv-s__privacy li > div > span {
	display: block;
	margin-top: 4px;
	color: rgb(245 239 229 / 72%);
	font-size: 15.5px;
	line-height: 1.55;
}

@media (width >= 900px) {
	/* The notice: heading and sentence on the left, the signs on the right. */
	.pv-s__care {
		display: grid;
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
		gap: 64px;
		align-items: start;
	}

	.pv-s .pv-s__care .pv-s__signs {
		margin-top: 0;
	}
}

@media (width >= 1000px) {
	/* Four pillars between konjak hairlines. */
	.pv-s .pv-s__why .pv-s__trust {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		margin-top: 36px;
	}

	.pv-s__why .pv-s__point {
		display: block;
		padding: 6px 26px;
		border-top: 0;
		border-left: 1px solid rgb(200 138 78 / 32%);
	}

	.pv-s__why .pv-s__point:first-child {
		padding-left: 0;
		border-left: 0;
	}

	.pv-s__why .pv-s__pillar-icon svg {
		width: 52px;
		height: 52px;
		margin-bottom: 20px;
	}

	.pv-s--dark .pv-s__why .pv-s__point strong {
		font-size: 22px;
		font-weight: 300;
	}

	/* The four points in a row, joined by one line "hela vägen". */
	.pv-s .pv-s__vault .pv-s__privacy {
		position: relative;
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 28px;
		margin-top: 52px;
		text-align: center;
	}

	.pv-s .pv-s__vault .pv-s__privacy::before {
		content: "";
		position: absolute;
		top: 28px;
		right: calc((100% - 84px) / 8);
		left: calc((100% - 84px) / 8);
		height: 1px;
		background: linear-gradient(90deg, rgb(200 138 78 / 25%), rgb(200 138 78 / 85%) 50%, rgb(200 138 78 / 25%));
		transform-origin: left;
	}

	.pv-s .pv-s__vault .pv-s__privacy li {
		display: block;
		padding: 0;
		border-top: 0;
	}

	.pv-s .pv-s__vault li .pv-s__vault-icon {
		position: relative;
		z-index: 1;
		width: 56px;
		height: 56px;
		margin: 0 auto 18px;
		background: rgb(58 48 38);
	}

	.pv-s__seal {
		width: 120px;
		height: 120px;
	}

	#dc-root .pv-s .pv-s__vault h3 {
		font-size: 36px !important;
	}
}

@keyframes pv-s-draw-x {
	from {
		transform: scaleX(0);
	}
}

@keyframes pv-s-stroke {
	from {
		stroke-dashoffset: 1;
	}
}

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		/* Every pillar's icon draws itself as the pillar arrives. */
		.pv-s__why .pv-s__point {
			view-timeline: --pv-pillar block;
		}

		.pv-s__pillar-icon svg > * {
			stroke-dasharray: 1;
			animation: pv-s-stroke linear both;
			animation-timeline: --pv-pillar;
			animation-range: cover 6% cover 38%;
		}

		/* The seal draws itself; each point's disc fills as it passes the
		   reading line (on phones, one row after another). */
		.pv-s__seal {
			view-timeline: --pv-seal block;
		}

		.pv-s__seal-art > * {
			stroke-dasharray: 1;
			animation: pv-s-stroke linear both;
			animation-timeline: --pv-seal;
			animation-range: cover 8% cover 46%;
		}

		.pv-s__vault .pv-s__vault-icon {
			animation: pv-s-light-disc linear both;
			animation-timeline: view();
			animation-range: cover calc(38vh - 8px) cover calc(38vh + 36px);
		}

		/* From 1000px: the line runs across "hela vägen" and lights the
		   four points one after another as it reaches them. */
		@media (width >= 1000px) {
			.pv-s .pv-s__vault .pv-s__privacy {
				view-timeline: --pv-vault block;
			}

			.pv-s .pv-s__vault .pv-s__privacy::before {
				animation: pv-s-draw-x linear both;
				animation-timeline: --pv-vault;
				animation-range: cover 14% cover 40%;
			}

			.pv-s__vault .pv-s__privacy li .pv-s__vault-icon {
				animation-timeline: --pv-vault;
			}

			.pv-s__vault .pv-s__privacy li:nth-child(1) .pv-s__vault-icon {
				animation-range: cover 14% cover 18%;
			}

			.pv-s__vault .pv-s__privacy li:nth-child(2) .pv-s__vault-icon {
				animation-range: cover 22% cover 26%;
			}

			.pv-s__vault .pv-s__privacy li:nth-child(3) .pv-s__vault-icon {
				animation-range: cover 30% cover 34%;
			}

			.pv-s__vault .pv-s__privacy li:nth-child(4) .pv-s__vault-icon {
				animation-range: cover 37% cover 41%;
			}
		}
	}
}

@media (hover: hover) {
	.pv-s__why .pv-s__point,
	.pv-s .pv-s__vault .pv-s__privacy li {
		transition: translate 0.35s ease;
	}

	.pv-s__why .pv-s__point:hover,
	.pv-s .pv-s__vault .pv-s__privacy li:hover {
		translate: 0 -3px;
	}
}

/* "Du behöver inte ha en diagnos": the six "I recognise this" labels of the
   borrowed section (.reassure-panel). On phones they were pills of every
   width, three wrapping onto two lines, their icons in four places, and they
   looked tappable though they are statements. Kajal picked A (2026-09-18):
   below 760px a plain list — the icon in a konjak disc, the text beside it,
   hairlines between the rows. From 760px the pills fit and stay as they are.
   The export's rules are keyed on [data-area] with !important; the skin
   landing pages' wrapper carries data-pv-page, so the same weight, loaded
   later, wins without touching the export. */
@media (width < 760px) {
	.treat-page[data-pv-page] .reassure-panel ul {
		display: grid;
		gap: 0 !important;
		text-align: left;
	}

	.treat-page[data-pv-page] .reassure-panel ul > li {
		display: grid;
		grid-template-columns: 36px minmax(0, 1fr);
		gap: 14px;
		align-items: center;
		padding: 12px 2px;
		border: 0;
		border-top: 1px solid rgb(42 37 31 / 10%);
		border-radius: 0;
		background: none;
		text-align: left;
		font-size: 15.5px;
		font-weight: 500;
	}

	.treat-page[data-pv-page] .reassure-panel ul > li:last-child {
		border-bottom: 1px solid rgb(42 37 31 / 10%);
	}

	.treat-page[data-pv-page] .reassure-panel ul > li .ico {
		display: grid;
		place-items: center;
		width: 36px;
		height: 36px;
		border-radius: 999px;
		background: rgb(200 138 78 / 14%);
	}

	.treat-page[data-pv-page] .reassure-panel ul > li .ico svg {
		width: 18px;
		height: 18px;
	}
}

/* ===== 2026-09-28: the sticky "Starta bedömning" bar stands out on the dark chapter =====
   The export's dark glass bar melted into the espresso chapter. A bone glass
   version was tried and turned back ("i don't like it"); Kajal: "keep the dark
   bar, just make it stand out more". So the bar stays dark and keeps its bone
   button: the glass is a shade lighter than the chapter's espresso, the edge
   is brighter, the site's konjak hairline runs along its top (as on every
   glass card and sheet) and a deeper shadow lifts it off the ground. Only on
   the short pages (this stylesheet loads nowhere else); the class names are
   the export's, as mirror-overrides.css already uses them for this bar. */
.provitalia-mirror .sticky-cta .pv-i-8559c6daf830 {
	border: 1px solid rgb(255 255 255 / 34%) !important;
	background: linear-gradient(158deg, rgb(70 64 57 / 92%), rgb(50 46 42 / 92%)) !important;
	box-shadow:
		0 26px 52px -18px rgb(0 0 0 / 85%),
		0 0 0 1px rgb(0 0 0 / 35%),
		inset 0 1px 0 rgb(220 167 110 / 65%) !important;
}

/* iPad and other tablets (761–1023px), Kajal's pick A (2026-09-29): the
   hero keeps its two columns, but the photo starts level with the intro
   instead of drifting down the column, and the four promise pills leave
   the narrow text column to run across the full width in rows. The left
   column's box is dissolved (display: contents) so its children become
   grid items; every item gets its row, and the photo spans the intro,
   price and button rows — level with the intro whatever the heading's
   line count. */
@media (width >= 761px) and (width <= 1023px) {
	.provitalia-mirror .treat-page .treat-hero .pv-i-ab47a4802619 {
		align-items: start;
		row-gap: 22px;
		grid-template-columns: minmax(0, 1fr) 330px;
	}

	.provitalia-mirror .treat-page .treat-hero .pv-i-ab47a4802619 > div:first-child {
		display: contents;
	}

	.provitalia-mirror .treat-page .treat-hero h1 {
		grid-area: 1 / 1;
	}

	.provitalia-mirror .treat-page .treat-hero .pv-i-f743c7d2e81e {
		grid-area: 2 / 1;
	}

	.provitalia-mirror .treat-page .treat-hero .pv-i-e82db952a895 {
		grid-area: 3 / 1;
	}

	.provitalia-mirror .treat-page .treat-hero .pv-i-dbb97aeab50e {
		grid-area: 4 / 1;
	}

	.provitalia-mirror .treat-page .treat-hero .pv-i-703d39182e82 {
		grid-area: 2 / 2 / span 3 / 3;
	}

	.provitalia-mirror .treat-page .treat-hero .pv-i-33986f77a7db {
		grid-area: 5 / 1 / 6 / 3;
		display: flex;
		flex-flow: row wrap;
		gap: 10px 12px;
		margin-top: 4px;
	}
}