/* =========================================================
   JUPITER BLUE — CONTENT PAGES
   Shared design system for legal, info, support, calculator,
   FAQ, charity, blog, contact, returns etc.

   Loaded after brand.css + Nav.css + footer.css. Uses tokens
   from brand.css. Honours both customer (light) and trade (dark)
   themes — no hardcoded #fff or near-blacks.

   Design intent matches trade.css / product matrix:
   - Editorial spec-sheet aesthetic. Hairlines, not boxes.
   - Tiny ALL-CAPS wide-tracked micro-labels.
   - Display headlines, tight negative tracking, tabular numerals.
   - Orange (--jb-accent) ONLY appears on actionable controls
     (primary submit buttons, the "click me" CTAs). Never decoration.
   - Blue (--jb-blue) is restrained: focus rings, highlight rails,
     spec accents. Never used as a fill colour for big surfaces.
   - 180ms transitions, prefers-reduced-motion honoured.
   ========================================================= */


/* =========================================================
   1. PAGE HERO
   Display headline, eyebrow micro-label, lede.
   Sits on --paper-2 with a hairline base so it reads as a
   "section above the fold" without a coloured block.
   ========================================================= */
.page-hero {
    background: var(--paper-2);
    padding: 96px 40px 64px;
    border-bottom: 1px solid var(--line);
}
.page-hero > div {
    max-width: var(--container);
    margin: 0 auto;
}

/* Eyebrow is the brand wordmark — micro-anchor above every page H1.
   Identical typographic treatment to .trade-header__brand in trade.css
   so content pages feel like siblings of the matrix.

   !important across the board because Style.css historically had a
   bare .eyebrow rule that styled this as a blue pill. We're patching
   Style.css separately to remove it, but until that's deployed the
   !important here guarantees the wordmark renders correctly. */
.page-hero .eyebrow {
    display: inline-block !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    letter-spacing: var(--tracking-tight) !important;
    color: var(--ink) !important;
    margin-bottom: 32px !important;
    text-transform: none !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border: none !important;
}
.page-hero .eyebrow .accent {
    color: var(--jb-blue) !important;
}

/* Headline matches the matrix .trade-header__title h1 exactly —
   same clamp, same tracking, same 0.88 line-height. Use a <br>
   in the markup to control the break point on multi-word headlines. */
.page-hero h1 {
    font-size: clamp(3rem, 7vw, 5.6rem);
    font-weight: 800;
    letter-spacing: var(--tracking-tighter);
    line-height: 0.88;
    color: var(--ink);
    margin: 0 0 24px;
}
.page-hero h1 .accent { color: var(--jb-blue); }
.page-hero h1 .warm   { color: var(--jb-accent); }

/* Lede matches the matrix .trade-subtitle — smaller, lighter
   weight, with <strong> picking out the action/promise in ink. */
.page-hero .lede {
    max-width: 480px;
    margin: 0;
    font-size: 0.92rem;
    color: var(--ink-2);
    line-height: 1.55;
    font-weight: 400;
}
.page-hero .lede strong {
    color: var(--ink);
    font-weight: 600;
}


/* =========================================================
   2. PAGE WRAPPER
   Contains the content sections below the hero.
   ========================================================= */
.page-wrap {
    max-width: var(--container);
    margin: 56px auto 96px;
    padding: 0 40px;
    position: relative;
}
.page-wrap--wide  { max-width: var(--container); }
.page-wrap--tight { max-width: 820px; padding: 0 40px; }


/* =========================================================
   3. CONTENT CARD — workhorse panel
   Hairline-bordered, sits on --paper. Inner padding generous
   so the type hierarchy breathes.
   ========================================================= */
.content-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-page);
    padding: 40px;
    margin-bottom: 24px;
    line-height: 1.65;
    color: var(--ink-2);
}

.content-card > :first-child { margin-top: 0; }
.content-card > :last-child  { margin-bottom: 0; }

.content-card h2 {
    color: var(--ink);
    font-size: 1.6rem;
    font-weight: 800;
    margin: 40px 0 16px;
    letter-spacing: var(--tracking-tighter);
    line-height: 1.15;
}
.content-card h2:first-child { margin-top: 0; }

.content-card h3 {
    color: var(--ink);
    font-size: 1.05rem;
    font-weight: 700;
    margin: 28px 0 10px;
    letter-spacing: var(--tracking-tight);
}

.content-card p {
    margin: 0 0 16px;
    color: var(--ink-2);
}
.content-card p:last-child { margin-bottom: 0; }

.content-card ul,
.content-card ol {
    margin: 0 0 20px 0;
    padding-left: 22px;
}
.content-card li {
    margin-bottom: 8px;
    line-height: 1.6;
    color: var(--ink-2);
}
.content-card strong { color: var(--ink); font-weight: 600; }

.content-card a {
    color: var(--jb-blue);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid var(--jb-blue);
    transition: color 180ms ease, border-color 180ms ease;
}
.content-card a:hover,
.content-card a:focus-visible {
    color: var(--ink);
    border-bottom-color: var(--ink);
    outline: none;
}

/* ---- Card variants ----
   Used to break visual rhythm. The "dark" variant inverts surface
   regardless of theme — useful for setting off a key point.
   The "accent" variant lifts a card with a tinted background.
   The "cta" variant draws a heavier border for "do this" moments. */
.content-card--dark {
    background: var(--night);
    border-color: var(--night);
    color: #c8c8c8;
}
.content-card--dark h2,
.content-card--dark h3 { color: #fff; }
.content-card--dark p,
.content-card--dark li { color: #c8c8c8; }
.content-card--dark strong { color: #fff; }
.content-card--dark a {
    color: var(--jb-blue);
    border-bottom-color: var(--jb-blue);
}
.content-card--dark a:hover,
.content-card--dark a:focus-visible {
    color: #fff;
    border-bottom-color: #fff;
}

.content-card--accent {
    background: var(--paper-2);
    border-color: var(--line);
    box-shadow: inset 3px 0 0 var(--jb-blue);
}

.content-card--cta {
    background: var(--paper);
    border: 1px solid var(--ink);
    text-align: center;
    padding: 48px 40px;
}


/* =========================================================
   4. KEY-VALUE LIST — for tabular pairs (refund fees,
   spec rows, anything where left=label and right=value)
   ========================================================= */
.kv-list {
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
}
.kv-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    color: var(--ink-2);
    font-size: 0.92rem;
}
.kv-list li:last-child { border-bottom: none; }
.kv-list li strong {
    color: var(--ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums slashed-zero;
    letter-spacing: var(--tracking-tight);
}


/* =========================================================
   5. ICON CARD GRID — feature props
   No bubble. No hover-lift. Just a thin border, a quiet icon,
   and the content. The matrix idiom applied to card form.
   ========================================================= */
.icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1px;
    margin: 0 0 24px;
    background: var(--line);
    border: 1px solid var(--line);
}

.icon-card {
    background: var(--paper);
    padding: 36px 32px;
    color: var(--ink-2);
    transition: background 180ms ease;
    display: flex;
    flex-direction: column;
}
.icon-card:hover { background: var(--warm-neutral); }

/* Icon bubble — replaced with a smaller, monochrome, square-cornered
   indicator. Sits flush-left like a column header in a spreadsheet. */
.icon-card .icon-bubble {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-btn);
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.92rem;
    margin-bottom: 24px;
    transition: color 180ms ease, border-color 180ms ease;
}
.icon-card:hover .icon-bubble {
    color: var(--jb-blue);
    border-color: var(--jb-blue);
}

.icon-card h3 {
    color: var(--ink);
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 12px;
    letter-spacing: var(--tracking-tight);
    line-height: 1.25;
}

.icon-card p {
    font-size: 0.92rem;
    color: var(--ink-2);
    line-height: 1.6;
    margin: 0 0 12px;
}
.icon-card p:last-child { margin-bottom: 0; }

.icon-card ul {
    padding-left: 18px;
    margin: 8px 0 0;
    color: var(--ink-2);
}
.icon-card li { color: var(--ink-2); margin-bottom: 6px; }

/* Dark variant — inverts within the same grid */
.icon-card--dark {
    background: var(--night);
    color: #a8a8a8;
}
.icon-card--dark:hover { background: var(--night); }
.icon-card--dark h3 { color: #fff; }
.icon-card--dark p,
.icon-card--dark li { color: #a8a8a8; }
.icon-card--dark .icon-bubble {
    border-color: rgba(255, 255, 255, 0.18);
    color: #a8a8a8;
}
.icon-card--dark:hover .icon-bubble {
    color: var(--jb-blue);
    border-color: var(--jb-blue);
}


/* =========================================================
   6. NUMBERED STEPS
   Tiny tabular numeral on the left, hairline between rows.
   No coloured circles.
   ========================================================= */
.steps {
    counter-reset: step;
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
}
.steps li {
    counter-increment: step;
    position: relative;
    padding: 20px 0 20px 56px;
    border-bottom: 1px solid var(--line);
    line-height: 1.55;
    color: var(--ink-2);
}
.steps li:last-child { border-bottom: none; }
.steps li::before {
    content: counter(step, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 22px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: var(--tracking-wider);
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}
.steps li strong {
    display: block;
    color: var(--ink);
    margin-bottom: 4px;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: var(--tracking-tight);
}


/* =========================================================
   7. CALLOUT
   Restrained: left rail, no fill background. The colour of
   the rail tells you the severity.
   ========================================================= */
.callout {
    padding: 18px 0 18px 20px;
    margin: 24px 0;
    border-left: 2px solid var(--ink);
    background: transparent;
    color: var(--ink-2);
    font-size: 0.95rem;
    line-height: 1.6;
}
.callout > :first-child { margin-top: 0; }
.callout > :last-child  { margin-bottom: 0; }
.callout strong { color: var(--ink); font-weight: 600; }

.callout--warn {
    border-left-color: var(--spec-thermal-text);
}
.callout--alert {
    border-left-color: var(--spec-fire-text);
}


/* =========================================================
   8. TABLES — clean spec tables for legal pages, FAQ, etc.
   Tabular numerals, micro-uppercase headers, hairline rows.
   Same DNA as the matrix table.
   ========================================================= */
.table-clean {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
    font-size: 0.9rem;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums slashed-zero;
}
.table-clean th {
    background: transparent;
    color: var(--ink-3);
    text-align: left;
    padding: 16px 16px 14px;
    font-weight: 800;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    border-bottom: 1px solid var(--ink);
    white-space: nowrap;
}
.table-clean td {
    padding: 16px 16px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
    line-height: 1.5;
    color: var(--ink-2);
}
.table-clean td:first-child {
    color: var(--ink);
    font-weight: 600;
    letter-spacing: var(--tracking-tight);
}
.table-clean tr:last-child td { border-bottom: 1px solid var(--line); }
.table-clean tr.highlight td {
    color: var(--ink);
    font-weight: 600;
    box-shadow: inset 2px 0 0 var(--jb-blue);
}


/* =========================================================
   9. FAQ ACCORDION — native <details>, zero JS, full a11y
   Hairlines, plus/minus indicator, expansion is the only motion.
   ========================================================= */
.faq-list {
    display: flex;
    flex-direction: column;
    margin: 24px 0 0;
    border-top: 1px solid var(--line);
}

.faq-item {
    background: transparent;
    border-bottom: 1px solid var(--line);
    transition: background 180ms ease;
}
.faq-item[open] { background: var(--warm-neutral); }

.faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 22px 56px 22px 20px;
    font-weight: 600;
    color: var(--ink);
    font-size: 1rem;
    position: relative;
    letter-spacing: var(--tracking-tight);
    transition: color 180ms ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--jb-blue); }
.faq-item summary::after {
    content: '';
    position: absolute;
    right: 24px;
    top: 50%;
    width: 12px;
    height: 12px;
    transform: translateY(-50%);
    background:
        linear-gradient(currentColor, currentColor) center / 12px 1px no-repeat,
        linear-gradient(currentColor, currentColor) center / 1px 12px no-repeat;
    color: var(--ink-3);
    transition: transform 240ms var(--ease-out), color 180ms ease;
}
.faq-item[open] summary::after {
    background:
        linear-gradient(currentColor, currentColor) center / 12px 1px no-repeat;
    color: var(--jb-blue);
    transform: translateY(-50%) rotate(180deg);
}
.faq-item summary:focus-visible {
    outline: 1px solid var(--jb-blue);
    outline-offset: -1px;
}

.faq-item-body {
    padding: 0 20px 24px;
    line-height: 1.65;
    color: var(--ink-2);
}
.faq-item-body > :first-child { margin-top: 0; }
.faq-item-body > :last-child  { margin-bottom: 0; }
.faq-item-body p { margin-bottom: 12px; color: var(--ink-2); }
.faq-item-body ul { margin: 8px 0 12px 20px; }
.faq-item-body li { color: var(--ink-2); }
.faq-item-body strong { color: var(--ink); }
.faq-item-body a {
    color: var(--jb-blue);
    border-bottom: 1px solid var(--jb-blue);
    text-decoration: none;
}


/* =========================================================
   10. PAGE-LEVEL CTA BAR — strong close at the bottom
   Inverted surface (--night) regardless of theme, so the
   end-of-page summons attention. Orange primary button = "do this".
   ========================================================= */
.page-cta {
    background: var(--night);
    border-radius: var(--radius-page);
    padding: 56px 48px;
    color: #c8c8c8;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
    margin: 56px 0 24px;
}
.page-cta h2 {
    color: #fff;
    font-size: 1.7rem;
    font-weight: 800;
    margin: 0 0 8px;
    letter-spacing: var(--tracking-tighter);
    line-height: 1.15;
}
.page-cta p {
    color: #a8a8a8;
    margin: 0;
    max-width: 52ch;
    line-height: 1.5;
}
.page-cta a { color: #fff; border-bottom: 1px solid rgba(255,255,255,0.4); text-decoration: none; }
.page-cta a:hover { border-bottom-color: #fff; }


/* =========================================================
   11. BUTTONS
   - btn-primary: orange. The "do this" button. Used sparingly.
   - btn-secondary: navy fill, white text. Strong but neutral.
   - btn-ghost: thin border, paper bg, hovers to navy.

   Sizing and proportions match .trade-btn in trade.css exactly,
   so a primary button on a content page is the same component
   as the Compare button on the matrix.
   ========================================================= */
.btn-primary,
.btn-secondary,
.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--radius-btn);
    font-family: inherit;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    text-decoration: none !important;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
    white-space: nowrap;
}
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-ghost:focus-visible {
    outline: 1px solid var(--jb-blue);
    outline-offset: 2px;
}
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-ghost:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* PRIMARY = orange. The only orange thing on the page.
   Hover deepens, doesn't fly. */
.btn-primary {
    background: var(--jb-accent);
    color: #1a1a1a !important;
    border-color: var(--jb-accent);
}
.btn-primary:hover:not(:disabled),
.btn-primary:focus-visible {
    background: var(--jb-accent-deep);
    border-color: var(--jb-accent-deep);
}

/* SECONDARY = ink/navy. Confident neutral. */
.btn-secondary {
    background: var(--ink);
    color: var(--paper) !important;
    border-color: var(--ink);
}
.btn-secondary:hover:not(:disabled),
.btn-secondary:focus-visible {
    background: var(--jb-navy-hover);
    border-color: var(--jb-navy-hover);
    color: #fff !important;
}

/* GHOST = the matrix trade-btn vocabulary. Thin border at rest,
   fills navy on hover. */
.btn-ghost {
    background: transparent;
    color: var(--ink) !important;
    border-color: var(--line);
}
.btn-ghost:hover:not(:disabled),
.btn-ghost:focus-visible {
    background: var(--jb-navy-hover);
    border-color: var(--jb-navy-hover);
    color: #fff !important;
}
body[data-theme="customer"] .btn-ghost:hover:not(:disabled),
body[data-theme="customer"] .btn-ghost:focus-visible {
    background: var(--warm-neutral);
    border-color: var(--ink);
    color: var(--ink) !important;
}

/* Count badge — same component as .trade-btn .count in trade.css.
   Wrap a number in <span class="count">…</span> inside any button. */
.btn-primary .count,
.btn-secondary .count,
.btn-ghost .count {
    font-variant-numeric: tabular-nums;
    background: var(--warm-neutral);
    color: var(--ink-2);
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 700;
    min-width: 18px;
    text-align: center;
    letter-spacing: 0;
}
.btn-secondary .count,
.btn-ghost:hover:not(:disabled) .count {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}
.btn-primary .count,
.btn-primary:hover:not(:disabled) .count {
    background: rgba(26, 26, 26, 0.15);
    color: #1a1a1a;
}

/* When buttons sit inside a dark .page-cta, the ghost flips so it
   reads against the dark surface. */
.page-cta .btn-ghost {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.3);
}
.page-cta .btn-ghost:hover {
    background: #fff;
    color: var(--night) !important;
    border-color: #fff;
}


/* =========================================================
   12. LAST UPDATED PILL (legal pages)
   Micro-uppercase, just text — no pill chrome.
   ========================================================= */
.last-updated {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 800;
    color: var(--ink-3);
    margin-bottom: 32px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
}


/* =========================================================
   13. METRIC CALCULATOR — single-purpose styling
   The result is the page. Giant tabular numerals, matrix
   spec-value treatment, big and confident.
   ========================================================= */
.calc-card {
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--radius-page);
    padding: 40px;
    margin-bottom: 24px;
}

.calc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: stretch;
}

.calc-input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.calc-input-group label {
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--ink-3);
}
.calc-input-group input,
.calc-input-group select {
    width: 100%;
    padding: 14px 0;
    border: none;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--ink);
    transition: border-color 180ms ease;
    font-variant-numeric: tabular-nums slashed-zero;
}
.calc-input-group input:focus,
.calc-input-group select:focus {
    outline: none;
    border-bottom-color: var(--ink);
}

/* Result panel — the matrix's "spec value" treatment, scaled up. */
.calc-result {
    background: var(--night);
    color: #fff;
    border-radius: var(--radius-page);
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    transition: background 600ms ease;
}
.calc-result-label {
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--jb-blue);
    margin: 0 0 16px;
}
.calc-result-value {
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    font-weight: 800;
    letter-spacing: var(--tracking-tighter);
    color: #fff;
    line-height: 1;
    margin: 0 0 16px;
    font-variant-numeric: tabular-nums slashed-zero;
}
.calc-result-sub {
    font-size: 0.72rem;
    color: #a8a8a8;
    margin: 0;
    letter-spacing: var(--tracking-tight);
}


/* =========================================================
   14. PAYMENT LOGO STRIP
   Same logic as the footer: greyscaled at rest, colour on
   group-hover. Reads as credentials.
   ========================================================= */
.payment-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    align-items: center;
    padding: 8px 0;
}
.payment-strip img {
    height: 32px;
    width: auto;
    opacity: 0.5;
    filter: grayscale(1);
    transition: opacity 240ms ease, filter 240ms ease;
}
.payment-strip:hover img,
.payment-strip:focus-within img {
    opacity: 1;
    filter: grayscale(0);
}
body[data-theme="trade"] .payment-strip img {
    filter: grayscale(1) invert(0.85) brightness(1.1);
    opacity: 0.6;
}
body[data-theme="trade"] .payment-strip:hover img,
body[data-theme="trade"] .payment-strip:focus-within img {
    filter: grayscale(0) invert(0) brightness(1);
    opacity: 1;
}


/* =========================================================
   15. CHARITY FEATURE (used on Charity page)
   The most emotionally-loaded page. Kept warmer than the
   rest — image + text side by side, but still hairline-bordered.
   ========================================================= */
.charity-feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--radius-page);
    padding: 48px;
    margin-bottom: 24px;
    overflow: hidden;
}
.charity-feature__image {
    border-radius: var(--radius-data);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--paper-2);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.charity-feature__image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.charity-feature h2 {
    color: var(--ink);
    font-size: 1.8rem;
    font-weight: 800;
    margin: 0 0 14px;
    letter-spacing: var(--tracking-tighter);
    line-height: 1.1;
}
.charity-feature p {
    color: var(--ink-2);
    line-height: 1.6;
    margin: 0 0 14px;
}
.charity-feature strong { color: var(--ink); }


/* =========================================================
   16. SECTION HEADING — between cards / between groups
   Tiny eyebrow above big display headline. Hairline divider above.
   ========================================================= */
.section-heading {
    margin: 64px 0 24px;
    padding-top: 32px;
    border-top: 1px solid var(--line);
}
.section-heading h2 {
    font-size: clamp(1.8rem, 3vw, 2.2rem);
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 8px;
    letter-spacing: var(--tracking-tighter);
    line-height: 1.1;
}
.section-heading p {
    color: var(--ink-3);
    margin: 0;
    font-size: 0.95rem;
    max-width: 56ch;
    line-height: 1.5;
}


/* =========================================================
   17. FORMS — shared form-field styling
   Used by Price_Match, Contact, etc. Trade idiom — underline
   inputs, micro-uppercase labels, orange submit button.
   ========================================================= */
.form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}
.form-field label {
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--ink-3);
}
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field input[type="url"],
.form-field input[type="number"],
.form-field select,
.form-field textarea {
    padding: 12px 0;
    border: none;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    font-family: inherit;
    font-size: 1rem;
    color: var(--ink);
    transition: border-color 180ms ease;
    width: 100%;
}
.form-field textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.5;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    border-bottom-color: var(--ink);
}
.form-field input::placeholder,
.form-field textarea::placeholder {
    color: var(--ink-3);
    font-weight: 400;
}

.consent {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 8px 0 24px;
    font-size: 0.85rem;
    color: var(--ink-3);
    line-height: 1.5;
    cursor: pointer;
}
.consent input { margin-top: 4px; accent-color: var(--ink); }

/* Inline form alerts (used by Price_Match success/error states) */
.alert {
    padding: 16px 20px;
    margin-bottom: 24px;
    font-size: 0.9rem;
    border-left: 2px solid var(--ink-3);
    color: var(--ink-2);
}
.alert strong { color: var(--ink); }
.alert--success { border-left-color: var(--spec-leak-text); }
.alert--error   { border-left-color: var(--spec-fire-text); }

/* Honeypot — visually hidden but stays in the tab order is fine
   because tabindex=-1 already removes it. */
.hp-field { position: absolute; left: -9999px; }


/* =========================================================
   18. SWEETALERT2 THEMING — site-wide
   Any page that uses SweetAlert can apply this via:
       customClass: {
           popup:         'jb-swal',
           title:         'jb-swal__title',
           htmlContainer: 'jb-swal__html',
           confirmButton: 'jb-swal__btn',
       },
       buttonsStyling: false
   Theme-aware, no per-page styling needed.
   ========================================================= */
body .swal2-popup.jb-swal {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-page);
    font-family: inherit;
    padding: 2.4em 2em 1.6em;
}
body .swal2-popup.jb-swal .swal2-title.jb-swal__title {
    color: var(--ink);
    font-weight: 800;
    letter-spacing: var(--tracking-tighter);
    font-size: 1.6rem;
    line-height: 1.15;
    padding: 0;
    margin: 12px 0 16px;
}
body .swal2-popup.jb-swal .swal2-html-container.jb-swal__html {
    color: var(--ink-2);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0 0 8px;
    padding: 0 8px;
    text-align: left;
}
body .swal2-popup.jb-swal .swal2-html-container.jb-swal__html p {
    color: var(--ink-2);
    margin: 0 0 6px;
}
body .swal2-popup.jb-swal .swal2-html-container.jb-swal__html p:last-child {
    margin-bottom: 0;
}
body .swal2-popup.jb-swal .swal2-html-container.jb-swal__html strong {
    color: var(--ink);
    font-weight: 600;
}
body .swal2-popup.jb-swal .swal2-confirm.jb-swal__btn {
    background: var(--jb-accent);
    color: #1a1a1a;
    border: 1px solid var(--jb-accent);
    border-radius: var(--radius-btn);
    padding: 10px 20px;
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    box-shadow: none;
    cursor: pointer;
    transition: background 180ms ease, border-color 180ms ease;
}
body .swal2-popup.jb-swal .swal2-confirm.jb-swal__btn:hover,
body .swal2-popup.jb-swal .swal2-confirm.jb-swal__btn:focus {
    background: var(--jb-accent-deep);
    border-color: var(--jb-accent-deep);
    outline: none;
    box-shadow: none;
}
body .swal2-popup.jb-swal .swal2-loader {
    border-color: var(--jb-blue) transparent var(--jb-blue) transparent;
}


/* =========================================================
   19. RESPONSIVE
   ========================================================= */
@media (max-width: 900px) {
    .page-hero { padding: 64px 24px 48px; }
    .page-hero h1 { max-width: 100%; }
    .page-wrap { padding: 0 24px; margin: 40px auto 64px; }
    .page-wrap--tight { padding: 0 24px; }

    .content-card { padding: 32px 24px; }
    .content-card--cta { padding: 36px 24px; }

    .icon-grid { grid-template-columns: 1fr; }

    .calc-grid { grid-template-columns: 1fr; gap: 32px; }
    .calc-result { padding: 32px 24px; }

    .charity-feature {
        grid-template-columns: 1fr;
        padding: 32px 24px;
        gap: 32px;
    }
    .charity-feature__image { aspect-ratio: 16 / 9; }

    .page-cta {
        flex-direction: column;
        text-align: left;
        align-items: flex-start;
        padding: 40px 28px;
        gap: 24px;
    }

    .table-clean { font-size: 0.85rem; }
    .table-clean th,
    .table-clean td { padding: 12px 12px; }
}

@media (max-width: 560px) {
    .content-card { padding: 28px 20px; }
    .content-card h2 { font-size: 1.35rem; }

    .faq-item summary { padding: 18px 48px 18px 16px; font-size: 0.95rem; }
    .faq-item-body { padding: 0 16px 20px; }

    .section-heading { margin: 48px 0 20px; padding-top: 24px; }

    .calc-result-value { font-size: 2.2rem; }
}


/* =========================================================
   20. REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    .icon-card,
    .icon-card .icon-bubble,
    .btn-primary,
    .btn-secondary,
    .btn-ghost,
    .faq-item,
    .faq-item summary,
    .faq-item summary::after,
    .payment-strip img,
    .calc-result,
    .content-card a,
    .form-field input,
    .form-field select,
    .form-field textarea {
        transition: none !important;
    }
}