/*
 * State Landing Page — state-landing.css  v2
 * Template: page-templates/state-landing.php
 * Scoped to .state-landing — no conflicts with global theme CSS.
 *
 * Palette (Figma node 117:742)
 *   --cream   #fffef9   hero / coverage / features / worth bg
 *   --white   #ffffff   covers / comparison / perfect / how / faq bg
 *   --yellow  #ffd740   CTA banner bg
 *   --ys      #fff8e1   comparison armadillo-col highlight
 *   --text    #3f3350
 *   --accent  #ff7043   buttons, checkmarks, open FAQ title
 *   --stroke  #ffd1c3   borders, table lines
 *   --gold    #ffd740   armadillo-col border
 *   --step-bg #3f3350   step card bg
 */

/* ── Custom properties ─────────────────────────────────────────────────── */
.state-landing {
	--cream:    #fffef9;
	--white:    #ffffff;
	--yellow:   #ffd740;
	--ys:       #fff8e1;
	--text:     #3f3350;
	--accent:   #ff7043;
	--acc-glow: rgba(255,112,67,.45);
	--stroke:   #ffd1c3;
	--gold:     #ffd740;
	--step-bg:  #3f3350;

	--pad: 112px;   /* section vertical padding */
	--gap: 80px;   /* two-col gap */

	color: var(--text);
	font-family: 'Inter', sans-serif;
}

/* ── Reset within scope ────────────────────────────────────────────────── */
.state-landing h1,
.state-landing h2,
.state-landing h3 {
	font-family: 'Zilla Slab', serif;
	font-weight: 400;
	color: var(--text);
	margin: 0;
}
.state-landing p  { margin: 0; }
.state-landing ul { margin: 0; padding: 0; list-style: none; }

/* ── Section padding ───────────────────────────────────────────────────── */
.state-landing section {
	padding-top: var(--pad);
	padding-bottom: var(--pad);
}

/* ── Typography ────────────────────────────────────────────────────────── */
.state-landing h1 { font-size: clamp(2.25rem, 4vw, 3.75rem); line-height: 1.2; }
.state-landing h2 { font-size: clamp(1.875rem, 3vw, 3.5rem);  line-height: 1.2; }
.state-landing h3 { font-size: 1.375rem; line-height: 1.35; }

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

/* ── Shared CTA button (rides on top of theme's .cta-btn) ─────────────── */
/* Keeps state name + arrow icon unbreakable — prevents orphaned › on its own line */
.cta-btn .nobr { white-space: nowrap; display: inline; vertical-align: baseline; }

.sl-cta-btn { align-self: flex-start; padding: 22px 19px; box-shadow: none; margin-top: 0 !important}
.sl-cta-btn.cta-btn .arr{width:11px; height: 15px;top:-1px}
.sl-cta-btn--glow { box-shadow: 0 0 24px 6px var(--acc-glow); }
.sl-cta-btn--glow:hover { box-shadow: 0 0 36px 10px var(--acc-glow); }

.sl-center-cta { display: flex; justify-content: center; }


/* ════════════════════════════════════════════════════════════════════════
   SECTION 1 — HERO
   cream bg, two columns: text left / illustration right
   ════════════════════════════════════════════════════════════════════════ */
.state-landing section.sl-hero { padding-top: 176px }

/* ── Hero layout — 5-column CSS Grid matching the 1800px design stage ───────
   Columns (fr = 1px at 1800px viewport, scale proportionally at any width):
     220fr  left pad  |  542fr  text  |  80fr  gap  |  787fr  image  |  160fr  right pad
   Total: 1789fr — proportions are exact, scales to any viewport width. */

.sl-hero .contentContainer {
	max-width: 1800px;    /* remove 1200px cap — grid handles proportions */
	margin: 0 auto;          /* remove auto-centering — padding cols do the work */
	height: auto;
}

.sl-hero__inner {
	display: grid;
	/* grid-template-columns: 220fr 568fr 80fr 761fr 160fr; */
	grid-template-columns: 220fr 553fr 80fr 787fr 160fr;
	align-items: center;
	gap: 0;
}

.sl-hero__content {
	grid-column: 2;     /* text column */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
}

.sl-hero__tagline {
	font-size: 1.25rem;
	line-height: 1.5;
}

.sl-hero__body {
	font-size: 1.25rem;
	line-height: 1.5;
	font-weight:700
}

.sl-hero__image {
	grid-column: 4;     /* image column */
	width: 100%;
	max-width: none;
}

.sl-hero__image img {
	display: block;
	width: 100%;
	height: auto;
}


/* ── sl-hero responsive ───────────────────────────────────────────────────
   ≤ 1024px : drop the proportional grid → standard flex row with normal margins
   ≤  768px : stack vertically                                               */

@media screen and (max-width: 1024px) {
	.sl-hero .contentContainer {
		max-width: 1200px;
		margin: 0 auto;
		padding-left:  40px;
		padding-right: 40px;
		height: auto;
	}
	.sl-hero__inner {
		display: flex;
		flex-wrap: wrap;
		gap: 48px;
		align-items: center;
	}
	.sl-hero__content {
		grid-column: auto;
		flex: 1;
		min-width: 280px;
	}
	.sl-hero__image {
		grid-column: auto;
		flex: 1;
		min-width: 320px;
		max-width: none;
	}
}

@media screen and (max-width: 768px) {
	.sl-hero .contentContainer {
		padding-left:  24px;
		padding-right: 24px;
	}
	.sl-hero__inner {
		flex-direction: column;
		gap: 40px;
	}
	.sl-hero__image {
		width: 100%;
		max-width: 480px;
		margin: 0 auto;
	}
}


/* ════════════════════════════════════════════════════════════════════════
   SECTION 2 — KEEP YOUR {STATE} HOME COVERED
   cream bg, illustration left / text right
   ════════════════════════════════════════════════════════════════════════ */
.sl-coverage {
	position: relative;
	background-color: var(--cream);
	border-top: 1px solid var(--stroke);
	overflow: hidden;
	padding-bottom: 0 !important;
   /* clips illustration bleed — same pattern as sl-worth */
}

/* 3-column grid matching 1800px design stage:
   1100fr illustration  |  480fr text  |  220fr right margin
   Total: 1800fr — scales proportionally to any viewport width.             */
.sl-coverage .contentContainer {
	max-width: 1800px !important;  /* beats functions.css .contentContainer { max-width: 1200px } */
	margin: 0 auto!important;
	height: auto;
}

.sl-coverage__inner {
	display: grid;
	/* grid-template-columns: 1100fr 480fr 220fr; 
	grid-template-columns: 966fr 518fr 170fr;*/
	grid-template-columns: 945fr 472fr 170fr;
	align-items: start;
	gap: 0;
}

/* Image column — grid defines width; height clips the overflowing illustration */
.sl-coverage__image {
	grid-column: 1;
	position: relative;
	height: 486px;              /* fallback = 1080×0.45 — JS overrides on load */
	overflow: visible;
}

/* Flip wrapper ─ mirrors the entire illustration so the girl faces right.   */
/* transform-origin: 50% keeps the anchor at the column's horizontal centre. */
.sl-coverage__flip {
	position: absolute;
	inset: 0;
	overflow: visible;
}

/* ── Illustration layout ─ mirrors #home-how .background.main ───────────── */
/* Scale 0.5 with origin at the column top-left (element 0,56 = column 0,0). */
/* Formula: column_x = element_x × 0.5, column_y = element_y × 0.5 − 28.   */
.sl-coverage__image .background.main {
	width:  1100px;
	height: 1136px;
	top:    -25px;   /* fallback: -56 × 0.45 ≈ -25px — JS sets -56×scale on load */
	left:   0;
	zoom:   0.45;    /* fallback — JS overrides immediately. zoom re-renders at
	                   native pixel density (no GPU compositor blur from transform). */
	overflow: visible;
}

.sl-coverage__image .background.main img.spacer {
	width: 80%;     /* tested in DevTools — phone/tree scene scaled down */
	top:  129px;
	left: 162px;
}

.sl-coverage__image .background.main .girl {
	width: 599px;   /* tested in DevTools — lady scaled down to match composition */
	left:  0;
	top:   631px;
}

/* Armadillo parachutist — scaled proportionally with girl (599/724 ≈ 0.827) */
.sl-coverage__image .armadillo {
	width: 142px;
	left:  460px;   /* floats over the phone */
	top:   -240px;
}

.sl-coverage__image .armadillo .chute {
	position: absolute;
	left: 0; top: 0;
	width: 100%;
	transform-origin: center top;
}

.sl-coverage__image .armadillo .eye-wrap {
	position: absolute;
	width: 7px;  height: 7px;
	border-radius: 7px;
	left: 66px;  top: 145px;
}

.sl-coverage__image .armadillo .eye {
	left: -1px;
	width: 4px;  height: 4px;
	border-radius: 4px;
}

/* Clouds strip */
.background.cn img{
margin-left: -37%;
}
.sl-coverage__image .clouds {
	position: absolute;
	left: 0;  top: 20px;
	width:  1100px;
	height: 300px;   /* 2× so visual height at scale(0.5) matches home-how (150px) */
	overflow: hidden;
}

.sl-coverage__image .clouds .cloud-mover {
	width: 4000px;   /* 2× to fill 300px height; img height auto → 4000×(150/2000)=300px */
}

/* ── CSS animations: triggered by .on class (added by ScrollMagic hasAnim) ─ */
/* Keyframes (armaDrop, armaChute, slideRight, eyeMover) live in style.css.   */
.sl-coverage.on .cloud-mover {
	animation: slideRight infinite 30s linear;   /* 30s = 2× because cloud-mover is 2× wider */
}

.sl-coverage.on .eye-wrap {
	animation: eyeMover infinite 12s ease-in-out;
}

.sl-coverage.on .armadillo {
	animation: armaDrop infinite 10s linear;
}

.sl-coverage.on .armadillo .chute {
	animation: armaChute infinite 4s ease-in-out;
}

.sl-coverage__content {
	grid-column: 2;
	margin-top: 85px;
	padding-left: 48px;    /* visible gap between illustration and text — immune to scale fluctuations */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	position: relative;   /* ensure text paints above illustration column */
	z-index: 1;
}
.sl-coverage__content p        { margin-top: 24px; }
.sl-coverage__content .cta-btn { margin-top: 32px !important; }

.sl-coverage__content p {
	font-size: 1.25rem;
	line-height: 1.8;
}


/* ── sl-coverage responsive ──────────────────────────────────────────────── */

/* Medium desktop: rebalance grid so text column isn't squeezed to <350px.
   At 1071px with 966fr:518fr:170fr, text col = 335px — too narrow.
   52:38:10 gives text col ≈ 407px at 1071px, 486px at 1280px.             */
@media screen and (min-width: 1025px) and (max-width: 1350px) {
	.sl-coverage__inner {
		grid-template-columns: 52fr 38fr 10fr;
	}
	.sl-coverage__content {
		margin-top: 60px;  /* slightly less offset; phone aligns at ~90px in this scale range */
	}
}

@media screen and (max-width: 1024px) {
	.sl-coverage .contentContainer {
		margin: 0 auto;
		padding-left:  40px;
		padding-right: 40px;
	}
	.sl-coverage__inner {
		display: flex;
		flex-wrap: wrap;
		gap: 0;
		align-items: center;
	}
	.sl-coverage__image {
		grid-column: auto;
		flex: 0 0 auto;
		width: 50%;
		min-width: 320px;
		overflow: hidden;  /* clip illustration so it doesn't bleed below into stacked text */
	}
	.sl-coverage__content {
		grid-column: auto;
		margin-top: 0;          /* remove desktop-only offset */
		flex: 1;
		min-width: 280px;
	}
}

@media screen and (max-width: 768px) {
	.sl-coverage .contentContainer {
		padding-left:  0;        /* remove so image column is truly full-width */
		padding-right: 0;
	}
	.sl-coverage__inner {
		flex-direction: column;
		gap: 0;
	}
	.sl-coverage__image {
		width: 100%;
		min-width: 0;
	}
	.sl-coverage__content {
		padding-left:  24px;     /* restore text padding directly on content */
		padding-right: 24px;
		margin-top: 0;
	}
}


/* ════════════════════════════════════════════════════════════════════════
   SECTION 3 — WHY THOUSANDS CHOOSE ARMADILLO
   cream bg, 5-card grid (3 + 2 centred)
   ════════════════════════════════════════════════════════════════════════ */
.sl-features {
	background-color: var(--cream);
	border-bottom: 1px solid var(--stroke);
}

.sl-features .contentContainer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 80px;
}

.sl-features__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr); /* 6 cols so bottom 2 can be centred */
	gap: 64px 80px;
	width: 100%;
	max-width: 1050px;
}

/* Top 3 cards: each spans 2 of the 6 columns (auto placement fills 1-2, 3-4, 5-6) */
.sl-features__grid .sl-feature-card:not(.sl-feature-card--row2) {
	grid-column: span 2;
}

/* Bottom 2 cards: placed at cols 2-3 and 4-5 → centred as a pair under the top row */
/* nth-child targets cards 4 & 5 reliably (first/last-of-type is element-type, not class-aware) */
.sl-features__grid > div:nth-child(4) { grid-column: 2 / 4; }
.sl-features__grid > div:nth-child(5) { grid-column: 4 / 6; }

.sl-feature-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
}

.sl-feature-card__icon {
	height: 110px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.sl-feature-card__icon img {
	max-height: 110px;
	width: auto;
	display: block;
}

/* ── Animated bucket-icons inside feature cards ─────────────────────── */
/* The .buckets parent normally provides width/height/position:relative  */
/* We replicate that here so the icon-anim absolute children render      */
.sl-features .bucket-icon {
	width: 150px;
	height: 115px;
	margin: 0 auto;
	display: block;
	position: relative;
}

/* The spacer img sets the icon's intrinsic dimensions; keep it visible  */
.sl-features .bucket-icon .spacer {
	width: 100%;
	height: auto;
	display: block;
}

.sl-feature-card h3 {
	font-size: 1.625rem;
}

.sl-feature-card p {
	font-size: 1rem;
	line-height: 1.75;
}

.sl-features__cta { display: flex; justify-content: center; }


/* ════════════════════════════════════════════════════════════════════════
   SECTION 4 — WHAT ARMADILLO COVERS
   white bg, 3 gapped bordered cards, NO bottom border on section
   ════════════════════════════════════════════════════════════════════════ */
.sl-covers {
	background-color: var(--white);
}

.sl-covers .contentContainer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 80px;
}

.sl-covers__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));  /* minmax(0) lets columns shrink below min-content */
	gap: 56px;           /* gaps between boxes */
	width: 100%;
	max-width: 1280px;
}

.sl-covers__card {
	background-color: var(--cream);
	border: 1px solid var(--stroke);
	padding: 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	text-align: center;
}

.sl-covers__icon {
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sl-covers__icon img {
	max-height: 80px;
	width: auto;
	display: block;
}

/* Column title — Zilla Slab, same size as the card h3 treatment */
.sl-covers__title {
	font-family: 'Zilla Slab', serif;
	font-size: 1.625rem;
	font-weight: 400;
	color: var(--text);
	margin: 0;
}

/* hasLine treatment — mirrors global h4.hasLine in style.css, adapted for p tags */
.sl-covers p.hasLine {
	padding: 0 44px;
	line-height: 1.35;
	min-width: 180px;
	display: inline-block;
	position: relative;
	white-space: nowrap;
}
.sl-covers p.hasLine::before {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	left: 21px;
	top: -1px;
	background: url(../images/title-line.svg) left center no-repeat;
	background-size: 80% 31px;
}
.sl-covers p.hasLine span {
	position: relative;
}

/* "Varies by Plan" — Inter bold, small */
.sl-covers__subtitle {
	font-family: 'Inter', sans-serif;
	font-size: 1.1875rem;
	font-weight: 600;
	color: var(--text);
	margin-top: -13px !important
}

.sl-covers__list {
	list-style: disc !important;
	padding-left: 1.5em !important;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
}

.sl-covers__list li {
	font-size: 1.25rem;
	line-height: 1.8;
}


/* ════════════════════════════════════════════════════════════════════════
   SECTION 5 — COMPARISON TABLE
   white bg, only armadillo col highlighted + one CTA in tfoot
   ════════════════════════════════════════════════════════════════════════ */
.sl-comparison { background-color: var(--white); }

.sl-comparison__header {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-bottom: 80px;
}

.sl-comparison__sub {
	font-size: 1.25rem;
}

.sl-comparison__table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	padding: 0 8px;
}

.sl-comparison__table {
	width: 100%;
	max-width: 850px;
	margin-inline: auto;
	border-collapse: collapse;
	font-size: 1rem;
	color: var(--text);
	table-layout: fixed; /* equal column distribution */
}

/* Explicit column widths: repair ~41%, arma ~34%, std ~25% */
.sl-comparison__table .sl-col--repair { width: 41%; }
.sl-comparison__table .sl-col--arma   { width: 34%; }
.sl-comparison__table .sl-col--std    { width: 25%; }

/* ── thead ── */
.sl-comparison__table thead th {
	font-family: 'Zilla Slab', serif;
	font-weight: 700;
	font-size: 1.1875rem;
	padding: 14px 35px;
	text-align: center;
	border: 1px solid var(--stroke);
}

/* ── tbody rows ── */
.sl-comparison__table tbody tr {
	border-bottom: 1px solid var(--stroke);
	border-left:   1px solid var(--stroke);
	border-right:  1px solid var(--stroke);
}

.sl-comparison__table td {
	padding: 26px 12px;
	vertical-align: middle;
	text-align: center;
}


/* Repair cell: icon + label inline */
/* Left-align and reduce padding — flex is on the inner div, not the td */
.sl-comparison__table td.sl-col--repair {
	padding: 26px 35px;
	text-align: left;
}
.sl-comparison__table th.sl-col--repair {
	text-align: left;

}
.sl-comparison__table th.sl-col--std {
	padding: 14px 12px;

}
.sl-comparison__table td.sl-col--std {
	padding: 26px 12px;

}
.sl-repair-cell {
	display: flex;
	align-items: center;
	gap: 0;
}

.sl-row-icon {
	flex-shrink: 0;
	width: 70px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right:60px
}

.sl-row-icon img {
	object-fit: contain;
	display: block;
}

/* Standard Warranty column — cream background */
.sl-col--std {
	background-color: var(--cream);   /* #fffef9 */
}

/* Armadillo column — highlighted with yellow border, warm tint bg */
.sl-col--arma {
	background-color: var(--ys);
}

.sl-comparison__table thead .sl-col--arma {
	border-top:   6px solid var(--gold) !important;
	border-left:  6px solid var(--gold) !important;
	border-right: 6px solid var(--gold) !important;
}

.sl-comparison__table tbody .sl-col--arma,
.sl-comparison__table tfoot .sl-col--arma {
	border-left:  6px solid var(--gold) !important;
	border-right: 6px solid var(--gold) !important;
}

.sl-comparison__table tfoot .sl-col--arma {
	border-bottom: 6px solid var(--gold) !important;
}

.sl-cta-cell { text-align: center; }
.sl-cta-cell .sl-cta-btn { align-self: center; display: inline-flex; }


/* ════════════════════════════════════════════════════════════════════════
   SECTION 6 — THE PERFECT HOME WARRANTY
   white bg, text left / yellow box right, armadillo overlapping corner
   ════════════════════════════════════════════════════════════════════════ */
.sl-perfect { background-color: var(--white); }

.sl-perfect__inner {
	display: grid;
	grid-template-columns: 500fr 700fr;
	column-gap: 80px;
	align-items: flex-start;
}

.sl-perfect__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 42px;
	padding-top: 8px;
}

.sl-perfect__box {
	background-color: var(--yellow);
	padding: 36px;
	position: relative;
	overflow: visible;  /* allow animated armadillo to overflow corner */
}

.sl-perfect__intro {
	font-family: 'Inter', sans-serif;
	font-size: 1rem;
	line-height: 1.75;
	margin-bottom: 16px;
}

.sl-perfect__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 24px 0 !important;
}

.sl-perfect__list li {
	font-size: 1rem;
	line-height: 1.75;
	padding-left: 26px;
	position: relative;
}

.sl-perfect__list li::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: var(--accent);   /* orange checkmarks */
	font-weight: 700;
}

.sl-perfect__close {
	font-size: 1rem;
	line-height: 1.75;
	max-width: calc(100% - 110px); /* fluid clearance: armadillo is 160px at right:-30px
	                                   → overflows; 110px clears its visible footprint */
}

/* Animated armadillo — bottom-right corner, matching original static image footprint */
.sl-perfect__box .armadillo {
	width: 160px;
	position: absolute;
	right: -30px;
	bottom: -24px;
}


/* ════════════════════════════════════════════════════════════════════════
   SECTION 7 — HOW ARMADILLO WORKS
   white bg, 4 step cards, heading both lines same size, centred body
   ════════════════════════════════════════════════════════════════════════ */
.sl-how { background-color: var(--white); }

.sl-how .contentContainer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 80px;
}

.sl-how__header {
	display: flex;
	flex-direction: column;
	gap: 24px;
	text-align: center;
}

.sl-how__tagline {
	font-size: 1.25rem;
}

/* 4-column grid */
.sl-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	width: 100%;
}

.sl-step { display: flex; flex-direction: column; }

.sl-step__img {
	width: 100%;
	aspect-ratio: 1.4;
	background-color: var(--step-bg);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Text body — centred */
.sl-step__body {
	border: 1px solid var(--stroke);
	border-top: none;
	background-color: var(--cream);
	padding: 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 24px;
	flex: 1;
}

.sl-step__body h3 { font-size: 1.625rem; }
.sl-step__body p  { font-size: 1.25rem; line-height: 1.8 }


/* ════════════════════════════════════════════════════════════════════════
   SECTION 8 — IS ARMADILLO WORTH IT?
   cream bg, checklist left / illustration right
   ════════════════════════════════════════════════════════════════════════ */
.sl-worth {
	background-color: var(--cream);
	border-top:    1px solid var(--stroke);
	border-bottom: 1px solid var(--stroke);
	overflow: hidden;   /* clips the illustration bleed at viewport edge,   */
	                    /* exactly as the real-estate hero section does.     */
}

/* contentContainer is the inner wrapper (same as real-estate.php hero).    */
/* It is overflow:visible by default so the 916px illustration can bleed    */
/* naturally beyond the 600px image column to the right.                    */
.sl-worth__inner.contentContainer{
	max-width:1336px
}
.sl-worth__inner {
	display: flex;
	align-items: center;
	gap: 0;
	overflow: visible;  /* let illustration overflow the 1200px container */
	padding-top: 88px;
	padding-bottom: 88px;
}

/* Left text column: 50% of contentContainer = ~600px */
.sl-worth__content {
	flex: 0 0 50%;
	max-width: 50%;
	padding-right: 80px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 36px;
}

.sl-worth__intro {
	font-size: 1.25rem;
	font-weight: 400;
}

.sl-checklist {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.sl-checklist li {
	font-size: 1.25rem;
	line-height: 1.8;
	padding-left: 26px;
	position: relative;
}

.sl-checklist li::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: var(--accent);
	font-weight: 700;
}

.sl-worth__closer {
	font-size: 1.25rem;
	line-height: 1.8;
}

/* Right image column: 50% of contentContainer = ~600px.                    */
/* The 916px background deliberately overflows this — that's the bleed.     */
.sl-worth__image {
	flex: 0 0 50%;
	position: relative;
}

/* ── Illustration positioning — mirrors #page-real-estate #tier-hero CSS ── */
.sl-worth__image .background {
	top: 50px;
	width: 916px;
	transform-origin: left top;
	overflow: visible;
}

/* Base rule for .bghide — NOT in global style.css (only exists as #tier-hero .bghide there).
 * Without this, .bghide elements get position:static / overflow:visible, which breaks
 * layer positioning and clipping in any section that isn't #tier-hero.
 */
.sl-worth__image .bghide {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.sl-worth__image .bghide.shift {
	top: -50px;
	left: -100px;
	height: calc(100% + 50px);
	width: calc(100% + 150px);
}

.sl-worth__image .bghide.short {
	height: calc(100% - 100px);
}

.sl-worth__image .people {
	top: 50px;
	width: 916px;
	left: 100px;
	transform-origin: center bottom;
}

.sl-worth__image .poster {
	width: 157px;
	left: 628px;
	top: 31px;
}

.sl-worth__image .kid {
	width: 150px;
	left: 349px;
	top: 185px;
}

.sl-worth__image .armadillo-wrap {
	position: absolute;
	left: 546px;
	top: 285px;
	width: 165px;
	height: 90px;
}

.sl-worth__image .armadillo-wrap .armadillo {
	width: 165px;
	transform-origin: right bottom;
}

.sl-worth__image .armadillo-wrap .earL {
	left: 92px;
	top: 2px;
	width: 16px;
	height: 25px;
}

.sl-worth__image .armadillo-wrap .earL img {
	transform: rotate(-5deg);
}

.sl-worth__image .armadillo-wrap .earR {
	left: 96px;
	top: -1px;
	width: 21px;
	height: 33px;
}

.sl-worth__image .armadillo-wrap .earR img {
	transform: rotate(18deg);
}

.sl-worth__image .armadillo-wrap .eye-wrap {
	position: absolute;
	width: 15px;
	height: 15px;
	border-radius: 15px;
	left: 71px;
	top: 39px;
}

.sl-worth__image .armadillo-wrap .eye-wrap .inner {
	width: 15px;
	height: 15px;
	transform: rotate(-20deg);
}

.sl-worth__image .armadillo-wrap .eye {
	left: 0;
	width: 6px;
	height: 6px;
	border-radius: 6px;
}


/* ════════════════════════════════════════════════════════════════════════
   SECTION 9 — FAQ ACCORDION
   Markup: theme's native .faq-question/.question/.answer (from faq.php)
   The global #faq stylesheet has many conflicting rules (absolute arrows,
   150px right padding, etc.). Overrides use .state-faq#faq specificity.
   ════════════════════════════════════════════════════════════════════════ */

/* Section wrapper — kill global #faq padding */
.state-faq,
.state-faq#faq {
	background-color: var(--white);
	padding-top: var(--pad) !important;
	padding-bottom: var(--pad) !important;
}

/* FAQ list container */
.state-faq .faq-wrap {
	max-width: 820px;
	margin: 0 auto;
	border-bottom: none !important;
}

/* ── Section heading ──────────────────────────────────────────────────── */
/* Resets global: #faq h4 { padding: 0 30px; margin-left: -30px } */
.state-faq .faq-wrap h4,
.state-faq#faq h4 {
	font-family: 'Zilla Slab', serif !important;
	font-weight: 400 !important;
	font-size: clamp(1.875rem, 3vw, 3.5rem) !important;
	line-height: 1.2 !important;
	color: var(--text) !important;
	text-align: center !important;
	margin: 0 0 80px 0 !important;
	padding: 0 !important;
	min-width: 0 !important;
	display: block;
}

/* Suppress the hasLine orange underline decoration */
.state-faq .faq-wrap h4.hasLine::before,
.state-faq .faq-wrap h4.hasLine::after,
.state-faq .faq-wrap h4.hasLine span::before,
.state-faq .faq-wrap h4.hasLine span::after {
	display: none !important;
}

/* ── Individual FAQ item ──────────────────────────────────────────────── */
.state-faq .faq-wrap .faq-question,
.state-faq#faq .faq-wrap .faq-question {
	position: relative;
	border-top: 1px solid var(--stroke) !important;
	border-bottom: none !important;
	overflow: visible;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

#faq.state-faq .faq-wrap .faq-question:last-child {
	border-bottom: 1px solid var(--stroke) !important;
}

/* Suppress theme's animated background div */
.state-faq .faq-question .bgcolor {
	display: none !important;
}

/* ── Question row ─────────────────────────────────────────────────────── */
/* Resets global: padding 35px 30px 32px; padding-right: 150px */
.state-faq .faq-wrap .faq-question .question,
.state-faq#faq .faq-wrap .faq-question .question {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 32px 48px 32px 24px !important;
	cursor: pointer;
}

/* Question text — resets global width:100% and transition */
.state-faq .faq-question .question p,
.state-faq .faq-question .question p.intro {
	flex: 1;
	margin: 0 !important;
	font-family: 'Inter', sans-serif;
	font-size: 1.25rem;
	line-height: 1.5;
	color: var(--text);
	transition: color 0.25s ease;
	width: auto !important;
}

/* Chevron — make it a flex item, not absolute */
/* Resets global: position:absolute; right:20px; top:48px */
.state-faq .faq-question .arr,
.state-faq#faq .faq-wrap .faq-question .arr {
	top:36px;
	right:24px;
	width: auto !important;
	height: auto !important;
	flex-shrink: 0;
	transition: transform 0.3s ease;
}

.state-faq .faq-question .arr .icon {
	color: var(--accent);
	font-size: 16px;
	display: block;
	line-height: 1;
}

/* ── Answer panel ─────────────────────────────────────────────────────── */
/* Resets global: padding-left:35px; padding-right:150px */
#faq .faq-wrap .faq-question .answer > div{
	padding-bottom: 32px !important;
    max-width: none !important
}
.state-faq .faq-wrap .faq-question .answer,
.state-faq#faq .faq-wrap .faq-question .answer {
	padding-left: 0 !important;
	padding-right: 0 !important;
	overflow: hidden;
}

.state-faq .faq-question .answer > div {
	padding: 0 48px 32px 24px;
}

.state-faq .faq-question .answer p {
	font-family: 'Inter', sans-serif;
	font-size: 1rem;
	line-height: 1.75;
	color: var(--text);
}

/* ── Open state (.open added by theme JS) ─────────────────────────────── */
.state-faq .faq-question.open,
.state-faq#faq .faq-wrap .faq-question.open {
	background-color: var(--ys) !important;        /* #fff8e1 light yellow */
	border-top: 2px solid var(--accent) !important; /* orange top line */
}

.state-faq .faq-question.open .question p,
.state-faq .faq-question.open .question p.intro {
	color: var(--accent) !important;
}

.state-faq .faq-question.open .arr {
	transform: rotate(180deg) !important;
}



/* ════════════════════════════════════════════════════════════════════════
   SECTION 10 — FINAL CTA BANNER
   Figma 117:1084 — yellow bg, seal top-right, centred content,
   large orange "Armadillo" script wordmark bleeding off the bottom.
   ════════════════════════════════════════════════════════════════════════ */

/* Section — override .yellowbg cream + borders */
/* Section — outer transparent wrapper; yellow bg lives on __bg inside */
.sl-cta-banner {
	position: relative;
	margin-bottom: 112px;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Yellow box — inset by section side-padding at tablet/mobile,
   constrained to 1400px max-width centred at wide desktop */
.sl-cta-banner__bg {
	position: relative;
	overflow: hidden;
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
	background-color: #ffd740 !important;
	border-top:    none !important;
	border-bottom: none !important;
	padding-top: 62px !important;
	padding-bottom: 17.5% !important; /* proportional: equals ~273px at 1400px wide */
}

/* Seal badge — top-right of section, outside contentContainer */
.sl-cta-banner__seal {
	position: absolute;
	top: 51px;
	right: 65px;
	width: 129px;
	height: auto;
	z-index: 3;
}

/* contentContainer: just a width/centering wrapper here */
.sl-cta-banner .contentContainer {
	position: relative;
	z-index: 2;
}

/* Centred content column */
.sl-cta-banner__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 36px;
	/* max-width: 620px; */
	margin: 0 auto;
}

.sl-cta-banner__content h2 {
	color: var(--text);
	margin-bottom: 8px;
}

.sl-cta-banner__content p {
	font-size: 1.25rem;
	line-height: 1.8;
	color: var(--text);
}

/* CTA button centred (override base align-self: flex-start) */
.sl-cta-banner .sl-cta-btn {
	align-self: center;
	margin-top: 16px;
}

/* Wordmark wrapper — full width of yellow box, proportional height via aspect-ratio */
.sl-cta-banner__wordmark {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	aspect-ratio: 1400 / 302; /* height scales proportionally with width — never overlaps content */
	z-index: 1;
	pointer-events: none;
}

/* Width sensor — updateScales() reads this to compute zoom ratio */
.sl-cta-banner__wordmark .sizer {
	display: block;
	width: 100%;
}

/* Natural-size container — updateScales() applies zoom anchored top-left */
.sl-cta-banner__wordmark .willScale {
	position: absolute;
	width: 1400px;
	height: 302px;
	left: 0;
	top: 0;
	transform-origin: left top;
}

/* SVG wider than container, bleeds right — clipped by __bg overflow:hidden */
.sl-cta-banner__wordmark .willScale img {
	display: block;
	position: absolute;
	width: 1530px;
	left: -57px;
	bottom: -19px;
}


/* ════════════════════════════════════════════════════════════════════════
   RESPONSIVE — WIDE TABLET / SMALL DESKTOP ≤ 1200px
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1400px) {
.sl-cta-banner__bg{padding-bottom:24.5% !important}
}

@media (max-width: 1300px) {
	/* Seal — pull in from viewport edge as section narrows */
	.sl-cta-banner__seal { right: 25px; top: 25px; }
}

@media (max-width: 1200px) {
	.sl-covers__grid { gap: 28px; }
}

/* ════════════════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET ≤ 1024px
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
	.state-landing { --pad: 72px; --gap: 48px; }
	

	.sl-hero__inner,
	.sl-coverage__inner,
	.sl-worth__inner {
		flex-direction: column;
	}

	/* sl-perfect uses CSS Grid — collapse to single column */
	.sl-perfect__inner {
		grid-template-columns: 1fr;
		column-gap: 0;
		row-gap: 40px;
	}
	.state-landing section.sl-coverage{ padding-top:0; padding-bottom:var(--pad)!important}
	.sl-hero__image,
	.sl-coverage__image,
	.sl-worth__image {
		width: 100%;
		margin-inline: auto;
	}

	/* Worth — reset content to full-width and add stacking gap */
	.sl-worth__inner { gap: 48px; padding-top:0; padding-bottom: 50px}

	.sl-worth__content {
		flex: 0 0 100%;
		max-width: 100%;
		padding-right: 0;
	}

	.sl-worth__image { max-width: 560px; }

	.sl-perfect__content { width: 100%; }

	.sl-steps { grid-template-columns: repeat(2, 1fr); }

	.sl-features__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 48px 60px;
	}
	/* Reset desktop column spans so all 5 cards flow into the 2-col grid */
	.sl-features__grid .sl-feature-card:not(.sl-feature-card--row2) { grid-column: auto; }
	.sl-features__grid > div:nth-child(4),
	.sl-features__grid > div:nth-child(5) { grid-column: auto; }
	/* Center the lone 5th card in the 2-col grid */
	.sl-features__grid > .sl-feature-card:last-child {
		grid-column: 1 / -1;
		max-width: calc(50% - 30px);
		margin-inline: auto;
	}

	.sl-covers__grid { grid-template-columns: 1fr; gap: 16px; }

	/* CTA banner — tighten top padding; seal leaves corner and flows above content */
	.sl-cta-banner { padding-top: 43px !important; }
	.sl-cta-banner__seal {
		position: relative;
		display: block;
		top: auto;
		right: auto;
		margin: 0 auto 25px;
	}

}

@media (max-width: 768px) {
	/* ════════════════════════════════════════════════════════════════════════
	   RESPONSIVE — TABLET/MOBILE ≤ 768px — COMPARISON TABLE
	   ════════════════════════════════════════════════════════════════════ */
/* Tighten gaps in sections */
	   .sl-features .contentContainer, .sl-covers .contentContainer, .sl-perfect__content, .sl-perfect__inner, .sl-how .contentContainer, .sl-worth__content{
		gap: 32px;
	   }
	   .sl-features__grid{
		gap: 32px 32px;
	   }
	   .sl-comparison__header{
		margin-bottom: 32px;
	   }
	/* ── Comparison table: stacked cards on mobile ── */
	.sl-comparison__table,
	.sl-comparison__table thead,
	.sl-comparison__table tbody,
	.sl-comparison__table tfoot,
	.sl-comparison__table tr,
	.sl-comparison__table th,
	.sl-comparison__table td {
		display: block;
		width: 100% !important;
		box-sizing: border-box;
	}
	.sl-comparison__table-wrap{
		padding: 0;
	}

	/* Hide column headers — labels come from data-label */
	.sl-comparison__table thead { display: none; }

	/* Each row = a card */
	.sl-comparison__table tbody tr {
		border: 1px solid var(--stroke);
		margin-bottom: 16px;
		overflow: hidden;
	}

	/* Repair type — card header row */
	.sl-comparison__table td.sl-col--repair {
		padding: 14px 16px;
		background-color: var(--cream, #faf7f2);
		font-weight: 700;
		border-bottom: 1px solid var(--stroke);
		text-align: left;
	}

	/* Data cells — label left, value right */
	.sl-comparison__table td.sl-col--arma,
	.sl-comparison__table td.sl-col--std {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 13px 16px;
		border-bottom: 1px solid var(--stroke);
		text-align: right;
	}
	.sl-comparison__table td.sl-col--std { border-bottom: none; }

	.sl-comparison__table td.sl-col--arma::before,
	.sl-comparison__table td.sl-col--std::before {
		content: attr(data-label);
		font-weight: 600;
		font-size: 0.875rem;
		text-align: left;
		flex-shrink: 0;
		margin-right: 12px;
		color: var(--text);
	}

	/* Keep yellow tint on arma cell, simplify gold border to left accent only */
	.sl-comparison__table td.sl-col--arma {
		background-color: var(--ys);
		border-left: none !important;
		border-right: none !important;
	}

	/* CTA row — center button, hide empty cells */
	.sl-comparison__table tfoot tr {
		border: none;
		margin-bottom: 0;
	}
	.sl-comparison__table tfoot td { border: none; }
	.sl-comparison__table tfoot td:empty { display: none; }
	.sl-comparison__table tfoot .sl-col--arma {
		display: block;
		background-color: transparent;
		border-left: none !important;
		padding: 24px 0 0;
		border-bottom: none !important;
		text-align: center;
	}
	.sl-comparison__table tfoot .sl-col--arma::before { display: none; }

	/* Worth — tighten image at mobile */
	.sl-worth__inner { gap: 32px; }
	.sl-worth__image { max-width: 480px; }


}

/* ════════════════════════════════════════════════════════════════════════
   RESPONSIVE — SMALL MOBILE ≤ 650px
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 650px) {
	/* CTA banner — go full-bleed on small mobile; restore inner padding on content */
	.sl-cta-banner { padding-left: 0 !important; padding-right: 0 !important; }
	.sl-cta-banner__content { padding-left: 25px; padding-right: 25px; }
	    .sl-cta-banner__bg {
        padding-bottom: 31.5% !important;
    }
}

@media (max-width: 640px) {
	.state-landing section.sl-hero{ padding-top: 135px !important; }
	.sl-hero .contentContainer, .sl-coverage__content {
		padding-left:  0;
		padding-right: 0;
	}
	.state-landing { --pad: 56px; --gap: 36px; }

	/* Hide <br> tags in headings on narrow viewports so text reflows naturally */
	.state-faq .faq-wrap h4 span br,
	.state-faq#faq h4 span br,
	#sl-offerings h2 br,
	.sl-comparison__header h2 br { display: none; }

	/* Reduce bottom margin from 80px to 50px on mobile */
	.state-faq .faq-wrap h4,
	.state-faq#faq h4 { margin-bottom: 50px !important; padding: 0 24px !important }

	/* sl-perfect: at mobile the fly-in arc passes through the box interior visibly.
	   Override GSAP's inline transform/opacity so the armadillo sits statically at
	   its corner, matching the original static-image behaviour. */
	.sl-perfect__box .armadillo { zoom: 0.625; right: -30px; bottom: -24px; opacity: 1 !important; transform: none !important; }
	.sl-perfect__close  { max-width: calc(100% - 80px); }

	.sl-steps { grid-template-columns: 1fr; }

	.sl-features__grid { grid-template-columns: 1fr; gap: 40px; }
	/* Reset the ≤1024px centring constraint — in a 1-col grid the lone 5th card
	   must be full width, not capped at the 2-col half-width. */
	.sl-features__grid > .sl-feature-card:last-child {
		grid-column: auto;
		max-width: none;
		margin-inline: 0;
	}

	/* CTA banner — padding-bottom is 19.5% (proportional), no override needed */

	/* Button wrappers inside flex-column+align-items:center containers must be
	   full-width so the button's width:100% below has something to fill */
	.sl-center-cta,
	.sl-features__cta {
		width: 100%;
	}

	.cta-btn.sl-cta-btn {
		width: 100%;
		justify-content: center;
		text-align: center;
		line-height: 1.5;
	}
	.sl-cta-btn.cta-btn .arr{
		top: -4px;
	}

	/* Worth illustration — mirrors real-estate page mobile approach:
	   fixed-height column, sizer hidden, background scaled + centred via CSS.
	   (JS hasScale disabled below data-min=650 — CSS takes over here.) */
	.sl-worth__inner { gap: 32px; padding-bottom:0}

	.sl-worth__image {
		flex: 0 0 300px;   /* override base flex: 0 0 50% — in a column flex with no
		                      explicit container height, 50% resolves to 0, collapsing
		                      the item and making overflow:hidden clip everything */
		max-width: none;
		width: 100%;
		height: 300px;
		overflow: hidden;
		margin-top:20px
	}

	.sl-worth__image .spacer.sizer { display: none; }

	.sl-worth__image .background.willScale {
		transform: scale(0.45) !important;
		left: 50% !important;
		margin-left: -458px;   /* -916px / 2 — centers the 916px background */
		transform-origin: center top !important;
		top: 0;
	}

}

@media (max-width: 480px) {
	/* CTA banner heading — hide <br> so "in {State}" wraps naturally on narrow screens */
	.sl-cta-banner__content h2 br { display: none; }
}

@media (max-width: 450px) {
	/* CTA banner — padding-bottom is 19.5% (proportional), no override needed */
}

/* sl-worth armadillo: hidden until initCornerArma animates it onto the desk */
.sl-worth .armadillo { opacity: 0; }