/* ============================================================
   Content pages — warranty.html + about.html
   Consumes the design tokens from style.css (:root).

   Prefix: .pg-*  (shared by both pages)
   Form primitives are a deliberate slim restatement of financing.css's
   .fin-* set: these two pages must not pull in 740 lines of estimator /
   progressive-reveal CSS they never use. If a third content page appears,
   consider promoting §3 into style.css rather than adding a third copy.
   ============================================================ */

body.pg-page {
    background-color: var(--bg-light);
}

.pg-sr {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   1. Hero band
   ------------------------------------------------------------
   The fixed header is `.header-container` 72px + 1px border = 73px at EVERY
   breakpoint (it does NOT shrink on mobile). The band starts at the top of the
   document and pads its CONTENT clear of the header, so the navy paints BEHIND
   the header. Keep the 73px in the PADDING, never a margin — a margin leaves a
   white strip above the band. Same pattern as .fin-hero.
   ============================================================ */
.pg-hero {
    background: linear-gradient(160deg, #0f2942 0%, #0a1118 100%);
    color: var(--text-light);
    padding: calc(73px + 56px) 24px 88px;
    text-align: center;
    position: relative;
}
.pg-hero-inner {
    max-width: 820px;
    margin: 0 auto;
}
.pg-eyebrow {
    display: inline-block;
    font-family: var(--font-headings);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--primary-light);
    margin-bottom: 14px;
}
.pg-hero h1 {
    font-family: var(--font-headings);
    font-size: clamp(2rem, 5vw, 3.15rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin-bottom: 14px;
}
.pg-hero-sub {
    color: var(--text-light-muted);
    max-width: 660px;
    margin: 0 auto;
    font-size: 1.05rem;
}
.pg-hero-sub + .pg-hero-sub { margin-top: 10px; }

.pg-chip-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 26px;
}
.pg-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 0.82rem;
    color: #dbe7f0;
}
.pg-chip svg { flex-shrink: 0; }

/* Tablet and up: the four pills are either two rows of two or one row, never
   three and one. Phones (<= 640px) have their own layout in section 11.
   641 - 899px: a 2 x 2 grid, so the wrap cannot orphan a pill. */
@media (min-width: 641px) {
    .pg-chip-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: max-content;          /* both columns = the widest pill */
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    .pg-chip { justify-content: center; }
}
/* 900px up: one row. The /warranty pills measure 233 + 197 + 156 + 206 = 792px;
   with 3 x 8px gaps the row is 816px, inside the 820px column (a 10px gap
   would make it 822px). It fits from an 864px viewport; the switch is at 900.
   nowrap: longer wording or a fallback font widens the row, it never wraps. */
@media (min-width: 900px) {
    .pg-chip-row {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        width: auto;
        gap: 8px;
    }
    .pg-chip { flex-shrink: 0; white-space: nowrap; }
}

.pg-hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 28px;
}

/* ============================================================
   2. Page shell / sections
   ============================================================ */
.pg-wrap {
    max-width: 1060px;
    margin: 0 auto;
    padding: 0 20px;
}
.pg-wrap.narrow { max-width: 860px; }

.pg-section {
    padding: 72px 0;
    /* 73px header + 14px breathing room — the canonical offset used by the
       listings filter bar, the VDP section nav and financing.css. */
    scroll-margin-top: 87px;
}
.pg-section.tight { padding: 48px 0; }
.pg-section.on-white { background: var(--bg-white); }
.pg-section.on-light { background: var(--bg-light); }
.pg-section.on-dark {
    background: var(--bg-dark);
    color: var(--text-light);
}
.pg-section + .pg-section { border-top: 1px solid var(--border-color); }
.pg-section.on-dark + .pg-section,
.pg-section + .pg-section.on-dark { border-top: 0; }

.pg-section-head {
    max-width: 720px;
    margin: 0 auto 40px;
    text-align: center;
}
.pg-section-head.left { text-align: left; margin-left: 0; }
.pg-section-head h2 {
    font-family: var(--font-headings);
    font-size: clamp(1.5rem, 3.2vw, 2.1rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--primary-dark);
    margin-bottom: 12px;
}
.pg-section.on-dark .pg-section-head h2 { color: var(--text-light); }
.pg-section-head p {
    color: var(--text-muted);
    font-size: 1rem;
}
.pg-section.on-dark .pg-section-head p { color: var(--text-light-muted); }

/* Inline links in body copy. style.css's global `a` is unstyled (it inherits),
   so without this rule a phone number or an outbound link inside a paragraph is
   indistinguishable from the text around it. */
.pg-step p a, .pg-step-tip a, .pg-feature p a, .pg-trust-item p a,
.pg-note a, .pg-success p a, .pg-section-head p a, .pg-prose a {
    color: var(--primary-link);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.pg-step p a:hover, .pg-step-tip a:hover, .pg-feature p a:hover,
.pg-trust-item p a:hover, .pg-note a:hover, .pg-success p a:hover { color: var(--primary-dark); }
.pg-section.on-dark .pg-trust-item p a:hover { color: var(--text-light); }
/* A link in a section head on the dark ground (About, "But what about
   service?": the RV Protection Plans link, plan doc 40.10). --primary-link is
   about 3:1 there; the bright brand blue is 6:1. */
.pg-section.on-dark .pg-section-head p a { color: var(--primary-light); }
.pg-section.on-dark .pg-section-head p a:hover { color: var(--text-light); }
/* The callout is amber-on-cream; the blue link fights it. */
.pg-callout a { color: #8a6100; font-weight: 700; text-decoration: underline; }

.pg-prose p { margin-bottom: 16px; color: var(--text-muted); }
.pg-prose p:last-child { margin-bottom: 0; }
.pg-prose strong { color: var(--primary-dark); font-weight: 600; }
.pg-section.on-dark .pg-prose p { color: var(--text-light-muted); }
.pg-section.on-dark .pg-prose strong { color: var(--text-light); }

/* ============================================================
   3. Form primitives (slim restatement of financing.css §"Form primitives")
   ============================================================ */
.pg-card {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 30px;
    scroll-margin-top: 87px;
}
.pg-card-head { margin-bottom: 22px; }
.pg-card-head h2 {
    font-family: var(--font-headings);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary-dark);
    letter-spacing: -0.01em;
}
.pg-card-head p {
    color: var(--text-muted);
    font-size: 0.93rem;
    margin-top: 8px;
}

.pg-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.pg-field { min-width: 0; }
.pg-field.span-2 { grid-column: 1 / -1; }
@media (max-width: 640px) {
    .pg-grid { grid-template-columns: minmax(0, 1fr); }
    .pg-field.span-2 { grid-column: auto; }
}

.pg-label {
    display: block;
    font-family: var(--font-headings);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary-dark);
    margin-bottom: 6px;
}
.pg-label .pg-req { color: #c60f13; margin-left: 2px; }
.pg-label .pg-sublabel {
    display: block;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.pg-input, .pg-textarea {
    width: 100%;
    font-family: var(--font-body);
    font-size: max(16px, 1rem);   /* 16px minimum: iOS zooms the page on focus below it (ee.css, last section) */
    color: var(--text-dark);
    background: var(--bg-white);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 11px 12px;
    min-height: 44px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    -webkit-appearance: none;
    appearance: none;
}
.pg-textarea { min-height: 110px; resize: vertical; }
.pg-input:focus, .pg-textarea:focus {
    outline: none;
    border-color: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(var(--primary-light-rgb), 0.18);
}
.pg-input::placeholder, .pg-textarea::placeholder { color: #a7adb5; }
.pg-input[name="vin_number"] { text-transform: uppercase; letter-spacing: 0.04em; }

.pg-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--text-muted);
    cursor: pointer;
    padding: 14px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-light);
}
.pg-checkbox input {
    width: 20px; height: 20px;
    margin-top: 1px;
    flex-shrink: 0;
    accent-color: var(--primary-light);
}
.pg-checkbox:has(input:checked) {
    border-color: var(--primary-light);
    background: rgba(var(--primary-light-rgb), 0.06);
}
.pg-checkbox .pg-consent-agree {
    display: block;
    margin-top: 6px;
    font-weight: 700;
    color: var(--primary-dark);
}
.pg-checkbox a { color: var(--primary-link); text-decoration: underline; }

/* Honeypot — visually hidden, never validated. */
.pg-hp {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Errors — same visual language as financing.css */
.pg-error {
    display: none;
    margin-top: 5px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #b3261e;
}
.pg-field.has-error .pg-error { display: block; }
.pg-field.has-error .pg-input,
.pg-field.has-error .pg-textarea {
    border-color: #c60f13;
    background: #fff6f6;
}
.pg-field.has-error .pg-checkbox { border-color: #c60f13; background: #fff6f6; }

.pg-error-summary {
    display: none;
    border: 1.5px solid #c60f13;
    background: #fff6f6;
    border-radius: var(--radius-sm);
    padding: 16px 18px;
    margin-bottom: 22px;
}
.pg-error-summary.is-visible { display: block; }
.pg-error-summary h3 {
    font-family: var(--font-headings);
    font-size: 0.98rem;
    color: #b3261e;
    margin-bottom: 8px;
}
.pg-error-summary ul { margin: 0; padding-left: 20px; }
.pg-error-summary li { font-size: 0.88rem; margin-bottom: 4px; }
.pg-error-summary a { color: #b3261e; text-decoration: underline; font-weight: 600; }

.pg-actions {
    margin-top: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.pg-actions .btn { flex-shrink: 0; }
.pg-actions .pg-note { margin: 0; }

.pg-note {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* Success state — replaces the form in place. */
.pg-success {
    display: none;
    text-align: center;
    padding: 20px 8px 8px;
}
.pg-success.is-visible { display: block; }
.pg-success-mark {
    width: 62px; height: 62px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: rgba(var(--primary-light-rgb), 0.12);
    color: var(--primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
}
.pg-success h2 {
    font-family: var(--font-headings);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 12px;
}
.pg-success > p {
    color: var(--text-muted);
    max-width: 520px;
    margin: 0 auto 14px;
    font-size: 0.98rem;
}
.pg-success .pg-callout { text-align: left; margin-top: 24px; }

/* ============================================================
   4. Numbered process steps (warranty)
   ============================================================ */
.pg-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
@media (max-width: 760px) {
    .pg-steps { grid-template-columns: minmax(0, 1fr); }
}
.pg-step {
    position: relative;
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 28px 26px 26px;
    box-shadow: var(--shadow-sm);
}
.pg-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--primary-dark);
    color: var(--text-light);
    font-family: var(--font-headings);
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 16px;
}
.pg-step h3 {
    font-family: var(--font-headings);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 10px;
}
.pg-step p { color: var(--text-muted); font-size: 0.95rem; }
.pg-step p + p { margin-top: 10px; }
.pg-step-tip {
    margin-top: 14px;
    padding: 12px 14px;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.87rem;
    color: var(--text-muted);
}
.pg-step-tip strong { color: var(--primary-dark); }

/* Step 2 is the one people skip — the whole warranty flow stalls there, so it
   gets the gold treatment the legacy page tried to get with bold red text. */
.pg-step.is-critical {
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 1px var(--accent-gold), var(--shadow-md);
}
.pg-step.is-critical .pg-step-num { background: var(--accent-gold); color: #171a20; }
.pg-step-flag {
    display: inline-block;
    font-family: var(--font-headings);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #8a6100;
    background: rgba(255, 193, 7, 0.22);
    border-radius: 999px;
    padding: 4px 10px;
    margin-left: 10px;
    vertical-align: middle;
}

/* ============================================================
   5. Callout (the 12-month warranty-window notice)
   ============================================================ */
.pg-callout {
    display: flex;
    gap: 16px;
    background: #fffaf0;
    border: 1px solid #f0d79a;
    border-radius: var(--radius-sm);
    padding: 20px 22px;
}
.pg-callout-icon { color: #b58100; flex-shrink: 0; margin-top: 2px; }
.pg-callout h3 {
    font-family: var(--font-headings);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8a6100;
    margin-bottom: 8px;
}
.pg-callout p {
    font-size: 0.93rem;
    color: #5a4a20;
    line-height: 1.6;
}
.pg-callout p + p { margin-top: 10px; }

/* ============================================================
   6. Trust strip (icon + claim, 3-up)
   ============================================================ */
.pg-trust-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
@media (max-width: 860px) {
    .pg-trust-strip { grid-template-columns: minmax(0, 1fr); }
}
.pg-trust-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.pg-trust-icon {
    flex-shrink: 0;
    width: 42px; height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--primary-light-rgb), 0.12);
    color: var(--primary-light);
}
.pg-section.on-dark .pg-trust-icon { background: rgba(var(--primary-light-rgb), 0.18); }
.pg-trust-item h3 {
    font-family: var(--font-headings);
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 5px;
}
.pg-section.on-dark .pg-trust-item h3 { color: var(--text-light); }
.pg-trust-item p { font-size: 0.9rem; color: var(--text-muted); }
.pg-section.on-dark .pg-trust-item p { color: var(--text-light-muted); }

/* ============================================================
   7. Stats bar (about)
   ============================================================ */
.pg-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 30px 20px;
    /* Overlaps the navy hero band. Clearance = hero padding-bottom - |pull|. */
    margin-top: -56px;
    position: relative;
    z-index: 2;
}
@media (max-width: 860px) {
    .pg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 8px; }
}
.pg-stat {
    text-align: center;
    padding: 0 12px;
    border-right: 1px solid var(--border-color);
}
.pg-stat:last-child { border-right: 0; }
@media (max-width: 860px) {
    .pg-stat:nth-child(2n) { border-right: 0; }
}
.pg-stat-num {
    display: block;
    font-family: var(--font-headings);
    font-size: clamp(1.5rem, 4vw, 2.15rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--primary-dark);
    letter-spacing: -0.02em;
}
.pg-stat-label {
    display: block;
    margin-top: 6px;
    font-size: 0.82rem;
    line-height: 1.35;
    color: var(--text-muted);
}

/* ============================================================
   8. Feature cards (why wholesale, what we sell)
   ============================================================ */
.pg-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}
/* The three "Why wholesale" cards (About): one column, then three across.
   auto-fit above gave two and one from 540 to 799px (plan doc 40). The
   two-card group below them keeps auto-fit: it can only be 1 + 1 or 2. */
.pg-cards--3 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 820px) {
    .pg-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.pg-feature {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 26px 24px;
    box-shadow: var(--shadow-sm);
}
/* no hover change: the card is not a link (owner, 2026-10-13: no card lifts) */
.pg-feature-icon {
    width: 46px; height: 46px;
    border-radius: var(--radius-sm);
    background: rgba(var(--primary-light-rgb), 0.1);
    color: var(--primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.pg-feature h3 {
    font-family: var(--font-headings);
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 8px;
}
.pg-feature p { font-size: 0.92rem; color: var(--text-muted); }

/* Simple pill list — RV types we sell */
.pg-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.pg-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    gap: 8px;
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 10px 18px;
    font-family: var(--font-headings);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--primary-dark);
    transition: var(--transition-fast);
}
a.pg-pill:hover {
    border-color: var(--primary-light);
    color: var(--primary-link);
    box-shadow: var(--shadow-sm);
}
/* Five pills, the header menu's five RV types (plan doc 40). They never
   leave one behind: a stack up to 559px, three and two (centred, on
   purpose) from 560, one row from 860. The 3 + 2 break is an empty
   full-width flex item ordered between the third and fourth pill; it is a
   line of its own, so the row gap is halved there (5 + 0 + 5 = 10px). */
@media (max-width: 559px) {
    .pg-pill-row {
        flex-direction: column;
        align-items: stretch;
        max-width: 340px;
        margin-left: auto;
        margin-right: auto;
    }
}
@media (min-width: 560px) and (max-width: 859px) {
    .pg-pill-row { gap: 5px 10px; }
    .pg-pill-row::before { content: ""; flex-basis: 100%; order: 1; }
    .pg-pill-row .pg-pill:nth-child(n+4) { order: 2; }
}
@media (min-width: 860px) {
    .pg-pill-row { flex-wrap: nowrap; }
}

/* ============================================================
   9. Split layout (visit us: hours + address)
   ============================================================ */
.pg-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;   /* the two cards are one height side by side (plan doc 40) */
}
@media (max-width: 860px) {
    .pg-split { grid-template-columns: minmax(0, 1fr); }
}
.pg-info-card {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 28px 26px;
}
.pg-info-card h3 {
    font-family: var(--font-headings);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 18px;
}

.pg-hours { list-style: none; margin: 0; padding: 0; }
.pg-hours li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.93rem;
}
.pg-hours li:last-child { border-bottom: 0; }
.pg-hours .pg-day { color: var(--text-muted); }
.pg-hours .pg-time { font-weight: 600; color: var(--primary-dark); text-align: right; }
.pg-hours li.is-charm .pg-time { color: var(--primary-link); font-style: italic; }
.pg-hours-note {
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(var(--primary-light-rgb), 0.09);
    border-radius: var(--radius-sm);
    padding: 9px 13px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary-dark);
}
.pg-tz { margin-top: 12px; font-size: 0.78rem; color: var(--text-muted); }

.pg-address {
    font-style: normal;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--text-dark);
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--border-color);
}
.pg-address strong { font-family: var(--font-headings); color: var(--primary-dark); }
.pg-contact-list { list-style: none; margin: 0 0 20px; padding: 0; }
.pg-contact-list li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 7px 0;
    font-size: 0.93rem;
}
.pg-contact-list .pg-ct-label {
    flex-shrink: 0;
    width: 88px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-family: var(--font-headings);
}
.pg-contact-list a { color: var(--primary-dark); font-weight: 600; }
.pg-contact-list a:hover { color: var(--primary-link); }

/* "Come see us" (plan doc 40). The toll-free number sits in the Hours card,
   under the line that says how late the phones are answered; the address,
   local number, fax and email stay in "Find us" (that split leaves the two
   cards within a few pixels of each other). Side by side they stretch to one
   height, and "Find us" pins its button to the bottom so any difference is
   one gap above the button, not a hole under it. */
.pg-contact-list--phones {
    margin: 16px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}
.pg-info-card--findus {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.pg-info-card--findus .pg-address,
.pg-info-card--findus .pg-contact-list { align-self: stretch; }
.pg-info-card--findus > .btn { margin-top: auto; }
/* The RVN mark, letterhead corner of "Find us": inline SVG, currentColor,
   1.378 : 1 (the faithful mark, /img/rvn-mark.svg). */
.pg-findus-mark {
    position: absolute;
    top: 26px;
    right: 26px;
    color: var(--primary-dark);
}
.pg-findus-mark svg {
    display: block;
    height: 76px;
    width: calc(76px * 1.378);
}
@media (max-width: 768px) {
    .pg-findus-mark { top: 24px; right: 22px; }
    .pg-findus-mark svg { height: 56px; width: calc(56px * 1.378); }
}
@media (max-width: 374px) {
    .pg-findus-mark svg { height: 46px; width: calc(46px * 1.378); }
}

/* ============================================================
   10. Closing CTA band
   ============================================================ */
.pg-cta-band {
    background: linear-gradient(140deg, #0f2942 0%, #0a1118 100%);
    color: var(--text-light);
    text-align: center;
    padding: 64px 24px;
}
.pg-cta-band h2 {
    font-family: var(--font-headings);
    font-size: clamp(1.5rem, 3.4vw, 2.2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
}
.pg-cta-band p {
    color: var(--text-light-muted);
    max-width: 580px;
    margin: 0 auto 26px;
}
.pg-cta-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
/* The closing band's three buttons (About): one row from 641px, never two
   and one (they wrapped that way from 641 to 705px; plan doc 40). Up to 640
   they stack, as every .pg-cta-row does (section 11). */
@media (min-width: 641px) {
    .pg-cta-row--3 { flex-wrap: nowrap; }
    .pg-cta-row--3 .btn { flex: none; white-space: nowrap; }
}
@media (min-width: 641px) and (max-width: 719px) {
    .pg-cta-row--3 .btn { padding-left: 18px; padding-right: 18px; }
}

/* ============================================================
   11. Reduced motion / mobile
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .pg-input, .pg-textarea, .pg-pill { transition: none; }
}

@media (max-width: 640px) {
    .pg-hero { padding: calc(73px + 26px) 20px 46px; }
    .pg-hero h1 { font-size: 1.75rem; line-height: 1.15; }
    .pg-hero-sub { font-size: 0.92rem; line-height: 1.5; }
    .pg-chip-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px 12px;
        margin-top: 20px;
        text-align: left;
    }
    .pg-chip {
        background: none;
        border: 0;
        border-radius: 0;
        padding: 0;
        font-size: 0.76rem;
        line-height: 1.3;
        align-items: flex-start;
        color: #cbd8e4;
    }
    .pg-chip svg { margin-top: 2px; }

    /* .btn has wide padding + uppercase text, so a min-content-wide button in a
       flex row can push the page past 375px. Let them fill the row instead. */
    .pg-hero-actions, .pg-cta-row { flex-direction: column; align-items: stretch; }
    .pg-hero-actions .btn, .pg-cta-row .btn { width: 100%; }

    .pg-wrap { padding-left: 16px; padding-right: 16px; }
    .pg-section { padding: 48px 0; }
    .pg-section.tight { padding: 36px 0; }
    .pg-section-head { margin-bottom: 28px; }
    .pg-card { padding: 22px 18px; }
    .pg-step { padding: 22px 20px; }
    .pg-stats { margin-top: -32px; padding: 24px 12px; }
    .pg-info-card { padding: 22px 18px; }
    .pg-actions { flex-direction: column; align-items: stretch; }
    .pg-actions .btn { width: 100%; }
    .pg-contact-list li { flex-direction: column; gap: 2px; }
    .pg-contact-list .pg-ct-label { width: auto; }
    .pg-cta-band { padding: 48px 20px; }
}