/* ============================================================================
   Phersona — Prelaunch waitlist page
   Page-level layout only. Built strictly on the Indigo Ink SEMANTIC tokens
   (tokens.css) and the ph- component classes (components.css). No hardcoded hex.
   Calm · Confident · Accountable — restrained and editorial, never AI-SaaS slop.
   ========================================================================== */

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

.wl-shell {
  flex: 1 0 auto;
  inline-size: 100%;
  max-inline-size: var(--container-content);
  margin-inline: auto;
  padding-inline: var(--space-5);
  display: flex;
  flex-direction: column;
}

/* A single calm indigo wash behind the hero — not a synthwave gradient.
   Flat-by-default doctrine: this is atmosphere, never chrome. */
.wl-backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 50% -5%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 70%),
    radial-gradient(45% 40% at 85% 8%, color-mix(in srgb, var(--accent-2) 8%, transparent), transparent 70%);
}

/* --- Header --------------------------------------------------------------- */
.wl-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-5);
}
.wl-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;
}
.wl-logo__mark {
  inline-size: 26px;
  block-size: 26px;
  flex: none;
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: var(--surface);
  display: inline-grid;
  place-content: center;
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
}
[data-theme="dark"] .wl-logo__mark { color: var(--bg); }

/* --- Hero ----------------------------------------------------------------- */
.wl-hero {
  padding-block: clamp(var(--space-12), 9vw, var(--space-24)) var(--space-16);
  text-align: center;
  max-inline-size: 42rem;
  margin-inline: auto;
}
.wl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-end: var(--space-6);
}
.wl-eyebrow .ph-dot {
  inline-size: 7px;
  block-size: 7px;
  border-radius: var(--radius-full);
  background: var(--accent-2);
  flex: none;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-2) 60%, transparent);
  animation: wl-pulse 2.6s var(--ease-standard) infinite;
}
@keyframes wl-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-2) 55%, transparent); }
  70%, 100% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent-2) 0%, transparent); }
}
.wl-hero__title {
  margin-block-end: var(--space-5);
}
.wl-hero__title em {
  font-style: normal;
  color: var(--accent);   /* the one accent — a single rose word, ≤10% of screen */
}
.wl-hero__sub {
  color: var(--ink-muted);
  max-inline-size: 34rem;
  margin-inline: auto;
}

/* --- Waitlist form -------------------------------------------------------- */
.wl-form {
  margin-block-start: var(--space-8);
  margin-inline: auto;
  max-inline-size: 28rem;
  text-align: start;
}
.wl-form__row {
  display: flex;
  gap: var(--space-2);
}
.wl-form__row .ph-form-field { flex: 1 1 auto; }
.wl-form__row .ph-form-field + .ph-form-field { margin-block-start: 0; }
.wl-form .ph-btn {
  margin-block-start: var(--space-3);
  inline-size: 100%;
}
/* Anchors styled as buttons must not carry the default underline. */
a.ph-btn { text-decoration: none; }
.wl-fine {
  margin-block-start: var(--space-3);
  text-align: center;
}
/* Honeypot — kept in the layout but invisible to humans; bots fill it and the
   server silently drops the submission (see functions/waitlist.js). */
.wl-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Success state — swapped in after a confirmed submit (double opt-in copy). */
.wl-success {
  margin-block-start: var(--space-8);
  margin-inline: auto;
  max-inline-size: 30rem;
  text-align: center;
  padding: var(--space-6);
}
.wl-success__icon {
  inline-size: 44px;
  block-size: 44px;
  margin-inline: auto;
  margin-block-end: var(--space-3);
  border-radius: var(--radius-full);
  background: var(--success-bg);
  color: var(--success-fg);
  display: grid;
  place-content: center;
}
[hidden] { display: none !important; }

/* --- Section scaffold ----------------------------------------------------- */
.wl-section { padding-block: var(--space-12); }
.wl-section__head {
  max-inline-size: 40rem;
  margin-block-end: var(--space-8);
}
.wl-section__head--center {
  text-align: center;
  margin-inline: auto;
}
.wl-kicker {
  display: block;
  font: var(--weight-medium) var(--text-xs)/1.2 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-subtle);
  margin-block-end: var(--space-3);
}

/* --- Blurb cards (the four refined messages) ------------------------------ */
.wl-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(2, 1fr);
}
.wl-blurb { padding: var(--space-6); }
.wl-blurb h3 { margin-block-end: var(--space-2); }
.wl-blurb p { color: var(--ink-muted); margin: 0; }

/* --- "What's coming" — agent outcomes (lavender = AI, used here only) ------ */
.wl-outcomes {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, 1fr);
}
.wl-outcome {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
}
.wl-outcome__icon {
  inline-size: 36px;
  block-size: 36px;
  flex: none;
  border-radius: var(--radius-md);
  background: var(--ai-bg);   /* lavender — the AI, and nothing else */
  color: var(--ai-fg);
  display: grid;
  place-content: center;
}
.wl-outcome p {
  margin: 0;
  font-weight: var(--weight-medium);
}

/* --- Urgency: agents-in-training progress --------------------------------- */
.wl-training {
  max-inline-size: 36rem;
  margin-inline: auto;
  text-align: center;
  padding: var(--space-8);
}
.wl-progress {
  block-size: 8px;
  margin-block: var(--space-4) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
  overflow: hidden;
}
.wl-progress__bar {
  block-size: 100%;
  inline-size: var(--wl-progress, 82%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), var(--accent-2));
  transition: inline-size var(--duration-slower) var(--ease-emphasized);
}
.wl-training__meta {
  display: flex;
  justify-content: space-between;
  color: var(--ink-subtle);
}

/* --- Footer --------------------------------------------------------------- */
.wl-footer {
  flex: none;
  border-block-start: 1px solid var(--border);
  margin-block-start: var(--space-12);
}
.wl-footer__inner {
  max-inline-size: var(--container-content);
  margin-inline: auto;
  padding: var(--space-8) var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.wl-footer__links {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.wl-built {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink-subtle);
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 640px) {
  .wl-grid,
  .wl-outcomes { grid-template-columns: 1fr; }
  .wl-form__row { flex-direction: column; gap: var(--space-3); }
  .wl-form__row .ph-form-field + .ph-form-field { margin-block-start: 0; }
}