/* =========================================================================
   SuperFumetto — landing page styles
   Loaded only on the front page. All .sf-ticker, .sf-hero, .sf-press,
   .sf-stats, .sf-how, .sf-examples, .sf-features, .sf-testi, .sf-pricing,
   .sf-guar, .sf-faq, .sf-finalcta rules + their responsive.
   (Footer lives in core.css because it's rendered on every page.)
   ========================================================================= */

.sf-ticker {
	background: var(--c-ink);
	color: var(--c-paper);
	overflow: hidden;
	border-bottom: var(--stroke-bold) solid var(--c-line);
}
.sf-ticker__track {
	display: flex;
	gap: 3.5rem;
	padding: 0.8rem 0;
	white-space: nowrap;
	animation: sf-marquee 40s linear infinite;
	will-change: transform;
}
.sf-ticker__track span {
	font-family: var(--ff-mono);
	font-size: 0.82rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	display: inline-flex; align-items: center; gap: 1rem;
}
.sf-ticker__track span::after {
	content: "★";
	color: var(--c-sunshine);
	margin-left: 0;
	font-size: 1rem;
}

/* -------------------------------------------------------------------------
   8b. Section — Hero
   ------------------------------------------------------------------------- */
.sf-hero {
	position: relative;
	padding-top: clamp(2.5rem, 2rem + 2vw, 4rem);
	padding-bottom: var(--s-section);
	overflow: hidden;
}
.sf-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(320px, 1fr);
	gap: clamp(2rem, 2vw + 1rem, 4rem);
	align-items: center;
}
.sf-hero__copy {
	position: relative;
	z-index: 2;
	min-width: 0; /* allow grid track to shrink; prevents oversized title from squeezing the visual column */
}
.sf-hero__title {
	font-family: var(--ff-display);
	font-weight: 600;
	font-size: var(--fs-h1);
	line-height: 0.92;
	letter-spacing: -0.03em;
	color: var(--c-ink);
	margin: 0 0 var(--s-6);
	font-variation-settings: "opsz" 144;
	overflow-wrap: break-word;
	hyphens: manual;
}
.sf-hero__title em {
	font-style: italic;
	color: var(--c-accent);
	font-variation-settings: "opsz" 144, "SOFT" 100;
	padding-right: 0.05em;
	position: relative;
	display: inline-block;
}
.sf-hero__lead { margin: 0 0 var(--s-6); max-width: 52ch; }
.sf-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-bottom: var(--s-7); }

.sf-hero__proof {
	display: flex; align-items: center; gap: var(--s-4);
	padding-top: var(--s-5);
	border-top: var(--stroke) solid var(--c-line-soft);
}
.sf-hero__stack {
	display: flex;
}
.sf-hero__stack img {
	width: 44px; height: 44px;
	border-radius: 50%;
	border: 2px solid var(--c-paper);
	box-shadow: 0 0 0 2px var(--c-line);
	object-fit: cover;
	margin-left: -10px;
	background: var(--c-paper-soft);
}
.sf-hero__stack img:first-child { margin-left: 0; }
.sf-hero__proof-text { font-size: 0.95rem; color: var(--c-ink-soft); line-height: 1.3; }
.sf-hero__proof-text strong { color: var(--c-ink); font-weight: 600; }
.sf-hero__proof-stars { display: flex; align-items: center; gap: var(--s-2); }

.sf-hero__visual {
	position: relative;
	width: 100%;
	aspect-ratio: 4/5;
	max-width: 560px;
	min-height: 540px;   /* safety net so panels remain visible even if aspect-ratio can't resolve */
	margin-left: auto;
	min-width: 0;
}
.sf-hero__panel {
	position: absolute;
	border: var(--stroke-bold) solid var(--c-line);
	border-radius: var(--r-lg);
	overflow: hidden;
	background: var(--c-card);
	box-shadow: 14px 14px 0 var(--c-line);
}
.sf-hero__panel img { width: 100%; height: 100%; object-fit: cover; }
.sf-hero__panel--main {
	inset: 5% 5% 10% 0;
	transform: rotate(-1.5deg);
	z-index: 2;
}
.sf-hero__panel--sub {
	width: 46%;
	aspect-ratio: 1;
	top: 58%;
	right: -4%;
	transform: rotate(3deg);
	z-index: 3;
	box-shadow: 8px 8px 0 var(--c-line);
}
.sf-hero__panel--sub img[data-cat="adults"] { display: none; }
[data-category="adults"] .sf-hero__panel--sub img[data-cat="adults"] { display: block; }
[data-category="adults"] .sf-hero__panel--sub img[data-cat="kids"]   { display: none; }

.sf-hero__burst {
	top: 2%;
	right: -2%;
	transform: rotate(12deg);
	animation: sf-wobble 6s ease-in-out infinite;
}
.sf-hero__bubble-k,
.sf-hero__bubble-a {
	top: 48%;
	left: -6%;
	transform: rotate(-4deg);
	z-index: 4;
}
/* bubble visibility handled below by generic .for-kids / .for-adults rules */

/* hero image swap by category */
.sf-hero__panel--main img[data-cat] { transition: opacity var(--t); }
.sf-hero__panel--main img[data-cat="adults"] { display: none; }
[data-category="adults"] .sf-hero__panel--main img[data-cat="kids"]   { display: none; }
[data-category="adults"] .sf-hero__panel--main img[data-cat="adults"] { display: block; }

.sf-hero__meta {
	position: absolute;
	bottom: -1%;
	left: -1%;
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-family: var(--ff-mono);
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--c-ink-mute);
	z-index: 4;
}
.sf-hero__meta span::before { content: "→ "; color: var(--c-accent); }

/* Hero title/eyebrow/lead/coverlabel alternation — contents keeps text flowing inline
   within the parent. Restricted to <span> so absolutely-positioned bubbles (divs) aren't affected. */
.sf-hero span.for-kids   { display: contents; }
.sf-hero span.for-adults { display: none; }
[data-category="adults"] .sf-hero span.for-kids   { display: none; }
[data-category="adults"] .sf-hero span.for-adults { display: contents; }

/* Bubble (div) visibility — positioning preserved */
.sf-hero div.for-kids    { display: block; }
.sf-hero div.for-adults  { display: none; }
[data-category="adults"] .sf-hero div.for-kids   { display: none; }
[data-category="adults"] .sf-hero div.for-adults { display: block; }

/* Hero CTA price anchor — sits under the buttons row */
.sf-hero__price {
	display: inline-flex;
	align-items: center;
	gap: var(--s-3);
	margin: calc(var(--s-6) * -0.3) 0 0;
	font-family: var(--ff-mono);
	font-size: 0.78rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-ink-mute);
}
.sf-hero__price b {
	font-family: var(--ff-display);
	font-weight: 700;
	font-style: italic;
	font-size: 1.6rem;
	letter-spacing: -0.02em;
	text-transform: none;
	color: var(--c-ink);
	line-height: 1;
}
.sf-hero__price b sup {
	font-size: 0.5em;
	font-weight: 500;
	vertical-align: 0.7em;
	margin-right: 0.05em;
}
.sf-hero__price-sep {
	width: 1px; height: 24px;
	background: var(--c-line-soft);
}
.sf-hero__price-bullet { color: var(--c-accent); font-weight: 700; }

/* Comic "cover label" stamped in corner of the main panel */
.sf-hero__coverlabel {
	position: absolute;
	top: 18px; left: 18px;
	background: var(--c-ink);
	color: var(--c-paper);
	padding: 0.35rem 0.7rem;
	font-family: var(--ff-mono);
	font-size: 0.66rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	border-radius: 4px;
	z-index: 5;
	display: flex; align-items: center; gap: 0.5rem;
	box-shadow: 3px 3px 0 var(--c-line);
}
.sf-hero__coverlabel b {
	font-family: var(--ff-display);
	font-weight: 700;
	font-style: italic;
	font-size: 1.3em;
	letter-spacing: -0.02em;
	color: var(--c-sunshine);
	text-transform: none;
}
.sf-hero__coverlabel .for-kids   { display: contents; }
.sf-hero__coverlabel .for-adults { display: none; }
[data-category="adults"] .sf-hero__coverlabel .for-kids   { display: none; }
[data-category="adults"] .sf-hero__coverlabel .for-adults { display: contents; }

/* Made in Italy circular stamp (rotating) */
.sf-hero__stamp {
	position: absolute;
	bottom: 8%;
	left: -7%;
	width: 120px; height: 120px;
	z-index: 5;
	pointer-events: none;
	color: var(--c-vermilion);
}
.sf-hero__stamp svg {
	width: 100%; height: 100%;
	animation: sf-rotate 22s linear infinite;
}
.sf-hero__stamp-core {
	position: absolute; inset: 0;
	display: grid; place-items: center;
	font-family: var(--ff-display);
	font-weight: 700;
	font-style: italic;
	font-size: 1.6rem;
	color: var(--c-vermilion);
	letter-spacing: -0.02em;
	line-height: 1;
}
.sf-hero__stamp-top {
	font-family: var(--ff-mono);
	font-size: 0.6rem;
	letter-spacing: 0.18em;
	color: var(--c-vermilion);
	font-weight: 500;
	font-style: normal;
	text-transform: uppercase;
	margin-bottom: 0.15rem;
}
.sf-hero__stamp-core::before,
.sf-hero__stamp-core::after {
	content: "";
	position: absolute;
	width: 18px; height: 2px;
	background: var(--c-vermilion);
}
.sf-hero__stamp-core::before { top: 22%;    left: 50%; transform: translateX(-50%); }
.sf-hero__stamp-core::after  { bottom: 22%; left: 50%; transform: translateX(-50%); }
@keyframes sf-rotate {
	to { transform: rotate(360deg); }
}

/* Scroll indicator at the bottom of hero */
.sf-hero__scroll {
	position: absolute;
	bottom: calc(var(--s-section) * 0.4);
	left: 50%;
	transform: translateX(-50%);
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: var(--s-2);
	font-family: var(--ff-mono);
	font-size: 0.7rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-ink-mute);
	z-index: 2;
}
.sf-hero__scroll-line {
	width: 1px; height: 48px;
	background: linear-gradient(to bottom, var(--c-ink-mute) 0%, var(--c-ink-mute) 40%, transparent 100%);
	position: relative;
	overflow: hidden;
}
.sf-hero__scroll-line::after {
	content: "";
	position: absolute;
	top: -50%; left: 0;
	width: 100%; height: 50%;
	background: var(--c-accent);
	animation: sf-scroll-dash 2.2s ease-in-out infinite;
}
@keyframes sf-scroll-dash {
	0%   { top: -50%; }
	70%  { top: 110%; }
	100% { top: 110%; }
}

/* Floating side label */
.sf-hero__sidelabel {
	position: absolute;
	top: 40%;
	right: 1rem;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-family: var(--ff-mono);
	font-size: 0.7rem;
	letter-spacing: 0.26em;
	color: var(--c-ink-mute);
	pointer-events: none;
	z-index: 1;
}

/* -------------------------------------------------------------------------
   8c. Section — Press
   ------------------------------------------------------------------------- */
.sf-press {
	padding-block: clamp(2.5rem, 2rem + 2vw, 4rem);
	border-block: var(--stroke) solid var(--c-line-soft);
	background: var(--c-paper-soft);
	overflow: hidden;
}
.sf-press__head {
	display: flex; justify-content: space-between; align-items: baseline;
	gap: var(--s-4);
	margin-bottom: var(--s-5);
}
.sf-press__marquee {
	display: flex;
	align-items: center;
	gap: 3.5rem;
	font-family: var(--ff-display);
	font-weight: 600;
	font-style: italic;
	font-size: clamp(1.4rem, 1rem + 1.2vw, 2rem);
	letter-spacing: -0.015em;
	color: var(--c-ink);
	white-space: nowrap;
	animation: sf-marquee 45s linear infinite;
	will-change: transform;
}
.sf-press__marquee span { opacity: 0.78; display: inline-flex; align-items: center; gap: 2rem; }
.sf-press__marquee span::after {
	content: "";
	display: inline-block;
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--c-accent);
	margin-left: 2rem;
}

/* -------------------------------------------------------------------------
   8d. Section — Stats
   ------------------------------------------------------------------------- */
.sf-stats { background: var(--c-ink); color: var(--c-paper); position: relative; overflow: hidden; }
.sf-stats .sf-eyebrow { color: rgba(245,241,234,0.6); }
.sf-stats .sf-eyebrow::before { background: rgba(245,241,234,0.6); }
.sf-stats__head {
	display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6);
	align-items: end;
	margin-bottom: var(--s-8);
}
.sf-stats__head h2 { color: var(--c-paper); }
.sf-stats__head p  { color: rgba(245,241,234,0.7); max-width: 40ch; justify-self: end; }
.sf-stats__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	border-top: var(--stroke) solid rgba(245,241,234,0.15);
}
.sf-stat {
	padding: var(--s-7) var(--s-5);
	border-right: var(--stroke) solid rgba(245,241,234,0.15);
	position: relative;
}
.sf-stat:last-child { border-right: 0; }
.sf-stat__value {
	font-family: var(--ff-display);
	font-weight: 700;
	font-size: clamp(3rem, 2rem + 4vw, 5.5rem);
	line-height: 0.9;
	letter-spacing: -0.04em;
	color: var(--c-paper);
	display: flex; align-items: baseline; gap: 0.15em;
}
.sf-stat__value sup {
	font-size: 0.4em;
	color: var(--c-sunshine);
	font-weight: 600;
	font-style: italic;
	letter-spacing: 0;
}
.sf-stat__label {
	margin: var(--s-3) 0 0;
	font-family: var(--ff-ui);
	font-size: 1.02rem;
	color: var(--c-paper);
	font-weight: 500;
}
.sf-stat__note {
	margin: 0.3rem 0 0;
	font-family: var(--ff-mono);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(245,241,234,0.5);
}
.sf-stats__halftone {
	position: absolute;
	inset: -20% -10% auto auto;
	width: 420px; height: 420px;
	background-image: radial-gradient(rgba(255,200,61,0.5) 1.2px, transparent 1.6px);
	background-size: 14px 14px;
	opacity: 0.35;
	pointer-events: none;
	mask-image: radial-gradient(circle at 30% 30%, #000, transparent 70%);
	-webkit-mask-image: radial-gradient(circle at 30% 30%, #000, transparent 70%);
}

/* -------------------------------------------------------------------------
   8e. Section — How it works
   ------------------------------------------------------------------------- */
.sf-how__head {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--s-6);
	align-items: end;
	margin-bottom: var(--s-8);
}
.sf-how__lead { max-width: 44ch; justify-self: end; }

.sf-how__steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--s-5);
	position: relative;
}
.sf-how__steps::before {
	content: "";
	position: absolute;
	top: 30px; left: 8%; right: 8%;
	height: 0; border-top: 2px dashed var(--c-line-soft);
	z-index: 0;
}
.sf-step {
	position: relative;
	padding: var(--s-5);
	background: var(--c-card);
	border: var(--stroke-bold) solid var(--c-line);
	border-radius: var(--r-lg);
	z-index: 1;
	transition: transform var(--t), box-shadow var(--t);
}
.sf-step:hover {
	transform: translateY(-4px);
	box-shadow: 8px 8px 0 var(--c-line);
}
.sf-step__num {
	font-family: var(--ff-display);
	font-weight: 800;
	font-size: 3.4rem;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--c-accent);
	font-style: italic;
	margin: 0 0 var(--s-3);
	display: flex; align-items: baseline; gap: 0.3rem;
}
.sf-step__num::after {
	content: "";
	display: inline-block;
	width: 36px; height: 3px;
	background: currentColor;
	margin-left: 0.3rem;
	align-self: center;
}
.sf-step__tag {
	position: absolute;
	top: -14px; right: var(--s-5);
}
.sf-step__title { margin: var(--s-3) 0 var(--s-3); font-family: var(--ff-display); font-weight: 600; font-size: clamp(1.3rem, 1rem + 0.8vw, 1.6rem); line-height: 1.1; letter-spacing: -0.02em; }
.sf-step__body { margin: 0; color: var(--c-ink-soft); font-size: 0.96rem; line-height: 1.5; }

/* -------------------------------------------------------------------------
   8f. Section — Examples (before/after)
   ------------------------------------------------------------------------- */
.sf-examples { background: var(--c-paper-soft); }
.sf-examples__head {
	display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6);
	align-items: end; margin-bottom: var(--s-8);
}
.sf-examples__rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(340px, 1fr);
	gap: var(--s-5);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: var(--s-5);
	scrollbar-width: none;
}
.sf-examples__rail::-webkit-scrollbar { display: none; }
.sf-example {
	scroll-snap-align: start;
	border: var(--stroke-bold) solid var(--c-line);
	border-radius: var(--r-lg);
	overflow: hidden;
	background: var(--c-card);
	position: relative;
}
.sf-example__img {
	aspect-ratio: 4/3;
	overflow: hidden;
	position: relative;
}
.sf-example__img img { width: 100%; height: 100%; object-fit: cover; }
.sf-example__tag {
	position: absolute; top: 14px; left: 14px;
	z-index: 2;
}
.sf-example__body { padding: var(--s-5); display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-4); }
.sf-example__body p { margin: 0; }
.sf-example__quote { font-family: var(--ff-display); font-style: italic; font-weight: 500; font-size: 1.15rem; line-height: 1.25; letter-spacing: -0.01em; }
.sf-example__who { margin-top: var(--s-3); font-family: var(--ff-mono); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-ink-mute); }

/* -------------------------------------------------------------------------
   8h. Section — Features (Why choose us)
   ------------------------------------------------------------------------- */
.sf-features__head { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); align-items: end; margin-bottom: var(--s-8); }
.sf-features__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	border-top: var(--stroke) solid var(--c-line);
	border-left: var(--stroke) solid var(--c-line);
}
.sf-feature {
	padding: var(--s-7) var(--s-5);
	border-right: var(--stroke) solid var(--c-line);
	border-bottom: var(--stroke) solid var(--c-line);
	display: flex; flex-direction: column; gap: var(--s-4);
	transition: background var(--t);
}
.sf-feature:hover { background: var(--c-accent-soft); }
.sf-feature__icon {
	width: 52px; height: 52px;
	display: grid; place-items: center;
	background: var(--c-accent);
	color: var(--c-accent-contrast);
	border-radius: var(--r-md);
	transition: transform var(--t);
}
.sf-feature:hover .sf-feature__icon { transform: rotate(-8deg); }
.sf-feature__icon svg { width: 26px; height: 26px; }
.sf-feature__title { margin: 0; font-family: var(--ff-display); font-weight: 600; font-size: clamp(1.25rem, 1rem + 0.6vw, 1.5rem); line-height: 1.1; letter-spacing: -0.015em; }
.sf-feature__body { margin: 0; color: var(--c-ink-soft); font-size: 0.96rem; line-height: 1.5; }

/* -------------------------------------------------------------------------
   8i. Section — Testimonials
   ------------------------------------------------------------------------- */
.sf-testi { background: var(--c-paper-deep); position: relative; overflow: hidden; }
.sf-testi__head { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); align-items: end; margin-bottom: var(--s-8); }
.sf-testi__head .sf-trust {
	display: flex; align-items: center; gap: var(--s-4);
	justify-self: end;
}
.sf-testi__head .sf-trust__score {
	font-family: var(--ff-display); font-weight: 700; font-size: 2.6rem; line-height: 1; letter-spacing: -0.03em;
}
.sf-testi__head .sf-trust__score sup { font-size: 0.42em; color: var(--c-ink-mute); font-weight: 500; vertical-align: top; }
.sf-testi__head .sf-trust__text { font-size: 0.9rem; color: var(--c-ink-soft); line-height: 1.3; }

.sf-testi__masonry {
	column-count: 3;
	column-gap: var(--s-5);
}
.sf-testi__item {
	break-inside: avoid;
	background: var(--c-card);
	border: var(--stroke-bold) solid var(--c-line);
	border-radius: var(--r-lg);
	padding: var(--s-5);
	margin-bottom: var(--s-5);
	position: relative;
}
.sf-testi__item:nth-child(3n+1) { transform: rotate(-0.5deg); }
.sf-testi__item:nth-child(3n+2) { transform: rotate(0.4deg); }
.sf-testi__item:nth-child(3n+3) { transform: rotate(-0.2deg); }
.sf-testi__top { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.sf-testi__quote {
	font-family: var(--ff-display);
	font-weight: 400;
	font-size: 1.2rem;
	line-height: 1.35;
	letter-spacing: -0.01em;
	margin: 0 0 var(--s-5);
	color: var(--c-ink);
	font-variation-settings: "opsz" 14;
}
.sf-testi__quote::before { content: "“"; font-style: italic; font-weight: 600; color: var(--c-accent); font-size: 1.6em; line-height: 0; margin-right: 0.1em; vertical-align: -0.3em; }
.sf-testi__author { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding-top: var(--s-4); border-top: var(--stroke) solid var(--c-line-soft); }
.sf-testi__who { font-weight: 500; font-size: 0.95rem; }
.sf-testi__where { font-family: var(--ff-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-ink-mute); margin-top: 2px; }
.sf-testi__date { font-family: var(--ff-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-ink-mute); }

/* -------------------------------------------------------------------------
   8j. Section — Pricing
   ------------------------------------------------------------------------- */
.sf-pricing__head { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); align-items: end; margin-bottom: var(--s-8); }
.sf-pricing__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s-5);
	align-items: stretch;
	max-width: 880px;
	margin-inline: auto;
}
.sf-plan {
	display: flex; flex-direction: column;
	background: var(--c-card);
	border: var(--stroke-bold) solid var(--c-line);
	border-radius: var(--r-xl);
	padding: var(--s-7) var(--s-6) var(--s-6);
	position: relative;
	transition: transform var(--t), box-shadow var(--t);
}
.sf-plan:hover { transform: translate(-3px, -3px); box-shadow: 10px 10px 0 var(--c-line); }
.sf-plan--popular {
	background: var(--c-ink);
	color: var(--c-paper);
	transform: scale(1.03);
	box-shadow: 8px 8px 0 var(--c-line);
}
.sf-plan--popular:hover { transform: scale(1.03) translate(-3px, -3px); }
.sf-plan--popular .sf-plan__price,
.sf-plan--popular .sf-plan__name { color: var(--c-paper); }
.sf-plan--popular .sf-plan__desc,
.sf-plan--popular .sf-plan__period,
.sf-plan--popular .sf-plan__features li { color: rgba(245,241,234,0.78); }
.sf-plan--popular .sf-plan__features li::before { color: var(--c-sunshine); }

.sf-plan__badge {
	position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
	background: var(--c-sunshine); color: var(--c-ink);
	padding: 0.35rem 0.9rem;
	font-family: var(--ff-mono); font-size: 0.72rem;
	letter-spacing: 0.14em; text-transform: uppercase;
	font-weight: 700;
	border: var(--stroke-bold) solid var(--c-line);
	border-radius: var(--r-pill);
	box-shadow: 3px 3px 0 var(--c-line);
}
.sf-plan__name { font-family: var(--ff-display); font-weight: 600; font-size: clamp(1.6rem, 1.3rem + 0.8vw, 2rem); letter-spacing: -0.02em; line-height: 1; margin: 0 0 var(--s-2); }
.sf-plan__desc { margin: 0 0 var(--s-5); color: var(--c-ink-soft); font-size: 0.96rem; }
.sf-plan__price-wrap {
	display: flex; align-items: baseline; gap: var(--s-2);
	padding-block: var(--s-4);
	border-block: var(--stroke) solid var(--c-line-soft);
	margin-bottom: var(--s-5);
}
.sf-plan__currency { font-family: var(--ff-display); font-weight: 500; font-size: 1.6rem; }
.sf-plan__price { font-family: var(--ff-display); font-weight: 700; font-size: clamp(3.2rem, 2.5rem + 2vw, 4.4rem); letter-spacing: -0.04em; line-height: 0.9; }
.sf-plan__period { font-family: var(--ff-mono); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-ink-mute); }
.sf-plan__features { list-style: none; padding: 0; margin: 0 0 var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.sf-plan__features li { font-size: 0.96rem; color: var(--c-ink-soft); padding-left: 1.6rem; position: relative; }
.sf-plan__features li::before { content: "✓"; position: absolute; left: 0; color: var(--c-accent); font-weight: 700; font-family: var(--ff-display); font-size: 1.1em; }
.sf-plan .sf-btn { width: 100%; justify-content: center; }

.sf-pricing__foot { margin-top: var(--s-6); text-align: center; color: var(--c-ink-soft); font-size: 0.94rem; }

/* -------------------------------------------------------------------------
   8k. Section — Guarantees
   ------------------------------------------------------------------------- */
.sf-guar { background: var(--c-ink); color: var(--c-paper); }
.sf-guar__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	border-top: var(--stroke) solid rgba(245,241,234,0.2);
}
.sf-guarantee {
	display: flex; align-items: flex-start; gap: var(--s-4);
	padding: var(--s-7) var(--s-5);
	border-right: var(--stroke) solid rgba(245,241,234,0.2);
}
.sf-guarantee:last-child { border-right: 0; }
.sf-guarantee__icon {
	flex: 0 0 auto;
	width: 44px; height: 44px;
	display: grid; place-items: center;
	border: 2px solid var(--c-sunshine);
	border-radius: 50%;
	color: var(--c-sunshine);
}
.sf-guarantee__title { margin: 0 0 0.35rem; font-family: var(--ff-display); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.015em; }
.sf-guarantee__body  { margin: 0; color: rgba(245,241,234,0.68); font-size: 0.92rem; line-height: 1.45; }

/* -------------------------------------------------------------------------
   8l. Section — FAQ
   ------------------------------------------------------------------------- */
.sf-faq__grid {
	display: grid;
	grid-template-columns: 1fr 1.6fr;
	gap: var(--s-8);
	align-items: start;
}
.sf-faq__list { display: flex; flex-direction: column; border-top: var(--stroke-bold) solid var(--c-line); }
.sf-faq__item {
	border-bottom: var(--stroke-bold) solid var(--c-line);
	padding: var(--s-5) 0;
}
.sf-faq__item summary {
	list-style: none;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--s-4);
	cursor: pointer;
	font-family: var(--ff-display);
	font-weight: 500;
	font-size: clamp(1.15rem, 1rem + 0.5vw, 1.5rem);
	letter-spacing: -0.015em;
	line-height: 1.2;
	transition: color var(--t);
}
.sf-faq__item summary::-webkit-details-marker { display: none; }
.sf-faq__item summary::after {
	content: "";
	width: 36px; height: 36px;
	border: 2px solid var(--c-line);
	border-radius: 50%;
	background:
		linear-gradient(var(--c-line), var(--c-line)) center/14px 2px no-repeat,
		linear-gradient(var(--c-line), var(--c-line)) center/2px 14px no-repeat;
	transition: transform var(--t), background-color var(--t);
}
.sf-faq__item[open] summary::after {
	background: linear-gradient(var(--c-line), var(--c-line)) center/14px 2px no-repeat;
	transform: rotate(180deg);
}
.sf-faq__item summary:hover { color: var(--c-accent); }
.sf-faq__answer {
	padding-top: var(--s-4);
	color: var(--c-ink-soft);
	max-width: 62ch;
	font-size: 1rem;
	line-height: 1.6;
}
.sf-faq__aside {
	position: sticky;
	top: 90px;
	padding: var(--s-6);
	background: var(--c-accent);
	color: var(--c-accent-contrast);
	border-radius: var(--r-lg);
	border: var(--stroke-bold) solid var(--c-line);
	box-shadow: 8px 8px 0 var(--c-line);
}
.sf-faq__aside p { margin: 0 0 var(--s-4); }
.sf-faq__aside .sf-h3 { color: inherit; margin-bottom: var(--s-4); }

/* -------------------------------------------------------------------------
   8m. Section — Final CTA
   ------------------------------------------------------------------------- */
.sf-finalcta {
	position: relative;
	overflow: hidden;
	background: var(--c-accent);
	color: var(--c-accent-contrast);
	padding-block: clamp(5rem, 4rem + 4vw, 8rem);
	border-block: var(--stroke-bold) solid var(--c-line);
}
.sf-finalcta__inner { text-align: center; max-width: 960px; margin-inline: auto; position: relative; z-index: 2; }
.sf-finalcta .sf-eyebrow { color: inherit; opacity: 0.7; }
.sf-finalcta .sf-eyebrow::before { background: currentColor; }
.sf-finalcta h2 {
	font-family: var(--ff-display);
	font-weight: 700;
	font-size: clamp(3rem, 2rem + 5vw, 7rem);
	line-height: 0.92;
	letter-spacing: -0.035em;
	margin: 0 0 var(--s-5);
	color: inherit;
	font-variation-settings: "opsz" 144;
}
.sf-finalcta h2 em { font-style: italic; }
.sf-finalcta__lead { font-size: var(--fs-lead); margin: 0 0 var(--s-6); opacity: 0.9; }
.sf-finalcta__note { margin-top: var(--s-5); font-family: var(--ff-mono); font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.8; }
.sf-finalcta__bg {
	position: absolute; inset: 0;
	background-image: radial-gradient(currentColor 1.4px, transparent 1.8px);
	background-size: 18px 18px;
	opacity: 0.1;
	pointer-events: none;
}
.sf-finalcta__burst {
	position: absolute;
	top: 10%; right: 6%;
	transform: rotate(16deg);
	background: var(--c-ink); color: var(--c-paper);
	animation: sf-wobble 5s ease-in-out infinite;
}
.sf-finalcta__burst-2 {
	position: absolute;
	bottom: 8%; left: 8%;
	transform: rotate(-12deg);
	background: var(--c-paper); color: var(--c-ink);
	animation: sf-wobble 7s ease-in-out infinite;
}

/* -------------------------------------------------------------------------
   10. Responsive
   ------------------------------------------------------------------------- */
@media (max-width: 1080px) {
	.sf-features__grid,
	.sf-how__steps,
	.sf-stats__grid,
	.sf-guar__grid { grid-template-columns: repeat(2, 1fr); }
	.sf-how__steps::before { display: none; }
	.sf-feature,
	.sf-stat,
	.sf-guarantee { border-right: var(--stroke) solid var(--c-line); }
	.sf-feature:nth-child(even),
	.sf-stat:nth-child(even),
	.sf-guarantee:nth-child(even) { border-right: 0; }
	.sf-stat { border-right-color: rgba(245,241,234,0.15); }
	.sf-stat:nth-child(even) { border-right: 0; }
	.sf-guarantee { border-right-color: rgba(245,241,234,0.2); }
	.sf-guarantee:nth-child(even) { border-right: 0; }
	.sf-testi__masonry { column-count: 2; }
	.sf-pricing__grid { grid-template-columns: 1fr 1fr; }
	.sf-plan--popular { transform: none; }
	.sf-plan--popular:hover { transform: translate(-3px, -3px); }
	.sf-faq__grid { grid-template-columns: 1fr; }
	.sf-faq__aside { position: static; order: -1; }
}
@media (max-width: 780px) {
	/* Shorter track on narrow viewports — keep the marquee lively */
	.sf-ticker__track   { animation-duration: 22s; gap: 2rem; padding: 0.7rem 0; }
	.sf-press__marquee  { animation-duration: 28s; gap: 2rem; }

	.sf-hero__grid   { grid-template-columns: 1fr; }
	.sf-hero__visual {
		order: -1;
		margin: 0 auto var(--s-6);
		max-width: min(82%, 440px);
	}
	.sf-hero__copy   { order: 1; }
	.sf-stats__head,
	.sf-how__head,
	.sf-features__head,
	.sf-pricing__head,
	.sf-testi__head,
	.sf-examples__head,
	.sf-press__head { grid-template-columns: 1fr; }
	.sf-stats__head p,
	.sf-how__lead,
	.sf-testi__head .sf-trust { justify-self: start; }
	.sf-hero__sidelabel { display: none; }
}
@media (max-width: 560px) {
	.sf-ticker__track  { animation-duration: 16s; gap: 1.6rem; font-size: 0.78rem; }
	.sf-press__marquee { animation-duration: 20s; gap: 1.8rem; font-size: clamp(1.1rem, 0.9rem + 1vw, 1.5rem); }

	.sf-features__grid,
	.sf-how__steps,
	.sf-stats__grid,
	.sf-guar__grid,
	.sf-pricing__grid,
	.sf-testi__masonry { grid-template-columns: 1fr; column-count: 1; }
	.sf-feature, .sf-stat, .sf-guarantee { border-right: 0; }
	.sf-hero__title { font-size: clamp(2.2rem, 1.4rem + 4.5vw, 3.6rem); }
	.sf-hero__visual { min-height: 420px; }
	.sf-hero__stamp { width: 88px; height: 88px; left: auto; right: -6%; bottom: auto; top: 4%; }
	.sf-hero__coverlabel { top: 10px; left: 10px; font-size: 0.58rem; padding: 0.25rem 0.5rem; }
	.sf-hero__sidelabel { display: none; }
	.sf-hero__scroll { display: none; }

	/* Full-width primary CTAs on phone — easier tap, cleaner layout */
	.sf-hero__ctas {
		flex-direction: column;
		align-items: stretch;
		gap: var(--s-3);
	}
	.sf-hero__ctas .sf-btn,
	.sf-finalcta .sf-btn,
	.sf-faq__aside .sf-btn {
		width: 100%;
		justify-content: center;
	}

	/* Tighten button padding so they don't feel oversized at full width */
	.sf-btn--lg {
		padding: 1rem 1.4rem;
		font-size: 1rem;
	}

	/* Price anchor can stay inline but wrap cleanly */
	.sf-hero__price {
		flex-wrap: wrap;
		gap: var(--s-2);
	}
	.sf-hero__price-sep { display: none; }
}