/* ============================================================================
   Phersona — Prelaunch waitlist · full-bleed editorial layout (v2)
   Reference register: Good Fella (award-grade, typography-led, full-width,
   generous negative space, kinetic). Built strictly on the Indigo Ink SEMANTIC
   tokens (tokens.css) + ph- components (components.css). No hardcoded hex.

   Five movements: 01 Hero · 02 The problem · 03 What people keep saying ·
   04 Outcomes · 05 Join the waitlist. Calm · Confident · Accountable.
   ========================================================================== */

/* --- Page frame ----------------------------------------------------------- */
:root {
  /* edge gutter: the breathing room down both sides. Everything aligns to this. */
  --edge: clamp(1.5rem, 7vw, 9rem);
  /* fluid display scale — confident, not shouting (premium/editorial restraint) */
  --fs-mega: clamp(2.5rem, 6vw, 5rem);
  --fs-xl:   clamp(1.9rem, 3.6vw, 3.25rem);
  --fs-lg:   clamp(1.5rem, 2.6vw, 2.25rem);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  min-block-size: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* A single calm indigo wash — atmosphere, never chrome (flat-by-default). */
.pg-backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(58% 44% at 18% -4%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 70%),
    radial-gradient(46% 38% at 92% 4%, color-mix(in srgb, var(--accent-2) 9%, transparent), transparent 72%),
    radial-gradient(60% 50% at 70% 102%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%);
}

/* full-bleed section + a shared inner rhythm */
.pg-sec {
  position: relative;
  padding-inline: var(--edge);
  padding-block: clamp(var(--space-16), 12vh, var(--space-24));
}
.pg-rule { border: 0; border-block-start: 1px solid var(--border); margin: 0; }

/* ============================================================================
   NAV — fixed, minimal, frosts on scroll
   ========================================================================== */
.pg-nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--edge);
  transition: background var(--duration-slow) var(--ease-standard),
              backdrop-filter var(--duration-slow) var(--ease-standard),
              border-color var(--duration-slow) var(--ease-standard);
  border-block-end: 1px solid transparent;
}
.pg-nav.is-scrolled {
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(16px) saturate(1.3);
  border-block-end-color: var(--border);
}
.pg-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font: var(--weight-bold) var(--text-lg)/1 var(--font-sans);
  letter-spacing: -.02em;
  color: var(--ink);
  text-decoration: none;
}
.pg-logo__mark {
  inline-size: 28px; block-size: 28px; flex: none;
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: var(--bg);
  display: inline-grid; place-content: center;
  font-weight: var(--weight-bold); font-size: var(--text-base);
}
.pg-nav__right { display: inline-flex; align-items: center; gap: var(--space-3); }
/* slim scroll-progress hairline along the nav's bottom edge */
.pg-nav__progress {
  position: absolute; inset-block-end: -1px; inset-inline-start: 0;
  block-size: 2px; inline-size: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform: scaleX(0); transform-origin: 0 50%;
}
a.ph-btn { text-decoration: none; }

/* ============================================================================
   PRELOADER
   ========================================================================== */
.pg-preloader {
  position: fixed; inset: 0; z-index: var(--z-toast);
  background: var(--bg);
  display: grid; place-content: center;
  gap: var(--space-6);
}
.pg-preloader__row {
  display: flex; align-items: baseline; gap: var(--space-3);
  font: var(--weight-bold) clamp(2rem, 7vw, 4rem)/1 var(--font-sans);
  letter-spacing: -.03em; color: var(--ink);
}
.pg-preloader__count {
  font: var(--weight-medium) var(--text-lg)/1 var(--font-mono);
  color: var(--ink-subtle);
}
.pg-preloader__bar {
  inline-size: min(60vw, 320px); block-size: 2px;
  background: var(--surface-sunken); overflow: hidden;
}
.pg-preloader__bar span {
  display: block; block-size: 100%; inline-size: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

/* ============================================================================
   01 — HERO (full viewport, oversized type)
   ========================================================================== */
.pg-hero {
  min-block-size: 100svh;
  padding-inline: var(--edge);
  padding-block-start: clamp(7rem, 16vh, 11rem);
  padding-block-end: var(--space-12);
  display: flex; flex-direction: column; justify-content: center;
  position: relative; overflow: clip;
}
.pg-eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-block-end: clamp(var(--space-6), 4vh, var(--space-10));
}
.pg-eyebrow .ph-dot {
  inline-size: 7px; block-size: 7px; flex: none;
  border-radius: var(--radius-full); background: var(--accent-2);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-2) 60%, transparent);
  animation: pg-pulse 2.6s var(--ease-standard) infinite;
}
@keyframes pg-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-2) 55%, transparent); }
  70%, 100% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent-2) 0%, transparent); }
}

.pg-hero__title {
  font-weight: var(--weight-bold);
  font-size: var(--fs-mega);
  line-height: 1.02;
  letter-spacing: -.03em;
  text-wrap: pretty;      /* never `balance` — it breaks SplitText line measurement */
  margin: 0;
  max-inline-size: 18ch;
}
.pg-hero__title em { font-style: normal; color: var(--accent); }  /* the one rose accent */

.pg-hero__lower {
  margin-block-start: clamp(var(--space-8), 6vh, var(--space-16));
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(var(--space-6), 5vw, var(--space-16));
  align-items: end;
}
.pg-hero__sub {
  color: var(--ink-muted);
  max-inline-size: 46ch;
  font-size: clamp(var(--text-md), 1.1vw, var(--text-lg));
  line-height: 1.6;
}
.pg-hero__sub strong { color: var(--ink); font-weight: var(--weight-semibold); }
.pg-hero__actions {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--space-3);
  justify-self: start;
}
.pg-hero__actions .ph-btn { inline-size: auto; }
.pg-hero__fine { color: var(--ink-subtle); }

/* scroll cue pinned to the hero floor */
.pg-scrollcue {
  margin-block-start: clamp(var(--space-8), 6vh, var(--space-16));
  display: inline-flex; align-items: center; gap: var(--space-2);
  font: var(--weight-medium) var(--text-xs)/1 var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-subtle);
}
.pg-scrollcue svg { animation: pg-bob 2s var(--ease-standard) infinite; }
@keyframes pg-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* ============================================================================
   KINETIC MARQUEE (section transition)
   ========================================================================== */
.pg-marquee {
  --gap: clamp(2rem, 5vw, 5rem);
  overflow: hidden;
  padding-block: clamp(var(--space-6), 4vh, var(--space-12));
  border-block: 1px solid var(--border);
  white-space: nowrap;
}
.pg-marquee__inner {
  display: inline-flex; align-items: center; gap: var(--gap);
  will-change: transform;
}
.pg-marquee__item {
  font-weight: var(--weight-semibold);
  font-size: clamp(1.15rem, 2.4vw, 1.9rem);
  letter-spacing: -.01em; color: var(--ink);
}
.pg-marquee__item--muted {
  color: transparent;
  -webkit-text-stroke: 1px var(--border-strong);
}
.pg-marquee__dot { color: var(--accent); flex: none; }

/* ============================================================================
   SECTION HEADER (editorial index + kicker + title)
   ========================================================================== */
.pg-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(var(--space-4), 3vw, var(--space-10));
  align-items: start;
  margin-block-end: clamp(var(--space-10), 7vh, var(--space-20));
}
.pg-index {
  font: var(--weight-medium) var(--text-base)/1 var(--font-mono);
  color: var(--accent);
  padding-block-start: .6em;
}
.pg-kicker {
  display: block;
  font: var(--weight-medium) var(--text-xs)/1.2 var(--font-mono);
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-subtle);
  margin-block-end: var(--space-4);
}
.pg-title {
  font-weight: var(--weight-bold);
  font-size: var(--fs-xl);
  line-height: 1.08;
  letter-spacing: -.02em;
  text-wrap: balance;
  margin: 0;
  max-inline-size: 20ch;
}
.pg-title em { font-style: normal; color: var(--accent); }
.pg-lede {
  margin-block-start: var(--space-5);
  color: var(--ink-muted);
  font-size: clamp(var(--text-md), 1.1vw, var(--text-lg));
  line-height: 1.6;
  max-inline-size: 54ch;
}

/* ============================================================================
   02 — THE PROBLEM (asymmetric, big numbered rows)
   ========================================================================== */
.pg-problems { display: grid; gap: 0; }
.pg-problem {
  display: grid;
  grid-template-columns: minmax(0, 4ch) 1.2fr 1.4fr;
  gap: clamp(var(--space-4), 4vw, var(--space-12));
  align-items: baseline;
  padding-block: clamp(var(--space-8), 5vh, var(--space-12));
  border-block-start: 1px solid var(--border);
}
.pg-problem:last-child { border-block-end: 1px solid var(--border); }
.pg-problem__no {
  font: var(--weight-medium) var(--text-sm)/1 var(--font-mono);
  color: var(--ink-subtle);
}
.pg-problem__h {
  font-weight: var(--weight-semibold);
  font-size: clamp(var(--text-xl), 1.9vw, var(--text-3xl));
  letter-spacing: -.015em; line-height: 1.18; margin: 0;
  color: var(--ink);
}
.pg-problem__p { color: var(--ink-muted); margin: 0; font-size: var(--text-md); line-height: 1.6; }
.pg-problem__p .pg-mark { color: var(--ink); font-weight: var(--weight-medium); }

/* closing line of the problem movement */
.pg-problem__close {
  margin-block-start: clamp(var(--space-10), 7vh, var(--space-16));
  font-weight: var(--weight-semibold);
  font-size: var(--fs-lg);
  line-height: 1.15; letter-spacing: -.02em;
  max-inline-size: 24ch;
}
.pg-problem__close em { font-style: normal; color: var(--accent); }

/* ============================================================================
   03 — WHAT PEOPLE KEEP SAYING (gaps framed as quotes)
   ========================================================================== */
.pg-gaps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(var(--space-4), 2vw, var(--space-6));
}
.pg-quote {
  display: flex; flex-direction: column;
  gap: var(--space-5);
  padding: clamp(var(--space-6), 2.5vw, var(--space-8));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.pg-quote__mark {
  font: var(--weight-bold) 2.5rem/1 var(--font-sans);
  color: var(--accent);
  block-size: .6em;
}
.pg-quote__say {
  font-weight: var(--weight-medium);
  font-size: clamp(var(--text-md), 1.1vw, var(--text-lg));
  line-height: 1.45; letter-spacing: -.005em;
  color: var(--ink); margin: 0;
  flex: 1 0 auto;
}
.pg-quote__who {
  font: var(--weight-regular) var(--text-sm)/1.3 var(--font-mono);
  color: var(--ink-subtle); letter-spacing: .02em;
}
.pg-quote__fix {
  display: flex; align-items: flex-start; gap: var(--space-2);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--border);
  color: var(--ink-muted);
  font-size: var(--text-base); line-height: 1.45;
}
.pg-quote__fix svg { flex: none; color: var(--accent-2); margin-block-start: 2px; }
.pg-quote__fix b { color: var(--ink); font-weight: var(--weight-semibold); }

/* ============================================================================
   04 — OUTCOMES (pinned horizontal rail)
   ========================================================================== */
.pg-outcomes { padding-inline: 0; overflow: clip; }
.pg-outcomes .pg-head { padding-inline: var(--edge); }
.pg-rail__viewport { overflow: hidden; }
.pg-rail {
  display: flex;
  gap: clamp(var(--space-4), 2vw, var(--space-6));
  padding-inline: var(--edge);
  will-change: transform;
}
.pg-outcome {
  flex: 0 0 clamp(15rem, 26vw, 22rem);
  display: flex; flex-direction: column; gap: var(--space-5);
  padding: clamp(var(--space-6), 2vw, var(--space-8));
  min-block-size: clamp(15rem, 24vw, 20rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}
.pg-outcome__icon {
  inline-size: 44px; block-size: 44px; flex: none;
  border-radius: var(--radius-md);
  background: var(--ai-bg); color: var(--ai-fg);   /* lavender = AI, used here only */
  display: grid; place-content: center;
}
.pg-outcome__no { margin-block-start: auto; font: var(--weight-medium) var(--text-xs)/1 var(--font-mono); color: var(--ink-subtle); letter-spacing: .1em; }
.pg-outcome__t {
  font-weight: var(--weight-semibold);
  font-size: clamp(var(--text-lg), 1.3vw, var(--text-xl));
  letter-spacing: -.01em; line-height: 1.3; margin: 0; color: var(--ink);
}
.pg-rail__hint {
  margin-block-start: var(--space-8); padding-inline: var(--edge);
  font: var(--weight-medium) var(--text-xs)/1 var(--font-mono);
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-subtle);
  display: inline-flex; align-items: center; gap: var(--space-2);
}

/* ============================================================================
   05 — JOIN THE WAITLIST (full-bleed close + form)
   ========================================================================== */
.pg-join {
  text-align: center;
  display: grid; justify-items: center;
}
.pg-join__title {
  font-weight: var(--weight-bold);
  font-size: var(--fs-xl);
  line-height: 1.08; letter-spacing: -.02em; margin: 0;
  max-inline-size: 18ch;
}
.pg-join__title em { font-style: normal; color: var(--accent); }
.pg-join__sub {
  margin-block-start: var(--space-5);
  color: var(--ink-muted);
  font-size: clamp(var(--text-md), 1.1vw, var(--text-lg));
  max-inline-size: 48ch;
}

.pg-form {
  margin-block-start: clamp(var(--space-8), 5vh, var(--space-12));
  inline-size: 100%; max-inline-size: 30rem;
  text-align: start;
}
.pg-form .ph-form-field + .ph-form-field { margin-block-start: var(--space-3); }
.pg-form .ph-btn { margin-block-start: var(--space-4); inline-size: 100%; }
.pg-form__fine { margin-block-start: var(--space-4); text-align: center; }

/* honeypot — present for bots, invisible to humans (server drops on fill) */
.pg-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* trust row under the form */
.pg-trust {
  margin-block-start: clamp(var(--space-10), 6vh, var(--space-16));
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--space-3) var(--space-6);
}
.pg-trust__item {
  display: inline-flex; align-items: center; gap: var(--space-2);
  color: var(--ink-subtle); font-size: var(--text-sm);
}
.pg-trust__item svg { color: var(--accent-2); flex: none; }

/* success swap */
.pg-success {
  inline-size: 100%; max-inline-size: 32rem;
  text-align: center; padding: clamp(var(--space-6), 3vw, var(--space-8));
  margin-block-start: clamp(var(--space-8), 5vh, var(--space-12));
}
.pg-success__icon {
  inline-size: 48px; block-size: 48px; margin-inline: auto;
  margin-block-end: var(--space-4); border-radius: var(--radius-full);
  background: var(--success-bg); color: var(--success-fg);
  display: grid; place-content: center;
}
[hidden] { display: none !important; }

/* ============================================================================
   FOOTER
   ========================================================================== */
.pg-footer {
  flex: none;
  border-block-start: 1px solid var(--border);
  padding: var(--space-8) var(--edge);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
}
.pg-footer__brand { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink-subtle); }
.pg-footer__links { display: flex; gap: var(--space-5); flex-wrap: wrap; }

/* ============================================================================
   MOTION ENTRANCE STATES — opt-in only (.anim is added in <head> when the user
   has NO reduced-motion preference). Reduced-motion / no-JS users get the calm,
   fully-visible static page; nothing below ever hides content for them.
   ========================================================================== */
.anim .pg-reveal { opacity: 0; }
.anim [data-stagger] > * { opacity: 0; }
.anim .pg-hero__title,
.anim .pg-hero__sub { opacity: 0; }

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
  .pg-hero__lower { grid-template-columns: 1fr; gap: var(--space-8); align-items: start; }
  .pg-gaps { grid-template-columns: 1fr 1fr; }
  .pg-problem { grid-template-columns: minmax(0, 3ch) 1fr; }
  .pg-problem__p { grid-column: 2; }
}
@media (max-width: 640px) {
  .pg-head { grid-template-columns: 1fr; gap: var(--space-3); }
  .pg-index { padding-block-start: 0; }
  .pg-gaps { grid-template-columns: 1fr; }
  .pg-nav__right .ph-btn { display: none; }   /* keep nav clean on mobile; hero CTA carries it */
  .pg-problem { grid-template-columns: 1fr; gap: var(--space-3); }
  .pg-problem__no { display: none; }
  .pg-problem__p { grid-column: 1; }
}