/* ===========================================================================
   Madar Relay — AI customer service product site (EN + /ar/ RTL).
   Brand contract: design-systems/madar-service/DESIGN.md
   Near-black canvas, warm off-white type, ONE coral accent. Dark only.
   No gradients anywhere. One shadow in the whole system (the thread panel).
   =========================================================================== */

@font-face {
  font-family: 'Archivo';
  src: url('assets/fonts/Archivo-var.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'InterVar';
  src: url('assets/fonts/Inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'PlexArabic';
  src: url('assets/fonts/PlexArabic-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'PlexArabic';
  src: url('assets/fonts/PlexArabic-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

:root {
  --void: #0B0B0C;
  --surface: #141416;
  --raised: #1C1C1F;
  --raised-2: #26262A;
  --hairline: #2E2E33;
  --hairline-strong: #43434A;
  --bone: #F2F0ED;
  --bone-2: #B9B6B1;
  --bone-3: #8A8783;
  --coral: #FF5A3C;
  --coral-deep: #E04326;
  --coral-wash: rgba(255, 90, 60, .10);
  --live: #3DDC84;

  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --body: 'InterVar', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --arabic: 'PlexArabic', 'InterVar', sans-serif;

  --wrap: 1200px;
  --gutter: clamp(20px, 5vw, 48px);
  --band: clamp(80px, 10vw, 144px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--void);
  color: var(--bone-2);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }

h1, h2, h3 {
  font-family: var(--display);
  color: var(--bone);
  margin: 0;
  text-wrap: balance;
}
h1 {
  font-weight: 900;
  font-size: clamp(46px, 8.5vw, 88px);
  line-height: .98;
  letter-spacing: -.035em;
}
h2 {
  font-weight: 800;
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -.035em;
}
/* The tight tracking on heavy Archivo eats the word spaces; give them back. */
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3 { word-spacing: .06em; }
h3 {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -.01em;
}
p { margin: 0; text-wrap: pretty; }

a { color: inherit; }

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

.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  background: var(--coral);
  color: var(--void);
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Language switch — a text link naming its destination language in that
   language's own script, not a flag: flags are countries. Inherits .nav-link
   sizing; only the direction isolation is its own. */
.lang-switch { direction: ltr; unicode-bidi: isolate; }
[lang="ar"] .lang-switch { direction: rtl; }
.lang-switch[lang="en"] { direction: ltr; }

/* ---------------------------------------------------------------- labels */
.label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 24px;
}

.lede {
  font-size: 20px;
  line-height: 1.55;
  color: var(--bone-2);
  max-width: 62ch;
}

.note {
  font-size: 15px;
  color: var(--bone-3);
  max-width: 72ch;
}

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1;
  padding: 15px 32px;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease);
}
.btn-primary {
  background: var(--coral);
  color: var(--void);
}
.btn-primary:hover { background: var(--coral-deep); }
.btn-primary:disabled { opacity: .55; cursor: default; }
.btn-secondary {
  background: transparent;
  border-color: var(--hairline-strong);
  color: var(--bone);
}
.btn-secondary:hover { border-color: var(--bone); }
.btn-sm { padding: 11px 22px; font-size: 14px; min-height: 44px; }

/* ---------------------------------------------------------------- header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 11, 12, .82);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .16s var(--ease), background-color .16s var(--ease);
}
.site-header.is-stuck {
  border-bottom-color: var(--hairline);
  background: rgba(11, 11, 12, .94);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 76px;
}
.wordmark {
  display: block;
  text-decoration: none;
  line-height: 1;
}
.wordmark-name {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -.03em;
  color: var(--bone);
}
.wordmark-parent {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone-3);
  white-space: nowrap;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2vw, 30px);
}
.nav-link {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone-3);
  text-decoration: none;
  white-space: nowrap;
  transition: color .16s var(--ease);
}
/* 12px uppercase type boxes at 19px tall, under the 24px pointer minimum.
   The extra height is hit area only; the baseline rhythm is unchanged. */
.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
.nav-link:hover { color: var(--bone); }
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 44px;
  background: transparent;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  color: var(--bone);
  padding: 10px 12px;
  cursor: pointer;
}

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid var(--hairline);
}
.hero-media { position: absolute; inset: 0; z-index: -1; }
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 45%;
}
/* Arabic reads from the right, so the copy sits on the right: mirror the
   photograph so the subject moves to the open side instead of sitting
   behind the headline. */
html[dir="rtl"] .hero-media img { transform: scaleX(-1); }
/* Two columns: the conversation card fills the far column, so the subject's
   face is lifted above it. The photograph is drawn 240px taller and pulled
   up, and the card drops 110px, which leaves the face clear of both the
   headline and the card from 1121px to 1920px. */
@media (min-width: 1121px) {
  .hero-media img { height: calc(100% + 240px); margin-top: -240px; object-position: 62% 0; }
  .hero-thread { margin-top: 110px; }
}
/* Shading is two flat layers, never a gradient (§09): a light scrim over the
   whole photograph, and a hard-edged reading panel under the copy column
   only, so the subject keeps its light and the text keeps its contrast.
   inset-inline-start puts the panel on the copy side in both languages. */
.hero-scrim {
  position: absolute;
  inset: 0;
  background: rgba(11, 11, 12, .40);
}
.hero-shade {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 56%;
  background: rgba(11, 11, 12, .42);
  border-inline-end: 1px solid var(--hairline);
}
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr);
  align-items: center;
  gap: clamp(32px, 4vw, 56px);
  padding-block: clamp(88px, 11vw, 148px);
}
.hero-copy { max-width: 720px; }
.hero h1 { font-size: clamp(46px, 6.4vw, 80px); }
/* English: "Your customers ask." stays on one line wherever it fits, and
   "Relay answers." always starts its own line. */
html[lang="en"] .hero h1 { font-size: clamp(44px, 4.1vw, 58px); }
.h1-line { display: block; }
.hero h1 { margin-bottom: 28px; }
.hero .lede { max-width: 46ch; }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 40px;
}
.hero-foot {
  margin-top: 28px;
  font-size: 14px;
  color: var(--bone-3);
  max-width: 46ch;
}

/* ---------------------------------------------------------------- threads */
.thread {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  padding: 18px;
  /* The one and only shadow in this system. */
  box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 24px 60px -30px rgba(0, 0, 0, .9);
}
/* Same panel treatment as .thread, positioned into the hero grid. */
.hero-thread {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  padding: 18px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 24px 60px -30px rgba(0, 0, 0, .9);
  justify-self: end;
  width: 100%;
  max-width: 420px;
}
.thread-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 4px 16px;
  border-bottom: 1px solid var(--hairline);
}
.thread-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--bone);
  margin-inline-end: auto;
}
.ch-mark { color: var(--bone-2); }
.ch-mark svg { width: 18px; height: 18px; }
.ch-mark-lg { color: var(--bone); margin-bottom: 20px; }
.ch-mark-lg svg { width: 26px; height: 26px; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bone-3);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 5px 11px;
  white-space: nowrap;
}
.pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--live);
}

.thread-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 4px 4px;
}
.msg {
  max-width: 34ch;
  padding: 12px 16px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--bone);
  border-radius: 16px;
}
.msg[dir="rtl"] { font-family: var(--arabic); }
.msg-in {
  background: var(--raised-2);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.msg-in[dir="rtl"] {
  align-self: flex-end;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 4px;
}
/* The agent never shouts: bordered, never coral-filled. §05 */
.msg-out {
  background: var(--raised);
  border: 1px solid var(--hairline);
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.msg-out[dir="rtl"] {
  align-self: flex-start;
  border-bottom-right-radius: 16px;
  border-bottom-left-radius: 4px;
}
.msg-sys {
  align-self: center;
  max-width: 44ch;
  text-align: center;
  background: transparent;
  border: 1px dashed var(--hairline-strong);
  color: var(--bone-3);
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 10px;
}
/* Speaker label on the first bubble of each speaker. */
.who {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--bone-2);
  margin-bottom: 4px;
}
.who svg { width: 14px; height: 14px; flex: none; }
/* A person on the client's team is not the assistant: void fill and a
   brighter solid rule against the agent's raised fill and hairline. */
.msg-staff {
  background: var(--void);
  border-color: var(--bone-3);
}
.msg-staff .who { color: var(--bone); }
.thread-note {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--bone-3);
}

/* ---------------------------------------------------------------- sections */
.section { padding-block: var(--band); }
.section--surface {
  background: var(--surface);
  border-block: 1px solid var(--hairline);
}
.section--ruled { border-top: 1px solid var(--hairline); }

.sec-head { max-width: 760px; margin-bottom: 56px; }
.sec-head h2 { margin-bottom: 20px; }

/* Anchor targets must clear the sticky header, or the section heading lands
   underneath it and the reader thinks the link is broken. */
[id] { scroll-margin-top: 104px; }

/* ---------------------------------------------------------------- cells */
.cells { display: grid; gap: 20px; }
.cells-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cells-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.cell {
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 28px;
  transition: border-color .16s var(--ease);
}
.cell:hover { border-color: var(--hairline-strong); }
.cell h3 { margin-bottom: 12px; }
.cell p { font-size: 16px; }

.reqs {
  list-style: none;
  margin: 22px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--hairline);
  display: grid;
  gap: 12px;
}
.reqs li {
  font-size: 14px;
  line-height: 1.55;
  color: var(--bone-3);
}
.reqs strong {
  color: var(--bone-2);
  font-weight: 600;
}
/* A link inside a requirements list is a tap target: keep it at the 44px floor. */
.reqs a {
  display: inline-block;
  min-height: 44px;
  padding-block: 10px;
  box-sizing: border-box;
}

.cells + .note { margin-top: 28px; }

/* ---------------------------------------------------------------- demo */
/* Copy and channel selector on the left, the live thread on the right. A single
   720px column left almost a third of a 1440px screen empty; this fills it
   without stretching a chat bubble past a comfortable measure. */
.watch-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.watch-aside .sec-head { max-width: 46ch; margin-bottom: 36px; }
.watch-grid .thread-wide { max-width: none; }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}
.chip {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 500;
  color: var(--bone-2);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  /* min-height rather than taller padding: the pill keeps its optical weight
     next to 13px text while still clearing a 44px finger target. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 9px 20px;
  cursor: pointer;
  transition: color .16s var(--ease), border-color .16s var(--ease), background-color .16s var(--ease);
}
.chip:hover { border-color: var(--hairline-strong); color: var(--bone); }
.chip[aria-selected="true"] {
  background: var(--coral-wash);
  border-color: var(--coral);
  color: var(--bone);
}
.thread-wide { max-width: 720px; }
.thread-wide .msg { max-width: 40ch; }

.demo-fade { animation: fade .16s var(--ease) both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------------------------------------------------------------- split */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}
.split-copy h2 { margin-bottom: 20px; }
.split-copy p { font-size: 17px; max-width: 54ch; }
.ticks {
  list-style: none;
  margin: 28px 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.ticks li {
  position: relative;
  padding-inline-start: 26px;
  font-size: 16px;
  color: var(--bone-2);
}
.ticks li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .62em;
  width: 10px;
  height: 1px;
  background: var(--coral);
}

/* ---------------------------------------------------------------- steps */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
}
.steps li {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 24px;
  padding: 32px 0;
  border-bottom: 1px solid var(--hairline);
}
.step-n {
  font-family: var(--display);
  font-weight: 900;
  font-size: 34px;
  letter-spacing: -.035em;
  color: var(--bone-3);
  line-height: 1;
}
.steps h3 { margin-bottom: 10px; }
.steps p { font-size: 16px; max-width: 68ch; }
.steps + .note { margin-top: 32px; }

/* ---------------------------------------------------------------- how
   Three moves, set as a real sequence: the numerals carry the order. */
.flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
  border-top: 1px solid var(--hairline);
}
.flow li { padding-top: 28px; }
.flow .step-n { display: block; margin-bottom: 18px; }
.flow h3 { margin-bottom: 10px; }
.flow p { font-size: 16px; color: var(--bone-2); max-width: 40ch; }

.channels-strip { margin-top: clamp(64px, 8vw, 104px); }
.channels-strip > h3 { font-size: 24px; max-width: 30ch; margin-bottom: 28px; }
.chan-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block: 1px solid var(--hairline);
}
.chan-list li {
  padding-block: 24px;
  padding-inline: 0 24px;
  font-size: 16px;
  color: var(--bone-2);
}
.chan-list li + li { padding-inline-start: 24px; border-inline-start: 1px solid var(--hairline); }
.chan-list .ch-mark { display: block; color: var(--bone); margin-bottom: 14px; }
.chan-list .ch-mark svg { width: 24px; height: 24px; }
.chan-list strong { display: block; color: var(--bone); font-weight: 600; margin-bottom: 4px; }
.chan-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 6px;
  color: var(--bone);
  text-decoration: underline;
  text-decoration-color: var(--hairline-strong);
  text-underline-offset: 5px;
}
.chan-list a:hover { text-decoration-color: var(--coral); }
.channels-strip .note { margin-top: 24px; }

/* ---------------------------------------------------------------- madar */
.madar-block {
  display: grid;
  justify-items: start;
  gap: 24px;
  max-width: 620px;
}
.madar-block img { width: 148px; height: auto; }
.madar-block p { font-size: 17px; }

/* ---------------------------------------------------------------- final */
.final .lede { margin-bottom: 28px; }
.final-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 6vw, 80px);
  margin-top: 56px;
  align-items: start;
}
.assurances {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.assurances li {
  position: relative;
  padding-inline-start: 26px;
  font-size: 16px;
  color: var(--bone-3);
}
.assurances li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .62em;
  width: 10px;
  height: 1px;
  background: var(--hairline-strong);
}

.demo-form { display: grid; gap: 18px; }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field label,
.field legend {
  font-size: 13px;
  font-weight: 600;
  color: var(--bone-2);
  padding: 0;
}
.req { color: var(--coral); }
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field textarea {
  font-family: var(--body);
  font-size: 15px;
  color: var(--bone);
  background: var(--raised);
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  padding: 13px 15px;
  width: 100%;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.field textarea { min-height: 118px; resize: vertical; line-height: 1.5; }
.field input::placeholder,
.field textarea::placeholder { color: var(--bone-3); }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--coral);
  box-shadow: 0 0 0 3px var(--coral-wash);
}

.chip-set { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2px; }
.opt { position: relative; }
.opt input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.opt span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 13px;
  color: var(--bone-2);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 9px 20px;
  cursor: pointer;
  transition: color .16s var(--ease), border-color .16s var(--ease), background-color .16s var(--ease);
}
.opt input:checked + span {
  background: var(--coral-wash);
  border-color: var(--coral);
  color: var(--bone);
}
.opt input:focus-visible + span { outline: 2px solid var(--coral); outline-offset: 3px; }

/* The whole label is the hit area, so it carries the 44px minimum; the box
   itself is drawn at 20px so it still reads as a checkbox and not a button. */
.consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding-block: 4px;
  font-size: 14px;
  color: var(--bone-3);
  cursor: pointer;
}
.consent input {
  margin-top: 2px;
  accent-color: var(--coral);
  width: 20px;
  height: 20px;
  flex: none;
}
.form-status {
  font-size: 14px;
  color: var(--coral);
}
.form-status.ok { color: var(--bone-2); }
.demo-form .btn { justify-self: start; }

/* ---------------------------------------------------------------- footer */
.site-footer {
  border-top: 1px solid var(--hairline);
  padding-block: 64px 48px;
  background: var(--surface);
}
.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--hairline);
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: center;
}
.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-size: 14px;
  color: var(--bone-3);
  text-decoration: none;
  transition: color .16s var(--ease);
}
.footer-nav a:hover { color: var(--bone); }
.disclaimer {
  margin-top: 32px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--bone-3);
  max-width: 92ch;
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  margin-top: 40px;
  font-size: 13px;
  color: var(--bone-3);
}

/* ---------------------------------------------------------------- reveal */
/* Gated on .js-reveal: the default state of every section is visible, and the
   animation is layered on top only once the page has confirmed it can undo it. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .52s var(--ease), transform .52s var(--ease);
}
.js-reveal .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1; transform: none; transition: none; }
  .demo-fade { animation: none; }
  .btn, .cell, .chip, .opt span, .nav-link, .footer-nav a { transition: none; }
}

/* Touch input gets real finger targets. Mouse and trackpad keep the tighter
   optical rhythm these type sizes were set for, so nothing shifts on desktop. */
@media (pointer: coarse) {
  .nav-link,
  .footer-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .wordmark {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 44px;
  }
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1120px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); }
  .hero-thread { justify-self: start; max-width: 460px; }
  /* One column: the copy spans the width, so the panel does too. */
  .hero-shade { width: 100%; border: 0; background: rgba(11, 11, 12, .30); }
  .chan-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chan-list li:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; }
  .chan-list li:nth-child(n+3) { border-top: 1px solid var(--hairline); }
  .cells-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .watch-grid { grid-template-columns: minmax(0, 1fr); }
  .watch-aside .sec-head { max-width: 760px; }
  .watch-grid .thread-wide { max-width: 720px; }
}

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 26px var(--gutter) 32px;
    background: var(--void);
    border-bottom: 1px solid var(--hairline);
  }
  .site-nav.is-open { display: flex; }
  .header-inner { position: relative; }

  .split,
  .final-grid,
  .cells-2,
  .cells-3 { grid-template-columns: minmax(0, 1fr); }
  .sec-head { margin-bottom: 40px; }
  .flow { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .flow li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 8px 16px; padding: 24px 0; border-bottom: 1px solid var(--hairline); }
  .flow .step-n { grid-row: span 2; margin: 0; font-size: 28px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .lede { font-size: 18px; }
  /* "customers ask." is held together with a no-break space; the size keeps it inside the column down to 320px. */
  html[lang="en"] .hero h1 { font-size: clamp(34px, 11vw, 46px); }
  .chan-list { grid-template-columns: minmax(0, 1fr); }
  .chan-list li, .chan-list li + li { padding: 20px 0; border-inline-start: 0; }
  .chan-list li + li { border-top: 1px solid var(--hairline); }
  .hero-inner { padding-block: 88px 72px; }
  .hero-actions .btn { flex: 1 1 auto; }
  .hero-thread { max-width: none; }
  .msg { max-width: 27ch; font-size: 14px; }
  .thread-wide .msg { max-width: 30ch; }
  .cell { padding: 22px; }
  .field-pair { grid-template-columns: minmax(0, 1fr); }
  .steps li { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .step-n { font-size: 26px; }
  .footer-top { flex-direction: column; }
}