/* taxsmarter — 2026 interface refresh
   Palette: Paper / Graphite / Victoria blue / Bauhinia */
:root {
  --paper: #ffffff;
  --cloud: #f6f8fc;
  --cloud-blue: #edf2ff;
  --graphite: #111827;
  --slate: #4b5565;
  --blue: #315de8;
  --blue-deep: #2446bd;
  --blue-soft: #dfe7ff;
  --bauhinia: #bd2d67;
  --bauhinia-soft: #fbeaf1;
  --line: #dfe4ee;
  --shadow-sm: 0 2px 8px rgb(17 24 39 / 0.06);
  --shadow-card: 0 18px 45px -26px rgb(25 41 88 / 0.28), 0 2px 8px rgb(17 24 39 / 0.04);
  --shadow-lift: 0 28px 70px -30px rgb(49 93 232 / 0.32), 0 8px 22px rgb(17 24 39 / 0.07);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

html { scroll-behavior: smooth; }

body {
  background: var(--cloud);
  color: var(--graphite);
  font-family: var(--font-inter), "PingFang HK", "Noto Sans HK", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--blue-soft); color: var(--graphite); }

/* Re-map the original utility palette into the new system. */
.bg-warm-50 { background-color: var(--cloud) !important; }
.bg-warm-100 { background-color: #edf0f5 !important; }
.bg-navy-950 { background-color: var(--graphite) !important; }
.bg-navy-900 { background-color: #192235 !important; }
.bg-navy-100 { background-color: var(--cloud-blue) !important; }
.bg-teal-50, .bg-teal-50\/80 { background-color: var(--cloud-blue) !important; }
.bg-teal-100 { background-color: var(--blue-soft) !important; }
.bg-gold, .bg-gold-100 { background-color: var(--blue) !important; }
.text-navy-950, .text-navy-900 { color: var(--graphite) !important; }
.text-navy-800, .text-navy-700 { color: #31405c !important; }
.text-warm-700, .text-warm-600 { color: var(--slate) !important; }
.text-warm-500 { color: #738095 !important; }
.text-teal-900, .text-teal-800, .text-teal-700 { color: var(--blue-deep) !important; }
.text-gold, .text-gold-700 { color: var(--bauhinia) !important; }
.border-warm-150, .border-warm-200, .border-warm-300 { border-color: var(--line) !important; }
.border-teal-100, .border-teal-200 { border-color: var(--blue-soft) !important; }

/* Educational notice */
body > div:first-child {
  background: linear-gradient(90deg, var(--bauhinia-soft), #fff4f8) !important;
  border-color: rgb(189 45 103 / .16) !important;
  color: #7d2448 !important;
  letter-spacing: .01em;
}

body > div:first-child p::before {
  content: "●";
  display: inline-block;
  margin-right: .55rem;
  color: var(--bauhinia);
  font-size: .55rem;
  vertical-align: .12rem;
}

/* Header */
header {
  background: rgb(255 255 255 / .92) !important;
  border-color: rgb(223 228 238 / .9) !important;
  color: var(--graphite) !important;
  box-shadow: 0 1px 0 rgb(17 24 39 / .04), 0 12px 38px -28px rgb(17 24 39 / .28) !important;
  backdrop-filter: blur(18px) saturate(150%);
}

header a[href="/"] > span:first-child {
  position: relative;
  overflow: hidden;
  border-radius: .85rem !important;
  background: linear-gradient(145deg, #416cf3, var(--blue-deep)) !important;
  color: white !important;
  box-shadow: 0 10px 24px -14px rgb(49 93 232 / .75) !important;
}

header a[href="/"] > span:first-child::after {
  content: "";
  position: absolute;
  inset: auto -20% -38% 18%;
  height: 62%;
  border-radius: 50%;
  background: var(--bauhinia);
  transform: rotate(-12deg);
}

header a[href="/"] > span:first-child { isolation: isolate; }
header a[href="/"] > span:first-child::after { z-index: -1; }
header a[href="/"] .text-teal-100 { color: #67738a !important; }

header nav a {
  position: relative;
  border-radius: .7rem !important;
  color: #3d485c !important;
  transition: color .2s ease, background-color .2s ease, transform .2s var(--ease-out) !important;
}

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

header nav a[aria-current="page"] {
  background: var(--cloud-blue) !important;
  color: var(--blue-deep) !important;
}

header nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  right: .75rem;
  bottom: .32rem;
  left: .75rem;
  height: 2px;
  border-radius: 999px;
  background: var(--blue);
}

header button,
header select,
header [role="group"] {
  border-color: var(--line) !important;
  background-color: var(--cloud) !important;
  color: var(--graphite) !important;
  box-shadow: none !important;
}

header [role="group"] button[aria-pressed="true"] {
  background: var(--blue) !important;
  color: white !important;
}

header button:hover { background: var(--cloud-blue) !important; color: var(--blue-deep) !important; }
header div[id] > div { border-color: var(--line) !important; }

header > div:first-child > div:last-child > span {
  border-color: var(--line) !important;
  background: var(--cloud) !important;
  color: #3d485c !important;
  box-shadow: none !important;
}

/* Type */
.display-hero,
.display-section,
.display-subsection {
  color: var(--graphite) !important;
  font-family: "PingFang HK", "Noto Sans HK", "Noto Sans TC", var(--font-inter), sans-serif;
  letter-spacing: -.045em !important;
  text-wrap: balance;
}

.display-hero { font-size: clamp(2.75rem, 5.4vw, 5.25rem) !important; line-height: 1.01 !important; font-weight: 800 !important; }
.display-section { font-size: clamp(2.15rem, 4.2vw, 3.7rem) !important; line-height: 1.07 !important; }
.display-subsection { letter-spacing: -.025em !important; }
main p { text-wrap: pretty; }

main section > div > p.font-bold.uppercase {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--bauhinia) !important;
  letter-spacing: .14em;
}

main section > div > p.font-bold.uppercase::before {
  content: "";
  width: 1.5rem;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

/* Buttons */
.btn-primary,
button.bg-navy-950,
a.bg-navy-950 {
  border: 1px solid rgb(36 70 189 / .28) !important;
  border-radius: .8rem !important;
  background: linear-gradient(180deg, #315de8, var(--blue-deep)) !important;
  color: white !important;
  box-shadow: 0 13px 28px -16px rgb(49 93 232 / .8), inset 0 1px rgb(255 255 255 / .24) !important;
}

.btn-primary::after {
  content: "→";
  margin-left: .7rem;
  font-size: 1.05rem;
  transition: transform .2s var(--ease-out);
}

.btn-primary:hover,
button.bg-navy-950:hover,
a.bg-navy-950:hover {
  background: linear-gradient(180deg, #355fe6, var(--blue-deep)) !important;
  transform: translateY(-2px);
  box-shadow: 0 20px 38px -18px rgb(49 93 232 / .75) !important;
}

.btn-primary:hover::after { transform: translateX(3px); }

.btn-secondary {
  border: 1px solid #cfd6e4 !important;
  border-radius: .8rem !important;
  background: rgb(255 255 255 / .8) !important;
  color: var(--graphite) !important;
  box-shadow: var(--shadow-sm) !important;
}

.btn-secondary:hover {
  border-color: var(--blue) !important;
  background: white !important;
  color: var(--blue-deep) !important;
  transform: translateY(-2px);
}

/* Fields */
.form-input,
.form-select {
  min-height: 3rem !important;
  border: 1px solid #cfd6e4 !important;
  border-radius: .75rem !important;
  background: #fbfcff !important;
  color: var(--graphite) !important;
  box-shadow: inset 0 1px 2px rgb(17 24 39 / .025) !important;
}

.form-input:hover,
.form-select:hover { border-color: #aeb8ca !important; }
.form-input:focus,
.form-select:focus {
  border-color: var(--blue) !important;
  outline: 3px solid rgb(49 93 232 / .14) !important;
  box-shadow: 0 0 0 1px var(--blue) !important;
}

input[type="checkbox"], input[type="radio"] { accent-color: var(--blue) !important; }

/* Cards */
.card {
  border: 1px solid var(--line) !important;
  border-radius: 1.25rem !important;
  background: rgb(255 255 255 / .96) !important;
  box-shadow: var(--shadow-card) !important;
  transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out), border-color .28s ease !important;
}

.card:hover {
  border-color: rgb(49 93 232 / .28) !important;
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-lift) !important;
}

form.card:hover,
section.card:hover,
aside.card:hover { transform: none !important; box-shadow: var(--shadow-card) !important; }

/* Homepage hero */
body.page-home main > section:first-child {
  min-height: min(780px, calc(100svh - 7rem));
  background: var(--cloud-blue) !important;
  color: var(--graphite) !important;
}

body.page-home main > section:first-child > img {
  opacity: .2 !important;
  mix-blend-mode: multiply !important;
  filter: grayscale(1) contrast(.75) brightness(1.22) sepia(.15) hue-rotate(175deg);
  object-position: center bottom;
}

body.page-home main > section:first-child > div:nth-of-type(1) {
  background-image:
    radial-gradient(circle at 8% 22%, rgb(189 45 103 / .1), transparent 27rem),
    radial-gradient(circle at 78% 12%, rgb(49 93 232 / .18), transparent 32rem),
    linear-gradient(120deg, rgb(255 255 255 / .98), rgb(246 248 252 / .93) 52%, rgb(232 238 255 / .9)) !important;
}

body.page-home main > section:first-child > div:nth-of-type(2) {
  opacity: .26 !important;
  background-image: linear-gradient(rgb(49 93 232 / .12) 1px, transparent 1px), linear-gradient(90deg, rgb(49 93 232 / .12) 1px, transparent 1px) !important;
  background-size: 56px 56px !important;
  mask-image: linear-gradient(to right, transparent, black 55%, black);
}

body.page-home main > section:first-child > div:nth-of-type(3) {
  background-image: linear-gradient(to top, var(--cloud), transparent) !important;
}

body.page-home main > section:first-child > div:last-child {
  min-height: min(700px, calc(100svh - 9rem)) !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(330px, .58fr) !important;
  gap: clamp(2.5rem, 6vw, 6rem) !important;
}

body.page-home main > section:first-child .display-hero {
  max-width: 9ch;
  color: var(--graphite) !important;
  text-shadow: none;
}

body.page-home main > section:first-child .text-teal-50 { color: #526077 !important; }
body.page-home main > section:first-child .text-white { color: var(--graphite) !important; }

body.page-home main > section:first-child .btn-secondary {
  background: rgb(255 255 255 / .72) !important;
}

body.page-home main > section:first-child span.border-white\/15 {
  border-color: rgb(49 93 232 / .16) !important;
  background: rgb(255 255 255 / .66) !important;
  color: #3d485c !important;
  box-shadow: 0 7px 20px -18px rgb(17 24 39 / .42) !important;
}

/* Signature "assessment window" — the existing chart becomes the HK skyline. */
body.page-home main > section:first-child div[aria-hidden="true"].lg\:block {
  overflow: visible !important;
  border: 1px solid rgb(49 93 232 / .18) !important;
  border-radius: 1.75rem !important;
  background: linear-gradient(155deg, #263f91, #172651 68%, #131c35) !important;
  box-shadow: 0 36px 90px -36px rgb(49 93 232 / .55), 0 4px 12px rgb(17 24 39 / .12) !important;
  transform: rotate(-1.4deg);
}

body.page-home main > section:first-child div[aria-hidden="true"].lg\:block::before {
  content: "2025/26  •  TAX CLARITY";
  position: absolute;
  z-index: 5;
  top: -1.05rem;
  right: 1.4rem;
  padding: .65rem .9rem;
  border-radius: .75rem;
  background: var(--bauhinia);
  color: white;
  font: 700 .68rem/1 var(--font-inter), sans-serif;
  letter-spacing: .12em;
  box-shadow: 0 12px 28px -14px rgb(189 45 103 / .78);
}

body.page-home main > section:first-child div[aria-hidden="true"].lg\:block::after {
  content: "HK";
  position: absolute;
  z-index: 4;
  right: 1.15rem;
  bottom: 2.1rem;
  display: grid;
  width: 4.5rem;
  height: 4.5rem;
  place-items: center;
  border: 7px solid rgb(255 255 255 / .85);
  border-radius: 50%;
  background: var(--blue);
  color: white;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.03em;
  box-shadow: 0 18px 36px -20px rgb(17 24 39 / .7);
}

body.page-home main > section:first-child div[aria-hidden="true"].lg\:block > div:first-child {
  background: linear-gradient(140deg, rgb(255 255 255 / .1), transparent 45%, rgb(189 45 103 / .15)) !important;
}

body.page-home main > section:first-child div[aria-hidden="true"].lg\:block .bg-gold\/80 { background: #ff7bad !important; }
body.page-home main > section:first-child div[aria-hidden="true"].lg\:block .bg-teal-400\/30 { background: rgb(119 148 255 / .38) !important; }
body.page-home main > section:first-child div[aria-hidden="true"].lg\:block .from-gold\/70 {
  --tw-gradient-from: rgb(117 148 255 / .9) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(117 148 255 / 0) var(--tw-gradient-to-position) !important;
}

/* Homepage content rhythm */
body.page-home main > section:nth-child(2) {
  background: linear-gradient(180deg, var(--cloud), #fff) !important;
}

body.page-home main > section:nth-child(2) .card { padding: .55rem !important; }
body.page-home main > section:nth-child(2) .card > div:first-child { border-radius: .9rem !important; }
body.page-home main > section:nth-child(2) .card h3::after {
  content: "↗";
  float: right;
  color: var(--blue);
  font-size: 1rem;
  transition: transform .2s var(--ease-out);
}
body.page-home main > section:nth-child(2) .card:hover h3::after { transform: translate(2px, -2px); }

body.page-home main > section:nth-child(3) { background: white !important; }
body.page-home main > section:nth-child(3) article.card { position: relative; overflow: hidden; }
body.page-home main > section:nth-child(3) article.card > div:first-child {
  border-radius: .8rem !important;
  background: var(--cloud-blue) !important;
  color: var(--blue-deep) !important;
  box-shadow: none !important;
}
body.page-home main > section:nth-child(3) article.card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--bauhinia));
  opacity: .78;
}

body.page-home main > section:nth-child(4) {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, #1c2b56, #253f91 60%, #452457) !important;
}

body.page-home main > section:nth-child(4)::before {
  content: "";
  position: absolute;
  inset: -80% auto auto 62%;
  width: 36rem;
  height: 36rem;
  border: 1px solid rgb(255 255 255 / .14);
  border-radius: 50%;
  box-shadow: 0 0 0 80px rgb(255 255 255 / .025), 0 0 0 160px rgb(255 255 255 / .018);
}

body.page-home main > section:nth-child(4) .display-subsection { color: white !important; }
body.page-home main > section:nth-child(4) .text-teal-50 { color: #e5eaff !important; }

/* Inner-page hero: quiet, bright, and recognizably part of the same system. */
body:not(.page-home):not(.page-wizard):not(.page-results):not(.page-bir60) main > section:first-child {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 86% 15%, rgb(49 93 232 / .14), transparent 25rem),
    linear-gradient(135deg, #fff, var(--cloud) 58%, #eef2ff) !important;
}

body:not(.page-home):not(.page-wizard):not(.page-results):not(.page-bir60) main > section:first-child::after {
  content: "HK / 2025–26";
  position: absolute;
  right: max(1.5rem, calc((100vw - 80rem) / 2));
  bottom: 2rem;
  color: rgb(49 93 232 / .22);
  font: 800 clamp(2rem, 6vw, 5.5rem)/1 var(--font-inter), sans-serif;
  letter-spacing: -.07em;
  pointer-events: none;
}

body:not(.page-home) main > section:first-child > div { position: relative; z-index: 1; }

/* Long-form guide pages */
body.page-guide main > section:nth-child(even) { background: var(--cloud) !important; }
body.page-guide main > section:nth-child(odd) { background: white !important; }
body.page-guide main article p,
body.page-guide main section p { line-height: 1.85; }
body.page-guide main ul, body.page-guide main ol { line-height: 1.8; }

/* FAQ accordion and data tables */
button[aria-controls^="faq-panel-"] {
  border-radius: .85rem;
  transition: background .2s ease, color .2s ease !important;
}
button[aria-controls^="faq-panel-"][aria-expanded="true"] {
  background: var(--cloud-blue) !important;
  color: var(--blue-deep) !important;
}

table {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: white;
  box-shadow: var(--shadow-sm);
}
thead { background: #edf2ff !important; color: var(--graphite); }
tbody tr { transition: background-color .16s ease; }
tbody tr:hover { background: #f8faff; }

/* Calculator result panels */
body.page-calculators aside.bg-teal-50 {
  border-radius: 1.1rem !important;
  background: linear-gradient(145deg, #edf2ff, #f8faff) !important;
  box-shadow: inset 0 0 0 1px rgb(49 93 232 / .08) !important;
}

/* Wizard / results should feel like focused work surfaces. */
body.page-wizard main,
body.page-results main,
body.page-bir60 main {
  background:
    radial-gradient(circle at 12% 6%, rgb(189 45 103 / .07), transparent 24rem),
    radial-gradient(circle at 88% 18%, rgb(49 93 232 / .1), transparent 28rem),
    var(--cloud) !important;
}

body.page-wizard main > section,
body.page-results main > section,
body.page-bir60 main > section {
  border-color: rgb(49 93 232 / .13) !important;
  border-radius: 1.5rem !important;
  box-shadow: 0 32px 80px -38px rgb(49 93 232 / .28) !important;
}

/* Footer */
footer {
  border-color: var(--line) !important;
  background: #fbfcff !important;
}
footer a { text-underline-offset: .25rem; }
footer a:hover { color: var(--blue) !important; }

/* Reading progress and back-to-top controls, injected by ux-refresh.js */
.ux-progress {
  position: fixed;
  z-index: 60;
  top: 0;
  left: 0;
  width: var(--ux-progress, 0%);
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--bauhinia));
  box-shadow: 0 0 14px rgb(49 93 232 / .35);
  transition: width .08s linear;
  pointer-events: none;
}

.ux-to-top {
  position: fixed;
  z-index: 50;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border: 1px solid rgb(49 93 232 / .18);
  border-radius: 1rem;
  background: rgb(255 255 255 / .92);
  color: var(--blue-deep);
  font-size: 1.2rem;
  box-shadow: var(--shadow-card);
  opacity: 0;
  transform: translateY(.75rem);
  pointer-events: none;
  transition: opacity .2s ease, transform .25s var(--ease-out), background .2s ease;
  backdrop-filter: blur(12px);
}

.ux-to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.ux-to-top:hover { background: var(--blue); color: white; transform: translateY(-2px); }
.ux-to-top:focus-visible { outline: 3px solid rgb(49 93 232 / .25); outline-offset: 3px; }

@media (max-width: 1023px) {
  body.page-home main > section:first-child > div:last-child { grid-template-columns: 1fr !important; }
  body.page-home main > section:first-child .display-hero { max-width: 10ch; }
  body:not(.page-home):not(.page-wizard):not(.page-results):not(.page-bir60) main > section:first-child::after { opacity: .45; }
}

@media (min-width: 768px) and (max-width: 1180px) {
  header > div:last-child { align-items: flex-start !important; }
  header > div:last-child > div:last-child {
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: .55rem !important;
  }
  header > div:last-child nav { flex-wrap: nowrap !important; }
}

@media (max-width: 767px) {
  header { backdrop-filter: blur(14px) saturate(150%); }
  header nav a[aria-current="page"]::after { display: none; }
  .display-hero { font-size: clamp(2.45rem, 12vw, 3.65rem) !important; }
  .display-section { font-size: clamp(2rem, 9vw, 3rem) !important; }
  body.page-home main > section:first-child { min-height: auto; }
  body.page-home main > section:first-child > div:last-child {
    min-height: auto !important;
    padding-top: 4.5rem !important;
    padding-bottom: 7rem !important;
  }
  body.page-home main > section:first-child .display-hero { max-width: 9ch; }
  body.page-home main > section:first-child > div:nth-of-type(2) { background-size: 40px 40px !important; }
  .card { border-radius: 1rem !important; }
  .ux-to-top { bottom: calc(5.25rem + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ux-progress, .ux-to-top { transition: none; }
}

@media print {
  .ux-progress, .ux-to-top { display: none !important; }
}