:root {
  --bg: #f7f8f4;
  --bg-card: #ffffff;
  --bg-card-2: #eef1e8;
  --border: #d9ded2;
  --text: #373633;
  --muted: #6d6a62;
  --olive: #596b3f;
  --olive-soft: #e9eee3;
  --orange: #f0522f;
}

* { box-sizing: border-box; }

/* Off globally, not just on the sticky-stack sections: the anchor node the
   browser picks to "correct" scroll around a layout shift can live anywhere
   on the page (e.g. a lazy-loaded image several sections away), and since
   several sections here use position: sticky, that correction can walk
   scroll position somewhere completely wrong instead of leaving it alone. */
html { overflow-anchor: none; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
  line-height: 1.5;
}

a { color: inherit; }

.banner {
  background: var(--olive);
  color: #fff;
  text-align: center;
  padding: 7px 40px;
  font-size: 0.78rem;
  font-weight: 600;
  position: relative;
}
.banner-close {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
}
.banner.hidden { display: none; }

.nav {
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: rgba(247, 248, 244, 0.94);
  backdrop-filter: blur(14px);
  z-index: 10;
}
.nav-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 2px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.logo { display: flex; align-items: center; gap: 10px; }
.logo-link { text-decoration: none; }
.demo-page-section { padding-top: 48px; }
.mt-sm { margin-top: 8px; }
.logo-mark {
  width: 34px; height: 34px; border-radius: 50%;
  background: url("/assets/Keaai-Icon-520.png") center/cover no-repeat;
  display: inline-block;
  border: 1px solid color-mix(in srgb, var(--orange), transparent 30%);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.04);
}
.logo-wordmark {
  display: block; width: 158px; height: auto;
}
.nav .logo-wordmark { width: 237px; }
.footer-brand .logo-wordmark { width: 190px; }
.logo-name { font-weight: 700; font-size: 1.05rem; line-height: 1; }
.logo-sub { font-size: 0.6rem; letter-spacing: 1px; color: var(--muted); }
/* margin-left: auto absorbs the space .nav-inner's justify-content:
   space-between would otherwise put before this element, so the links
   cluster against .nav-actions on the right instead of sitting centered
   between the logo and the buttons. */
.nav-links { display: flex; gap: 24px; margin-left: auto; }
.nav-links a { text-decoration: none; color: var(--text); font-size: 0.88rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.nav-links a:hover { color: var(--text); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-muted { color: var(--muted); font-size: 0.88rem; }

.btn {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 800;
  text-decoration: none;
  text-align: center;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-primary {
  background: var(--orange); color: #fff;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--orange), transparent 70%);
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-outline { background: #fff; color: var(--text); border-color: var(--border); }
.btn-outline:hover { border-color: var(--muted); }
.btn-lg { padding: 13px 24px; font-size: 1rem; }
.btn-block { display: block; width: 100%; text-align: center; }

/* Both actions use .btn-outline, not one .btn-primary and one .btn-outline -
   Accept and Decline must carry equal visual weight. Regulators have
   specifically flagged a prominent "Accept" next to a faint "Decline" as
   invalid consent (it nudges rather than asks), so neither reads as the
   "recommended" choice here. */
.cookie-consent {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 1000;
  max-width: 38rem; margin: 0 auto;
  background: var(--bg-card); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 1.1rem 1.25rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  display: flex; flex-direction: column; gap: .8rem;
}
.cookie-consent p { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--text); }
.cookie-consent a { color: var(--olive); }
.cookie-consent-actions { display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap; }
.cookie-consent-actions .btn { padding: 9px 18px; font-size: .85rem; }
@media (max-width: 480px) {
  .cookie-consent { left: .6rem; right: .6rem; bottom: .6rem; padding: 1rem; }
  .cookie-consent-actions { justify-content: stretch; }
  .cookie-consent-actions .btn { flex: 1 1 0; }
}

.footer-cookie-link { margin-left: .6rem; }

/* Same treatment as .cookie-consent, anchored to the top instead of the
   bottom so the two can never overlap if both happen to show at once. */
.region-banner {
  position: fixed; left: 1rem; right: 1rem; top: 1rem; z-index: 1000;
  max-width: 38rem; margin: 0 auto;
  background: var(--bg-card); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 1.1rem 1.25rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  display: flex; flex-direction: column; gap: .8rem;
}
.region-banner p { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--text); }
.region-banner-actions { display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap; }
.region-banner-actions .btn { padding: 9px 18px; font-size: .85rem; }
@media (max-width: 480px) {
  .region-banner { left: .6rem; right: .6rem; top: .6rem; padding: 1rem; }
  .region-banner-actions { justify-content: stretch; }
  .region-banner-actions .btn { flex: 1 1 0; }
}

.badge {
  display: inline-block;
  font-size: 0.68rem;
  letter-spacing: 2.2px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 13px;
  color: var(--olive);
  background: var(--olive-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700;
}
.badge-center { display: block; width: fit-content; margin: 0 auto 20px; }

.hero {
  max-width: 1120px;
  margin: 0 auto;
  padding: 76px 24px 58px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
}
.hero-copy .badge { margin-bottom: 18px; }
.hero h1 { font-size: clamp(2.6rem, 5.2vw, 4.1rem); line-height: 1.02; letter-spacing: normal; margin: 0 0 20px; }
.accent { color: var(--olive); }
.lede { color: var(--muted); font-size: 1.14rem; max-width: 48ch; }
.hero-ctas { display: flex; gap: 12px; margin: 24px 0 18px; flex-wrap: wrap; }
.trust-line {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem; letter-spacing: 1px; color: #938f84; font-weight: 700;
}
.phone-line { color: var(--muted); margin: 18px 0 0; font-size: 0.92rem; }
.phone-line a { color: var(--olive); font-weight: 800; }

.chat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(35, 35, 30, 0.08);
}
.chat-card-header {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  font-size: 0.85rem; color: var(--muted);
  background: #fff;
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; display: inline-block; }
.chat-time { margin-left: auto; }
.chat-body {
  padding: 18px; display: flex; flex-direction: column; gap: 12px;
  background:
    linear-gradient(var(--border) 1px, transparent 1px) 0 0 / 100% 44px,
    #fafbf7;
}
.bubble { max-width: 85%; padding: 10px 14px; border-radius: 12px; font-size: 0.92rem; }
.bubble p { margin: 0 0 6px; }
.bubble p:last-child { margin-bottom: 0; }
.bubble ul, .bubble ol { margin: 0 0 6px 18px; padding: 0; }
.bubble li { margin-bottom: 2px; }
.bubble h2, .bubble h3, .bubble h4, .bubble h5, .bubble h6 { margin: 8px 0 5px; font-size: 1rem; line-height: 1.3; }
.bubble h2:first-child, .bubble h3:first-child { margin-top: 0; }
.bubble blockquote { margin: 7px 0; padding-left: 9px; border-left: 3px solid currentColor; opacity: .85; }
.bubble pre { max-width: 100%; overflow-x: auto; margin: 7px 0; padding: 7px; border-radius: 6px; background: rgba(255,255,255,.1); }
.bubble code {
  background: rgba(255, 255, 255, 0.12); border-radius: 4px; padding: 1px 5px;
  font-family: ui-monospace, Menlo, monospace; font-size: 0.85em;
}
.bubble-left { background: var(--bg-card-2); align-self: flex-start; }
.bubble-right { background: var(--olive); color: #fff; align-self: flex-end; }
.hl { color: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }
.chat-card-footer {
  display: flex; justify-content: space-between;
  padding: 12px 16px; border-top: 1px solid var(--border);
  font-size: 0.7rem; color: #938f84;
  background: var(--olive-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.problem-band {
  background: var(--olive-soft);
  padding: 42px 24px;
  text-align: center;
}
.problem-band p {
  max-width: 760px; margin: 0 auto;
  font-size: clamp(1.45rem, 2.7vw, 2.1rem);
  line-height: 1.35; font-weight: 800; color: #68655e;
}
.problem-band strong { color: var(--olive); }
.trades { max-width: 1120px; margin: 32px auto 0; padding: 0 24px; text-align: center; }
.trades-label { font-size: 0.75rem; letter-spacing: 1.5px; color: var(--muted); margin-bottom: 18px; }
.trades-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.chip {
  border: 1px solid var(--border); border-radius: 999px; padding: 8px 16px;
  font-size: 0.85rem; color: var(--muted);
}

.section { max-width: 1120px; margin: 0 auto; padding: 86px 24px 0; text-align: left; }
.section h2 { font-size: clamp(2rem, 3.8vw, 3.1rem); line-height: 1.2; letter-spacing: normal; max-width: 60%; margin: 18px 0 18px; }
.section-sub { color: var(--muted); margin: 0 0 42px; max-width: 64ch; }
.try-teaser .section-sub { max-width: 46ch; margin-left: auto; margin-right: auto; }

.grid { display: grid; gap: 20px; text-align: left; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

.card, .step, .price-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 14px; padding: 24px;
  box-shadow: 0 12px 28px rgba(35, 35, 30, 0.06);
}
.card {
  display: grid; grid-template-columns: 35% minmax(0, 1fr); column-gap: 22px; row-gap: 4px;
  grid-template-areas: "icon tag" "icon h3" "icon p";
  min-height: 204px; align-items: start;
}
.card-icon {
  grid-area: icon;
  width: 100%; height: auto; object-fit: contain; display: block;
  margin: 0; align-self: center;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.16));
}
.tag {
  display: block; font-size: 0.68rem; letter-spacing: 1.8px;
  color: #7f8871; border: 0; border-radius: 7px;
  padding: 5px 12px; margin-bottom: 12px;
  background: var(--olive-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 800;
}
.card .tag { grid-area: tag; }
.card > h3 { grid-area: h3; }
.card > p { grid-area: p; }
.card h3, .step h3 { margin: 0 0 8px; font-size: 1.16rem; line-height: 1.35; }
.card p, .step p { color: var(--muted); margin: 0; font-size: 0.92rem; }
.step-num { color: var(--orange); font-weight: 600; margin-bottom: 8px; font-size: 0.9rem; }

.how-band {
  margin-top: 92px;
  padding: 78px 24px 86px;
  background: var(--olive);
  color: #fff;
}
.how-inner { max-width: 1120px; margin: 0 auto; }
.how-title h2 {
  font-size: clamp(2rem, 3.8vw, 3.1rem); line-height: 1.2; letter-spacing: normal;
  max-width: 60%; margin: 18px 0 54px;
}
.how-band .badge {
  background: color-mix(in srgb, #fff, transparent 88%);
  border-color: color-mix(in srgb, #fff, transparent 65%);
  color: #edf2e8;
}
.how-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 88px;
}
.how-band .step {
  background: transparent; border: 0; box-shadow: none; padding: 0;
}
.how-band .step h3 { color: #fff; }
.how-band .step p { color: rgba(255,255,255,0.72); }
.how-band .tag {
  display: inline-block; grid-column: auto; width: auto; margin-bottom: 14px;
  background: rgba(255,255,255,0.18); color: #f4f6ef;
}

/* --- Instant demo + customization wizard (demo.html) --- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.wizard-section { max-width: 1120px; margin: 40px auto 0; padding: 0 24px 80px; }
.demo-intro { text-align: center; max-width: 760px; margin: 0 auto 34px; }
.demo-intro h1 { font-size: 2.35rem; line-height: 1.12; margin: 0 0 12px; }
.demo-intro p { color: var(--muted); margin: 0 auto; max-width: 62ch; }
.demo-intro-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 24px; }

.wizard-progress {
  height: 4px; background: var(--border); border-radius: 999px; margin: 0 auto 34px; max-width: 680px;
}
.wizard-progress-bar { height: 100%; background: var(--orange); border-radius: 999px; width: 20%; transition: width 0.25s ease; }
.wizard { max-width: 760px; min-height: 380px; margin: 0 auto; }
.wizard[hidden], .demo-ready[hidden], .wizard-progress[hidden] { display: none; }
.wizard-step { display: none; text-align: center; }
.wizard-step.active { display: block; }
.wizard-eyebrow { font-size: 0.78rem; letter-spacing: 1px; color: var(--muted); margin-bottom: 10px; }
.wizard-step h2 { font-size: 1.7rem; margin: 0 0 8px; }
.wizard-sub { color: var(--muted); margin: 0 auto 28px; max-width: 58ch; }
.wizard-mini-title { margin: 28px 0 12px; font-size: 1rem; }

.wizard-chips, .swatch-row-lg, .feature-cards, .placement-cards, .language-cards, .speech-cards {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
}
.wizard-chips .chip-btn { font-size: 0.9rem; padding: 9px 16px; }

/* Industry picker: labelled rows rather than one wrapping cloud.
   The categories are very uneven - 17 trades against 3 health - so a card grid
   leaves large gaps beside the short ones. A fixed label column lets each row
   take exactly the height its options need, and the eye can scan the category
   names down a single edge. */
.industry-table { display: block; text-align: left; }
.industry-row {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding: 18px 0;
  border-top: 1px solid var(--border);
}
.industry-row:first-child { border-top: none; padding-top: 4px; }
.industry-row-label {
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 9px;
}
.industry-row-options { display: flex; flex-wrap: wrap; gap: 8px; }
.industry-row-options .chip-btn { font-size: 0.9rem; padding: 9px 16px; }

/* Step 2 reuses the labelled rows from step 1, but each option needs room for
   a description and a real example question, so the options are a card grid
   rather than inline chips. */
.feature-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}
.feature-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-start;
  text-align: left;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-card);
  cursor: pointer;
  font: inherit;
  color: inherit;
  height: 100%;
}
.feature-card:hover { border-color: var(--muted); }
.feature-card.active { border-color: var(--orange); background: var(--bg-card-2); }
.feature-card-title { font-weight: 800; font-size: 0.92rem; }
.feature-card-blurb { color: var(--muted); font-size: 0.82rem; line-height: 1.4; }
/* The example is the part that makes the feature concrete for this trade, so
   it is visually quoted rather than reading as more description. */
.feature-card-example {
  color: var(--olive);
  font-size: 0.8rem;
  font-style: italic;
  line-height: 1.35;
  margin-top: 2px;
}

.swatch-lg, .placement-card, .language-card, .speech-card, .big-toggle-option {
  border: 2px solid var(--border); background: var(--bg-card); cursor: pointer;
  font: inherit; color: inherit; transition: transform 0.12s, border-color 0.12s, background 0.12s;
}
.swatch-lg:hover, .placement-card:hover, .language-card:hover, .speech-card:hover, .big-toggle-option:hover, .feature-card:hover {
  transform: translateY(-1px); border-color: var(--muted);
}
.swatch-lg:focus-visible, .placement-card:focus-visible, .language-card:focus-visible,
.speech-card:focus-visible, .big-toggle-option:focus-visible, .feature-card:focus-visible, .chip-btn:focus-visible,
.prompt-chip:focus-visible, .btn:focus-visible, .mic-btn:focus-visible, .demo-input-row input:focus-visible,
.control-select:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--orange), transparent 35%);
  outline-offset: 2px;
}
.swatch-lg { width: 132px; padding: 14px; border-radius: 14px; }
.swatch-lg .swatch-dot { height: 46px; border-radius: 10px; margin-bottom: 10px; }
.swatch-lg .swatch-label { font-size: 0.82rem; }
.placement-card { width: 150px; padding: 16px; border-radius: 14px; text-align: left; }
.placement-card span { display: block; font-weight: 700; }
.placement-card small { color: var(--muted); }
.language-card { min-width: 96px; padding: 10px 12px; border-radius: 12px; text-align: left; }
.language-card span { display: block; font-weight: 700; font-size: 0.84rem; }
.language-card small { display: block; color: var(--muted); font-size: 0.7rem; margin-top: 2px; }
.wizard-step .language-cards { max-width: 760px; margin: 0 auto; }
.wizard-step .language-card { min-width: 138px; }
.speech-card { padding: 10px 12px; border-radius: 999px; font-size: 0.82rem; }
.swatch-lg.active, .placement-card.active, .language-card.active, .speech-card.active, .feature-card.active,
.big-toggle-option.active, .chip-btn.active {
  border-color: var(--orange); color: var(--text); background: var(--bg-card-2);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--orange), transparent 45%);
}
.big-toggle-row { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; }
.big-toggle-option { width: 170px; padding: 26px 16px; border-radius: 16px; }
.big-toggle-emoji { font-size: 2.2rem; margin-bottom: 10px; }
.big-toggle-label { font-weight: 600; }
.wizard-nav { display: flex; justify-content: space-between; align-items: center; margin: 30px auto 0; max-width: 760px; }
.wizard-nav[hidden] { display: none; }
.wizard-nav .btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }
.wizard-restart { display: block; margin: 18px auto 0; }

.demo-ready { display: block; }
.placement-stage {
  min-height: 620px; max-width: 920px; margin: 0 auto;
  border: 0; border-radius: 20px;
  background: transparent;
  padding: 24px; position: relative; overflow: visible;
}
.placement-stage .demo-widget {
  position: absolute;
  display: flex; flex-direction: column; max-height: calc(100% - 48px);
}
.placement-embed .demo-widget { position: relative; margin: 0 auto; max-width: 560px; min-height: calc(620px - 48px); }
.placement-right .demo-widget { right: 24px; bottom: 24px; width: min(430px, calc(100% - 48px)); top: 24px; }
.placement-left .demo-widget { left: 24px; bottom: 24px; width: min(430px, calc(100% - 48px)); top: 24px; }
.placement-center .demo-widget { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(500px, calc(100% - 48px)); }

.demo-bottom-menu {
  /* 4 placement cards wide: 4 * 150px + 3 * 10px gap, matching .placement-card
     and .placement-cards above so the two rows line up edge to edge. */
  max-width: 630px; margin: 14px auto 0; padding: 12px;
  border: 1px solid var(--border); border-radius: 16px;
  background: color-mix(in srgb, var(--bg-card), transparent 8%);
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 14px; align-items: center;
}
.bottom-control { min-width: 0; display: grid; gap: 8px; }
.bottom-control-label {
  color: var(--muted); font-size: 0.72rem; letter-spacing: 0.7px; text-transform: uppercase;
}
.demo-bottom-menu .swatch-row-lg {
  justify-content: flex-start; flex-wrap: wrap; overflow-x: visible; padding-bottom: 2px;
}
.demo-bottom-menu .swatch-lg {
  width: auto; min-width: 102px; padding: 8px 10px; border-radius: 12px;
}
.demo-bottom-menu .swatch-lg .swatch-dot { height: 24px; border-radius: 8px; margin-bottom: 6px; }
.demo-bottom-menu .swatch-lg .swatch-label { font-size: 0.72rem; white-space: nowrap; }
.demo-buy-cta {
  display: flex;
  justify-content: center;
  margin: 34px auto 0;
}
.btn-xl {
  padding: 16px 34px;
  font-size: 1.35rem;
  box-shadow: 0 18px 36px rgba(240, 82, 47, 0.28);
}

.builder {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  text-align: left;
  align-items: start;
}
.control-block { margin-bottom: 26px; }
.control-label { font-weight: 600; margin-bottom: 10px; font-size: 0.92rem; }
.control-select {
  width: 100%; background: var(--bg-card-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px; color: var(--text); font-size: 0.9rem;
}
.industry-category { font-size: 0.72rem; letter-spacing: 0.5px; color: var(--muted); margin: 12px 0 6px; }
.industry-category:first-child { margin-top: 0; }
.chip-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); background: var(--bg-card);
  border-radius: 999px; padding: 7px 14px; margin: 0 6px 6px 0;
  font-size: 0.84rem; color: var(--muted); cursor: pointer;
}
.chip-btn.active { border-color: var(--orange); color: var(--text); background: var(--bg-card-2); }

.swatch-row { display: flex; gap: 10px; flex-wrap: wrap; }
.swatch {
  width: 76px; padding: 8px; border-radius: 10px; border: 2px solid var(--border);
  cursor: pointer; text-align: center;
}
.swatch.active { border-color: var(--orange); }
.swatch-dot { width: 100%; height: 28px; border-radius: 6px; margin-bottom: 6px; }
.swatch-label { font-size: 0.68rem; color: var(--muted); }

.feature-list { display: flex; flex-direction: column; gap: 8px; }
.feature-list label { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; color: var(--muted); }

.toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.toggle input { display: none; }
.toggle-track {
  width: 40px; height: 22px; background: var(--bg-card-2); border: 1px solid var(--border);
  border-radius: 999px; position: relative; transition: background 0.15s;
}
.toggle-thumb {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--muted); transition: transform 0.15s;
}
.toggle input:checked + .toggle-track { background: var(--orange); }
.toggle input:checked + .toggle-track .toggle-thumb { transform: translateX(18px); background: #1a0f00; }

.demo-widget {
  background: var(--demo-card, var(--bg-card));
  border: 0;
  border-radius: 18px;
  max-width: 560px; margin: 0 auto; text-align: left; overflow: hidden;
  box-shadow:
    0 24px 70px rgba(35, 35, 30, 0.18),
    0 10px 26px rgba(35, 35, 30, 0.11),
    0 0 0 1px rgba(255, 255, 255, 0.68);
  transition: background 0.2s, border-color 0.2s;
}
.demo-widget-header {
  padding: 10px 16px; border-bottom: 1px solid color-mix(in srgb, var(--demo-accent, var(--orange)), var(--border) 75%);
  font-weight: 600; font-size: 0.95rem;
  /* --demo-header-ink lets a skin force header text independently of the
     body's --demo-ink (e.g. a solid-colour header on an otherwise light
     card, which needs white text up top but dark text everywhere else).
     Falls through to the old --demo-ink behaviour when a skin doesn't set
     it, so every existing skin renders exactly as before. */
  color: var(--demo-header-ink, var(--demo-ink, #fff));
  background: var(--demo-header-bg, linear-gradient(135deg, color-mix(in srgb, var(--demo-accent), transparent 84%), transparent));
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Avatar-shaped slot for the business icon, same idea as a company logo
   circle. currentColor-based background/border so it reads on any skin's
   header, from a solid dark gradient to a barely-tinted light wash. */
.demo-widget-avatar {
  width: 2.15rem; height: 2.15rem; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 50%; font-size: 1.05rem; line-height: 1;
  background: color-mix(in srgb, currentColor 16%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}
.demo-widget-title {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.demo-widget-sub {
  flex: 0 0 auto;
  color: var(--demo-header-ink-soft, var(--demo-ink-soft, rgba(255,255,255,0.72)));
  font-size: 0.75rem; font-weight: 400;
  text-align: right; white-space: nowrap;
}
/* Pale accents need dark bubble text: silver on white is 1.6:1. Skins that
   need it set --demo-bubble-ink; everything else keeps white. */
.demo-widget .bubble-right { background: linear-gradient(135deg, var(--demo-accent2, var(--olive)), var(--demo-accent, var(--orange))); color: var(--demo-bubble-ink, #fff); }
.demo-widget .hl { color: var(--demo-accent, var(--orange)); text-decoration: none; }
#sendBtn { background: var(--demo-accent, var(--orange)); }
.mic-btn.recording { background: var(--demo-accent, var(--orange)); }
.demo-window {
  height: 286px; min-height: 150px; overflow-y: auto; padding: 16px; display: flex;
  flex-direction: column; gap: 10px;
  flex: 1 1 auto;
  /* Paper skins paint ruled lines / grid squares here, behind the bubbles.
     Dark skins set nothing, so the widget's own --demo-card shows through. */
  background: var(--demo-paper, transparent);
}
.starter-prompts {
  display: flex; gap: 8px; flex-wrap: wrap; padding: 0 14px 12px;
  flex: 0 0 auto;
}
.prompt-chip {
  border: 1px solid color-mix(in srgb, var(--demo-accent, #fff) 38%, #fff);
  background: rgba(255,255,255,0.94);
  color: #272522; border-radius: 999px; padding: 7px 10px; cursor: pointer;
  font-size: 0.78rem; font-weight: 700;
  box-shadow: 0 4px 14px rgba(0,0,0,0.16);
}
.prompt-chip:hover { background: #fff; border-color: var(--demo-accent, var(--orange)); }
.demo-input-row { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); flex: 0 0 auto; }
.demo-input-row input {
  flex: 1; background: var(--bg-card-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px; color: var(--text); font-size: 0.9rem;
}
.mic-btn {
  background: var(--bg-card-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 0 12px; cursor: pointer; font-size: 1rem;
}
.demo-note { padding: 0 16px 14px; font-size: 0.78rem; color: var(--demo-ink-soft, rgba(255,255,255,0.72)); flex: 0 0 auto; }
/* Empty (and so invisible) unless builder.js actually renders a Turnstile
   widget into it - normally the case even then, since Managed mode only
   shows a visible challenge for a visitor Cloudflare is unsure about. */
#turnstileWidget:empty { display: none; }
#turnstileWidget { padding: 0 16px; flex: 0 0 auto; display: flex; justify-content: center; }
.microcopy { color: var(--muted); font-size: 0.72rem; margin-top: 6px; }
.demo-widget .microcopy { color: var(--demo-ink-soft, rgba(255,255,255,0.68)); }
.demo-privacy-note { padding: 0 16px 14px; text-align: center; }
.voice-reliability-note { max-width: 580px; margin: 12px auto 0; }
.demo-widget .control-block { flex: 0 0 auto; margin: 0; padding: 0 12px 10px; }
.demo-widget .control-block .control-select { padding: 9px 12px; }
.demo-widget .control-block .btn { padding: 9px 14px; }
/* Names the block the way the assistant's own scripted reply names it
   (personas/features.ts) - a visitor told to look for "Request an
   appointment" should see that heading, not just an unlabelled input. */
.control-block-title { font-weight: 700; font-size: 0.85rem; margin-bottom: 8px; }
.demo-widget .control-block-title { color: var(--demo-ink, inherit); }
.photo-bubble { display: grid; gap: 6px; }
.photo-bubble img {
  max-width: 180px; max-height: 120px; border-radius: 8px; object-fit: cover;
  border: 1px solid rgba(255,255,255,0.14);
}
.photo-caption { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.placement-right .starter-prompts,
.placement-left .starter-prompts,
.placement-center .starter-prompts { max-height: 70px; }
.placement-right .photo-bubble img,
.placement-left .photo-bubble img,
.placement-center .photo-bubble img { max-width: 140px; max-height: 82px; }

#pricing {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.pricing-head {
  position: relative;
  z-index: 2;
  max-width: 672px;
  margin-bottom: 34px;
}
/* .section h2's max-width is a % of its immediate parent - undo that here so
   it doesn't compound with .pricing-head's own max-width above (this box IS
   the 60% column; the h2 shouldn't take another 60% cut inside it). */
.pricing-head h2 { max-width: 100%; }
.pricing-head .section-sub { margin-bottom: 0; }
.pricing-mascot {
  position: absolute;
  top: -20px;
  right: -40px;
  z-index: 0;
  width: 480px;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 16px 20px rgba(35,35,30,0.14));
}
.pricing-grid, .addons-box, .pricing-footnote { position: relative; z-index: 1; }
.pricing-grid { align-items: stretch; }
.price-card { display: flex; flex-direction: column; position: relative; }
.price-card-featured {
  border-color: var(--olive);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--olive), transparent 20%), 0 20px 48px rgba(35,35,30,0.09);
}
.price-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: #f0b72f; color: #4a3300; font-size: 0.62rem; font-weight: 900;
  padding: 4px 12px; border-radius: 999px; letter-spacing: 0.5px;
}
.price-tier {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem; letter-spacing: 1.4px; color: #8c887d;
}
.price-tagline { color: var(--muted); font-size: 0.88rem; margin: 4px 0 16px; }
.price-amount { font-size: 2.55rem; font-weight: 800; margin-bottom: 10px; letter-spacing: normal; }
.price-amount span { font-size: 0.9rem; font-weight: 400; color: var(--muted); }
.price-setup { font-size: 0.8rem; color: var(--muted); margin-bottom: 16px; }
.promo-line { color: var(--muted); font-size: 0.74rem; margin: 0 0 24px; }
.promo-line strong {
  display: inline-block; background: #f0b72f; color: #493500;
  border-radius: 5px; padding: 2px 6px; font-size: 0.62rem; margin-right: 4px;
}
.price-features { list-style: none; padding: 0; margin: 0 0 24px; flex: 1; }
.price-features li {
  padding: 8px 0; border-top: 0; font-size: 0.88rem; color: var(--muted);
}
.price-features li::before { content: "✓ "; color: var(--olive); font-weight: 900; }
.soon { color: var(--muted); font-size: 0.82em; font-style: italic; }
.addons-box {
  margin: 36px auto 0; padding: 26px 30px;
  border: 1px dashed var(--border); border-radius: 14px;
  max-width: 960px; background: rgba(255,255,255,0.35);
}
.addons-box p { color: var(--muted); margin: 10px 0 0; font-size: 0.9rem; }
.addons-box strong { color: var(--olive); }
.pricing-footnote {
  text-align: center; color: #9a9589; font-size: 0.78rem; margin: 28px auto 0;
  max-width: 780px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.cta-band {
  max-width: 960px; margin: 128px auto 0; padding: 56px 24px; text-align: center;
  background:
    radial-gradient(circle at 50% 0, rgba(89,107,63,0.16), transparent 55%),
    #f4f6f0;
  border: 1px solid var(--border); border-radius: 18px;
}
.cta-band h2 { font-size: clamp(2rem, 3.8vw, 3.1rem); line-height: 1.2; margin: 0 0 10px; letter-spacing: normal; }
.cta-band p { color: var(--muted); max-width: 50ch; margin: 0 auto; }
.cta-band-actions { justify-content: center; margin-top: 22px; }

.faq-list { max-width: 680px; margin: 44px auto 0; text-align: left; }
#faq { text-align: center; }
/* .section h2's 17ch cap is sized for longer headings elsewhere - short
   enough here that capping it just forces an unwanted wrap on desktop. */
#faq h2 { max-width: none; margin-left: auto; margin-right: auto; }
.faq-item {
  border-top: 1px solid var(--border); padding: 17px 0;
}
.faq-item summary {
  cursor: pointer; font-weight: 600; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; float: right; color: var(--muted); }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { color: var(--muted); margin: 12px 0 0; max-width: 58ch; }

.signup-hero { max-width: 1120px; margin: 0 auto; padding: 56px 24px 0; }
.signup-heading { text-align: center; max-width: 760px; margin: 0 auto 40px; }
.signup-heading h1 { font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.05; margin: 0 0 14px; }
.signup-heading p { color: var(--muted); font-size: 1.04rem; margin: 0 auto; max-width: 66ch; }
.signup-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.9fr); gap: 28px; align-items: start; }
.signup-layout:has(> .signup-form[hidden]) {
  grid-template-columns: minmax(0, 760px);
  justify-content: center;
}
.signup-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.25);
}
.signup-side { display: grid; gap: 18px; position: sticky; top: 88px; }
.signup-layout:has(> .signup-form[hidden]) .signup-side {
  position: static;
  width: 100%;
}
.signup-card h2 { font-size: 1.15rem; margin: 0 0 8px; }
.signup-card p { color: var(--muted); margin: 0 0 18px; }
.signup-form { text-align: left; }
.form-group { padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px dashed var(--border); }
.form-group:last-of-type { border-bottom: 0; margin-bottom: 20px; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: block; margin-bottom: 18px; }
/* Needed because the rule above beats the browser's own [hidden] rule on
   specificity, so setting .hidden = true in JS did nothing and the "are you on
   a paid plan" question stayed visible for every platform. Same fix pattern as
   .wizard[hidden] and .wizard-nav[hidden] above. */
.field[hidden] { display: none; }
.field > span { display: block; font-size: 0.88rem; margin-bottom: 6px; color: var(--muted); }
.field .required-marker { display: inline; color: var(--orange); }
.field input, .field select, .field textarea {
  width: 100%; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 8px; padding: 11px 12px; color: var(--text); font-size: 0.92rem;
  font-family: inherit;
}
.signup-card .field input, .signup-card .field select, .signup-card .field textarea {
  background: var(--bg);
}
.field textarea { resize: vertical; }
.plan-options { display: grid; gap: 12px; }
.plan-option {
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start;
  border: 1px solid var(--border); border-radius: 12px; padding: 16px; cursor: pointer;
  background: rgba(255, 255, 255, 0.015);
}
.plan-option:hover, .plan-option:has(input:checked) { border-color: rgba(249, 115, 22, 0.75); }
/* Post-payment: the plan is fixed, so the alternatives read as unavailable
   rather than merely unselected. The hover rule above is overridden too, or a
   locked row still lights up under the cursor and looks clickable. */
.plan-option-locked, .plan-option-locked:hover {
  opacity: 0.45;
  cursor: not-allowed;
  border-color: var(--border);
}
.plan-option-featured { background: linear-gradient(135deg, rgba(249, 115, 22, 0.08), rgba(59, 109, 240, 0.05)); }
.plan-option strong { display: block; color: var(--text); }
.plan-option small { display: block; color: var(--muted); margin-top: 4px; }
.plan-option b { white-space: nowrap; font-size: 0.9rem; }
.plan-option em {
  display: inline-block; margin-left: 6px; padding: 2px 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--orange), transparent 70%); color: var(--text);
  font-size: 0.62rem; letter-spacing: 0.8px; font-style: normal;
}
.check-list { display: grid; gap: 12px; margin: 8px 0 18px; }
.check-row { display: grid; grid-template-columns: auto 1fr; gap: 12px; color: var(--muted); font-size: 0.9rem; }
.check-row input { margin-top: 4px; }
.check-row a { color: var(--text); font-weight: 600; }
.language-checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.language-checks label {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px;
  border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 12px; color: var(--muted); font-size: 0.9rem;
  line-height: 1.25;
  background: var(--bg);
  cursor: pointer;
}
.language-checks label:has(input:checked) {
  border-color: color-mix(in srgb, var(--orange), transparent 35%);
  background: color-mix(in srgb, var(--orange), transparent 92%);
  color: var(--text);
}
.language-checks input {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--orange);
}
.trial-callout {
  border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px;
  background: rgba(255, 255, 255, 0.02); color: var(--muted); font-size: 0.9rem;
}
.trial-callout strong { display: block; color: var(--text); margin-bottom: 4px; }
.next-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 18px; }
.next-steps li { counter-increment: step; display: grid; grid-template-columns: 28px 1fr; gap: 12px; }
.next-steps li::before {
  content: counter(step); width: 24px; height: 24px; border-radius: 50%;
  background: color-mix(in srgb, var(--orange), transparent 72%); color: var(--text);
  display: grid; place-items: center; font-weight: 700; font-size: 0.78rem;
  grid-row: 1 / span 2;
}
.next-steps strong { display: block; }
.next-steps span { display: block; grid-column: 2; color: var(--muted); font-size: 0.9rem; }
.benefit-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; color: var(--muted); }
.benefit-list li::before { content: "✓ "; color: var(--orange); }
.signup-note { margin-top: 12px; text-align: center; color: var(--muted); font-size: 0.85rem; }
.signup-success { text-align: left; }
.signup-success h2, .signup-success h3 { font-size: 1.35rem; }
.signup-success p { color: var(--muted); }

.payment-section {
  max-width: 760px;
  margin: 0 auto;
  padding: 72px 24px 0;
}
.payment-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: clamp(28px, 5vw, 48px);
  text-align: center;
  box-shadow: 0 30px 80px rgba(35, 35, 30, 0.16);
}
.payment-card h1 {
  font-size: clamp(2rem, 5vw, 3.1rem);
  line-height: 1.06;
  letter-spacing: normal;
  margin: 18px 0 12px;
}
.payment-intro,
.payment-note {
  color: var(--muted);
  margin: 0 auto 24px;
}
.payment-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  text-align: left;
  margin: 28px 0;
  padding: 22px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
}
.payment-summary h2 {
  font-size: 1.45rem;
  margin: 0 0 4px;
}
.payment-summary p {
  color: var(--muted);
  margin: 0;
}
.payment-price {
  font-size: 2.4rem;
  font-weight: 900;
  letter-spacing: normal;
  white-space: nowrap;
}
.payment-price span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0;
}
.payment-features {
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
  text-align: left;
  display: grid;
  gap: 10px;
  color: var(--muted);
}
.payment-features li::before {
  content: "✓ ";
  color: var(--olive);
  font-weight: 900;
}
.payment-note {
  margin-top: 16px;
  margin-bottom: 0;
  font-size: 0.9rem;
}

.footer {
  max-width: 1120px; margin: 88px auto 0; padding: 32px 24px 60px;
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--border); color: var(--muted); font-size: 0.85rem;
}

.legal-page { max-width: 760px; text-align: left; }
.legal-page .badge-center { margin-left: 0; }
.legal-page h2 { text-align: left; margin-left: 0; }
.legal-body h3 { font-size: 1.05rem; margin: 28px 0 8px; }
.legal-body h3:first-child { margin-top: 0; }
.legal-body p { color: var(--muted); margin: 0 0 4px; }
.legal-body a { color: var(--orange); }

.footer-full {
  max-width: none; margin: 72px auto 0; padding: 68px 24px 32px;
  border-top: 1px solid var(--border);
}
.footer-top {
  max-width: 1120px; margin: 0 auto 58px;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 24px;
  text-align: left;
}
.footer-brand p { color: var(--muted); font-size: 1rem; margin: 34px 0 0; max-width: 28ch; }
.footer-col-title {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem; letter-spacing: 1.8px; color: #9a9589; margin-bottom: 20px; font-weight: 900;
}
.footer-col a {
  display: block; color: var(--muted); text-decoration: none; font-size: 1rem;
  margin-bottom: 16px;
}
.footer-col a:hover { color: var(--text); }
.footer-bottom {
  max-width: 1120px; margin: 0 auto;
  padding-top: 26px; border-top: 1px solid var(--border);
  color: #9a9589; font-size: 0.82rem; letter-spacing: 0.8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-transform: uppercase;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}

@media (max-width: 860px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand p { max-width: none; }
}

@media (max-width: 1100px) {
  .pricing-mascot {
    width: 380px;
    right: -30px;
  }
}

@media (max-width: 900px) {
  .pricing-mascot { display: none; }
}

@media (max-width: 860px) {
  #faq h2 { max-width: none; }
  #features h2 { max-width: 30ch; }
  .how-title h2 { max-width: 24ch; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  /* Feature cards stack like a deck as you scroll: the intro pins first,
     then each card sticks at a slightly lower point than the last, arriving
     over the one before it. Same trick as .wizard-nav above (position:
     sticky, no JS) - the small top increment per card is what makes each
     one visibly slide in over the last instead of just swapping places. */
  /* overflow-anchor: none stops the browser's scroll-anchoring heuristic from
     fighting this effect. Anchoring tries to keep whatever's under the
     viewport stable when off-screen content resizes (here, lazy-loaded card
     images resolving their size) - but the anchor node lives inside a
     position:sticky element whose own position depends on scroll, so the
     "correction" feeds back into more scroll and the page rockets forward. */
  #features { position: relative; overflow-anchor: none; }
  #features .grid { gap: 16px; }
  .features-intro {
    position: sticky;
    top: 124px;
    z-index: 1;
    background: var(--bg);
    padding: 20px 0 16px;
  }
  #features .card {
    position: sticky;
    border-radius: 18px;
  }
  /* Same `top` on every card (rather than a small per-card increment) so
     each one settles flush over the last instead of leaving a permanent
     sliver of it peeking out - it still slides up into place on the way
     in, just with nothing left showing once it's pinned. */
  #features .card:nth-of-type(1) { top: 124px; z-index: 2; }
  #features .card:nth-of-type(2) { top: 124px; z-index: 3; }
  #features .card:nth-of-type(3) { top: 124px; z-index: 4; }
  #features .card:nth-of-type(4) { top: 124px; z-index: 5; margin-bottom: 40px; }
  /* Pricing cards used the same sticky-stack trick as #features, but unlike
     the feature cards these can run taller than the viewport (the featured
     plan's badge/extra copy pushes it past screen height on narrow phones).
     A sticky element taller than the viewport never fully scrolls past its
     `top` offset, so it pins in place and permanently covers whatever comes
     after it. Plain stacked cards instead. */
  #pricing .pricing-grid { gap: 16px; }
  #pricing .price-card { border-radius: 18px; }
  .how-grid { grid-template-columns: 1fr; }
  .builder { grid-template-columns: 1fr; }
  .signup-layout { grid-template-columns: 1fr; }
  .signup-side { position: static; }
  .section { padding: 56px 20px 0; }
  .placement-stage { min-height: 560px; padding: 16px; }
  .demo-bottom-menu { grid-template-columns: 1fr; }
  .placement-stage .demo-widget,
  .placement-right .demo-widget,
  .placement-left .demo-widget,
  .placement-center .demo-widget {
    left: 16px; right: 16px; bottom: 16px; top: auto; transform: none; width: auto;
  }
  .placement-embed .demo-widget { position: relative; left: auto; right: auto; bottom: auto; margin: 0 auto; width: auto; min-height: calc(560px - 32px); }
  .wizard-nav {
    position: sticky; bottom: 0; background: color-mix(in srgb, var(--bg), transparent 8%);
    padding: 12px 0; backdrop-filter: blur(8px); z-index: 5;
  }
}

@media (max-width: 600px) {
  .nav-links { display: none; }
  .nav-muted { display: none; }
  .nav-inner { padding: 9px 16px; gap: 12px; }
  /* 178px keeps the logo's native 2.5:1 aspect ratio, scaling its height
     down alongside the padding above so the sticky mobile header is ~25%
     shorter overall than the 237px desktop lockup produces here. */
  .nav .logo-wordmark { width: 178px; }
  .nav-actions .btn:not(:last-child) { display: none; }
  .problem-band p { font-size: 1.15rem; }
  .hero { grid-template-columns: 1fr; padding-top: 32px; gap: 0; }
  /* display: contents un-boxes hero-copy so its children and hero-demo
     share one ordering context - lets the chat card slot in between the
     lede and the CTAs instead of only being movable as a whole block.
     gap: 0 above turns off the grid row-gap so it stops stacking on top of
     each child's own margin - spacing here comes only from those margins,
     plus the hero-demo margin below for the chat card specifically.
     Only at true phone widths - tablet and up use the same side-by-side
     grid as desktop instead of stacking. */
  .hero-copy { display: contents; }
  .hero-copy .badge { order: 1; }
  .hero-copy h1 { order: 2; }
  .hero-copy .lede { order: 3; }
  .hero-demo { order: 4; margin: 20px 0; }
  .hero-copy .hero-ctas { order: 5; margin-top: 4px; }
  .hero-copy .trust-line { order: 6; }
  .hero-copy .phone-line { order: 7; }
  /* The hero badge is much longer than the other section badges ("KEY
     FEATURES" etc.), so it's the only one that wraps at phone widths -
     scoped here rather than shrinking every badge on the page. */
  /* width: fit-content undoes the stretch every other .hero-copy child wants:
     as a grid item (via .hero-copy's display:contents above) it defaults to
     filling the row, leaving the pill much wider than its text with a gap
     after "NIGHT" instead of hugging it. max-width/min-width keep that
     fit-content sizing from exceeding the grid track: without them this sat
     ~2px under the track width in testing, so slightly wider system-font
     metrics on a real phone (vs. the browser used to tune the number) push it
     past 375px and force the whole page to scroll horizontally. Letting it
     wrap to two lines here is the actual guard; nowrap only masked that the
     single-line fit was never reliably safe. */
  .hero-copy .badge { font-size: 0.64rem; letter-spacing: 1px; padding: 5px 11px; width: fit-content; max-width: 100%; min-width: 0; }
  .nav-actions .btn { padding: 9px 12px; font-size: 0.82rem; text-align: center; white-space: nowrap; flex-shrink: 0; }
  .section h2, .how-title h2, .cta-band h2 { font-size: 1.75rem; line-height: 1.16; letter-spacing: normal; }
  .card { display: flex; flex-direction: column; align-items: flex-start; min-height: 0; }
  .card-icon { width: 141px; height: 141px; margin: 8px auto 18px; align-self: center; }
  .card .tag { width: 100%; margin-bottom: 16px; }
  .signup-hero { padding: 40px 16px 0; }
  .signup-card { padding: 20px; }
  .form-grid-2 { grid-template-columns: 1fr; gap: 0; }
  .plan-option { grid-template-columns: auto 1fr; }
  .plan-option b { grid-column: 2; }
  .payment-summary { grid-template-columns: 1fr; text-align: center; }
  .demo-intro h1 { font-size: 1.9rem; }
  .demo-intro-actions .btn, .wizard-nav .btn { width: 100%; text-align: center; }
  .wizard-nav { gap: 10px; }
  .swatch-lg, .placement-card, .language-card, .speech-card, .big-toggle-option, .feature-card, .chip-btn { width: 100%; justify-content: center; }
  /* Industry options stay inline on mobile - full-width would turn 17 trades
     into 17 stacked rows and bury the categories below it. */
  .industry-row { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px 0; }
  .industry-row-label { padding-top: 0; }
  .industry-row-options .chip-btn { width: auto; }
  .demo-bottom-menu { grid-template-columns: 1fr; }
  .demo-bottom-menu .swatch-lg { width: auto; }
  .demo-input-row { flex-wrap: wrap; }
  .demo-input-row input { min-width: 100%; order: -1; }
  .demo-input-row .btn { flex: 1; text-align: center; }
  .mic-btn { min-height: 42px; }
  .footer-bottom span { font-size: 0.68rem; white-space: nowrap; }
}

/* Detection status under the platform question. Olive rather than muted grey so
   a filled-in answer is noticed - the visitor needs to see it happened in order
   to correct it. */
/* Shares the right-hand grid cell with the paid-plan question. */
.platform-side { display: block; }
/* Sits beside the select, not under the whole grid, so it reads as an answer to
   the field on its left. The top padding lines it up with the select itself
   rather than with that field's label. Not .microcopy: at 0.72rem this was
   easy to miss, and a visitor who does not notice we filled the answer in
   cannot correct it. */
.platform-detect-note {
  color: var(--olive);
  font-weight: 700;
  font-size: 0.88rem;
  line-height: 1.4;
  padding-top: 26px;
}
/* When the plan question is showing, the note follows it instead of aligning
   to the top of the column. */
#platformPlanField:not([hidden]) + .platform-detect-note { padding-top: 4px; }
.platform-detect-note.is-working { color: var(--muted); font-weight: 400; }

@media (max-width: 600px) {
  /* The columns stack, so there is no select to align with any more. */
  .platform-detect-note { padding-top: 4px; }
}

/* Hero conversation slides. Two examples, one at a time, switched by the dots
   below - the after-hours booking and the photo estimate are the two things a
   tradie most wants to see working before they read any copy. */
.hero-demo { position: relative; }
.hero-dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.hero-dot {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%;
  background: var(--border); cursor: pointer; transition: background .18s, transform .18s;
}
.hero-dot:hover { background: var(--muted); }
.hero-dot.is-active { background: var(--olive); transform: scale(1.25); }
.hero-dot:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; }
/* The photo a visitor sent, shown as the attachment chip the chat actually
   renders rather than a stock image pretending to be their window. */
.chat-attachment { display: flex; flex-direction: column; gap: 8px; padding: 8px; }
.chat-photo { display: block; width: 100%; max-width: 210px; height: auto; border-radius: 8px; }
.chat-filename { font-size: .85rem; line-height: 1.25; padding: 0 4px 2px; }
.chat-filename small { display: block; opacity: .75; font-size: .76rem; }
  .plan-extras { margin-top: 28px; padding: 22px 26px; border: 1px solid var(--line, #e3e6ea); border-radius: 16px; background: #fbfaf7; position: relative; z-index: 1; }
  .plan-extras .footer-col-title { margin-bottom: 12px; }
  .plan-extras ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px 28px; }
  .plan-extras li { font-size: .9rem; line-height: 1.5; padding-left: 20px; position: relative; }
  .plan-extras li::before { content: "✓"; position: absolute; left: 0; color: var(--olive); font-weight: 900; }
  .plan-extras li strong { color: var(--olive); }
  .build-caveat { margin: 8px 0 0; font-size: .78rem; line-height: 1.45; color: var(--muted, #6b7280); }
  .addon-section { margin-top: 36px; padding: 28px 30px; border: 1px solid var(--line, #e3e6ea); border-radius: 18px; background: #fff; position: relative; z-index: 1; }
  .addon-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; }
  .addon-head h3 { margin: 8px 0 0; font-size: 1.35rem; }
  .addon-price-tag { font-size: 1.9rem; font-weight: 800; white-space: nowrap; color: var(--olive, #4b5320); }
  .addon-price-tag span { display: block; text-align: right; font-size: .8rem; font-weight: 600; color: var(--muted, #6b7280); }
  .addon-cards { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-top: 20px; }
  .addon-card { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--line, #e3e6ea); border-radius: 12px; background: #fbfaf7; }
  .addon-card h4 { margin: 0; font-size: .98rem; }
  .addon-card p { margin: 0; font-size: .85rem; line-height: 1.5; color: var(--muted, #6b7280); flex: 1; }
  .addon-tag { align-self: flex-start; margin-top: 4px; padding: 2px 8px; border-radius: 999px; background: #e9efe3; color: #3f5a1f; font-size: .72rem; font-weight: 700; }
  .addon-tag.alt { background: #f1f0ea; color: #5b5b4f; font-weight: 600; }
  .addon-card.coming-soon { background: transparent; border-style: dashed; }
  .addon-tag.soon { background: transparent; border: 1px dashed #9a9589; color: #6b6558; }
  .addon-maths { margin: 18px 0 0; font-size: .88rem; line-height: 1.5; }
  .addon-note { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line, #e3e6ea); font-size: .86rem; color: var(--muted, #6b7280); }
  .addon-hint { opacity: .8; font-style: italic; }
  @media (max-width: 1000px) { .addon-cards { grid-template-columns: repeat(2, minmax(0,1fr)); } }
  @media (max-width: 760px) { .plan-extras ul, .addon-cards { grid-template-columns: 1fr; } }

/* The skip beside Next in the demo wizard. Deliberately not a button shape:
   it is the escape hatch for someone who does not want to answer three
   questions, and it must not compete with Next for the eye. */
.btn-link { background: none; border: 0; padding: 0 4px; color: var(--muted, #6b7280); font-size: .85rem; text-decoration: underline; cursor: pointer; }
.btn-link:hover { color: var(--olive, #4b5320); }
.btn-link:disabled { opacity: .45; cursor: default; }
.wizard-nav { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.wizard-nav .btn-link { margin-left: auto; }

/* .btn sets display:inline-block, which beats the [hidden] attribute's default
   and left "Back" showing on step 1 of the demo. Nothing marked hidden should
   ever render, whatever a component rule says. */
[hidden] { display: none !important; }

/* Pricing lists are terse noun phrases now, so each card gets the one line of
   context that used to be repeated inside every bullet. */
.price-lead { margin: 14px 0 8px; font-size: .85rem; color: var(--muted, #6b7280); }

/* Adobe is where our designer draws, not something the service runs on, so it
   is a credit rather than a line in the "powered by" strip. A visitor reading
   Adobe beside Airwallex would reasonably think it processes something. */
.footer-credit { display: block; margin-top: 4px; opacity: .8; }
.footer-credit a { color: inherit; }

/* Mistral's guidelines set a 100px minimum width for the primary lockup and
   define clearspace as one symbol height on every side, so the logo tiles get
   their own padding rather than borrowing the text tiles'. The gradient is
   their default and is only forbidden on coloured or photo backgrounds - this
   tile is a light neutral, and the wordmark inside stays their #151524. */
/* What replaced the vendor logo strip. Airwallex earns its place: a stranger about
   to type a card number into an unknown NZ company has a real question, and
   this answers it. The four AI vendors did not - to a plumber, "Anthropic,
   OpenAI, Mistral, Google Gemini" is not reassurance, it is the opening for
   "so it is just ChatGPT, why am I paying you?" - so the resilience claim stays
   as a sentence and the provider list lives on the privacy page, where a
   careful customer looks and where disclosure belongs anyway. */
.trust-strip { max-width: 680px; margin: 26px auto 0; padding: 0 20px; text-align: center; }
.trust-strip p { margin: 0 0 8px; font-size: .86rem; line-height: 1.6; color: var(--muted, #6b7280); }
.trust-strip strong { color: #2c3130; }
.trust-strip a { color: inherit; text-decoration: underline; }

/* about.html: the two-person team section and the mission line beneath the
   intro paragraph. Reuses .section, .badge, .grid-2 and the card surface
   tokens everything else on the site already uses, rather than inventing a
   second visual language for one page. */
/* .section h2's 17ch cap wraps this particular heading to 3 lines; it only
   needs two, and the sentence break after "Adaptable." is the natural spot
   for that second line to start. */
.about-intro h2 { max-width: 26ch; }
.about-lede { font-size: 1.15rem; font-weight: 700; color: var(--olive); margin: 0 0 42px; max-width: 56ch; }
/* The intro's lede already closes the thought; the default section rhythm made
   the team heading feel detached below it. Keep room to breathe without a
   second full section-sized gap. */
#team { padding-top: 38px; }
.team-grid { align-items: start; margin-top: 8px; }
.team-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
  padding: 28px; box-shadow: 0 12px 28px rgba(35, 35, 30, 0.06);
}
.team-avatar {
  width: 104px; height: 104px; border-radius: 50%; object-fit: cover; display: block;
  margin-bottom: 16px; box-shadow: 0 6px 16px rgba(35, 35, 30, 0.14);
}
.team-role {
  display: inline-block; font-size: 0.68rem; letter-spacing: 1.6px; text-transform: uppercase;
  color: #7f8871; background: var(--olive-soft); border-radius: 7px; padding: 5px 12px;
  margin-bottom: 10px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 800;
}
.team-card h3 { margin: 0 0 12px; font-size: 1.3rem; letter-spacing: normal; }
.team-card p { color: var(--muted); margin: 0 0 12px; font-size: 0.94rem; line-height: 1.6; }
.team-card p:last-child { margin-bottom: 0; }
.about-why { text-align: center; padding-bottom: 20px; }
.about-why .badge { margin: 0 auto 20px; }
.about-why-copy { max-width: 62ch; margin: 0 auto; font-size: 1.2rem; line-height: 1.5; color: var(--olive); font-weight: 600; }

/* contact.html: a single narrow card, the same width as the legal pages,
   rather than the two-column .signup-layout - there is no side panel here. */
.contact-page { max-width: 640px; text-align: left; }
.contact-page .badge-center { margin-left: 0; }
.contact-form { margin-top: 28px; }
.contact-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }
.contact-success { margin-top: 28px; padding: 28px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; }
.contact-success h3 { margin: 0 0 8px; }
.contact-success p { color: var(--muted); margin: 0; }