/* The site layer over the Codex design (window C6, SITE_C6_PLAN.md). Every page loads
   design/tokens.css, design/components.css (copies of design/, kept equal by a test) and then this
   file. Colours come only from the design's tokens — none is written here; the sizes of the
   method notes (62 px buttons, 720 px subtitle) stay in pixels, the design has no token for them. */

/* Window C8: the text grows with the screen — 16 px at 360 px, 17 px at 440 px (the body 18 px),
   18 px from 520 px; percents keep the reader's own browser size. The jumps to a section leave
   room for the sticky header and the cookie bar (their heights — cookie.js, CSSOM). */
html {
  -webkit-text-size-adjust: 100%;
  font-size: clamp(100%, 0.71875rem + 1.25vw, 112.5%);
  scroll-padding-top: var(--header-height, 0px);
  scroll-padding-bottom: var(--cookie-bar-height, 0px);
}

body {
  padding-bottom: var(--cookie-bar-height, 0px);
}

/* After «Принять» the focus waits on the page (cookie.js): no frame around the whole of it. */
main:focus {
  outline: none;
}

[hidden] {
  display: none !important;
}

/* The column of the page: the header, the main part and the footer. */
.site-header,
main {
  width: min(calc(100% - 2 * var(--space-4)), var(--document-width));
  margin-inline: auto;
}

/* The header stays one line down to 360 px (window S5): the design's card look and its grid on
   phones are reset. Window C8: it sticks to the top; its page-coloured band runs the whole width
   of the window (the shadow, cut to the band by clip-path). */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block: 0;
  padding: var(--space-3) 0;
  background: var(--color-background);
  border: 0;
  border-radius: 0;
  box-shadow: 0 0 0 100vmax var(--color-background);
  clip-path: inset(0 -100vmax);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  color: var(--color-text);
  text-decoration: none;
}

.brand-mark {
  width: 32px; /* not the design's 36 px: the header keeps one line at 360 px */
  height: 32px;
  flex: none;
}

.brand-text {
  display: grid;
  line-height: var(--line-height-tight);
}

.brand-name {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

/* D-1077 (2): no tagline on phones; 14 px from 600 px. */
.brand-tagline {
  display: none;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.site-nav {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-caption);
}

.site-nav a {
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--color-accent-hover);
}

.button-enter {
  min-height: 44px;
  padding: var(--space-1) 10px;
  border: var(--border-width) solid var(--color-accent);
  border-radius: var(--radius-pill);
  background: none;
  color: var(--color-accent);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

.button-enter:hover,
.button-enter:focus-visible {
  background: var(--color-accent);
  color: var(--color-surface);
}

/* The first screen, the quiz and the result: the design's narrow column. */
.hero {
  padding: var(--space-4) 0 var(--space-6);
}

.hero-intro,
.quiz,
.result {
  max-width: var(--content-width);
}

.hero-title {
  margin: 0 0 var(--space-2);
  font-size: 2rem;
  line-height: var(--line-height-tight);
}

.hero-subtitle {
  max-width: 720px;
  margin: 0 0 var(--space-4);
  color: var(--color-text-secondary);
  font-size: var(--font-size-lead);
}

.muted {
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

/* «Назад» of the result (a text button; the quiz's «Назад» is the design's back-button). */
.result .quiz-back,
.link-button {
  padding: var(--space-1) 0;
  border: 0;
  background: none;
  color: var(--color-accent);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

.result .quiz-back::before {
  content: "← ";
}

/* The step bar of the conversation (window C7): the design's progress; the share is set by the
   script through CSSOM (`--quiz-progress`), the CSP allows no inline style. */
.quiz-top {
  margin-bottom: var(--space-4);
}

.quiz-top .progress__label {
  overflow-wrap: anywhere;
}

.quiz-bar {
  width: var(--quiz-progress, 0%);
  transition: width var(--transition-fast);
}

/* The conversation: the service's messages on the left with its mark, the person's on the right. */
.chat {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  padding: 0;
  list-style: none;
}

.chat:focus,
.chat-message:focus {
  outline: none;
}

.chat-message,
.chat-typing,
.quiz--chat .chat-current {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  margin: 0;
}

.chat-message--person {
  justify-content: flex-end;
}

.chat-avatar {
  width: 28px;
  height: 28px;
  flex: none;
}

.chat-avatar--quiet {
  visibility: hidden; /* the reply follows its question: one mark per turn */
}

.chat-bubble,
.quiz--chat .chat-question {
  max-width: 85%;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-medium) var(--radius-medium) var(--radius-medium) var(--space-1);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
  overflow-wrap: anywhere;
}

.chat-message--question .chat-bubble {
  font-weight: var(--font-weight-medium);
}

.chat-message--person .chat-bubble {
  border-color: var(--color-accent);
  border-radius: var(--radius-medium) var(--radius-medium) var(--space-1) var(--radius-medium);
  background: var(--color-accent);
  box-shadow: var(--shadow-button);
  color: var(--color-surface);
}

.chat-message--feedback .chat-bubble {
  background: var(--color-selected);
  border-color: var(--color-selected);
}

.chat-hint {
  display: block;
  margin-top: var(--space-1);
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-regular);
}

.chat-current .chat-avatar {
  display: none;
}

.quiz--chat .chat-current .chat-avatar {
  display: block;
}

.quiz--chat .chat-current {
  margin-top: var(--space-2);
}

/* «печатает…» with three dots that blink one after another. */
.chat-typing .chat-bubble {
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.chat-typing::after {
  content: "•••";
  width: 2.4ch;
  margin-bottom: var(--space-3);
  overflow: hidden;
  color: var(--color-accent);
  font-size: var(--font-size-lead);
  letter-spacing: 0.1ch;
  white-space: nowrap;
  animation: chat-dots 1.2s steps(4, jump-none) infinite;
}

@keyframes chat-dots {
  from {
    width: 0;
  }

  to {
    width: 2.4ch;
  }
}

.quiz-feedback {
  margin: 0 0 var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-medium);
  background: var(--color-selected);
}

.quiz-question {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-question);
  line-height: var(--line-height-heading);
}

.quiz-question:focus,
.result-heading:focus {
  outline: none;
}

.quiz-hint {
  margin: 0 0 var(--space-2);
  color: var(--color-text-secondary);
}

.quiz-options {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-4) 0;
}

/* The goal cards of the first screen: the design's answer cards, each goal with its own edge
   colour (the design's «planning / balance / combined»). */
/* Window C8: on phones one column of compact cards (the picture left of the text), so the title
   and all three cards fit the first screen; from 600 px exactly three in a row — never 2 + 1. */
.goal-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  margin: var(--space-3) 0 var(--space-2);
}

.option,
.goal-card {
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-medium);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.goal-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  justify-items: start;
  gap: 2px var(--space-3);
  min-height: 62px;
  padding: var(--space-3) calc(var(--space-4) + var(--path-icon-size)) var(--space-3) var(--space-3);
}

.goal-card > :not(img) {
  grid-column: 2;
}

.goal-card[data-goal="everyday_menu"] {
  border-left: var(--space-1) solid var(--color-accent);
}

.goal-card[data-goal="weight_loss"] {
  border-left: var(--space-1) solid var(--color-warm-highlight);
}

.goal-card[data-goal="combined"] {
  border-left: var(--space-1) solid var(--color-accent-deep);
}

.goal-card img {
  grid-row: 1 / span 4;
  align-self: center;
  width: 56px;
  height: 56px;
}

.goal-card-title {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
}

.goal-card-gain {
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

/* Window C10 (D-1079 (3)): the star after the name of a weight goal — the footnote is under the
   cards. */
.goal-card-mark {
  margin-left: 2px;
  color: var(--color-accent);
  font-weight: var(--font-weight-bold);
}

/* «Начать»: on phones an arrow at the right of the card (the word stays for screen readers, out of
   sight — it saves a line per card); from 600 px the design's pill at the bottom of every card. */
.goal-card-start {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.goal-card::after {
  content: "→"; /* older browsers: the arrow alone */
  content: "→" / ""; /* drawn, not read: the card's name stays «… Начать» */
  position: absolute;
  top: 50%;
  right: var(--space-3);
  color: var(--color-accent);
  font-size: var(--font-size-lead);
  font-weight: var(--font-weight-bold);
  transform: translateY(-50%);
}

.goal-card:hover,
.option:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-button);
  transform: translateY(calc(var(--border-width-strong) * -1));
}

.goal-card:focus-visible,
.option:focus-visible {
  border-color: var(--color-accent);
}

/* The chosen card: the design's fill and an accent frame, not paler than the others. */
.goal-card.selected,
.option.answer-card--selected {
  border: var(--border-width-strong) solid var(--color-accent);
  background: var(--color-selected);
  color: var(--color-text);
}

/* Under the goal cards: how long the quiz takes and the footnote of the starred cards (window C10,
   D-1079 (3)) — side by side when they fit, one under the other on a narrow phone; never hidden. */
.hero-notes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-5);
}

.hero-time {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.hero-footnote {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.option {
  width: 100%;
  min-height: 62px;
  padding: var(--space-3) var(--space-4);
  font-weight: var(--font-weight-medium);
}

.quiz-note {
  margin: 0 0 var(--space-3);
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.result-heading {
  margin: var(--space-2) 0 var(--space-4);
  font-size: var(--font-size-question);
  line-height: var(--line-height-heading);
}

/* The cards of the result: the design's sample card. */
.card {
  margin: 0 0 var(--space-4);
  padding: var(--space-5);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-large);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
}

.card-title {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-lead);
}

.summary {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--space-2) var(--space-3);
  margin: 0;
}

.summary dt {
  color: var(--color-text-secondary);
}

.summary dd {
  margin: 0;
}

.dishes {
  display: grid;
  gap: var(--space-3);
  margin: 0 0 var(--space-2);
  padding: 0;
  list-style: none;
}

/* A dish of the example day: the design's meal card edge, no capitals (DESIGN_BRIEF §4). */
.dish {
  display: grid;
  gap: 2px;
  padding-left: var(--space-3);
  border-left: var(--space-1) solid var(--color-accent);
}

.dish-slot {
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.dish-title {
  font-weight: var(--font-weight-medium);
}

.dish-meta {
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

/* Window C11: the shopping list of the example day, folded under the dishes; opened by a tap on
   «Список покупок». The bot's sections, one product a line. */
.shopping {
  margin: var(--space-3) 0 var(--space-2);
  border-top: var(--border-width) solid var(--color-border);
}

.shopping summary {
  min-height: 44px;
  padding: var(--space-3) 0;
  color: var(--color-accent);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

.shopping-section__title {
  margin: var(--space-2) 0 var(--space-1);
  font-size: var(--font-size-body);
}

.shopping-items {
  display: grid;
  gap: 2px;
  margin: 0 0 var(--space-2);
  padding: 0;
  list-style: none;
}

/* The prototype's dialog shows the code for the bot (window C11). */
.stub-code {
  overflow-wrap: anywhere;
  color: var(--color-text-secondary);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--font-size-caption);
}

/* «≈ N блюд»: the design's match count. */
.result-count {
  margin: var(--space-3) 0 0;
  padding: var(--space-3) var(--space-4);
  border-left: var(--space-1) solid var(--color-accent);
  border-radius: var(--radius-medium);
  background: var(--color-selected);
  color: var(--color-accent-hover);
  font-weight: var(--font-weight-medium);
}

.result-next {
  margin: 0 0 var(--space-2);
}

.bot-buttons {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-4) 0;
}

.button {
  width: 100%;
  min-height: 62px;
  padding: var(--space-3) var(--space-4);
}

.link-button {
  display: block;
  margin-top: var(--space-2);
}

.block {
  padding: var(--space-6) 0;
  border-top: var(--border-width) solid var(--color-border);
}

.block-title {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-question);
  line-height: var(--line-height-heading);
}

/* «Как это работает» (window C10, D-1079 (5)): three cards, as before window C8 — the number in
   the accent colour; from 720 px three in a row. */
.cards {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.step-card {
  margin: 0;
  counter-increment: step;
}

.step-card .card-title::before {
  content: counter(step) ". ";
  color: var(--color-accent);
}

.step-card p {
  margin: 0;
}

/* «Без ИИ» (window C8): three short points with accent marks. */
.points {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.points li {
  padding-left: var(--space-4);
  border-left: var(--space-1) solid var(--color-accent);
}

/* The cookie bar (window C8): fixed at the bottom of every page, above everything. Window C10
   (D-1079 (5)): a card one notices — the strip lets the taps through its gap, the card takes them;
   on a phone about a quarter of the screen, never more than the screen (it scrolls inside). */
.cookie-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 30;
  padding: var(--space-3);
  pointer-events: none;
}

.cookie-bar__card {
  display: grid;
  gap: var(--space-3);
  max-width: 560px;
  max-height: calc(100vh - 2 * var(--space-3));
  max-height: calc(100dvh - 2 * var(--space-3)); /* iOS: the visible height, under its bars */
  margin: 0 auto;
  padding: var(--space-5);
  overflow-y: auto;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-large);
  background: var(--color-surface);
  box-shadow: var(--shadow-raised);
  pointer-events: auto;
}

.cookie-bar__title {
  margin: 0;
  font-size: var(--font-size-lead);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
}

.cookie-bar__text {
  margin: 0;
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

.cookie-bar__text a {
  color: var(--color-accent);
}

.cookie-bar .cookie-bar__accept {
  width: 100%;
  min-height: 56px;
  font-size: var(--font-size-lead);
}

/* A low phone (360×640): smaller fields, the card keeps to a third of the height. */
@media (max-height: 700px) {
  .cookie-bar__card {
    gap: var(--space-2);
    padding: var(--space-4);
  }

  .cookie-bar .cookie-bar__accept {
    min-height: 48px;
  }
}

/* A low screen (a phone on its side): the words on the left, «Принять» on the right — the card
   keeps to about a third of the height. */
@media (max-height: 520px) {
  .cookie-bar__card {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-4);
    row-gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
  }

  .cookie-bar .cookie-bar__accept {
    grid-row: 1 / span 2;
    grid-column: 2;
    align-self: center;
    width: auto;
    padding-inline: var(--space-6);
  }
}

/* «Подобрать меню ↑» (window C8): over the page, above the cookie bar, below it in the layers. */
.float-to-goals {
  position: fixed;
  bottom: calc(var(--cookie-bar-height, 0px) + var(--space-4));
  left: 50%;
  z-index: 25;
  min-height: 44px;
  padding: var(--space-2) var(--space-5);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  box-shadow: var(--shadow-button);
  color: var(--color-surface);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  transform: translateX(-50%);
  cursor: pointer;
}

.float-to-goals:hover,
.float-to-goals:focus-visible {
  background: var(--color-accent-hover);
}

.plain-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-left: var(--space-5);
}

.bot-screens {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-4);
}

.bot-screen {
  margin: 0;
}

.bot-screen figcaption {
  margin: 0 0 var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
}

.bot-message {
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-medium) var(--radius-medium) var(--radius-medium) var(--space-1);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
  font-size: var(--font-size-caption);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.bot-line {
  margin: 0;
}

.bot-gap {
  height: 0.6em;
  margin: 0;
}

.bot-keyboard {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-1);
}

.bot-keyboard-row {
  display: flex;
  gap: var(--space-1);
}

.bot-button {
  flex: 1;
  min-width: 0;
  padding: var(--space-2);
  border-radius: var(--radius-small);
  background: var(--color-selected);
  color: var(--color-text);
  font-size: var(--font-size-caption);
  text-align: center;
  overflow-wrap: anywhere;
}

/* The tariffs: the design's price cards, all alike; the starter one only has its note. */
.tariffs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin: var(--space-4) 0;
  padding: 0;
  list-style: none;
}

.tariff {
  min-height: 0;
  align-content: start;
  gap: var(--space-1);
  padding: var(--space-4);
}

.tariff-title {
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.faq {
  border-bottom: var(--border-width) solid var(--color-border);
}

.faq summary {
  padding: var(--space-4) 0;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

.faq p {
  margin: 0 0 var(--space-4);
}

/* The footer: the design's dark blueberry card; its text, links and focus frame are light. */
.site-footer {
  width: min(calc(100% - 2 * var(--space-4)), var(--document-width));
  margin: var(--space-6) auto var(--space-5);
}

.site-footer p {
  margin: 0 0 var(--space-2);
}

.site-footer a {
  color: var(--color-surface);
  overflow-wrap: anywhere;
}

.site-footer .muted {
  color: var(--color-selected);
}

.site-footer :focus-visible {
  outline-color: var(--color-surface);
}

/* The places of the documents: the design's document column, one set of side fields. */
.doc {
  width: min(calc(100% - 2 * var(--space-4)), var(--document-width));
  margin: var(--space-5) auto var(--space-7);
}

/* The title of /prices; on the document pages the design's `.document h1` (34 px) wins. */
.doc-title {
  margin: 0 0 var(--space-3);
  font-size: 2rem;
  line-height: var(--line-height-heading);
}

.doc-pending {
  margin: 0 0 var(--space-5);
  color: var(--color-text-secondary);
}

/* The texts of the documents (window «Документы 21.10», D-1138): the bot's words, one paragraph per
   point; the table of the Offer's tariffs scrolls inside itself on a phone, never the page. */
.document p {
  margin: 0 0 var(--space-3);
}

/* A long word of a title («конфиденциальности») breaks by the rules of Russian, with a hyphen. */
.document h1,
.document h2 {
  hyphens: auto;
}

.document-table {
  overflow-x: auto;
  margin: 0 0 var(--space-4);
}

.document-table table {
  min-width: 36rem;
  border-collapse: collapse;
  font-size: var(--font-size-caption);
}

.document-table th,
.document-table td {
  padding: var(--space-2);
  border: var(--border-width) solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

/* The dialog of «Войти». */
.stub {
  max-width: min(480px, calc(100vw - 2 * var(--space-4)));
  padding: var(--space-5);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-large);
  background: var(--color-surface);
  box-shadow: var(--shadow-raised);
  color: var(--color-text);
}

.stub::backdrop {
  background: color-mix(in srgb, var(--color-text) 40%, transparent);
}

.stub-title {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-question);
  line-height: var(--line-height-heading);
}

/* Window C8: from 600 px — the goal cards three in a row (the picture on top, the pill «Начать»),
   wider than the quiz column; the tagline of the header at 14 px (D-1077 (2)). */
@media (min-width: 600px) {
  .brand-tagline {
    display: block;
    font-size: 14px;
  }

  .hero-intro,
  .quiz:not(.quiz--chat) {
    max-width: var(--document-width);
  }

  .goal-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .goal-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-4);
  }

  .goal-card img {
    width: 72px;
    height: 72px;
  }

  .goal-card-title {
    font-size: var(--font-size-lead);
  }

  .goal-card-start {
    position: static;
    width: auto;
    height: auto;
    margin-top: auto; /* «Начать» on one line in every card, with or without the note */
    padding: var(--space-2) var(--space-4);
    overflow: visible;
    clip-path: none;
    border-radius: var(--radius-pill);
    background: var(--color-accent);
    color: var(--color-surface);
    font-weight: var(--font-weight-medium);
  }

  .goal-card::after {
    content: none;
  }
}

@media (min-width: 720px) {
  .hero-title {
    font-size: var(--font-size-display);
  }

  .block-title {
    font-size: var(--font-size-heading);
  }

  .cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .bot-screens {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .tariffs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .bot-buttons {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .card {
    padding: var(--space-4);
  }

  /* D-1138: the title of a document a little smaller on a phone (the design's 34 px is for wide). */
  .document h1 {
    font-size: 1.75rem;
  }
}

/* Narrower than a phone (a page zoomed to 200 %): the header may take two lines. */
@media (max-width: 340px) {
  .site-header {
    flex-wrap: wrap;
  }

  .brand-name,
  .brand-tagline {
    white-space: normal;
  }

  .hero-title,
  .doc-title {
    overflow-wrap: anywhere;
  }

  .tariffs {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .goal-card:hover,
  .option:hover {
    transform: none;
  }

  .chat-typing::after {
    animation: none;
  }

  .quiz-bar {
    transition: none;
  }
}