/* ------------------------------------------------------------------
   Withdraw to crypto wallet - presentation deck
   Tokens, type and components carried over from ddesseva.me/portfolio.css
   ------------------------------------------------------------------ */

@font-face { font-family: 'Bricolage Grotesque'; src: url('assets/fonts/bricolage-500.ttf') format('truetype'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Bricolage Grotesque'; src: url('assets/fonts/bricolage-500.ttf') format('truetype'); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: 'Bricolage Grotesque'; src: url('assets/fonts/bricolage-600.ttf') format('truetype'); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: 'Bricolage Grotesque'; src: url('assets/fonts/bricolage-700.ttf') format('truetype'); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: 'Bricolage Grotesque'; src: url('assets/fonts/bricolage-800.ttf') format('truetype'); font-style: normal; font-weight: 800; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('assets/fonts/instrument-400.ttf') format('truetype'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('assets/fonts/instrument-400-italic.ttf') format('truetype'); font-style: italic; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('assets/fonts/instrument-500.ttf') format('truetype'); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('assets/fonts/instrument-600.ttf') format('truetype'); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('assets/fonts/instrument-600.ttf') format('truetype'); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('assets/fonts/jetbrains-mono-400.ttf') format('truetype'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('assets/fonts/jetbrains-mono-500.ttf') format('truetype'); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('assets/fonts/jetbrains-mono-600.ttf') format('truetype'); font-style: normal; font-weight: 600; font-display: swap; }

:root {
  --ink: #17142b;
  --ink-2: #3b3552;
  --ink-soft: #5b5473;
  --paper: #fbfaf7;
  --paper-2: #f4f1ea;
  --surface: #ffffff;
  --surface-tint: #f1edfd;
  --violet: #5326cf;
  --violet-2: #7c5ce8;
  --violet-dark: #2e1580;
  --lime: #d9ff71;
  --clay: #b8451f;
  --line: #e2dfd6;
  --line-dark: #c9c4b8;
  --line-dark-theme: #383150;
  --body-dark: #cdc7dd;
  --radius: 14px;

  --display: 'Bricolage Grotesque', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --body: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --sticky: 'Open Sans', 'Instrument Sans', Helvetica, Arial, sans-serif;

  --s: 1;           /* stage scale, set by deck.js */
  --fade: 340ms;
  --ease: ease-in-out;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--ink);
}

body {
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

img, video { display: block; max-width: none; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--lime); color: var(--ink); }

:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--violet-2);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: fixed; left: 12px; top: -80px; z-index: 200;
  background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 8px;
}
.skip-link:focus { top: 12px; }

.vh {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------
   Deck shell
   --------------------------------------------------------------- */

.deck { position: fixed; inset: 0; overflow: hidden; }

/* Slides cross-dissolve: the incoming slide fades up on top of the outgoing
   one, which holds at full opacity underneath until the fade finishes. Each
   slide carries its own opaque background, so the page never shows through. */
.slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 1;
  transition: opacity var(--fade) var(--ease), visibility 0s linear var(--fade);
}
.slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 3;
  transition: opacity var(--fade) var(--ease), visibility 0s;
}
.slide.is-leaving {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  z-index: 2;
  transition: none;
}
.slide--light { background: var(--paper); }
.slide--dark  { background: var(--ink); }

/* a slide that has been expanded scrolls instead of centring */
.slide.is-expanded { align-items: flex-start; overflow-y: auto; overscroll-behavior: contain; }

.fit {
  position: relative;
  flex: none;
  width: calc(1920px * var(--s));
  height: calc(1080px * var(--s));
  transition: height .42s cubic-bezier(.4, 0, .2, 1);
}
.stage {
  position: absolute;
  top: 0; left: 0;
  width: 1920px;
  height: 1080px;
  transform: scale(var(--s));
  transform-origin: 0 0;
}
.slide.is-expanded .stage { height: auto; min-height: 1080px; }

/* ---------------------------------------------------------------
   Absolute placement helper
   Every slide element is positioned with inline left/top/width.
   --------------------------------------------------------------- */

.e { position: absolute; }

/* ---------------------------------------------------------------
   Type scale
   --------------------------------------------------------------- */

.eyebrow {
  font-family: var(--mono); font-weight: 500; font-size: 20px;
  line-height: 1.2; letter-spacing: 2.8px; text-transform: uppercase;
  color: var(--violet); margin: 0;
}
.eyebrow--lime { color: var(--lime); }
.eyebrow--soft { color: var(--ink-soft); }

.lbl {
  font-family: var(--mono); font-weight: 500; font-size: 18px;
  line-height: 1.2; letter-spacing: 2.52px; text-transform: uppercase;
  color: var(--violet); margin: 0;
}
.lbl--lime { color: var(--lime); }
.lbl--soft { color: var(--ink-soft); }
.lbl--ink  { color: var(--ink); }

.h-xxl, .h-xl, .h1, .h2, .h3 {
  font-family: var(--display); font-weight: 700;
  letter-spacing: -.025em; margin: 0; color: var(--ink);
  /* no text-wrap: balance - Figma wraps on the measure, not balanced */
}
.h-xxl { font-size: 96px; line-height: 1.0;  letter-spacing: -2.4px; }
.h-xl  { font-size: 80px; line-height: 1.02; letter-spacing: -2px; }
.h1    { font-size: 72px; line-height: 1.02; letter-spacing: -1.8px; }
.h2    { font-size: 48px; line-height: 1.02; letter-spacing: -1.2px; }
.h3    { font-size: 34px; line-height: 1.12; letter-spacing: -.85px; }
.on-dark .h-xxl, .on-dark .h-xl, .on-dark .h1,
.on-dark .h2, .on-dark .h3 { color: #fff; }

.body-xl, .body-l, .body-ml, .body-m, .body-s {
  font-family: var(--body); font-weight: 400;
  color: var(--ink-2); margin: 0;
}
.body-xl { font-size: 36px; line-height: 1.4; }
.body-l  { font-size: 30px; line-height: 1.36667; }  /* Figma rounds this line box to 41px */
.body-ml { font-size: 28px; line-height: 1.35; }
.body-m  { font-size: 26px; line-height: 1.35; }
.body-s  { font-size: 20px; line-height: 1.4; }
.body-xs { font-family: var(--body); font-size: 16px; line-height: 1.35; color: var(--ink-2); margin: 0; }
.on-dark .body-xl, .on-dark .body-l, .on-dark .body-ml,
.on-dark .body-m, .on-dark .body-s, .on-dark .body-xs { color: var(--body-dark); }

/* colour utilities must beat the .on-dark defaults above */
.on-dark .t-ink,
.on-dark .t-white { color: #fff; }
.on-dark .t-lime { color: var(--lime); }
.on-dark .t-soft { color: #8d86a6; }
.on-dark .t-violet { color: var(--violet-2); }

.w-500 { font-weight: 500; }
.w-600 { font-weight: 600; }
.w-700 { font-weight: 700; }
.t-ink { color: var(--ink); }
.t-violet { color: var(--violet); }
.t-soft { color: var(--ink-soft); }
.t-white { color: #fff; }
.t-lime { color: var(--lime); }
.t-center { text-align: center; }
.t-right { text-align: right; }

/* The dot is drawn rather than left to ::marker, which sits on the baseline and
   so reads as low against the text. Figma centres it on the cap height, and
   ::marker takes no vertical-align, so the bullet is a positioned pseudo
   element: centred in the first line box, which lands on the cap centre. */
.bullets { margin: 0; padding-left: 45px; list-style: none; }
.bullets li { position: relative; margin: 0 0 18px; }
.bullets li::before {
  content: "";
  position: absolute;
  left: -23.5px;
  top: .68em;            /* fallback for browsers without the lh unit */
  top: calc(1lh / 2);
  width: .19em; height: .19em;
  margin: -.095em 0 0 -.095em;
  border-radius: 50%;
  background: currentColor;
}
.bullets li:last-child { margin-bottom: 0; }
/* a true blank line between bullets, as several frames have */
.bullets--airy li { margin-bottom: 1.35em; }
/* no gap at all, as the research and workshop frames have */
.bullets--tight li { margin-bottom: 0; }

.rule { background: var(--line); height: 1px; }
.on-dark .rule, .rule--dark { background: var(--line-dark-theme); }

/* ---------------------------------------------------------------
   Cards and surfaces
   --------------------------------------------------------------- */

.card {
  background: var(--surface-tint);
  border-radius: 16px;
  padding: 36px;
}
.card--quote { border-radius: 22px; }
.card--white { background: var(--surface); border: 1px solid var(--line); }
.card--dark  { background: #211c3b; border: 1px solid var(--line-dark-theme); }
.card--lime  { background: var(--lime); }

.quote {
  font-family: var(--display); font-weight: 300; font-size: 34px;
  line-height: 1.18; letter-spacing: -.51px; color: var(--ink); margin: 0;
}

.shot { border-radius: var(--radius); overflow: hidden; }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot--contain img { object-fit: contain; }
.img-cover { width: 100%; height: 100%; object-fit: cover; }
.img-contain { width: 100%; height: 100%; object-fit: contain; }

/* Sticky notes, as on the workshop boards. The note is a flex box only to
   centre its text; the text itself sits in one child so mixed bold and plain
   runs stay in normal inline flow instead of becoming separate flex items. */
.sticky > .sticky__t { display: block; width: 100%; }
.sticky {
  display: flex; align-items: center; justify-content: center;
  padding: 10px 11px;
  font-family: var(--sticky); font-size: 15px; line-height: 1.35;
  color: #1a1a1a; text-align: center;
  box-shadow: 0 6.4px 7.9px -4.3px rgba(0, 0, 0, .22);
}
.sticky--pink   { background: linear-gradient(180deg, #f6c8db 0%, #f9d4e3 100%); }
.sticky--blue   { background: linear-gradient(180deg, #a3c2f0 0%, #b0cbf3 100%); }
.sticky--yellow { background: linear-gradient(180deg, #fdef86 0%, #fff8b2 100%); }
.sticky--green  { background: linear-gradient(180deg, #d8eeb4 0%, #e4f4c8 100%); }

.sticky-grid { display: grid; gap: 16px; }

/* status chips, same values as the case study */
.variant-chip {
  display: inline-flex; align-items: center; min-height: 30px;
  padding: 6px 12px; border-radius: 999px;
  font: 500 10.5px/1.25 var(--mono);
  letter-spacing: .045em; text-transform: uppercase;
}
.variant-chip--green  { background: #edf7d9; color: #3f6212; }
.variant-chip--red    { background: #fdeae2; color: var(--clay); }
.variant-chip--violet { background: var(--surface-tint); color: var(--violet); }

/* ---------------------------------------------------------------
   Slide footer (Footer_Slide component)
   --------------------------------------------------------------- */

.sfoot { position: absolute; left: 0; top: 1004px; width: 1920px; height: 56px; z-index: 6; }

.nav-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center;
  width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--ink); border-radius: 20px;
  background: transparent; cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.nav-btn svg { width: 18px; height: 16px; display: block; }
.nav-btn:hover { background: var(--ink); color: var(--paper); }
.on-dark .nav-btn { border-color: #fbfaf7; color: #fbfaf7; }
.on-dark .nav-btn:hover { background: #fbfaf7; color: var(--ink); }
.nav-btn[disabled] { opacity: .32; cursor: default; }
.nav-btn[disabled]:hover { background: transparent; color: inherit; }

.nav-btn--prev { left: 40px; }
.nav-btn--next { right: 40px; }

.sfoot__meta {
  position: absolute; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-weight: 500; font-size: 16px;
  line-height: 1.2; letter-spacing: 1.92px; text-transform: uppercase;
  color: var(--ink-soft); margin: 0;
}
.sfoot__author { left: 120px; }
.sfoot__deck { left: 50%; width: 600px; margin-left: -300px; text-align: center; }
.sfoot__page { right: 120px; text-align: right; }

/* ---------------------------------------------------------------
   Carousel inside a slide (Carousel_Controls component)
   --------------------------------------------------------------- */

.cpages { position: absolute; inset: 0; }
/* Pages fade with opacity only. `visibility` is left to the slide, so an
   inactive slide stays fully inert instead of a live page punching through. */
/* Same cross-dissolve as the slides. The outgoing page holds underneath while
   the incoming one fades up, so the parts both pages share (headline, left
   column) never dip in opacity. It then clears on the back half of the fade
   rather than snapping off at the end: where the new panel is smaller than
   the old one, the old one would otherwise sit fully visible around its edge
   for the whole transition. By the time it starts going the incoming page is
   nearly opaque, so the shared regions still hold steady. */
.cpage {
  position: absolute; inset: 0;
  opacity: 0; pointer-events: none; z-index: 1;
  transition: opacity var(--fade) var(--ease);
}
.cpage.is-active {
  opacity: 1; pointer-events: auto; z-index: 3;
  transition: opacity var(--fade) var(--ease);
}
.cpage.is-leaving {
  opacity: 1; pointer-events: none; z-index: 2;
  transition: none;
}

/* Where the pages share nothing (the common parts are painted once, outside
   the carousel) there is nothing to protect from dipping, so the outgoing page
   simply fades out as the incoming one fades in. It clears in step with the
   new panel instead of sitting behind it until the end. */
.cpages--distinct > .cpage.is-leaving {
  opacity: 0;
  transition: opacity var(--fade) var(--ease);
}

.carousel-ctl { position: absolute; height: 54px; z-index: 6; }
.carousel-ctl .nav-btn--prev { left: 2px; }
.carousel-ctl .nav-btn--next { right: 2px; }

.carousel-ctl__dots {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex; gap: 8px;
}
.carousel-ctl__dots button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: var(--line-dark); cursor: pointer;
  transition: background .18s ease;
}
.carousel-ctl__dots button[aria-current="true"] { background: var(--violet); }
.on-dark .carousel-ctl__dots button { background: #4b4466; }
.on-dark .carousel-ctl__dots button[aria-current="true"] { background: var(--lime); }

.carousel-ctl__status {
  position: absolute; right: 58px; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-weight: 500; font-size: 12px;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--ink-soft); margin: 0; white-space: nowrap;
}

/* ---------------------------------------------------------------
   View / expand button (Button_View component)
   --------------------------------------------------------------- */

.btn-view {
  display: inline-flex; align-items: center; gap: 32px;
  padding: 0 34px; min-height: 82px;
  border: 1.5px solid var(--violet); border-radius: 41px;
  background: transparent; color: var(--violet);
  font-family: var(--body); font-weight: 600; font-size: 25px; line-height: 1.2;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.btn-view:hover { background: var(--violet); color: #fff; }
.btn-view__icon { flex: none; width: 24px; height: 24px; }
.btn-view__icon svg { width: 24px; height: 24px; display: block; }
.btn-view[aria-expanded="true"] .btn-view__icon { transform: rotate(45deg); }
.btn-view__icon { transition: transform .3s ease; }
.on-dark .btn-view { border-color: var(--lime); color: var(--lime); }
.on-dark .btn-view:hover { background: var(--lime); color: var(--ink); }

/* the panel that grows the slide */
/* The panel sits in normal flow below the 1080px stage, so the stage grows
   by exactly the panel's height when it opens. */
.expand {
  display: none;
  position: relative;
  z-index: 6;
  width: 1680px;
  margin: 0 120px 96px;
  padding-top: 1080px;
}
.expand.is-open { display: block; }
.expand__inner {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  overflow: hidden;
}
.expand__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; padding: 36px 36px 0;
}
.expand__head h3 { margin: 0; }
.expand__body { padding: 28px 36px 40px; }
.expand__body img { width: 100%; height: auto; border-radius: var(--radius); }
.expand__close {
  flex: 0 0 auto; display: grid; width: 42px; height: 42px; place-items: center;
  border: 1px solid var(--line-dark); border-radius: 50%;
  background: var(--surface); color: var(--ink);
  font: 400 28px/1 Arial, sans-serif; cursor: pointer;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.expand__close:hover { border-color: var(--violet); background: var(--violet); color: #fff; }

/* a tall document shown inside an expand panel scrolls on its own */
/* A long document runs at full height and the slide scrolls, rather than
   putting a second scrollbar inside the panel. */
.doc-scroll { border-radius: var(--radius); overflow: hidden; }
.doc-scroll img { border-radius: 0; }

/* A compact circular "open a zoomed view" trigger, matching the plus badge
   used on slide 07. */
.btn-zoom {
  display: grid; place-items: center;
  width: 48px; height: 48px; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--violet); color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 18px -6px rgba(23, 20, 43, .45);
  transition: background .18s ease, transform .18s ease;
}
.btn-zoom:hover { background: var(--violet-dark); transform: scale(1.06); }
.btn-zoom svg { width: 22px; height: 22px; display: block; }

/* ---------------------------------------------------------------
   Modal (evidence-modal, carried over from the case study)
   --------------------------------------------------------------- */

.evidence-modal {
  width: min(1160px, calc(100% - 32px));
  max-height: calc(100vh - 32px);
  margin: auto; padding: 0; border: 0; border-radius: 24px;
  background: var(--surface); color: var(--ink);
  box-shadow: 0 28px 80px rgba(23, 20, 43, .28);
  opacity: 0; transition: opacity .22s ease;
  overflow: auto;
}
.evidence-modal.is-visible { opacity: 1; }
.evidence-modal::backdrop {
  background: rgba(23, 20, 43, .66);
  opacity: 0; backdrop-filter: blur(5px);
  transition: opacity .22s ease;
}
.evidence-modal.is-visible::backdrop { opacity: 1; }
.evidence-modal__panel { padding: clamp(22px, 4vw, 44px); }
.evidence-modal__header {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.evidence-modal__header h2 {
  margin: 0; font-family: var(--display); font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.04; letter-spacing: -.03em;
}
.evidence-modal__header .eyebrow { margin: 0; font-size: 13px; letter-spacing: 1.8px; }
.evidence-modal__close {
  flex: 0 0 auto; display: grid; width: 42px; height: 42px; place-items: center;
  border: 1px solid var(--line-dark); border-radius: 50%;
  background: var(--surface); color: var(--ink);
  font: 400 28px/1 Arial, sans-serif; cursor: pointer;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.evidence-modal__close:hover { border-color: var(--violet); background: var(--violet); color: #fff; }
.evidence-modal__grid { display: grid; grid-template-columns: 1fr; gap: 28px; margin-top: 30px; }
.evidence-modal figure { margin: 0; }
.evidence-modal img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: var(--radius);
}
.evidence-modal figcaption {
  margin-top: 14px; color: var(--ink-2); font-size: 17px; line-height: 1.62;
}
body.modal-open { overflow: hidden; }

/* ---------------------------------------------------------------
   Entry-point stepper (lifted from withdraw-to-crypto.html)
   --------------------------------------------------------------- */

.entry-stepper {
  overflow: hidden;
  border: 1px solid var(--line); border-radius: 22px;
  background: var(--surface);
}
.entry-stepper__tabs {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}
.entry-stepper__tabs button {
  min-height: 64px; padding: 15px 12px;
  border: 0; border-right: 1px solid var(--line);
  background: var(--paper-2); color: var(--ink-soft);
  font: 500 11px/1.35 var(--mono);
  letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.entry-stepper__tabs button:last-child { border-right: 0; }
.entry-stepper__tabs button:hover { color: var(--violet); }
.entry-stepper__tabs button[aria-selected="true"] {
  background: var(--surface); color: var(--violet);
  box-shadow: inset 0 -3px 0 var(--violet);
}
.entry-stepper__panel { padding: 44px; }
.entry-stepper__panel[hidden] { display: none; }

.entry-variant {
  display: grid;
  grid-template-columns: minmax(250px, .82fr) minmax(0, 1.18fr);
  gap: 58px; align-items: start;
}
.entry-variant__visual {
  display: flex; width: min(100%, 360px);
  min-height: var(--entry-copy-min-height, 0px);
  margin-inline: auto; flex-direction: column; align-items: center;
}
.phone-demo {
  position: relative; width: 100%; overflow: hidden;
  border-radius: 15% / 8%; aspect-ratio: 926 / 1699;
}
.phone-demo video {
  position: absolute; z-index: 1; top: 4.7%; left: 50%;
  width: auto; height: 90.6%; border: 0; border-radius: 0;
  /* not black: with a poster set this rarely shows, but if a frame is ever
     missing the phone should read as a blank screen, not a black block */
  background: #fff; object-fit: contain; opacity: 1;
  transform: translateX(-50%); transition: opacity .55s ease-in-out;
}
.phone-demo video.is-loop-fading { opacity: 0; }
.phone-demo img {
  position: absolute; z-index: 2; inset: 0;
  width: 100%; height: 100%; pointer-events: none;
  object-fit: contain; transform: translateY(2px) scaleX(.98);
}
.entry-variant__copy {
  align-self: stretch; display: flex; min-width: 0;
  min-height: var(--entry-copy-min-height, 0px); flex-direction: column;
}
.entry-variant__copy h3 {
  margin: 0; font-family: var(--display); font-weight: 700;
  font-size: 2.2rem; line-height: 1.04; letter-spacing: -.03em;
}
.entry-variant__chips {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px; width: 100%; margin-top: 18px;
}
.entry-variant__detail {
  display: grid; grid-template-columns: 118px minmax(0, 1fr);
  gap: 18px; margin-top: 18px; padding-top: 18px;
  border-top: 1px solid var(--line);
}
.entry-variant__detail strong { color: var(--ink); font-size: 13.5px; font-weight: 600; }
.entry-variant__detail p { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.55; }

/* The stepper replaces a screenshot of itself in the slide's slot. It is laid
   out at the slot's own width, with its type stepped to match the weight it
   has in the Figma frame, and sized so the whole component clears the footer. */
.stepper-slot { position: absolute; }
.stepper-slot .entry-stepper__tabs button { min-height: 56px; padding: 13px 8px; font-size: 13px; letter-spacing: .1em; }
.stepper-slot .entry-stepper__panel { padding: 26px 28px 30px; }
.stepper-slot .entry-variant { gap: 30px; grid-template-columns: minmax(190px, .72fr) minmax(0, 1.28fr); }
.stepper-slot .entry-variant__visual { width: min(100%, 252px); }
.stepper-slot .entry-variant__copy h3 { font-size: 1.9rem; }
.stepper-slot .entry-variant__detail { grid-template-columns: 116px minmax(0, 1fr); gap: 14px; margin-top: 13px; padding-top: 13px; }
.stepper-slot .entry-variant__detail strong { font-size: 13px; }
.stepper-slot .entry-variant__detail p { font-size: 13px; line-height: 1.5; }
.stepper-slot .entry-variant__chips { gap: 7px; margin-top: 13px; }
.stepper-slot .variant-chip { min-height: 28px; padding: 5px 11px; font-size: 10px; white-space: nowrap; }

/* ---------------------------------------------------------------
   Deck chrome: progress, hint, slide index
   --------------------------------------------------------------- */

.progress {
  position: fixed; left: 0; top: 0; z-index: 40;
  height: 3px; width: 100%;
  background: transparent; pointer-events: none;
}
.progress__bar {
  height: 100%; width: 0;
  background: var(--violet);
  transition: width .28s ease;
}
.slide--dark ~ .progress .progress__bar { background: var(--lime); }

.hint {
  position: fixed; left: 50%; bottom: 68px; z-index: 40;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px; border-radius: 999px;
  background: rgba(23, 20, 43, .82); color: #fff;
  font: 500 11px/1 var(--mono); letter-spacing: 1.4px; text-transform: uppercase;
  pointer-events: none;
  opacity: 1; transition: opacity .5s ease;
}
.hint.is-gone { opacity: 0; }

.deck-index {
  position: fixed; inset: 0; z-index: 90;
  display: none; padding: 48px clamp(20px, 5vw, 80px);
  background: rgba(23, 20, 43, .96);
  overflow-y: auto;
}
.deck-index.is-open { display: block; }
.deck-index h2 {
  margin: 0 0 28px; color: #fff;
  font-family: var(--display); font-weight: 700; font-size: 32px; letter-spacing: -.02em;
}
.deck-index__list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px; margin: 0; padding: 0; list-style: none;
}
.deck-index__list button {
  display: flex; gap: 14px; width: 100%; padding: 12px 14px;
  border: 1px solid #383150; border-radius: 10px;
  background: transparent; color: #cdc7dd; text-align: left;
  font-family: var(--body); font-size: 15px; line-height: 1.35; cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.deck-index__list button:hover { border-color: var(--lime); color: #fff; background: #211c3b; }
.deck-index__list button[aria-current="true"] { border-color: var(--lime); color: var(--lime); }
.deck-index__num { flex: none; font-family: var(--mono); font-size: 12px; letter-spacing: 1px; padding-top: 2px; }
.deck-index__close {
  position: absolute; right: 24px; top: 24px;
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid #383150; border-radius: 50%;
  background: transparent; color: #fff;
  font: 400 28px/1 Arial, sans-serif; cursor: pointer;
}
.deck-index__close:hover { border-color: var(--lime); color: var(--lime); }

/* Deck navigation lives on the viewport, not on the scaled stage, so the two
   arrows keep the same size and the same 16px inset as the index button at
   every window size. The in-stage footer arrows are hidden in their favour. */
.sfoot .nav-btn { display: none; }

.deck-nav {
  position: fixed; bottom: 16px; z-index: 50;
  display: grid; place-items: center;
  width: 40px; height: 40px; padding: 0;
  border: 1px solid currentColor; border-radius: 50%;
  background: transparent; color: var(--ink); cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.deck-nav svg { width: 18px; height: 16px; display: block; }
.deck-nav--prev { left: 16px; }
.deck-nav--next { right: 16px; }
.deck-nav:hover { background: var(--ink); color: var(--paper); }
body.theme-dark .deck-nav { color: #fbfaf7; }
body.theme-dark .deck-nav:hover { background: #fbfaf7; color: var(--ink); }

.index-toggle {
  position: fixed; right: 16px; top: 16px; z-index: 50;
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid currentColor; border-radius: 50%;
  background: transparent; color: var(--ink-soft); cursor: pointer;
  opacity: .55; transition: opacity .18s ease, color .18s ease;
}
.index-toggle:hover { opacity: 1; color: var(--violet); }
body.theme-dark .index-toggle { color: var(--body-dark); }
body.theme-dark .index-toggle:hover { color: var(--lime); }
.index-toggle svg { width: 16px; height: 16px; }

/* ---------------------------------------------------------------
   Small screens: a 1920 stage scaled into a portrait phone is
   unreadable, so ask for landscape instead of shrinking further.
   --------------------------------------------------------------- */

.rotate-note {
  position: fixed; inset: 0; z-index: 150;
  display: none; place-items: center; padding: 32px;
  background: var(--ink); color: #fff; text-align: center;
}
.rotate-note p {
  max-width: 24ch; margin: 0 auto;
  font-family: var(--display); font-weight: 700;
  font-size: 28px; line-height: 1.1; letter-spacing: -.02em;
}
.rotate-note span {
  display: block; margin-top: 16px;
  font: 500 11px/1.6 var(--mono); letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--body-dark);
}
@media (max-width: 760px) and (orientation: portrait) {
  .rotate-note { display: grid; }
}

@media (prefers-reduced-motion: reduce) {
  .slide, .cpage, .fit, .evidence-modal, .evidence-modal::backdrop,
  .progress__bar, .hint, .phone-demo video { transition: none !important; }
}