/* =========================================================================
   ProductDemo — the looping app scene on the home page.

   The whole scene is laid out at a FIXED logical size (1080×660) inside
   .pd-fit, which product-demo.js scales down to whatever width it has. Nothing
   here reflows, so the four beats land in exactly the same place on a phone as
   on a 27" display.

   .pd-camera is the "lens": each beat sets a scale + transform-origin on it,
   so beats 1–2 read as a zoomed-in view of the composer and beats 3–4 pull
   back to the whole app.
   ========================================================================= */

.pdemo {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 96px var(--pad-x) 40px;
}

.pdemo__head {
  max-width: 680px;
  margin: 0 auto 44px;
  text-align: center;
}

.pdemo__title {
  margin-top: 18px;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.08;
  letter-spacing: -.03em;
  font-weight: 500;
  color: var(--ink-strong);
  text-wrap: balance;
}

.pdemo__sub {
  margin-top: 18px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--body);
  text-wrap: pretty;
}

.pdemo__head .eyebrow { justify-content: center; }

/* ---------- stage ---------- */

.pd-stage {
  /* Logical scene size. product-demo.js reads these to compute the fit scale,
     so the narrow-screen override below is all it takes to reshape the scene. */
  --pd-scene-w: 1080;
  --pd-scene-h: 660;

  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: radial-gradient(120% 120% at 50% 0%, #1a2130 0%, #0d1119 60%, #0a0d14 100%);
  border: 1px solid #1e2533;
  box-shadow: 0 60px 120px -50px rgba(10, 16, 28, .6);
  /* height is set by product-demo.js from the measured scale */
}

/* Fixed-size canvas. JS sets --pd-fit; top-left origin keeps the maths simple. */
.pd-fit {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--pd-scene-w) * 1px);
  height: calc(var(--pd-scene-h) * 1px);
  transform: scale(var(--pd-fit, 1));
  transform-origin: 0 0;
}

/* Origin is the scene's top-left, so a beat is just "scale, then shift" and the
   numbers below are plain scene pixels. The app box sits at 34,34 → 1046,626
   (see .pd-app inset); each zoomed beat pins the app's left and bottom edges to
   the stage so no dark gap opens up beside it. */
.pd-camera {
  position: absolute;
  inset: 0;
  transform: translate(var(--pd-tx, 0px), var(--pd-ty, 0px)) scale(var(--pd-z, 1));
  transform-origin: 0 0;
  transition: transform 1.25s cubic-bezier(.62, .02, .2, 1);
}

/* Beat 1: the camera sits still at full frame — the composer does the work,
   floating scaled-up in the middle of the stage (see .pd-composer below). A
   camera zoom here would drag the typing back down into a corner, which is
   exactly what we're avoiding. */
.pd-stage[data-beat="1"] .pd-camera { --pd-z: 1; --pd-tx: 0px; --pd-ty: 0px; }

/* Beat 2: eases back as the reply fills in, so the whole thread stays framed. */
.pd-stage[data-beat="2"] .pd-camera { --pd-z: 1.45; --pd-tx: -49px; --pd-ty: -248px; }

/* Beats 3–4: the whole app. */
.pd-stage[data-beat="3"] .pd-camera,
.pd-stage[data-beat="4"] .pd-camera { --pd-z: 1; --pd-tx: 0px; --pd-ty: 0px; }

/* ---------- app shell ---------- */

.pd-app {
  position: absolute;
  inset: 34px;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e6e8ec;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .55);
  font-size: 13px;
  color: var(--ink-strong);
}

.pd-chrome {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 42px;
  padding: 0 14px;
  flex-shrink: 0;
  background: #fbfbfc;
  border-bottom: 1px solid #eeeff2;
}

.pd-dots-mac { display: inline-flex; gap: 5px; }
.pd-dots-mac i { width: 8px; height: 8px; border-radius: 99px; background: #dfe0e5; }

.pd-house {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 6px;
  padding: 5px 9px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-strong);
  cursor: default;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.pd-house__chev { transition: transform .3s ease; opacity: .55; }

/* The anchor lights up while the board is open — beat 3 only, since beat 4
   closes it again. */
.pd-stage[data-beat="3"] .pd-house {
  background: #f1f2f5;
  border-color: #e3e5ea;
}

.pd-stage[data-beat="3"] .pd-house__chev { transform: rotate(180deg); }

.pd-house.is-tapped { animation: pdTap .5s ease; }

@keyframes pdTap {
  0%   { box-shadow: 0 0 0 0 rgba(31, 138, 91, .45); }
  70%  { box-shadow: 0 0 0 9px rgba(31, 138, 91, 0); }
  100% { box-shadow: 0 0 0 0 rgba(31, 138, 91, 0); }
}

.pd-crumb { font-size: 11.5px; color: var(--muted-4); }
.pd-chrome__spacer { flex: 1; }

.pd-pill {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: #f1f1f4;
  border-radius: 6px;
  padding: 5px 10px;
}

.pd-avatar {
  width: 24px;
  height: 24px;
  border-radius: 99px;
  background: var(--brand-green);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pd-body { position: relative; flex: 1; display: flex; min-height: 0; }

/* ---------- AI Companion panel ---------- */

.pd-chat {
  width: 336px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid #eeeff2;
  background: #fcfcfd;
}

.pd-chat__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-3);
}

.pd-spark {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-green);
  color: #fff;
}

.pd-thread {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 16px 12px;
}

.pd-msg {
  border-radius: 12px;
  padding: 11px 13px;
  font-size: 12.5px;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
}

.pd-msg.is-on { opacity: 1; transform: none; }

/* An unsent message must not hold its space, or the thread's bottom-anchored
   stack floats away from the composer during the typing beat. JS drops this
   class a frame before .is-on so the fade still runs. */
.pd-msg.is-hidden { display: none; }

.pd-msg--me {
  align-self: flex-end;
  max-width: 92%;
  background: var(--brand-green);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.pd-msg--greet { color: var(--muted-2); }

.pd-msg--ai {
  background: #fff;
  border: 1px solid #ebecf0;
  border-bottom-left-radius: 4px;
  box-shadow: 0 10px 26px -20px rgba(20, 30, 50, .5);
}

/* progress lines */

.pd-steps { display: flex; flex-direction: column; gap: 9px; }

.pd-step {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--muted-3);
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .3s ease, transform .3s ease, color .3s ease;
}

.pd-step.is-on { opacity: 1; transform: none; color: var(--body); }
.pd-step.is-done { color: var(--muted-2); }

/* Unstarted lines hold no space, so the bubble grows with the work instead of
   opening as a tall empty card. */
.pd-step.is-hidden { display: none; }

.pd-step__mark {
  position: relative;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-green);
}

.pd-step__spin {
  width: 12px;
  height: 12px;
  border-radius: 99px;
  border: 1.7px solid #dfe1e6;
  border-top-color: var(--accent-green);
  opacity: 0;
  transition: opacity .2s ease;
}

.pd-step.is-on .pd-step__spin { opacity: 1; animation: pdSpin .8s linear infinite; }
.pd-step.is-done .pd-step__spin { opacity: 0; animation: none; }

@keyframes pdSpin { to { transform: rotate(360deg); } }

.pd-step__tick {
  position: absolute;
  opacity: 0;
  transform: scale(.5);
  transition: opacity .25s ease, transform .25s cubic-bezier(.2, 1.6, .4, 1);
}

.pd-step.is-done .pd-step__tick { opacity: 1; transform: none; }

.pd-step__label { font-size: 12.5px; line-height: 1.45; }

/* the property facts the lookup came back with */

.pd-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 11px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: opacity .35s ease, max-height .35s ease, margin-top .35s ease;
}

.pd-facts:not(.is-on) { margin-top: 0; }
/* Over-shoots the real height on purpose — the reveal is opacity-led, and a
   tight max-height clips the second row of chips at narrow scales. */
.pd-facts.is-on { opacity: 1; max-height: 140px; }

.pd-facts span {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--brand-green);
  background: #eaf3ee;
  border-radius: 5px;
  padding: 4px 8px;
}

/* Collapsed means collapsed: the rule, the margin and the padding all have to
   go, or the bubble carries ~22px of dead space under the last progress line
   for the whole beat. */
.pd-done {
  margin-top: 0;
  padding-top: 0;
  border-top: 0 solid #f0f1f4;
  font-size: 12px;
  line-height: 1.5;
  color: var(--body);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity .35s ease, max-height .35s ease, margin-top .35s ease,
              padding-top .35s ease;
}

.pd-done.is-on {
  opacity: 1;
  max-height: 160px;
  margin-top: 11px;
  padding-top: 10px;
  border-top-width: 1px;
}
.pd-done strong { color: var(--ink-strong); font-weight: 600; }

/* ---------- composer ----------
   This is the one element that travels. In beat 1 it lifts out of the panel and
   sits scaled up in the middle of the stage, so the typing is centre-frame even
   when only part of the section is scrolled into view. On send it flies back
   down into its slot at the bottom of the Companion while the camera pushes
   left — which is what tells you where the message went. product-demo.js
   measures the trip and writes --pd-hx/hy/hs. */

.pd-composer {
  position: relative;
  z-index: 6;
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  gap: 9px;
  margin: 0 14px 14px;
  padding: 10px 10px 10px 13px;
  background: #fff;
  border: 1px solid #e2e4e9;
  border-radius: 11px;
  box-shadow: 0 2px 0 rgba(20, 30, 50, .02);
  transform-origin: 0 0;
  transition: transform 1.05s cubic-bezier(.6, .02, .18, 1),
              border-color .4s ease, box-shadow .5s ease;
}

.pd-stage[data-beat="1"] .pd-composer {
  transform: translate(var(--pd-hx, 0px), var(--pd-hy, 0px)) scale(var(--pd-hs, 1));
  border-color: #bcd8c9;
  box-shadow: 0 0 0 2px rgba(31, 138, 91, .14),
              0 40px 70px -34px rgba(15, 25, 45, .5);
}

/* Beat 1 dims everything that isn't the composer. */
.pd-veil {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: rgba(252, 252, 253, .74);
  opacity: 0;
  pointer-events: none;
  transition: opacity .7s ease;
}

.pd-stage[data-beat="1"] .pd-veil { opacity: 1; }

/* Two lines' worth from the start, so the box never changes height mid-type —
   the hero trip is measured once and would otherwise drift as the text wraps. */
.pd-composer__field {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 35px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-strong);
}

.pd-placeholder {
  position: absolute;
  inset: 0;
  color: var(--muted-4);
  transition: opacity .2s ease;
}

.pd-placeholder.is-off { opacity: 0; }

.pd-caret {
  display: inline-block;
  width: 1.5px;
  height: 14px;
  vertical-align: -3px;
  background: var(--brand-green);
  opacity: 0;
}

.pd-stage[data-beat="1"] .pd-caret { animation: pdBlink 1.05s steps(1) infinite; }

@keyframes pdBlink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

.pd-send {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eeeff2;
  color: var(--muted-3);
  transition: background .25s ease, color .25s ease, transform .2s ease;
}

.pd-send.is-armed { background: var(--brand-green); color: #fff; }
.pd-send.is-fired { transform: scale(.86); }

/* ---------- canvas ---------- */

.pd-canvas {
  flex: 1;
  min-width: 0;
  position: relative;
  background:
    radial-gradient(90% 70% at 50% 0%, #f7f8fa 0%, #f2f3f6 100%);
  overflow: hidden;
}

/* ---------- the package assembling (beats 1–3) ---------- */

.pd-pages {
  position: absolute;
  inset: 0;
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* Quick out, so it has cleared before .pd-designs fades in over it —
     otherwise the two layers are legible through each other. */
  transition: opacity .24s ease, transform .32s ease;
}

/* Beat 4 opens a page, so the index steps aside. */
.pd-stage[data-beat="4"] .pd-pages { opacity: 0; transform: translateY(-10px); }

.pd-pages__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pd-pages__title { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.pd-pages__meta { margin-top: 3px; font-size: 11.5px; color: var(--muted-4); }

.pd-pages__state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted-2);
  background: #edeef2;
  transition: background .35s ease, color .35s ease;
}

.pd-pages__spin {
  width: 10px;
  height: 10px;
  border-radius: 99px;
  border: 1.6px solid #d5d7de;
  border-top-color: var(--muted-2);
  animation: pdSpin .8s linear infinite;
}

.pd-pages__state.is-ready { background: #e6f5ec; color: var(--accent-green); }

.pd-pages__state.is-ready .pd-pages__spin {
  border-color: var(--accent-green);
  background: var(--accent-green);
  animation: none;
}

.pd-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  align-content: start;
}

/* A tile is its own skeleton: grey and bodiless until it resolves. */
.pd-tile {
  min-height: 152px;
  padding: 10px;
  border-radius: 9px;
  background: #e9ebef;
  border: 1px solid transparent;
  box-shadow: none;
  transition: background .45s ease, border-color .45s ease, box-shadow .45s ease,
              transform .45s cubic-bezier(.2, .9, .3, 1);
}

.pd-tile.is-on {
  background: #fff;
  border-color: #e6e8ec;
  box-shadow: 0 14px 30px -22px rgba(20, 35, 60, .55);
}

.pd-tile__body {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 7px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .4s ease .08s, transform .4s ease .08s;
}

.pd-tile.is-on .pd-tile__body { opacity: 1; transform: none; }

.pd-tile__thumb {
  flex: 1;
  min-height: 0;
  border-radius: 5px;
  overflow: hidden;
  background: #f4f5f8;
  display: block;
}

.pd-tile__name {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.01em;
}

.pd-tile__meta { font-size: 9.5px; color: var(--muted-4); }

/* tile thumbnails */

.pd-thumb-doc {
  height: 100%;
  padding: 9px 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #eef0f4;
}

.pd-thumb-doc i { height: 4px; width: 46%; border-radius: 2px; }
.pd-thumb-doc b { height: 3px; border-radius: 2px; background: #e8eaef; }
.pd-thumb-doc b:nth-of-type(2) { width: 86%; }
.pd-thumb-doc b:nth-of-type(3) { width: 62%; }

.pd-thumb-site { position: relative; display: block; height: 100%; }
.pd-thumb-site img { width: 100%; height: 100%; object-fit: cover; }

.pd-thumb-site i {
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .85);
}

.pd-thumb-social {
  height: 100%;
  padding: 7px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #eef0f4;
}

.pd-thumb-social i { border-radius: 3px; background: #e8eaef; }
.pd-thumb-social i:nth-child(1) { background: #dbe7f7; }
.pd-thumb-social i:nth-child(4) { background: #e3ece6; }

/* website designs page */

.pd-designs {
  position: absolute;
  inset: 0;
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  opacity: 0;
  transform: translateY(14px);
  /* Waits for the index to clear before it arrives. */
  transition: opacity .42s ease .24s, transform .48s cubic-bezier(.2, .8, .3, 1) .24s;
}

.pd-designs.is-on { opacity: 1; transform: none; }

.pd-designs__head { display: flex; align-items: flex-start; justify-content: space-between; }
.pd-designs__title { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.pd-designs__meta { margin-top: 3px; font-size: 11.5px; color: var(--muted-4); }

.pd-designs__new {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--brand-green);
  border-radius: 6px;
  padding: 6px 11px;
}

.pd-site {
  margin: 0;
  max-width: 430px;
  background: #fff;
  border: 1px solid #e6e8ec;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 24px 50px -28px rgba(20, 35, 60, .4);
}

.pd-site__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  background: #f6f7f9;
  border-bottom: 1px solid #ececf0;
}

.pd-site__dots { display: inline-flex; gap: 4px; }
.pd-site__dots i { width: 6px; height: 6px; border-radius: 99px; background: #d7d7de; }

.pd-site__url {
  flex: 1;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: 9.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pd-site__live {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 700;
  color: var(--accent-green);
}

.pd-site__live i { width: 5px; height: 5px; border-radius: 99px; background: #46c98a; }

.pd-site__shot { position: relative; height: 168px; background: #e6effb; }
.pd-site__shot img { width: 100%; height: 100%; object-fit: cover; }

.pd-site__tag {
  position: absolute;
  top: 11px;
  left: 11px;
  background: rgba(255, 255, 255, .95);
  color: var(--brand-green);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 4px;
}

.pd-site__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px 14px;
}

.pd-site__name { font-size: 13.5px; font-weight: 600; letter-spacing: -.02em; }
.pd-site__sub { margin-top: 3px; font-size: 10.5px; color: var(--muted-4); }
.pd-site__price { font-size: 14px; font-weight: 600; color: var(--brand-green); }

/* ---------- the project nav board (anchored under the house icon) ---------- */

.pd-board {
  position: absolute;
  top: 84px;
  left: 62px;
  width: 348px;
  padding: 8px;
  background: #fff;
  border: 1px solid #e6e8ec;
  border-radius: 12px;
  box-shadow: 0 32px 70px -26px rgba(15, 25, 45, .45), 0 2px 6px rgba(15, 25, 45, .06);
  opacity: 0;
  transform: translateY(-8px) scale(.97);
  transform-origin: 60px -10px;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s cubic-bezier(.2, .9, .3, 1);
}

.pd-board.is-on { opacity: 1; transform: none; }

.pd-board__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px 10px;
}

.pd-board__title { font-size: 12px; font-weight: 600; letter-spacing: -.01em; }

.pd-board__badge {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--accent-green);
  background: #e6f5ec;
  border-radius: 5px;
  padding: 3px 7px;
}

.pd-group { padding: 4px 0; border-top: 1px solid #f2f3f6; }
.pd-group:first-of-type { border-top: 0; }

.pd-group__label {
  padding: 7px 8px 5px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-4);
}

.pd-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border-radius: 7px;
  transition: background .2s ease;
}

/* Rows deal in one at a time once the board opens; JS stamps --pd-i. */
.pd-board .pd-row,
.pd-board .pd-group__label {
  opacity: 0;
  transform: translateY(4px);
}

.pd-board.is-on .pd-row,
.pd-board.is-on .pd-group__label {
  animation: pdRowIn .34s cubic-bezier(.2, .8, .3, 1) forwards;
  animation-delay: calc(var(--pd-i, 0) * 34ms + 120ms);
}

@keyframes pdRowIn { to { opacity: 1; transform: none; } }

.pd-row__icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f2f3f6;
  color: var(--muted);
}

/* Docs carry the page glyph bare, so a list of docs reads as content and the
   tool rows above it read as app chrome — same rule as the real board. */
.pd-row__icon--doc { background: transparent; color: var(--muted-3); }

.pd-row__name {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pd-row--tool .pd-row__name { font-weight: 600; }

.pd-row__meta { font-size: 10px; color: var(--muted-4); flex-shrink: 0; }
.pd-row__eye { color: #c9cbd3; display: inline-flex; flex-shrink: 0; }

.pd-row.is-hover { background: #f4f5f8; }

.pd-row.is-clicked {
  background: #eaf3ee;
  animation: pdRowClick .4s ease;
}

@keyframes pdRowClick {
  0%   { box-shadow: inset 0 0 0 0 rgba(31, 138, 91, .3); }
  40%  { box-shadow: inset 0 0 0 2px rgba(31, 138, 91, .3); }
  100% { box-shadow: inset 0 0 0 0 rgba(31, 138, 91, 0); }
}

/* ---------- pointer ---------- */

.pd-cursor {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transform: translate(560px, 420px);
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .28));
  transition: transform .85s cubic-bezier(.4, .02, .2, 1), opacity .3s ease;
  pointer-events: none;
}

.pd-cursor.is-on { opacity: 1; }
.pd-cursor.is-click { transform: translate(var(--pd-cx, 0), var(--pd-cy, 0)) scale(.86); }

/* ---------- legend ---------- */

.pd-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.pd-legend li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--muted-4);
  transition: color .3s ease;
}

.pd-legend li span {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: #d7d9e0;
  transition: background .3s ease, transform .3s ease;
}

.pd-legend li.is-active { color: var(--ink-strong); }
.pd-legend li.is-active span { background: var(--accent-green); transform: scale(1.5); }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .pdemo { padding-top: 72px; }
  .pd-legend { gap: 8px 18px; }
  .pd-legend li { font-size: 11.5px; }
}

/* ---------- narrow screens ----------
   A 1080-wide scene squeezed into a phone is a 32% thumbnail nobody can read.
   So below 720px the scene becomes portrait and single-panel — which is also
   what the real app does on a phone: chat, then pages, one at a time. The
   canvas stops being a column and becomes the beat-4 overlay. */
@media (max-width: 720px) {
  .pdemo { padding-inline: 20px; }

  .pd-stage {
    --pd-scene-w: 420;
    --pd-scene-h: 640;
    border-radius: 12px;
  }

  .pd-app { inset: 14px; border-radius: 14px; }

  /* The chrome keeps only the anchor the board hangs off. */
  .pd-crumb,
  .pd-pill { display: none; }

  .pd-chat { width: auto; flex: 1; border-right: 0; }

  .pd-canvas {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .45s ease;
  }

  /* One panel at a time on a phone: the board is the index, so the canvas is
     only ever the opened page. */
  .pd-pages { display: none; }
  .pd-stage[data-beat="4"] .pd-canvas { opacity: 1; }

  .pd-designs { padding: 18px; }
  .pd-site { max-width: none; }
  .pd-site__shot { height: 190px; }

  .pd-board {
    top: 58px;
    left: 12px;
    right: 12px;
    width: auto;
    transform-origin: 40px -10px;
  }

  /* No camera zoom on any beat here. The chat panel already spans the whole
     portrait scene, so any push-in crops the bubbles at the edges — beat 2's
     framing comes from the thread bottom-filling the frame instead. */
  .pd-stage[data-beat="2"] .pd-camera { --pd-z: 1; --pd-tx: 0px; --pd-ty: 0px; }
}

/* ---------- reduced motion ----------
   styles.css already kills every animation and transition globally; this holds
   the scene on its final frame (beat 4, board closed, website visible) so the
   section still says something rather than sitting blank. */
@media (prefers-reduced-motion: reduce) {
  .pd-camera { --pd-z: 1; --pd-tx: 0px; --pd-ty: 0px; }
  .pd-board { opacity: 0; }
  .pd-board .pd-row,
  .pd-board .pd-group__label { opacity: 1; transform: none; }
  .pd-cursor { opacity: 0; }
}