/* NewcomerFi design system — per NewcomerFi_India_to_US_Design_Guidelines.md */

:root {
    --color-brand: #13263A;
    --color-primary: #0F766E;
    --color-primary-hover: #115E59;
    --color-page: #F8FAFC;
    --color-surface: #FFFFFF;
    --color-text: #172B3A;
    --color-muted: #526176;
    --color-border: #DCE3E8;
    --color-control-border: #7C8A97;
    --color-focus: #2563EB;
    --color-success: #166534;
    --color-success-bg: #F0FDF4;
    --color-warning: #92400E;
    --color-warning-bg: #FFFBEB;
    --color-danger: #991B1B;
    --color-danger-bg: #FEF2F2;
    --color-navy: #13263A;
    --radius-card: 12px;
    --radius-control: 8px;
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.12);
}

* { box-sizing: border-box; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: "Plus Jakarta Sans", Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    margin: 0;
    color: var(--color-text);
    background: var(--color-page);
}

h1, h2, h3 { color: var(--color-brand); line-height: 1.2; font-weight: 700; }
h1 { font-size: 48px; margin: 0 0 16px; letter-spacing: -0.025em; }
h2 { font-size: 32px; margin: 40px 0 16px; letter-spacing: -0.02em; }
h3 { font-size: 22px; margin: 0 0 8px; letter-spacing: -0.01em; }
h4 { font-size: 16px; margin: 0 0 4px; }
p { margin: 0 0 16px; }
.small, .muted { color: var(--color-muted); }
.small { font-size: 14px; line-height: 1.5; }
.num { font-variant-numeric: tabular-nums; }

a { color: var(--color-primary); text-decoration: underline; }
a:hover { color: var(--color-primary-hover); }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible,
.radio-card input:focus-visible + span {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------- header ---------- */
header.site {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid var(--color-border);
    backdrop-filter: blur(8px);
    box-shadow: var(--shadow-sm);
}
header.site .bar {
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 24px;
    justify-content: space-between;
}
header.site .brand-lockup { flex: 0 0 auto; }
header.site nav {
    display: flex;
    gap: 32px;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
}
header.site nav a {
    color: var(--color-muted);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    padding: 8px 2px;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}
header.site nav a:hover { color: var(--color-primary); text-decoration: none; }
header.site nav a.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.header-cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 22px;
    background: var(--color-primary);
    color: #fff;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--shadow-md);
    transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.header-cta:hover {
    background: var(--color-primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    color: #fff;
}
header.site .menu-toggle {
    display: none;
    align-items: center;
    gap: 6px;
    background: none;
    border: 0;
    color: var(--color-text);
    font-size: 15px;
    font-weight: 500;
    padding: 8px;
    min-height: 44px;
    cursor: pointer;
}

@media (max-width: 960px) {
    header.site .bar { flex-wrap: nowrap; }
    header.site nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(255, 255, 255, 0.98);
        border-bottom: 1px solid var(--color-border);
        padding: 16px 24px;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        box-shadow: var(--shadow-md);
    }
    header.site nav.open { display: flex; animation: fadeIn 150ms ease; }
    header.site nav a {
        padding: 14px 8px;
        border-bottom: 1px solid var(--color-border);
        font-size: 16px;
    }
    header.site nav a:last-child { border-bottom: 0; }
    header.site .header-cta { display: none; }
    header.site .menu-toggle { display: inline-flex; }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------- layout ---------- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px 64px; }
.reading { max-width: 720px; }
.section { margin-top: 48px; }

/* ---------- hero ---------- */
.hero {
    margin: 0 -24px 0;
    padding: 64px 24px 56px;
    background: var(--color-brand);
    color: #fff;
}
.hero .inner { max-width: 1152px; margin: 0 auto; display: flex; gap: 48px; flex-wrap: wrap; }
.hero .text { flex: 1 1 480px; }
.hero .kicker {
    display: inline-block;
    border: 1px solid rgba(255,255,255,.35);
    color: rgba(255,255,255,.85);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 14px;
    margin-bottom: 16px;
}
.hero h1 { color: #fff; }
.hero p.lead { font-size: 18px; color: rgba(255,255,255,.88); max-width: 55ch; }
.hero .note { font-size: 14px; color: rgba(255,255,255,.7); margin-top: 16px; }
.hero .actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 24px; align-items: center; }
.hero .hero-aside { flex: 0 1 380px; }
.hero .hero-aside .card { border: 0; color: var(--color-text); }
.hero .hero-aside .card h4 { color: var(--color-brand); }
.hero.compact { padding: 48px 24px; }
.hero.compact .inner { display: block; max-width: 720px; }

/* ---------- category landing page ---------- */
.category-page .crumbs { margin: 24px 0 0; font-size: 14px; }
.category-hero {
    padding: 64px 24px 56px;
    text-align: center;
    background: var(--color-page);
}
.category-hero__inner {
    max-width: 760px;
    margin: 0 auto;
}
.category-hero h1 {
    font-size: clamp(34px, 5vw, 52px);
    margin: 0 0 16px;
}
.category-hero__lead {
    font-size: 20px;
    color: var(--color-muted);
    max-width: 62ch;
    margin: 0 auto 28px;
}
.category-buying-guide { margin: 48px auto 0; }
.category-buying-guide > h2 { margin-top: 0; font-size: 28px; scroll-margin-top: 100px; }
.category-buying-guide > h3 { margin: 28px 0 10px; font-size: 20px; }
.category-buying-guide p { line-height: 1.7; overflow-wrap: anywhere; }
.category-hero__actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.category-hero__actions .button {
    min-width: 180px;
    box-shadow: var(--shadow-md);
    transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}
.category-hero__actions .button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}
.category-hero__actions .button.secondary:hover {
    background: var(--color-surface);
}
.category-hero__note {
    font-size: 14px;
    color: var(--color-muted);
    max-width: 60ch;
    margin: 0 auto;
}

.process-section { padding: 0 24px; }
.process-section .section-heading { text-align: center; margin-bottom: 32px; }
.process-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.process-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 28px 24px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: transform 150ms ease, box-shadow 150ms ease;
}
.process-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
.step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 16px;
}
.process-card h3 { font-size: 20px; margin-bottom: 8px; }
.process-card p { color: var(--color-muted); margin: 0; }

.finder-section {
    background: var(--color-navy);
    padding: 64px 24px;
    margin: 0 -24px;
}
.finder-section__inner {
    max-width: 720px;
    margin: 0 auto;
}
.finder-card {
    background: var(--color-surface);
    border-radius: var(--radius-card);
    padding: 32px;
    box-shadow: var(--shadow-lg);
}
.finder-card__header { margin-bottom: 24px; }
.finder-card__header .eyebrow { margin: 0 0 8px; }
.finder-card__header h2 { margin: 0 0 8px; }
.finder-card__header p { margin: 0; }

.products-section {
    background: var(--color-page);
    padding: 48px 24px;
    margin: 0 -24px;
}
.products-section .section-heading { text-align: center; margin-bottom: 32px; }

.tip-section { padding: 0 24px; margin-bottom: 48px; }
.tip-card {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    max-width: 800px;
    margin: 0 auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 28px;
    box-shadow: var(--shadow-sm);
}
.tip-card__icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    color: var(--color-primary);
}
.tip-card__icon svg { width: 100%; height: 100%; }
.tip-card__content h2 { margin: 0 0 10px; font-size: 24px; }
.tip-card__content p { margin: 0 0 12px; }
.tip-card__content p:last-child { margin-bottom: 0; }

@media (max-width: 720px) {
    .process-steps { grid-template-columns: 1fr; }
    .category-hero { padding: 32px 0; }
    .category-hero__lead { font-size: 18px; margin-bottom: 20px; }
    .category-hero__actions .button { width: 100%; }
    .finder-card { padding: 24px; }
    .tip-card { flex-direction: column; gap: 12px; }
}

/* ---------- compare landing page ---------- */
.compare-hero {
    padding: 72px 24px 48px;
    text-align: center;
    background: var(--color-page);
}
.compare-hero__inner {
    max-width: 760px;
    margin: 0 auto;
}
.compare-hero .kicker {
    display: inline-block;
    border: 1px solid var(--color-border);
    color: var(--color-muted);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 14px;
    margin-bottom: 16px;
}
.compare-hero h1 {
    font-size: clamp(34px, 5vw, 52px);
    margin: 0 0 18px;
    color: var(--color-brand);
}
.compare-hero__lead {
    font-size: 20px;
    color: var(--color-muted);
    max-width: 62ch;
    margin: 0 auto 32px;
    line-height: 1.6;
}
.compare-hero__actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}
.compare-hero__actions .button { min-width: 180px; }

.process-bar {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: 32px 24px;
}
.process-bar__list {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    position: relative;
}
.process-bar__list::before {
    content: "";
    position: absolute;
    top: 26px;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    background: var(--color-border);
    z-index: 0;
}
.process-bar__list li {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    position: relative;
    z-index: 1;
}
.process-bar__icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--color-page);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-border);
}
.process-bar__icon svg { width: 24px; height: 24px; }
.process-bar__text {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text);
    max-width: 22ch;
}

.categories-section { padding-top: 64px; }
.categories-section .section-heading { text-align: center; margin-bottom: 40px; }
.category-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
}
.category-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 32px;
    text-decoration: none;
    color: var(--color-text);
    box-shadow: var(--shadow-sm);
    transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}
.category-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}
.category-card:hover h3 { color: var(--color-primary); }
.category-card__icon {
    width: 48px;
    height: 48px;
    color: var(--color-primary);
}
.category-card__icon svg { width: 100%; height: 100%; }
.category-card h3 {
    font-size: 22px;
    margin: 0;
    color: var(--color-brand);
    transition: color 150ms ease;
}
.category-card__desc {
    color: var(--color-muted);
    margin: 0;
    line-height: 1.55;
    flex: 1 1 auto;
}
.category-card__cta {
    font-weight: 600;
    color: var(--color-primary);
    margin-top: 4px;
}

.guides-section { padding-top: 64px; padding-bottom: 64px; }
.guides-section .section-heading { text-align: center; margin-bottom: 40px; }
.guides-container {
    display: grid;
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
}
.guide-group__title {
    font-size: 18px;
    color: var(--color-muted);
    margin: 0 0 14px;
    font-weight: 600;
}
.guide-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.guide-mini-card {
    display: block;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 16px 20px;
    color: var(--color-text);
    text-decoration: none;
    font-weight: 500;
    line-height: 1.45;
    box-shadow: var(--shadow-sm);
    transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
.guide-mini-card:hover {
    transform: translateY(-3px);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
    color: var(--color-primary);
}

@media (max-width: 760px) {
    .process-bar__list { grid-template-columns: repeat(2, 1fr); }
    .process-bar__list::before { display: none; }
    .category-grid { grid-template-columns: 1fr; }
    .guide-grid { grid-template-columns: 1fr; }
    .compare-hero__actions .button { width: 100%; }
}

/* ---------- homepage ---------- */
.hero.home-hero { padding: 0; }
.home-hero__inner {
    max-width: 1152px;
    margin: 0 auto;
    padding: 36px 24px;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 40px;
    align-items: center;
}
.home-hero__text { max-width: 580px; }
.home-hero .kicker {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.85);
    margin-bottom: 14px;
}
.home-hero h1 {
    color: #fff;
    margin-bottom: 18px;
    font-size: 44px;
    line-height: 1.15;
}
.home-hero .lead { color: rgba(255,255,255,.88); font-size: 17px; max-width: 54ch; margin-bottom: 24px; line-height: 1.6; }
.home-hero__actions {
    display: flex;
    gap: 24px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.home-hero__actions .button { font-size: 16px; padding: 12px 24px; }
.home-hero__link {
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,.4);
    padding-bottom: 2px;
}
.home-hero__link:hover { color: #fff; border-bottom-color: #fff; }
.home-hero__note { color: rgba(255,255,255,.7); font-size: 14px; margin: 0; }
/* Goal links remain direct destinations when JavaScript is unavailable. */
.home-goals { background: var(--color-surface); color: var(--color-text); padding: 24px; border-radius: 16px; min-width: 0; scroll-margin-top: 160px; }
.home-goals h2 { font-size: 21px; margin: 0 0 16px; }
.home-goals__choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.home-goals__choices [data-home-goal="prepare"] { grid-column: 1 / -1; }
.home-goals__choices a { display: inline-flex; align-items: center; justify-content: center; text-align: center; min-height: 44px; padding: 8px 12px; border: 1px solid var(--color-control-border); border-radius: 8px; color: var(--color-text); text-decoration: none; font-size: 14px; font-weight: 600; }
.home-goals__choices a:hover { background: #edf6f4; }
.home-goals__choices a[aria-pressed="true"] { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.home-goals__result { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-border); }
.home-goals__result p { font-size: 14px; line-height: 1.6; margin-bottom: 12px; }
.home-goals__result .button { font-size: 14px; min-height: 44px; }
.home-goals [hidden], .home-stage [hidden] { display: none !important; }
.home-stage__control { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 0 0 20px; padding: 0; border: 0; }
.home-stage__control label { position: relative; cursor: pointer; }
.home-stage__control input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.home-stage__control label span { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 16px; border: 1px solid var(--color-control-border); border-radius: 8px; background: #fff; font-size: 14px; font-weight: 600; }
.home-stage__control input:checked + span { color: #fff; border-color: var(--color-primary); background: var(--color-primary); }
.home-stage__control input:focus-visible + span { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.home-stage__clear { background: transparent; color: var(--color-primary); border: 0; text-decoration: underline; font-size: 14px; padding: 10px; }
.home-stage__clear:hover { background: #edf6f4; color: var(--color-primary-hover); }
.home-stage__guidance { display: grid; max-width: 760px; margin: 0 auto 16px; border-left: 4px solid var(--color-primary); padding: 24px; background: #edf6f4; }
.home-stage__guidance h3 { font-size: 21px; }
.home-stage > .small { text-align: center; }
.home-guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.home-guide { display: grid; padding: 20px 0; border-top: 2px solid var(--color-border); text-decoration: none; color: var(--color-text); }
.home-guide:hover { border-color: var(--color-primary); }
/* Invisible copies reserve the tallest response at each width, so choices do not move later sections. */
.home-stage__copy, .home-guide__copy { grid-area: 1 / 1; min-width: 0; }
.home-guide__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
[data-home-sizing] { visibility: hidden; pointer-events: none; }
.home-guide h3 { font-size: 20px; margin: 0; }
.home-guide p { color: var(--color-muted); font-size: 14px; margin: 0; }
.home-guide__cta { color: var(--color-primary); font-size: 14px; font-weight: 600; margin-top: auto; }
.home-methodology { border-top: 1px solid var(--color-border); margin-top: 48px !important; }
.home-methodology h2 { font-size: 24px; margin-top: 0; }
.home-methodology p { max-width: 85ch; color: var(--color-muted); font-size: 14px; }

.trust-banner {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: 24px;
}
.trust-banner__list {
    max-width: 900px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.trust-banner__list li {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 500;
    font-size: 14px;
    color: var(--color-muted);
}
.trust-banner__icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    color: var(--color-primary);
}
.trust-banner__icon svg { width: 100%; height: 100%; }

.home-categories { padding-top: 80px; }
.home-categories .section-heading { text-align: center; margin-bottom: 44px; }
.home-category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.home-category-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 28px;
    text-decoration: none;
    color: var(--color-text);
    box-shadow: 0 2px 6px rgba(19, 38, 58, 0.04);
    transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}
.home-category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(19, 38, 58, 0.08);
    border-color: var(--color-primary);
}
.home-category-card:hover h3 { color: var(--color-primary); }
.home-category-card__icon {
    width: 44px;
    height: 44px;
    color: var(--color-primary);
    background: rgba(15, 118, 110, 0.08);
    border-radius: 12px;
    padding: 8px;
}
.home-category-card__icon svg { width: 100%; height: 100%; }
.home-category-card h3 { font-size: 19px; margin: 0; transition: color 150ms ease; }
.home-category-card p { color: var(--color-muted); font-size: 14px; margin: 0; line-height: 1.55; flex: 1 1 auto; }
.home-category-card__cta { font-weight: 600; color: var(--color-primary); font-size: 14px; }

.journey-section { padding: 96px 0; }
.journey-section .section-heading { text-align: center; margin-bottom: 44px; }
.journey-timeline {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 960px;
    margin: 0 auto;
    position: relative;
}
.journey-timeline::before {
    content: "";
    position: absolute;
    top: 28px;
    left: calc(16.66% + 8px);
    right: calc(16.66% + 8px);
    height: 2px;
    background: var(--color-border);
    z-index: 0;
}
.journey-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    text-decoration: none;
    color: var(--color-text);
    box-shadow: 0 2px 6px rgba(19, 38, 58, 0.04);
    transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
    position: relative;
    z-index: 1;
}
.journey-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-primary);
    box-shadow: 0 10px 20px rgba(19, 38, 58, 0.07);
}
.journey-card:hover h3 { color: var(--color-primary); }
.journey-card__number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
}
.journey-card h3 { margin: 0; font-size: 18px; transition: color 150ms ease; }
.journey-card p { color: var(--color-muted); margin: 0; font-size: 14px; line-height: 1.55; flex: 1 1 auto; }
.journey-card__cta { font-weight: 600; color: var(--color-primary); font-size: 14px; }

.how-we-compare {
    background: rgba(15, 118, 110, 0.05);
    padding: 96px 24px;
    margin: 0 -24px 64px;
}
.how-we-compare__inner { max-width: 1000px; margin: 0 auto; }
.how-we-compare .section-heading { text-align: center; margin-bottom: 48px; }
.how-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    margin-bottom: 48px;
}
.how-row--reverse { direction: rtl; }
.how-row--reverse > * { direction: ltr; }
.how-row__text h3 { margin-bottom: 12px; }
.how-row__text p { color: var(--color-muted); line-height: 1.65; }
.how-row__graphic svg { width: 100%; max-width: 260px; height: auto; display: block; margin: 0 auto; }

@media (max-width: 900px) {
    .home-hero__inner { grid-template-columns: 1fr; text-align: left; padding: 32px 24px; }
    .home-hero__text { margin: 0 auto; }
    .home-hero__actions { justify-content: center; }
    .home-goals { width: 100%; }
    .trust-banner__list { grid-template-columns: 1fr; text-align: center; gap: 12px; }
    .trust-banner__list li { justify-content: center; }
    .home-category-grid { grid-template-columns: repeat(2, 1fr); }
    .journey-timeline { grid-template-columns: 1fr; max-width: 520px; }
    .journey-timeline::before { display: none; }
    .how-row { grid-template-columns: 1fr; gap: 24px; text-align: center; }
    .how-row--reverse { direction: ltr; }
}
@media (max-width: 560px) {
    .home-hero h1 { font-size: 34px; }
    .home-category-grid { grid-template-columns: 1fr; }
    .home-hero__actions .button { width: 100%; }
}

/* ---------- guides index ---------- */
.guides-page {
    max-width: 1120px;
    margin: 0 auto;
    padding: 40px 24px 64px;
}
.guides-hero {
    padding: 0;
    text-align: left;
    background: transparent;
}
.guides-hero__inner { max-width: 760px; }
.guides-hero h1 { margin-bottom: 8px; font-size: 44px; }
.guides-hero__lead { margin: 0; color: var(--color-muted); font-size: 18px; }
.guides-index { padding-top: 24px; }
.guides-content { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; margin-top: 24px; }
.guides-content > .guides-index { min-width: 0; padding-top: 0; }
.guides-product-sidebar { min-width: 0; }
.guides-content .guides-index__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.guides-content .guide-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.guides-content .guide-control--search { grid-column: 1 / -1; }
.guide-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px 180px;
    gap: 12px;
}
.guide-control input,
.guide-control select {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--color-control-border);
    border-radius: 10px;
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
}
.guide-control input:focus,
.guide-control select:focus {
    outline: 3px solid var(--color-focus);
    outline-offset: 1px;
}
.guide-clear {
    display: inline-block;
    margin-top: 12px;
    font-size: 14px;
    font-weight: 600;
}
.guide-results-count {
    margin: 28px 0 14px;
    color: var(--color-muted);
    font-size: 14px;
    font-weight: 600;
}
.guides-index__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.guide-card {
    display: flex;
    min-width: 0;
    min-height: 280px;
    flex-direction: column;
    padding: 24px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
    color: var(--color-text);
    text-decoration: none;
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.guide-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}
.guide-card:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
}
.guide-card__category {
    margin-bottom: 10px;
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.guide-card__title {
    display: -webkit-box;
    overflow: hidden;
    color: var(--color-text);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
.guide-card__summary {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 10px;
    color: var(--color-muted);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.guide-card__footer {
    display: flex;
    gap: 10px;
    flex-direction: column;
    align-items: flex-start;
    margin-top: auto;
    padding-top: 24px;
}
.guide-card__details { color: var(--color-muted); font-size: 12px; }
.guide-card__cta { color: var(--color-primary); font-size: 14px; font-weight: 700; }
.guide-pagination {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 32px;
}
.guide-pagination__current {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: #fff;
}
.guide-empty {
    padding: 56px 24px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    text-align: center;
}
.guide-empty h2 { margin-bottom: 8px; }
.guide-empty p { margin-bottom: 20px; color: var(--color-muted); }
@media (max-width: 900px) {
    .guides-content { grid-template-columns: minmax(0, 1fr); }
    .guides-index__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
    .guides-page { padding: 32px 16px 48px; }
    .guides-hero h1 { font-size: 36px; }
    .guide-controls, .guides-content .guide-controls { grid-template-columns: 1fr; }
    .guide-control input,
    .guide-control select { min-height: 48px; }
    .guides-index__grid { grid-template-columns: 1fr; }
    .guide-card { min-height: 0; }
}

.news-page {
    max-width: 1120px;
    margin: 0 auto;
    padding: 40px 24px 64px;
}
.news-hero {
    max-width: 820px;
    margin: 0;
    text-align: left;
}
.news-hero h1 { margin-bottom: 8px; font-size: 44px; }
.news-hero p { margin: 0; color: var(--color-muted); font-size: 18px; }
.news-feed {
    max-width: 820px;
    margin: 0 auto;
    padding-top: 24px;
}
.news-content { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; margin-top: 24px; }
.news-content > .news-feed { min-width: 0; width: 100%; max-width: none; margin: 0; padding-top: 0; }
.news-product-sidebar { min-width: 0; }
@media (max-width: 900px) {
    .news-content { grid-template-columns: minmax(0, 1fr); }
}
.news-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 200px 170px;
    gap: 12px;
    align-items: end;
}
.news-control {
    display: flex;
    gap: 6px;
    flex-direction: column;
    color: var(--color-text);
    font-size: 13px;
    font-weight: 600;
}
.news-control input,
.news-control select {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid var(--color-control-border);
    border-radius: 10px;
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-weight: 400;
}
.news-control input:focus,
.news-control select:focus {
    outline: 3px solid var(--color-focus);
    outline-offset: 1px;
}
.news-custom-dates {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.news-custom-dates[hidden] { display: none; }
.news-filter-submit { min-height: 44px; justify-self: start; }
.news-clear {
    display: inline-block;
    min-height: 44px;
    padding-top: 12px;
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 600;
}
.news-results-count {
    margin: 24px 0 12px;
    color: var(--color-muted);
    font-size: 14px;
    font-weight: 600;
}
.news-day { margin-bottom: 28px; }
.news-day > h2 {
    margin: 0 0 8px;
    color: var(--color-muted);
    font-size: 14px;
    font-weight: 700;
}
.news-list {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
}
.news-row { padding: 20px; border-bottom: 1px solid var(--color-border); }
.news-row:last-child { border-bottom: 0; }
.news-row__topic {
    display: block;
    margin-bottom: 6px;
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.news-row h3 { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.4; }
.news-row h3 a { color: var(--color-text); text-decoration: none; }
.news-row h3 a:hover,
.news-row h3 a:focus-visible { text-decoration: underline; text-decoration-color: var(--color-primary); text-underline-offset: 3px; }
.news-row h3 a:focus-visible,
.news-row__actions a:focus-visible,
.news-coverage summary:focus-visible {
    border-radius: 3px;
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
}
.news-row__meta {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin: 7px 0 0;
    color: var(--color-muted);
    font-size: 12px;
}
.news-row__summary {
    display: -webkit-box;
    overflow: hidden;
    margin: 12px 0 0;
    color: var(--color-text);
    font-size: 14px;
    line-height: 1.6;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.news-row__impact { margin: 10px 0 0; color: var(--color-muted); font-size: 13px; line-height: 1.55; }
.news-row__actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-top: 14px;
}
.news-row__actions > a,
.news-coverage summary,
.news-coverage a {
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 600;
}
.news-row__actions > a,
.news-coverage summary { min-height: 44px; padding: 12px 0; }
.news-coverage summary { cursor: pointer; }
.news-coverage ul { margin: 2px 0 0; padding-left: 18px; }
.news-coverage li { margin-top: 6px; }
.news-pagination {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 32px;
}
.news-pagination__current { border-color: var(--color-primary); background: var(--color-primary); color: #fff; }
.news-empty {
    padding: 56px 24px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    text-align: center;
}
.news-empty h2 { margin-bottom: 8px; }
.news-empty p { margin-bottom: 20px; color: var(--color-muted); }
@media (max-width: 680px) {
    .news-page { padding: 32px 16px 48px; }
    .news-hero h1 { font-size: 36px; }
    .news-controls,
    .news-custom-dates { grid-template-columns: 1fr; }
    .news-custom-dates { grid-column: auto; }
    .news-filter-submit { width: 100%; }
    .news-row { padding: 20px 16px; }
}

.news-detail-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    align-items: start;
}

.news-summary-md h3 {
    font-size: 16px;
    margin: 16px 0 8px;
    color: var(--color-text);
}

.news-summary-md p {
    margin: 0 0 12px;
}

.news-summary-md ul {
    margin: 0 0 12px 18px;
    padding: 0;
}

.news-summary-md li {
    margin-bottom: 6px;
}

@media (max-width: 760px) {
    .guides-index__grid, .guides-content .guides-index__grid { grid-template-columns: 1fr; }
    .news-detail-layout { grid-template-columns: 1fr; }
}

/* ---------- buttons ---------- */
button, .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 24px;
    background: var(--color-primary);
    color: #fff;
    border: 0;
    border-radius: var(--radius-control);
    font-size: 16px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: background 150ms;
}
button:hover, .button:hover { background: var(--color-primary-hover); color: #fff; }
button.secondary, .button.secondary {
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-control-border);
}
button.secondary:hover, .button.secondary:hover { border-color: var(--color-primary); color: var(--color-primary); }
button.danger, .button.danger { background: var(--color-danger); color: #fff; }
button.danger:hover, .button.danger:hover { background: #7f1d1d; }
button:disabled { opacity: .55; cursor: not-allowed; }
button.link-btn {
    background: none; color: var(--color-primary); padding: 0; min-height: 44px;
    text-decoration: underline; font-weight: 400;
}
.button.pill {
    border-radius: 999px;
    padding: 14px 28px;
    box-shadow: var(--shadow-md);
    transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}
.button.pill:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.button.pill.secondary:hover { background: var(--color-surface); }

/* ---------- cards & grids ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 24px;
}
.card h3 a { color: var(--color-brand); text-decoration: none; }
.card h3 a:hover { color: var(--color-primary); }
.card .provider { color: var(--color-muted); font-size: 14px; margin: 0 0 4px; }
.card .desc { color: var(--color-muted); }
.card.clickable:hover { border-color: var(--color-primary); }

/* badges */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
}
.badge.match { background: var(--color-success-bg); color: var(--color-success); }
.badge.match::before { content: "✓"; }
.badge.confirm { background: var(--color-warning-bg); color: var(--color-warning); }
.badge.confirm::before { content: "!"; font-weight: 700; }
.badge.off { background: var(--color-danger-bg); color: var(--color-danger); }
.badge.neutral { background: var(--color-page); color: var(--color-muted); border: 1px solid var(--color-border); }
.badge.sponsored { background: var(--color-surface); color: var(--color-muted); border: 1px solid var(--color-border); }
.rank { font-weight: 600; color: var(--color-brand); font-size: 16px; margin-right: 8px; }
.match-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 8px 0 12px; }
.match-meta .score { font-size: 14px; color: var(--color-muted); }

/* compare */
.compare-form { margin: 0; }
.compare-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
}
.compare-select { font-size: 14px; color: var(--color-muted); }

.results-container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 24px 16px 48px;
}
.results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}
.results-header .results-intro {
    text-align: left;
    margin: 0;
}
.results-edit-button {
    flex-shrink: 0;
}
@media (max-width: 600px) {
    .results-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}
.results-intro h1 {
    font-size: 32px;
    margin: 0 0 6px;
}
.results-intro .corridor-subtitle {
    font-size: 16px;
    color: var(--color-muted);
    margin: 0;
}

.preferences-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 12px 16px;
    margin: 16px 0 24px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: 14px;
}
.preferences-bar .pref-group strong {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-muted);
    margin-right: 4px;
}
.preferences-bar .pref-sep {
    color: var(--color-border);
    font-weight: 700;
}
.preferences-bar .link-btn {
    background: none;
    border: 0;
    color: var(--color-primary);
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    font-size: 14px;
}
.preferences-bar .link-btn:hover { text-decoration: underline; }

.answers-drawer {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    justify-content: flex-end;
}
.answers-drawer[hidden] { display: none; }
.answers-drawer__overlay {
    position: absolute;
    inset: 0;
    background: rgba(19, 38, 58, 0.35);
}
.answers-drawer__panel {
    position: relative;
    width: min(480px, 90vw);
    max-width: 100%;
    height: 100%;
    background: var(--color-surface);
    border-left: 1px solid var(--color-border);
    box-shadow: -8px 0 24px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    padding: 24px;
}
.answers-drawer__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.answers-drawer__header h2 { margin: 0; font-size: 22px; }
.answers-drawer__close {
    background: none;
    border: 0;
    font-size: 28px;
    line-height: 1;
    color: var(--color-muted);
    cursor: pointer;
}
.answers-drawer__close:hover { color: var(--color-primary); }
.answers-edit-form {
    flex: 1 1 auto;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 16px 0;
}
.answers-edit-fields {
    display: grid;
    gap: 16px;
}
.answers-edit-fields .field {
    display: grid;
    gap: 6px;
}
.answers-edit-fields label {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
}
.answers-edit-fields select {
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 15px;
    background: var(--color-surface);
    color: var(--color-text);
}
.answers-edit-fields .help {
    font-size: 12px;
    color: var(--color-muted);
}
.answers-drawer__footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
}

@media (max-width: 700px) {
    .preferences-bar {
        border-radius: 12px;
        justify-content: flex-start;
    }
    .answers-drawer__panel { width: 100%; }
}

.compare-page {
    max-width: 1280px;
    margin: 0 auto;
    padding: 32px 24px;
}
.compare-page__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
}
.compare-page__header h1 { margin: 0; font-size: 30px; line-height: 1.2; }
.compare-page__explain {
    font-size: 15px;
    color: var(--color-muted);
    margin: 6px 0 0;
}
.compare-page__header .button { flex-shrink: 0; }

.compare-diff-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--color-text);
    cursor: pointer;
    margin-bottom: 20px;
}
.compare-diff-toggle input { width: 16px; height: 16px; accent-color: var(--color-primary); }

.compare-table-wrapper {
    overflow-x: auto;
    margin-bottom: 24px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
}
.compare-table-wrapper::after {
    content: '';
    display: block;
    height: 4px;
}
.compare-table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    font-size: 14px;
    line-height: 1.5;
}
.compare-table col.label-col { width: 190px; }
.compare-table col.product-col { width: auto; }
.compare-table th, .compare-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-border);
    border-left: 1px solid #EEF2F5;
    vertical-align: top;
}
.compare-table th:first-child, .compare-table td:first-child { border-left: none; }
.compare-table .row-header {
    position: sticky;
    left: 0;
    width: 190px;
    font-weight: 500;
    color: var(--color-text);
    background: var(--color-surface);
    z-index: 1;
}
.compare-table tbody tr:last-child td { border-bottom: none; }

.compare-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--color-surface);
    padding-bottom: 16px;
}
.compare-table thead th:first-child { z-index: 3; }
.compare-table .section-header th {
    background: #E6F4F3;
    color: var(--color-text);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
}
.compare-table tr.is-same { display: none; }
.compare-table .not-confirmed { color: var(--color-muted); font-style: normal; }

.compare-product-head {
    display: grid;
    grid-template-rows: auto auto 1fr auto auto;
    align-items: start;
    text-align: left;
    gap: 4px;
    min-height: 150px;
}
.compare-product-head .provider {
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 600;
}
.compare-product-head .pname {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}
.compare-product-head .differentiator {
    font-size: 13px;
    color: #334155;
    line-height: 1.4;
    margin: 4px 0 8px;
}
.compare-product-head .button.small {
    justify-self: start;
    height: 40px;
    padding: 0 16px;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
}
.compare-product-head .official-link {
    font-size: 12px;
    margin-top: 4px;
}

.compare-sources { font-size: 13px; }
.compare-sources .reviewed { margin: 0 0 6px; color: var(--color-muted); }
.compare-sources__details summary { cursor: pointer; font-size: 12px; color: var(--color-primary); }
.compare-sources__details ul { margin: 6px 0 0; padding-left: 18px; }

.cell-content {
    display: block;
}
.cell-truncate {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cell-truncate.is-expanded {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}
.cell-expand {
    display: inline-block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--color-primary);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
}

.quote-controls {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.quote-controls label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.quote-controls input, .quote-controls select { padding: 8px 10px; border: 1px solid var(--color-control-border); border-radius: var(--radius-control); }

.compare-mobile-swap { display: none; }

@media (max-width: 680px) {
    .compare-page { padding: 24px 16px; }
    .compare-page__header { flex-direction: column; gap: 12px; }
    .compare-page__header h1 { font-size: 26px; }

    .compare-mobile-swap {
        display: flex;
        gap: 8px;
        align-items: center;
        margin-bottom: 16px;
        flex-wrap: wrap;
    }
    .compare-mobile-swap label { display: flex; align-items: center; gap: 8px; }
    .compare-mobile-swap select {
        padding: 8px 10px;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-control);
        background: var(--color-surface);
        font-size: 13px;
    }

    .compare-table-wrapper {
        overflow-x: auto;
        border-radius: 12px;
        position: relative;
    }
    .compare-table-wrapper::before {
        content: '← Scroll to compare →';
        position: absolute;
        top: 8px;
        right: 8px;
        font-size: 11px;
        color: var(--color-muted);
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: 4px;
        padding: 4px 8px;
        pointer-events: none;
        z-index: 4;
    }
    .compare-table { min-width: 680px; }
    .compare-table .row-header { width: 160px; }
}

@media (min-width: 681px) and (max-width: 900px) {
    .compare-table { font-size: 13px; }
    .compare-table th, .compare-table td { padding: 12px 14px; }
}

/* disclosure */
.disclosure {
    background: var(--color-warning-bg);
    border: 1px solid #F5E3B3;
    border-radius: var(--radius-card);
    padding: 16px;
    font-size: 14px;
    color: var(--color-warning);
    margin: 24px 0;
}
.disclosure a { color: var(--color-warning); }

/* fact table */
.facts { border-collapse: collapse; margin: 8px 0; width: 100%; }
.facts td { padding: 4px 16px 4px 0; font-size: 15px; vertical-align: top; }
.facts td:first-child { color: var(--color-muted); white-space: nowrap; }
.facts td:last-child { font-variant-numeric: tabular-nums; }
.not-confirmed { color: var(--color-muted); font-style: italic; }

/* ---------- questionnaire ---------- */
.qform {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 24px;
    max-width: 680px;
}
.qform h2 { margin-top: 0; }
.qform-inner { max-width: 640px; }
.qform .legend { display: block; margin: 0 0 8px; font-weight: 600; font-size: 18px; color: var(--color-brand); }
.qform .help { display: block; color: var(--color-muted); font-size: 14px; margin-bottom: 12px; }
.qform input[type=email], .qform input[type=text], input[type=email], input[type=text] {
    padding: 12px;
    width: 100%;
    max-width: 30rem;
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-control);
    font-size: 16px;
    background: #fff;
    color: var(--color-text);
}
.form-field { display: grid; gap: 7px; margin-bottom: 20px; }
.form-field label { color: var(--color-brand); font-weight: 600; }
select, textarea, .finder-card select, .finder-card textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-control);
    background: #fff;
    color: var(--color-text);
    font: inherit;
}
select:focus, textarea:focus { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.qform textarea { resize: vertical; min-height: 140px; }
.correction-layout { display: grid; grid-template-columns: minmax(0, 680px) minmax(260px, 360px); gap: 32px; align-items: start; margin-top: 32px; }
.correction-form { max-width: none; }
.correction-aside { position: sticky; top: 96px; }
.correction-aside h2 { margin-top: 4px; }
.errors { color: var(--color-danger); margin-top: 12px; font-weight: 500; }
.error-summary {
    background: var(--color-danger-bg);
    border: 1px solid var(--color-danger);
    border-radius: var(--radius-control);
    color: var(--color-danger);
    padding: 12px 16px;
    margin-bottom: 16px;
}
.qnav { display: flex; gap: 16px; margin-top: 24px; align-items: center; }
.qprogress { font-size: 14px; color: var(--color-muted); margin-bottom: 8px; }

/* radio option cards */
.radio-group { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.radio-card { display: block; }
.radio-card input {
    position: absolute; opacity: 0; width: 1px; height: 1px;
}
.radio-card > span {
    display: block;
    padding: 12px 16px;
    border: 1.5px solid var(--color-control-border);
    border-radius: var(--radius-control);
    background: var(--color-surface);
    cursor: pointer;
    min-height: 48px;
    font-size: 16px;
    transition: border-color 120ms, background 120ms;
}
.radio-card:hover > span { border-color: var(--color-primary); }
.radio-card input:checked + span {
    border-color: var(--color-primary);
    background: var(--color-success-bg);
    font-weight: 500;
}
.radio-card input:checked + span::before { content: "✓ "; color: var(--color-primary); }

/* product cards */
.product-card .provider {
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0 0 4px;
}
.product-card .desc { margin-bottom: 16px; }
.fact-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.fact-pills .pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-page);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 14px;
}
.fact-pills .pill-label { color: var(--color-muted); }
.fact-pills .pill-value { font-weight: 500; color: var(--color-text); }
.product-card .button { width: 100%; margin-top: 4px; }

.category-product-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.category-card {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 24px;
    box-shadow: 0 2px 6px rgba(19, 38, 58, 0.04);
    transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}
.category-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(19, 38, 58, 0.08);
    border-color: var(--color-primary);
}
.category-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: var(--color-muted);
    margin-bottom: 10px;
}
.category-card__provider { font-weight: 600; color: var(--color-text); }
.compare-select--top { margin-left: auto; }
.category-card__title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.category-card__title h3 {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
}
.category-card__title h3 a { text-decoration: none; color: var(--color-brand); }
.category-card__title h3 a:hover { color: var(--color-primary); }
.category-card__type {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-primary);
    background: rgba(15, 118, 110, 0.08);
    padding: 3px 8px;
    border-radius: 999px;
}
.category-card__benefit {
    font-size: 15px;
    color: var(--color-muted);
    line-height: 1.5;
    margin: 0 0 20px;
}
.category-card[id] { scroll-margin-top: 100px; }
.product-decision { margin: 0 0 20px; padding: 14px; border: 1px solid var(--color-border); border-left: 3px solid var(--color-primary); border-radius: 8px; background: var(--color-page); overflow-wrap: anywhere; }
.product-decision p { margin: 0; font-size: 13px; line-height: 1.55; }
.product-decision .product-decision__heading { margin-bottom: 8px; color: var(--color-primary); font-size: 14px; font-weight: 700; }
.product-decision .product-decision__badge { display: inline-block; margin-bottom: 10px; padding: 4px 8px; border-radius: 6px; background: var(--color-primary); color: white; font-size: 12px; font-weight: 700; }
.product-decision__reasons p + p { margin-top: 6px; }
.product-decision .product-decision__tradeoff { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-border); color: var(--color-muted); }
.product-decision__ranking { margin-top: 10px; font-size: 12px; }
.product-decision__ranking summary { min-height: 32px; cursor: pointer; color: var(--color-primary); }
.product-decision__ranking p { font-size: 12px; }
.product-shortlist { margin: 24px 0; min-width: 0; }
.product-shortlist > h2 { margin: 0 0 8px; font-size: 22px; }
.product-shortlist__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.product-shortlist__card { min-width: 0; padding: 20px; border: 1px solid var(--color-border); border-top: 3px solid var(--color-primary); border-radius: 12px; background: var(--color-surface); overflow-wrap: anywhere; }
.product-shortlist__card h3 { margin: 8px 0 12px; font-size: 19px; }
.product-shortlist__card p { margin: 0 0 10px; font-size: 13px; line-height: 1.55; }
.product-shortlist__card p:last-child { margin-bottom: 0; }
.product-shortlist__card .product-shortlist__label { margin-bottom: 6px; color: var(--color-primary); font-size: 14px; font-weight: 700; }
.product-shortlist__card .small { color: var(--color-muted); font-size: 12px; }
.product-shortlist__card .product-shortlist__toggle,
.product-decision .product-decision__toggle { font-size: 10px; }
.category-page > .product-shortlist { margin: 28px 0; }
.category-scenarios { margin: 24px 0; }
.category-scenarios h2 { font-size: 22px; margin: 0 0 12px; }
.category-scenarios__links { display: flex; flex-wrap: wrap; gap: 10px; }
.category-scenarios__links a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 14px; border: 1px solid var(--color-control-border); border-radius: var(--radius-control); background: var(--color-surface); font-size: 14px; font-weight: 600; text-decoration: none; }
.category-scenarios__links a:is(:hover, [aria-current="true"]) { background: var(--color-brand); color: #fff; border-color: var(--color-brand); }
.category-scenarios [data-scenario-status]:empty { display: none; }
.category-decision-help { display: grid; grid-template-columns: 1fr 1.4fr; gap: 24px; padding: 20px; margin: 24px 0; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); }
.category-decision-help h2 { font-size: 20px; margin: 0 0 10px; }
.category-decision-help details + details { margin-top: 12px; }
.category-decision-help summary { min-height: 44px; cursor: pointer; font-weight: 600; }
.category-decision-help details p { font-size: 14px; line-height: 1.6; }
.category-facts { min-width: 0; margin: 24px 0; }
.category-facts > summary { cursor: pointer; padding: 12px 0; font-size: 20px; font-weight: 700; }
.category-facts__scroll { max-height: 460px; overflow: auto; border: 1px solid var(--color-border); border-radius: var(--radius-control); }
.category-facts table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 13px; }
.category-facts :is(th, td) { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-border); min-width: 120px; max-width: 280px; overflow-wrap: anywhere; }
.category-facts thead th { position: sticky; top: 0; background: var(--color-surface); z-index: 1; }
.category-facts th[scope="row"] { min-width: 180px; }
.category-facts th span { display: block; color: var(--color-muted); font-size: 12px; font-weight: 400; margin-top: 4px; }
.category-page #products { scroll-margin-top: 100px; }
.category-trust { margin: 20px 0; padding: 16px; border-left: 3px solid var(--color-primary); background: var(--color-surface); }
.category-trust p { margin: 0; }
.category-criteria { margin: 24px 0; padding: 20px; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); }
.category-criteria summary { cursor: pointer; }
.category-criteria summary h2 { display: inline; margin: 0; font-size: 22px; }
.category-criteria details[open] > summary { margin-bottom: 12px; }
.category-criteria ul { margin: 0 0 12px; padding-left: 20px; }
.category-criteria li { margin-bottom: 8px; font-size: 14px; }
.category-criteria p:last-child { margin-bottom: 0; }
.product-evidence { margin: 12px 0; overflow-wrap: anywhere; }
.start-here { padding-top: 32px; }
.start-here__intro { margin-bottom: 24px; }
.start-here__intro h1 { font-size: clamp(32px, 5vw, 48px); }
.journey-customizer { padding: 20px; margin-bottom: 24px; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); }
.journey-customizer > summary { min-height: 44px; font-weight: 700; cursor: pointer; }
.journey-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 16px 0; }
.journey-customizer label { display: grid; gap: 6px; font-size: 14px; }
.journey-customizer select { width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid var(--color-control-border); border-radius: var(--radius-control); background: var(--color-surface); font: inherit; }
.journey-customizer .journey-transfer-toggle { display: flex; align-items: center; gap: 10px; margin: 16px 0; }
.journey-customizer input[type="checkbox"] { width: 20px; height: 20px; }
.journey-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.journey-status:empty, .journey-personal-note:empty { display: none; }
.newcomer-path { list-style: none; display: grid; gap: 20px; padding: 0; margin: 24px 0; }
.newcomer-path > li { padding: 24px; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); scroll-margin-top: 100px; }
.newcomer-path h2 { margin: 0 0 12px; font-size: 26px; }
.newcomer-path [aria-current], .newcomer-path > li[aria-current="step"] { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.newcomer-path p.small { margin: 12px 0 0; }
.journey-personal-note { padding: 12px; background: var(--color-success-bg); border-radius: var(--radius-control); font-size: 14px; }
.journey-context { padding: 20px; margin: 20px 0; border: 1px solid var(--color-primary); border-radius: var(--radius-card); }
.start-here [hidden], .journey-context[hidden] { display: none !important; }
@media (max-width: 700px) {
    .journey-fields { grid-template-columns: 1fr; }
    .journey-customizer, .newcomer-path > li { padding: 16px; }
}
.remittance-destination-form { margin: 20px 0; padding: 20px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.remittance-destination-form > label { display: block; margin-bottom: 8px; font-weight: 700; }
.remittance-destination-form__controls { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.remittance-destination-form select { flex: 1 1 220px; min-width: 0; min-height: 44px; width: 100%; padding: 10px 12px; font: inherit; }
.remittance-destination-form p { margin: 0; }
@media (max-width: 700px) {
    .category-decision-help { grid-template-columns: 1fr; gap: 12px; padding: 16px; }
    .category-scenarios__links a { flex: 1 1 180px; }
}

.category-card__cost-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
    padding: 16px;
    background: var(--color-page);
    border: 1px solid var(--color-border);
    border-radius: 12px;
}
.category-card__cost-grid > div { display: flex; flex-direction: column; gap: 4px; }
.cost-label {
    font-size: 12px;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.cost-value {
    font-size: 17px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.3;
}

.category-card__facts {
    margin: 0 0 20px;
    display: grid;
    gap: 12px;
}
.category-card__facts > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border);
}
.category-card__facts > div:last-child { border-bottom: none; padding-bottom: 0; }
.category-card__facts dt {
    font-size: 13px;
    color: var(--color-muted);
    margin: 0;
}
.category-card__facts dd {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
    text-align: right;
}

.category-card__section {
    margin: 0 0 16px;
}
.category-card__section h4 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted);
    margin: 0 0 5px;
}
.category-card__section p {
    font-size: 14px;
    color: var(--color-text);
    line-height: 1.5;
    margin: 0;
}
.category-card__reward-main {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 4px;
}
.category-card__reward-conditions {
    font-size: 13px;
    color: var(--color-muted);
    margin: 0;
    line-height: 1.45;
}

.category-card__catch { background: rgba(245, 158, 11, 0.06); border-left: 3px solid var(--color-warning); border-radius: 0 8px 8px 0; padding: 12px; margin: 0 0 16px; }
.category-card__catch h4 { color: var(--color-warning); }
.category-card__footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
    flex-wrap: wrap;
}
.category-card__footer .button { flex: 1 1 auto; text-align: center; }
.not-confirmed { color: var(--color-muted); font-weight: 400; }

@media (max-width: 580px) {
    .category-card__cost-grid { grid-template-columns: 1fr; }
    .category-card__title { flex-direction: column; gap: 6px; }
}

/* Product options: a compact identity, quiet decision panel and scannable facts. */
.product-option-card,
.remittance-card.product-option-card {
    min-width: 0;
    padding: 22px;
    border-radius: 18px;
    border-color: #d5e0e3;
    border-top: 3px solid var(--color-brand);
    box-shadow: 0 4px 18px rgba(19, 38, 58, 0.045);
    overflow-wrap: anywhere;
}
.product-option-card:hover,
.remittance-card.product-option-card:hover {
    transform: none;
    border-color: #9fbdb9;
    border-top-color: var(--color-primary);
    box-shadow: 0 8px 24px rgba(19, 38, 58, 0.08);
}
.product-option-card:focus-within { border-color: var(--color-primary); }
.product-option-card__identity { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.product-option-card__identity .category-card__header { order: 2; flex: 0 0 auto; margin: 0; }
.product-option-card__identity .category-card__title { flex: 1; min-width: 0; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0; }
.product-option-card .category-card__title :is(h2, h3) { font-size: 21px; line-height: 1.35; letter-spacing: -0.45px; }
.product-option-card .category-card__type {
    order: -1;
    padding: 0;
    background: none;
    border-radius: 0;
    font-size: 10px;
    letter-spacing: 0.1em;
}
.product-option-card .compare-select--top { margin: 0; font-size: 11px; }
.product-option-card .product-decision {
    margin: 0 0 18px;
    padding: 14px 16px;
    border: 0;
    border-radius: 10px;
    background: #f0f6f5;
}
.product-option-card .product-decision__heading { font-size: 13px; line-height: 1.5; }
.product-option-card .product-decision p { font-size: 12px; line-height: 1.65; }
.product-option-card .product-decision__tradeoff { border-top-color: #d6e5e1; }
.product-option-card .product-decision__toggle { font-size: 10px; min-height: 32px; }
.product-option-card .category-card__cost-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin-bottom: 18px;
    padding: 0;
    background: none;
    border-radius: 10px;
    overflow: hidden;
}
.product-option-card .category-card__cost-grid > div { min-width: 0; padding: 14px 12px; gap: 6px; }
.product-option-card .category-card__cost-grid > div:nth-child(even) { border-left: 1px solid var(--color-border); }
.product-option-card .category-card__cost-grid > div:nth-child(n+3) { border-top: 1px solid var(--color-border); }
.product-option-card .cost-label { font-size: 10px; line-height: 1.5; letter-spacing: 0.025em; }
.product-option-card .cost-value { font-size: 17px; line-height: 1.45; font-variant-numeric: tabular-nums; }
.product-option-card .cost-value .not-confirmed { font-size: 13px; }
.product-option-card .category-card__facts { gap: 0; margin-bottom: 18px; }
.product-option-card .category-card__facts > div { padding: 11px 0; }
.product-option-card .category-card__facts > div:last-child { padding-bottom: 11px; }
.product-option-card .category-card__facts dd { font-variant-numeric: tabular-nums; }
.product-option-card .category-card__section { margin-bottom: 16px; }
.product-option-card .category-card__section h4 { font-size: 10px; letter-spacing: 0.09em; margin-bottom: 6px; }
.product-option-card .category-card__section p { font-size: 12px; line-height: 1.7; }
.product-option-card > .bc-flip { margin: 0 0 16px; }
.product-option-card .bc-trigger { font-size: 12px; border-color: var(--color-border); border-radius: 8px; }
.product-option-card .category-card__footer,
.compare-tool .product-option-card .category-card__footer { flex-direction: row; align-items: stretch; gap: 8px; padding-top: 16px; }
.product-option-card .category-card__footer > * { flex: 1 1 120px; min-width: 0; }
.product-option-card .category-card__footer .button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 12px;
    background: var(--color-brand);
    border-color: var(--color-brand);
    color: white;
}
.product-option-card .category-card__footer .button:hover { background: var(--color-primary); border-color: var(--color-primary); }
.product-option-card .compare-add > span { height: 100%; font-size: 12px; padding: 10px 8px; }
.product-option-card__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 580px) {
    .product-option-card,
    .remittance-card.product-option-card { padding: 18px; border-radius: 14px; }
    .product-option-card .category-card__title :is(h2, h3) { font-size: 20px; }
}

/* ---------- secured card product detail ---------- */
.secured-card-detail { padding: 24px 0 64px; }
.secured-card-detail__layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 32px;
    align-items: start;
}
.secured-card-detail__main {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 32px;
}
.secured-card-detail__header {
    margin-bottom: 24px;
}
.secured-card-detail__issuer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    font-size: 15px;
    color: var(--color-muted);
}
.issuer-logo {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-page);
    border: 1px solid var(--color-border);
    display: inline-block;
}
.issuer-name { font-weight: 600; color: var(--color-text); }
.secured-card-detail__title {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.secured-card-detail__title h1 {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}
.secured-card-detail__label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-primary);
    background: rgba(15, 118, 110, 0.08);
    padding: 4px 10px;
    border-radius: 999px;
}
.secured-card-detail__lead {
    font-size: 17px;
    color: var(--color-muted);
    line-height: 1.55;
    margin: 0;
    max-width: 70ch;
}
.secured-card-detail__facts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}
.secured-card-detail__facts > div {
    background: var(--color-page);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.secured-card-detail__facts .fact-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-muted);
}
.secured-card-detail__facts .fact-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.3;
}
.secured-card-detail__section {
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--color-border);
}
.secured-card-detail__section:last-of-type { border-bottom: none; padding-bottom: 0; }
.secured-card-detail__section h2 {
    font-size: 22px;
    margin: 0 0 16px;
}
.secured-card-detail__aside {
    position: sticky;
    top: 96px;
}
.action-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
    display: grid;
    gap: 12px;
}
.action-panel .button { text-align: center; }
.action-panel .button.secondary { background: transparent; color: var(--color-primary); border: 1px solid var(--color-primary); }
.action-panel .button.secondary:hover { background: rgba(15, 118, 110, 0.06); }
.action-panel p { margin: 0; }
.secured-card-detail__mobile-actions {
    display: none;
    margin-bottom: 32px;
}
.rewards-table,
.fees-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 12px;
}
.rewards-table th,
.rewards-table td,
.fees-table th,
.fees-table td {
    text-align: left;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
    font-size: 15px;
}
.rewards-table th,
.fees-table th {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-muted);
    font-weight: 600;
    background: var(--color-page);
}
.rewards-table td:last-child,
.fees-table td:last-child { font-weight: 600; }
.rewards-note {
    font-size: 14px;
    color: var(--color-muted);
    margin: 12px 0 0;
    line-height: 1.5;
}
.check-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: grid;
    gap: 10px;
}
.check-list li {
    position: relative;
    padding-left: 26px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--color-text);
}
.check-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: 700;
}
.accordion-group { display: grid; gap: 10px; }
.accordion {
    background: var(--color-page);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 0 16px;
}
.accordion summary {
    cursor: pointer;
    padding: 14px 0;
    font-weight: 600;
    font-size: 15px;
    color: var(--color-text);
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
    content: "+";
    font-size: 20px;
    color: var(--color-primary);
}
.accordion[open] summary::after { content: "−"; }
.accordion > :not(summary) {
    padding-bottom: 16px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--color-muted);
    margin: 0;
}

@media (max-width: 900px) {
    .secured-card-detail__layout { grid-template-columns: 1fr; }
    .secured-card-detail__aside { display: none; }
    .secured-card-detail__mobile-actions { display: grid; gap: 12px; }
    .secured-card-detail__facts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
    .secured-card-detail__main { padding: 24px; }
    .secured-card-detail__title h1 { font-size: 26px; }
    .secured-card-detail__facts { grid-template-columns: 1fr; }
}

.results-intro h1 { font-size: 34px; margin-bottom: 6px; }
.results-intro p { color: var(--color-muted); margin: 0; }

.results-grid--remittance {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.results-grid--remittance {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.remittance-card {
    display: flex;
    flex-direction: column;
    padding: 20px;
    border-radius: 16px;
    gap: 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: 0 1px 3px rgba(19, 38, 58, 0.05);
    transition: box-shadow 150ms ease, transform 150ms ease;
}
.remittance-card:hover {
    box-shadow: 0 6px 16px rgba(19, 38, 58, 0.08);
    transform: translateY(-2px);
}
.remittance-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}
.remittance-card__identity {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.provider-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-brand);
}
.confidence {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-primary);
    background: rgba(15, 118, 110, 0.08);
    padding: 3px 8px 3px 4px;
    border-radius: 999px;
}
.confidence__bar {
    display: inline-block;
    height: 6px;
    min-width: 6px;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.35;
}
.confidence__text { line-height: 1; }

.remittance-card__fee {
    background: rgba(15, 118, 110, 0.06);
    margin: 0 -20px;
    padding: 14px 20px;
}
.remittance-card__label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-muted);
    font-weight: 700;
    margin: 0 0 6px;
}
.remittance-card__fee-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.35;
    margin: 0;
}

.remittance-card__rows,
.remittance-card__rows dl,
.remittance-card__rows dt,
.remittance-card__rows dd {
    margin: 0;
}
.remittance-card__rows {
    display: grid;
    gap: 0;
}
.remittance-card__row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 12px;
    align-items: baseline;
    padding: 11px 0;
    border-bottom: 1px solid var(--color-border);
}
.remittance-card__row:last-child { border-bottom: none; }
.remittance-card__row dt {
    font-size: 13px;
    color: var(--color-muted);
    font-weight: 500;
    line-height: 1.4;
}
.remittance-card__row dd {
    font-size: 16px;
    color: var(--color-text);
    line-height: 1.45;
}
.remittance-card__row dd .not-confirmed { color: var(--color-muted); }

.fact-tags {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.fact-tags li {
    font-size: 13px;
    color: var(--color-text);
    background: var(--color-page);
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid var(--color-border);
}

.remittance-card__restriction {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: var(--color-warning);
    background: var(--color-warning-bg);
    border-left: 3px solid var(--color-warning);
    padding: 10px 12px;
    border-radius: 0 8px 8px 0;
    margin: 0;
    line-height: 1.45;
}
.warn-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin-top: 1px;
}
.remittance-card__footer {
    margin-top: auto;
    padding-top: 4px;
}
.remittance-card__reviewed {
    font-size: 12px;
    color: var(--color-muted);
    margin: 0;
}
.remittance-card__reviewed a { color: var(--color-muted); font-weight: 500; }
.remittance-card__reviewed a:hover { color: var(--color-primary); }

.compare-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.compare-count {
    font-size: 14px;
    color: var(--color-muted);
}

@media (max-width: 900px) {
    .results-grid--remittance { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
    .results-grid--remittance { grid-template-columns: 1fr; }
    .results-intro h1 { font-size: 28px; }
    .remittance-card__row {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}

/* review list */
.review-list { margin: 0; padding: 0; list-style: none; }
.review-list li {
    display: flex; justify-content: space-between; gap: 16px;
    padding: 10px 0; border-bottom: 1px solid var(--color-border);
}
.review-list .edit { white-space: nowrap; }

/* step chips */
.steps { display: flex; gap: 12px; flex-wrap: wrap; margin: 16px 0 32px; padding: 0; list-style: none; }
.steps li {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 14px;
    color: var(--color-muted);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}
.steps li b { color: var(--color-primary); margin-right: 6px; }

/* guide list */
.guide-list { list-style: none; padding: 0; margin: 0; }
.guide-list li { margin: 8px 0; }
.guide-list a {
    display: block;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 14px 18px;
    text-decoration: none;
    color: var(--color-text);
    font-weight: 500;
    min-height: 44px;
}
.guide-list a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.guide-list a::after { content: " →"; color: var(--color-primary); }

/* checklist preview */
.checklist { list-style: none; padding: 0; margin: 0; counter-reset: item; }
.checklist li {
    padding: 8px 0 8px 32px; position: relative; font-size: 15px;
}
.checklist li::before {
    content: counter(item); counter-increment: item;
    position: absolute; left: 0; top: 9px;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--color-primary); color: #fff;
    font-size: 13px; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
}

/* misc */
.crumbs { margin: 24px 0 8px; font-size: 14px; }
.crumbs a { color: var(--color-muted); text-decoration: none; }
.crumbs a:hover { color: var(--color-primary); }
article h2 { margin-top: 40px; }
article li { margin: 8px 0; }
article blockquote {
    border-left: 4px solid var(--color-primary);
    margin: 16px 0;
    padding: 8px 16px;
    background: var(--color-success-bg);
    border-radius: 0 var(--radius-control) var(--radius-control) 0;
}
.empty-state {
    border: 1px dashed var(--color-control-border);
    border-radius: var(--radius-card);
    padding: 32px;
    text-align: center;
    color: var(--color-muted);
}
.category-page [hidden] { display: none !important; }

/* footer */
footer.site {
    background: var(--color-brand);
    color: rgba(255,255,255,.8);
    padding: 40px 24px;
    font-size: 14px;
    margin-top: 64px;
}
footer.site .inner { max-width: 1200px; margin: 0 auto; }
footer.site a { color: #fff; }

/* ---------- identity ---------- */
main > .row {
    display: grid;
    grid-template-columns: minmax(0, 28rem) minmax(0, 22rem);
    gap: 48px;
    align-items: start;
    max-width: 58rem;
    margin: 48px auto 0;
}
main > .row > [class*="col-"] { min-width: 0; }
.form-floating { margin-bottom: 16px; }
.form-floating label, .form-label { display: block; margin-bottom: 6px; font-weight: 600; color: var(--color-brand); }
.form-control {
    width: 100%;
    min-height: 48px;
    padding: 11px 12px;
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-control);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
}
.form-check { display: flex; align-items: center; gap: 8px; margin: 12px 0 20px; }
.form-check-input { width: 20px; height: 20px; }
.btn, .btn-primary { width: 100%; }
.text-danger, .validation-summary-errors { color: var(--color-danger); }
.validation-summary-errors {
    padding: 12px 16px;
    margin-bottom: 16px;
    background: var(--color-danger-bg);
    border-left: 4px solid var(--color-danger);
}
.validation-summary-valid { display: none; }

/* ---------- admin ---------- */
.admin-shell { display: flex; min-height: 100vh; }
.admin-nav {
    width: 230px; background: var(--color-brand); color: #fff; padding: 24px 16px;
    display: flex; flex-direction: column; gap: 4px; flex-shrink: 0;
}
.admin-nav .brand { color: #fff; font-weight: 600; font-size: 18px; margin-bottom: 24px; text-decoration: none; }
.admin-nav a {
    color: rgba(255,255,255,.85); text-decoration: none; padding: 10px 12px;
    border-radius: var(--radius-control); font-size: 15px; min-height: 44px;
    display: flex; align-items: center;
}
.admin-nav a:hover, .admin-nav a.active { background: rgba(255,255,255,.12); color: #fff; }
.admin-main { flex: 1; padding: 32px; max-width: 1100px; }
.admin-titlebar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
table.admin-table { width: 100%; border-collapse: collapse; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); overflow: hidden; }
table.admin-table th, table.admin-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--color-border); font-size: 14px; }
table.admin-table th { background: var(--color-page); color: var(--color-muted); font-weight: 600; }
.status { padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 500; }
.status.published { background: var(--color-success-bg); color: var(--color-success); }
.status.draft, .status.extracteddraft { background: var(--color-page); color: var(--color-muted); border: 1px solid var(--color-border); }
.status.editorialreview, .status.compliancereview, .status.approved, .status.scheduled { background: var(--color-warning-bg); color: var(--color-warning); }
.status.stale, .status.suspended, .status.expired, .status.retired { background: var(--color-danger-bg); color: var(--color-danger); }
.field-row { display: grid; grid-template-columns: 200px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--color-border); }
.field-row .fname { color: var(--color-muted); font-size: 14px; }
form.admin-form input, form.admin-form select, form.admin-form textarea {
    padding: 10px 12px; border: 1px solid var(--color-control-border);
    border-radius: var(--radius-control); font-size: 15px; font-family: inherit; width: 100%; max-width: 34rem;
}
form.admin-form textarea { min-height: 120px; }
form.admin-form label { display: block; font-weight: 600; margin: 16px 0 4px; font-size: 14px; }
form.admin-form .hint { font-size: 13px; color: var(--color-muted); }
.audit-reason { border-left: 4px solid var(--color-warning); background: var(--color-warning-bg); padding: 12px 16px; margin: 16px 0; border-radius: 0 var(--radius-control) var(--radius-control) 0; }
.rich-editor { border: 1px solid var(--color-control-border); border-radius: var(--radius-control); background: var(--color-surface); max-width: 44rem; }
.rich-editor__toolbar { display: flex; gap: 4px; flex-wrap: wrap; padding: 8px; border-bottom: 1px solid var(--color-border); background: var(--color-page); }
.rich-editor__toolbar button { padding: 6px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-text); cursor: pointer; font-size: 14px; line-height: 1; }
.rich-editor__toolbar button:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.rich-editor__content { min-height: 280px; padding: 12px; line-height: 1.6; outline: none; }
.rich-editor__content p, .rich-editor__content li { margin: 0 0 10px; }
.rich-editor__content ul, .rich-editor__content ol { padding-left: 24px; }
.analytics-summary .card h3 { font-size: 32px; font-variant-numeric: tabular-nums; }
.analytics-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.analytics-period { display: flex; gap: 8px; }
.analytics-period a { padding: 8px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-control); text-decoration: none; background: var(--color-surface); }

@media (max-width: 768px) {
    h1 { font-size: 32px; }
    h2 { font-size: 26px; }
    h3 { font-size: 20px; }
    .hero { padding: 40px 16px; }
    .hero .inner { gap: 24px; }
    .container { padding: 0 16px 48px; }
    .category-page:not(.compare-tool) :is(.finder-section, .products-section) { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
    main > .row { grid-template-columns: 1fr; gap: 24px; margin-top: 32px; }
    header.site .bar { padding: 8px 16px; gap: 12px; }
    .admin-shell { flex-direction: column; }
    .admin-nav { width: 100%; flex-direction: row; flex-wrap: wrap; padding: 12px; gap: 2px; }
    .admin-nav .brand { margin-bottom: 0; }
    .admin-nav a { padding: 8px 10px; min-height: 0; font-size: 14px; }
    .admin-main { padding: 16px; max-width: none; }
    table.admin-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table.admin-table th, table.admin-table td { padding: 8px 10px; white-space: nowrap; }
    table.admin-table form input[type="text"] { width: 7rem; }
    .field-row { grid-template-columns: 1fr; gap: 2px; }
    form.admin-form input, form.admin-form select, form.admin-form textarea { max-width: none; }
    .analytics-columns { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}

.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 10px 14px; background: #fff; color: var(--color-brand); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
header.site { position: sticky; top: 0; z-index: 50; box-shadow: 0 1px 0 rgba(19,38,58,.06); }
header.site .bar { min-height: 76px; justify-content: space-between; flex-wrap: nowrap; }
.brand-lockup { display: flex; align-items: center; gap: 8px; color: var(--color-brand); text-decoration: none; flex-shrink: 0; }
.brand-mark { position: relative; width: 42px; height: 42px; overflow: hidden; border-radius: 8px; flex: 0 0 42px; background: #fff; }
.brand-mark img { position: absolute; width: 82px; max-width: none; left: -18px; top: -20px; }
.brand-text { display: flex; line-height: 1; }
.brand-text strong { font-size: 22px; letter-spacing: -.02em; }
.brand-text strong span, .footer-wordmark span { color: var(--color-primary); }
.menu-toggle { display: none; min-height: 42px; padding: 8px 12px; gap: 6px; }
.container { min-height: 55vh; }
.hero { border-radius: 0 0 24px 24px; background: linear-gradient(135deg, #13263A 0%, #173c4c 100%); }
.hero h1 { max-width: 14ch; letter-spacing: -.025em; }
.card { box-shadow: 0 8px 30px rgba(19,38,58,.045); }
.card.clickable { transition: border-color 150ms, transform 150ms, box-shadow 150ms; }
.card.clickable:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(19,38,58,.08); }
.eyebrow { color: var(--color-primary); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
article.reading { margin-top: 32px; }
article.reading > p:first-of-type:not(.eyebrow) { font-size: 18px; color: var(--color-muted); }
footer.site { padding: 48px 24px 24px; }
.footer-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 32px; }
.footer-grid h2 { color: #fff; font-size: 15px; margin: 0 0 12px; }
.footer-grid a { display: block; color: rgba(255,255,255,.82); margin: 7px 0; text-decoration: none; }
.footer-grid a:hover { color: #fff; text-decoration: underline; }
.footer-logo { position: relative; width: 52px; height: 52px; overflow: hidden; border-radius: 10px; background: #fff; margin-bottom: 12px; }
.footer-logo img { position: absolute; width: 100px; max-width: none; left: -22px; top: -24px; }
.footer-wordmark { display: inline-block !important; color: #fff !important; font-size: 24px; font-weight: 600; margin-bottom: 10px !important; }
.footer-brand p { max-width: 48ch; }
.footer-brand .small { color: #C8D5E0; }
.footer-bottom { max-width: 1200px; margin: 32px auto 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.16); display: flex; justify-content: space-between; gap: 32px; }
.footer-bottom p { margin: 0; max-width: 75ch; }
.page-intro { padding: 36px 0 12px; }
.page-intro h1 { max-width: none; margin-bottom: 8px; }
.page-intro > p:not(.eyebrow) { color: var(--color-muted); font-size: 17px; max-width: 65ch; margin: 0 0 12px; }
.page-intro .button.compact { margin-top: 4px; }
.section-heading { max-width: 720px; }
.product-detail > section { margin: 18px 0; }
.product-detail > section h2 { margin-top: 0; margin-bottom: 10px; }
.section-heading h2 { margin-top: 4px; }
.editorial-page .lead { color: var(--color-muted); font-size: 19px; }
.guide-detail-layout { display: grid; grid-template-columns: minmax(0, 720px) minmax(240px, 1fr); gap: 40px; align-items: start; margin-top: 32px; }
.guide-detail-layout > article.reading { margin-top: 0; min-width: 0; }
.guide-sidebar { display: grid; gap: 24px; min-width: 0; }
.guide-related, .guide-products { padding: 24px; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); overflow-wrap: anywhere; }
.guide-related h2, .guide-products h2 { margin: 0 0 8px; font-size: 20px; }
.guide-related__category { margin: 0 0 20px; color: var(--color-muted); font-size: 14px; }
.guide-related ul { list-style: none; padding: 0; margin: 0 0 20px; }
.guide-related li + li { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-border); }
.guide-products ul { display: grid; gap: 10px; list-style: none; padding: 0; margin: 16px 0 0; }
.guide-product-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-page); text-decoration: none; }
.guide-product-link:hover { border-color: var(--color-primary); background: var(--color-surface); }
.guide-product-link strong { display: block; font-size: 14px; }
.guide-product-link__description { display: block; margin-top: 4px; color: var(--color-muted); font-size: 12px; line-height: 1.5; }
@media (max-width: 900px) {
    .guide-detail-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
.review-meta { color: var(--color-muted); font-size: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--color-border); }
.article-body h2 { margin-top: 40px; }
.article-body p, .article-body li { max-width: 70ch; }
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.trust-grid h2 { margin: 0 0 8px; font-size: 20px; }
.methodology-card { max-width: 760px; }
.product-detail > section, .product-detail > .disclosure, .product-detail > p { max-width: 760px; }
.product-detail .facts { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.product-detail .facts td { padding: 12px 16px; border-bottom: 1px solid var(--color-border); }
.product-detail .facts tr:last-child td { border-bottom: 0; }
.methodology-card h2 { margin-top: 0; }
.card-topline { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 8px; }
.card-topline .rank { margin: 0; font-size: 13px; }
.key-facts { margin: 18px 0; border-top: 1px solid var(--color-border); }
.key-facts div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--color-border); }
.key-facts dt { color: var(--color-muted); }
.key-facts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.reason-list { padding-left: 20px; }
.confirm-box { margin: 16px 0; padding: 14px 16px; background: var(--color-warning-bg); border-left: 3px solid var(--color-warning); }
.confirm-box ul { margin-bottom: 0; padding-left: 20px; }
.reason-summary { margin: 12px 0 0; font-size: 14px; color: var(--color-muted); }
.card-actions { display: flex; justify-content: flex-start; align-items: center; gap: 16px; margin-top: 18px; flex-wrap: wrap; }
.success-summary {
    background: #E6F4F3;
    border: 1px solid #0F766E;
    border-radius: var(--radius-card);
    padding: 24px;
    margin: 24px 0;
}
.success-summary h2 { margin-top: 0; color: var(--color-primary); }
.field-validation-error {
    display: block;
    color: #991B1B;
    font-size: 13px;
    margin-top: 4px;
}

@media (max-width: 980px) {
    header.site nav { gap: 12px; }
    header.site nav a { font-size: 14px; }
}

@media (max-width: 768px) {
    header.site .bar { min-height: 64px; position: relative; }
    .brand-text strong { font-size: 20px; }
    .menu-toggle { display: inline-flex; }
    header.site nav { display: none; position: absolute; left: 0; right: 0; top: 64px; padding: 12px 16px 18px; background: #fff; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); box-shadow: 0 12px 24px rgba(19,38,58,.1); flex-direction: column; align-items: stretch; gap: 0; }
    header.site nav.open { display: flex; }
    header.site nav a { min-height: 44px; padding: 10px 8px; }
    header.site nav .nav-cta { margin-top: 8px; justify-content: center; }
    .hero { margin-left: -16px; margin-right: -16px; border-radius: 0 0 18px 18px; }
    .hero h1 { max-width: none; }
    .hero .actions { align-items: stretch; flex-direction: column; }
    .hero .actions .button { width: 100%; }
    .footer-grid { grid-template-columns: 1fr; gap: 28px; }
    .footer-bottom { flex-direction: column; gap: 12px; }
    .page-intro { padding-top: 36px; }
    .correction-layout { grid-template-columns: 1fr; gap: 20px; }
    .correction-aside { position: static; }
    .trust-grid { grid-template-columns: 1fr; }
    .card-actions { align-items: stretch; flex-direction: column; }
    .card-actions .button { width: 100%; margin-left: 0; }
    .fact-pills .pill { width: 100%; justify-content: space-between; border-radius: var(--radius-control); }
}

/* remittance product detail — single reading column */
.remittance-article {
    max-width: 920px;
    margin: 0 auto;
    padding: 24px 20px 48px;
    color: var(--color-text);
    font-size: 16px;
    line-height: 1.5;
}
.remittance-article .crumbs { margin-bottom: 20px; }
.remittance-article .product-header { margin-bottom: 28px; }
.remittance-article h1 { margin: 0 0 10px; font-size: 34px; line-height: 1.2; }
.remittance-article .lead { font-size: 18px; line-height: 1.55; max-width: 68ch; margin: 0 0 12px; }
.remittance-article .review-meta { font-size: 14px; color: var(--color-muted); margin: 0; }
.remittance-article h2 { margin: 0 0 12px; font-size: 23px; line-height: 1.3; }
.remittance-article section + section { margin-top: 30px; }
.remittance-article p,
.remittance-article li,
.remittance-article td { font-size: 16px; font-weight: 400; line-height: 1.5; }
.remittance-article .explanation { max-width: 68ch; margin: 12px 0 0; }
.remittance-article .muted { color: var(--color-muted); }
.remittance-article .fact-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    background: #fff;
}
.remittance-article .fact-table th,
.remittance-article .fact-table td {
    padding: 10px 14px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--color-border);
    overflow-wrap: anywhere;
}
.remittance-article .fact-table th {
    width: 25%;
    font-size: 15px;
    font-weight: 600;
    background: transparent;
}
.remittance-article .fact-table td { font-weight: 400; }
.remittance-article .fact-table thead th { border-bottom: 2px solid var(--color-border); }
.remittance-article .method-table th:first-child,
.remittance-article .method-table td:first-child { width: 20%; }
.remittance-article .source-link { display: inline-block; margin-left: 8px; font-size: 14px; white-space: nowrap; }
.remittance-article .promo-strip {
    margin: 18px 0 0;
    padding: 14px 18px;
    background: #e6f7f5;
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-card);
}
.remittance-article .promo-strip a { margin-left: 12px; }
.remittance-article .promo-strip p { margin: 8px 0 0; }
.remittance-article .source-list { padding-left: 20px; margin: 12px 0 0; }
.remittance-article .source-list li { margin-bottom: 6px; }
.remittance-article .not-confirmed { color: var(--color-muted); }
.remittance-article [id] { scroll-margin-top: 100px; }
.remittance-article .remit-more-toggle { text-align: center; margin-top: 24px; }
.remittance-article .remit-more { display: none; }
.remittance-article .remit-more.is-open { display: block; }

@media (max-width: 640px) {
    .remittance-article { padding: 20px 16px 36px; }
    .remittance-article h1 { font-size: 28px; }
    .remittance-article .fact-table th,
    .remittance-article .fact-table td { padding: 10px 8px; }
    .remittance-article .fact-table th { width: 34%; }
    .remittance-article .method-table th:first-child,
    .remittance-article .method-table td:first-child { width: 28%; }
}

.bc-flip {
    margin-top: 16px;
    perspective: 1000px;
}
.bc-card-active > :not(.bc-flip) { display: none; }
.bc-card-active > .bc-flip { margin: 0; }
.bc-card-active > .bc-flip > .bc-trigger { display: none; }
.bc-card {
    position: relative;
    margin-top: 12px;
    padding: 24px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: var(--color-surface);
    box-shadow: 0 14px 32px rgba(19, 38, 58, 0.12);
    opacity: 0;
    transform: rotateY(90deg);
    transform-origin: center;
    transition: opacity 250ms ease, transform 250ms ease;
}
.bc-flip.is-open .bc-card {
    margin-top: 0;
    opacity: 1;
    transform: rotateY(0);
}
.bc-card__close {
    position: absolute;
    top: 10px;
    right: 14px;
    border: 0;
    background: none;
    color: var(--color-muted);
    cursor: pointer;
    font-size: 28px;
    line-height: 1;
}
.bc-card__close:hover { color: var(--color-text); }
.bc-card h3 { margin: 0 32px 16px 0; font-size: 20px; }
.bc-card h4 { margin: 0 0 8px; color: var(--color-muted); font-size: 16px; letter-spacing: 0.02em; text-transform: uppercase; }
.bc-card ul { margin: 0 0 20px; padding-left: 20px; }
.bc-card ul:last-child { margin-bottom: 0; }
.bc-card li { margin-bottom: 8px; font-size: 15px; line-height: 1.55; }
@media (prefers-reduced-motion: reduce) {
    .bc-card { transition: none; transform: none; }
}
.product-dialog__content {
    padding: 28px;
    max-height: 80vh;
    overflow-y: auto;
}
.product-dialog__close {
    position: absolute;
    top: 14px;
    right: 18px;
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    color: var(--color-muted);
    cursor: pointer;
}
.product-dialog__close:hover { color: var(--color-text); }
.product-dialog h3 { font-size: 20px; margin: 0 0 12px; }
.product-dialog h3 + ul { margin-top: 0; }
.product-dialog ul { padding-left: 20px; margin: 0 0 20px; }
.product-dialog li { font-size: 15px; line-height: 1.55; margin-bottom: 8px; }

/* remittance product detail — redesigned */
.remittance-article--redesigned {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 0 64px;
    line-height: 1.5;
}
.remittance-article--redesigned .crumbs { margin-bottom: 20px; }
.remittance-header {
    margin-bottom: 28px;
}
.remittance-header__identity {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}
.provider-logo {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-page);
    border: 1px solid var(--color-border);
    flex-shrink: 0;
}
.remittance-header__provider {
    font-size: 15px;
    color: var(--color-muted);
    margin: 0 0 4px;
}
.remittance-header__title {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}
.remittance-header__title h1 {
    font-size: 34px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}
.remittance-header__badge {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-primary);
    background: rgba(15, 118, 110, 0.08);
    padding: 4px 10px;
    border-radius: 999px;
}
.remittance-header__desc {
    font-size: 17px;
    color: var(--color-muted);
    max-width: 70ch;
    margin: 12px 0 0;
    line-height: 1.55;
}

.remittance-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 32px;
    align-items: start;
}
.remittance-content {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 32px;
}
.remittance-actions {
    position: sticky;
    top: 96px;
}

.transfer-summary { margin-bottom: 24px; }
.summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.summary-card {
    background: var(--color-page);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.summary-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-muted);
}
.summary-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.25;
}
.summary-note {
    font-size: 13px;
    color: var(--color-muted);
    line-height: 1.4;
}
.summary-source {
    font-size: 13px;
    margin-top: 2px;
}

.quote-prompt {
    background: rgba(15, 118, 110, 0.06);
    border: 1px solid rgba(15, 118, 110, 0.2);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
}
.quote-prompt__text {
    font-size: 17px;
    color: var(--color-text);
    line-height: 1.5;
    margin: 0;
    max-width: 70ch;
}

.status-notice {
    background: rgba(245, 158, 11, 0.06);
    border-left: 3px solid var(--color-warning);
    border-radius: 0 8px 8px 0;
    padding: 12px 16px;
    font-size: 14px;
    color: var(--color-text);
    margin-bottom: 28px;
}

.remittance-section {
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--color-border);
}
.remittance-section:last-of-type { border-bottom: none; padding-bottom: 0; }
.remittance-section h2 {
    font-size: 22px;
    margin: 0 0 16px;
}

.info-pairs {
    display: grid;
    gap: 16px;
}
.info-pairs > div {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 16px;
    align-items: baseline;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border);
}
.info-pairs > div:last-child { border-bottom: none; padding-bottom: 0; }
.info-label {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-muted);
    font-weight: 600;
}
.info-value {
    font-size: 15px;
    color: var(--color-text);
    line-height: 1.5;
}

.promo-strip {
    margin-top: 18px;
    padding: 16px;
    background: rgba(15, 118, 110, 0.06);
    border-radius: 10px;
}
.promo-strip p { margin: 6px 0 0; }
.promo-strip .small { color: var(--color-muted); }

.accordion__body {
    padding-bottom: 16px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--color-text);
}
.accordion__body p { margin: 0 0 10px; }
.accordion__body p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
    .remittance-layout { grid-template-columns: 1fr; }
    .remittance-actions { display: none; }
    .summary-grid { grid-template-columns: 1fr; }
    .info-pairs > div { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 580px) {
    .remittance-header__title h1 { font-size: 28px; }
    .remittance-content { padding: 24px; }
}

/* --- Currency calculator (/send-money-abroad) --- */
.category-hero--compact { padding: 40px 0; }
.fx-section {
    max-width: 1152px;
    margin: 0 auto;
    padding: 0 24px 8px;
}
.fx-card {
    background: var(--color-surface);
    border: 1px solid #DCE4EA;
    border-radius: 16px;
    padding: 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.fx-card__inputs h2 {
    font-size: 20px;
    margin: 0 0 16px;
    color: var(--color-navy);
}
.fx-field { margin-bottom: 16px; }
.fx-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 6px;
}
.fx-field input, .fx-field select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-control);
    font-size: 15px;
    color: var(--color-text);
    background: var(--color-surface);
}
.fx-amount-row { display: flex; gap: 8px; align-items: center; }
.fx-amount-row input { flex: 1; }
.fx-currency-tag {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-muted);
    white-space: nowrap;
}
.fx-field-hint { font-size: 12px; color: var(--color-muted); margin: 4px 0 0; }
.fx-links { display: flex; gap: 20px; font-size: 14px; margin: 12px 0 0; }
.fx-card__result {
    background: #EEF7F6;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.fx-result__label { font-size: 13px; color: var(--color-muted); margin: 0 0 6px; }
.fx-result__amount {
    font-size: 34px;
    font-weight: 700;
    color: var(--color-navy);
    margin: 0 0 8px;
    line-height: 1.2;
}
.fx-result__meta { font-size: 13px; color: var(--color-muted); margin: 0 0 8px; }
.fx-result__error { font-size: 13px; color: var(--color-danger); margin: 0 0 8px; }
.fx-result__note { font-size: 12px; color: var(--color-muted); margin: 8px 0 0; line-height: 1.5; }
.category-card__details {
    border-top: 1px solid var(--color-border);
    padding: 10px 0;
    font-size: 14px;
}
.category-card__details summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    color: var(--color-primary);
}
.category-card__details p { margin: 8px 0 0; font-size: 13px; color: var(--color-muted); }
.category-card[hidden] { display: none; }
@media (max-width: 680px) {
    .category-hero--compact { padding: 24px 0; }
    .fx-card { grid-template-columns: 1fr; padding: 16px; }
    .fx-section { padding: 0 16px 8px; }
    .fx-result__amount { font-size: 28px; }
}

/* --- Transfer tools tabs (/send-money-abroad) --- */
.tools-section {
    max-width: 1152px;
    margin: 0 auto;
    padding: 0 24px 8px;
}
.tools-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: 20px;
}
.tools-tab {
    background: none;
    border: none;
    padding: 10px 18px;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-muted);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
}
.tools-tab:hover { color: var(--color-text); }
.tools-tab.is-active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}
.tools-tab:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}
.tools-section .finder-card {
    background: var(--color-surface);
    border: 1px solid #DCE4EA;
    border-radius: 16px;
    padding: 24px;
}
@media (max-width: 680px) {
    .tools-section { padding: 0 16px 8px; }
    .tools-tab { padding: 10px 12px; font-size: 14px; }
    .tools-section .finder-card { padding: 16px; }
}

/* News review workspace */
.news-admin { max-width: 1440px; }
.news-admin h1 { font-size: clamp(1.7rem, 3vw, 2.5rem); margin-bottom: .35rem; }
.news-admin h2 { font-size: 1.15rem; margin: 0 0 .5rem; }
.news-admin .card { margin-bottom: 1rem; padding: 1.25rem; }
.news-admin .admin-titlebar { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.news-count { padding:.5rem .8rem; border-radius:999px; background:#e6f3f1; white-space:nowrap; }
.news-controls { display:flex; flex-wrap:wrap; gap:.8rem; align-items:flex-end; }
.news-controls label { display:flex; flex-direction:column; gap:.35rem; font-size:.85rem; font-weight:600; flex:1 1 150px; }
.news-controls input:not([type=checkbox]), .news-controls select { width:100%; min-width:0!important; padding:.65rem!important; border:1px solid var(--color-control-border); border-radius:8px; background:white; }
.news-controls .news-check { flex-direction:row; align-items:center; padding:.7rem 0; }
.news-controls button { white-space:nowrap; }
.news-maintenance summary, .news-editor summary { cursor:pointer; font-weight:600; }
.news-maintenance .news-controls { margin-top:1rem; }
.news-maintenance form { display:flex!important; gap:.5rem; flex-wrap:wrap; align-items:center; }
.news-runs { display:grid; gap:.6rem; margin:1rem 0 .5rem; padding-top:1rem; border-top:1px solid #dbe3eb; }
.news-runs p { margin:.3rem 0; overflow-wrap:anywhere; }
.news-table-scroll { overflow-x:auto; }
.news-admin .admin-table { min-width:760px; }
.news-editor { padding:.5rem 0; }
.news-editor[open] summary { margin-bottom:1rem; }
.news-admin .status { padding:.25rem .6rem; border-radius:999px; background:#edf1f5; }
.news-admin .status.pending { background:#fff1ce; color:#72500d; }
.news-admin .status.accepted { background:#def3e7; color:#17623e; }
.news-admin .status.declined { background:#fbe4e4; color:#8a2424; }
@media(max-width:700px) { .news-admin .admin-titlebar { align-items:flex-start; } .news-count { display:none; } .news-controls > button { width:100%; } }

.news-bulk { display:flex; align-items:center; flex-wrap:wrap; gap:.75rem; }
.news-bulk p { flex-basis:100%; margin:0; }
.news-bulk label { display:flex; align-items:center; gap:.5rem; flex:1 1 220px; }
.news-bulk label input { min-width:0; width:100%; }

/* Public newcomer planning tools */
.micro-tools { max-width: 1120px; margin: 2rem auto 4rem; }
.micro-tools > h1 { max-width: 800px; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.1; margin: 1.5rem 0; }
.micro-tools > p { max-width: 800px; line-height: 1.7; }
.micro-tools .card { padding: clamp(1rem, 3vw, 2rem); margin: 1.2rem 0; border: 1px solid #dce4e1; border-radius: 16px; background: #fff; }
.tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 1.5rem; align-items: start; }
.tools-content { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; margin-top: 24px; }
.tools-content > .tool-grid, .tools-product-sidebar { min-width: 0; }
.tools-content .tool-link { min-width: 0; margin: 0; }
@media (max-width: 900px) {
    .tools-content { grid-template-columns: minmax(0, 1fr); }
}
.tool-link { display: block; color: inherit; text-decoration: none; min-height: 210px; }
.tool-link:hover { border-color: #087f68; }
.tool-link span { color: #08745f; font-weight: 700; }
.tool-fields { display: grid; gap: 1rem; }
.tool-fields label { display: grid; gap: .4rem; font-weight: 600; }
.tool-fields input, .tool-fields select, .tool-sharing textarea { width: 100%; min-width: 0; min-height: 44px; padding: .65rem; border: 1px solid #99aaa3; border-radius: 6px; background: white; color: #17372d; box-sizing: border-box; }
.tool-budget-head, .tool-budget-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: .5rem; align-items: center; }
.tool-budget-head { font-size: .8rem; font-weight: 700; }
.tool-budget-row > span { font-size: .9rem; }
.tool-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.tool-stats > div { padding: 1rem; border-radius: 10px; background: #f1f7f4; }
.tool-stats dt { font-size: .9rem; }
.tool-stats dd { margin: .5rem 0 0; font-size: 1.6rem; font-weight: 700; color: #115c47; }
.tool-highlight { font-size: 1.6rem; font-weight: 700; color: #115c47; }
.tool-table-scroll { overflow-x: auto; }
.tool-table-scroll table { border-collapse: collapse; width: 100%; font-size: .85rem; }
.tool-table-scroll caption { text-align: left; font-weight: 700; padding: .75rem 0; }
.tool-table-scroll td, .tool-table-scroll th { text-align: left; border-bottom: 1px solid #dce4e1; padding: .7rem .5rem; }
.tool-sharing button { margin: .3rem .5rem .3rem 0; }
.micro-tools summary { cursor: pointer; font-weight: 700; }
.micro-tools :focus-visible { outline: 3px solid #087f68; outline-offset: 3px; }

/* Mortgage and amortization planning */
.loan-workspace { display: grid; grid-template-columns: minmax(280px, .85fr) minmax(0, 1.4fr); gap: 1.5rem; align-items: start; }
.loan-workspace > *, .loan-output > * { min-width: 0; }
.loan-calculator .tool-fields h2, .loan-calculator .tool-fields h3, .loan-calculator .tool-fields p { margin: 0; }
.loan-field-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.loan-summary { border-top: 4px solid #087f68 !important; }
.loan-payment { font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.2; font-weight: 700; color: #115c47; margin: 1rem 0; overflow-wrap: anywhere; }
.loan-payment span { font-size: 1rem; font-weight: 400; }
.loan-costs { margin: 0 0 1.5rem; }
.loan-costs > div { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid #dce4e1; }
.loan-costs dd { margin: 0; font-weight: 700; white-space: nowrap; }
.loan-calculator .tool-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.loan-calculator .tool-stats dd { font-size: 1.2rem; overflow-wrap: anywhere; }
.loan-chart { width: 100%; height: auto; display: block; overflow: visible; }
.loan-chart text { font: 14px system-ui, sans-serif; fill: #365447; }
.loan-chart-axis { fill: none; stroke: #99aaa3; }
.loan-chart-balance { fill: none; stroke: #087f68; stroke-width: 3; }
.loan-chart-baseline { fill: none; stroke: #718078; stroke-width: 2; stroke-dasharray: 7 5; }
.loan-schedule-heading, .loan-pagination { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.loan-calculator #loan-frequency { min-height: 44px; margin: 0 .5rem 1rem; padding: .5rem 1rem; border: 1px solid #99aaa3; border-radius: 6px; background: white; color: #17372d; }
.loan-calculator .tool-table-scroll table { min-width: 560px; font-variant-numeric: tabular-nums; }
.loan-calculator .tool-table-scroll td { white-space: nowrap; }
.loan-pagination { margin-top: 1rem; }
.loan-calculator button:disabled { opacity: .5; cursor: default; }
.loan-calculator #loan-error { color: #9c3021; }
@media (max-width: 760px) {
    .loan-workspace { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .loan-field-pair { grid-template-columns: minmax(0, 1fr); }
}

/* Keep landing-page sections on one shared content grid. */
.home-section.section {
    margin-top: 0;
    padding: 64px 0 0;
}
.home-section > .section-heading {
    max-width: 720px;
    margin: 0 auto 32px;
    text-align: center;
}
.home-section > .section-heading .eyebrow { display: block; margin: 0 0 8px; }
.home-section > .section-heading h2 { margin: 0 0 12px; line-height: 1.2; }
.home-section > .section-heading p { margin: 0; color: var(--color-muted); line-height: 1.6; }
.home-section .home-category-grid,
.home-section .journey-timeline {
    width: 100%;
    max-width: none;
    margin: 0;
    gap: 20px;
    align-items: stretch;
}
.home-section .home-category-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.home-section.home-categories .home-category-card { padding: 18px; gap: 10px; }
.home-section .home-category-card__icon { width: 32px; height: 32px; }
.home-section.home-categories { padding-top: 32px; }
.home-section.home-stage, .home-section.home-guides { padding-top: 40px; }
.container--home { padding-bottom: 24px; }
.container--home + footer.site { margin-top: 24px; }
.home-section .journey-timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-section .journey-timeline::before { display: none; }
.home-section .home-category-card,
.home-section .journey-card { min-width: 0; padding: 24px; }
.home-section .home-category-card h3,
.home-section .journey-card h3 { font-size: 18px; line-height: 1.4; }
.home-section .home-category-card__cta,
.home-section .journey-card__cta { margin-top: auto; }
@media (max-width: 900px) {
    .home-section .home-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .home-section.section { padding-top: 40px; }
    .home-section > .section-heading { margin-bottom: 24px; }
    .home-section .home-category-grid,
    .home-section .journey-timeline { grid-template-columns: 1fr; gap: 16px; }
    .home-guide-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* Compact comparison entry point; category pages share the same cards and loader. */
.container--wide { max-width: 1440px; }
.compare-tool { padding-top: 24px; min-width: 0; }
.compare-tool__header h1 { font-size: 32px; margin: 0 0 8px; line-height: 1.2; }
.compare-tool__header p { margin: 0; color: var(--color-muted); }
.compare-categories { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 20px 0 16px; }
.compare-categories a { display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px; min-height: 48px; border: 1px solid var(--color-border); border-radius: 8px; text-decoration: none; font-weight: 600; color: var(--color-primary); overflow-wrap: anywhere; }
.compare-categories a:hover { background: var(--color-surface); border-color: var(--color-primary); }
.compare-categories a[aria-current="page"] { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.compare-tool :is(a, button, input, select, summary):focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
.comparison-filters { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.comparison-filters label { display: grid; gap: 4px; margin: 0; flex: 1 1 160px; min-width: 0; font-size: 14px; }
.comparison-filters :is(input, select) { width: 100%; min-width: 0; min-height: 44px; margin: 0; padding: 10px 12px; border: 1px solid var(--color-control-border); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-text); font: inherit; }
.comparison-extra { flex: 1 1 130px; }
.comparison-extra summary { cursor: pointer; min-height: 44px; padding: 10px; border: 1px solid var(--color-border); border-radius: 8px; }
.comparison-extra__fields { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 12px; }
.compare-tool .products-section { margin: 16px 0 0; padding: 0; background: transparent; }
.compare-tool__results-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: baseline; margin-bottom: 12px; }
.compare-tool__results-heading h2 { font-size: 20px; margin: 0; }
.compare-tool__results-heading p { margin: 0; font-size: 14px; color: var(--color-muted); }
.compare-tool .compare-bar { padding: 8px 12px; margin-bottom: 12px; }
.compare-tool .category-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.compare-tool .category-product-grid > article { min-width: 0; overflow-wrap: anywhere; }
.compare-tool .category-card.is-selected { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.compare-tool .category-card__footer { flex-direction: column; align-items: stretch; }
.compare-add { position: relative; display: block; margin: 0; cursor: pointer; }
.compare-add > span { display: flex; justify-content: center; align-items: center; gap: 8px; min-height: 44px; padding: 10px 12px; color: var(--color-primary); background: var(--color-surface); border: 1px solid var(--color-primary); border-radius: var(--radius-control); font-size: 14px; font-weight: 600; }
.compare-add > span::before { content: '+'; font-size: 20px; line-height: 1; }
.compare-add input:checked + span { background: var(--color-primary); color: white; }
.compare-add input:checked + span::before { content: '✓'; font-size: 16px; }
.compare-add input:disabled + span { opacity: .45; cursor: not-allowed; border-color: var(--color-border); }
.compare-add input:focus-visible + span { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.comparison-tray { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 16px 20px; margin-top: 24px; border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-surface); box-shadow: var(--shadow-lg); }
.comparison-tray.is-enhanced { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); width: min(1392px, calc(100% - 32px)); margin: 0; z-index: 90; }
.comparison-tray__summary strong { font-size: 16px; }
.comparison-tray__summary p { margin: 4px 0 0; font-size: 12px; }
.comparison-tray__products { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.comparison-tray__products li { display: flex; align-items: center; min-width: 0; padding: 4px 4px 4px 12px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-page); }
.comparison-tray__products span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; font-size: 13px; font-weight: 600; flex: 1; }
.comparison-tray__products button { flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--color-muted); font-size: 24px; cursor: pointer; }
.comparison-tray__products button:hover { color: var(--color-danger); }
.comparison-tray__actions { display: flex; align-items: center; gap: 12px; }
.comparison-tray__actions .button { white-space: nowrap; }
.comparison-tray__clear { min-height: 44px; padding: 8px 4px; border: 0; background: transparent; color: var(--color-muted); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
.comparison-tray button:disabled { opacity: .5; cursor: not-allowed; }
body.has-comparison-tray { padding-bottom: var(--comparison-tray-space, 160px); }
html:has(.has-comparison-tray) { scroll-padding-bottom: var(--comparison-tray-space, 200px); }
.compare-tool [hidden] { display: none !important; }
.compare-tool__support a { display: inline-block; margin: 0 24px 12px 0; }
.compare-transfer .fx-card { padding: 16px; gap: 20px; margin-bottom: 16px; }
.compare-transfer .fx-card__inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.compare-transfer .fx-card__inputs h2, .compare-transfer .fx-links { display: none; }
.compare-transfer .fx-field { margin: 0; min-width: 0; }
.compare-transfer .fx-field :is(input, select) { min-width: 0; max-width: 100%; }
.compare-transfer .fx-card__result { padding: 12px; }
.compare-transfer .fx-result__amount { font-size: 24px; margin: 4px 0; }
.compare-transfer .fx-result__note { margin-bottom: 0; }
@media (min-width: 901px) {
    .comparison-extra[open] { flex-basis: 100%; order: 2; }
}
@media (min-width: 1280px) {
    .compare-tool .category-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
    .compare-tool .category-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .comparison-tray { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
    .comparison-tray__products { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 650px) {
    .compare-tool .category-product-grid { grid-template-columns: minmax(0, 1fr); }
    .comparison-tray.is-enhanced { bottom: 0; width: 100%; border-radius: 16px 16px 0 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
    .comparison-tray__summary strong { font-size: 14px; }
    .comparison-tray__actions { gap: 8px; }
    .comparison-tray__actions .button { font-size: 13px; padding: 10px 12px; }
    .comparison-tray__products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .compare-tool__header h1 { font-size: 26px; }
    .compare-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
    .compare-categories a { padding: 10px 8px; font-size: 14px; }
    .comparison-filters { gap: 8px; }
    .comparison-filters > label { flex-basis: calc(50% - 8px); }
    .comparison-filters > label:first-child { flex-basis: 100%; }
    .comparison-extra { flex-basis: 100%; }
    .compare-transfer .fx-card { grid-template-columns: minmax(0, 1fr); }
    .compare-transfer .fx-card__inputs { grid-template-columns: minmax(0, 1fr); }
}

/* Remittance cards use the shared product-card shell and divided fact grid. */
.category-card.transfer-card,
.remittance-card.transfer-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    text-align: left;
    font-size: 16px;
    line-height: 1.5;
    overflow-wrap: break-word;
}
.transfer-card .transfer-card__header { display: block; margin: 0; }
.transfer-card .transfer-card__header h3 { margin: 0 0 8px; }
.transfer-card__header h3 a { color: var(--color-brand); text-decoration: none; }
.transfer-card .transfer-card__title { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--color-muted); }
.transfer-card .transfer-card__route { margin: 0; color: var(--color-muted); font-size: 13px; font-weight: 400; }
.transfer-card__sponsored { display: inline-block; margin: 4px 0; color: var(--color-muted); font-size: 13px; }
.transfer-card .transfer-card__summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; border: 1px solid var(--color-border); border-radius: 10px; }
.transfer-card .transfer-card__summary > div { padding: 14px 12px; }
.transfer-card .transfer-card__summary > div:nth-child(even) { border-left: 1px solid var(--color-border); }
.transfer-card .transfer-card__summary > div:nth-child(n+3) { border-top: 1px solid var(--color-border); }
.transfer-card .transfer-card__summary > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.transfer-card .transfer-card__expanded dl { display: grid; gap: 16px; margin: 0; }
.transfer-card .transfer-card__summary > div,
.transfer-card .transfer-card__expanded dl > div { display: block; min-width: 0; }
.transfer-card .transfer-card__summary dt,
.transfer-card .transfer-card__expanded dt { margin: 0 0 6px; font-size: 10px; font-weight: 500; letter-spacing: .025em; text-transform: uppercase; color: var(--color-muted); }
.transfer-card .transfer-card__summary dd,
.transfer-card .transfer-card__expanded dd { margin: 0; font-size: 12px; line-height: 1.7; font-weight: 400; text-align: left; }
.transfer-card .transfer-card__summary dd strong { font-size: 17px; line-height: 1.45; color: var(--color-brand); }
.transfer-card > .bc-flip { margin-top: 0; }
.transfer-card.bc-card-active > :not(.bc-flip) { display: none; }
.transfer-card__expanded { padding-top: 16px; }
.transfer-card__expanded h4 { margin: 16px 0; font-size: 16px; }
.transfer-card__expanded h4:first-child { margin-top: 0; }
.transfer-card__expanded :is(p, li) { font-size: 16px; font-weight: 400; }
.transfer-card__expanded ul { margin: 16px 0; padding-left: 20px; }
.transfer-card__expanded li + li { margin-top: 8px; }
.transfer-card .transfer-card__footer { display: grid; gap: 16px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--color-border); }
.transfer-card .transfer-card__quote,
.transfer-card .transfer-card__view { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 12px; margin: 0; border-radius: 8px; text-align: center; font-size: 12px; font-weight: 600; text-decoration: none; }
.transfer-card .transfer-card__quote { background: var(--color-brand); border: 1px solid var(--color-brand); color: white; }
.transfer-card .transfer-card__quote:hover { background: var(--color-primary); border-color: var(--color-primary); }
.transfer-card .transfer-card__view { border: 1px solid var(--color-border); color: var(--color-primary); }
.transfer-card .transfer-card__view:only-child { grid-column: 1 / -1; }
.transfer-card .transfer-card__compare { grid-column: 1 / -1; }
.transfer-card .transfer-card__compare > span { justify-content: center; font-weight: 600; }
.transfer-card .transfer-card__evidence { margin: 0; padding-top: 16px; border-top: 1px solid var(--color-border); font-size: 12px; font-weight: 400; color: var(--color-muted); }
.transfer-card__evidence a { color: inherit; }

/* Mortgage comparisons keep each published scenario and its assumptions together. */
.mortgage-page { max-width: 1440px; margin: 0 auto; }
.mortgage-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,360px),1fr)); gap: 24px; margin: 24px 0; }
.mortgage-bank { min-width: 0; }
.mortgage-rate { border-top: 1px solid var(--color-control-border,#d5dce2); margin-top: 20px; padding-top: 16px; }
.mortgage-rate--stale { border-left: 4px solid #a65c00; padding-left: 12px; }
.mortgage-price { font-size: 1.1rem; }
.mortgage-facts { display: grid; grid-template-columns: minmax(110px,1fr) minmax(0,1.4fr); gap: 8px 16px; }
.mortgage-facts dt { font-weight: 600; }
.mortgage-facts dd { margin: 0; overflow-wrap: anywhere; }
.mortgage-assumptions { margin: 12px 0; }
.mortgage-assumptions code { overflow-wrap: anywhere; }
.mortgage-tray { position: static; flex-wrap: wrap; margin-bottom: 16px; padding: 16px; background: var(--color-surface,#fff); border: 1px solid var(--color-control-border,#d5dce2); display: flex; gap: 16px; align-items: center; }
.admin-main pre { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; font-size: .8rem; }
.table-scroll { overflow-x: auto; }

/* Stored editorial HTML may contain wide tables or long source URLs. Keep the mobile
   viewport stable and let the table region scroll without hiding page content. */
.article-body { min-width: 0; max-width: 100%; overflow-x: auto; overflow-wrap: anywhere; }
.article-body img, .article-body video, .article-body iframe { max-width: 100%; height: auto; }
.article-body table { max-width: 100%; }
.priority-answer { margin: 24px 0; padding: 20px; border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.priority-answer .facts { width: 100%; border-collapse: collapse; }
.priority-answer th, .priority-answer td { padding: 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-border); }
.priority-answer caption { text-align: left; font-weight: 600; padding-bottom: 12px; }
@media (max-width: 600px) { .priority-answer .facts { min-width: 520px; } }

/* Mortgage program/scenario comparisons. Text remains readable at narrow widths and zoom. */
.mortgage-primary-filters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px 18px; }
.mortgage-filters { padding:16px; background:var(--color-surface,#fff); border:1px solid var(--color-control-border,#d5dce2); border-radius:12px; }
.mortgage-filters label,.mortgage-bank label,.mortgage-detail label { display:block; margin:8px 0; }
.mortgage-filters input:not([type=checkbox]),.mortgage-filters select,.mortgage-bank select,.mortgage-detail select,.mortgage-comparison-table select { width:100%; min-width:0; min-height:44px; }
.mortgage-more-filters { margin:12px 0; }
.mortgage-page summary { cursor:pointer; min-height:36px; padding:8px 0; }
.mortgage-page :focus-visible { outline:3px solid #146bc9; outline-offset:3px; }
.mortgage-price-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.mortgage-price-grid dt { font-size:.9rem; }
.mortgage-price-grid dd { margin:0; font-size:1.15rem; font-weight:650; overflow-wrap:anywhere; }
.mortgage-price-grid dd.small { font-size:.85rem; font-weight:400; }
.mortgage-assumptions-line { margin-top:10px; }
.mortgage-page p,.mortgage-page td,.mortgage-page th,.mortgage-page dd { overflow-wrap:anywhere; }
.mortgage-comparison-table { table-layout:fixed; width:100%; }
.mortgage-comparison-table th,.mortgage-comparison-table td { vertical-align:top; padding:12px; }
.mortgage-comparison-table thead th { background:var(--color-surface,#fff); }
.mortgage-requirements-summary p { margin:7px 0; }
.mortgage-page [hidden] { display:none !important; }
@media(max-width:700px) {
 .mortgage-primary-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .mortgage-grid { grid-template-columns:minmax(0,1fr); gap:16px; }
 .mortgage-facts { grid-template-columns:minmax(0,1fr); gap:4px; }
 .mortgage-facts dd { margin-bottom:12px; }
 .mortgage-comparison-table,.mortgage-comparison-table tbody,.mortgage-comparison-table tr,.mortgage-comparison-table td { display:block; }
 .mortgage-comparison-table thead { display:block; }
 .mortgage-comparison-table thead tr { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
 .mortgage-comparison-table thead th:first-child { display:none; }
 .mortgage-comparison-table tbody th { display:block; padding-top:18px; }
 .mortgage-comparison-table td::before { content:attr(data-label); display:block; font-weight:600; margin-bottom:4px; }
 .mortgage-tray { flex-wrap:wrap; }
}
@media(max-width:380px) { .mortgage-primary-filters { grid-template-columns:minmax(0,1fr); } }

.mortgage-page .facts td { white-space:normal; }
.mortgage-detail .facts th { text-align:left; vertical-align:top; padding:8px 12px 8px 0; }
.mortgage-detail .facts td { padding:8px 0; }
@media(max-width:700px) {
 .mortgage-detail .facts:not(.mortgage-comparison-table),.mortgage-detail .facts tbody,.mortgage-detail .facts tr,.mortgage-detail .facts th,.mortgage-detail .facts td { display:block; width:100%; }
 .mortgage-detail .facts th { padding-bottom:2px; }
 .mortgage-detail .facts td { padding-bottom:12px; }
 .mortgage-detail .facts thead { display:none; }
 .mortgage-comparison-table thead tr { display:flex; flex-wrap:wrap; }
 .mortgage-comparison-table thead th:not(:first-child) { flex:1 1 110px; min-width:0; }
}

.mortgage-card-identity { display:flex; align-items:center; gap:12px; }
.mortgage-card-identity h2, .mortgage-card-identity p { margin:0 0 6px; }
.mortgage-lender-mark { display:inline-flex; align-items:center; justify-content:center; flex:0 0 42px; width:42px; height:42px; border-radius:8px; background:var(--color-surface-alt,#edf3f4); font-weight:700; }
.mortgage-request-pricing { font-size:1.2rem; }
.mortgage-bank .mortgage-requirements-summary { padding-left:1.2rem; }
.mortgage-bank { overflow-wrap:anywhere; }

.mortgage-rate-options { margin:16px 0; }
.mortgage-rate-option { padding:12px 0; border-top:1px solid var(--color-border); overflow-wrap:anywhere; }
.mortgage-rate-option p { margin:6px 0; }

/* Mortgage catalogue uses the shared comparison-page and product-card language. */
.mortgage-catalog { padding: 24px 0 48px; }
.mortgage-catalog .compare-tool__header { padding: 0 0 4px; }
.mortgage-catalog .compare-categories { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mortgage-catalog .mortgage-filters { padding: 22px; border-color: var(--color-border); border-radius: 14px; box-shadow: var(--shadow-sm); }
.mortgage-catalog .mortgage-primary-filters { gap: 16px; }
.mortgage-catalog .mortgage-filters label { margin: 0; font-size: 12px; font-weight: 600; line-height: 1.5; }
.mortgage-catalog .mortgage-filters input:not([type=checkbox]),
.mortgage-catalog .mortgage-filters select,
.mortgage-catalog .mortgage-bank select {
    margin-top: 6px;
    padding: 10px 12px;
    border: 1px solid var(--color-control-border);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-weight: 400;
}
.mortgage-catalog .mortgage-more-filters { margin: 18px 0; padding: 10px 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.mortgage-catalog summary { font-size: 13px; font-weight: 600; color: var(--color-primary); }
.mortgage-catalog .mortgage-more-filters[open] > summary { margin-bottom: 12px; }
.mortgage-catalog .mortgage-more-filters label:has(input[type=checkbox]) { display: flex; align-items: center; gap: 8px; }
.mortgage-catalog .mortgage-filter-actions { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.mortgage-catalog .mortgage-filter-actions label { flex: 0 1 300px; min-width: 0; }
.mortgage-catalog .mortgage-filter-actions button { min-height: 44px; font-size: 13px; }
.mortgage-catalog .mortgage-filter-actions > a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; }
.mortgage-catalog #mortgage-filter-help { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--color-border); font-size: 12px; line-height: 1.7; color: var(--color-muted); }
.mortgage-catalog .mortgage-comparison-note { margin: 20px 0; padding: 14px 18px; border-left: 3px solid var(--color-primary); background: #f0f6f5; border-radius: 0 8px 8px 0; line-height: 1.7; }
.mortgage-catalog .mortgage-comparable-groups { margin-bottom: 20px; padding: 8px 16px; border: 1px solid var(--color-border); border-radius: 10px; }
.mortgage-catalog .mortgage-tray { justify-content: space-between; border-radius: 12px; border-color: var(--color-border); margin: 24px 0 0; padding: 14px 18px; }
.mortgage-catalog .mortgage-tray button { font-size: 13px; }
.mortgage-catalog [data-mortgage-selection] { font-size: 12px; font-weight: 600; color: var(--color-muted); }
.mortgage-catalog .mortgage-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 20px; margin: 20px 0 28px; align-items: stretch; }
.mortgage-catalog .mortgage-bank { display: flex; flex-direction: column; margin: 0; }
.mortgage-catalog .mortgage-card-identity { align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.mortgage-catalog .mortgage-lender-mark { flex-basis: 36px; width: 36px; height: 36px; border-radius: 10px; background: #f0f6f5; color: var(--color-primary); font-size: 15px; }
.mortgage-catalog .mortgage-card-identity > div { min-width: 0; }
.mortgage-catalog .mortgage-card-identity h2 { margin: 0; }
.mortgage-catalog .mortgage-card-identity p { font-size: 12px; line-height: 1.6; color: var(--color-muted); margin: 0; }
.mortgage-catalog .mortgage-card-identity .category-card__title > p { margin: 0; }
.mortgage-catalog .mortgage-bank p { font-size: 12px; line-height: 1.7; margin: 0 0 12px; }
.mortgage-catalog .mortgage-bank .small { font-size: 11px; color: var(--color-muted); }
.mortgage-catalog .mortgage-price-grid { gap: 0; margin: 0 0 16px; border: 1px solid var(--color-border); border-radius: 10px; }
.mortgage-catalog .mortgage-price-grid > div { padding: 14px 12px; min-width: 0; }
.mortgage-catalog .mortgage-price-grid > div + div { border-left: 1px solid var(--color-border); }
.mortgage-catalog .mortgage-price-grid dt { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 6px; }
.mortgage-catalog .mortgage-price-grid dd { font-size: 17px; line-height: 1.45; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-brand); }
.mortgage-catalog .mortgage-request-pricing { padding: 14px 16px; border: 1px solid var(--color-border); border-radius: 10px; color: var(--color-brand); }
.mortgage-catalog .mortgage-requirements-summary { margin: 0 0 16px; padding: 14px 16px 14px 30px; border-radius: 10px; background: #f0f6f5; font-size: 12px; line-height: 1.7; }
.mortgage-catalog .mortgage-requirements-summary li + li { margin-top: 8px; }
.mortgage-catalog .mortgage-assumptions { border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding: 4px 0; margin: 12px 0 16px; }
.mortgage-catalog .mortgage-bank > label { font-size: 12px; margin: 0 0 16px; }
.mortgage-catalog .mortgage-card-rate-options { margin-bottom: 16px; border-bottom: 1px solid var(--color-border); padding-bottom: 4px; }
.mortgage-catalog .mortgage-card-rate-options h3 { font-size: 16px; line-height: 1.4; }
.mortgage-catalog .mortgage-card-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--color-border); }
.mortgage-catalog .mortgage-card-actions > a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 12px; border-radius: 8px; background: var(--color-brand); border-color: var(--color-brand); color: white; font-size: 12px; }
.mortgage-catalog .mortgage-card-actions > a:hover { background: var(--color-primary); border-color: var(--color-primary); }
.mortgage-catalog .mortgage-card-actions label { margin: 0; }
.mortgage-catalog .mortgage-card-actions .compare-add > span { font-size: 12px; }
.mortgage-catalog .mortgage-definitions { padding: 10px 20px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; margin-bottom: 20px; }
.mortgage-catalog .mortgage-definitions dl { font-size: 13px; line-height: 1.7; }
.mortgage-catalog .mortgage-resources { font-size: 12px; line-height: 2; color: var(--color-muted); }
.mortgage-results-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.mortgage-review-preview { max-width: 460px; }
.mortgage-catalog .mortgage-directory-filters { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 16px; margin-top: 20px; }
.mortgage-catalog .mortgage-directory-filters label { flex: 1 1 200px; min-width: 0; }
.mortgage-directory-filters > a { min-height: 44px; display: inline-flex; align-items: center; }
.mortgage-results-heading h2 { font-size: 22px; margin: 0; }
.mortgage-empty { margin: 20px 0; }
.mortgage-empty h3 { font-size: 20px; margin-top: 0; }
.mortgage-catalog .mortgage-snapshot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; font-size: 12px; }
.mortgage-snapshot > div { min-width: 0; }
.mortgage-snapshot dt { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--color-muted); margin-bottom: 4px; }
.mortgage-snapshot dd { margin: 0; font-weight: 600; line-height: 1.6; }
.mortgage-snapshot dd .small { display: block; font-weight: 400; }
.mortgage-catalog .mortgage-payment-highlight { padding: 12px; border-radius: 8px; background: #f0f6f5; }
.mortgage-catalog .mortgage-payment-highlight strong { display: block; font-size: 20px; }
.mortgage-catalog .mortgage-card-assumptions,
.mortgage-catalog .mortgage-card-costs,
.mortgage-catalog .mortgage-newcomer-details { padding: 6px 0; margin-bottom: 12px; border-top: 1px solid var(--color-border); }
.mortgage-catalog .mortgage-card-assumptions[open] > summary { margin-bottom: 12px; }
.mortgage-catalog .mortgage-card-costs h3 { font-size: 15px; margin: 16px 0 8px; }
.mortgage-catalog .mortgage-card-costs table { width: 100%; font-size: 11px; table-layout: fixed; }
.mortgage-catalog .mortgage-card-costs :is(th, td) { padding: 8px 4px; white-space: normal; vertical-align: top; text-align: left; }
.mortgage-catalog .mortgage-card-costs .mortgage-facts,
.mortgage-catalog .mortgage-newcomer-details .mortgage-facts { grid-template-columns: minmax(0, 1fr); font-size: 12px; }
.mortgage-catalog .mortgage-card-actions .mortgage-lender-link { grid-column: 1 / -1; color: var(--color-primary); background: none; border: 1px solid var(--color-border); text-align: center; }
@media (max-width: 900px) {
    .mortgage-catalog .compare-categories { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mortgage-catalog .mortgage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .mortgage-catalog { padding-top: 16px; }
    .mortgage-catalog .compare-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mortgage-catalog .mortgage-filters { padding: 16px; }
    .mortgage-catalog .mortgage-primary-filters { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .mortgage-catalog .mortgage-filter-actions { gap: 12px; }
    .mortgage-catalog .mortgage-filter-actions label { flex-basis: 100%; }
    .mortgage-catalog .mortgage-filter-actions button { flex: 1; }
    .mortgage-catalog .mortgage-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .mortgage-catalog .mortgage-tray { padding: 12px; gap: 10px; }
    .mortgage-catalog .mortgage-tray button { width: 100%; }
}

/* Category navigation and grouped resource dropdowns */
header.site { background: #fff; }
header.site .header-utility {
    display: flex; justify-content: flex-end; gap: 24px;
    max-width: 1200px; margin: 0 auto; padding: 6px 24px;
    border-bottom: 1px solid var(--color-border);
}
header.site .header-utility a { color: var(--color-muted); font-size: 12px; font-weight: 500; text-decoration: none; }
header.site .header-utility a:hover { color: var(--color-primary); text-decoration: underline; }
header.site .bar { position: relative; min-height: 76px; padding-top: 0; padding-bottom: 0; }
header.site .main-navigation { gap: 22px; justify-content: flex-end; }
header.site .nav-group { flex: 0 0 auto; }
header.site .nav-group > summary {
    display: flex; align-items: center; gap: 8px; min-height: 76px; padding: 0;
    color: var(--color-brand); font-size: 14px; font-weight: 600;
    border-bottom: 3px solid transparent; list-style: none; cursor: pointer;
}
header.site .nav-group > summary::-webkit-details-marker { display: none; }
header.site .nav-group > summary::marker { content: ''; }
header.site .nav-group.active > summary,
header.site .nav-group[open] > summary { color: var(--color-primary); border-bottom-color: var(--color-primary); }
header.site .nav-group > summary:hover { color: var(--color-primary); }
header.site .nav-group > summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -4px; border-radius: 4px; }
.nav-chevron { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-top: -4px; }
.nav-group[open] > summary .nav-chevron { transform: rotate(225deg); margin-top: 4px; }
header.site .nav-panel {
    position: absolute; top: 100%; left: 0; right: 0; padding: 28px 32px 32px;
    max-height: calc(100dvh - 140px); overflow-y: auto; overscroll-behavior: contain;
    background: #fff; border: 1px solid var(--color-border); border-top: 0;
    border-radius: 0 0 12px 12px; box-shadow: 0 18px 30px rgba(19,38,58,.14);
}
.nav-panel-heading { color: var(--color-brand); font-size: 24px; font-weight: 700; margin-bottom: 24px; }
.nav-panel-grid { display: grid; grid-template-columns: 1fr 1fr 1.1fr; gap: 32px; }
header.site .nav-panel h2 { margin: 0 0 12px; font-size: 13px; line-height: 1.5; text-transform: uppercase; letter-spacing: .05em; color: var(--color-muted); }
.nav-link-group ul { list-style: none; margin: 0; padding: 0; }
.nav-link-group li + li { margin-top: 4px; }
header.site .nav-panel a { display: block; min-height: 44px; padding: 10px 0; border: 0; color: var(--color-brand); font-size: 14px; font-weight: 500; line-height: 1.5; }
header.site .nav-panel a:hover,
header.site .nav-panel a[aria-current="page"] { color: var(--color-primary); text-decoration: underline; text-underline-offset: 4px; }
.nav-feature { padding: 24px; border-radius: 8px; background: #edf6f4; border-left: 3px solid var(--color-primary); }
header.site .nav-feature h2 { font-size: 20px; line-height: 1.3; text-transform: none; letter-spacing: -.02em; color: var(--color-brand); }
.nav-feature p { font-size: 14px; line-height: 1.65; color: var(--color-muted); margin: 0 0 8px; }
header.site .nav-feature a { font-weight: 700; color: var(--color-primary); }
@media (max-width: 1100px) {
    header.site .bar { position: relative; min-height: 72px; }
    header.site .menu-toggle { display: inline-flex; }
    header.site .main-navigation {
        display: none; position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 0; padding: 8px 24px 16px;
        max-height: calc(100dvh - 115px); overflow-y: auto; overscroll-behavior: contain;
        background: #fff; border-top: 1px solid var(--color-border);
        border-bottom: 1px solid var(--color-border); box-shadow: 0 12px 24px rgba(19,38,58,.12);
    }
    header.site .main-navigation.open { display: flex; animation: none; }
    header.site .nav-group { border-bottom: 1px solid var(--color-border); }
    header.site .nav-group > summary { min-height: 56px; justify-content: space-between; padding: 10px 0; border-bottom: 0; font-size: 16px; }
    header.site .nav-panel { position: static; padding: 8px 0 24px; border: 0; border-radius: 0; box-shadow: none; max-height: none; overflow: visible; }
    .nav-panel-heading { display: none; }
    .nav-panel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
    .nav-feature { grid-column: 1 / -1; }
    header.site .nav-panel h2 { margin-bottom: 4px; }
    header.site .nav-panel a { padding: 10px 0; }
}
@media (max-width: 600px) {
    header.site .header-utility { padding: 6px 16px; gap: 16px; justify-content: space-between; }
    header.site .header-utility a { font-size: 11px; }
    header.site .main-navigation { padding-left: 20px; padding-right: 20px; }
    .nav-panel-grid { grid-template-columns: minmax(0, 1fr); }
    .nav-feature { padding: 20px; }
}

/* Remittance route selection and comparison workspace */
.category-page[data-category="remittance"] #products { padding-top: 8px; }
.remittance-search { overflow: hidden; border: 1px solid var(--color-border); border-radius: 16px; background: #fff; box-shadow: 0 4px 20px rgba(19,38,58,.04); }
.remittance-search__heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 28px 0; }
.remittance-search__heading :is(h1, h2) { margin: 0 0 6px; font-size: clamp(24px, 3vw, 30px); letter-spacing: -.025em; }
.remittance-search__heading p { margin: 0; font-size: 14px; color: var(--color-muted); }
.remittance-converter-link { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; font-size: 13px; font-weight: 600; text-decoration: none; padding: 8px 0; }
.remittance-search .remittance-destination-form { margin: 0; padding: 24px 28px 28px; border: 0; border-radius: 0; }
.remittance-search .remittance-destination-form__controls { display: grid; grid-template-columns: minmax(180px, .8fr) 24px minmax(220px, 1.2fr) auto; gap: 16px; align-items: end; margin: 0; }
.remittance-origin > span, .remittance-destination-field > label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; color: var(--color-muted); }
.remittance-origin strong { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 14px; background: #f5f8fa; border: 1px solid #e1e7ec; border-radius: 8px; font-size: 14px; white-space: nowrap; }
.remittance-country-code { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid #d4e0e6; border-radius: 50%; background: #fff; color: var(--color-muted); font-size: 10px; letter-spacing: .04em; }
.remittance-currency { margin-left: auto; color: var(--color-muted); font-size: 12px; font-weight: 500; }
.remittance-route-arrow { display: flex; align-items: center; justify-content: center; height: 52px; font-size: 24px; color: var(--color-primary); }
.remittance-search #published-destination { min-height: 52px; border-radius: 8px; font-size: 15px; padding: 10px 14px; margin: 0; }
.remittance-search .remittance-destination-form button { min-height: 52px; margin: 0; border-radius: 8px; white-space: nowrap; padding: 12px 20px; font-size: 14px; }
.remittance-search__filters { padding: 20px 28px; border-top: 1px solid var(--color-border); background: #f8fafb; }
.remittance-search .comparison-filters { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.15fr auto; align-items: end; gap: 14px; margin: 0; }
.remittance-search .comparison-filters label { font-size: 12px; font-weight: 600; gap: 7px; }
.remittance-search .comparison-filters :is(input, select) { font-size: 13px; font-weight: 400; min-height: 44px; border-color: #cbd5df; }
.remittance-search #compare-reset { min-height: 44px; padding: 10px 14px; margin: 0; font-size: 13px; border-color: #cbd5df; background: #fff; }
.remittance-search__note { margin: 14px 0 0; font-size: 12px; line-height: 1.6; color: var(--color-muted); }
.comparison-support { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; margin: 16px 0 28px; }
.comparison-support .category-criteria, .comparison-finder { margin: 0; border: 1px solid var(--color-border); border-radius: 10px; padding: 0; background: #fff; overflow: hidden; }
.comparison-support summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; min-height: 88px; cursor: pointer; list-style: none; }
.comparison-support summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -4px; border-radius: 10px; }
.comparison-support summary::-webkit-details-marker { display: none; }
.comparison-support summary::marker { content: ''; }
.comparison-support .category-criteria summary h2 { font-size: 15px; line-height: 1.5; }
.comparison-support .category-criteria summary::after, .comparison-disclosure-icon { content: '+'; font-size: 23px; font-weight: 400; line-height: 1; color: var(--color-primary); }
.comparison-support .category-criteria details[open] > summary { margin-bottom: 0; border-bottom: 1px solid var(--color-border); }
.comparison-support .category-criteria details[open] > summary::after { content: '−'; }
.comparison-support .category-criteria :is(ul, p) { margin: 16px 20px; }
.comparison-support .category-criteria li { line-height: 1.6; }
.comparison-finder summary strong { display: block; color: var(--color-brand); font-size: 15px; }
.comparison-finder summary strong + span { display: block; margin-top: 2px; font-size: 12px; color: var(--color-muted); }
.comparison-finder[open] .comparison-disclosure-icon { transform: rotate(45deg); }
.comparison-finder .finder-card { border-radius: 0; box-shadow: none; border-top: 1px solid var(--color-border); padding: 24px; }
.category-page[data-category="remittance"] .category-facts { padding: 24px; border: 1px solid var(--color-border); border-radius: 12px; background: #fff; margin-top: 0; }
.category-page[data-category="remittance"] .category-facts > summary { font-size: 20px; }
.category-page[data-category="remittance"] .category-facts > p { max-width: 85ch; }
.category-page[data-category="remittance"] .category-facts thead th { background: #f5f8fa; }
@media (max-width: 1000px) {
    .remittance-search .remittance-destination-form__controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .remittance-route-arrow { display: none; }
    .remittance-search .remittance-destination-form button { grid-column: 1 / -1; }
    .remittance-search .comparison-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .remittance-search .comparison-filters > label:first-child { grid-column: 1 / -1; }
    .remittance-search #compare-reset { align-self: end; }
}
@media (max-width: 600px) {
    .remittance-search__heading { padding: 20px 20px 0; align-items: start; flex-direction: column; gap: 8px; }
    .remittance-search .remittance-destination-form { padding: 16px 20px 20px; }
    .remittance-search .remittance-destination-form__controls { grid-template-columns: minmax(0, 1fr); }
    .remittance-search__filters { padding: 20px; }
    .remittance-search .comparison-filters { grid-template-columns: minmax(0, 1fr); }
    .comparison-support { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 20px; }
    .category-page[data-category="remittance"] .category-facts { padding: 20px 16px; }
    .category-page[data-category="remittance"] .category-facts > summary { font-size: 18px; }
}

/* Account and credit comparison workspaces */
.category-page:is([data-category="credit-builder"], [data-category="checking"], [data-category="secured-card"]) #products { padding-top: 8px; }
.category-search { overflow: hidden; border: 1px solid var(--color-border); border-radius: 16px; background: #fff; box-shadow: 0 4px 20px rgba(19,38,58,.04); }
.category-search__heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 28px 0; }
.category-search__heading :is(h1, h2) { margin: 0 0 6px; font-size: clamp(24px, 3vw, 30px); letter-spacing: -.025em; }
.category-search__heading p { margin: 0; font-size: 14px; color: var(--color-muted); }
.category-search__heading > a { display: inline-flex; gap: 8px; flex-shrink: 0; font-size: 13px; font-weight: 600; text-decoration: none; padding: 8px 0; }
.category-search .category-scenarios { padding: 22px 28px; margin: 0; border: 0; background: none; }
.category-search .category-scenarios h2 { font-size: 12px; font-weight: 600; color: var(--color-muted); margin: 0 0 10px; }
.category-search .category-scenarios__links { display: flex; flex-wrap: wrap; gap: 8px; }
.category-search .category-scenarios__links a { min-height: 38px; padding: 8px 12px; font-size: 12px; font-weight: 500; border-radius: 999px; box-shadow: none; }
.category-search [data-scenario-status]:empty { display: none; }
.category-search [data-scenario-status]:not(:empty) { margin: 12px 0 0; font-size: 12px; }
.category-search__filters { padding: 24px 28px; border-top: 1px solid var(--color-border); background: #f8fafb; }
.category-search .comparison-filters { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px 16px; align-items: end; margin: 0; }
.category-search .comparison-filters > label { grid-column: span 2; font-size: 12px; font-weight: 600; gap: 7px; }
.category-search .comparison-filters > label:first-child { grid-column: span 3; }
.category-search .comparison-filters :is(input, select) { font-size: 13px; font-weight: 400; min-height: 44px; border-color: #cbd5df; }
.category-search #compare-reset { min-height: 44px; padding: 10px; margin: 0; font-size: 13px; border-color: #cbd5df; background: #fff; white-space: nowrap; }
.category-search__note { margin: 16px 0 0; font-size: 12px; line-height: 1.6; color: var(--color-muted); }
.category-page:is([data-category="credit-builder"], [data-category="checking"], [data-category="secured-card"]) .category-facts { padding: 24px; border: 1px solid var(--color-border); border-radius: 12px; background: #fff; margin-top: 0; }
.category-page:is([data-category="credit-builder"], [data-category="checking"], [data-category="secured-card"]) .category-facts > summary { font-size: 20px; }
.category-page:is([data-category="credit-builder"], [data-category="checking"], [data-category="secured-card"]) .category-facts > p { max-width: 85ch; }
.category-page:is([data-category="credit-builder"], [data-category="checking"], [data-category="secured-card"]) .category-facts thead th { background: #f5f8fa; }
.comparison-guidance { margin: 16px 0 24px; padding: 16px 20px; border: 1px solid var(--color-border); border-radius: 10px; background: #fff; }
.comparison-guidance > summary { font-size: 15px; font-weight: 600; cursor: pointer; color: var(--color-brand); }
.comparison-guidance .category-decision-help { margin-bottom: 0; background: #f8fafb; }
.products-section > .product-shortlist { margin: 28px 0; }
@media (max-width: 1000px) {
    .category-search__heading { align-items: start; flex-direction: column; gap: 8px; }
    .category-search .comparison-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .category-search .comparison-filters > label { grid-column: span 1; }
    .category-search .comparison-filters > label:first-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
    .category-search__heading { padding: 20px 20px 0; }
    .category-search .category-scenarios { padding: 16px 20px 20px; }
    .category-search .category-scenarios__links a { flex: 1 1 100%; justify-content: center; text-align: center; }
    .category-search__filters { padding: 20px; }
    .category-search .comparison-filters { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .category-search .comparison-filters > label, .category-search .comparison-filters > label:first-child { grid-column: 1; }
    .category-page:is([data-category="credit-builder"], [data-category="checking"], [data-category="secured-card"]) .category-facts { padding: 20px 16px; }
    .category-page:is([data-category="credit-builder"], [data-category="checking"], [data-category="secured-card"]) .category-facts > summary { font-size: 18px; }
}

/* Connected mortgage research */
.mortgage-research { margin: 24px auto 48px; }
.mortgage-research h1 { font-size: clamp(28px, 4vw, 38px); margin: 0 0 12px; }
.research-start, .research-resources, .research-journey-actions, .research-card-actions, .research-selection-bar, .research-step-actions, .mortgage-pagination { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.research-start { margin: 20px 0; }
.research-start p { margin: 0; }
.research-resources { margin: 20px 0; font-size: 14px; }
.research-journey { padding: 18px 20px; margin: 20px 0; background: #edf6f4; border: 1px solid #c8e1da; border-radius: 12px; }
.research-journey p { margin: 6px 0 12px; }
.research-journey-actions { font-size: 14px; }
.research-journey-actions form { margin: 0; }
.research-results-heading, .research-program-heading { display: flex; justify-content: space-between; align-items: start; gap: 16px; flex-wrap: wrap; }
.research-results-heading h2 { margin: 0; font-size: 24px; }
.research-results-heading { margin: 24px 0 8px; }
.research-selection-bar { padding: 14px 0; border-bottom: 1px solid var(--color-border); margin-bottom: 16px; }
.research-results { display: grid; gap: 14px; }
.research-program { background: #fff; border: 1px solid var(--color-border); padding: 22px; border-radius: 12px; }
.research-program h3 { font-size: 19px; margin: 0 0 6px; }
.research-program-heading p { margin: 0 0 10px; }
.research-status { background: #edf2f6; padding: 6px 10px; border-radius: 6px; font-size: 13px; font-weight: 600; }
.research-status[data-outcome="Satisfied"] { background: #e6f4ec; color: #16543a; }
.research-status[data-outcome="Mismatch"] { background: #faeae7; color: #85372a; }
.research-status[data-outcome="Conditional"] { background: #fff3d5; color: #6c4e11; }
.research-price-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 14px 0; font-size: 14px; }
.research-price-summary strong { color: var(--color-primary); }
.research-program details { margin: 12px 0; }
.research-program summary, .research-fit summary { cursor: pointer; font-size: 14px; font-weight: 600; }
.research-program details .facts { width: 100%; }
.research-program label { display: block; font-size: 14px; margin: 12px 0; }
.research-program select { width: 100%; min-height: 44px; }
.research-program .research-compare { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; }
.research-compare input { width: 18px; height: 18px; }
.research-card-actions { font-size: 13px; border-top: 1px solid var(--color-border); padding-top: 14px; }
.research-fit { font-size: 13px; text-align: left; font-weight: 400; margin: 12px 0; }
.mortgage-pagination { justify-content: space-between; padding: 24px 0; font-size: 14px; }
.mortgage-pagination a { min-height: 44px; display: inline-flex; align-items: center; }
.scenario-page { max-width: 820px; }
.scenario-page h1 { margin-top: 20px; }
.research-questionnaire { background: #fff; border: 1px solid var(--color-border); border-radius: 12px; padding: 24px; }
.research-questionnaire fieldset { border: 0; padding: 0; margin: 0 0 24px; min-width: 0; }
.research-questionnaire legend { font-size: 20px; font-weight: 700; margin-bottom: 18px; }
.research-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 16px; }
.research-fields label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.research-fields :is(input, select), .research-coverage-search input { width: 100%; min-width: 0; min-height: 46px; padding: 10px; border: 1px solid var(--color-control-border); border-radius: 6px; background: #fff; font: inherit; }
.research-coverage-search { display: flex; align-items: end; gap: 16px; flex-wrap: wrap; margin: 20px 0; }
.research-calculator-origin { padding: 18px 20px; border: 1px solid #c8e1da; border-radius: 12px; background: #edf6f4; margin-top: 16px; font-size: 14px; }
.research-calculator-origin p:last-child { margin: 0; }
.mortgage-research [hidden], .research-questionnaire [hidden], .research-journey [hidden], .research-card-actions [hidden], .loan-calculator [hidden] { display: none !important; }
.validation-summary-valid { display: none; }
.mortgage-research :is(a, button, select, input, summary):focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
@media (max-width: 600px) {
    .research-fields { grid-template-columns: minmax(0, 1fr); }
    .research-program, .research-questionnaire { padding: 18px; }
    .research-program { min-width: 0; overflow-wrap: anywhere; }
    .research-program details { overflow-x: auto; }
    .research-card-actions { flex-direction: column; align-items: stretch; gap: 6px; }
    .research-card-actions a { padding: 8px 0; }
    .research-selection-bar { gap: 10px; }
    .research-selection-bar button { flex: 1 1 auto; }
}
.research-comparison-evidence { margin: 20px 0; }
.research-comparison-evidence > summary { cursor: pointer; min-height: 44px; font-weight: 600; }
@media (min-width: 1000px) {
    .research-program { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 2fr); gap: 8px 28px; padding: 18px 22px; }
    .research-program-heading { grid-column: 1; grid-row: 1 / span 2; display: block; }
    .research-program-heading .research-status { display: inline-block; }
    .research-program > .small { grid-column: 1; grid-row: 3; margin: 0; }
    .research-program > [data-scenario-panel], .research-program > p:not(.small), .research-program > label:not(.research-compare) { grid-column: 2; }
    .research-program .research-requirements { grid-column: 2; margin: 0; }
    .research-program .research-compare { grid-column: 1; margin: 0; }
    .research-program [data-research-actions] { grid-column: 2; }
}
.research-program .research-program-minimums { grid-column: 2; grid-row: auto; margin: 4px 0; }
.mortgage-comparison-table thead th > label { display: block; margin-top: 10px; font-size: 13px; }
/* Product website scan: admin controls and review evidence */
.product-website-scan, .product-website-scan-result { min-width: 0; overflow-wrap: anywhere; }
.product-website-scan { margin: 24px 0; }
.product-website-scan button { margin-top: 16px; white-space: normal; }
.product-website-scan-result .table-scroll { max-width: 100%; }
.product-website-scan-result progress { width: min(100%, 360px); }

/* --- Pros / cons card (product detail) --- */
.pros-cons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    margin: 0 auto 28px;
    max-width: 880px;
    overflow: hidden;
}
.pros-cons__col { padding: 20px 24px; }
.pros-cons__col--pros { border-right: 1px solid var(--color-border); background: #F3FBF7; }
.pros-cons__col--cons { background: #FDF7F4; }
.pros-cons__col h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-navy);
    margin: 0 0 12px;
}
.pros-cons__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
}
.pros-cons__col--pros .pros-cons__icon { background: var(--color-success-bg); color: var(--color-success); }
.pros-cons__col--cons .pros-cons__icon { background: #FEE2E2; color: var(--color-danger); }
.pros-cons__col ul { margin: 0; padding: 0; list-style: none; }
.pros-cons__col li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text);
}
.pros-cons__col li:last-child { margin-bottom: 0; }
.pros-cons__col--pros li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--color-success);
    font-weight: 700;
}
.pros-cons__col--cons li::before {
    content: "✕";
    position: absolute;
    left: 0;
    color: var(--color-danger);
    font-weight: 700;
}
.pros-cons__note { max-width: 880px; margin: -16px auto 28px; }
@media (max-width: 640px) {
    .pros-cons { grid-template-columns: 1fr; }
    .pros-cons__col--pros { border-right: none; border-bottom: 1px solid var(--color-border); }
}

/* --- Mortgage product detail redesign --- */
.mortgage-detail { max-width: 1200px; margin: 0 auto; padding: 24px 24px 64px; font-size: 16px; }
.mortgage-requirement-facts { margin: 16px 0; }
.mortgage-requirement-facts > div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--color-border); text-align: left; }
.mortgage-requirement-facts dt { font-weight: 600; }
.mortgage-requirement-facts dd { margin: 0; min-width: 0; overflow-wrap: break-word; word-break: normal; line-height: 1.6; }
.md-program-selector { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px 12px; margin: 20px 0; }
.mortgage-detail .md-program-selector label { grid-column: 1 / -1; margin: 0; }
.md-program-selector select { width: 100%; min-width: 0; height: 44px; }
.md-program-selector button { height: 44px; padding: 10px 16px; align-self: end; }
.mortgage-detail .md-association-notice { padding: 0; border: 0; background: transparent; border-radius: 0; font-size: 14px; margin: 12px 0; }
@media(max-width:640px) { .md-program-selector { grid-template-columns: 1fr; } .md-program-selector button { justify-self: start; } }
.mortgage-detail .pros-cons { gap: 16px; border: 0; background: transparent; }
.mortgage-detail .pros-cons__col { background: white; border: 1px solid var(--color-border); border-radius: 12px; padding: 24px; }
.mortgage-detail .pros-cons__col--cons .pros-cons__icon { color: #64748b; background: #f1f5f9; }
.mortgage-detail .pros-cons__col--cons li::before { content: "!"; color: #64748b; }
@media(max-width: 640px) {
    .mortgage-requirement-facts > div { grid-template-columns: 1fr; gap: 6px; }
    .mortgage-detail .md-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mortgage-detail .md-breadcrumb { font-size: 14px; margin: 0 0 16px; }
.mortgage-detail .md-breadcrumb a { color: var(--color-teal); }

.md-nav {
    display: flex; flex-wrap: wrap; gap: 4px;
    position: sticky; top: var(--mortgage-header-height, 100px); z-index: 40;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: 8px 0; margin-bottom: 28px;
}
.md-nav a {
    padding: 6px 12px; border-radius: 999px;
    font-size: 14px; color: var(--color-text-muted); text-decoration: none;
}
.md-nav a:hover { color: var(--color-navy); background: var(--color-bg-muted); }

.mortgage-detail__layout { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 32px; align-items: start; }
.mortgage-detail__main { min-width: 0; }
.md-action-card .button, .md-mobile-cta .button { white-space: nowrap; font-size: 16px; }
.md-action-card { padding: 24px; }
.mortgage-detail__aside { position: sticky; top: 120px; }
.md-action-card {
    border: 1px solid var(--color-border); border-radius: var(--radius-card);
    padding: 20px; background: var(--color-surface);
    display: flex; flex-direction: column; gap: 10px;
}
.md-action-card .button { text-align: center; }

.md-section { margin-bottom: 40px; }
.md-section h1 { font-size: 30px; margin: 4px 0 8px; }
.md-lead { font-size: 17px; color: var(--color-text); }
.md-availability {
    border-left: 3px solid var(--color-teal); background: var(--color-teal-soft, #E6F4F3);
    padding: 10px 14px; border-radius: 0 8px 8px 0; font-size: 14px;
}
.md-program h3 { font-size: 17px; margin: 20px 0 8px; }
.md-steps { padding-left: 22px; line-height: 1.6; }
.md-rate-actions { display: flex; flex-wrap: wrap; gap: 16px; font-size: 14px; }
.md-rate-actions a { color: var(--color-teal); }

.md-glance {
    display: grid; grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 1px; margin: 0; border: 1px solid var(--color-border);
    border-radius: var(--radius-card); overflow: hidden; background: var(--color-border);
}
.md-glance > div { background: var(--color-surface); padding: 14px 18px; }
.md-glance dt { font-size: 13px; color: var(--color-text-muted); margin-bottom: 4px; }
.md-glance dd { margin: 0; font-size: 16px; font-weight: 600; color: var(--color-navy); word-break: normal; overflow-wrap: normal; }
.mortgage-detail .md-section { scroll-margin-top: calc(var(--mortgage-header-height, 100px) + 70px); }

.md-rate-scroll { position: relative; overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.md-rate-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 14px; }
.md-rate-col-option { width: 25%; }
.md-rate-col-number { width: 11%; }
.md-rate-col-points { width: 13%; }
.md-rate-col-payment { width: 23%; }
.md-rate-col-action { width: 17%; }
.md-rate-table th, .md-rate-table td { padding: 12px 6px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-border); }
.md-estimate-label { display: block; font-weight: 400; font-size: 12px; }
@media(max-width:1199px) { .md-rate-table { min-width: 760px; } }
.md-rate-table thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); background: var(--color-bg-muted); }
.md-rate-row th { font-weight: 600; color: var(--color-navy); }
.md-rate-row--stale { opacity: .65; }
.md-rate-flags { display: block; margin-top: 4px; font-weight: 400; }
.md-rate-flags .status { font-size: 12px; color: var(--color-text-muted); }
.md-flag { display: inline-block; font-size: 12px; color: #92650A; background: #FDF3E1; border-radius: 4px; padding: 1px 6px; margin-left: 6px; }
.md-rate-toggle {
    background: none; border: 1px solid var(--color-border); border-radius: 8px;
    color: var(--color-teal); font-size: 13px; padding: 8px 6px; width: 100%; cursor: pointer; white-space: nowrap;
}
.md-rate-toggle:hover { border-color: var(--color-teal); }
.md-rate-detail-panel { margin-top: 20px; }
.mortgage-detail .pros-cons { max-width: none; margin: 0 0 8px; }

.md-mobile-cta { display: none; }
.mortgage-research { max-width: 1200px; margin: auto; font-size: 16px; }
.research-program.research-program--compact { display: block; position: relative; padding: 24px; overflow-wrap: normal; }
.research-program--compact .research-program-heading { padding-right: 110px; }
.research-program--compact .research-compare { position: absolute; right: 24px; top: 12px; }
.research-card-facts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.research-card-facts dt { font-weight: 600; }
.research-card-facts dd { margin: 4px 0 0; overflow-wrap: break-word; }
.research-selection-bar[hidden] { display: none; }
@media(max-width:640px) { .research-card-facts { grid-template-columns: 1fr; gap: 12px; } }

@media (max-width: 900px) {
    .mortgage-detail__layout { grid-template-columns: 1fr; }
    .mortgage-detail__aside { display: none; }
}
@media (max-width: 640px) {
    .mortgage-detail { padding: 16px 16px 96px; }
    .md-nav { top: var(--mortgage-header-height, 100px); flex-wrap: nowrap; overflow-x: auto; }
    .md-nav a { flex-shrink: 0; }
    .mortgage-detail .md-section { scroll-margin-top: calc(var(--mortgage-header-height, 100px) + 70px); }
    .md-mobile-cta {
        display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
        background: var(--color-surface); border-top: 1px solid var(--color-border);
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    }
    .md-mobile-cta .button { display: block; text-align: center; }
}
.mortgage-detail .md-rate-row > td { min-width: 0; white-space: nowrap; overflow-wrap: normal; word-break: normal; }
.mortgage-detail .md-rate-row > th { min-width: 0; word-break: normal; overflow-wrap: normal; }
.mortgage-detail .md-glance { grid-template-columns: repeat(var(--fact-count,4),minmax(0,1fr)); }
.md-selected-rate dl { display: flex; gap: 24px; }
.md-selected-rate dd { margin: 4px 0 0; white-space: nowrap; font-size: 20px; font-weight: 600; }
.md-missing-summary,.md-association-notice,.mortgage-missing-costs { padding: 16px; border: 1px solid var(--color-border); border-radius: 8px; background: white; line-height: 1.6; }
.mortgage-catalog { max-width: 1200px; }
.mortgage-catalog .mortgage-filters--compact { padding: 16px; box-shadow: none; margin: 16px 0; }
.mortgage-catalog .mortgage-filters--compact .mortgage-primary-filters { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; }
.mortgage-catalog .mortgage-filters--compact label { font-size: 14px; }
.mortgage-catalog .mortgage-filter-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 12px; }
.mortgage-catalog .mortgage-filter-drawer { margin: 0; padding: 0; border: 0; }
.mortgage-filter-drawer__body { display: grid; gap: 16px; }
.mortgage-filter-drawer[open] > summary { position: fixed; right: 24px; top: 12px; z-index: 102; background: white; padding: 12px; }
.mortgage-filter-drawer[open] > summary::after { content: ' — Close'; }
.mortgage-filter-drawer[open] .mortgage-filter-drawer__body { position: fixed; z-index: 101; right: 0; top: 0; bottom: 0; width: min(440px,100vw); padding: 72px 24px 24px; background: white; border-left: 1px solid var(--color-border); overflow-y: auto; box-shadow: -8px 0 24px #13263a18; }
.mortgage-example-list { display: grid; gap: 16px; }
.mortgage-example-row { padding: 20px 24px; border: 1px solid var(--color-border); border-radius: 12px; background: white; position: relative; min-width: 0; }
.mortgage-example-row__main { display: grid; grid-template-columns: minmax(220px,2fr) minmax(145px,.7fr) minmax(145px,.7fr) minmax(170px,1fr) 140px; align-items: start; gap: 20px; }
.mortgage-example-row__numbers { display: contents; }
.mortgage-example-row__main h3 { font-size: 18px; margin: 0 0 6px; }
.mortgage-example-row__main p { margin: 0 0 6px; }
.mortgage-example-row__numbers dt { font-size: 14px; }
.mortgage-example-row__numbers dd { margin: 6px 0 0; font-size: 20px; font-weight: 600; white-space: nowrap; overflow-wrap: normal; word-break: normal; }
.mortgage-example-row__actions { display: grid; gap: 12px; }
.mortgage-example-row__actions .button { white-space: nowrap; padding: 10px 16px; }
.mortgage-example-row__actions label { display: flex; align-items: center; gap: 8px; }
.mortgage-example-row .mortgage-assumptions-line { margin: 12px 0 4px; font-size: 14px; }
.mortgage-example-evidence > summary { font-size: 14px; }
.mortgage-page .mortgage-tray[hidden] { display: none; }
.mortgage-browse-filters { display: grid; grid-template-columns: 1fr 1fr 1fr auto auto; gap: 16px; align-items: end; margin: 24px 0; }
.mortgage-browse-filters label { display: grid; gap: 6px; min-width: 0; }
.mortgage-browse-filters input,.mortgage-browse-filters select { width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid var(--color-control-border); border-radius: 8px; background: white; font: inherit; }
.research-program.research-program--row { display: grid; grid-template-columns: minmax(220px,1.8fr) repeat(3,minmax(105px,1fr)) minmax(160px,1fr); align-items: start; gap: 20px; padding: 24px; position: relative; }
.research-requirements-overview { grid-column: 2 / span 3; min-width: 0; }
.research-row-facts { display: grid; grid-template-columns: repeat(var(--known-fact-count,3),minmax(0,1fr)); gap: 20px; margin: 0; }
.research-missing-facts { margin: 8px 0 0; line-height: 1.5; }
.research-row-facts dt { font-size: 14px; font-weight: 600; }
.research-row-facts dd { margin: 6px 0 0; line-height: 1.5; overflow-wrap: break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.research-program--row .research-program-identity { padding-right: 8px; }
.research-program--row .research-program-identity p { margin: 0 0 8px; }
.research-inline-fit { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; font-size: 14px; color: var(--color-text-muted); }
.research-program--row .research-compare { position: absolute; top: 0; right: 24px; margin: 0; min-height: 36px; }
.research-program--row .research-program-pricing { padding-top: 16px; min-width: 0; }
.research-program-pricing > p { margin: 0 0 10px; white-space: nowrap; }
.research-program-pricing .button { white-space: nowrap; }
.research-program-pricing details { margin: 4px 0; }
@media(max-width:1100px) {
    .research-program.research-program--row { grid-template-columns: minmax(180px,1.5fr) repeat(3,minmax(90px,1fr)) minmax(140px,1fr); gap: 16px; padding: 20px; }
    .mortgage-example-row__main { grid-template-columns: minmax(180px,1.5fr) 145px 145px minmax(170px,1fr) 130px; gap: 16px; }
}
@media(max-width:1000px) {
    .mortgage-example-row__main { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .mortgage-example-row__main > header { grid-column: 1 / -1; }
    .mortgage-example-row__actions { grid-column: 1 / -1; display: flex; align-items: center; }
}
@media(max-width:900px) {
    .research-program.research-program--row { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .research-program--row .research-program-identity { grid-column: 1 / -1; padding-right: 90px; }
    .research-requirements-overview { grid-column: 1 / -1; }
    .research-program--row .research-program-pricing { grid-column: 1 / -1; }
    .mortgage-example-row__main { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .mortgage-example-row__main > header { grid-column: 1 / -1; }
    .mortgage-example-row__actions { grid-column: 1 / -1; display: flex; align-items: center; }
    .mortgage-browse-filters { grid-template-columns: 1fr 1fr; }
}
@media(max-width:640px) {
    .mortgage-detail .md-glance { grid-template-columns: repeat(min(var(--fact-count,4),2),minmax(0,1fr)); }
    .mortgage-catalog .mortgage-filters--compact .mortgage-primary-filters { grid-template-columns: 1fr 1fr; }
    .mortgage-browse-filters { grid-template-columns: 1fr; }
    .mortgage-example-row { padding: 16px; }
    .md-rate-detail-panel .mortgage-price-grid > div:nth-child(n+3) { grid-column: 1 / -1; }
    .md-rate-detail-panel .mortgage-price-grid dd { white-space: nowrap; overflow-wrap: normal; word-break: normal; }
    .mortgage-example-row__main { grid-template-columns: 1fr 1fr; }
    .mortgage-example-row__numbers > div:last-child { grid-column: 1 / -1; }
    .research-program.research-program--row { grid-template-columns: 1fr; }
    .research-program--row .research-program-pricing { grid-column: auto; }
    .research-program--row .research-program-identity { grid-column: auto; }
    .research-row-facts { grid-template-columns: 1fr; gap: 12px; }
}
.mortgage-pagination { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin: 28px 0 8px; padding: 24px 0; border-top: 1px solid var(--color-border); position: relative; }
.mortgage-pagination__summary p { margin: 0; font-size: 14px; color: var(--color-text); }
.mortgage-pagination__summary .mortgage-pagination__position { margin-top: 4px; color: var(--color-muted); }
.mortgage-pagination__controls { display: flex; align-items: center; gap: 10px; }
.mortgage-pagination__pages { display: flex; align-items: center; list-style: none; gap: 4px; padding: 0; margin: 0; }
.mortgage-pagination__pages--mobile { display: none; }
.mortgage-pagination__number,.mortgage-pagination__direction { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-width: 44px; min-height: 44px; border: 1px solid var(--color-border); border-radius: 8px; background: white; color: var(--color-navy); font-size: 14px; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; position: relative; }
.mortgage-pagination__direction { padding: 0 14px; }
.mortgage-pagination__number[aria-current=page] { background: var(--color-primary); border-color: var(--color-primary); color: white; }
.mortgage-pagination a:hover { color: var(--color-primary); border-color: var(--color-primary); background: #f1f8f8; text-decoration: none; }
.mortgage-pagination a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.mortgage-pagination__disabled { background: transparent; color: var(--color-muted); opacity: .5; }
.mortgage-pagination__ellipsis { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; min-height: 44px; color: var(--color-muted); }
@media(max-width:640px) {
    .mortgage-pagination { align-items: stretch; gap: 14px; padding: 20px 0; }
    .mortgage-pagination__summary { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; width: 100%; }
    .mortgage-pagination__summary .mortgage-pagination__position { margin-top: 0; }
    .mortgage-pagination__controls { justify-content: space-between; width: 100%; gap: 6px; }
    .mortgage-pagination__pages--desktop { display: none; }
    .mortgage-pagination__pages--mobile { display: flex; gap: 2px; }
    .mortgage-pagination__direction { padding: 0; width: 44px; }
    .mortgage-pagination__direction-text { display: none; }
    .mortgage-pagination__ellipsis { min-width: 12px; }
}

/* Keep calculator inputs close to their introduction. */
.micro-tools > h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); margin: .75rem 0; }
.micro-tools > p { line-height: 1.5; }
.destination-only .tool-budget-head, .destination-only .tool-budget-row { grid-template-columns: 1.2fr 1fr; }
.micro-tools [hidden] { display: none !important; }
.fx-links { flex-wrap: wrap; align-items: center; }
.fx-quote { margin-top: 1rem; }
.fx-quote label { display: block; margin: .75rem 0 .3rem; }
.fx-quote input { width: 100%; min-height: 44px; padding: .6rem; box-sizing: border-box; }
#fx-retry { margin-top: .75rem; }