/**
 * eatoplan - App Landing page styles.
 *
 * Scoped under `.etp` so nothing leaks into the rest of the site and nothing
 * from the parent theme decides layout here.
 *
 * Structure: mobile-first base, then a single `min-width: 1024px` block that
 * restores the desktop design's exact measured values (widths, paddings, type
 * sizes, radii, gaps). Values below are taken from the source design, not
 * approximated.
 *
 * @package Eatoplan
 */

/* ==========================================================================
   1. Fonts (self-hosted Nunito variable, SIL OFL - see assets/fonts/OFL.txt)
   ========================================================================== */

@font-face {
	font-family: "Nunito";
	font-style: normal;
	font-weight: 400 1000;
	font-display: swap;
	src: url("../fonts/nunito-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
		U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Nunito";
	font-style: normal;
	font-weight: 400 1000;
	font-display: swap;
	src: url("../fonts/nunito-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
		U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
		U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   2. Design tokens
   ========================================================================== */

.etp {
	--etp-bg: #faf5ee;
	--etp-bg-alt: #f1eadd;
	--etp-surface: #fff;
	--etp-navy: #12303f;
	--etp-mint: #e4f5ec;
	--etp-sand: #fbeed8;
	--etp-blush: #f8e2db;
	--etp-slate: #e7eef2;

	--etp-ink: #12303f;
	--etp-ink-soft: #4e6470;
	--etp-ink-mute: #5a6872;
	--etp-on-navy-soft: #b7c6ce;
	--etp-on-navy-mute: #8197a2;
	--etp-on-navy-name: #8fa6b2;

	--etp-green: #238655;
	--etp-green-dark: #1a7d4d;
	--etp-green-accent: #1f794d;
	--etp-green-solid-hover: #1b6a44;
	--etp-green-pale: #7fe3ae;
	--etp-green-body: #3e795c;
	--etp-amber: #936319;
	--etp-amber-dark: #936319;
	--etp-clay: #a94b34;
	--etp-clay-soft: #a94b34;

	--etp-line: #ece4d8;

	--etp-shadow-card: 0 16px 40px rgba(18, 48, 63, 0.07);
	--etp-shadow-flat: 0 0 0 1px var(--etp-line);
	--etp-shadow-phone: 0 40px 90px rgba(18, 48, 63, 0.35);
	--etp-shadow-phone-card: 0 14px 30px rgba(47, 182, 115, 0.3);
	--etp-shadow-submit: 0 12px 26px rgba(47, 182, 115, 0.32);

	--etp-page-x: 20px;
}

/* ==========================================================================
   3. Base
   ========================================================================== */

:where(.etp) *,
:where(.etp) *::before,
:where(.etp) *::after {
	box-sizing: border-box;
}

.etp {
	margin: 0;
	background: var(--etp-bg);
	color: var(--etp-ink);
	font-family: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

:where(.etp) :where(img, svg) {
	max-width: 100%;
}

:where(.etp) :where(img) {
	height: auto;
}

:where(.etp) :where(h1, h2, h3, h4, p) {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
}

:where(.etp) :where(ul) {
	margin: 0;
	padding: 0;
	list-style: none;
}

:where(.etp) :where(a) {
	color: var(--etp-green-accent);
	text-decoration: none;
}

:where(.etp) :where(a):hover {
	color: var(--etp-green-dark);
}

.etp :focus-visible {
	outline: 3px solid var(--etp-navy);
	outline-offset: 3px;
	border-radius: 6px;
}

.etp-skip {
	position: absolute;
	top: 0;
	left: -9999px;
	z-index: 100;
	padding: 12px 20px;
	border-radius: 0 0 14px 0;
	background: var(--etp-navy);
	color: #fff;
	font-weight: 800;
}

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

.etp-skip:focus {
	left: 0;
	color: #fff;
}

/* ==========================================================================
   4. Layout primitives
   ========================================================================== */

.etp-shell {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--etp-page-x);
}

.etp-shell--1100 {
	max-width: 1100px;
}

.etp-shell--1000 {
	max-width: 1000px;
}

.etp-shell--900 {
	max-width: 900px;
}

.etp-split {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	align-items: center;
}

.etp-split__main {
	flex: 1 1 320px;
	min-width: 0;
}

.etp-center {
	text-align: center;
}

/* ==========================================================================
   5. Type
   ========================================================================== */

.etp-eyebrow {
	display: inline-block;
	padding: 9px 18px;
	border-radius: 99px;
	background: var(--etp-mint);
	color: var(--etp-green-dark);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 2px;
	line-height: normal;
	text-transform: uppercase;
}

.etp-eyebrow--clay {
	background: var(--etp-blush);
	color: var(--etp-clay);
}

.etp-eyebrow--sand {
	background: var(--etp-sand);
	color: var(--etp-amber-dark);
}

.etp-eyebrow--slate {
	background: var(--etp-slate);
	color: var(--etp-ink);
}

.etp-h1 {
	font-size: 38px;
	font-weight: 900;
	line-height: 1.04;
	letter-spacing: -1px;
}

.etp-h2 {
	font-size: 30px;
	font-weight: 900;
	line-height: 1.15;
	letter-spacing: -0.5px;
}

.etp-lead {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--etp-ink-soft);
}

.etp-body {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--etp-ink-soft);
}

.etp-note {
	font-size: 16px;
	font-weight: 700;
	color: var(--etp-ink-mute);
	line-height: normal;
}

.etp-accent {
	color: var(--etp-green-accent);
}

.etp-word {
	font-weight: 700;
}

.etp-word--steady {
	color: var(--etp-green-dark);
}

.etp-word--little {
	color: var(--etp-amber-dark);
}

.etp-word--spikes {
	color: var(--etp-clay);
}

/* ==========================================================================
   6. Bands
   ========================================================================== */

.etp-band--navy {
	margin-top: 40px;
	background: var(--etp-navy);
	color: #fff;
}

.etp-band--navy .etp-lead {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
	color: var(--etp-on-navy-soft);
}

.etp-band--navy .etp-accent {
	color: var(--etp-green-pale);
}

.etp-band--sand {
	background: var(--etp-bg-alt);
}

.etp-band--mint {
	background: var(--etp-mint);
}

.etp-band--white {
	background: var(--etp-surface);
	border-top: 1px solid var(--etp-line);
}

/* ==========================================================================
   7. Header
   ========================================================================== */

.etp-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(250, 245, 238, 0.9);
	border-bottom: 1px solid var(--etp-line);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.etp-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-top: 14px;
	padding-bottom: 14px;
}

.etp-header__logo {
	display: block;
	width: auto;
	height: 32px;
}

.etp-nav {
	display: flex;
	align-items: center;
	gap: 16px;
}

.etp-nav__list {
	display: none;
	align-items: center;
	gap: 36px;
}

.etp-nav__link {
	color: var(--etp-ink-soft);
	font-size: 17px;
	font-weight: 800;
	line-height: normal;
}

.etp-nav__link:hover,
.etp-nav__link:focus-visible {
	color: var(--etp-green-dark);
}

.etp-nav__cta {
	display: inline-block;
	padding: 12px 24px;
	border-radius: 14px;
	background: var(--etp-green);
	color: #fff;
	font-size: 17px;
	font-weight: 800;
	white-space: nowrap;
	line-height: normal;
}

.etp-nav__cta:hover,
.etp-nav__cta:focus-visible {
	background: var(--etp-green-dark);
	color: #fff;
}

/* ==========================================================================
   8. Hero
   ========================================================================== */

.etp-hero {
	padding-top: 40px;
	padding-bottom: 40px;
}

.etp-hero__eyebrow-row {
	margin: 0;
}

.etp-hero__title {
	margin-top: 24px;
}

.etp-hero__sub {
	margin-top: 22px;
	max-width: 520px;
}

.etp-hero__reassure {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 26px;
	color: var(--etp-ink-mute);
	font-size: 16px;
	font-weight: 700;
	line-height: normal;
}

.etp-hero__reassure svg {
	flex: none;
}

.etp-hero__art {
	position: relative;
	flex: 1 1 300px;
	display: flex;
	justify-content: center;
}

.etp-hero__glow {
	position: absolute;
	inset: -40px -20px;
	background: radial-gradient(circle at 60% 40%, rgba(47, 182, 115, 0.18), transparent 70%);
	pointer-events: none;
}

/* Store badges */
.etp-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 34px;
}

.etp-badge {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 26px;
	border-radius: 16px;
	background: var(--etp-navy);
	color: #fff;
	font-size: 18px;
	font-weight: 800;
	line-height: normal;
}

.etp-badge:hover,
.etp-badge:focus-visible {
	background: #0b2130;
	color: #fff;
}

.etp-badge__text {
	text-align: left;
}

.etp-badge__kicker {
	display: block;
	font-size: 13px;
	font-weight: 800;
	line-height: normal;
}

.etp-badge__name {
	display: block;
	font-size: 19px;
	font-weight: 900;
	line-height: 1;
}

/* ==========================================================================
   9. Phone illustration
   ========================================================================== */

.etp-phone {
	position: relative;
	width: min(340px, 100%);
	aspect-ratio: 340 / 700;
	padding: 11px;
	border-radius: 46px;
	background: var(--etp-navy);
	box-shadow: var(--etp-shadow-phone);
}

.etp-phone__screen {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	border-radius: 36px;
	background: var(--etp-bg);
	overflow: hidden;
}

.etp-phone__notch {
	position: absolute;
	top: 12px;
	left: 50%;
	z-index: 20;
	width: 100px;
	height: 26px;
	border-radius: 14px;
	background: var(--etp-navy);
	transform: translateX(-50%);
}

.etp-phone__status {
	display: flex;
	justify-content: space-between;
	padding: 16px 26px 4px;
	font-size: 14px;
	font-weight: 800;
	line-height: normal;
}

.etp-phone__body {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 14px 22px 20px;
}

.etp-phone__greeting {
	font-size: 15px;
	font-weight: 700;
	color: var(--etp-ink-mute);
	line-height: normal;
}

.etp-phone__name {
	margin-bottom: 16px;
	font-size: 26px;
	font-weight: 900;
	line-height: normal;
}

.etp-phone__card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 22px;
	border-radius: 24px;
	background: var(--etp-green);
	box-shadow: var(--etp-shadow-phone-card);
}

.etp-phone__card-icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 99px;
	background: rgba(255, 255, 255, 0.22);
}

.etp-phone__card-title {
	display: block;
	font-size: 23px;
	font-weight: 900;
	line-height: 1.1;
	color: #fff;
}

.etp-phone__card-sub {
	display: block;
	margin-top: 3px;
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	line-height: normal;
}

.etp-phone__row {
	display: flex;
	gap: 12px;
	margin-top: 14px;
}

.etp-phone__tile {
	flex: 1;
	min-width: 0;
	padding: 15px;
	border: 1px solid var(--etp-line);
	border-radius: 18px;
	background: var(--etp-surface);
}

.etp-phone__tile-label {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--etp-ink-mute);
	line-height: normal;
}

.etp-phone__tile-value {
	margin-top: 6px;
	font-size: 18px;
	font-weight: 900;
	line-height: 1.15;
}

.etp-phone__tile-value--big {
	margin-top: 4px;
	font-size: 30px;
	line-height: 1;
}

.etp-phone__tile-sub {
	margin-top: 2px;
	font-size: 13px;
	font-weight: 700;
	color: var(--etp-ink-mute);
	line-height: normal;
}

.etp-phone__log {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	height: 66px;
	margin-top: auto;
	border-radius: 20px;
	background: var(--etp-navy);
	color: #fff;
	font-size: 22px;
	font-weight: 900;
	line-height: normal;
}

.etp-chip {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 99px;
	background: var(--etp-mint);
	color: var(--etp-green-dark);
	font-size: 12px;
	font-weight: 800;
	white-space: nowrap;
	line-height: normal;
}

.etp-phone__tile .etp-chip {
	margin-top: 8px;
}

/* ==========================================================================
   10. Sections and cards
   ========================================================================== */

.etp-section {
	padding-top: 56px;
	padding-bottom: 56px;
}

.etp-section--how {
	padding-bottom: 28px;
}

.etp-section--patterns {
	padding-top: 40px;
	padding-bottom: 40px;
}

.etp-section-title {
	margin-top: 20px;
	line-height: normal;
}

.etp-h2--patterns {
	line-height: 1.12;
}

.etp-section-title--kitchen {
	line-height: 1.12;
}

.etp-section-note {
	margin-top: 16px;
}

.etp-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

.etp-grid--steps {
	gap: 24px;
	margin-top: 36px;
}

.etp-grid--features {
	margin-top: 24px;
}

.etp-card {
	display: flex;
	flex-direction: column;
	padding: 28px;
	border-radius: 22px;
	background: var(--etp-surface);
	text-align: left;
}

.etp-card--step {
	padding: 36px 30px;
	border-radius: 26px;
	box-shadow: var(--etp-shadow-card);
}

.etp-card--outline {
	box-shadow: var(--etp-shadow-flat);
}

.etp-card__icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 15px;
	background: var(--etp-mint);
}

.etp-card--step .etp-card__icon {
	width: 64px;
	height: 64px;
	border-radius: 18px;
}

.etp-card__icon--sand {
	background: var(--etp-sand);
}

.etp-card__icon--blush {
	background: var(--etp-blush);
}

.etp-card__icon--slate {
	background: var(--etp-slate);
}

.etp-card__step {
	margin-top: 22px;
	font-size: 15px;
	font-weight: 800;
	color: var(--etp-green);
	line-height: normal;
}

.etp-card__step--sand {
	color: var(--etp-amber);
}

.etp-card--step .etp-card__title {
	margin-top: 6px;
	font-size: 26px;
}

.etp-card--step .etp-card__text {
	margin-top: 10px;
	font-size: 18px;
	line-height: 1.5;
}

.etp-card__title {
	margin-top: 16px;
	font-size: 22px;
	font-weight: 900;
	line-height: 1.2;
}

.etp-card__text {
	margin-top: 6px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.45;
	color: var(--etp-ink-soft);
}

.etp-card__flag {
	align-self: flex-start;
	margin-top: 14px;
	background: var(--etp-slate);
	color: var(--etp-ink);
}

.etp-subhead {
	margin-top: 40px;
	font-size: 22px;
	font-weight: 900;
	line-height: normal;
}

/* ==========================================================================
   11. Patterns
   ========================================================================== */

.etp-impact-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 26px;
	max-width: 460px;
}

.etp-impact {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	border: 1px solid var(--etp-line);
	border-left: 8px solid var(--etp-green);
	border-radius: 18px;
	background: var(--etp-surface);
}

.etp-impact--spikes {
	border-left-color: var(--etp-clay-soft);
}

.etp-impact__name {
	flex: 1;
	font-size: 20px;
	font-weight: 900;
	line-height: normal;
}

.etp-impact .etp-chip {
	padding: 6px 14px;
	font-size: 15px;
}

.etp-chip--spikes {
	background: var(--etp-blush);
	color: var(--etp-clay);
}

.etp-aside {
	flex: 1 1 260px;
	max-width: 300px;
	padding: 40px;
	border-radius: 32px;
	background: var(--etp-mint);
	text-align: center;
}

.etp-aside__label {
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--etp-green-dark);
	line-height: normal;
}

.etp-aside__disc {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 120px;
	height: 120px;
	margin: 20px auto;
	border-radius: 99px;
	background: var(--etp-surface);
}

.etp-aside__value {
	font-size: 26px;
	font-weight: 900;
	color: var(--etp-ink);
	line-height: normal;
}

.etp-aside__text {
	margin-top: 6px;
	font-size: 17px;
	font-weight: 700;
	color: var(--etp-green-body);
	line-height: normal;
}

/* ==========================================================================
   12. Kitchen
   ========================================================================== */

.etp-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 24px;
}

.etp-tag {
	padding: 10px 18px;
	border: 1px solid var(--etp-line);
	border-radius: 99px;
	background: var(--etp-surface);
	font-size: 17px;
	font-weight: 800;
	line-height: normal;
}

.etp-story {
	flex: 1 1 300px;
	max-width: 360px;
	padding: 40px;
	border-radius: 32px;
	background: var(--etp-navy);
}

.etp-story__title {
	font-size: 30px;
	font-weight: 900;
	line-height: 1.2;
	color: #fff;
}

.etp-story__text {
	margin-top: 20px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.55;
	color: var(--etp-on-navy-soft);
}

/* ==========================================================================
   13. Privacy
   ========================================================================== */

.etp-shield {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 88px;
	margin: 0 auto;
	border-radius: 99px;
	background: var(--etp-surface);
}

.etp-privacy__title {
	margin-top: 24px;
	font-size: 34px;
	line-height: normal;
}

.etp-privacy__text {
	margin-top: 18px;
	line-height: 1.55;
	color: var(--etp-green-body);
}

.etp-privacy__text b {
	color: var(--etp-navy);
}

/* ==========================================================================
   14. Signup
   ========================================================================== */

.etp-signup__logo {
	display: block;
	width: auto;
	height: 48px;
	margin: 0 auto;
}

.etp-signup__title {
	margin-top: 28px;
	line-height: 1.1;
}

.etp-signup__sub {
	margin-top: 16px;
}

.etp-signup__form {
	margin-top: 32px;
}

.etp-signup__form .wpcf7-form > p {
	margin: 0;
}

.etp-signup__form .qodef-horizontal-form {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

.etp-signup__form .wpcf7-form-control-wrap {
	display: block;
	flex: 0 1 340px;
}

.etp-signup__form input[type="email"] {
	width: 100%;
	height: 64px;
	padding: 0 22px;
	border: 2px solid var(--etp-line);
	border-radius: 16px;
	background: var(--etp-surface);
	color: var(--etp-ink);
	font-family: inherit;
	font-size: 19px;
	font-weight: 700;
}

.etp-signup__form input[type="email"]::placeholder {
	color: #6a7981;
	opacity: 1;
}

.etp-signup__form .wpcf7-submit {
	height: 64px;
	padding: 0 32px;
	border: 0;
	border-radius: 16px;
	background: var(--etp-green);
	color: #fff;
	font-family: inherit;
	font-size: 19px;
	font-weight: 900;
	cursor: pointer;
	box-shadow: var(--etp-shadow-submit);
}

.etp-signup__form .wpcf7-submit:hover,
.etp-signup__form .wpcf7-submit:focus-visible {
	background: var(--etp-green-dark);
	color: #fff;
}

.etp-signup__form .wpcf7-spinner {
	display: block;
	margin: 12px auto 0;
}

.etp-signup__form .wpcf7-response-output {
	margin: 16px auto 0;
	max-width: 700px;
	padding: 12px 16px;
	border: 2px solid var(--etp-line);
	border-radius: 16px;
	background: var(--etp-surface);
	font-size: 16px;
	font-weight: 700;
	color: var(--etp-ink-soft);
}

.etp-signup__form .wpcf7-not-valid-tip {
	margin-top: 8px;
	color: var(--etp-clay);
	font-size: 15px;
	font-weight: 800;
	text-align: left;
}

.etp-signup__note {
	margin-top: 20px;
	font-size: 17px;
}

.etp-signup__badges {
	justify-content: center;
	opacity: 0.8;
}

/* ==========================================================================
   15. Legal
   ========================================================================== */

.etp-legal-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin-top: 36px;
}

.etp-legal-card {
	display: flex;
	flex-direction: column;
	padding: 28px;
	border: 1px solid var(--etp-line);
	border-radius: 22px;
	background: var(--etp-bg);
}

.etp-legal-card__title {
	margin-top: 14px;
	font-size: 22px;
	font-weight: 900;
	line-height: normal;
}

.etp-legal-card__text {
	margin-top: 10px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.45;
	color: var(--etp-ink-soft);
}

.etp-legal-card__link {
	align-self: flex-start;
	margin-top: 18px;
	font-size: 17px;
	font-weight: 800;
	line-height: normal;
}

/* ==========================================================================
   16. Footer
   ========================================================================== */

.etp-footer {
	background: var(--etp-navy);
	color: #fff;
}

.etp-footer__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: center;
	justify-content: space-between;
	padding-top: 40px;
	padding-bottom: 40px;
}

.etp-footer__logo {
	width: auto;
	height: 36px;
	opacity: 0.95;
	filter: brightness(0) invert(1);
}

.etp-footer__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 30px;
}

.etp-footer__link {
	color: var(--etp-on-navy-soft);
	font-size: 16px;
	font-weight: 700;
	line-height: normal;
}

.etp-footer__link:hover,
.etp-footer__link:focus-visible {
	color: #fff;
}

.etp-footer__link,
.etp-legal-card__link {
	padding-block: 4px;
}

.etp-footer__fine {
	font-size: 15px;
	font-weight: 700;
	color: var(--etp-on-navy-mute);
	line-height: normal;
}

/* ==========================================================================
   17. Tablet
   ========================================================================== */

@media (min-width: 640px) {
	.etp {
		--etp-page-x: 32px;
	}

	.etp-grid--steps,
	.etp-grid--features {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.etp-legal-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ==========================================================================
   18. Desktop - exact design values
   ========================================================================== */

@media (min-width: 1024px) {
	.etp-split {
		flex-wrap: nowrap;
		gap: 56px;
	}

	.etp-header__inner {
		padding-top: 18px;
		padding-bottom: 18px;
	}

	.etp-header__logo {
		height: 40px;
	}

	.etp-nav {
		gap: 36px;
	}

	.etp-nav__list {
		display: flex;
	}

	.etp-hero {
		padding-top: 64px;
		padding-bottom: 40px;
	}

	.etp-hero__art {
		flex: none;
		width: 340px;
	}

	.etp-h1 {
		font-size: 62px;
	}

	.etp-h2 {
		font-size: 42px;
	}

	.etp-lead {
		font-size: 20px;
	}

	.etp-band--navy .etp-lead {
		font-size: 21px;
	}

	.etp-eyebrow {
		font-size: 14px;
	}

	.etp-hero__sub {
		font-size: 23px;
	}

	.etp-section {
		padding-top: 72px;
		padding-bottom: 72px;
	}

	.etp-section--how {
		padding-top: 88px;
		padding-bottom: 40px;
	}

	.etp-section--patterns {
		padding-top: 60px;
		padding-bottom: 60px;
	}

	.etp-section--features {
		padding-top: 80px;
		padding-bottom: 80px;
	}

	.etp-section--kitchen,
	.etp-section--signup {
		padding-top: 88px;
		padding-bottom: 88px;
	}

	.etp-section-title {
		font-size: 44px;
	}

	.etp-h2--patterns {
		font-size: 40px;
	}

	.etp-section-title--kitchen {
		font-size: 42px;
	}

	.etp-grid--steps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		margin-top: 48px;
	}

	.etp-grid--features {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.etp-legal-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.etp-aside {
		flex: none;
		width: 300px;
		max-width: none;
	}

	.etp-story {
		flex: none;
		width: 360px;
		max-width: none;
	}

	.etp-privacy__title {
		font-size: 38px;
	}

	.etp-signup__logo {
		height: 56px;
	}

	.etp-signup__title {
		font-size: 48px;
	}

	.etp-signup__sub {
		font-size: 21px;
	}

	.etp-footer__inner {
		padding-top: 48px;
		padding-bottom: 48px;
	}

	.etp-footer__link,
	.etp-legal-card__link {
		padding-block: 0;
	}
}

/* ==========================================================================
   19. Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.etp,
	.etp * {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   20. Motion
   Two behaviours from the source design: blocks reveal as they enter the
   viewport, and interactive surfaces lift on hover. Both are disabled wholesale
   under prefers-reduced-motion.

   The reveal is opt-in from JavaScript: an element is only hidden once the
   script adds `data-armed`. With JavaScript off, or before the script runs,
   every block is fully visible. Nothing on this page depends on motion to be
   readable.
   ========================================================================== */

@keyframes etp-reveal {
	from {
		opacity: 0;
		transform: translateY(18px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

[data-reveal][data-armed]:not([data-in]) {
	opacity: 0;
}

[data-reveal][data-in] {
	animation: etp-reveal 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* Sticky header picks up a soft shadow once the page is scrolled. */
.etp-header {
	transition: box-shadow 0.3s ease;
}

.etp-header.is-scrolled {
	box-shadow: 0 6px 24px rgba(18, 48, 63, 0.1);
}

/* Hover and keyboard-focus lifts. Focus gets the same treatment as hover so
   keyboard users see the same affordance. */
.etp-nav__link {
	transition: color 0.2s ease;
}

.etp-nav__cta,
.etp-badge,
.etp-card--step,
.etp-grid--features .etp-card,
.etp-tag,
.etp-signup__form .wpcf7-submit {
	transition:
		transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
		box-shadow 0.3s ease,
		border-color 0.25s ease,
		background 0.25s ease;
}

.etp-nav__cta:hover,
.etp-nav__cta:focus-visible {
	transform: translateY(-2px);
}

.etp-badge:hover,
.etp-badge:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 16px 34px rgba(18, 48, 63, 0.28);
}

.etp-card--step:hover,
.etp-card--step:focus-within {
	transform: translateY(-6px);
	box-shadow: 0 26px 56px rgba(18, 48, 63, 0.13);
}

.etp-grid--features .etp-card:hover,
.etp-grid--features .etp-card:focus-within {
	transform: translateY(-5px);
	box-shadow: 0 22px 48px rgba(18, 48, 63, 0.12);
}

.etp-tag:hover {
	transform: translateY(-2px);
	border-color: var(--etp-green);
}

.etp-signup__form .wpcf7-submit:hover,
.etp-signup__form .wpcf7-submit:focus-visible {
	transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
	[data-reveal][data-armed]:not([data-in]) {
		opacity: 1;
	}

	[data-reveal][data-in] {
		animation: none;
	}

	.etp-nav__cta,
	.etp-badge,
	.etp-card--step,
	.etp-grid--features .etp-card,
	.etp-tag,
	.etp-signup__form .wpcf7-submit {
		transition: none;
	}

	.etp-nav__cta:hover,
	.etp-nav__cta:focus-visible,
	.etp-badge:hover,
	.etp-badge:focus-visible,
	.etp-card--step:hover,
	.etp-card--step:focus-within,
	.etp-grid--features .etp-card:hover,
	.etp-grid--features .etp-card:focus-within,
	.etp-tag:hover,
	.etp-signup__form .wpcf7-submit:hover,
	.etp-signup__form .wpcf7-submit:focus-visible {
		transform: none;
	}
}

/* ==========================================================================
   21. Legal pages
   The document body is printed verbatim; these rules only frame it. Termly
   markup carries its own inline styles, so everything here is a base that
   inline rules are free to override.
   ========================================================================== */

.etp-legal-head {
	max-width: 820px;
	margin: 0 auto 40px;
	text-align: center;
}

.etp-u-updated {
	margin-top: 12px;
}

.etp-prose {
	max-width: 820px;
	margin: 0 auto;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.65;
	color: #3b4a52;
	overflow-wrap: break-word;
}

.etp-prose > * + * {
	margin-top: 18px;
}

.etp-prose h1,
.etp-prose h2,
.etp-prose h3,
.etp-prose h4,
.etp-prose h5,
.etp-prose h6,
.etp-prose strong,
.etp-prose b {
	color: var(--etp-ink);
	font-weight: 900;
}

.etp-prose h1,
.etp-prose h2,
.etp-prose h5 {
	margin-top: 40px;
	font-size: 26px;
	line-height: 1.25;
}

.etp-prose h3,
.etp-prose h4,
.etp-prose h6 {
	margin-top: 32px;
	font-size: 21px;
	line-height: 1.3;
}

/* Links inside running text must not rely on colour alone (WCAG 1.4.1). The
   generated legal markup sets its own inline colours, so the underline is what
   carries the distinction; it is declared with !important purely to survive
   those inline styles on third-party content. */
.etp-prose a,
.etp-prose a:visited {
	color: var(--etp-green-dark);
	text-decoration: underline !important;
	text-underline-offset: 2px;
}

.etp-prose a:hover,
.etp-prose a:focus-visible {
	color: var(--etp-green-solid-hover);
}

.etp-prose ul,
.etp-prose ol {
	margin-top: 14px;
	padding-left: 22px;
	list-style: revert;
}

.etp-prose li {
	margin-top: 8px;
}

.etp-prose table {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
}

.etp-prose th,
.etp-prose td {
	padding: 10px 12px;
	border: 1px solid var(--etp-line);
	text-align: left;
	vertical-align: top;
}

.etp-prose img {
	max-width: 100%;
	height: auto;
}

.etp-legal-back {
	max-width: 820px;
	margin: 48px auto 0;
	padding-top: 24px;
	border-top: 1px solid var(--etp-line);
	font-size: 17px;
	font-weight: 800;
}