/* =====================================================================
   How To Buy — premium marketing/explainer page for Standy
   Scoped under .htb-page so it never collides with legacy site CSS.
   Palette: teal #153e4d · blue #1d6fb8 · charcoal #232628 · mist #eef4fb
   ===================================================================== */

.htb-page {
	--htb-ink: #14323f;
	--htb-ink-soft: #4a5d68;
	--htb-muted: #6b7c88;
	--htb-blue: #1d6fb8;
	--htb-blue-dk: #155a97;
	--htb-teal: #153e4d;
	--htb-charcoal: #1c2226;
	--htb-mist: #eef4fb;
	--htb-line: #e1eaf2;
	--htb-gold: #e0913a;
	--htb-radius: 16px;
	--htb-shadow: 0 18px 50px rgba(21, 62, 77, 0.10);
	--htb-shadow-sm: 0 6px 22px rgba(21, 62, 77, 0.07);

	background: #fff;
	color: var(--htb-ink);
	font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

.htb-page *,
.htb-page *::before,
.htb-page *::after {
	box-sizing: border-box;
}

.htb-page img {
	max-width: 100%;
	display: block;
}

.htb-wrap {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 22px;
}

.htb-section {
	padding: 78px 0;
}

.htb-section--tight {
	padding: 56px 0;
}

.htb-eyebrow {
	display: inline-block;
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--htb-blue);
	margin: 0 0 14px;
}

.htb-section__head {
	max-width: 720px;
	margin: 0 auto 46px;
	text-align: center;
}

.htb-h2 {
	margin: 0 0 16px;
	font-size: clamp(26px, 3.4vw, 38px);
	line-height: 1.14;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--htb-teal);
}

.htb-lead {
	margin: 0;
	font-size: clamp(15px, 1.7vw, 18px);
	line-height: 1.65;
	color: var(--htb-ink-soft);
}

/* ---------- Buttons ---------- */
.htb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 14px 26px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	white-space: nowrap;
	text-transform: none;
	letter-spacing: normal;
	font-family: inherit;
}

.htb-btn svg { width: 18px; height: 18px; }

.htb-btn--primary {
	background: var(--htb-blue);
	color: #fff;
	box-shadow: 0 10px 26px rgba(29, 111, 184, 0.32);
}
.htb-btn--primary:hover {
	background: var(--htb-blue-dk);
	color: #fff;
	transform: translateY(-2px);
	text-decoration: none;
}

.htb-btn--ghost {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.55);
}
.htb-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: #fff;
	color: #fff;
	text-decoration: none;
}

.htb-btn--dark {
	background: var(--htb-teal);
	color: #fff;
}
.htb-btn--dark:hover { background: #0f2f3b; color: #fff; transform: translateY(-2px); text-decoration: none; }

.htb-btn--outline {
	background: #fff;
	color: var(--htb-blue);
	border-color: #cfe0f0;
}
.htb-btn--outline:hover { border-color: var(--htb-blue); color: var(--htb-blue-dk); text-decoration: none; }

/* =====================================================================
   HERO
   ===================================================================== */
.htb-hero {
	position: relative;
	color: #fff;
	background: linear-gradient(125deg, #12303d 0%, #14384a 45%, #1d567f 100%);
	overflow: hidden;
}
.htb-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url('transporter1.jpg');
	background-size: cover;
	background-position: center;
	opacity: 0.14;
	mix-blend-mode: luminosity;
}
.htb-hero::after {
	content: "";
	position: absolute;
	right: -8%;
	top: -30%;
	width: 60%;
	height: 160%;
	background: radial-gradient(closest-side, rgba(29, 111, 184, 0.45), transparent 70%);
	pointer-events: none;
}
.htb-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 1140px;
	margin: 0 auto;
	padding: 96px 22px 88px;
	text-align: center;
}
.htb-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #bcd9f3;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.16);
	padding: 8px 16px;
	border-radius: 999px;
	margin-bottom: 26px;
}
.htb-hero__eyebrow svg { width: 15px; height: 15px; flex: 0 0 15px; color: #74b6ec; }
.htb-hero h1 {
	margin: 0 auto 36px;
	max-width: 940px;
	font-size: clamp(32px, 5.2vw, 60px);
	line-height: 1.06;
	font-weight: 800;
	letter-spacing: -0.025em;
	color: #fff;
}
.htb-hero h1 .htb-hl { color: #74b6ec; }
.htb-hero__sub {
	margin: 0 auto 34px;
	max-width: 660px;
	font-size: clamp(16px, 1.9vw, 19px);
	line-height: 1.6;
	color: #d7e6f4;
}
.htb-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	margin-bottom: 44px;
}
.htb-hero__trust {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 12px;
	max-width: 920px;
	margin: 0 auto;
}
.htb-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	font-weight: 600;
	color: #eaf3fb;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.14);
	padding: 9px 15px;
	border-radius: 999px;
}
.htb-chip svg { width: 16px; height: 16px; color: #7fc08a; flex: 0 0 16px; }

/* =====================================================================
   STEPS (the heart of the page)
   ===================================================================== */
.htb-steps {
	background:
		radial-gradient(ellipse 120% 70% at 50% -10%, rgba(29, 111, 184, 0.07), transparent 60%),
		#f6f9fc;
}
.htb-steps__list {
	position: relative;
	max-width: 880px;
	margin: 0 auto;
	display: grid;
	gap: 22px;
}
.htb-step {
	position: relative;
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 22px;
	background: #fff;
	border: 1px solid var(--htb-line);
	border-radius: var(--htb-radius);
	padding: 28px 30px;
	box-shadow: var(--htb-shadow-sm);
	transition: transform 0.18s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.htb-step:hover {
	transform: translateY(-3px);
	box-shadow: var(--htb-shadow);
	border-color: #cfe0f0;
}
.htb-step__num {
	position: relative;
	width: 64px;
	height: 64px;
	border-radius: 16px;
	background: linear-gradient(150deg, #1d6fb8, #14384a);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	font-weight: 800;
	box-shadow: 0 10px 22px rgba(29, 111, 184, 0.28);
}
.htb-step__num span { line-height: 1; }
.htb-step__body { min-width: 0; }
.htb-step__kicker {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--htb-blue);
	margin: 2px 0 8px;
}
.htb-step__kicker svg { width: 15px; height: 15px; }
.htb-step h3 {
	margin: 0 0 10px;
	font-size: 21px;
	font-weight: 800;
	color: var(--htb-teal);
	letter-spacing: -0.01em;
}
.htb-step p {
	margin: 0 0 12px;
	font-size: 15.5px;
	line-height: 1.62;
	color: var(--htb-ink-soft);
}
.htb-step p:last-child { margin-bottom: 0; }
.htb-step__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}
.htb-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--htb-blue-dk);
	background: var(--htb-mist);
	border: 1px solid #dceaf6;
	padding: 6px 12px;
	border-radius: 999px;
}
.htb-tag svg { width: 14px; height: 14px; }

/* =====================================================================
   FEATURE GRID (value props / vehicle package)
   ===================================================================== */
.htb-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.htb-grid--2 { grid-template-columns: repeat(2, 1fr); }
.htb-grid--4 { grid-template-columns: repeat(4, 1fr); }

.htb-feature {
	display: grid;
	grid-template-columns: 52px 1fr;
	grid-template-rows: auto auto;
	column-gap: 14px;
	row-gap: 10px;
	align-items: start;
	background: #fff;
	border: 1px solid var(--htb-line);
	border-radius: var(--htb-radius);
	padding: 22px 20px;
	box-shadow: var(--htb-shadow-sm);
	transition: transform 0.18s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.htb-feature:hover {
	transform: translateY(-3px);
	box-shadow: var(--htb-shadow);
	border-color: #cfe0f0;
}
.htb-feature__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	min-width: 52px;
	border-radius: 14px;
	background: linear-gradient(135deg, #eaf3fb, #dbeafc);
	color: var(--htb-blue);
	margin: 0;
	grid-column: 1;
	grid-row: 1;
}
.htb-feature__icon svg { width: 26px; height: 26px; }
.htb-feature h3 {
	grid-column: 2;
	grid-row: 1;
	align-self: center;
	margin: 0;
	font-size: 17px;
	font-weight: 800;
	color: var(--htb-teal);
	line-height: 1.3;
	letter-spacing: -0.01em;
}
.htb-feature p {
	grid-column: 1 / -1;
	grid-row: 2;
	margin: 0;
	font-size: 14px;
	line-height: 1.65;
	color: var(--htb-ink-soft);
}

/* =====================================================================
   SPLIT (image + text)
   ===================================================================== */
.htb-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 54px;
	align-items: center;
}
.htb-split--flip .htb-split__media { order: 2; }
.htb-split__media {
	position: relative;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: var(--htb-shadow);
	background: var(--htb-mist);
}
.htb-split__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.htb-split__media--pad {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 320px;
	padding: 40px;
	background: linear-gradient(150deg, #f3f8fc, #e6f0f9);
}
.htb-split h2 { text-align: left; }
.htb-split .htb-section__head { text-align: left; margin: 0 0 22px; }
.htb-split__body > p {
	font-size: 16px;
	line-height: 1.66;
	color: var(--htb-ink-soft);
	margin: 0 0 18px;
}

.htb-checklist {
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
	display: grid;
	gap: 12px;
}
.htb-checklist li {
	position: relative;
	padding-left: 34px;
	font-size: 15.5px;
	line-height: 1.5;
	color: var(--htb-ink);
}
.htb-checklist li strong { color: var(--htb-teal); }
.htb-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: rgba(45, 156, 90, 0.12);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d9c5a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4 10-10'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 13px 13px;
}

/* =====================================================================
   COMPARE (Bid Now vs Buy It Now)
   ===================================================================== */
.htb-compare {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
	max-width: 920px;
	margin: 0 auto;
}
.htb-compare__card {
	background: #fff;
	border: 1px solid var(--htb-line);
	border-radius: var(--htb-radius);
	padding: 30px;
	box-shadow: var(--htb-shadow-sm);
}
.htb-compare__card--accent {
	border-color: #bcd9f3;
	background: linear-gradient(180deg, #f7fbff, #fff 60%);
}
.htb-compare__tag {
	display: inline-block;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 6px 13px;
	border-radius: 999px;
	margin-bottom: 16px;
}
.htb-compare__card .htb-compare__tag { background: var(--htb-mist); color: var(--htb-blue-dk); }
.htb-compare__card--accent .htb-compare__tag { background: var(--htb-blue); color: #fff; }
.htb-compare__card h3 {
	margin: 0 0 10px;
	font-size: 22px;
	font-weight: 800;
	color: var(--htb-teal);
}
.htb-compare__card > p {
	margin: 0 0 18px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--htb-ink-soft);
}
.htb-compare__card ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 11px;
}
.htb-compare__card li {
	position: relative;
	padding-left: 28px;
	font-size: 14.6px;
	line-height: 1.5;
	color: var(--htb-ink);
}
.htb-compare__card li::before {
	content: "";
	position: absolute;
	left: 0; top: 2px;
	width: 18px; height: 18px;
	border-radius: 50%;
	background: var(--htb-mist);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d6fb8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4 10-10'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: center; background-size: 11px 11px;
}
.htb-note {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	max-width: 880px;
	margin: 24px auto 0;
	padding: 16px 20px;
	background: #fff7ec;
	border: 1px solid #f3dcb8;
	border-radius: 12px;
	font-size: 14px;
	line-height: 1.55;
	color: #6b4f25;
}
.htb-note svg { width: 20px; height: 20px; flex: 0 0 20px; color: var(--htb-gold); margin-top: 1px; }
.htb-note strong { color: #5a3f16; }

/* =====================================================================
   INSPECTION checklist band
   ===================================================================== */
.htb-inspect {
	background: var(--htb-teal);
	background-image: linear-gradient(160deg, #14384a, #102d3a);
	color: #fff;
}
.htb-inspect .htb-h2 { color: #fff; }
.htb-inspect .htb-lead { color: #cfe0ec; }
.htb-inspect__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px 28px;
	max-width: 960px;
	margin: 0 auto;
}
.htb-inspect__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 15px;
	color: #e8f1f8;
}
.htb-inspect__item svg { width: 20px; height: 20px; flex: 0 0 20px; color: #74d49a; margin-top: 1px; }
.htb-inspect__cta { text-align: center; margin-top: 40px; }

.htb-statline {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 18px 56px;
	margin: 0 auto 46px;
	max-width: 880px;
}
.htb-stat { text-align: center; }
.htb-stat__num {
	font-size: clamp(32px, 4vw, 46px);
	font-weight: 800;
	line-height: 1;
	color: #fff;
	letter-spacing: -0.02em;
}
.htb-stat__lbl {
	margin-top: 8px;
	font-size: 13.5px;
	color: #aecbe0;
	font-weight: 600;
}

/* =====================================================================
   PROTECTION band (light cards on mist)
   ===================================================================== */
.htb-soft { background: var(--htb-mist); }

/* =====================================================================
   COSTS
   ===================================================================== */
.htb-cost {
	max-width: 820px;
	margin: 0 auto;
	background: #fff;
	border: 1px solid var(--htb-line);
	border-radius: 20px;
	box-shadow: var(--htb-shadow);
	overflow: hidden;
}
.htb-cost__row {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px 28px;
	border-bottom: 1px solid var(--htb-line);
}
.htb-cost__row:last-child { border-bottom: 0; }
.htb-cost__row--in { background: #fff; }
.htb-cost__row--out { background: #fbfdff; }
.htb-cost__mark {
	width: 30px; height: 30px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	flex: 0 0 30px;
}
.htb-cost__mark svg { width: 17px; height: 17px; }
.htb-cost__mark--yes { background: rgba(45, 156, 90, 0.12); color: #2d9c5a; }
.htb-cost__mark--no { background: rgba(199, 74, 74, 0.1); color: #c74a4a; }
.htb-cost__txt { flex: 1 1 auto; }
.htb-cost__txt strong { display: block; font-size: 16px; color: var(--htb-teal); font-weight: 800; }
.htb-cost__txt span { font-size: 14px; color: var(--htb-muted); }

/* =====================================================================
   FAQ accordion
   ===================================================================== */
.htb-faq { max-width: 820px; margin: 0 auto; }
.htb-faq__item {
	background: #fff;
	border: 1px solid var(--htb-line);
	border-radius: 12px;
	margin-bottom: 12px;
	box-shadow: var(--htb-shadow-sm);
	overflow: hidden;
}
.htb-faq__q {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	text-align: left;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 20px 22px;
	font-size: 16.5px;
	font-weight: 700;
	color: var(--htb-teal) !important;
	font-family: inherit;
	text-transform: none;
	letter-spacing: normal;
}
.htb-faq__q span { color: var(--htb-teal); }
.htb-faq__q svg {
	width: 20px; height: 20px;
	flex: 0 0 20px;
	color: var(--htb-blue);
	transition: transform 0.25s ease;
}
.htb-faq__item.is-open .htb-faq__q svg { transform: rotate(45deg); }
.htb-faq__a {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
}
.htb-faq__a-inner {
	padding: 0 22px 20px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--htb-ink-soft);
}
.htb-faq__a-inner a { color: var(--htb-blue); font-weight: 600; }

/* =====================================================================
   FINAL CTA
   ===================================================================== */
.htb-final {
	position: relative;
	background: linear-gradient(125deg, #14384a 0%, #1d567f 100%);
	color: #fff;
	overflow: hidden;
}
.htb-final::after {
	content: "";
	position: absolute;
	left: -10%; bottom: -60%;
	width: 55%; height: 160%;
	background: radial-gradient(closest-side, rgba(116, 182, 236, 0.4), transparent 70%);
}
.htb-final__inner {
	position: relative;
	z-index: 1;
	max-width: 760px;
	margin: 0 auto;
	padding: 80px 22px;
	text-align: center;
}
.htb-final h2 {
	margin: 0 0 16px;
	font-size: clamp(28px, 4vw, 42px);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #fff;
}
.htb-final p {
	margin: 0 auto 32px;
	max-width: 540px;
	font-size: 17px;
	line-height: 1.6;
	color: #d7e6f4;
}
.htb-final__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
}

/* =====================================================================
   Scroll reveal
   ===================================================================== */
.htb-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.htb-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.htb-reveal { opacity: 1; transform: none; transition: none; }
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 960px) {
	.htb-grid, .htb-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.htb-inspect__grid { grid-template-columns: repeat(2, 1fr); }
	.htb-split { grid-template-columns: 1fr; gap: 32px; }
	.htb-split--flip .htb-split__media { order: 0; }
	.htb-split h2, .htb-split .htb-section__head { text-align: center; }
	.htb-split .htb-section__head { margin-left: auto; margin-right: auto; }
}

@media (max-width: 720px) {
	.htb-section { padding: 56px 0; }
	.htb-hero__inner { padding: 70px 20px 60px; }
	.htb-grid, .htb-grid--2, .htb-grid--4 { grid-template-columns: 1fr; }
	.htb-compare { grid-template-columns: 1fr; }
	.htb-inspect__grid { grid-template-columns: 1fr; gap: 0 20px; }
	.htb-step { grid-template-columns: 46px 1fr; gap: 16px; padding: 22px 18px; }
	.htb-step__num { width: 46px; height: 46px; font-size: 18px; border-radius: 12px; }
	.htb-hero__cta .htb-btn, .htb-final__cta .htb-btn { flex: 1 1 100%; }
	.htb-cost__row { padding: 16px 18px; }

	/* Compact pill tags so they don't sprawl over many rows */
	.htb-step__tags { gap: 6px; margin-top: 12px; }
	.htb-tag {
		gap: 0;
		font-size: 11.5px;
		font-weight: 600;
		padding: 4px 10px;
	}
	.htb-tag svg { display: none; }
}

@media (max-width: 420px) {
	.htb-chip { font-size: 12.5px; padding: 8px 12px; }
}