/* ============================================================================
   Big Dog OS (/platform/): the scroll deck
   ----------------------------------------------------------------------------
   Base rules are the static deck: every slide a stacked section in its final
   state. That is what a reader gets without JS and under reduced motion.
   .pdk--live (set by platform.js) pins the stage and stacks the slides on top
   of each other; .is-on shows one, .is-b runs its build. Transform and
   opacity only.
   ========================================================================== */

.pdk-page {
  --pdk-bg: #090909; --pdk-panel: #0E0E0E; --pdk-surface: #141414; --pdk-raise: #1A1A1A;
  --pdk-line: #1E1E1E; --pdk-line2: #2A2A2A;
  --pdk-ink: #F2F0EB; --pdk-mute: #A3A3A3; --pdk-dim: #858380;
  --pdk-amber: #F5A524; --pdk-ok: #6FCF7F;
  --pdk-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --pdk-ui: Geist, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --pdk-move: cubic-bezier(.65, 0, .25, 1);
  --pdk-out: cubic-bezier(.16, 1, .3, 1);
  background: var(--pdk-bg);
}

/* ------------------------------------------------------------ the deck --- */
.pdk { position: relative; }
.pdk__stage { position: relative; }
.pdk__bg {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(60rem 40rem at 72% 46%, rgba(245, 165, 36, .07), transparent 70%),
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px) 0 0 / 100% 96px;
}

.pdk-s {
  position: relative;
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(2rem, 5vw, 5.5rem); align-items: center;
  max-width: 92rem; margin-inline: auto;
  padding: clamp(4.5rem, 9vw, 7.5rem) var(--sc-gutter);
  border-top: 1px solid var(--pdk-line);
}
.pdk-s--title { border-top: 0; padding-top: calc(var(--bar-h) + clamp(2.5rem, 6vw, 5rem)); }
.pdk-s__copy { min-width: 0; }
.pdk-s__copy .crumbs { margin-bottom: 1.75rem; }
.pdk-s__ch {
  margin: 0 0 1.1rem; font-family: var(--pdk-mono); font-size: .74rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--pdk-amber);
}
.pdk-s__h1 { margin: 0; white-space: nowrap; font-size: clamp(3rem, .5rem + 5vw, 5.8rem); line-height: .94; letter-spacing: -0.02em; color: var(--pdk-ink); }
.pdk-s__t {
  margin: 0; font-family: var(--pdk-ui); font-weight: 500; color: var(--pdk-ink);
  font-size: clamp(2rem, 1.1rem + 2.9vw, 4.1rem); line-height: 1.03; letter-spacing: -0.04em;
  max-width: 15ch; text-wrap: balance;
}
.pdk-s__sub {
  margin: 1.5rem 0 0; color: var(--pdk-mute); font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem);
  line-height: 1.5; max-width: 36ch; text-wrap: pretty;
}
.pdk-s--title .pdk-s__sub { color: var(--pdk-ink); max-width: 28ch; }
.pdk-s__acts { margin-top: 2.25rem; }
.pdk-s__hint { display: none; }
.pdk-key {
  display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; margin-right: .55rem;
  border: 1px solid var(--pdk-line2); border-radius: 6px; color: var(--pdk-ink); font-family: var(--pdk-ui);
}
.pdk-s__vis { position: relative; min-width: 0; }

/* A product frame in a window. The camera crops it: --x/--y/--z is the first
   pose, --bx/--by/--bz the build, --mx/--my/--mz (--mbx...) the phone crop.
   --ar is the window shape (--mar on phones), picked per slide so each pose
   frames whole panels. The base (static) state is the build. */
.pdk-win {
  position: relative; width: 100%; aspect-ratio: var(--ar, 1.6); overflow: hidden; isolation: isolate;
  border-radius: 14px; background: var(--pdk-panel); border: 1px solid var(--pdk-line2);
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .02) inset;
}
.pdk-cam {
  --X0: var(--x, 0); --Y0: var(--y, 0); --Z0: var(--z, 1);
  --X1: var(--bx, var(--x, 0)); --Y1: var(--by, var(--y, 0)); --Z1: var(--bz, var(--z, 1));
  position: absolute; left: 0; top: 0; width: 100%; transform-origin: 0 0;
  transform: scale(var(--Z1)) translate(calc(var(--X1) * -100%), calc(var(--Y1) * -100%));
}
@media (max-width: 860px) {
  .pdk-win { aspect-ratio: var(--mar, var(--ar, 1.6)); }
  .pdk-cam {
    --X0: var(--mx, var(--x, 0)); --Y0: var(--my, var(--y, 0)); --Z0: var(--mz, var(--z, 1));
    --X1: var(--mbx, var(--mx, var(--bx, var(--x, 0))));
    --Y1: var(--mby, var(--my, var(--by, var(--y, 0))));
    --Z1: var(--mbz, var(--mz, var(--bz, var(--z, 1))));
  }
}
.pdk-cam img { display: block; width: 100%; height: auto; }
.pdk-cam picture, .pdk-phone picture { display: block; }
.pdk-win--x .pdk-cam--a { opacity: 0; }
.pdk-ring {
  position: absolute; pointer-events: none;
  left: calc(var(--rx) * 100%); top: calc(var(--ry) * 100%);
  width: calc(var(--rw) * 100%); height: calc(var(--rh) * 100%);
  border: calc(2px / var(--Z1)) solid var(--pdk-amber);
  border-radius: calc(10px / var(--Z1));
  box-shadow: 0 0 0 calc(5px / var(--Z1)) rgba(245, 165, 36, .14),
              0 0 calc(36px / var(--Z1)) rgba(245, 165, 36, .32);
}
.pdk-ring--a { display: none; --Z1: var(--Z0); }
.pdk-tip {
  position: absolute; left: .9rem; bottom: .9rem; z-index: 2; margin: 0; max-width: 32ch;
  padding: .75rem .95rem; border-radius: 10px;
  background: rgba(14, 14, 14, .9); border: 1px solid var(--pdk-line2); border-left: 2px solid var(--pdk-amber);
  color: var(--pdk-ink); font-size: .92rem; line-height: 1.4;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}

/* The label and the callout sit outside the frame, so they never cover it. */
.pdk-fig { position: relative; min-width: 0; }
.pdk-fig > .pdk-tip {
  position: static; margin: 1.1rem 0 0; max-width: 46ch; padding: .15rem 0 .15rem .9rem;
  background: none; border: 0; border-left: 2px solid var(--pdk-amber); border-radius: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none; font-size: 1rem;
}

/* A phone. The frame is cropped above its tab bar. */
.pdk-phone {
  position: relative; aspect-ratio: 780 / 1470; overflow: hidden; border-radius: clamp(18px, 2.2vw, 30px);
  background: #000; border: 1px solid #333;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .95), 0 0 0 5px #111, 0 0 0 6px #2A2A2A;
}
.pdk-phone img { display: block; width: 100%; height: auto; }

.pdk-duo { position: relative; padding: 0 9% 7% 0; }
.pdk-duo__phone { position: absolute; right: 0; bottom: 0; width: 25%; }
/* The phone that arrives late stands beside the window, never over its buttons. */
.pdk-duo--late { padding: 0 24% 0 0; }
.pdk-duo--late .pdk-duo__phone { width: 22%; }

/* 2. Not connected */
.pdk-plug {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(4rem, .55fr) minmax(0, 1fr);
  align-items: center; gap: 0; aspect-ratio: 16 / 10;
}
.pdk-plug__node {
  position: relative; padding: clamp(1rem, 2vw, 1.6rem); border-radius: 14px;
  background: var(--pdk-panel); border: 1px solid var(--pdk-line2); min-width: 0;
}
.pdk-plug__k { display: block; margin-bottom: 1rem; font-family: var(--pdk-mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--pdk-dim); }
.pdk-plug__node--ai .pdk-plug__k { color: var(--pdk-amber); }
.pdk-plug__bubble {
  display: block; padding: .7rem .85rem; border-radius: 12px 12px 12px 4px; background: var(--pdk-raise);
  color: var(--pdk-ink); font-size: .92rem; line-height: 1.4;
}
.pdk-plug__bubble--2 { margin-top: .5rem; color: var(--pdk-mute); }
.pdk-plug__node--biz ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.pdk-plug__node--biz li {
  display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border-radius: 8px;
  border: 1px dashed var(--pdk-line2); color: var(--pdk-mute); font-size: .92rem;
}
.pdk-plug__node--biz li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #3A3A3A; flex: none; }
.pdk-plug__gap { position: relative; display: flex; align-items: center; justify-content: center; height: 2rem; }
.pdk-plug__gap i { flex: 1; height: 2px; background: linear-gradient(90deg, var(--pdk-amber), rgba(245, 165, 36, .2)); }
.pdk-plug__gap i:last-child { background: linear-gradient(90deg, #3A3A3A, #3A3A3A); }
.pdk-plug__gap i:first-child { margin-right: 22%; }
.pdk-plug__gap i:last-child { margin-left: 22%; }
.pdk-plug__gap b {
  position: absolute; top: calc(100% + .4rem); left: 50%; translate: -50% 0; white-space: nowrap;
  font-family: var(--pdk-mono); font-weight: 400; font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--pdk-dim);
}

/* 3. Silos */
.pdk-silo { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 3vw, 2.4rem); aspect-ratio: 16 / 10; }
.pdk-silo__t {
  display: flex; flex-direction: column; justify-content: flex-end; gap: .45rem; padding: clamp(1rem, 2vw, 1.5rem);
  border-radius: 14px; background: var(--pdk-panel); border: 1px solid var(--pdk-line2); min-width: 0;
}
.pdk-silo__t span { font-family: var(--pdk-mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--pdk-dim); }
.pdk-silo__t b { font-family: var(--pdk-ui); font-weight: 500; color: var(--pdk-ink); font-size: clamp(1.05rem, .8rem + .9vw, 1.6rem); letter-spacing: -0.02em; line-height: 1.15; }
.pdk-silo__i { width: 1.6rem; height: 1.6rem; margin-bottom: auto; color: var(--pdk-amber); opacity: .85; }
.pdk-silo__t em { font-style: normal; font-family: var(--pdk-mono); font-size: .74rem; line-height: 1.4; color: var(--pdk-mute); }
.pdk-silo__hand { display: none; }

/* 5. The hub */
.pdk-hub { position: relative; aspect-ratio: 16 / 10; }
.pdk-hub::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 76%; height: 80%; translate: -50% -50%;
  border: 1px dashed var(--pdk-line2); border-radius: 50%;
}
.pdk-hub__core {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 1;
  display: flex; align-items: center; gap: .6rem; padding: .95rem 1.25rem; border-radius: 14px;
  background: var(--pdk-raise); border: 1px solid rgba(245, 165, 36, .55);
  color: var(--pdk-ink); font-weight: 600; white-space: nowrap;
  box-shadow: 0 0 0 8px rgba(245, 165, 36, .06), 0 0 60px rgba(245, 165, 36, .18);
}
.pdk-hub__n {
  position: absolute; z-index: 1;
  left: calc(50% + cos(var(--a)) * 38%); top: calc(50% + sin(var(--a)) * 40%); translate: -50% -50%;
  display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .85rem; border-radius: 999px;
  background: var(--pdk-panel); border: 1px solid var(--pdk-line2); color: var(--pdk-ink);
  font-size: .9rem; white-space: nowrap;
}
.pdk-hub__n::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pdk-ok); box-shadow: 0 0 10px rgba(111, 207, 127, .6); }

/* 6. Any data */
.pdk-feed { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center; }
.pdk-feed__in { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.pdk-feed__in li {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .9rem;
  padding: .8rem .9rem; border-radius: 12px; background: var(--pdk-panel); border: 1px solid var(--pdk-line2);
  color: var(--pdk-ink); font-size: .98rem;
}
.pdk-feed__in small { font-family: var(--pdk-mono); font-size: .7rem; color: var(--pdk-dim); }
.pdk-feed__in li::after {
  content: "Read"; grid-column: 3; grid-row: 1; justify-self: end; margin-left: 4.2rem;
  font-family: var(--pdk-mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--pdk-ok);
}
.pdk-feed__in li small { grid-column: 3; grid-row: 1; margin-right: 3.2rem; }
.pdk-feed__ico {
  display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 8px;
  background: var(--pdk-raise); border: 1px solid var(--pdk-line2);
  font-family: var(--pdk-mono); font-size: .6rem; letter-spacing: .04em; color: var(--pdk-amber);
}
.pdk-feed__ico--wave { display: inline-flex; gap: 2px; align-items: center; justify-content: center; }
.pdk-feed__ico--wave i { width: 2px; border-radius: 2px; background: var(--pdk-amber); height: 40%; }
.pdk-feed__ico--wave i:nth-child(2), .pdk-feed__ico--wave i:nth-child(4) { height: 70%; }
.pdk-feed__ico--wave i:nth-child(3) { height: 100%; max-height: 1.1rem; }

/* 7. WhatsApp: the phone itself is whatsapp.css; this only sizes it. */
.pdk-fig--wa { width: min(21rem, 100%); margin-inline: auto; }

/* 10. Ask */
.pdk-ask {
  position: relative; padding: clamp(1rem, 2.2vw, 1.75rem); border-radius: 16px;
  background: var(--pdk-panel); border: 1px solid var(--pdk-line2);
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .9);
}
.pdk-ask__bar {
  display: flex; align-items: center; gap: .8rem; padding: .7rem .7rem .7rem 1rem; border-radius: 12px;
  background: var(--pdk-surface); border: 1px solid var(--pdk-line2); color: var(--pdk-ink); font-size: .98rem; line-height: 1.35;
}
.pdk-ask__clip { width: 14px; height: 14px; flex: none; border: 1.5px solid var(--pdk-dim); border-radius: 50%; }
.pdk-ask__q { flex: 1; min-width: 0; }
.pdk-ask__go { flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--pdk-amber); position: relative; }
.pdk-ask__go::before {
  content: ""; position: absolute; left: 50%; top: 52%; width: 8px; height: 8px; translate: -50% -50%; rotate: 45deg;
  border-left: 2px solid #0B0B0B; border-top: 2px solid #0B0B0B;
}
.pdk-ask__card { margin-top: 1rem; padding: 1.2rem 1.25rem; border-radius: 12px; border: 1px solid rgba(245, 165, 36, .45); background: linear-gradient(180deg, rgba(245, 165, 36, .06), transparent 60%); }
.pdk-ask__a { margin: 0; color: var(--pdk-mute); font-size: 1.02rem; line-height: 1.5; }
.pdk-ask__a b { display: block; margin-bottom: .35rem; color: var(--pdk-ink); font-weight: 500; font-size: 1.15rem; letter-spacing: -0.015em; }
.pdk-ask__lbl { margin: 1.2rem 0 .6rem; font-family: var(--pdk-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--pdk-dim); }
.pdk-ask__src { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.pdk-ask__src li {
  display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .7rem; border-radius: 8px;
  background: var(--pdk-raise); border: 1px solid rgba(245, 165, 36, .5); color: var(--pdk-ink); font-size: .85rem;
}
.pdk-ask__src span { font-family: var(--pdk-mono); font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: var(--pdk-amber); }

/* 14. Proof */
.pdk-proof-box { min-width: 0; }
.pdk-proof { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: end; }
.pdk-proof > div { border-top: 1px solid var(--pdk-line2); padding-top: 1.25rem; }
.pdk-proof dt { font-family: var(--pdk-mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--pdk-amber); }
.pdk-proof dd {
  margin: .6rem 0 0; font-family: var(--pdk-ui); font-weight: 500; color: var(--pdk-ink);
  font-size: clamp(3.2rem, 1.4rem + 6vw, 7.5rem); line-height: .95; letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pdk-proof dd small { font-size: .26em; letter-spacing: 0; color: var(--pdk-dim); font-weight: 400; vertical-align: .9em; }
.pdk-proof__note { margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; font-family: var(--pdk-mono); font-size: .76rem; color: var(--pdk-dim); }

/* HUD: only in the live deck */
.pdk__hud[hidden] { display: none; }

/* ---------------------------------------------------- after the deck --- */
.pdk-roi { padding-block: clamp(5rem, 10vw, 8rem); border-top: 1px solid var(--pdk-line); }
.pdk-roi__t {
  margin: .6rem 0 0; max-width: 22ch; color: var(--pdk-ink); font-family: var(--pdk-ui); font-weight: 500;
  font-size: clamp(1.8rem, 1rem + 2.6vw, 3.2rem); line-height: 1.08; letter-spacing: -0.04em; text-wrap: balance;
}
.pdk-roi__list {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: clamp(2.5rem, 5vw, 3.75rem) 0 0; padding: 0; list-style: none;
  background: var(--pdk-line); border: 1px solid var(--pdk-line); border-radius: 16px; overflow: hidden;
}
.pdk-roi__list li { display: flex; flex-direction: column; gap: .7rem; padding: clamp(1.4rem, 2.6vw, 2.25rem); background: var(--pdk-panel); }
.pdk-roi__list b {
  font-family: var(--pdk-ui); font-weight: 500; color: var(--pdk-amber); font-size: clamp(2.6rem, 1.6rem + 3vw, 4.4rem);
  line-height: 1; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pdk-roi__list b small { font-size: .38em; letter-spacing: 0; color: var(--pdk-dim); font-weight: 400; }
.pdk-roi__list span { color: var(--pdk-ink); font-size: 1.05rem; line-height: 1.45; }
.pdk-roi__list em { margin-top: auto; font-style: normal; font-family: var(--pdk-mono); font-size: .74rem; line-height: 1.5; color: var(--pdk-dim); }
.pdk-roi__acts { display: flex; flex-wrap: wrap; gap: 1.25rem 3rem; margin-top: 2rem; }
.pdk-s__more { margin: 1.4rem 0 0; }
.pdv__foot .ctas { margin: 0; }
@media (max-width: 860px) {
  .pdk-roi__list { grid-template-columns: 1fr; }
  .pdk--live .pdk-s__more { margin-top: .8rem; }
}

.pdk-own { padding-block: clamp(5rem, 11vw, 9rem); border-top: 1px solid var(--pdk-line); }
.pdk-own__in { display: grid; gap: 2.5rem; }
.pdk-own__t {
  margin: 0; max-width: 30ch; color: var(--pdk-ink); font-family: var(--pdk-ui); font-weight: 500;
  font-size: clamp(1.6rem, 1rem + 2.2vw, 2.9rem); line-height: 1.15; letter-spacing: -0.035em; text-wrap: balance;
}

.pdv { padding-block: clamp(4.5rem, 10vw, 8rem); border-top: 1px solid var(--pdk-line); scroll-margin-top: var(--bar-h); }
.pdv__head { max-width: 44rem; }
.pdv__intro { margin: 1.25rem 0 0; color: var(--pdk-mute); font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem); line-height: 1.5; }
.pdv__frame {
  position: relative; margin-top: clamp(2rem, 4vw, 3rem); aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 16px; background: #000; border: 1px solid var(--pdk-line2);
  box-shadow: 0 60px 120px -50px rgba(0, 0, 0, .95), 0 0 120px -40px rgba(245, 165, 36, .18);
}
.pdv__frame video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
/* Before the first play: a quiet shade along the bottom and one small
   control in the corner, clear of the speaker's face. */
.pdv__frame--ready::after {
  content: ""; position: absolute; inset: 45% 0 0; pointer-events: none;
  background: linear-gradient(to top, rgba(9, 9, 9, .82), rgba(9, 9, 9, 0));
  transition: opacity 500ms ease;
}
.pdv__frame--ready.is-playing::after { opacity: 0; }
.pdv__frame--ready video { cursor: pointer; }
.pdv__play {
  position: absolute; left: clamp(1rem, 2.4vw, 2rem); bottom: clamp(1rem, 2.4vw, 2rem); z-index: 2;
  display: flex; align-items: center; gap: 1rem;
  border: 1px solid rgba(255, 255, 255, .12); padding: .55rem 1.35rem .55rem .55rem; border-radius: 999px;
  cursor: pointer; color: var(--pdk-ink); text-align: left;
  background: rgba(9, 9, 9, .62); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .7);
  transition: border-color 300ms ease, background-color 300ms ease;
}
.pdv__play:hover { border-color: rgba(245, 165, 36, .55); background: rgba(9, 9, 9, .78); }
.pdv__play[hidden] { display: none; }
.pdv__disc {
  position: relative; flex: none; width: 3.25rem; aspect-ratio: 1; border-radius: 50%; background: var(--pdk-amber);
  box-shadow: 0 0 0 6px rgba(245, 165, 36, .16);
  transition: transform 300ms var(--pdk-out);
}
.pdv__disc::before {
  content: ""; position: absolute; left: 54%; top: 50%; translate: -50% -50%; width: 32%; height: 36%;
  background: #0B0B0B; clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.pdv__play:hover .pdv__disc, .pdv__play:focus-visible .pdv__disc { transform: scale(1.07); }
.pdv__play:focus-visible { outline: 2px solid var(--pdk-amber); outline-offset: 3px; }
.pdv__lbl { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; font-weight: 600; font-size: 1rem; line-height: 1.2; }
.pdv__lbl small { font-family: var(--pdk-mono); font-weight: 400; font-size: .72rem; color: var(--pdk-mute); }
.pdv__foot { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1.5rem 3rem; margin-top: 2rem; }
.pdv__cap { margin: 0; max-width: 40ch; color: var(--pdk-mute); font-size: 1.05rem; line-height: 1.5; }

/* -------------------------------------------------------- static, phone --- */
@media (max-width: 860px) {
  .pdk-s { grid-template-columns: 1fr; gap: 2.25rem; padding-block: 4rem; }
  .pdk-s--title { padding-top: calc(var(--bar-h) + 2rem); }
  .pdk-duo { padding: 0 12% 10% 0; }
  .pdk-duo__phone { width: 30%; }
  .pdk-duo--late { padding: 0 31% 0 0; }
  .pdk-duo--late .pdk-duo__phone { width: 28%; }
  .pdk-feed { grid-template-columns: minmax(0, 1fr) 7.5rem; }
  .pdk-feed__in li { grid-template-columns: auto 1fr; font-size: .88rem; padding: .6rem .7rem; gap: .65rem; }
  .pdk-feed__in li small, .pdk-feed__in li::after { display: none; }
  .pdk-feed__ico { width: 2rem; height: 2rem; }
  .pdk-fig > .pdk-tip { font-size: .85rem; margin-top: .7rem; }
  .pdk-hub { aspect-ratio: 1 / 1; max-height: 24rem; margin-inline: auto; width: 100%; }
  .pdk-hub::before { width: 70%; height: 74%; }
  .pdk-hub__n {
    left: calc(50% + cos(var(--a)) * 34%); top: calc(50% + sin(var(--a)) * 38%);
    max-width: 7.5rem; white-space: normal; text-align: left; line-height: 1.25;
    font-size: .72rem; padding: .4rem .6rem; border-radius: 12px;
  }
  .pdk-hub__n::before { flex: none; }
  .pdk-hub__core { padding: .7rem .9rem; font-size: .9rem; }
  .pdk-hub__core img { width: 22px; height: 22px; }
  .pdk-plug { grid-template-columns: 1fr; aspect-ratio: auto; gap: 0; }
  .pdk-plug__gap { height: 4.5rem; flex-direction: column; }
  .pdk-plug__gap i { width: 2px; height: auto; flex: 1; }
  .pdk-plug__gap i:first-child { margin: 0 0 .9rem; }
  .pdk-plug__gap i:last-child { margin: .9rem 0 0; }
  .pdk-plug__gap b { position: static; translate: none; padding: 0 0 0 1rem; position: absolute; left: 50%; top: 50%; translate: .75rem -50%; }
  .pdk-plug__node--biz ul { grid-template-columns: 1fr 1fr; }
  .pdk-plug__bubble--2 { display: none; }
  .pdk-proof dd { font-size: clamp(2.6rem, 13vw, 4rem); }
  .pdk-ask__a { font-size: .92rem; }
  .pdk-ask__a b { font-size: 1rem; }
  .pdv__foot { flex-direction: column; }
  .pdv__play { gap: .75rem; padding: .4rem 1rem .4rem .4rem; left: .75rem; bottom: .75rem; }
  .pdv__disc { width: 2.5rem; box-shadow: 0 0 0 4px rgba(245, 165, 36, .16); }
  .pdv__lbl { font-size: .88rem; }
}

/* -------------------------------------------- static, small phone --- */
/* Under 760px the deck never pins (platform.js). Each desktop frame gives way
   to the same screen from the phone app, cropped to its point (--py is the
   top as a share of the image, --pa the window shape) and shown at the size
   the app draws it, so its text reads. Above 760px it is never shown, and as
   a lazy image it is never fetched there. */
.pdk-pc { display: none; }
@media (max-width: 760px) {
  .pdk-s { gap: 1.5rem; padding-block: 2.75rem; }
  .pdk-s--title { padding-top: calc(var(--bar-h) + 1.5rem); }
  .pdk-s__ch { font-size: .8125rem; margin-bottom: .8rem; }
  .pdk-s__sub { margin-top: 1rem; font-size: 1rem; }
  .pdk-pc {
    display: block; position: relative; overflow: hidden; aspect-ratio: var(--pa);
    border-radius: 14px; background: #000; border: 1px solid var(--pdk-line2);
  }
  .pdk-pc img {
    display: block; width: 110%; max-width: none; height: auto; margin-left: -5%;
    transform: translateY(calc(var(--py) * -100%));
  }
  .pdk-pc ~ .pdk-win, .pdk-pc ~ .pdk-duo { display: none; }
  /* A screen whose header photo runs into the crop: the photo sinks into the dark. */
  .pdk-pc--shade::after {
    content: ""; position: absolute; inset: 0 0 auto; height: 14%; pointer-events: none;
    background: linear-gradient(rgba(0, 0, 0, .9), rgba(0, 0, 0, 0));
  }
  .pdk-fig > .pdk-tip { font-size: 1rem; margin-top: .9rem; }
  /* Secondary labels read at 13px. */
  .pdk-plug__k, .pdk-plug__gap b, .pdk-silo__t span, .pdk-ask__lbl, .pdk-ask__src span,
  .pdk-proof dt, .pdk-proof__note, .pdk-roi__list em, .pdv__lbl small { font-size: .8125rem; }
  .pdk-hub__n { font-size: .8125rem; max-width: 8.5rem; }
  .pdk-feed__ico { font-size: .75rem; }
  /* The phone's own type, a size up, so the timestamps read at 12px. */
  .pdk-fig--wa .waph__screen { font-size: 4.65cqi; }
  .pdk-fig--wa :is(.waph__meta, .waph__dur) { font-size: max(.8em, 12px); }
  .pdk-fig--wa :is(.waph__day, .waph__who small) { font-size: max(.82em, 12px); }
}

/* ============================================================== LIVE ===== */
.pdk--live .pdk__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; }
.pdk--live .pdk-s {
  position: absolute; inset: 0; max-width: none; margin: 0; border: 0;
  padding: calc(var(--bar-h) + 1.5rem) max(var(--sc-gutter), calc((100vw - 92rem) / 2 + var(--sc-gutter))) 5.5rem;
  pointer-events: none;
}
.pdk--live .pdk-s.is-on { pointer-events: auto; z-index: 1; }

/* Copy: rises in, line by line; the old slide lifts away quickly. */
.pdk--live .pdk-s__copy > * {
  opacity: 0; transform: translateY(22px);
  transition: opacity 280ms ease, transform 420ms var(--pdk-out);
}
.pdk--live .pdk-s.is-past .pdk-s__copy > * { transform: translateY(-18px); }
.pdk--live .pdk-s.is-on .pdk-s__copy > * {
  opacity: 1; transform: none;
  transition: opacity 600ms ease, transform 900ms var(--pdk-out);
}
.pdk--live .pdk-s.is-on .pdk-s__copy > :nth-child(2) { transition-delay: 70ms; }
.pdk--live .pdk-s.is-on .pdk-s__copy > :nth-child(3) { transition-delay: 140ms; }
.pdk--live .pdk-s.is-on .pdk-s__copy > :nth-child(4) { transition-delay: 210ms; }
.pdk--live .pdk-s.is-on .pdk-s__copy > :nth-child(n+5) { transition-delay: 280ms; }

/* Only the slide on screen and its neighbours keep their visual in the
   layout, so the deck's images load as the deck reaches them, not all at once. */
.pdk--live .pdk-s:not(.is-on):not(.is-near) .pdk-s__vis { display: none; }
/* Visual: arrives from slightly below and further back, leaves upward. */
.pdk--live .pdk-s__vis {
  opacity: 0; transform: translateY(40px) scale(.96);
  transition: opacity 300ms ease, transform 500ms var(--pdk-out);
}
.pdk--live .pdk-s.is-past .pdk-s__vis { transform: translateY(-30px) scale(1.02); }
.pdk--live .pdk-s.is-on .pdk-s__vis {
  opacity: 1; transform: none;
  transition: opacity 700ms ease 120ms, transform 1100ms var(--pdk-out) 80ms;
}
/* A slow push-in while the slide holds, read straight from scroll. */
.pdk--live .pdk-s.is-on .pdk-s__vis > * { transform: scale(calc(1 + var(--pdk-t, 0) * .025)); transform-origin: 50% 60%; }
.pdk--live .pdk-s__vis > * { transition: none; }

.pdk--live .pdk-s__vis { display: flex; align-items: center; justify-content: flex-end; max-height: calc(100svh - var(--bar-h) - 7rem); }
.pdk--live .pdk-s__vis > * { width: 100%; max-width: calc((100svh - var(--bar-h) - 9rem) * 1.6); }
.pdk--live .pdk-s__vis > .pdk-fig { max-width: calc((100svh - var(--bar-h) - 13rem) * var(--ar, 1.6)); }
.pdk--live .pdk-s__vis > .pdk-fig:has(> .pdk-duo) { max-width: calc((100svh - var(--bar-h) - 11rem) * var(--ar, 1.6) / .91); }
.pdk--live .pdk-s__vis > .pdk-fig:has(> .pdk-duo--late) { max-width: calc((100svh - var(--bar-h) - 11rem) * var(--ar, 1.6) / .76); }
.pdk--live .pdk-s__vis > .pdk-fig--wa { width: min(21rem, (100svh - var(--bar-h) - 8.5rem) * 9 / 19.3); max-width: none; margin-inline: auto; }
.pdk--live .pdk-s__vis > .pdk-feed { max-width: 44rem; }

.pdk--live .pdk-s__hint {
  display: flex; align-items: center; margin-top: 2.75rem;
  font-family: var(--pdk-mono); font-size: .72rem; color: var(--pdk-dim); letter-spacing: .02em;
}

/* Camera: first pose until the build. */
.pdk--live .pdk-cam {
  transition: transform 1400ms var(--pdk-move), opacity 800ms ease;
  will-change: transform;
}
.pdk--live .pdk-s:not(.is-b) .pdk-cam {
  transform: scale(var(--Z0)) translate(calc(var(--X0) * -100%), calc(var(--Y0) * -100%));
}
.pdk--live .pdk-win--x .pdk-cam--a { opacity: 1; }
.pdk--live .pdk-win--x .pdk-cam--b { opacity: 0; }
.pdk--live .is-b .pdk-win--x .pdk-cam--a { opacity: 0; }
.pdk--live .is-b .pdk-win--x .pdk-cam--b { opacity: 1; }
.pdk--live .pdk-ring { opacity: 0; transition: opacity 400ms ease; }
.pdk--live .is-b .pdk-ring { opacity: 1; transition: opacity 600ms ease 1000ms; }
.pdk--live .pdk-ring--a { display: block; }
.pdk--live .is-on:not(.is-b) .pdk-ring--a { opacity: 1; transition: opacity 600ms ease 900ms; }
.pdk--live .is-b .pdk-ring--a { opacity: 0; transition: opacity 200ms ease; }
.pdk--live .pdk-tip { opacity: 0; transform: translateY(10px); transition: opacity 300ms ease, transform 300ms ease; }
.pdk--live .is-b .pdk-tip { opacity: 1; transform: none; transition: opacity 600ms ease 1200ms, transform 700ms var(--pdk-out) 1200ms; }

/* Phones slide in after the desktop frame. */
.pdk--live .pdk-duo__phone { opacity: 0; transform: translate(18%, 6%); transition: opacity 400ms ease, transform 700ms var(--pdk-out); }
.pdk--live .pdk-s--title.is-on .pdk-duo__phone,
.pdk--live .is-b .pdk-duo--late .pdk-duo__phone { opacity: 1; transform: none; transition: opacity 700ms ease 650ms, transform 1100ms var(--pdk-out) 600ms; }
.pdk--live .is-b .pdk-duo--late .pdk-duo__phone { transition-delay: 300ms, 250ms; }

/* 2: the two ends reach for each other and never meet. */
.pdk--live .is-on .pdk-plug__gap i:first-child { animation: pdk-reach-l 2.4s var(--pdk-move) infinite; }
.pdk--live .is-on .pdk-plug__gap i:last-child { animation: pdk-reach-r 2.4s var(--pdk-move) infinite; }
@keyframes pdk-reach-l { 50% { transform: translateX(14%); } }
@keyframes pdk-reach-r { 50% { transform: translateX(-14%); } }
.pdk--live .pdk-plug__bubble { opacity: 0; transform: translateY(8px); transition: opacity 300ms, transform 300ms; }
.pdk--live .is-on .pdk-plug__bubble { opacity: 1; transform: none; transition: opacity 400ms ease 250ms, transform 500ms var(--pdk-out) 250ms; }
.pdk--live .is-on .pdk-plug__bubble--2 { transition-delay: 650ms; }

/* 3: a person carries it from one to the next. */
.pdk--live .pdk-silo__hand {
  display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none;
  opacity: 0; transition: opacity 400ms ease;
}
.pdk--live .pdk-silo__hand {
  font-size: 0;
}
.pdk--live .pdk-silo__hand i,
.pdk--live .pdk-silo__hand::after {
  position: absolute; left: 42%; top: 9%;
}
.pdk--live .pdk-silo__hand i {
  width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--pdk-amber);
  box-shadow: 0 0 0 6px rgba(245, 165, 36, .18), 0 0 24px rgba(245, 165, 36, .6);
}
.pdk--live .pdk-silo__hand::after {
  content: "By hand"; margin: 14px 0 0 -2.2rem; padding: .25rem .5rem; border-radius: 6px; background: var(--pdk-amber);
  color: #0B0B0B; font-family: var(--pdk-mono); font-size: .66rem; letter-spacing: .04em; white-space: nowrap;
}
.pdk--live .is-b .pdk-silo__hand { opacity: 1; animation: pdk-carry 6.4s var(--pdk-move) infinite; transition-delay: 200ms; }
@keyframes pdk-carry {
  0%, 6% { transform: translate(0, 0); }
  25%, 31% { transform: translate(50%, 0); }
  50%, 56% { transform: translate(50%, 50%); }
  75%, 81% { transform: translate(0, 50%); }
  100% { transform: translate(0, 0); }
}
.pdk--live .pdk-silo__t { transition: opacity 600ms ease; }
.pdk--live .is-b .pdk-silo__t { opacity: .72; }

/* 5: the links come up one by one. */
.pdk--live .pdk-hub__n { opacity: 0; transform: scale(.9); transition: opacity 300ms, transform 300ms; }
.pdk--live .is-on .pdk-hub__n {
  opacity: 1; transform: none;
  transition: opacity 500ms ease calc(500ms + var(--i) * 120ms), transform 700ms var(--pdk-out) calc(500ms + var(--i) * 120ms);
}
.pdk--live .pdk-hub__core::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid var(--pdk-amber); opacity: 0;
}
.pdk--live .is-on .pdk-hub__core::after { animation: pdk-pulse 2.6s ease-out 1.4s infinite; }
@keyframes pdk-pulse { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5, 1.9); } }

/* 6: each input is read in turn. */
.pdk--live .pdk-feed__in li { opacity: 0; transform: translateX(-14px); transition: opacity 300ms, transform 300ms; }
.pdk--live .is-on .pdk-feed__in li {
  opacity: 1; transform: none;
  transition: opacity 500ms ease calc(400ms + var(--i) * 140ms), transform 700ms var(--pdk-out) calc(400ms + var(--i) * 140ms);
}
.pdk--live .pdk-feed__in li::after { opacity: 0; transition: opacity 200ms; }
.pdk--live .is-on .pdk-feed__in li::after { opacity: 1; transition: opacity 400ms ease calc(1300ms + var(--i) * 260ms); }

/* 7: the answer arrives on the build. */
.pdk--live .pdk-fig--wa .waph__m { opacity: 0; transform: translateY(10px) scale(.98); transition: opacity 250ms, transform 250ms; }
.pdk--live .is-on .pdk-fig--wa :is(.pdk-wa0, .pdk-wa1, .pdk-wa2) { opacity: 1; transform: none; transition: opacity 400ms ease 500ms, transform 500ms var(--pdk-out) 500ms; }
.pdk--live .is-on .pdk-fig--wa .pdk-wa0 { transition-delay: 200ms; }
.pdk--live .is-on .pdk-fig--wa .pdk-wa2 { transition-delay: 1100ms; }
.pdk--live .is-b .pdk-fig--wa .pdk-wa3 { opacity: 1; transform: none; transition: opacity 400ms ease 150ms, transform 500ms var(--pdk-out) 150ms; }
.pdk--live .is-b .pdk-fig--wa .pdk-wa4 { opacity: 1; transform: none; transition: opacity 400ms ease 900ms, transform 500ms var(--pdk-out) 900ms; }

/* 10: the sources light up on the build. */
.pdk--live .pdk-ask__card { opacity: 0; transform: translateY(12px); transition: opacity 250ms, transform 250ms; }
.pdk--live .is-on .pdk-ask__card { opacity: 1; transform: none; transition: opacity 500ms ease 700ms, transform 700ms var(--pdk-out) 700ms; }
.pdk--live .pdk-ask__src li { opacity: .35; transition: opacity 300ms; }
.pdk--live .is-b .pdk-ask__src li { opacity: 1; transition: opacity 500ms ease calc(150ms + var(--i) * 220ms); }
.pdk--live .pdk-ask__src li { position: relative; }
.pdk--live .pdk-ask__src li::after {
  content: ""; position: absolute; inset: -4px; border-radius: 11px; border: 1px solid var(--pdk-amber);
  box-shadow: 0 0 18px rgba(245, 165, 36, .35); opacity: 0; transition: opacity 300ms;
}
.pdk--live .is-b .pdk-ask__src li::after { opacity: 1; transition: opacity 500ms ease calc(250ms + var(--i) * 220ms); }

/* 14: the numbers. */
.pdk--live .pdk-proof > div { opacity: 0; transform: translateY(16px); transition: opacity 300ms, transform 300ms; }
.pdk--live .is-on .pdk-proof > div { opacity: 1; transform: none; transition: opacity 600ms ease 300ms, transform 800ms var(--pdk-out) 300ms; }
.pdk--live .is-on .pdk-proof > div + div { transition-delay: 450ms; }

/* HUD */
.pdk--live .pdk__hud {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 4.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  padding-inline: max(var(--sc-gutter), calc((100vw - 92rem) / 2 + var(--sc-gutter)));
}
.pdk__count { display: flex; align-items: baseline; gap: .45rem; margin: 0; font-family: var(--pdk-mono); font-size: .78rem; color: var(--pdk-dim); }
/* -------------------------------------------- swipe deck, small phone --- */
/* Under 760px slides 2 to 14 are a slideshow: one row that snaps a slide per
   swipe, each slide one screen tall under the header with the control bar
   below it, so the bar is on screen whenever the slide is.
   The copy keeps its size; the visual takes the room left (a size
   container), and a frame shrinks to fit it in its own shape. Works without
   JS (swipe); platform.js adds the counter, the buttons and the arrow keys.
   The live deck never runs at this width, and if it did, it would win. */
.pdk__ctl[hidden] { display: none; }
@media (min-width: 761px) {
  .pdk__track { display: contents; }
  .pdk__ctl { display: none; }
}
@media (max-width: 760px) {
  .pdk:not(.pdk--live) .pdk__track {
    --pdk-sh: calc(100svh - var(--bar-h) - 3.75rem - .75rem);
    display: flex; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    border-top: 1px solid var(--pdk-line);
  }
  .pdk:not(.pdk--live) .pdk__track::-webkit-scrollbar { display: none; }
  .pdk:not(.pdk--live) .pdk__track:focus-visible { outline: 2px solid var(--pdk-amber); outline-offset: -2px; }
  .pdk:not(.pdk--live) .pdk__track > .pdk-s {
    flex: 0 0 100%; height: var(--pdk-sh); min-height: 30rem; overflow: hidden;
    scroll-snap-align: start; scroll-snap-stop: always;
    display: flex; flex-direction: column; align-items: stretch; gap: 1rem;
    margin: 0; padding: 1.1rem var(--sc-gutter) 1.25rem; border-top: 0;
  }
  .pdk__track .pdk-s__ch { margin-bottom: .5rem; }
  .pdk__track .pdk-s__t { font-size: clamp(1.6rem, 7vw, 1.9rem); }
  .pdk__track .pdk-s__sub { margin-top: .6rem; line-height: 1.45; }
  .pdk__track .pdk-s__more { margin-top: .5rem; }
  .pdk__track .pdk-s__vis {
    flex: 1 1 0; min-height: 0; container-type: size;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
  }
  .pdk__track .pdk-s__vis > * { width: 100%; max-height: 100%; }
  /* A phone crop: as wide as the slide, or as tall as the room, whichever
     comes first; the line under it keeps its own height. */
  .pdk__track .pdk-fig { --tip: 0rem; display: flex; flex-direction: column; align-items: center; }
  .pdk__track .pdk-fig:has(> .pdk-tip) { --tip: 3.6rem; }
  /* A phone crop shrinks to the room, but never under three quarters of the
     slide: past that it keeps its width and shows less of the screen's foot. */
  .pdk__track .pdk-pc {
    --w: clamp(75cqw, (100cqh - var(--tip)) * var(--pa), 100cqw);
    flex: none; width: var(--w); height: min(100cqh - var(--tip), var(--w) / var(--pa)); aspect-ratio: auto;
  }
  .pdk__track .pdk-fig > .pdk-tip { margin-top: .6rem; text-align: center; }
  /* Said already in the copy above it. */
  .pdk__track #slide-8 .pdk-tip, .pdk__track .pdk-ask__bar { display: none; }
  .pdk__track .pdk-ask__card { margin-top: 0; padding: .85rem .95rem; }
  .pdk__track .pdk-ask__lbl { display: none; }
  .pdk__track .pdk-ask__src { margin-top: .6rem; }
  .pdk__track .pdk-ask__src { gap: .4rem; }
  .pdk__track .pdk-ask__src li { padding-block: .3rem; }
  .pdk__track .pdk-fig--wa { width: min(100%, 19rem); overflow: hidden; }
  .pdk__track .pdk-fig--wa::after {
    content: ""; position: absolute; inset: auto 0 0; height: 3rem; pointer-events: none;
    background: linear-gradient(rgba(10, 10, 10, 0), var(--pdk-bg));
  }
  /* The hub is wider than tall here. Pills size to their words (an
     absolute pill near the edge would shrink to the room right of it and
     wrap to four lines), on a slightly narrower ring so they stay inside. */
  .pdk__track .pdk-hub { aspect-ratio: auto; height: 100%; max-height: 22rem; }
  .pdk__track .pdk-hub__n {
    width: max-content; max-width: 9.5rem;
    left: calc(50% + cos(var(--a)) * 30%); top: calc(50% + sin(var(--a)) * 41%);
  }
  .pdk__track .pdk-plug__gap { height: 2.5rem; }
  .pdk__track .pdk-plug__node { padding: .9rem 1rem; }
  .pdk__track .pdk-plug__k { margin-bottom: .6rem; }
  .pdk__track .pdk-plug__node--biz ul { gap: .4rem; }
  .pdk__track .pdk-plug__node--biz li { padding: .35rem .6rem; }

  .pdk__ctl {
    display: flex; align-items: center; gap: .5rem; height: 3.75rem;
    padding-inline: var(--sc-gutter); border-top: 1px solid var(--pdk-line);
  }
  .pdk__pos {
    margin: 0 auto 0 0; font-family: var(--pdk-mono); font-size: .875rem; color: var(--pdk-mute);
    font-variant-numeric: tabular-nums;
  }
  .pdk__pos b { font-weight: 500; color: var(--pdk-ink); }
  .pdk__swipe { margin-left: .9rem; color: var(--pdk-amber); letter-spacing: .06em; text-transform: uppercase; font-size: .8125rem; }
  .pdk__swipe::after { content: " \2192"; }
  .pdk__btn {
    display: grid; place-items: center; width: 44px; height: 44px; padding: 0; cursor: pointer;
    border: 1px solid var(--pdk-line2); border-radius: 999px; background: transparent;
    color: var(--pdk-ink); font: inherit; font-size: 1.1rem;
  }
  .pdk__btn:disabled { opacity: .35; cursor: default; }
  .pdk__btn:focus-visible { outline: 2px solid var(--pdk-amber); outline-offset: 2px; }
}
/* Around the swipe deck on a phone: the same sections, closer together. */
@media (max-width: 760px) {
  .pdk-s--title { padding-bottom: 1.75rem; gap: 1.25rem; }
  .pdk-s--title .pdk-s__acts { margin-top: 1.5rem; }
  .pdk-roi, .pdk-own, .pdv { padding-block: 3rem; }
  .pdk-roi__list { margin-top: 1.75rem; }
  .pdk-roi__list li { gap: .4rem; padding: 1.1rem 1.15rem; }
  .pdk-roi__list b { font-size: 2.4rem; }
  .pdk-roi__acts { gap: 1rem; margin-top: 1.5rem; }
  .pdk-own__in { gap: 1.5rem; }
  .pdv__intro { margin-top: .75rem; }
  .pdv__foot { gap: 1rem; margin-top: 1.25rem; }
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .pdk__track { scroll-behavior: smooth; }
}

.pdk__count b { font-weight: 500; font-size: 1.05rem; color: var(--pdk-ink); font-variant-numeric: tabular-nums; }
.pdk__count em { margin-left: 1rem; font-style: normal; color: var(--pdk-amber); letter-spacing: .06em; text-transform: uppercase; font-size: .7rem; }
.pdk__rail { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.pdk__rail button {
  position: relative; display: block; width: 26px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer;
}
.pdk__rail button::before {
  content: ""; position: absolute; left: 3px; right: 3px; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px;
  background: #343434; transition: background-color 300ms, transform 300ms var(--pdk-out);
}
.pdk__rail button:hover::before { background: var(--pdk-mute); transform: scaleY(2); }
.pdk__rail button[data-done]::before { background: #6B6A67; }
.pdk__rail button[aria-current="step"]::before { background: var(--pdk-amber); transform: scaleY(2); }
.pdk__rail button:focus-visible { outline: 2px solid var(--pdk-amber); outline-offset: 2px; border-radius: 4px; }
.pdk--live .pdk__hud { transition: opacity 400ms ease, transform 500ms var(--pdk-out); }
.pdk--end .pdk__hud { opacity: 0; transform: translateY(12px); pointer-events: none; }
.pdk__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, .05); }
.pdk__bar i { position: absolute; inset: 0; background: var(--pdk-amber); transform-origin: 0 50%; transform: scaleX(var(--pdk-p, 0)); }

@media (max-width: 860px) {
  .pdk--live .pdk-s {
    grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); align-content: stretch; gap: 1.25rem;
    padding: calc(var(--bar-h) + 1.1rem) 1.15rem 4.25rem;
  }
  .pdk--live .pdk-s__copy .crumbs, .pdk--live .pdk-s__hint { display: none; }
  .pdk--live .pdk-s__ch { margin-bottom: .6rem; font-size: .66rem; }
  .pdk--live .pdk-s__t { font-size: clamp(1.6rem, 6.6vw, 2.2rem); }
  .pdk--live .pdk-s__h1 { font-size: clamp(3rem, 15vw, 4.2rem); }
  .pdk--live .pdk-s__sub { margin-top: .8rem; font-size: .96rem; line-height: 1.45; }
  .pdk--live .pdk-s__acts { margin-top: 1.1rem; }
  .pdk--live .pdk-s__vis { justify-content: center; align-items: center; max-height: none; min-height: 0; }
  .pdk--live .pdk-s__vis > * { max-width: 100%; }
  /* Frames fill the room under the copy: as wide as the screen allows, as
     tall as the slide allows, in the window shape picked for the phone. */
  .pdk--live .pdk-s__vis { container-type: size; align-self: stretch; }
  .pdk--live .pdk-s__vis > .pdk-fig:has(> .pdk-win) { width: min(100%, (100cqh - 4.75rem) * var(--mar, var(--ar, 1.6))); }
  .pdk--live .pdk-s__vis > .pdk-fig:has(> .pdk-duo) { width: min(100%, (100cqh - 2.5rem) * var(--mar, var(--ar, 1.6)) / .98); }
  .pdk--live .pdk-s__vis > .pdk-fig--wa { width: min(100%, 19rem, (100cqh - .5rem) * 9 / 19.3); }
  .pdk--live .pdk-s__vis > .pdk-fig:has(> .pdk-duo--late) { width: min(100%, (100cqh - 1rem) * var(--mar, var(--ar, 1.6)) / .7); }
  /* The proof numbers sit right under their copy, the pair centred on the slide. */
  .pdk--live .pdk-s--proof { grid-template-rows: auto auto; align-content: center; }
  .pdk--live .pdk-s--proof .pdk-s__vis { container-type: normal; align-self: start; }
  .pdk--live .pdk__hud { height: 3.6rem; padding-inline: 1.15rem; }
  .pdk__count em { display: none; }
  /* Fourteen 24px targets fit the width once the count sits above them. */
  .pdk--live .pdk__hud { flex-direction: column; align-items: flex-start; justify-content: center; gap: .1rem; height: 4.1rem; }
  .pdk__rail { gap: 0; }
  .pdk__rail button { width: 24px; height: 24px; }
  .pdk__rail button::before { left: 4px; right: 4px; }
}
@media (max-width: 860px) {
  /* Too tight to carry it across the tiles: the hand waits in the cross between them. */
  .pdk--live .pdk-silo__hand i, .pdk--live .pdk-silo__hand::after { left: 50%; top: 50%; }
  .pdk--live .pdk-silo__hand::after { margin: -.62rem 0 0 -2.2rem; }
  .pdk--live .pdk-silo__hand i { display: none; }
  .pdk-silo__t em { display: none; }
  .pdk-silo__i { width: 1.15rem; height: 1.15rem; }
  .pdk--live .is-b .pdk-silo__hand { animation: none; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .pdk--live .pdk-s__sub { font-size: .9rem; }
}

/* The depth gauge sits out the deck; it eases back in after it. */
.pdk-page .gauge { --gauge-o: 0; transition: opacity 900ms var(--pdk-out) 150ms; }

@media (prefers-reduced-motion: reduce) {
  .pdv__disc { transition: none; }
}

.pdk-nw { white-space: nowrap; }