/* =========================================================
   Matky se zlobí — page compositions (one-pager v1).
   Built on the Entangle Base framework: colors/fonts come from theme.json
   presets via the base token layer (--color-*, --font-*, --container,
   --gutter). Everything here is either a site composition or an adapter
   that maps the design onto real block markup.
   ========================================================= */

:root {
	/* Named aliases for the palette slugs this design leans on. The slugs are
	   fixed by the base contract; these names are what the CSS below reads. */
	--font-display: var( --wp--preset--font-family--display );
	--pink: var( --wp--preset--color--accent-orange, #fa5cd3 );
	--red: var( --wp--preset--color--accent-yellow, #ee3b3b );
	--lilac: var( --color-brand-soft );
	--violet: var( --color-brand );
	--violet-deep: var( --color-brand-deep );
	--slate: var( --wp--preset--color--accent-teal, #2b3136 );

	/* Design derivatives that are not palette entries. */
	--rule-strong: #10110e;
	--shadow-hard: 6px 6px 0 var( --color-ink );
	--shadow-hard-pink: 6px 6px 0 var( --pink );

	/* Poster geometry: everything is square, the base radius is already 0. */
	--border-hard: 2px solid var( --color-ink );
}

html {
	scroll-behavior: smooth;
	/* the sticky header must not cover an anchored section */
	scroll-padding-top: 96px;
}

body {
	overflow-x: clip;
}

::selection {
	background: var( --pink );
	color: var( --color-ink );
}

.wrap {
	max-width: var( --container );
	margin: 0 auto;
	padding-inline: var( --gutter );
}

/* Vzduch pod <main> nad patičkou řídí base přes `--entangle-footer-space` s
   `!important` — CSS ho tady přebít nelze a ani se nemá. Framework má na to
   přepínač: meta `entangle_flush_footer` na stránce (Vzhled → metabox „Bez
   mezery nad patičkou"), který přidá body třídu `.entangle-flush-footer`.
   Homepage ho dostává v seedu, protože končí barevným pruhem. */

/* ---------------------------------------------------------
   Section rhythm. `.sec` is NOT defined by the base — this is
   the single place that owns it.
   --------------------------------------------------------- */

.sec {
	position: relative;
	padding-block: var( --wp--preset--spacing--80 );
}

.sec-tight {
	padding-block: var( --wp--preset--spacing--70 );
}

/* Base nuluje spodní padding poslednímu bloku v obsahu, protože vzduch nad
   patičkou normálně dodává <main>. Homepage ho má přes `entangle_flush_footer`
   vypnutý, takže poslední sekce si ho musí vrátit sama — jinak formulář končí
   natěsno na patičce. Stejná hodnota jako nahoře. */
.entangle-flush-footer .site-main .wp-block-post-content > .sec:last-child {
	padding-bottom: var( --wp--preset--spacing--80 );
}

.sec-lilac {
	background: var( --lilac );
	--color-rule: rgba( 16, 17, 14, 0.22 );
}

.sec-pink {
	background: var( --pink );
	--color-rule: rgba( 16, 17, 14, 0.28 );
}

/* The pink band follows the hero directly — a hard edge instead of a marquee. */
.hero-mz + .sec-pink {
	border-top: 2px solid var( --color-ink );
}

.sec-violet {
	background: var( --violet );
	color: var( --color-bg );
	--color-ink: #f3f0e9;
	--color-ink-soft: #cfc7e8;
	--color-rule: rgba( 243, 240, 233, 0.28 );
}

.sec-violet h1,
.sec-violet h2,
.sec-violet h3,
.sec-violet p,
.sec-violet li {
	color: var( --color-bg );
}

/* An eyebrow above every section title: a hairline + tracked-out label. */
.kicker {
	margin: 0 0 clamp( 18px, 3vw, 34px );
	padding-top: 14px;
	border-top: 2px solid currentColor;
	font-family: var( --font-display );
	font-size: var( --wp--preset--font-size--eyebrow );
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

/* ---------------------------------------------------------
   Header — entangle/site-header adapters
   --------------------------------------------------------- */

.site-header {
	background: var( --color-bg );
	border-bottom: 2px solid var( --color-ink );
}

/* Na homepage se linka objeví spolu se značkou — dokud hlavička splývá s hero,
   nemá co oddělovat. Průhledná barva, ne `border: 0`, ať se layout nehne. */
.home .site-header {
	border-bottom-color: transparent;
	transition: border-bottom-color 0.22s ease;
}

.home .site-header.is-stuck {
	border-bottom-color: var( --color-ink );
}

/* Značka je zmenšený hero nadpis — stejné písmo, stejná váha, stejné barvy. */
.site-header .brand {
	font-family: var( --font-display );
	font-size: clamp( 1.35rem, 2.7vw, 2.15rem );
	font-weight: 400;
	letter-spacing: -0.03em;
	text-transform: lowercase;
	color: var( --color-ink );
	text-decoration: none;
}

/* Base dává textové značce vlastní barvu i váhu na vnitřním spanu
   (`.brand__name { color: var(--color-brand); font-weight: 500 }`), takže
   pravidlo na odkazu se k textu vůbec nedostane — přepsat je nutné přímo tady. */
.site-header .brand__name {
	color: var( --color-ink );
	font-weight: 400;
}

.site-header .brand em {
	font-family: var( --font-serif );
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.02em;
	color: var( --pink );
	/* Tenčí obrys než v hero — ve velikosti hlavičky by 1,5 px kresbu zalil. */
	-webkit-text-stroke: 0.6px var( --color-ink );
}

/* Na homepage stojí název v hero, tak ať ho hlavička nezdvojuje. Objeví se až
   ve chvíli, kdy se lišta při scrollu přilepí (třídu `is-stuck` dává base ui.js).
   Skrývá se průhledností, ne `display`, aby hlavička neposkakovala — a fokus ji
   vždycky vrátí zpátky, jinak by klávesnice mířila na neviditelný odkaz. */
.home .site-header .brand {
	opacity: 0;
	transform: translateY( -6px );
	pointer-events: none;
	transition: opacity 0.22s ease, transform 0.22s ease;
}

.home .site-header.is-stuck .brand,
.home .site-header .brand:focus-visible {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

@media ( prefers-reduced-motion: reduce ) {
	.home .site-header .brand {
		transition: none;
		transform: none;
	}
}

.nav__list > .menu-item > a,
.footer-nav__list > .menu-item > a {
	font-family: var( --font-display );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --color-ink );
	text-decoration: none;
}

/* Fialová a podtržení jsou STAVY, ne výchozí podoba odkazu.
   Pozor na `current-menu-item`: tu WordPress na one-pageru rozdá všem položkám,
   protože odkaz `/#kotva` vyhodnotí jako aktuální stránku — nesmí se na ni tedy
   nic vázat. Aktivní sekci značí `is-current-section`, kterou podle scrollu
   nastavuje assets/js/matky.js. */
/* Base si pod položkami kreslí vlastní linku přes `a::after` a zapíná ji podle
   `aria-current` — a to WordPress na one-pageru přiřadí zase všem položkám.
   Vypnout; stav řeší podtržení níž, jinak by byly linky dvě. */
.nav__list > .menu-item > a::after {
	display: none;
}

.nav__list > .menu-item > a:hover,
.nav__list > .menu-item > a:focus-visible,
.nav__list > .menu-item.is-current-section > a {
	color: var( --violet );
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

.menu-overlay {
	background: var( --lilac );
}

.menu-overlay__list > .menu-item > a {
	font-family: var( --font-display );
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	color: var( --color-ink );
}

/* ---------------------------------------------------------
   Buttons — core blocks + the base's .btn used by entangle chrome.
   Poster style: square, hard border, offset shadow, no radius.
   --------------------------------------------------------- */

.wp-block-button__link.wp-element-button,
.btn,
.ff-btn-submit {
	display: inline-block;
	border: var( --border-hard );
	border-radius: 0;
	background: var( --color-ink );
	color: var( --color-bg );
	font-family: var( --font-display );
	font-size: var( --wp--preset--font-size--compact );
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0.85em 1.5em;
	box-shadow: var( --shadow-hard-pink );
	transition: transform 0.14s var( --ease-emphasized, ease ), box-shadow 0.14s ease, background 0.14s ease, color 0.14s ease;
}

.wp-block-button__link.wp-element-button:hover,
.btn:hover,
.ff-btn-submit:hover {
	background: var( --pink );
	color: var( --color-ink );
	transform: translate( -3px, -3px );
	box-shadow: 9px 9px 0 var( --color-ink );
}

.wp-block-button__link.wp-element-button:active,
.btn:active,
.ff-btn-submit:active {
	transform: translate( 2px, 2px );
	box-shadow: 2px 2px 0 var( --color-ink );
}

/* Header CTA — pink by default so it reads as the one action on the page. */
.site-header__cta.btn-accent,
.btn-accent {
	background: var( --pink );
	color: var( --color-ink );
	box-shadow: 4px 4px 0 var( --color-ink );
	padding: 0.7em 1.2em;
}

.site-header__cta.btn-accent:hover,
.btn-accent:hover {
	background: var( --color-ink );
	color: var( --color-bg );
	box-shadow: 7px 7px 0 var( --pink );
}

.btn-ghost {
	background: transparent;
	color: var( --color-ink );
	box-shadow: none;
}

.btn-ghost:hover {
	background: var( --color-ink );
	color: var( --color-bg );
	box-shadow: none;
}

/* On the violet section the shadow flips so it stays visible. */
.sec-violet .wp-block-button__link.wp-element-button {
	background: var( --pink );
	color: #10110e;
	border-color: #10110e;
	box-shadow: 6px 6px 0 #10110e;
}

.sec-violet .wp-block-button__link.wp-element-button:hover {
	background: var( --color-bg );
	color: #10110e;
}

/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */

.hero-mz {
	/* Nahoře co nejblíž hlavičce — na homepage hlavička nemá ani značku, ani linku,
	   takže hero může začít prakticky hned. Dole naopak vzduch, aby ilustrace
	   nenarážela do růžového pruhu. */
	padding-top: clamp( 8px, 1.4vw, 20px );
	padding-bottom: clamp( 28px, 3.2vw, 56px );
	overflow: clip;
}

.hero-mz .wrap {
	display: grid;
	grid-template-columns: minmax( 0, 1.12fr ) minmax( 0, 0.88fr );
	align-items: end;
	column-gap: clamp( 12px, 2vw, 32px );
}

/* Core's flow layout puts a blockGap margin on every child; in a grid that just
   pushes the columns apart unevenly. */
.hero-mz .wrap > * {
	margin-block: 0;
}

/* Text a tlačítko na výšku uprostřed proti ilustraci; ta si drží `align-self: end`,
   takže stojí na spodní hraně sekce. Dřív tu bylo spodní odsazení, kterým se blok
   od dna odrážel — při centrování nemá co dělat. */
.hero-mz__copy {
	position: relative;
	z-index: 2;
	align-self: center;
}

/* The size comes from the `display` preset on the block (editable in the sidebar);
   core's .has-*-font-size is !important, so never restate font-size here. */
.hero-mz__copy h1 {
	margin: 0 0 clamp( 18px, 2.6vw, 34px );
	font-family: var( --font-display );
	/* Plakátová velikost patří jen hero. Preset `display` zůstává rozumnou
	   velikostí H1 pro podstránky, proto na tomhle bloku ŽÁDNÝ preset není —
	   `.has-*-font-size` je `!important` a odsud by se nedal přebít. */
	font-size: clamp( 3rem, 9.5vw, 8.5rem );
	/* Lehká váha proti tučnému zbytku webu: „matky se“ drží velikost, ale ne
	   tloušťku, takže kurzivní „zlobí“ zůstane tím hlasitým slovem. */
	font-weight: 400;
	line-height: 0.84;
	letter-spacing: -0.03em;
	/* Žádný přesah do druhého sloupce: v šířce svého sloupce se nadpis zlomí na
	   dva řádky („matky se“ / „zlobí“) a nechá ilustraci být. Dřív tu byl
	   záporný pravý margin, kterým měl podjíždět pod koně — ve výsledku do něj
	   narážel. */
}

.hero-mz__copy h1 em {
	font-family: var( --font-serif );
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.02em;
	text-transform: none;
	color: var( --pink );
	-webkit-text-stroke: 1.5px var( --color-ink );
}

.hero-mz__lead {
	max-width: 30ch;
	margin: 0 0 clamp( 20px, 3vw, 34px );
	font-size: var( --wp--preset--font-size--lead );
	line-height: 1.32;
	font-weight: 500;
	text-wrap: pretty;
}

.hero-mz__illu {
	position: relative;
	z-index: 1;
	margin: 0;
	align-self: end;
	justify-self: end;
	width: min( 108%, 720px );
	margin-inline-end: calc( var( --gutter ) * -1 );
}

/* A pink burst behind the transparent illustration, so it sits on a ground. */
.hero-mz__illu::before {
	content: "";
	position: absolute;
	inset: 12% -6% 6% -6%;
	z-index: -1;
	background: radial-gradient( closest-side, var( --lilac ) 0%, rgba( 150, 150, 247, 0.55 ) 62%, rgba( 150, 150, 247, 0 ) 100% );
}

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

/* ---------------------------------------------------------
   entangle/side-section — "Kdo jsme"
   The block renders its own `.side-section.container`, so it must not sit
   inside a .wrap.
   --------------------------------------------------------- */

.wp-block-entangle-side-section .side-section__title {
	font-family: var( --font-display );
	font-weight: 800;
	line-height: 0.94;
	letter-spacing: -0.035em;
	text-transform: uppercase;
}

.wp-block-entangle-side-section .side-section__content > p {
	font-size: var( --wp--preset--font-size--lead );
	line-height: 1.45;
	max-width: 62ch;
}

.wp-block-entangle-side-section .side-section__content > p + p {
	margin-top: 0.8em;
}

.wp-block-entangle-side-section .side-section__rules i {
	background: var( --color-ink );
	opacity: 0.14;
}

/* ---------------------------------------------------------
   entangle/cards — "Zlobíme se, protože"
   Cards carry a big number (tag) and the claim (title). No icons, no text.
   --------------------------------------------------------- */

/* 2px gap over an ink background = hairline grid lines, no double borders. */
.reasons.cards--grid {
	display: grid;
	gap: 2px;
	border: var( --border-hard );
	background: var( --color-ink );
}

.reasons .card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.55em;
	padding: clamp( 22px, 2.6vw, 38px );
	/* Deliberately more air under the claim than above the number: the cards then
	   read as separate blocks instead of tightly stacked rows. */
	padding-bottom: clamp( 42px, 4.8vw, 68px );
	background: var( --color-bg );
	border: 0;
	border-radius: 0;
	transition: background 0.16s ease, color 0.16s ease;
}

/* An odd card count would leave the grid's ink background showing through the
   empty cell — the last one spans the full row instead. */
.reasons .card:last-child:nth-child( odd ) {
	grid-column: 1 / -1;
}

/* Hover se odehraje jen na čísle — pozadí zůstává papírové, aby všech sedm
   důvodů drželo stejnou čtecí váhu. `transform: none` ruší nadzvednutí,
   které přidává base přes .cards--hover-lift-brand. */
.reasons .card:hover {
	transform: none;
}

.reasons .card__tag {
	font-family: var( --font-display );
	font-size: clamp( 2.2rem, 4vw, 3.4rem ) !important;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	text-transform: none;
	color: var( --violet ) !important;
}

.reasons .card:hover .card__tag {
	color: var( --pink ) !important;
}

.reasons .card__title {
	margin: 0;
	font-family: var( --font-sans );
	font-size: var( --wp--preset--font-size--lead ) !important;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.01em;
	text-wrap: pretty;
}

.reasons .card__title strong {
	font-weight: 700;
	background: linear-gradient( transparent 62%, rgba( 250, 92, 211, 0.55 ) 0 );
}


/* ---------------------------------------------------------
   Statement band — the big italic pull quote
   --------------------------------------------------------- */

.statement {
	margin: 0;
	font-family: var( --font-serif );
	font-size: clamp( 2rem, 6vw, 4.75rem );
	font-style: italic;
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

.statement strong {
	font-family: var( --font-display );
	font-style: normal;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.04em;
}

.statement-note {
	margin: clamp( 18px, 3vw, 30px ) 0 0;
	max-width: 56ch;
	font-size: var( --wp--preset--font-size--lead );
	line-height: 1.4;
}

/* ---------------------------------------------------------
   Sign-up section + Fluent Forms adapters
   --------------------------------------------------------- */

.signup .wrap {
	display: grid;
	grid-template-columns: minmax( 0, 0.9fr ) minmax( 0, 1.1fr );
	gap: clamp( 32px, 5vw, 80px );
	align-items: start;
}

.signup__intro h2 {
	margin: 0 0 clamp( 16px, 2.4vw, 26px );
	font-size: var( --wp--preset--font-size--section-title );
	line-height: 0.94;
	text-transform: uppercase;
}

.signup__intro p {
	max-width: 42ch;
	font-size: var( --wp--preset--font-size--lead );
	line-height: 1.4;
}

.signup__form {
	background: var( --color-bg );
	border: 2px solid #10110e;
	box-shadow: 10px 10px 0 var( --pink );
	padding: clamp( 22px, 3vw, 40px );
}

.signup__form,
.signup__form p,
.signup__form label,
.signup__form h2 {
	color: #10110e;
}

.signup__form .fluentform {
	margin: 0;
}

.signup__form .ff-el-group {
	margin-bottom: 18px;
}

.signup__form .ff-el-input--label label {
	font-family: var( --font-display );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #10110e;
	margin-bottom: 6px;
}

.signup__form .ff-el-input--label.ff-el-is-required label::after {
	color: var( --red );
}

/* Jméno + Příjmení side by side (Fluent Forms' native name element). */
.signup__form .ff-name-field-wrapper .ff-t-container {
	display: flex;
	flex-wrap: wrap;
	gap: 0 16px;
}

.signup__form .ff-name-field-wrapper .ff-t-cell {
	flex: 1 1 160px;
	padding-inline: 0;
}

.signup__form input[type="text"],
.signup__form input[type="email"],
.signup__form input[type="tel"],
.signup__form input[type="number"],
.signup__form select,
.signup__form textarea {
	width: 100%;
	border: 2px solid #10110e;
	border-radius: 0;
	background: #fff;
	padding: 0.72em 0.85em;
	font-family: var( --font-sans );
	font-size: var( --wp--preset--font-size--compact );
	color: #10110e;
	box-shadow: none;
	transition: box-shadow 0.14s ease;
}

.signup__form input:focus,
.signup__form select:focus,
.signup__form textarea:focus {
	outline: 0;
	box-shadow: 4px 4px 0 var( --violet );
}

.signup__form ::placeholder {
	color: #6f6b62;
	opacity: 1;
}

.signup__form .ff-el-form-check-label,
.signup__form .ff-el-form-check {
	font-size: var( --wp--preset--font-size--small );
	line-height: 1.45;
}

/* Souhlas je povinný a je to jediné zaškrtávátko na stránce — ať se do něj dá
   trefit. 24 px je i rozumný dotykový cíl. Zůstává nativní (jen `accent-color`),
   protože překreslený checkbox by rozbil stavy, které si Fluent Forms hlídá sám. */
.signup__form .ff-el-form-check-label {
	display: flex;
	align-items: flex-start;
	cursor: pointer;
}

.signup__form .ff-el-form-check-input[type="checkbox"] {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	margin: 0 12px 0 0;
	accent-color: var( --violet );
	cursor: pointer;
}

.signup__form .ff-el-form-check-label a {
	color: var( --violet );
}

.signup__form .ff-btn-submit {
	width: 100%;
	cursor: pointer;
	font-size: var( --wp--preset--font-size--body );
	background: var( --violet );
	color: #f3f0e9;
	border-color: #10110e;
	box-shadow: 6px 6px 0 #10110e;
}

.signup__form .ff-btn-submit:hover {
	background: var( --pink );
	color: #10110e;
}

.signup__form .ff-el-is-error input,
.signup__form .ff-el-is-error select {
	border-color: var( --red );
}

.signup__form .error,
.signup__form .text-danger,
.signup__form .error-text {
	color: var( --red );
	font-size: var( --wp--preset--font-size--small );
}

/* Nejdůležitější věta na celé stránce: po odeslání je to jediné, co z formuláře
   zbyde, a musí se z ní dát vyčíst, že přijde ještě potvrzovací e-mail. Karta ji
   rámuje sama, takže žádný další box — jen tmavá typografie na papíře (kontrast
   ~19:1 proti dřívějším lila ~7:1) a růžová linka jako signál. */
.signup__form .ff-message-success {
	border: 0;
	border-top: 6px solid var( --pink );
	/* Fluent Forms kolem hlášky kreslí vlastní rámeček a stín
	   (`1px solid #ced4da` + `0 1px 5px`) — v téhle kartě jen ruší. */
	box-shadow: none;
	background: transparent;
	padding: clamp( 22px, 3vw, 32px ) 0 0;
	color: #10110e;
}

/* Poznámka o zpracování údajů pomáhá při rozhodování, jestli formulář odeslat.
   Po odeslání je rozhodnuto a odvádí pozornost od toho podstatného — že má ještě
   přijít potvrzovací e-mail. */
.signup__form:has( .ff-message-success ) .signup__note {
	display: none;
}

.signup__form .ff-message-success p {
	margin: 0;
	color: inherit;
	font-family: var( --font-display );
	/* Pozor na `h-3`, ne `h3`: WordPress v názvech proměnných čísla odděluje. */
	font-size: var( --wp--preset--font-size--h-3 );
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.02em;
	text-wrap: pretty;
}

.signup__form .ff-message-success p + p {
	margin-top: 0.6em;
	font-family: var( --font-sans );
	font-size: var( --wp--preset--font-size--compact );
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
}

.signup__note {
	margin: 16px 0 0;
	font-size: var( --wp--preset--font-size--small );
	line-height: 1.5;
	opacity: 0.85;
}

/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */

/* The footer is deliberately thin: the closing argument and the CTA live in the
   page (Proto se organizujeme + Přidej se), repeating them here read as filler. */
.ftr {
	background: var( --color-ink );
	color: var( --color-bg );
}

.ftr .footer-nav {
	border-bottom: 1px solid rgba( 243, 240, 233, 0.25 );
}

/* Vyhledávání web nemá (hlavička ho má vypnuté přes showSearch), tak ať ho
   nenabízí ani patička — blok pro něj nemá atribut. */
.ftr .footer-nav__search {
	display: none;
}

.ftr .footer-nav__list > .menu-item > a,
.ftr .footer-nav__search,
.ftr .footer-nav__social a {
	color: var( --color-bg );
}

.ftr .footer-nav__list > .menu-item > a:hover,
.ftr .footer-nav__social a:hover {
	color: var( --pink );
}

.ftr .footer-colophon {
	padding-block: clamp( 18px, 2.4vw, 28px );
	color: rgba( 243, 240, 233, 0.6 );
}

.ftr .footer-colophon__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 10px 24px;
}

.ftr .footer-colophon p {
	margin: 0;
	color: inherit;
}

.ftr .footer-colophon a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ftr .footer-colophon a:hover {
	color: var( --pink );
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media ( max-width: 1024px ) {
	.hero-mz .wrap {
		grid-template-columns: 1fr;
		row-gap: clamp( 8px, 3vw, 24px );
	}

	.hero-mz__copy h1 {
		margin-right: 0;
		font-size: clamp( 3rem, 13.5vw, 7rem );
	}

	.hero-mz__illu {
		width: min( 100%, 560px );
		justify-self: center;
		margin-inline-end: 0;
	}

	.signup .wrap {
		grid-template-columns: 1fr;
	}
}

@media ( max-width: 780px ) {
	html {
		scroll-padding-top: 76px;
	}

	.hero-mz__lead {
		max-width: none;
	}

	.reasons.cards--grid {
		grid-template-columns: 1fr !important;
	}
}