/*
 * Shared report-deck visual system.
 *
 * Loaded by the report frame for free decks and paid teaser decks. Report
 * content keeps its own subject-specific components, but the deck shell,
 * controls, typography, surfaces, and responsive behavior come from here.
 */

:root {
  --report-gold: #f5c542;
  --report-gold-2: #f7d56a;
  --report-blue: #2a8bff;
  --report-teal: #12877a;
  --report-amber: #c47618;
  --report-red: #b8323a;
  --report-paper: #f7fbff;
  --report-ink: #0b1829;
  --report-navy: #06142a;
  --report-navy-3: #0f2942;
}

html,
body {
  background:
    radial-gradient(circle at 18% 18%, rgba(42, 139, 255, .18), transparent 32%),
    radial-gradient(circle at 82% 20%, rgba(245, 197, 66, .12), transparent 28%),
    linear-gradient(135deg, #06142a, #0f2942) !important;
  color: #fff !important;
}

.deck {
  container-type: size;
  container-name: report-deck;
  background: var(--report-navy) !important;
}

.slide {
  background:
    linear-gradient(135deg, #06142a 0%, #0f2942 62%, #071425 100%) !important;
  color: #fff !important;
}

.slide:not(.active) {
  display: none !important;
  visibility: hidden !important;
}

.slide:not(.active) .slide-footer {
  display: none !important;
}

.slide.light {
  background:
    linear-gradient(135deg, #06142a 0%, #0f2942 62%, #071425 100%) !important;
  color: #fff !important;
}

.slide.hero-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .24;
  background-image:
    linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px);
  background-size: 48px 48px;
}

.slide-body {
  --deck-content-scale: 1;
  --deck-content-y: 0px;
  width: 100% !important;
  max-width: 1680px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: clamp(78px, 9cqh, 128px) !important;
  padding-right: clamp(48px, 7cqi, 120px) !important;
  padding-bottom: clamp(88px, 10cqh, 132px) !important;
  padding-left: clamp(48px, 5cqi, 96px) !important;
  transform: translateY(var(--deck-content-y)) scale(var(--deck-content-scale)) !important;
  transform-origin: center center;
}

/*
 * The opener reserves the right lane for the portrait, so its copy starts
 * on the MAI-aligned left margin. Later slides have no portrait lane and
 * should read as centered compositions with balanced visual weight.
 */
.slide:first-of-type .slide-body {
  transform-origin: left center !important;
}

.slide:not(:first-of-type) .slide-body {
  padding-left: clamp(48px, 7cqi, 120px) !important;
  padding-right: clamp(48px, 7cqi, 120px) !important;
  transform-origin: center center !important;
}

.slide:not(:first-of-type) .slide-body > :not(.kicker) {
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.slide:not(:first-of-type) .slide-body > .kicker {
  align-self: flex-start !important;
  text-align: left !important;
}

.slide:not(:first-of-type) .slide-body > h1,
.slide:not(:first-of-type) .slide-body > h2,
.slide:not(:first-of-type) .slide-body > p.subhead {
  align-self: flex-start !important;
  text-align: left !important;
}

.kicker,
.slide .eyebrow,
.slide .label,
.slide .lbl,
.slide .tag,
.buy-kicker {
  color: var(--report-gold) !important;
  font-family: "Space Grotesk", sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
}

.kicker {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  font-size: 11px !important;
  line-height: 1 !important;
}

.kicker::before {
  content: "" !important;
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--report-gold);
}

.slide h1,
.slide h2,
.slide h3,
.slide .deck-h1,
.slide .deck-h2,
.slide .buy-title,
.slide .buy-panel h2 {
  color: #fff !important;
  font-family: Sora, sans-serif !important;
  letter-spacing: 0 !important;
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
}

.slide h1,
.slide .deck-h1,
.slide .buy-title {
  max-width: 1060px;
  font-size: clamp(40px, 5.8cqi, 82px) !important;
  line-height: .98 !important;
  font-weight: 900 !important;
}

.slide:first-of-type .report-cover-title {
  max-width: min(860px, 63cqi) !important;
  font-size: var(--report-cover-size, clamp(44px, 5.05cqi, 70px)) !important;
  line-height: 1.01 !important;
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
}

.slide:first-of-type .report-cover-nowrap {
  white-space: nowrap;
}

.slide:first-of-type .report-cover-title.report-cover-title-short {
  max-width: min(980px, 72cqi) !important;
}

/*
 * Keep cover backgrounds quiet. The older decks use oversized anchor words
 * such as "MAI", "WIPE", "$20", and "LOCAL". They compete with the actual
 * headline and make otherwise related decks look unrelated.
 */
.slide .hero-anchor,
.slide .path-anchor {
  display: none !important;
  visibility: hidden !important;
}

.slide h2,
.slide .deck-h2,
.slide .buy-panel h2 {
  max-width: 1180px;
  font-size: clamp(30px, 4.1cqi, 58px) !important;
  line-height: 1.04 !important;
  font-weight: 850 !important;
}

.slide h3 {
  font-size: clamp(19px, 2cqi, 28px) !important;
  line-height: 1.18 !important;
  font-weight: 800 !important;
}

.slide h1 em,
.slide h2 em,
.slide h3 em,
.slide .buy-title span {
  color: var(--report-gold) !important;
  font-style: normal;
}

.slide p,
.slide li,
.slide .lead,
.slide .sub,
.slide .subhead,
.slide .buy-lead,
.slide .buy-panel p {
  font-family: Inter, sans-serif !important;
}

.slide .lead,
.slide .sub,
.slide .subhead,
.slide .buy-lead {
  max-width: 980px;
  color: rgba(255,255,255,.82) !important;
  font-size: clamp(16px, 1.55cqi, 23px) !important;
  line-height: 1.52 !important;
  font-weight: 500 !important;
}

.slide .hero-copy {
  max-width: min(980px, 70vw) !important;
  z-index: 2;
}

.slide:first-of-type .hero-copy,
.slide:first-of-type .buy-copy {
  max-width: min(900px, 66cqi) !important;
}

.slide:first-of-type .hero-grid {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px) !important;
}

.slide:first-of-type .hero-grid > :first-child {
  min-width: 0;
  max-width: min(900px, 66cqi) !important;
}

.slide .hero-grid {
  align-items: center !important;
}

.slide .hero-portrait-anchor,
.slide .portrait {
  z-index: 3;
}

.slide .hero-portrait-shell,
.slide .portrait img {
  border-color: rgba(245,197,66,.72) !important;
  box-shadow: 0 22px 60px rgba(4,13,27,.34) !important;
}

.slide .hero-portrait-name,
.slide .portrait strong {
  color: #fff !important;
  font-family: "Space Grotesk", sans-serif !important;
  letter-spacing: .16em !important;
  text-transform: uppercase;
}

.slide .hero-portrait-role,
.slide .portrait span {
  color: var(--report-gold) !important;
  font-family: "Space Grotesk", sans-serif !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
}

.slide .hero-actions,
.slide .actions,
.slide .cta-row,
.slide .cta-stack {
  display: flex !important;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

.slide .btn,
.slide .cta,
.slide .hud-btn,
.slide .hud-back {
  font-family: "Space Grotesk", sans-serif !important;
  text-decoration: none !important;
}

.slide .btn,
.slide .cta {
  min-height: 46px;
  padding: 12px 20px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
}

.slide .btn.primary,
.slide .btn-primary,
.slide .cta.primary,
.slide .hud-btn.primary {
  border: 0 !important;
  background: linear-gradient(135deg, var(--report-gold-2), var(--report-gold)) !important;
  color: #10253b !important;
  box-shadow: 0 16px 38px rgba(245,197,66,.24) !important;
}

.slide .btn.ghost,
.slide .btn-secondary,
.slide .cta.ghost {
  border: 1px solid rgba(255,255,255,.38) !important;
  background: rgba(6,20,42,.48) !important;
  color: #fff !important;
}

.slide .btn.primary:hover,
.slide .btn-primary:hover,
.slide .cta.primary:hover,
.slide .hud-btn.primary:hover {
  background: linear-gradient(135deg, #ffe08a, var(--report-gold)) !important;
  color: #10253b !important;
}

.slide .card,
.slide .panel,
.slide .tile,
.slide .decision,
.slide .week,
.slide .stage,
.slide .stop,
.slide .layer,
.slide .step,
.slide .snap,
.slide .term,
.slide .data-card,
.slide .tc-card,
.slide .cta-card,
.slide .ops-card,
.slide .risk-panel,
.slide .platform,
.slide .source-list > div,
.slide .receive-item,
.slide .buy-panel {
  border: 1px solid rgba(255,255,255,.13) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.055) !important;
  box-shadow: none !important;
}

.slide .card,
.slide .panel,
.slide .tile,
.slide .decision,
.slide .week,
.slide .stage,
.slide .stop,
.slide .layer,
.slide .step,
.slide .snap,
.slide .term,
.slide .data-card,
.slide .tc-card,
.slide .cta-card,
.slide .ops-card,
.slide .risk-panel,
.slide .platform,
.slide .source-list > div {
  padding: 20px !important;
}

.slide .card strong,
.slide .card h3,
.slide .panel strong,
.slide .panel h3,
.slide .tile strong,
.slide .decision b,
.slide .week b,
.slide .stage b,
.slide .stop b,
.slide .layer strong,
.slide .platform h3,
.slide .buy-panel h2 {
  color: #fff !important;
  font-family: Sora, sans-serif !important;
}

.slide .card p,
.slide .panel p,
.slide .tile p,
.slide .decision span,
.slide .week p,
.slide .stage span,
.slide .stop span,
.slide .layer span,
.slide .platform li,
.slide .term span,
.slide .buy-panel p {
  color: rgba(255,255,255,.74) !important;
  font: 500 14px/1.55 Inter, sans-serif !important;
}

/*
 * Timeline cards are content surfaces too. Their legacy white background
 * otherwise collides with the shared white heading rule and produces
 * white-on-white headings on lineage slides.
 */
.slide .event {
  border: 1px solid rgba(255,255,255,.13) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.055) !important;
  box-shadow: none !important;
}

.slide .event h3 {
  color: #fff !important;
}

.slide .event p {
  color: rgba(248,252,255,.74) !important;
}

.slide .event time {
  color: var(--report-teal) !important;
}

.slide .tc-card p {
  color: rgba(248,252,255,.74) !important;
}

.slide .source-list {
  color: rgba(248,252,255,.72) !important;
  font-size: clamp(11px, 1cqi, 13.5px) !important;
  line-height: 1.38 !important;
  gap: 6px !important;
}

.slide .source-list li b {
  color: #fff !important;
}

.slide .source-list a {
  color: #7be0d1 !important;
}

.slide .decision-row {
  display: grid !important;
  grid-template-columns: 1.05fr .9fr !important;
  gap: 20px !important;
  align-items: center;
}

.slide .decision-box {
  border: 1px solid rgba(245,197,66,.3) !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #071f3a, #0f2942) !important;
  color: #fff !important;
}

.slide table,
.slide .matrix,
.slide .score,
.slide .compare-table,
.slide .report-table {
  width: 100% !important;
  border-collapse: collapse !important;
  border: 1px solid rgba(17,36,58,.14) !important;
  border-radius: 14px !important;
  overflow: hidden;
  background: #fff !important;
  color: var(--report-ink) !important;
}

.slide table th,
.slide table td,
.slide .matrix th,
.slide .matrix td,
.slide .score th,
.slide .score td,
.slide .compare-table th,
.slide .compare-table td,
.slide .report-table th,
.slide .report-table td {
  padding: 13px 14px !important;
  border-bottom: 1px solid rgba(17,36,58,.12) !important;
  color: var(--report-ink) !important;
  text-align: left;
  vertical-align: top;
  font: 600 13px/1.45 Inter, sans-serif !important;
}

.slide table th,
.slide .matrix th,
.slide .score th,
.slide .compare-table th,
.slide .report-table th {
  background: #e9f0f8 !important;
  color: #10253b !important;
  font: 800 11px/1.25 "Space Grotesk", sans-serif !important;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.slide pre,
.slide code,
.slide .code-block {
  border-radius: 12px !important;
  background: #071425 !important;
  color: #f7fbff !important;
}

.slide .source,
.slide .slide-footer,
.slide .slide-footer .pill {
  color: rgba(248,252,255,.72) !important;
  font-family: "Space Grotesk", sans-serif !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
}

.slide .slide-footer .pill,
.slide .source {
  border-color: rgba(255,255,255,.14) !important;
}

.slide .slide-footer .pill {
  white-space: nowrap;
}

/*
 * One watermark treatment across free decks and paid teasers. Some older
 * decks render the watermark as visible text, some use all caps, and some
 * use a different opacity. Keep the required attribution, but make it
 * quiet and consistent.
 */
.slide .watermark {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  opacity: .06 !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  transform: none !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='720' height='480' viewBox='0 0 720 480'><g transform='translate(360 240) rotate(-22)'><text x='0' y='0' text-anchor='middle' fill='%23f5c542' font-family='Nunito,Segoe UI,Arial,sans-serif' font-size='32' font-weight='800' letter-spacing='5'>Chander%20Dhall%20Methodworks%2C%20LLC</text></g></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: min(58vw, 760px) auto !important;
  mix-blend-mode: screen !important;
  pointer-events: none !important;
}

.hud,
.hud-top {
  z-index: 40 !important;
}

.hud {
  left: 18px !important;
  right: 18px !important;
}

.hud-top {
  left: 18px !important;
  right: 18px !important;
}

.hud > .hud-top {
  left: 0 !important;
  right: 0 !important;
}

.hud .hud-btn,
.hud .hud-back {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 36px !important;
  height: 36px !important;
  padding: 0 13px !important;
  font: 800 11px/1 "Space Grotesk" !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.hud > .hud-back {
  position: static !important;
  top: 0 !important;
  left: 0 !important;
  order: 0 !important;
  flex: 0 0 auto !important;
  border-radius: 999px !important;
}

.hud > .hud-btn {
  order: 2 !important;
}

.hud > .hud-back + .hud-btn {
  margin-left: auto !important;
}

.hud-btn,
.hud-back,
.overview-close,
.nav-ctrl,
.arrow {
  border: 1px solid rgba(80,211,214,.62) !important;
  background: linear-gradient(180deg, rgba(32,118,133,.98), rgba(8,65,88,.98)) !important;
  color: #f3feff !important;
  box-shadow: 0 12px 28px rgba(6,20,42,.3) !important;
  border-radius: 999px !important;
}

.hud-btn.primary {
  background: linear-gradient(135deg, var(--report-gold-2), var(--report-gold)) !important;
  color: #10253b !important;
}

.hud .hud-btn.primary,
.hud .hud-btn.hud-buy,
.hud .hud-btn[data-paid-report],
.hud .hud-buy {
  min-height: 36px !important;
  height: 36px !important;
  background: linear-gradient(135deg, var(--report-gold-2), var(--report-gold)) !important;
  color: #10253b !important;
  border: 0 !important;
  box-shadow: 0 12px 28px rgba(245,197,66,.22) !important;
}

.slide .btn,
.slide .cta {
  min-height: 46px !important;
  height: 46px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 20px !important;
  line-height: 1 !important;
}

.slide:not(:first-of-type) h1.deck-h1,
.slide:not(:first-of-type) h1:not(.report-cover-title),
.slide:not(:first-of-type) .buy-title {
  max-width: 1060px !important;
  font-size: clamp(40px, 5.8cqi, 82px) !important;
  line-height: .98 !important;
}

/*
 * Paid teaser portraits use the approved MAI visual lane. The source decks
 * currently use three different markup patterns, so normalize the rendered
 * result here instead of duplicating portrait CSS in each deck.
 */
@media (min-width: 981px) {
  .report-deck-paid-teaser .slide:first-of-type .slide-body {
    --deck-content-scale: 1 !important;
    --deck-content-y: 0px !important;
  }

  .report-deck-paid-teaser .slide:first-of-type .hero-portrait-anchor,
  .report-deck-paid-teaser .slide:first-of-type .portrait {
    position: absolute !important;
    top: clamp(96px, 16cqh, 140px) !important;
    right: calc(clamp(72px, 7cqi, 112px) - (100cqi - 100%) / 2) !important;
    bottom: 54px !important;
    width: clamp(256px, 20cqi, 300px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    z-index: 4 !important;
    pointer-events: none !important;
  }

  .report-deck-paid-teaser .slide:first-of-type .hero-portrait-shell {
    width: clamp(210px, 16.4cqi, 248px) !important;
    height: clamp(210px, 16.4cqi, 248px) !important;
    flex: 0 0 auto !important;
    padding: 7px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(245,197,66,.62)) !important;
    box-shadow: 0 22px 60px rgba(4,13,27,.34) !important;
  }

  .report-deck-paid-teaser .slide:first-of-type .portrait img {
    width: clamp(210px, 16.4cqi, 248px) !important;
    height: clamp(210px, 16.4cqi, 248px) !important;
    flex: 0 0 auto !important;
    border: 7px solid rgba(255,255,255,.94) !important;
    box-shadow: 0 22px 60px rgba(4,13,27,.34) !important;
    background: #10253b !important;
  }

  .report-deck-paid-teaser .slide:first-of-type .hero-portrait-caption,
  .report-deck-paid-teaser .slide:first-of-type .portrait strong,
  .report-deck-paid-teaser .slide:first-of-type .portrait span {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
  }

  .report-deck-paid-teaser .slide:first-of-type .hero-portrait-name,
  .report-deck-paid-teaser .slide:first-of-type .portrait strong {
    color: #fff !important;
    font: 800 12px/1 "Space Grotesk" !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
  }

  .report-deck-paid-teaser .slide:first-of-type .hero-portrait-role,
  .report-deck-paid-teaser .slide:first-of-type .portrait span {
    color: var(--report-gold) !important;
    font: 800 10px/1 "Space Grotesk" !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
  }
}

.progress-bar,
.progress,
.progress-bar span,
.progress-bar div,
.progress span {
  background: linear-gradient(90deg, var(--report-gold), var(--report-blue)) !important;
}

.progress-rail,
.dotrail {
  z-index: 40 !important;
}

.progress-dot.active,
.dotrail button.active {
  background: var(--report-gold) !important;
  border-color: var(--report-gold) !important;
}

.counter,
.hint,
.kb-hint {
  color: rgba(255,255,255,.72) !important;
  font-family: "Space Grotesk", sans-serif !important;
}

.counter {
  position: fixed !important;
  top: auto !important;
  right: 22px !important;
  bottom: 18px !important;
  left: auto !important;
  z-index: 63 !important;
  margin-left: 0 !important;
}

.hint,
.kb-hint {
  position: fixed !important;
  top: auto !important;
  right: auto !important;
  bottom: 18px !important;
  left: 50% !important;
  z-index: 58 !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  max-width: calc(100% - 24px);
  white-space: nowrap;
}

.slide .surface,
.slide .surface h1,
.slide .surface h2,
.slide .surface h3,
.slide .surface h4,
.slide .surface p,
.slide .surface li,
.slide .surface strong,
.slide .surface b {
  color: var(--report-ink) !important;
}

.slide .surface p,
.slide .surface li {
  color: #33465c !important;
}

.overview {
  background: rgba(3,10,20,.95) !important;
}

.overview-grid .thumb,
.overview-grid button {
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.06) !important;
  color: #fff !important;
}

.overview-grid .thumb-num,
.overview-grid button b {
  color: var(--report-gold) !important;
}

.buy-slide .buy-panel {
  border-color: rgba(245,197,66,.38) !important;
  background: linear-gradient(145deg, rgba(15,41,66,.94), rgba(6,20,42,.9)) !important;
}

/*
 * Frontier AI deck corrections.
 *
 * The evidence slide needs a full-width evidence row instead of nesting
 * three cards inside the copy column. The comparison slide keeps the bars
 * visual and renders narrow biological values as a readable overlay.
 */
.metric-evidence-slide .slide-body {
  justify-content: flex-start !important;
  padding-top: clamp(64px, 8cqh, 104px) !important;
  padding-bottom: clamp(78px, 9cqh, 116px) !important;
}

.metric-evidence-slide .bigstat {
  grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr) !important;
  align-items: start !important;
  gap: clamp(28px, 3cqi, 48px) !important;
  margin-bottom: clamp(16px, 2cqh, 26px) !important;
}

.metric-evidence-slide .bigstat .num {
  font-size: clamp(112px, 13cqi, 180px) !important;
}

.metric-evidence-slide .bigstat .copy {
  min-width: 0 !important;
}

.metric-evidence-slide .bigstat .copy .deck-h2 {
  max-width: 700px !important;
  font-size: clamp(32px, 3.25cqi, 48px) !important;
  line-height: 1.04 !important;
}

.metric-evidence-slide .slide-body > .snapshot {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(12px, 1.4cqi, 18px) !important;
  margin-top: 0 !important;
}

.metric-evidence-slide .slide-body > .snapshot .snap {
  min-width: 0 !important;
  padding: clamp(16px, 1.6cqi, 22px) !important;
}

.metric-evidence-slide .slide-body > .snapshot .snap strong.lbl {
  font-size: clamp(18px, 1.7cqi, 26px) !important;
}

.metric-evidence-slide .slide-body > .snapshot .snap p {
  font-size: clamp(11px, 1cqi, 13px) !important;
  line-height: 1.38 !important;
}

.metric-structure-slide .dollar-panel:first-child .bar-track {
  position: relative !important;
}

.metric-structure-slide .dollar-panel:first-child .bar {
  color: transparent !important;
  font-size: 0 !important;
  padding: 0 !important;
  min-width: 5px !important;
}

.metric-structure-slide .dollar-panel:first-child .bar-track::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 10px;
  color: #10253b;
  font: 800 11px/1 "Space Grotesk";
  letter-spacing: .02em;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 0 4px rgba(238,242,246,.95);
}

.metric-structure-slide .slide-body {
  --deck-content-y: -4cqh !important;
}

/*
 * The Qwen purchase panel has one extra benefit line compared with the
 * standard paid teasers. Keep its three final actions on one deliberate row
 * in the short report iframe.
 */
@media (min-width: 981px) and (max-height: 900px) {
  .qwen-buy-slide .buy-panel {
    padding: 20px !important;
  }

  .qwen-buy-slide .buy-panel h2 {
    font-size: clamp(26px, 2.45cqi, 38px) !important;
    margin-bottom: 10px !important;
  }

  .qwen-buy-slide .buy-panel p {
    font-size: 13px !important;
    line-height: 1.4 !important;
    margin-bottom: 14px !important;
  }

  .qwen-buy-slide .buy-benefits {
    gap: 7px !important;
    margin-bottom: 16px !important;
  }

  .qwen-buy-slide .buy-benefits li {
    font-size: 13px !important;
    line-height: 1.3 !important;
  }

  .qwen-buy-slide .buy-panel .hero-actions {
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin-top: 0 !important;
  }

  .qwen-buy-slide .buy-panel .hero-actions .btn {
    min-width: 0 !important;
    min-height: 44px !important;
    height: 44px !important;
    padding-left: 13px !important;
    padding-right: 13px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }
}

@media (min-width: 981px) and (max-height: 820px) {
  .slide:not(:first-of-type) .slide-body {
    --deck-content-scale: .9;
    --deck-content-y: 2px;
    padding-left: 80px !important;
    padding-right: 80px !important;
    transform-origin: center center !important;
  }

  .slide:first-of-type .slide-body {
    padding-left: 72px !important;
    transform-origin: left center !important;
  }

  .slide:first-of-type .report-cover-title {
    line-height: 1.02 !important;
  }

  .hero-portrait-shell,
  .portrait img {
    max-width: 210px !important;
  }

  /*
   * The short desktop tier caps the portrait width. Keep the shell height
   * capped too, otherwise the container-query height remains larger and the
   * circular portrait becomes a vertical oval.
   */
  html.report-deck-paid-teaser .slide:first-of-type .hero-portrait-shell {
    width: clamp(180px, 16.4cqi, 210px) !important;
    height: clamp(180px, 16.4cqi, 210px) !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
  }

  /*
   * MAI's compact opener lane is 14% from the top and 8% from the bottom.
   * Keep paid openers on that same vertical track so the portrait does not
   * drift in a short desktop frame.
   */
  html.report-deck-paid-teaser .slide:first-of-type .hero-portrait-anchor,
  html.report-deck-paid-teaser .slide:first-of-type .portrait {
    top: 14cqh !important;
    bottom: 8cqh !important;
  }

  html.report-deck-paid-teaser .slide:first-of-type .hero-portrait-caption {
    gap: 0 !important;
  }

  html.report-deck-paid-teaser .slide:first-of-type .hero-portrait-role,
  html.report-deck-paid-teaser .slide:first-of-type .portrait span {
    line-height: 1.1 !important;
  }

  html.report-deck-paid-teaser .slide:first-of-type .hero-portrait-img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
  }
}

/*
 * The report frame reduces the deck viewport by the site's navigation bar.
 * At laptop-sized iframe heights, use the compact density tier after all
 * shared base rules so content-heavy slides do not hide under the HUD.
 */
@media (min-width: 981px) and (max-height: 900px) {
  .slide-body {
    padding-top: clamp(48px, 7cqh, 68px) !important;
    padding-bottom: clamp(54px, 8cqh, 78px) !important;
  }

  .slide:not(:first-of-type) .slide-body > :not(.kicker) {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .slide:not(:first-of-type) .slide-body > p.subhead {
    max-width: 880px !important;
    text-align: left !important;
  }

  .slide h1,
  .slide .deck-h1 {
    font-size: clamp(34px, 4.5cqi, 58px) !important;
    line-height: 1.03 !important;
  }

  .slide h2,
  .slide .deck-h2 {
    font-size: clamp(28px, 3.2cqi, 44px) !important;
    line-height: 1.06 !important;
  }

  .slide .lead {
    font-size: clamp(15px, 1.35cqi, 20px) !important;
    line-height: 1.42 !important;
  }

  .slide .subhead {
    font-size: clamp(13px, 1.1cqi, 16px) !important;
    line-height: 1.42 !important;
  }

  .slide .snap,
  .slide .tc-card,
  .slide .event,
  .slide .cta-card {
    padding: clamp(14px, 1.7cqi, 18px) !important;
  }

  .slide .snap p,
  .slide .event p {
    font-size: clamp(11px, .95cqi, 13px) !important;
    line-height: 1.38 !important;
  }

  .slide .event h3 {
    font-size: clamp(17px, 1.55cqi, 22px) !important;
  }

  .slide .dollar-row {
    padding: 10px 14px !important;
  }

  .slide .dollar-row .name {
    font-size: 12px !important;
  }

  .slide .dollar-row .name small {
    font-size: 10px !important;
  }

  .slide .dollar-row .bar-track {
    height: 22px !important;
  }

  .slide .dollar-row .money {
    font-size: 14px !important;
  }

  .slide .assumption {
    margin-top: 10px !important;
    font-size: 11px !important;
  }
}

@media (min-width: 1800px) and (min-height: 900px) {
  .slide-body {
    --deck-content-scale: 1.08;
  }
}

@media (min-width: 2400px) and (min-height: 1200px) {
  .slide-body {
    --deck-content-scale: 1.18;
    max-width: 1900px !important;
  }
}

@media (min-width: 3200px) and (min-height: 1600px) {
  .slide-body {
    --deck-content-scale: 1.28;
    max-width: 2100px !important;
  }
}

@media (min-width: 4200px) and (min-height: 2200px) {
  .slide-body {
    --deck-content-scale: 1.35;
    max-width: 2400px !important;
  }
}

@media (max-width: 980px) {
  html,
  body {
    overflow: auto !important;
  }

  .slide-body {
    padding: 82px 24px 76px !important;
    transform: none !important;
  }

  .slide .decision-row,
  .slide .two,
  .slide .cards,
  .slide .cards.four,
  .slide .terms,
  .slide .snapshot,
  .slide .grid9,
  .slide .platforms,
  .slide .weeks,
  .slide .decision-grid,
  .slide .pipeline,
  .slide .timeline {
    grid-template-columns: 1fr !important;
  }

  .hero-copy {
    max-width: 100% !important;
  }

  .hero-portrait-anchor,
  .portrait {
    position: relative !important;
    inset: auto !important;
    width: 140px !important;
    margin: 18px 0 !important;
    align-self: flex-start !important;
  }

  .hero-portrait-shell,
  .portrait img {
    width: 112px !important;
  }

  .slide table,
  .slide .matrix,
  .slide .score,
  .slide .compare-table,
  .slide .report-table {
    display: block;
    overflow-x: auto;
  }

  .progress-rail,
  .dotrail,
  .nav-ctrl,
  .arrow,
  .counter,
  .hint,
  .kb-hint {
    display: none !important;
  }

  .hint,
  .kb-hint {
    bottom: 14px !important;
  }
}

@media print {
  .hud,
  .progress,
  .progress-bar,
  .progress-rail,
  .dotrail,
  .nav-ctrl,
  .arrow,
  .counter,
  .hint,
  .kb-hint,
  .overview {
    display: none !important;
  }

  .deck {
    position: static !important;
  }

  .slide {
    display: flex !important;
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    break-after: page;
    page-break-after: always;
  }
}

@media (max-width: 720px) {
  .hud .hud-btn,
  .hud .hud-back {
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 11px !important;
    font-size: 10px !important;
  }

  .slide .btn,
  .slide .cta {
    min-height: 44px !important;
    height: 44px !important;
  }

  .slide .slide-footer .pill {
    white-space: normal;
    line-height: 1.3 !important;
  }
}

/*
 * Standard desktop paid openers use the MAI portrait lane. The short iframe
 * tier above intentionally stays at the 210px reference size. At 1920px
 * desktop, MAI's scaled portrait lane resolves to a 352.5px shell centered
 * around x=1581, so paid teasers use the same centerline and visual weight.
 */
@media (min-width: 981px) and (min-height: 821px) {
  html.report-deck-paid-teaser .slide:first-of-type .hero-portrait-anchor,
  html.report-deck-paid-teaser .slide:first-of-type .portrait {
    top: clamp(140px, 13cqh, 200px) !important;
    right: calc(clamp(88px, 7.8cqi, 150px) - (100cqi - 100%) / 2) !important;
    bottom: clamp(50px, 5.35cqh, 58px) !important;
    width: clamp(256px, 19.7cqi, 378px) !important;
  }

  html.report-deck-paid-teaser .slide:first-of-type .hero-portrait-shell {
    width: clamp(248px, 18.36cqi, 352.5px) !important;
    height: clamp(248px, 18.36cqi, 352.5px) !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
  }

  html.report-deck-paid-teaser .slide:first-of-type .hero-portrait-img,
  html.report-deck-paid-teaser .slide:first-of-type .portrait img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
  }
}

@media (max-width: 980px) {
  .hud > .hud-back {
    position: static !important;
  }

  .report-deck-paid-teaser .slide:first-of-type .hero-portrait-anchor,
  .report-deck-paid-teaser .slide:first-of-type .portrait {
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    margin: 8px 0 20px !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    flex-direction: row !important;
  }

  .report-deck-paid-teaser .slide:first-of-type .hero-portrait-shell,
  .report-deck-paid-teaser .slide:first-of-type .portrait img {
    width: 92px !important;
    height: 92px !important;
    flex-basis: 92px !important;
  }

  .report-deck-paid-teaser .slide:first-of-type .hero-portrait-caption,
  .report-deck-paid-teaser .slide:first-of-type .portrait strong,
  .report-deck-paid-teaser .slide:first-of-type .portrait span {
    align-items: flex-start !important;
    text-align: left !important;
  }
}