/* ============================================================
   Home — Redesign (igual-child)
   Every rule is scoped under body.ssd-home-page so this file is
   inert anywhere else, even if it were ever enqueued by mistake.
   Class names are prefixed .ssd-home- to avoid collisions with
   existing ssd-* classes and Bootstrap utility classes.

   One deliberate exception below: scroll-behavior only has an effect set
   on the scrolling box itself (html), and "body.ssd-home-page html" isn't
   valid CSS (you can't select an ancestor via a class on its own
   descendant) — but this file is only ever enqueued on page-home.php
   (see page-home.php's wp_enqueue_style call), so the plain `html` rule
   below is exactly as inert everywhere else as everything scoped through
   body.ssd-home-page is.
   ============================================================ */

/* Smooth-scrolls same-page #anchor jumps (e.g. Where We Serve's "Start
   Your Free Review" landing on the Final CTA form card below it) instead
   of an instant jolt cut. Native CSS, no scroll JS needed. */
html {
	scroll-behavior: smooth;
}

/* Brand palette per Brandguidelines.pdf — primary: navy #172741, red #C73C3B
   (reserve red for small details/highlights, never large areas); secondary:
   maroon #802048, cream #EAE3D2, light blue #84A9D3. Fonts: Merriweather
   (headings/highlight phrases), Archivo (body/UI). */
body.ssd-home-page {
	--ssd-home-navy: #172741;
	--ssd-home-navy-dk: #0d1626;
	--ssd-home-red: #C73C3B;
	--ssd-home-red-dk: #a3302f;
	--ssd-home-maroon: #802048;
	--ssd-home-maroon-dk: #5c1735;
	--ssd-home-rose: #d680a7;
	--ssd-home-blue: #84A9D3;
	--ssd-home-blue-dk: #4d7bab;
	--ssd-home-cream: #EAE3D2;
	--ssd-home-card-bg: #dde8f4;
	--ssd-home-gold: #f5b942;
	--ssd-home-ink: #172741;
	--ssd-home-radius: 54px;
	--ssd-home-font-heading: 'Merriweather', Georgia, serif;
	--ssd-home-font-body: 'Archivo', system-ui, -apple-system, sans-serif;
	--cta-btn-radius: 10px;
}

/* ---------- Hero ---------- */
/* Every earlier attempt here (900/760/860px min-height, then a straight
   aspect-ratio on this section itself) tried to size the PHOTO by sizing
   this whole section — but this section's real height is, correctly,
   driven by its CONTENT (badge/headline/checklist next to the full-height
   form card), which barely changes with viewport width. background-size
   :cover then scales the photo to match THAT height, so the width of
   photo revealed (and so how far left the subject ends up, clear of the
   card or not) ends up a side effect of content height vs. viewport
   width — consistent at no single width, let alone every width.
   Fix: stop sizing the photo from this section's content-driven height at
   all. The photo now lives on ::before instead, sized from its OWN
   aspect-ratio (a fixed proportion, measured off the mockup itself — see
   below) with only its WIDTH tied to the section (top+left+right:0, no
   bottom) — so the crop is the same proportion of the photo, and the
   subject sits at the same on-screen position, at every viewport width.
   If content ever needs more height than that gives, the extra just shows
   this section's own --ssd-home-navy solid color (position:relative +
   overflow:hidden keeps ::before from spilling past this section's real,
   content-driven height when the aspect-ratio band comes out taller than
   needed) — same "photo band over a solid-color section" convention the
   ≤1024px tablet/mobile rule below already used, just now driven by
   aspect-ratio instead of a fixed px height, and no longer limited to
   ≤1024px. padding-top is sized to clear the site's default (non-sticky)
   header — topbar (~40px) + logobar (~120px) — with visible breathing
   room below it, no vertical centering (which was collapsing that gap
   depending on content height). */
body.ssd-home-page .ssd-home-hero {
	position: relative;
	background-color: var(--ssd-home-navy);
	padding: 170px 0 70px;
	overflow: hidden;
}

body.ssd-home-page .ssd-home-hero::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	/* This value is triangulated from real screenshots at the same real
	   viewport width, not derived from a formula — a closed-form
	   prediction from the photo's own pixel dimensions (tried first, see
	   git history) didn't match what the actual data points showed, so the
	   formula was wrong somewhere and isn't trustworthy here even for
	   interpolation. Measured so far, low-to-high: 1920/1536 pinned the
	   subject against the left edge (badly over-zoomed); 1920/1280
	   under-zoomed it back too far the other way (needed only a slight
	   nudge further); 1920/1116 put the chin at ~58%, behind the card
	   (which starts ~56%) — a *lower* ratio here means MORE zoom and
	   further LEFT, a *higher* ratio means less zoom and further right.
	   1920/1180 is a small step up from the 1280 result, in the direction
	   its own feedback pointed. X:100% is what pulls the crop toward the
	   photo's right edge, keeping the subject (right-of-center in the
	   source photo) toward the left in the first place; fixing the
	   aspect-ratio (vs. a fixed pixel height) is what keeps that clearance
	   from drifting away at wider viewports the way every earlier
	   fixed-height attempt did — confirmed against real screenshots each
	   time; only the exact ratio has needed repeated correction. */
	aspect-ratio: 1920 / 1180;
	background-image: var(--ssd-home-hero-bg);
	background-size: cover;
	background-position: 100% 20%;
	z-index: 0;
}

/* Below 1024px the parent theme swaps its absolute/overlaid desktop header
   for a separate, short, in-flow `.header-mobilebar` (~100px, sticky) — it
   pushes the hero down in normal document flow instead of floating over
   it. padding-top here was still sized to clear the DESKTOP header
   (topbar + logobar), so on tablet/mobile the two stacked — a 100px real
   header plus another ~150-190px of "clear the header" padding nobody
   needed anymore — leaving a huge dead gap of pure background before the
   rating badge. Cut down to ordinary section breathing room instead. */
@media (max-width: 1024px) {
	body.ssd-home-page .ssd-home-hero {
		padding-top: 36px;
	}
}

/* The hero also stacks the text column, the checklist and the full-height
   form card on top of each other below 1024px (see .ssd-home-hero__inner),
   making the section several times taller than the photo it's meant to sit
   behind — far taller than the desktop aspect-ratio band above would ever
   reach, so plain --ssd-home-navy would show for most of that stacked
   height. Below 1024px the photo instead uses a shorter, portrait-ish
   aspect-ratio of its own, same convention as the trust-badges/
   process-timeline sections' triangle-tile navy backgrounds.
   This used to be two fixed PIXEL heights (500px, then 420px below 767px)
   — not actually responsive, just two hard steps, so anywhere between a
   1024px tablet and a 768px one (or between 767px and a small phone) the
   crop stayed frozen at whichever step it last hit instead of scaling
   with the screen, and the jump between the two steps was a visible snap.
   A second aspect-ratio here (overriding the desktop one above the same
   way it overrides X:100%'s desktop framing with a centered one) scales
   continuously with width instead, the same fix as the desktop rule
   above. min-height is just a floor so it doesn't go shallower than a
   normal portrait crop can still read as on the very smallest phones.
   Breakpoint: 992px, not 1024px — matching .ssd-home-hero__inner's own
   grid-template-columns breakpoint below, not the parent theme's
   (unrelated) 1024px header switch. X:100% only exists to dodge the form
   card sitting beside the text; below 992px that card has already
   dropped below the text in the stacked layout, so between 992-1024px
   the photo was dodging a card that was no longer there. */
@media (max-width: 992px) {
	body.ssd-home-page .ssd-home-hero::before {
		aspect-ratio: 2 / 1;
		min-height: 280px;
		background-position: center 18%;
	}
}

body.ssd-home-page .ssd-home-hero__overlay {
	position: absolute;
	inset: 0;
	/* Consistent bluish-navy tint across the whole photo (not fading to
	   near-transparent on the right, which left the subject/card area
	   untinted and looking like there was no overlay at all) — but at a
	   much lower alpha than before. Originally sampled against the
	   mockup's own sky pixels (a rough overlay-blend back-solve, same
	   technique as the form-card badge above) to roughly .45-.55 alpha at
	   the darkest edge; .58/.48/.38 still read a shade heavier than the
	   mockup in practice, so nudged down again to sit at the light end of
	   that sampled range instead of just above it. */
	background: linear-gradient(100deg, rgba(11, 26, 46, .48) 0%, rgba(11, 26, 46, .40) 50%, rgba(11, 26, 46, .30) 100%);
	z-index: 1;
}

/* .container reuses the parent theme's own Bootstrap container (same class
   the header nav uses) so hero content lines up exactly with the logo and
   phone button above it, instead of a hand-picked max-width. */
body.ssd-home-page .ssd-home-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px;
	align-items: start;
}

/* The card column is a fixed-ish width range (minmax), not a plain fr share:
   an `fr` track will still shrink the card at moderate real-world desktop
   widths (~1280-1440px, i.e. 100% zoom on a typical laptop) because wrapped
   text still technically satisfies its minimum size — the card just ends up
   too narrow and "Request a FREE Consultation" / the radio labels wrap
   awkwardly. minmax(0, 1fr) on the content column lets it absorb whatever
   width is left (shrinking safely, never overflowing) while the card holds
   a stable, comfortable width no matter the viewport. */
@media (min-width: 992px) {
	body.ssd-home-page .ssd-home-hero__inner {
		/* Reverted from a literal 582px (measured off the 1920px-wide
		   mockup): that width assumed the mockup's canvas and this site's
		   real (narrower) container were directly comparable, but they
		   aren't — at this container's actual width, 582px left too
		   little room for the headline and broke its wrap onto 3 lines.
		   The form's excess spacing turned out to be a line-height issue
		   (see .wpcf7-form p below), not this column's width. */
		grid-template-columns: minmax(0, 1fr) minmax(410px, 480px);
		gap: 40px;
		align-items: center;
	}
}

/* ---------- Hero content (left) ---------- */
/* border-radius is a moderate rounded-rectangle, not a full pill: with
   two stacked text lines the badge is taller than it is a single-line
   strip, and a 999px radius on that shape "melts" the corners into a
   stretched capsule instead of the mockup's toast-card look. */
/* Background measured directly from the mockup: a light frosted-glass
   white overlay over the photo (~rgba(255,255,255,.22)), not a dark
   navy chip — sampling the pill's own pixels back-solves to that alpha
   against the surrounding photo color. */
body.ssd-home-page .ssd-home-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, .22);
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 18px;
	padding: 8px 14px;
	margin-bottom: 14px;
	font-family: var(--ssd-home-font-body);
	line-height: 1;
}

body.ssd-home-page .ssd-home-hero__badge-g {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	display: inline-flex;
}

body.ssd-home-page .ssd-home-hero__badge-g svg {
	width: 100%;
	height: 100%;
}

/* Stacked (score+stars on top, review count below) per the mockup —
   not a single wrapping row. line-height:1 throughout keeps this snug
   (no line-box cushion inflating the gap between the two lines). */
body.ssd-home-page .ssd-home-hero__badge-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
	line-height: 1;
}

body.ssd-home-page .ssd-home-hero__badge-row {
	display: flex;
	align-items: center;
	gap: 6px;
	line-height: 1;
}

body.ssd-home-page .ssd-home-hero__badge-text strong {
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}

body.ssd-home-page .ssd-home-hero__badge-stars {
	display: inline-flex;
	gap: 1px;
}

body.ssd-home-page .ssd-home-hero__star {
	width: 13px;
	height: 13px;
	color: var(--ssd-home-gold);
	display: inline-flex;
}

body.ssd-home-page .ssd-home-hero__star svg {
	width: 100%;
	height: 100%;
}

body.ssd-home-page .ssd-home-hero__badge-count {
	color: rgba(255, 255, 255, .85);
	font-size: 12px;
	line-height: 1;
}

/* Three tiers instead of the old single jump at 768px (flat 3rem from
   768px up, never growing again). The title text carries its own manual
   line break ("Winning SSDI & SSI benefits<br>for claimants nationwide" —
   see inc/home-fields.php) meant to read as two lines; each half also has
   to fit on one line by itself, or it sub-wraps into three/four short lines
   instead. Between 992px (where .ssd-home-hero__inner switches from a
   stacked single column to the two-column grid) and 1400px (where the
   shared .container's own max-width grows from 1140 to 1320px), the text
   column is only ~600px — too narrow for "Winning SSDI & SSI benefits" at
   48px+, which is what sub-wrapped it once the card column widened (see
   grid-template-columns below). 2.625rem is the largest size confirmed to
   still fit that ~600px column on one line; 1400px+ has ~800px+ of column
   to work with, so the heading grows past the old flat 3rem cap there to
   better match the reference design's bolder, more prominent headline. */
body.ssd-home-page .ssd-home-hero__title {
	color: #fff;
	font-family: var(--ssd-home-font-heading);
	font-weight: 700;
	font-size: 2.4rem;
	line-height: 1.15;
	margin: 0 0 20px;
}

@media (min-width: 768px) {
	body.ssd-home-page .ssd-home-hero__title {
		font-size: 2.625rem;
	}
}

@media (min-width: 1400px) {
	body.ssd-home-page .ssd-home-hero__title {
		font-size: 3.25rem;
	}
}

body.ssd-home-page .ssd-home-hero__subtext {
	color: rgba(255, 255, 255, .88);
	font-family: var(--ssd-home-font-body);
	font-size: 1.05rem;
	line-height: 1.7;
	max-width: 560px;
	margin: 0 0 30px;
}

body.ssd-home-page .ssd-home-hero__subtext strong {
	color: #fff;
	font-weight: 700;
}

body.ssd-home-page .ssd-home-hero__checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px 32px;
	max-width: 560px;
}

@media (min-width: 560px) {
	body.ssd-home-page .ssd-home-hero__checklist {
		grid-template-columns: 1fr 1fr;
	}
}

body.ssd-home-page .ssd-home-hero__checklist li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	color: #fff;
	font-family: var(--ssd-home-font-body);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
}

/* Checkmark is drawn with CSS (two rotated borders), not an inlined SVG —
   crisper and bolder at this small size than a scaled-down stroke path,
   and its thickness/color are plain, tunable CSS instead of SVG attributes. */
body.ssd-home-page .ssd-home-hero__check-icon {
	position: relative;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--ssd-home-blue-dk);
	margin-top: 1px;
}

body.ssd-home-page .ssd-home-hero__check-icon::after {
	content: '';
	position: absolute;
	left: 8px;
	top: 6px;
	width: 6px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* ---------- Form card (right) ----------
   Shared component (see ssdhome_form_card() in page-home.php) — the
   Hero and the Final CTA section both render the exact same CF7 form
   (id 8) inside this card, so its markup/CSS lives in one place instead
   of being duplicated per section. Each instance also gets its own id
   (ssd-home-hero-form / ssd-home-final-cta-form) so an in-page CTA
   elsewhere on Home — e.g. Where We Serve's "Start Your Free Review" —
   can #anchor straight to one of them instead of navigating away. */
body.ssd-home-page .ssd-home-form-card {
	background: var(--ssd-home-card-bg);
	border-radius: var(--ssd-home-radius);
	padding: 12px 20px 0px;
	box-shadow: 0 30px 60px rgba(0, 0, 0, .25);
	/* The parent theme's header goes position:fixed once you scroll past
	   it (.sticky-outer .header-sticky), so without this, jumping straight
	   to a #anchor mid-page lands the card's top edge right underneath it,
	   hidden. scroll-margin-top is what the browser's own #anchor/scrollIntoView
	   behavior reads to add clearance — no scroll JS needed for that part. */
	scroll-margin-top: 110px;
}

body.ssd-home-page .ssd-home-form-card__heading {
	font-family: var(--ssd-home-font-heading);
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--ssd-home-ink);
	text-align: center;
	margin: 0 0 6px;
}

/* CF7 field styling — scoped, does not touch global .wpcf7 rules.
   Spacing is controlled on the Bootstrap column wrappers (one per field/
   group) rather than on the <p> tags CF7 puts inside them, since some
   columns (the radio groups) contain two stacked <p>s (label, then
   options) — controlling the column gives one uniform rhythm regardless.
   An explicit positive row-gap (not a negative-margin compensation hack)
   so the vertical rhythm stays predictable as field sizing changes. */
body.ssd-home-page .ssd-home-form-card__form .row {
	--bs-gutter-x: 1.25rem;
	row-gap: 8px;
}

body.ssd-home-page .ssd-home-form-card__form .row>[class*="col-"] {
	margin-bottom: 0;
}

/* "Currently receiving Social Security Disability Benefits?" reads as
   cramped right under the Phone/Email row above it — the uniform 8px
   row-gap is the same distance on every side of every question, but this
   particular question's label sits directly under two tall bordered
   input boxes with no radio circles of their own to visually separate
   from, so that same 8px reads tighter than the (also 8px) gap below it.
   Targeted via CF7's own data-name on this field specifically (stable
   regardless of markup/copy changes) rather than bumping row-gap
   site-wide, which would space out every question, not just this one. */
body.ssd-home-page .ssd-home-form-card__form .row>.col-md-12:has([data-name="currently_rec"]) {
	margin-top: 8px;
}

/* Bootstrap's own `.col-md-6` only pairs fields up at its 768px `md`
   breakpoint — below that (which is most of the mobile/small-tablet
   range) First/Last Name, Phone/Email and the two Currently
   Represented?/Out of Work? radio groups each drop to a full-width row,
   roughly doubling the form's stacked-row count exactly where it already
   has the least vertical room. Pairing them back up much earlier keeps
   the mobile form noticeably shorter; only true small-phone widths (under
   380px, too narrow for two comfortable pill inputs side by side) still
   get the full-width stack. */
@media (min-width: 380px) {
	body.ssd-home-page .ssd-home-form-card__form .row>.col-md-6 {
		flex: 0 0 auto;
		width: 50%;
	}
}

/* The Phone field carries a fixed "+1" prefix (assets/js/form-validation.js),
   so it needs about 150px of input width for the prefix plus a formatted
   "(404) 555-0123". Half a column on a small phone is only ~120px, which
   clipped both the placeholder and the typed number. Under 520px the Phone
   column goes full width, and so does the Email column beside it, so the pair
   stacks instead of leaving Email alone in half a row. Every other field
   keeps its pairing (all of them share one .row, so this has to target just
   these two columns). The placeholder match covers the moments before the
   script adds .ssd-phone-wrap, so the layout doesn't jump on load. */
@media (min-width: 380px) and (max-width: 520px) {
	body.ssd-home-page .ssd-home-form-card__form .row>.col-md-6:has(.ssd-phone-wrap),
	body.ssd-home-page .ssd-home-form-card__form .row>.col-md-6:has(.ssd-phone-wrap) + .col-md-6,
	body.ssd-home-page .ssd-home-form-card__form .row>.col-md-6:has(input[placeholder*="hone" i]),
	body.ssd-home-page .ssd-home-form-card__form .row>.col-md-6:has(input[placeholder*="hone" i]) + .col-md-6 {
		width: 100%;
	}
}

/* CF7 ships its own margin-bottom on this wrapper (a browser-default-ish
   ~10px) that was stacking on top of the row-gap above, making the real
   gap between question groups roughly 24px even though row-gap read as
   14px — zero it so row-gap is the only thing controlling this space. */
body.ssd-home-page .ssd-home-form-card__form .wpcf7-form-control-wrap,
body.ssd-home-page .ssd-home-form-card__form .wpcf7-form-control {
	margin-bottom: 0;
}

/* The site's base body copy line-height (~1.875) was inherited here,
   rendering every one-line label/option as a ~30px-tall line box for
   16px text — that inflated line-box, not the row-gap or margins, was
   the real source of the form reading as loose/gappy next to the
   mockup's tight single-line labels. Pin it down for every text node
   CF7 wraps in this form. */
body.ssd-home-page .ssd-home-form-card__form .wpcf7-form p {
	margin-bottom: 0;
	line-height: 1.3;
}

/* CF7 wraps each question's label in its own <p>, followed by a separate
   <p> for the radio row — keep the label close to its own options. */
body.ssd-home-page .ssd-home-form-card__form .wpcf7-form p:has(> label) {
	margin-bottom: 3px;
}

body.ssd-home-page .ssd-home-form-card__form input[type="text"],
body.ssd-home-page .ssd-home-form-card__form input[type="email"],
body.ssd-home-page .ssd-home-form-card__form input[type="tel"],
body.ssd-home-page .ssd-home-form-card__form textarea.form-control {
	width: 100%;
	background: #fff;
	border: 1px solid rgba(11, 28, 48, .1);
	padding: 12px 18px;
	font-size: .92rem;
	color: var(--ssd-home-ink);
	font-family: var(--ssd-home-font-body);
	box-sizing: border-box;
}

/* Pill-shaped single-line fields per reference design; textarea keeps a
   softer rounded-rectangle since a full pill doesn't work for multi-line. */
body.ssd-home-page .ssd-home-form-card__form input[type="text"],
body.ssd-home-page .ssd-home-form-card__form input[type="email"],
body.ssd-home-page .ssd-home-form-card__form input[type="tel"] {
	border-radius: 999px;
}

body.ssd-home-page .ssd-home-form-card__form textarea.form-control {
	border-radius: 20px;
	height: 70px;
	padding-top: 8px;
	resize: vertical;
}

body.ssd-home-page .ssd-home-form-card__form input::placeholder,
body.ssd-home-page .ssd-home-form-card__form textarea::placeholder {
	color: #8a93a3;
}

body.ssd-home-page .ssd-home-form-card__form label {
	display: block;
	font-family: var(--ssd-home-font-body);
	font-size: .92rem;
	font-weight: 500;
	line-height: 1.25;
	color: var(--ssd-home-ink);
	margin-bottom: 0;
}

body.ssd-home-page .ssd-home-form-card__form .wpcf7-form-control.wpcf7-radio {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
}

body.ssd-home-page .ssd-home-form-card__form .wpcf7-list-item {
	margin: 0;
	display: inline-flex;
	align-items: center;
}

body.ssd-home-page .ssd-home-form-card__form .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
	margin-bottom: 0;
}

body.ssd-home-page .ssd-home-form-card__form input[type="radio"] {
	width: 18px;
	height: 18px;
	accent-color: var(--ssd-home-blue);
	margin: 0;
}

/* The real CF7 consent text is longer than the "Lorem ipsum" placeholder
   in the reference design, so it will always wrap to more lines — kept as
   small/tight as still legible to minimize the difference. Negative
   top/bottom margin pulls this block closer to the textarea above and the
   submit button below, tightening the row-gap the shared .row rules put
   around every field group (10px is right for the fields themselves, but
   reads as too much air around a small disclaimer paragraph). */
body.ssd-home-page .ssd-home-form-card__form .checkbox_accept {
	font-size: .75rem;
	color: #5b6472;
	line-height: 1.25;
	margin: -4px 0 -3px;
}

body.ssd-home-page .ssd-home-form-card__form .checkbox_accept a {
	color: var(--ssd-home-blue);
	text-decoration: underline;
}

body.ssd-home-page .ssd-home-form-card__form .checkbox_accept .wpcf7-list-item {
	display: flex;
	align-items: flex-start;
	margin: 0;
}

/* CF7 nests the checkbox and its label text inside a single <label> (not as
   siblings of .wpcf7-list-item), and the generic
   ".wpcf7-list-item label { align-items: center }" rule above — written for
   the short single-line Yes/No radio options — reaches this label too. On
   a 4-line paragraph that centers the checkbox against the whole block
   instead of pinning it to the first line, unlike the design. Override with
   higher specificity so the checkbox sits at the top, level with the text. */
body.ssd-home-page .ssd-home-form-card__form .checkbox_accept .wpcf7-list-item label {
	align-items: flex-start;
}

body.ssd-home-page .ssd-home-form-card__form .checkbox_accept input[type="checkbox"] {
	margin-top: 3px;
	accent-color: var(--ssd-home-blue);
	flex-shrink: 0;
}

body.ssd-home-page .ssd-home-form-card__form .submit-btn-wrapper {
	margin-top: 0;
}

body.ssd-home-page .ssd-home-form-card__form input.theme-btn,
body.ssd-home-page .ssd-home-form-card__form input[type="submit"] {
	width: 100%;
	background: var(--ssd-home-maroon);
	color: #fff;
	border: none;
	border-radius: var(--cta-btn-radius);
	/* padding: 17px 20px; */
	/* Parent theme has an unscoped `input[type="submit"] { line-height: 49px }`
	   rule (igual/style.css) that our padding override doesn't touch, since
	   we never declared line-height ourselves — that leftover 49px line box
	   was pushing the text toward the bottom instead of centering it. */
	line-height: 1.1;
	font-size: 1rem;
	font-weight: 700;
	font-family: var(--ssd-home-font-body);
	cursor: pointer;
	transition: background-color .2s ease;
}

body.ssd-home-page .ssd-home-form-card__form input.theme-btn:hover,
body.ssd-home-page .ssd-home-form-card__form input[type="submit"]:hover {
	background: var(--ssd-home-maroon-dk);
}

body.ssd-home-page .ssd-home-form-card__form .wpcf7-not-valid-tip {
	font-size: .88rem;
	margin-top: 8px;
	margin-left: 12px;
}

body.ssd-home-page .ssd-home-form-card__form .wpcf7-response-output {
	border-radius: 10px;
	font-size: .85rem;
	margin-top: 16px;
}

/* ---------- Small screens ---------- */
@media (max-width: 767px) {

	/* Cut the same over-sized top padding described where .ssd-home-hero
	   is first defined — this shorthand is the one that actually reaches
	   the page (it's the later of two max-width:767px rules touching this
	   property, so it wins the cascade over that first one regardless of
	   source order). 16px/50px sides/bottom keep the section's existing
	   edge gutter and closing breathing room; only the top changes. */
	body.ssd-home-page .ssd-home-hero {
		padding: 28px 16px 50px;
	}

	/* Was 28px 22px 26px — more top/bottom padding than the desktop card
	   even gets, stacking with the row-gap (now 8px everywhere, see the
	   .row rule above) to make the form read as noticeably taller on
	   mobile than the same fields need. */
	body.ssd-home-page .ssd-home-form-card {
		padding: 16px 16px 14px;
	}

	/* Card heading, field labels and the consent paragraph all keep one
	   desktop-sized font down through tablet — fine there, where each
	   field still has a full-width or half-width column to breathe in,
	   but visibly large next to the ~150px-wide paired columns a small
	   phone gives them. Trimmed a notch smaller only at this breakpoint,
	   not shrunk everywhere, so desktop/tablet legibility is untouched. */
	body.ssd-home-page .ssd-home-form-card__heading {
		font-size: 1.15rem;
	}

	body.ssd-home-page .ssd-home-form-card__form label {
		font-size: .85rem;
	}

	body.ssd-home-page .ssd-home-form-card__form input[type="text"],
	body.ssd-home-page .ssd-home-form-card__form input[type="email"],
	body.ssd-home-page .ssd-home-form-card__form input[type="tel"],
	body.ssd-home-page .ssd-home-form-card__form textarea.form-control {
		padding: 10px 14px;
		font-size: .85rem;
	}

	body.ssd-home-page .ssd-home-form-card__form textarea.form-control {
		height: 44px;
	}

	body.ssd-home-page .ssd-home-form-card__form .checkbox_accept {
		font-size: .7rem;
	}

	body.ssd-home-page .ssd-home-form-card__form input[type="submit"] {
		font-size: .92rem;
	}

	/* Same idea for the hero's own left-column copy: subtext and checklist
	   items keep a single fixed size all the way from mobile to desktop
	   even though line-length shrinks a lot — a notch smaller here keeps
	   line breaks tidier on a narrow phone without touching how they read
	   on tablet/desktop. */
	body.ssd-home-page .ssd-home-hero__subtext {
		font-size: .95rem;
	}

	body.ssd-home-page .ssd-home-hero__checklist li {
		font-size: .92rem;
	}
}

/* ---------- Trust / Membership Badges ---------- */
/* Background color + optional pattern image both come from admin fields
   (inc/home-fields.php, group_home_trust_badges) — set inline on the
   section itself in template-parts/home/trust-badges.php. The pattern is
   treated as a tileable texture (repeat), not a single cover photo, so any
   size image the admin uploads keeps a consistent scale across the strip. */
body.ssd-home-page .ssd-home-trust {
	background-repeat: repeat;
	background-position: center;
	/* Was 44px: measuring the mockup's own navy strip (212px tall, badges
	   filling all but ~29px top/bottom) against its 1920px canvas relative
	   to this site's real container width, that padding works out to
	   roughly 20-24px, not 44 — the extra space was making the whole strip
	   read as far airier than the design. */
	padding: 24px 0;
}

body.ssd-home-page .ssd-home-trust__inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 40px 56px;
}

body.ssd-home-page .ssd-home-trust__item {
	display: flex;
	align-items: center;
	gap: 20px;
}

body.ssd-home-page .ssd-home-trust__logo {
	flex-shrink: 0;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* The two default badges are differently shaped marks, so a single shared
   max-width/max-height forces them toward a mismatched rendered size.
   `:nth-of-type` (not `:nth-child`) so the `.ssd-home-trust__divider` span
   between them doesn't throw off the count — it only numbers the two
   same-tag `.ssd-home-trust__item` divs.
   NOSSCR (NOSCR.png) is a circular seal, sized off the mockup (~3.5x
   taller than a thin wordmark would be). ACRD.png is the client's own
   logo file — a rounded chip around the wordmark, not a flat wordmark on
   its own — at natural 639x265 (aspect ~2.41:1); 37px tall (sized for the
   old flat wordmark asset it replaced) rendered it at just 37x89, tiny
   next to the seal. Given a comparable height instead, since it now reads
   as its own badge-style chip rather than a slim logo. */
body.ssd-home-page .ssd-home-trust__item:nth-of-type(1) .ssd-home-trust__logo {
	height: 122px;
	max-width: 140px;
}

body.ssd-home-page .ssd-home-trust__item:nth-of-type(2) .ssd-home-trust__logo {
	height: 96px;
	max-width: 240px;
}

/* Cream (--ssd-home-cream), not white — measured directly off the mockup
   (its rendered text sampled to ~rgb(234,227,211), a near-exact match for
   the brand cream token) rather than the plain rgba(255,255,255,.92) this
   used before. */
body.ssd-home-page .ssd-home-trust__text {
	color: var(--ssd-home-cream);
	font-family: var(--ssd-home-font-body);
	font-size: .95rem;
	font-weight: 500;
	line-height: 1.4;
	max-width: 230px;
	margin: 0;
}

body.ssd-home-page .ssd-home-trust__divider {
	display: block;
	width: 1px;
	height: 70px;
	background: rgba(255, 255, 255, .25);
	flex-shrink: 0;
}

/* `.ssd-home-trust__inner` is flex-wrap:wrap with the divider as a plain
   sibling between the two `.ssd-home-trust__item`s — at any width where
   the row (badge + text + gap, twice, plus the divider and the inner
   gaps) no longer fits but is still wider than this breakpoint, the
   second item wraps to its own line while the divider stays behind on the
   first line, stranded as a short vertical stroke floating over nothing.
   Adding up the two items' actual current sizes (122px seal + 230px text
   column + gaps, and the now-larger 240px-max ACRD chip + 230px text
   column + gaps) plus the container's own side padding, they need
   roughly 990-1010px to sit on one row — below the `lg` container (960px,
   992-1199px viewports) but above `md` (720px). 640px left that whole
   992-1199px zone (and part of 1200px+ on a narrow xl container) where
   wrapping half-happens. Matching this to the `xl` breakpoint instead —
   where the container (1140px) comfortably clears the ~1000px needed —
   means the two badges are never one wrap away from stranding the
   divider; below it, everything stacks in one predictable column. */
@media (max-width: 1199px) {
	body.ssd-home-page .ssd-home-trust__inner {
		flex-direction: column;
		gap: 28px;
	}

	body.ssd-home-page .ssd-home-trust__divider {
		width: 60%;
		height: 1px;
	}

	body.ssd-home-page .ssd-home-trust__text {
		max-width: 320px;
		text-align: center;
	}

	body.ssd-home-page .ssd-home-trust__item {
		flex-direction: column;
		text-align: center;
		gap: 14px;
	}
}

/* ---------- How We Can Help ---------- */
body.ssd-home-page .ssd-home-help {
	background: #fff;
	padding: 72px 0;
}

body.ssd-home-page .ssd-home-help__intro {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 32px;
}

body.ssd-home-page .ssd-home-help__eyebrow {
	color: var(--ssd-home-maroon);
	font-family: var(--ssd-home-font-body);
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	margin: 0 0 12px;
}

body.ssd-home-page .ssd-home-help__heading {
	color: var(--ssd-home-ink);
	font-family: var(--ssd-home-font-heading);
	font-weight: 700;
	font-size: 1.6rem;
	line-height: 1.35;
	margin: 0;
}

@media (min-width: 768px) {
	body.ssd-home-page .ssd-home-help__heading {
		font-size: 1.85rem;
	}
}

/* Mockup keeps the 3-card row well short of the full container width
   (cards read as a compact, centered block with generous side whitespace,
   not stretched edge-to-edge) — capping the grid's own max-width and
   centering it reproduces that, independent of whatever width .container
   happens to be. */
body.ssd-home-page .ssd-home-help__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
	max-width: 860px;
	margin: 0 auto;
	justify-content: center;
}

@media (min-width: 600px) {
	body.ssd-home-page .ssd-home-help__grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 992px) {

	/* Was 24px. Measuring the mockup directly (386px-wide cards, 58px
	   gutters between them — a gap-to-card-width ratio of ~0.15, versus
	   this grid's previous ~0.08), the 3-up row reads with much more
	   breathing room between cards than 24px gave it; cards end up a touch
	   narrower here (gap eats more of the fixed 860px grid width) but that
	   matches the mockup's proportions too, which favors a generous gutter
	   over maximizing each card's own width. */
	body.ssd-home-page .ssd-home-help__grid {
		grid-template-columns: 1fr 1fr 1fr;
		gap: 38px;
	}
}

/* Mockup cards measure ~197x167px (a ~6:5 ratio, not a plain rectangle) with
   a tight ~20px corner radius and snug internal padding at that scale.
   aspect-ratio reproduces the squarer proportions once the grid is at least
   2 columns wide; content longer than the reference copy is still free to
   grow the card taller there (aspect-ratio only sets the preferred size,
   min-content can still override it), so nothing clips. Below 600px the grid
   is a single full-width column, where the same ratio would force a tall
   card with dead space under short copy — so mobile cards just size to
   their content instead, which is the more "compact" result at that width. */
/* Padding trimmed a notch (was 22px 20px) to go with the tighter internal
   gaps below — the 992px+ grid gap increase (24px -> 38px, to match the
   mockup's own card-to-card spacing) shrank each card from ~307px to
   ~261px wide, so the old fixed gaps read as proportionally larger on the
   smaller card even though their pixel values never changed. */
body.ssd-home-page .ssd-home-help__card {
	background: var(--ssd-home-cream);
	border-radius: 45px;
	padding: 20px 18px;
	display: flex;
	flex-direction: column;
}

@media (min-width: 600px) {
	/* body.ssd-home-page .ssd-home-help__card { aspect-ratio: 6 / 5; } */
}

/* The icon image is the whole badge (maroon rounded square + glyph, baked
   into the image itself — see inc/home-fields.php instructions) rather than
   a plain glyph on a CSS-drawn background, so any admin-uploaded replacement
   only has to match this one square-image convention. */
body.ssd-home-page .ssd-home-help__icon {
	display: inline-flex;
	width: 36px;
	height: 36px;
	margin-bottom: 10px;
}

body.ssd-home-page .ssd-home-help__icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 12px;
}

body.ssd-home-page .ssd-home-help__card-title {
	color: var(--ssd-home-ink);
	font-family: var(--ssd-home-font-heading);
	font-weight: 700;
	font-size: 1.15rem;
	margin: 0 0 6px;
}

body.ssd-home-page .ssd-home-help__card-text {
	color: rgba(23, 39, 65, .82);
	font-family: var(--ssd-home-font-body);
	font-size: .92rem;
	line-height: 1.5;
	margin: 0 0 10px;
	flex-grow: 1;
}

body.ssd-home-page .ssd-home-help__card-link {
	color: var(--ssd-home-maroon);
	font-family: var(--ssd-home-font-body);
	font-size: .92rem;
	font-weight: 700;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: auto;
}

body.ssd-home-page a.ssd-home-help__card-link:hover {
	text-decoration: underline;
}

/* A card with no Link URL set renders this same label as plain (non-clickable)
   text — see how-we-can-help.php — so it still reads as a call-to-action
   without pretending to be a working link. */
body.ssd-home-page .ssd-home-help__card-link--static {
	cursor: default;
}

@media (max-width: 767px) {
	body.ssd-home-page .ssd-home-help {
		padding: 56px 0;
	}
}

/* ---------- Appeal Process (3-step timeline + CTA) ---------- */
/* "Your Strongest Odds" (step 3) needs to read as a positive outcome next
   to two "denied" steps — the base palette has nothing for that, so this
   is the one accent added outside Brandguidelines.pdf's five core colors.
   Kept muted/desaturated so it still sits quietly next to navy/maroon/cream
   rather than reading as an off-brand pop of color. */
body.ssd-home-page {
	--ssd-home-green: #3f7d5c;
}

body.ssd-home-page .ssd-home-appeal {
	background: var(--ssd-home-cream);
	padding: 72px 0;
}

body.ssd-home-page .ssd-home-appeal__intro {
	text-align: center;
	max-width: 680px;
	margin: 0 auto 36px;
}

body.ssd-home-page .ssd-home-appeal__eyebrow {
	color: var(--ssd-home-maroon);
	font-family: var(--ssd-home-font-body);
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	margin: 0 0 12px;
}

body.ssd-home-page .ssd-home-appeal__heading {
	color: var(--ssd-home-ink);
	font-family: var(--ssd-home-font-heading);
	font-weight: 700;
	font-size: 1.6rem;
	line-height: 1.35;
	margin: 0 0 16px;
}

@media (min-width: 768px) {
	body.ssd-home-page .ssd-home-appeal__heading {
		font-size: 1.85rem;
	}
}

body.ssd-home-page .ssd-home-appeal__subtext {
	color: rgba(23, 39, 65, .82);
	font-family: var(--ssd-home-font-body);
	font-size: 1rem;
	line-height: 1.6;
	max-width: 560px;
	margin: 0 auto;
}

/* Desktop/tablet: 3 even columns with no grid gap — the connecting line
   below relies on each circle sitting exactly one column-width apart, so
   spacing between steps comes from the step's own horizontal padding
   instead of `gap` (gap would throw off that math). Mobile stacks to a
   single column further down, where the line is dropped entirely. */
body.ssd-home-page .ssd-home-appeal__steps {
	display: grid;
	grid-template-columns: 1fr;
	row-gap: 40px;
}

@media (min-width: 768px) {
	body.ssd-home-page .ssd-home-appeal__steps {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

body.ssd-home-page .ssd-home-appeal__step {
	position: relative;
	text-align: center;
	padding: 0 20px;
}

/* The line: a 2px bar reaching from this step's circle-center back to the
   previous one. Circle center sits `top` down from the step's own top edge
   (half the circle's height); `right: 50%` anchors the bar's end at this
   circle's horizontal center, and width 100% (of this column) reaches
   exactly to the previous circle's center, since columns are equal width
   with zero gap between them. */
@media (min-width: 768px) {
	body.ssd-home-page .ssd-home-appeal__step:not(:first-child)::before {
		content: '';
		position: absolute;
		top: 38px;
		right: 50%;
		width: 100%;
		height: 2px;
		background: var(--ssd-home-blue);
		z-index: 1;
	}
}

body.ssd-home-page .ssd-home-appeal__circle {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	border-radius: 50%;
	background: var(--ssd-home-blue);
	color: var(--ssd-home-ink);
	font-family: var(--ssd-home-font-heading);
	font-weight: 700;
	font-size: 2rem;
	margin: 0 0 0px;
}

/* Step 3 (ALJ Hearing) is the turning point in the copy — the darkest,
   most prominent circle marks it as the step that matters most. */
body.ssd-home-page .ssd-home-appeal__step:nth-child(3) .ssd-home-appeal__circle {
	background: var(--ssd-home-navy);
	color: #fff;
}

body.ssd-home-page .ssd-home-appeal__step-title {
	color: var(--ssd-home-ink);
	font-family: var(--ssd-home-font-heading);
	font-weight: 700;
	font-size: 1.15rem;
	margin: 0 0 -10px;
}

body.ssd-home-page .ssd-home-appeal__step-status {
	color: var(--ssd-home-maroon);
	font-family: var(--ssd-home-font-body);
	font-size: .88rem;
	font-weight: 700;
	margin: 0 0 0px;
}

body.ssd-home-page .ssd-home-appeal__step:nth-child(3) .ssd-home-appeal__step-status {
	color: var(--ssd-home-green);
}

body.ssd-home-page .ssd-home-appeal__step-text {
	color: rgba(23, 39, 65, .82);
	font-family: var(--ssd-home-font-body);
	font-size: .92rem;
	line-height: 1.5;
	max-width: 260px;
	margin: 0 auto;
}

body.ssd-home-page .ssd-home-appeal__cta {
	text-align: center;
	margin-top: 35px;
}

body.ssd-home-page .ssd-home-appeal__cta-btn {
	display: inline-flex;
	align-items: center;
	background: var(--ssd-home-maroon);
	color: #fff;
	border-radius: var(--cta-btn-radius);
	padding: 13px 28px;
	font-family: var(--ssd-home-font-body);
	font-size: .95rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color .2s ease;
}

body.ssd-home-page a.ssd-home-appeal__cta-btn:hover {
	background: var(--ssd-home-maroon-dk);
}

body.ssd-home-page .ssd-home-appeal__cta-btn--static {
	cursor: default;
}

@media (max-width: 767px) {
	body.ssd-home-page .ssd-home-appeal {
		padding: 56px 0;
	}

	body.ssd-home-page .ssd-home-appeal__intro {
		margin-bottom: 44px;
	}

	body.ssd-home-page .ssd-home-appeal__step-text {
		max-width: 320px;
	}
}

/* ---------- Why Claimants Trust ADAG (photo + 2x2 reasons grid) ---------- */
body.ssd-home-page .ssd-home-why {
	background: var(--ssd-home-navy);
	padding: 88px 0;
}

/* Single column (photo stacked above content) until there's room for both
   side by side; .ssd-home-why--no-image (no photo uploaded, and no
   images/home/why-trust.jpg fallback either — see why-trust.php) always
   stays single column, with the content column re-centered below. */
body.ssd-home-page .ssd-home-why__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	align-items: center;
}

@media (min-width: 992px) {
	body.ssd-home-page .ssd-home-why__inner {
		grid-template-columns: minmax(320px, 420px) 1fr;
		gap: 64px;
	}
}

/* Lets the text + card grid use the column's full width up to the
   container edge (same edge the header logo/phone button align to)
   instead of stopping short and leaving unused space on the right. */
body.ssd-home-page .ssd-home-why--no-image .ssd-home-why__content {
	max-width: 760px;
	margin: 0 auto;
}

/* Below 992px the columns stack, so the photo is no longer width-capped by
   its grid track — left to a portrait aspect-ratio at full container width
   it'd render awkwardly tall on tablet-width screens. Capping its width and
   easing the ratio here keeps it a sensible size at every width in between,
   not just below the 767px phone breakpoint. */
body.ssd-home-page .ssd-home-why__media {
	border-radius: 24px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	max-width: 480px;
	margin: 0 auto;
}

/* Taller ratio at the 2-column breakpoint — a fixed ratio, not a stretch to
   match the content column's height, so the photo's size stays intentional
   and doesn't grow or shrink depending on how long the heading/card copy
   happens to be. */
@media (min-width: 992px) {
	body.ssd-home-page .ssd-home-why__media {
		aspect-ratio: 4 / 5;
		max-width: none;
		margin: 0;
	}
}

body.ssd-home-page .ssd-home-why__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

body.ssd-home-page .ssd-home-why__eyebrow {
	color: var(--ssd-home-blue);
	font-family: var(--ssd-home-font-body);
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	margin: 0 0 14px;
}

body.ssd-home-page .ssd-home-why__heading {
	color: #fff;
	font-family: var(--ssd-home-font-heading);
	font-weight: 700;
	font-size: 1.55rem;
	line-height: 1.3;
	max-width: 480px;
	margin: 0 0 16px;
}

@media (min-width: 768px) {
	body.ssd-home-page .ssd-home-why__heading {
		font-size: 1.9rem;
	}
}

/* Wider than the heading's 480px cap (which is tuned to match the mockup's
   exact line break) — now that the card grid below fills the full column
   width, a 480px description read noticeably narrower than the cards,
   leaving dead space to its right that the cards don't have. */
body.ssd-home-page .ssd-home-why__subtext {
	color: rgba(255, 255, 255, .82);
	font-family: var(--ssd-home-font-body);
	font-size: 1rem;
	line-height: 1.65;
	max-width: 560px;
	margin: 0 0 36px;
}

body.ssd-home-page .ssd-home-why__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

@media (min-width: 480px) {
	body.ssd-home-page .ssd-home-why__grid {
		grid-template-columns: 1fr 1fr;
	}
}

body.ssd-home-page .ssd-home-why--no-image .ssd-home-why__grid {
	max-width: 640px;
}

/* Mockup cards run noticeably taller/roomier than a snug content-fit box
   (title wraps to 2 lines with real breathing room around it, not packed
   edge-to-edge) — the generous padding here is what gets that proportion,
   not a fixed height (so longer/shorter copy still reads naturally). */
body.ssd-home-page .ssd-home-why__point {
	background: var(--ssd-home-blue);
	border-radius: 26px;
	padding: 26px 24px;
}

body.ssd-home-page .ssd-home-why__point-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 13px;
	background: var(--ssd-home-navy);
	color: #fff;
	margin: 0 0 18px;
}

body.ssd-home-page .ssd-home-why__point-icon svg {
	width: 20px;
	height: 20px;
}

body.ssd-home-page .ssd-home-why__point-title {
	color: var(--ssd-home-ink);
	font-family: var(--ssd-home-font-heading);
	font-weight: 700;
	font-size: 1.3rem;
	line-height: 1.3;
	margin: 0 0 10px;
}

body.ssd-home-page .ssd-home-why__point-text {
	color: rgba(23, 39, 65, .78);
	font-family: var(--ssd-home-font-body);
	font-size: .92rem;
	line-height: 1.5;
	margin: 0;
}

@media (max-width: 767px) {
	body.ssd-home-page .ssd-home-why {
		padding: 56px 0;
	}
}

/* ---------- SSDI vs. SSI Comparison ---------- */
body.ssd-home-page .ssd-home-compare {
	background: #fff;
	padding: 88px 0;
}

/* Was 640px — too narrow for "Two programs. We'll help you find the right
   one." at this heading's desktop size (needs ~705px to stay on one line,
   per canvas measureText), so it wrapped to two lines here even though
   the mockup keeps it on one. */
body.ssd-home-page .ssd-home-compare__intro {
	text-align: center;
	max-width: 740px;
	margin: 0 auto 36px;
}

/* This section's eyebrow is brand red (not the maroon the other sections'
   eyebrows use) — it previews the SSI card's own red, same way the intro
   ties to the cards below it. */
body.ssd-home-page .ssd-home-compare__eyebrow {
	color: var(--ssd-home-red);
	font-family: var(--ssd-home-font-body);
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	margin: 0 0 12px;
}

body.ssd-home-page .ssd-home-compare__heading {
	color: var(--ssd-home-ink);
	font-family: var(--ssd-home-font-heading);
	font-weight: 700;
	font-size: 1.6rem;
	line-height: 1.35;
	margin: 0;
	/* Without this, the sentence's last word or two can wrap alone onto
	   their own line ("...the right" / "one.") at some container widths —
	   text-wrap: balance spreads a wrapped heading's words evenly across
	   its lines instead. No-op (still wraps, just not balanced) in browsers
	   that don't support it yet. */
	text-wrap: balance;
}

@media (min-width: 768px) {
	body.ssd-home-page .ssd-home-compare__heading {
		font-size: 1.85rem;
	}
}

/* Was repeat(auto-fit, minmax(300px, 1fr)) — auto-fit's minmax() sets a
   hard 300px MINIMUM track size, not a preference, so on any mobile
   screen whose container (after side padding) is narrower than 300px the
   grid can't shrink to fit and overflows instead of stacking — same bug
   already found and fixed on the What Clients Say grid. Explicit
   breakpoint instead — same 1fr → 1fr 1fr convention as How We Can
   Help/Where We Serve/Conditions/What Clients Say above — never has a
   fixed minimum to overflow against at any width. */
body.ssd-home-page .ssd-home-compare__cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	max-width: 900px;
	margin: 0 auto;
}

@media (min-width: 600px) {
	body.ssd-home-page .ssd-home-compare__cards {
		grid-template-columns: 1fr 1fr;
	}
}

body.ssd-home-page .ssd-home-compare__card {
	background: #fff;
	border: 1px solid rgba(23, 39, 65, .1);
	border-radius: 22px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 20px 40px rgba(23, 39, 65, .08);
}

body.ssd-home-page .ssd-home-compare__card-head {
	padding: 26px 30px;
}

body.ssd-home-page .ssd-home-compare__card--navy .ssd-home-compare__card-head {
	background: var(--ssd-home-navy);
}

body.ssd-home-page .ssd-home-compare__card--red .ssd-home-compare__card-head {
	background: var(--ssd-home-red);
}

body.ssd-home-page .ssd-home-compare__card-title {
	color: #fff;
	font-family: var(--ssd-home-font-heading);
	font-weight: 700;
	font-size: 1.7rem;
	/* line-height was unset (inherited ~1.47), so the line box added ~6px
	   of leading above/below the glyph on top of the margin below — the
	   gap read as bigger than the 4px margin alone suggested. Tightening
	   the line-height removes that extra leading instead of just chasing
	   it with a smaller margin. */
	line-height: 1.1;
	margin: 0 0 2px;
}

body.ssd-home-page .ssd-home-compare__card-subtitle {
	color: rgba(255, 255, 255, .85);
	font-family: var(--ssd-home-font-body);
	font-size: .9rem;
	margin: 0;
}

body.ssd-home-page .ssd-home-compare__list {
	list-style: none;
	margin: 0;
	padding: 8px 30px 4px;
	flex-grow: 1;
}

/* Was padding:16px 0 (a 32px combined gap around each divider) — measuring
   the mockup's own row rhythm (its ~50-54px gap between item text blocks
   against its text line-height) works out to roughly 44-48px combined,
   noticeably more breathing room than this had. */
body.ssd-home-page .ssd-home-compare__list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 15px 0;
	border-bottom: 1px solid rgba(23, 39, 65, .1);
	color: var(--ssd-home-ink);
	font-family: var(--ssd-home-font-body);
	font-size: .95rem;
	line-height: 1.45;
}

body.ssd-home-page .ssd-home-compare__list li:last-child {
	border-bottom: none;
}

/* Same CSS-drawn checkmark technique as the Hero checklist (see
   .ssd-home-hero__check-icon) — no circle backing here, just the mark
   itself in brand red. Was a 5x9 tick (2px stroke) in a 16px box — next to
   the mockup's own checkmarks (bold, clearly-drawn glyphs, not a thin
   diagonal sliver) it read as too small and thin. Scaled the tick up
   (5x9 -> 7x13) and thickened its stroke (2px -> 3px) to match. */
body.ssd-home-page .ssd-home-compare__list-icon {
	position: relative;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: 2px;
}

body.ssd-home-page .ssd-home-compare__list-icon::after {
	content: '';
	position: absolute;
	left: 5px;
	top: 1px;
	width: 7px;
	height: 13px;
	border: solid var(--ssd-home-red);
	border-width: 0 3px 3px 0;
	transform: rotate(45deg);
}

body.ssd-home-page .ssd-home-compare__card-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 20px 30px 28px;
	padding: 15px;
	border-radius: 13px;
	color: #fff;
	font-family: var(--ssd-home-font-body);
	font-size: .95rem;
	font-weight: 700;
	text-decoration: none;
	transition: background-color .2s ease;
}

body.ssd-home-page .ssd-home-compare__card--navy .ssd-home-compare__card-cta {
	background: var(--ssd-home-navy);
}

body.ssd-home-page .ssd-home-compare__card--navy a.ssd-home-compare__card-cta:hover {
	background: var(--ssd-home-navy-dk);
}

body.ssd-home-page .ssd-home-compare__card--red .ssd-home-compare__card-cta {
	background: var(--ssd-home-red);
}

body.ssd-home-page .ssd-home-compare__card--red a.ssd-home-compare__card-cta:hover {
	background: var(--ssd-home-red-dk);
}

body.ssd-home-page .ssd-home-compare__card-cta--static {
	cursor: default;
}

body.ssd-home-page .ssd-home-compare__cta {
	text-align: center;
	margin-top: 48px;
}

body.ssd-home-page .ssd-home-compare__cta-btn {
	display: inline-flex;
	align-items: center;
	background: var(--ssd-home-maroon);
	color: #fff;
	border-radius: var(--cta-btn-radius);
	padding: 12px 24px;
	font-family: var(--ssd-home-font-body);
	font-size: .95rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color .2s ease;
}

body.ssd-home-page a.ssd-home-compare__cta-btn:hover {
	background: var(--ssd-home-maroon-dk);
}

body.ssd-home-page .ssd-home-compare__cta-btn--static {
	cursor: default;
}

@media (max-width: 767px) {
	body.ssd-home-page .ssd-home-compare {
		padding: 56px 0;
	}
}

/* ---------- Where We Serve (state cards pulled from the ssd_state CPT) ---------- */
/* Both this section and Comparison above it are white — full 88px top
   padding on both sides of the seam reads as an oversized gap between two
   sections that already look like one continuous block. Tightening this
   section's own top padding (not its bottom, which still needs to clear
   the next section normally) closes that gap without a visible divider. */
body.ssd-home-page .ssd-home-serve {
	background: #fff;
	padding: 24px 0 88px;
}

body.ssd-home-page .ssd-home-serve__intro {
	text-align: center;
	max-width: 680px;
	margin: 0 auto 32px;
}

body.ssd-home-page .ssd-home-serve__eyebrow {
	color: var(--ssd-home-maroon);
	font-family: var(--ssd-home-font-body);
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	margin: 0 0 12px;
}

body.ssd-home-page .ssd-home-serve__heading {
	color: var(--ssd-home-ink);
	font-family: var(--ssd-home-font-heading);
	font-weight: 700;
	font-size: 1.6rem;
	line-height: 1.35;
	margin: 0 0 12px;
	text-wrap: balance;
}

@media (min-width: 768px) {
	body.ssd-home-page .ssd-home-serve__heading {
		font-size: 1.85rem;
	}
}

body.ssd-home-page .ssd-home-serve__subtext {
	color: rgba(23, 39, 65, .78);
	font-family: var(--ssd-home-font-body);
	font-size: 1rem;
	line-height: 1.6;
	margin: 0;
}

/* Same 1 → 2 → 3 column progression as the How We Can Help grid, since
   this is the same "small cream cards on white" pattern reused. */
/* Cards size to their content (no empty space on the right); rows wrap and
   center at every width. */
body.ssd-home-page .ssd-home-serve__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 18px;
	margin-bottom: 44px;
}

/* A lighter tint of the same brand cream used by the How We Can Help cards
   (var(--ssd-home-cream) is too saturated here — the mockup's state cards
   are a much paler, near-white cream), not an unrelated off-brand color. */
body.ssd-home-page .ssd-home-serve__card {
	display: inline-flex;
	max-width: 100%;
	align-items: center;
	gap: 14px;
	background: color-mix(in srgb, var(--ssd-home-cream) 35%, #fff);
	border: 1px solid rgba(23, 39, 65, .08);
	border-radius: 18px;
	padding: 18px 28px 18px 20px;
	text-decoration: none;
	transition: border-color .2s ease, background-color .2s ease;
}

body.ssd-home-page .ssd-home-serve__card:hover {
	border-color: rgba(128, 32, 72, .35);
	background: color-mix(in srgb, var(--ssd-home-cream) 55%, #fff);
}

/* Light maroon tint so the maroon location pin (icons/location_icon.png)
   reads against it. */
body.ssd-home-page .ssd-home-serve__badge {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--ssd-home-maroon) 12%, #fff);
}

body.ssd-home-page .ssd-home-serve__badge img {
	width: 24px;
	height: 24px;
	display: block;
}

body.ssd-home-page .ssd-home-serve__card-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

/* Neither of these two had an explicit line-height, so both inherited a
   loose ~1.8-2.3 ratio (a 30px line box for 16.8px/13.1px text) — the
   flex `gap: 2px` above measured tight box-edge-to-box-edge, but the real
   glyph-to-glyph gap (what's actually visible) was much bigger once each
   line's own oversized leading is added in. Tightening the line-height
   removes that hidden padding instead of just shrinking a gap value that
   wasn't the real culprit — same fix as the Compare cards' title/subtitle. */
body.ssd-home-page .ssd-home-serve__card-title {
	color: var(--ssd-home-ink);
	font-family: var(--ssd-home-font-heading);
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.2;
}

body.ssd-home-page .ssd-home-serve__card-subtitle {
	color: rgba(23, 39, 65, .65);
	font-family: var(--ssd-home-font-body);
	font-size: .82rem;
	line-height: 1.35;
}

body.ssd-home-page .ssd-home-serve__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-top: 32px;
}

body.ssd-home-page .ssd-home-serve__note {
	color: var(--ssd-home-ink);
	font-family: var(--ssd-home-font-body);
	font-size: .98rem;
	line-height: 1.5;
	margin: 0;
	max-width: 460px;
}

body.ssd-home-page .ssd-home-serve__cta-btn {
	flex: 0 0 auto;
	width: fit-content;
	display: inline-flex;
	align-items: center;
	background: var(--ssd-home-maroon);
	color: #fff;
	border-radius: var(--cta-btn-radius);
	padding: 16px 32px;
	font-family: var(--ssd-home-font-body);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color .2s ease;
	white-space: nowrap;
}

body.ssd-home-page a.ssd-home-serve__cta-btn:hover {
	background: var(--ssd-home-maroon-dk);
}

body.ssd-home-page .ssd-home-serve__cta-btn--static {
	cursor: default;
}

/* "All Locations" sits beside "Start Your Free Review" as the secondary
   action: same size, outlined instead of filled. */
body.ssd-home-page .ssd-home-serve__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 14px;
}

body.ssd-home-page .ssd-home-serve__cta-btn--outline {
	background: transparent;
	color: var(--ssd-home-maroon);
	padding: 14px 30px;
	border: 2px solid var(--ssd-home-maroon);
	transition: background-color .2s ease, color .2s ease;
}

body.ssd-home-page a.ssd-home-serve__cta-btn--outline:hover,
body.ssd-home-page a.ssd-home-serve__cta-btn--outline:focus-visible {
	background: var(--ssd-home-maroon);
	color: #fff;
}

@media (max-width: 767px) {
	body.ssd-home-page .ssd-home-serve {
		padding: 20px 0 56px;
	}

	body.ssd-home-page .ssd-home-serve__footer {
		justify-content: center;
		text-align: center;
	}

	body.ssd-home-page .ssd-home-serve__note {
		max-width: none;
	}

	/* Stack the two buttons full-width-ish on phones */
	body.ssd-home-page .ssd-home-serve__actions {
		flex-direction: column;
		width: 100%;
		gap: 12px;
	}

	body.ssd-home-page .ssd-home-serve__actions .ssd-home-serve__cta-btn {
		width: 100%;
		max-width: 340px;
		justify-content: center;
	}
}

/* ---------- Conditions We Help With ---------- */
body.ssd-home-page .ssd-home-conditions {
	background: var(--ssd-home-cream);
	padding: 72px 0;
}

/* Was 640px. At that width `text-wrap: balance` below always split the
   heading after "you" ("...condition keeps you" / "from working...") no
   matter how much wider the container got — balance re-optimizes for
   even line lengths, not for matching a specific mockup break, and this
   particular sentence's word lengths meant a wider box alone couldn't
   shift its choice short of fitting the whole thing on one line (needs
   ~795px). The mockup breaks after "from" instead; normal (non-balanced)
   wrapping produces exactly that break anywhere in a 480-600px range, so
   560px (the middle of that range) is a safe, fixed target rather than
   one requiring exact measurement. */
body.ssd-home-page .ssd-home-conditions__intro {
	text-align: center;
	max-width: 560px;
	margin: 0 auto 32px;
}

body.ssd-home-page .ssd-home-conditions__eyebrow {
	color: var(--ssd-home-maroon);
	font-family: var(--ssd-home-font-body);
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	margin: 0 0 12px;
}

body.ssd-home-page .ssd-home-conditions__heading {
	color: var(--ssd-home-ink);
	font-family: var(--ssd-home-font-heading);
	font-weight: 700;
	font-size: 1.6rem;
	line-height: 1.35;
	margin: 0;
}

@media (min-width: 768px) {
	body.ssd-home-page .ssd-home-conditions__heading {
		font-size: 1.85rem;
	}
}

/* Cards size to their label (not stretched to grid columns); rows wrap and
   center at every width. */
body.ssd-home-page .ssd-home-conditions__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}

body.ssd-home-page .ssd-home-conditions__card {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	background: #fff;
	border: 1px solid transparent;
	border-radius: 16px;
	padding: 18px 28px;
	text-align: center;
	color: var(--ssd-home-ink);
	font-family: var(--ssd-home-font-body);
	font-weight: 700;
	font-size: .95rem;
	line-height: 1.3;
	text-decoration: none;
	transition: border-color .2s ease, box-shadow .2s ease;
}

body.ssd-home-page a.ssd-home-conditions__card:hover {
	border-color: var(--ssd-home-red);
	box-shadow: 0 8px 20px rgba(23, 39, 65, .08);
}

body.ssd-home-page .ssd-home-conditions__card--static {
	cursor: default;
}

/* The 12th card is always the highlighted "view all" tile — fixed by
   position, not something an admin can accidentally style differently by
   editing its label (see conditions.php). */
body.ssd-home-page .ssd-home-conditions__card--featured {
	background: var(--ssd-home-navy);
	color: #fff;
}

body.ssd-home-page a.ssd-home-conditions__card--featured:hover {
	border-color: var(--ssd-home-navy-dk);
}

@media (max-width: 767px) {
	body.ssd-home-page .ssd-home-conditions {
		padding: 56px 0;
	}
}

/* ---------- Process Timeline ("Why Claimants Trust ADAG") ---------- */
/* background-repeat (not cover) — this is a small tileable texture
   layered over the navy, same "pattern tiled over a solid color"
   convention as .ssd-home-trust's own background pattern image. */
body.ssd-home-page .ssd-home-process {
	/* Muted amber/tan (not the brand's bright --ssd-home-gold, used for
	   the star rating elsewhere) — matches the mockup's node border,
	   icon, connecting line, and "STEP N" label, all one accent. */
	--ssd-home-process-gold: #dba76a;
	background-color: var(--ssd-home-navy);
	background-repeat: repeat;
	background-position: center;
	padding: 88px 0;
}

body.ssd-home-page .ssd-home-process__intro {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 36px;
}

body.ssd-home-page .ssd-home-process__eyebrow {
	color: var(--ssd-home-blue);
	font-family: var(--ssd-home-font-body);
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	margin: 0 0 14px;
}

body.ssd-home-page .ssd-home-process__heading {
	color: #fff;
	font-family: var(--ssd-home-font-heading);
	font-weight: 700;
	font-size: 1.55rem;
	line-height: 1.3;
	margin: 0;
	text-wrap: balance;
}

@media (min-width: 768px) {
	body.ssd-home-page .ssd-home-process__heading {
		font-size: 1.9rem;
	}
}

body.ssd-home-page .ssd-home-process__timeline {
	position: relative;
	max-width: 900px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

body.ssd-home-page .ssd-home-process__step {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 62px 1fr;
	gap: 20px;
	align-items: start;
}

/* Connector segment per step (not one long line on __timeline) — drawn
   from THIS step's node center down through the gap to the NEXT step's
   node center. Both offsets are the same node radius (31px), so they
   cancel out of the height calc regardless of how tall this step's own
   card is: height is always "100% of this step + the gap". That's what
   keeps the line ending exactly at the next node, never dangling past
   the last (:last-child has no connector at all). */
body.ssd-home-page .ssd-home-process__step:not(:last-child)::before {
	content: '';
	position: absolute;
	top: 31px;
	left: 30px;
	width: 2px;
	height: calc(100% + 20px);
	background: rgba(219, 167, 106, .5);
	z-index: 1;
}

/* Solid dark navy fill with a ring matching the icon's own color — the
   steps icons (search/document/clipboard-plus/gavel) are used as-is with
   their baked-in #dec4b4 tan fill (see images/home/README.txt), so the
   border is pinned to that same value rather than the section's shared
   gold accent (--ssd-home-process-gold, still used for the connecting
   line and "STEP N" label). */
body.ssd-home-page .ssd-home-process__node {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	border: 2.5px solid #dec4b4;
	color: var(--ssd-home-process-gold);
	background: var(--ssd-home-navy-dk);
}

/* filter reset only: a bundled Elementor stylesheet ships a bare `svg{}`
   rule (fill:#fff + drop-shadow). These icons set their own fill via an
   internal <style class="cls-1"> block, which — unlike a bare fill=""
   attribute — already out-specifies Elementor's element selector, so no
   fill override is needed here; only the drop-shadow filter is reset. */
body.ssd-home-page .ssd-home-process__node svg {
	width: 26px;
	height: 26px;
	filter: none;
}

/* Step 5 is always the completed/success state — filled green, no
   outline — fixed by position (see process.php), not admin-editable. Its
   checkmark is drawn with CSS (two rotated borders), same technique as
   the Hero/Comparison checkmarks, instead of the thin scaled-down SVG
   stroke the other steps' icons use — bolder and crisper at this size.
   left/top center the (13x23) box in the 62px circle — (62-13)/2=24.5,
   (62-23)/2=19.5 — rounded to the nearest px. */
body.ssd-home-page .ssd-home-process__step--complete .ssd-home-process__node {
	background: var(--ssd-home-green);
	border-color: var(--ssd-home-green);
}

body.ssd-home-page .ssd-home-process__step--complete .ssd-home-process__node::after {
	content: '';
	position: absolute;
	left: 22px;
	top: 14px;
	width: 13px;
	height: 23px;
	border: solid #fff;
	border-width: 0 3px 3px 0;
	transform: rotate(45deg);
}

body.ssd-home-page .ssd-home-process__card {
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 20px;
	padding: 12px 18px;
}

body.ssd-home-page .ssd-home-process__step--complete .ssd-home-process__card {
	background: linear-gradient(90deg, rgba(63, 125, 92, .35), rgba(23, 39, 65, .35));
	border-color: rgba(114, 189, 148, .35);
}

body.ssd-home-page .ssd-home-process__label {
	display: inline;
	color: var(--ssd-home-process-gold);
	font-family: var(--ssd-home-font-body);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	margin: 0 10px 0 0;
}

body.ssd-home-page .ssd-home-process__step--complete .ssd-home-process__label {
	color: color-mix(in srgb, var(--ssd-home-green) 55%, #fff);
}

body.ssd-home-page .ssd-home-process__title {
	display: inline;
	color: #fff;
	font-family: var(--ssd-home-font-heading);
	font-weight: 700;
	font-size: 1.1rem;
}

body.ssd-home-page .ssd-home-process__text {
	color: rgba(255, 255, 255, .75);
	font-family: var(--ssd-home-font-body);
	font-size: .92rem;
	line-height: 1.35;
	margin: 4px 0 0;
}

@media (max-width: 767px) {
	body.ssd-home-page .ssd-home-process {
		padding: 56px 0;
	}

	body.ssd-home-page .ssd-home-process__step {
		grid-template-columns: 40px 1fr;
		gap: 16px;
	}

	body.ssd-home-page .ssd-home-process__node {
		width: 40px;
		height: 40px;
	}

	body.ssd-home-page .ssd-home-process__node svg {
		width: 18px;
		height: 18px;
	}

	body.ssd-home-page .ssd-home-process__step:not(:last-child)::before {
		top: 20px;
		left: 19px;
	}

	body.ssd-home-page .ssd-home-process__card {
		padding: 12px 16px;
	}

	body.ssd-home-page .ssd-home-process__title {
		display: block;
		margin-top: 2px;
	}

	/* Step 5's checkmark (::after, above) is sized/positioned for the
	   desktop 62px node — this rule shrinks the node to 40px but never
	   scaled the checkmark down with it, so it renders off-center (too far
	   right/down) inside the smaller circle. Scaled proportionally
	   (40/62 ratio) including the same slight up-left optical shift the
	   desktop version uses. */
	body.ssd-home-page .ssd-home-process__step--complete .ssd-home-process__node::after {
		left: 14px;
		top: 9px;
		width: 8px;
		height: 15px;
		border-width: 0 2px 2px 0;
	}
}

/* ---------- Meet the Disability Team (intro panel + 2 photo cards) ---------- */
body.ssd-home-page .ssd-home-team {
	/* Cream (was white): with Recent Case Results removed, Team, Testimonials
	   and FAQ would otherwise be three white sections in a row. */
	background: var(--ssd-home-cream);
	padding: 88px 0;
}

body.ssd-home-page .ssd-home-team__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	max-width: 1000px;
	margin: 0 auto;
}

@media (min-width: 768px) {
	body.ssd-home-page .ssd-home-team__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 26px;
	}
}

/* Intro panel: navy with a faint triangle pattern */
body.ssd-home-page .ssd-home-team__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
	min-height: 420px;
	padding: 36px 28px;
	border-radius: 32px;
	overflow: hidden;
	color: #fff;
	background-color: #1c3563;
	background-size: cover;
	background-position: center;
}

body.ssd-home-page .ssd-home-team__eyebrow {
	color: #8fb4de;
	font-family: var(--ssd-home-font-body);
	font-size: .85rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	margin: 0 0 12px;
}

body.ssd-home-page .ssd-home-team__heading {
	color: #fff;
	font-family: var(--ssd-home-font-heading);
	font-weight: 700;
	font-size: 1.3rem;
	line-height: 1.3;
	margin: 0;
}

body.ssd-home-page .ssd-home-team__cta {
	margin: 0;
}

body.ssd-home-page .ssd-home-team__cta-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ssd-home-maroon);
	color: #fff;
	border-radius: 12px;
	padding: 18px 24px;
	font-family: var(--ssd-home-font-heading);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
}

body.ssd-home-page a.ssd-home-team__cta-btn:hover {
	background: var(--ssd-home-maroon-dk);
}

body.ssd-home-page .ssd-home-team__cta-btn--static {
	cursor: default;
}

/* Photo cards: portrait photo, dark navy name bar */
body.ssd-home-page .ssd-home-team__card {
	background: #04203f;
	border-radius: 32px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-height: 420px;
}

body.ssd-home-page .ssd-home-team__media {
	flex: 1 1 auto;
	min-height: 300px;
	overflow: hidden;
}

body.ssd-home-page .ssd-home-team__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	display: block;
}

body.ssd-home-page .ssd-home-team__body {
	padding: 18px 28px 24px 52px;
	display: flex;
	flex-direction: column;
}

body.ssd-home-page .ssd-home-team__name {
	color: #fff;
	font-family: var(--ssd-home-font-heading);
	font-weight: 700;
	font-size: 1.3rem;
	line-height: 1.2;
	margin: 0 0 4px;
}

body.ssd-home-page .ssd-home-team__title {
	color: var(--ssd-home-red);
	font-family: var(--ssd-home-font-body);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1.3;
	margin: 0 0 12px;
}

body.ssd-home-page .ssd-home-team__link {
	color: #8fb4de;
	font-family: var(--ssd-home-font-body);
	font-size: .85rem;
	font-weight: 600;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

body.ssd-home-page a.ssd-home-team__link:hover {
	text-decoration: underline;
}

body.ssd-home-page .ssd-home-team__link--static {
	cursor: default;
}

@media (max-width: 767px) {
	body.ssd-home-page .ssd-home-team {
		padding: 56px 0;
	}

	body.ssd-home-page .ssd-home-team__panel,
	body.ssd-home-page .ssd-home-team__card {
		min-height: 0;
	}

	body.ssd-home-page .ssd-home-team__media {
		aspect-ratio: 4 / 5;
		flex: none;
	}

	body.ssd-home-page .ssd-home-team__body {
		padding: 18px 24px 22px;
	}
}

/* ---------- Recent Case Results (side intro + scrolling card carousel) ---------- */
body.ssd-home-page .ssd-home-cases {
	background: var(--ssd-home-cream);
	padding: 72px 0;
	overflow: hidden;
}

body.ssd-home-page .ssd-home-cases__layout {
	display: grid;
	/* minmax(0, 1fr), not 1fr: a plain 1fr column won't shrink below its
	   content, so the scrolling track would stretch the column off-screen. */
	grid-template-columns: minmax(0, 1fr);
	gap: 32px;
	align-items: stretch;
}

@media (min-width: 992px) {
	body.ssd-home-page .ssd-home-cases__layout {
		grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
		gap: 40px;
	}

	/* Let the track run off the right edge of the container to the
	   viewport edge, like the mockup's cut-off third card. */
	body.ssd-home-page .ssd-home-cases__inner {
		container-type: inline-size;
	}

	/* 100cqw = the container's width, so this is exactly the gap between
	   the container's right edge and the viewport's right edge. */
	body.ssd-home-page .ssd-home-cases__carousel {
		margin-right: calc((100cqw - 100vw) / 2);
	}
}

body.ssd-home-page .ssd-home-cases__side {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 28px;
}

body.ssd-home-page .ssd-home-cases__eyebrow {
	color: var(--ssd-home-maroon);
	font-family: var(--ssd-home-font-body);
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	margin: 0 0 12px;
}

body.ssd-home-page .ssd-home-cases__heading {
	color: var(--ssd-home-ink);
	font-family: var(--ssd-home-font-heading);
	font-weight: 700;
	font-size: 1.6rem;
	line-height: 1.25;
	margin: 0;
}

@media (min-width: 768px) {
	body.ssd-home-page .ssd-home-cases__heading {
		font-size: 1.85rem;
	}
}

body.ssd-home-page .ssd-home-cases__disclaimer {
	color: rgba(23, 39, 65, .87);
	font-family: var(--ssd-home-font-body);
	font-size: .95rem;
	font-weight: 500;
	line-height: 1.5;
	margin: 0 0 20px;
	max-width: 340px;
}

body.ssd-home-page .ssd-home-cases__nav {
	display: flex;
	gap: 14px;
}

body.ssd-home-page .ssd-home-cases__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ssd-home-maroon);
	color: #fff;
	cursor: pointer;
	transition: background-color .2s ease, opacity .2s ease;
}

body.ssd-home-page .ssd-home-cases__arrow:hover:not(:disabled) {
	background: var(--ssd-home-maroon-dk);
}

body.ssd-home-page .ssd-home-cases__arrow:focus-visible {
	outline: 2px solid var(--ssd-home-ink);
	outline-offset: 3px;
}

body.ssd-home-page .ssd-home-cases__arrow:disabled {
	opacity: .35;
	cursor: default;
}

body.ssd-home-page .ssd-home-cases__track {
	display: flex;
	gap: 28px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	padding: 4px 0;
}

/* Trailing spacer: lets the last card scroll all the way into the first
   slot (instead of the track stopping with earlier cards still showing),
   so Next only disables once the last card is the one in front. Width =
   track width - card width - gap, mirroring .ssd-home-cases__card below. */
body.ssd-home-page .ssd-home-cases__track::after {
	content: "";
	flex: 0 0 max(0px, calc(100% - min(400px, 85%) - 28px));
}

body.ssd-home-page .ssd-home-cases__track::-webkit-scrollbar {
	display: none;
}

body.ssd-home-page .ssd-home-cases__track:focus-visible {
	outline: 2px solid var(--ssd-home-ink);
	outline-offset: 4px;
}

body.ssd-home-page .ssd-home-cases__card {
	flex: 0 0 min(400px, 85%);
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	min-height: 380px;
	background: #fff;
	border-radius: 32px;
	padding: 56px 40px 36px;
}

body.ssd-home-page .ssd-home-cases__headline {
	color: var(--ssd-home-red);
	font-family: var(--ssd-home-font-heading);
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1.3;
	margin: 0 0 16px;
}

body.ssd-home-page .ssd-home-cases__text {
	color: rgba(23, 39, 65, .88);
	font-family: var(--ssd-home-font-body);
	font-size: 1rem;
	line-height: 1.75;
	margin: 0 0 24px;
	flex-grow: 1;
}

body.ssd-home-page .ssd-home-cases__meta {
	color: rgba(23, 39, 65, .6);
	font-family: var(--ssd-home-font-body);
	font-size: .95rem;
	font-weight: 500;
	letter-spacing: .02em;
	text-transform: uppercase;
	line-height: 1.3;
	margin: 0;
}

@media (max-width: 991px) {
	body.ssd-home-page .ssd-home-cases__side {
		gap: 20px;
	}

	body.ssd-home-page .ssd-home-cases__disclaimer {
		max-width: none;
	}
}

@media (max-width: 767px) {
	body.ssd-home-page .ssd-home-cases {
		padding: 56px 0;
	}

	/* Eyebrow, heading and disclaimer centered, like the other centered
	   sections on mobile. */
	body.ssd-home-page .ssd-home-cases__side {
		text-align: center;
	}

	body.ssd-home-page .ssd-home-cases__disclaimer {
		margin-left: auto;
		margin-right: auto;
	}

	/* Mobile: no carousel — cards stack vertically, so the prev/next
	   buttons and the scroll-snap/trailing-spacer machinery are dropped. */
	body.ssd-home-page .ssd-home-cases__nav {
		display: none;
	}

	body.ssd-home-page .ssd-home-cases__track {
		flex-direction: column;
		gap: 16px;
		overflow: visible;
		scroll-snap-type: none;
		padding: 0;
	}

	body.ssd-home-page .ssd-home-cases__track::after {
		display: none;
	}

	body.ssd-home-page .ssd-home-cases__card {
		flex: 0 0 auto;
		scroll-snap-align: none;
		min-height: 0;
		padding: 36px 26px 28px;
		border-radius: 26px;
	}
}

/* ---------- What Clients Say (rating badge + 6-card review grid) ---------- */
body.ssd-home-page .ssd-home-testimonials {
	background: #fff;
	padding: 88px 0;
}

/* Unlike every other section's centered intro, this header runs the
   eyebrow/heading left-aligned against the rating badge on the right —
   matches the mockup's asymmetric layout. */
body.ssd-home-page .ssd-home-testimonials__header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 36px;
}

body.ssd-home-page .ssd-home-testimonials__intro {
	max-width: 560px;
}

body.ssd-home-page .ssd-home-testimonials__eyebrow {
	color: var(--ssd-home-maroon);
	font-family: var(--ssd-home-font-body);
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	margin: 0 0 12px;
}

body.ssd-home-page .ssd-home-testimonials__heading {
	color: var(--ssd-home-ink);
	font-family: var(--ssd-home-font-heading);
	font-weight: 700;
	font-size: 1.6rem;
	line-height: 1.35;
	margin: 0;
	text-wrap: balance;
}

@media (min-width: 768px) {
	body.ssd-home-page .ssd-home-testimonials__heading {
		font-size: 1.85rem;
	}
}

body.ssd-home-page .ssd-home-testimonials__badge {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: #fff;
	border: 1px solid rgba(23, 39, 65, .1);
	border-radius: 16px;
	padding: 14px 20px;
	box-shadow: 0 20px 40px rgba(23, 39, 65, .06);
	flex-shrink: 0;
}

body.ssd-home-page .ssd-home-testimonials__badge-g {
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	display: inline-flex;
}

body.ssd-home-page .ssd-home-testimonials__badge-g svg {
	width: 100%;
	height: 100%;
}

body.ssd-home-page .ssd-home-testimonials__badge-score {
	color: var(--ssd-home-ink);
	font-family: var(--ssd-home-font-body);
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1;
}

body.ssd-home-page .ssd-home-testimonials__badge-meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

body.ssd-home-page .ssd-home-testimonials__badge-stars {
	display: inline-flex;
	gap: 2px;
}

body.ssd-home-page .ssd-home-testimonials__badge-count {
	color: rgba(23, 39, 65, .6);
	font-family: var(--ssd-home-font-body);
	font-size: .78rem;
}

/* Shared star glyph — used at both badge size and in-card size, gold to
   match the Hero badge's rating stars (same --ssd-home-gold accent). */
body.ssd-home-page .ssd-home-testimonials__star {
	width: 14px;
	height: 14px;
	color: var(--ssd-home-gold);
	display: inline-flex;
	flex-shrink: 0;
}

body.ssd-home-page .ssd-home-testimonials__star svg {
	width: 100%;
	height: 100%;
}

/* No max-width/auto-margin here (unlike the other sections' card grids)
   — this section's header runs full container width (left-aligned intro
   + right-aligned badge, not centered), so the grid stays full-width too
   to keep its left edge flush with the heading above it.
   Was repeat(auto-fit, minmax(350px, 1fr)): auto-fit's minmax() sets a
   hard 350px MINIMUM track size, not a preference — on any mobile screen
   whose container (after side padding) is narrower than 350px, the grid
   can't actually shrink the column to fit and overflows the viewport
   instead (cards clipped/squished, horizontal scroll) rather than
   stacking. Explicit breakpoints instead — same 1fr → 1fr 1fr → 1fr 1fr
   1fr convention as How We Can Help/Conditions/Cases above — never has a
   fixed minimum to overflow against at any width. */
body.ssd-home-page .ssd-home-testimonials__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

@media (min-width: 600px) {
	body.ssd-home-page .ssd-home-testimonials__grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 992px) {
	body.ssd-home-page .ssd-home-testimonials__grid {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

body.ssd-home-page .ssd-home-testimonials__card {
	background: color-mix(in srgb, var(--ssd-home-cream) 30%, #fff);
	border: 1px solid rgba(23, 39, 65, .08);
	border-radius: 18px;
	padding: 24px 26px;
	display: flex;
	flex-direction: column;
}

body.ssd-home-page .ssd-home-testimonials__card-stars {
	display: inline-flex;
	gap: 2px;
	margin: 0 0 14px;
}

body.ssd-home-page .ssd-home-testimonials__quote {
	color: rgba(23, 39, 65, .85);
	font-family: var(--ssd-home-font-body);
	font-size: .92rem;
	line-height: 1.55;
	margin: 0 0 20px;
	flex-grow: 1;
}

body.ssd-home-page .ssd-home-testimonials__person {
	display: flex;
	align-items: center;
	gap: 12px;
}

body.ssd-home-page .ssd-home-testimonials__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--ssd-home-maroon);
	color: #fff;
	font-family: var(--ssd-home-font-body);
	font-weight: 700;
	font-size: .9rem;
	flex-shrink: 0;
}

/* No explicit gap here — the visible space between name and location was
   never a gap at all, just leading whitespace from each span's inherited
   (Bootstrap default ~1.5) line-height, which is generous enough for body
   copy but reads as an oversized gap between two short, tightly-related
   lines like a name and its location. Tightened on the two spans below
   instead of trying to counter it with a negative gap here (gap can't go
   negative). */
body.ssd-home-page .ssd-home-testimonials__person-info {
	display: flex;
	flex-direction: column;
}

body.ssd-home-page .ssd-home-testimonials__name {
	color: var(--ssd-home-ink);
	font-family: var(--ssd-home-font-body);
	font-weight: 700;
	font-size: .9rem;
	line-height: 1.3;
}

body.ssd-home-page .ssd-home-testimonials__location {
	color: rgba(23, 39, 65, .55);
	font-family: var(--ssd-home-font-body);
	font-size: .8rem;
	line-height: 1.3;
}

body.ssd-home-page .ssd-home-testimonials__cta {
	text-align: center;
	margin-top: 40px;
}

body.ssd-home-page .ssd-home-testimonials__cta-link {
	color: var(--ssd-home-red);
	font-family: var(--ssd-home-font-body);
	font-weight: 700;
	font-size: .95rem;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

body.ssd-home-page a.ssd-home-testimonials__cta-link:hover {
	text-decoration: underline;
}

body.ssd-home-page .ssd-home-testimonials__cta-link--static {
	cursor: default;
}

/* Was max-width:767px — but the grid above drops from 3 to 2 columns at
   992px, so between 768-991px the header was still forcing the intro
   (max-width:560px) and the badge side by side in a row with less space
   than desktop ever has, which just meant an awkward mid-row wrap instead
   of the clean stack this rule intends. Matching the grid's own 992px
   breakpoint here keeps every "medium" width consistent: once the grid
   isn't full 3-column anymore, the header isn't full-row anymore either. */
@media (max-width: 991px) {
	body.ssd-home-page .ssd-home-testimonials__header {
		flex-direction: column;
		align-items: center;
		gap: 20px;
		margin-bottom: 32px;
	}

	/* The left alignment only made sense next to the badge on the same
	   row (see the "Unlike every other section" comment above) — once
	   they're stacked, left-aligned just reads as inconsistent with
	   every other section's centered intro, not as a deliberate choice
	   anymore. Centered here matches that convention once the row splits. */
	body.ssd-home-page .ssd-home-testimonials__intro {
		text-align: center;
	}
}

@media (max-width: 767px) {
	body.ssd-home-page .ssd-home-testimonials {
		padding: 56px 0;
	}

	/* Desktop's `flex-shrink: 0` lets the badge keep a compact, content-
	   sized "toast" shape since it's sitting next to the heading with room
	   to spare. Stacked full-width on mobile (align-items: flex-start
	   above), that same compact box just floats at the left with a wide
	   dead gap beside it instead of relating to anything — stretching it
	   to the container's full width reads as a deliberate trust bar
	   instead of a stranded leftover box. Scoped to true mobile, not the
	   991px stack above — the same stretch on a 768-991px tablet would
	   blow the compact "toast" badge up into an oversized empty bar. */
	body.ssd-home-page .ssd-home-testimonials__badge {
		width: 100%;
		justify-content: center;
	}

	body.ssd-home-page .ssd-home-testimonials__card {
		padding: 20px 22px;
	}
}

/* ---------- FAQ (native <details>/<summary> accordion) ---------- */
/* Both this section and What Clients Say above it are white — same
   "tighten this section's own top padding, not its bottom" fix already
   used for Where We Serve following the Comparison section, so the seam
   between two white sections doesn't read as an oversized gap. */
body.ssd-home-page .ssd-home-faq {
	background: #fff;
	padding: 24px 0 88px;
}

body.ssd-home-page .ssd-home-faq__intro {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 28px;
}

body.ssd-home-page .ssd-home-faq__eyebrow {
	color: var(--ssd-home-maroon);
	font-family: var(--ssd-home-font-body);
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	margin: 0 0 12px;
}

body.ssd-home-page .ssd-home-faq__heading {
	color: var(--ssd-home-ink);
	font-family: var(--ssd-home-font-heading);
	font-weight: 700;
	font-size: 1.6rem;
	line-height: 1.35;
	margin: 0;
	text-wrap: balance;
}

@media (min-width: 768px) {
	body.ssd-home-page .ssd-home-faq__heading {
		font-size: 1.85rem;
	}
}

body.ssd-home-page .ssd-home-faq__list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 760px;
	margin: 0 auto;
}

body.ssd-home-page .ssd-home-faq__item {
	background: var(--ssd-home-card-bg);
	border-radius: 14px;
}

/* display: flex (not the default list-item) is what removes the native
   disclosure triangle — the -webkit-details-marker rule is just a
   belt-and-suspenders fallback for older Safari. */
body.ssd-home-page .ssd-home-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 24px;
	cursor: pointer;
	color: var(--ssd-home-ink);
	font-family: var(--ssd-home-font-body);
	font-weight: 700;
	font-size: 1rem;
	list-style: none;
}

body.ssd-home-page .ssd-home-faq__question::-webkit-details-marker {
	display: none;
}

body.ssd-home-page .ssd-home-faq__icon {
	width: 20px;
	height: 20px;
	color: var(--ssd-home-ink);
	flex-shrink: 0;
	display: inline-flex;
	transition: transform .2s ease;
}

body.ssd-home-page .ssd-home-faq__icon svg {
	width: 100%;
	height: 100%;
}

/* Rotating the "+" 45deg turns it into an "x" for the open/close state —
   reuses the bundled plus.svg instead of swapping in a second icon. */
body.ssd-home-page .ssd-home-faq__item[open] .ssd-home-faq__icon {
	transform: rotate(45deg);
}

body.ssd-home-page .ssd-home-faq__answer {
	padding: 0 24px 20px;
}

body.ssd-home-page .ssd-home-faq__answer p {
	margin: 0;
	color: rgba(23, 39, 65, .8);
	font-family: var(--ssd-home-font-body);
	font-size: .92rem;
	line-height: 1.55;
}

@media (max-width: 767px) {
	body.ssd-home-page .ssd-home-faq {
		padding: 20px 0 56px;
	}

	body.ssd-home-page .ssd-home-faq__intro {
		margin-bottom: 32px;
	}

	body.ssd-home-page .ssd-home-faq__question {
		padding: 16px 20px;
		font-size: .95rem;
	}

	body.ssd-home-page .ssd-home-faq__answer {
		padding: 0 20px 18px;
	}
}

/* ---------- Final CTA (intro + shared consultation form card) ---------- */
/* Same tiled-triangle-over-navy convention as Trust Badges/Process
   Timeline (background-repeat, not cover — see those sections' own
   comments) — this section reuses that same process-bg.* file by
   default (see ssdhome_default_image() in page-home.php). */
body.ssd-home-page .ssd-home-final-cta {
	background-color: var(--ssd-home-navy);
	background-repeat: repeat;
	background-position: center;
	padding: 100px 0;
}

/* Same "flexible content column + fixed-ish form column" grid as the
   Hero section's own __inner, so the two sections' form cards line up
   the same way at the same breakpoint. */
body.ssd-home-page .ssd-home-final-cta__inner {
	display: grid;
	/* minmax(0, 1fr), not 1fr: a plain 1fr track won't shrink below its
	   content, so the form card pushed the column to ~342px and clipped on
	   phones narrower than that (320px). */
	grid-template-columns: minmax(0, 1fr);
	gap: 40px;
	align-items: center;
}

@media (min-width: 992px) {
	body.ssd-home-page .ssd-home-final-cta__inner {
		grid-template-columns: minmax(0, 1fr) minmax(410px, 480px);
		gap: 48px;
	}

	/* Unconstrained, the heading stretches to fill this column, which
	   grows all the way to ~800px+ at wider viewports (see .container's
	   own max-width) — wide enough that "free case review." wraps with
	   "review." left orphaned alone on its own line. Capping the width
	   here keeps the heading/subtext wrapping short and consistent across
	   viewport sizes instead, the same way the Hero heading's wrap is
	   kept predictable (see that section's own comment on __title). */
	body.ssd-home-page .ssd-home-final-cta__content {
		max-width: 560px;
	}
}

body.ssd-home-page .ssd-home-final-cta__heading {
	color: #fff;
	font-family: var(--ssd-home-font-heading);
	font-weight: 700;
	font-size: 1.8rem;
	line-height: 1.25;
	margin: 0 0 18px;
}

@media (min-width: 768px) {
	body.ssd-home-page .ssd-home-final-cta__heading {
		font-size: 2.1rem;
	}
}

/* This section's own accent convention (see ssdhome_final_cta_heading_markup()
   in final-cta.php) — a **phrase** renders in the red accent color rather
   than bold, since the heading is already bold throughout. */
body.ssd-home-page .ssd-home-final-cta__accent {
	color: var(--ssd-home-red);
}

body.ssd-home-page .ssd-home-final-cta__subtext {
	color: rgba(255, 255, 255, .78);
	font-family: var(--ssd-home-font-body);
	font-size: .98rem;
	line-height: 1.65;
	max-width: 440px;
	margin: 0;
}

@media (max-width: 767px) {
	body.ssd-home-page .ssd-home-final-cta {
		padding: 56px 0;
	}

	/* Left-aligned at desktop only to sit beside the form card (same
	   convention as the Hero heading, and the same reasoning already
	   applied to the What Clients Say header) — once the grid stacks the
	   card full-width below the text instead of beside it, left-aligned
	   text reads as unbalanced rather than deliberate. Centered here
	   instead, matching what a plain stacked block reads best as. */
	body.ssd-home-page .ssd-home-final-cta__content {
		text-align: center;
	}

	body.ssd-home-page .ssd-home-final-cta__heading {
		font-size: 1.6rem;
	}

	body.ssd-home-page .ssd-home-final-cta__subtext {
		max-width: none;
		margin-left: auto;
		margin-right: auto;
	}
}

.checkbox_accept .wpcf7-list-item-label {
	max-height: 28px;
	overflow-y: scroll;
}

.wpcf7-not-valid-tip {
	font-size: 15px;
	margin-bottom: 5px;
	line-height: 0px;
}


/* ---------- Footer ---------- */
/* The NOSSCR / ACRD membership logos already appear in the trust strip right
   below the hero, so the footer's copy of them is hidden on the homepage only.
   Every other page keeps the footer widget as usual. */
body.ssd-home-page footer .footer-insta-widget {
	display: none;
}

/* ...and its wrapper keeps 80px + 70px of padding, leaving a ~150px empty band
   above the footer columns. Hide the now-empty wrapper too, and trim the
   widgets area's 100px bottom padding. */
body.ssd-home-page footer .insta-footer-wrap {
	display: none;
}

body.ssd-home-page footer .footer-widgets-wrap {
	/* Same gaps as the other pages' footer: 80px (the logo strip's top
	   padding) + the widgets area's own 40px above, and its 100px below. */
	padding-top: 120px;
	padding-bottom: 100px;
}