/*
 * FalaBola 2.0.1 — main stylesheet
 * ---------------------------------------------------------------------
 * Desktop-first: sections 1-5 below are the desktop baseline (Figma
 * "Desktop" frame, 1440 wide). Section 6 layers on the tablet (~1024px,
 * Figma "Tablet" frame @768) and mobile (~640px, Figma "Mobile" frame
 * @390) breakpoints for the *landing*. Section 7 is the blog (Figma
 * "blog" tab) desktop baseline; section 8, at the bottom, is its own
 * tablet/mobile responsive pass — see BLOG-TEMPLATE-BRIEF.md §1.
 * Organised as:
 *   1. Design tokens (custom properties)
 *   2. Reset / base elements
 *   3. Reusable objects (container, buttons, screen-reader utilities)
 *   4. Site header / footer
 *   5. Page sections, in source order
 *   6. Responsive breakpoints (tablet + mobile) — landing only
 *   7. Blog templates (single post, desktop baseline)
 *   8. Blog responsive breakpoints (tablet + mobile)
 *   9. 404 page (desktop + tablet + mobile)
 */

/* ==========================================================================
   1. Design tokens
   ========================================================================== */
:root {
	/* Colors */
	--color-text: #141212;
	--color-text-muted: rgba(20, 18, 18, 0.6);
	--color-text-faint: rgba(20, 18, 18, 0.4);
	--color-text-on-dark: #ffffff;
	--color-ink: #201f24;
	--color-nav: #0d0a38;
	--color-bg: #ffffff;
	--color-bg-subtle: #f8f8f8;
	--color-bg-muted: #faf9f7;
	--color-border: rgba(0, 0, 0, 0.08);
	--color-dark: #141212;
	--color-black: #000000;
	--color-icon-bubble: #201f24;
	--color-success: #3da423;
	--color-danger: #da3125;
	--color-highlight-pink: #ffd1fa;
	--color-highlight-green: #d8f4ac;
	/* Blog-only accent (confirmed against Figma "blog" tab, node 177:981) */
	--color-accent-blue: #136ee1;

	/* Blog featured/related image crop — same ratio in the article hero
	   and in "Читайте также" cards so object-fit:cover shows the same frame.
	   Derived from Figma related-card image (~358×160 ≈ 9/4). */
	--article-image-ratio: 9 / 4;

	--gradient-hero: linear-gradient(120deg, #e0f4ff 10%, #afe0fc 45%, #43d3ff 120%);
	--gradient-persona-blue: linear-gradient(-56deg, #82e2ff 5%, #e1f8ff 95%);
	--gradient-persona-orange: linear-gradient(131deg, #ffeac0 8%, #ffcf90 105%);
	--gradient-persona-green: linear-gradient(140deg, #eaf9ff 20%, #68f08c 130%);
	--gradient-persona-peach: linear-gradient(-44deg, #ff823f 15%, #ffdbcf 100%);

	/* Typography */
	--font-sans: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--font-mono-brand: 'Sometype Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
	--font-mono-chat: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

	--fs-h1: clamp(2.5rem, 4vw, 3.5rem);
	--fs-h2: clamp(2rem, 3.2vw, 3.5rem);
	--fs-h3: 1.5rem;
	--fs-body-lg: 1.25rem;
	--fs-body: 1rem;
	--fs-small: 0.875rem;

	/* Layout */
	--container-width: 1200px;
	--container-padding: 24px;
	/* Half of the visual gap between adjacent sections (~128px in Figma). */
	--section-spacing: 64px;
	--radius-pill: 80px;
	--radius-lg: 24px;
	--radius-md: 16px;
	--radius-sm: 12px;
	--radius-header-cta: 12px;
}

/* ==========================================================================
   2. Reset / base
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	line-height: 1.5;
	color: var(--color-text);
	background: var(--color-bg);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

h1,
h2,
h3,
h4,
p {
	margin: 0;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
	cursor: pointer;
}

/* ==========================================================================
   3. Reusable objects
   ========================================================================== */
.container {
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	z-index: 1000;
	background: var(--color-dark);
	color: #fff;
	padding: 12px 20px;
	border-radius: 0 0 8px 0;
	transition: top 0.15s ease;
}

.skip-link:focus {
	top: 0;
	position: fixed;
}

/* Shared CTA button — canonical "dark pill" style used by the header's
   "Get the app" button and the blog promo-card CTA. Keep visuals here only;
   one-off layout tweaks (align-self, flex-shrink, etc.) belong on the
   context-specific class instead of duplicating these rules. */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: var(--radius-header-cta);
	font-family: inherit;
	font-weight: 500;
	font-size: 0.9375rem; /* 15px */
	line-height: 1.5;
	letter-spacing: 0.15px;
	white-space: nowrap;
	border: none;
	cursor: pointer;
	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.2s ease,
		opacity 0.2s ease;
}

.button:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
}

.button:active {
	transform: translateY(0) scale(0.98);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.button--dark {
	background: var(--color-black);
	color: var(--color-text-on-dark);
}

.button--dark:hover {
	background: #2a2828;
}

/* Store buttons (Google Play / App Store) ------------------------------- */
.store-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 11px;
	margin-top: 32px;
}

.store-button {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	box-sizing: border-box;
	width: 193px;
	height: 56px;
	padding: 0 20px 0 22px;
	background: #000;
	color: #fff;
	border-radius: var(--radius-pill);
	overflow: hidden;
	transition:
		background-color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.2s ease;
}

.store-button:hover {
	background: #2a2828;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}

.store-button:active {
	transform: translateY(0) scale(0.98);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.store-button__icon {
	width: 30px;
	height: 34px;
	flex-shrink: 0;
	object-fit: contain;
}

.store-button--apple .store-button__icon {
	width: 28px;
}

.store-button__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 0;
	line-height: 1.15;
	min-width: 0;
}

.store-button__eyebrow {
	font-size: 13px;
	font-weight: 400;
	line-height: 1;
	opacity: 0.95;
}

.store-button__name {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.02em;
	white-space: nowrap;
}

.store-button--apple .store-button__name {
	font-size: 20px;
	letter-spacing: -0.66px;
}

/* Smart store badges: show only the matching store on phones/tablets. */
html[data-platform="ios"] .store-buttons--smart .store-button--google,
html[data-platform="android"] .store-buttons--smart .store-button--apple {
	display: none;
}

/* Telegram button (Lending — Telegram Bot template): single badge, no
   platform-based hiding, reuses the same pill shape as the store buttons. */
.store-button--telegram .store-button__icon {
	width: 28px;
	height: 28px;
	border-radius: 50%;
}

/* Download modal (header "Get the app") ---------------------------------- */
.download-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.download-modal[hidden] {
	display: none;
}

.download-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(20, 18, 18, 0.72);
	cursor: pointer;
}

.download-modal__panel {
	position: relative;
	z-index: 1;
	width: min(100%, 534px);
}

.download-modal__card {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	width: 100%;
	padding: 40px 40px 36px;
	background: #fff;
	border-radius: 32px;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
	text-align: center;
}

.download-modal__close {
	position: absolute;
	top: 16px;
	right: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: var(--color-text-muted);
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.download-modal__close:hover {
	background: var(--color-bg-subtle);
	color: var(--color-text);
}

.download-modal__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-bottom: 24px;
}

.download-modal__title {
	margin: 0;
	font-size: 2.5rem; /* 40px */
	font-weight: 600;
	line-height: 1.1;
	color: #191c1f;
}

.download-modal__subtitle {
	margin: 0;
	font-size: 1.125rem; /* 18px */
	font-weight: 500;
	line-height: 1.4;
	color: rgba(25, 28, 31, 0.8);
}

.download-modal__qr {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 230px;
	height: 230px;
	margin: 0 auto 24px;
	background: #fff;
}

.download-modal__qr img,
.download-modal__qr canvas {
	display: block;
	width: 230px !important;
	height: 230px !important;
}

.download-modal__or {
	margin: 0 0 16px;
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.4;
	color: rgba(25, 28, 31, 0.8);
	opacity: 0.5;
}

.download-modal__card .store-buttons {
	justify-content: center;
	margin-top: 0;
}

body.is-download-modal-open {
	overflow: hidden;
}

@media (max-width: 600px) {
	.download-modal {
		padding: 16px;
		align-items: flex-end;
	}

	.download-modal__card {
		padding: 32px 20px 28px;
		border-radius: 24px;
	}

	.download-modal__title {
		font-size: 1.75rem;
	}

	.download-modal__subtitle,
	.download-modal__or {
		font-size: 1rem;
	}

	.download-modal__qr {
		width: 200px;
		height: 200px;
	}

	.download-modal__qr img,
	.download-modal__qr canvas {
		width: 200px !important;
		height: 200px !important;
	}

	.download-modal__card .store-button {
		width: 100%;
		max-width: 193px;
	}
}

/* Language strip (in-app languages) -------------------------------------- */
.language-strip {
	display: flex;
	flex-wrap: nowrap;
	gap: 19px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.language-strip > li {
	flex: 0 0 auto;
}

.language-strip__item {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 19px 26px;
	border-radius: var(--radius-pill);
	background: var(--color-bg-subtle);
	font-size: 1.525rem;
	line-height: 1.2;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
	transition:
		background-color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.2s ease;
}

a.language-strip__item:hover,
a.language-strip__item:focus-visible {
	background: #fff;
	box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.08);
	transform: translateY(-1px);
}

.language-strip__item img {
	width: 27px;
	height: 27px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.language-strip__item.is-active {
	/* Kept for optional editor highlight; same look as hover */
	background: #fff;
	box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.08);
}

.language-strip--compact {
	flex-wrap: wrap;
}

.language-strip--compact .language-strip__item {
	padding: 8px 16px;
	background: #efefef;
	font-size: 0.875rem;
	gap: 8px;
}

.language-strip--compact .language-strip__item img {
	width: 16px;
	height: 16px;
}

/* ==========================================================================
   4. Site header / footer
   ========================================================================== */
/* Desktop Figma (1:2294): nav left + CTA right, no visible logo.
   Specs from nodes 1:2297 (nav) and 1:2659 (CTA). */
.site-header {
	position: relative;
	background: var(--color-bg);
	padding-block: 20px;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	/* Match hero__inner horizontal inset so nav/CTA aren't flush to the card edges */
	padding-inline: 184px 90px;
}

/* Kept in DOM for a11y + future breakpoints; visually matching Figma = hidden */
.site-header__logo {
	font-family: var(--font-mono-brand);
	font-weight: 700;
	font-size: 1.5rem;
	color: var(--color-ink);
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.site-header__nav {
	min-width: 0;
}

.site-header__nav ul {
	display: flex;
	align-items: center;
	gap: 0;
}

.site-header__nav a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 32px;
	border-radius: var(--radius-pill);
	font-weight: 500;
	font-size: 1.125rem; /* 18px — Figma nav */
	line-height: normal;
	color: var(--color-nav);
	white-space: nowrap;
}

.site-header__nav a:hover {
	background: var(--color-bg-subtle);
}

/* Hamburger toggle: hidden on desktop/tablet, shown + wired up on mobile
   (see section 6). Kept in the DOM at every breakpoint for simplicity. */
.site-header__menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	flex-shrink: 0;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: var(--color-ink);
	transition: background-color 0.15s ease;
}

.site-header__menu-toggle:hover {
	background: var(--color-bg-subtle);
}

.site-header__menu-icon {
	position: relative;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
}

.site-header__menu-icon svg {
	position: absolute;
	inset: 0;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.site-header__menu-icon-close {
	opacity: 0;
	transform: scale(0.6);
}

.site-header__menu-toggle[aria-expanded="true"] .site-header__menu-icon-bars {
	opacity: 0;
	transform: scale(0.6);
}

.site-header__menu-toggle[aria-expanded="true"] .site-header__menu-icon-close {
	opacity: 1;
	transform: scale(1);
}

/* Visuals now live on the shared .button.button--dark (see above);
   this class only adds the flex-item behaviour needed inside the header row. */
.site-header__cta {
	flex-shrink: 0;
}

.site-footer {
	background: var(--color-bg-muted);
	border-top: 1px solid #efefef;
	padding-block: 60px 40px;
}

.site-footer__inner {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.site-footer__main {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 64px;
}

.site-footer__brand {
	flex-shrink: 0;
}

.site-footer__logo-link {
	display: inline-block;
	line-height: 0;
}

.site-footer__logo {
	display: block;
	width: 220px;
	height: auto;
}

.site-footer__menu {
	display: flex;
	gap: 64px;
}

.site-footer__column {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.site-footer__column-title {
	margin: 0;
	font-weight: 600;
	font-size: 1rem;
	color: var(--color-nav);
}

.site-footer__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__link {
	font-size: 0.875rem;
	color: #1f1f1f;
	opacity: 0.8;
}

.site-footer__link:hover {
	opacity: 1;
	color: var(--color-accent-blue);
}

.language-strip--footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 4px;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

.language-strip--footer > li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.language-strip--footer .language-strip__item {
	padding: 8px 16px;
	background: #efefef;
	font-size: 0.875rem;
	gap: 8px;
}

.language-strip--footer .language-strip__item img {
	width: 16px;
	height: 16px;
}

.site-footer__divider {
	height: 1px;
	background: #efefef;
}

.site-footer__copyright {
	margin: 0;
	font-size: 0.8125rem;
	color: #8b8b8b;
}

/* ==========================================================================
   5. Sections
   ========================================================================== */

/* --- Hero --------------------------------------------------------------- */
.hero {
	/* Figma splash: ~47px below hero card before language strip */
	padding-block: 8px 48px;
}

.hero__inner {
	position: relative;
	background: var(--gradient-hero);
	border-radius: 32px;
	padding: 48px 204px 56px;
	min-height: 570px;
	overflow: hidden;
}

.hero__sparkle {
	position: absolute;
	pointer-events: none;
	opacity: 0.85;
	z-index: 1;
}

.hero__sparkle img {
	display: block;
	width: 100%;
	height: 100%;
}

.hero__sparkle--1 {
	left: 10%;
	top: 14%;
	width: 51px;
	height: 51px;
}

.hero__sparkle--2 {
	left: 14%;
	top: 12%;
	width: 26px;
	height: 26px;
}

.hero__sparkle--3 {
	left: 14%;
	top: 20%;
	width: 26px;
	height: 26px;
}

.hero__rating {
	position: absolute;
	top: 32px;
	right: 90px;
	z-index: 1;
	width: 172px;
	height: 98px;
	background: #fff;
	border-radius: var(--radius-lg);
	box-shadow: 0 4px 28px rgba(0, 0, 0, 0.08);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0;
}

.hero__rating-laurel {
	position: absolute;
	top: 50%;
	width: 38px;
	height: 62px;
	transform: translateY(-50%);
	pointer-events: none;
}

.hero__rating-laurel--left {
	left: 8px;
	transform: translateY(-50%) scaleY(-1) rotate(-200deg);
}

.hero__rating-laurel--right {
	right: 8px;
	transform: translateY(-50%) rotate(-20deg);
}

.hero__rating-label {
	position: relative;
	z-index: 1;
	font-size: 10px;
	font-weight: 500;
	line-height: 1.5;
	color: #1f1f1f;
	text-transform: none;
	letter-spacing: 0;
	order: 0;
}

.hero__rating-value {
	position: relative;
	z-index: 1;
	font-weight: 700;
	font-size: 31px;
	line-height: 1.2;
	color: #1f1f1f;
	order: 1;
}

.hero__rating-stars {
	position: relative;
	z-index: 1;
	width: 75px;
	height: 14px;
	margin-top: 2px;
	order: 2;
}

.hero__brand {
	position: relative;
	z-index: 1;
	margin: 8px 0 0;
	max-width: 760px;
	overflow: visible;
}

.hero__wordmark {
	display: flex;
	align-items: baseline;
	margin: 0;
	font-family: var(--font-mono-brand);
	font-weight: 700;
	font-size: clamp(4.5rem, 11.4vw, 10.292rem); /* ~165px */
	line-height: 0.95;
	color: var(--color-ink);
	letter-spacing: -0.02em;
}

.hero__wordmark-fala {
	position: relative;
	z-index: 1;
	flex-shrink: 0;
}

.hero__wordmark-la {
	position: relative;
	z-index: 3; /* sit above the mascot head, like Figma */
	flex-shrink: 0;
}

/* Spacer for the missing “o”; mascot eye sits in this slot */
.hero__wordmark-gap {
	position: relative;
	display: inline-block;
	width: 0.7em;
	flex-shrink: 0;
	align-self: stretch;
	z-index: 2;
}

/* Figma mascot frame ≈323px at 165px type → ~1.96em */
.hero__mascot {
	position: absolute;
	left: 122%;
	top: 0.22em;
	width: 1.96em;
	/* Pull left so the eye fills the “o” and “la” stays clear */
	transform: translate(-58%, 0);
	pointer-events: none;
	z-index: 2;
}

.hero__mascot img {
	display: block;
	width: 100%;
	height: auto;
}

.hero__title {
	position: relative;
	z-index: 1;
	margin-top: 8px;
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 3.5rem; /* 56px */
	line-height: 1.5;
	color: var(--color-ink);
	opacity: 0.5;
	min-height: 1.5em;
	max-width: 22ch;
}

.hero__title-cursor {
	display: inline-block;
	width: 3px;
	height: 0.85em;
	margin-left: 4px;
	background: var(--color-ink);
	vertical-align: -0.08em;
	animation: hero-cursor-blink 1s steps(1) infinite;
}

@keyframes hero-cursor-blink {
	0%,
	49.9% {
		opacity: 1;
	}
	50%,
	100% {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero__title-cursor {
		animation: none;
		opacity: 1;
	}
}

.hero__description {
	position: relative;
	z-index: 1;
	margin-top: 16px;
	max-width: 38ch;
	font-size: 1.075rem; /* ~17.2px */
	font-weight: 500;
	line-height: 1.5;
	color: var(--color-text);
}

.hero__heading,
.hero__lead {
	margin: 0;
	font: inherit;
	color: inherit;
	font-weight: 500;
}

.hero .store-buttons {
	position: relative;
	z-index: 1;
	margin-top: 40px;
}

/* --- Language strip section ---------------------------------------------- */
.language-strip-section {
	/* Figma lang frame is 80px; chips sit in that band with no extra bottom gap */
	padding-block: 16px;
}

.language-strip-subtitle {
	font-size: var(--fs-h2);
	font-weight: 600;
	line-height: 1.1;
	max-width: 21ch;
	margin: 0 0 24px;
	color: #201f24;
}

.language-strip-carousel {
	position: relative;
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

.language-strip-scroll {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-block: 8px;
	justify-content: flex-start;
}

.language-strip-scroll.is-centered {
	justify-content: center;
}

.language-strip-scroll::-webkit-scrollbar {
	display: none;
}

.language-strip-scroll > li {
	scroll-snap-align: start;
}

.language-strip-carousel__btn {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #fff;
	color: var(--color-ink);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	cursor: pointer;
	transform: translateY(-50%);
	transition: opacity 0.2s ease, box-shadow 0.2s ease;
}

.language-strip-carousel__btn:hover {
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
}

.language-strip-carousel__btn:focus-visible {
	outline: 2px solid #43d3ff;
	outline-offset: 2px;
}

.language-strip-carousel__btn[hidden] {
	display: none;
}

.language-strip-carousel__btn--prev {
	left: 4px;
}

.language-strip-carousel__btn--next {
	right: 4px;
}

@media (min-width: 768px) {
	.language-strip-carousel__btn--prev {
		left: 8px;
	}

	.language-strip-carousel__btn--next {
		right: 8px;
	}
}

/* --- Features ------------------------------------------------------------ */
.features {
	/* Figma 01: ~67px inset around the phone/content block */
	padding-block: var(--section-spacing);
}

.features__inner {
	display: flex;
	align-items: center;
	gap: 48px;
	padding-inline: 204px;
}

.features__illustration {
	flex-shrink: 0;
	width: 328px;
	overflow: visible;
}

.features__phone {
	position: relative;
	width: 328px;
	height: 543px;
	overflow: visible;
}

.features__phone-screen {
	position: absolute;
	left: 50%;
	top: 3px;
	transform: translateX(calc(-50% - 26px));
	width: 250px;
	height: 506px;
	border-radius: 27px;
	border: 5.6px solid rgba(0, 0, 0, 0.04);
	background: #fff;
	box-shadow: 0 12px 40px rgba(62, 108, 157, 0.1);
}

.features__user {
	position: absolute;
	z-index: 2;
	left: -13px;
	top: 11px;
	display: flex;
	align-items: center;
	gap: 14px;
}

.features__avatar {
	width: 86px;
	height: 86px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

.features__username {
	font-family: var(--font-mono-chat);
	font-size: 0.83rem;
	font-weight: 500;
	line-height: 1.6;
	color: #000;
	opacity: 0.2;
	white-space: nowrap;
}

.features__bubble {
	position: absolute;
	z-index: 2;
	background: #fff;
	border: 0.67px solid #fff;
	padding: 11px;
	box-shadow: 0 2.7px 10.6px rgba(62, 108, 157, 0.16);
}

.features__bubble p {
	margin: 0;
	font-family: var(--font-mono-chat);
	font-size: 0.83rem;
	font-weight: 500;
	line-height: 1.6;
	color: #8b8b8b;
}

.features__bubble--user {
	left: 24px;
	top: 92px;
	width: 155px;
	border-radius: 0 16px 16px 16px;
	transform: rotate(8.79deg);
	transform-origin: center;
	color: #8b8b8b;
}

.features__bubble--user p {
	color: #8b8b8b;
}

.features__bubble--ai {
	left: -7px;
	top: 158px;
	width: 175px;
	border-radius: 16px 16px 0 16px;
	box-shadow: 0 2.7px 18.6px rgba(62, 108, 157, 0.16);
}

.features__bubble--ai p {
	color: #000;
}

.features__mark {
	display: inline;
	padding: 0 2px;
	border-radius: 5px;
	font: inherit;
}

.features__mark--error {
	background: #ffd1fa;
	color: #da3125;
}

.features__mark--ok {
	background: #d8f4ac;
	color: #3da423;
}

.features__mascot {
	/* Inside .features__phone-screen: above the white card, below bubbles */
	position: absolute;
	z-index: 1;
	right: -10px;
	bottom: 28px;
	width: 176px;
	height: 176px;
	display: grid;
	place-items: center;
}

.features__mascot-img {
	position: relative;
	z-index: 1;
	width: 176px;
	height: 176px;
	display: block;
	border-radius: 50%;
}

.features__wave {
	position: absolute;
	inset: 0;
	border: 1.5px solid #9fd4f5;
	border-radius: 50%;
	pointer-events: none;
	opacity: 0;
	animation: features-wave 3s linear infinite;
}

.features__wave--1 {
	animation-delay: 0s;
}

.features__wave--2 {
	animation-delay: 1s;
}

.features__wave--3 {
	animation-delay: 2s;
}

@keyframes features-wave {
	0% {
		transform: scale(1);
		opacity: 0.55;
	}
	100% {
		transform: scale(1.48);
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.features__wave {
		animation: none;
		opacity: 0.35;
		transform: scale(1.12);
	}

	.features__wave--2 {
		transform: scale(1.24);
		opacity: 0.22;
	}

	.features__wave--3 {
		transform: scale(1.36);
		opacity: 0.12;
	}

	.features__item-panel {
		transition: none;
	}
}

.features__content {
	flex: 1;
	min-width: 0;
}

.features h2 {
	font-size: var(--fs-h2);
	font-weight: 600;
	line-height: 1.1;
	max-width: 18ch;
	margin-bottom: 35px;
	color: #201f24;
}

.features__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 497px;
}

.features__item {
	margin: 0;
}

.features__summary {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding: 8px;
	border: none;
	background: transparent;
	cursor: pointer;
	text-align: left;
	font: inherit;
	color: inherit;
}

.features__summary:focus-visible {
	outline: 2px solid #43d3ff;
	outline-offset: 2px;
	border-radius: 8px;
}

.features__icon {
	position: relative;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
}

.features__icon svg {
	position: absolute;
	inset: 0;
	width: 40px;
	height: 40px;
	display: block;
	transition: opacity 0.2s ease;
}

.features__icon-plus,
.features__icon-minus {
	opacity: 0;
	visibility: hidden;
}

.features__item:not(.is-open) .features__icon-plus,
.features__item.is-open .features__icon-minus {
	opacity: 1;
	visibility: visible;
}

.features__item-title {
	font-size: 1.75rem;
	font-weight: 500;
	line-height: 1.5;
	color: #141212;
}

.features__item-panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.4s ease;
}

.features__item.is-open .features__item-panel {
	grid-template-rows: 1fr;
}

.features__item-panel-inner {
	overflow: hidden;
	min-height: 0;
}

.features__item-body {
	padding: 0 8px 8px 64px;
}

.features__item-description {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.5;
	color: #141212;
	opacity: 0.6;
	max-width: 292px;
}

@media (max-width: 1100px) {
	.features__inner {
		padding-inline: 64px;
	}
}

@media (max-width: 900px) {
	.features__inner {
		flex-direction: column;
		align-items: flex-start;
		/* Pull the chat mockup up against the accordion */
		gap: 16px;
		padding-inline: 40px;
	}

	.features h2 {
		max-width: none;
	}

	/* Figma's tablet/mobile variant puts the chat mockup below the text
	   (not above, like desktop), and swaps the tall phone silhouette for a
	   shorter, wider card — so this isn't just a scaled-down desktop
	   layout, it's a different composition. Reorder via flex `order`
	   (keeping DOM order, since it's all aria-hidden anyway) and resize
	   the card + reposition its contents to match. */
	.features__illustration {
		order: 1;
	}

	.features__phone {
		width: 100%;
		height: 250px;
	}

	.features__phone-screen {
		left: 50%;
		top: 24px;
		transform: translateX(-50%);
		width: 271px;
		height: 225px;
		border-radius: 19px;
		border-width: 4px;
	}

	.features__user {
		left: -29px;
		top: 14px;
		gap: 10px;
	}

	.features__avatar {
		width: 60px;
		height: 60px;
	}

	.features__username {
		font-size: 0.625rem;
	}

	.features__bubble {
		padding: 8px;
	}

	.features__bubble p {
		font-size: 0.65rem;
	}

	.features__bubble--user {
		left: -4px;
		top: 79px;
		width: 110px;
		border-radius: 0 14px 14px 14px;
	}

	.features__bubble--ai {
		left: 62px;
		top: 120px;
		width: 113px;
		border-radius: 14px 0 14px 14px;
	}

	.features__mascot {
		/* Anchored to the card (now a child of phone-screen): peeks from
		   the right edge, still under the bubbles via z-index: 1 */
		left: 135px;
		top: 16px;
		right: auto;
		bottom: auto;
		width: 126px;
		height: 126px;
	}

	.features__mascot-img {
		width: 126px;
		height: 126px;
	}
}

/* --- Steps ---------------------------------------------------------------- */
.steps {
	/* Figma: title flush to frame top; previous section supplies the gap */
	padding-block: 0 calc(var(--section-spacing) * 2);
}

.steps h2 {
	font-size: var(--fs-h2);
	font-weight: 600;
	max-width: 21ch;
	margin-bottom: 32px;
}

.steps__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.steps__item {
	background: var(--color-bg-subtle);
	border-radius: var(--radius-md);
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.steps__number {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 3.5rem;
	opacity: 0.4;
	color: #5999f1;
}

.steps__item:nth-child(2) .steps__number {
	color: #974d00;
}

.steps__item:nth-child(3) .steps__number {
	color: #0a570f;
}

.steps__title {
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1.2;
	margin-top: -12px;
}

.steps__description {
	font-size: 1.125rem;
	color: var(--color-text);
	opacity: 0.7;
	line-height: 1.4;
}

/* --- Personas -------------------------------------------------------------- */
.personas {
	/* Figma: title at y=0; ~114px below grid before social */
	padding-block: 0 calc(var(--section-spacing) * 2);
}

.personas h2 {
	font-size: var(--fs-h2);
	font-weight: 600;
	line-height: 1.2;
	max-width: 18ch;
	margin-bottom: 32px;
}

.personas__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px;
}

.persona-card {
	position: relative;
	border-radius: var(--radius-md);
	overflow: hidden;
	aspect-ratio: 584 / 343;
	padding: 24px;
}

.persona-card--blue {
	background: var(--gradient-persona-blue);
}

.persona-card--orange {
	background: var(--gradient-persona-orange);
}

.persona-card--green {
	background: var(--gradient-persona-green);
}

.persona-card--peach {
	background: var(--gradient-persona-peach);
}

.persona-card__text {
	position: relative;
	z-index: 2;
	max-width: 92%;
}

.persona-card__text h3 {
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.5;
	margin-bottom: 8px;
	color: #141212;
}

.persona-card__text p {
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.5;
	color: #000;
}

.persona-card__media {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.persona-card__media-item {
	position: absolute;
	object-fit: cover;
	display: block;
}

/* Card 1 — video call (Figma absolute layout) */
.persona-call {
	position: absolute;
	left: 21.23%;
	right: 21.23%;
	top: 39.07%;
	bottom: 2.37%;
}

.persona-call__window {
	position: absolute;
	left: 4.2%;
	top: 0;
	width: 95.8%;
	height: 93.5%;
	border-radius: 16px;
	background: linear-gradient(234deg, #3782d2 2%, rgba(255, 255, 255, 0) 96%);
}

.persona-call__dots {
	position: absolute;
	left: 7.7%;
	top: 5%;
	width: 11.3%;
	height: auto;
	z-index: 2;
	display: block;
}

.persona-call__photo {
	position: absolute;
	width: 26.2%;
	aspect-ratio: 1;
	border-radius: 12px;
	overflow: hidden;
	z-index: 1;
	box-sizing: border-box;
}

.persona-call__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* PNG exports include baked black rounded corners — zoom past them */
	transform: scale(1.22);
	transform-origin: center;
}

.persona-call__photo--tl {
	left: 45.5%;
	top: 2.5%;
}

.persona-call__photo--tl img {
	object-position: 45% 45%;
}

.persona-call__photo--tr {
	left: 72.3%;
	top: 2.5%;
}

.persona-call__photo--tr img {
	object-position: 35% 40%;
}

.persona-call__photo--bl {
	left: 45.5%;
	top: 47.3%;
}

.persona-call__photo--bl img {
	object-position: 45% 45%;
}

.persona-call__photo--br {
	left: 72.3%;
	top: 47.3%;
}

.persona-call__photo--br img {
	object-position: center;
}

.persona-call__photo--active {
	border: 2px solid #48ff88;
}

.persona-call__controls {
	position: absolute;
	left: 50%;
	top: 84%;
	transform: translateX(-50%);
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 10px;
	border-radius: 64px;
	background: rgba(255, 255, 255, 0.48);
}

.persona-call__controls img {
	width: 19px;
	height: 19px;
	display: block;
}

.persona-call__mascot {
	position: absolute;
	left: 0;
	top: 33%;
	width: 38.4%;
	height: auto;
	z-index: 2;
	display: block;
}

/* Card 2 */
.persona-chat {
	/* Same coordinate space as the card on desktop, so existing % still work */
	position: absolute;
	inset: 0;
}

.persona-card__media-item--avatar-2 {
	left: 5%;
	top: 48%;
	width: 21.6%;
	aspect-ratio: 1;
	height: auto;
	border-radius: 50%;
	object-fit: cover;
}

.persona-card__media-item--mascot-2 {
	left: 64%;
	top: 42%;
	width: 22.3%;
	height: auto;
	object-fit: contain;
}

.persona-bubble {
	position: absolute;
	z-index: 2;
	background: #fff;
	padding: 14px;
	font-family: var(--font-mono-chat);
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.65;
	box-shadow: 0 8px 24px rgba(137, 93, 18, 0.08);
}

.persona-bubble p {
	margin: 0;
}

.persona-bubble--ask {
	left: 23.5%;
	top: 37.3%;
	width: 33%;
	color: #8b8b8b;
	border-radius: 21px 21px 21px 0;
}

.persona-bubble--reply {
	left: 33.6%;
	top: 65.6%;
	width: 36%;
	color: #000;
	border-radius: 21px 0 21px 21px;
}

/* Card 3 */
.persona-voice {
	position: absolute;
	inset: 0;
}

.persona-card__media-item--mascot-3 {
	left: 26%;
	top: 45.7%;
	width: 22.7%;
	height: auto;
	object-fit: contain;
}

.persona-card__media-item--avatar-3 {
	left: 73.5%;
	top: 19.5%;
	width: 22%;
	aspect-ratio: 1;
	height: auto;
	border-radius: 50%;
	border: 2px solid #fff;
	object-fit: cover;
	z-index: 2;
}

.persona-panel {
	position: absolute;
	left: 50.9%;
	top: 42.9%;
	width: 32%;
	height: 74.3%;
	border-radius: 24px;
	border: 1px solid #fff;
	background: rgba(255, 255, 255, 0.21);
	/* visible so .persona-panel__hello can overhang the sheet/panel edges */
	overflow: visible;
}

.persona-panel__sheet {
	position: absolute;
	left: 50%;
	top: 8%;
	transform: translateX(-50%);
	width: 96%;
	height: 88%;
	background: #fff;
	border-radius: 15px 15px 0 0;
	padding: 10px 8px 8px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	box-sizing: border-box;
	overflow: visible;
}

.persona-panel__title {
	margin: 0;
	text-align: center;
	font-size: 0.725rem;
	font-weight: 600;
	opacity: 0.3;
	letter-spacing: -0.02em;
}

.persona-panel__hello {
	display: flex;
	align-items: center;
	gap: 6px;
	/* Figma: Hello bar sticks out past the white sheet on both sides */
	width: calc(100% + 32px);
	margin-left: -16px;
	margin-right: -16px;
	padding: 5px 8px;
	border-radius: 10px;
	border: 1px solid #fff;
	background: linear-gradient(90deg, #b9e5fe, #dcf2ff);
	font-family: var(--font-mono-brand);
	font-size: 1.05rem;
	font-weight: 500;
	box-sizing: border-box;
	flex-shrink: 0;
}

.persona-panel__hello img {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	display: block;
	object-fit: contain;
}

.persona-panel__msg {
	display: flex;
	align-items: flex-start;
	gap: 4px;
	padding: 4px 8px 4px 4px;
	border-radius: 16px;
	background: #f0f0f0;
	font-family: var(--font-mono-chat);
	font-size: 0.51rem;
	line-height: 1.3;
	color: #1f1f1f;
}

.persona-panel__msg img {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	margin-top: 1px;
	display: block;
	object-fit: contain;
}

/* Card 4 */
.persona-streak {
	position: absolute;
	inset: 0;
}

.persona-card__media-item--avatar-4 {
	left: 69.2%;
	top: 46.1%;
	width: 36.8%;
	aspect-ratio: 1;
	height: auto;
	border-radius: 50%;
	border: 2px solid #fff;
	object-fit: cover;
	z-index: 1;
}

.persona-card__media-item--mascot-4 {
	left: 23.1%;
	top: 50.2%;
	width: 26.5%;
	height: auto;
	object-fit: contain;
	opacity: 0.85;
	z-index: 0;
}

.persona-stat {
	position: absolute;
	z-index: 3;
	left: 53.3%;
	top: 40.2%;
	min-width: 24.7%;
	background: #fff;
	border-radius: 24px;
	padding: 0 16px 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	box-sizing: border-box;
}

.persona-stat__number {
	font-family: var(--font-mono-brand);
	font-weight: 700;
	font-size: clamp(2.5rem, 5.5vw, 4rem);
	line-height: 1;
	color: #1f1f1f;
}

.persona-stat__label {
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.5;
	color: #3da423;
	text-transform: uppercase;
}

.persona-card__nice {
	position: absolute;
	z-index: 2;
	left: 51%;
	top: 72%;
	margin: 0;
	font-family: var(--font-mono-brand);
	font-weight: 500;
	font-size: clamp(1.5rem, 2.8vw, 2.1rem);
	line-height: 1.3;
	color: #fff;
	opacity: 0.5;
}

@media (max-width: 900px) {
	.personas__grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.personas h2 {
		max-width: none;
	}

	/* Stacked composition (Figma tablet/mobile): text in normal flow on
	   top, illustration in its own bottom stage. Desktop % coords were
	   tuned for a wide short card — on a tall single-column card they
	   drift into the copy and pile onto each other. */
	.persona-card {
		display: flex;
		flex-direction: column;
		aspect-ratio: auto;
		min-height: 423px;
		height: auto;
		padding: 24px 24px 0;
		overflow: hidden;
	}

	.persona-card__text {
		max-width: 100%;
		flex-shrink: 0;
	}

	.persona-card__media {
		position: relative;
		inset: auto;
		flex: 1 1 auto;
		min-height: 230px;
		width: calc(100% + 48px);
		margin: 12px -24px 0;
		overflow: hidden;
	}

	/* Card 1 — keep the desktop internal layout (mascot on the LEFT of
	   the window, 2×2 grid on the RIGHT). The broken remapped % placed
	   the mascot on top of the photos. Here we only re-home the whole
	   call block as a centered unit inside the stacked media stage. */
	.persona-card--blue .persona-card__media {
		min-height: 255px;
		overflow: visible;
	}

	.persona-call {
		left: 50%;
		right: auto;
		top: 50%;
		bottom: auto;
		width: 90%;
		max-width: 420px;
		height: auto;
		aspect-ratio: 414 / 248;
		transform: translate(-50%, -50%);
	}

	/* Card 2 — same idea as card 1: one centered composition unit so
	   avatar / bubbles / mascot keep their relative layout instead of
	   stretching across the full tall card (which made bubbles too
	   narrow and text stack word-by-word). */
	.persona-card--orange .persona-card__media {
		min-height: 240px;
		overflow: visible;
	}

	.persona-chat {
		/* Do NOT use `inset: auto` here — it would wipe left/top set above
		   and park the whole composition at 0,0 (clipped off the left). */
		left: 50%;
		right: auto;
		top: 50%;
		bottom: auto;
		width: 94%;
		max-width: 520px;
		height: auto;
		aspect-ratio: 520 / 220;
		transform: translate(-50%, -50%);
	}

	.persona-card__media-item--avatar-2 {
		left: 2%;
		top: 32%;
		width: 24%;
	}

	.persona-card__media-item--mascot-2 {
		left: 68%;
		top: 12%;
		width: 28%;
	}

	.persona-bubble {
		padding: 12px 14px;
		font-size: 1.2375rem;
		line-height: 1.45;
	}

	.persona-bubble--ask {
		left: 24%;
		top: 18%;
		width: 36%;
		border-radius: 18px 18px 18px 0;
	}

	.persona-bubble--reply {
		top: 63%;
        left: 30%;
		width: 40%;
		border-radius: 18px 0 18px 18px;
	}

	/* Card 3 — centered composition; Hello bar must stay unclipped */
	.persona-card--green .persona-card__media {
		min-height: 250px;
		overflow: visible;
	}

	.persona-voice {
		left: 50%;
		right: auto;
		top: 50%;
		bottom: auto;
		width: 94%;
		max-width: 480px;
		height: auto;
		aspect-ratio: 480 / 280;
		transform: translate(-50%, -50%);
	}

	.persona-card__media-item--mascot-3 {
		left: -23px;
		top: 28%;
		width: 34%;
	}

	.persona-card__media-item--avatar-3 {
		left: auto;
		right: -2%;
		top: 0;
		width: 30%;
	}

	.persona-panel {
		left: 30%;
		top: 16%;
		width: 46%;
		height: 92%;
		border-radius: 18px;
	}

	.persona-panel__sheet {
		height: 90%;
		padding: 8px 6px 6px;
		gap: 6px;
	}

	.persona-panel__title {
		font-size: 0.625rem;
	}

	.persona-panel__hello {
		width: calc(100% + 24px);
		margin-left: -12px;
		margin-right: -12px;
		font-size: 0.875rem;
		padding: 4px 6px;
	}

	.persona-panel__hello img {
		width: 14px;
		height: 14px;
	}

	.persona-panel__msg {
		font-size: 0.5625rem;
		padding: 3px 6px 3px 3px;
	}

	.persona-panel__msg img {
		width: 12px;
		height: 12px;
	}

	/* Card 4 — Figma: tight bottom cluster — avatar clipped bottom-right,
	   mascot beside it (not flush to the left), streak badge overlapping both */
	.persona-card--peach .persona-card__media {
		min-height: 250px;
		overflow: hidden;
	}

	.persona-streak {
		left: 0;
		top: 0;
		right: auto;
		bottom: auto;
		width: 100%;
		height: 100%;
		transform: none;
	}

	.persona-card__media-item--avatar-4 {
		left: auto;
		right: -8%;
		top: auto;
		bottom: -16%;
		width: 44%;
	}

	.persona-card__media-item--mascot-4 {
		left: 5%;
        top: 83px;
		bottom: -2%;
		width: 30%;
	}

	.persona-stat {
		left: 44%;
        top: 26px;
		min-width: 28%;
		padding: 0 14px 6px;
		border-radius: 20px;
	}

	.persona-stat__number {
		font-size: clamp(6rem, 6vw, 2.75rem);
	}

	.persona-stat__label {
		font-size: 1.3rem;
	}

	.persona-card__nice {
		left: 39%;
        top: 177px;
        bottom: 18%;
        font-size: 3rem;
	}
}

/* Tablet only — roomier chat type in the green persona card */
@media (min-width: 641px) and (max-width: 900px) {
	.persona-panel__hello {
		font-size: 1.05rem;
		padding: 6px 10px;
	}

	.persona-panel__hello img {
		width: 18px;
		height: 18px;
	}

	.persona-panel__msg {
		font-size: 0.7rem;
		padding: 5px 8px 5px 4px;
		line-height: 1.35;
	}

	.persona-panel__msg img {
		width: 15px;
		height: 15px;
	}

	.persona-panel__title {
		font-size: 0.75rem;
	}
}

/* --- Social proof ----------------------------------------------------------- */
.social-proof {
	/* Figma: ~80px top/bottom around muted band */
	padding-block: 80px;
	background: var(--color-bg-muted);
	overflow: hidden;
}

.social-proof__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	margin-bottom: 40px;
}

.social-proof h2 {
	font-size: var(--fs-h2);
	font-weight: 600;
	line-height: 1.2;
	max-width: 14ch;
	margin: 0;
	flex-shrink: 0;
}

.avatar-strip-wrap {
	position: relative;
	flex: 1;
	min-width: 0;
	max-width: 514px;
	margin-left: auto;
	margin-inline: 0px;
}

.avatar-strip-wrap::before,
.avatar-strip-wrap::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 72px;
	z-index: 1;
	pointer-events: none;
}

.avatar-strip-wrap::before {
	left: 0;
	background: linear-gradient(90deg, var(--color-bg-muted) 6%, rgba(250, 249, 247, 0) 95%);
}

.avatar-strip-wrap::after {
	right: -2px;
	background: linear-gradient(270deg, var(--color-bg-muted) 6%, rgba(250, 249, 247, 0) 95%);
}

.avatar-strip {
	display: flex;
	align-items: center;
}

.avatar-strip li {
	width: 56px;
	height: 56px;
	margin-left: -10px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
}

.avatar-strip li:first-child {
	margin-left: 0;
}

.avatar-strip img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Floating/marquee testimonial strip (Pingo-style): the track's content is
   rendered twice in the markup and this animates translateX(0 → -50%), so
   the second half lines up exactly where the first started — a seamless,
   endless loop with no JS. */
.testimonials-wrap {
	position: relative;
	overflow: hidden;
	padding: 24px 0 24px;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

.testimonials {
	display: flex;
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
	width: max-content;
	animation: testimonials-marquee var(--testimonials-marquee-duration, 40s) linear infinite;
}

.testimonials-wrap:hover .testimonials,
.testimonials-wrap:focus-within .testimonials {
	animation-play-state: paused;
}

@keyframes testimonials-marquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.testimonials {
		animation: none;
	}
}

.testimonial-card {
	flex: 0 0 470px;
	width: 470px;
	background: #fff;
	border-radius: var(--radius-md);
	padding: 24px;
	box-shadow: 0 4px 28px rgba(0, 0, 0, 0.08);
	box-sizing: border-box;
}

@media (max-width: 600px) {
	.testimonial-card {
		flex-basis: 320px;
		width: 320px;
	}
}

.testimonial-card blockquote {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.testimonial-card__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
}

.testimonial-card__name {
	font-style: normal;
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.5;
	color: #141212;
}

.testimonial-card__rating {
	flex-shrink: 0;
	width: 96px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
}

.testimonial-card__stars {
	display: flex;
	gap: 4px;
	align-items: center;
}

.testimonial-card__stars img {
	width: 16px;
	height: 16px;
	display: block;
}

.testimonial-card__source {
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.5;
	color: #161414;
}

.testimonial-card__review {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
	color: #141212;
}

.testimonial-card__source-link {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.4;
	word-break: break-all;
}

.testimonial-card__source-link a {
	color: #5a5a5a;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.testimonial-card__source-link a:hover {
	color: #141212;
}

/* --- FAQ --------------------------------------------------------------------- */
.faq {
	/* Figma: title ~92px from top; ~129px below accordion */
	padding-block: 92px 128px;
}

.faq h2 {
	font-size: var(--fs-h2);
	font-weight: 600;
	text-align: center;
	margin-bottom: 24px;
}

.faq__list {
	max-width: 758px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.faq__item {
	background: var(--color-bg-subtle);
	border-radius: var(--radius-lg);
	padding: 4px 8px 4px 24px;
}

.faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding-block: 14px;
	padding-inline: 0;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 1.25rem;
	font-weight: 600;
	text-align: left;
	color: inherit;
	cursor: pointer;
}

.faq__question img {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	transition: transform 0.35s ease;
}

.faq__item.is-open .faq__question img {
	transform: rotate(45deg);
}

.faq__answer {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.4s ease;
}

.faq__item.is-open .faq__answer {
	grid-template-rows: 1fr;
}

.faq__answer-inner {
	overflow: hidden;
	min-height: 0;
}

.faq__answer p {
	margin: 0;
	padding-bottom: 20px;
	padding-right: 16px;
	color: var(--color-text-muted);
}

/* --- Final CTA ----------------------------------------------------------------- */
.cta {
	/* Figma: content near top (~16px); ~101px before footer */
	padding-block: 16px 100px;
}

.cta__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 64px;
}

.cta__mascot {
	width: 280px;
	flex-shrink: 0;
}

.cta__mascot-img {
	display: block;
	width: 100%;
	height: auto;
}

.cta__mascot-img--mobile {
	display: none;
}

.cta__content {
	max-width: 560px;
}

.cta h2 {
	font-size: var(--fs-h2);
	font-weight: 600;
	margin-bottom: 16px;
}

.cta__subtitle {
	font-size: 1.25rem;
}

/* --- Fallback content (non-landing pages) --------------------------------------- */
.falabola-plain-content {
	padding-block: var(--section-spacing);
	max-width: 760px;
}

.falabola-plain-content h1 {
	font-size: var(--fs-h1);
	margin-bottom: 24px;
}

/* ==========================================================================
   6. Responsive breakpoints
   --------------------------------------------------------------------------
   Tablet ≈ Figma "Tablet" frame (768 wide); mobile ≈ Figma "Mobile" frame
   (390 wide). Copy stays exactly as on desktop everywhere — the "Perfect
   for those who..." heading/body and the testimonial cards keep their
   desktop text/fields even where the Figma tablet/mobile mockups show
   shorter copy or extra reviewer fields (score/name) — only layout,
   spacing and the header nav pattern change per breakpoint.
   ========================================================================== */

/* --- Tablet (≤1024px) ----------------------------------------------------- */
@media (max-width: 1024px) {
	:root {
		--section-spacing: 48px;
	}

	/* Header: drop the desktop's asymmetric inset for the standard container gutter */
	.site-header__inner {
		padding-inline: var(--container-padding);
	}

	.site-header__nav a {
		padding-inline: 18px;
	}

	/* Hero: tighter inset, closer-in rating badge, no decorative sparkles,
	   and a bigger wordmark than the desktop clamp produces at this width */
	.hero__inner {
		padding: 40px 40px 48px;
		min-height: auto;
	}

	.hero__sparkle {
		display: none;
	}

	.hero__rating {
		top: 24px;
		right: 24px;
	}

	.hero__brand {
		margin: 83px 0 0;
	}

	.hero__wordmark {
		/* 13vw never exceeds 8.5rem within 641–1024px, so this was a fixed
		   size in practice anyway — kept as a plain value for clarity */
		font-size: 8.5rem;
	}

	.hero__title {
		font-size: 3em;
	}

	/* Language tabs (the flag pills under the hero): ~10% smaller than desktop */
	.language-strip-carousel .language-strip {
		gap: 17px;
	}

	.language-strip-carousel .language-strip__item {
		gap: 13px;
		padding: 17px 23px;
		font-size: 1.373rem;
	}

	.language-strip-carousel .language-strip__item img {
		width: 24px;
		height: 24px;
	}

	/* Social proof: stack the heading above the avatar strip */
	.social-proof {
		padding-block: 56px;
	}

	.social-proof__header {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
		margin-bottom: 32px;
	}

	.avatar-strip-wrap {
		max-width: 100%;
		margin-left: 0;
	}

	/* FAQ */
	.faq {
		padding-block: 64px 80px;
	}

	/* Final CTA: stack the mascot above the copy, centered */
	.cta {
		padding-block: 16px 64px;
	}

	.cta__inner {
		flex-direction: column;
		text-align: center;
		gap: 32px;
	}

	.cta__mascot-img--desktop {
		display: none;
	}

	.cta__mascot-img--mobile {
		display: block;
	}

	.cta__content {
		max-width: 480px;
	}

	.cta .store-buttons {
		justify-content: center;
	}
}

/* --- Mobile (≤640px) ------------------------------------------------------- */
@media (max-width: 640px) {
	:root {
		--section-spacing: 40px;
		--container-padding: 20px;
	}

	/* Header: swap the inline nav for a hamburger + dropdown panel */
	.site-header {
		padding-block: 16px;
	}

	.site-header__menu-toggle {
		display: inline-flex;
	}

	.site-header__nav {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		z-index: 20;
		display: none;
		background: var(--color-bg);
		border-bottom: 1px solid var(--color-border);
		box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1);
	}

	.site-header__nav.is-open {
		display: block;
	}

	.site-header__nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
		padding: 12px var(--container-padding) 20px;
	}

	.site-header__nav a {
		justify-content: flex-start;
		padding: 12px 16px;
		border-radius: var(--radius-sm);
	}

	/* Hero: static (not corner-pinned) rating badge; everything (rating,
	   logo+title group, description, buttons) stays centered as a column.
	   See .hero__headline for how the logo and title share a left edge. */
	.hero {
		padding-block: 0 40px;
	}

	.hero__inner {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 32px 20px 36px;
		text-align: center;
	}

	.hero__rating {
		/* relative (not static) so .hero__rating-laurel's absolute
		   positioning stays anchored to this badge, not the whole hero card;
		   top/right reset to 0/auto since the tablet rule's offsets would
		   otherwise still apply and push this down and off-center */
		position: relative;
		top: 0;
		right: auto;
		width: 110px;
		height: 62px;
		margin-bottom: 8px;
	}

	.hero__rating-laurel {
		width: 24px;
		height: 38px;
	}

	.hero__rating-laurel--left {
		left: 5px;
	}

	.hero__rating-laurel--right {
		right: 5px;
	}

	.hero__rating-label {
		font-size: 8px;
	}

	.hero__rating-value {
		font-size: 19px;
	}

	.hero__rating-stars {
		width: 46px;
		height: 9px;
		margin-top: 1px;
	}

	.hero__headline {
		/* Shrinks to fit whichever of the two children (logo or the
		   currently-typed phrase) is wider, and left-aligns them inside
		   that box — so their left edges always match exactly, no matter
		   which phrase is showing. The box itself then gets centered as a
		   single unit by .hero__inner's align-items: center. */
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		margin: 50px 0;
	}

	.hero__brand {
		margin-top: 0;
	}

	.hero__wordmark {
		/* Tablet bumps this up; restore the desktop clamp (its min bound is
		   what mobile has always used) instead of inheriting the bigger size */
		font-size: clamp(4.5rem, 11.4vw, 10.292rem);
	}

	.hero__title {
		margin-top: 4px;
		font-size: 1.75rem;
		max-width: none;
	}

	.hero__description {
		margin-top: 12px;
		max-width: 34ch;
		margin-inline: auto;
		font-size: 0.9375rem;
	}

	/* Language tabs (the flag pills under the hero): ~25% smaller than desktop */
	.language-strip-carousel .language-strip {
		gap: 14px;
	}

	.language-strip-carousel .language-strip__item {
		gap: 11px;
		padding: 14px 20px;
		font-size: 1.144rem;
	}

	.language-strip-carousel .language-strip__item img {
		width: 20px;
		height: 20px;
	}

	.hero .store-buttons {
		justify-content: center;
		margin-top: 28px;
	}

	.store-button {
		width: 154px;
		height: 46px;
		padding: 0 14px 0 16px;
		gap: 8px;
	}

	.store-button__icon {
		width: 24px;
		height: 27px;
	}

	.store-button--apple .store-button__icon {
		width: 22px;
	}

	.store-button__eyebrow {
		font-size: 11px;
	}

	.store-button__name {
		font-size: 15px;
	}

	.store-button--apple .store-button__name {
		font-size: 16px;
	}

	/* Features */
	.features__inner {
		padding-inline: var(--container-padding);
		gap: 0px;
	}

	.features__illustration {
		width: 100%;
		max-width: 328px;
		align-self: center;
	}

	.features__item-title {
		font-size: 1.375rem;
	}

	.features__item-description {
		font-size: 1.0625rem;
	}

	/* Steps: single column */
	.steps__list {
		grid-template-columns: 1fr;
	}

	/* Personas: keep the stacked layout from ≤900px; bump min-height to
	   match Figma's 438px mobile cards */
	.persona-card {
		min-height: 438px;
	}

	.persona-card__text h3 {
		font-size: 1.375rem;
	}

	.persona-card__media {
		min-height: 215px;
	}

	.persona-card--blue .persona-card__media {
		min-height: 240px;
	}

	.persona-card--orange .persona-card__media {
		min-height: 220px;
	}

	.persona-card--green .persona-card__media {
		min-height: 240px;
		/* Clip the panel where it exits past the bottom of the card */
		overflow: hidden;
	}

	.persona-call {
		width: 94%;
		max-width: none;
	}

	.persona-chat {
		width: 96%;
		max-width: none;
		aspect-ratio: 340 / 160;
	}

	.persona-voice {
		left: 0;
		top: 64px;
		right: auto;
		bottom: auto;
		width: 100%;
		max-width: none;
		height: 100%;
		aspect-ratio: auto;
		transform: none;
	}

	.persona-card__media-item--mascot-3 {
		left: -2%;
		top: 20%;
		width: 33%;
	}

	.persona-card__media-item--avatar-3 {
		right: 4%;
		top: -43px;
		width: 32%;
	}

	/* Figma mobile: white window sits low and is cropped by the card bottom */
	.persona-panel {
		left: 33%;
		top: 6%;
		width: 46%;
		height: 112%;
		border-radius: 20px;
		background: #fff;
		border: none;
	}

	.persona-panel__sheet {
		left: 50%;
		top: 6%;
		transform: translateX(-50%);
		width: 96%;
		height: 90%;
		border-radius: 16px 16px 0 0;
		padding: 10px 8px 8px;
	}

	.persona-panel__hello {
		width: calc(100% + 28px);
		margin-left: -16px;
		margin-right: -12px;
	}

	/* Card 4 mobile: same cluster, slightly more bleed past the edges */
	.persona-card--peach .persona-card__media {
		min-height: 230px;
		overflow: hidden;
	}

	.persona-card__media-item--avatar-4 {
		right: -14%;
        bottom: -4%;
        width: 55%;
	}

	.persona-card__media-item--mascot-4 {
		left: 1%;
        bottom: -6%;
        width: 36%;
	}

	.persona-stat {
		left: 36%;
        top: 22%;
		min-width: 32%;
		padding: 0 12px 5px;
		border-radius: 18px;
	}

	.persona-stat__number {
		font-size: 3rem;
	}

	.persona-stat__label {
		font-size: 0.825rem;
	}

	.persona-card__nice {
		left: 35%;
		top: auto;
		bottom: 22%;
		font-size: 1.5rem;
	}

	.persona-bubble {
		padding: 10px 12px;
		font-size: 0.8125rem;
	}

	.persona-bubble--ask {
		width: 40%;
		top: calc(18% - 7px);
	}

	.persona-bubble--reply {
		width: 48%;
	}

	/* Social proof */
	.social-proof {
		padding-block: 40px;
	}

	.testimonial-card {
		padding: 20px;
	}

	/* FAQ */
	.faq {
		padding-block: 48px 56px;
	}

	.faq__item {
		padding: 4px 4px 4px 16px;
	}

	.faq__question {
		font-size: 1.0625rem;
	}

	/* Final CTA */
	.cta__mascot {
		width: 180px;
	}

	.cta .store-buttons .store-button {
		width: 154px;
	}

	/* Footer */
	.site-footer {
		padding-block: 40px;
	}

	.site-footer__inner {
		gap: 24px;
	}

	.site-footer__main {
		flex-direction: column;
		gap: 24px;
	}

	.site-footer__menu {
		flex-direction: column;
		gap: 24px;
	}

	.site-footer__logo {
		width: 160px;
	}

	.language-strip--footer {
		gap: 8px;
	}
}

/* ==========================================================================
   7. Blog templates (single post) — desktop baseline
   --------------------------------------------------------------------------
   Figma "blog" tab, node 177:981. `.article-body` typography is written to
   also cover the *real* legacy post markup (see BLOG-TEMPLATE-BRIEF.md §2.2)
   — plain tags, occasional inline styles, no classes — not just the clean
   demo copy in Figma. Tablet/mobile overrides live in section 8, at the
   bottom of this file.
   ========================================================================== */

/* Shared 1440-wide shell (170px gutters) — the blog's own layout scale,
   separate from the landing's `.container` (1200px / 24px gutters). */
.article-shell {
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: 170px;
}

/* --- Blog header (separate from .site-header — see brief §1) ------------
   One <header> owns both rows (template-parts/blog/header.php) so every
   blog template gets both for free instead of assembling them per file.
   Deliberately wider than .article-shell (1440px) so the chrome reads as
   its own top-level row rather than being clamped to the reading column
   underneath it — an adequate "wider than content" max, not full-bleed. */
.blog-header {
	--blog-header-width: 1680px;
	--blog-header-top-height: 60px;
	background: var(--color-bg);
	/* Reserve the fixed top row's height in document flow so the category
	   nav starts below it instead of sliding underneath. */
	padding-top: var(--blog-header-top-height);
}

/* Logo + language row stays pinned for the whole page scroll — not sticky
   (sticky would only last while .blog-header itself is on screen). */
.blog-header__sticky {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	background: var(--color-bg);
	border-bottom: 1px solid #efefef;
}

.blog-header__row {
	max-width: var(--blog-header-width);
	margin-inline: auto;
	padding-inline: 88px;
}

.blog-header__top {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--blog-header-top-height);
}

.blog-header__logo {
	font-family: var(--font-mono-brand);
	font-weight: 700;
	font-size: 2rem; /* 32px */
	color: var(--color-nav);
}

.blog-header__lang-list {
	display: flex;
	align-items: center;
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.blog-header__lang-list a {
	display: block;
	font-weight: 500;
	font-size: 1.25em;
	color: var(--color-nav);
	opacity: 1;
	transition: opacity 0.2s ease;
}

.blog-header__lang-list a:hover {
	opacity: 0.55;
}

/* "Другие языки ▾" — top-level parent with a flyout of the remaining
   language pages (Figma 177:981). Chevron via ::after so editors don't
   have to bake an icon into the menu item title. */
.blog-header__lang-list > .menu-item-has-children {
	position: relative;
}

.blog-header__lang-list > .menu-item-has-children > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.blog-header__lang-list > .menu-item-has-children > a::after {
	content: '';
	display: block;
	width: 7px;
	height: 7px;
	margin-top: -3px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	opacity: 0.7;
	transition: transform 0.15s ease;
}

.blog-header__lang-list > .menu-item-has-children.is-open > a::after {
	margin-top: 2px;
	transform: rotate(225deg);
}

.blog-header__lang-list .sub-menu {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	z-index: 30;
	display: none;
	flex-direction: column;
	gap: 0;
	min-width: 200px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	box-shadow: 0 12px 28px rgba(13, 10, 56, 0.1);
}

.blog-header__lang-list > .menu-item-has-children.is-open > .sub-menu,
.blog-header__lang-list > .menu-item-has-children:focus-within > .sub-menu {
	display: flex;
}

.blog-header__lang-list .sub-menu a {
	display: block;
	padding: 10px 14px;
	border-radius: var(--radius-sm);
	font-size: 1.25em;
	opacity: 1;
	white-space: nowrap;
}

.blog-header__lang-list .sub-menu a:hover {
	opacity: 0.55;
	background: var(--color-bg-subtle);
}

/* Hamburger toggle: hidden on desktop/tablet, shown + wired up on mobile
   (see the ≤640px block below) — mirrors .site-header__menu-toggle
   (initMobileNav() in main.js drives both generically), placed at the
   header's trailing edge instead of between logo and nav. */
.blog-header__menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	flex-shrink: 0;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: var(--color-nav);
	transition: background-color 0.15s ease;
}

.blog-header__menu-toggle:hover {
	background: var(--color-bg-subtle);
}

.blog-header__menu-icon {
	position: relative;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
}

.blog-header__menu-icon svg {
	position: absolute;
	inset: 0;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.blog-header__menu-icon-close {
	opacity: 0;
	transform: scale(0.6);
}

.blog-header__menu-toggle[aria-expanded='true'] .blog-header__menu-icon-bars {
	opacity: 0;
	transform: scale(0.6);
}

.blog-header__menu-toggle[aria-expanded='true'] .blog-header__menu-icon-close {
	opacity: 1;
	transform: scale(1);
}

/* --- Category nav row (Skyeng pattern) ------------------------------------
   Same left edge as the logo row; scrolls away under the sticky top row.
   Bottom rule matches the sticky row's border above it. */
.blog-category-nav {
	border-bottom: 1px solid #efefef;
}

.blog-category-nav__inner {
	position: relative;
	max-width: var(--blog-header-width, 1680px);
	margin-inline: auto;
	padding-inline: 88px;
}

.blog-category-nav__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.blog-category-nav__viewport::-webkit-scrollbar {
	display: none;
}

.blog-category-nav__list {
	display: flex;
	align-items: center;
	gap: 32px;
	width: max-content;
	margin: 0;
	padding: 15px 0;
	list-style: none;
	white-space: nowrap;
	font-weight: 500;
	font-size: 1.15em;
	color: var(--color-nav);
}

.blog-category-nav__list a {
	display: block;
	color: inherit;
	opacity: 1;
	transition: opacity 0.2s ease;
}

.blog-category-nav__list a:hover {
	opacity: 0.55;
}

/* Light edge fade — hints that the row scrolls when it doesn't fit; JS
   (initCategoryNav) toggles `.is-at-start` / `.is-at-end` on the nav so the
   fade only shows on the side that actually has more content. */
.blog-category-nav__fade {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 40px;
	pointer-events: none;
	opacity: 1;
	transition: opacity 0.2s ease;
}

.blog-category-nav__fade--start {
	left: 88px;
	background: linear-gradient(to right, var(--color-bg), rgba(255, 255, 255, 0));
}

.blog-category-nav__fade--end {
	right: 88px;
	background: linear-gradient(to left, var(--color-bg), rgba(255, 255, 255, 0));
}

.blog-category-nav.is-at-start .blog-category-nav__fade--start,
.blog-category-nav.is-at-end .blog-category-nav__fade--end {
	opacity: 0;
}

/* --- Two-column layout: content + sidebar -------------------------------- */
.article-layout {
	display: flex;
	align-items: flex-start;
	gap: 60px;
	padding-block: 32px 80px;
}

.article-layout__content {
	flex: 1 1 740px;
	max-width: 740px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.article-layout__sidebar {
	flex: 0 0 300px;
	width: 300px;
	position: sticky;
	top: 76px; /* clears the fixed blog-header top row (60px) + gap */
	display: flex;
	flex-direction: column;
	gap: 32px;
}

/* Single-column variant (no sidebar) — FAQ/legal document page template
   (page-templates/document.php, Figma node 178:763). .article-layout__content
   already caps at max-width:740px; centering the lone flex item reproduces
   the wider side gutters (px:350 vs. the two-column frame's px:170) without
   a separate width scale. */
.article-layout--single {
	justify-content: center;
}

/* --- Article header: title only ------------------------------------------ */
.article-header {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.article-header__title {
	margin: 0;
	font-weight: 600;
	font-size: 2.5rem; /* 40px */
	line-height: 52px;
	color: var(--color-nav);
}

/* Post-intro strip: reading time · date + share (all viewports) ----------- */
.article-meta-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	padding-block: 4px;
	/* Same size as lead intro (.article-body > p:first-child) */
	font-size: 1.25rem; /* 18px */
	line-height: 31px;
	color: #8b8b8b;
}

.article-meta-bar__facts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.article-meta-bar__dot {
	opacity: 0.7;
}

/* End-of-article author + share (after closing promo) -------------------- */
.article-byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	padding-block: 8px;
}

.article-byline__author {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.article-byline__avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	flex-shrink: 0;
}

.article-byline__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.article-byline__label {
	font-size: 0.75rem;
	color: #8b8b8b;
}

.article-byline__name {
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--color-nav);
}

/* "Обновлено: <дата>" — FAQ/legal document page template's replacement for
   .article-byline (see page-templates/document.php). Same type scale as a
   regular .article-body paragraph, just rendered outside .article-body
   since there's no author/share row around it. */
.article-updated {
	margin: 0;
	font-size: 1rem;
	line-height: 26px;
	color: #1f1f1f;
}

/* Yandex.Share — keep icons in a horizontal row. The meta-bar sits inside
   .article-body, whose ul/li rules would otherwise stack the buttons and
   paint blue list markers on them. Brand fill: Yandex has no custom
   color API, so we tint blackwhite badges with --color-accent-blue.
   Default markup ships L (desktop) + M (mobile); swap via modifiers. */
.article-share {
	flex-shrink: 0;
}

.article-share--mobile {
	display: none;
}

.article-share .ya-share2__list {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap;
	align-items: center;
	gap: 8px;
}

.article-body .article-share ul,
.article-body .article-share ol {
	display: flex;
	flex-direction: row;
	gap: 8px;
}

.article-body .article-share ul > li {
	position: static;
	padding-left: 0;
}

.article-body .article-share ul > li::before {
	content: none;
	display: none;
}

.article-body .article-share a {
	color: inherit;
	text-decoration: none;
}

.article-share .ya-share2__badge {
	background-color: var(--color-accent-blue) !important;
}

/* --- Hero image ------------------------------------------------------------ */
.article-hero-image {
	aspect-ratio: var(--article-image-ratio);
	width: 100%;
	border-radius: var(--radius-md);
	overflow: hidden;
}

.article-hero-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --- Article body: typography for arbitrary post_content ----------------- */
.article-body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	font-size: 1.125rem;
	line-height: 28px;
	color: #1f1f1f;
}

.article-body > p:first-child {
	font-size: 1.25rem; /* 18px */
	line-height: 31px;
}

.article-body h2,
.article-body h3,
.article-body h4 {
	margin-top: 8px;
	color: var(--color-nav);
	font-weight: 600;
	/* keeps sidebar TOC links from tucking the heading under the sticky header */
	scroll-margin-top: 32px;
}

.article-body h2 {
	font-size: 1.75rem; /* 28px */
}

.article-body h3 {
	font-size: 1.375rem; /* 22px */
}

.article-body h4 {
	font-size: 1.125rem; /* 18px */
}

.article-body p {
	margin: 0;
}

.article-body a {
	color: var(--color-accent-blue);
	text-decoration: underline;
	text-decoration-skip-ink: none;
}

/* .button already has its own color/no-underline via .button--dark, but it
   still needs to win over the plain-link rule above when a .button ends up
   inside article-body copy (e.g. the in-content promo-card CTA). */
.article-body a.button {
	text-decoration: none;
}

.article-body a.button--dark {
	color: var(--color-text-on-dark);
}

.article-body strong,
.article-body b {
	font-weight: 700;
}

.article-body em,
.article-body i {
	font-style: italic;
}

.article-body ul,
.article-body ol {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.article-body ul > li {
	position: relative;
	padding-left: 20px;
}

.article-body ul > li::before {
	content: '';
	position: absolute;
	left: 2px;
	top: 10px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-accent-blue);
}

.article-body ol {
	counter-reset: article-ol;
}

.article-body ol > li {
	position: relative;
	padding-left: 28px;
}

.article-body ol > li::before {
	counter-increment: article-ol;
	content: counter(article-ol) '.';
	position: absolute;
	left: 0;
	font-weight: 600;
	color: var(--color-nav);
}

.article-body li > ul,
.article-body li > ol {
	margin-top: 8px;
}

/* Old posts wrap the CTA of their inline-styled promo boxes in a bold link;
   nothing else to target since the box itself is fully inline-styled
   (see BLOG-TEMPLATE-BRIEF.md §2.2) — inline `style` always wins over this
   stylesheet anyway, so it renders using its own inline look as-is. */

.article-body blockquote {
	margin: 0;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: var(--color-bg-muted);
	border-left: 3px solid var(--color-accent-blue);
}

.article-body blockquote p {
	margin: 0;
	font-weight: 500;
	font-size: 1.125rem; /* 18px */
	line-height: 28px;
	color: var(--color-nav);
}

.article-body blockquote p:last-child:not(:only-child),
.article-body blockquote cite {
	font-style: normal;
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--color-accent-blue);
}

/* Wide tables (common in old posts) scroll horizontally inside the
   content column instead of blowing out the page — display:block makes
   the <table> itself the overflow container without needing a wrapper
   div around every legacy table. */
.article-body table {
	display: block;
	width: max-content;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-collapse: collapse;
	font-size: 0.875rem;
}

.article-body th,
.article-body td {
	border: 1px solid #efefef;
	padding: 12px;
	text-align: left;
	white-space: nowrap;
}

.article-body th {
	background: var(--color-bg-muted);
	font-weight: 600;
	color: var(--color-nav);
}

.article-body tr:nth-child(even) td {
	background: var(--color-bg-muted);
}

/* Neutral specimen chip — a form/template without a right/wrong verdict.
   Red/green are reserved for <del>/<ins>; the old pink (#cc264d) sat too
   close to --color-danger and read as an error. */
.article-body code {
	font-family: var(--font-mono-chat);
	font-weight: 400;
	color: var(--color-nav);
	background: var(--color-bg-subtle);
	padding: 0.1em 0.35em;
	border-radius: 4px;
}

.article-body pre {
	margin: 0;
	padding: 16px 20px;
	background: #f5f5f5;
	border-radius: var(--radius-sm);
	overflow-x: auto;
}

.article-body pre code {
	color: #333340;
	font-family: var(--font-mono-chat);
	font-weight: 400;
	line-height: 1.8;
	background: none;
	padding: 0;
	border-radius: 0;
}

/* Wrong → right form contrast. Editors mark an incorrect fragment with
   <del> and the replacement with <ins>; colours reuse the landing tokens
   so the pair reads as a quiet correction, not a ❌/✅ badge. Do not wrap
   these in <code> — the pink code colour fights the red/green. */
.article-body del {
	color: var(--color-danger);
	text-decoration: line-through;
	text-decoration-thickness: 1.5px;
	text-decoration-color: currentColor;
}

.article-body ins {
	color: var(--color-success);
	text-decoration: none;
}

.article-body img {
	border-radius: var(--radius-md);
}

/* Generic <details>/<summary> (e.g. authors pasting collapsible content) —
   same rounded "subtle card" look as the su-spoiler/FAQ accordions, with a
   right-aligned chevron (Figma) instead of the browser's default marker.
   Browsers can't transition height:auto, so the reveal is animated via
   max-height on the post-summary content instead of relying on native
   [open] show/hide. */
.article-body details {
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-border);
	padding: 4px 24px;
	transition: padding-bottom 0.3s ease;
}

.article-body details[open] {
	padding-bottom: 20px;
}

.article-body summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-block: 14px;
	cursor: pointer;
	font-weight: 600;
	color: var(--color-nav);
	list-style: none;
}

.article-body summary::-webkit-details-marker {
	display: none;
}

.article-body summary::marker {
	content: '';
}

.article-body summary::after {
	content: '';
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--color-nav);
	border-bottom: 2px solid var(--color-nav);
	transform: rotate(45deg);
	transition: transform 0.3s ease;
}

.article-body details[open] summary::after {
	transform: rotate(-135deg);
}

.article-body details > :not(summary) {
	display: block;
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	transition: max-height 0.35s ease, opacity 0.3s ease;
}

.article-body details[open] > :not(summary) {
	max-height: 1200px;
	opacity: 1;
}

/* Shortcodes Ultimate [su_spoiler] — reskinned to match the Figma FAQ
   accordion look. !important is needed because the plugin's own
   "su-shortcodes" CSS asset is enqueued after ours with matching
   specificity; only visuals are touched, the plugin's own JS still owns
   the open/close toggle (.su-spoiler-closed). */
.article-body .su-spoiler {
	background: var(--color-bg-subtle) !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: var(--radius-lg) !important;
	padding: 4px 8px 4px 24px !important;
	/* .article-body is a flex column with gap:16px between every block-level
	   child, so a negative margin here is what actually nets out to landing's
	   8px .faq__list gap between consecutive accordion items (16px gap - 8px
	   margin = 8px). Positive margin would only ever add on top of the 16px. */
	margin: 0 0 -8px !important;
}

.article-body .su-spoiler-title {
	display: flex !important;
	/* Plugin markup puts the icon span before the title text; row-reverse
	   puts the icon on the right (Figma) without fighting the plugin's DOM order. */
	flex-direction: row-reverse !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 16px !important;
	padding: 14px 0 !important;
	background: none !important;
	border: none !important;
	font-family: var(--font-sans) !important;
	font-weight: 600 !important;
	font-size: 1.25rem !important;
	line-height: 1.5 !important;
	color: var(--color-text) !important;
}

/* Same plain 24px icon + 45deg rotate as the landing FAQ's .faq__question img
   (no circle backdrop) — just swapped for a CSS background since the plugin
   gives us an empty <span> instead of an <img>. */
.article-body .su-spoiler-icon {
	position: static !important;
	flex-shrink: 0;
	width: 24px !important;
	height: 24px !important;
	border-radius: 0 !important;
	background: url('../icons/icon-accordion-toggle.svg') no-repeat center / contain !important;
	transition: transform 0.35s ease;
}

.article-body .su-spoiler-icon::before,
.article-body .su-spoiler-icon::after {
	content: none !important;
}

.article-body .su-spoiler:not(.su-spoiler-closed) .su-spoiler-icon {
	transform: rotate(45deg);
}

/* Base rule beats the plugin's own (non-!important) 14px padding via specificity
   alone; the plugin's own .su-spoiler-closed rule zeroes height + padding-bottom
   too, but without !important — our padding-bottom:20px was clobbering it, which
   is exactly why the closed box still reserved 20px and threw off the title's
   vertical centering. max-height + opacity replace the plugin's instant
   height:0 swap with the same easing as the FAQ accordion. */
.article-body .su-spoiler-content {
	overflow: hidden !important;
	max-height: 1200px;
	padding: 0 8px 20px !important;
	color: var(--color-text-muted) !important;
	font-size: 1rem !important;
	line-height: 1.6 !important;
	opacity: 1;
	transition: max-height 0.35s ease, opacity 0.3s ease, padding-bottom 0.35s ease;
}

.article-body .su-spoiler-closed > .su-spoiler-content {
	max-height: 0 !important;
	padding-bottom: 0 !important;
	opacity: 0 !important;
}

.article-divider {
	height: 1px;
	background: #efefef;
	border: none;
}

/* --- Related articles ------------------------------------------------------ */
.article-related__title {
	margin: 0 0 24px;
	font-weight: 600;
	font-size: 1.5rem; /* 24px */
	color: var(--color-nav);
}

.article-related__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

/* --- Article card (shared component) ---------------------------------------
   Image + title + excerpt. Used both in the 2-up "Читайте также" grid above
   and in the 3-up blog archive grid (.blog-article-grid, home.php /
   category.php, Figma node 177:1453) — same visual card in both places, see
   template-parts/blog/article-card.php. Figma's archive-grid frame draws
   the card image without visible corner rounding; that's a mock-up
   inaccuracy (flagged by product), so this keeps the already-approved
   rounded corners instead of matching that frame literally. */
.blog-article-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	color: inherit;
}

.blog-article-card__image {
	aspect-ratio: var(--article-image-ratio);
	width: 100%;
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: var(--color-bg-subtle);
}

.blog-article-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.blog-article-card__title {
	margin: 0;
	font-weight: 600;
	font-size: 1.125rem; /* 18px */
	color: var(--color-nav);
}

.blog-article-card__excerpt {
	margin: 0;
	font-size: 0.875rem;
	line-height: 20px;
	color: #1f1f1f;
	opacity: 0.7;
}

.blog-article-card:hover .blog-article-card__title {
	color: var(--color-accent-blue);
}

/* --- Sidebar: table of contents -------------------------------------------- */
.article-toc {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.article-toc__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Compact mode (main.js, once the sticky sidebar has scrolled into place):
   hide every item outside a small window around the active one — no
   internal scrolling; the reader can only see the rest via the toggle
   below or by scrolling back to the top — keeps the promo card below
   from being pushed off-screen by a long TOC. */
.article-toc.is-compact:not(.is-expanded) .article-toc__item--window-hidden {
	display: none;
}

.article-toc__item a {
	display: block;
	padding: 4px 0 4px 12px;
	border-left: 2px solid transparent;
	font-size: 0.9375rem; /* 15px */
	color: #8b8b8b;
	transition: color 0.2s ease;
}

.article-toc__item:not(.is-active) a:hover {
	color: #1f1f1f;
}

.article-toc__item.is-active a {
	border-left-color: var(--color-accent-blue);
	color: var(--color-accent-blue);
	font-weight: 600;
}

.article-toc__toggle {
	display: none;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 4px 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--color-text);
	text-align: left;
}

.article-toc.is-compact .article-toc__toggle {
	display: inline-flex;
}

.article-toc__toggle-icon {
	flex-shrink: 0;
	transition: transform 0.25s ease;
}

.article-toc.is-expanded .article-toc__toggle-icon {
	transform: rotate(180deg);
}

/* --- Promo card (Telegram bot CTA): in-content + sidebar variants --------- */
.article-promo {
	border-radius: var(--radius-lg);
	background: linear-gradient(124deg, #e0f4ff 0%, #afe0fc 34.7%, #43d3ff 92.4%);
}

.article-promo--content {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 24px;
	box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.08);
}

.article-promo--sidebar {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding: 24px;
	text-align: center;
}

.article-promo__text {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.article-promo--sidebar .article-promo__text {
	align-items: center;
}

.article-promo__title {
	margin: 0;
	font-weight: 500;
	font-size: 1.75rem; /* 28px */
	line-height: 1.2;
	color: var(--color-nav);
}

.article-promo__subtitle {
	margin: 4px 0 0;
	font-size: 0.875rem;
	color: rgba(38, 38, 51, 0.7);
}

/* Visuals come from the shared .button.button--dark (same button + hover as
   the header's "Get the app" CTA); only the flex alignment is specific here. */
.article-promo__cta {
	align-self: flex-start;
}

.article-promo--sidebar .article-promo__cta {
	align-self: center;
}

.article-promo__mascot {
	flex-shrink: 0;
	width: 176px;
}

.article-promo__mascot img {
	display: block;
	width: 100%;
	height: auto;
}

/* --- Archive grid: blog homepage (home.php) & category archive
   (category.php) — Figma node 177:1453 "articles-list-template". Both
   templates render the same template-parts/blog/archive-grid.php, only the
   heading differs ("Все статьи" vs. the category name); the category-nav
   row above (rendered from get_header('blog')) already resolves which
   language/topic chips to show, see inc/blog-helpers.php. ------------------ */
.blog-archive {
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding-block: 60px;
}

.blog-archive__title {
	margin: 0;
	font-weight: 600;
	font-size: 2rem; /* 32px */
	color: var(--color-nav);
}

.blog-archive__empty {
	margin: 0;
	color: var(--color-text-muted);
}

.blog-article-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px 24px;
}

/* --- Numbered pagination (Figma "Pagination" row) — wraps core's
   paginate_links(), see template-parts/blog/pagination.php. ---------------- */
.blog-pagination {
	display: flex;
	justify-content: center;
}

.blog-pagination__list {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.blog-pagination .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: 4px;
	border-radius: 10px;
	background: var(--color-bg-subtle);
	color: var(--color-nav);
	font-weight: 500;
	font-size: 1rem;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.blog-pagination a.page-numbers:hover {
	background: var(--color-border);
}

.blog-pagination .page-numbers.current {
	background: var(--color-nav);
	color: var(--color-bg);
	font-weight: 700;
}

.blog-pagination .page-numbers.dots {
	background: transparent;
}

.blog-pagination .page-numbers.prev,
.blog-pagination .page-numbers.next {
	background: transparent;
}

.blog-pagination .page-numbers.prev:hover,
.blog-pagination .page-numbers.next:hover {
	background: var(--color-bg-subtle);
}

/* ==========================================================================
   8. Blog responsive breakpoints
   --------------------------------------------------------------------------
   Figma "blog" tab, tablet frame `article-template-tablet` (node 177:1148,
   768 wide) and mobile frame `article-template-mobile` (node 177:1313, 390
   wide) — same tab as the desktop frame in section 7. Copy stays the same
   as desktop everywhere (same principle as the landing's own responsive
   section 6) — only layout, spacing and which widgets are visible change.

   Sidebar collapse: both frames drop `.article-layout__sidebar` entirely.
   Its TOC moves into `.article-mobile-widgets` as a bottom-sheet trigger
   (Skyeng-style curtain) after the lead intro inside `.article-body`. The
   mid-article promo (`.article-mid-promo`) sits before the 2nd <h2> when
   the post has ≥ 3 H2s — tablet/mobile only. A third promo always renders
   after the article body (all viewports). The lead intro is split via
   falabola_split_article_intro(); the mid cut uses
   falabola_split_before_nth_h2().
   ========================================================================== */

.article-mobile-widgets,
.article-mid-promo {
	display: none;
}

/* Mobile/tablet TOC — trigger in content flow + bottom-sheet panel.
   Skyeng pattern: bordered pill button with list icon; curtain slides up. */
.article-toc-sheet__trigger {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	margin: 0;
	padding: 14px 16px;
	border: 1.5px solid var(--color-accent-blue);
	border-radius: var(--radius-sm);
	background: var(--color-bg);
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	font-size: 1rem;
	color: var(--color-accent-blue);
	text-align: left;
	box-shadow: 0 1px 2px rgba(19, 110, 225, 0.06);
	transition: background 0.2s ease, box-shadow 0.2s ease;
}

.article-toc-sheet__trigger:hover,
.article-toc-sheet__trigger:focus-visible {
	background: rgba(19, 110, 225, 0.06);
	box-shadow: 0 2px 8px rgba(19, 110, 225, 0.12);
}

.article-toc-sheet__icon {
	flex-shrink: 0;
}

.article-toc-sheet__backdrop {
	position: fixed;
	inset: 0;
	z-index: 80;
	background: rgba(13, 10, 56, 0.35);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
}

.article-toc-sheet__backdrop[hidden] {
	display: none;
}

.article-toc-sheet.is-open .article-toc-sheet__backdrop {
	opacity: 1;
	pointer-events: auto;
}

.article-toc-sheet__panel {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 81;
	max-height: min(70vh, 560px);
	display: flex;
	flex-direction: column;
	padding: 12px 20px 28px;
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	background: var(--color-bg);
	box-shadow: 0 -12px 40px rgba(13, 10, 56, 0.16);
	transform: translateY(110%);
	transition: transform 0.3s ease;
}

.article-toc-sheet__panel[hidden] {
	display: none;
}

.article-toc-sheet.is-open .article-toc-sheet__panel {
	display: flex;
	transform: translateY(0);
}

.article-toc-sheet__handle {
	align-self: center;
	width: 40px;
	height: 4px;
	margin-bottom: 16px;
	border-radius: 4px;
	background: rgba(13, 10, 56, 0.18);
}

.article-toc-sheet__list {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.article-toc-sheet__item {
	border-bottom: 1px solid var(--color-border);
}

.article-toc-sheet__item:last-child {
	border-bottom: 0;
}

.article-toc-sheet__item a {
	display: block;
	padding: 14px 4px;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--color-nav);
	text-decoration: none;
}

.article-toc-sheet__item a:hover,
.article-toc-sheet__item a:focus-visible {
	color: var(--color-accent-blue);
}

/* Sheet lives inside .article-body — neutralize article list/link styles. */
.article-body .article-toc-sheet ul,
.article-body .article-toc-sheet ol {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.article-body .article-toc-sheet ul > li {
	position: static;
	padding-left: 0;
}

.article-body .article-toc-sheet ul > li::before {
	content: none;
	display: none;
}

.article-body .article-toc-sheet a {
	color: var(--color-nav);
	text-decoration: none;
}

.article-body .article-toc-sheet a:hover,
.article-body .article-toc-sheet a:focus-visible {
	color: var(--color-accent-blue);
}

html.toc-sheet-open,
html.toc-sheet-open body {
	overflow: hidden;
}

/* --- Tablet (≤1024px) ------------------------------------------------------ */
@media (max-width: 1024px) {
	.article-shell {
		padding-inline: 40px;
	}

	.blog-header__row {
		padding-inline: 40px;
	}

	.blog-category-nav__inner {
		padding-inline: 40px;
	}

	.blog-category-nav__fade--start {
		left: 40px;
	}

	.blog-category-nav__fade--end {
		right: 40px;
	}

	/* Single column: sidebar disappears. TOC after intro + mid promo before
	   2nd H2 live in mobile-only wrappers (display:none on desktop).
	   End-of-article promo stays visible on every breakpoint. */
	.article-layout {
		flex-direction: column;
		align-items: stretch;
	}

	.article-layout__content {
		flex: 1 1 auto;
		max-width: none;
	}

	.article-layout__sidebar {
		display: none;
	}

	.article-mobile-widgets,
	.article-mid-promo {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.blog-archive {
		padding-block: 40px;
	}

	.blog-article-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* --- Mobile (≤640px) -------------------------------------------------------- */
@media (max-width: 640px) {
	.article-shell {
		padding-inline: 20px;
	}

	.article-layout {
		padding-block: 24px 40px;
	}

	.blog-header__row {
		padding-inline: 20px;
	}

	.blog-category-nav__inner {
		padding-inline: 20px;
	}

	.blog-category-nav__fade--start {
		left: 20px;
	}

	.blog-category-nav__fade--end {
		right: 20px;
	}

	/* Language links collapse behind a hamburger + dropdown panel at the
	   header's trailing (right) edge — same interaction as the landing's
	   .site-header__nav, just mirrored (see initMobileNav() in main.js). */
	.blog-header__menu-toggle {
		display: inline-flex;
	}

	.blog-header__lang-nav {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		z-index: 20;
		display: none;
		background: var(--color-bg);
		border-bottom: 1px solid var(--color-border);
		box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1);
	}

	.blog-header__lang-nav.is-open {
		display: block;
	}

	.blog-header__lang-list {
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
		padding: 12px 20px 20px;
	}

	.blog-header__lang-list a {
		padding: 12px 16px;
		border-radius: var(--radius-sm);
		opacity: 1;
	}

	.blog-header__lang-list a:hover {
		opacity: 0.55;
		background: var(--color-bg-subtle);
	}

	/* Nested "Другие языки" children render inline under the parent in the
	   mobile panel — no flyout positioning. */
	.blog-header__lang-list > .menu-item-has-children > a {
		justify-content: space-between;
		width: 100%;
	}

	.blog-header__lang-list .sub-menu {
		position: static;
		display: none;
		min-width: 0;
		margin: 0 0 4px;
		padding: 0 0 0 12px;
		border: none;
		border-radius: 0;
		box-shadow: none;
		background: transparent;
	}

	.blog-header__lang-list > .menu-item-has-children.is-open > .sub-menu {
		display: flex;
	}

	.blog-header__lang-list .sub-menu a {
		padding: 10px 16px;
	}

	/* Figma's mobile promo cards (both the moved-up one and the
	   in-content one from old/demo post markup) drop the mascot and
	   center everything — the same look `.article-promo--sidebar`
	   already has, reused here via override instead of a second variant. */
	.article-promo--content {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.article-promo--content .article-promo__text {
		align-items: center;
	}

	.article-promo--content .article-promo__cta {
		align-self: center;
	}

	.article-promo--content .article-promo__mascot {
		display: none;
	}

	.article-related__grid {
		grid-template-columns: 1fr;
	}

	.blog-archive {
		gap: 32px;
		padding-block: 24px 40px;
	}

	.blog-archive__title {
		font-size: 1.5rem; /* 24px */
	}

	.blog-article-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.blog-pagination .page-numbers {
		min-width: 36px;
		height: 36px;
	}

	/* Meta bar like byline: facts left (stacked), share right — no wrap. */
	.article-meta-bar {
		flex-wrap: nowrap;
		align-items: center;
		gap: 12px;
	}

	.article-meta-bar__facts {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		min-width: 0;
	}

	.article-meta-bar__dot {
		display: none;
	}

	/* Share: M on mobile, L hidden (paired widgets from share.php). */
	.article-share--desktop {
		display: none !important;
	}

	.article-share--mobile {
		display: block;
	}
}

/* ==========================================================================
   9. 404 page
   --------------------------------------------------------------------------
   Figma: desktop 263:936 (rounded gradient card on white), tablet 264:936
   and mobile 264:953 (full-bleed gradient). Breakpoints match the rest of
   the theme — tablet ≤1024px, mobile ≤640px.
   ========================================================================== */

body.error404-page {
	--error-404-gradient: linear-gradient(
		110.65deg,
		#f0eee9 19.022%,
		#e9d2bd 38.102%,
		#cab39f 129.51%
	);
	min-height: 100vh;
	min-height: 100dvh;
	background: var(--color-bg);
}

.error-404 {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 100vh;
	min-height: 100dvh;
	padding: 48px 24px;
}

.error-404__panel {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 80px;
	box-sizing: border-box;
	width: 100%;
	max-width: 1274px;
	min-height: min(856px, calc(100dvh - 96px));
	padding: 64px 80px;
	border-radius: 32px;
	background-image: var(--error-404-gradient);
}

.error-404__mascot {
	flex-shrink: 0;
	width: 525px;
}

.error-404__mascot-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 525 / 376;
}

.error-404__copy {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	min-width: 0;
}

.error-404__code {
	font-family: var(--font-mono-brand);
	font-weight: 700;
	font-size: 9rem; /* 144px */
	line-height: normal;
	color: var(--color-ink);
}

.error-404__message {
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 3rem; /* 48px */
	line-height: 1.4;
	color: var(--color-ink);
	opacity: 0.5;
}

.error-404__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding-block: 20px;
	width: 100%;
	max-width: 536px;
}

/* Larger dark pill than the shared header CTA — matches Figma node 263:951 */
.error-404__cta {
	padding: 18px 32px;
	border-radius: 24px;
	font-size: 1.5rem; /* 24px */
	line-height: 1.5;
	letter-spacing: 0.24px;
}

/* --- Tablet (≤1024px) — Figma 264:936 ------------------------------------ */
@media (max-width: 1024px) {
	body.error404-page {
		--error-404-gradient: linear-gradient(
			105.53deg,
			#f0eee9 19.022%,
			#e9d2bd 38.102%,
			#cab39f 129.51%
		);
		background-image: var(--error-404-gradient);
		background-color: transparent;
	}

	.error-404 {
		padding: 0 32px;
	}

	.error-404__panel {
		gap: 24px;
		max-width: none;
		min-height: 100vh;
		min-height: 100dvh;
		padding: 0;
		border-radius: 0;
		background: transparent;
	}

	.error-404__mascot {
		width: 378px;
		max-width: min(378px, 42vw);
	}

	.error-404__copy {
		gap: 12px;
	}

	.error-404__code {
		font-size: 7rem; /* 112px */
		width: 100%;
	}

	.error-404__message {
		font-size: 2.25rem; /* 36px */
		line-height: 1.3;
		width: 100%;
	}

	.error-404__actions {
		padding-block: 16px;
		max-width: none;
	}

	.error-404__cta {
		padding: 16px 28px;
		border-radius: 20px;
		font-size: 1.25rem; /* 20px */
		line-height: 1.4;
		letter-spacing: 0.2px;
	}
}

/* --- Mobile (≤640px) — Figma 264:953 ------------------------------------- */
@media (max-width: 640px) {
	body.error404-page {
		--error-404-gradient: linear-gradient(
			98.03deg,
			#f0eee9 19.022%,
			#e9d2bd 38.102%,
			#cab39f 129.51%
		);
	}

	.error-404 {
		padding: 48px 24px;
	}

	.error-404__panel {
		flex-direction: column;
		justify-content: center;
		gap: 12px;
		min-height: auto;
	}

	.error-404__mascot {
		width: 315px;
		max-width: 100%;
	}

	.error-404__copy {
		align-items: center;
		width: 100%;
		text-align: center;
	}

	.error-404__code {
		font-size: 5.25rem; /* 84px */
	}

	.error-404__message {
		font-size: 1.5rem; /* 24px */
	}

	.error-404__actions {
		align-items: stretch;
	}

	.error-404__cta {
		width: 100%;
		padding: 14px 32px;
		border-radius: 20px;
		font-size: 1.125rem; /* 18px */
		letter-spacing: 0.18px;
	}
}