/*
 * The landing's element and component rules (docs/ui-intent/landing.md). var(--…) only: values live
 * in tokens.css (web's, copied verbatim) and landing-tokens.css. The breakpoint widths 768px and
 * 1024px are the only literals, because media queries cannot read custom properties.
 */

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-family);
  font-size: var(--size-body);
  font-weight: var(--weight-regular);
  line-height: var(--line-body);
}

h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: var(--color-ink); }
img, svg { display: block; flex: none; }

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

.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.wrap {
  max-width: var(--landing-column-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ── header ─────────────────────────────────────────────────────────────── */

.site-header .wrap {
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--touch);
  text-decoration: none;
}

.brand img { width: var(--landing-ghost-header); height: var(--landing-ghost-header); }

.wordmark {
  font-weight: var(--weight-heavy);
  font-size: var(--size-wordmark);
  letter-spacing: var(--tracking-wordmark);
}

.wordmark__dot { color: var(--color-brand-dot); }

.site-header .button { display: none; }

/* ── buttons ────────────────────────────────────────────────────────────── */

.button {
  min-height: var(--touch);
  padding: 0 var(--space-6);
  border-radius: var(--radius-pill);
  font-weight: var(--weight-heavy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  text-decoration: none;
}

.button--primary { background: var(--color-ink); color: var(--color-on-ink); }
.button--lg { min-height: var(--landing-button-lg); font-size: var(--landing-size-button-lg); width: 100%; }

.tg-disc {
  width: var(--disc-avatar);
  height: var(--disc-avatar);
  border-radius: 50%;
  background: var(--brand-telegram);
  color: var(--brand-on-fill);
  display: grid;
  place-items: center;
}

.tg-disc svg { width: var(--icon-small); height: var(--icon-small); }

/* ── text helpers ───────────────────────────────────────────────────────── */

.hl {
  background: linear-gradient(transparent var(--highlight-from), var(--color-highlight) var(--highlight-from), var(--color-highlight) var(--highlight-to), transparent var(--highlight-to));
}

.lead {
  font-size: var(--landing-lead);
  color: var(--color-ink-secondary);
  max-width: var(--landing-column-text);
}

.meta { font-size: var(--size-meta); color: var(--color-ink-secondary); }

/* a stroke icon inside a line of text: 1em, secondary ink, on the baseline, kept with its word */
.with-icon { white-space: nowrap; }

.inline-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: var(--landing-icon-baseline);
  margin-right: var(--space-2);
  color: var(--color-ink-secondary);
}

/* ── hero ───────────────────────────────────────────────────────────────── */

.hero {
  padding-top: var(--space-6);
  display: grid;
  gap: var(--space-7);
}

.hero h1 {
  font-size: var(--landing-display-sm);
  font-weight: var(--weight-heavy);
  line-height: var(--line-h1);
  letter-spacing: var(--tracking-h1);
  margin-bottom: var(--space-4);
}

.hero__cta {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

/* ── chat card ──────────────────────────────────────────────────────────── */

.chat {
  position: relative;
  background: var(--color-bg);
  border: var(--border-width) solid var(--color-border-soon);
  border-radius: var(--landing-radius-card);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.chat__label {
  font-size: var(--size-meta);
  font-weight: var(--weight-semibold);
  color: var(--color-ink-secondary);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.chat__label svg { width: var(--icon-small); height: var(--icon-small); }

.bubble {
  max-width: 90%;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--landing-radius-bubble);
  font-size: var(--size-subtitle);
}

.bubble--wedo {
  align-self: flex-start;
  background: var(--color-surface);
  border-bottom-left-radius: var(--space-2);
}

.bubble strong { font-weight: var(--weight-heavy); }
.bubble .muted { color: var(--color-ink-secondary); }
.day { margin: var(--space-2) 0; }
.day li { padding: var(--space-1) 0; }

.bubble--me {
  align-self: flex-end;
  background: var(--color-ink);
  color: var(--color-on-ink);
  border-bottom-right-radius: var(--space-2);
}

.bubble--file, .bubble--voice { display: flex; align-items: center; gap: var(--space-4); }
.bubble--file svg, .bubble--voice svg { width: var(--icon-row); height: var(--icon-row); }

.wave { display: flex; align-items: center; gap: var(--space-1); }
.wave i { display: block; width: var(--space-1); height: var(--space-4); border-radius: var(--space-1); background: currentColor; }
.wave i:nth-child(even) { height: var(--space-5); }
.wave i:nth-child(3n) { height: var(--space-6); }
.wave i:nth-child(5n) { height: var(--space-3); }

.bubble__chip {
  display: inline-flex;
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  border: var(--border-width) solid var(--color-border-soon);
  font-weight: var(--weight-semibold);
  font-size: var(--size-meta);
}

.bubble__actions { display: flex; gap: var(--space-3); }
.chat__time { align-self: center; }

/* reads as a chat: Wedo on the left, the person on the right, a small time under each message */
.bubble__time {
  display: block;
  margin-top: var(--space-1);
  text-align: right;
  font-size: var(--size-footer);
  color: var(--color-ink-secondary);
}

.bubble--me .bubble__time { color: var(--color-on-ink); }

.bubble__buttons {
  display: grid;
  grid-auto-flow: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.bubble__buttons span {
  display: block;
  text-align: center;
  padding: var(--space-3);
  border-radius: var(--space-3);
  background: var(--color-bg);
  font-weight: var(--weight-semibold);
  font-size: var(--size-meta);
}

.bubble--image { padding: var(--space-2); }
.bubble--image svg { display: block; width: var(--landing-image-bubble); max-width: 100%; height: auto; border-radius: var(--landing-radius-bubble); }

/* the invitation illustration: token colors only, so it follows the device's mode */
.invite__paper { fill: var(--color-surface); }
.invite__band { fill: var(--color-highlight); }
.invite__ink { fill: var(--color-ink); }
.invite__soft { fill: var(--color-ink-secondary); }
.invite__dot { fill: var(--color-brand-dot); }
.invite__line { fill: none; stroke: var(--color-ink-secondary); stroke-width: var(--space-1); }
.invite__title { font-size: var(--size-h2); font-weight: var(--weight-heavy); }
.invite__date { font-size: var(--size-body); font-weight: var(--weight-heavy); }
.invite__small { font-size: var(--size-meta); }
.invite__tiny { font-size: var(--size-footer); }

.examples__hint { margin-top: var(--space-4); }

.examples:focus-visible {
  outline: var(--border-soon-width) solid var(--color-ink);
  outline-offset: var(--space-2);
  border-radius: var(--landing-radius-card);
}


/* ── sections ───────────────────────────────────────────────────────────── */

.section { padding-top: var(--landing-section-gap-sm); }

.section h2 {
  font-size: var(--landing-h2-sm);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--tracking-h2);
  line-height: var(--landing-line-heading);
  max-width: var(--landing-column-text);
}

.section .lead { margin-top: var(--space-4); }

/* a disc stays a circle at every width: fixed size, never shrunk by a row's text */
.disc {
  flex: none;
  width: var(--disc-row);
  height: var(--disc-row);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--color-ink);
  color: var(--color-highlight);
}

.disc svg { flex: none; width: var(--icon-row); height: var(--icon-row); }

/* the mental load */
.thoughts { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-6) 0; }

.thought {
  background: var(--color-surface);
  border-radius: var(--radius-pill);
  padding: var(--space-3) var(--space-5);
  font-size: var(--size-subtitle);
  font-weight: var(--weight-medium);
}

.thought:nth-child(2n) { transform: rotate(calc(-1 * var(--landing-tilt-thought))); }
.thought:nth-child(3n) { transform: rotate(var(--landing-tilt-thought)); }
.load__body { font-size: var(--landing-lead); max-width: var(--landing-column-text); }

/* what changes */
.benefits { display: grid; gap: var(--space-6); margin-top: var(--space-7); }
.benefit { display: flex; flex-direction: column; gap: var(--space-3); }
.benefit h3 { font-size: var(--size-h2); font-weight: var(--weight-heavy); letter-spacing: var(--tracking-h2); }
.benefit p { color: var(--color-ink-secondary); }

.closing {
  font-size: var(--landing-h2-sm);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--tracking-h2);
  line-height: var(--landing-line-heading);
  margin-top: var(--space-7);
}

/* examples */
.examples { display: grid; gap: var(--space-5); margin-top: var(--space-7); }
.examples .bubble { max-width: var(--landing-bubble-max); }

.alias {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.alias .bubble { max-width: none; }

/* how it works */
.steps { display: grid; gap: var(--space-6); margin: var(--space-7) 0; }
.step { display: grid; grid-template-columns: auto 1fr; gap: var(--space-5); align-items: start; }

.step__n {
  width: var(--disc-row);
  height: var(--disc-row);
  border-radius: 50%;
  background: var(--color-highlight);
  color: var(--color-ink);
  display: grid;
  place-items: center;
  font-weight: var(--weight-heavy);
}

.step h3 { font-size: var(--landing-size-step); font-weight: var(--weight-heavy); }
.step p { color: var(--color-ink-secondary); margin-top: var(--space-2); }
.footnote { margin-top: var(--space-5); max-width: var(--landing-column-text); }

/* trust */
.rows { display: grid; gap: var(--space-3); margin: var(--space-7) 0 var(--space-5); }

.row {
  background: var(--color-surface);
  border-radius: var(--radius-row);
  padding: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-5);
  font-weight: var(--weight-semibold);
}

.trust__link { display: inline-flex; min-height: var(--touch); align-items: center; }

/* panel */
.panel { display: grid; gap: var(--space-7); }

.code {
  font-weight: var(--weight-heavy);
  background: var(--color-surface);
  padding: 0 var(--space-3);
  border-radius: var(--space-3);
}

.panel__shot img {
  width: 100%;
  max-width: var(--landing-panel-shot);
  height: auto;
  margin: 0 auto;
  border: var(--border-width) solid var(--color-border-soon);
  border-radius: var(--landing-radius-card);
}

/* final call to action — the only inverted block */
.final { margin-top: var(--landing-section-gap-sm); background: var(--color-ink); color: var(--color-on-ink); }
.final + .site-footer { margin-top: 0; }

.final .wrap {
  padding-top: var(--landing-section-gap-sm);
  padding-bottom: var(--landing-section-gap-sm);
  display: grid;
  gap: var(--space-6);
}

.final h2 {
  font-size: var(--landing-h2-sm);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--tracking-h2);
  line-height: var(--landing-line-heading);
  max-width: var(--landing-column-text);
}

.final .hero__cta { margin-top: var(--space-6); }
.button--inverted { background: var(--color-bg); color: var(--color-ink); }
.final img { width: var(--landing-ghost-hero); height: var(--landing-ghost-hero); }
.site-header__link { color: var(--color-ink-secondary); font-size: var(--size-meta); font-weight: var(--weight-semibold); text-decoration: none; min-height: var(--touch); display: inline-flex; align-items: center; }
.site-header nav { display: flex; align-items: center; gap: var(--space-5); }

/* ── document pages (legal, contact) ────────────────────────────────────── */

.doc {
  padding-top: var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  line-height: var(--landing-line-text);
}

/* the reading column starts at the page's left edge, in line with the header and footer */
.doc > * { max-width: var(--landing-column-text); }

.doc h1 {
  font-size: var(--landing-h2-sm);
  font-weight: var(--weight-heavy);
  line-height: var(--landing-line-heading);
  letter-spacing: var(--tracking-h1);
}

/* the private-beta notice: an HTML popover, no JavaScript; fits a 320 px phone */
.notice {
  width: calc(100% - 2 * var(--gutter));
  max-width: var(--landing-column-text);
  padding: var(--gutter);
  border: var(--border-width) solid var(--color-border-soon);
  border-radius: var(--landing-radius-card);
  background: var(--color-bg);
  color: var(--color-ink);
  line-height: var(--line-body);
}

/* dims the page behind the notice; a browser that cannot read the token here leaves it clear */
.notice::backdrop { background: var(--color-ink); opacity: var(--landing-backdrop-opacity); }

.notice h2 {
  font-size: var(--size-h2);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--tracking-h2);
  margin-bottom: var(--space-4);
}

.notice .meta { margin: var(--space-4) 0 var(--space-6); }

/* buttons that are <button>: drop the browser's border and font, keep every .button rule winning */
:where(button.button) { border: 0; font: inherit; cursor: pointer; }

.not-found img { width: var(--landing-ghost-hero); height: var(--landing-ghost-hero); }

/* legal pages: headings, lists, a processors table that stacks on a phone */
.legal h2 { font-size: var(--size-h2); font-weight: var(--weight-heavy); letter-spacing: var(--tracking-h2); margin-top: var(--space-5); }
.doc-list { list-style: disc; padding-left: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
ol.doc-list { list-style: decimal; }
.legal code { font-size: var(--size-meta); background: var(--color-surface); padding: 0 var(--space-2); border-radius: var(--space-2); overflow-wrap: anywhere; }
.table-wrap { width: 100%; }
.legal table { width: 100%; border-collapse: collapse; font-size: var(--size-subtitle); }
.legal th, .legal td { text-align: left; vertical-align: top; padding: var(--space-4) var(--space-3); border-bottom: var(--border-width) solid var(--color-border-soon); }
.legal th { font-weight: var(--weight-semibold); color: var(--color-ink-secondary); }

@media (max-width: 767px) {
  .legal thead { display: none; }
  .legal tr { display: block; padding: var(--space-4) 0; border-bottom: var(--border-width) solid var(--color-border-soon); }
  .legal td { display: block; padding: var(--space-1) 0; border: 0; }
}

.alert {
  background: var(--color-alert-bg);
  color: var(--color-alert-text);
  border-radius: var(--radius-alert);
  padding: var(--space-5);
}

/* ── footer ─────────────────────────────────────────────────────────────── */

.site-footer { margin-top: var(--landing-section-gap-sm); }

.site-footer .wrap {
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.site-footer nav ul { display: flex; flex-wrap: wrap; gap: var(--space-5); }

.site-footer nav a {
  font-size: var(--size-meta);
  color: var(--color-ink-secondary);
  min-height: var(--touch);
  display: inline-flex;
  align-items: center;
}

.site-footer small { font-size: var(--size-footer); color: var(--color-ink-secondary); }

/* ── tablet and desktop ─────────────────────────────────────────────────── */

/* phones: the final band keeps its text and button only — the ghost would sit alone on its own
   line under the button */
@media (max-width: 767px) {
  .final img { display: none; }
}

/* phones: the example chats slide sideways, one at a time, the next one peeking; only the
   carousel scrolls, never the page (its bleed equals the gutter it cancels) */
@media (max-width: 767px) {
  .examples {
    display: flex;
    align-items: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    margin-left: calc(-1 * var(--gutter));
    margin-right: calc(-1 * var(--gutter));
    padding: 0 var(--gutter) var(--space-3);
    scroll-padding-left: var(--gutter);
  }
  .examples > .chat { flex: 0 0 var(--landing-carousel-card); scroll-snap-align: start; }
}

@media (min-width: 768px) {
  .site-header .button { display: inline-flex; }
  .button--lg { width: auto; }
  .hero__cta { align-items: flex-start; }
  .benefits, .steps { grid-template-columns: repeat(3, 1fr); }
  .step { grid-template-columns: 1fr; }
  .examples { grid-template-columns: 1fr 1fr; }
  .examples__hint { display: none; }
  .chat--wide { grid-column: 1 / -1; }
  .panel { grid-template-columns: 1fr 1fr; align-items: center; }
  .final .wrap { grid-template-columns: 1fr auto; align-items: center; }
}

@media (min-width: 1024px) {
  .hero {
    grid-template-columns: 7fr 5fr;
    align-items: center;
    padding-top: var(--landing-section-gap-sm);
  }
  .hero h1 { font-size: var(--landing-display-lg); }
  .examples { grid-template-columns: repeat(3, 1fr); }
  .chat--wide { grid-column: auto; }
  .section { padding-top: var(--landing-section-gap-lg); }
  .section h2, .closing, .final h2 { font-size: var(--landing-h2-lg); }
  .final { margin-top: var(--landing-section-gap-lg); }
  .doc h1 { font-size: var(--landing-h2-lg); }
  .site-footer { margin-top: var(--landing-section-gap-lg); }
}