/* ==========================================================================
   WiseNotes launch site — layout layer.
   styles-base.css supplies the cosmic background, phone mockup, feature cards,
   buttons, wordmark, and type system (shared with the main marketing site).
   This file adds the launch-site-specific structure:
     - top navigation bar
     - two-column hero (copy + phone mockup)
     - how-it-works cards & illustrations
     - pricing tiers, compare table, final CTA
     - site footer columns
   Colors pulled directly from the app's CosmicTheme palette.
   ========================================================================== */

:root {
  --violet: #7c5cff;
  --violet-deep: #4a2fbd;
  --violet-hi: #a98aff;
  --violet-lo: #2a1660;
  --surface: rgba(255,255,255,0.04);
  --surface-hi: rgba(255,255,255,0.06);
  --surface-lo: rgba(255,255,255,0.015);
  --hair: rgba(255,255,255,0.08);
  --hair-hi: rgba(170,148,255,0.28);
  --ink: #f3eeff;
  --ink-sub: #c7b8ff;
  --gold: #f0cf7f;
  --gold-deep: #b38a3d;
  --radius-xl: 22px;
  --radius-lg: 18px;
  --radius-md: 14px;
}

body { min-height: 100vh; }

/* Make the main hero a left/right grid rather than the base single-column stack. */
.launch-hero.hero {
  padding: 28px 24px 40px;
  max-width: 1220px;
  align-items: stretch;
}

/* Big centered brand lockup at the very top of the hero. Mirrors the look
   from the main marketing site — icon left, wordmark right, both large. */
.brand-lockup.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.2vw, 28px);
  margin: 8px 0 36px;
  width: 100%;
}
.brand-lockup .app-icon {
  width: clamp(88px, 9vw, 120px);
  height: auto;
  display: block;
  filter: drop-shadow(0 22px 52px rgba(124, 92, 255, 0.55));
}
.brand-lockup .wordmark {
  font-size: clamp(48px, 6.4vw, 88px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  display: inline-flex;
  margin: 0;
}
.brand-lockup .wordmark-wise,
.brand-lockup .wordmark-notes {
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand-lockup .wordmark-wise  { background-image: linear-gradient(180deg,#fff 0%,#efe7ff 55%,#cfc0ff 100%); }
.brand-lockup .wordmark-notes { background-image: linear-gradient(180deg,#fff 0%,#e3d6ff 40%,#a98aff 85%,#8867f0 100%); }

.hero-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 48px;
  align-items: center;
  width: 100%;
  min-height: 640px;
  text-align: left;
}

/* ==========================================================================
   TOP NAV
   ========================================================================== */
.topnav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 16px max(24px, calc((100vw - 1196px) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: linear-gradient(180deg, rgba(6,3,18,0.72), rgba(6,3,18,0.18));
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  border-bottom: 1px solid var(--hair);
}
/* Space the hero below the fixed nav so content doesn't slip under it. */
.launch-hero.hero { padding-top: 92px; }
.topnav-brand {
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none;
  /* Hidden until the hero brand lockup scrolls out of view. */
  opacity: 0;
  transform: translateX(-6px);
  pointer-events: none;
  transition: opacity .28s ease, transform .28s ease;
}
.topnav-brand.is-visible {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.topnav-icon {
  width: 34px; height: auto; display: block;
  filter: drop-shadow(0 8px 20px rgba(124, 92, 255, 0.55));
}
.topnav-wordmark {
  font-size: 20px; font-weight: 700; letter-spacing: -0.02em;
}
.topnav-wordmark .wordmark-wise,
.topnav-wordmark .wordmark-notes {
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.topnav-wordmark .wordmark-wise  { background-image: linear-gradient(180deg,#fff 0%,#efe7ff 55%,#cfc0ff 100%); }
.topnav-wordmark .wordmark-notes { background-image: linear-gradient(180deg,#fff 0%,#e3d6ff 40%,#a98aff 85%,#8867f0 100%); }

.topnav-links { display: flex; gap: 28px; }
.topnav-links a {
  color: var(--ink-sub);
  text-decoration: none;
  font-size: 14px; font-weight: 500;
  transition: color .15s ease;
}
.topnav-links a:hover { color: #fff; }

.topnav-cta {
  padding: 9px 16px;
  font-size: 13px; font-weight: 600;
  color: #fff;
  border-radius: 10px;
  text-decoration: none;
  background: linear-gradient(180deg, var(--violet) 0%, var(--violet-deep) 100%);
  border: 1px solid rgba(170,148,255,0.4);
  box-shadow: 0 8px 22px rgba(90,50,220,0.45), inset 0 1px 0 rgba(255,255,255,0.22);
  transition: transform .15s ease, box-shadow .2s ease;
}
.topnav-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(90,50,220,0.6), inset 0 1px 0 rgba(255,255,255,0.28); }

/* ==========================================================================
   HERO — left copy column
   ========================================================================== */
.hero-copy { display: flex; flex-direction: column; gap: 22px; text-align: left; align-items: flex-start; }

.hero-title {
  font-size: clamp(44px, 5.2vw, 72px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0;
}
.hero-title .wordmark-wise,
.hero-title .wordmark-notes {
  display: block;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.hero-tagline {
  font-size: 17px; line-height: 1.6;
  color: var(--muted);
  max-width: 560px; margin: 0;
  text-align: left;
}

.hero-cta {
  display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px;
}
.hero-cta .btn { padding: 13px 22px; font-size: 15px; }

.hero-meta {
  margin-top: 12px;
  display: flex; flex-wrap: wrap; gap: 18px;
  color: rgba(199,184,255,0.7);
  font-size: 12.5px;
  font-weight: 500;
}
.hero-meta-item { display: inline-flex; align-items: center; gap: 6px; }
.hero-meta-item svg { color: var(--violet-hi); flex-shrink: 0; }

/* ==========================================================================
   IPHONE 15 PRO MOCKUP
   Apple-website-grade device frame rendered in pure CSS. Titanium bezel,
   Dynamic Island, and physical side buttons. Screen renders the WiseNotes
   Flow home exactly as shipped in the app.
   ========================================================================== */

/* Device stage. iPhone is the hero, Mac window sits behind it showing the
   desktop version of the app. The Mac extends to the LEFT so its notes grid
   is what's visible; only its right edge hides behind the phone. */
.device-wrap {
  position: relative;
  width: 100%;
  max-width: 400px;
  height: 600px;
  justify-self: end;
  margin: 0 0 0 auto;
  isolation: isolate;
  perspective: 2200px;
  perspective-origin: 55% 45%;
}
.hero-grid { overflow: visible; }
.hero-copy { position: relative; z-index: 3; }
.launch-hero.hero { overflow: visible; }
.device-glow {
  position: absolute;
  inset: -40px -70px -10px -30px;
  /* Bias glow to the right so it reads as ambient light behind the tilted device. */
  background: radial-gradient(ellipse at 62% 50%, rgba(124, 92, 255, 0.6) 0%, transparent 65%);
  filter: blur(46px);
  z-index: -1;
  pointer-events: none;
}

.iphone {
  position: absolute;
  right: -10px;
  top: 70px;
  width: 272px;
  aspect-ratio: 9 / 19.5;
  z-index: 3;
  /* Tilt around Y so the screen faces toward the left (toward the hero copy).
     Slight X tilt adds a gentle forward lean — the Apple-site signature look. */
  transform: rotateY(-20deg) rotateX(3deg);
  transform-origin: 75% 50%;
  transform-style: preserve-3d;
}

/* Real device thickness. We stack eight thin titanium "slices" behind the
   front face, each at an incremented negative translateZ. When the phone is
   rotated on Y, the slices spread out along the visible side to form a
   continuous brushed-metal band with real depth (12-14 px total thickness).
   Stacking multiple planes is what makes it read as a solid side instead of
   two disconnected plates. */
.iphone { --ip-depth: 14px; --ip-slice: 8; }
.ip-frame { transform-style: preserve-3d; }

.ip-frame::before,
.ip-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 56px;
  pointer-events: none;
}

/* Antenna hairline + inner highlight on the outermost front edge. */
.ip-frame::after {
  box-shadow:
    inset 0 0 0 1px rgba(10, 10, 12, 0.9),
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.14);
  transform: translateZ(0.5px);
}

/* Stacked slices — behind the front face, progressively darker so the
   specular highlight falls on the slice closest to the front and the
   shadow deepens toward the back. */
.ip-frame::before {
  background: linear-gradient(135deg,
    #7a7e84 0%, #b9bcc1 10%, #8b8f95 22%,
    #61656b 38%, #7e8288 52%, #b5b9be 65%,
    #7d8188 78%, #5b5f65 90%, #878b91 100%);
  filter: brightness(0.88);
  transform: translateZ(-2px);
  box-shadow: 0 60px 120px -20px rgba(0, 0, 0, 0.85);
}

/* Additional slices created as direct children of .ip-frame so we can give
   each a distinct brightness/color step. See HTML — we inject eight .ip-slice
   elements. */
.ip-slice {
  position: absolute;
  inset: 0;
  border-radius: 56px;
  pointer-events: none;
  background: linear-gradient(135deg,
    #7a7e84 0%, #b9bcc1 10%, #8b8f95 22%,
    #61656b 38%, #7e8288 52%, #b5b9be 65%,
    #7d8188 78%, #5b5f65 90%, #878b91 100%);
}
.ip-slice-1 { transform: translateZ(-3px);  filter: brightness(0.90); }
.ip-slice-2 { transform: translateZ(-6px);  filter: brightness(0.80); }
.ip-slice-3 { transform: translateZ(-9px);  filter: brightness(0.70); }
.ip-slice-4 { transform: translateZ(-12px); filter: brightness(0.62); }
.ip-slice-5 { transform: translateZ(-15px); filter: brightness(0.55); }
.ip-slice-6 { transform: translateZ(-18px); filter: brightness(0.48); }
.ip-slice-7 { transform: translateZ(-21px); filter: brightness(0.42); }
/* Back panel — darkest; the "back of the phone" */
.ip-slice-back {
  transform: translateZ(-24px);
  background: linear-gradient(135deg, #232528 0%, #333539 50%, #1e2023 100%);
  box-shadow: 0 70px 140px -30px rgba(0, 0, 0, 0.9);
}

/* Titanium metal bezel — outermost rim of the device */
.ip-frame {
  position: absolute; inset: 0;
  border-radius: 56px;
  padding: 4px;
  background:
    linear-gradient(135deg,
      #7a7e84 0%, #b9bcc1 10%, #8b8f95 22%,
      #61656b 38%, #7e8288 52%, #b5b9be 65%,
      #7d8188 78%, #5b5f65 90%, #878b91 100%);
  box-shadow:
    0 50px 100px -30px rgba(0, 0, 0, 0.85),
    0 28px 60px -20px rgba(90, 50, 220, 0.25),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.25);
}

/* Inner black sub-bezel (tiny black ring between titanium and screen) */
.ip-bezel {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 52px;
  padding: 4px;
  background: #050509;
  box-shadow:
    inset 0 0 0 1px #1a1a1e,
    inset 0 0 0 2.5px #0a0a0d,
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* The display itself */
.ip-screen {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 46px;
  background: linear-gradient(180deg, #0b0418 0%, #07021a 48%, #100629 100%);
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Side hardware buttons — cut in to the titanium rim */
.ip-btn {
  position: absolute;
  background: linear-gradient(90deg, #4a4d52 0%, #8d9197 40%, #6a6d72 60%, #3c3e42 100%);
  border-radius: 1.5px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 0 0 0.5px rgba(0, 0, 0, 0.6);
  z-index: 2;
}
/* Left side: action button + volume up + volume down */
.ip-btn-action { left: -1.5px; top: 14%;   width: 3.5px; height: 30px; border-radius: 2px 0 0 2px; }
.ip-btn-volup  { left: -1.5px; top: 22%;   width: 3.5px; height: 56px; border-radius: 2px 0 0 2px; }
.ip-btn-voldn  { left: -1.5px; top: 32%;   width: 3.5px; height: 56px; border-radius: 2px 0 0 2px; }
/* Right side: side button */
.ip-btn-side   { right: -1.5px; top: 22%;  width: 3.5px; height: 86px; border-radius: 0 2px 2px 0; }

/* ==========================================================================
   FLOW APP SCREEN — mirrors the WiseNotes "Flow" home screen
   ========================================================================== */

/* In-screen cosmic layer */
.wn-cosmos {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 40% at 30% 8%, rgba(85, 40, 160, 0.28) 0%, transparent 65%),
    radial-gradient(ellipse 80% 50% at 80% 40%, rgba(60, 25, 130, 0.3) 0%, transparent 65%),
    radial-gradient(ellipse 70% 50% at 50% 95%, rgba(45, 20, 110, 0.3) 0%, transparent 65%),
    linear-gradient(180deg, #120628 0%, #0c0420 55%, #14082c 100%);
  z-index: 0;
}
.wn-stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(0.8px 0.8px at 12% 8%, #fff 50%, transparent 100%),
    radial-gradient(0.6px 0.6px at 20% 22%, #d7c6ff 50%, transparent 100%),
    radial-gradient(0.7px 0.7px at 34% 16%, #fff 50%, transparent 100%),
    radial-gradient(0.5px 0.5px at 48% 30%, #fff 50%, transparent 100%),
    radial-gradient(0.9px 0.9px at 64% 12%, #fff 50%, transparent 100%),
    radial-gradient(0.6px 0.6px at 78% 26%, #e9e0ff 50%, transparent 100%),
    radial-gradient(0.8px 0.8px at 88% 8%, #fff 50%, transparent 100%),
    radial-gradient(0.5px 0.5px at 6% 40%, #fff 50%, transparent 100%),
    radial-gradient(0.7px 0.7px at 22% 52%, #cfc0ff 50%, transparent 100%),
    radial-gradient(0.6px 0.6px at 40% 60%, #fff 50%, transparent 100%),
    radial-gradient(0.5px 0.5px at 58% 46%, #fff 50%, transparent 100%),
    radial-gradient(0.8px 0.8px at 74% 58%, #fff 50%, transparent 100%),
    radial-gradient(0.6px 0.6px at 90% 50%, #d7c6ff 50%, transparent 100%),
    radial-gradient(0.5px 0.5px at 14% 72%, #fff 50%, transparent 100%),
    radial-gradient(0.7px 0.7px at 30% 80%, #fff 50%, transparent 100%),
    radial-gradient(0.5px 0.5px at 50% 88%, #cfc0ff 50%, transparent 100%),
    radial-gradient(0.6px 0.6px at 68% 76%, #fff 50%, transparent 100%),
    radial-gradient(0.8px 0.8px at 84% 86%, #fff 50%, transparent 100%),
    radial-gradient(0.5px 0.5px at 92% 70%, #fff 50%, transparent 100%);
  opacity: 0.75;
  z-index: 0;
}
.wn-cosmos, .wn-stars { pointer-events: none; }

/* Keep all in-screen content above the cosmic layer without flattening
   the absolute-positioned chrome (island, top controls, FAB, tab bar). */
.ip-screen > .wn-statusbar,
.ip-screen > .wn-title,
.ip-screen > .wn-search,
.ip-screen > .wn-section-label,
.ip-screen > .wn-grid { position: relative; z-index: 1; }

/* iOS status bar */
.wn-statusbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 22px 0;
  font-family: -apple-system, 'SF Pro Display', 'Inter', sans-serif;
  color: #fff;
  font-size: 13px; font-weight: 600;
  letter-spacing: -0.01em;
}
.wn-status-right { display: inline-flex; align-items: center; gap: 5px; }

/* Dynamic Island */
.wn-island {
  position: absolute;
  top: 10px;
  left: 50%; transform: translateX(-50%);
  width: 86px; height: 24px;
  background: #000;
  border-radius: 14px;
  box-shadow:
    0 0 0 0.5px rgba(60, 60, 70, 0.6),
    inset 0 -1px 2px rgba(255, 255, 255, 0.04);
  z-index: 3;
}

/* Top-right round controls (filter + arrange) */
.wn-top-controls {
  position: absolute;
  top: 42px; right: 16px;
  display: flex; gap: 8px;
  z-index: 2;
}
.wn-circle-btn {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 0.5px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  backdrop-filter: blur(12px);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
}

/* "Flow" title */
.wn-title {
  margin: 38px 0 10px;
  padding: 0 20px;
  font-family: -apple-system, 'SF Pro Display', 'Inter', sans-serif;
  font-size: 34px; font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1;
}

/* Search field */
.wn-search {
  margin: 4px 20px 14px;
  height: 34px;
  padding: 0 11px;
  display: flex; align-items: center; gap: 7px;
  background: rgba(255, 255, 255, 0.06);
  border: 0.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 12px; font-weight: 400;
  font-family: -apple-system, 'SF Pro Text', 'Inter', sans-serif;
}
.wn-search svg { color: rgba(255, 255, 255, 0.55); }

/* Section labels */
.wn-section-label {
  padding: 0 20px;
  font-size: 10.5px; font-weight: 700;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.12em;
  margin-bottom: 8px;
}
.wn-section-others { margin-top: 16px; }

/* 2-col masonry grid for notes */
.wn-grid {
  padding: 0 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  align-items: start;
}

/* Base note card */
.wn-note {
  position: relative;
  padding: 10px 10px 9px;
  border-radius: 12px;
  min-height: 48px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  color: #fff;
}
.wn-note-title {
  font-family: -apple-system, 'SF Pro Display', 'Inter', sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin-bottom: 5px;
  color: #fff;
}
.wn-note-title-sm { font-size: 12px; font-weight: 600; }
.wn-note-body {
  font-size: 9.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 4px;
}
.wn-note-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 6px;
  font-size: 8.5px;
  color: rgba(255, 255, 255, 0.38);
}
.wn-pin { color: rgba(255, 255, 255, 0.55); }

/* Rose / pink note — Daily Affirmations */
.wn-note-rose {
  background: linear-gradient(180deg, #b9708a 0%, #9f5a76 100%);
  color: #fff;
}
.wn-note-rose .wn-note-body { color: rgba(255, 255, 255, 0.85); }
.wn-note-rose .wn-note-foot { color: rgba(255, 255, 255, 0.6); }

/* Dark translucent note — Welcome + video card */
.wn-note-dark {
  background: linear-gradient(180deg, rgba(30, 20, 60, 0.55), rgba(18, 12, 42, 0.65));
  border: 0.5px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
}

/* Plain "1+1=2" style card */
.wn-note-plain {
  background: linear-gradient(180deg, rgba(20, 14, 44, 0.5), rgba(14, 10, 34, 0.55));
  border: 0.5px solid rgba(255, 255, 255, 0.06);
  min-height: 92px;
}

/* Chips */
.wn-chips { display: flex; gap: 4px; margin: 2px 0 4px; }
.wn-chip {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 8.5px; font-weight: 600;
  letter-spacing: 0.01em;
}
.wn-chip-rose { background: rgba(180, 110, 130, 0.35); color: #ffd4e0; }

/* Media (YouTube) note */
.wn-note-media { padding: 7px 7px 8px; }
.wn-media-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.05) 50%, rgba(0,0,0,0.35)),
    linear-gradient(90deg, #3a2a1e 0%, #2b2119 48%, #4e3928 52%, #6c4a2e 100%);
  border-radius: 7px;
  overflow: hidden;
  margin-bottom: 6px;
  display: flex; align-items: center; justify-content: center;
}
.wn-media-thumb::before,
.wn-media-thumb::after {
  content: ""; position: absolute; bottom: 22%; width: 22%; height: 34%;
  background: linear-gradient(180deg, rgba(60, 80, 120, 0.85), rgba(30, 40, 70, 0.65));
  border-radius: 1.5px;
}
.wn-media-thumb::before { left: 14%; box-shadow: inset 0 0 4px rgba(100, 140, 200, 0.4); }
.wn-media-thumb::after  { right: 14%; background: linear-gradient(180deg, rgba(90, 120, 180, 0.9), rgba(50, 70, 110, 0.7)); }
.wn-media-ba {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end;
}
.wn-media-label {
  flex: 1;
  text-align: center;
  padding: 3px 0;
  font-family: 'Inter', sans-serif;
  font-size: 7.5px; font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
  background: rgba(0,0,0,0.45);
}
.wn-media-before { background: rgba(120, 30, 30, 0.55); }
.wn-media-after  { background: rgba(30, 80, 120, 0.55); }
.wn-media-play {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.7);
  display: grid; place-items: center;
  padding-left: 2px;
  z-index: 2;
}
.wn-media-caption {
  font-size: 9px; line-height: 1.35;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 3px;
}
.wn-media-author {
  font-size: 10px; font-weight: 700;
  color: #fff; margin-bottom: 1px;
}
.wn-media-url {
  font-size: 7.5px;
  color: rgba(199, 184, 255, 0.75);
  margin-bottom: 4px;
  word-break: break-all;
}

/* Split cards — two halves in one tile (Workout/Meal Prep, Sprint/Bug) */
.wn-note-split { padding: 0; background: transparent; overflow: visible; }
.wn-split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 4px;
}
.wn-split-half {
  padding: 7px 8px 8px;
  border-radius: 10px;
  min-height: 48px;
  color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}
.wn-split-title {
  font-size: 9px; font-weight: 700;
  color: #fff;
  margin-bottom: 2px;
  line-height: 1.15;
}
.wn-split-sub {
  font-size: 7.5px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.35;
}
.wn-split-rose      { background: linear-gradient(180deg, #c57080 0%, #a85668 100%); }
.wn-split-rose-deep { background: linear-gradient(180deg, #a14a56 0%, #7d3340 100%); }
.wn-split-blue      { background: linear-gradient(180deg, #6d7aa8 0%, #55638f 100%); }
.wn-split-blue-deep { background: linear-gradient(180deg, #4f6499 0%, #3b4d7a 100%); }

/* Floating eye FAB — exact app recipe from NotesScreen.swift:
     • 58px dark radial-gradient disc (#1a0d2e → #0a0619)
     • White EyeIconMask line-art inside (54px)
     • 1.5px purple→blue gradient stroke border
     • Purple soft glow shadow + harder black drop shadow */
.wn-fab {
  position: absolute;
  right: 18px; bottom: 72px;
  width: 48px; height: 48px;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(26, 13, 47, 1) 0%,
      rgba(10, 5, 26, 1) 80%);
  cursor: pointer;
  z-index: 3;
  display: grid; place-items: center;
  box-shadow:
    0 0 14px rgba(140, 78, 243, 0.55),
    0 4px 10px rgba(0, 0, 0, 0.4);
}
/* Gradient ring overlay — can't use border-image directly with radial bg,
   so paint the ring as a masked pseudo-element. */
.wn-fab-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 1.5px;
  background: linear-gradient(135deg, #8b4ef3 0%, #4d73fa 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.wn-fab-eye {
  width: 30px; height: 30px;
  display: block;
  /* The asset is a dark line drawing — recolor to white to match the app. */
  filter: brightness(0) invert(1);
  pointer-events: none;
}

/* iOS tab bar */
.wn-tabbar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 10px 6px 24px;
  display: flex; justify-content: space-around;
  background: linear-gradient(180deg, rgba(8, 4, 18, 0.5) 0%, rgba(8, 4, 18, 0.92) 60%);
  backdrop-filter: blur(20px);
  border-top: 0.5px solid rgba(255, 255, 255, 0.06);
  z-index: 4;
}
.wn-tab {
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: 2px;
  color: rgba(255, 255, 255, 0.4);
  font-family: -apple-system, 'SF Pro Text', 'Inter', sans-serif;
  font-size: 9.5px; font-weight: 500;
}
.wn-tab-active { color: #a78bfa; }
.wn-tab-active svg {
  filter: drop-shadow(0 0 6px rgba(167, 139, 250, 0.55));
}

/* Space for tab bar */
.wn-grid:last-of-type { padding-bottom: 92px; }

/* ==========================================================================
   MACOS FLOATING WINDOW (sits behind the iPhone)
   Same content language as the Flow screen — reformatted for a wide desktop
   window with a sidebar + multi-column grid.
   ========================================================================== */
/* Mac window sits behind the phone. Positioned absolute; extends LEFT well
   past the iPhone so its NOTES GRID (not just the sidebar) is what's
   visible. Only the rightmost column tucks behind the phone. */
.desktop {
  position: absolute;
  top: 60px;
  right: -20px;
  width: 720px;
  z-index: 1;
  transform: rotateY(-18deg) rotateX(3deg) translateZ(-40px);
  transform-origin: 100% 50%;
  transform-style: preserve-3d;
  filter: drop-shadow(0 70px 90px rgba(0, 0, 0, 0.7))
          drop-shadow(0 20px 40px rgba(91, 49, 204, 0.22));
  pointer-events: none;
}
.mac-window {
  width: 100%;
  aspect-ratio: 16/10.2;
  background: linear-gradient(180deg, #12082a 0%, #0a0420 60%, #100530 100%);
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 40px 80px -20px rgba(0, 0, 0, 0.65),
    0 0 0 0.5px rgba(255, 255, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  position: relative;
}

/* Title bar */
.mac-titlebar {
  height: 34px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(180deg, rgba(30, 22, 58, 0.92), rgba(18, 12, 42, 0.88));
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(20px);
}
.mac-traffic {
  display: inline-flex;
  gap: 7px;
  align-items: center;
}
.mac-light {
  width: 11px; height: 11px;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 0.5px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.mac-red    { background: radial-gradient(circle at 35% 30%, #ff6a5c, #c7382d); }
.mac-yellow { background: radial-gradient(circle at 35% 30%, #ffc24c, #c28a12); }
.mac-green  { background: radial-gradient(circle at 35% 30%, #52cf55, #1e8a28); }

.mac-title {
  flex: 1;
  text-align: center;
  font-family: -apple-system, 'SF Pro Text', 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: -0.005em;
}
.mac-toolbar-actions { display: inline-flex; gap: 6px; }
.mac-tbar-btn {
  width: 22px; height: 22px;
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.05);
  border: 0.5px solid rgba(255, 255, 255, 0.06);
}
.mac-tbar-primary {
  color: #fff;
  background: linear-gradient(180deg, #8b5cf6, #5b31cc);
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 3px 8px rgba(91, 49, 204, 0.45);
}

/* Body split: sidebar + main.
   Sidebar kept narrow so the visible-left portion of the desktop leads with
   the app brand + library chrome, then transitions quickly into notes. */
.mac-body {
  display: grid;
  grid-template-columns: 152px 1fr;
  height: calc(100% - 34px);
}

/* Sidebar */
.mac-sidebar {
  padding: 12px 10px 14px;
  background: linear-gradient(180deg, rgba(18, 10, 38, 0.85), rgba(12, 6, 28, 0.9));
  border-right: 0.5px solid rgba(255, 255, 255, 0.05);
  font-family: -apple-system, 'SF Pro Text', 'Inter', sans-serif;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}
.mac-sb-brand {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 6px 6px;
}
.mac-sb-icon {
  width: 22px; height: auto;
  border-radius: 6px;
  display: block;
}
.mac-sb-brand-name {
  font-size: 12.5px; font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}
.mac-sb-search {
  height: 24px;
  padding: 0 8px;
  display: flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 0.5px solid rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 10px;
}
.mac-sb-section {
  display: flex; flex-direction: column; gap: 1px;
}
.mac-sb-label {
  padding: 6px 6px 4px;
  font-size: 9.5px; font-weight: 700;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.1em;
}
.mac-sb-item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  border-radius: 6px;
  line-height: 1.3;
}
.mac-sb-item svg { color: rgba(255, 255, 255, 0.55); flex-shrink: 0; }
.mac-sb-item.mac-sb-active {
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.28), rgba(91, 49, 204, 0.18));
  color: #fff;
  box-shadow: inset 0 0 0 0.5px rgba(170, 148, 255, 0.35);
}
.mac-sb-item.mac-sb-active svg { color: #c4b5fd; }
.mac-sb-count {
  margin-left: auto;
  font-size: 9.5px;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 500;
}
.mac-sb-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.mac-sb-dot-violet { background: #a78bfa; }
.mac-sb-dot-blue   { background: #60a5fa; }
.mac-sb-dot-rose   { background: #f472b6; }
.mac-sb-dot-amber  { background: #fbbf24; }

.mac-sb-footer { margin-top: auto; padding: 6px; border-top: 0.5px solid rgba(255, 255, 255, 0.05); }
.mac-sb-status {
  display: flex; align-items: center; gap: 6px;
  font-size: 9.5px;
  color: rgba(255, 255, 255, 0.45);
}
.mac-sb-status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 6px rgba(52, 211, 153, 0.9);
}

/* Main area */
.mac-main {
  position: relative;
  overflow: hidden;
}
.mac-main-cosmos {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 20% 10%, rgba(85, 40, 160, 0.3) 0%, transparent 65%),
    radial-gradient(ellipse 70% 50% at 85% 80%, rgba(50, 25, 120, 0.35) 0%, transparent 65%),
    linear-gradient(180deg, #140730 0%, #0b0422 55%, #120630 100%);
  z-index: 0;
}
.mac-main-cosmos::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(0.6px 0.6px at 8% 14%, #fff 50%, transparent),
    radial-gradient(0.8px 0.8px at 22% 32%, #d7c6ff 50%, transparent),
    radial-gradient(0.6px 0.6px at 38% 18%, #fff 50%, transparent),
    radial-gradient(0.7px 0.7px at 54% 44%, #fff 50%, transparent),
    radial-gradient(0.6px 0.6px at 68% 24%, #e9e0ff 50%, transparent),
    radial-gradient(0.9px 0.9px at 82% 38%, #fff 50%, transparent),
    radial-gradient(0.5px 0.5px at 12% 58%, #fff 50%, transparent),
    radial-gradient(0.7px 0.7px at 30% 72%, #cfc0ff 50%, transparent),
    radial-gradient(0.6px 0.6px at 48% 82%, #fff 50%, transparent),
    radial-gradient(0.8px 0.8px at 74% 66%, #fff 50%, transparent),
    radial-gradient(0.6px 0.6px at 90% 86%, #d7c6ff 50%, transparent);
  opacity: 0.75;
}
.mac-main-inner {
  position: relative; z-index: 1;
  padding: 16px 18px 16px;
  height: 100%;
  overflow: hidden;
}
.mac-main-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.mac-main-title {
  font-family: -apple-system, 'SF Pro Display', 'Inter', sans-serif;
  font-size: 22px; font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  margin: 0;
}
.mac-main-actions { display: inline-flex; gap: 6px; }
.mac-chip-btn {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.05);
  border: 0.5px solid rgba(255, 255, 255, 0.08);
}
.mac-chip-btn-primary {
  background: linear-gradient(180deg, #8b5cf6, #5b31cc);
  color: #fff;
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 4px 10px rgba(91, 49, 204, 0.4);
}

.mac-section-label {
  font-size: 9.5px; font-weight: 700;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.14em;
  margin-bottom: 7px;
}
.mac-section-others { margin-top: 14px; }

.mac-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.mac-note {
  position: relative;
  padding: 10px 10px 9px;
  border-radius: 10px;
  color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  min-height: 70px;
  font-family: -apple-system, 'SF Pro Text', 'Inter', sans-serif;
}
.mac-note-title {
  font-size: 11px; font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin-bottom: 4px;
  color: #fff;
}
.mac-note-title-sm { font-size: 11px; font-weight: 600; }
.mac-note-body {
  font-size: 9.5px; line-height: 1.45;
  color: rgba(255, 255, 255, 0.76);
  margin-bottom: 4px;
}
.mac-note-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 6px;
  font-size: 8.5px;
  color: rgba(255, 255, 255, 0.4);
}
.mac-note-foot svg { color: rgba(255, 255, 255, 0.55); }

.mac-chips { display: flex; gap: 4px; margin: 2px 0 4px; }
.mac-chip {
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 8.5px; font-weight: 600;
}
.mac-chip-rose   { background: rgba(180, 110, 130, 0.35); color: #ffd4e0; }
.mac-chip-violet { background: rgba(139, 92, 246, 0.25); color: #d7c6ff; }

.mac-note-rose {
  background: linear-gradient(180deg, #b9708a 0%, #9f5a76 100%);
}
.mac-note-rose .mac-note-body { color: rgba(255, 255, 255, 0.88); }
.mac-note-rose .mac-note-foot { color: rgba(255, 255, 255, 0.65); }
.mac-note-dark {
  background: linear-gradient(180deg, rgba(30, 20, 60, 0.55), rgba(18, 12, 42, 0.7));
  border: 0.5px solid rgba(255, 255, 255, 0.08);
}
.mac-note-dusk {
  background: linear-gradient(180deg, rgba(60, 40, 120, 0.42), rgba(32, 18, 78, 0.55));
  border: 0.5px solid rgba(170, 148, 255, 0.18);
}
.mac-note-plain {
  background: linear-gradient(180deg, rgba(20, 14, 44, 0.5), rgba(14, 10, 34, 0.55));
  border: 0.5px solid rgba(255, 255, 255, 0.06);
}
.mac-note-lavender {
  background: linear-gradient(180deg, #a88bce 0%, #8c72b8 100%);
  color: #1a0b2e;
}
.mac-note-lavender .mac-note-title { color: #1a0b2e; }
.mac-note-lavender .mac-note-body { color: rgba(26, 11, 46, 0.78); }
.mac-note-lavender .mac-note-foot { color: rgba(26, 11, 46, 0.55); }
.mac-note-lavender .mac-chip-violet { background: rgba(74, 40, 145, 0.4); color: #f3e8ff; }

.mac-note-sage {
  background: linear-gradient(180deg, #9fc9a7 0%, #85b594 100%);
  color: #0f2a18;
}
.mac-note-sage .mac-note-title { color: #0f2a18; }
.mac-note-sage .mac-note-foot { color: rgba(15, 42, 24, 0.55); }

.mac-note-peach {
  background: linear-gradient(180deg, #e8bd92 0%, #d5a070 100%);
  color: #4a2610;
}
.mac-note-peach .mac-note-title { color: #4a2610; }
.mac-note-peach .mac-note-body { color: rgba(74, 38, 16, 0.8); }
.mac-note-peach .mac-note-foot { color: rgba(74, 38, 16, 0.55); }
.mac-note-peach .mac-chip-amber { background: rgba(180, 120, 40, 0.35); color: #3a1f0a; }

/* macOS checklist */
.mac-checklist {
  list-style: none;
  padding: 0;
  margin: 4px 0 6px;
  display: flex; flex-direction: column;
  gap: 3px;
}
.mac-checklist li {
  display: flex; align-items: center; gap: 5px;
  font-size: 9px;
  line-height: 1.3;
}
.mac-checklist .box {
  width: 8px; height: 8px;
  border-radius: 2px;
  border: 1px solid currentColor;
  opacity: 0.55;
  flex-shrink: 0;
}
.mac-checklist .done { opacity: 0.55; text-decoration: line-through; }
.mac-checklist .done .box { background: currentColor; opacity: 0.75; }
.mac-progress {
  height: 3px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 4px;
}
.mac-progress-bar {
  height: 100%;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 999px;
}

/* Code block note */
.mac-note-code {
  background: #18181c;
  color: #e4e4ea;
  padding: 8px 9px;
}
.mac-note-lang {
  display: inline-block;
  font-size: 8px; font-weight: 700;
  letter-spacing: 0.08em;
  color: #7aa9ff;
  padding: 1.5px 6px;
  border-radius: 999px;
  background: rgba(80, 130, 240, 0.18);
  margin-bottom: 4px;
}
.mac-note-code pre {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 8.5px;
  line-height: 1.5;
  color: #d8d8e0;
  margin: 0;
  white-space: pre;
  overflow: hidden;
}
.mac-note-code .c-key { color: #c78bff; }
.mac-note-code .c-fn  { color: #7ec8ff; }
.mac-note-foot-dark { color: rgba(255, 255, 255, 0.55); }

/* Media (YouTube-style) note for desktop */
.mac-note-media { padding: 8px 8px 8px; }
.mac-media-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.05) 50%, rgba(0,0,0,0.3)),
    linear-gradient(90deg, #3a2a1e 0%, #2b2119 48%, #4e3928 52%, #6c4a2e 100%);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 6px;
}
.mac-media-thumb::before,
.mac-media-thumb::after {
  content: ""; position: absolute; bottom: 22%; width: 22%; height: 34%;
  background: linear-gradient(180deg, rgba(60,80,120,0.85), rgba(30,40,70,0.65));
  border-radius: 1.5px;
}
.mac-media-thumb::before { left: 14%; }
.mac-media-thumb::after  { right: 14%; background: linear-gradient(180deg, rgba(90,120,180,0.9), rgba(50,70,110,0.7)); }
.mac-media-ba {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end;
}
.mac-media-label {
  flex: 1; text-align: center;
  padding: 3px 0;
  font-family: 'Inter', sans-serif;
  font-size: 7.5px; font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
}
.mac-media-before { background: rgba(120, 30, 30, 0.55); }
.mac-media-after  { background: rgba(30, 80, 120, 0.55); }
.mac-media-play {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.7);
  display: grid; place-items: center;
  padding-left: 2px;
  z-index: 2;
}
.mac-note-sub {
  font-size: 9px; font-weight: 500;
  color: rgba(255,255,255,0.6);
  margin-bottom: 3px;
}
.mac-chip-amber { background: rgba(180, 120, 40, 0.35); color: #ffd9a3; }

/* Split variants — same as phone */
.mac-note-split { padding: 0; background: transparent; box-shadow: none; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 4px; overflow: visible; }
.mac-split-half {
  padding: 8px 9px 9px;
  border-radius: 10px;
  min-height: 70px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.mac-split-title { font-size: 10px; font-weight: 700; color: #fff; margin-bottom: 3px; line-height: 1.15; }
.mac-split-sub { font-size: 8.5px; color: rgba(255, 255, 255, 0.78); line-height: 1.35; }
.mac-split-rose      { background: linear-gradient(180deg, #c57080 0%, #a85668 100%); }
.mac-split-rose-deep { background: linear-gradient(180deg, #a14a56 0%, #7d3340 100%); }
.mac-split-blue      { background: linear-gradient(180deg, #6d7aa8 0%, #55638f 100%); }
.mac-split-blue-deep { background: linear-gradient(180deg, #4f6499 0%, #3b4d7a 100%); }

/* Hide desktop mock on narrow screens to keep hero clean. */
@media (max-width: 1080px) {
  .desktop { display: none; }
}

/* ==========================================================================
   FEATURES — 4 across
   ========================================================================== */
.launch-features.features { padding: 80px 24px 40px; max-width: 1220px; }
.features-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1160px;
}
.launch-features .feature {
  padding: 22px;
}
.launch-features .feature-icon { width: 40px; height: 40px; margin-bottom: 14px; }
.launch-features .feature-title { font-size: 15px; line-height: 1.3; }
.launch-features .feature-body { font-size: 13px; }

/* ==========================================================================
   HOW IT WORKS
   ========================================================================== */
.how {
  position: relative; z-index: 1;
  max-width: 1220px; margin: 0 auto;
  padding: 60px 24px 40px;
  text-align: center;
}
.how .features-title { margin-bottom: 44px; font-size: clamp(28px, 3.3vw, 40px); }

.how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1120px;
  margin: 0 auto;
  text-align: left;
}
.how-card {
  position: relative;
  padding: 22px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--surface), var(--surface-lo));
  border: 1px solid var(--hair);
  backdrop-filter: blur(10px);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
  overflow: hidden;
}
.how-card:hover {
  transform: translateY(-3px);
  border-color: var(--hair-hi);
  box-shadow: 0 22px 54px rgba(90,50,220,0.18);
}
.how-card > p { font-size: 13.5px; color: var(--muted); line-height: 1.6; }

.how-illus {
  height: 150px;
  border-radius: 14px;
  margin-bottom: 16px;
  background: linear-gradient(180deg, rgba(10,5,30,0.65), rgba(22,14,48,0.35));
  border: 1px solid var(--hair);
  padding: 14px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.how-illus::after {
  /* soft violet glow centered behind the illustration */
  content: "";
  position: absolute;
  inset: -30% -10%;
  background: radial-gradient(ellipse at 50% 60%, rgba(124,92,255,0.22), transparent 60%);
  pointer-events: none;
}

/* step numbering */
.how-step {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 6px;
}
.how-step h4 { font-size: 17px; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.how-num {
  width: 24px; height: 24px; border-radius: 50%;
  font-size: 12px; font-weight: 700; color: #fff;
  line-height: 24px; text-align: center;
  background: linear-gradient(180deg, var(--violet) 0%, var(--violet-deep) 100%);
  box-shadow: 0 6px 14px rgba(90,50,220,0.5), inset 0 1px 0 rgba(255,255,255,0.25);
}

/* Capture — mini note */
.how-mini-note {
  position: relative;
  width: 88%;
  background: linear-gradient(180deg, #1d1340, #120927);
  border: 1px solid var(--hair-hi);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 14px 28px -12px rgba(0,0,0,0.7);
}
.hmn-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.hmn-title { font-size: 11px; font-weight: 700; color: #fff; }
.hmn-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--violet-hi); box-shadow: 0 0 8px var(--violet-hi); }
.hmn-body { font-size: 10.5px; color: rgba(199,184,255,0.75); margin-bottom: 10px; line-height: 1.45; }
.hmn-toolbar { display: flex; align-items: center; gap: 6px; }
.hmn-pill {
  width: 20px; height: 20px; border-radius: 6px;
  background: rgba(255,255,255,0.05); color: rgba(199,184,255,0.85);
  font-size: 10px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--hair);
}
.hmn-chip {
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--violet), var(--violet-deep));
  color: #fff; font-size: 10px; font-weight: 700;
  box-shadow: 0 4px 10px rgba(90,50,220,0.5), inset 0 1px 0 rgba(255,255,255,0.25);
}

/* Connect — link chips */
.how-links { width: 90%; position: relative; z-index: 1; }
.how-links-label {
  font-size: 10.5px; font-weight: 600;
  color: rgba(199,184,255,0.8);
  letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 8px;
}
.how-link {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  font-size: 11.5px; font-weight: 600;
  color: var(--ink);
  background: rgba(124,92,255,0.12);
  border: 1px solid var(--hair-hi);
  border-radius: 10px;
  margin-bottom: 6px;
}
.how-link-eye {
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #c4b5fd 0%, #6d3fe0 70%, #2e1065 100%);
  flex-shrink: 0;
  box-shadow: inset 0 0 3px rgba(255,255,255,0.3);
}
.how-link-arrow { margin-left: auto; color: var(--violet-hi); font-size: 12px; }

/* Grow — constellation svg */
.how-constellation { width: 100%; height: 100%; position: relative; z-index: 1; }
.how-illus-grow { background: radial-gradient(circle at 50% 55%, rgba(124,92,255,0.24), transparent 70%), linear-gradient(180deg, rgba(10,5,30,0.65), rgba(22,14,48,0.35)); }

/* ==========================================================================
   PRICING
   ========================================================================== */
.pricing {
  position: relative; z-index: 1;
  max-width: 1220px; margin: 0 auto;
  padding: 60px 24px 80px;
  text-align: center;
}
.pricing-pill { margin-bottom: 14px; }
.pricing-sub {
  margin: 10px auto 0;
  max-width: 620px;
  text-align: center;
}

.tier-grid {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  text-align: left;
  align-items: stretch;
}
.tier {
  position: relative;
  padding: 30px 24px 26px;
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, var(--surface), var(--surface-lo));
  border: 1px solid var(--hair);
  backdrop-filter: blur(10px);
  display: flex; flex-direction: column;
  text-align: center;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.tier::before {
  content: "";
  position: absolute; inset: -1px;
  border-radius: var(--radius-xl);
  padding: 1px;
  background: linear-gradient(135deg, rgba(170,148,255,0.18), rgba(170,148,255,0) 55%, rgba(170,148,255,0.12));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.tier:hover { transform: translateY(-4px); }

.tier-featured {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(124,92,255,0.32) 0%, transparent 60%),
    linear-gradient(180deg, rgba(60,38,138,0.45), rgba(26,14,62,0.55));
  border-color: rgba(170,148,255,0.45);
  box-shadow: 0 30px 80px -20px rgba(90,50,220,0.45), inset 0 1px 0 rgba(255,255,255,0.05);
  transform: translateY(-10px);
}
.tier-featured:hover { transform: translateY(-14px); }
.tier-featured::before { background: linear-gradient(135deg, rgba(170,148,255,0.55), rgba(170,148,255,0) 55%, rgba(170,148,255,0.35)); }

.tier-gold {
  border-color: rgba(231,192,106,0.35);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(231,192,106,0.14) 0%, transparent 55%),
    linear-gradient(180deg, rgba(60,42,14,0.25), rgba(22,14,38,0.55));
}
.tier-gold::before { background: linear-gradient(135deg, rgba(231,192,106,0.45), rgba(231,192,106,0) 55%, rgba(231,192,106,0.25)); }

.tier-badge {
  position: absolute; top: -12px; left: 50%;
  transform: translateX(-50%);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em;
  background: linear-gradient(180deg, var(--violet-hi), var(--violet-deep));
  color: #fff;
  box-shadow: 0 8px 20px rgba(90,50,220,0.5), inset 0 1px 0 rgba(255,255,255,0.25);
  white-space: nowrap;
}
.tier-badge.gold {
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  color: #2a1a04;
  box-shadow: 0 8px 20px rgba(231,192,106,0.45), inset 0 1px 0 rgba(255,255,255,0.35);
}

.tier-tag {
  font-size: 10.5px; font-weight: 700;
  color: rgba(199,184,255,0.65);
  letter-spacing: 0.18em; text-transform: uppercase;
  margin-bottom: 12px;
}

/* Tier illustration — a cosmic scene unique to each plan. No tile, no
   border: the art sits directly on the card with its own soft halo. */
.tier-art {
  margin: 0 auto 14px;
  width: 100%;
  height: 150px;
  display: grid; place-items: center;
  pointer-events: none;
}
.tier-art-svg { display: block; max-width: 100%; height: auto; }
.tier-gold .tier-tag { color: rgba(231,192,106,0.8); }

.tier-name {
  font-size: 22px; font-weight: 800;
  color: #fff;
  letter-spacing: -0.025em; line-height: 1.2;
  text-align: center;
}
.tier-desc {
  margin: 8px auto 0;
  font-size: 13px;
  color: var(--muted);
  min-height: 38px;
  line-height: 1.5;
  max-width: 280px;
  text-align: center;
}
.tier-price {
  margin: 22px auto 4px;
  display: flex; align-items: baseline; gap: 8px;
  justify-content: center;
}
.tier-alt { text-align: center; }
.tier-includes { text-align: left; }
.tier-list { text-align: left; }
.tier-footnote { text-align: left; }
.tier-amount {
  font-size: 46px; font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: #fff;
  background: linear-gradient(180deg, #fff 0%, #e3d6ff 55%, #a98aff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tier-gold .tier-amount {
  background: linear-gradient(180deg, #fff 0%, #f7e0a8 55%, #d9b06a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tier-per { font-size: 13px; color: var(--muted); }
.tier-alt { font-size: 12.5px; color: rgba(199,184,255,0.7); margin-bottom: 14px; }
.tier-alt-spacer { height: 22px; }

.tier-btn {
  width: 100%;
  justify-content: center;
  margin-top: 8px;
  padding: 12px 18px;
  font-size: 14px;
}
.btn-gold {
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-deep) 100%);
  color: #2a1a04;
  border-color: rgba(231,192,106,0.5);
  box-shadow: 0 10px 28px rgba(185, 140, 60, 0.4), inset 0 1px 0 rgba(255,255,255,0.35);
}
.btn-gold:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(185,140,60,0.55), inset 0 1px 0 rgba(255,255,255,0.4);
}

.tier-includes {
  margin: 22px 0 10px;
  font-size: 12px; font-weight: 600;
  color: rgba(199,184,255,0.75);
}
.tier-list { list-style: none; padding: 0; margin: 0; }
.tier-list li {
  font-size: 13px; color: #e9e0ff;
  padding: 6px 0 6px 22px;
  position: relative;
  line-height: 1.45;
}
.tier-list li::before {
  content: "";
  position: absolute; left: 0; top: 9px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--violet-hi), var(--violet-deep));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}
.tier-list li::after {
  content: "";
  position: absolute; left: 3px; top: 12px;
  width: 6px; height: 3px;
  border: solid #fff;
  border-width: 0 0 1.5px 1.5px;
  transform: rotate(-45deg);
}
.tier-gold .tier-list li::before {
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
}
.tier-gold .tier-list li::after { border-color: #2a1a04; }

.tier-footnote {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--hair);
  font-size: 11.5px; color: rgba(199,184,255,0.6);
  line-height: 1.5;
}

.pricing-note {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 28px;
  font-size: 12.5px; color: rgba(199,184,255,0.7);
}
.pricing-note svg { color: var(--violet-hi); }

/* ==========================================================================
   COMPARE TABLE
   ========================================================================== */
.compare-card {
  margin-top: 44px;
  padding: 30px 32px;
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, var(--surface), var(--surface-lo));
  border: 1px solid var(--hair);
  backdrop-filter: blur(10px);
  text-align: left;
  position: relative;
}
.compare-card::before {
  content: "";
  position: absolute; inset: -1px;
  border-radius: var(--radius-xl);
  padding: 1px;
  background: linear-gradient(135deg, rgba(170,148,255,0.2), rgba(170,148,255,0) 60%, rgba(170,148,255,0.12));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.compare-title {
  font-size: 11.5px; font-weight: 700;
  color: rgba(199,184,255,0.75);
  letter-spacing: 0.18em; text-transform: uppercase;
  margin-bottom: 16px;
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.compare-table th, .compare-table td {
  padding: 14px 12px;
  text-align: center;
  border-bottom: 1px solid var(--hair);
}
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table th:first-child,
.compare-table td:first-child {
  text-align: left;
  color: rgba(199,184,255,0.72);
  font-weight: 500;
}
.compare-table th {
  font-weight: 700;
  color: #fff;
  font-size: 13px;
  padding-bottom: 14px;
}
.compare-table th > span:first-child { display: block; }
.compare-table .th-sub {
  display: block;
  font-size: 10.5px; font-weight: 500;
  color: rgba(199,184,255,0.55);
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-top: 4px;
}
.compare-table .th-featured { color: var(--violet-hi); }
.compare-table .th-gold { color: var(--gold); }
.compare-table td { color: #efe7ff; font-size: 13px; }

.compare-table .ck {
  display: inline-block;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--violet-hi), var(--violet-deep));
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}
.compare-table .ck::after {
  content: "";
  position: absolute; left: 5px; top: 6px;
  width: 8px; height: 4px;
  border: solid #fff;
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg);
}
.compare-table .dash {
  display: inline-block; width: 16px; height: 2px;
  background: rgba(199,184,255,0.3); border-radius: 2px; vertical-align: middle;
}
.compare-table .th-gold + tr td,
.compare-table tbody tr td:last-child .ck {
  /* subtle gold tint for the Founding column's checks */
}
.compare-table tbody tr td:last-child .ck {
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
}
.compare-table tbody tr td:last-child .ck::after { border-color: #2a1a04; }

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.final-cta {
  margin-top: 28px;
  padding: 26px 30px;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(124,92,255,0.28) 0%, transparent 60%),
    linear-gradient(180deg, rgba(52,34,126,0.45), rgba(22,14,48,0.5));
  border: 1px solid var(--hair-hi);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  text-align: left;
  backdrop-filter: blur(10px);
}
.final-cta-title { font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 4px; letter-spacing: -0.015em; }
.final-cta p { font-size: 13.5px; color: var(--muted); max-width: 580px; line-height: 1.55; }
.fineprint { margin-top: 16px; font-size: 12px; color: rgba(199,184,255,0.55); text-align: center; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  position: relative; z-index: 1;
  max-width: 1220px; margin: 40px auto 0;
  padding: 48px 24px 56px;
  border-top: 1px solid var(--hair);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  text-align: left;
}
.footer-brand-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.footer-icon {
  width: 36px; height: auto; display: block;
  filter: drop-shadow(0 8px 20px rgba(124, 92, 255, 0.55));
}
.footer-wordmark { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.footer-wordmark .wordmark-wise,
.footer-wordmark .wordmark-notes {
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.footer-wordmark .wordmark-wise  { background-image: linear-gradient(180deg,#fff 0%,#efe7ff 55%,#cfc0ff 100%); }
.footer-wordmark .wordmark-notes { background-image: linear-gradient(180deg,#fff 0%,#e3d6ff 40%,#a98aff 85%,#8867f0 100%); }
.footer-tag { color: rgba(199,184,255,0.6); font-size: 13px; margin: 0; }

.footer-col { display: flex; flex-direction: column; gap: 8px; }
.footer-col-title {
  font-size: 11.5px; font-weight: 700;
  color: rgba(199,184,255,0.85);
  letter-spacing: 0.16em; text-transform: uppercase;
  margin-bottom: 6px;
}
.footer-col a {
  font-size: 13.5px;
  color: var(--muted);
  text-decoration: none;
  transition: color .15s ease;
}
.footer-col a:hover { color: #fff; }

.footer-bottom {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--hair);
  display: flex; justify-content: space-between;
  font-size: 12px;
  color: rgba(199,184,255,0.45);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; min-height: 0; gap: 40px; }
  .launch-mockup.mockup-wrap { margin: 10px auto 0; justify-self: center; }
  .features-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .how-grid, .tier-grid { grid-template-columns: 1fr; }
  .tier-featured { transform: none; }
  .tier-featured:hover { transform: translateY(-3px); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  /* Was display:none — which left NO navigation at all on mobile for a
     13,000px page, so the interactive demo, the screenshots and the
     comparison table were reachable only by scrolling past everything.
     Now a compact horizontally-scrollable row: still one line tall,
     but every section is one tap away. */
  .topnav-links {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 100%;
    padding: 2px 0;
    order: 3;
    flex: 0 0 100%;
    margin-top: 8px;
    border-top: 1px solid rgba(255,255,255,.07);
    padding-top: 8px;
  }
  .topnav-links::-webkit-scrollbar { display: none; }
  .topnav-links a { white-space: nowrap; font-size: .82rem; }
  .topnav { flex-wrap: wrap; }
  /* The wrapped nav makes the header ~40px taller, which pushed the fixed
     bar over the top of the hero. Give the hero (and anchor targets) that
     height back. */
  .hero, .launch-hero { padding-top: 132px; }
  section[id], main[id] { scroll-margin-top: 116px; }
  .features-grid-4 { grid-template-columns: 1fr; }
  .final-cta { flex-direction: column; align-items: flex-start; }
  .footer-grid { grid-template-columns: 1fr; }
  .compare-card { padding: 20px 18px; }
  .compare-table { font-size: 12.5px; }
  .compare-table th, .compare-table td { padding: 10px 6px; }
}

/* ---- 2026-07 overhaul additions ---- */
/* Two-tier pricing (Founding tier removed) */
.tier-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 900px) {
  .tier-grid-2 { grid-template-columns: 1fr; }
}
/* Real-screenshot gallery */
.shots { padding: 90px 24px 20px; max-width: 1120px; margin: 0 auto; text-align: center; }
.shots-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: start;
}
@media (max-width: 900px) { .shots-grid { grid-template-columns: 1fr; } }
.shot { text-align: left; }
.shot img {
  width: 100%; height: auto; border-radius: 14px;
  border: 1px solid rgba(167,139,250,0.22);
  box-shadow: 0 18px 50px rgba(10,4,24,0.55);
}
.shot figcaption { margin-top: 10px; font-size: 13.5px; color: rgba(232,222,254,0.72); }
.shot-hero { grid-column: 1 / -1; }
.shot-hero img { border-radius: 18px; }

/* Centered iPhone pair inside the shots grid */
.shot-duo {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  max-width: 660px;
  margin: 6px auto 0;
  width: 100%;
}
@media (max-width: 680px) {
  .shot-duo { grid-template-columns: 1fr; max-width: 340px; }
}

.shots-sub { margin: 14px auto 0; max-width: 560px; font-size: 15.5px;
  line-height: 1.6; color: rgba(232,222,254,0.66); }

/* Trial badge on the Pro card */
.trial-badge { display:inline-flex; align-items:center; gap:6px; margin: 2px 0 10px;
  padding: 5px 13px; border-radius: 999px; font-size: 12px; font-weight: 800;
  letter-spacing: 0.07em; text-transform: uppercase; color: #16092e;
  background: linear-gradient(180deg,#cdbcff,#8b5cf6);
  box-shadow: 0 4px 16px rgba(122,82,255,0.45); }

/* Trust band */
.trust { padding: 30px 24px 6px; max-width: 1120px; margin: 0 auto; }
.trust-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.trust-card { border: 1px solid var(--border); border-radius: 16px;
  padding: 18px 18px 16px; background: rgba(255,255,255,0.02);
  text-align: left; display: flex; gap: 12px; align-items: flex-start; }
.trust-card svg { flex: none; width: 26px; height: 26px; color: #a98aff; margin-top: 2px; }
.trust-card h5 { margin: 0 0 4px; font-size: 14.5px; font-weight: 700; color: #efe9ff; }
.trust-card p { margin: 0; font-size: 13.5px; line-height: 1.5; color: rgba(232,222,254,0.62); }
@media (max-width: 860px) { .trust-grid { grid-template-columns: 1fr; } }

/* Poster fallback on small screens */
.shot-mobile-caption { display: none; }
.shot-mobile-only { display: none; }
@media (max-width: 639px) {
  .shot-mobile-caption { display: block; margin-top: 10px; font-size: 13.5px;
    color: rgba(232,222,254,0.72); }
  .shot-mobile-only { display: block; }
}

/* Email capture forms */
.notify-form { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.hero-cta .notify-form { flex: 1 1 100%; max-width: 500px; }
.notify-form-center { justify-content: center; max-width: 520px; margin: 0 auto; }
.notify-form input[type="email"] { flex: 1 1 220px; min-width: 0; padding: 13px 18px;
  border-radius: 999px; border: 1px solid rgba(167,139,250,0.35);
  background: rgba(255,255,255,0.05); color: #efe9ff; font-size: 15px; outline: none;
  transition: border-color .15s, box-shadow .15s; }
.notify-form input[type="email"]:focus { border-color: #a78bfa;
  box-shadow: 0 0 0 3px rgba(139,92,246,0.25); }
.notify-form input[type="email"]::placeholder { color: rgba(232,222,254,0.4); }
.nf-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.notify-micro { margin-top: 10px; font-size: 12.5px; color: rgba(232,222,254,0.55); }
.notify-micro a { color: #cbb8ff; }
.notify-done { padding: 14px 20px; border: 1px solid rgba(167,139,250,0.4);
  border-radius: 999px; display: inline-block; color: #d9ccff; font-weight: 600;
  font-size: 15px; background: rgba(139,92,246,0.12); }
.notify-fail { margin-top: 10px; font-size: 13px; color: #ffb4c0; }
.notify-fail a { color: #ffd0d9; }
.nf-error input[type="email"] { border-color: #ff8aa0;
  box-shadow: 0 0 0 3px rgba(255,100,130,0.18); }

/* Living poster — video leads the screenshots section */
.shot video { width: 100%; height: auto; display: block; border-radius: 14px;
  border: 1px solid rgba(167,139,250,0.22); box-shadow: 0 18px 50px rgba(10,4,24,0.55); }
.shot-hero video { border-radius: 18px; }
.shot-caption-always { display: block; margin-top: 10px; font-size: 13.5px;
  color: rgba(232,222,254,0.72); }

/* Side-by-side iPhone poster pair */
.shot-pair { grid-column: 1 / -1; display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 640px) { .shot-pair { grid-template-columns: 1fr; } }

/* --- How It Works illustrations v2 (typed capture / wikilink connect / mini sky) --- */
.hiw-cap { width:100%; display:flex; flex-direction:column; gap:9px; position:relative; z-index:1; }
.hiw-bar { display:flex; align-items:center; gap:7px; background:rgba(255,255,255,0.05);
  border:1px solid rgba(167,139,250,0.28); border-radius:999px; padding:7px 12px;
  font-size:11px; color:rgba(232,222,254,0.5); }
.hiw-eye { width:12px; height:12px; border-radius:50%; flex:none;
  background:radial-gradient(circle at 35% 35%, #cdb6ff, #6a32dc);
  box-shadow:0 0 8px rgba(138,92,255,0.8); }
.hiw-eye.small { width:9px; height:9px; }
.hiw-caret { width:1.5px; height:12px; background:#c4b5fd; margin-left:1px;
  animation:hiwBlink 1.1s steps(1) infinite; }
.hiw-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.hiw-card { border-radius:8px; padding:7px 8px; font-size:8.5px; line-height:1.45;
  border:1px solid rgba(255,255,255,0.07); min-height:54px; }
.hiw-card b { display:block; font-size:9px; margin-bottom:2px; color:#efe9ff; font-weight:700; }
.hiw-card i { font-style:normal; color:rgba(232,222,254,0.6); display:block; }
.hiw-t { background:rgba(96,125,199,0.28); }
.hiw-k { background:rgba(74,222,128,0.13); }
.hiw-k em { display:flex; align-items:center; gap:4px; font-style:normal;
  color:rgba(232,222,254,0.66); font-size:8.5px; }
.hiw-k u { width:7px; height:7px; border-radius:2.5px; flex:none; display:inline-block;
  border:1px solid rgba(232,222,254,0.5); text-decoration:none; }
.hiw-k u.on { background:#8b5cf6; border-color:#8b5cf6; }
.hiw-k s { text-decoration:line-through; opacity:0.6; }
.hiw-c { background:rgba(12,8,24,0.85); font-family:ui-monospace,Menlo,monospace; }
.hiw-c b { color:#a98aff; }
.hiw-c i { color:rgba(180,222,254,0.75); }
.hiw-con { width:100%; display:flex; flex-direction:column; gap:8px; position:relative; z-index:1; }
.hiw-line { font-size:10.5px; color:rgba(232,222,254,0.72); background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.07); border-radius:8px; padding:8px 10px; }
.hiw-wl { color:#cdb6ff; background:rgba(139,92,246,0.18); border-radius:4px; padding:1px 4px; }
.hiw-sug-label { display:flex; align-items:center; gap:6px; font-size:8.5px;
  letter-spacing:0.14em; text-transform:uppercase; color:rgba(196,181,253,0.75); font-weight:700; }
.hiw-chips { display:flex; flex-wrap:wrap; gap:6px; }
.hiw-chip { font-size:9.5px; padding:4px 9px; border-radius:999px;
  border:1px solid rgba(167,139,250,0.4); color:#d9ccff; background:rgba(139,92,246,0.12);
  animation:hiwPulse 3s ease-in-out infinite; }
.hiw-chip:nth-child(2) { animation-delay:1s; }
.hiw-chip.dim { opacity:0.55; animation-delay:2s; }
.hiw-code { background:rgba(139,92,246,0.16); border-radius:4px; padding:0 4px;
  color:#cdb6ff; font-family:ui-monospace,Menlo,monospace; font-size:12px; }
.hiw-sky { width:100%; height:100%; position:relative; z-index:1; }
.hiw-sky .tw1 { animation:hiwTwinkle 2.6s ease-in-out infinite; }
.hiw-sky .tw2 { animation:hiwTwinkle 3.4s ease-in-out 0.8s infinite; }
.hiw-sky .tw3 { animation:hiwTwinkle 4.1s ease-in-out 1.6s infinite; }
@keyframes hiwBlink { 50% { opacity:0; } }
@keyframes hiwPulse { 0%,100% { box-shadow:0 0 0 rgba(139,92,246,0); }
  50% { box-shadow:0 0 12px rgba(139,92,246,0.5); } }
@keyframes hiwTwinkle { 0%,100% { opacity:1; } 50% { opacity:0.35; } }

/* Founding tier accent */
.tier-founding { border-color: rgba(250,204,21,0.35); }
.tier-founding:hover { border-color: rgba(250,204,21,0.55); }

/* --- Hero: real captures replace the CSS mockup --- */
.hero-mac-real { position: absolute; top: 40px; left: -170px; width: 700px; height: 505px;
  transform: perspective(1800px) rotateY(-7deg) rotateX(1.5deg);
  border-radius: 14px; overflow: hidden; border: 1px solid rgba(167,139,250,0.3);
  box-shadow: 0 40px 90px rgba(4,0,18,0.8), 0 0 70px rgba(122,82,255,0.2);
  /* Was opacity .92 on an already-dark screenshot sitting on a dark
     background, so the panel receded into the page and the hero image
     did no work. Full opacity plus a brighter rim gives the edge
     something to catch, without touching the composition. */
  opacity: 1; z-index: 1; }
.hero-mac-real { border-color: rgba(186,160,255,0.42); }
.hero-mac-real img { filter: saturate(1.06) brightness(1.05); }
.hero-mac-real img { width: 100%; height: 100%; object-fit: cover; object-position: left top; display: block; }
.hero-phone { position: absolute; bottom: 0; right: -120px; width: 250px; z-index: 2;
  border-radius: 46px; padding: 10px;
  background: linear-gradient(165deg,#43434a,#0e0e12 58%,#26262c);
  box-shadow: 0 50px 100px rgba(4,0,18,0.9), 0 0 80px rgba(122,82,255,0.3),
    inset 0 0 3px rgba(255,255,255,0.28); }
.hero-phone-video { width: 100%; height: auto; display: block; border-radius: 37px; }
@media (max-width: 1023px) {
  .hero-mac-real { display: none; }
  .device-wrap { height: auto; }
  .hero-phone { position: relative; right: auto; margin: 32px auto 0; }
}

/* --- Playground: interactive mini constellation --- */
.playground { padding: 90px 24px 10px; max-width: 1120px; margin: 0 auto; text-align: center; }
.sky-wrap { margin-top: 34px; border: 1px solid var(--border); border-radius: 20px;
  background: radial-gradient(900px 420px at 50% 20%, rgba(122,82,255,0.10), transparent 65%),
    linear-gradient(180deg, rgba(10,5,30,0.5), rgba(16,9,36,0.25));
  overflow: hidden; }
#mini-sky { display: block; width: 100%; height: 440px; cursor: crosshair;
  touch-action: none; }
@media (max-width: 640px) { #mini-sky { height: 320px; } }

/* --- Reduced motion: stop ambient animation, keep content --- */
@media (prefers-reduced-motion: reduce) {
  .hiw-caret, .hiw-chip, .hiw-sky .tw1, .hiw-sky .tw2, .hiw-sky .tw3 { animation: none !important; }
  [data-parallax] { transform: none !important; }
}

/* 6-card features grid */
.features-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .features-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .features-grid-3 { grid-template-columns: 1fr; } }

/* Phone hugs the Mac panel edge on wide screens; tucks back in before it can clip */
@media (max-width: 1500px) {
  .hero-phone { right: -40px; }
}

/* --- Editing pass: tighter rhythm --- */
.features { padding: 84px 24px 48px; }
.shots { padding: 68px 24px 8px; }
.playground { padding: 68px 24px 4px; }
.trust { padding: 26px 24px 0; }
.shots-grid { gap: 16px; margin-top: 32px; }

/* Founder note */
.founder { padding: 72px 24px 0; max-width: 720px; margin: 0 auto; text-align: center; }
.founder-card { border: 1px solid var(--border); border-radius: 20px; padding: 34px 38px 28px;
  background: linear-gradient(180deg, rgba(136,103,240,0.08), rgba(255,255,255,0.015)); position: relative; }
.founder-card::before { content: "\201C"; position: absolute; top: -6px; left: 22px;
  font-size: 64px; font-weight: 800; color: rgba(167,139,250,0.4); line-height: 1; }
.founder-text { margin: 0 0 14px; font-size: 16.5px; line-height: 1.75; color: rgba(232,222,254,0.86); text-align: left; }
.founder-sig { margin: 0; font-size: 13.5px; font-weight: 600; color: #a98aff; text-align: right; }

/* Mini FAQ */
.mini-faq { max-width: 680px; margin: 56px auto 0; text-align: left; }
.mini-faq .features-eyebrow { display: block; text-align: center; margin-bottom: 16px; }
.mini-faq details { border: 1px solid var(--border); border-radius: 14px; margin-bottom: 10px;
  background: rgba(255,255,255,0.02); overflow: hidden; }
.mini-faq summary { cursor: pointer; padding: 15px 18px; font-size: 15px; font-weight: 600;
  color: #e8defe; list-style: none; position: relative; }
.mini-faq summary::-webkit-details-marker { display: none; }
.mini-faq summary::after { content: "+"; position: absolute; right: 18px; top: 12px;
  font-size: 20px; font-weight: 400; color: #a98aff; transition: transform .2s; }
.mini-faq details[open] summary::after { transform: rotate(45deg); }
.mini-faq details p { margin: 0; padding: 0 18px 16px; font-size: 14px; line-height: 1.65;
  color: rgba(232,222,254,0.68); }
.mini-faq details a { color: #cbb8ff; }
.mini-faq-more { text-align: center; margin: 18px 0 0; font-size: 14px; }
.mini-faq-more a { color: #cbb8ff; text-decoration: none; }

/* Founding column in compare table */
.th-gold span:first-child { color: #e7c06a; }

/* --- How It Compares --- */
.vs { padding: 68px 24px 0; max-width: 980px; margin: 0 auto; text-align: center; }
.vs-scroll { margin-top: 30px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.vs-table { width: 100%; min-width: 880px; border-collapse: collapse;
  background: #140a28; border: 1px solid rgba(167,139,250,0.18); border-radius: 16px; overflow: hidden; }
.vs-table th, .vs-table td { padding: 12px 14px; font-size: 13.5px; text-align: center;
  border-bottom: 1px solid rgba(167,139,250,0.1); color: rgba(232,222,254,0.62); }
.vs-table thead th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em;
  color: #cbb8ff; padding-top: 16px; }
.vs-table td:first-child { text-align: left; color: #e8defe; font-weight: 500; }
.vs-table .vs-us { background: rgba(139,92,246,0.10); color: #e8defe; font-weight: 600; }
.vs-table thead .vs-us { color: #fff; }
.vck { display: inline-block; width: 15px; height: 15px; vertical-align: -3px; margin-right: 2px;
  background: no-repeat center / contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23a78bfa" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>'); }
.vx { display: inline-block; width: 12px; height: 2px; background: rgba(232,222,254,0.28);
  vertical-align: 3px; border-radius: 1px; }
.vs-notes { max-width: 760px; margin: 14px auto 0; font-size: 11.5px; line-height: 1.6;
  color: rgba(232,222,254,0.45); text-align: left; }

/* Sections added in the overhaul must sit above the fixed cosmic layers,
   like the base sections do — otherwise their plain-text headers paint
   underneath the nebula gradient. */
.shots, .playground, .vs, .founder, .trust {
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------------
   Horizontal-overflow containment (2026-07-26)
   The decorative aurora/glow layers are deliberately wider than the
   viewport, but nothing clipped them, so the whole PAGE scrolled
   sideways — 46px on mobile, ~100px on desktop. A page that drifts
   horizontally reads as broken even when users can't name why.
   Clip at the root and on the decorative wrappers; the cosmic layers
   still overhang visually, they just can't extend the scroll region.
   --------------------------------------------------------------- */
html, body { overflow-x: hidden; max-width: 100%; }
.nebula, .aurora, .shooting-stars, .device-glow { pointer-events: none; }
.aurora, .nebula, .shooting-stars { overflow: hidden; }
main, section { max-width: 100vw; }

/* ---------------------------------------------------------------
   Comparison table on small screens
   880px of table in a 375px viewport meant a phone visitor saw two of
   eight columns and had no reason to suspect the rest existed — and
   this is the section that answers "why not the app I already use?".
   Below 760px the table becomes one card per row: the claim, our
   answer called out, and every competitor listed beneath it.
   --------------------------------------------------------------- */
@media (max-width: 760px) {
  .vs-scroll { overflow-x: visible; }
  .vs-table thead { display: none; }
  /* the desktop rule sets min-width:880px for the scroller; card mode
     must release it or the page keeps its horizontal scroll */
  .vs-table { min-width: 0 !important; width: 100% !important; }
  .vs-table, .vs-table tbody, .vs-table tr, .vs-table td { display: block; width: 100%; }
  .vs-table tr {
    margin: 0 0 14px;
    padding: 14px 16px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    background: rgba(18,14,38,.55);
  }
  /* first cell = the capability being compared */
  .vs-table td:first-child {
    font-weight: 650;
    font-size: 1rem;
    color: #fff;
    padding: 0 0 10px;
    border: 0;
  }
  /* every other cell gets its competitor name from data-label */
  .vs-table td:not(:first-child) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 7px 0;
    border-top: 1px solid rgba(255,255,255,.06);
    font-size: .9rem;
    color: rgba(255,255,255,.72);
  }
  .vs-table td:not(:first-child)::before {
    content: attr(data-label);
    font-size: .8rem;
    letter-spacing: .02em;
    color: rgba(255,255,255,.45);
  }
  /* our column stays visually dominant */
  .vs-table td.vs-us {
    order: -1;
    color: #fff;
    font-weight: 650;
    border-top: 0;
    padding-top: 0;
  }
  .vs-table td.vs-us::before { color: #b49bff; }
}


/* Anchor targets clear the fixed header on all sizes: without this a
   nav click leaves the section's own heading hidden behind the bar,
   which reads as "the link went to the wrong place". */
section[id] { scroll-margin-top: 84px; }
html { scroll-behavior: smooth; }