/*
 * /solutions/alternative-data — the SIGNAL.
 *
 *  Buyer: data teams / data engineers at investment firms.  The
 *  page lives the lifecycle of a signal: raw protected web ->
 *  clean, fresh, defensible feed your models can trust.
 *
 *  Acts + axes (per DESIGN.md §3/§5 four-axis rhythm):
 *    1. Hero        — left two-col copy + live feed.  Landmark scale.
 *    2. Decay       — sticky-stage centered topology swap.  Tight scale.
 *    3. Signal not scraping — right-anchored manifesto.  Editorial-large.
 *    4. Defensible  — SOLID PURPLE band, left list.  Corporate scale.
 *    5. Signal types— sticky spotlight atlas, mirrored two-col.  Medium.
 *    6. Closer      — centered teal mesh wrap.  Landmark.
 *
 *  Backgrounds: var(--background) (1,2,3,5) / SOLID #7C4FE8 (4) /
 *  closer teal mesh (6).  Two saturated BG events + dark base.
 *
 *  Cursor: native pointer on every CTA.  SVG portal on the feed,
 *  pact lines, and category rows (in-page widgets).
 */

@import url("../../_ds/fonts.css");
@import url("../../_ds/theme.css");
@import url("../../_shared/chrome.css");
@import url("../../_shared/components.css");
@import url("../../_shared/audience-switcher.css");

/* Cursor language — the spinning-O portal is disabled site-wide
   (chrome.css), so in-page widgets keep a native pointer hand.
   `cursor: none` here would leave the user with NO cursor. */
.back-to-top,
.ad-pact-line,
.ad-cat { cursor: pointer; }

/* ═══════════════════════════════════════════════════════════
   ACT 1 — Hero.  Left copy column + live signal feed.
═══════════════════════════════════════════════════════════ */

.ad-hero {
  position: relative;
  padding: clamp(120px, 16vh, 184px) clamp(24px, 5vw, 72px) clamp(72px, 9vh, 120px);
  background: var(--background);
}

.ad-hero-frame {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(40px, 5vw, 88px);
}

.ad-hero-copy { display: flex; flex-direction: column; }

.ad-hero-kicker { color: var(--text-tertiary); }

.ad-hero-h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--mkt-hero-xl);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  text-wrap: balance;
}
.ad-hero-h1-line { display: block; }
.ad-hero-h1 em {
  font-style: normal;
  color: var(--text-primary);
}

.ad-hero-sub {
  margin: clamp(22px, 3vh, 32px) 0 0;
  max-width: 42ch;
  font-family: var(--font-base);
  font-size: var(--mkt-body);
  line-height: 1.55;
  color: var(--text-secondary);
}

.ad-hero-cta { margin-top: clamp(28px, 4vh, 40px); }

/* ── Live signal feed widget ── */
.ad-feed {
  position: relative;
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  background: transparent;
  padding: clamp(18px, 1.6vw, 24px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
}

.ad-feed-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ad-feed-tag {
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.ad-feed-pulse {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--text-secondary);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--text-secondary) 50%, transparent);
  animation: ad-feed-pulse 2s ease-out infinite;
}
@keyframes ad-feed-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--text-secondary) 45%, transparent); }
  70%  { box-shadow: 0 0 0 9px color-mix(in srgb, var(--text-secondary) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--text-secondary) 0%, transparent); }
}

.ad-feed-viz {
  position: relative;
}
.ad-feed-chart {
  width: 100%;
  height: clamp(120px, 14vw, 168px);
  display: block;
}
.ad-feed-line {
  stroke: #7ADAE6;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
/* Leading dot — a DOM element positioned over the chart (NOT an SVG circle),
   so it stays perfectly round and is never distorted/clipped by the
   preserveAspectRatio="none" stretch at wide viewports. */
.ad-feed-dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--text-primary);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}

.ad-feed-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.ad-feed-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: 14px;
  padding: 9px 0;
  border-top: 1px solid var(--border-subtle);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 460ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 460ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ad-feed-row.is-in { opacity: 1; transform: none; }
.ad-feed-src {
  font-family: var(--font-base);
  font-size: 13.5px;
  color: var(--text-secondary);
}
.ad-feed-val {
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 13px;
  color: var(--text-primary);
}
.ad-feed-fresh {
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* ═══════════════════════════════════════════════════════════
   ACT 2 — The alpha decays at 3am.  Sticky-stage topology swap.
   --ad-decay 0 (breaking) -> 1 (stable feed).
═══════════════════════════════════════════════════════════ */

.ad-decay {
  --ad-decay: 0;
  position: relative;
  min-height: 280vh;
  background: var(--background);
}

.ad-decay-stage {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(32px, 5vh, 64px);
  padding: clamp(96px, 12vh, 140px) clamp(24px, 5vw, 72px) clamp(64px, 8vh, 96px);
  text-align: center;
}

.ad-decay-head { max-width: 720px; }
.ad-decay-h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--mkt-h3);
  line-height: 1.04;
  letter-spacing: -0.026em;
  color: var(--text-primary);
}
.ad-decay-h2 em { font-style: normal; color: var(--text-primary); }
.ad-decay-sub {
  margin: 16px auto 0;
  max-width: 52ch;
  font-family: var(--font-base);
  font-size: var(--mkt-body-sm);
  line-height: 1.55;
  color: var(--text-secondary);
}

.ad-decay-canvas {
  position: relative;
  width: min(960px, 100%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(40px, 7vw, 120px);
}

/* Breaking column — fades + collapses out as decay rises */
.ad-decay-break {
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: calc(1 - var(--ad-decay) * 1.35);
  transform: translateX(calc(var(--ad-decay) * -28px));
  transition: opacity 120ms linear;
}
.ad-decay-break-label,
.ad-decay-stable-label,
.ad-decay-stable-meta {
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.ad-decay-frags { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ad-decay-frag {
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 12.5px;
  text-align: left;
  padding: 9px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: color-mix(in srgb, var(--text-primary) 3%, transparent);
  color: var(--text-secondary);
  /* Blocks stay UPRIGHT and legible at every scroll position.  The
     "breaking" story lives in a small horizontal + vertical nudge
     (set per item via --jx / --jy) that settles to straight as decay
     rises — no rotation, no tilt. */
  transform:
    translate(
      calc(var(--jx, 0px) * (1 - var(--ad-decay))),
      calc(var(--jy, 0px) * (1 - var(--ad-decay)))
    );
  transition: transform 120ms linear;
}
.ad-decay-frag[data-state="blocked"] { color: var(--text-tertiary); }
.ad-decay-frag[data-state="gap"],
.ad-decay-frag[data-state="empty"],
.ad-decay-frag[data-state="stale"] {
  border-style: dashed;
  color: var(--text-tertiary);
}

/* Stable column — resolves in as decay rises */
.ad-decay-stable {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  text-align: left;
  opacity: calc(0.08 + var(--ad-decay) * 0.92);
  transform: translateX(calc((1 - var(--ad-decay)) * 24px));
  transition: opacity 120ms linear;
}
.ad-decay-series {
  list-style: none;
  margin: 0;
  padding: 16px 18px;
  width: 100%;
  display: flex;
  align-items: flex-end;
  gap: 7px;
  height: 120px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: transparent;
}
.ad-decay-tick {
  flex: 1;
  border-radius: 3px;
  background: #7ADAE6;
  /* bars grow to a clean ascending series as decay rises */
  height: calc((26% + var(--t, 0) * 8%) * var(--ad-decay) + 8%);
  opacity: calc(0.25 + var(--ad-decay) * 0.75);
  transition: height 120ms linear, opacity 120ms linear;
}

.ad-decay-arrow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(40px, 7vw, 96px);
  height: 2px;
  background: color-mix(in srgb, var(--text-primary) 50%, transparent);
  transform: translate(-50%, -50%) scaleX(var(--ad-decay));
  transform-origin: left center;
  opacity: var(--ad-decay);
  transition: opacity 120ms linear;
}
.ad-decay-arrow::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid color-mix(in srgb, var(--text-primary) 60%, transparent);
  border-right: 2px solid color-mix(in srgb, var(--text-primary) 60%, transparent);
  transform: translateY(-50%) rotate(45deg);
}

/* ═══════════════════════════════════════════════════════════
   ACT 3 — Signal, not scraping.  Right-anchored manifesto.
═══════════════════════════════════════════════════════════ */

.ad-pact {
  background: var(--background);
  padding: clamp(96px, 14vh, 180px) clamp(24px, 5vw, 72px);
}
.ad-pact-frame {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;     /* right-anchored — rhythm break vs Act 2 */
  text-align: right;
}
.ad-pact-head { max-width: 640px; }
.ad-pact-h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--mkt-h2);
  line-height: 1.0;
  letter-spacing: -0.028em;
  color: var(--text-primary);
  text-wrap: balance;
}
.ad-pact-h2 em { font-style: normal; color: var(--text-primary); }
.ad-pact-sub {
  margin: 16px 0 0;
  font-family: var(--font-base);
  font-size: var(--mkt-body-sm);
  line-height: 1.55;
  color: var(--text-secondary);
}

.ad-pact-list {
  list-style: none;
  margin: clamp(40px, 6vh, 72px) 0 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.ad-pact-line {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "promise num"
    "mech    mech";
  align-items: baseline;
  column-gap: 24px;
  padding: clamp(22px, 3vh, 34px) 0;
  border-top: 1px solid var(--border-subtle);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ad-pact.is-in .ad-pact-line { opacity: 1; transform: none; }
.ad-pact.is-in .ad-pact-line:nth-child(1) { transition-delay: 0ms; }
.ad-pact.is-in .ad-pact-line:nth-child(2) { transition-delay: 110ms; }
.ad-pact.is-in .ad-pact-line:nth-child(3) { transition-delay: 220ms; }
.ad-pact.is-in .ad-pact-line:nth-child(4) { transition-delay: 330ms; }

.ad-pact-line:last-child { border-bottom: 1px solid var(--border-subtle); }

.ad-pact-num {
  grid-area: num;
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
}
.ad-pact-prim {
  display: none; /* primitive name folded into promise via mech reveal */
}
.ad-pact-promise {
  grid-area: promise;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--mkt-h4);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.ad-pact-promise em { font-style: normal; color: var(--text-primary); }
.ad-pact-mech {
  grid-area: mech;
  max-width: 56ch;
  margin-top: 0;
  font-family: var(--font-base);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-secondary);
  /* collapsed by default; opens on hover / focus / .is-open */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 360ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 280ms ease,
              margin-top 360ms ease;
}
.ad-pact-line:hover .ad-pact-mech,
.ad-pact-line:focus-within .ad-pact-mech,
.ad-pact-line.is-open .ad-pact-mech {
  max-height: 160px;
  opacity: 1;
  margin-top: 14px;
}

/* ═══════════════════════════════════════════════════════════
   ACT 4 — Defensible by design.  SOLID PURPLE band.
═══════════════════════════════════════════════════════════ */

.ad-defend-band {
  background: #7C4FE8;
  color: #FFFFFF;
}
.ad-defend {
  padding: clamp(100px, 15vh, 200px) clamp(24px, 5vw, 80px);
}
.ad-defend-frame {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.ad-defend-kicker { color: rgba(255, 255, 255, 0.66); }
.ad-defend-h2 {
  margin: 0;
  max-width: 18ch;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--mkt-h2);
  line-height: 1.02;
  letter-spacing: -0.026em;
  color: #FFFFFF;
  text-wrap: balance;
}
.ad-defend-h2 em { font-style: normal; color: #FFFFFF; }
.ad-defend-sub {
  margin: 18px 0 0;
  max-width: 52ch;
  font-family: var(--font-base);
  font-size: var(--mkt-body);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
}

.ad-defend-list {
  list-style: none;
  margin: clamp(44px, 6vh, 80px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}
.ad-defend-item {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "num name"
    "num line";
  column-gap: 16px;
  padding: clamp(22px, 3vh, 30px) clamp(20px, 2.4vw, 36px) clamp(22px, 3vh, 30px) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity 640ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 640ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.ad-defend-list.is-in .ad-defend-item { opacity: 1; transform: none; }
.ad-defend-num {
  grid-area: num;
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.7);
}
.ad-defend-name {
  grid-area: name;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(18px, 1.7vw, 24px);
  letter-spacing: -0.015em;
  color: #FFFFFF;
}
.ad-defend-line {
  grid-area: line;
  margin-top: 6px;
  font-family: var(--font-base);
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}
.ad-defend-foot {
  margin: clamp(36px, 5vh, 56px) 0 0;
  font-family: var(--font-base);
  font-size: 15px;
  color: rgba(255, 255, 255, 0.86);
}
.ad-defend-foot .link-cta { margin-left: 10px; }

/* Topbar / chrome inversion on the SOLID PURPLE band — white
   chrome on the dark saturated colour.  Hardcoded #FFFFFF /
   #7ADAE6, theme-invariant since the band is #7C4FE8 in both
   audiences.  Mirrors the canonical /solutions/data-teams recipe. */

/* ═══════════════════════════════════════════════════════════
   ACT 5 — Signal types.  Sticky spotlight atlas, mirrored two-col.
═══════════════════════════════════════════════════════════ */

.ad-atlas-stage {
  min-height: 280vh;
  background: var(--background);
}
.ad-atlas {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(96px, 12vh, 140px) clamp(24px, 5vw, 72px) clamp(64px, 8vh, 96px);
  max-width: 1240px;
  margin: 0 auto;
}
.ad-atlas-head { margin-bottom: clamp(32px, 5vh, 56px); }
.ad-atlas-h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--mkt-h3);
  line-height: 1.02;
  letter-spacing: -0.026em;
  color: var(--text-primary);
}
.ad-atlas-h2 em { font-style: normal; color: var(--text-primary); }

.ad-atlas-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

.ad-atlas-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.ad-cat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(16px, 2.2vh, 24px) 0;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-tertiary);
  transition: color 240ms ease, padding-left 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ad-cat:last-child { border-bottom: 1px solid var(--border-subtle); }
.ad-cat-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--mkt-h4);
  letter-spacing: -0.02em;
  line-height: 1.04;
}
.ad-cat-prim {
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ad-cat.is-active {
  color: var(--text-primary);
  padding-left: clamp(10px, 1.4vw, 22px);
}
.ad-cat.is-active .ad-cat-prim { color: var(--text-secondary); }

.ad-atlas-preview {
  position: relative;
  display: grid;
  min-height: clamp(220px, 30vh, 300px);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  background: transparent;
  padding: clamp(28px, 3vw, 44px);
}
.ad-cat-panel {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 380ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ad-cat-panel[data-active="true"] {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.ad-cat-code {
  align-self: flex-start;
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: var(--mkt-h4);
  letter-spacing: -0.01em;
  color: #7ADAE6;
  padding: 8px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: color-mix(in srgb, var(--text-primary) 3%, transparent);
}
.ad-cat-desc {
  margin: 0;
  max-width: 38ch;
  font-family: var(--font-base);
  font-size: var(--mkt-body-sm);
  line-height: 1.55;
  color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════
   ACT 6 — Closer.  Back on dark.  Centered editorial, no
   saturated band (the mesh closer is a special-case, not the
   default).  Mirrors /reliability rl-end treatment.
═══════════════════════════════════════════════════════════ */

.ad-end {
  position: relative;
  padding: clamp(140px, 20vh, 240px) clamp(20px, 5vw, 80px) clamp(120px, 14vh, 200px);
  display: flex;
  justify-content: center;
  text-align: center;
  background: var(--background);
}
.ad-end-frame {
  width: 100%;
  max-width: 1080px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(22px, 3vh, 38px);
}
.ad-end-kicker {
  margin: 0;
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.ad-end-h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--mkt-hero);
  line-height: 0.94;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  text-wrap: balance;
}
.ad-end-h2 em { font-style: normal; font-weight: 500; color: var(--text-primary); }
.ad-end-sub {
  margin: 0;
  max-width: 52ch;
  font-family: var(--font-base);
  font-size: var(--mkt-body);
  line-height: 1.55;
  color: var(--text-secondary);
}
.ad-end-cta { margin-top: clamp(20px, 3vh, 36px); }

/* Closer reveal stagger */
.ad-end-frame[data-ad-end] > * {
  opacity: 0;
  transform: translateY(20px);
  filter: blur(8px);
  will-change: transform;
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 700ms cubic-bezier(0.22, 1, 0.36, 1),
              filter 600ms ease;
}
.ad-end-frame[data-ad-end].is-in > * { opacity: 1; transform: none; filter: blur(0); }
.ad-end-frame[data-ad-end].is-in > *:nth-child(1) { transition-delay: 0ms; }
.ad-end-frame[data-ad-end].is-in > *:nth-child(2) { transition-delay: 120ms; }
.ad-end-frame[data-ad-end].is-in > *:nth-child(3) { transition-delay: 280ms; }
.ad-end-frame[data-ad-end].is-in > *:nth-child(4) { transition-delay: 420ms; }

/* ═══════════════════════════════════════════════════════════
   Wide-desktop tiers
═══════════════════════════════════════════════════════════ */

@media (min-width: 1600px) {
  .ad-hero-frame { max-width: 1480px; }
  
  .ad-atlas { max-width: 1400px; }
}

@media (min-width: 1920px) {
  
  .ad-feed-src { font-size: 14.5px; }
  .ad-feed-val { font-size: 14px; }
  .ad-feed-tag, .ad-feed-fresh { font-size: 12px; }
  .ad-decay-frag { font-size: 13.5px; }
  .ad-pact-mech { font-size: 15.5px; }
  .ad-cat-prim { font-size: 12px; }
}

@media (min-width: 2400px) {
  .ad-hero-frame { max-width: 1720px; }
  
  .ad-atlas { max-width: 1640px; }
}

/* ═══════════════════════════════════════════════════════════
   Mobile + narrow fallback (DESIGN.md §11)
═══════════════════════════════════════════════════════════ */

@media (max-width: 1040px) {
  .ad-hero-frame { grid-template-columns: 1fr; gap: clamp(40px, 6vh, 64px); }
  .ad-atlas-body { grid-template-columns: 1fr; gap: clamp(28px, 5vh, 48px); }
  .ad-defend-list { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  /* Act 2 — sticky stage off; render the resolved (stable) state
     in natural flow.  IO/time-driven motion replaces scroll. */
  .ad-decay { min-height: auto; }
  .ad-decay-stage {
    position: static;
    min-height: auto;
    padding: clamp(80px, 12vh, 120px) clamp(20px, 5vw, 28px) clamp(64px, 9vh, 88px);
  }
  .ad-decay-canvas { grid-template-columns: 1fr; gap: 28px; }
  .ad-decay-arrow { display: none; }
  .ad-decay.is-resolved .ad-decay-break { opacity: 0.32; }

  /* Act 5 — sticky atlas off; flat stack, each panel visible. */
  .ad-atlas-stage { min-height: auto; }
  .ad-atlas {
    position: static;
    min-height: auto;
    padding: clamp(80px, 12vh, 120px) clamp(20px, 5vw, 28px) clamp(64px, 9vh, 88px);
  }
  .ad-atlas-body { display: flex; flex-direction: column; }
  .ad-cat {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 560ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .ad-cat.is-in { opacity: 1; transform: none; }
  .ad-atlas-preview {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-height: auto;
  }
  .ad-cat-panel {
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .ad-cat-panel[data-active="false"] { opacity: 1; }
}

@media (max-width: 720px) {
  .ad-hero { padding-top: clamp(104px, 14vh, 132px); }
  
  .ad-pact-frame { align-items: flex-start; text-align: left; }
  .ad-feed-row { grid-template-columns: 1fr auto; }
  .ad-feed-fresh { display: none; }
  
}

@media (prefers-reduced-motion: reduce) {
  .ad-feed-pulse { animation: none; }
  .ad-feed-row,
  .ad-pact-line,
  .ad-defend-item,
  .ad-cat,
  .ad-end-frame[data-ad-end] > * {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}