/* =========================================================================
   THEORYS — Practice-owner lead-gen lander (/landing)
   Paid Meta traffic → survey → booked call. Standalone page: no shop shell,
   no nav, no chat widget, no account gate.

   Structure is lifted from apply.dymecapital.io (hero split with the form in
   the right column, marquee reviews, single-open FAQ accordion). Every colour,
   face, radius and spacing value comes from Theorys' own tokens in style.css —
   none of Dyme's palette or typography crosses over.

   Loaded alongside theorys-home.css, which already defines the primitives this
   file builds on: .thr base type, .thr-wrap (1200px / 20px gutter),
   .thr-section (64px rhythm), .thr-btn variants, .thr-eyebrow, .thr-pill.
   Only what is specific to this page lives here, prefixed .thrl-.
   ========================================================================= */

/* Smooth scroll for the closing CTA. Set on <html> because that is the
   scrolling element for the document — on <body> it is ignored in Firefox. */
.thrl-html { scroll-behavior: smooth; }

/* ── Header: wordmark only ────────────────────────────────────────────────
   Deliberately NOT a link and deliberately without nav. This is a paid-traffic
   lander; the only actions on the page are the survey and the CTA that scrolls
   back to it. Anything clickable in the header is a leak. */
.thrl-header {
	background: var(--white);
	/* Forest green rule, not the grey --line (Adrian, 2026-09-08). Deliberately
	   --forest-deep and deliberately still 1px: at full page width even a hairline
	   in the brand green carries, and thickening it turns a divider into a bar.
	   This header is shared by /landing, /booking and /thankyou, so the whole
	   funnel picks it up — that is intended, they are one journey. */
	border-bottom: 1px solid var(--forest-deep);
}
.thrl-header-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 64px;
}
.thrl-logo-img { height: 30px; width: auto; }

/* ── Announcement ticker (/landing only) ──────────────────────────────────
   Forest band immediately under the wordmark, sitting on the header's divider
   rule, with the claims scrolling continuously right-to-left and wrapping
   around. Same mechanism as the reviews marquee below and as .thr-ticker on the
   shop — one group of items, cloned in JS, translated exactly -50% so the seam
   lands where the copy repeats. Colours and type match .thr-ticker deliberately
   (--forest-deep fill, --off-white 13px at 0.06em) so the two read as one
   component.

   The header keeps its 1px --forest-deep border-bottom: that rule is shared
   chrome for /landing, /booking and /thankyou, so it is NOT removed here. It is
   the same colour as this band and sits directly against it, so the two simply
   read as one 30px bar on this page.

   ⚠️  HEIGHT IS THE WHOLE DESIGN CONSTRAINT. The mobile fold on this page is
   tuned so the survey card opens inside the first screen at 375px and 414px, and
   every pixel here comes off that budget. Total cost is 29px: 6px padding + a
   17px line box + 6px padding. Do not add a border, a taller line-height or a
   second row without re-measuring the fold at both widths.

   ⚠️  The transform here is on .thrl-ticker-track ONLY, which is a descendant of
   this band — a SIBLING of <main>, never an ancestor of the survey card. That is
   the only reason a translate is allowed on this page at all. Do not move a
   transform up onto .thrl-ticker, .thrl-header or .thr: a containing block above
   the GHL embed breaks its self-sizing.

   overflow:hidden is what makes it a ticker rather than a page-widening row, so
   it is also what guarantees no horizontal scroll. */
.thrl-ticker {
	background: var(--forest-deep);
	overflow: hidden;
	padding: 6px 0;
}
.thrl-ticker-track {
	display: flex;
	/* max-content, not 100%: the track has to be as wide as its real contents or
	   the two groups would shrink to fit and -50% would no longer land on the
	   repeat. */
	width: max-content;
	/* Duration is SET IN JS, derived from the measured width so the on-screen
	   speed is constant no matter how many messages the list holds — the same
	   reasoning as the reviews marquee. A fixed duration here would silently make
	   the ticker faster every time a claim was added. */
	animation: thrl-ticker-scroll 30s linear infinite;
}
.thrl-ticker-group {
	display: inline-flex;
	margin: 0;
	padding: 0;
	list-style: none;
}
.thrl-ticker-item {
	color: var(--off-white);
	font-size: 13px;
	line-height: 17px;   /* the reserved line box — see the height note above */
	letter-spacing: 0.06em;
	white-space: nowrap;
	padding-left: 26px;
}
/* Separator between claims, so they never read as one run-on line. Decorative,
   and after the item rather than between, so the loop point needs no special
   case. Matches .thr-ticker-item::after on the shop. */
.thrl-ticker-item::after {
	content: "·";
	margin-left: 26px;
	color: var(--platinum-lo);
}
@keyframes thrl-ticker-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ── Hero ─────────────────────────────────────────────────────────────────
   MOBILE IS THE PRIORITY: headline, then the SURVEY, then the benefits. The
   survey card has to start inside the first screen at 375px and 414px, so the
   source order is the mobile order (copy → form → benefits) and every vertical
   measurement above the card is cut to the bone. Do not add padding, margin or
   a taller type ramp above .thrl-hero-form without re-measuring the fold.

   Desktop ≥900px puts it back to headline+benefits left / survey right using
   grid-template-areas — NOT flex `order`, and nothing that could become a
   containing block for the embed. The ratio is 1fr 1.05fr, which keeps the
   survey the visually dominant half. */
.thrl-hero { padding: 14px 0 40px; background: var(--white); }
/* The hero's container runs 14px narrower each side than the rest of the page.
   The only reason is headline size: the two-line target is width-bound, and
   those 12px are worth ~0.75px of font. Applied to the hero's .thr-wrap so the
   copy, the survey card and the bullets all still share one left edge — do not
   apply it to the h1 alone or the headline will hang off the card. */
.thrl-hero > .thr-wrap { padding-left: 14px; padding-right: 14px; }
.thrl-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }

.thrl-hero-copy h1 {
	/* FONT: --font-body (Inter), not --font-head (Space Grotesk).
	   Space Grotesk's letterforms — the single-storey 'a', the flat-sided 'y',
	   the wide 'k' — read as mechanical/typewriter-ish at display size, which is
	   wrong for a headline aimed at clinicians. Inter is already loaded for body
	   copy, so this costs no extra font request. Scoped to the lander h1 on
	   purpose: --font-head still owns headings everywhere else on the site.

	   Size trimmed from clamp(30px, 7vw, 46px) — the headline was two full
	   sentences and at the old ramp ran seven lines on a 375px screen, pushing
	   the survey card off the fold on its own. */
	font-family: var(--font-body);
	/* MOBILE: 30px, up from 18px (2026-09-11, Adrian: "make sure the headers are
	   large"). The 18px was not a style choice — it was the arithmetic of two
	   full sentences at one size: the longer of them (42 chars) only fits a
	   335px column up to ~17.75px. The headline is now ONE 41-char sentence, so
	   the same two-line target buys 30px instead, and text-wrap:balance below
	   splits it evenly rather than leaving an orphan.

	   WHAT STILL CAPS IT is not the line count but the survey: every pixel the
	   copy grows pushes the card down the mobile fold, and the card has to stay
	   inside the first screen at 375x667 — the tightest device this page is
	   bought traffic for. Measured at 30px: two lines, card top 296px of 667.
	   Going to 34px takes it to three lines and the card past 330px, which is
	   the point where the survey's first question starts to fall off. Re-measure
	   at both widths before raising it again.

	   The emphasis span is display:block, so the provenance line can never
	   share a line with the headline regardless of size. */
	font-size: clamp(30px, 8vw, 44px);
	font-weight: 700;   /* 700 is the ceiling — the Google Fonts request loads
	                       Inter 400/500/600/700 only, so 800 would be a
	                       synthesised fake bold, not a wider real one. */
	line-height: 1.2;
	letter-spacing: -0.05em;
	margin-bottom: 8px;
	text-wrap: balance;
}
/* The provenance line, on its own line under the headline and DELIBERATELY
   SMALLER than it: the offer is "better margins", and "Shipped From Texas" is
   the supporting claim, so it must not compete for the same weight. 0.62em of
   whatever the headline is at that width, so it stays proportional across the
   whole clamp instead of needing its own breakpoints — ~19px on a phone,
   ~28px on desktop. Colour is unchanged (--forest-mid), which is what visually
   separates it from the headline above.

   It used to be the headline's second sentence at full size; making it smaller
   is the whole reason the headline could grow. */
.thrl-h1-emph {
	display: block;
	color: var(--forest-mid);
	font-size: 0.62em;
	letter-spacing: -0.02em;   /* -0.05em is tuned for display size; too tight here */
	margin-top: 0.34em;
}
.thrl-hero-sub {
	/* Dyme's mobile sub is 13.6px/1.5 with no measure cap; matched here. The
	   46ch below never binds on a phone (335px column) — it is there for the
	   desktop column. */
	/* Scales with the headline instead of stepping at 900px — at 768 the h1 is
	   already ~41px and a flat 14px sub under it looked orphaned. */
	font-size: clamp(13px, 2.2vw, 17px);
	line-height: 1.5;
	color: #3a423d;
	max-width: 46ch;
	margin: 0 auto 4px;   /* auto so the 46ch measure centres on mobile */
}
/* MOBILE ONLY: headline and subhead sit centred directly above the survey card.
   Reset to left at the 900px breakpoint, where the copy moves back beside the
   form and a centred column would read as a stray poster. The bullets are NOT
   centred — they are a scannable list and hang better ragged-right. */
.thrl-hero-copy { text-align: center; }
/* Bullets sit below the survey on mobile; the gap above them is the grid gap. */
.thrl-hero-benefits { margin: 0; }

/* Benefit bullets. Check mark is an inline SVG so it inherits currentColor and
   costs no extra request. */
.thrl-benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.thrl-benefit { display: flex; gap: 12px; align-items: flex-start; }
.thrl-benefit-mark {
	flex: 0 0 auto;
	width: 22px; height: 22px;
	margin-top: 1px;
	border-radius: 999px;
	background: var(--forest-deep);
	color: var(--white);
	display: inline-flex; align-items: center; justify-content: center;
}
.thrl-benefit-mark svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.thrl-benefit-text { font-size: 15.5px; line-height: 1.55; color: var(--ink); }
.thrl-benefit-text strong { font-family: var(--font-head); font-weight: 600; }

/* ── Survey card ──────────────────────────────────────────────────────────
   READ BEFORE EDITING. The GHL embed measures itself in the child frame and
   posts its height out; the parent script writes that height inline. Anything
   that constrains this subtree clips the form mid-question, and the visitor
   simply cannot finish it. So, on the card and every ancestor of the embed:

     NO height or max-height    — the embed sets its own, and it changes per step
     NO overflow                — a taller step gets cut off instead of growing
     NO transform               — makes the card a containing block, which breaks
                                  the embed's own fixed/absolute positioning
     NO position: fixed

   This is why the card has a plain box-shadow and no entrance animation while
   the rest of the page fades up: every fade here uses translateY, and a
   transform on this element is exactly the failure above. Same rules that were
   learned on the Skin & Skinnier consultation build.

   min-height is a pre-paint floor only, so the card does not collapse to a
   sliver before the iframe reports in. Keep it BELOW the shortest survey step
   or the card shows dead space under a short question. */
.thrl-survey-card {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 18px;
	box-shadow: 0 20px 44px -30px rgba(14, 18, 15, 0.45);
}
/* Only the duration chip lives here now — the "Practice enquiry" label was
   removed, so flex-end keeps the chip on the right instead of letting a lone
   child fall to the left under space-between. */
.thrl-survey-head {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	padding: 16px 18px 0;
}
.thrl-survey-badge {
	font-family: var(--font-head);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--forest-mid);
	background: var(--off-white);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 5px 12px;
	white-space: nowrap;
}
.thrl-survey-embed {
	position: relative;      /* relative is safe — it is not a transform */
	width: 100%;
	min-height: 320px;
	padding: 14px 14px 18px;
}
.thrl-survey-embed > * { max-width: 100%; }
/* Force any embedded frame to the card's width so a fixed-width embed can never
   push the page sideways on a phone. Height is left entirely to the embed. */
.thrl-survey-embed iframe {
	display: block;
	width: 100% !important;
	max-width: 100%;
	min-height: 300px;
	border: 0;
}
/* Placeholder shown until the real embed is pasted in. Purely a build-time
   affordance — delete the <div class="thrl-survey-placeholder"> with the
   comment that marks it. */
.thrl-survey-placeholder {
	border: 1.5px dashed var(--platinum-lo);
	border-radius: 12px;
	/* Fills the wrapper's 320px pre-paint floor so the placeholder state does not
	   look like a short box with dead space under it. The min-height is on the
	   placeholder, never on the wrapper — the wrapper must stay unconstrained. */
	min-height: 288px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 32px 20px;
	text-align: center;
	color: #5c6660;
	font-size: 14px;
	line-height: 1.6;
}
.thrl-survey-placeholder code {
	font-size: 12.5px;
	background: var(--off-white);
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 2px 6px;
}

/* The CTA anchors here; clear the 64px header plus breathing room so the
   visitor lands on the card's title, not on a cropped first field. */
.thrl-survey-anchor { scroll-margin-top: 88px; }

/* ── Survey glow (fired by the closing CTA) ───────────────────────────────
   ⚠️  BOX-SHADOW ONLY. No transform, no filter, no will-change, no opacity on
   the card — every one of those makes .thrl-survey-card a containing block or a
   compositing layer, which is exactly what breaks the GHL embed's self-sizing
   and fixed positioning. A box-shadow animation is safe: it paints outside the
   border box and changes nothing about layout or containment.

   The colour is the theme's --forest-mid, mixed down with color-mix() rather
   than hardcoding a new rgba — the token stays the single source of truth. The
   card's resting shadow is repeated in every keyframe so it is not dropped
   mid-animation, and the animation runs once and lands back on the resting
   value, so the glow fades out instead of persisting. */
@keyframes thrl-survey-glow {
	0% {
		box-shadow:
			0 20px 44px -30px rgba(14, 18, 15, 0.45),
			0 0 0 0 color-mix(in srgb, var(--forest-mid) 60%, transparent);
	}
	14% {
		box-shadow:
			0 20px 44px -30px rgba(14, 18, 15, 0.45),
			0 0 0 3px color-mix(in srgb, var(--forest-mid) 85%, transparent),
			0 0 26px 8px color-mix(in srgb, var(--forest-mid) 45%, transparent);
	}
	70% {
		box-shadow:
			0 20px 44px -30px rgba(14, 18, 15, 0.45),
			0 0 0 3px color-mix(in srgb, var(--forest-mid) 55%, transparent),
			0 0 22px 6px color-mix(in srgb, var(--forest-mid) 26%, transparent);
	}
	100% {
		box-shadow:
			0 20px 44px -30px rgba(14, 18, 15, 0.45),
			0 0 0 0 color-mix(in srgb, var(--forest-mid) 0%, transparent);
	}
}
.thrl-survey-card.is-glowing { animation: thrl-survey-glow 3s ease-out 1 both; }

/* ── Reviews marquee ──────────────────────────────────────────────────────
   Dyme's component, restyled: one flex track, duplicated once in JS, animated
   from 0 to -50% so the seam is invisible, paused on hover.

   Dyme goes full-bleed with width:100vw and a negative 50vw margin. That is
   avoided here — 100vw counts the scrollbar, so on desktop it overflows by
   ~15px and puts a horizontal scrollbar on the page. This section simply is not
   inside .thr-wrap, so it is full-width for free. */
.thrl-reviews { overflow: hidden; padding: 56px 0; background: var(--off-white); }
.thrl-reviews-head { text-align: center; margin-bottom: 26px; }
/* Carrying the section alone now that the h2 above it is gone, so it steps up
   from the 12px .thr-eyebrow default without becoming a heading in its own
   right — still uppercase, still tracked out. */
.thrl-reviews-eyebrow { font-size: 15px; letter-spacing: 0.16em; }
.thrl-reviews-track {
	display: flex;
	gap: 14px;
	width: max-content;
	/* Fallback only. theorys-landing.js overrides this with a duration derived
	   from the measured track width, so the pixels-per-second pace stays constant
	   as reviews are added — see THRL_MARQUEE_PX_PER_SEC. This value is what a
	   JS-off visitor gets, sized for the current 20 reviews. */
	animation: thrl-marquee 190s linear infinite;
}
.thrl-reviews-track:hover,
.thrl-reviews-track:focus-within { animation-play-state: paused; }
@keyframes thrl-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
.thrl-review {
	flex: 0 0 auto;
	width: 290px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 18px;
}
.thrl-review-stars { font-size: 12px; letter-spacing: 3px; color: var(--gold); margin-bottom: 8px; }
.thrl-review-quote { font-size: 14.5px; line-height: 1.6; color: #3a423d; margin: 0; }
.thrl-review-by { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.thrl-review-avatar {
	width: 32px; height: 32px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--forest-deep), var(--forest-mid));
	color: var(--white);
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 13px;
	display: inline-flex; align-items: center; justify-content: center;
}
.thrl-review-name { font-family: var(--font-head); font-size: 14px; font-weight: 600; color: var(--ink); }
.thrl-review-meta { font-size: 12.5px; color: var(--forest-mid); }

/* The FAQ is the first section under the hero, so its default .thr-section
   64px top padding stacked on top of the hero's own bottom padding and left the
   questions floating well away from the benefit bullets. Pulled in; the bottom
   padding is untouched so the gap to the reviews below is unchanged. */
/* Packaging photo between the bullets and the FAQ. Capped at the FAQ's own
   820px measure so the two stacked bands share a width instead of the photo
   running 1200px wide over a 820px question list. Top padding only — the FAQ
   below supplies the gap on its side. */
.thrl-photo-section { padding: 28px 0 0; }
.thrl-photo { max-width: 820px; }

/* The packaging photo now has its own .thrl-photo-section band between the FAQ
   and the reviews, so it needs no bespoke spacing — .thrl-reviews supplies the
   56px gap below it. (A .thrl-reviews-photo rule lived here while the photo sat
   inside the reviews section; removed with it.) */

.thrl-faq-section { padding-top: 26px; }

/* ── FAQ ──────────────────────────────────────────────────────────────────
   Dyme's behaviour exactly: <button> header, chevron that rotates, answer
   revealed by animating max-height from 0 to its measured scrollHeight, and
   single-open (opening one closes the rest). Not the theme's <details>/<summary>
   FAQ — that one cannot animate and does not enforce single-open. */
.thrl-faq { max-width: 820px; margin: 0 auto; }
.thrl-faq-item {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 14px;
	margin-bottom: 10px;
	overflow: hidden;              /* safe here: nothing embedded, fixed content */
	transition: border-color 0.25s ease;
}
.thrl-faq-item.is-open { border-color: var(--forest-mid); }
.thrl-faq-q {
	width: 100%;
	background: none;
	border: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 20px;
	font-family: var(--font-head);
	font-size: 16.5px;
	font-weight: 500;
	color: var(--ink);
	text-align: left;
	transition: color 0.2s ease;
}
.thrl-faq-q:hover { color: var(--forest-mid); }
.thrl-faq-chevron {
	width: 18px; height: 18px; flex: 0 0 auto;
	stroke: var(--platinum-lo); fill: none;
	stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
	transition: transform 0.3s ease, stroke 0.2s ease;
}
.thrl-faq-item.is-open .thrl-faq-chevron { transform: rotate(180deg); stroke: var(--forest-mid); }
.thrl-faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.thrl-faq-a-inner { padding: 0 20px 20px; font-size: 15px; line-height: 1.7; color: #3a423d; }

/* ── Closing CTA ──────────────────────────────────────────────────────────*/
.thrl-closing { text-align: center; }
.thrl-closing h2 { font-size: clamp(24px, 4.4vw, 36px); margin-bottom: 12px; }
.thrl-closing p { margin: 0 auto 24px; max-width: 52ch; color: rgba(255,255,255,0.82); }

/* ── Footer ───────────────────────────────────────────────────────────────
   Minimal on purpose. The research-use notice is a standing requirement on
   every Theorys page, and Meta requires a reachable privacy policy on lead-gen
   destinations — those two links are the only way off the page, and they open
   in a new tab so the lander itself is never lost. */
.thrl-footer { background: var(--ink); color: var(--silver); padding: 28px 0; font-size: 12.5px; }
.thrl-footer-inner { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between; }
.thrl-footer a { color: var(--silver); text-decoration: underline; text-underline-offset: 2px; }
.thrl-footer a:hover { color: var(--white); }
.thrl-footer-copy { max-width: 62ch; line-height: 1.6; margin: 0; }
.thrl-footer-links { display: flex; gap: 16px; }

/* ── Entrance animation ───────────────────────────────────────────────────
   Applied to copy only. Never to .thrl-survey-card or any ancestor of the
   embed: the keyframe uses translateY, and a transform there is the clipping
   bug documented above. */
.thrl-fade { animation: thrl-fade-up 0.45s ease both; }
@keyframes thrl-fade-up {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}

/* ── Breakpoints ──────────────────────────────────────────────────────────*/
@media (min-width: 768px) {
	.thrl-hero { padding: 28px 0 56px; }
	.thrl-review { width: 320px; }
}

/* The hero splits at 900px rather than 768px: at tablet width a 2-up hero
   leaves the survey around 350px wide, which is narrower than it gets on a
   phone. Better to keep it stacked and full-width until there is room for both. */
@media (min-width: 900px) {
	/* Areas, not order: the benefits move back under the headline in the left
	   column while the survey spans the right, without touching source order
	   and without a transform anywhere near the embed. */
	.thrl-hero-grid {
		grid-template-columns: 1fr 1.05fr;
		grid-template-areas:
			"copy     form"
			"benefits form";
		/* auto auto + align-content:start, NOT `auto 1fr`. With 1fr the second row
		   absorbed all the slack left by the taller survey column and dropped a
		   ~110px dead band between the subhead and the bullets. */
		grid-template-rows: auto auto;
		align-content: start;
		gap: 22px 56px;
		align-items: start;
	}
	/* Nudged down so the headline sits level with the survey's first QUESTION
	   rather than with the card's top border — the chip row, the card padding
	   and the embed's own top whitespace put roughly 120px between the two, so
	   matching the boxes left the copy looking like it floated. Kept modest:
	   the copy column is already the taller of the two, and a big offset just
	   unbalances the bottom instead. */
	.thrl-hero > .thr-wrap { padding-left: 20px; padding-right: 20px; }
	.thrl-hero-copy     { grid-area: copy; text-align: left; padding-top: 38px; }
	/* A measure, in px not ch: `15ch` reads differently against a 44px headline
	   and a 17px subhead and collapsed the latter to 161px. One shared value
	   gives the two blocks a common right edge. */
	.thrl-hero-copy h1  { max-width: 460px; }
	.thrl-hero-sub      { max-width: 460px; margin-left: 0; margin-right: 0; }
	/* align-self: start, not center. Centred, the card re-centres itself every
	   time the copy column grows — so padding the copy down moved the card down
	   with it and the relative alignment never actually changed. Anchored to the
	   grid top, the copy's 38px offset lands where it was meant to: the headline
	   sits just below the card's top edge, level with the survey question rather
	   than above the card border. */
	.thrl-hero-form     { grid-area: form; align-self: start; }
	.thrl-hero-benefits { grid-area: benefits; }
	.thrl-hero-copy h1  { font-size: clamp(34px, 3.1vw, 46px); line-height: 1.2; margin-bottom: 16px; }
	.thrl-hero-sub      { font-size: 17px; margin-bottom: 0; }
}

@media (min-width: 1100px) {
	.thrl-hero-grid { gap: 72px; }
}

/* ── Reduced motion ───────────────────────────────────────────────────────
   The marquee is the one piece of motion that runs unprompted and never stops,
   so it is stopped outright rather than slowed. Cards stay laid out in a row
   and remain scrollable by hand. */
@media (prefers-reduced-motion: reduce) {
	.thrl-html { scroll-behavior: auto; }
	.thrl-fade { animation: none; }
	.thrl-reviews { overflow-x: auto; }
	.thrl-reviews-track { animation: none; }
	.thrl-faq-a { transition: none; }
	.thrl-faq-chevron { transition: none; }
	/* The ticker stops dead, like the reviews marquee above it — the one piece of
	   motion on this page that runs unprompted and never ends. The JS skips
	   cloning the group under reduced motion, so what is left is a single static
	   row: centred where it fits, and simply cut off by the band's overflow where
	   it does not. Every claim stays in the accessibility tree either way. */
	.thrl-ticker-track {
		animation: none;
		width: 100%;
		/* flex-start, NOT center. Centred, a row wider than the screen shows its
		   MIDDLE — at 375px that meant opening on "…an team you can trust · Fast
		   ship", a fragment of two claims and the start of neither. Anchored left,
		   the first claim is always the one that is actually readable, at every
		   width, and the overflow is simply the tail. */
		justify-content: flex-start;
	}
	.thrl-ticker-item:last-child::after { content: none; }
	/* Still mark the card, just without the pulse. */
	.thrl-survey-card.is-glowing {
		animation: none;
		box-shadow:
			0 20px 44px -30px rgba(14, 18, 15, 0.45),
			0 0 0 3px color-mix(in srgb, var(--forest-mid) 85%, transparent);
	}
}