/* ============================================================
   Lobby — marketing site stylesheet
   Palette: paper #FAFAF8 · ink #0B0B10 · call-green #0FA958
   Type: Bricolage Grotesque (display) · Instrument Sans (body)
         JetBrains Mono (stats / latency / data)
   ============================================================ */

:root {
  --paper: #FAFAF8;
  --ink: #0B0B10;
  --ink-soft: #1A1A22;
  --slate: #5B5F6B;
  --line: rgba(11, 11, 16, 0.10);
  --line-dark: rgba(250, 250, 248, 0.12);
  --green: #0FA958;
  --green-deep: #0B8746;
  --green-soft: rgba(15, 169, 88, 0.12);
  --paper-dim: rgba(250, 250, 248, 0.66);

  --display: "Bricolage Grotesque", "Instrument Sans", sans-serif;
  --body: "Instrument Sans", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  --shell: 1120px;
  --r: 14px;
  --r-lg: 22px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; } /* keep anchored content clear of the sticky header */
body {
  font-family: var(--body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; }
a { color: inherit; text-decoration: none; }
.mono { font-family: var(--mono); }
.shell { max-width: var(--shell); margin: 0 auto; padding: 0 24px; }

h1, h2, h3 { font-family: var(--display); line-height: 1.08; letter-spacing: -0.02em; }

::selection { background: var(--green); color: #fff; }

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

/* ---------- shared bits ---------- */
.dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--slate); margin-right: 8px; vertical-align: 1px;
}
.dot--live { background: var(--green); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(15,169,88,.45); }
  60% { box-shadow: 0 0 0 7px rgba(15,169,88,0); }
}

.eyebrow {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--slate); margin-bottom: 22px;
}
.dark .eyebrow { color: var(--paper-dim); }

.section-title {
  font-size: clamp(30px, 4.4vw, 46px); font-weight: 700; margin-bottom: 18px;
}
.section-sub { color: var(--slate); max-width: 560px; margin-bottom: 40px; }

.dark { background: var(--ink); color: var(--paper); }
.dark .section-sub { color: var(--paper-dim); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  font: 600 15px/1 var(--body); padding: 13px 22px; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer; transition: all .18s ease;
  white-space: nowrap;
}
.btn--full { width: 100%; }

.btn--call { background: var(--green); color: #fff; }
.btn--call:hover { background: var(--green-deep); transform: translateY(-1px); }

.btn--solid-dark { background: var(--ink); color: var(--paper); }
.btn--solid-dark:hover { background: var(--ink-soft); transform: translateY(-1px); }

.btn--solid-light { background: var(--paper); color: var(--ink); }
.btn--solid-light:hover { background: #fff; transform: translateY(-1px); }

.btn--ghost-light { background: transparent; color: var(--paper); border-color: var(--line-dark); }
.btn--ghost-light:hover { border-color: var(--paper); }

.btn--ghost-dark { background: transparent; color: inherit; border-color: currentColor; }
.cta .btn--ghost-dark { color: var(--paper); border-color: var(--line-dark); }
.cta .btn--ghost-dark:hover { border-color: var(--paper); }
.plans .btn--ghost-dark { border-color: var(--line); color: var(--ink); }
.plans .btn--ghost-dark:hover { border-color: var(--ink); }

/* ---------- nav ---------- */
.nav { background: var(--ink); color: var(--paper); position: sticky; top: 0; z-index: 50; }
.nav__inner {
  max-width: var(--shell); margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; gap: 32px;
}
.nav__brand {
  display: flex; align-items: center; gap: 9px;
  font: 700 20px/1 var(--display); letter-spacing: -0.01em;
}
.nav__mark { width: 26px; height: 26px; border-radius: 6px; }
.nav__links { display: flex; gap: 26px; margin-left: 12px; }
.nav__links a { font-size: 14.5px; color: var(--paper-dim); transition: color .15s; }
.nav__links a:hover { color: var(--paper); }
.nav__actions { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.nav__actions .btn { padding: 10px 18px; font-size: 14px; }

.nav__burger { display: none; background: none; border: 0; cursor: pointer; padding: 6px; }
.nav__burger span { display: block; width: 22px; height: 2px; background: var(--paper); margin: 5px 0; transition: .2s; }

.nav__mobile { display: none; pointer-events: auto; }
.nav__mobile a { display: block; padding: 14px 24px; border-top: 1px solid var(--line-dark); color: var(--paper); }
.nav__mobile .btn { margin: 14px 24px; display: inline-flex; }

/* ---------- hero ---------- */
.hero {
  padding: 96px 0 80px; text-align: center; position: relative; overflow: hidden;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(15,169,88,.06), transparent 70%),
    var(--paper);
}
.hero::before, .phero::before {
  content: ""; position: absolute; inset: -45% -25%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='30' viewBox='0 0 140 30'%3E%3Cpath d='M0 15 Q 17.5 6 35 15 T 70 15 T 105 15 T 140 15' fill='none' stroke='%23E8E5DD' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 140px 30px;
  transform: rotate(-7deg);
  opacity: .55;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(85% 80% at 50% 45%, rgba(0,0,0,.35), #000 80%);
          mask-image: radial-gradient(85% 80% at 50% 45%, rgba(0,0,0,.35), #000 80%);
}
.hero__inner { max-width: 880px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }
.hero__title { font-size: clamp(40px, 7vw, 76px); font-weight: 800; }
.hero__rotator { display: inline-block; min-height: 1.1em; }
.hero__word { color: var(--green-deep); display: inline-block; white-space: nowrap; }
/* typewriter caret */
.hero__word::after {
  content: ""; display: inline-block; width: 3px; height: .82em;
  background: var(--green-deep); margin-left: 5px; border-radius: 2px;
  vertical-align: -0.04em;
  animation: caret 2.1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

.hero__sub {
  max-width: 620px; margin: 26px auto 44px; color: var(--slate); font-size: 17.5px;
}

/* call widget */
.callbox {
  max-width: 620px; margin: 0 auto; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 26px 26px 18px; box-shadow: 0 24px 60px -32px rgba(11,11,16,.25);
  position: relative;
}
.callbox__label { font: 500 14px/1.4 var(--body); color: var(--slate); margin-bottom: 14px; }
.callbox__field {
  display: flex; gap: 8px; background: var(--paper);
  border: 1px solid var(--line); border-radius: 999px; padding: 6px;
}
.callbox__field:focus-within { border-color: var(--green); }
/* groups country-code + number so the button can drop below on mobile */
.callbox__row { display: flex; flex: 1; align-items: center; min-width: 0; }
.callbox__cc {
  border: 0; background: transparent; font: 500 15px var(--body);
  padding: 0 4px 0 14px; cursor: pointer; color: var(--ink); outline: none;
}
.callbox__input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  font: 500 16px var(--body); color: var(--ink); padding: 10px 4px;
}
.callbox__input::placeholder { color: #9a9da6; }
.callbox__msg { margin-top: 12px; font-size: 14px; color: var(--green-deep); }
.callbox__msg.is-err { color: #C0392B; }
.callbox__note { margin-top: 10px; font-size: 12.5px; color: var(--slate); opacity: .85; }

.callbox__wave {
  display: flex; gap: 4px; align-items: flex-end; justify-content: center;
  height: 26px; margin-top: 18px; opacity: .9;
}
.callbox__wave span {
  width: 3px; height: 100%; border-radius: 2px; background: var(--green);
  transform: scaleY(.22); transform-origin: bottom; opacity: .8;
  animation: eq 2.6s cubic-bezier(.45,0,.55,1) infinite;
  will-change: transform;
}
.callbox__wave span:nth-child(3n)  { animation-delay: .3s; }
.callbox__wave span:nth-child(3n+1){ animation-delay: .9s; }
.callbox__wave span:nth-child(4n)  { animation-delay: .6s; }
.callbox__wave span:nth-child(5n)  { animation-delay: 1.2s; }
.callbox__wave span:nth-child(7n)  { animation-delay: 1.6s; }
@keyframes eq {
  0%, 100% { transform: scaleY(.22); }
  50% { transform: scaleY(1); }
}

.hero__stats {
  list-style: none; display: flex; gap: 56px; justify-content: center;
  margin-top: 56px; flex-wrap: wrap;
}
.hero__stats li { display: flex; flex-direction: column; gap: 4px; }
.hero__stats strong { font: 600 26px var(--mono); letter-spacing: -0.02em; }
.hero__stats span { font: 400 12.5px var(--mono); color: var(--slate); letter-spacing: .04em; text-transform: uppercase; }

/* ---------- transcript (signature) ---------- */
.transcript { padding: 96px 0; }
.transcript__head { max-width: 560px; margin-bottom: 48px; }
.transcript__head h2 { font-size: clamp(30px, 4.4vw, 46px); margin-bottom: 14px; }
.transcript__head p { color: var(--paper-dim); }

.transcript__stage { max-width: 720px; display: grid; gap: 18px; }
.t-row { display: grid; gap: 6px; opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .45s ease; }
.t-row.is-in { opacity: 1; transform: none; }
.t-who { font: 500 11.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--paper-dim); }
.t-bubble {
  border: 1px solid var(--line-dark); border-radius: var(--r);
  padding: 14px 18px; max-width: 540px; font-size: 15.5px; line-height: 1.55;
  background: rgba(250,250,248,.03);
}
.t-row--agent { justify-items: end; text-align: left; }
.t-row--agent .t-bubble { background: rgba(15,169,88,.10); border-color: rgba(15,169,88,.35); }
.t-lat { font-size: 12px; color: var(--green); }
.t-flag {
  font-style: normal; color: var(--ink); background: var(--green);
  border-radius: 4px; padding: 1px 7px; margin-left: 8px; font-size: 10.5px;
  color: #fff;
}
.t-row--interrupt .t-bubble { border-color: rgba(15,169,88,.5); }
.transcript__note { margin-top: 44px; font-size: 12.5px; color: var(--paper-dim); letter-spacing: .05em; }

/* ---------- features ---------- */
.features { padding: 96px 0; }
.features .section-title { max-width: 640px; margin-bottom: 48px; }
.features__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.card {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 28px 26px; background: #fff; transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 18px 44px -28px rgba(11,11,16,.3); }
.card h3 { font-size: 19px; margin-bottom: 10px; font-weight: 700; }
.card p { color: var(--slate); font-size: 15px; }

/* ---------- how it works ---------- */
.how { padding: 96px 0; }
.how .section-title { margin-bottom: 56px; }
.how__steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.how__num { font-size: 13px; color: var(--green); letter-spacing: .1em; }
.how__step h3 { font-size: 21px; margin: 14px 0 10px; }
.how__step p { color: var(--paper-dim); font-size: 15px; }

/* ---------- campaigns ---------- */
.campaigns { padding: 96px 0; }
.campaigns__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.campaigns__copy > p { color: var(--slate); margin-bottom: 22px; }
.ticklist { list-style: none; display: grid; gap: 10px; margin-bottom: 28px; }
.ticklist li { padding-left: 26px; position: relative; font-size: 15px; }
.ticklist li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 8px;
  border-left: 2.2px solid var(--green); border-bottom: 2.2px solid var(--green);
  transform: rotate(-45deg);
}

.panel {
  background: var(--ink); color: var(--paper); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: 0 32px 70px -38px rgba(11,11,16,.55);
}
.panel__bar {
  display: flex; align-items: center; gap: 7px; padding: 13px 16px;
  border-bottom: 1px solid var(--line-dark);
}
.panel__bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--line-dark); }
.panel__bar em { font-style: normal; font-size: 11.5px; color: var(--paper-dim); margin-left: 8px; }
.panel__table { width: 100%; border-collapse: collapse; font-size: 13px; }
.panel__table td { padding: 11px 16px; border-bottom: 1px solid rgba(250,250,248,.06); }
.panel__table td:last-child { text-align: right; color: var(--paper-dim); }
.pill {
  font-style: normal; font-size: 11px; border-radius: 999px; padding: 2px 10px;
  border: 1px solid var(--line-dark); color: var(--paper-dim);
}
.pill--done { color: var(--green); border-color: rgba(15,169,88,.45); }
.pill--live { color: var(--paper); border-color: var(--paper-dim); }
.pill--live::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); margin-right: 7px; vertical-align: 1px;
  animation: softpulse 2.4s ease-in-out infinite;
}
@keyframes softpulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(15,169,88,.5); }
  55% { box-shadow: 0 0 0 5px rgba(15,169,88,0); }
}
.panel__foot {
  display: flex; justify-content: space-between; padding: 12px 16px;
  font-size: 11.5px; color: var(--paper-dim);
}

/* ---------- industries ---------- */
.industries { padding: 96px 0; }
.industries__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ind {
  border: 1px solid var(--line-dark); border-radius: var(--r-lg); padding: 26px 24px;
  transition: border-color .18s ease, background .18s ease;
}
.ind:hover { border-color: rgba(15,169,88,.5); background: rgba(15,169,88,.05); }
.ind h3 { font-size: 18px; margin-bottom: 9px; }
.ind p { color: var(--paper-dim); font-size: 14.5px; }

/* ---------- pricing teaser ---------- */
.teaser { padding: 80px 0; }
.teaser__inner {
  display: flex; justify-content: space-between; align-items: center; gap: 32px;
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 44px 48px;
  background: #fff;
}
.teaser p { color: var(--slate); }

/* ---------- CTA ---------- */
.cta { padding: 110px 0; text-align: center; }
.cta h2 { font-size: clamp(32px, 5vw, 54px); margin-bottom: 16px; }
.cta p { color: var(--paper-dim); margin-bottom: 36px; }
.cta__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- pricing page ---------- */
.phero { padding: 90px 0 56px; text-align: center; position: relative; overflow: hidden; }
.phero .shell { position: relative; z-index: 1; }
.phero__title { font-size: clamp(38px, 6vw, 64px); font-weight: 800; }
.phero__sub { color: var(--slate); margin-top: 18px; }

.plans { padding: 16px 0 80px; }
.plans__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.plan {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 32px 28px; position: relative;
}
.plan--hot { border-color: var(--green); box-shadow: 0 28px 60px -36px rgba(15,169,88,.45); }
.plan__badge {
  position: absolute; top: -13px; left: 28px; background: var(--green); color: #fff;
  font: 600 12px var(--body); padding: 4px 14px; border-radius: 999px;
}
.plan__name { font-size: 20px; margin-bottom: 14px; }
.plan__price { font-size: 16px; color: var(--slate); }
.plan__price .mono { font-size: 40px; font-weight: 600; color: var(--ink); letter-spacing: -0.03em; }
.plan__calls { font-size: 13px; color: var(--green-deep); margin: 6px 0 14px; letter-spacing: .04em; }
.plan__fit { font-size: 14px; color: var(--slate); margin-bottom: 22px; min-height: 42px; }
.plan .ticklist { margin-bottom: 28px; }
.plan .ticklist li { font-size: 14.5px; }
.plans__more { text-align: center; margin-top: 40px; color: var(--slate); }
.plans__more a { color: var(--green-deep); font-weight: 600; }

/* ---------- FAQ ---------- */
.faq { padding: 80px 0 100px; }
.faq .section-title { margin-bottom: 36px; }
.faq__list { max-width: 720px; display: grid; gap: 12px; }
.faq__list details {
  border: 1px solid var(--line); border-radius: var(--r); background: #fff;
  padding: 18px 22px;
}
.faq__list summary {
  cursor: pointer; font-weight: 600; font-size: 16px; list-style: none;
  display: flex; justify-content: space-between; align-items: center;
}
.faq__list summary::after { content: "+"; font-family: var(--mono); color: var(--slate); font-size: 18px; }
.faq__list details[open] summary::after { content: "–"; }
.faq__list details p { margin-top: 12px; color: var(--slate); font-size: 15px; }

/* ---------- footer ---------- */
.footer { background: var(--ink); color: var(--paper); padding: 72px 0 0; }
.footer__inner {
  max-width: var(--shell); margin: 0 auto; padding: 0 24px 56px;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px;
}
.footer__brand p { color: var(--paper-dim); font-size: 14.5px; max-width: 320px; margin-top: 16px; }
.footer__status { font-size: 13px !important; }
.footer__col h4 { font: 600 13px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--paper-dim); margin-bottom: 16px; }
.footer__col a { display: block; font-size: 14.5px; color: var(--paper); opacity: .85; padding: 5px 0; }
.footer__col a:hover { opacity: 1; color: var(--green); }
.footer__bar {
  border-top: 1px solid var(--line-dark);
  max-width: var(--shell); margin: 0 auto; padding: 20px 24px;
  display: flex; justify-content: space-between; font-size: 13px; color: var(--paper-dim);
}

/* ---------- modal ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(11,11,16,.55); backdrop-filter: blur(3px); }
.modal__card {
  position: relative; background: var(--paper); border-radius: var(--r-lg);
  padding: 36px; width: min(440px, calc(100vw - 40px));
  box-shadow: 0 40px 90px -30px rgba(11,11,16,.5);
}
.modal__card h3 { font-size: 24px; margin-bottom: 8px; }
.modal__card > p { color: var(--slate); font-size: 14.5px; margin-bottom: 22px; }
.modal__x {
  position: absolute; top: 14px; right: 18px; background: none; border: 0;
  font-size: 26px; cursor: pointer; color: var(--slate); line-height: 1;
}
.modal__card label { display: block; font: 600 13px var(--body); margin-bottom: 14px; }
.modal__card input {
  display: block; width: 100%; margin-top: 6px; padding: 11px 14px;
  border: 1px solid var(--line); border-radius: 10px; font: 400 15px var(--body);
  background: #fff; outline: none;
}
.modal__card input:focus { border-color: var(--green); }
.modal__card .btn { margin-top: 6px; }
.form-msg { margin-top: 14px; font-size: 14px; color: var(--green-deep); }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .features__grid, .industries__grid, .plans__grid { grid-template-columns: 1fr 1fr; }
  .how__steps { grid-template-columns: 1fr; gap: 32px; }
  .campaigns__inner { grid-template-columns: 1fr; gap: 44px; }
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .nav__links, .nav__dash { display: none; }
}
@media (max-width: 640px) {
  .features__grid, .industries__grid, .plans__grid { grid-template-columns: 1fr; }
  .plan--hot { order: -1; }
  .nav__actions .btn:not(.nav__burger) { display: none; }
  .nav__burger { display: block; }
  .nav__mobile:not([hidden]) { display: block; background: var(--ink); }
  .hero { padding: 64px 0 56px; }
  .hero__stats { gap: 28px; }
  /* stack cleanly on phones: number field on top, full-width button below
     (the single-pill layout bulged the button out of the box) */
  .callbox__field {
    flex-direction: column; align-items: stretch; gap: 10px;
    background: transparent; border: 0; padding: 0; border-radius: 0;
  }
  .callbox__row {
    background: var(--paper); border: 1px solid var(--line);
    border-radius: 999px; padding: 4px 8px;
  }
  .callbox__row:focus-within { border-color: var(--green); }
  .callbox__cc { padding-left: 10px; }
  .callbox__field .btn--call { width: 100%; }
  .teaser__inner { flex-direction: column; text-align: center; padding: 36px 24px; }
  .footer__inner { grid-template-columns: 1fr; }
  .footer__bar { flex-direction: column; gap: 6px; text-align: center; }

  /* tighter cards so the next one peeks in, signalling it scrolls */
  .uc-marquee { padding-left: 16px; }
  .uc { width: 82vw; max-width: 320px; padding: 22px 20px; }
  .uc-track { gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    animation-duration: 0.5s !important;
    transition-duration: 0.25s !important;
  }
}

/* ---------- morphing sticky header ----------
   --navp (0 → 1) is set on .nav from scroll progress by lobby.js.
   Width, padding, radius, colors and shadow all interpolate from that
   single value, so the bar gradually becomes the floating pill in
   lockstep with the scroll — there is no on/off switch point.
   Dark bar rgb(11,11,16) ↔ pill white rgb(255,255,255). */
.nav { background: transparent; pointer-events: none; contain: layout; }
.nav__inner {
  --p: var(--navp, 0);
  pointer-events: auto;
  max-width: calc((1 - var(--p)) * 100% + var(--p) * 720px);
  margin: 0 auto;
  /* the 12px drop rides transform (GPU) — margin would reflow the page */
  transform: translateY(calc(var(--p) * 12px));
  padding: calc(14px - 4px * var(--p))
           calc((1 - var(--p)) * max(24px, (100vw - 1072px) / 2) + var(--p) * 16px);
  border-radius: calc(var(--p) * 999px);
  border: 1px solid rgba(11, 11, 16, calc(0.10 * var(--p)));
  background: rgb(calc(11 + 244 * var(--p))
                  calc(11 + 244 * var(--p))
                  calc(16 + 239 * var(--p)));
  box-shadow: 0 18px 50px -22px rgba(11, 11, 16, calc(0.35 * var(--p)));
  color: rgb(calc(250 - 239 * var(--p))
             calc(250 - 239 * var(--p))
             calc(248 - 232 * var(--p)));
}
/* nav links & Dashboard collapse and fade away during the morph */
.nav .nav__links {
  overflow: hidden; white-space: nowrap;
  max-width: calc(420px * (1 - var(--navp, 0)));
  opacity: calc(1 - 1.7 * var(--navp, 0));
}
.nav .nav__actions .nav__dash {
  overflow: hidden;
  max-width: calc(160px * (1 - var(--navp, 0)));
  padding-left: calc(18px * (1 - var(--navp, 0)));
  padding-right: calc(18px * (1 - var(--navp, 0)));
  opacity: calc(1 - 1.7 * var(--navp, 0));
}
.nav.is-pill .nav__links, .nav.is-pill .nav__dash { visibility: hidden; pointer-events: none; }
/* button + burger colors ride the same progress value */
.nav .btn--ghost-light {
  color: rgb(calc(250 - 239 * var(--navp, 0))
             calc(250 - 239 * var(--navp, 0))
             calc(248 - 232 * var(--navp, 0)));
  border-color: rgba(calc(250 - 239 * var(--navp, 0))
                     calc(250 - 239 * var(--navp, 0))
                     calc(248 - 232 * var(--navp, 0)) / calc(0.25 - 0.05 * var(--navp, 0)));
}
.nav .btn--solid-light {
  background: rgb(calc(250 - 239 * var(--navp, 0))
                  calc(250 - 239 * var(--navp, 0))
                  calc(248 - 232 * var(--navp, 0)));
  color: rgb(calc(11 + 244 * var(--navp, 0))
             calc(11 + 244 * var(--navp, 0))
             calc(16 + 239 * var(--navp, 0)));
}
.nav .nav__burger span {
  background: rgb(calc(250 - 239 * var(--navp, 0))
                  calc(250 - 239 * var(--navp, 0))
                  calc(248 - 232 * var(--navp, 0)));
}

/* ---------- use-case marquee ---------- */
.usecases { padding: 72px 0 80px; overflow: hidden; }
.usecases .section-title { text-align: center; }
.usecases .section-sub { text-align: center; margin: 0 auto 48px; }
.uc {
  width: 330px; flex: none; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 26px 24px;
  color: var(--ink); /* cards stay light even inside .dark sections */
}
.uc__icon {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  font-size: 24px; margin-bottom: 18px;
}
.uc h3 { font-size: 19px; margin-bottom: 8px; }
.uc > p { color: var(--slate); font-size: 14px; min-height: 64px; }
/* ---------- industries marquee (dark section) ----------
   No edge-fade overlays — they smeared dark over the cards (esp. on
   mobile). Cards clip cleanly at the section edge via overflow:hidden. */
.uc-marquee { position: relative; overflow: hidden; padding: 6px 0; }
.uc-track {
  display: flex; gap: 20px; width: max-content; will-change: transform;
  /* motion driven by lobby.js ([data-marquee]) for a tear-free glide */
}
.uc__stat {
  display: flex; align-items: baseline; gap: 8px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
}
.uc__stat strong { font: 600 22px var(--mono); letter-spacing: -0.02em; }
.uc__stat span { font-size: 12px; color: var(--slate); }
.uc__tag { margin-top: 12px; font-size: 11.5px; color: var(--slate); letter-spacing: .03em; }
.uc-foot { text-align: center; margin-top: 44px; }

/* ---------- mobile dropdown menu (morph stays ON) ----------
   The pill morph runs on phones too. The burger recolors with the morph
   (white on the dark bar → dark on the white pill), so it's always
   visible. The dropdown opens as a floating dark panel anchored below
   the header — independent of the morph's locked nav height — so it
   works whether the header is a full bar or a collapsed pill. */
@media (max-width: 640px) {
  .nav__mobile:not([hidden]) {
    display: block;
    position: absolute; top: calc(100% + 8px); left: 12px; right: 12px;
    background: var(--ink); border: 1px solid var(--line-dark);
    border-radius: 16px; overflow: hidden; z-index: 60;
    box-shadow: 0 26px 50px -18px rgba(0,0,0,.75);
  }
  .nav__mobile a:first-child { border-top: 0; }
}