/* ==========================================================================
   JomCloud slide deck
   Layered on top of assets/styles.css — inherits the brand tokens (--indigo,
   --ink, --hairline …) and the Inter/thin-weight display type.

   Everything inside a slide is sized in `em`, and `.deck` sets its font-size
   from the viewport. One number therefore scales a whole slide to any
   projector, laptop or print page.
   ========================================================================== */

html.deck-html, body.deck-body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--dark-900);
}

.deck {
  position: relative;
  width: 100vw;
  height: 100vh;
  font-size: clamp(12px, min(1.34vw, 2.34vh), 24px);
}

/* --- slide shell --------------------------------------------------------- */

.slide {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  justify-content: center;
  padding: 4.2em 5em 5.4em;
  background: var(--canvas);
}
.slide.is-active { display: flex; animation: slide-in .32s cubic-bezier(.22,.61,.36,1) both; }

@keyframes slide-in {
  from { opacity: 0; transform: translateY(.6em); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .slide.is-active { animation: none; }
}

.slide-inner { width: 100%; max-width: 66em; margin: 0 auto; }

/* --- slide typography ---------------------------------------------------- */

.s-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-size: .78em;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--indigo);
  background: var(--indigo-tint);
  border-radius: 9999px;
  padding: .5em 1em;
  margin-bottom: 1.5em;
}
.s-eyebrow .q { color: var(--ink-mute); font-weight: 400; }

.slide h2 {
  font-size: 2.5em;
  line-height: 1.06;
  letter-spacing: -.024em;
  font-weight: 300;
  margin: 0 0 .5em;
}
.slide h3 { font-size: 1.12em; font-weight: 500; letter-spacing: -.01em; margin: 0 0 .5em; }

.s-lede {
  font-size: 1.2em;
  line-height: 1.5;
  color: var(--ink-2);
  font-weight: 300;
  margin: 0 0 1.6em;
  max-width: 34em;
}
.slide p { margin: 0 0 .9em; }
.slide strong { font-weight: 600; color: var(--ink); }

/* --- layout helpers ------------------------------------------------------ */

.cols   { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4em; align-items: start; }
.cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4em; align-items: stretch; }
.cols.tight { gap: 1.6em; }

/* --- checklist ----------------------------------------------------------- */

.klist { list-style: none; margin: 0; padding: 0; display: grid; gap: .85em; }

/* The bullet is absolutely positioned rather than a flex sibling. A flex `li`
   would make every inline <strong> its own flex item, which breaks a bullet
   like "Run <strong>multiple campaigns</strong>, each with…" into columns. */
.klist li { position: relative; padding-left: 1.85em; line-height: 1.45; }
.klist li::before {
  content: "";
  position: absolute;
  left: 0; top: .18em;
  width: 1.15em; height: 1.15em;
  border-radius: 50%;
  background: var(--indigo-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23533afd' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/.72em no-repeat;
}
.klist.plain li::before { background-color: transparent; }
.klist.warn li::before {
  background: #fff4e5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b45309' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 8v5M12 17h.01'/%3E%3C/svg%3E") center/.72em no-repeat;
}
.klist.cross li::before {
  background: #fdeaf0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ea2261' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/.66em no-repeat;
}

/* --- cards --------------------------------------------------------------- */

.card {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  padding: 1.5em 1.6em;
  box-shadow: var(--shadow-1);
}
.card.soft   { background: var(--canvas-soft); box-shadow: none; }
.card.accent { border-color: var(--indigo-subdued); background: var(--indigo-tint); box-shadow: none; }
.card .price { font-size: 2.1em; font-weight: 300; letter-spacing: -.03em; line-height: 1; }
.card .price small { font-size: .38em; font-weight: 400; color: var(--ink-mute); letter-spacing: 0; }
.card .tag {
  display: inline-block; font-size: .72em; font-weight: 500; letter-spacing: .04em;
  text-transform: uppercase; color: var(--indigo); margin-bottom: .6em;
}

/* --- flow / architecture diagram ----------------------------------------- */

.flow { display: flex; align-items: stretch; gap: .55em; }
.flow.stack { flex-direction: column; }

.node {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .3em;
  background: var(--canvas-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1em .95em;
  text-align: center;
  line-height: 1.3;
}
.node .nt { font-weight: 500; font-size: .95em; }
.node .ns { font-size: .78em; color: var(--ink-mute); }
.node.hi { background: var(--indigo); border-color: var(--indigo); color: #fff; box-shadow: var(--shadow-2); }
.node.hi .ns { color: rgba(255,255,255,.78); }
.node.out { background: #fff; border-style: dashed; }

.arrow {
  flex: none;
  align-self: center;
  width: 1.9em;
  color: var(--indigo-subdued);
}
.arrow svg { width: 100%; display: block; }
.flow.stack .arrow { width: 1.2em; transform: rotate(90deg); margin: .1em auto; }

.flow-note { font-size: .82em; color: var(--ink-mute); text-align: center; margin-top: .9em; }

/* --- stat ---------------------------------------------------------------- */

.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2em; }
.stat { text-align: center; padding: 1.3em .8em; border: 1px solid var(--hairline); border-radius: var(--radius-xl); background: var(--canvas-soft); }
.stat .v { font-size: 2.1em; font-weight: 300; letter-spacing: -.03em; line-height: 1.05; color: var(--indigo); }
.stat .k { font-size: .82em; color: var(--ink-mute); margin-top: .35em; }

/* --- TBD placeholder badge ----------------------------------------------
   Deliberately loud. A deck with unfilled numbers must not be sent by
   accident, so these are impossible to miss on screen and in print.
   ------------------------------------------------------------------------ */

.tbd {
  display: inline-block;
  font-size: .82em;
  font-weight: 600;
  letter-spacing: .03em;
  color: #92400e;
  background: repeating-linear-gradient(45deg, #fef3c7, #fef3c7 6px, #fde68a 6px, #fde68a 12px);
  border: 1px dashed #b45309;
  border-radius: 6px;
  padding: .1em .55em;
}

/* --- title slide --------------------------------------------------------- */

.slide.title { background: var(--dark-900); color: #fff; }
.slide.title::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(50em 30em at 78% 12%, rgba(83,58,253,.55), transparent 62%),
    radial-gradient(38em 26em at 12% 88%, rgba(249,107,238,.28), transparent 60%);
  pointer-events: none;
}
.slide.title .slide-inner { position: relative; z-index: 1; }
.slide.title h2 { color: #fff; font-size: 3.4em; }
.slide.title .s-lede { color: rgba(255,255,255,.72); font-size: 1.3em; }
.slide.title .s-eyebrow { background: rgba(255,255,255,.12); color: #fff; }
.slide.title .meta { margin-top: 2.4em; font-size: .95em; color: rgba(255,255,255,.6); }

/* --- section divider ----------------------------------------------------- */

.slide.divider { background: var(--canvas-soft); }
.slide.divider h2 { font-size: 3em; }
.slide.divider .s-eyebrow { font-size: .85em; }

/* --- chrome (brand, counter, progress, arrows) --------------------------- */

.deck-chrome {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 3.4em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2.2em;
  font-size: clamp(12px, min(1.34vw, 2.34vh), 24px);
  pointer-events: none;
  z-index: 10;
}
.deck-chrome .brand { display: flex; align-items: center; gap: .5em; font-size: .82em; font-weight: 500; color: var(--ink-2); }
.deck-chrome .brand .mark { width: 1.5em; height: 1.5em; border-radius: .45em; background: linear-gradient(135deg, var(--indigo), var(--magenta)); display: grid; place-items: center; }
.deck-chrome .brand .mark svg { width: 1em; height: 1em; color: #fff; }
.deck-chrome .ctrl { display: flex; align-items: center; gap: .9em; pointer-events: auto; }
.deck-chrome .count { font-size: .8em; color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.deck-chrome .dl {
  display: inline-flex; align-items: center; gap: .4em;
  font-size: .78em; font-weight: 500; letter-spacing: .02em;
  color: var(--ink-2);
  border: 1px solid var(--hairline);
  border-radius: 9999px;
  padding: .45em .95em;
  background: #fff;
}
.deck-chrome .dl:hover { background: var(--indigo-tint); border-color: var(--indigo-subdued); color: var(--indigo); }
.deck-chrome .dl svg { width: 1em; height: 1em; }
.deck-chrome button {
  width: 2em; height: 2em;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: #fff;
  color: var(--ink-2);
  cursor: pointer;
  padding: 0;
}
.deck-chrome button:hover:not(:disabled) { background: var(--indigo-tint); border-color: var(--indigo-subdued); color: var(--indigo); }
.deck-chrome button:disabled { opacity: .35; cursor: default; }
.deck-chrome button svg { width: 1em; height: 1em; }

/* On the dark title slides the chrome must invert. The class goes on <body>,
   not on .deck — .deck-chrome is a sibling of .deck, not a descendant. */
.deck-body.on-dark .deck-chrome .brand { color: rgba(255,255,255,.85); }
.deck-body.on-dark .deck-chrome .count { color: rgba(255,255,255,.6); }
.deck-body.on-dark .deck-chrome button { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.24); color: #fff; }
.deck-body.on-dark .deck-chrome button:hover:not(:disabled) { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.36); color: #fff; }
.deck-body.on-dark .deck-chrome .dl { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.24); color: #fff; }
.deck-body.on-dark .deck-chrome .dl:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.36); color: #fff; }
.deck-body.on-dark .deck-hint { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); color: rgba(255,255,255,.75); box-shadow: none; }

.deck-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: var(--indigo);
  transition: width .3s cubic-bezier(.22,.61,.36,1);
  z-index: 11;
}

/* --- print: one slide per landscape page --------------------------------
   Chrome is dropped, every slide is forced visible, and the em base is
   pinned so slides render at a predictable size on paper.
   ------------------------------------------------------------------------ */

@page { size: A4 landscape; margin: 0; }

@media print {
  html.deck-html, body.deck-body { overflow: visible; height: auto; background: #fff; }
  .deck { width: auto; height: auto; font-size: 10.5pt; }
  .deck-chrome, .deck-progress, .deck-hint { display: none !important; }

  .slide {
    position: relative;
    inset: auto;
    display: flex !important;
    animation: none !important;
    width: 297mm;
    height: 209mm;          /* a hair under 210 so it can't spill to a 2nd page */
    padding: 14mm 18mm;
    break-after: page;
    page-break-after: always;
    overflow: hidden;
  }
  .slide:last-child { break-after: auto; page-break-after: auto; }

  .slide.title, .slide.title::after,
  .card.accent, .stat, .node, .node.hi, .tbd, .s-eyebrow {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* --- first-run hint ------------------------------------------------------ */

.deck-hint {
  position: fixed;
  bottom: 4.4em; left: 50%;
  transform: translateX(-50%);
  font-size: .8rem;
  color: var(--ink-mute);
  background: rgba(255,255,255,.92);
  border: 1px solid var(--hairline);
  border-radius: 9999px;
  padding: .5em 1.1em;
  box-shadow: var(--shadow-1);
  z-index: 12;
  transition: opacity .4s ease;
}
.deck-hint.gone { opacity: 0; pointer-events: none; }

/* --- narrow screens ------------------------------------------------------ */

@media (max-width: 820px) {
  .slide { padding: 3.4em 2em 5em; }
  .cols, .cols-3, .stat-row { grid-template-columns: 1fr; gap: 1.2em; }
  .flow { flex-direction: column; }
  .flow .arrow { width: 1.2em; transform: rotate(90deg); margin: .1em auto; }
}