/* Dubai Salary Check — "Ledger".
   A financial statement, not a dashboard: graphite ground, hairline rules that
   carry structure rather than decorate it, and figures set like printed accounts.
   Type: Inter Display (headings, verdicts and every numeral — the variable opsz
   axis is pinned to 32 at display sizes for the tighter display cut) + Onest
   (body and UI). Weight contrast does the work: light text, heavy emphasis.
   Colour: verdant green is the brand AND the meaning of "saved"; brass is the
   second voice for caution and data marks; clay for a shortfall.
   Shape: cards 14px, controls 10px, pills only where something toggles.
   Motion: transform/opacity only, cubic-bezier(0.32,0.72,0,1). */

@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 300 900; font-display: swap;
  src: url('/styles/fonts/inter-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Onest';
  font-style: normal; font-weight: 300 800; font-display: swap;
  src: url('/styles/fonts/onest-variable.woff2') format('woff2');
}

:root {
  --bg: #0d1110;
  --surface: #141917;
  --surface-2: #1b211e;
  --shell: rgba(255, 255, 255, 0.032);
  --line: rgba(255, 255, 255, 0.11);
  --line-soft: rgba(255, 255, 255, 0.06);
  --text: #eef2ef;
  --muted: #94a09a;
  --accent: #3f9d78;
  --accent-bright: #6fc79f;
  --accent-ink: #06120c;
  --brass: #c79a4a;
  --good: #55c395;
  --warn: #d9a441;
  --bad: #d9705f;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --font-display: 'Inter', 'Segoe UI', sans-serif;
  --font-ui: 'Onest', 'Segoe UI', sans-serif;
  /* Aurora backdrop: reads these, so it follows the theme. Kept close to the
     surface colours so the ribbons register as atmosphere, not decoration. */
  --aurora-base: #0d1110;
  --aurora-mid: #151d1a;
  --aurora-sheen: #c79a4a;
  --aurora-accent: #3f9d78;
  --aurora-intensity: 0.85;
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
img, svg { max-width: 100%; }

/* Aurora backdrop: fixed behind every page, never interactive. The veil on top
   is what protects text contrast, so do not remove it. */
#aurora {
  position: fixed; inset: 0; z-index: -2; display: block;
  width: 100%; height: 100%; pointer-events: none;
}
/* The veil never drops below 85% background. The shader can theoretically peak
   near white where its ribbons overlap, and muted body text over that would fail
   AA, so this floor is what guarantees the contrast, not the shader's own limits. */
body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(130% 100% at 50% 0%,
      color-mix(in srgb, var(--bg) 85%, transparent),
      color-mix(in srgb, var(--bg) 93%, transparent) 55%,
      var(--bg) 100%);
}
a { color: var(--accent-bright); text-decoration: none; transition: color .25s var(--ease); }
a:hover { color: var(--text); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.wrap--text { max-width: 700px; }

/* ---------- Masthead: a ruled header, like a statement letterhead ---------- */
.site-header { padding: 20px 0 0; }
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 16px; border-bottom: 1px solid var(--line-soft);
}
.brand { display: inline-flex; align-items: center; min-height: 44px; }
.brand-logo {
  display: block; height: 64px; width: auto;
  transition: opacity .25s var(--ease);
}
.brand:hover .brand-logo { opacity: 0.82; }
@media (max-width: 480px) { .brand-logo { height: 50px; } }

/* ---------- Eyebrow: a dated slug, not a badge ---------- */
.eyebrow {
  display: block; font: 500 11px var(--font-ui); letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 20px;
}
.eyebrow::before {
  content: ''; display: inline-block; width: 22px; height: 1px;
  background: var(--accent); vertical-align: 0.3em; margin-right: 11px;
}

/* ---------- Hero ----------
   Weight contrast carries the headline: the sentence sits light, the phrase that
   matters lands heavy. Inter's opsz is pinned to 32 for the tight display cut. */
.hero { padding: 64px 0 12px; }
.hero h1 {
  font-family: var(--font-display); font-weight: 350;
  font-variation-settings: 'opsz' 32;
  font-size: clamp(42px, 6.4vw, 76px); line-height: 1.06; letter-spacing: -0.032em;
  max-width: 15ch;
}
.hero h1 em { font-style: normal; font-weight: 800; color: var(--text); }
.hero p { color: var(--muted); max-width: 46ch; margin-top: 20px; font-size: 17px; }

/* ---------- Calculator layout ---------- */
.calc { padding: 40px 0 72px; }
.calc-grid { display: grid; gap: 24px; }
@media (min-width: 1024px) {
  .calc-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .calc-results { position: sticky; top: 24px; }
}

/* Cards: one flat plate, no bezels or inner glow. The results plate is marked
   by a brass hairline at its head — the only ornament, and it means "this is
   the statement". .bezel/.core are kept as the shared card shell. */
.panel, .bezel {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
}
.panel { padding: 22px; }
.bezel > .core { padding: 26px; }
.calc-results { position: relative; overflow: hidden; }
.calc-results::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--brass) 62%, transparent 100%);
}

/* ---------- Form ---------- */
.field { margin-bottom: 24px; }
.field:last-child { margin-bottom: 0; }
.field > label, .field > legend {
  display: block; font-weight: 600; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 11px; padding: 0;
}
.field .hint { color: var(--muted); font-weight: 400; font-size: 11.5px; letter-spacing: 0.02em; margin-left: 8px; text-transform: none; opacity: .85; }
fieldset.field { border: 0; padding: 0; }

.salary-row { display: flex; gap: 12px; align-items: baseline; }
input[type='number'] {
  width: 160px; background: transparent; color: var(--text);
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 4px 2px;
  font: 600 32px var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
  transition: border-color .25s var(--ease);
}
input[type='number']:focus { outline: none; border-bottom-color: var(--accent); }
.salary-row .unit { color: var(--muted); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }

input[type='range'] {
  width: 100%; appearance: none; -webkit-appearance: none; height: 44px;
  background: transparent; cursor: pointer; margin-top: 4px;
}
input[type='range']::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(to right, var(--accent) var(--fill, 30%), var(--surface-2) var(--fill, 30%));
}
input[type='range']::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px;
  border-radius: 50%; background: var(--text);
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--line);
  transition: transform .25s var(--ease);
}
input[type='range']:active::-webkit-slider-thumb { transform: scale(1.15); }
input[type='range']::-moz-range-track { height: 4px; border-radius: 2px; background: var(--surface-2); }
input[type='range']::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--accent); }
input[type='range']::-moz-range-thumb {
  width: 16px; height: 16px; border: 0; border-radius: 50%; background: var(--text);
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--line);
}

.sub-legend {
  color: var(--muted); font: 600 10.5px var(--font-ui); letter-spacing: 0.13em;
  text-transform: uppercase; margin-bottom: 9px;
}
.sub-legend + .seg { margin-top: 0; }
.seg + .sub-legend { margin-top: 18px; }
.seg { display: flex; flex-wrap: wrap; gap: 9px; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label {
  border: 1px solid var(--line); background: transparent;
  color: var(--muted); border-radius: 10px; padding: 11px 15px;
  font-size: 13px; font-weight: 500;
  cursor: pointer; transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.seg label:hover { color: var(--text); border-color: var(--muted); }
.seg label:active { transform: scale(0.97); }
.seg input:checked + label {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600;
}
.seg input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.seg-note { color: var(--muted); font-size: 12px; margin-top: 9px; }

.stepper { display: flex; align-items: center; gap: 13px; }
.stepper button {
  width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--text); font-size: 17px; cursor: pointer;
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.stepper button:hover { border-color: var(--accent); }
.stepper button:active { transform: scale(0.94); }
.stepper output { font: 600 19px var(--font-display); min-width: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.is-hidden { display: none; }

/* ---------- Results ---------- */
.results-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.results-label { color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.head-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.currency-select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line-soft); color: var(--text);
  border-radius: 999px; padding: 10px 30px 10px 14px; min-height: 40px; font: 500 12px var(--font-ui);
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 11px) 52%; background-size: 4px 4px, 4px 4px; background-repeat: no-repeat;
  transition: border-color .25s var(--ease);
}
.currency-select:hover { border-color: var(--line); }

.fx-note { margin-top: 12px; color: var(--muted); font-size: 11.5px; font-style: italic; }

.movein { margin-top: 22px; border-top: 1px solid var(--line-soft); padding-top: 4px; }
.movein-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: transparent; border: 0; cursor: pointer; padding: 14px 0;
  color: var(--text); font: 600 14px var(--font-ui); text-align: left;
}
.movein-toggle span:first-child span { color: var(--accent-bright); font-weight: 650; }
.movein-caret { color: var(--muted); font-size: 15px; transition: transform .35s var(--ease); }
.movein-toggle[aria-expanded='true'] .movein-caret { transform: rotate(180deg); }
.movein-body { padding-bottom: 4px; }
.movein-body .breakdown { margin-top: 0; }
.period-toggle { display: inline-flex; border: 1px solid var(--line-soft); background: var(--surface); border-radius: 999px; padding: 3px; }
.period-toggle button {
  border: 0; background: transparent; color: var(--muted); font: 500 12px var(--font-ui);
  border-radius: 999px; padding: 10px 15px; min-height: 40px; cursor: pointer; transition: color .25s var(--ease);
}
.period-toggle button[aria-pressed='true'] { background: var(--accent); color: var(--accent-ink); font-weight: 600; }

.hero-number-wrap { margin-top: 16px; }
.hero-number {
  font-family: var(--font-display); font-weight: 800;
  font-variation-settings: 'opsz' 32;
  font-size: clamp(56px, 9vw, 92px); line-height: 0.94; letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
}
.hero-number .cur {
  font-size: 0.19em; font-weight: 600; color: var(--muted); letter-spacing: 0.14em;
  text-transform: uppercase; margin-left: 12px; vertical-align: 0.72em;
}
.tone-good .hero-number { color: var(--good); }
.tone-warn .hero-number { color: var(--warn); }
.tone-bad .hero-number { color: var(--bad); }

/* The verdict speaks up: display face, a notch larger than body, set light. */
.verdict {
  margin-top: 18px; font-family: var(--font-display); font-weight: 400;
  font-size: 19px; line-height: 1.5; max-width: 46ch; letter-spacing: -0.018em;
}

/* The nudge speaks in brass — the site's second voice, never a call to action. */
.insight {
  margin-top: 18px; padding: 12px 16px; border-radius: 10px;
  background: var(--surface-2); border-left: 2px solid var(--brass);
  color: var(--muted); font-size: 13.5px; line-height: 1.55;
}
.insight strong { color: var(--brass); font-weight: 600; }

/* Chart + legend */
.chart-row { display: grid; gap: 22px; margin-top: 26px; align-items: center; }
@media (min-width: 560px) { .chart-row { grid-template-columns: 195px 1fr; } }
.donut { width: 195px; height: 195px; margin: 0 auto; }
.donut .center-label { font: 500 10px var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; fill: var(--muted); }
.donut .center-value { font: 700 25px var(--font-display); fill: var(--text); letter-spacing: -0.03em; }
.legend { list-style: none; padding: 0; display: grid; gap: 8px; grid-template-columns: 1fr 1fr; font-size: 12.5px; }
.legend li { display: flex; align-items: center; gap: 9px; color: var(--muted); }
.legend .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.legend .pct { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; }

/* Breakdown ledger */
.breakdown { width: 100%; border-collapse: collapse; margin-top: 26px; font-size: 14px; }
.breakdown caption {
  text-align: left; font-weight: 600; font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted);
  padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line);
}
.breakdown td { padding: 11px 0; vertical-align: top; }
.breakdown tr + tr td { border-top: 1px solid var(--line-soft); }
.breakdown .amt {
  text-align: right; white-space: nowrap; font-family: var(--font-display);
  font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em; padding-left: 16px; color: var(--text);
}
.breakdown .note { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; font-weight: 400; }
.breakdown tr.total td { border-top: 1px solid var(--line); font-weight: 650; }
.breakdown tr.savings td { border-top: 1px solid var(--line); font-weight: 650; color: var(--good); }
.tone-bad .breakdown tr.savings td { color: var(--bad); }
.tone-warn .breakdown tr.savings td { color: var(--warn); }

.disclaimer { margin-top: 18px; color: var(--muted); font-size: 11.5px; }

.share-row { margin-top: 22px; display: flex; gap: 12px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 10px; border-radius: 999px;
  padding: 10px 10px 10px 22px; font: 600 14px var(--font-ui); letter-spacing: 0.01em;
  cursor: pointer; border: 1px solid transparent;
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-bright); }
.btn .btn-orb {
  width: 30px; height: 30px; border-radius: 999px; background: rgba(255, 255, 255, 0.16);
  display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
  transition: transform .25s var(--ease);
}
.btn:hover .btn-orb { transform: translate(2px, -1px); }

/* ---------- Content sections ---------- */
.section { padding: 72px 0; }
.section + .section { border-top: 1px solid var(--line-soft); }
.section h2 {
  font-family: var(--font-display); font-weight: 400; letter-spacing: -0.028em; line-height: 1.12;
  font-variation-settings: 'opsz' 32;
  font-size: clamp(28px, 4vw, 40px); margin-bottom: 18px;
}
.section h2 em { font-style: normal; font-weight: 800; color: var(--text); }
.section p { color: var(--muted); max-width: 66ch; }
.section p + p { margin-top: 12px; }

/* Scroll entry: gentle fade-up. Hidden state only exists when JS is live (html.js),
   so content is never invisible without JS. ui.js adds .in via IntersectionObserver. */
@media (prefers-reduced-motion: no-preference) {
  html.js .section { opacity: 0; transform: translateY(14px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
  html.js .section.in { opacity: 1; transform: none; }
}

.band-links { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; list-style: none; padding: 0; }
.band-links a {
  display: block; border: 1px solid var(--line-soft); background: var(--surface);
  color: var(--text); border-radius: 999px; padding: 9px 17px; font-size: 13px; font-weight: 500;
  font-variant-numeric: tabular-nums; transition: border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.band-links a:hover { border-color: var(--accent); color: var(--accent-bright); transform: translateY(-1px); }

.faq details {
  background: var(--shell); border: 1px solid var(--line-soft); border-radius: 14px;
  padding: 16px 20px; margin-top: 10px;
}
.faq summary { font-weight: 600; cursor: pointer; font-size: 15px; list-style: none; position: relative; padding-right: 30px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: 2px; top: -1px; color: var(--accent-bright);
  font-size: 19px; font-weight: 400; transition: transform .35s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin-top: 11px; font-size: 14.5px; }

/* Salary-page specifics */
.answer-lead { font-size: 18px; line-height: 1.55; color: var(--text); max-width: 62ch; font-weight: 450; }
.answer-lead strong { color: var(--accent-bright); font-weight: 650; }
.profile-tables { display: grid; gap: 18px; margin-top: 24px; }
@media (min-width: 800px) { .profile-tables { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } }
.profile-tables .panel { padding: 22px; }
.profile-tables h3 { font-family: var(--font-display); font-size: 19px; font-weight: 600; margin-bottom: 3px; }
.profile-tables .sub { color: var(--muted); font-size: 12.5px; margin-bottom: 10px; }
.adjacent { display: flex; justify-content: space-between; gap: 12px; margin-top: 36px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--line-soft); }
.adjacent a { font-size: 13.5px; font-weight: 500; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line-soft); padding: 48px 0 32px; margin-top: 40px; }
.site-footer p, .site-footer a { color: var(--muted); font-size: 13px; line-height: 1.6; }
.site-footer a:hover { color: var(--accent-bright); }

.footer-grid {
  display: grid; gap: 32px;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-brand { display: grid; gap: 14px; align-content: start; }
.footer-logo { height: 40px; width: auto; display: block; opacity: 0.92; }
.footer-brand p { max-width: 32ch; }

.site-footer nav, .footer-legal { display: grid; gap: 10px; align-content: start; }
.footer-heading {
  color: var(--text); font: 600 11px var(--font-ui); letter-spacing: 0.14em;
  text-transform: uppercase; margin-bottom: 2px;
}
.footer-legal p:last-child { max-width: 34ch; }

.footer-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px;
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line-soft);
}
.footer-bottom p { font-size: 12px; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero-number.reveal { animation: rise .5s var(--ease); }
  @keyframes rise { from { opacity: 0; transform: translateY(10px); } }
  .donut g.segs { transform-origin: 50% 50%; animation: sweep .55s var(--ease); }
  @keyframes sweep { from { opacity: 0; transform: rotate(-10deg) scale(0.97); } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .section { opacity: 1; transform: none; }
}

@media (max-width: 480px) {
  .legend { grid-template-columns: 1fr; }
  .hero { padding-top: 52px; }
  .section { padding: 52px 0; }
}

/* ---------- Full-width form selects (area, university) ---------- */
.form-select {
  appearance: none; -webkit-appearance: none; cursor: pointer; width: 100%; min-height: 44px;
  background: var(--surface); border: 1px solid var(--line-soft); color: var(--text);
  border-radius: 12px; padding: 11px 36px 11px 15px; font: 500 14px var(--font-ui);
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.form-select:hover { border-color: var(--accent); background-color: var(--surface-2); }
.form-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.form-select optgroup { font-weight: 700; color: var(--muted); }
.form-select option { color: var(--text); background: var(--surface); font-weight: 500; }

.link-btn {
  margin-top: 6px; background: none; border: 0; padding: 8px 0; cursor: pointer;
  color: var(--accent-bright); font: 600 12.5px var(--font-ui); min-height: 34px;
  transition: opacity .2s var(--ease);
}
.link-btn:hover { opacity: .72; text-decoration: underline; }

/* ---------- Grow-your-savings section ---------- */
.grow-flag {
  margin-top: 14px; padding: 13px 16px 13px 15px; border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft); border-left: 2px solid var(--warn);
  color: var(--muted); font-size: 13px;
}
.grow-flag strong { color: var(--warn); font-weight: 650; }
.grow-grid { display: grid; gap: 22px; margin-top: 28px; align-items: start; }
@media (min-width: 860px) { .grow-grid { grid-template-columns: minmax(0, 366px) 1fr; } }

/* Projector: a machined card with a hairline cobalt top edge. */
.grow-projector { padding: 26px; position: relative; overflow: hidden; }
.grow-projector::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: .8;
}
.grow-projector h3 { font-family: var(--font-display); font-size: 20px; font-weight: 600; margin-bottom: 20px; }
.grow-projector .field { margin-bottom: 20px; }
.grow-projector .field:last-of-type { margin-bottom: 22px; }
.grow-scenario-note { min-height: 2.5em; }

.grow-result {
  margin-top: 4px; padding: 20px 18px; border-radius: 14px; text-align: center;
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 140% at 50% -30%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line-soft);
}
.grow-label { color: var(--muted); font-size: 10.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.grow-fv {
  font: 700 clamp(30px, 5vw, 40px)/1.02 var(--font-display); color: var(--accent-bright);
  margin-top: 8px; letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
}
.grow-fv .cur { font-size: 0.4em; color: var(--muted); font-weight: 600; letter-spacing: 0.08em; }
.grow-breakdown { margin-top: 10px; color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.grow-breakdown span { color: var(--text); font-weight: 600; }

/* ---------- Referral slots ----------
   Deliberately quieter than the site's own content: a dashed edge and no fill,
   so it reads as a suggestion rather than a result. The disclosure is part of
   the component and must never be styled out of sight. */
.grow-col { display: grid; gap: 12px; align-content: start; }
.partner {
  padding: 18px 20px; border-radius: 14px;
  border: 1px dashed var(--line); background: transparent;
}
.partner.is-hidden { display: none; }
.partner-head {
  font: 600 11px var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brass); margin-bottom: 9px;
}
.partner-detail { color: var(--muted); font-size: 13px; line-height: 1.55; }
.partner-list { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.partner-list a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 11px 14px; border-radius: 10px; min-height: 44px;
  background: var(--surface-2); border: 1px solid var(--line-soft);
  color: var(--text); font-size: 14px; font-weight: 600;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.partner-list a:hover { border-color: var(--accent); color: var(--accent-bright); }
.partner-list a span { color: var(--muted); font-size: 12px; font-weight: 400; }
.partner-list a::after { content: '\2197'; color: var(--muted); font-size: 13px; }
/* Two-word label, not a paragraph. Must stay legible: this is the disclosure. */
.partner-disclosure {
  margin-top: 12px; color: var(--muted);
  font: 500 11px var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase;
}

.grow-options { display: grid; gap: 12px; counter-reset: growopt; }
.grow-option {
  padding: 16px 18px 16px 52px; border-radius: 14px; position: relative;
  background: var(--surface); border: 1px solid var(--line-soft);
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.grow-option:not(.warn)::before {
  counter-increment: growopt; content: counter(growopt);
  position: absolute; left: 15px; top: 16px;
  width: 25px; height: 25px; border-radius: 999px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent-bright); font: 600 12px var(--font-ui); font-variant-numeric: tabular-nums;
}
.grow-option:hover { border-color: var(--line); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); }
.grow-option h4 { font: 600 15px var(--font-ui); margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.grow-option p { color: var(--muted); font-size: 13px; line-height: 1.55; }
.grow-option.warn {
  padding-left: 18px;
  border-color: color-mix(in srgb, var(--warn) 38%, var(--line-soft));
  background: color-mix(in srgb, var(--warn) 6%, var(--surface));
}
.grow-option.warn h4 { color: var(--warn); }
.grow-warn-ico { flex: none; }

/* ---------- Budget tracker: "Where can you save?" ---------- */
.tracker-grid { display: grid; gap: 24px; margin-top: 28px; align-items: start; }
@media (min-width: 1024px) {
  .tracker-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .tracker-results { position: sticky; top: 24px; }
}

.tk-rows { display: grid; gap: 15px; margin-top: 4px; }
.tk-row { display: grid; gap: 7px; }
.tk-row > label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-weight: 600; font-size: 13.5px; color: var(--text); text-transform: none; letter-spacing: 0;
  margin-bottom: 0; padding: 0;
}
.tk-bench { color: var(--muted); font-weight: 400; font-size: 11.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tk-input { display: flex; align-items: center; gap: 11px; }
.tk-input input[type='number'] {
  width: 118px; font: 600 21px var(--font-display); letter-spacing: -0.025em; padding: 3px 2px;
}
.tk-unit { color: var(--muted); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; }
.tk-pill {
  margin-left: auto; font: 600 10px var(--font-ui); letter-spacing: 0.07em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line-soft); color: var(--muted); white-space: nowrap;
}
.tk-pill:empty, .tk-pill.tk-empty, .tk-pill.tk-na { display: none; }
.tk-pill.tk-high { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, transparent); background: color-mix(in srgb, var(--bad) 11%, transparent); }
.tk-pill.tk-warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 11%, transparent); }
.tk-pill.tk-ok, .tk-pill.tk-lean { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, transparent); background: color-mix(in srgb, var(--good) 10%, transparent); }

.tk-opps { display: grid; gap: 12px; margin-top: 22px; }
.tk-opps:empty { display: none; }
.tk-opp {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start;
  padding: 16px 18px; border-radius: 14px; background: var(--surface);
  border: 1px solid var(--line-soft); border-left: 2px solid var(--accent);
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.tk-opp:hover { border-left-color: var(--accent-bright); transform: translateY(-1px); }
.tk-opp-rank {
  width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent-bright); font: 600 12px var(--font-ui); font-variant-numeric: tabular-nums;
}
.tk-opp-body h4 { font: 600 15px var(--font-ui); margin-bottom: 5px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tk-opp-amt { color: var(--good); font-weight: 650; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.tk-opp-body p { color: var(--muted); font-size: 13px; line-height: 1.55; }
.tk-opp-meta { margin-top: 6px; font-size: 12px; font-variant-numeric: tabular-nums; opacity: .9; }

.tk-cta { margin-top: 22px; }
.tk-cta.is-hidden { display: none; }