/* ============================================================
   PRIMAL HZ — Design Tokens v29
   Single source of truth for color, type, spacing, motion.
   ============================================================ */

:root {
    /* — Color: Surfaces — */
    --surface-0: #050505;
    --surface-1: #080808;
    --surface-2: #0e0e0e;
    --surface-3: #161616;
    --surface-4: #1f1f1f;

    /* — Color: Brand (cyan biohacking-tech) — */
    --signal: #2ad3ea;
    --signal-bright: #5de3f5;
    --signal-dim: rgba(42, 211, 234, 0.15);
    --signal-glow: 0 0 24px rgba(42, 211, 234, 0.32);
    --signal-on: #050e10;

    /* — Color: Text (WCAG AA on --surface-1) — */
    --text-1: #f5f0e8;                         /* primary headings */
    --text-2: rgba(245, 240, 232, 0.86);       /* body text strong */
    --text-3: rgba(245, 240, 232, 0.72);       /* body text default — was 0.55 */
    --text-4: rgba(245, 240, 232, 0.56);       /* secondary/meta — was 0.42 */
    --text-5: rgba(245, 240, 232, 0.40);       /* disclaimers only — keep dim */

    /* — Color: Borders — */
    --border-1: rgba(42, 211, 234, 0.08);
    --border-2: rgba(42, 211, 234, 0.18);
    --border-3: rgba(42, 211, 234, 0.32);

    /* — Color: Semantic — */
    --success: #22c55e;
    --warning: #f59e0b;
    --error:   #ef4444;

    /* — Typography — */
    --font-display: 'Bebas Neue', sans-serif;
    --font-body:    'Outfit', sans-serif;
    --font-mono:    'Space Mono', monospace;

    --fs-hero:     clamp(56px, 9vw, 132px);
    --fs-h1:       clamp(44px, 6.5vw, 96px);
    --fs-h2:       clamp(36px, 5vw, 72px);
    --fs-h3:       clamp(28px, 3.2vw, 44px);
    --fs-h4:       clamp(20px, 2vw, 28px);
    --fs-lead:     18px;
    --fs-body:     16px;
    --fs-small:    14px;
    --fs-meta:     12px;
    --fs-micro:    10px;

    --lh-tight:    0.92;
    --lh-snug:     1.2;
    --lh-body:     1.75;
    --lh-loose:    1.9;

    --tracking-display: 0.04em;
    --tracking-body:    0;
    --tracking-mono:    0.18em;

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

    /* — Layout — */
    --container:   1180px;
    --container-narrow: 880px;
    --gutter:      clamp(20px, 4vw, 48px);
    --nav-height:  72px;

    /* — Radius — */
    --radius-sm:  4px;
    --radius-md:  8px;
    --radius-lg:  16px;
    --radius-xl:  24px;

    /* — Shadow — */
    --shadow-sm:  0 4px 12px rgba(0, 0, 0, 0.24);
    --shadow-md:  0 16px 40px rgba(0, 0, 0, 0.32);
    --shadow-lg:  0 28px 90px rgba(0, 0, 0, 0.42);

    /* — Motion — */
    --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast:   0.15s;
    --dur-base:   0.3s;
    --dur-slow:   0.6s;

    /* — Z-index scale — */
    --z-base:    1;
    --z-content: 10;
    --z-nav:     100;
    --z-modal:   1000;
    --z-noise:   10;  /* was 9999 — bug fix */

    /* — Legacy aliases (do NOT use in new code; here for backwards compat) — */
    --black:    var(--surface-1);
    --obsidian: var(--surface-2);
    --charcoal: var(--surface-3);
    --gold:     var(--signal);
    --gold-light: var(--signal-bright);
    --gold-dim: var(--signal-dim);
    --white:    var(--text-1);
    --grey:     #7a9ea4;
    --grey-dim: #2a3c40;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
    font-family: var(--font-body);
    background: var(--surface-1);
    color: var(--text-2);
    overflow-x: hidden;
    cursor: default;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
::selection { background: var(--signal); color: var(--signal-on); }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--surface-1); }
::-webkit-scrollbar-thumb { background: var(--signal-dim); border-radius: var(--radius-sm); }
::-webkit-scrollbar-thumb:hover { background: rgba(42, 211, 234, 0.32); }

a { color: var(--signal); text-decoration: none; }
a:hover { color: var(--signal-bright); }

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

button { font-family: inherit; }

:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Skip-to-content link for accessibility */
.phz-skip-link {
    position: absolute; left: -9999px; top: auto;
    width: 1px; height: 1px; overflow: hidden;
}
.phz-skip-link:focus {
    position: fixed; left: 16px; top: 16px;
    width: auto; height: auto; padding: 12px 20px;
    background: var(--signal); color: var(--signal-on);
    z-index: var(--z-modal); font-weight: 700;
}

  /* Noise overlay — uses --z-noise (10) so it doesn't block modals/tooltips */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
    opacity: 0.025;
    pointer-events: none;
    z-index: var(--z-noise);
  }

  /* Animations */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @keyframes lineExpand {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }
  @keyframes pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
  }
  @keyframes waveAnim {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
  @keyframes scanline {
    0%   { transform: translateY(-100%); }
    100% { transform: translateY(100vh); }
  }
  @keyframes float {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-10px); }
  }
  @keyframes shimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
  }
  @keyframes goldPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(201,168,76,0); }
    50%      { box-shadow: 0 0 20px 4px rgba(42,211,234,0.25); }
  }
  @keyframes phzAudioBar {
    0%   { transform: scaleY(0.55); }
    100% { transform: scaleY(1.1); }
  }

  .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1);
  }
  .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }
  .reveal-delay-1 { transition-delay: 0.1s; }
  .reveal-delay-2 { transition-delay: 0.2s; }
  .reveal-delay-3 { transition-delay: 0.3s; }
  .reveal-delay-4 { transition-delay: 0.4s; }
  .reveal-delay-5 { transition-delay: 0.5s; }

  /* Global button */
  .btn-gold {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--gold);
    color: #050e10;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 14px 32px;
    border: none;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
    text-decoration: none;
  }
  .btn-gold:hover { background: var(--gold-light); }
  .btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    color: var(--gold);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 13px 31px;
    border: 1px solid var(--gold);
    cursor: pointer;
    transition: background 0.3s, color 0.3s;
    text-decoration: none;
  }
  .btn-outline:hover { background: var(--gold-dim); }

  /* Gold divider */
  .gold-line {
    width: 60px;
    height: 1px;
    background: var(--gold);
    transform-origin: left;
  }
  .section-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .section-label::before {
    content: '';
    display: block;
    width: 32px;
    height: 1px;
    background: var(--gold);
  }


/* ──────────────────────────────────────────────────────────────
   PRIMAL HZ V5 — Responsive overrides for the React landing theme
   These rules intentionally use !important because the landing page
   is generated with inline React styles. They keep desktop intact and
   make the whole theme usable on tablets and phones.
────────────────────────────────────────────────────────────── */
img, svg, canvas, video { max-width: 100%; }
#root { width: 100%; overflow-x: clip; }
#root * { min-width: 0; }
button, input, textarea, select { max-width: 100%; }

@media (max-width: 1100px) {
  #root [style*="grid-template-columns: repeat(6, 1fr)"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  #root [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  #root [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  #root [style*="grid-template-columns: 1fr 420px"] {
    grid-template-columns: 1fr !important;
  }
  #root [style*="position: sticky"] {
    position: static !important;
    top: auto !important;
  }
}

@media (max-width: 900px) {
  html { font-size: 15px; }

  .primal-nav {
    height: 64px !important;
    padding: 0 16px !important;
    background: rgba(8,8,8,0.94) !important;
    border-bottom: 1px solid rgba(42,211,234,0.12) !important;
    backdrop-filter: blur(16px) !important;
  }
  .primal-nav-links { display: none !important; }
  .primal-mobile-toggle { display: inline-flex !important; }
  .primal-mobile-menu { display: flex !important; }

  #root [style*="padding: 120px 64px"],
  #root [style*="padding: 100px 64px"],
  #root [style*="padding: 80px 64px"],
  #root [style*="padding: 80px 64px 48px"],
  #root [style*="padding: 80px 64px 48px"],
  #root [style*="padding: 64px 64px 40px"],
  #root [style*="padding: 56px 64px"],
  #root [style*="padding: 48px 64px"],
  #root [style*="padding: 80px 64px"] {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  #root [style*="grid-template-columns: repeat(3, 1fr)"],
  #root [style*="grid-template-columns: repeat(2, 1fr)"],
  #root [style*="grid-template-columns: 80px 1fr"],
  #root [style*="grid-template-columns: 120px 1fr"],
  #root [style*="grid-template-columns: 1fr 1fr 1fr"],
  #root [style*="grid-template-columns: 1fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  #root [style*="grid-template-columns: repeat(6, 1fr)"],
  #root [style*="grid-template-columns: repeat(4, 1fr)"],
  #root [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  #root [style*="gap: 80px"] { gap: 36px !important; }
  #root [style*="gap: 48px"] { gap: 24px !important; }
  #root [style*="gap: 40px"] { gap: 24px !important; }

  #root [style*="min-height: 700px"] {
    min-height: 680px !important;
    height: auto !important;
    padding-top: 120px !important;
    padding-bottom: 80px !important;
  }

  #root [style*="width: 600px"][style*="height: 600px"] {
    width: 340px !important;
    height: 340px !important;
  }
  #root [style*="width: 480px"][style*="height: 480px"] {
    width: 300px !important;
    height: 300px !important;
  }
  #root [style*="width: 320px"][style*="height: 320px"] {
    width: 220px !important;
    height: 220px !important;
  }

  #root [style*="display: flex"][style*="justify-content: center"][style*="gap: 16px"],
  #root [style*="display: flex"][style*="gap: 16px"] {
    flex-wrap: wrap !important;
  }

  .btn-gold,
  .btn-outline {
    min-height: 48px;
    justify-content: center;
    text-align: center;
    white-space: normal;
    line-height: 1.3;
  }
}

@media (max-width: 640px) {
  html { font-size: 14px; }
  body { -webkit-text-size-adjust: 100%; }

  .section-label {
    font-size: 9px !important;
    gap: 8px !important;
    flex-wrap: wrap;
  }
  .section-label::before { width: 22px; }

  .btn-gold,
  .btn-outline {
    width: 100%;
    padding: 13px 16px !important;
    font-size: 11px !important;
    letter-spacing: 0.08em !important;
  }

  #root [style*="padding: 120px 64px"],
  #root [style*="padding: 100px 64px"],
  #root [style*="padding: 80px 64px"],
  #root [style*="padding: 80px 64px 48px"],
  #root [style*="padding: 64px 64px 40px"],
  #root [style*="padding: 56px 64px"],
  #root [style*="padding: 48px 64px"],
  #root [style*="padding: 48px 40px"],
  #root [style*="padding: 40px 36px"],
  #root [style*="padding: 40px"],
  #root [style*="padding: 36px"],
  #root [style*="padding: 32px 24px"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  #root [style*="padding: 120px 64px"],
  #root [style*="padding: 100px 64px"],
  #root [style*="padding: 80px 64px"] {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  #root [style*="padding: 80px 64px 48px"] {
    padding-top: 48px !important;
    padding-bottom: 32px !important;
  }

  #root [style*="font-size: 148px"],
  #root h1 {
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  #root [style*="font-size: 52px"] { font-size: 40px !important; }
  #root [style*="font-size: 48px"] { font-size: 38px !important; }
  #root [style*="font-size: 46px"] { font-size: 36px !important; }
  #root [style*="font-size: 32px"] { font-size: 28px !important; }
  #root [style*="font-size: 28px"] { font-size: 24px !important; }

  #root [style*="margin-top: 60px"] { margin-top: 34px !important; }
  #root [style*="margin-top: 40px"] { margin-top: 28px !important; }
  #root [style*="margin-bottom: 64px"] { margin-bottom: 36px !important; }
  #root [style*="margin-bottom: 48px"] { margin-bottom: 30px !important; }

  #root [style*="display: flex"][style*="gap: 16px"],
  #root [style*="display: flex"][style*="gap: 12px"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  #root [style*="grid-template-columns"] {
    gap: 18px !important;
  }

  #root [style*="border-left"] {
    border-left: none !important;
  }
  #root [style*="border-right"] {
    border-right: none !important;
  }

  #root [style*="aspect-ratio: 1"] {
    min-height: 280px !important;
  }

  #root [style*="width: min(560px, 100%)"] {
    width: calc(100vw - 28px) !important;
    max-height: calc(100dvh - 28px) !important;
    overflow-y: auto !important;
    padding: 24px 18px !important;
  }

  #root [style*="position: absolute"][style*="top: 12px"][style*="right: 12px"] {
    position: static !important;
    display: inline-block !important;
    margin-bottom: 10px !important;
  }

  #root input,
  #root textarea {
    font-size: 16px !important;
  }

  footer [style*="justify-content: space-between"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
}

@media (max-width: 390px) {
  .primal-nav { padding: 0 12px !important; }
  .primal-nav span { font-size: 18px !important; letter-spacing: 0.11em !important; }
  #root [style*="padding"] { padding-left: 14px !important; padding-right: 14px !important; }
}

/* ──────────────────────────────────────────────────────────────
   PRIMAL HZ V6 — Full Mobile Responsiveness Stabilizer
   Purpose: fix the React landing across phones/tablets without requiring
   Elementor or Gutenberg editing. These rules override inline React styles
   only under responsive breakpoints.
────────────────────────────────────────────────────────────── */
html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
#root { max-width: 100vw; }
#root * { box-sizing: border-box; }
#root a, #root button { -webkit-tap-highlight-color: transparent; }
#root p, #root span, #root div, #root h1, #root h2, #root h3 { overflow-wrap: anywhere; }
#root h1, #root h2, #root h3 { text-wrap: balance; }

@media (max-width: 1180px) {
  .phz-product-layout { grid-template-columns: 1fr !important; min-height: auto !important; }
  .phz-product-list { border-right: 0 !important; border-bottom: 1px solid rgba(42,211,234,0.08) !important; }
  .phz-product-detail { position: relative !important; top: auto !important; width: 100% !important; }
  .phz-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 900px) {
  :root { --mobile-pad: 22px; }
  .phz-hero { height: auto !important; min-height: 100svh !important; padding: 112px var(--mobile-pad) 78px !important; align-items: center !important; }
  .phz-hero > div[style*="max-width: 900"] { padding-left: 0 !important; padding-right: 0 !important; width: 100% !important; }
  .phz-hero h1 { font-size: clamp(58px, 18vw, 104px) !important; line-height: .86 !important; letter-spacing: .025em !important; }
  .phz-hero p { font-size: 15px !important; line-height: 1.65 !important; max-width: 92vw !important; }
  .phz-hero [style*="width: 600px"] { width: 82vw !important; height: 82vw !important; max-width: 420px !important; max-height: 420px !important; }
  .phz-hero [style*="width: 480px"] { width: 66vw !important; height: 66vw !important; max-width: 340px !important; max-height: 340px !important; }
  .phz-hero [style*="width: 320px"] { width: 48vw !important; height: 48vw !important; max-width: 240px !important; max-height: 240px !important; }

  .phz-frequency-strip { padding: 42px var(--mobile-pad) !important; }
  .phz-frequency-strip > div { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  .phz-frequency-strip > div > div { border: 1px solid rgba(42,211,234,0.08) !important; padding: 22px 18px !important; background: rgba(255,255,255,0.015) !important; }

  .phz-system-section { padding: 72px var(--mobile-pad) !important; }
  #root section, #root main, #root footer { max-width: 100vw !important; }
  #root [style*="max-width: 1200"],
  #root [style*="max-width: 1100"],
  #root [style*="max-width: 1000"],
  #root [style*="max-width: 900"] { width: 100% !important; max-width: 100% !important; }

  #root [style*="padding: 80px 64px 48px"],
  #root [style*="padding: 80px 64px"],
  #root [style*="padding: 64px 64px"],
  #root [style*="padding: 56px 64px"],
  #root [style*="padding: 48px 64px"],
  #root [style*="padding: 120px 64px"],
  #root [style*="padding: 100px 64px"] { padding-left: var(--mobile-pad) !important; padding-right: var(--mobile-pad) !important; }

  #root [style*="display: grid"] { max-width: 100% !important; }
  #root [style*="grid-template-columns: repeat(3, 1fr)"],
  #root [style*="grid-template-columns: repeat(2, 1fr)"],
  #root [style*="grid-template-columns: 80px 1fr"],
  #root [style*="grid-template-columns: 120px 1fr"],
  #root [style*="grid-template-columns: 1fr 420px"],
  #root [style*="grid-template-columns: 1fr 1fr 1fr"],
  #root [style*="grid-template-columns: repeat(3, 1fr)"],
  #root [style*="grid-template-columns: repeat(4, 1fr)"],
  #root [style*="grid-template-columns: repeat(6, 1fr)"] { grid-template-columns: 1fr !important; }

  #root [style*="gap: 80px"] { gap: 38px !important; }
  #root [style*="gap: 64px"] { gap: 32px !important; }
  #root [style*="gap: 48px"] { gap: 26px !important; }
  #root [style*="gap: 40px"] { gap: 24px !important; }

  .phz-product-list { padding: 28px var(--mobile-pad) !important; }
  .phz-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  .phz-product-card { padding: 24px 18px !important; min-height: 178px !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; }
  .phz-product-card [style*="position: absolute"][style*="top: 12px"] { position: static !important; display: inline-flex !important; align-self: flex-start !important; margin-bottom: 10px !important; }
  .phz-product-detail { padding: 32px var(--mobile-pad) 44px !important; }
  .phz-product-detail h2 { font-size: clamp(36px, 11vw, 48px) !important; }

  .phz-upsell-overlay { padding: 16px !important; align-items: flex-end !important; }
  .phz-upsell-modal { width: 100% !important; max-width: 560px !important; max-height: calc(100svh - 32px) !important; overflow-y: auto !important; padding: 28px 20px 22px !important; border-radius: 18px 18px 0 0 !important; }
  .phz-upsell-modal h3 { font-size: clamp(34px, 11vw, 46px) !important; }
  .phz-upsell-modal [style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: 1fr !important; }
}

@media (max-width: 640px) {
  :root { --mobile-pad: 16px; }
  .primal-nav { height: 62px !important; padding: 0 14px !important; }
  .primal-nav > button:first-child span { font-size: 19px !important; letter-spacing: .12em !important; }
  .primal-mobile-menu { left: 12px !important; right: 12px !important; top: 62px !important; max-height: calc(100svh - 74px) !important; overflow-y: auto !important; }

  .phz-hero { min-height: 100svh !important; padding-top: 96px !important; padding-bottom: 58px !important; }
  .phz-hero h1 { font-size: clamp(54px, 21vw, 86px) !important; max-width: 100% !important; }
  .phz-hero p { margin-top: 22px !important; font-size: 14px !important; }
  .phz-hero [style*="margin-top: 40px"] { margin-top: 28px !important; }
  .phz-hero [style*="margin-top: 60px"] { margin-top: 34px !important; }
  .phz-hero [style*="bottom: 36px"] { display: none !important; }

  .phz-frequency-strip > div { grid-template-columns: 1fr !important; }
  .phz-frequency-strip > div > div { padding: 20px 16px !important; }
  .phz-frequency-strip [style*="font-size: 28px"] { font-size: 25px !important; }

  .phz-product-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .phz-product-card { min-height: auto !important; padding: 22px 16px !important; }
  .phz-product-card [style*="font-size: 28px"] { font-size: 26px !important; }
  .phz-product-card [style*="font-size: 24px"] { font-size: 24px !important; }

  #root [style*="font-size: 88px"] { font-size: 58px !important; }
  #root [style*="font-size: 80px"] { font-size: 54px !important; }
  #root [style*="font-size: 64px"] { font-size: 44px !important; }
  #root [style*="font-size: 52px"] { font-size: 38px !important; }
  #root [style*="font-size: 48px"] { font-size: 36px !important; }
  #root [style*="font-size: 46px"] { font-size: 34px !important; }
  #root [style*="font-size: 32px"] { font-size: 26px !important; }
  #root [style*="font-size: 28px"] { font-size: 24px !important; }

  #root p { font-size: 14px !important; line-height: 1.72 !important; }
  #root [style*="line-height: 1.9"] { line-height: 1.72 !important; }
  #root [style*="line-height: 1.8"] { line-height: 1.68 !important; }
  #root [style*="padding: 56px 0"] { padding-top: 34px !important; padding-bottom: 34px !important; }
  #root [style*="padding: 32px 24px"] { padding: 22px 16px !important; }
  #root [style*="padding: 40px"] { padding: 24px 18px !important; }
  #root [style*="padding: 36px"] { padding: 24px 18px !important; }
  #root [style*="padding: 32px"] { padding: 22px 16px !important; }

  #root [style*="display: flex"][style*="justify-content: center"][style*="gap: 16px"],
  #root [style*="display: flex"][style*="gap: 16px"] { flex-direction: column !important; align-items: stretch !important; width: 100% !important; }
  #root [style*="display: flex"][style*="align-items: baseline"] { flex-direction: row !important; align-items: baseline !important; }
  #root .btn-gold, #root .btn-outline { width: 100% !important; justify-content: center !important; min-height: 48px !important; }

  #root [style*="display: grid"][style*="grid-template-columns: 1fr 1fr 1fr"] > div,
  #root [style*="display: grid"][style*="grid-template-columns: repeat(3, 1fr)"] > div,
  #root [style*="display: grid"][style*="grid-template-columns: repeat(3, 1fr)"] > div { min-width: 0 !important; }

  /* Matrix/table-like rows become readable stacked cards on phones */
  #root [style*="grid-template-columns: 1fr 1fr 1fr"][style*="padding: 16px 24px"] { display: none !important; }
  #root [style*="grid-template-columns: 1fr 1fr 1fr"][style*="padding: 20px 24px"] { grid-template-columns: 1fr !important; gap: 7px !important; padding: 18px 16px !important; }

  footer { padding-left: var(--mobile-pad) !important; padding-right: var(--mobile-pad) !important; }
  footer [style*="display: flex"] { flex-direction: column !important; align-items: flex-start !important; }
}

@media (max-width: 430px) {
  :root { --mobile-pad: 14px; }
  .phz-hero h1 { font-size: clamp(48px, 20vw, 76px) !important; }
  .section-label { font-size: 9px !important; letter-spacing: .14em !important; }
  .phz-product-detail { padding-left: 14px !important; padding-right: 14px !important; }
  .phz-upsell-modal { padding-left: 16px !important; padding-right: 16px !important; }
  #root [style*="letter-spacing: 0.2em"] { letter-spacing: .12em !important; }
}

/* ──────────────────────────────────────────────────────────────
   PRIMAL HZ V16 — Hero alignment + science/about mobile hardening
   Fixes the long PERFORMANCE STACK headline and strengthens responsive
   behavior for robust information pages on mobile.
────────────────────────────────────────────────────────────── */
.phz-performance-line {
  display: block !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
  text-wrap: nowrap !important;
  font-size: clamp(54px, 9.6vw, 116px) !important;
  line-height: .88 !important;
  letter-spacing: .026em !important;
  transform: translateX(-0.01em);
}

#root h1 .phz-performance-line,
#root .phz-performance-line {
  overflow-wrap: normal !important;
  word-break: keep-all !important;
}

@media (min-width: 1200px) {
  .phz-performance-line {
    font-size: clamp(92px, 7.8vw, 118px) !important;
  }
}

@media (max-width: 1180px) {
  #root [style*="grid-template-columns: 0.9fr 1.1fr"],
  #root [style*="grid-template-columns: 1.05fr 0.95fr"],
  #root [style*="grid-template-columns: 1fr 360px"],
  #root [style*="grid-template-columns: 1fr 420px"],
  #root [style*="grid-template-columns: 1fr 1fr 1.2fr"],
  #root [style*="grid-template-columns: 1fr 1fr 1fr 1fr"],
  #root [style*="grid-template-columns: repeat(4, 1fr)"],
  #root [style*="grid-template-columns: repeat(3, 1fr)"],
  #root [style*="grid-template-columns: 140px 1fr"],
  #root [style*="grid-template-columns: 120px 1fr"],
  #root [style*="grid-template-columns: 90px 1fr"] {
    grid-template-columns: 1fr !important;
  }

  #root [style*="position: sticky"] {
    position: static !important;
    top: auto !important;
  }
}

@media (max-width: 900px) {
  .phz-performance-line {
    font-size: clamp(44px, 12.5vw, 82px) !important;
    letter-spacing: .018em !important;
  }

  #root [style*="padding: 104px 64px 72px"],
  #root [style*="padding: 86px 64px"],
  #root [style*="padding: 96px 64px"],
  #root [style*="padding: 92px 64px"],
  #root [style*="padding: 104px 64px"],
  #root [style*="padding: 86px 64px"] {
    padding-left: var(--mobile-pad, 22px) !important;
    padding-right: var(--mobile-pad, 22px) !important;
  }

  #root [style*="margin-bottom: 92px"],
  #root [style*="margin-bottom: 86px"],
  #root [style*="margin: 92px 0"],
  #root [style*="margin-top: 96px"],
  #root [style*="margin-top: 92px"],
  #root [style*="margin-top: 86px"] {
    margin-top: 54px !important;
    margin-bottom: 54px !important;
  }

  #root [style*="padding: 38px"],
  #root [style*="padding: 40px"],
  #root [style*="padding: 46px 40px"] {
    padding: 28px 22px !important;
  }

  #root [style*="grid-template-columns: 1fr 1fr 1.2fr"] > div,
  #root [style*="grid-template-columns: 90px 1fr"] > div,
  #root [style*="grid-template-columns: 120px 1fr"] > div,
  #root [style*="grid-template-columns: 140px 1fr"] > div {
    min-width: 0 !important;
  }
}

@media (max-width: 640px) {
  .phz-performance-line {
    font-size: clamp(34px, 10.8vw, 52px) !important;
    letter-spacing: .01em !important;
  }

  .phz-hero h1 {
    font-size: clamp(48px, 17vw, 72px) !important;
  }

  #root [style*="font-size: clamp(58px, 8.5vw, 116px)"],
  #root [style*="font-size: clamp(58px, 9vw, 118px)"],
  #root [style*="font-size: clamp(48px, 6vw, 82px)"],
  #root [style*="font-size: clamp(48px, 6vw, 78px)"] {
    font-size: clamp(42px, 13.5vw, 62px) !important;
    line-height: .92 !important;
  }

  #root [style*="font-size: 72px"] { font-size: 52px !important; }
  #root [style*="font-size: 58px"] { font-size: 48px !important; }
  #root [style*="font-size: 52px"] { font-size: 42px !important; }
  #root [style*="font-size: 42px"] { font-size: 34px !important; }
  #root [style*="font-size: 40px"] { font-size: 32px !important; }
  #root [style*="font-size: 34px"] { font-size: 29px !important; }
  #root [style*="font-size: 30px"] { font-size: 26px !important; }

  #root [style*="grid-template-columns: 1fr 1fr 1.2fr"] {
    grid-template-columns: 1fr !important;
  }

  #root [style*="grid-template-columns: 1fr 1fr 1.2fr"] > div {
    padding: 16px !important;
  }

  #root [style*="grid-template-columns: 90px 1fr"],
  #root [style*="grid-template-columns: 120px 1fr"],
  #root [style*="grid-template-columns: 140px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  #root [style*="padding: 32px 24px"],
  #root [style*="padding: 32px"],
  #root [style*="padding: 28px"],
  #root [style*="padding: 24px 20px"],
  #root [style*="padding: 24px"] {
    padding: 20px 16px !important;
  }

  #root [style*="max-width: 890"],
  #root [style*="max-width: 900"],
  #root [style*="max-width: 860"],
  #root [style*="max-width: 760"] {
    max-width: 100% !important;
  }

  #root [style*="display: flex"][style*="flex-wrap: wrap"] {
    gap: 10px !important;
  }
}

@media (max-width: 430px) {
  .phz-performance-line {
    font-size: clamp(30px, 9.35vw, 40px) !important;
    letter-spacing: 0 !important;
  }
}

/* ─── V17 ROBUST SCIENCE + ABOUT PAGES ───────────────────────────────────── */
.phz-info-page {
  background: #080808;
  color: #F5F0E8;
  padding-top: 72px;
  overflow-x: hidden;
}

.phz-info-page * {
  box-sizing: border-box;
}

.phz-info-wrap {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.phz-info-hero {
  position: relative;
  min-height: calc(100vh - 72px);
  display: flex;
  align-items: center;
  padding: 104px 0 82px;
  overflow: hidden;
  border-bottom: 1px solid rgba(42,211,234,0.10);
}

.phz-info-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(42, 211, 234, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(42, 211, 234, 0.035) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(circle at 65% 30%, black 0%, transparent 72%);
  opacity: 0.75;
  pointer-events: none;
}

.phz-info-hero-science {
  background:
    radial-gradient(circle at 78% 18%, rgba(42,211,234,0.17), transparent 33%),
    radial-gradient(circle at 14% 78%, rgba(255,215,0,0.10), transparent 34%),
    linear-gradient(180deg, #080808 0%, #101010 100%);
}

.phz-info-hero-about {
  background:
    radial-gradient(circle at 82% 18%, rgba(42,211,234,0.14), transparent 34%),
    radial-gradient(circle at 16% 76%, rgba(255,215,0,0.11), transparent 34%),
    linear-gradient(180deg, #080808 0%, #111 100%);
}

.phz-info-noise {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent, rgba(0,0,0,0.38));
  pointer-events: none;
}

.phz-info-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.46fr);
  gap: 64px;
  align-items: center;
}

.phz-info-title {
  font-family: var(--font-display);
  font-size: clamp(58px, 8.5vw, 116px);
  line-height: 0.86;
  letter-spacing: 0.04em;
  font-weight: 400;
  color: #F5F0E8;
  margin: 0;
  max-width: 980px;
}

.phz-info-title span,
.phz-info-subtitle span,
.phz-section-heading h2 span,
.phz-offer-card h2 span,
.phz-manifesto-long h2 span {
  color: #2ad3ea;
}

.phz-info-lead {
  max-width: 900px;
  margin: 30px 0 0;
  font-size: 19px;
  line-height: 1.9;
  color: rgba(245,240,232,0.64);
  font-weight: 300;
}

.phz-info-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 36px;
}

.phz-quote-stack {
  display: grid;
  gap: 16px;
}

.phz-quote-card,
.phz-manifesto-card {
  position: relative;
  overflow: hidden;
  padding: 30px;
  border: 1px solid rgba(42,211,234,0.13);
  background:
    radial-gradient(circle at top right, rgba(42,211,234,0.10), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018));
  box-shadow: 0 28px 90px rgba(0,0,0,0.32);
}

.phz-quote-card.cyan { border-color: rgba(42,211,234,0.34); }
.phz-quote-card.gold { border-color: rgba(255,215,0,0.22); }

.phz-quote-card span,
.phz-manifesto-card span {
  display: block;
  font-family: var(--font-mono);
  color: #2ad3ea;
  font-size: 11px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.phz-quote-card.gold span { color: #FFD700; }

.phz-quote-card p,
.phz-manifesto-card p {
  margin: 0;
  color: rgba(245,240,232,0.70);
  font-size: 16px;
  line-height: 1.75;
  font-weight: 300;
}

.phz-manifesto-card {
  min-height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.phz-manifesto-card p {
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 58px);
  line-height: 0.95;
  letter-spacing: 0.045em;
  color: #F5F0E8;
}

.phz-info-section {
  position: relative;
  padding: 96px 0;
  background: #080808;
}

.phz-dark-panel-section {
  background:
    radial-gradient(circle at 50% 0%, rgba(42,211,234,0.08), transparent 36%),
    linear-gradient(180deg, #080808, #101010 48%, #080808);
  border-top: 1px solid rgba(42,211,234,0.08);
  border-bottom: 1px solid rgba(42,211,234,0.08);
}

.phz-section-heading {
  max-width: 860px;
  margin-bottom: 46px;
}

.phz-section-heading h2,
.phz-info-subtitle,
.phz-offer-card h2,
.phz-manifesto-long h2 {
  font-family: var(--font-display);
  font-size: clamp(48px, 6.5vw, 86px);
  line-height: 0.9;
  letter-spacing: 0.04em;
  font-weight: 400;
  color: #F5F0E8;
  margin: 0 0 24px;
}

.phz-section-heading p,
.phz-copy,
.phz-copy-large {
  color: rgba(245,240,232,0.60);
  font-size: 16px;
  line-height: 1.9;
  font-weight: 300;
  margin: 0;
}

.phz-copy-large {
  font-size: 20px;
  line-height: 1.9;
  color: rgba(245,240,232,0.72);
  margin-bottom: 26px;
}

.phz-pillar-grid,
.phz-values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.phz-pillar-card,
.phz-value-card {
  min-height: 430px;
  padding: 30px;
  border: 1px solid rgba(42,211,234,0.11);
  background:
    radial-gradient(circle at top right, rgba(42,211,234,0.09), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,0.052), rgba(255,255,255,0.018));
}

.phz-card-number {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: #2ad3ea;
  margin-bottom: 22px;
}

.phz-card-kicker {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,215,0,0.72);
  margin-bottom: 16px;
}

.phz-pillar-card h3,
.phz-value-card h3,
.phz-proof-card h3,
.phz-foundation-card h3,
.phz-audience-card h3,
.phz-journey-item h3,
.phz-small-offer-card h3,
.phz-faq-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  color: #F5F0E8;
  letter-spacing: 0.045em;
  line-height: 0.95;
  margin: 0 0 16px;
}

.phz-pillar-card h3,
.phz-value-card h3 { font-size: 36px; }
.phz-proof-card h3,
.phz-foundation-card h3,
.phz-audience-card h3,
.phz-journey-item h3,
.phz-small-offer-card h3,
.phz-faq-card h3 { font-size: 34px; }

.phz-pillar-card p,
.phz-value-card p,
.phz-proof-card p,
.phz-foundation-card p,
.phz-audience-card p,
.phz-journey-item p,
.phz-small-offer-card p,
.phz-faq-card p,
.phz-method-card p {
  color: rgba(245,240,232,0.58);
  font-size: 14.5px;
  line-height: 1.8;
  font-weight: 300;
  margin: 0;
}

.phz-pillar-card ul {
  list-style: none;
  display: grid;
  gap: 10px;
  margin-top: 24px;
  padding: 0;
}

.phz-pillar-card li {
  position: relative;
  color: rgba(245,240,232,0.50);
  font-size: 12px;
  line-height: 1.55;
  padding-left: 16px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.phz-pillar-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2ad3ea;
  box-shadow: 0 0 16px rgba(42,211,234,0.45);
}

.phz-two-col {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 64px;
  align-items: start;
}

.phz-proof-grid,
.phz-foundation-grid {
  display: grid;
  gap: 14px;
}

.phz-proof-card,
.phz-foundation-card,
.phz-journey-item,
.phz-small-offer-card,
.phz-faq-card {
  border: 1px solid rgba(42,211,234,0.10);
  background: rgba(255,255,255,0.035);
  padding: 26px;
}

.phz-proof-card span,
.phz-foundation-card span,
.phz-audience-card span,
.phz-journey-item span {
  display: block;
  font-family: var(--font-mono);
  color: #2ad3ea;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.phz-method-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  border: 1px solid rgba(42,211,234,0.08);
  background: rgba(42,211,234,0.08);
}

.phz-method-card {
  position: relative;
  min-height: 390px;
  padding: 30px;
  background: #0d0d0d;
}

.phz-method-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(42,211,234,0.30);
  color: #2ad3ea;
  font-family: var(--font-mono);
  font-size: 12px;
  margin-bottom: 30px;
}

.phz-method-card h3 {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 0.95;
  letter-spacing: 0.045em;
  font-weight: 400;
  color: #F5F0E8;
  margin: 0 0 18px;
}

.phz-method-card strong {
  display: block;
  margin-top: 22px;
  color: rgba(42,211,234,0.80);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.phz-matrix-section {
  background:
    radial-gradient(circle at 50% 0%, rgba(42,211,234,0.06), transparent 42%),
    #080808;
}

.phz-frequency-table {
  display: grid;
  border: 1px solid rgba(42,211,234,0.12);
}

.phz-frequency-row {
  display: grid;
  grid-template-columns: 58px minmax(180px, 0.8fr) minmax(260px, 1.3fr) minmax(220px, 0.9fr);
  gap: 24px;
  align-items: stretch;
  padding: 24px;
  border-bottom: 1px solid rgba(42,211,234,0.09);
  background: rgba(255,255,255,0.025);
}

.phz-frequency-row:last-child { border-bottom: none; }

.phz-row-index {
  font-family: var(--font-mono);
  color: rgba(42,211,234,0.90);
  font-size: 12px;
  letter-spacing: 0.12em;
}

.phz-row-name {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 0.95;
  letter-spacing: 0.045em;
  color: #F5F0E8;
}

.phz-row-copy strong {
  display: block;
  color: #F5F0E8;
  font-size: 15px;
  margin-bottom: 8px;
}

.phz-row-copy span,
.phz-row-use {
  display: block;
  color: rgba(245,240,232,0.55);
  font-size: 14px;
  line-height: 1.72;
}

.phz-offer-section {
  padding-top: 58px;
}

.phz-offer-card {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 40px;
  align-items: center;
  padding: 44px;
  border: 1px solid rgba(42,211,234,0.32);
  background:
    radial-gradient(circle at 90% 0%, rgba(42,211,234,0.18), transparent 36%),
    linear-gradient(180deg, rgba(42,211,234,0.08), rgba(255,255,255,0.025));
}

.phz-offer-card p {
  max-width: 720px;
  color: rgba(245,240,232,0.62);
  font-size: 16px;
  line-height: 1.85;
  margin: 0;
}

.phz-offer-price {
  border: 1px solid rgba(42,211,234,0.18);
  background: rgba(8,8,8,0.58);
  padding: 24px;
  text-align: center;
}

.phz-was-price {
  display: block;
  position: relative;
  width: max-content;
  margin: 0 auto 4px;
  color: rgba(245,240,232,0.38);
  font-family: var(--font-display);
  font-size: 34px;
  letter-spacing: 0.04em;
}

.phz-was-price::after {
  content: "";
  position: absolute;
  left: -6px;
  right: -6px;
  top: 50%;
  height: 2px;
  background: rgba(255,90,90,0.8);
  transform: rotate(-8deg);
}

.phz-offer-price strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 76px;
  line-height: 1;
  color: #2ad3ea;
  letter-spacing: 0.05em;
  margin-bottom: 20px;
}

.phz-offer-price .btn-gold {
  width: 100%;
  justify-content: center;
}

.phz-faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.phz-disclaimer {
  color: rgba(245,240,232,0.38);
  font-size: 12px;
  line-height: 1.75;
  margin: 42px 0 0;
  padding-top: 24px;
  border-top: 1px solid rgba(42,211,234,0.09);
}

.phz-values-grid {
  grid-template-columns: repeat(3, 1fr);
}

.phz-value-card {
  min-height: 310px;
}

.phz-audience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.phz-audience-card {
  min-height: 350px;
  padding: 32px;
  border: 1px solid rgba(42,211,234,0.11);
  background:
    radial-gradient(circle at top right, rgba(42,211,234,0.08), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.014));
}

.phz-audience-card strong {
  display: block;
  color: rgba(42,211,234,0.78);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 18px;
}

.phz-journey-section {
  background:
    radial-gradient(circle at 10% 20%, rgba(255,215,0,0.07), transparent 30%),
    radial-gradient(circle at 90% 80%, rgba(42,211,234,0.08), transparent 34%),
    #0b0b0b;
}

.phz-journey-list {
  display: grid;
  gap: 14px;
}

.phz-offer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.phz-small-offer-card strong {
  display: block;
  font-family: var(--font-display);
  font-size: 60px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: #2ad3ea;
  font-weight: 400;
  margin: 12px 0 14px;
}

.phz-manifesto-section {
  background:
    radial-gradient(circle at 50% 0%, rgba(42,211,234,0.10), transparent 34%),
    linear-gradient(180deg, #080808, #101010);
}

.phz-manifesto-long {
  max-width: 980px;
  margin: 0 auto;
  padding: 56px;
  border: 1px solid rgba(42,211,234,0.18);
  background:
    radial-gradient(circle at top right, rgba(42,211,234,0.12), transparent 38%),
    rgba(255,255,255,0.035);
}

.phz-manifesto-long p {
  color: rgba(245,240,232,0.68);
  font-size: 18px;
  line-height: 1.95;
  font-weight: 300;
  margin: 0 0 24px;
}

.phz-manifesto-long .btn-gold {
  margin-top: 10px;
}

@media (max-width: 1100px) {
  .phz-info-hero-grid,
  .phz-two-col,
  .phz-offer-card {
    grid-template-columns: 1fr;
  }

  .phz-pillar-grid,
  .phz-method-timeline,
  .phz-offer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .phz-values-grid,
  .phz-audience-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .phz-offer-price {
    width: min(100%, 360px);
  }
}

@media (max-width: 820px) {
  .phz-info-page {
    padding-top: 64px;
  }

  .phz-info-wrap {
    width: min(100% - 28px, 1180px);
  }

  .phz-info-hero {
    min-height: auto;
    padding: 84px 0 62px;
  }

  .phz-info-title {
    font-size: clamp(54px, 16vw, 86px);
    line-height: 0.88;
    word-break: normal;
    overflow-wrap: normal;
  }

  .phz-info-lead {
    font-size: 16px;
    line-height: 1.75;
  }

  .phz-info-actions,
  .phz-info-actions .btn-gold,
  .phz-info-actions .btn-outline {
    width: 100%;
  }

  .phz-info-actions .btn-gold,
  .phz-info-actions .btn-outline {
    justify-content: center;
  }

  .phz-info-section {
    padding: 72px 0;
  }

  .phz-section-heading {
    margin-bottom: 32px;
  }

  .phz-section-heading h2,
  .phz-info-subtitle,
  .phz-offer-card h2,
  .phz-manifesto-long h2 {
    font-size: clamp(44px, 14vw, 68px);
    line-height: 0.9;
  }

  .phz-pillar-grid,
  .phz-method-timeline,
  .phz-values-grid,
  .phz-audience-grid,
  .phz-offer-grid,
  .phz-faq-grid {
    grid-template-columns: 1fr;
  }

  .phz-pillar-card,
  .phz-method-card,
  .phz-value-card,
  .phz-audience-card {
    min-height: auto;
    padding: 24px;
  }

  .phz-frequency-row {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 22px;
  }

  .phz-row-name {
    font-size: 36px;
  }

  .phz-offer-card {
    padding: 26px;
  }

  .phz-offer-price {
    width: 100%;
  }

  .phz-manifesto-long {
    padding: 28px;
  }

  .phz-manifesto-long p {
    font-size: 16px;
    line-height: 1.85;
  }
}

@media (max-width: 480px) {
  .phz-info-title {
    font-size: clamp(48px, 17vw, 72px);
  }

  .phz-quote-card,
  .phz-manifesto-card,
  .phz-proof-card,
  .phz-foundation-card,
  .phz-journey-item,
  .phz-small-offer-card,
  .phz-faq-card {
    padding: 22px;
  }

  .phz-pillar-card h3,
  .phz-value-card h3,
  .phz-proof-card h3,
  .phz-foundation-card h3,
  .phz-audience-card h3,
  .phz-journey-item h3,
  .phz-small-offer-card h3,
  .phz-faq-card h3 {
    font-size: 32px;
  }

  .phz-method-card h3 {
    font-size: 36px;
  }

  .phz-offer-price strong {
    font-size: 64px;
  }

  .phz-copy-large {
    font-size: 18px;
  }
}


/* ──────────────────────────────────────────────────────────────
   PRIMAL HZ V21 — Premium information-page alignment stabilizer
   Purpose: prevent content overlap, stop incomplete word wrapping, and
   keep Science/About hero statements as clean intentional lines.
────────────────────────────────────────────────────────────── */
#root .phz-info-rich,
#root .phz-info-rich * {
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  min-width: 0 !important;
}

#root .phz-info-rich {
  overflow-x: clip !important;
}

#root .phz-info-rich .hero {
  overflow: visible !important;
  min-height: auto !important;
  padding-top: 150px !important;
  padding-bottom: 108px !important;
}

#root .phz-info-rich .hero-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 44px !important;
  align-items: start !important;
}

#root .phz-info-rich .hero-grid > div:first-child {
  max-width: 1080px !important;
  width: 100% !important;
}

#root .phz-info-rich h1,
#root .phz-info-rich .hero-title {
  max-width: 1080px !important;
  font-size: clamp(56px, 6.8vw, 104px) !important;
  line-height: 0.9 !important;
  letter-spacing: 0.04em !important;
  text-wrap: balance !important;
}

#root .phz-info-rich .title-line {
  display: block !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

#root .phz-info-rich .lead {
  max-width: 880px !important;
}

#root .phz-info-rich .quote-stack {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 16px !important;
  width: 100% !important;
  margin-top: 10px !important;
  position: relative !important;
  z-index: 2 !important;
}

#root .phz-info-rich .quote-card,
#root .phz-info-rich .card,
#root .phz-info-rich .callout,
#root .phz-info-rich .profile-side,
#root .phz-info-rich .step,
#root .phz-info-rich .stat,
#root .phz-info-rich .final {
  overflow: visible !important;
}

#root .phz-info-rich .profile-side {
  position: relative !important;
  top: auto !important;
}

#root .phz-info-rich .section,
#root .phz-info-rich .section.alt {
  overflow: visible !important;
}

#root .phz-info-rich .grid-2,
#root .phz-info-rich .grid-3,
#root .phz-info-rich .grid-4,
#root .phz-info-rich .profile,
#root .phz-info-rich .steps {
  align-items: stretch !important;
}

#root .phz-info-rich .grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#root .phz-info-rich .stat strong,
#root .phz-info-rich .tags span,
#root .phz-info-rich .num,
#root .phz-info-rich .kicker,
#root .phz-info-rich th,
#root .phz-info-rich td:first-child {
  white-space: nowrap !important;
}

#root .phz-info-rich .stat strong {
  font-size: clamp(42px, 4.4vw, 72px) !important;
  line-height: 0.95 !important;
}

#root .phz-info-rich .table-wrap {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  max-width: 100% !important;
}

#root .phz-info-rich table {
  min-width: 1080px !important;
}

#root .phz-info-rich td,
#root .phz-info-rich th {
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

@media (min-width: 981px) {
  #root .phz-science-rich .hero .quote-stack {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #root .phz-about-rich .hero .quote-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 980px) {
  #root .phz-info-rich .hero {
    padding-top: 128px !important;
    padding-bottom: 84px !important;
  }

  #root .phz-info-rich .hero-grid {
    gap: 34px !important;
  }

  #root .phz-info-rich .quote-stack {
    grid-template-columns: 1fr !important;
  }

  #root .phz-info-rich .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 680px) {
  #root .phz-info-rich .hero {
    padding-top: 108px !important;
    padding-bottom: 64px !important;
  }

  #root .phz-info-rich h1,
  #root .phz-info-rich .hero-title {
    font-size: clamp(34px, 9.25vw, 58px) !important;
    line-height: 0.94 !important;
    letter-spacing: 0.03em !important;
  }

  #root .phz-about-rich h1,
  #root .phz-about-rich .hero-title {
    font-size: clamp(30px, 8.2vw, 52px) !important;
    line-height: 0.95 !important;
    letter-spacing: 0.026em !important;
  }

  #root .phz-info-rich .title-line {
    white-space: nowrap !important;
    display: block !important;
  }

  #root .phz-info-rich .section-head h2,
  #root .phz-info-rich .callout h3,
  #root .phz-info-rich .final h2 {
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    text-wrap: balance !important;
  }

  #root .phz-info-rich .grid-4,
  #root .phz-info-rich .grid-3,
  #root .phz-info-rich .grid-2 {
    grid-template-columns: 1fr !important;
  }

  #root .phz-info-rich .stat strong {
    font-size: clamp(40px, 13vw, 62px) !important;
    white-space: nowrap !important;
  }

  #root .phz-info-rich .card h3,
  #root .phz-info-rich .profile-side h3,
  #root .phz-info-rich .step h3 {
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }
}

@media (max-width: 390px) {
  #root .phz-science-rich h1,
  #root .phz-science-rich .hero-title {
    font-size: clamp(30px, 8.65vw, 42px) !important;
  }

  #root .phz-about-rich h1,
  #root .phz-about-rich .hero-title {
    font-size: clamp(25px, 7.5vw, 36px) !important;
  }
}


/* ──────────────────────────────────────────────────────────────
   PRIMAL HZ V22 — Final premium balance pass
   Goal: stabilize Science/About containers, prevent overlap,
   preserve complete words, and create a more editorial premium flow.
────────────────────────────────────────────────────────────── */
#root .phz-info-rich {
  --phz-container: 1120px;
  --phz-wide: 1220px;
  --phz-narrow: 900px;
  overflow-x: clip !important;
  isolation: isolate !important;
}

#root .phz-info-rich,
#root .phz-info-rich * {
  box-sizing: border-box !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

#root .phz-info-rich .wrap {
  width: min(var(--phz-container), calc(100% - 64px)) !important;
  max-width: var(--phz-container) !important;
  margin-inline: auto !important;
  position: relative !important;
  z-index: 2 !important;
}

#root .phz-info-rich .hero .wrap,
#root .phz-info-rich .final .wrap {
  width: min(var(--phz-wide), calc(100% - 72px)) !important;
  max-width: var(--phz-wide) !important;
}

#root .phz-info-rich .hero {
  overflow: hidden !important;
  min-height: auto !important;
  padding: 156px 0 118px !important;
  display: block !important;
}

#root .phz-info-rich .hero::before {
  z-index: 0 !important;
  pointer-events: none !important;
}

#root .phz-info-rich .hero-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 0.98fr) minmax(320px, 0.72fr) !important;
  gap: clamp(34px, 4.4vw, 74px) !important;
  align-items: center !important;
  position: relative !important;
  z-index: 2 !important;
}

#root .phz-info-rich .hero-grid > * {
  min-width: 0 !important;
  position: relative !important;
}

#root .phz-info-rich .hero-grid > div:first-child {
  max-width: 760px !important;
  width: 100% !important;
}

#root .phz-info-rich .hero-title,
#root .phz-info-rich h1 {
  max-width: 760px !important;
  font-size: clamp(60px, 6.35vw, 104px) !important;
  line-height: 0.89 !important;
  letter-spacing: 0.045em !important;
  text-wrap: balance !important;
  margin: 0 !important;
}

#root .phz-info-rich .title-line {
  display: block !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

#root .phz-info-rich .lead {
  max-width: 680px !important;
  font-size: clamp(16px, 1.25vw, 19px) !important;
  line-height: 1.78 !important;
  text-wrap: pretty !important;
}

#root .phz-info-rich .quote-stack {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 440px !important;
  justify-self: end !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 3 !important;
}

#root .phz-info-rich .quote-card {
  position: relative !important;
  min-height: auto !important;
  padding: clamp(20px, 2.4vw, 28px) !important;
  overflow: hidden !important;
}

#root .phz-info-rich .quote-card p {
  font-size: clamp(15px, 1.15vw, 18px) !important;
  line-height: 1.62 !important;
  text-wrap: pretty !important;
}

#root .phz-info-rich .quote-card span {
  display: block !important;
  margin-top: 14px !important;
}

#root .phz-info-rich .section {
  overflow: hidden !important;
  padding: clamp(84px, 8vw, 132px) 0 !important;
  position: relative !important;
}

#root .phz-info-rich .section.alt {
  overflow: hidden !important;
}

#root .phz-info-rich .section-head {
  max-width: var(--phz-narrow) !important;
  margin-bottom: clamp(38px, 4vw, 58px) !important;
}

#root .phz-info-rich .section-head.center {
  max-width: 960px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

#root .phz-info-rich .section-head h2,
#root .phz-info-rich .final h2,
#root .phz-info-rich .callout h3 {
  font-size: clamp(48px, 5.8vw, 92px) !important;
  line-height: 0.92 !important;
  letter-spacing: 0.045em !important;
  max-width: 980px !important;
  text-wrap: balance !important;
}

#root .phz-info-rich .section-head.center h2,
#root .phz-info-rich .section-head.center p {
  margin-left: auto !important;
  margin-right: auto !important;
}

#root .phz-info-rich .section-head p,
#root .phz-info-rich .copy,
#root .phz-info-rich .callout p,
#root .phz-info-rich .manifesto p,
#root .phz-info-rich .final p {
  max-width: 860px !important;
  font-size: clamp(15.5px, 1.15vw, 18px) !important;
  line-height: 1.78 !important;
  text-wrap: pretty !important;
}

#root .phz-info-rich .grid-2,
#root .phz-info-rich .grid-3,
#root .phz-info-rich .grid-4,
#root .phz-info-rich .steps {
  display: grid !important;
  gap: clamp(18px, 2vw, 26px) !important;
  align-items: stretch !important;
}

#root .phz-info-rich .grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#root .phz-info-rich .grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

#root .phz-info-rich .grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#root .phz-info-rich .steps {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

#root .phz-info-rich .profile {
  display: grid !important;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr) !important;
  gap: clamp(28px, 4vw, 58px) !important;
  align-items: start !important;
}

#root .phz-info-rich .profile-side {
  position: sticky !important;
  top: 104px !important;
  align-self: start !important;
  overflow: hidden !important;
}

#root .phz-info-rich .card,
#root .phz-info-rich .step,
#root .phz-info-rich .stat,
#root .phz-info-rich .callout,
#root .phz-info-rich .profile-side,
#root .phz-info-rich .final {
  padding: clamp(22px, 2.4vw, 34px) !important;
  overflow: hidden !important;
  min-width: 0 !important;
}

#root .phz-info-rich .card h3,
#root .phz-info-rich .step h3,
#root .phz-info-rich .profile-side h3 {
  font-size: clamp(30px, 3.1vw, 48px) !important;
  line-height: 0.98 !important;
  text-wrap: balance !important;
  max-width: 100% !important;
}

#root .phz-info-rich .card p,
#root .phz-info-rich .step p,
#root .phz-info-rich .profile-side p,
#root .phz-info-rich li,
#root .phz-info-rich td {
  font-size: clamp(14px, 1vw, 16px) !important;
  line-height: 1.68 !important;
  text-wrap: pretty !important;
}

#root .phz-info-rich .tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  max-width: 100% !important;
}

#root .phz-info-rich .tags span,
#root .phz-info-rich .num,
#root .phz-info-rich .kicker,
#root .phz-info-rich th,
#root .phz-info-rich td:first-child,
#root .phz-info-rich .stat strong {
  white-space: nowrap !important;
}

#root .phz-info-rich .stat {
  min-height: 170px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

#root .phz-info-rich .stat strong {
  display: block !important;
  font-size: clamp(42px, 4.1vw, 68px) !important;
  line-height: 0.92 !important;
  letter-spacing: 0.04em !important;
}

#root .phz-info-rich .stat span {
  display: block !important;
  max-width: 100% !important;
  line-height: 1.5 !important;
}

#root .phz-info-rich .table-wrap {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  border: 1px solid rgba(42,211,234,0.16) !important;
  background: rgba(255,255,255,0.018) !important;
}

#root .phz-info-rich table {
  min-width: 1060px !important;
  width: 100% !important;
  border-collapse: collapse !important;
}

#root .phz-info-rich th,
#root .phz-info-rich td {
  vertical-align: top !important;
}

#root .phz-info-rich .final {
  max-width: 1060px !important;
  margin-inline: auto !important;
  text-align: center !important;
}

#root .phz-info-rich .final .actions {
  justify-content: center !important;
}

#root .phz-info-rich .disclaimer {
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  font-size: 12px !important;
  line-height: 1.7 !important;
  color: rgba(245,240,232,0.42) !important;
}

@media (min-width: 1280px) {
  #root .phz-info-rich .hero-grid {
    grid-template-columns: minmax(0, 760px) minmax(340px, 440px) !important;
    justify-content: space-between !important;
  }
}

@media (max-width: 1120px) {
  #root .phz-info-rich .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 42px !important;
  }

  #root .phz-info-rich .hero-grid > div:first-child,
  #root .phz-info-rich .hero-title,
  #root .phz-info-rich h1,
  #root .phz-info-rich .lead {
    max-width: 880px !important;
  }

  #root .phz-info-rich .quote-stack {
    max-width: 100% !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    justify-self: stretch !important;
  }

  #root .phz-about-rich .quote-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #root .phz-info-rich .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #root .phz-info-rich .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  #root .phz-info-rich .wrap,
  #root .phz-info-rich .hero .wrap,
  #root .phz-info-rich .final .wrap {
    width: min(100% - 40px, 760px) !important;
    max-width: 760px !important;
  }

  #root .phz-info-rich .hero {
    padding-top: 126px !important;
    padding-bottom: 82px !important;
  }

  #root .phz-info-rich .quote-stack,
  #root .phz-about-rich .quote-stack,
  #root .phz-info-rich .grid-2,
  #root .phz-info-rich .grid-3,
  #root .phz-info-rich .profile {
    grid-template-columns: 1fr !important;
  }

  #root .phz-info-rich .profile-side {
    position: relative !important;
    top: auto !important;
  }

  #root .phz-info-rich .section-head h2,
  #root .phz-info-rich .final h2,
  #root .phz-info-rich .callout h3 {
    font-size: clamp(42px, 8.2vw, 72px) !important;
  }
}

@media (max-width: 680px) {
  #root .phz-info-rich .wrap,
  #root .phz-info-rich .hero .wrap,
  #root .phz-info-rich .final .wrap {
    width: min(100% - 28px, 560px) !important;
    max-width: 560px !important;
  }

  #root .phz-info-rich .hero {
    padding-top: 110px !important;
    padding-bottom: 66px !important;
  }

  #root .phz-info-rich .hero-title,
  #root .phz-info-rich h1 {
    font-size: clamp(33px, 9.2vw, 56px) !important;
    line-height: 0.96 !important;
    letter-spacing: 0.03em !important;
    max-width: 100% !important;
  }

  #root .phz-about-rich .hero-title,
  #root .phz-about-rich h1 {
    font-size: clamp(27px, 7.6vw, 46px) !important;
  }

  #root .phz-info-rich .title-line {
    white-space: nowrap !important;
    max-width: 100% !important;
  }

  #root .phz-info-rich .lead {
    font-size: 15.5px !important;
    line-height: 1.72 !important;
    margin-top: 22px !important;
  }

  #root .phz-info-rich .actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  #root .phz-info-rich .btn,
  #root .phz-info-rich button.btn,
  #root .phz-info-rich a.btn {
    width: 100% !important;
    justify-content: center !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    text-align: center !important;
  }

  #root .phz-info-rich .section {
    padding: 72px 0 !important;
  }

  #root .phz-info-rich .section-head {
    margin-bottom: 32px !important;
  }

  #root .phz-info-rich .section-head h2,
  #root .phz-info-rich .final h2,
  #root .phz-info-rich .callout h3 {
    font-size: clamp(36px, 11.5vw, 56px) !important;
    line-height: 0.96 !important;
  }

  #root .phz-info-rich .card,
  #root .phz-info-rich .step,
  #root .phz-info-rich .stat,
  #root .phz-info-rich .callout,
  #root .phz-info-rich .profile-side,
  #root .phz-info-rich .quote-card,
  #root .phz-info-rich .final {
    padding: 22px !important;
  }

  #root .phz-info-rich .card h3,
  #root .phz-info-rich .step h3,
  #root .phz-info-rich .profile-side h3 {
    font-size: clamp(28px, 9vw, 40px) !important;
    line-height: 1 !important;
  }

  #root .phz-info-rich .grid-4,
  #root .phz-info-rich .steps {
    grid-template-columns: 1fr !important;
  }

  #root .phz-info-rich .stat {
    min-height: auto !important;
  }

  #root .phz-info-rich .stat strong {
    font-size: clamp(38px, 13vw, 58px) !important;
  }

  #root .phz-info-rich .tags span {
    white-space: normal !important;
  }

  #root .phz-info-rich table {
    min-width: 980px !important;
  }
}

@media (max-width: 390px) {
  #root .phz-info-rich .wrap,
  #root .phz-info-rich .hero .wrap,
  #root .phz-info-rich .final .wrap {
    width: calc(100% - 24px) !important;
  }

  #root .phz-science-rich .hero-title,
  #root .phz-science-rich h1 {
    font-size: clamp(29px, 8.5vw, 38px) !important;
    letter-spacing: 0.025em !important;
  }

  #root .phz-about-rich .hero-title,
  #root .phz-about-rich h1 {
    font-size: clamp(24px, 7vw, 34px) !important;
    letter-spacing: 0.022em !important;
  }

  #root .phz-info-rich .section-head h2,
  #root .phz-info-rich .final h2,
  #root .phz-info-rich .callout h3 {
    font-size: clamp(32px, 10vw, 46px) !important;
  }
}


/* --------------------------------------------------------------------------
   V23 PREMIUM INFORMATION PAGE LAYOUT FIX
   Fixes: hero overlap, narrow quote columns, clipped display words, grid balance,
   and mobile/tablet readability across Science and About pages.
-------------------------------------------------------------------------- */
#root .phz-info-rich,
#root .phz-info-rich * {
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

#root .phz-info-rich .wrap,
#root .phz-info-rich .hero .wrap,
#root .phz-info-rich .final .wrap {
  width: min(100% - 64px, 1180px) !important;
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#root .phz-info-rich .hero {
  min-height: auto !important;
  padding-top: clamp(132px, 11vw, 182px) !important;
  padding-bottom: clamp(76px, 8vw, 116px) !important;
}

#root .phz-info-rich .hero-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: clamp(34px, 4.6vw, 58px) !important;
  align-items: start !important;
  max-width: 1180px !important;
}

#root .phz-info-rich .hero-grid > div:first-child {
  max-width: 1080px !important;
  min-width: 0 !important;
  position: relative !important;
  z-index: 2 !important;
}

#root .phz-info-rich h1.hero-title,
#root .phz-info-rich .hero-title,
#root .phz-info-rich h1 {
  max-width: 1120px !important;
  font-size: clamp(58px, 7.35vw, 118px) !important;
  line-height: 0.88 !important;
  letter-spacing: 0.04em !important;
  position: relative !important;
  z-index: 3 !important;
}

#root .phz-about-rich h1.hero-title,
#root .phz-about-rich .hero-title,
#root .phz-about-rich h1 {
  max-width: 1120px !important;
  font-size: clamp(54px, 6.85vw, 108px) !important;
  line-height: 0.9 !important;
  letter-spacing: 0.038em !important;
}

#root .phz-info-rich .title-line {
  display: block !important;
  width: fit-content !important;
  max-width: 100% !important;
  white-space: nowrap !important;
}

#root .phz-info-rich .lead {
  max-width: 820px !important;
  font-size: clamp(16px, 1.35vw, 19px) !important;
  line-height: 1.78 !important;
}

#root .phz-info-rich .quote-stack,
#root .phz-about-rich .quote-stack {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)) !important;
  gap: clamp(16px, 2vw, 24px) !important;
  width: 100% !important;
  max-width: 1180px !important;
  justify-self: stretch !important;
  align-items: stretch !important;
}

#root .phz-about-rich .quote-stack {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)) !important;
  max-width: 920px !important;
}

#root .phz-info-rich .quote-card {
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: clamp(22px, 2.2vw, 30px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
}

#root .phz-info-rich .quote-card p {
  font-size: clamp(16px, 1.35vw, 20px) !important;
  line-height: 1.55 !important;
  max-width: 100% !important;
  text-wrap: pretty !important;
}

#root .phz-info-rich .quote-card span {
  margin-top: auto !important;
  padding-top: 12px !important;
}

#root .phz-info-rich .callout {
  overflow: hidden !important;
}

#root .phz-info-rich .callout h3,
#root .phz-info-rich .section-head h2,
#root .phz-info-rich .final h2 {
  max-width: 1060px !important;
  font-size: clamp(46px, 5.75vw, 92px) !important;
  line-height: 0.94 !important;
  letter-spacing: 0.04em !important;
}

#root .phz-info-rich .grid-2,
#root .phz-info-rich .grid-3,
#root .phz-info-rich .grid-4,
#root .phz-info-rich .steps {
  width: 100% !important;
  min-width: 0 !important;
}

#root .phz-info-rich .grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)) !important;
}

#root .phz-info-rich .grid-4 .card {
  min-height: 178px !important;
}

#root .phz-info-rich .grid-4 .card h3 {
  font-size: clamp(30px, 2.55vw, 40px) !important;
  line-height: 0.98 !important;
  letter-spacing: 0.032em !important;
  white-space: nowrap !important;
  max-width: 100% !important;
}

#root .phz-info-rich .card,
#root .phz-info-rich .stat,
#root .phz-info-rich .step,
#root .phz-info-rich .profile-side,
#root .phz-info-rich .final {
  min-width: 0 !important;
}

#root .phz-info-rich .card h3,
#root .phz-info-rich .step h3,
#root .phz-info-rich .profile-side h3 {
  overflow: visible !important;
}

#root .phz-info-rich .profile {
  grid-template-columns: minmax(300px, 390px) minmax(0, 1fr) !important;
  gap: clamp(28px, 4.2vw, 60px) !important;
}

#root .phz-info-rich .profile-side {
  position: sticky !important;
  top: 104px !important;
  max-width: 390px !important;
}

#root .phz-info-rich .profile-side h3 {
  font-size: clamp(38px, 4vw, 62px) !important;
  line-height: 0.96 !important;
}

#root .phz-info-rich .table-wrap {
  max-width: 100% !important;
  overflow-x: auto !important;
}

@media (max-width: 1180px) {
  #root .phz-info-rich .wrap,
  #root .phz-info-rich .hero .wrap,
  #root .phz-info-rich .final .wrap {
    width: min(100% - 48px, 980px) !important;
    max-width: 980px !important;
  }

  #root .phz-info-rich h1.hero-title,
  #root .phz-info-rich .hero-title,
  #root .phz-info-rich h1 {
    font-size: clamp(52px, 8.2vw, 94px) !important;
  }

  #root .phz-info-rich .profile {
    grid-template-columns: 1fr !important;
  }

  #root .phz-info-rich .profile-side {
    position: relative !important;
    top: auto !important;
    max-width: 100% !important;
  }
}

@media (max-width: 900px) {
  #root .phz-info-rich .wrap,
  #root .phz-info-rich .hero .wrap,
  #root .phz-info-rich .final .wrap {
    width: min(100% - 36px, 720px) !important;
    max-width: 720px !important;
  }

  #root .phz-info-rich .hero {
    padding-top: 118px !important;
    padding-bottom: 74px !important;
  }

  #root .phz-info-rich .quote-stack,
  #root .phz-about-rich .quote-stack {
    grid-template-columns: 1fr !important;
    max-width: 720px !important;
  }

  #root .phz-info-rich .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #root .phz-info-rich .grid-4 .card h3 {
    font-size: clamp(30px, 5.8vw, 42px) !important;
  }
}

@media (max-width: 680px) {
  #root .phz-info-rich .wrap,
  #root .phz-info-rich .hero .wrap,
  #root .phz-info-rich .final .wrap {
    width: calc(100% - 28px) !important;
    max-width: 560px !important;
  }

  #root .phz-info-rich .hero {
    padding-top: 104px !important;
    padding-bottom: 62px !important;
  }

  #root .phz-info-rich h1.hero-title,
  #root .phz-info-rich .hero-title,
  #root .phz-info-rich h1 {
    font-size: clamp(33px, 10.1vw, 54px) !important;
    line-height: 0.96 !important;
    letter-spacing: 0.028em !important;
  }

  #root .phz-about-rich h1.hero-title,
  #root .phz-about-rich .hero-title,
  #root .phz-about-rich h1 {
    font-size: clamp(31px, 9.1vw, 50px) !important;
  }

  #root .phz-info-rich .section-head h2,
  #root .phz-info-rich .callout h3,
  #root .phz-info-rich .final h2 {
    font-size: clamp(35px, 11.8vw, 56px) !important;
    line-height: 0.98 !important;
  }

  #root .phz-info-rich .grid-4,
  #root .phz-info-rich .grid-3,
  #root .phz-info-rich .grid-2,
  #root .phz-info-rich .steps {
    grid-template-columns: 1fr !important;
  }

  #root .phz-info-rich .grid-4 .card h3 {
    white-space: normal !important;
    font-size: clamp(32px, 10vw, 44px) !important;
  }

  #root .phz-info-rich .quote-card p {
    font-size: 16px !important;
    line-height: 1.62 !important;
  }
}

@media (max-width: 420px) {
  #root .phz-info-rich .title-line {
    white-space: normal !important;
  }

  #root .phz-info-rich h1.hero-title,
  #root .phz-info-rich .hero-title,
  #root .phz-info-rich h1 {
    font-size: clamp(30px, 9.2vw, 42px) !important;
  }

  #root .phz-info-rich .section-head h2,
  #root .phz-info-rich .callout h3,
  #root .phz-info-rich .final h2 {
    font-size: clamp(32px, 10.4vw, 46px) !important;
  }
}


/* ================================
   V24 — Science/About layout repair
   Fixes: step cards showing as empty columns, clipped stat words,
   oversized text inside containers, and container balance.
   ================================ */
#root .phz-info-rich .grid-2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  align-items: stretch !important;
}

#root .phz-info-rich .steps {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  align-items: stretch !important;
  width: 100% !important;
}

#root .phz-info-rich .step {
  display: grid !important;
  grid-template-columns: 62px minmax(0, 1fr) !important;
  min-height: auto !important;
  height: auto !important;
  padding: 18px 20px !important;
  gap: 16px !important;
  align-items: start !important;
  overflow: visible !important;
}

#root .phz-info-rich .step::before {
  font-size: clamp(42px, 3.2vw, 56px) !important;
  line-height: 0.9 !important;
  align-self: start !important;
}

#root .phz-info-rich .step > div {
  display: block !important;
  min-width: 0 !important;
  width: 100% !important;
  overflow: visible !important;
}

#root .phz-info-rich .step h3 {
  display: block !important;
  font-size: clamp(28px, 2.3vw, 34px) !important;
  line-height: 0.98 !important;
  margin: 0 0 8px !important;
  white-space: normal !important;
  overflow: visible !important;
  text-wrap: balance !important;
}

#root .phz-info-rich .step p {
  display: block !important;
  font-size: 14px !important;
  line-height: 1.62 !important;
  margin: 0 !important;
  color: rgba(245,240,232,.62) !important;
  white-space: normal !important;
  overflow: visible !important;
  text-wrap: pretty !important;
}

#root .phz-info-rich .callout .grid-4,
#root .phz-info-rich .grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(14px, 1.55vw, 22px) !important;
}

#root .phz-info-rich .stat {
  min-width: 0 !important;
  overflow: hidden !important;
  padding: clamp(20px, 2vw, 28px) clamp(14px, 1.5vw, 22px) !important;
}

#root .phz-info-rich .stat strong {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  font-size: clamp(32px, 3vw, 54px) !important;
  line-height: 0.96 !important;
  letter-spacing: 0.035em !important;
}

#root .phz-info-rich .callout .stat strong {
  font-size: clamp(30px, 2.55vw, 46px) !important;
  letter-spacing: 0.03em !important;
}

#root .phz-info-rich .stat span {
  max-width: 100% !important;
  font-size: 13px !important;
  line-height: 1.48 !important;
}

#root .phz-info-rich .card,
#root .phz-info-rich .callout,
#root .phz-info-rich .final,
#root .phz-info-rich .profile-side {
  min-width: 0 !important;
  max-width: 100% !important;
}

#root .phz-info-rich .card h3 {
  white-space: normal !important;
  overflow: visible !important;
  text-wrap: balance !important;
}

#root .phz-info-rich .callout h3 {
  max-width: 980px !important;
  white-space: normal !important;
  overflow: visible !important;
  text-wrap: balance !important;
}

@media (max-width: 1180px) {
  #root .phz-info-rich .grid-2 {
    grid-template-columns: 1fr !important;
  }

  #root .phz-info-rich .callout .grid-4,
  #root .phz-info-rich .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #root .phz-info-rich .callout .stat strong,
  #root .phz-info-rich .stat strong {
    font-size: clamp(34px, 5vw, 58px) !important;
  }
}

@media (max-width: 680px) {
  #root .phz-info-rich .step {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    padding: 16px !important;
    gap: 14px !important;
  }

  #root .phz-info-rich .step::before {
    font-size: 42px !important;
  }

  #root .phz-info-rich .callout .grid-4,
  #root .phz-info-rich .grid-4 {
    grid-template-columns: 1fr !important;
  }

  #root .phz-info-rich .stat strong,
  #root .phz-info-rich .callout .stat strong {
    font-size: clamp(42px, 12vw, 58px) !important;
  }
}


/* ─── Anime.js site-wide cinematic motion layer ───────────────────────────── */
.phz-anime-ready .phz-anime-pending:not(.phz-anime-done) {
  opacity: 0 !important;
  transform: translate3d(0, 32px, 0) scale(0.985);
  filter: blur(8px);
}

.phz-anime-ready .phz-anime-done,
.phz-anime-ready .reveal.visible {
  opacity: 1 !important;
  filter: blur(0) !important;
}

.phz-anime-ready .primal-nav,
.phz-anime-ready .phz-hero .section-label,
.phz-anime-ready .phz-hero h1,
.phz-anime-ready .phz-hero p,
.phz-anime-ready .phz-hero .btn-gold,
.phz-anime-ready .phz-hero .btn-outline,
.phz-anime-ready .phz-hero .phz-animate-visual,
.phz-anime-ready .phz-info-rich .hero .kicker,
.phz-anime-ready .phz-info-rich .hero h1,
.phz-anime-ready .phz-info-rich .hero .lead,
.phz-anime-ready .phz-info-rich .hero .quote-card,
.phz-anime-ready .phz-info-hero .section-label,
.phz-anime-ready .phz-info-title,
.phz-anime-ready .phz-info-lead,
.phz-anime-ready .phz-product-layout,
.phz-anime-ready .phz-product-card,
.phz-anime-ready .phz-product-detail,
.phz-anime-ready .phz-product-list > button,
.phz-anime-ready .phz-pillar-card,
.phz-anime-ready .phz-faq-card,
.phz-anime-ready .phz-quote-card,
.phz-anime-ready .phz-info-rich .section-head,
.phz-anime-ready .phz-info-rich .card,
.phz-anime-ready .phz-info-rich .stat,
.phz-anime-ready .phz-info-rich .step,
.phz-anime-ready .phz-info-rich .callout,
.phz-anime-ready .phz-info-rich .table-wrap,
.phz-anime-ready .phz-info-rich .final,
.phz-anime-ready .phz-site-footer > div > div {
  will-change: transform, opacity, filter;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.phz-anime-ready .phz-info-rich .card,
.phz-anime-ready .phz-product-card,
.phz-anime-ready .phz-pillar-card,
.phz-anime-ready .phz-faq-card,
.phz-anime-ready .phz-quote-card {
  transform-origin: center center;
}

.phz-anime-ready .btn-gold,
.phz-anime-ready .btn-outline,
.phz-anime-ready .phz-info-rich .btn {
  will-change: transform, box-shadow, background-color, color;
}

.phz-anime-ready .btn-gold:hover,
.phz-anime-ready .btn-outline:hover,
.phz-anime-ready .phz-info-rich .btn:hover {
  transform: translateY(-2px) scale(1.01);
}

@media (prefers-reduced-motion: reduce) {
  .phz-anime-pending,
  .phz-animate-hero-eyebrow,
  .phz-animate-hero-title,
  .phz-animate-hero-copy,
  .phz-animate-cta,
  .phz-animate-visual,
  .phz-animate-line,
  .phz-animate-page-title,
  .phz-animate-page-copy,
  .reveal,
  .phz-info-rich .card,
  .phz-info-rich .stat,
  .phz-info-rich .step,
  .phz-product-card,
  .phz-pillar-card,
  .phz-faq-card,
  .phz-quote-card {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
}

/* ─── V27 Blog Article Visibility + Native Blog System Fix ──────────────────
   Articles must remain visible even if Anime.js, IntersectionObserver, cache,
   or third-party optimization delays animation execution. Animation should
   enhance the page, never hide the content. */
#root .reveal,
.wp-content .reveal,
.phz-native-blog .reveal,
.phz-native-single .reveal {
  opacity: 1;
  transform: none;
  filter: none;
}

#root.phz-anime-ready .phz-anime-pending:not(.phz-anime-done) {
  opacity: 0 !important;
  transform: translate3d(0, 32px, 0) scale(0.985);
  filter: blur(8px);
}

#root.phz-anime-ready .phz-anime-done,
#root.phz-anime-ready .reveal.visible,
#root:not(.phz-anime-ready) .reveal {
  opacity: 1 !important;
  transform: none;
  filter: none !important;
}

.phz-native-blog,
.phz-native-single {
  --cyan: #2ad3ea;
  --cream: #f5f0e8;
  --muted: rgba(245, 240, 232, 0.62);
  --line: rgba(42, 211, 234, 0.14);
  background:
    radial-gradient(circle at 75% 10%, rgba(42,211,234,0.12), transparent 34%),
    #080808;
  color: var(--cream);
  min-height: 100vh;
  font-family: 'Outfit', sans-serif;
  padding-top: 72px;
  overflow-x: hidden;
}

.phz-native-blog *,
.phz-native-single * {
  box-sizing: border-box;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

.phz-native-wrap {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
}

.phz-native-hero {
  position: relative;
  padding: 96px 0 68px;
  border-bottom: 1px solid var(--line);
}

.phz-native-hero::before,
.phz-native-blog::before,
.phz-native-single::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(42, 211, 234, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(42, 211, 234, 0.028) 1px, transparent 1px);
  background-size: 58px 58px;
  opacity: 0.42;
  mask-image: radial-gradient(circle at center, black, transparent 78%);
  z-index: 0;
}

.phz-native-hero > *,
.phz-native-blog-list,
.phz-native-single-body {
  position: relative;
  z-index: 1;
}

.phz-native-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--cyan);
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.phz-native-kicker::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--cyan);
}

.phz-native-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(62px, 9vw, 118px);
  line-height: 0.86;
  letter-spacing: 0.045em;
  color: var(--cream);
  margin: 0;
  max-width: 980px;
  text-wrap: balance;
}

.phz-native-title span {
  color: var(--cyan);
}

.phz-native-lead {
  max-width: 760px;
  margin: 26px 0 0;
  color: rgba(245,240,232,0.66);
  font-size: 18px;
  line-height: 1.85;
  text-wrap: pretty;
}

.phz-native-blog-list {
  padding: 76px 0 96px;
}

.phz-native-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.phz-native-card {
  display: flex;
  flex-direction: column;
  min-height: 430px;
  text-decoration: none;
  color: inherit;
  padding: 0;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 85% 0%, rgba(42,211,234,0.10), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018));
  box-shadow: 0 28px 90px rgba(0,0,0,0.32);
  transition: transform 0.28s ease, border-color 0.28s ease, background 0.28s ease;
  overflow: hidden;
}

/* v29: per-post SVG hero */
.phz-native-card__hero {
  width: 100%;
  aspect-ratio: 2 / 1;
  background: #0b0b0b;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.phz-native-card__hero svg { width: 100%; height: 100%; display: block; }
.phz-native-card > .phz-native-meta,
.phz-native-card > h2,
.phz-native-card > p,
.phz-native-card > .phz-native-read { padding-left: 28px; padding-right: 28px; }
.phz-native-card > .phz-native-meta { padding-top: 28px; }
.phz-native-card > .phz-native-read { padding-bottom: 28px; }

.phz-native-card:hover {
  transform: translateY(-7px);
  border-color: rgba(42,211,234,0.36);
  background:
    radial-gradient(circle at 85% 0%, rgba(42,211,234,0.16), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.024));
}

.phz-native-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 34px;
}

.phz-native-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(42,211,234,0.24);
  background: rgba(42,211,234,0.065);
  color: var(--cyan);
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.phz-native-date {
  color: rgba(245,240,232,0.36);
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.phz-native-card h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(36px, 4vw, 52px);
  line-height: 0.94;
  letter-spacing: 0.045em;
  color: var(--cream);
  margin: 0 0 18px;
  text-wrap: balance;
}

.phz-native-card p {
  color: rgba(245,240,232,0.58);
  font-size: 15px;
  line-height: 1.78;
  margin: 0;
  text-wrap: pretty;
}

.phz-native-read {
  margin-top: auto;
  padding-top: 28px;
  color: var(--cyan);
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.phz-native-single .phz-native-hero {
  padding-bottom: 56px;
}

.phz-native-single-body {
  max-width: 860px;
  margin: 0 auto;
  padding: 72px 24px 96px;
}

.phz-native-single-body p,
.phz-native-single-body li {
  color: rgba(245,240,232,0.68);
  font-size: 18px;
  line-height: 1.95;
  font-weight: 300;
  margin: 0 0 28px;
  text-wrap: pretty;
}

.phz-native-single-body h2,
.phz-native-single-body h3 {
  font-family: 'Bebas Neue', sans-serif;
  color: var(--cream);
  letter-spacing: 0.045em;
  line-height: 0.92;
  margin: 56px 0 22px;
}

.phz-native-single-body h2 { font-size: clamp(44px, 6vw, 72px); }
.phz-native-single-body h3 { font-size: clamp(36px, 5vw, 56px); color: var(--cyan); }

.phz-native-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 13px 22px;
  border: 1px solid var(--cyan);
  color: var(--cyan);
  background: transparent;
  text-decoration: none;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-bottom: 34px;
}

.phz-native-cta {
  margin-top: 60px;
  padding: 34px;
  border: 1px solid rgba(42,211,234,0.32);
  background:
    radial-gradient(circle at 90% 0%, rgba(42,211,234,0.16), transparent 40%),
    linear-gradient(180deg, rgba(42,211,234,0.08), rgba(255,255,255,0.02));
}

.phz-native-cta h3 {
  margin-top: 0;
}

.phz-native-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 14px 26px;
  border: 1px solid var(--cyan);
  background: var(--cyan);
  color: #061012;
  text-decoration: none;
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

@media (max-width: 980px) {
  .phz-native-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 680px) {
  .phz-native-wrap {
    width: min(100% - 28px, 1180px);
  }

  .phz-native-hero {
    padding: 78px 0 48px;
  }

  .phz-native-title {
    font-size: clamp(58px, 18vw, 84px);
  }

  .phz-native-lead {
    font-size: 15.5px;
    line-height: 1.78;
  }

  .phz-native-blog-list {
    padding: 48px 0 72px;
  }

  .phz-native-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .phz-native-card {
    min-height: auto;
    padding: 22px;
  }

  .phz-native-card h2 {
    font-size: clamp(38px, 13vw, 54px);
  }

  .phz-native-single-body {
    padding: 52px 14px 76px;
  }

  .phz-native-single-body p,
  .phz-native-single-body li {
    font-size: 16px;
    line-height: 1.85;
  }

  .phz-native-back,
  .phz-native-button {
    width: 100%;
  }
}

/* ============================================================
   v29 — Rebuilt components
   ============================================================ */

/* --- Testimonials v29 ----------------------------------------- */
.phz-testimonials-v29 {
    padding: var(--space-24) var(--gutter);
    background: var(--surface-1);
    border-top: 1px solid var(--border-1);
    border-bottom: 1px solid var(--border-1);
}
.phz-testimonials-v29__wrap {
    max-width: var(--container);
    margin: 0 auto;
}
.phz-testimonials-v29__label {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--signal);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    margin-bottom: var(--space-3);
    display: flex; align-items: center; gap: var(--space-3);
}
.phz-testimonials-v29__label::before {
    content: ''; width: 32px; height: 1px; background: var(--signal);
}
.phz-testimonials-v29__title {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-display);
    color: var(--text-1);
    margin-bottom: var(--space-12);
    max-width: 720px;
}
.phz-testimonials-v29__title span { color: var(--signal); }
.phz-testimonials-v29__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}
.phz-testimonial-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
    border: 1px solid var(--border-2);
    padding: var(--space-8);
    display: flex; flex-direction: column;
    transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.phz-testimonial-card:hover {
    border-color: var(--border-3);
    transform: translateY(-3px);
}
.phz-testimonial-card__stars {
    display: flex; gap: 3px; margin-bottom: var(--space-5);
    color: var(--signal);
}
.phz-testimonial-card__quote {
    font-size: var(--fs-lead);
    line-height: var(--lh-body);
    color: var(--text-2);
    margin-bottom: var(--space-6);
    flex: 1;
    font-style: italic;
    text-wrap: balance;
}
.phz-testimonial-card__quote::before { content: '\201C'; color: var(--signal); margin-right: 4px; }
.phz-testimonial-card__quote::after  { content: '\201D'; color: var(--signal); margin-left: 4px; }
.phz-testimonial-card__person {
    display: flex; align-items: center; gap: var(--space-3);
    padding-top: var(--space-5);
    border-top: 1px solid var(--border-1);
}
.phz-testimonial-card__avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--signal), var(--signal-bright));
    display: flex; align-items: center; justify-content: center;
    color: var(--signal-on);
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}
.phz-testimonial-card__meta { display: flex; flex-direction: column; gap: 2px; }
.phz-testimonial-card__name {
    font-weight: 600;
    color: var(--text-1);
    font-size: var(--fs-small);
}
.phz-testimonial-card__role {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--signal);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
@media (max-width: 980px) {
    .phz-testimonials-v29__grid { grid-template-columns: 1fr; gap: var(--space-4); }
    .phz-testimonials-v29 { padding: var(--space-16) var(--gutter); }
}

/* --- Contact page v29 ---------------------------------------- */
.phz-contact-v29 {
    padding: var(--space-32) var(--gutter) var(--space-24);
    min-height: calc(100vh - var(--nav-height));
}
.phz-contact-v29__wrap {
    max-width: var(--container);
    margin: 0 auto;
}
.phz-contact-v29__hero {
    margin-bottom: var(--space-16);
    max-width: 780px;
}
.phz-contact-v29__kicker {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--signal);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    margin-bottom: var(--space-4);
    display: flex; align-items: center; gap: var(--space-3);
}
.phz-contact-v29__kicker::before {
    content: ''; width: 32px; height: 1px; background: var(--signal);
}
.phz-contact-v29__title {
    font-family: var(--font-display);
    font-size: var(--fs-h1);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-display);
    color: var(--text-1);
    margin-bottom: var(--space-5);
}
.phz-contact-v29__lead {
    font-size: var(--fs-lead);
    line-height: var(--lh-body);
    color: var(--text-3);
    max-width: 620px;
}
.phz-contact-v29__cols {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: var(--space-16);
    align-items: start;
}
@media (max-width: 980px) {
    .phz-contact-v29__cols { grid-template-columns: 1fr; gap: var(--space-12); }
    .phz-contact-v29 { padding: var(--space-20) var(--gutter) var(--space-16); }
}

/* Left column: contact info */
.phz-contact-info { display: flex; flex-direction: column; gap: var(--space-10); }
.phz-contact-info__block {
    display: flex; flex-direction: column; gap: var(--space-3);
}
.phz-contact-info__label {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--signal);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
}
.phz-contact-info__value {
    font-size: var(--fs-body);
    color: var(--text-2);
    line-height: var(--lh-snug);
}
.phz-contact-info__value a { color: var(--text-1); }
.phz-contact-info__value a:hover { color: var(--signal); }
.phz-contact-info__channels { display: flex; flex-direction: column; gap: var(--space-3); }
.phz-contact-info__channel {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: var(--surface-2);
    border: 1px solid var(--border-1);
    color: var(--text-1);
    font-size: var(--fs-small);
    transition: border-color var(--dur-base), background var(--dur-base);
}
.phz-contact-info__channel:hover {
    border-color: var(--border-3);
    background: rgba(42, 211, 234, 0.04);
    color: var(--text-1);
}
.phz-contact-info__channel-icon {
    width: 36px; height: 36px;
    border-radius: var(--radius-md);
    background: var(--signal-dim);
    display: flex; align-items: center; justify-content: center;
    color: var(--signal);
    flex-shrink: 0;
}
.phz-contact-info__channel-name {
    font-weight: 600;
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    color: var(--signal);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    display: block;
}
.phz-contact-info__channel-value {
    color: var(--text-2);
    font-size: var(--fs-small);
    margin-top: 2px;
}
.phz-contact-founder {
    padding: var(--space-6);
    background: var(--surface-2);
    border: 1px solid var(--border-1);
    border-left: 2px solid var(--signal);
    display: flex; flex-direction: column; gap: var(--space-3);
}
.phz-contact-founder__name {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--signal);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
}
.phz-contact-founder__quote {
    font-size: var(--fs-small);
    color: var(--text-2);
    line-height: var(--lh-body);
    font-style: italic;
}

/* Right column: form */
.phz-contact-form-v29 {
    background: var(--surface-2);
    border: 1px solid var(--border-2);
    padding: var(--space-10);
    display: flex; flex-direction: column; gap: var(--space-5);
}
.phz-contact-form-v29__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}
@media (max-width: 600px) {
    .phz-contact-form-v29 { padding: var(--space-6); }
    .phz-contact-form-v29__row { grid-template-columns: 1fr; }
}
.phz-form-field { display: flex; flex-direction: column; gap: var(--space-2); }
.phz-form-field__label {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--signal);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.phz-form-field__input,
.phz-form-field__select,
.phz-form-field__textarea {
    width: 100%;
    background: var(--surface-1);
    border: 1px solid var(--border-2);
    color: var(--text-1);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    padding: var(--space-4) var(--space-5);
    transition: border-color var(--dur-base), box-shadow var(--dur-base);
}
.phz-form-field__input::placeholder,
.phz-form-field__textarea::placeholder {
    color: var(--text-5);
}
.phz-form-field__input:focus,
.phz-form-field__select:focus,
.phz-form-field__textarea:focus {
    outline: none;
    border-color: var(--signal);
    box-shadow: 0 0 0 3px var(--signal-dim);
}
.phz-form-field__textarea { min-height: 140px; resize: vertical; }
.phz-form-field__select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%232ad3ea' stroke-width='1.5' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-5) center;
    padding-right: var(--space-10);
    cursor: pointer;
}
.phz-form-submit {
    background: var(--signal);
    color: var(--signal-on);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--fs-meta);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: var(--space-4) var(--space-8);
    border: none;
    cursor: pointer;
    align-self: flex-start;
    transition: background var(--dur-base), transform var(--dur-fast);
    box-shadow: var(--signal-glow);
}
.phz-form-submit:hover { background: var(--signal-bright); transform: translateY(-1px); }
.phz-form-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.phz-form-status {
    font-size: var(--fs-small);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-2);
    background: var(--surface-1);
}
.phz-form-status--success { border-color: var(--success); color: var(--success); }
.phz-form-status--error   { border-color: var(--error);   color: var(--error); }
.phz-form-meta {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--text-4);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-top: var(--space-2);
}

/* --- Product page v29 fixes ----------------------------------- */
.phz-product-badge {
    position: absolute;
    top: -10px;
    right: var(--space-4);
    background: var(--signal);
    color: var(--signal-on);
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: var(--space-2) var(--space-3);
    z-index: 2;
    box-shadow: var(--signal-glow);
}

/* --- Hero pattern variations (per page) ----------------------- */
.phz-hero-title--split-cyan span { color: var(--signal); }
.phz-hero-title--monoscope {
    font-family: var(--font-display);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-display);
}
.phz-hero-title--monoscope span { color: var(--signal); display: inline-block; }
/* Animated underline variant for visual variety vs split-color */
.phz-hero-title--underline-accent {
    position: relative; display: inline-block;
}
.phz-hero-title--underline-accent::after {
    content: '';
    position: absolute;
    left: 0; bottom: -8px;
    width: 80px; height: 2px;
    background: var(--signal);
}

/* --- Utilities ------------------------------------------------ */
.phz-u-text-3 { color: var(--text-3) !important; }
.phz-u-text-4 { color: var(--text-4) !important; }
.phz-u-mt-12 { margin-top: var(--space-12); }
.phz-u-mt-16 { margin-top: var(--space-16); }
.phz-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;
}


/* ============================================================
   v29 — phz-info-rich (Science + About pages)
   Extracted from JS bundle in Phase 2 (saved ~20KB).
   ============================================================ */
.phz-info-rich{--cyan:#2ad3ea;--cyan2:#5de3f5;--cream:#f5f0e8;--muted:rgba(245,240,232,.72);--line:rgba(42,211,234,.14);background:#080808;color:var(--cream);font-family:'Outfit',sans-serif;overflow-x:hidden}.phz-info-rich *{box-sizing:border-box}.phz-info-rich .wrap{width:min(1180px,calc(100% - 48px));margin:0 auto}.phz-info-rich .hero{position:relative;min-height:680px;padding:150px 0 96px;display:flex;align-items:center;overflow:hidden;background:radial-gradient(circle at 75% 20%,rgba(42,211,234,.16),transparent 34%),radial-gradient(circle at 15% 70%,rgba(42,211,234,.07),transparent 36%),#080808;border-bottom:1px solid var(--line)}.phz-info-rich .hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(42,211,234,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(42,211,234,.035) 1px,transparent 1px);background-size:58px 58px;mask-image:radial-gradient(circle at center,#000,transparent 76%)}.phz-info-rich .hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:center}.phz-info-rich .kicker{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--cyan);display:flex;align-items:center;gap:12px;margin-bottom:22px}.phz-info-rich .kicker:before{content:"";width:34px;height:1px;background:var(--cyan)}.phz-info-rich h1,.phz-info-rich h2,.phz-info-rich h3{font-family:'Bebas Neue',sans-serif;font-weight:400;letter-spacing:.045em;color:var(--cream);margin:0;text-wrap:balance;word-break:normal;overflow-wrap:normal;hyphens:none}.phz-info-rich p,.phz-info-rich li,.phz-info-rich td{word-break:normal;overflow-wrap:normal;hyphens:none}.phz-info-rich h1{font-size:clamp(68px,8.8vw,124px);line-height:.86;max-width:980px}.phz-info-rich .hero-title{display:block;text-wrap:balance}.phz-info-rich .title-line{display:block;white-space:nowrap}.phz-info-rich .title-line.accent{color:var(--cyan)}.phz-info-rich h1 span,.phz-info-rich h2 span{color:inherit}.phz-info-rich h1 span.accent,.phz-info-rich h2 span{color:var(--cyan)}.phz-info-rich .lead{font-size:18px;line-height:1.82;color:rgba(245,240,232,.78);max-width:660px;margin:28px 0 0;text-wrap:pretty}.phz-info-rich .actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}.phz-info-rich .btn{border:1px solid var(--cyan);background:transparent;color:var(--cyan);min-height:48px;padding:14px 26px;font-family:'Outfit',sans-serif;font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;transition:.25s ease}.phz-info-rich .btn:hover{transform:translateY(-2px);background:rgba(42,211,234,.1)}.phz-info-rich .btn.primary{background:var(--cyan);color:#061012;box-shadow:0 16px 54px rgba(42,211,234,.18)}.phz-info-rich .quote-stack{display:grid;gap:14px}.phz-info-rich .quote-card{position:relative;padding:24px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid var(--line);box-shadow:0 28px 90px rgba(0,0,0,.36)}.phz-info-rich .quote-card svg{width:30px;height:30px;color:var(--cyan);margin-bottom:16px}.phz-info-rich .quote-card p{font-size:18px;line-height:1.58;color:rgba(245,240,232,.82);margin:0 0 14px;text-wrap:balance}.phz-info-rich .quote-card span{font-family:'Space Mono',monospace;color:var(--cyan);font-size:10px;letter-spacing:.16em;text-transform:uppercase}.phz-info-rich .section{padding:105px 0;position:relative;border-bottom:1px solid rgba(42,211,234,.08)}.phz-info-rich .section.alt{background:linear-gradient(180deg,#0b0b0b,#080808)}.phz-info-rich .section-head{max-width:820px;margin-bottom:48px}.phz-info-rich .section-head.center{text-align:center;margin-left:auto;margin-right:auto}.phz-info-rich .section-head.center .kicker{justify-content:center}.phz-info-rich .section-head.center .kicker:after{content:"";width:34px;height:1px;background:var(--cyan)}.phz-info-rich .section-head h2{font-size:clamp(56px,7vw,104px);line-height:.9}.phz-info-rich .section-head p,.phz-info-rich .copy{font-size:16px;line-height:1.86;color:rgba(245,240,232,.72);margin:22px 0 0;text-wrap:pretty}.phz-info-rich .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.phz-info-rich .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.phz-info-rich .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.phz-info-rich .card{position:relative;padding:28px;background:radial-gradient(circle at 85% 0%,rgba(42,211,234,.1),transparent 38%),linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018));border:1px solid var(--line);box-shadow:0 24px 80px rgba(0,0,0,.28);overflow:hidden}.phz-info-rich .card:hover{border-color:rgba(42,211,234,.32)}.phz-info-rich .num{font-family:'Space Mono',monospace;color:var(--cyan);font-size:11px;letter-spacing:.18em;text-transform:uppercase;display:block;margin-bottom:18px}.phz-info-rich .card h3{font-size:clamp(32px,4vw,48px);line-height:.96;margin-bottom:14px;text-wrap:balance}.phz-info-rich .card p{font-size:15px;line-height:1.78;color:rgba(245,240,232,.72);margin:0 0 18px;text-wrap:pretty}.phz-info-rich .principle{margin-top:18px;padding:18px;border:1px solid rgba(42,211,234,.18);background:rgba(42,211,234,.055)}.phz-info-rich .principle strong{display:block;font-family:'Space Mono',monospace;color:var(--cyan);font-size:10px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:8px}.phz-info-rich .tags{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}.phz-info-rich .tags span{border:1px solid rgba(42,211,234,.18);background:rgba(42,211,234,.05);padding:8px 10px;color:rgba(245,240,232,.7);font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase}.phz-info-rich .profile{display:grid;grid-template-columns:.72fr 1.28fr;gap:28px;align-items:start}.phz-info-rich .profile-side{position:sticky;top:96px;padding:28px;border:1px solid rgba(42,211,234,.24);background:rgba(8,8,8,.58)}.phz-info-rich .profile-side svg{width:56px;height:56px;color:var(--cyan);margin-bottom:22px;filter:drop-shadow(0 0 24px rgba(42,211,234,.22))}.phz-info-rich .profile-side h3{font-size:clamp(44px,5vw,70px);line-height:.9}.phz-info-rich .profile-side p{font-size:17px;line-height:1.65;color:rgba(245,240,232,.75);margin:22px 0 0}.phz-info-rich .callout{padding:34px;border:1px solid rgba(42,211,234,.32);background:radial-gradient(circle at 100% 0%,rgba(42,211,234,.18),transparent 42%),linear-gradient(180deg,rgba(42,211,234,.08),rgba(255,255,255,.02));box-shadow:0 32px 110px rgba(0,0,0,.38)}.phz-info-rich .callout h3{font-size:clamp(48px,6vw,78px);line-height:.9}.phz-info-rich .stat{padding:26px;text-align:center;border:1px solid rgba(42,211,234,.18);background:rgba(255,255,255,.028)}.phz-info-rich .stat strong{font-family:'Bebas Neue',sans-serif;font-size:clamp(50px,6vw,80px);letter-spacing:.04em;color:var(--cyan);font-weight:400}.phz-info-rich .stat span{display:block;font-size:13px;line-height:1.5;color:rgba(245,240,232,.72);margin-top:8px}.phz-info-rich .steps{counter-reset:step;display:grid;gap:14px}.phz-info-rich .step{counter-increment:step;display:grid;grid-template-columns:70px 1fr;gap:18px;align-items:start;padding:22px;border:1px solid var(--line);background:rgba(255,255,255,.026)}.phz-info-rich .step:before{content:counter(step);font-family:'Bebas Neue',sans-serif;font-size:54px;line-height:1;color:var(--cyan)}.phz-info-rich .step h3{font-size:32px;margin-bottom:8px}.phz-info-rich .table-wrap{overflow-x:auto;border:1px solid var(--line);background:#0c0c0c}.phz-info-rich table{width:100%;min-width:920px;border-collapse:collapse}.phz-info-rich th,.phz-info-rich td{border-bottom:1px solid rgba(42,211,234,.1);padding:16px 18px;text-align:left;vertical-align:top}.phz-info-rich th{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);background:rgba(42,211,234,.045)}.phz-info-rich td{font-size:14px;line-height:1.6;color:rgba(245,240,232,.74)}.phz-info-rich td:first-child{font-family:'Bebas Neue',sans-serif;font-size:32px;color:var(--cream);letter-spacing:.04em}.phz-info-rich .final{padding:72px;border:1px solid rgba(42,211,234,.34);background:radial-gradient(circle at 100% 0%,rgba(42,211,234,.20),transparent 36%),linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));text-align:center}.phz-info-rich .final h2{font-size:clamp(58px,8vw,112px);line-height:.88}.phz-info-rich .final p{max-width:760px;margin:22px auto 0;color:rgba(245,240,232,.78);line-height:1.8}.phz-info-rich .disclaimer{font-size:12px;line-height:1.7;color:rgba(245,240,232,.72);margin-top:24px}.phz-info-rich .svg-inline{width:34px;height:34px;color:var(--cyan);margin-bottom:16px}.phz-info-rich .manifesto p{font-size:18px;line-height:1.9;color:rgba(245,240,232,.72);margin:0 0 22px}.phz-info-rich .footnote{font-size:12px;line-height:1.7;color:rgba(245,240,232,.72);border-top:1px solid rgba(42,211,234,.1);padding-top:22px;margin-top:34px}
@media(max-width:980px){.phz-info-rich .hero-grid,.phz-info-rich .profile,.phz-info-rich .grid-2,.phz-info-rich .grid-3,.phz-info-rich .grid-4{grid-template-columns:1fr}.phz-info-rich .profile-side{position:relative;top:auto}.phz-info-rich .hero{padding:130px 0 80px}.phz-info-rich .section{padding:82px 0}.phz-info-rich .final{padding:44px 24px}}
@media(max-width:680px){.phz-info-rich .wrap{width:min(100% - 28px,1180px)}.phz-info-rich h1{font-size:clamp(36px,10.2vw,62px);line-height:.9;letter-spacing:.035em}.phz-info-rich .hero-title{max-width:100%}.phz-info-rich .title-line{white-space:nowrap}.phz-info-rich .section-head h2{font-size:clamp(46px,13.5vw,72px);line-height:.92}.phz-info-rich .lead{font-size:16px}.phz-info-rich .card,.phz-info-rich .callout,.phz-info-rich .profile-side{padding:22px}.phz-info-rich .actions,.phz-info-rich .actions .btn{width:100%}.phz-info-rich .btn{width:100%;min-height:52px}.phz-info-rich .quote-card p{font-size:16px}.phz-info-rich .step{grid-template-columns:50px 1fr;padding:18px}.phz-info-rich .step:before{font-size:42px}.phz-info-rich .final h2{font-size:clamp(48px,14vw,76px)}.phz-info-rich .hero-grid{gap:34px}}@media(max-width:390px){.phz-info-rich h1{font-size:clamp(34px,9.8vw,44px);letter-spacing:.028em}.phz-info-rich .section-head h2{font-size:clamp(40px,12vw,58px)}}

/* ============================================================
   v29 — Mini-cart drawer
   ============================================================ */
.phz-cart-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(4px);
    z-index: var(--z-modal);
    opacity: 0; pointer-events: none;
    transition: opacity var(--dur-base) var(--ease-out);
}
.phz-cart-overlay--open { opacity: 1; pointer-events: auto; }
.phz-cart-drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(440px, 100vw);
    background: var(--surface-2);
    border-left: 1px solid var(--border-2);
    z-index: calc(var(--z-modal) + 1);
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--dur-base) var(--ease-out);
    box-shadow: -32px 0 80px rgba(0, 0, 0, 0.6);
}
.phz-cart-drawer--open { transform: translateX(0); }
.phz-cart-drawer__header {
    padding: var(--space-6) var(--space-8);
    border-bottom: 1px solid var(--border-1);
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-4);
}
.phz-cart-drawer__title {
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    letter-spacing: var(--tracking-display);
    color: var(--text-1);
    line-height: 1;
}
.phz-cart-drawer__close {
    background: none; border: none;
    color: var(--text-3);
    width: 36px; height: 36px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-md);
    transition: background var(--dur-fast), color var(--dur-fast);
}
.phz-cart-drawer__close:hover { background: var(--surface-3); color: var(--text-1); }
.phz-cart-drawer__body {
    flex: 1; overflow-y: auto;
    padding: var(--space-6) var(--space-8);
    display: flex; flex-direction: column; gap: var(--space-5);
}
/* v2.10.3: legacy .phz-cart-item* removed — cart items now use .phz-cart-card* (product-card style). */
.phz-cart-drawer__success {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-4);
    background: rgba(34, 197, 94, 0.06);
    border: 1px solid rgba(34, 197, 94, 0.32);
    color: var(--success);
    font-size: var(--fs-small);
}
.phz-cart-drawer__footer {
    padding: var(--space-6) var(--space-8);
    border-top: 1px solid var(--border-1);
    background: var(--surface-2);
    display: flex; flex-direction: column; gap: var(--space-4);
}
.phz-cart-drawer__totals {
    display: flex; justify-content: space-between; align-items: baseline;
}
.phz-cart-drawer__totals-label {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--text-3);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
}
.phz-cart-drawer__totals-value {
    font-family: var(--font-display);
    font-size: 32px;
    color: var(--signal);
    letter-spacing: var(--tracking-display);
}
.phz-cart-drawer__actions {
    display: flex; flex-direction: column; gap: var(--space-3);
}
.phz-cart-drawer__btn {
    width: 100%;
    padding: var(--space-4) var(--space-6);
    border: 1px solid var(--signal);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--fs-meta);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--dur-base), color var(--dur-base);
    text-align: center;
    text-decoration: none;
    display: inline-block;
}
.phz-cart-drawer__btn--primary {
    background: var(--signal);
    color: var(--signal-on);
    box-shadow: var(--signal-glow);
}
.phz-cart-drawer__btn--primary:hover { background: var(--signal-bright); }
.phz-cart-drawer__btn--secondary {
    background: transparent;
    color: var(--signal);
}
.phz-cart-drawer__btn--secondary:hover { background: var(--signal-dim); }
.phz-cart-drawer__btn--ghost {
    background: transparent;
    color: var(--text-3);
    border-color: var(--border-2);
}
.phz-cart-drawer__btn--ghost:hover { color: var(--text-1); border-color: var(--border-3); }
.phz-cart-drawer__upsell {
    margin-top: var(--space-2);
    padding: var(--space-4);
    background: var(--signal-dim);
    border: 1px solid var(--border-2);
    font-size: var(--fs-small);
    line-height: var(--lh-body);
    color: var(--text-2);
    display: flex; flex-direction: column; gap: var(--space-2);
}
.phz-cart-drawer__upsell-title {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--signal);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
}
/* ============================================================
   v2.10.3 — Drawer items styled like product cards
   Mono category label, Bebas Neue name, tagline, cyan price,
   inline qty stepper, X remove. Matches ProductPage aesthetic.
   ============================================================ */

/* Drawer body becomes a single-column stack of cards. */
.phz-cart-drawer__body {
    background: #080808;
    gap: var(--space-3);
    padding: var(--space-6);
}

.phz-cart-card {
    position: relative;
    background: #0e0e0e;
    border: 1px solid rgba(42, 211, 234, 0.10);
    padding: 18px 18px 16px;
    display: flex; flex-direction: column;
    gap: 6px;
    transition: border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-base), box-shadow var(--dur-base);
}
.phz-cart-card:hover {
    border-color: rgba(42, 211, 234, 0.28);
    background: #111;
}

.phz-cart-card__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: 2px;
}
.phz-cart-card__label {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #2ad3ea;
}
.phz-cart-card__label--bundle { color: #f3c969; }
.phz-cart-card__label--generator { color: #2ad3ea; }

.phz-cart-card__remove {
    background: none;
    border: 1px solid transparent;
    color: rgba(245, 240, 232, 0.42);
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    border-radius: 4px;
    transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.phz-cart-card__remove:hover {
    background: rgba(239, 68, 68, 0.10);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.35);
}
.phz-cart-card__remove:disabled { opacity: 0.4; cursor: not-allowed; }

.phz-cart-card__name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 24px;
    letter-spacing: 0.06em;
    color: #F5F0E8;
    line-height: 1.05;
}
.phz-cart-card__tagline {
    font-size: 12px;
    color: rgba(245, 240, 232, 0.56);
    line-height: 1.45;
    margin-top: 2px;
}

.phz-cart-card__foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-3);
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px dashed rgba(42, 211, 234, 0.10);
}

/* Quantity stepper: inline +/- around qty number. */
.phz-cart-card__qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(42, 211, 234, 0.16);
    background: rgba(42, 211, 234, 0.04);
    border-radius: 3px;
    overflow: hidden;
    height: 32px;
}
.phz-cart-card__qty-btn {
    background: none;
    border: none;
    color: #2ad3ea;
    width: 30px; height: 100%;
    font-family: 'Space Mono', monospace;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background var(--dur-fast), color var(--dur-fast);
    display: inline-flex; align-items: center; justify-content: center;
}
.phz-cart-card__qty-btn:hover:not(:disabled) { background: rgba(42, 211, 234, 0.10); }
.phz-cart-card__qty-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.phz-cart-card__qty-value {
    min-width: 28px;
    text-align: center;
    font-family: 'Space Mono', monospace;
    font-size: 13px;
    color: #F5F0E8;
    border-left: 1px solid rgba(42, 211, 234, 0.16);
    border-right: 1px solid rgba(42, 211, 234, 0.16);
    padding: 0 8px;
    line-height: 30px;
}

.phz-cart-card__pricing {
    display: inline-flex; align-items: baseline; gap: 8px;
}
.phz-cart-card__regular {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    color: rgba(245, 240, 232, 0.40);
    text-decoration: line-through;
}
.phz-cart-card__price {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px;
    letter-spacing: 0.04em;
    color: #2ad3ea;
}

/* Pending state: card while server confirms the add. */
.phz-cart-card--pending { opacity: 0.78; }
.phz-cart-card__pending {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #2ad3ea;
    font-style: italic;
}

/* Just-added: cyan flash + lift on the new card. */
.phz-cart-card--just-added {
    animation: phz-cart-card-flash 1100ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes phz-cart-card-flash {
    0%   { background: rgba(42, 211, 234, 0.16); border-color: rgba(42, 211, 234, 0.55); box-shadow: 0 0 0 0 rgba(42, 211, 234, 0.35); transform: translateX(0); }
    30%  { transform: translateX(0) scale(1.015); box-shadow: 0 0 0 8px rgba(42, 211, 234, 0); }
    100% { background: #0e0e0e; border-color: rgba(42, 211, 234, 0.10); box-shadow: none; transform: none; }
}

/* While qty is updating: subtle pulse on the stepper. */
.phz-cart-card--updating .phz-cart-card__qty {
    animation: phz-card-link-pulse 800ms ease-in-out infinite;
}

/* Spinner used inline in cards + nav. */
.phz-cart-spinner {
    display: inline-block;
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(42, 211, 234, 0.22);
    border-top-color: var(--signal);
    animation: phz-cart-spin 720ms linear infinite;
}
@keyframes phz-cart-spin { to { transform: rotate(360deg); } }

/* Empty state — premium, not the dull paragraph. */
.phz-cart-drawer__empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
    padding: 48px 24px;
    gap: 14px;
    border: 1px dashed rgba(42, 211, 234, 0.18);
    background: #0e0e0e;
}
.phz-cart-drawer__empty-icon {
    width: 80px; height: 80px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(42, 211, 234, 0.10) 0%, transparent 70%);
    border: 1px solid rgba(42, 211, 234, 0.22);
    display: inline-flex; align-items: center; justify-content: center;
    color: #2ad3ea;
}
.phz-cart-drawer__empty-label {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.2em;
    color: #2ad3ea;
    text-transform: uppercase;
}
.phz-cart-drawer__empty p {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px;
    letter-spacing: 0.06em;
    color: #F5F0E8;
    margin: 0;
}
.phz-cart-drawer__empty-hint {
    font-size: 12px;
    color: rgba(245, 240, 232, 0.56);
    line-height: 1.5;
    max-width: 260px;
}

/* ============================================================
   v2.10.2 — Drawer optimization (kept: drawer slide, success banner, nav cart trigger)
   ============================================================ */

/* Smoother drawer slide-in: larger blur on overlay + spring-y easing on the drawer. */
.phz-cart-overlay { backdrop-filter: blur(8px); transition: opacity 260ms cubic-bezier(0.16, 1, 0.3, 1); }
.phz-cart-drawer {
    transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Auto-dismiss fade for the success banner. */
.phz-cart-drawer__success {
    animation: phz-cart-success-in 240ms var(--ease-out);
}
@keyframes phz-cart-success-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Nav cart trigger with badge counter. */
.phz-nav-cart {
    position: relative;
    background: rgba(42, 211, 234, 0.06);
    border: 1px solid rgba(42, 211, 234, 0.18);
    color: var(--signal);
    width: 42px; height: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
.phz-nav-cart:hover {
    background: rgba(42, 211, 234, 0.14);
    border-color: rgba(42, 211, 234, 0.42);
    transform: translateY(-1px);
}
.phz-nav-cart__badge {
    position: absolute;
    top: -6px; right: -6px;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    background: var(--signal);
    color: var(--signal-on);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 18px;
    text-align: center;
    border-radius: 999px;
    box-shadow: 0 0 0 2px var(--surface-1), 0 0 12px rgba(42, 211, 234, 0.55);
    animation: phz-cart-badge-pop 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes phz-cart-badge-pop {
    0%   { transform: scale(0.4); opacity: 0; }
    60%  { transform: scale(1.18); opacity: 1; }
    100% { transform: scale(1); }
}
.phz-nav-cart--has-items {
    border-color: rgba(42, 211, 234, 0.42);
}

/* Card add-to-cart link — loading pulse + hover micro-shift. */
.phz-card-add-link {
    transition: color var(--dur-fast), transform var(--dur-fast);
}
.phz-card-add-link:hover:not(:disabled) {
    color: var(--signal-bright, var(--signal));
    transform: translateX(2px);
}
.phz-card-add-link--loading {
    animation: phz-card-link-pulse 900ms ease-in-out infinite;
}
@keyframes phz-card-link-pulse {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .phz-cart-drawer, .phz-cart-overlay { transition: none; }
    .phz-cart-spinner,
    .phz-cart-card--just-added,
    .phz-cart-card--updating .phz-cart-card__qty,
    .phz-nav-cart__badge,
    .phz-card-add-link--loading,
    .phz-cart-drawer__success { animation: none; }
}

/* ============================================================
   v29 — Exit-intent / scroll capture modal
   ============================================================ */
.phz-optin-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(6px);
    z-index: var(--z-modal);
    opacity: 0; pointer-events: none;
    transition: opacity var(--dur-base) var(--ease-out);
    display: flex; align-items: center; justify-content: center;
    padding: var(--gutter);
}
.phz-optin-overlay--open { opacity: 1; pointer-events: auto; }

.phz-optin-modal {
    position: relative;
    width: min(520px, 100%);
    background: var(--surface-2);
    border: 1px solid var(--border-3);
    box-shadow: var(--shadow-lg), var(--signal-glow);
    padding: var(--space-12) var(--space-10);
    transform: scale(0.96);
    transition: transform var(--dur-base) var(--ease-out);
    text-align: center;
}
.phz-optin-overlay--open .phz-optin-modal { transform: scale(1); }

.phz-optin-modal__close {
    position: absolute; top: var(--space-3); right: var(--space-3);
    background: none; border: none;
    color: var(--text-4);
    width: 36px; height: 36px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-md);
    transition: background var(--dur-fast), color var(--dur-fast);
}
.phz-optin-modal__close:hover { color: var(--text-1); background: var(--surface-3); }

.phz-optin-modal__kicker {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--signal);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    margin-bottom: var(--space-3);
}
.phz-optin-modal__title {
    font-family: var(--font-display);
    font-size: clamp(36px, 5vw, 56px);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-display);
    color: var(--text-1);
    margin-bottom: var(--space-4);
}
.phz-optin-modal__title span { color: var(--signal); }
.phz-optin-modal__lead {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--text-3);
    margin-bottom: var(--space-8);
    max-width: 420px; margin-left: auto; margin-right: auto;
}
.phz-optin-modal__form {
    display: flex; gap: var(--space-2);
    max-width: 380px; margin: 0 auto;
}
.phz-optin-modal__input {
    flex: 1;
    background: var(--surface-1);
    border: 1px solid var(--border-2);
    color: var(--text-1);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    padding: var(--space-4) var(--space-5);
    transition: border-color var(--dur-base), box-shadow var(--dur-base);
}
.phz-optin-modal__input:focus {
    outline: none;
    border-color: var(--signal);
    box-shadow: 0 0 0 3px var(--signal-dim);
}
.phz-optin-modal__submit {
    background: var(--signal);
    color: var(--signal-on);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--fs-meta);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0 var(--space-6);
    border: none;
    cursor: pointer;
    transition: background var(--dur-base);
    box-shadow: var(--signal-glow);
}
.phz-optin-modal__submit:hover { background: var(--signal-bright); }
.phz-optin-modal__submit:disabled { opacity: 0.6; cursor: not-allowed; }
.phz-optin-modal__error {
    margin-top: var(--space-4);
    color: var(--error);
    font-size: var(--fs-small);
}
.phz-optin-modal__success {
    margin-top: var(--space-6);
    padding: var(--space-5);
    background: rgba(34, 197, 94, 0.06);
    border: 1px solid rgba(34, 197, 94, 0.32);
    color: var(--text-1);
    font-size: var(--fs-small);
    line-height: var(--lh-body);
}
.phz-optin-modal__code {
    display: inline-block;
    margin-top: var(--space-3);
    padding: var(--space-2) var(--space-5);
    background: var(--signal);
    color: var(--signal-on);
    font-family: var(--font-mono);
    font-size: var(--fs-body);
    font-weight: 700;
    letter-spacing: 0.16em;
}
.phz-optin-modal__skip {
    margin-top: var(--space-5);
    background: none; border: none;
    color: var(--text-4);
    cursor: pointer;
    font-size: var(--fs-meta);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-family: var(--font-mono);
    transition: color var(--dur-base);
}
.phz-optin-modal__skip:hover { color: var(--text-1); }

@media (max-width: 600px) {
    .phz-optin-modal { padding: var(--space-8) var(--space-6); }
    .phz-optin-modal__form { flex-direction: column; }
}

/* ============================================================
   v29 — Science page layout variants
   Breaks the repeating "sidebar + main" rhythm across Tesla/Rife/Einstein.
   ============================================================ */
.phz-info-rich .section--mirror .profile { grid-template-columns: 1.28fr .72fr; }
.phz-info-rich .section--mirror .profile-side { order: 2; position: sticky; top: 96px; }
.phz-info-rich .section--mirror .profile > div { order: 1; }

.phz-info-rich .section--banner .profile {
    grid-template-columns: 1fr;
    gap: var(--space-12);
}
.phz-info-rich .section--banner .profile-side {
    position: relative; top: auto;
    display: grid; grid-template-columns: auto 1fr; gap: var(--space-6);
    align-items: center;
    background: linear-gradient(180deg, rgba(42,211,234,0.08), rgba(42,211,234,0.02));
    border-color: rgba(42,211,234,0.36);
}
.phz-info-rich .section--banner .profile-side svg { margin: 0; flex-shrink: 0; }
.phz-info-rich .section--banner .profile-side h3 { font-size: clamp(28px, 3vw, 40px); }
.phz-info-rich .section--banner .profile-side p { margin-top: var(--space-3); }
.phz-info-rich .section--banner .tags { grid-column: 1 / -1; }

@media (max-width: 980px) {
    .phz-info-rich .section--mirror .profile,
    .phz-info-rich .section--banner .profile { grid-template-columns: 1fr; }
    .phz-info-rich .section--banner .profile-side { grid-template-columns: 1fr; }
}

/* ============================================================
   v29 — Benefit tiles (used in Science callouts: Tesla / Rife)
   ============================================================ */
.phz-info-rich .phz-benefit-tile {
    padding: 22px;
    background: rgba(8, 8, 8, 0.48);
    border: 1px solid rgba(42, 211, 234, 0.22);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.phz-info-rich .phz-benefit-tile__icon {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(42, 211, 234, 0.12);
    border: 1px solid rgba(42, 211, 234, 0.32);
    color: var(--cyan);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    margin-bottom: 6px;
}
.phz-info-rich .phz-benefit-tile h4 {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    font-size: 22px;
    letter-spacing: 0.04em;
    color: var(--cream);
    line-height: 1.05;
    text-wrap: balance;
    margin: 0;
}
.phz-info-rich .phz-benefit-tile p {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(245, 240, 232, 0.78);
    margin: 0;
}

/* Help the Science callouts breathe — softer h3 so it doesn't overflow on narrow screens */
.phz-info-rich .callout h3 {
    font-size: clamp(28px, 3.6vw, 48px);
    line-height: 1;
    margin-bottom: 6px;
}
.phz-info-rich .callout p.copy { font-size: 16px; line-height: 1.78; }

@media (max-width: 680px) {
    .phz-info-rich .phz-benefit-tile { padding: 18px; }
    .phz-info-rich .phz-benefit-tile h4 { font-size: 20px; }
}

/* ============================================================
   v29 — Layout robustness fix
   CSS Grid items default to min-width:auto which makes them grow
   to fit their intrinsic content size (large headlines, etc.),
   blowing out the column proportions. Force min-width:0 so the
   fr-based sizing is actually respected.
   ============================================================ */
.phz-info-rich .profile,
.phz-info-rich .hero-grid {
    min-width: 0;
}
.phz-info-rich .profile > *,
.phz-info-rich .hero-grid > *,
.phz-info-rich .grid-2 > *,
.phz-info-rich .grid-3 > *,
.phz-info-rich .grid-4 > * {
    min-width: 0;
}

/* Benefit tiles: when nested inside a narrow callout, collapse the inner
   grid to a single column under ~640px effective width so each tile
   can render its content without word-stacking. */
.phz-info-rich .callout .grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.phz-info-rich .phz-benefit-tile h4 {
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: none;
}

/* Make the profile column ratio more forgiving — sidebar a bit wider,
   content not capped so tight, so very large headlines breathe. */
.phz-info-rich .profile {
    grid-template-columns: minmax(280px, .85fr) minmax(0, 1.15fr);
}
@media (max-width: 980px) {
    .phz-info-rich .profile { grid-template-columns: 1fr; }
}

/* ============================================================
   v29 P5 — Three.js scene mounting
   ============================================================ */

/* Page-wide WebGL background canvas (sits behind everything) */
.phz-3d-bg {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
    opacity: 0.55;
}

/* Make sure content sits above the bg, but below modal layer */
.phz-science-3d-host { position: relative; z-index: 1; }

/* Portal targets — host divs injected into Science HTML */
.phz-3d-portal-target--orb {
    position: relative;
    z-index: 0;
    margin-bottom: var(--space-6);
}

.phz-3d-portal-target--cymatics {
    margin: var(--space-12) auto;
    width: 100%;
    max-width: 920px;
}

/* FrequencyOrb container */
.phz-orb-3d {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    pointer-events: none;
}
.phz-orb-3d--lg { max-width: 480px; margin: 0 auto; }
.phz-orb-3d--sm { max-width: 240px; }
.phz-orb-3d canvas { display: block; width: 100% !important; height: 100% !important; }

/* CymaticsPlate container */
.phz-cymatics-3d {
    width: 100%;
    height: 360px;
    position: relative;
    border: 1px solid rgba(42, 211, 234, 0.18);
    background: radial-gradient(circle at center, rgba(42, 211, 234, 0.06), transparent 60%), #050505;
    overflow: hidden;
    cursor: crosshair;
}
.phz-cymatics-3d canvas { display: block; }
.phz-cymatics-3d::after {
    content: 'Move the mouse to disturb the field';
    position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
    font-family: var(--font-mono);
    font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(42, 211, 234, 0.6);
    pointer-events: none;
}

/* Static SVG fallback for prefers-reduced-motion */
.phz-orb-fallback {
    width: 100%;
    aspect-ratio: 1;
    max-width: 320px;
    margin: 0 auto var(--space-6);
    position: relative;
}
.phz-orb-fallback svg { width: 100%; height: 100%; }
.phz-orb-fallback--anim { display: flex; align-items: center; justify-content: center; }
.phz-orb-pulse {
    width: 160px; height: 160px; border-radius: 50%;
    background: radial-gradient(circle, rgba(42, 211, 234, 0.5), transparent 70%);
    animation: phzOrbPulse 3s ease-in-out infinite;
}
@keyframes phzOrbPulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50%      { transform: scale(1.15); opacity: 1; }
}

/* Tweaks: when the orb mounts in the hero, make the quote cards float over
   it with a subtle backdrop blur — premium layered look */
.phz-info-rich .hero .quote-stack {
    position: relative;
    isolation: isolate;
}
.phz-info-rich .hero .quote-stack > .phz-3d-portal-target--orb {
    position: absolute;
    inset: 0;
    margin-bottom: 0;
    z-index: -1;
    display: flex; align-items: center; justify-content: center;
}
.phz-info-rich .hero .quote-stack > .phz-3d-portal-target--orb .phz-orb-3d {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    aspect-ratio: 1;
}
.phz-info-rich .hero .quote-card {
    backdrop-filter: blur(6px);
    background: linear-gradient(180deg, rgba(8, 8, 8, 0.72), rgba(8, 8, 8, 0.4));
    position: relative;
    z-index: 1;
}

/* ============================================================
   v29 P6 — Additional 3D scene styles
   ============================================================ */

/* HexOrbit3D — home hero centerpiece + system section */
.phz-orbit-3d {
    position: relative;
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    pointer-events: none;
}
.phz-orbit-3d.phz-orbit-3d--interactive { pointer-events: auto; }
.phz-orbit-3d canvas { display: block; width: 100% !important; height: 100% !important; }

/* v2.9.9 — interactive HexOrbit tooltip */
.phz-orbit-tooltip {
    background: var(--surface-1);
    border: 1px solid var(--signal);
    color: var(--text-1);
    padding: var(--space-3) var(--space-5);
    box-shadow: var(--shadow-md), 0 0 24px var(--signal-dim);
    z-index: var(--z-modal);
    min-width: 180px;
    transform: translateY(0);
    animation: phzOrbTooltipIn 0.18s var(--ease-out);
}
@keyframes phzOrbTooltipIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.phz-orbit-tooltip__name {
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    color: var(--text-1);
    letter-spacing: var(--tracking-display);
    line-height: 1.1;
}
.phz-orbit-tooltip__price {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--signal);
    margin-top: 2px;
}
.phz-orbit-tooltip__owned {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--success);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    margin-top: 4px;
}
.phz-orbit-tooltip__cta {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--signal);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--border-1);
}

.phz-orbit-fallback {
    width: 100%; aspect-ratio: 1;
    max-width: 360px;
    margin: 0 auto;
    opacity: 0.7;
}
.phz-orbit-fallback svg { width: 100%; height: 100%; }

/* Home hero — the orbit is the BACKDROP behind the text */
.phz-hero-orbit-bg .phz-orbit-3d {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
}

/* Product hero — orb floats on the right */
.phz-product-hero-orb {
    transition: opacity var(--dur-slow) var(--ease-out);
}
.phz-product-hero-orb .phz-orb-3d { width: 100%; height: 100%; max-width: none; }
@media (max-width: 980px) {
    .phz-product-hero-orb { display: none; }
}

/* About hero — same overlay treatment as Science */
.phz-info-rich.phz-about-rich .hero .quote-stack {
    position: relative;
    isolation: isolate;
}
.phz-info-rich.phz-about-rich .hero .quote-stack > .phz-3d-portal-target--orb {
    position: absolute;
    inset: 0;
    margin-bottom: 0;
    z-index: -1;
    display: flex; align-items: center; justify-content: center;
}
.phz-info-rich.phz-about-rich .hero .quote-stack > .phz-3d-portal-target--orb .phz-orb-3d {
    max-width: 100%;
    width: 100%;
    aspect-ratio: 1;
}
.phz-info-rich.phz-about-rich .hero .quote-card {
    backdrop-filter: blur(6px);
    background: linear-gradient(180deg, rgba(8, 8, 8, 0.72), rgba(8, 8, 8, 0.4));
    position: relative;
    z-index: 1;
}

.phz-about-3d-host { position: relative; z-index: 1; }

/* ============================================================
   v29 P7 — Mini 3D scene styles
   ============================================================ */
.phz-water-3d {
    width: 100%;
    height: 320px;
    position: relative;
    border: 1px solid rgba(42, 211, 234, 0.18);
    background: radial-gradient(circle at center, rgba(42, 211, 234, 0.05), transparent 70%), #050505;
    overflow: hidden;
    margin: var(--space-12) 0;
}
.phz-water-3d canvas { display: block; }

.phz-beam-3d {
    width: 100%;
    height: 110px;
    position: relative;
    margin-bottom: var(--space-5);
    pointer-events: none;
}
.phz-beam-3d canvas { display: block; }

.phz-atom-3d {
    width: 56px; height: 56px;
    margin-bottom: 22px;
    pointer-events: none;
}
.phz-atom-3d canvas { display: block; width: 100% !important; height: 100% !important; }
.phz-atom-fallback {
    width: 56px; height: 56px; margin-bottom: 22px;
}
.phz-atom-fallback svg { width: 100%; height: 100%; }

/* ============================================================
   v29 P7 — SVG-inline icon animations
   ============================================================ */
.phz-info-rich .svg-inline {
    transition: transform 0.6s var(--ease-out), filter 0.6s var(--ease-out);
    animation: phzIconBreathe 8s ease-in-out infinite;
    transform-origin: center;
}
.phz-info-rich .card:hover .svg-inline,
.phz-info-rich .quote-card:hover .svg-inline,
.phz-info-rich .profile-side .svg-inline {
    filter: drop-shadow(0 0 18px rgba(42, 211, 234, 0.45));
}
.phz-info-rich .card:hover .svg-inline {
    transform: scale(1.06) rotate(-2deg);
}

.phz-info-rich .grid-2 > article:nth-child(2) .svg-inline { animation-delay: -1s; }
.phz-info-rich .grid-2 > article:nth-child(3) .svg-inline { animation-delay: -2s; }
.phz-info-rich .grid-2 > article:nth-child(4) .svg-inline { animation-delay: -3s; }
.phz-info-rich .grid-3 > article:nth-child(2) .svg-inline { animation-delay: -1.5s; }
.phz-info-rich .grid-3 > article:nth-child(3) .svg-inline { animation-delay: -3s; }
.phz-info-rich .quote-card:nth-child(2) .svg-inline { animation-delay: -1.2s; }
.phz-info-rich .quote-card:nth-child(3) .svg-inline { animation-delay: -2.4s; }

@keyframes phzIconBreathe {
    0%, 100% { transform: scale(1) translateY(0); opacity: 0.88; }
    50%      { transform: scale(1.08) translateY(-2px); opacity: 1; }
}

.phz-info-rich .step {
    transition: border-color var(--dur-base), background var(--dur-base);
}
.phz-info-rich .step:hover {
    border-color: rgba(42, 211, 234, 0.32);
    background: rgba(42, 211, 234, 0.04);
}
.phz-info-rich .step:hover::before {
    color: var(--cyan2);
    text-shadow: 0 0 24px rgba(42, 211, 234, 0.5);
}

.phz-info-rich .stat strong,
[data-phz-countup] {
    transition: text-shadow 0.4s ease;
}
.phz-info-rich .stat:hover strong,
[data-phz-countup]:hover {
    text-shadow: 0 0 32px rgba(42, 211, 234, 0.6);
}

.phz-info-rich .card,
.phz-info-rich .quote-card {
    transition: transform var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out);
}
.phz-info-rich .card:hover,
.phz-info-rich .quote-card:hover {
    transform: translateY(-4px);
    border-color: rgba(42, 211, 234, 0.45);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.45), 0 0 32px rgba(42, 211, 234, 0.08);
}

@media (prefers-reduced-motion: reduce) {
    .phz-info-rich .svg-inline { animation: none; }
    .phz-info-rich .card, .phz-info-rich .quote-card { transition: none; }
}

/* ============================================================
   v2.9.5 — Tesla + Rife callouts: VERTICAL stacking for clarity
   Old 2-col layout was cramming benefit tiles to ~80px on narrow
   containers. New design: 3D scene as a centered hero band on top,
   headline below it, full-width tile grid below.
   Works at any container width.
   ============================================================ */
.phz-info-rich .callout.has-3d-aside {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    align-items: stretch !important;
    grid-template-columns: none !important;
    padding: 28px !important;
}

/* The 3D scene becomes a centered banner on top, capped to ~180px so it
   reads as a "section icon" rather than dominating */
.phz-info-rich .callout.has-3d-aside > .phz-3d-portal-target--tesla,
.phz-info-rich .callout.has-3d-aside > .phz-3d-portal-target--rife {
    margin: 0 auto;
    width: 180px;
    max-width: 180px;
    grid-column: auto !important;
}

.phz-coil-3d, .phz-grid-3d {
    width: 180px !important;
    height: 180px !important;
    max-width: 180px !important;
    aspect-ratio: 1;
    margin: 0 auto;
    pointer-events: none;
}
.phz-coil-3d canvas, .phz-grid-3d canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}
.phz-coil-fallback, .phz-grid-fallback {
    width: 180px !important;
    height: 180px !important;
    aspect-ratio: 1;
    margin: 0 auto;
    opacity: 0.85;
}
.phz-coil-fallback svg, .phz-grid-fallback svg { width: 100%; height: 100%; }

/* Headline below 3D banner — centered, breathing room */
.phz-info-rich .callout.has-3d-aside > h3 {
    grid-column: auto !important;
    text-align: center;
    max-width: 640px;
    margin: 8px auto 4px !important;
}

/* Tiles in 3-col grid that gracefully falls to 1 col on narrow */
.phz-info-rich .callout.has-3d-aside .grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 16px !important;
    margin-top: 12px !important;
    grid-column: auto !important;
}
.phz-info-rich .callout.has-3d-aside .phz-benefit-tile {
    min-width: 0;
    padding: 20px !important;
}
.phz-info-rich .callout.has-3d-aside .phz-benefit-tile h4 {
    font-size: 18px;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: none;
}
.phz-info-rich .callout.has-3d-aside .phz-benefit-tile p {
    font-size: 14px;
    line-height: 1.55;
}

/* Override the original .callout's huge h3 size when has-3d-aside */
#root .phz-info-rich .callout.has-3d-aside h3 {
    font-size: clamp(28px, 3.4vw, 44px) !important;
    line-height: 1.05 !important;
    margin: 8px auto 4px !important;
}

/* Body copy inside the callout (the intro paragraph) */
.phz-info-rich .callout.has-3d-aside > p.copy {
    max-width: 720px;
    margin: 0 auto !important;
    text-align: center;
    grid-column: auto !important;
}

/* Footnote at bottom */
.phz-info-rich .callout.has-3d-aside > p.footnote {
    text-align: center;
    margin-top: 12px !important;
    grid-column: auto !important;
}

/* ============================================================
   v29 P9 — BIG hero orb on the right (Science + About)
   Make the right-column 3D scene dominant and "nice and tidy".
   ============================================================ */

/* Reshape the hero-grid: less LEFT, more RIGHT, more room for the orb */
.phz-info-rich .hero-grid {
    grid-template-columns: 1.05fr minmax(360px, 1.1fr);
    gap: 64px;
    align-items: center;
}

/* The right column becomes the orb stage. The portal target fills it. */
.phz-info-rich .hero .quote-stack {
    position: relative;
    isolation: isolate;
    min-height: 520px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 32px;
}

/* The orb fills the full stage area, NOT clipped by individual cards */
.phz-info-rich .hero .quote-stack > .phz-3d-portal-target--orb {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -1;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.phz-info-rich .hero .quote-stack > .phz-3d-portal-target--orb .phz-orb-3d {
    width: 100%;
    height: 100%;
    max-width: 100%;
    aspect-ratio: auto;
}
.phz-info-rich .hero .quote-stack > .phz-3d-portal-target--orb canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Quote cards become compact bottom overlays — they no longer dominate */
.phz-info-rich .hero .quote-card {
    backdrop-filter: blur(8px);
    background: linear-gradient(180deg, rgba(8, 8, 8, 0.58), rgba(8, 8, 8, 0.32));
    border-color: rgba(42, 211, 234, 0.22);
    padding: 18px 22px;
    position: relative;
    z-index: 1;
}
.phz-info-rich .hero .quote-card p {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 6px;
}
.phz-info-rich .hero .quote-card svg { display: none; }

@media (max-width: 980px) {
    .phz-info-rich .hero-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .phz-info-rich .hero .quote-stack {
        min-height: 380px;
    }
}

/* ============================================================
   v29 P10 — Particle bg shows through info pages + orb visibility fix
   ============================================================ */

/* The extracted CSS gave .phz-info-rich an opaque #080808 background that
   blocks the fixed ShaderBackground canvas. Make all info-page surfaces
   transparent or rgba so particles drift behind everything. */
.phz-info-rich {
    background: transparent !important;
}
.phz-info-rich .hero {
    background:
        radial-gradient(circle at 75% 20%, rgba(42, 211, 234, 0.16), transparent 34%),
        radial-gradient(circle at 15% 70%, rgba(42, 211, 234, 0.07), transparent 36%),
        rgba(8, 8, 8, 0.55) !important;
}
.phz-info-rich .section.alt {
    background: linear-gradient(180deg, rgba(11, 11, 11, 0.55), rgba(8, 8, 8, 0.45)) !important;
}
.phz-info-rich .section {
    background: rgba(8, 8, 8, 0.25);
}

/* Body wrapper for Science/About hosts — let bg through */
.phz-science-3d-host,
.phz-about-3d-host {
    background: transparent;
}

/* ============================================================
   v29 P12 — FORCE 2-col hero. The huge headline was stretching the
   left column past its grid track because grid items default to
   min-width:auto. Lock columns to 1fr 1fr with min-width:0 so the
   right column can never collapse below the orb's needs.
   ============================================================ */
.phz-info-rich .hero-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 56px !important;
    align-items: center !important;
    min-height: 600px;
}
.phz-info-rich .hero-grid > * {
    min-width: 0 !important;
}
/* Cap the headline so it can't push the left column past its track */
.phz-info-rich .hero h1,
.phz-info-rich .hero h1.hero-title {
    max-width: 100%;
}
.phz-info-rich .hero h1 .title-line {
    white-space: normal !important; /* let it wrap if needed */
}

@media (max-width: 980px) {
    .phz-info-rich .hero-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================
   v29 P11 — 3D is the DOMINANT hero visual, not background filler.
   Quote-cards are removed from the hero (they were drowning the
   3D scene with z-index 2). The orb fills the entire right column
   so the empty space is filled with the audio-reactive sphere.
   ============================================================ */

/* ============================================================
   v29 P13 — Hero side-by-side (text LEFT | orb-on-top + cards-below RIGHT)
   - Quote-cards are BACK (user liked them)
   - Right column = vertical flex column: orb at top (big), cards stacked below
   - LEFT and RIGHT vertically centered, true side-by-side
   ============================================================ */
.phz-info-rich .hero .quote-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    min-height: 560px;
    padding: 0;
    margin: 0;
    isolation: auto;
    position: relative;
    justify-content: stretch;
}

/* The orb takes the top portion of the right column with explicit height */
.phz-info-rich .hero .quote-stack > .phz-3d-portal-target--orb {
    position: relative !important;
    inset: auto !important;
    z-index: 1 !important;
    flex: 0 0 380px;
    width: 100%;
    height: 380px;
    min-height: 380px;
    margin: 0 0 6px 0;
    display: block;
    order: 0;
}
.phz-info-rich .hero .phz-3d-portal-target--orb .phz-orb-3d {
    width: 100%;
    height: 100%;
    min-height: 380px;
    aspect-ratio: auto;
}
.phz-info-rich .hero .phz-3d-portal-target--orb .phz-orb-3d canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Quote-cards: compact, stacked below the orb in the right column */
.phz-info-rich .hero .quote-card {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 12px 16px !important;
    background: linear-gradient(180deg, rgba(8, 8, 8, 0.62), rgba(8, 8, 8, 0.38)) !important;
    border: 1px solid rgba(42, 211, 234, 0.22) !important;
    box-shadow: none !important;
    z-index: 2;
    position: relative;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    width: auto !important;
    overflow: visible !important;
}
.phz-info-rich .hero .quote-card p {
    font-size: 12px !important;
    line-height: 1.45 !important;
    margin: 0 !important;
    color: rgba(245, 240, 232, 0.82) !important;
    flex: 1;
}
.phz-info-rich .hero .quote-card span {
    font-size: 9px !important;
    letter-spacing: 0.15em !important;
    flex-shrink: 0;
    white-space: nowrap;
    color: var(--cyan);
}
.phz-info-rich .hero .quote-card svg {
    display: none !important;
}

@media (max-width: 980px) {
    .phz-info-rich .hero .quote-stack { min-height: auto; }
    .phz-info-rich .hero .phz-3d-portal-target--orb,
    .phz-info-rich .hero .phz-3d-portal-target--orb .phz-orb-3d {
        height: 280px;
        min-height: 280px;
        flex-basis: 280px;
    }
}

/* The fixed background canvas — slightly brighter so it's visible through 0.55 black */
.phz-3d-bg {
    opacity: 0.85;
}

/* Also: make sure Home page sections don't hide the global bg */
.phz-hero,
.phz-frequency-strip,
.phz-system-section,
.phz-testimonials-v29 {
    position: relative;
}
.phz-hero { background: transparent !important; }

/* ============================================================
   v29 P14 — FINAL OVERRIDE
   Earlier v28 CSS used `#root .phz-info-rich .hero-grid` selectors
   that forced single-column layout. They have ID specificity that
   beat our class+!important. Override with same ID prefix to win.
   ============================================================ */
#root .phz-info-rich .hero-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 56px !important;
    align-items: center !important;
    min-height: 600px !important;
}
#root .phz-info-rich .hero-grid > * {
    min-width: 0 !important;
    max-width: 100% !important;
    width: auto !important;
}
#root .phz-info-rich .hero-grid > div:first-child {
    max-width: 100% !important;
    width: auto !important;
}

/* The headline must respect its column track — never push past it */
#root .phz-info-rich .hero h1,
#root .phz-info-rich .hero h1.hero-title {
    max-width: 100% !important;
    font-size: clamp(48px, 5.5vw, 88px) !important;
    line-height: 0.92 !important;
    overflow-wrap: anywhere;
}
#root .phz-info-rich .title-line {
    white-space: normal !important;
    display: inline !important;
}

/* Right column quote-stack: vertical flex (orb on top + cards below) */
#root .phz-info-rich .hero .quote-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    min-height: 560px !important;
    align-items: stretch !important;
    isolation: auto !important;
}
#root .phz-info-rich .hero .quote-stack > .phz-3d-portal-target--orb {
    flex: 0 0 380px !important;
    width: 100% !important;
    height: 380px !important;
    min-height: 380px !important;
    position: relative !important;
    inset: auto !important;
    z-index: 1 !important;
}
#root .phz-info-rich .hero .phz-3d-portal-target--orb .phz-orb-3d {
    width: 100% !important;
    height: 100% !important;
    min-height: 380px !important;
    aspect-ratio: auto !important;
}

/* Cards: compact and visible BELOW the orb in the right column */
#root .phz-info-rich .hero .quote-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    background: linear-gradient(180deg, rgba(8, 8, 8, 0.62), rgba(8, 8, 8, 0.38)) !important;
    border: 1px solid rgba(42, 211, 234, 0.22) !important;
    box-shadow: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 2 !important;
}
#root .phz-info-rich .hero .quote-card p {
    font-size: 12px !important;
    line-height: 1.45 !important;
    margin: 0 !important;
    color: rgba(245, 240, 232, 0.82) !important;
    flex: 1 !important;
}
#root .phz-info-rich .hero .quote-card span {
    font-size: 9px !important;
    letter-spacing: 0.15em !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}
#root .phz-info-rich .hero .quote-card svg {
    display: none !important;
}

@media (max-width: 980px) {
    #root .phz-info-rich .hero-grid {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
    }
    #root .phz-info-rich .hero .quote-stack {
        min-height: auto !important;
    }
    #root .phz-info-rich .hero .quote-stack > .phz-3d-portal-target--orb {
        flex-basis: 280px !important;
        height: 280px !important;
        min-height: 280px !important;
    }
    #root .phz-info-rich .hero .phz-3d-portal-target--orb .phz-orb-3d {
        min-height: 280px !important;
    }
}

/* ============================================================
   v2.9.3 — WooCommerce pages styling
   Comprehensive theming for checkout / cart / my-account / login
   so the UX matches the brand AND remains fully readable.
   ============================================================ */

/* Body context — these pages aren't rendered by our React app, so they
   need their own padding-top to clear the fixed nav (72px) */
body.woocommerce,
body.woocommerce-page,
body.woocommerce-checkout,
body.woocommerce-cart,
body.woocommerce-account,
body.woocommerce-order-received {
    background: var(--surface-1) !important;
    color: var(--text-2) !important;
    font-family: var(--font-body) !important;
}

body.woocommerce .site-content,
body.woocommerce-page .site-content,
body.woocommerce > main,
body.woocommerce-page > main,
.woocommerce > .wp-content,
.woocommerce-page > .wp-content {
    padding-top: calc(var(--nav-height, 72px) + var(--space-12)) !important;
    padding-bottom: var(--space-24) !important;
    max-width: var(--container, 1180px);
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--gutter, 24px);
    padding-right: var(--gutter, 24px);
    color: var(--text-2);
}

/* Headings */
.woocommerce h1, .woocommerce h2, .woocommerce h3,
.woocommerce-page h1, .woocommerce-page h2, .woocommerce-page h3,
.woocommerce .checkout h3, .woocommerce-checkout h1 {
    font-family: var(--font-display) !important;
    color: var(--text-1) !important;
    letter-spacing: var(--tracking-display);
    line-height: var(--lh-snug);
}
.woocommerce h1 { font-size: var(--fs-h1); margin-bottom: var(--space-8); }
.woocommerce h2 { font-size: var(--fs-h2); margin: var(--space-8) 0 var(--space-5); }
.woocommerce h3 { font-size: var(--fs-h3); margin: var(--space-6) 0 var(--space-4); }

/* Form labels */
.woocommerce form .form-row label,
.woocommerce-page form .form-row label,
.woocommerce label,
.woocommerce-checkout label,
.woocommerce .form-row label {
    color: var(--text-2) !important;
    font-family: var(--font-body) !important;
    font-size: var(--fs-small);
    font-weight: 500;
    margin-bottom: var(--space-2);
    display: block;
}

.woocommerce form .form-row label.checkbox,
.woocommerce form .form-row label.inline {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

/* Required asterisk */
.woocommerce .required, .woocommerce abbr.required {
    color: var(--signal) !important;
    border: none !important;
    text-decoration: none !important;
}

/* Form fields */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea,
.woocommerce-page form .form-row select,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="number"],
.woocommerce input[type="password"],
.woocommerce input[type="search"],
.woocommerce textarea,
.woocommerce select,
.select2-container .select2-selection--single {
    background: var(--surface-2) !important;
    border: 1px solid var(--border-2) !important;
    color: var(--text-1) !important;
    font-family: var(--font-body) !important;
    font-size: var(--fs-body) !important;
    padding: var(--space-3) var(--space-4) !important;
    min-height: 48px !important;
    line-height: 1.4 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: border-color var(--dur-base), box-shadow var(--dur-base);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce input:focus, .woocommerce textarea:focus, .woocommerce select:focus,
.select2-container--default .select2-selection--single:focus {
    border-color: var(--signal) !important;
    box-shadow: 0 0 0 3px var(--signal-dim) !important;
    outline: none !important;
}

.woocommerce input::placeholder, .woocommerce textarea::placeholder {
    color: var(--text-4) !important;
}

/* Select2 (used by WC country/state dropdowns) */
.select2-container--default .select2-selection--single {
    background: var(--surface-2) !important;
    border: 1px solid var(--border-2) !important;
    color: var(--text-1) !important;
    height: 48px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-1) !important;
    line-height: 46px !important;
    padding-left: var(--space-4) !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 46px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--signal) transparent transparent transparent !important;
}
.select2-dropdown {
    background: var(--surface-2) !important;
    border: 1px solid var(--border-2) !important;
    color: var(--text-1) !important;
}
.select2-results__option {
    color: var(--text-2) !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--signal-dim) !important;
    color: var(--text-1) !important;
}

/* Buttons */
.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit,
.woocommerce-page a.button, .woocommerce-page button.button,
.woocommerce-page input.button, .woocommerce-page #respond input#submit,
.woocommerce a.button.alt, .woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce-page #respond input#submit.alt {
    background: var(--signal) !important;
    color: var(--signal-on) !important;
    font-family: var(--font-body) !important;
    font-weight: 700 !important;
    font-size: var(--fs-meta) !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    padding: var(--space-4) var(--space-8) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: var(--signal-glow) !important;
    transition: background var(--dur-base), transform var(--dur-fast);
    text-decoration: none !important;
    cursor: pointer;
    line-height: 1.2 !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover {
    background: var(--signal-bright) !important;
    transform: translateY(-1px);
}

/* Order review table */
.woocommerce-checkout-review-order,
.woocommerce-checkout-review-order-table {
    background: var(--surface-2);
    border: 1px solid var(--border-2);
    padding: var(--space-6);
}
.woocommerce table.shop_table,
.woocommerce-page table.shop_table {
    background: transparent !important;
    border: none !important;
    color: var(--text-2);
    border-collapse: collapse;
    width: 100%;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td,
.woocommerce-page table.shop_table th,
.woocommerce-page table.shop_table td {
    background: transparent !important;
    border-bottom: 1px solid var(--border-1) !important;
    color: var(--text-2) !important;
    padding: var(--space-4) var(--space-2) !important;
}
.woocommerce table.shop_table th,
.woocommerce-page table.shop_table th {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    color: var(--signal) !important;
    text-align: left;
}
.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td,
.woocommerce-page table.shop_table tfoot th,
.woocommerce-page table.shop_table tfoot td {
    font-size: var(--fs-body);
    color: var(--text-1) !important;
}
.woocommerce table.shop_table tfoot .order-total .amount,
.woocommerce-page table.shop_table tfoot .order-total .amount {
    color: var(--signal) !important;
    font-family: var(--font-display);
    font-size: var(--fs-h3);
}

/* Payment methods box */
.woocommerce #payment, .woocommerce-checkout #payment,
.woocommerce-page #payment {
    background: var(--surface-2) !important;
    border: 1px solid var(--border-2) !important;
    border-radius: 0 !important;
    padding: var(--space-6);
    margin-top: var(--space-6);
}
.woocommerce #payment ul.payment_methods,
.woocommerce-page #payment ul.payment_methods {
    background: transparent !important;
    border-bottom: 1px solid var(--border-1) !important;
    padding: 0 0 var(--space-4) !important;
}
.woocommerce #payment ul.payment_methods li,
.woocommerce-page #payment ul.payment_methods li {
    color: var(--text-2);
    padding: var(--space-3) 0;
}
.woocommerce #payment ul.payment_methods li label,
.woocommerce-page #payment ul.payment_methods li label {
    color: var(--text-1) !important;
    font-weight: 600;
    cursor: pointer;
}
.woocommerce #payment div.payment_box,
.woocommerce-page #payment div.payment_box {
    background: var(--surface-1) !important;
    color: var(--text-3) !important;
    border: 1px solid var(--border-1) !important;
    margin-top: var(--space-3) !important;
}
.woocommerce #payment div.payment_box::before,
.woocommerce-page #payment div.payment_box::before {
    border-bottom-color: var(--surface-1) !important;
}

/* Place order button */
.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order {
    background: var(--signal) !important;
    color: var(--signal-on) !important;
    font-size: var(--fs-body) !important;
    padding: var(--space-4) var(--space-12) !important;
    width: 100%;
    margin-top: var(--space-4);
}

/* Notices (error/success/info) */
.woocommerce-message, .woocommerce-info,
.woocommerce-error, .woocommerce-noreviews,
p.no-comments {
    background: var(--surface-2) !important;
    border-top: 3px solid var(--signal) !important;
    color: var(--text-2) !important;
    padding: var(--space-4) var(--space-5) !important;
    margin-bottom: var(--space-5) !important;
}
.woocommerce-error {
    border-top-color: var(--error) !important;
}
.woocommerce-message {
    border-top-color: var(--success) !important;
}

/* Coupon form */
.woocommerce-form-coupon-toggle .woocommerce-info,
.checkout_coupon {
    background: var(--surface-2) !important;
    border: 1px solid var(--border-2) !important;
    border-top: 1px solid var(--border-2) !important;
}
.checkout_coupon button {
    margin-top: var(--space-2) !important;
}

/* Login form on checkout */
.woocommerce-form-login-toggle .woocommerce-info {
    background: var(--surface-2) !important;
    border-top-color: var(--signal) !important;
}
.woocommerce-form-login {
    background: var(--surface-2) !important;
    border: 1px solid var(--border-2) !important;
    padding: var(--space-6) !important;
    margin-top: var(--space-4);
}

/* My Account navigation */
.woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-8);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    border-bottom: 1px solid var(--border-1);
}
.woocommerce-MyAccount-navigation ul li {
    background: transparent;
}
.woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: var(--space-3) var(--space-5);
    color: var(--text-3) !important;
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-bottom: 2px solid transparent;
    transition: color var(--dur-base), border-color var(--dur-base);
}
.woocommerce-MyAccount-navigation ul li a:hover {
    color: var(--text-1) !important;
}
.woocommerce-MyAccount-navigation ul li.is-active a {
    color: var(--signal) !important;
    border-bottom-color: var(--signal);
}

/* Cart table */
.woocommerce-cart-form .product-thumbnail img {
    max-width: 64px;
    height: auto;
    border: 1px solid var(--border-1);
}
.woocommerce-cart-form .product-name a {
    color: var(--text-1) !important;
    text-decoration: none;
    font-weight: 600;
}
.woocommerce-cart-form .product-name a:hover {
    color: var(--signal) !important;
}
.woocommerce .quantity input.qty {
    width: 80px !important;
    text-align: center;
}
.woocommerce a.remove {
    color: var(--error) !important;
    background: transparent !important;
    border: 1px solid var(--border-1) !important;
    width: 28px !important;
    height: 28px !important;
    line-height: 26px !important;
    border-radius: 50% !important;
}
.woocommerce a.remove:hover {
    background: var(--error) !important;
    color: var(--text-1) !important;
}

/* Cart totals box */
.cart_totals, .woocommerce-shipping-totals {
    background: var(--surface-2);
    border: 1px solid var(--border-2);
    padding: var(--space-6);
}
.cart_totals h2 {
    margin-top: 0 !important;
}

/* Order received page */
.woocommerce-order-received .woocommerce-thankyou-order-received {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    color: var(--text-1) !important;
    margin: var(--space-12) 0 var(--space-6);
}
.woocommerce-order-received .woocommerce-order-overview {
    background: var(--surface-2);
    border: 1px solid var(--border-2);
    padding: var(--space-6);
    list-style: none;
    margin: 0 0 var(--space-8);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-5);
}
.woocommerce-order-received .woocommerce-order-overview li {
    color: var(--text-3);
    font-size: var(--fs-small);
    border: none !important;
}
.woocommerce-order-received .woocommerce-order-overview li strong {
    display: block;
    color: var(--text-1);
    font-size: var(--fs-body);
    margin-top: var(--space-1);
}

/* Address blocks on my-account */
.woocommerce-Addresses .col {
    background: var(--surface-2);
    border: 1px solid var(--border-2);
    padding: var(--space-6);
}
.woocommerce-Addresses address {
    color: var(--text-3);
    font-style: normal;
    line-height: var(--lh-body);
}

/* Mobile: stack everything */
@media (max-width: 768px) {
    body.woocommerce .site-content,
    body.woocommerce-page .site-content {
        padding-left: var(--space-4) !important;
        padding-right: var(--space-4) !important;
    }
    .woocommerce form .form-row {
        width: 100% !important;
        float: none !important;
    }
    .woocommerce .col2-set, .woocommerce-page .col2-set {
        display: block !important;
    }
    .woocommerce .col2-set .col-1,
    .woocommerce .col2-set .col-2 {
        width: 100% !important;
        float: none !important;
    }
}

/* ============================================================
   v2.9.6 — Customer Portal styling
   For PrimalHz Customer Access Portal + Security Vault
   [primalhz_user_access] shortcode + custom My Account areas
   ============================================================ */

/* Catch-all for any PrimalHz portal/access UI */
[class*="primalhz-access"],
[class*="primalhz-user"],
[class*="primalhz-library"],
[class*="primalhz-license"],
[class*="primalhz-portal"],
.primalhz-frequency-card,
.primalhz-download-card,
.primalhz-vault-item {
    color: var(--text-2);
    font-family: var(--font-body);
}

/* License + access level display (likely outputs of [primalhz_user_access]) */
.primalhz-license-block,
.primalhz-access-block,
.primalhz-user-license {
    background: linear-gradient(180deg, rgba(42, 211, 234, 0.06), rgba(42, 211, 234, 0.02));
    border: 1px solid var(--border-2);
    padding: var(--space-6) var(--space-8);
    margin-bottom: var(--space-6);
    position: relative;
    overflow: hidden;
}
.primalhz-license-block::before,
.primalhz-access-block::before,
.primalhz-user-license::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--signal), var(--signal-bright), var(--signal));
}

/* License code styling — important visual element */
.primalhz-license-code,
.primalhz-license-key,
code.primalhz-license,
.primalhz-buyer-license {
    font-family: var(--font-mono) !important;
    font-size: var(--fs-body) !important;
    background: var(--surface-1) !important;
    color: var(--signal) !important;
    border: 1px solid var(--border-2) !important;
    padding: var(--space-3) var(--space-5) !important;
    letter-spacing: 0.16em !important;
    display: inline-block;
    user-select: all;
}

/* Access level badges */
.primalhz-access-level,
.primalhz-tier,
.primalhz-access-badge {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    background: var(--signal-dim);
    border: 1px solid var(--signal);
    color: var(--signal);
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
}

/* Library / frequency cards (the "My Frequencies" experience) */
.primalhz-library,
.primalhz-frequencies-list,
.primalhz-vault {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-5);
    margin-top: var(--space-6);
}

.primalhz-frequency-card,
.primalhz-vault-item,
.primalhz-download-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
    border: 1px solid var(--border-2);
    padding: var(--space-6);
    transition: border-color var(--dur-base), transform var(--dur-base);
}
.primalhz-frequency-card:hover,
.primalhz-vault-item:hover,
.primalhz-download-card:hover {
    border-color: var(--border-3);
    transform: translateY(-2px);
}
.primalhz-frequency-card h3,
.primalhz-vault-item h3,
.primalhz-download-card h3 {
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    color: var(--text-1);
    letter-spacing: var(--tracking-display);
    margin: 0 0 var(--space-3);
}
.primalhz-frequency-card .download-link,
.primalhz-frequency-card a.button,
.primalhz-vault-item a.button,
.primalhz-download-card a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

/* Duration buttons (1min, 5min, 10min, 30min, 1hr) */
.primalhz-durations,
.primalhz-download-durations {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
}
.primalhz-durations a,
.primalhz-durations button,
.primalhz-download-durations a {
    padding: var(--space-2) var(--space-4) !important;
    font-size: var(--fs-meta) !important;
    background: var(--surface-1) !important;
    border: 1px solid var(--border-2) !important;
    color: var(--text-2) !important;
    text-decoration: none;
    transition: all var(--dur-base);
    font-family: var(--font-mono);
    letter-spacing: 0.08em;
}
.primalhz-durations a:hover,
.primalhz-download-durations a:hover {
    border-color: var(--signal) !important;
    color: var(--signal) !important;
    background: var(--signal-dim) !important;
}

/* Locked frequency state (not purchased) */
.primalhz-locked,
.primalhz-frequency-card.locked,
.primalhz-vault-item.locked {
    opacity: 0.5;
    position: relative;
}
.primalhz-locked::after,
.primalhz-frequency-card.locked::after {
    content: '🔒';
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    font-size: 22px;
}

/* "Unlocked" cyan accent state */
.primalhz-unlocked,
.primalhz-frequency-card.unlocked {
    border-left: 3px solid var(--signal);
}

/* Generator access card */
.primalhz-generator-access,
.primalhz-generator-status {
    background: var(--surface-2);
    border: 1px solid var(--border-2);
    padding: var(--space-6);
    margin: var(--space-6) 0;
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex-wrap: wrap;
}
.primalhz-generator-access::before,
.primalhz-generator-status::before {
    content: '⚙️';
    font-size: 32px;
    flex-shrink: 0;
}

/* Download limits info block (security vault patterns) */
.primalhz-limits,
.primalhz-download-limits,
.primalhz-quota {
    background: rgba(245, 158, 11, 0.06);
    border: 1px solid rgba(245, 158, 11, 0.2);
    padding: var(--space-4) var(--space-5);
    font-size: var(--fs-small);
    margin: var(--space-5) 0;
    color: var(--text-2);
}
.primalhz-limits strong,
.primalhz-quota strong {
    color: var(--warning);
}

/* Access logs (admin view of vault activity) */
.primalhz-access-logs,
table.primalhz-logs {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface-2);
    border: 1px solid var(--border-2);
    margin-top: var(--space-5);
}
.primalhz-access-logs th,
table.primalhz-logs th {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    color: var(--signal);
    background: var(--surface-3);
    padding: var(--space-3) var(--space-4);
    text-align: left;
}
.primalhz-access-logs td,
table.primalhz-logs td {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border-1);
    color: var(--text-3);
    font-size: var(--fs-small);
}

/* My-Account dashboard tweaks for primalhz logged-in customer */
.woocommerce-account .woocommerce-MyAccount-content {
    background: var(--surface-2);
    border: 1px solid var(--border-2);
    padding: var(--space-8);
    margin-top: var(--space-5);
}

.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
    margin-top: 0;
}

/* Dashboard greeting */
.woocommerce-MyAccount-content > p:first-of-type {
    font-size: var(--fs-lead);
    color: var(--text-2);
    line-height: var(--lh-body);
    margin-bottom: var(--space-6);
}

/* Welcome / status block on logged in My Account */
.woocommerce-account .woocommerce-MyAccount-content::before {
    content: '';
    display: block;
    width: 32px;
    height: 1px;
    background: var(--signal);
    margin-bottom: var(--space-6);
}

@media (max-width: 768px) {
    .primalhz-library,
    .primalhz-frequencies-list,
    .primalhz-vault {
        grid-template-columns: 1fr;
    }
    .primalhz-license-code {
        word-break: break-all;
        font-size: var(--fs-small) !important;
    }
}