/*
 * onpack / packd — Mondelez pitchdeck
 * Reveal.js theme overrides. Matches marketing brand (blue refresh).
 * Palette: primary blue-700 + deep navy accent, to align with /for-brands and /how-it-works.
 */

/* Self-hosted static Inter weights. Variable-font Inter caused Chrome
   headless to rasterize each used weight into Type 3 sprite fonts during
   PDF export — which rendered with horizontal banding in macOS Preview.
   Individual static files embed cleanly as TrueType. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: block; src: url("/fonts/inter/Inter-Regular.woff2") format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: block; src: url("/fonts/inter/Inter-Medium.woff2") format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: block; src: url("/fonts/inter/Inter-SemiBold.woff2") format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: block; src: url("/fonts/inter/Inter-Bold.woff2") format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: block; src: url("/fonts/inter/Inter-ExtraBold.woff2") format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 900; font-display: block; src: url("/fonts/inter/Inter-Black.woff2") format('woff2'); }

:root {
  --op-ink: #0f172a;
  --op-ink-2: #1e293b;
  --op-muted: #475569;
  --op-muted-2: #64748b;
  --op-line: #e2e8f0;
  --op-bg: #ffffff;
  --op-bg-alt: #f8fafc;
  --op-primary: #1D4ED8;
  --op-primary-2: #2563EB;
  --op-primary-3: #3B82F6;
  --op-primary-soft: #dbeafe;
  --op-accent: #1E3A8A;
  --op-gold: #d7a93a;
  --op-silver: #b0b4bc;
  --op-bronze: #8e5f30;
  --op-ink-deep: #0b1020;
}

.pitchdeck-body {
  margin: 0;
  padding: 0;
  background: var(--op-bg);
  color: var(--op-ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-feature-settings: 'cv02','cv03','cv04','cv11';
  transition: background 320ms ease;
}

/* Full-viewport gradients driven by body classes (syncTitleClass in layout).
   Sections themselves are transparent so the gradient bleeds to the window edge. */
.pitchdeck-body.pd-on-title {
  background:
    radial-gradient(1400px 900px at 90% -10%, rgba(37,99,235,0.18), transparent 60%),
    radial-gradient(900px 600px at -5% 110%, rgba(30,58,138,0.12), transparent 65%),
    linear-gradient(180deg, #ffffff 0%, #fbfbff 100%) !important;
  background-attachment: fixed !important;
}
.pitchdeck-body.pd-on-dark {
  background:
    radial-gradient(1000px 700px at 100% 0%, rgba(30,58,138,0.35), transparent 60%),
    radial-gradient(1200px 800px at 0% 100%, rgba(29,78,216,0.42), transparent 60%),
    linear-gradient(180deg, #0b1020 0%, #0f1530 100%) !important;
  background-attachment: fixed !important;
}

.pitchdeck-body .reveal {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--op-ink);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.pitchdeck-body .reveal .slides {
  text-align: left;
}

/* Section = full slide. We paint the section so full-bleed gradients
   don't leave a hard-edged rectangle inside the slide area.
   NOTE: do NOT set `position` here — reveal.js already sets `position: absolute`
   on each section and relies on that for stacking. pseudo-elements inside
   still position against the section just fine. */
.pitchdeck-body .reveal .slides section {
  padding: 48px 72px;
  box-sizing: border-box;
  height: 100%;
  background: transparent;
  overflow: hidden;
}
/* Make reveal's inner stage transparent so the body gradient shows through.
   Do NOT target .reveal-viewport — that's the body, and body class rules
   below need to win there. */
.pitchdeck-body .reveal { background: transparent !important; }

.pitchdeck-body .reveal h1, .pitchdeck-body .reveal h2, .pitchdeck-body .reveal h3, .pitchdeck-body .reveal h4 {
  color: var(--op-ink);
  font-family: inherit;
  font-weight: 800;
  text-transform: none;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 0 0.4em;
}

.pitchdeck-body .reveal h1 { font-size: 3.4em; }
.pitchdeck-body .reveal h2 { font-size: 1.85em; line-height: 1.08; }
.pitchdeck-body .reveal h3 { font-size: 1.2em; font-weight: 700; }

.pitchdeck-body .reveal p { line-height: 1.5; margin: 0 0 0.6em; }
.pitchdeck-body .reveal strong { color: var(--op-ink); font-weight: 700; }
.pitchdeck-body .reveal em { font-style: normal; color: var(--op-primary); font-weight: 600; }

.pitchdeck-body .reveal a { color: var(--op-primary); text-decoration: none; }
.pitchdeck-body .reveal a:hover { color: var(--op-primary-2); text-decoration: underline; }

.pitchdeck-body .reveal ul, .pitchdeck-body .reveal ol { margin: 0.6em 0 0.6em 1.1em; }
.pitchdeck-body .reveal li { margin: 0.3em 0; line-height: 1.45; }

/* Reveal.js controls */
.pitchdeck-body .reveal .progress { color: var(--op-primary); height: 3px; }
.pitchdeck-body .reveal .controls { color: var(--op-primary); }
.pitchdeck-body .reveal .slide-number { color: var(--op-muted); background: transparent; font-family: inherit; font-size: 14px; }

/* --- Slide kinds ------------------------------------------------------- */

.pd-slide {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 100%;
  position: relative;
  z-index: 1;
}

.pd-tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--op-primary-soft);
  color: var(--op-primary);
  font-size: 0.55em;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.8em;
}
.pd-tag::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--op-primary);
  box-shadow: 0 0 0 3px rgba(29,78,216,0.18);
}

.pd-lede {
  font-size: 1em;
  color: var(--op-muted);
  max-width: 880px;
  line-height: 1.5;
}

/* ---- Title slides ------------------------------------------------------ */

/* Section backgrounds are now painted by body (full-viewport via pd-on-title body class).
   Decoration (dotted grid + orb) is on the body too so it bleeds past the slide area. */
.pitchdeck-body .reveal .slides section.pd-section-title { background: transparent; }

/* Full-viewport dotted grid decoration — only visible on title slides */
.pitchdeck-body.pd-on-title::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: radial-gradient(rgba(29,78,216,0.16) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(1400px 800px at 100% 0%, rgba(0,0,0,0.55), transparent 65%);
          mask-image: radial-gradient(1400px 800px at 100% 0%, rgba(0,0,0,0.55), transparent 65%);
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
}

/* Full-viewport blurred orb in the top-right corner */
.pitchdeck-body.pd-on-title::after {
  content: "";
  position: fixed;
  right: -180px; top: -140px;
  width: 640px; height: 640px;
  background:
    conic-gradient(from 180deg at 50% 50%, var(--op-primary) 0%, var(--op-accent) 55%, var(--op-primary) 100%);
  filter: blur(80px);
  opacity: 0.22;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.pd-title-slide {
  justify-content: space-between;
  padding-top: 8px;
  padding-bottom: 8px;
}

.pd-title-slide__brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-weight: 800;
  color: var(--op-primary);
  font-size: 1.35em;
  letter-spacing: -0.03em;
}
.pd-title-slide__logo {
  width: 1.6em;
  height: 1.6em;
  display: block;
  flex: 0 0 auto;
}

.pd-title-slide__title {
  font-size: 4.6em;
  line-height: 0.96;
  letter-spacing: -0.035em;
}

.pd-title-slide__title .accent {
  font-style: normal;
  background: linear-gradient(90deg, var(--op-primary), var(--op-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pd-title-slide__sub {
  font-size: 1em;
  color: var(--op-muted);
  max-width: 760px;
  margin-top: 1em;
}

.pd-title-slide__foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-size: 0.5em;
  color: var(--op-muted-2);
  letter-spacing: 0.02em;
}

/* ======================================================================
   MOBILE: the deck stops being a slide and becomes a document
   ======================================================================

   A 1280x800 canvas scaled to fit a 390px phone renders at 0.29, which put
   body copy at 7.8 effective pixels and each slide at 28% of the screen with
   610px of white under it. That is not a whitespace problem and it does not
   have a whitespace fix: filling the screen would only have produced three
   unreadable slides per screen instead of one. A 16:10 landscape slide has no
   honest way to fit a portrait phone.

   So below reveal's scroll-view threshold the scaling is switched off and the
   same sections flow as a normal responsive document: real font sizes, one
   column, art capped to the width it actually has. No second deck and no
   second set of markup — every rule here keys off the layout primitives the
   slides already use, so all five decks get it at once and a new slide built
   from the same primitives is mobile-ready without anybody remembering.

   Desktop is untouched: reveal only adds `reveal-scroll` below the threshold,
   so nothing in this block exists above it. */

/* ---- 1. Undo the canvas ---------------------------------------------- */
/* Reveal sizes and scales the slide from its own stylesheet (only `.slides`
   carries it inline), so these have to win explicitly. */
.pitchdeck-body.reveal-scroll .reveal .slides {
  width: 100% !important;
  height: auto !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
}
.pitchdeck-body.reveal-scroll .reveal .slides section {
  position: relative !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  transform: none !important;
  top: auto !important;
  left: auto !important;
  display: block !important;
  padding: 34px 22px !important;
}
/* Reveal's scroll page is a fixed 100vh with the slide absolutely placed
   inside it. The fixed height has to go — a flowing slide is whatever height
   its content is — but the page keeps a full screen as its MINIMUM, because a
   deck is still a deck. Without that, slides run to their content height and
   two of them share a screen: the tail of one and the headline of the next,
   which is what "overlapping" looks like even though nothing overlaps
   geometrically.
 
   So each slide gets at least a screen, centred in it, and the scroll snaps.
   `proximity` rather than `mandatory`: some slides are taller than the
   viewport — the dates slide is 1138px against 844 — and mandatory snapping
   fights a reader trying to reach the bottom of one. */
.pitchdeck-body.reveal-scroll .reveal .scroll-page-sticky,
.pitchdeck-body.reveal-scroll .reveal .scroll-page-content {
  height: auto !important;
  min-height: 0 !important;
  position: relative !important;
  top: auto !important;
}
.pitchdeck-body.reveal-scroll .reveal .scroll-page {
  height: auto !important;
  min-height: 100dvh !important;
  position: relative !important;
  top: auto !important;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  scroll-snap-align: start;
}
/* The scroll container is <body> here — reveal puts `reveal-viewport` on it. */
.pitchdeck-body.reveal-scroll {
  scroll-snap-type: y proximity;
}

/* The price is `ab | 249 | €` on a baseline row, with the number at 7.5em —
   about 128px against the mobile root, which is wider than the column, so the
   euro sign wrapped to a line of its own at full size. Sized to fit the row it
   was designed to be. */
.pitchdeck-body.reveal-scroll .pd-price { gap: 8px !important; flex-wrap: nowrap !important; }
.pitchdeck-body.reveal-scroll .pd-price__n { font-size: 4.2em !important; }
.pitchdeck-body.reveal-scroll .pd-price__ab { font-size: 1.3em !important; }
.pitchdeck-body.reveal-scroll .pd-price__unit { font-size: 0.85em !important; }

/* The running footer is fixed to the viewport bottom, which is right for a
   slide that fills the screen and wrong for a scrolling column: it sat on top
   of whatever text happened to be at the bottom of the scroll. There is a
   footnote at the end of the deck already; this is chrome. */
.pitchdeck-body.reveal-scroll .pd-footer { display: none !important; }

/* Fragments are a presenter's device: reveal gives a slide one screen of extra
   scroll per fragment so they can be brought in one at a time. It writes that
   as `--page-scroll-padding` — 2532px on the two slides here with three
   fragments each, which on a phone is two and a half screens of white with the
   slide sitting still behind it. That is the "white pages".
 
   The allowance is not only that variable. Reveal also inserts a real
   `.scroll-snap-point` div per fragment, each one viewport-tall, and those are
   what actually make the page 3415px — zeroing the variable alone left the
   height untouched because the height was coming from elements, not from a
   calc. Both go.
 
   A scrolling document has no presenter and nothing to pace, so every fragment
   is simply there. Reveal only marks a fragment `visible` as the presenter
   advances, and nobody is advancing. */
.pitchdeck-body.reveal-scroll .reveal .scroll-page { --page-scroll-padding: 0px !important; }
.pitchdeck-body.reveal-scroll .reveal .scroll-page .scroll-snap-point { display: none !important; }
.pitchdeck-body.reveal-scroll .reveal .slides section .fragment {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* ---- 2. Type ---------------------------------------------------------- */
/* The whole deck is em-based off one root, so the root is the only lever that
   needs pulling. 17px is the body size; everything else follows from the
   ratios the slides already declare. h1 and h2 are pinned back because 3.4em
   of anything is a poster headline, not a phone one. */
.pitchdeck-body.reveal-scroll .reveal { font-size: 17px; }
.pitchdeck-body.reveal-scroll .reveal h1 { font-size: 2.05em; line-height: 1.1; }
.pitchdeck-body.reveal-scroll .reveal h2 { font-size: 1.5em; line-height: 1.15; }
.pitchdeck-body.reveal-scroll .reveal h3 { font-size: 1.1em; }
.pitchdeck-body.reveal-scroll .pd-lede,
.pitchdeck-body.reveal-scroll .pd-sub { font-size: 1em; max-width: none; }
.pitchdeck-body.reveal-scroll .pd-big,
.pitchdeck-body.reveal-scroll .pd-big--sm { font-size: 2.2em !important; }


/* ---- 3. One column ---------------------------------------------------- */
/* Every multi-column primitive in this file, stacked. Listed rather than
   swept with a `*` because a grid is sometimes the layout (the packaging
   table's two columns read fine at this width) and flattening those would be
   worse than leaving them. */
.pitchdeck-body.reveal-scroll .pd-grid-2,
.pitchdeck-body.reveal-scroll .pd-grid-3,
.pitchdeck-body.reveal-scroll .pd-grid-4,
.pitchdeck-body.reveal-scroll .pd-hero,
.pitchdeck-body.reveal-scroll .pd-hero--close,
.pitchdeck-body.reveal-scroll .pd-vs,
.pitchdeck-body.reveal-scroll .pd-punch,
.pitchdeck-body.reveal-scroll .pd-punch--4,
.pitchdeck-body.reveal-scroll .pd-bridge,
.pitchdeck-body.reveal-scroll .pd-two,
.pitchdeck-body.reveal-scroll .pd-split,
.pitchdeck-body.reveal-scroll .pd-steps,
.pitchdeck-body.reveal-scroll .pd-steps--3,
.pitchdeck-body.reveal-scroll .pd-compare {
  grid-template-columns: 1fr !important;
  display: grid !important;
  gap: 22px !important;
}
/* `.pd-shift` is a flex row of two fixed 340px columns, so it hung 45px off
   the left edge before it was stacked. Flex rather than grid, hence separate
   from the list above. */
.pitchdeck-body.reveal-scroll .pd-shift {
  flex-direction: column !important;
  gap: 26px !important;
}
.pitchdeck-body.reveal-scroll .pd-shift__side { width: 100% !important; }

/* Headlines are set `white-space: nowrap` so a designed line break holds on a
   wide slide. On a 390px column that is a 455px or 659px line running off the
   edge, so here they wrap. Only headlines: `nowrap` elsewhere is holding a
   price, a date or a GTIN together and should keep doing it. */
.pitchdeck-body.reveal-scroll .reveal h1,
.pitchdeck-body.reveal-scroll .reveal h2,
.pitchdeck-body.reveal-scroll .pd-open__slogan,
.pitchdeck-body.reveal-scroll .pd-title-slide__title,
.pitchdeck-body.reveal-scroll .pd-title-slide__title span,
.pitchdeck-body.reveal-scroll .pd-big { white-space: normal !important; }
.pitchdeck-body.reveal-scroll .pd-open__slogan { font-size: 1.9em !important; letter-spacing: -0.02em; }
.pitchdeck-body.reveal-scroll .pd-title-slide__title { font-size: 2.05em !important; line-height: 1.1; }

/* `onpack.io/01/09524000123459` is one unbreakable 27-character token, and at
   1.4em it is 267px of a 346px column starting 155px in. Sized to fit rather
   than broken: it is a URL, and a URL wrapped mid-path stops reading as one.
   `anywhere` stays as the safety net for a longer GTIN than this demo's. */
.pitchdeck-body.reveal-scroll .pd-code__url {
  font-size: 1.05em !important;
  overflow-wrap: anywhere;
}
/* Nothing else on a slide should be able to push the column wider either. */
.pitchdeck-body.reveal-scroll .reveal .slides section { overflow-wrap: break-word; }

/* The QR sits absolutely off the jar's right shoulder, which is 28px past the
   column edge once the jar is 260px instead of 400. Under the jar instead —
   it is the same statement, and it is the one thing on the slide a reader
   might actually point a camera at. */
.pitchdeck-body.reveal-scroll .pd-jarqr { display: grid; justify-items: center; gap: 12px; }
.pitchdeck-body.reveal-scroll .pd-jarqr__code {
  position: static !important;
  right: auto !important;
  bottom: auto !important;
}

/* The scan slide is the one place where stacking made things worse. Jar-with-
   code above, phone below, it is 878px of art on an 844px screen — and shrunk
   enough to stack it, the phone is 132px wide. Side by side it is the same
   sentence (this pack -> this page), each half 162px wide, and the whole slide
   comes back to 604px. The arrow between them is already hidden; the pairing
   is what it was pointing at. */
.pitchdeck-body.reveal-scroll .pd-scan {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  align-items: end !important;
  gap: 14px !important;
}
.pitchdeck-body.reveal-scroll .pd-scan .pd-jarqr__jar {
  height: auto !important;
  width: min(100%, 150px) !important;
}
.pitchdeck-body.reveal-scroll .pd-scan .pd-jarqr__code svg { width: 76px !important; height: 76px !important; }
.pitchdeck-body.reveal-scroll .pd-scan .pd-phone {
  width: 100% !important;
  max-width: 180px !important;
}

/* The pricing tiers are four cards across; at 390px each is ~80px, which is
   narrower than the price inside it. One per row. */
.pitchdeck-body.reveal-scroll .pd-tiers {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}
.pitchdeck-body.reveal-scroll .pd-tier { padding: 16px 18px !important; }
.pitchdeck-body.reveal-scroll .pd-tier__line { font-size: 12px !important; }

/* The regulation timeline is date / title / badge on one 170px-led row. The
   badge goes under the title rather than fighting it for the last 60px, and
   the date stops being nowrap in a column this narrow. */
.pitchdeck-body.reveal-scroll .pd-timeline__row {
  grid-template-columns: 1fr !important;
  gap: 4px !important;
  padding: 12px 16px !important;
  font-size: 13px !important;
}
.pitchdeck-body.reveal-scroll .pd-timeline__date { white-space: normal !important; }
.pitchdeck-body.reveal-scroll .pd-timeline__kind {
  font-size: 11px !important;
  justify-self: start;
  margin-top: 4px;
}

/* Every caption in the deck is declared as a fraction of an em — 0.5em to
   0.7em — which was 14-20px on the 1280 canvas and is 8.5-12px against a 17px
   root. Small is right; 8.5px is not, and it was different classes on every
   deck, so they are floored together rather than found one at a time.
   Floored, not rescaled: they should stay subordinate to the text they
   annotate, just legible while they do it. */
.pitchdeck-body.reveal-scroll .pd-title-slide__foot,
.pitchdeck-body.reveal-scroll .pd-footqr span,
.pitchdeck-body.reveal-scroll .pd-reveal-demo__caption,
.pitchdeck-body.reveal-scroll .pd-reveal-demo__caption strong,
.pitchdeck-body.reveal-scroll .pd-tag,
.pitchdeck-body.reveal-scroll .pd-step__who,
.pitchdeck-body.reveal-scroll .pd-compare__brand,
.pitchdeck-body.reveal-scroll .pd-compare__foot,
.pitchdeck-body.reveal-scroll .pd-shift__side span,
.pitchdeck-body.reveal-scroll .pd-two__name,
.pitchdeck-body.reveal-scroll .pd-two p,
.pitchdeck-body.reveal-scroll .pd-facts span,
.pitchdeck-body.reveal-scroll .pd-tier__name { font-size: 12px !important; }

/* `.pd-facts` and `.pd-metrics` are bordered strips of four or five equal
   cells divided by
   vertical rules. At 390px each cell is 86px, which is narrower than the words
   in it — the labels broke one character per line. Stacked, with the dividing
   rule turned from vertical to horizontal so it still reads as one strip
   rather than four loose boxes. `white-space: nowrap` on the headings has to
   go with it for the same reason it did on the opening slogan. */
.pitchdeck-body.reveal-scroll .pd-facts { flex-direction: column !important; }
.pitchdeck-body.reveal-scroll .pd-metrics { grid-template-columns: 1fr !important; }
.pitchdeck-body.reveal-scroll .pd-facts > div,
.pitchdeck-body.reveal-scroll .pd-metrics > div {
  border-right: none !important;
  border-bottom: 1px solid var(--op-line);
  padding: 16px 18px !important;
}
.pitchdeck-body.reveal-scroll .pd-facts > div:last-child,
.pitchdeck-body.reveal-scroll .pd-metrics > div:last-child { border-bottom: none; }
.pitchdeck-body.reveal-scroll .pd-facts strong { white-space: normal !important; }
.pitchdeck-body.reveal-scroll .pd-metrics__label { font-size: 12px !important; }

/* An arrow between two things points across on a wide slide and at nothing
   once the two things are stacked. */
.pitchdeck-body.reveal-scroll .pd-scan__arrow,
.pitchdeck-body.reveal-scroll .pd-shift__arrow,
.pitchdeck-body.reveal-scroll .pd-vs__vs,
.pitchdeck-body.reveal-scroll .pd-bridge__arrow { display: none !important; }

/* The opening slide's date and domain are pinned to the bottom of a slide that
   used to be exactly 800px tall. In a flowing column there is no bottom to pin
   to, so they landed on top of the headline. */
.pitchdeck-body.reveal-scroll .pd-title-slide,
.pitchdeck-body.reveal-scroll .pd-open { display: block !important; height: auto !important; }
.pitchdeck-body.reveal-scroll .pd-open .pd-title-slide__foot,
.pitchdeck-body.reveal-scroll .pd-title-slide__foot {
  position: static !important;
  left: auto !important; right: auto !important; bottom: auto !important;
  margin-top: 28px;
}

/* ---- 4. Art fits the column ------------------------------------------- */
/* Everything sized for a 1280 canvas, capped to what a phone actually has.
   `height: auto` on the containers because a 300px-tall art box around a
   200px image is the same hole as the 100vh page. */
.pitchdeck-body.reveal-scroll .pd-phone,
.pitchdeck-body.reveal-scroll .pd-phone--sm,
.pitchdeck-body.reveal-scroll .pd-two .pd-phone--sm {
  width: min(196px, 52vw) !important;
  height: auto !important;
  aspect-ratio: 196 / 416;
  margin-inline: auto;
}
.pitchdeck-body.reveal-scroll .pd-phone img { height: 100% !important; object-fit: cover; }
.pitchdeck-body.reveal-scroll .pd-two__art,
.pitchdeck-body.reveal-scroll .pd-shift__art { height: auto !important; }
.pitchdeck-body.reveal-scroll .pd-jarqr__jar { height: min(220px, 26dvh) !important; }
.pitchdeck-body.reveal-scroll .pd-jarqr--sm .pd-jarqr__jar { height: min(150px, 18dvh) !important; }
.pitchdeck-body.reveal-scroll .pd-jarqr--sm .pd-jarqr__code svg { width: 60px !important; height: 60px !important; }
.pitchdeck-body.reveal-scroll .pd-hero__jar,
.pitchdeck-body.reveal-scroll .pd-hero__jar--light { max-height: min(300px, 34dvh) !important; }
.pitchdeck-body.reveal-scroll .pd-two__art { margin-bottom: 10px !important; }
.pitchdeck-body.reveal-scroll .pd-two__lid { height: min(200px, 16dvh) !important; }
.pitchdeck-body.reveal-scroll .pd-ean { width: 100% !important; max-width: 320px; }
.pitchdeck-body.reveal-scroll .pd-shift__art--qr svg { width: 160px !important; height: 160px !important; }
.pitchdeck-body.reveal-scroll img { max-width: 100%; }
/* The timeline is 420px of absolute positioning against a wide track. It has
   no portrait form, and half a timeline is worse than none. */
.pitchdeck-body.reveal-scroll .pd-tl { display: none !important; }
/* Decoration that assumes a full-bleed landscape slide. */
.pitchdeck-body.reveal-scroll .pd-waves { display: none !important; }

/* A phone is not one height. 17px and 34px of padding fit ten slides onto an
   iPhone 15; on a 667px screen (SE, 8, mini) the same slides run 12-144px
   over, and the ones that overflow worst are the pure-text ones — nothing to
   scale down but the type itself. Since the whole deck is em-based off this
   root, one step down here takes every slide with it, and the art is already
   capped in dvh so it follows the screen on its own. */
@media (max-height: 740px) {
  .pitchdeck-body.reveal-scroll .reveal { font-size: 15px; }
  .pitchdeck-body.reveal-scroll .reveal .slides section { padding: 24px 20px !important; }
  /* The two art blocks that are still sized in px rather than dvh: the barcode
     and the QR on the shift slide, which together are 339px of a 667px screen. */
  .pitchdeck-body.reveal-scroll .pd-ean { max-width: 240px; }
  .pitchdeck-body.reveal-scroll .pd-shift__art--qr svg { width: 120px !important; height: 120px !important; }
  .pitchdeck-body.reveal-scroll .pd-shift { gap: 18px !important; }
  .pitchdeck-body.reveal-scroll .pd-two { gap: 10px !important; }
  .pitchdeck-body.reveal-scroll .pd-two__art { margin-bottom: 6px !important; }
  .pitchdeck-body.reveal-scroll .pd-jarqr--sm .pd-jarqr__jar { height: min(150px, 14dvh) !important; }
  .pitchdeck-body.reveal-scroll .pd-two__lid { height: min(200px, 12dvh) !important; }
}

/* ---- 5. Chrome -------------------------------------------------------- */
/* Reveal's arrows and progress bar steer a slideshow. This is a page now, and
   the scrollbar is the control. */
.pitchdeck-body.reveal-scroll .reveal .controls,
.pitchdeck-body.reveal-scroll .reveal .progress,
.pitchdeck-body.reveal-scroll .reveal .slide-number { display: none !important; }
/* A hairline between slides, so a scroll reads as sections of one document
   rather than paragraphs that ran together.
 
   On `.scroll-page`, not on `section + section`. Reveal wraps every section in
   its own scroll-page > scroll-page-sticky > scroll-page-content, so no two
   sections are ever siblings and the adjacent-sibling version of this rule
   matched nothing at all — it shipped as dead CSS and the slides ran together
   with only their padding between them. The scroll-pages are the siblings. */
.pitchdeck-body.reveal-scroll .reveal .scroll-page + .scroll-page {
  border-top: 1px solid var(--op-line);
}
/* Except where a dark slide meets a light one: there the change of colour is
   already the division, and a grey hairline across it reads as a seam. */
.pitchdeck-body.reveal-scroll .reveal .scroll-page:has(.pd-section-dark) + .scroll-page,
.pitchdeck-body.reveal-scroll .reveal .scroll-page + .scroll-page:has(.pd-section-dark) {
  border-top: 0;
}

/* ---- Scroll view: the sections paint themselves ------------------------
   Reveal 5 switches to its scroll view below ~435px, which is every phone.
   In that view the deck is one scrolling column and `syncTitleClass` in the
   layout stops being true: it reads `section.present`, and scroll view keeps
   whichever section was present at load — so the body class freezes on
   `pd-on-title` and never becomes `pd-on-dark`.

   That matters because the section backgrounds are transparent by design and
   the gradient is painted on <body>, so a frozen body class means a dark slide
   renders #eef2ff text on a white page. Invisible, on four slides, including
   the closing one with the signup QR.

   So in scroll view the sections carry their own background and do not depend
   on any JS having run. The body keeps painting the full-viewport gradient in
   the normal view, where it is what fills the letterbox around the scaled
   slide and where the toggle does work.

   The dark gradient here is the print block's, not the body's: its radial
   peaks sit off the box rather than exactly on a corner, which is what stops a
   visible disc and a seam at the edge — the same reason the PDF uses them.
   Screen and PDF now agree on this slide instead of differing by renderer. */
.pitchdeck-body.reveal-scroll .reveal .slides section.pd-section-dark {
  background:
    radial-gradient(1200px 800px at 115% -15%, rgba(30,58,138,0.28), transparent 65%),
    radial-gradient(1400px 900px at -15% 115%, rgba(29,78,216,0.32), transparent 65%),
    linear-gradient(180deg, #0b1020 0%, #0f1530 100%);
}
/* `:not(.pd-section-dark)` because the closing slide carries both classes —
   it is a title slide AND a dark one — and without it the light gradient won
   on source order alone and painted white text onto a near-white box. The body
   version got this right by accident: `.pd-on-dark` happens to be declared
   after `.pd-on-title`. Said out loud here so it cannot be undone by moving a
   rule. */
.pitchdeck-body.reveal-scroll .reveal .slides section.pd-section-title:not(.pd-section-dark) {
  background:
    radial-gradient(1400px 900px at 90% -10%, rgba(37,99,235,0.18), transparent 60%),
    radial-gradient(900px 600px at -5% 110%, rgba(30,58,138,0.12), transparent 65%),
    linear-gradient(180deg, #ffffff 0%, #fbfbff 100%);
}
/* The frozen body class also leaves the title-only decoration switched on for
   the whole scroll, so the dotted grid and the blurred orb sat over every
   slide including the dark ones. They are fixed to the viewport and belong to
   one slide; in a scrolling column there is no such thing. */
.pitchdeck-body.reveal-scroll.pd-on-title::before,
.pitchdeck-body.reveal-scroll.pd-on-title::after { display: none !important; }
/* And the body itself stays plain, so a frozen `pd-on-title` cannot tint the
   column behind slides that are not title slides. */
.pitchdeck-body.reveal-scroll.pd-on-title,
.pitchdeck-body.reveal-scroll.pd-on-dark { background: #fff !important; }

/* ---- Dark slides (for rhythm) ----------------------------------------- */

.pitchdeck-body .reveal .slides section.pd-section-dark {
  background: transparent;
  color: #eef2ff;
}
.pitchdeck-body .reveal .slides section.pd-section-dark h1,
.pitchdeck-body .reveal .slides section.pd-section-dark h2,
.pitchdeck-body .reveal .slides section.pd-section-dark h3 { color: #ffffff; }
.pitchdeck-body .reveal .slides section.pd-section-dark p,
.pitchdeck-body .reveal .slides section.pd-section-dark .pd-lede { color: rgba(238,242,255,0.82); }
.pitchdeck-body .reveal .slides section.pd-section-dark strong { color: #ffffff; }
.pitchdeck-body .reveal .slides section.pd-section-dark .pd-kvs {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.14);
}
.pitchdeck-body .reveal .slides section.pd-section-dark .pd-kv {
  border-bottom-color: rgba(255,255,255,0.14);
}
.pitchdeck-body .reveal .slides section.pd-section-dark .pd-kv strong { color: rgba(238,242,255,0.82); font-weight: 600; }
.pitchdeck-body .reveal .slides section.pd-section-dark .pd-kv span { color: #ffffff; font-weight: 700; }
.pitchdeck-body .reveal .slides section.pd-section-dark .pd-tag { background: rgba(255,255,255,0.12); color: #e0e7ff; }
.pitchdeck-body .reveal .slides section.pd-section-dark .pd-card {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.14);
  color: #e0e7ff;
}
.pitchdeck-body .reveal .slides section.pd-section-dark .pd-card h3 { color: #fff; }
.pitchdeck-body .reveal .slides section.pd-section-dark .pd-card p { color: rgba(238,242,255,0.75); }
.pitchdeck-body .reveal .slides section.pd-section-dark em { color: #ffffff; font-weight: 700; }
.pitchdeck-body .reveal .slides section.pd-section-dark .pd-stat {
  background: linear-gradient(90deg, #ffffff, #c7d2fe);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pitchdeck-body .reveal .slides section.pd-section-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(199,210,254,0.18) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(900px 500px at 0% 100%, rgba(0,0,0,0.45), transparent 65%);
          mask-image: radial-gradient(900px 500px at 0% 100%, rgba(0,0,0,0.45), transparent 65%);
  pointer-events: none;
}

.pitchdeck-body .reveal .slides section.pd-section-dark .pd-title-slide__brand {
  color: #ffffff;
}
.pitchdeck-body .reveal .slides section.pd-section-dark .pd-title-slide__brand::before {
  background: #ffffff;
}
.pitchdeck-body .reveal .slides section.pd-section-dark .pd-title-slide__title {
  color: #ffffff;
}
.pitchdeck-body .reveal .slides section.pd-section-dark .pd-title-slide__title .accent {
  background: linear-gradient(90deg, #c7d2fe, #f5d0fe);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pitchdeck-body .reveal .slides section.pd-section-dark .pd-title-slide__sub {
  color: rgba(238,242,255,0.82);
}

/* Rally line on close slides — set apart from timeline, slightly larger, italic second line */
.pd-title-slide__rally {
  margin-top: 1.4em !important;
  padding-top: 1em;
  border-top: 1px solid rgba(255,255,255,0.18);
  font-size: 1.15em !important;
  line-height: 1.35;
  color: rgba(255,255,255,0.95) !important;
  max-width: 720px !important;
}
.pd-title-slide__rally em {
  color: #fff;
  font-style: normal;
  font-weight: 600;
  background: linear-gradient(90deg, var(--op-primary-3), #93c5fd);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pitchdeck-body .reveal .slides section.pd-section-dark .pd-title-slide__foot {
  color: rgba(238,242,255,0.5);
}

/* ---- Grids ------------------------------------------------------------ */

.pd-grid {
  display: grid;
  gap: 22px;
  margin-top: 0.8em;
}
/* Dense 3-col grids (6+ cards) — tighter gap/padding to fit two rows. */
.pd-slide--dense h2 { margin-bottom: 0.3em; }
.pd-slide--dense .pd-lede { font-size: 0.9em; margin-bottom: 0.8em; max-width: 880px; }
.pd-slide--dense .pd-grid { gap: 14px; }
.pd-slide--dense .pd-card { padding: 14px 16px; }
.pd-slide--dense .pd-card h3 { font-size: 0.9em; margin-bottom: 0.3em; }
.pd-slide--dense .pd-card p { font-size: 0.78em; line-height: 1.4; }
.pd-slide--dense .pd-card__icon { width: 28px; height: 28px; margin-bottom: 8px; }
.pd-slide--dense .pd-card__icon svg { width: 16px; height: 16px; }

.pd-grid-3 { grid-template-columns: repeat(3, 1fr); }
.pd-grid-4 { grid-template-columns: repeat(4, 1fr); }
.pd-grid-2 { grid-template-columns: repeat(2, 1fr); }

.pd-card {
  border: 1px solid var(--op-line);
  border-radius: 16px;
  padding: 24px;
  background: var(--op-bg);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
}

.pd-card--soft {
  background: var(--op-bg-alt);
  border-color: transparent;
}

.pd-card--accent {
  background:
    radial-gradient(400px 300px at 100% 0%, rgba(255,255,255,0.18), transparent 60%),
    linear-gradient(135deg, var(--op-primary) 0%, var(--op-accent) 100%);
  color: #fff;
  border-color: transparent;
}

.pd-card h3 { font-size: 1em; margin: 0; color: var(--op-ink); }
.pd-card p { font-size: 0.7em; color: var(--op-muted); margin: 0; line-height: 1.5; }

/* Accent-card overrides — prefix `.pitchdeck-body .reveal` to beat the heading/em
   scoping rule that would otherwise win on specificity (0,2,1 vs 0,1,1). */
.pitchdeck-body .reveal .pd-card--accent h3,
.pitchdeck-body .reveal .pd-card--accent .pd-stat { color: #fff; }
.pitchdeck-body .reveal .pd-card--accent p { color: rgba(255,255,255,0.94); }
.pitchdeck-body .reveal .pd-card--accent em { color: #fff; font-weight: 700; }

/* Bullet list inside cards (used on before/after comparison slide) */
.pd-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pd-card ul li {
  position: relative;
  padding-left: 20px;
  font-size: 0.72em;
  color: var(--op-muted);
  line-height: 1.5;
}
.pd-card ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 10px;
  height: 2px;
  background: var(--op-primary);
  border-radius: 2px;
}
.pitchdeck-body .reveal .pd-card--accent ul li { color: rgba(255,255,255,0.94); }
.pitchdeck-body .reveal .pd-card--accent ul li::before { background: #fff; }
.pd-card ul li em { color: var(--op-ink); font-weight: 700; font-style: normal; }
.pitchdeck-body .reveal .pd-card--accent ul li em { color: #fff; }

.pd-stat {
  font-size: 2.2em;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
  padding-bottom: 0.1em;
  background: linear-gradient(120deg, var(--op-primary) 0%, var(--op-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  overflow-wrap: break-word;
}

.pd-card__icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--op-primary-soft);
  color: var(--op-primary);
  margin-bottom: 4px;
}
.pd-card__icon svg { width: 22px; height: 22px; }
.pd-card--accent .pd-card__icon {
  background: rgba(255,255,255,0.18);
  color: #fff;
}

/* Decorative corner accent on problem/stat cards */
.pd-card--stat::before {
  content: "";
  position: absolute;
  right: -40px; top: -40px;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(29,78,216,0.08), transparent 80%);
  pointer-events: none;
}

/* ---- Metrics bar ------------------------------------------------------ */

.pd-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--op-line);
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff, #fbfbff);
}
.pd-metrics > div {
  padding: 22px;
  border-right: 1px solid var(--op-line);
}
.pd-metrics > div:last-child { border-right: none; }
.pd-metrics__value {
  font-size: 1.7em;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  background: linear-gradient(120deg, var(--op-primary) 0%, var(--op-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pd-metrics__label {
  font-size: 0.55em;
  color: var(--op-muted);
  margin-top: 0.5em;
  line-height: 1.4;
}

/* ---- Steps ------------------------------------------------------------ */

.pd-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
  margin-top: 0.8em;
}
.pd-steps--3 { grid-template-columns: repeat(3, 1fr); }
.pd-step__who { font-size: 0.6em; color: var(--op-primary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.9em; margin-bottom: 0.15em; }

.pd-step { padding: 0 22px; position: relative; }
.pd-step__n {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--op-primary);
  color: #fff;
  font-weight: 800;
  border-radius: 12px;
  font-size: 1.05em;
  letter-spacing: -0.02em;
  box-shadow: 0 6px 16px -4px rgba(29,78,216,0.4);
}
.pd-step h3 { margin-top: 0.8em; font-size: 0.95em; }
.pd-step p { font-size: 0.7em; color: var(--op-muted); line-height: 1.5; }

/* ---- Tiers (pricing — commented out in v1 view but styles kept) ------- */

.pd-tiers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 0.8em;
}
.pd-tier {
  border: 1px solid var(--op-line);
  border-radius: 14px;
  padding: 22px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pd-tier--featured {
  border-color: var(--op-primary);
  background: var(--op-primary-soft);
  position: relative;
}
.pd-tier--featured::before {
  content: "Most popular";
  content: attr(data-badge, "Most popular");
  position: absolute;
  top: -11px; left: 22px;
  background: var(--op-primary);
  color: #fff;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.5em;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pd-tier__name { font-weight: 700; font-size: 0.9em; color: var(--op-ink); }
.pd-tier__price { font-size: 1.8em; font-weight: 800; letter-spacing: -0.03em; color: var(--op-ink); }
.pd-tier__price small { font-size: 0.45em; font-weight: 500; color: var(--op-muted); margin-left: 4px; }
.pd-tier__line { font-size: 0.65em; color: var(--op-muted); line-height: 1.45; }

/* ---- Reveal tier chips ------------------------------------------------ */

.pd-reveal-chips { display: flex; gap: 16px; margin-top: 0.4em; }
.pd-reveal-chip {
  flex: 1;
  border-radius: 14px;
  padding: 22px 20px;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 24px -12px rgba(0,0,0,0.3);
}
.pd-reveal-chip::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.18), transparent 40%);
  pointer-events: none;
}
.pd-reveal-chip__tier {
  font-size: 0.5em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.9;
  position: relative;
}
.pd-reveal-chip__label {
  font-weight: 800;
  font-size: 1.5em;
  line-height: 1;
  margin-top: 0.3em;
  letter-spacing: -0.03em;
  position: relative;
}
.pd-reveal-chip__foot {
  font-size: 0.55em;
  opacity: 0.85;
  margin-top: 1em;
  position: relative;
}
.pd-chip--base    { background: linear-gradient(135deg, #94a3b8, #475569); }
.pd-chip--bronze  { background: linear-gradient(135deg, #c08257, #8e5f30); }
.pd-chip--silver  { background: linear-gradient(135deg, #d8dbe2, #8a8f99); color: #1a1a2e; }
.pd-chip--gold    { background: linear-gradient(135deg, #f2d27a, #d7a93a); color: #2a1c00; }

.pd-reveal-customize {
  margin-top: 22px;
  padding: 18px 24px;
  border-radius: 14px;
  background: var(--op-primary-soft);
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.72em;
  color: var(--op-ink);
  line-height: 1.5;
  border: 1px dashed rgba(29,78,216,0.25);
}
.pd-reveal-customize strong { color: var(--op-primary); }
.pd-reveal-customize__icon {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--op-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
}

/* German runs ~20% longer than English and the base sizes were tuned on the
   English decks. `pd-slide--de` is the whole-slide density for the German
   deck: a notch off h2, lede and card copy so the same layouts fit 800px. */
.pitchdeck-body .reveal .pd-slide--de h2 { font-size: 1.75em; margin-bottom: 0.35em; }
.pd-slide--de .pd-lede { font-size: 0.95em; max-width: 960px; margin-bottom: 0.8em; }
.pd-slide--de .pd-grid { gap: 14px; }
.pd-slide--de .pd-card { padding: 22px 24px; gap: 10px; }
.pd-slide--de .pd-card h3 { font-size: 0.95em; }
.pd-slide--de .pd-card p { font-size: 0.7em; line-height: 1.45; }
.pd-slide--de .pd-card__icon { width: 30px; height: 30px; margin-bottom: 6px; }
.pd-slide--de .pd-card__icon svg { width: 17px; height: 17px; }
.pd-slide--de .pd-stat { font-size: 1.7em; }
.pd-slide--de .pd-reveal-customize { margin-top: 20px; padding: 16px 22px; font-size: 0.7em; }
.pd-slide--de.pd-slide--dense .pd-card { padding: 14px 16px; }
.pd-slide--de.pd-slide--dense .pd-card p { font-size: 0.66em; }
.pd-slide--de.pd-slide--dense .pd-card h3 { font-size: 0.88em; }
.pd-slide--de .pd-timeline__row { padding: 10px 22px; font-size: 0.66em; }
.pd-slide--de .pd-list li { font-size: 0.72em; }
.pd-slide--de .pd-tier { padding: 18px; }
.pd-slide--de .pd-tier__line { font-size: 0.58em; }
.pd-slide--de .pd-tier__price { font-size: 1.5em; }

.pd-title-slide--de .pd-title-slide__title { font-size: 3.5em; }
.pd-title-slide--de .pd-title-slide__sub { max-width: 760px; }

/* ---- v2 general deck: image-led components --------------------------- */
/* Phone frame around a 390px-wide screenshot; the image is 2x and cropped
   to the frame, so a tall page shows its top. */
.pd-phone {
  width: 236px; height: 500px;
  border-radius: 34px;
  border: 7px solid #0f172a;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(15,23,42,0.45);
  flex: 0 0 auto;
  position: relative;
}
.pd-phone img { width: 100%; max-width: none; height: auto; display: block; margin: 0; }
.pd-phone--sm { width: 196px; height: 416px; border-radius: 28px; border-width: 6px; }
.pd-phone__tag {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  background: #0f172a; color: #fff;
  font-size: 0.5em; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px; white-space: nowrap;
}
.pd-phones { display: flex; gap: 40px; align-items: flex-start; justify-content: center; }

/* Hero split: words left, the jar right, on the dark title slide. */
.pd-hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; min-height: 100%; }
.pd-hero__jar { width: auto; max-width: 100%; max-height: 470px; object-fit: contain; filter: drop-shadow(0 40px 60px rgba(0,0,0,0.5)); }
.pd-hero > div:last-child { display: flex; justify-content: center; }
.pd-hero__jar--light { max-height: 440px; filter: none; mix-blend-mode: multiply; }
.pd-hero .pd-title-slide__title { font-size: 4.2em; }
.pd-hero--close { grid-template-columns: 1.5fr 1fr; }
.pd-hero--close .pd-title-slide__title { font-size: 3.2em; white-space: nowrap; }
.pd-hero--close .pd-reveal-demo__caption strong { font-size: 0.85em; word-break: break-all; }

/* The "label" — a cream rectangle with the back-of-pack type crammed in,
   next to the phone. Stands for every jar label ever printed. */
.pd-vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 36px; align-items: center; margin-top: 0.4em; }
.pd-vs__word { font-size: 1.6em; font-weight: 800; color: var(--op-muted-2); letter-spacing: -0.03em; }
.pd-vs > div:first-child, .pd-vs > div:last-child { display: flex; justify-content: center; }
.pd-label {
  width: 300px; padding: 16px 18px;
  background: #f4ecd8; color: #2b2116;
  border: 1px solid #d9cba8; border-radius: 4px;
  box-shadow: inset 0 0 40px rgba(120,90,30,0.12), 0 20px 40px -24px rgba(0,0,0,0.4);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.34em; line-height: 1.25; text-align: justify;
  hyphens: auto;
}
.pd-label strong { display: block; font-size: 1.5em; margin-bottom: 4px; letter-spacing: 0.02em; }
.pd-label p { margin: 0 0 5px; }

/* Timeline as a bar: markers at a % of 2023→2030, each placed in a lane the
   view chooses (u1/u2 above, d1/d2 below) so neighbours a few months apart
   never collide. The dot always sits on the line; the connector reaches it. */
.pd-tl { position: relative; height: 420px; margin: 0.2em 0 0; }
.pd-tl__line { position: absolute; left: 0; right: 0; top: 50%; height: 4px; background: var(--op-line); border-radius: 2px; }
.pd-tl__year { position: absolute; top: calc(50% + 14px); transform: translateX(-50%); font-size: 0.48em; font-weight: 700; color: var(--op-muted-2); }
.pd-tl__today { position: absolute; top: calc(50% - 14px); width: 3px; height: 32px; background: #ef4444; transform: translateX(-50%); border-radius: 2px; }
.pd-tl__today::after { content: "heute"; position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-size: 0.44em; font-weight: 800; color: #ef4444; }
.pd-tl__m { position: absolute; width: 150px; transform: translateX(-50%); text-align: center; font-size: 0.5em; line-height: 1.3; color: var(--op-ink); }
.pd-tl__m--left { transform: translateX(-100%); text-align: right; padding-right: 10px; }
.pd-tl__m--right { transform: none; text-align: left; padding-left: 10px; }
.pd-tl__m strong { display: block; color: var(--op-primary); font-size: 1.05em; }
.pd-tl__dot { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: var(--op-primary); transform: translate(-50%, -50%); box-shadow: 0 0 0 4px #fff; z-index: 2; }
.pd-tl__stem { position: absolute; width: 2px; background: var(--op-line); transform: translateX(-50%); }
.pd-tl__m--u1 { bottom: calc(50% + 34px); }
.pd-tl__m--u2 { bottom: calc(50% + 124px); }
.pd-tl__m--d1 { top: calc(50% + 40px); }
.pd-tl__m--d2 { top: calc(50% + 118px); }
.pd-tl__stem--u1 { bottom: 50%; height: 30px; }
.pd-tl__stem--u2 { bottom: 50%; height: 120px; }
.pd-tl__stem--d1 { top: 50%; height: 36px; }
.pd-tl__stem--d2 { top: 50%; height: 114px; }
.pd-tl__m--industry strong { color: #b45309; }
.pd-tl__dot--industry { background: #f59e0b; }
.pd-tl__m--dpp { color: var(--op-muted-2); }
.pd-tl__m--dpp strong { color: var(--op-muted-2); }
.pd-tl__dot--dpp { background: #cbd5e1; }

/* Giant word or number for the one-idea slides. */
.pd-big { font-size: 5.8em; font-weight: 800; letter-spacing: -0.045em; line-height: 0.95; margin: 0.1em 0 0.15em; }
.pitchdeck-body .reveal .slides section.pd-section-dark .pd-big { color: #fff; }
.pd-big .accent { background: linear-gradient(90deg, #c7d2fe, #f5d0fe); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pd-sub { font-size: 1.15em; color: var(--op-muted); max-width: 900px; line-height: 1.4; }
.pitchdeck-body .reveal .slides section.pd-section-dark .pd-sub { color: rgba(255,255,255,0.78); }

/* GTIN → URL: the code that is already on the pack becoming the address. */
.pd-code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.7em; letter-spacing: 0.02em; margin-top: 0.4em; display: flex; flex-direction: column; gap: 10px; }
.pd-code__gtin { color: rgba(255,255,255,0.6); }
.pd-code__url { color: #fff; font-weight: 700; }
.pd-code__url .accent { color: #a5b4fc; }
.pd-code__arrow { color: #a5b4fc; font-size: 0.9em; }

/* Three punches in a row, each a fragment. */
.pd-punch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 1em; align-items: start; }
.pd-punch--4 { grid-template-columns: repeat(4, 1fr); }
.pd-punch--4 h3 { font-size: 1.2em; white-space: nowrap; }
.pd-slide--center { justify-content: center; }
.pd-slide--center h2 { margin-bottom: 0.2em; }
.pd-punch > div { border-left: 4px solid var(--op-primary); padding: 6px 0 6px 22px; }
.pd-punch h3 { font-size: 1.4em; margin: 0 0 8px; letter-spacing: -0.02em; }
.pd-punch p { font-size: 0.8em; color: var(--op-muted); margin: 0; line-height: 1.45; }
.pitchdeck-body .reveal .slides section.pd-section-dark .pd-punch > div { border-left-color: #818cf8; }
.pitchdeck-body .reveal .slides section.pd-section-dark .pd-punch p { color: rgba(255,255,255,0.72); }
.pitchdeck-body .reveal .slides section.pd-section-dark .pd-punch h3 { color: #fff; }

/* Facts strip: label + value pairs in one row. */
.pd-facts { display: flex; gap: 0; margin-top: 1em; border: 1px solid var(--op-line); border-radius: 16px; overflow: hidden; background: var(--op-bg-alt); }
.pd-facts > div { flex: 1 1 0; min-width: 0; padding: 24px 22px; border-right: 1px solid var(--op-line); }
.pd-facts > div:last-child { border-right: none; }
.pd-facts strong { display: block; font-size: 1.1em; color: var(--op-ink); letter-spacing: -0.02em; margin-bottom: 6px; white-space: nowrap; }
.pd-facts span { font-size: 0.66em; color: var(--op-muted); line-height: 1.4; display: block; }

.pitchdeck-body .reveal .slides section.pd-section-dark .pd-facts { border-color: rgba(255,255,255,0.16); background: rgba(255,255,255,0.04); }
.pitchdeck-body .reveal .slides section.pd-section-dark .pd-facts > div { border-right-color: rgba(255,255,255,0.16); }
.pitchdeck-body .reveal .slides section.pd-section-dark .pd-facts strong { color: #fff; }
.pitchdeck-body .reveal .slides section.pd-section-dark .pd-facts span { color: rgba(255,255,255,0.72); }
.pd-big--sm { font-size: 4.4em; }

/* Footnote under a slide's visual: small, muted, one line. */
.pd-foot { font-size: 0.56em; color: var(--op-muted-2); margin-top: 18px; }

/* Slide 2: label → onpack → page. The arrow is the homepage's hand-drawn one. */
.pd-bridge { display: grid; grid-template-columns: 1fr auto 1fr; gap: 28px; align-items: center; margin-top: 0.5em; }
.pd-bridge > .pd-label { justify-self: end; }
.pd-bridge > .pd-phone { justify-self: start; }
.pd-bridge__link { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 200px; }
.pd-bridge__arrow { width: 170px; height: auto; }
.pd-bridge__word { font-weight: 800; font-size: 1.1em; color: var(--op-primary); letter-spacing: -0.02em; }
.pd-label { position: relative; padding-bottom: 62px; }
.pd-label__qr { position: absolute; right: 14px; bottom: 12px; width: 44px; height: 44px; background: #fff; padding: 3px; }
.pd-label__qr svg { width: 100%; height: 100%; display: block; }

/* Slide 5: page ← arrow ← QR, read left to right, no gap. */
.pd-scan { display: flex; align-items: center; justify-content: center; gap: 36px; margin-top: 0.4em; }
.pd-scan__arrow { width: 200px; height: auto; transform: translateY(-30px); }

/* Footnote with a tiny QR: sits at the bottom of the slide, out of the way. */
.pd-footqr { margin-top: auto; display: flex; align-items: center; gap: 10px; font-size: 0.5em; color: var(--op-muted-2); }
.pd-footqr svg { width: 40px; height: 40px; flex: 0 0 auto; }

.pitchdeck-body .reveal .slides section.pd-section-dark .pd-reveal-demo__caption strong { color: var(--op-primary); }
.pitchdeck-body .reveal .slides section.pd-section-dark .pd-reveal-demo__caption span { color: var(--op-muted); }

/* Price as the headline. */
.pd-price { display: flex; align-items: baseline; gap: 18px; margin: 0.15em 0 0.3em; }
.pd-price__n { font-size: 7.5em; font-weight: 800; letter-spacing: -0.05em; line-height: 1; color: var(--op-ink); }
.pd-price__unit { font-size: 1.2em; color: var(--op-muted); font-weight: 600; }

/* Regulation timeline (general deck, slide 3): one row per dated obligation,
   rendered from EuRules::TIMELINE so the deck can never disagree with /rules. */
.pd-timeline {
  margin-top: 0.7em;
  border: 1px solid var(--op-line);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}
.pd-timeline__row {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 11px 22px;
  border-bottom: 1px solid var(--op-line);
  font-size: 0.66em;
  line-height: 1.35;
}
.pd-timeline__row:last-child { border-bottom: none; }
.pd-timeline__date { font-weight: 700; color: var(--op-primary); letter-spacing: -0.01em; white-space: nowrap; }
.pd-timeline__title { color: var(--op-ink); font-weight: 600; }
.pd-timeline__title small { display: block; font-weight: 400; color: var(--op-muted); margin-top: 2px; }
.pd-timeline__kind {
  font-size: 0.78em;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
  background: var(--op-primary-soft);
  color: var(--op-primary);
}
.pd-timeline__kind--industry { background: #fef3c7; color: #92400e; }
.pd-timeline__kind--dpp { background: #f1f5f9; color: var(--op-muted); }
.pd-timeline__row--muted .pd-timeline__title,
.pd-timeline__row--muted .pd-timeline__date { color: var(--op-muted); }

/* Numbered rows for the shelf-flow slide: what the shopper does, in order. */
.pd-list { list-style: none; margin: 0.6em 0 0; padding: 0; display: grid; gap: 12px; }
.pd-list li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  font-size: 0.72em;
  line-height: 1.45;
  color: var(--op-muted);
}
.pd-list li strong { display: block; color: var(--op-ink); font-weight: 700; font-size: 1.08em; margin-bottom: 2px; }
.pd-list__n {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--op-primary), var(--op-primary-3));
  color: #fff;
  font-weight: 800;
  font-size: 1em;
}

/* Reveal slide two-column layout: narrative + live-demo QR */
.pd-reveal-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px;
  align-items: start;
  margin-top: 0.6em;
}
.pd-reveal-layout__text { min-width: 0; }
.pd-reveal-demo {
  flex: 0 0 auto;
  padding: 20px 20px 18px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--op-ink-line, rgba(15,23,42,0.08));
  box-shadow: 0 12px 30px -14px rgba(15,23,42,0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  width: 200px;
}
.pd-reveal-demo__qr {
  width: 160px; height: 160px;
  display: flex; align-items: center; justify-content: center;
}
.pd-reveal-demo__qr svg { width: 100%; height: 100%; display: block; }
.pd-reveal-demo__caption {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 0.72em;
  line-height: 1.4;
}
.pd-reveal-demo__caption strong {
  color: var(--op-primary);
  font-weight: 700;
  font-size: 1.05em;
}
.pd-reveal-demo__caption span { color: var(--op-muted); }

/* Phone mock for reveal slide (optional decoration) */
.pd-reveal-visual {
  position: absolute;
  right: 64px; top: 56px;
  width: 140px; height: 280px;
  border: 10px solid #0f172a;
  border-radius: 26px;
  background: linear-gradient(180deg, var(--op-primary), var(--op-accent));
  overflow: hidden;
  box-shadow: 0 20px 40px -10px rgba(15,23,42,0.3);
  z-index: 0;
  opacity: 0.95;
}
.pd-reveal-visual::before {
  content: "SCAN ME";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.95);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.2em;
}
.pd-reveal-visual::after {
  content: "";
  position: absolute;
  top: 8px; left: 50%; transform: translateX(-50%);
  width: 40px; height: 6px; border-radius: 3px;
  background: #0f172a;
}

/* ---- Headline + footer + download ------------------------------------- */

.pd-headline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.2em;
  gap: 24px;
}

.pd-footer {
  position: fixed;
  bottom: 14px; left: 24px;
  font-size: 11px;
  color: var(--op-muted-2);
  letter-spacing: 0.02em;
  z-index: 30;
  opacity: 0.7;
  transition: opacity 120ms ease;
}
body.pd-on-title .pd-footer { display: none; }
body.pd-on-dark  .pd-footer { color: rgba(255,255,255,0.55); }

.pd-download {
  position: fixed;
  top: 18px; right: 18px;
  z-index: 40;
  background: var(--op-ink);
  color: #fff !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 8px 14px;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 4px 12px -2px rgba(15,23,42,0.2);
}
.pd-download:hover { background: var(--op-primary); color: #fff; }

/* ---- Split + quote + kvs ---------------------------------------------- */

.pd-split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 40px;
  align-items: center;
}

.pd-quote {
  font-size: 1.5em;
  line-height: 1.25;
  color: var(--op-ink);
  font-weight: 600;
  letter-spacing: -0.02em;
  max-width: 900px;
  border-left: 4px solid var(--op-primary);
  padding-left: 22px;
}
.pd-quote__attr {
  font-size: 0.55em;
  color: var(--op-muted);
  margin-top: 0.8em;
  font-weight: 500;
}

.pd-kvs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 22px;
  margin-top: 0.6em;
  padding: 22px;
  background: rgba(29,78,216,0.04);
  border-radius: 14px;
  border: 1px solid var(--op-line);
}
.pd-kv {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px dashed var(--op-line);
  padding: 8px 0;
  font-size: 0.68em;
}
.pd-kv:last-child, .pd-kv:nth-last-child(2) { border-bottom: none; }
.pd-kv--wide { grid-column: 1 / -1; }
.pd-kv strong { color: var(--op-ink); font-weight: 700; }
.pd-kv span { color: var(--op-muted); font-weight: 600; text-align: right; }

/* ---- Comparison (Milka vs onpack) -------------------------------------- */

.pd-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 0.8em;
}
.pd-compare__col {
  border: 1px solid var(--op-line);
  border-radius: 16px;
  padding: 28px;
  background: var(--op-bg-alt);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.pd-compare__col--ours {
  background:
    radial-gradient(400px 300px at 100% 0%, rgba(255,255,255,0.4), transparent 60%),
    linear-gradient(135deg, var(--op-primary-soft) 0%, #ffffff 100%);
  border-color: var(--op-primary);
  box-shadow: 0 10px 30px -18px rgba(29,78,216,0.3);
}
.pd-compare__head { position: relative; }
.pd-compare__brand {
  font-size: 0.5em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--op-muted);
  font-weight: 700;
}
.pd-compare__title {
  font-size: 1em;
  font-weight: 800;
  color: var(--op-ink);
  margin-top: 4px;
  letter-spacing: -0.02em;
}
.pd-compare__count {
  position: absolute;
  top: -4px; right: 0;
  font-size: 2.6em;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--op-muted-2);
  opacity: 0.6;
}
.pd-compare__col--ours .pd-compare__count {
  background: linear-gradient(120deg, var(--op-primary) 0%, var(--op-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 1;
}
.pd-compare__steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  counter-reset: pdstep;
}
.pd-compare__steps li {
  counter-increment: pdstep;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.72em;
  color: var(--op-ink-2);
  line-height: 1.4;
}
.pd-compare__steps li::before {
  content: counter(pdstep);
  flex: 0 0 auto;
  width: 28px; height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--op-line);
  color: var(--op-muted);
  font-weight: 700;
  font-size: 0.9em;
}
.pd-compare__col--ours .pd-compare__steps li::before {
  background: var(--op-primary);
  color: #fff;
  border-color: var(--op-primary);
  box-shadow: 0 4px 10px -3px rgba(29,78,216,0.4);
}
.pd-compare__foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed var(--op-line);
  font-size: 0.6em;
  color: var(--op-muted);
  line-height: 1.5;
}
.pd-compare__col--ours .pd-compare__foot { border-top-color: rgba(29,78,216,0.25); }

/* Print-specific tweaks for PDF export (decktape → headless Chrome).
   Addresses three classes of issues that appear only in PDF output:
   1. Saturation loss on gradients/shadows (needs print-color-adjust: exact)
   2. Body-painted backgrounds with background-attachment: fixed don't travel
      with each slide — so dark-theme slides render white. Repaint on section.
   3. -webkit-background-clip: text at large sizes rasterizes with horizontal
      artifacts; fall back to solid color. */
/* decktape (Puppeteer) captures screen media, so @media print never fires
   during PDF build. The layout adds .pd-print to <body> when the UA is
   HeadlessChrome; these rules apply then. Kept in sync with @media print
   below (real print preview / Cmd-P). */
.pitchdeck-body.pd-print .pd-download,
.pitchdeck-body.pd-print .pd-footer { display: none !important; }

.pitchdeck-body.pd-print,
.pitchdeck-body.pd-print * {
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
  font-feature-settings: normal !important;
  font-variant: normal !important;
}

.pitchdeck-body.pd-print.pd-on-title,
.pitchdeck-body.pd-print.pd-on-dark {
  background-attachment: scroll !important;
}

.pitchdeck-body.pd-print .reveal .slides section.pd-section-title {
  background:
    radial-gradient(1400px 900px at 90% -10%, rgba(37,99,235,0.18), transparent 60%),
    radial-gradient(900px 600px at -5% 110%, rgba(30,58,138,0.12), transparent 65%),
    linear-gradient(180deg, #ffffff 0%, #fbfbff 100%) !important;
}
/* Origins pushed outside the slide so the peak of each radial falls off-canvas.
   A radial with its peak exactly at 100% 0% paints a visible disc at the
   corner, and some PDF viewers (Chrome PDFium, Preview on certain builds)
   trace a thin seam where the radial meets the slide edge. Move the peaks
   off-slide: the slide gets the falloff, not the center. */
.pitchdeck-body.pd-print .reveal .slides section.pd-section-dark {
  background:
    radial-gradient(1200px 800px at 115% -15%, rgba(30,58,138,0.28), transparent 65%),
    radial-gradient(1400px 900px at -15% 115%, rgba(29,78,216,0.32), transparent 65%),
    linear-gradient(180deg, #0b1020 0%, #0f1530 100%) !important;
}

/* Soft card shadows rasterize as solid grey rectangles in some PDF viewers
   (Chrome PDFium, Preview on certain builds): the blur is dropped and what is
   left is the shadow's bounding box, filled flat. On a slide that is a grey
   slab sitting over the headline underneath it.
 
   This was fixed twice by naming the elements that had been noticed — first
   .pd-step__n and the compare steps, then .pd-reveal-demo and the compare
   columns — and both times the ones nobody had opened in a PDF yet kept their
   shadows. The third round was .pd-phone and .pd-jarqr__code, reported from a
   downloaded deck. Enumerating loses to a sweep here for the same reason it
   does everywhere else: the list is only ever as complete as the last person's
   scroll.
 
   So: no element in the printed deck has a box-shadow, and the two that need
   one back say so below. A blurred shadow added to this file next year is
   safe by default rather than safe by somebody remembering.
 
   Nothing loses definition by it. .pd-phone has its bezel border and
   .pd-jarqr__code its hairline, which is what actually separates them from the
   page — the shadow was only ever lift. */
.pitchdeck-body.pd-print .reveal .slides * {
  box-shadow: none !important;
}
/* The exceptions, and they are rings rather than shadows: zero offset, zero
   blur, spread only. A renderer that drops blur draws these exactly as
   intended because there is no blur to drop, and the timeline dot needs its
   white ring to punch through the line it sits on. */
.pitchdeck-body.pd-print .reveal .slides .pd-tl__dot {
  box-shadow: 0 0 0 4px #fff !important;
}
.pitchdeck-body.pd-print .reveal .slides .pd-tag::before {
  box-shadow: 0 0 0 3px rgba(29,78,216,0.18) !important;
}
.pitchdeck-body.pd-print .pd-reveal-demo {
  border: 1px solid var(--op-line, rgba(15,23,42,0.08)) !important;
}
/* The "With onpack" card has a white radial highlight at 100% 0% on top
   of a linear gradient. Some PDF viewers invert/darken that highlight
   into a metallic shadow. Drop the radial in print — flat gradient only. */
.pitchdeck-body.pd-print .pd-compare__col--ours {
  background: linear-gradient(135deg, var(--op-primary-soft) 0%, #ffffff 100%) !important;
}

/* background-clip: text + color: transparent sometimes survives into the
   PDF as an un-clipped filled rectangle (the text clip gets dropped but the
   gradient doesn't). Force flat color in print, and use `initial` for the
   clip so no residue lingers. */
.pitchdeck-body.pd-print .pd-title-slide__title .accent,
.pitchdeck-body.pd-print .pd-stat,
.pitchdeck-body.pd-print .pd-compare__col--ours .pd-compare__count {
  background: transparent !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: var(--op-primary) !important;
  color: var(--op-primary) !important;
}
.pitchdeck-body.pd-print .reveal .slides section.pd-section-dark .pd-title-slide__title .accent,
.pitchdeck-body.pd-print .pd-big .accent,
.pitchdeck-body.pd-print .reveal .slides section.pd-section-dark .pd-stat,
.pitchdeck-body.pd-print .pd-title-slide__rally em {
  background: transparent !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #c7d2fe !important;
  color: #c7d2fe !important;
}

@media print {
  .pd-download, .pd-footer { display: none !important; }

  .pitchdeck-body,
  .pitchdeck-body * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    font-feature-settings: normal !important;
    font-variant: normal !important;
  }

  .pitchdeck-body.pd-on-title,
  .pitchdeck-body.pd-on-dark {
    background-attachment: scroll !important;
  }

  .pitchdeck-body .reveal .slides section.pd-section-title {
    background:
      radial-gradient(1400px 900px at 90% -10%, rgba(37,99,235,0.18), transparent 60%),
      radial-gradient(900px 600px at -5% 110%, rgba(30,58,138,0.12), transparent 65%),
      linear-gradient(180deg, #ffffff 0%, #fbfbff 100%) !important;
  }
  .pitchdeck-body .reveal .slides section.pd-section-dark {
    background:
      radial-gradient(1200px 800px at 115% -15%, rgba(30,58,138,0.28), transparent 65%),
      radial-gradient(1400px 900px at -15% 115%, rgba(29,78,216,0.32), transparent 65%),
      linear-gradient(180deg, #0b1020 0%, #0f1530 100%) !important;
  }

  /* Same sweep as the .pd-print block above, for a reader who hits Cmd-P on
     the deck rather than downloading the built PDF. Kept in step with it by
     hand; they are the same rule for two different renderers. */
  .reveal .slides * { box-shadow: none !important; }
  .reveal .slides .pd-tl__dot { box-shadow: 0 0 0 4px #fff !important; }
  .reveal .slides .pd-tag::before { box-shadow: 0 0 0 3px rgba(29,78,216,0.18) !important; }
  .pd-reveal-demo { border: 1px solid var(--op-line, rgba(15,23,42,0.08)) !important; }
  .pd-compare__col--ours {
    background: linear-gradient(135deg, var(--op-primary-soft) 0%, #ffffff 100%) !important;
  }

  .pd-title-slide__title .accent,
  .pd-stat,
  .pd-compare__col--ours .pd-compare__count {
    background: transparent !important;
    background-image: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: var(--op-primary) !important;
    color: var(--op-primary) !important;
  }
  .pitchdeck-body .reveal .slides section.pd-section-dark .pd-title-slide__title .accent,
  .pitchdeck-body .reveal .slides section.pd-section-dark .pd-stat,
  .pd-title-slide__rally em {
    background: transparent !important;
    background-image: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: #c7d2fe !important;
    color: #c7d2fe !important;
  }
}

/* A title slide with no gradient: the pack shot's own white background has to
   disappear into it. Last in the file on purpose — the print block above sets
   the title gradient with !important and equal specificity. */
.pitchdeck-body .reveal .slides section.pd-section-flat,
.pitchdeck-body.pd-print .reveal .slides section.pd-section-flat { background: #fff !important; }
.pitchdeck-body.pd-on-title:has(section.pd-section-flat.present) { background: #fff !important; }
.pitchdeck-body.pd-on-title:has(section.pd-section-flat.present)::before,
.pitchdeck-body.pd-on-title:has(section.pd-section-flat.present)::after { display: none !important; }

/* ---- v3 ------------------------------------------------------------------ */
/* Opening slide, set like the homepage hero: left-aligned, the name on top,
   the slogan as the headline with its second line in brand blue. The slogan
   is an h1, so the size has to outrank the deck's h1 rule. */
.pd-open { justify-content: center; align-items: flex-start; text-align: left; position: relative; padding-left: 20px; }
.pd-open__mark { font-size: 5.2em; font-weight: 800; letter-spacing: -0.06em; line-height: 1; color: var(--op-ink); }
.pitchdeck-body .reveal .pd-open__slogan { font-size: 2.9em; line-height: 1.02; letter-spacing: -0.035em; margin: 0.55em 0 0; white-space: nowrap; }
.pd-open__slogan .accent { font-style: normal; color: var(--op-primary); -webkit-text-fill-color: currentColor; background: none; }
.pd-open .pd-title-slide__foot { position: absolute; left: 0; right: 0; bottom: 8px; }

/* 1D → 2D */
.pd-shift { display: flex; align-items: center; justify-content: center; gap: 40px; margin-top: 0.6em; }
.pd-shift__side { display: flex; flex-direction: column; align-items: center; width: 340px; }
.pd-shift__side strong { font-size: 1.15em; letter-spacing: -0.02em; margin-top: 18px; }
.pd-shift__side span { font-size: 0.7em; color: var(--op-muted); }
.pd-shift__art { height: 240px; display: flex; align-items: center; justify-content: center; }
.pd-ean { width: 360px; height: auto; color: var(--op-ink); }
.pd-shift__art--qr svg { width: 232px; height: 232px; display: block; }
.pd-shift__arrow { width: 190px; height: auto; transform: translateY(-50px); }
.pd-lede--center { margin-left: auto; margin-right: auto; text-align: center; }
.pd-slide--center .pd-footqr { justify-content: center; margin-top: 18px; }
.pitchdeck-body .reveal .slides section.pd-section-dark .pd-footqr { color: rgba(255,255,255,0.6); margin-top: 22px; }
.pitchdeck-body .reveal .slides section.pd-section-dark .pd-footqr svg { background: #fff; padding: 3px; border-radius: 4px; box-sizing: border-box; }

/* The jar with its code on the pack */
.pd-jarqr { position: relative; flex: 0 0 auto; }
.pd-jarqr__jar { height: 400px; width: auto; display: block; }
.pd-jarqr__code { position: absolute; right: -28px; bottom: 34px; background: #fff; padding: 8px; border-radius: 10px; box-shadow: 0 12px 30px -10px rgba(15,23,42,0.35); border: 1px solid var(--op-line); }
.pd-jarqr__code svg { width: 96px; height: 96px; display: block; }

/* Two products, side by side */
.pd-two { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 0.5em; text-align: center; }
.pd-two__mark { color: var(--op-primary); }
/* Jars stand on one floor: the art boxes align to the bottom, and the PI jar
   is shifted left by half its code so jar + code read as one centred object. */
.pd-two__art { height: 300px; display: flex; align-items: flex-end; justify-content: center; gap: 22px; margin-bottom: 18px; }
.pd-two__art .pd-jarqr--sm { transform: translateX(-67px); }
.pd-two__qr { background: #fff; padding: 8px; border-radius: 10px; border: 1px solid var(--op-line); }
.pd-two__qr svg { width: 96px; height: 96px; display: block; }
.pd-two .pd-phone--sm { width: 150px; height: 300px; border-radius: 24px; border-width: 5px; }
.pd-two__lid { height: 300px; width: auto; mix-blend-mode: multiply; }
.pd-two__name { font-size: 1.1em; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--op-primary); margin-bottom: 14px; }
.pd-two__name em { font-style: normal; font-weight: 600; font-size: 0.6em; color: var(--op-muted-2); letter-spacing: 0.04em; margin-left: 8px; text-transform: none; vertical-align: 0.15em; }
.pd-two h3 { font-size: 1.35em; margin: 0 0 8px; letter-spacing: -0.02em; }
.pitchdeck-body .reveal .pd-two p { font-size: 0.78em; color: var(--op-muted); margin: 0 auto; max-width: 440px; line-height: 1.45; }

/* Punches stacked beside a phone */
.pd-split { display: grid; grid-template-columns: 1fr auto; gap: 60px; align-items: center; margin-top: 0.4em; }
.pd-punch--stack { grid-template-columns: 1fr; gap: 26px; margin-top: 0; }

/* Price slides anchor to the top so the number sits at the same height on
   both, however long the punches beneath it run. */
.pd-slide--price { justify-content: flex-start; padding-top: 0.9em; }
.pd-slide--price h2 { margin-bottom: 0.2em; }
/* Product eyebrow above a price slide */
.pd-slide--de .pd-lede--price { font-size: 0.85em; margin: 0.1em 0 0.3em; }
.pd-lede--price + .pd-punch { margin-top: 0.6em; }
.pd-product { font-size: 0.75em; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--op-primary); margin-bottom: 0.6em; }
.pd-price__ab { font-size: 2em; font-weight: 700; color: var(--op-muted); margin-right: -4px; }
.pd-facts--dates strong { font-size: 0.95em; }
.pitchdeck-body .reveal .slides section.pd-section-dark .pd-big--sm { font-size: 4em; }
.pd-code--tight { font-size: 1.4em; gap: 6px; margin-top: 0.3em; }
.pd-code--tight + .pd-sub + .pd-facts { margin-top: 0.7em; }
.pd-jarqr--sm .pd-jarqr__jar { height: 290px; }
.pd-jarqr--sm .pd-jarqr__code { right: -22px; bottom: 22px; padding: 6px; }
.pd-jarqr--sm .pd-jarqr__code svg { width: 76px; height: 76px; }
.pd-waves { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 320px; pointer-events: none; z-index: 0; }
.pd-section-flat .pd-slide { position: relative; z-index: 1; }