/* Real article experience: long-form reading + one-click presentation. */
.story-page {
  --story-navy: #071b33;
  --story-blue: #1467c8;
  --story-cyan: #38bdf8;
  --story-gold: #c49a58;
  --story-cream: #f7f1e7;
  --story-panel: rgba(255, 255, 255, .88);
  --story-panel-strong: #fff;
  --story-line: rgba(24, 66, 110, .14);
  background:
    radial-gradient(circle at 8% 12%, rgba(20, 103, 200, .08), transparent 25%),
    radial-gradient(circle at 94% 7%, rgba(196, 154, 88, .10), transparent 23%);
}

.story-page [data-copy-protected],
.presentation-shell {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.story-hero {
  padding: 24px 0 0;
}

.story-hero-card {
  position: relative;
  min-height: 530px;
  display: grid;
  grid-template-columns: minmax(540px, 1.04fr) minmax(500px, .96fr);
  overflow: hidden;
  border: 1px solid var(--story-line);
  border-radius: 28px;
  background: var(--story-panel-strong);
  box-shadow: 0 24px 70px rgba(30, 49, 70, .13);
}

.story-hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px 50px;
}

.story-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--story-blue);
  font: 800 12px/1.2 "Manrope", "Noto Sans Thai", sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.story-kicker::before {
  content: "";
  width: 28px;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--story-blue), var(--story-cyan));
}

.story-hero h1 {
  max-width: 660px;
  margin: 0;
  color: var(--strong);
  font-size: clamp(36px, 3.3vw, 48px);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.story-hero h1[data-fit-text] {
  width: auto !important;
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
}

.story-hero h1 em {
  color: var(--story-blue);
  font-style: normal;
}

html[lang="en"] .story-hero h1 {
  font-size: clamp(33px, 2.8vw, 40px);
}

.story-hero-lead {
  max-width: 610px;
  margin: 20px 0 0;
  color: #5e6a76;
  font-size: 17px;
  line-height: 1.75;
}

.story-hero-actions {
  width: min(100%, 408px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 28px;
}

.story-action {
  min-width: 0;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 20px;
  border: 1px solid var(--story-line);
  border-radius: 999px;
  color: var(--story-navy);
  background: rgba(255, 255, 255, .86);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.story-action.primary {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #0d5fb6, #149ad2);
  box-shadow: 0 12px 28px rgba(20, 103, 200, .25);
}

.story-action svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.story-hero-media {
  position: relative;
  min-width: 0;
  min-height: 530px;
  overflow: hidden;
}

.story-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--story-panel-strong) 0, transparent 22%), linear-gradient(0deg, rgba(7, 27, 51, .20), transparent 45%);
}

.story-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-updated {
  position: absolute;
  z-index: 2;
  right: 22px;
  bottom: 22px;
  padding: 9px 13px;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 999px;
  color: #fff;
  background: rgba(7, 27, 51, .76);
  backdrop-filter: blur(12px);
  font-size: 11px;
  font-weight: 700;
}

.story-hero-media .story-updated { display: none; }

.story-summary {
  position: relative;
  z-index: 3;
  width: min(calc(100% - 100px), 1260px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: -78px auto 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.story-stat {
  min-width: 0;
  padding: 16px 23px;
}

.story-stat + .story-stat {
  border-left: 1px solid var(--story-line);
}

.story-stat strong {
  display: block;
  color: var(--story-navy);
  font: 800 17px/1.1 "Manrope", "Noto Sans Thai", sans-serif;
}

.story-stat span {
  display: block;
  margin-top: 5px;
  color: #6c7782;
  font-size: 11px;
  line-height: 1.5;
}

.story-layout {
  width: min(calc(100% - 30px), 1360px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  align-items: start;
  gap: 28px;
  margin: 42px auto 74px;
}

.story-article {
  min-width: 0;
}

.story-aside {
  position: sticky;
  top: 92px;
  display: grid;
  gap: 12px;
}

.story-aside-card {
  padding: 16px 18px;
  border: 1px solid var(--story-line);
  border-radius: 16px;
  background: var(--story-panel);
  box-shadow: 0 12px 30px rgba(30, 49, 70, .06);
}

.story-aside-label {
  display: block;
  margin-bottom: 7px;
  color: var(--story-blue);
  font: 800 8px/1.2 "Manrope", sans-serif;
  letter-spacing: .14em;
}

.story-aside-card h2 {
  margin: 0 0 10px;
  color: var(--story-navy);
  font-size: 14px;
}

.story-aside-card > p:not(.story-protection-note) {
  margin: 0;
  color: #697581;
  font-size: 11px;
  line-height: 1.65;
}

.story-aside-card .story-action {
  width: 100%;
  min-height: 44px;
  margin-top: 14px;
  padding-inline: 14px;
}

.story-aside-card .story-action,
.story-aside-card .story-action.primary {
  color: var(--story-navy);
  border: 1px solid var(--story-line);
  background: transparent;
  box-shadow: none;
}

.story-aside-card .story-action + .story-action {
  margin-top: 8px;
}

.story-aside-card .story-action + .story-protection-note {
  margin: 12px 0 0;
}

.story-aside-card .story-protection-note + .story-action {
  margin-top: 14px;
}

.story-aside-quick {
  min-height: 116px;
}

.story-aside-card nav {
  display: grid;
  gap: 5px;
}

.story-aside-card a {
  padding: 7px 9px;
  border-radius: 8px;
  color: #697581;
  font-size: 11px;
  line-height: 1.45;
}

.story-aside-card a:hover {
  color: var(--story-blue);
  background: rgba(20, 103, 200, .07);
}

.story-intro {
  padding: 34px 38px;
  border: 1px solid var(--story-line);
  border-radius: 20px;
  background: var(--story-panel);
  box-shadow: 0 14px 38px rgba(30, 49, 70, .06);
}

.story-intro p {
  margin: 0;
  color: #52606d;
  font-size: 17px;
  line-height: 1.95;
}

.story-perspective-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 18px;
}

.perspective-link {
  position: relative;
  min-height: 118px;
  display: grid;
  align-content: center;
  padding: 20px 22px 20px 76px;
  overflow: hidden;
  border: 1px solid var(--story-line);
  border-radius: 16px;
  background: rgba(255, 255, 255, .74);
}

.perspective-link::before {
  position: absolute;
  left: 20px;
  top: 50%;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: var(--story-blue);
  transform: translateY(-50%);
  font: 800 13px/1 "Manrope", sans-serif;
}

.perspective-link.company::before { content: "HR"; }
.perspective-link.employee::before { content: "EMP"; background: var(--story-gold); }
.perspective-link strong { color: var(--story-navy); font-size: 16px; }
.perspective-link span { margin-top: 4px; color: #6c7782; font-size: 11px; }

.story-section {
  margin-top: 24px;
  padding: 36px 38px;
  border: 1px solid var(--story-line);
  border-radius: 20px;
  background: var(--story-panel);
  box-shadow: 0 14px 38px rgba(30, 49, 70, .06);
  scroll-margin-top: 100px;
}

.story-section-heading {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 14px;
  margin-bottom: 22px;
}

.story-section-index {
  min-width: 46px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: var(--story-blue);
  font: 800 10px/1 "Manrope", sans-serif;
  letter-spacing: .08em;
}

.story-section.employee .story-section-index { color: #071b33; background: var(--story-gold); }

.story-section h2 {
  margin: 0;
  color: var(--story-navy);
  font-size: clamp(24px, 2.5vw, 34px);
  font-weight: 700;
  line-height: 1.25;
}

.story-section h3 {
  margin: 26px 0 8px;
  color: var(--story-navy);
  font-size: 18px;
}

.story-related-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 13px;
}

.story-related-grid a {
  min-height: 62px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--story-line);
  border-radius: 12px;
  color: var(--story-navy);
  background: rgba(255, 255, 255, .68);
}

/* Most generated related links are text-only. Do not reserve the icon column
   unless the link actually contains the optional badge. */
.story-related-grid a:not(:has(> span)) {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.story-related-grid a > span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #fff;
  background: var(--story-blue);
  font: 800 9px/1 "Manrope", sans-serif;
}

.story-related-grid strong {
  width: 100%;
  min-width: 0;
  color: inherit;
  font-size: 12px;
  line-height: 1.45;
}

.story-section p,
.story-section li {
  color: #53616e;
  font-size: 15px;
  line-height: 1.9;
}

.story-section ul,
.story-section ol {
  margin: 10px 0;
  padding-left: 23px;
}

.story-figure {
  margin: 26px 0;
  overflow: hidden;
  border: 1px solid var(--story-line);
  border-radius: 17px;
  background: #071b33;
}

.story-figure img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 8.2;
  object-fit: cover;
}

.story-figure figcaption {
  padding: 11px 15px;
  color: rgba(255, 255, 255, .76);
  background: var(--story-navy);
  font-size: 10px;
}

.story-fact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 11px;
  margin: 20px 0;
}

.story-fact {
  padding: 18px;
  border: 1px solid var(--story-line);
  border-radius: 14px;
  background: rgba(243, 247, 251, .78);
}

.story-fact strong {
  display: block;
  color: var(--story-blue);
  font-size: 18px;
}

.story-fact span {
  display: block;
  margin-top: 5px;
  color: #63707d;
  font-size: 12px;
  line-height: 1.65;
}

.story-rate {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  margin: 22px 0;
  padding: 24px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, #071b33, #0a3861);
}

.story-rate-side { text-align: center; }
.story-rate-side strong { display: block; color: #fff; font: 800 36px/1 "Manrope", sans-serif; }
.story-rate-side span { display: block; margin-top: 7px; color: rgba(255, 255, 255, .73); font-size: 11px; }
.story-rate-plus { color: var(--story-gold); font: 300 30px/1 "Manrope", sans-serif; }

.story-table-wrap {
  overflow-x: auto;
  margin: 20px 0;
  border: 1px solid var(--story-line);
  border-radius: 14px;
}

.story-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 610px;
}

.story-table th,
.story-table td {
  padding: 13px 15px;
  border-bottom: 1px solid var(--story-line);
  color: #53616e;
  text-align: left;
  font-size: 12px;
}

.story-table th { color: var(--story-navy); background: rgba(20, 103, 200, .07); font-weight: 800; }
.story-table tr:last-child td { border-bottom: 0; }

.story-checklist {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 18px 0 0;
  padding: 0 !important;
  list-style: none;
  counter-reset: checklist;
}

.story-checklist li {
  position: relative;
  min-height: 74px;
  padding: 14px 14px 14px 52px;
  border: 1px solid var(--story-line);
  border-radius: 13px;
  background: rgba(255, 255, 255, .66);
  counter-increment: checklist;
}

.story-checklist li::before {
  content: counter(checklist, decimal-leading-zero);
  position: absolute;
  left: 14px;
  top: 15px;
  color: var(--story-blue);
  font: 800 11px/1 "Manrope", sans-serif;
}

.story-compare {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 18px;
}

.story-compare article {
  padding: 18px;
  border: 1px solid var(--story-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, .68);
}

.story-compare strong { display: block; color: var(--story-navy); font-size: 14px; }
.story-compare p { margin: 7px 0 0; font-size: 11px; line-height: 1.7; }

.story-do-dont {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 18px;
}

.story-do-dont article {
  padding: 18px;
  border: 1px solid var(--story-line);
  border-radius: 14px;
}

.story-do-dont .dont { background: rgba(188, 72, 72, .055); }
.story-do-dont .do { background: rgba(37, 132, 95, .07); }
.story-do-dont strong { display: block; margin-bottom: 8px; color: var(--story-navy); font-size: 12px; }
.story-do-dont p { margin: 0; font-size: 12px; line-height: 1.75; }

.story-callout {
  margin: 22px 0;
  padding: 18px 20px;
  border-left: 4px solid var(--story-blue);
  border-radius: 0 13px 13px 0;
  color: #334b64;
  background: rgba(20, 103, 200, .08);
  font-size: 14px;
  line-height: 1.8;
}

.story-sources {
  margin: 14px 0 0;
  padding-left: 22px;
}

.story-sources li + li { margin-top: 8px; }
.story-sources span { color: #334b64; font-weight: 600; }

.story-protection-note {
  color: #7b8690;
  font-size: 10px;
  line-height: 1.6;
}

/* Full-screen slide mode */
.presentation-shell {
  position: fixed;
  z-index: 1000;
  inset: 0;
  color: #eaf4ff;
  background: #030c17;
}

.presentation-shell.is-open { display: grid; grid-template-rows: 1fr auto; }
.presentation-stage {
  position: relative;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-color: rgba(98, 200, 244, .55) rgba(255, 255, 255, .06);
}

.presentation-zoom-rail {
  position: relative;
  min-width: 100%;
  min-height: 100%;
}

.presentation-zoom-viewport {
  position: absolute;
  overflow: hidden;
}

.presentation-zoom-content {
  position: relative;
  transform-origin: 0 0;
  will-change: transform;
}

.presentation-slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .82fr);
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(42px, 5.5vw, 84px);
  opacity: 0;
  pointer-events: none;
  transform: translateX(3%);
  transition: opacity .32s ease, transform .42s cubic-bezier(.22, .7, .2, 1);
}

.presentation-slide:not(.has-background):not(:has(.presentation-visual)):not(.presentation-brand-slide):not(.presentation-credit-slide) {
  grid-template-columns: minmax(0, 1fr);
}

.presentation-slide.is-active { opacity: 1; pointer-events: auto; transform: none; }
.presentation-slide::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(circle at 75% 15%, rgba(20, 154, 210, .20), transparent 32%), linear-gradient(135deg, #04111f, #071b33 55%, #092d4b); }
.presentation-slide::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(3, 12, 23, .98) 0, rgba(3, 12, 23, .86) 46%, rgba(3, 12, 23, .18) 100%); }
.presentation-slide.has-background { grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr); }
.presentation-slide.has-background::before { background-image: var(--slide-image); background-size: cover; background-position: center; }
.presentation-slide.has-background::after { background: linear-gradient(90deg, rgba(3, 12, 23, .98) 0, rgba(3, 12, 23, .84) 48%, rgba(3, 12, 23, .18) 100%); }
.presentation-slide.has-context-background::before { background-image: var(--slide-image); background-size: cover; background-position: center; }
.presentation-slide.has-context-background::after { background: linear-gradient(90deg, rgba(3,12,23,.98) 0, rgba(3,12,23,.93) 58%, rgba(3,12,23,.72) 100%); }

.presentation-copy { min-width: 0; max-width: 1180px; max-height: 100%; }
.presentation-eyebrow { color: #62c8f4; font: 800 12px/1.2 "Manrope", sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.presentation-slide h2 { max-width: 920px; margin: 14px 0 0; color: #fff; font-size: clamp(34px, 4.4vw, 64px); line-height: 1.09; letter-spacing: -.035em; }
.presentation-slide h2[data-fit-text] { width: auto !important; overflow: visible; white-space: normal; text-overflow: clip; }
.presentation-slide h2 em { color: #62c8f4; font-style: normal; }
.presentation-slide .slide-lead { max-width: 860px; margin: 18px 0 0; color: rgba(234, 244, 255, .76); font-size: clamp(15px, 1.35vw, 21px); line-height: 1.55; }
.presentation-visual { min-width: 0; }
.presentation-visual img { width: 100%; max-height: 66vh; object-fit: cover; border: 1px solid rgba(255, 255, 255, .16); border-radius: 24px; box-shadow: 0 32px 70px rgba(0, 0, 0, .28); }

.slide-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.slide-stat { padding: 14px 16px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 15px; background: rgba(255, 255, 255, .06); }
.slide-stat strong { display: block; color: #fff; font: 800 clamp(22px, 2.45vw, 36px)/1 "Manrope", "Noto Sans Thai", sans-serif; }
.slide-stat span { display: block; margin-top: 6px; color: rgba(234, 244, 255, .68); font-size: clamp(11px, .9vw, 14px); line-height: 1.42; }
.slide-workflow h2 { font-size: clamp(30px,3.5vw,48px); }
.slide-workflow .slide-stat-grid { gap: 7px; margin-top: 13px; }
.slide-workflow .slide-stat { padding: 9px 11px; border-radius: 11px; }
.slide-workflow .slide-stat strong { font-size: clamp(14px,1.25vw,18px); line-height: 1; }
.slide-workflow .slide-stat span { margin-top: 4px; font-size: clamp(9px,.72vw,11px); line-height: 1.3; }
.slide-list { display: grid; gap: 9px; margin: 20px 0 0; padding: 0; list-style: none; }
.slide-list li { position: relative; padding-left: 27px; color: rgba(234, 244, 255, .79); font-size: clamp(14px, 1.12vw, 18px); line-height: 1.45; }
.slide-list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg, #2d8ee9, #62c8f4); box-shadow: 0 0 0 5px rgba(98, 200, 244, .10); }
.slide-quote { margin-top: 18px; padding: 15px 19px; border-left: 4px solid var(--story-gold); color: #fff; background: rgba(255, 255, 255, .07); font-size: clamp(16px, 1.42vw, 22px); line-height: 1.46; }

.presentation-slide.slide-detail h2 { font-size: clamp(31px, 3.8vw, 54px); }
.presentation-slide.slide-conclusion h2 { font-size: clamp(31px, 3.65vw, 50px); }
.presentation-slide.slide-conclusion .slide-lead { font-size: clamp(16px, 1.35vw, 21px); }
.slide-concept-grid,
.slide-compare-grid {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}
.slide-concept-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.slide-compare-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.slide-concept-grid article,
.slide-compare-grid article {
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 16px;
  background: rgba(255, 255, 255, .06);
}
.slide-concept-grid article > span,
.slide-compare-grid article > span {
  display: block;
  color: #62c8f4;
  font: 800 9px/1.2 "Manrope", sans-serif;
  letter-spacing: .12em;
}
.slide-concept-grid strong,
.slide-compare-grid strong {
  display: block;
  margin-top: 10px;
  color: #fff;
  font-size: clamp(16px, 1.35vw, 22px);
  line-height: 1.3;
}
.slide-concept-grid b,
.slide-compare-grid b {
  display: block;
  margin-top: 9px;
  color: #62c8f4;
  font: 800 clamp(24px, 2.7vw, 42px)/1.08 "Manrope", "Noto Sans Thai", sans-serif;
}
.slide-concept-grid p,
.slide-compare-grid p {
  margin: 10px 0 0;
  color: rgba(234, 244, 255, .68);
  font-size: clamp(12px, 1vw, 16px);
  line-height: 1.5;
}
.slide-timeline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 14px;
  margin-top: 28px;
}
.slide-timeline article {
  display: grid;
  align-content: center;
  min-height: 150px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 18px;
  background: rgba(255, 255, 255, .06);
}
.slide-timeline article.is-accent { background: linear-gradient(135deg, rgba(20, 103, 200, .32), rgba(56, 189, 248, .12)); }
.slide-timeline article.is-gold { background: linear-gradient(135deg, rgba(196, 154, 88, .30), rgba(196, 154, 88, .10)); }
.slide-timeline span { color: #62c8f4; font: 800 12px/1.2 "Manrope", "Noto Sans Thai", sans-serif; }
.slide-timeline strong { margin-top: 11px; color: #fff; font-size: clamp(20px, 2vw, 30px); line-height: 1.2; }
.slide-timeline b { margin-top: 9px; color: #fff; font: 800 clamp(26px, 3vw, 46px)/1 "Manrope", "Noto Sans Thai", sans-serif; }
.slide-timeline > i { align-self: center; color: #62c8f4; font: 800 28px/1 "Manrope", sans-serif; }
.slide-footnote { margin: 14px 0 0; color: rgba(234, 244, 255, .66); font-size: 13px; line-height: 1.55; }
.slide-equation {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
  align-items: center;
  gap: 18px;
  margin-top: 24px;
  padding: 18px 22px;
  border: 1px solid rgba(98, 200, 244, .20);
  border-radius: 16px;
  background: rgba(20, 103, 200, .16);
}
.slide-equation strong { color: #fff; font-size: clamp(17px, 1.65vw, 26px); line-height: 1.35; }
.slide-equation span { color: #62c8f4; font: 800 clamp(15px, 1.4vw, 22px)/1.35 "Manrope", "Noto Sans Thai", sans-serif; text-align: right; }

.presentation-toolbar {
  min-height: 64px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  padding: 10px 24px;
  border-top: 1px solid rgba(255, 255, 255, .10);
  background: rgba(2, 8, 16, .94);
}

.presentation-brand { width: 130px; opacity: .92; }
.presentation-progress { min-width: 240px; display: flex; align-items: center; gap: 12px; color: rgba(255, 255, 255, .62); font: 700 11px/1 "Manrope", sans-serif; }
.presentation-progress-track { flex: 1; height: 3px; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, .12); }
.presentation-progress-track i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #2387df, #62c8f4); transition: width .3s ease; }
.presentation-controls { justify-self: end; display: flex; gap: 7px; }
.presentation-controls button { width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255, 255, 255, .14); border-radius: 50%; color: #fff; background: rgba(255, 255, 255, .07); cursor: pointer; }
.presentation-controls button:hover { background: rgba(98, 200, 244, .15); }
.presentation-controls button:disabled { opacity: .38; cursor: not-allowed; }
.presentation-controls svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.presentation-zoom-control {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.045);
}

.presentation-controls .presentation-zoom-control button {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font: 800 15px/1 "Manrope",sans-serif;
}

.presentation-controls .presentation-zoom-control [data-presentation-zoom-reset] {
  width: 48px;
  border-radius: 999px;
  font-size: 9px;
  letter-spacing: -.02em;
}

/* Branded opening and credit closing slides */
.presentation-slide.presentation-brand-slide {
  grid-template-columns: minmax(0,1fr);
  justify-items: start;
  padding-inline: clamp(60px,9vw,150px);
}
.presentation-brand-slide::before {
  background: radial-gradient(circle at 82% 28%, rgba(98,200,244,.20), transparent 29%), linear-gradient(135deg,#03101d,#061b31 58%,#0a3554);
}
.presentation-brand-slide::after {
  background: linear-gradient(90deg,rgba(3,12,23,.28),rgba(3,12,23,.02));
}
.presentation-brand-cover {
  width: min(900px,72vw);
  display: grid;
  justify-items: start;
  align-content: center;
}
.presentation-brand-cover > img {
  width: min(520px,56vw);
  max-height: 170px;
  margin-bottom: 34px;
  object-fit: contain;
  object-position: left center;
}
.presentation-brand-cover .presentation-eyebrow { margin-top: 0; }
.presentation-brand-cover h2 { max-width: 780px; font-size: clamp(34px,4.4vw,64px); }
.presentation-brand-cover .slide-lead { margin-top: 15px; font-size: clamp(14px,1.25vw,19px); }

.presentation-slide.presentation-credit-slide {
  grid-template-columns: minmax(0,1fr);
  padding-inline: clamp(60px,9vw,150px);
}
.presentation-credit-slide::before {
  background: radial-gradient(circle at 78% 38%,rgba(98,200,244,.18),transparent 28%),linear-gradient(135deg,#03101d,#061b31 58%,#0a3554);
}
.presentation-credit-slide::after { background: linear-gradient(90deg,rgba(3,12,23,.32),rgba(3,12,23,.03)); }
.presentation-credit {
  width: min(1100px,82vw);
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  grid-template-rows: auto auto auto 1fr;
  align-items: end;
  column-gap: clamp(40px,7vw,110px);
}
.presentation-credit-logo { grid-column: 1; width: min(470px,44vw); max-height: 145px; margin-bottom: 30px; object-fit: contain; object-position: left center; }
.presentation-credit .presentation-eyebrow { grid-column: 1; }
.presentation-credit h2 { grid-column: 1; margin-top: 12px; font-size: clamp(24px,3vw,42px); font-weight: 600; }
.presentation-credit > p { grid-column: 1; margin: 10px 0 0; color: #62c8f4; font: 800 17px/1.2 "Manrope",sans-serif; letter-spacing: .13em; }
.presentation-credit-site { grid-column: 2; grid-row: 1 / -1; display: grid; align-self: center; justify-items: center; gap: 14px; }
.presentation-credit-site > img { width: clamp(150px,17vw,230px); aspect-ratio: 1; padding: 9px; border-radius: 18px; background: #fff; box-shadow: 0 24px 55px rgba(0,0,0,.24); }
.presentation-credit-site div { display: grid; justify-items: center; gap: 4px; }
.presentation-credit-site strong { color: #fff; font: 800 clamp(15px,1.35vw,20px)/1.2 "Manrope",sans-serif; }
.presentation-credit-site span { color: rgba(234,244,255,.67); font-size: 12px; }

/* Presenter whiteboard: invisible until the pen button is enabled. */
.presentation-board {
  position: absolute;
  z-index: 8;
  inset: clamp(20px,3vw,48px);
  width: auto;
  overflow: hidden;
  border: 1px dashed rgba(98,200,244,.34);
  border-radius: 22px;
  background: rgba(3,12,23,.28);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, background .18s ease;
}
.presentation-board > span { position: absolute; z-index: 2; top: 12px; right: 14px; color: rgba(234,244,255,.48); font: 800 9px/1 "Manrope","Noto Sans Thai",sans-serif; letter-spacing: .12em; text-transform: uppercase; pointer-events: none; }
.presentation-board canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }
.presentation-shell.drawing-enabled .presentation-slide.is-active .presentation-board { opacity: 1; pointer-events: auto; background: transparent; }
.presentation-shell.drawing-enabled .presentation-slide.is-active .presentation-copy,
.presentation-shell.drawing-enabled .presentation-slide.is-active .presentation-visual { opacity: 1; }

.presentation-drawing-control { position: relative; display: flex; }
.presentation-drawing-control > button[aria-pressed="true"] { color: #071b33; background: #62c8f4; }
.presentation-drawing-tools {
  position: absolute;
  right: 0;
  bottom: calc(100% + 14px);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: max-content;
  padding: 9px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 13px;
  background: rgba(2,8,16,.96);
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
}
.presentation-drawing-tools[hidden] { display: none; }
.presentation-controls .presentation-drawing-tools button { width: auto; min-width: 38px; height: 32px; padding: 0 9px; border-radius: 9px; font: 800 8px/1 "Manrope",sans-serif; }
.presentation-controls .presentation-drawing-tools .drawing-color { min-width: 27px; width: 27px; height: 27px; padding: 0; border-radius: 50%; background: var(--ink); box-shadow: inset 0 0 0 4px rgba(2,8,16,.88); }
.presentation-controls .presentation-drawing-tools .drawing-color[data-drawing-color="#168bd2"] { --ink: #168bd2; }
.presentation-controls .presentation-drawing-tools .drawing-color[data-drawing-color="#d19a3e"] { --ink: #d19a3e; }
.presentation-controls .presentation-drawing-tools .drawing-color[data-drawing-color="#f4f7fb"] { --ink: #f4f7fb; }
.presentation-controls .presentation-drawing-tools button.is-active { border-color: #62c8f4; box-shadow: 0 0 0 2px rgba(98,200,244,.25); }

body.presentation-open { overflow: hidden; }

html[data-theme="light"] .presentation-shell { color: #27394a; background: #f4efe7; }
html[data-theme="light"] .presentation-slide::before { background: radial-gradient(circle at 75% 15%, rgba(20, 103, 200, .12), transparent 34%), linear-gradient(135deg, #fffdf9, #edf4fa 58%, #e4eef5); }
html[data-theme="light"] .presentation-slide::after { background: linear-gradient(90deg, rgba(255, 253, 249, .98) 0, rgba(255, 253, 249, .88) 47%, rgba(255, 253, 249, .18) 100%); }
html[data-theme="light"] .presentation-slide.has-background::before { background-image: var(--slide-image); background-size: cover; background-position: center; }
html[data-theme="light"] .presentation-slide.has-background::after { background: linear-gradient(90deg, rgba(255, 253, 249, .99) 0, rgba(255, 253, 249, .90) 48%, rgba(255, 253, 249, .20) 100%); }
html[data-theme="light"] .presentation-eyebrow { color: #1467c8; }
html[data-theme="light"] .presentation-slide h2 { color: #071b33; }
html[data-theme="light"] .presentation-slide .slide-lead { color: #52606d; }
html[data-theme="light"] .slide-stat { border-color: rgba(24, 66, 110, .14); background: rgba(255, 255, 255, .66); }
html[data-theme="light"] .slide-stat strong { color: #071b33; }
html[data-theme="light"] .slide-stat span { color: #5d6b78; }
html[data-theme="light"] .slide-list li { color: #52606d; }
html[data-theme="light"] .slide-quote { color: #172b3e; background: rgba(255, 255, 255, .66); }
html[data-theme="light"] :where(.slide-concept-grid article,.slide-compare-grid article,.slide-timeline article) { border-color: rgba(24, 66, 110, .14); background: rgba(255, 255, 255, .66); }
html[data-theme="light"] .slide-timeline article.is-accent { background: linear-gradient(135deg, rgba(20, 103, 200, .15), rgba(56, 189, 248, .07)); }
html[data-theme="light"] .slide-timeline article.is-gold { background: linear-gradient(135deg, rgba(196, 154, 88, .18), rgba(196, 154, 88, .06)); }
html[data-theme="light"] :where(.slide-concept-grid strong,.slide-compare-grid strong,.slide-timeline strong,.slide-timeline b,.slide-equation strong) { color: #071b33; }
html[data-theme="light"] :where(.slide-concept-grid article > span,.slide-compare-grid article > span,.slide-concept-grid b,.slide-compare-grid b,.slide-timeline span,.slide-equation span) { color: #1467c8; }
html[data-theme="light"] :where(.slide-concept-grid p,.slide-compare-grid p,.slide-footnote) { color: #5d6b78; }
html[data-theme="light"] .slide-equation { border-color: rgba(20, 103, 200, .18); background: rgba(20, 103, 200, .07); }
html[data-theme="light"] .presentation-toolbar { border-color: rgba(24, 66, 110, .12); background: rgba(255, 253, 249, .96); }
html[data-theme="light"] .presentation-progress { color: #6c7884; }
html[data-theme="light"] .presentation-progress-track { background: rgba(24, 66, 110, .12); }
html[data-theme="light"] .presentation-controls button { color: #071b33; border-color: rgba(24, 66, 110, .16); background: rgba(20, 103, 200, .06); }
html[data-theme="light"] .presentation-zoom-control { border-color: rgba(24,66,110,.16); background: rgba(20,103,200,.045); }
html[data-theme="light"] .presentation-controls .presentation-zoom-control button { background: transparent; }
html[data-theme="light"] .presentation-brand-slide::before,
html[data-theme="light"] .presentation-credit-slide::before { background: radial-gradient(circle at 80% 30%,rgba(20,103,200,.14),transparent 30%),linear-gradient(135deg,#fffdf9,#edf4fa 58%,#dceaf4); }
html[data-theme="light"] .presentation-brand-slide::after,
html[data-theme="light"] .presentation-credit-slide::after { background: linear-gradient(90deg,rgba(255,253,249,.24),rgba(255,253,249,.02)); }
html[data-theme="light"] .presentation-credit > p { color: #1467c8; }
html[data-theme="light"] .presentation-credit-site strong { color: #071b33; }
html[data-theme="light"] .presentation-credit-site span { color: #5d6b78; }
html[data-theme="light"] .presentation-board { border-color: rgba(20,103,200,.30); background: rgba(255,255,255,.34); }
html[data-theme="light"] .presentation-board > span { color: rgba(7,27,51,.46); }
html[data-theme="light"] .presentation-shell.drawing-enabled .presentation-slide.is-active .presentation-board { background: transparent; }
html[data-theme="light"] .presentation-drawing-tools { border-color: rgba(24,66,110,.16); background: rgba(255,253,249,.98); }

html[data-theme="dark"] .story-page {
  --story-panel: rgba(6, 21, 37, .88);
  --story-panel-strong: #061525;
  --story-line: rgba(91, 155, 205, .20);
  background: radial-gradient(circle at 8% 12%, rgba(20, 154, 210, .10), transparent 28%), #02060c;
}

html[data-theme="dark"] :where(.story-hero h1,.story-section h2,.story-section h3,.story-stat strong,.story-aside-card h2,.perspective-link strong,.story-compare strong,.story-do-dont strong,.story-table th) { color: #f2f7fc; }
html[data-theme="dark"] :where(.story-hero-lead,.story-intro p,.story-section p,.story-section li,.story-stat span,.perspective-link span,.story-fact span,.story-compare p,.story-do-dont p,.story-table td,.story-protection-note) { color: #a8b8c8; }
html[data-theme="dark"] :where(.perspective-link,.story-fact,.story-checklist li,.story-compare article,.story-do-dont article) { border-color: var(--story-line); background: rgba(9, 30, 50, .74); }
html[data-theme="dark"] .story-hero-media::after { background: linear-gradient(90deg, var(--story-panel-strong), rgba(6, 21, 37, .18) 28%, transparent 58%), linear-gradient(0deg, rgba(2, 6, 12, .48), transparent 52%); }
html[data-theme="dark"] .story-hero-media img { filter: brightness(.78) saturate(.88) contrast(1.06); }
html[data-theme="dark"] .story-figure img { filter: brightness(.82) saturate(.88) contrast(1.05); }
html[data-theme="dark"] :where(.story-kicker,.story-aside-label) { color: #62c8f4; }
html[data-theme="dark"] .story-aside-card :where(.story-action,.story-action.primary) { color: #eaf4ff; border-color: var(--story-line); background: transparent; box-shadow: none; }
html[data-theme="dark"] .story-aside-card > p:not(.story-protection-note) { color: #a8b8c8; }
html[data-theme="dark"] .story-action:not(.primary) { color: #eaf4ff; border-color: var(--story-line); background: rgba(9, 30, 50, .82); }
html[data-theme="dark"] .story-table th { background: rgba(56, 189, 248, .08); }
html[data-theme="dark"] .story-callout { color: #c5ddf1; background: rgba(20, 103, 200, .14); }
html[data-theme="dark"] .story-sources span { color: #c5d8e8; }
html[data-theme="dark"] .story-related-grid a { color: #eef6fc; border-color: var(--story-line); background: rgba(9, 30, 50, .74); }

/* On short landscape screens the negative summary overlap can cover the
   presentation CTA after it scrolls into view. Keep the summary in flow. */
@media (orientation: landscape) and (max-height: 650px) and (max-width: 1100px) {
  .story-page .story-summary {
    margin-top: 0;
  }
}

@media (max-width: 1120px) {
  .story-hero-card { grid-template-columns: 1fr 1fr; min-height: 480px; }
  .story-hero-copy { padding: 42px 36px; }
  .story-hero-media { min-height: 480px; }
  .story-layout { grid-template-columns: 1fr; }
  .story-aside { position: static; grid-template-columns: 1fr 1fr; }
  .presentation-slide { padding: 60px; }
}

@media (max-width: 760px) {
  .story-hero { padding-top: 12px; }
  .story-hero-card { min-height: 0; grid-template-columns: 1fr; border-radius: 20px; }
  .story-hero-copy { min-height: 410px; padding: 34px 24px 30px; }
  .story-hero h1 { font-size: clamp(31px, 9vw, 36px); }
  .story-hero-lead { font-size: 14px; }
  .story-hero-actions { width: 100%; grid-template-columns: 1fr; }
  .story-action { width: 100%; }
  .story-hero-media { min-height: 280px; }
  .story-hero-media::after { background: linear-gradient(0deg, rgba(7, 27, 51, .32), transparent 55%); }
  .story-summary { width: calc(100% - 34px); grid-template-columns: 1fr 1fr; margin-top: -56px; }
  .story-stat { min-height: 92px; padding: 16px; }
  .story-stat:nth-child(3) { border-left: 0; border-top: 1px solid var(--story-line); }
  .story-stat:nth-child(4) { border-top: 1px solid var(--story-line); }
  .story-stat strong { font-size: 20px; }
  .story-layout { width: calc(100% - 24px); margin-top: 26px; gap: 18px; }
  .story-aside { grid-template-columns: 1fr; }
  .story-intro,.story-section { padding: 24px 20px; border-radius: 17px; }
  .story-intro p { font-size: 15px; }
  .story-perspective-nav,.story-fact-grid,.story-checklist,.story-compare,.story-do-dont,.story-related-grid { grid-template-columns: 1fr; }
  .story-section-heading { grid-template-columns: 1fr; }
  .story-section-index { min-width: 42px; width: 42px; }
  .story-rate { grid-template-columns: 1fr; }
  .story-rate-plus { transform: rotate(90deg); justify-self: center; }
  .story-figure img { aspect-ratio: 4 / 3; }
  .presentation-slide,.presentation-slide.has-background { grid-template-columns: 1fr; align-content: center; padding: 36px 24px; }
  .presentation-slide h2 { font-size: clamp(34px, 10vw, 52px); }
  .presentation-slide .slide-lead { font-size: 16px; }
  .presentation-visual { display: none; }
  .slide-stat-grid { gap: 8px; }
  .slide-stat { padding: 14px; }
  .presentation-slide.slide-detail h2 { font-size: clamp(29px, 8.2vw, 44px); }
  .slide-concept-grid { grid-template-columns: 1fr; gap: 8px; margin-top: 16px; }
  .slide-concept-grid article { padding: 12px 14px; }
  .slide-concept-grid strong { display: inline-block; margin-top: 7px; }
  .slide-concept-grid b { display: inline-block; margin: 7px 0 0 10px; font-size: 24px; }
  .slide-concept-grid p { margin-top: 5px; font-size: 11px; }
  .slide-compare-grid { gap: 8px; margin-top: 16px; }
  .slide-compare-grid article { padding: 13px; }
  .slide-compare-grid strong { font-size: 14px; }
  .slide-compare-grid b { font-size: 20px; }
  .slide-compare-grid p { font-size: 10px; }
  .slide-timeline { gap: 8px; margin-top: 18px; }
  .slide-timeline article { min-height: 120px; padding: 14px; }
  .slide-timeline span { font-size: 9px; }
  .slide-timeline strong { font-size: 16px; }
  .slide-timeline b { font-size: 22px; }
  .slide-timeline > i { font-size: 18px; }
  .slide-equation { grid-template-columns: 1fr; gap: 6px; margin-top: 16px; padding: 12px 14px; }
  .slide-equation span { text-align: left; }
  .slide-footnote { font-size: 10px; }
  .presentation-toolbar { grid-template-columns: 1fr auto; padding: 9px 12px; }
  .presentation-brand { display: none; }
  .presentation-progress { min-width: 0; }
}

/* Keep the bottom controller visible without letting it cover short landscape slides. */
@media (orientation: landscape) and (max-height: 520px) {
  .presentation-shell.is-open { grid-template-rows: minmax(0,1fr) auto; }
  .presentation-slide,
  .presentation-slide.has-background {
    grid-template-columns: minmax(0,1fr) minmax(210px,.58fr);
    align-items: center;
    align-content: center;
    gap: 22px;
    padding: 18px 34px 14px;
  }
  .presentation-copy { max-height: 100%; min-width: 0; overflow: visible; }
  .presentation-eyebrow { font-size: 8px; letter-spacing: .12em; }
  .presentation-slide h2 { margin-top: 7px; font-size: clamp(24px,4.2vw,38px); line-height: 1.04; }
  .presentation-slide .slide-lead { margin-top: 9px; font-size: 11px; line-height: 1.38; }
  .presentation-visual img { max-height: 205px; border-radius: 15px; }
  .slide-stat-grid { gap: 6px; margin-top: 9px; }
  .slide-stat { padding: 7px 9px; border-radius: 9px; }
  .slide-stat strong { font-size: clamp(18px,2.6vw,25px); }
  .slide-stat span { margin-top: 3px; font-size: 8px; line-height: 1.25; }
  .slide-workflow .slide-stat-grid { gap: 4px; margin-top: 6px; }
  .slide-workflow .slide-stat { padding: 5px 7px; }
  .slide-workflow .slide-stat strong { font-size: 14px; line-height: 1; }
  .slide-workflow .slide-stat span { margin-top: 2px; font-size: 7px; line-height: 1.16; }
  .slide-list { gap: 5px; margin-top: 10px; }
  .slide-list li { padding-left: 20px; font-size: 10px; line-height: 1.35; }
  .slide-list li::before { top: .52em; width: 7px; height: 7px; box-shadow: 0 0 0 3px rgba(98,200,244,.10); }
  .slide-quote { margin-top: 9px; padding: 8px 11px; border-left-width: 3px; font-size: 12px; line-height: 1.35; }
  .presentation-slide.slide-detail h2 { font-size: clamp(21px, 3.7vw, 31px); }
  .slide-concept-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
  .slide-concept-grid article,
  .slide-compare-grid article { padding: 7px 9px; border-radius: 9px; }
  .slide-concept-grid article > span,
  .slide-compare-grid article > span { font-size: 6px; }
  .slide-concept-grid strong,
  .slide-compare-grid strong { margin-top: 4px; font-size: 10px; line-height: 1.15; }
  .slide-concept-grid b,
  .slide-compare-grid b { margin: 4px 0 0; font-size: 17px; }
  .slide-concept-grid p,
  .slide-compare-grid p { margin-top: 3px; font-size: 7px; line-height: 1.2; }
  .slide-compare-grid { gap: 6px; margin-top: 8px; }
  .slide-timeline { gap: 7px; margin-top: 8px; }
  .slide-timeline article { min-height: 86px; padding: 8px 10px; border-radius: 10px; }
  .slide-timeline span { font-size: 7px; }
  .slide-timeline strong { margin-top: 5px; font-size: 11px; }
  .slide-timeline b { margin-top: 5px; font-size: 18px; }
  .slide-timeline > i { font-size: 16px; }
  .slide-equation { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 8px; margin-top: 7px; padding: 7px 9px; border-radius: 9px; }
  .slide-equation strong { font-size: 10px; }
  .slide-equation span { font-size: 9px; text-align: right; }
  .slide-footnote { margin-top: 6px; font-size: 7px; line-height: 1.25; }
  .presentation-toolbar { min-height: 54px; padding: 6px 12px; gap: 10px; }
  .presentation-brand { width: 92px; }
  .presentation-progress { min-width: 150px; gap: 7px; font-size: 9px; }
  .presentation-controls button { width: 33px; height: 33px; }
}

@media (orientation: landscape) and (max-height: 430px) and (max-width: 900px) {
  .presentation-slide,
  .presentation-slide.has-background { grid-template-columns: minmax(0,1fr); padding: 14px 24px 10px; }
  .presentation-visual { display: none; }
  .presentation-toolbar { grid-template-columns: minmax(0,1fr) auto; }
  .presentation-brand { display: none; }
  .presentation-slide h2 { font-size: clamp(22px,4.6vw,34px); }
  .presentation-slide.slide-workflow { padding-block: 9px 7px; }
  .presentation-slide.slide-workflow h2 { margin-top: 4px; font-size: clamp(19px,3.8vw,27px); }
}

@media (orientation: landscape) and (max-height: 650px) {
  .presentation-slide,
  .presentation-slide.has-background { gap: 22px; padding: 24px 42px 18px; }
  .presentation-slide h2 { margin-top: 8px; font-size: clamp(27px,3.6vw,42px); }
  .presentation-slide.slide-detail h2 { font-size: clamp(24px,3.25vw,36px); }
  .presentation-slide .slide-lead { margin-top: 10px; font-size: 13px; line-height: 1.4; }
  .slide-list { gap: 6px; margin-top: 12px; }
  .slide-list li { padding-left: 22px; font-size: 12px; line-height: 1.35; }
  .slide-list li::before { width: 8px; height: 8px; box-shadow: 0 0 0 3px rgba(98,200,244,.1); }
  .slide-quote { margin-top: 11px; padding: 10px 13px; font-size: 13px; line-height: 1.35; }
  .slide-stat-grid { gap: 7px; margin-top: 12px; }
  .slide-stat { padding: 9px 11px; border-radius: 11px; }
  .slide-stat strong { font-size: clamp(17px,2.1vw,25px); }
  .slide-stat span { margin-top: 3px; font-size: 9px; line-height: 1.28; }
  .slide-workflow h2 { font-size: clamp(24px,3vw,34px); }
  .slide-workflow .slide-stat-grid { gap: 5px; margin-top: 8px; }
  .slide-workflow .slide-stat { padding: 6px 8px; }
  .slide-workflow .slide-stat strong { font-size: 13px; }
  .slide-workflow .slide-stat span { font-size: 7.5px; line-height: 1.18; }
  .slide-concept-grid,
  .slide-compare-grid { gap: 7px; margin-top: 11px; }
  .slide-concept-grid article,
  .slide-compare-grid article { padding: 9px 11px; border-radius: 11px; }
  .slide-concept-grid strong,
  .slide-compare-grid strong { margin-top: 5px; font-size: 12px; }
  .slide-concept-grid b,
  .slide-compare-grid b { margin-top: 5px; font-size: 20px; }
  .slide-concept-grid p,
  .slide-compare-grid p { margin-top: 4px; font-size: 8px; line-height: 1.25; }
  .slide-timeline { gap: 8px; margin-top: 12px; }
  .slide-timeline article { min-height: 102px; padding: 11px 13px; }
  .slide-timeline span { font-size: 8px; }
  .slide-timeline strong { margin-top: 6px; font-size: 14px; }
  .slide-timeline b { margin-top: 6px; font-size: 22px; }
  .slide-equation { margin-top: 10px; padding: 10px 12px; }
  .slide-footnote { margin-top: 8px; font-size: 8px; }
  .presentation-board { top: 22px; right: 38px; bottom: 17px; }
}

/* Final responsive slide geometry: preserve a useful writing area on the right. */
@media (orientation: landscape) and (max-height: 520px) {
  .presentation-slide:not(.presentation-brand-slide):not(.presentation-credit-slide),
  .presentation-slide.has-background:not(.presentation-brand-slide):not(.presentation-credit-slide) {
    grid-template-columns: minmax(0,1.08fr) minmax(210px,.72fr);
    gap: 18px;
    padding: 14px 26px 10px;
  }
  .presentation-copy { max-width: none; }
  .presentation-board { top: 12px; right: 22px; bottom: 10px; width: 37%; border-radius: 14px; }
  .presentation-brand-slide,
  .presentation-credit-slide { grid-template-columns: 1fr; padding: 14px 34px 10px; }
  .presentation-brand-cover { width: min(620px,76vw); }
  .presentation-brand-cover > img { width: min(300px,39vw); max-height: 74px; margin-bottom: 12px; }
  .presentation-brand-cover h2 { margin-top: 7px; font-size: clamp(23px,4.2vw,36px); }
  .presentation-brand-cover .slide-lead { margin-top: 6px; font-size: 9px; }
  .presentation-credit { width: min(720px,88vw); grid-template-columns: minmax(0,1fr) auto; column-gap: 34px; }
  .presentation-credit-logo { width: min(270px,34vw); max-height: 68px; margin-bottom: 11px; }
  .presentation-credit h2 { margin-top: 6px; font-size: clamp(24px,4vw,34px); }
  .presentation-credit > p { margin-top: 4px; font-size: 10px; }
  .presentation-credit-site { gap: 5px; }
  .presentation-credit-site > img { width: clamp(82px,12vw,108px); padding: 4px; border-radius: 9px; }
  .presentation-credit-site strong { font-size: 9px; }
  .presentation-credit-site span { font-size: 7px; }
  .presentation-drawing-tools { bottom: calc(100% + 9px); padding: 6px; gap: 5px; }
  .presentation-controls .presentation-drawing-tools button { min-width: 32px; height: 27px; padding-inline: 6px; font-size: 7px; }
  .presentation-controls .presentation-drawing-tools .drawing-color { min-width: 23px; width: 23px; height: 23px; }
  .presentation-controls .presentation-zoom-control button { width: 27px; height: 27px; }
  .presentation-controls .presentation-zoom-control [data-presentation-zoom-reset] { width: 40px; font-size: 7px; }
}

@media (orientation: portrait) and (max-width: 760px) {
  .presentation-brand-slide,
  .presentation-credit-slide { padding: 34px 24px; }
  .presentation-brand-cover { width: 100%; justify-items: center; text-align: center; }
  .presentation-brand-cover > img { width: min(330px,78vw); margin-bottom: 28px; object-position: center; }
  .presentation-credit { width: 100%; grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .presentation-credit-logo,
  .presentation-credit .presentation-eyebrow,
  .presentation-credit h2,
  .presentation-credit > p,
  .presentation-credit-site { grid-column: 1; }
  .presentation-credit-logo { width: min(310px,74vw); margin-bottom: 24px; object-position: center; }
  .presentation-credit-site { grid-row: auto; margin-top: 26px; }
  .presentation-credit-site > img { width: 150px; }
  .presentation-board { inset: 20px 16px; width: auto; }
  .presentation-shell.drawing-enabled .presentation-slide.is-active .presentation-copy,
  .presentation-shell.drawing-enabled .presentation-slide.is-active .presentation-visual { opacity: 1; }
  .presentation-shell.drawing-enabled .presentation-slide.is-active .presentation-board { opacity: 1; }
  .presentation-controls { gap: 5px; }
  .presentation-controls button { width: 34px; height: 34px; }
  .presentation-controls .presentation-zoom-control button { width: 27px; height: 27px; }
  .presentation-controls .presentation-zoom-control [data-presentation-zoom-reset] { width: 40px; font-size: 7px; }
  .presentation-drawing-tools { right: -110px; }
}

@media (prefers-reduced-motion: reduce) {
  .presentation-slide { transition: none; }
  .presentation-progress-track i { transition: none; }
}

@media print {
  .site-header,.site-footer,.story-hero-actions,.story-aside,.presentation-shell { display: none !important; }
  .story-layout { display: block; width: 100%; margin: 0; }
  .story-intro,.story-section { break-inside: avoid; box-shadow: none; }
}