/*
 * Generation 22 — сторінка «Екстернат» (assets/css/pages/eksternat.css).
 * Enqueue: functions.php реєструє цей файл автоматично для сторінки зі
 * slug "eksternat", dep = g22-inner-henna (+ g22-inner-studio, якщо
 * застосовний) — тобто цей шар вантажиться ОСТАННІМ і виграє каскад при
 * однаковій специфічності. Змінюю лише цей файл.
 *
 * Референс візуальної мови: front-page.php + home-studio.css, скін
 * .g22-henna--clean (нова головна). ВАЖЛИВО: on-page.php ЦЯ сторінка не
 * рендерить .g22-henna--clean у DOM — це plain page.php, а не
 * front-page.php, тож жоден з токенів/правил home-studio.css, завʼязаних
 * на .g22-henna--clean, сюди не доходить (перевірено: `curl` розмітки не
 * містить цього класу). Тому нижче — самодостатній скін: бере значення
 * (кольори, радіуси, шрифти, тайминги) з home-studio.css як референс і
 * оголошує власні локальні токени на body.page-id-21, нічого не
 * успадковуючи.
 *
 * Базові класи (.g22-page-*, .g22-surface-panel, .g22-checklist,
 * .g22-cta-panel, .g22-form) вже отримують структуру від style.css і
 * фарбування першого шару від inner-henna.css (стара "henna"-система,
 * --g22h-* токени, оголошені на :root у home-henna.css — доступні тут).
 * Той шар лишаю недоторканим і не редагую — тут тільки уточнення візуальної
 * мови під нову головну поверх нього.
 *
 * Розмітка НЕ змінюється (контент — Gutenberg-блоки з БД), тому вся
 * робота нижче — по вже наявних класах патерну patterns/externat-page.php.
 */

/* -------------------------------------------------- */
/* 0. Локальні токени (motion + card system)            */
/* Значення взяті з home-studio.css .g22-henna--clean /  */
/* body:has(.g22-henna--clean) як референс, продубльовані */
/* тут локально — файл нічого не імпортує з того скоупу. */
/* -------------------------------------------------- */

body.page-id-21 {
	--eks-purple: var(--g22h-purple, #3F2780);
	--eks-purple-hover: var(--g22h-purple-hover, #4c319c);
	--eks-yellow: var(--g22h-yellow, #FFD141);
	--eks-ink: var(--g22h-ink, #1a1a1a);
	/* WCAG AA: 0.7 alpha ~3.7:1 on the #e5e5e5 page bg — bumped to 0.8 (~5:1). */
	--eks-ink-70: rgba(26, 26, 26, 0.8);
	--eks-ink-55: var(--g22h-ink-55, rgba(26, 26, 26, 0.55));
	--eks-card-bg: #f4f4f2;
	--eks-radius: 20px;
	--eks-font: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
	--eks-mono: "IBM Plex Mono", ui-monospace, monospace;

	/* Motion tokens — 1:1 copy of .g22-henna--clean's scale (home-studio.css
	   L3487-3491 and body:has(.g22-henna--clean) L43-54), kept local so this
	   page's transitions match the new homepage's timing without depending
	   on that class ever being present in the DOM here. */
	--eks-t-fast: 100ms;
	--eks-t-med: 200ms;
	--eks-dur-std: 380ms;
	--eks-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--eks-ease: cubic-bezier(0.33, 1, 0.68, 1);
	--eks-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--eks-rise: 18px;
}

/* Guard against horizontal scroll from the tilted CTA heading plate
   (section 3 below) at narrow viewports — same technique as vartist.css
   L42-45 (.g22-page-shell { overflow: clip }). */
body.page-eksternat .g22-page-shell {
	overflow: clip;
}

/* Living orbital mark — adapted from the original Vercel concept. It sits
   behind the photo as an identity-bearing background object, not as another
   foreground illustration competing with the hero copy. */
body.page-eksternat .g22-page-content {
	position: relative;
}

body.page-eksternat .g22-eksternat-orbit {
	position: absolute;
	top: clamp(-54px, -3vw, -22px);
	right: clamp(-176px, -8vw, -92px);
	z-index: 0;
	width: clamp(430px, 46vw, 660px);
	aspect-ratio: 1;
	pointer-events: none;
	color: var(--eks-purple);
	opacity: 0.82;
	transform-origin: center;
}

body.page-eksternat .g22-eksternat-orbit svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

body.page-eksternat .g22-eksternat-orbit__halo,
body.page-eksternat .g22-eksternat-orbit__spin ellipse {
	fill: none;
	stroke: currentColor;
	vector-effect: non-scaling-stroke;
}

body.page-eksternat .g22-eksternat-orbit__halo {
	stroke-width: 0.8;
	stroke-dasharray: 2.5 8;
	opacity: 0.22;
	transform-origin: 120px 120px;
}

body.page-eksternat .g22-eksternat-orbit__spin {
	transform-origin: 120px 120px;
}

body.page-eksternat .g22-eksternat-orbit__spin ellipse {
	stroke-width: 1.25;
	opacity: 0.25;
}

body.page-eksternat .g22-eksternat-orbit__satellite,
body.page-eksternat .g22-eksternat-orbit__core {
	fill: var(--eks-yellow);
}

body.page-eksternat .g22-eksternat-orbit__satellite {
	opacity: 0.9;
}

body.page-eksternat .g22-eksternat-orbit__nucleus {
	fill: var(--eks-purple);
	opacity: 0.13;
}

body.page-eksternat .g22-eksternat-orbit__core {
	opacity: 0.72;
}

body.page-eksternat .g22-eksternat-hero {
	position: relative;
	z-index: 1;
}

@media (prefers-reduced-motion: no-preference) {
	body.page-eksternat .g22-eksternat-orbit {
		animation: g22EksternatOrbitFloat 8s ease-in-out infinite alternate;
	}

	body.page-eksternat .g22-eksternat-orbit__spin {
		animation: g22EksternatOrbitSpin 38s linear infinite;
	}

	body.page-eksternat .g22-eksternat-orbit__halo {
		animation: g22EksternatOrbitSpinReverse 54s linear infinite;
	}

	@keyframes g22EksternatOrbitFloat {
		from { transform: translate3d(0, 0, 0); }
		to { transform: translate3d(0, -12px, 0); }
	}

	@keyframes g22EksternatOrbitSpin {
		to { transform: rotate(360deg); }
	}

	@keyframes g22EksternatOrbitSpinReverse {
		to { transform: rotate(-360deg); }
	}
}

@media (max-width: 860px) {
	body.page-eksternat .g22-eksternat-orbit {
		top: clamp(250px, 46vw, 390px);
		right: clamp(-190px, -24vw, -110px);
		width: clamp(340px, 72vw, 520px);
		opacity: 0.66;
	}
}

@media (max-width: 560px) {
	body.page-eksternat .g22-eksternat-orbit {
		display: none;
	}
}

/* -------------------------------------------------- */
/* 1. Про екстернат — інтро (kicker + H1 + summary)      */
/* -------------------------------------------------- */

/* Eyebrow: IBM Plex Mono uppercase + жовте тире (brief). inner-henna.css
   вимикає стандартне тире (`.g22-page-kicker::before { content: none; }`,
   inner-henna.css:69) — тут повертаю власне, за зразком
   .g22-henna--clean .g22-clean__label::before (home-studio.css:138-146). */
/* Hero type from shared --g22-hero-* (inner-henna). Keep ink color only. */
body.page-id-21 .g22-page-summary {
	color: var(--eks-ink-70);
}

/* -------------------------------------------------- */
/* Hero two-column: copy left, photo + proof stats     */
/* right (parity with study-process / about heroes).   */
/* Also fixes the ragged hero left edge — the inherited */
/* .g22-page-title/summary margin:0 auto centred them   */
/* while the kicker stayed left; the __copy wrapper now */
/* left-aligns all three as one grid cell.              */
/* -------------------------------------------------- */

body.page-id-21 .g22-eksternat-hero > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.84fr);
	column-gap: clamp(2rem, 4vw, 4.5rem);
	align-items: start;
}

body.page-id-21 .g22-eksternat-hero__copy {
	grid-column: 1;
}

/* Left-align the copy (override inherited centring). */
body.page-id-21 .g22-eksternat-hero .g22-page-title,
body.page-id-21 .g22-eksternat-hero .g22-page-summary {
	margin-inline: 0;
	text-align: left;
}

body.page-id-21 .g22-eksternat-hero__aside {
	grid-column: 2;
	display: flex;
	flex-direction: column;
	gap: clamp(1rem, 2vw, 1.5rem);
}

body.page-id-21 .g22-eksternat-hero__figure {
	margin: 0;
	border-radius: var(--g22-hero-media-radius, var(--eks-radius, 20px));
	overflow: hidden;
	aspect-ratio: var(--g22-hero-media-ratio, 4 / 3);
	box-shadow: var(--g22-hero-media-shadow, 0 24px 60px rgba(26, 26, 26, 0.14));
}

body.page-id-21 .g22-eksternat-hero__figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	content: url("../../images/photos/g22-eksternat-scene.webp?v3");
}

/* Hero proof strip: shared in inner-henna.css — do not restyle here. */

@media (max-width: 860px) {
	body.page-id-21 .g22-eksternat-hero > .wp-block-group__inner-container {
		grid-template-columns: 1fr;
		row-gap: clamp(1.5rem, 4vw, 2.25rem);
	}
	body.page-id-21 .g22-eksternat-hero__aside {
		grid-column: 1;
	}
	body.page-id-21 .g22-eksternat-hero__figure {
		aspect-ratio: var(--g22-hero-media-ratio-narrow, 16 / 10);
	}
}

/* -------------------------------------------------- */
/* 2. Картки контенту (Про екстернат / Підхід та умови) */
/* .g22-content-grid > .wp-block-column > .g22-surface-panel */
/* -------------------------------------------------- */

body.page-id-21 .g22-content-grid {
	align-items: stretch;
}

/* Client review, slide 20: both intro cards must read as one balanced pair.
   Gutenberg stretches the columns themselves, but their inner groups still
   keep content-driven heights. Turn each column into a flex container and
   let the surface panel fill the available cross-size. */
body.page-id-21 .g22-content-grid > .wp-block-column {
	display: flex;
}

body.page-id-21 .g22-content-grid > .wp-block-column > .g22-surface-panel {
	flex: 1 1 auto;
	width: 100%;
}

body.page-id-21 .g22-surface-panel {
	border: 1px solid transparent;
	border-radius: var(--eks-radius);
	background: var(--eks-card-bg);
	background-image: none;
	box-shadow: none;
	padding: clamp(24px, 3vw, 36px);
	transition:
		transform var(--eks-t-med) var(--eks-ease-out),
		box-shadow var(--eks-t-med) var(--eks-ease-out);
}

body.page-id-21 .g22-surface-panel h2 {
	font-family: var(--eks-font);
	font-weight: 700;
	font-size: clamp(1.75rem, 3.2vw, 2.75rem);
	line-height: 1.15;
	letter-spacing: -0.03em;
	color: var(--eks-ink);
	max-width: none;
}

body.page-id-21 .g22-surface-panel p,
body.page-id-21 .g22-checklist li {
	font-family: var(--eks-font);
	color: var(--eks-ink-70);
}

/* Micro-interaction: hover lift on the two content cards (brief: "hover lift
   карточок"). Panels are static (no link wraps the whole card), so the lift
   answers pointer proximity on the whole surface — matches the lift already
   used on .g22-card (inner-henna.css:272-277) so both card families read as
   one system. */
body.page-id-21 .g22-surface-panel:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 40px rgba(26, 26, 26, 0.1);
}

@media (hover: none) {
	body.page-id-21 .g22-surface-panel:hover {
		transform: none;
		box-shadow: none;
	}
}

/* Checklist bullet — align to the yellow-dot system already in place
   (inner-henna.css:149-159), just re-declared here for the Manrope pairing. */
body.page-id-21 .g22-checklist li::before {
	background: var(--eks-yellow);
}

/* "Перейти до сторінки «Вартість»" — plain <a> inside a paragraph in the
   markup (no dedicated class available to hook without touching content),
   styled as the brand text-link (see .g22-clean__text-link, home-studio.css
   L314+): purple, arrow-on-hover micro-interaction, focus-visible ring. */
body.page-id-21 .g22-content-grid .g22-surface-panel a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--eks-font);
	font-weight: 700;
	color: var(--eks-purple);
	text-decoration: none;
	transition: color var(--eks-t-fast) var(--eks-ease-out);
}

body.page-id-21 .g22-content-grid .g22-surface-panel a::after {
	content: "\2192";
	display: inline-block;
	transition: transform var(--eks-t-fast) var(--eks-ease-out);
}

body.page-id-21 .g22-content-grid .g22-surface-panel a:hover,
body.page-id-21 .g22-content-grid .g22-surface-panel a:focus-visible {
	color: var(--eks-purple-hover);
	text-decoration: underline;
}

body.page-id-21 .g22-content-grid .g22-surface-panel a:hover::after,
body.page-id-21 .g22-content-grid .g22-surface-panel a:focus-visible::after {
	transform: translateX(3px);
}

body.page-id-21 .g22-content-grid .g22-surface-panel a:focus-visible {
	outline: 2px solid var(--eks-purple);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Henna-жест 1 — arc-underline дудл під H2 "Про екстернат" (перша картка
   .g22-content-grid, mask-технікою пілота: vartist.css L226-239). Тільки
   перша .g22-surface-panel (:first-child колонки) отримує дудл — другий H2
   "Підхід та умови" лишається чистим, щоб дотримати ліміт "1 жест на
   секцію" (тут секція контенту рахується як одна пара карток, дудл — її
   єдиний акцент). H2 отримує position: relative локально, щоб ::after не
   зʼїжджав відносно панелі. */
body.page-eksternat .g22-content-grid > .wp-block-column:first-child .g22-surface-panel h2 {
	position: relative;
	display: inline-block;
	padding-bottom: 0.22em;
}

body.page-eksternat .g22-content-grid > .wp-block-column:first-child .g22-surface-panel h2::after {
	content: "";
	position: absolute;
	left: 0.05em;
	bottom: -0.02em;
	width: 3.4em;
	height: 0.32em;
	background-color: var(--eks-yellow);
	-webkit-mask: url("../../images/brand/doodles/arc-underline.svg") left center / contain no-repeat;
	mask: url("../../images/brand/doodles/arc-underline.svg") left center / contain no-repeat;
	pointer-events: none;
}

/* -------------------------------------------------- */
/* 2.5. Три формати екстернату (.g22-cards / .g22-card) */
/* Client feedback: "вирівняти висоту блоків" — базовий  */
/* .g22-cards__grid (inner-henna.css) лишає картки в      */
/* 2-колонковій сітці (3 картки → 2+1, друга й третя ряд   */
/* нерівні за замовчуванням) без forced-height. Тут:       */
/* 3 колонки в один ряд на десктопі (природно рівна        */
/* висота одного ряду) + height:100% страховкою на картці, */
/* якщо контент колись стане нерівним по довжині.          */
/* -------------------------------------------------- */

@media (min-width: 861px) {
	body.page-id-21 .g22-cards__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

body.page-id-21 .g22-cards__grid {
	align-items: stretch;
}

body.page-id-21 .g22-card {
	height: 100%;
	box-sizing: border-box;
}

/*
 * ТЗ п.2 «Підхід та умови»: текст, який зараз у блоці — це заглушка з FAQ
 * (список умов + посилання на «Вартість»). Клієнтський текст (умови
 * зарахування, формат супроводу, атестація, вартість) ще не наданий per
 * tz-eksternat.txt: «Правка: Текст надати...». Розмітку/контент я не чіпаю
 * (Gutenberg-блоки в БД) — секція нижче стилізована під наявний вміст;
 * коли клієнтський текст ляже у ті самі класи (h2/ul.g22-checklist/p>a),
 * стилі застосуються без правок цього файлу.
 */

/* -------------------------------------------------- */
/* 3. Замовити консультацію (.g22-cta-panel + .g22-form) */
/* -------------------------------------------------- */

body.page-id-21 .g22-cta-panel {
	border: 1px solid transparent;
	border-radius: var(--eks-radius);
	background: var(--eks-card-bg);
	background-image: none;
	box-shadow: none;
	overflow: clip;
}

body.page-id-21 .g22-cta-panel h2 {
	font-family: var(--eks-font);
	font-weight: 700;
	font-size: clamp(1.75rem, 3.2vw, 2.75rem);
	line-height: 1.15;
	letter-spacing: -0.03em;
	color: var(--eks-ink);
	max-width: 22ch;
}

/* Henna-жест 2 — CTA стає винятком із правил: у наявному марк-апі немає
   окремого mono-eyebrow "щорічний внесок" (як у vartist), тому найближчий
   аналог тієї плашки — сам заголовок форми стає нахиленою жовтою плашкою.
   Значення transform 1:1 з .g22-tilt (henna-gestures.css L96-108), клас там
   не використовую напряму (він юзається для JS-обгортки), а дублюю тут
   локально, щоб не чіпати розмітку. Панель уже отримала overflow: clip
   вище (block .g22-cta-panel), щоб нахилена плашка ніколи не спричиняла
   горизонтальний скрол на 390px. */
body.page-eksternat .g22-cta-panel h2 {
	display: inline-block;
	max-width: 20ch;
	/* Client (Iryna): лейба «будто упала» — lift + lighter tilt. */
	margin-top: clamp(8px, 1.5vw, 16px);
	margin-bottom: clamp(22px, 3.2vw, 32px);
	padding: clamp(14px, 2vw, 20px) clamp(20px, 2.6vw, 28px);
	border-radius: 16px;
	background: var(--eks-yellow);
	box-shadow: 0 14px 32px rgba(255, 209, 65, 0.28);
	transform: rotate(-1.75deg) translateY(-6px);
	transform-origin: 30% 50%;
	transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

body.page-eksternat .g22-cta-panel h2:hover {
	transform: rotate(-0.5deg) translateY(-8px);
}

@media (prefers-reduced-motion: reduce) {
	body.page-eksternat .g22-cta-panel h2 {
		transition: none;
		transform: translateY(-4px);
	}
}

@media (max-width: 480px) {
	body.page-eksternat .g22-cta-panel h2 {
		max-width: none;
		margin-top: 4px;
		padding: 14px 18px;
		transform: rotate(-1.25deg) translateY(-4px);
	}
}

body.page-id-21 .g22-form label {
	font-family: var(--eks-font);
}

/* Inputs — same visual language as the card system (soft off-white field on
   the #f4f4f2 card, purple focus ring, 100ms transitions per brief). */
body.page-id-21 .g22-form input,
body.page-id-21 .g22-form textarea {
	font-family: var(--eks-font);
	background: #fff;
	border: 1px solid var(--g22h-ink-10, rgba(26, 26, 26, 0.1));
	border-radius: 12px;
	transition:
		border-color var(--eks-t-fast) var(--eks-ease-out),
		box-shadow var(--eks-t-fast) var(--eks-ease-out);
}

body.page-id-21 .g22-form input:focus-visible,
body.page-id-21 .g22-form textarea:focus-visible {
	outline: none;
	border-color: var(--eks-purple);
	box-shadow: 0 0 0 4px rgba(63, 39, 128, 0.15);
}

/* Submit — brand pill button (brief: "фиолетовый pill #3F2780, hover lift,
   active scale 0.98"), same shape/motion as .g22-clean__btn (home-studio.css
   L222-263) and .g22-cta__submit (L2393-2444). */
body.page-id-21 .g22-form button {
	font-family: var(--eks-font);
	background: var(--eks-purple);
	border-radius: 999px;
	box-shadow: 0 10px 24px rgba(63, 39, 128, 0.22);
	will-change: transform;
	transition:
		background-color var(--eks-t-fast) var(--eks-ease-out),
		box-shadow var(--eks-t-fast) var(--eks-ease-out),
		transform var(--eks-t-fast) var(--eks-ease-out);
}

body.page-id-21 .g22-form button:hover {
	background: var(--eks-purple-hover);
	box-shadow: 0 14px 30px rgba(63, 39, 128, 0.3);
	transform: translateY(-1px);
}

body.page-id-21 .g22-form button:active {
	transform: translateY(0) scale(0.98);
	box-shadow: 0 6px 16px rgba(63, 39, 128, 0.2);
}

body.page-id-21 .g22-form button:focus-visible {
	outline: 2px solid var(--eks-purple);
	outline-offset: 3px;
}

/* Honeypot (.g22-form__website) — механіку/розмітку не чіпаю, жодних
   правил на цей клас тут немає навмисно (візуальне приховання вже
   забезпечує style.css:262, сайт-вайд). */

/* -------------------------------------------------- */
/* 4. Футер — див. п.4.4 ТЗ, поза скоупом цього файлу.  */
/* Стилі футера сайт-вайд у footer.php/home-henna.css — */
/* не редагую й не додаю правил на .g22-footer тут.      */
/* -------------------------------------------------- */

/* -------------------------------------------------- */
/* 5. Reveal: fade-up on scroll + visibility insurance   */
/* Прогресивне посилення: без reveal.js-хука на ці класи */
/* (revealSelector у reveal.js їх не включає — JS не       */
/* редагую), тож ефект будується на CSS scroll-driven      */
/* animations (animation-timeline: view()), з guard'ом    */
/* через @supports. Без підтримки — контент одразу         */
/* видимий (немає жодного стану, що ховає контент поза      */
/* цим блоком).                                            */
/* -------------------------------------------------- */

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		/*
		 * Two animations on one element, comma-paired position-by-position:
		 * 1) eks-reveal-in — the actual fade-up, driven by the scroll (view())
		 *    timeline, duration: auto stretches it across animation-range.
		 * 2) eks-reveal-fallback-in — insurance / visibility failsafe, 1:1
		 *    copy of the pattern in home-studio.css
		 *    (@keyframes g22-reveal-fallback-in, L2993-3016): a 1ms no-op
		 *    animation, delayed, that forces opacity: 1 a few seconds after
		 *    paint no matter what happens with the scroll-timeline above
		 *    (stuck observer-equivalent, an element that never crosses the
		 *    entry range, etc.). Renamed locally (eks- prefix) to avoid
		 *    colliding with the sitewide keyframe name.
		 */
		body.page-id-21 .g22-page-section,
		body.page-id-21 .g22-content-grid > .wp-block-column,
		body.page-id-21 .g22-cta-panel {
			opacity: 0;
			transform: translateY(var(--eks-rise));
			animation-name: eks-reveal-in, eks-reveal-fallback-in;
			animation-duration: auto, 1ms;
			animation-timing-function: linear, linear;
			animation-delay: 0s, 2.4s;
			animation-fill-mode: both, forwards;
			animation-timeline: view(), auto;
			animation-range: entry 0% cover 30%, normal;
		}

		body.page-id-21 .g22-content-grid > .wp-block-column:nth-child(2) {
			animation-delay: 70ms, 2.4s;
		}
	}
}

@keyframes eks-reveal-in {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes eks-reveal-fallback-in {
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.page-id-21 .g22-page-section,
	body.page-id-21 .g22-content-grid > .wp-block-column,
	body.page-id-21 .g22-cta-panel {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}
}

/* -------------------------------------------------- */
/* 6. Focus-visible safety net (brief: "focus-visible")  */
/* -------------------------------------------------- */

body.page-id-21 .g22-page-content a:focus-visible,
body.page-id-21 .g22-surface-panel:focus-visible,
body.page-id-21 .g22-cta-panel:focus-visible {
	outline: 2px solid var(--eks-purple);
	outline-offset: 3px;
}

/* -------------------------------------------------- */
/* 7. Мобайл — перевірено на 390px                      */
/* -------------------------------------------------- */

@media (max-width: 480px) {
	body.page-id-21 .g22-page-kicker {
		font-size: 0.72rem;
	}

	body.page-id-21 .g22-surface-panel,
	body.page-id-21 .g22-cta-panel {
		padding: clamp(20px, 6vw, 28px);
		border-radius: 16px;
	}

	body.page-id-21 .g22-surface-panel:hover {
		transform: none;
		box-shadow: none;
	}

	body.page-id-21 .g22-form button {
		width: 100%;
	}
}