/*
 * GovtSave — premium responsive and theme-contrast layer
 * Loaded after page-specific and base stylesheets.
 * Layout rules remain scoped to mobile/tablet widths; contrast tokens are shared site-wide.
 */

@media (max-width: 820px) {
  /* Country selector: show every market together instead of an off-screen rail. */
  .global-market-rail {
    margin-top: 22px;
    padding: 13px;
    border-radius: 18px;
    background: rgba(3, 28, 36, .42);
    box-shadow: 0 16px 36px rgba(0, 20, 24, .14);
    backdrop-filter: blur(14px);
  }

  .global-market-rail-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 5px 10px;
    margin-bottom: 11px;
    line-height: 1.35;
  }

  .global-market-rail-heading small {
    text-align: right;
    font-size: .68rem;
  }

  .global-hero .global-market-rail-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    max-width: 100%;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
    overscroll-behavior: auto;
  }

  .global-hero .global-market-rail-list > .market-chip {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 8px;
    border-radius: 12px;
    scroll-snap-align: none;
    white-space: normal;
    transform: none;
  }

  .global-hero .market-chip > span:nth-child(2) {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: clamp(.65rem, 1.8vw, .75rem);
    line-height: 1.2;
  }

  .global-hero .market-chip-flag {
    flex: 0 0 27px;
    width: 27px;
    height: 23px;
    border-radius: 6px;
  }

  .global-hero .market-chip > i {
    flex: 0 0 auto;
    margin-left: 0;
    font-size: .55rem;
  }

  /* Keep country-page section links in a visible, compact grid—no horizontal swipe. */
  body[class*="market-page"] :is(
    .mp-section-nav, .uk-section-nav, .nz-section-nav, .ie-section-nav,
    .sg-section-nav, .ca-section-nav, .au-section-nav, .de-section-nav, .ph-section-nav
  ) {
    position: relative;
    top: auto;
    z-index: 20;
    max-width: 100%;
    overflow: visible;
    border-radius: 0;
  }

  body[class*="market-page"] :is(
    .mp-section-nav-inner, .uk-section-nav-inner, .nz-section-nav-inner,
    .ie-section-nav-inner, .sg-section-nav-inner, .ca-section-nav-inner,
    .au-section-nav-inner, .de-section-nav-inner, .ph-section-nav-inner
  ) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 6px;
    min-height: 0;
    max-width: 100%;
    padding-top: 9px;
    padding-bottom: 9px;
    overflow: visible;
    scroll-snap-type: none;
  }

  body[class*="market-page"] :is(
    .mp-section-nav-inner, .uk-section-nav-inner, .nz-section-nav-inner,
    .ie-section-nav-inner, .sg-section-nav-inner, .ca-section-nav-inner,
    .au-section-nav-inner, .de-section-nav-inner, .ph-section-nav-inner
  ) > span {
    display: none;
  }

  body[class*="market-page"] :is(
    .mp-section-nav-inner, .uk-section-nav-inner, .nz-section-nav-inner,
    .ie-section-nav-inner, .sg-section-nav-inner, .ca-section-nav-inner,
    .au-section-nav-inner, .de-section-nav-inner, .ph-section-nav-inner
  ) a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    min-height: 38px;
    padding: 7px 4px;
    border: 1px solid rgba(100, 116, 139, .18);
    border-radius: 10px;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: .68rem;
    line-height: 1.2;
  }

  body[class*="market-page"] :is(
    .mp-nav, .uk-nav, .nz-nav, .ie-nav, .sg-nav, .ca-nav, .au-nav, .de-nav, .ph-nav
  ) {
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    gap: 7px;
    overflow: visible;
    white-space: normal;
  }

  body[class*="market-page"] :is(
    .mp-nav, .uk-nav, .nz-nav, .ie-nav, .sg-nav, .ca-nav, .au-nav, .de-nav, .ph-nav
  ) a {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* Make dense dashboards feel intentionally composed on a phone. */
  body[class*="market-page"] :is(
    .mp-section, .uk-section, .nz-section, .ie-section, .sg-section,
    .ca-section, .au-section, .de-section, .ph-section
  ) {
    padding-top: 38px;
    padding-bottom: 38px;
    scroll-margin-top: 18px;
  }

  body[class*="market-page"] :is(
    .mp-section-heading, .uk-section-heading, .nz-section-heading,
    .ie-section-heading, .sg-section-heading, .ca-section-heading,
    .au-section-heading, .de-section-heading, .ph-section-heading
  ) {
    margin-bottom: 22px;
  }

  body[class*="market-page"] :is(
    .mp-section-heading h2, .uk-section-heading h2, .nz-section-heading h2,
    .ie-section-heading h2, .sg-section-heading h2, .ca-section-heading h2,
    .au-section-heading h2, .de-section-heading h2, .ph-section-heading h2
  ) {
    font-size: clamp(1.55rem, 6.5vw, 2.15rem);
    line-height: 1.17;
    letter-spacing: -.025em;
    overflow-wrap: anywhere;
  }

  body[class*="market-page"] :is(
    .mp-card, .mp-rate-card, .mp-calculator-shell, .mp-review-card,
    .mp-planner-card, .uk-card, .ca-card, .de-card, .au-card,
    .nz-card, .ie-card, .sg-card, .ph-card
  ) {
    min-width: 0;
    max-width: 100%;
  }

  body[class*="market-page"] :is(
    .mp-hero-grid, .uk-hero-grid, .nz-hero-grid, .ie-hero-grid,
    .sg-hero-grid, .ca-hero-grid, .au-hero-grid, .de-hero-grid, .ph-hero-grid
  ) {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  body[class*="market-page"] :is(
    .mp-shell, .uk-shell, .nz-shell, .ie-shell, .sg-shell,
    .ca-shell, .au-shell, .de-shell, .ph-shell, .ph-wrap
  ) {
    min-width: 0;
    max-width: 100%;
  }

  /* Keep dense tables within their own scroll surface instead of shifting the page. */
  body[class*="market-page"] :is(
    .mp-table-wrap, .uk-table-wrap, .ca-table-wrap, .de-table-wrap,
    .au-table-wrap, .nz-table-wrap, .ie-table-wrap, .sg-table-wrap, .ph-table-wrap,
    .mp-history-table-wrap, .mp-comparison-wrap, .mp-rate-table-wrap
  ) {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .hero-actions .btn,
  .mp-hero-actions .mp-button,
  .auth-card button,
  .auth-card .btn {
    min-height: 44px;
  }

  .calculator-card,
  .savings-goals-dashboard-page .savings-goal-card,
  .sem-card,
  .sem-stat-card {
    min-width: 0;
    max-width: 100%;
  }
}

@media (max-width: 620px) {
  .container {
    width: calc(100% - 24px);
  }

  .global-market-rail {
    margin-top: 20px;
    padding: 11px;
  }

  .global-market-rail-heading {
    align-items: flex-start;
  }

  .global-market-rail-heading > span {
    font-size: .78rem;
  }

  .global-market-rail-heading small {
    font-size: .64rem;
  }

  .global-hero .global-market-rail-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .global-hero .global-market-rail-list > .market-chip {
    min-height: 46px;
    padding: 7px;
    gap: 7px;
  }

  .global-hero .market-chip > span:nth-child(2) {
    font-size: .69rem;
  }

  .global-hero .market-chip-flag {
    flex-basis: 26px;
    width: 26px;
    height: 22px;
  }

  .section {
    padding-top: 38px;
    padding-bottom: 38px;
  }

  .section-heading {
    text-align: left;
    margin-bottom: 22px;
  }

  .section-heading h2 {
    font-size: clamp(1.55rem, 6.6vw, 2.05rem);
    line-height: 1.18;
  }

  .hero {
    padding-top: 32px;
    padding-bottom: 36px;
  }

  .hero h1 {
    margin-top: 16px;
    margin-bottom: 15px;
    font-size: clamp(1.95rem, 8.5vw, 2.6rem);
    letter-spacing: -.035em;
  }

  .hero-panel {
    padding: 18px;
    border-radius: 18px;
  }

  .hero-actions {
    margin-top: 20px;
  }

  .hero-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .calculator-card {
    padding: 17px;
    border-radius: 16px;
  }

  .calc-head {
    gap: 8px;
    margin-bottom: 16px;
  }

  .amount-input, input, select, textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .field-help {
    align-items: flex-start;
    gap: 4px 12px;
  }

  .mobile-quick-nav {
    box-shadow: 0 10px 34px rgba(3, 25, 21, .2);
  }

  .mobile-quick-nav a {
    min-height: 49px;
    font-size: 9px;
  }

  body[class*="market-page"] :is(
    .mp-section-nav-inner, .uk-section-nav-inner, .nz-section-nav-inner,
    .ie-section-nav-inner, .sg-section-nav-inner, .ca-section-nav-inner,
    .au-section-nav-inner, .de-section-nav-inner, .ph-section-nav-inner
  ) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    padding: 8px 0;
  }

  body[class*="market-page"] :is(
    .mp-section-nav-inner, .uk-section-nav-inner, .nz-section-nav-inner,
    .ie-section-nav-inner, .sg-section-nav-inner, .ca-section-nav-inner,
    .au-section-nav-inner, .de-section-nav-inner, .ph-section-nav-inner
  ) a {
    min-height: 37px;
    padding: 6px 3px;
    font-size: .64rem;
  }

  body[class*="market-page"] :is(
    .mp-section, .uk-section, .nz-section, .ie-section, .sg-section,
    .ca-section, .au-section, .de-section, .ph-section
  ) {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  body[class*="market-page"] :is(
    .mp-card, .mp-rate-card, .mp-calculator-shell, .mp-review-card,
    .mp-planner-card, .uk-card, .ca-card, .de-card, .au-card,
    .nz-card, .ie-card, .sg-card, .ph-card
  ) {
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 16px;
  }
}

@media (max-width: 380px) {
  .container {
    width: calc(100% - 20px);
  }

  .global-market-rail {
    padding: 9px;
    border-radius: 15px;
  }

  .global-market-rail-heading {
    gap: 4px 7px;
  }

  .global-market-rail-heading small {
    max-width: 100%;
    text-align: left;
  }

  .global-hero .global-market-rail-list {
    gap: 6px;
  }

  .global-hero .global-market-rail-list > .market-chip {
    min-height: 44px;
    gap: 6px;
    padding: 6px;
    border-radius: 10px;
  }

  .global-hero .market-chip-flag {
    flex-basis: 24px;
    width: 24px;
    height: 21px;
  }

  .global-hero .market-chip > span:nth-child(2) {
    font-size: .65rem;
    line-height: 1.16;
  }

  .hero h1 {
    font-size: 1.9rem;
  }

  body[class*="market-page"] :is(
    .mp-section-nav-inner, .uk-section-nav-inner, .nz-section-nav-inner,
    .ie-section-nav-inner, .sg-section-nav-inner, .ca-section-nav-inner,
    .au-section-nav-inner, .de-section-nav-inner, .ph-section-nav-inner
  ) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .global-hero .market-chip,
  body[class*="market-page"] .mp-section-nav a {
    transition: none !important;
  }
}


/* =========================================================
   SITE-WIDE CONTRAST SAFEGUARDS
   Loaded after page and country styles to keep common text,
   controls and helper labels legible in both themes.
========================================================= */
:root {
  color-scheme: light;
  --gs-contrast-ink: #162638;
  --gs-contrast-muted: #465a6e;
  --gs-contrast-border: #c7d3df;
  --gs-contrast-control-bg: #ffffff;
  --gs-contrast-control-ink: #172b3d;
  --gs-contrast-placeholder: #536579;
  --gs-contrast-focus: #1d4ed8;
  --gs-market-muted: #c4d0de;
}
html.dark-mode {
  color-scheme: dark;
  --gs-contrast-ink: #edf3fa;
  --gs-contrast-muted: #c4cfdd;
  --gs-contrast-border: #42556d;
  --gs-contrast-control-bg: #101d2f;
  --gs-contrast-control-ink: #f1f5f9;
  --gs-contrast-placeholder: #b8c5d6;
  --gs-contrast-focus: #7dd3fc;
}
body { color: var(--gs-contrast-ink); }
html.dark-mode body { color: var(--gs-contrast-ink); }

/* Lift subdued helper copy to readable text contrast in light mode. */
body :is(
  .rate-note, .fine-print, .notice, .field-help, .form-help, .form-hint,
  .form-text, .help-text, .muted-text, .text-muted, .small-note,
  .guide-description, .guide-card > p, .guide-card li, .side-card > p,
  .contact-info-card > p, .faq-item > p, .savings-goals-help,
  .savings-goal-local-note, .savings-goal-history, .mt-paper-disclaimer
) {
  color: var(--gs-contrast-muted) !important;
  opacity: 1;
}
body :is(input, select, textarea)::placeholder {
  color: var(--gs-contrast-placeholder) !important;
  opacity: 1 !important;
}
body :is(input, select, textarea) {
  accent-color: #087f70;
}
body :is(a, button, input, select, textarea, summary):focus-visible {
  outline-color: var(--gs-contrast-focus);
  outline-offset: 3px;
}

/* Shared cards used on calculators, guides, FAQs, saved estimates and auth flows. */
html.dark-mode :is(
  .calculator-card, .popular-calculator-card, .contact-info-card, .faq-item,
  .rate-card, .guide-card, .side-card, .result-card, .auth-card,
  .saved-estimate-card, .saved-plan-card, .savings-goals-panel,
  .savings-goal-card, .savings-goal-form, .savings-goal-empty,
  .comparison-wrap, .comparison-table-wrap, .fact-table-wrap
) {
  background-color: #172638;
  border-color: #3b4e65;
  color: #e8f0f8;
}
html.dark-mode :is(
  .calculator-card h1, .calculator-card h2, .calculator-card h3,
  .popular-calculator-card h3, .contact-info-card h3, .faq-item summary,
  .guide-card h1, .guide-card h2, .guide-card h3, .side-card h2, .side-card h3,
  .rate-card strong, .saved-estimate-card h2, .saved-estimate-card h3
) {
  color: #f1f5fa;
}
html.dark-mode :is(
  .calculator-card p, .popular-calculator-card p, .contact-info-card p,
  .faq-item p, .guide-card > p, .guide-card li, .guide-description,
  .side-card > p, .rate-card span, .rate-note, .fine-print, .notice,
  .field-help, .form-help, .form-hint, .muted-text, .text-muted,
  .savings-goals-help, .savings-goal-local-note, .savings-goal-history
) {
  color: #c4cfdd !important;
  opacity: 1;
}
html.dark-mode :is(.guide-card a, .side-card a, .faq-item a, .contact-info-card a) {
  color: #7dd3fc;
}
body :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="file"]):not([type="color"]):not([type="hidden"]),
  select, textarea
) {
  color: var(--gs-contrast-control-ink);
}
body :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="file"]):not([type="color"]):not([type="hidden"]),
  select, textarea
)::placeholder {
  color: var(--gs-contrast-placeholder) !important;
  opacity: 1;
}
html.dark-mode :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="file"]):not([type="color"]):not([type="hidden"]),
  select, textarea
) {
  background-color: var(--gs-contrast-control-bg) !important;
  color: var(--gs-contrast-control-ink) !important;
  border-color: var(--gs-contrast-border) !important;
  color-scheme: dark;
}
html.dark-mode select option {
  background: #101d2f;
  color: #f1f5f9;
}
html.dark-mode .comparison-table th,
html.dark-mode .fact-table th {
  background: #203149;
  color: #f1f5f9;
}
html.dark-mode .comparison-table td,
html.dark-mode .fact-table td {
  color: #dce6f1;
  border-color: #364a62;
}

/* Country theme token floors: keep secondary text and borders readable. */
body.market-page-uk { --mp-muted: #526176; --mp-line: #cbd5e1; }
html.dark-mode body.market-page-uk {
  --mp-ink: #edf4fc; --mp-muted: #c4cfdf; --mp-line: #3c4e65;
  --mp-paper: #0e1b2d; --mp-tint: #15243a;
}
body.market-page-ca { --ca-muted: #50645d; --ca-line: #cbd8d1; }
html.dark-mode body.market-page-ca {
  --ca-ink: #edf6f0; --ca-muted: #c3d2ca; --ca-line: #385548;
  --ca-card: #102c23; --ca-page: #091b15; --ca-green-soft: #193f30;
}
body.market-page-de, body.market-page-au {
  --muted: #50635b; --soft: #5b7067; --border: #cbd8d1;
}
html.dark-mode body.market-page-de, html.dark-mode body.market-page-au {
  --text: #eef7f1; --muted: #c6d6cd; --soft: #aec2b7; --border: #355246;
}
body.market-page-nz { --nz-muted: #50666d; --nz-soft: #5b7076; --nz-line: #cbd9dc; }
html.dark-mode body.market-page-nz {
  --nz-ink: #eff7f7; --nz-muted: #c4d5d8; --nz-soft: #b1c5c8;
  --nz-line: #344e55; --nz-paper: #10262f; --nz-bg: #0b1d25; --nz-tint: #0e232c;
}
body.market-page-ie { --ie-muted: #50665b; --ie-soft: #5d7266; --ie-line: #cbd9cf; }
html.dark-mode body.market-page-ie {
  --ie-ink: #eef7f0; --ie-muted: #c3d4c8; --ie-soft: #b0c3b7;
  --ie-line: #344f3d; --ie-paper: #10271d; --ie-bg: #0a1c13; --ie-tint: #0e2418;
}
body.market-page-sg { --muted: #4f655d; --line: #cbdad1; }
html.dark-mode body.market-page-sg {
  --ink: #edf6f0; --muted: #c1d2c7; --line: #3a5346;
  --paper: #101b18; --white: #182722;
}
body.market-page-ph { --ph-muted: #50616e; --ph-border: #cbd7dc; }
html.dark-mode body.market-page-ph {
  --ph-ink: #f0f6f8; --ph-muted: #c5d7dc; --ph-border: #405a64;
  --ph-surface: #122d38; --ph-bg: #091923; --ph-soft: #213d49;
}

/* Theme-aware paragraph and form contrast for the country dashboards
   that use local theme tokens. USA and India retain their bespoke heading
   and FAQ palettes instead of being overridden by a broad market selector. */
html.dark-mode body:is(
  .market-page-uk, .market-page-ca, .market-page-de, .market-page-au,
  .market-page-nz, .market-page-ie, .market-page-sg, .market-page-ph
) main :is(
  .mp-section, .uk-section, .ca-section, .de-section, .au-section,
  .nz-section, .ie-section, .sg-section, .ph-section,
  .uk-overview, .uk-planner-section, .uk-rates-section, .uk-faq-section,
  .uk-calculator-section, .uk-guides-section, .ca-planner-section,
  .ca-reference-section, .ca-workspace, .ca-saved-section, .ca-review-section
) :is(p, li, small, dt, dd) {
  color: var(--gs-market-muted) !important;
  opacity: 1;
}

/* Respect reduced-motion settings for any additional shared transitions. */
@media (prefers-reduced-motion: reduce) {
  body :is(a, button, input, select, textarea) { scroll-behavior: auto; }
}


/* Contrast regression guard for controls whose page-specific styles set
   foreground/background independently. Keep this last in the cascade. */
html.dark-mode body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="file"]):not([type="color"]):not([type="hidden"]),
html.dark-mode body select,
html.dark-mode body textarea,
html.dark-mode body #site-search-input,
html.dark-mode body #savings-goal-name,
html.dark-mode body #savings-goal-target,
html.dark-mode body #savings-goal-current {
  background: #101d2f !important;
  background-color: #101d2f !important;
  color: #f8fafc !important;
  border-color: #526782 !important;
  caret-color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
  opacity: 1 !important;
}
html.dark-mode body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="file"]):not([type="color"]):not([type="hidden"])::placeholder,
html.dark-mode body select::placeholder,
html.dark-mode body textarea::placeholder,
html.dark-mode body #site-search-input::placeholder,
html.dark-mode body #savings-goal-name::placeholder,
html.dark-mode body #savings-goal-target::placeholder,
html.dark-mode body #savings-goal-current::placeholder {
  color: #cbd5e1 !important;
  -webkit-text-fill-color: #cbd5e1 !important;
  opacity: 1 !important;
}
html.dark-mode body select option {
  background-color: #101d2f !important;
  color: #f8fafc !important;
}
html.dark-mode body input:disabled,
html.dark-mode body select:disabled,
html.dark-mode body textarea:disabled {
  opacity: 1 !important;
  color: #b8c5d6 !important;
  -webkit-text-fill-color: #b8c5d6 !important;
  background-color: #26364b !important;
}
body :is(input, select, textarea)::placeholder {
  opacity: 1 !important;
}


/* =========================================================
   TARGETED CONTRAST REPAIRS — COUNTRY DASHBOARD DETAILS
   Keep secondary labels readable where page-specific rules use
   fixed light-theme colors on panels that become dark in dark mode.
========================================================= */
/* Light theme: avoid low-contrast grey labels on white/light cards. */
body.market-page-uk :is(.uk-rate-kind, .uk-rate-meta span, .uk-rate-caveat),
body.market-page-ca :is(.ca-input-money > span, .ca-projection-top .ca-card-eyebrow, .ca-projection-label, .ca-projection-metrics span),
body.market-page-sg .sg-ladder-step small {
  color: var(--gs-contrast-muted) !important;
  opacity: 1 !important;
}
body.market-page-uk .uk-rate-meta strong {
  color: #24364d;
}

/* Dark UK dashboard: make the rates and secondary labels stand out from navy cards. */
html.dark-mode body.market-page-uk .uk-rate-value {
  color: #ff9aaa !important;
}
html.dark-mode body.market-page-uk .uk-rate-meta strong {
  color: #edf3fb !important;
}
html.dark-mode body.market-page-uk :is(
  .uk-rate-kind, .uk-rate-meta span, .uk-rate-caveat,
  .uk-resume-card-head, .uk-action-index, .uk-form-status
) {
  color: #c4cfdd !important;
  opacity: 1 !important;
}
html.dark-mode body.market-page-uk .uk-form-status[data-state="success"] {
  color: #86efac !important;
}
html.dark-mode body.market-page-uk .uk-form-status[data-state="error"] {
  color: #fca5a5 !important;
}
html.dark-mode body.market-page-uk :is(.uk-eyebrow, .uk-card-eyebrow, .uk-text-button, .uk-diary-remove) {
  color: #ff9aaa !important;
}

/* Dark Canada dashboard: projection labels share a dark green result panel. */
html.dark-mode body.market-page-ca .ca-input-money > span,
html.dark-mode body.market-page-ca .ca-projection-top .ca-card-eyebrow,
html.dark-mode body.market-page-ca .ca-projection-label,
html.dark-mode body.market-page-ca .ca-projection-metrics span {
  color: #c3d2ca !important;
  opacity: 1 !important;
}
html.dark-mode body.market-page-ca .ca-projection-value,
html.dark-mode body.market-page-ca .ca-projection-metrics strong {
  color: #a3e7c0 !important;
}

/* These status values appear inside dark snapshot cards, not light warning boxes. */
html.dark-mode body.market-page-de .de-snapshot-grid .de-status,
html.dark-mode body.market-page-au .au-snapshot-grid .au-status {
  color: #f4d58c !important;
  opacity: 1 !important;
}
html.dark-mode body.market-page-de .de-snapshot-grid .de-status i,
html.dark-mode body.market-page-au .au-snapshot-grid .au-status i {
  color: #f4d58c !important;
}

/* Dark Singapore dashboard: keep links, step labels and tiny helper copy visible. */
html.dark-mode body.market-page-sg .sg-inline-link,
html.dark-mode body.market-page-sg .sg-ladder-step > b {
  color: #8ce2b4 !important;
}
html.dark-mode body.market-page-sg .sg-ladder-step small,
html.dark-mode body.market-page-sg .sg-result-kicker {
  color: #bfd1c7 !important;
  opacity: 1 !important;
}

/* Shared labels and secondary copy should not inherit low-opacity styling. */
body :is(.helptext, .field-note, .field-help, .help-text, .form-help, .form-hint, .small-print, .small-note) {
  opacity: 1;
}


/* Additional semantic accents with fixed colors on variable dark surfaces. */
html.dark-mode body.market-page-uk .uk-guide-card .uk-guide-label {
  color: #ff9aaa !important;
}
html.dark-mode body.market-page-nz .nz-chip-gold {
  color: #ffdf9f !important;
  border-color: #715e37 !important;
}
html.dark-mode body.market-page-nz .nz-chip-gold i {
  color: #ffdf9f !important;
}
html.dark-mode body.market-page-ie .ie-gold-icon {
  color: #ffdf9f !important;
}
html.dark-mode body.market-page-sg .sg-section-kicker {
  color: #8ce2b4 !important;
}
html.dark-mode body.market-page-sg .sg-ladder-step strong {
  color: #d1e6d9 !important;
}


/* Contrast corrections found by the rendered light/dark browser audit. */
body.market-page-uk .uk-action-index,
body.market-page-uk .uk-form-status:not([data-state="success"]):not([data-state="error"]) {
  color: #526176 !important;
  opacity: 1 !important;
}
body.market-page-sg .sg-section-kicker {
  color: #0d6b57 !important;
  opacity: 1 !important;
}
html.dark-mode body.market-page main .mp-rate-kind,
html.dark-mode body.market-page main .mp-plan-progress-top,
html.dark-mode body.market-page main .mp-review-status {
  color: #c4cfdd !important;
  opacity: 1 !important;
}
html.dark-mode body.market-page main .mp-plan-progress-top strong,
html.dark-mode body.market-page main .mp-planner-overline,
html.dark-mode body.market-page main .mp-review-tag {
  color: #86e0b8 !important;
  opacity: 1 !important;
}


/* Final contrast repairs from the all-element rendered browser audit. */
html.dark-mode body.market-page-uk .uk-form-status,
html.dark-mode body.market-page-uk .uk-form-status:not([data-state="success"]):not([data-state="error"]) {
  color: #c4cfdd !important;
  opacity: 1 !important;
}
html.dark-mode body.market-page-uk .uk-form-status[data-state="success"] {
  color: #86efac !important;
}
html.dark-mode body.market-page-uk .uk-form-status[data-state="error"] {
  color: #fca5a5 !important;
}
body.market-page-sg .sg-result-kicker {
  color: #465a6e !important;
  opacity: 1 !important;
}


/* =========================================================
   MOBILE EXPERIENCE V3 — premium spacing, touch comfort, and
   a floating quick bar. Desktop layout is deliberately unchanged.
========================================================= */
@media (max-width: 760px) {
  html {
    scroll-padding-top: 88px;
  }

  body {
    -webkit-tap-highlight-color: rgba(5, 150, 105, .14);
  }

  .container {
    width: min(calc(100% - 28px), 1160px) !important;
  }

  .section {
    padding-top: clamp(34px, 7vw, 48px);
    padding-bottom: clamp(34px, 7vw, 48px);
    scroll-margin-top: 18px;
  }

  .section-heading {
    margin-bottom: 22px;
  }

  .section-heading h2 {
    font-size: clamp(1.55rem, 6.6vw, 2.05rem);
    line-height: 1.16;
    letter-spacing: -.03em;
    text-wrap: balance;
  }

  .hero {
    padding-top: clamp(30px, 7vw, 44px);
    padding-bottom: clamp(34px, 7vw, 48px);
  }

  .hero h1 {
    font-size: clamp(2rem, 8.1vw, 2.65rem);
    line-height: 1.08;
    letter-spacing: -.04em;
    text-wrap: balance;
  }

  .hero-grid {
    gap: 22px;
  }

  .hero-panel,
  .calculator-card,
  .popular-calculator-card,
  .contact-info-card,
  .faq-item,
  .guide-card,
  .side-card,
  .rate-card,
  .saved-estimate-card,
  .saved-plan-card,
  .savings-goals-panel,
  .savings-goal-card,
  .savings-goal-form,
  .sem-card,
  .sem-stat-card,
  .comparison-wrap,
  .comparison-table-wrap,
  .fact-table-wrap,
  body[class*="market-page"] :is(
    .mp-card, .mp-rate-card, .mp-calculator-shell, .mp-review-card,
    .mp-planner-card, .uk-card, .ca-card, .de-card, .au-card,
    .nz-card, .ie-card, .sg-card, .ph-card
  ) {
    min-width: 0;
    max-width: 100%;
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .065);
  }

  .calculator-card,
  .popular-calculator-card,
  .contact-info-card,
  .faq-item,
  .guide-card,
  .side-card,
  .rate-card,
  .saved-estimate-card,
  .saved-plan-card,
  .savings-goals-panel,
  .savings-goal-card,
  .savings-goal-form,
  .sem-card,
  .sem-stat-card {
    padding: 16px;
  }

  .calculator-card h1,
  .calculator-card h2,
  .section-heading h2,
  .guide-card h2,
  .side-card h2 {
    overflow-wrap: anywhere;
  }

  .calculator-grid,
  .guide-grid,
  .footer-grid,
  .comparison-grid,
  .planner-grid {
    gap: 14px;
  }

  .calc-head {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .hero-actions {
    gap: 10px;
  }

  .hero-actions .btn,
  .mp-hero-actions .mp-button,
  .auth-card button,
  .auth-card .btn {
    min-height: 46px;
    border-radius: 13px;
  }

  /* Comfortable form controls without forcing sliders/checkboxes to full size. */
  body :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]):not([type="file"]):not([type="color"]),
    select,
    textarea
  ) {
    max-width: 100%;
    min-width: 0;
    min-height: 46px;
    border-radius: 12px;
    font-size: 16px;
  }

  body textarea {
    min-height: 104px;
  }

  body input[type="range"] {
    width: 100%;
    min-height: 28px;
    padding-inline: 0;
  }

  body :is(button, input[type="submit"], input[type="button"], input[type="reset"], .btn, .mp-button) {
    touch-action: manipulation;
  }

  body :is(button, .btn, .mp-button):focus-visible {
    outline-offset: 3px;
  }

  /* Charts and dense tables scroll inside their own surfaces, never the page. */
  .chart-wrap,
  .chart-wrapper,
  .chart-container,
  .chart-panel,
  .results-chart-wrap {
    min-width: 0;
    max-width: 100%;
  }

  .chart-wrap canvas,
  .chart-wrapper canvas,
  .chart-container canvas,
  .chart-panel canvas,
  .results-chart-wrap canvas {
    display: block;
    max-width: 100%;
  }

  body :is(
    .table-wrap, .table-wrapper, .table-scroll, .table-responsive,
    .responsive-table, .dashboard-table-wrap, .saved-calculations-table-wrap,
    .results-table-wrap, .comparison-wrap, .comparison-table-wrap,
    .fact-table-wrap, .market-table-wrap, .history-table-wrap,
    .mp-table-wrap, .uk-table-wrap, .ca-table-wrap, .de-table-wrap,
    .au-table-wrap, .nz-table-wrap, .ie-table-wrap, .sg-table-wrap, .ph-table-wrap
  ) {
    max-width: 100%;
    border-radius: 14px;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Five well-spaced primary destinations are easier to use than six squeezed icons. */
  .mobile-quick-nav {
    left: 50% !important;
    right: auto !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    width: min(520px, calc(100% - 20px));
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 5px;
    padding: 7px;
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 21px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 15px 40px rgba(15, 23, 42, .22);
    transform: translateX(-50%);
    backdrop-filter: blur(22px) saturate(155%);
    -webkit-backdrop-filter: blur(22px) saturate(155%);
  }

  .mobile-quick-nav a[href="#faq"] {
    display: none !important;
  }

  .mobile-quick-nav a {
    min-height: 54px;
    gap: 5px;
    padding: 6px 2px;
    border-radius: 14px;
    font-size: 10px;
    line-height: 1.1;
    font-weight: 800;
  }

  .mobile-quick-nav a i {
    font-size: 17px;
  }

  .mobile-quick-nav a:active {
    transform: scale(.96);
  }

  body:has(.mobile-quick-nav) {
    padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
  }

  html.dark-mode .mobile-quick-nav {
    border-color: rgba(100, 116, 139, .52);
    background: rgba(15, 29, 47, .94);
    box-shadow: 0 16px 42px rgba(0, 0, 0, .4);
  }

  html.dark-mode .mobile-quick-nav a {
    color: #c5d2e1;
  }

  html.dark-mode .mobile-quick-nav a:hover,
  html.dark-mode .mobile-quick-nav a:focus-visible {
    background: #173a32;
    color: #a7f3d0;
  }

  /* Refined open-menu surface; the existing menu button and JS remain unchanged. */
  .home-site-header .mobile-links.open {
    max-height: min(62vh, 560px);
    overflow-y: auto;
    overscroll-behavior: contain;
    gap: 6px 8px;
    margin: 0 0 12px;
    padding: 10px;
    border: 1px solid #dbe5e1;
    border-radius: 18px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 16px 34px rgba(15, 23, 42, .12);
  }

  .home-site-header .mobile-links a {
    min-height: 44px;
    padding: 10px;
    border: 1px solid rgba(203, 213, 225, .65);
    border-radius: 12px;
    background: #fff;
    line-height: 1.3;
  }

  html.dark-mode .home-site-header .mobile-links.open {
    border-color: #31465d;
    background: rgba(15, 29, 47, .98);
    box-shadow: 0 18px 36px rgba(0, 0, 0, .3);
  }

  html.dark-mode .home-site-header .mobile-links a {
    border-color: #34475c;
    background: #172638;
    color: #e7eef7;
  }

  html.dark-mode .home-site-header .mobile-links a:hover,
  html.dark-mode .home-site-header .mobile-links a:focus-visible {
    background: #173a32;
    color: #a7f3d0;
  }

  /* Keep account dashboard padding usable on smaller screens despite inline desktop styles. */
  body:has(.dashboard-header) {
    padding: 12px !important;
  }

  body:has(.dashboard-header) .container {
    width: 100% !important;
    padding: 16px !important;
    border-radius: 18px;
  }

  body:has(.dashboard-header) .dashboard-header {
    align-items: flex-start;
    gap: 12px;
  }

  /* Market workspaces retain their country identity while using phone-sized rhythm. */
  body[class*="market-page"] :is(
    .mp-section, .uk-section, .nz-section, .ie-section, .sg-section,
    .ca-section, .au-section, .de-section, .ph-section
  ) {
    scroll-margin-top: 18px;
  }

  body[class*="market-page"] :is(
    .mp-section-heading, .uk-section-heading, .nz-section-heading,
    .ie-section-heading, .sg-section-heading, .ca-section-heading,
    .au-section-heading, .de-section-heading, .ph-section-heading
  ) h2 {
    text-wrap: balance;
  }
}

@media (max-width: 420px) {
  .container {
    width: calc(100% - 24px) !important;
  }

  .home-site-header .brand {
    font-size: 1.08rem;
  }

  .home-site-header .brand-mark {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .home-site-header .mobile-links.open {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .hero-panel,
  .calculator-card,
  .popular-calculator-card,
  .contact-info-card,
  .guide-card,
  .side-card,
  .sem-card {
    padding: 14px;
  }

  .mobile-quick-nav {
    width: calc(100% - 16px);
    gap: 3px;
    padding: 6px;
    border-radius: 18px;
  }

  .mobile-quick-nav a {
    min-height: 51px;
    font-size: 9px;
  }

  .mobile-quick-nav a i {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-quick-nav a,
  .home-site-header .mobile-links a {
    transition: none !important;
  }
}