/* Page styles. Every colour, size, radius and duration comes from tokens.css (brand/). */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--ink);
}

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--body-size);
  line-height: var(--body-line);
  font-weight: var(--weight-regular);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
svg { display: block; }

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 10;
  padding: var(--space-3) var(--space-4);
  background: var(--send);
  color: var(--on-send);
  font-weight: var(--weight-bold);
  border-radius: var(--radius-bubble) var(--radius-bubble) var(--radius-send) var(--radius-bubble);
}
.skip:focus { top: var(--space-3); }

/* ---------- Surfaces ---------- */

.wrap {
  width: 100%;
  max-width: calc(var(--content-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}

.band { padding-block: var(--section-y); }
.band--paper { background: var(--paper); }
.band--paper-2 { background: var(--paper-2); }
.band--ink { background: var(--ink); color: var(--on-ink); }
.band--send { background: var(--send); color: var(--on-send); }

:focus-visible {
  outline: var(--focus-width) solid var(--focus-on-paper);
  outline-offset: var(--focus-offset);
}
.band--ink :focus-visible, .panel :focus-visible { outline-color: var(--focus-on-ink); }
.band--send :focus-visible { outline-color: var(--focus-on-send); }

/* ---------- Type ---------- */

.display {
  font-size: var(--display-size);
  line-height: var(--display-line);
  letter-spacing: var(--display-track);
  font-weight: var(--weight-heavy);
}
.display span { display: block; }
.display .sent { display: inline; color: var(--send); }

h2 {
  font-size: var(--h2-size);
  line-height: var(--h2-line);
  letter-spacing: var(--h2-track);
  font-weight: var(--weight-heavy);
  max-width: 24ch;
  text-wrap: balance;
}

h3 {
  font-size: var(--h3-size);
  line-height: var(--h3-line);
  letter-spacing: var(--h3-track);
  font-weight: var(--weight-bold);
}

.lead {
  font-size: var(--lead-size);
  line-height: var(--lead-line);
  max-width: var(--measure);
}

.band--paper :is(p, .p), .band--paper-2 :is(p, .p), .band--paper li, .band--paper-2 li { color: var(--ink-2); }
.band--paper :is(p, .p), .band--paper-2 :is(p, .p) { max-width: var(--measure); }
.band--ink .lead { color: var(--on-ink-2); }

.mono, kbd {
  font-family: var(--font-mono);
  font-size: var(--mono-size);
}
kbd {
  display: inline-block;
  min-width: 1.7em;
  padding: 2px 6px;
  text-align: center;
  line-height: 1.3;
  color: var(--ink);
  border: var(--border-hair) solid var(--ink-3);
  border-radius: var(--radius-chip);
}

/* ---------- Brand, language switch ---------- */

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap-min);
  text-decoration: none;
  color: var(--on-ink);
}
.brand__mark { width: 36px; height: 36px; flex: none; }
.brand__mark svg { width: 100%; height: 100%; }
.brand__name {
  font-size: 21px;
  line-height: 1;
  font-weight: var(--weight-heavy);
  letter-spacing: -0.02em;
  /* The mark's tail hangs below the bubble body; the name centres on the body. */
  margin-bottom: 3px;
}
.brand--small .brand__mark { width: 30px; height: 30px; }
.brand--small .brand__name { font-size: 18px; }

.langs { display: flex; gap: var(--space-1); }
.langs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  font-size: var(--small-size);
  font-weight: var(--weight-bold);
  text-decoration: none;
  color: var(--on-ink-2);
  border-radius: var(--radius-chip);
}
.langs a[aria-current] {
  color: var(--on-ink);
  text-decoration: underline;
  text-decoration-thickness: var(--border-strong);
  text-underline-offset: 6px;
}
.langs a:hover { color: var(--on-ink); }

/* ---------- Buttons: an outgoing bubble ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 var(--space-5);
  font-size: var(--button-size);
  line-height: var(--button-line);
  font-weight: var(--weight-bold);
  text-decoration: none;
  border-radius: var(--radius-bubble) var(--radius-bubble) var(--radius-send) var(--radius-bubble);
  transition: background-color var(--dur-tap) linear;
}
.btn--send { background: var(--send); color: var(--on-send); }
.btn--send:hover, .btn--send:active { filter: brightness(1.35); }
.btn--ink { background: var(--ink); color: var(--send); }
.btn--ink:hover, .btn--ink:active { background: var(--ink-press); }

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

.hero { padding-block: 0 var(--space-7); }
.hero__grid { padding-top: var(--space-5); }
.hero__text .lead { margin-top: var(--space-4); }
.hero__text .btn { margin-top: var(--space-5); }
.hero__note {
  margin-top: var(--space-3);
  font-size: var(--small-size);
  line-height: var(--small-line);
  color: var(--on-ink-2);
}
.hero__chat { margin-top: var(--space-6); }

/* ---------- Chat ---------- */

.chat {
  --chat-height: 320px;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--chat-max);
  font-size: var(--chat-size);
  line-height: var(--chat-line);
  color: var(--on-ink);
}

/* Telegram's chat header: back arrow, name and status in a pill, the bot's picture. */
.chat__head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.chat__back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bubble);
  color: var(--on-ink);
}
.chat__back svg { width: 22px; height: 22px; }
.chat__title {
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  padding: 4px var(--space-5);
  border-radius: 22px;
  background: var(--bubble);
  line-height: 1.2;
}
.chat__title strong { font-size: var(--chat-size); font-weight: var(--weight-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.chat__title span { font-size: var(--chat-meta-size); color: var(--on-ink-2); }
.chat__picture { width: 44px; height: 44px; border-radius: 50%; }
.chat__picture svg { width: 100%; height: 100%; }
.chat__picture--initial { display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: var(--weight-bold); color: var(--on-send); background: var(--send); }

.chat__log {
  height: var(--chat-height);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14px);
  mask-image: linear-gradient(to bottom, transparent, #000 14px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.chat__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  will-change: transform;
}

.msg {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-end;
  column-gap: 10px;
  max-width: 86%;
  padding: 7px var(--space-3);
  border-radius: var(--radius-bubble);
  overflow-wrap: anywhere;
}
.msg--bot, .msg--person {
  align-self: flex-start;
  background: var(--bubble);
  color: var(--on-ink);
  border-bottom-left-radius: var(--radius-send);
}
.msg--me {
  align-self: flex-end;
  background: var(--send);
  color: var(--on-send);
  border-bottom-right-radius: var(--radius-send);
}
.msg__body { flex: 1 1 auto; min-width: 0; white-space: pre-line; }
.msg__name {
  display: block;
  font-size: var(--chat-name-size);
  line-height: var(--chat-name-line);
  font-weight: var(--weight-bold);
  margin-bottom: 2px;
}
.msg__name--bot { color: var(--on-ink-2); }
.msg__name--a { color: var(--name-a); }
.msg__name--b { color: var(--name-b); }
.msg__list { display: block; font-weight: var(--weight-bold); line-height: 36px; }
.msg__time {
  flex: none;
  font-size: var(--chat-meta-size);
  line-height: var(--chat-meta-line);
  padding-bottom: 3px;
  color: var(--on-ink-2);
  font-variant-numeric: tabular-nums;
}
.msg--me .msg__time { color: var(--on-send); }

.cmd {
  display: block;
  width: 100%;
  min-width: 7rem;
  min-height: 36px;
  padding: 0;
  font: inherit;
  line-height: 36px;
  text-align: left;
  color: var(--command);
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--dur-tap) linear;
}
.cmd.is-pressed, .cmd:active { color: var(--on-ink); }
.cmd { position: relative; }
/* The finger tap of a scripted step: a soft ring that grows and fades on the item. */
.cmd.is-pressed::after {
  content: "";
  position: absolute;
  left: var(--tap-x, 1.5em);
  top: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  border: 3px solid rgba(255, 255, 255, 0.9);
  pointer-events: none;
  animation: tap-ring 900ms ease-out forwards;
}
@keyframes tap-ring {
  0% { transform: scale(0.5); opacity: 1; }
  65% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1.2); opacity: 0; }
}
@media (hover: hover) { .cmd:hover { color: var(--on-ink); } }

.cmd--sent { display: inline; width: auto; min-width: 0; min-height: 0; line-height: inherit; }
.msg--me .cmd, .msg--me .cmd:hover, .msg--me .cmd:active { color: var(--on-send); }
.msg--person .cmd--sent { color: var(--command); }

.msg.is-new { animation: msg-enter var(--dur-enter) var(--ease-out) both; }
@keyframes msg-enter {
  from { opacity: 0; transform: translateY(var(--enter-distance)); }
  to { opacity: 1; transform: none; }
}

.chat__field {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.chat__field input {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--tap-min);
  padding: 0 var(--space-4);
  font: inherit;
  color: var(--on-ink);
  background: var(--field);
  border: var(--border-hair) solid var(--edge-ink);
  border-radius: var(--radius-field);
  appearance: none;
}
.chat__field input::placeholder { color: var(--on-ink-2); opacity: 1; }
.chat__field button {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  padding: 0;
  color: var(--on-send);
  background: var(--send);
  border: 0;
  border-radius: var(--radius-bubble) var(--radius-bubble) var(--radius-send) var(--radius-bubble);
  cursor: pointer;
  transition: background-color var(--dur-tap) linear;
}
.chat__field button:hover, .chat__field button:active { filter: brightness(1.35); }
.chat__field svg { width: 24px; height: 24px; }

.chat__note {
  margin-top: var(--space-3);
  font-size: var(--small-size);
  line-height: var(--small-line);
  color: var(--on-ink-2);
}

/* A chat set inside a paper section sits on its own ink panel. */
.panel {
  padding: var(--space-5) 20px 20px;
  background: var(--ink);
  color: var(--on-ink);
  border-radius: var(--radius-media);
}
.panel .chat { max-width: none; --chat-height: 420px; }
.band--paper .panel :is(p, .p), .band--paper-2 .panel :is(p, .p) { color: var(--on-ink-2); }

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

.how__grid { display: grid; gap: var(--space-7); margin-top: var(--space-6); }
.how__step .p { margin-top: var(--space-2); }
.clip-figure { max-width: var(--clip-max); margin-top: var(--space-5); }
.clip-figure figcaption { margin-top: var(--space-2); font-size: var(--small-size); line-height: var(--small-line); color: var(--ink-2); }
.clip {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 6 / 5;
  background: var(--ink);
  border-radius: var(--radius-media);
  object-fit: cover;
}

/* ---------- Text beside a chat panel ---------- */

.split__grid { display: grid; gap: var(--space-6); }
.split__text .p { margin-top: var(--space-4); }
.facts { margin-top: var(--space-5); display: grid; gap: var(--space-3); max-width: var(--measure); }
.facts li {
  padding-left: var(--space-4);
  border-left: var(--border-strong) solid var(--ink);
  color: var(--ink);
  font-weight: var(--weight-bold);
}
.split__panel { max-width: 440px; width: 100%; }

/* ---------- What it is not ---------- */

.nots__lines { margin-top: var(--space-5); }
.nots__closing span { display: block; }
.nots__closing span:first-child {
  margin-bottom: var(--space-3);
  font-size: var(--display-size);
  line-height: var(--display-line);
  letter-spacing: var(--display-track);
}
.nots__lines li {
  font-size: clamp(1.375rem, 6.6vw, var(--h2-size));
  line-height: 1.25;
  letter-spacing: var(--h2-track);
  font-weight: var(--weight-bold);
  color: var(--ink-3);
}
.band--paper-2 .nots__closing {
  margin-top: var(--space-5);
  font-size: var(--h3-size);
  line-height: var(--h3-line);
  font-weight: var(--weight-heavy);
  color: var(--ink);
}

/* ---------- It leaves you alone ---------- */

.quiet__grid { display: grid; gap: var(--space-5); margin-top: var(--space-6); }
.quiet__grid .p { margin-top: var(--space-1); }

/* ---------- Price ---------- */

.price__grid { display: grid; gap: var(--space-7); }
.price__figure {
  font-size: var(--price-size);
  line-height: var(--price-line);
  letter-spacing: var(--price-track);
  font-weight: var(--weight-heavy);
  font-variant-numeric: lining-nums;
}
.price__tag { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-3); }
.price__unit {
  font-size: var(--h3-size);
  line-height: var(--h3-line);
  font-weight: var(--weight-bold);
}
.price__main .btn { margin-top: var(--space-5); }
.price__rows { margin: 0; }
.price__rows > div {
  padding-block: var(--space-4);
  border-top: var(--border-hair) solid rgba(255, 255, 255, 0.35);
}
.price__rows > div:last-child { border-bottom: var(--border-hair) solid rgba(255, 255, 255, 0.35); }
.price__rows dt { font-weight: var(--weight-heavy); font-size: var(--h3-size); line-height: var(--h3-line); letter-spacing: var(--h3-track); }
.price__rows dd { margin-top: var(--space-1); max-width: var(--measure); }

/* ---------- Questions ---------- */

.faq__list { margin-top: var(--space-6); max-width: 46rem; border-bottom: var(--border-hair) solid var(--line); }
.faq details { border-top: var(--border-hair) solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 64px;
  padding-block: var(--space-3);
  font-size: var(--h3-size);
  line-height: var(--h3-line);
  letter-spacing: var(--h3-track);
  font-weight: var(--weight-bold);
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg {
  flex: none;
  width: 14px;
  height: 14px;
  transition: transform var(--dur-open) var(--ease-out);
}
.faq details[open] summary svg { transform: rotate(180deg); }
.faq details .p { padding-bottom: var(--space-5); }
.faq details kbd { font-size: 0.88em; }

/* ---------- Final call ---------- */

.final__grid { display: grid; gap: var(--space-6); }
.final__text h2 {
  font-size: var(--display-size);
  line-height: var(--display-line);
  letter-spacing: var(--display-track);
}
.final__text .lead { margin-top: var(--space-4); }
.final__chat {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  max-width: var(--chat-max);
  font-size: var(--chat-size);
  line-height: var(--chat-line);
}
.final__chat .msg { padding-block: var(--space-3); }
.final__chat .btn { align-self: flex-end; }
.final__address { align-self: flex-end; font-size: var(--small-size); color: var(--on-ink-2); }

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

.footer { padding-block: var(--space-5) var(--space-6); border-top: var(--border-hair) solid var(--line-ink); }
.footer__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-5); }
.footer__legal { flex: 1 1 100%; font-size: var(--small-size); line-height: var(--small-line); color: var(--on-ink-2); }

/* ---------- Root language page ---------- */

.chooser { min-height: 100vh; min-height: 100dvh; display: grid; align-items: center; }
.chooser .brand { color: var(--on-ink); }
.chooser__list { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }

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

@media (min-width: 720px) {
  /* Side by side, both clips sit on the same line whatever the length of the text above them. */
  .how__step { display: flex; flex-direction: column; }
  .how__step .clip-figure { margin-top: auto; padding-top: var(--space-5); }
  .how__grid { grid-template-columns: 1fr 1fr; column-gap: var(--space-6); }
  .quiet__grid { grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--space-7); }
  .footer__legal { flex: 1 1 0; min-width: 18rem; order: 2; }
  .footer .langs { order: 3; }
}

@media (min-width: 720px) and (max-width: 1023.98px) {
  .split__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); column-gap: var(--space-6); align-items: center; }
  .split--mirror .split__text { order: 2; }
  .split--mirror .split__grid { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); }
}

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

@media (min-width: 1024px) {
  .hero { padding-block: var(--space-2) var(--space-7); }
  .hero__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--space-7);
    align-items: end;
    padding-top: var(--space-7);
  }
  .hero__text { grid-column: 1 / span 7; padding-bottom: calc(var(--space-3) + var(--tap-min) + var(--space-3) + 1.5 * var(--small-size)); }
  .hero__chat { grid-column: 8 / span 5; justify-self: end; width: 100%; max-width: var(--chat-max); margin-top: 0; }
  .hero__text .lead { margin-top: var(--space-5); }
  .hero__text .btn { margin-top: var(--space-6); }
  .chat { --chat-height: 440px; }
  .panel .chat { --chat-height: 440px; }

  .how__grid { column-gap: var(--space-7); margin-top: var(--space-7); }

  .split__grid {
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--space-7);
    align-items: center;
  }
  .split__text { grid-column: 1 / span 6; }
  .split__panel { grid-column: 7 / span 6; justify-self: end; max-width: 480px; }
  .split--mirror .split__text { grid-column: 7 / span 6; order: 2; }
  .split--mirror .split__panel { grid-column: 1 / span 6; order: 1; justify-self: start; }
  .split__text { grid-column: 1 / span 6; }

  .nots__lines { margin-top: var(--space-6); }
  .nots__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--space-7); align-items: center; margin-top: var(--space-6); }
  .nots__grid .nots__lines { grid-column: 1 / span 6; margin-top: 0; }
  .band--paper-2 .nots__closing { grid-column: 7 / span 6; margin-top: 0; max-width: none; font-size: calc(var(--h3-size) * 1.33); line-height: 1.2; letter-spacing: var(--h2-track); }
  .nots__closing span:first-child { margin-bottom: var(--space-4); }

  .faq__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--space-7); align-items: start; }
  .faq__grid h2 { grid-column: 1 / span 4; position: sticky; top: var(--space-6); }
  .faq__list { grid-column: 5 / span 8; max-width: none; margin-top: 0; }

  .quiet__grid { grid-template-columns: repeat(2, minmax(0, var(--measure))); gap: var(--space-6) var(--space-7); margin-top: var(--space-7); }

  .price__grid { grid-template-columns: repeat(12, 1fr); column-gap: var(--space-7); align-items: start; }
  .price__main { grid-column: 1 / span 5; position: sticky; top: var(--space-6); }
  .price__rows { grid-column: 7 / span 6; }


  .final { padding-top: var(--space-10); }
  .final__grid { grid-template-columns: repeat(12, 1fr); column-gap: var(--space-7); align-items: end; }
  .final__text { grid-column: 1 / span 7; }
  .final__chat { grid-column: 8 / span 5; justify-self: end; }
}

@media (prefers-reduced-motion: reduce) {
  .cmd--sent { display: inline; width: auto; min-width: 0; min-height: 0; line-height: inherit; }
.msg--me .cmd, .msg--me .cmd:hover, .msg--me .cmd:active { color: var(--on-send); }
.msg--person .cmd--sent { color: var(--command); }

.msg.is-new { animation: none; }
}

.clip { cursor: pointer; }

/* ---------- Legal pages ---------- */

.legal-bar { padding-block: 0; }
.legal article { max-width: calc(46rem + 2 * var(--gutter)); }
.legal h1 { font-size: var(--h2-size); line-height: var(--h2-line); letter-spacing: var(--h2-track); font-weight: var(--weight-heavy); }
.legal__back { margin-bottom: var(--space-5); font-size: var(--small-size); }
.legal a { color: var(--ink); text-decoration-thickness: var(--border-strong); text-underline-offset: 3px; }
.legal__notice { margin-top: var(--space-4); font-weight: var(--weight-bold); }
.legal__head { margin: var(--space-5) 0 0; padding-block: var(--space-4); border-block: var(--border-hair) solid var(--line); display: grid; gap: var(--space-2); }
.legal__head dt { font-weight: var(--weight-bold); }
.legal__head dd { color: var(--ink-2); }
.legal__body h2 { margin-top: var(--space-7); max-width: none; font-size: var(--h3-size); line-height: var(--h3-line); letter-spacing: var(--h3-track); }
.legal__body h3 { margin-top: var(--space-5); font-size: var(--body-size); }
.legal__body p, .legal__body ul, .legal__body ol, .legal__body blockquote, .legal__body table { margin-top: var(--space-4); }
.legal__body ul, .legal__body ol { padding-left: var(--space-5); list-style: revert; max-width: var(--measure); }
.legal__body li + li { margin-top: var(--space-2); }
.band--paper .legal__body p, .band--paper .legal__body li { max-width: 46rem; }
.legal__body strong { color: var(--ink); }
.legal__body blockquote { margin-inline: 0; padding-left: var(--space-4); border-left: var(--border-strong) solid var(--ink); }
.gap { padding: 0 var(--space-1); color: var(--ink); background: none; border: var(--border-strong) dashed var(--ink); font-weight: var(--weight-bold); }
.footer__legal a { margin-left: var(--space-3); color: var(--on-ink); }

/* ---------- Phones: demos and clips centred, hero demo short enough for its message bar to show ---------- */

@media (max-width: 719.98px) {
  .hero .chat { --chat-height: clamp(150px, 24svh, 300px); }
  .panel .chat { --chat-height: clamp(260px, 50svh, 420px); }
  .hero__chat .chat, .split__panel, .clip-figure, .final__chat { margin-inline: auto; }

  /* Hero order on phones: headline, text, demo, then the button and the line under it, centred. */
  .hero__grid { display: flex; flex-direction: column; }
  .hero__text { display: contents; }
  .hero__text h1 { order: 1; }
  .hero__text .lead { order: 2; }
  .hero__chat { order: 3; }
  .hero__text .btn { order: 4; align-self: center; margin-top: var(--space-6); }
  .hero__note { order: 5; align-self: center; text-align: center; }
}

/* Small phones (12 mini, SE): text marked with | in the copy breaks at those points. */
@media (max-width: 380px) {
  .seg { display: block; }
}