/* ══════════════════════════════════════════════════════════════════════════
   HUB.CSS: shared styles for the HOT Leadership content hub (spoke pages under
   /hot-leadership/*). Loaded after base.css. Dark editorial theme matching the
   hot-leadership pillar page. Tokens come from base.css; the cold-blue scale is
   local (base.css has no cold tokens).
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --cold: #78909C;
  --cold-light: #B0BEC5;
  --cold-blue: #64b5d9;
}

body { background: var(--dark-1); }

/* ─── Visually-hidden but accessible (e.g. an h2 the design doesn't need shown) ─── */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ─── Breadcrumb bar ────────────────────────────────────────────────────── */
.hub-breadcrumb {
  background: var(--dark-1);
  border-bottom: 1px solid rgba(245, 238, 228, .07);
  padding: 6.5rem 5vw 1rem;
}
.hub-breadcrumb ol {
  max-width: 1100px;
  margin: 0 auto;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  letter-spacing: .02em;
}
.hub-breadcrumb li { display: flex; align-items: center; gap: .5rem; color: var(--muted-light); }
.hub-breadcrumb a { color: var(--muted-light); text-decoration: none; transition: color .2s ease; }
.hub-breadcrumb a:hover { color: var(--fire-hi); }
.hub-breadcrumb li[aria-current] { color: var(--text-light); font-weight: 600; }
.hub-breadcrumb .sep { color: rgba(245, 238, 228, .3); }

/* ─── Hero ──────────────────────────────────────────────────────────────── */
#hub-hero {
  position: relative;
  background: var(--dark-0);
  padding: 4rem 5vw 5rem;
  overflow: hidden;
}
.hub-hero-glow {
  position: absolute;
  top: -20%; left: 50%;
  width: 720px; height: 720px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255, 87, 34, .13) 0%, transparent 62%);
  pointer-events: none;
  animation: hubGlow 9s ease-in-out infinite;
}
@keyframes hubGlow {
  0%, 100% { opacity: .55; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;   transform: translateX(-50%) scale(1.08); }
}
.hub-hero-inner {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}
.hub-eyebrow {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--fire);
  margin-bottom: 1.4rem;
}
#hub-hero h1 {
  font-size: clamp(2.3rem, 5.2vw, 4rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--text-light);
  margin-bottom: 1.6rem;
}
#hub-hero h1 .fire-word {
  background: linear-gradient(120deg, var(--fire), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hub-lede {
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  line-height: 1.72;
  color: var(--text-light);
  opacity: .9;
  max-width: 680px;
  margin: 0 auto;
}
.hub-lede strong { color: var(--fire-hi); font-weight: 600; }

/* ─── Generic section shells ───────────────────────────────────────────── */
.hub-section { padding: clamp(3.5rem, 7vw, 6rem) 5vw; }
.hub-section.dark0 { background: var(--dark-0); }
.hub-section.dark1 { background: var(--dark-1); }
.hub-section.dark2 { background: var(--dark-2); }
.hub-section.cream1 { background: var(--cream-1); }
.hub-section.cream1 .hub-section-head h2 { color: var(--text-dark); }
.hub-section.cream1 .hub-section-head p { color: var(--muted-dark); }
.hub-section.cream1 .hub-section-head p strong { color: var(--fire); }
.hub-section-inner { max-width: 1100px; margin: 0 auto; }
.hub-section-head { max-width: 680px; margin: 0 auto 3rem; text-align: center; }
.hub-section-head .hub-eyebrow { margin-bottom: 1rem; }
.hub-section-head h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
  font-weight: 800;
  line-height: 1.14;
  color: var(--text-light);
  margin-bottom: 1rem;
}
.hub-section-head p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--muted-light);
}
.hub-section-head p strong { color: var(--fire-hi); font-weight: 600; }

/* ─── Interactive temperature slider (ported from the pillar page) ───────── */
.tc-slider-wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: center;
  margin: 2.5rem auto .75rem;
}
.tc-sl-label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  flex-shrink: 0;
  min-width: 96px;
  transition: opacity .3s ease;
}
.tc-sl-label.left  { text-align: right; color: var(--cold-light); }
.tc-sl-label.right { text-align: left;  color: var(--fire-hi); }
.tc-range-wrap { position: relative; width: 240px; height: 24px; display: flex; align-items: center; flex-shrink: 0; }
.tc-range-track {
  position: absolute; left: 0; right: 0; height: 4px; border-radius: 2px;
  background: linear-gradient(to right, var(--cold), var(--fire));
  pointer-events: none;
}
.tc-range {
  position: relative; z-index: 1; width: 100%; height: 24px;
  -webkit-appearance: none; appearance: none;
  background: transparent; cursor: grab; outline: none;
}
.tc-range:active { cursor: grabbing; }
.tc-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--fire);
  box-shadow: 0 0 14px rgba(255, 87, 34, .65), 0 2px 6px rgba(0, 0, 0, .4);
  border: 2px solid rgba(255, 255, 255, .18);
  transition: background .4s ease, box-shadow .4s ease, transform .15s ease; cursor: grab;
}
.tc-range:active::-webkit-slider-thumb { transform: scale(1.18); cursor: grabbing; }
.tc-range::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: var(--fire);
  box-shadow: 0 0 14px rgba(255, 87, 34, .65); border: 2px solid rgba(255, 255, 255, .18);
  cursor: grab; transition: background .4s ease;
}
.tc-range::-webkit-slider-runnable-track { background: transparent; }
.tc-range::-moz-range-track { background: transparent; }
.tc-range.is-cold::-webkit-slider-thumb {
  background: var(--cold); box-shadow: 0 0 14px rgba(120, 144, 156, .65), 0 2px 6px rgba(0, 0, 0, .4);
}
.tc-range.is-cold::-moz-range-thumb { background: var(--cold); box-shadow: 0 0 14px rgba(120, 144, 156, .65); }
.tc-slider-hint {
  text-align: center; font-size: .7rem; color: var(--muted-light);
  margin-bottom: 3rem; letter-spacing: .06em; opacity: .65;
}

/* ─── Cold / Hot comparison grid (ported + slider-reactive) ──────────────── */
.temp-concept-grid {
  display: grid; grid-template-columns: 1fr 88px 1fr; gap: 0;
  align-items: stretch; max-width: 1100px; margin: 0 auto;
}
.tc-side { padding: 2.5rem 2rem; border-radius: var(--r-xl); position: relative; overflow: hidden;
  transition: opacity .5s ease, box-shadow .5s ease, filter .5s ease; }
.tc-side.hot {
  background: linear-gradient(210deg, rgba(255, 87, 34, .1) 0%, rgba(255, 87, 34, .03) 50%, transparent 100%);
  border: 1.5px solid rgba(255, 87, 34, .22); border-right: 3px solid var(--fire);
  box-shadow: 6px 0 40px rgba(255, 87, 34, .08), inset 0 0 80px rgba(255, 87, 34, .03);
}
.tc-side.hot:hover { box-shadow: 6px 0 60px rgba(255, 87, 34, .15), inset 0 0 80px rgba(255, 87, 34, .05); }
.tc-side.cold {
  background: linear-gradient(150deg, rgba(66, 153, 225, .08) 0%, rgba(66, 153, 225, .02) 50%, transparent 100%);
  border: 1.5px solid rgba(66, 153, 225, .18); border-left: 3px solid #4a9eca;
  box-shadow: -6px 0 40px rgba(66, 153, 225, .07), inset 0 0 80px rgba(66, 153, 225, .02);
}
.tc-side.cold:hover { box-shadow: -6px 0 60px rgba(66, 153, 225, .12), inset 0 0 80px rgba(66, 153, 225, .04); }
.tc-side::after { content: ''; position: absolute; bottom: -24px; right: -24px; width: 160px; height: 160px; border-radius: 50%; pointer-events: none; }
.tc-side.hot::after { background: radial-gradient(circle, rgba(255, 87, 34, .12) 0%, transparent 70%); }
.tc-side.cold::after { background: radial-gradient(circle, rgba(66, 153, 225, .1) 0%, transparent 70%); }
.tc-heading { font-size: 1.2rem; font-weight: 800; margin-bottom: 1.5rem; display: flex; align-items: center; gap: .65rem; }
.tc-heading.hot { color: var(--fire); }
.tc-heading.cold { color: var(--cold-blue); }
.tc-heading-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; }
.tc-heading-icon.hot { background: rgba(255, 87, 34, .18); color: var(--fire); }
.tc-heading-icon.cold { background: rgba(66, 153, 225, .15); color: var(--cold-blue); }
.tc-list { list-style: none; display: flex; flex-direction: column; }
.tc-item { display: flex; align-items: flex-start; gap: .75rem; font-size: .9rem; line-height: 1.55; padding: .65rem 0; border-bottom: 1px solid rgba(255, 255, 255, .05); transition: padding .2s ease; }
.tc-item:last-child { border-bottom: none; }
.tc-item.hot { color: rgba(245, 238, 228, .75); }
.tc-item.cold { color: rgba(200, 215, 228, .38); }
.tc-item:hover { padding-left: .35rem; }
.tc-icon { flex-shrink: 0; margin-top: 2px; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.tc-icon.hot { background: rgba(255, 87, 34, .2); color: var(--fire); }
.tc-icon.cold { background: rgba(66, 153, 225, .15); color: var(--cold-blue); }
.tc-vs-col { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; }
.tc-vs-line { flex: 1; width: 1px; background: linear-gradient(to bottom, transparent, rgba(255, 87, 34, .25) 30%, rgba(255, 87, 34, .25) 70%, transparent); }
.tc-vs { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: .5rem 0; border-radius: 50%; background: var(--dark-2); border: 1px solid rgba(255, 87, 34, .3); color: var(--fire); font-weight: 800; font-size: .8rem; text-transform: uppercase; }
/* Slider-reactive column states */
.temp-concept-grid.heat-cold .tc-side.hot { opacity: .35; filter: saturate(.3); }
.temp-concept-grid.heat-cold .tc-side.cold { box-shadow: -6px 0 80px rgba(66, 153, 225, .25), inset 0 0 80px rgba(66, 153, 225, .08); }
.temp-concept-grid.heat-hot .tc-side.cold { opacity: .35; filter: saturate(.3); }
.temp-concept-grid.heat-hot .tc-side.hot { box-shadow: 6px 0 80px rgba(255, 87, 34, .3), inset 0 0 80px rgba(255, 87, 34, .1); }

/* ─── Pull quote ────────────────────────────────────────────────────────── */
.hub-quote {
  max-width: 860px; margin: 0 auto; text-align: center; position: relative;
}
.hub-quote p {
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 800; line-height: 1.32; color: var(--text-light);
}
.hub-quote .fire-word { color: var(--fire); }
.hub-quote .cold-word { color: var(--cold-blue); }
.hub-quote cite { display: block; margin-top: 1.5rem; font-style: normal; font-size: .8rem; text-transform: uppercase; letter-spacing: .18em; color: var(--muted-light); }

/* ─── Stat row (animated counters) ──────────────────────────────────────── */
.hub-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; max-width: 820px; margin: 0 auto; }
.hub-stat {
  background: linear-gradient(160deg, rgba(255, 87, 34, .06), transparent);
  border: 1px solid rgba(255, 87, 34, .15); border-radius: var(--r-lg);
  padding: 2.5rem 2rem; text-align: center;
}
.hub-stat-num {
  font-size: clamp(2.6rem, 6vw, 4rem); font-weight: 900; line-height: 1;
  background: linear-gradient(120deg, var(--fire), var(--gold));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hub-stat-lbl { margin-top: 1rem; font-size: .92rem; color: var(--muted-light); line-height: 1.5; }
.hub-stat-src { margin-top: .6rem; font-size: .72rem; letter-spacing: .04em; color: rgba(245, 238, 228, .35); }
/* Cream-section variant: white cards instead of dark translucent ones */
.cream1 .hub-stat { background: #fff; border: 1px solid rgba(26, 21, 16, .08); }
.cream1 .hub-stat-lbl { color: var(--muted-dark); }
.cream1 .hub-stat-src { color: rgba(26, 21, 16, .35); }

/* ─── Practice mini (Notice / Reset / Choose) ───────────────────────────── */
.hub-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.hub-step {
  background: var(--dark-1); border: 1px solid rgba(245, 238, 228, .08);
  border-radius: var(--r-lg); padding: 2rem 1.75rem; position: relative; overflow: hidden;
  transition: transform .35s cubic-bezier(.23, 1, .32, 1), border-color .35s ease, box-shadow .35s ease;
}
.hub-step:hover { transform: translateY(-6px); border-color: rgba(255, 87, 34, .3); box-shadow: 0 20px 50px rgba(0, 0, 0, .3); }
.hub-step-num { font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--fire); margin-bottom: .8rem; }
.hub-step h3 { font-size: 1.25rem; font-weight: 800; color: var(--text-light); margin-bottom: .6rem; }
.hub-step p { font-size: .92rem; line-height: 1.65; color: var(--muted-light); }

/* ─── The one question ──────────────────────────────────────────────────── */
.hub-oneq {
  max-width: 760px; margin: 3rem auto 0; text-align: center;
  padding: 2.5rem 2rem; border-radius: var(--r-xl);
  background: radial-gradient(circle at 50% 0%, rgba(255, 87, 34, .1), transparent 70%);
  border: 1px solid rgba(255, 87, 34, .2);
}
.hub-oneq span { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .22em; color: var(--fire); }
.hub-oneq p { margin-top: 1rem; font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; font-style: italic; color: var(--text-light); }

/* ─── Related cluster ───────────────────────────────────────────────────── */
.hub-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.hub-rel-card {
  display: block; text-decoration: none; background: var(--dark-1);
  border: 1px solid rgba(245, 238, 228, .08); border-radius: var(--r-lg);
  padding: 1.75rem; transition: transform .35s cubic-bezier(.23, 1, .32, 1), border-color .35s ease, box-shadow .35s ease;
}
.hub-rel-card:hover { transform: translateY(-5px); border-color: rgba(255, 87, 34, .3); box-shadow: 0 18px 44px rgba(0, 0, 0, .3); }
.hub-rel-kicker { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; color: var(--fire); margin-bottom: .7rem; }
.hub-rel-card h3 { font-size: 1.1rem; font-weight: 700; color: var(--text-light); margin-bottom: .5rem; line-height: 1.3; }
.hub-rel-card p { font-size: .86rem; line-height: 1.6; color: var(--muted-light); }
.hub-rel-arrow { margin-top: 1rem; color: var(--fire); font-weight: 600; font-size: .9rem; }
/* Cream-section variant */
.cream1 .hub-rel-card { background: #fff; border: 1px solid rgba(26, 21, 16, .08); }
.cream1 .hub-rel-card:hover { box-shadow: 0 18px 44px rgba(26, 21, 16, .1); }
.cream1 .hub-rel-card h3 { color: var(--text-dark); }
.cream1 .hub-rel-card p { color: var(--muted-dark); }

/* ─── CTA ───────────────────────────────────────────────────────────────── */
#hub-cta {
  padding: clamp(4rem, 8vw, 6.5rem) 5vw; text-align: center;
  background: linear-gradient(135deg, var(--dark-0) 0%, var(--ember) 120%);
  position: relative; overflow: hidden;
}
.hub-cta-inner { position: relative; max-width: 720px; margin: 0 auto; }
#hub-cta h2 { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 900; color: var(--text-light); line-height: 1.12; margin-bottom: 1rem; }
#hub-cta p { font-size: 1.05rem; color: rgba(245, 238, 228, .8); line-height: 1.7; margin-bottom: 2.2rem; }
.hub-cta-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ─── Reveal (mirrors base/pillar reveal system) ────────────────────────── */
.reveal, .reveal-left, .reveal-right { opacity: 0; transition: opacity .8s cubic-bezier(.23, 1, .32, 1), transform .8s cubic-bezier(.23, 1, .32, 1); }
.reveal { transform: translateY(44px); }
.reveal-left { transform: translateX(-44px); }
.reveal-right { transform: translateX(44px); }
.reveal.in, .reveal-left.in, .reveal-right.in { opacity: 1; transform: none; }
.d1 { transition-delay: .1s !important; }
.d2 { transition-delay: .2s !important; }
.d3 { transition-delay: .3s !important; }

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE: tablet ≤960, mobile ≤600
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  .hub-steps { grid-template-columns: 1fr; }
  .hub-related { grid-template-columns: 1fr; }
  .temp-concept-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .tc-vs-col { display: none; }
  /* Horizontal reveal slides would push full-width elements past the viewport
     edge (sideways scroll) once the grid is single-column. Slide vertically. */
  .reveal-left, .reveal-right { transform: translateY(44px); }
}

@media (max-width: 600px) {
  .hub-breadcrumb { padding-top: 5.5rem; }
  .hub-breadcrumb ol { font-size: .72rem; }
  #hub-hero { padding: 3rem 6vw 3.5rem; }
  .hub-stats { grid-template-columns: 1fr; }
  .tc-slider-wrap { flex-direction: column; gap: .6rem; }
  .tc-sl-label.left, .tc-sl-label.right { text-align: center; min-width: auto; }
  .tc-range-wrap { width: 220px; }
  .tc-side { padding: 2rem 1.5rem; }
  .hub-cta-btns { flex-direction: column; }
  .hub-cta-btns .btn { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SPOKE-SPECIFIC INTERACTIVE COMPONENTS
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── Step-through tabs (Notice / Reset / Choose) ─────────────────────────── */
.np-tabs { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; margin-bottom: 2.5rem; }
.np-tab {
  font-family: 'Jost', sans-serif; font-size: .85rem; font-weight: 700;
  padding: .85rem 1.6rem; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, .04); border: 1.5px solid rgba(255, 255, 255, .1);
  color: var(--muted-light); transition: all .3s ease;
}
.np-tab:hover { border-color: rgba(255, 87, 34, .35); color: var(--text-light); }
.np-tab.is-active { background: linear-gradient(120deg, var(--fire), var(--gold)); border-color: transparent; color: #1a0f07; }
.np-panel { max-width: 760px; margin: 0 auto; text-align: center; min-height: 210px; }
.np-panel-num { font-size: .68rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--fire); margin-bottom: 1rem; }
.np-panel h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; color: var(--text-light); margin-bottom: 1rem; }
.np-panel p { font-size: 1.02rem; line-height: 1.75; color: var(--muted-light); }
.np-panel[hidden] { display: none; }

/* ─── Accordion cards (Safety / Connection / Ownership) ───────────────────── */
.cond-list { display: flex; flex-direction: column; gap: 1rem; max-width: 820px; margin: 0 auto; }
.cond-card { border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--r-lg); background: rgba(255, 255, 255, .03); overflow: hidden; }
.cond-trigger {
  width: 100%; display: flex; align-items: center; gap: 1rem; text-align: left;
  padding: 1.5rem 1.75rem; background: none; border: none; cursor: pointer;
  font-family: 'Jost', sans-serif; color: var(--text-light);
}
.cond-trigger-icon { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 87, 34, .15); color: var(--fire); }
.cond-trigger-text { flex: 1; }
.cond-trigger-badge { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--fire); }
.cond-trigger-title { font-size: 1.15rem; font-weight: 700; margin-top: .25rem; }
.cond-trigger-plus { flex-shrink: 0; font-size: 1.4rem; color: var(--fire); transition: transform .3s ease; }
.cond-card.is-open .cond-trigger-plus { transform: rotate(45deg); }
.cond-body { max-height: 0; overflow: hidden; transition: max-height .4s cubic-bezier(.23, 1, .32, 1); }
.cond-card.is-open .cond-body { max-height: 220px; }
.cond-body-inner { padding: 0 1.75rem 1.75rem 4.5rem; font-size: .92rem; line-height: 1.7; color: var(--muted-light); }
.cond-body-inner strong { color: var(--fire-hi); }

/* ─── Cost calculator (illustrative, from the Gallup 79% figure) ──────────── */
.cost-calc {
  max-width: 620px; margin: 3rem auto 0; padding: 2.5rem;
  background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--r-xl); text-align: center;
}
.cost-calc label { display: block; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted-light); margin-bottom: 1rem; }
.cost-calc-input-row { display: flex; align-items: center; gap: 1rem; justify-content: center; margin-bottom: 1.75rem; }
.cost-calc-input-row input[type="range"] { width: 220px; accent-color: var(--fire); }
.cost-calc-input-row output { font-family: 'Jost', sans-serif; font-weight: 800; font-size: 1.15rem; color: var(--fire-hi); min-width: 64px; }
.cost-calc-result { font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 900; color: var(--text-light); line-height: 1.3; }
.cost-calc-result strong { color: var(--fire); }
.cost-calc-note { margin-top: 1rem; font-size: .72rem; color: rgba(245, 238, 228, .4); }

/* ─── Toggle switch (People-first / Pressure-first) ───────────────────────── */
.pf-toggle-wrap { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 2.5rem 0 2rem; }
.pf-toggle-label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; transition: color .3s ease; }
.pf-toggle-label.left { color: var(--fire-hi); }
.pf-toggle-label.right { color: var(--muted-light); }
.pf-toggle-label.is-active { color: var(--text-light); }
.pf-switch { position: relative; width: 60px; height: 32px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1.5px solid rgba(255, 255, 255, .15); cursor: pointer; flex-shrink: 0; }
.pf-switch-knob { position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: var(--fire); transition: transform .3s cubic-bezier(.23, 1, .32, 1); box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
.pf-switch.is-on .pf-switch-knob { transform: translateX(28px); background: var(--cold-blue); }
.pf-compare-card { max-width: 680px; margin: 0 auto; padding: 2.25rem 2rem; border-radius: var(--r-lg); background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .08); text-align: center; transition: border-color .3s ease; }
.pf-compare-card h3 { font-size: 1.3rem; font-weight: 800; margin-bottom: .8rem; color: var(--fire-hi); transition: color .3s ease; }
.pf-compare-card.is-cold h3 { color: var(--cold-blue); }
.pf-compare-card p { font-size: .98rem; line-height: 1.75; color: var(--muted-light); }

/* ─── Glossary ─────────────────────────────────────────────────────────────── */
.glossary-search-wrap { max-width: 460px; margin: 0 auto 3rem; position: relative; }
.glossary-search {
  width: 100%; padding: .95rem 1.4rem; border-radius: 999px; font-size: .95rem;
  background: rgba(255, 255, 255, .05); border: 1.5px solid rgba(255, 255, 255, .12);
  color: var(--text-light); font-family: 'Jost', sans-serif;
}
.glossary-search::placeholder { color: rgba(245, 238, 228, .4); }
.glossary-search:focus { outline: none; border-color: var(--fire); }
.glossary-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; max-width: 980px; margin: 0 auto; }
.glossary-term { padding: 1.75rem; border-radius: var(--r-lg); background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .08); transition: opacity .25s ease, transform .25s ease; }
.glossary-term.is-hidden { display: none; }
.glossary-term dt { font-size: 1.05rem; font-weight: 800; color: var(--fire-hi); margin-bottom: .5rem; }
.glossary-term dd { font-size: .9rem; line-height: 1.7; color: var(--muted-light); margin: 0; }
.glossary-empty { text-align: center; color: var(--muted-light); font-size: .95rem; padding: 2rem 0; }
.glossary-empty[hidden] { display: none; }

@media (max-width: 700px) {
  .glossary-grid { grid-template-columns: 1fr; }
  .cost-calc-input-row { flex-direction: column; }
  .cost-calc-input-row input[type="range"] { width: 100%; }
}

/* Respect reduced-motion: kill the hero glow + reveal transforms */
@media (prefers-reduced-motion: reduce) {
  .hub-hero-glow { animation: none; }
  .reveal, .reveal-left, .reveal-right { opacity: 1; transform: none; transition: none; }
}