/* limitless. Design source: DESIGN.md (locked 2026-10-19, type scale round 5). Grok Bot calm: Inter
   400/500/600 at 13/15/18/28/40 (H1 32 on mobile), flat surfaces and hairlines, 16px cards, round pills,
   8px grid, max width 1120, text measure 60ch. Round 14: four pages (home, agents, your team, pricing)
   laid out from the approved sketches in ref/r14, with the tighter section rhythm those sketches use.
   Round 15: home sizes as a toggle with mini org charts, How it works as three cards, a short FAQ, one clock
   per phone (ref/r15), and an animated org chart in the hero in place of the recording. Round 17: the hero
   is a montage of four seats and one phone (ref/r17); the round 15 chart's styles stay for plan.html and a swap
   back.
   Light and dark: the system setting by default, the header toggle sets data-theme to override. Round 20: the
   home page is light by default and ignores the system setting; its head script always sets data-theme (see
   DESIGN.md, Theme). */

@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */

:root {
  /* Light */
  --bg: #FAFAF8;
  --surface: #FFFFFF;
  --raised: #F1F1EE;
  --text: #161616;
  --muted: #5E5E5B;
  --line: #E6E6E1;
  --line-strong: #D4D4CE;
  --pill: #161616;
  --on-pill: #FFFFFF;
  --pill-hover: #333333;
  --stage: #141414;
  --leaf: #3F8F2C;
  /* The ghost org chart: its wires and empty seats, and the green dot on a filled seat. */
  --wire: #A8A8A2;
  --dot: #4CB83A;

  /* Bot icons, light tunes from the brand kit. Star: #C98000 replaces the kit's muddy #B07F00. */
  --c-assistant: #DE2A85;
  --c-dm: #0A9182;
  --c-finance: #C98000;
  --c-content: #7C4DEB;
  --c-inbox: #3F8F2C;
  --c-calendar: #1F6FE0;
  --c-follow: #D9560B;
  --c-web: #D92B3A;

  /* Round 5 scale: small 13, body 15, card title 18, section H2 28, H1 32 mobile to 40 desktop. Round 14
     adds one display size, only for the price on the pricing page. */
  --fs-13: 0.8125rem;
  --fs-15: 0.9375rem;
  --fs-18: 1.125rem;
  --fs-28: 1.75rem;
  --fs-40: clamp(2rem, 1.6rem + 1.6vw, 2.5rem);
  --fs-display: clamp(4rem, 2.6rem + 5vw, 6rem);
  --measure: 60ch;

  /* Round 20: the hero and shift sub lines, between text and muted. */
  --sub: #3D3D3A;

  --r-card: 16px;
  --r-btn: 12px;
  --r-pill: 999px;
  --wrap: 1120px;
  --gutter: 16px;
  --section: 48px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141414;
    --surface: #1F1F1F;
    --raised: #262626;
    --text: #EDEDED;
    --muted: #9A9A9A;
    --line: #2C2C2C;
    --line-strong: #3A3A3A;
    --pill: #FFFFFF;
    --on-pill: #141414;
    --pill-hover: #E6E6E6;
    --stage: #0F0F0F;
    --leaf: #5CB043;
    --wire: #6B6B6B;
    --dot: #2DA44E;
    --c-assistant: #F2509F;
    --c-dm: #16B5A4;
    --c-finance: #F5C431;
    --c-content: #9A6BFA;
    --c-inbox: #5CB043;
    --c-calendar: #3B8BFA;
    --c-follow: #F47A24;
    --c-web: #F04C55;
    --sub: #CFCFCF;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #141414;
  --surface: #1F1F1F;
  --raised: #262626;
  --text: #EDEDED;
  --muted: #9A9A9A;
  --line: #2C2C2C;
  --line-strong: #3A3A3A;
  --pill: #FFFFFF;
  --on-pill: #141414;
  --pill-hover: #E6E6E6;
  --stage: #0F0F0F;
  --leaf: #5CB043;
  --wire: #6B6B6B;
  --dot: #2DA44E;
  --c-assistant: #F2509F;
  --c-dm: #16B5A4;
  --c-finance: #F5C431;
  --c-content: #9A6BFA;
  --c-inbox: #5CB043;
  --c-calendar: #3B8BFA;
  --c-follow: #F47A24;
  --c-web: #F04C55;
  --sub: #CFCFCF;
  color-scheme: dark;
}

@media (min-width: 600px) { :root { --gutter: 24px; } }
@media (min-width: 900px) { :root { --section: 64px; --gutter: 32px; } }

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

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--bg); color: var(--text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--fs-15); line-height: 1.6; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  transition: background-color 200ms ease, color 200ms ease;
}
/* The footer sits at the bottom of a short page (the team page before a size is picked). */
body { display: flex; flex-direction: column; min-height: 100svh; }
main { flex: 1 0 auto; }
img, video, svg { display: block; max-width: 100%; }
ol, ul { list-style: none; }
a { color: inherit; }
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; }
p { text-wrap: pretty; max-width: var(--measure); }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }

.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: fixed; left: 16px; top: -64px; z-index: 50;
  padding: 8px 16px; border-radius: var(--r-pill);
  background: var(--pill); color: var(--on-pill); font-weight: 500; text-decoration: none;
}
.skip-link:focus { top: 16px; }


/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 20px; border-radius: var(--r-pill);
  font-size: var(--fs-15); font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.btn:active { transform: scale(0.98); }
.btn--primary { background: var(--pill); color: var(--on-pill); }
.btn--primary:hover { background: var(--pill-hover); }
.btn--ghost { border-color: var(--line-strong); color: var(--text); background: transparent; }
.btn--ghost:hover { background: var(--raised); }
.btn--sm { min-height: 36px; padding: 0 16px; font-size: var(--fs-13); }

.actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }

/* ---------- Header: logo, Agents, Your team, Pricing, the theme toggle and Book a call ---------- */

/* Phone: the logo, toggle and button on one row, the three page links on a row under them. From 600px:
   one row, the page links on the right before the toggle. The current page is full contrast, underlined. */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
}
/* Pages with recordings: a solid header, so nothing blurs the playing videos underneath on every scroll frame. */
.site-header--solid { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
.site-header .wrap {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: 56px 40px; align-items: center; column-gap: 16px;
  grid-template-areas: "brand end" "nav nav";
}
.brand { grid-area: brand; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text); }
.brand__mark { width: 36px; height: 22px; }
.brand__word { font-size: var(--fs-18); font-weight: 500; letter-spacing: -0.02em; line-height: 1; }
.nav { grid-area: nav; align-self: start; }
.nav__links { display: flex; gap: 8px; margin-left: -8px; }
.header__end { grid-area: end; justify-self: end; display: flex; align-items: center; gap: 12px; }
.nav-link {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 8px;
  font-size: var(--fs-13); font-weight: 500; color: var(--muted); text-decoration: none;
  text-decoration-thickness: 2px; text-underline-offset: 6px;
  border-radius: var(--r-btn); transition: color 150ms ease;
}
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--text); }
.nav-link[aria-current="page"] { text-decoration-line: underline; }
@media (min-width: 600px) {
  .site-header .wrap { grid-template-columns: auto 1fr auto; grid-template-rows: 64px; grid-template-areas: "brand nav end"; }
  .nav { align-self: center; justify-self: end; }
  .nav__links { gap: 4px; margin: 0; }
}

/* Theme control: a quiet 28px icon, no fill, no border, directly left of the header button. */
.theme-toggle {
  position: relative;
  width: 28px; height: 28px; display: grid; place-items: center;
  border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--muted); cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.theme-toggle::after { content: ""; position: absolute; inset: -8px; } /* 44px tap area */
.theme-toggle:hover { background: var(--raised); color: var(--text); }
.theme-toggle svg { width: 14px; height: 14px; }
/* Show the icon of the mode the button switches to. */
.theme-toggle .icon-to-light { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-to-dark { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-to-light { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-to-dark { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-to-light { display: block; }
}

/* ---------- Sections ---------- */

.section { padding-block: var(--section); }
.h2 { font-size: var(--fs-28); line-height: 1.25; }
.page-head { padding-block: 48px 32px; }
.page-head h1 { font-size: var(--fs-40); line-height: 1.1; letter-spacing: -0.03em; }
@media (min-width: 900px) { .page-head { padding-block: 72px 40px; } }

/* ---------- Home 1. Hero: strict 5/12 text, 7/12 montage (or chart), text centered against it ---------- */

.hero { padding-block: 40px var(--section); }
.hero__grid { display: grid; gap: 32px; align-items: start; }
.hero h1 { font-size: var(--fs-40); line-height: 1.1; letter-spacing: -0.03em; }
.hero__eyebrow { margin-bottom: 12px; font-size: var(--fs-15); font-weight: 500; line-height: 1.4; color: var(--muted); }
.hero__copy .lead { margin-top: 16px; font-size: var(--fs-18); line-height: 1.45; color: var(--muted); }
@media (min-width: 960px) {
  .hero { padding-block: 72px; }
  .hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 32px; align-items: center; }
  .hero__copy { grid-column: 1 / span 5; }
  .hero__stage, .hero__montage { grid-column: 6 / span 7; }
}

/* Round 15 (kept for a swap back, see index.html): the chart sits on a card in the page's own theme, where
   the recording was. On a phone it keeps its desktop layout under the headline and scales down whole (see the
   ghost chart below). */
.hero__stage {
  display: grid; align-content: center;
  width: 100%; padding: 24px 12px 20px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
}
@media (min-width: 960px) { .hero__stage { min-height: 360px; padding: 40px 16px 32px; } }

/* ---------- Ghost org chart: the home hero (an unlisted page reuses it) ---------- */

/* One chart: Founder; Executive assistant, Sales, Operations; two seats under each. Every length is in em
   and the font size follows the chart's width (44em wide at most), so on a narrow screen the chart scales
   down whole instead of reflowing. A seat is a ghost (dashed, muted) until it fills: the fill fades in
   behind the name, and a green dot on its corner marks a seat the AI team holds. The wires are borders on pseudo
   elements: down from a seat to a bar, along the bar, and down from the bar to each seat below. */
.ghost { container-type: inline-size; width: 100%; }
.ghost__tree {
  display: flex; flex-direction: column; align-items: center;
  font-size: 13px; font-size: min(var(--ghost-max, 15px), calc(100cqi / 44));
}
.ghost__branches, .ghost__kids { position: relative; display: flex; align-items: flex-start; }
.ghost__branches { gap: 1.2em; margin-top: 2em; }
.ghost__kids { gap: 0.5em; margin-top: 2em; }
.ghost__branch { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 13.1em; }
.ghost__kids > li { position: relative; display: flex; flex-direction: column; align-items: center; }
.ghost__branches::before, .ghost__kids::before,
.ghost__branch::before, .ghost__kids > li::before,
.ghost__branch::after, .ghost__kids > li::after { content: ""; position: absolute; pointer-events: none; }
.ghost__branches::before, .ghost__kids::before { top: -2em; left: 50%; height: 1em; border-left: 1px solid var(--wire); }
.ghost__branch::before, .ghost__kids > li::before { top: -1em; left: 50%; height: 1em; border-left: 1px solid var(--wire); }
.ghost__branch::after { top: -1em; left: -0.6em; right: -0.6em; border-top: 1px solid var(--wire); }
.ghost__kids > li::after { top: -1em; left: -0.25em; right: -0.25em; border-top: 1px solid var(--wire); }
.ghost__branch:first-child::after, .ghost__kids > li:first-child::after { left: 50%; }
.ghost__branch:last-child::after, .ghost__kids > li:last-child::after { right: 50%; }

.seat {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4em;
  min-width: 5em; padding: 0.55em 0.75em;
  font: inherit; font-weight: 500; line-height: 1.2; letter-spacing: -0.005em; white-space: nowrap;
  color: var(--muted); background: none; border: 1px dashed var(--wire); border-radius: 0.55em;
  transition: color 600ms ease;
}
.seat::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit;
  background: var(--pill); opacity: 0; transition: opacity 600ms ease;
}
.seat::after {
  content: ""; position: absolute; top: -0.25em; right: -0.25em; width: 0.6em; height: 0.6em;
  border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 0.15em var(--ghost-bg, var(--surface));
  opacity: 0; transition: opacity 600ms ease;
}
.seat--root { padding: 0.7em 1.6em; font-weight: 600; }
.seat--root, .seat.is-solid, .ghost__branch.is-on .seat, .ghost.is-ai .seat, .montage__seat.is-on .seat,
html:not(.js) .ghost--hero .seat, html:not(.js) .montage .seat { color: var(--on-pill); }
.seat--root::before, .seat.is-solid::before, .ghost__branch.is-on .seat::before, .ghost.is-ai .seat::before,
.montage__seat.is-on .seat::before, html:not(.js) .ghost--hero .seat::before, html:not(.js) .montage .seat::before { opacity: 1; }
.ghost__branch.is-on .seat::after, .ghost.is-ai .seat:not(.seat--root)::after, .montage__seat.is-on .seat::after,
html:not(.js) .ghost--hero .seat:not(.seat--root)::after, html:not(.js) .montage__seat .seat::after { opacity: 1; }

/* The hero's notes: one hangs under a seat as its branch fills, then fades. */
.ghost__chip {
  position: absolute; top: calc(100% + 0.9em); left: 50%;
  padding: 0.3em 0.7em; font-size: 0.87em; font-weight: 500; line-height: 1.3; white-space: nowrap;
  color: var(--text); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  opacity: 0; transform: translate(-50%, 0.3em); transition: opacity 400ms ease, transform 400ms ease;
}
.ghost__chip::before {
  content: ""; position: absolute; left: 50%; bottom: 100%; height: calc(0.9em / 0.87 + 1px);
  border-left: 1px solid var(--line-strong);
}
.ghost__chip.is-on { opacity: 1; transform: translate(-50%, 0); }
.ghost--hero .ghost__tree { padding-bottom: 3.2em; }
/* Round 16: on a phone the hero chart is the founder and the three heads only, at 12px or more, so it reads
   instead of scaling down whole. The seats under the heads, and with them their notes, stay hidden; the heads
   still fill on the same 10 second beats. A head's label wraps before it would shrink. */
@media (max-width: 599px) {
  .ghost--hero .ghost__tree { font-size: clamp(12px, 100cqi / 26, 14px); padding-bottom: 1.4em; }
  .ghost--hero .ghost__kids { display: none; }
  .ghost--hero .ghost__branch { flex: 0 1 auto; min-width: 0; }
  .ghost--hero .ghost__branch .seat { min-width: 0; white-space: normal; text-align: center; }
}
.ghost__live {
  max-width: none; margin-top: 4px; text-align: center;
  font-size: var(--fs-15); font-weight: 500; color: var(--text);
  opacity: 0; transition: opacity 500ms ease;
}
.ghost__live.is-on, html:not(.js) .ghost__live { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .seat, .seat::before, .seat::after, .ghost__chip, .ghost__live { transition: none; }
}

/* ---------- Home 1. Hero montage: the seats fill while one phone shows each agent (round 17) ---------- */

/* You and five seats in a row on the left, one phone on the right, centred on each other, on the page itself.
   The montage is a size container: the phone takes a third of it, 176 to 220px, and the chart's font size
   (every length in it is in em) fills what is left, 15px at most. The seats are the ghost chart's, dashed
   until they fill and 5.5em wide with 0.5em between, so the row is 29.5em and ends where the gap to the phone
   starts. Each seat holds a hairline, an elbow down from it and along under the row to the phone; only the
   active seat's shows. The phone stacks the five clips in its screen and fades the next one in over the last
   in 300ms, and the active seat's use case shows under it at every width. Below 600px: the phone alone, the
   active seat's name above it, a dot per seat under it, and the live line under those. */
.montage {
  --gap: 40px; --phone: clamp(176px, 34cqi, 220px); --ghost-bg: var(--bg);
  container-type: inline-size;
  display: flex; align-items: center; justify-content: center; gap: var(--gap);
}
.montage__chart {
  flex: none; display: flex; flex-direction: column; align-items: center;
  width: 29.5em; font-size: min(15px, calc((100cqi - var(--phone) - var(--gap)) / 29.5));
}
.montage__tree { display: flex; flex-direction: column; align-items: center; }
.montage .seat { width: 5.5em; min-width: 0; min-height: 3.6em; padding: 0.5em 0.4em; white-space: normal; text-align: center; }
.montage .seat--root { width: auto; min-height: 0; padding: 0.7em 1.6em; }
.montage .seat, .montage .seat::before, .montage .seat::after { transition-duration: 300ms; }
.montage__link {
  position: absolute; top: 100%; left: 50%; pointer-events: none;
  width: calc((4 - var(--i)) * 6em + 2.75em + var(--gap)); height: 1.4em;
  border: solid var(--muted); border-width: 0 0 1px 1px; border-bottom-left-radius: 0.5em;
  opacity: 0; transition: opacity 300ms ease;
}
.montage__seat.is-linked .montage__link, html:not(.js) .montage__seat:last-child .montage__link { opacity: 1; }
.montage__live {
  max-width: none; margin-top: 3em; text-align: center;
  font-size: var(--fs-15); font-weight: 500; line-height: 1.4; color: var(--text);
  opacity: 0; transition: opacity 300ms ease;
}
.montage__live.is-on, html:not(.js) .montage__live { opacity: 1; }

.montage__device { flex: none; display: grid; justify-items: center; gap: 12px; width: var(--phone); }
.montage .phone { width: 100%; }
.montage .phone__screen { transition: background-color 300ms ease; }
.montage .phone__island { z-index: 2; }
.montage__clip { opacity: 0; transition: opacity 300ms ease; }
.montage__clip.is-active, .montage__clip.is-prev { opacity: 1; }
.montage__clip.is-active { z-index: 1; }
html:not(.js) .montage .phone { --screen: #141414; }

/* Below 600px only: the active seat's name, solid with its dot like a filled seat, and a dot per seat, a ring
   until its seat fills and wide while it is the active one. */
/* The active seat's use case under the phone, the five lines stacked in one cell so the height holds. */
.montage__caption { display: grid; width: 100%; max-width: none; }
.montage__caption > span {
  grid-area: 1 / 1; text-align: center; font-size: 0.875rem; line-height: 1.4; color: var(--muted);
  opacity: 0; transition: opacity 300ms ease;
}
.montage__caption > .is-active, html:not(.js) .montage__caption > span:last-child { opacity: 1; }
html:not(.js) .montage__caption > span:not(:last-child) { opacity: 0; }

.montage__label, .montage__dots { display: none; }
.montage__label { justify-items: center; max-width: none; }
.montage__label > span {
  grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px;
  font-size: 0.875rem; font-weight: 500; line-height: 1.3; white-space: nowrap;
  color: var(--on-pill); background: var(--pill); border-radius: 8px;
  opacity: 0; transition: opacity 300ms ease;
}
.montage__label > span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dot); }
.montage__dots { justify-content: center; gap: 8px; padding-top: 4px; }
.montage__dots li {
  width: 6px; height: 6px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--muted);
  transition: background-color 300ms ease, width 300ms ease;
}
.montage__dots .is-on, html:not(.js) .montage__dots li { background: var(--text); box-shadow: none; }
.montage__dots .is-active { width: 18px; }
html:not(.js) .montage__clip, html:not(.js) .montage__label > span { opacity: 0; }
.montage__label > .is-active, html:not(.js) .montage__clip:last-of-type, html:not(.js) .montage__label > span:last-child { opacity: 1; }
@media (max-width: 599px) {
  .montage { --phone: min(100%, 232px); flex-direction: column; gap: 12px; }
  .montage__chart { order: 1; width: auto; font-size: inherit; }
  .montage__tree { display: none; }
  .montage__live { margin-top: 4px; }
  .montage__label { display: grid; }
  .montage__dots { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .montage__link, .montage__live, .montage .phone__screen, .montage__clip, .montage__label > span, .montage__caption > span,
  .montage__dots li { transition: none; }
}

/* ---------- Team page: the five seats, one "On a Tuesday" line each (round 18) ---------- */

/* One column on a phone, two from 600px, five in a row from 1080px. Icons rest in grey like the department
   cards and take their own colours on hover. */
.seats__title { margin-bottom: 32px; text-align: center; }
.seats-row { display: grid; gap: 16px; }
.seat-card { padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); transition: border-color 150ms ease; }
.seat-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.seat-card .bot__avatar { width: 44px; height: 44px; }
.seat-card .bot__avatar .avatar { width: 28px; height: 28px; }
.seat-card .avatar > use { --c: var(--muted); transition: --c 150ms ease; }
.seat-card:hover .avatar > use { --c: inherit; }
.seat-card:hover { border-color: color-mix(in srgb, var(--text) 32%, var(--bg)); }
.seat-card__name { font-size: var(--fs-18); font-weight: 600; line-height: 1.3; }
.seat-card__day { max-width: none; font-size: var(--fs-15); line-height: 1.5; color: var(--text); }
.seat-card__when { display: block; margin-bottom: 4px; font-size: var(--fs-13); font-weight: 500; color: var(--muted); }
@media (min-width: 600px) { .seats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* From 1080px the cards share their rows, so "On a Tuesday" lines up even where a name wraps. */
@media (min-width: 1080px) {
  .seats-row { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: auto auto; }
  .seat-card { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
}

/* ---------- Counters: agents built, the hire costs on home and on the team tiles ---------- */

/* site.js stacks a figure's final copy and the moving copy in one grid cell, so the box holds the width of
   its final value and nothing shifts as it counts. While it counts, the final copy stays in place,
   transparent, so screen readers still read it; the moving copy sits on top. Without JavaScript the final
   copy is all there is. */
.count { display: inline-grid; justify-items: start; white-space: nowrap; font-variant-numeric: tabular-nums; }
.count > * { grid-area: 1 / 1; }
.count__tick { display: none; }
.count.is-counting .count__value { color: transparent; }
.count.is-counting .count__tick { display: block; }

/* ---------- Home 2. Tools: one row of eight marks between hairlines ---------- */

/* Marks only, monochrome; the name is each mark's label and hover title. Zoom, Kit, Circle and Typeform keep
   their own wordmarks at a height that matches the others by eye. Fifteen marks in even cells: three rows of
   five on a phone, two rows from 900px (eight, then seven centred). */
.section--tools { padding-block: 28px; border-block: 1px solid var(--line); }
@media (min-width: 900px) { .section--tools { padding-block: 32px 36px; } }
.tools__title { font-size: var(--fs-15); font-weight: 500; line-height: 1.4; letter-spacing: 0; }
.tools__list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; row-gap: 20px; margin-top: 20px; }
.tools__list .tool { flex: 0 0 20%; justify-content: center; min-height: 30px; }
.tools__list .tool { color: var(--muted); transition: color 150ms ease; }
.tools__list .tool:hover { color: var(--text); }
.tools__list .tool__mark { width: 22px; height: 22px; }
.tools__list .tool__logo { --h: 13px; }
@media (min-width: 600px) {
  .tools__title { font-size: var(--fs-18); }
  .tools__list { margin-top: 24px; padding-inline: 8px; }
  .tools__list .tool__mark { width: 30px; height: 30px; }
  .tools__list .tool__logo { --h: 19px; }
}
@media (min-width: 900px) { .tools__list { row-gap: 28px; } .tools__list .tool { flex-basis: 12.5%; } }

/* Tool marks everywhere: wordmarks keep their own proportions (--ar). */
.tool { display: inline-flex; align-items: center; }
.tool__mark, .tool__logo { flex: none; transition: color 150ms ease; }
.tool__mark { width: 12px; height: 12px; }
.tool__mark--wide { height: 10px; width: calc(10px * var(--ar)); }
.tool__logo { height: var(--h); width: calc(var(--h) * var(--ar)); }
.tool--zoom { --ar: 4.397; } .tool--skool { --ar: 3.076; } .tool--circle { --ar: 3.484; }
.tool--kit { --ar: 3; } .tool--typeform { --ar: 4.444; }

/* ---------- Home 2a. Sound familiar?: before and after rows on hairlines, the seat that does it as a chip ---------- */

.ba { margin-top: 32px; border-top: 1px solid var(--line); }
.ba__head { display: none; }
.ba__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.ba__before { font-size: var(--fs-18); font-weight: 500; line-height: 1.35; }
.ba__arrow { width: 20px; height: 20px; color: var(--muted); transform: rotate(90deg); }
.ba__after { font-size: var(--fs-15); line-height: 1.5; color: var(--muted); }
.ba__seat { display: flex; }
@media (min-width: 900px) {
  .ba { margin-top: 40px; }
  .ba__head {
    max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) 10rem; gap: 24px;
    padding-bottom: 12px; font-size: var(--fs-13); font-weight: 600; color: var(--muted);
  }
  .ba__row { grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) 10rem; gap: 24px; align-items: center; padding: 24px 0; }
  .ba__arrow { transform: none; }
}

/* ---------- Home 2b. A morning with your team: the deck's day rows, a time, the job, its seat chips ---------- */

.morning { display: grid; margin-top: 32px; border-top: 1px solid var(--line); }
.morning__row {
  display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 8px 16px; align-items: center;
  padding: 16px 4px; border-bottom: 1px solid var(--line);
}
.morning__time { font-size: var(--fs-15); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.morning__task { font-size: var(--fs-18); font-weight: 500; line-height: 1.3; }
.morning__seats { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; }
.morning__seat {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 6px;
  font-size: var(--fs-13); font-weight: 500; white-space: nowrap;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-pill);
}
.morning__seat .avatar { width: 20px; height: 20px; }
.morning__foot { margin-top: 24px; font-size: var(--fs-18); font-weight: 500; }
@media (min-width: 900px) {
  .morning { margin-top: 40px; }
  .morning__row { grid-template-columns: 5rem minmax(0, 1fr) auto; gap: 24px; padding: 20px 8px; }
  .morning__seats { grid-column: auto; justify-content: flex-end; }
}

/* ---------- Home 3. Watch it work: six phones, a label under each ---------- */

.watch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; margin-top: 32px; }
@media (min-width: 900px) { .watch { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 40px; } }
@media (min-width: 1200px) { .watch { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; } }
.watch__item { display: grid; justify-items: center; gap: 16px; color: var(--text); text-decoration: none; }
.watch__item .phone { transition: translate 200ms ease, box-shadow 200ms ease; }
.watch__item:hover .phone { translate: 0 -4px; }
.watch__label { font-size: var(--fs-15); font-weight: 500; line-height: 1.3; }
.watch__item:hover .watch__label { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Home 4. Agents built: one thin centred line ---------- */

.section--built { padding-block: 8px; }
.built { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; max-width: none; }
.built::before, .built::after { content: ""; height: 1px; background: var(--line); }
.built__inner { display: grid; justify-items: center; }
.built__num { justify-items: center; font-size: var(--fs-40); font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; }
.built__label { font-size: var(--fs-13); line-height: 1.4; color: var(--muted); }

/* ---------- Home 5. What clients say: a list of real quote cards ---------- */

/* One card per client in the list, stacked, and only real ones (index.html). A card (BRIEF ROUND 17): her own
   message as the screenshot itself in a large phone, then the pull quote large and who she is. On a phone the
   phone comes first, full width and straight so it reads; from 900px it sits on the left, tilted about 3deg
   with a soft shadow, and the quote on the right. */
.voices { display: grid; gap: 16px; margin-top: 32px; }
@media (min-width: 900px) { .voices { margin-top: 40px; } }
.voice__tag {
  justify-self: start; padding: 4px 12px; font-size: var(--fs-13); font-weight: 600; line-height: 1.4;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
}
.voice { padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.voice__fig { display: grid; justify-items: center; gap: 32px; }
.voice__phone { width: 100%; max-width: 400px; }
.voice__side { display: grid; gap: 16px; width: 100%; }
.voice__pull { max-width: 16ch; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance; }
.voice__by { font-size: var(--fs-18); line-height: 1.5; }
.voice__name { display: block; font-weight: 600; }
.voice__role { color: var(--muted); }
@media (min-width: 600px) { .voice { padding: 32px; } }
@media (min-width: 900px) {
  .voice { padding: 56px 64px; }
  .voice__fig { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 80px; }
  .voice__phone { max-width: 380px; }
}

/* ---------- Home 5b. The brief before every call: the line, then the brief as a card, side by side from 900px ---------- */

.care { display: grid; gap: 24px; }
.care__lead { margin-top: 16px; font-size: var(--fs-18); line-height: 1.45; color: var(--muted); }
.care__card {
  display: grid; gap: 16px; padding: 24px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
}
.care__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.care__when { font-size: var(--fs-13); color: var(--muted); }
.care__list { display: grid; border-top: 1px solid var(--line); }
.care__list li { padding-block: 12px; border-bottom: 1px solid var(--line); }
.care__open { font-size: var(--fs-18); font-weight: 500; line-height: 1.4; }
@media (min-width: 900px) {
  .care { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 32px; align-items: center; }
  .care__copy { grid-column: 1 / span 5; }
  .care__card { grid-column: 7 / span 6; padding: 32px; }
}

/* ---------- Home 6. Your team by size: a toggle, a mini org chart, the hire figure on a tap ---------- */

/* Centred like the sketch (ref/r15/size-option-b.jpg): the question, the size toggle, the chosen size's chart
   in one card, its one-line count, then the figure (after a tap) and the link to the full team. The chart:
   You on top, the six departments under it (two across on a phone, one row from 900px, wired to You), each
   with who leads it and its bots as avatars. Without JavaScript the toggle and its hint stay hidden and Solo
   shows. */
.teams__title { text-align: center; }
.teams { display: grid; justify-items: center; gap: 24px; margin-top: 24px; }
@media (min-width: 900px) { .teams { margin-top: 32px; } }
html:not(.js) .teams__toggle, html:not(.js) .teams__hint { display: none; }

.teams__toggle { display: inline-flex; gap: 4px; max-width: 100%; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); }
.teams__btn {
  min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--muted); font: inherit; font-size: var(--fs-15); font-weight: 500; line-height: 1; white-space: nowrap;
  cursor: pointer; transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}
.teams__btn:hover { color: var(--text); }
.teams__btn:active { transform: scale(0.98); }
.teams__btn[aria-pressed="true"] { background: var(--pill); color: var(--on-pill); }
@media (min-width: 600px) { .teams__btn { padding: 0 24px; } }

.mini { width: 100%; display: grid; justify-items: center; gap: 16px; }
.mini[hidden] { display: none; }
.mini__card { width: 100%; padding: 24px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.mini__root { display: flex; justify-content: center; max-width: none; }
.mini__depts { --wire: var(--line-strong); position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.mini__dept {
  position: relative; display: grid; align-content: start; gap: 6px; padding: 12px;
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: 12px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.mini__dept:focus { outline: none; }
.mini__dept:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.mini__name { font-size: var(--fs-15); line-height: 1.4; letter-spacing: -0.01em; }
.mini__lead { display: flex; align-items: center; gap: 6px; font-size: var(--fs-13); font-weight: 500; line-height: 1.4; }
.mini__lead .avatar { width: 20px; height: 20px; }
/* The bots: one grid of same size icons, the same gap both ways. Each name is read by screen readers and
   shows only while the card is lit. */
.mini__bots { display: grid; grid-template-columns: repeat(auto-fill, 24px); gap: 6px; margin-top: 4px; }
.mini__bots .avatar { width: 24px; height: 24px; }
.mini__bot-name {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Round 16 (ref/r16/team-mono-hover.jpg): every agent icon in a department card rests in grey, like the tools
   row. Hover or keyboard focus lights the card (site.js; a tap toggles it, one card at a time): its border
   lifts, its icons fade to their own colours in 150ms and, on the home page, each icon gets its name. On the
   home page from 900px with a mouse, the names drop over the page below the card, so nothing moves; the
   card keeps the height it had (--rest-h, set by site.js). Without JavaScript, hover alone colours them.
   --c is registered as a colour so the fade runs; each icon's own colour stays on its svg. */
@property --c { syntax: "<color>"; inherits: true; initial-value: transparent; }
.mini .avatar > use, .org .avatar > use { --c: var(--muted); transition: --c 150ms ease; }
.mini__dept.is-lit .avatar > use, .org__dept.is-lit .avatar > use,
html:not(.js) .mini__dept:hover .avatar > use, html:not(.js) .org__dept:hover .avatar > use { --c: inherit; }
.mini__dept.is-lit, .org__dept.is-lit > .org__box { border-color: color-mix(in srgb, var(--text) 32%, var(--bg)); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06); }
.mini__dept.is-lit { z-index: 2; }
.mini__dept.is-lit .mini__bots { grid-template-columns: minmax(0, 1fr); }
.mini__dept.is-lit .mini__bots > li { display: flex; align-items: center; gap: 8px; }
.mini__dept.is-lit .mini__bot-name {
  position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal;
  font-size: var(--fs-13); font-weight: 500; line-height: 1.3; color: var(--text);
}
@media (hover: hover) and (min-width: 900px) {
  .mini__dept.is-lit { min-height: var(--rest-h); }
  .mini__dept.is-lit .mini__bots {
    position: absolute; top: var(--bots-top); left: -1px; right: -1px;
    min-height: calc(var(--rest-h) - var(--bots-top) - 1px); margin: 0; padding: 0 12px 12px; align-content: start;
    background: var(--bg); border: 1px solid color-mix(in srgb, var(--text) 32%, var(--bg)); border-top: 0; border-radius: 0 0 12px 12px;
    box-shadow: 0 16px 24px -8px rgba(0, 0, 0, 0.1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mini__dept, .org .org__box, .mini .avatar > use, .org .avatar > use { transition: none; }
}
@media (min-width: 900px) {
  .mini__card { padding: 32px; }
  .mini__depts { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 40px; }
  /* Wires: down from You, along the row, down into each department. */
  .mini__depts::before { content: ""; position: absolute; left: 50%; top: -40px; height: 20px; border-left: 1px solid var(--wire); }
  .mini__dept::before { content: ""; position: absolute; top: -21px; left: -7px; right: -7px; border-top: 1px solid var(--wire); }
  .mini__dept:first-child::before { left: 50%; }
  .mini__dept:last-child::before { right: 50%; }
  .mini__dept::after { content: ""; position: absolute; left: 50%; top: -21px; height: 20px; border-left: 1px solid var(--wire); }
}

.mini__caption { font-size: var(--fs-18); font-weight: 500; line-height: 1.45; text-align: center; }
.mini__cost { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 48px; }
.mini__cost[hidden] { display: none; }
.mini__fig { display: grid; justify-items: center; text-align: center; }
.mini__num { justify-items: center; font-size: var(--fs-40); font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; }
.mini__label { position: relative; font-size: var(--fs-13); line-height: 1.5; color: var(--muted); }
/* The asterisk hangs off the label's end, so it neither pushes the label off centre nor makes it taller. */
.mini__label .ast { position: absolute; left: calc(100% - 6px); top: -10px; }
.teams__hint { font-size: var(--fs-15); line-height: 1.5; color: var(--muted); text-align: center; }

/* ---------- Home 7. How it works: three numbered cards, then the guarantee bar ---------- */

/* Phone: the steps run down the page, a number beside each card on one wire. From 800px: one row, the
   numbers above the cards on a wire between them (ref/r15/how-it-works.jpg). */
.how { display: grid; gap: 12px; margin-top: 32px; }
.how__step { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 16px; align-items: start; }
.how__num {
  width: 32px; height: 32px; margin-top: 20px; display: grid; place-items: center;
  background: var(--raised); border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  font-size: var(--fs-13); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums;
}
.how__step:not(:last-child)::before { content: ""; position: absolute; left: 16px; top: 52px; bottom: -32px; border-left: 1px solid var(--line-strong); }
.how__card { padding: 20px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.how__name { font-size: var(--fs-18); line-height: 1.3; }
.how__card p { margin-top: 6px; color: var(--muted); }
@media (min-width: 800px) {
  .how { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .how__step { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; justify-items: center; gap: 24px; }
  .how__num { width: 44px; height: 44px; margin-top: 0; font-size: var(--fs-15); }
  .how__step:not(:last-child)::before { left: calc(50% + 34px); right: auto; top: 22px; bottom: auto; width: calc(100% + 24px - 68px); border-left: 0; border-top: 1px solid var(--line-strong); }
  .how__card { width: 100%; padding: 28px; }
}
@media (min-width: 900px) { .how { margin-top: 40px; } }

/* The guarantee: one line and the button. On a phone the button takes the full width. */
.guarantee {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px;
  margin-top: 16px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
}
.guarantee__text { font-size: var(--fs-18); font-weight: 500; line-height: 1.45; }
@media (max-width: 599px) { .guarantee .btn { width: 100%; } }
@media (min-width: 600px) { .guarantee { padding: 20px 20px 20px 28px; } }

/* ---------- Home 7b. Who this is for: Made for and Not for, two cards side by side from 900px ---------- */

.fit { display: grid; gap: 16px; margin-top: 32px; }
.fit__col { padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.fit__col--no { background: transparent; }
.fit__title { font-size: var(--fs-18); font-weight: 600; }
.fit__list { display: grid; margin-top: 12px; }
.fit__list li { position: relative; display: flex; gap: 12px; padding: 12px 0; font-size: var(--fs-15); line-height: 1.5; }
.fit__list li + li { border-top: 1px solid var(--line); }
.fit__col--yes .fit__list li { font-weight: 500; }
.fit__col--no .fit__list li { color: var(--muted); }
.fit__ico { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.fit__ico--yes { color: var(--dot); }
.fit__ico--no { color: var(--muted); }
/* On a phone the aside opens over its whole line, so it never runs off the screen's left edge. */
/* The aside's asterisk sits on the line like a letter, so the line keeps its height. */
.ast.ast--fit { vertical-align: baseline; }
.ast--fit .ast__btn { min-height: 0; padding: 0 5px; line-height: inherit; }
@media (max-width: 599px) { .ast.ast--fit { position: static; } .ast--fit .ast__tip { left: 0; right: auto; width: 100%; } }
@media (min-width: 900px) { .fit { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 40px; } .fit__col { padding: 32px; } }

/* ---------- Bot avatars (brand-kit icons) ---------- */

.avatar { width: 48px; height: 48px; flex: none; }

/* Idle motion, Grok Bot style: every icon floats and sways a little, out of step with its neighbours.
   Off under reduced motion. */
@keyframes idle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30% { transform: translateY(-1.5px) rotate(-3deg); }
  60% { transform: translateY(0.5px) rotate(2deg); }
}
.avatar { transform-origin: 50% 70%; animation: idle 3.6s ease-in-out infinite; }
li:nth-child(3n + 2) > * > .avatar, li:nth-child(3n + 2) > .avatar { animation-duration: 4.2s; animation-delay: -1.3s; }
li:nth-child(3n + 3) > * > .avatar, li:nth-child(3n + 3) > .avatar { animation-duration: 3.2s; animation-delay: -2.1s; }
li:nth-child(4n + 4) > * > .avatar, li:nth-child(4n + 4) > .avatar { animation-delay: -0.7s; }
@media (prefers-reduced-motion: reduce) { .avatar { animation: none; } }

/* ---------- Your team: three size tiles; a tile opens its org chart and the role by role table ---------- */

/* Tiles under a muted "Pick your size". Phone: stacked. From 900px: one row of three. At every width the open
   chart sits under all three tiles (round 17), so another size never hides below a long chart. A tile shows
   its size, its band and "See your team" with a chevron until it is picked; then it takes the primary pill
   colours and its hire cost eases open and counts up (site.js). "See your team" sits at the foot of the tile,
   level across the row. With a mouse a tile lifts 2px and its border and chevron brighten; the keyboard ring
   is the site's own. */
.sizes__hint { margin-bottom: 12px; font-size: var(--fs-15); line-height: 1.5; color: var(--muted); }
@media (min-width: 900px) { .sizes__hint { margin-bottom: 16px; } }
.sizes { display: grid; }
.tile {
  display: flex; flex-direction: column; align-items: flex-start; width: 100%;
  padding: 20px; border: 1px solid var(--line-strong); border-radius: var(--r-card);
  background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease, transform 150ms ease, translate 200ms ease;
}
.tile ~ .tile { margin-top: 12px; }
@media (hover: hover) {
  .tile:hover { border-color: var(--muted); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06); translate: 0 -2px; }
  .tile:hover .tile__more { color: var(--text); }
  .tile:hover .tile__more svg { translate: 0 2px; }
}
.tile:active { transform: scale(0.99); }
.tile[aria-pressed="true"] { background: var(--pill); border-color: var(--pill); color: var(--on-pill); box-shadow: none; }
.tile__more {
  display: inline-flex; align-items: center; gap: 4px; margin-top: auto; padding-top: 12px;
  font-size: var(--fs-13); font-weight: 500; line-height: 1.4; color: var(--muted); transition: color 150ms ease;
}
.tile__more svg { width: 14px; height: 14px; flex: none; transition: translate 150ms ease; }
.tile[aria-pressed="true"] .tile__more, html:not(.js) .tile__more { display: none; }
.tile__name { font-size: var(--fs-18); font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; }
.tile__band { margin-top: 2px; font-size: var(--fs-13); line-height: 1.5; color: var(--muted); }
.tile[aria-pressed="true"] .tile__band { color: inherit; opacity: 0.72; }
.tile__cost { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 320ms cubic-bezier(0.2, 0, 0, 1), visibility 320ms; }
.tile[aria-pressed="true"] .tile__cost, html:not(.js) .tile__cost { grid-template-rows: 1fr; visibility: visible; }
.tile__cost-inner { display: grid; min-height: 0; overflow: hidden; }
.tile__num { margin-top: 16px; font-size: var(--fs-40); font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; }
.tile__caption { margin-top: 4px; font-size: var(--fs-13); line-height: 1.5; opacity: 0.72; }
.tile.is-instant, .tile.is-instant .tile__cost { transition: none; }
@media (min-width: 600px) { .tile { padding: 24px; } }
.chart { order: 1; }
@media (min-width: 900px) {
  .sizes { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px; }
  .tile { grid-row: 1; }
  .tile ~ .tile { margin-top: 0; }
  .chart { grid-row: 2; grid-column: 1 / -1; }
}

/* The open chart. site.js animates its height; the gap above sits inside so it animates with it.
   From 900px a notch on top points at the selected tile. Without JavaScript every chart shows. */
.chart[hidden] { display: none; }
html:not(.js) .chart[hidden] { display: block; }
.chart__inner {
  position: relative; margin-top: 12px; padding: 24px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
}
@media (min-width: 600px) { .chart__inner { padding: 32px; } }
@media (min-width: 900px) {
  .chart__inner { margin-top: 20px; }
  .chart__inner::before {
    content: ""; position: absolute; top: -8px; left: var(--notch); width: 14px; height: 14px; translate: -50% 0; rotate: 45deg;
    background: var(--surface); border: 1px solid var(--line); border-right: 0; border-bottom: 0; border-radius: 3px 0 0 0;
  }
  #panel-solo { --notch: calc((100% - 32px) / 6); }
  #panel-team { --notch: 50%; }
  #panel-scale { --notch: calc(100% - (100% - 32px) / 6); }
}

/* Org chart, hairline connectors. Phone: an indented tree. One rail runs down from You with an elbow
   into each department, and each department's bots hang from a rail under its box. From 900px: You on
   top and a bus to two rows of three departments; the rail on the left carries the bus to the second
   row. Bots hang the same way at every size. Leads sit inside the box: a person icon for people, the
   Heart for the Executive assistant (a bot). */
.org { --wire: var(--line-strong); --w: 1.5px; --r: 10px; --rail: 19px; --indent: 40px; --gap: 16px; --elbow: 22px; }
.org__root { position: relative; display: flex; max-width: none; padding-bottom: var(--gap); }
.org__depts { position: relative; display: grid; gap: var(--gap); padding-left: var(--indent); }
.org__dept { position: relative; }
.org__dept::before, .org__dept::after, .org__root::after, .org__box::before,
.org__bots > li::before, .org__bots > li::after { content: none; position: absolute; pointer-events: none; }
.org__dept::before {
  content: ""; left: calc(var(--rail) - var(--indent) - var(--w) / 2); top: calc(-1 * var(--gap));
  width: calc(var(--indent) - var(--rail) + var(--w) / 2); height: calc(var(--gap) + var(--elbow));
  border-left: var(--w) solid var(--wire); border-bottom: var(--w) solid var(--wire); border-bottom-left-radius: var(--r);
}
.org__dept:not(:last-child)::after {
  content: ""; left: calc(var(--rail) - var(--indent) - var(--w) / 2); top: calc(var(--elbow) - var(--r)); bottom: 0;
  border-left: var(--w) solid var(--wire);
}

.org__box {
  position: relative; padding: 12px 14px; background: var(--bg); border: 1px solid var(--line-strong); border-radius: 12px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.org__name { font-size: var(--fs-15); line-height: 1.4; letter-spacing: -0.01em; }
.org__note { margin-top: 6px; font-size: var(--fs-13); line-height: 1.5; color: var(--muted); }

/* People: a small person icon on a grey disc, then the name. You also heads the chart. */
.who { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: var(--fs-13); font-weight: 500; line-height: 1.4; }
.who__icon { width: 20px; height: 20px; flex: none; padding: 3px; border-radius: 50%; background: var(--raised); color: var(--muted); }
.who--root {
  display: inline-flex; margin: 0; padding: 6px 16px 6px 6px; gap: 10px;
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  font-size: var(--fs-15); font-weight: 600; line-height: 1.3;
}
.who--root .who__icon { width: 24px; height: 24px; padding: 4px; }

/* The Executive assistant leads Ops from inside the box, a bot with its own card. */
.node--lead { margin: 2px 0 -4px; }
.node--lead .node__btn { width: auto; min-height: 36px; margin-left: -6px; padding: 4px 10px 4px 4px; align-items: center; }
.node--lead .node__btn .avatar { width: 24px; height: 24px; }
.node--lead .node__text { padding-top: 0; }
.node--lead .node__name { font-size: var(--fs-13); }

/* Bots hang from a rail under the box; Marketing's groups hang the same way, one level deeper. */
.org__bots { --y: 24px; margin-left: 23px; }
.org__bots > li { position: relative; padding: 4px 0 0 18px; }
.org__bots > li::before {
  content: ""; left: calc(var(--w) / -2); top: 0; width: 18px; height: var(--y);
  border-left: var(--w) solid var(--wire); border-bottom: var(--w) solid var(--wire); border-bottom-left-radius: var(--r);
}
.org__bots > li:not(:last-child)::after { content: ""; left: calc(var(--w) / -2); top: calc(var(--y) - var(--r)); bottom: 0; border-left: var(--w) solid var(--wire); }
.org__bots > .org__group { --y: 21px; padding-top: 8px; }
.org__group-name { padding: 2px 8px; font-size: var(--fs-13); font-weight: 500; line-height: 1.4; color: var(--muted); }
.org__group > .org__bots { margin-left: 14px; }

@media (min-width: 900px) {
  .org { --gx: 24px; --gy: 40px; --drop: 24px; --gut: 24px; }
  .org__root { justify-content: center; padding: 0 0 var(--drop) var(--gut); }
  .org__root::after {
    content: ""; left: calc(50% + var(--gut) / 2 - var(--w) / 2); bottom: calc(-1 * var(--w)); height: calc(var(--drop) + var(--w));
    border-left: var(--w) solid var(--wire);
  }
  .org__depts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gy) var(--gx); padding-left: var(--gut); }
  .org__dept { padding-top: var(--drop); }
  .org__box::before {
    content: ""; left: calc(50% - var(--w) / 2); top: calc(-1 * var(--drop) - 1px); height: calc(var(--drop) + 1px);
    border-left: var(--w) solid var(--wire);
  }
  /* The bus: each department draws its stretch, out to half the gap on either side. */
  .org__dept::before, .org__dept:not(:last-child)::after { content: none; }
  .org__dept::before {
    content: ""; left: calc(var(--gx) / -2); right: calc(var(--gx) / -2); top: 0; width: auto; height: 0;
    border: 0; border-top: var(--w) solid var(--wire); border-radius: 0;
  }
  /* Row starts reach back to the rail; row ends turn down into their drop. */
  .org__dept:nth-child(3n + 1)::before { left: calc(var(--gut) / -2 - var(--w) / 2); }
  .org__dept:nth-child(3n)::before {
    right: calc(50% - var(--w) / 2); height: var(--r);
    border-right: var(--w) solid var(--wire); border-top-right-radius: var(--r);
  }
  .org__dept:nth-child(3n) > .org__box::before { top: calc(var(--r) - var(--drop) - 1px); height: calc(var(--drop) + 1px - var(--r)); }
  /* The rail: from the first row's bus down to the second row's. */
  .org__dept:first-child::before { height: var(--r); border-left: var(--w) solid var(--wire); border-top-left-radius: var(--r); }
  .org__dept:first-child::after {
    content: ""; left: calc(var(--gut) / -2 - var(--w) / 2); top: var(--r); bottom: calc(var(--r) - var(--gy) - var(--w));
    border-left: var(--w) solid var(--wire);
  }
  .org__dept:nth-child(4)::before { left: calc(var(--gut) / -2 - var(--w) / 2 + var(--r)); }
  .org__dept:nth-child(4)::after {
    content: ""; left: calc(var(--gut) / -2 - var(--w) / 2); top: calc(var(--w) - var(--r)); width: var(--r); height: var(--r);
    border-left: var(--w) solid var(--wire); border-bottom: var(--w) solid var(--wire); border-bottom-left-radius: var(--r);
  }
}

/* A bot: icon, name, then a line with the "built for you" tag and the tools it works in. The whole row is
   the button. */
.node { position: relative; }
.node__btn {
  width: 100%; min-height: 44px; display: flex; align-items: flex-start; gap: 8px;
  padding: 6px 8px; border: 0; border-radius: var(--r-btn); background: transparent;
  color: var(--text); font: inherit; text-align: left; cursor: pointer;
  transition: background-color 150ms ease;
}
.node__btn .avatar { width: 24px; height: 24px; transition: translate 150ms ease; }
.node__btn:hover, .node.is-open .node__btn { background: var(--raised); }
.node__btn:hover .avatar, .node.is-open .node__btn .avatar { translate: 0 -2px; }
.node__text { display: grid; gap: 2px; min-width: 0; padding-top: 2px; }
.node__name { font-size: var(--fs-15); font-weight: 500; line-height: 1.3; }
.node__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 18px; color: var(--muted); }
.node__tag {
  padding: 0 8px; border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  font-size: var(--fs-13); line-height: 18px; color: var(--muted); white-space: nowrap;
}

/* In the chart the tool marks take their brand colour while their bot is hovered or open. */
.tool--gmail { --brand: #EA4335; } .tool--googlecalendar { --brand: #4285F4; } .tool--zoom { --brand: #0B5CFF; }
.tool--instagram { --brand: #FF0069; } .tool--whatsapp { --brand: #25D366; } .tool--telegram { --brand: #26A5E4; }
.tool--stripe { --brand: #635BFF; } .tool--paypal { --brand: #003087; } .tool--notion { --brand: var(--text); }
.tool--slack { --brand: #4A154B; } .tool--googledrive { --brand: #4285F4; } .tool--youtube { --brand: #FF0000; }
.tool--calendly { --brand: #006BFF; } .tool--kajabi, .tool--skool, .tool--circle, .tool--flodesk { --brand: var(--text); }
:root[data-theme="dark"] .tool--paypal { --brand: #009CDE; }
:root[data-theme="dark"] .tool--slack { --brand: #E01E5A; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tool--paypal { --brand: #009CDE; }
  :root:not([data-theme="light"]) .tool--slack { --brand: #E01E5A; }
}
.node__btn:hover .tool, .node.is-open .tool { color: var(--brand); }
/* Multi-colour marks get their own colours back on hover: Skool's letters, Circle's dot. */
.node__btn:hover .tool--skool, .node.is-open .tool--skool {
  --sk1: #263397; --sk2: #D3513E; --sk3: #E0B467; --sk4: #6BB7EE; --sk5: #C45946;
}
/* Dark mode: Skool's dark blue "s" would vanish, so on hover it takes the text colour like the other dark marks. */
:root[data-theme="dark"] .node__btn:hover .tool--skool, :root[data-theme="dark"] .node.is-open .tool--skool { --sk1: var(--text); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .node__btn:hover .tool--skool, :root:not([data-theme="light"]) .node.is-open .tool--skool { --sk1: var(--text); }
}
.node__btn:hover .tool--circle, .node.is-open .tool--circle { --circle-dot: #506CF0; }

/* Bot card: one line on what it does. It opens above the bot, and it never takes a touch, so a phone
   keeps scrolling under it. */
.pop {
  position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 5; width: min(18rem, 100%);
  display: none; padding: 12px 16px; pointer-events: none;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-btn);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
  font-size: var(--fs-13); line-height: 1.5;
}
@media (min-width: 600px) { .pop { width: max(100%, 16rem); } }
.node--lead .pop { width: 16rem; }
@media (hover: hover) and (pointer: fine) {
  .node:hover .pop { display: block; }
}
.node:has(.node__btn:focus-visible) .pop, .node.is-open .pop { display: block; }
.node:hover, .node.is-open, .node:has(.node__btn:focus-visible) { z-index: 6; }

/* Cost asterisk: a small button; hover, focus or a tap shows a short tip. */
.ast { position: relative; display: inline-block; vertical-align: super; margin-left: 2px; }
.ast__btn {
  min-width: 24px; min-height: 24px; padding: 0 4px; border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--muted); font: inherit; font-size: var(--fs-15); font-weight: 600; line-height: 1; cursor: help;
}
.ast__btn:hover, .ast.is-open .ast__btn { background: var(--raised); color: var(--text); }
.ast__tip {
  position: absolute; left: 50%; bottom: calc(100% + 6px); z-index: 7; width: min(18rem, calc(100vw - 48px));
  display: none; padding: 10px 14px; translate: -50% 0;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-btn);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
  font-size: var(--fs-13); font-weight: 400; letter-spacing: 0; line-height: 1.5; color: var(--text); text-align: left;
}
.ast__tip::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 8px; }
@media (hover: hover) and (pointer: fine) { .ast:hover .ast__tip { display: block; } }
.ast:has(.ast__btn:focus-visible) .ast__tip, .ast.is-open .ast__tip { display: block; }
/* Escape hides a tip that hover or focus holds open, until the pointer or focus leaves. */
.ast.is-hushed .ast__btn + .ast__tip { display: none; }
@media (max-width: 599px) { .ast__tip { left: auto; right: -8px; translate: none; } }
/* The Total's tip holds the table's fine print and sources, so it is wider and opens leftward from the
   number at the table's right edge. */
.ast--total .ast__tip { left: auto; right: -8px; translate: none; width: min(28rem, calc(100vw - 48px)); white-space: normal; }
.ast__tip a { color: inherit; text-underline-offset: 3px; }
.ast__src { display: block; margin-top: 8px; color: var(--muted); }
.ast__src a:hover { color: var(--text); }

/* Role by role: collapsed under the chart. */
.rates { margin-top: 32px; border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--bg); }
.rates summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 52px; padding: 8px 16px; cursor: pointer; list-style: none; border-radius: var(--r-btn);
  font-size: var(--fs-15); font-weight: 500;
}
.rates summary::-webkit-details-marker { display: none; }
.rates summary::after { content: "+"; font-weight: 400; font-size: var(--fs-18); color: var(--muted); transition: transform 200ms ease; }
.rates summary:hover::after { color: var(--text); }
.rates[open] summary::after { transform: rotate(45deg); }
.rates table { width: calc(100% - 32px); margin: 0 16px 16px; border-collapse: collapse; font-size: var(--fs-13); line-height: 1.5; }
.rates th, .rates td { padding: 10px 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.rates thead th { padding-top: 4px; font-weight: 500; color: var(--muted); }
.rates tbody th { font-weight: 500; padding-right: 16px; }
.rates tbody th span { display: block; font-weight: 400; color: var(--muted); }
.rates td, .rates thead th:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rates tfoot th, .rates tfoot td {
  padding-top: 12px; border-top: 2px solid var(--text); vertical-align: baseline; font-size: var(--fs-15); font-weight: 700;
}

/* The price and the button, centred under the table. */
.setup__end { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 24px; margin-top: 32px; }
/* The founding offer, as on pricing.html: a small label, the price, then the regular price muted and struck. */
.setup__offer { display: grid; gap: 4px; text-align: center; }
.setup__label, .setup__regular { font-size: var(--fs-13); line-height: 1.5; color: var(--muted); }
.setup__label { font-weight: 500; }
.setup__price { font-size: var(--fs-28); font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; }
@media (max-width: 599px) { .setup__end .btn { width: 100%; } }

/* ---------- Phone frame: the agents page, Watch it work and the large testimonial ---------- */

/* A real phone. A 6px bezel (outer radius 44px, inner 38px) around the screen. Round 15: one clock. Each
   recording has its own status bar (9:41, signal, battery), so it fills the top of the screen and the frame
   adds only the Dynamic Island, laid over the middle of that status bar where a real one sits (top margin
   in % of the screen's width). Under the 9:16 recording, a home indicator strip in the recording's own edge
   colour (--screen, set per phone when it is not #141414), as tall as before (0.19 of the width), so the
   screen is 9:17.7. Every phone is the same width and the screen's aspect-ratio holds its size before
   anything loads. While a recording is cued past its opening, site.js lays its poster over it
   (.phone__poster) in the same cell. */
.phone {
  --screen: #141414; --screen-ink: #EDEDED;
  width: min(100%, 274px); padding: 6px;
  background: #0A0A0A; border-radius: 44px;
  box-shadow: 0 0 0 1px var(--line-strong), 0 32px 64px -24px rgba(0, 0, 0, 0.45), 0 12px 32px -8px rgba(0, 0, 0, 0.2);
}
.phone__screen {
  position: relative;
  display: grid; grid-template-rows: auto 1fr;
  aspect-ratio: 9 / 17.7; overflow: hidden; border-radius: 38px;
  background: var(--screen); color: var(--screen-ink);
}
.phone__island {
  position: absolute; top: 0; left: 50%; z-index: 1; width: 30%; aspect-ratio: 84 / 24; margin-top: 2.4%;
  translate: -50% 0; border-radius: var(--r-pill); background: #000000; pointer-events: none;
}
.phone__screen::after { content: ""; grid-row: 2; justify-self: center; align-self: center; width: 36%; height: 5px; border-radius: var(--r-pill); background: var(--screen-ink); opacity: 0.6; }
.phone video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; background: var(--screen); }
.phone__screen > video, .phone__poster { grid-row: 1; grid-column: 1; }
.phone__poster { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; pointer-events: none; transition: opacity 150ms ease; }
.phone__poster.is-hidden { opacity: 0; }
/* The recording takes focus in place of the old play button; the ring goes on the phone, outside the screen. */
.phone video:focus-visible { outline: none; border-radius: 0; }
.phone:has(video:focus-visible) { outline: 2px solid var(--text); outline-offset: 4px; }
/* Smaller phones (Watch it work, the large testimonial): the same frame scaled down, radii in step. */
.phone--sm { width: min(100%, 220px); padding: 5px; border-radius: 30px; }
.phone--sm .phone__screen { border-radius: 25px; }
@media (min-width: 900px) { .phone--sm { border-radius: 36px; } .phone--sm .phone__screen { border-radius: 31px; } }
/* The testimonial phone (home and the deck's proof slide): a client's own screenshot, shown whole at its own
   size (no 9:16 crop). It has no status bar, so a dark strip in its edge colour holds the island above it, and
   the home indicator sits in a strip under it. The bezel and radii scale with the larger phone; the shadow is
   softer and wider. */
.phone--chat {
  --screen: #0A0A0A; width: 100%; padding: 8px; border-radius: 52px;
  box-shadow: 0 0 0 1px var(--line-strong), 0 48px 96px -32px rgba(0, 0, 0, 0.45), 0 16px 40px -12px rgba(0, 0, 0, 0.2);
}
.phone--chat .phone__screen { aspect-ratio: auto; padding-top: 13%; border-radius: 44px; }
.phone--chat .phone__island { margin-top: 3.4%; }
.phone__chat { display: block; width: 100%; height: auto; }
.phone--chat .phone__screen::after { margin-block: 5% 4%; }

/* ---------- Pricing ---------- */

.price-head { padding-block: 48px 40px; text-align: center; }
.price-head h1 { font-size: var(--fs-40); line-height: 1.1; letter-spacing: -0.03em; }
.price-head p { margin-inline: auto; }
.price-head__num { margin-top: 16px; font-size: var(--fs-display); font-weight: 600; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.price-head__unit { margin-top: 4px; font-size: var(--fs-28); font-weight: 500; line-height: 1.25; }
/* The founding offer: a small label under the H1, and the regular price after it, muted and struck. */
.price-head__label { margin-top: 12px; font-size: var(--fs-13); font-weight: 500; line-height: 1.4; color: var(--muted); }
.price-head__regular { margin-top: 12px; font-size: var(--fs-15); line-height: 1.5; color: var(--muted); }
@media (min-width: 900px) { .price-head { padding-block: 72px 56px; } }

/* Four steps. From 800px: one row, a hairline joining each step to the next. */
.price-steps { display: grid; gap: 12px; }
@media (min-width: 800px) { .price-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; } }
.price-step {
  position: relative; display: grid; justify-items: center; align-content: start; gap: 4px; padding: 24px 16px;
  text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
}
@media (min-width: 800px) {
  .price-step { padding-block: 32px; }
  .price-step:not(:last-child)::after { content: ""; position: absolute; left: 100%; top: 50%; width: 33px; height: 1px; background: var(--line-strong); }
}
.price-step__n { font-size: var(--fs-13); font-weight: 500; line-height: 1.4; color: var(--muted); }
.price-step__name { font-size: var(--fs-18); font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; }
.price-step__note { font-size: var(--fs-13); line-height: 1.5; color: var(--muted); }
.step__sep { margin-inline: 4px; color: var(--muted); }

/* Hiring a team in grey, Limitless lifted. Side by side at every width. */
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
@media (min-width: 800px) { .compare { gap: 16px; margin-top: 32px; } }
.compare__card { display: grid; justify-items: center; gap: 4px; padding: 24px 12px; text-align: center; border: 1px solid var(--line); border-radius: var(--r-card); }
.compare__card--hire { color: var(--muted); }
.compare__card--ours { background: var(--surface); border-color: var(--line-strong); box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.18); }
.compare__name { font-size: var(--fs-15); font-weight: 500; line-height: 1.4; }
.compare__num { font-size: var(--fs-28); font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.compare__unit { font-size: var(--fs-13); line-height: 1.5; color: var(--muted); }
@media (min-width: 600px) {
  .compare__card { padding: 32px 24px; }
  .compare__name { font-size: var(--fs-18); }
  .compare__num { font-size: 3rem; }
  .compare__unit { font-size: var(--fs-15); }
}
.compare__card--ours .compare__unit { color: var(--text); }

.checks { display: grid; gap: 12px; margin-top: 24px; }
.check { display: flex; align-items: center; gap: 12px; font-size: var(--fs-18); line-height: 1.45; }
.check svg { width: 20px; height: 20px; flex: none; color: var(--leaf); }

/* ---------- FAQ: an accordion in one card (home and pricing, both lists from scripts/faq.mjs) ---------- */

.faq__list { margin-top: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.faq details + details { border-top: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
  min-height: 52px; padding: 14px 20px; cursor: pointer; list-style: none; text-align: left; border-radius: var(--r-card);
  font-size: var(--fs-15); font-weight: 500; line-height: 1.45;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 16px; height: 16px; flex: none; color: var(--muted); transition: transform 200ms ease, color 150ms ease; }
.faq summary:hover svg { color: var(--text); }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq details p { padding: 0 20px 20px; color: var(--muted); }
.faq details p a { color: var(--text); text-underline-offset: 3px; }

/* ---------- Agents page ---------- */

.section--tight { padding-block: 0 var(--section); }

/* Agent rows. Phone: the card, then the recording. From 900px: the phone (its 274px frame and the stage's
   padding) and the card side by side, centred as a pair, swapping sides row by row (the phone on the left in
   the first row). */
.agents { display: grid; gap: 72px; }
.agent { display: grid; gap: 32px; justify-items: center; scroll-margin-top: 88px; }
.agent__card { width: 100%; max-width: 480px; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
@media (min-width: 900px) {
  .agents { gap: 96px; }
  .agent { grid-template-columns: minmax(0, 480px) 290px; justify-content: center; align-items: center; gap: 96px; }
  .agent:nth-child(odd) { grid-template-columns: 290px minmax(0, 480px); }
  .agent:nth-child(odd) .agent__stage { order: -1; }
}

.agent__head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.bot__avatar { width: 52px; height: 52px; flex: none; display: grid; place-items: center; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-btn); }
.bot__avatar .avatar { width: 34px; height: 34px; }
.bot__name { font-size: var(--fs-18); line-height: 1.3; }

/* Three steps; the active one is full contrast with a hairline that fills as the recording plays. */
.agent__steps li {
  position: relative;
  display: grid; grid-template-columns: 28px 1fr; gap: 16px; align-items: start;
  padding-block: 14px; border-top: 1px solid var(--line);
  color: var(--muted); transition: color 200ms ease;
}
.agent__steps li::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: var(--text); transform: scaleX(var(--p, 0)); transform-origin: left;
  opacity: 0; transition: opacity 200ms ease, transform 250ms linear;
}
.agent__num {
  width: 28px; height: 28px; display: grid; place-items: center;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  font-size: var(--fs-13); font-weight: 500; line-height: 1;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.agent__steps li > span:last-child { padding-top: 3px; }
.agent__steps li[aria-current="step"] { color: var(--text); }
.agent__steps li[aria-current="step"]::before { opacity: 1; }
.agent__steps li[aria-current="step"] .agent__num { background: var(--pill); border-color: var(--pill); color: var(--on-pill); }

/* The tools the agent works in, monochrome, under the steps. */
.agent__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); }
.agent__tools .tool__mark { width: 20px; height: 20px; }

/* The recording: the phone straight on the page, centred. A tap or click on the video plays or pauses it. */
.agent__stage { display: grid; justify-items: center; width: 100%; padding: 0 8px; }
.agent__stage video { cursor: pointer; }

/* More agents: icon over name. Three across, nine from 1100px. */
.more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 32px; }
@media (min-width: 1100px) { .more { grid-template-columns: repeat(9, minmax(0, 1fr)); margin-top: 40px; } }
.more__tile {
  display: grid; justify-items: center; align-content: start; gap: 8px; padding: 16px 8px;
  text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-btn);
  font-size: var(--fs-13); font-weight: 500; line-height: 1.3;
}
.more__tile .avatar { width: 32px; height: 32px; }
.more__tile .nowrap { white-space: nowrap; }

/* ---------- Footer: the logo and the same links as the header ---------- */

.site-footer { padding-block: 32px; border-top: 1px solid var(--line); }
.site-footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.site-footer nav ul { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.site-footer nav a:not(.btn) { font-size: var(--fs-13); font-weight: 500; color: var(--muted); text-decoration: none; transition: color 150ms ease; }
.site-footer nav a:not(.btn):hover, .site-footer nav a[aria-current="page"] { color: var(--text); }

/* ---------- Booking placeholder toast ---------- */

.toast {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 40;
  display: none; align-items: center; gap: 16px; max-width: 480px; margin-inline: auto;
  padding: 16px 16px 16px 24px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-card);
}
.toast:target { display: flex; }
.toast p { flex: 1; }


/* ---------- Home, round 20 (design r20-v4, approved 26 Oct) ---------- */

/* Built from the approved r20-v4 design. Every rule that touches a class another page also uses is scoped to
   body.home, so agents, your team, pricing and the deck keep their look. Brand colours that carry small text
   or a numeral are mixed 22% toward black in light mode, so they clear AA on the light surfaces; dark mode
   uses the brighter tunes as they are, with dark numerals on the timeline nodes. */

/* Round 20b: on a phone the home header is one row, the logo, the toggle and Book a call; the page links come
   back from 600px. The footer still links every page. */
@media (max-width: 599.98px) {
  .home .site-header .wrap { grid-template-rows: 56px; grid-template-areas: "brand end"; }
  .home .nav { display: none; }
}

.home .theme-toggle { width: 36px; height: 36px; border: 1px solid var(--line-strong); color: var(--text); }
.home .theme-toggle::after { inset: -4px; }
.home .theme-toggle svg { width: 18px; height: 18px; }

.lede { margin-top: 12px; max-width: 60ch; color: var(--muted); font-size: var(--fs-18); line-height: 1.45; }
.home .actions { gap: 12px; margin-top: 24px; }

/* 1. Hero: text left, the inbox phone right from 900px. */
.home .hero { padding-block: 40px var(--section); overflow: hidden; }
.home .hero__grid { gap: 48px; align-items: center; }
.home .hero__eyebrow { margin-bottom: 0; }
.home .hero h1 { margin-top: 12px; max-width: 16ch; }
.hero__sub { margin-top: 16px; max-width: 46ch; font-size: var(--fs-18); line-height: 1.45; color: var(--sub); }
.hero__fine { margin-top: 16px; font-size: var(--fs-13); color: var(--muted); }
.hero__proof {
  display: grid; gap: 6px; width: fit-content; margin-top: 28px; padding: 16px 20px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-card);
  color: inherit; text-decoration: none;
}
.hero__quote { font-size: var(--fs-18); font-weight: 500; line-height: 1.35; color: var(--text); }
.hero__by { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-13); color: var(--muted); }
.hero__by .avatar { width: 18px; height: 18px; }
.hero__proof:hover .hero__quote { text-decoration: underline; text-underline-offset: 3px; }
.hero__device { display: grid; justify-items: center; gap: 16px; }
.hero__caption { max-width: none; font-size: var(--fs-13); color: var(--muted); text-align: center; }
@media (min-width: 900px) {
  .home .hero { padding-block: 56px var(--section); }
  .home .hero__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 64px; }
}

/* 2. Tools: the 19b row, then the trust line under a hairline. */
.trust { display: grid; justify-items: center; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.trust__line { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-15); line-height: 1.45; color: var(--muted); }
.trust__line strong { color: var(--text); font-weight: 600; }
.trust__line svg { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--c-dm); }
@media (min-width: 600px) { .trust__line { font-size: var(--fs-18); align-items: center; } }

/* 3. Sound familiar?: the 19b rows with a time stamp over each before line. */
.ba__pain { display: grid; gap: 4px; }
.ba__stamp { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--c-follow) 78%, #000); }
:root[data-theme="dark"] .ba__stamp { color: var(--c-follow); }
.home .ba__arrow { display: none; transform: none; }
@media (min-width: 900px) { .home .ba__arrow { display: block; } }

/* 4. The shift. */
.shift h2 { max-width: 22ch; font-size: var(--fs-40); line-height: 1.1; letter-spacing: -0.03em; }
.shift__body { display: grid; gap: 12px; max-width: 60ch; margin-top: 20px; color: var(--sub); font-size: var(--fs-18); line-height: 1.45; }
.shift__end { margin-top: 20px; font-size: var(--fs-18); font-weight: 600; }

/* 5. One idea, followed all the way to a client: a numbered timeline, a day label beside it from 900px. */
.idea__head { display: grid; gap: 12px; }
.idea__head h2 { font-size: var(--fs-28); line-height: 1.25; }
.idea__head p { font-size: var(--fs-18); line-height: 1.45; color: var(--muted); }
.idea__head p strong { color: var(--text); font-weight: 600; }
.tl { position: relative; display: grid; gap: 20px; margin-top: 32px; }
.tl::before {
  content: ""; position: absolute; left: 15px; top: 16px; bottom: 16px; width: 2px; border-radius: 2px; opacity: 0.35;
  background: linear-gradient(var(--c-content), var(--c-content) 40%, var(--c-dm) 55%, var(--c-dm) 70%, var(--c-assistant));
}
.tl__step { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 16px; }
.tl__node {
  position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: color-mix(in srgb, var(--c) 78%, #000); color: #FFFFFF; font-size: var(--fs-13); font-weight: 600;
  box-shadow: 0 0 0 6px var(--bg);
}
:root[data-theme="dark"] .tl__node { background: var(--c); color: #141414; }
.tl__card { display: grid; gap: 20px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.tl__when { font-size: var(--fs-13); font-weight: 600; color: color-mix(in srgb, var(--c) 78%, #000); }
:root[data-theme="dark"] .tl__when { color: var(--c); }
.tl__text { margin-top: 6px; font-size: var(--fs-18); font-weight: 500; line-height: 1.45; letter-spacing: -0.01em; }
.tl__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.ok {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px 0 8px; border-radius: var(--r-pill);
  background: var(--text); color: var(--bg); font-size: var(--fs-13); font-weight: 600;
}
.ok svg { width: 14px; height: 14px; }
.ok--send { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.tl__shot {
  justify-self: start; width: min(100%, 300px); overflow: hidden; border-radius: 18px; background: #0A0A0A;
  box-shadow: 0 0 0 1px var(--line-strong), 0 24px 48px -20px rgba(0, 0, 0, 0.35);
}
.tl__shot img { width: 100%; height: auto; }
.tl__shot figcaption { padding: 8px 12px 10px; font-size: 11px; color: #9A9A9A; background: #0A0A0A; }
@media (max-width: 899px) { .tl__day { display: none; } }
@media (min-width: 900px) {
  .tl { gap: 24px; margin-top: 40px; }
  .tl::before { left: calc(8rem + 24px + 15px); }
  .tl__step { grid-template-columns: 8rem 32px minmax(0, 1fr); gap: 0 24px; }
  .tl__day { padding-top: 26px; font-size: var(--fs-13); font-weight: 600; color: var(--muted); text-align: right; }
  .tl__node { margin-top: 22px; }
  .tl__card { grid-template-columns: minmax(0, 1fr) 280px; gap: 40px; padding: 28px 32px; align-items: start; }
  .tl__shot { justify-self: end; }
}

/* 6. Imagine what becomes possible: a hairline list, two columns from 900px, then the admin week card. */
.possible { display: grid; gap: 0 48px; margin-top: 32px; border-top: 1px solid var(--line); }
.possible li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.possible svg { width: 20px; height: 20px; margin-top: 2px; color: var(--leaf); }
.possible__lead { display: block; font-size: var(--fs-18); font-weight: 500; line-height: 1.35; }
.possible__more { display: block; margin-top: 4px; color: var(--muted); }
@media (min-width: 900px) {
  .possible { grid-template-columns: 1fr 1fr; margin-top: 40px; border-top: 0; }
  .possible li:nth-child(-n+2) { border-top: 1px solid var(--line); }
}
.admin-week { display: grid; gap: 12px; margin-top: 24px; padding: 20px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.admin-week__title { font-size: var(--fs-18); line-height: 1.3; }
.admin-week p { max-width: 72ch; color: var(--muted); }
.admin-week p strong { color: var(--text); font-weight: 500; }
@media (min-width: 900px) { .admin-week { padding: 24px 28px; } }

/* 7. Seats: eight cards, each with its "So you" line. */
.seatcards { display: grid; gap: 12px; margin-top: 32px; }
.seatcards__more { margin-top: 24px; }
/* A column; the divider and the "So you" line sit at the bottom (margin-top: auto). Where subgrid works, each
   card spans three rows of the list grid (name, line, outcome), so across a row the cards are the same height
   and every divider and "So you" line starts at the same place. The outcome is the main text, one step up and
   in the text colour; the line above it is the quiet one. */
.seatcard { display: flex; flex-direction: column; gap: 12px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.seatcard h3 { display: flex; align-items: center; gap: 10px; font-size: var(--fs-18); line-height: 1.3; }
.seatcard h3 .avatar { width: 28px; height: 28px; }
.seatcard p { color: var(--muted); }
.seatcard .soyou { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); color: var(--text); font-size: var(--fs-18); line-height: 1.45; }
@supports (grid-template-rows: subgrid) {
  .seatcard { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 12px; }
  .seatcard .soyou { margin-top: 0; }
}
.soyou b { font-weight: 600; color: color-mix(in srgb, var(--c) 78%, #000); }
:root[data-theme="dark"] .soyou b { color: var(--c); }
@media (min-width: 600px) { .seatcards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .seatcards { grid-template-columns: repeat(4, 1fr); } }

/* 8. Compared with hiring an assistant: rows on hairlines, a table from 900px. */
.cmp { margin-top: 32px; border-top: 1px solid var(--line); }
.cmp__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.cmp__row--head { display: none; }
.cmp__label { font-size: var(--fs-13); font-weight: 600; color: var(--muted); }
.cmp__them { color: var(--muted); }
.cmp__them::before { content: "Assistant: "; font-weight: 600; }
.cmp__us { display: flex; gap: 8px; align-items: flex-start; font-weight: 500; }
.cmp__us svg { flex: none; width: 20px; height: 20px; color: var(--c-dm); }
.cmp__tools { max-width: 72ch; margin-top: 20px; color: var(--muted); }
@media (min-width: 900px) {
  .cmp { margin-top: 40px; }
  .cmp__row { grid-template-columns: 12rem minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: center; padding: 20px 0; }
  .cmp__row--head { display: grid; padding: 0 0 12px; font-size: var(--fs-13); font-weight: 600; color: var(--muted); }
  .cmp__them::before { content: none; }
}

/* 9. Watch it work: six phones in one row from 900px. */
@media (min-width: 900px) { .home .watch { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; } }

/* 10. How it works: the 19b cards and guarantee, then two promises. */
.promises { display: grid; gap: 16px; margin-top: 16px; }
.promise { padding: 20px 24px; border: 1px solid var(--line); border-radius: var(--r-card); }
.promise__title { font-size: var(--fs-18); line-height: 1.3; }
.promise p { margin-top: 6px; color: var(--muted); }
@media (min-width: 800px) { .promises { grid-template-columns: 1fr 1fr; } }

/* 13. Who this is for: the check in the darker green, so it clears 3:1 on the light card. */
.home .fit__ico--yes { color: var(--leaf); }

/* 14. Final call. */
.final { text-align: center; }
.final h2 { max-width: 20ch; margin-inline: auto; font-size: var(--fs-40); line-height: 1.1; letter-spacing: -0.03em; }
.final__sub { margin: 12px auto 0; font-size: var(--fs-18); color: var(--sub); }
.final__fine { max-width: 46ch; margin: 16px auto 0; font-size: var(--fs-15); color: var(--muted); }
.final .actions { justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}