/* ============================================================
   Pricebeat marketing surfaces (homepage + verkopers + aux)

   Design tokens, base reset, typography, layout primitives,
   header, hero, sections, FAQ, footer, motion utilities.

   Loads alongside the legacy style.css + overlay CSS files,
   which still own auth/cart/profile/orders/admin overlay
   chrome. New marketing surfaces are the only callers of any
   selector in this file.
   ============================================================ */

/* ----------------------------------------------------------
   Tokens
   ---------------------------------------------------------- */

:root {
  /* Brand palette mirrors Flutter app constants for cross-surface coherence */
  --pb-navy:        #0B1340;
  --pb-brand:       #042D6B;
  --pb-accent:      #1D4ED8;
  --pb-accent-hi:   #2563EB;
  --pb-success:     #059669;
  --pb-success-hi:  #10B981;

  /* Neutrals */
  --pb-ink:         #0A0F1F;
  --pb-ink-2:       #1F2937;
  --pb-muted:       #5B6478;
  --pb-muted-2:     #8A93A6;
  --pb-hairline:    #E5E7EB;
  --pb-hairline-2:  #EEF1F6;
  --pb-tint:        #F4F7FB;
  --pb-tint-2:      #FAFBFD;
  --pb-surface:     #FFFFFF;

  /* Functional */
  --pb-shadow-sm:   0 1px 2px rgba(11, 19, 64, 0.04), 0 1px 3px rgba(11, 19, 64, 0.06);
  --pb-shadow-md:   0 4px 12px rgba(11, 19, 64, 0.06), 0 2px 6px rgba(11, 19, 64, 0.04);
  --pb-shadow-lg:   0 24px 48px rgba(11, 19, 64, 0.10), 0 8px 16px rgba(11, 19, 64, 0.06);
  --pb-shadow-xl:   0 40px 80px rgba(11, 19, 64, 0.16), 0 16px 32px rgba(11, 19, 64, 0.08);

  --pb-radius-sm:   8px;
  --pb-radius-md:   14px;
  --pb-radius-lg:   22px;
  --pb-radius-xl:   32px;
  --pb-radius-pill: 999px;

  /* Type scale (fluid). Tightened after first preview to feel less shouty. */
  --pb-fs-display:  clamp(2.25rem, 3vw + 1rem, 3.75rem);
  --pb-fs-h1:       clamp(1.875rem, 2vw + 1rem, 3rem);
  --pb-fs-h2:       clamp(1.625rem, 1.2vw + 1rem, 2.25rem);
  --pb-fs-h3:       clamp(1.25rem, 0.5vw + 1rem, 1.5rem);
  --pb-fs-h4:       1.0625rem;
  --pb-fs-lead:     clamp(1rem, 0.3vw + 0.95rem, 1.1875rem);
  --pb-fs-body:     1rem;
  --pb-fs-small:    0.9375rem;
  --pb-fs-eyebrow:  0.75rem;

  /* Spacing scale (8px base) */
  --pb-space-1:     4px;
  --pb-space-2:     8px;
  --pb-space-3:     12px;
  --pb-space-4:     16px;
  --pb-space-5:     20px;
  --pb-space-6:     24px;
  --pb-space-8:     32px;
  --pb-space-10:    40px;
  --pb-space-12:    48px;
  --pb-space-16:    64px;
  --pb-space-20:    80px;
  --pb-space-24:    96px;
  --pb-space-32:    128px;

  /* Section rhythm (fluid) */
  --pb-section-y:   clamp(64px, 8vw, 128px);

  /* Container widths */
  --pb-container:   1200px;
  --pb-container-narrow: 880px;
  --pb-container-prose:  720px;

  /* Header height */
  --pb-header-h:    72px;

  /* Motion */
  --pb-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --pb-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --pb-dur-1:       180ms;
  --pb-dur-2:       320ms;
  --pb-dur-3:       560ms;
  --pb-dur-4:       900ms;

  /* Z-index ladder (above 1000 reserved for overlays in style.css) */
  --pb-z-skip:      9999;
  --pb-z-header:    900;
  --pb-z-header-mb: 950;
  --pb-z-banner:    100;
  --pb-z-content:   1;
}

/* ----------------------------------------------------------
   Reset & base
   ---------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--pb-fs-body);
  line-height: 1.55;
  color: var(--pb-ink);
  background: var(--pb-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
}

/* Belt-and-suspenders against style.css. The legacy stylesheet sets bare
   `body { font-family: Roboto; color: #666 }`, big `h1 { 3em }` defaults,
   and `p { line-height: 1.75; color: #666 }`. Since marketing.css loads
   after style.css now, the rules below win. We confine them to marketing
   surfaces (`main`, `.pb-header`, `.pb-footer`) so the cart/profile/auth
   overlays keep their legacy chrome. */
body, main, .pb-header, .pb-footer { font-family: 'Inter', system-ui, sans-serif; }

main h1, main h2, main h3, main h4, main h5, main h6,
.pb-header h1, .pb-header h2, .pb-header h3, .pb-header h4,
.pb-footer h1, .pb-footer h2, .pb-footer h3, .pb-footer h4 {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--pb-ink);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
}

main h1 { font-size: var(--pb-fs-h1); }
main h2 { font-size: var(--pb-fs-h2); }
main h3 { font-size: var(--pb-fs-h3); }
main h4 { font-size: var(--pb-fs-h4); }
main h5 { font-size: 1rem; }
main h6 { font-size: 0.9375rem; }

main p { line-height: 1.55; margin: 0; color: inherit; font-family: inherit; font-size: inherit; }
main a { color: inherit; }
main ul, main ol, main dl,
.pb-footer ul, .pb-footer ol { margin: 0; padding: 0; list-style: none; }

img, svg, video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--pb-accent);
  text-decoration: none;
  transition: color var(--pb-dur-1) var(--pb-ease-out);
}

a:hover { color: var(--pb-accent-hi); }
a:focus-visible {
  outline: 2px solid var(--pb-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

input, textarea, select { font-family: inherit; }

/* Lists kept as default browser margin so overlay markup (auth tabs, address
   forms) stays predictable. Marketing-surface lists are zeroed below in the
   `main ul, main ol` rule. */
p { margin: 0; }

/* ----------------------------------------------------------
   Typography utilities
   ---------------------------------------------------------- */

.pb-eyebrow {
  font-size: var(--pb-fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pb-accent);
}

.pb-eyebrow.is-muted { color: var(--pb-muted); }

.pb-display {
  font-size: var(--pb-fs-display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.pb-h1 { font-size: var(--pb-fs-h1); font-weight: 800; letter-spacing: -0.03em; }
.pb-h2 { font-size: var(--pb-fs-h2); font-weight: 700; letter-spacing: -0.025em; }
.pb-h3 { font-size: var(--pb-fs-h3); font-weight: 700; }
.pb-h4 { font-size: var(--pb-fs-h4); font-weight: 600; }

.pb-lead {
  font-size: var(--pb-fs-lead);
  line-height: 1.55;
  color: var(--pb-muted);
}

.pb-muted  { color: var(--pb-muted); }
.pb-muted2 { color: var(--pb-muted-2); }
.pb-ink    { color: var(--pb-ink); }

.pb-mono {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.875rem;
  letter-spacing: 0;
}

/* ----------------------------------------------------------
   Layout primitives
   ---------------------------------------------------------- */

.pb-container {
  width: 100%;
  max-width: var(--pb-container);
  margin: 0 auto;
  padding-inline: clamp(20px, 4vw, 40px);
}

.pb-container.is-narrow { max-width: var(--pb-container-narrow); }
.pb-container.is-prose  { max-width: var(--pb-container-prose); }

/* Default section: white surface with a soft brand-blue radial in the
   top-right corner. The ambient gradient is what keeps every section
   from reading as a flat box, and is the reason content sections feel
   intentional even when their copy is sparse. */
.pb-section {
  padding-block: var(--pb-section-y);
  position: relative;
  background:
    radial-gradient(55% 45% at 100% 0%, rgba(29, 78, 216, 0.045) 0%, transparent 70%),
    #FFFFFF;
}

.pb-section.is-tight   { padding-block: clamp(40px, 5vw, 80px); }
.pb-section.is-flush-t { padding-top: 0; }
.pb-section.is-flush-b { padding-bottom: 0; }

/* Tinted alternation: a soft top-to-bottom wash with the same ambient
   accent layered on. Hairline borders frame the band and give the
   transition between sections a deliberate edge instead of a sudden
   colour switch. */
.pb-section.is-tinted {
  background:
    radial-gradient(55% 45% at 100% 0%, rgba(29, 78, 216, 0.06) 0%, transparent 70%),
    linear-gradient(180deg, #F4F7FB 0%, #EEF2F8 100%);
  border-top: 1px solid rgba(15, 23, 42, 0.05);
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
}

.pb-section.is-ink {
  background: var(--pb-ink);
  color: #E6E9F2;
}

.pb-section.is-ink h1, .pb-section.is-ink h2,
.pb-section.is-ink h3, .pb-section.is-ink h4 { color: #FFFFFF; }
.pb-section.is-ink .pb-lead,
.pb-section.is-ink .pb-muted { color: #B6BCD0; }

/* Stack: vertical rhythm */
.pb-stack > * + * { margin-top: var(--pb-stack, var(--pb-space-4)); }
.pb-stack-2  { --pb-stack: var(--pb-space-2); }
.pb-stack-3  { --pb-stack: var(--pb-space-3); }
.pb-stack-4  { --pb-stack: var(--pb-space-4); }
.pb-stack-6  { --pb-stack: var(--pb-space-6); }
.pb-stack-8  { --pb-stack: var(--pb-space-8); }
.pb-stack-10 { --pb-stack: var(--pb-space-10); }
.pb-stack-12 { --pb-stack: var(--pb-space-12); }

/* Cluster: horizontal flex with wrap and gap */
.pb-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pb-cluster, var(--pb-space-3));
}

.pb-cluster-2 { --pb-cluster: var(--pb-space-2); }
.pb-cluster-4 { --pb-cluster: var(--pb-space-4); }
.pb-cluster-6 { --pb-cluster: var(--pb-space-6); }

.pb-cluster.is-end    { justify-content: flex-end; }
.pb-cluster.is-center { justify-content: center; }
.pb-cluster.is-spread { justify-content: space-between; }

/* Grid */
.pb-grid {
  display: grid;
  gap: var(--pb-grid-gap, var(--pb-space-6));
}

.pb-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pb-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pb-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.pb-grid.cols-auto-260 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.pb-grid.cols-auto-320 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

@media (max-width: 880px) {
  .pb-grid.cols-2,
  .pb-grid.cols-3,
  .pb-grid.cols-4 { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 881px) and (max-width: 1100px) {
  .pb-grid.cols-3,
  .pb-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pb-grid.has-center {
  align-items: center;
}

.pb-grid-gap-4  { --pb-grid-gap: var(--pb-space-4); }
.pb-grid-gap-8  { --pb-grid-gap: var(--pb-space-8); }
.pb-grid-gap-12 { --pb-grid-gap: var(--pb-space-12); }

/* Two-up hero layout: 6/6 desktop, stack on tablet */
.pb-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

@media (max-width: 1000px) {
  .pb-split { grid-template-columns: minmax(0, 1fr); }
}

/* Section title block */
.pb-section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--pb-space-12);
}

/* Section eyebrow: small leading line gives the label a deliberate,
   editorial feel rather than feeling like a stray uppercase tag. */
.pb-section-head .pb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--pb-space-3);
}
.pb-section-head .pb-eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}
.pb-section-head .pb-h2      { margin-bottom: var(--pb-space-4); }
.pb-section-head .pb-lead    { margin-bottom: 0; }

.pb-section-head.is-start { text-align: left; margin-inline: 0; }

/* When .pb-brand-gradient sits inside a heading, inherit the heading's
   weight so the highlighted phrase matches the surrounding type instead
   of dropping to the gradient utility's default 600. */
.pb-h1 .pb-brand-gradient,
.pb-h2 .pb-brand-gradient,
.pb-h3 .pb-brand-gradient,
.pb-display .pb-brand-gradient { font-weight: inherit; }

/* Optional thin gradient rule under a section head, used as a deliberate
   visual transition from the intro copy into the section's content below.
   Opt in with .pb-section-head--how (or any section-specific modifier). */
.pb-section-head-accent {
  display: block;
  width: 64px;
  height: 3px;
  margin: var(--pb-space-6) auto 0;
  background: linear-gradient(90deg, #1D4ED8 0%, #60A5FA 100%);
  border-radius: 999px;
  opacity: 0.85;
}

.pb-section-head--how { margin-bottom: var(--pb-space-10); }

/* ----------------------------------------------------------
   Buttons
   ---------------------------------------------------------- */

.pb-btn {
  --pb-btn-bg:     var(--pb-accent);
  --pb-btn-bg-hi:  var(--pb-accent-hi);
  --pb-btn-fg:     #FFFFFF;
  --pb-btn-bd:     transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pb-space-2);
  padding: 14px 22px;
  border-radius: var(--pb-radius-pill);
  background: var(--pb-btn-bg);
  color: var(--pb-btn-fg);
  font-size: var(--pb-fs-small);
  font-weight: 600;
  letter-spacing: -0.005em;
  border: 1px solid var(--pb-btn-bd);
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--pb-dur-1) var(--pb-ease-out),
              background var(--pb-dur-1) var(--pb-ease-out),
              box-shadow var(--pb-dur-1) var(--pb-ease-out),
              color var(--pb-dur-1) var(--pb-ease-out);
  box-shadow: var(--pb-shadow-sm);
}

.pb-btn:hover {
  background: var(--pb-btn-bg-hi);
  color: var(--pb-btn-fg);
  transform: translateY(-1px);
  box-shadow: var(--pb-shadow-md);
}

.pb-btn:active { transform: translateY(0); }

.pb-btn:focus-visible {
  outline: 2px solid var(--pb-accent);
  outline-offset: 3px;
}

.pb-btn.is-ghost {
  --pb-btn-bg: transparent;
  --pb-btn-bg-hi: rgba(29, 78, 216, 0.08);
  --pb-btn-fg: var(--pb-ink);
  --pb-btn-bd: var(--pb-hairline);
  box-shadow: none;
}

.pb-btn.is-ghost:hover { color: var(--pb-ink); box-shadow: none; }

.pb-btn.is-on-dark {
  --pb-btn-bg: #FFFFFF;
  --pb-btn-bg-hi: #F4F7FB;
  --pb-btn-fg: var(--pb-ink);
}

.pb-btn.is-on-dark.is-ghost {
  --pb-btn-bg: transparent;
  --pb-btn-bg-hi: rgba(255,255,255,0.08);
  --pb-btn-fg: #FFFFFF;
  --pb-btn-bd: rgba(255,255,255,0.32);
}

.pb-btn.is-sm { padding: 10px 16px; font-size: 0.875rem; }
.pb-btn.is-lg { padding: 16px 28px; font-size: 1rem; }

.pb-btn .pb-btn-icon { display: inline-flex; align-items: center; }

/* Store badge button (Play, App Store, Chrome Web Store).
   Uses the brand accent blue so install affordances stay on-palette. */
.pb-store-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-radius: var(--pb-radius-md);
  background: var(--pb-accent);
  color: #FFFFFF;
  text-decoration: none;
  transition: transform var(--pb-dur-1) var(--pb-ease-out),
              background var(--pb-dur-1) var(--pb-ease-out),
              box-shadow var(--pb-dur-1) var(--pb-ease-out);
  box-shadow: 0 6px 14px -6px rgba(29, 78, 216, 0.45);
}

.pb-store-btn:hover {
  background: var(--pb-accent-hi);
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 12px 22px -8px rgba(29, 78, 216, 0.55);
}

.pb-store-btn-icon {
  font-size: 1.5rem;
  line-height: 1;
  display: inline-flex;
}

.pb-store-btn-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
}

.pb-store-btn-text small {
  font-size: 0.6875rem;
  opacity: 0.75;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pb-store-btn-text strong {
  font-size: 1rem;
  font-weight: 700;
}

.pb-store-btn.is-disabled {
  opacity: 0.55;
  pointer-events: none;
  background: var(--pb-muted);
}

/* On-dark variant for badges placed inside the hero. White surface, ink text,
   prominent border so they read as primary install affordances. */
.pb-store-btn.is-on-dark {
  background: #FFFFFF;
  color: var(--pb-ink);
  border: 1px solid rgba(255,255,255,0.92);
  box-shadow: 0 8px 24px rgba(0,0,0,0.30), 0 2px 6px rgba(0,0,0,0.18);
}

.pb-store-btn.is-on-dark:hover {
  background: #F4F7FB;
  color: var(--pb-ink);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0,0,0,0.35), 0 4px 8px rgba(0,0,0,0.20);
}

.pb-store-btn.is-on-dark.is-disabled {
  background: rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.55);
  border-color: rgba(255,255,255,0.16);
  box-shadow: none;
}

/* ----------------------------------------------------------
   Cards (shared)
   ---------------------------------------------------------- */

.pb-card {
  background: var(--pb-surface);
  border: 1px solid var(--pb-hairline);
  border-radius: var(--pb-radius-lg);
  padding: clamp(20px, 2vw, 32px);
  transition: transform var(--pb-dur-2) var(--pb-ease-out),
              box-shadow var(--pb-dur-2) var(--pb-ease-out),
              border-color var(--pb-dur-2) var(--pb-ease-out);
}

.pb-card.is-elev    { box-shadow: var(--pb-shadow-md); }
.pb-card.is-glass   {
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-color: rgba(255,255,255,0.6);
}

.pb-card.is-tinted  { background: var(--pb-tint); border-color: var(--pb-hairline-2); }
.pb-card.is-ink     { background: var(--pb-ink); border-color: rgba(255,255,255,0.06); color: #E6E9F2; }
.pb-card.is-ink h1, .pb-card.is-ink h2,
.pb-card.is-ink h3, .pb-card.is-ink h4 { color: #FFFFFF; }

.pb-card.is-hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--pb-shadow-lg);
  border-color: var(--pb-hairline-2);
}

/* ----------------------------------------------------------
   Forms
   ---------------------------------------------------------- */

.pb-input,
.pb-textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--pb-radius-md);
  border: 1px solid var(--pb-hairline);
  background: var(--pb-surface);
  color: var(--pb-ink);
  font-size: var(--pb-fs-body);
  line-height: 1.4;
  transition: border-color var(--pb-dur-1) var(--pb-ease-out),
              box-shadow var(--pb-dur-1) var(--pb-ease-out);
}

.pb-textarea {
  min-height: 140px;
  resize: vertical;
  font-family: inherit;
}

.pb-input:focus,
.pb-textarea:focus {
  outline: none;
  border-color: var(--pb-accent);
  box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.14);
}

.pb-input::placeholder,
.pb-textarea::placeholder {
  color: var(--pb-muted-2);
}

.pb-field-label {
  display: block;
  font-size: var(--pb-fs-small);
  font-weight: 600;
  color: var(--pb-ink);
  margin-bottom: 6px;
}

.pb-form-result {
  padding: var(--pb-space-4) var(--pb-space-5);
  border-radius: var(--pb-radius-md);
  font-size: var(--pb-fs-small);
  margin-top: var(--pb-space-4);
}

.pb-form-result.is-success { background: rgba(5, 150, 105, 0.08); color: var(--pb-success); border: 1px solid rgba(5, 150, 105, 0.2); }
.pb-form-result.is-error   { background: rgba(220, 38, 38, 0.08); color: #B91C1C;          border: 1px solid rgba(220, 38, 38, 0.2); }

/* ----------------------------------------------------------
   Reveal-on-scroll
   ---------------------------------------------------------- */

.pb-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--pb-dur-3) var(--pb-ease-out),
              transform var(--pb-dur-3) var(--pb-ease-out);
  transition-delay: var(--pb-reveal-delay, 0ms);
  will-change: opacity, transform;
}

.pb-reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

.pb-reveal-stagger > * { opacity: 0; transform: translateY(14px); }
.pb-reveal-stagger.is-in > * {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--pb-dur-3) var(--pb-ease-out),
              transform var(--pb-dur-3) var(--pb-ease-out);
}

.pb-reveal-stagger.is-in > *:nth-child(1) { transition-delay: 0ms; }
.pb-reveal-stagger.is-in > *:nth-child(2) { transition-delay: 80ms; }
.pb-reveal-stagger.is-in > *:nth-child(3) { transition-delay: 160ms; }
.pb-reveal-stagger.is-in > *:nth-child(4) { transition-delay: 240ms; }
.pb-reveal-stagger.is-in > *:nth-child(5) { transition-delay: 320ms; }
.pb-reveal-stagger.is-in > *:nth-child(6) { transition-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .pb-reveal,
  .pb-reveal-stagger > * {
    opacity: 1;
    transform: none;
  }
}

/* ----------------------------------------------------------
   Accessibility helpers
   ---------------------------------------------------------- */

.pb-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.pb-skip-link {
  position: absolute;
  top: -44px; left: 16px;
  z-index: var(--pb-z-skip);
  padding: 8px 14px;
  background: var(--pb-ink);
  color: #FFFFFF;
  border-radius: var(--pb-radius-sm);
  font-size: var(--pb-fs-small);
  text-decoration: none;
  transition: top var(--pb-dur-1) var(--pb-ease-out);
}

.pb-skip-link:focus {
  top: 12px;
  color: #FFFFFF;
}

/* ============================================================
   HEADER
   ============================================================ */

.pb-header {
  position: sticky;
  top: 0;
  z-index: var(--pb-z-header);
  height: var(--pb-header-h);
  display: flex;
  align-items: center;
  /* No backdrop-filter on the header itself — that would make .pb-header a
     containing block for fixed-positioned descendants, which would trap the
     mobile fullscreen .pb-nav inside the header's 72px box. The frosted
     bar is rendered by ::before below instead. */
}

.pb-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--pb-dur-2) var(--pb-ease-out),
              box-shadow var(--pb-dur-2) var(--pb-ease-out);
  z-index: -1;
  pointer-events: none;
}

/* When scrolled past the hero, add a hairline + soft shadow so the bar
   feels anchored over light content below. */
.pb-header.is-stuck::before {
  border-bottom-color: var(--pb-hairline);
  box-shadow: var(--pb-shadow-sm);
}

.pb-header-inner {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--pb-space-6);
}

.pb-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.pb-logo img {
  height: 22px;
  width: auto;
  display: block;
}

.pb-nav {
  display: flex;
  align-items: center;
  gap: var(--pb-space-2);
  margin-left: auto;
}

.pb-nav-link {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: var(--pb-radius-pill);
  font-size: var(--pb-fs-small);
  font-weight: 500;
  color: var(--pb-brand);
  text-decoration: none;
  transition: color var(--pb-dur-1) var(--pb-ease-out),
              background var(--pb-dur-1) var(--pb-ease-out);
}

.pb-nav-link:hover { background: var(--pb-tint); color: var(--pb-accent); }

.pb-nav-link.is-cart {
  position: relative;
  padding-right: 14px;
}

/* Wrapper around the cart icon so the badge can sit absolutely over the
   icon's top-right corner without contributing to the link's inline width.
   Without this, showing the badge widens the cart link by ~24px and pushes
   neighbouring nav links (e.g. "Hoe het werkt", "Voor verkopers") to wrap
   onto two lines on tighter desktop viewports. */
.pb-cart-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

/* Glowing nav link (used on homepage to draw attention to "Voor verkopers").
   Periodically pulses the text with a soft accent-blue glow. */
.pb-nav-link.is-pulse {
  animation: pb-nav-text-glow 2.8s ease-in-out infinite;
}
@keyframes pb-nav-text-glow {
  0%, 100% {
    color: var(--pb-brand);
    text-shadow: 0 0 0 rgba(29, 78, 216, 0);
  }
  50% {
    color: var(--pb-accent);
    text-shadow:
      0 0 6px  rgba(29, 78, 216, 0.55),
      0 0 14px rgba(29, 78, 216, 0.35),
      0 0 24px rgba(29, 78, 216, 0.18);
  }
}
.pb-nav-link.is-pulse:hover {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .pb-nav-link.is-pulse {
    animation: none;
    color: var(--pb-accent);
  }
}

.pb-cart-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  margin: 0;
  border-radius: 999px;
  background: var(--pb-accent);
  color: #FFFFFF;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  border: 2px solid var(--pb-surface);
  pointer-events: none;
}

.pb-header-end {
  display: flex;
  align-items: center;
  gap: var(--pb-space-2);
  margin-left: var(--pb-space-2);
}

/* ----------------------------------------------------------
   Sign Up / Log In pill (shared with logged-in user button)

   `auth.js` rebuilds the anchor on user state change and only preserves
   the `.signup-btn` class. So all visual styling lives here keyed off
   `.pb-header .signup-btn` directly. The pseudo-element avatar dot is
   purely cosmetic and survives the rebuild.
   ---------------------------------------------------------- */

.pb-header .signup-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 10px;
  border-radius: var(--pb-radius-pill);
  background: linear-gradient(180deg, var(--pb-brand) 0%, #02174a 100%);
  color: #FFFFFF;
  font-size: var(--pb-fs-small);
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    0 1px 2px  rgba(11, 19, 64, 0.20),
    0 6px 16px rgba(11, 19, 64, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  white-space: nowrap;
  transition: transform var(--pb-dur-1) var(--pb-ease-out),
              box-shadow var(--pb-dur-1) var(--pb-ease-out),
              background var(--pb-dur-2) var(--pb-ease-out),
              color var(--pb-dur-1) var(--pb-ease-out);
}

.pb-header .signup-btn::before {
  content: "\f007"; /* fa-user */
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
  font-size: 0.6875rem;
  flex-shrink: 0;
  transition: background var(--pb-dur-1) var(--pb-ease-out);
}

.pb-header .signup-btn:hover {
  background: linear-gradient(180deg, var(--pb-accent) 0%, var(--pb-brand) 100%);
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow:
    0 2px 4px  rgba(11, 19, 64, 0.22),
    0 12px 24px rgba(29, 78, 216, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.pb-header .signup-btn:hover::before {
  background: rgba(255, 255, 255, 0.26);
}

.pb-header .signup-btn:active { transform: translateY(0); }

.pb-header .signup-btn:focus-visible {
  outline: 2px solid var(--pb-accent);
  outline-offset: 3px;
}

/* Logged-in variant. auth.js adds .user-profile-btn alongside .signup-btn
   and changes the text to "Hi, {name}". Keep the same look but slightly
   lighter so it feels like a profile chip rather than a CTA. */
.pb-header .signup-btn.user-profile-btn {
  background: rgba(11, 19, 64, 0.92);
}

.pb-header .signup-btn.user-profile-btn::before {
  content: "\f007";
  background: rgba(255, 255, 255, 0.16);
}

@media (max-width: 980px) {
  .pb-header-end .signup-btn { width: 100%; justify-content: center; }
}

.pb-lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--pb-radius-pill);
  border: 1px solid var(--pb-hairline);
  background: transparent;
}

.pb-lang button {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--pb-muted);
  padding: 2px 8px;
  border-radius: var(--pb-radius-pill);
  cursor: pointer;
  transition: background var(--pb-dur-1) var(--pb-ease-out),
              color var(--pb-dur-1) var(--pb-ease-out);
}

.pb-lang button:hover:not(.is-active) {
  color: var(--pb-ink);
  background: rgba(15, 23, 42, 0.05);
}

.pb-lang button.is-active {
  background: var(--pb-brand);
  color: #FFFFFF;
}

/* Fallback active style for .lang-flag buttons that don't sit inside a
   .pb-lang pill (auxiliary pages: 404, verify-email, reset-password). */
.lang-flag.is-active {
  color: var(--pb-brand);
  font-weight: 700;
}

/* Mobile menu toggle */
.pb-menu-toggle {
  display: none;
  width: 40px; height: 40px;
  border-radius: var(--pb-radius-md);
  background: transparent;
  position: relative;
}

.pb-menu-toggle span {
  position: absolute;
  left: 10px; right: 10px;
  height: 2px;
  background: var(--pb-ink);
  border-radius: 2px;
  transition: transform var(--pb-dur-2) var(--pb-ease-out),
              opacity var(--pb-dur-1) var(--pb-ease-out),
              top var(--pb-dur-2) var(--pb-ease-out),
              background var(--pb-dur-1) var(--pb-ease-out);
}
.pb-menu-toggle span:nth-child(1) { top: 14px; }
.pb-menu-toggle span:nth-child(2) { top: 19px; }
.pb-menu-toggle span:nth-child(3) { top: 24px; }

.pb-menu-toggle.is-open span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.pb-menu-toggle.is-open span:nth-child(2) { opacity: 0; }
.pb-menu-toggle.is-open span:nth-child(3) { top: 19px; transform: rotate(-45deg); }

@media (max-width: 980px) {
  .pb-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    border: 1px solid var(--pb-hairline);
    cursor: pointer;
  }
  .pb-nav {
    position: fixed;
    inset: var(--pb-header-h) 0 0 0;
    margin: 0;
    padding: var(--pb-space-8) var(--pb-space-6);
    background: var(--pb-surface);
    flex-direction: column;
    align-items: stretch;
    gap: var(--pb-space-2);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--pb-dur-2) var(--pb-ease-out),
                transform var(--pb-dur-2) var(--pb-ease-out);
    overflow-y: auto;
    border-top: 1px solid var(--pb-hairline);
  }
  .pb-nav.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .pb-nav-link {
    padding: 14px 16px;
    font-size: 1rem;
    border-radius: var(--pb-radius-md);
    width: 100%;
    justify-content: flex-start;
  }
  .pb-header-end {
    margin-left: 0;
    margin-top: var(--pb-space-4);
    flex-direction: column;
    align-items: stretch;
    gap: var(--pb-space-3);
  }
  .pb-header-end .pb-btn,
  .pb-header-end .pb-lang {
    width: 100%;
    justify-content: center;
  }

  /* Mobile-only: when authenticated, the desktop "Hi, name" pill is
     suppressed and replaced inline by .pb-mobile-user. The pill on its
     own would still try to open the floating popup which doesn't fit. */
  body.is-authenticated .pb-header-end .signup-btn { display: none; }

  /* The mobile user section reveals itself when auth.js drops the
     `hidden` attribute. Outside the mobile breakpoint it stays
     display: none regardless of the attribute. */
  .pb-mobile-user:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: var(--pb-space-1);
    margin-top: var(--pb-space-4);
    padding-top: var(--pb-space-4);
    border-top: 1px solid var(--pb-hairline);
  }

  .pb-mobile-user .pb-nav-link.is-logout {
    color: #B91C1C;
  }
  .pb-mobile-user .pb-nav-link.is-logout:hover {
    background: rgba(185, 28, 28, 0.08);
    color: #B91C1C;
  }
}

/* Default: hidden on desktop. The mobile media query above flips it on
   when (a) we're <= 980px wide AND (b) auth.js has removed the [hidden]
   attribute on the wrapper. */
.pb-mobile-user { display: none; }

.pb-mobile-user-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 16px 12px;
}

.pb-mobile-user-email {
  font-weight: 600;
  color: var(--pb-ink);
  font-size: var(--pb-fs-small);
  word-break: break-all;
}

.pb-mobile-user-status {
  font-size: 0.8125rem;
  color: var(--pb-muted);
}

/* ============================================================
   HERO
   ============================================================ */

.pb-hero {
  position: relative;
  isolation: isolate;
  color: #FFFFFF;
  padding-top: clamp(56px, 7vw, 100px);
  padding-bottom: clamp(80px, 9vw, 130px);
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 80% -10%, rgba(29, 78, 216, 0.55) 0%, rgba(29, 78, 216, 0) 60%),
    radial-gradient(80% 60% at 0% 0%, rgba(96, 165, 250, 0.20) 0%, rgba(96, 165, 250, 0) 60%),
    linear-gradient(180deg, #0A1238 0%, #0B1340 35%, #0E1B4D 100%);
}

/* WebGL mesh-gradient shader canvas. JS appends a single <canvas> here.
   On any failure (no WebGL, shader compile error, lost context) we leave
   the wrapper empty and the static .pb-hero gradient remains the visible
   background. */
.pb-hero-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.pb-hero-fx canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* Heavy blur turns the low-frequency noise into smooth, mesh-gradient
     color regions; the slight scale-up hides the blurred edges. */
  filter: blur(48px);
  transform: scale(1.12);
  transform-origin: center;
}

.pb-hero::after {
  /* Bright halo behind the phone */
  content: "";
  position: absolute;
  right: -10%;
  top: 8%;
  width: 60%; height: 60%;
  background: radial-gradient(closest-side, rgba(96, 165, 250, 0.35) 0%, rgba(96, 165, 250, 0) 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}

.pb-hero > .pb-container {
  position: relative;
  z-index: 1;
}

.pb-hero h1, .pb-hero h2, .pb-hero h3 { color: #FFFFFF; }

.pb-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--pb-radius-pill);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #BFD3FF;
  margin-bottom: var(--pb-space-6);
}

.pb-hero-eyebrow .pb-pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--pb-success-hi);
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: pb-pulse 2.4s ease-out infinite;
}

@keyframes pb-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
  70%  { box-shadow: 0 0 0 12px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.pb-hero-headline {
  max-width: 18ch;
  margin-bottom: var(--pb-space-6);
  background: linear-gradient(180deg, #FFFFFF 0%, #DDE5FF 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

.pb-hero-sub {
  max-width: 52ch;
  color: #B6BCD0;
  font-size: clamp(1.0625rem, 0.4vw + 1rem, 1.25rem);
  line-height: 1.55;
  margin-bottom: var(--pb-space-8);
}

.pb-hero-stores {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pb-space-3);
  margin-bottom: var(--pb-space-5);
}

/* Keep store-button text from wrapping mid-label inside the button. */
.pb-hero-stores .pb-store-btn-text small,
.pb-hero-stores .pb-store-btn-text strong { white-space: nowrap; }

/* Mobile: stack the install affordances and let each button take the full
   available column width. Avoids the cramped wrap-to-2-then-orphan-1 layout
   and gives proper tap targets. */
@media (max-width: 600px) {
  .pb-hero-stores {
    flex-direction: column;
    align-items: stretch;
    gap: var(--pb-space-2);
    max-width: 320px;
  }
  .pb-hero-stores .pb-store-btn {
    width: 100%;
    justify-content: flex-start;
    padding: 11px 16px;
  }
}

.pb-hero-tertiary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--pb-fs-small);
  color: #BFCBE6;
  text-decoration: none;
  font-weight: 500;
  margin-bottom: var(--pb-space-6);
  transition: color var(--pb-dur-1) var(--pb-ease-out), gap var(--pb-dur-1) var(--pb-ease-out);
}

.pb-hero-tertiary:hover {
  color: #FFFFFF;
  gap: 12px;
}

.pb-hero-tertiary i { font-size: 0.8125rem; }

.pb-hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pb-space-4) var(--pb-space-6);
  align-items: center;
  margin-top: var(--pb-space-8);
  font-size: var(--pb-fs-small);
  color: #B6BCD0;
}

.pb-hero-trust-item { display: inline-flex; align-items: center; gap: 8px; }
.pb-hero-trust-item .pb-check {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.16);
  color: var(--pb-success-hi);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.625rem;
}

/* Phone mockup */
.pb-hero-art {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  perspective: 1200px;
  min-height: 480px;
}

.pb-phone {
  position: relative;
  width: min(360px, 88%);
  filter: drop-shadow(0 40px 60px rgba(0,0,0,0.55))
          drop-shadow(0 0 80px rgba(96, 165, 250, 0.20));
  transform: rotate(-3deg) translateY(0);
  animation: pb-phone-float 6s ease-in-out infinite;
}

.pb-phone img { width: 100%; height: auto; display: block; }

@keyframes pb-phone-float {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50%      { transform: rotate(-2deg) translateY(-10px); }
}

@media (max-width: 1000px) {
  .pb-hero-art { min-height: 360px; margin-top: var(--pb-space-8); }
}

/* The animated waves at the bottom of the hero use the existing markup
   and animation defined in animated-backgrounds.css. We adjust their
   position and scale them with the viewport so the wave keeps roughly
   the same shape on phones as on desktop instead of dominating the
   small viewport. */
.pb-hero .wave-effect {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: clamp(60px, 10vw, 140px);
  z-index: 1;
  pointer-events: none;
}

/* style.css pins the per-layer background-size to fixed pixel heights
   (.wave-one 100px, .wave-two 120px, .wave-three 100px). When the
   container shrinks below those values the image stays at full pixel
   height and the wavy upper edge is clipped by overflow:hidden, leaving
   only the lower half of the wave visible — which reads as inverted
   "dips" instead of waves. Switch the height to 100% so the image
   scales with the wave-effect container. The 50% width is kept from
   style.css (= 100vw, since .wave itself is 200vw), which gives one
   full PNG cycle per viewport. */
.pb-hero .wave-one,
.pb-hero .wave-two,
.pb-hero .wave-three {
  background-size: 50% 100%;
}

/* ============================================================
   TRUST STRIP
   ============================================================ */

.pb-trust {
  padding-block: clamp(40px, 5vw, 72px);
  border-top: 1px solid var(--pb-hairline-2);
  border-bottom: 1px solid var(--pb-hairline-2);
}

.pb-trust-label {
  text-align: center;
  font-size: var(--pb-fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pb-muted);
  margin-bottom: var(--pb-space-6);
}

.pb-trust-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4vw, 56px);
}

.pb-trust-row img {
  height: clamp(20px, 2vw, 28px);
  width: auto;
  filter: grayscale(100%) opacity(0.45);
  transition: filter var(--pb-dur-2) var(--pb-ease-out),
              transform var(--pb-dur-2) var(--pb-ease-out);
}

.pb-trust-row img:hover {
  filter: grayscale(0%) opacity(1);
  transform: translateY(-1px);
}

/* ============================================================
   HOW IT WORKS (3-step row)
   ============================================================ */

.pb-step {
  position: relative;
  padding-left: clamp(48px, 5vw, 72px);
}

.pb-step-num {
  position: absolute;
  left: 0; top: 4px;
  width: clamp(36px, 4vw, 48px);
  height: clamp(36px, 4vw, 48px);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  color: var(--pb-accent);
  background: rgba(29, 78, 216, 0.10);
  border: 1px solid rgba(29, 78, 216, 0.20);
}

.pb-step h3 { font-size: 1.1875rem; margin-bottom: var(--pb-space-2); }
.pb-step p  { color: var(--pb-muted); line-height: 1.55; }

/* ============================================================
   HOW IT WORKS: vertical timeline (numbered marker on the left,
   content on the right). Step 2 hosts two phone-framed demo
   videos, since that's the step the user actually performs.
   The videos autoplay muted once when scrolled into view, freeze
   on the last frame, and surface a replay button below.
   ============================================================ */

.pb-flow {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pb-space-10);
  max-width: 1200px;
  margin: 0 auto;
  align-items: start;
}

.pb-flow-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--pb-space-10);
}

.pb-flow-step {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--pb-space-6);
  align-items: start;
}

.pb-flow-step-marker {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--pb-accent);
  background: rgba(29, 78, 216, 0.10);
  border: 1px solid rgba(29, 78, 216, 0.20);
  border-radius: 50%;
}

.pb-flow-step-content { padding-top: 10px; }

.pb-flow-step-title {
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--pb-navy);
  margin: 0 0 var(--pb-space-3);
}

.pb-flow-step-body {
  color: var(--pb-muted);
  line-height: 1.65;
  margin: 0;
}

.pb-flow-media {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pb-space-8);
}

.pb-flow-video-caption {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pb-accent);
}

/* Desktop: steps left, videos right. Videos sit side by side inside the
   right column at a phone size that holds the wow factor. Sticky keeps
   them anchored while the user reads through the steps. Cards are pinned
   to fixed widths so the flex layout actually honors the phone size
   instead of collapsing to min-content. */
@media (min-width: 1200px) {
  .pb-flow {
    grid-template-columns: minmax(0, 1fr) 600px;
    gap: var(--pb-space-12);
    align-items: stretch;
  }
  /* Steps column stretches to match the phones' height; the three steps
     distribute themselves so step 1 aligns to the top and step 3 aligns
     to the bottom of the phone showcase. A min-gap keeps step 2 from
     drifting too far up or down if content lengths shift. */
  .pb-flow-steps {
    justify-content: space-between;
    gap: var(--pb-space-8);
    min-height: 100%;
  }
  .pb-flow-media {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: var(--pb-space-6);
    position: sticky;
    top: var(--pb-space-10);
  }
  .pb-flow-media .pb-how-video-card {
    flex: 0 0 280px;
    width: 280px;
    max-width: 280px;
  }
  .pb-flow-media .pb-phone-frame {
    width: 100%;
    max-width: 280px;
  }
}

@media (max-width: 720px) {
  .pb-flow {
    gap: var(--pb-space-8);
    max-width: 520px;
  }
  .pb-flow-steps { gap: var(--pb-space-8); }
  .pb-flow-step {
    grid-template-columns: 48px 1fr;
    gap: var(--pb-space-4);
  }
  .pb-flow-step-marker {
    width: 48px;
    height: 48px;
    font-size: 1.125rem;
  }
  .pb-flow-step-content { padding-top: 6px; }
  .pb-flow-step-title { font-size: 1.1875rem; }
  .pb-flow-media {
    gap: var(--pb-space-6);
  }
}

/* ============================================================
   HOW IT WORKS: phone-framed demo videos (verkopers manifesto
   uses the standalone .pb-how-videos pair below the manifesto
   statement). The video card, phone frame, and replay button
   styles are shared with the index "Scan" step above.
   ============================================================ */

.pb-how-videos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pb-space-10);
  max-width: 640px;
  margin: var(--pb-space-12) auto 0;
  justify-items: center;
}

@media (max-width: 720px) {
  .pb-how-videos {
    grid-template-columns: 1fr;
    gap: var(--pb-space-8);
  }
}

.pb-how-video-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pb-space-3);
  width: 100%;
}

.pb-phone-frame {
  position: relative;
  width: 100%;
  max-width: 260px;
  aspect-ratio: 9 / 19.5;
  margin: 0;
  background: linear-gradient(160deg, #1B2348 0%, #050816 100%);
  border-radius: 36px;
  box-shadow:
    0 30px 60px -22px rgba(11, 19, 64, 0.55),
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 0 0 1px rgba(255, 255, 255, 0.04);
  cursor: pointer;
  /* iOS Safari taps suppress the gray highlight overlay we don't want here. */
  -webkit-tap-highlight-color: transparent;
}

.pb-phone-frame-notch {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 38%;
  height: 18px;
  background: #03050E;
  border-radius: 999px;
  z-index: 3;
}

.pb-phone-frame-screen {
  position: absolute;
  inset: 9px;
  border-radius: 28px;
  overflow: hidden;
  background: #03050E;
}

.pb-how-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #03050E;
}

.pb-video-replay {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  background: transparent;
  border: 0;
  color: var(--pb-muted);
  font: 600 0.8125rem/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: color 0.2s var(--pb-ease-out);
}

.pb-video-replay[hidden] { display: none; }

.pb-video-replay i { font-size: 0.875rem; }

.pb-video-replay:hover { color: var(--pb-accent); }

.pb-video-replay:focus-visible {
  outline: 2px solid var(--pb-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ============================================================
   SELLERS TEASER BAND
   ============================================================ */

.pb-sellers-teaser {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(80% 100% at 100% 50%, rgba(29, 78, 216, 0.45) 0%, rgba(29, 78, 216, 0) 70%),
    linear-gradient(135deg, #0B1340 0%, #1B2D72 100%);
  color: #FFFFFF;
  border-radius: var(--pb-radius-xl);
  padding: clamp(40px, 5vw, 72px);
  overflow: hidden;
}

.pb-sellers-teaser::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 80% at 30% 50%, #000 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 30% 50%, #000 0%, transparent 80%);
  z-index: -1;
}

.pb-sellers-teaser h2 {
  color: #FFFFFF;
  font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem);
  max-width: 18ch;
  margin-bottom: var(--pb-space-4);
}

.pb-sellers-teaser p {
  color: #BFCBE6;
  max-width: 56ch;
  font-size: var(--pb-fs-lead);
  line-height: 1.55;
  margin-bottom: var(--pb-space-6);
}

/* ============================================================
   FAQ (native details/summary)
   ============================================================ */

.pb-faq {
  display: grid;
  gap: var(--pb-space-3);
  max-width: 820px;
  margin: 0 auto;
  /* Lets the height transition between 0 and auto on ::details-content. */
  interpolate-size: allow-keywords;
}

.pb-faq-item {
  border: 1px solid var(--pb-hairline);
  border-radius: var(--pb-radius-md);
  background: var(--pb-surface);
  overflow: hidden;
  transition: border-color var(--pb-dur-2) var(--pb-ease-out),
              box-shadow var(--pb-dur-2) var(--pb-ease-out);
}

.pb-faq-item[open] {
  border-color: rgba(29, 78, 216, 0.3);
  box-shadow: var(--pb-shadow-sm);
}

/* Smooth open/close: animate the panel's height and a content fade.
   Browsers without ::details-content support fall back to instant toggle. */
.pb-faq-item::details-content {
  block-size: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    block-size 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.28s ease,
    content-visibility 0.42s allow-discrete;
}

.pb-faq-item[open]::details-content {
  block-size: auto;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .pb-faq-item::details-content,
  .pb-faq-item[open]::details-content {
    transition: none;
  }
}

.pb-faq-summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 24px;
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--pb-ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pb-space-4);
  transition: color var(--pb-dur-1) var(--pb-ease-out);
}

.pb-faq-summary::-webkit-details-marker { display: none; }
.pb-faq-summary::marker { display: none; content: ""; }

.pb-faq-summary::after {
  content: "+";
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--pb-tint);
  color: var(--pb-muted);
  font-size: 1.25rem;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform var(--pb-dur-2) var(--pb-ease-out),
              background var(--pb-dur-1) var(--pb-ease-out),
              color var(--pb-dur-1) var(--pb-ease-out);
}

.pb-faq-item[open] .pb-faq-summary::after {
  content: "+";
  transform: rotate(45deg);
  background: var(--pb-accent);
  color: #FFFFFF;
}

.pb-faq-body {
  padding: 0 24px 24px;
  color: var(--pb-muted);
  line-height: 1.65;
  font-size: var(--pb-fs-small);
}

.pb-faq-foot {
  text-align: center;
  margin-top: var(--pb-space-8);
  color: var(--pb-muted);
  font-size: var(--pb-fs-small);
}

.pb-faq-foot a { font-weight: 600; }

/* ============================================================
   NEWSLETTER STRIP
   ============================================================ */

/* Dark navy CTA card. Sits on top of either the white or tinted section
   background and is meant to read as the conversion moment of the page,
   so it is intentionally the highest-contrast surface in the layout. */
.pb-newsletter {
  position: relative;
  isolation: isolate;
  background: linear-gradient(135deg, var(--pb-brand) 0%, var(--pb-navy) 100%);
  border-radius: var(--pb-radius-xl);
  padding: clamp(40px, 5vw, 72px);
  overflow: hidden;
  color: #FFFFFF;
  box-shadow: var(--pb-shadow-lg);
}

/* Soft brand-coloured glow. Two radial gradients in opposing corners
   keep the navy from looking flat without competing with the copy. */
.pb-newsletter::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(45% 80% at 100% 0%, rgba(37, 99, 235, 0.45) 0%, transparent 60%),
    radial-gradient(45% 80% at 0% 100%, rgba(16, 185, 129, 0.18) 0%, transparent 60%);
  z-index: -1;
  pointer-events: none;
}

.pb-newsletter .pb-eyebrow {
  color: #93B4FF;
}

.pb-newsletter h2 {
  color: #FFFFFF;
  font-size: clamp(1.5rem, 1.5vw + 1rem, 2rem);
  margin-bottom: var(--pb-space-3);
}

.pb-newsletter p {
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: var(--pb-space-6);
  max-width: 52ch;
}

.pb-newsletter-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--pb-space-3);
  max-width: 520px;
  /* Centers the form within its grid cell when the parent collapses to a
     single column at <=880px. On wider desktops the cell is narrower than
     520px so this is a no-op. */
  justify-self: center;
  width: 100%;
}

/* When the newsletter card stacks (single-column parent grid), center the
   text block too so the whole card reads as one centered composition
   instead of left-anchored text plus a centered form. */
@media (max-width: 880px) {
  .pb-newsletter > .pb-grid > div { text-align: center; }
  .pb-newsletter p { margin-left: auto; margin-right: auto; }
  .pb-newsletter-foot { text-align: center; }
}

@media (max-width: 540px) {
  .pb-newsletter-form { grid-template-columns: 1fr; }
}

/* Input sits inside the dark card, so its baseline (white surface,
   hairline border) is overridden for legibility against navy. */
.pb-newsletter-form .pb-input {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--pb-ink);
}

.pb-newsletter-form .pb-input::placeholder {
  color: var(--pb-muted-2);
}

.pb-newsletter-form .pb-input:focus {
  border-color: var(--pb-accent-hi);
  box-shadow: 0 0 0 4px rgba(147, 180, 255, 0.32);
}

.pb-newsletter-foot {
  margin-top: var(--pb-space-5);
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.62);
  max-width: 60ch;
}

.pb-newsletter-foot a {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pb-newsletter-foot a:hover {
  color: #FFFFFF;
}

/* ============================================================
   CONTACT
   ============================================================ */

.pb-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}

@media (max-width: 900px) {
  .pb-contact-grid { grid-template-columns: minmax(0, 1fr); }
}

.pb-contact-info {
  display: grid;
  gap: var(--pb-space-6);
}

.pb-contact-info-row {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--pb-space-4);
  align-items: start;
}

.pb-contact-info-icon {
  width: 44px; height: 44px;
  border-radius: var(--pb-radius-md);
  background: var(--pb-tint);
  color: var(--pb-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.pb-contact-info-row h4 { font-size: var(--pb-fs-h4); margin-bottom: 2px; }
.pb-contact-info-row p, .pb-contact-info-row a { color: var(--pb-muted); font-size: var(--pb-fs-small); line-height: 1.5; }
.pb-contact-info-row a { color: var(--pb-accent); }

.pb-contact-form {
  display: grid;
  gap: var(--pb-space-4);
  padding: clamp(24px, 3vw, 40px);
  background: var(--pb-surface);
  border: 1px solid var(--pb-hairline);
  border-radius: var(--pb-radius-xl);
  box-shadow: var(--pb-shadow-md);
}

.pb-contact-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--pb-space-4);
}

@media (max-width: 540px) {
  .pb-contact-form-row { grid-template-columns: 1fr; }
}

/* ============================================================
   FOOTER
   ============================================================ */

.pb-footer {
  position: relative;
  background: var(--pb-ink);
  color: #B6BCD0;
  padding-top: clamp(64px, 7vw, 96px);
  padding-bottom: var(--pb-space-12);
  margin-top: var(--pb-section-y);
  overflow: hidden;
}

.pb-footer h4 { color: #FFFFFF; font-size: 0.875rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: var(--pb-space-4); }

.pb-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: clamp(24px, 3vw, 56px);
}

@media (max-width: 1100px) { .pb-footer-grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 720px)  { .pb-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px)  { .pb-footer-grid { grid-template-columns: 1fr; } }

.pb-footer-wordmark {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin-bottom: var(--pb-space-4);
  line-height: 1;
}

.pb-footer-brand p { color: #B6BCD0; font-size: var(--pb-fs-small); line-height: 1.55; max-width: 32ch; }

.pb-footer-social {
  list-style: none;
  padding: 0;
  margin: var(--pb-space-5) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--pb-space-3);
}
.pb-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: #B6BCD0;
  font-size: 15px;
  text-decoration: none;
  transition: color var(--pb-dur-1) var(--pb-ease-out),
              background var(--pb-dur-1) var(--pb-ease-out),
              border-color var(--pb-dur-1) var(--pb-ease-out),
              transform var(--pb-dur-1) var(--pb-ease-out);
}
.pb-footer-social a:hover {
  color: #FFFFFF;
  background: rgba(29,78,216,0.22);
  border-color: rgba(29,78,216,0.55);
  transform: translateY(-2px);
}
.pb-footer-social a:focus-visible {
  outline: 2px solid var(--pb-accent);
  outline-offset: 2px;
}

.pb-footer-list { display: grid; gap: var(--pb-space-3); }
.pb-footer-list a {
  color: #B6BCD0;
  font-size: var(--pb-fs-small);
  text-decoration: none;
  transition: color var(--pb-dur-1) var(--pb-ease-out);
}
.pb-footer-list a:hover { color: #FFFFFF; }

.pb-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pb-space-4);
  padding-top: var(--pb-space-8);
  margin-top: var(--pb-space-12);
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 0.8125rem;
  color: #8A93A6;
}

.pb-footer-bottom a { color: #B6BCD0; text-decoration: none; }
.pb-footer-bottom a:hover { color: #FFFFFF; }

.pb-footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pb-space-4);
}

.pb-footer-legal-sep { color: rgba(255,255,255,0.12); }

/* Animated brand-blue gradient on the footer copyright. Cycles through the
   Pricebeat blues so the line subtly shimmers on dark surfaces. */
.pb-brand-gradient {
  font-weight: 600;
  background: linear-gradient(
    90deg,
    #2563EB 0%,
    #60A5FA 20%,
    #93C5FD 40%,
    #60A5FA 60%,
    #2563EB 80%,
    #1D4ED8 100%
  );
  background-size: 250% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  animation: pb-brand-gradient-shift 8s ease-in-out infinite;
}
@keyframes pb-brand-gradient-shift {
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .pb-brand-gradient {
    animation: none;
    background-position: 0% 50%;
  }
}

/* ============================================================
   BACK TO TOP
   ============================================================ */

.pb-to-top {
  position: fixed;
  right: 24px; bottom: 24px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--pb-ink);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  box-shadow: var(--pb-shadow-lg);
  text-decoration: none;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity var(--pb-dur-2) var(--pb-ease-out),
              transform var(--pb-dur-2) var(--pb-ease-out),
              background var(--pb-dur-1) var(--pb-ease-out);
  z-index: 800;
}

.pb-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.pb-to-top:hover { background: var(--pb-accent); color: #FFFFFF; }

/* ============================================================
   AUXILIARY PAGE PATTERNS (verify, reset, 404, delete-account)
   ============================================================ */

.pb-aux-shell {
  min-height: calc(100vh - var(--pb-header-h));
  display: grid;
  place-items: center;
  padding: var(--pb-space-12) var(--pb-space-4);
  background:
    radial-gradient(80% 60% at 80% 0%, rgba(29, 78, 216, 0.10) 0%, rgba(29, 78, 216, 0) 60%),
    linear-gradient(180deg, var(--pb-tint-2) 0%, var(--pb-surface) 100%);
}

.pb-aux-card {
  width: 100%;
  max-width: 520px;
  background: var(--pb-surface);
  border: 1px solid var(--pb-hairline);
  border-radius: var(--pb-radius-xl);
  box-shadow: var(--pb-shadow-lg);
  padding: clamp(28px, 4vw, 44px);
  text-align: center;
}

.pb-aux-card h1 {
  font-size: clamp(1.5rem, 1.5vw + 1rem, 2rem);
  margin-bottom: var(--pb-space-3);
}

.pb-aux-card p {
  color: var(--pb-muted);
  margin-bottom: var(--pb-space-6);
  line-height: 1.6;
}

.pb-aux-icon {
  width: 64px; height: 64px;
  margin: 0 auto var(--pb-space-6);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  background: var(--pb-tint);
  color: var(--pb-accent);
}

.pb-aux-icon.is-success { background: rgba(5, 150, 105, 0.12); color: var(--pb-success); }
.pb-aux-icon.is-error   { background: rgba(220, 38, 38, 0.10);  color: #B91C1C; }

/* ============================================================
   LEGAL PAGE LAYOUT (privacy + terms)
   ============================================================ */

.pb-legal {
  max-width: 820px;
  margin: 0 auto;
  padding-block: clamp(48px, 6vw, 96px);
}

.pb-legal h1 { font-size: clamp(2rem, 2vw + 1rem, 2.75rem); margin-bottom: var(--pb-space-4); }
.pb-legal h2 { font-size: 1.375rem; margin-top: var(--pb-space-12); margin-bottom: var(--pb-space-3); }
.pb-legal h3 { font-size: 1.125rem; margin-top: var(--pb-space-8); margin-bottom: var(--pb-space-3); }
.pb-legal p, .pb-legal li { color: var(--pb-ink-2); line-height: 1.7; font-size: 1rem; }
.pb-legal p + p { margin-top: var(--pb-space-3); }
.pb-legal ul, .pb-legal ol { margin: var(--pb-space-3) 0 var(--pb-space-3) var(--pb-space-6); list-style: disc; }
.pb-legal ol { list-style: decimal; }
.pb-legal li + li { margin-top: var(--pb-space-2); }
.pb-legal a { color: var(--pb-accent); text-decoration: underline; text-underline-offset: 2px; }
.pb-legal table { width: 100%; border-collapse: collapse; margin: var(--pb-space-6) 0; }
.pb-legal th, .pb-legal td { padding: 12px 14px; border-bottom: 1px solid var(--pb-hairline); text-align: left; font-size: 0.9375rem; }
.pb-legal th { font-weight: 700; color: var(--pb-ink); }
.pb-legal-meta { color: var(--pb-muted); font-size: var(--pb-fs-small); margin-bottom: var(--pb-space-8); }

/* ============================================================
   UTILITY HELPERS used by markup
   ============================================================ */

.pb-text-center { text-align: center; }
.pb-text-start  { text-align: left; }
.pb-mt-0  { margin-top: 0; }
.pb-mt-2  { margin-top: var(--pb-space-2); }
.pb-mt-4  { margin-top: var(--pb-space-4); }
.pb-mt-6  { margin-top: var(--pb-space-6); }
.pb-mt-8  { margin-top: var(--pb-space-8); }
.pb-mt-10 { margin-top: var(--pb-space-10); }
.pb-mt-12 { margin-top: var(--pb-space-12); }
.pb-mb-0  { margin-bottom: 0; }
.pb-mb-2  { margin-bottom: var(--pb-space-2); }
.pb-mb-4  { margin-bottom: var(--pb-space-4); }
.pb-mb-6  { margin-bottom: var(--pb-space-6); }
.pb-mb-8  { margin-bottom: var(--pb-space-8); }

.pb-d-block  { display: block; }
.pb-d-iblock { display: inline-block; }
.pb-d-flex   { display: flex; }
.pb-d-grid   { display: grid; }

.pb-w-full { width: 100%; }

/* ============================================================
   VENDOR PAGE COMPONENTS  (verkopers.html)
   ============================================================ */

/* Hero stat card (replaces the phone art on /verkopers.html) ---- */
.pb-vendor-stat-card {
  width: min(440px, 100%);
  background: rgba(255, 255, 255, 0.96);
  color: var(--pb-ink);
  border-radius: 24px;
  padding: clamp(20px, 3vw, 32px);
  box-shadow:
    0 30px 60px -20px rgba(4, 12, 40, 0.55),
    0 12px 24px -10px rgba(4, 12, 40, 0.30);
  border: 1px solid rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform: rotate(-1.2deg);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.pb-vendor-stat-card:hover {
  transform: rotate(0deg) translateY(-4px);
  box-shadow:
    0 40px 80px -24px rgba(4, 12, 40, 0.65),
    0 16px 32px -12px rgba(4, 12, 40, 0.35);
}

.pb-vendor-stat-eyebrow {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pb-accent);
  background: rgba(29, 78, 216, 0.10);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.pb-vendor-stat-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--pb-ink);
  margin: 0 0 var(--pb-space-5) 0;
  line-height: 1.3;
}

.pb-vendor-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  font-size: 0.9375rem;
}
.pb-vendor-stat-row > span:first-child {
  color: var(--pb-muted);
  flex: 1 1 auto;
}
.pb-vendor-stat-row strong {
  color: var(--pb-ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pb-vendor-stat-loss {
  color: #C2410C;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pb-vendor-stat-divider {
  height: 1px;
  background: var(--pb-hairline);
  margin: 12px 0;
}

.pb-vendor-stat-callout {
  margin-top: var(--pb-space-4);
  background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
  border: 1px solid #A7F3D0;
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.pb-vendor-stat-callout > span {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #047857;
  line-height: 1.35;
}
.pb-vendor-stat-callout-value {
  font-size: 1.375rem;
  font-weight: 800;
  color: #059669;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 1000px) {
  .pb-vendor-stat-card { transform: rotate(0deg); margin: 0 auto; }
}

/* Free-traffic callout section --------------------------------- */
.pb-traffic-section {
  padding-top: clamp(48px, 7vw, 96px);
  padding-bottom: clamp(48px, 7vw, 96px);
}

.pb-traffic-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  background: linear-gradient(135deg, #0B1340 0%, #042D6B 55%, #1D4ED8 100%);
  color: #FFFFFF;
  border-radius: 28px;
  padding: clamp(28px, 5vw, 56px);
  overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(4, 12, 40, 0.55);
}
.pb-traffic-card::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto auto;
  width: 480px;
  height: 480px;
  background: radial-gradient(closest-side, rgba(96, 165, 250, 0.45), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.pb-traffic-card-mark {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.pb-traffic-tag {
  display: inline-block;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, monospace;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  color: #DBEAFE;
  white-space: nowrap;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.5);
}
.pb-traffic-tag:nth-child(1) { transform: rotate(-2deg) translateX(8px); }
.pb-traffic-tag:nth-child(2) { transform: rotate(1.5deg) translateX(-4px); }

.pb-traffic-card-body {
  position: relative;
  z-index: 1;
}
.pb-traffic-card-body .pb-eyebrow {
  color: #93C5FD;
  background: rgba(147, 197, 253, 0.10);
  border-color: rgba(147, 197, 253, 0.30);
}
.pb-traffic-card-body h2 {
  color: #FFFFFF;
  margin-bottom: var(--pb-space-4);
}
.pb-traffic-card-body .pb-lead,
.pb-traffic-card-body p {
  color: rgba(219, 234, 254, 0.92);
}
.pb-traffic-card-body .pb-lead { margin-bottom: var(--pb-space-4); }

.pb-traffic-zinger {
  margin-top: var(--pb-space-5);
  font-size: 1.125rem;
  font-weight: 700;
  color: #FFFFFF !important;
  letter-spacing: -0.01em;
}

.pb-traffic-ctas {
  margin-top: var(--pb-space-6);
}
.pb-traffic-ctas .pb-btn:not(.is-ghost) {
  background: #FFFFFF;
  color: var(--pb-brand);
  border-color: #FFFFFF;
}
.pb-traffic-ctas .pb-btn:not(.is-ghost):hover {
  background: #F1F5F9;
  color: var(--pb-navy);
  transform: translateY(-2px);
}
.pb-traffic-ctas .pb-btn.is-ghost {
  border-color: rgba(255, 255, 255, 0.40);
  color: #FFFFFF;
}
.pb-traffic-ctas .pb-btn.is-ghost:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: #FFFFFF;
}

@media (max-width: 860px) {
  .pb-traffic-card {
    grid-template-columns: minmax(0, 1fr);
    text-align: left;
  }
  .pb-traffic-card-mark { flex-direction: row; flex-wrap: wrap; }
}

/* Economics table --------------------------------------------- */
.pb-econ-table {
  max-width: 720px;
  margin: 0 auto;
  background: #FFFFFF;
  border: 1px solid var(--pb-hairline);
  border-radius: 20px;
  padding: clamp(20px, 3vw, 36px);
  box-shadow: 0 20px 40px -24px rgba(4, 12, 40, 0.18);
}

.pb-econ-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  font-size: 1rem;
}
.pb-econ-row-label {
  color: var(--pb-muted);
  flex: 1 1 auto;
  line-height: 1.4;
}
.pb-econ-row-value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--pb-ink);
  font-size: 1.0625rem;
}

.pb-econ-row-headline .pb-econ-row-label,
.pb-econ-row-headline .pb-econ-row-value {
  color: var(--pb-ink);
  font-weight: 700;
}
.pb-econ-row-headline .pb-econ-row-value {
  font-size: 1.25rem;
}

.pb-econ-row-loss .pb-econ-row-value { color: #C2410C; }

.pb-econ-row-win {
  margin-top: var(--pb-space-3);
  padding: 16px;
  background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
  border: 1px solid #A7F3D0;
  border-radius: 12px;
}
.pb-econ-row-win .pb-econ-row-label {
  color: #047857;
  font-weight: 600;
}
.pb-econ-row-win .pb-econ-row-value {
  color: #059669;
  font-size: 1.375rem;
  font-weight: 800;
}

.pb-econ-divider {
  height: 1px;
  background: var(--pb-hairline);
  margin: 12px 0;
}

.pb-econ-foot {
  max-width: 720px;
  margin: var(--pb-space-6) auto 0;
  text-align: center;
  color: var(--pb-muted);
  font-size: var(--pb-fs-small);
  line-height: 1.6;
}

/* Social proof cards ------------------------------------------ */
.pb-proof-card {
  position: relative;
  background: #FFFFFF;
  border: 1px solid var(--pb-hairline);
  border-radius: 20px;
  padding: clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: var(--pb-space-3);
  box-shadow: 0 16px 40px -24px rgba(4, 12, 40, 0.18);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.pb-proof-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 60px -20px rgba(4, 12, 40, 0.30);
  border-color: rgba(29, 78, 216, 0.25);
}

.pb-proof-card-mark {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 800;
  font-size: 0.875rem;
  letter-spacing: 0.20em;
  color: var(--pb-brand);
  padding: 12px 16px;
  background: linear-gradient(135deg, #F4F7FB 0%, #E5EDFC 100%);
  border: 1px solid rgba(29, 78, 216, 0.12);
  border-radius: 12px;
  text-align: center;
}

.pb-proof-card-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
  color: #047857;
  border: 1px solid #A7F3D0;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.pb-proof-card-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  background: #059669;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.20);
}

.pb-proof-card-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--pb-ink);
  margin: var(--pb-space-2) 0 0 0;
}

.pb-proof-card-meta {
  color: var(--pb-muted);
  font-size: var(--pb-fs-small);
  line-height: 1.55;
  margin: 0;
}

.pb-proof-card-quote {
  margin: var(--pb-space-3) 0 0 0;
  padding: var(--pb-space-4);
  background: var(--pb-tint);
  border-left: 3px solid var(--pb-accent);
  border-radius: 0 12px 12px 0;
  color: var(--pb-ink);
  font-style: italic;
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* Vendor contact form: reuses .pb-contact-grid / .pb-contact-info /
   .pb-contact-form / .pb-input / .pb-textarea / .pb-field-label that
   are already defined for the homepage contact form. No extra styles
   needed; the markup pattern matches. */

/* Channels card in vendor hero ------------------------------- */
.pb-vendor-channels-card {
  width: min(440px, 100%);
  background: rgba(255, 255, 255, 0.96);
  color: var(--pb-ink);
  border-radius: 24px;
  padding: clamp(24px, 3vw, 36px);
  box-shadow:
    0 30px 60px -20px rgba(4, 12, 40, 0.55),
    0 12px 24px -10px rgba(4, 12, 40, 0.30);
  border: 1px solid rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform: rotate(-1deg);
  transition: transform 0.4s ease;
}
.pb-vendor-channels-card:hover { transform: rotate(0deg) translateY(-4px); }

.pb-vendor-channels-card .pb-vendor-channels-title {
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--pb-navy);
  margin: 0 0 var(--pb-space-5) 0;
  line-height: 1.3;
}

.pb-vendor-channels-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pb-vendor-channels-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  background: var(--pb-tint);
  border-radius: 10px;
  font-size: 0.9375rem;
  color: var(--pb-ink);
  font-weight: 500;
}
.pb-vendor-channels-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(29, 78, 216, 0.10);
  color: var(--pb-accent);
  border-radius: 8px;
  font-size: 0.875rem;
}

.pb-vendor-channels-foot {
  margin-top: var(--pb-space-4);
  padding: 12px 14px;
  background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
  border: 1px solid #A7F3D0;
  border-radius: 10px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #047857;
  text-align: center;
}

@media (max-width: 1000px) {
  .pb-vendor-channels-card { transform: rotate(0deg); margin: 0 auto; }
}

/* Manifesto band ---------------------------------------------- */
/* Statement callout used between the section head and the manifesto card grid.
   Splits the lead paragraph into a punchy headline + supporting detail so the
   copy reads as an editorial statement rather than a wall of text. */
.pb-manifesto-statement {
  position: relative;
  max-width: 880px;
  margin: var(--pb-space-8) auto var(--pb-space-12);
  padding: clamp(28px, 3.5vw, 44px) clamp(28px, 3.5vw, 48px);
  background: linear-gradient(180deg, #F4F7FB 0%, #FFFFFF 100%);
  border: 1px solid var(--pb-hairline);
  border-left: 4px solid var(--pb-accent);
  border-radius: 18px;
  box-shadow: 0 18px 48px -28px rgba(4, 12, 40, 0.14);
}
.pb-manifesto-statement::before {
  content: "\201C";
  position: absolute;
  top: -10px;
  left: clamp(20px, 3vw, 36px);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(64px, 7vw, 96px);
  line-height: 1;
  color: rgba(29, 78, 216, 0.18);
  pointer-events: none;
  user-select: none;
}
.pb-manifesto-statement-headline {
  font-size: clamp(1.25rem, 1.4vw + 0.7rem, 1.625rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--pb-navy);
  margin: 0 0 var(--pb-space-4);
}
.pb-manifesto-statement-detail {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--pb-muted);
  margin: 0;
}
@media (max-width: 600px) {
  .pb-manifesto-statement { border-radius: 14px; }
  .pb-manifesto-statement::before { font-size: 56px; top: -6px; }
}

/* Channel cards ----------------------------------------------- */
.pb-channel-card {
  position: relative;
  background: #FFFFFF;
  border: 1px solid var(--pb-hairline);
  border-radius: 20px;
  padding: clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: var(--pb-space-3);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.pb-channel-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px -24px rgba(4, 12, 40, 0.25);
  border-color: rgba(29, 78, 216, 0.20);
}
.pb-channel-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(29, 78, 216, 0.08);
  color: var(--pb-accent);
  font-size: 1.25rem;
  margin-bottom: var(--pb-space-2);
}
.pb-channel-card h3 {
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--pb-ink);
  margin: 0;
  line-height: 1.3;
}
.pb-channel-card p {
  color: var(--pb-muted);
  line-height: 1.6;
  font-size: 0.9375rem;
  margin: 0;
}

/* ============================================================
   FLOW DIAGRAM (vendor objection-handling section)
   "Surfaces -> Pricebeat -> Your offer" visualization
   ============================================================ */
.pb-flow-section { padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(48px, 7vw, 96px); }

.pb-flow-diagram {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) 56px minmax(0, 0.95fr) 56px minmax(0, 0.85fr);
  align-items: center;
  gap: 12px;
  margin-top: var(--pb-space-10);
}

.pb-flow-col {
  display: flex;
  flex-direction: column;
  gap: var(--pb-space-3);
}

.pb-flow-col-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pb-muted);
}

/* Surface list (left column) ---------------------------------- */
.pb-flow-surfaces {
  background: var(--pb-tint);
  border: 1px solid var(--pb-hairline);
  border-radius: 20px;
  padding: clamp(20px, 2.5vw, 28px);
}
.pb-flow-surface-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.pb-flow-surface-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: #FFFFFF;
  border: 1px solid var(--pb-hairline);
  border-radius: 10px;
  font-size: 0.875rem;
  color: var(--pb-ink);
  font-weight: 500;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.pb-flow-surface-list li:hover {
  transform: translateX(2px);
  border-color: rgba(29, 78, 216, 0.25);
}
.pb-flow-surface-list li i {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(29, 78, 216, 0.10);
  color: var(--pb-accent);
  border-radius: 6px;
  font-size: 0.75rem;
}

/* Arrows (between columns) ------------------------------------ */
.pb-flow-arrows {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  justify-content: center;
}
.pb-flow-arrow {
  position: relative;
  display: block;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, rgba(29, 78, 216, 0), rgba(29, 78, 216, 0.55) 35%, rgba(29, 78, 216, 0.85) 70%, rgba(29, 78, 216, 0.85));
  border-radius: 2px;
  overflow: visible;
}
.pb-flow-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -2px;
  transform: translateY(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  border-top: 2px solid rgba(29, 78, 216, 0.85);
  border-right: 2px solid rgba(29, 78, 216, 0.85);
}
.pb-flow-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent);
  animation: pb-flow-pulse 2.4s linear infinite;
  border-radius: 2px;
}
@keyframes pb-flow-pulse {
  0%   { left: -30%; width: 30%; opacity: 0; }
  50%  { opacity: 1; }
  100% { left: 100%; width: 30%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pb-flow-arrow::before { animation: none; display: none; }
}

/* Pricebeat hub (center) -------------------------------------- */
.pb-flow-hub-card {
  position: relative;
  background: linear-gradient(135deg, #0B1340 0%, #042D6B 50%, #1D4ED8 100%);
  color: #FFFFFF;
  border-radius: 20px;
  padding: clamp(20px, 3vw, 32px) clamp(20px, 3vw, 28px);
  text-align: center;
  box-shadow:
    0 30px 60px -20px rgba(4, 12, 40, 0.55),
    0 0 0 1px rgba(96, 165, 250, 0.20) inset;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.pb-flow-hub-card::before {
  content: "";
  position: absolute;
  inset: -50% -20% auto auto;
  width: 240px;
  height: 240px;
  background: radial-gradient(closest-side, rgba(96, 165, 250, 0.45), transparent 70%);
  pointer-events: none;
}
.pb-flow-hub-eyebrow {
  position: relative;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #93C5FD;
}
.pb-flow-hub-mark {
  position: relative;
  font-size: clamp(1.5rem, 2vw + 0.5rem, 2rem);
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.02em;
}
.pb-flow-hub-tagline {
  position: relative;
  font-size: 0.875rem;
  color: rgba(219, 234, 254, 0.85);
  line-height: 1.45;
}

/* Seller (right column) --------------------------------------- */
.pb-flow-seller-card {
  background: #FFFFFF;
  border: 1px solid var(--pb-hairline);
  border-radius: 20px;
  padding: clamp(20px, 3vw, 28px);
  text-align: center;
  box-shadow: 0 16px 40px -24px rgba(4, 12, 40, 0.18);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.pb-flow-seller-card > i {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
  border: 1px solid #A7F3D0;
  color: var(--pb-success);
  border-radius: 14px;
  font-size: 1.25rem;
}
.pb-flow-seller-label {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--pb-ink);
  letter-spacing: -0.01em;
}
.pb-flow-seller-tagline {
  font-size: 0.875rem;
  color: var(--pb-muted);
  line-height: 1.45;
}

/* Mobile: stack vertically and rotate arrows -------------------- */
@media (max-width: 900px) {
  .pb-flow-diagram {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .pb-flow-arrows {
    flex-direction: row;
    justify-content: center;
    width: 100%;
    height: 36px;
    gap: 6px;
  }
  .pb-flow-arrow {
    width: 2px;
    height: 36px;
    background: linear-gradient(180deg, rgba(29, 78, 216, 0), rgba(29, 78, 216, 0.55) 35%, rgba(29, 78, 216, 0.85) 70%, rgba(29, 78, 216, 0.85));
  }
  .pb-flow-arrow::after {
    top: auto;
    bottom: -2px;
    right: 50%;
    transform: translateX(50%) rotate(135deg);
  }
  .pb-flow-arrow::before {
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.85), transparent);
    animation-name: pb-flow-pulse-vertical;
  }
  @keyframes pb-flow-pulse-vertical {
    0%   { top: -30%; height: 30%; opacity: 0; }
    50%  { opacity: 1; }
    100% { top: 100%; height: 30%; opacity: 0; }
  }
}

/* Stacked variant of the flow diagram (used in the hero right column) ----- */
.pb-flow-diagram.is-stacked {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  width: min(440px, 100%);
  margin: 0 auto;
}
.pb-flow-diagram.is-stacked .pb-flow-arrows {
  flex-direction: row;
  justify-content: center;
  width: 100%;
  height: 32px;
  gap: 6px;
}
.pb-flow-diagram.is-stacked .pb-flow-arrow {
  width: 2px;
  height: 32px;
  background: linear-gradient(180deg, rgba(96, 165, 250, 0), rgba(96, 165, 250, 0.55) 35%, rgba(96, 165, 250, 0.85) 70%, rgba(96, 165, 250, 0.85));
}
.pb-flow-diagram.is-stacked .pb-flow-arrow::after {
  top: auto;
  bottom: -2px;
  right: 50%;
  transform: translateX(50%) rotate(135deg);
  border-top-color: rgba(96, 165, 250, 0.85);
  border-right-color: rgba(96, 165, 250, 0.85);
}
.pb-flow-diagram.is-stacked .pb-flow-arrow::before {
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.85), transparent);
  animation-name: pb-flow-pulse-vertical;
}
.pb-flow-diagram.is-stacked .pb-flow-surfaces {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 18px;
}
.pb-flow-diagram.is-stacked .pb-flow-col-label {
  color: #93C5FD;
}
.pb-flow-diagram.is-stacked .pb-flow-surface-list {
  gap: 4px;
}
.pb-flow-diagram.is-stacked .pb-flow-surface-list li {
  background: rgba(255, 255, 255, 0.92);
  font-size: 0.8125rem;
  padding: 6px 10px;
}
.pb-flow-diagram.is-stacked .pb-flow-hub-card {
  padding: 18px 20px;
}
.pb-flow-diagram.is-stacked .pb-flow-hub-mark {
  font-size: 1.5rem;
}
.pb-flow-diagram.is-stacked .pb-flow-hub-tagline {
  font-size: 0.8125rem;
}
.pb-flow-diagram.is-stacked .pb-flow-seller-card {
  padding: 18px 20px;
}

/* Vendor form: radio-card group for reseller / producer choice ------------ */
.pb-vendor-type {
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 600px) {
  .pb-vendor-type { grid-template-columns: 1fr; }
}
.pb-vendor-type .pb-field-label,
.pb-vendor-type legend {
  grid-column: 1 / -1;
  margin-bottom: 0;
}
.pb-radio-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--pb-hairline);
  border-radius: 12px;
  cursor: pointer;
  background: #FFFFFF;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.pb-radio-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.pb-radio-card:hover {
  border-color: rgba(29, 78, 216, 0.35);
}
.pb-radio-card:has(input:checked) {
  border-color: var(--pb-accent);
  background: rgba(29, 78, 216, 0.04);
  box-shadow: 0 0 0 2px rgba(29, 78, 216, 0.18) inset;
}
.pb-radio-card-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--pb-ink);
}
.pb-radio-card-meta {
  font-size: 0.8125rem;
  color: var(--pb-muted);
  line-height: 1.4;
}

/* ============================================================
   CAPTURE SCENE ANIMATION (v2)
   "Buy intent comes from anywhere. Pricebeat captures it,
   intercepts the sale that was about to go to a paid advertiser,
   and routes it to YOUR store instead."

   Single 14s loop. Pure CSS, no JS. Four pacing phases:
     0.0-3.5s   bombardment: 6 surfaces orbit a customer, each
                pulsing intent-lines toward the phone
     3.5-5.0s   lock-on:     non-target surfaces dim; viewfinder
                reticle locks on the chosen surface (s3, the print
                ad, to drive the "anywhere, not just websites" point)
     5.0-7.0s   capture:     phone tilts toward chosen surface,
                capture line draws, camera flash fires
     7.0-10.5s  route:       phone -> Pricebeat hub -> Jouw winkel
                drawn sequentially; Your store pops with a Sale badge
     10.5-14.0s hold + dissolve, reset
   ============================================================ */
.pb-capture-scene {
  /* 40s = 4 rounds × 10s. Each round picks a different target surface:
       R1 (0-25%):   s3  Coolblue (gesloten bestemmingen)
       R2 (25-50%):  s1  Bol (marktplaatsen)
       R3 (50-75%):  s4  MediaMarkt (fysieke winkels)
       R4 (75-100%): s6  Folders en magazines  */
  --cap-cycle: 40s;
  position: relative;
  width: 100%;
  max-width: 1080px;
  margin: var(--pb-space-10) auto var(--pb-space-6);
  aspect-ratio: 1080 / 800;
  background: linear-gradient(180deg, #F4F7FB 0%, #FFFFFF 100%);
  border: 1px solid var(--pb-hairline);
  border-radius: 22px;
  box-shadow: 0 24px 60px -32px rgba(4, 12, 40, 0.18);
  overflow: hidden;
  /* Establishes a sizing context so children can use cqi units to scale
     proportionally to the scene's actual width, not the viewport. At the
     1080px max-width, 1cqi = 10.8px, so cqi values match the original
     pixel layout on desktop, then shrink uniformly on smaller screens. */
  container-type: inline-size;
}
.pb-capture-scene::before {
  /* Soft radial spotlight behind the scene */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 70%, rgba(29, 78, 216, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 30%, rgba(37, 99, 235, 0.06) 0%, transparent 60%);
  pointer-events: none;
}

/* SVG line layer fills the box; sits behind cards. */
.pb-cap-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.pb-cap-svg path { fill: none; stroke-linecap: round; }
.pb-cap-orb { display: none; } /* reserved for future orb travel */

/* ----- Surface cards (6 in orbit) ----------------------- */
.pb-cap-surface {
  position: absolute;
  width: 17.78cqi;
  padding: 1.11cqi 1.30cqi;
  background: #FFFFFF;
  border: 1px solid var(--pb-hairline);
  border-radius: 1.30cqi;
  box-shadow: 0 14px 30px -18px rgba(4, 12, 40, 0.22);
  display: flex;
  align-items: center;
  gap: 0.93cqi;
  font-size: 1.24cqi;
  line-height: 1.3;
  z-index: 3;
  transform: translate(-50%, -50%);
  transform-origin: center;
}
/* Orbit positions (centered via translate(-50%, -50%)). */
.pb-cap-s1 { left: 17.5%; top: 17.5%;  animation: pb-cap-target-r2 var(--cap-cycle) ease-in-out infinite; }
.pb-cap-s2 { left: 40.0%; top: 11.25%; animation: pb-cap-non-target var(--cap-cycle) ease-in-out infinite; }
.pb-cap-s3 { left: 60.0%; top: 11.25%; animation: pb-cap-target-r1 var(--cap-cycle) ease-in-out infinite; }
.pb-cap-s4 { left: 82.5%; top: 17.5%;  animation: pb-cap-target-r3 var(--cap-cycle) ease-in-out infinite; }
.pb-cap-s5 { left: 13.5%; top: 45.0%;  animation: pb-cap-non-target var(--cap-cycle) ease-in-out infinite; }
.pb-cap-s6 { left: 86.5%; top: 45.0%;  animation: pb-cap-target-r4 var(--cap-cycle) ease-in-out infinite; }

.pb-cap-surface-icon {
  flex: 0 0 auto;
  width: 2.96cqi;
  height: 2.96cqi;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.74cqi;
  background: rgba(29, 78, 216, 0.12);
  color: var(--pb-accent);
  font-size: 1.48cqi;
}
.pb-cap-surface-label {
  font-size: 1.24cqi;
  font-weight: 700;
  color: var(--pb-navy);
  letter-spacing: -0.005em;
  line-height: 1.25;
}

/* ----- Viewfinder reticles (4, one per round target) ---- */
.pb-cap-reticle {
  position: absolute;
  width: 19.63cqi;
  height: 8.89cqi;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  z-index: 5;
}
/* R1 reticle locks on s3 (Coolblue, 60%, 11.25%) */
.pb-cap-reticle-r1 { left: 60%;   top: 11.25%; animation: pb-cap-reticle-r1-cycle var(--cap-cycle) ease-in-out infinite; }
/* R2 reticle locks on s1 (Bol, 17.5%, 17.5%) */
.pb-cap-reticle-r2 { left: 17.5%; top: 17.5%;  animation: pb-cap-reticle-r2-cycle var(--cap-cycle) ease-in-out infinite; }
/* R3 reticle locks on s4 (MediaMarkt, 82.5%, 17.5%) */
.pb-cap-reticle-r3 { left: 82.5%; top: 17.5%;  animation: pb-cap-reticle-r3-cycle var(--cap-cycle) ease-in-out infinite; }
/* R4 reticle locks on s6 (Folders, 86.5%, 45%) */
.pb-cap-reticle-r4 { left: 86.5%; top: 45.0%;  animation: pb-cap-reticle-r4-cycle var(--cap-cycle) ease-in-out infinite; }
.pb-cap-reticle-corner {
  position: absolute;
  width: 1.48cqi;
  height: 1.48cqi;
  border: max(1px, 0.23cqi) solid var(--pb-accent);
  border-radius: 0.19cqi;
}
.pb-cap-reticle-tl { top: -0.19cqi;    left: -0.19cqi;    border-right: 0; border-bottom: 0; }
.pb-cap-reticle-tr { top: -0.19cqi;    right: -0.19cqi;   border-left:  0; border-bottom: 0; }
.pb-cap-reticle-bl { bottom: -0.19cqi; left: -0.19cqi;    border-right: 0; border-top:    0; }
.pb-cap-reticle-br { bottom: -0.19cqi; right: -0.19cqi;   border-left:  0; border-top:    0; }

/* ----- Bombardment lines (each surface -> phone) -------- */
.pb-cap-bomb {
  stroke: rgba(91, 100, 120, 0.30);
  stroke-width: 1.5;
  stroke-dasharray: 4 6;
  opacity: 0;
  animation: pb-cap-bomb-pulse var(--cap-cycle) linear infinite;
}
.pb-cap-bomb-1 { animation-delay: 1.4s; }
.pb-cap-bomb-2 { animation-delay: 1.6s; }
.pb-cap-bomb-3 { animation-delay: 1.8s; }
.pb-cap-bomb-4 { animation-delay: 2.0s; }
.pb-cap-bomb-5 { animation-delay: 2.2s; }
.pb-cap-bomb-6 { animation-delay: 2.4s; }

/* Capture beams: 4 paths, one per round. Each animates only during its
   round's lock-on phase, then stays invisible the rest of the cycle.
   stroke-dasharray uses 100 because each <path> has pathLength="100"
   so all four paths draw uniformly regardless of true geometry length. */
.pb-cap-capture-line {
  stroke: url(#pb-cap-route-grad);
  stroke-width: 3.5;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 0;
}
.pb-cap-capture-r1 { animation: pb-cap-capture-r1-draw var(--cap-cycle) ease-out infinite; }
.pb-cap-capture-r2 { animation: pb-cap-capture-r2-draw var(--cap-cycle) ease-out infinite; }
.pb-cap-capture-r3 { animation: pb-cap-capture-r3-draw var(--cap-cycle) ease-out infinite; }
.pb-cap-capture-r4 { animation: pb-cap-capture-r4-draw var(--cap-cycle) ease-out infinite; }

/* Routing lines (phone -> hub -> Your store). The hub sits on top via z-index,
   so the line visually passes UNDER the hub creating a "through Pricebeat" read.
   Both lines appear together right after the camera flash and stay visible
   through the climax. The comet pulses below provide the motion.
   NOTE: solid color (not gradient) because objectBoundingBox gradients
   collapse on perfectly vertical paths in some browsers. */
.pb-cap-route-line {
  stroke: #1D4ED8;
  stroke-width: 5;
  stroke-linecap: round;
  filter: drop-shadow(0 2px 6px rgba(29, 78, 216, 0.45));
  opacity: 0;
  animation: pb-cap-route-show var(--cap-cycle) ease-in-out infinite;
}

/* Travelling pulses: a glowing comet that rides each route segment to
   visualise the sale flowing through. Uses a small dash + offset animation. */
.pb-cap-pulse {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 4;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(96, 165, 250, 0.95));
  opacity: 0;
}
.pb-cap-pulse-1 {
  /* Length 100: dash 8 (the comet), gap 92 (the rest hidden). */
  stroke-dasharray: 8 92;
  stroke-dashoffset: 100;
  animation: pb-cap-pulse1-flow var(--cap-cycle) linear infinite;
}
.pb-cap-pulse-2 {
  stroke-dasharray: 8 112;
  stroke-dashoffset: 120;
  animation: pb-cap-pulse2-flow var(--cap-cycle) linear infinite;
}

/* ----- Customer with phone (centered) ------------------- */
.pb-cap-customer {
  position: absolute;
  top: 47.5%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.74cqi;
  z-index: 4;
}
.pb-cap-phone {
  position: relative;
  width: 5.93cqi;
  height: 10.19cqi;
  background: var(--pb-navy);
  border-radius: 1.11cqi;
  border: max(1px, 0.19cqi) solid #1B2348;
  box-shadow: 0 14px 24px -12px rgba(11, 19, 64, 0.55);
  overflow: hidden;
  transform-origin: 50% 100%;
  animation: pb-cap-phone-tilt var(--cap-cycle) ease-in-out infinite;
}
.pb-cap-phone-screen {
  position: absolute;
  inset: 0.56cqi 0.37cqi 0.56cqi 0.37cqi;
  border-radius: 0.74cqi;
  background: linear-gradient(180deg, #1D4ED8 0%, #042D6B 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pb-cap-phone-icon {
  color: rgba(255,255,255,0.85);
  font-size: 1.85cqi;
}
.pb-cap-phone-notch {
  position: absolute;
  top: 0.37cqi;
  left: 50%;
  transform: translateX(-50%);
  width: 1.67cqi;
  height: 0.37cqi;
  background: #050816;
  border-radius: 0.19cqi;
  z-index: 2;
}
.pb-cap-phone-flash {
  position: absolute;
  inset: 0;
  background: #FFFFFF;
  opacity: 0;
  pointer-events: none;
  animation: pb-cap-flash var(--cap-cycle) ease-in-out infinite;
}
.pb-cap-customer-label {
  font-size: 1.16cqi;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pb-muted);
}

/* ----- Pricebeat hub ----- */
.pb-cap-hub {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
}
.pb-cap-hub-mark {
  position: relative;
  z-index: 2;
  padding: 0.93cqi 2.04cqi;
  background: linear-gradient(135deg, #042D6B 0%, #1D4ED8 100%);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 1.41cqi;
  letter-spacing: 0.01em;
  border-radius: 999px;
  box-shadow: 0 10px 22px -10px rgba(29, 78, 216, 0.55);
}
.pb-cap-hub-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: rgba(29, 78, 216, 0.20);
  opacity: 0;
  animation: pb-cap-hub-pulse var(--cap-cycle) ease-out infinite;
}

/* ----- Your store (the winner) ----- */
.pb-cap-yourstore {
  position: absolute;
  bottom: 4%;
  left: 50%;
  transform: translate(-50%, 0) scale(0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.56cqi;
  padding: 1.11cqi 2.04cqi;
  background: #FFFFFF;
  border: max(1px, 0.19cqi) solid var(--pb-hairline);
  border-radius: 1.30cqi;
  box-shadow: 0 14px 30px -16px rgba(4, 12, 40, 0.22);
  z-index: 3;
  opacity: 0.85;
  animation: pb-cap-yourstore-pop var(--cap-cycle) ease-out infinite;
}
.pb-cap-yourstore-eyebrow {
  font-size: 1.04cqi;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pb-muted);
}
.pb-cap-yourstore-brand {
  font-size: 1.56cqi;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--pb-navy);
}
.pb-cap-yourstore-badge {
  font-size: 1.07cqi;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.28cqi 0.93cqi;
  border-radius: 999px;
  background: rgba(5, 150, 105, 0.12);
  color: #047857;
  opacity: 0;
  animation: pb-cap-badge-in var(--cap-cycle) ease-out infinite;
}

/* ============================================================
   KEYFRAMES (master cycle = 56s = 4 rounds × 14s)
   Each round runs the same per-round timing, scaled into 25% slices:
     bomb pulse  (per-round 6-18%)   = master 1.5-4.5%   per round
     lock-on hold (per-round 22-78%) = master 5.5-19.5%  per round
     capture beam (per-round 32-93%) = master 8-23.25%   per round
     phone flash (per-round 38-47%)  = master 9.5-11.75% per round
     routes show (per-round 44-95%)  = master 11-23.75%  per round
     comet 1     (per-round 50-62%)  = master 12.5-15.5% per round
     hub pulse   (per-round 54-66%)  = master 13.5-16.5% per round
     comet 2     (per-round 58-70%)  = master 14.5-17.5% per round
     yourstore pop (per-round 64-82%)= master 16-20.5%   per round
     badge       (per-round 68-100%) = master 17-25%     per round
   Round N starts at master (N-1)*25%.
   ============================================================ */

/* Helper: surface "bright (default)" and "dim" and "spotlight" macros are
   inlined into each keyframe below. */

/* ----- Surfaces -------------------------------------------- */
/* s3 is target in R1, dim during R2/R3/R4 lock-on phases. */
@keyframes pb-cap-target-r1 {
  0%, 5.5%      { opacity: 1; transform: translate(-50%, -50%) scale(1);     border-color: var(--pb-hairline);             box-shadow: 0 14px 30px -18px rgba(4, 12, 40, 0.22); filter: none; }
  7%, 15%       { opacity: 1; transform: translate(-50%, -50%) scale(1.06);  border-color: rgba(29, 78, 216, 0.65);        box-shadow: 0 22px 44px -16px rgba(29, 78, 216, 0.40); filter: none; }
  18.75%, 30.5% { opacity: 1; transform: translate(-50%, -50%) scale(1);     border-color: var(--pb-hairline);             box-shadow: 0 14px 30px -18px rgba(4, 12, 40, 0.22); filter: none; }
  32%, 40%      { opacity: 0.30; transform: translate(-50%, -50%) scale(0.95); border-color: var(--pb-hairline);            box-shadow: 0 14px 30px -18px rgba(4, 12, 40, 0.10); filter: saturate(0.4); }
  43.75%, 55.5% { opacity: 1; transform: translate(-50%, -50%) scale(1);     border-color: var(--pb-hairline);             box-shadow: 0 14px 30px -18px rgba(4, 12, 40, 0.22); filter: none; }
  57%, 65%      { opacity: 0.30; transform: translate(-50%, -50%) scale(0.95); border-color: var(--pb-hairline);            box-shadow: 0 14px 30px -18px rgba(4, 12, 40, 0.10); filter: saturate(0.4); }
  68.75%, 80.5% { opacity: 1; transform: translate(-50%, -50%) scale(1);     border-color: var(--pb-hairline);             box-shadow: 0 14px 30px -18px rgba(4, 12, 40, 0.22); filter: none; }
  82%, 90%      { opacity: 0.30; transform: translate(-50%, -50%) scale(0.95); border-color: var(--pb-hairline);            box-shadow: 0 14px 30px -18px rgba(4, 12, 40, 0.10); filter: saturate(0.4); }
  93.75%, 100%  { opacity: 1; transform: translate(-50%, -50%) scale(1);     border-color: var(--pb-hairline);             box-shadow: 0 14px 30px -18px rgba(4, 12, 40, 0.22); filter: none; }
}
/* s1 is target in R2, dim in R1/R3/R4. */
@keyframes pb-cap-target-r2 {
  0%, 5.5%      { opacity: 1; transform: translate(-50%, -50%) scale(1);     border-color: var(--pb-hairline); box-shadow: 0 14px 30px -18px rgba(4, 12, 40, 0.22); filter: none; }
  7%, 15%       { opacity: 0.30; transform: translate(-50%, -50%) scale(0.95); border-color: var(--pb-hairline); box-shadow: 0 14px 30px -18px rgba(4, 12, 40, 0.10); filter: saturate(0.4); }
  18.75%, 30.5% { opacity: 1; transform: translate(-50%, -50%) scale(1);     border-color: var(--pb-hairline); box-shadow: 0 14px 30px -18px rgba(4, 12, 40, 0.22); filter: none; }
  32%, 40%      { opacity: 1; transform: translate(-50%, -50%) scale(1.06);  border-color: rgba(29, 78, 216, 0.65); box-shadow: 0 22px 44px -16px rgba(29, 78, 216, 0.40); filter: none; }
  43.75%, 55.5% { opacity: 1; transform: translate(-50%, -50%) scale(1);     border-color: var(--pb-hairline); box-shadow: 0 14px 30px -18px rgba(4, 12, 40, 0.22); filter: none; }
  57%, 65%      { opacity: 0.30; transform: translate(-50%, -50%) scale(0.95); border-color: var(--pb-hairline); box-shadow: 0 14px 30px -18px rgba(4, 12, 40, 0.10); filter: saturate(0.4); }
  68.75%, 80.5% { opacity: 1; transform: translate(-50%, -50%) scale(1);     border-color: var(--pb-hairline); box-shadow: 0 14px 30px -18px rgba(4, 12, 40, 0.22); filter: none; }
  82%, 90%      { opacity: 0.30; transform: translate(-50%, -50%) scale(0.95); border-color: var(--pb-hairline); box-shadow: 0 14px 30px -18px rgba(4, 12, 40, 0.10); filter: saturate(0.4); }
  93.75%, 100%  { opacity: 1; transform: translate(-50%, -50%) scale(1);     border-color: var(--pb-hairline); box-shadow: 0 14px 30px -18px rgba(4, 12, 40, 0.22); filter: none; }
}
/* s4 is target in R3. */
@keyframes pb-cap-target-r3 {
  0%, 5.5%      { opacity: 1; transform: translate(-50%, -50%) scale(1);     border-color: var(--pb-hairline); box-shadow: 0 14px 30px -18px rgba(4, 12, 40, 0.22); filter: none; }
  7%, 15%       { opacity: 0.30; transform: translate(-50%, -50%) scale(0.95); border-color: var(--pb-hairline); box-shadow: 0 14px 30px -18px rgba(4, 12, 40, 0.10); filter: saturate(0.4); }
  18.75%, 30.5% { opacity: 1; transform: translate(-50%, -50%) scale(1);     border-color: var(--pb-hairline); box-shadow: 0 14px 30px -18px rgba(4, 12, 40, 0.22); filter: none; }
  32%, 40%      { opacity: 0.30; transform: translate(-50%, -50%) scale(0.95); border-color: var(--pb-hairline); box-shadow: 0 14px 30px -18px rgba(4, 12, 40, 0.10); filter: saturate(0.4); }
  43.75%, 55.5% { opacity: 1; transform: translate(-50%, -50%) scale(1);     border-color: var(--pb-hairline); box-shadow: 0 14px 30px -18px rgba(4, 12, 40, 0.22); filter: none; }
  57%, 65%      { opacity: 1; transform: translate(-50%, -50%) scale(1.06);  border-color: rgba(29, 78, 216, 0.65); box-shadow: 0 22px 44px -16px rgba(29, 78, 216, 0.40); filter: none; }
  68.75%, 80.5% { opacity: 1; transform: translate(-50%, -50%) scale(1);     border-color: var(--pb-hairline); box-shadow: 0 14px 30px -18px rgba(4, 12, 40, 0.22); filter: none; }
  82%, 90%      { opacity: 0.30; transform: translate(-50%, -50%) scale(0.95); border-color: var(--pb-hairline); box-shadow: 0 14px 30px -18px rgba(4, 12, 40, 0.10); filter: saturate(0.4); }
  93.75%, 100%  { opacity: 1; transform: translate(-50%, -50%) scale(1);     border-color: var(--pb-hairline); box-shadow: 0 14px 30px -18px rgba(4, 12, 40, 0.22); filter: none; }
}
/* s6 is target in R4. */
@keyframes pb-cap-target-r4 {
  0%, 5.5%      { opacity: 1; transform: translate(-50%, -50%) scale(1);     border-color: var(--pb-hairline); box-shadow: 0 14px 30px -18px rgba(4, 12, 40, 0.22); filter: none; }
  7%, 15%       { opacity: 0.30; transform: translate(-50%, -50%) scale(0.95); border-color: var(--pb-hairline); box-shadow: 0 14px 30px -18px rgba(4, 12, 40, 0.10); filter: saturate(0.4); }
  18.75%, 30.5% { opacity: 1; transform: translate(-50%, -50%) scale(1);     border-color: var(--pb-hairline); box-shadow: 0 14px 30px -18px rgba(4, 12, 40, 0.22); filter: none; }
  32%, 40%      { opacity: 0.30; transform: translate(-50%, -50%) scale(0.95); border-color: var(--pb-hairline); box-shadow: 0 14px 30px -18px rgba(4, 12, 40, 0.10); filter: saturate(0.4); }
  43.75%, 55.5% { opacity: 1; transform: translate(-50%, -50%) scale(1);     border-color: var(--pb-hairline); box-shadow: 0 14px 30px -18px rgba(4, 12, 40, 0.22); filter: none; }
  57%, 65%      { opacity: 0.30; transform: translate(-50%, -50%) scale(0.95); border-color: var(--pb-hairline); box-shadow: 0 14px 30px -18px rgba(4, 12, 40, 0.10); filter: saturate(0.4); }
  68.75%, 80.5% { opacity: 1; transform: translate(-50%, -50%) scale(1);     border-color: var(--pb-hairline); box-shadow: 0 14px 30px -18px rgba(4, 12, 40, 0.22); filter: none; }
  82%, 90%      { opacity: 1; transform: translate(-50%, -50%) scale(1.06);  border-color: rgba(29, 78, 216, 0.65); box-shadow: 0 22px 44px -16px rgba(29, 78, 216, 0.40); filter: none; }
  93.75%, 100%  { opacity: 1; transform: translate(-50%, -50%) scale(1);     border-color: var(--pb-hairline); box-shadow: 0 14px 30px -18px rgba(4, 12, 40, 0.22); filter: none; }
}
/* Surfaces that are never the target (s2, s5): dim during every lock-on. */
@keyframes pb-cap-non-target {
  0%, 5.5%      { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: none; }
  7%, 15%       { opacity: 0.30; transform: translate(-50%, -50%) scale(0.95); filter: saturate(0.4); }
  18.75%, 30.5% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: none; }
  32%, 40%      { opacity: 0.30; transform: translate(-50%, -50%) scale(0.95); filter: saturate(0.4); }
  43.75%, 55.5% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: none; }
  57%, 65%      { opacity: 0.30; transform: translate(-50%, -50%) scale(0.95); filter: saturate(0.4); }
  68.75%, 80.5% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: none; }
  82%, 90%      { opacity: 0.30; transform: translate(-50%, -50%) scale(0.95); filter: saturate(0.4); }
  93.75%, 100%  { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: none; }
}

/* ----- Reticles (one per round) ---------------------------- */
@keyframes pb-cap-reticle-r1-cycle {
  0%, 5.5%   { opacity: 0; transform: translate(-50%, -50%) scale(1.3); }
  7%, 15%    { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  17%, 100%  { opacity: 0; transform: translate(-50%, -50%) scale(1.3); }
}
@keyframes pb-cap-reticle-r2-cycle {
  0%, 30.5%  { opacity: 0; transform: translate(-50%, -50%) scale(1.3); }
  32%, 40%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  42%, 100%  { opacity: 0; transform: translate(-50%, -50%) scale(1.3); }
}
@keyframes pb-cap-reticle-r3-cycle {
  0%, 55.5%  { opacity: 0; transform: translate(-50%, -50%) scale(1.3); }
  57%, 65%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  67%, 100%  { opacity: 0; transform: translate(-50%, -50%) scale(1.3); }
}
@keyframes pb-cap-reticle-r4-cycle {
  0%, 80.5%  { opacity: 0; transform: translate(-50%, -50%) scale(1.3); }
  82%, 90%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  92%, 100%  { opacity: 0; transform: translate(-50%, -50%) scale(1.3); }
}

/* ----- Bombardment lines: pulse during each round's bomb phase. ----- */
@keyframes pb-cap-bomb-pulse {
  0%, 1.5%      { opacity: 0; }
  2.5%          { opacity: 0.9; }
  4.5%          { opacity: 0; }
  26.5%         { opacity: 0; }
  27.5%         { opacity: 0.9; }
  29.5%         { opacity: 0; }
  51.5%         { opacity: 0; }
  52.5%         { opacity: 0.9; }
  54.5%         { opacity: 0; }
  76.5%         { opacity: 0; }
  77.5%         { opacity: 0.9; }
  79.5%         { opacity: 0; }
  100%          { opacity: 0; }
}

/* ----- Capture beams (one per round). Uses normalized length 100. ---- */
@keyframes pb-cap-capture-r1-draw {
  0%, 8%       { opacity: 0; stroke-dashoffset: 100; }
  9%           { opacity: 1; }
  11.5%        { stroke-dashoffset: 0; opacity: 1; }
  22%          { stroke-dashoffset: 0; opacity: 1; }
  23.25%       { stroke-dashoffset: 0; opacity: 0; }
  100%         { opacity: 0; stroke-dashoffset: 100; }
}
@keyframes pb-cap-capture-r2-draw {
  0%, 33%      { opacity: 0; stroke-dashoffset: 100; }
  34%          { opacity: 1; }
  36.5%        { stroke-dashoffset: 0; opacity: 1; }
  47%          { stroke-dashoffset: 0; opacity: 1; }
  48.25%       { stroke-dashoffset: 0; opacity: 0; }
  100%         { opacity: 0; stroke-dashoffset: 100; }
}
@keyframes pb-cap-capture-r3-draw {
  0%, 58%      { opacity: 0; stroke-dashoffset: 100; }
  59%          { opacity: 1; }
  61.5%        { stroke-dashoffset: 0; opacity: 1; }
  72%          { stroke-dashoffset: 0; opacity: 1; }
  73.25%       { stroke-dashoffset: 0; opacity: 0; }
  100%         { opacity: 0; stroke-dashoffset: 100; }
}
@keyframes pb-cap-capture-r4-draw {
  0%, 83%      { opacity: 0; stroke-dashoffset: 100; }
  84%          { opacity: 1; }
  86.5%        { stroke-dashoffset: 0; opacity: 1; }
  97%          { stroke-dashoffset: 0; opacity: 1; }
  98.25%       { stroke-dashoffset: 0; opacity: 0; }
  100%         { opacity: 0; stroke-dashoffset: 100; }
}

/* ----- Phone flash (4 windows) ----------------------------- */
@keyframes pb-cap-flash {
  0%, 9.5%     { opacity: 0; }
  10%          { opacity: 0.95; }
  11.75%       { opacity: 0; }
  34.5%        { opacity: 0; }
  35%          { opacity: 0.95; }
  36.75%       { opacity: 0; }
  59.5%        { opacity: 0; }
  60%          { opacity: 0.95; }
  61.75%       { opacity: 0; }
  84.5%        { opacity: 0; }
  85%          { opacity: 0.95; }
  86.75%       { opacity: 0; }
  100%         { opacity: 0; }
}

/* ----- Route lines (4 windows of show + fade) -------------- */
@keyframes pb-cap-route-show {
  0%, 11%      { opacity: 0; }
  12.5%        { opacity: 1; }
  22.5%        { opacity: 1; }
  23.75%       { opacity: 0; }
  36%          { opacity: 0; }
  37.5%        { opacity: 1; }
  47.5%        { opacity: 1; }
  48.75%       { opacity: 0; }
  61%          { opacity: 0; }
  62.5%        { opacity: 1; }
  72.5%        { opacity: 1; }
  73.75%       { opacity: 0; }
  86%          { opacity: 0; }
  87.5%        { opacity: 1; }
  97.5%        { opacity: 1; }
  98.75%       { opacity: 0; }
  100%         { opacity: 0; }
}

/* ----- Comet 1 (phone -> hub), 4 windows ------------------- */
@keyframes pb-cap-pulse1-flow {
  0%, 12.5%    { opacity: 0; stroke-dashoffset: 100; }
  13.25%       { opacity: 1; }
  15%          { opacity: 1; stroke-dashoffset: 0; }
  15.5%        { opacity: 0; stroke-dashoffset: -8; }
  37.5%        { opacity: 0; stroke-dashoffset: 100; }
  38.25%       { opacity: 1; }
  40%          { opacity: 1; stroke-dashoffset: 0; }
  40.5%        { opacity: 0; stroke-dashoffset: -8; }
  62.5%        { opacity: 0; stroke-dashoffset: 100; }
  63.25%       { opacity: 1; }
  65%          { opacity: 1; stroke-dashoffset: 0; }
  65.5%        { opacity: 0; stroke-dashoffset: -8; }
  87.5%        { opacity: 0; stroke-dashoffset: 100; }
  88.25%       { opacity: 1; }
  90%          { opacity: 1; stroke-dashoffset: 0; }
  90.5%        { opacity: 0; stroke-dashoffset: -8; }
  100%         { opacity: 0; stroke-dashoffset: 100; }
}

/* ----- Comet 2 (hub -> Your store), 4 windows -------------- */
@keyframes pb-cap-pulse2-flow {
  0%, 14.5%    { opacity: 0; stroke-dashoffset: 120; }
  15.25%       { opacity: 1; }
  17%          { opacity: 1; stroke-dashoffset: 0; }
  17.5%        { opacity: 0; stroke-dashoffset: -8; }
  39.5%        { opacity: 0; stroke-dashoffset: 120; }
  40.25%       { opacity: 1; }
  42%          { opacity: 1; stroke-dashoffset: 0; }
  42.5%        { opacity: 0; stroke-dashoffset: -8; }
  64.5%        { opacity: 0; stroke-dashoffset: 120; }
  65.25%       { opacity: 1; }
  67%          { opacity: 1; stroke-dashoffset: 0; }
  67.5%        { opacity: 0; stroke-dashoffset: -8; }
  89.5%        { opacity: 0; stroke-dashoffset: 120; }
  90.25%       { opacity: 1; }
  92%          { opacity: 1; stroke-dashoffset: 0; }
  92.5%        { opacity: 0; stroke-dashoffset: -8; }
  100%         { opacity: 0; stroke-dashoffset: 120; }
}

/* ----- Phone tilt: per-round direction toward chosen surface ----- */
/* R1 target = s3 (top-right): tilt +8deg
   R2 target = s1 (top-left):  tilt -8deg
   R3 target = s4 (right):     tilt +12deg
   R4 target = s6 (bot-right): tilt +6deg */
@keyframes pb-cap-phone-tilt {
  0%, 6%       { transform: rotate(0deg); }
  8%, 12.5%    { transform: rotate(8deg); }     /* R1 */
  15.5%, 31%   { transform: rotate(0deg); }
  33%, 37.5%   { transform: rotate(-8deg); }    /* R2 */
  40.5%, 56%   { transform: rotate(0deg); }
  58%, 62.5%   { transform: rotate(12deg); }    /* R3 */
  65.5%, 81%   { transform: rotate(0deg); }
  83%, 87.5%   { transform: rotate(6deg); }     /* R4 */
  90.5%, 100%  { transform: rotate(0deg); }
}

/* ----- Hub pulse (4 windows) ------------------------------- */
@keyframes pb-cap-hub-pulse {
  0%, 13.5%    { opacity: 0; transform: scale(0.6); }
  14.5%        { opacity: 0.7; transform: scale(1); }
  16.5%        { opacity: 0; transform: scale(1.7); }
  38.5%        { opacity: 0; transform: scale(0.6); }
  39.5%        { opacity: 0.7; transform: scale(1); }
  41.5%        { opacity: 0; transform: scale(1.7); }
  63.5%        { opacity: 0; transform: scale(0.6); }
  64.5%        { opacity: 0.7; transform: scale(1); }
  66.5%        { opacity: 0; transform: scale(1.7); }
  88.5%        { opacity: 0; transform: scale(0.6); }
  89.5%        { opacity: 0.7; transform: scale(1); }
  91.5%        { opacity: 0; transform: scale(1.7); }
  100%         { opacity: 0; transform: scale(0.6); }
}

/* ----- Your store pop (4 windows) -------------------------- */
@keyframes pb-cap-yourstore-pop {
  0%, 16%      { opacity: 0.85; transform: translate(-50%, 0) scale(0.92); border-color: var(--pb-hairline); box-shadow: 0 14px 30px -16px rgba(4, 12, 40, 0.22); }
  17.5%        { opacity: 1; transform: translate(-50%, 0) scale(1.05); border-color: rgba(5, 150, 105, 0.55); box-shadow: 0 22px 50px -18px rgba(5, 150, 105, 0.40); }
  20.5%        { opacity: 1; transform: translate(-50%, 0) scale(1); border-color: rgba(5, 150, 105, 0.55); box-shadow: 0 22px 50px -18px rgba(5, 150, 105, 0.40); }
  25%, 41%     { opacity: 0.85; transform: translate(-50%, 0) scale(0.92); border-color: var(--pb-hairline); box-shadow: 0 14px 30px -16px rgba(4, 12, 40, 0.22); }
  42.5%        { opacity: 1; transform: translate(-50%, 0) scale(1.05); border-color: rgba(5, 150, 105, 0.55); box-shadow: 0 22px 50px -18px rgba(5, 150, 105, 0.40); }
  45.5%        { opacity: 1; transform: translate(-50%, 0) scale(1); border-color: rgba(5, 150, 105, 0.55); box-shadow: 0 22px 50px -18px rgba(5, 150, 105, 0.40); }
  50%, 66%     { opacity: 0.85; transform: translate(-50%, 0) scale(0.92); border-color: var(--pb-hairline); box-shadow: 0 14px 30px -16px rgba(4, 12, 40, 0.22); }
  67.5%        { opacity: 1; transform: translate(-50%, 0) scale(1.05); border-color: rgba(5, 150, 105, 0.55); box-shadow: 0 22px 50px -18px rgba(5, 150, 105, 0.40); }
  70.5%        { opacity: 1; transform: translate(-50%, 0) scale(1); border-color: rgba(5, 150, 105, 0.55); box-shadow: 0 22px 50px -18px rgba(5, 150, 105, 0.40); }
  75%, 91%     { opacity: 0.85; transform: translate(-50%, 0) scale(0.92); border-color: var(--pb-hairline); box-shadow: 0 14px 30px -16px rgba(4, 12, 40, 0.22); }
  92.5%        { opacity: 1; transform: translate(-50%, 0) scale(1.05); border-color: rgba(5, 150, 105, 0.55); box-shadow: 0 22px 50px -18px rgba(5, 150, 105, 0.40); }
  95.5%        { opacity: 1; transform: translate(-50%, 0) scale(1); border-color: rgba(5, 150, 105, 0.55); box-shadow: 0 22px 50px -18px rgba(5, 150, 105, 0.40); }
  100%         { opacity: 0.85; transform: translate(-50%, 0) scale(0.92); border-color: var(--pb-hairline); box-shadow: 0 14px 30px -16px rgba(4, 12, 40, 0.22); }
}

/* ----- Sale-captured badge (4 windows) --------------------- */
@keyframes pb-cap-badge-in {
  0%, 17%      { opacity: 0; transform: translateY(4px); }
  18.5%        { opacity: 1; transform: translateY(0); }
  23%          { opacity: 1; }
  24%          { opacity: 0; }
  42%          { opacity: 0; }
  43.5%        { opacity: 1; transform: translateY(0); }
  48%          { opacity: 1; }
  49%          { opacity: 0; }
  67%          { opacity: 0; }
  68.5%        { opacity: 1; transform: translateY(0); }
  73%          { opacity: 1; }
  74%          { opacity: 0; }
  92%          { opacity: 0; }
  93.5%        { opacity: 1; transform: translateY(0); }
  98%          { opacity: 1; }
  100%         { opacity: 0; }
}

/* All scene sizes use cqi units, so the layout already scales proportionally
   with the container width. No per-breakpoint size overrides needed. */

/* ============================================================
   Reduced motion: show static "winning" frame
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .pb-cap-surface,
  .pb-cap-bomb,
  .pb-cap-capture-line,
  .pb-cap-route-line,
  .pb-cap-pulse,
  .pb-cap-phone,
  .pb-cap-phone-flash,
  .pb-cap-hub-ring,
  .pb-cap-yourstore,
  .pb-cap-yourstore-badge,
  .pb-cap-reticle { animation: none !important; }
  .pb-cap-surface         { opacity: 1; transform: translate(-50%, -50%); }
  /* Show only the round-1 reticle as the static "winning" frame */
  .pb-cap-reticle-r2,
  .pb-cap-reticle-r3,
  .pb-cap-reticle-r4 { opacity: 0; }
  .pb-cap-reticle-r1 { opacity: 1; transform: translate(-50%, -50%); }
  /* Show only the round-1 capture line static */
  .pb-cap-capture-r2,
  .pb-cap-capture-r3,
  .pb-cap-capture-r4 { opacity: 0; }
  .pb-cap-capture-r1 { stroke-dashoffset: 0; opacity: 1; }
  .pb-cap-yourstore       { opacity: 1; transform: translate(-50%, 0); border-color: rgba(5, 150, 105, 0.55); }
  .pb-cap-yourstore-badge { opacity: 1; }
  .pb-cap-route-line      { opacity: 1; }
  .pb-cap-pulse           { opacity: 0; }
}