/* Product-only styles moved unchanged from pineverse.css. */
/* ══════════════════════════════════════════════════════
   PRODUCT PAGE   —   Figma 272:1104  (1440 × 10429)

   Gutters use the canvas lock the rest of the site uses:
     max(<figmaPx>, calc(50% - (720px - <figmaPx>)))
   exact Figma px below 1440, pinned to a centred 1440
   canvas above it.

   Section map (Figma y):
     hero        0 – 822    banner video
     intro     779 – 1534   #a7fc00, r32, tucks under the hero
     core     1485 – 2819   #021717
     services 3077 – 4157   6-card carousel
     grow     4229 – 6386   #080808
     app      6118 – 7273   #e6e6e6 panel, r22
     contact  7381 – 8339   shared component
     faq      8468 – 9584   shared component
══════════════════════════════════════════════════════ */
.product-page {
  --pd-lime:  #a7fc00;
  --pd-ink:   #021717;
  --pd-paper: #fefdfa;
  --pd-green: #18c03d;

  /* one gutter per band, straight off the frame */
  --pd-g83:  var(--pv-gutter);
  --pd-g121: var(--pv-gutter);
  --pd-g60:  var(--pv-gutter);
  --pd-g124: var(--pv-gutter);

  background: #ffffff;
  color: var(--pd-ink);
  overflow-x: clip;
}

/* ══════════════════════════════════════════════════════
   HERO — 281:1372
══════════════════════════════════════════════════════ */
.pd-hero {
  position: relative;
  width: 100%;
  height: 822px;
  max-height: 100vh;
  min-height: 560px;
  overflow: hidden;
  isolation: isolate;
  display: block;
}

.pd-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.pd-hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(2,23,23,0.42) 0%, rgba(2,23,23,0.12) 40%, rgba(2,23,23,0.55) 100%);
}

 /* 281:1376 sits at y 483 and 281:1374 at y 538 of an 822 band —
    58.76%, so it holds its place when the hero is clamped to the viewport */
.pd-hero-content {
  position: absolute;
  z-index: 2;
  top: 58.76%;
  /* 281:1374 spans x 891 → 1367, so the right gutter is 73 */
  right: var(--pv-gutter);
  width: 476px;
  max-width: calc(100% - var(--pd-g83) * 2);
  display: flex;
  flex-direction: column;
  align-items: flex-end;        /* the design is right-aligned */
  text-align: right;
}

/* 281:1376 — 219.79 × 40.88, outline pill, ABOVE the heading */
.pd-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 25px;
  border: 1px solid #b7f66e;
  border-radius: 49.131px;
  background: transparent;
  color: #b7f66e;
  text-decoration: none;
  font-family: 'Host Grotesk', sans-serif;
  font-size: 12.864px;
  font-weight: 400;
  line-height: 1.16;
  white-space: nowrap;
  transition: background 0.25s ease, transform 0.2s ease;
}

.pd-hero-cta-arrow { display: inline-flex; width: 14px; height: 13px; }
.pd-hero-cta-arrow svg { width: 100%; height: 100%; display: block; }
.pd-hero-cta:hover { background: rgba(183, 246, 110, 0.14); transform: translateY(-1px); }

/* 281:1374 — 48 / 133% / capitalize / −1.92px */
.pd-hero-heading {
  margin: 14px 0 0;             /* CTA bottom 523.9 → heading top 538 */
  font-family: 'Host Grotesk', sans-serif;
  font-size: clamp(28px, 3.334vw, 48px);
  font-weight: 400;
  line-height: 1.33;
  letter-spacing: -0.04em;
  text-transform: capitalize;
  color: #ffffff;
}

/* ══════════════════════════════════════════════════════
   INTRO BAND — 286:1385  (#a7fc00, r32, tucks 43px under the hero)
══════════════════════════════════════════════════════ */
.pd-intro {
  position: relative;
  z-index: 2;
  margin-top: -43px;
  border-radius: 32px;
  background: var(--pd-lime);
  /* 286:1386 spans x 121 → 1269, y 950 of a band starting at 779 */
  padding: 171px var(--pd-g121) 289px;
}

.pd-intro-copy {
  margin: 0;
  max-width: 1148px;
  font-family: 'Host Grotesk', sans-serif;
  font-size: clamp(22px, 2.78vw, 40px);
  font-weight: 300;
  line-height: 1.48;
  color: var(--pd-ink);
}

.pd-intro-copy strong { font-weight: 500; color: var(--pd-green); }

.pd-intro-copy em {
  font-family: 'Host Grotesk', sans-serif;
  font-style: italic;
  font-weight: 500;
  color: inherit;
}

/* ══════════════════════════════════════════════════════
   CORE FUNCTIONS — 286:1400  (#021717)
══════════════════════════════════════════════════════ */
.pd-core {
  position: relative;
  z-index: 3;
  margin-top: -49px;            /* 1534 → 1485 */
  background: var(--pd-ink);
  /* left gutter 83 (heading), right gutter 141 (cards end at 1299) */
  padding: 165px var(--pv-gutter) 107px;
  display: grid;
  grid-template-columns: minmax(0, 482px) minmax(0, 429px);
  justify-content: space-between;
  gap: clamp(32px, 4vw, 80px);
}

/* 286:1401 — 302 × 51, #a7fc00, r7 */
.pd-tag {
  display: inline-flex;
  align-items: center;
  gap: 23px;
  min-width: 302px;             /* 286:1401 is a fixed 302 × 51 */
  height: 51px;
  padding: 0 18px;
  border-radius: 7px;
  background: var(--pd-lime);
}

.pd-tag-dot {
  width: 15px;
  height: 13px;
  border-radius: 3px;
  background: var(--pd-ink);
  flex-shrink: 0;
}

.pd-tag-label {
  font-family: 'Host Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 116%;
  color: var(--pd-ink);
  white-space: nowrap;
}

/* 286:1405 — 48 / 116% / Light / #fefdfa */
.pd-core-heading {
  margin: 50px 0 0;             /* pill bottom 1701 → heading 1751 */
  font-family: 'Host Grotesk', sans-serif;
  font-size: clamp(30px, 3.334vw, 48px);
  font-weight: 300;
  line-height: 1.16;
  text-transform: capitalize;
  color: var(--pd-paper);
}

.pd-core-list {
  margin: 30px 0 0;             /* tag sits at 1650, the first card at 1680 */
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 43px;                    /* pitch 215 − card 172 */
}

/* 286:1406 — 429 × 172, #a7fc00, r14.25 */
.pd-fn {
  position: relative;
  height: 172px;
  border-radius: 14.25px;
  background: var(--pd-lime);
  overflow: hidden;
  isolation: isolate;
}

/* 288:1530 — Behind The Nineties Semibold 152.5px, #232323, bleeds off the card */
.pd-fn-num {
  position: absolute;
  left: 11.42%;                 /* 49 / 429 — card 01 */
  top: 4.07%;                   /* 7 / 172 */
  z-index: 2;                   /* Figma paints the number over the icon */
  font-family: 'Behind The Nineties', 'Host Grotesk', serif;
  font-style: normal;
  font-weight: 600;
  font-size: 152.5px;
  line-height: 1.63;
  color: #232323;
  white-space: nowrap;
  pointer-events: none;
}

/* 288:1520 — 231 × 150 at (15, 22) */
/* 288:1530 — the per-card left bearing Figma records for each numeral */
.pd-fn:nth-child(2) .pd-fn-num { left: 10.02%; }   /* 43 / 429 */
.pd-fn:nth-child(3) .pd-fn-num,
.pd-fn:nth-child(4) .pd-fn-num,
.pd-fn:nth-child(5) .pd-fn-num { left: 7.69%; }    /* 33 / 429 */

.pd-fn-icon {
  position: absolute;
  left: 15px;
  top: 22px;
  z-index: 1;
  width: 231px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pd-fn-icon img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* 286:1407 — 18 / 116% / #101010, w 128 at (267, 69) */
.pd-fn-title {
  position: absolute;
  left: 267px;
  top: 69px;
  z-index: 3;
  width: 128px;
  font-family: 'Host Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.156;
  color: #101010;
}

/* ══════════════════════════════════════════════════════
   SERVICES — 293:1766 + carousel 293:1789
══════════════════════════════════════════════════════ */
.pd-services {
  background: #ffffff;
  padding: 258px 0 0;           /* 2819 → 3077 */
}

.pd-services-head {
  padding: 0 var(--pd-g124);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* 293:1766 — 64 / 116% / Medium / #021717 / centre */
.pd-services-heading {
  margin: 0;
  max-width: 656px;
  font-family: 'Host Grotesk', sans-serif;
  font-size: clamp(32px, 4.45vw, 64px);
  font-weight: 500;
  line-height: 1.16;
  text-transform: capitalize;
  color: var(--pd-ink);
}

/* 293:1768 — 302 × 75, #efefef, r54 */
.pd-pill {
  margin-top: 46px;             /* heading bottom 3225 → pill 3271 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 302px;
  height: 75px;
  padding: 0 26px;
  border-radius: 54px;
  background: #efefef;
  font-family: 'Host Grotesk', sans-serif;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.16;
  color: var(--pd-ink);
  white-space: nowrap;
}

.pd-carousel {
  margin-top: 149px;            /* pill bottom 3346 → cards 3495 */
  /* the frame starts the rail at 124, which does not line up with the
     grow cards, the app panel or the contact block — they all sit on 60.
     The rail and its nav use the page gutter so the left edge is one line. */
  padding-left: var(--pd-g60);
  overflow: hidden;
  cursor: grab;
}

.pd-carousel.is-dragging { cursor: grabbing; }

.pd-carousel-track {
  display: flex;
  gap: 38px;                    /* pitch 728 − card 690 */
  will-change: transform;
}

/* 293:1769 — 690 × 460, r33, image + rgba(2,23,23,0.44) */
.pd-svc {
  position: relative;
  flex: 0 0 690px;
  width: 690px;
  height: 460px;
  border-radius: 33px;
  overflow: hidden;
  isolation: isolate;
}

.pd-svc-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.pd-svc-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(2, 23, 23, 0.44);
}

.pd-svc-tag {
  position: absolute;
  left: 40px;
  top: 34px;
  z-index: 2;
  margin: 0;
  font-family: 'Host Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.16;
  color: rgba(255, 255, 255, 0.72);
}

/* 293:1770 — 40 / 116% / capitalize / white */
.pd-svc-title {
  position: absolute;
  left: 40px;
  top: 338px;
  z-index: 2;
  margin: 0;
  width: 367px;
  max-width: calc(100% - 80px);
  font-family: 'Host Grotesk', sans-serif;
  font-size: clamp(24px, 2.78vw, 40px);
  font-weight: 400;
  line-height: 1.16;
  text-transform: capitalize;
  color: #ffffff;
}

/* 293:1794 / 293:1795 — the two round arrows under the rail */
.pd-carousel-nav {
  margin-top: 62px;
  padding: 0 var(--pd-g60);     /* first arrow flush with the first card */
  display: flex;
  align-items: center;
  gap: 8px;
}

.pd-carousel-btn {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 1px solid rgba(2, 23, 23, 0.10);
  background: #f5f5f3;
  color: var(--pd-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
}

.pd-carousel-btn svg { width: 24px; height: 24px; }
.pd-carousel-btn:hover { background: var(--pd-lime); border-color: var(--pd-lime); }
.pd-carousel-btn:disabled { opacity: 0.35; cursor: default; background: #f5f5f3; border-color: rgba(2,23,23,0.10); }

/* 293:1799 / 293:1800 / 293:1801 — page bullets, 30px after the arrows */
.pd-dots {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 30px;
}

.pd-dot {
  width: 13px;
  height: 13px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(2, 23, 23, 0.14);
  cursor: pointer;
  position: relative;
  transition: width 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              height 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.32s ease, box-shadow 0.32s ease;
}

.pd-dot:hover { background: rgba(2, 23, 23, 0.28); }

.pd-dot.is-active {
  width: 17px;
  height: 17px;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--pd-ink);
}

.pd-dot.is-active::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pd-ink);
}

/* ══════════════════════════════════════════════════════
   GROW — 307:1804  (#080808)
══════════════════════════════════════════════════════ */
.pd-grow {
  margin-top: 141px;            /* carousel end 4088 → band 4229 */
  background: #080808;
  padding: 179px var(--pd-g60) 408px;   /* heading 4408, cards end 5978, band 6386 */
}

/* 307:1802 — 64 / 116% / Medium / #fefdfa / centre */
.pd-grow-heading {
  margin: 0 auto;
  max-width: 656px;
  font-family: 'Host Grotesk', sans-serif;
  font-size: clamp(32px, 4.45vw, 64px);
  font-weight: 500;
  line-height: 1.16;
  text-transform: capitalize;
  text-align: center;
  color: var(--pd-paper);
}

/* 307:1803 — 20 / 116% / Light */
.pd-grow-sub {
  margin: 40px auto 0;          /* heading bottom 4556 → sub 4596 */
  max-width: 514px;
  font-family: 'Host Grotesk', sans-serif;
  font-size: clamp(16px, 1.39vw, 20px);
  font-weight: 300;
  line-height: 1.16;
  text-align: center;
  color: var(--pd-paper);
}

.pd-step-grid {
  margin-top: 104px;            /* sub bottom 4642 → cards 4746 */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 56px;               /* pitch 424 − 384, and 747 − 691 */
}

/* 307:1805 — 631 × 384, r38, #131312 */
.pd-step {
  position: relative;
  min-height: 384px;
  border-radius: 38px;
  background: #131312;
  padding: 49px;                /* number at y 4773 of a card starting 4746 */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 310:1810 — 96 / Light / rgba(255,255,255,0.16), sits top-right */
.pd-step-num {
  align-self: flex-end;
  font-family: 'Host Grotesk', sans-serif;
  font-size: clamp(56px, 6.67vw, 96px);
  font-weight: 300;
  line-height: 1.16;
  color: rgba(255, 255, 255, 0.16);
  text-transform: capitalize;
}

/* 310:1811 — 24 / 116% / #fefdfa */
.pd-step-title {
  margin: auto 0 0;             /* pinned to the bottom, as in the frame */
  font-family: 'Host Grotesk', sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.16;
  text-transform: capitalize;
  color: var(--pd-paper);
}

/* 310:1812 — 16 / 116% / Light / rgba(254,253,250,0.28) */
.pd-step-copy {
  margin: 19px 0 0;             /* title 4999 → copy 5046, minus the line box */
  font-family: 'Host Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.16;
  color: rgba(254, 253, 250, 0.28);
}

/* 310:1825 — the sixth tile is a statement, not a step */
.pd-step--close { justify-content: flex-end; }

.pd-step-close {
  margin: 0;
  max-width: 380px;
  font-family: 'Host Grotesk', sans-serif;
  font-size: clamp(24px, 2.22vw, 32px);
  font-weight: 300;
  line-height: 1.16;
  text-transform: capitalize;
  color: var(--pd-paper);
}

/* 310:1832 — 224 × 245 at (1126, 5616), i.e. (379, 22) inside the tile */
.pd-step-close-icon {
  position: absolute;
  left: 60.06%;                 /* 379 / 631 */
  top: 22px;
  width: 35.5%;                 /* 224 / 631 */
  max-width: 224px;
  aspect-ratio: 224 / 245;
  display: block;
  pointer-events: none;
}

.pd-step-close-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ══════════════════════════════════════════════════════
   APP — 314:1883 panel  (#e6e6e6, r22)
══════════════════════════════════════════════════════ */
.pd-app {
  position: relative;
  z-index: 1;
  background: #ffffff;
  padding: 204px var(--pd-g60) 108px;   /* 6386 → 6590, panel ends 7273, contact 7381 */
}

.pd-app-panel {
  position: relative;
  border-radius: 22px;
  background: #e6e6e6;
  min-height: 683px;
  padding: 106px 49px 60px;     /* heading at 6696 of a panel starting 6590 */
  display: block;
}

/* 314:1884 — 48 / 116% / Light / #021717, w 590 */
.pd-app-heading {
  margin: 0;
  max-width: 590px;
  font-family: 'Host Grotesk', sans-serif;
  font-size: clamp(28px, 3.334vw, 48px);
  font-weight: 300;
  line-height: 1.16;
  text-transform: capitalize;
  color: var(--pd-ink);
}

/* 314:1887 / 314:1889 — 241 × 72 and 242 × 73, at y 7118 */
.pd-stores {
  margin-top: 310px;            /* heading bottom 6808 → badges 7118 */
  margin-left: 9px;             /* heading 109, badges 118 */
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.pd-store {
  display: block;
  height: 72px;
  transition: transform 0.22s ease, opacity 0.22s ease;
}

.pd-store img { display: block; height: 100%; width: auto; }
.pd-store:hover { transform: translateY(-2px); opacity: 0.92; }

/* 312:1882 — 799 × 1155, breaks out of the panel top */
.pd-app-copy { position: relative; z-index: 2; max-width: min(590px, 54%); }

/* 312:1882 — 799 x 1155 at (705, 6118), bottom-aligned to the panel.
   Percentages are of the 1318px panel so the whole composition scales
   as one piece and the 472px overhang stays proportional. */
/* 312:1882 is a 799 × 1155 CROP WINDOW over the landscape mockup, not a
   portrait image. Figma reports the fill as
       w 250.31%   h 115.45%   left -80.73%   top -0.02%
   of that window, i.e. `3d-phone-mockup.png` (4096 × 2731) blown up to
   2000 × 1333 and slid 645px left, so the middle phone-on-podium fills the
   tall slot. Sizing the file itself to `aspect-ratio: 799/1155` +
   `object-fit: contain` — which is what this was — letterboxes the whole
   landscape shot inside the portrait box: a tiny phone with dead space
   above and below it. `height: auto` on the fill keeps the source's own
   4096:2731 ratio, so the 115.45% falls out on its own and nothing is
   stretched at any width. */
.pd-app-phone {
  position: absolute;
  left: 48.94%;                 /* (705 - 60) / 1318 */
  bottom: 0;                    /* phone bottom 7273 = panel bottom */
  width: 60.62%;                /* 799 / 1318 */
  aspect-ratio: 799 / 1155;     /* the window, not the file */
  overflow: hidden;             /* this is the crop */
  z-index: 1;
  pointer-events: none;
}
.pd-app-phone img {
  position: absolute;
  left: -80.73%;
  top: -0.02%;
  display: block;
  width: 250.31%;
  height: auto;
  max-width: none;
}

/* the shared components adopt this page's rhythm so every band lines up */
.product-page .contact-section,
.product-page .faq-section { padding-left: var(--pd-g60); padding-right: var(--pd-g60); }
.product-page .contact-container { max-width: none; }

/* ══════════════════════════════════════════════════════
   PRODUCT — RESPONSIVE
══════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
  .pd-core { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .pd-core-list { max-width: 429px; }
  .pd-svc { flex: 0 0 560px; width: 560px; height: 400px; }
  .pd-svc-title { top: auto; bottom: 40px; }
  .pd-stores { margin-top: clamp(120px, 21vw, 310px); }
}

@media (max-width: 900px) {
  /* under 900 the phone can no longer overhang without crowding the copy,
     so the panel falls back to a plain stack: copy, then artwork */
  .pd-app-panel { padding-bottom: 0; }
  .pd-app-copy { max-width: none; }
  .pd-stores { margin-top: 40px; }
  .pd-app-phone {
    position: relative;         /* still the crop window */
    left: auto;                 /* the base 48.94% would offset it here */
    bottom: auto;
    width: 100%;
    max-width: 420px;
    margin: 24px auto 0;
  }
}

@media (max-width: 1024px) {
  .product-page {
    --pd-g83: var(--pv-gutter); --pd-g121: var(--pv-gutter); --pd-g60: var(--pv-gutter); --pd-g124: var(--pv-gutter);
  }
  .pd-intro { padding-top: 96px; padding-bottom: 110px; }
  .pd-core { padding-top: 96px; padding-bottom: 110px; }
  .pd-services { padding-top: 130px; }
  .pd-carousel { margin-top: 72px; }
  .pd-carousel-nav { padding-left: var(--pd-g60); padding-right: var(--pd-g60); margin-top: 40px; }
  .pd-grow { margin-top: 130px; padding-top: 96px; padding-bottom: 110px; }
  .pd-step-grid { margin-top: 64px; }
  .pd-app { padding-top: 110px; }
}

@media (max-width: 860px) {
  .pd-hero { justify-content: flex-start; }
  .pd-hero-content { align-items: flex-start; text-align: left; width: 100%; }
  .pd-step-grid { grid-template-columns: minmax(0, 1fr); }
  .pd-svc { flex: 0 0 78vw; width: 78vw; height: 360px; }
  .pd-app-panel { padding: 56px 28px; }
}

@media (max-width: 560px) {
  .product-page {
    --pd-g83: var(--pv-gutter); --pd-g121: var(--pv-gutter); --pd-g60: var(--pv-gutter); --pd-g124: var(--pv-gutter);
  }
  .pd-intro { border-radius: 20px; padding-top: 72px; padding-bottom: 80px; }
  .pd-core { padding-top: 72px; padding-bottom: 80px; }
  .pd-services { padding-top: 90px; }
  .pd-grow { margin-top: 90px; padding-top: 72px; padding-bottom: 80px; }
  .pd-app { padding-top: 80px; padding-bottom: 72px; }

  .pd-tag { height: 44px; gap: 16px; padding: 0 14px; }
  .pd-tag-label { font-size: 13px; }
  .pd-pill { min-width: 0; height: 58px; font-size: 15px; }

  /* the lime card is absolutely positioned at 1440 — reflow it on a phone */
  .pd-fn { height: auto; padding: 22px 20px 24px; }
  .pd-fn-num { font-size: 96px; left: 8%; top: 0; }
  .pd-fn-icon { position: static; width: 100%; height: 120px; justify-content: flex-start; }
  .pd-fn-title { position: static; width: 100%; margin-top: 14px; font-size: 17px; }

  .pd-svc { flex: 0 0 84vw; width: 84vw; height: 320px; border-radius: 22px; }
  .pd-svc-title { left: 24px; bottom: 26px; max-width: calc(100% - 48px); }
  .pd-svc-tag { left: 24px; top: 24px; }

  .pd-step { min-height: 0; padding: 28px; border-radius: 26px; }
  .pd-step-close-icon { width: 120px; height: 130px; right: 16px; bottom: 16px; }

  .pd-carousel-btn { width: 56px; height: 56px; }
  .pd-store { height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .pd-carousel-track,
  .pd-hero-cta,
  .pd-store,
  .pd-carousel-btn { transition-duration: 0.01ms !important; }
}


/* ══════════════════════════════════════════════════════
   PRODUCT — APP PANEL, STACKED MODE (last word on ≤900)
══════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .pd-app-panel {
    min-height: 0;
    padding: clamp(36px, 7vw, 56px) clamp(20px, 5vw, 40px) clamp(28px, 5vw, 44px);
  }
  .pd-app-copy { max-width: none; }
  .pd-stores { margin-top: clamp(28px, 6vw, 44px); gap: 14px; }
  .pd-store { height: clamp(52px, 14vw, 66px); }
  .pd-app-phone {
    position: relative;         /* still the crop window */
    left: auto;                 /* the base 48.94% would offset it here */
    bottom: auto;
    width: 100%;
    max-width: clamp(300px, 92vw, 460px);
    margin: clamp(16px, 4vw, 32px) auto 0;
  }
}

@media (max-width: 420px) {
  .pd-stores { flex-wrap: wrap; gap: 10px; }
  .pd-store { height: clamp(36px, 12vw, 50px); }
  /* the Figma pills are fixed-width; below 360 they have to give */
  .pd-tag, .pd-pill { min-width: 0; max-width: 100%; }
  .pd-tag-label, .pd-pill { white-space: normal; }
}