/* ============================================================
   HOMEPAGE ENHANCEMENTS
   Additive polish layered on top of product-page.css + home.css.
   Scoped under body.dr-product-page so it inherits the shared
   token set and never leaks onto other routes.
   Covers: accessibility (focus-visible), a proof/stat band,
   hover consistency, and small motion/polish touches.
   ============================================================ */

/* ---------- Accessibility: visible keyboard focus ----------
   The base styles ship no :focus-visible ring, so keyboard and
   screen-reader users get no indication of where focus is.
   One brand-orange ring for every interactive element. */
:where(body.dr-product-page) a:focus-visible,
:where(body.dr-product-page) button:focus-visible,
:where(body.dr-product-page) summary:focus-visible,
:where(body.dr-product-page) video:focus-visible,
:where(body.dr-product-page) [tabindex]:focus-visible{
  outline: 2px solid #f58a22;
  outline-offset: 3px;
  border-radius: 8px;
}
/* Never show the ring for pointer users who also happen to click. */
:where(body.dr-product-page) :focus:not(:focus-visible){ outline: none; }

/* ---------- Proof / stat band ----------
   Surfaces the credibility numbers that were buried in prose. */
:where(body.dr-product-page) .dr-proof-band{
  max-width: var(--max-w);
  margin: 0.5rem auto 0;
  padding: 0 2rem;
}
:where(body.dr-product-page) .dr-proof-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
:where(body.dr-product-page) .dr-proof-cell{
  background: var(--bg-elev);
  padding: 1.6rem 1.4rem;
  text-align: center;
}
:where(body.dr-product-page) .dr-proof-num{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
}
:where(body.dr-product-page) .dr-proof-num span{
  background: linear-gradient(105deg, #f58a22 0%, #009fce 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
:where(body.dr-product-page) .dr-proof-label{
  margin-top: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.4;
}
@media (max-width: 720px){
  :where(body.dr-product-page) .dr-proof-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Hover consistency ----------
   Impact cards were the only card grid with no hover feedback. */
:where(body.dr-product-page) .dr-impact-card{
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}
:where(body.dr-product-page) .dr-impact-card:hover{
  transform: translateY(-3px);
  border-color: var(--border-strong);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
}

/* Give the FAQ rows a touch of hover affordance on the whole summary. */
:where(body.dr-product-page) details.dr-faq summary:hover .dr-faq-icon{
  border-color: #f58a22;
}

/* ---------- Small polish ----------
   Slightly richer primary-button press feedback. */
:where(body.dr-product-page) .btn-primary:active{ transform: translateY(0); }

/* Respect reduced-motion for every hover transform we introduced. */
@media (prefers-reduced-motion: reduce){
  :where(body.dr-product-page) .dr-impact-card{ transition: none; }
  :where(body.dr-product-page) .dr-impact-card:hover{ transform: none; }
}

/* ---------- Section imagery / figures ----------
   Framed 1:1 illustrations. Sources are 460px, so we cap display
   size to keep them crisp rather than upscaling full-bleed. */
:where(body.dr-product-page) .dr-media{
  margin: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #0b1220;
  box-shadow: 0 20px 45px -24px rgba(15, 23, 42, 0.45);
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
:where(body.dr-product-page) .dr-media:hover{
  transform: translateY(-3px);
  border-color: rgba(245, 138, 34, 0.5);
  box-shadow: 0 26px 55px -22px rgba(15, 23, 42, 0.5);
}
:where(body.dr-product-page) .dr-media img{
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}
:where(body.dr-product-page) .dr-media figcaption{
  padding: 0.85rem 1.1rem;
  background: #0b1220;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: #94a3b8;
  line-height: 1.5;
}

/* Two-up gallery — full section width so image edges align with the
   cards/content above them. */
:where(body.dr-product-page) .dr-figure-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin: 2.5rem 0 0;
}
@media (max-width: 720px){
  :where(body.dr-product-page) .dr-figure-grid{ grid-template-columns: 1fr; }
}

/* Single figure (architecture / impact visuals) — centered, but a touch
   wider so it reads as a deliberate centerpiece, not an orphaned thumbnail. */
:where(body.dr-product-page) .dr-figure-solo{
  max-width: 620px;
  margin: 2.5rem auto 0;
}

/* Challenge band: copy + illustration, two columns. */
:where(body.dr-product-page) .dr-challenge-band{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  margin-top: 0.75rem;
}
:where(body.dr-product-page) .dr-challenge-band .dr-media{ width: 100%; max-width: clamp(260px, 34vw, 400px); justify-self: end; }
/* Shorter illustration: reduce height from a square to a 4:3 frame. */
:where(body.dr-product-page) .dr-challenge-band .dr-media img{ aspect-ratio: 4 / 3; }
:where(body.dr-product-page) .dr-challenge-list-x{
  list-style: none;
  display: grid;
  gap: 0.7rem;
  margin-top: 1.5rem;
}
:where(body.dr-product-page) .dr-challenge-list-x li{
  position: relative;
  padding-left: 1.7rem;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--text-dim);
}
:where(body.dr-product-page) .dr-challenge-list-x li::before{
  content: '';
  position: absolute;
  left: 0; top: 0.45rem;
  width: 12px; height: 12px;
  border-radius: 3px;
  background: #f58a22;
}
@media (max-width: 820px){
  :where(body.dr-product-page) .dr-challenge-band{ grid-template-columns: 1fr; }
  :where(body.dr-product-page) .dr-challenge-band .dr-media{ max-width: 520px; margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce){
  :where(body.dr-product-page) .dr-media{ transition: none; }
  :where(body.dr-product-page) .dr-media:hover{ transform: none; }
}

/* ---------- Project gallery ---------- */
:where(body.dr-product-page) .dr-gallery{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 2.5rem;
}
:where(body.dr-product-page) .dr-gallery__item{
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #0b1220;
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}
:where(body.dr-product-page) .dr-gallery__item:hover{
  transform: translateY(-3px);
  border-color: rgba(245, 138, 34, 0.5);
  box-shadow: 0 16px 34px -18px rgba(15, 23, 42, 0.4);
}
:where(body.dr-product-page) .dr-gallery__item img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
:where(body.dr-product-page) .dr-gallery__item figcaption{
  padding: 0.6rem 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: #94a3b8;
  background: #0b1220;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
:where(body.dr-product-page) .dr-gallery__ph{
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  color: #64748b;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 1rem;
  background:
    repeating-linear-gradient(45deg, rgba(148,163,184,0.06) 0 10px, transparent 10px 20px),
    #0b1220;
}
@media (max-width: 820px){
  :where(body.dr-product-page) .dr-gallery{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  :where(body.dr-product-page) .dr-gallery{ grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce){
  :where(body.dr-product-page) .dr-gallery__item{ transition: none; }
  :where(body.dr-product-page) .dr-gallery__item:hover{ transform: none; }
}

/* =====================================================================
   PROFESSIONAL POLISH PASS
   Loads after product-page.css/home.css, so these win on equal
   specificity. Goal: one consistent orange accent system, richer card
   depth, a signature hover, and a bold dark CTA finale.
   ===================================================================== */
:root{
  --brand: #f58a22;
  --brand-deep: #d97718;
}

/* ---------- 1) Unify every stray blue accent to brand orange ---------- */
:where(body.dr-product-page) .dr-ind-card__k{ color: var(--brand); }
:where(body.dr-product-page) .dr-arch-step-num{ color: var(--brand); }
:where(body.dr-product-page) .dr-impact-card li::before{ background: var(--brand); }
:where(body.dr-product-page) .dr-cap-card__icon{
  color: var(--brand);
  background: linear-gradient(135deg, rgba(245,138,34,0.16), rgba(245,138,34,0.05));
}
:where(body.dr-product-page) .dr-ind-card:hover{ border-color: var(--brand); }
:where(body.dr-product-page) details.dr-faq summary:hover{ color: var(--brand); }
:where(body.dr-product-page) details.dr-faq[open] .dr-faq-icon{ background: var(--brand); border-color: var(--brand); }
:where(body.dr-product-page) .dr-trust-pill:hover{ border-color: var(--brand); color: var(--brand); }

/* ---------- 2) Premium card depth + unified hover ---------- */
:where(body.dr-product-page) .dr-cap-card,
:where(body.dr-product-page) .dr-ind-card,
:where(body.dr-product-page) .dr-impact-card,
:where(body.dr-product-page) .dr-arch-step{
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
:where(body.dr-product-page) .dr-cap-card:hover,
:where(body.dr-product-page) .dr-impact-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 44px -18px rgba(15,23,42,0.18);
}

/* ---------- 3) Signature micro-interaction on the process steps ----------
   A brand hairline wipes across the top of each step card on hover. */
:where(body.dr-product-page) .dr-arch-step{ position: relative; overflow: hidden; }
:where(body.dr-product-page) .dr-arch-step::after{
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--brand), #009fce);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
:where(body.dr-product-page) .dr-arch-step:hover{
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: 0 22px 44px -18px rgba(15,23,42,0.18);
}
:where(body.dr-product-page) .dr-arch-step:hover::after{ transform: scaleX(1); }

/* ---------- 4) Section titles: refined accent underline flourish ---------- */
:where(body.dr-product-page) .dr-section-title{
  position: relative;
  padding-bottom: 0.9rem;
}
:where(body.dr-product-page) .dr-section-title::after{
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 52px; height: 3px; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), rgba(245,138,34,0));
}

/* ---------- 5) Bold dark CTA finale (bookends hero + footer) ---------- */
:where(body.dr-product-page) .dr-cta-inner{
  max-width: 820px;
  padding: clamp(2.25rem, 4vw, 3.25rem);
  background: linear-gradient(135deg, #0b1220 0%, #0f1a30 60%, #0b1220 100%);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 40px 90px -44px rgba(0,0,0,0.55);
  overflow: hidden;
}
:where(body.dr-product-page) .dr-cta-inner::before{
  content: ''; display: block;
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(680px 260px at 82% -20%, rgba(245,138,34,0.22), transparent 60%),
    radial-gradient(560px 260px at 8% 120%, rgba(0,159,206,0.18), transparent 60%);
}
:where(body.dr-product-page) .dr-cta-eyebrow{ color: #f9a24a; }
:where(body.dr-product-page) .dr-cta-title{ color: #f8fafc; }
:where(body.dr-product-page) .dr-cta-sub{ color: #94a3b8; }
:where(body.dr-product-page) .dr-cta-actions .btn.btn-ghost{
  background: rgba(255,255,255,0.06);
  color: #f8fafc;
  border-color: rgba(255,255,255,0.24);
}
:where(body.dr-product-page) .dr-cta-actions .btn.btn-ghost:hover{
  background: rgba(255,255,255,0.13);
  border-color: rgba(255,255,255,0.45);
}

@media (prefers-reduced-motion: reduce){
  :where(body.dr-product-page) .dr-cap-card,
  :where(body.dr-product-page) .dr-ind-card,
  :where(body.dr-product-page) .dr-impact-card,
  :where(body.dr-product-page) .dr-arch-step{ transition: none; }
  :where(body.dr-product-page) .dr-cap-card:hover,
  :where(body.dr-product-page) .dr-ind-card:hover,
  :where(body.dr-product-page) .dr-impact-card:hover,
  :where(body.dr-product-page) .dr-arch-step:hover{ transform: none; }
  :where(body.dr-product-page) .dr-arch-step::after{ transition: none; }
}

/* =====================================================================
   PRODUCT-PAGE SECTION BLOCKS (dark)
   Section-band alternation, detection catalog, how-it-works steps,
   flagship proof card, validation/standards, and testimonials.
   ===================================================================== */

/* ---------- Section-band alternation (scroll rhythm) ---------- */
:where(body.dr-product-page) .dr-band-alt{
  background: #f6f8fb;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* ---------- Detection catalog ---------- */
:where(body.dr-product-page) .dr-catalog{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 2.5rem;
}
:where(body.dr-product-page) .dr-catalog--2{ grid-template-columns: repeat(2, 1fr); }
/* .dr-catalog__group is a <Card> — container styling comes from .dr-card. */
:where(body.dr-product-page) .dr-catalog__title{
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 1.1rem;
}
:where(body.dr-product-page) .dr-catalog__icon{
  display: grid; place-items: center;
  width: 34px; height: 34px; flex: none;
  border-radius: 9px;
  color: var(--brand);
  background: linear-gradient(135deg, rgba(245,138,34,0.16), rgba(245,138,34,0.05));
}
:where(body.dr-product-page) .dr-catalog__icon svg{ width: 18px; height: 18px; }
:where(body.dr-product-page) .dr-catalog__chips{ display: flex; flex-wrap: wrap; gap: 0.5rem; }
:where(body.dr-product-page) .dr-chip{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  color: var(--text-dim);
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-card);
  transition: color 0.2s, border-color 0.2s;
}
:where(body.dr-product-page) .dr-chip:hover{ color: var(--brand); border-color: var(--brand); }
@media (max-width: 860px){
  :where(body.dr-product-page) .dr-catalog{ grid-template-columns: 1fr; }
}

/* ---------- How-it-works steps (reuses .dr-arch-step cards) ---------- */
:where(body.dr-product-page) .dr-steps{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-top: 2.5rem;
}
@media (max-width: 900px){ :where(body.dr-product-page) .dr-steps{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ :where(body.dr-product-page) .dr-steps{ grid-template-columns: 1fr; } }

/* ---------- Flagship proof card ---------- */
:where(body.dr-product-page) .dr-proof-card{
  margin-top: 1.5rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-elev);
}
:where(body.dr-product-page) .dr-proof-card__head{
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 0.85rem;
}
:where(body.dr-product-page) .dr-proof-card .dr-flagship__list{ margin: 0; }

/* ---------- Validation & standards ---------- */
:where(body.dr-product-page) .dr-standards{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-top: 2.5rem;
}
/* .dr-standard-card is a <Card interactive> — container + hover come from .dr-card. */
:where(body.dr-product-page) .dr-standard-card__badge{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 58px; height: 34px; padding: 0 0.7rem;
  margin-bottom: 1rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--brand);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(245,138,34,0.14), rgba(245,138,34,0.04));
}
:where(body.dr-product-page) .dr-standard-card h4{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--text);
  margin: 0 0 0.5rem;
}
:where(body.dr-product-page) .dr-standard-card p{
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-dim);
  margin: 0;
}
:where(body.dr-product-page) .dr-standard-card em{ color: var(--text-muted); font-style: italic; }
@media (max-width: 900px){ :where(body.dr-product-page) .dr-standards{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ :where(body.dr-product-page) .dr-standards{ grid-template-columns: 1fr; } }

/* ---------- Testimonials ---------- */
:where(body.dr-product-page) .dr-quote{
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(2.25rem, 4vw, 3.5rem) 2rem;
}
:where(body.dr-product-page) .dr-quote__inner{
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.25rem, 4vw, 2.5rem);
  align-items: center;
  margin: 0;
  padding: clamp(1.75rem, 4vw, 3rem);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--bg-elev), var(--bg-card));
  box-shadow: 0 20px 45px -28px rgba(15, 23, 42, 0.35);
}
:where(body.dr-product-page) .dr-quote__inner::before{
  content: '\201C';
  position: absolute;
  top: -1.6rem;
  right: 1.5rem;
  font-family: var(--font-display);
  font-size: 9rem;
  line-height: 1;
  color: var(--brand);
  opacity: 0.14;
  pointer-events: none;
}
:where(body.dr-product-page) .dr-quote__avatar{
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  color: #fff;
  background: linear-gradient(135deg, #f58a22, #009fce);
  box-shadow: 0 12px 30px -12px rgba(15, 23, 42, 0.45);
}
:where(body.dr-product-page) .dr-quote__text{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 2.3vw, 1.6rem);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 1.1rem;
}
:where(body.dr-product-page) .dr-quote__cite{
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-style: normal;
}
:where(body.dr-product-page) .dr-quote__name{
  font-weight: 600;
  color: var(--text-dim);
}
:where(body.dr-product-page) .dr-quote__role{
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
@media (max-width: 620px){
  :where(body.dr-product-page) .dr-quote__inner{ grid-template-columns: 1fr; text-align: left; }
}

/* ---------- Testimonials grid (reuses .dr-quote__inner) ---------- */
:where(body.dr-product-page) .dr-quotes{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}
:where(body.dr-product-page) .dr-quotes .dr-quote__inner{
  grid-template-columns: 1fr;
  align-items: start;
}
:where(body.dr-product-page) .dr-quotes .dr-quote__text{
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.5;
}
@media (max-width: 900px){
  :where(body.dr-product-page) .dr-quotes{ grid-template-columns: 1fr; }
}

/* =====================================================================
   SHARED CARD + REBUILT SECTION LAYOUTS (component-driven)
   .dr-card is the single card shell used by DetectionCatalog, Validation,
   Testimonials, and Industries; section classes only add inner layout.
   ===================================================================== */

/* ---------- Shared Card ---------- */
:where(body.dr-product-page) .dr-card{
  padding: 1.6rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-elev);
}
:where(body.dr-product-page) .dr-card--interactive{
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}
:where(body.dr-product-page) .dr-card--interactive:hover{
  transform: translateY(-3px);
  border-color: var(--brand);
  box-shadow: 0 20px 40px -20px rgba(15,23,42,0.16);
}

/* ---------- Stats strip: cards with context ---------- */
:where(body.dr-product-page) .dr-stats{
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(1.5rem, 3vw, 2.5rem) 2rem 0;
}
:where(body.dr-product-page) .dr-stats__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
:where(body.dr-product-page) .dr-stat-card{ display: flex; flex-direction: column; gap: 0.35rem; }
:where(body.dr-product-page) .dr-stat-card__num{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
  background: linear-gradient(105deg, #f58a22 0%, #009fce 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
:where(body.dr-product-page) .dr-stat-card__label{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}
:where(body.dr-product-page) .dr-stat-card__context{
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0.15rem 0 0;
}
@media (max-width: 860px){ :where(body.dr-product-page) .dr-stats__grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px){ :where(body.dr-product-page) .dr-stats__grid{ grid-template-columns: 1fr; } }

/* ---------- How-it-works: connected numbered flow ---------- */
:where(body.dr-product-page) .dr-flow{
  list-style: none; margin: 2.5rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem;
  position: relative;
}
:where(body.dr-product-page) .dr-flow__step{ position: relative; padding-top: 0.5rem; text-align: left; }
/* horizontal connector between badges (desktop) */
:where(body.dr-product-page) .dr-flow__step::before{
  content: ''; position: absolute; top: 26px; left: 52px; right: -0.6rem; height: 2px;
  background: linear-gradient(90deg, var(--brand), rgba(245,138,34,0.15));
}
:where(body.dr-product-page) .dr-flow__step:last-child::before{ display: none; }
:where(body.dr-product-page) .dr-flow__badge{
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  font-family: var(--font-mono); font-weight: 600; font-size: 1.05rem;
  color: #0a0a0a; background: linear-gradient(135deg, #f9a24a, #f58a22 62%);
  box-shadow: 0 10px 26px -10px rgba(245,138,34,0.6);
  position: relative; z-index: 1; margin-bottom: 1rem;
}
:where(body.dr-product-page) .dr-flow__title{
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
  color: var(--text); margin: 0 0 0.4rem;
}
:where(body.dr-product-page) .dr-flow__text{ font-size: 0.9rem; line-height: 1.55; color: var(--text-dim); margin: 0; }
@media (max-width: 900px){
  :where(body.dr-product-page) .dr-flow{ grid-template-columns: 1fr; gap: 0; }
  :where(body.dr-product-page) .dr-flow__step{ padding: 0 0 1.75rem 4.25rem; min-height: 52px; }
  :where(body.dr-product-page) .dr-flow__badge{ position: absolute; top: 0; left: 0; margin: 0; }
  :where(body.dr-product-page) .dr-flow__step::before{
    top: 52px; left: 25px; right: auto; bottom: 0; width: 2px; height: auto;
    background: linear-gradient(180deg, var(--brand), rgba(245,138,34,0.15));
  }
  :where(body.dr-product-page) .dr-flow__step:last-child{ padding-bottom: 0; }
}

/* ---------- Flagship split: video | proof ---------- */
:where(body.dr-product-page) .dr-flagship--split{ align-items: start; }
/* min-width:0 stops the 16:9 video track from overflowing into the proof
   column (grid items default to min-width:auto). */
:where(body.dr-product-page) .dr-flagship--split > *{ min-width: 0; }
:where(body.dr-product-page) .dr-flagship--split .dr-demo-video{ margin: 0; width: 100%; }
:where(body.dr-product-page) .dr-proof-panel{ display: flex; flex-direction: column; }
:where(body.dr-product-page) .dr-proof-panel .dr-flagship__list{ margin-top: 0; }
/* The section title ("Drishti in the real world") only fills the left side, so
   the right column has empty space beside it. Pull the proof card up into that
   gap so the "◆ Live demo" badge sits alongside the title. Reset on mobile,
   where the columns stack and the card must stay below the video. */
:where(body.dr-product-page) .dr-flagship--split .dr-proof-panel{
  margin-top: clamp(-7rem, -7vw, -4rem);
}
@media (max-width: 900px){
  :where(body.dr-product-page) .dr-flagship--split .dr-proof-panel{ margin-top: 0; }
}

/* ---------- Use cases: compact numbered list (lighter than cards) ---------- */
:where(body.dr-product-page) .dr-usecases{
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 2.5rem; margin-top: 1.75rem;
}
:where(body.dr-product-page) .dr-usecase{
  display: flex; gap: 0.9rem; align-items: baseline;
  padding: 0.9rem 0; border-bottom: 1px solid var(--border);
}
:where(body.dr-product-page) .dr-usecase__n{
  font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600; color: var(--brand); flex: none;
}
:where(body.dr-product-page) .dr-usecase__t{ font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--text); margin: 0 0 0.15rem; }
:where(body.dr-product-page) .dr-usecase__p{ font-size: 0.88rem; line-height: 1.5; color: var(--text-muted); margin: 0; }
@media (max-width: 720px){ :where(body.dr-product-page) .dr-usecases{ grid-template-columns: 1fr; gap: 0; } }

/* ---------- Industries: compact cards ---------- */
:where(body.dr-product-page) .dr-industries{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2.25rem;
}
:where(body.dr-product-page) .dr-industry{ padding: 1.25rem 1.3rem; }
:where(body.dr-product-page) .dr-industry__k{
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--brand); display: block; margin-bottom: 0.5rem;
}
:where(body.dr-product-page) .dr-industry h4{ font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--text); margin: 0 0 0.35rem; }
:where(body.dr-product-page) .dr-industry p{ font-size: 0.86rem; line-height: 1.5; color: var(--text-dim); margin: 0; }
@media (max-width: 860px){ :where(body.dr-product-page) .dr-industries{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px){ :where(body.dr-product-page) .dr-industries{ grid-template-columns: 1fr; } }

/* ---------- Testimonial card (Card + quote content) ---------- */
:where(body.dr-product-page) .dr-quote-card{
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 1rem;
  margin: 0;
}
:where(body.dr-product-page) .dr-quote-card::before{
  content: '\201C'; position: absolute; top: -1.4rem; right: 1rem;
  font-family: var(--font-display); font-size: 7rem; line-height: 1;
  color: var(--brand); opacity: 0.12; pointer-events: none;
}

/* ---------- Company credibility (secondary, tighter) ---------- */
:where(body.dr-product-page) .dr-content--tight .dr-section-title{ font-size: clamp(1.5rem, 2.6vw, 2rem); }
:where(body.dr-product-page) .dr-company{
  display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: 2rem; align-items: start;
}
:where(body.dr-product-page) .dr-company__h{
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted); margin: 0 0 1rem;
}
:where(body.dr-product-page) .dr-company__list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
:where(body.dr-product-page) .dr-company__list li{ display: grid; gap: 0.15rem; padding-bottom: 0.85rem; border-bottom: 1px solid var(--border); }
:where(body.dr-product-page) .dr-company__list strong{ font-family: var(--font-display); font-weight: 600; color: var(--text); font-size: 1rem; }
:where(body.dr-product-page) .dr-company__list span{ font-size: 0.86rem; line-height: 1.5; color: var(--text-muted); }
:where(body.dr-product-page) .dr-company__stages{ list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
:where(body.dr-product-page) .dr-company__stage{
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.7rem 0.9rem; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-elev);
  font-family: var(--font-display); font-weight: 500; color: var(--text);
}
:where(body.dr-product-page) .dr-company__stage-n{ font-family: var(--font-mono); font-size: 0.78rem; color: var(--brand); }
@media (max-width: 820px){ :where(body.dr-product-page) .dr-company{ grid-template-columns: 1fr; } }

/* =====================================================================
   PREMIUM DESIGN POLISH
   Adds depth, accent, and texture so every section reads as designed —
   accent-pill kickers, layered cards, gradient accent bars, styled chips
   and badges, and soft section glows. CSS-only; no structure changes.
   ===================================================================== */

/* ---------- Accent-pill kickers ---------- */
:where(body.dr-product-page) .dr-section-kicker{
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.9rem; margin-bottom: 1.15rem;
  background: linear-gradient(135deg, rgba(245,138,34,0.12), rgba(0,159,206,0.10));
  border: 1px solid rgba(245,138,34,0.28);
  border-radius: 999px;
  color: #c26a12;
}
:where(body.dr-product-page) .dr-section-kicker::before{
  width: 7px; height: 7px; border-radius: 50%;
  background: linear-gradient(135deg, #f58a22, #009fce);
}

/* ---------- Soft section texture (accent glow, top-right) ---------- */
:where(body.dr-product-page) section.dr-content{ position: relative; isolation: isolate; }
:where(body.dr-product-page) section.dr-content::before{
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  top: -30px; right: -40px; width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle at center, rgba(245,138,34,0.07), transparent 68%);
}
:where(body.dr-product-page) .dr-band-alt section.dr-content::before{
  background: radial-gradient(circle at center, rgba(0,159,206,0.07), transparent 68%);
}

/* ---------- Richer shared cards ---------- */
:where(body.dr-product-page) .dr-card{
  background: linear-gradient(180deg, #ffffff 0%, #fafbfe 100%);
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 20px 44px -26px rgba(15,23,42,0.22);
}
:where(body.dr-product-page) .dr-card--interactive{ transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s; }
:where(body.dr-product-page) .dr-card--interactive:hover{
  transform: translateY(-4px);
  border-color: rgba(245,138,34,0.45);
  box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 30px 56px -24px rgba(245,138,34,0.30);
}

/* ---------- Detection catalog: accent bar + description + richer chips ---------- */
:where(body.dr-product-page) .dr-catalog__group{ position: relative; overflow: hidden; padding-top: 1.9rem; }
:where(body.dr-product-page) .dr-catalog__group::before{
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #f58a22, #009fce);
}
:where(body.dr-product-page) .dr-catalog__desc{
  color: var(--text-muted); font-size: 0.92rem; line-height: 1.55; margin: -0.3rem 0 1.15rem;
}
:where(body.dr-product-page) .dr-chip{
  background: linear-gradient(180deg, #ffffff, #f3f6fb);
  border: 1px solid rgba(15,23,42,0.10);
  box-shadow: 0 1px 1px rgba(15,23,42,0.03);
  color: var(--text-dim);
}
:where(body.dr-product-page) .dr-chip:hover{ color: #d97718; border-color: rgba(245,138,34,0.5); background: #fff7ef; }

/* ---------- Stat cards: gradient accent bar ---------- */
:where(body.dr-product-page) .dr-stat-card{ position: relative; overflow: hidden; padding-top: 1.9rem; border-radius: 16px; }
:where(body.dr-product-page) .dr-stat-card::before{
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #f58a22, #009fce);
}

/* ---------- Benefit icon cards ---------- */
:where(body.dr-product-page) .dr-cap-card{
  background: linear-gradient(180deg, #ffffff, #fafbfe);
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 20px 44px -26px rgba(15,23,42,0.22);
}
:where(body.dr-product-page) .dr-cap-card__icon{
  width: 48px; height: 48px; border-radius: 13px;
  display: grid; place-items: center;
  color: #f58a22;
  background: linear-gradient(135deg, rgba(245,138,34,0.18), rgba(0,159,206,0.12));
  box-shadow: inset 0 0 0 1px rgba(245,138,34,0.22);
  margin-bottom: 1.1rem;
}
:where(body.dr-product-page) .dr-cap-card__icon svg{ width: 24px; height: 24px; }

/* ---------- Validation badges: bold gradient ---------- */
:where(body.dr-product-page) .dr-standard-card{ position: relative; overflow: hidden; padding-top: 1.9rem; }
:where(body.dr-product-page) .dr-standard-card::before{
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #f58a22, #009fce);
}
:where(body.dr-product-page) .dr-standard-card__badge{
  color: #ffffff;
  background: linear-gradient(135deg, #f9a24a, #f58a22);
  border: 0;
  box-shadow: 0 10px 22px -10px rgba(245,138,34,0.6);
}

/* ---------- Use cases: number chip + hover ---------- */
:where(body.dr-product-page) .dr-usecase{ border-radius: 10px; transition: background 0.2s ease, padding 0.2s ease; padding-inline: 0.6rem; }
:where(body.dr-product-page) .dr-usecase:hover{ background: rgba(245,138,34,0.055); }
:where(body.dr-product-page) .dr-usecase__n{
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(135deg, rgba(245,138,34,0.16), rgba(0,159,206,0.10));
  color: #d97718; font-size: 0.72rem;
}

/* ---------- How-it-works: glow ring on badges ---------- */
:where(body.dr-product-page) .dr-flow__badge{
  box-shadow: 0 12px 28px -10px rgba(245,138,34,0.55), 0 0 0 6px rgba(245,138,34,0.08);
}

/* ---------- Testimonial cards: quote pop ---------- */
:where(body.dr-product-page) .dr-quote-card::before{ opacity: 0.16; font-size: 8rem; }

/* ---------- FAQ rows: card-like ---------- */
:where(body.dr-product-page) details.dr-faq{
  background: linear-gradient(180deg, #ffffff, #fafbfe);
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
  padding: 0.35rem 0.4rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
:where(body.dr-product-page) details.dr-faq[open]{
  border-color: rgba(245,138,34,0.35);
  box-shadow: 0 14px 32px -20px rgba(245,138,34,0.35);
}

@media (prefers-reduced-motion: reduce){
  :where(body.dr-product-page) .dr-chip,
  :where(body.dr-product-page) .dr-card--interactive,
  :where(body.dr-product-page) .dr-usecase,
  :where(body.dr-product-page) details.dr-faq{ transition: none; }
  :where(body.dr-product-page) .dr-card--interactive:hover{ transform: none; }
}

/* =====================================================================
   DESIGNED PAGE BACKGROUND — "road-safety canvas"
   A fixed, ambient backdrop that carries the road-safety / GPS-mapping
   theme through the whole page (the hero owns its own richer scene; this
   is the calmer canvas everything else sits on). Four layers, all subtle
   enough to keep body text crisp:
     1. warm brand glows  — amber (road/warning) + electric blue (tech)
     2. a faint map / coordinate grid — the "GPS-tagged" feel
     3. a dashed GPS route trail with waypoints — the signature motif
     4. dashed lane-markings down the page shoulders (::before/::after)
   Uses `body.dr-product-page` (no :where) to outrank the base
   `body:where(.dr-product-page){ background: var(--bg) }` rule.
   ===================================================================== */
body.dr-product-page{
  background-color: #fbfcfe;
  /* Static base: a faint map / coordinate grid (the animated glows + GPS route
     live in the .dr-fx layer below). Kept subtle so body text stays crisp. */
  background-image:
    linear-gradient(rgba(15,23,42,0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,0.024) 1px, transparent 1px);
  background-size: 52px 52px, 52px 52px;
  background-position: -1px -1px, -1px -1px;
  background-attachment: fixed, fixed;
  background-repeat: repeat, repeat;
}
/* Dashed lane-markings down the page shoulders — an unmistakable road motif. */
body.dr-product-page::before,
body.dr-product-page::after{
  content: ''; position: fixed; top: 0; bottom: 0; width: 3px; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(to bottom,
    rgba(245,138,34,0.18) 0 22px, transparent 22px 46px);
  border-radius: 3px;
}
body.dr-product-page::before{ left: max(16px, 2.8vw); }
body.dr-product-page::after{ right: max(16px, 2.8vw); }
@media (max-width: 900px){
  body.dr-product-page::before,
  body.dr-product-page::after{ display: none; }
}

/* ---------- Animated backdrop layer (.dr-fx) ---------- */
.dr-fx{
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  contain: layout paint;
}
/* Aurora brand glows — large blurred blobs that slowly drift and breathe. */
.dr-fx__blob{
  position: absolute; border-radius: 50%; filter: blur(70px); will-change: transform;
}
.dr-fx__blob--amber{
  top: -12%; right: -8%; width: 46vw; height: 46vw; max-width: 780px; max-height: 780px;
  background: radial-gradient(circle at center, rgba(245,138,34,0.38), transparent 66%);
  animation: drFxDriftA 26s ease-in-out infinite;
}
.dr-fx__blob--blue{
  bottom: -18%; left: -10%; width: 48vw; height: 48vw; max-width: 820px; max-height: 820px;
  background: radial-gradient(circle at center, rgba(0,159,206,0.32), transparent 66%);
  animation: drFxDriftB 32s ease-in-out infinite;
}
.dr-fx__blob--violet{
  top: 38%; left: 46%; width: 40vw; height: 40vw; max-width: 680px; max-height: 680px;
  background: radial-gradient(circle at center, rgba(120,90,220,0.18), transparent 64%);
  animation: drFxDriftC 38s ease-in-out infinite;
}
/* warm "road glow" rising from the base — echoes the hero's vanishing point */
.dr-fx__blob--road{
  bottom: -22%; left: 50%; width: 70vw; height: 34vw; max-width: 1100px; max-height: 520px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(245,138,34,0.20), transparent 68%);
  animation: drFxBreathe 9s ease-in-out infinite;
}
@keyframes drFxBreathe{ 0%,100%{ opacity: 0.7 } 50%{ opacity: 1 } }
@keyframes drFxDriftA{ 0%,100%{ transform: translate3d(0,0,0) scale(1) } 50%{ transform: translate3d(-46px,34px,0) scale(1.08) } }
@keyframes drFxDriftB{ 0%,100%{ transform: translate3d(0,0,0) scale(1) } 50%{ transform: translate3d(54px,-30px,0) scale(1.1) } }
@keyframes drFxDriftC{ 0%,100%{ transform: translate3d(0,0,0) scale(1) } 50%{ transform: translate3d(-30px,-24px,0) scale(1.07) } }

/* GPS route — a dashed trail that flows toward the destination, with pulsing
   waypoint nodes. The signature "road intelligence" motif. */
.dr-fx__route{ position: absolute; inset: 0; width: 100%; height: 100%; }
.dr-fx__routeline{
  fill: none; stroke: #f58a22; stroke-opacity: 0.24; stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 3 15;
  animation: drFxFlow 1.6s linear infinite;
}
@keyframes drFxFlow{ to{ stroke-dashoffset: -36; } }
/* a bright, glowing segment that drives the whole route like a tracked vehicle */
.dr-fx__tracer{
  fill: none; stroke: #f58a22; stroke-opacity: 0.9; stroke-width: 3.5; stroke-linecap: round;
  stroke-dasharray: 5 95;
  filter: drop-shadow(0 0 6px rgba(245,138,34,0.9));
  animation: drFxDrive 6s cubic-bezier(.55,0,.45,1) infinite;
}
@keyframes drFxDrive{ 0%{ stroke-dashoffset: 5 } 100%{ stroke-dashoffset: -95 } }
.dr-fx__node{
  fill: #f58a22; transform-box: fill-box; transform-origin: center;
  animation: drFxPulse 3s ease-in-out infinite;
}
.dr-fx__node--blue{ fill: #009fce; animation-delay: 1s; }
.dr-fx__route .dr-fx__node:nth-of-type(3){ animation-delay: 2s; }
@keyframes drFxPulse{ 0%,100%{ opacity: 0.35; transform: scale(0.85) } 50%{ opacity: 0.9; transform: scale(1.25) } }

/* expanding detection ping-rings firing at the waypoints */
.dr-fx__ping{
  fill: none; stroke: #f58a22; stroke-width: 2; transform-box: fill-box; transform-origin: center;
  animation: drFxPing 3.6s ease-out infinite;
}
.dr-fx__ping--blue{ stroke: #009fce; animation-delay: 1.2s; }
.dr-fx__route .dr-fx__ping:nth-of-type(3){ animation-delay: 2.4s; }
@keyframes drFxPing{ 0%{ transform: scale(0.3); opacity: 0.7 } 70%{ opacity: 0 } 100%{ transform: scale(3.2); opacity: 0 } }

/* drifting data particles rising up the page */
.dr-fx__spark{
  position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: #f58a22; box-shadow: 0 0 8px 1px rgba(245,138,34,0.8);
  opacity: 0; will-change: transform, opacity;
  animation: drFxRise 11s linear infinite;
}
.dr-fx__spark--blue{ background: #009fce; box-shadow: 0 0 8px 1px rgba(0,159,206,0.8); }
@keyframes drFxRise{
  0%{ transform: translateY(0) scale(0.6); opacity: 0 }
  12%{ opacity: 0.9 }
  85%{ opacity: 0.7 }
  100%{ transform: translateY(-102vh) scale(1); opacity: 0 }
}

/* Slow detection sweep — a faint scan line drifting down the viewport. */
.dr-fx__scan{
  position: absolute; left: 0; right: 0; top: 0; height: 220px;
  background: linear-gradient(180deg, transparent, rgba(0,159,206,0.05) 46%, rgba(245,138,34,0.06) 54%, transparent);
  animation: drFxScan 14s ease-in-out infinite;
}
@keyframes drFxScan{ 0%{ transform: translateY(-30vh) } 50%{ transform: translateY(100vh) } 100%{ transform: translateY(-30vh) } }

@media (prefers-reduced-motion: reduce){
  .dr-fx__blob, .dr-fx__routeline, .dr-fx__tracer, .dr-fx__node,
  .dr-fx__ping, .dr-fx__spark, .dr-fx__scan{ animation: none !important; }
  .dr-fx__scan, .dr-fx__ping, .dr-fx__spark, .dr-fx__tracer{ display: none; }
}
@media (max-width: 640px){
  .dr-fx__blob{ filter: blur(52px); }
  .dr-fx__scan, .dr-fx__spark{ display: none; }
}

/* =====================================================================
   IMAGE SHOWCASES + typography scale — real product visuals in the
   content sections so the page reads rich, not text-only.
   ===================================================================== */
:where(body.dr-product-page) .dr-showcase{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  margin-top: 2.5rem;
}
:where(body.dr-product-page) .dr-showcase__media{ margin: 0; }
:where(body.dr-product-page) .dr-showcase__stack{ display: flex; flex-direction: column; gap: 1.25rem; }
:where(body.dr-product-page) .dr-showcase__body{ display: flex; flex-direction: column; }
@media (max-width: 900px){
  :where(body.dr-product-page) .dr-showcase{ grid-template-columns: 1fr; }
  :where(body.dr-product-page) .dr-showcase__media{ max-width: 560px; }
}

/* How-it-works step badges: custom icon + number chip */
:where(body.dr-product-page) .dr-flow__badge{ width: 56px; height: 56px; }
:where(body.dr-product-page) .dr-flow__badge svg{ width: 25px; height: 25px; color: #0a0a0a; }
:where(body.dr-product-page) .dr-flow__num{
  position: absolute; top: -6px; right: -6px;
  min-width: 21px; height: 21px; padding: 0 5px; border-radius: 999px;
  display: grid; place-items: center;
  background: #ffffff; color: #0a0a0a; border: 2px solid #f58a22;
  font-family: var(--font-mono); font-size: 0.58rem; font-weight: 700;
}
:where(body.dr-product-page) .dr-flow__step::before{ left: 56px; top: 28px; }

/* Bigger, more confident section titles */
:where(body.dr-product-page) .dr-section-title{
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1.08;
}
:where(body.dr-product-page) .dr-section-lede{ font-size: clamp(1rem, 1.4vw, 1.15rem); }

/* ---------- FAQ: two-column with support card + card accordion ---------- */
:where(body.dr-product-page) .dr-faq-layout{
  display: grid;
  grid-template-columns: 0.82fr 1.5fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  margin-top: 0.5rem;
}
@media (max-width: 900px){ :where(body.dr-product-page) .dr-faq-layout{ grid-template-columns: 1fr; } }
:where(body.dr-product-page) .dr-faq-aside .dr-section-title{ margin-bottom: 0.75rem; }
:where(body.dr-product-page) .dr-faq-support{
  display: flex; align-items: center; gap: 0.9rem;
  margin-top: 1.75rem; padding: 1.05rem 1.15rem; border-radius: 14px;
  text-decoration: none; border: 1px solid var(--border-strong);
  background: linear-gradient(135deg, rgba(245,138,34,0.12), rgba(0,159,206,0.09));
  transition: transform 0.2s, box-shadow 0.2s;
}
:where(body.dr-product-page) .dr-faq-support:hover{ transform: translateY(-2px); box-shadow: 0 18px 36px -18px rgba(245,138,34,0.45); }
:where(body.dr-product-page) .dr-faq-support__icon{
  display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  border-radius: 12px; color: #fff; background: linear-gradient(135deg, #f9a24a, #f58a22);
  box-shadow: 0 8px 20px -8px rgba(245,138,34,0.6);
}
:where(body.dr-product-page) .dr-faq-support__icon svg{ width: 22px; height: 22px; }
:where(body.dr-product-page) .dr-faq-support__txt{ display: flex; flex-direction: column; gap: 0.1rem; font-size: 0.88rem; color: var(--text-muted); }
:where(body.dr-product-page) .dr-faq-support__txt strong{ color: var(--text); font-family: var(--font-display); font-weight: 600; font-size: 1rem; }

:where(body.dr-product-page) .dr-faq-list{ margin-top: 0; display: grid; gap: 0.85rem; }
:where(body.dr-product-page) details.dr-faq{ padding: 0; overflow: hidden; }
:where(body.dr-product-page) details.dr-faq summary{
  justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.15rem 1.25rem; font-size: 1.02rem;
}
:where(body.dr-product-page) .dr-faq-q{ flex: 1; }
:where(body.dr-product-page) details.dr-faq .dr-faq-answer{ margin-top: 0; padding: 0 1.25rem 1.2rem; }

/* Ensure the final CTA sits clearly below the FAQ with its own stacking layer
   (guards against any overlap from neighbouring section decoration). */
:where(body.dr-product-page) .dr-cta-band{ position: relative; z-index: 2; margin-top: clamp(2rem, 5vw, 4rem); }

/* ---------- Refinements ---------- */
/* Balanced multi-line headings (no orphan words like a lone "AI"). */
:where(body.dr-product-page) .dr-section-title,
:where(body.dr-product-page) .dr-cta-title,
:where(body.dr-product-page) .dr-flagship__title{ text-wrap: balance; }
:where(body.dr-product-page) .dr-section-lede{ text-wrap: pretty; max-width: 60ch; }

/* Benefits: flex-centre so the 5 cards read as an intentional 3 + 2, not a gap. */
:where(body.dr-product-page) .dr-cap-grid{ display: flex; flex-wrap: wrap; justify-content: center; }
:where(body.dr-product-page) .dr-cap-card{ flex: 1 1 300px; max-width: 366px; }

/* Clean, professional alternating section bands (white ↔ soft cool tint).
   Slightly translucent so the ambient background gives gentle life at the
   edges without the page reading as busy. */
:where(body.dr-product-page) .dr-band{
  background: rgba(255,255,255,0.66);
}
:where(body.dr-product-page) .dr-band-alt{
  background: linear-gradient(180deg, rgba(241,246,251,0.90) 0%, rgba(233,240,249,0.93) 100%);
  border-top: 1px solid rgba(15,23,42,0.06);
  border-bottom: 1px solid rgba(15,23,42,0.06);
}

/* The per-section corner glow is now redundant with the ambient wash. */
:where(body.dr-product-page) section.dr-content::before{ display: none; }