/* =====================================================================
   S4D Section Blocks — front-end styles (mirrors the design handoff)
   Self-contained tokens so blocks render correctly with any theme.
   ===================================================================== */
.s4d-sec {
	--s4d-navy: #0B1B3A;
	--s4d-navy-deep: #08132A;
	--s4d-navy-border: #22375C;
	--s4d-near-black: #101114;
	--s4d-blue: #136EF6;
	--s4d-blue-hover: #0B4FC0;
	--s4d-blue-light: #4E96FF;
	--s4d-blue-tint: #E3ECFD;
	--s4d-light-bg: #F4F7FD;
	--s4d-light-bg-alt: #FAFBFD;
	--s4d-border: #E4E8F0;
	--s4d-ink-700: #3F4859;
	--s4d-ink-600: #4A5468;
	--s4d-ink-500: #5A6478;
	--s4d-ink-400: #7A8496;
	--s4d-ink-300: #8A93A6;
	--s4d-on-navy: #B4C3DE;
	--s4d-on-navy-em: #E4EBF7;
	--s4d-on-navy-soft: #9FB2D4;
	--s4d-success: #0B7A3B;
	--s4d-pad-x: clamp(16px, 3vw, 32px);
	--s4d-maxw: 1160px;
	font-family: 'Archivo', Helvetica, Arial, sans-serif;
	display: block;
	padding: clamp(44px, 5vw, 88px) var(--s4d-pad-x);
	box-sizing: border-box;
}
.s4d-sec * { box-sizing: border-box; }
.s4d-sec__inner { width: min(var(--s4d-maxw), 100%); margin: 0 auto; }

/* Shared type */
.s4d-eyebrow { display: inline-block; font-size: clamp(10px, 1vw, 12px); font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--s4d-blue); margin-bottom: 14px; }
.s4d-eyebrow--blue { color: var(--s4d-blue); }
.s4d-eyebrow-pill { display: inline-block; font-size: clamp(10px, 1vw, 12px); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #0B4FC0; background: var(--s4d-blue-tint); padding: 8px 14px; border-radius: 100px; margin-bottom: 18px; }
.s4d-sec__head { max-width: 40em; margin: 0 auto clamp(28px, 3vw, 44px); }
.s4d-sec__h2 { font-size: clamp(26px, 4vw, 42px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; color: var(--s4d-navy); margin: 0 0 12px; text-wrap: balance; }
.s4d-sec__lede { font-size: clamp(15px, 1.4vw, 18px); color: var(--s4d-ink-600); line-height: 1.6; margin: 0; }
.s4d-fineprint { font-size: 11px; color: var(--s4d-ink-300); line-height: 1.5; margin: 20px 0 0; max-width: 46em; }
.s4d-fineprint--onnavy { color: #7F91B4; }
.s4d-badge { display: inline-block; background: var(--s4d-blue); color: #fff; font-size: clamp(10px, 1vw, 12px); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; padding: 8px 14px; border-radius: 4px; margin-bottom: 18px; }

/* Buttons (scoped, self-contained) */
.s4d-sec .s4d-btn, .s4d-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; font-weight: 800; font-size: clamp(15px, 1vw, 17px); text-decoration: none; padding: 14px 24px; border-radius: 6px; border: 1px solid transparent; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; min-height: 44px; }
.s4d-btn--primary { background: var(--s4d-blue); color: #fff; }
.s4d-btn--primary:hover { background: var(--s4d-blue-hover); color: #fff; }
.s4d-btn--outline { background: transparent; border-color: var(--s4d-border); color: var(--s4d-navy); }
.s4d-btn--outline:hover { background: var(--s4d-navy); color: #fff; }
.s4d-btn--outline-navy { background: transparent; border-color: #3C577F; color: #fff; }
.s4d-btn--outline-navy:hover { background: #fff; color: var(--s4d-navy); }
.s4d-btn--invert { background: var(--s4d-blue); color: #fff; }
.s4d-btn--invert:hover { background: #fff; color: var(--s4d-navy); }

/* ---------------------------------------------------------------- HERO */
.s4d-hero { background: var(--s4d-light-bg); padding-top: clamp(28px, 3.2vw, 52px); padding-bottom: clamp(40px, 4vw, 64px); }
.s4d-hero__grid { display: grid; grid-template-columns: 1fr minmax(0, 430px); gap: clamp(28px, 3.4vw, 56px); align-items: start; }
.s4d-hero__h1 { font-size: clamp(31px, 5vw, 56px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.06; color: var(--s4d-navy); margin: 0 0 16px; text-wrap: balance; }
.s4d-hero__sub { font-size: clamp(15px, 1.5vw, 19px); color: var(--s4d-ink-700); line-height: 1.55; margin: 0 0 22px; max-width: 33em; }
.s4d-hero__offers { display: grid; gap: 8px; max-width: 30em; margin-bottom: 22px; }
.s4d-offer-card { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #D8E2F5; border-left: 3px solid var(--s4d-blue); border-radius: 7px; padding: 10px 14px; }
.s4d-offer-card__num { font-size: clamp(14px, 1.4vw, 18px); font-weight: 800; letter-spacing: -0.02em; color: var(--s4d-blue); min-width: clamp(46px, 4.7vw, 63px); }
.s4d-offer-card__label { font-size: clamp(12px, 1.2vw, 14px); font-weight: 700; color: var(--s4d-navy); }
.s4d-hero__image { max-width: 30em; }
.s4d-hero__img { max-width: 360px; width: 100%; display: block; margin: 0 auto; }
@media (max-width: 800px) { .s4d-hero__grid { grid-template-columns: 1fr; } }

/* Desktop (801px+): the hardware image is dropped from the hero (client,
   2026-09-01 — it rendered small and left dead space) and the freed room goes
   to larger type, larger offer cards and a wider form card. The image still
   renders on mobile, where it stacks naturally below the offers. One markup,
   CSS decides — the HTML is edge-cached (CONTEXT §12). */
@media (min-width: 801px) {
	.s4d-hero__image { display: none; }
	.s4d-hero__grid { grid-template-columns: 1fr minmax(0, 480px); align-items: center; }
	.s4d-hero { padding-top: clamp(36px, 4vw, 64px); padding-bottom: clamp(48px, 4.6vw, 76px); }
	.s4d-hero__h1 { font-size: clamp(44px, 4.8vw, 66px); }
	.s4d-hero__sub { font-size: clamp(17px, 1.5vw, 21px); max-width: 32em; }
	.s4d-hero__offers { max-width: 34em; gap: 10px; }
	.s4d-offer-card { padding: 13px 16px; }
	.s4d-offer-card__num { font-size: clamp(17px, 1.6vw, 22px); min-width: clamp(56px, 5vw, 76px); }
	.s4d-offer-card__label { font-size: clamp(13px, 1.2vw, 16px); }
}

/* ----------------------------------------------------------- PAGE HERO */
.s4d-pagehero { background: var(--s4d-light-bg); border-bottom: 1px solid var(--s4d-border); padding-top: clamp(30px, 3.4vw, 56px); padding-bottom: clamp(30px, 3.4vw, 56px); }
.s4d-pagehero__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px, 3.4vw, 56px); align-items: center; }
.s4d-pagehero--form .s4d-pagehero__grid { grid-template-columns: 1fr minmax(0, 430px); align-items: start; }
.s4d-pagehero__h1 { font-size: clamp(30px, 5vw, 52px); font-weight: 800; letter-spacing: -0.028em; line-height: 1.06; color: var(--s4d-navy); margin: 0 0 16px; text-wrap: balance; }
.s4d-pagehero__sub { font-size: clamp(15px, 1.5vw, 19px); color: var(--s4d-ink-700); line-height: 1.55; margin: 0 0 24px; max-width: 32em; text-wrap: pretty; }
.s4d-pagehero__ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 24px; }
.s4d-pagehero__proof { display: flex; flex-wrap: wrap; gap: clamp(14px, 1.8vw, 28px); padding-top: 18px; border-top: 1px solid #DCE4F0; }
.s4d-pagehero__proof-item { display: flex; align-items: center; gap: 8px; font-size: clamp(12px, 1.05vw, 14px); font-weight: 600; color: var(--s4d-ink-600); }
.s4d-check { color: var(--s4d-blue); font-weight: 800; }
.s4d-pagehero__media { display: flex; justify-content: center; }
.s4d-pagehero__img { width: 100%; max-width: 380px; height: auto; display: block; }
@media (max-width: 800px) { .s4d-pagehero__grid, .s4d-pagehero--form .s4d-pagehero__grid { grid-template-columns: 1fr; } }
/* A form hero ships the photo too. Desktop gives the right column to the form
   and drops the image; mobile stacks it under the form, where it costs nothing
   above the fold. Same idiom as the home hero above — one markup, CSS decides,
   because the HTML is edge-cached (CONTEXT §12). */
.s4d-pagehero--form .s4d-pagehero__media--after-form { grid-column: 1 / -1; margin-top: clamp(20px, 3vw, 30px); }
@media (min-width: 801px) { .s4d-pagehero--form .s4d-pagehero__media--after-form { display: none; } }

/* --------------------------------------------------------------- STEPS */
.s4d-steps { background: #fff; }
.s4d-steps__head { max-width: 34em; margin-left: 0; margin-right: 0; }
.s4d-steps__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: clamp(14px, 1.6vw, 24px); }
.s4d-steps__card { border: 1px solid var(--s4d-border); border-radius: 12px; padding: clamp(18px, 2vw, 28px); }
.s4d-steps__num { display: block; font-size: clamp(22px, 2.4vw, 32px); font-weight: 800; color: var(--s4d-blue); letter-spacing: -0.03em; line-height: 1; margin-bottom: 14px; }
.s4d-steps__title { font-size: clamp(15px, 1.3vw, 18px); font-weight: 800; color: var(--s4d-navy); margin: 0 0 8px; }
.s4d-steps__text { font-size: clamp(13px, 1.1vw, 15px); line-height: 1.55; color: var(--s4d-ink-500); margin: 0; }

/* ----------------------------------------------------------- ARGUMENT */
.s4d-argument { background: var(--s4d-near-black); color: #fff; padding: clamp(36px, 4vw, 68px) var(--s4d-pad-x); }
.s4d-argument__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 3.4vw, 56px); align-items: center; }
.s4d-argument__h2 { font-size: clamp(24px, 2.9vw, 38px); line-height: 1.12; letter-spacing: -0.02em; font-weight: 800; margin: 0 0 14px; color: #fff; text-wrap: balance; }
.s4d-argument__body { font-size: clamp(14px, 1.25vw, 17px); line-height: 1.6; color: #B9BFCB; margin: 0 0 24px; max-width: 32em; text-wrap: pretty; }
.s4d-argument__rows { display: grid; gap: 12px; }
.s4d-argument__row { border: 1px solid #2C2E34; border-radius: 10px; padding: clamp(16px, 1.7vw, 22px); display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.s4d-argument__row.is-win { border-color: var(--s4d-blue); background: #0F2140; }
.s4d-argument__label { font-size: clamp(13px, 1.1vw, 15px); color: #B9BFCB; }
.s4d-argument__row.is-win .s4d-argument__label { color: #E4EBF7; font-weight: 700; }
.s4d-argument__value { font-size: clamp(18px, 1.8vw, 24px); font-weight: 800; color: #fff; letter-spacing: -0.02em; }
.s4d-argument__row.is-win .s4d-argument__value { color: var(--s4d-blue-light); }
.s4d-argument__fine { margin: 4px 0 0; font-size: 11px; line-height: 1.5; color: #8C93A1; }
.s4d-btn--invert-black { background: var(--s4d-blue); color: #fff; }
.s4d-btn--invert-black:hover { background: #fff; color: var(--s4d-near-black); }
@media (max-width: 800px) { .s4d-argument__grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ RELATED */
.s4d-related { background: #fff; }
.s4d-related__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: clamp(20px, 2.2vw, 32px); }
.s4d-related__h2 { font-size: clamp(22px, 2.6vw, 34px); line-height: 1.12; letter-spacing: -0.025em; font-weight: 800; margin: 0; color: var(--s4d-navy); }
.s4d-related__all { font-size: clamp(13px, 1.1vw, 15px); font-weight: 800; color: var(--s4d-blue); text-decoration: none; }
.s4d-related__all:hover { color: var(--s4d-blue-hover); }
.s4d-related__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.s4d-related__card { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--s4d-border); border-radius: 12px; padding: clamp(18px, 2vw, 24px); text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease; }
.s4d-related__card:hover { border-color: var(--s4d-blue); box-shadow: 0 12px 28px rgba(11,27,58,0.08); }
.s4d-related__title { font-size: clamp(15px, 1.25vw, 17px); font-weight: 800; color: var(--s4d-navy); }
.s4d-related__desc { font-size: clamp(13px, 1.05vw, 14px); line-height: 1.5; color: var(--s4d-ink-500); }
.s4d-related__more { font-size: clamp(12px, 1vw, 13px); font-weight: 800; color: var(--s4d-blue); margin-top: 4px; }

/* SEO body tables (compare pages rendered through the text section) */
.s4d-seo__body table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 14px; }
.s4d-seo__body th, .s4d-seo__body td { border: 1px solid var(--s4d-border); padding: 10px 12px; text-align: left; }
.s4d-seo__body th { background: var(--s4d-light-bg); color: var(--s4d-navy); font-weight: 800; }

/* ------------------------------------------------------------- MARQUEE */
.s4d-marquee { background: #fff; border-bottom: 1px solid #EDF0F5; padding: clamp(16px, 1.8vw, 26px) var(--s4d-pad-x); }
.s4d-marquee__inner { display: flex; align-items: center; gap: 24px; }
.s4d-marquee__label { flex: 0 0 auto; max-width: 9em; font-size: clamp(10px, 1vw, 11px); font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--s4d-ink-300); }
.s4d-marquee__mask { flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.s4d-marquee__track { display: flex; align-items: center; gap: clamp(28px, 3.4vw, 56px); width: max-content; opacity: .7; animation: s4d-marquee 38s linear infinite; }
.s4d-marquee__logo { height: 44px; width: auto; display: block; }
.s4d-marquee__text { font-size: 18px; font-weight: 800; color: var(--s4d-ink-500); white-space: nowrap; }
@keyframes s4d-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .s4d-marquee__track { animation: none; flex-wrap: wrap; } }
/* Stacking the label above the strip flips the flex axes: width becomes the
   CROSS axis, so `flex: 1` on the mask no longer governs it and `flex-start`
   sizes the mask to its own content — the full max-content track (~2600px).
   `overflow: hidden` does not help: it clips what is painted inside the box, it
   does not limit how wide the box may become. Without the explicit width below
   the mask pushes the document out and the whole page scrolls sideways. */
@media (max-width: 640px) {
	.s4d-marquee__inner { flex-direction: column; align-items: flex-start; }
	.s4d-marquee__mask { width: 100%; }
}

/* ------------------------------------------------------------ STAT BAR */
.s4d-statbar { background: var(--s4d-navy); padding: clamp(30px, 3.4vw, 52px) var(--s4d-pad-x); }
.s4d-statbar__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: clamp(20px, 2.4vw, 32px); }
.s4d-statbar__cell { text-align: center; }
.s4d-statbar__num { display: block; font-size: clamp(30px, 4vw, 48px); font-weight: 800; letter-spacing: -0.03em; color: #fff; line-height: 1; }
.s4d-statbar__num.is-alt { color: var(--s4d-blue-light); }
.s4d-statbar__label { display: block; margin-top: 8px; font-size: clamp(10px, 1vw, 11px); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--s4d-on-navy-soft); }

/* ---------------------------------------------------------- BAR RESCUE */
.s4d-barrescue { background: var(--s4d-near-black); padding: clamp(32px, 3.6vw, 60px) var(--s4d-pad-x); }
.s4d-barrescue__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 48px); align-items: center; }
.s4d-barrescue__h2 { font-size: clamp(24px, 3vw, 38px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; color: #fff; margin: 0 0 14px; }
.s4d-barrescue__body { color: #B9BFCB; max-width: 34em; margin: 0 0 22px; line-height: 1.6; }
.s4d-barrescue__img { width: 100%; border-radius: 12px; display: block; }
@media (max-width: 800px) { .s4d-barrescue__grid { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------- HARDWARE */
.s4d-hardware { background: #fff; }
.s4d-hardware__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 208px), 1fr)); gap: clamp(14px, 1.5vw, 22px); }
.s4d-hardware__card { border: 1px solid var(--s4d-border); border-radius: 12px; padding: clamp(16px, 1.8vw, 24px); display: flex; flex-direction: column; gap: 12px; transition: border-color .15s ease, box-shadow .15s ease; background: #fff; }
.s4d-hardware__card:hover { border-color: var(--s4d-blue); box-shadow: 0 12px 28px rgba(11,27,58,0.08); }
.s4d-hardware__card--link { text-decoration: none; }
.s4d-hardware__more { color: var(--s4d-blue); font-weight: 800; margin-left: 4px; }
.s4d-hardware__well { height: clamp(96px, 10vw, 130px); display: flex; align-items: center; justify-content: center; }
.s4d-hardware__img { max-height: 100%; width: auto; object-fit: contain; }
.s4d-hardware__title { font-size: clamp(15px, 1.4vw, 18px); font-weight: 800; color: var(--s4d-navy); margin: 0; }
.s4d-hardware__desc { font-size: clamp(13px, 1.2vw, 14px); color: var(--s4d-ink-500); margin: 0; flex: 1; line-height: 1.5; }
.s4d-hardware__price { font-size: clamp(14px, 1.3vw, 16px); font-weight: 800; color: var(--s4d-blue); }

/* ----------------------------------------------------------- FEATURES */
.s4d-features { background: var(--s4d-light-bg); border-top: 1px solid var(--s4d-border); border-bottom: 1px solid var(--s4d-border); }
.s4d-features__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: clamp(14px, 1.6vw, 24px); }
.s4d-features__col { background: #fff; border: 1px solid #E1E7F2; border-radius: 12px; padding: clamp(18px, 2vw, 26px); }
.s4d-features__title { font-size: clamp(15px, 1.4vw, 17px); font-weight: 800; color: var(--s4d-navy); margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid #EDF1F8; }
.s4d-features__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.s4d-features__list li { font-size: clamp(13px, 1.2vw, 15px); color: var(--s4d-ink-600); }

/* -------------------------------------------------------------- SPLIT */
.s4d-split { background: #fff; }
.s4d-split__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 3.4vw, 56px); align-items: center; }
.s4d-split--right .s4d-split__media { order: 2; }
.s4d-split__panel { background: var(--s4d-light-bg); border: 1px solid var(--s4d-border); border-radius: 12px; padding: clamp(24px, 3vw, 48px); text-align: center; }
.s4d-split__img { max-width: 360px; width: 100%; display: block; margin: 0 auto; }
.s4d-split__points { margin-top: 8px; }
.s4d-split__point { border-top: 1px solid var(--s4d-border); padding-top: clamp(12px, 1.3vw, 18px); margin-top: clamp(12px, 1.3vw, 18px); }
.s4d-split__point strong { display: block; color: var(--s4d-navy); font-size: 16px; margin-bottom: 2px; }
.s4d-split__point span { color: var(--s4d-ink-500); font-size: 15px; }
@media (max-width: 800px) { .s4d-split__grid { grid-template-columns: 1fr; } .s4d-split--right .s4d-split__media { order: 0; } }

/* --------------------------------------------------------- OFFER STACK */
.s4d-offerstack { background: var(--s4d-navy); }
.s4d-offerstack__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px, 3.4vw, 56px); align-items: center; }
.s4d-offerstack__h2 { font-size: clamp(28px, 4vw, 48px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.06; color: #fff; margin: 0 0 24px; }
.s4d-offerstack__offers { display: grid; gap: clamp(10px, 1.1vw, 14px); max-width: 32em; }
.s4d-offerstack__offer { display: flex; align-items: baseline; gap: clamp(12px, 1.3vw, 18px); padding-bottom: clamp(10px, 1.1vw, 14px); border-bottom: 1px solid var(--s4d-navy-border); }
.s4d-offerstack__offer:last-child { border-bottom: 0; }
.s4d-offerstack__num { font-size: clamp(20px, 2.6vw, 28px); font-weight: 800; letter-spacing: -0.03em; color: var(--s4d-blue-light); min-width: clamp(74px, 7.4vw, 104px); }
.s4d-offerstack__text { font-size: clamp(14px, 1.4vw, 17px); color: var(--s4d-on-navy-em); margin: 0; line-height: 1.5; }
.s4d-offerstack__text strong { color: #fff; }
.s4d-offerstack__include-line { font-size: clamp(14px, 1.4vw, 17px); color: var(--s4d-on-navy); margin: 24px 0 12px; }
.s4d-offerstack__includes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 12px; margin-bottom: 26px; }
.s4d-offerstack__inc { font-size: clamp(13px, 1.2vw, 15px); color: var(--s4d-on-navy-em); padding-left: 24px; position: relative; }
.s4d-offerstack__inc::before { content: "✓"; position: absolute; left: 0; color: var(--s4d-blue-light); font-weight: 800; }
.s4d-offerstack__img { width: 100%; border-radius: 12px; display: block; }
@media (max-width: 860px) { .s4d-offerstack__grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------- COMPARISON */
.s4d-compare { background: #fff; }
.s4d-compare__wrap { border: 1px solid var(--s4d-border); border-radius: 12px; overflow-x: auto; }
.s4d-compare__table { min-width: 640px; width: 100%; border-collapse: collapse; font-size: clamp(12px, 1.2vw, 14px); }
.s4d-compare__table th { background: var(--s4d-navy); color: var(--s4d-on-navy); font-weight: 600; padding: 14px 12px; text-align: center; }
.s4d-compare__usth { background: var(--s4d-blue) !important; color: #fff !important; font-weight: 800; }
.s4d-compare__table td { padding: 14px 12px; text-align: center; border-top: 1px solid #EDF0F5; color: var(--s4d-ink-500); }
.s4d-compare__table tbody tr:nth-child(even) { background: var(--s4d-light-bg-alt); }
.s4d-compare__rowlabel { text-align: left !important; font-weight: 700; color: var(--s4d-navy); padding-left: 16px !important; }
.s4d-compare__uscell { background: #F5F9FF; font-weight: 800; color: var(--s4d-navy); }
.s4d-compare__notes { margin-top: 16px; display: grid; gap: 6px; }
.s4d-compare__notes p { font-size: 11px; color: var(--s4d-ink-300); margin: 0; }

/* -------------------------------------------------------- TESTIMONIALS */
.s4d-testimonials { background: var(--s4d-light-bg); border-top: 1px solid var(--s4d-border); }
.s4d-testimonials__h2 { max-width: 20em; }
.s4d-testimonials__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.s4d-testimonial { background: #fff; border: 1px solid #E1E7F2; border-radius: 12px; padding: clamp(20px, 2.2vw, 30px); display: flex; flex-direction: column; gap: 16px; margin: 0; }
.s4d-testimonial__quote { font-size: clamp(15px, 1.5vw, 18px); font-weight: 600; color: #1B2536; line-height: 1.5; margin: 0; flex: 1; }
.s4d-testimonial__foot { display: flex; align-items: center; gap: 12px; border-top: 1px solid #EDF1F8; padding-top: 16px; }
.s4d-testimonial__avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--s4d-navy); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; }
.s4d-testimonial__avatar.is-blue { background: var(--s4d-blue); }
.s4d-testimonial__meta { display: flex; flex-direction: column; }
.s4d-testimonial__name { font-size: 14px; font-weight: 800; color: var(--s4d-navy); }
.s4d-testimonial__company { font-size: 12px; color: var(--s4d-ink-400); }

/* ---------------------------------------------------------------- FAQ */
.s4d-faq { background: #fff; }
.s4d-faq__grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(28px, 3.4vw, 56px); align-items: flex-start; }
.s4d-faq__body { color: var(--s4d-ink-600); margin: 0 0 12px; }
.s4d-faq__phone { font-size: clamp(16px, 1.6vw, 20px); font-weight: 800; color: var(--s4d-blue); text-decoration: none; }
.s4d-faq__items { display: grid; gap: 10px; }
.s4d-faq__item { border: 1px solid var(--s4d-border); border-radius: 10px; overflow: hidden; }
.s4d-faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: clamp(15px, 1.5vw, 20px); font-size: clamp(14px, 1.4vw, 16px); font-weight: 700; color: var(--s4d-navy); background: none; border: 0; cursor: pointer; text-align: left; font-family: inherit; }
.s4d-faq__q:hover { background: #F7F9FD; }
.s4d-faq__icon { position: relative; width: 20px; height: 20px; flex: 0 0 auto; }
.s4d-faq__icon::before, .s4d-faq__icon::after { content: ""; position: absolute; background: var(--s4d-blue); left: 50%; top: 50%; transform: translate(-50%, -50%); }
.s4d-faq__icon::before { width: 14px; height: 2px; }
.s4d-faq__icon::after { width: 2px; height: 14px; transition: transform .2s ease; }
.s4d-faq__item.is-open .s4d-faq__icon::after { transform: translate(-50%, -50%) scaleY(0); }
.s4d-faq__a { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.s4d-faq__item.is-open .s4d-faq__a { max-height: 600px; }
.s4d-faq__a p { margin: 0; padding: 0 clamp(15px, 1.5vw, 20px) clamp(15px, 1.5vw, 20px); font-size: clamp(13px, 1.3vw, 15px); color: var(--s4d-ink-600); line-height: 1.6; }
@media (max-width: 800px) { .s4d-faq__grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------- FINAL CTA */
.s4d-finalcta { background: var(--s4d-navy); }
.s4d-finalcta__grid { display: grid; grid-template-columns: 1fr minmax(0, 430px); gap: clamp(28px, 3.4vw, 56px); align-items: center; }
.s4d-finalcta__h2 { font-size: clamp(28px, 4vw, 46px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; color: #fff; margin: 0 0 14px; }
.s4d-finalcta__body { color: var(--s4d-on-navy); margin: 0 0 22px; line-height: 1.6; }
.s4d-finalcta__row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 22px; }
.s4d-finalcta__hours { font-size: clamp(12px, 1.2vw, 13px); color: var(--s4d-on-navy-soft); }
.s4d-finalcta__recap { border-top: 1px solid var(--s4d-navy-border); padding-top: 20px; display: grid; gap: 8px; }
.s4d-finalcta__recap p { margin: 0; font-size: clamp(13px, 1.3vw, 15px); color: var(--s4d-on-navy); }
.s4d-finalcta__recap strong { color: #fff; }
@media (max-width: 800px) { .s4d-finalcta__grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ SEO TEXT */
.s4d-seo { background: #fff; }
.s4d-seo--light { background: var(--s4d-light-bg); }
.s4d-seo__inner { max-width: 760px; }
.s4d-seo__body { color: var(--s4d-ink-600); font-size: 16px; line-height: 1.7; }
.s4d-seo__body p { margin: 0 0 16px; }

/* --------------------------------------------------------- CTA BANNER */
.s4d-ctabanner { background: var(--s4d-navy); }
.s4d-ctabanner__inner { text-align: center; max-width: 640px; }
.s4d-ctabanner__h2 { font-size: clamp(24px, 3vw, 36px); font-weight: 800; color: #fff; margin: 0 0 12px; letter-spacing: -0.02em; }
.s4d-ctabanner__body { color: var(--s4d-on-navy); margin: 0 0 24px; }

/* ------------------------------------------------------------ PRICING */
.s4d-pricing { background: #fff; }
.s4d-pricing__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(16px, 2vw, 24px); align-items: stretch; }
.s4d-pricing__card { border: 1px solid var(--s4d-border); border-radius: 14px; padding: clamp(22px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 14px; background: #fff; }
.s4d-pricing__card.is-featured { border-color: var(--s4d-blue); box-shadow: 0 18px 44px rgba(11,27,58,0.10); }
.s4d-pricing__name { font-size: 18px; font-weight: 800; color: var(--s4d-navy); margin: 0; }
.s4d-pricing__price { font-size: clamp(30px, 4vw, 44px); font-weight: 800; color: var(--s4d-navy); letter-spacing: -0.02em; margin: 0; }
.s4d-pricing__price span { font-size: 14px; font-weight: 600; color: var(--s4d-ink-400); margin-left: 4px; }
.s4d-pricing__features { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; flex: 1; }
.s4d-pricing__features li { font-size: 14px; color: var(--s4d-ink-600); padding-left: 22px; position: relative; }
.s4d-pricing__features li::before { content: "✓"; position: absolute; left: 0; color: var(--s4d-blue); font-weight: 800; }

/* -------------------------------------------------------------- VIDEO */
.s4d-video--light { background: var(--s4d-light-bg); }
.s4d-video--white { background: #fff; }
.s4d-video--navy { background: var(--s4d-navy); }
.s4d-video--navy .s4d-sec__h2 { color: #fff; }
.s4d-video__frame { max-width: 900px; margin: 0 auto; }
.s4d-video__frame iframe, .s4d-video__frame video { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; display: block; }

/* Prose (SEO body shared) */
.s4d-prose h3 { color: var(--s4d-navy); font-weight: 800; margin: 24px 0 8px; }
.s4d-prose ul { padding-left: 22px; }

/* ------------------------------------------------------------------ */
/* Phone-hours copy swap                                              */
/*                                                                    */
/* Deliberately duplicated from the theme's main.css, which is the    */
/* canonical copy — keep the two identical. These blocks emit a pair  */
/* of sentences and let CSS pick one (see s4d_render_final_cta), so   */
/* a page that somehow loads sections.css without main.css would show */
/* BOTH sentences at once. Three lines here make the wrong outcome    */
/* impossible; the alternative failure is visible to every visitor.   */
/* ------------------------------------------------------------------ */
.s4d-phone-off-only { display: none; }
html.s4d-phone-off .s4d-phone-on-only { display: none; }
html.s4d-phone-off .s4d-phone-off-only { display: revert; }