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

:root {
  /* Core palette — shared with the app's indigo brand */
  --dark: #0e0e14;
  --light: #e8e8f0;
  --accent: #6366f1;
  --accent-600: #5457e5;   /* filled-control rest; hover rises to --accent */
  --accent-400: #898ff6;
  --accent-300: #a5b4fc;

  /* Interaction. Hover always moves toward indigo, never toward gray. */
  --surface-hover: #20203a;
  --hover-line: rgba(99, 102, 241, 0.55);

  /* Edges: structural vs. control. */
  --line: rgba(232, 232, 240, 0.10);
  --line-strong: rgba(232, 232, 240, 0.16);

  /* Radii: controls vs. containers. */
  --r-control: 8px;
  --r-surface: 12px;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Rhythm */
  --bar-h: 32px;
  --nav-h: 72px;
  --gutter: 20px;
  --maxw: 1152px;
  --maxw-wide: 1280px;
}

@media (min-width: 768px) {
  :root { --gutter: 32px; }
}

/* Sub-400px: navbar brand + CTA run out of room at the default gutter. */
@media (max-width: 400px) {
  :root { --gutter: 16px; }
  .navbar__cta { padding: 8px 12px; }
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background: var(--dark);
  color: var(--light);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { display: block; width: 100%; height: auto; }
a { color: inherit; }

/* One focus treatment for the whole page. Offset keeps the ring readable
   on the filled indigo buttons. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ============================================================
   PANELS — every section declares its own foreground/surface
   so the same components read correctly on dark or light.
   ============================================================ */
.panel {
  position: relative;
  background: var(--panel-bg);
  color: rgb(var(--fg));
  padding: 96px var(--gutter);
  /* Clear the fixed announcement bar + navbar when jumped to via anchor */
  scroll-margin-top: calc(var(--bar-h) + var(--nav-h));
}

@media (min-width: 768px) {
  .panel { padding: 144px var(--gutter); }
}

@media (min-width: 1024px) {
  .panel { padding: 208px var(--gutter); }
}

/* Blog panels sit under a dark page-head that already supplies the breathing
   room. The marketing rhythm here reads as a blank screen before the prose. */
.panel--tight { padding-top: 56px; padding-bottom: 72px; }

@media (min-width: 768px) {
  .panel--tight { padding-top: 72px; padding-bottom: 96px; }
}

@media (min-width: 1024px) {
  .panel--tight { padding-top: 88px; padding-bottom: 112px; }
}

.panel--dark {
  --fg: 232 232 240;
  --panel-bg: #0e0e14;
  --surface: #16161e;
  --line: rgba(232, 232, 240, 0.10);
}

.panel--light {
  --fg: 14 14 20;
  --panel-bg: #e8e8f0;
  --surface: #ffffff;
  --line: rgba(14, 14, 20, 0.14);
  --line-strong: rgba(14, 14, 20, 0.22);
  --surface-hover: #eeeefb;
}

.wrap { max-width: var(--maxw); margin: 0 auto; }

/* ============================================================
   TYPE
   ============================================================ */
.eyebrow {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgb(var(--fg) / 0.62);
}

.eyebrow--accent {
  color: var(--accent-400);
  letter-spacing: 0.16em;
}

.display {
  font-size: clamp(2.75rem, 7.6vw, 6rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.98;
  text-wrap: balance;
}

.h2 {
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
  text-wrap: balance;
}

.h3 {
  font-size: clamp(1.875rem, 3.6vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  text-wrap: balance;
}

.lede {
  font-size: 1rem;
  line-height: 2;
  color: rgb(var(--fg) / 0.62);
}

@media (min-width: 768px) {
  .lede { font-size: 1.125rem; }
}

.body-copy {
  font-size: 1rem;
  line-height: 2;
  color: rgb(var(--fg) / 0.62);
}

/* ============================================================
   SCREENSHOT FRAME
   ============================================================ */
.frame {
  overflow: hidden;
  border-radius: var(--r-surface);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3);
}

.panel--light .frame { box-shadow: 0 24px 70px rgba(14, 14, 20, 0.18); }

/* A frame that cycles through several shots of the same idea. The first image
   stays in flow and sets the height; the rest stack on top and cross-fade.
   Every image in a rotation must share one pixel size or the frame jumps.
   In the hero the images sit in .frame__stack so they don't cover the title
   bar; elsewhere [data-rotate] is the frame itself. */
[data-rotate] { position: relative; }
[data-rotate] img { transition: opacity 0.6s ease; }

/* Without JS the first shot is simply the only one shown. */
[data-rotate] img + img {
  position: absolute;
  inset: 0;
  opacity: 0;
}

/* Once the rotator takes over, visibility is driven entirely by .is-active. */
[data-rotate].is-rotating img { opacity: 0; }
[data-rotate].is-rotating img.is-active { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  [data-rotate] img { transition: none; }
}

/* On a phone the whole shot is illegible — a 2432px desktop UI scaled to 358px
   renders its text around 4px. So each shot opens framed on the part that
   actually matters and makes one slow move from there. The framing is per-image
   data in the markup (data-from / data-to, each "cx,cy,zoom"), applied by
   initShotTours(); a generic path can't know that Discover is about the donut
   and Search is about the result rows.

   The frame keeps the screenshot's own aspect, so zoom 1 really is the whole
   screen and "zoom out to full" lands on all of it. */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  [data-rotate] { overflow: hidden; }
  [data-rotate] img {
    transform-origin: center center;
    will-change: transform;
  }
}

/* Any rotating frame opens its own shots full size. */
[data-rotate] { cursor: zoom-in; }
[data-rotate]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8, 8, 12, 0.94);
}

.lightbox.show { display: flex; }

.lightbox__img {
  width: auto;
  /* The prev, next and close buttons are absolutely positioned over this
     overlay, so sizing the image to the full viewport put all three on top of
     the screenshot the lightbox exists to show. Reserve their gutters instead:
     16px edge inset + 48px button + breathing room on each side, and the same
     vertically so the close button clears the top edge. */
  max-width: min(1600px, calc(100vw - 144px));
  max-height: min(86vh, calc(100vh - 144px));
  border-radius: var(--r-surface);
  border: 1px solid rgba(232, 232, 240, 0.12);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
  /* The script owns pinch and pan, so the browser must not also act on them. */
  touch-action: none;
  transform-origin: center center;
  will-change: transform;
}

/* Zoomed in, the whole frame is the image — square off the corners so the
   rounding doesn't clip content, and get the arrows out of the pan area. */
.lightbox--zoomed .lightbox__img { border-radius: 0; border-color: transparent; }

.lightbox--zoomed .lightbox__btn--prev,
.lightbox--zoomed .lightbox__btn--next,
.lightbox--zoomed .lightbox__hint {
  opacity: 0;
  pointer-events: none;
}

.lightbox__hint {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  border-radius: 999px;
  border: 1px solid rgba(232, 232, 240, 0.16);
  background: rgba(8, 8, 12, 0.72);
  padding: 7px 14px;
  font-size: 12px;
  white-space: nowrap;
  color: rgba(232, 232, 240, 0.72);
  transition: opacity 200ms ease;
}

@media (pointer: coarse) {
  .lightbox__hint { display: block; }
  /* Reclaim the padding — every pixel counts for a dense screenshot. */
  .lightbox { padding: 0; }
  .lightbox__img { max-width: 100vw; max-height: 92vh; }
}

.lightbox__btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(232, 232, 240, 0.16);
  border-radius: 50%;
  background: rgba(22, 22, 30, 0.9);
  color: #e8e8f0;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.lightbox__btn:hover {
  background: var(--surface-hover);
  border-color: var(--hover-line);
}

.lightbox__btn--prev { left: 16px; }
.lightbox__btn--next { right: 16px; }
.lightbox__btn--close { top: 16px; right: 16px; font-size: 1.1rem; }

@media (min-width: 768px) {
  .lightbox__btn--prev { left: 32px; }
  .lightbox__btn--next { right: 32px; }
  .lightbox__btn--close { top: 32px; right: 32px; }

  /* Buttons move outward at this breakpoint, so the gutters grow with them. */
  .lightbox__img {
    max-width: min(1600px, calc(100vw - 224px));
    max-height: min(86vh, calc(100vh - 176px));
  }
}

.lightbox__count {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: rgba(232, 232, 240, 0.5);
}

.frame__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}

.frame__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
}

.frame__dot:nth-child(1) { opacity: 0.4; }
.frame__dot:nth-child(2) { opacity: 0.25; }
.frame__dot:nth-child(3) { opacity: 0.15; }

.frame__title {
  margin-left: 6px;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgb(var(--fg) / 0.55);
}

/* ============================================================
   ANNOUNCEMENT + NAV
   ============================================================ */
.announcement {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 110;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 16px;
  text-align: center;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  background: #16161e;
  border-bottom: 1px solid var(--line);
  color: rgba(232, 232, 240, 0.55);
  overflow: hidden;
}

.announcement a {
  color: rgba(232, 232, 240, 0.78);
  text-decoration: none;
  transition: color 0.15s ease;
}


.navbar {
  position: fixed;
  inset: var(--bar-h) 0 auto 0;
  z-index: 100;
  background: var(--dark);
  border-bottom: 1px solid var(--line);
}

.navbar__inner {
  max-width: var(--maxw-wide);
  margin: 0 auto;
  height: var(--nav-h);
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.navbar__brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-decoration: none;
  color: #e8e8f0;
}

.navbar__brand svg { width: 22px; height: 22px; flex-shrink: 0; }

@media (min-width: 768px) {
  .navbar__brand { font-size: 1.25rem; }
}

.navbar__links {
  display: none;
  align-items: center;
  gap: 28px;
  font-size: 0.875rem;
  color: rgba(232, 232, 240, 0.55);
}

.navbar__links a {
  text-decoration: none;
  transition: color 0.15s ease;
}


@media (min-width: 768px) {
  .navbar__links { display: flex; }
}

.navbar__cta {
  border-radius: var(--r-control);
  border: 1px solid var(--line-strong);
  background: #16161e;
  padding: 8px 16px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #e8e8f0;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}


/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  padding: 176px var(--gutter) 128px;
}

@media (min-width: 768px) {
  .hero { padding: 208px var(--gutter) 176px; }
}

.hero__atmosphere {
  pointer-events: none;
  position: absolute;
  inset: 0 0 auto 0;
  height: 42rem;
  background: radial-gradient(circle at 50% 24%, rgba(99, 102, 241, 0.16), transparent 58%);
}

/* Decorative folder outline behind the headline */
.hero__folder {
  pointer-events: none;
  position: absolute;
  left: 50%;
  top: 144px;
  width: 32rem;
  height: 16rem;
  transform: translateX(-8%) rotate(-5deg);
  opacity: 0.3;
}

.hero__folder-tab {
  position: absolute;
  left: 8%;
  top: 0;
  width: 38%;
  height: 22%;
  border: 1px solid rgba(99, 102, 241, 0.45);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
}

.hero__folder-body {
  position: absolute;
  inset: auto 0 0 0;
  height: 82%;
  border: 1px solid rgba(99, 102, 241, 0.45);
  border-radius: 32px;
  background: rgba(99, 102, 241, 0.02);
  box-shadow: 0 0 80px rgba(99, 102, 241, 0.10);
}

@media (min-width: 640px) {
  .hero__folder { width: 42rem; height: 20rem; }
}

@media (min-width: 768px) {
  .hero__folder { top: 160px; transform: translateX(2%) rotate(-5deg); }
}

.hero__inner { position: relative; max-width: var(--maxw); margin: 0 auto; }

.hero__content { max-width: 896px; margin: 0 auto; text-align: center; }

.hero__eyebrow { margin-bottom: 28px; }

.hero__title { color: #e8e8f0; }

.hero__subtitle {
  max-width: 42rem;
  margin: 32px auto 0;
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(232, 232, 240, 0.62);
  text-wrap: pretty;
}

@media (min-width: 768px) {
  .hero__subtitle { font-size: 1.125rem; }
}

.hero__actions {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.btn {
  display: inline-block;
  border-radius: var(--r-control);
  padding: 13px 24px;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.btn--primary {
  border: 1px solid transparent;
  background: var(--accent-600);
  color: #ffffff;
  font-weight: 600;
}


.btn--ghost {
  border: 1px solid var(--line-strong);
  background: #16161e;
  color: #e8e8f0;
  font-weight: 500;
}


.hero__product {
  position: relative;
  max-width: 1024px;
  margin: 80px auto 0;
}

@media (min-width: 768px) {
  .hero__product { margin-top: 112px; }
}

.hero__product .frame {
  --fg: 232 232 240;
  --surface: #16161e;
  --line: rgba(232, 232, 240, 0.10);
  box-shadow: 0 32px 100px rgba(0, 0, 0, 0.5);
}

/* ============================================================
   WORKFLOW  (light panel)
   ============================================================ */
.workflow__heading { max-width: 896px; }

.workflow__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 24px;
}

/* The hero's hard break sets a deliberate two-line composition on wide screens,
   but on a phone "into an instrument." is ~4px too wide to hold its own line and
   drops "instrument." on its own. Releasing the break lets text-wrap: balance
   split it into three even lines instead of leaving an orphan. */
@media (max-width: 767px) {
  .hero__title br { display: none; }
}

/* Below tablet "Discover ▸ Audition ▸ Export" has to stay on one line, so the
   type scales with the viewport rather than wrapping mid-phrase. */
@media (max-width: 767px) {
  .workflow__title {
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 0 8px;
    font-size: clamp(1.125rem, 6.6vw, 2.25rem);
  }
}

@media (min-width: 768px) {
  .workflow__title { gap: 8px 20px; }
}

.workflow__arrow {
  font-size: 0.34em;
  color: var(--accent);
  line-height: 1;
}

.workflow__intro { margin-top: 32px; max-width: 42rem; }

.workflow__steps {
  margin-top: 96px;
  display: grid;
  gap: 96px;
}

@media (min-width: 768px) {
  .workflow__steps { margin-top: 144px; gap: 144px; }
}

.step {
  display: grid;
  gap: 40px;
  align-items: center;
}

@media (min-width: 768px) {
  .step { grid-template-columns: 1fr 1fr; gap: 64px; }
  .step--flip .step__media { order: 2; }
  .step--flip .step__copy { order: 1; }
}

.step__num {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--accent);
}

.step__title { margin-top: 20px; }

.step__body { margin-top: 24px; max-width: 32rem; }

/* ============================================================
   CAPABILITIES  (dark panel)
   ============================================================ */
.capabilities__heading { max-width: 896px; }
.capabilities__title { margin-top: 24px; }
.capabilities__intro { margin-top: 32px; max-width: 42rem; }

.stories {
  margin-top: 96px;
  display: grid;
  gap: 112px;
}

@media (min-width: 768px) {
  .stories { margin-top: 144px; gap: 176px; }
}

.story__head {
  display: grid;
  gap: 32px;
  align-items: end;
}

@media (min-width: 768px) {
  .story__head { grid-template-columns: 0.82fr 1.18fr; gap: 64px; }
}

.story__title { margin-top: 20px; }

.story__copy { display: grid; gap: 20px; }

@media (min-width: 768px) {
  .story__copy { grid-template-columns: 1fr 1fr; }
}

.story__media { margin-top: 48px; }

@media (min-width: 768px) {
  .story__media { margin-top: 64px; }
}

/* ============================================================
   WAITLIST  (light panel, dark card)
   ============================================================ */
.waitlist__card {
  /* Dark island inside a light panel: re-declare context, same as
     .hero__product .frame. Without this, rgb(var(--fg) / a) resolves
     to dark ink on a dark card. */
  --fg: 232 232 240;
  --surface: #16161e;
  --line: rgba(232, 232, 240, 0.10);
  --line-strong: rgba(232, 232, 240, 0.16);
  max-width: 896px;
  margin: 0 auto;
  border-radius: var(--r-surface);
  border: 1px solid var(--line);
  background: #16161e;
  color: #e8e8f0;
  padding: 64px 24px;
  text-align: center;
  box-shadow: 0 28px 90px rgba(14, 14, 20, 0.22);
}

@media (min-width: 768px) {
  .waitlist__card { padding: 96px 56px; }
}

.waitlist__title {
  margin: 24px auto 0;
  max-width: 48rem;
  font-size: clamp(2rem, 5vw, 3.75rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.04;
  text-wrap: balance;
}

.waitlist__sub {
  margin: 24px auto 0;
  max-width: 36rem;
  font-size: 1rem;
  /* 2 left a 32px gap between the two lines this wraps to on a phone, which
     read looser than the headline above it. */
  line-height: 1.5;
  color: rgba(232, 232, 240, 0.62);
}

.email-form {
  margin: 40px auto 0;
  max-width: 36rem;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 640px) {
  .email-form { flex-direction: row; }
}

.email-form input[type="email"] {
  flex: 1;
  min-width: 0;
  border-radius: var(--r-control);
  border: 1px solid rgba(14, 14, 20, 0.22);
  background: var(--light);
  padding: 13px 16px;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--dark);
  transition: border-color 0.15s ease;
}

.email-form input[type="email"]::placeholder { color: rgba(14, 14, 20, 0.45); }
.email-form input[type="email"]:focus { border-color: var(--accent); }

.email-form button {
  border-radius: var(--r-control);
  border: 1px solid transparent;
  background: var(--accent-600);
  padding: 13px 24px;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  color: #ffffff;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.2;   /* match the input's UA line-height when stacked <640px */
}

.email-form button:disabled { cursor: wait; opacity: 0.6; }

/* Honeypot — never visible to humans */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.waitlist__error {
  margin-top: 16px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #fca5a5;
}

.waitlist__fine {
  margin-top: 20px;
  font-size: 0.75rem;
  color: rgba(232, 232, 240, 0.55);
}

.waitlist__consent {
  margin: 16px auto 0;
  max-width: 32rem;
  font-size: 0.72rem;
  line-height: 1.7;
  color: rgba(232, 232, 240, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.waitlist__consent.visible { opacity: 1; visibility: visible; }
.waitlist__consent a { color: var(--accent-300); cursor: pointer; text-decoration: underline; }

.waitlist__success { display: none; }
.waitlist__success.show { display: block; }

.waitlist__check {
  width: 48px;
  height: 48px;
  margin: 0 auto 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(99, 102, 241, 0.15);
  color: var(--accent-300);
}

.waitlist__check svg { width: 24px; height: 24px; }

.waitlist__success h3 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.035em;
}

.waitlist__success p {
  margin-top: 12px;
  color: rgba(232, 232, 240, 0.62);
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  border-top: 1px solid var(--line);
  padding: 40px var(--gutter);
  background: var(--dark);
}

.footer__inner {
  max-width: var(--maxw-wide);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: 0.75rem;
  color: rgba(232, 232, 240, 0.55);
}

@media (min-width: 640px) {
  .footer__inner { flex-direction: row; align-items: center; justify-content: space-between; }
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}

.footer__links a {
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease;
}


/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-up.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fade-up { opacity: 1; transform: none; transition: none; }
  .btn:hover, .btn:active { transform: none; }
}



/* ============================================================
   COOKIE BANNER
   ============================================================ */
.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 150;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  max-width: 640px;
  margin: 0 auto;
  padding: 16px 20px;
  border-radius: var(--r-surface);
  border: 1px solid var(--line);
  background: rgba(22, 22, 30, 0.96);
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  font-size: 0.8125rem;
  color: rgba(232, 232, 240, 0.62);
}

.cookie-banner span { flex: 1; min-width: 220px; }
.cookie-banner a { color: var(--accent-300); cursor: pointer; text-decoration: underline; }

.cookie-banner button {
  border-radius: var(--r-control);
  padding: 8px 16px;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.cookie-btn-accept {
  border: 1px solid transparent;
  background: var(--accent-600);
  color: #ffffff;
}


.cookie-btn-decline {
  border: 1px solid var(--line-strong);
  background: #16161e;
  color: rgba(232, 232, 240, 0.78);
}


/* ============================================================
   INTERACTION MODEL — single source of truth.
   Hover always moves one step toward indigo, never toward gray.
     · text link        dim foreground -> full foreground
     · inline link      accent-300 -> accent-400
     · bordered control neutral surface -> indigo-tinted surface
     · filled control   accent-600 -> accent  (+2px lift on .btn only)
   Focus is the same 2px indigo ring everywhere (see :focus-visible).
   ============================================================ */

.navbar__cta,
.btn,
.email-form input[type="email"],
.email-form button,
.cookie-banner button {
  transition: background-color 0.15s ease, border-color 0.15s ease,
              color 0.15s ease, transform 0.15s ease;
}

/* Controls that must read as links. Real <button> so they are
   keyboard-reachable and fire on Enter — an <a> with no href is not. */
.linkish,
.cookie-banner .linkish,
.footer__links .linkish {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.waitlist__consent .linkish,
.cookie-banner .linkish {
  color: var(--accent-300);
  text-decoration: underline;
}

/* Text links */
.announcement a:hover,
.navbar__links a:hover,
.footer__links a:hover,
.footer__links .linkish:hover { color: #e8e8f0; }

/* Inline links */
.waitlist__consent .linkish:hover,
.cookie-banner .linkish:hover { color: var(--accent-400); }

/* Bordered controls */
.navbar__cta:hover,
.btn--ghost:hover,
.cookie-btn-decline:hover {
  background: var(--surface-hover);
  border-color: var(--hover-line);
  color: #ffffff;
}

/* Filled controls */
.btn--primary:hover,
.email-form button:hover,
.cookie-btn-accept:hover { background: var(--accent); }

/* Motion on the hero pair only — chrome buttons don't move. */
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   BLOG
   Page header is dark (continues the nav), article body is light —
   the same dark->light rhythm the home page uses, and long-form
   prose reads better on the light panel.
   ============================================================ */
.page-head {
  position: relative;
  overflow: hidden;
  padding: 152px var(--gutter) 72px;
  background: var(--dark);
  color: var(--light);
}

@media (min-width: 768px) {
  .page-head { padding: 184px var(--gutter) 96px; }
}

.page-head__atmosphere {
  pointer-events: none;
  position: absolute;
  inset: 0 0 auto 0;
  height: 28rem;
  background: radial-gradient(circle at 50% 10%, rgba(99, 102, 241, 0.14), transparent 60%);
}

.page-head__inner { position: relative; max-width: var(--maxw); margin: 0 auto; }

.page-head__title {
  margin-top: 20px;
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
  text-wrap: balance;
}

.page-head__sub {
  margin-top: 24px;
  max-width: 38rem;
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(232, 232, 240, 0.62);
}

/* --- post list --- */
.post-list { display: grid; gap: 4px; }

.post-card {
  display: block;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}

.post-card:first-child { border-top: 1px solid var(--line); }

.post-card__meta {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgb(var(--fg) / 0.55);
}

.post-card__title {
  margin-top: 10px;
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.post-card__excerpt {
  margin-top: 10px;
  max-width: 42rem;
  font-size: 1rem;
  line-height: 1.75;
  color: rgb(var(--fg) / 0.62);
}

.post-card__more {
  display: inline-block;
  margin-top: 14px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
}

/* --- empty state --- */
.post-empty {
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-surface);
  padding: 56px 24px;
  text-align: center;
}

.post-empty h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.post-empty p {
  margin: 12px auto 0;
  max-width: 30rem;
  line-height: 1.75;
  color: rgb(var(--fg) / 0.62);
}

.post-empty .btn { margin-top: 24px; }

/* --- article prose --- */
.article { max-width: 42rem; margin: 0 auto; }

.article > * + * { margin-top: 24px; }

.article p,
.article li {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: rgb(var(--fg) / 0.75);
}

.article h2 {
  margin-top: 48px;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: rgb(var(--fg));
}

.article h3 {
  margin-top: 36px;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: rgb(var(--fg));
}

.article ul, .article ol { padding-left: 22px; }
.article li + li { margin-top: 8px; }

.article a { color: var(--accent); text-decoration: underline; }
.article a:hover { color: var(--accent-600); }
.article a.btn--primary { color: #ffffff; text-decoration: none; }

.article > img,
.article .frame { margin: 36px 0; }

.article blockquote {
  border-left: 2px solid var(--accent);
  padding-left: 20px;
  font-size: 1.125rem;
  line-height: 1.7;
  color: rgb(var(--fg) / 0.68);
}

.article code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: rgb(var(--fg) / 0.07);
  border-radius: 4px;
  padding: 2px 6px;
}

.article hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 48px 0;
}

/* --- back link --- */
.back-link {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(232, 232, 240, 0.62);
  text-decoration: none;
}

.back-link:hover { color: #e8e8f0; }