/* Site styles: honey editorial (serif, cream, generous space) + graphite grid (mono data, strict lines).
   Phone first; larger screens are layered on in the media queries at the bottom. */

/* ---------- Fonts (self-hosted in fonts/, downloaded by tools/fetch_fonts.py) ----------
   Each family has a latin and a latin-ext file; browsers only download latin-ext if the page
   uses one of its characters. Fraunces and Inter are variable fonts, so one file covers the
   weight range. The heading font (Fraunces, latin) is preloaded in index.html. */

@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url(fonts/fraunces-normal-var-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url(fonts/fraunces-normal-var-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(fonts/fraunces-italic-400-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(fonts/fraunces-italic-400-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(fonts/inter-normal-var-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(fonts/inter-normal-var-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/ibm-plex-mono-normal-400-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/ibm-plex-mono-normal-400-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/ibm-plex-mono-normal-500-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/ibm-plex-mono-normal-500-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --cream: #FBF5DF;      /* light yellow base */
  --paper: #FFFDF6;
  --white: #FFFFFF;
  --ink: #1C1A16;
  --ink-soft: #3A362E;
  --muted: #6B6456;
  --line: #E8DFC2;
  --line-strong: #D9CDA6;
  --honey: #F5B800;      /* the one accent: fills behind ink text */
  --honey-deep: #8A5A00; /* same accent, darkened for small text on cream */
  --honey-wash: #FBEBB0;

  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;

  --gutter: 20px;
  --max: 1160px;
  --radius: 14px;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 400 1rem/1.6 var(--sans);
}
svg { display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; letter-spacing: -0.015em; }
p { margin: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.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;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 10;
  background: var(--ink); color: var(--cream); padding: 10px 16px; border-radius: 999px; text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ---------- Shared pieces ---------- */

.label {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 0.75rem/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--honey-deep);
}
.label::before { content: ""; width: 22px; height: 1px; background: currentColor; flex: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 24px; border-radius: 999px;
  border: 1.5px solid var(--ink); background: transparent; color: var(--ink);
  font: 500 1rem/1 var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer;
}
.btn-honey { background: var(--honey); border-color: var(--honey); }
.btn-honey:hover { background: #E5AB00; border-color: #E5AB00; }
.btn-ink { background: var(--ink); color: var(--cream); }
.btn-ink:hover { background: var(--ink-soft); border-color: var(--ink-soft); }
.btn-ghost:hover { background: rgba(28, 26, 22, 0.06); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.section { padding: 88px 0; }
.section-head { display: grid; gap: 16px; margin-bottom: 40px; max-width: 640px; }
.section-head h2 { font-size: clamp(2rem, 6vw, 3.25rem); line-height: 1.05; }
.section-head p:not(.label) { color: var(--muted); font-size: 1.0625rem; }
/* Honey highlighter behind key words */
.hl { background: linear-gradient(transparent 60%, var(--honey) 60%, var(--honey) 92%, transparent 92%); padding: 0 0.08em; }

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
/* The mark is drawn on a 32-unit grid, so 32px (and 16px) render it pixel-sharp */
.brand svg { width: 32px; height: 32px; flex: none; }
.brand span { font: 500 1rem/1 var(--serif); letter-spacing: -0.01em; white-space: nowrap; }

/* ---------- Header ---------- */

.site-header { border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 72px; }
.nav-links { display: none; gap: 32px; font-size: 0.9375rem; }
.nav-links a { text-decoration: none; color: var(--ink-soft); }
.nav-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.site-header .btn { min-height: 42px; padding: 0 16px; font-size: 0.9375rem; }

/* Very small phones (under 360px, e.g. the first iPhone SE): tighten the header so the
   name and the button fit on one line without sideways scrolling. */
@media (max-width: 359.98px) {
  :root { --gutter: 16px; }
  .site-header .wrap { gap: 10px; }
  .site-header .brand { gap: 8px; }
  .site-header .brand svg { width: 28px; height: 28px; }
  .site-header .brand span { font-size: 0.875rem; }
  .site-header .btn { min-height: 40px; padding: 0 12px; font-size: 0.875rem; }
  .hero h1 { font-size: 2.4rem; } /* so "within a minute," fits on one line */
}

/* Tablets (768 to 959px): the links don't fit beside the name and button, so they get
   their own row under them. From 960px everything sits on one row (see Desktop below). */
@media (min-width: 768px) and (max-width: 959.98px) {
  .site-header .wrap { flex-wrap: wrap; height: auto; padding-top: 14px; row-gap: 14px; }
  .site-header nav { order: 3; width: 100%; border-top: 1px solid var(--line); }
  .nav-links { display: flex; justify-content: space-between; padding: 12px 0 14px; }
}

/* ---------- Hero ---------- */

.hero { position: relative; overflow: hidden; padding: 64px 0 72px; border-bottom: 1px solid var(--line); }
.hero .wrap { position: relative; }
.hero h1 { font-size: clamp(2.6rem, 9vw, 5.25rem); line-height: 1.02; max-width: 15ch; margin: 22px 0 24px; }
.hero h1 em { font-style: italic; white-space: nowrap; } /* keep the highlighted phrase on one line */
.hero-lede { font-size: 1.125rem; color: var(--ink-soft); max-width: 36rem; }
.hero-actions { display: grid; gap: 12px; margin-top: 32px; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 40px; font: 400 0.8125rem/1.4 var(--mono); color: var(--muted); }
.hero-meta b { color: var(--ink); font-weight: 500; }

/* ---------- Hero animation (drawn by hero-hive.js) ----------
   Kept faint on purpose so it never competes with the headline. Phones and tablets get it below
   the text; from 960px it fills the right half of the hero. The mask fades the grid out towards
   every edge around a focus point (--hive-focus-y, also read by the script, which only lights
   cells well inside the fully visible area and draws the walk towards that point). */

.hero-visual { position: relative; }
.js .hero-visual { margin-top: 32px; }
.hero-hive, .hero-hive-caption { display: none; }
.js .hero-hive {
  --hive-focus-y: 46%;
  display: block; position: relative; height: 380px; pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side at 50% var(--hive-focus-y), #000 64%, transparent 100%);
          mask-image: radial-gradient(closest-side at 50% var(--hive-focus-y), #000 64%, transparent 100%);
}
.hero-hive svg { display: block; width: 100%; height: 100%; }
/* Under the grid on phones and tablets; on desktop it floats just under the lit area. */
.js .hero-hive-caption {
  display: block; margin: 4px 0 0; text-align: center; text-wrap: balance;
  font: 400 0.8125rem/1.4 var(--sans); color: var(--muted);
}

/* Lit cells fade by age: the script sets --lvl from 1 (the newest step) down to about .1. */
.hive-cell { --lvl: 1; }
.hive-hex { fill: transparent; stroke: #E2D5AA; stroke-width: 1.2; transition: fill 1.1s ease, stroke 1.1s ease; }
.hive-cell.is-on .hive-hex {
  fill: rgba(251, 235, 176, calc(.08 + .92 * var(--lvl)));
  stroke: color-mix(in srgb, #E5C463 calc(var(--lvl) * 100%), #E2D5AA);
}
.hive-cell.is-current .hive-hex { fill: var(--honey-wash); stroke: #E9B21C; }

/* Step names sit inside their cell. */
.hive-label { font: 500 13px/1 var(--sans); fill: var(--ink-soft); text-anchor: middle; opacity: 0; transition: opacity 1s ease; }
.hive-cell.is-on .hive-label { opacity: calc(.3 + .7 * var(--lvl)); }
.hive-cell.is-current .hive-label { opacity: 1; fill: var(--ink); }
.is-small .hive-label { font-size: 12px; }

/* The halo behind the newest cell: two of them cross-fade (quick in, slow out); it never moves. */
.hive-glow { opacity: 0; transition: opacity 1s ease; }
.hive-glow.is-on { opacity: 1; transition-duration: .3s; }

/* The walls between consecutive steps stay softly lit as the route, dimming with the cell they
   lead into. */
.hive-edge { --lvl: 1; stroke: #F0B200; stroke-width: 2.5; stroke-linecap: round; opacity: 0; transition: opacity .8s ease; }
.hive-edge.is-on { opacity: calc(.12 + .6 * var(--lvl)); }

/* A newly lit cell and its wall fade in quickly (~300ms, FADE_IN in the script); after that the
   slower transitions above handle dimming with age. */
.hive-cell.is-fresh .hive-hex, .hive-cell.is-fresh .hive-label, .hive-edge.is-fresh { transition-duration: .3s; }

@media (prefers-reduced-motion: reduce) {
  .hero-hive * { animation: none !important; transition: none !important; }
}

/* ---------- Demo (the centerpiece) ---------- */

.demo-section { background: var(--paper); border-bottom: 1px solid var(--line); }
.demo {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px;
  background: var(--cream); border: 1px solid var(--line-strong); border-radius: 24px; padding: 14px;
}
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; }

/* Lead form */
.lead-form { display: grid; gap: 16px; align-content: start; padding: 22px; }
.panel-title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.panel-title h3 { font-size: 1.375rem; }
.panel-title small { font: 400 0.75rem/1 var(--mono); color: var(--muted); }
.field { display: grid; gap: 6px; }
.field label { font: 500 0.75rem/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 13px 14px;
  font-size: 1rem; line-height: 1.4; /* 16px keeps iOS from zooming in on focus */
  background: var(--cream); border: 1px solid var(--line-strong); border-radius: 12px;
}
.field input::placeholder, .field textarea::placeholder { color: #9A917F; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--honey-wash); }
.field textarea { resize: vertical; min-height: 92px; }
.field :disabled { opacity: 0.6; cursor: not-allowed; }
.form-actions { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-top: 4px; }

/* Five steps. On phones they sit between the form and the chat, so progress stays in view. */
.demo-steps { order: 1; display: grid; padding: 18px; }
.demo-steps li {
  position: relative; display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: 14px;
  padding: 10px 0; color: var(--muted);
}
.demo-steps li:not(:last-child)::after {
  content: ""; position: absolute; left: 17px; top: 46px; bottom: -10px; width: 2px; background: var(--line);
}
.step-dot {
  position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid var(--line-strong); background: var(--paper);
  font: 500 0.75rem/1 var(--mono); color: var(--muted);
}
.step-text b { display: block; font-weight: 500; font-size: 0.9375rem; }
.step-text small { display: block; font: 400 0.75rem/1.3 var(--mono); }
.demo-steps li[data-status="active"] { color: var(--ink); }
.demo-steps li[data-status="active"] .step-dot { border: 2px solid var(--ink); color: var(--ink); box-shadow: 0 0 0 5px var(--honey-wash); }
.demo-steps li[data-status="active"] small { color: var(--honey-deep); }
.demo-steps li[data-status="done"] { color: var(--ink); }
.demo-steps li[data-status="done"] .step-dot { background: var(--honey); border-color: var(--honey); color: var(--ink); font-size: 1rem; }
.demo-steps li[data-status="done"]:not(:last-child)::after { background: var(--honey); }

/* Chat, styled as a messaging app */
.chat {
  order: 2; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto;
  overflow: hidden;
}
.chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.avatar {
  flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--honey-wash); color: var(--honey-deep); font: 600 0.875rem/1 var(--sans);
}
.chat-who { flex: 1; min-width: 0; }
.chat-who b { display: block; font-weight: 600; font-size: 0.9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-who span { display: block; font-size: 0.8125rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.timer { flex: none; text-align: right; }
.timer time { display: block; font: 500 1.375rem/1 var(--mono); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.timer span { font: 400 0.75rem/1 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }

.chat-status {
  display: flex; align-items: center; gap: 8px; padding: 9px 18px;
  background: var(--cream); border-bottom: 1px solid var(--line);
  font: 400 0.8125rem/1.35 var(--mono); color: var(--muted);
}
.chat-status::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.chat:has(.messages:not(:empty)) .chat-status { background: var(--honey-wash); color: var(--ink); }
[data-demo][data-running] .chat-status::before { background: var(--honey-deep); }

.messages { display: flex; flex-direction: column; gap: 14px; min-height: 300px; padding: 20px 16px; overflow-y: auto; }
.messages:empty { justify-content: center; }
.messages:empty::before {
  content: "Send the sample inquiry to watch the reply arrive here.";
  align-self: center; max-width: 24ch; text-align: center; color: var(--muted); font-size: 0.9375rem;
}

/* Each message from demo.js: <li data-from><strong>sender</strong><small>time</small><p>text</p></li> */
.messages li[data-from] {
  display: grid; grid-template-columns: auto auto 1fr; grid-template-areas: "bubble bubble bubble" "who when .";
  gap: 4px 6px; max-width: 84%;
}
.messages li[data-from] p { grid-area: bubble; justify-self: start; padding: 11px 15px; border-radius: 20px; font-size: 0.9375rem; line-height: 1.45; overflow-wrap: anywhere; }
.messages li[data-from] strong,
.messages li[data-from] small { font: 400 0.75rem/1.3 var(--mono); color: var(--muted); white-space: nowrap; }
.messages li[data-from] strong { grid-area: who; padding-left: 6px; }
.messages li[data-from] small { grid-area: when; }

.messages li[data-from="lead"] { align-self: flex-start; }
.messages li[data-from="lead"] p { background: var(--white); border: 1px solid var(--line); border-bottom-left-radius: 6px; }

.messages li[data-from="ai"] { align-self: flex-end; grid-template-columns: 1fr auto auto; grid-template-areas: "bubble bubble bubble" ". who when"; }
.messages li[data-from="ai"] p { justify-self: end; background: var(--ink); color: var(--cream); border-bottom-right-radius: 6px; }

.messages li[data-from="system"],
.messages li[data-from="agent"] { align-self: center; max-width: 92%; text-align: center; }
.messages li[data-from="system"] p { justify-self: center; border: 1px dashed var(--line-strong); border-radius: 10px; padding: 8px 12px; font: 400 0.75rem/1.45 var(--mono); color: var(--muted); }
.messages li[data-from="system"] strong { display: none; }
.messages li[data-from="system"] small { display: none; }
.messages li[data-from="agent"] { grid-template-columns: 1fr auto auto 1fr; grid-template-areas: ". who when ." "bubble bubble bubble bubble"; }
.messages li[data-from="agent"] p { justify-self: center; background: var(--honey-wash); border: 1px solid var(--honey); border-radius: 12px; padding: 12px 14px; font-size: 0.875rem; }
.messages li[data-from="agent"] strong { color: var(--honey-deep); font-weight: 500; padding-left: 0; }

/* Typing indicator */
.messages li[data-typing] { display: flex; gap: 5px; padding: 14px 16px; border-radius: 20px; }
.messages li[data-typing] i { width: 7px; height: 7px; border-radius: 50%; }
.messages li[data-typing="ai"] { align-self: flex-end; background: var(--ink); border-bottom-right-radius: 6px; }
.messages li[data-typing="ai"] i { background: var(--cream); }
.messages li[data-typing="lead"] { align-self: flex-start; background: var(--white); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.messages li[data-typing="lead"] i { background: var(--muted); }
.messages li[data-typing] i:nth-child(1) { opacity: 0.45; }
.messages li[data-typing] i:nth-child(2) { opacity: 0.7; }

.composer { display: flex; align-items: center; gap: 10px; padding: 12px; border-top: 1px solid var(--line); }
.composer div {
  flex: 1; padding: 0 16px;
  background: var(--cream); border: 1px solid var(--line); border-radius: 999px;
  font: 400 0.75rem/42px var(--mono); color: var(--muted);
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.composer span { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--line); color: var(--muted); }

.demo-note { margin-top: 16px; font: 400 0.8125rem/1.5 var(--mono); color: var(--muted); }

/* ---------- How it works ---------- */

.how-list { border-top: 1px solid var(--ink); }
.how-list li { display: grid; grid-template-columns: 56px 1fr; gap: 8px 16px; padding: 26px 0; border-bottom: 1px solid var(--line-strong); }
.how-list .num { font: 500 0.875rem/1.9 var(--mono); color: var(--honey-deep); }
.how-list h3 { font-size: 1.5rem; line-height: 1.2; margin-bottom: 6px; }
.how-list p { color: var(--muted); }
.how .section-head h2 em { font-style: italic; }

/* ---------- Stats ---------- */

.stats-section { background: var(--ink); color: var(--cream); }
.stats-section .label { color: var(--honey); }
.stats-section .section-head p:not(.label) { color: #B9B09C; }
.stats { display: grid; gap: 1px; background: #3A362E; border: 1px solid #3A362E; border-radius: var(--radius); overflow: hidden; }
.stat { display: grid; gap: 10px; align-content: start; padding: 28px 24px; background: var(--ink); }
.stat-figure { font: 400 clamp(3rem, 10vw, 4.25rem)/1 var(--serif); color: var(--honey); letter-spacing: -0.03em; }
.stat-label { color: #E8E0CB; }
.stat-source { font: 400 0.75rem/1.4 var(--mono); font-style: normal; color: #8F8775; }
.stat-source a { text-underline-offset: 3px; }
.stats-section :focus-visible { outline-color: var(--honey); }

/* ---------- Other systems ---------- */

.systems { display: grid; gap: 14px; }
.system { display: grid; gap: 10px; align-content: start; padding: 26px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.system svg { width: 40px; height: 40px; margin-bottom: 8px; }
.system h3 { font-size: 1.5rem; line-height: 1.2; }
.system p { color: var(--muted); }

/* ---------- About ---------- */

/* overflow-x: clip keeps the honeycomb accent from causing sideways scrolling on phones. */
.about { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow-x: clip; }
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
.about-photo { position: relative; margin: 0 auto; width: 100%; max-width: 360px; }
/* Same faint cells as the hero, fading out at the edges; static. */
.about-comb {
  position: absolute; left: -22%; right: -22%; top: -16%; bottom: -10%; width: 144%; height: 126%; pointer-events: none;
  fill: none; stroke: #E2D5AA; stroke-width: 1.2;
  -webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 35%, transparent 100%);
}
.about-portrait {
  position: relative; aspect-ratio: 4 / 5; border-radius: 24px; overflow: hidden; background: var(--cream);
  box-shadow: 0 22px 44px -22px rgba(28, 26, 22, .28), 0 2px 8px rgba(28, 26, 22, .06);
}
/* multiply turns the photo's white background into the card's cream, so there's no white box.
   The photo is scaled to 94% of the card's height and sits on its bottom edge, which leaves the
   top of the hair about 9% below the top of the card; the sides stay filled and are cropped. */
.about-portrait img {
  position: absolute; left: 50%; bottom: 0; height: 94%; width: auto; max-width: none;
  transform: translateX(-50%); mix-blend-mode: multiply;
}
.about-portrait.is-missing { display: grid; place-items: center; }
.about-portrait.is-missing::before { content: "JM"; font: 400 4.5rem/1 var(--serif); color: var(--honey-deep); opacity: .5; }
.about-photo figcaption { position: relative; margin-top: 16px; text-align: center; font: 400 0.8125rem/1.5 var(--sans); color: var(--muted); text-wrap: balance; }
.about-copy .section-head { margin-bottom: 24px; }
.about-text { display: grid; gap: 18px; max-width: 60ch; }
.about-text p { color: var(--ink-soft); font-size: 1.0625rem; }

/* ---------- Call to action ---------- */

.cta { padding: 88px 0; }
.cta-card { position: relative; overflow: hidden; display: grid; gap: 20px; padding: 48px 26px; background: var(--honey); border-radius: 28px; }
.cta-card > :not(.cta-mark) { position: relative; }
.cta-card .label { color: var(--ink); }
.cta-card h2 { font-size: clamp(2.25rem, 8vw, 4rem); line-height: 1.02; max-width: 13ch; }
.cta-card p:not(.label) { max-width: 34rem; font-size: 1.0625rem; }
.cta-card .btn { justify-self: start; }
.cta-card small { font: 400 0.8125rem/1.4 var(--mono); }
.cta-mark { position: absolute; right: -60px; bottom: -70px; width: 300px; height: 300px; opacity: 0.12; pointer-events: none; }

/* ---------- 404 page (404.html) ---------- */

.not-found { position: relative; overflow: hidden; padding: 72px 0 96px; }
.not-found .wrap { position: relative; }
.not-found h1 { font-size: clamp(2.6rem, 9vw, 4.25rem); line-height: 1.02; max-width: 13ch; margin: 22px 0 24px; }
/* The booking card's house, large and faint at the right; only where there's room beside the text. */
.not-found-mark { display: none; }

/* ---------- Footer ---------- */

.site-footer { border-top: 1px solid var(--line); padding: 28px 0 40px; }
.site-footer .wrap { display: grid; gap: 14px; }
.site-footer .brand svg { width: 32px; height: 32px; }
.site-footer p { font: 400 0.8125rem/1.5 var(--mono); color: var(--muted); }

/* ---------- Tablet ---------- */

@media (min-width: 640px) {
  :root { --gutter: 32px; }
  .hero-actions { display: flex; flex-wrap: wrap; }
  .js .hero-hive { height: 420px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .systems { grid-template-columns: repeat(2, 1fr); }
  .cta-card { padding: 64px 56px; }
}

/* ---------- Desktop ---------- */

@media (min-width: 960px) {
  :root { --gutter: 48px; }
  .nav-links { display: flex; }
  .hero { padding: 104px 0 112px; }
  /* The animation covers the right half of the hero, full height, so it sits level with the
     headline; the text keeps to the left half (the wrap's left edge to the middle, minus a gap). */
  .hero .wrap { position: static; }
  /* Wide enough for the two buttons side by side; on narrow desktops it may run ~30px into the
     grid's half, where the grid has already faded out (and that half ignores clicks). */
  .hero-copy { position: relative; z-index: 1; max-width: min(520px, calc(50vw - var(--gutter) + 32px)); }
  .hero-actions { flex-wrap: nowrap; }
  .hero-actions .btn { padding: 0 20px; font-size: 0.9375rem; }
  .hero h1 { font-size: clamp(2.6rem, 5vw, 4.25rem); }
  .js .hero-visual { position: absolute; top: 0; bottom: 0; left: 50%; right: 0; margin: 0; pointer-events: none; }
  /* Focus higher up, so the lit cells sit level with the headline rather than the buttons. */
  .js .hero-hive { --hive-focus-y: 36%; position: absolute; inset: 0; height: auto; }
  /* The script keeps lit cells above the caption (it reads where the caption sits). */
  .js .hero-hive-caption { position: absolute; left: 0; right: 0; top: 62%; margin: 0; padding: 0 16px; }
  .section, .cta { padding: 128px 0; }

  /* Photo column ~40%, text ~60%. */
  .about-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 72px; align-items: center; }
  .about-photo { max-width: 420px; margin: 0; }

  .demo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 18px; padding: 18px; }
  .lead-form { grid-row: 1; }
  .chat { grid-row: 1; }
  .messages { height: 460px; min-height: 0; }
  .demo-steps { order: 3; grid-column: 1 / -1; grid-template-columns: repeat(5, 1fr); gap: 12px; padding: 22px; }
  .demo-steps li { grid-template-columns: 1fr; align-items: start; gap: 12px; padding: 0; }
  .demo-steps li:not(:last-child)::after { left: 46px; right: -6px; top: 17px; bottom: auto; width: auto; height: 2px; }

  .how { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
  .how .section-head { position: sticky; top: 40px; }
  .how-list li { grid-template-columns: 80px 1fr; padding: 32px 0; }

  .stats { grid-template-columns: repeat(4, 1fr); }
  .systems { grid-template-columns: repeat(4, 1fr); }
  .cta-card { padding: 96px 80px; }
  .cta-mark { width: 460px; height: 460px; right: -40px; bottom: -110px; }
  .site-footer .wrap { grid-auto-flow: column; justify-content: space-between; align-items: center; }

  .not-found { padding: 128px 0 160px; }
  /* bottom: -25px is the 2 empty units under the legs (400px / 32 × 2), so the house stands on the footer line. */
  .not-found-mark { display: block; position: absolute; right: 6%; bottom: -25px; width: 400px; height: 400px; opacity: .07; }
}