/* Aestar marketing site — one stylesheet for every public page.
   Pages are generated by scripts/build-site.mjs from site/*.mjs. */

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/PlusJakartaSans-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/InterVariable.woff2") format("woff2");
}

:root {
  --night: #070f1f;
  --navy: #0a1128;
  --navy-2: #0f1d3a;
  --navy-3: #16284a;
  --ink: #0c1b2e;
  --slate: #43546a;
  --mute: #66768c;
  --line: #e1e7ef;
  --line-dark: rgba(255, 255, 255, 0.1);
  --paper: #f4f7fb;
  --white: #ffffff;
  --orange: #ff6a1a;
  --orange-hover: #ff8133;
  --orange-deep: #c94f0c;
  --orange-soft: #fff0e6;
  --green: #138a5c;
  --green-soft: #e1f5ec;
  --amber: #8a5a00;
  --amber-soft: #fdf1d6;
  --sky: #2f74f0;
  --on-dark: #c3cedd;
  --on-dark-mute: #8d9db3;
  --display: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --wrap: 1180px;
  --shadow: 0 30px 60px -36px rgba(7, 15, 31, 0.45);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font: 400 17px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); }
p { margin: 0; }
ul { margin: 0; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; border-radius: 6px; }

.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: #fff; color: var(--ink); padding: 10px 14px; border-radius: 8px; }
.skip:focus { left: 12px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: 24px; }
.wrap-narrow { max-width: 820px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.center { text-align: center; }

.display {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  text-wrap: balance;
}
.eyebrow {
  font: 700 12.5px/1.2 var(--body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-deep);
}
.dark .eyebrow, .hero .eyebrow { color: #ff9a5c; }
.lede { font-size: 19px; line-height: 1.6; color: var(--slate); max-width: 60ch; text-wrap: pretty; }
.dark .lede, .hero .lede, .page-hero .lede { color: var(--on-dark); }
.fine { font-size: 14px; line-height: 1.55; color: var(--mute); }
.dark .fine { color: var(--on-dark-mute); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: 999px;
  font: 650 16px/1 var(--body); text-decoration: none; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.btn-primary { background: var(--orange); color: #1b0a00; }
.btn-primary:hover { background: var(--orange-hover); }
.btn-ghost { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, 0.32); }
.btn-ghost:hover { border-color: rgba(255, 255, 255, 0.6); }
.btn-line { background: var(--white); color: var(--ink); border-color: var(--line); }
.btn-line:hover { border-color: #b9c5d4; }
.btn-dark { background: var(--ink); color: var(--white); }
.btn-dark:hover { background: var(--navy-3); }
.btn-sm { min-height: 38px; padding: 0 16px; font-size: 14.5px; }
.btn-lg { min-height: 54px; padding: 0 28px; font-size: 17px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.link { color: var(--orange-deep); font-weight: 650; text-decoration: none; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }
.dark .link { color: #ff9a5c; }

/* Tags */
.tag {
  display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 2px 10px;
  border-radius: 999px; font: 650 12px/1.2 var(--body); letter-spacing: 0.01em; white-space: nowrap;
}
.tag-green { background: var(--green-soft); color: #0b6443; }
.tag-amber { background: var(--amber-soft); color: #6d4700; }
.tag-orange { background: var(--orange-soft); color: #8f3606; }
.tag-slate { background: #e8edf4; color: #3a4a5f; }
.tag-dark { background: rgba(255, 255, 255, 0.1); color: #dbe4ef; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; flex: none; }

/* Header */
.site-head { position: sticky; top: 0; z-index: 40; background: rgba(7, 15, 31, 0.94); backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--line-dark); color: var(--white); }
.site-head .wrap { display: flex; align-items: center; gap: 26px; height: 68px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--white); text-decoration: none; font: 800 17px/1 var(--display); letter-spacing: 0.12em; }
.logo img { width: 24px; height: 24px; }
.nav { display: flex; align-items: center; gap: 4px; margin-left: 6px; }
.nav > a, .nav-item > button {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 10px;
  color: var(--on-dark); text-decoration: none; font: 550 15px/1 var(--body); background: none; border: 0; cursor: pointer;
}
.nav > a:hover, .nav-item > button:hover, .nav-item.open > button, .nav > a[aria-current="page"] { color: var(--white); background: rgba(255, 255, 255, 0.06); }
.nav-item { position: relative; }
.nav-item > button::after { content: ""; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); opacity: 0.7; }
.menu-panel {
  position: absolute; top: calc(100% + 8px); left: -12px; min-width: 560px; padding: 14px;
  background: var(--white); color: var(--ink); border-radius: 18px; border: 1px solid var(--line);
  box-shadow: 0 30px 70px -30px rgba(7, 15, 31, 0.55); display: none;
}
.menu-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav-item.open .menu-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.menu-panel.narrow { min-width: 300px; }
.nav-item.open .menu-panel.narrow { grid-template-columns: 1fr; }
.menu-link { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; padding: 12px; border-radius: 12px; text-decoration: none; }
.menu-link:hover, .menu-link:focus-visible { background: var(--paper); }
.menu-link .ico { width: 36px; height: 36px; border-radius: 10px; background: var(--orange-soft); color: var(--orange-deep); display: grid; place-items: center; }
.menu-link .ico svg { width: 19px; height: 19px; }
.menu-link b { display: block; font: 650 15px/1.3 var(--body); }
.menu-link span { display: block; font-size: 13.5px; line-height: 1.4; color: var(--mute); margin-top: 2px; }
.head-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.head-right .signin { color: var(--on-dark); text-decoration: none; font: 550 15px/1 var(--body); padding: 0 10px; }
.head-right .signin:hover { color: var(--white); }
.head-right .btn { min-height: 40px; padding: 0 18px; font-size: 15px; }
.menu-toggle { display: none; margin-left: auto; height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.28); background: none; color: var(--white); font: 600 15px/1 var(--body); cursor: pointer; }
.mobile-nav { display: none; }

/* Sections */
section { padding-block: 96px; }
.section-head { display: grid; gap: 14px; margin-bottom: 44px; max-width: 780px; }
.section-head.center { margin-inline: auto; justify-items: center; text-align: center; }
.section-head h2 { font-size: clamp(30px, 4vw, 48px); }
.dark { background: var(--night); color: var(--white); }
.paper { background: var(--paper); }
.band-tight { padding-block: 64px; }

/* Hero */
.hero { background: radial-gradient(1100px 520px at 80% 0%, rgba(255, 106, 26, 0.16), transparent 62%), var(--night); color: var(--white); padding-block: 72px 88px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(40px, 5.2vw, 68px); margin-top: 18px; }
.hero h1 .l { display: block; }
.hero h1 em { font-style: normal; color: var(--orange); }
.hero .lede { margin-top: 22px; }
.hero-actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
/* One line, and the whole box dials Ava (Tony, Sep 24). It stays its own
   thing, apart from Explore Demo: hearing her is not clicking the app. */
.hero-call { margin-top: 26px; display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 12px; padding: 14px 20px; border-radius: 16px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); max-width: 100%; box-sizing: border-box; white-space: nowrap; color: var(--white); text-decoration: none; transition: border-color 0.15s ease, background 0.15s ease; }
.hero-call:hover, .hero-call:focus-visible { border-color: var(--orange); background: rgba(255, 106, 26, 0.1); }
.hero-call svg { flex: none; color: var(--orange); }
.hero-call b { font: 700 20px/1.2 var(--mono); color: var(--white); letter-spacing: -0.01em; }
.hero-call span { color: var(--on-dark); font-size: 17px; font-weight: 600; }
.checks { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px 24px; color: var(--on-dark-mute); font-size: 16.5px; }
.checks span::before { content: "✓"; color: var(--orange); margin-right: 7px; font-weight: 800; }
/* The homepage's category line, in Tony's own casing (BusinessOS, ServiceTradeOGs), so no capitals. One line on phones 320px and up; with larger text it wraps into two even lines instead of running off the screen. */
.hero-kicker { display: inline-block; max-width: 100%; padding: 0.5em clamp(0.75em, 2.6vw, 0.95em); border: 1px solid rgba(255, 154, 92, 0.38); border-radius: 1.3em; background: rgba(255, 106, 26, 0.1); font-size: clamp(11px, 3.15vw, 13.5px); letter-spacing: 0; text-transform: none; text-wrap: balance; }
.hero-grid.is-show .hero-actions { flex-wrap: nowrap; }
.page-hero { background: var(--night); color: var(--white); padding-block: 72px 80px; }
.page-hero h1 { font-size: clamp(36px, 4.6vw, 58px); margin-top: 16px; max-width: 20ch; }
.page-hero .lede { margin-top: 20px; }
.page-hero.center h1, .page-hero.center .lede { margin-inline: auto; text-align: center; }
.page-hero.center { text-align: center; }
.page-hero .hero-actions { justify-content: flex-start; }
.page-hero.center .hero-actions { justify-content: center; }

/* Call card (example call) */
.call { background: #0e1b33; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 24px; padding: 18px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7); color: var(--white); }
.call-top { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--orange), #ffa15f); display: grid; place-items: center; color: #1b0a00; font: 800 15px/1 var(--display); flex: none; }
.call-top b { display: block; font-size: 15px; line-height: 1.3; }
.call-top small { color: var(--on-dark-mute); font-size: 13px; }
.call-top .tag { margin-left: auto; }
.bubbles { display: grid; gap: 10px; padding-block: 16px 6px; }
.b { max-width: 88%; padding: 11px 14px; border-radius: 16px; font-size: 15px; line-height: 1.45; }
.b-caller { background: #1c2d4b; color: #dde6f2; border-bottom-left-radius: 6px; }
.b-ava { background: #f5f8fc; color: var(--ink); margin-left: auto; border-bottom-right-radius: 6px; }
.b .who { display: block; font: 700 11px/1 var(--body); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.62; margin-bottom: 5px; }
.result-card { margin-top: 14px; background: var(--white); color: var(--ink); border-radius: 16px; padding: 16px; display: grid; gap: 12px; }
.result-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.result-head b { font: 750 17px/1.25 var(--display); }
.kv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kv { background: var(--paper); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.kv span { display: block; font-size: 11px; color: var(--mute); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 650; }
.kv b { display: block; font: 600 14px/1.3 var(--mono); overflow-wrap: anywhere; }
.result-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.example-note { margin-top: 10px; font-size: 12.5px; color: var(--on-dark-mute); text-align: center; }

/* Timeline strip */
.strip { background: #0a1426; color: var(--on-dark); border-top: 1px solid var(--line-dark); padding: 0; }
.strip .wrap { display: grid; grid-template-columns: repeat(4, 1fr); }
.strip-item { padding: 24px 22px 26px 0; }
.strip-item + .strip-item { padding-left: 22px; border-left: 1px solid var(--line-dark); }
.strip-item .mono { color: #ff9a5c; font-size: 13px; }
.strip-item p { margin-top: 6px; font-size: 15px; line-height: 1.45; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; counter-reset: s; }
.step { position: relative; padding-top: 58px; }
.step::before { counter-increment: s; content: counter(s); position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-radius: 12px; background: var(--ink); color: var(--white); display: grid; place-items: center; font: 800 18px/1 var(--display); }
.dark .step::before { background: var(--orange); color: #1b0a00; }
.step h3 { font-size: 22px; line-height: 1.25; letter-spacing: -0.02em; }
.step p { margin-top: 10px; color: var(--slate); }
.dark .step p { color: var(--on-dark); }
.step .detail { margin-top: 14px; font: 500 13.5px/1.5 var(--mono); color: var(--slate); background: var(--paper); border-radius: 10px; padding: 10px 12px; }

/* Trade tabs */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.tabs button { min-height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); font: 650 15px/1 var(--body); color: var(--slate); cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--ink); color: var(--white); border-color: var(--ink); }
.tab-panel { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 28px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; }
.tab-panel[hidden] { display: none; }
.transcript { display: grid; gap: 14px; font-size: 16px; align-content: start; }
.transcript p b { font: 700 12px/1 var(--body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); display: block; margin-bottom: 5px; }
.did { background: var(--night); color: #dfe7f1; border-radius: var(--r-md); padding: 22px; display: grid; gap: 12px; align-content: start; }
.did h4 { font: 700 12.5px/1 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: #ff9a5c; }
.did ul { padding: 0; list-style: none; display: grid; gap: 10px; }
.did li { padding-left: 24px; position: relative; line-height: 1.45; font-size: 15.5px; }
.did li::before { content: ""; position: absolute; left: 0; top: 7px; width: 10px; height: 10px; border-radius: 3px; background: var(--orange); }
.did .link { margin-top: 4px; }

/* Product pages (AI receptionist first): a phone in the hero, calls to listen
   to, rows that pair each feature with a picture of it, and a comparison. */
.fh-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 48px; align-items: center; }
.fh-shot { display: flex; justify-content: center; }
.phone-shot { margin: 0; width: min(290px, 78%); container-type: inline-size; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.5)); }
.hs-screen img { display: block; width: 100%; height: 100%; object-fit: cover; }
.listen-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.listen-card { gap: 14px; }
.lc-head { display: flex; align-items: center; gap: 12px; }
.lc-head h3 { font-size: 19px; }
.lc-head small { color: var(--mute); font-size: 13.5px; }
.listen-card audio { width: 100%; height: 40px; }
.listen-card details { font-size: 15px; }
.listen-card summary { cursor: pointer; font-weight: 650; color: var(--orange-deep); }
.listen-card .transcript { margin-top: 12px; font-size: 15px; gap: 10px; }
.listen-card .btn { justify-self: start; }
.feature-rows { display: grid; gap: 80px; }
.feature-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.feature-row:nth-child(even) .row-visual { order: 2; }
.row-visual { display: flex; justify-content: center; }
.row-copy h3 { font: 800 clamp(26px, 2.8vw, 34px)/1.12 var(--display); letter-spacing: -0.025em; text-wrap: balance; }
.row-copy p { margin-top: 14px; color: var(--slate); font-size: 18px; max-width: 34em; text-wrap: pretty; }
.rows-rest { margin-top: 72px; }
.row-link { display: inline-block; margin-top: 16px; font-weight: 650; }
.viz { width: 100%; max-width: 440px; background: var(--night); color: #dfe7f1; border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow); }
.viz-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line-dark); }
.viz-head h4 { font: 700 12.5px/1.2 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: #ff9a5c; }
.viz-note { font-size: 13px; color: var(--on-dark-mute); }
.viz-steps { list-style: none; padding: 0; display: grid; gap: 12px; }
.viz-steps li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 15.5px; line-height: 1.45; }
.viz-steps li::before { content: ""; width: 20px; height: 20px; border-radius: 50%; background: #16a34a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat; }
.viz-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.viz-table td { padding: 10px 0; border-bottom: 1px solid var(--line-dark); }
.viz-table tr:last-child td { border-bottom: 0; }
.viz-table td:last-child { text-align: right; font: 600 14.5px/1.3 var(--mono); color: #fff; white-space: nowrap; padding-left: 12px; }
.viz-foot { margin-top: 12px; font-size: 13.5px; color: var(--on-dark-mute); }
.viz-log { list-style: none; padding: 0; display: grid; gap: 8px; }
.viz-log li { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); font-size: 14.5px; }
.viz-log .mono { color: #ff9a5c; font-size: 13px; }
.viz-log b { color: #fff; font-size: 13.5px; white-space: nowrap; }
.viz .bubbles { padding: 0; }
.dark .table-wrap { background: var(--navy-2); border-color: var(--line-dark); }
.dark .table th { background: rgba(255, 255, 255, 0.04); color: var(--on-dark-mute); border-color: var(--line-dark); }
.dark .table td { border-color: var(--line-dark); color: var(--on-dark); }
.dark .table td:first-child { color: var(--white); }
.compare th, .compare td { text-align: center; vertical-align: middle; }
.compare th:first-child, .compare td:first-child { text-align: left; }
.compare .cmp-us { background: rgba(255, 106, 26, 0.1); color: var(--white); font-weight: 650; }
.compare th.cmp-us { color: #ff9a5c; }
.cmp-yes { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(34, 197, 94, 0.16); color: #4ade80; }
.cmp-no { color: var(--on-dark-mute); }
.row-visual .phone-shot { width: min(250px, 70%); }
.row-visual:has(.shot-note) { flex-direction: column; align-items: center; }
.row-visual .shot-note { margin: 14px 0 0; max-width: 250px; font-size: 13px; color: var(--mute); text-align: center; }
/* Phones: each comparison row stacks, its three answers labelled underneath. */
@media (max-width: 640px) {
  .compare thead { display: none; }
  .compare, .compare tbody { display: block; }
  .table.compare tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; padding: 16px; border-bottom: 1px solid var(--line-dark); }
  .table.compare tr:last-child { border-bottom: 0; }
  .table.compare td { display: block; padding: 0; border: 0; text-align: left; font-size: 14.5px; }
  .compare td:first-child { grid-column: 1 / -1; font-size: 16px; }
  .compare td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 6px; font: 700 11px/1.2 var(--body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-dark-mute); }
  .compare .cmp-us { background: none; }
  .compare td.cmp-us::before { color: #ff9a5c; }
}
@media (max-width: 860px) {
  .fh-grid, .feature-row { grid-template-columns: 1fr; gap: 32px; }
  .feature-row:nth-child(even) .row-visual { order: 0; }
  .feature-rows { gap: 56px; }
  .listen-grid { grid-template-columns: 1fr; }
  .fh-shot .phone-shot { width: min(250px, 70%); }
}

/* Feature cards */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cards-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.cards-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); padding: 24px; display: grid; gap: 10px; align-content: start; }
.paper .card { border-color: #dde4ee; }
.card h3 { font-size: 20px; line-height: 1.25; letter-spacing: -0.02em; }
.card p { color: var(--slate); font-size: 15.5px; }
.card .mini { margin-top: 4px; background: var(--paper); border-radius: 10px; padding: 12px; font: 500 13px/1.55 var(--mono); color: var(--ink); }
.paper .card .mini { background: #f4f7fb; }
.card .link { margin-top: 4px; font-size: 15px; }
.card .ico { width: 40px; height: 40px; border-radius: 12px; background: var(--orange-soft); color: var(--orange-deep); display: grid; place-items: center; }
.card .ico svg { width: 21px; height: 21px; }
.card-dark { background: var(--navy-2); border-color: rgba(255, 255, 255, 0.08); color: var(--white); }
.card-dark p { color: var(--on-dark); }
.kind { font: 700 12px/1.2 var(--body); letter-spacing: 0.12em; text-transform: uppercase; }
.k-red { color: #b3261e; } .k-orange { color: var(--orange-deep); } .k-blue { color: var(--sky); } .k-green { color: var(--green); }
.rule { font: 500 13px/1.5 var(--mono); background: var(--paper); border-radius: 10px; padding: 10px 12px; color: var(--ink); }

/* Split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.split.top { align-items: start; }
.bullets { padding: 0; list-style: none; display: grid; gap: 12px; }
.bullets li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; line-height: 1.5; }
.bullets li::before { content: "✓"; color: var(--green); font-weight: 800; }
.dark .bullets li::before { color: #4fd1a0; }

/* Proposals */
.proposals { display: grid; gap: 12px; }
.pcard { background: var(--navy-2); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; padding: 16px 18px; display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; }
.pcard small { color: var(--on-dark-mute); font: 700 12px/1.2 var(--body); letter-spacing: 0.08em; text-transform: uppercase; }
.pcard p { margin-top: 5px; color: #eef3f9; font-size: 16px; line-height: 1.4; }
.pcard .acts { display: flex; gap: 8px; }

/* Screens (product screenshots) */
.screen { border-radius: 18px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--navy); }
.dark .screen { border-color: rgba(255, 255, 255, 0.12); }
.screen img { width: 100%; }
.screen-cap { margin-top: 10px; font-size: 13px; color: var(--mute); text-align: center; }
.dark .screen-cap { color: var(--on-dark-mute); }

/* Pricing */
.price-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 44px; }
.amount { font: 800 84px/0.95 var(--display); letter-spacing: -0.04em; }
.amount small { font: 650 18px/1 var(--body); color: var(--mute); letter-spacing: 0; }
.plans { display: grid; grid-template-columns: 1.35fr 1fr; gap: 22px; }
.plan { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 34px; display: grid; gap: 18px; align-content: start; box-shadow: var(--shadow); }
.plan.main { border: 2px solid var(--orange); }
.plan h2 { font-size: 26px; letter-spacing: -0.02em; }
.plan .amount { font-size: 72px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 22px; }
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 36px; }
.calc label { font: 650 16px/1.4 var(--body); display: block; margin-bottom: 14px; }
.calc input[type="range"] { width: 100%; accent-color: var(--orange); height: 28px; }
.scale { display: flex; justify-content: space-between; font: 500 13px var(--mono); color: var(--mute); margin-top: 4px; }
.calc-result { background: var(--night); color: var(--white); border-radius: var(--r-md); padding: 26px; display: grid; gap: 12px; }
.calc-result .total { font: 800 54px/1 var(--display); letter-spacing: -0.03em; }
.calc-row { display: flex; justify-content: space-between; gap: 12px; font: 500 15px var(--mono); color: var(--on-dark); border-top: 1px solid var(--line-dark); padding-top: 10px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--white); }
.table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.table th, .table td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table th { font: 700 12.5px/1.2 var(--body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); background: var(--paper); }
.table td:first-child { font-weight: 650; }
.table .num { text-align: right; font-family: var(--mono); white-space: nowrap; }
.status-live { color: #0b6443; font-weight: 650; white-space: nowrap; }
.status-next { color: #6d4700; font-weight: 650; white-space: nowrap; }

/* FAQ */
.faq { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 32px; }
.faq details { border-bottom: 1px solid var(--line); padding-block: 18px; }
.faq summary { cursor: pointer; font: 650 17.5px/1.4 var(--body); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 24px/1 var(--body); color: var(--mute); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin-top: 10px; color: var(--slate); }

/* CTA band */
.cta { text-align: center; }
.cta h2 { font-size: clamp(32px, 4.6vw, 56px); max-width: 18ch; margin: 0 auto; }
.cta .lede { margin: 18px auto 0; }
.cta .hero-actions { justify-content: center; }

/* Forms (signup, contact) */
.form-shell { min-height: calc(100vh - 68px); background: var(--paper); padding-block: 48px 72px; }
.form-grid { display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: start; }
.form-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 36px; box-shadow: var(--shadow); }
.form-card h1, .form-card .step-title { font-size: clamp(28px, 3.4vw, 38px); letter-spacing: -0.03em; line-height: 1.1; }
.form-card .sub { margin-top: 10px; color: var(--slate); }
.progress { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; font: 600 13px/1 var(--body); color: var(--mute); }
.progress-bars { display: flex; gap: 6px; margin-left: auto; }
.progress-bars i { width: 34px; height: 5px; border-radius: 99px; background: var(--line); display: block; }
.progress-bars i.on { background: var(--orange); }
.field { display: grid; gap: 7px; margin-top: 18px; }
.field label, .field .label { font: 650 14.5px/1.3 var(--body); color: var(--ink); }
.field .hint { font-size: 13.5px; color: var(--mute); line-height: 1.45; }
.input, .select, .textarea {
  width: 100%; min-height: 48px; border-radius: 12px; border: 1px solid #cfd8e4; background: var(--white);
  padding: 0 14px; font: 500 16px/1.3 var(--body); color: var(--ink);
}
.textarea { padding: 12px 14px; min-height: 110px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px rgba(47, 116, 240, 0.18); }
.input[aria-invalid="true"] { border-color: #c2361f; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid #cfd8e4; background: var(--white); font: 600 15px/1 var(--body); color: var(--slate); cursor: pointer; }
.chip[aria-pressed="true"], .chip.on { background: var(--ink); border-color: var(--ink); color: var(--white); }
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 72px; }
.pw-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); height: 34px; padding: 0 10px; border-radius: 8px; border: 0; background: var(--paper); font: 600 13px/1 var(--body); color: var(--slate); cursor: pointer; }
.check-row { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; margin-top: 18px; font-size: 14.5px; color: var(--slate); }
.check-row input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--orange); }
.form-actions { margin-top: 26px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.form-actions .btn-primary { min-width: 180px; }
.back-link { background: none; border: 0; color: var(--slate); font: 600 15px/1 var(--body); cursor: pointer; padding: 10px 4px; }
.form-error { margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: #fdecea; color: #8c2415; font-size: 14.5px; line-height: 1.45; }
.form-error[hidden] { display: none; }
.aside-card { background: var(--night); color: var(--white); border-radius: var(--r-lg); padding: 28px; display: grid; gap: 16px; position: sticky; top: 92px; }
.aside-card h2 { font-size: 20px; letter-spacing: -0.02em; }
.aside-card .bullets li { color: var(--on-dark); font-size: 15px; }
.aside-card .quote { border-top: 1px solid var(--line-dark); padding-top: 16px; color: var(--on-dark); font-size: 14.5px; }
.done-list { list-style: none; padding: 0; display: grid; gap: 10px; margin-top: 20px; }
.done-list li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; padding: 14px; border: 1px solid var(--line); border-radius: 14px; }
.done-list .n { width: 30px; height: 30px; border-radius: 9px; background: var(--orange-soft); color: var(--orange-deep); display: grid; place-items: center; font: 800 14px/1 var(--display); }
.done-list b { display: block; font-size: 15.5px; }
.done-list span { display: block; color: var(--mute); font-size: 14px; margin-top: 2px; }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(27, 10, 0, 0.25); border-top-color: #1b0a00; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Footer */
.site-foot { background: var(--night); color: var(--on-dark-mute); padding-block: 64px 40px; font-size: 14.5px; }
.foot-cols { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; }
.foot-cols h4 { margin: 0 0 12px; color: var(--white); font: 700 12.5px/1 var(--body); letter-spacing: 0.1em; text-transform: uppercase; }
.foot-cols ul { list-style: none; padding: 0; display: grid; gap: 9px; }
.site-foot a { text-decoration: none; }
.site-foot a:hover { color: var(--white); }
.foot-legal { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line-dark); display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; font-size: 13px; }

/* Prose (articles, legal-style pages) */
.prose { max-width: 720px; }
.prose h2 { font-size: 28px; letter-spacing: -0.02em; margin: 44px 0 12px; line-height: 1.2; }
.prose h3 { font-size: 20px; margin: 28px 0 8px; }
.prose p, .prose li { color: var(--slate); font-size: 17.5px; line-height: 1.7; }
.prose p + p { margin-top: 16px; }
.prose ul, .prose ol { padding-left: 22px; margin-top: 12px; display: grid; gap: 8px; }
.prose .callout { margin-top: 24px; background: var(--paper); border-left: 4px solid var(--orange); border-radius: 0 12px 12px 0; padding: 16px 18px; }

/* Legal documents (exact wording lives in site/legal/*.html) */
.legal-doc { max-width: 780px; }
.legal-doc h2 { font-size: 22px; letter-spacing: -0.01em; margin: 36px 0 10px; line-height: 1.3; }
.legal-doc h3 { font-size: 18px; margin: 24px 0 8px; }
.legal-doc p, .legal-doc li { color: var(--slate); font-size: 16.5px; line-height: 1.7; }
.legal-doc p + p { margin-top: 12px; }
.legal-doc ul, .legal-doc ol { padding-left: 22px; margin: 10px 0; display: grid; gap: 6px; }
.legal-doc a { color: var(--orange-deep); }
.legal-doc article.block { margin-top: 8px; }
.legal-doc article.block h2 { margin-top: 32px; }

/* Ask AI launcher */
.ask-launch { position: fixed; right: 20px; bottom: 20px; z-index: 50; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: 999px; border: 0; background: var(--orange); color: #1b0a00; font: 700 15px/1 var(--body); box-shadow: 0 18px 40px -16px rgba(7, 15, 31, 0.6); cursor: pointer; }
.ask-launch svg { width: 18px; height: 18px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ask-panel { position: fixed; right: 20px; bottom: 80px; z-index: 60; width: min(400px, calc(100vw - 32px)); max-height: min(620px, calc(100vh - 110px)); display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 40px 90px -30px rgba(7, 15, 31, 0.6); overflow: hidden; }
.ask-panel[hidden] { display: none; }
.ask-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: var(--night); color: var(--white); }
.ask-head b { font-size: 15px; }
.ask-head small { display: block; color: var(--on-dark-mute); font-size: 12.5px; }
.ask-close { margin-left: auto; background: rgba(255, 255, 255, 0.1); color: var(--white); border: 0; width: 34px; height: 34px; border-radius: 10px; cursor: pointer; font-size: 18px; line-height: 1; }
.ask-log { flex: 1; overflow-y: auto; padding: 16px; display: grid; gap: 10px; align-content: start; background: var(--paper); }
.ask-msg { max-width: 88%; padding: 10px 13px; border-radius: 14px; font-size: 15px; line-height: 1.5; }
.ask-msg.ava { background: var(--white); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.ask-msg.me { background: var(--ink); color: var(--white); margin-left: auto; border-bottom-right-radius: 5px; }
.ask-msg-link { display: inline-block; align-self: flex-start; font-weight: 700; color: var(--orange-deep, #c2410c); text-decoration: none; font-size: 14px; }
.ask-msg-link:hover { text-decoration: underline; }
.ask-suggest { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 12px; background: var(--paper); }
.ask-suggest button { border: 1px solid var(--line); background: var(--white); border-radius: 999px; padding: 7px 12px; font: 600 13px/1.2 var(--body); color: var(--slate); cursor: pointer; }
.ask-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); background: var(--white); }
.ask-form input { flex: 1; min-width: 0; min-height: 44px; border-radius: 12px; border: 1px solid #cfd8e4; padding: 0 12px; font-size: 15px; }
.ask-form button { min-height: 44px; }

/* Signup header: only a sign-in link, shown at every width */
.site-head .head-signin { display: flex; }
.head-signin .signin-q { padding: 0; }

/* Responsive */
@media (max-width: 1080px) {
  .cards-4 { grid-template-columns: repeat(2, 1fr); }
  .foot-cols { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 960px) {
  .nav, .head-right { display: none; }
  .menu-toggle { display: inline-flex; align-items: center; }
  .mobile-nav { display: block; position: fixed; inset: 68px 0 0 0; z-index: 39; background: var(--night); color: var(--white); overflow-y: auto; padding: 18px 24px 40px; }
  .mobile-nav[hidden] { display: none; }
  .mobile-nav h4 { font: 700 12px/1 var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-dark-mute); margin: 22px 0 10px; }
  .mobile-nav a { display: block; padding: 11px 0; color: var(--white); text-decoration: none; font-size: 17px; border-bottom: 1px solid var(--line-dark); }
  .mobile-nav .btn { display: flex; margin-top: 22px; border-bottom: 0; }
  .hero-grid, .tab-panel, .split, .price-panel, .plans, .calc, .form-grid { grid-template-columns: 1fr; }
  .aside-card { position: static; }
  .strip .wrap { grid-template-columns: 1fr 1fr; }
  .strip-item:nth-child(3) { padding-left: 0; border-left: 0; }
  .cards-3, .steps { grid-template-columns: 1fr 1fr; }
  .faq { grid-template-columns: 1fr; }
  section { padding-block: 68px; }
  .hero { padding-block: 52px 64px; }
}
@media (max-width: 640px) {
  .head-signin .signin-q { display: none; }
  body { font-size: 16px; }
  .wrap { padding-inline: 16px; }
  .lede { font-size: 17px; }
  .cards-3, .cards-2, .cards-4, .steps, .two, .field-row { grid-template-columns: 1fr; }
  .kv-grid { grid-template-columns: 1fr 1fr; }
  .strip .wrap { grid-template-columns: 1fr; }
  .strip-item, .strip-item + .strip-item { padding: 16px 0; border-left: 0; border-top: 1px solid var(--line-dark); }
  .price-panel, .plan, .calc, .form-card { padding: 24px; }
  .amount, .plan .amount { font-size: 60px; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .pcard { grid-template-columns: 1fr; }
  .hero-actions .btn { width: 100%; }
  .hero-grid.is-show .hero-actions .btn { width: auto; flex: 1 1 0; padding-inline: 12px; }
  .hero-grid.is-show .lede { font-size: 18px; }
  .ask-launch { right: 14px; bottom: 14px; width: 52px; min-height: 52px; padding: 0; justify-content: center; }
  .ask-launch .ask-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ask-launch svg { width: 22px; height: 22px; }
  .ask-panel { right: 12px; bottom: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

/* Hero showcase: the app on a laptop, with Ava's phone demo video over the
   bottom half of the board's Ava panel. */
.hero-grid.is-show { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); grid-template-areas: "top show" "rest show"; grid-template-rows: auto 1fr; gap: 0 44px; align-items: start; }
.hero-top { grid-area: top; }
.hero-devices { grid-area: show; }
.hero-rest { grid-area: rest; }
/* The desktop app, its top in line with the headline, with the phone over
   the lower part of its Ava panel. Percentage margins follow the width, so
   the phone stays on the panel at every size. */
.hero-show { position: relative; display: flex; flex-direction: column; margin: 0 -40px 0 0; }
.hs-laptop { position: relative; margin: 0; filter: drop-shadow(0 26px 40px rgba(0, 0, 0, 0.46)); }
.hs-lid { position: relative; padding: 10px 10px 0; background: linear-gradient(180deg, #3a404c 0%, #16191f 8px, #050608 100%); border: 1px solid #2a2f38; border-radius: 14px 14px 2px 2px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2); }
.hs-cam { position: absolute; top: 3px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #1b1f26; box-shadow: 0 0 0 1px #3a404a; }
.hs-lid img { display: block; width: 100%; height: auto; }
.hs-chin { height: 12px; background: linear-gradient(180deg, #eceff4 0%, #c5cad3 100%); border-radius: 0 0 2px 2px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7); }
.hs-base { height: 14px; margin: 0 5% -3px; background: linear-gradient(180deg, #d8dce4 0%, #9aa1ad 100%); clip-path: polygon(3% 0, 97% 0, 100% 100%, 0 100%); border-radius: 0 0 10px 10px; box-shadow: 0 16px 26px rgba(0, 0, 0, 0.32); }
.hs-phone { position: relative; z-index: 2; align-self: flex-end; width: 25%; margin-top: calc(-44.7% - 14px); container-type: inline-size; filter: drop-shadow(0 26px 34px rgba(0, 0, 0, 0.6)); }
.hs-bezel { padding: 7px; padding: 3.6cqw; border-radius: 30px; border-radius: 15cqw; background: linear-gradient(160deg, #4a5160 0%, #14171d 14%, #050608 100%); border: 1px solid #2a2f38; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.hs-screen { position: relative; overflow: hidden; aspect-ratio: 480 / 1022; border-radius: 24px; border-radius: 12cqw; background: #0b1428; }
.hs-screen video { display: block; width: 100%; height: 100%; object-fit: cover; }
.hs-open { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; border-radius: inherit; background: none; cursor: zoom-in; }
.hs-open:focus-visible { outline: 3px solid var(--orange); outline-offset: -3px; }
/* Shown while the demo is paused, including for people who ask for reduced motion, whose demo waits for them. */
.hs-play { position: absolute; left: 50%; top: 38%; z-index: 1; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 0.55em; padding: 0.7em 1.15em; border: 0; border-radius: 999px; background: var(--orange); color: #fff; font: 700 max(11px, 5.6cqw)/1 Inter, system-ui, -apple-system, sans-serif; white-space: nowrap; cursor: pointer; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45); }
.hs-play::before { content: ""; border-style: solid; border-width: 0.42em 0 0.42em 0.7em; border-color: transparent transparent transparent currentColor; }
.hs-play[hidden] { display: none; }
.hs-play:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.hs-btn { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.hs-btn:hover { color: var(--white); }
.hs-btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 2px; }
/* The long demo further down the homepage. The video draws its own phone, so
   it sits in a plain frame with a clip list beside it that jumps to a moment. */
.wv { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 28px; align-items: start; }
.wv-stage { border-radius: 20px; overflow: hidden; background: #070f1f; box-shadow: 0 24px 50px -22px rgba(7, 15, 31, 0.6); }
.wv-stage video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: contain; background: #070f1f; }
.wv-side { position: relative; }
/* The list scrolls; this says so without waiting for a scrollbar to. */
.wv-side::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 54px; pointer-events: none; background: linear-gradient(180deg, rgba(244, 247, 251, 0) 0%, var(--paper) 86%); }
.wv-lede { margin: 0 0 14px; color: var(--slate); font-size: 15px; }
.wv-list { display: grid; gap: 4px; margin: 0; padding: 0 0 22px; list-style: none; max-height: 560px; overflow-y: auto; scrollbar-gutter: stable; }
.wv-clip { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; border: 1px solid transparent; border-radius: 12px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.wv-clip:hover { border-color: var(--line); background: var(--white); }
.wv-clip:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }
.wv-at { color: var(--mute); font-size: 13px; }
.wv-title { font-size: 15px; line-height: 1.4; }
.wv-clip[aria-current="true"] { border-color: var(--orange); background: var(--white); }
.wv-clip[aria-current="true"] .wv-at { color: var(--orange); font-weight: 650; }
@media (max-width: 900px) {
  /* Twenty rows would push the rest of the page a long way down, so the list
     scrolls here too, in tighter two-line rows. */
  .wv { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .wv-stage { max-width: 340px; margin: 0 auto; }
  .wv-list { max-height: 58vh; }
  .wv-clip { grid-template-columns: 56px minmax(0, 1fr); align-items: start; gap: 4px 10px; padding: 8px; }
  .wv-clip .wv-at { grid-column: 1; grid-row: 1; }
  .wv-clip .wv-title { grid-column: 2; grid-row: 1; font-size: 14px; }
  .wv-clip .tag { grid-column: 2; grid-row: 2; justify-self: start; font-size: 10px; padding: 2px 6px; }
}
.hs-dialog { padding: 0; border: 0; background: none; overflow: visible; max-width: none; max-height: none; }
.hs-dialog::backdrop { background: rgba(3, 7, 15, 0.86); }
.hs-dialog .hs-bezel { width: min(420px, calc(100vw - 32px), calc((100vh - 48px) * 0.45)); width: min(420px, calc(100vw - 32px), calc((100dvh - 48px) * 0.45)); padding: 10px; border-radius: 50px; }
.hs-dialog .hs-screen { border-radius: 40px; }
.hs-close { position: fixed; top: 16px; right: 16px; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; font: 400 28px/1 var(--body); cursor: pointer; }
.hs-close:hover { background: rgba(255, 255, 255, 0.24); }
.hs-close:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
@media (max-width: 1180px) {
  .hero-show { margin-right: 0; }
}
/* Phones and tablets (Tony, Sep 24): the computer and the phone come right
   after the headline, then the buttons, then the words. */
@media (max-width: 960px) {
  .hero-grid.is-show { grid-template-columns: 1fr; grid-template-areas: "top" "show" "rest"; grid-template-rows: none; gap: 0; }
  .hero-devices { margin-top: 24px; }
  .hero-rest { display: flex; flex-direction: column; }
  .hero-rest .hero-actions { order: -1; margin-top: 22px; }
  .hero-show { max-width: 680px; margin: 8px auto 0; }
  .hero:has(.hero-grid.is-show) { padding-top: 28px; }
}
@media (max-width: 560px) {
  /* Tucked higher over the laptop, so Try Free and Explore Demo still fit on the first screen. */
  .hs-phone { width: 38%; margin-top: calc(-60% - 14px); }
}
/* Home hero on a laptop-wide screen (Tony, Sep 23): the words in a narrow column on the left, the desk large on the right, and the phone over the desk's Recent calls, beside Ava's panel. */
@media (min-width: 961px) {
  body:has(.hero-grid.is-show) .site-head .wrap, .hero-grid.is-show { max-width: 1380px; }
  .hero:has(.hero-grid.is-show) { padding-top: 22px; }
  .hero-grid.is-show { grid-template-columns: 342px minmax(0, 1fr); gap: 0 32px; align-items: start; }
  .hero-grid.is-show .eyebrow { font-size: 11.5px; }
  .hero-grid.is-show h1 { font-size: 46px; margin-top: 8px; }
  .hero-grid.is-show .lede { font-size: 16px; line-height: 1.45; margin-top: 12px; }
  .hero-grid.is-show .hero-actions { margin-top: 18px; }
  .hero-grid.is-show .hero-call { margin-top: 14px; padding: 10px 16px; gap: 10px; }
  .hero-grid.is-show .hero-call b { font-size: 18px; }
  .hero-grid.is-show .hero-call span { font-size: 15.5px; }
  .hero-grid.is-show .checks { margin-top: 14px; font-size: 15px; gap: 6px 18px; }
  .hero-show { margin: 0; }
  .hs-phone { position: absolute; left: 54.5%; top: 36%; width: 24%; margin: 0; }
}
/* Ava's panel on the laptop, laid over the rail in desk-board.png and following the phone's video. Sizes are ems of a 324px-wide design (1em = 13px there), so it scales with the picture. */
.hs-rail { position: absolute; left: calc(10px + (100% - 20px) * 0.7813); top: calc(10px + (100% - 10px) * 0.0108); width: calc((100% - 20px) * 0.2109); height: calc((100% - 10px) * 0.9783); container-type: inline-size; z-index: 1; pointer-events: none; }
@media (max-width: 960px) {
  .hs-rail { display: none; }
}
.hr { box-sizing: border-box; height: 100%; display: flex; flex-direction: column; overflow: hidden; font-family: Inter, system-ui, -apple-system, sans-serif; font-size: calc(100cqw * 13 / 324); line-height: 1.45; color: #f4f7fb; text-align: left; background: #0b1f3a; border: 0.115em solid #fb923c; border-radius: 1.23em; }
.hr-head { display: flex; align-items: center; gap: 0.77em; padding: 1.23em 1.385em; border-bottom: 1px solid #143056; }
.hr-mark { width: 2.167em; height: 2.167em; border-radius: 50%; display: grid; place-items: center; font-size: 0.923em; font-weight: 700; color: #0a1128; background: #fb923c; }
.hr-head b { font-size: 1.154em; }
.hr-state { margin-left: auto; display: flex; align-items: center; gap: 0.5em; font-size: 0.885em; font-weight: 600; color: #9aacbf; }
.hr-state::before { content: ""; width: 0.7em; height: 0.7em; border-radius: 50%; background: #5b7390; }
.hr-state.is-live { color: #fdba74; }
.hr-state.is-live::before { background: #fb923c; box-shadow: 0 0 0 0.35em rgba(251, 146, 60, 0.22); }
.hr-state.is-ok::before { background: #16a34a; box-shadow: 0 0 0 0.35em rgba(22, 163, 74, 0.2); }
.hr-body { flex: 1; min-height: 0; padding: 1.077em 1.23em; }
.hr-scene { display: flex; flex-direction: column; gap: 0.77em; }
.hr h4 { margin: 0.46em 0 0; font-size: 0.808em; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: #9aacbf; }
.hr-call { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.77em; padding: 0.923em 1em; border-radius: 0.923em; background: #0a1128; border: 1px solid #1b3c68; }
.hr-av { width: 2.833em; height: 2.833em; border-radius: 50%; display: grid; place-items: center; font-size: 0.923em; font-weight: 700; background: #1b3c68; }
.hr-who b { display: block; font-size: 1.077em; }
.hr-who small { display: block; font-size: 0.885em; color: #9aacbf; }
.hr-clock, .hr-tag { font-size: 0.96em; font-weight: 600; font-variant-numeric: tabular-nums; color: #fdba74; }
.hr-call.is-done .hr-tag { color: #86efac; }
.hr-bars { grid-column: 1 / -1; display: flex; align-items: end; gap: 0.23em; height: 1.385em; }
.hr-bars i { flex: 1; border-radius: 0.15em; background: #fb923c; opacity: 0.85; }
.hr-line { margin: 0; padding: 0.69em 0.846em; border-radius: 0.846em; font-size: 0.96em; background: #14233d; border: 1px solid #1b3c68; }
.hr-line.is-ava { background: #3d2914; border-color: #9a4a12; }
.hr-line b { display: block; margin-bottom: 0.23em; font-size: 0.8em; letter-spacing: 0.08em; text-transform: uppercase; color: #9aacbf; }
.hr-line.is-ava b { color: #fdba74; }
.hr-q { margin: 0; align-self: flex-end; max-width: 88%; padding: 0.62em 0.85em; border-radius: 0.85em; font-size: 0.96em; background: #1b3c68; }
.hr-steps, .hr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.54em; }
.hr-steps li { display: flex; align-items: flex-start; gap: 0.69em; font-size: 0.96em; }
.hr-steps li::before { content: ""; flex: 0 0 1.23em; height: 1.23em; margin-top: 0.08em; box-sizing: border-box; border: 0.15em solid #fb923c; border-radius: 0.385em; }
.hr-steps li.is-done::before { border: 0; background: #16a34a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.hr-list li { display: flex; justify-content: space-between; gap: 0.77em; padding: 0.69em 0.846em; border-radius: 0.846em; font-size: 0.96em; background: #0a1128; border: 1px solid #1b3c68; }
.hr-list small { display: block; font-size: 0.9em; color: #9aacbf; }
.hr-card { padding: 0.846em 0.923em; border-radius: 0.923em; background: #3d2914; border: 1px solid #fb923c; }
.hr-card b { display: block; font-size: 0.96em; line-height: 1.4; }
.hr-card p { margin: 0.23em 0 0; font-size: 0.885em; color: #d6c3b0; }
.hr-card.is-plain { background: #0a1128; border-color: #1b3c68; }
.hr-card.is-plain p { color: #9aacbf; }
.hr-card.is-ok { background: #0f2a1c; border-color: #16a34a; }
.hr-card.is-ok p { color: #a7d7b9; }
.hr-acts { display: flex; gap: 0.46em; margin-top: 0.69em; }
.hr-acts span { padding: 0.385em 0.923em; border-radius: 999px; font-size: 0.885em; font-weight: 600; color: #1a0f05; background: #fb923c; }
.hr-acts span + span { color: #f4f7fb; background: #0b1f3a; border: 1px solid #1b3c68; }
.hr-ask { display: flex; align-items: center; margin: 0 1.077em 1.077em; padding: 0.77em 0.923em; border-radius: 0.923em; color: #9aacbf; border: 1px solid #1b3c68; }
.hr-ask span { margin-left: auto; padding: 0.3em 0.923em; border-radius: 999px; font-weight: 600; color: #1a0f05; background: #fb923c; }
/* Only the scene and the lines the phone is on. Without JavaScript: the first call. */
.hs-rail.is-live [data-scene]:not(.is-scene), .hs-rail.is-live [data-t]:not(.is-on), .hs-rail.is-live [data-until]:not(.is-on) { display: none; }
.hs-rail:not(.is-live) [data-scene]:not([data-scene="0"]), .hs-rail:not(.is-live) .hr-after { display: none; }

/* "Click around the demo shop" (home): the sample shop's pages in a browser window. */
.dv { border-radius: 16px; overflow: hidden; background: #0a1128; border: 1px solid #1b2b47; box-shadow: 0 30px 60px -30px rgba(10, 17, 40, 0.55); }
.dv-bar { display: flex; align-items: center; gap: 14px; padding: 10px 14px; background: #121c30; border-bottom: 1px solid #22304a; }
.dv-dots { display: flex; gap: 7px; }
.dv-dots i { width: 11px; height: 11px; border-radius: 50%; }
.dv-dots i:nth-child(1) { background: #ff5f57; }
.dv-dots i:nth-child(2) { background: #febc2e; }
.dv-dots i:nth-child(3) { background: #28c840; }
.dv-url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: #9fb0c8; text-align: center; }
.dv-live.btn { min-height: 38px; padding: 0 16px; font-size: 14px; }
.dv-body { display: grid; grid-template-columns: 208px minmax(0, 1fr); }
.dv-nav { display: flex; flex-direction: column; gap: 2px; padding: 14px 10px; background: #081226; border-right: 1px solid #16284a; }
.dv-group { margin: 14px 10px 6px; font: 700 11px/1 var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: #8499b4; }
.dv-group:first-child { margin-top: 4px; }
.dv-tab { display: flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 9px; color: #c7d3e3; font-size: 15px; font-weight: 500; text-decoration: none; }
.dv-tab:hover { background: rgba(255, 255, 255, 0.07); color: var(--white); }
.dv-tab.is-on { background: var(--orange); color: var(--white); font-weight: 700; }
.dv-tab:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.dv-screen { position: relative; margin: 0; background: #0a1128; }
.dv-screen img { display: block; width: 100%; height: auto; }
.dv-cap { position: absolute; left: 16px; right: 16px; bottom: 16px; padding: 12px 16px; border-radius: 12px; background: rgba(8, 18, 38, 0.94); border: 1px solid #1b3c68; color: #dbe4ef; font-size: 15px; line-height: 1.45; }
.dv-cap b { color: var(--white); }
.dv-note { margin-top: 14px; font-size: 14px; color: var(--mute); }
@media (max-width: 760px) {
  .dv-bar { justify-content: space-between; }
  .dv-url { display: none; }
  .dv-body { grid-template-columns: 1fr; }
  .dv-nav { flex-direction: row; gap: 6px; padding: 10px; overflow-x: auto; border-right: 0; border-bottom: 1px solid #16284a; scrollbar-width: none; }
  .dv-group { display: none; }
  .dv-tab { flex: none; background: rgba(255, 255, 255, 0.07); }
  .dv-cap { position: static; border: 0; border-top: 1px solid #1b3c68; border-radius: 0; }
}

/* Labels on the hero's devices, and the demo buttons under them (Tony's Idea A, Sep 24). */
.hs-label { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: #0a1128; border: 1px solid #2c4a78; color: #e6edf6; font: 600 13px/1.2 var(--body); white-space: nowrap; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.6); pointer-events: none; }
.hs-label svg { flex: none; color: #ff9a5c; }
.hs-label-computer { top: -14px; left: 28px; }
.hs-label-phone { left: 50%; bottom: -15px; transform: translateX(-50%); }
.hero-demo-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin-top: 22px; }
.hero-demo-row .example-note { margin: 0; flex-basis: 100%; }
.hs-cta { display: none; }
@media (min-width: 961px) {
  .hero-demo-row { margin-top: 44px; }
  .hs-cta { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; font-size: 15px; }
  .hs-cta.is-soft { background: #fff0e6; color: #9a3d08; border: 0; }
  .hs-cta.is-soft:hover { background: #ffe2cf; }
  .hs-cta.is-ghost { background: transparent; color: var(--white); border: 1.5px solid rgba(255, 255, 255, 0.3); }
  .hs-cta.is-ghost:hover { border-color: rgba(255, 255, 255, 0.6); }
  .hs-note-links { display: none; }
}
@media (max-width: 960px) {
  .hs-label { padding: 5px 10px; font-size: 12px; }
  .hs-label-more { display: none; }
  .hs-label-computer { top: -12px; left: 14px; }
  .hs-label-phone { bottom: -13px; }
}

/* Call Ava Live stays on one line on phones, down to the smallest. */
@media (max-width: 560px) {
  .hero-call { padding: 12px 16px; gap: 10px; }
  .hero-call span { font-size: 16px; }
  .hero-call b { font-size: 19px; }
  .checks { font-size: 16px; gap: 9px 18px; }
}
@media (max-width: 374px) {
  .hero-call { padding: 11px 12px; gap: 8px; }
  .hero-call span { font-size: 14.5px; }
  .hero-call b { font-size: 17px; }
}