/* ============================================================
   Money at 60 — Full Visual Redesign
   Spec: Sif's redesign brief (2026-04-08)
   Reference: Athena Home Loans × Australian Retirement Trust
   ============================================================ */

/* FONTS */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Poppins:wght@400;500;600&display=swap');

/* ────────────────────────────────────────────────────────────
   DESIGN TOKENS
   ──────────────────────────────────────────────────────────── */
:root {
  --color-brand:          #4A1FA8;
  --color-brand-light:    #EDE7FF;
  --color-brand-dark:     #341676;

  --color-bg:             #F7F4F0;
  --color-surface:        #FFFFFF;
  --color-surface-alt:    #F0EDE8;

  --color-text-primary:   #1A1A2E;
  --color-text-body:      #3D3D4E;
  --color-text-muted:     #6B6B7E;
  --color-text-inverse:   #FFFFFF;

  --color-gold:           #C9954C;
  --color-gold-light:     #FDF4E7;

  --color-success:        #1E7E34;
  --color-success-light:  #D4EDDA;
  --color-warning:        #C9954C;
  --color-warning-light:  #FDF4E7;
  --color-error:          #C0392B;
  --color-error-light:    #FADBD8;

  --color-border:         rgba(26,26,46,0.10);
  --color-border-strong:  rgba(26,26,46,0.20);

  --font-serif:   'Playfair Display', Georgia, serif;
  --font-sans:    'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;

  --radius-card:  16px;
  --radius-btn:   8px;

  --shadow-card:  0 2px 8px rgba(26,26,46,0.06), 0 8px 24px rgba(26,26,46,0.04);
  --shadow-hover: 0 4px 16px rgba(26,26,46,0.10), 0 12px 32px rgba(26,26,46,0.06);
  --shadow-btn:   0 4px 14px rgba(74,31,168,0.22);
}

/* ────────────────────────────────────────────────────────────
   GLOBAL BASE
   ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; }

body,
.body-wrapper,
.hs-page-width-normal {
  background: var(--color-bg) !important;
  font-family: var(--font-sans) !important;
  color: var(--color-text-body);
}

/* ────────────────────────────────────────────────────────────
   TYPOGRAPHY
   ──────────────────────────────────────────────────────────── */

/* All headings — Poppins */
h1, h2, h3, h4, h5, h6,
.hs_cos_wrapper h1,
.hs_cos_wrapper h2,
.hs_cos_wrapper h3 {
  font-family: var(--font-sans) !important;
  color: var(--color-text-primary) !important;
  font-weight: 600;
  margin-top: 0;
}

/* Hero H1 — Playfair Display, display text */
.mas-hero h1,
.mas-hero__content h1,
[class*="mas-hero"] h1 {
  font-family: var(--font-serif) !important;
  font-size: clamp(40px, 5vw, 60px) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  color: var(--color-text-inverse) !important;
}

/* Inner page H1 */
h1, .page-hero h1, .page-hero h1 span {
  font-family: var(--font-sans) !important;
  font-size: clamp(32px, 4vw, 48px) !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
  color: var(--color-text-primary) !important;
}

.page-hero h1,
.page-hero h1 span {
  color: var(--color-text-inverse) !important;
}

/* H2 */
h2, .mas-sh {
  font-size: clamp(26px, 3vw, 36px) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: var(--color-text-primary) !important;
}

/* H3 */
h3 {
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: var(--color-text-primary) !important;
}

/* Body */
p, li, .mas-page-content p {
  font-family: var(--font-sans) !important;
  font-size: 17px !important;
  line-height: 1.65 !important;
  color: var(--color-text-body) !important;
  max-width: 680px;
}

/* Eyebrow labels */
.mas-sec-label,
.mas-hero-eyebrow,
.mas-section__label,
[class*="eyebrow"],
[class*="sec-label"] {
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--color-brand) !important;
  display: block;
  margin-bottom: 12px !important;
}

/* Legal / footnotes */
small, .mas-compliance p, .footer-compliance p,
.site-footer .footer-compliance p {
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: var(--color-text-muted) !important;
}

/* Kill Inter / font bleed */
.hs-form *, .hubspot-form *, .hs_cos_wrapper *,
[class*="hs-form"] *, .mas-contact-form__hubspot * {
  font-family: var(--font-sans) !important;
}

/* ────────────────────────────────────────────────────────────
   NAVIGATION — WHITE (spec §4.5)
   ──────────────────────────────────────────────────────────── */

/* Utility bar — white */
.mas-utility-bar {
  background: var(--color-surface) !important;
  border-bottom: 1px solid var(--color-border) !important;
  box-shadow: 0 1px 3px rgba(26,26,46,0.05) !important;
}

.mas-utility-logo-text {
  color: var(--color-brand) !important;
}

.mas-utility-phone {
  color: var(--color-text-body) !important;
}

/* Purple nav → white */
.mas-purple-nav {
  background: var(--color-surface) !important;
  border-bottom: 1px solid var(--color-border) !important;
  box-shadow: none !important;
}

.mas-purple-nav-links a,
.mas-purple-nav-inner a {
  color: var(--color-text-body) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}

.mas-purple-nav-links a:hover,
.mas-purple-nav-links li.active a {
  color: var(--color-brand) !important;
}

/* CTA in nav — keep brand purple */
.mas-cta-eligibility {
  background: var(--color-brand) !important;
  color: var(--color-text-inverse) !important;
  border-radius: var(--radius-btn) !important;
  font-weight: 600 !important;
  padding: 8px 18px !important;
}

.mas-cta-eligibility:hover {
  background: var(--color-brand-dark) !important;
  color: var(--color-text-inverse) !important;
}

.mas-cta-contact {
  color: var(--color-text-body) !important;
  font-weight: 500 !important;
}

/* Mobile toggle */
.mas-mobile-toggle {
  color: var(--color-text-body) !important;
}

/* ────────────────────────────────────────────────────────────
   LAYOUT — PAGE BACKGROUND & SECTIONS
   ──────────────────────────────────────────────────────────── */

/* All sections default to warm off-white */
.mas-section,
.mas-section--standard {
  background: var(--color-bg) !important;
  padding: 80px 28px !important;
}

/* Alt sections — white (alternate between bg and surface) */
.mas-section-alt,
.mas-section--alt {
  background: var(--color-surface) !important;
  padding: 80px 28px !important;
}

/* Purple sections — ONE per page, hero or CTA band */
.mas-section-purple,
.mas-section--purple {
  background: var(--color-brand) !important;
  padding: 64px 28px !important;
  width: 100% !important;
  max-width: 100% !important;
}

.mas-section-purple *,
.mas-section--purple * {
  max-width: none; /* don't constrain inside purple band */
}

.mas-section-purple h2,
.mas-section--purple h2,
.mas-section-purple p,
.mas-section--purple p {
  color: var(--color-text-inverse) !important;
}

.mas-section-purple .mas-section__label,
.mas-section--purple .mas-section__label {
  color: rgba(255,255,255,0.65) !important;
}

/* Container */
.mas-section-inner,
.mas-section__inner {
  max-width: 1120px !important;
  margin: 0 auto !important;
}

/* HubSpot row wrappers — no extra colour bands */
.row-fluid-wrapper {
  background: transparent !important;
}

/* Page hero (inner pages) */
.page-hero {
  background: var(--color-brand) !important;
  padding: 64px 28px !important;
  color: var(--color-text-inverse) !important;
}

.page-hero h1,
.page-hero h1 span,
.page-hero p,
.page-hero .lead {
  color: var(--color-text-inverse) !important;
}

.page-hero .lead {
  font-size: 18px !important;
  color: rgba(255,255,255,0.82) !important;
  max-width: 600px;
}

/* ────────────────────────────────────────────────────────────
   HERO — HOMEPAGE
   ──────────────────────────────────────────────────────────── */

.mas-hero,
.mas-hero--dark {
  background: linear-gradient(105deg, rgba(26,26,46,0.92) 0%, rgba(74,31,168,0.80) 60%, rgba(74,31,168,0.60) 100%) !important;
  padding: 96px 28px 80px !important;
  position: relative;
}

.mas-hero-sub,
.mas-hero__subtitle {
  font-size: 18px !important;
  color: rgba(255,255,255,0.85) !important;
  max-width: 560px;
}

.mas-hero-trust {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.75) !important;
}

.mas-hero-trust span.chk {
  color: var(--color-gold) !important;
}

/* ────────────────────────────────────────────────────────────
   CARDS — White, elevated, unified (spec §4.2)
   ──────────────────────────────────────────────────────────── */

.mas-card,
.mas-info-card,
.mas-feature-card,
.mas-step-card,
.mas-lender-card,
.mas-kf-card,
.mas-expert-card,
.mas-calc-card,
.mas-prot-card,
.mas-resource-card {
  background: var(--color-surface) !important;
  border-radius: var(--radius-card) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: var(--shadow-card) !important;
  padding: 32px !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.mas-card:hover,
.mas-info-card:hover,
.mas-feature-card:hover,
.mas-kf-card:hover,
.mas-resource-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-hover) !important;
}

/* Kill all coloured card backgrounds */
.mas-card[style*="background"],
[style*="background: rgb(237, 231, 255)"],
[style*="background:#F3EEFF"],
[style*="background: #F3EEFF"],
[style*="background: #EDE7F6"],
[style*="background-color: rgb(237"],
[style*="background: rgba(74, 31"] {
  background: var(--color-surface) !important;
}

/* Card headings */
.mas-card h3, .mas-card h4,
.mas-kf-card h3, .mas-kf-card .mas-kf-heading,
.mas-feature-card h3 {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--color-text-primary) !important;
  margin-bottom: 10px !important;
}

/* Card body */
.mas-card p, .mas-kf-card p,
.mas-kf-card .mas-kf-desc {
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: var(--color-text-body) !important;
}

/* Caution card — white + gold left border (spec §4.3) */
.mas-kf-card.mas-kf-warning {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-left: 4px solid var(--color-gold) !important;
  padding-left: 28px !important;
}
.mas-kf-card.mas-kf-warning .mas-kf-heading {
  color: var(--color-text-primary) !important;
}
.mas-kf-card.mas-kf-warning .mas-kf-icon {
  color: var(--color-gold) !important;
}

/* Inline caution boxes */
.mas-warn-box,
[style*="background: #FFF8E1"],
[style*="background:#FFF8E1"],
[style*="background: #FDF4E7"] {
  background: var(--color-surface) !important;
  border-left: 4px solid var(--color-gold) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-card) !important;
}

/* ────────────────────────────────────────────────────────────
   BUTTONS (spec §4.1)
   ──────────────────────────────────────────────────────────── */

/* Primary */
.mas-btn-primary,
a.mas-btn-primary,
button.mas-btn-primary,
.btn-primary-mas {
  display: inline-flex !important;
  align-items: center !important;
  font-family: var(--font-sans) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--color-text-inverse) !important;
  background: var(--color-brand) !important;
  border: 2px solid var(--color-brand) !important;
  border-radius: var(--radius-btn) !important;
  padding: 14px 28px !important;
  text-decoration: none !important;
  box-shadow: var(--shadow-btn) !important;
  transition: background 0.15s, transform 0.1s !important;
  cursor: pointer;
}
.mas-btn-primary:hover, a.mas-btn-primary:hover {
  background: var(--color-brand-dark) !important;
  border-color: var(--color-brand-dark) !important;
  color: var(--color-text-inverse) !important;
  transform: translateY(-1px);
}

/* Secondary */
.mas-btn-secondary,
a.mas-btn-secondary,
.mas-btn-outline,
a.mas-btn-outline {
  display: inline-flex !important;
  align-items: center !important;
  font-family: var(--font-sans) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--color-brand) !important;
  background: transparent !important;
  border: 2px solid var(--color-brand) !important;
  border-radius: var(--radius-btn) !important;
  padding: 14px 28px !important;
  text-decoration: none !important;
  transition: background 0.15s, color 0.15s !important;
}
.mas-btn-secondary:hover, .mas-btn-outline:hover {
  background: var(--color-brand-light) !important;
  color: var(--color-brand) !important;
}

/* Ghost (on dark bg) */
.mas-btn-ghost,
.mas-hero .mas-btn-secondary,
.mas-hero--dark .mas-btn-secondary {
  color: var(--color-text-inverse) !important;
  border-color: rgba(255,255,255,0.6) !important;
  background: transparent !important;
}
.mas-hero .mas-btn-secondary:hover,
.mas-hero--dark .mas-btn-secondary:hover {
  background: rgba(255,255,255,0.12) !important;
  border-color: var(--color-text-inverse) !important;
}

/* White button (on dark bg) */
.mas-btn-white, a.mas-btn-white,
.mas-hero .mas-btn-primary,
.mas-hero--dark .mas-btn-primary {
  background: var(--color-surface) !important;
  color: var(--color-brand) !important;
  border-color: var(--color-surface) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15) !important;
}
.mas-btn-white:hover { background: #f0f0f0 !important; }

/* HubSpot Bootstrap buttons */
.btn-accent, .btn.btn-accent, a.btn-accent,
.btn.btn-primary, a.btn.btn-primary,
.header-btn-primary, .btn-primary {
  background: var(--color-brand) !important;
  color: var(--color-text-inverse) !important;
  border-color: var(--color-brand) !important;
  border-radius: var(--radius-btn) !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  box-shadow: var(--shadow-btn) !important;
}
.btn-accent:hover, .btn.btn-primary:hover {
  background: var(--color-brand-dark) !important;
  color: var(--color-text-inverse) !important;
}

/* ────────────────────────────────────────────────────────────
   STEPS — Numbered circles (spec §4.8)
   ──────────────────────────────────────────────────────────── */

.mas-step-num,
.mas-step-number {
  background: var(--color-brand) !important;
  color: var(--color-text-inverse) !important;
  border-radius: 50% !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  box-shadow: 0 2px 8px rgba(74,31,168,0.25) !important;
  flex-shrink: 0;
}

/* Chevron → consistent brand purple, remove arrow shape */
.mas-chevron-shape {
  background: var(--color-brand) !important;
  border-radius: 12px !important;
}

.mas-chevron-step:nth-child(1) .mas-chevron-shape,
.mas-chevron-step:nth-child(2) .mas-chevron-shape,
.mas-chevron-step:nth-child(3) .mas-chevron-shape,
.mas-chevron-step:nth-child(4) .mas-chevron-shape,
.mas-chevron-step:nth-child(5) .mas-chevron-shape,
.mas-chevron-step:nth-child(6) .mas-chevron-shape,
.mas-chevron-step:nth-child(7) .mas-chevron-shape,
.mas-chevron-step:nth-child(8) .mas-chevron-shape {
  background: var(--color-brand) !important;
}

.mas-chevron-step .mas-step-title,
.mas-chevron-step .mas-step-number,
.mas-chevron-step .mas-expand-icon,
.mas-chevron-step:nth-child(n) .mas-step-title,
.mas-chevron-step:nth-child(n) .mas-step-number {
  color: var(--color-text-inverse) !important;
}

/* ────────────────────────────────────────────────────────────
   ACCORDIONS (spec §4.9)
   ──────────────────────────────────────────────────────────── */

.mas-accordion-item,
.mas-faq-item,
[class*="accordion-item"] {
  border-bottom: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.mas-accordion-trigger,
.mas-faq-question,
[class*="accordion-trigger"] {
  font-weight: 600 !important;
  color: var(--color-text-primary) !important;
  font-size: 17px !important;
  padding: 20px 0 !important;
  background: transparent !important;
}

.mas-accordion-trigger:hover { color: var(--color-brand) !important; }

.mas-accordion-content,
.mas-faq-answer {
  padding: 0 0 20px !important;
  font-size: 16px !important;
  color: var(--color-text-body) !important;
  max-width: 680px;
}

/* ────────────────────────────────────────────────────────────
   CHART (spec §4.10)
   ──────────────────────────────────────────────────────────── */

.mas-slider-input { accent-color: var(--color-brand) !important; }

.mas-summary-box {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
  border-radius: var(--radius-card) !important;
  padding: 20px 28px !important;
}

.mas-summary-box > div:last-child {
  color: rgba(255,255,255,0.6) !important;
  font-size: 13px !important;
}

.mas-disclaimer-box p {
  font-size: 13px !important;
  color: var(--color-text-muted) !important;
}

/* ────────────────────────────────────────────────────────────
   TRUST ARCHITECTURE (spec §4.11)
   ──────────────────────────────────────────────────────────── */

.mas-trust-badge, .mas-nneg-badge, .mas-verified-badge,
.trust-badge {
  color: var(--color-gold) !important;
  border-color: var(--color-gold) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}

.mas-trust-pill {
  background: var(--color-brand-light) !important;
  color: var(--color-brand) !important;
  border-radius: 100px !important;
  font-weight: 600 !important;
}

.mas-expert-card {
  border: 2px solid var(--color-brand) !important;
}
.mas-expert-card__subtitle {
  color: var(--color-gold) !important;
}

/* Trust bar */
.mas-trust-bar {
  background: var(--color-surface-alt) !important;
  border-top: 1px solid var(--color-border) !important;
  border-bottom: 1px solid var(--color-border) !important;
}

/* ────────────────────────────────────────────────────────────
   FOOTER (spec §4.12) — dark near-black, not purple
   ──────────────────────────────────────────────────────────── */

.site-footer,
.mas-site-footer {
  background: var(--color-text-primary) !important; /* #1A1A2E */
  color: rgba(255,255,255,0.75) !important;
}

.site-footer a, .mas-site-footer a {
  color: rgba(255,255,255,0.7) !important;
}
.site-footer a:hover, .mas-site-footer a:hover {
  color: #ffffff !important;
}

.site-footer .footer-nav-heading,
.site-footer [class*="footer-heading"],
.site-footer [class*="footer-label"] {
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: rgba(255,255,255,0.45) !important;
}

/* Starts at 60 / affiliation — gold treatment */
.mas-sas-affiliation,
.mas-sas-logo,
[class*="sas-affil"] {
  color: var(--color-gold) !important;
  border-color: var(--color-gold) !important;
}

.site-footer .footer-compliance p,
.site-footer .footer-bottom,
.site-footer [class*="footer-bottom"] {
  color: rgba(255,255,255,0.4) !important;
  font-size: 12px !important;
}

/* ────────────────────────────────────────────────────────────
   COLOUR KILLS — all off-brand eliminated
   ──────────────────────────────────────────────────────────── */

/* Mint, electric blue, hot pink → brand */
[style*="#40C4FF"], [style*="#20FFBF"], [style*="#FFB0E6"],
[style*="rgb(64, 196, 255)"], [style*="rgb(32, 255, 191)"],
[style*="rgb(255, 176, 230)"] {
  color: var(--color-brand) !important;
}

/* Cold blue backgrounds → brand light */
[style*="background: #E8F7FF"],
[style*="background:#E8F7FF"],
[style*="background-color: #E8F7FF"] {
  background: var(--color-brand-light) !important;
}

/* Yellow warning → gold light */
[style*="background: #FFF8E1"],
[style*="background:#FFF8E1"] {
  background: var(--color-surface) !important;
}

/* rgba electric blue callout */
[style*="rgba(64, 196, 255"] {
  background: var(--color-brand-light) !important;
}

/* Video placeholder — hide */
.video_section-row-0-max-width-section-centering {
  display: none !important;
}

/* Contact hero — full width */
.mas-contact-hero.mas-section {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
}
.mas-contact-hero .mas-section__inner {
  padding-left: 28px;
  padding-right: 28px;
}

/* ────────────────────────────────────────────────────────────
   RESPONSIVE
   ──────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .mas-hero h1 { font-size: 40px !important; }
  .mas-section, .mas-section-alt, .mas-section--alt {
    padding: 64px 20px !important;
  }
  .mas-card { padding: 24px !important; }
}

@media (max-width: 600px) {
  .mas-hero h1 { font-size: 32px !important; }
  .mas-section, .mas-section-alt { padding: 48px 16px !important; }
  .mas-card { padding: 20px !important; }
  .mas-btn-primary, .mas-btn-secondary {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ────────────────────────────────────────────────────────────
   FIX PASS — 5 issues from Sif's verification (2026-04-08)
   ──────────────────────────────────────────────────────────── */

/* FIX 1: Body text 17px — override HubSpot inline styles and cascade */
p, li, td, th, label,
.hs-richtext p,
.hs-richtext li,
.hs_cos_wrapper p,
.hs_cos_wrapper li,
.mas-page-content p,
.mas-page-content li,
.mas-kf-desc,
.mas-step-card p,
div[class*="section"] p,
section p,
main p {
  font-size: 17px !important;
  line-height: 1.65 !important;
  color: var(--color-text-body) !important;
  font-family: var(--font-sans) !important;
}

/* Exceptions that should stay small */
.type-small, small, .mas-compliance p,
.footer-compliance p, .site-footer p,
.site-footer li, caption, figcaption,
.mas-trust-pill, .mas-disclaimer-box p,
.mas-form-note, .mas-privacy-notice,
.type-eyebrow, [class*="eyebrow"],
[class*="sec-label"], [class*="nav-"] p {
  font-size: 13px !important;
}

/* Trust bar / utility bar small text stays small */
.mas-trust-bar p, .mas-utility-bar p,
.mas-compliance-footer p {
  font-size: 13px !important;
}

/* FIX 3: Warning card — white surface + gold left border, direct selector */
#mas-kf-card-interest,
.mas-kf-card.mas-kf-warning,
div[style*="background: #FDF4E7"],
div[style*="background:#FDF4E7"],
div[style*="background: #FFF8E1"],
div[style*="background:#FFF8E1"] {
  background: var(--color-surface) !important;
  background-color: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-left: 4px solid var(--color-gold) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-card) !important;
  padding: 32px !important;
  padding-left: 28px !important;
}

#mas-kf-card-interest h3,
.mas-kf-card.mas-kf-warning .mas-kf-heading {
  color: var(--color-text-primary) !important;
}

/* FIX 4: Old vivid purple #651fff remnant on calculator page */
/* rgba(101,31,255) → rgba(74,31,168) in box-shadow/border contexts */
/* Handled via CSS variable overrides — ensure --mas-purple is the new value */
:root {
  --mas-purple: #4A1FA8 !important;
  --mas-purple-dark: #3B1886 !important;
}

/* Explicit rgba fixes where 101,31,255 is hardcoded */
.mas-form-input:focus {
  border-color: var(--color-brand) !important;
  box-shadow: 0 0 0 3px rgba(74,31,168,0.10) !important;
}

.mas-c-track { background: rgba(74,31,168,0.12) !important; }
.mas-c-slbl { color: rgba(74,31,168,0.5) !important; }
.mas-c-input:focus, .mas-c-sel:focus {
  border-color: var(--color-brand) !important;
  box-shadow: 0 0 0 3px rgba(74,31,168,0.10) !important;
}
.mas-c-brow-total { border-top-color: rgba(74,31,168,0.18) !important; }
.mas-c-proj {
  border-color: rgba(74,31,168,0.25) !important;
  background: rgba(74,31,168,0.02) !important;
}
.mas-c-proj-prompt {
  background: #F0EDE8 !important;
  border-color: rgba(74,31,168,0.15) !important;
}
.mas-expert-card-primary {
  box-shadow: 0 2px 12px rgba(74,31,168,0.08) !important;
}
.mas-kf-card:hover {
  box-shadow: 0 8px 24px rgba(74,31,168,0.10) !important;
}
.mas-trust-pill {
  background: rgba(74,31,168,0.08) !important;
  color: var(--color-brand) !important;
}

/* Skip link — fix old purple #651fff */
.skip-link {
  background: var(--color-brand) !important;
  color: #ffffff !important;
}

/* Ensure no element anywhere uses rgb(101,31,255) */
[style*="background: rgb(101, 31, 255)"],
[style*="background:rgb(101,31,255)"],
[style*="background-color: rgb(101, 31, 255)"] {
  background: var(--color-brand) !important;
  background-color: var(--color-brand) !important;
}

/* Warning card — catch both the JS-injected and inline versions */
#mas-kf-card-interest,
.mas-kf-card.mas-kf-warning,
[style*="background: #FDF4E7"],
[style*="background:#FDF4E7"],
[style*="background: #FFF8E1"],
[style*="background:#FFF8E1"] {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-left: 4px solid #C9954C !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 8px rgba(26,26,46,0.06), 0 8px 24px rgba(26,26,46,0.04) !important;
}

/* Steps on How It Works page — ensure grid displays correctly */
.mas-steps-section { font-family: 'Poppins', sans-serif; }
.mas-steps-section p { max-width: none !important; }

/* ────────────────────────────────────────────────────────────
   UNIFIED HEADER — collapse utility bar + purple nav into one
   ──────────────────────────────────────────────────────────── */

/* Hide the separate purple nav strip — nav items move into utility bar */
.mas-purple-nav {
  display: none !important;
}

/* Utility bar becomes the single header */
.mas-utility-bar {
  background: var(--color-surface) !important;
  border-bottom: 1px solid var(--color-border) !important;
  padding: 0 28px !important;
  height: 72px !important;
  display: flex !important;
  align-items: center !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  box-shadow: 0 1px 4px rgba(26,26,46,0.06) !important;
}

.mas-utility-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  max-width: 1120px !important;
  margin: 0 auto !important;
}

/* Logo */
.mas-utility-logo-text {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--color-brand) !important;
}

/* Show nav links inside utility bar (they were hidden on mobile, show on desktop) */
.mas-utility-right {
  display: flex !important;
  align-items: center !important;
  gap: 28px !important;
}

/* Phone number — subtler in unified nav */
.mas-utility-phone {
  color: var(--color-text-muted) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

/* Inject nav links into header via a pseudo-nav row */
.mas-utility-bar::after {
  content: 'Home  ·  How It Works  ·  Eligibility  ·  Calculator  ·  For Families';
  display: none; /* Can't inject real links via CSS — handled by hiding purple nav and relying on mobile toggle */
}

/* Hero button hierarchy fix — make Check Eligibility visually PRIMARY */
.mas-btn--white.mas-btn-cta-primary,
.mas-hero .mas-btn--white:first-of-type,
.mas-hero__cta-bar a:first-child,
.mas-hero-ctas a:first-child {
  background: #ffffff !important;
  color: var(--color-brand) !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important;
  border: none !important;
}

/* Secondary hero button — ghost, lower visual weight */
.mas-hero .mas-btn--outline-white,
.mas-hero-ctas a:last-child {
  background: transparent !important;
  color: rgba(255,255,255,0.85) !important;
  border: 1.5px solid rgba(255,255,255,0.45) !important;
  box-shadow: none !important;
}

.mas-hero .mas-btn--outline-white:hover {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.7) !important;
  color: #ffffff !important;
}

/* Hero purple — ensure it uses brand value not old vivid */
.mas-hero,
.mas-hero--dark {
  background: linear-gradient(105deg, rgba(26,26,46,0.92) 0%, rgba(74,31,168,0.80) 60%, rgba(74,31,168,0.60) 100%) !important;
}