/* heylife.ai landing — Watercolor (light) + Dark Cosmic (dark) */

@font-face {
  font-family: 'Stolzl';
  src: url('./fonts/stolzl-regular.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

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

:root {
  --font-body:    Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-heading: Stolzl, 'Inter Display', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* ───────── theme tokens ───────── */
:root,
[data-theme='light'] {
  --bg:            #FBF6EE;
  --text:          #3A3530;
  --text-strong:   #1F2A1E;
  --text-muted:    #5C6B5A;
  --text-faint:    #7A7064;
  --accent:        #5E8A4B;
  --accent-solid:  #5E8A4B;
  --accent-rgb:    94 138 75;
  --pill-health:   #83AF6F;
  --pill-craft:    #D88F58;
  --pill-rel:      #C97A98;
  --pill-money:    #C9A24A;
  --pill-family:   #8FA8C9;
  --pill-health-strong: #5E8A4B;
  --pill-craft-strong:  #B86A2E;
  --pill-rel-strong:    #A35578;
  --pill-money-strong:  #A78A3A;
  --pill-family-strong: #5F7AA0;
  --input-bg:      #ffffff;
  --input-border:  rgba(0, 0, 0, 0.094);
  --input-text:    #1F2A1E;
  --rule:          rgba(0, 0, 0, 0.063);
  --nav-link:      #5C6B5A;
  --logo-color:    #3A3530;
  --toggle-bg:     rgba(0, 0, 0, 0.04);
  --toggle-border: rgba(0, 0, 0, 0.08);
  --toggle-text:   #5C6B5A;
}

[data-theme='dark'] {
  --bg:            #0B1314;
  --text:          #E5EDED;
  --text-strong:   #F4F8F7;
  --text-muted:    #A8B8B5;
  --text-faint:    #7A8E89;
  --accent:        #A8E6D6;
  --accent-solid:  #3FA88E;
  --accent-rgb:    168 230 214;
  --pill-health:   #A8E6D6;
  --pill-craft:    #E8C8A8;
  --pill-rel:      #D8B0E0;
  --pill-money:    #F0D880;
  --pill-family:   #9FC8E6;
  --pill-health-strong: #A8E6D6;
  --pill-craft-strong:  #E8C8A8;
  --pill-rel-strong:    #D8B0E0;
  --pill-money-strong:  #F0D880;
  --pill-family-strong: #9FC8E6;
  --input-bg:      rgba(255, 255, 255, 0.031);
  --input-border:  rgba(255, 255, 255, 0.125);
  --input-text:    #F4F8F7;
  --rule:          rgba(255, 255, 255, 0.063);
  --nav-link:      #9BB0AB;
  --logo-color:    #E5EDED;
  --toggle-bg:     rgba(255, 255, 255, 0.04);
  --toggle-border: rgba(255, 255, 255, 0.10);
  --toggle-text:   #9BB0AB;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background 240ms ease, color 240ms ease;
}

body {
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
button { font: inherit; }

/* ───────── theme show/hide ───────── */
.only-light { display: block; }
.only-dark  { display: none; }
[data-theme='dark'] .only-light { display: none; }
[data-theme='dark'] .only-dark  { display: block; }

/* ───────── scenery (background art) ───────── */
.scene {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* watercolor washes + sparkles */
.scene-light .washes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
}
.scene-light .sparkle {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.4;
}

/* dark cosmic nebulae + stars */
.scene-dark .nebula {
  position: absolute;
  border-radius: 50%;
}
.scene-dark .nebula.tr {
  right: -200px;
  top: -200px;
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(29, 77, 66, 0.20) 0%, transparent 70%);
}
.scene-dark .nebula.bl {
  left: -100px;
  bottom: -100px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(94, 61, 110, 0.13) 0%, transparent 70%);
}
.scene-dark .star {
  position: absolute;
  border-radius: 50%;
  background: #E5EDED;
}

/* ───────── page layout ───────── */
.page {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: 1280px;
  margin: 0 auto;
}

/* ───────── nav ───────── */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px clamp(20px, 4.5vw, 56px);
  gap: 16px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 700;
  color: var(--logo-color);
  letter-spacing: -0.3px;
}
.logo .tld { opacity: 0.5; font-weight: 700; }
.logo svg { color: var(--logo-color); display: block; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 13px;
  color: var(--nav-link);
}
.nav-links a { transition: color 160ms ease; }
.nav-links a:hover { color: var(--text-strong); }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--toggle-bg);
  border: 1px solid var(--toggle-border);
  color: var(--toggle-text);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.theme-toggle:hover { color: var(--text-strong); }
.theme-toggle svg { display: block; width: 12px; height: 12px; }

/* ───────── hero ───────── */
.hero {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(24px, 4vw, 60px);
  align-items: center;
  padding: 0 clamp(20px, 4.5vw, 56px);
}
[data-theme='dark'] .hero {
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(24px, 3.5vw, 50px);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2.5px;
  color: var(--accent);
  font-weight: 700;
  margin: 0 0 22px;
  text-transform: none;
}
.eyebrow .glow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}
h1.headline {
  font-family: var(--font-heading);
  font-size: clamp(40px, 5.6vw, 60px);
  line-height: 1.02;
  letter-spacing: -1.5px;
  font-weight: 700;
  margin: 0;
  color: var(--text-strong);
}
[data-theme='dark'] h1.headline {
  font-size: clamp(42px, 6vw, 64px);
  line-height: 1.0;
  letter-spacing: -1.8px;
}
h1.headline .gradient {
  background: linear-gradient(135deg, #A8E6D6 0%, #C9B5E8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.subhead {
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 22px 0 0;
  max-width: 480px;
}
[data-theme='dark'] .subhead {
  font-size: 16px;
  line-height: 1.6;
  margin-top: 24px;
}
.subhead .pill-health { color: var(--pill-health-strong); font-weight: 600; }
.subhead .pill-craft  { color: var(--pill-craft-strong);  font-weight: 600; }
.subhead .pill-rel    { color: var(--pill-rel-strong);    font-weight: 600; }
.subhead .pill-money  { color: var(--pill-money-strong);  font-weight: 600; }
.subhead .pill-family { color: var(--pill-family-strong); font-weight: 600; }
[data-theme='dark'] .subhead .closer { color: #E5EDED; }

/* waitlist */
.waitlist {
  margin-top: 30px;
  display: flex;
  gap: 8px;
  max-width: 420px;
}
[data-theme='dark'] .waitlist { margin-top: 32px; }
.waitlist input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--input-text);
  font-size: 14px;
  font-family: var(--font-body);
  outline: none;
  transition: border-color 160ms ease;
}
.waitlist input::placeholder { color: var(--text-faint); }
.waitlist input:focus { border-color: var(--accent); }

.waitlist button {
  padding: 12px 18px;
  border-radius: 10px;
  border: 0;
  background: var(--accent-solid);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: filter 160ms ease, transform 160ms ease;
}
.waitlist button:hover { filter: brightness(1.08); }
.waitlist button:active { transform: translateY(1px); }
.waitlist.is-done button { background: var(--accent-solid); }

/* ───── waitlist success card ───── */
.waitlist-area.is-done .waitlist,
.waitlist-area.is-done .proof { display: none; }

.waitlist-success {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 460px;
  margin-top: 8px;
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid var(--input-border);
  background: linear-gradient(180deg,
    rgb(var(--accent-rgb) / 0.10) 0%,
    rgb(var(--accent-rgb) / 0.02) 100%);
  box-shadow: 0 8px 24px -16px rgb(var(--accent-rgb) / 0.45);
  animation: success-rise 360ms cubic-bezier(.2,.7,.2,1) both;
}
.waitlist-success[hidden] { display: none; }

.waitlist-success .success-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.waitlist-success .success-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent-solid);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 6px rgb(var(--accent-rgb) / 0.18);
}
[data-theme='dark'] .waitlist-success .success-icon {
  color: #0B1314;
  background: var(--accent);
}
.waitlist-success .success-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

.waitlist-success .success-body { min-width: 0; }
.waitlist-success .success-title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--text-strong);
  margin: 0 0 4px;
  line-height: 1.2;
}
.waitlist-success .success-sub {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0;
}
.waitlist-success .success-email {
  color: var(--text-strong);
  font-weight: 600;
  word-break: break-all;
}

@keyframes success-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ───── waitlist queue / share-to-skip-the-line ───── */
.queue-card {
  border-top: 1px solid var(--input-border);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.queue-position {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  position: relative;
}
.queue-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--text-faint);
}
.queue-number {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: -0.6px;
  line-height: 1;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.queue-pitch {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-muted);
  margin: 0;
}
.queue-floater {
  position: absolute;
  right: 0;
  top: -8px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-solid);
  pointer-events: none;
  animation: queue-floater 1.2s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes queue-floater {
  0%   { opacity: 0; transform: translateY(0); }
  20%  { opacity: 1; transform: translateY(-4px); }
  100% { opacity: 0; transform: translateY(-26px); }
}

.share-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-strong);
  background: transparent;
  border: 1px solid var(--input-border);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, opacity 160ms ease, transform 160ms ease;
}
.share-btn:hover:not(:disabled) {
  border-color: var(--accent-solid);
  color: var(--accent-solid);
  background: rgb(var(--accent-rgb) / 0.08);
}
.share-btn:active:not(:disabled) { transform: translateY(1px); }
.share-btn.is-shared {
  opacity: 0.55;
  cursor: default;
  border-color: var(--input-border);
  color: var(--text-muted);
  background: transparent;
}
.share-btn.is-shared::after {
  content: '✓';
  margin-left: 1px;
  color: var(--accent-solid);
  font-weight: 700;
}
.share-btn:disabled { cursor: default; }

[data-theme='dark'] .queue-label { color: var(--text-faint); }
[data-theme='dark'] .share-btn { color: var(--text); }
[data-theme='dark'] .share-btn:hover:not(:disabled) {
  color: var(--accent);
  border-color: var(--accent);
}
[data-theme='dark'] .share-btn.is-shared::after { color: var(--accent); }

.proof {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 12px;
}
[data-theme='dark'] .proof {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 1px;
  margin-top: 14px;
}

/* ───────── orbit visualization (canvas · agent-flow) ───────── */
.orbit {
  position: relative;
  width: 100%;
  max-width: 540px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}

.orbit-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.orbit-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Per-pillar color via CSS custom property — labels & bars track canvas hex color
   automatically, and we override only the property when theme switches. */
.pl-health        { --pl: #83AF6F; }
.pl-money         { --pl: #C9A24A; }
.pl-relationships { --pl: #C97A98; }
.pl-family        { --pl: #8FA8C9; }
.pl-work          { --pl: #D88F58; }

[data-theme='dark'] .pl-health        { --pl: #A8E6D6; }
[data-theme='dark'] .pl-money         { --pl: #F0D880; }
[data-theme='dark'] .pl-relationships { --pl: #D8B0E0; }
[data-theme='dark'] .pl-family        { --pl: #9FC8E6; }
[data-theme='dark'] .pl-work          { --pl: #E8C8A8; }

.pl {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 17%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
}

.pl-below {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: 6px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.pl-cat {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--pl);
}

.pl-bar {
  display: block;
  width: 56px;
  height: 3px;
  border-radius: 2px;
  background: color-mix(in oklab, var(--pl) 16%, transparent);
  overflow: hidden;
  position: relative;
}

.pl-fill {
  display: block;
  width: var(--w);
  height: 100%;
  border-radius: 2px;
  background: var(--pl);
}

.pl-status {
  font-family: var(--font-mono);
  font-size: 7.5px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--text-faint);
}

.pl-side {
  position: absolute;
  top: -8%;
  width: 90px;
  display: flex;
  flex-direction: column;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.6px;
  font-weight: 700;
  line-height: 1.3;
  /* Whole agent badge (dot + AGENT + name + task) is hidden at rest;
     the JS scheduler toggles `.pl.is-on` to fade it in for a working session. */
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 600ms ease, transform 600ms ease;
  pointer-events: none;
}
.pl.is-on .pl-side {
  opacity: 1;
  transform: translateY(0);
}
.pl.agent-right .pl-side { left: 100%;  margin-left: 10px;  text-align: left;  }
.pl.agent-left  .pl-side { right: 100%; margin-right: 10px; text-align: right; }

.pl-kicker { color: var(--pl); }
.pl-name   { color: var(--pl); font-weight: 500; letter-spacing: 0.3px; }
[data-theme='dark'] .pl-name { color: var(--text-muted); }

/* ── Agent "alive" effects (one is randomly assigned per pillar at init) ── */

/* Effect A: vital-sign dot — small breathing dot prefixing AGENT/AGENTS */
.pl-pulse {
  display: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--pl);
  vertical-align: middle;
  margin: -1px 5px 1px 0;
  box-shadow: 0 0 3px var(--pl),
              0 0 8px color-mix(in oklab, var(--pl) 55%, transparent);
}
.pl.has-pulse .pl-pulse {
  display: inline-block;
  animation: agentBreathe 2.8s ease-in-out infinite,
             agentFlicker  7.3s steps(1, end) infinite;
}
@keyframes agentBreathe {
  0%, 100% { transform: scale(0.85); opacity: 0.45; }
  50%      { transform: scale(1);    opacity: 0.95; }
}
@keyframes agentFlicker {
  0%, 95%   { filter: brightness(1); }
  96%       { filter: brightness(2.2); }
  97%       { filter: brightness(1); }
  98%       { filter: brightness(1.6); }
  99%, 100% { filter: brightness(1); }
}

/* Task line — visible whenever the agent badge is on. Inner cross-fades
   (driven by .is-fading) cover the textContent swap between tasks. */
.pl-whisper {
  display: none;
  font-family: var(--font-mono);
  font-size: 7.5px;
  font-weight: 500;
  letter-spacing: 0.3px;
  font-style: italic;
  color: color-mix(in oklab, var(--pl) 75%, transparent);
  margin-top: 3px;
  min-height: 11px;
  opacity: 0.92;
  transition: opacity 240ms ease;
}
.pl.has-whisper .pl-whisper { display: block; }
.pl-whisper.is-fading { opacity: 0; }

/* Center node — sun (light) or YOU label (dark). The .only-light/.only-dark
   theme toggle is handled by the global rules higher up; we just style the
   visible container here. */
.orbit-center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50px;
  height: 50px;
  margin: -25px 0 0 -25px;
  text-align: center;
  pointer-events: none;
}
.orbit-center.only-light {
  border-radius: 50%;
  background: #fffac8;
  border: 1px solid rgba(0, 0, 0, 0.063);
  box-shadow: 0 0 30px #fffac8;
  line-height: 50px;
}
.orbit-center.only-light svg { vertical-align: middle; color: #B8902E; }
.orbit-center.only-dark {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #A8E6D6;
  line-height: 50px;
}

/* Mobile-only agent badge. The JS scheduler routes the active agent's
   content here and adds a `.pl-{id}` class — that class supplies both the
   themed `--pl` color (via the existing per-pillar variable rules) and the
   x/y position so the badge appears in the active pillar's own quadrant
   instead of always center-bottom. */
.agent-mobile {
  position: absolute;
  /* top/left are set per-pillar by the .pl-{id} class below. */
  transform: translate(-50%, -50%);
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 84px;
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms ease, transform 600ms ease;
}
.agent-mobile.is-on { opacity: 1; transform: translate(-50%, calc(-50% - 3px)); }
/* Compact mobile sizing — keeps the badge short enough to fit between the
   HEALTH category label band (~y 22-31%) and the YOU/sun (~y 44.5-55.5%)
   without crowding either. */
.agent-mobile-kicker { font-size: 7px; letter-spacing: 0.5px; }
.agent-mobile-pulse  { width: 4px; height: 4px; margin: -1px 4px 1px 0; }
.agent-mobile-name   { font-size: 8.5px; margin-top: 1px; }
.agent-mobile-task   { font-size: 7px; margin-top: 1px; min-height: 9px; }

/* Per-pillar landing positions. Tuned to clear:
   - HEALTH category label band (y ~22-30%)
   - MONEY/WORK category label band (y ~48-56%)
   - the hexes (centers at 38% / 81% radial)
   - the YOU/sun (y 44.5-55.5%)
   ...while still placing each badge in the active pillar's own quadrant
   so the association reads as "this agent is working for that pillar".
   Upper trio sits between the upper hex tops and YOU; lower pair sits
   between YOU and the lower hex tops. */
.agent-mobile.pl-health        { top: 39%; left: 50%; }
.agent-mobile.pl-money         { top: 39%; left: 64%; }
.agent-mobile.pl-work          { top: 39%; left: 36%; }
.agent-mobile.pl-relationships { top: 62%; left: 60%; }
.agent-mobile.pl-family        { top: 62%; left: 40%; }

.agent-mobile-kicker {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.7px;
  color: var(--pl);
}
.agent-mobile-pulse {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--pl);
  box-shadow: 0 0 4px var(--pl),
              0 0 8px color-mix(in oklab, var(--pl) 55%, transparent);
  vertical-align: middle;
  margin: -1px 5px 1px 0;
  animation: agentBreathe 2.8s ease-in-out infinite;
}
.agent-mobile-name {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: var(--pl);
  margin-top: 2px;
}
[data-theme='dark'] .agent-mobile-name { color: var(--text-muted); }
.agent-mobile-task {
  font-size: 7.5px;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.3px;
  color: color-mix(in oklab, var(--pl) 75%, transparent);
  margin-top: 3px;
  min-height: 10px;
  transition: opacity 240ms ease;
}
.agent-mobile-task.is-fading { opacity: 0; }

@media (max-width: 520px) {
  .agent-mobile { display: flex; }
}

/* ───────── footer ───────── */
.foot {
  position: relative;
  padding: 20px clamp(20px, 4.5vw, 56px);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 11px;
  color: var(--text-faint);
  font-family: var(--font-mono);
  letter-spacing: 1px;
  border-top: 1px solid var(--rule);
}

/* ───────── responsive ───────── */
@media (max-width: 880px) {
  .hero,
  [data-theme='dark'] .hero {
    grid-template-columns: 1fr;
    gap: 20px;                  /* tighter copy↔orbit gap on mobile */
    padding: 16px 20px 32px;
  }
  /* On mobile, dissolve .copy so its children (eyebrow/headline/subhead/
     waitlist-area) become direct grid items, then push the visual between
     the subhead and the waitlist-area. Final order: text → orbit → form. */
  .copy          { display: contents; }
  .visual        { order: 2; }
  .waitlist-area { order: 3; }

  .orbit { max-width: 420px; }
  .nav-links { gap: 12px; font-size: 12px; }
  .nav-links a:not(.theme-toggle) { display: none; }
  h1.headline,
  [data-theme='dark'] h1.headline { font-size: clamp(36px, 9vw, 48px); }
  /* Footer stays as a single row on mobile; the long " · A LIFE OPERATING
     SYSTEM" suffix folds away to keep both ends on one line. */
  .foot          { gap: 12px; font-size: 10px; letter-spacing: 0.6px; }
  .foot > span   { white-space: nowrap; }
  .foot-tag      { display: none; }
  .waitlist { max-width: 100%; }
  .subhead { max-width: 100%; }
}

/* Tablet-down: agent side-badges shrink so they hug the hex tighter */
@media (max-width: 720px) {
  .pl-side                     { width: 80px; }
  .pl-kicker                   { font-size: 8px; letter-spacing: 0.5px; }
  .pl-name                     { font-size: 7.5px; }
  .pl-whisper                  { font-size: 7px; min-height: 10px; }
  .pl.agent-right .pl-side     { margin-left: 6px; }
  .pl.agent-left  .pl-side     { margin-right: 6px; }
}

/* Phone: compact orbit + smaller center node so the hexes feel proportional */
@media (max-width: 600px) {
  .orbit { max-width: 360px; }
  .hero,
  [data-theme='dark'] .hero    { gap: 16px; }

  .orbit-center                { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
  .orbit-center.only-light     { line-height: 40px; box-shadow: 0 0 22px #fffac8; }
  .orbit-center.only-light svg { width: 19px; height: 19px; }
  .orbit-center.only-dark      { font-size: 12px; line-height: 40px; }

  .pl-cat                      { font-size: 9px; letter-spacing: 1px; }
  .pl-bar                      { width: 48px; }
  .pl-status                   { font-size: 7px; letter-spacing: 0.8px; }
}

/* Small phone: side agent badges would overflow the orbit at this width
   (the right-most hex sits at 86% of orbit width — no room for a 70px label).
   Hide them; the pillar still shows category, bar, status and pulses. */
@media (max-width: 520px) {
  .pl-side { display: none; }
  /* When an agent is active, fade *its own* pillar's category label so the
     mobile badge doesn't visually compete with the redundant text. Other
     pillars' labels stay at full opacity. */
  .pl-below           { transition: opacity 500ms ease; }
  .pl.is-on .pl-below { opacity: 0.25; }
}

/* Very small phone: trim the orbit further so it doesn't dominate vertical space */
@media (max-width: 400px) {
  .orbit { max-width: 320px; }
  .hero,
  [data-theme='dark'] .hero    { padding: 12px 14px 28px; gap: 12px; }
  .pl-cat                      { font-size: 8.5px; }
  .pl-bar                      { width: 44px; }
  .pl-status                   { font-size: 6.5px; }
}

/* Hidden host for the EmailOctopus embed.
   Off-screen but still in the DOM so the embed can run and submit. */
.eo-host {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  left: -9999px;
  top: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}