/* ─── TOKENS ──────────────────────────────────────────── */
    :root {
      --ink: #0D0F12;
      --parchment: #F4F0E8;
      --amber: #C18A2A;
      /* Nuviz Amber */
      --surf-dark: #141720;
      --surf-mid: #1C2030;
      --gray-600: #4B5563;
      --gray-400: #9CA3AF;
      --gray-100: #E8E4DC;
      --verde: #1A9E5C;
      --alerta: #D97706;
      --critico: #DC2626;
    }

    /* ─── RESET ───────────────────────────────────────────── */
    *,
    *::before,
    *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :focus-visible {
      outline: 1px solid var(--amber);
      outline-offset: 2px;
    }

    body {
      font-family: 'Inter', sans-serif;
      background: var(--ink);
      overflow: hidden;
      height: 100svh;
    }

    /* ─── TOP NAV ─────────────────────────────────────────── */
    .nav-top {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 200;
      height: 56px;
      padding: 0 64px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid rgba(244, 240, 232, 0.07);
      background: rgba(13, 15, 18, 0.96);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }

    .nav-logo {
      font-family: 'Switzer', sans-serif;
      font-size: 19px;
      font-weight: 500;
      color: var(--parchment);
      text-decoration: none;
      /* Switzer wordmark - native spacing per brand guide */
    }

    .nav-counter {
      font-size: 11px;
      color: var(--gray-400);
      letter-spacing: 0.08em;
      font-feature-settings: "tnum";
    }

    /* ─── BOTTOM NAV ──────────────────────────────────────── */
    .nav-bottom {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 200;
      height: 48px;
      padding: 0 48px;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      background: rgba(13, 15, 18, 0.92);
      border-top: 1px solid rgba(244, 240, 232, 0.06);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    .nav-arrows {
      display: flex;
      gap: 10px;
      justify-content: flex-start;
    }

    .nav-btn {
      background: none;
      border: 1px solid rgba(244, 240, 232, 0.14);
      color: var(--gray-400);
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 14px;
      font-family: 'Inter', sans-serif;
      transition: border-color 0.15s, color 0.15s;
    }

    .nav-btn:hover {
      border-color: var(--amber);
      color: var(--amber);
    }

    .nav-btn:disabled {
      opacity: 0.28;
      cursor: not-allowed;
    }

    .nav-btn:disabled:hover {
      border-color: rgba(244, 240, 232, 0.14);
      color: var(--gray-400);
    }

    .dots {
      display: flex;
      gap: 5px;
      align-items: center;
    }

    .p-hint {
      font-size: 8.5px;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(244, 240, 232, 0.3);
      user-select: none;
      text-align: right;
    }

    .dot {
      width: 7px;
      height: 7px;
      background: transparent;
      border: 1px solid rgba(193, 138, 42, 0.45);
      cursor: pointer;
      flex-shrink: 0;
      transition: background 0.18s, border-color 0.18s;
    }

    .dot.active {
      background: var(--amber);
      border-color: var(--amber);
    }

    .dot:hover:not(.active) {
      border-color: var(--amber);
    }

    /* ─── DECK WRAPPER ────────────────────────────────────── */
    .deck {
      position: fixed;
      inset: 0;
      overflow: hidden;
    }

    /* ─── SLIDE BASE ──────────────────────────────────────── */
    .slide {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      opacity: 0;
      transform: translateX(28px);
      pointer-events: none;
      transition: opacity 0.36s ease, transform 0.36s ease;
    }

    .slide.active {
      opacity: 1;
      transform: translateX(0);
      pointer-events: all;
    }

    .slide.prev {
      opacity: 0;
      transform: translateX(-28px);
    }

    /* ─── SKINS ───────────────────────────────────────────── */
    .s-dark {
      background: var(--ink);
    }

    .s-light {
      background: var(--parchment);
    }

    /* ─── LAYOUT ──────────────────────────────────────────── */
    .s-inner {
      flex: 1;
      min-height: 0;
      padding: 56px 64px 48px;
      display: flex;
      flex-direction: column;
    }

    .s-content {
      flex: 1;
      min-height: 0;
      display: flex;
      align-items: center;
    }

    .s-foot {
      flex-shrink: 0;
      padding: 12px 64px 60px;
      /* Clear nav-bottom (48px) + space */
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 20px;
      font-size: 9.5px;
      line-height: 1.6;
      color: rgba(75, 85, 99, 0.65);
      border-top: 1px solid rgba(13, 15, 18, 0.07);
    }

    .s-dark .s-foot {
      border-color: rgba(244, 240, 232, 0.06);
      color: rgba(156, 163, 175, 0.5);
    }

    .s-foot {
      display: none;
    }

    .s-foot-p {
      color: var(--amber);
      font-weight: 700;
      letter-spacing: 0.1em;
      opacity: 0.7;
    }

    /* ─── TWO COL ─────────────────────────────────────────── */
    .col2 {
      display: grid;
      grid-template-columns: 46% 54%;
      align-items: start;
      width: 100%;
    }

    .col2--vcenter {
      align-items: center;
    }

    .col2-l {
      padding-right: 56px;
    }

    .col2-r {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
    }

    /* ─── TYPOGRAPHY ──────────────────────────────────────── */
    .eyebrow {
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--amber);
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 18px;
    }

    .eyebrow::before {
      content: '';
      width: 24px;
      height: 1px;
      background: var(--amber);
      flex-shrink: 0;
    }

    h1 {
      font-family: 'DM Serif Display', serif;
      font-size: clamp(38px, 3.8vw, 64px);
      font-weight: 700;
      line-height: 1.02;
      letter-spacing: -0.01em;
      margin-bottom: 24px;
    }

    h2 {
      font-family: 'DM Serif Display', serif;
      font-size: clamp(24px, 2.4vw, 42px);
      font-weight: 400;
      line-height: 1.1;
      margin-bottom: 20px;
    }

    h3 {
      font-family: 'Inter', sans-serif;
      font-weight: 600;
    }

    .ink {
      color: var(--ink);
    }

    .cream {
      color: var(--parchment);
    }

    .amber {
      color: var(--amber);
    }

    .red {
      color: var(--critico);
    }

    .green {
      color: var(--verde);
    }

    .body-t {
      font-size: 15px;
      line-height: 1.72;
      color: var(--gray-600);
      max-width: 44ch;
    }

    .s-dark .body-t {
      color: var(--gray-400);
    }

    /* ─── CALLOUT ─────────────────────────────────────────── */
    .callout {
      border-left: 2px solid var(--amber);
      padding: 10px 16px;
      background: rgba(193, 138, 42, 0.07);
      font-size: 13px;
      font-weight: 500;
      line-height: 1.62;
      margin-top: 20px;
    }

    .s-dark .callout {
      color: var(--parchment);
    }

    .s-light .callout {
      color: var(--ink);
      background: rgba(193, 138, 42, 0.055);
    }

    /* ─── STAT HERO ───────────────────────────────────────── */
    .stat-hero {
      font-size: clamp(96px, 10.5vw, 152px);
      font-weight: 700;
      letter-spacing: -0.05em;
      line-height: 1;
    }

    .stat-unit {
      font-size: 0.3em;
      font-weight: 500;
      color: var(--gray-400);
      letter-spacing: -0.01em;
    }

    /* ─── STAT GRID (2×2) ─────────────────────────────────── */
    .stat-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1px;
      background: var(--gray-100);
      border: 1px solid var(--gray-100);
      margin-top: 28px;
      max-width: 620px;
    }

    .stat-cell {
      background: var(--parchment);
      padding: 18px 20px;
      border-radius: 0;
    }

    .stat-val {
      font-size: 21px;
      font-weight: 700;
      letter-spacing: -0.03em;
      color: var(--ink);
      margin-bottom: 4px;
    }

    .stat-lbl {
      font-size: 12px;
      color: var(--gray-600);
      line-height: 1.45;
    }

    /* ─── TRT CARDS ───────────────────────────────────────── */
    .cards3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      background: var(--gray-100);
      border: 1px solid var(--gray-100);
      width: 100%;
    }

    .card {
      background: var(--parchment);
      padding: 22px 20px;
    }

    .card-tag {
      font-size: 9.5px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--gray-400);
      margin-bottom: 10px;
    }

    .card-val {
      font-size: 30px;
      font-weight: 700;
      letter-spacing: -0.03em;
      color: var(--critico);
      line-height: 1;
      margin-bottom: 8px;
    }

    .card-body {
      font-size: 12.5px;
      color: var(--gray-600);
      line-height: 1.5;
    }

    /* ─── INLINE FLOW ─────────────────────────────────────── */
    .i-flow {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 18px;
      flex-wrap: wrap;
    }

    .i-step {
      font-size: 11.5px;
      font-weight: 600;
      color: var(--gray-600);
    }

    .i-arrow {
      color: var(--amber);
      font-size: 13px;
    }

    .i-step.danger {
      color: var(--critico);
    }

    /* ─── REQUIREMENT LIST ────────────────────────────────── */
    .req-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: 100%;
    }

    .req-item {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      padding: 11px 14px;
      border: 1px solid var(--gray-100);
      background: var(--parchment);
    }

    .req-icon {
      width: 22px;
      height: 22px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 1px;
      border: 1px solid;
    }

    .req-icon.ok {
      color: var(--verde);
      border-color: var(--verde);
    }

    .req-icon.warn {
      color: var(--alerta);
      border-color: var(--alerta);
    }

    .req-icon.fail {
      color: var(--critico);
      border-color: var(--critico);
    }

    .req-name {
      font-size: 13px;
      font-weight: 600;
      color: var(--ink);
      margin-bottom: 2px;
    }

    .req-name.fail {
      color: var(--critico);
    }

    .req-sub {
      font-size: 11.5px;
      color: var(--gray-600);
      line-height: 1.4;
    }

    /* ─── PRODUCT FLOW ────────────────────────────────────── */
    .pflow {
      display: flex;
      align-items: flex-start;
      width: 100%;
      gap: 0;
    }

    .pflow-node {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      position: relative;
      padding: 0 6px;
    }

    .pflow-node:not(:last-child)::after {
      content: '→';
      position: absolute;
      right: -10px;
      top: 14px;
      color: var(--amber);
      font-size: 16px;
    }

    .pflow-icon {
      width: 44px;
      height: 44px;
      border: 1px solid var(--gray-100);
      background: white;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 10px;
    }

    .pflow-node.done .pflow-icon {
      border-color: var(--verde);
    }

    .pflow-lbl {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ink);
      margin-bottom: 5px;
      line-height: 1.3;
    }

    .pflow-node.done .pflow-lbl {
      color: var(--verde);
    }

    .pflow-desc {
      font-size: 11px;
      color: var(--gray-600);
      line-height: 1.4;
      max-width: 98px;
    }

    /* ─── OUTCOMES STRIP ──────────────────────────────────── */
    .outcomes {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      background: var(--gray-100);
      border: 1px solid var(--gray-100);
      margin-top: 22px;
      width: 100%;
    }

    .outcome-cell {
      background: var(--parchment);
      padding: 16px 18px;
    }

    .outcome-lbl {
      font-size: 9.5px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--amber);
      margin-bottom: 7px;
    }

    .outcome-txt {
      font-size: 12.5px;
      color: var(--ink);
      line-height: 1.5;
    }

    /* ─── LEGAL FEATURE ───────────────────────────────────── */
    .legal-feature {
      border-left: 3px solid var(--amber);
      padding: 16px 20px;
      background: rgba(193, 138, 42, 0.04);
      margin-bottom: 20px;
    }

    .lf-label {
      font-size: 9.5px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--amber);
      margin-bottom: 8px;
    }

    .lf-text {
      font-size: 16px;
      font-weight: 600;
      color: var(--ink);
      line-height: 1.42;
      letter-spacing: -0.01em;
    }

    /* ─── MEDIA SLOTS ─────────────────────────────────────── */
    .media-slot {
      position: relative;
      overflow: hidden;
      background: var(--surf-dark);
    }

    .media-slot-inner {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .cctv-c {
      position: absolute;
      width: 18px;
      height: 18px;
      border-color: var(--amber);
      border-style: solid;
    }

    .cctv-c.tl {
      top: 10px;
      left: 10px;
      border-width: 1px 0 0 1px;
    }

    .cctv-c.tr {
      top: 10px;
      right: 10px;
      border-width: 1px 1px 0 0;
    }

    .cctv-c.bl {
      bottom: 10px;
      left: 10px;
      border-width: 0 0 1px 1px;
    }

    .cctv-c.br {
      bottom: 10px;
      right: 10px;
      border-width: 0 1px 1px 0;
    }

    .media-tag {
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--amber);
    }

    .media-desc {
      font-size: 10.5px;
      color: rgba(156, 163, 175, 0.7);
      text-align: center;
      max-width: 28ch;
      line-height: 1.5;
    }

    .media-rec {
      position: absolute;
      top: 12px;
      right: 36px;
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.1em;
      color: var(--critico);
      text-transform: uppercase;
    }

    .media-rec::before {
      content: '';
      width: 6px;
      height: 6px;
      background: var(--critico);
      border-radius: 50%;
    }

    .media-ts {
      position: absolute;
      bottom: 12px;
      left: 14px;
      font-family: 'Courier New', monospace;
      font-size: 9px;
      color: rgba(193, 138, 42, 0.65);
      letter-spacing: 0.06em;
    }

    /* ─── CCTV ART (slide 01) ─────────────────────────────── */
    .cctv-art {
      width: 100%;
      height: 100%;
      background: var(--surf-dark);
      border: 1px solid rgba(244, 240, 232, 0.06);
      position: relative;
      overflow: hidden;
    }

    .cctv-art svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }

    .cctv-status {
      position: absolute;
      top: 14px;
      left: 14px;
      z-index: 2;
      display: flex;
      align-items: center;
      gap: 6px;
      font-family: 'Courier New', monospace;
      font-size: 9px;
      color: rgba(193, 138, 42, 0.8);
      letter-spacing: 0.06em;
    }

    .cctv-recdot {
      width: 6px;
      height: 6px;
      background: var(--critico);
      border-radius: 50%;
    }

    /* ─── COMPARISON TABLE ────────────────────────────────── */
    .t {
      width: 100%;
      border-collapse: collapse;
      font-size: 12.5px;
    }

    .t th {
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--amber);
      padding: 8px 12px;
      text-align: left;
      border-bottom: 1px solid var(--gray-100);
    }

    .t th.t-nuviz-h {
      color: var(--amber);
      background: rgba(193, 138, 42, 0.07);
      border-top: 2px solid var(--amber);
      border-left: 1px solid rgba(193, 138, 42, 0.15);
      border-right: 1px solid rgba(193, 138, 42, 0.15);
    }

    .t td {
      padding: 7px 12px;
      border-bottom: 1px solid var(--gray-100);
      color: var(--gray-600);
      vertical-align: middle;
      line-height: 1.4;
    }

    .t td:first-child {
      color: var(--ink);
      font-weight: 500;
    }

    .t-check {
      color: var(--verde) !important;
      font-weight: 700;
      text-align: center;
    }

    .t-cross {
      color: var(--critico) !important;
      font-weight: 700;
      text-align: center;
    }

    .t-part {
      color: var(--alerta) !important;
      font-weight: 700;
      text-align: center;
    }

    .t-nuviz {
      color: var(--verde) !important;
      font-weight: 700;
      font-size: 16px;
      text-align: center;
      background: rgba(193, 138, 42, 0.05);
      border-left: 1px solid rgba(193, 138, 42, 0.18);
      border-right: 1px solid rgba(193, 138, 42, 0.18);
    }

    /* ─── TEAM ────────────────────────────────────────────── */
    .team-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      width: 100%;
    }

    .team-photo {
      width: 56px;
      height: 56px;
      border: 1px solid var(--gray-100);
      background: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 700;
      color: var(--gray-600);
      margin-bottom: 12px;
    }

    .team-name {
      font-size: 16px;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--ink);
      margin-bottom: 2px;
    }

    .team-role {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--amber);
      margin-bottom: 10px;
    }

    .team-creds {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .team-cred {
      font-size: 12.5px;
      color: var(--gray-600);
      display: flex;
      gap: 10px;
      align-items: flex-start;
      line-height: 1.4;
    }

    .team-cred::before {
      content: '—';
      color: var(--amber);
      flex-shrink: 0;
    }

    /* ─── LOGO BADGES ─────────────────────────────────────── */
    .logo-strip {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
      align-items: center;
    }

    .logo-strip img {
      height: 18px;
      width: auto;
      opacity: 0.6;
      filter: grayscale(1) brightness(0.8);
      transition: opacity 0.2s, filter 0.2s;
    }

    .logo-strip img:hover {
      opacity: 1;
      filter: grayscale(0) brightness(1);
    }

    .logo-badge {
      font-size: 11px;
      font-weight: 600;
      color: var(--gray-600);
      padding: 4px 11px;
      border: 1px solid var(--gray-100);
      letter-spacing: 0.02em;
    }

    /* ─── DISCOVERY QUESTIONS ─────────────────────────────── */
    .disc-list {
      display: flex;
      flex-direction: column;
      gap: 20px;
      width: 100%;
    }

    .disc-item {
      display: flex;
      gap: 14px;
      align-items: flex-start;
    }

    .disc-num {
      width: 26px;
      height: 26px;
      flex-shrink: 0;
      background: rgba(244, 240, 232, 0.07);
      color: var(--parchment);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700;
    }

    .disc-q {
      font-size: 13.5px;
      font-weight: 600;
      color: var(--parchment);
      margin-bottom: 3px;
    }

    .disc-hint {
      font-size: 12px;
      color: var(--gray-400);
      line-height: 1.5;
    }

    /* ─── POC BOX ─────────────────────────────────────────── */
    .poc {
      background: rgba(244, 240, 232, 0.05);
      border: 1px solid rgba(244, 240, 232, 0.11);
      border-left: 2px solid var(--amber);
      padding: 18px 22px;
    }

    .poc-title {
      font-size: 13px;
      font-weight: 700;
      color: var(--parchment);
      letter-spacing: -0.01em;
      margin-bottom: 6px;
    }

    .poc-body {
      font-size: 12px;
      color: var(--gray-400);
      line-height: 1.62;
    }

    /* ─── URGENCY STRIP ───────────────────────────────────── */
    .urgency {
      margin-top: 16px;
      padding: 10px 14px;
      background: rgba(193, 138, 42, 0.08);
      border: 1px solid rgba(193, 138, 42, 0.18);
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .urgency-dot {
      width: 7px;
      height: 7px;
      background: var(--amber);
      flex-shrink: 0;
    }

    .urgency-txt {
      font-size: 12px;
      font-weight: 600;
      color: var(--parchment);
    }

    /* ─── PRESENTER NOTES ─────────────────────────────────── */
    .slide .notes {
      display: none;
    }

    #notes-panel {
      display: none;
      position: fixed;
      bottom: 48px;
      left: 0;
      right: 0;
      z-index: 300;
      background: rgba(20, 23, 32, 0.97);
      border-top: 1px solid rgba(193, 138, 42, 0.25);
      padding: 14px 64px;
      max-height: 26vh;
      overflow-y: auto;
    }

    #notes-panel.visible {
      display: block;
    }

    .notes-label {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--amber);
      opacity: 0.8;
      margin-bottom: 8px;
    }

    #notes-text {
      font-size: 13px;
      color: var(--gray-400);
      line-height: 1.8;
      font-weight: 400;
    }

    #notes-text a {
      color: var(--parchment);
      text-decoration: none;
      border-bottom: 1px solid rgba(244, 240, 232, 0.15);
      transition: color 0.2s, border-color 0.2s;
    }

    #notes-text a:hover {
      color: var(--amber);
      border-color: var(--amber);
    }

    .ref-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .ref-item {
      display: flex;
      gap: 10px;
      align-items: flex-start;
    }

    .ref-idx {
      font-size: 10px;
      font-weight: 700;
      color: var(--amber);
      margin-top: 4px;
      min-width: 14px;
    }

    /* ─── UTILITY ─────────────────────────────────────────── */
    .w100 {
      width: 100%;
    }

    .row {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    /* ─── PRINT MODE ─────────────────────────────────────── */
    @media print {
      body {
        overflow: visible;
        height: auto;
        background: white;
      }

      .nav-top,
      .nav-bottom,
      #notes-panel,
      .notes,
      .nav-dots,
      .nav-arrows {
        display: none !important;
      }

      .deck {
        position: static;
        display: block;
        transform: none !important;
      }

      .slide {
        position: static;
        display: block !important;
        page-break-after: always;
        height: 100vh;
        width: 100vw;
        opacity: 1 !important;
        transform: none !important;
        visibility: visible !important;
      }

      .slide.s-dark {
        background: var(--ink) !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }

      .slide.s-light {
        background: var(--parchment) !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }

      .cream {
        color: var(--parchment) !important;
      }

      .ink {
        color: var(--ink) !important;
      }
    }

    /* ─── ROTATE OVERLAY ──────────────────────────────────── */
    .rotate-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 10000;
      background: var(--ink);
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 20px;
      padding: 32px;
      text-align: center;
    }

    .rotate-overlay.dismissed {
      display: none !important;
    }

    .rotate-icon {
      color: var(--amber);
      opacity: 0.85;
    }

    .rotate-title {
      font-family: 'DM Serif Display', serif;
      font-size: 22px;
      color: var(--parchment);
      line-height: 1.2;
    }

    .rotate-sub {
      font-size: 13px;
      color: var(--gray-400);
      line-height: 1.65;
      max-width: 30ch;
    }

    .rotate-dismiss {
      margin-top: 8px;
      background: none;
      border: 1px solid rgba(244, 240, 232, 0.18);
      color: var(--gray-400);
      font-family: 'Inter', sans-serif;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 10px 22px;
      cursor: pointer;
      transition: border-color 0.15s, color 0.15s;
      min-height: 44px;
    }

    .rotate-dismiss:hover,
    .rotate-dismiss:active {
      border-color: var(--amber);
      color: var(--amber);
    }

    @media (orientation: portrait) and (max-width: 1024px) {
      .rotate-overlay {
        display: flex;
      }
    }

    /* ─── NOTES TOGGLE BUTTON ─────────────────────────────── */
    .notes-toggle-btn {
      background: none;
      border: none;
      font-family: 'Inter', sans-serif;
      cursor: pointer;
      font-size: 8.5px;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(244, 240, 232, 0.3);
      user-select: none;
      text-align: right;
      padding: 0;
      min-height: 30px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      transition: color 0.15s;
    }

    .notes-toggle-btn:hover {
      color: rgba(244, 240, 232, 0.65);
    }

    .notes-toggle-btn:focus-visible {
      outline: 1px solid var(--amber);
      outline-offset: 4px;
    }

    /* On touch devices: larger tap target + more visible label */
    @media (hover: none) and (pointer: coarse) {
      .notes-toggle-btn {
        font-size: 10px;
        font-weight: 700;
        color: rgba(244, 240, 232, 0.45);
        padding: 8px 0;
        min-height: 44px;
        letter-spacing: 0.1em;
      }

      .notes-close-btn {
        min-width: 44px;
        min-height: 44px;
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .nav-btn {
        width: 40px;
        height: 40px;
      }
    }

    /* ─── COMPACT LANDSCAPE (phones ≤ 500px height) ──────── */
    @media (orientation: landscape) and (max-height: 500px) {
      .nav-top {
        height: 40px;
        padding: 0 20px;
      }

      .nav-bottom {
        height: 36px;
        padding: 0 16px;
      }

      .s-inner {
        padding: 40px 28px 36px;
      }

      .s-foot {
        padding: 8px 28px 44px;
      }

      #notes-panel {
        padding: 10px 28px;
        bottom: 36px;
        max-height: 38vh;
      }

      h1 {
        font-size: clamp(22px, 3.5vw, 64px);
        margin-bottom: 14px;
      }

      h2 {
        font-size: clamp(16px, 2.4vw, 42px);
        margin-bottom: 12px;
      }

      .stat-hero {
        font-size: clamp(52px, 9vw, 152px);
      }

      .eyebrow {
        margin-bottom: 10px;
      }

      .body-t {
        font-size: 13px;
        line-height: 1.55;
      }

      .col2-l {
        padding-right: 32px;
      }
    }