/* infiDive product demo
   A small, self-contained reconstruction of the C-side Product Preview.

   TYPE FLOOR: nothing inside .pd-device goes below 11px. iOS caption2 is 11pt
   and that is the smallest size the real product uses; 8-10px type was the
   loudest tell that this is a web page drawing an app rather than a screenshot
   of one. 18 declarations were raised to 11px in one pass. */

.pd {
  --pd-page: #f1f2f5;
  --pd-page-2: #e7e9ef;
  --pd-white: #ffffff;
  --pd-ink: #101114;
  --pd-ink-2: #5b5d67;
  /* 3.20:1 on this section's ground — under AA for text at any size. It stays,
     because inside .pd-device it is drawing iOS tertiary chrome and iOS really
     is that light there. It must NOT be used for words on the page itself; the
     rules that were doing so (.pd-live-note, .pd-index) now take --pd-ink-2 at
     6.17:1. There were three — .pd-tab small was the first — but the chapter
     descriptions it styled are gone, so that rule went with them. */
  --pd-ink-3: #898b94;
  --pd-line: rgba(16, 17, 20, 0.1);
  --pd-dark: #09090d;
  --pd-dark-2: #15131d;
  --pd-dark-3: #24212d;
  --pd-light: #f7f7fa;
  --pd-light-2: rgba(235, 235, 245, 0.72);
  --pd-purple: #3e119d;
  --pd-purple-bright: #946efe;
  --pd-purple-soft: rgba(62, 17, 157, 0.1);
  --pd-cyan: #82f8ed;
  --pd-violet: #946efe;
  --pd-green: #86fe4d;
  --pd-red: #ff5b67;
  --pd-radius-md: 16px;
  --pd-radius-lg: 22px;
  --pd-radius-xl: 28px;
  --pd-space-1: 8px;
  --pd-space-2: 16px;
  --pd-space-3: 24px;
  --pd-space-4: 32px;
  --pd-font-ios: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "PingFang SC", "Helvetica Neue", Arial, sans-serif;

  position: relative;
  overflow: clip;
  color: var(--pd-ink);

  /* One flat colour. Not the two blurred brand-coloured radial blobs that used
     to sit here (the most recognisable generated-landing-page background there
     is), and not the three-stop fade to white that replaced them — both were
     standing in for a decision about what this section's ground actually is. A
     hard colour change against the section above is a stated edge; a fade is a
     section that trails off.
     A dark stage-plate version was tried and reverted: pinning a fixed 1400px
     asset cannot cover an arbitrary viewport, so past ~1190px wide it left flat
     black gutters (300px a side at 2000px) with the CTA stranded in one. */
  background: var(--pd-page);
}

.pd-shell {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: 96px 0 0;
}

.pd-intro {
  width: min(760px, 100%);
  margin: 0 auto 52px;
  text-align: center;
  border-top: 1px solid var(--pd-line);
  padding-top: 20px;
}

/* Matches .eyebrow on the site layer — same reasoning: a capsule outline on an
   inert label reads as a dead button. Typography only, rule carries the break.
   Moved to mono 11/600 with it; see the note on .eyebrow for why the 14px
   high-contrast serif was the softest type on the page. */
.pd-kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-11);
  line-height: var(--lh-11);
  font-weight: 600;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--pd-ink-2);
}

.pd-intro h2,
.pd-cta h2 {
  margin: 24px 0 0;
  font-family: var(--font-display);
  font-size: clamp(42px, 6vw, 80px);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.pd-intro p {
  max-width: 600px;
  margin: 18px auto 0;
  color: var(--pd-ink-2);
  font-size: 17px;
  line-height: 1.55;
  text-wrap: balance;
}

.pd-demo {
  display: grid;
  /* max-content columns pulled to the middle, not 1fr tracks pinned to the
     shell edges. Measured at 1440 the old grid put the ~350px chapter list at
     the far left, the phone at the far right, ~200px of unrelated air between
     them and 400px of dead space under the list (start-aligned against an
     844px device) — which is the "loose" read in one number. The rail and the
     phone are one instrument and its screen; they sit together, centered as a
     unit, and the leftover width collects OUTSIDE the composition where air
     reads as margin instead of as absence. */
  grid-template-columns: minmax(280px, 360px) auto;
  justify-content: center;
  /* center, not start. The start-alignment argument in the history assumed the
     rail stayed at the shell edge, a page-width away from the phone — stranded
     out there, a short centered column did read as fallen. Sitting against the
     device, vertical centering is what binds the two columns into one object. */
  align-items: center;
  gap: clamp(56px, 7vw, 112px);
  padding: 16px clamp(24px, 4vw, 56px) 48px;
  /* The frosted 40px-radius card is gone, and stays gone. It grouped nothing
     that space could not group, and a blurred semi-transparent white rounded
     rectangle is the second-biggest generated-page tell after the outlined pill.
     The phone and the chapter list sit on the section ground directly; the
     section's own edges do the anchoring the card was pretending to do. */
}

/* The device is a hard 390x844 — a real iPhone viewport, which is the point.
   But on the most common laptop (1440x900) there are only 900 - 64 = 836px of
   space under the sticky nav, so the hardware frame was clipped at one end at
   every scroll position and never once appeared whole. Keeping a bezel the
   visitor cannot see is worse than having no bezel, so scale to fit the SHORT
   axis. Height-based query, not width: a 1440x1080 monitor needs no scaling.

   transform leaves the original 844px layout box behind, which would park the
   shrunk phone in ~120px of dead space, so margin-block reclaims exactly the
   difference. Both derive from one variable — change the scale and the margin
   follows. */
@media (min-width: 1100px) and (max-height: 960px) {
  .pd-demo {
    --pd-device-scale: 0.86;
    padding-block: 8px 40px;
  }
  .pd-device {
    transform: scale(var(--pd-device-scale));
    margin-block: calc((844px * var(--pd-device-scale) - 844px) / 2);
  }
}

.pd-guide {
  max-width: 360px;
}

/* An anchor line, and the same one the section labels use. With the frosted card
   gone the chapter list needed something to hang off, or it is four paragraphs
   floating in open space — the same "nothing was decided" read the card itself
   had. The active chapter's bar sits ON this line rather than beside it, so
   selection moves along a visible structure. */
.pd-tabs {
  display: flex;
  flex-direction: column;
  gap: var(--pd-space-1);
  position: relative;
  padding-left: 24px;
}
.pd-tabs::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--pd-line);
}

.pd-tab {
  appearance: none;
  position: relative;
  width: 100%;
  /* 52px: one 17px line plus the air a list row needs, still over the 44px
     touch minimum. The 60px it replaces was itself cut down from a 96px
     title-plus-sentence row; each shrink follows the content that left. */
  min-height: 52px;
  padding: 12px var(--pd-space-2);
  display: grid;
  /* 26px, sized to a bare two-digit numeral — the 44px column held a filled
     circle (see .pd-index for why it went) */
  grid-template-columns: 26px 1fr;
  gap: 14px;
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--pd-radius-lg);
  background: transparent;
  /* The TITLE inherits this, so it has to outrank the sub-line below — it was
     briefly the other way round, i.e. the small print shouting over the
     heading. */
  color: var(--pd-ink-2);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    background 240ms var(--ease-dive),
    border-color 240ms var(--ease-dive),
    color 240ms var(--ease-dive),
    transform 100ms ease-out;
}

.pd-tab:hover {
  color: var(--pd-ink);
  background: rgba(16, 17, 20, 0.03);
}

.pd-tab:active {
  opacity: 0.85;
  transform: scale(0.98);
}

/* Selection is carried by ink weight and a bar on the anchor line — not by
   lifting a white card out of the page. The lifted card was the third "avoid
   deciding" move on this screen: it let the active item win on elevation
   instead of on typography, and it only worked because the ground was a blur. */
/* No fill. The bar on the anchor line and the ink weight already carry
   selection; a 3.5% wash on a rounded rect was the last remnant of the lifted
   card and made the active row read as a container rather than as the one line
   that is currently ON. */
.pd-tab.is-active {
  color: var(--pd-ink);
}
.pd-tab.is-active small {
  color: var(--pd-ink-2);
}
.pd-tab.is-active::before {
  content: "";
  position: absolute;
  left: -25px;   /* -24px container padding, -1px for the tab's own border */
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--pd-purple);
}

/* A bare mono numeral, not a numbered circle. The 40px grey disc with a digit
   inside is the stock step-indicator of a thousand generated landing pages —
   and it was also the only filled circle anywhere on the site's editorial
   layer, which runs its ordinals as naked mono figures (the docs steps, the
   episode code). Same register here: the number is typography, and state is
   carried by ink — grey ahead, violet behind and at the cursor. */
.pd-index {
  color: var(--pd-ink-3);
  font-family: var(--font-mono);
  font-size: var(--t-11);
  font-weight: 600;
  line-height: var(--lh-flush);
  letter-spacing: 0.04em;
  transition: color 240ms var(--ease-dive);
}

.pd-tab.is-active .pd-index {
  color: var(--pd-purple);
}

/* The `.pd-tab small` rules that used to follow are removed along with the
   sentences they styled — one of them was a text-wrap:pretty added because those
   four descriptions were the widest small text on the page and kept orphaning
   their last word. No sentence, no orphan, no rule. The row is now the number
   and the name; the screen to the right is the description. */
.pd-tab strong {
  display: block;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}

/* The green pulse dot is gone. A live-status indicator on a marketing page is
   a borrowed signal — nothing here is live, it is a canned four-step preview —
   and it is the same costume-jewellery move as the outlined pill. The sentence
   is a real affordance hint, so the sentence stays. */
.pd-live-note {
  display: flex;
  align-items: center;
  gap: var(--pd-space-1);
  /* 40px of clearance above, so the hint reads as a footnote to the list
     rather than a fifth row of it; left-aligned with the row text (24px line
     + 16px tab padding) rather than with the anchor line. */
  margin: 40px 0 0 40px;
  color: var(--pd-ink-2);        /* was --pd-ink-3, 3.20:1 */
  font-size: var(--t-13);
  line-height: var(--lh-13);
  /* the note is the widest small text in the rail and was orphaning
     "chapter 02." onto its own line */
  text-wrap: pretty;
  max-width: 30ch;
}

.pd-live-note span {
  display: none;
}

.pd-device-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.pd-device {
  position: relative;
  width: 390px;
  height: 844px;
  overflow: hidden;
  border: 10px solid #202127;
  border-radius: 54px;
  background: var(--pd-white);
  /* Explicit, not inherited. .pd's own colour is now the light stage ink, and
     this is the line that stops it flooding into the app: everything below here
     is the product, and the product is light chrome. */
  color: var(--pd-ink);
  /* Same argument for leading, and the same boundary. The site's body sets 1.6,
     which is an editorial measure; iOS text styles sit near 1.3 and nothing in a
     real app label has half its own height in air above it. 22 rules in here
     were inheriting the page's 1.6 — stated once at the device edge instead, so
     the 17 rules that already declare their own keep winning. */
  line-height: 1.35;
  /* Grounded, not floating: directional rather than an even glow in all
     directions, which is what made it read as a sticker pasted on the page. */
  box-shadow:
    0 24px 48px -12px rgba(24, 20, 34, 0.22),
    0 2px 8px rgba(24, 20, 34, 0.08);
  font-family: var(--pd-font-ios);
  -webkit-font-smoothing: antialiased;
}

.pd-device::before {
  content: "";
  position: absolute;
  z-index: 30;
  top: 0;
  left: 50%;
  width: 112px;
  height: 30px;
  border-radius: 0 0 18px 18px;
  background: #202127;
  transform: translateX(-50%);
}

.pd-status {
  position: absolute;
  z-index: 29;
  top: 0;
  left: 0;
  right: 0;
  height: 42px;
  padding: 10px 18px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  color: var(--pd-ink);
  font-size: var(--t-12);
  line-height: var(--lh-flush);   /* a status bar is 42px of box, not leading */
  font-weight: 700;
  pointer-events: none;
  transition: color 240ms var(--ease-dive);
}

.pd-device[data-screen="meet"] .pd-status,
.pd-device[data-screen="talk"] .pd-status {
  color: var(--pd-light);
}

.pd-screen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  padding: 0;
  scroll-margin-top: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(18px) scale(0.992);
  transition:
    opacity 260ms var(--ease-dive),
    transform 320ms var(--ease-dive),
    visibility 0s linear 320ms;
}

.pd-screen.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 260ms var(--ease-dive),
    transform 320ms var(--ease-dive);
}

.pd-appbar {
  height: 88px;
  padding: 44px 18px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.86);
  border-bottom: 0.5px solid var(--pd-line);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
}

.pd-appbar strong {
  font-size: 18px;
  font-weight: 800;
}

/* iOS chrome runs its labels tight — a 1.6 leading inherited from the site's
   body is the same "web page drawing an app" tell this file opens by warning
   about, just spelled in leading instead of font size. */
.pd-appbar span {
  color: var(--pd-ink-3);
  font-size: var(--t-11);
  line-height: var(--lh-flush);
  font-weight: 600;
}

.pd-bonds {
  padding: 14px 16px 12px;
  background: var(--pd-white);
}

.pd-app-label {
  display: block;
  margin-bottom: 10px;
  color: var(--pd-ink-2);
  font-size: var(--t-11);
  line-height: var(--lh-flush);
  font-weight: 700;
}

.pd-bond-row {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  margin: 0 -16px;
  padding: 0 16px 2px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
}

.pd-bond-row::-webkit-scrollbar { display: none; }

.pd-bond {
  flex: 0 0 72px;
  min-width: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

button.pd-bond {
  appearance: none;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}

button.pd-bond:active {
  opacity: 1;
  transform: none;
}

.pd-bond small {
  max-width: 72px;
  overflow: hidden;
  color: var(--pd-ink-2);
  font-size: 11px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pd-avatar {
  position: relative;
  display: block;
  width: 72px;
  height: 72px;
  overflow: hidden;
  padding: 2px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pd-cyan), var(--pd-violet));
}

.pd-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
  border: 2px solid var(--pd-white);
  border-radius: 50%;
  background: #e9e9ee;
}

.pd-bond--vio .pd-avatar::after {
  content: "1";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border: 2px solid var(--pd-white);
  border-radius: 50%;
  background: var(--pd-red);
  color: var(--pd-white);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.pd-feed-card {
  margin: 0 12px;
  overflow: hidden;
  border: 0.5px solid var(--pd-line);
  border-radius: var(--pd-radius-lg);
  background: var(--pd-white);
  box-shadow: 0 16px 40px rgba(20, 20, 28, 0.1);
}

.pd-feed-visual {
  position: relative;
  height: 420px;
  overflow: hidden;
  background: var(--pd-dark);
}

.pd-feed-back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.52) saturate(0.72);
}

.pd-feed-visual::before,
.pd-feed-visual::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
}

.pd-feed-visual::before {
  background: linear-gradient(270deg, rgba(4, 4, 8, 0.44), transparent 27%);
}

.pd-feed-visual::after {
  background: linear-gradient(180deg, transparent 48%, rgba(5, 5, 8, 0.88) 100%);
}

/* Home's cast rail: the faces belong to the story cover, not to My Bonds. The
   slot stays 32px while a selected face grows out to 48px, so selection never
   reflows the column or changes the cover crop. */
.pd-feed-cast {
  position: absolute;
  z-index: 4;
  top: 64px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pd-feed-cast-face {
  position: relative;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  opacity: 0.45;
  cursor: pointer;
  transition: opacity 220ms var(--ease-dive), transform 260ms var(--ease-dive);
}

.pd-feed-cast-face img {
  width: 32px;
  height: 32px;
  display: block;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
}

.pd-feed-cast-face[aria-pressed="true"] {
  z-index: 1;
  opacity: 1;
  transform: translateX(-8px) scale(1.5);
}

.pd-feed-cast-face[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 1px dashed rgba(255, 255, 255, 0.78);
  border-radius: 50%;
  pointer-events: none;
}

.pd-feed-cast-face:focus-visible {
  outline: 2px solid var(--pd-cyan);
  outline-offset: 4px;
}

.pd-feed-cast-clear {
  position: absolute;
  z-index: 5;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: var(--pd-white);
  font: 500 20px/1 var(--pd-font-ios);
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.pd-feed-cast-clear[hidden] { display: none; }

.pd-feed-cast-clear:focus-visible {
  outline: 2px solid var(--pd-cyan);
  outline-offset: 3px;
}

.pd-feed-card[data-pd-cast-selected] .pd-save { display: none; }

.pd-save {
  position: absolute;
  z-index: 4;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.26);
  color: var(--pd-white);
  font-size: 25px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.pd-feed-title {
  position: absolute;
  z-index: 4;
  left: 18px;
  right: 18px;
  bottom: 18px;
  color: var(--pd-white);
}

.pd-feed-title small,
.pd-feed-title strong {
  display: block;
}

.pd-feed-title small {
  margin-bottom: 4px;
  color: var(--pd-light-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pd-feed-title strong {
  font-size: 27px;
  font-weight: 850;
  letter-spacing: -0.03em;
}

.pd-feed-copy {
  position: relative;
  min-height: 100px;
  padding: 14px 16px 16px;
}

.pd-feed-copy p {
  margin: 0 0 10px;
  color: var(--pd-ink);
  font-size: 12px;
  line-height: 1.45;
}

.pd-feed-copy span {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  margin-right: 5px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--pd-purple-soft);
  color: var(--pd-purple);
  font-size: 11px;
  font-weight: 700;
}

/* One accent chip, one neutral chip — the app's own pattern (NEW in colour,
   the genre in grey). Two identical violet pills side by side is a template
   pattern, and it also spends the accent twice on one card. */
.pd-feed-copy span + span {
  background: rgba(16, 17, 20, 0.05);
  color: var(--pd-ink-2);
}

.pd-feed-open {
  appearance: none;
  position: absolute;
  z-index: 5;
  top: 14px;
  left: 14px;
  min-height: 44px;
  padding: 0 13px;
  border: 0.5px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(8, 8, 12, 0.44);
  color: var(--pd-white);
  font: 700 11px/1 var(--pd-font-ios);
  cursor: pointer;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.pd-feed-open b {
  color: var(--pd-cyan);
  font-size: 12px;
}

.pd-feed-open:active {
  opacity: 0.84;
  transform: scale(0.97);
}

.pd-bottom-nav {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: 18px;
  width: 184px;
  height: 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  border: 0.5px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--pd-radius-xl);
  background: rgba(245, 245, 248, 0.8);
  color: var(--pd-ink-3);
  font-size: 20px;
  text-align: center;
  transform: translateX(-50%);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
}

.pd-bottom-nav .is-current {
  color: var(--pd-purple);
}

.pd-meet,
.pd-talk {
  color: var(--pd-light);
  background:
    radial-gradient(circle at 50% 14%, rgba(148, 110, 254, 0.28), transparent 32%),
    linear-gradient(180deg, #171220 0%, var(--pd-dark) 100%);
}

.pd-dark-top {
  position: absolute;
  z-index: 8;
  top: 0;
  left: 0;
  right: 0;
  height: 92px;
  padding: 44px 18px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--pd-light);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.58), transparent);
}

.pd-dark-top > span:first-child,
.pd-dark-top > span:last-child {
  min-width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  color: var(--pd-light-2);
  font-size: 22px;
}

.pd-dark-top strong {
  display: block;
  font-size: 14px;
  font-weight: 750;
}

.pd-vio-scene {
  position: absolute;
  inset: 0 0 304px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(15, 10, 24, 0.1), rgba(8, 7, 12, 0.78)),
    url("characters/stage-plate.webp") center 34% / cover;
}

.pd-vio-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 46%, var(--pd-dark) 100%);
}

.pd-vio-scene img {
  position: absolute;
  left: 9%;
  bottom: -10%;
  width: 82%;
  height: 102%;
  object-fit: contain;
  object-position: 50% 100%;
  filter: drop-shadow(0 30px 48px rgba(0, 0, 0, 0.46));
}

/* ---- character-page chrome, from the Product Preview -------------------
   The ix main state's header: back circle, name pill, bond bar. All three are
   glass on the scene, because the scene runs full-bleed behind them — there is
   no bar to put chrome IN. The bond bar is the page's one status readout and
   it is a graphic, not a label: the app states the number only when it changes
   (chapter 04). Gradient runs the brand pair, cyan into violet — the same
   gradient that rings the active bond avatar — not the sunset ramp the demo
   file uses, which is demo-only art direction. */
.pd-ix-top {
  position: absolute;
  z-index: 8;
  top: 0;
  left: 0;
  right: 0;
  padding: 52px 18px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.pd-ix-btn,
.pd-ix-name {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border: 0.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(20, 18, 27, 0.44);
  color: var(--pd-light);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.pd-ix-btn {
  width: 40px;
  color: var(--pd-light-2);
}
.pd-ix-btn .ico { width: 20px; height: 20px; }

.pd-ix-name {
  gap: 7px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 750;
}
.pd-ix-name .ico { width: 12px; height: 12px; opacity: 0.55; }

.pd-ix-bond {
  position: absolute;
  z-index: 8;
  top: 104px;
  left: 18px;
  width: 56%;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}
.pd-ix-bond i {
  display: block;
  width: 62%;   /* the same 62% the chapter-04 meter starts its climb from */
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--pd-cyan), var(--pd-violet));
}

.pd-vio-name {
  position: absolute;
  z-index: 4;
  left: 18px;
  bottom: 42px;
}

.pd-vio-name small,
.pd-vio-name strong {
  display: block;
}

/* Tracked caps, as the app sets its scene slug ("MIDNIGHT · BACKSTAGE") —
   sentence case here read as a photo caption rather than as UI. */
.pd-vio-name small {
  margin-bottom: 5px;
  color: var(--pd-light-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.pd-vio-name strong {
  font-size: 28px;
  font-weight: 850;
}

.pd-prompt {
  position: absolute;
  z-index: 9;
  left: 14px;
  right: 14px;
  bottom: 22px;
  padding: 18px;
  border: 0.5px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--pd-radius-xl);
  background: rgba(28, 28, 32, 0.76);
  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
}

.pd-prompt p {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 750;
  line-height: 1.35;
}

/* The scroll-through preview strip on the talk screen. Pinned just under the
   .pd-dark-top bar (92px), over the hero image — the bottom 58% belongs to
   the absolutely-positioned thread, which this must never cover. */
.pd-preview-note {
  position: absolute;
  z-index: 9;
  top: 98px;
  left: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 8px 8px 13px;
  border: 0.5px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--pd-radius-md);
  background: rgba(28, 28, 32, 0.66);
  color: var(--pd-light);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}

.pd-preview-note span {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.72;
}

.pd-preview-note button {
  appearance: none;
  flex-shrink: 0;
  padding: 6px 10px;
  border: 0.5px solid rgba(148, 110, 254, 0.5);
  border-radius: var(--pd-radius-sm, 10px);
  background: rgba(148, 110, 254, 0.2);
  color: inherit;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.pd-preview-note button:hover {
  background: rgba(148, 110, 254, 0.32);
}

.pd-choice {
  appearance: none;
  width: 100%;
  min-height: 86px;
  margin-top: 8px;
  padding: 11px 13px;
  border: 0.5px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--pd-radius-md);
  background: rgba(255, 255, 255, 0.08);
  color: var(--pd-light);
  font-family: var(--pd-font-ios);
  text-align: left;
  cursor: pointer;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    transform 100ms ease-out;
}

.pd-choice:hover,
.pd-choice.is-selected {
  border-color: rgba(148, 110, 254, 0.72);
  background: rgba(148, 110, 254, 0.24);
}

.pd-choice:active {
  opacity: 0.85;
  transform: scale(0.98);
}

.pd-choice span,
.pd-choice strong,
.pd-choice small {
  display: block;
}

.pd-choice span {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  color: #9bc6ff;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

/* the app leads each direction kicker with a dot — it is the "this is a
   path" marker, and it is what makes two stacked cards read as a fork */
.pd-choice span::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.pd-choice strong {
  font-size: 13px;
  font-weight: 750;
  line-height: 1.25;
}

.pd-choice small {
  margin-top: 4px;
  color: rgba(235, 235, 245, 0.56);
  font-size: 11px;
  font-weight: 550;
  line-height: 1.3;
}

.pd-chat-hero {
  position: relative;
  height: 46%;
  overflow: hidden;
}

.pd-chat-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 7, 10, 0.12), var(--pd-dark) 100%);
}

.pd-chat-hero > img {
  position: absolute;
  left: 50%;
  bottom: -42%;
  width: 74%;
  height: 136%;
  object-fit: contain;
  transform: translateX(-50%);
  filter: brightness(0.78) saturate(0.94);
}

.pd-chat-hero .pd-dark-top {
  height: 96px;
}

.pd-chat-hero .pd-dark-top > span:nth-child(2) {
  display: block;
  text-align: center;
}

.pd-chat-hero .pd-dark-top small {
  display: block;
  margin-top: 2px;
  color: var(--pd-light-2);
  font-size: 11px;
}

.pd-thread {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 58%;
  padding: 22px 14px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-top: 0.5px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--pd-radius-xl) var(--pd-radius-xl) 0 0;
  background: rgba(15, 14, 20, 0.94);
  box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
}

.pd-chat-time {
  align-self: center;
  margin-bottom: 16px;
  color: rgba(235, 235, 245, 0.42);
  font-size: 11px;
  font-weight: 600;
}

.pd-direction {
  align-self: center;
  min-height: 24px;
  margin: -4px 0 12px;
  padding: 0 9px;
  align-items: center;
  border: 0.5px solid rgba(155, 198, 255, 0.28);
  border-radius: 999px;
  background: rgba(155, 198, 255, 0.08);
  color: #9bc6ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pd-bubble {
  max-width: 80%;
  margin: 0 0 8px;
  padding: 10px 12px;
  border-radius: var(--pd-radius-md);
  font-size: 13px;
  line-height: 1.4;
}

.pd-bubble--me {
  align-self: flex-end;
  border-bottom-right-radius: 5px;
  background: var(--pd-purple);
  color: var(--pd-white);
}

.pd-bubble--vio {
  border-bottom-left-radius: 5px;
  background: var(--pd-dark-3);
  color: var(--pd-light);
}

/* A row of pills above the input bar, which is how the app actually carries
   the quick skills — the 3-column grid of boxes this replaces was a web
   toolbar wearing the app's labels. Pills hug their own text, so the row also
   stops pretending the three skills are equal-width objects. */
.pd-skillbar {
  width: 100%;
  margin-top: auto;
  display: flex;
  gap: 6px;
}

.pd-skillbar span {
  flex: none;
  min-height: 38px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--pd-light-2);
  /* 11px, not 8px. iOS caption2 is 11pt and that is the floor; 8px here was the
     loudest of the sub-11px sizes claiming to be a real product screen. */
  font-size: 11px;
  font-weight: 650;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.pd-skillbar svg {
  width: 16px;
  height: 16px;
  display: block;
  flex: none;
  fill: none;
  stroke: var(--pd-purple-bright);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* The notehead is the one filled shape in the set and needs the same colour as
     the strokes around it. */
  color: var(--pd-purple-bright);
}

/* ---- the input bar ------------------------------------------------------
   "Say something to Vio…" with the mic in the field, exactly as the chat
   state draws it. Placeholder-grey on purpose: an empty field is the honest
   state, and it is also the invitation the whole demo is walking toward. */
.pd-inputbar {
  width: 100%;
  margin-top: 8px;
  display: flex;
}

.pd-input-field {
  flex: 1;
  min-height: 44px;
  padding: 0 6px 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 0.5px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(235, 235, 245, 0.46);
  font-size: 13px;
  font-weight: 500;
}

.pd-input-field .ico {
  width: 32px;
  height: 32px;
  padding: 7px;
  box-sizing: border-box;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--pd-light-2);
  stroke-width: 1.5;
}

.pd-return {
  appearance: none;
  width: 100%;
  min-height: 52px;
  margin-top: 8px;
  padding: 7px 13px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--pd-radius-md);
  background: rgba(148, 110, 254, 0.13);
  color: var(--pd-light);
  font-family: var(--pd-font-ios);
  text-align: left;
  cursor: pointer;
}

.pd-return span {
  color: rgba(235, 235, 245, 0.48);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pd-return b {
  font-size: 11px;
  font-weight: 750;
}

.pd-return:active {
  opacity: 0.84;
  transform: scale(0.98);
}

.pd-remember {
  padding: 88px 14px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(circle at 80% 12%, rgba(148, 110, 254, 0.16), transparent 28%),
    var(--pd-page);
}

.pd-remember::-webkit-scrollbar {
  display: none;
}

.pd-remember .pd-appbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.pd-relationship {
  margin-top: 14px;
  padding: 14px;
  border: 0.5px solid var(--pd-line);
  border-radius: var(--pd-radius-lg);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 14px 32px rgba(24, 20, 34, 0.08);
}

.pd-relationship-head {
  display: grid;
  grid-template-columns: 64px 1fr 24px;
  gap: 12px;
  align-items: center;
}

.pd-avatar--large {
  width: 62px;
  height: 62px;
}

.pd-relationship-head strong,
.pd-relationship-head small {
  display: block;
}

.pd-relationship-head strong {
  font-size: 16px;
  font-weight: 800;
}

.pd-relationship-head small,
.pd-relationship > small {
  margin-top: 3px;
  color: var(--pd-ink-3);
  font-size: 11px;
  font-weight: 600;
}

.pd-relationship-head i {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--pd-red);
  color: var(--pd-white);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.pd-bond-meter {
  height: 5px;
  margin: 14px 0 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(16, 17, 20, 0.08);
}

.pd-bond-meter span {
  display: block;
  width: 62%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--pd-cyan), var(--pd-violet));
}

.pd-whisper {
  position: relative;
  height: 330px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: var(--pd-radius-xl);
  background: var(--pd-dark);
  box-shadow: 0 22px 54px rgba(18, 14, 26, 0.18);
}

.pd-whisper > img {
  position: absolute;
  left: 50%;
  bottom: -28%;
  width: 72%;
  height: 132%;
  object-fit: contain;
  transform: translateX(-50%);
  filter: brightness(0.78) saturate(0.88);
}

.pd-whisper-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(4, 4, 7, 0.08), rgba(4, 4, 7, 0.92)),
    radial-gradient(circle at 74% 18%, rgba(148, 110, 254, 0.3), transparent 32%);
}

.pd-whisper-copy {
  position: absolute;
  z-index: 2;
  left: 18px;
  right: 18px;
  bottom: 18px;
  color: var(--pd-white);
}

.pd-whisper-copy span {
  color: var(--pd-light-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pd-whisper-copy p {
  max-width: 16ch;
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.08;
}

.pd-memory-card {
  min-height: 76px;
  margin-top: 12px;
  padding: 12px;
  display: grid;
  grid-template-columns: 42px 1fr 16px;
  gap: 10px;
  align-items: center;
  border: 0.5px solid var(--pd-line);
  border-radius: var(--pd-radius-md);
  background: rgba(255, 255, 255, 0.88);
}

.pd-memory-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--pd-purple-soft);
  color: var(--pd-purple);
  font-size: 20px;
}

.pd-memory-card small,
.pd-memory-card strong {
  display: block;
}

.pd-memory-card small {
  margin-bottom: 4px;
  color: var(--pd-ink-3);
  font-size: 11px;
  font-weight: 700;
}

.pd-memory-card strong {
  font-size: 12px;
  font-weight: 750;
}

.pd-private {
  margin: 12px 6px 0;
  color: var(--pd-ink-3);
  font-size: 11px;
  text-align: center;
}

.pd-home {
  position: absolute;
  z-index: 40;
  left: 50%;
  bottom: 8px;
  width: 118px;
  height: 5px;
  border-radius: 999px;
  background: currentColor;
  color: var(--pd-dark);
  transform: translateX(-50%);
  pointer-events: none;
  transition: color 240ms var(--ease-dive);
}

.pd-device[data-screen="meet"] .pd-home,
.pd-device[data-screen="talk"] .pd-home {
  color: rgba(255, 255, 255, 0.82);
}

.pd-branch {
  display: none;
}

.pd-memory-card strong.pd-branch {
  display: none;
}

.pd-device[data-choice="continue"] .pd-branch--continue,
.pd-device[data-choice="gesture"] .pd-branch--gesture {
  display: block;
}

.pd-device[data-choice="continue"] .pd-memory-card strong.pd-branch--continue,
.pd-device[data-choice="gesture"] .pd-memory-card strong.pd-branch--gesture {
  display: block;
}

.pd-device[data-choice="continue"] .pd-direction.pd-branch--continue,
.pd-device[data-choice="gesture"] .pd-direction.pd-branch--gesture {
  display: inline-flex;
}

/* Desktop uses the labelled chapter list in .pd-tabs instead. */
.pd-mobile-nav {
  display: none;
}

.pd-cta {
  padding: 128px 24px 120px;
  text-align: center;
}

/* Same rule as .pd-intro, at the same 760px measure. A border-top on .pd-cta
   itself would span the full 1180px shell and stop matching; constraining
   .pd-cta instead would force the 72px headline to rewrap. */
.pd-cta::before {
  content: "";
  display: block;
  width: min(760px, 100%);
  margin: 0 auto 20px;
  border-top: 1px solid var(--pd-line);
}

.pd-cta h2 {
  font-size: clamp(40px, 6vw, 72px);
}

.pd-cta .appstore-badge {
  margin: 32px auto 0;
}

.pd-restart {
  appearance: none;
  min-height: 44px;
  margin: 2px 0 0 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--pd-ink-2);
  font: 600 13px/1 var(--pd-font-ios);
  text-align: left;
  cursor: pointer;
}

.pd-restart:hover {
  color: var(--pd-purple);
}

@media (max-width: 980px) {
  .pd-demo {
    grid-template-columns: minmax(240px, 300px) auto;
    gap: 36px;
    padding: 16px 24px 40px;
  }

  .pd-tab {
    min-height: 48px;
    padding: 10px 12px;
  }

  .pd-device {
    transform: scale(0.86);
  }

  .pd-device-wrap {
    width: 390px;
    height: 726px;
  }
}

@media (max-width: 760px) {
  .pd-shell {
    width: 100%;
    padding-top: 88px;
  }

  .pd-intro {
    width: calc(100% - 40px);
    margin-bottom: 48px;
  }

  .pd-intro h2 {
    font-size: clamp(40px, 12vw, 58px);
  }

  .pd-intro p {
    font-size: 16px;
  }

  .pd-demo {
    display: flex;
    min-height: 0;
    padding: 40px 0 48px;
    flex-direction: column-reverse;
    gap: 32px;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }

  .pd-guide {
    width: calc(100% - 40px);
  }

  .pd-tabs {
    display: none;
  }

  .pd-live-note {
    justify-content: center;
    margin: 0;
    text-align: center;
  }

  .pd-device-wrap {
    width: min(100%, 430px);
    height: auto;
  }

  .pd-device {
    width: min(100%, 390px);
    height: min(844px, calc(100svh - 112px));
    min-height: 650px;
    border-width: 0;
    border-radius: 0;
    box-shadow: 0 28px 72px rgba(24, 20, 34, 0.18);
    transform: none;
  }

  .pd-device::before {
    display: none;
  }

  .pd-mobile-nav {
    display: block;
    width: calc(100% - 40px);
    margin: 20px auto 0;
  }

  /* The name, which is the part the numbers never carried. Mono number and body
     name, same pairing the desktop chapter list uses, so the two navs read as
     one component seen twice rather than two different widgets. */
  .pd-mobile-step {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 12px;
  }
  .pd-step-n {
    flex: none;
    font-family: var(--font-mono);
    font-size: var(--t-12);
    line-height: var(--lh-12);
    letter-spacing: var(--label-tracking);
    color: var(--pd-ink-2);      /* was --pd-ink-3, 3.20:1 */
  }
  .pd-step-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--pd-ink);
  }

  .pd-mobile-tabs {
    width: 100%;
    display: flex;
    align-items: stretch;
    gap: 6px;
  }

  /* The button stays a full 44px tall for the tap target; only the 2px rule
     inside it is visible. A 2px-tall button would be the honest look and a
     hostile hit area. */
  .pd-mobile-tabs button {
    appearance: none;
    flex: 1;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  .pd-mobile-tabs button i {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 1px;
    background: var(--pd-ink-3);
    transition: background 240ms var(--ease-dive);
  }

  .pd-mobile-tabs button.is-active i {
    background: var(--pd-purple);
  }

  /* "Filled up to here". There is no previous-sibling selector, so this is
     inverted: segments are reached by default and the ones AFTER the active
     button are dimmed back down. Costs no JS and no extra class. */
  .pd-mobile-tabs button.is-active ~ button i {
    background: rgba(16, 17, 20, 0.14);
  }

  .pd-cta {
    padding: 104px 20px 96px;
  }
}

@media (max-width: 420px) {
  .pd-device {
    height: calc(100svh - 112px);
  }

  .pd-feed-visual {
    height: 340px;
  }

  .pd-whisper {
    height: 300px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pd-tab,
  .pd-screen,
  .pd-choice,
  .pd-status,
  .pd-home {
    transition: none;
  }
}

/* ==========================================================================
   POLISH PASS — the rest of the icon set, and one stray hue.

   This file opens by stating the type floor and then, further down, states the
   icon rule for the skillbar: "Real icons, not characters... 20px box, 1.6
   stroke, round caps, currentColor". Six other components never got it. They
   do now, on the same grid, so the phone reads as one product drawn by one
   hand rather than as a web page that reached into the Unicode tables when it
   needed a shape.

   The stray hue: .pd-choice span and .pd-direction were #9bc6ff, a sky blue
   that belongs to neither the site palette nor the app's own extracted one
   (the brand gradient runs #82f8ed -> #88d0f2 -> #946efe). It was the third
   hue family inside a single screen. Both of those elements label the
   RELATIONSHIP DIRECTION, which is the exact thing the brand violet marks
   everywhere else, so they take it.
   ========================================================================== */

.pd .ico {
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
}

/* ---- status bar ---------------------------------------------------------
   Cellular / wifi / battery, drawn rather than typed. The bars are filled and
   the battery is stroked, which is exactly how iOS draws them — a status bar
   in one uniform weight is the tell that it was recreated from memory. */
.pd-status-icons {
  display: flex;
  align-items: center;
  gap: 5px;
}
.pd-status-icons svg {
  display: block;
  color: currentColor;
}
.pd-status .pd-ico-bars,
.pd-status .pd-ico-batt-fill { fill: currentColor; stroke: none; }
.pd-status .pd-ico-wifi {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}
.pd-status .pd-ico-batt-shell {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.42;
}

/* ---- save / bookmark ---------------------------------------------------- */
.pd-save { font-size: 0; }
.pd-save .ico { width: 21px; height: 21px; stroke-width: 1.7; }

/* ---- the tab bar --------------------------------------------------------
   Three silhouettes that are unalike at 20px — a roof, a rounded diamond, a
   ring — because that is the only thing that tells an icon set apart at this
   size. The current tab is filled as well as tinted: colour alone is not a
   state, and on a 0.8-opacity frosted bar it is barely a difference. */
.pd-bottom-nav {
  font-size: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  place-items: center;
}
.pd-bottom-nav span {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
}
.pd-bottom-nav .ico { width: 22px; height: 22px; stroke-width: 1.7; }
.pd-bottom-nav .is-current .ico { stroke-width: 2; }

/* ---- back / more, on the dark screens ----------------------------------- */
.pd-dark-top > span:first-child,
.pd-dark-top > span:last-child { font-size: 0; }
.pd-dark-top .ico { width: 22px; height: 22px; }
.pd-dark-top .ico--more { stroke: none; fill: currentColor; }

/* ---- Memory mark and the disclosure chevron ----------------------------- */
.pd-memory-icon { font-size: 0; }
.pd-memory-icon .ico { width: 20px; height: 20px; stroke-width: 1.6; }
.pd-memory-chevron {
  display: grid;
  place-items: center;
  color: var(--pd-ink-3);
}
.pd-memory-chevron .ico { width: 16px; height: 16px; stroke-width: 1.8; }

/* ---- the stray hue ------------------------------------------------------ */
.pd-choice span { color: var(--pd-purple-bright); }
.pd-direction {
  border-color: rgba(148, 110, 254, 0.34);
  background: rgba(148, 110, 254, 0.12);
  color: var(--pd-purple-bright);
}
.pd-feed-open b { color: var(--pd-purple-bright); }

/* ---- the chapter list, one step further ---------------------------------
   The four rows were separated by 8px of nothing, so the list read as four
   loose paragraphs and the 2px active bar had to carry the whole structure
   alone. A hairline between rows is a divider, not an enclosure — the same
   distinction the site layer just made for its cards — and it gives the
   active bar something to be positioned against. */
.pd-tab + .pd-tab { border-top: 1px solid var(--pd-line); }
.pd-tabs { gap: 0; }
.pd-tab { border-radius: 0 var(--pd-radius-lg) var(--pd-radius-lg) 0; }
.pd-tab.is-active::before { top: 0; bottom: 0; }
/* The number carried the ordinal and nothing else. Violet on the rows already
   visited, grey on the ones ahead: the list still says where you are in the
   four-step demo without a word of extra copy — now in ink alone, since the
   discs are gone (see .pd-index). */
.pd-tab.is-visited .pd-index {
  color: var(--pd-purple);
}

/* ---- the device, grounded ------------------------------------------------
   A 10px bezel with a 54px radius and a single soft shadow reads as a phone
   drawn in CSS. Real hardware has a specular edge: the bezel catches light on
   its top rim and goes dark at the bottom. One inset highlight and one inset
   shade is the whole difference between a rounded rectangle and an object. */
.pd-device {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 2px 8px rgba(24, 20, 34, 0.08),
    0 24px 48px -12px rgba(24, 20, 34, 0.22),
    0 48px 96px -32px rgba(24, 20, 34, 0.18);
}
@media (max-width: 760px) {
  /* Mobile is a rebuild, not a squeeze: no bezel, so no bezel lighting. */
  .pd-device {
    box-shadow: 0 28px 72px rgba(24, 20, 34, 0.18);
  }
}

/* The network label stays type, because it IS type — it is the one thing in
   that row a font should draw. Tabular so it never shifts the icons beside it. */
.pd-status-icons b {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   FIDELITY PASS — measured against the real app.

   Source: Product-Preview/ios-app-demo/infidive_demo.html, the shipped
   single-file prototype. Every number below is lifted from its `.app`,
   `.sb` and `.ios-*` rules rather than eyeballed from a screenshot. Where the
   website disagreed with the product, the product wins: this section's whole
   job is to be a picture of the thing that exists.

     radius     44px, not 54
     bezel      two rings — a dark body and a lighter machined rim
     notch      124x33, radius 0 0 22px 22px, #1c1c1e
     ground     a three-stop vertical gradient, not flat white
     top        a 246px blurred scrim that fades out under its own mask
     status     15.5px / 800 / -0.35px, filled signal bars, stroked battery
   ========================================================================== */

.pd-device {
  /* The bezel moves from `border` to stacked rings. A border eats INTO the
     390x844 box (box-sizing: border-box), so the screen was really 370x824 —
     every inner layout was being computed against the wrong viewport. Rings
     sit outside the box, which is what the app does and what an actual phone
     does. The second ring is the machined edge catching light; without it a
     10px black band reads as a stroke, not as hardware. */
  border: 0;
  border-radius: 44px;
  background: linear-gradient(180deg, #FBFBFC 0%, #F7F8FA 42%, #F0F2F6 100%);
  box-shadow:
    0 0 0 10px #202126,
    0 0 0 11px #34363D,
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 32px 80px rgba(44, 58, 86, 0.30);
}
.pd-device::before {
  width: 124px;
  height: 33px;
  border-radius: 0 0 22px 22px;
  background: #1c1c1e;
}

/* The scrim — and why it is on ONE screen only.

   In the app this lives on the root at z-index 43, under a status bar at 120,
   and the thing that makes it read is CONTENT SLIDING UNDER IT. Ported onto a
   static mock it stops being a scroll affordance and becomes a permanent
   frosted lid: applied to `discover` it buried the app bar and turned all four
   My Bonds avatars into ghosts. Measured, not guessed — the render showed it.

   `remember` is the one chapter that genuinely scrolls (.pd-remember has
   overflow-y: auto), so it is the one chapter where the effect is true. The
   app bar is lifted above the scrim there for the same reason the app puts its
   status bar at 120: fixed chrome stays legible, only the feed passes under. */
.pd-device[data-screen="remember"] .pd-screen::after {
  content: "";
  position: absolute;
  z-index: 8;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(241, 242, 245, 0.86) 0%, rgba(241, 242, 245, 0.7) 48%,
    rgba(241, 242, 245, 0.4) 76%, rgba(241, 242, 245, 0) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%,
    rgba(0, 0, 0, 0.7) 78%, rgba(0, 0, 0, 0.2) 92%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 60%,
    rgba(0, 0, 0, 0.7) 78%, rgba(0, 0, 0, 0.2) 92%, transparent 100%);
}
.pd-remember .pd-appbar { z-index: 12; }

/* ---- status bar, rebuilt from .sb / .ios-* ----------------------------- */
.pd-status { height: 58px; padding: 14px 27px 0; font-weight: 800; }
.pd-sb-t {
  /* 16, not the app's 15.5. This file opens by banning fractional sizes and
     the site layer killed six of them in one pass; reintroducing one — even a
     measured one — reopens that. Half a pixel at this size is invisible, the
     rule is not. Deliberate 0.5px deviation from the source. */
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.35px;
  line-height: 18px;
}
.pd-sb-r { display: flex; align-items: center; gap: 5px; height: 18px; }
.pd-sb-r b { font-size: 11px; font-weight: 800; letter-spacing: -0.1px; }

.ios-cell { width: 19px; height: 13px; display: flex; align-items: flex-end; gap: 2px; }
.ios-cell span { width: 3px; border-radius: 1px; background: currentColor; display: block; }
.ios-cell span:nth-child(1) { height: 4px;  opacity: 0.35; }
.ios-cell span:nth-child(2) { height: 7px;  opacity: 0.55; }
.ios-cell span:nth-child(3) { height: 10px; opacity: 0.78; }
.ios-cell span:nth-child(4) { height: 13px; }

.ios-wifi { width: 17px; height: 12px; position: relative; overflow: hidden; }
.ios-wifi::before {
  content: ""; position: absolute; left: 50%; top: 1px;
  width: 16px; height: 16px; border: 3px solid currentColor;
  border-left-color: transparent; border-right-color: transparent;
  border-bottom-color: transparent; border-radius: 50%;
  transform: translateX(-50%);
}
.ios-wifi::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 4px; height: 4px; border-radius: 50%;
  background: currentColor; transform: translateX(-50%);
}
.ios-battery {
  width: 27px; height: 13px; border: 1.5px solid currentColor;
  border-radius: 4px; padding: 1.5px; position: relative;
}
.ios-battery::before {
  content: ""; position: absolute; right: -3.5px; top: 4px;
  width: 2px; height: 5px; border-radius: 0 2px 2px 0;
  background: currentColor; opacity: 0.45;
}
.ios-battery::after {
  content: ""; display: block; width: 78%; height: 100%;
  border-radius: 2px; background: currentColor;
}

/* ==========================================================================
   TWO EFFECTS THE DEMO WAS MISSING.

   The four chapters were switching between four finished stills. A product
   preview that only ever shows end states cannot demonstrate the one thing
   this product sells — that something HAPPENS because of what you chose.

   (A) Chapter 03: the thread writes itself. Bubbles arrive one at a time on
       the app's own curve, which is also the honest depiction: a reply is not
       already on screen when you open a conversation.
   (B) Chapter 04: the bond bar climbs and the level pops, so "Lv 2" is a
       result the visitor watches happen rather than a number they are handed.
       Both curves and the pop keyframes are the app's, verbatim.
   ========================================================================== */

@keyframes pd-thread-in {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
.pd-talk.is-active .pd-direction,
.pd-talk.is-active .pd-bubble,
.pd-talk.is-active .pd-skillbar,
.pd-talk.is-active .pd-return {
  animation: pd-thread-in 260ms cubic-bezier(0.2, 0.85, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 180ms + 120ms);
}

@keyframes pd-meter-fill { from { width: 18%; } to { width: 62%; } }
@keyframes pd-bond-pop {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.14); }
  100% { transform: scale(1); }
}
.pd-remember.is-active .pd-bond-meter span {
  animation: pd-meter-fill 900ms cubic-bezier(0.32, 0.72, 0, 1) 460ms both;
}
.pd-remember.is-active .pd-relationship-head small {
  display: inline-block;
  transform-origin: left center;
  animation: pd-bond-pop 420ms ease 1180ms both;
}
/* the whisper is the payoff of the whole four-step run; it should arrive,
   not already be sitting there */
.pd-remember.is-active .pd-whisper {
  animation: pd-thread-in 420ms cubic-bezier(0.32, 0.72, 0, 1) 700ms both;
}
.pd-remember.is-active .pd-memory-card {
  animation: pd-thread-in 420ms cubic-bezier(0.32, 0.72, 0, 1) 980ms both;
}

@media (prefers-reduced-motion: reduce) {
  .pd-talk.is-active .pd-direction,
  .pd-talk.is-active .pd-bubble,
  .pd-talk.is-active .pd-skillbar,
  .pd-talk.is-active .pd-return,
  .pd-remember.is-active .pd-whisper,
  .pd-remember.is-active .pd-memory-card,
  .pd-remember.is-active .pd-relationship-head small { animation: none; }
  /* held at the end frame, never reset to zero — a static 18% bar would be
     reporting the wrong number */
  .pd-remember.is-active .pd-bond-meter span { animation: none; width: 62%; }
}

/* ---- mobile re-assertion ------------------------------------------------
   The 760px rule that strips the bezel is declared ABOVE this pass, and media
   queries add no specificity — so `border-radius: 44px` and the two hardware
   rings were leaking onto phones and re-drawing the frame the mobile rebuild
   exists to remove. The site's own rule: on a phone the page IS the product
   screen, not a picture of one. */
@media (max-width: 760px) {
  .pd-device {
    border-radius: 0;
    background: linear-gradient(180deg, #FBFBFC 0%, #F7F8FA 42%, #F0F2F6 100%);
    box-shadow: 0 28px 72px rgba(24, 20, 34, 0.18);
  }
}

/* ==========================================================================
   SCROLL NARRATIVE

   The phone remains a real, clickable product preview. The page around it now
   behaves like an editorial timeline: an opening statement and four product
   beats share one sticky canvas, while supporting fragments enter and leave.
   Those fragments are evidence (bond, direction, skills, whisper, memory),
   never a second copy of the whole interface.
   ========================================================================== */

.pd-shell {
  width: min(1360px, calc(100% - 48px));
  padding-top: 0;
}

.pd-scroll-story {
  position: relative;
  min-height: 500svh;
  margin-inline: calc(50% - 50vw);
}

.pd-scroll-story .pd-demo {
  position: sticky;
  z-index: 2;
  top: 0;
  width: min(1360px, calc(100vw - 48px));
  height: 100svh;
  min-height: 680px;
  margin: 0 auto;
  padding: 72px 0 28px;
  display: grid;
  grid-template-columns: minmax(270px, 330px) minmax(620px, 820px);
  justify-content: center;
  align-items: center;
  gap: clamp(36px, 4vw, 76px);
}

/* Opening is not a section above the demo. It is beat zero inside the same
   sticky canvas, so the first product state can replace it without a blank
   handoff or a second vertical composition entering from below. */
.pd-scroll-story .pd-intro {
  position: absolute;
  z-index: 20;
  inset: 0;
  width: min(1040px, calc(100% - 48px));
  height: 100%;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 0;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12svh) scale(0.92);
  transform-origin: 50% 42%;
  pointer-events: none;
  transition:
    opacity 520ms var(--ease-dive),
    transform 760ms var(--ease-dive),
    visibility 0s linear 760ms;
}

.pd-scroll-story[data-active="opening"] .pd-intro {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition:
    opacity 520ms var(--ease-dive),
    transform 760ms var(--ease-dive);
}

.pd-scroll-story .pd-intro h2 {
  max-width: 960px;
  margin-top: 24px;
  font-size: clamp(64px, 7vw, 104px);
}

.pd-scroll-story .pd-intro p {
  max-width: 34ch;
  margin-top: 22px;
  font-size: 17px;
}

.pd-opening-cue {
  position: absolute;
  left: 50%;
  bottom: 8svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--pd-ink-2);
  font-family: var(--font-mono);
  font-size: var(--t-11);
  font-weight: 600;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  transform: translateX(-50%);
}

.pd-opening-cue i {
  width: 1px;
  height: 42px;
  display: block;
  background: linear-gradient(180deg, var(--pd-purple), transparent);
  transform-origin: top;
  animation: pd-opening-pulse 1800ms var(--ease-dive) infinite;
}

@keyframes pd-opening-pulse {
  0%, 100% { opacity: 0.35; transform: scaleY(0.55); }
  50% { opacity: 1; transform: scaleY(1); }
}

.pd-scroll-beats {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
}

.pd-scroll-beat {
  display: block;
  height: 100svh;
}

.pd-scroll-story .pd-guide {
  position: relative;
  z-index: 12;
  width: 100%;
  max-width: 330px;
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 480ms var(--ease-dive),
    transform 680ms var(--ease-dive),
    visibility 0s;
}

.pd-scroll-story[data-active="opening"] .pd-guide {
  opacity: 0;
  visibility: hidden;
  transform: translate3d(-54px, 28px, 0);
  transition:
    opacity 360ms var(--ease-dive),
    transform 680ms var(--ease-dive),
    visibility 0s linear 680ms;
}

.pd-chapter-copy {
  position: relative;
  height: 230px;
}

.pd-chapter-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(24px);
  transition:
    opacity 420ms var(--ease-dive),
    transform 520ms var(--ease-dive),
    visibility 0s linear 520ms;
}

.pd-chapter-panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 420ms var(--ease-dive),
    transform 520ms var(--ease-dive);
}

.pd-chapter-meta {
  display: block;
  color: var(--pd-purple);
  font-family: var(--font-mono);
  font-size: var(--t-11);
  line-height: var(--lh-11);
  font-weight: 600;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
}

.pd-chapter-panel h3 {
  max-width: 10ch;
  margin: 18px 0 0;
  font-family: var(--font-display);
  font-size: clamp(42px, 4vw, 58px);
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.pd-chapter-panel p {
  max-width: 31ch;
  margin: 14px 0 0;
  color: var(--pd-ink-2);
  font-size: 15px;
  line-height: 1.55;
  text-wrap: pretty;
}

/* The chapter control is a timeline under the current statement, not four
   competing cards. Its labels are deliberately short: the prose above tells
   the story and the rail only gives position and direct access. */
.pd-scroll-story .pd-tabs {
  position: relative;
  padding: 18px 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--pd-line);
}

.pd-scroll-story .pd-tabs::before {
  top: -1px;
  bottom: auto;
  left: 0;
  width: 25%;
  height: 2px;
  background: var(--pd-purple);
  transform: translateX(0);
  transition: transform 480ms var(--ease-dive);
}

.pd-scroll-story[data-active="meet"] .pd-tabs::before {
  transform: translateX(100%);
}

.pd-scroll-story[data-active="talk"] .pd-tabs::before {
  transform: translateX(200%);
}

.pd-scroll-story[data-active="remember"] .pd-tabs::before {
  transform: translateX(300%);
}

.pd-scroll-story .pd-tab,
.pd-scroll-story .pd-tab + .pd-tab {
  min-width: 0;
  min-height: 56px;
  padding: 10px 4px 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.pd-scroll-story .pd-tab::before,
.pd-scroll-story .pd-tab.is-active::before {
  display: none;
}

.pd-scroll-story .pd-tab strong {
  display: none;
}

.pd-scroll-story .pd-tab:not(.is-active) strong {
  color: var(--pd-ink-3);
}

.pd-scroll-story .pd-live-note {
  display: none;
}

.pd-scroll-story .pd-live-note .pd-note-desktop {
  display: inline;
}

.pd-scroll-story .pd-live-note .pd-note-mobile {
  display: none;
}

.pd-scroll-story .pd-restart {
  display: none;
  margin: 14px 0 0;
  font-size: 12px;
}

.pd-scroll-story[data-active="remember"] .pd-restart {
  display: block;
}

.pd-visual-stage {
  /* Keep this a plain number. The earlier viewport-derived expression divided
     a length by a unitless value, so some browsers resolved the custom
     property as a length. `scale()` then rejected the entire transform,
     including translate(-50%, -50%): the phone started at left/top 34–50%
     instead of being centred there, which is why the screenshot showed it
     falling out of the viewport and covering the Memory card. */
  --pd-phone-scale: 0.82;
  position: relative;
  width: 100%;
  height: min(800px, calc(100svh - 92px));
  min-height: 620px;
  isolation: isolate;
}

@media (min-width: 1101px) and (min-height: 980px) {
  .pd-visual-stage {
    --pd-phone-scale: 0.9;
  }
}

@media (min-width: 1101px) and (max-height: 760px) {
  .pd-visual-stage {
    --pd-phone-scale: 0.72;
  }
}

.pd-stage-wash {
  position: absolute;
  z-index: -1;
  inset: 5% 0;
  border-radius: 48%;
  background:
    radial-gradient(circle at 48% 45%, rgba(62, 17, 157, 0.11), transparent 37%),
    radial-gradient(circle at 78% 62%, rgba(130, 248, 237, 0.07), transparent 30%);
  opacity: 0.72;
  filter: blur(18px);
  transform: scale(0.9);
  transition:
    background 700ms var(--ease-dive),
    opacity 700ms var(--ease-dive),
    transform 700ms var(--ease-dive);
}

.pd-scroll-story[data-active="opening"] .pd-stage-wash {
  opacity: 0;
  transform: scale(0.72);
}

.pd-scroll-story[data-active="meet"] .pd-stage-wash,
.pd-scroll-story[data-active="talk"] .pd-stage-wash {
  background:
    radial-gradient(circle at 46% 44%, rgba(62, 17, 157, 0.2), transparent 40%),
    radial-gradient(circle at 76% 70%, rgba(148, 110, 254, 0.1), transparent 32%);
  opacity: 1;
  transform: scale(1);
}

.pd-scroll-story[data-active="remember"] .pd-stage-wash {
  background:
    radial-gradient(circle at 42% 42%, rgba(148, 110, 254, 0.13), transparent 40%),
    radial-gradient(circle at 80% 62%, rgba(130, 248, 237, 0.13), transparent 32%);
  opacity: 0.86;
  transform: scale(1.04);
}

.pd-scroll-story .pd-device-wrap {
  position: absolute;
  z-index: 8;
  left: 46%;
  top: 50%;
  width: 390px;
  height: 844px;
  transform: translate(-50%, -50%) scale(var(--pd-phone-scale));
  transform-origin: center;
  opacity: 1;
  visibility: visible;
  transition:
    left 700ms var(--ease-dive),
    opacity 520ms var(--ease-dive),
    transform 760ms var(--ease-dive),
    visibility 0s;
}

.pd-scroll-story[data-active="opening"] .pd-device-wrap {
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -38%) scale(0.66);
  transition:
    opacity 360ms var(--ease-dive),
    transform 760ms var(--ease-dive),
    visibility 0s linear 760ms;
}

.pd-scroll-story .pd-device {
  margin: 0;
  transform: none;
}

.pd-scroll-story[data-active="meet"] .pd-device-wrap {
  left: 45%;
}

.pd-scroll-story[data-active="talk"] .pd-device-wrap {
  left: 43%;
}

.pd-scroll-story[data-active="remember"] .pd-device-wrap {
  left: 34%;
}

.pd-scene-card {
  position: absolute;
  z-index: 4;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--pd-ink);
  box-shadow: 0 24px 60px rgba(28, 24, 40, 0.13);
  font-family: var(--pd-font-ios);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(64px, 12px, 0) scale(0.92);
  transition:
    opacity 520ms var(--ease-dive),
    transform 700ms var(--ease-dive),
    filter 700ms var(--ease-dive),
    visibility 0s linear 700ms;
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
}

.pd-scene-card > span,
.pd-scene-card figcaption span {
  display: block;
  color: var(--pd-ink-2);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pd-scene-card > strong {
  display: block;
  font-size: 16px;
  line-height: 1.25;
}

.pd-scene-card--bond {
  right: 1%;
  top: 12%;
  width: 200px;
  min-height: 112px;
  padding: 12px;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  align-items: center;
}

.pd-scene-card--bond img {
  width: 72px;
  height: 88px;
  object-fit: cover;
  object-position: 50% 14%;
  border-radius: 15px;
  background: #17131f;
}

.pd-scene-card--bond span,
.pd-scene-card--bond strong,
.pd-scene-card--bond small {
  display: block;
}

.pd-scene-card--bond span {
  color: var(--pd-ink-2);
  font-size: 10px;
  font-weight: 650;
}

.pd-scene-card--bond strong {
  margin-top: 5px;
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1;
}

.pd-scene-card--bond small {
  margin-top: 5px;
  color: var(--pd-purple);
  font-size: 10px;
  font-weight: 700;
}

.pd-scene-card--direction {
  right: 0;
  bottom: 13%;
  width: 238px;
  padding: 18px;
}

.pd-scene-card--direction span {
  display: block;
  color: var(--pd-ink-2);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pd-scene-card--direction strong {
  display: block;
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.25;
}

.pd-scene-card--direction p {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.08;
}

.pd-scene-card--skills {
  right: 0;
  top: 25%;
  width: 224px;
  padding: 18px;
}

.pd-scene-card--skills > div {
  min-height: 40px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  border-top: 1px solid var(--pd-line);
  color: var(--pd-ink-2);
  font-size: 12px;
  font-weight: 650;
}

.pd-scene-card--skills > span + div {
  margin-top: 12px;
}

.pd-scene-card--skills i {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--pd-purple-soft);
  color: var(--pd-purple);
  font-size: 12px;
  font-style: normal;
}

.pd-scene-card--whisper {
  right: 0;
  top: 18%;
  width: 310px;
  padding: 18px;
  border-color: rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(135deg, rgba(148, 110, 254, 0.17), transparent 56%),
    rgba(13, 12, 18, 0.91);
  color: var(--pd-light);
}

.pd-scene-card--whisper > span {
  color: rgba(235, 235, 245, 0.56);
}

.pd-scene-card--whisper p {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.08;
}

.pd-scene-card--memory {
  right: 0;
  bottom: 17%;
  width: 326px;
  padding: 20px;
}

.pd-scene-card--memory > strong {
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 500;
  line-height: 1.08;
}

.pd-scroll-story .pd-scene-card .pd-branch {
  display: none;
}

.pd-scroll-story[data-choice="continue"] .pd-scene-card .pd-branch--continue,
.pd-scroll-story[data-choice="gesture"] .pd-scene-card .pd-branch--gesture {
  display: block;
}

.pd-scroll-story[data-active="meet"] .pd-scene-card .pd-stage-direction-branch,
.pd-scroll-story[data-active="talk"] .pd-direction-prompt {
  display: none;
}

.pd-scroll-story[data-active="discover"] .pd-scene-card--bond {
  opacity: 1;
  visibility: visible;
}

.pd-scroll-story[data-active="discover"] .pd-scene-card--bond {
  transform: translate3d(0, 0, 0) rotate(3deg) scale(1);
}

.pd-scroll-story[data-active="meet"] .pd-scene-card--bond,
.pd-scroll-story[data-active="meet"] .pd-scene-card--direction {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0) scale(1);
}

.pd-scroll-story[data-active="meet"] .pd-scene-card--bond {
  transform: translate3d(0, 0, 0) rotate(2deg) scale(1);
}

.pd-scroll-story[data-active="talk"] .pd-scene-card--skills {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0) rotate(2deg) scale(1);
}

.pd-scroll-story[data-active="remember"] .pd-scene-card--whisper,
.pd-scroll-story[data-active="remember"] .pd-scene-card--memory {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0) scale(1);
}

.pd-scroll-story[data-active="remember"] .pd-scene-card--whisper {
  transform: translate3d(0, 0, 0) rotate(2deg) scale(1);
}

.pd-scroll-story[data-active="remember"] .pd-scene-card--memory {
  transform: translate3d(0, 0, 0) rotate(-1.5deg) scale(1);
}

@media (min-width: 761px) and (max-width: 1100px) {
  .pd-scroll-story .pd-demo {
    width: calc(100vw - 32px);
    grid-template-columns: minmax(230px, 270px) minmax(470px, 1fr);
    gap: 20px;
  }

  .pd-chapter-panel h3 {
    font-size: 42px;
  }

  .pd-visual-stage {
    --pd-phone-scale: 0.72;
  }

  .pd-scene-card--bond,
  .pd-scene-card--direction,
  .pd-scene-card--skills {
    right: -12px;
  }

  .pd-scene-card--whisper,
  .pd-scene-card--memory {
    right: -18px;
    width: 265px;
  }

}

@media (max-width: 760px) {
  .pd-shell {
    width: 100%;
    padding-top: 0;
  }

  .pd-scroll-story {
    min-height: 0;
    margin: 0;
  }

  .pd-scroll-story .pd-demo {
    position: relative;
    top: auto;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 0 0 48px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .pd-scroll-story .pd-intro,
  .pd-scroll-story[data-active="opening"] .pd-intro {
    position: relative;
    inset: auto;
    width: calc(100% - 40px);
    height: auto;
    margin: 0 auto;
    padding: 88px 0 48px;
    display: block;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }

  .pd-scroll-story .pd-intro h2 {
    margin-top: 22px;
    font-size: clamp(40px, 12vw, 58px);
  }

  .pd-scroll-story .pd-intro p {
    margin-top: 18px;
    font-size: 16px;
  }

  .pd-opening-cue {
    display: none;
  }

  .pd-scroll-story[data-active="opening"] .pd-guide {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .pd-scroll-story[data-active="opening"] .pd-device-wrap {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .pd-scroll-beats,
  .pd-stage-wash,
  .pd-scene-card {
    display: none;
  }

  .pd-scroll-story .pd-guide {
    width: calc(100% - 40px);
    max-width: 520px;
    margin: 0 auto;
  }

  .pd-chapter-copy {
    height: auto;
    min-height: 210px;
  }

  .pd-chapter-panel {
    position: static;
    display: none;
    min-height: 210px;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }

  .pd-chapter-panel.is-active {
    display: flex;
  }

  .pd-chapter-panel h3 {
    max-width: 12ch;
    font-size: clamp(38px, 11vw, 52px);
  }

  .pd-chapter-panel p {
    max-width: 36ch;
    font-size: 15px;
  }

  .pd-scroll-story .pd-tabs {
    display: none;
  }

  .pd-scroll-story .pd-live-note {
    display: flex;
    justify-content: flex-start;
    margin-top: 0;
    text-align: left;
  }

  .pd-scroll-story .pd-live-note .pd-note-desktop {
    display: none;
  }

  .pd-scroll-story .pd-live-note .pd-note-mobile {
    display: inline;
  }

  .pd-scroll-story .pd-restart {
    margin-top: 3px;
  }

  .pd-visual-stage {
    width: 100%;
    height: auto;
    min-height: 0;
  }

  .pd-scroll-story .pd-device-wrap {
    position: relative;
    left: auto;
    top: auto;
    width: min(100%, 430px);
    height: auto;
    margin: 0 auto;
    transform: none;
  }

  .pd-scroll-story .pd-device {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pd-scroll-story .pd-intro,
  .pd-scroll-story .pd-guide,
  .pd-chapter-panel,
  .pd-scroll-story .pd-tabs::before,
  .pd-stage-wash,
  .pd-scroll-story .pd-device-wrap,
  .pd-scene-card {
    transition: none;
  }

  .pd-opening-cue i {
    animation: none;
  }
}

/* ==========================================================================
   CONTINUOUS HORIZONTAL STORY

   Desktop scrolling now scrubs one five-viewport editorial rail. The rail is
   never snapped or animated on a timer: product-demo.js writes the exact
   section-relative scroll position, and this transform renders that position.
   The phone remains a single interactive instance while its surrounding copy
   and evidence cards travel as part of the rail.
   ========================================================================== */

@media (min-width: 761px) {
  .pd-scroll-story.is-horizontal-ready {
    --pd-track-shift: 0vw;
    --pd-phone-entry: 0;
    --pd-phone-left: 84%;
    --pd-nav-opacity: 0;
    --pd-nav-shift: 0%;
    min-height: 500svh;
  }

  .pd-scroll-story.is-horizontal-ready .pd-demo {
    position: sticky;
    top: 0;
    width: 100vw;
    height: 100svh;
    min-height: 0;
    margin: 0;
    padding: 0;
    display: block;
    overflow: hidden;
    isolation: isolate;
  }

  .pd-horizontal-track {
    position: absolute;
    z-index: 3;
    inset: 0 auto 0 0;
    width: 500vw;
    height: 100%;
    display: flex;
    transform: translate3d(var(--pd-track-shift), 0, 0);
    will-change: transform;
  }

  .pd-rail-panel {
    position: relative;
    flex: 0 0 100vw;
    width: 100vw;
    height: 100%;
    overflow: hidden;
  }

  .pd-rail-panel--opening {
    display: grid;
    place-items: center;
  }

  /*
   * Override the old fade-state opening. It lives inside the moving rail now,
   * so it remains fully rendered while it physically leaves through the left
   * edge and Discover enters through the right.
   */
  .pd-scroll-story.is-horizontal-ready .pd-rail-panel .pd-intro,
  .pd-scroll-story.is-horizontal-ready[data-active="opening"] .pd-rail-panel .pd-intro {
    position: relative;
    inset: auto;
    width: min(1040px, calc(100% - 64px));
    height: auto;
    margin: 0;
    padding: 0 32px 5svh;
    display: flex;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    transition: none;
  }

  .pd-scroll-story.is-horizontal-ready .pd-intro h2 {
    max-width: 960px;
    margin-top: 24px;
    font-size: clamp(62px, 7vw, 102px);
  }

  .pd-scroll-story.is-horizontal-ready .pd-intro p {
    max-width: 30ch;
    margin-top: 20px;
    font-size: 17px;
  }

  .pd-scroll-story.is-horizontal-ready .pd-opening-cue {
    bottom: -18svh;
  }

  /*
   * Every chapter owns a real viewport on the rail. Copy is kept deliberately
   * small so the eye follows the product rather than reading a second pitch.
   */
  .pd-scroll-story.is-horizontal-ready .pd-rail-panel--chapter .pd-chapter-panel,
  .pd-scroll-story.is-horizontal-ready .pd-rail-panel--chapter .pd-chapter-panel.is-active {
    position: absolute;
    z-index: 7;
    left: clamp(52px, 7vw, 138px);
    top: 50%;
    inset-inline-end: auto;
    width: min(330px, 25vw);
    height: auto;
    display: flex;
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%);
    transition: none;
  }

  .pd-scroll-story.is-horizontal-ready .pd-chapter-panel h3 {
    max-width: 8.5ch;
    margin-top: 18px;
    font-size: clamp(48px, 4.6vw, 70px);
    line-height: 0.94;
  }

  .pd-scroll-story.is-horizontal-ready .pd-chapter-panel p {
    max-width: 24ch;
    margin-top: 16px;
    font-size: 16px;
  }

  /*
   * The compact chapter ruler is the only element that does not travel a full
   * viewport. It acts like a film-playhead while the editorial panels pass
   * behind it. Its 2px marker still scrubs continuously, rather than jumping.
   */
  .pd-scroll-story.is-horizontal-ready .pd-guide {
    position: absolute;
    z-index: 24;
    left: clamp(52px, 7vw, 138px);
    bottom: clamp(42px, 7svh, 78px);
    width: min(330px, 25vw);
    max-width: none;
    opacity: var(--pd-nav-opacity);
    visibility: visible;
    transform: none;
    pointer-events: none;
    transition: none;
  }

  .pd-scroll-story.is-horizontal-ready .pd-guide .pd-tabs {
    pointer-events: auto;
  }

  .pd-scroll-story.is-horizontal-ready .pd-tabs::before,
  .pd-scroll-story.is-horizontal-ready[data-active="meet"] .pd-tabs::before,
  .pd-scroll-story.is-horizontal-ready[data-active="talk"] .pd-tabs::before,
  .pd-scroll-story.is-horizontal-ready[data-active="remember"] .pd-tabs::before {
    transform: translateX(var(--pd-nav-shift));
    transition: none;
  }

  .pd-scroll-story.is-horizontal-ready .pd-restart {
    pointer-events: auto;
  }

  /*
   * The phone is the persistent product lens. It enters with Discover, then
   * drifts eight percentage points left across the relationship instead of
   * resetting to a new composition at each chapter.
   */
  .pd-scroll-story.is-horizontal-ready .pd-visual-stage {
    --pd-phone-scale: 0.82;
    position: absolute;
    z-index: 12;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    pointer-events: none;
  }

  .pd-scroll-story.is-horizontal-ready .pd-stage-wash {
    inset: 7% 19% 4% 31%;
    opacity: var(--pd-phone-entry);
    transform: scale(1);
    transition: none;
  }

  .pd-scroll-story.is-horizontal-ready .pd-device-wrap,
  .pd-scroll-story.is-horizontal-ready[data-active="opening"] .pd-device-wrap,
  .pd-scroll-story.is-horizontal-ready[data-active="meet"] .pd-device-wrap,
  .pd-scroll-story.is-horizontal-ready[data-active="talk"] .pd-device-wrap,
  .pd-scroll-story.is-horizontal-ready[data-active="remember"] .pd-device-wrap {
    left: var(--pd-phone-left);
    top: 50%;
    opacity: var(--pd-phone-entry);
    visibility: visible;
    transform: translate(-50%, -50%) scale(var(--pd-phone-scale));
    pointer-events: auto;
    transition: none;
    will-change: left, opacity;
  }

  .pd-scroll-story.is-horizontal-ready.is-scrubbing .pd-screen {
    transition: none;
    will-change: opacity, transform;
  }

  /*
   * Evidence cards now belong to their chapter panel. Because they sit on the
   * moving track, the outgoing and incoming cards share the viewport during a
   * transition instead of fading between isolated finished states.
   */
  .pd-scroll-story.is-horizontal-ready .pd-rail-panel .pd-scene-card {
    z-index: 6;
    opacity: 1;
    visibility: visible;
    transition: none;
  }

  .pd-scroll-story.is-horizontal-ready .pd-rail-panel .pd-scene-card--bond {
    right: clamp(42px, 7vw, 130px);
    top: 18%;
    transform: rotate(3deg) scale(1);
  }

  .pd-scroll-story.is-horizontal-ready .pd-rail-panel .pd-scene-card--direction {
    right: clamp(42px, 7vw, 126px);
    bottom: 14%;
    transform: rotate(-2deg) scale(1);
  }

  .pd-scroll-story.is-horizontal-ready .pd-rail-panel .pd-scene-card--skills {
    right: clamp(42px, 7vw, 126px);
    top: 23%;
    transform: rotate(2deg) scale(1);
  }

  .pd-scroll-story.is-horizontal-ready .pd-rail-panel .pd-scene-card--whisper {
    right: clamp(44px, 6.5vw, 122px);
    top: 15%;
    transform: rotate(2deg) scale(1);
  }

  .pd-scroll-story.is-horizontal-ready .pd-rail-panel .pd-scene-card--memory {
    right: clamp(48px, 7vw, 138px);
    bottom: 13%;
    transform: rotate(-1.5deg) scale(1);
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel[data-pd-panel="meet"]
    .pd-direction-prompt {
    display: block;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel[data-pd-panel="meet"]
    .pd-stage-direction-branch {
    display: none;
  }

  .pd-scroll-story.is-horizontal-ready .pd-mobile-nav {
    display: none;
  }
}

/* Final cascade lock: the editorial system above intentionally supersedes the
   older four-phone and detent experiments that remain in the file for mobile
   compatibility. Keep these values last so later maintenance cannot silently
   restore the stronger shelf or the duplicated desktop composition. */
@media (min-width: 761px) {
  .pd-scroll-story.is-horizontal-ready {
    --pd-panel-phone-scale: 0.82;
    min-height: 620svh;
  }

  .pd-scroll-story.is-horizontal-ready .pd-rail-panel--chapter::before {
    display: none;
  }

  .pd-scroll-story.is-horizontal-ready .pd-horizontal-track {
    will-change: auto;
  }

  .pd-scroll-story.is-horizontal-ready.is-in-view.is-scrubbing
    .pd-horizontal-track {
    will-change: transform;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel[data-pd-panel="discover"] {
    --pd-panel-phone-left: 62%;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel[data-pd-panel="meet"] {
    --pd-panel-phone-left: 58%;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel[data-pd-panel="talk"] {
    --pd-panel-phone-left: 55%;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel[data-pd-panel="remember"] {
    --pd-panel-phone-left: 51%;
  }

  .pd-scroll-story.is-horizontal-ready .pd-tabs::before,
  .pd-scroll-story.is-horizontal-ready[data-motion="hold"]
    .pd-tabs::before,
  .pd-scroll-story.is-horizontal-ready[data-motion="transition"]
    .pd-tabs::before {
    height: 2px;
    box-shadow: none;
    transition: none;
  }
}

@media (min-width: 1101px) and (max-width: 1279px) {
  .pd-scroll-story.is-horizontal-ready {
    --pd-panel-phone-scale: 0.72;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel[data-pd-panel="discover"] {
    --pd-panel-phone-left: 63%;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel[data-pd-panel="meet"] {
    --pd-panel-phone-left: 60%;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel[data-pd-panel="talk"] {
    --pd-panel-phone-left: 58%;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel[data-pd-panel="remember"] {
    --pd-panel-phone-left: 54%;
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .pd-scroll-story.is-horizontal-ready {
    --pd-panel-phone-scale: 0.64;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel[data-pd-panel="discover"],
  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel[data-pd-panel="meet"],
  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel[data-pd-panel="talk"],
  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel[data-pd-panel="remember"] {
    --pd-panel-phone-left: 60%;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel
    .pd-evidence-group
    .pd-scene-card {
    opacity: 1;
    visibility: visible;
  }
}

@media (min-width: 761px) and (max-width: 880px) {
  .pd-scroll-story.is-horizontal-ready {
    --pd-panel-phone-scale: 0.58;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel[data-pd-panel="discover"],
  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel[data-pd-panel="meet"],
  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel[data-pd-panel="talk"],
  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel[data-pd-panel="remember"] {
    --pd-panel-phone-left: 58%;
  }
}

@media (min-width: 761px) and (max-height: 760px) {
  .pd-scroll-story.is-horizontal-ready {
    --pd-panel-phone-scale: 0.68;
  }
}

@media (min-width: 761px) and (max-width: 880px) and (max-height: 760px) {
  .pd-scroll-story.is-horizontal-ready {
    --pd-panel-phone-scale: 0.56;
  }
}

@media (min-width: 761px) {
  .pd-scroll-story.is-horizontal-ready .pd-rail-panel {
    contain: layout paint;
  }
}

/* 1280 is a composed middle density, so the full editorial system does not
   appear in the same frame that the phone grows. */
@media (min-width: 1280px) and (max-width: 1439px) and (min-height: 761px) {
  .pd-scroll-story.is-horizontal-ready {
    --pd-panel-phone-scale: 0.77;
  }

  .pd-editorial-visual--discover {
    left: 32%;
    width: 260px;
    height: 58svh;
  }

  .pd-editorial-visual--meet {
    left: 65%;
    width: 310px;
    height: 80svh;
  }

  .pd-evidence-group--talk .pd-scene-card--skills,
  .pd-evidence-group--remember .pd-scene-card--memory,
  .pd-evidence-group--remember .pd-memory-line {
    display: none;
  }

  .pd-evidence-group--remember {
    display: block;
  }
}

/* Wide monitors keep a 1500px editorial stage in the middle of the viewport.
   The rail still moves by full viewports; only the internal composition stops
   stretching, preventing 2K screens from turning designed air into distance. */
@media (min-width: 1800px) {
  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel--chapter
    .pd-chapter-panel,
  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel--chapter
    .pd-chapter-panel.is-active,
  .pd-scroll-story.is-horizontal-ready .pd-guide {
    left: calc(50% - 650px);
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel[data-pd-panel="discover"] {
    --pd-panel-phone-left: calc(50% + 210px);
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel[data-pd-panel="meet"] {
    --pd-panel-phone-left: calc(50% + 140px);
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel[data-pd-panel="talk"] {
    --pd-panel-phone-left: calc(50% + 70px);
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel[data-pd-panel="remember"] {
    --pd-panel-phone-left: 50%;
  }

  .pd-editorial-visual--discover {
    left: calc(50% - 350px);
  }

  .pd-editorial-visual--meet {
    left: calc(50% + 220px);
  }

  .pd-evidence-group--discover,
  .pd-evidence-group--meet,
  .pd-evidence-group--talk {
    right: calc(50% - 724px);
  }

  .pd-evidence-group--talk {
    width: 425px;
  }

  .pd-evidence-group--remember {
    right: calc(50% - 600px);
  }
}

/* ==========================================================================
   EDITORIAL PANEL SYSTEM

   Each chapter now has one distinct visual argument. These are not decoration:
   Discover establishes the world, Meet establishes the person, Shape proves
   choice and response, and Return proves continuity over time. Everything is
   panel-owned, so it leaves and enters with the horizontal filmstrip.
   ========================================================================== */

@media (min-width: 761px) {
  .pd-scroll-story.is-horizontal-ready {
    --pd-panel-phone-scale: 0.82;
    min-height: 620svh;
  }

  .pd-scroll-story.is-horizontal-ready .pd-horizontal-track {
    will-change: auto;
  }

  .pd-scroll-story.is-horizontal-ready.is-in-view.is-scrubbing
    .pd-horizontal-track {
    will-change: transform;
  }

  .pd-scroll-story.is-horizontal-ready .pd-rail-panel--chapter::before {
    display: none;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel--chapter
    .pd-chapter-panel,
  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel--chapter
    .pd-chapter-panel.is-active {
    z-index: 10;
    left: clamp(52px, 6.8vw, 138px);
    width: min(330px, 24vw);
    max-width: 330px;
  }

  .pd-scroll-story.is-horizontal-ready .pd-chapter-panel h3 {
    max-width: 7.4ch;
    font-size: clamp(56px, 4.6vw, 72px);
    line-height: 0.92;
    letter-spacing: -0.045em;
  }

  .pd-scroll-story.is-horizontal-ready .pd-chapter-panel p {
    max-width: 24ch;
    font-size: 16px;
    line-height: 1.45;
  }

  .pd-scroll-story.is-horizontal-ready .pd-guide {
    left: clamp(52px, 6.8vw, 138px);
    width: min(330px, 24vw);
  }

  .pd-scroll-story.is-horizontal-ready .pd-tabs::before,
  .pd-scroll-story.is-horizontal-ready[data-motion="hold"]
    .pd-tabs::before,
  .pd-scroll-story.is-horizontal-ready[data-motion="transition"]
    .pd-tabs::before {
    height: 2px;
    box-shadow: none;
    transition: none;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel
    .pd-panel-device-wrap {
    z-index: 8;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel[data-pd-panel="discover"] {
    --pd-panel-phone-left: 62%;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel[data-pd-panel="meet"] {
    --pd-panel-phone-left: 58%;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel[data-pd-panel="talk"] {
    --pd-panel-phone-left: 55%;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel[data-pd-panel="remember"] {
    --pd-panel-phone-left: 51%;
  }

  .pd-editorial-visual {
    position: absolute;
    z-index: 2;
    pointer-events: none;
  }

  .pd-editorial-visual--discover {
    left: 34%;
    top: 50%;
    width: clamp(300px, 23vw, 390px);
    height: clamp(500px, 66svh, 700px);
    transform: translateY(-50%) rotate(-2.5deg);
  }

  .pd-stage-print {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 12px 12px 0;
    overflow: hidden;
    display: grid;
    grid-template-rows: minmax(0, 1fr) 88px;
    border: 1px solid rgba(16, 17, 20, 0.08);
    border-radius: 18px;
    background: #f8f7f4;
    box-shadow:
      0 40px 80px rgba(28, 24, 40, 0.12),
      0 8px 24px rgba(28, 24, 40, 0.08);
  }

  .pd-stage-print img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
    filter: saturate(0.72) contrast(0.96);
    opacity: 0.78;
  }

  .pd-stage-print figcaption {
    position: relative;
    padding: 14px 4px 12px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-content: center;
    column-gap: 14px;
  }

  .pd-stage-print figcaption span,
  .pd-stage-print figcaption small {
    color: var(--pd-ink-2);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }

  .pd-stage-print figcaption strong {
    grid-column: 1;
    margin-top: 4px;
    font-family: var(--font-display);
    font-size: 23px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.035em;
  }

  .pd-stage-print figcaption small {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    writing-mode: vertical-rl;
  }

  .pd-editorial-visual--meet {
    left: 64%;
    bottom: -5%;
    width: clamp(350px, 29vw, 530px);
    height: min(88svh, 900px);
    display: flex;
    justify-content: center;
    align-items: flex-end;
    opacity: 0.68;
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0,
      rgba(0, 0, 0, 0.86) 18%,
      #000 34%
    );
    mask-image: linear-gradient(
      90deg,
      transparent 0,
      rgba(0, 0, 0, 0.86) 18%,
      #000 34%
    );
  }

  .pd-editorial-visual--meet img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
  }

  .pd-evidence-group {
    position: absolute;
    z-index: 6;
    pointer-events: none;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel
    .pd-evidence-group
    .pd-scene-card {
    position: relative;
    inset: auto;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel
    .pd-evidence-group
    .pd-scene-card:not(.pd-scene-card--whisper) {
    border-color: rgba(16, 17, 20, 0.07);
    background: #fff;
    box-shadow:
      0 26px 56px rgba(28, 24, 40, 0.11),
      0 5px 16px rgba(28, 24, 40, 0.06);
  }

  .pd-evidence-group--discover {
    right: clamp(34px, 4vw, 82px);
    top: 15%;
    width: 220px;
    display: grid;
    gap: 18px;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-evidence-group--discover
    .pd-scene-card--bond {
    width: 220px;
    min-height: 122px;
    transform: none;
  }

  .pd-scene-card--episode {
    width: 208px;
    min-height: 108px;
    margin-left: -18px;
    padding: 18px;
    transform: rotate(-1.5deg) !important;
  }

  .pd-scene-card--episode strong,
  .pd-scene-card--episode small {
    display: block;
  }

  .pd-scene-card--episode strong {
    margin-top: 12px;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 500;
    line-height: 1;
  }

  .pd-scene-card--episode small {
    margin-top: 10px;
    color: var(--pd-ink-2);
    font-size: 10px;
    line-height: 1.35;
  }

  .pd-evidence-group--meet {
    right: clamp(34px, 4vw, 82px);
    bottom: 13%;
    width: 258px;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-evidence-group--meet
    .pd-scene-card--direction {
    width: 258px;
    padding: 20px;
    transform: none;
  }

  .pd-evidence-group--talk {
    right: clamp(30px, 3.8vw, 78px);
    top: 50%;
    width: 258px;
    transform: translateY(-50%);
  }

  .pd-causality {
    display: grid;
    grid-template-rows: auto 34px auto;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-causality
    .pd-scene-card {
    width: 242px;
    min-height: 118px;
    padding: 18px;
  }

  .pd-causality .pd-scene-card--choice-proof {
    transform: none !important;
  }

  .pd-causality .pd-scene-card--response-proof {
    justify-self: end;
    transform: none !important;
  }

  .pd-causality .pd-scene-card strong,
  .pd-causality .pd-scene-card p {
    margin: 12px 0 0;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.08;
  }

  .pd-causality-line {
    position: relative;
    width: 1px;
    height: 34px;
    margin-left: 50%;
    display: block;
    background: rgba(62, 17, 157, 0.34);
  }

  .pd-causality-line::after {
    content: "";
    position: absolute;
    left: -3px;
    bottom: 0;
    width: 7px;
    height: 7px;
    border-right: 1px solid var(--pd-purple);
    border-bottom: 1px solid var(--pd-purple);
    transform: rotate(45deg);
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-evidence-group--talk
    .pd-scene-card--skills {
    width: 190px;
    margin: 18px 4px 0 auto;
    padding: 14px;
    transform: none;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-evidence-group--talk
    .pd-scene-card--skills
    > div {
    min-height: 34px;
  }

  .pd-evidence-group--remember {
    right: clamp(34px, 4vw, 82px);
    top: 50%;
    width: clamp(320px, 22vw, 370px);
    display: grid;
    grid-template-columns: 24px 1fr;
    grid-template-rows: auto 36px auto;
    transform: translateY(-50%);
  }

  .pd-memory-line {
    position: relative;
    grid-column: 1;
    grid-row: 1 / 4;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .pd-memory-line::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: rgba(62, 17, 157, 0.22);
  }

  .pd-memory-line i {
    position: relative;
    width: 11px;
    height: 11px;
    display: block;
    border: 2px solid var(--pd-page);
    border-radius: 50%;
    background: var(--pd-purple);
    box-shadow: 0 0 0 1px rgba(62, 17, 157, 0.28);
  }

  .pd-memory-line b {
    position: absolute;
    left: 18px;
    top: -2px;
    width: 104px;
    color: var(--pd-ink-3);
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-evidence-group--remember
    .pd-scene-card {
    grid-column: 2;
    width: 100%;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-evidence-group--remember
    .pd-scene-card--whisper {
    grid-row: 1;
    min-height: 154px;
    padding: 22px;
    border-color: rgba(255, 255, 255, 0.1);
    background: #1d1b23;
    transform: rotate(0.6deg);
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-evidence-group--remember
    .pd-scene-card--memory {
    grid-row: 3;
    min-height: 152px;
    padding: 22px;
    transform: none;
  }

  .pd-evidence-group--remember .pd-scene-card--whisper p {
    font-size: 25px;
  }

  .pd-evidence-group--remember .pd-scene-card--memory > strong {
    font-size: 26px;
  }
}

@media (min-width: 1440px) and (min-height: 761px) {
  .pd-evidence-group--talk {
    right: clamp(30px, 3.5vw, 72px);
    width: clamp(400px, calc(35vw - 100px), 540px);
  }

  .pd-causality {
    grid-template-columns: 1fr 42px 1fr;
    grid-template-rows: auto;
    align-items: center;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-causality
    .pd-scene-card {
    width: 100%;
    min-height: 148px;
  }

  .pd-causality-line {
    width: 42px;
    height: 1px;
    margin: 0;
  }

  .pd-causality-line::after {
    left: auto;
    right: 0;
    bottom: -3px;
    transform: rotate(-45deg);
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-evidence-group--talk
    .pd-scene-card--skills {
    margin-top: 22px;
  }
}

/* A real intermediate composition, not a scaled desktop collision. */
@media (min-width: 1101px) and (max-width: 1279px) {
  .pd-scroll-story.is-horizontal-ready {
    --pd-panel-phone-scale: 0.72;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel--chapter
    .pd-chapter-panel,
  .pd-scroll-story.is-horizontal-ready .pd-guide {
    left: 40px;
    width: 250px;
  }

  .pd-scroll-story.is-horizontal-ready .pd-chapter-panel h3 {
    font-size: clamp(46px, 4.6vw, 56px);
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel[data-pd-panel="discover"] {
    --pd-panel-phone-left: 63%;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel[data-pd-panel="meet"] {
    --pd-panel-phone-left: 60%;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel[data-pd-panel="talk"] {
    --pd-panel-phone-left: 58%;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel[data-pd-panel="remember"] {
    --pd-panel-phone-left: 54%;
  }

  .pd-editorial-visual {
    display: none;
  }

  .pd-evidence-group {
    right: 28px;
  }

  .pd-evidence-group--discover {
    width: 200px;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-evidence-group--discover
    .pd-scene-card--bond {
    width: 200px;
  }

  .pd-evidence-group--discover .pd-scene-card--episode,
  .pd-evidence-group--talk .pd-scene-card--skills,
  .pd-evidence-group--remember .pd-scene-card--memory,
  .pd-evidence-group--remember .pd-memory-line {
    display: none;
  }

  .pd-evidence-group--meet {
    width: 220px;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-evidence-group--meet
    .pd-scene-card--direction {
    width: 220px;
  }

  .pd-evidence-group--talk {
    width: 220px;
  }

  .pd-causality {
    display: block;
  }

  .pd-causality-line,
  .pd-causality .pd-scene-card--choice-proof {
    display: none;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-causality
    .pd-scene-card--response-proof {
    width: 220px;
  }

  .pd-evidence-group--remember {
    width: 270px;
    display: block;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-evidence-group--remember
    .pd-scene-card--whisper {
    width: 270px;
    min-height: 142px;
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .pd-scroll-story.is-horizontal-ready {
    --pd-panel-phone-scale: 0.64;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel--chapter
    .pd-chapter-panel,
  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel--chapter
    .pd-chapter-panel.is-active,
  .pd-scroll-story.is-horizontal-ready .pd-guide {
    left: 26px;
    width: 220px;
  }

  .pd-scroll-story.is-horizontal-ready .pd-chapter-panel h3 {
    font-size: clamp(38px, 5vw, 50px);
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel[data-pd-panel="discover"],
  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel[data-pd-panel="meet"],
  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel[data-pd-panel="talk"],
  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel[data-pd-panel="remember"] {
    --pd-panel-phone-left: 60%;
  }

  .pd-editorial-visual {
    display: none;
  }

  .pd-evidence-group {
    right: 16px;
    width: 174px;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel
    .pd-evidence-group
    .pd-scene-card {
    opacity: 1;
    visibility: visible;
  }

  .pd-evidence-group--discover {
    top: 16%;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-evidence-group--discover
    .pd-scene-card--bond {
    width: 174px;
    min-height: 100px;
    grid-template-columns: 58px 1fr;
    gap: 9px;
    padding: 9px;
  }

  .pd-evidence-group--discover .pd-scene-card--bond img {
    width: 58px;
    height: 76px;
  }

  .pd-evidence-group--discover .pd-scene-card--episode,
  .pd-evidence-group--talk .pd-scene-card--skills,
  .pd-evidence-group--remember .pd-scene-card--memory,
  .pd-evidence-group--remember .pd-memory-line {
    display: none;
  }

  .pd-evidence-group--meet {
    bottom: 14%;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-evidence-group--meet
    .pd-scene-card--direction {
    width: 174px;
    padding: 14px;
  }

  .pd-evidence-group--talk {
    top: 50%;
    width: 174px;
  }

  .pd-causality {
    display: block;
  }

  .pd-causality-line,
  .pd-causality .pd-scene-card--choice-proof {
    display: none;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-causality
    .pd-scene-card--response-proof {
    width: 174px;
    min-height: 108px;
    padding: 14px;
  }

  .pd-evidence-group--remember {
    width: 190px;
    display: block;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-evidence-group--remember
    .pd-scene-card--whisper {
    width: 190px;
    min-height: 120px;
    padding: 15px;
  }

  .pd-evidence-group--remember .pd-scene-card--whisper p {
    font-size: 19px;
  }
}

@media (min-width: 761px) and (max-width: 880px) {
  .pd-scroll-story.is-horizontal-ready {
    --pd-panel-phone-scale: 0.58;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel--chapter
    .pd-chapter-panel,
  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel--chapter
    .pd-chapter-panel.is-active,
  .pd-scroll-story.is-horizontal-ready .pd-guide {
    left: 20px;
    width: 205px;
  }

  .pd-scroll-story.is-horizontal-ready .pd-chapter-panel p {
    max-width: 20ch;
    font-size: 14px;
  }

  .pd-evidence-group {
    right: 12px;
    width: 160px;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-evidence-group--discover
    .pd-scene-card--bond,
  .pd-scroll-story.is-horizontal-ready
    .pd-evidence-group--meet
    .pd-scene-card--direction,
  .pd-scroll-story.is-horizontal-ready
    .pd-causality
    .pd-scene-card--response-proof,
  .pd-scroll-story.is-horizontal-ready
    .pd-evidence-group--remember
    .pd-scene-card--whisper {
    width: 160px;
  }
}

@media (min-width: 761px) and (max-height: 760px) {
  .pd-scroll-story.is-horizontal-ready {
    --pd-panel-phone-scale: 0.68;
  }

  .pd-editorial-visual,
  .pd-evidence-group--discover .pd-scene-card--episode,
  .pd-evidence-group--talk .pd-scene-card--skills,
  .pd-evidence-group--remember .pd-scene-card--memory,
  .pd-evidence-group--remember .pd-memory-line {
    display: none;
  }

  .pd-evidence-group--remember {
    display: block;
  }
}

@media (max-width: 760px) {
  .pd-editorial-visual,
  .pd-evidence-group {
    display: none;
  }
}

/* Reduced motion becomes a readable vertical sequence. No rounded phase jump,
   no horizontal transform, and all four chapter phones remain keyboard-visible. */
@media (min-width: 761px) and (prefers-reduced-motion: reduce) {
  .pd-scroll-story.is-horizontal-ready.is-reduced-story {
    min-height: 0;
  }

  .pd-scroll-story.is-horizontal-ready.is-reduced-story .pd-demo {
    position: relative;
    width: 100%;
    height: auto;
    overflow: visible;
  }

  .pd-scroll-story.is-horizontal-ready.is-reduced-story
    .pd-horizontal-track {
    position: relative;
    width: 100%;
    height: auto;
    display: block;
    transform: none !important;
    will-change: auto;
  }

  .pd-scroll-story.is-horizontal-ready.is-reduced-story .pd-rail-panel {
    width: 100%;
    height: 100svh;
    min-height: 700px;
  }

  .pd-scroll-story.is-horizontal-ready.is-reduced-story
    .pd-rail-panel--opening {
    min-height: 82svh;
  }

  .pd-scroll-story.is-horizontal-ready.is-reduced-story .pd-guide {
    display: none;
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .pd-scroll-story.is-horizontal-ready .pd-rail-panel--chapter .pd-chapter-panel,
  .pd-scroll-story.is-horizontal-ready .pd-rail-panel--chapter .pd-chapter-panel.is-active,
  .pd-scroll-story.is-horizontal-ready .pd-guide {
    left: 40px;
    width: 250px;
  }

  .pd-scroll-story.is-horizontal-ready .pd-chapter-panel h3 {
    font-size: clamp(42px, 5vw, 54px);
  }

  .pd-scroll-story.is-horizontal-ready .pd-visual-stage {
    --pd-phone-scale: 0.7;
  }

  .pd-scroll-story.is-horizontal-ready .pd-rail-panel .pd-scene-card--bond,
  .pd-scroll-story.is-horizontal-ready .pd-rail-panel .pd-scene-card--direction,
  .pd-scroll-story.is-horizontal-ready .pd-rail-panel .pd-scene-card--skills,
  .pd-scroll-story.is-horizontal-ready .pd-rail-panel .pd-scene-card--whisper,
  .pd-scroll-story.is-horizontal-ready .pd-rail-panel .pd-scene-card--memory {
    right: 28px;
  }

  .pd-scroll-story.is-horizontal-ready .pd-scene-card--direction,
  .pd-scroll-story.is-horizontal-ready .pd-scene-card--skills {
    width: 196px;
  }

  .pd-scroll-story.is-horizontal-ready .pd-scene-card--whisper,
  .pd-scroll-story.is-horizontal-ready .pd-scene-card--memory {
    width: 245px;
  }
}

/*
 * Mobile keeps the product as a direct tap-through preview. A five-screen
 * horizontal scrub is too coarse under a thumb and would make the app itself
 * untappable, so the dynamically built rail collapses back to the original
 * opening + one current chapter structure.
 */
@media (max-width: 760px) {
  .pd-horizontal-track {
    display: contents;
  }

  .pd-rail-panel {
    display: contents;
  }

  .pd-scroll-story.is-horizontal-ready .pd-rail-panel--chapter {
    display: none;
  }

  .pd-scroll-story.is-horizontal-ready[data-active="discover"]
    .pd-rail-panel[data-pd-panel="discover"],
  .pd-scroll-story.is-horizontal-ready[data-active="meet"]
    .pd-rail-panel[data-pd-panel="meet"],
  .pd-scroll-story.is-horizontal-ready[data-active="talk"]
    .pd-rail-panel[data-pd-panel="talk"],
  .pd-scroll-story.is-horizontal-ready[data-active="remember"]
    .pd-rail-panel[data-pd-panel="remember"] {
    display: contents;
  }
}

@media (min-width: 761px) and (max-height: 760px) {
  .pd-scroll-story.is-horizontal-ready .pd-visual-stage {
    --pd-phone-scale: 0.69;
  }

  .pd-scroll-story.is-horizontal-ready .pd-chapter-panel h3 {
    font-size: clamp(42px, 4vw, 58px);
  }

  .pd-scroll-story.is-horizontal-ready .pd-guide {
    bottom: 30px;
  }
}

@media (min-width: 1101px) and (min-height: 980px) {
  .pd-scroll-story.is-horizontal-ready .pd-visual-stage {
    --pd-phone-scale: 0.9;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pd-horizontal-track {
    will-change: auto;
  }
}

/* ==========================================================================
   FOUR-PHONE FILMSTRIP

   Each product chapter now owns a complete, fixed composition. The phone is no
   longer a viewport-level overlay: it travels with its copy and evidence cards,
   so an outgoing phone physically leaves left while the next phone arrives
   from the right. This also gives copy and device separate layout territories.
   ========================================================================== */

@media (min-width: 761px) {
  .pd-scroll-story.is-horizontal-ready {
    --pd-panel-phone-scale: 0.82;
  }

  .pd-scroll-story.is-horizontal-ready .pd-rail-panel {
    isolation: isolate;
  }

  .pd-scroll-story.is-horizontal-ready .pd-rail-panel--chapter::before {
    content: "";
    position: absolute;
    z-index: 1;
    left: 34%;
    top: 8%;
    width: 58%;
    height: 84%;
    border-radius: 48%;
    background:
      radial-gradient(circle at 48% 44%, rgba(62, 17, 157, 0.12), transparent 38%),
      radial-gradient(circle at 80% 68%, rgba(130, 248, 237, 0.08), transparent 30%);
    filter: blur(20px);
    pointer-events: none;
  }

  /*
   * The original multi-screen phone remains the mobile interaction surface.
   * Desktop uses four chapter-owned phones built from that same component.
   */
  .pd-scroll-story.is-horizontal-ready .pd-visual-stage {
    display: none;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel
    .pd-panel-device-wrap,
  .pd-scroll-story.is-horizontal-ready[data-active="opening"]
    .pd-rail-panel
    .pd-panel-device-wrap,
  .pd-scroll-story.is-horizontal-ready[data-active="meet"]
    .pd-rail-panel
    .pd-panel-device-wrap,
  .pd-scroll-story.is-horizontal-ready[data-active="talk"]
    .pd-rail-panel
    .pd-panel-device-wrap,
  .pd-scroll-story.is-horizontal-ready[data-active="remember"]
    .pd-rail-panel
    .pd-panel-device-wrap {
    position: absolute;
    z-index: 8;
    left: var(--pd-panel-phone-left, 60%);
    top: 50%;
    width: 390px;
    height: 844px;
    margin: 0;
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(var(--pd-panel-phone-scale));
    transform-origin: center;
    pointer-events: auto;
    transition: none;
    will-change: auto;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel[data-pd-panel="discover"] {
    --pd-panel-phone-left: 62%;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel[data-pd-panel="meet"] {
    --pd-panel-phone-left: 60%;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel[data-pd-panel="talk"] {
    --pd-panel-phone-left: 58%;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel[data-pd-panel="remember"] {
    --pd-panel-phone-left: 54%;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-panel-device-wrap
    .pd-device {
    margin: 0;
    transform: none;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-panel-device-wrap
    .pd-screen,
  .pd-scroll-story.is-horizontal-ready
    .pd-panel-device-wrap
    .pd-screen.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }

  /*
   * A chapter phone is a stable editorial frame. Content arrival animations
   * belong to the tap-through mobile preview; on the filmstrip they would have
   * completed off-screen before the device entered anyway.
   */
  .pd-panel-device-wrap .pd-talk.is-active .pd-direction,
  .pd-panel-device-wrap .pd-talk.is-active .pd-bubble,
  .pd-panel-device-wrap .pd-talk.is-active .pd-skillbar,
  .pd-panel-device-wrap .pd-talk.is-active .pd-return,
  .pd-panel-device-wrap .pd-remember.is-active .pd-whisper,
  .pd-panel-device-wrap .pd-remember.is-active .pd-memory-card,
  .pd-panel-device-wrap .pd-remember.is-active .pd-relationship-head small {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .pd-panel-device-wrap
    .pd-remember.is-active
    .pd-bond-meter
    span {
    width: 62%;
    animation: none;
  }

  /*
   * Explicit layout territories: copy ends before 30vw, phone starts around
   * 42vw, and secondary cards live beyond 76vw. Incoming copy therefore cannot
   * pass over the outgoing phone during the inter-panel handoff.
   */
  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel--chapter
    .pd-chapter-panel,
  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel--chapter
    .pd-chapter-panel.is-active {
    max-width: 330px;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel
    .pd-scene-card {
    z-index: 6;
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .pd-scroll-story.is-horizontal-ready {
    --pd-panel-phone-scale: 0.7;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel[data-pd-panel="discover"] {
    --pd-panel-phone-left: 63%;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel[data-pd-panel="meet"],
  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel[data-pd-panel="talk"] {
    --pd-panel-phone-left: 60%;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel[data-pd-panel="remember"] {
    --pd-panel-phone-left: 56%;
  }

  /*
   * Secondary evidence gives way before either primary element is allowed to
   * collide. The phone and the chapter statement remain the two essentials.
   */
  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel
    .pd-scene-card {
    opacity: 0;
    visibility: hidden;
  }
}

@media (min-width: 761px) and (max-height: 760px) {
  .pd-scroll-story.is-horizontal-ready {
    --pd-panel-phone-scale: 0.69;
  }
}

@media (min-width: 1101px) and (min-height: 980px) {
  .pd-scroll-story.is-horizontal-ready {
    --pd-panel-phone-scale: 0.9;
  }
}

@media (max-width: 760px) {
  .pd-scroll-story.is-horizontal-ready .pd-panel-device-wrap {
    display: none;
  }
}

/* ==========================================================================
   CHAPTER DETENTS

   The sticky viewport now has enough vertical travel for a short plateau at
   every complete composition. JavaScript maps those plateaus and the eased
   transitions between them; CSS only provides the travel budget and a subtle
   confirmation on the chapter ruler.
   ========================================================================== */

@media (min-width: 761px) {
  .pd-scroll-story.is-horizontal-ready {
    /* 560svh of active travel beneath one 100svh sticky viewport:
       about 42svh held per chapter and 87svh per transition. */
    min-height: 660svh;
  }

  .pd-scroll-story.is-horizontal-ready .pd-tabs::before {
    transform-origin: center;
    transition:
      height 180ms ease,
      box-shadow 180ms ease;
  }

  .pd-scroll-story.is-horizontal-ready[data-motion="hold"]
    .pd-tabs::before {
    height: 3px;
    box-shadow: 0 0 0 1px rgba(62, 17, 157, 0.08);
  }

  .pd-scroll-story.is-horizontal-ready[data-motion="hold"]
    .pd-tab.is-active
    .pd-index {
    color: var(--pd-purple);
  }

  .pd-scroll-story.is-horizontal-ready[data-motion="transition"]
    .pd-tabs::before {
    height: 2px;
    box-shadow: none;
  }
}

/* Final cascade lock: the editorial system intentionally supersedes the older
   four-phone and detent experiments above. */
@media (min-width: 761px) {
  .pd-scroll-story.is-horizontal-ready {
    --pd-panel-phone-scale: 0.82;
    min-height: 620svh;
  }

  .pd-scroll-story.is-horizontal-ready .pd-rail-panel--chapter::before {
    display: none;
  }

  .pd-scroll-story.is-horizontal-ready .pd-horizontal-track {
    will-change: auto;
  }

  .pd-scroll-story.is-horizontal-ready.is-in-view.is-scrubbing
    .pd-horizontal-track {
    will-change: transform;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel[data-pd-panel="discover"] {
    --pd-panel-phone-left: 62%;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel[data-pd-panel="meet"] {
    --pd-panel-phone-left: 58%;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel[data-pd-panel="talk"] {
    --pd-panel-phone-left: 55%;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel[data-pd-panel="remember"] {
    --pd-panel-phone-left: 51%;
  }

  .pd-scroll-story.is-horizontal-ready .pd-tabs::before,
  .pd-scroll-story.is-horizontal-ready[data-motion="hold"]
    .pd-tabs::before,
  .pd-scroll-story.is-horizontal-ready[data-motion="transition"]
    .pd-tabs::before {
    height: 2px;
    box-shadow: none;
    transition: none;
  }
}

@media (min-width: 1101px) and (max-width: 1279px) {
  .pd-scroll-story.is-horizontal-ready {
    --pd-panel-phone-scale: 0.72;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel[data-pd-panel="discover"] {
    --pd-panel-phone-left: 63%;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel[data-pd-panel="meet"] {
    --pd-panel-phone-left: 60%;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel[data-pd-panel="talk"] {
    --pd-panel-phone-left: 58%;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel[data-pd-panel="remember"] {
    --pd-panel-phone-left: 54%;
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .pd-scroll-story.is-horizontal-ready {
    --pd-panel-phone-scale: 0.64;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel[data-pd-panel="discover"],
  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel[data-pd-panel="meet"],
  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel[data-pd-panel="talk"],
  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel[data-pd-panel="remember"] {
    --pd-panel-phone-left: 60%;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel
    .pd-evidence-group
    .pd-scene-card {
    opacity: 1;
    visibility: visible;
  }
}

@media (min-width: 761px) and (max-width: 880px) {
  .pd-scroll-story.is-horizontal-ready {
    --pd-panel-phone-scale: 0.58;
  }

  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel[data-pd-panel="discover"],
  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel[data-pd-panel="meet"],
  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel[data-pd-panel="talk"],
  .pd-scroll-story.is-horizontal-ready
    .pd-rail-panel[data-pd-panel="remember"] {
    --pd-panel-phone-left: 58%;
  }
}

@media (min-width: 761px) and (max-height: 760px) {
  .pd-scroll-story.is-horizontal-ready {
    --pd-panel-phone-scale: 0.68;
  }
}

@media (min-width: 761px) and (max-width: 880px) and (max-height: 760px) {
  .pd-scroll-story.is-horizontal-ready {
    --pd-panel-phone-scale: 0.56;
  }
}