/* Mobile reading mode. The desktop canvas and printed slides stay unchanged. */
@media screen and (max-width: 900px) {
  :root {
    --mobile-gutter: clamp(20px, 4.5vw, 36px);
    --mobile-bottom-space: calc(100px + env(safe-area-inset-bottom, 0px));
  }

  html,
  body {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .viewport {
    position: fixed;
    inset: 0;
    height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    touch-action: auto;
    scroll-padding: 20px 0 var(--mobile-bottom-space);
    -webkit-overflow-scrolling: touch;
    background: var(--paper);
  }

  .deck {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    min-height: 100%;
    transform: none;
    overflow: visible;
    box-shadow: none;
    user-select: text;
  }

  .slide,
  .slide.was-active {
    display: none;
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    min-height: 100dvh;
    padding-bottom: var(--mobile-bottom-space);
    overflow: clip;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }

  .slide.active {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }

  .slide-inner {
    width: 100%;
    height: auto;
    padding: 24px var(--mobile-gutter) 28px;
  }

  .slide :where(div, article, figure, header, footer, section) {
    min-width: 0;
  }

  .slide.active .reveal {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .slide h1 {
    font-size: clamp(44px, 9vw, 72px);
    line-height: 1.02;
    letter-spacing: -0.05em;
  }

  .slide h2 {
    max-width: none;
    margin: 0 0 24px;
    font-size: clamp(30px, 6vw, 46px);
    line-height: 1.1;
    letter-spacing: -0.04em;
    overflow-wrap: break-word;
  }

  .slide h3 {
    min-height: 0;
    margin: 0 0 12px;
    font-size: clamp(22px, 3.5vw, 28px);
    line-height: 1.18;
    letter-spacing: -0.025em;
  }

  .slide p,
  .slide li {
    font-size: 17px;
    line-height: 1.5;
  }

  .slide small {
    font-size: 14px;
    line-height: 1.45;
  }

  html:lang(zh-Hans) .slide h2,
  html:lang(zh-Hans) .slide h3 {
    line-height: 1.2;
    letter-spacing: 0;
  }

  .slide-header {
    min-height: 0;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 28px;
  }

  .slide .eyebrow {
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0.09em;
  }

  .slide-index {
    flex: none;
    font-size: 13px;
    line-height: 1.4;
  }

  .source-note {
    position: relative;
    inset: auto;
    min-height: 44px;
    margin: 8px var(--mobile-gutter) 0;
    border-top: 1px solid var(--line);
    padding-top: 16px;
    font-size: 14px;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }

  .source-note-dark {
    border-color: rgba(255, 255, 255, 0.2);
  }

  .slide .photo-credit {
    position: relative;
    inset: auto;
    margin: 24px var(--mobile-gutter) 0;
    font-size: 12px;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }

  .story-rail {
    position: static;
    flex-wrap: wrap;
    gap: 12px 18px;
    margin-top: 28px;
    font-size: 12px;
    line-height: 1.4;
  }

  .story-rail span {
    white-space: normal;
  }

  .story-rail i {
    display: none;
  }

  /* 01 / 18: the photographic covers become content-led, not fixed-height. */
  .slide-cover,
  .slide-close {
    isolation: isolate;
  }

  .cover-photo,
  .close-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: none;
    animation: none;
  }

  .cover-wash,
  .close-wash {
    background: linear-gradient(180deg, rgba(16, 16, 18, 0.66), rgba(16, 16, 18, 0.82) 45%, rgba(16, 16, 18, 0.94));
  }

  .cover-brandbar {
    position: relative;
    inset: auto;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 28px;
    padding: 28px var(--mobile-gutter) 0;
  }

  .brand-lockup-cover {
    gap: 10px;
  }

  .brand-lockup-cover img {
    width: 32px;
    height: 32px;
  }

  .brand-lockup-cover span {
    font-size: 23px;
  }

  .cover-partner {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 8px 12px;
    width: 100%;
    padding: 0;
  }

  .cover-partner-label {
    grid-column: 1 / -1;
    font-size: 10px;
    line-height: 1.5;
  }

  .cover-partner > i {
    display: none;
  }

  .cover-partner img {
    width: 44px;
    height: 44px;
  }

  .cover-partner-name {
    min-width: 0;
  }

  .cover-partner-name strong {
    font-size: 18px;
  }

  .cover-partner-name small {
    font-size: 12px;
  }

  .cover-copy {
    position: relative;
    inset: auto;
    width: auto;
    margin: 48px var(--mobile-gutter) 0;
  }

  .cover-copy h1 {
    margin: 20px 0 24px;
    overflow-wrap: normal;
  }

  .slide .cover-subtitle {
    max-width: none;
    margin-bottom: 28px;
    font-size: clamp(22px, 5.4vw, 32px);
    line-height: 1.3;
  }

  .cover-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .cover-meta span {
    font-size: 14px;
    line-height: 1.4;
  }

  .cover-meta span + span {
    border: 0;
    padding: 0;
  }

  .cover-language-slot {
    margin-top: 26px;
  }

  .cover-language {
    position: static;
    inset: auto;
    width: 100%;
    max-width: 100%;
    gap: 8px;
    margin: 0;
  }

  .cover-language-label {
    font-size: 12px;
    line-height: 1.5;
  }

  .language-options {
    flex-wrap: wrap;
    gap: 6px 18px;
  }

  .language-options button {
    min-height: 44px;
    font-size: 14px;
  }

  .close-content {
    position: relative;
    inset: auto;
    display: block;
    width: auto;
    padding: 32px var(--mobile-gutter) 0;
  }

  .close-content > .brand-lockup {
    margin-bottom: 56px;
  }

  .close-content h2 {
    max-width: none;
    margin-bottom: 24px;
    font-size: clamp(38px, 8vw, 60px);
  }

  .slide .close-main {
    max-width: none;
    margin-bottom: 20px;
    font-size: 24px;
    line-height: 1.35;
  }

  .close-line {
    max-width: none;
    margin-bottom: 28px;
  }

  .next-step {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: none;
    padding-top: 24px;
  }

  .next-step > span {
    grid-row: auto;
    font-size: 12px;
    line-height: 1.4;
  }

  .next-step strong {
    font-size: 24px;
    line-height: 1.3;
  }

  .decision-outputs {
    display: grid;
    gap: 10px;
    font-size: 16px;
    line-height: 1.45;
  }

  .decision-outputs span + span {
    border: 0;
    padding: 0;
  }

  .next-step > small {
    font-size: 15px;
    line-height: 1.5;
  }

  /* Shared two- and three-column stories become a single reading sequence. */
  .opportunity-grid,
  .ai-layout,
  .invisible-grid,
  .kit-layout {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 32px;
    height: auto;
  }

  /* 02: tourism opportunity. */
  .opportunity-copy {
    justify-content: flex-start;
    padding-bottom: 0;
  }

  .arrival-number {
    gap: 10px;
    padding-top: 20px;
  }

  .arrival-number strong {
    font-size: clamp(44px, 9vw, 68px);
  }

  .arrival-number span {
    font-size: 13px;
    line-height: 1.5;
  }

  .opportunity-copy > p {
    max-width: none;
    margin: 24px 0 0;
  }

  .opportunity-thesis {
    max-width: none;
    gap: 10px;
    margin-top: 24px;
    padding-left: 16px;
  }

  .opportunity-thesis span {
    font-size: 12px;
    line-height: 1.4;
  }

  .opportunity-thesis strong {
    font-size: 20px;
    line-height: 1.35;
  }

  .image-plate {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: 18px;
  }

  .image-plate figcaption {
    right: 16px;
    bottom: 16px;
    left: 16px;
    font-size: 12px;
    line-height: 1.4;
  }

  /* 03: evidence is read vertically, with its scope immediately alongside. */
  .evidence-strip {
    grid-template-columns: 1fr;
  }

  .evidence-stat {
    min-height: 0;
    padding: 24px 0;
  }

  .evidence-stat + .evidence-stat {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-left: 0;
    padding-left: 0;
  }

  .evidence-stat strong {
    font-size: clamp(56px, 13vw, 76px);
  }

  .evidence-stat p {
    max-width: none;
    margin: 16px 0 20px;
  }

  .evidence-stat > span {
    font-size: 12px;
    line-height: 1.5;
  }

  .slide .scope-warning {
    margin: 24px 0 0;
    font-size: 14px;
  }

  /* 05: AI readiness gap. */
  .ai-readiness-photo,
  .ai-readiness-wash {
    position: relative;
    inset: auto;
    width: 100%;
  }

  .ai-readiness-photo {
    height: auto;
    aspect-ratio: 16 / 9;
    margin-top: 22px;
    border-radius: 18px;
    object-position: center 68%;
  }

  .ai-readiness-wash {
    display: none;
  }

  .ai-readiness-copy {
    width: 100%;
  }

  .ai-readiness-copy h2 {
    margin-top: 0;
    font-size: clamp(44px, 11vw, 66px);
  }

  .ai-readiness-lead {
    font-size: 19px;
  }

  .ai-readiness-list {
    grid-template-columns: 1fr;
  }

  .ai-readiness-list div,
  .ai-readiness-list div:nth-child(even) {
    min-height: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-left: 0;
    padding: 20px 0;
  }

  .ai-readiness-list div:first-child {
    border-top: 0;
  }

  .ai-readiness-list strong {
    font-size: 24px;
  }

  .ai-readiness-list span {
    font-size: 18px;
    line-height: 1.45;
  }

  .ai-readiness-answer {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  /* 04: AI statistics and the real product image. */
  .ai-copy > p {
    max-width: none;
    margin-bottom: 24px;
  }

  .ai-stats {
    grid-template-columns: 1fr;
  }

  .ai-stats > div {
    display: grid;
    grid-template-columns: minmax(112px, 0.7fr) minmax(0, 1.3fr);
    align-items: center;
    gap: 16px;
    min-height: 0;
    padding: 20px 0;
  }

  .ai-stats > div + div {
    border-top: 1px solid var(--line);
    border-left: 0;
    padding-left: 0;
  }

  .ai-stats strong {
    font-size: 44px;
  }

  .ai-stats span {
    margin: 0;
    font-size: 16px;
    line-height: 1.45;
  }

  .ai-copy blockquote {
    margin: 24px 0;
    font-size: 24px;
    line-height: 1.3;
  }

  .ai-copy > .ai-principle {
    padding-left: 16px;
    font-size: 15px;
    line-height: 1.5;
  }

  .browser-frame {
    margin: 0;
    border-radius: 16px;
  }

  .browser-frame iframe {
    height: 560px;
  }

  /* 05: business information gaps and local examples. */
  .signal-flow li {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 12px;
    min-height: 0;
    padding: 20px 0;
  }

  .signal-flow > li > span {
    width: 36px;
    height: 36px;
    font-size: 12px;
  }

  .signal-flow strong {
    font-size: 20px;
    line-height: 1.25;
  }

  .signal-flow small {
    font-size: 16px;
    line-height: 1.45;
  }

  .local-examples {
    margin-top: 28px;
  }

  .local-examples h3 {
    font-size: 18px;
    line-height: 1.35;
  }

  .local-example-list {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .local-example-list strong {
    font-size: 16px;
  }

  .local-example-list span {
    font-size: 14px;
    line-height: 1.45;
  }

  .example-links {
    gap: 0 16px;
    margin-top: 6px;
  }

  .example-link {
    min-height: 44px;
    padding: 8px 0;
    font-size: 14px;
    line-height: 1.35;
  }

  .slide .local-examples p {
    font-size: 13px;
    line-height: 1.5;
  }

  .audit-panel {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 360px;
    border-radius: 18px;
    isolation: isolate;
  }

  .audit-panel > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .audit-callout {
    position: relative;
    inset: auto;
    padding: 28px 24px;
  }

  .audit-callout strong {
    font-size: 64px;
  }

  .audit-callout p {
    margin: 20px 0;
    font-size: 17px;
    line-height: 1.45;
  }

  .audit-callout span {
    font-size: 12px;
    line-height: 1.5;
  }

  /* 06 / 07: remit and programme scope. */
  .lada-lead {
    grid-template-columns: 1fr;
    gap: 24px;
    margin: 8px 0 28px;
  }

  .lada-lead img {
    width: 96px;
    height: 64px;
  }

  .mandate-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .mandate-grid article {
    min-height: 0;
    padding: 24px 0;
  }

  .mandate-grid span {
    margin-bottom: 10px;
    font-size: 12px;
    line-height: 1.5;
  }

  .slide .mandate-note {
    margin: 24px 0 0;
    font-size: 14px;
  }

  .programme-banner {
    grid-template-columns: 1fr;
    gap: 24px;
    min-height: 0;
    border-radius: 20px;
    padding: 24px;
  }

  .programme-banner > div:first-child > span {
    font-size: 11px;
    line-height: 1.5;
  }

  .programme-banner h2 {
    margin: 16px 0;
    font-size: clamp(28px, 5.5vw, 40px);
  }

  .pilot-number {
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    border-left: 0;
    padding: 24px 0 0;
  }

  .pilot-number strong {
    font-size: 64px;
  }

  .pilot-number span {
    font-size: 18px;
  }

  .pilot-number small {
    font-size: 12px;
  }

  .platform-system {
    grid-template-columns: 1fr;
    margin-top: 28px;
  }

  .platform-system article {
    min-height: 0;
    padding: 24px 0;
  }

  .platform-system article + article {
    border-left: 0;
    padding-left: 0;
  }

  .system-number {
    font-size: 12px;
    line-height: 1.5;
  }

  .platform-system h3 {
    margin: 12px 0;
  }

  .commission-callout {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 16px;
    padding-top: 20px;
  }

  .commission-callout strong {
    font-size: 12px;
  }

  /* 08: preserve the ordered delivery sequence without horizontal compression. */
  .process-track {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 24px;
  }

  .process-track::before {
    display: none;
  }

  .process-track li {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 8px 14px;
    min-height: 0;
    border-top: 1px solid var(--line);
    border-right: 0;
    padding: 22px 0;
  }

  .process-track li > span {
    grid-row: span 2;
    align-self: start;
    width: 40px;
    height: 40px;
    margin: 0;
    border: 0;
    font-size: 12px;
  }

  .process-track strong {
    margin: 0;
    font-size: 22px;
    line-height: 1.25;
  }

  .process-track p {
    grid-column: 2;
    font-size: 16px;
    line-height: 1.5;
  }

  .tier-bands {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 28px;
  }

  .tier-bands article {
    min-height: 0;
    padding: 24px;
  }

  .tier-bands span {
    font-size: 12px;
    line-height: 1.5;
  }

  .tier-bands strong {
    font-size: 22px;
    line-height: 1.3;
  }

  .tier-bands p,
  .slide .delivery-check {
    font-size: 16px;
  }

  .delivery-check strong {
    display: block;
    margin: 0 0 8px;
    font-size: 15px;
  }

  /* 09: the example profile is bounded by the reading column. */
  .slide-kit {
    background: var(--surface-soft);
  }

  .kit-title {
    align-self: auto;
    padding-top: 0;
  }

  .kit-title > p {
    max-width: none;
  }

  .kit-title > .kit-acceptance {
    margin-top: 24px;
    padding-top: 18px;
    font-size: 16px;
  }

  .profile-mock {
    justify-self: center;
    width: 100%;
    max-width: 340px;
    border-width: 6px;
    border-radius: 28px;
  }

  .profile-mock > img {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .profile-body {
    padding: 20px;
  }

  .verified-label {
    font-size: 11px;
    line-height: 1.4;
  }

  .profile-body h3 {
    margin: 18px 0 10px;
    font-size: 24px;
  }

  .profile-body p {
    font-size: 16px;
  }

  .profile-actions span {
    padding: 8px 10px;
    font-size: 12px;
  }

  .kit-items article {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 12px;
    min-height: 0;
    padding: 22px 0;
  }

  .kit-items article span {
    padding-top: 3px;
    font-size: 13px;
  }

  .kit-items h3 {
    font-size: 22px;
  }

  .kit-items p {
    font-size: 16px;
    line-height: 1.5;
  }

  .kit-ai-note {
    margin-top: 24px;
    font-size: 15px;
    line-height: 1.5;
  }

  .kit-scope {
    align-content: start;
  }

  .kit-scope-group {
    padding: 24px 0;
  }

  .kit-scope-label {
    font-size: 12px;
    line-height: 1.5;
  }

  .kit-scope-group h3 {
    margin-bottom: 16px;
    font-size: 23px;
    line-height: 1.25;
  }

  .kit-scope-group ul {
    gap: 12px;
  }

  .kit-scope-group li {
    padding-left: 18px;
    font-size: 16px;
    line-height: 1.5;
  }

  .kit-policy-note {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 24px;
    padding-top: 18px;
    font-size: 15px;
    line-height: 1.5;
  }

  .kit-policy-note strong {
    font-size: 12px;
    line-height: 1.5;
  }

  /* 10: inclusion and support remain in the original reading order. */
  .inclusion-lead,
  .inclusion-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .inclusion-lead {
    margin: 0 0 28px;
  }

  .inclusion-lead p {
    padding-left: 16px;
  }

  .cohort-field {
    grid-template-columns: 1fr;
    gap: 0;
    min-height: 0;
    padding: 12px 24px;
  }

  .cohort-field span {
    min-height: 48px;
    padding: 14px 0;
    font-size: 17px;
    line-height: 1.4;
  }

  .inclusion-method {
    min-height: 0;
    padding: 0;
  }

  .slide .eligibility-note {
    margin: 20px 0;
    font-size: 15px;
  }

  .method-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 18px 0;
  }

  .method-row strong {
    font-size: 14px;
  }

  .method-row span {
    font-size: 17px;
    line-height: 1.5;
  }

  .inclusion-metrics {
    display: grid;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
  }

  .inclusion-metrics span {
    font-size: 14px;
    line-height: 1.4;
  }

  .inclusion-metrics i {
    display: none;
  }

  /* 11: a vertical handoff diagram, including its connective labels. */
  .bridge-diagram {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .bridge-node {
    min-height: 0;
    padding: 24px;
  }

  .bridge-node > span {
    margin-bottom: 16px;
    font-size: 12px;
    line-height: 1.5;
  }

  .bridge-node h3 {
    margin-bottom: 20px;
    font-size: 24px;
  }

  .bridge-node li {
    font-size: 16px;
    line-height: 1.45;
  }

  .bridge-link {
    gap: 8px;
    font-size: 11px;
    line-height: 1.4;
  }

  .bridge-link i {
    width: 24px;
    margin: 10px 0;
    transform: rotate(90deg);
  }

  .bridge-quote {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 28px;
    padding-top: 24px;
  }

  .bridge-quote span {
    font-size: 15px;
    line-height: 1.5;
  }

  /* 12 / 15: preserve native tables and keep their scrolling local. */
  .returns-heading,
  .measure-heading,
  .partnership-heading,
  .dashboard-heading {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    margin: 0 0 24px;
  }

  .returns-heading h2,
  .measure-heading h2,
  .partnership-heading h2,
  .dashboard-heading h2 {
    margin: 0;
  }

  .returns-heading p,
  .measure-heading p,
  .partnership-heading p,
  .dashboard-heading p {
    max-width: none;
    margin: 0;
    font-size: 17px;
    line-height: 1.5;
  }

  .dashboard-heading p {
    margin-top: 16px;
  }

  .table-scroll {
    width: 100%;
    max-width: 100%;
    margin: 24px 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    touch-action: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .table-scroll:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 4px;
  }

  .deliverables-ledger,
  .scorecard {
    width: 100%;
    min-width: 640px;
    table-layout: fixed;
  }

  .deliverables-ledger thead th,
  .scorecard thead th {
    padding: 14px 12px;
    font-size: 13px;
    line-height: 1.4;
  }

  .deliverables-ledger tbody th,
  .deliverables-ledger td,
  .scorecard tbody th,
  .scorecard td {
    height: auto;
    padding: 18px 12px;
    font-size: 16px;
    line-height: 1.5;
  }

  .deliverables-ledger tbody th span {
    margin-right: 8px;
    font-size: 12px;
    vertical-align: 1px;
  }

  .public-funding-box {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 24px;
    padding: 22px;
  }

  .public-funding-box strong {
    font-size: 14px;
    line-height: 1.5;
  }

  .public-funding-box small {
    font-size: 15px;
    line-height: 1.5;
  }

  .attribution-model {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 24px;
  }

  .attribution-model article {
    gap: 10px;
    padding: 22px;
  }

  .attribution-model span {
    font-size: 12px;
  }

  .attribution-model strong {
    font-size: 20px;
    line-height: 1.3;
  }

  .attribution-model p {
    font-size: 16px;
  }

  .slide .causality-note {
    font-size: 14px;
  }

  /* 13: each dashboard panel has its own full-width, labelled chart. */
  .illustrative-badge {
    align-self: flex-start;
    max-width: 100%;
    font-size: 12px;
    line-height: 1.4;
  }

  .dashboard-shell {
    border-radius: 16px;
  }

  .dashboard-topbar {
    grid-template-columns: 1fr;
    gap: 8px;
    height: auto;
    padding: 16px;
  }

  .dashboard-topbar strong {
    font-size: 16px;
  }

  .dashboard-topbar span {
    font-size: 13px;
    line-height: 1.4;
  }

  .dashboard-topbar > div {
    font-size: 11px;
    line-height: 1.4;
  }

  .dashboard-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-rows: auto;
    gap: 12px;
    padding: 12px;
  }

  .dash-panel {
    overflow: visible;
    padding: 16px;
  }

  .dash-panel header {
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
  }

  .dash-panel header span {
    font-size: 18px;
    line-height: 1.3;
  }

  .dash-panel header small {
    flex-basis: 100%;
    max-width: none;
    font-size: 13px;
    line-height: 1.4;
    text-align: left;
  }

  .bar-row {
    grid-template-columns: 80px minmax(0, 1fr) 36px;
    gap: 8px;
    min-height: 40px;
    height: auto;
    padding: 6px 0;
  }

  .bar-row label,
  .bar-row b {
    font-size: 14px;
    line-height: 1.35;
  }

  .bar-row i {
    height: 12px;
  }

  .interest-axis {
    margin: 8px 44px 0 88px;
    font-size: 11px;
  }

  .area-ranking > div {
    grid-template-columns: 22px minmax(0, 1fr) auto;
    gap: 10px;
    min-height: 52px;
    padding: 10px 0;
  }

  .area-ranking b {
    font-size: 11px;
  }

  .area-ranking span {
    font-size: 16px;
    line-height: 1.4;
  }

  .area-ranking strong {
    font-size: 20px;
  }

  .actions-panel {
    grid-row: auto;
  }

  .action-numbers > div {
    display: grid;
    grid-template-columns: minmax(96px, 0.8fr) minmax(0, 1.2fr);
    align-items: center;
    gap: 16px;
    min-height: 0;
    padding: 18px 0;
  }

  .action-numbers strong {
    font-size: 36px;
  }

  .action-numbers span {
    font-size: 15px;
    line-height: 1.45;
  }

  .participation-panel {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 16px;
  }

  .participation-panel header {
    grid-column: auto;
    margin-bottom: 0;
  }

  .ring-chart {
    justify-self: center;
    margin: 4px 0;
  }

  .participation-panel ul {
    justify-self: center;
    width: 100%;
    max-width: 240px;
  }

  .participation-panel li {
    grid-template-columns: 12px minmax(0, 1fr) auto;
    font-size: 16px;
  }

  .campaign-panel {
    grid-column: auto;
  }

  .trend-bars {
    grid-template-columns: 28px repeat(4, minmax(0, 1fr));
    gap: 8px;
    height: 180px;
    padding-top: 10px;
    padding-bottom: 24px;
  }

  .trend-bars::before {
    bottom: 24px;
    left: 36px;
  }

  .trend-column i {
    width: min(32px, 100%);
  }

  .trend-column b,
  .trend-column > span {
    font-size: 11px;
  }

  .slide .dashboard-disclaimer {
    margin-top: 16px;
    font-size: 14px;
  }

  /* 14 / 15: analytics become a readable vertical report on small screens. */
  .analytics-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .analytics-metrics article {
    min-height: 118px;
    padding: 18px 16px 15px;
  }

  .analytics-metrics span {
    min-height: 38px;
    margin-bottom: 4px;
    font-size: 13px;
    line-height: 1.35;
  }

  .analytics-metrics strong {
    font-size: 30px;
  }

  .analytics-metrics small {
    font-size: 11px;
    line-height: 1.35;
  }

  .audience-dashboard-grid,
  .search-dashboard-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
  }

  .analytics-panel {
    min-height: 0;
    padding: 16px;
  }

  .spectrum-bars > div {
    grid-template-columns: minmax(92px, 0.85fr) minmax(80px, 1.4fr) 38px;
    gap: 8px;
    min-height: 46px;
  }

  .spectrum-bars label,
  .spectrum-bars b {
    font-size: 13px;
    line-height: 1.35;
  }

  .segment-list > div {
    grid-template-columns: 24px minmax(0, 1fr) auto;
    gap: 9px;
    min-height: 76px;
    padding: 10px 0;
  }

  .segment-list strong {
    font-size: 15px;
    line-height: 1.35;
  }

  .segment-list small {
    font-size: 12px;
    line-height: 1.35;
  }

  .segment-list em {
    font-size: 19px;
  }

  .composition-panel {
    grid-template-rows: auto;
    gap: 18px;
  }

  .device-block {
    padding-top: 18px;
  }

  .device-block ul {
    gap: 6px;
  }

  .device-block li {
    grid-template-columns: 8px minmax(0, 1fr);
    font-size: 11px;
  }

  .visitor-mix {
    grid-template-columns: 102px minmax(0, 1fr);
    gap: 14px;
    padding-top: 18px;
  }

  .return-ring {
    width: 92px;
    height: 92px;
  }

  .intent-list > div {
    gap: 12px;
    min-height: 54px;
  }

  .intent-list span {
    font-size: 14px;
    line-height: 1.35;
  }

  .intent-list strong {
    font-size: 18px;
  }

  .keyword-panel li {
    grid-template-columns: 26px minmax(0, 1fr) auto;
    min-height: 54px;
  }

  .keyword-panel li span {
    font-size: 14px;
    line-height: 1.4;
    text-overflow: clip;
    white-space: normal;
  }

  .search-funnel {
    padding: 4px 0;
  }

  .search-funnel > div {
    min-width: 60%;
    min-height: 54px;
  }

  .search-funnel > div span {
    font-size: 11px;
  }

  .search-funnel > div strong {
    font-size: 17px;
  }

  .search-funnel > i {
    min-height: 30px;
    font-size: 10px;
  }

  /* 16: campaign, platform, microsites and audience remain a visible sequence. */
  .network-heading {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 28px;
  }

  .network-heading h2,
  .network-heading p {
    margin: 0;
  }

  .network-stage {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    min-height: 0;
  }

  .network-origin,
  .network-hub,
  .network-audience {
    min-height: 0;
    border-radius: 20px;
    padding: 24px;
  }

  .network-origin strong,
  .network-hub strong,
  .network-audience strong {
    font-size: 22px;
    line-height: 1.3;
  }

  .network-origin span,
  .network-hub span,
  .network-audience span {
    font-size: 16px;
    line-height: 1.5;
  }

  .network-origin img {
    width: 72px;
    height: 56px;
    margin-bottom: 18px;
  }

  .network-hub img {
    width: 52px;
    height: 52px;
    margin-bottom: 18px;
  }

  .network-line {
    justify-self: center;
    width: 2px;
    height: 28px;
  }

  .network-line::after {
    top: auto;
    right: 50%;
    bottom: 0;
    width: 8px;
    height: 8px;
    transform: translateX(50%) rotate(135deg);
  }

  .microsite-cluster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .microsite-cluster article,
  .microsite-cluster article:nth-child(4) {
    grid-column: auto;
    min-height: 0;
    border-radius: 12px;
    padding: 18px 16px;
  }

  .microsite-cluster article:last-child {
    grid-column: 1 / -1;
  }

  .microsite-cluster span {
    font-size: 15px;
    line-height: 1.4;
  }

  .microsite-cluster small {
    font-size: 12px;
  }

  .targeting-examples {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 28px;
  }

  .targeting-examples span {
    font-size: 12px;
    line-height: 1.4;
  }

  .targeting-examples strong {
    font-size: 17px;
    line-height: 1.4;
  }

  .slide .network-metrics {
    font-size: 15px;
  }

  /* 16: quarters read as four successive acceptance gates. */
  .roadmap-track {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .roadmap-track article {
    min-height: 0;
    padding: 24px 24px 0;
  }

  .quarter span {
    font-size: 34px;
  }

  .quarter small {
    font-size: 14px;
  }

  .roadmap-track h3 {
    margin: 24px 0 18px;
    font-size: 26px;
  }

  .roadmap-track ul {
    gap: 12px;
  }

  .roadmap-track li {
    font-size: 16px;
    line-height: 1.5;
  }

  .roadmap-track footer {
    min-height: 0;
    margin: 24px -24px 0;
    padding: 20px 24px;
    font-size: 16px;
    line-height: 1.5;
  }

  .roadmap-track footer strong {
    font-size: 12px;
  }

  .governance-rail {
    display: grid;
    gap: 12px;
    font-size: 12px;
    line-height: 1.5;
  }

  .governance-rail i {
    display: none;
  }

  /* 17: roles, funding and continuity are separate readable sections. */
  .role-row {
    grid-template-columns: 1fr;
  }

  .role-row article {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 22px 0;
  }

  .role-row article + article {
    padding-left: 0;
  }

  .role-row article:last-child {
    border-bottom: 0;
  }

  .role-row span {
    margin-bottom: 10px;
    font-size: 12px;
    line-height: 1.5;
  }

  .funding-sustainability {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 28px;
  }

  .funding-block,
  .sustainability-block {
    min-height: 0;
    padding: 24px;
  }

  .funding-block > span,
  .sustainability-block > span {
    font-size: 12px;
    line-height: 1.5;
  }

  .funding-block h3 {
    max-width: none;
    font-size: 24px;
  }

  .slide .funding-route,
  .slide .funding-costs {
    font-size: 16px;
    line-height: 1.5;
  }

  .funding-block small {
    font-size: 14px;
    line-height: 1.5;
  }

  .year-row {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 12px;
    padding: 18px 0;
  }

  .year-row b {
    font-size: 16px;
    line-height: 1.5;
  }

  .year-row p {
    font-size: 16px;
    line-height: 1.5;
  }

  .ip-rail {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
  }

  .ip-rail strong {
    font-size: 12px;
    line-height: 1.5;
  }

  .ip-rail span {
    font-size: 16px;
    line-height: 1.5;
  }

  /* 20: indicative pricing becomes a single transparent reading sequence. */
  .pricing-heading {
    display: grid;
    gap: 16px;
    margin: 0 0 24px;
  }

  .pricing-heading h2 {
    margin-bottom: 0;
  }

  .pricing-heading p {
    margin: 12px 0 0;
    font-size: 17px;
    line-height: 1.5;
  }

  .pricing-status {
    justify-self: start;
    margin: 0;
    padding: 8px 12px;
    font-size: 11px;
    line-height: 1.4;
  }

  .pricing-baseline {
    grid-template-columns: 1fr;
    gap: 8px;
    min-height: 0;
    padding: 18px 16px 18px 20px;
  }

  .pricing-baseline > span {
    font-size: 12px;
    line-height: 1.5;
  }

  .pricing-baseline strong {
    font-size: 22px;
    line-height: 1.25;
  }

  .pricing-baseline p {
    font-size: 16px;
    line-height: 1.5;
  }

  .pricing-comparison {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 28px;
  }

  .pricing-column + .pricing-column {
    border-top: 1px solid var(--line);
    border-left: 0;
    padding-top: 28px;
    padding-left: 0;
  }

  .pricing-column > header {
    display: grid;
    gap: 6px;
    min-height: 0;
    padding-bottom: 14px;
  }

  .pricing-column > header span {
    font-size: 19px;
    line-height: 1.35;
  }

  .pricing-column > header small {
    font-size: 13px;
    line-height: 1.45;
    text-align: left;
  }

  .commercial-price-lines {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 18px 0;
  }

  .commercial-price-lines strong {
    font-size: clamp(32px, 9vw, 42px);
  }

  .commercial-price-lines span,
  .commercial-total span,
  .commercial-total small {
    font-size: 13px;
    line-height: 1.4;
  }

  .commercial-total {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 16px 0;
  }

  .commercial-total strong {
    font-size: 28px;
  }

  .commercial-total small {
    text-align: left;
  }

  .pricing-scope-list {
    gap: 12px;
    margin-top: 18px;
  }

  .pricing-scope-list li {
    font-size: 16px;
    line-height: 1.5;
  }

  .pricing-band-table {
    grid-template-columns: 1fr;
  }

  .cohort-efficiency {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.5;
  }

  .pricing-band-table > div,
  .pricing-band-table > div:nth-child(odd),
  .pricing-band-table > div:nth-child(even),
  .pricing-band-table > div:nth-last-child(-n + 2) {
    min-height: 48px;
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
    padding: 0;
  }

  .pricing-band-table > div:last-child {
    border-bottom: 0;
  }

  .pricing-band-table span {
    font-size: 15px;
  }

  .pricing-band-table strong {
    font-size: 17px;
  }

  .pilot-math,
  .pilot-ceilings {
    grid-template-columns: 1fr;
  }

  .pilot-math div,
  .pilot-math div + div,
  .pilot-ceilings > div,
  .pilot-ceilings > div + div {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
    padding: 14px 0;
  }

  .pilot-math div:last-child,
  .pilot-ceilings > div:last-child {
    border-bottom: 0;
  }

  .pilot-math span,
  .pilot-ceilings span {
    font-size: 13px;
    line-height: 1.45;
  }

  .pilot-math strong,
  .pilot-ceilings strong {
    font-size: 23px;
    line-height: 1.25;
  }

  .pilot-math small {
    font-size: 13px;
    line-height: 1.45;
  }

  .pilot-ceilings small {
    font-size: 13px;
    line-height: 1.45;
  }

  .programme-inclusions {
    margin-top: 16px;
    font-size: 15px;
    line-height: 1.5;
  }

  .base-cap-rule {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.5;
  }

  .pricing-caveat {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 28px;
    padding-top: 20px;
  }

  .pricing-caveat strong {
    font-size: 12px;
    line-height: 1.5;
  }

  .pricing-caveat span {
    font-size: 15px;
    line-height: 1.5;
  }

  /* Mobile chrome: five 44px actions and a compact counter fit at 320px. */
  .presentation-controls {
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    left: 12px;
    justify-content: space-between;
    gap: 3px;
    width: auto;
    max-width: calc(100% - 24px);
    border-radius: 18px;
    background: rgba(18, 18, 20, 0.98);
    padding: 6px;
    /* A filtered ancestor would contain the fixed secondary tools tray. */
    backdrop-filter: none;
  }

  .control-button,
  .help-button {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    min-height: 44px;
  }

  #firstSlideButton,
  #voiceButton,
  #toolsButton {
    display: inline-flex;
    width: 44px;
    min-width: 44px;
    padding: 0;
  }

  #voiceButton > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .slide-count {
    gap: 3px;
    min-width: 42px;
    padding: 0;
    font-size: 11px;
  }

  .slide-count i {
    width: 8px;
  }

  .presentation-tools {
    position: fixed;
    z-index: 112;
    right: 12px;
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    left: 12px;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 18px;
    background: rgba(18, 18, 20, 0.98);
    padding: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
  }

  .presentation-tools:not(.open) {
    display: none;
  }

  .presentation-tools.open {
    display: flex;
  }

  .presentation-tools .control-text {
    display: inline-flex;
    flex: 1 1 auto;
    width: auto;
    min-width: 64px;
    padding: 0 12px;
    font-size: 14px;
  }

  .help-button {
    display: none;
  }

  .presentation-tools .help-button {
    display: inline-flex;
    position: static;
    inset: auto;
    flex: 0 0 44px;
    margin: 0;
  }

  body.idle .presentation-controls,
  body.idle .help-button {
    opacity: 1;
  }

  /* Dialogs retain their own bounded scrolling, separate from the slide. */
  .notes-panel {
    top: 12px;
    right: 12px;
    left: 12px;
    width: auto;
    min-height: 0;
    max-height: calc(100dvh - 112px - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    border-radius: 20px;
    padding: 20px;
  }

  .notes-panel h3 {
    font-size: 22px;
    line-height: 1.25;
  }

  .notes-panel p {
    font-size: 16px;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }

  .notes-panel button,
  .overlay-card header button {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
  }

  .overlay {
    height: 100dvh;
    padding: 12px;
  }

  .overlay-card,
  .references-card {
    width: 100%;
    max-height: calc(100dvh - 24px);
    border-radius: 20px;
    padding: 20px;
  }

  .overlay-card header {
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 20px;
  }

  .overlay-card header > div {
    min-width: 0;
  }

  .overlay-card header h2 {
    font-size: 26px;
    line-height: 1.2;
  }

  .overlay-card header p {
    font-size: 14px;
    line-height: 1.5;
  }

  .shortcut-grid {
    grid-template-columns: 1fr;
    margin-top: 20px;
  }

  .shortcut-grid > div {
    flex-wrap: wrap;
    min-height: 60px;
    padding: 12px;
  }

  .shortcut-grid span {
    font-size: 14px;
    line-height: 1.4;
  }

  .reference-list {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 20px;
  }

  .reference-list article {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 10px;
  }

  .reference-list article:nth-child(2) {
    border-top: 1px solid var(--line-soft);
  }

  .reference-list article > span {
    width: 32px;
    height: 32px;
  }

  .reference-list h3 {
    font-size: 18px;
    line-height: 1.3;
  }

  .reference-list p,
  .reference-list a {
    font-size: 14px;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }

  .reference-list a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: 8px;
    padding: 8px 0;
  }

  .reference-disclaimer {
    grid-template-columns: 1fr;
    gap: 12px;
    border-radius: 14px;
    padding: 16px;
  }

  .reference-disclaimer strong {
    font-size: 12px;
  }

  .reference-disclaimer p {
    font-size: 14px;
    line-height: 1.5;
  }

  /* Preserve the same role-based hierarchy in mobile reading mode. */
  .ai-readiness-copy h2 {
    font-size: clamp(30px, 6vw, 46px);
    line-height: 1.1;
  }

  .platform-system h3,
  .profile-body h3,
  .kit-scope-group h3,
  .kit-items h3,
  .bridge-node h3,
  .returns-grid h3,
  .kpi-grid h3,
  .roadmap-track h3,
  .funding-block h3 {
    font-size: clamp(22px, 3.5vw, 28px);
    line-height: 1.18;
  }
}