* { box-sizing: border-box; margin: 0; padding: 0; }
  html, body {
    width: 100%; min-height: 100%;
    background: #faf8f3;
    color: #111;
    font-family: "DM Sans", system-ui, sans-serif;
    overflow-x: hidden;
  }

  :root {
    --navy: #2f485c;
    --navy-dark: #1d2c3a;
    --green-cell: #E2EFDA;
    --green-border: #9BBB59;
    --cream: #faf8f3;
    --pill-blue: #d9ecf9;
    --pill-blue-border: #b9d9ee;
    --border-gray: #e6e6e6;
    --text-muted: #7a8692;
    --spot-glow: rgba(255, 214, 102, 0.6);
    --excel-green: #107c41;
    --extrap-orange: #d97757;
    --extrap-blue: #4a6d86;
    /* Missing-weeks bar widths, clamped so the graphic fits inside the
       title card from ~400px viewport up to wide desktop. The data pull
       stays centered, so right-of-center reach (during/2 + after) is the
       binding constraint against the card's inner width. */
    --bar-during: clamp(160px, 42vw, 280px);
    --bar-after:  clamp(60px,  16vw,  110px);
    --bar-before: clamp(40px,  10vw,  60px);
  }

  body {
    min-height: 100vh;
    display: block;
    position: relative;
  }

  .screen {
    position: fixed; inset: 0;
    width: 100%; height: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 500ms ease;
    z-index: 10;
    overflow-y: auto;
  }
  .screen.active {
    opacity: 1;
    pointer-events: auto;
    z-index: 20;
  }

  /* ---- Gate ---- */
  #gate {
    background: var(--cream);
    display: flex;
    align-items: center; justify-content: center;
    padding: 40px;
  }
  #gate .gate-content {
    max-width: 720px; text-align: center;
  }
  #gate .brand {
    font-size: 11px; font-weight: 800; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--navy);
    margin-bottom: 18px;
  }
  #gate h1 {
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(30px, 5vw, 48px);
    line-height: 1.15;
    margin-bottom: 18px;
    font-weight: 800;
  }
  #gate .lead {
    font-size: 16px; line-height: 1.6;
    color: #444;
    max-width: 560px; margin: 0 auto 32px;
  }
  .gate-buttons {
    display: flex; flex-wrap: wrap;
    gap: 14px; justify-content: center;
    margin-bottom: 22px;
  }
  .btn-primary {
    background: var(--navy);
    color: white;
    font-family: "DM Sans", sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.02em;
    padding: 14px 26px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: background 200ms ease, transform 200ms ease;
  }
  .btn-primary:hover { background: var(--navy-dark); transform: translateY(-1px); }
  .btn-secondary {
    background: white;
    color: var(--navy);
    font-family: "DM Sans", sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.02em;
    padding: 14px 26px;
    border-radius: 999px;
    border: 1px solid #d9d9d9;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
  }
  .btn-secondary:hover { background: #f8f9fc; }
  #gate .gate-meta {
    font-size: 12px; color: var(--text-muted);
    letter-spacing: 0.08em; text-transform: uppercase;
  }

  /* ---- Stage ---- */
  #stage {
    background: var(--cream);
    padding: 28px 24px 60px;
  }
  /* --stage-scale is set by JS on resize so the 860px design fits any
     viewport width down to a 0.5x floor. Scaling .stage-inner together
     with #spotlight and #caption keeps captions visually aligned with
     the sheet at any scale. */
  .stage-inner {
    display: flex; flex-direction: column;
    align-items: stretch;
    min-height: 100%;
    width: 860px;
    /* Center the (potentially scaled) stage-inner using a translateX trick
       that works even when the unscaled CSS box is wider than the
       viewport. margin: 0 auto fails in that case because browsers clamp
       the auto margins to 0, leaving the box left-aligned. */
    margin-left: 50%;
    transform: translateX(-50%) scale(var(--stage-scale, 1));
    transform-origin: top center;
  }
  /* Spotlight position+size come from getBoundingClientRect (post-scale
     viewport coords) so it must NOT be additionally scaled. The caption
     IS scaled because its own dimensions (font, padding) are in design
     pixels and the engine multiplies the offset by scale. */
  .caption {
    transform-origin: top left;
    scale: var(--stage-scale, 1);
  }
  .page-header {
    width: 860px;
    max-width: 860px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
  }
  .page-header .brand-mini {
    font-size: 11px; font-weight: 800;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--navy);
  }
  .page-header .beat-label {
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--text-muted);
  }
  .page-header .controls { display: flex; gap: 8px; }
  .ctrl-btn {
    font-family: "DM Sans", sans-serif;
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    padding: 5px 10px; border-radius: 999px;
    border: 1px solid #d9d9d9; background: white;
    color: var(--navy);
    cursor: pointer;
  }
  .ctrl-btn:hover { background: #f8f9fc; }

  /* ---- Excel sheet backdrop ---- */
  .sheet-wrap {
    position: relative;
    width: 860px;
    /* Lock to design width so the layout never compresses and the
       captionOffset coordinates configured against the 860px layout
       stay valid at any viewport width. The page will horizontal-scroll
       on viewports narrower than ~900px. */
    min-width: 860px;
    max-width: 860px;
    margin: 0 auto;
    background: white;
    border: 1px solid #cbd5d9;
    border-radius: 6px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.06);
    overflow: hidden;
    font-family: "Segoe UI", "DM Sans", system-ui, sans-serif;
    transition: filter 600ms ease;
  }
  /* Muted sheet: a subtle blur + slight darken applied to the Excel
     chrome behind the extrap-section title cards / panels so the
     spreadsheet reads as decorative context instead of competing
     with the foreground overlay. Engine toggles this on body when
     an extrap-section title or review is showing without column
     spotlights (slides with spotlights need the cells crisp so the
     highlighted columns can be read). */
  body.sheet-muted .sheet-wrap {
    filter: blur(1.6px) brightness(0.93);
  }

  .excel-menu-bar {
    display: flex; align-items: stretch;
    background: #f3f3f3;
    border-bottom: 1px solid #d1d5d9;
    height: 26px;
    font-size: 12px;
    padding: 0 4px;
    font-family: "Segoe UI", "DM Sans", system-ui, sans-serif;
  }
  .excel-menu-bar .menu-item {
    padding: 0 11px;
    display: flex; align-items: center;
    color: #444; cursor: default;
    border-top: 2px solid transparent;
    box-sizing: border-box;
    line-height: 1;
  }
  .excel-menu-bar .menu-item:hover { background: #e8e8e8; }
  .excel-menu-bar .menu-item.file-tab {
    background: var(--excel-green);
    color: white;
    padding: 0 14px;
    font-weight: 600;
  }
  .excel-menu-bar .menu-item.active {
    background: white;
    border-top-color: var(--excel-green);
    font-weight: 600;
    color: #111;
  }
  .excel-menu-bar .menu-spacer { flex: 1; }

  .excel-name-bar {
    display: flex; align-items: stretch;
    height: 24px;
    background: #f3f3f3;
    border-bottom: 1px solid #d1d5d9;
    font-size: 11px;
    color: #333;
  }
  .excel-name-bar .name-box {
    width: 92px; padding: 0 10px;
    background: white;
    display: flex; align-items: center;
    border-right: 1px solid #d1d5d9;
    font-variant-numeric: tabular-nums;
  }
  .excel-name-bar .fx-label {
    padding: 0 10px; display: flex; align-items: center;
    font-style: italic; color: #888;
    border-right: 1px solid #d1d5d9;
    background: #fafafa;
  }
  .excel-name-bar .formula-bar {
    flex: 1; padding: 0 12px;
    background: white;
    display: flex; align-items: center;
    color: #555;
    font-variant-numeric: tabular-nums;
  }

  .excel-col-strip {
    display: grid;
    grid-template-columns: 36px repeat(8, 1fr);
    background: #f3f3f3;
    border-bottom: 1px solid #cbd5d9;
    font-size: 11px; color: #666;
    font-weight: 600;
  }
  .excel-col-strip > div {
    padding: 4px 0;
    text-align: center;
    border-right: 1px solid #d1d5d9;
  }
  .excel-col-strip > div:last-child { border-right: none; }
  .excel-col-strip > .corner {
    background: #e8e8e8;
    border-right: 1px solid #cbd5d9;
  }

  .excel-body {
    display: flex; align-items: stretch;
  }
  .excel-row-gutter {
    flex-shrink: 0;
    width: 36px;
    background: #f3f3f3;
    border-right: 1px solid #cbd5d9;
    font-size: 10px;
    font-weight: 600;
    color: #888;
    display: flex; flex-direction: column;
  }
  .excel-row-gutter .gnum {
    height: 24px;
    border-bottom: 1px solid #e4e4e4;
    box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .excel-content {
    flex: 1;
    padding: 0;
    background: white;
    display: flex;
    flex-direction: column;
  }

  .sheet-section { margin-bottom: 24px; }
  .sheet-section:last-child { margin-bottom: 0; }
  .section-label {
    font-size: 13px; font-weight: 700;
    color: #111;
    height: 24px;
    margin: 0;
    padding: 0 9px;
    font-family: "Segoe UI", "DM Sans", system-ui, sans-serif;
    box-sizing: border-box;
    display: flex; align-items: center;
    line-height: 1;
  }
  .sub-section-label {
    font-size: 13px; font-weight: 600;
    color: #555;
    height: 24px;
    margin: 0;
    padding: 0 9px 0 28px;
    font-family: "Segoe UI", "DM Sans", system-ui, sans-serif;
    box-sizing: border-box;
    display: flex; align-items: center;
    line-height: 1;
    font-style: italic;
  }

  .s-row {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    height: 24px;
    box-sizing: border-box;
    width: 100%;
  }
  .s-cell {
    display: flex; align-items: center;
    padding: 0 9px;
    height: 24px;
    box-sizing: border-box;
    font-size: 13px;
    font-family: "Segoe UI", "DM Sans", system-ui, sans-serif;
    color: #111;
    border-top: 1px solid #e4e4e4;
    border-left: 1px solid #e4e4e4;
    background: white;
    overflow: hidden;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .s-row > .s-cell:last-child { border-right: 1px solid #e4e4e4; }
  .sheet-section > .s-row:last-child > .s-cell { border-bottom: 1px solid #e4e4e4; }

  .vars-row > .s-cell:nth-child(1) { grid-column: 1 / 5; }
  .vars-row > .s-cell:nth-child(2) { grid-column: 5 / 6; }
  .vars-row > .s-cell:nth-child(3) { grid-column: 6 / 7; }
  .vars-row > .s-cell:nth-child(4) { grid-column: 7 / 8; }
  .vars-row > .s-cell:nth-child(5) { grid-column: 8 / 9; }

  .damages-row > .s-cell:nth-child(1) { grid-column: 1 / 3; }
  .damages-row > .s-cell:nth-child(2) { grid-column: 3 / 5; }
  .damages-row > .s-cell:nth-child(3) { grid-column: 5 / 6; }
  .damages-row > .s-cell:nth-child(4) { grid-column: 6 / 7; }
  .damages-row > .s-cell:nth-child(5) { grid-column: 7 / 8; }
  .damages-row > .s-cell:nth-child(6) { grid-column: 8 / 9; }

  .global-row > .s-cell:nth-child(1) { grid-column: 1 / 5; }
  .global-row > .s-cell:nth-child(2) { grid-column: 5 / 6; }
  .global-row > .s-cell:nth-child(3) { grid-column: 6 / 7; }
  .global-row > .s-cell:nth-child(4) { grid-column: 7 / 8; }
  .global-row > .s-cell:nth-child(5) { grid-column: 8 / 9; }

  .auth-row > .s-cell:nth-child(1) { grid-column: 1 / 6; }
  .auth-row > .s-cell:nth-child(2) { grid-column: 6 / 7; }
  .auth-row > .s-cell:nth-child(3) { grid-column: 7 / 8; }
  .auth-row > .s-cell:nth-child(4) { grid-column: 8 / 9; }

  .s-cell.label-cell {
    justify-content: flex-end;
    background: #fafafa;
    font-weight: 500;
    color: #333;
    text-align: right;
  }
  .s-cell.value-cell {
    justify-content: flex-end;
    font-weight: 600;
    color: #111;
  }
  .s-cell.value-cell.struck {
    color: #c23;
    text-decoration: line-through;
  }
  .s-cell.input-cell {
    justify-content: flex-end;
    background: var(--green-cell);
    border: 1.5px solid var(--green-border);
    /* Thicker left and right form the outer frame of the green column;
       top and bottom thicken on the first and last input row of each
       section so the cluster reads as one bordered group. */
    border-left-width: 3px;
    border-right-width: 3px;
    font-weight: 700;
    color: #111;
    padding: 0 14px;
    transition: background 400ms ease;
  }
  .sheet-section > .s-row:nth-child(2) > .s-cell.input-cell {
    border-top-width: 3px;
  }
  /* Section last row applies a grey bottom border to every cell to close
     the section. Restore the input cell's green bottom and thicken it so
     the input cluster gets its outer frame. */
  .sheet-section > .s-row:last-child > .s-cell.input-cell {
    border-bottom: 3px solid var(--green-border);
  }
  .s-cell.input-cell.flash { animation: cellFlash 1400ms ease; }
  @keyframes cellFlash {
    0% { background: var(--green-cell); }
    30% { background: #ffd56a; }
    100% { background: var(--green-cell); }
  }
  .s-row.header-row > .s-cell {
    background: #eee;
    font-size: 10px; font-weight: 800;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: #666;
    justify-content: center;
  }
  /* First cell of a combined header row carries the section name and
     reads more like a row title than a column label. */
  .s-row.header-row > .s-cell.section-name {
    background: #eee;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: #111;
    justify-content: flex-start;
  }

  .cell-value-anim {
    display: inline-block;
    transition: opacity 280ms ease;
  }

  .total-row {
    margin: 0 0 24px;
    padding: 0;
    height: 24px;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    align-items: stretch;
    border-top: 1px solid #999;
    border-bottom: 3px double #333;
    background: transparent;
    box-sizing: border-box;
  }
  .total-row .total-label {
    grid-column: 1 / 6;
    font-family: "Segoe UI", "DM Sans", system-ui, sans-serif;
    font-size: 13px; font-weight: 700; color: #111;
    padding: 0 9px; line-height: 1;
    display: flex; align-items: center;
    justify-content: flex-end;
  }
  .total-row .total-value {
    grid-column: 6 / 7;
    font-family: "Segoe UI", "DM Sans", system-ui, sans-serif;
    font-size: 13px; font-weight: 700; color: #111;
    font-variant-numeric: tabular-nums;
    padding: 0 9px; line-height: 1;
    background: #fff9d0;
    border-left: 1px solid #d0d0d0;
    display: flex; align-items: center;
    justify-content: flex-end;
  }
  .total-row .total-buffer { grid-column: 7 / 9; }

  .excel-tab-bar {
    display: flex;
    background: #f3f3f3;
    border-top: 1px solid #cbd5d9;
    font-size: 12px;
    padding: 0 10px;
    gap: 0;
    align-items: flex-end;
    min-height: 30px;
    font-family: "Segoe UI", "DM Sans", system-ui, sans-serif;
  }
  .sheet-tab {
    padding: 6px 14px 8px;
    color: #555;
    background: transparent;
    font-weight: 500;
    letter-spacing: 0.01em;
    position: relative;
    border-bottom: 2px solid transparent;
    border-radius: 0 0 5px 5px;
  }
  .sheet-tab.active {
    background: white;
    border-bottom-color: var(--excel-green);
    font-weight: 700;
    color: #111;
  }
  @keyframes tabTwinkle {
    0%, 100% {
      background: transparent;
      color: #555;
      box-shadow: none;
    }
    50% {
      background: rgba(255, 214, 102, 0.35);
      color: #111;
      box-shadow: 0 0 14px rgba(255, 214, 102, 0.55);
    }
  }
  .sheet-tab.twinkle {
    animation: tabTwinkle 1.4s ease-in-out infinite;
  }
  .sheet-tab-spacer { flex: 1; }

  /* ---- Tab content containers (Front End vs Weekly Damages) ---- */
  /* Each tab pane scrolls horizontally and vertically on its own
     when its content is bigger than the pane, like Excel. The pane
     itself stays a constant height so switching tabs does not jolt
     the sheet wrapper, and the scrollbars surface at the bottom and
     right of the pane, directly above the sheet tab bar. */
  .tab-content {
    display: block;
    overflow: auto;
    height: 648px;
  }
  .tab-content.hidden { display: none; }
  .tab-content > .excel-col-strip,
  .tab-content > .excel-body {
    min-width: 760px;
  }
  .tab-content.tab-enter {
    animation: tabContentEnter 380ms ease;
  }
  @keyframes tabContentEnter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .sheet-tab.tab-pulse {
    animation: tabClickPulse 700ms ease;
  }
  @keyframes tabClickPulse {
    0%   { background: transparent; box-shadow: none; }
    35%  { background: rgba(255, 214, 102, 0.7); box-shadow: 0 0 18px rgba(255, 214, 102, 0.7); }
    100% { background: white; box-shadow: none; }
  }

  /* ---- Weekly Damages sheet ---- */
  .weekly-stack { min-width: 1045px; }
  .weekly-grid-row {
    display: grid;
    grid-template-columns:
      36px      /* row gutter */
      96px      /* A  Name */
      82px      /* B  Work Week */
      88px      /* C  Hourly Rate */
      100px     /* D  Recorded Hours */
      92px      /* E  Off Clock Hrs */
      92px      /* F  Total Hours */
      115px     /* G  Unpaid ST Up to 40H */
      115px     /* H  Unpaid ST Over 40H */
      115px     /* I  Unpaid OT Premium */
      118px;    /* J  Weekly Total */
    box-sizing: border-box;
  }
  .weekly-grid-row.weekly-col-strip {
    background: #f3f3f3;
    border-bottom: 1px solid #cbd5d9;
    font-size: 11px;
    color: #666;
    font-weight: 600;
  }
  .weekly-grid-row.weekly-col-strip > div {
    padding: 4px 0;
    text-align: center;
    border-right: 1px solid #d1d5d9;
  }
  .weekly-grid-row.weekly-col-strip > div:last-child { border-right: none; }
  .weekly-grid-row.weekly-col-strip > .corner {
    background: #e8e8e8;
    border-right: 1px solid #cbd5d9;
  }
  .weekly-header-row > .weekly-h {
    background: #eee;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #444;
    height: 24px;
    box-sizing: border-box;
    display: flex; align-items: center;
    justify-content: center;
    border-top: 1px solid #cbd5d9;
    border-left: 1px solid #e4e4e4;
    border-bottom: 1px solid #cbd5d9;
    padding: 0 6px;
    text-align: center;
  }
  .weekly-header-row > .weekly-h:last-child { border-right: 1px solid #e4e4e4; }
  .weekly-header-row > .weekly-num {
    background: #e8e8e8;
    border-right: 1px solid #cbd5d9;
    border-bottom: 1px solid #cbd5d9;
    font-size: 10px;
    font-weight: 600;
    color: #888;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    box-sizing: border-box;
  }
  .weekly-data-row > .weekly-c {
    height: 24px;
    box-sizing: border-box;
    display: flex; align-items: center;
    padding: 0 9px;
    font-size: 12px;
    color: #111;
    border-left: 1px solid #e4e4e4;
    border-bottom: 1px solid #e4e4e4;
    background: white;
    overflow: hidden;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .weekly-data-row > .weekly-c:last-child { border-right: 1px solid #e4e4e4; }
  .weekly-data-row > .weekly-num {
    background: #f3f3f3;
    border-right: 1px solid #cbd5d9;
    border-bottom: 1px solid #e4e4e4;
    font-size: 10px;
    font-weight: 600;
    color: #888;
    display: flex; align-items: center; justify-content: center;
    height: 24px;
    box-sizing: border-box;
  }
  .weekly-c.right { justify-content: flex-end; }
  .weekly-c.center { justify-content: center; }
  .weekly-c.muted { color: #555; }
  /* Out-of-range weekly rows (date trim animation): mute every cell to
     a light grey so the row visually drops out of the calculation while
     still showing its date. Animated for a smooth fade. */
  .weekly-data-row.greyed > .weekly-c {
    color: #c8c8c8;
    transition: color 600ms ease;
  }
  .weekly-data-row.greyed > .weekly-num {
    color: #b8b8b8;
    background: #f7f7f7;
  }

  /* In-place highlight applied by title moments via highlightTarget.
     Tints any cell in the matching column / row with a gold pulse so
     the viewer can connect a front-end value to its corresponding
     cells in the spreadsheet without a full spotlight overlay. */
  .tour-highlight {
    position: relative;
    background: rgba(255, 199, 99, 0.18) !important;
    box-shadow: inset 0 0 0 1.5px var(--gold);
    animation: tourHighlightPulse 1.8s ease-in-out infinite;
    z-index: 1;
  }
  @keyframes tourHighlightPulse {
    0%, 100% { box-shadow: inset 0 0 0 1.5px var(--gold), 0 0 0 0 rgba(255, 199, 99, 0); }
    50%      { box-shadow: inset 0 0 0 1.5px var(--gold), 0 0 0 4px rgba(255, 199, 99, 0.35); }
  }
  .weekly-c.total { font-weight: 700; background: #fffbe6; }

  /* Each tab pane handles its own overflow, so the sheet wrapper
     stays put when switching tabs (the has-weekly toggle is now a
     no op). */

  /* ---- Extrapolations tab content ---- */
  .extrap-page {
    background: white;
    font-family: "Segoe UI", "DM Sans", system-ui, sans-serif;
  }
  .extrap-section { margin-bottom: 0; }
  .extrap-section:last-child { margin-bottom: 0; }
  /* Section label strip is hidden so the Excel chrome reads cleanly.
     The active tab name in the bottom bar already names the sheet. */
  .extrap-section-label { display: none; }

  /* Infographic timeline bar */
  .extrap-bar {
    display: flex;
    height: 38px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #cbd5d9;
  }
  .extrap-bar .seg {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    overflow: hidden;
  }
  .extrap-bar .seg-text { z-index: 2; }
  .extrap-bar .seg-before { background: #d97757; }
  .extrap-bar .seg-during { background: #4a6d86; }
  .extrap-bar .seg-after  { background: #d97757; }
  .extrap-bar .seg-gap {
    position: absolute;
    top: 0; bottom: 0;
    width: 5px;
    background: #d97757;
    z-index: 1;
  }
  .extrap-axis {
    display: flex;
    margin-top: 6px;
    font-size: 10px;
    color: #555;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .extrap-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 12px;
    font-size: 11px;
    color: #333;
  }
  .extrap-legend .legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .extrap-legend .dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    background: #d97757;
  }
  .extrap-legend .dot-before { background: #d97757; }
  .extrap-legend .dot-gap    { background: #d97757; outline: 1px solid #4a6d86; outline-offset: -3px; }
  .extrap-legend .dot-after  { background: #d97757; }

  /* Per-employee missing weeks table. Three category groups (Before,
     Within, After) each show Count, Value Of Missing Weeks, and
     Damages Subtotal, plus a single Total Extrapolation Value column
     on the right. Group headers in the first header row span their
     three sub columns. */
  .ext-grid {
    display: grid;
    grid-template-columns:
      36px      /* row gutter */
      minmax(110px, 1fr) /* A  Name */
      52px      /* B  Before Count */
      62px      /* C  Before Value */
      78px      /* D  Before Subtotal */
      52px      /* E  Within Count */
      62px      /* F  Within Value */
      78px      /* G  Within Subtotal */
      52px      /* H  After Count */
      62px      /* I  After Value */
      78px      /* J  After Subtotal */
      96px;     /* K  Total */
    width: 100%;
    min-width: 800px;
  }
  /* Group header row: light blue cells that span their three sub
     columns and the single class-info / total columns on the ends. */
  .ext-grid.ext-group-header > .ext-h-group {
    background: #d9ecf9;
    color: #2f485c;
    font-weight: 800;
    font-size: 10.5px;
    letter-spacing: 0.04em;
    text-align: center;
    height: 24px;
    border-top: 1px solid #b9d9ee;
    border-bottom: 1px solid #b9d9ee;
    border-left: 1px solid #b9d9ee;
    border-right: 1px solid #b9d9ee;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    box-sizing: border-box;
  }
  .ext-grid.ext-group-header > div:nth-child(3),
  .ext-grid.ext-group-header > div:nth-child(4),
  .ext-grid.ext-group-header > div:nth-child(5) {
    grid-column: span 3;
  }
  .ext-grid.ext-header-row > .ext-h {
    line-height: 1.15;
    white-space: normal;
    padding: 4px 4px;
    height: auto;
    min-height: 24px;
    text-align: center;
  }

  /* Thin black lines around each of the five sections (Class Info,
     Before, Within, After, Total). Each section's left edge gets a
     black left border; right edges fall on the next section's left
     border. Top and bottom borders only on the group header row and
     the last data row close the boxes. */
  .ext-grid.ext-group-header > div:nth-child(2),
  .ext-grid.ext-group-header > div:nth-child(3),
  .ext-grid.ext-group-header > div:nth-child(4),
  .ext-grid.ext-group-header > div:nth-child(5),
  .ext-grid.ext-group-header > div:nth-child(6),
  .ext-grid.ext-header-row > div:nth-child(2),
  .ext-grid.ext-header-row > div:nth-child(3),
  .ext-grid.ext-header-row > div:nth-child(6),
  .ext-grid.ext-header-row > div:nth-child(9),
  .ext-grid.ext-header-row > div:nth-child(12),
  .ext-grid.ext-row > div:nth-child(2),
  .ext-grid.ext-row > div:nth-child(3),
  .ext-grid.ext-row > div:nth-child(6),
  .ext-grid.ext-row > div:nth-child(9),
  .ext-grid.ext-row > div:nth-child(12) {
    border-left: 1px solid #000;
  }
  .ext-grid.ext-group-header > div:nth-child(6),
  .ext-grid.ext-header-row > div:nth-child(12),
  .ext-grid.ext-row > div:nth-child(12) {
    border-right: 1px solid #000;
  }
  .ext-grid.ext-group-header > div:nth-child(2),
  .ext-grid.ext-group-header > div:nth-child(3),
  .ext-grid.ext-group-header > div:nth-child(4),
  .ext-grid.ext-group-header > div:nth-child(5),
  .ext-grid.ext-group-header > div:nth-child(6) {
    border-top: 1px solid #000;
  }
  #extrapRows > .ext-grid.ext-row:last-child > div:not(.ext-rownum) {
    border-bottom: 1px solid #000;
  }

  /* Progressive table population. The Extrapolations table starts
     "blank" — names are visible in column A but every .ext-num cell
     renders an empty string (its actual value lives in a data-value
     attribute and gets pulled into textContent via
     updateExtrapTableDisplay() once the current data-state allows
     the column). The Final Tally beat (slide 23,
     animate: "populateMissingWeeks") flips state to "counts" so
     the three Missing Week Count columns reveal. */
  #extrapTable .ext-num {
    transition: background-color 320ms ease;
  }
  /* Highlight bar across the three count columns during the populate
     animation. Pulses the cells gold while the numbers pop in. */
  #extrapTable.populating .ext-cell-count {
    animation: ePopulateFlash 1300ms ease-in-out;
  }
  @keyframes ePopulateFlash {
    0%   { background-color: transparent; }
    18%  { background-color: rgba(255, 199, 99, 0.45); }
    65%  { background-color: rgba(255, 199, 99, 0.45); }
    100% { background-color: transparent; }
  }
  /* Excel-style column letter strip and per-row row number gutter,
     same look as the Front End / Weekly Damages tabs. */
  .ext-grid.ext-col-strip {
    background: #f3f3f3;
    border-bottom: 1px solid #cbd5d9;
    font-size: 11px;
    color: #666;
    font-weight: 600;
  }
  .ext-grid.ext-col-strip > div {
    height: 22px;
    padding: 0 0;
    text-align: center;
    border-right: 1px solid #d1d5d9;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f3f3;
    box-sizing: border-box;
  }
  .ext-grid.ext-col-strip > div:last-child { border-right: none; }
  .ext-grid.ext-col-strip > .corner {
    background: #e8e8e8;
    border-right: 1px solid #cbd5d9;
  }
  .ext-grid > .ext-rownum {
    background: #f3f3f3;
    color: #888;
    font-size: 10px;
    font-weight: 600;
    border-right: 1px solid #cbd5d9;
    border-bottom: 1px solid #e4e4e4;
    border-left: none;
    border-top: none;
    justify-content: center;
    height: 24px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
  }
  .ext-grid.ext-header-row > .ext-rownum {
    background: #e8e8e8;
    border-bottom: 1px solid #cbd5d9;
  }
  .ext-grid > div {
    padding: 0 8px;
    font-size: 12px;
    color: #111;
    border-top: 1px solid #e4e4e4;
    border-left: 1px solid #e4e4e4;
    background: white;
    box-sizing: border-box;
    height: 24px;
    display: flex;
    align-items: center;
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }
  .ext-grid > div:last-child { border-right: 1px solid #e4e4e4; }
  .ext-grid.ext-header-row > .ext-h {
    background: #eee;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #444;
    justify-content: center;
    text-align: center;
    border-top: 1px solid #cbd5d9;
    border-bottom: 1px solid #cbd5d9;
    padding: 6px 4px;
  }
  .ext-row > div.ext-num { justify-content: flex-end; }
  .ext-row > div.ext-num.col-before,
  .ext-row > div.ext-num.col-after,
  .ext-row > div.ext-num.col-during,
  .ext-row > div.ext-num.col-money,
  .ext-row > div.ext-num.col-sub,
  .ext-row > div.ext-num.col-disc,
  .ext-row > div.ext-num.col-final {
    color: #111;
    background: white;
    font-weight: 600;
  }
  .ext-row:last-child > div { border-bottom: 1px solid #e4e4e4; }

  /* Footer note for the extrapolations table, mirroring the widget */
  .ext-foot {
    background: #f8f9fa;
    border: 1px solid #cbd5d9;
    border-top: none;
    padding: 8px 14px;
    font-size: 11.5px;
    color: #555;
    font-family: "DM Sans", sans-serif;
    font-variant-numeric: tabular-nums;
    text-align: center;
  }
  .ext-foot .lab {
    font-weight: 800;
    color: #444;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 9.5px;
    margin-right: 2px;
  }

  /* tab-content handles overflow now, so extrap-page just stays a
     plain block container. */

  /* Allocations table. Same Excel chrome as Front End / Extrapolations
     so the tab transition stays consistent. First column is the row
     number gutter. */
  /* Allocations sheet wrapper. Min-width keeps the grid wide enough
     that horizontal scroll surfaces in the tab-content scroller, so
     the user can pan from the damage breakdown over to the final
     allocation columns. */
  .alloc-stack { min-width: 1186px; }
  .alloc-grid {
    display: grid;
    grid-template-columns:
      36px      /* row gutter */
      200px     /* A  Name (sticky) */
      130px     /* B  Discounted Backpay */
      90px      /* C  Discounted Liquidated Damages (one word per line) */
      130px     /* D  Discounted Extrapolations */
      100px     /* E  Discounted Total Damages (one word per line) */
      90px      /* F  % of Class */
      150px     /* G  Allocation */
      130px     /* H  W-2 Wages */
      130px;    /* I  1099 Income */
    width: 100%;
    min-width: 1186px;
  }
  /* Sticky frozen Name column plus row gutter so the per claimant
     name stays visible while the user scrolls horizontally to reveal
     the final allocation columns. */
  .alloc-grid > .alloc-rownum {
    position: sticky;
    left: 0;
    z-index: 6;
  }
  .alloc-grid > .alloc-name,
  .alloc-grid > .alloc-name-h {
    position: sticky;
    left: 36px;
    z-index: 5;
    background: white;
    border-right: 1px solid #cbd5d9;
  }
  .alloc-grid.alloc-header-row > .alloc-name-h {
    background: #eee;
  }
  .alloc-grid.alloc-total-row > .alloc-name {
    background: #e2efda;
  }
  .alloc-grid.alloc-col-strip > .corner {
    position: sticky;
    left: 0;
    z-index: 6;
  }
  .alloc-grid.alloc-col-strip > .col-letter-A {
    position: sticky;
    left: 36px;
    z-index: 5;
    background: #f3f3f3;
    border-right: 1px solid #cbd5d9;
  }

  /* Pot rows sit at the bottom of the per claimant table. The label
     stays inside the Name column (col 2) so the sticky behavior lines
     up with the frozen Name above it and never bleeds across the
     allocation columns when scrolled right. Grid has 10 tracks:
     1=gutter, 2=Name (sticky), 3=Backpay, 4=Liq, 5=Extrap, 6=Total,
     7=% of Class, 8=Allocation, 9=W-2, 10=1099. */

  /* The pot label cell stays sticky so the description stays under the
     frozen Name column when the user scrolls right to see the dollars
     land in the Allocation column. */
  .alloc-pot-label {
    position: sticky;
    left: 36px;
    z-index: 4;
    background: #fafafa !important;
    font-weight: 600;
    color: #333;
    justify-content: flex-start !important;
    text-align: left;
    padding: 0 12px !important;
    border-right: 1px solid #cbd5d9;
  }
  /* Only the % cell that is also flagged as an input (Attorney Fees
     row) renders as a green editable cell; placeholder pct cells in
     the other pot rows stay blank like ordinary Excel cells. */
  .alloc-pot-pct.alloc-pot-input {
    background: var(--green-cell) !important;
    border-left: 3px solid var(--green-border) !important;
    border-right: 3px solid var(--green-border) !important;
    border-top: 2px solid var(--green-border) !important;
    border-bottom: 2px solid var(--green-border) !important;
    font-weight: 700;
    color: #111;
    justify-content: flex-end !important;
    padding: 0 10px !important;
  }
  .alloc-pot-value.alloc-pot-input {
    background: var(--green-cell) !important;
    border-left: 3px solid var(--green-border) !important;
    border-right: 3px solid var(--green-border) !important;
    border-top: 2px solid var(--green-border) !important;
    border-bottom: 2px solid var(--green-border) !important;
    font-weight: 700;
    color: #111;
    justify-content: flex-end !important;
    padding: 0 12px !important;
  }
  .alloc-pot-value.alloc-pot-derived {
    font-weight: 600;
    color: #444;
    justify-content: flex-end !important;
    padding: 0 12px !important;
    font-style: italic;
  }
  .alloc-pot-blank {
    background: white;
  }
  /* Middle filler cells in pot rows. Render like blank Excel cells so
     the row reads as a continuous strip when in default view, but stop
     bleeding into the sticky Name when scrolled right. */
  .alloc-pot-mid {
    background: white;
    color: #111;
    font-weight: 400;
  }
  .alloc-grid.alloc-pot-final > .alloc-pot-label {
    background: #e2efda !important;
    font-weight: 800;
    color: #1d7044 !important;
    border-top: 2px solid #1d7044 !important;
    border-bottom: 1px solid #e4e4e4;
    height: 26px;
  }
  .alloc-grid.alloc-pot-final > .alloc-pot-value {
    background: #e2efda !important;
    font-weight: 800;
    color: #1d7044 !important;
    border-top: 2px solid #1d7044 !important;
    border-bottom: 1px solid #e4e4e4;
    height: 26px;
    justify-content: flex-end !important;
    padding: 0 12px !important;
  }
  .alloc-grid.alloc-pot-final > .alloc-pot-blank {
    background: white;
    border-top: 2px solid transparent;
    height: 26px;
  }
  /* Empty spacer row between per claimant table and Pot rows. */
  .alloc-grid.alloc-pot-spacer > div {
    background: white;
    border-top: none;
    border-left: none;
  }
  .alloc-grid.alloc-pot-spacer > .alloc-rownum {
    background: #f3f3f3;
    border-right: 1px solid #cbd5d9;
    border-bottom: 1px solid #e4e4e4;
  }
  /* Pulse highlight on the sticky Name column when the freeze
     demonstration moment fires. */
  .alloc-grid > .alloc-name.alloc-freeze-pulse,
  .alloc-grid > .alloc-name-h.alloc-freeze-pulse,
  .alloc-grid.alloc-col-strip > .col-letter-A.alloc-freeze-pulse {
    animation: allocFreezePulse 1300ms ease;
  }
  @keyframes allocFreezePulse {
    0%, 100% { box-shadow: inset 0 0 0 0 rgba(255, 214, 102, 0); }
    35% { box-shadow: inset 0 0 0 3px rgba(255, 214, 102, 0.85); background: #fff9e6 !important; }
  }
  .alloc-grid.alloc-col-strip {
    background: #f3f3f3;
    border-bottom: 1px solid #cbd5d9;
    font-size: 11px;
    color: #666;
    font-weight: 600;
  }
  .alloc-grid.alloc-col-strip > div {
    height: 22px;
    text-align: center;
    border-right: 1px solid #d1d5d9;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f3f3;
    box-sizing: border-box;
    padding: 0;
  }
  .alloc-grid.alloc-col-strip > div:last-child { border-right: none; }
  .alloc-grid.alloc-col-strip > .corner {
    background: #e8e8e8;
    border-right: 1px solid #cbd5d9;
  }
  .alloc-grid > .alloc-rownum {
    background: #f3f3f3;
    color: #888;
    font-size: 10px;
    font-weight: 600;
    border-right: 1px solid #cbd5d9;
    border-bottom: 1px solid #e4e4e4;
    border-left: none;
    border-top: none;
    justify-content: center;
    height: 24px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
  }
  .alloc-grid.alloc-header-row > .alloc-rownum,
  .alloc-grid.alloc-total-row > .alloc-rownum {
    background: #e8e8e8;
  }
  .alloc-grid > div {
    padding: 0 10px;
    font-size: 12px;
    color: #111;
    border-top: 1px solid #e4e4e4;
    border-left: 1px solid #e4e4e4;
    background: white;
    box-sizing: border-box;
    height: 24px;
    display: flex;
    align-items: center;
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }
  .alloc-grid > div:last-child { border-right: 1px solid #e4e4e4; }
  .alloc-grid.alloc-header-row > .alloc-h {
    background: #eee;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #444;
    justify-content: center;
    text-align: center;
    border-top: 1px solid #cbd5d9;
    border-bottom: 1px solid #cbd5d9;
    padding: 4px 6px;
    white-space: normal;
    line-height: 1.15;
  }
  /* Header row stretches to fit any wrapped column labels without
     widening any column. Cells in the header use min-height so the
     row gutter and Name cell stretch with them. */
  .alloc-grid.alloc-header-row > div {
    height: auto;
    min-height: 24px;
  }
  .alloc-row > div.alloc-num { justify-content: flex-end; }
  .alloc-grid.alloc-total-row > div {
    background: #e2efda;
    font-weight: 800;
    color: #1d7044;
    border-top: 2px solid #1d7044;
    border-bottom: 1px solid #e4e4e4;
    height: 26px;
  }
  .alloc-grid.alloc-total-row > div.alloc-num { justify-content: flex-end; }
  /* Trailing blank columns: keep them looking like empty Excel cells
     so the header/total strips stop at the last data column. */
  .alloc-grid.alloc-header-row > .alloc-h:empty {
    background: white;
    border-top: 1px solid #e4e4e4;
    border-bottom: 1px solid #e4e4e4;
  }
  .alloc-grid.alloc-total-row > div:empty {
    background: white;
    color: #111;
    font-weight: 400;
    border-top: 1px solid #e4e4e4;
  }
  /* Embedded methodology widget. Same self contained slide deck we
     built standalone, dropped above the actual table so the user can
     walk the methodology and then see it land in the model below. */

  /* ---- Reminder window: a single framed snapshot of a Front End section
        with the narrator text underneath. Anchored top-left so it never
        sits on top of the spotlighted column. ---- */
  /* Window into the front end, anchored to the bottom of the active
     spreadsheet (above the Excel tab bar) and sitting OVER the lower
     rows of the sheet. Slides up on show, then the inner content
     auto-scrolls to land on the Off the Clock hours row. The whole
     thing fits on one screen by design. positionReminderWindow()
     anchors it to the sheet rect at runtime. */
  .reminder-window {
    position: fixed;
    /* Defaults overridden by positionReminderWindow */
    left: 50%;
    bottom: 110px;
    width: min(900px, calc(100vw - 80px));
    height: 320px;
    min-width: 320px;
    min-height: 200px;
    /* Scale together with the rest of the stage on narrow viewports. */
    scale: var(--stage-scale, 1);
    transform-origin: top left;
    background: white;
    border: 1.5px solid var(--navy-dark);
    border-radius: 8px;
    box-shadow: 0 14px 38px rgba(0,0,0,0.42);
    z-index: 75;
    opacity: 0;
    transform: translate(-50%, 100%);
    transition: opacity 360ms ease,
                transform 720ms cubic-bezier(0.5,0.1,0.25,1);
    pointer-events: none;
    font-family: "DM Sans", system-ui, sans-serif;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .reminder-window.show {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
  }
  /* Windows 10 style title bar: light gray, small icons on the right */
  .reminder-window .rw-titlebar {
    background: linear-gradient(to bottom, #f5f6f8, #e8eaee);
    color: #222;
    border-bottom: 1px solid #d0d4d9;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 0 12px;
    font-family: "Segoe UI", system-ui, sans-serif;
    flex-shrink: 0;
  }
  .reminder-window .rw-title-text {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: #1a1a1a;
  }
  .reminder-window .rw-win-btns {
    display: flex;
    height: 100%;
  }
  .reminder-window .rw-win-btn {
    width: 38px;
    height: 100%;
    background: transparent;
    border: 0;
    color: #2a2a2a;
    font-size: 12px;
    line-height: 1;
    cursor: default;
    display: flex; align-items: center; justify-content: center;
    font-family: "Segoe UI Symbol", "Segoe UI", system-ui, sans-serif;
    transition: background 120ms ease;
  }
  .reminder-window .rw-win-btn:hover { background: rgba(0,0,0,0.06); }
  .reminder-window .rw-win-btn.rw-close:hover { background: #e81123; color: white; }
  .reminder-window .rw-excel {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: white;
    overflow: hidden;
    min-height: 0;
  }
  .reminder-window .rw-menu-bar {
    background: linear-gradient(to bottom, #f7f7f7, #e9e9e9);
    border-bottom: 1px solid #c4c8cd;
    display: flex;
    height: 26px;
    flex-shrink: 0;
    font-size: 12px;
    align-items: center;
  }
  .reminder-window .rw-menu-bar .menu-item {
    padding: 0 11px;
    color: #444;
    height: 100%;
    display: flex; align-items: center;
  }
  .reminder-window .rw-menu-bar .menu-item.active {
    background: white;
    border-top: 2px solid #217346;
    /* offset so the green sits flush with the top of the menu bar */
    margin-top: -1px;
    padding-top: 0;
    font-weight: 700;
    color: #111;
  }
  .reminder-window .rw-menu-bar .file-tab { background: #217346; color: white; font-weight: 700; }
  .reminder-window .rw-name-bar {
    background: white;
    border-bottom: 1px solid #cbd5d9;
    height: 26px;
    display: flex; align-items: center;
    padding: 0 10px;
    font-size: 12px; color: #555;
    flex-shrink: 0;
  }
  .reminder-window .rw-name-bar .name-box {
    width: 70px;
    padding-right: 8px;
    border-right: 1px solid #d1d5d9;
  }
  .reminder-window .rw-name-bar .fx-label { padding: 0 10px; font-style: italic; color: #888; }
  .reminder-window .rw-col-strip {
    display: grid;
    grid-template-columns: 32px repeat(8, 1fr);
    background: #f3f3f3;
    border-bottom: 1px solid #cbd5d9;
    font-size: 11px; color: #666; font-weight: 600;
    flex-shrink: 0;
  }
  .reminder-window .rw-col-strip > div {
    padding: 4px 0;
    text-align: center;
    border-right: 1px solid #d1d5d9;
  }
  .reminder-window .rw-col-strip > div:last-child { border-right: none; }
  .reminder-window .rw-col-strip > .corner { background: #e8e8e8; }
  .reminder-window .rw-body {
    display: flex; align-items: stretch;
    flex: 1;
    overflow: hidden;
    min-height: 0;
  }
  .reminder-window .rw-row-gutter {
    flex-shrink: 0;
    width: 32px;
    background: #f3f3f3;
    border-right: 1px solid #cbd5d9;
    font-size: 10px;
    font-weight: 600;
    color: #888;
    overflow: hidden;
  }
  .reminder-window .rw-row-gutter .gnum {
    height: 24px;
    border-bottom: 1px solid #e4e4e4;
    display: flex; align-items: center; justify-content: center;
  }
  .reminder-window .rw-content {
    flex: 1;
    overflow: auto;
    background: white;
    min-width: 0;
    scroll-behavior: smooth;
  }
  /* Force a min-width on the inner content so the chance-of-success
     and other long labels (Unpaid Straight Time Up to 40H) don't get
     clipped, and horizontal scroll appears when the window is sized
     narrower than this. */
  .reminder-window .rw-content-inner {
    min-width: 880px;
  }
  /* OTC cell pulses gold during the demo */
  .reminder-window .s-cell.input-cell.flash {
    animation: rwCellFlash 1.4s ease infinite;
  }
  @keyframes rwCellFlash {
    0%,100% { background: var(--green-cell); }
    30% { background: #ffd56a; }
  }
  .reminder-window .reminder-label {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--navy);
    margin-bottom: 8px;
  }

  /* The "window pane" framing the snapshot of the Front End */
  /* Final Allocation Builder panel. Floats into the lower right
     corner of the spreadsheet as the freeze and scroll animation
     reveals the final allocation columns. Position is set in JS so
     the bottom edge always lands inside the lower portion of the
     Excel sheet (overlapping the bottom rows) and never spills into
     the dark area below the stage. */
  .alloc-pot-panel {
    position: fixed;
    right: clamp(16px, 3vw, 40px);
    bottom: clamp(180px, 22vh, 240px);
    width: 360px;
    background: white;
    border: 1.5px solid var(--navy-dark);
    border-radius: 10px;
    box-shadow: 0 18px 48px rgba(0,0,0,0.28);
    padding: 12px 14px 14px;
    z-index: 90;
    opacity: 0;
    pointer-events: none;
    transform: translateY(14px);
    transition: opacity 420ms ease, transform 420ms ease;
    box-sizing: border-box;
    font-family: "Segoe UI", "DM Sans", system-ui, sans-serif;
  }
  .alloc-pot-panel.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  .alloc-pot-panel .apb-heading {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 15px;
    font-weight: 800;
    color: var(--navy-dark);
    line-height: 1.2;
    text-align: center;
    margin: 0 0 10px;
  }
  .alloc-pot-panel .apb-row {
    display: grid;
    grid-template-columns: 1fr 130px;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    border-bottom: 1px solid #eee;
  }
  .alloc-pot-panel .apb-row:last-child { border-bottom: none; }
  .alloc-pot-panel .apb-label {
    font-size: 12px;
    color: #333;
    font-weight: 500;
  }
  .alloc-pot-panel .apb-value {
    font-size: 12px;
    color: #111;
    font-weight: 600;
    text-align: right;
    padding: 4px 10px;
    height: 24px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-variant-numeric: tabular-nums;
  }
  .alloc-pot-panel .apb-value.apb-input {
    background: var(--green-cell);
    border: 2px solid var(--green-border);
    border-left-width: 3px;
    border-right-width: 3px;
    font-weight: 700;
    border-radius: 2px;
  }
  .alloc-pot-panel .apb-final {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 2px solid #1d7044;
    border-bottom: none;
  }
  .alloc-pot-panel .apb-final .apb-label {
    color: #1d7044;
    font-weight: 800;
    font-size: 13px;
  }
  .alloc-pot-panel .apb-final .apb-value {
    background: #e2efda;
    color: #1d7044;
    font-weight: 800;
    font-size: 13px;
    border-radius: 2px;
  }

  /* Front end snapshot panel used on the Extrapolations cos slides.
     Anchored to the lower part of the stage above the sheet tabs.
     Wider, full front end styling, with a vertical scroller that
     animates from Chance of Success down to Extrapolation Discounts
     between slides. */
  .fe-snapshot {
    position: fixed;
    left: 50%;
    bottom: clamp(190px, 24vh, 260px);
    transform: translate(-50%, 12px);
    width: min(820px, calc(100vw - 40px));
    background: white;
    border: 1.5px solid var(--navy-dark);
    border-radius: 10px;
    box-shadow: 0 18px 48px rgba(0,0,0,0.28);
    padding: 12px 14px 14px;
    z-index: 90;
    opacity: 0;
    pointer-events: none;
    transition: opacity 380ms ease, transform 380ms ease;
    box-sizing: border-box;
  }
  .fe-snapshot.show {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
  }
  .fe-snap-heading {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 16px;
    font-weight: 800;
    color: var(--navy-dark);
    line-height: 1.2;
    text-align: center;
    margin: 0 0 8px;
    transition: opacity 220ms ease;
  }
  .fe-snap-heading.fading { opacity: 0; }
  .fe-snap-frame {
    background: white;
    border: 1px solid #b8bdc4;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(20,37,63,0.08);
    position: relative;
  }
  .fe-snap-titlebar {
    background: #f3f3f3;
    border-bottom: 1px solid #cbd5d9;
    padding: 4px 10px;
    font-family: "Segoe UI", "DM Sans", system-ui, sans-serif;
    font-size: 10px;
    font-weight: 700;
    color: #555;
    letter-spacing: 0.10em;
    text-transform: uppercase;
  }
  .fe-snap-scroller {
    height: 140px;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    padding: 6px 8px 8px;
    background: white;
  }
  .fe-snap-scroller::-webkit-scrollbar { width: 12px; }
  .fe-snap-scroller::-webkit-scrollbar-track { background: #f3f3f3; border-left: 1px solid #cbd5d9; }
  .fe-snap-scroller::-webkit-scrollbar-thumb {
    background: #cbd0d6;
    border: 2px solid #f3f3f3;
    border-radius: 6px;
  }
  .fe-snap-scroller::-webkit-scrollbar-thumb:hover { background: #b0b6bc; }
  .fe-snap-content .sheet-section {
    margin-bottom: 16px;
    border: 1px solid #e4e4e4;
  }
  .fe-snap-content .sheet-section:last-child { margin-bottom: 4px; }
  .fe-snap-text {
    margin-top: 10px;
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 12.5px;
    line-height: 1.45;
    color: #333;
    text-align: center;
    transition: opacity 220ms ease;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
  .fe-snap-text.fading { opacity: 0; }
  .fe-snap-cursor {
    position: absolute;
    width: 22px;
    height: 26px;
    pointer-events: none;
    opacity: 0;
    z-index: 91;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35));
    transition: opacity 220ms ease, top 700ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .fe-snap-cursor.show { opacity: 1; }

  /* Reminder window swaps which front end snapshot is on display.
     Default view shows OTC (case variables); .rf-cos-mode swaps to
     the chance of success and extrapolation discounts panel and
     places the narration text in a side column on the right of the
     front end frame. */
  .reminder-window:not(.rf-cos-mode) .reminder-frame.rf-cos { display: none; }
  .reminder-window.rf-cos-mode .reminder-frame.rf-otc { display: none; }
  .reminder-window.rf-cos-mode {
    width: min(580px, calc(100vw - 48px));
    display: grid;
    grid-template-columns: 240px 1fr;
    grid-template-rows: auto auto;
    gap: 4px 16px;
    align-items: start;
  }
  .reminder-window.rf-cos-mode .reminder-label {
    grid-column: 1 / 3;
    grid-row: 1;
  }
  .reminder-window.rf-cos-mode .reminder-frame.rf-cos {
    grid-column: 1;
    grid-row: 2;
    margin-bottom: 0;
  }
  .reminder-window.rf-cos-mode .reminder-text {
    grid-column: 2;
    grid-row: 2;
    align-self: stretch;
    padding: 0 2px;
    margin-top: 0;
    border-top: none;
    line-height: 1.45;
  }
  .reminder-frame {
    background: white;
    border: 1px solid #cbd5d9;
    border-radius: 5px;
    padding: 6px 0 8px;
    margin-bottom: 12px;
    box-shadow:
      inset 0 0 0 1px #f6f6f6,
      0 2px 8px rgba(0,0,0,0.06);
    font-family: "Segoe UI", "DM Sans", system-ui, sans-serif;
    overflow: hidden;
    max-height: 240px;
    transition: opacity 360ms ease, max-height 460ms cubic-bezier(0.4,0,0.2,1),
                margin 460ms ease, padding 460ms ease, border-color 360ms ease;
  }
  .reminder-frame.collapsed {
    opacity: 0;
    max-height: 0;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-color: transparent;
  }
  .reminder-window .reminder-label {
    transition: opacity 320ms ease, max-height 380ms ease, margin 380ms ease;
    overflow: hidden;
    max-height: 24px;
  }
  .reminder-window .reminder-label.collapsed {
    opacity: 0;
    max-height: 0;
    margin: 0;
  }
  .reminder-frame .rf-section-label {
    font-size: 11px;
    font-weight: 700;
    color: #111;
    padding: 2px 10px 4px;
  }
  .reminder-frame .rf-sub-label {
    font-size: 10px;
    font-style: italic;
    font-weight: 600;
    color: #555;
    padding: 2px 10px 4px 22px;
  }
  .reminder-frame .rf-row {
    display: grid;
    grid-template-columns: 1fr 78px;
    align-items: center;
    gap: 8px;
    padding: 2px 8px;
    border-top: 1px solid #eee;
  }
  .reminder-frame .rf-label-cell {
    text-align: right;
    font-size: 11px;
    color: #333;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .reminder-frame .rf-input-cell {
    background: var(--green-cell);
    border: 1px solid var(--green-border);
    border-radius: 2px;
    padding: 1px 8px;
    font-weight: 700;
    text-align: right;
    color: #111;
    font-variant-numeric: tabular-nums;
    font-size: 11px;
  }
  .reminder-frame .rf-input-wrap {
    display: flex;
    align-items: stretch;
    gap: 0;
  }
  .reminder-frame .rf-input-wrap .rf-input-cell {
    flex: 1;
    border-radius: 2px 0 0 2px;
  }
  .reminder-frame .rf-spinner {
    display: flex;
    flex-direction: column;
    width: 14px;
    border: 1px solid var(--green-border);
    border-left: none;
    border-radius: 0 2px 2px 0;
    overflow: hidden;
  }
  .reminder-frame .rf-spin {
    flex: 1;
    background: #ededed;
    border: none;
    border-bottom: 1px solid #cfcfcf;
    color: #555;
    font-size: 6px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .reminder-frame .rf-spin:last-child { border-bottom: none; }
  .reminder-frame .rf-spin.pressed {
    background: #c8c8c8;
  }

  /* ---- Ghost cursor for guided click animations ---- */
  .ghost-cursor {
    position: fixed;
    width: 22px;
    height: 26px;
    pointer-events: none;
    z-index: 200;
    opacity: 0;
    transform-origin: 4px 4px;
    /* Scale together with the rest of the stage so the cursor size
       tracks the responsive layout. The .click rule's transform: scale
       composes on top (e.g. at scale 0.5, click visually = 0.41 -> still
       82% of the cursor's resting visual size). */
    scale: var(--stage-scale, 1);
    transition:
      opacity 220ms ease,
      top 520ms cubic-bezier(0.4, 0, 0.2, 1),
      left 520ms cubic-bezier(0.4, 0, 0.2, 1),
      transform 120ms ease;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35));
  }
  .ghost-cursor.show { opacity: 1; }
  .ghost-cursor.click { transform: scale(0.82); }

  .reminder-window .reminder-text {
    font-size: 13px;
    line-height: 1.45;
    color: #111;
    font-weight: 500;
    transition: opacity 260ms ease;
  }
  .reminder-window .reminder-text.fading { opacity: 0; }
  .reminder-window .reminder-text:empty { display: none; }

  /* Floating spinner used during the per-week-edit animation. Sits
     outside the weekly table so row rebuilds (each OTC override
     triggers a full container.innerHTML replace) don't wipe it.
     Position is set inline by JS to track whatever cell is currently
     being edited; scales together with the rest of the stage so the
     visual size matches the cell at any --stage-scale. */
  .weekly-otc-floating-spinner {
    position: fixed;
    display: flex;
    flex-direction: column;
    width: 14px;
    height: 22px;
    pointer-events: none;
    z-index: 150;
    opacity: 0;
    scale: var(--stage-scale, 1);
    transform-origin: top left;
    transition:
      opacity 200ms ease,
      top 320ms cubic-bezier(0.4, 0, 0.2, 1),
      left 320ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .weekly-otc-floating-spinner.show { opacity: 1; }
  .weekly-otc-floating-spinner .weekly-otc-spin {
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    font-size: 7px;
    color: #555;
    background: white;
    border: 1px solid #cbd5d9;
    line-height: 1;
    transition: background 110ms ease, color 110ms ease;
  }
  .weekly-otc-floating-spinner .weekly-otc-spin-up { border-radius: 2px 2px 0 0; }
  .weekly-otc-floating-spinner .weekly-otc-spin-down { border-radius: 0 0 2px 2px; border-top: none; }
  .weekly-otc-floating-spinner .weekly-otc-spin.pressed {
    background: var(--gold);
    color: #111;
  }

  /* Editable per-row OTC styling. Applied during the randomize animation
     so the column visually matches a Front End green input cell. The
     green fade-in is intentionally slow so the user reads the change. */
  .weekly-data-row > .weekly-c.weekly-col-otc {
    transition: background 1100ms ease, border-color 1100ms ease;
  }
  .weekly-data-row > .weekly-c.weekly-col-otc.editable {
    background: var(--green-cell);
    border-color: var(--green-border);
    border-top: 1px solid var(--green-border);
    border-bottom: 1px solid var(--green-border);
    border-left: 1px solid var(--green-border);
    border-right: 1px solid var(--green-border);
    font-weight: 700;
  }
  .weekly-data-row > .weekly-c.weekly-col-otc.flash {
    animation: cellFlashGreen 700ms ease;
  }
  @keyframes cellFlashGreen {
    0%   { background: var(--green-cell); }
    30%  { background: #ffd56a; }
    100% { background: var(--green-cell); }
  }

  .tab-scroll-arrows {
    display: flex; gap: 2px;
    padding-bottom: 4px;
    color: #888; font-size: 11px;
  }
  .tab-scroll-arrows span { padding: 0 5px; cursor: default; }

  /* ---- Dialogue bubbles ---- */
  .bubble {
    position: fixed;
    max-width: 260px;
    padding: 14px 18px;
    border-radius: 18px;
    font-size: 15px; line-height: 1.4;
    font-weight: 500;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 420ms ease, transform 420ms ease;
    z-index: 70;
    pointer-events: none;
  }
  .bubble.show { opacity: 1; transform: translateY(0); }
  .bubble .tag {
    display: block;
    font-size: 9px; font-weight: 800;
    letter-spacing: 0.18em; text-transform: uppercase;
    margin-bottom: 4px;
    opacity: 0.7;
  }
  .bubble.plt {
    background: white; color: #111;
    border-bottom-left-radius: 6px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.15);
  }
  .bubble.def {
    background: var(--navy); color: white;
    border-bottom-right-radius: 6px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.2);
  }
  .bubble.med {
    background: var(--pill-blue);
    border: 1px solid var(--pill-blue-border);
    color: var(--navy-dark);
    font-style: italic;
    box-shadow: 0 10px 28px rgba(0,0,0,0.12);
  }

  /* Full-screen dim used by title moments that set dimBackground: true.
     Sits below column spotlights (z-index 30) and the title card
     (z-index 90 normally, 200 in editing mode), so those overlays pop
     while the rest of the screen darkens. When column spotlights are
     active, showColumnSpotlights swaps the solid background for an
     SVG that punches cutouts at each spotlight's rect; the dim then
     wraps around the columns instead of covering them. */
  .bg-dim {
    position: fixed;
    inset: 0;
    background: rgba(20, 30, 42, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 480ms ease;
    z-index: 25;
  }
  .bg-dim.show { opacity: 1; }
  .bg-dim.with-cutouts { background: transparent; }

  /* ---- Spotlight ---- */
  .spotlight {
    position: fixed;
    pointer-events: none;
    border-radius: 10px;
    box-shadow:
      0 0 0 9999px rgba(20, 30, 42, 0.55),
      0 0 0 3px var(--spot-glow) inset,
      0 0 24px 4px var(--spot-glow);
    opacity: 0;
    transition:
      top 650ms cubic-bezier(0.5,0.1,0.25,1),
      left 650ms cubic-bezier(0.5,0.1,0.25,1),
      width 650ms cubic-bezier(0.5,0.1,0.25,1),
      height 650ms cubic-bezier(0.5,0.1,0.25,1),
      opacity 450ms ease;
    z-index: 50;
  }
  .spotlight.show { opacity: 1; }

  .caption {
    position: fixed;
    background: white;
    color: #111;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1.5px solid var(--navy-dark);
    font-size: 12.5px; line-height: 1.4;
    font-weight: 500;
    box-shadow: 0 8px 26px rgba(0,0,0,0.2);
    max-width: 195px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 380ms ease, transform 380ms ease, top 650ms cubic-bezier(0.5,0.1,0.25,1), left 650ms cubic-bezier(0.5,0.1,0.25,1);
    z-index: 60;
    pointer-events: none;
  }
  .caption.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    cursor: move;
    animation: captionPulseRing 2.6s ease-in-out infinite;
  }
  .caption .cap-title {
    font-family: "DM Sans", sans-serif;
    font-size: 12px;
    font-weight: 800;
    color: var(--navy-dark);
    margin-bottom: 6px;
    padding-left: 8px;
    border-left: 3px solid #a87848;
    line-height: 1.15;
  }
  .caption .cap-title:empty { display: none; }
  @keyframes captionPulseRing {
    0%, 100% {
      box-shadow:
        0 0 0 0 rgba(29, 44, 58, 0.0),
        0 8px 26px rgba(0, 0, 0, 0.2);
    }
    50% {
      box-shadow:
        0 0 0 6px rgba(29, 44, 58, 0.18),
        0 8px 26px rgba(0, 0, 0, 0.2);
    }
  }
  .caption::before {
    content: ""; position: absolute;
    width: 12px; height: 12px;
    background: white;
    border: 1.5px solid var(--navy-dark);
    transform: rotate(45deg);
    display: none;
    z-index: -1;
  }
  .caption.anchor-top::before,
  .caption.anchor-bottom::before,
  .caption.anchor-left::before,
  .caption.anchor-right::before { display: none; }
  .caption.anchor-top::before { top: -7px; left: 22px; }
  .caption.anchor-bottom::before { bottom: -7px; left: 22px; }
  .caption.anchor-left::before { left: -7px; top: 18px; }
  .caption.anchor-right::before { right: -7px; top: 18px; }

  /* ---- Title card ---- */
  .title-card {
    position: fixed;
    /* Lands just under the second row of the active sheet so the top
       header rows (page header, ribbon, formula bar, col strip, first
       data row) stay visible above the card. */
    top: 200px; left: 50%;
    transform: translate(-50%, 10px);
    /* transform-origin set so the standalone scale composes naturally
       with translate(-50%, 0): scaling around the top-center keeps the
       card visually centered in the viewport when the stage scales
       down. showTitleCard switches origin to "top left" for positioned
       cards (slides 12-15) so the inline left/top anchor stays put. */
    transform-origin: 50% 0;
    scale: var(--stage-scale, 1);
    background: white;
    padding: 22px 32px 18px;
    border-radius: 12px;
    border: 1.5px solid var(--navy-dark);
    text-align: center;
    box-shadow: 0 18px 48px rgba(0,0,0,0.24);
    opacity: 0;
    transition: opacity 500ms ease, transform 500ms ease;
    z-index: 90;
    pointer-events: none;
    max-width: 620px;
    width: calc(100vw - 32px);
  }
  .title-card.show {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
    cursor: move;
  }
  .title-card .intro-brand {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 4px;
    letter-spacing: -0.01em;
  }
  .title-card .intro-presenter {
    font-family: "DM Sans", sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 20px;
  }
  .title-card .intro-brand:empty,
  .title-card .intro-presenter:empty { display: none; }
  .title-card .contention-label {
    font-family: "DM Sans", sans-serif;
    font-size: 11px; font-weight: 800;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--navy);
    margin-bottom: 10px;
  }
  .title-card .contention-label:empty { display: none; margin: 0; }
  .title-card .contention-title {
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(22px, 2.8vw, 30px);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #111;
    line-height: 1.2;
    margin-bottom: 10px;
  }
  .title-card .contention-desc {
    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: #555;
    margin: 0 auto 12px;
    max-width: 520px;
    transition: opacity 260ms ease;
  }
  .title-card .contention-desc.fading { opacity: 0; }

  /* Title card with custom position+size (set inline by showTitleCard
     when a moment provides position{x,y,w,h}). Overrides the centered
     defaults so the inline left/top take effect. */
  .title-card.tc-positioned {
    /* left/top set inline; clear the centering transform via inline
       style. max-width override so width: <px> is respected. */
    max-width: none;
    width: auto;
  }
  .title-card.tc-positioned,
  .title-card.tc-positioned.show {
    /* Positioned cards anchor by inline left/top, so the centering
       translate from .title-card / .title-card.show must NOT apply.
       Hold transform at none and exclude it from the card's
       transition (otherwise the inline override animates from the
       prior centering translate over 500ms and reads as a glitch).
       Standalone `scale: var(--stage-scale, 1)` still applies, with
       transform-origin: top left set inline by showTitleCard. */
    transform: none;
    transition: opacity 500ms ease;
  }

  /* Compact card styling shared by all positioned cards (with or
     without an embedded mini front end). The default centered layout's
     padding + font sizes are tuned for a wide centered intro card and
     read as oversized in the smaller lower-left positioned slot. */
  .title-card.tc-positioned,
  .title-card.tc-with-fe {
    text-align: left;
    padding: 16px 18px 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .title-card.tc-positioned .contention-label,
  .title-card.tc-positioned .contention-title,
  .title-card.tc-positioned .contention-desc,
  .title-card.tc-with-fe .contention-label,
  .title-card.tc-with-fe .contention-title,
  .title-card.tc-with-fe .contention-desc {
    margin-left: 0;
    margin-right: 0;
    max-width: none;
  }
  .title-card.tc-positioned .contention-label,
  .title-card.tc-with-fe .contention-label { margin-bottom: 4px; }
  .title-card.tc-positioned .contention-title,
  .title-card.tc-with-fe .contention-title { margin-bottom: 4px; font-size: 18px; }
  .title-card.tc-positioned .contention-desc,
  .title-card.tc-with-fe .contention-desc { margin-bottom: 4px; font-size: 13px; line-height: 1.4; }

  /* Summary banner variant (slide 23 Final Tally). Centers content,
     tightens padding, and recolors the eyebrow gold so the banner
     visually pairs with the column halos above it. */
  .title-card.tc-summary {
    text-align: center;
    padding: 16px 28px 14px;
    align-items: center;
    justify-content: center;
  }
  .title-card.tc-summary .contention-label {
    color: var(--gold);
  }
  .title-card.tc-summary .contention-title {
    margin-bottom: 6px;
  }
  .title-card.tc-summary .contention-desc {
    max-width: 560px;
    margin: 0 auto;
  }

  /* ==== Mini front-end snippet inside a title card ====
     Visually matches the real Case Variables section so a viewer can
     instantly recognize "this is your front end". A gray titlebar +
     close-style buttons evoke a sub-window; the section header / label
     cells / green input cells reuse the same colors and border weights
     the real .vars-row uses. */
  .tc-fe-snippet.hidden { display: none; }
  .tc-fe-snippet {
    border: 1px solid #cbd5d9;
    border-radius: 6px;
    background: white;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
    font-family: "Segoe UI", "DM Sans", system-ui, sans-serif;
  }
  .tcfe-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(to bottom, #f5f5f5, #e2e2e2);
    border-bottom: 1px solid #cbd5d9;
    padding: 4px 6px 4px 10px;
    font-size: 11px;
    color: #333;
  }
  .tcfe-titlebar-text { font-weight: 600; letter-spacing: 0.02em; }
  .tcfe-titlebar-btns { display: flex; gap: 2px; }
  .tcfe-titlebar-btn {
    width: 18px; height: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px;
    color: #555;
    background: transparent;
    border: 1px solid transparent;
  }
  .tcfe-titlebar-btn.tcfe-close { color: #c33; }

  .tcfe-frame {
    background: white;
    /* Match the real sheet-section's outer border treatment */
    border-top: 1px solid #e4e4e4;
  }
  .tcfe-row {
    display: grid;
    /* label flex | input fixed | trailing empty cell so the green input
       cluster has breathing room and its right border isn't flush
       against the snippet's outer edge */
    grid-template-columns: 1fr 96px 36px;
    height: 22px;
    box-sizing: border-box;
    transition: background 220ms ease;
  }
  /* Empty trailing cell that sits to the right of the input column */
  .tcfe-trailing {
    background: white;
  }
  /* Empty row at the bottom hints the section continues below */
  .tcfe-row-blank .tcfe-cell { background: white; }
  .tcfe-cell {
    display: flex; align-items: center;
    height: 22px;
    box-sizing: border-box;
    padding: 0 8px;
    font-size: 12px;
    color: #111;
    border-top: 1px solid #e4e4e4;
    border-left: 1px solid #e4e4e4;
    background: white;
    overflow: hidden;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .tcfe-row:first-child .tcfe-cell { border-top: none; }
  .tcfe-row .tcfe-cell:last-child { border-right: 1px solid #e4e4e4; }
  .tcfe-row:last-child .tcfe-cell { border-bottom: 1px solid #e4e4e4; }

  /* Section header row — matches .header-row .section-name styling */
  .tcfe-row-head { background: #eee; }
  .tcfe-section-name {
    background: #eee;
    font-size: 11px;
    font-weight: 700;
    color: #111;
    justify-content: flex-start;
  }
  .tcfe-value-head {
    background: #eee;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #666;
    justify-content: center;
  }

  /* Label cell: gray bg, right-aligned, weight 500 — same as real label-cell */
  .tcfe-label {
    justify-content: flex-end;
    background: #fafafa;
    font-weight: 500;
    color: #333;
    font-size: 11px;
    text-align: right;
  }
  /* Input cell: green styling matching real .input-cell */
  .tcfe-input {
    justify-content: flex-end;
    background: var(--green-cell);
    border: 1.5px solid var(--green-border);
    border-left-width: 3px;
    border-right-width: 3px;
    font-weight: 700;
    color: #111;
    padding: 0 4px 0 10px;
    font-size: 12px;
    position: relative;
    gap: 4px;
  }
  .tcfe-input-value {
    flex: 1;
    text-align: right;
    transition: color 220ms ease;
  }
  /* Spreadsheet-style up/down spinner inside the input cell. Hidden by
     default; only the specific arrow being clicked fades in (.tcfe-spin-
     -reveal on the child) so the presentation stays uncluttered when no
     interaction is happening. */
  .tcfe-spinner {
    display: flex;
    flex-direction: column;
    width: 14px;
    height: 18px;
    user-select: none;
    opacity: 1;
  }
  .tcfe-spin {
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    font-size: 7px;
    color: #555;
    line-height: 1;
    background: white;
    border: 1px solid #cbd5d9;
    opacity: 0;
    transition: opacity 200ms ease, background 120ms ease;
  }
  .tcfe-spin + .tcfe-spin { border-top: none; }
  .tcfe-spin-up    { border-radius: 2px 2px 0 0; }
  .tcfe-spin-down  { border-radius: 0 0 2px 2px; }
  .tcfe-spin.tcfe-spin-reveal { opacity: 1; }
  /* When the parent input cell is "active" (during an animation), both
     up and down spinners are visible throughout the sequence so the
     viewer can see what the cursor is choosing between, not just the
     button being pressed at the moment. */
  .tcfe-input.tcfe-input-active .tcfe-spin { opacity: 1; }
  .tcfe-spin.tcfe-spin-pressed {
    background: var(--gold);
    color: #111;
    opacity: 1;
  }
  /* First input row in the section uses thicker top border, last uses
     thicker bottom — same convention as the real sheet-section */
  .tcfe-row-head + .tcfe-row .tcfe-input { border-top-width: 3px; }
  .tcfe-row:last-child .tcfe-input { border-bottom-width: 3px; }

  /* Highlighted row (the front-end variable being demonstrated this
     slide). Input cell adopts the same orange-gold tint that
     .tour-highlight paints on the matching live-table column so the
     viewer's eye reads them as a single highlighted pair. */
  .tcfe-hot { background: rgba(255, 199, 99, 0.10); }
  .tcfe-hot .tcfe-input {
    background: rgba(255, 199, 99, 0.18) !important;
    box-shadow: 0 0 0 2px var(--gold);
    animation: tcFeHotPulse 1.6s ease-in-out infinite;
  }
  @keyframes tcFeHotPulse {
    0%, 100% { box-shadow: 0 0 0 2px var(--gold), 0 0 0 0 rgba(255, 199, 99, 0); }
    50%      { box-shadow: 0 0 0 2px var(--gold), 0 0 0 6px rgba(255, 199, 99, 0.35); }
  }

  /* Optional graphic embedded inside the title card. Built per-kind by
     setTitleCardGraphic, sequenced via .tcg-stage-N classes. The
     missing-weeks bar uses fixed pixel widths (clamped to viewport) so
     the data pull never shrinks; new segments add on the outside. The
     bar shifts horizontally so the data pull stays centered. */
  .title-card-graphic {
    margin: 4px auto 12px;
    max-width: 560px;
    width: 100%;
  }
  .title-card-graphic.hidden { display: none; }

  /* Value tiles for the methodology slides. Driver / manager / office
     palette matches the missing weeks color story. */
  .vt-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .vt-tile {
    border-radius: 8px;
    padding: 8px 6px 10px;
    text-align: center;
    color: white;
    box-shadow: 0 3px 8px rgba(20,37,63,0.10);
  }
  .vt-tile.vt-driver  { background: #4a6d86; }
  .vt-tile.vt-manager { background: #6f5a8a; }
  .vt-tile.vt-office  { background: #b6794f; }
  .vt-col { background: transparent; }
  .vt-name {
    font-size: 11px; font-weight: 800;
    letter-spacing: 0.06em; text-transform: uppercase;
    line-height: 1;
  }
  .vt-role {
    font-size: 8.5px; font-weight: 700;
    letter-spacing: 0.10em; text-transform: uppercase;
    opacity: 0.78; line-height: 1; margin-top: 3px;
  }
  .vt-val {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 18px; font-weight: 800; line-height: 1;
    font-variant-numeric: tabular-nums; margin-top: 6px;
  }
  .vt-per {
    display: block;
    font-family: "DM Sans", sans-serif;
    font-size: 7.5px; font-weight: 700;
    letter-spacing: 0.10em; text-transform: uppercase;
    opacity: 0.85; margin-top: 4px;
  }

  /* Job title columns variant */
  .vt-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px; align-items: start;
  }
  .vt-col { display: flex; flex-direction: column; gap: 6px; }
  .vt-sum {
    text-align: center;
    padding: 4px 4px 0;
  }
  .vt-sum-line {
    height: 2px; width: 100%; background: currentColor;
    border-radius: 1px; margin-bottom: 6px;
  }
  .vt-driver  .vt-sum, .vt-col.vt-driver  { color: #4a6d86; }
  .vt-manager .vt-sum, .vt-col.vt-manager { color: #6f5a8a; }
  .vt-office  .vt-sum, .vt-col.vt-office  { color: #b6794f; }
  .vt-sum-label {
    font-size: 9px; font-weight: 800;
    letter-spacing: 0.10em; text-transform: uppercase;
    margin-bottom: 3px;
  }
  .vt-sum-val {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 18px; font-weight: 800; line-height: 1;
    color: #111; font-variant-numeric: tabular-nums;
  }
  .vt-sum-val .vt-per { color: #888; }

  /* Time period diptych */
  .vt-diptych {
    display: flex; flex-direction: column; gap: 10px;
  }
  .vt-dip-card {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 14px; align-items: center;
    background: #faf8f3;
    border: 1.5px solid #4a6d86;
    border-radius: 10px;
    padding: 10px 16px;
  }
  .vt-dip-high { border-color: #d97757; }
  .vt-dip-period {
    font-size: 10px; font-weight: 800;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: #4a6d86; line-height: 1.3;
  }
  .vt-dip-high .vt-dip-period { color: #d97757; }
  .vt-dip-val {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 26px; font-weight: 800;
    line-height: 1; color: #111;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }
  .vt-dip-val .vt-per { color: #888; }
  .vt-dip-target {
    text-align: right;
    font-size: 11px; font-weight: 600;
    color: #555; line-height: 1.3;
  }
  .vt-dip-target b { color: #d97757; font-weight: 800; }

  .tcg-stage-area {
    position: relative;
    height: 135px;
    width: 100%;
    transition: max-height 460ms cubic-bezier(0.4,0,0.2,1) 540ms, margin 460ms ease 540ms;
  }
  /* On stage 7 the bar segments fly apart, then the area collapses behind
     them so the category list slides in from below. */
  .title-card-graphic.tcg-stage-7 .tcg-stage-area {
    max-height: 0;
    margin: 0;
    overflow: hidden;
    pointer-events: none;
  }
  .title-card-graphic.tcg-stage-7 .tcg-bar .tcg-seg-before {
    animation: tcgFlyOutLeft 540ms cubic-bezier(0.55, 0, 0.55, 1) 60ms forwards;
  }
  .title-card-graphic.tcg-stage-7 .tcg-bar .tcg-seg-during {
    animation: tcgFlyOutDown 540ms cubic-bezier(0.55, 0, 0.55, 1) 0ms forwards;
  }
  .title-card-graphic.tcg-stage-7 .tcg-bar .tcg-seg-after {
    animation: tcgFlyOutRight 540ms cubic-bezier(0.55, 0, 0.55, 1) 60ms forwards;
  }
  .title-card-graphic.tcg-stage-7 .tcg-labels {
    animation: tcgFadeOut 320ms ease forwards;
  }
  @keyframes tcgFlyOutLeft {
    from { transform: translate(0, 0) rotate(0); opacity: 1; }
    to   { transform: translate(-60px, 22px) rotate(-14deg); opacity: 0; }
  }
  @keyframes tcgFlyOutRight {
    from { transform: translate(0, 0) rotate(0); opacity: 1; }
    to   { transform: translate(60px, 22px) rotate(14deg); opacity: 0; }
  }
  @keyframes tcgFlyOutDown {
    from { transform: translate(0, 0) scale(1); opacity: 1; }
    to   { transform: translate(0, 36px) scale(0.92); opacity: 0; }
  }
  @keyframes tcgFadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
  }
  .tcg-anchor {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(0);
    transition: transform 720ms cubic-bezier(0.4,0,0.2,1);
  }
  .tcg-bar {
    display: flex;
    height: 50px;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #cbd5d9;
    transition: width 720ms cubic-bezier(0.4,0,0.2,1);
  }
  .tcg-bar .tcg-seg {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    overflow: hidden;
    flex-shrink: 0;
    height: 100%;
    transition: width 720ms cubic-bezier(0.4,0,0.2,1), height 720ms cubic-bezier(0.4,0,0.2,1);
  }
  .tcg-bar .tcg-during { background: var(--extrap-blue); width: var(--bar-during); }
  .tcg-bar .tcg-before { background: var(--extrap-orange); width: 0; }
  .tcg-bar .tcg-after  { background: var(--extrap-orange); width: 0; }
  .tcg-bar .tcg-seg .tcg-seg-text {
    position: relative;
    z-index: 3;
    line-height: 1.15;
    text-align: center;
    padding: 0 4px;
  }
  .tcg-bar .tcg-gap {
    position: absolute;
    top: 0; bottom: 0;
    width: 5px;
    background: var(--extrap-orange);
    opacity: 0;
    z-index: 1;
    transition: opacity 500ms ease;
  }

  /* Per-stage segment widths and bar-anchor offset so the data-pull
     center stays put as new segments add on. */
  .title-card-graphic.tcg-stage-1 .tcg-anchor { transform: translateX(calc(var(--bar-during) / -2)); }

  .title-card-graphic.tcg-stage-2 .tcg-after { width: var(--bar-after); }
  .title-card-graphic.tcg-stage-2 .tcg-anchor { transform: translateX(calc(var(--bar-during) / -2)); }

  .title-card-graphic.tcg-stage-3 .tcg-before { width: var(--bar-before); }
  .title-card-graphic.tcg-stage-3 .tcg-after  { width: var(--bar-after); }
  .title-card-graphic.tcg-stage-3 .tcg-anchor { transform: translateX(calc((var(--bar-during) / -2) - var(--bar-before))); }

  .title-card-graphic.tcg-stage-4 .tcg-before { width: var(--bar-before); }
  .title-card-graphic.tcg-stage-4 .tcg-after  { width: var(--bar-after); }
  .title-card-graphic.tcg-stage-4 .tcg-anchor { transform: translateX(calc((var(--bar-during) / -2) - var(--bar-before))); }
  .title-card-graphic.tcg-stage-4 .tcg-gap    { opacity: 1; }

  /* Date labels under the bar with deep / shallow staggering */
  .tcg-labels {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    height: 82px;
    pointer-events: none;
  }
  .tcg-labels .tcg-lbl {
    position: absolute;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    white-space: nowrap;
    transition: opacity 320ms ease, left 700ms cubic-bezier(0.4,0,0.2,1);
    opacity: 0;
    text-align: center;
  }
  .tcg-labels .tcg-lbl .tcg-tick {
    width: 1px;
    background: #999;
    height: 12px;
    margin-bottom: 4px;
  }
  .tcg-labels .tcg-lbl.deep .tcg-tick { height: 48px; }
  .tcg-labels .tcg-lbl b {
    display: block;
    font-weight: 700;
    color: #333;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
  }
  .tcg-labels .tcg-lbl span.txt {
    display: block;
    font-size: 9px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 1px;
  }

  /* Per-stage label visibility and alignment. Edge labels anchor outward. */
  .title-card-graphic.tcg-stage-1 .tcg-lbl-data-start  { left: 0; opacity: 1; transform: translateX(0); align-items: flex-start; }
  .title-card-graphic.tcg-stage-1 .tcg-lbl-data-end    { left: var(--bar-during); opacity: 1; transform: translateX(-100%); align-items: flex-end; }

  .title-card-graphic.tcg-stage-2 .tcg-lbl-data-start  { left: 0; opacity: 1; transform: translateX(0); align-items: flex-start; }
  .title-card-graphic.tcg-stage-2 .tcg-lbl-data-end    { left: var(--bar-during); opacity: 1; transform: translateX(-50%); align-items: center; }
  .title-card-graphic.tcg-stage-2 .tcg-lbl-damages-end { left: calc(var(--bar-during) + var(--bar-after)); opacity: 1; transform: translateX(-100%); align-items: flex-end; }

  .title-card-graphic.tcg-stage-3 .tcg-lbl-damages-start { left: 0; opacity: 1; transform: translateX(0); align-items: flex-start; }
  .title-card-graphic.tcg-stage-3 .tcg-lbl-data-start    { left: var(--bar-before); opacity: 1; transform: translateX(-50%); align-items: center; }
  .title-card-graphic.tcg-stage-3 .tcg-lbl-data-end      { left: calc(var(--bar-before) + var(--bar-during)); opacity: 1; transform: translateX(-50%); align-items: center; }
  .title-card-graphic.tcg-stage-3 .tcg-lbl-damages-end   { left: calc(var(--bar-before) + var(--bar-during) + var(--bar-after)); opacity: 1; transform: translateX(-100%); align-items: flex-end; }

  .title-card-graphic.tcg-stage-4 .tcg-lbl-damages-start { left: 0; opacity: 1; transform: translateX(0); align-items: flex-start; }
  .title-card-graphic.tcg-stage-4 .tcg-lbl-data-start    { left: var(--bar-before); opacity: 1; transform: translateX(-50%); align-items: center; }
  .title-card-graphic.tcg-stage-4 .tcg-lbl-data-end      { left: calc(var(--bar-before) + var(--bar-during)); opacity: 1; transform: translateX(-50%); align-items: center; }
  .title-card-graphic.tcg-stage-4 .tcg-lbl-damages-end   { left: calc(var(--bar-before) + var(--bar-during) + var(--bar-after)); opacity: 1; transform: translateX(-100%); align-items: flex-end; }

  /* Stage 7: bar collapses, three category rows fade in stacked */
  .tcg-categories {
    text-align: left;
    max-width: 460px;
    margin: 4px auto 0;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 320ms ease 700ms, max-height 480ms cubic-bezier(0.4,0,0.2,1) 700ms;
  }
  .title-card-graphic.tcg-stage-7 .tcg-categories {
    opacity: 1;
    max-height: 380px;
  }
  .tcg-cat-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 6px;
    opacity: 0;
    transform: translateX(-14px);
    transform-origin: left center;
  }
  .title-card-graphic.tcg-stage-7 .tcg-cat-row {
    animation: tcgCatRowIn 540ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }
  .title-card-graphic.tcg-stage-7 .tcg-cat-row:nth-child(1) { animation-delay: 760ms; }
  .title-card-graphic.tcg-stage-7 .tcg-cat-row:nth-child(2) { animation-delay: 900ms; }
  .title-card-graphic.tcg-stage-7 .tcg-cat-row:nth-child(3) { animation-delay: 1040ms; }
  @keyframes tcgCatRowIn {
    0% {
      opacity: 0;
      transform: translateX(-26px) scale(0.78) rotate(-2deg);
    }
    60% {
      opacity: 1;
      transform: translateX(4px) scale(1.04) rotate(0.4deg);
    }
    100% {
      opacity: 1;
      transform: translateX(0) scale(1) rotate(0);
    }
  }
  .tcg-cat-bar {
    position: relative;
    height: 30px;
    border-radius: 4px;
    flex-shrink: 0;
    overflow: hidden;
  }
  .tcg-cat-bar.tcg-cat-orange { background: var(--extrap-orange); }
  .tcg-cat-bar.tcg-cat-during { background: var(--extrap-blue); }
  .tcg-cat-bar.tcg-cat-before-w  { width: 32px; }
  .tcg-cat-bar.tcg-cat-during-w  { width: 110px; }
  .tcg-cat-bar.tcg-cat-after-w   { width: 50px; }
  .tcg-cat-bar .tcg-cat-gap {
    position: absolute;
    top: 0; bottom: 0;
    width: 4px;
    background: var(--extrap-orange);
  }
  .tcg-cat-info {
    font-size: 13px;
    line-height: 1.4;
    color: #222;
    text-align: left;
  }
  .tcg-cat-info b {
    font-weight: 700;
    display: block;
    margin-bottom: 2px;
    color: #111;
  }
  .tcg-cat-info span.txt { color: #555; }

  @media (max-width: 520px) {
    .tcg-bar .tcg-seg { font-size: 9px; letter-spacing: 0.05em; }
    .tcg-labels .tcg-lbl b { font-size: 10px; }
    .tcg-labels .tcg-lbl span.txt { font-size: 7.5px; letter-spacing: 0.06em; }
    .tcg-cat-info { font-size: 12px; }
    .tcg-cat-row { gap: 12px; padding: 8px 4px; }
  }

  .stage-controls {
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 380ms ease, transform 380ms ease;
    z-index: 100;
    position: relative;
    transform: translateY(10px);
  }
  .stage-controls.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .stage-controls .nav-row {
    display: flex;
    gap: 12px;
    align-items: center;
  }
  .nav-btn {
    font-family: "DM Sans", sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 13px 28px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 200ms ease, opacity 200ms ease;
    border: none;
  }
  .back-btn {
    background: white;
    color: var(--navy);
    border: 1px solid #d9d9d9;
  }
  .back-btn:hover:not(:disabled) { background: #f8f9fc; }
  .back-btn:disabled {
    opacity: 0.35;
    cursor: default;
  }
  .next-btn {
    background: var(--navy);
    color: white;
    box-shadow: 0 10px 28px rgba(0,0,0,0.2);
  }
  .next-btn:hover { background: var(--navy-dark); }
  .click-hint {
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
  }
  /* The @media (max-width: 720px) rule that pinned .stage-controls to the
     viewport bottom was removed: position:fixed children of a transformed
     ancestor (.stage-inner is scaled via --stage-scale) are positioned
     relative to that ancestor, not the viewport, which placed the buttons
     in the wrong spot at narrow widths. With the controls in normal flow
     they scale with the rest of the layout. */

  @keyframes nextPulse {
    0%, 100% { box-shadow: 0 6px 18px rgba(0,0,0,0.15), 0 0 0 0 rgba(47, 72, 92, 0.4); }
    50% { box-shadow: 0 6px 18px rgba(0,0,0,0.15), 0 0 0 10px rgba(47, 72, 92, 0); }
  }

  /* ---- Closing ---- */
  #closing {
    background: var(--navy-dark);
    color: white;
    display: flex; align-items: center; justify-content: center;
    padding: 40px;
  }
  #closing .closing-content {
    max-width: 720px; text-align: center;
  }
  .closing-lines { margin-bottom: 36px; }
  .closing-lines .line {
    font-size: clamp(16px, 2vw, 20px);
    line-height: 1.55;
    color: rgba(255,255,255,0.85);
    margin: 4px 0;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 600ms ease, transform 600ms ease;
  }
  .closing-lines .line.show { opacity: 1; transform: translateY(0); }
  .closing-lines .line.highlight {
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(26px, 3.5vw, 42px);
    color: white;
    margin: 16px 0 20px;
    font-weight: 800;
    letter-spacing: -0.01em;
  }
  .closing-lines .divider {
    width: 60px; height: 1px;
    background: rgba(255,255,255,0.3);
    margin: 22px auto;
  }
  .closing-cta {
    display: flex; flex-wrap: wrap;
    gap: 14px; justify-content: center;
    opacity: 0;
    transition: opacity 600ms ease;
  }
  .closing-cta.show { opacity: 1; }
  #closing .btn-primary { background: white; color: var(--navy-dark); }
  #closing .btn-primary:hover { background: #f4f4f4; }
  #closing .btn-secondary {
    background: transparent; color: white;
    border-color: rgba(255,255,255,0.3);
  }
  #closing .btn-secondary:hover { background: rgba(255,255,255,0.08); }

  /* Back button on the closing screen so users can step back into the
     tour after the closing animation has played. */
  .closing-back-btn {
    position: absolute;
    bottom: 28px;
    left: 28px;
    background: white;
    color: var(--navy);
    border: 1px solid #d9d9d9;
    font-family: "DM Sans", sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 13px 28px;
    border-radius: 999px;
    cursor: pointer;
    z-index: 10;
  }
  .closing-back-btn:hover { background: #f4f4f4; }

  /* ---- Mobile ---- */
  @media (max-width: 720px) {
    #stage { padding: 14px 18px 70px; }
    /* .caption and .s-cell intentionally keep their default sizes here.
       The sheet is locked to 860px so the page horizontal-scrolls instead
       of shrinking, which preserves captionOffset alignment. */
    .excel-menu-bar { overflow-x: auto; }
  }

  /* ==== DEV TRACKERS ====
     Remove these blocks (plus the corresponding divs and JS init) before
     shipping. They are purely a debugging aid. */
  .dev-width-tracker,
  .dev-step-tracker {
    position: fixed;
    bottom: 10px;
    background: rgba(47, 72, 92, 0.92);
    color: white;
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 5px 10px;
    border-radius: 4px;
    z-index: 9999;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  }
  .dev-width-tracker { left: 10px; }
  .dev-step-tracker {
    left: 88px;
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: auto;
    cursor: pointer;
  }
  .dev-step-tracker:hover { background: rgba(74, 109, 134, 0.95); }

  /* Column spotlight overlays. A gold halo around the bounding rect
     of a column area, no dimming of the rest of the screen. Used by
     the Final Tally beat (slide 23) to draw the eye to the three
     Missing Week Count columns while their numbers fade in. Pulses
     subtly so the viewer's eye lands there without being shouted at. */
  /* Column spotlights match the .spotlight style used on narrate
     moments: soft gold inset border + outer glow, no body tint. The
     full-screen dim trick (giant box-shadow) is replaced by the
     #bgDim layer because three separate spotlights can't compose a
     single dim cutout. */
  .column-spotlight {
    position: fixed;
    pointer-events: none;
    border-radius: 10px;
    box-shadow:
      0 0 0 3px var(--spot-glow) inset,
      0 0 24px 4px var(--spot-glow);
    z-index: 30;
  }

  /* Click-anywhere-to-advance is disabled while we iterate. Hide the
     "Click anywhere to advance" hint until it returns. Restore by
     deleting this override (and uncommenting the IIFE in boot.js). */
  .click-hint { display: none; }

  /* Make column spotlights clickable so the dev overlay editor can
     pick them up. The original pointer-events: none is fine for the
     production tour (overlay is purely visual) but clicks need to
     land for in-place resize. */
  .column-spotlight { pointer-events: auto; }

  /* Click-on-overlay-to-resize editor.

     When an overlay (positioned title card or column spotlight) is
     clicked, .overlay-editing is added. The selected box gets a
     prominent gold outline, eight resize handles at the corners and
     edge midpoints, and a floating panel showing live x/y/w/h
     inputs. The body acts as a move handle; the panel inputs are
     editable directly so size and position are adjustable from one
     place. */
  .overlay-editing {
    outline: 3px solid var(--gold);
    outline-offset: 4px;
    cursor: move;
    /* Lift above sibling overlays so the handles are clickable. */
    z-index: 200 !important;
    box-shadow:
      0 0 0 3px rgba(255, 199, 99, 0.45),
      0 0 24px 6px rgba(255, 199, 99, 0.35) !important;
    transition: outline-color 200ms ease;
  }
  /* Disable any pulse animation while editing so the size reads
     cleanly and there is no visual noise. */
  .column-spotlight.overlay-editing { animation: none; }
  /* Drop the centering transform on the subcards while editing so
     inline left/top pinning from the dev tool can take effect. The
     transform is restored automatically when the user exits edit
     mode (exitEditMode in dev.js clears the inline left + width). */
  .title-card-subcards.overlay-editing,
  .ss-typesection.overlay-editing,
  .title-card-subcards.overlay-editing-extra,
  .ss-typesection.overlay-editing-extra {
    transform: none;
  }

  /* Shift+click adds elements to the selection alongside the
     primary. Extras get a thinner outline so the primary (with
     resize handles + edit panel) is still distinguishable. */
  .overlay-editing-extra {
    outline: 2px dashed var(--gold);
    outline-offset: 2px;
    z-index: 200 !important;
    box-shadow: 0 0 0 2px rgba(255, 199, 99, 0.3) !important;
  }

  /* All ad-hoc dev UI is hidden by default. Adding ?dev to the
     URL sets data-dev-mode on body, which reveals the dev trackers
     and activates the click-to-resize overlay editor. Remove this
     block (and any data-dev-mode references in JS) before final
     publish to permanently strip the dev tools. */
  body:not([data-dev-mode]) .dev-width-tracker,
  body:not([data-dev-mode]) .dev-step-tracker,
  body:not([data-dev-mode]) .dev-cap-pos,
  body:not([data-dev-mode]) .dev-tc-pos,
  body:not([data-dev-mode]) .dev-rw-pos,
  body:not([data-dev-mode]) .dev-step-popup {
    display: none !important;
  }

  /* Floating "DEV MODE" badge so it's obvious the tool is active. */
  .dev-mode-badge {
    position: fixed;
    top: 8px; left: 50%;
    transform: translateX(-50%);
    background: var(--gold);
    color: var(--navy-dark);
    font-family: "DM Sans", sans-serif;
    font-size: 10px; font-weight: 800;
    letter-spacing: 0.22em;
    padding: 4px 12px;
    border-radius: 4px;
    z-index: 9999;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  }

  .overlay-edit-handle {
    position: absolute;
    width: 16px;
    height: 16px;
    background: var(--gold);
    border: 2px solid var(--navy-dark);
    border-radius: 3px;
    z-index: 201;
    box-shadow: 0 2px 6px rgba(0,0,0,0.45);
  }
  .overlay-edit-handle:hover {
    background: #ffd083;
    transform: scale(1.15);
  }
  .overlay-edit-handle.handle-nw { left: -10px;  top: -10px;    cursor: nwse-resize; }
  .overlay-edit-handle.handle-n  { left: 50%;    top: -10px;    margin-left: -8px; cursor: ns-resize; }
  .overlay-edit-handle.handle-ne { right: -10px; top: -10px;    cursor: nesw-resize; }
  .overlay-edit-handle.handle-e  { right: -10px; top: 50%;      margin-top: -8px; cursor: ew-resize; }
  .overlay-edit-handle.handle-se { right: -10px; bottom: -10px; cursor: nwse-resize; }
  .overlay-edit-handle.handle-s  { left: 50%;    bottom: -10px; margin-left: -8px; cursor: ns-resize; }
  .overlay-edit-handle.handle-sw { left: -10px;  bottom: -10px; cursor: nesw-resize; }
  .overlay-edit-handle.handle-w  { left: -10px;  top: 50%;      margin-top: -8px; cursor: ew-resize; }

  /* Combined location + size panel. Floats next to the selected
     overlay. Inputs are live-editable. */
  .overlay-edit-panel {
    position: fixed;
    background: rgba(29, 44, 58, 0.96);
    color: #e8ddc6;
    padding: 10px 12px;
    border-radius: 6px;
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 11px;
    z-index: 9999;
    box-shadow: 0 6px 18px rgba(0,0,0,0.4);
    border: 1px solid #ffc763;
    min-width: 168px;
  }
  .overlay-edit-panel .oep-title {
    font-weight: 800;
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #ffc763;
    margin-bottom: 8px;
  }
  .overlay-edit-panel .oep-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .overlay-edit-panel label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: #d6cfbb;
  }
  .overlay-edit-panel input {
    width: 60px;
    padding: 3px 6px;
    background: #0e1820;
    color: #e8ddc6;
    border: 1px solid #34495a;
    border-radius: 3px;
    font-size: 11px;
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-variant-numeric: tabular-nums;
  }
  .overlay-edit-panel input:focus {
    outline: none;
    border-color: #ffc763;
    background: #1a2630;
  }
  .overlay-edit-panel .oep-copy,
  .overlay-edit-panel .oep-copy-css {
    margin-top: 6px;
    padding: 4px 10px;
    background: #ffc763;
    color: #1d2c3a;
    border: none;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
    cursor: pointer;
    width: 100%;
  }
  .overlay-edit-panel .oep-copy:hover,
  .overlay-edit-panel .oep-copy-css:hover { background: #ffd083; }
  /* The CSS-format copy button is the secondary action; tone it
     down so the JSON button (config use) reads as the primary. */
  .overlay-edit-panel .oep-copy-css {
    background: white;
    color: #1d2c3a;
    border: 1px solid #ffc763;
  }
  .overlay-edit-panel .oep-copy-css:hover { background: #fff4d8; }
  .overlay-edit-panel .oep-status {
    font-size: 9px;
    color: #ffc763;
    margin-top: 6px;
    height: 12px;
    text-align: center;
    font-weight: 700;
  }

  /* Position trackers, stacked above the width/step row so they live
     in the dead space at the bottom-left of the viewport, away from
     the spreadsheet's horizontal range and the bottom tab bar. */
  .dev-cap-pos,
  .dev-tc-pos {
    position: fixed;
    left: 10px;
    background: rgba(47, 72, 92, 0.92);
    color: white;
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 10px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 4px;
    z-index: 9999;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    line-height: 1.3;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    opacity: 0.45;
    transition: opacity 200ms ease;
  }
  .dev-cap-pos { bottom: 38px; }
  .dev-tc-pos  { bottom: 66px; }
  .dev-rw-pos  { bottom: 94px; }
  .dev-cap-pos.show,
  .dev-tc-pos.show,
  .dev-rw-pos.show { opacity: 1; }
  .dev-cap-pos::before { content: "cap "; opacity: 0.55; }
  .dev-tc-pos::before  { content: "title "; opacity: 0.55; }
  .dev-rw-pos::before  { content: "rw "; opacity: 0.55; }
  .dev-rw-pos {
    position: fixed;
    left: 10px;
    background: rgba(47, 72, 92, 0.92);
    color: white;
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 10px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 4px;
    z-index: 9999;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    line-height: 1.3;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    opacity: 0.45;
    transition: opacity 200ms ease;
  }

  /* ==== DEV: unified resize/move panel (remove before shipping)
     Matches the look of the other dev trackers (navy bg, white text,
     tabular nums) and stacks above the dev-tab-jumps row so it never
     overlaps the existing tools. */
  .dev-resize-panel {
    position: fixed;
    bottom: 38px;
    right: 10px;
    background: rgba(47, 72, 92, 0.92);
    color: white;
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 5px 10px;
    border-radius: 4px;
    z-index: 9999;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-variant-numeric: tabular-nums;
    height: 30px;
  }
  .dev-resize-panel select,
  .dev-resize-panel input[type="number"] {
    background: rgba(255,255,255,0.12);
    color: white;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 3px;
    padding: 0 5px;
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    box-sizing: border-box;
    height: 20px;
  }
  .dev-resize-panel select  { width: 120px; }
  .dev-resize-panel select option {
    background: #1d2c3a;
    color: white;
  }
  .dev-resize-panel input[type="number"] { width: 56px; }
  .dev-resize-panel label {
    color: rgba(255,255,255,0.65);
    font-size: 10px;
    display: inline-flex; align-items: center; gap: 3px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .dev-resize-panel button {
    background: rgba(255,255,255,0.10);
    color: white;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 3px;
    padding: 0 8px;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    font-family: "Segoe UI", system-ui, sans-serif;
    height: 20px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .dev-resize-panel button:hover { background: rgba(255,255,255,0.20); }
  .dev-resize-panel button.primary {
    background: var(--gold, #ffc763);
    color: #1a1a1a;
    border-color: var(--gold, #ffc763);
  }
  .dev-resize-panel button.primary:hover { background: #ffd589; }
  /* Hidden output (copy still pulls from it via Copy button) */
  .dev-resize-panel .drp-output { display: none; }

  /* Pulsing gold outline on whatever element the dev panel currently
     targets, so it's obvious which one X/Y/W/H will move. Outline is
     overlay-only so it never shifts layout. */
  .dev-selected {
    outline: 2px solid var(--gold, #ffc763) !important;
    outline-offset: 2px;
    animation: devSelectedPulse 1.1s ease-in-out infinite;
  }
  @keyframes devSelectedPulse {
    0%, 100% { outline-color: rgba(255, 199, 99, 0.35); }
    50%      { outline-color: rgba(255, 199, 99, 1); }
  }

  /* Sheet-tab clickability. Tabs at the bottom of the stage (Front
     End / Weekly Damages / Extrapolations / Allocations) jump the
     scenario to that section when clicked. */
  .sheet-tab[data-tab] { cursor: pointer; }
  .sheet-tab[data-tab]:hover:not(.active) {
    background: rgba(255, 255, 255, 0.5);
    color: #111;
  }

  /* Jump-to-step popup */
  .dev-step-popup {
    position: fixed;
    bottom: 38px;
    left: 88px;
    background: rgba(26, 38, 49, 0.97);
    color: white;
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 11px;
    border-radius: 6px;
    padding: 6px 0;
    z-index: 9999;
    width: min(440px, calc(100vw - 16px));
    max-height: 65vh;
    overflow-y: auto;
    box-shadow: 0 10px 26px rgba(0,0,0,0.4);
  }
  .dev-step-popup.hidden { display: none; }
  .dev-step-popup ul { list-style: none; margin: 0; padding: 0; }
  .dev-step-popup li {
    padding: 6px 14px;
    cursor: pointer;
    line-height: 1.4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .dev-step-popup li .step-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
  }
  .dev-step-popup li .step-time {
    color: rgba(255,255,255,0.55);
    font-variant-numeric: tabular-nums;
    font-size: 10px;
    flex-shrink: 0;
  }
  .dev-step-popup li:hover { background: rgba(255,255,255,0.12); }
  .dev-step-popup li.active {
    background: rgba(255,214,102,0.28);
    font-weight: 700;
  }
  .dev-step-popup li.active .step-time { color: rgba(255,214,102,0.9); }
  .dev-step-popup .step-footer {
    margin-top: 4px;
    padding: 8px 14px 6px;
    border-top: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.7);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    cursor: default;
  }
  .dev-step-popup .step-footer .step-time {
    color: white;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
  }
  /* ==== END DEV TRACKERS ==== */

  /* ---- Narrow landscape phones, down to ~610px ---- */
  @media (max-width: 640px) {
    #stage { padding: 12px 16px 70px; }
    /* .caption and .s-cell intentionally keep their default sizes here. */
    .section-label { font-size: 12px; padding: 0 5px; }
    .excel-menu-bar .menu-item { padding: 0 8px; }
    .excel-menu-bar .menu-item.file-tab { padding: 0 10px; }
    .excel-row-gutter { width: 30px; font-size: 9px; }
    .excel-col-strip { grid-template-columns: 30px repeat(8, 1fr); font-size: 10px; }
    .sheet-tab { padding: 5px 10px 6px; font-size: 11px; }
  }

  /* Blinking text editing caret used by the slide 6 typing animation */
  .typing-caret-host {
    position: relative;
  }
  .typing-caret-host::after {
    content: "";
    display: inline-block;
    width: 1.5px;
    height: 1em;
    background: #111;
    margin-left: 1px;
    vertical-align: -2px;
    animation: typingCaretBlink 0.55s steps(2, jump-none) infinite;
  }
  @keyframes typingCaretBlink {
    to { opacity: 0; }
  }

  /* ============================================================
     Optional two-panel companion below a centered title-card.
     A moment marked subcardsBelow: true toggles the .show class
     on this element via the engine. Each panel reuses the same
     visual chassis as the title-card (white bg, navy-dark border,
     Playfair title, DM Sans eyebrow + desc), just smaller.
     ============================================================ */
  .title-card-subcards {
    position: fixed;
    /* Tuned via the dev resize tool on the live tour. */
    top: 444px;
    left: 50%;
    transform: translate(-50%, 0);
    transform-origin: 50% 0;
    scale: var(--stage-scale, 1);
    width: 720px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    z-index: 90;
    pointer-events: none;
    opacity: 0;
    transition: opacity 500ms ease;
  }
  .title-card-subcards.show {
    opacity: 1;
    pointer-events: auto;
  }
  /* Slimmer Component One / Two cards. The old eyebrow row is gone;
     the eyebrow is now baked into the title as a prefix span
     ("Part 1: Count Missing Weeks"). Reduced vertical padding +
     smaller title/desc fonts so the same information fits in
     ~70px instead of ~120px. */
  .tcs-card {
    background: white;
    border: 1.5px solid var(--navy-dark);
    border-radius: 10px;
    padding: 10px 14px 11px;
    box-shadow: 0 14px 36px rgba(0,0,0,0.20);
    text-align: left;
    pointer-events: auto;
  }
  .tcs-card .tcs-eyebrow {
    /* Legacy markup. Hidden now that the Part 1 / Part 2 prefix
       lives inside .tcs-title via the .tcs-prefix span. */
    display: none;
  }
  .tcs-card .tcs-title {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 16px; font-weight: 800;
    letter-spacing: -0.01em;
    color: #111;
    line-height: 1.2;
    margin: 0 0 4px;
  }
  /* "Part 1:" / "Part 2:" prefix inside the title. Same family
     and weight as the title but in the navy accent color so it
     reads as a tag without fighting the headline. */
  .tcs-card .tcs-title .tcs-prefix {
    color: var(--navy);
    margin-right: 4px;
  }
  .tcs-card .tcs-desc {
    font-family: "DM Sans", sans-serif;
    font-size: 11.5px;
    line-height: 1.35;
    color: #555;
    margin: 0;
  }

  /* ============================================================
     Review-mode states. When an extrapReview moment activates,
     the title card stays mounted but dims, the sub-panels glide
     up to the top of the stage as a persistent banner, and the
     four-row types-of-weeks panel fills below.
     ============================================================ */
  /* Title card animates its opacity transition over 800ms in
     review mode so the dim feels deliberate. */
  .title-card.is-dim {
    opacity: 0.25 !important;
    pointer-events: none;
    transition: opacity 800ms ease;
  }
  /* Sub-panels glide to the top of the stage. The base CSS
     transitions top, opacity, and the children's opacity too so
     the inactive box dim reads smoothly. */
  .title-card-subcards {
    transition: top 800ms ease, opacity 500ms ease;
  }
  .title-card-subcards.is-review {
    /* Banner anchors near the top of the stage in review mode.
       Tuned via the dev resize tool: top: 117 sits the banner
       just over the Excel hdr1 / hdr2 column header rows so the
       page header above stays clear and the body content below
       starts on a fresh row. */
    top: 117px;
  }
  /* Anchored-to-bottom variant for slide 21+: banner glides to
     just above the Excel tab bar so the spreadsheet's column
     headers stay clear and a small title card sits above the
     banner with the description / spotlights walking through
     the table. */
  .title-card-subcards.is-review.is-anchored-bottom {
    top: 600px;
  }
  .title-card-subcards .tcs-card {
    transition: border-color 700ms ease, box-shadow 700ms ease;
  }
  .title-card-subcards .tcs-card .tcs-eyebrow,
  .title-card-subcards .tcs-card .tcs-title,
  .title-card-subcards .tcs-card .tcs-desc {
    transition: opacity 700ms ease;
  }
  /* Dim the inactive sub-panel during review. Box stays fully
     opaque (no see-through); only the contents fade. */
  .title-card-subcards.review-one .tcs-card:nth-child(2),
  .title-card-subcards.review-two .tcs-card:nth-child(1) {
    border-color: #c8c1ac;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  }
  .title-card-subcards.review-one .tcs-card:nth-child(2) .tcs-eyebrow,
  .title-card-subcards.review-one .tcs-card:nth-child(2) .tcs-title,
  .title-card-subcards.review-one .tcs-card:nth-child(2) .tcs-desc,
  .title-card-subcards.review-two .tcs-card:nth-child(1) .tcs-eyebrow,
  .title-card-subcards.review-two .tcs-card:nth-child(1) .tcs-title,
  .title-card-subcards.review-two .tcs-card:nth-child(1) .tcs-desc {
    opacity: 0.32;
  }

  /* Types-of-weeks panel: four row sub-cards with bar
     visualization on the right. Anchored below the sub-panels
     when review-one is active. */
  .ss-typesection {
    position: fixed;
    /* Pushed down from 156 -> 217 to clear the Part 1 / Part 2
       banner which now anchors at top: 117. ~24px gap between
       the banner and this section's title card. */
    top: 217px;
    left: 50%;
    transform: translate(-50%, 0);
    transform-origin: 50% 0;
    scale: var(--stage-scale, 1);
    width: 720px;
    z-index: 90;
    pointer-events: none;
    opacity: 0;
    transition: opacity 800ms ease;
  }
  .ss-typesection.is-on {
    opacity: 1;
    pointer-events: auto;
  }
  /* Shared title-card chassis for the two extrapolation review
     slides: slide 19 ("Define What Weeks Are Missing") and
     slide 20 ("Many Methods Of Per-Week Valuation"). Same DOM
     structure (ts-head wrapper > sc-title + sc-desc) means both
     render through the same CSS path -- no chance of one drifting
     larger or smaller than the other. */
  .ss-typesection .ts-head,
  .method-panel .ts-head {
    background: white;
    border: 1.5px solid var(--navy-dark);
    border-radius: 10px;
    padding: 11px 30px 12px;
    box-shadow: 0 14px 36px rgba(0,0,0,0.20);
    text-align: center;
    /* Lock the title card to a single width regardless of which
       panel hosts it. Slide 19's .ss-typesection is 720px wide
       (so the card naturally fills it); slide 20's .method-panel
       is 820px wide, which would otherwise stretch the card
       ~100px wider. Setting width: 720 + auto margins centers
       it within the wider panel and makes both boxes identical. */
    box-sizing: border-box;
    width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
  /* Per-panel margin-below: slide 19 needs a big gap to the row
     carousel; slide 20 already has the .m-header margin handling. */
  .ss-typesection .ts-head { margin-bottom: 52px; }
  .ss-typesection .ts-head .sc-eyebrow,
  .method-panel .ts-head .sc-eyebrow {
    display: none;
  }
  .ss-typesection .ts-head .sc-title,
  .method-panel .ts-head .sc-title {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #111;
    line-height: 1.15;
    margin: 0 0 6px;
  }
  .ss-typesection .ts-head .sc-desc,
  .method-panel .ts-head .sc-desc {
    font-family: "DM Sans", sans-serif;
    font-size: 12.5px;
    line-height: 1.4;
    color: #555;
    margin: 0;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
  .types-stack {
    display: grid;
    gap: 8px;
  }
  .types-row {
    --data-w: 180px;
    --after-w: 80px;
    --before-w: 56px;

    background: white;
    border: 1.5px solid var(--navy-dark);
    border-radius: 10px;
    padding: 8px 18px 8px;
    box-shadow: 0 14px 36px rgba(0,0,0,0.20);
    display: none;
    grid-template-columns: 1fr 340px;
    gap: 18px;
    align-items: center;
    min-height: 60px;
    pointer-events: auto;
  }
  .types-row.is-in {
    display: grid;
    animation: types-row-in 420ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  @keyframes types-row-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .types-row .tr-text { min-width: 0; }
  .types-row .tr-tag {
    font-family: "DM Sans", sans-serif;
    font-size: 9px; font-weight: 800;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--navy);
    margin-bottom: 3px;
  }
  .types-row .tr-title {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 15px; font-weight: 800;
    margin: 0 0 3px;
    line-height: 1.2;
    color: #111;
  }
  .types-row .tr-desc {
    font-family: "DM Sans", sans-serif;
    font-size: 11.5px;
    line-height: 1.4;
    color: #555;
    margin: 0;
    max-width: 340px;
  }
  .types-row .tr-zone {
    position: relative;
    width: 340px;
    height: 68px;
  }
  .types-row .tr-anchor {
    position: absolute;
    left: 50%;
    top: 0;
    display: flex;
    align-items: flex-start;
  }
  .types-row.r-data    .tr-anchor { transform: translateX(calc(var(--data-w) / -2)); }
  .types-row.r-after   .tr-anchor { transform: translateX(calc(var(--data-w) / -2)); }
  .types-row.r-before  .tr-anchor { transform: translateX(calc((var(--data-w) / -2) - var(--before-w))); }
  .types-row.r-within  .tr-anchor { transform: translateX(calc(var(--data-w) / -2)); }
  .types-row .tr-seg {
    height: 28px;
    display: flex; align-items: center; justify-content: center;
    color: white;
    font-family: "DM Sans", sans-serif;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 8px;
    line-height: 1.1;
    text-align: center;
  }
  .types-row .tr-seg-data   { background: var(--extrap-blue); width: var(--data-w); position: relative; overflow: hidden; }
  .types-row .tr-seg-after  { background: var(--extrap-orange); width: var(--after-w); padding: 0 4px; }
  .types-row .tr-seg-before { background: var(--extrap-orange); width: var(--before-w); padding: 0 4px; font-size: 7.5px; }
  .types-row .tr-seg:only-child         { border-radius: 4px; }
  .types-row .tr-seg:first-child:not(:only-child) { border-radius: 4px 0 0 4px; }
  .types-row .tr-seg:last-child:not(:only-child)  { border-radius: 0 4px 4px 0; }
  .types-row .tr-seg-data .tr-gap {
    position: absolute; top: 0; bottom: 0;
    width: 4px;
    background: var(--extrap-orange);
    transform: translateX(-50%);
  }
  .types-row .tr-dates {
    position: absolute;
    top: 30px; left: 0; right: 0;
    height: 36px;
  }
  .types-row .tr-dt {
    position: absolute;
    top: 0;
    white-space: nowrap;
    line-height: 1.25;
    transform: translateX(-50%);
    text-align: center;
  }
  .types-row .tr-dt::before {
    content: ""; position: absolute;
    top: -6px;
    left: 50%; margin-left: -0.5px;
    width: 1px; height: 5px;
    background: rgba(47, 72, 92, 0.5);
  }
  .types-row .tr-dt.tier-2 {
    top: 20px;
  }
  .types-row .tr-dt.tier-2::before {
    top: -26px;
    height: 25px;
    background: rgba(47, 72, 92, 0.35);
  }
  .types-row .tr-dt.r-edge {
    transform: translateX(-100%);
    text-align: right;
  }
  .types-row .tr-dt.r-edge::before {
    left: auto;
    right: 0;
    margin-left: 0;
  }
  .types-row .tr-dt .d {
    display: block;
    font-family: "DM Sans", sans-serif;
    font-size: 9.5px;
    color: var(--navy-dark);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  .types-row .tr-dt .l {
    display: block;
    font-family: "DM Sans", sans-serif;
    font-size: 7.5px;
    color: #777;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 1px;
  }

  /* ============================================================
     METHODOLOGY CONSOLIDATION PANEL (slide 21)

     Replaces what used to be four sequential methodology slides
     (Overall / Individual / Job Title / Time Period). Now one
     slide shows three methodologies stacked, each with:
       - text (number, eyebrow, title, description)
       - a mini Excel-style source-data table (color coded by
         methodology grouping)
       - an arrow
       - result tiles (per-week values, colors match the table
         row accents)

     Color signals across both visuals:
       Overall    All rows + tiles tinted medium blue (#5e88b8)
       Job Title  Rows + tiles colored by role (navy / purple /
                  terracotta)
       Individual Six distinct unique colors (one per case member),
                  table row accent matches tile color exactly.

     Hidden by default; engine.js toggles .is-on when a moment
     sets methodologyPanel: true.
     ============================================================ */
  .method-panel {
    position: fixed;
    /* Anchored at the same y as slide 19's .ss-typesection so the
       two extrap-section title cards land in identical positions
       on screen. */
    top: 217px;
    left: 50%;
    transform: translate(-50%, 0);
    transform-origin: 50% 0;
    scale: var(--stage-scale, 1);
    width: 820px;
    z-index: 90;
    pointer-events: none;
    opacity: 0;
    transition: opacity 800ms ease;
  }
  .method-panel.is-on {
    opacity: 1;
    pointer-events: auto;
  }
  /* Title sits in a bordered card so it reads as a header rather
     than floating text over the spreadsheet. */
  .method-panel .m-header {
    text-align: center;
    margin-bottom: 6px;
  }
  .method-panel .m-header-inner {
    display: inline-block;
    background: white;
    border: 1.5px solid var(--navy-dark);
    border-radius: 10px;
    padding: 9px 28px 11px;
    box-shadow: 0 14px 36px rgba(0,0,0,0.20);
  }
  .method-panel .m-eyebrow-top {
    font-family: "DM Sans", sans-serif;
    font-size: 11px; font-weight: 800;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--navy);
    margin-bottom: 4px;
  }
  /* Sized to match the slide 19 .sc-title (24px Playfair). Bumped
     a touch larger to compensate for the optical illusion caused
     by the longer title text on slide 20 -- both titles now read
     as visually equal-weight section headers. */
  .method-panel .m-title-top {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 26px; font-weight: 800;
    letter-spacing: -0.01em;
    color: #111; line-height: 1.15;
    margin: 0;
  }
  /* Methodology carousel. The .m-col cards stack on top of each
     other inside .m-stack (position: relative). State classes set
     by JS (is-active / is-prev / is-next / is-far) translate +
     scale each card so the active one centers full-size while
     the immediate neighbors peek behind on the left and right.
     Side cards stay opaque; the depth comes from scale + the
     active card's strong drop shadow lifting it above them. */
  .method-panel .m-stack {
    position: relative;
    /* Grown to 365 to fit the two-column "When To Use" / "How It
       Works" rationale block that replaces the single m-desc
       paragraph on each methodology card. */
    height: 365px;
    width: 100%;
  }
  .method-panel .m-col {
    background: white;
    border: 1.5px solid var(--navy-dark);
    border-radius: 9px;
    padding: 12px 16px 14px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;

    position: absolute;
    top: 0; left: 50%;
    width: 420px;

    opacity: 0;
    transform: translateX(-50%) scale(0.7);
    transition:
      transform 540ms cubic-bezier(0.22, 0.61, 0.36, 1),
      opacity 360ms ease,
      box-shadow 540ms ease;
    pointer-events: none;
  }
  .method-panel .m-col.is-active {
    z-index: 5;
    opacity: 1;
    transform: translateX(-50%) scale(1);
    box-shadow: 0 18px 42px rgba(0,0,0,0.28), 0 4px 10px rgba(0,0,0,0.10);
    pointer-events: auto;
  }
  .method-panel .m-col.is-prev {
    z-index: 2;
    opacity: 1;
    transform: translateX(calc(-50% - 200px)) scale(0.72);
    box-shadow: 0 3px 8px rgba(0,0,0,0.08);
  }
  .method-panel .m-col.is-next {
    z-index: 2;
    opacity: 1;
    transform: translateX(calc(-50% + 200px)) scale(0.72);
    box-shadow: 0 3px 8px rgba(0,0,0,0.08);
  }
  .method-panel .m-col.is-far {
    z-index: 1;
    opacity: 0;
    transform: translateX(-50%) scale(0.7);
  }

  /* Arrow + dot nav below the carousel. */
  .method-panel .method-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 16px;
    position: relative;
    z-index: 6;
  }
  .method-panel .method-nav-btn {
    background: white;
    border: 1.5px solid var(--navy-dark);
    border-radius: 999px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-family: "DM Sans", sans-serif;
    color: var(--navy-dark);
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    padding: 0;
    transition: transform 150ms ease, opacity 200ms ease, box-shadow 150ms ease;
  }
  .method-panel .method-nav-btn:hover:not(:disabled) {
    transform: scale(1.06);
    box-shadow: 0 4px 10px rgba(0,0,0,0.18);
  }
  .method-panel .method-nav-btn:disabled {
    opacity: 0.32;
    cursor: not-allowed;
    box-shadow: none;
  }
  .method-panel .method-dots {
    display: flex;
    gap: 8px;
  }
  .method-panel .method-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c8c1ac;
    cursor: pointer;
    transition: background 200ms ease, transform 150ms ease;
  }
  .method-panel .method-dot:hover { transform: scale(1.25); }
  .method-panel .method-dot.is-active { background: var(--navy-dark); }
  .method-panel .m-head {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 6px;
    align-items: baseline;
    margin-bottom: 1px;
  }
  /* Small uppercase section labels above the source table and the
     result tiles. Hairline rule under each so each block reads as
     its own captioned section instead of two bare graphics. */
  .method-panel .m-section-label {
    font-family: "DM Sans", sans-serif;
    font-size: 9px; font-weight: 800;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: #888;
    margin: 6px 0 3px;
    padding-bottom: 2px;
    border-bottom: 1px solid #ededed;
  }
  /* Two-column rationale block. Left column is "When To Use"
     (situational trigger), right column is "How It Works" (the
     mechanic). Splits the prior single m-desc paragraph into two
     labeled sections so the audience can read either half in
     isolation. Uses the same hairline label styling as the source
     and per-week-value section labels. */
  .method-panel .m-rationale {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 4px 0 4px;
  }
  .method-panel .m-rationale-block { min-width: 0; }
  .method-panel .m-rationale-label {
    font-family: "DM Sans", sans-serif;
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #888;
    margin: 0 0 3px;
    padding-bottom: 2px;
    border-bottom: 1px solid #ededed;
  }
  .method-panel .m-rationale-text {
    font-family: "DM Sans", sans-serif;
    font-size: 10px;
    line-height: 1.4;
    color: #555;
    margin: 0;
  }
  .method-panel .m-num {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 22px; font-weight: 800;
    color: #d4a444; line-height: 1;
  }
  .method-panel .m-head {
    grid-template-columns: 28px 1fr;
  }
  .method-panel .m-eyebrow {
    font-family: "DM Sans", sans-serif;
    font-size: 10px; font-weight: 800;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--navy); margin-bottom: 1px;
  }
  .method-panel .m-title {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 15px; font-weight: 800;
    margin: 0 0 3px; color: #111;
    line-height: 1.15;
  }
  .method-panel .m-desc {
    font-family: "DM Sans", sans-serif;
    font-size: 11px; line-height: 1.35;
    color: #555; margin: 0;
  }
  .method-panel .m-vis {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) 18px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    padding-left: 30px;
  }
  .method-panel .m-arrow {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 22px;
    color: #d4a444;
    text-align: center;
    font-weight: 800;
  }

  /* Mini source-data table */
  .method-panel .mt {
    background: white;
    border: 1px solid #cbd5d9;
    border-radius: 4px;
    overflow: hidden;
    font-family: "Segoe UI", "DM Sans", system-ui, sans-serif;
    font-size: 10px;
  }
  .method-panel .mt-row {
    display: grid;
    grid-template-columns: 22px 1.1fr 1fr 0.85fr 1fr;
    border-bottom: 1px solid #ededed;
  }
  .method-panel .mt-row:last-child { border-bottom: none; }
  .method-panel .mt-cell {
    padding: 3px 6px;
    border-right: 1px solid #ededed;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
  }
  .method-panel .mt-cell:last-child { border-right: none; }
  .method-panel .mt-cell.num {
    background: #f3f3f0; color: #888;
    text-align: center; font-weight: 600;
    font-size: 10px;
  }
  .method-panel .mt-row.head .mt-cell {
    background: var(--navy);
    color: white; font-weight: 700;
    font-size: 9.5px; letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .method-panel .mt-row.head .mt-cell.num { background: var(--navy-dark); }
  .method-panel .mt-cell.dmg,
  .method-panel .mt-cell.wks {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .method-panel .mt-row.hl .mt-cell {
    background: var(--hl-bg, #fff8e0);
  }
  .method-panel .mt-row.hl .mt-cell.num {
    background: var(--hl-num-bg, #efe6c4);
  }
  .method-panel .mt-row.hl .mt-cell:nth-child(2) {
    border-left: 3px solid var(--hl-accent, #d4a444);
    padding-left: 4px;
  }
  /* Per-methodology row tints */
  .method-panel .mt.overall .mt-row.hl {
    --hl-bg: #dde7f2;
    --hl-num-bg: #bccfe2;
    --hl-accent: #5e88b8;
  }
  .method-panel .mt.jobtitle .mt-row.hl.driver  { --hl-bg: #e3ecf3; --hl-accent: #4a6d86; --hl-num-bg: #c8d6e3; }
  .method-panel .mt.jobtitle .mt-row.hl.manager { --hl-bg: #e7e0ef; --hl-accent: #6f5a8a; --hl-num-bg: #d2c6e0; }
  .method-panel .mt.jobtitle .mt-row.hl.office  { --hl-bg: #efe2d4; --hl-accent: #b6794f; --hl-num-bg: #e0c8a8; }
  .method-panel .mt.individual .mt-row.hl.p-diaz   { --hl-bg: #e3ecf3; --hl-accent: #4a6d86; --hl-num-bg: #c8d6e3; }
  .method-panel .mt.individual .mt-row.hl.p-patel  { --hl-bg: #d9e8f0; --hl-accent: #3a7d9c; --hl-num-bg: #b8d0de; }
  .method-panel .mt.individual .mt-row.hl.p-nguyen { --hl-bg: #e7e0ef; --hl-accent: #6f5a8a; --hl-num-bg: #d2c6e0; }
  .method-panel .mt.individual .mt-row.hl.p-brooks { --hl-bg: #f0e8d6; --hl-accent: #b8862e; --hl-num-bg: #e0d2a8; }
  .method-panel .mt.individual .mt-row.hl.p-romero { --hl-bg: #efe2d4; --hl-accent: #b6794f; --hl-num-bg: #e0c8a8; }
  .method-panel .mt.individual .mt-row.hl.p-lopez  { --hl-bg: #efdde3; --hl-accent: #b25a6f; --hl-num-bg: #e0c0c8; }

  /* Result tiles. Fixed-width columns so the tile size is the
     same across every methodology card regardless of tile count
     (Time Period has 2, Year-Specific has 4, Tenure/Location
     have 6). justify-content: center keeps the row centered when
     it doesn't fill the card width. */
  .method-panel .m-tiles {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    gap: 5px;
    justify-content: center;
  }
  .method-panel .m-tile {
    border-radius: 5px;
    padding: 7px 6px 8px;
    text-align: center;
    color: white;
    box-shadow: 0 2px 5px rgba(20,37,63,0.12);
  }
  .method-panel .m-tile-name {
    font-family: "DM Sans", sans-serif;
    font-size: 9px; font-weight: 800;
    letter-spacing: 0.04em; text-transform: uppercase;
    line-height: 1; opacity: 0.92;
  }
  .method-panel .m-tile-val {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 15px; font-weight: 800;
    line-height: 1; margin-top: 4px;
    font-variant-numeric: tabular-nums;
  }
  .method-panel .m-tile.overall   { background: #5e88b8; }
  .method-panel .m-tile.driver    { background: #4a6d86; }
  .method-panel .m-tile.manager   { background: #6f5a8a; }
  .method-panel .m-tile.office    { background: #b6794f; }
  .method-panel .m-tile.p-diaz    { background: #4a6d86; }
  .method-panel .m-tile.p-patel   { background: #3a7d9c; }
  .method-panel .m-tile.p-nguyen  { background: #6f5a8a; }
  .method-panel .m-tile.p-brooks  { background: #b8862e; }
  .method-panel .m-tile.p-romero  { background: #b6794f; }
  .method-panel .m-tile.p-lopez   { background: #b25a6f; }

  /* Job title result variant: 3 columns with role average underneath */
  .method-panel .m-tiles.jt-cols {
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
  }
  .method-panel .m-jt-col { display: flex; flex-direction: column; gap: 3px; }
  .method-panel .m-jt-col.driver  { color: #4a6d86; }
  .method-panel .m-jt-col.manager { color: #6f5a8a; }
  .method-panel .m-jt-col.office  { color: #b6794f; }
  .method-panel .m-jt-sum {
    text-align: center; margin-top: 3px;
    padding-top: 3px;
    border-top: 1.5px solid currentColor;
  }
  .method-panel .m-jt-sum-label {
    font-size: 6.5px; font-weight: 800;
    letter-spacing: 0.08em; text-transform: uppercase;
    margin-bottom: 1px;
  }
  .method-panel .m-jt-sum-val {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 11.5px; font-weight: 800;
    line-height: 1; color: #111;
    font-variant-numeric: tabular-nums;
  }

  /* ============================================================
     New methodology card support (Time Period / Year-Specific /
     Tenure-Adjusted / Location). These replaced the original
     Overall / Job Title / Individual cards in the live slide 20
     carousel on 2026-05-13.
  ============================================================ */

  /* Per-methodology row tints */
  .method-panel .mt.yearspec .mt-row.hl.y1 { --hl-bg: #d4dde6; --hl-num-bg: #b8c5d3; --hl-accent: #2f485c; }
  .method-panel .mt.yearspec .mt-row.hl.y2 { --hl-bg: #d8e0ea; --hl-num-bg: #bccada; --hl-accent: #4a6d86; }
  .method-panel .mt.yearspec .mt-row.hl.y3 { --hl-bg: #dde7f2; --hl-num-bg: #bccfe2; --hl-accent: #5e88b8; }
  .method-panel .mt.yearspec .mt-row.hl.y4 { --hl-bg: #e5eef7; --hl-num-bg: #c8daea; --hl-accent: #7ba8d4; }
  .method-panel .mt.tenure .mt-row.hl.new { --hl-bg: #f4ead5; --hl-num-bg: #e6d4a8; --hl-accent: #c9a86b; }
  .method-panel .mt.tenure .mt-row.hl.mid { --hl-bg: #dee4ea; --hl-num-bg: #c2cdd8; --hl-accent: #6f8aa0; }
  .method-panel .mt.tenure .mt-row.hl.sr  { --hl-bg: #d4dde6; --hl-num-bg: #b8c5d3; --hl-accent: #3a5d7c; }
  .method-panel .mt.location .mt-row.hl.east { --hl-bg: #d9e8f0; --hl-num-bg: #b8d0de; --hl-accent: #3a7d9c; }
  .method-panel .mt.location .mt-row.hl.west { --hl-bg: #e7e0ef; --hl-num-bg: #d2c6e0; --hl-accent: #6f5a8a; }
  .method-panel .mt.location .mt-row.hl.hq   { --hl-bg: #e3ecf3; --hl-num-bg: #c8d6e3; --hl-accent: #4a6d86; }

  /* Tenure cell column right-aligned (matches dmg/wks/rate) */
  .method-panel .mt-cell.tenure {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .method-panel .mt-cell.rate {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  /* Variant tile grids for non-6-tile methodology cards. Same
     100px fixed width as the default 3-col layout so tiles are
     visually uniform across all methodologies. */
  .method-panel .m-tiles.m-tiles-2col { grid-template-columns: repeat(2, 100px); }
  .method-panel .m-tiles.m-tiles-4col { grid-template-columns: repeat(4, 100px); }

  /* New tile color tokens */
  .method-panel .m-tile.tp-before { background: #d4a874; }
  .method-panel .m-tile.tp-after  { background: #b8745e; }
  .method-panel .m-tile.y1        { background: #2f485c; }
  .method-panel .m-tile.y2        { background: #4a6d86; }
  .method-panel .m-tile.y3        { background: #5e88b8; }
  .method-panel .m-tile.y4        { background: #7ba8d4; }
  .method-panel .m-tile.tnew      { background: #c9a86b; }
  .method-panel .m-tile.tmid      { background: #6f8aa0; }
  .method-panel .m-tile.tsr       { background: #3a5d7c; }
  .method-panel .m-tile.east      { background: #3a7d9c; }
  .method-panel .m-tile.west      { background: #6f5a8a; }
  .method-panel .m-tile.hq        { background: #4a6d86; }

  /* Time Period timeline visualization (TP-C "Faded Middle" variant).
     30 small cells in a row representing months of recorded data:
     6 coral "anchor-before" + 18 faded blue "within" + 6 terracotta
     "anchor-after". Labels under each anchor window show the rate
     that window produces. Echoes the segment-bar visual language of
     slide 19's Different Types of Missing Weeks carousel. */
  .method-panel .tp-timeline-block { margin: 6px 0 4px; }
  .method-panel .tp-cells {
    display: flex;
    gap: 3px;
    height: 26px;
    margin-bottom: 8px;
    align-items: stretch;
  }
  .method-panel .tp-cell {
    flex: 1;
    border-radius: 2px;
  }
  .method-panel .tp-cell.before { background: #d4a874; }
  .method-panel .tp-cell.within { background: #5e88b8; }
  .method-panel .tp-cell.after  { background: #b8745e; }
  .method-panel .tp-cell.within.faded { opacity: 0.28; }
  .method-panel .tp-labels {
    display: grid;
    grid-template-columns: 6fr 18fr 6fr;
    gap: 3px;
    margin-bottom: 4px;
  }
  .method-panel .tp-label {
    text-align: center;
    padding: 0 2px;
  }
  .method-panel .tp-label-name {
    font-family: "DM Sans", sans-serif;
    font-weight: 800;
    font-size: 8px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--navy);
    margin-bottom: 2px;
    line-height: 1.1;
  }
  .method-panel .tp-label-detail {
    font-family: "DM Sans", sans-serif;
    font-size: 9px;
    color: #555;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
  }