/* Phantomline landing. industrial-editorial redesign.
   2026-05 redesign. Rationale: the previous landing leaned generic-SaaS
   (glass morphism, multi-color radial gradients, Three.js hero canvas,
   floating phone mock). This pass commits to a deliberate aesthetic:
   black + warm paper + brand teal, Geist Sans/Mono typography, a
   recurring "phantom line" motif (literal hairlines that echo the
   brand name), and grain texture for tactile feel. Class hooks are
   preserved so pillar/alternative pages that share this stylesheet
   keep working.

   Color discipline:
   - One brand color (teal #22E7F5) used SPARINGLY as accent only
   - One signal color (warm amber #e8a04a) reserved for urgency/CTA contrast
   - Black ink + warm off-white paper as the dominant palette
   - No gradients on text. No glass morphism. No drop-shadow glows.

   Typography:
   - Display: Geist Mono. technical, characterful, free, not in
     the bencium "do not use" list (Inter, Roboto, Arial, Space Grotesk)
   - Body: Geist. highly legible, distinctive lowercase
   - Scale: 1.333 (perfect fourth). editorial drama, not SaaS timidity
*/

/* Phantomline Brand Bible v1.0 typography stack (2026-05 update).
   Geist Sans + Geist Mono. Ideally self-hosted from vercel.com/font;
   Google Fonts CDN here as a fallback (slight loss of OpenType
   features but brand identity preserved). To upgrade: drop Geist
   variable woff2 in static/fonts/ + replace this @import with
   @font-face declarations. */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;450;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

:root {
  /* ─── Brand Bible v1.0 tokens ──────────────────────────────────── */
  /* Cyan ladder (from logo) */
  --cyan-900: #0A7A85;
  --cyan-700: #0AA7B5;
  --cyan-500: #22E7F5;
  --cyan-400: #26F3FF;
  --cyan-200: #BAFFFF;

  /* Cool gray scale */
  --gray-950: #0B0F11;
  --gray-900: #111619;
  --gray-850: #161B1F;
  --gray-800: #1C2227;
  --gray-700: #2A3137;
  --gray-600: #3A4249;
  --gray-500: #5C6B77;
  --gray-400: #7A8B97;
  --gray-300: #94A3B0;
  --gray-100: #E6EAEC;

  /* Surfaces (4-level via bg-color, no shadows for elevation) */
  --bg-base: var(--gray-950);
  --bg-surface-1: var(--gray-900);
  --bg-surface-2: var(--gray-850);
  --bg-surface-3: var(--gray-800);
  --bg-overlay: rgba(0, 0, 0, 0.6);

  /* Borders */
  --border-default: var(--gray-700);
  --border-subtle: var(--gray-800);
  --border-strong: var(--gray-600);
  --border-focus: var(--cyan-500);

  /* Text */
  --text-primary: var(--gray-100);
  --text-secondary: var(--gray-300);
  --text-muted: var(--gray-500);
  --text-accent: var(--cyan-500);
  --text-on-accent: var(--gray-950);

  /* Accent + states */
  --accent-default: var(--cyan-500);
  --accent-hover: var(--cyan-400);
  --accent-muted: rgba(34, 231, 245, 0.15);
  --accent-glow: rgba(34, 231, 245, 0.25);
  --success: #34D399;
  --warning: #FBBF24;
  --error: #F87171;

  /* Typography */
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --text-display: 56px;
  --text-h1: 40px;
  --text-h2: 32px;
  --text-h3: 24px;
  --text-h4: 20px;
  --text-body: 16px;
  --text-body-sm: 14px;
  --text-caption: 13px;
  --text-label: 12px;
  --text-mono: 14px;

  /* Radius. Bible §04: NO PILLS */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* ─── Backward-compat aliases (legacy rules) ───────────────────── */
  --ink: var(--bg-base);
  --ink-2: var(--bg-surface-2);
  --paper: var(--text-primary);
  --paper-dim: var(--text-secondary);
  --text: var(--text-primary);
  --text-2: var(--text-secondary);
  --text-3: var(--text-muted);
  --muted: var(--text-muted);
  --cyan: var(--accent-default);
  --rule: var(--border-subtle);
  --rule-strong: var(--border-default);
  --border-faint: rgba(255, 255, 255, 0.08);
  --brand: var(--accent-default);
  --brand-deep: var(--cyan-700);
  --brand-faint: var(--accent-muted);
  --signal: var(--warning);
  --signal-deep: #B8761D;

  /* Spacing scale (8px base + 4px half-step). Bible §03 */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text-primary);
  background: var(--bg-base);
  font-family: var(--font-sans);
  /* Bible §01: body = 16px / weight 450 (Geist variable axis) / 24px LH. */
  font-size: var(--text-body);
  line-height: 24px;
  font-weight: 450;
  letter-spacing: 0;
  font-feature-settings: 'tnum', 'zero';
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Subtle grain. tactile texture without weight. SVG noise turbulence
   inlined as base64 to avoid an extra HTTP request. Opacity is low
   on purpose: felt, not seen. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

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

/* ─── Top nav ────────────────────────────────────────────────────────── */
.top {
  position: sticky;
  top: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  background: rgba(11, 15, 17, 0.88);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
}
.brand {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.brand .brand-img {
  height: 40px;
  width: auto;
  max-width: min(60vw, 320px);
  object-fit: contain;
}
@media (max-width: 360px) {
  .brand .brand-img {
    max-width: 28px;
    object-position: left center;
  }
}
.navlinks {
  display: flex;
  align-items: center;
  gap: 32px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-2);
  text-transform: lowercase;
}
.navlinks a:not(.cta) {
  position: relative;
  padding: 4px 0;
  transition: color 160ms ease;
}
.navlinks a:not(.cta):hover { color: var(--text); }
.navlinks a:not(.cta)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms ease;
}
.navlinks a:not(.cta):hover::after { transform: scaleX(1); }

/* ─── CTAs ───────────────────────────────────────────────────────────── */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius-md);
  white-space: nowrap;
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-on-accent);
  background: var(--accent-default);
  border: 1px solid var(--accent-default);
  cursor: pointer;
  transition: all 200ms ease;
}
.cta::after { content: "→"; }
.cta:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.cta:active { transform: scale(0.98); }
.cta.secondary {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.cta.secondary:hover {
  background: var(--bg-surface-2);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.cta.signal {
  background: var(--accent-default);
  border-color: var(--accent-default);
  color: var(--text-on-accent);
}
.cta.signal:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--text-on-accent);
}

/* ─── Focus-visible (keyboard-only focus indicators) ─────────────────── */
/* On a dark theme the browser default focus ring is faint to invisible.
   :focus-visible draws a deliberate brand-teal outline only when the
   user is navigating with a keyboard. mouse clicks don't trigger it.
   Same brand-teal as accents so it reads as "the design did this on
   purpose," not as a default-fallback ring. */
.cta:focus-visible,
.cta.secondary:focus-visible,
.cta.signal:focus-visible,
.navlinks a:focus-visible,
.faq summary:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}
/* Mirror the nav underline animation on focus so keyboard users get the
   same wayfinding cue mouse hover gives. */
.navlinks a:not(.cta):focus-visible::after { transform: scaleX(1); }
/* Dim the outline-offset on filled CTAs so it doesn't fight the brand
   fill. the offset alone signals focus without a halo. */
.cta:focus-visible { outline-offset: 2px; }

/* ─── Phantom-line motif ─────────────────────────────────────────────── */
/* Recurring brand device: a hairline that bisects sections, anchored by
   a small teal endpoint dot. Echoes the "phantomline" name literally. */
.phantom-line {
  position: relative;
  height: 1px;
  background: var(--rule);
  margin: 0;
}
.phantom-line::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  background: var(--brand);
  border-radius: 0;
  transform: translate(50%, -50%);
}

/* ─── Hero ───────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding: 64px 0 0;
  border-bottom: 1px solid var(--rule);
}
/* Hero is a 2-col grid on desktop: copy left, atmospheric mark right.
   align-items: stretch so the mark column matches the copy column's
   height (eyebrow → buttons row). With the proof block pulled OUT
   of .hero-copy and rendered below the grid, the mark spans exactly
   the headline-to-CTA-button vertical range — top hairline anchors
   to the top of the h1, bottom hairline anchors to the bottom of
   the last button. */
.hero-grid {
  position: relative;
  display: grid;
  /* Slight back-shift toward 1.15fr/1fr — the 50/50 split overshot
     leftward. Copy column gets a bit more weight (back toward where
     the headline reads more comfortably) and the mark anchors a
     touch further right of the page midpoint. */
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--s-7);
  align-items: stretch;
}
.hero-copy { max-width: 920px; }
.hero-logo-img {
  display: none; /* Replaced by dramatic typography. The wordmark in
                    the nav is enough. landing hero leads with type. */
}

/* Hero atmospheric mark. Stretches to match copy column height
   (eyebrow → buttons). The icon centers vertically inside the
   bounding box; the hairlines pin to top + bottom of the box.
   The eyebrow above the h1 is short (~16px); we offset the top
   hairline by that amount so it lands at the top of the "F" in
   "Faceless" rather than at the eyebrow. */
.hero-video-placeholder {
  aspect-ratio: 9 / 16;
  max-height: 480px;
  background: var(--bg-base);
  border: 1px solid var(--border-default);
  border-radius: 22px;
  position: relative;
  overflow: hidden;
  justify-self: center;
  box-shadow: 0 0 0 6px #0e1418, 0 24px 60px rgba(0, 0, 0, 0.5);
}
.hero-shorts-frame {
  position: relative;
  width: 100%;
  height: 100%;
  color: #fff;
  font-family: var(--font-sans);
}
/* Dynamic island — matches footage card .gh-footage-thumb::before */
.hero-video-placeholder::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 58px;
  height: 16px;
  border-radius: 999px;
  background: #000;
  z-index: 5;
  pointer-events: none;
}
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

/* Top status bar ------------------------------------------------------ */
.hero-shorts-top {
  position: absolute;
  inset: 0 70px auto 0;
  z-index: 2;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  pointer-events: none;
}
.hero-shorts-system {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.hero-shorts-topactions {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  pointer-events: none;
}
.hero-shorts-topactions svg { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)); }

/* Unmute button — bottom-left so it never collides with on-video title */
.hero-shorts-unmute {
  position: absolute;
  left: 12px;
  bottom: 78px;
  z-index: 4;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background 160ms ease;
}
.hero-shorts-unmute:hover { background: rgba(0, 0, 0, 0.85); }
.hero-shorts-unmute .hero-shorts-icon-unmuted { display: none; }
.hero-shorts-unmute.is-unmuted .hero-shorts-icon-muted { display: none; }
.hero-shorts-unmute.is-unmuted .hero-shorts-icon-unmuted { display: block; }

/* Right action rail — anchored to bottom, lives in the lower 45% of the frame */
.hero-shorts-rail {
  position: absolute;
  right: 8px;
  bottom: 30px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.hero-shorts-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}
.hero-shorts-action svg { width: 18px; height: 18px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55)); }
.hero-shorts-yt {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}
.hero-shorts-yt svg { width: 100%; height: 100%; }

/* Bottom creator strip ----------------------------------------------- */
.hero-shorts-bottom {
  position: absolute;
  inset: auto 56px 14px 12px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  line-height: 1.3;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
  pointer-events: none;
}
.hero-shorts-creator {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
}
.hero-shorts-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #0e1418;
  border: 1px solid rgba(255, 255, 255, 0.5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.hero-shorts-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-shorts-desc {
  font-weight: 450;
  color: rgba(255, 255, 255, 0.92);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Compact chrome at small frame heights ------------------------------ */
@media (max-width: 540px) {
  .hero-video-placeholder { box-shadow: 0 0 0 4px #0e1418, 0 16px 36px rgba(0, 0, 0, 0.5); border-radius: 16px; }
  .hero-shorts-action svg { width: 18px; height: 18px; }
  .hero-shorts-yt { width: 24px; height: 24px; }
  .hero-shorts-rail { bottom: 64px; gap: 12px; }
  .hero-shorts-bottom { inset: auto 44px 10px 10px; font-size: 10px; }
  .hero-shorts-creator { font-size: 11px; }
  .hero-shorts-avatar { width: 18px; height: 18px; }
}

.hero-mark {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 360px;
  /* No aspect-ratio. height is driven by the copy column. */
  /* justify-self: start aligns the mark to the LEFT side of its
     grid column. Combined with the wider mark column (1.3/1 ratio
     above), this puts the mark visibly inset from the page's right
     edge — nestled inside the right half rather than hugging the
     boundary. */
  justify-self: start;
}
.hero-mark img {
  position: relative;
  z-index: 2;
  width: 90%;
  max-width: 360px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 48px rgba(34, 231, 245, 0.32));
  opacity: 0.95;
}
/* Phantom-line hairlines: full-width rules that fade at both ends.
   --top is offset to clear the eyebrow row above the h1 so the
   line visually lands on top of the "F" of "Faceless". --bottom
   is flush with the column bottom (which is the last button bottom
   since proof is pulled out of the grid). */
.hero-mark-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-default) 25%, var(--accent-default) 75%, transparent);
  z-index: 1;
  opacity: 0.6;
}
.hero-mark-line--top {
  /* Eyebrow + its margin-bottom is ~36px; place the top hairline at
     that depth so it aligns with the top of the h1 capital F. */
  top: 36px;
}
.hero-mark-line--bottom {
  bottom: 0;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--brand);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: var(--s-6);
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--brand);
}
/* Brand Bible §01 type scale.
   Desktop: display 56 / h1 40 / h2 32 / h3 24 / h4 20 / body 16
   Mobile:  display 36 / h1 28 / h2 24 / h3 20 / h4 20 / body 16
   "No font sizes outside this scale." */
h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  margin: 0;
  color: var(--text-primary);
  text-wrap: balance;
}
/* The landing hero h1 is the ONLY display-sized heading on the site.
   Bible §01: Display = 56px desktop / 36px mobile, weight 700, line-height 60 (1.07), letter-spacing -0.02em. */
h1 {
  font-size: var(--text-display);
  line-height: 60px;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin-bottom: var(--s-5);
}
h1 span {
  color: var(--accent-default);
  font-weight: 600;
}
/* Section heading. Bible H2: 32px / weight 600 / line-height 36 / -0.015em. */
h2 {
  font-size: var(--text-h2);
  line-height: 36px;
  letter-spacing: -0.015em;
  margin-bottom: var(--s-4);
}
/* Sub-section / card title. Bible H3: 24px / 600 / 32 / -0.01em. */
h3 {
  font-size: var(--text-h3);
  line-height: 32px;
  letter-spacing: -0.01em;
  font-weight: 600;
  margin-bottom: var(--s-3);
}
h4 {
  font-size: var(--text-h4);
  line-height: 28px;
  letter-spacing: -0.01em;
  font-weight: 600;
  margin-bottom: var(--s-3);
}
/* Bible body 16px / 450 / 24 line-height. used as the default lede style too. */
.lede {
  max-width: 640px;
  margin: 0 0 var(--s-5) 0;
  color: var(--text-secondary);
  font-size: var(--text-body);
  font-weight: 450;
  line-height: 24px;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-7);
}
/* Hero stats. replaces the vague "proof" pills with something
   honest and technical-feeling. */
.proof {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  padding-bottom: var(--s-5);
}
.proof div {
  border: 0;
  border-radius: 0;
  /* Bible §03: symmetric inset; the proof grid uses a top hairline
     not vertical dividers, so this just controls breathing room. */
  padding: var(--s-4) var(--s-5);
  background: transparent;
}
.proof div:first-child { padding-left: 0; }
.proof div:last-child { padding-right: 0; }
.proof strong {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--paper);
  letter-spacing: 0.01em;
  margin-bottom: var(--s-2);
}
.proof span {
  display: block;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.4;
}

/* Hero scene + phone-mock theatre. REMOVED. Replaced by editorial
   typography. Selectors kept so any HTML still referencing them
   degrades silently rather than throwing layout chaos. */
.hero-scene,
#heroThree,
.hero-device-stage,
.phone-stack,
.phone-shell,
.phone-screen,
.phone-logo,
.platform-ui,
.hero-caption,
.creator-meta,
.floating-card,
.card-a,
.card-b { display: none !important; }

.status-pill { display: none !important; }

/* ─── Generic section + heading ──────────────────────────────────────── */
.section {
  padding: 64px 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
  scroll-margin-top: 72px;
}
/* Section heading row: h2 left, lede right.
   align-items: start so the lede sits at the TOP of the heading box,
   not floating at the bottom. Bible §03: heading-to-body gap = 16px;
   we tighten the section-head bottom-margin to s-6 (32px) to keep
   the heading visually attached to the section content below. */
.section-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-6);
  align-items: end;
  margin-bottom: var(--s-6);
}
.section-head h2 {
  margin: 0;
}
.section-head p {
  margin: 0;
  margin-left: auto;
  color: var(--text-secondary);
  font-size: var(--text-body);
  font-weight: 450;
  line-height: 24px;
  text-align: right;
}

/* ─── Workflow steps ─────────────────────────────────────────────────── */
.workflow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
}
#workflow.section { border-bottom: none; padding-bottom: 0; }
.step {
  position: relative;
  padding: var(--s-6) var(--s-5);
  border-right: 1px solid var(--rule);
}
.step:last-child { border-right: 0; }
.step:not(:nth-child(-n+4)) { border-top: 1px solid var(--rule); }
.step b {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--brand);
  letter-spacing: 0.18em;
  margin-bottom: var(--s-4);
}
.step strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--paper);
  margin-bottom: var(--s-3);
  letter-spacing: -0.01em;
}
.step p {
  margin: 0;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.5;
}

/* ─── Feature grids (formats, what's-included, mobile) ───────────────── */
.formats,
.features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--rule);
}
.feature,
.format {
  /* Bible §03: symmetric padding so text never sits on the divider. */
  padding: var(--s-6) var(--s-5);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.feature:nth-child(3n + 1),
.format:nth-child(3n + 1) { padding-left: 0; }
.feature:nth-child(3n),
.format:nth-child(3n) { border-right: 0; padding-right: 0; }
.feature strong,
.format strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--paper);
  margin-bottom: var(--s-3);
  letter-spacing: -0.01em;
}
.feature p,
.format p {
  margin: 0;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.5;
}

/* ─── Product band, mocks, publish preview ───────────────────────────── */
.product-band,
.publish-preview {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--s-7);
  align-items: stretch;
}
.mock {
  padding: var(--s-5);
  border: 1px solid var(--border-default);
  background: var(--bg-surface-1);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
}
.mock > .feature {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 0;
  border-bottom: 0;
  padding: var(--s-5) 0;
  margin: 0;
}
.mock > .feature + .feature {
  border-top: 1px solid var(--border-default);
}
.mock-top {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--border-default);
}
.mock-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
}
.mock-panel {
  padding: var(--s-3) 0;
}
.mock-panel h3 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: var(--s-2);
}
.package-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.package-list span {
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  color: var(--text-primary);
  padding: 6px 0;
  border-bottom: 1px solid var(--border-default);
}
.package-list span::before {
  content: "✓ ";
  color: var(--brand);
  font-family: var(--font-mono);
  margin-right: 6px;
}
.mini-phone {
  aspect-ratio: 9 / 16;
  background: #0e1418;
  border: 0;
  border-radius: 22px;
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--s-5);
  overflow: hidden;
  box-shadow: 0 0 0 4px #0e1418, 0 14px 32px rgba(0, 0, 0, 0.55);
}
/* Dynamic island */
.mini-phone::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 14px;
  border-radius: 999px;
  background: #000;
  z-index: 5;
  pointer-events: none;
}
.mini-phone-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Shorts chrome overlay */
.mini-phone-chrome {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  color: #fff;
  font-family: var(--font-sans);
}
.mini-phone-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 50px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 600;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.mini-phone-system { display: inline-flex; align-items: center; gap: 3px; }
.mini-phone-topactions {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mini-phone-topactions svg { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)); }
.mini-phone-rail {
  position: absolute;
  right: 6px;
  bottom: 28px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.mini-phone-action {
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}
.mini-phone-action svg { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55)); }
.mini-phone-yt { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55)); }
.mini-phone-bottom {
  position: absolute;
  inset: auto 42px 10px 10px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 9px;
  line-height: 1.3;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
}
.mini-phone-creator {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.mini-phone-avatar {
  width: 16px;
  height: 16px;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: visible;
}
.mini-phone-avatar img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mini-phone-bottom strong { font-size: 10px; }
.mini-phone-bottom span {
  color: rgba(255, 255, 255, 0.88);
  font-weight: 450;
}

/* Calendar mock. ASCII-grid style instead of decorative dots */
.publish-preview .mock:first-child {
  padding: 0;
  display: grid;
  grid-template-rows: auto 1fr;
}
.publish-preview .mock:first-child .mock-top {
  padding: var(--s-5) var(--s-5) var(--s-3);
  margin-bottom: 0;
}
.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: auto repeat(6, 1fr);
  gap: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  border-top: 1px solid var(--rule);
}
.day {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-2);
  border-bottom: 1px solid var(--rule);
  color: var(--text-2);
  text-align: center;
}
.day:not(:nth-child(7n)) {
  border-right: 1px solid var(--rule);
}
.day-header {
  height: 1.75rem;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.day-empty {
  background: transparent;
}
.dot {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background: var(--brand);
  border-radius: 50%;
}

/* ─── Pricing ────────────────────────────────────────────────────────── */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
/* Pricing cards use flex column so CTAs anchor to the bottom of each
   card regardless of how long the feature list is. Free, Pro, Studio,
   Founding all have different feature counts; without this they
   floated mid-card and looked broken. */
.pricing-card {
  position: relative;
  padding: var(--s-7) var(--s-5);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: transparent;
  border-radius: 0;
  display: flex;
  flex-direction: column;
}
/* Push the feature list to fill remaining space. CTA below it is
   then anchored at the bottom edge across all 4 cards. */
.pricing-card .pricing-features { flex: 1 0 auto; }
.pricing-card .cta { margin-top: auto; }
.pricing-card--featured {
  background: var(--brand-faint);
}
.pricing-card--founding {
  background: rgba(232, 160, 74, 0.06);
}
.pricing-card h3 {
  font-size: 24px;
  margin-bottom: var(--s-2);
}
.pricing-tagline {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-2);
  margin: 0 0 var(--s-5) 0;
  line-height: 1.4;
}
.pricing-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: var(--s-5);
}
.pricing-price-num {
  font-family: var(--font-mono);
  font-size: 40px;
  font-weight: 500;
  color: var(--paper);
  letter-spacing: -0.02em;
}
.pricing-price-unit {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-2);
  font-weight: 400;
}
.pricing-price-alt {
  display: block;
  width: 100%;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
  margin-top: 4px;
}
.pricing-price-alt a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pricing-price-alt a:hover {
  color: #fff;
}
.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s-6) 0;
}
.pricing-features li {
  font-size: 13px;
  color: var(--paper-dim);
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
  line-height: 1.4;
}
.pricing-features li:last-child { border-bottom: 0; }
.pricing-features li::before {
  content: "› ";
  color: var(--brand);
  font-family: var(--font-mono);
}
.pricing-card .cta {
  width: 100%;
}
.pricing-badge {
  position: absolute;
  top: 0;
  right: 0;
  padding: 4px 8px;
  font-family: var(--font-sans);
  font-size: var(--text-label);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--accent-default);
  color: var(--text-on-accent);
  font-weight: 500;
  border-radius: var(--radius-sm);
}
.pricing-badge--accent {
  background: var(--signal);
  color: var(--ink);
}
.pricing-fineprint {
  margin-top: var(--s-6);
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
  max-width: 720px;
}

/* ─── FAQ ────────────────────────────────────────────────────────────── */
.faq {
  border-top: 1px solid var(--rule);
}
.faq details {
  border-bottom: 1px solid var(--rule);
  padding: var(--s-5) 0;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--paper);
  letter-spacing: -0.01em;
  padding-right: var(--s-5);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 400;
  color: var(--brand);
  transition: transform 160ms ease;
}
.faq details[open] summary::after {
  content: "−";
}
.faq p {
  margin: var(--s-4) 0 0 0;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.6;
  max-width: 760px;
}

/* ─── Final CTA ──────────────────────────────────────────────────────── */
/* Layout matches .section-head: h2 + lede on the left, CTA on the
   right. align-items: start anchors both columns to the top so the
   text block and button share a baseline (was 'center' which made
   the button float mid-card). */
.final {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) auto;
  align-items: start;
  gap: var(--s-7);
  padding: 0 0 var(--s-8) 0;
  border-bottom: 1px solid var(--rule);
}
/* Bible §01: section h2 = 32px / 600 / 36px LH / -0.015em.
   No clamp(40-80px). that violates "no font sizes outside this scale". */
.final h2 {
  font-size: var(--text-h2);
  line-height: 36px;
  letter-spacing: -0.015em;
  margin: 0 0 var(--s-3) 0;
}
/* Bible §01: mono is for code/tech values only, NEVER body text.
   Was var(--font-mono) which used different character widths than
   the sans headline above and made the left edge feel offset. Sans
   matches the rest of the site's body copy. */
.final p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: 450;
  line-height: 24px;
  color: var(--text-secondary);
}

/* ─── Footer ─────────────────────────────────────────────────────────── */
/* Brand Bible §06 layout. Single row: brand block on the left,
   3-column nav grid on the right. Tighter than a stacked layout.
   the brand stays visually anchored to the columns instead of
   floating in 144px of empty space above them. */
.site-footer {
  padding: var(--s-7) 0 var(--s-3);
  border-top: 1px solid var(--rule);
  color: var(--text-secondary);
  font-size: var(--text-caption);
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr);
  gap: var(--s-7);
  align-items: start;
}
.site-footer-brand {
  /* No own margin; the parent grid gap handles spacing. */
}
.site-footer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
}
.site-footer-brand p {
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  font-weight: 450;
  color: var(--text-secondary);
  max-width: 320px;
  line-height: 20px;
  margin: var(--s-3) 0 0 0;
}
.footer-brand-img { height: 28px; width: auto; }
.site-footer-col h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--paper);
  margin: 0 0 var(--s-4) 0;
}
.site-footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.site-footer-col li a {
  color: var(--text-2);
  font-size: 13px;
  transition: color 160ms ease;
}
.site-footer-col li a:hover { color: var(--brand); }
.site-footer-bottom {
  /* Legal bar spans both grid columns of the footer. */
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

/* ─── Responsive ─────────────────────────────────────────────────────── */
/* ─── Hamburger + mobile menu ────────────────────────────────────────── */
.nav-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 200ms ease;
  position: relative;
  z-index: 101;
}
.nav-hamburger:hover { color: var(--accent-default); }
.nav-mobile-actions {
  display: none;
  align-items: center;
  gap: var(--s-2);
  margin-left: auto;
}
.nav-download-mobile { display: none; }

.nav-mobile-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background: var(--bg-base);
  flex-direction: column;
  padding: 96px 24px 32px;
  gap: var(--s-4);
}
.nav-mobile-overlay.open {
  display: flex;
}
.nav-mobile-close {
  position: absolute;
  top: 16px;
  right: 24px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  transition: color 200ms ease;
}
.nav-mobile-close:hover { color: var(--accent-default); }
.nav-mobile-links {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
}
.nav-mobile-links a {
  display: flex;
  align-items: center;
  height: 48px;
  font-size: var(--text-h4);
  font-weight: 500;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-subtle);
  transition: color 200ms ease;
}
.nav-mobile-links a:hover { color: var(--accent-default); }

@media (max-width: 1024px) {
  .nav-mobile-actions { display: flex; }
  .nav-hamburger { display: flex; }
  .nav-download-mobile { display: inline-flex; }
  .navlinks { display: none; }
}

@media (max-width: 900px) {
  .wrap { width: min(100% - 32px, 1180px); padding-bottom: 64px; }
  .hero { padding: 64px 0 56px; }
  .hero-mark { max-width: 220px; margin: 0 auto; }
  .hero-mark img { max-width: 200px; }
  .section { padding: 64px 0; }
  .section-head { grid-template-columns: 1fr; gap: var(--s-4); margin-bottom: var(--s-6); }
  .section-head p { text-align: left; margin-left: 0; }
  .workflow { grid-template-columns: 1fr 1fr; }
  .step { border-right: 1px solid var(--rule); }
  .step:nth-child(2n) { border-right: 0; }
  .step:not(:nth-child(-n+2)) { border-top: 1px solid var(--rule); }
  .formats, .features { grid-template-columns: 1fr; }
  .feature, .format { border-right: 0; }
  .product-band, .publish-preview { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; border-left: 0; }
  .pricing-card { border-right: 0; }
  .proof { grid-template-columns: repeat(4, 1fr); }
  .final { grid-template-columns: 1fr; padding: var(--s-7) 0; }
  .top { gap: 12px; }
  /* Bible §06 footer: stack brand above columns on tablet/mobile,
     but columns themselves stay 3-wide (Bible mandates no stacking). */
  .site-footer { grid-template-columns: 1fr; gap: var(--s-5); }
  .site-footer-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
  .site-footer-bottom { flex-direction: column; gap: 8px; }
}

@media (max-width: 540px) {
  .wrap { width: min(100% - 24px, 1180px); }
  /* Bible §01 mobile scale: display 36 / h1 28 / h2 24 / h3 20 / body 16 */
  h1 { font-size: 36px; line-height: 40px; }
  h2 { font-size: 24px; line-height: 28px; }
  h3 { font-size: 20px; line-height: 28px; }
  .lede { font-size: 16px; }
  /* Hide atmospheric mark on true mobile — typography is the focal point. */
  .hero-grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .hero-mark { display: none; }
  .hero-video-placeholder { max-height: 360px; max-width: 240px; margin: 0 auto; }
  .workflow { grid-template-columns: 1fr; }
  .step { border-right: 0; }
  .step:not(:first-child) { border-top: 1px solid var(--rule); }
  .proof { grid-template-columns: 1fr; }
  .proof div { border-bottom: 1px solid var(--rule); padding: var(--s-3) 0; }
  .calendar { font-size: 10px; }
}

/* ─── Brand-align overrides for /alternatives + pillar pages ──────────── */
/* article.css forces Cormorant Garamond on .article-head h1 + .article h2.
   These pages share the landing.css token system but had headline fonts
   that didn't match the Geist direction. Override here so the fix
   reaches every page that loads landing.css without touching article.css
   (which is also used for alt-card grids that we want to keep). */
.article-head h1,
.article h2,
.article h3 {
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em !important;
  color: var(--paper) !important;
}
.article-head .article-lede {
  font-family: var(--font-sans);
  color: var(--text-2);
}

/* ─── FAQ touch targets ───────────────────────────────────────────────── */
/* Default <summary> rendering is ~34px tall on mobile; below the
   44px Apple HIG / 48dp Material minimum. Easy mis-tap. Pad the
   summary so the parent details element is comfortable to tap. */
.faq summary {
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* ─── Pricing responsive (1024px breakpoint between 4-up and 1-up) ────── */
/* 4 cards × 280-ish px on a 1180 grid is tight. Add a 2-up breakpoint
   so cards breathe at typical laptop widths. */
@media (max-width: 1280px) and (min-width: 901px) {
  .pricing-grid { grid-template-columns: 1fr 1fr; }
  .pricing-card:nth-child(2n) { border-right: 0; }
}

/* ─── Pricing comparison hint on the Lifetime card ────────────────────── */
/* Pro $15/mo vs Lifetime $79 once breaks even at ~5.5 months. Persona
   shouldn't have to do that math. The pricing-price-alt--lifetime
   variant renders next to the price on the Founding tier card only. */
.pricing-price-alt--lifetime {
  color: var(--signal);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  display: block;
  width: 100%;
  margin-top: 4px;
}

/* ─── Skip-to-main link (a11y, keyboard users) ────────────────────────── */
/* Hidden until focused. First Tab on any page lands here, lets keyboard
   users bypass the nav and jump straight to the page's main content. */
.skip-to-main {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--brand);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 16px;
  text-decoration: none;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  z-index: 9999;
  transition: top 120ms ease;
}
.skip-to-main:focus {
  top: 0;
  outline: 2px solid var(--paper);
  outline-offset: 2px;
}

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