/* Slide-deck mode for case studies — only active when the page is opened with ?deck=1
   (the homepage opens each case study this way, full screen, in an overlay). */
html.deck-mode, html.deck-mode body { height: 100%; overflow: hidden; scroll-behavior: auto; }
html.deck-mode body { opacity: 0; background: #fff; }
html.deck-ready body { opacity: 1; transition: opacity 0.3s ease; }

html.deck-mode header,
html.deck-mode .sidenav,
html.deck-mode .reading-progress,
html.deck-mode .bottom-nav-section,
html.deck-mode .contact-section,
html.deck-mode footer,
html.deck-mode .cs-nav { display: none !important; }

/* every section is one full-screen slide; tall ones scroll inside themselves */
.deck-slide {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 76px 40px 100px !important;
  visibility: hidden;
  transform: translateX(100%);
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.2, 1), visibility 0s linear 0.6s;
  -webkit-overflow-scrolling: touch;
}
.deck-slide.is-past { transform: translateX(-100%); }
.deck-slide.is-active {
  visibility: visible;
  transform: none;
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.2, 1), visibility 0s;
}
/* centre in the available height, top-align once the content is taller */
.deck-slide > .section-inner,
.deck-slide > .cs-hero-inner { margin: auto; width: 100%; max-width: var(--max-width, 1000px); }
.deck-slide.cs-hero { justify-content: flex-start; background-attachment: scroll; }
.deck-slide .cs-hero-image { max-height: 44vh; width: auto; max-width: 100%; object-fit: contain; }
.deck-slide .cs-hero-image-frame { display: flex; justify-content: center; }

.deck-shot .flow-shot { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.deck-shot .inline-image { max-height: 62vh; width: auto; max-width: 100%; margin: 0 auto; }
.deck-shot .inline-image-caption { max-width: 720px; }
.deck-sub .phase { border-bottom: none; padding-bottom: 0; }
.deck-kicker {
  font-size: 13px; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--grey-mid, #6a7282); margin: 0 0 20px;
}

/* archive hero slide */
.deck-hero { display: flex; flex-direction: column; gap: 22px; }
.deck-hero .cs-hero-image-frame { height: 40vh !important; aspect-ratio: auto !important; padding: 0 !important; display: block !important; overflow: hidden; border-radius: 12px; }
.deck-hero .cs-hero-image { width: 100%; max-width: none; height: 100%; max-height: none; object-fit: cover; border-radius: 0; }
.deck-facts { display: flex; flex-wrap: wrap; gap: 14px 40px; margin: 0; }
.deck-facts dt { font-size: 11px; letter-spacing: 0.7px; text-transform: uppercase; color: var(--grey-mid, #6a7282); margin-bottom: 4px; }
.deck-facts dd { margin: 0; display: flex; align-items: center; gap: 7px; font-size: 15px; color: var(--black, #0e0e0e); }
.deck-facts dd img { border-radius: 4px; object-fit: cover; }

/* click-to-zoom screenshots */
.deck-zoom { position: relative; overflow: hidden; display: inline-block; max-width: 100%; border-radius: 12px; cursor: zoom-in; touch-action: none; }
.deck-zoom .inline-image { display: block; max-width: 100%; transform-origin: 0 0; will-change: transform; user-select: none; -webkit-user-drag: none; margin: 0; }
.deck-zoom.is-zoomed { cursor: grab; }
.deck-zoom.is-zoomed:active { cursor: grabbing; }

/* controls */
.deck-arrow {
  position: fixed; top: 50%; z-index: 60;
  width: 46px; height: 46px; margin-top: -23px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(0,0,0,0.1); border-radius: 50%;
  background: rgba(255,255,255,0.92); color: #0e0e0e;
  box-shadow: 0 6px 24px rgba(0,0,0,0.08);
  cursor: pointer; padding: 0;
  transition: opacity 0.25s ease, transform 0.2s ease, background 0.2s ease;
}
.deck-arrow:hover { background: #fff; transform: scale(1.06); }
.deck-arrow:focus-visible { outline: 2px solid #18A0FB; outline-offset: 2px; }
.deck-prev { left: 18px; }
.deck-next { right: 18px; }
.deck-arrow[disabled] { opacity: 0; pointer-events: none; }
.deck-bar {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 60;
  display: flex; align-items: center; gap: 16px;
  padding: 9px 16px; border-radius: 999px;
  background: rgba(255,255,255,0.92); border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 6px 24px rgba(0,0,0,0.08);
  font-size: 12px; color: #6a7282; font-family: 'Inter', sans-serif; letter-spacing: 0.2px;
}
.deck-dots { display: flex; gap: 6px; align-items: center; }
.deck-dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 4px; background: rgba(0,0,0,0.2); cursor: pointer; transition: width 0.3s ease, background 0.3s ease; }
.deck-dot:hover { background: rgba(0,0,0,0.45); }
.deck-dot.is-active { width: 22px; background: #0e0e0e; }
.deck-count { min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .deck-slide { padding: 64px 18px 120px !important; }
  /* Course Hero's title on phones: drop the "Study Boards:" lead-in, keep the rest */
  html.deck-navy:not(.deck-green) .deck-title-primary { display: none; }   /* room under image loops and lists so they scroll clear of the controls */
  .deck-arrow { width: 40px; height: 40px; margin-top: -20px; }
  .deck-prev { left: 8px; } .deck-next { right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .deck-slide, .deck-slide.is-active { transition: none; }
}

.deck-hero .cs-hero-image-frame { background: none !important; }

/* Course Hero deck */
.deck-slide .cs-hero-image-frame video { max-height: 40vh; width: auto; max-width: 100%; border-radius: 10px; margin: 0 auto; }
.deck-slide .proto-stage { width: min(100%, calc((100vh - 330px) * 1.6)); margin: 0 auto; }
.deck-slide .try-caption { min-height: 0; }

.deck-hero .cs-subtitle { font-size: 17px; line-height: 1.55; }
.deck-slide .cs-hero-image-frame video { max-height: 34vh; }
.deck-slide .proto-stage { width: min(100%, calc((100vh - 380px) * 1.6)); }

.deck-hero-text { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.deck-hero-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px 48px; align-items: center; }
.deck-hero-split .cs-hero-image-frame { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0; }
.deck-hero-split .cs-hero-image-frame video { width: 100%; max-height: 60vh; height: auto; border: 1px solid var(--border, #e5e7eb); border-radius: 12px; box-shadow: 0 14px 36px rgba(0,0,0,0.12); }
@media (max-width: 900px) { .deck-hero-split { grid-template-columns: 1fr; } .deck-hero-split .cs-hero-image-frame video { max-height: 34vh; } }
.deck-slide .section-lead { display: none; }
.deck-slide .proto-stage { width: min(100%, calc((100vh - 390px) * 1.6)); }

.deck-hero-split .cs-hero-image-frame video { height: auto !important; object-fit: contain; aspect-ratio: 1200 / 750; }

.deck-hero-split .cs-hero-image-frame { aspect-ratio: auto !important; overflow: visible; }

/* Course Hero: feature slides — text left, loop right, no eyebrows, never scroll */
.deck-slide .phase-label, .deck-slide .see-it { display:none; }
.deck-slide .phase-reverse .phase-copy { order:0; }
.deck-slide .phase-reverse .phase-visual { order:0; }
.deck-slide .phases-list .phase-title { font-size:26px; }
.deck-slide .phases-list .phase-body { font-size:16px; line-height:1.55; margin-bottom:12px; }
.deck-slide .phases-list .decision-meta { margin-top:16px; }
.deck-slide .problem-grid { margin-top:8px; }
.deck-slide .try-steps, .deck-slide #try-caption { display:none; }
.deck-slide .try-caption { justify-content:flex-end; }
.deck-slide .proto-stage { width:min(100%, calc((100vh - 330px)*1.6)); }
.deck-slide #try-wrap, .deck-slide .try-note { display:none; }
.deck-slide .section-inner:has(.try-caption) { position:relative; }
.deck-slide .try-caption { position:absolute; top:12px; right:0; margin:0; }
.deck-slide .section-inner:has(.try-caption) .cs-section-title { text-align:center; }
.deck-slide .try-caption { position:static; justify-content:center; margin:0 0 20px; }

/* Course Hero deck: Course Hero navy throughout */
html.deck-navy body { background: #040f3a; }
.deck-navy .deck-slide {
  background:
    radial-gradient(820px 460px at 88% -8%, rgba(74,112,255,0.30), transparent 62%),
    radial-gradient(640px 420px at -6% 108%, rgba(36,74,214,0.22), transparent 65%),
    linear-gradient(145deg, #0a2a8f 0%, #061a5c 55%, #040f3a 100%);
  color: #fff;
}
.deck-navy .deck-slide .cs-title,
.deck-navy .deck-slide .cs-section-title,
.deck-navy .deck-slide .phase-title { color: #fff; }
.deck-navy .deck-slide .cs-subtitle,
.deck-navy .deck-slide .cs-meta,
.deck-navy .deck-slide .cs-meta * { color: #c7d2fe; }
.deck-navy .deck-slide .phase-body,
.deck-navy .deck-slide .cs-body,
.deck-navy .deck-slide .section-lead { color: rgba(255,255,255,0.92); }
.deck-navy .deck-slide .cs-body strong,
.deck-navy .deck-slide .phase-body strong { color: #fff; }
.deck-navy .deck-slide .decision-meta { border-top-color: rgba(255,255,255,0.2); }
.deck-navy .deck-slide .decision-meta p { color: #c7d2fe; }
.deck-navy .deck-slide .decision-meta b { color: #8da2ff; }
.deck-navy .deck-slide .callout { box-shadow: 0 14px 36px rgba(0,5,40,0.35); border-color: transparent; }
.deck-navy .deck-slide .callout-label { color: #0a2a8f; }
.deck-navy .deck-slide .phase-visual-frame { border-color: rgba(255,255,255,0.25); box-shadow: 0 18px 44px rgba(0,5,40,0.55), 0 2px 6px rgba(0,5,40,0.4); }
.deck-navy .deck-slide .try-open { color: #fff; border-bottom-color: #8da2ff; }
.deck-navy .deck-slide .proto-stage { box-shadow: 0 18px 44px rgba(0,5,40,0.55); }
.deck-navy .deck-slide .proto-loading { color: #c7d2fe; }
.deck-navy .deck-arrow { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.28); color: #fff; box-shadow: none; backdrop-filter: blur(6px); }
.deck-navy .deck-arrow:hover { background: rgba(255,255,255,0.24); }
.deck-navy .deck-bar { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.22); color: #c7d2fe; box-shadow: none; backdrop-filter: blur(6px); }
.deck-navy .deck-dot { background: rgba(255,255,255,0.3); }
.deck-navy .deck-dot:hover { background: rgba(255,255,255,0.6); }
.deck-navy .deck-dot.is-active { background: #fff; }
/* gold (same as the 16%) for primary slide titles */
.deck-navy .deck-slide .cs-section-title,
.deck-navy .deck-slide .phases-list .phase-title { color: var(--accent, #d4a373); }

/* Course Hero deck: smaller copy, bigger loops, one-line uppercase titles */
.deck-navy .deck-slide > .section-inner { max-width: 1120px; }
.deck-navy .deck-slide .cs-section-title,
.deck-navy .deck-slide .phases-list .phase-title {
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 20px; line-height: 1.3; font-weight: 400;
}
.deck-navy .deck-slide .phases-list .phase { gap: 28px; }
.deck-navy .deck-slide .phases-list .phase-header { margin-bottom: 0; }
.deck-navy .deck-slide .phase-content { gap: 40px; align-items: center; }
.deck-navy .deck-slide .phase-copy { flex: 0 0 32%; }
.deck-navy .deck-slide .phase-visual { flex: 1; }
.deck-navy .deck-slide .phase-body, .deck-navy .deck-slide .cs-body { font-size: 14px; line-height: 1.55; }
.deck-navy .deck-slide .callout-text, .deck-navy .deck-slide .callout-text-lg { font-size: 15px; }
.deck-navy .deck-slide .callout-label { font-size: 16px; }
.deck-navy .deck-slide .decision-meta p { font-size: 12.5px; line-height: 1.5; }
.deck-navy .deck-slide .decision-meta b { font-size: 10px; }
.deck-navy .deck-slide .phase .phase-title { font-size: 18px; }
.deck-navy .deck-slide .phases-list .phase .phase-title { font-size: 20px; }
.deck-navy .deck-slide .cs-subtitle { font-size: 16px; }
.deck-navy .deck-slide .cs-meta { font-size: 13px; }

/* ---- round 2: hero title, logo outline, tighter radii, title inside copy, slightly larger type ---- */
.deck-navy .deck-title-primary { display:block; color: var(--accent, #d4a373); text-transform: uppercase; letter-spacing: 0.1em; font-size: 34px; line-height: 1.15; margin-bottom: 12px; }
.deck-navy .deck-title-secondary { display:block; color:#fff; font-size: 26px; line-height: 1.25; }
.deck-navy .deck-slide .cs-meta img { outline: 1px solid rgba(255,255,255,0.3); outline-offset: 0; border-radius: 3px; }
.deck-navy .deck-slide .phase-visual-frame,
.deck-navy .deck-slide .phase-visual-frame video,
.deck-navy .deck-slide .phase-visual-frame img { border-radius: 6px; }
.deck-navy .deck-hero-split .cs-hero-image-frame video { border-radius: 6px; }
.deck-navy .deck-slide .deck-in-copy { margin: 0 0 14px; }
.deck-navy .deck-slide .phase-header { gap: 6px; margin-bottom: 14px; }
.deck-navy .deck-slide .phase-copy { flex: 0 0 34%; }
.deck-navy .deck-slide .phases-list .phase-title { font-size: 17px; letter-spacing: 0.07em; line-height: 1.35; }
.deck-navy .deck-slide .phase .phase-title { font-size: 19px; }
.deck-navy .deck-slide .phases-list .phase .phase-title { font-size: 17px; }
.deck-navy .deck-slide .cs-section-title { font-size: 22px; }
.deck-navy .deck-slide .phase-body, .deck-navy .deck-slide .cs-body { font-size: 15px; }
.deck-navy .deck-slide .callout-text, .deck-navy .deck-slide .callout-text-lg { font-size: 16px; }
.deck-navy .deck-slide .callout-label { font-size: 17px; }
.deck-navy .deck-slide .decision-meta p { font-size: 13.5px; }
.deck-navy .deck-slide .decision-meta b { font-size: 10.5px; }
.deck-navy .deck-slide .cs-subtitle { font-size: 17px; }
.deck-navy .deck-slide .cs-meta { font-size: 14px; }
.deck-navy .deck-slide .phases-list .phase-header { margin-bottom: 16px; }

/* gold titles: sentence case, one shared size */
.deck-navy .deck-title-primary,
.deck-navy .deck-slide .cs-section-title,
.deck-navy .deck-slide .phases-list .phase-title,
.deck-navy .deck-slide .phases-list .phase .phase-title {
  text-transform: none; letter-spacing: 0.01em; font-size: 34px; line-height: 1.15; font-weight: 400;
}
.deck-navy .deck-title-primary { letter-spacing: 0.01em; }

/* Shopify hero: the image fills its container (text left, image right, as in Course Hero) */
.deck-hero-split .cs-hero-image-frame.deck-fill { position: relative; width: 100%; height: min(58vh, 560px) !important; aspect-ratio: auto !important; overflow: hidden !important; border-radius: 10px; }
.deck-hero-split .cs-hero-image-frame.deck-fill .cs-hero-image { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; border-radius: 0; }

/* Shopify deck: Course Hero's deck type and layout (deck-navy rules above), recoloured green */
html.deck-green body { background: #053a2c; }
.deck-green .deck-slide {
  background:
    radial-gradient(820px 460px at 88% -8%, rgba(120,230,185,0.16), transparent 62%),
    radial-gradient(640px 420px at -6% 108%, rgba(0,128,96,0.22), transparent 65%),
    linear-gradient(145deg, #0c5a45 0%, #074334 55%, #042c22 100%);
  color: #fff;
}
.deck-green .deck-slide .cs-subtitle,
.deck-green .deck-slide .cs-meta,
.deck-green .deck-slide .cs-meta * { color: #bfe9d7; }
.deck-green .deck-slide .cs-meta img { outline: none; }
.deck-green .deck-slide .callout { box-shadow: 0 14px 36px rgba(0,30,20,0.35); }
.deck-green .deck-slide .callout-label { color: #0c5a45; }
.deck-green .deck-slide .phase-visual-frame { border-color: rgba(255,255,255,0.25); box-shadow: 0 18px 44px rgba(0,25,18,0.55), 0 2px 6px rgba(0,25,18,0.4); }
.deck-green .deck-slide .decision-meta b { color: #7fe0b5; }
.deck-green .deck-bar { color: #bfe9d7; }
.deck-green .deck-slide .insight-finding { color: #fff; }
.deck-green .deck-slide .insight-change { color: #d5efe3; }
.deck-green .deck-slide .insight-item { border-bottom-color: rgba(255,255,255,0.18); }

/* solution slide: the phases as a numbered text list */
.deck-green .deck-phase-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
.deck-green .deck-phase-list li { display: flex; gap: 16px; padding: 16px 0; border-top: 1px solid rgba(255,255,255,0.18); }
.deck-green .deck-phase-n { font-size: 13px; letter-spacing: 0.08em; color: var(--accent, #d4a373); padding-top: 4px; min-width: 26px; }
.deck-green .deck-phase-name { margin: 0 0 4px; font-size: 18px; line-height: 1.3; color: #fff; }
.deck-green .deck-phase-desc { margin: 0; font-size: 14px; line-height: 1.5; color: #bfe9d7; }
@media (max-width: 760px) { .deck-green .deck-phase-list { grid-template-columns: 1fr; } }

/* next challenge slides */
.deck-green .deck-transition .phase-transition-text { margin: 0; max-width: 820px; font-size: 22px; line-height: 1.6; color: #fff; }

/* outcome slide */
.deck-green .deck-stats { display: flex; flex-wrap: wrap; gap: 24px 64px; margin: 4px 0 28px; }
.deck-green .deck-stat-num { margin: 0 0 10px; font-size: 68px; line-height: 1; color: var(--accent, #d4a373); }
.deck-green .deck-stat-label { margin: 0; max-width: 260px; font-size: 16px; line-height: 1.4; color: #fff; }
.deck-green .deck-outcome-lead { margin: 0 0 26px; max-width: 760px; }
.deck-green .deck-outcome-row { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 16px 0; border-top: 1px solid rgba(255,255,255,0.18); }
.deck-green .deck-outcome-k { margin: 0; padding-top: 3px; font-size: 11px; letter-spacing: 0.7px; text-transform: uppercase; color: #bfe9d7; }
.deck-green .deck-outcome-v { margin: 0; font-size: 15px; line-height: 1.55; color: #fff; }
@media (max-width: 640px) { .deck-green .deck-outcome-row { grid-template-columns: 1fr; gap: 6px; } }

/* next challenge slides: centred */
.deck-green .deck-challenge .section-inner { text-align: center; }
.deck-green .deck-challenge .deck-transition .phase-transition-text { margin: 0 auto; }

/* cards in the Course Hero and Shopify decks: a soft translucent panel instead of white */
.deck-navy .deck-slide .callout,
.deck-navy .deck-slide .principle,
.deck-navy .deck-slide .split-col {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 14px 36px rgba(0,0,0,0.16);
}
.deck-navy .deck-slide .callout-text,
.deck-navy .deck-slide .callout-text-lg,
.deck-navy .deck-slide .principle-title { color: #fff; }
.deck-navy .deck-slide .callout-label { color: #c7d2fe; }
.deck-navy .deck-slide .principle-body { color: rgba(255,255,255,0.82); }
.deck-green .deck-slide .callout-label { color: #bfe9d7; }

/* solution slide: a vertical progression, one node per phase */
.deck-green .deck-phase-list { display: block; max-width: 760px; position: relative; }
.deck-green .deck-phase-list li { display: block; position: relative; border-top: 0; padding: 0 0 26px 44px; }
.deck-green .deck-phase-list li:last-child { padding-bottom: 0; }
.deck-green .deck-phase-list li::before {
  content: ''; position: absolute; left: 6px; top: 18px; bottom: 0; width: 2px; background: rgba(255,255,255,0.22);
}
.deck-green .deck-phase-list li:last-child::before { display: none; }
.deck-green .deck-phase-list li::after {
  content: ''; position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent, #d4a373); box-shadow: 0 0 0 5px rgba(212,163,115,0.18);
}
.deck-green .deck-phase-name { display: flex; align-items: baseline; gap: 14px; }
.deck-green .deck-phase-n { min-width: 0; padding-top: 0; font-size: 13px; letter-spacing: 0.08em; color: var(--accent, #d4a373); }

/* solution slide: number in its own column, so each description lines up with its phase name */
.deck-green .deck-phase-name { display: grid; grid-template-columns: 28px 1fr; column-gap: 14px; align-items: baseline; }
.deck-green .deck-phase-n { padding-top: 0; }
.deck-green .deck-phase-desc { padding-left: 42px; }

/* ── MOBILE TYPE SCALE (≤640px) ──
   Slide decks are full-screen, so on a phone every slide has to fit without
   scrolling. The desktop sizes above (34px titles, 68px stats, 15–16px body)
   are scaled down here. Same selectors, later in the file, so these win. */
@media (max-width: 640px) {
  .deck-kicker { font-size: 11px; margin-bottom: 12px; }
  .deck-slide .cs-hero-image { max-height: 28vh; }
  .deck-hero .cs-hero-image-frame { height: 28vh !important; }
  .deck-slide .cs-hero-image-frame video { max-height: 28vh; }
  .deck-hero-split .cs-hero-image-frame video { max-height: 28vh; }
  .deck-slide .proto-stage { width: 100%; }
  .deck-shot .inline-image { max-height: 50vh; }
  .deck-facts { gap: 12px 24px; }
  .deck-facts dd { font-size: 13px; }
  .deck-hero { gap: 14px; }
  .deck-hero .cs-subtitle, .deck-navy .deck-slide .cs-subtitle { font-size: 14px; line-height: 1.5; }
  .deck-hero-text { gap: 12px; }
  .deck-hero-split { gap: 16px; }

  .deck-navy .deck-title-primary { font-size: 24px; line-height: 1.2; margin-bottom: 8px; }
  .deck-navy .deck-title-secondary { font-size: 18px; line-height: 1.3; }
  .deck-navy .deck-slide .cs-section-title,
  .deck-navy .deck-slide .phases-list .phase-title,
  .deck-navy .deck-slide .phases-list .phase .phase-title { font-size: 22px; line-height: 1.2; }
  .deck-navy .deck-slide .phase .phase-title { font-size: 16px; }
  .deck-navy .deck-slide .phases-list .phase .phase-title { font-size: 16px; }
  .deck-navy .deck-slide .phases-list .phase-header { margin-bottom: 10px; }
  .deck-navy .deck-slide .phase-header { margin-bottom: 10px; }
  .deck-navy .deck-slide .cs-meta { font-size: 12px; }
  .deck-navy .deck-slide .phase-body,
  .deck-navy .deck-slide .cs-body,
  .deck-navy .deck-slide .phases-list .phase-body { font-size: 14px; line-height: 1.55; margin-bottom: 10px; }
  .deck-navy .deck-slide .deck-in-copy { margin-bottom: 10px; }
  .deck-navy .deck-slide .phase-content { gap: 20px; }
  .deck-navy .deck-slide .phase-copy { flex: none; }
  .deck-navy .deck-slide .decision-meta { margin-top: 14px; padding-top: 14px; gap: 10px; }
  .deck-navy .deck-slide .decision-meta p { font-size: 12.5px; line-height: 1.5; }
  .deck-navy .deck-slide .decision-meta b { font-size: 10px; }
  .deck-navy .deck-slide .callout { padding: 14px 16px; }
  .deck-navy .deck-slide .callout-label { font-size: 14px; margin-bottom: 8px; }
  .deck-navy .deck-slide .callout-text,
  .deck-navy .deck-slide .callout-text-lg { font-size: 14px; line-height: 1.5; }
  .deck-navy .deck-slide .principle { padding: 14px 16px; }
  .deck-navy .deck-slide .principle-title { font-size: 15px; margin-bottom: 4px; }
  .deck-navy .deck-slide .principle-body { font-size: 13px; line-height: 1.5; }
  .deck-navy .deck-slide .split-col { padding: 14px 16px; }
  .deck-navy .deck-slide .split-col li { font-size: 13px; }
  .deck-navy .deck-slide .section-lead { font-size: 14px; margin-bottom: 16px; }

  .deck-green .deck-phase-list li { padding: 0 0 18px 36px; }
  .deck-green .deck-phase-name { font-size: 16px; grid-template-columns: 22px 1fr; column-gap: 10px; }
  .deck-green .deck-phase-n { font-size: 11px; }
  .deck-green .deck-phase-desc { font-size: 13px; padding-left: 32px; }
  .deck-green .deck-transition .phase-transition-text { font-size: 17px; line-height: 1.5; }
  .deck-green .deck-stats { gap: 16px 32px; margin-bottom: 18px; }
  .deck-green .deck-stat-num { font-size: 44px; margin-bottom: 6px; }
  .deck-green .deck-stat-label { font-size: 13px; max-width: none; }
  .deck-green .deck-outcome-lead { margin-bottom: 16px; font-size: 14px; }
  .deck-green .deck-outcome-row { padding: 12px 0; }
  .deck-green .deck-outcome-k { font-size: 10px; }
  .deck-green .deck-outcome-v { font-size: 14px; line-height: 1.5; }
  .deck-green .deck-slide .insight-finding { font-size: 14px; }
  .deck-green .deck-slide .insight-change { font-size: 13px; }

  .deck-arrow { width: 36px; height: 36px; margin-top: -18px; }
  .deck-bar { font-size: 11px; bottom: 12px; padding: 7px 12px; gap: 10px; }
  .deck-dot.is-active { width: 16px; }
}

/* Loops and screenshots in the slide decks: full text width on phones */
@media (max-width: 640px) {
  .deck-slide .phase-visual:has(.phase-visual-frame) { padding: 0; }
  .deck-slide .phase-visual-frame video { max-height: none; }
}

/* First slide of Course Hero and Shopify on phones */
@media (max-width: 640px) {
  /* Course Hero: the loop runs the full width of the slide (height follows its 1200:750 ratio) */
  .deck-hero-split .cs-hero-image-frame:not(.deck-fill) { height: auto !important; width: 100%; }
  .deck-hero-split .cs-hero-image-frame:not(.deck-fill) video { width: 100% !important; max-width: 100%; height: auto !important; max-height: none !important; }

  /* Shopify: the image fills its frame and is cropped (zoomed in), as on desktop */
  .deck-hero-split .cs-hero-image-frame.deck-fill { height: 44vh !important; }
  .deck-hero .cs-hero-image-frame.deck-fill .cs-hero-image { max-height: none !important; height: 100%; width: 100%; object-fit: cover; }
}

/* Gallery images in the Course Hero and Shopify decks: the zoom box fills the frame */
.deck-slide .phase-visual-frame .deck-zoom { display: block; width: 100%; max-width: 100%; border-radius: inherit; }
.deck-slide .phase-visual-frame .deck-zoom .inline-image,
.deck-slide .phase-visual-frame .deck-zoom img { display: block; width: 100%; height: auto; border-radius: 0; }

/* Phone controls: arrows sit either side of the slide counter along the bottom */
@media (max-width: 640px) {
  .deck-bar { width: max-content; bottom: 12px; padding: 7px 12px; gap: 10px; }
  .deck-count { min-width: 0; }
  .deck-arrow { top: auto; bottom: 11px; margin-top: 0; width: 36px; height: 36px; }
  .deck-prev { left: 12px; right: auto; }
  .deck-next { right: 12px; left: auto; }
}

/* Course Hero's last slide on phones: the desktop-only note, centred and in white */
@media (max-width: 760px) {
  .deck-navy .deck-slide .try-mobile { text-align: center; }
  .deck-navy .deck-slide .try-mobile p { color: #fff; margin-left: auto; margin-right: auto; }
  .deck-navy .deck-slide .try-mobile .btn-secondary { color: #fff; border-color: rgba(255,255,255,0.5); background: transparent; }
  .deck-navy .deck-slide .try-mobile .btn-secondary:hover { background: rgba(255,255,255,0.12); }
}