/* =============================================================
   casestudy.css — EZText research brief
   Editorial, cited, scannable. Built on ADP tokens.
   ============================================================= */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
.t-num { font-variant-numeric: tabular-nums; }

:root {
  --mila-accent: var(--orange-500);
  --mila-accent-hover: var(--orange-600);
  --mila-accent-soft: var(--orange-50);
  --mila-accent-fg: #FFF4EE;
}

.cs-container { max-width: 1140px; margin: 0 auto; padding: 0 var(--s-6); }
.cs-read { max-width: 760px; }

/* ------- Reading progress + nav ------------------------------ */
.read-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: var(--mila-accent); z-index: 200;
  transition: width 0.08s linear;
}
.cs-nav {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--border-soft);
}
.cs-nav-inner {
  height: 60px; display: flex; align-items: center; justify-content: space-between;
}
.wordmark { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.wordmark-tile {
  width: 28px; height: 28px; border-radius: 8px; background: var(--mila-accent);
  color: var(--mila-accent-fg);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.wordmark-name { font-size: 18px; font-weight: 700; letter-spacing: var(--tr-snug); color: var(--fg-strong); }
.cs-nav-meta {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tr-wide);
  text-transform: uppercase; color: var(--fg-subtle);
  display: flex; align-items: center; gap: 10px; white-space: nowrap;
}
.cs-nav-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mila-accent); }
.cs-nav-back { color: var(--fg-muted); text-decoration: none; }
.cs-nav-back:hover { color: var(--fg-strong); }
.cs-nav .btn-primary {
  font-family: var(--font-sans); font-size: 14px; font-weight: 600; line-height: 1;
  border-radius: var(--r-md); padding: 9px 15px; border: 1px solid transparent;
  background: var(--mila-accent); color: var(--mila-accent-fg); text-decoration: none;
  box-shadow: var(--shadow-inset); display: inline-flex; align-items: center; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out);
}
.cs-nav .btn-primary:hover { background: var(--mila-accent-hover); }

/* ------- Side TOC (desktop) ---------------------------------- */
.toc {
  position: fixed; top: 50%; right: 24px; transform: translateY(-50%);
  z-index: 90; display: none; flex-direction: column; gap: 2px;
}
@media (min-width: 1320px) { .toc { display: flex; } }
.toc-item {
  display: flex; align-items: center; gap: 10px; justify-content: flex-end;
  text-decoration: none; padding: 5px 0; cursor: pointer;
  background: none; border: 0; font: inherit;
}
.toc-label {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--tr-wide);
  text-transform: uppercase; color: var(--fg-subtle);
  opacity: 0; transform: translateX(6px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.toc-tick { width: 18px; height: 2px; border-radius: 2px; background: var(--border-strong); transition: width var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); }
.toc-item:hover .toc-label, .toc-item.active .toc-label { opacity: 1; transform: none; }
.toc-item:hover .toc-tick { width: 26px; }
.toc-item.active .toc-tick { width: 30px; background: var(--mila-accent); }
.toc-item.active .toc-label { color: var(--fg-strong); }

/* ------- Reveal animation ------------------------------------ */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
[data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .read-progress { display: none; }
}

/* ------- Hero ------------------------------------------------- */
.cs-hero { padding: clamp(56px, 9vw, 120px) 0 clamp(40px, 6vw, 80px); }
.cs-hero-eyebrow {
  font-family: var(--font-mono); font-size: var(--t-12); letter-spacing: var(--tr-wide);
  text-transform: uppercase; color: var(--mila-accent); margin-bottom: var(--s-6);
  display: inline-flex; align-items: center; gap: 8px;
}
.cs-hero-eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--mila-accent); }
.cs-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.6vw, 56px); font-weight: 700;
  line-height: 1.06; letter-spacing: var(--tr-tight);
  color: var(--fg-strong); text-wrap: balance; max-width: 17ch;
}
.cs-hero h1 em { font-style: normal; color: var(--mila-accent); }
.cs-hero-sub {
  margin-top: var(--s-8); font-size: clamp(16px, 1.5vw, 20px);
  line-height: var(--lh-loose); color: var(--fg-muted);
  max-width: 60ch; text-wrap: pretty;
}
.cs-hero-meta {
  margin-top: var(--s-10); display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6);
  padding-top: var(--s-5); border-top: 1px solid var(--border);
}
.cs-hero-meta span {
  font-family: var(--font-mono); font-size: var(--t-12); letter-spacing: 0.02em;
  color: var(--fg-subtle); display: inline-flex; align-items: center; gap: 7px;
}
.cs-hero-meta b { color: var(--fg); font-weight: 600; }
.cs-hero-inner { min-height: 44vh; display: flex; flex-direction: column; justify-content: space-between; gap: clamp(36px, 7vw, 88px); }
.cs-hero-stat { font-size: clamp(17px, 1.7vw, 22px); line-height: var(--lh-loose); color: var(--fg-muted); max-width: 32ch; }
.cs-hero-stat .hs-num { color: var(--mila-accent); font-weight: 700; }

/* ------- Cross-cutting band ---------------------------------- */
.xband { padding: clamp(32px, 5vw, 56px) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-raised); }
.xband-label {
  font-family: var(--font-mono); font-size: var(--t-12); letter-spacing: var(--tr-wide);
  text-transform: uppercase; color: var(--fg-subtle); margin-bottom: var(--s-8);
  display: flex; align-items: baseline; gap: 12px;
}
.xband-label b { color: var(--fg-strong); font-weight: 700; }
.xgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.xstat { padding: var(--s-2) var(--s-8) var(--s-2) 0; border-right: 1px solid var(--border); }
.xstat:last-child { border-right: 0; padding-right: 0; }
@media (max-width: 820px) {
  .xgrid { grid-template-columns: 1fr; gap: var(--s-6); }
  .xstat { border-right: 0; border-bottom: 1px solid var(--border); padding: 0 0 var(--s-6) 0; }
  .xstat:last-child { border-bottom: 0; padding-bottom: 0; }
}

/* ------- Pull-quote dark band -------------------------------- */
.pull {
  background: var(--ink-900); color: #F2EFE8; padding: clamp(64px, 11vw, 150px) 0;
}
.pull-inner { max-width: 1000px; margin: 0 auto; padding: 0 var(--s-6); }
.pull-kicker {
  font-family: var(--font-mono); font-size: var(--t-12); letter-spacing: var(--tr-wide);
  text-transform: uppercase; color: #8E8878; margin-bottom: var(--s-6);
}
.pull p {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.1vw, 40px); font-weight: 700; line-height: 1.16;
  letter-spacing: var(--tr-tight); text-wrap: balance;
}
.pull p em { font-style: normal; color: #FF7A3D; }
.pull .cite { color: inherit; }
.pull .cite-mark { color: #FF7A3D; }

/* ------- Vertical sections ----------------------------------- */
.vert { padding: clamp(56px, 8vw, 104px) 0; }
.vert.raised { background: var(--bg-raised); border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.vert-kicker {
  font-family: var(--font-mono); font-size: var(--t-13); letter-spacing: var(--tr-wide);
  text-transform: uppercase; color: var(--mila-accent);
  display: flex; align-items: center; gap: 12px; margin-bottom: var(--s-6);
}
.vert-kicker::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: 0.6; }
.vert-behavior {
  font-size: clamp(17px, 1.6vw, 21px); line-height: var(--lh-base); color: var(--fg);
  max-width: 40ch; font-weight: 500; text-wrap: pretty;
}

/* lead stat */
.vert-lead-wrap { margin: clamp(28px, 4vw, 52px) 0; }
.vert-lead {
  display: block; text-align: left; background: none; border: 0; padding: 0; cursor: default;
  font: inherit; max-width: 720px; width: 100%;
}
.lead-num {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(40px, 6vw, 76px); line-height: 0.96; letter-spacing: -0.03em;
  color: var(--mila-accent); font-variant-numeric: tabular-nums;
}
.lead-cap {
  display: block; margin-top: var(--s-4); font-family: var(--font-display);
  font-size: clamp(18px, 1.9vw, 24px); font-weight: 600; line-height: 1.3;
  letter-spacing: var(--tr-snug); color: var(--fg-strong); max-width: 34ch; text-wrap: balance;
}

/* lower grid: cost + supporting stats */
.vert-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 860px) { .vert-grid { grid-template-columns: 1fr; gap: var(--s-8); } }

.cost-callout {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--bg); padding: var(--s-6);
}
.vert.raised .cost-callout { background: var(--bg-sunken); }
.cost-kicker {
  font-family: var(--font-mono); font-size: var(--t-12); letter-spacing: var(--tr-wide);
  text-transform: uppercase; color: var(--fg-subtle); display: block; margin-bottom: var(--s-4);
}
.cost-figure {
  font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums;
  font-size: clamp(24px, 2.6vw, 34px); line-height: 1.05; letter-spacing: var(--tr-tight);
  color: var(--fg-strong); margin-bottom: var(--s-3);
}
.cost-figure b { color: var(--mila-accent); }
.cost-body { font-size: var(--t-15); line-height: var(--lh-loose); color: var(--fg-muted); text-wrap: pretty; }

.stat-list { list-style: none; display: flex; flex-direction: column; gap: 0; }
.stat-list li { border-top: 1px solid var(--border); }
.stat-list li:last-child { border-bottom: 1px solid var(--border); }
.stat-list .cite {
  display: flex; align-items: baseline; gap: 14px; width: 100%;
  padding: var(--s-5) 2px; text-align: left;
}
.sl-num {
  flex-shrink: 0; font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums;
  font-size: var(--t-20); color: var(--fg-strong); min-width: 4.6ch; letter-spacing: -0.01em;
}
.sl-num.accent { color: var(--mila-accent); }
.sl-text { font-size: var(--t-15); line-height: var(--lh-base); color: var(--fg); text-wrap: pretty; }

/* ------- Cite affordance + footnote -------------------------- */
.cite {
  background: none; border: 0; font: inherit; color: inherit; cursor: default;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--dur-fast) var(--ease-out);
}
/* Tiny, fixed-size footnote bubble — identical size no matter how large the
   text it annotates. Hovering it (and only it) reveals the source. */
.cite-mark {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; padding: 0; margin-left: 4px;
  border-radius: var(--r-pill); background: var(--mila-accent-soft); color: var(--mila-accent);
  vertical-align: baseline; position: relative; top: -0.5em; /* em = bubble's own 10px → constant lift */
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.cite-mark::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; } /* enlarged hover/tap target */
.cite-mark:hover, .cite-mark[data-open="1"], .cite-mark:focus-visible { background: var(--mila-accent); color: #fff; }
.cite-mark:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring-focus); }
/* inline prose cites get a subtle dotted underline */
.cite-inline { text-decoration: underline; text-decoration-style: dotted; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.cite-inline:hover { text-decoration-color: var(--mila-accent); color: var(--fg-strong); }

/* big cross-cutting xstat is a cite */
.xstat .cite { display: block; width: 100%; text-align: left; }
.xstat-num {
  font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums;
  font-size: clamp(34px, 4.4vw, 54px); line-height: 1; letter-spacing: -0.03em;
  color: var(--mila-accent);
}
.xstat-num small { font-size: 0.5em; color: var(--fg-subtle); font-weight: 700; }
.xstat-label {
  margin-top: var(--s-4); font-size: var(--t-15); line-height: var(--lh-base);
  color: var(--fg); max-width: 30ch; font-weight: 500; text-wrap: pretty;
}

/* ------- Learn more expander --------------------------------- */
.learn-more {
  margin-top: clamp(28px, 4vw, 44px);
  display: inline-flex; align-items: center; gap: 9px;
  background: none; border: 0; cursor: pointer; padding: 8px 0;
  font-family: var(--font-mono); font-size: var(--t-13); letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--fg-muted);
  transition: color var(--dur-fast) var(--ease-out);
}
.learn-more:hover { color: var(--mila-accent); }
.learn-more .lm-chev { transition: transform var(--dur-base) var(--ease-out); }
.learn-more[aria-expanded="true"] .lm-chev { transform: rotate(90deg); }
.learn-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s var(--ease-out); }
.learn-panel.open { grid-template-rows: 1fr; }
.learn-panel-inner { overflow: hidden; }
.learn-body {
  margin-top: var(--s-6); padding-top: var(--s-6); border-top: 1px dashed var(--border);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 44px);
}
@media (max-width: 760px) { .learn-body { grid-template-columns: 1fr; gap: var(--s-6); } }
.learn-body h4 {
  font-family: var(--font-mono); font-size: var(--t-12); letter-spacing: var(--tr-wide);
  text-transform: uppercase; color: var(--fg-subtle); margin-bottom: var(--s-4); font-weight: 600;
}
.learn-body p { font-size: var(--t-15); line-height: var(--lh-loose); color: var(--fg-muted); text-wrap: pretty; }
.learn-body p + p { margin-top: var(--s-3); }

/* ------- Methodology + references ---------------------------- */
.method { padding: clamp(56px, 8vw, 100px) 0; background: var(--bg-sunken); border-top: 1px solid var(--border); }
.method-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
@media (max-width: 900px) { .method-grid { grid-template-columns: 1fr; gap: var(--s-10); } }
.method h2 {
  font-family: var(--font-display); font-size: clamp(26px, 3vw, 36px); font-weight: 700;
  line-height: var(--lh-snug); letter-spacing: var(--tr-snug); color: var(--fg-strong); margin-bottom: var(--s-5);
}
.method-note { font-size: var(--t-15); line-height: var(--lh-loose); color: var(--fg-muted); text-wrap: pretty; }
.method-note + .method-note { margin-top: var(--s-4); }
.tier-key { display: flex; flex-direction: column; gap: 10px; margin-top: var(--s-6); }
.tier-row { display: flex; align-items: center; gap: 10px; font-size: var(--t-13); color: var(--fg); }

.refs-head {
  font-family: var(--font-mono); font-size: var(--t-12); letter-spacing: var(--tr-wide);
  text-transform: uppercase; color: var(--fg-subtle); margin-bottom: var(--s-5);
}
.refs { list-style: none; display: flex; flex-direction: column; }
.ref {
  display: grid; grid-template-columns: 2.2ch 1fr auto; gap: 12px; align-items: baseline;
  padding: var(--s-4) 0; border-top: 1px solid var(--border); text-decoration: none; color: inherit;
}
.ref:last-child { border-bottom: 1px solid var(--border); }
.ref:hover { background: color-mix(in srgb, var(--mila-accent) 5%, transparent); }
.ref-n { font-family: var(--font-mono); font-size: var(--t-13); font-weight: 700; color: var(--mila-accent); }
.ref-main { font-size: var(--t-14); line-height: var(--lh-base); color: var(--fg); }
.ref-main b { color: var(--fg-strong); font-weight: 600; }
.ref-pub { display: block; font-size: var(--t-13); color: var(--fg-muted); margin-top: 2px; }
.ref-go { font-family: var(--font-mono); font-size: var(--t-12); color: var(--fg-subtle); white-space: nowrap; }
.ref:hover .ref-go { color: var(--mila-accent); }

/* ------- Tier badge ------------------------------------------ */
.tier {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: var(--tr-wide);
  text-transform: uppercase; padding: 3px 7px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; gap: 5px;
}
.tier-dot { width: 6px; height: 6px; border-radius: 50%; }
.tier.anchor { background: var(--mila-accent-soft); color: var(--orange-700); }
.tier.anchor .tier-dot { background: var(--mila-accent); }
.tier.supporting { background: var(--ink-100); color: var(--fg-muted); }
.tier.supporting .tier-dot { background: var(--fg-subtle); }
.tier.example { background: var(--bull-50); color: var(--bull-700); }
.tier.example .tier-dot { background: var(--bull-500); }

/* ------- Popover --------------------------------------------- */
.pop-backdrop {
  position: fixed; inset: 0; z-index: 150; background: transparent;
  opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out);
}
.pop-backdrop.show { opacity: 1; pointer-events: auto; }
.pop {
  position: fixed; z-index: 151; width: min(360px, calc(100vw - 32px));
  background: var(--bg-raised); border: 1px solid var(--border-strong); border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop); padding: var(--s-5);
  opacity: 0; transform: translateY(6px) scale(0.98); pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  max-height: calc(100vh - 32px); overflow-y: auto;
}
.pop.show { opacity: 1; transform: none; pointer-events: auto; }
.pop-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: var(--s-4); }
.pop-stat {
  font-family: var(--font-display); font-size: var(--t-16); font-weight: 600; line-height: var(--lh-snug);
  color: var(--fg-strong); letter-spacing: var(--tr-snug); text-wrap: pretty; padding-right: 24px;
}
.pop-context { margin-top: var(--s-3); font-size: var(--t-14); line-height: var(--lh-loose); color: var(--fg-muted); text-wrap: pretty; }
.pop-src {
  margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 3px;
}
.pop-pub { font-size: var(--t-14); font-weight: 600; color: var(--fg-strong); }
.pop-meta { font-family: var(--font-mono); font-size: var(--t-12); color: var(--fg-muted); }
.pop-link {
  margin-top: var(--s-3); display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-13); font-weight: 600; color: var(--mila-accent); text-decoration: none;
}
.pop-link:hover { text-decoration: underline; }
.pop-close {
  position: absolute; top: 10px; right: 10px;
  width: 26px; height: 26px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--bg); cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--fg-muted);
}
.pop-close:hover { background: var(--ink-100); color: var(--fg-strong); }

/* ------- Footer ---------------------------------------------- */
.cs-footer { padding: var(--s-10) 0; border-top: 1px solid var(--border); }
.cs-footer-inner { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.cs-footer-left { display: flex; align-items: center; gap: 12px; font-size: var(--t-13); color: var(--fg-subtle); }
.cs-footer-links { display: flex; gap: var(--s-5); }
.cs-footer-links a { font-size: var(--t-13); color: var(--fg-muted); text-decoration: none; white-space: nowrap; }
.cs-footer-links a:hover { color: var(--fg-strong); }
.cs-footer-links a.current { color: var(--mila-accent); }

/* ------- Closing statement ----------------------------------- */
.cs-closer { padding: clamp(56px, 10vw, 120px) 0 clamp(64px, 11vw, 132px); border-top: 1px solid var(--border); }
.cs-bighead {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.08; letter-spacing: var(--tr-tight); color: var(--fg-strong);
}
.cs-bighead span { display: block; }
.bh-line2 { color: var(--mila-accent); font-size: 1.12em; line-height: 1.04; margin-top: 0.12em; }

@media (max-width: 600px) {
  .cs-nav-meta .hide-sm { display: none; }
}

/* ============================================================
   Business explorer — tabbed, with a spinning 3D emblem
   ============================================================ */
.explorer { padding: clamp(20px, 3vw, 36px) 0 clamp(48px, 7vw, 96px); }
.explorer-head { max-width: 640px; }
.explorer-title {
  font-family: var(--font-display); font-size: clamp(26px, 3.4vw, 42px); font-weight: 700;
  line-height: 1.08; letter-spacing: var(--tr-tight); color: var(--fg-strong);
  margin-top: var(--s-4); text-wrap: balance;
}
.explorer-sub {
  margin-top: var(--s-4); font-size: var(--t-16); line-height: var(--lh-loose);
  color: var(--fg-muted); max-width: 48ch; text-wrap: pretty;
}

.biz-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s-8); }
.biz-tab {
  font-family: var(--font-mono); font-size: var(--t-13); letter-spacing: 0.01em;
  padding: 9px 15px; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--bg-raised); color: var(--fg-muted);
  cursor: pointer; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.biz-tab:hover { border-color: var(--border-strong); color: var(--fg-strong); }
.biz-tab[aria-selected="true"] { background: var(--mila-accent); border-color: var(--mila-accent); color: var(--mila-accent-fg); }
.biz-tab:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring-focus); }

.explorer-stage {
  position: relative; margin-top: var(--s-6);
  border: 1px solid var(--border); border-radius: var(--r-2xl);
  background: var(--bg-raised);
  background-image: radial-gradient(var(--ink-200) 1.2px, transparent 1.2px);
  background-size: 22px 22px; background-position: -2px -2px;
  padding: clamp(28px, 4vw, 56px); overflow: hidden; min-height: 488px;
}
.explorer-stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(102deg, var(--bg-raised) 40%, color-mix(in srgb, var(--bg-raised) 66%, transparent) 100%);
}
.stage-object {
  position: absolute; top: clamp(-28px, -1.5vw, -8px); right: clamp(-24px, 1vw, 28px);
  width: clamp(300px, 36vw, 460px); height: clamp(300px, 36vw, 460px);
  pointer-events: none; z-index: 1;
}
.biz-panels { position: relative; z-index: 2; max-width: 540px; }
.biz-panel { display: none; }
.biz-panel.active { display: block; }
@keyframes panelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.biz-panel.switching { animation: panelIn 0.34s var(--ease-out); }

.biz-kicker {
  font-family: var(--font-display); font-size: clamp(23px, 2.6vw, 32px); font-weight: 700;
  line-height: 1.1; letter-spacing: var(--tr-tight); color: var(--fg-strong);
}
.biz-behavior {
  margin-top: var(--s-3); font-size: var(--t-16); line-height: var(--lh-base);
  color: var(--fg-muted); text-wrap: pretty; max-width: 36ch;
}
.reasons { margin-top: var(--s-8); display: flex; flex-direction: column; gap: var(--s-5); }
.reason { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; }
.reason-ix { font-family: var(--font-mono); font-size: var(--t-12); font-weight: 700; color: var(--mila-accent); padding-top: 3px; }
.reason-t { font-size: var(--t-15); font-weight: 600; color: var(--fg-strong); }
.reason-d { margin-top: 3px; font-size: var(--t-14); line-height: var(--lh-base); color: var(--fg-muted); text-wrap: pretty; }

.biz-cites {
  margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px dashed var(--border);
  display: flex; flex-wrap: wrap; gap: var(--s-6) var(--s-8);
}
.biz-cite { display: flex; flex-direction: column; gap: 6px; max-width: 232px; }
.bc-num {
  font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums;
  font-size: clamp(19px, 1.8vw, 24px); line-height: 1; color: var(--mila-accent); letter-spacing: -0.02em;
}
.bc-text { font-size: var(--t-13); line-height: var(--lh-base); color: var(--fg); text-wrap: pretty; }

/* 3D extruded emblem */
.scene3d { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; perspective: 1100px; }
.obj3d { position: relative; width: min(72%, 300px); aspect-ratio: 1; transform-style: preserve-3d; animation: objspin 17s linear infinite; }
.obj-layer { position: absolute; inset: 0; }
.obj-layer svg { width: 100%; height: 100%; display: block; }
.stage-object::after {
  content: ""; position: absolute; left: 50%; bottom: 15%; transform: translateX(-50%);
  width: 54%; height: 38px; border-radius: 50%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--ink-900) 24%, transparent), transparent 70%);
  filter: blur(7px);
}
@keyframes objspin { from { transform: rotateX(-15deg) rotateY(0deg); } to { transform: rotateX(-15deg) rotateY(360deg); } }

@media (max-width: 900px) {
  .explorer-stage { padding: var(--s-6); }
  .explorer-stage::before { display: none; }
  .stage-object { position: static; width: 224px; height: 224px; margin: 0 auto var(--s-5); right: auto; top: auto; }
  .biz-panels { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .obj3d { animation: none; transform: rotateX(-15deg) rotateY(-26deg); }
  .biz-panel.switching { animation: none; }
}