/* ==========================================================================
   sections.css — hero and narrative sections. Owned by the lead.
   Tokens only; no raw colour values.
   ========================================================================== */

/* ==========================================================================
   HERO
   ========================================================================== */

.hx {
  padding-block: calc(var(--band-y) * 0.75) var(--band-y);
  overflow: clip;
}

.hx__inner {
  display: grid;
  gap: var(--s-10);
  align-items: center;
}

.hx__eyebrow { color: var(--snow-3); }

.hx__title {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  font-weight: 700;
  margin-block: var(--s-6) var(--s-6);
  max-width: 14ch;
}

.hx__line { display: block; }
.hx__line--2 { color: var(--lcd); }

.hx__lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--snow-2);
  max-width: 46ch;
}

.hx__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5) var(--s-6);
  margin-block-start: var(--s-10);
  padding-block-start: var(--s-6);
  border-block-start: var(--hairline) solid var(--rule-night);
  max-width: 34rem;
}

.hx__fact { display: grid; gap: 2px; }

.hx__fact-v {
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--snow);
  font-variant-numeric: tabular-nums;
}

.hx__fact-k {
  font-size: var(--fs-nano);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--snow-3);
}

.hx__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-block-start: var(--s-10);
}

.hx__buy { padding-inline: var(--s-6); }
.hx__buy-price {
  padding-inline-start: var(--s-3);
  margin-inline-start: var(--s-1);
  border-inline-start: var(--hairline) solid color-mix(in srgb, currentColor 30%, transparent);
  opacity: 0.75;
}
.hx__arrow { flex: none; }

.hx__note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-block-start: var(--s-6);
  font-size: var(--fs-micro);
  color: var(--snow-3);
}
.hx__note .pill { border-color: var(--rule-night); color: var(--snow-2); }

.hx__stage {
  position: relative;
  display: grid;
  justify-items: center;
  margin: 0;
}

.hx__glow {
  position: absolute;
  inset: 8% 0 12%;
  background:
    radial-gradient(58% 46% at 50% 44%, color-mix(in srgb, var(--lcd) 20%, transparent) 0%, transparent 72%),
    radial-gradient(38% 30% at 50% 40%, color-mix(in srgb, var(--backlight) 9%, transparent) 0%, transparent 70%);
  filter: blur(6px);
  pointer-events: none;
}

.hx__hero-img {
  position: relative;
  inline-size: min(100%, 30rem);
  filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.55));
  background: none;
}

.hx__cap {
  margin-block-start: var(--s-5);
  font-size: var(--fs-nano);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--snow-3);
  text-align: center;
}

@media (min-width: 64rem) {
  .hx__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--s-16);
    min-block-size: min(78vh, 44rem);
  }
  .hx__copy { order: 1; }
  .hx__stage { order: 2; }
  .hx__hero-img { inline-size: min(100%, 34rem); }
  .hx__facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 90rem) {
  .hx__hero-img { inline-size: min(100%, 38rem); }
}

/* ==========================================================================
   STORY — annotated overview
   ========================================================================== */

.st__body {
  display: grid;
  gap: var(--s-10);
  align-items: start;
}

.st__stage {
  position: relative;
  margin: 0;
  background:
    radial-gradient(65% 55% at 50% 45%, var(--paper-2) 0%, var(--paper) 70%);
  border: var(--hairline) solid var(--rule-c);
  border-radius: var(--r-xl);
  padding: var(--s-6);
  overflow: hidden;
}

.st__img {
  inline-size: min(100%, 26rem);
  margin-inline: auto;
  background: none;
  mix-blend-mode: multiply;
}

.st__pins { position: absolute; inset: 0; }

.st__pin {
  position: absolute;
  inset-inline-start: var(--x);
  inset-block-start: var(--y);
  translate: -50% -50%;
  inline-size: 28px;
  block-size: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--fs-nano);
  font-weight: 700;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--paper) 70%, transparent);
  transition: scale var(--dur-2) var(--ease-snap), background-color var(--dur-2) var(--ease-out);
  pointer-events: none;
}

.st__pin[data-active='true'] {
  background: var(--signal);
  scale: 1.25;
}

.st__list { display: grid; gap: var(--s-2); counter-reset: none; }

.st__item {
  border-block-end: var(--hairline) solid var(--rule-c);
}
.st__item:first-child { border-block-start: var(--hairline) solid var(--rule-c); }

.st__item-btn {
  inline-size: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-4);
  align-items: start;
  padding-block: var(--s-5);
  text-align: start;
  min-block-size: var(--tap);
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-out);
}

.st__item-btn:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }

.st__num {
  inline-size: 26px;
  block-size: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: var(--hairline) solid var(--rule-c);
  font-size: var(--fs-nano);
  font-weight: 700;
  color: var(--fg-2);
  transition: background-color var(--dur-2) var(--ease-out),
              color var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out);
}

.st__item[data-active='true'] .st__num {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--signal-ink);
}

.st__item-text { display: grid; gap: var(--s-2); }

.st__item-h {
  font-weight: 700;
  font-size: var(--fs-h4);
  letter-spacing: var(--ls-head);
}

.st__item-b {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--fg-2);
}

@media (min-width: 62rem) {
  .st__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-16); }
  .st__stage { position: sticky; top: calc(var(--nav-h, 56px) + var(--s-6)); }
}

.st__badges {
  margin-block-start: var(--s-16);
  padding-block-start: var(--s-8);
  border-block-start: var(--hairline) solid var(--rule-c);
}

.st__badge-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--s-6);
  margin-block-start: var(--s-6);
}

.st__badge {
  display: grid;
  gap: var(--s-3);
  justify-items: start;
}

.st__badge-icon {
  inline-size: 34px;
  block-size: 34px;
  color: var(--fg-2);
}

.st__badge-t {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  line-height: 1.5;
  color: var(--fg-2);
}

/* ==========================================================================
   WATCH SECTION WRAPPER
   ========================================================================== */

.wxs__mount { margin-block-start: var(--s-4); }

.wxs__noscript {
  max-width: var(--measure);
  color: var(--fg-2);
  border: var(--hairline) dashed var(--rule-c);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}

/* ==========================================================================
   STEPS
   ========================================================================== */

.steps__grid { align-items: start; }
.steps__grid--2 { margin-block-start: var(--s-12); }

.steps__fig { margin: 0; }

.steps__fig > svg {
  inline-size: 100%;
  block-size: auto;
  background: var(--bg-2);
  border: var(--hairline) solid var(--rule-c);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}

.steps__note-h {
  font-size: var(--fs-h4);
  margin-block-end: var(--s-2);
}

.steps__aside {
  margin-block-start: var(--s-14);
  border-inline-start: 3px solid var(--lcd);
}

.steps__quote {
  margin-block-start: var(--s-4);
  font-size: var(--fs-lead);
  line-height: 1.55;
  max-width: var(--measure);
  color: var(--fg);
}
.steps__quote::before { content: '“'; }
.steps__quote::after { content: '”'; }

/* ==========================================================================
   MOBILE LINK / HONEST FRAMING
   ========================================================================== */

.appx__cols {
  display: grid;
  gap: var(--s-8);
}

.appx__col {
  border: var(--hairline) solid var(--rule-c);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  background: var(--bg-2);
}

.appx__col--not { background: transparent; border-style: dashed; }

.appx__col-h {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-h4);
  margin-block-end: var(--s-5);
}

.appx__list { display: grid; gap: 0; }

.appx__list li {
  padding-block: var(--s-3);
  border-block-end: var(--hairline) solid var(--rule-c);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--fg);
  display: flex;
  gap: var(--s-3);
  align-items: baseline;
}
.appx__list li:last-child { border-block-end: 0; }

.appx__list li::before {
  content: '+';
  color: var(--ok);
  flex: none;
  font-weight: 700;
}

.appx__list--not li { color: var(--fg-3); text-decoration: line-through; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
.appx__list--not li::before { content: '−'; color: var(--alert-c); text-decoration: none; }

.appx__foot {
  margin-block-start: var(--s-5);
  font-size: var(--fs-nano);
  line-height: 1.6;
  color: var(--fg-3);
}

.appx__fig { margin: var(--s-14) 0 0; }
.appx__fig > svg {
  inline-size: 100%;
  block-size: auto;
  background: var(--bg-2);
  border: var(--hairline) solid var(--rule-c);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}

.appx__cards { margin-block-start: var(--s-12); }
.appx__card-h { font-size: var(--fs-h4); margin-block-end: var(--s-2); }

@media (min-width: 56rem) {
  .appx__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   BATTERY
   ========================================================================== */

.bat__grid { align-items: center; }
.bat__fig { margin: 0; }
.bat__fig--wide { margin-block-start: var(--s-14); }

.bat__fig > svg {
  inline-size: 100%;
  block-size: auto;
  background: var(--bg-2);
  border: var(--hairline) solid var(--rule-c);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}

.bat__rail { margin-block-start: var(--s-6); }

@media (min-width: 48rem) {
  .bat__rail { margin-block-start: 0; }
}

/* ==========================================================================
   HERITAGE
   ========================================================================== */

.her__quote-fig { margin: 0 0 var(--s-12); }

.her__quote {
  font-size: clamp(1.2rem, 2.6vw, 1.75rem);
  line-height: 1.4;
  letter-spacing: -0.015em;
  max-width: 36ch;
  padding-inline-start: var(--s-6);
  border-inline-start: 3px solid var(--lcd);
}

.her__fig { margin: var(--s-14) 0 0; }
.her__fig > svg {
  inline-size: 100%;
  block-size: auto;
  background: var(--bg-2);
  border: var(--hairline) solid var(--rule-c);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}

/* lineage comparison table */
.her__cmp {
  overflow-x: auto;
  border: var(--hairline) solid var(--rule-c);
  border-radius: var(--r-md);
  background: var(--bg-2);
  scrollbar-width: thin;
}

.her__table {
  min-inline-size: 52rem;
  font-size: var(--fs-small);
  line-height: 1.5;
}

.her__table th,
.her__table td {
  padding: var(--s-3) var(--s-4);
  text-align: start;
  vertical-align: top;
  border-block-end: var(--hairline) solid var(--rule-c);
}

.her__table thead th {
  position: sticky;
  inset-block-start: 0;
  background: var(--bg-2);
  border-block-end: 2px solid var(--fg);
  padding-block: var(--s-4);
}

.her__table tbody th[scope='row'] {
  font-weight: 600;
  color: var(--fg-2);
  white-space: nowrap;
  position: sticky;
  inset-inline-start: 0;
  background: var(--bg-2);
  max-inline-size: 11rem;
  white-space: normal;
}

.her__table td {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--fg);
}

.her__table .is-current {
  background: color-mix(in srgb, var(--lcd) 16%, transparent);
}

.her__col-link { text-decoration: none; }
.her__col-link:hover { text-decoration: underline; }
.her__col-code { font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.04em; }
.her__col-year { display: block; margin-block-start: var(--s-1); font-size: var(--fs-nano); color: var(--fg-3); }
.her__col-tag {
  display: inline-block;
  margin-block-start: var(--s-2);
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-pill);
  background: var(--fg);
  color: var(--bg);
  font-size: var(--fs-nano);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.her__np { color: var(--fg-3); font-style: normal; }

.her__note {
  margin-block-start: var(--s-4);
  font-size: var(--fs-small);
  color: var(--fg-2);
  max-inline-size: var(--measure);
}

.her__src {
  margin-block-start: var(--s-3);
  font-size: var(--fs-nano);
  color: var(--fg-3);
  letter-spacing: 0.04em;
}

/* ==========================================================================
   VARIANTS
   ========================================================================== */

.var__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--s-6);
}

.var__card {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-5);
  border: var(--hairline) solid var(--rule-c);
  border-radius: var(--r-lg);
  background: var(--bg-2);
  text-decoration: none;
  transition: border-color var(--dur-2) var(--ease-out),
              transform var(--dur-2) var(--ease-out);
}
.var__card:hover { border-color: var(--fg); transform: translateY(-2px); }
.var__card[aria-current='true'] { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }

.var__img {
  inline-size: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background: none;
  mix-blend-mode: multiply;
}

.var__code { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--fg-3); letter-spacing: 0.06em; }
.var__name { font-size: var(--fs-small); font-weight: 700; }
.var__price { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--fg-2); }

.var__note { margin-block-start: var(--s-8); font-size: var(--fs-nano); color: var(--fg-3); }

/* ==========================================================================
   BUY
   ========================================================================== */

.buy__grid {
  display: grid;
  gap: var(--s-8);
}

.buy__panel {
  border: var(--hairline) solid var(--rule-c);
  border-radius: var(--r-lg);
  padding: var(--s-8);
  background: var(--bg-2);
  display: grid;
  gap: var(--s-3);
  align-content: start;
}

.buy__model { font-size: var(--fs-micro); letter-spacing: var(--ls-label); color: var(--fg-3); }

.buy__price {
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  font-weight: 700;
  letter-spacing: var(--ls-head);
  line-height: 1;
}

.buy__stock { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-small); color: var(--fg-2); }

.buy__cta { margin-block-start: var(--s-4); justify-self: start; }
.buy__meta { font-size: var(--fs-nano); color: var(--fg-3); }

.buy__support .ft__h { color: var(--fg-3); }

@media (min-width: 56rem) {
  .buy__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 0.9fr); gap: var(--s-10); }
}

/* ==========================================================================
   Shared figure defaults for inlined SVG in narrative sections
   ========================================================================== */

.band figure > svg { display: block; max-inline-size: 100%; }

.ft__list--plain li {
  color: var(--fg-2);
  font-size: var(--fs-micro);
  line-height: 1.9;
}