/* Modern polish layer — intentionally preserves the original design system. */
:root {
  --modern-radius-control: .75rem;
  --modern-radius-card: 1rem;
  --modern-radius-panel: 1.25rem;
  --modern-ease: cubic-bezier(.16, 1, .3, 1);
  --modern-shadow-card: 0 2px 6px rgb(14 32 56 / .04), 0 22px 55px -36px rgb(14 32 56 / .38);
  --modern-shadow-hover: 0 4px 10px rgb(14 32 56 / .05), 0 30px 70px -36px rgb(14 32 56 / .46);
}

/* One consistent corner language across utility-built surfaces. */
.rounded,
.rounded-md { border-radius: .625rem !important; }
.rounded-lg { border-radius: var(--modern-radius-card) !important; }

/* Navigation and compact controls */
header a[href="/"] > span:first-child {
  border-radius: var(--modern-radius-control) !important;
  background-color: transparent !important;
  background-image: url("/images/taxsmarter-mark.svg?v=percent-smile-1") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  color: transparent !important;
  box-shadow: 0 10px 24px -16px rgb(7 20 38 / .8) !important;
}

header nav a,
header button,
header select,
header [role="group"] {
  border-radius: var(--modern-radius-control) !important;
}

header [role="group"] button {
  border-radius: .625rem !important;
}

header {
  box-shadow: 0 1px 0 rgb(255 255 255 / .05), 0 14px 36px -30px rgb(7 20 38 / .65) !important;
}

/* Buttons: same colours and hierarchy, more contemporary silhouette. */
.btn-primary,
.btn-secondary {
  border-radius: var(--modern-radius-control) !important;
  box-shadow: 0 10px 24px -16px rgb(7 20 38 / .52), inset 0 1px rgb(255 255 255 / .28) !important;
  transition: transform .22s var(--modern-ease), box-shadow .22s var(--modern-ease), background-color .18s ease, border-color .18s ease !important;
}

.btn-primary:hover,
.btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -18px rgb(7 20 38 / .52), inset 0 1px rgb(255 255 255 / .32) !important;
}

.btn-primary:active,
.btn-secondary:active { transform: translateY(0) scale(.985); }

/* Main content cards */
.card {
  border-radius: var(--modern-radius-card) !important;
  box-shadow: var(--modern-shadow-card) !important;
  transition: transform .24s var(--modern-ease), box-shadow .24s var(--modern-ease), border-color .2s ease !important;
}

.card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--modern-shadow-hover) !important;
}

form.card:hover,
section.card:hover,
aside.card:hover,
article.card:not(a article):hover {
  transform: none !important;
}

.card > .relative.overflow-hidden,
.card img + div,
.card img {
  border-radius: .75rem;
}

/* Data entry surfaces */
.form-input,
.form-select {
  min-height: 2.75rem !important;
  border-radius: var(--modern-radius-control) !important;
  box-shadow: inset 0 1px 2px rgb(14 32 56 / .025), 0 1px 2px rgb(14 32 56 / .035) !important;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease !important;
}

.form-input:hover,
.form-select:hover {
  box-shadow: inset 0 1px 2px rgb(14 32 56 / .02), 0 2px 6px rgb(14 32 56 / .045) !important;
}

.form-input:focus-visible,
.form-select:focus-visible {
  box-shadow: 0 0 0 3px rgb(212 169 78 / .18), 0 2px 6px rgb(14 32 56 / .05) !important;
}

textarea.form-input { border-radius: var(--modern-radius-card) !important; }

/* The homepage visual stays original; only its frame is refined. */
body > main > section:first-child div[aria-hidden="true"].lg\:block {
  border-radius: var(--modern-radius-panel) !important;
  box-shadow: 0 30px 70px -34px rgb(7 20 38 / .72), inset 0 1px rgb(255 255 255 / .08) !important;
}

body > main > section:first-child div[aria-hidden="true"].lg\:block > div {
  border-radius: .75rem;
}

/* Calculator results, callouts, FAQ rows, and tables */
aside.rounded-lg,
div.rounded-lg.border,
section.rounded-lg.border {
  border-radius: var(--modern-radius-card) !important;
  box-shadow: 0 12px 32px -28px rgb(14 32 56 / .36);
}

button[aria-controls^="faq-panel-"] {
  border-radius: var(--modern-radius-control);
  transition: background-color .18s ease, color .18s ease !important;
}

table {
  border-radius: var(--modern-radius-control);
  overflow: hidden;
}

/* Wizard and result pages are focused work surfaces. */
main > section.mx-auto.rounded-lg {
  border-radius: var(--modern-radius-panel) !important;
  box-shadow: 0 4px 12px rgb(14 32 56 / .04), 0 34px 80px -44px rgb(14 32 56 / .46) !important;
}

@media (max-width: 767px) {
  :root {
    --modern-radius-card: .875rem;
    --modern-radius-panel: 1rem;
  }

  header nav a { border-radius: .625rem !important; }
  .card:hover { transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .card,
  .btn-primary,
  .btn-secondary,
  .form-input,
  .form-select { transition: none !important; }
}

/* Reference palette — derived from the supplied TaxSmarter mobile UI. */
:root {
  --theme-canvas: #F7F8FB;
  --theme-surface: #FFFFFF;
  --theme-blue: #2C45B6;
  --theme-blue-dark: #243895;
  --theme-blue-soft: #EDF1FF;
  --theme-navy: #14213D;
  --theme-ink: #0B1C33;
  --theme-slate: #596577;
  --theme-border: #DDE3EF;
  --theme-teal: #2A7E7B;
  --theme-teal-soft: #EEF8F7;
  --theme-gold: #DDAF46;
  --theme-gold-soft: #F6F3EB;
  --modern-radius-control: .875rem;
  --modern-radius-card: 1.25rem;
  --modern-radius-panel: 1.5rem;
  --modern-shadow-card: 0 1px 2px rgb(11 28 51 / .03), 0 18px 40px -32px rgb(44 69 182 / .28);
  --modern-shadow-hover: 0 2px 6px rgb(11 28 51 / .04), 0 24px 50px -32px rgb(44 69 182 / .34);
}

html,
body {
  background: var(--theme-canvas) !important;
  color: var(--theme-ink);
}

/* Re-map the original utility palette to the new application theme. */
.bg-warm-50 { background-color: var(--theme-canvas) !important; }
.bg-white { background-color: var(--theme-surface) !important; }
.bg-navy-100 { background-color: var(--theme-blue-soft) !important; }
.bg-navy-900,
.bg-navy-950 { background-color: var(--theme-navy) !important; }
.bg-navy-950\/45 { background-color: rgb(44 69 182 / .45) !important; }
.bg-navy-950\/\[0\.94\],
.bg-navy-950\/\[0\.98\] { background-color: rgb(44 69 182 / .96) !important; }
.bg-teal-50 { background-color: var(--theme-teal-soft) !important; }
.bg-teal-50\/80 { background-color: rgb(238 248 247 / .8) !important; }
.bg-teal-400\/30 { background-color: rgb(42 126 123 / .18) !important; }
.bg-gold { background-color: var(--theme-gold) !important; }
.bg-gold\/80 { background-color: rgb(221 175 70 / .8) !important; }
.bg-gold-100 { background-color: var(--theme-gold-soft) !important; }

.text-navy-950,
.text-navy-900 { color: var(--theme-ink) !important; }
.text-navy-800 { color: #24334A !important; }
.text-navy-700 { color: #3F4D61 !important; }
.text-warm-700 { color: var(--theme-slate) !important; }
.text-warm-600 { color: #5B687A !important; }
.text-warm-500 { color: #667386 !important; }
.text-teal-800 { color: #216A67 !important; }
.text-teal-700 { color: var(--theme-teal) !important; }
.text-teal-100 { color: #DCE6FF !important; }
.text-teal-50 { color: #F2F4FF !important; }
.text-gold { color: var(--theme-blue) !important; }
.text-gold-700 { color: var(--theme-blue-dark) !important; }

.border-warm-50,
.border-warm-150,
.border-warm-200 { border-color: var(--theme-border) !important; }
.border-warm-300 { border-color: #CBD3E1 !important; }
.border-navy-900,
.border-navy-950 { border-color: var(--theme-blue) !important; }
.border-teal-100 { border-color: #D8EFED !important; }
.border-teal-200 { border-color: #B9DEDA !important; }
.border-gold-200 { border-color: #E7D8AD !important; }
.border-gold-700\/20 { border-color: rgb(195 172 95 / .28) !important; }
.divide-warm-150 > :not([hidden]) ~ :not([hidden]),
.divide-warm-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--theme-border) !important; }
.divide-teal-100 > :not([hidden]) ~ :not([hidden]) { border-color: #D8EFED !important; }

.from-warm-50 {
  --tw-gradient-from: var(--theme-canvas) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(247 248 251 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

/* Light, app-like navigation from the reference. */
header {
  background-color: rgb(247 248 251 / .96) !important;
  border-color: var(--theme-border) !important;
  color: var(--theme-ink) !important;
  box-shadow: 0 1px 0 rgb(221 227 239 / .9), 0 14px 34px -30px rgb(44 69 182 / .28) !important;
}

header nav a {
  color: var(--theme-ink) !important;
}

header nav a:hover {
  background-color: var(--theme-blue-soft) !important;
  color: var(--theme-blue) !important;
}

header button,
header select,
header span.inline-flex {
  background-color: var(--theme-surface) !important;
  border-color: var(--theme-border) !important;
  color: var(--theme-blue) !important;
  box-shadow: 0 1px 3px rgb(11 28 51 / .06) !important;
}

header button:hover {
  background-color: var(--theme-blue-soft) !important;
  border-color: #C9D3F5 !important;
  color: var(--theme-blue-dark) !important;
}

header.bg-navy-950\/\[0\.94\],
header.bg-navy-950\/\[0\.98\] {
  background-color: rgb(247 248 251 / .96) !important;
}

header.text-white {
  color: var(--theme-ink) !important;
}

header .bg-white\/\[0\.08\],
header .bg-white\/95 {
  background-color: var(--theme-surface) !important;
}

header .border-white\/10,
header .border-white\/15,
header .border-white\/20,
header .border-white\/25 {
  border-color: var(--theme-border) !important;
}

header .text-teal-50,
header button.text-teal-50,
header span.text-teal-50 {
  color: var(--theme-blue) !important;
}

header .text-teal-100 {
  color: var(--theme-slate) !important;
}

header nav a.text-teal-50 {
  color: var(--theme-ink) !important;
}

/* The homepage hero becomes a light workspace with a restrained blue field. */
body > main > section:first-child {
  background-color: var(--theme-canvas) !important;
  color: var(--theme-ink) !important;
}

body > main > section:first-child > img {
  opacity: 0 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

body > main > section:first-child > div.absolute.inset-0:nth-of-type(1) {
  background-image:
    radial-gradient(circle at 16% 16%, rgb(44 69 182 / .11) 0, rgb(44 69 182 / .05) 18rem, transparent 38rem),
    linear-gradient(145deg, #F7F8FB 0%, #F2F5FD 54%, #F7F8FB 100%) !important;
}

body > main > section:first-child > div.absolute.inset-0:nth-of-type(2) {
  background-image:
    linear-gradient(rgb(44 69 182 / .12) 1px, transparent 1px),
    linear-gradient(90deg, rgb(44 69 182 / .12) 1px, transparent 1px) !important;
  opacity: .08 !important;
}

body > main > section:first-child .text-white {
  color: var(--theme-ink) !important;
}

body > main > section:first-child .text-teal-50,
body > main > section:first-child .text-teal-100 {
  color: var(--theme-slate) !important;
}

body > main > section:first-child span.inline-flex.border {
  background-color: var(--theme-surface) !important;
  border-color: var(--theme-border) !important;
  color: var(--theme-slate) !important;
  box-shadow: 0 1px 3px rgb(11 28 51 / .05) !important;
}

/* A single framed editorial banner replaces the previous CSS dashboard mockup. */
body > main > section:first-child div[aria-hidden="true"].lg\:block {
  display: block !important;
  padding: 0 !important;
  background-color: #E9EEF8 !important;
  background-image: url("/images/og-image.webp?v=premium-visuals-1") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  border-color: rgb(255 255 255 / .9) !important;
  box-shadow:
    0 1px 0 rgb(255 255 255 / .9) inset,
    0 28px 70px -34px rgb(44 69 182 / .42) !important;
}

body > main > section:first-child div[aria-hidden="true"].lg\:block > * {
  display: none !important;
}

/* Make image-led cards feel like editorial modules rather than thumbnails. */
.card > .relative.aspect-\[4\/3\] {
  border: 1px solid rgb(221 227 239 / .9);
  background-color: #EDF1FF !important;
  overflow: hidden;
}

.card > .relative.aspect-\[4\/3\] img {
  filter: saturate(.94) contrast(1.02);
}

/* Primary blue actions and clean outlined secondary actions. */
.btn-primary {
  background: var(--theme-blue) !important;
  border-color: var(--theme-blue) !important;
  color: #FFFFFF !important;
  box-shadow: 0 10px 24px -16px rgb(44 69 182 / .64) !important;
}

.btn-primary:hover {
  background: var(--theme-blue-dark) !important;
  border-color: var(--theme-blue-dark) !important;
  color: #FFFFFF !important;
}

.btn-secondary {
  background: var(--theme-surface) !important;
  border-color: var(--theme-blue) !important;
  color: var(--theme-blue) !important;
  box-shadow: 0 5px 16px -14px rgb(44 69 182 / .5) !important;
}

.btn-secondary:hover {
  background: var(--theme-blue-soft) !important;
  border-color: var(--theme-blue-dark) !important;
  color: var(--theme-blue-dark) !important;
}

/* Contrast safeguards for utility combinations used by dynamic controls. */
.bg-navy-900.text-white,
.bg-navy-950.text-white,
.bg-navy-900 .text-white,
.bg-navy-950 .text-white {
  color: #FFFFFF !important;
}

.bg-navy-900.text-gold,
.bg-navy-950.text-gold,
.bg-navy-900 .text-gold,
.bg-navy-950 .text-gold {
  color: #FFFFFF !important;
}

body > main > section:first-child .text-gold {
  color: var(--theme-blue) !important;
}

.bg-gold.text-white,
.bg-gold .text-white {
  color: var(--theme-ink) !important;
}

.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.focus-ring:focus-visible {
  --tw-ring-color: rgb(44 69 182 / .55) !important;
}

.form-input,
.form-select {
  background-color: var(--theme-surface) !important;
  border-color: var(--theme-border) !important;
  color: var(--theme-ink) !important;
}

.form-input:focus,
.form-select:focus,
.form-input:focus-visible,
.form-select:focus-visible {
  border-color: var(--theme-blue) !important;
  box-shadow: 0 0 0 3px rgb(44 69 182 / .13), 0 2px 6px rgb(11 28 51 / .05) !important;
}

.card {
  background-color: var(--theme-surface) !important;
  border-color: var(--theme-border) !important;
}

.card:hover {
  border-color: #C9D3F5 !important;
}

main > section.mx-auto.rounded-lg,
aside.rounded-lg {
  border-color: var(--theme-blue) !important;
}

.hover\:bg-navy-900:hover { background-color: var(--theme-blue-dark) !important; }
.hover\:text-teal-700:hover,
.hover\:text-teal-800:hover { color: var(--theme-blue) !important; }
.hover\:border-teal-400:hover,
.hover\:border-teal-400\/70:hover { border-color: var(--theme-blue) !important; }

@media (min-width: 1024px) and (max-width: 1399px) {
  body > main > section:first-child .display-hero {
    font-size: clamp(3.35rem, 4.4vw, 4rem) !important;
    line-height: 1.06 !important;
    letter-spacing: -.035em !important;
  }
}

@media (max-width: 767px) {
  :root {
    --modern-radius-card: 1.125rem;
    --modern-radius-panel: 1.375rem;
  }

  body > main > section:first-child > div.relative.z-10 {
    min-height: auto !important;
    padding-top: 4.5rem !important;
    padding-bottom: 5.5rem !important;
  }

  body > main > section:first-child div[aria-hidden="true"].lg\:block {
    min-height: 0 !important;
    aspect-ratio: 16 / 10 !important;
    border-radius: var(--modern-radius-panel) !important;
  }
}