/* The product-tour deck (/presentation/): stage, slides, typography, device frames,
   chrome. Loaded on that page only — the app pages keep their no-extra-CSS rule.
   Colours are theme tokens only, so the site palette, light/dark mode and the RTL
   build all apply. The build-step effects live in presentation-fx.css. No drop shadows
   anywhere (user decision): borders alone define cards, frames and images.

   The stage is authored at 1920x1080 (or 1080x1920 on a portrait phone) and scaled
   to the window through --deck-scale, which static/js/presentation/deck-stage.js
   measures. Pixel sizes below are therefore canvas pixels, not screen pixels. */

/* The app's own neutral page surface (its pages are bg-body-tertiary with bg-body
   cards), in light and dark alike — deliberately no gradient (user decision). */
html, body.deck-body { height: 100%; }
body.deck-body { margin: 0; overflow: hidden; background: var(--bs-tertiary-bg); }

.deck { position: fixed; inset: 0; overflow: hidden; }
/* Anchored at the centre and translated back, never grid-centred: a grid item wider
   than its cell overflows towards the INLINE START, so an RTL deck on a screen narrower
   than 1920px used to lose the start of every slide (measured at 1366x768). */
.deck-stage {
  position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px;
  transform: translate(-50%, -50%) scale(var(--deck-scale, 1)); transform-origin: center center;
}
.deck-portrait .deck-stage { width: 1080px; height: 1920px; }

/* ---- Slides -------------------------------------------------------------------- */
.slide {
  --dirx: 1;
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; gap: 36px;
  padding: 88px 120px 110px;
  opacity: 0; visibility: hidden;
  transform: translateX(calc(var(--dirx) * 6%)) scale(.98);
  transition: opacity .6s ease, transform .9s cubic-bezier(.2, .7, .1, 1), visibility 0s linear .9s;
}
.slide.is-before { --dirx: -1; }
[dir="rtl"] .slide { --dirx: -1; }
[dir="rtl"] .slide.is-before { --dirx: 1; }
.slide.is-active {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .6s ease .1s, transform .9s cubic-bezier(.2, .7, .1, 1), visibility 0s;
}
.deck-portrait .slide { padding: 110px 72px 150px; gap: 44px; }

/* ---- Type ------------------------------------------------------------------------ */
.s-eyebrow {
  display: inline-flex; align-items: center; gap: 14px; align-self: flex-start;
  font-size: 26px; font-weight: 700; color: var(--theme-text-primary, var(--bs-primary));
  background: var(--bs-primary-bg-subtle); border-radius: 999px; padding: 8px 24px;
}
.s-eyebrow .s-num { opacity: .6; }
.s-title { font-size: 76px; font-weight: 700; line-height: 1.3; margin: 0; padding-block: .08em; }
.s-hero { font-size: 128px; font-weight: 700; line-height: 1.25; margin: 0; }
.s-lead { font-size: 36px; line-height: 1.45; color: var(--bs-secondary-color); margin: 0; }
.s-text { font-size: 28px; line-height: 1.5; margin: 0; }
.s-small { font-size: 22px; color: var(--bs-secondary-color); }
.s-accent { color: var(--theme-text-primary, var(--bs-primary)); }
:lang(en) .s-caps { text-transform: uppercase; letter-spacing: .08em; }
.deck-portrait .s-title { font-size: 70px; }
.deck-portrait .s-hero { font-size: 120px; }

/* Bootstrap's .fs-1…3 grow with the VIEWPORT below 1200px (calc with vw); on the scaled
   canvas every size must be a canvas size, or text drifts on a phone. Pinned here. */
.deck-stage .fs-1 { font-size: 40px !important; }
.deck-stage .fs-2 { font-size: 32px !important; }
.deck-stage .fs-3 { font-size: 28px !important; }
.deck-stage .fs-4 { font-size: 24px !important; }
.deck-stage .fs-5 { font-size: 20px !important; }
.deck-stage .fs-6 { font-size: 17px !important; }

/* ---- Layout helpers ------------------------------------------------------------ */
.s-body { flex: 1 1 auto; min-height: 0; display: flex; gap: 72px; align-items: center; }
.s-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.s-col-wide { flex: 1.7 1 0; }
.s-center { justify-content: center; align-items: center; text-align: center; }
.s-grid { display: grid; gap: 32px; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.deck-portrait .s-body { flex-direction: column; align-items: stretch; }
/* grid-template-columns directly, not --cols: an inline style="--cols: 5" on the element
   would outrank a stylesheet --cols override, and the portrait grid would never stack. */
.deck-portrait .s-grid { grid-template-columns: repeat(var(--pcols, 2), minmax(0, 1fr)); }

/* A feature card, the app's own card language scaled up. */
.s-card {
  background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
  border-radius: 28px; padding: 26px 32px;
  display: flex; flex-direction: column; gap: 12px;
}
.s-card h3 { font-size: 32px; font-weight: 700; margin: 0; }
.s-card p { font-size: 23px; line-height: 1.45; margin: 0; color: var(--bs-secondary-color); }
.s-icon {
  width: 76px; height: 76px; border-radius: 24px; flex: none;
  display: inline-flex; align-items: center; justify-content: center; font-size: 42px;
  background: var(--bs-primary-bg-subtle); color: var(--theme-text-primary, var(--bs-primary));
}
.s-icon.is-success { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.s-icon.is-warning { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.s-icon.is-danger { background: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); }
.s-icon.is-info { background: var(--bs-info-bg-subtle); color: var(--bs-info-text-emphasis); }
.s-card.is-row { flex-direction: row; align-items: center; gap: 24px; }
.s-card.is-compact { padding: 16px 26px; gap: 20px; }
.s-card.is-compact h3 { font-size: 28px; }
.s-card.is-compact p { font-size: 21px; }
.s-card.is-compact .s-icon { width: 60px; height: 60px; font-size: 32px; border-radius: 18px; }
/* A browser frame that must leave room for a line above/below it caps its own width. */
.dev-browser, .dev-pair { max-width: var(--browser-max, 100%); }
.s-card.is-row > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.s-chip {
  display: inline-flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 700;
  padding: 10px 22px; border-radius: 999px; border: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg);
}
.s-pill { font-size: 20px; padding: 6px 16px; border-radius: 999px; font-weight: 700; }
.s-kpi-value { font-size: 44px; font-weight: 700; line-height: 1.1; white-space: nowrap; }
.s-kpi-note { font-size: 20px; color: var(--bs-secondary-color); }

/* ---- Device frames ------------------------------------------------------------- */
.dev { margin: 0; position: relative; }
.dev-screen { overflow: hidden; background: var(--bs-tertiary-bg); }
.dev-screen video, .dev-screen img { display: block; width: 100%; height: auto; }
.dev-browser {
  border-radius: 22px; border: 1px solid var(--bs-border-color); overflow: hidden;
  background: var(--bs-body-bg);
}
.dev-bar {
  display: flex; align-items: center; gap: 18px; height: 52px; padding: 0 22px;
  background: var(--bs-tertiary-bg); border-bottom: 1px solid var(--bs-border-color);
}
.dev-dots { display: inline-flex; gap: 10px; }
.dev-dots i { width: 14px; height: 14px; border-radius: 50%; background: var(--bs-border-color); }
.dev-dots i:first-child { background: var(--bs-danger); }
.dev-dots i:nth-child(2) { background: var(--bs-warning); }
.dev-dots i:last-child { background: var(--bs-success); }
.dev-url {
  flex: 1; max-width: 640px; margin-inline: auto; font-size: 18px; color: var(--bs-secondary-color);
  background: var(--bs-body-bg); border-radius: 999px; padding: 6px 20px; direction: ltr;
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* A phone bezel is dark hardware in every theme, so it is fixed, not a token. Squared
   corners, a minimal radius and no notch (user decision) — the screen is the subject. */
.dev-phone {
  width: var(--phone-w, 330px); padding: 10px; border-radius: 16px; background: #0d0f12;
  box-shadow: inset 0 0 0 2px #2a2d33; flex: none;   /* the bezel's edge, not a drop shadow */
}
/* On a dark slide the black bezel would vanish into the page: a hairline keeps its edge. */
[data-bs-theme="dark"] .dev-phone { outline: 1px solid var(--bs-border-color); }
.dev-phone .dev-screen { border-radius: 8px; }
/* Desktop and phone side by side, bottom-aligned, never layered over each other. */
.dev-pair { display: flex; align-items: flex-end; gap: 36px; width: 100%; }
.dev-pair > .dev-browser { flex: 1 1 auto; min-width: 0; }
.dev-caption { font-size: 22px; color: var(--bs-secondary-color); text-align: center; margin-top: 16px; }

/* ---- Chrome (fixed, unscaled) -------------------------------------------------- */
.deck-progress {
  position: fixed; inset-inline: 0; bottom: 0; height: 5px; z-index: 20;
  background: var(--bs-border-color-translucent);
}
.deck-progress > span {
  display: block; height: 100%; width: var(--deck-progress, 0%); background: var(--bs-primary);
  transition: width .6s cubic-bezier(.2, .7, .1, 1);
}
.deck-chrome {
  position: fixed; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); inset-inline-end: 18px;
  z-index: 21; display: flex; align-items: center; gap: 8px; transition: opacity .4s ease;
}
.deck-idle .deck-chrome { opacity: .12; }
.deck-counter { font-size: .9rem; font-variant-numeric: tabular-nums; direction: ltr; }
.deck-overview {
  position: fixed; inset: 0; z-index: 30; overflow: auto; padding: 5vh 5vw;
  background: rgba(var(--bs-body-bg-rgb), .96); display: none;
}
.deck-overview.is-open { display: block; }
.deck-overview-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }

/* ---- Print / PDF (?print=1): one page per slide, every build step shown ------------ */
@page { size: 1920px 1080px; margin: 0; }
.deck-print, .deck-print body {
  overflow: visible; height: auto;
  /* Surfaces, pills and strips print even with "Background graphics" off in the dialog. */
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.deck-print .deck { position: static; display: block; }
.deck-print .deck-stage { position: static; transform: none; width: 1920px; height: auto; }
.deck-print .slide {
  position: relative; opacity: 1; visibility: visible; transform: none; transition: none;
  width: 1920px; height: 1080px; break-after: page; overflow: hidden;
}
.deck-print .deck-chrome, .deck-print .deck-progress { display: none; }

/* A row of numbered milestones joined by connectors that run BETWEEN the nodes (never
   behind them): each step but the last draws its connector toward the next once shown. */
.s-track {
  --node: 128px; --gap: 32px; display: grid; gap: var(--gap);
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); align-items: stretch;
}
.s-track-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.s-track-node {
  width: var(--node); height: var(--node); border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center; font-size: calc(var(--node) * .42);
}
.s-track-step:not(:last-child)::after {
  content: ''; position: absolute; top: calc(var(--node) / 2 - 4px); height: 8px; border-radius: 8px;
  inset-inline-start: calc(50% + var(--node) / 2 + 20px);
  width: calc(100% + var(--gap) - var(--node) - 40px);
  background: var(--track-color, var(--bs-success)); transform: scaleX(0); transform-origin: left;
  transition: transform .9s cubic-bezier(.6, 0, .2, 1) .45s;
}
[dir="rtl"] .s-track-step:not(:last-child)::after { transform-origin: right; }
.s-track-step.is-shown::after, .deck-print .s-track-step::after { transform: scaleX(1); }
.s-track-step > .s-card { flex: 1 1 auto; width: 100%; text-align: start; }
/* A track that wraps on a portrait phone keeps its nodes but drops the connectors,
   which would otherwise point off the end of each row. */
.deck-portrait .s-track.is-wrap { grid-template-columns: repeat(var(--pcols, 2), minmax(0, 1fr)); }
.deck-portrait .s-track.is-wrap .s-track-step::after { display: none; }

/* Portrait phone: the slides whose extra visual cannot fit a stacked column drop it. */
.deck-portrait .s-hide-portrait { display: none !important; }
.deck-portrait .fx-fan { gap: 56px !important; }
.deck-portrait .fx-fan img { width: 240px !important; }

/* A still that exists in both themes renders both images; the theme picks one. */
.deck-only-dark { display: none !important; }
[data-bs-theme="dark"] .deck-only-dark { display: block !important; }
[data-bs-theme="dark"] .deck-only-light { display: none !important; }