/*
 * Home: one cinematic screen. A navy night sky (scene.js) where the stars are
 * people linking into constellations, with the copy over it on the left.
 * Values follow the landing-page-design skill: Tailwind type steps, the
 * 2/4/8/12/16/24/32/40/48/64px spacing set, one easing curve.
 */
.home {
  color-scheme: dark;
  --sky: #0f111a;
  --ink: #eef0f7;
  --ink-muted: #a3a8bd;
  --periwinkle: #b9c0e3;
  --periwinkle-hover: #c9cfea;
  --navy-ink: #1c2133;
  --glass: rgb(15 17 26 / 0.55);
  --glass-line: rgb(185 192 227 / 0.16);
  --outer: #000000;
  --tint-1: rgb(185 192 227 / 0.03);
  --tint-2: rgb(185 192 227 / 0.08);
  --tint-3: rgb(185 192 227 / 0.12);
  --tint-4: rgb(185 192 227 / 0.16);
  --hair: rgb(185 192 227 / 0.08);
  --word-muted: rgb(238 240 247 / 0.28);
  --heading-from: #ffffff;
  --heading-to: #9fa9d5;
  --accent-bg: var(--periwinkle);
  --accent-fg: var(--navy-ink);
  --accent-hover: var(--periwinkle-hover);
  --label: var(--periwinkle);
  --app-bg: rgb(15 17 26 / 0.88);
  --app-shadow: 0 32px 96px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(0 0 0 / 0.4);
  --focus-line: rgb(185 192 227 / 0.4);
  --focus-fill: rgb(185 192 227 / 0.07);
  --focus-shadow: 0 0 0 4px rgb(185 192 227 / 0.06), 0 16px 48px rgb(110 121 176 / 0.18);
  --av: #3d4870; --av-ink: #e3e6f4;
  --av-sage: #3e5a4c; --av-sage-ink: #dcebe2;
  --av-sky: #34506b; --av-sky-ink: #dbe8f4;
  --av-rose: #5e4253; --av-rose-ink: #f1dfe8;
  display: block;
  padding: 12px;
  background: var(--outer);
  color: var(--ink);
}

/* Light: the same scene by day. html[data-theme] is set before first paint:
   light, unless the visitor chose dark. */
html[data-theme="light"] .home {
  color-scheme: light;
  --sky: #9ccaee;
  --ink: #141a2e;
  --ink-muted: #34405e;
  --navy-ink: #1c2133;
  --glass: rgb(255 255 255 / 0.7);
  --glass-line: rgb(47 57 86 / 0.14);
  --outer: #d6e7f4;
  --tint-1: rgb(47 57 86 / 0.03);
  --tint-2: rgb(47 57 86 / 0.06);
  --tint-3: rgb(47 57 86 / 0.08);
  --tint-4: rgb(47 57 86 / 0.1);
  --hair: rgb(47 57 86 / 0.1);
  --word-muted: rgb(28 33 51 / 0.22);
  --heading-from: #141a2e;
  --heading-to: #3d4f8f;
  /* The logo's purple, for buttons and labels by day. */
  --accent-bg: #9fa9d5;
  --accent-fg: #141a2e;
  --accent-hover: #8d97c9;
  --label: #5a64a8;
  --app-bg: rgb(255 255 255 / 0.92);
  --app-shadow: 0 32px 96px rgb(47 57 86 / 0.18), 0 0 0 1px rgb(47 57 86 / 0.06);
  --focus-line: rgb(110 121 176 / 0.55);
  --focus-fill: rgb(110 121 176 / 0.06);
  --focus-shadow: 0 0 0 4px rgb(110 121 176 / 0.08), 0 16px 48px rgb(110 121 176 / 0.18);
  --av: #dfe2f1; --av-ink: #2f3956;
  --av-sage: #dcebe2; --av-sage-ink: #2f5a45;
  --av-sky: #dbe8f4; --av-sky-ink: #2c4f6e;
  --av-rose: #f1dfe8; --av-rose-ink: #6b3a55;
}

/* Top right, level with the bar: the sun shows in dark mode, the moon in light.
   A bare icon, like the links, so it never competes with Sign up. */
.theme {
  position: fixed;
  top: 36px;
  right: 36px;
  z-index: 10;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background-color 300ms var(--ease), color 300ms var(--ease);
}
.theme:hover { color: var(--ink); background: var(--tint-2); }
.theme:active { transform: scale(0.98); }
.theme svg { width: 16px; height: 16px; }
.theme .moon { display: none; }
html[data-theme="light"] .theme .sun { display: none; }
html[data-theme="light"] .theme .moon { display: block; }

/*
 * Scrolling is a camera move, not a page move: the framed scene stays pinned
 * while the journey scrolls past it, and scene.js maps the scroll position to
 * the camera pulling back from the horizon to the whole globe.
 */
.journey { height: 820vh; height: 820svh; }

/* The scene sits in an inset frame, one screen tall. */
.frame {
  position: sticky;
  top: 12px;
  height: calc(100vh - 24px);
  height: calc(100svh - 24px);
  display: grid;
  grid-template-rows: 72px 1fr 32px; /* the first row leaves room for the bar */
  overflow: hidden;
  border: 1px solid var(--glass-line);
  border-radius: 24px;
  background: var(--sky);
}

.sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.frame > :not(.sky) { position: relative; z-index: 1; }
.frame > .sources { position: absolute; }

/* Open bar, no container: the brand on the left, links and Sign up on the
   right, beside the toggle. Pinned to the window, not the scene, so it never
   moves, even as the scene scrolls away to reveal the footer. */
.bar {
  position: fixed;
  top: 36px;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  padding: 0 88px 0 32px; /* the right side leaves room for the toggle */
  pointer-events: none;
}
.bar .brand { pointer-events: auto; }
.brand {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: 42px;
  font-size: 0.9375rem;
  line-height: 1.25rem;
  font-weight: 600;
  text-decoration: none;
}
.brand img { width: 30px; height: 30px; border-radius: 8px; }
/* Same 8px corners as Get started. */
.brand a { white-space: nowrap; text-decoration: none; border-radius: 8px; transition: background-color 300ms var(--ease), color 300ms var(--ease); }
.brand-home { display: inline-flex; align-items: center; gap: 10px; padding: 4px 12px 4px 4px; margin-right: auto; color: var(--ink); font-size: 1.25rem; line-height: 1.75rem; letter-spacing: -0.01em; }
.nav-link { display: inline-flex; align-items: center; padding: 8px 10px; color: var(--ink-muted); }
.nav-link:hover, .nav-item:hover > .nav-link, .nav-item:focus-within > .nav-link { color: var(--ink); background: var(--tint-2); }
.nav-cta { margin-left: 6px; padding: 8px 14px; background: var(--accent-bg); color: var(--accent-fg); }
.nav-cta:hover { background: var(--accent-hover); }
.brand a:active { transform: scale(0.98); }

/* Use cases and Pricing open a short menu on hover or focus. Both menus hang
   from the same spot, under Use cases, at the same width, so moving between
   them swaps the contents in place. */
.nav-menus { position: relative; display: flex; gap: 2px; }
.menu {
  position: absolute;
  top: 100%;
  left: -8px;
  display: grid;
  gap: 2px;
  width: 340px;
  margin-top: 8px;
  padding: 6px;
  border: 1px solid var(--glass-line);
  border-radius: 12px;
  background: var(--menu-bg, rgb(20 23 35 / 0.94));
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 16px 48px rgb(0 0 0 / 0.24);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 200ms var(--ease), transform 200ms var(--ease), visibility 0s linear 200ms;
}
/* Switching from one to the other: the old menu goes at once and the new one
   fades in where it stood, without the drop. */
.nav-menus:hover .nav-item:not(:hover) .menu { transform: none; transition: none; }
/* A bridge over the gap, so the menu stays open on the way down to it. */
.menu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
html[data-theme="light"] .menu { --menu-bg: rgb(255 255 255 / 0.94); box-shadow: 0 16px 48px rgb(47 57 86 / 0.16); }
.nav-item:hover .menu, .nav-item:focus-within .menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.menu a { display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 12px; color: var(--ink); }
.menu a:hover { background: var(--tint-2); }
/* Bare Lucide icons, as in the app, muted until the row is hovered. */
.menu-icon { flex: none; display: grid; place-items: center; width: 20px; height: 20px; color: var(--ink-muted); transition: color 300ms var(--ease); }
.menu-icon svg { width: 18px; height: 18px; }
.menu a:hover .menu-icon { color: var(--ink); }
.menu-text { display: grid; gap: 2px; }
.menu strong { font-weight: 600; }
.menu-text span { font-size: 0.8125rem; line-height: 1.125rem; font-weight: 400; color: var(--ink-muted); }
/* Touch screens go straight to the page. */
@media (hover: none) { .menu { display: none; } }
/* Anchors from the menus land below the pinned bar. */
.page [id] { scroll-margin-top: 140px; }

/* On the pages that scroll, whatever passes under the bar is blurred away,
   fading in over the first 64px of scroll. It sits on the page, just under
   the bar, because a blur inside the bar can't see past it. */
.page::before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 9;
  height: 128px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
  mask-image: linear-gradient(#000 55%, transparent);
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  .page::before { opacity: 0; animation: veil linear both; animation-timeline: scroll(root); animation-range: 0 64px; }
}
@keyframes veil { to { opacity: 1; } }

.stage {
  display: flex;
  align-items: center;
  padding: 48px 64px;
}
.copy { max-width: 680px; }

/* Hero copy steps aside as the camera pulls back (--hero runs 1 to 0). */
.stage {
  grid-row: 2;
  grid-column: 1;
  opacity: var(--hero, 1);
  transform: translateY(calc((1 - var(--hero, 1)) * -32px));
}
.frame[data-hero="gone"] .stage { visibility: hidden; }

/* The second view: the whole globe above one line, lit word by word. */
.reveal {
  grid-row: 2;
  grid-column: 1;
  align-self: end;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 24px 10vh;
  visibility: hidden;
}
.frame[data-reveal="on"] .reveal { visibility: visible; }
.tagline {
  margin: 0;
  max-width: 680px;
  font-size: 3rem;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.tagline .word {
  color: var(--word-muted);
  transition: color 600ms var(--ease);
}
.tagline .word.on { color: var(--ink); }
.reveal .label {
  margin: 0 0 16px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--label);
}
/* The explanation follows once the headline has lit. */
.reveal .lede {
  margin: 16px 0 0;
  max-width: 560px;
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: var(--ink-muted);
  text-wrap: pretty;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
.frame[data-cta="on"] .reveal .lede { opacity: 1; transform: none; }
.reveal { opacity: var(--tag, 1); }

/* Chapters: a label, a headline and one sentence on the left; the globe and
   its parts on the right. scene.js sets --show (0 to 1) on each as it comes
   and goes, and data-on while any of it is visible. */
.chapter {
  grid-row: 2;
  grid-column: 1;
  align-self: center;
  max-width: 480px;
  padding: 0 64px;
  opacity: var(--show, 0);
  transform: translateY(calc((1 - var(--show, 0)) * 32px));
  visibility: hidden;
}
.chapter[data-on="true"] { visibility: visible; }
/* Narrower screens: chapters stack, the words under the picture. */
.frame[data-stack="true"] .chapter {
  align-self: start;
  justify-self: center;
  margin-top: var(--stack-top, 0px);
  max-width: 640px;
  padding: 0 40px;
  text-align: center;
}
.chapter .label {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--label);
}
.chapter h2 {
  margin: 12px 0 0;
  font-size: 3rem;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.chapter .lede {
  margin: 16px 0 0;
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: var(--ink-muted);
  text-wrap: pretty;
}

/* Sources orbit the globe; scene.js places each one and lights it in turn. */
.sources {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
  opacity: var(--show, 0);
  visibility: hidden;
}
.sources[data-on="true"] { visibility: visible; }
.source {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  border: 1px solid var(--glass-line);
  border-radius: 9999px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  white-space: nowrap;
  transform: translate(var(--x, 0px), var(--y, 0px)) translate(-50%, -50%) scale(0.9);
  opacity: 0;
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
.source.on { opacity: 1; transform: translate(var(--x, 0px), var(--y, 0px)) translate(-50%, -50%); }
.source .mark {
  margin: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9999px;
  background: var(--tint-3);
}
/* By day the marks sit on white, so the logos' own colours read. */
html[data-theme="light"] .source .mark { background: #fff; box-shadow: 0 0 0 1px var(--hair); }
/* Voice Memos' dark tile is too heavy on white; by day it turns a soft red. */
html[data-theme="light"] .source[data-source="voice-memos"] rect { fill: #FDECEA; }
.source .mark svg { width: 20px; height: 20px; }
.source .mark img { width: 22px; height: 22px; }
.source .soon {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  color: var(--ink-muted);
}

/* After Connect, what Wishbone does: one row per feature, the words beside a
   snippet of the app (captured from the demo, scripts/marketing-capture.mjs),
   alternating sides, against the sky. The rows scroll with the page: scene.js
   moves the track one pixel per pixel scrolled. */
.frame > .features {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
  /* Rows fade in under the bar and out at the bottom edge. */
  -webkit-mask: linear-gradient(to bottom, transparent 64px, #000 150px, #000 calc(100% - 48px), transparent);
  mask: linear-gradient(to bottom, transparent 64px, #000 150px, #000 calc(100% - 48px), transparent);
}
.features[data-on="true"] { visibility: visible; }
.features-track {
  display: grid;
  gap: 160px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 64px;
  transform: translateY(var(--y, 100vh));
  will-change: transform;
}
.feature {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  align-items: center;
  gap: 80px;
}
.feature:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.feature:nth-child(even) .feature-copy { order: 2; }
.feature .label {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--label);
}
.feature h2 {
  margin: 12px 0 0;
  font-size: 2.75rem;
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.feature .lede {
  margin: 16px 0 0;
  max-width: 440px;
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: var(--ink-muted);
  text-wrap: pretty;
}
/* The snippet: the app's own section, on a card that floats over the sky. */
.feature-shot {
  overflow: hidden;
  border: 1px solid var(--glass-line);
  border-radius: 18px;
  background: var(--app-bg);
  box-shadow: var(--app-shadow);
}
.feature-shot img { display: block; width: 100%; height: auto; }
/* Portrait snippets (a profile, a conversation) sit narrower in their column. */
.feature-shot.narrow { justify-self: center; width: 100%; max-width: 440px; }
.feature-shot .dark { display: none; }
html[data-theme="dark"] .feature-shot .light { display: none; }
html[data-theme="dark"] .feature-shot .dark { display: block; }

/* The close: the whole globe again, above one line, the button and the assistants. */
.closing {
  grid-row: 2;
  grid-column: 1;
  align-self: end;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 24px 16px;
  opacity: var(--show, 0);
  transform: translateY(calc((1 - var(--show, 0)) * 24px));
  visibility: hidden;
}
.closing[data-on="true"] { visibility: visible; }
/* The AI assistants Wishbone works with, under the last button. */
.agents { margin-top: 40px; }
.agents p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--ink-muted);
}
.agents ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.agents li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  color: var(--ink);
}
.agents svg { width: 20px; height: 20px; }

.closing h2 {
  margin: 0;
  font-size: 3rem;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

@media (prefers-reduced-motion: reduce) {
  .closing { transform: none; }
  .stage, .chapter { transform: none; }
  .reveal .lede { transform: none; }
  .source, .source.on { transform: translate(var(--x, 0px), var(--y, 0px)) translate(-50%, -50%); transition: opacity 600ms var(--ease); }
}

.copy h1 {
  margin: 0;
  font-size: 3.75rem;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.035em;
  text-wrap: balance;
  background: linear-gradient(90deg, var(--heading-from), var(--heading-to));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: 8px; /* keeps descenders inside the clipped gradient */
}

.copy p {
  margin: 16px 0 0;
  max-width: 480px;
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: var(--ink-muted);
  text-wrap: pretty;
}

.home .button {
  margin-top: 32px;
  background: var(--accent-bg);
  color: var(--accent-fg);
}
.home .button:hover { background: var(--accent-hover); }
.home :focus-visible { outline-color: var(--periwinkle); }

/* Privacy and Terms, after the journey ends. */
.site-footer {
  justify-content: flex-start;
  align-items: center;
  padding: 24px 52px 12px;
  color: var(--ink-muted);
}
.home .site-footer a:hover { color: var(--ink); }

@media (max-width: 1023px) {
  .features-track { gap: 112px; padding: 0 40px; }
  .feature, .feature:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 32px; max-width: 640px; margin: 0 auto; }
  .feature .feature-copy, .feature:nth-child(even) .feature-copy { order: 2; }
  .feature h2 { font-size: 2.25rem; line-height: 2.5rem; }
  .stage { padding-inline: 40px; }
  .chapter { padding-inline: 40px; }
  .chapter h2 { font-size: 2.25rem; line-height: 2.5rem; }
  .site-footer { padding-inline: 28px; }
  .copy h1 { font-size: 3rem; }
}

/* Phones: the sky fills the top, the copy sits low where the thumb is. */
@media (max-width: 640px) {
  .home { padding: 8px; }
  .bar { top: 32px; }
  /* Phones: the bar stops short of the toggle in the right corner. */
  .bar { padding: 0 68px 0 20px; }
  .theme { top: 32px; right: 20px; }
  .frame { top: 8px; height: calc(100vh - 16px); height: calc(100svh - 16px); border-radius: 16px; }
  .tagline { font-size: 2.25rem; line-height: 2.5rem; }
  .reveal { padding-bottom: 32px; }
  .reveal .lede { font-size: 1rem; line-height: 1.5rem; }
  .chapter, .frame[data-stack="true"] .chapter { align-self: end; justify-self: stretch; margin-top: 0; padding: 0 24px 16px; text-align: left; }
  .chapter h2 { font-size: 2.25rem; line-height: 2.5rem; }
  .chapter .lede { font-size: 1rem; line-height: 1.5rem; }
  /* Phones: the window is one column tall; the pills and second lines give way. */
  .closing h2 { font-size: 2.25rem; line-height: 2.5rem; }
  .features-track { gap: 88px; padding: 0 20px; }
  .feature .lede { font-size: 1rem; line-height: 1.5rem; }
  .feature-shot { border-radius: 14px; }
  /* Phones: the sources are just their marks, circling the globe. */
  .source { padding: 4px; }
  .source .name, .source .soon {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .tagline br { display: none; }
  .stage { align-items: flex-end; padding: 32px 24px 16px; }
  .site-footer { padding-inline: 16px; }
  .brand-home { margin-right: 0; }
  .copy h1 { font-size: 2.25rem; line-height: 2.5rem; }
  .copy h1 br, .copy p br { display: none; }
  .copy p { font-size: 1rem; line-height: 1.5rem; }
}

/* Small phones: the name stays; Pricing steps out so it fits beside the toggle. */
@media (max-width: 640px) { .nav-wide { display: none; } }
.brand a[aria-current="page"]:not(.nav-cta) { color: var(--ink); }
@media (max-width: 420px) {
  .nav-pricing { display: none; }
  .brand-home { gap: 8px; padding-right: 4px; font-size: 1.125rem; }
  .brand img { width: 28px; height: 28px; }
  .nav-link, .nav-cta { padding-inline: 8px; }
  .nav-cta { margin-left: 0; padding-inline: 12px; }
}