/* generated by build/prepare.mjs */
@font-face{font-family:"AIR Display";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/air-display.woff2) format("woff2");unicode-range:U+0020-007E, U+00A0-00A5, U+00A7-00AB, U+00AE-00B4, U+00B6-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0306, U+0308, U+0401, U+0404, U+0406-0407, U+040E, U+0410-044F, U+0451, U+0454, U+0456-0457, U+045E, U+0490-0491, U+2009-200B, U+2011, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+202F-2030, U+2032-2033, U+2039-203A, U+2060, U+20AC, U+20BD, U+2122, U+2190-2194, U+2212, U+2248, U+2260, U+2264-2265}
@font-face{font-family:"AIR Display";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/air-display-ext.woff2) format("woff2");unicode-range:U+0100-0130, U+0132-0151, U+0154-017E, U+018F, U+0218-021B, U+0259, U+0302-0304, U+0307, U+030C, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+0400, U+0402-0403, U+0405, U+0408-040D, U+040F, U+0450, U+0452-0453, U+0455, U+0458-045D, U+045F, U+0492-0493, U+0496-049B, U+04A0-04A3, U+04AA-04AB, U+04AE-04B3, U+04B6-04B7, U+04BA-04BB, U+04C0, U+04D8-04D9, U+04E2-04E3, U+04E8-04E9, U+04EE-04EF, U+1E9E, U+2070, U+2074-207B, U+207D-207E, U+2080-208B, U+208D-208E, U+2153-2154, U+215B-215E, U+2195-2199}
@font-face{font-family:"AIR Text";font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/air-text.woff2) format("woff2");unicode-range:U+0020-007E, U+00A0-00AC, U+00AE-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0306, U+0308, U+0401, U+0404, U+0406-0407, U+040E, U+0410-044F, U+0451, U+0454, U+0456-0457, U+045E, U+0490-0491, U+2009-200B, U+2010-2011, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+202F-2030, U+2032-2033, U+2039-203A, U+2060, U+20AC, U+20BD, U+2116, U+2122, U+2190-2194, U+2212, U+221E, U+2248, U+2260, U+2264-2265, U+2318, U+2325}
@font-face{font-family:"AIR Text";font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/air-text-ext.woff2) format("woff2");unicode-range:U+0100-0130, U+0132-0148, U+014A-0151, U+0154-017F, U+018F, U+0192, U+0218-021B, U+0259, U+02BB-02BC, U+0302-0304, U+0307, U+030C, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+0400, U+0402-0403, U+0405, U+0408-040D, U+040F, U+0450, U+0452-0453, U+0455, U+0458-045D, U+045F, U+0492-0493, U+0496-049B, U+04A0-04A3, U+04AA-04AB, U+04AE-04B3, U+04B6-04B7, U+04BA-04BB, U+04C0, U+04D8-04D9, U+04E2-04E3, U+04E8-04E9, U+04EE-04EF, U+1E9E, U+2070-2071, U+2074-208E, U+2150-215E, U+2195-2199, U+21D2, U+21D4, U+2202, U+2205-2206, U+220F, U+2211, U+221A, U+222B, U+2303, U+232B, U+2713}

/* AIR Bots SEO landings. Tokens follow air-bots-prototype/landing/src/styles/landing.css (D-036):
   raw palette is theme-stable, semantic surface tokens flip with the OS theme.
   AIR Text is Inter-based and reads smaller than the reference face, so body starts at 18 px, 20 px on desktop. */

/* Layer 1, raw and theme-stable */
:root {
  --stone: #F6F4EF;
  --ink: #19171E;
  --night: #111111;
  --paper: #F6F6F6;
  --white: #FFFFFF;
  --lilac: #A77AFF;
  --fill-mint: #5FDBBB;
  --fill-orange: #FFA953;
  --fill-coral: #FF526B;
  --fill-yellow: #F9D361;
  --fill-lime: #A4E879;
  --fill-emerald: #38BC7D;
  --fill-sky: #65BEF6;
  --fill-pink: #E89AD7;
  --fill-violet: #B99BFF;
  --fill-olive: #C9CF6E;

  --radius-stage: 32px;
  --radius-card: 24px;
  --gutter: 20px;
  --section: 64px;

  --font-display: "AIR Display", "AIR Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-text: "AIR Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --type-body: clamp(1.125rem, 1.05rem + .3vw, 1.25rem);
  --type-small: 1rem;
  --type-h1: clamp(2.5rem, 1.5rem + 4.4vw, 6.25rem);
  --type-h2: clamp(2rem, 1.2rem + 2.8vw, 4.25rem);
  --type-h3: clamp(1.5rem, 1.15rem + 1.2vw, 2.25rem);
}

/* Layer 2, semantic */
:root {
  color-scheme: light dark;
  --surface-canvas: var(--stone);
  --surface-elevated: var(--white);
  --surface-sunken: #ECE9E1;
  --text-primary: var(--ink);
  --text-secondary: #5F5B66;
  --border: rgb(25 23 30 / .14);
  --focus: var(--ink);
  --button-bg: var(--ink);
  --button-text: var(--stone);
}
@media (prefers-color-scheme: dark) {
  :root {
    --surface-canvas: var(--night);
    --surface-elevated: #1B1B1D;
    --surface-sunken: #0B0B0B;
    --text-primary: var(--paper);
    --text-secondary: #B4B4BB;
    --border: rgb(246 246 246 / .16);
    --focus: var(--paper);
    --button-bg: var(--paper);
    --button-text: var(--night);
  }
}
@media (min-width: 640px) { :root { --gutter: clamp(20px, 3.33vw, 48px); --section: 88px; } }
@media (min-width: 1024px) { :root { --section: 112px; --radius-stage: 40px; } }

/* Fills: everything inside reads in ink in either theme */
[data-fill] { background-color: var(--fill); color: var(--ink); --focus: var(--ink); --button-bg: var(--ink); --button-text: var(--stone); --text-secondary: rgb(25 23 30 / .78); --border: rgb(25 23 30 / .16); }
[data-fill="mint"] { --fill: var(--fill-mint); }
[data-fill="orange"] { --fill: var(--fill-orange); }
[data-fill="coral"] { --fill: var(--fill-coral); }
[data-fill="yellow"] { --fill: var(--fill-yellow); }
[data-fill="lime"] { --fill: var(--fill-lime); }
[data-fill="emerald"] { --fill: var(--fill-emerald); }
[data-fill="sky"] { --fill: var(--fill-sky); }
[data-fill="pink"] { --fill: var(--fill-pink); }
[data-fill="violet"] { --fill: var(--fill-violet); }
[data-fill="olive"] { --fill: var(--fill-olive); }

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
  margin: 0;
  background: var(--surface-canvas);
  color: var(--text-primary);
  font: 400 var(--type-body)/1.5 var(--font-text);
  overflow-x: clip;
  text-wrap: pretty;
}
h1, h2, h3, dt, th, summary, .btn, .bubble, .lead, .card p, .note { text-wrap: balance; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 500; }
p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
svg { display: block; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.wrap { width: min(100%, 1280px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: 12px; top: -80px; z-index: 50; padding: 12px 20px; border-radius: 999px; background: var(--button-bg); color: var(--button-text); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

.h1 { font-size: var(--type-h1); line-height: 1.02; letter-spacing: -.022em; }
.h2 { font-size: var(--type-h2); line-height: 1.06; letter-spacing: -.02em; }
.h3 { font-size: var(--type-h3); line-height: 1.15; letter-spacing: -.012em; }
.lead { max-width: 42ch; margin-top: 24px; color: var(--text-secondary); }
.muted { color: var(--text-secondary); }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 28px; border-radius: 999px;
  background: var(--button-bg); color: var(--button-text);
  font: 600 1.125rem/1 var(--font-text); text-decoration: none;
  transition: transform .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn svg { width: 20px; height: 20px; }
.btn-sm { min-height: 44px; padding: 0 20px; font-size: 1rem; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 36px; }
.cta-note { font-size: var(--type-small); color: var(--text-secondary); max-width: 34ch; }

/* ---------------------------------------------------------------- nav */
.nav { position: sticky; top: 0; z-index: 20; padding-block: 12px; background: color-mix(in srgb, var(--surface-canvas) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 500 1.25rem/1 var(--font-display); text-decoration: none; }
.brand svg { width: 30px; height: 30px; }
.nav-links { display: none; gap: 28px; font-size: 1rem; }
.nav-links a { text-decoration: none; color: var(--text-secondary); }
.nav-links a:hover { color: var(--text-primary); }
@media (min-width: 900px) { .nav-links { display: flex; } }

/* ---------------------------------------------------------------- sections */
.section { padding-block: var(--section); }
.section-head { display: grid; gap: 0; margin-bottom: 48px; }
.section-head .lead { margin-top: 20px; }

/* hero: stage, a coloured panel with a large character */
.hero { padding-top: 8px; }
.stage { display: grid; border-radius: var(--radius-stage); overflow: hidden; }
.stage-text { padding: 40px 28px 44px; display: flex; flex-direction: column; justify-content: center; }
.stage-art { display: grid; place-items: center; padding: 32px; min-height: 280px; }
.stage-art .char { width: min(72%, 360px); }
@media (min-width: 900px) {
  .stage { grid-template-columns: 1.15fr .85fr; min-height: 620px; }
  .stage-text { padding: 72px 64px; }
}
.stage[data-flip] .stage-art { order: -1; }
@media (min-width: 900px) { .stage[data-flip] { grid-template-columns: .85fr 1.15fr; } }

/* hero: centred title with a row of characters */
.hero-centre { text-align: center; padding-block: 48px var(--section); }
.hero-centre .h1 { max-width: 16ch; margin-inline: auto; }
.hero-centre .lead { margin-inline: auto; max-width: 46ch; }
.hero-centre .cta-row { justify-content: center; }
.hero-centre .cta-note { margin-inline: auto; text-align: center; }
.char-row { display: flex; justify-content: center; align-items: flex-end; gap: clamp(8px, 2vw, 24px); margin-bottom: 40px; }
.char-row .char { width: clamp(56px, 11vw, 132px); }
.char-row .char:nth-child(2n) { width: clamp(72px, 14vw, 168px); }

/* hero: text beside a chat sample */
.hero-chat .wrap { display: grid; gap: 40px; align-items: center; padding-block: 40px var(--section); }
@media (min-width: 960px) { .hero-chat .wrap { grid-template-columns: 1fr 1fr; gap: 64px; } }

/* chat sample */
.chat { border-radius: var(--radius-card); padding: 24px; display: grid; gap: 12px; }
.chat-head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.chat-head .char { width: 44px; }
.chat-name { font-weight: 600; }
.chat-sub { font-size: var(--type-small); color: var(--text-secondary); }
.bubble { max-width: 88%; padding: 14px 18px; border-radius: 22px; font-size: 1.125rem; line-height: 1.45; }
.bubble.me { justify-self: end; background: var(--ink); color: var(--stone); border-bottom-right-radius: 8px; }
.bubble.bot { justify-self: start; background: var(--white); color: var(--ink); border-bottom-left-radius: 8px; }
.chat:not([data-fill]) { background: var(--surface-elevated); border: 1px solid var(--border); }
.chat:not([data-fill]) .bubble.bot { background: var(--surface-sunken); color: var(--text-primary); }
@media (prefers-color-scheme: dark) { .chat:not([data-fill]) .bubble.me { background: var(--paper); color: var(--night); } }
.chat-caption { margin-top: 12px; font-size: var(--type-small); color: var(--text-secondary); }

/* explainer: what the other product is */
.explain { display: grid; gap: 32px; }
@media (min-width: 900px) { .explain { grid-template-columns: .9fr 1.1fr; gap: 72px; } }
.explain-body { display: grid; gap: 20px; }
.facts { display: grid; gap: 0; border-top: 1px solid var(--border); }
.facts div { display: grid; gap: 4px; padding-block: 16px; border-bottom: 1px solid var(--border); }
@media (min-width: 640px) { .facts div { grid-template-columns: 200px 1fr; gap: 24px; } }
.facts dt { font-weight: 600; text-wrap: balance; }
.facts dd { color: var(--text-secondary); }

/* cards */
.cards { display: grid; gap: 20px; }
@media (min-width: 700px) { .cards { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
.cards[data-cols="3"] { }
@media (min-width: 1100px) { .cards[data-cols="3"] { grid-template-columns: repeat(3, 1fr); } }
.card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 32px 28px 28px; border-radius: var(--radius-card); min-height: 300px; }
.card:not([data-fill]) { background: var(--surface-elevated); border: 1px solid var(--border); }
.card .h3 { max-width: 18ch; }
.card p { color: var(--text-secondary); max-width: 36ch; }
.card .char { width: 88px; margin-top: auto; align-self: flex-end; }
.card .example { margin-top: 8px; padding: 14px 16px; border-radius: 16px; background: rgb(255 255 255 / .72); color: var(--ink); font-size: 1rem; line-height: 1.45; max-width: 40ch; }
.card:not([data-fill]) .example { background: var(--surface-sunken); color: var(--text-primary); }

/* comparison table */
.compare-wrap { overflow-x: auto; border-radius: var(--radius-card); border: 1px solid var(--border); background: var(--surface-elevated); }
.compare { width: 100%; border-collapse: collapse; min-width: 560px; }
.compare caption { text-align: left; padding: 20px 24px 0; color: var(--text-secondary); font-size: var(--type-small); caption-side: bottom; padding-bottom: 20px; }
.compare th, .compare td { text-align: left; vertical-align: top; padding: 18px 24px; border-bottom: 1px solid var(--border); }
.compare thead th { font: 500 1.25rem/1.2 var(--font-display); }
.compare tbody th { font-weight: 600; width: 26%; }
.compare td { color: var(--text-secondary); }
.compare td.ours { color: var(--text-primary); }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }

/* steps */
.steps { display: grid; gap: 20px; counter-reset: step; list-style: none; padding: 0; margin: 0; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.steps li { counter-increment: step; padding: 28px; border-radius: var(--radius-card); background: var(--surface-elevated); border: 1px solid var(--border); display: grid; gap: 12px; align-content: start; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--button-bg); color: var(--button-text); font: 500 1.375rem/1 var(--font-display); }
.steps h3 { font-size: 1.5rem; line-height: 1.2; }
.steps p { color: var(--text-secondary); }

/* list block: plain points beside a heading */
.split { display: grid; gap: 32px; }
@media (min-width: 900px) { .split { grid-template-columns: .9fr 1.1fr; gap: 72px; } }
.points { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border-top: 1px solid var(--border); }
.points li { padding: 20px 0; border-bottom: 1px solid var(--border); display: grid; gap: 6px; }
.points h3 { font-size: 1.375rem; line-height: 1.25; font-family: var(--font-display); font-weight: 500; }
.points p { color: var(--text-secondary); }

/* quote band */
.band { border-radius: var(--radius-stage); padding: 48px 28px; display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .band { grid-template-columns: 1fr auto; padding: 72px 64px; } }
.band .char { width: clamp(120px, 18vw, 220px); justify-self: center; }
.band blockquote p { font: 500 var(--type-h3)/1.2 var(--font-display); max-width: 26ch; }
.band figcaption { margin-top: 16px; color: var(--text-secondary); }

/* faq */
.faq { display: grid; gap: 12px; max-width: 920px; }
.faq details { border-radius: 20px; background: var(--surface-elevated); border: 1px solid var(--border); }
.faq summary { cursor: pointer; list-style: none; padding: 22px 64px 22px 24px; position: relative; font-weight: 600; font-size: 1.1875rem; line-height: 1.35; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 26px; top: 50%; width: 12px; height: 12px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-70%) rotate(45deg); transition: transform .2s ease; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq .answer { padding: 0 24px 24px; color: var(--text-secondary); display: grid; gap: 12px; max-width: 68ch; }

/* closing */
.closing { border-radius: var(--radius-stage); padding: 56px 28px; text-align: center; display: grid; justify-items: center; gap: 0; }
@media (min-width: 900px) { .closing { padding: 96px 64px; } }
.closing .char-row { margin-bottom: 32px; }
.closing .h2 { max-width: 18ch; }
.closing .lead { margin-inline: auto; text-align: center; }
.closing .cta-row { justify-content: center; }

/* footer */
.footer { padding-block: 48px 56px; font-size: var(--type-small); color: var(--text-secondary); }
.footer .wrap { display: grid; gap: 20px; }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; align-items: center; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.disclaimer { max-width: 80ch; }

/* characters */
.char { aspect-ratio: 1; height: auto; overflow: visible; }

@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:hover { transform: none; } .faq summary::after { transition: none; } }

/* the stage text column is narrower than the page: a smaller display size keeps titles to three lines */
.stage .h1 { font-size: clamp(2.5rem, 1.1rem + 3.9vw, 5.25rem); }

/* phones: the comparison reads as one card per row, both answers labelled, nothing hidden to the side */
@media (max-width: 639px) {
  .compare { min-width: 0; }
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .compare tr { display: grid; gap: 10px; padding: 18px 20px; border-bottom: 1px solid var(--border); }
  .compare tr:last-child { border-bottom: 0; }
  .compare th, .compare td { display: block; padding: 0; border: 0; width: auto; }
  .compare tbody th { width: auto; font-size: 1.125rem; }
  .compare td::before { content: attr(data-label); display: block; font-size: .875rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 2px; }
  .compare caption { padding: 16px 20px; }
  .btn { padding: 0 22px; }
}
.btn { white-space: nowrap; }
.hero-centre .cta-row, .closing .cta-row { flex-direction: column; }