/* HARPS presentation — Disney Advertising deck system.
 *
 * The slides were authored dark: their first style block still sets
 * `.slide { background: #020024 }` with a 16:9 canvas, a 40px-at-1920 corner and
 * `overflow: hidden`. A later editorial pass repainted the deck light, partly
 * through assets/intro/editorial-theme.css and partly through a stack of
 * <style> blocks appended inside each slide. Those in-file blocks also carry
 * real geometry work — card sizing, alignment, connector placement — so they
 * are left alone and only their colour decisions are answered here.
 *
 * This file is linked last in <head>, after every one of those blocks, which is
 * what makes it win. `!important` appears only where the light pass used it
 * first, because nothing else outranks an existing `!important`.
 *
 * Every value below is lifted from the Rate Card deck's own stylesheet
 * (rate-card-a83c03.pages.gitlab.disney.com/styles.css), so the two decks read
 * as one system rather than two dark themes that happen to look similar. The
 * token names are kept identical to theirs for the same reason.
 *
 * Scope: `.slide` and the intro documents only. The HARPS product UI lives in
 * separate pages and is never selected here.
 */

:root {
  /* ── Presentation shell (Rate Card --presentation-*) ─────────────────── */
  --presentation-canvas: #1e1e1e;
  --presentation-slide-surface: #020024;
  --presentation-slide-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
  --presentation-slide-radius: 40px;
  --presentation-safe-inset: 24px;
  --presentation-brand-width: 1.875%;      /* 36 / 1920 */
  --presentation-brand-right: 3.0208%;     /* 58 / 1920 */
  --presentation-brand-bottom: 3.8889%;    /* 42 / 1080 */

  /* ── Card (Rate Card --rpx-*) ───────────────────────────────────────── */
  --rpx-card-surface: #202735;
  --rpx-card-border: #384252;
  --rpx-card-text: #f1f2f7;
  --rpx-title: #ffffff;
  --rpx-result-border: #bd975e;            /* gold: the destination only */
  --rpx-result-glow: rgba(189, 151, 94, 0.34);
  --rpx-card-radius: 16px;
  --rpx-card-shadow:
    0 12px 16.8px rgba(0, 0, 0, 0.32),
    inset 0 1.2px 14.4px rgba(255, 255, 255, 0.08);

  /* ── Accents ────────────────────────────────────────────────────────── */
  --pres-accent: #6cb8ff;                  /* Rate Card connector blue */
  --pres-accent-deep: #1677ff;
  --pres-accent-quiet: rgba(108, 184, 255, 0.42);
  --pres-purple: #8ea2ff;                  /* workflow emphasis */

  /* ── Type ───────────────────────────────────────────────────────────── */
  --pres-ink: #ffffff;
  --pres-ink-soft: #d5d8ea;
  --pres-ink-muted: #bbbbd7;
  --pres-ink-faint: #8f93b4;

  /* ── Presentation typography ────────────────────────────────────────────
     Authored slide content is set in Inspire TWDC. The faces are already
     declared in assets/fonts/harps-fonts.css — 300 Light, 400 Roman, 500
     Medium, 600-700 Heavy, 800-900 Black — so nothing is redeclared here and
     the family name matches those declarations exactly.

     The editorial pass introduced `--font-family: "SF Pro Display"` and pushed
     it onto the deck with !important. This token replaces it for presentation
     content only; the product UI keeps its own font because nothing below
     selects outside a slide. */
  --font-family-presentation: "Inspire TWDC", "MultiplaneTWDC", -apple-system,
    BlinkMacSystemFont, sans-serif;

  /* Cover gradient stops, from the Rate Card cover artwork. */
  --cover-0: #0575c4;
  --cover-1: #045da2;
  --cover-2: #03457f;
  --cover-3: #022c5c;
  --cover-4: #001439;
}

/* The charcoal has to be on the document element, not just body, so the first
   painted frame is already dark — no white flash on load or between slides. */
html,
body {
  background: var(--presentation-canvas) !important;
  color-scheme: dark;
}

/* ── Font family, and only the family ────────────────────────────────────
   Every authored element on a slide takes Inspire TWDC. Deliberately no
   font-weight anywhere in this block: each element keeps whatever weight it
   was authored with, so a bold title stays bold, a semibold heading stays
   semibold and a muted caption stays regular. Sizes are untouched too — the
   14pt explanations and the 16pt tooltip keep their own declarations.

   Mirrors the reach of the editorial rule it replaces, so no slide text is
   left behind on SF Pro. The selectors stop at the slide: the HARPS shell,
   tables, forms and every product screen are never matched.

   The Live View needs no exclusion — it is an <iframe>, a separate document,
   which CSS cannot cascade into. */
.slide,
.slide :where(a, button, div, span, p, h1, h2, h3, h4, h5, h6, ul, ol, li,
  label, small, strong, em, table, thead, tbody, tfoot, tr, th, td),
.slide::before,
.slide::after,
.edl-modal,
.edl-modal :where(button, div, span, p, h1, h2, h3, h4, h5, h6, ul, ol, li, label) {
  font-family: var(--font-family-presentation) !important;
}

/* The editorial pass split display and text faces across two SF Pro stacks;
   both now resolve to the one family, which is what the deck was authored in.

   Written as full class selectors, not :where(). The slides declare their own
   `.slide .subtitle { font-family: ... }` rules, and :where() contributes no
   specificity — a :where() version ties on !important and loses on source
   order, which left every interior subtitle on SF Pro Text. */
.slide .title,
.slide .title .main,
.slide .thank-you,
.slide .ufs-title,
.slide .bottom-statement,
.slide .subtitle,
.slide .description,
.slide .project-subtitle,
.slide .bullet-list,
.slide .col-bullets,
.slide .numbered-list,
.slide .logic-list,
.slide .left-list,
.slide .right-list,
.slide .validated-data,
.slide .bottom-text,
.slide .footer,
.slide .footer-text,
.slide .jarvis-label,
.slide .caption,
.slide .step-label,
.slide .phase-label,
.slide .section-header,
.slide .section-label,
.slide .col-title,
.slide .arrow-label,
.slide .pipeline-label,
.slide .pipeline-text,
.slide .story-eyebrow,
.slide .story-detail,
.slide .ufs-support,
.slide .project-simba,
.slide .project-tooltip,
.slide .cover-date,
.slide .draft {
  font-family: var(--font-family-presentation) !important;
}

/* ── Canvas ──────────────────────────────────────────────────────────────
   Restores the navy the slide originally declared and drops the light pass's
   pale wash and bright drop shadow. */
.slide,
a.slide {
  background: var(--presentation-slide-surface) !important;
  color: var(--pres-ink) !important;
  box-shadow: var(--presentation-slide-shadow) !important;
}

/* A light bloom was painted over the canvas; on navy it reads as haze. */
.slide::after {
  background: none !important;
}

/* Sits the canvas off the edges so the charcoal frames it, as the Rate Card
   stage does with its 24px safe inset. Every measurement inside the slide
   derives from --sw, so narrowing that one value scales the whole composition
   uniformly — the ratio, the corner radius and every position follow. */
.slide {
  --sw: min(
    calc(100vw - (var(--presentation-safe-inset) * 2)),
    calc((100vh - (var(--presentation-safe-inset) * 2)) * 16 / 9)
  ) !important;
  width: var(--sw) !important;
  height: calc(var(--sw) * 9 / 16) !important;
}

/* ── Cover and closing slides ────────────────────────────────────────────
   The Rate Card cover is a five-stop radial running from Disney blue down into
   navy, carried as artwork because the transform is not expressible in CSS.
   Reproduced here as an ellipse anchored the same way: light gathering off the
   upper-left, settling to the deck's own navy at the far corner, so the cover
   and the interior slides are the same surface at two brightnesses.

   :has() picks the two slides out by content they already carry, so no slide
   needed a new class to opt in. */
.slide:has(.project-subtitle),
.slide:has(.thank-you) {
  background:
    radial-gradient(
      118% 145% at 6% -18%,
      var(--cover-0) 0%,
      var(--cover-1) 24%,
      var(--cover-2) 45%,
      var(--cover-3) 68%,
      var(--cover-4) 88%,
      var(--presentation-slide-surface) 100%
    ) !important;
}

/* ── Cover composition — Figma node 5078:29658 ───────────────────────────
   Read off the node, not off a render. An earlier pass worked from a stale
   copy of the frame and landed the whole group ~100 low, put Project SIMBA at
   26px, and set the date beside the presenter's name instead of under it.

   The frame is 1920x1080. Rather than convert every coordinate into its own
   percentage, the block below treats the slide as that logical canvas: --u is
   one design pixel, so a Figma value is written as the number Figma gives.

   --u is derived from --sw, the fitted slide width the .slide rule above
   computes from BOTH axes:

       --sw: min(100vw - inset*2, (100vh - inset*2) * 16/9)

   which is min(availW/1920, availH/1080) expressed as a width. So --u is that
   single uniform scale and nothing here scales a second time — no transform,
   no vw type, no per-width repositioning. The composition moves as one piece.

   Figma centres the glyphs inside each text box, so each layer is reproduced
   as its measured box with the text centred in it.

   Scoped to the cover by content it already carries, so no other slide can be
   reached from here. */

.slide:has(.project-subtitle) {
  --u: calc(var(--sw) / 1920);
}

/* The frame's fill: a five-stop radial whose centre sits at (2866.7, 2961),
   off the canvas past the bottom-right corner, so the slide is darkest at the
   top-left and warms toward the lower right. The previous CSS radial put its
   centre near the top-left and lit the wrong corner.

   Carried as Figma's own SVG because the stop geometry is a transformed
   ellipse (gradientTransform on a unit circle), which CSS's
   ellipse-at-position syntax cannot express; preserveAspectRatio='none' lets
   it stretch with the slide at any scale. */
.slide:has(.project-subtitle),
a.slide:has(.project-subtitle) {
  background:
    url("data:image/svg+xml;utf8,<svg viewBox='0 0 1920 1080' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' width='1920' height='1080' fill='url(%23g)'/><defs><radialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-286.67 -296.1 1082 -655.45 2866.7 2961)'><stop stop-color='rgb(5,117,196)' offset='0'/><stop stop-color='rgb(4,93,162)' offset='0.25'/><stop stop-color='rgb(3,69,127)' offset='0.5'/><stop stop-color='rgb(2,44,92)' offset='0.75'/><stop stop-color='rgb(0,20,57)' offset='1'/></radialGradient></defs></svg>")
      center / 100% 100% no-repeat !important;
  border: 0 !important;
  border-radius: calc(32 * var(--u)) !important;  /* the frame's own radius */
}

/* Each layer is its Figma box, with the glyphs centred in it. */
.slide:has(.project-subtitle) .dept-logo,
.slide:has(.project-subtitle) .title,
.slide:has(.project-subtitle) .project-subtitle,
.slide:has(.project-subtitle) .subtitle,
.slide:has(.project-subtitle) .cover-date,
.slide:has(.project-subtitle) .draft {
  position: absolute;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  top: auto;
  transform: none !important;
  max-width: none !important;
  line-height: 1.2 !important;
  letter-spacing: normal !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: none !important;
  text-align: left;
  white-space: nowrap;
}

/* Brand mark: 362x38 at (178, 352). The shipped PNG is byte-identical to the
   Figma export, so it is reused rather than re-exported; contain holds its
   4096x428 aspect exactly inside the designed box. */
.slide:has(.project-subtitle) .dept-logo {
  left: calc(178 * var(--u));
  top: calc(352 * var(--u));
  width: calc(362 * var(--u));
  height: calc(38 * var(--u));
  z-index: 2;
}

.slide:has(.project-subtitle) .dept-logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: left center;
  /* The light art-direction pass had tinted and faded this; Figma shows the
     asset as authored. */
  filter: none;
  opacity: 1;
}

/* Title: box 1780x146 at (178, 416), InspireTWDC Heavy 96.
   Heavy is weight 600-700 in harps-fonts.css — the 900 this asked for loaded
   the Black face instead, which is the heavier, tighter title in the old
   render. */
.slide:has(.project-subtitle) .title {
  left: calc(178 * var(--u));
  top: calc(416 * var(--u));
  width: calc(1780 * var(--u));
  height: calc(146 * var(--u));
  font-family: "Inspire TWDC", var(--font-family-presentation) !important;
  font-size: calc(96 * var(--u)) !important;
  font-weight: 700 !important;
  z-index: 2;
}

/* Project SIMBA: box 1156x58 at (178, 550), SF Pro Semibold 48. */
.slide:has(.project-subtitle) .project-subtitle {
  left: calc(178 * var(--u));
  top: calc(550 * var(--u));
  width: calc(1156 * var(--u));
  height: calc(58 * var(--u));
  z-index: 3;
}

/* The wording is a button so its tooltip stays reachable by keyboard. It has
   to read as the plain text Figma draws, so it takes the box's type rather
   than any of the user agent's. */
.slide:has(.project-subtitle) .project-simba {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: "SF Pro Display", var(--font-family-presentation) !important;
  font-size: calc(48 * var(--u)) !important;
  font-weight: 600 !important;                    /* SF Pro Semibold */
  line-height: 1.2 !important;
  letter-spacing: normal !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: none !important;
  cursor: help;
}

.slide:has(.project-subtitle) .project-simba:focus-visible {
  outline: 2px solid #6cb8ff;
  outline-offset: calc(4 * var(--u));
  border-radius: calc(4 * var(--u));
}

/* Presenter: box 1090x58 at (178, 768), SF Pro Bold 48. */
.slide:has(.project-subtitle) .subtitle {
  left: calc(178 * var(--u));
  top: calc(768 * var(--u));
  width: calc(1090 * var(--u));
  height: calc(58 * var(--u));
  font-family: "SF Pro Display", var(--font-family-presentation) !important;
  font-size: calc(48 * var(--u)) !important;
  font-weight: 700 !important;
  z-index: 2;
}

/* Date: box 1090x58 at (178, 826), SF Pro Regular 32 — its own line directly
   under the presenter and on the same 178 left edge. It had been anchored at
   x462, which set it beside the name rather than below it. */
.slide:has(.project-subtitle) .cover-date {
  left: calc(178 * var(--u));
  top: calc(826 * var(--u));
  width: calc(1090 * var(--u));
  height: calc(58 * var(--u));
  font-family: "SF Pro Display", var(--font-family-presentation) !important;
  font-size: calc(32 * var(--u)) !important;
  font-weight: 400 !important;
  z-index: 2;
}

/* DRAFT: box 242x76 at (1593, 938), SF Pro Bold 72 at 30% — 85 in from the
   right edge and 66 up from the bottom. */
.slide:has(.project-subtitle) .draft {
  left: calc(1593 * var(--u));
  top: calc(938 * var(--u));
  width: calc(242 * var(--u));
  height: calc(76 * var(--u));
  font-family: "SF Pro Display", var(--font-family-presentation) !important;
  font-size: calc(72 * var(--u)) !important;
  font-weight: 700 !important;
  opacity: 0.3 !important;
  z-index: 2;
}

/* The tooltip is chrome, not composition: it stays out of the flow and only
   appears when the reviewer asks for it. */
.slide:has(.project-subtitle) .project-tooltip {
  white-space: normal;
  font-family: "SF Pro Display", var(--font-family-presentation) !important;
  font-size: calc(19 * var(--u)) !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
}

/* ── Footer removed from the Cover only ─────────────────────────────────
   The label and the D&E mark are dropped here per the brief. Both were
   absolutely positioned, so nothing reserved height for them and there is no
   footer row, padding, gap or empty wrapper to reclaim — display:none removes
   them outright rather than hiding them while they still occupy space. Every
   other slide keeps its footer: this is scoped to the cover. */
.slide:has(.project-subtitle) :where(.footer, .footer-text, .footer-bar,
  .logo, .corner-logo, .footer-logo) {
  display: none !important;
}

/* ── Project SIMBA tooltip ───────────────────────────────────────────────
   16px of visible text exactly, as specified — a literal pixel size, not the
   deck's scaled type. Taken out of flow so opening it cannot move any cover
   text, and capped so it stays inside the slide. */
.slide:has(.project-subtitle) .project-tooltip {
  position: absolute;
  left: 0;
  top: calc(100% + var(--sw) * 14 / 1920);
  width: max-content;
  max-width: min(calc(var(--sw) * 620 / 1920), 60vw);
  padding: 12px 16px;
  border-radius: 10px;
  background: #0b1a3a;
  border: 1px solid rgba(160, 190, 235, 0.28);
  box-shadow: 0 18px 44px rgba(0, 8, 26, 0.55);
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: normal;
  white-space: normal;
  z-index: 40;
}

.slide:has(.project-subtitle) .project-tooltip[hidden] { display: none; }

.slide:has(.project-subtitle) .project-tooltip::before {
  content: "";
  position: absolute;
  left: 26px;
  top: -7px;
  width: 12px;
  height: 12px;
  background: #0b1a3a;
  border-left: 1px solid rgba(160, 190, 235, 0.28);
  border-top: 1px solid rgba(160, 190, 235, 0.28);
  transform: rotate(45deg);
}

/* The cover carries its own copy over a lit field, so it wants no extra wash. */
.slide:has(.project-subtitle)::after,
.slide:has(.thank-you)::after {
  background: none !important;
}

/* ── Card ────────────────────────────────────────────────────────────────
   One treatment for every element in the deck that is a container with an icon
   or a titled tile. Dimensions, radius and position stay as each slide has
   them; only fill, edge, shadow and text colour come from here.

   The list is explicit rather than a wildcard so ordinary paragraphs, the
   product screenshots and the diagram connectors are never swept up. */
.slide :where(
  /* 2 — Quote-to-Cash systems and intelligence tiles */
  .system-box, .intel-box,
  /* 3 — Unified Financial System stages and destination */
  .step-icon, .outcome-icon, .ufs-outcome,
  /* 4 — billing story cards and invoice boxes */
  .story-card, .invoice-story-card, .delivery-box,
  .invoice-box-left, .invoice-box-right,
  /* 5 — current/future state zones */
  .state-zone, .zone-left, .zone-right,
  /* 6 — three-column icon tiles */
  .col-icon,
  /* 7 — workflow endpoint */
  .send-to-client-row,
  /* 8 — pipeline stages */
  .pipeline-box,
  /* 9 — workflow comparison cards */
  .workflow-card
) {
  background: var(--rpx-card-surface) !important;
  background-image: none !important;
  border: 1.2px solid var(--rpx-card-border) !important;
  border-radius: var(--rpx-card-radius) !important;
  color: var(--rpx-card-text) !important;
  box-shadow: var(--rpx-card-shadow) !important;
  backdrop-filter: none !important;
}

/* Slides 7-9 draw the card as a ::before on the list inside it, sized larger
   than the list and pushed behind at z-index -1. That pseudo-element is the
   card, so it takes the card treatment; its geometry is left as authored.

   Written as full class selectors rather than :where(). The in-file light rules
   are `.slide .numbered-list::before`, and :where() contributes no specificity,
   so a :where() version ties on !important and loses on source order. */
.slide .numbered-list::before,
.slide .logic-list::before,
.slide .pipeline-item::before,
.slide .workflow-stage::before {
  background: var(--rpx-card-surface) !important;
  background-image: none !important;
  border: 1.2px solid var(--rpx-card-border) !important;
  box-shadow: var(--rpx-card-shadow) !important;
}

/* Same reasoning for the tiles the light pass targeted with `.slide .x`. */
.slide .system-box,
.slide .intel-box,
.slide .step-icon,
.slide .outcome-icon,
.slide .story-card,
.slide .invoice-story-card,
.slide .state-zone,
.slide .workflow-card,
.slide .pipeline-box,
.slide .col-icon,
.slide .send-to-client-row {
  background-color: var(--rpx-card-surface) !important;
  background-image: none !important;
  border-color: var(--rpx-card-border) !important;
  color: var(--rpx-card-text) !important;
}

/* Text inside a card, at the specificity the light pass used. */
.slide .numbered-list li,
.slide .logic-list li,
.slide .bullet-list li,
.slide .col-bullets li,
.slide .left-list li,
.slide .right-list li,
.slide .pipeline-text,
.slide .workflow-card span,
.slide .pipeline-box span {
  color: var(--rpx-card-text) !important;
  -webkit-text-fill-color: currentColor !important;
}

/* Slide 9 labels each comparison row with a pill. They are chrome for the row,
   not cards, so they take the card edge at a lighter weight. */
.slide .future-flow,
.slide .current-flow,
.slide .workflow-row-label {
  background-color: rgba(108, 184, 255, 0.12) !important;
  background-image: none !important;
  border: 1px solid rgba(108, 184, 255, 0.28) !important;
  color: var(--pres-accent) !important;
  -webkit-text-fill-color: var(--pres-accent) !important;
  box-shadow: none !important;
}

.slide .section-header,
.slide .story-eyebrow,
.slide .card-header,
.slide .left-card-header,
.slide .right-card-header,
.slide .pipeline-label,
.slide .workflow-row-label {
  color: var(--pres-accent) !important;
  -webkit-text-fill-color: var(--pres-accent) !important;
  opacity: 1 !important;
}

/* The destination card is the one place gold appears: it marks the result the
   deck is arriving at, exactly as the Rate Card marks its Right Price. */
.slide :where(.ufs-outcome, .send-to-client-row, .pipeline-box--client) {
  border-color: var(--rpx-result-border) !important;
  border-width: 1.5px !important;
  box-shadow:
    var(--rpx-card-shadow),
    0 0 24px var(--rpx-result-glow) !important;
}

/* Upstream steps stay recessive against the destination without going dim
   enough to be hard to read. */
.slide :where(.box-saleshub, .box-core-planning, .box-mission-control,
  .intel-box, .box-sales-intel, .box-plan-intel, .box-adops-intel,
  .box-finance-intel) {
  background: color-mix(in srgb, var(--rpx-card-surface) 78%, #020024) !important;
}

/* The light pass frosted every card with a white gradient down its top half,
   which on navy reads as paper lit from above. The element stays — it carries
   the card's inner geometry — but becomes the restrained inner highlight the
   Rate Card card uses. */
.slide :where(.system-box, .intel-box, .pipeline-box, .story-card,
  .invoice-story-card, .delivery-box, .invoice-box-left, .invoice-box-right,
  .state-zone, .workflow-card)::before {
  background-image: linear-gradient(
    rgba(255, 255, 255, 0.055),
    rgba(255, 255, 255, 0)
  ) !important;
}

/* ── Icons ───────────────────────────────────────────────────────────────
   Line art on a transparent ground inside the card, drawn in the card's own
   text colour so strokes stay crisp at every scale. Sizes are untouched. */
.slide :where(.step-icon, .outcome-icon, .col-icon, .section-icon,
  .endpoint-icon, .invoice-icon, .money-icon, .dollar-icon, .receipt-icon,
  .person-icon, .client-icon, .icon-clipboard, .icon-clock, .icon-gavel) {
  color: var(--pres-ink) !important;
}

.slide :where(.step-icon, .outcome-icon, .col-icon, .section-icon,
  .endpoint-icon, .person-icon, .client-icon) :where(svg, path, circle, rect) {
  fill: currentColor !important;
}

/* Icons that are their own container rather than art inside one keep the card
   fill; icons that sit inside a card must not paint a second card behind
   themselves. */
.slide :where(.story-card, .invoice-story-card, .state-zone, .workflow-card)
  :where(.dollar-icon, .receipt-icon, .invoice-icon, .money-icon) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ── Type ────────────────────────────────────────────────────────────────
   Family, size, weight, wrapping and position all stay as the deck has them.
   Only colour changes, so no title can rewrap or clip. */
.slide :where(.title, .title .main, .thank-you, .ufs-title, .bottom-statement,
  .phase-label, .phase-pitch, .phase-plan, .phase-traffic, .phase-pay,
  .delivery-amount, .invoice-amount-left, .invoice-amount-right,
  .pipeline-text, .pill-text, .flow-label-text, .card-header,
  .left-card-header, .right-card-header, .story-amount, .invoice-value,
  h1, h2, h3),
.slide .title,
.slide .phase-label {
  color: var(--pres-ink) !important;
}

/* ── Top-level slide title ───────────────────────────────────────────────
   Interior slides authored their heading at 56/1920; at presentation distance
   that sat too close to the subtitle. One shared rule lifts every top-level
   heading to 64/1920 — the deck's own --sw convention, so it scales with the
   canvas rather than being pinned to a pixel size.

   The cover and the closing slide are excluded: both already run their title at
   96/1920, and a blanket rule would have shrunk them and flattened the
   hierarchy between the cover and the deck. :has() identifies them by content
   they already carry, so neither needed a new class.

   Card titles (.ufs-title inside the destination card, section headers, tile
   labels) are deliberately not included — this is the page heading only. */
.slide:not(:has(.project-subtitle)):not(:has(.thank-you))
  :where(.title, .title .main, .header h1, .header > .title, h1) {
  font-size: calc(var(--sw) * 64 / 1920) !important;
  line-height: 1.08 !important;
  color: var(--pres-ink) !important;
  opacity: 1 !important;
}

/* A longer heading may take a second line rather than run into the right safe
   area; the anchor and alignment are unchanged. */
.slide:not(:has(.project-subtitle)):not(:has(.thank-you)) .title {
  max-width: calc(var(--sw) * 1640 / 1920) !important;
}

.slide :where(.subtitle, .description, .header > .subtitle, .col-title,
  .bullet-list, .col-bullets, .numbered-list, .logic-list, .left-list,
  .right-list, .project-subtitle, .step-label, .invoice-name,
  .workflow-row-label),
.slide .subtitle {
  color: var(--pres-ink-soft) !important;
}

.slide :where(.bottom-text, .validated-data, .arrow-label, .story-detail,
  .ufs-support, .pipeline-label, .section-label, .caption, .connector-note,
  .comparison-kicker, .invoice-period, .draft) {
  color: var(--pres-ink-muted) !important;
}

/* The light pass set -webkit-text-fill-color on the active phase, which
   outranks `color` and kept "Pay" near-black on navy. It also lifted labels off
   white paper with a white text-shadow, which on navy reads as a halo. */
.slide :where(.phase-label, .phase-pitch, .phase-plan, .phase-traffic,
  .phase-pay, .title, .subtitle, .ufs-title, .step-label) {
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}

.slide :where(.phase-pitch, .phase-plan, .phase-traffic) {
  color: var(--pres-ink-soft) !important;
  opacity: 0.58 !important;
}

.slide .phase-pay {
  color: var(--pres-ink) !important;
  opacity: 1 !important;
}

/* Cards state their own text colour so a label can never inherit a value meant
   for the navy behind it. */
.slide :where(.system-box, .intel-box, .story-card, .invoice-story-card,
  .state-zone, .workflow-card, .pipeline-box, .send-to-client-row)
  :where(p, span, li, div) {
  -webkit-text-fill-color: currentColor !important;
}

/* ── Accents ─────────────────────────────────────────────────────────────
   The light deck used Disney indigo #3611C8, which is close to unreadable on
   navy. The same roles move to the Rate Card's blue and a lifted purple. */
.slide :where(.revenue-label, .section-header, .title .sub, .highlight,
  .step-label .highlight, .section-label .blue, .story-eyebrow, .blue,
  .invoice-label-left, .invoice-label-right, .blue-pill-text,
  .validate-label, .finalize-label) {
  color: var(--pres-purple) !important;
  opacity: 1 !important;
}

.slide :where(.cue-blue, .relationship-cue, .sox-label, .nav-link) {
  color: var(--pres-accent) !important;
}

/* Eyebrows and card kickers are small, tracked-out and sit on the card rather
   than the canvas, so they need the brighter end of the accent to stay legible
   at that size. Purple at this scale on #202735 was too close to the fill. */
.slide :where(.story-eyebrow, .card-header, .left-card-header,
  .right-card-header, .invoice-period, .comparison-kicker, .workflow-row-label,
  .section-label, .connector-note) {
  color: var(--pres-accent) !important;
  opacity: 1 !important;
}

/* The two-tone step labels ("Revenue Validation", "Billing Finalization") pair
   an accent word with a white one; the accent half has to hold its own. */
.slide :where(.validate-label, .finalize-label, .highlight, .blue) {
  color: var(--pres-accent) !important;
}

/* Jarvis stays a background relationship: readable, never competing. */
.slide .jarvis-label,
.slide :where(.jarvis-label) {
  color: var(--pres-ink-faint) !important;
  opacity: 0.9 !important;
}

.slide .jarvis-label::before {
  background-image: none !important;
  background-color: rgba(143, 147, 180, 0.07) !important;
  border-color: rgba(160, 170, 214, 0.14) !important;
}

/* ── Connectors ──────────────────────────────────────────────────────────
   Drawn three ways in this deck, each needing its own handling.

   The brackets are SVGs with stroke="var(--stroke-0, white)" and no fill —
   authored white for navy. The light pass darkened them with a filter, so the
   restoration is to drop the filter, not add one. */
.slide :where(.bracket img, .bracket-main, .bracket-left, .bracket-right,
  .down-arrow img, .flow-arrow, .long-arrow, .workflow-arrow, .arrow) {
  filter: none !important;
  opacity: 0.7 !important;
}

/* The phase and pipeline connectors are CSS-drawn rules, not images, so they
   take a background rather than a filter — a filter over a div tints the whole
   box. Length, thickness and position are untouched. */
.slide :where(.arrow-h, .arrow-v, .story-connector,
  .connector-one, .connector-two, .workflow-connector) {
  background-color: var(--pres-accent-quiet) !important;
  filter: none !important;
  opacity: 1 !important;
}

/* .plus-line is the rule between "Revenue validation" and "Invoice execution",
   not a flow connector. At connector weight it reads as a solid bar under the
   Finance card, so it stays a hairline. */
.slide .plus-line {
  background-color: rgba(108, 184, 255, 0.22) !important;
  filter: none !important;
}

.slide :where(.arrow-h::before, .arrow-v::before, .arrow-h::after,
  .arrow-v::after, .arrow-label::before, .arrow-label::after,
  .workflow-connector::before, .workflow-connector::after,
  .col-title::before, .col-title::after, .story-connector::before,
  .story-connector::after) {
  background-color: var(--pres-accent-quiet) !important;
  border-color: var(--pres-accent) !important;
}

/* List bullets were drawn in the light deck's indigo, which all but disappears
   on navy. Same marker, same size and position, lifted to the accent. */
.slide :where(.numbered-list, .logic-list, .bullet-list, .col-bullets,
  .left-list, .right-list) li::before {
  background-color: var(--pres-purple) !important;
  color: var(--pres-purple) !important;
}

.slide :where(.numbered-list, .logic-list) li::marker {
  color: var(--pres-ink-faint) !important;
}

/* Status pills keep their semantic colour but at a weight that reads on navy. */
.slide .green-pill {
  background: rgba(60, 190, 140, 0.14) !important;
  border-color: rgba(60, 190, 140, 0.36) !important;
}

.slide :where(.green-pill-text, .delivery-label) {
  color: #6fe0b0 !important;
}

.slide .blue-pill {
  background: rgba(108, 184, 255, 0.14) !important;
  border-color: rgba(108, 184, 255, 0.36) !important;
}

/* ── Footer and brand mark ───────────────────────────────────────────────
   Placed from the Rate Card's own brand tokens so the mark cannot drift
   between the two decks. The footer label and the mark are separate elements
   and both remain where the deck puts them. */
/* The footer is brand text, not secondary copy, so it is exempt from the muted
   token the rest of the deck's small type uses. It was inheriting
   --pres-ink-muted at 0.72, which on navy read as grey and nearly vanished.
   -webkit-text-fill-color is set alongside `color` because several slides
   declare it, and it outranks `color` where present. */
.slide :where(.footer, .footer-text, .presentation-footer-label),
.slide .footer,
.slide .footer-text {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
  mix-blend-mode: normal !important;
}

.slide :where(.logo, .corner-logo, .footer-logo) {
  position: absolute !important;
  left: auto !important;
  top: auto !important;
  right: var(--presentation-brand-right) !important;
  bottom: var(--presentation-brand-bottom) !important;
  width: var(--presentation-brand-width) !important;
  height: auto !important;
  opacity: 1 !important;
  filter: none !important;
  z-index: 30 !important;
}

/* Only an image nested inside a logo *container* fills that container. The mark
   is sometimes the <img> itself (`<img class="logo">`), and matching that with
   width:100% sizes it to the whole slide — which is exactly what happened. The
   child combinator keeps the two cases apart. */
.slide :where(.logo, .corner-logo, .footer-logo) > img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  filter: none !important;
}

/* dept-logo.png is a raster wordmark authored dark-on-light and the repo has no
   light variant. Flattening to pure white is faithful for a flat single-colour
   wordmark; brightening the inversion instead pushed it to a neon cyan that
   swamped the cover. */
.slide .dept-logo img {
  filter: brightness(0) invert(1) !important;
  opacity: 0.86 !important;
}

/* ── Modal ───────────────────────────────────────────────────────────────
   The SOX modal on slide 6 is part of the deck and follows the same system. */
.edl-modal-overlay {
  background: rgba(2, 0, 36, 0.72) !important;
  backdrop-filter: blur(8px);
}

.edl-modal {
  background: var(--rpx-card-surface) !important;
  border: 1.2px solid var(--rpx-card-border) !important;
  box-shadow: var(--rpx-card-shadow) !important;
}

.edl-modal :where(.edl-modal-title, .edl-modal-section-title) {
  color: var(--pres-ink) !important;
}

.edl-modal :where(.edl-modal-section-body, li, p) {
  color: var(--pres-ink-soft) !important;
}

.edl-modal .edl-modal-divider {
  background: var(--rpx-card-border) !important;
  border-color: var(--rpx-card-border) !important;
}

.edl-modal-close {
  color: var(--pres-ink-muted) !important;
  background: transparent !important;
}

.edl-modal-close:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--pres-ink) !important;
}

/* Slide 1's tooltip is chrome, not content. */
.slide .project-tooltip {
  background: var(--rpx-card-surface) !important;
  border: 1.2px solid var(--rpx-card-border) !important;
  color: var(--rpx-card-text) !important;
}

@media (prefers-reduced-motion: reduce) {
  .slide,
  .slide * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}