/* ==========================================================================
   Lumo — landing
   Blue-mist canvas, ink pills, amber on-air lamp. Archivo + IBM Plex.

   Three-participant colour law, shared with the mobile app so the same
   three colours mean the same three people on both surfaces:
     Lumo (the AI) → --ai    accent blue
     You           → --ink
     Caller        → --caller slate
   Amber (--live) has exactly one job: something is live right now.
   ========================================================================== */

:root {
  --paper: #E8EFF6;
  --paper-2: #ffffff;
  --ink: #101820;
  --ink-2: #22303F;
  --muted: #5A6B7D;
  --rule: #D6E2EE;

  --system: #101820;   /* primary actions / ink pills */
  --system-soft: #DCE7F2;
  --ai: #2B6CB0;       /* Lumo's own colour, wherever it speaks */
  --caller: #9FB3C6;   /* the other party — light, so Lumo's blue lane reads as the loud one */
  --live: #E08A10;     /* the "on air" lamp — you, on the line */
  --live-soft: #FDF1DC;
  --ok: #1C7A5C;

  --display: Archivo, "Helvetica Neue", Arial, sans-serif;
  --body: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --measure: 62ch;
  --wrap: 1120px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

.narrow { max-width: var(--measure); }

/* Micro-label: this is call-log vocabulary, so it is monospace. */
.tag {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; margin: 0; }
h1 { font-size: clamp(38px, 6.2vw, 68px); }
h2 { font-size: clamp(28px, 4vw, 42px); }
h3 { font-size: 20px; letter-spacing: -0.01em; }

p { margin: 0; }
.lede { font-size: clamp(17px, 2vw, 21px); color: var(--ink-2); }

/* —— Top bar —————————————————————————————————————————————— */

.top {
  border-bottom: 1px solid transparent;
  background: #0a121c;
  position: sticky;
  top: 0;
  z-index: 20;
  color: #e8eef4;
}

.top-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  max-width: var(--wrap);
  margin: 0 auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 19px;
  color: #fff;
  text-decoration: none;
}

.top .btn-quiet { color: #e8eef4; }
.top .btn-quiet:hover { color: #fff; }
.top .btn-ghost {
  color: #fff;
  border-color: rgba(232, 238, 244, 0.35);
}
.top .btn-ghost:hover {
  border-color: rgba(232, 238, 244, 0.6);
  background: rgba(255,255,255,0.06);
}
.top .btn-primary {
  background: var(--live);
  color: var(--ink);
}
.top .btn-primary:hover { background: #f0a02a; }

/* The on-air lamp. The one piece of ambient motion on the page. */
.lamp {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 0 rgba(224, 138, 16, 0.55);
  animation: lamp 2.4s ease-out infinite;
}

@keyframes lamp {
  0%   { box-shadow: 0 0 0 0 rgba(224, 138, 16, 0.5); }
  70%  { box-shadow: 0 0 0 9px rgba(224, 138, 16, 0); }
  100% { box-shadow: 0 0 0 0 rgba(224, 138, 16, 0); }
}

.top-links { display: flex; align-items: center; gap: 8px; }

/* —— Buttons ——————————————————————————————————————————————— */

.btn {
  display: inline-block;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 13px 22px;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.btn-primary { background: var(--ink); color: var(--paper-2); }
.btn-primary:hover { background: var(--ink-2); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn-ghost:hover { border-color: var(--muted); }
.btn-lg { padding: 16px 28px; font-size: 16px; }
.btn-quiet { border: 0; background: none; padding: 13px 10px; font-weight: 600; }

/* —— Sections ——————————————————————————————————————————————— */

section { padding: 84px 0; }
.section-head { max-width: var(--measure); }
.section-head h2 { margin-top: 10px; }
.section-head .lede { margin-top: 16px; }

.band { background: var(--paper-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }

/* —— Hero —————————————————————————————————————————————————
   Full-bleed desk atmosphere + the product moment: your phone
   ringing into a live AI conference. One composition.          */

.hero {
  position: relative;
  padding: 0;
  overflow: hidden;
  background: #0a121c;
  color: #e8eef4;
  min-height: 0;
  display: flex;
  align-items: stretch;
}

.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-grain {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image:
    linear-gradient(105deg, transparent 40%, rgba(36, 71, 110, 0.35) 72%, rgba(224, 138, 16, 0.12) 100%),
    repeating-linear-gradient(
      -12deg,
      transparent 0,
      transparent 11px,
      rgba(255, 255, 255, 0.015) 11px,
      rgba(255, 255, 255, 0.015) 12px
    );
}

.hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  opacity: 0.55;
}

.hero-glow-system {
  width: 420px;
  height: 420px;
  right: -80px;
  top: 10%;
  background: rgba(36, 71, 110, 0.55);
}

.hero-glow-live {
  width: 280px;
  height: 280px;
  right: 18%;
  bottom: -40px;
  background: rgba(224, 138, 16, 0.28);
  animation: glow-breathe 4.8s ease-in-out infinite;
}

@keyframes glow-breathe {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.08); }
}

.hero-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(240px, 420px);
  gap: 28px 36px;
  align-items: center;
  width: 100%;
  padding-top: 48px;
  padding-bottom: 48px;
  /* Keep the first viewport readable: side-by-side, not a long scroll. */
  min-height: min(calc(100vh - 72px), 720px);
}

.hero-copy { max-width: 34rem; }

.hero-tag {
  color: #9eb0c4;
}

.hero h1 {
  margin-top: 14px;
  max-width: 14ch;
  color: #fff;
  font-size: clamp(32px, 4.6vw, 56px);
  line-height: 1.05;
}

.hero .lede {
  margin-top: 16px;
  max-width: 36ch;
  color: #a9bacd;
  font-size: clamp(16px, 1.7vw, 18px);
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 22px; }

.hero .btn-primary {
  background: var(--live);
  color: var(--ink);
}
.hero .btn-primary:hover { background: #f0a02a; }

.hero .btn-ghost {
  color: #e8eef4;
  border-color: rgba(232, 238, 244, 0.28);
}
.hero .btn-ghost:hover { border-color: rgba(232, 238, 244, 0.55); background: rgba(255,255,255,0.04); }

.hero-note {
  font-family: var(--mono);
  font-size: 13px;
  color: #7f92a8;
  margin-top: 16px;
}

/* Entrance — copy only; stage stays visible */
.hero-copy > * {
  opacity: 0;
  transform: translateY(14px);
}
.hero.is-in .hero-copy > * {
  animation: hero-rise 0.65s cubic-bezier(.2,.7,.2,1) forwards;
}
.hero.is-in .hero-copy > *:nth-child(1) { animation-delay: 0.04s; }
.hero.is-in .hero-copy > *:nth-child(2) { animation-delay: 0.12s; }
.hero.is-in .hero-copy > *:nth-child(3) { animation-delay: 0.2s; }
.hero.is-in .hero-copy > *:nth-child(4) { animation-delay: 0.28s; }
.hero.is-in .hero-copy > *:nth-child(5) { animation-delay: 0.36s; }

@keyframes hero-rise {
  to { opacity: 1; transform: translateY(0); }
}

/* —— Hero stage: phone + two tracks ———————————————— */

.hero-stage {
  position: relative;
  width: 100%;
}

.stage-board {
  background: rgba(8, 14, 22, 0.72);
  border: 1px solid rgba(232, 238, 244, 0.14);
  border-radius: 20px;
  padding: 16px 16px 18px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 30px 60px -28px rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
}

.stage-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 4px 4px 14px;
  border-bottom: 1px solid rgba(232, 238, 244, 0.1);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7f92a8;
}

.stage-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--live);
  font-weight: 600;
}

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 0 rgba(224, 138, 16, 0.55);
  animation: lamp 1.8s ease-out infinite;
}

.stage-body {
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: 18px;
  align-items: start;
  padding-top: 16px;
}

.stage-phone { text-align: center; }

.phone-shell {
  background: linear-gradient(165deg, #243246 0%, #121c2a 100%);
  border: 1px solid rgba(232, 238, 244, 0.18);
  border-radius: 26px;
  padding: 9px 9px 12px;
  box-shadow: 0 18px 36px -18px rgba(0, 0, 0, 0.9);
  animation: phone-ring 2.8s ease-in-out infinite;
  transform-origin: 50% 80%;
}

@keyframes phone-ring {
  0%, 100% { transform: rotate(0deg); }
  2% { transform: rotate(-1.4deg); }
  4% { transform: rotate(1.2deg); }
  6% { transform: rotate(-1deg); }
  8% { transform: rotate(0.8deg); }
  10%, 100% { transform: rotate(0deg); }
}

.phone-notch {
  width: 42%;
  height: 5px;
  margin: 3px auto 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
}

.phone-screen {
  background: #050b12;
  border-radius: 18px;
  padding: 14px 12px 12px;
  text-align: left;
}

.phone-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7f92a8;
}

.phone-who {
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.02em;
  color: #fff;
  margin-top: 6px;
}

.phone-sub {
  font-size: 12px;
  color: var(--live);
  margin-top: 3px;
}

.phone-wave {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 32px;
  margin: 12px 0 10px;
}

.phone-wave span {
  flex: 1;
  min-height: 6px;
  border-radius: 2px;
  background: var(--live);
  transform-origin: bottom;
  animation: wave 1.1s ease-in-out infinite;
}

.phone-wave span:nth-child(1) { height: 28%; animation-delay: 0s; }
.phone-wave span:nth-child(2) { height: 55%; animation-delay: 0.08s; }
.phone-wave span:nth-child(3) { height: 78%; animation-delay: 0.16s; }
.phone-wave span:nth-child(4) { height: 42%; animation-delay: 0.24s; }
.phone-wave span:nth-child(5) { height: 90%; animation-delay: 0.32s; }
.phone-wave span:nth-child(6) { height: 60%; animation-delay: 0.4s; }
.phone-wave span:nth-child(7) { height: 35%; animation-delay: 0.48s; }
.phone-wave span:nth-child(8) { height: 72%; animation-delay: 0.56s; }
.phone-wave span:nth-child(9) { height: 48%; animation-delay: 0.64s; }
.phone-wave span:nth-child(10) { height: 30%; animation-delay: 0.72s; }

@keyframes wave {
  0%, 100% { transform: scaleY(0.45); opacity: 0.55; }
  50% { transform: scaleY(1); opacity: 1; }
}

.phone-keys {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 5px;
}

.phone-key {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.03em;
  text-align: center;
  padding: 7px 2px;
  border-radius: 7px;
  border: 1px solid rgba(232, 238, 244, 0.14);
  color: #a9bacd;
}

.phone-key.is-hot {
  background: var(--live);
  border-color: transparent;
  color: var(--ink);
  font-weight: 600;
  animation: key-pulse 2.8s ease-in-out infinite;
}

@keyframes key-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 138, 16, 0.45); }
  40% { box-shadow: 0 0 0 8px rgba(224, 138, 16, 0); }
}

.phone-caption {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7f92a8;
  margin-top: 10px;
}

.stage-tracks {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding-top: 4px;
}

.stage-track-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.track-pill {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  padding: 4px 9px;
  border-radius: 999px;
}

.track-pill-ai {
  background: rgba(36, 71, 110, 0.55);
  color: #c5d7eb;
  border: 1px solid rgba(158, 186, 214, 0.35);
}

.track-pill-you {
  background: rgba(224, 138, 16, 0.18);
  color: #f6d59a;
  border: 1px solid rgba(242, 221, 180, 0.4);
}

.track-clock {
  font-family: var(--mono);
  font-size: 11px;
  color: #7f92a8;
}

.stage-bar {
  height: 8px;
  border-radius: 999px;
  position: relative;
  overflow: hidden;
}

.stage-bar-ai {
  background: rgba(36, 71, 110, 0.35);
  border: 1px solid rgba(158, 186, 214, 0.25);
}

.stage-bar-ai .fill {
  position: absolute;
  inset: 0;
  width: 100%;
  background: linear-gradient(90deg, #24476e, #3d6a9a);
  border-radius: inherit;
  transform-origin: left center;
  transform: scaleX(0.15);
}

.stage-bar-you {
  background: rgba(224, 138, 16, 0.15);
  border: 1px solid rgba(242, 221, 180, 0.28);
}

.stage-bar-you .fill {
  position: absolute;
  inset: 0;
  width: 100%;
  background: linear-gradient(90deg, #c47a0c, #e08a10);
  border-radius: inherit;
  transform-origin: left center;
  transform: scaleX(0.08);
}

.hero.play .stage-bar-ai .fill {
  animation: grow 2s cubic-bezier(.2,.7,.3,1) 0.35s forwards;
}
.hero.play .stage-bar-you .fill {
  animation: grow 1.4s cubic-bezier(.2,.7,.3,1) 1.8s forwards;
}

.stage-line {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.45;
  color: #a9bacd;
  margin-top: 8px;
  opacity: 0.35;
}

.hero.play .line-1 { animation: line-in 0.4s ease forwards 0.7s; }
.hero.play .line-2 { animation: line-in 0.4s ease forwards 1.25s; }
.hero.play .line-3 { animation: line-in 0.4s ease forwards 2.15s; }
.hero.play .line-4 { animation: line-in 0.4s ease forwards 2.7s; }

@keyframes line-in {
  to { opacity: 1; }
}

/* Soft section reveals */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s cubic-bezier(.2,.7,.2,1), transform 0.65s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* —— Signature strip (legacy) ———————————————————————————— */

.strip {
  margin-top: 52px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 22px 22px 26px;
  box-shadow: 0 1px 0 rgba(12, 20, 32, 0.03), 0 18px 40px -30px rgba(12, 20, 32, 0.5);
}

.strip-head {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: baseline; justify-content: space-between;
  padding-bottom: 16px; border-bottom: 1px solid var(--rule);
}

.strip-who { font-weight: 600; }
.strip-who span { font-family: var(--mono); color: var(--muted); font-weight: 400; }

.track { position: relative; padding: 26px 0 6px; }

.track-row { display: grid; grid-template-columns: 62px 1fr; gap: 14px; align-items: center; min-height: 44px; }
.track-time { font-family: var(--mono); font-size: 12px; color: var(--muted); }

.bar { height: 10px; border-radius: 5px; position: relative; transform-origin: left center; }
.bar-system { background: var(--system-soft); border: 1px solid #cddcec; }
.bar-system .fill { position: absolute; inset: 0; background: var(--system); border-radius: 5px; width: 100%; transform-origin: left center; }
.bar-live { background: var(--live-soft); border: 1px solid #f2ddb4; }
.bar-live .fill { position: absolute; inset: 0; background: var(--live); border-radius: 5px; width: 100%; transform-origin: left center; }

.play .bar-system .fill { animation: grow 2.1s cubic-bezier(.2,.7,.3,1) forwards; }
.play .bar-live .fill { animation: grow 1.5s cubic-bezier(.2,.7,.3,1) 1.5s forwards; transform: scaleX(0); }

@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.track-label { font-size: 14px; margin-top: 6px; color: var(--ink-2); }
.track-label b { font-weight: 600; }
.track-label .mono { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }

.joinmark {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--live); font-weight: 500;
}

.strip-foot {
  margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--rule);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px;
}

.chit .tag { margin-bottom: 4px; }
.chit p { font-size: 14.5px; }

/* —— Cost of a missed call ————————————————————————————————— */

.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 40px; }
.figure { border-left: 3px solid var(--rule); padding-left: 18px; }
.figure .n { font-family: var(--display); font-size: 40px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.figure p { font-size: 14.5px; color: var(--muted); margin-top: 8px; }
.figure.accent { border-left-color: var(--live); }
.figure.accent .n { color: var(--live); }

/* —— Steps: a real sequence in time, so numbering earns its place ———— */

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 28px; margin-top: 44px; counter-reset: step; }
.step { counter-increment: step; }
.step::before {
  content: counter(step, decimal-leading-zero);
  display: block; font-family: var(--mono); font-size: 13px; font-weight: 500;
  color: var(--live); letter-spacing: 0.1em; margin-bottom: 12px;
}
.step h3 { margin-bottom: 8px; }
.step p { font-size: 15px; color: var(--ink-2); }

/* —— Use cases: product UI as explanation ———————————————— */

.usecases .section-head { max-width: 48ch; }

.usecase {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: 48px;
  align-items: center;
  margin-top: 64px;
}

.usecase.flip { grid-template-columns: minmax(280px, 420px) minmax(0, 1fr); }
.usecase.flip .usecase-copy { order: 2; }
.usecase.flip .usecase-stage { order: 1; }

.usecase-copy h3 {
  margin-top: 10px;
  font-size: clamp(24px, 3vw, 32px);
  max-width: 18ch;
  line-height: 1.12;
}

.usecase-copy > p {
  margin-top: 14px;
  color: var(--ink-2);
  font-size: 16px;
  max-width: 42ch;
}

.usecase-points {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.usecase-points li {
  font-size: 14.5px;
  color: var(--ink-2);
  padding-left: 22px;
  position: relative;
}

.usecase-points li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--ok);
  font-weight: 700;
}

.usecase-stage {
  display: flex;
  justify-content: center;
}

/* App chrome — mirrors mobile / dashboard tokens */
.device {
  width: 100%;
  max-width: 380px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(12, 20, 32, 0.04),
    0 28px 56px -36px rgba(12, 20, 32, 0.55);
  transform: translateY(0);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.usecase:hover .device {
  transform: translateY(-4px);
  box-shadow:
    0 1px 0 rgba(12, 20, 32, 0.04),
    0 36px 64px -32px rgba(12, 20, 32, 0.6);
}

.device-live {
  border-color: #f2ddb4;
  background: linear-gradient(180deg, #fdf1dc 0%, var(--paper) 42%);
}

.device-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
}

.device-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.02em;
}

.device-tenant {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.device-body { padding: 14px 14px 18px; }

.mock-filters { display: flex; gap: 6px; margin-bottom: 12px; }
.mock-chip {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--rule);
  color: var(--muted);
  background: var(--paper-2);
}
.mock-chip.is-on {
  background: var(--system-soft);
  border-color: #cddcec;
  color: var(--system);
}

.mock-group {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 10px;
}

.mock-group.is-live {
  border-color: #f2ddb4;
  background: var(--live-soft);
}

.mock-group-head {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 10px;
  align-items: start;
  padding: 12px;
}

.mock-phone-ico {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--system-soft);
  border: 1px solid #cddcec;
  position: relative;
}
.mock-phone-ico::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 2px solid var(--system);
  border-radius: 50%;
  border-top-color: transparent;
}
.mock-group.is-live .mock-phone-ico {
  background: #fff8ec;
  border-color: #f2ddb4;
}
.mock-group.is-live .mock-phone-ico::after {
  border-color: var(--live);
  border-top-color: transparent;
}

.mock-who {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 7px;
}

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--live);
  animation: lamp 2.4s ease-out infinite;
}

.mock-num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

.mock-stats {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}
.mock-stats b { color: var(--system); font-weight: 600; }
.mock-stats em { color: #8a5a06; font-style: normal; font-weight: 700; }

.mock-time {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.mock-time.live {
  color: #8a5a06;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.mock-calls { border-top: 1px solid #f2ddb4; }
.mock-call {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 10px 56px;
  font-size: 13px;
  color: var(--ink-2);
  border-top: 1px solid rgba(242, 221, 180, 0.55);
  background: rgba(255, 255, 255, 0.55);
}
.mock-call.is-live { background: rgba(255, 255, 255, 0.75); }

.badge-live, .badge-new {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 3px 7px;
  flex-shrink: 0;
}
.badge-live {
  color: #8a5a06;
  background: #fff;
  border: 1px solid #f2ddb4;
}
.badge-new {
  color: var(--system);
  background: var(--system-soft);
  border: 1px solid #cddcec;
}

/* Live conversation mock */
.live-body { padding-top: 12px; }

.live-banner {
  background: var(--paper-2);
  border: 1px solid #f2ddb4;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.live-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  margin-top: 4px;
}
.live-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}

.bubbles { display: flex; flex-direction: column; gap: 8px; }
.bubble {
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  max-width: 92%;
}
.bubble .tag { margin-bottom: 4px; display: inline-flex; align-items: center; gap: 6px; }
.bubble p { font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.bubble.system { background: var(--system-soft); border-color: #cddcec; }
.bubble.caller { margin-left: auto; background: #fff; }
.bubble.you {
  border-color: #f2ddb4;
  background: var(--live-soft);
  max-width: 95%;
}

.live-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.act {
  flex: 1;
  text-align: center;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  padding: 11px 8px;
  border-radius: 8px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  color: var(--ink);
}
.act.primary { background: var(--ink); color: var(--paper-2); border-color: var(--ink); }
.act.ghost { background: transparent; color: var(--muted); }
.act.sm { display: inline-block; flex: none; padding: 9px 14px; margin-top: 10px; }

/* Wrap-up mock */
.wrap-head { margin-bottom: 14px; }
.wrap-block {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.commit {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 8px;
}
.commit-mark {
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--live);
  flex-shrink: 0;
}
.commit p { font-size: 14px; color: var(--ink-2); }
.draft {
  margin-top: 8px;
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.45;
}
.wrap-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.chip-ok {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ok);
  background: #eef7f1;
  border: 1px solid #b7dcc7;
  border-radius: 999px;
  padding: 5px 10px;
}

/* Reveal on scroll */
.usecase.is-in .device {
  animation: rise 0.7s cubic-bezier(.2,.7,.3,1) both;
}

@keyframes rise {
  from { opacity: 0.35; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

/* —— Comparison ——————————————————————————————————————————— */

.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 40px; }

.col {
  background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: 12px; padding: 24px;
}

.col.is-us { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(12, 20, 32, 0.06); }
.col h3 { margin-bottom: 4px; }
.col .price { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.col ul { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.col li { font-size: 14.5px; padding-left: 24px; position: relative; color: var(--ink-2); }
.col li::before { content: "—"; position: absolute; left: 0; color: var(--muted); font-family: var(--mono); }
.col li.yes::before { content: "✓"; color: var(--ok); font-weight: 700; }
.col li.no::before { content: "✕"; color: #b0392b; }

/* —— Pricing ——————————————————————————————————————————————— */

#pricing .wrap,
.faq-band .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#pricing .section-head,
.faq-band .section-head {
  text-align: center;
  margin-inline: auto;
}

.price-card {
  background: var(--paper-2); border: 1px solid var(--ink);
  border-radius: 14px; padding: 34px; margin-top: 40px; max-width: 560px;
  width: 100%;
  text-align: left;
  box-shadow: 0 20px 44px -34px rgba(12, 20, 32, 0.65);
}

.price-big { font-family: var(--display); font-size: 62px; font-weight: 800; letter-spacing: -0.035em; line-height: 1; }
.price-big span { font-family: var(--body); font-size: 17px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.price-card ul { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.price-card li { font-size: 15px; padding-left: 26px; position: relative; }
.price-card li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 700; }
.price-card .btn { margin-top: 26px; width: 100%; text-align: center; }
.fineprint { font-family: var(--mono); font-size: 12.5px; color: var(--muted); margin-top: 16px; line-height: 1.5; }

/* —— FAQ ——————————————————————————————————————————————————— */

.faq { margin-top: 36px; max-width: var(--measure); width: 100%; text-align: left; }
.faq details { border-bottom: 1px solid var(--rule); padding: 18px 0; }
.faq summary { font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); color: var(--muted); }
.faq details[open] summary::after { content: "–"; }
.faq p { margin-top: 12px; color: var(--ink-2); font-size: 15.5px; }

/* —— Close ————————————————————————————————————————————————— */

.close { background: var(--ink); color: var(--paper); text-align: center; }
.close h2 { color: var(--paper-2); }
.close .lede { color: #a9bacd; margin: 16px auto 0; max-width: 46ch; }
.close .btn-primary { background: var(--live); color: var(--ink); margin-top: 28px; }
.close .btn-primary:hover { background: #f0a02a; }
.close .hero-note { color: #7f92a8; }

footer .wrap.foot {
  width: calc(100% - 80px);
  max-width: var(--wrap);
  margin: 12px auto 16px;
  padding-left: 0;
  padding-right: 0;
}

.foot {
  padding-top: 16px;
  padding-bottom: 16px;
  font-size: 14px;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
}

/* —— Quality floor ————————————————————————————————————————— */

:focus-visible { outline: 2px solid var(--live); outline-offset: 3px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  .lamp { animation: none; }
  .live-dot { animation: none; }
  .phone-shell { animation: none; }
  .phone-wave span { animation: none; transform: scaleY(0.8); }
  .phone-key.is-hot { animation: none; }
  .hero-glow-live { animation: none; }
  .hero-copy > * {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
  .stage-bar-ai .fill,
  .stage-bar-you .fill {
    transform: scaleX(1);
    animation: none !important;
  }
  .stage-line {
    opacity: 1;
    animation: none !important;
  }
  .play .bar-system .fill,
  .play .bar-live .fill { animation: none; transform: scaleX(1); }
  .usecase:hover .device { transform: none; }
  .usecase.is-in .device { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 980px) {
  .hero { min-height: 0; }
  .hero h1 { max-width: 14ch; }
  .stage-body {
    grid-template-columns: 150px 1fr;
  }
}

@media (max-width: 900px) {
  .usecase,
  .usecase.flip {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 48px;
  }
  .usecase.flip .usecase-copy,
  .usecase.flip .usecase-stage { order: unset; }
  .usecase-stage { order: -1; }
}

@media (max-width: 720px) {
  section { padding: 60px 0; }
  .stage-body {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .stage-phone { max-width: 200px; margin: 0 auto; }
  .top-links .btn-quiet { display: none; }
  .mock-call { padding-left: 12px; }
  .track-row { grid-template-columns: 52px 1fr; gap: 10px; }
  .strip { padding: 18px 16px 22px; }
}

/* —— The call timeline ————————————————————————————————————————
   The page's one structural idea: a single call, drawn as three lanes.
   Lumo's lane runs the whole width; yours starts partway in. Nobody
   else's AI lane can be drawn that way, which is the entire argument —
   so the same figure is reused in the comparison further down, with the
   competitors' AI lane stopping where the human starts.

   Lane colours are the product's colour law:
     caller → slate   you → amber (you, on the line)   lumo → blue
   ========================================================================= */

.tl {
  margin: 0;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 18px 20px 14px;
  box-shadow: 0 18px 40px -28px rgba(16, 24, 32, 0.45);
}

.tl-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.tl-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
}

/* Durations are call-log data, so they are set in the mono face. */
.tl-dur {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.tl-row {
  display: grid;
  grid-template-columns: 58px 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 9px;
}

.tl-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
}

.tl-track {
  position: relative;
  height: 12px;
  border-radius: 6px;
  background: var(--system-soft);
  overflow: hidden;
}

.tl-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--from, 0%);
  width: calc(var(--to, 100%) - var(--from, 0%));
  border-radius: 6px;
  background: var(--lane, var(--muted));
  transform: scaleX(0);
  transform-origin: left center;
}

.tl-row[data-who="caller"] .tl-bar { --lane: var(--caller); }
.tl-row[data-who="lumo"]   .tl-bar { --lane: var(--ai); }
.tl-row[data-who="you"]    .tl-bar { --lane: var(--live); }

/* Lanes draw left-to-right in the order they actually join the call. */
.tl.is-in .tl-bar { animation: tl-draw 900ms cubic-bezier(.22,.7,.3,1) forwards; }
.tl.is-in .tl-row[data-who="caller"] .tl-bar { animation-delay: 120ms; }
.tl.is-in .tl-row[data-who="lumo"]   .tl-bar { animation-delay: 320ms; }
.tl.is-in .tl-row[data-who="you"]    .tl-bar { animation-delay: 900ms; }

@keyframes tl-draw { to { transform: scaleX(1); } }

/* A lane that stops mid-call, for the competitor figures. */
.tl-bar.is-cut::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 2px;
  background: var(--paper-2);
}

.tl-marks {
  position: relative;
  height: 16px;
  margin: 10px 0 0 70px;
}

.tl-marks span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.tl-marks span:first-child { transform: none; }
.tl-marks span:last-child  { transform: translateX(-100%); }
.tl-marks .is-you { color: var(--live-ink, #8a5a06); font-weight: 500; }

/* The join moment, marked on the track itself. */
.tl-join {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  background: var(--live);
  left: var(--at, 38%);
  opacity: 0.9;
}

/* —— Comparison figures ————————————————————————————————————— */

.tl-compare { margin-top: 18px; }
.tl-compare .tl {
  box-shadow: none;
  padding: 14px 16px 10px;
}
.tl-compare .tl-row { grid-template-columns: 58px 1fr; margin-bottom: 7px; }
.tl-compare .tl-track { height: 9px; }
.tl-verdict {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.col.is-us .tl-verdict { color: var(--ink); }

/* —— Hero mascot ———————————————————————————————————————————
   Box matches the cropped artboard (216x378), so the whole box is character
   rather than empty padding.

   Lumo is drawn twice: the full mascot behind the call-timeline card, and an
   arms-only copy (same artboard, same keyframes) stacked on top of it. The
   card is then pulled up over his lower body, so his hands come to rest on
   its top edge while the rest of him stays behind. The wrapper is positioned
   but has no z-index of its own — that keeps the arms in the same stacking
   context as the card, which is the only way they can paint above it. */

/* One number drives everything: --mascot-h on .hero-stage. Width comes from
   the artboard ratio and the card's overlap comes from the same value, so a
   breakpoint only ever has to set the height.

   NEVER size .hero-mascot or .hero-mascot-arms directly — they are two
   stacked layers of one figure, and sizing either on its own scales the body
   away from the arms and Lumo comes apart. Set --mascot-h instead. */

.hero-stage { --mascot-h: 294px; }

.hero-mascot-wrap {
  position: relative;
  width: calc(var(--mascot-h) * 216 / 378);
  height: var(--mascot-h);
  margin: 0 auto;
}

.hero-mascot,
.hero-mascot-arms {
  position: absolute;
  inset: 0;
}

.hero-mascot-arms {
  z-index: 2;
  pointer-events: none;
  /* Cream hands on a white card need the depth cue to read as "in front".
     The filter applies to the arm shapes themselves, not the empty box. */
  filter: drop-shadow(0 3px 4px rgba(16, 24, 32, 0.22));
}

.hero-stage .tl {
  /* Rides up over Lumo's lower body so his hands land on the top edge. */
  margin-top: calc(var(--mascot-h) * -0.102);
  position: relative;
  z-index: 1;
}

@media (max-width: 860px) {
  .tl-row { grid-template-columns: 46px 1fr; gap: 9px; }
  .tl-marks { margin-left: 55px; }
}

/* Mid widths stay side-by-side; stack only when copy + stage can't share a row. */
@media (max-width: 1100px) {
  .hero-layout {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 360px);
    gap: 24px 28px;
    padding-top: 40px;
    padding-bottom: 40px;
    min-height: 0;
  }
  .hero-stage { --mascot-h: 224px; }
}

@media (max-width: 760px) {
  .hero-layout {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-top: 40px;
    padding-bottom: 44px;
    min-height: 0;
  }
  .hero-stage { max-width: 420px; --mascot-h: 196px; }
}

@media (prefers-reduced-motion: reduce) {
  .tl .tl-bar { transform: scaleX(1); animation: none !important; }
  .lamp { animation: none; }
}

/* Hero stage now carries the mascot + timeline instead of the old phone mock. */
.hero-stage {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-caption {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #7f92a8;
  text-align: center;
}

.hero .lede em {
  font-style: normal;
  color: #fff;
  border-bottom: 2px solid var(--live);
  padding-bottom: 1px;
}

.hero h1 { max-width: 16ch; }

/* —— Plan grid ————————————————————————————————————————————————
   Three prices, one product. The cards carry only what differs (volume,
   numbers, seats); everything shared sits once underneath in .plan-shared,
   so the page never implies the wedge is an upsell. */

.plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 40px;
  width: 100%;
  max-width: 720px;
  align-items: start;
}

.plan-card {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 28px 24px;
  text-align: left;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Desk is the one we lead every conversation with. */
.plan-card.is-lead {
  border-color: var(--ink);
  box-shadow: 0 20px 44px -32px rgba(12, 20, 32, 0.6);
}

.plan-name {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

.plan-card .price-big { font-size: 46px; }

.plan-for {
  font-size: 14px;
  color: var(--muted);
  margin-top: 10px;
}

.plan-card ul {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.plan-card li {
  font-size: 14.5px;
  line-height: 1.45;
  padding-left: 22px;
  position: relative;
}

.plan-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--ok);
  font-weight: 700;
}

.plan-card .btn {
  margin-top: auto;
  padding-top: 13px;
  width: 100%;
  text-align: center;
}

.plan-card ul + .btn { margin-top: 24px; }

/* Everything every plan includes — stated once, so it reads as the product
   rather than as a tier's feature list. */
.plan-shared {
  list-style: none;
  margin: 28px 0 0;
  padding: 22px 24px;
  width: 100%;
  background: var(--system-soft);
  border-radius: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px 26px;
  text-align: left;
}

.plan-shared li {
  font-size: 14.5px;
  padding-left: 24px;
  position: relative;
}

.plan-shared li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--ok);
  font-weight: 700;
}

#pricing .fineprint { max-width: 62ch; text-align: center; }

@media (max-width: 900px) {
  .plans { grid-template-columns: 1fr; max-width: 460px; }
  .plan-shared { grid-template-columns: 1fr; max-width: 460px; }
  .plan-card { height: auto; }
}