/*
 * Design tokens — the shared half of this block is contracted with the Smartox
 * dashboard (see the platform repo's docs/design/tokens.md). Before changing any
 * value under "Shared", reconcile it against that doc: the two projects deploy
 * separately and have no common build, so this file and the dashboard's
 * globals.css are kept in step by hand.
 *
 * Names below mirror the dashboard's token names so the two :root blocks diff
 * line by line. The legacy aliases at the bottom keep older rules working.
 */
:root {
  /* ---- Shared: palette (identical in both projects) ---- */
  --ink: #17172e;
  --muted: #6c6c86;
  --canvas: #f7f7fc;
  --surface: #ffffff;
  --surface-2: #f1effa;
  --line: #e9e7f3;
  --brand: #7452f7;
  --brand-bright: #9a80ff;
  --accent: #eee9ff; /* soft brand tint — dashboard calls this `accent` */
  --accent-ink: #5f3ee4; /* brand-dark: the readable violet for text on tint */
  --cyan: #0db5e8;
  --cyan-ink: #0b7c9c; /* raw cyan is 2.39:1 on white — text uses this */
  /* Status set, aligned with the dashboard's. `success` was #16a164 here and
     #16b364 there — one digit apart and invisible, but it is the sort of drift
     the contract exists to stop. The `-ink` halves are darkened variants,
     because the raw hue is too light for text on its own tint. */
  --success: #16b364;
  --success-ink: #067648;
  --warning: #f59e0b;
  --warning-ink: #b54708;
  --danger: #ef4444;
  /* Tinted status surfaces. The dashboard mixes these on the fly with
     `bg-<token>/15`; plain CSS cannot, so the three tints are named here and
     must be kept in step with that recipe. */
  --success-soft: #e9f8f0;
  --warning-soft: #fff3d6;
  --danger-soft: #fdeceb;

  /* Two borders sat between `line` and nothing at all, hand-written twenty-odd
     times each at slightly different values: the darker edge a surface takes on
     hover, and the violet-tinted edge used on brand-tinted surfaces. */
  /* Body copy sits between `ink` and `muted` — headings are ink, secondary text
     is muted, and the paragraphs in between were written at a dozen slightly
     different greys. The dashboard has no equivalent because its prose is
     short enough to be `ink` or `muted` outright. */
  --body: #55556e;

  --line-strong: #ded8f4;
  --accent-line: #ddd4ff;
  /* The dark stack the industries section is built on. `navy` is its ground;
     the two above it are the glass cards and their borders. The dashboard's
     constant-dark pair (`night`/`navy`) is neutral where these are violet, so
     they are this project's own — recorded, not shared. */
  --navy: #111226;
  --navy-2: #252635;
  --navy-3: #303047;

  /* ---- Shared: industry tones ----
     One tone per industry, carried from this page's #industries cards into the
     dashboard's onboarding picker and agent templates. Decorative only — none
     clears AA at text size on light, so never set label text in a tone. */
  --tone-1: #a68cff;
  --tone-2: #52d5f5;
  --tone-3: #4fd6a0;
  --tone-4: #ffb964;

  /* ---- Shared: radius ladder ----
     The dashboard anchors on 10px and this page on 28px; both are rungs of the
     same ladder. New work on either side picks a rung, never a raw pixel value.
     The two large rungs are marketing-scale and stay unused in the dashboard
     outside its hero surfaces. */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px; /* dashboard base */
  --r-xl: 14px;
  --r-2xl: 18px;
  --r-3xl: 24px;
  --r-hero: 28px; /* marketing base */

  /* ---- This project only: marketing-scale depth and layout ---- */
  --shadow-sm: 0 12px 34px rgba(40, 32, 84, 0.08);
  --shadow-lg: 0 32px 80px rgba(39, 28, 92, 0.15);
  --container: 1180px;

  /* ---- Legacy aliases ----
     Pre-contract colour names still referenced throughout this file. The
     `--radius-*` aliases that sat here are gone: every rule now picks a rung
     from the ladder above. */
  --brand-dark: var(--accent-ink);
  --brand-soft: var(--accent);
}

@font-face {
  font-family: "Phosphor";
  src: url("assets/icons/Phosphor.woff2") format("woff2");
  font-display: block;
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: "Phosphor-Fill";
  src: url("assets/icons/Phosphor-Fill.woff2") format("woff2");
  font-display: block;
  font-style: normal;
  font-weight: normal;
}

.ph,
.ph-fill {
  speak: never;
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
}

.ph {
  font-family: "Phosphor" !important;
}

.ph-fill {
  font-family: "Phosphor-Fill" !important;
}

.ph-arrow-right::before {
  content: "\e06c";
}
.ph-chats-circle::before {
  content: "\e17e";
}
.ph-list::before {
  content: "\e2f0";
}
.ph-pause::before {
  content: "\e39e";
}
.ph-phone::before {
  content: "\e3b8";
}
.ph-phone-call::before {
  content: "\e3ba";
}
.ph-phone-incoming::before {
  content: "\e3be";
}
.ph-calendar-check::before {
  content: "\e712";
}
.ph-phone-outgoing::before {
  content: "\e3c0";
}
.ph-plus::before {
  content: "\e3d4";
}
.ph-translate::before {
  content: "\e4a2";
}
.ph-x::before {
  content: "\e4f6";
}
.ph-fill.ph-check-circle::before {
  content: "\e184";
}
.ph-fill.ph-phone-incoming::before {
  content: "\e3be";
}
.ph-fill.ph-play::before {
  content: "\e3d0";
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 98px;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: #fff;
  color: var(--ink);
  font-family:
    "Outfit",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body.menu-open {
  overflow: hidden;
}

button,
input {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

p,
h1,
h2,
h3 {
  margin-top: 0;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  transform: translateY(-160%);
  border-radius: var(--r-md);
  background: var(--navy);
  color: #fff;
  padding: 10px 16px;
}

.skip-link:focus {
  transform: translateY(0);
}

.container {
  width: min(calc(100% - 40px), var(--container));
  margin-inline: auto;
}

.section {
  padding: 112px 0;
}

/* ---- Pill geometry ----
   Every rounded chip on this page — the hero eyebrow, a status chip, a plan's
   tier name, a connection label, an agent's role — is the dashboard's single
   `Badge` component wearing different names. There were six recipes here,
   disagreeing on padding (8/13, 7/11, 6/13, 13/16), size (12/13/14px) and
   weight (600/700), so the same idea looked different depending where you met
   it.

   Geometry is settled once, below. Each selector keeps only its *tone* —
   background, colour, border — which is the one thing that genuinely differs,
   and which mirrors the dashboard's `bg-<token>/15` + `text-<token>-ink` rule. */

.pricing-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 7px 12px;
  white-space: nowrap;
}

/* ---- Focus ----
   There were four focus rules on the whole site, three of them on one component.
   Everything else fell back to the browser default, which several resets here
   had already suppressed — so most of the page could be tabbed through with no
   visible focus at all.

   Matches the dashboard's `focus-visible:ring-[3px] ring-brand/30`: a 3px brand
   ring at 30%, offset so it reads as a halo rather than a border change. */

.site-header {
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  left: 0;
  border-bottom: 1px solid transparent;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(18px);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.site-header.scrolled {
  border-color: var(--line);
  box-shadow: 0 8px 30px rgba(23, 23, 46, 0.05);
}

.header-inner {
  display: flex;
  min-height: 78px;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.brand img {
  width: 168px;
  height: auto;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 30px;
}

.desktop-nav a,
.text-link {
  position: relative;
  color: var(--body);
  font-size: 16px;
  font-weight: 500;
  transition: color 0.2s ease;
}

.desktop-nav a::after {
  position: absolute;
  right: 0;
  bottom: -7px;
  left: 0;
  height: 2px;
  content: "";
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.2s ease;
}

.desktop-nav a:hover,
.text-link:hover {
  color: var(--ink);
}

.desktop-nav a:hover::after {
  transform: scaleX(1);
}

.header-actions {
  display: flex;
  align-items: center;
}

.header-actions {
  gap: 18px;
}

.button {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid var(--brand);
  border-radius: var(--r-xl);
  background: var(--brand);
  box-shadow: 0 12px 30px rgba(116, 82, 247, 0.22);
  color: #fff;
  cursor: pointer;
  font-weight: 600;
  padding: 0 23px;
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.button:hover {
  background: var(--brand-dark);
  box-shadow: 0 16px 36px rgba(116, 82, 247, 0.3);
  transform: translateY(-2px);
}

.button-small {
  min-height: 44px;
  border-radius: var(--r-xl);
  padding-inline: 18px;
  font-size: 16px;
}

.button-secondary {
  border-color: var(--line);
  background: #fff;
  box-shadow: none;
  color: var(--ink);
}

.button-secondary:hover {
  border-color: #cfc8ee;
  background: var(--canvas);
  box-shadow: 0 12px 28px rgba(31, 25, 65, 0.08);
}

.button-light {
  border-color: #fff;
  background: #fff;
  box-shadow: none;
  color: var(--brand-dark);
}

.button-light:hover {
  background: var(--canvas);
  box-shadow: 0 12px 34px rgba(18, 12, 46, 0.2);
}

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font-size: 24px;
}

.mobile-nav {
  display: none;
}

.hero {
  position: relative;
  overflow: hidden;
  min-height: 790px;
  padding-top: 176px;
  background: radial-gradient(
      circle at 82% 26%,
      rgba(116, 82, 247, 0.14),
      transparent 27%
    ),
    radial-gradient(
      circle at 60% 92%,
      rgba(13, 181, 232, 0.09),
      transparent 26%
    ),
    #fff;
}

.hero::before {
  position: absolute;
  inset: 0;
  opacity: 0.4;
  background-image: linear-gradient(
      rgba(116, 82, 247, 0.045) 1px,
      transparent 1px
    ),
    linear-gradient(90deg, rgba(116, 82, 247, 0.045) 1px, transparent 1px);
  background-size: 48px 48px;
  content: "";
  mask-image: linear-gradient(to bottom, #000, transparent 78%);
  pointer-events: none;
}

.eyebrow {
  color: var(--accent-ink);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 5px rgba(22, 161, 100, 0.1);
}

.hero h1 {
  max-width: 690px;
  margin: 24px 0;
  font-size: clamp(3.6rem, 5.4vw, 5.65rem);
  font-weight: 600;
  letter-spacing: -0.065em;
  line-height: 0.96;
}

.hero h1 span {
  color: var(--brand);
}

.outcomes {
  border-block: 1px solid var(--surface-2);
  background: #fff;
  padding-block: 96px;
}

.outcomes > .container {
  width: min(calc(100% - 64px), 1440px);
}

.section-heading {
  max-width: 700px;
  margin-bottom: 50px;
}

.section-heading.centered {
  margin-inline: auto;
  text-align: center;
}

.section-heading h2 {
  margin: 13px 0 18px;
  font-size: clamp(2.35rem, 4vw, 4rem);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1.04;
}

.section-heading p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 18px;
}

/* Wider than the page container: at 1180px the frame and a readable copy card
   cannot both fit side by side once the frame's 16:10 shape fixes its width. */

/* The frame tracks the 16:10 shape of the product captures, so a full set of
   equally sized screenshots fills it exactly — no dead space under a short one,
   no cropping of a tall one. Height still yields to the viewport first. */

/* Real product screenshots, not a mock. They are full-page captures, so the
   frame shows the top of the screen and crops the tail rather than shrinking
   the text to an unreadable size. */

/* Fill the frame regardless of the capture's aspect ratio: a short capture no
   longer leaves dead space under it, and a tall one crops its tail instead of
   shrinking the text. Top-anchored so every screen's header is always shown. */

/* Kept as a hook for a capture that should be centred rather than top-anchored
   (a short, self-contained screen such as the signup split-panel). */

/* Dashed "add" affordance carries the leftover height, so the screen reads as
   a real form with room to grow rather than a panel that ran out of content. */

/* Was `margin-bottom: auto`, which pinned the label to the bottom of a card
   that stretches to the frame height — at 680px that opened a void taller than
   the content itself. The card now reads top-down and the leftover space is
   absorbed by the grid instead. */

/*
 * The call story advances on scroll, the same way the onboarding section does.
 * This spacer is the distance the reader travels through it — roughly one
 * viewport per stage — while the grid stays pinned.
 */

/* ---------- AI support team : roster + stage ---------- */

/* ----- roster ----- */

/* left accent rail on the selected row */

/* ----- stage ----- */

/* every panel shares one grid cell, so the stage grows to fit the tallest agent */

/* accent aura behind the portrait */

/* transcript bubbles */

/* footer: player + stats */

/*
 * The waveform doubles as the progress bar. It takes the whole gap between the
 * play button and the clock, and script.js gives every bar its height from one
 * shape array so the two players stay identical apart from colour.
 */

/*
 * The played portion: a duplicate of the bars in the accent colour, laid over
 * the dim ones and clipped from the right to the fraction of the clip that has
 * played, so the wave fills left to right in step with the audio.
 */

/*
 * The knowledge card and the navy card each take a full row, which leaves the
 * three small cards a row of their own. Spanning two of three columns instead
 * would strand an empty cell beside each of them.
 */

.faq-grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 110px;
}

.faq-grid .section-heading {
  margin-bottom: 0;
}

/*
 * The question list is far taller than the heading beside it, which left the
 * heading stranded at the top while the reader scrolled. Sticking it keeps the
 * section's title and its "talk to our team" link in view for the whole list.
 * align-self is what makes that work — a stretched grid item has no room to
 * move within.
 */
.faq-grid .section-heading {
  position: sticky;
  top: 110px;
  align-self: start;
}

/*
 * Scoped to the text block. Unqualified, this also caught the player's
 * <span class="voice-line">, turning the waveform's flex row into a block and
 * collapsing every bar to nothing.
 */

/*
 * The studio's player on a white card: light pill, brand-violet controls, and a
 * waveform that doubles as the progress bar.
 */

.pricing-section {
  background: var(--canvas);
}

.pricing-grid {
  display: grid;
  align-items: stretch;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

/* Five tiers do not fit the 1180px container without becoming slivers, so this
   section opts into a wider measure than the rest of the page. */
.pricing-section > .container {
  width: min(calc(100% - 64px), 1460px);
}

/* The trial is the entry point, not a tier — same card, quieter edge, so the
   eye lands on the paid ladder first. */
.pricing-free {
  background: var(--canvas);
}

/* The add-on price rides on the "1 phone number included" bullet rather than
   getting its own line: it is a qualifier on that number, and a separate bullet
   read as an extra thing you get. */

/* Enterprise has no figure to show, so "Let's talk" sits in the price slot at a
   size that does not pretend to be one. */

.pricing-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 560px;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-3xl);
  background: #fff;
  box-shadow: 0 12px 38px rgba(38, 28, 82, 0.06);
  padding: 24px 20px;
}

.pricing-popular {
  border: 2px solid var(--brand);
  box-shadow: 0 24px 64px rgba(81, 54, 197, 0.16);
  transform: translateY(-12px);
}

.pricing-popular.reveal {
  transform: translateY(10px);
}

.pricing-popular.reveal.visible {
  transform: translateY(-12px);
}

.popular-badge {
  position: absolute;
  top: -15px;
  left: 50%;
  border-radius: 999px;
  background: var(--brand);
  box-shadow: 0 10px 24px rgba(116, 82, 247, 0.24);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 7px 14px;
  text-transform: uppercase;
  transform: translateX(-50%);
  white-space: nowrap;
}

.pricing-card-head {
  min-height: 178px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 24px;
}

.pricing-name {
  background: var(--brand-soft);
  color: var(--brand-dark);
}

.pricing-price {
  display: flex;
  align-items: end;
  gap: 10px;
  margin: 18px 0 12px;
}

.pricing-price strong {
  font-size: 50px;
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 0.9;
}

.pricing-price span {
  color: var(--muted);
  font-size: 12px;
}

.pricing-card-head > p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.pricing-card ul {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 13px;
  margin: 24px 0 30px;
  padding: 0;
  list-style: none;
}

.pricing-card li {
  display: grid;
  align-items: start;
  color: var(--body);
  font-size: 14px;
  grid-template-columns: 20px 1fr;
}

.pricing-card li i {
  margin-top: 3px;
  color: var(--success);
  font-size: 16px;
}

.pricing-card li > span {
  min-width: 0;
}

.pricing-card li strong {
  color: var(--ink);
  white-space: nowrap;
}

.pricing-button {
  width: 100%;
}

.faq-section {
  background: #fff;
}

.text-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 24px;
  color: var(--brand-dark);
  font-weight: 600;
}

.faq-list {
  border-top: 1px solid var(--line);
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-item button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-weight: 600;
  padding: 22px 0;
  text-align: left;
}

.faq-item button i {
  flex: 0 0 auto;
  color: var(--brand);
  font-size: 20px;
  transition: transform 0.25s ease;
}

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.faq-answer p {
  overflow: hidden;
  margin: 0;
  color: var(--muted);
  padding-right: 35px;
}

.faq-item.open .faq-answer {
  grid-template-rows: 1fr;
}

.faq-item.open .faq-answer p {
  padding-bottom: 22px;
}

.faq-item.open button i {
  transform: rotate(45deg);
}

.site-footer {
  background: var(--navy);
  color: #fff;
  padding: 70px 0 24px;
}

.footer-top {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 80px;
  padding-bottom: 55px;
}

.footer-brand img {
  width: 172px;
}

.footer-brand p {
  max-width: 350px;
  margin-top: 22px;
  color: #9999af;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.footer-links div {
  display: grid;
  align-content: start;
  gap: 10px;
}

.footer-links strong {
  margin-bottom: 7px;
  font-size: 14px;
}

.footer-links a {
  color: #9c9caf;
  font-size: 14px;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: #fff;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  color: #76768d;
  font-size: 12px;
  padding-top: 22px;
}

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.65s ease,
    transform 0.65s ease;
  transition-delay: var(--delay, 0ms);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Five tiers need a lot of width, so they step down twice before halving. */
@media (max-width: 1400px) {
  .pricing-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1080px) {
  .desktop-nav {
    display: none;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .mobile-nav {
    position: fixed;
    top: 78px;
    right: 20px;
    left: 20px;
    display: grid;
    visibility: hidden;
    border: 1px solid var(--line);
    border-radius: var(--r-2xl);
    background: #fff;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    padding: 12px;
    transform: translateY(-10px);
    transition:
      opacity 0.2s ease,
      transform 0.2s ease,
      visibility 0.2s;
  }

  .mobile-nav.open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }

  .mobile-nav a {
    border-radius: var(--r-lg);
    color: var(--muted);
    padding: 12px 14px;
  }

  .mobile-nav a:hover {
    background: var(--surface-2);
    color: var(--ink);
  }

  .hero h1 {
    font-size: clamp(3.2rem, 6vw, 4.6rem);
  }

  .pricing-grid {
    grid-template-columns: 1fr 1fr;
  }

  .faq-grid {
    gap: 55px;
  }
}

@media (max-width: 820px) {
  .section {
    padding: 86px 0;
  }

  .desktop-only {
    display: none;
  }

  .hero {
    min-height: auto;
    padding-top: 142px;
  }

  .faq-grid,
  .footer-top {
    grid-template-columns: 1fr;
  }

  /* One column here, so the heading sits above the list, not beside it. */
  .faq-grid .section-heading {
    position: static;
  }

  /* Stacked, so the pinned block is taller and needs less travel per stage. */

  .faq-grid {
    gap: 50px;
  }

  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .pricing-popular,
  .pricing-popular.reveal,
  .pricing-popular.reveal.visible {
    transform: none;
  }

  .footer-top {
    gap: 50px;
  }
}

@media (max-width: 600px) {
  .container {
    width: min(calc(100% - 28px), var(--container));
  }

  .section {
    padding: 72px 0;
  }

  .section-heading {
    margin-bottom: 36px;
  }

  .header-inner {
    min-height: 70px;
  }

  .brand img {
    width: 136px;
  }

  .header-actions .button {
    display: none;
  }

  .mobile-nav {
    top: 70px;
    right: 14px;
    left: 14px;
  }

  .hero {
    padding-top: 120px;
  }

  .hero h1 {
    font-size: clamp(2.9rem, 14vw, 4rem);
  }

  .outcomes {
    padding-block: 72px;
  }

  .outcomes > .container {
    width: min(calc(100% - 28px), 1440px);
  }

  .pricing-card {
    min-height: auto;
    padding: 24px;
  }

  .footer-links {
    grid-template-columns: 1fr 1fr;
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
}

/* ---------------------------------------------------------------------------
   Short viewports (most laptops are ~800-900px tall).

   The onboarding story is a sticky, full-height stage: if its content is taller
   than the viewport there is nowhere for the overflow to go, so the bottom of
   the step list and the bottom of the product frame are simply cut off. Every
   other breakpoint here is width-based, which is why a 1920x900 laptop — a wide
   screen, so no width query fires — was the worst case.

   These rules cap the stage at the visible height and compact what is inside it
   so all six steps and the whole frame stay on screen.
   --------------------------------------------------------------------------- */
@media (max-height: 920px) and (min-width: 821px) {
  /* The 590px floor is what forced the frame past the fold. Let it shrink to
     whatever the stage has left instead. */
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Industries ---------- */

/* faint engineering grid, like graph paper under the cards */

/* accent bloom that fades in from the top-left on hover */

/* ----- "also answering for" ticker, in place of a see-all button ----- */

/* More than answering: the capabilities grid. */

/* Talk to sales window */
body.sales-modal-open {
  overflow: hidden;
}

.sales-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 16px;
}

.sales-modal[hidden] {
  display: none;
}

.sales-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 18, 38, 0.55);
  backdrop-filter: blur(4px);
}

.sales-modal-card {
  position: relative;
  display: flex;
  width: min(480px, 100%);
  flex-direction: column;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--surface);
  padding: 34px 32px 28px;
  box-shadow: 0 30px 80px -30px rgba(17, 18, 38, 0.45);
}

.sales-modal-card h3 {
  margin: 0;
  color: var(--ink);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.sales-modal-card p {
  margin: 0;
  color: var(--body);
  font-size: 15px;
  line-height: 1.6;
}

.sales-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
}

.sales-modal-close:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.sales-modal-email {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  border: 1px solid var(--accent-line);
  border-radius: 16px;
  background: var(--accent);
  padding: 10px 10px 10px 16px;
}

.sales-modal-email span {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--accent-ink);
  font-size: 16px;
  font-weight: 600;
}

.sales-modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.sales-modal-actions .button {
  justify-content: center;
}

.sales-modal-mailto {
  align-self: center;
  color: var(--muted);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sales-modal-mailto:hover {
  color: var(--ink);
}

@media (max-width: 600px) {
  .sales-modal-card {
    padding: 28px 22px 22px;
    border-radius: 22px;
  }
  .sales-modal-actions {
    grid-template-columns: 1fr;
  }
}

/* ---- Legal pages (privacy.html, terms.html) ----
   Long-form reading under the fixed header, in the header's own `.container`
   so the content lines up with the logo and "Get started" at every width. */
.legal {
  padding: 150px 0 96px;
  background: var(--canvas);
}

.legal-head {
  margin-bottom: 34px;
}

.legal-head h1 {
  margin: 12px 0 10px;
  font-size: clamp(34px, 5vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.legal-head p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}

.legal-body {
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--body);
  padding: 44px 48px;
  overflow-wrap: break-word;
}

.legal-body h2 {
  margin: 38px 0 12px;
  color: var(--ink);
  font-size: 22px;
  line-height: 1.3;
}

.legal-body h2:first-child {
  margin-top: 0;
}

.legal-body h3 {
  margin: 22px 0 8px;
  color: var(--ink);
  font-size: 17px;
}

.legal-body p,
.legal-body li {
  font-size: 16px;
  line-height: 1.7;
}

.legal-body p {
  margin: 0 0 14px;
}

.legal-body ul {
  margin: 0 0 16px;
  padding-left: 22px;
}

.legal-body li + li {
  margin-top: 6px;
}

.legal-body strong {
  color: var(--ink);
}

.legal-body a {
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-callout {
  margin: 0 0 18px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-xl);
  background: var(--accent);
  color: var(--ink);
  padding: 16px 20px;
}

.legal-callout p:last-child {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .legal {
    padding: 112px 0 64px;
  }

  .legal-body {
    padding: 28px 20px;
  }

  .legal-body h2 {
    font-size: 20px;
  }
}