/* callex landing — implements "Callex Landing v3.dc.html".
   Palette, spacing and type scale come straight from the design file. */

:root {
  --bg: #faf8f5;          /* page */
  --bg-alt: #f5f3ef;      /* demo + pricing bands */
  --surface: #ffffff;     /* call card */
  --ink: #2d3a2e;         /* text */
  --accent: #3d5a3e;      /* live/agent green */
  --line: rgba(45, 58, 46, 0.08);
  --line-strong: rgba(45, 58, 46, 0.15);
  --muted: rgba(45, 58, 46, 0.6);
  --faint: rgba(45, 58, 46, 0.4);
  --dim: rgba(45, 58, 46, 0.45);
  /* The design specifies Helvetica Neue Light. Served from the system rather
     than a third-party webfont CDN — see README for the reasoning. */
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--ink); text-decoration: none; }
input::placeholder { color: rgba(45, 58, 46, 0.35); }

@keyframes fade-up   { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade-down { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes wave      { 0%, 100% { transform: scaleY(0.25); } 50% { transform: scaleY(1); } }
@keyframes pulse     { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes rise      { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }

/* ── header ──────────────────────────────────────────────────────────────── */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: transparent;
  transition: background-color 0.3s, box-shadow 0.3s, backdrop-filter 0.3s;
}
.site-header.scrolled {
  background: rgba(250, 248, 245, 0.9);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.header-inner { position: relative; display: flex; align-items: center; height: 80px; }

.nav { display: flex; align-items: center; gap: 32px; animation: fade-down 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
.nav a { font-size: 14px; letter-spacing: 0.025em; text-transform: uppercase; transition: opacity 0.15s; }
.nav a:hover { opacity: 0.7; }

.wordmark {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 9px;
  animation: fade-down 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 120ms;
}
.wordmark .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); animation: pulse 2.4s ease-in-out infinite; }
.wordmark .name { font-size: 21px; letter-spacing: -0.01em; }

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-size: 14px; letter-spacing: 0.025em; text-transform: uppercase;
  border-radius: 9999px; cursor: pointer; white-space: nowrap;
  transition: background-color 0.15s, border-color 0.15s, opacity 0.15s;
}
.btn-solid { padding: 13px 28px; background: var(--ink); color: #fff; border: none; }
.btn-solid:hover { background: var(--accent); color: #fff; }
.btn-solid:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-outline { padding: 13px 28px; border: 1px solid rgba(45, 58, 46, 0.25); background: none; }
.btn-outline:hover { border-color: var(--ink); }

.header-cta {
  margin-left: auto; padding: 10px 20px;
  animation: fade-down 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 240ms;
}

/* ── hero ────────────────────────────────────────────────────────────────── */
.hero { position: relative; width: 100%; height: 100vh; min-height: 700px; overflow: hidden; background: var(--bg); }
.hero-media { position: absolute; inset: 0; }
.hero-media video { width: 100%; height: 100%; object-fit: cover; object-position: bottom; }
.hero-content {
  position: relative; z-index: 10;
  display: flex; flex-direction: column; align-items: flex-start;
  max-width: 1280px; margin: 0 auto; padding: 144px 32px 0;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 9999px;
  border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(4px); transition: background-color 0.15s; margin-bottom: 24px;
  font-size: 14px;
  animation: fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 240ms;
}
.hero-badge:hover { background: rgba(255, 255, 255, 0.8); }
.hero h1 {
  text-align: left; font-size: 64px; line-height: 1.05; letter-spacing: -0.02em;
  max-width: 900px; font-weight: 400; margin: 0;
  animation: fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 360ms;
}

/* ── demo ────────────────────────────────────────────────────────────────── */
.demo { background: var(--bg-alt); padding: 110px 32px 120px; }
.demo-inner { max-width: 880px; margin: 0 auto; }
.demo-head { text-align: center; margin-bottom: 36px; }
.eyebrow { font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(45, 58, 46, 0.5); margin-bottom: 18px; }

.demo-form { display: flex; gap: 10px; justify-content: center; max-width: 440px; margin: 0 auto; }
.demo-form input {
  flex: 1; min-width: 0; font: inherit; font-size: 15px;
  background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink);
  border-radius: 9999px; padding: 13px 20px;
}
.demo-form input:focus { outline: none; border-color: var(--accent); }
.demo-form .btn-solid { padding: 13px 26px; }
.passcode-row { max-width: 440px; margin: 10px auto 0; display: none; }
.passcode-row.show { display: block; }

.call-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 24px;
  box-shadow: 0 24px 70px rgba(45, 58, 46, 0.10); overflow: hidden;
}
.card-top { display: flex; align-items: center; gap: 14px; padding: 18px 26px; border-bottom: 1px solid var(--line); }
.state-pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim);
  transition: color 0.3s;
}
.state-pill.live { color: var(--accent); }
.state-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.state-pill.live .dot { animation: pulse 1.4s ease-in-out infinite; }
.timer { margin-left: auto; font-size: 13px; color: var(--dim); font-variant-numeric: tabular-nums; }

.card-body { padding: 28px 30px 10px; min-height: 300px; display: flex; flex-direction: column; gap: 18px; }
.turn { display: grid; grid-template-columns: 64px 1fr; gap: 18px; align-items: start; animation: rise 0.3s ease-out; }
.turn .who { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); padding-top: 4px; }
.turn.agent .who { color: var(--accent); }
.turn .said { font-size: 16px; line-height: 1.55; }
.turn .interrupted { color: var(--faint); font-size: 12px; margin-left: 8px; }
.card-empty { margin: auto; color: var(--faint); font-size: 14px; text-align: center; }

.tool-chips { display: flex; gap: 8px; flex-wrap: wrap; padding-left: 82px; }
.tool-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--accent);
  border: 1px solid rgba(61, 90, 62, 0.25); background: rgba(61, 90, 62, 0.05);
  border-radius: 9999px; padding: 4px 12px; animation: rise 0.3s ease-out;
}

.card-foot { display: flex; align-items: center; gap: 16px; padding: 16px 26px 20px; }
.waveform { display: flex; align-items: center; gap: 3px; height: 26px; }
.waveform span {
  width: 3px; border-radius: 2px; transform-origin: center;
  background: var(--line-strong); transition: background 0.3s;
  animation-name: wave; animation-timing-function: ease-in-out; animation-iteration-count: infinite;
  animation-play-state: paused;
}
.waveform.speaking span { background: var(--accent); animation-play-state: running; }
.card-summary {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent);
  animation: rise 0.3s ease-out;
}
.fineprint { text-align: center; font-size: 12.5px; color: var(--faint); margin: 18px 0 0; }
.demo-message { max-width: 440px; margin: 16px auto 0; text-align: center; font-size: 13.5px; color: var(--muted); min-height: 20px; }
.demo-message.error { color: #8a4b3f; }

/* ── features ────────────────────────────────────────────────────────────── */
.features { background: var(--bg); padding: 110px 32px; }
/* auto-fit rather than the design's fixed repeat(3): a fourth feature was added
   for the website-onboarding flow, and this keeps all four on one row on wide
   screens and pairs them on narrow ones instead of orphaning the last. */
.features-grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 48px 56px; }
.features h2 { font-size: 19px; margin: 0 0 10px; font-weight: 400; }
.features p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--muted); }

/* ── pricing ──────────────────────────────────────────────────────────────
   The headline rate stays the hero — it is the number people repeat — and the
   tiers sit under it as the detail, rather than replacing it with a table the
   eye has to parse before it learns anything. */
.pricing { background: var(--bg-alt); padding: 120px 32px; }
.pricing-inner { max-width: 1080px; margin: 0 auto; text-align: center; }
.price { font-size: 64px; line-height: 1; letter-spacing: -0.02em; }
.price-sub { max-width: 620px; margin-left: auto; margin-right: auto; }
.pricing p { font-size: 16px; line-height: 1.6; color: rgba(45, 58, 46, 0.55); margin: 18px 0 0; }

.plan-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin: 52px 0 0; text-align: left;
}
.plan {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 20px; padding: 30px 28px 28px;
}
/* The middle tier is the one most accounts should land on, so it is the one
   that looks chosen. Lifted rather than recoloured — the palette only has the
   one accent and spending it here would fight the live-call indicator. */
.plan-featured {
  border-color: var(--line-strong);
  box-shadow: 0 18px 50px rgba(45, 58, 46, 0.10);
  position: relative;
}
.plan-tag {
  position: absolute; top: -11px; left: 28px;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #fff; background: var(--accent);
  border-radius: 9999px; padding: 4px 12px;
}
.plan-name { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.plan-price { display: flex; align-items: baseline; gap: 6px; margin-top: 14px; }
.plan-price .amount { font-size: 40px; line-height: 1; letter-spacing: -0.02em; }
.plan-price .per { font-size: 14px; color: var(--faint); }
.plan-included { margin-top: 12px; font-size: 15px; }
.plan-rate { margin-top: 4px; font-size: 14px; color: var(--muted); }
.plan-rate strong { font-weight: 400; color: var(--ink); }

.plan-list { list-style: none; margin: 22px 0 26px; padding: 0; }
.plan-list li {
  position: relative; padding-left: 20px; margin-bottom: 9px;
  font-size: 14.5px; line-height: 1.5; color: var(--muted);
}
.plan-list li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: 0.5;
}
/* `margin-top: auto` against the flex column pushes every card's button to the
   same baseline however uneven the feature lists are. */
.plan-cta { margin-top: auto; padding: 11px 22px; }

.plan-addon {
  margin-top: 20px; padding: 16px 22px;
  border: 1px dashed var(--line-strong); border-radius: 16px;
  font-size: 14.5px; line-height: 1.6; color: var(--muted);
}
.plan-addon strong { font-weight: 400; color: var(--ink); }

/* Billing terms, not decoration — `--faint` is too light to actually read at
   13px, and these are the sentences a customer is entitled to have read. */
.pricing .pricing-fine {
  max-width: 640px; margin: 24px auto 0;
  font-size: 13px; line-height: 1.65; color: var(--muted);
}
.pricing-actions { display: flex; gap: 12px; justify-content: center; margin-top: 40px; }

/* ── footer ──────────────────────────────────────────────────────────────── */
.site-footer { background: var(--bg); border-top: 1px solid rgba(45, 58, 46, 0.1); }
.footer-inner { max-width: 1280px; margin: 0 auto; padding: 26px 32px; display: flex; align-items: center; gap: 24px; }
.footer-mark { display: flex; align-items: center; gap: 8px; }
.footer-mark .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.footer-mark .name { font-size: 16px; }
.footer-links { margin-left: auto; display: flex; gap: 24px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; }
.footer-links a { color: var(--muted); }
.footer-links a:hover { color: var(--ink); }

/* ── responsive ──────────────────────────────────────────────────────────────
   The design computes these from window width in JS. Doing it in CSS avoids a
   flash of desktop layout before the first measurement. */
@media (max-width: 1023px) {
  .hero h1 { font-size: 52px; }
  /* Three cards stop being readable well before the phone breakpoint. Two-up
     is no better: the featured tier can either be squeezed into a half column
     or span the row, and spanning leaves two cells empty. Stack instead — a
     price list reads perfectly well as a column. */
  .plan-grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 767px) {
  .wrap, .demo, .features, .pricing { padding-left: 20px; padding-right: 20px; }
  .hero-content { padding: 120px 20px 0; }
  .hero h1 { font-size: 36px; }
  .price { font-size: 44px; }
  .nav { display: none; }                    /* keeps the centred wordmark and CTA legible */
  .wordmark { position: static; transform: none; margin-right: auto; }
  .features-grid { grid-template-columns: 1fr; gap: 40px; }
  /* The gap is inherited from the tablet rule above: 16px would leave the
     featured tier's tag overlapping the card above it, since the tag is offset
     -11px into the gap. */
  .plan-grid { margin-top: 40px; }
  .plan-featured { box-shadow: none; }
  .demo { padding: 80px 20px 90px; }
  .pricing { padding: 90px 20px; }
  .card-body { padding: 22px 20px 10px; }
  .turn { grid-template-columns: 54px 1fr; gap: 12px; }
  .tool-chips { padding-left: 0; }
  .pricing-actions { flex-direction: column; align-items: stretch; }
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer-links { margin-left: 0; flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .waveform span { transform: scaleY(0.6); }
}

/* ── Connect ────────────────────────────────────────────────────────────────
   The half of the product that outlives the phone call. Sits on the page
   background rather than the alt band so it reads as its own chapter between
   the features and the price. */

.connect { background: var(--bg); padding: 118px 32px; border-top: 1px solid var(--line); }
.connect-inner { max-width: 1080px; margin: 0 auto; text-align: center; }

.connect-head {
  font-size: clamp(30px, 4.2vw, 46px); font-weight: 300; line-height: 1.18;
  letter-spacing: -0.02em; margin: 0;
}
.connect-sub {
  max-width: 60ch; margin: 22px auto 0;
  font-size: 16px; line-height: 1.7; color: var(--muted);
}

/* The before/after. Collapses to stacked panels with a turned arrow on narrow
   screens, because side-by-side at 380px is two unreadable columns. */
.flow {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 22px;
  align-items: center; margin: 56px auto 0; text-align: left;
}
.flow-label {
  font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 12px;
}
.flow-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 22px 24px;
  box-shadow: 0 1px 2px rgba(45, 58, 46, 0.04), 0 8px 24px rgba(45, 58, 46, 0.04);
}
.flow-arrow { color: var(--faint); display: flex; justify-content: center; padding-top: 26px; }

.said-row { display: flex; gap: 12px; font-size: 14.5px; line-height: 1.6; padding: 7px 0; }
.said-row .who {
  flex: 0 0 46px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--faint); padding-top: 4px;
}
.said-caller { color: var(--ink); }
.said-row:not(.said-caller) { color: var(--muted); }

.record-top { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.record-kind {
  font-size: 13px; font-weight: 500; color: var(--accent);
  background: rgba(61, 90, 62, 0.1); padding: 5px 12px; border-radius: 20px;
}
.record-confirmed { font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }

.record-fields { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 11px 16px; }
.record-fields dt {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--faint); padding-top: 2px;
}
.record-fields dd { margin: 0; font-size: 14px; line-height: 1.55; }
.record-quote { color: var(--ink); }
.record-link { color: var(--muted); }

/* ── Code ───────────────────────────────────────────────────────────────── */

.code-pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  margin: 46px auto 0; text-align: left;
}
.code-block {
  background: var(--ink); border-radius: 14px; overflow: hidden;
  box-shadow: 0 10px 30px rgba(45, 58, 46, 0.1);
}
.code-head {
  display: flex; align-items: baseline; gap: 12px;
  padding: 14px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.code-title { color: #f2efe9; font-size: 13.5px; }
.code-note { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(242, 239, 233, 0.4); }

.code-block pre { margin: 0; padding: 20px; overflow-x: auto; }
.code-block code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 12.5px; line-height: 1.75; color: rgba(242, 239, 233, 0.75);
  white-space: pre;
}
.tok-verb { color: #a8c6a9; font-weight: 500; }
.tok-path { color: #f2efe9; }
.tok-key  { color: #9fb8a0; }
.tok-str  { color: #e5d9b6; }
.tok-lit  { color: #d3a89a; }

.code-fine {
  max-width: 62ch; margin: 22px auto 0;
  font-size: 14px; line-height: 1.65; color: var(--muted);
}

.connect-points {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 44px 52px; margin-top: 72px; text-align: left;
}
.connect-points h3 { font-size: 17px; font-weight: 400; margin: 0 0 10px; }
.connect-points p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--muted); }

@media (max-width: 860px) {
  .connect { padding: 84px 24px; }
  .flow { grid-template-columns: 1fr; gap: 14px; }
  .flow-arrow { transform: rotate(90deg); padding: 4px 0; }
  .code-pair { grid-template-columns: 1fr; }
}

/* The outcome-pricing tease. Same shape as the voice add-on so it reads as a
   second option rather than a second price. */
.plan-outcome { margin-top: 14px; }
.plan-outcome a { text-decoration: underline; text-underline-offset: 3px; }