/**
 * PM Media — feng shui layout harmony
 * Golden-ratio spacing · clear zones · balanced hero · no floating collisions
 */

:root {
  --fs-phi: 1.618;
  --fs-space-1: 0.5rem;    /* 8px */
  --fs-space-2: 0.8125rem; /* 13px */
  --fs-space-3: 1.3125rem; /* 21px */
  --fs-space-4: 2.125rem;  /* 34px */
  --fs-space-5: 3.4375rem; /* 55px */
  --fs-gutter: clamp(1.25rem, 4vw, 2.125rem);
  --fs-read: 38rem;
  --fs-header-offset: 4.75rem;
  --fs-sticky-extra: 0px;
  --fs-float-stack: calc(var(--pm-dock-offset, 5.25rem) + var(--fs-sticky-extra) + var(--fs-space-2));
  --fs-edge-left: max(1rem, env(safe-area-inset-left));
  --fs-edge-right: max(1rem, env(safe-area-inset-right));
}

body.pm-sticky-on {
  --fs-sticky-extra: 4.25rem;
}

body.pm-owner-bar-on {
  --fs-header-offset: 7rem;
}

/* ── Page rhythm ── */
.container {
  max-width: min(1180px, 100%);
  padding-inline: var(--fs-gutter);
}

.section {
  padding-block: clamp(var(--fs-space-5), 10vw, calc(var(--fs-space-5) * 1.15));
}

main[id],
section[id],
[id="book"],
[id="hero"] {
  scroll-margin-top: calc(var(--fs-header-offset) + var(--fs-space-2));
}

.lead,
.hero .lead {
  max-width: var(--fs-read);
}

.text-center.mx-auto {
  max-width: var(--fs-read);
}

/* ── Header — clear zones, no overlap ── */
.site-header {
  z-index: 200;
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  row-gap: 0.65rem;
  column-gap: 0.85rem;
  padding-block: 0.65rem;
  padding-inline: var(--fs-gutter);
  max-width: min(1280px, 100%);
}

.site-header .logo--image {
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(200px, 46vw);
  line-height: 0;
}

.nav-main {
  display: none !important;
  flex: 1 1 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.45rem 0.85rem;
  order: 10;
  padding-top: 0.35rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.nav-main a {
  white-space: nowrap;
  font-size: 0.72rem;
  padding: 0.2rem 0;
}

.header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem 0.55rem;
  flex: 1 1 auto;
  min-width: 0;
  margin-left: auto;
}

.header-actions > * {
  flex-shrink: 0;
}

.lang-switch {
  flex-shrink: 0;
  display: inline-flex;
}

.lang-switch button {
  min-width: 2.35rem;
  padding: 0.42rem 0.7rem;
}

.nav-toggle {
  flex-shrink: 0;
}

.header-actions .btn {
  white-space: nowrap;
  min-height: 40px;
  padding-inline: 0.85rem;
  font-size: 0.68rem;
}

.header-actions .btn-sm {
  min-height: 38px;
  padding-inline: 0.75rem;
  font-size: 0.65rem;
}

/* Menu mode — hide inline nav, show hamburger */
@media (max-width: 1399px) {
  .nav-main {
    display: none !important;
  }

  .nav-toggle {
    display: inline-flex !important;
  }

  .header-actions #pm-guide-open,
  .header-actions [data-connect-open] {
    display: none;
  }
}

@media (min-width: 600px) {
  .site-header .logo--image {
    max-width: min(240px, 34vw);
  }
}

@media (min-width: 900px) {
  .site-header .logo--image {
    max-width: min(260px, 24vw);
  }

  .header-actions {
    gap: 0.45rem 0.65rem;
  }
}

/* Wide desktop — nav on its own row, full width */
@media (min-width: 1400px) {
  .site-header .logo--image {
    max-width: min(280px, 16vw);
  }

  .nav-main {
    display: flex !important;
    order: 10;
    flex: 1 1 100%;
  }

  .nav-toggle {
    display: none !important;
  }

  .header-actions #pm-guide-open,
  .header-actions [data-connect-open] {
    display: inline-flex;
  }
}

@media (max-width: 520px) {
  .header-inner {
    flex-direction: column;
    align-items: stretch;
  }

  .site-header .logo--image {
    align-self: center;
    max-width: min(220px, 72vw);
  }

  .header-actions {
    justify-content: center;
    margin-left: 0;
    width: 100%;
  }
}

/* ── Hero — welcoming visual + clear message flow ── */
.hero {
  padding-block: clamp(var(--fs-space-5), 11vw, calc(var(--fs-space-5) * 1.35));
  min-height: min(92vh, 920px);
  display: flex;
  align-items: center;
}

.hero > .container {
  width: 100%;
}

.hero-grid {
  gap: clamp(var(--fs-space-4), 5vw, var(--fs-space-5));
  align-items: center;
}

@media (max-width: 899px) {
  .hero-grid {
    display: flex;
    flex-direction: column;
  }

  .hero-visual {
    order: -1;
    width: 100%;
  }

  .hero-grid > div:first-child {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hero-cta,
  .convo-chips {
    justify-content: center;
  }
}

@media (min-width: 900px) {
  .hero-grid > div:first-child {
    padding-right: var(--fs-space-2);
  }

  .hero-visual {
    padding-left: var(--fs-space-2);
  }
}

.hero-visual {
  gap: var(--fs-space-3);
  justify-content: center;
}

.hero-logo-wrap {
  width: 100%;
  max-width: min(760px, 96vw);
  padding: var(--fs-space-2);
  margin-inline: auto;
}

.hero-stat-card {
  max-width: min(760px, 96vw);
  margin-inline: auto;
}

.hero-cta {
  gap: var(--fs-space-2);
  margin-top: var(--fs-space-4);
}

.hero-convo {
  margin-top: var(--fs-space-3);
  width: 100%;
  max-width: var(--fs-read);
}

.convo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fs-space-1);
}

/* ── Floating zones — left info · right chat · center dock ── */
.pm-live-demand {
  left: var(--fs-edge-left) !important;
  bottom: var(--fs-float-stack) !important;
  max-width: min(320px, calc(100vw - 7.5rem)) !important;
  z-index: 8480 !important;
}

.pm-live-demand-toast {
  left: var(--fs-edge-left) !important;
  bottom: calc(var(--fs-float-stack) + 5.5rem) !important;
  z-index: 8475 !important;
}

.chat-widget {
  right: var(--fs-edge-right) !important;
  bottom: var(--fs-float-stack) !important;
  z-index: 8490 !important;
}

.pm-util-stack--left {
  left: var(--fs-edge-left) !important;
  bottom: calc(var(--fs-float-stack) + 4.5rem) !important;
  z-index: 8470 !important;
}

.a11y-panel {
  left: var(--fs-edge-left) !important;
  bottom: calc(var(--fs-float-stack) + 9.5rem) !important;
}

.pm-action-dock {
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: calc(var(--fs-space-2) + env(safe-area-inset-bottom, 0px)) !important;
  max-width: calc(100vw - var(--fs-space-4));
  justify-content: center;
  gap: var(--fs-space-1);
  padding: var(--fs-space-1) var(--fs-space-2);
  z-index: 8400 !important;
}

/* Sticky CTA sits between dock and content */
.pm-sticky-cta {
  z-index: 8350 !important;
  padding: var(--fs-space-2) var(--fs-gutter) calc(var(--fs-space-2) + env(safe-area-inset-bottom));
}

.pm-sticky-cta-inner {
  max-width: min(520px, 100%);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fs-space-1);
  text-align: center;
}

.pm-sticky-cta-urgency {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-soft);
}

.pm-sticky-cta.is-urgent .pm-sticky-cta-urgency {
  color: var(--magenta);
}

.pm-sticky-cta .btn {
  width: 100%;
}

/* Action pressure — centered above dock */
.pm-action-milestone {
  position: fixed;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  bottom: calc(var(--fs-float-stack) + 1rem);
  z-index: 8460;
  max-width: min(420px, calc(100vw - 2rem));
  padding: var(--fs-space-2) var(--fs-space-3);
  text-align: center;
  background: rgba(10, 12, 22, 0.96);
  border: 1px solid rgba(140, 80, 255, 0.35);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}

.pm-action-milestone.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.pm-action-milestone p {
  margin: 0 0 var(--fs-space-2);
  font-size: 0.82rem;
  line-height: 1.45;
}

.pm-action-idle {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -48%);
  width: min(420px, calc(100vw - 2rem));
  padding: var(--fs-space-4) var(--fs-space-3);
  background: var(--bg-elevated);
  border: 1px solid var(--border-accent);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: var(--shadow-lift);
  z-index: 9200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.35s var(--ease-out);
  text-align: center;
}

.pm-action-idle::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(4, 4, 10, 0.72);
  backdrop-filter: blur(8px);
  z-index: -1;
}

.pm-action-idle.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.pm-action-idle-x {
  position: absolute;
  top: var(--fs-space-2);
  right: var(--fs-space-2);
  border: none;
  background: none;
  color: var(--text-soft);
  font-size: 1.35rem;
  cursor: pointer;
  line-height: 1;
}

.pm-action-idle-eyebrow {
  margin: 0 0 var(--fs-space-1);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan);
}

.pm-action-idle-body {
  margin: 0 0 var(--fs-space-3);
  font-size: 0.92rem;
  line-height: 1.5;
}

.pm-action-idle-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fs-space-2);
  justify-content: center;
  margin-bottom: var(--fs-space-2);
}

.pm-action-idle-dismiss {
  border: none;
  background: none;
  color: var(--text-soft);
  font-size: 0.75rem;
  cursor: pointer;
  text-decoration: underline;
}

/* Cards & grids — even breathing room */
.card-grid,
.engine-grid,
.tier-ladder-grid,
.biz-hub-grid,
.playbook-grid {
  gap: var(--fs-space-3);
}

.form-section {
  padding-bottom: calc(var(--pm-dock-offset, 5.25rem) + var(--fs-sticky-extra) + var(--fs-space-5));
}

/* Owner bar alignment */
.pm-owner-bar-inner {
  max-width: min(1180px, 100%);
  padding-inline: var(--fs-gutter);
}

@media (max-width: 768px) {
  .pm-live-demand {
    max-width: calc(100vw - var(--fs-space-4)) !important;
  }

  .pm-live-demand-toast {
    max-width: calc(100vw - var(--fs-space-4)) !important;
    bottom: calc(var(--fs-float-stack) + 4.75rem) !important;
  }

  .chat-widget {
    right: var(--fs-edge-right) !important;
  }

  .site-header .logo--image {
    max-width: min(220px, 58vw);
  }

  .hero-logo-wrap {
    max-width: min(680px, 94vw);
  }

  .pm-action-dock {
    flex-wrap: wrap;
    border-radius: var(--radius);
    max-width: calc(100vw - var(--fs-space-3));
  }
}

html[data-a11y-reduce-motion="true"] .pm-action-milestone,
html[data-a11y-reduce-motion="true"] .pm-action-idle {
  transition: none !important;
}