/* ============================================================================
   LAW ALL-DAY — DECK & PAMPHLET THEME
   ----------------------------------------------------------------------------
   A self-contained, offline-safe stylesheet for marketing slide decks and
   one-page pamphlets. No external fonts, no CDNs, no JS dependency to render.
   Premium plaintiff-law-firm look: editorial, parchment-and-oxblood, restrained
   brass accents, lots of whitespace.

   Brand tokens lifted verbatim from the firm dashboard + login wordmark:
     oxblood  #6b1d2c   brass/gold #a37b3a   ink #1a1815
     muted    #7a736a   cream      #faf7f1   hairline #e8e5dd

   ORGANIZATION
     1.  Design tokens (CSS custom properties)
     2.  Reset + base
     3.  Typography (serif display + system sans)
     4.  Deck shell + scroll-snap slides
     5.  Slide layouts  (.slide--cover / --section / --content / --features
                          / --split / --quote / --cta)
     6.  Components      (.eyebrow .wordmark .feature-card .pill/.chip
                          .brand-bar .accent-rule .num-list .kicker .btn)
     7.  Slide-progress / nav affordance (pure CSS)
     8.  Print styles    (one .slide per page)
     9.  Responsive      (laptop / tablet / phone)

   HOW TO COMPOSE A SLIDE (see _design_notes.md for the full contract):
     <section class="slide slide--features"> … </section>
   ========================================================================== */


/* ============================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
  color-scheme: light;

  /* --- Core brand palette (locked to the firm dashboard / login) --- */
  --oxblood:   #6b1d2c;   /* primary brand — headlines accents, CTA fills */
  --oxblood-2: #8a2a3d;   /* lighter oxblood — hovers, gradients          */
  --oxblood-3: #581824;   /* deeper oxblood — pressed / dark gradient stop */
  --brass:     #a37b3a;   /* aged brass — the wordmark dot, eyebrows, rule */
  --brass-2:   #c39a52;   /* lifted brass — highlights on dark grounds     */
  --ink:       #1a1815;   /* near-black warm ink — body + display text     */
  --ink-2:     #3f3a33;   /* secondary ink — sub-heads, dense body         */
  --muted:     #7a736a;   /* muted taupe — captions, eyebrow-on-light      */
  --muted-2:   #a09a90;   /* faint taupe — meta, disabled                  */
  --cream:     #faf7f1;   /* parchment cream — page + card ground          */
  --rule:      #e8e5dd;   /* hairline rule — borders + dividers            */

  /* --- Derived tints / shades (kept here so the deck stays self-contained) */
  --parchment-hi:  #f6f1e7;  /* top of the parchment gradient        */
  --parchment-lo:  #ece4d6;  /* bottom of the parchment gradient      */
  --surface:       #ffffff;  /* card / panel ground                   */
  --surface-2:     #fbf8f2;  /* faint warm panel (alt cards)          */
  --brass-tint:    #f3ead9;  /* brass at ~10% — chip/code-chip ground */
  --oxblood-tint:  #f6e6e8;  /* oxblood at ~10% — callout ground      */
  --hairline-soft: #f0ede5;  /* even softer rule for inside cards     */
  --ink-on-brand:  #fbf6ee;  /* warm off-white text on oxblood/dark   */

  /* --- Typography stacks (NO external fonts — all OS-resident) --- */
  --serif: "Iowan Old Style", "Apple Garamond", "Palatino Linotype",
           "Palatino", Georgia, "Times New Roman", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter",
           system-ui, Roboto, Helvetica, Arial, sans-serif;
  --mono:  ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* --- Elevation + shape --- */
  --shadow-sm: 0 1px 2px rgba(20,15,10,0.05);
  --shadow-md: 0 1px 2px rgba(20,15,10,0.04), 0 8px 26px rgba(20,15,10,0.06);
  --shadow-lg: 0 1px 2px rgba(20,15,10,0.04), 0 24px 70px rgba(20,15,10,0.12);
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 20px;

  /* --- Rhythm --- */
  --slide-pad-y: clamp(48px, 7vh, 96px);
  --slide-pad-x: clamp(28px, 7vw, 120px);
  --measure: 64ch;            /* comfortable reading measure for body copy  */
}


/* ============================================================================
   2. RESET + BASE
   ========================================================================== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html {
  /* Vertical scroll-snap container for the deck.                            */
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga";
}

a { color: var(--oxblood); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg { max-width: 100%; height: auto; display: block; }

::selection { background: var(--brass-tint); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}


/* ============================================================================
   3. TYPOGRAPHY
   ----------------------------------------------------------------------------
   Serif display for headings + wordmark; clean system-sans for body.
   ========================================================================== */
h1, h2, h3, h4, .display {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0 0 0.4em;
  text-wrap: balance;
}

h1, .h1 { font-size: clamp(40px, 6vw, 76px); line-height: 1.04; }
h2, .h2 { font-size: clamp(30px, 4vw, 52px); line-height: 1.1;  }
h3, .h3 { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; }
h4, .h4 { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.3; }

p { margin: 0 0 1em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: clamp(18px, 1.8vw, 23px);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: var(--measure);
}

.fine {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
  letter-spacing: 0.01em;
}

strong, b { font-weight: 650; color: var(--ink); }
em { font-style: italic; }


/* ============================================================================
   4. DECK SHELL + SCROLL-SNAP SLIDES
   ----------------------------------------------------------------------------
   .deck wraps the whole presentation. Each .slide is a full-viewport panel
   that snaps into place on scroll, with a subtle parchment ground.
   ========================================================================== */
.deck {
  position: relative;
  width: 100%;
}

.slide {
  position: relative;
  min-height: 100vh;
  /* dvh keeps mobile browser chrome from clipping the last line */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--slide-pad-y) var(--slide-pad-x);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  /* Subtle parchment ground — the brand background gradient. */
  background:
    radial-gradient(120% 80% at 88% 8%, rgba(163,123,58,0.05), transparent 60%),
    linear-gradient(160deg, var(--parchment-hi) 0%, var(--parchment-lo) 100%);
}

/* Alternating "paper" slides read white for editorial contrast.            */
.slide--paper {
  background:
    radial-gradient(100% 60% at 50% -10%, var(--surface-2), transparent 70%),
    var(--surface);
}

/* Inner content wrapper — caps the editorial line length + centers it.     */
.slide__inner {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}
.slide__inner--wide { max-width: 1280px; }
.slide__inner--narrow { max-width: 760px; }

/* A faint top hairline + slide-number affordance any slide can opt into.   */
.slide__index {
  position: absolute;
  top: clamp(20px, 4vh, 40px);
  right: var(--slide-pad-x);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted-2);
}


/* ============================================================================
   5. SLIDE LAYOUTS
   ========================================================================== */

/* --- 5a. Cover ----------------------------------------------------------- */
.slide--cover { text-align: left; }
.slide--cover .slide__inner { max-width: 1000px; }
.slide--cover .wordmark {
  font-size: clamp(46px, 8vw, 104px);
  line-height: 1;
  margin-bottom: 0.18em;
}
.slide--cover .tagline {
  font-family: var(--serif);
  font-size: clamp(20px, 2.6vw, 34px);
  font-style: italic;
  color: var(--ink-2);
  margin: 0.2em 0 0.9em;
  max-width: 24ch;
  text-wrap: balance;
}
.slide--cover .cover-meta {
  margin-top: clamp(28px, 5vh, 56px);
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  color: var(--muted);
  font-size: 13.5px;
  letter-spacing: 0.02em;
}

/* --- 5b. Section divider ------------------------------------------------- */
.slide--section {
  /* Dark oxblood ground — a confident chapter break. */
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(163,123,58,0.16), transparent 55%),
    linear-gradient(155deg, var(--oxblood) 0%, var(--oxblood-3) 100%);
  color: var(--ink-on-brand);
}
.slide--section h1,
.slide--section h2,
.slide--section .display { color: var(--cream); }
.slide--section .eyebrow { color: var(--brass-2); }
.slide--section .lead { color: rgba(250,247,241,0.82); }
.slide--section .accent-rule { background: linear-gradient(90deg, var(--brass-2), transparent); }
.slide--section .section-no {
  font-family: var(--serif);
  font-size: clamp(60px, 12vw, 150px);
  line-height: 0.9;
  color: rgba(250,247,241,0.14);
  margin: 0 0 0.1em;
  font-weight: 500;
}

/* --- 5c. Content (headline + body) --------------------------------------- */
.slide--content .eyebrow { margin-bottom: 14px; }
.slide--content h2 { max-width: 18ch; }
.slide--content .lead { margin-top: 8px; }
.slide--content .content-body { margin-top: clamp(20px, 3vh, 36px); }

/* --- 5d. Features (responsive card grid) --------------------------------- */
.slide--features .feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(16px, 2vw, 26px);
  margin-top: clamp(26px, 4vh, 48px);
}
/* Pin to exactly 3 across on roomy viewports for a tidy editorial rhythm.  */
@media (min-width: 1080px) {
  .slide--features .feature-grid { grid-template-columns: repeat(3, 1fr); }
  .slide--features .feature-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .slide--features .feature-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* --- 5e. Split (two column) ---------------------------------------------- */
.slide--split .split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
}
.slide--split .split--narrow-left { grid-template-columns: 0.85fr 1.15fr; }
.slide--split .split--narrow-right { grid-template-columns: 1.15fr 0.85fr; }
.slide--split .split__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--surface);
  border: 1px solid var(--rule);
}

/* --- 5f. Quote / callout ------------------------------------------------- */
.slide--quote { text-align: left; }
.slide--quote .slide__inner { max-width: 880px; }
.slide--quote blockquote {
  margin: 0;
  position: relative;
  padding-left: clamp(28px, 4vw, 56px);
}
.slide--quote blockquote::before {
  content: "\201C";                 /* a true typographic open-quote */
  position: absolute;
  left: -0.06em;
  top: -0.18em;
  font-family: var(--serif);
  font-size: clamp(90px, 14vw, 180px);
  line-height: 1;
  color: var(--brass);
  opacity: 0.5;
}
.slide--quote .quote-text {
  font-family: var(--serif);
  font-size: clamp(26px, 3.4vw, 46px);
  line-height: 1.22;
  color: var(--ink);
  margin: 0 0 0.7em;
  text-wrap: balance;
}
.slide--quote .quote-cite {
  font-size: 15px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.slide--quote .quote-cite strong { color: var(--oxblood); font-weight: 600; }

/* --- 5g. CTA ------------------------------------------------------------- */
.slide--cta {
  text-align: center;
  background:
    radial-gradient(110% 70% at 50% 0%, rgba(163,123,58,0.10), transparent 60%),
    linear-gradient(160deg, var(--parchment-hi) 0%, var(--parchment-lo) 100%);
}
.slide--cta .slide__inner { max-width: 760px; }
.slide--cta p { margin-left: auto; margin-right: auto; }
.slide--cta .cta-actions {
  margin-top: clamp(24px, 4vh, 40px);
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.slide--cta .cta-foot {
  margin-top: clamp(28px, 5vh, 48px);
  color: var(--muted);
  font-size: 14px;
}


/* ============================================================================
   6. COMPONENTS
   ========================================================================== */

/* --- 6a. Eyebrow label --------------------------------------------------- */
.eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 12px;
}

/* --- 6b. Wordmark (with brass middle-dot) — lifted from login.html -------- */
.wordmark {
  font-family: var(--serif);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
}
.wordmark .dot { color: var(--brass); }      /* the brass middle-dot */
/* Small inline lockup for footers / nav. */
.wordmark--sm { font-size: 20px; }

/* --- 6c. Accent rule (brass fade) ---------------------------------------- */
.accent-rule {
  width: 64px;
  height: 3px;
  border: 0;
  margin: 0 0 22px;
  background: linear-gradient(90deg, var(--brass), transparent);
  border-radius: 2px;
}
.accent-rule--center { margin-left: auto; margin-right: auto; }

/* --- 6d. Kicker (big stat) ----------------------------------------------- */
.kicker {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kicker .kicker-value {
  font-family: var(--serif);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--oxblood);
  font-variant-numeric: tabular-nums;
}
.kicker .kicker-label {
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.kicker-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 5vw, 64px);
  margin-top: clamp(20px, 3vh, 36px);
}

/* --- 6e. Feature card ---------------------------------------------------- */
.feature-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 26px 24px 22px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.feature-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--border-strong, #d6d3c8);
}
/* Icon slot — a square brass-tinted chip the assembler drops an SVG/glyph into */
.feature-card .feature-icon {
  width: 46px;
  height: 46px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brass-tint);
  color: var(--oxblood);
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 16px;
  border: 1px solid rgba(163,123,58,0.22);
}
.feature-card .feature-title {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 8px;
}
.feature-card .feature-blurb {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 16px;
}
/* "Observes" code-chip tray pinned to the card foot. */
.feature-card .feature-observes {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--hairline-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.feature-card .feature-observes .observes-label {
  width: 100%;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 2px;
}

/* --- 6f. Pills / chips --------------------------------------------------- */
.pill, .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  background: var(--surface-2);
  color: var(--ink-2);
  border: 1px solid var(--rule);
}
/* status variants */
.pill--brand, .chip--brand { background: var(--oxblood); color: var(--ink-on-brand); border-color: var(--oxblood); }
.pill--brass, .chip--brass { background: var(--brass-tint); color: var(--oxblood); border-color: rgba(163,123,58,0.30); }
.pill--muted, .chip--muted { background: var(--surface-2); color: var(--muted); }

/* Code chip — for citing legal codes / statutes (monospace, brass-tinted). */
.chip--code {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  background: var(--brass-tint);
  color: var(--oxblood-3);
  border: 1px solid rgba(163,123,58,0.30);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  font-weight: 500;
}
/* Roadmap / "coming soon" chip — quiet, dashed, taupe. */
.chip--soon {
  background: transparent;
  color: var(--muted);
  border: 1px dashed var(--muted-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.chip--soon::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brass);
}

/* --- 6g. Numbered list --------------------------------------------------- */
.num-list {
  list-style: none;
  counter-reset: nl;
  margin: clamp(18px, 3vh, 30px) 0 0;
  padding: 0;
  display: grid;
  gap: 18px;
}
.num-list > li {
  counter-increment: nl;
  position: relative;
  padding-left: 56px;
  max-width: var(--measure);
}
.num-list > li::before {
  content: counter(nl, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: -2px;
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
  color: var(--brass);
  line-height: 1;
  width: 40px;
}
.num-list .nl-title {
  font-family: var(--serif);
  font-size: 19px;
  color: var(--ink);
  margin: 0 0 3px;
}
.num-list .nl-body { font-size: 14.5px; color: var(--ink-2); margin: 0; }

/* --- 6h. Buttons --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 22px;
  border-radius: 10px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  border: 1px solid var(--border-strong, #d6d3c8);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: 0.15s;
  white-space: nowrap;
}
.btn:hover { background: var(--surface-2); border-color: var(--ink-2); text-decoration: none; }
.btn--primary {
  background: var(--oxblood);
  color: var(--ink-on-brand);
  border-color: var(--oxblood);
  box-shadow: 0 1px 0 rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.10);
}
.btn--primary:hover { background: var(--oxblood-2); border-color: var(--oxblood-2); }
.btn--brass {
  background: var(--brass);
  color: var(--ink);
  border-color: var(--brass);
}
.btn--brass:hover { background: var(--brass-2); border-color: var(--brass-2); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--oxblood); }
.btn--ghost:hover { background: var(--oxblood-tint); }
.btn .arrow { transition: transform 0.15s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* --- 6i. Callout box (inline, for use inside content slides) ------------- */
.callout {
  border-left: 3px solid var(--brass);
  background: var(--surface-2);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 18px 22px;
  margin: 22px 0;
  max-width: var(--measure);
}
.callout--brand { border-left-color: var(--oxblood); background: var(--oxblood-tint); }

/* --- 6j. Key/value rows (lifted from dashboard .kv) ---------------------- */
.kv-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline-soft);
  align-items: baseline;
}
.kv-row:last-child { border-bottom: 0; }
.kv-key { font-size: 12px; color: var(--muted); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.kv-val { font-size: 16px; color: var(--ink); }

/* --- 6k. Brand-bar footer ------------------------------------------------ */
.brand-bar {
  position: absolute;
  left: var(--slide-pad-x);
  right: var(--slide-pad-x);
  bottom: clamp(20px, 4vh, 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 12.5px;
  letter-spacing: 0.02em;
}
.brand-bar .wordmark { font-size: 16px; }
/* On dark section slides the bar inverts. */
.slide--section .brand-bar { border-top-color: rgba(250,247,241,0.18); color: rgba(250,247,241,0.6); }
.slide--section .brand-bar .wordmark { color: var(--cream); }


/* ============================================================================
   7. SLIDE-PROGRESS / NAV AFFORDANCE  (pure CSS, no JS required)
   ----------------------------------------------------------------------------
   Two options, both inline-friendly:
     (a) .deck-progress  — a thin fixed brass progress bar (animated via
         scroll-driven animation where supported; degrades to a static rail).
     (b) .deck-dots      — a fixed dot column; anchor links jump between
         slides. Mark the matching dot .is-active in markup, or rely on
         :target highlighting when slides carry ids.
   ========================================================================== */

/* (a) Scroll-progress bar ------------------------------------------------- */
.deck-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  z-index: 50;
  background: transparent;
  pointer-events: none;
}
.deck-progress > i {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--brass), var(--oxblood));
  animation: deck-progress-grow linear both;
  animation-timeline: scroll(root block);
}
@keyframes deck-progress-grow { to { transform: scaleX(1); } }
/* Browsers without scroll-timeline: show a quiet static brass seam instead. */
@supports not (animation-timeline: scroll()) {
  .deck-progress > i { transform: scaleX(1); opacity: 0.25; }
}

/* (b) Dot navigation ------------------------------------------------------ */
.deck-dots {
  position: fixed;
  right: clamp(14px, 2vw, 28px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.deck-dots a {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(122,115,106,0.30);
  border: 1px solid transparent;
  transition: 0.18s;
}
.deck-dots a:hover { background: var(--brass); transform: scale(1.2); }
.deck-dots a.is-active { background: var(--oxblood); border-color: var(--brass); }
@media (max-width: 820px) { .deck-dots { display: none; } }


/* ============================================================================
   8. PRINT STYLES — one .slide per page, clean PDF export
   ========================================================================== */
@media print {
  :root {
    /* Tighten the rhythm for paged output. */
    --slide-pad-y: 14mm;
    --slide-pad-x: 16mm;
  }
  @page { size: A4 landscape; margin: 0; }

  html { scroll-snap-type: none; background: #fff; }
  body { background: #fff; font-size: 12pt; }

  .deck-progress, .deck-dots { display: none !important; }

  .slide {
    min-height: auto;
    height: 100vh;                 /* fill the printed page                 */
    page-break-after: always;
    break-after: page;
    box-shadow: none;
    /* Force the parchment / oxblood grounds to actually print. */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .slide:last-child { page-break-after: auto; break-after: auto; }

  .feature-card, .slide--split .split__media { box-shadow: none; }
  a { color: var(--ink); text-decoration: none; }
}


/* ============================================================================
   9. RESPONSIVE — tablet + phone
   ========================================================================== */

/* Tablet --------------------------------------------------------------- */
@media (max-width: 900px) {
  .slide--split .split,
  .slide--split .split--narrow-left,
  .slide--split .split--narrow-right {
    grid-template-columns: 1fr;
    gap: clamp(20px, 5vw, 36px);
  }
  .slide--split .split__media { order: -1; }   /* media first on stack */
  .kv-row { grid-template-columns: 1fr; gap: 2px; padding: 10px 0; }
}

/* Phone ---------------------------------------------------------------- */
@media (max-width: 560px) {
  body { font-size: 15px; }
  .slide {
    /* let very tall content slides scroll within the snap panel */
    min-height: 100dvh;
    justify-content: flex-start;
    padding-top: clamp(56px, 12vh, 80px);
  }
  .slide--cover, .slide--section, .slide--cta { justify-content: center; }
  .slide__index { display: none; }
  .num-list > li { padding-left: 44px; }
  .num-list > li::before { font-size: 20px; }
  .feature-card { padding: 22px 20px 18px; }
  .brand-bar { position: static; margin-top: 32px; flex-wrap: wrap; }
  .cover-meta { flex-direction: column; gap: 6px; }
}