/* ============================================================================
   product-outcomes.css — shared product-page additions (loaded globally like
   product-tablet.css / product-logos.css). Adds:
     - .pt-cta-row + .pt-cta-2  (hero secondary CTA)
     - .po-*  ("what you get" + "what changes" sections)
   Uses the per-page accent that the hero partial cascades as --pt-accent.
   Existing tokens / motion only. RTL-first.
   ============================================================================ */

/* ---- Hero CTA row + secondary CTA ---- */
.pt-cta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .8rem; }
.pt-cta-row > .pt-cta { margin-top: 0; }
/* The 3 hero CTAs are wide; in one row they only fit above ~1200px, so from there
   down they wrapped to a scattered 2+1. Below 1100px stack them as a tidy centred
   column (each full-width up to 24rem) so they read as one grouped set. */
@media (max-width: 1100px) {
  .pt-cta-row { flex-direction: column; align-items: center; gap: .7rem; }
  .pt-cta-row > .pt-cta { width: 100%; max-width: 24rem; justify-content: center; }
}
.pt-cta-2 {
  background: color-mix(in srgb, var(--pt-accent, var(--accent-cyan)) 13%, transparent) !important;
  color: var(--pt-accent, var(--accent-cyan)) !important;
  border: 1.5px solid color-mix(in srgb, var(--pt-accent, var(--accent-cyan)) 48%, transparent) !important;
  box-shadow: none !important; animation: ptCta2Glow 3s ease-in-out infinite !important;
}
@keyframes ptCta2Glow { 0%,100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 22px -4px var(--pt-glow, rgba(34,211,238,.5)); } }
.pt-cta-2 i { color: var(--pt-accent, var(--accent-cyan)); }
/* play icon AFTER the text, pointing left, with a nudge on hover */
.pt-cta-2-play { transform: scaleX(-1); transition: transform .25s; }
.pt-cta-2:hover { color: #fff !important; background: linear-gradient(135deg, var(--pt-grad-from, var(--accent-cyan)), var(--pt-grad-to, #67e8f9)) !important; border-color: transparent !important; transform: translateY(-3px) scale(1.03); }
.pt-cta-2:hover i { color: #fff; }
.pt-cta-2:hover .pt-cta-2-play { transform: scaleX(-1) translateX(5px); }

/* ---- Shared section frame ---- */
.po { position: relative; max-width: 1140px; margin-inline: auto; padding: 4.5rem 1.5rem; }
.po-head { text-align: center; max-width: 760px; margin: 0 auto 2.6rem; }
.po-label {
  display: inline-block; font-family: var(--font-display); font-weight: 600; font-size: .8rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--pt-accent, var(--accent-cyan)); margin-bottom: .9rem;
  padding: .3rem .9rem; border-radius: 12px;
  background: color-mix(in srgb, var(--pt-accent, var(--accent-cyan)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--pt-accent, var(--accent-cyan)) 28%, transparent);
}
.po-h2 { font-family: var(--font-display); font-weight: 700; line-height: 1.2; font-size: clamp(1.6rem, 3.2vw, 2.4rem); color: var(--heading-color); margin: 0; letter-spacing: -.01em; }

/* ---- What you get (4 cards) ---- */
.po-gets-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.po-card {
  position: relative; padding: 1.7rem 1.4rem; border-radius: 18px; overflow: hidden;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  transition: transform .3s, border-color .3s, box-shadow .3s;
}
.po-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--pt-accent, var(--accent-cyan)); opacity: .85; }
.po-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--pt-accent, var(--accent-cyan)) 45%, transparent); box-shadow: 0 16px 40px rgba(0,0,0,.28), 0 0 26px color-mix(in srgb, var(--pt-accent, var(--accent-cyan)) 16%, transparent); }
.po-card-ic { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; font-size: 1.2rem; margin-bottom: .9rem;
  color: var(--pt-accent, var(--accent-cyan)); background: color-mix(in srgb, var(--pt-accent, var(--accent-cyan)) 14%, transparent); border: 1px solid color-mix(in srgb, var(--pt-accent, var(--accent-cyan)) 26%, transparent); }
.po-card-title { font-family: var(--font-display); font-weight: 700; font-size: 1.14rem; color: var(--heading-color); margin: 0 0 .5rem; line-height: 1.3; }
.po-card-desc { font-size: .94rem; color: var(--text-secondary); line-height: 1.55; margin: 0; }

/* ---- What changes (up to 4 outcomes) ---- */
.po-changes-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; max-width: 920px; margin: 0 auto; }
.po-change { display: flex; align-items: flex-start; gap: 1rem; padding: 1.5rem 1.5rem; border-radius: 16px; background: var(--glass-bg); border: 1px solid var(--glass-border); }
.po-change-num { flex-shrink: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1;
  color: var(--pt-accent, var(--accent-cyan)); background: color-mix(in srgb, var(--pt-accent, var(--accent-cyan)) 12%, transparent);
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; }
.po-change-title { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; color: var(--heading-color); margin: 0 0 .35rem; }
.po-change-desc { font-size: .94rem; color: var(--text-secondary); line-height: 1.55; margin: 0; }

@media (max-width: 920px) {
  .po-gets-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .po { padding: 3.2rem 1.1rem; }
  .po-gets-grid { grid-template-columns: 1fr; }
  .po-changes-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   SHARED product-page refinements — all families via [class*=...]; matches the
   home-page language. Uses the page accent vars (--pt-accent/grad-from/to/glow).
   ============================================================================ */
/* (6) remove the faint "cut" line between feature rows */
[class*="-feature-left"], [class*="-feature-right"] { border-top: none !important; }
/* (5) breathing room between rows + top-align so the number sits at the robot's head */
[class*="-feature-left"], [class*="-feature-right"] { align-items: start !important; padding-block: 3.4rem !important; min-height: 0 !important; }
[class*="-feature-media"] { align-self: center; }
/* (7) feature number → clean accent badge instead of a giant faint number */
[class*="-feature-num"] {
  font-family: var(--font-display) !important; font-weight: 800 !important; font-size: 1.25rem !important; line-height: 1 !important;
  -webkit-text-fill-color: #fff !important; color: #fff !important; opacity: 1 !important; position: static !important;
  display: inline-grid !important; place-items: center !important; width: 54px !important; height: 54px !important;
  border-radius: 16px !important; margin: 0 0 1.2rem !important; -webkit-background-clip: border-box !important;
  background: linear-gradient(135deg, var(--pt-grad-from, var(--accent-cyan)), var(--pt-grad-to, #67e8f9)) !important;
  box-shadow: 0 10px 26px var(--pt-glow, rgba(34,211,238,.4)) !important;
  /* sequential colour-in: the badges rest greyed-out and light up in the page
     accent one-by-one as each step scrolls into view (JS toggles .is-lit). */
  transition: filter .6s ease, transform .6s ease, box-shadow .6s ease !important;
  filter: grayscale(1) opacity(.45) !important;
}
[class*="-feature-num"].is-lit {
  filter: grayscale(0) opacity(1) !important;
  transform: translateY(-3px) scale(1.18);   /* light up AND grow when it's this step's turn */
  box-shadow: 0 16px 34px var(--pt-glow, rgba(34,211,238,.55)) !important;
}
/* JS disabled / reduced motion → show every number fully coloured, no animation */
[class*="-no-motion"] [class*="-feature-num"] { filter: none !important; transition: none !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  [class*="-feature-num"] { filter: none !important; transition: none !important; }
}
/* (4) phone-side text aligns to the top of the phone + glowing heading */
[class*="-phone-wrap"] { align-items: start !important; }
[class*="-phone-narrative"] { padding-top: .4rem; }
[class*="-phone-narrative"] h2 { text-shadow: 0 0 26px var(--pt-glow, rgba(34,211,238,.45)); }
/* (4c) phone ACCENT (glow / aura / bullets / section wash) follows the page accent
   vars on EVERY product page — it was hardcoded in each page's own CSS, so a theme
   change (or a stale-cached page) didn't reach the phone area / its glow. */
[class*="-iphone"]:not([class*="-iphone-"]) {
  box-shadow: 0 0 0 2px #1f1f1f, 0 0 0 4px #050505, 0 40px 80px rgba(0,0,0,.6),
              0 0 80px var(--pt-glow, rgba(34,211,238,.20)) !important;
}
[class*="-iphone"]:not([class*="-iphone-"])::before {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--pt-grad-from, var(--accent-cyan)) 42%, transparent),
    color-mix(in srgb, var(--pt-grad-to,   var(--accent-cyan)) 42%, transparent)) !important;
}
[class*="-phone-bullets"] li::before {
  background: linear-gradient(135deg, var(--pt-grad-from, var(--accent-cyan)), var(--pt-grad-to, var(--accent-cyan))) !important;
}
[class*="-phone-section"] {
  background:
    radial-gradient(ellipse at 30% 30%, color-mix(in srgb, var(--pt-grad-from, var(--accent-cyan)) 7%, transparent) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 70%, color-mix(in srgb, var(--pt-grad-to, var(--accent-cyan)) 5%, transparent) 0%, transparent 55%) !important;
}
/* (4b) tighten the gap between the phone section and the features/steps so they
   read as one continuous flow, not two separate "pages" (user request). The phone
   section used ~4rem bottom + the features ~6rem top padding = a ~10rem chasm.
   Scoped to the 12 product namespaces explicitly (this CSS loads site-wide, so a
   broad [class*="-features"] would also hit aw-/cl-/service- sections elsewhere). */
.ecom-phone-section, .bseo-phone-section, .lp-phone-section, .rwa-phone-section,
.va-phone-section, .wfb-phone-section, .aeo-phone-section, .mstudio-phone-section,
.bagent-phone-section, .gads-phone-section, .mads-phone-section, .anlt-phone-section {
  padding-bottom: 1.5rem !important;
}
.ecom-features, .bseo-features, .lp-features, .rwa-features,
.va-features, .wfb-features, .aeo-features, .mstudio-features,
.bagent-features, .gads-features, .mads-features, .anlt-features {
  padding-top: 2.5rem !important;
}
/* (8) section labels → home glow-button look (filled tint + accent border) */
[class*="-section-label"] {
  background: color-mix(in srgb, var(--pt-accent, var(--accent-cyan)) 13%, transparent) !important;
  border: 1.5px solid color-mix(in srgb, var(--pt-accent, var(--accent-cyan)) 40%, transparent) !important;
  color: var(--pt-accent, var(--accent-cyan)) !important;
}
/* (8) proof "cubes" → home-cube hover (lift + glow) */
[class*="-proof-card"] { transition: transform .3s, box-shadow .3s, border-color .3s !important; }
[class*="-proof-card"]:hover { transform: translateY(-6px) scale(1.02) !important; box-shadow: 0 20px 46px rgba(0,0,0,.32), 0 0 30px var(--pt-glow, rgba(34,211,238,.25)) !important; }

/* ============================================================================
   MOTION PASS (added 2026-06-29) — all 12 product pages.
   Mirrors the home page: heading "buttons" glow + sheen, cards float,
   primary CTAs drift + glow-pulse. Reduced-motion turns it all off (bottom).
   ============================================================================ */

/* (A) every heading label-pill → home glow-button look: pulsing glow + moving sheen.
   Targets per-page section labels, the "what you get / what changes" labels, and
   the hero eyebrow. (Colours/tints already set above + in product-tablet.css.) */
[class*="-section-label"], .po-label, .pt-eyebrow {
  position: relative; overflow: hidden; isolation: isolate;
  animation: poLabelGlow 3.6s ease-in-out infinite;
}
[class*="-section-label"]::after, .po-label::after, .pt-eyebrow::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; pointer-events: none;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.42) 50%, transparent 100%);
  transform: skewX(-18deg); animation: poSheen 4.8s ease-in-out infinite;
}
@keyframes poLabelGlow { 0%,100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 20px -3px var(--pt-glow, rgba(34,211,238,.55)); } }
@keyframes poSheen     { 0% { left: -60%; } 55%,100% { left: 130%; } }

/* (B) "what you get" cards gently float on their own (staggered so they don't bob in unison). */
@keyframes poCardFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.po-card { animation: poCardFloat 4s ease-in-out infinite; will-change: transform; }
.po-card:nth-child(2) { animation-delay: -1.0s; animation-duration: 4.4s; }
.po-card:nth-child(3) { animation-delay: -2.1s; animation-duration: 3.8s; }
.po-card:nth-child(4) { animation-delay: -3.0s; animation-duration: 4.2s; }
.po-card:hover { animation-play-state: paused; }

/* (C) primary CTAs — the final big CTA + the secondary "open dashboard" button —
   pulse their GLOW only (NO positional drift). They used to wander R/L/U/D, which made
   them a moving target and snapped on hover ("the button gets stuck" — user). A glow-only
   pulse keeps them alive while staying put, so they're easy + pleasant to click. */
@keyframes poCtaGlow {
  0%,100% { box-shadow: 0 12px 30px -10px var(--pt-glow, rgba(34,211,238,.5)),  inset 0 1px 0 rgba(255,255,255,.2); }
  50%     { box-shadow: 0 18px 46px -8px  var(--pt-glow, rgba(34,211,238,.62)), inset 0 1px 0 rgba(255,255,255,.2); }
}
.pt-cta-2 { animation: poCtaGlow 3.2s ease-in-out infinite; }
.pt-cta-2:hover { animation: none; }
/* bottom CTA → a gentle, continuous "heartbeat" zoom in/out (centre-scale, so the
   click target never drifts). Replaces the earlier wild jiggle (user: "went crazy / bad UI"). */
[class*="-cta-xl"] { animation: poCtaPulse 1.5s ease-in-out infinite; }
[class*="-cta-xl"]:hover { filter: brightness(1.06) saturate(1.04); }  /* hover = a subtle brighten; the heartbeat keeps beating */

/* (D) raise the 4 steps a touch so the number badge sits on the robot's head line. */
/* centre the feature copy (number badge + heading + paragraph) in its column on EVERY
   product page and BOTH alternating sides. !important so it wins over any per-page or
   inherited edge-alignment (Hebrew reads better centred than jammed to a page edge) —
   this is what keeps the two alternating sides symmetric instead of one centred + one stuck. */
[class*="-feature-copy"] { margin-top: -1.4rem; text-align: center !important; }
[class*="-feature-copy"] p { margin-inline: auto !important; }

/* (E) "what you get" / "what changes" headings → exactly the home-page glow-button
   (same box shape + glow pulse + moving sheen as .hm-glow-btn); accent = page colour.
   The section label rides inside as the eyebrow, the H2 as the heading. */
.po-head-btn {
  --gb: var(--pt-accent, var(--accent-cyan));
  position: relative; overflow: hidden; isolation: isolate; display: block; width: fit-content;
  max-width: min(94%, 42rem); margin: 0 auto; cursor: default;
  padding: .7rem 1.8rem; border-radius: 12px;
  background: color-mix(in srgb, var(--gb) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--gb) 36%, transparent);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s, background .3s;
  animation: poLabelGlow 3.6s ease-in-out infinite;
}
.po-head-btn::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.4) 50%, transparent 100%);
  transform: skewX(-18deg); animation: poSheen 4.8s ease-in-out infinite;
}
.po-head-btn > * { position: relative; z-index: 1; }
.po-head-btn:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 14px 32px color-mix(in srgb, var(--gb) 30%, transparent); background: color-mix(in srgb, var(--gb) 18%, transparent); }
.po-head-btn-eyebrow { display: block; font-family: var(--font-display); font-weight: 600; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gb); margin-bottom: .35rem; }
.po-head-btn .po-h2 { margin: 0; }

/* (F) every cube at the bottom floats (not static): proof cubes + "what changes" cards
   (the "what you get" cards already float above). */
[class*="-proof-card"], .po-change { animation: poCardFloat 4s ease-in-out infinite; will-change: transform; }
[class*="-proof-card"]:nth-child(2), .po-change:nth-child(2) { animation-delay: -1.1s; animation-duration: 4.4s; }
[class*="-proof-card"]:nth-child(3), .po-change:nth-child(3) { animation-delay: -2.2s; animation-duration: 4.4s; }
.po-change:nth-child(4) { animation-delay: -3.3s; animation-duration: 4.4s; }
[class*="-proof-card"]:hover, .po-change:hover { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  [class*="-section-label"], .po-label, .pt-eyebrow, .po-card, .po-change, [class*="-proof-card"], .po-head-btn, .pt-cta, [class*="-cta-xl"] { animation: none !important; }
  [class*="-section-label"]::after, .po-label::after, .pt-eyebrow::after, .po-head-btn::after { display: none !important; }
}

/* bottom cubes: float MORE noticeably + give .po-change the SAME hover effect as the top .po-card cubes */
@keyframes poChangeFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
[class*="-proof-card"], .po-change { animation: poChangeFloat 4.4s ease-in-out infinite; }
[class*="-proof-card"]:nth-child(1), .po-change:nth-child(1) { animation-delay: 0s; animation-duration: 4.4s; }
[class*="-proof-card"]:nth-child(2), .po-change:nth-child(2) { animation-delay: -1.1s; animation-duration: 4.4s; }
[class*="-proof-card"]:nth-child(3), .po-change:nth-child(3) { animation-delay: -2.2s; animation-duration: 4.4s; }
[class*="-proof-card"]:nth-child(4), .po-change:nth-child(4) { animation-delay: -3.3s; animation-duration: 4.4s; }
.po-change:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--pt-accent, var(--accent-cyan)) 45%, transparent); box-shadow: 0 16px 40px rgba(0,0,0,.28), 0 0 26px color-mix(in srgb, var(--pt-accent, var(--accent-cyan)) 16%, transparent); }

/* === product-page CTA + bullet interactions (all 12 product pages) === */
/* (1) bottom "ספרו ל-Roby" CTA → STATIONARY (just the glow pulse from poCtaGlow above).
   It used to drift left-right (poCtaSlide) → moving target + a snap on hover. Removed. */
/* (2) primary "בנו את האתר" hero CTA → NO float, keep only its hover-zoom. */
.pt-cta:not(.pt-cta-2) { animation: none; }
/* (3) the ✓ phone bullets → light (glow) + zoom-in on hover */
[class*="-phone-bullets"] li { transition: transform .28s cubic-bezier(.34,1.56,.64,1), text-shadow .25s; cursor: default; }
[class*="-phone-bullets"] li:hover { transform: scale(1.05); text-shadow: 0 0 15px color-mix(in srgb, var(--pt-accent, var(--accent-cyan)) 45%, transparent); }
[class*="-phone-bullets"] li::before { transition: text-shadow .25s, filter .25s; }
[class*="-phone-bullets"] li:hover::before { text-shadow: 0 0 14px var(--pt-accent, var(--accent-cyan)); filter: brightness(1.3); }
@media (prefers-reduced-motion: reduce) { [class*="-cta-xl"] { animation: none; } [class*="-phone-bullets"] li:hover { transform: none; } }

/* feature-num: light up like a bulb + zoom-in POP when scrolled to (no more cycling/turn-off) */
[class*="-feature-num"] { transition: filter .5s ease, transform .5s cubic-bezier(.34,1.56,.64,1), box-shadow .5s ease !important; }
[class*="-feature-num"].is-lit { filter: grayscale(0) opacity(1) brightness(1.08) !important; box-shadow: 0 16px 34px var(--pt-glow, rgba(34,211,238,.55)), 0 0 30px var(--pt-glow, rgba(34,211,238,.65)) !important; }
/* phone-narrative heading "מבקשים מ-Roby" → zoom-in + glow on hover (like the ✓ bullets) */
[class*="-phone-narrative"] h2 { transition: transform .28s cubic-bezier(.34,1.56,.64,1), text-shadow .25s; cursor: default; }
[class*="-phone-narrative"] h2:hover { transform: scale(1.04); text-shadow: 0 0 30px var(--pt-glow, rgba(34,211,238,.6)); }
@media (prefers-reduced-motion: reduce) { [class*="-phone-narrative"] h2:hover { transform: none; } }

/* ============================================================================
   Bottom "cubes" — the 4 .po-card ("what you get") + 4 .po-change ("what changes")
   float like objects in ZERO-G: each drifts slowly along its OWN gentle wandering
   path (X+Y + tiny tilt) at its OWN period, so they ease in and out of proximity at
   random-feeling moments — sometimes nearly touching, sometimes apart. NO scripted
   "forceful" collision; small amplitude + long, co-prime durations keep it calm and
   organic (objects drifting in a spaceship, the odd soft near-bump). Overrides the
   prior collision/float for these two groups only; proof-cards keep theirs.
   ============================================================================ */
@keyframes poFloat1 { 0%,100% { transform: translate(0,0) rotate(0); } 26% { transform: translate(7px,-8px) rotate(1deg); }    52% { transform: translate(-5px,-3px) rotate(-1.3deg); } 78% { transform: translate(4px,6px) rotate(.6deg); } }
@keyframes poFloat2 { 0%,100% { transform: translate(0,0) rotate(0); } 24% { transform: translate(-6px,-5px) rotate(-1deg); }  50% { transform: translate(6px,-9px) rotate(1.2deg); }  76% { transform: translate(-7px,4px) rotate(-.5deg); } }
@keyframes poFloat3 { 0%,100% { transform: translate(0,0) rotate(0); } 30% { transform: translate(5px,7px) rotate(.8deg); }     56% { transform: translate(-8px,-4px) rotate(-1.4deg); } 82% { transform: translate(4px,-7px) rotate(1deg); } }
@keyframes poFloat4 { 0%,100% { transform: translate(0,0) rotate(0); } 22% { transform: translate(-5px,6px) rotate(-.7deg); }   48% { transform: translate(8px,-5px) rotate(1.3deg); }  74% { transform: translate(-4px,-8px) rotate(-1deg); } }
.po-card, .po-change { will-change: transform; }
/* distinct path + co-prime period per cube → they drift independently (no lockstep, no forced bump) */
.po-card:nth-child(1), .po-change:nth-child(1) { animation: poFloat1 7s   ease-in-out infinite; }
.po-card:nth-child(2), .po-change:nth-child(2) { animation: poFloat2 8s   ease-in-out -3s infinite; }
.po-card:nth-child(3), .po-change:nth-child(3) { animation: poFloat3 7.5s ease-in-out -5s infinite; }
.po-card:nth-child(4), .po-change:nth-child(4) { animation: poFloat4 9s   ease-in-out -2s infinite; }
.po-card:hover, .po-change:hover { animation-play-state: paused; }   /* keep the hover lift clean */
@media (prefers-reduced-motion: reduce) { .po-card, .po-change { animation: none !important; } }

/* mobile (stacked): center the phone narrative — heading + paragraph + ✓ bullets — instead of leaving it to the side */
@media (max-width: 900px) {
  [class*="-phone-narrative"] { text-align: center !important; align-items: center !important; }
  [class*="-phone-narrative"] h2, [class*="-phone-narrative"] p { margin-inline: auto; }
  [class*="-phone-bullets"] { width: fit-content; max-width: 100%; margin-inline: auto; text-align: start; }
}

/* ============================================================================
   LIGHT-THEME legibility: the per-page accent (--pt-accent) is a PALE tint tuned
   for the dark background; used as TEXT/icon colour it's near-invisible on the
   light bg (e.g. amber/cyan at ~1.6 contrast). In light mode, darken accent-coloured
   text + icons (keeps the hue, restores contrast). Covers all 12 product pages.
   ============================================================================ */
body.light-theme .pt-eyebrow,
body.light-theme .pt-cap,
body.light-theme .pt-cta-2,
body.light-theme .pt-cta-2 i,
body.light-theme .pt-ph i,
body.light-theme .po-label,
body.light-theme .po-head-btn-eyebrow,
body.light-theme [class*="-section-label"],
body.light-theme .po-change-num,
body.light-theme .po-card-ic {
  color: color-mix(in srgb, var(--pt-accent, var(--accent-cyan)) 55%, #0a1424) !important;
}

/* ============================================================================
   bottom product CTA ([class*="-cta-xl"]) → a gentle, continuous "HEARTBEAT" zoom
   in/out (scale from the centre, so the click target never drifts). Calm + inviting,
   NOT the earlier wild jiggle (user: it "went crazy / bad UI").
   ============================================================================ */
@keyframes poCtaPulse {
  0%, 100% { transform: scale(1);     box-shadow: 0 12px 30px -10px var(--pt-glow, rgba(34,211,238,.5)),  inset 0 1px 0 rgba(255,255,255,.2); }
  50%      { transform: scale(1.055); box-shadow: 0 20px 48px -8px  var(--pt-glow, rgba(34,211,238,.66)), inset 0 1px 0 rgba(255,255,255,.2); }
}
@media (prefers-reduced-motion: reduce) { [class*="-cta-xl"] { animation: none !important; } }

/* ============================================================================
   #8 phone-section sides (all 12 product pages): in RTL the phone should sit on the
   LEFT and the text on the RIGHT (natural for right-to-left reading); in LTR it mirrors
   (phone right, text left). Moving the narrative to the FIRST grid slot does both
   (RTL: first slot = right; LTR: first slot = left). Desktop only — below 900px the
   per-page rules already stack text-over-phone.
   ============================================================================ */
@media (min-width: 901px) {
  [class*="-phone-narrative"] { order: -1; }
}

/* ============================================================================
   #7 feature-row copy → symmetric side margins (user). The right-side copy already
   hugs the outer (right) edge nicely; the LEFT-side copy was aligned toward the centre
   (big gap from the left edge), so the two sides looked lopsided. Mirror them: the
   physical-LEFT copy aligns left + its max-width paragraph hugs the left edge, so both
   sides sit the same distance from their screen edge.
   ============================================================================ */
@media (min-width: 769px) {
  [dir="rtl"] [class*="-feature-left"] [class*="-feature-copy"],
  [dir="ltr"] [class*="-feature-right"] [class*="-feature-copy"] { text-align: left; }
  [dir="rtl"] [class*="-feature-left"] [class*="-feature-copy"] p,
  [dir="ltr"] [class*="-feature-right"] [class*="-feature-copy"] p { margin-left: 0; margin-right: auto; }
}

/* #9: product hero CTA — extra hover effect: a light "shine" sweeps across */
.pt-cta { position: relative; overflow: hidden; }
.pt-cta::after { content: ''; position: absolute; top: 0; bottom: 0; inset-inline-start: -60%; width: 45%; background: linear-gradient(110deg, transparent, rgba(255,255,255,.42) 50%, transparent); transform: skewX(-18deg); pointer-events: none; z-index: 2; }
.pt-cta:hover::after { animation: ptCtaShine .7s ease-out; }
@keyframes ptCtaShine { from { inset-inline-start: -60%; } to { inset-inline-start: 130%; } }
@media (prefers-reduced-motion: reduce) { .pt-cta:hover::after { animation: none; } }

/* ============================================================================
   DEVICE GLOW (consistency, all 12 product pages): the phone already has a tight
   per-page rim glow (`.{ns}-iphone::before`, in the page's own colour). Enlarge it
   into a soft glow that RADIATES FROM BEHIND the phone — matching the new tablet
   glow (.pt-stage::before) so every device on the site reads the same way.
   (Keeps each page's hardcoded gradient colour; only grows the size + blur.)
   ============================================================================ */
[class*="-iphone"]::before {
  inset: -26px !important;
  border-radius: 64px !important;
  filter: blur(36px) !important;
  opacity: .8 !important;
}