/* ═══════════════════════════════════════════════════════════════
   Advantage Gold tools: shared page styles.

   Loaded after ../../resources/charts/chart-core.css (the chart
   engine's reset and card chrome), so the chart cards match the
   resources page exactly. Tokens are the podcast page's.

   Page shape (every tool): the first screen tells the story in the
   order a broker walks a client through it. Left: what it is and how
   to read it. Right: the reference points, then "Where is it today?"
   with a Calculate button that reveals the live number. Charts and
   background come after.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --ag-gold: #d9c685;
  --ag-gold-hover: #b6a26b;
  --ag-gold-light: #f3eddf;
  --ag-navy: #272937;
  --ag-navy-deep: #1d1f2a;
  --ag-slate: #364251;
  --ag-text: #0a1439;
  --ag-text-secondary: #4a5169;
  --ag-bg-cream: #fdfaf6;
  --ag-bg-card: #fafafc;
  --ag-gray: #c6c6c6;
  --ag-white: #ffffff;
  --ag-border: rgba(10, 20, 57, 0.08);
  --ag-radius-card: 10px;
  --ag-radius-button: 30px;
  --ag-shadow-card: 0 6px 24px rgba(10, 20, 57, 0.06);
  --ag-shadow-gold: 0 8px 24px rgba(217, 198, 133, 0.35);
  --ag-transition: 0.15s ease;
  --ag-container: 1440px;
  --ag-font: "Inter", system-ui, sans-serif;
  --ag-font-num: "Roboto", system-ui, sans-serif;

  /* valuation zones, cool to hot: green is good, red is danger */
  --zone-1: #4f9d6f;
  --zone-2: #8fb87a;
  --zone-3: #d9c685;
  --zone-4: #d7914f;
  --zone-5: #c94f3f;
  --zone-6: #8e2f26;
  --good: #4f9d6f;
  --good-text: #2f7a50;
  --bad: #c94f3f;
  --bad-text: #a33c2f;
}

body {
  font-family: var(--ag-font);
  color: var(--ag-text);
  background: var(--ag-bg-card);
  line-height: 1.5;
}
body.in-iframe { background: transparent; }
a { color: inherit; }
img { max-width: 100%; display: block; }

.container { max-width: var(--ag-container); margin: 0 auto; padding: 0 36px; }
@media (max-width: 720px) { .container { padding: 0 18px; } }

.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: var(--ag-gold-hover); }
.eyebrow--dark { color: var(--ag-gold); }
.num { font-family: var(--ag-font-num); font-variant-numeric: tabular-nums; }

/* ── Buttons (same as podcast) ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--ag-font); font-weight: 700; font-size: 15px; letter-spacing: 0.2px; line-height: 1;
  padding: 13px 30px; border-radius: var(--ag-radius-button);
  border: 2px solid var(--ag-gold); background: var(--ag-gold); color: var(--ag-slate);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background var(--ag-transition), border-color var(--ag-transition), color var(--ag-transition), transform var(--ag-transition);
}
.btn:hover { background: var(--ag-gold-light); border-color: var(--ag-gold-light); color: var(--ag-slate); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid rgba(217, 198, 133, 0.6); outline-offset: 3px; }
.btn--lg { padding: 16px 38px; font-size: 16px; }
.btn--xl { padding: 19px 48px; font-size: 18px; letter-spacing: 0.4px; }
.btn--calc { padding: 24px 72px; font-size: 24px; letter-spacing: 0.6px; width: min(100%, 440px); border-radius: 40px; box-shadow: var(--ag-shadow-gold), 0 0 0 6px rgba(217, 198, 133, 0.12); }
.btn--calc:hover { box-shadow: var(--ag-shadow-gold), 0 0 0 8px rgba(217, 198, 133, 0.18); }
.btn--glow { box-shadow: var(--ag-shadow-gold); }
.btn--outline-dark { background: transparent; border-color: rgba(255, 255, 255, 0.35); color: var(--ag-white); }
.btn--outline-dark:hover { background: transparent; border-color: var(--ag-gold); color: var(--ag-gold); }
.btn[disabled] { opacity: 0.6; cursor: wait; }

/* ── Stale data notice (tools.js adds it when a refresh is overdue) ── */
.t-stale { background: #fff4e5; color: #7a4b12; border-bottom: 1px solid #f1d9b5; font-size: 13.5px; padding: 10px 0; }
.t-stale .container { display: flex; gap: 10px; align-items: center; }
.t-stale b { font-weight: 700; }

/* ── Tool tabs (top of every tool page) ── */
.t-nav { background: #0d1019; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.t-nav__inner { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-top: 8px; padding-bottom: 8px; }
.t-nav__inner::-webkit-scrollbar { display: none; }
.t-nav__link {
  flex: 1 0 auto; text-align: center; white-space: nowrap; text-decoration: none;
  font-size: 13.5px; font-weight: 600; color: rgba(255, 255, 255, 0.7);
  padding: 10px 14px; border-radius: 8px; transition: background var(--ag-transition), color var(--ag-transition);
}
.t-nav__link:hover { color: var(--ag-white); background: rgba(255, 255, 255, 0.06); }
.t-nav__link.is-on { color: var(--ag-slate); background: var(--ag-gold); }
.t-nav__link:focus-visible { outline: 3px solid rgba(217, 198, 133, 0.6); outline-offset: 2px; }

/* ── Hero: dark band ── */
.t-hero {
  position: relative; overflow: hidden; color: var(--ag-white);
  background: linear-gradient(180deg, #141826 0%, #10141f 55%, #1c1f2b 100%);
}
.t-hero::before {
  content: ""; position: absolute; top: -40%; right: -10%; width: 760px; height: 760px; border-radius: 50%;
  background: radial-gradient(circle, rgba(217, 198, 133, 0.13), transparent 65%); pointer-events: none;
}
.t-hero__inner { position: relative; display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: start; padding-top: 44px; padding-bottom: 44px; }
.t-hero__copy { display: flex; flex-direction: column; gap: 14px; }
.t-hero__title { font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 200; letter-spacing: -1.2px; line-height: 1.05; }
.t-hero__title strong { font-weight: 600; color: var(--ag-gold); }
.t-hero__lead { font-size: 16.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.66); max-width: 560px; }
.t-quote { margin-top: 2px; padding-left: 16px; border-left: 2px solid var(--ag-gold); color: rgba(255, 255, 255, 0.78); font-size: 14px; line-height: 1.5; font-style: italic; max-width: 520px; }
.t-quote cite { display: block; margin-top: 4px; font-style: normal; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); }

/* how to read it: compact key inside the hero */
.t-key { margin-top: 6px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 16px 18px 12px; }
.t-key__title { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--ag-gold); margin-bottom: 10px; }
.t-key__title span { font-weight: 500; letter-spacing: 0; text-transform: none; color: rgba(255, 255, 255, 0.45); font-size: 12px; }
.t-key .t-zones { gap: 0; }
.t-key .t-zone { grid-template-columns: 12px 118px 1fr; gap: 12px; padding: 8px 0; background: transparent; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); border-radius: 0; }
.t-key .t-zone:last-child { border-bottom: 0; }
.t-key .t-zone.is-current { box-shadow: none; background: rgba(217, 198, 133, 0.08); border-radius: 8px; padding-left: 8px; padding-right: 8px; margin: 0 -8px; }
.t-key .t-zone__dot { width: 12px; height: 12px; }
.t-key .t-zone__range { font-size: 14px; color: var(--ag-white); }
.t-key .t-zone__name { font-size: 14px; color: var(--ag-white); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.t-key .t-zone__desc { font-size: 12.5px; color: rgba(255, 255, 255, 0.5); margin-top: 1px; }
.t-key .t-zone__extra { font-size: 12.5px; color: rgba(255, 255, 255, 0.75); margin-top: 3px; }
.t-key .t-zone__extra b { color: var(--ag-white); }
.t-key .t-zone__here { color: var(--ag-gold); margin-left: 0; }
.t-key--table .t-zone { grid-template-columns: 12px 118px 1fr auto auto; }
.t-key__cols { display: grid; grid-template-columns: 12px 118px 1fr auto auto; gap: 12px; font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); padding-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.t-key__cols span:nth-child(n + 4) { text-align: right; min-width: 72px; }
.t-zone__num { font-family: var(--ag-font-num); font-size: 14px; font-weight: 500; text-align: right; min-width: 72px; color: var(--ag-white); }
.t-zone__num.is-neg { color: #f1b2a6; }
.t-zone__num.is-pos { color: #cfe3c2; }
.t-zone__num small { display: block; font-size: 10px; color: rgba(255, 255, 255, 0.4); font-family: var(--ag-font); font-weight: 500; }

/* reference points: the "before the crash" boxes */
.t-peaks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.t-peak { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 14px 14px 12px; }
.t-peak__k { font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); min-height: 2.6em; }
.t-peak__v { margin-top: 6px; font-family: var(--ag-font-num); font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 500; letter-spacing: -1px; line-height: 1; color: var(--ag-white); white-space: nowrap; }
.t-peak__v small { font-size: 0.5em; letter-spacing: 0; }
.t-peak__tag { margin-top: 8px; font-size: 11.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.t-peak__tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.t-peak--bad .t-peak__v { color: #f3a99b; }
.t-peak--bad .t-peak__tag { color: #f1b2a6; }
.t-peak--good .t-peak__v { color: #b9dcc4; }
.t-peak--good .t-peak__tag { color: #cfe3c2; }
.t-peak--gold .t-peak__v { color: var(--ag-gold); }
.t-peak--gold .t-peak__tag { color: var(--ag-gold); }
.t-peak__n { margin-top: 4px; font-size: 11.5px; color: rgba(255, 255, 255, 0.4); }

/* the reveal: question + Calculate, then the live reading */
.t-hero__reveal { display: flex; flex-direction: column; align-self: stretch; }
.t-reveal {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  margin-top: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(217, 198, 133, 0.35);
  border-radius: 14px; padding: 26px 28px 24px; backdrop-filter: blur(2px); position: relative;
}
.t-reveal__ask { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; padding: 14px 0 8px; }
.t-reveal__q { font-size: clamp(1.7rem, 2.8vw, 2.4rem); font-weight: 200; letter-spacing: -0.8px; line-height: 1.1; }
.t-reveal__q strong { font-weight: 600; color: var(--ag-gold); }
.t-reveal__hint { font-size: 12.5px; color: rgba(255, 255, 255, 0.45); }
.t-reveal__out { display: none; }
.t-reveal.is-on .t-reveal__ask { display: none; }
.t-reveal.is-on .t-reveal__out { display: block; animation: tReveal 0.4s ease-out; }
@keyframes tReveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.t-reveal__again { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: rgba(255, 255, 255, 0.45); }
.t-reveal__again button { font: inherit; font-weight: 600; color: var(--ag-gold); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* reading panel (inside the reveal) */
.t-reading__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.t-reading__label { font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.t-reading__value { font-family: var(--ag-font-num); font-size: clamp(3.6rem, 7vw, 5.4rem); font-weight: 500; line-height: 1; letter-spacing: -2px; color: var(--ag-gold); margin-top: 8px; font-variant-numeric: tabular-nums; }
.t-reading__value small { font-size: 0.45em; letter-spacing: 0; margin-left: 2px; }
.t-reading__value.is-bad { color: #f3a99b; }
.t-reading__value.is-good { color: #b9dcc4; }
.t-zone-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 600; background: rgba(184, 87, 74, 0.16); color: #f1b2a6; border: 1px solid rgba(184, 87, 74, 0.4);
  opacity: 0; transition: opacity 0.3s;
}
.t-zone-pill.is-on { opacity: 1; }
.t-zone-pill i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.t-reading__asof { margin-top: 8px; font-size: 13px; color: rgba(255, 255, 255, 0.55); }

/* zone meter */
.t-meter { margin: 22px 0 8px; }
.t-meter__track { position: relative; display: flex; height: 12px; border-radius: 999px; overflow: visible; }
.t-meter__seg { height: 100%; }
.t-meter__seg:first-child { border-radius: 999px 0 0 999px; }
.t-meter__seg:last-child { border-radius: 0 999px 999px 0; }
.t-meter__marker {
  position: absolute; top: 50%; width: 22px; height: 22px; margin-left: -11px; margin-top: -11px; border-radius: 50%;
  background: var(--ag-white); border: 4px solid var(--ag-navy-deep); box-shadow: 0 0 0 2px var(--ag-gold), 0 6px 16px rgba(0, 0, 0, 0.45);
  transition: left 2.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.t-meter__ticks { position: relative; height: 18px; margin-top: 8px; font-family: var(--ag-font-num); font-size: 11.5px; color: rgba(255, 255, 255, 0.45); }
.t-meter__ticks span { position: absolute; transform: translateX(-50%); }
.t-meter__ends { display: flex; justify-content: space-between; margin-top: 4px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
.t-meter__ends span:first-child { color: #9fd1b3; }
.t-meter__ends span:last-child { color: #f3a99b; }

.t-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 18px; background: rgba(255, 255, 255, 0.08); border-radius: 10px; overflow: hidden; }
.t-fact { background: #161a27; padding: 12px 14px; }
.t-fact__k { font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); }
.t-fact__v { margin-top: 4px; font-family: var(--ag-font-num); font-size: 17px; font-weight: 500; color: var(--ag-white); }

/* debt clock */
.t-clock { font-family: var(--ag-font-num); font-variant-numeric: tabular-nums; font-size: clamp(1.5rem, 3.6vw, 2.5rem); font-weight: 500; letter-spacing: -1px; color: var(--ag-white); white-space: nowrap; }
.t-clock-k { margin-top: 4px; font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.t-clock-foot { margin-top: 4px; font-size: 12px; color: rgba(255, 255, 255, 0.45); }

/* ── Comparison strip ── */
.t-compare { background: var(--ag-bg-cream); border-bottom: 1px solid var(--ag-border); }
.t-compare__inner { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; padding-top: 0; padding-bottom: 0; }
.t-compare__item { padding: 22px 22px; border-right: 1px solid var(--ag-border); }
.t-compare__item:last-child { border-right: 0; }
.t-compare__k { font-size: 11.5px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ag-gold-hover); }
.t-compare__v { margin-top: 6px; font-family: var(--ag-font-num); font-size: 28px; font-weight: 500; letter-spacing: -0.5px; color: var(--ag-text); }
.t-compare__item--good .t-compare__v { color: var(--good-text); }
.t-compare__item--bad .t-compare__v { color: var(--bad-text); }
.t-compare__n { margin-top: 2px; font-size: 13px; color: var(--ag-text-secondary); }

/* ── Sections ── */
.t-sec { padding: 64px 0; }
.t-sec--tight { padding: 52px 0; }
.t-sec--cream { background: var(--ag-bg-cream); }
.t-sec__head { max-width: 820px; margin-bottom: 26px; }
.t-sec__head--row { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.t-sec__title { font-size: clamp(1.6rem, 2.8vw, 2.2rem); font-weight: 200; letter-spacing: -1px; line-height: 1.12; color: var(--ag-text); margin-top: 8px; }
.t-sec__title strong { font-weight: 600; }
.t-sec__sub { margin-top: 10px; font-size: 16px; line-height: 1.6; color: var(--ag-text-secondary); }

/* chart frame: the engine card is dark, give it room */
.t-chart { border-radius: 14px; overflow: hidden; box-shadow: 0 18px 50px rgba(10, 20, 57, 0.16); }

/* chart view chips (full history / since 2000) */
.t-views { display: flex; gap: 8px; flex-wrap: wrap; }

/* tooltip beside the cursor instead of on top of the point, and red/green callouts */
.dg__tip.dg__tip--side { transform: translate(18px, -50%); }
.dg__tip.dg__tip--side.dg__tip--flip { transform: translate(calc(-100% - 18px), -50%); }
.dg__annot--bad { color: #f6b7ab; border-color: rgba(201, 79, 63, 0.6); background: rgba(201, 79, 63, 0.18); }
.dg__annot--good { color: #c4e6cf; border-color: rgba(79, 157, 111, 0.6); background: rgba(79, 157, 111, 0.18); }

/* zones table (full version, lower on the page) */
.t-zones { display: grid; gap: 10px; }
.t-zone {
  display: grid; grid-template-columns: 14px 170px 1fr; gap: 18px; align-items: center;
  padding: 16px 20px; background: var(--ag-white); border: 1px solid var(--ag-border); border-radius: var(--ag-radius-card);
}
.t-zone.is-current { border-color: var(--ag-gold); box-shadow: 0 0 0 3px rgba(217, 198, 133, 0.25); }
.t-zone__dot { width: 14px; height: 14px; border-radius: 50%; }
.t-zone__range { font-family: var(--ag-font-num); font-weight: 500; font-size: 15px; color: var(--ag-text); }
.t-zone__name { font-weight: 600; color: var(--ag-text); }
.t-zone__desc { font-size: 14.5px; color: var(--ag-text-secondary); margin-top: 2px; }
.t-zone__extra { margin-top: 6px; font-size: 13px; color: var(--ag-text); }
.t-zone__extra b { font-family: var(--ag-font-num); font-weight: 600; }
.t-zone__here { margin-left: 8px; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ag-gold-hover); }

/* prose */
.t-prose { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px 56px; }
.t-prose h3 { font-size: 19px; font-weight: 600; color: var(--ag-text); margin-bottom: 8px; letter-spacing: -0.3px; }
.t-prose p { font-size: 15.5px; line-height: 1.7; color: var(--ag-text-secondary); margin-bottom: 12px; }
.t-prose strong { color: var(--ag-text); font-weight: 600; }

/* method + sources */
.t-method { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; padding: 28px 30px; background: var(--ag-white); border: 1px solid var(--ag-border); border-radius: var(--ag-radius-card); box-shadow: var(--ag-shadow-card); }
.t-method h3 { font-size: 16px; font-weight: 600; margin-bottom: 10px; }
.t-method p, .t-method li { font-size: 14.5px; line-height: 1.65; color: var(--ag-text-secondary); }
.t-method ul { list-style: none; display: grid; gap: 8px; }
.t-method a { color: var(--ag-gold-hover); text-decoration: underline; text-underline-offset: 2px; }
.t-method a:hover { color: var(--ag-text); }
.t-updated { margin-top: 14px; font-size: 13px; color: var(--ag-text-secondary); }
.t-disclaimer { margin-top: 26px; font-size: 12.5px; line-height: 1.6; color: #7a8096; }

/* ── Guide band (podcast style, floating cover with gold glow) ── */
.guide { background: var(--ag-navy); position: relative; overflow: hidden; }
.guide::before { content: ""; position: absolute; top: -30%; left: 40%; width: 640px; height: 640px; border-radius: 50%; background: radial-gradient(circle, rgba(217, 198, 133, 0.16), transparent 65%); pointer-events: none; }
.guide__inner { position: relative; display: grid; grid-template-columns: 1fr 0.9fr; gap: 48px; align-items: center; padding-top: 72px; padding-bottom: 72px; }
.guide__copy { display: flex; flex-direction: column; gap: 18px; }
.guide__title { font-size: clamp(1.9rem, 3.4vw, 2.75rem); font-weight: 200; letter-spacing: -1.2px; line-height: 1.1; color: var(--ag-white); }
.guide__title strong { font-weight: 600; color: var(--ag-gold); }
.guide__text { font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, 0.62); max-width: 480px; margin-bottom: 12px; }
.guide__ctas { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.guide__phone { font-family: var(--ag-font-num); font-size: 15px; font-weight: 500; color: var(--ag-gold); text-decoration: none; }
.guide__img { position: relative; display: flex; justify-content: center; }
.guide__img::before { content: ""; position: absolute; left: 50%; top: 50%; width: 78%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(217, 198, 133, 0.42) 0%, rgba(217, 198, 133, 0.14) 45%, transparent 70%); transform: translate(-50%, -50%); animation: agGlowPulse 4.5s ease-in-out infinite; pointer-events: none; }
.guide__img img { position: relative; width: 360px; filter: drop-shadow(0 24px 50px rgba(0, 0, 0, 0.45)); animation: agFloat 6s ease-in-out infinite; }
@keyframes agFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes agGlowPulse { 0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.92); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } }

/* ── Calculator pages: slim title band ── */
.t-band { background: linear-gradient(180deg, #141826 0%, #10141f 100%); color: var(--ag-white); }
.t-band__inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-top: 30px; padding-bottom: 28px; }
.t-band__title { font-size: clamp(1.6rem, 2.8vw, 2.2rem); font-weight: 200; letter-spacing: -1px; line-height: 1.08; margin-top: 6px; }
.t-band__title strong { font-weight: 600; color: var(--ag-gold); }
.t-band__lead { margin-top: 8px; font-size: 15px; color: rgba(255, 255, 255, 0.6); max-width: 640px; }
.t-band__price { text-align: right; font-size: 13px; color: rgba(255, 255, 255, 0.55); }
.t-band__price b { display: block; font-family: var(--ag-font-num); font-size: 24px; font-weight: 500; color: var(--ag-gold); letter-spacing: -0.5px; }

/* ── Calculator ── */
.t-calc { padding: 34px 0 60px; background: var(--ag-bg-cream); }
.t-calc__grid { display: grid; grid-template-columns: 360px 1fr; gap: 24px; align-items: start; }
.t-panel { position: sticky; top: 16px; background: var(--ag-white); border: 1px solid var(--ag-border); border-radius: 14px; box-shadow: var(--ag-shadow-card); padding: 22px 22px 20px; }
.t-panel__title { font-size: 20px; font-weight: 600; letter-spacing: -0.3px; color: var(--ag-text); margin-bottom: 2px; }
.t-step { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ag-border); }
.t-step:first-of-type { border-top: 0; padding-top: 0; }
.t-step__k { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--ag-text); margin-bottom: 10px; }
.t-step__k b { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ag-gold); color: var(--ag-slate); font-family: var(--ag-font-num); font-size: 13px; }
.t-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.t-chip {
  font-family: var(--ag-font); font-size: 14px; font-weight: 600; color: var(--ag-slate); cursor: pointer;
  padding: 9px 14px; border-radius: 999px; border: 1.5px solid rgba(10, 20, 57, 0.14); background: var(--ag-white);
  transition: border-color var(--ag-transition), background var(--ag-transition), color var(--ag-transition);
}
.t-chip:hover { border-color: var(--ag-gold); }
.t-chip.is-on { background: var(--ag-slate); border-color: var(--ag-slate); color: var(--ag-white); }
.t-chip:focus-visible { outline: 3px solid rgba(217, 198, 133, 0.6); outline-offset: 2px; }
.t-chip--sm { font-size: 13px; padding: 7px 12px; }
.t-money { position: relative; }
.t-money span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-family: var(--ag-font-num); font-size: 18px; color: var(--ag-text-secondary); }
.t-money input, .t-dates input {
  width: 100%; height: 48px; padding: 0 14px 0 30px; border: 1.5px solid rgba(10, 20, 57, 0.14); border-radius: 10px;
  font-family: var(--ag-font-num); font-size: 18px; color: var(--ag-text); background: var(--ag-white);
}
.t-money input::placeholder { color: #a9aebf; font-size: 15px; font-family: var(--ag-font); }
.t-money input:focus, .t-dates input:focus { outline: none; border-color: var(--ag-gold); box-shadow: 0 0 0 3px rgba(217, 198, 133, 0.3); }
.t-money.is-invalid input { border-color: var(--bad); }
.t-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.t-dates label { font-size: 12px; color: var(--ag-text-secondary); display: grid; gap: 4px; }
.t-dates input { padding: 0 10px; font-size: 14px; height: 42px; }
.t-panel__fine { margin-top: 10px; font-size: 12px; color: var(--ag-text-secondary); line-height: 1.5; }
.t-panel__go { margin-top: 20px; }
.t-panel__go .btn { width: 100%; }
.t-panel__msg { margin-top: 8px; font-size: 12.5px; color: var(--bad-text); min-height: 1.2em; }

/* results: empty state before the first Calculate */
.t-results { position: relative; }
.t-empty {
  display: none; min-height: 420px; border: 1.5px dashed rgba(10, 20, 57, 0.16); border-radius: 14px;
  padding: 40px; align-items: center; justify-content: center; text-align: center; color: var(--ag-text-secondary);
}
.t-empty__in { max-width: 420px; }
.t-empty__title { font-size: 22px; font-weight: 200; letter-spacing: -0.6px; color: var(--ag-text); margin-bottom: 8px; }
.t-empty__title strong { font-weight: 600; }
.t-empty p { font-size: 15px; line-height: 1.6; }
.t-results.is-empty .t-empty { display: flex; }
.t-results.is-empty .t-results__box, .t-results.is-empty .t-desc, .t-results.is-empty .t-results__range, .t-results.is-empty .t-clamp { display: none; }

/* results box: the figures and the chart share one panel */
.t-results__box { background: var(--ag-white); border: 1px solid var(--ag-border); border-radius: 16px; box-shadow: var(--ag-shadow-card); padding: 18px 18px 18px; }
.t-results__range { font-size: 14px; color: var(--ag-text-secondary); }
.t-results__range strong { color: var(--ag-text); font-weight: 600; }
.t-clamp { font-size: 13px; color: #9a6b2f; margin-top: 4px; min-height: 0; }
.t-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
.t-res { border-radius: 14px; padding: 20px 20px 16px; background: var(--ag-bg-card); border: 1px solid var(--ag-border); }
.t-res--gold { background: linear-gradient(160deg, #272937 0%, #1d1f2a 100%); border-color: transparent; color: var(--ag-white); }
.t-res__name { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ag-text-secondary); }
.t-res__name i { width: 10px; height: 10px; border-radius: 50%; background: var(--ag-slate); }
.t-res--gold .t-res__name { color: var(--ag-gold); }
.t-res--gold .t-res__name i { background: var(--ag-gold); }
.t-res__value { margin-top: 10px; font-family: var(--ag-font-num); font-size: clamp(2rem, 3.4vw, 2.8rem); font-weight: 500; letter-spacing: -1.5px; line-height: 1.05; color: var(--ag-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.t-res--gold .t-res__value { color: var(--ag-gold); }
.t-res__change { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-top: 6px; font-family: var(--ag-font-num); font-size: 16px; font-weight: 500; color: var(--good-text); }
.t-res--gold .t-res__change { color: #a9d1b8; }
.t-res__change.is-neg, .t-res__change .is-neg { color: var(--bad-text); }
.t-res--gold .t-res__change.is-neg { color: #f1b2a6; }
.t-res__cagr { font-size: 13px; font-weight: 400; color: var(--ag-text-secondary); }
.t-res--gold .t-res__cagr { color: rgba(255, 255, 255, 0.55); }
.t-res__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ag-border); }
.t-res--gold .t-res__grid { border-top-color: rgba(255, 255, 255, 0.1); }
.t-res__k { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--ag-text-secondary); }
.t-res--gold .t-res__k { color: rgba(255, 255, 255, 0.45); }
.t-res__v { margin-top: 2px; font-family: var(--ag-font-num); font-size: 15px; font-weight: 500; color: var(--ag-text); }
.t-res--gold .t-res__v { color: var(--ag-white); }
.t-res__extra { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--ag-text-secondary); }
.t-res__extra:empty { display: none; }
.t-res__tr { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: rgba(217, 198, 133, 0.18); font-size: 13.5px; color: var(--ag-text); display: none; }
.t-res__tr b { font-family: var(--ag-font-num); font-weight: 600; }
.t-res__tr.is-on { display: block; }
.t-verdict { margin-top: 14px; padding: 14px 18px; border-radius: 10px; background: var(--ag-gold-light); color: var(--ag-slate); font-size: 15px; line-height: 1.5; }
.t-verdict strong { font-weight: 700; }
.t-results__box .t-chart { margin-top: 16px; box-shadow: none; }
.is-calculating .t-res__value, .is-calculating .t-chart { opacity: 0.55; transition: opacity 0.2s; }
.t-calc-error { display: none; margin-top: 14px; font-size: 14px; color: var(--bad-text); }
.is-error .t-calc-error { display: block; }

/* description of the chosen comparison */
.t-desc { margin-top: 16px; padding: 16px 20px; border-left: 3px solid var(--ag-gold); background: var(--ag-white); border-radius: 0 10px 10px 0; }
.t-desc h3 { font-size: 16px; font-weight: 600; color: var(--ag-text); margin-bottom: 6px; }
.t-desc p { font-size: 14.5px; line-height: 1.65; color: var(--ag-text-secondary); }

/* scoreboard table (decades or years) */
.t-table-wrap { background: var(--ag-white); border: 1px solid var(--ag-border); border-radius: 14px; box-shadow: var(--ag-shadow-card); overflow: hidden; }
.t-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.t-table th, .t-table td { padding: 13px 20px; text-align: right; border-bottom: 1px solid var(--ag-border); }
.t-table thead th { font-size: 12px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ag-text-secondary); background: var(--ag-bg-card); }
.t-table th[scope="row"], .t-table thead th:first-child { text-align: left; font-weight: 600; color: var(--ag-text); }
.t-table tbody tr:last-child th, .t-table tbody tr:last-child td { border-bottom: 0; }
.t-table td { font-family: var(--ag-font-num); font-weight: 500; color: var(--ag-text); }
.t-table td.is-neg { color: var(--bad-text); }
.t-table td.is-win { background: rgba(217, 198, 133, 0.16); }
.t-table td.is-win::after { content: "\2713"; margin-left: 8px; color: var(--ag-gold-hover); font-family: var(--ag-font); }
.t-table--zones td { font-family: var(--ag-font); }
.t-table-sum { margin-top: 12px; font-size: 14px; color: var(--ag-text-secondary); }

/* ── More tools ── */
.t-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.t-tool {
  display: flex; flex-direction: column; gap: 6px; padding: 20px 20px 18px; text-decoration: none;
  background: var(--ag-white); border: 1px solid var(--ag-border); border-radius: var(--ag-radius-card);
  transition: transform var(--ag-transition), box-shadow var(--ag-transition), border-color var(--ag-transition);
}
.t-tool:hover { transform: translateY(-2px); box-shadow: var(--ag-shadow-card); border-color: var(--ag-gold); }
.t-tool__name { font-size: 16px; font-weight: 600; color: var(--ag-text); }
.t-tool__desc { font-size: 14px; line-height: 1.5; color: var(--ag-text-secondary); }
.t-tool__go { margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--ag-gold-hover); }

/* loading / error states */
.t-skel { color: transparent !important; background: rgba(255, 255, 255, 0.08); border-radius: 8px; animation: tPulse 1.4s ease-in-out infinite; }
@keyframes tPulse { 50% { opacity: 0.5; } }
.t-error { display: none; margin-top: 12px; font-size: 13px; color: #f1b2a6; }
.is-error .t-error { display: block; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .t-peaks { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1023px) {
  .t-hero__inner { grid-template-columns: 1fr; gap: 28px; padding-top: 36px; padding-bottom: 40px; }
  .t-calc__grid { grid-template-columns: 1fr; }
  .t-panel { position: static; }
  .t-tools { grid-template-columns: repeat(2, 1fr); }
  .t-compare__inner { grid-template-columns: repeat(2, 1fr); }
  .t-compare__item:first-child { grid-column: 1 / -1; }
  .t-compare__item:nth-child(odd) { border-right: 0; }
  .t-compare__item:nth-child(-n + 3) { border-bottom: 1px solid var(--ag-border); }
  .t-prose, .t-method { grid-template-columns: 1fr; }
  .guide__inner { grid-template-columns: 1fr; padding-top: 44px; padding-bottom: 44px; }
  .guide__img { order: -1; }
  .guide__img img { width: 190px; }
  .guide__text { font-size: 15px; }
  .guide__ctas .btn { width: 100%; }
  .t-band__price { text-align: left; }
}
@media (max-width: 640px) {
  .t-cards { grid-template-columns: 1fr; }
  .t-tools { grid-template-columns: 1fr; }
  .t-table th, .t-table td { padding: 11px 12px; font-size: 14px; }
  .t-table td.is-win::after { display: none; }
  .t-sec { padding: 44px 0; }
  .t-reveal { padding: 20px 18px 18px; }
  .t-facts { grid-template-columns: 1fr; }
  .t-compare__item { padding: 16px 14px; }
  .t-compare__v { font-size: 22px; }
  .t-zone { grid-template-columns: 12px 1fr; gap: 6px 14px; }
  .t-zone__range { grid-column: 2; }
  .t-zone > div:last-child { grid-column: 2; }
  .t-key .t-zone { grid-template-columns: 12px 1fr; }
  .t-key .t-zone__range { grid-column: 2; }
  .t-key--table .t-zone { grid-template-columns: 12px 1fr auto auto; }
  .t-key--table .t-zone__range { grid-column: 2; }
  .t-key--table .t-zone > div { grid-column: 2; }
  .t-key--table .t-zone__num { grid-row: 1 / span 2; }
  .t-key__cols { grid-template-columns: 12px 1fr auto auto; }
  .t-key__cols span:nth-child(3) { display: none; }
  .t-zone__num { min-width: 58px; }
  .t-method { padding: 22px 20px; }
  .t-results__box { padding: 12px; }
  .t-peaks { gap: 8px; }
  .t-peak { padding: 12px 12px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .guide__img img, .guide__img::before, .t-skel { animation: none; }
  .t-meter__marker { transition: none; }
  .t-reveal.is-on .t-reveal__out { animation: none; }
}