/**
 * SBBG Guide — the Smart Boat Buyers Guide page body as one element.
 *
 * Same defensive posture as store-hero.css: every rule a Salient global
 * could touch is stated explicitly. No JS. Buttons reuse Salient's
 * `.nectar-button` classes (hover/lift/shadow come from the theme).
 * Layout is phone-first; the two-column sections open up at 900px.
 */

.sbg {
	--sbg-navy: #0a1e2f;
	--sbg-navy-2: #0f2a40;
	--sbg-red: #cf0c0c;
	--sbg-ink: #1b2733;
	--sbg-muted: #5b6b7a;
	--sbg-line: rgba(10, 30, 47, .12);
	--sbg-paper: #f5f7f9;
	--sbg-green: #5e8a4b;   --sbg-green-2: #3f6a32;
	--sbg-gold: #dfae4e;    --sbg-gold-2: #c08f2c;
	--sbg-coral: #e58a7b;   --sbg-coral-2: #c96b5c;
	--sbg-radius: 10px;
	--sbg-wrap: 1180px;
	--sbg-pad: clamp(20px, 4vw, 48px);
	--sbg-head: Roboto, "Open Sans", Helvetica, Arial, sans-serif;
	--sbg-body: "Open Sans", Helvetica, Arial, sans-serif;

	font-family: var(--sbg-body);
	color: var(--sbg-ink);
	line-height: 1.6;
	text-align: left;
}
.sbg *, .sbg *::before, .sbg *::after { box-sizing: border-box; }
.sbg p { margin: 0; padding: 0; font-size: 17px; line-height: 1.65; color: var(--sbg-ink); }
.sbg a { transition: color .2s, opacity .2s; }
.sbg h1, .sbg h2, .sbg h3 { font-family: var(--sbg-head); color: var(--sbg-navy); letter-spacing: -.01em; margin: 0; }
.sbg .sbg-wrap { max-width: var(--sbg-wrap); margin: 0 auto; padding-left: var(--sbg-pad); padding-right: var(--sbg-pad); }
.sbg .sbg-eyebrow { display: block; font: 800 12px/1 var(--sbg-head); letter-spacing: .16em; text-transform: uppercase; color: var(--sbg-red); margin: 0 0 14px; }
.sbg .sbg-actions { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; margin-top: 26px; }
.sbg .sbg-actions .nectar-button { margin-bottom: 0; }
.sbg .sbg-note { font-size: 13px; color: var(--sbg-muted); margin-top: 18px; }

/* ---------------------------------------------------------------- hero */
.sbg-hero {
	position: relative;
	display: grid;
	align-items: end;
	min-height: clamp(560px, 50vw, 760px);
	background: var(--sbg-navy);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}
/* The photo lives in its own layer so phones can stop it short and drop
   the card below it (see the phone block). Aaron's 1920×1080 crop puts the
   boat top-right with open water bottom-left — object-position keeps the
   boat in frame as the box changes shape. */
.sbg-hero-media { position: absolute; inset: 0; z-index: 0; }
.sbg .sbg-hero-media picture { display: block; position: absolute; inset: 0; }
.sbg .sbg-hero-media img.sbg-hero-bg { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; object-position: 62% 38%; margin: 0 !important; }
.sbg-hero-media::after {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background:
		linear-gradient(180deg, rgba(10,30,47,.18) 0%, rgba(10,30,47,.12) 45%, rgba(10,30,47,.84) 100%),
		linear-gradient(90deg, rgba(10,30,47,.80) 0%, rgba(10,30,47,.42) 40%, rgba(10,30,47,0) 68%);
}
.sbg-hero .sbg-wrap { position: relative; z-index: 2; width: 100%; padding-top: clamp(64px, 9vw, 120px); padding-bottom: clamp(36px, 5vw, 64px); display: grid; gap: 28px; grid-template-columns: 1fr; align-items: end; }
.sbg .sbg-hero-logo { margin: 0 0 26px; line-height: 0; }
.sbg-hero-logo img { display: block; width: min(100%, 560px); height: auto; margin: 0 !important; filter: drop-shadow(0 6px 18px rgba(0,0,0,.35)); }
.sbg .sbg-hero-sub { font: 700 clamp(18px, 2vw, 22px)/1.45 var(--sbg-body); color: #fff; max-width: 30em; text-shadow: 0 1px 3px rgba(0,0,0,.55); text-wrap: balance; }
.sbg-hero .sbg-actions .nectar-button.see-through { border-color: rgba(255,255,255,.75); color: #fff; }

/* "Best buying window" card */
.sbg-window {
	background: rgba(10,30,47,.92); border-top: 3px solid var(--sbg-red); border-radius: 6px;
	padding: 20px 22px 18px; color: #fff; box-shadow: 0 18px 40px -18px rgba(0,0,0,.6);
	max-width: 420px; justify-self: start;
}
.sbg-window .sbg-eyebrow { color: rgba(255,255,255,.7); margin-bottom: 8px; }
.sbg-window-top { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.sbg-window strong { font: 900 clamp(38px, 4vw, 52px)/1 var(--sbg-head); color: #fff; letter-spacing: -.02em; }
.sbg-window-when { font: 600 14px/1.3 var(--sbg-body); color: rgba(255,255,255,.8); }
.sbg-window ul { list-style: none; margin: 16px 0 0 !important; padding: 14px 0 0; border-top: 1px solid rgba(255,255,255,.18); display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sbg-window li { font: 700 12px/1.35 var(--sbg-head); color: rgba(255,255,255,.92); padding: 0; margin: 0; }
.sbg-window-nav { display: none; }

/* ---------------------------------------------------------------- in this guide */
.sbg-toc { background: #fff; border-bottom: 1px solid var(--sbg-line); }
.sbg-toc .sbg-wrap { display: flex; align-items: stretch; gap: 0; overflow-x: auto; scrollbar-width: none; padding-left: 0; padding-right: 0; }
.sbg-toc .sbg-wrap::-webkit-scrollbar { display: none; }
.sbg-toc-label { flex: 0 0 auto; display: flex; align-items: center; padding: 18px var(--sbg-pad); font: 800 11px/1 var(--sbg-head); letter-spacing: .16em; text-transform: uppercase; color: var(--sbg-muted); border-right: 1px solid var(--sbg-line); }
.sbg-toc a { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 18px 22px; font: 700 14px/1.2 var(--sbg-head); color: var(--sbg-navy) !important; text-decoration: none; border-right: 1px solid var(--sbg-line); white-space: nowrap; }
.sbg-toc a:last-child { border-right: 0; }
.sbg-toc a:hover { background: var(--sbg-paper); }
.sbg-toc a b { font: 900 11px/1 var(--sbg-head); color: var(--sbg-red); letter-spacing: .04em; }

/* ---------------------------------------------------------------- why fall (stakeholder copy — verbatim) */
.sbg-why { background: #fff; }
.sbg-why .sbg-wrap { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 96px); display: grid; grid-template-columns: 1fr; gap: 36px 64px; }
.sbg-why h2 { font: 900 clamp(38px, 5vw, 60px)/1.02 var(--sbg-head); letter-spacing: -.02em; margin-bottom: 22px; }
.sbg-why h2 em { font-style: normal; color: var(--sbg-red); }
.sbg-why-intro p + p { margin-top: 16px; }
.sbg-why-intro .sbg-lead { font-weight: 700; color: var(--sbg-navy); }
.sbg-reasons { list-style: none; margin: 0 !important; padding: 0; border-top: 1px solid var(--sbg-line); counter-reset: sbg; }
.sbg-reasons li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 22px 0; border-bottom: 1px solid var(--sbg-line); margin: 0; }
.sbg-reasons li::before { counter-increment: sbg; content: "0" counter(sbg); font: 900 13px/1.6 var(--sbg-head); color: var(--sbg-red); letter-spacing: .06em; padding-top: 3px; }
.sbg-reasons p { font-size: 17px; }
.sbg-reasons strong { display: block; font: 800 20px/1.25 var(--sbg-head); color: var(--sbg-navy); margin-bottom: 4px; }
.sbg-why-cta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; }
.sbg-why-cta .sbg-note { margin: 0; }

/* ---------------------------------------------------------------- calendar */
.sbg-cal { background: var(--sbg-navy); color: #fff; }
.sbg-cal .sbg-wrap { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 96px); }
.sbg-cal .sbg-eyebrow { color: rgba(255,255,255,.7); }
.sbg-cal h2 { font: 900 clamp(36px, 4.6vw, 56px)/1.05 var(--sbg-head); color: #fff; letter-spacing: -.02em; margin-bottom: 36px; }
.sbg-cal h2 span { color: #9fc4d6; }
.sbg-cards { display: grid; grid-template-columns: 1fr; gap: 18px; list-style: none; margin: 0 !important; padding: 0; }
.sbg-card { position: relative; margin: 0; padding: 0; border-radius: 12px; overflow: hidden; background: var(--c); color: #fff; box-shadow: 0 24px 50px -24px rgba(0,0,0,.7); display: flex; flex-direction: column; }
.sbg-card.is-best  { --c: var(--sbg-green); --c2: var(--sbg-green-2); }
.sbg-card.is-great { --c: var(--sbg-gold);  --c2: var(--sbg-gold-2); }
.sbg-card.is-good  { --c: var(--sbg-coral); --c2: var(--sbg-coral-2); }
.sbg-card-tab { display: flex; justify-content: space-between; align-items: center; background: var(--c2); padding: 12px 22px; font: 900 15px/1 var(--sbg-head); letter-spacing: .14em; text-transform: uppercase; }
.sbg-card-tab small { font: 700 12px/1 var(--sbg-body); letter-spacing: .02em; text-transform: none; opacity: .9; }
.sbg-card-body { padding: 26px 24px 24px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.sbg-card h3 { font: 900 clamp(26px, 2.6vw, 32px)/1.1 var(--sbg-head); color: #fff; padding-bottom: 14px; border-bottom: 2px solid rgba(255,255,255,.7); }
.sbg-card p { color: #fff; font-size: 16px; }
.sbg-card .sbg-card-note { margin-top: auto; font-size: 13px; opacity: .9; }

/* ---------------------------------------------------------------- faq */
.sbg-faq { background: var(--sbg-paper); }
.sbg-faq .sbg-wrap { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 96px); display: grid; grid-template-columns: 1fr; gap: 28px 64px; align-items: start; }
.sbg-faq h2 { font: 900 clamp(34px, 4.4vw, 52px)/1.05 var(--sbg-head); letter-spacing: -.02em; }
.sbg-faq details { border-top: 1px solid var(--sbg-line); margin: 0; }
.sbg-faq details:last-child { border-bottom: 1px solid var(--sbg-line); }
.sbg-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font: 700 18px/1.3 var(--sbg-head); color: var(--sbg-navy); }
.sbg-faq summary::-webkit-details-marker { display: none; }
.sbg-faq summary::after { content: "+"; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--sbg-red); font: 900 18px/1 var(--sbg-head); box-shadow: 0 2px 6px rgba(10,30,47,.12); }
.sbg-faq details[open] summary::after { content: "–"; }
.sbg-faq .sbg-answer { padding: 0 44px 22px 0; }
.sbg-faq .sbg-answer p + p { margin-top: 12px; }
.sbg-faq .sbg-answer a { color: var(--sbg-red); font-weight: 700; text-decoration: underline; }
.sbg-faq .sbg-answer .sbg-note { margin-top: 10px; }

/* ---------------------------------------------------------------- perks */
.sbg-perks { background: #fff; }
.sbg-perks .sbg-wrap { padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(48px, 6vw, 80px); }
.sbg-perks-box { background: var(--sbg-navy); color: #fff; border-radius: var(--sbg-radius); overflow: hidden; display: grid; grid-template-columns: 1fr; align-items: stretch; box-shadow: 0 22px 44px -20px rgba(10,30,47,.5); }
.sbg-perks-copy { padding: clamp(24px, 3vw, 40px); display: grid; gap: 22px; align-content: center; }
/* Phones: a plain 16:9 photo above the copy. */
.sbg .sbg-perks-photo { display: block; position: relative; margin: 0; }
.sbg .sbg-perks-photo img { display: block; width: 100% !important; height: auto !important; margin: 0 !important; object-fit: cover; aspect-ratio: 16 / 9; }
.sbg-perks h2 { font: 900 clamp(24px, 2.6vw, 32px)/1.15 var(--sbg-head); color: #fff; }
.sbg-perks ul { list-style: none; margin: 0 !important; padding: 0; display: grid; grid-template-columns: 1fr; gap: 12px 28px; }
.sbg-perks li { display: flex; gap: 12px; align-items: baseline; margin: 0; font: 700 16px/1.35 var(--sbg-head); color: #fff; }
.sbg-perks li b { font: 900 12px/1.6 var(--sbg-head); color: #9fc4d6; letter-spacing: .06em; }

/* ---------------------------------------------------------------- photos */
.sbg .sbg-photo { display: block; margin: 28px 0 0; border-radius: var(--sbg-radius); overflow: hidden; box-shadow: 0 22px 44px -20px rgba(10, 30, 47, 0.42); }
.sbg .sbg-photo img { display: block; width: 100%; height: auto; margin: 0 !important; aspect-ratio: 3 / 2; object-fit: cover; }
.sbg .sbg-faq-photo img { aspect-ratio: 4 / 3; }

/* ---------------------------------------------------------------- brands */
.sbg-brands { background: #fff; }
.sbg-brands .sbg-wrap { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(40px, 5vw, 72px); }
.sbg-brands-head { margin-bottom: 28px; }
.sbg-brands h2 { font: 900 clamp(28px, 3.4vw, 42px)/1.1 var(--sbg-head); letter-spacing: -.02em; max-width: 22em; }
.sbg-brand-grid { list-style: none; margin: 0 !important; padding: 0; display: grid; grid-template-columns: 1fr; gap: 16px; }
.sbg-brand { margin: 0; }
.sbg-brand a { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--sbg-radius); overflow: hidden; background: var(--sbg-navy); color: #fff !important; text-decoration: none; box-shadow: 0 22px 44px -20px rgba(10, 30, 47, 0.42); isolation: isolate; }
.sbg-brand picture, .sbg-brand-photo img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; margin: 0 !important; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.sbg-brand a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,30,47,0) 35%, rgba(10,30,47,.55) 70%, rgba(10,30,47,.92) 100%); z-index: 1; }
.sbg-brand a:hover img { transform: scale(1.04); }
.sbg-brand-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 22px 22px 20px; display: grid; gap: 14px; }
.sbg .sbg-brand-logo { display: block; width: 100%; max-width: 220px; height: 34px; object-fit: contain; object-position: left center; margin: 0 !important; color: #fff; fill: currentColor; filter: drop-shadow(0 2px 8px rgba(0,0,0,.35)); }
/* PNG logos (Tidewater): Salient's `.row .col img { height: auto }` would win at (0,2,1) — pin the box. */
.sbg .sbg-brand-body img.sbg-brand-logo { height: 34px !important; width: auto !important; max-width: 220px !important; }
.sbg-brand-meta { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.28); font: 800 12px/1 var(--sbg-head); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.92); }
.sbg-brand-arrow { font-size: 18px; letter-spacing: 0; transition: transform .3s; }
.sbg-brand a:hover .sbg-brand-arrow { transform: translateX(4px); }

/* ---------------------------------------------------------------- responsive */
@media (min-width: 640px) {
	.sbg-cards { grid-template-columns: repeat(3, 1fr); }
	.sbg-brand-grid { grid-template-columns: repeat(2, 1fr); }
	.sbg-perks ul { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
	.sbg-hero .sbg-wrap { grid-template-columns: minmax(0, 1.4fr) minmax(300px, .9fr); align-items: end; }
	.sbg-window { justify-self: end; }
	.sbg-why .sbg-wrap { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
	.sbg-why-intro { position: sticky; top: 24px; align-self: start; }
	.sbg-faq .sbg-wrap { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
	.sbg-faq h2 { position: sticky; top: 24px; }
	.sbg-perks-box { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
	/* Desktop: the photo fills its cell as an absolutely positioned layer, so its
	   intrinsic size can never size the row. 0.10.0 used height:100% + aspect-ratio:auto
	   and the lazy (not-yet-loaded) image inflated the box to 1500px on the live page. */
	.sbg .sbg-perks-photo { min-height: 260px; }
	.sbg .sbg-perks-photo img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; aspect-ratio: auto; }
	.sbg-brand-grid { grid-template-columns: repeat(4, 1fr); }
	.sbg .sbg-why-photo { margin-top: 32px; }
}
@media (max-width: 899px) {
	/* Phone / small tablet: a portrait crop (boat near the top, open water
	   below) covers the whole hero. The copy starts under the boat and the
	   Best-buying-window card sits on the water below it (Aaron, Fri 9/4). */
	.sbg-hero { min-height: min(100svh, 820px); }
	.sbg .sbg-hero-media img.sbg-hero-bg { object-position: 50% 8%; }
	.sbg-hero-media::after { background: linear-gradient(180deg, rgba(10,30,47,.06) 0%, rgba(10,30,47,.08) 34%, rgba(10,30,47,.62) 60%, rgba(10,30,47,.90) 100%); }
	.sbg-hero .sbg-wrap { padding-top: 0; padding-bottom: 28px; gap: 20px; }
	.sbg-hero-copy { min-height: 42vh; display: flex; flex-direction: column; justify-content: flex-end; }
	.sbg .sbg-hero-logo { margin-bottom: 16px; }
	.sbg-hero-logo img { width: min(100%, 420px); }
	/* Two balanced lines, never a one-word orphan (Aaron, Fri 9/4): balance splits the
	   line evenly; the ch cap forces the break even where balance isn't supported. */
	.sbg .sbg-hero-sub { max-width: 19ch; font-size: 19px; }
	.sbg-window { max-width: none; width: 100%; background: rgba(10,30,47,.86); backdrop-filter: blur(2px); }
	/* Phones: the "In this guide" strip cropped, so the guide menu moves into the
	   card in place of the three chips (Aaron, Fri 9/4). */
	.sbg-toc { display: none; }
	.sbg-window .sbg-window-chips { display: none; }
	.sbg-window-nav { display: grid; grid-template-columns: auto auto; justify-content: space-between; gap: 12px 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.18); }
	.sbg-window-nav a { display: flex; align-items: baseline; gap: 7px; font: 700 13px/1.25 var(--sbg-head); color: #fff !important; text-decoration: none; white-space: nowrap; }
	.sbg-window-nav a b { font: 900 11px/1 var(--sbg-head); color: #ff6b6b; letter-spacing: .04em; }
}
@media (max-width: 899px) {
	/* Aaron, Fri 9/4: the FAQ side photo is desktop-only — on phones it just pushes the questions down. */
	.sbg .sbg-faq-photo { display: none; }
}
@media (max-width: 639px) {
	.sbg-toc-label { display: none; }
	.sbg-toc a { padding: 16px 18px; }
	.sbg-window ul { grid-template-columns: 1fr; gap: 6px; }
	.sbg-reasons li { grid-template-columns: 36px 1fr; }
	.sbg-faq summary { font-size: 16px; }
}