:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-c2ec215 *//* KCARC — Meshcore Presentation audio player
   Matches the pres- design system already used across the presentation
   page: deep navy #0b2545/#123a63 backgrounds, amber accent #f2a03d/#c97f22,
   off-white #f8f6f1 text, Poppins headings / Inter body.

   Paste into the same Custom CSS / Additional CSS field as the rest of the
   presentation-style.css rules. Pair with presentation-audio-player.html
   (which also contains the player's JS, inline in a <script> tag). */

.pres-audio{
  max-width:760px;
  margin:0 auto;
  background:linear-gradient(155deg,#123a63,#0b2545);
  border-radius:14px;
  padding:28px 30px;
  box-shadow:0 12px 32px rgba(11,37,69,0.28);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

.pres-audio__header{
  margin-bottom:18px;
}
.pres-audio__eyebrow{
  display:block;
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#f2a03d;
  margin-bottom:6px;
}
.pres-audio__title{
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:22px;
  font-weight:700;
  color:#f8f6f1;
  margin:0;
}

/* ---------- Controls row ---------- */
.pres-audio__controls{
  display:flex;
  align-items:center;
  gap:14px;
}

.pres-audio__play,
.pres-audio-mini__play{
  flex:0 0 auto;
  width:42px;
  height:42px;
  border-radius:50%;
  border:none;
  background:#f2a03d;
  color:#0b2545;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .15s ease;
}
.pres-audio__play:hover,
.pres-audio-mini__play:hover{
  background:#c97f22;
}
.pres-audio__play svg,
.pres-audio-mini__play svg{
  margin-left:2px; /* optical centering for the play triangle */
}
.pres-audio__play .pres-audio__icon-pause,
.pres-audio-mini__play .pres-audio__icon-pause{
  margin-left:0;
}

.pres-audio__time{
  flex:0 0 auto;
  font-variant-numeric:tabular-nums;
  font-size:13px;
  color:#c7d2e3;
  min-width:32px;
}
.pres-audio__time--total{
  text-align:right;
}

.pres-audio__scrubber{
  flex:1 1 auto;
  -webkit-appearance:none;
  appearance:none;
  height:4px;
  border-radius:999px;
  background:rgba(248,246,241,0.25);
  cursor:pointer;
}
.pres-audio__scrubber::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#f2a03d;
  border:2px solid #f8f6f1;
  cursor:pointer;
}
.pres-audio__scrubber::-moz-range-thumb{
  width:14px;
  height:14px;
  border-radius:50%;
  background:#f2a03d;
  border:2px solid #f8f6f1;
  cursor:pointer;
  border:none;
}
.pres-audio__scrubber::-moz-range-progress{
  background:#f2a03d;
  height:4px;
  border-radius:999px;
}

.pres-audio__speed{
  flex:0 0 auto;
  background:rgba(248,246,241,0.08);
  border:1px solid rgba(248,246,241,0.3);
  color:#f8f6f1;
  border-radius:6px;
  padding:6px 8px;
  font-size:13px;
  cursor:pointer;
}
.pres-audio__speed option{
  color:#1a1f27;
}

/* ---------- Now playing label ---------- */
.pres-audio__now-playing{
  margin-top:16px;
  font-size:14px;
  font-style:italic;
  color:#c7d2e3;
}

/* ---------- Chapters ---------- */
.pres-audio__chapters-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:16px;
  background:transparent;
  border:1px solid rgba(242,160,61,0.5);
  color:#f2a03d;
  border-radius:999px;
  padding:8px 16px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease;
}
.pres-audio__chapters-toggle:hover{
  background:rgba(242,160,61,0.12);
  border-color:#f2a03d;
}
.pres-audio__chapters-toggle[aria-expanded="true"] .pres-audio__chevron{
  transform:rotate(180deg);
}
.pres-audio__chevron{
  transition:transform .15s ease;
}

.pres-audio__chapters{
  list-style:none;
  margin:14px 0 0;
  padding:6px 0 0;
  max-height:280px;
  overflow-y:auto;
  border-top:1px solid rgba(248,246,241,0.15);
}
.pres-audio__chapter-btn{
  width:100%;
  display:flex;
  align-items:baseline;
  gap:12px;
  background:transparent;
  border:none;
  border-radius:6px;
  padding:9px 10px;
  text-align:left;
  cursor:pointer;
  color:#c7d2e3;
}
.pres-audio__chapter-btn:hover{
  background:rgba(248,246,241,0.08);
  color:#f8f6f1;
}
.pres-audio__chapter.is-active .pres-audio__chapter-btn{
  background:rgba(242,160,61,0.14);
  color:#f8f6f1;
}
.pres-audio__chapter-time{
  flex:0 0 auto;
  font-variant-numeric:tabular-nums;
  font-size:12px;
  color:#f2a03d;
  min-width:38px;
}
.pres-audio__chapter.is-active .pres-audio__chapter-time{
  color:#f2a03d;
  font-weight:700;
}
.pres-audio__chapter-title{
  font-size:14px;
  line-height:1.4;
}

/* ---------- Sticky mini-player ---------- */
.pres-audio-mini{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translate(-50%,140%);
  opacity:0;
  pointer-events:none;
  transition:transform .25s ease,opacity .25s ease;
  z-index:9999;

  width:min(520px,calc(100% - 32px));
  display:flex;
  align-items:center;
  gap:12px;
  background:#0b2545;
  border:1px solid rgba(242,160,61,0.35);
  border-radius:12px;
  padding:10px 14px;
  box-shadow:0 10px 30px rgba(0,0,0,0.35);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.pres-audio-mini.is-visible{
  transform:translate(-50%,0);
  opacity:1;
  pointer-events:auto;
}

.pres-audio-mini__play{
  width:34px;
  height:34px;
}

.pres-audio-mini__info{
  flex:0 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:1px;
}
.pres-audio-mini__label{
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#f2a03d;
}
.pres-audio-mini__chapter{
  font-size:13px;
  color:#f8f6f1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.pres-audio-mini__scrubber{
  flex:1 1 auto;
  min-width:40px;
  -webkit-appearance:none;
  appearance:none;
  height:3px;
  border-radius:999px;
  background:rgba(248,246,241,0.25);
  cursor:pointer;
}
.pres-audio-mini__scrubber::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:11px;
  height:11px;
  border-radius:50%;
  background:#f2a03d;
  border:2px solid #f8f6f1;
  cursor:pointer;
}
.pres-audio-mini__scrubber::-moz-range-thumb{
  width:11px;
  height:11px;
  border-radius:50%;
  background:#f2a03d;
  border:2px solid #f8f6f1;
  cursor:pointer;
  border:none;
}

.pres-audio-mini__top{
  flex:0 0 auto;
  width:24px;
  height:24px;
  border-radius:50%;
  border:none;
  background:transparent;
  color:#c7d2e3;
  font-size:15px;
  line-height:1;
  cursor:pointer;
}
.pres-audio-mini__top:hover{
  background:rgba(242,160,61,0.16);
  color:#f2a03d;
}

.pres-audio-mini__close{
  flex:0 0 auto;
  width:24px;
  height:24px;
  border-radius:50%;
  border:none;
  background:transparent;
  color:#c7d2e3;
  font-size:18px;
  line-height:1;
  cursor:pointer;
}
.pres-audio-mini__close:hover{
  background:rgba(248,246,241,0.12);
  color:#f8f6f1;
}

/* ---------- Responsive ---------- */
@media (max-width:767px){
  .pres-audio{
    padding:22px 18px;
    border-radius:10px;
  }
  .pres-audio__title{ font-size:19px; }
  .pres-audio__controls{
    flex-wrap:wrap;
  }
  .pres-audio__scrubber{
    order:1;
    flex-basis:100%;
  }
  .pres-audio__speed{
    order:2;
  }
  .pres-audio-mini__info{
    display:none; /* keep the mini bar to controls-only on small screens */
  }
}/* End custom CSS */
/* Start custom CSS *//* ===================================================================
   HAM RADIO PRESENTATION PAGE — SHARED STYLE FOUNDATION
   Paste this whole block into Elementor's Custom CSS
   (Site Settings > Custom CSS, or Appearance > Customize > Additional
   CSS if you don't have Elementor Pro's custom CSS panel).
   Every slide section below is built with these classes, so you only
   need to paste this ONCE — then each slide is just an HTML widget
   using these class names.
   =================================================================== */

:root {
  /* --- Color palette: classic ham radio, navy + amber dial glow --- */
  --pres-navy:        #0b2545;   /* deep background navy */
  --pres-navy-2:      #123a63;   /* lighter navy for gradients/cards */
  --pres-steel:        #4f6d8f;   /* muted blue-gray, secondary text on dark */
  --pres-amber:        #f2a03d;   /* accent — dial glow / warning-light amber */
  --pres-amber-dark:   #c97f22;   /* hover/darker accent */
  --pres-off-white:    #f8f6f1;   /* light section background */
  --pres-paper:        #ffffff;   /* card/callout background on light sections */
  --pres-ink:          #1a1f27;   /* body text on light backgrounds */
  --pres-ink-soft:     #4a5568;   /* secondary text on light backgrounds */
  --pres-cloud:        #f5f5f5;   /* body text on dark backgrounds */

  /* --- Spacing / rhythm --- */
  --pres-pad-y-desktop: 100px;
  --pres-pad-y-tablet:  70px;
  --pres-pad-y-mobile:  48px;
  --pres-pad-x:         6vw;
  --pres-radius:        14px;
  --pres-max-width:     1100px;

  /* --- Type --- */
  --pres-font-head: 'Poppins', 'Segoe UI', Arial, sans-serif;
  --pres-font-body: 'Inter', 'Segoe UI', Arial, sans-serif;
}

/* Optional: comment out if your theme already loads these fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@600;700&display=swap');

/* -------------------------------------------------------------------
   BASE SECTION — every slide wraps its HTML widget content in one of
   these. Full-viewport-ish height on desktop, natural height on
   mobile so nothing feels cramped or awkwardly stretched.
   ------------------------------------------------------------------- */
.pres-section {
  box-sizing: border-box;
  width: 100%;
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pres-pad-y-desktop) var(--pres-pad-x);
  font-family: var(--pres-font-body);
}

.pres-section__inner {
  width: 100%;
  max-width: var(--pres-max-width);
  margin: 0 auto;
}

/* Color variants — alternate these slide to slide so each one reads
   as distinct rather than a scrolling wall of sameness. */
.pres-section--dark {
  background: linear-gradient(160deg, var(--pres-navy) 0%, var(--pres-navy-2) 100%);
  color: var(--pres-cloud);
}
.pres-section--light {
  background: var(--pres-off-white);
  color: var(--pres-ink);
}
.pres-section--white {
  background: var(--pres-paper);
  color: var(--pres-ink);
}

/* Image-background variant: put a background-image inline on the
   section (style="background-image:url(...)") plus this class for
   the readable overlay. */
.pres-section--image {
  position: relative;
  background-size: cover;
  background-position: center;
  color: var(--pres-cloud);
}
.pres-section--image::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Lighter at the top so the photo itself stays visible; only
     deepens toward the bottom where text/credit sit, for legibility. */
  background: linear-gradient(180deg,
    rgba(11,37,69,0.18) 0%,
    rgba(11,37,69,0.38) 45%,
    rgba(11,37,69,0.60) 100%);
  z-index: 0;
}
.pres-section--image .pres-section__inner {
  position: relative;
  z-index: 1;
}
/* Text sits directly on the photo now that the overlay is lighter,
   so give it its own shadow for guaranteed contrast. */
.pres-section--image .pres-title,
.pres-section--image .pres-subtitle,
.pres-section--image .pres-presenter,
.pres-section--image .pres-photo-credit {
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}

/* -------------------------------------------------------------------
   TEXT ELEMENTS
   ------------------------------------------------------------------- */
.pres-eyebrow {
  display: inline-block;
  font-family: var(--pres-font-head);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pres-amber);
  margin: 0 0 14px;
}

.pres-title {
  font-family: var(--pres-font-head);
  font-weight: 700;
  font-size: clamp(28px, 4.2vw, 48px);
  line-height: 1.15;
  margin: 0 0 20px;
}

.pres-subtitle {
  font-family: var(--pres-font-head);
  font-weight: 600;
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.35;
  margin: 0 0 18px;
  opacity: 0.9;
}

.pres-body {
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.7;
  margin: 0 0 16px;
}
.pres-section--dark .pres-body,
.pres-section--image .pres-body { color: var(--pres-cloud); opacity: 0.92; }
.pres-section--light .pres-body,
.pres-section--white .pres-body { color: var(--pres-ink-soft); }

.pres-body:last-child { margin-bottom: 0; }

/* Simple bullet list styled to match, for slides that had bullet
   points in PowerPoint */
.pres-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 12px;
}
.pres-list li {
  padding-left: 30px;
  position: relative;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.6;
}
.pres-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--pres-amber);
}

/* -------------------------------------------------------------------
   LAYOUT HELPERS
   ------------------------------------------------------------------- */

/* Two-column layout (e.g. text + image slide). Stacks on tablet/mobile. */
.pres-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
}
.pres-grid--reverse .pres-grid-media { order: 2; }
.pres-grid--reverse .pres-grid-text  { order: 1; }

/* Wider media column — for a dense infographic/chart that needs more
   room to stay legible, paired with a shorter list of key points. */
.pres-grid--wide-media { grid-template-columns: 1.7fr 1fr; }

.pres-grid-media { min-width: 0; }
.pres-grid-media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--pres-radius);
}

/* Centered single-column layout for title/section-break slides */
.pres-center {
  text-align: center;
}
.pres-center .pres-list { justify-items: center; }

/* -------------------------------------------------------------------
   IMAGE / MEDIA
   ------------------------------------------------------------------- */
.pres-image-frame {
  border-radius: var(--pres-radius);
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(11, 37, 69, 0.18);
  line-height: 0;
}
.pres-image-frame img {
  display: block;
  width: 100%;
  height: auto;
}
.pres-caption {
  margin-top: 10px;
  font-size: 14px;
  text-align: center;
  opacity: 0.7;
}

/* -------------------------------------------------------------------
   CALLOUT / QUOTE BOX — for pull-quotes, key stats, or "remember
   this" style callouts pulled out of slide text.
   ------------------------------------------------------------------- */
.pres-callout {
  background: var(--pres-paper);
  border-left: 4px solid var(--pres-amber);
  border-radius: 0 var(--pres-radius) var(--pres-radius) 0;
  padding: 22px 26px;
  box-shadow: 0 10px 30px rgba(11, 37, 69, 0.08);
  color: var(--pres-ink);
}
.pres-section--dark .pres-callout,
.pres-section--image .pres-callout {
  background: rgba(255,255,255,0.06);
  color: var(--pres-cloud);
  box-shadow: none;
}

/* Stat row — for slides with a few key numbers (e.g. "40m", "100W",
   "5,000 members") */
.pres-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 24px;
  margin-top: 12px;
}
.pres-stat-num {
  font-family: var(--pres-font-head);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 40px);
  color: var(--pres-amber);
  line-height: 1;
}
.pres-stat-label {
  font-size: 14px;
  margin-top: 6px;
  opacity: 0.8;
}

/* -------------------------------------------------------------------
   BUTTON / CTA
   ------------------------------------------------------------------- */
.pres-btn {
  display: inline-block;
  font-family: var(--pres-font-head);
  font-weight: 600;
  font-size: 15px;
  padding: 13px 28px;
  border-radius: 999px;
  background: var(--pres-amber);
  color: var(--pres-navy);
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
.pres-btn:hover {
  background: var(--pres-amber-dark);
  transform: translateY(-2px);
  color: var(--pres-navy);
}

/* =====================================================================
   RESPONSIVE — tablet
   ===================================================================== */
@media (max-width: 1024px) {
  .pres-section {
    padding: var(--pres-pad-y-tablet) var(--pres-pad-x);
    min-height: 0;
  }
  .pres-grid {
    gap: 34px;
  }
}

/* =====================================================================
   RESPONSIVE — mobile (matches Elementor's default mobile breakpoint)
   ===================================================================== */
@media (max-width: 767px) {
  .pres-section {
    padding: var(--pres-pad-y-mobile) 6vw;
    min-height: 0;
  }
  .pres-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .pres-grid--reverse .pres-grid-media,
  .pres-grid--reverse .pres-grid-text {
    order: unset; /* stack in natural (text-first) order on mobile */
  }
  .pres-stats {
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 16px;
  }
  .pres-callout {
    padding: 18px 20px;
  }
}

/* =====================================================================
   TITLE / HERO SLIDE PIECES
   Used for full-bleed photo title slides (e.g. slide 1 of a deck).
   ===================================================================== */

/* Keeps the immersive full-photo feel on tablet/mobile instead of
   collapsing to content height like a normal content section.

   Uses a two-row grid (content row + credit row) instead of absolute
   positioning for the photo credit, so the credit always lands at
   the true bottom edge of the section — regardless of how tall the
   title/subtitle end up being at a given screen size — rather than
   a fixed pixel offset that can drift or overlap on shorter screens. */
.pres-section--hero {
  min-height: 92vh;
  display: grid;
  grid-template-columns: 100%;   /* full-width track so justify-self/auto-margins have room to position within it, instead of the column shrinking to fit its content */
  grid-template-rows: 1fr auto;
  padding-bottom: 56px;
}
.pres-section--hero .pres-section__inner {
  grid-row: 1;
  align-self: center;
  justify-self: center;
}
.pres-section--hero .pres-photo-credit {
  grid-row: 2;
  position: static;   /* overrides the default absolute positioning */
  justify-self: start;
  align-self: end;
  margin: 0;
  padding-top: 28px;
}
@media (max-width: 1024px) {
  .pres-section--hero { min-height: 80vh; }
}
@media (max-width: 767px) {
  .pres-section--hero {
    min-height: 78vh;
    padding-top: 56px;
    padding-bottom: 32px;
  }
  .pres-section--hero .pres-photo-credit {
    padding-top: 18px;
  }
}

/* Keeps long titles/subtitles from stretching edge-to-edge on wide
   screens when centered */
.pres-center .pres-title,
.pres-center .pres-subtitle {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

/* Presenter name / affiliation block below the subtitle on title slides */
.pres-presenter {
  margin-top: 34px;
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.6;
  opacity: 0.92;
}
.pres-presenter strong { font-weight: 600; }

/* Small italic photo-credit line pinned to the bottom-left corner of
   a full-bleed image section (matches typical slide photo-credit style) */
.pres-photo-credit {
  position: absolute;
  left: 6vw;
  bottom: 24px;
  z-index: 2;
  margin: 0;
  font-size: 13px;
  font-style: italic;
  color: rgba(245, 245, 245, 0.75);
}
@media (max-width: 767px) {
  .pres-photo-credit {
    bottom: 16px;
    font-size: 12px;
  }
}

/* =====================================================================
   SPEAKER NOTES
   A strip attached directly under each slide section, always visible
   — this page is read/scrolled, not presented live, so the notes are
   part of the content rather than something to duck behind a toggle.
   Always a neutral light band regardless of the slide variant above
   it, so it reads consistently as "supporting text" no matter what
   the slide looked like.
   ===================================================================== */
.pres-notes-wrap {
  background: var(--pres-off-white);
  padding: 20px 6vw 28px;
  border-top: 1px solid rgba(11, 37, 69, 0.08);
}
.pres-notes {
  max-width: var(--pres-max-width);
  margin: 0 auto;
}
.pres-notes__label {
  display: inline-block;
  font-family: var(--pres-font-head);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pres-navy);
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(11, 37, 69, 0.06);
  margin: 0 0 14px;
}
.pres-notes__body {
  padding: 18px 22px;
  background: var(--pres-paper);
  border-left: 3px solid var(--pres-amber);
  border-radius: 0 10px 10px 0;
  box-shadow: 0 6px 20px rgba(11, 37, 69, 0.06);
}
.pres-notes__body p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--pres-ink-soft);
  margin: 0 0 12px;
}
.pres-notes__body p:last-child { margin-bottom: 0; }

@media (max-width: 767px) {
  .pres-notes-wrap { padding: 16px 6vw 22px; }
  .pres-notes__label { font-size: 12px; padding: 8px 14px; }
  .pres-notes__body { padding: 15px 16px; }
  .pres-notes__body p { font-size: 14.5px; }
}

/* =====================================================================
   LINKS — any <a> inside a slide section or the notes body (e.g. a
   presenter's callsign linked to QRZ, a reference link in body text).
   Underline styles in amber instead of default browser blue, and
   adapts its hover color so it reads correctly on both dark/photo
   sections and light sections.
   ===================================================================== */
.pres-section a,
.pres-notes__body a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--pres-amber);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.pres-section a:focus-visible,
.pres-notes__body a:focus-visible {
  outline: 2px solid var(--pres-amber);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Hover color on dark / photo sections — brighten toward amber */
.pres-section--dark a:hover,
.pres-section--image a:hover {
  color: var(--pres-amber);
  text-decoration-color: var(--pres-amber);
}

/* Hover color on light sections + notes body — darker amber keeps
   contrast readable against white/off-white */
.pres-section--light a:hover,
.pres-section--white a:hover,
.pres-notes__body a:hover {
  color: var(--pres-amber-dark);
  text-decoration-color: var(--pres-amber-dark);
}

/* =====================================================================
   SPLIT-PANEL SLIDE — a torn-edge text panel beside a full-bleed
   photo. A second "shape" of slide to mix in alongside the plain
   full-width sections for visual variety across the deck. Stacks
   cleanly on mobile with a plain straight edge instead of the torn
   shape — the jagged clip-path reads fine at full width but gets
   cramped/messy squeezed into a narrow mobile column, so mobile
   trades it for a simple stacked layout instead.
   ===================================================================== */
.pres-split {
  display: grid;
  grid-template-columns: minmax(280px, 38%) 1fr;
  align-items: stretch;
  padding: 0;
  min-height: 85vh;
  overflow: hidden;
}
.pres-split__panel {
  position: relative;
  z-index: 2;
  color: var(--pres-ink);
  display: flex;
  align-items: center;
  padding: 64px 64px 64px 6vw;
  margin-right: -40px; /* overlaps the photo slightly so the torn edge reads as biting into it */
}
/* The jagged shape itself lives on ::before/::after (not the panel's
   own box) so the clip-path only trims these two decorative layers —
   the real text in .pres-split__panel-inner is never clipped, just
   drawn on top of them. */
.pres-split__panel::before,
.pres-split__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(
    0 0, 88% 0, 97% 5%, 80% 12%, 100% 21%, 83% 29%,
    96% 39%, 76% 47%, 94% 57%, 79% 66%, 98% 75%,
    82% 85%, 92% 93%, 68% 100%, 0 100%
  );
}
/* Front layer: the visible paper, lifted off the photo with a soft
   shadow that traces the torn silhouette (drop-shadow follows the
   clipped shape itself, unlike a regular box-shadow which would
   just be a rectangle). */
.pres-split__panel::before {
  z-index: -1;
  background: var(--pres-off-white);
  filter: drop-shadow(9px 7px 16px rgba(11, 37, 69, 0.4));
}
/* Back layer: a slightly deeper cream, offset a few pixels down-right,
   so a thin sliver peeks out along the tear — the classic "torn card
   stock showing its core color" cue that sells the paper effect. */
.pres-split__panel::after {
  z-index: -2;
  background: #ddd5c2;
  transform: translate(7px, 6px);
}
.pres-split__panel-inner { position: relative; z-index: 1; max-width: 420px; }
.pres-split__panel .pres-title { font-size: clamp(24px, 2.6vw, 34px); margin-bottom: 14px; }
.pres-split__panel .pres-body { color: var(--pres-ink-soft); }

.pres-split__media {
  position: relative;
  min-height: 100%;
}
.pres-split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 1024px) {
  .pres-split { min-height: 75vh; }
  .pres-split__panel { padding: 48px 40px; }
}

@media (max-width: 767px) {
  .pres-split {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .pres-split__media {
    order: -1;
    min-height: 42vh;
  }
  .pres-split__panel {
    margin-right: 0;
    padding: var(--pres-pad-y-mobile) 6vw;
  }
  .pres-split__panel::before {
    clip-path: none;
    filter: none;
    background: var(--pres-off-white);
  }
  .pres-split__panel::after {
    display: none;
  }
  .pres-split__panel-inner { max-width: none; }
}

/* =====================================================================
   PHOTO-DODGE — text sits to one side of a full-bleed photo (straight
   edge, no clip-path), positioned to clear a subject in the frame
   instead of sitting centered over them. Add alongside
   .pres-section--image (and usually .pres-section--hero) the same way
   slide 1 is built, just with the text pushed to one side.

   Desktop only: on mobile there's rarely enough width to reliably
   dodge a subject once the photo crops in tighter, so mobile falls
   back to the same centered/top-bottom treatment slide 1 uses.
   ===================================================================== */
.pres-photo-dodge .pres-section__inner {
  margin-left: auto;
  margin-right: 0;
  text-align: left;
  max-width: 460px;
}
.pres-photo-dodge::before {
  background: linear-gradient(90deg,
    rgba(11, 37, 69, 0) 0%,
    rgba(11, 37, 69, 0.10) 38%,
    rgba(11, 37, 69, 0.58) 64%,
    rgba(11, 37, 69, 0.76) 100%);
}

@media (max-width: 767px) {
  .pres-photo-dodge .pres-section__inner {
    margin: 0 auto;
    text-align: center;
    max-width: 820px;
  }
  .pres-photo-dodge::before {
    background: linear-gradient(180deg,
      rgba(11, 37, 69, 0.30) 0%,
      rgba(11, 37, 69, 0.48) 45%,
      rgba(11, 37, 69, 0.70) 100%);
  }
}

/* =====================================================================
   SPLIT PANEL — PLAIN (straight edge)
   Same idea as .pres-split (text panel beside a full-bleed photo) but
   with a clean straight edge instead of the torn effect — for slides
   whose panel holds structured content like a table, where a jagged
   edge would fight the table's own straight lines. Wider text column
   than .pres-split since a table needs more breathing room than a
   couple of lines of headline text.
   ===================================================================== */
.pres-split-plain {
  display: grid;
  grid-template-columns: minmax(340px, 54%) 1fr;
  align-items: stretch;
  padding: 0;
  min-height: 85vh;
}
.pres-split-plain__panel {
  background: var(--pres-off-white);
  color: var(--pres-ink);
  display: flex;
  align-items: center;
  padding: 64px 5vw;
}
.pres-split-plain__panel-inner {
  width: 100%;
  max-width: 640px;
}
.pres-split-plain__panel .pres-title {
  font-size: clamp(26px, 2.8vw, 36px);
  margin-bottom: 28px;
}
.pres-split-plain__media {
  position: relative;
  min-height: 100%;
}
.pres-split-plain__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Use on .pres-split-plain__media when the image is a map/diagram/chart
   where every edge matters (nothing OK to crop) — letterboxes instead
   of cropping, unlike the default object-fit:cover behavior above. */
.pres-split-plain__media--contain {
  background: var(--pres-off-white);
  display: flex;
  align-items: center;
}
.pres-split-plain__media--contain img {
  height: auto;
  object-fit: contain;
}

@media (max-width: 1024px) {
  .pres-split-plain { min-height: 0; }
  .pres-split-plain__panel { padding: 48px 40px; }
  .pres-split-plain__media { min-height: 40vh; }
}

@media (max-width: 767px) {
  .pres-split-plain {
    grid-template-columns: 1fr;
  }
  .pres-split-plain__panel {
    padding: var(--pres-pad-y-mobile) 6vw;
  }
  .pres-split-plain__media {
    min-height: 34vh;
  }
}

/* -------------------------------------------------------------------
   DATA TABLE — for need/solution, spec, or comparison-style slides.
   ------------------------------------------------------------------- */
.pres-table-wrap {
  border-radius: var(--pres-radius);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(11, 37, 69, 0.08);
  border: 1px solid rgba(11, 37, 69, 0.08);
}
.pres-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--pres-paper);
}
.pres-table thead th {
  background: var(--pres-navy);
  color: var(--pres-cloud);
  text-align: left;
  font-family: var(--pres-font-head);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 14px 18px;
}
.pres-table tbody td {
  padding: 14px 18px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--pres-ink);
  border-bottom: 1px solid rgba(11, 37, 69, 0.1);
  vertical-align: top;
}
.pres-table tbody tr:last-child td {
  border-bottom: none;
}
.pres-table tbody tr:nth-child(odd) td {
  background: rgba(11, 37, 69, 0.03);
}
.pres-table tbody td:first-child {
  font-weight: 600;
  border-right: 1px solid rgba(11, 37, 69, 0.08);
}

@media (max-width: 767px) {
  .pres-table thead th { padding: 11px 14px; font-size: 12px; }
  .pres-table tbody td { padding: 11px 14px; font-size: 14px; }
}

/* =====================================================================
   DECORATIVE FLOURISH — for plain content slides (title + chart/table
   + text) that read as flat/stark without a photo to carry visual
   interest. Two small, on-theme touches instead of trying to recreate
   PowerPoint's decorative brush strokes: a short accent rule under
   the title, and a set of faint radio-wave rings in the corner —
   literally on-theme for a ham radio site, rather than a generic
   swoosh. Both are pure CSS, no image asset.
   ===================================================================== */

/* Short amber rule under a title — a small anchor so the heading
   doesn't just float alone at the top of a plain white/light section. */
.pres-title--rule {
  position: relative;
  padding-bottom: 16px;
}
.pres-title--rule::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 4px;
  border-radius: 2px;
  background: var(--pres-amber);
}

/* Faint concentric "signal" rings in a corner of the section — evokes
   a radio broadcasting outward, which fits the subject matter better
   than an arbitrary decorative shape would. Very low opacity so it
   reads as texture, not a graphic competing with the real content. */
.pres-decor-waves {
  position: relative;
  overflow: hidden;
}
.pres-decor-waves::before {
  content: "";
  position: absolute;
  top: -180px;
  right: -180px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle at center,
    transparent 0px, transparent 26px,
    rgba(242, 160, 61, 0.16) 26px, rgba(242, 160, 61, 0.16) 29px);
  -webkit-mask-image: radial-gradient(circle at center, #000 55%, transparent 78%);
          mask-image: radial-gradient(circle at center, #000 55%, transparent 78%);
  pointer-events: none;
  z-index: 0;
}
.pres-decor-waves .pres-section__inner {
  position: relative;
  z-index: 1;
}

@media (max-width: 767px) {
  .pres-decor-waves::before {
    width: 340px;
    height: 340px;
    top: -120px;
    right: -120px;
  }
}

/* Closing/"key takeaway" line — a single emphasized sentence set off
   from the body copy above it with a thin rule, instead of a full
   callout box (which reads as too heavy for just one sentence). */
.pres-takeaway {
  font-style: italic;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(11, 37, 69, 0.12);
  color: var(--pres-ink-soft);
}

/* Photo credit when used inside a straight-edge split media column
   (rather than a full hero photo section) — same look, but needs its
   own text-shadow since it isn't inside .pres-section--image. */
.pres-split-plain__media .pres-photo-credit,
.pres-split__media .pres-photo-credit {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* =====================================================================
   COMPARISON — two diagrams side by side (e.g. System A vs System B).
   Stacks to full width on mobile instead of shrinking side by side,
   since a dense infographic squeezed into half a phone-width column
   becomes unreadable — full width per diagram, one after another,
   keeps the labels legible.
   ===================================================================== */
.pres-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}
.pres-compare img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--pres-radius);
  box-shadow: 0 10px 30px rgba(11, 37, 69, 0.08);
}
.pres-compare + .pres-compare {
  margin-top: 20px;
}

@media (max-width: 767px) {
  .pres-compare {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* =====================================================================
   TITLE + TABLE LAYOUT — a narrow title column beside a wider table,
   the reverse proportion of the usual text+media grid.
   ===================================================================== */
.pres-grid--title-table {
  grid-template-columns: 0.62fr 1fr;
  align-items: start;
  gap: 56px;
}
@media (max-width: 1024px) {
  .pres-grid--title-table { grid-template-columns: 1fr; }
}

/* Left accent bar beside a title, as an alternative to the underline
   rule — a small flag/tab marker instead of a full-width divider. */
.pres-title--tab {
  border-left: 4px solid var(--pres-amber);
  padding-left: 20px;
}

/* Plain thin divider line, e.g. under a title column. */
.pres-divider {
  border: 0;
  border-top: 1px solid rgba(11, 37, 69, 0.12);
  margin: 20px 0 0;
}

/* Large, faint circle bleeding off a corner — a quieter alternative
   to the radio-wave rings, for slides that want just a touch of
   depth behind a title without competing with dense content
   (like a table) elsewhere in the section. */
.pres-decor-circle {
  position: relative;
  overflow: hidden;
}
.pres-decor-circle::before {
  content: "";
  position: absolute;
  top: -260px;
  left: -260px;
  width: 640px;
  height: 640px;
  border-radius: 50%;
  border: 1px solid rgba(11, 37, 69, 0.1);
  pointer-events: none;
  z-index: 0;
}
.pres-decor-circle .pres-section__inner {
  position: relative;
  z-index: 1;
}
@media (max-width: 767px) {
  .pres-decor-circle::before {
    width: 420px;
    height: 420px;
    top: -200px;
    left: -200px;
  }
}

/* -------------------------------------------------------------------
   COMPARISON TABLE — like .pres-table, but with an icon column and
   two colored product-name column headers instead of one filled
   navy header bar. The two brand colors are scoped to this table
   variant only (not added to the shared palette) since they exist
   specifically to tell the two compared products apart at a glance.
   ------------------------------------------------------------------- */
.pres-table--compare {
  border-collapse: collapse;
  width: 100%;
  background: var(--pres-paper);
}
.pres-table--compare th,
.pres-table--compare td {
  padding: 16px 18px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(11, 37, 69, 0.1);
}
.pres-table--compare thead th {
  font-family: var(--pres-font-head);
  font-weight: 700;
  font-size: 19px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(11, 37, 69, 0.14);
}
.pres-table--compare thead th.pres-table--mc { color: #1f9d55; }
.pres-table--compare thead th.pres-table--mt { color: #2f6fed; }
.pres-table--compare tbody td { color: var(--pres-ink); font-size: 15px; line-height: 1.5; }
.pres-table--compare tbody tr:last-child td { border-bottom: none; }
.pres-table--compare tbody td strong {
  font-family: var(--pres-font-head);
  font-weight: 600;
  font-size: 15px;
}
.pres-table--compare .pres-table__icon {
  width: 40px;
  color: var(--pres-navy);
}
.pres-table--compare .pres-table__icon svg {
  width: 22px;
  height: 22px;
  display: block;
}
.pres-table--compare th:nth-child(2),
.pres-table--compare td:nth-child(2) {
  width: 150px;
}

/* Below ~640px, a 4-column table has no room to breathe — text
   truncates and forces horizontal scrolling either way. Instead,
   reflow each row into a small card: icon + category on top, then
   the MeshCore and Meshtastic values stacked underneath with inline
   labels, so nothing gets cut off and there's no sideways scrolling. */
@media (max-width: 640px) {
  .pres-table--compare thead { display: none; }
  .pres-table--compare tbody,
  .pres-table--compare tr { display: block; width: 100%; }
  .pres-table--compare tr {
    display: grid;
    grid-template-columns: 26px 1fr;
    row-gap: 6px;
    column-gap: 10px;
    padding: 16px 4px;
    border-bottom: 1px solid rgba(11, 37, 69, 0.1);
  }
  .pres-table--compare td {
    display: block;
    width: auto;
    padding: 0;
    border-bottom: none;
    font-size: 14px;
  }
  .pres-table--compare .pres-table__icon { grid-column: 1; grid-row: 1; width: auto; }
  .pres-table--compare .pres-table__icon svg { width: 18px; height: 18px; }
  .pres-table--compare td:nth-child(2) { grid-column: 2; grid-row: 1; width: auto; font-size: 15px; }
  .pres-table--compare td:nth-child(3) { grid-column: 2; grid-row: 2; }
  .pres-table--compare td:nth-child(4) { grid-column: 2; grid-row: 3; }
  .pres-table--compare td:nth-child(3)::before {
    content: "MeshCore: ";
    font-weight: 600;
    color: #1f9d55;
  }
  .pres-table--compare td:nth-child(4)::before {
    content: "Meshtastic: ";
    font-weight: 600;
    color: #2f6fed;
  }
}

/* =====================================================================
   PLAIN IMAGE HERO — full-bleed background image with NO darkening
   overlay, for content where the image itself needs to stay fully
   legible (a map, a screenshot, a chart) rather than a mood photo.
   Title sits in a translucent white "chip" instead of relying on a
   gradient + text-shadow, since a dark overlay would fight the map's
   own colors and hurt readability of the map data.
   ===================================================================== */
.pres-section--plain-image {
  position: relative;
  width: 100%;
  min-height: 90vh;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--pres-pad-y-desktop) var(--pres-pad-x);
  box-sizing: border-box;
}
.pres-title-chip {
  display: inline-block;
  background: rgba(255, 255, 255, 0.85);
  padding: 22px 32px;
  border-radius: var(--pres-radius);
  box-shadow: 0 14px 34px rgba(11, 37, 69, 0.18);
  max-width: 90%;
}
.pres-title-chip .pres-title {
  margin: 0;
  color: var(--pres-ink);
}
.pres-map-source {
  position: absolute;
  right: var(--pres-pad-x);
  bottom: 24px;
  z-index: 2;
  background: rgba(255, 255, 255, 0.85);
  padding: 8px 16px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(11, 37, 69, 0.16);
  font-size: 13px;
  color: var(--pres-ink);
}
.pres-map-source a {
  font-weight: 600;
  color: var(--pres-navy);
  text-decoration: none;
  border-bottom: 1px solid rgba(11, 37, 69, 0.35);
}
.pres-map-source a:hover {
  border-bottom-color: var(--pres-navy);
}

@media (max-width: 1024px) {
  .pres-section--plain-image {
    min-height: 70vh;
    padding: var(--pres-pad-y-tablet) var(--pres-pad-x);
  }
}
@media (max-width: 767px) {
  .pres-section--plain-image {
    min-height: 55vh;
    padding: var(--pres-pad-y-mobile) 6vw;
  }
  .pres-title-chip {
    padding: 16px 20px;
  }
  .pres-map-source {
    right: 6vw;
    bottom: 16px;
    font-size: 12px;
    padding: 7px 12px;
  }
}

/* -------------------------------------------------------------------
   MAP LEGEND — for splitting a map key off into its own readable
   panel instead of leaving it as tiny baked-in text (slide 10).
   Pair with .pres-split-plain / .pres-split-plain__panel-inner.
   ------------------------------------------------------------------- */
.pres-legend-heading {
  font-family: var(--pres-font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pres-navy);
  margin: 0 0 14px;
}
.pres-legend-heading:not(:first-child) {
  margin-top: 30px;
}
.pres-legend-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pres-legend-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  color: var(--pres-ink);
}
.pres-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: none;
}
.pres-legend-line {
  width: 30px;
  height: 4px;
  border-radius: 2px;
  flex: none;
}
.pres-legend-line--dashed {
  height: 0;
  border-top: 3px dashed;
  background: none !important;
}
.pres-legend-note {
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(11, 37, 69, 0.12);
  font-size: 14px;
  color: var(--pres-ink-soft);
  font-style: italic;
}
@media (max-width: 767px) {
  .pres-legend-list { gap: 10px; }
  .pres-legend-list li { font-size: 15px; }
}

/* -------------------------------------------------------------------
   GLOSSARY — icon + term + definition cards, for vocabulary/reference
   infographics that need to reflow instead of shrinking to unreadable
   size on mobile (slide 12).
   ------------------------------------------------------------------- */
.pres-glossary {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 36px;
}
@media (min-width: 900px) {
  .pres-glossary { grid-template-columns: 1fr 1fr; }
}
.pres-glossary__item {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--pres-paper);
  border-radius: var(--pres-radius);
  padding: 22px 24px;
  box-shadow: 0 8px 22px rgba(11, 37, 69, 0.06);
  border: 1px solid rgba(11, 37, 69, 0.07);
}
.pres-glossary__icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--pres-off-white);
  color: var(--pres-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.pres-glossary__icon svg {
  width: 24px;
  height: 24px;
}
.pres-glossary__term {
  font-family: var(--pres-font-head);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pres-navy);
  margin: 4px 0 8px;
}
.pres-glossary__def {
  margin: 0;
  color: var(--pres-ink-soft);
  font-size: 15px;
  line-height: 1.55;
}
.pres-glossary-key {
  margin-top: 28px;
  background: var(--pres-navy);
  color: var(--pres-cloud);
  border-radius: var(--pres-radius);
  padding: 20px 26px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 15px;
  line-height: 1.5;
}
.pres-glossary-key svg {
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--pres-amber);
}
.pres-glossary-key strong {
  color: var(--pres-amber);
}
@media (max-width: 767px) {
  .pres-glossary { margin-top: 28px; gap: 14px; }
  .pres-glossary__item { padding: 18px 20px; gap: 14px; }
  .pres-glossary__icon { width: 44px; height: 44px; }
  .pres-glossary__icon svg { width: 20px; height: 20px; }
  .pres-glossary-key { padding: 16px 20px; font-size: 14px; }
}

/* -------------------------------------------------------------------
   LEFT-OF-BOOM / RIGHT-OF-BOOM COMPARISON — a dense two-column
   before/after infographic rebuilt as real text (slide 13). Two
   "phase" cards (left = navy, right = amber), each a stack of
   labeled layers; the two layers most relevant to tonight's talk
   (Mesh, Regional/Ham) get a highlighted outline. Doctrine
   principles reuse the same two-column pattern underneath.
   ------------------------------------------------------------------- */
.pres-boom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  margin-top: 36px;
}
.pres-boom__col {
  border-radius: var(--pres-radius);
  overflow: hidden;
  border: 1px solid rgba(11, 37, 69, 0.08);
  box-shadow: 0 10px 30px rgba(11, 37, 69, 0.06);
  background: var(--pres-paper);
}
.pres-boom__header {
  padding: 16px 22px;
  color: #fff;
}
.pres-boom__col--left .pres-boom__header { background: var(--pres-navy); }
.pres-boom__col--right .pres-boom__header { background: var(--pres-amber-dark); }
.pres-boom__header-title {
  font-family: var(--pres-font-head);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0;
}
.pres-boom__header-sub {
  font-size: 13px;
  opacity: 0.88;
  margin: 3px 0 0;
}
.pres-boom__mission {
  padding: 16px 22px;
  font-size: 14px;
  font-style: italic;
  color: var(--pres-ink-soft);
  border-bottom: 1px solid rgba(11, 37, 69, 0.08);
}
.pres-boom__mission strong { font-style: normal; color: var(--pres-ink); }
.pres-boom__layer {
  padding: 18px 22px;
  border-bottom: 1px solid rgba(11, 37, 69, 0.08);
}
.pres-boom__col .pres-boom__layer:last-child { border-bottom: none; }
.pres-boom__layer-title {
  font-family: var(--pres-font-head);
  font-weight: 700;
  font-size: 15px;
  color: var(--pres-navy);
  margin: 0 0 10px;
}
.pres-boom__col--right .pres-boom__layer-title { color: var(--pres-amber-dark); }
.pres-boom__layer ul {
  margin: 0;
  padding-left: 20px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--pres-ink);
}
.pres-boom__layer ul li { margin-bottom: 6px; }
.pres-boom__layer ul li:last-child { margin-bottom: 0; }
.pres-boom__layer--highlight {
  margin: 6px;
  border: 1.5px solid var(--pres-amber);
  border-radius: var(--pres-radius);
  background: rgba(242, 160, 61, 0.08);
}
.pres-boom__col .pres-boom__layer--highlight:last-child { border-bottom: 1.5px solid var(--pres-amber); }

.pres-boom-doctrine {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  margin-top: 32px;
}
.pres-boom-doctrine__title {
  font-family: var(--pres-font-head);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--pres-navy);
  color: var(--pres-navy);
}
.pres-boom-doctrine__col--right .pres-boom-doctrine__title {
  border-bottom-color: var(--pres-amber-dark);
  color: var(--pres-amber-dark);
}
.pres-boom-doctrine ul {
  margin: 0;
  padding-left: 20px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--pres-ink);
}
.pres-boom-doctrine li { margin-bottom: 10px; }
.pres-boom-doctrine li:last-child { margin-bottom: 0; }

.pres-boom-citation {
  margin-top: 28px;
  font-size: 13px;
  font-style: italic;
  color: var(--pres-ink-soft);
  text-align: right;
}

@media (max-width: 1024px) {
  .pres-boom, .pres-boom-doctrine { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .pres-boom { gap: 24px; margin-top: 28px; }
  .pres-boom-doctrine { gap: 28px; margin-top: 28px; }
  .pres-boom__header { padding: 14px 18px; }
  .pres-boom__mission, .pres-boom__layer { padding: 15px 18px; }
  .pres-boom__layer ul, .pres-boom-doctrine ul { font-size: 14px; }
}

/* -------------------------------------------------------------------
   PHONE SCREENSHOT GALLERY — a row of app screenshots that reflows
   instead of shrinking to unreadable size on mobile (slide 15).
   ------------------------------------------------------------------- */
.pres-phone-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 36px;
}
.pres-phone-gallery__item { text-align: center; }
.pres-phone-gallery__item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(11, 37, 69, 0.16);
}
.pres-phone-gallery__caption {
  margin: 12px 0 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--pres-ink-soft);
}
@media (max-width: 1024px) {
  .pres-phone-gallery { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
}
@media (max-width: 560px) {
  .pres-phone-gallery {
    grid-template-columns: minmax(0, 280px);
    justify-content: center;
    gap: 24px;
  }
}
/* ---------- Video embed (for the "Watch on YouTube" card, which reuses
   .pres-audio/.pres-audio__eyebrow/.pres-audio__title) ---------- */
.pres-video-embed{
  position:relative;
  width:100%;
  height:0;
  padding-bottom:56.25%; /* 16:9 */
  overflow:hidden;
  border-radius:8px;
  margin-top:16px;
}
.pres-video-embed iframe{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border:0;
}/* End custom CSS */