/* GroupChatRobot marketing page. Colours, type and space come from tokens.css.
   Ink blue means you and actions. Manila means the robot. Left-aligned; only the footer mark is centred. */

*, *::before, *::after { box-sizing: border-box; }
:root { --mark-fold: #E3C77E; --header-h: 56px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --mark-fold: #EDC45F; } }
:root[data-theme="dark"] { --mark-fold: #EDC45F; }

html { scroll-padding-top: calc(var(--header-h) + var(--space-4)); }
body { overflow-x: clip; }
img, svg { max-width: 100%; }
a { color: var(--link); }
a:hover { color: var(--accent-hover); }
p { margin: 0 0 var(--space-4); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--space-4); top: -100px; z-index: 20; padding: var(--space-2) var(--space-4); background: var(--surface); color: var(--text); border-radius: var(--radius-sm); box-shadow: var(--elev-2); }
.skip:focus { top: var(--space-2); }

.wrap { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.narrow > * { max-width: 760px; }
.measure { max-width: var(--measure); }

/* ---- type ---- */
.display, .h2, .brand__name {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
.display { font-size: var(--fs-hero); line-height: var(--lh-display); font-weight: var(--fw-display); margin: 0 0 var(--space-4); max-width: 13ch; }
.h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); font-weight: var(--fw-heading); margin: 0 0 var(--space-4); }
.h3 { font-family: var(--font-display); letter-spacing: var(--tracking-display); font-size: var(--fs-h3); line-height: var(--lh-heading); font-weight: var(--fw-heading); margin: 0 0 var(--space-3); }
#whatsapp { margin-top: var(--section-y); }
.lede { font-size: var(--fs-lede); line-height: 1.45; color: var(--text); }
.split__text > p:not(.lede), .trio__text > p:not(.lede), .aside { color: var(--text-muted); }

/* ---- header ---- */
.top { position: sticky; top: 0; z-index: 10; height: var(--header-h); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--hairline); }
@supports not (backdrop-filter: blur(1px)) { .top { background: var(--bg); } }
.top__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: var(--space-4); }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--text); text-decoration: none; min-height: 44px; }
.brand:hover { color: var(--text); }
.brand__name { font-size: 1.25rem; font-weight: 650; letter-spacing: -0.01em; }
.mark { flex: none; display: block; }
.mark__body { fill: currentColor; }
.mark__fold { fill: var(--mark-fold); }
.top__link { font-size: var(--fs-small); font-weight: var(--fw-strong); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; padding: 0 var(--space-1); }
.top__link:hover { text-decoration: underline; }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 var(--space-5); border-radius: var(--radius-md); font: var(--fw-strong) var(--fs-body) / 1.2 var(--font-body); text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out); text-align: center; }
.btn--primary { background: var(--accent); color: var(--accent-text); }
.btn--primary:hover { background: var(--accent-hover); color: var(--accent-text); }
.btn--secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn--secondary:hover { color: var(--text); border-color: var(--dia-line); }
.btn--quiet { background: transparent; color: var(--link); border-color: var(--border); min-height: 48px; padding: 0 var(--space-4); }
.btn--quiet:hover { background: var(--accent-soft); color: var(--link); }
.cta { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-5); }
.cta--end { flex-direction: row; }

/* ---- hero ---- */
.hero { padding: var(--space-5) 0 var(--space-7); }
.hero__grid { display: grid; gap: var(--space-6); }
.hero__grid > * { min-width: 0; }
.trust { margin: var(--space-3) 0 0; font-size: var(--fs-small); color: var(--text-muted); }
.code { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--hairline); max-width: 460px; }
.code__label { font-size: var(--fs-small); font-weight: var(--fw-strong); }
.code__input { width: 100%; min-width: 0; min-height: 48px; padding: 0 var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--text); font: 500 1rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.code__input::placeholder { color: var(--text-muted); opacity: 0.7; }
.code__input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: transparent; }
.code__help { grid-column: 1 / -1; margin: 0; font-size: var(--fs-caption); color: var(--text-muted); }
.code__help[data-error] { color: var(--text); font-weight: var(--fw-strong); }

.device { background: var(--surface); border: 1px solid var(--border); border-radius: 30px; padding: 7px; box-shadow: var(--elev-phone); max-width: 404px; }
.device__screen { display: block; width: 100%; height: auto; border-radius: 23px; }
.shot-caption { margin-top: var(--space-4); font-size: var(--fs-caption); color: var(--text-muted); max-width: 404px; }
.hero__shot, .shot, .diagram { margin: 0; }
/* Continue to <room>: only for a device that already has rooms (site.js). */
.resume { margin: 0 0 var(--space-4); font-size: var(--fs-small); }
.resume__link { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; white-space: nowrap; font-weight: var(--fw-strong); text-decoration: none; }
.resume__link:hover { text-decoration: underline; }
.resume__link::after { content: ""; flex: none; width: 7px; height: 7px; margin-left: var(--space-2); border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); }
.resume__name { margin-left: 0.3em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* The hero capture is cut at the Today pill and above the composer, so it needs no crop here. The project and grant
   captures are framed from their Yesterday day pill down, so every frame opens on a whole pill, never on a cut bubble,
   and the header's member count (which drifts as people join the sample rooms) stays out of the picture.
   Project keeps capture rows 297 to 746, grant rows 222 to 733. Recheck these ratios whenever a capture changes. */
.shot .device__screen { aspect-ratio: 390 / 511; object-fit: cover; object-position: 50% 100%; }
.shot--project .device__screen { aspect-ratio: 390 / 449; }

/* ---- sections ---- */
.band, .plain { padding: var(--section-y) 0; }
.band { background: var(--bg-band); }
.plain { background: var(--bg); }

.split { display: grid; gap: var(--space-6); align-items: start; }
.trio { display: grid; gap: var(--space-6); align-items: start; }

.diagram svg { display: block; width: 100%; max-width: 420px; height: auto; }
.diagram figcaption { margin-top: var(--space-3); font-size: var(--fs-caption); color: var(--text-muted); max-width: 420px; }

.steps { list-style: none; counter-reset: step; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-4); }
.steps li { counter-increment: step; position: relative; padding-left: 44px; max-width: var(--measure); }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--link); font-weight: 700; font-size: var(--fs-small); display: grid; place-items: center; }
.steps strong { display: block; }

.facts { margin: var(--space-5) 0; display: grid; gap: var(--space-4); }
.facts div { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4); max-width: var(--measure); }
.facts dt { font-weight: 700; margin-bottom: var(--space-1); }
.facts dd { margin: 0; }

/* comparison: stacked cards on phones, a table from 760px */
.compare { width: 100%; border-collapse: collapse; margin: var(--space-5) 0 var(--space-6); }
.compare thead { display: none; }
.compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; }
.compare tr { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-3); }
.compare th[scope="row"] { font-family: var(--font-body); font-size: var(--fs-body); font-weight: 700; text-align: left; margin-bottom: var(--space-3); }
.compare td { padding: 0; font-size: var(--fs-small); }
.compare td + td { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--hairline); }
.compare td::before { content: attr(data-label); display: block; font-size: var(--fs-caption); font-weight: var(--fw-strong); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-1); }
.compare td:last-child::before { color: var(--link); }
.aside { margin-top: var(--space-5); }

.rooms { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-4); }
.room__link { display: grid; grid-template-rows: auto auto auto 1fr; gap: var(--space-1); height: 100%; padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text); text-decoration: none; transition: border-color var(--dur-1) var(--ease-out); }
.room__link:hover { color: var(--text); border-color: var(--accent); }
.spot { display: block; width: 120px; margin-bottom: var(--space-2); }
.spot svg { display: block; width: 120px; height: auto; }
.room__kind { font-size: var(--fs-caption); font-weight: var(--fw-strong); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.room__name { font-weight: 700; font-size: var(--fs-body); line-height: 1.3; color: var(--link); }
.room__text { font-size: var(--fs-small); color: var(--text-muted); }
.more { margin-top: var(--space-5); }
.textlink { font-weight: var(--fw-strong); display: inline-flex; min-height: 44px; align-items: center; }

.faq { margin-top: var(--space-5); border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); min-height: 56px; padding: var(--space-3) 0; font-weight: var(--fw-strong); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--dur-1) var(--ease-out); }
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq details p { padding-bottom: var(--space-4); color: var(--text-muted); }

.foot { padding: var(--space-7) 0; border-top: 1px solid var(--hairline); }
.foot__inner { display: grid; justify-items: center; gap: var(--space-4); text-align: center; }
.mark--foot { color: var(--text); }
.foot__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-5); }
.foot__nav a { font-weight: var(--fw-strong); min-height: 44px; display: inline-flex; align-items: center; }
.foot__note { font-size: var(--fs-caption); color: var(--text-muted); margin: 0; }

/* ---- phone: keep the first screen to headline, buttons, trust line, code and the top of the room ---- */
@media (max-width: 480px) {
  .display { max-width: none; }
  .hero { padding-top: var(--space-4); }
  .hero__grid { gap: var(--space-5); }
  .cta .btn { width: 100%; }
  .code { margin-top: var(--space-4); padding-top: var(--space-3); }
  .code__help:not([data-error]) { display: none; }
  .cta--end .btn { width: 100%; }
}

@media (min-width: 640px) {
  .rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta { flex-direction: row; flex-wrap: wrap; }
}

@media (min-width: 760px) {
  .compare thead { display: table-header-group; }
  .compare { display: table; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); border-collapse: separate; border-spacing: 0; overflow: hidden; }
  .compare tbody { display: table-row-group; }
  .compare tr { display: table-row; background: none; border: 0; padding: 0; margin: 0; }
  .compare th, .compare td { display: table-cell; padding: var(--space-4) var(--space-5); vertical-align: top; text-align: left; border-top: 1px solid var(--hairline); }
  .compare thead th { border-top: 0; font-size: var(--fs-caption); font-weight: var(--fw-strong); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
  .compare thead th:last-child { color: var(--link); }
  .compare th[scope="row"] { margin: 0; width: 22%; }
  .compare td { font-size: var(--fs-body); width: 39%; }
  .compare td + td { margin: 0; border-top: 1px solid var(--hairline); padding-top: var(--space-4); }
  .compare td::before { display: none; }
}

@media (min-width: 960px) {
  :root { --header-h: 64px; }
  .hero { padding: var(--space-8) 0 0; }
  .hero__grid { grid-template-columns: minmax(0, 1fr) 404px; column-gap: var(--space-9); align-items: start; }
  .hero__copy { padding-top: var(--space-7); }
  .display { max-width: none; }
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); column-gap: var(--space-9); }
  .split > .diagram { justify-self: end; width: 100%; }
  .trio { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-7); }
  .trio__text { grid-column: 1 / -1; }
}

@media (min-width: 1200px) {
  .trio { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); }
  .trio__text { grid-column: auto; }
  .rooms { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Miss ChatGPT group chats? (#chatgpt): four plain points and one button. */
.gpt-list { margin: var(--space-5) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-4); }
.gpt-list li { padding-left: var(--space-4); border-left: 3px solid var(--border); color: var(--text-muted); }
.gpt-list strong { display: block; color: var(--text); }
.cta-row { margin-top: var(--space-6); }

/* ---- privacy and terms (privacy.html, terms.html): running text, so it takes the full text colour ---- */
.legal { padding: var(--space-6) 0 var(--section-y); }
.legal h1 { margin-bottom: var(--space-1); }
.legal__date { font-size: var(--fs-small); color: var(--text-muted); }
.legal h2 { margin-top: var(--space-7); }
.legal ul { margin: 0 0 var(--space-4); padding-left: var(--space-5); max-width: var(--measure); }
.legal li { margin-bottom: var(--space-3); }
.legal li::marker { color: var(--text-muted); }
.foot__nav a[aria-current="page"] { color: var(--text); text-decoration: none; }