/* ============================================================
   SmartPayz — Product page (v1 design) styles.  pd-* family.
   Loaded ONLY on the Products page, printed AFTER smartpayz.css
   (priority 1000002) so it wins equal-specificity ties.
   Kept out of smartpayz.css because that file is regenerated by
   the Vite `npm run build:wp` — edits there would be wiped.
   Reuses from smartpayz.css: .pp-reveal system (+ .pp-d1..4),
   .section-dark, .marquee, .final-cta, .why-cta, sp-modal (#contact).
   ============================================================ */

/* ---------- Section shells ---------- */
.pd-section{position:relative;z-index:2;background:var(--bg);padding:12vh 5vw}
/* the marquee now opens this section directly under the dark Analytics band —
   no top gap before it */
#integrations{padding-top:0}
.pd-inner{max-width:1180px;margin:0 auto}
.pd-inner--narrow{max-width:900px}
.pd-center{text-align:center}
.pd-kicker-gap{margin-bottom:.6rem}
.pd-sub{max-width:960px;margin:.9rem auto 0;text-align:center;color:var(--fg);
  font-size:clamp(1.1rem,1.45vw,1.45rem);line-height:1.67}
.pd-phone-caption p,.pd-cat p{color:var(--fg)}
/* Accent lines carry one continuous navy→blue gradient across the whole
   sentence (the design's "plain navy start" is just the gradient's dark end). */
.pd-accent-line{display:block;width:fit-content;margin:2.2rem auto 0;text-align:center;
  font-weight:700;font-size:clamp(1.6rem,2.67vw,2.5rem);
  background:linear-gradient(90deg,#03005c 12%,#1864ff 58%,#5ac8ff 92%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pd-accent-line .pd-grad{background:none}

/* Dark band base — .pd-dark also flips the shell nav (see smartpayz-ui.js) */
.pd-dark{background:linear-gradient(200deg,#5ac8ff,#1864ff 20%,#03005c);overflow:hidden}

/* ---------- 1. Hero ---------- */
.pd-hero{position:relative;z-index:2;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  justify-content:space-between;align-items:center;overflow:hidden;
  background:#03005c;padding:clamp(84px,12vh,140px) 5vw clamp(48px,8vh,84px)}
/* The video/scrim code block's wrapper must not join the hero flex layout —
   with it out of flow, space-between puts the title top and tagline bottom. */
.pd-hero > .ct-code-block{display:contents}
/* .pd-video's generic height:auto loses to this pair selector — the hero
   video must always COVER the full 100vh section at any aspect ratio */
.pd-hero-video.pd-video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;filter:contrast(1.5)}
/* Design treatment: blue tint over the whole video + darkening vignette. */
.pd-hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 75% 66% at 50% 46%,rgba(3,0,92,0) 42%,rgba(4,2,104,.42) 78%,rgba(5,3,116,.66) 100%),
    linear-gradient(180deg,rgba(3,0,92,.4),rgba(24,28,190,.16) 28%,rgba(24,28,190,.16) 70%,rgba(3,0,92,.5))}
/* Soft-blur the edges only (masked backdrop blur), like the design's vignette. */
.pd-hero-scrim:before{content:'';position:absolute;inset:0;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  -webkit-mask-image:radial-gradient(ellipse 62% 56% at 50% 47%,transparent 55%,#000 96%);
  mask-image:radial-gradient(ellipse 62% 56% at 50% 47%,transparent 55%,#000 96%)}
.pd-hero-title{position:relative;z-index:2;color:#fff;text-align:center;
  font-size:clamp(1.9rem,2.64vw,2.6rem);font-weight:700;letter-spacing:-.02em;text-wrap:balance}
/* Design: the active nav item reads light blue on this page. */
.nav-menu .current-menu-item > a,.nav-menu .current_page_item > a{color:#5ac8ff}
.pd-hero-tag{position:relative;z-index:2;color:#fff;text-align:center;font-weight:600;
  font-size:clamp(1.3rem,2.29vw,2.1rem);letter-spacing:-.01em;max-width:1040px;text-wrap:balance}

/* ---------- 2. Intro strip ---------- */
.pd-strip{padding:9vh 5vw 4vh}
#orchestration{padding-top:5vh;overflow-x:clip}
.pd-strip-line{display:flex;align-items:center;justify-content:center;gap:1.1rem;flex-wrap:wrap}
.pd-strip-line p{font-size:clamp(1.3rem,2.4vw,2rem);font-weight:500;color:var(--fg);margin:0}
.pd-strip-line p strong{font-weight:700}
.pd-star{width:clamp(28px,3vw,44px);height:auto;flex:none}
.pd-star--sm{width:clamp(16px,1.6vw,24px);align-self:flex-start}
.in-view .pd-star{animation:pd-twinkle 2.6s ease-in-out infinite}
.in-view .pd-star--sm{animation-delay:.9s}
@keyframes pd-twinkle{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.82);opacity:.65}}
.pd-strip-cta{display:block;width:max-content;margin:5.5rem auto 0}
/* design's strip CTA gradient has no light sky third stop */
.pd-strip .final-cta{background:linear-gradient(90deg,#01069c,#285be1)}

/* ---------- Section headings ---------- */
/* Design: section headings carry a VERTICAL gradient — navy body fading to
   bright blue at the baseline/descenders (not the old horizontal sweep). */
/* NOTE: gradient-clipped text turns transparent wherever glyphs overflow the
   element box — descenders need the roomier line-height + bottom padding. */
.pd-h2{text-align:center;font-size:clamp(2rem,4vw,3.2rem);font-weight:700;letter-spacing:-.025em;
  line-height:1.22;padding-bottom:.08em;
  background:linear-gradient(180deg,#03005c 30%,#2f8bf7 125%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-wrap:balance}
.pd-dark .pd-h2,.pd-hero .pd-h2,.pd-ana .pd-h2{background:none;-webkit-text-fill-color:currentColor;color:#fff}

/* ---------- Oxygen wrapper handling ----------
   Oxygen renders each code block inside a .ct-code-block div; inside our
   grid/flex containers that wrapper must not participate in layout. */
.pd-pills > .ct-code-block,
.pd-cats > .ct-code-block,
.pd-hiw > .ct-code-block,
.pd-flip-grid > .ct-code-block,
.pd-strip-line > .ct-code-block{display:contents}

/* ---------- 3. Orchestration engine ---------- */
/* Full-bleed logo band per the design: the marquee sits ON the section's
   gradient (no white strip), arrow notch below. Logos keep the homepage
   treatment (grayscale + reduced opacity, color on hover) from smartpayz.css. */
/* now the first element of its section (moved ahead of the Integrations
   title) — the section's own top padding provides the gap, so no extra
   padding-top here */
.pd-orch-marquee{position:relative;width:100vw;max-width:none;
  margin:0 0 6.5rem calc(50% - 50vw);
  background:linear-gradient(180deg,rgba(226,232,250,0) 0%,#dde3f7 100%)}
/* smartpayz.css positions .marquee absolutely for the home-page hero;
   here it flows normally inside the gradient band. */
.pd-orch-marquee .marquee{position:static;width:100%;background:transparent;padding:1.7rem 0}
.pd-orch-marquee:after{content:'';position:absolute;left:50%;top:100%;
  transform:translateX(-50%);width:0;height:0;
  border:27px solid transparent;border-top:24px solid #dde3f7;border-bottom:0}
/* Logos slightly dimmed at rest (homepage uses .45), full color on hover. */
.pd-orch-marquee .marquee-logo{opacity:.7}
.pd-orch-marquee .marquee-logo:hover{opacity:1}
/* Hover-flip tile grid: replaces an earlier exploded 3D tile-stack per
   SmartPayz team feedback. Each tile is a plain front/back flip card — icon
   + title on the front, title + description on the back — using the same
   navy-gradient card look as .pd-hiw-card further down this page, so the
   two "row of icon tiles" moments on this page read as one visual family. */
.pd-flip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem;
  max-width:940px;margin:3.5rem auto 0}
.pd-flip-tile{position:relative;aspect-ratio:.82;cursor:pointer;outline:none;perspective:1400px}
.pd-flip-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.25,.75,.3,1)}
/* mouse hover, keyboard focus, and (via JS, on touch devices where :hover
   can't be relied on) a tap-toggled .is-flipped all do the same flip */
.pd-flip-tile:hover .pd-flip-inner,
.pd-flip-tile:focus-visible .pd-flip-inner,
.pd-flip-tile.is-flipped .pd-flip-inner{transform:rotateY(180deg)}
.pd-flip-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:24px;
  padding:2rem 1.3rem;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;color:#fff;
  background:linear-gradient(160deg,#3d6ff0,#0b1494 80%);box-shadow:0 22px 55px rgba(3,0,92,.28)}
.pd-flip-front img{height:60px;width:auto;margin-bottom:1.1rem;
  filter:drop-shadow(0 6px 14px rgba(3,0,92,.4))}
.pd-flip-front h3,.pd-flip-back h3{font-size:clamp(1.05rem,1.35vw,1.25rem);font-weight:700;margin:0}
.pd-flip-back{transform:rotateY(180deg)}
.pd-flip-back h3{margin-bottom:.6rem}
.pd-flip-back p{font-size:.82rem;line-height:1.5;color:rgba(255,255,255,.92);margin:0}

/* ---------- 4. Payment Flow ---------- */
.pd-pills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:1fr;gap:2.4rem 2.8rem;max-width:1180px;margin:3.5rem auto 0}
/* Rounded cards, all equal height (grid-auto-rows:1fr). The 3D icons are out
   of flow (absolute on the card's outer edge) so they influence neither the
   card height nor the text position; text padding is uniform across cards.
   Icons follow the cursor slightly (parallax vars set by product.js). */
.pd-pill{position:relative;display:flex;align-items:center;color:#fff;
  font-weight:700;font-size:clamp(1.2rem,1.88vw,1.75rem);
  padding:1.7rem 2rem 1.7rem 150px;border-radius:28px;height:100%;min-height:122px;
  background:linear-gradient(100deg,#4457e0,#1626b8 70%);
  box-shadow:0 18px 44px rgba(3,0,92,.24)}
.pd-pill img{position:absolute;left:-46px;top:50%;height:112px;width:auto;
  filter:drop-shadow(0 16px 26px rgba(3,0,92,.35));
  transform:translate(calc(var(--px,0)*9px),calc(-50% + var(--py,0)*9px));
  transition:transform .18s ease-out;will-change:transform}
.pd-pill--flip{padding:1.7rem 150px 1.7rem 2rem}
.pd-pill--flip img{left:auto;right:-46px}
/* the flow diagram is cropped to content; a touch larger so its thin
   multi-part drawing carries the same visual weight as the solid glyphs */
.pd-pills .pd-pill:first-child img{height:152px;left:-46px}
/* the person and document glyphs are solid blocks — slightly smaller to match */
.pd-pills .pd-pill:nth-child(3) img,
.pd-pills .pd-pill:nth-child(4) img{height:100px}
.pd-pill small{font-weight:500;opacity:.85}
.pd-phones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem;
  max-width:1080px;margin:4.5rem auto 0}
.pd-phone{text-align:center}
.pd-phone h3{font-size:clamp(1.05rem,1.6vw,1.3rem);font-weight:700;color:var(--fg);margin-bottom:1.2rem}
.pd-phone-media{position:relative;max-width:380px;margin:0 auto}
.pd-phone-media img,.pd-phone-media video{width:100%;height:auto;display:block}
/* dissolve the video rectangle's edges into the page background — the render's
   studio bg is 1 RGB point off var(--bg), so a soft page-color inner glow
   hides the frame boundary regardless of codec color drift */
/* feather the sides and bottom only — the phone reaches close to the top */
.pd-phone-media:after{content:'';position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 14px 0 12px -6px var(--bg),
    inset -14px 0 12px -6px var(--bg),
    inset 0 -14px 12px -6px var(--bg)}
/* Captions: large, left-aligned, connected to the phone by an elbow line.
   The connector SVG anchors to the media box (its positioned ancestor); the
   caption padding is computed from the same center so the terminal ring dot
   always sits beside the title at any desktop width. */
.pd-phone-caption{max-width:none;margin:2.4rem 0 0;text-align:left;
  padding-left:max(0px,calc(50% - 300px))}
.pd-phone-caption h4{font-size:clamp(1.7rem,2.5vw,2.3rem);font-weight:700;
  color:var(--fg);margin:0 0 .7rem;letter-spacing:-.02em}
/* both captions stay on one line on desktop widths */
@media (min-width:1101px){.pd-phone-caption h4{white-space:nowrap}}
.pd-phone-caption p{font-size:clamp(1.05rem,1.4vw,1.35rem);margin:0;
  line-height:1.55;max-width:34ch}
.pd-phones .pd-phone:last-child .pd-phone-caption{padding-left:0;
  padding-right:max(0px,calc(50% - 300px))}
.pd-phone-line{position:absolute;top:48px;left:-124px;pointer-events:none}
.pd-phones .pd-phone:last-child .pd-phone-line{left:auto;right:-124px}
@media (max-width:1100px){
  .pd-phone-line{display:none}
  .pd-phone-caption,.pd-phones .pd-phone:last-child .pd-phone-caption{
    max-width:360px;margin:1.6rem auto 0;padding:0;text-align:center}
  .pd-phone-caption h4{font-size:1.35rem}
  .pd-phone-caption p{font-size:1rem;max-width:none}
}

/* ---------- 5. Player Experience ---------- */
#player-experience{overflow-x:clip} /* the connector lines run off-screen */
.pd-px-grid{display:grid;grid-template-columns:1fr minmax(300px,420px) 1fr;gap:2.5rem;
  align-items:stretch;margin-top:5.5rem}
.pd-px-media{position:relative;border-radius:28px;overflow:hidden;background:#0a1178;box-shadow:0 30px 70px rgba(3,0,92,.3);align-self:center}
.pd-px-media video,.pd-px-media img{width:100%;height:auto;display:block}
/* two items per side, spread to the design's vertical rhythm */
.pd-px-col{display:flex;flex-direction:column;justify-content:space-between;
  padding:11% 0 10%}
/* keep both columns the same distance from the video */
.pd-px-col--left{align-items:flex-end}
.pd-px-item{position:relative;display:flex;flex-direction:column;gap:1.4rem;
  max-width:320px;align-items:flex-start;text-align:left}
.pd-px-item img{height:64px;width:auto}
.pd-px-item p{font-size:clamp(1.1rem,1.45vw,1.4rem);color:var(--fg);margin:0;
  line-height:1.66;max-width:28ch}
/* full-bleed connector: line from the screen edge to a ring dot beside the icon */
.pd-px-item:before{content:'';position:absolute;top:31px;height:2.5px;width:100vw;
  background:#1e2bb8}
.pd-px-item:after{content:'';position:absolute;top:22px;width:18px;height:18px;
  border-radius:50%;border:4px solid #1e2bb8;background:transparent}
.pd-px-col--left .pd-px-item:before{right:calc(100% + 44px)}
.pd-px-col--left .pd-px-item:after{left:-44px}
.pd-px-col--right .pd-px-item:before{left:calc(100% + 44px)}
.pd-px-col--right .pd-px-item:after{right:-44px}
.pd-px-outro{margin-top:5rem}
.pd-px-outro h3{text-align:center;font-size:clamp(1.5rem,2.6vw,2.35rem);font-weight:700;
  line-height:1.22;padding-bottom:.08em;
  background:linear-gradient(90deg,#03005c,#2f8bf7);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ---------- 6. Analytics & Visibility (dark band + beams) ---------- */
/* The design's background IS the bar render, full intensity: transparent bar
   tips blend into the page above, the image fades to #03015d navy at its
   bottom, and a solid navy layer continues below it (image height = 104.11vw
   at 100% width) for any extra section height. */
.pd-ana{position:relative;z-index:2;padding:clamp(10rem,17vw,16rem) 5vw 7rem;
  color:#fff;overflow:hidden;background:transparent}
.pd-ana .pd-h2{text-shadow:0 2px 28px rgba(3,0,92,.55)}
/* image offset up 12vw: crops most of the pale tip zone so the saturated
   blue reaches the title. A page-color blend at the very top softens the
   cropped bar tips on all widths, and a navy fade guarantees the section
   always ends dark like the design regardless of its height. */
.pd-ana-bars{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(180deg,var(--bg),rgba(245,245,247,0)) top/100% 120px no-repeat,
    linear-gradient(180deg,rgba(3,1,93,0),#03015d) bottom/100% 340px no-repeat,
    url('img/analytics-bg.webp') 50% -12vw/100% auto no-repeat,
    linear-gradient(#03015d,#03015d) 0 calc(92.11vw - 3px)/100% 8000px no-repeat}
/* neon circuit traces, top-left, with glow nodes traveling along them */
.pd-ana-circuit{position:absolute;left:0;top:clamp(40px,6vw,90px);z-index:1;
  pointer-events:none;
  filter:drop-shadow(0 0 5px rgba(160,225,255,.95)) drop-shadow(0 0 16px rgba(80,160,255,.65))}
.pd-ana-circuit--r{left:auto;right:0;transform:scaleX(-1)}
.pd-ana .pd-h2{position:relative;z-index:2}
.pd-ana-frame{position:relative;z-index:2;max-width:1180px;margin:4rem auto 0;border-radius:26px;
  overflow:hidden;border:1px solid rgba(127,208,255,.35);box-shadow:0 40px 90px rgba(2,4,40,.55);
  background:#0d1117}
.pd-ana-viewport{position:relative;width:100%;aspect-ratio:1440/860;overflow:hidden}
.pd-ana-viewport .pp-demo-frame{position:absolute;top:0;left:0;transform-origin:top left;border:0}
.pd-ana-copy{position:relative;z-index:2;max-width:920px;margin:4rem auto 0;text-align:center}
.pd-ana-copy p{color:#fff;font-size:clamp(1.05rem,1.44vw,1.4rem);line-height:1.67}
.pd-ana-copy strong{color:#fff}

/* ---------- 7. Integrations ---------- */
.pd-int-video{position:relative;max-width:1020px;margin:3.5rem auto 0;border-radius:28px;
  overflow:hidden;box-shadow:0 30px 70px rgba(3,0,92,.28)}
.pd-int-video video{width:100%;height:auto;display:block;filter:contrast(1.5)}
/* hero-style tint + vignette (no edge blur) */
.pd-int-video:after{content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 75% 66% at 50% 46%,rgba(3,0,92,0) 42%,rgba(4,2,104,.42) 78%,rgba(5,3,116,.66) 100%),
    linear-gradient(180deg,rgba(3,0,92,.4),rgba(24,28,190,.16) 28%,rgba(24,28,190,.16) 70%,rgba(3,0,92,.5))}
.pd-cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2.2rem;
  max-width:1180px;margin:4.5rem auto 0}
.pd-cat{text-align:center}
.pd-cat img{height:72px;width:auto;margin-bottom:1rem}
.pd-cat h3{font-size:clamp(1.35rem,1.81vw,1.7rem);font-weight:700;color:var(--fg);margin:0 0 .4rem}
.pd-cat p{font-size:.75rem;line-height:1.5;margin:0}

/* ---------- 8. How it works ---------- */
#how-it-works{padding-top:0} /* continuation of the integrations section */
.pd-hiw-badge{display:block;width:max-content;margin:0 auto 3.5rem;color:#fff;font-weight:700;
  font-size:clamp(1.4rem,2.29vw,2.15rem);padding:1.2rem 5.6rem;border-radius:999px;
  background:linear-gradient(100deg,#101a9e,#4457e0)}
.pd-hiw{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7rem;max-width:1180px;margin:0 auto}
/* arrow connectors between the cards (dot → 45° rise → arrowhead);
   they sit BEHIND the cards so the dots show only their outer half */
.pd-hiw-link{position:absolute;top:-8px;pointer-events:none;z-index:0}
.pd-hiw-card{position:relative;z-index:1}
.pd-hiw-link--1{left:calc(33.333% - 83px)}
.pd-hiw-link--2{left:calc(66.666% - 45px)}
.pd-hiw-card{border-radius:26px;padding:3.1rem 1.8rem 2.6rem;text-align:center;color:#fff;
  background:linear-gradient(160deg,#3d6ff0,#0b1494 80%);box-shadow:0 22px 55px rgba(3,0,92,.28)}
.pd-hiw-card img{height:88px;width:auto;margin-bottom:1.4rem}
.pd-hiw-card h3{color:#fff;font-size:clamp(1.35rem,1.74vw,1.65rem);font-weight:700;margin:0 0 .6rem;line-height:1.17}
.pd-hiw-card p{color:rgba(255,255,255,.96);font-size:.78rem;margin:0;line-height:1.5}

/* ---------- 10. Final CTA ---------- */
.pd-final{padding:9vh 5vw 12vh}
/* design: the whole headline carries one horizontal navy→blue gradient */
.pd-final-h{text-align:center;font-size:clamp(1.8rem,2.67vw,2.5rem);font-weight:700;
  width:fit-content;margin-inline:auto;line-height:1.22;padding-bottom:.08em;
  background:linear-gradient(90deg,#03005c 5%,#2661b4 55%,#4696e6 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pd-final-h .pd-grad{background:none}
.pd-final-h .pd-grad{background:linear-gradient(90deg,#2f8bf7,#1654d0);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pd-final-sub{text-align:center;max-width:690px;margin:1.4rem auto 2.8rem;
  color:#03005c;font-size:clamp(1.1rem,1.39vw,1.35rem);line-height:1.62}
.pd-final-cta{display:block;width:max-content;margin:0 auto;background:#ea3461;color:#fff;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:clamp(1.05rem,1.39vw,1.3rem);
  padding:1.05rem 2.8rem;border-radius:999px;text-decoration:none;
  box-shadow:0 16px 40px rgba(234,52,97,.35);transition:transform .25s ease,box-shadow .25s ease}
.pd-final-cta:hover{transform:translateY(-2px);box-shadow:0 22px 52px rgba(234,52,97,.45)}

/* ---------- Video base ---------- */
.pd-video{width:100%;height:auto;display:block}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .pd-flip-grid{grid-template-columns:repeat(2,1fr);max-width:500px}
  /* two items side by side above the video, the other two below it */
  .pd-px-grid{grid-template-columns:1fr}
  .pd-px-media{grid-column:auto;max-width:380px;margin:0 auto}
  .pd-px-item:before,.pd-px-item:after{display:none}
  .pd-px-item img{height:56px}
  .pd-px-col{flex-direction:row;padding:0;gap:2rem;justify-content:center}
  .pd-px-item{flex:1;max-width:none}
  .pd-cats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pd-hiw{grid-template-columns:1fr;max-width:520px;gap:2.4rem}
  .pd-hiw-link{display:none}
}
@media (max-width:768px){
  .pd-flip-grid{grid-template-columns:repeat(2,1fr);max-width:420px;gap:1.2rem}
  .pd-section{padding:9vh 6vw}
  .pd-pills{grid-template-columns:1fr;gap:2.6rem}
  .pd-pill{padding:1.4rem 1.6rem 1.4rem 108px;min-height:104px}
  .pd-pill img{height:96px;left:-26px}
  .pd-pill--flip{padding:1.4rem 108px 1.4rem 1.6rem}
  .pd-pill--flip img{left:auto;right:-26px}
  .pd-pills .pd-pill:first-child img{height:110px;left:-34px}
  .pd-phones{grid-template-columns:1fr;gap:3.5rem}
  .pd-px-col{gap:1.6rem}
  .pd-ana{padding:16vw 6vw 9vh}
  .pd-ana-circuit{display:none}
  .pd-ana-frame{border-radius:14px}
}
@media (max-width:480px){
  .pd-flip-grid{grid-template-columns:1fr;max-width:240px}
  .pd-flip-tile{aspect-ratio:1.3}
  .pd-cats{grid-template-columns:1fr}
  .pd-px-item{max-width:100%}
  .pd-final-cta{width:100%;max-width:320px;text-align:center}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .pd-flip-inner{transition:none}
  .in-view .pd-star{animation:none!important}
  .pd-ana-mover{display:none}
}