/*!
 * Homepage styles — linodash.com
 * Loaded only on the front page (see functions.php), after the parent bundle
 * and the child stylesheet, so plain selectors win without !important.
 *
 * Colours/spacing/type map onto Blocksy's live Customizer tokens:
 *   --palette-color-1  #FF2E63  accent (Signal Pink)  — highlight, focus, hover
 *   --palette-color-3  #51565a  body text
 *   --palette-color-4  #09090B  headings / dark CTA
 *   --palette-color-6  #FFF5F7  cream section band
 *   --palette-color-7  #F9F9FB  near-white band
 *   --palette-color-8  #ffffff  base
 * Fallbacks are supplied everywhere so the design holds even off Blocksy.
 *
 * Contrast guardrail: white-on-accent is only 3.4:1, so the accent is never
 * used behind small light text. The CTA button is dark (18:1); the accent is a
 * highlight marker (dark text on accent = 5.4:1), focus ring, and hover detail.
 * ================================================================== */

/* ---- shared layout ------------------------------------------------ */
.ld-home {
	--ld-accent: var(--palette-color-1, #FF2E63);
	--ld-text: var(--palette-color-3, #51565a);
	--ld-ink: var(--palette-color-4, #09090B);
	--ld-cream: var(--palette-color-6, #FFF5F7);
	--ld-blush: #FFF5F7;                                /* Blush White: headline on the dark hero */
	--ld-on-dark: rgba(255, 245, 247, .76);             /* body text on the dark hero, 13:1 on ink */
	--ld-offwhite: var(--palette-color-7, #F9F9FB);
	--ld-base: var(--palette-color-8, #ffffff);
	--ld-muted: #6f6a5e;       /* eyebrows / muted labels — 5.4:1 on white, AA */
	--ld-maxw: var(--theme-block-max-width, 750px);
	--ld-gap: var(--theme-content-spacing, 1.5rem);

	/* Deliberate editorial type scale. Families are inherited from Blocksy
	 * (unchanged); only size/leading/tracking are set here. */
	--ld-fs-hero: clamp(2.7rem, 6.9vw, 5.6rem);   /* the loudest element on the page */
	--ld-fs-h2: clamp(1.55rem, 3vw, 2.1rem);      /* clearly below hero, confident */
	--ld-fs-lead: clamp(1.0625rem, 1.6vw, 1.2rem);
	--ld-fs-subhead: clamp(1rem, 1.1vw, 1.05rem); /* hero subhead: below the lead */
	--ld-fs-body: 1.0625rem;                       /* comfortable reading size */
	--ld-lh-hero: 1.03;
	--ld-lh-heading: 1.12;
	--ld-lh-body: 1.65;                            /* relaxed */
	--ld-ls-hero: -0.033em;                        /* tighter tracking at large size */
	--ld-ls-heading: -0.012em;
	--ld-ls-eyebrow: 0.16em;                       /* wide */

	color: var(--ld-text);
	font-size: var(--ld-fs-body);
	line-height: var(--ld-lh-body);
}

/* Small uppercase eyebrow label above each section heading. */
.ld-eyebrow {
	display: block;
	margin: 0 0 .8rem;
	font-size: .75rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: var(--ld-ls-eyebrow);
	text-transform: uppercase;
	color: var(--ld-muted);
}

.ld-container {
	width: 100%;
	max-width: var(--ld-maxw);
	margin-inline: auto;
	padding-inline: clamp(1rem, 5vw, 2rem);
}

/* Consistent vertical rhythm across sections: ~60px mobile → ~120px desktop. */
.ld-section {
	padding-block: clamp(3.75rem, 8.5vw, 7.5rem);
}

.ld-section__title {
	color: var(--ld-ink);
	font-size: var(--ld-fs-h2);
	line-height: var(--ld-lh-heading);
	letter-spacing: var(--ld-ls-heading);
	margin: 0 0 .5em;
	text-wrap: balance;
}

.ld-section__lead,
.ld-section__title + .ld-section__lead {
	color: var(--ld-text);
	font-size: var(--ld-fs-lead);
	line-height: 1.55;
	max-width: 40rem;              /* keep intro copy under ~70 characters */
	margin: 0 0 2.25rem;
}

/* Scroll reveal: content fades and rises into view once. The `.ld-reveal`
 * class is added by JS, so with JS off (or reduced motion) content stays put. */
@media (prefers-reduced-motion: no-preference) {
	.ld-reveal { opacity: 0; transform: translateY(18px); transition: opacity .3s ease, transform .3s ease; }
	.ld-reveal.is-in { opacity: 1; transform: none; }
}

/* Accessibility helper (in case the parent bundle doesn't define it). */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

/* ---- 1. Hero (two-column) ----------------------------------------- */

/* BACKGROUND UNIFICATION: one continuous canvas from the very top edge through
 * the hero. The base colour + needle texture live on #main-container (which
 * wraps both the header and the content), so the header pill floats on it with
 * no band behind it.
 *
 * The canvas is DARK (Ink Black). Every section after the hero paints its own
 * background (.ld-start, .ld-proof), so the ink only shows behind
 * the header and hero. A new homepage section MUST set its own background or
 * it will render on black.
 *
 * The texture is thin needles hanging from the top edge, alternating Signal
 * Pink and Logo Coral, each tapering to a point and fading out as it falls.
 * Two needles per 32px tile, at different lengths, so the fringe reads as
 * uneven rather than a barcode. The mask thins it to a whisper by the time it
 * reaches the headline, so the type never sits on busy stripes. */
body.home { background: var(--ld-ink, #09090B); }
.home #main-container {
	position: relative;
	background: var(--ld-ink, #09090B);
	isolation: isolate;
}
.home #main-container::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 760px;                 /* covers the header + hero region */
	z-index: 0;
	pointer-events: none;
	background-image: var(--ld-needle-tile);   /* shared token, see style.css */
	background-size: 32px 560px;
	background-repeat: repeat-x;
	background-position: center top;
	opacity: .8;
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.5) 28%, rgba(0,0,0,.12) 50%, transparent 72%);
	        mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.5) 28%, rgba(0,0,0,.12) 50%, transparent 72%);
}
/* On a phone the headline starts right under the header, so the fringe is
 * shortened to finish fading before the type begins. */
@media (max-width: 859px) {
	.home #main-container::before { height: 300px; }
}
.home #main-container > * { position: relative; z-index: 1; }

/* The header pill is black too, so on the dark canvas its drop shadow vanishes
 * and the bar loses its edge. A blush hairline gives it one back. Appearance
 * only: the header's position still belongs to style.css (CLAUDE.md rule 13). */
.home #header [data-row] > .ct-container {
	box-shadow: 0 0 0 1px rgba(255, 245, 247, .14), 0 10px 30px -14px rgba(0, 0, 0, .8);
}

.ld-hero {
	position: relative;
	background: transparent;       /* show the unified canvas + grid behind */
	overflow: clip;                /* the photo overflows its box, never the page, and the
	                                  blob's pink glow stops at the hero's bottom edge
	                                  instead of tinting the light section below */
	padding-block: clamp(1.5rem, 4vw, 2.5rem);
}
@media (min-width: 860px) {
	.ld-hero > .ld-container { max-width: var(--theme-block-wide-max-width, 1140px); }
}

.ld-hero__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 5vw, 3rem);
	align-items: center;
}
@media (min-width: 860px) {
	.ld-hero { padding-top: clamp(1.5rem, 3vw, 2.25rem); padding-bottom: 0; }
	.ld-hero__inner {
		grid-template-columns: 54fr 46fr;
		align-items: stretch;
		min-height: min(66vh, 600px);
	}
	.ld-hero__content { align-self: center; padding-block: 0; }
}

/* Headline. Font family + weight come from the Blocksy Customizer's H1
 * typography (Heading 1) so the theme's chosen heading font applies here — we
 * only set the hero-specific responsive size, spacing and wrap. */
.ld-hero__title {
	color: var(--ld-blush);
	font-size: clamp(1.95rem, 4vw, 3.2rem);
	line-height: 1.14;
	letter-spacing: -0.02em;
	margin: 0 0 1.35rem;
	max-width: 22ch;
	text-wrap: balance;
}

/* Subhead: IBM Plex, larger, comfortable line-height, two to three lines. */
.ld-hero__subhead {
	font-family: "IBM Plex Sans", -apple-system, system-ui, sans-serif;
	font-size: clamp(1.075rem, 1.5vw, 1.2rem);
	line-height: 1.65;
	color: var(--ld-on-dark);
	max-width: 32rem;
	margin: 0 0 2rem;
}

.ld-hero__form { display: flex; }
.ld-hero__form .nlf { width: 100%; max-width: 36rem; }

/* Find My Tools buttons (shown once the quiz page is published). Primary is
 * the CTA pink with white text (4.91:1), secondary a blush outline on ink. */
.ld-hero__ctas { display: flex; flex-wrap: wrap; gap: .75rem; }
.ld-hero__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: 54px;
	padding: .8rem 1.6rem;
	border: 1.5px solid transparent;
	border-radius: 999px;
	font-weight: 600;
	font-size: 1.05rem;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease, transform .12s ease;
}
.ld-hero__cta--primary { background: #D62753; color: #fff; }
.ld-hero__cta--primary:hover { background: #B82147; color: #fff; transform: translateY(-1px); }
.ld-hero__cta--secondary { color: var(--ld-blush); border-color: rgba(255, 245, 247, .45); }
.ld-hero__cta--secondary:hover { background: var(--ld-blush); color: var(--ld-ink); }
.ld-hero__cta:focus-visible { outline: 3px solid #FF2E63; outline-offset: 3px; }
@media (max-width: 479px) {
	.ld-hero__cta { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.ld-hero__cta { transition: none; }
	.ld-hero__cta--primary:hover { transform: none; }
}

/* Social-proof trust row under the form (replaces the tagline). */
.ld-trust {
	display: flex;
	align-items: center;
	gap: .8rem;
	margin-top: 1.4rem;
}
.ld-trust__avatars { display: flex; flex: 0 0 auto; }
.ld-trust__avatar {
	width: 40px; height: 40px;
	margin-left: -12px;
	border-radius: 50%;
	border: 2px solid var(--ld-ink);
	overflow: hidden;
	display: grid; place-items: center;
	background: var(--ld-cream);
	color: var(--ld-text);
}
.ld-trust__avatar:first-child { margin-left: 0; }
.ld-trust__avatar:nth-child(2) { background: #FFDDE5; }
.ld-trust__avatar:nth-child(3) { background: #D8F5DF; }
.ld-trust__avatar:nth-child(4) { background: #D1E5FF; }
.ld-trust__avatar img { width: 100%; height: 100%; object-fit: cover; }
.ld-trust__avatar svg { width: 22px; height: 22px; opacity: .5; }
.ld-trust__text { margin: 0; font-size: .95rem; line-height: 1.4; color: var(--ld-on-dark); }
.ld-trust__text strong { color: var(--ld-blush); font-weight: 700; }

/* Right column: the photo stands IN FRONT of an organic accent blob. The blob
 * is the backdrop; the photo is larger than it, bottom-anchored so it overflows
 * the blob's top and its bottom is flush with the hero — never clipped by the
 * shape. The media box reserves its own square, so there is no layout shift. */
.ld-hero__media {
	position: relative;
	margin-inline: auto;
	width: min(90%, 17rem);        /* mobile: keep the 120% photo within the viewport */
	aspect-ratio: 1 / 1;
}
@media (min-width: 560px) { .ld-hero__media { width: min(100%, 24rem); } }
@media (min-width: 860px) { .ld-hero__media { width: min(100%, 33rem); align-self: end; } }

.ld-hero__blob {
	position: absolute;
	/* Held fully inside the hero. The SVG uses preserveAspectRatio="none" so its
	 * path pins linearly to this box: height 97.9% keeps the blob's bottom ~2% above
	 * the hero/next-section border (the photo stays the lowest element, no spill
	 * below), while width 101.5% + a small left offset reach a few px wider on each
	 * side (a touch more to the left) behind the photo. */
	top: 0;
	left: -0.85%;
	width: 101.5%;
	height: 97.9%;
	z-index: 0;
	--ld-blob-light: color-mix(in srgb, var(--ld-accent) 85%, #fff);
	--ld-blob-dark: var(--ld-accent);
	filter: drop-shadow(0 26px 60px rgba(255, 46, 99, .22));   /* a pink glow, since a dark shadow is invisible on ink */
}

.ld-hero__photo {
	position: absolute;
	left: 50%; bottom: 0;
	transform: translateX(-50%);
	width: 120%;                   /* larger than the blob; overflows its top */
	z-index: 1;
}
.ld-hero__photo img {
	display: block; width: 100%; height: auto;
	filter: drop-shadow(0 18px 30px rgba(17, 21, 24, .18));
}

/* MOBILE-ONLY (phones ≤767px): hide the founder photo + accent blob so the hero
 * becomes a clean single-column text/form/trust block. Stays visible on
 * tablets/iPads and desktop (≥768px). We hide the whole media COLUMN (not just
 * the <img>), so the grid row collapses with no reserved empty space and the
 * content block flows as the full hero.
 * Breakpoint: the theme is otherwise mobile-first (min-width 560/720/860/900)
 * and has no 768px boundary of its own; 767px is the phone ceiling defined for
 * these two homepage fixes (see the matching note at the newsletter component). */
@media (max-width: 767px) {
	.ld-hero__media { display: none; }
}

/* ---- Best content — uniform three-column post grid --------------- */
.ld-start { background: var(--ld-offwhite); }
/* Wide container to match the hero. */
@media (min-width: 860px) {
	.ld-start > .ld-container { max-width: var(--theme-block-wide-max-width, 1140px); }
}

/* Header row: heading left, "Read the blog →" link right. */
.ld-start__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .5rem 1.5rem;
	margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.ld-start__head .ld-section__title { margin: 0; }
.ld-start__more {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 600;
	color: var(--ld-ink);
	text-decoration: none;
	white-space: nowrap;
}
.ld-start__more:hover { color: var(--ld-accent); }
.ld-start__more span { transition: transform .15s ease; display: inline-block; }
.ld-start__more:hover span { transform: translateX(3px); }

/* 1 col mobile → 2 tablet → 3 desktop; up to 9 posts (3 rows). */
.ld-start__grid {
	display: grid;
	gap: clamp(1.25rem, 2.4vw, 1.75rem);
	grid-template-columns: 1fr;
}
@media (min-width: 560px) { .ld-start__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .ld-start__grid { grid-template-columns: repeat(3, 1fr); } }

/* Uniform card: 16:9 image on top, body below; whole card clickable, shadow
 * lift on hover, title shifts to accent. */
.ld-post {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--ld-base);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(17, 21, 24, .05);
	transition: transform .18s ease, box-shadow .18s ease;
}
.ld-post:hover { transform: translateY(-3px); box-shadow: 0 20px 36px rgba(17, 21, 24, .13); }
.ld-post__media { aspect-ratio: 16 / 9; overflow: hidden; background: color-mix(in srgb, var(--ld-accent) 10%, #fff); }
.ld-post__img { display: block; width: 100%; height: 100%; object-fit: cover; }
img.ld-post__img { transition: transform .45s ease; }
.ld-post:hover img.ld-post__img { transform: scale(1.05); }
.ld-post__img--placeholder { display: block; width: 100%; height: 100%; }
.ld-post__body { display: flex; flex-direction: column; gap: .55rem; padding: 1.15rem 1.25rem 1.35rem; }
.ld-post__tag {
	align-self: flex-start;
	font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
	color: var(--ld-ink); background: var(--ld-accent);
	padding: .25em .6em; border-radius: 999px;
}
.ld-post__title { margin: 0; font-size: 1.1rem; line-height: 1.3; }
.ld-post__link { color: var(--ld-ink); text-decoration: none; }
.ld-post__link::after { content: ""; position: absolute; inset: 0; }
.ld-post:hover .ld-post__title a { color: var(--ld-accent); }
.ld-post__date { font-size: .82rem; color: var(--ld-muted); }
@media (prefers-reduced-motion: reduce) {
	.ld-post, img.ld-post__img { transition: none; }
	.ld-post:hover, .ld-post:hover img.ld-post__img { transform: none; }
	.ld-start__more span { transition: none; }
}

/* ---- 6. Reserved testimonials ------------------------------------- */
.ld-proof { background: var(--ld-offwhite); text-align: center; }
.ld-proof__grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .ld-proof__grid { grid-template-columns: repeat(2, 1fr); } }
.ld-proof__item { margin: 0; padding: 1.5rem; background: var(--ld-base); border-radius: 14px; border: 1px solid #e6e2da; }
.ld-proof__quote { margin: 0 0 1rem; font-size: 1.0625rem; line-height: 1.5; color: var(--ld-ink); }
.ld-proof__name { font-weight: 700; color: var(--ld-ink); }
.ld-proof__role { color: var(--ld-text); }

/* ==================================================================
 * Newsletter form component — variables mapped to Blocksy tokens.
 * Ported from briefs/newsletter-form-component.html; preview-page
 * scaffolding removed, ids/markup driven by the PHP template part.
 * ================================================================== */
.nlf {
	--nlf-bg: var(--palette-color-8, #ffffff);
	--nlf-border: #e6e2da;
	--nlf-text: var(--palette-color-4, #1c1c1c);
	--nlf-placeholder: #6f6a5e;              /* 5.4:1 on white — AA */
	/* Brand accent CTA, darkened ~16% so white label text clears AA.
	 * The raw palette colour is only 3.61:1 against white, which fails the 4.5:1
	 * minimum for normal text (the guardrail noted at the top of this file, which
	 * this button was quietly breaking). Mixed from the palette token rather than
	 * hard-coded so it still tracks a future brand change; the hex above it is
	 * the fallback for engines without color-mix. */
	--nlf-btn-bg: #D62753;                                                        /* 4.91:1 with white */
	--nlf-btn-bg: color-mix(in srgb, var(--palette-color-1, #FF2E63) 84%, #000);
	--nlf-btn-text: #ffffff;
	--nlf-btn-bg-hover: #B82147;
	--nlf-btn-bg-hover: color-mix(in srgb, var(--palette-color-1, #FF2E63) 72%, #000);
	--nlf-note: #6f6a5e;
	--nlf-success: #1f7a3d;
	--nlf-error: #b3261e;
	--nlf-focus: var(--palette-color-1, #FF2E63);    /* accent focus ring */
	--nlf-radius: 999px;
	--nlf-font: inherit;

	width: 100%;
	max-width: 34rem;
	font-family: var(--nlf-font);
}

.nlf-form {
	display: flex;
	gap: 0;
	background: var(--nlf-bg);
	border: 1px solid var(--nlf-border);
	border-radius: var(--nlf-radius);
	padding: 6px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
/* Elegant focus: an accent ring on the whole pill, no default blue outline. */
.nlf-form { transition: border-color .15s ease, box-shadow .15s ease; }
.nlf-form:focus-within {
	border-color: var(--nlf-focus);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--nlf-focus) 24%, transparent);
}

.nlf-input {
	flex: 1 1 auto; min-width: 7rem;   /* majority of the pill; never truncates the placeholder */
	height: 46px;                      /* unified height with the button */
	border: 0; background: transparent;
	font: inherit; font-size: 1rem;
	color: var(--nlf-text);
	padding: 0 18px; outline: none;
}
.nlf-input::placeholder { color: var(--nlf-placeholder); }

.nlf-btn {
	flex: 0 0 auto;                    /* sized to its label, doesn't squeeze the input */
	height: 46px;                      /* unified height with the input */
	border: 0;
	border-radius: calc(var(--nlf-radius) - 4px);
	background: var(--nlf-btn-bg);
	color: var(--nlf-btn-text);
	font: inherit; font-size: 1rem; font-weight: 600;
	padding: 0 22px;
	cursor: pointer; white-space: nowrap;
	transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
}
.nlf-btn:hover { background: var(--nlf-btn-bg-hover); transform: translateY(-1px); box-shadow: 0 8px 18px color-mix(in srgb, var(--palette-color-1, #FF2E63) 38%, transparent); }
.nlf-btn:active { transform: translateY(0) scale(.985); box-shadow: none; }
.nlf-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--nlf-focus) 45%, transparent); }
.nlf-btn[disabled] { opacity: .6; cursor: default; transform: none; box-shadow: none; }

.nlf-note { margin: 1.1rem 4px 0; font-size: .875rem; line-height: 1.4; color: var(--nlf-note); }

.nlf-status { margin: 10px 4px 0; font-size: .95rem; display: none; }
.nlf-status[data-state="success"] { display: block; color: var(--nlf-success); font-weight: 600; }
.nlf-status[data-state="error"]   { display: block; color: var(--nlf-error); }
/* Success/error message fades in softly. */
.nlf-status[data-state] { animation: ld-fade-up .35s ease both; }
@keyframes ld-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.nlf-status[data-state] { animation: none; }
}

/* Unified control height (override any inherited input height from the parent). */
.nlf-form { align-items: center; }
.nlf-form .nlf-input,
.nlf-form .nlf-btn { height: 46px; box-sizing: border-box; }

/* ONE container: the pill is the only bordered/shadowed box. The input sits
 * inside it fully transparent — no nested border, background, or shadow (these
 * override Blocksy's default input styling, which is more specific). */
.nlf-form .nlf-input {
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	outline: none !important;
}

/* Honeypot: out of the layout, still in the DOM for bots. */
.nlf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* MOBILE-ONLY (phones ≤767px): the inline pill (button inside the field) gets
 * cramped on phones, so stack the form into TWO separate full-width elements —
 * the email input as its own bordered field, then the CTA button below it with
 * comfortable spacing. Applies to EVERY .nlf on the page (hero + closing CTA).
 *
 * Breakpoint note: the theme is mobile-first (min-width 560/720/860/900) and
 * previously stacked this form only under 480px. These homepage fixes define
 * phones as ≤767px (tablets/iPads keep the inline pill at ≥768px), and the theme
 * has no 768px boundary, so 767px is used here; this block REPLACES the old
 * 480px stack (no duplicate/layered rules).
 *
 * a11y: the input keeps a 52px tap target and 16px font so iOS doesn't zoom on
 * focus. */
@media (max-width: 767px) {
	/* Container drops its pill chrome; the input itself becomes the visible field. */
	.nlf-form {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		padding: 0;
		border: 0;
		background: transparent;
		box-shadow: none;
	}
	.nlf-form:focus-within { box-shadow: none; }   /* focus ring moves onto the input */

	/* Input = its own full-width field, matching the pill's rounded style language.
	 * Overrides the desktop "transparent inside the pill" !important declarations. */
	.nlf-form .nlf-input {
		width: 100%;
		height: 52px;
		font-size: 16px;                 /* ≥16px: prevents iOS focus-zoom */
		padding: 0 16px;
		border: 1px solid var(--nlf-border) !important;
		background: var(--nlf-bg) !important;
		border-radius: 14px !important;
		box-shadow: 0 1px 2px rgba(0, 0, 0, .04) !important;
	}
	.nlf-form .nlf-input:focus {
		border-color: var(--nlf-focus) !important;
		box-shadow: 0 0 0 3px color-mix(in srgb, var(--nlf-focus) 24%, transparent) !important;
	}

	/* Button = its own full-width element below the field. */
	.nlf-form .nlf-btn {
		width: 100%;
		height: 52px;
		border-radius: 14px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.nlf-btn, .ld-card { transition: none; }
}