/* /telegram-bot on the index_v2 design.
   Loaded after /css/index_v2.bundle.css (head_v2), so the tokens, the
   .c-btn / .c-control primitives, the hero title/subline (f1_hero.css) and
   the F18 FAQ rows are already there; this sheet lays out the page and its
   own blocks, all under .tg-*: the hero with the chat example, the steps,
   the article, call to action, links and disclaimer.
   Tokens only, no colour literals. Breakpoints follow the index_v2 ladder
   (30 / 48 / 64rem). */

/* ---- hero ------------------------------------------------------------ */

.tg-hero {
  padding-block: var(--space-6) var(--space-section);
  background: var(--bg-alt);
  border-block-end: 1px solid var(--line);
}

.tg-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
}

@media (min-width: 64rem) {
  .tg-hero { padding-block-start: var(--space-section); }
  .tg-hero__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: var(--space-hero-gap);
  }
}

.tg-crumbs { margin-block-end: var(--space-4); }
.tg-crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: .02em;
  color: var(--ink-500);
}
.tg-crumbs__item { display: inline-flex; align-items: center; gap: var(--space-2); }
.tg-crumbs__item + .tg-crumbs__item::before {
  content: "/";
  color: var(--line-strong);
}
.index-v2 a.tg-crumbs__link,
.index-v2 a.tg-crumbs__link:visited { color: var(--brand-700); }
.index-v2 a.tg-crumbs__link:hover { color: var(--brand-600); text-decoration: underline; }

/* the H1 is long; one step under the homepage hero size keeps it to 2-3 lines */
.index-v2 h1.tg-hero__title { font-size: var(--step-4); line-height: var(--lh-tight); }
.index-v2 p.tg-hero__lead { max-inline-size: 36em; color: var(--ink-700); }

.index-v2 a.tg-bot-btn,
.index-v2 a.tg-bot-btn:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-block-start: var(--space-6);
  padding-inline: var(--space-6);
  border-radius: var(--r-field);
  font-size: var(--step-1);
  text-decoration: none;
}
.tg-bot-btn .icon { flex: 0 0 auto; font-size: 1.35em; }
@media (max-width: 29.999rem) {
  .index-v2 a.tg-bot-btn { inline-size: 100%; padding-inline: var(--space-4); font-size: var(--step-0); }
}

.index-v2 p.tg-hero__note {
  margin-block: var(--space-3) 0;
  font-size: var(--fs-200);
  line-height: var(--lh-body);
  color: var(--ink-700);
}
.index-v2 p.tg-hero__note + p.tg-hero__note { margin-block-start: var(--space-1); }
.tg-hero__username {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--ink-900);
  overflow-wrap: anywhere;
}
.index-v2 a.tg-hero__link,
.index-v2 a.tg-hero__link:visited {
  font-weight: 600;
  color: var(--brand-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.index-v2 a.tg-hero__link:hover { color: var(--brand-800); }

/* ---- chat example ---------------------------------------------------- */
/* A light card on the light hero: every text colour is set here, nothing is
   inherited from the hero. */

.tg-chat {
  inline-size: 100%;
  max-inline-size: 24rem;
  margin: 0 auto;
  overflow: hidden;
  color: var(--ink-900);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-case);
}

.tg-chat__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  color: var(--bg);
  background: var(--brand-700);
}
.tg-chat__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  background: var(--brand-600);
  border-radius: var(--r-pill);
}
.tg-chat__name {
  font-family: var(--font-mono);
  font-size: var(--fs-200);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.tg-chat__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--bg-alt);
}

.tg-chat__msg {
  max-inline-size: 90%;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--r-field);
  font-size: var(--fs-200);
  line-height: 1.45;
  color: var(--ink-900);
}
.index-v2 p.tg-chat__msg--out {
  align-self: flex-end;
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--ink-900);
  background: var(--brand-100);
  border-end-end-radius: var(--r-ctl);
}
.tg-chat__msg--in {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-end-start-radius: var(--r-ctl);
}
.index-v2 .tg-chat__msg--in p {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-200);
  line-height: 1.45;
  color: var(--ink-900);
}
.index-v2 .tg-chat__msg--in p:last-child { margin-block-end: 0; }
.index-v2 .tg-chat__msg--in p.tg-chat__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--step-0);
}
.index-v2 .tg-chat__msg--in p.tg-chat__found {
  margin-block-end: var(--space-2);
  font-weight: 600;
  color: var(--brand-700);
}
.index-v2 .tg-chat__msg--in p.tg-chat__tiles {
  margin-block-start: var(--space-2);
  color: var(--ink-700);
}

.tg-chat__btn {
  align-self: stretch;
  padding: var(--space-2);
  font-size: var(--fs-200);
  font-weight: 600;
  text-align: center;
  color: var(--brand-700);
  background: var(--surface);
  border: 1px solid var(--brand-100);
  border-radius: var(--r-ctl);
}

.tg-chat__caption {
  padding: var(--space-2) var(--space-4) var(--space-3);
  font-size: var(--step--2);
  text-align: center;
  color: var(--ink-500);
  background: var(--surface);
  border-block-start: 1px solid var(--line);
}

/* ---- article ----------------------------------------------------------- */

.tg-landing__inner { max-inline-size: var(--layout-narrow); }

.tg-article__section + .tg-article__section {
  margin-block-start: var(--space-6);
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--line);
}
.index-v2 h2.tg-article__title {
  margin-block-end: var(--space-4);
  font-size: var(--step-2);
  letter-spacing: -.02em;
  scroll-margin-block-start: calc(var(--header-h) + var(--space-4));
}
.tg-article__section p,
.tg-list li {
  font-size: var(--step-0);
  line-height: var(--lh-body);
  color: var(--ink-700);
}
.tg-article__section p + p { margin-block-start: var(--space-3); }
.index-v2 a.tg-article__link,
.index-v2 a.tg-article__link:visited {
  font-weight: 600;
  color: var(--brand-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tg-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 48rem) {
  .tg-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.tg-steps__item {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-field);
}
@media (min-width: 48rem) {
  .tg-steps__item { flex-direction: column; gap: var(--space-3); }
}
.tg-steps__num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--brand-700);
  background: var(--brand-50);
  border-radius: var(--r-pill);
}
.tg-steps__body { min-inline-size: 0; }
.index-v2 .tg-article__section p.tg-steps__title {
  margin: 0 0 var(--space-1);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--step-0);
  line-height: var(--lh-tight);
  color: var(--ink-900);
}
.index-v2 .tg-article__section p.tg-steps__text {
  margin: 0;
  font-size: var(--fs-200);
}

.index-v2 ul.tg-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-inline-start: 1.25rem;
  list-style: disc;
}
.index-v2 ul.tg-list li::marker { color: var(--brand-600); }

.tg-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  margin-block-start: var(--space-6);
  padding: var(--space-5);
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: var(--r-card);
}
.index-v2 p.tg-cta__text {
  margin: 0;
  font-size: var(--step-0);
  line-height: var(--lh-body);
  color: var(--ink-900);
}
.index-v2 a.tg-cta__btn,
.index-v2 a.tg-cta__btn:visited {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border-radius: var(--r-field);
  text-decoration: none;
}
.tg-cta__btn .icon { flex: 0 0 auto; font-size: 1.25em; }
@media (max-width: 29.999rem) {
  .index-v2 a.tg-cta__btn { inline-size: 100%; justify-content: center; }
}

/* ---- FAQ (F18 rows) ---------------------------------------------------- */

.tg-faq-block .f18__inner { max-inline-size: var(--layout-narrow); }
@media (min-width: 64rem) {
  .tg-faq-block.f18 { padding-block: var(--space-section); }
}
.tg-faq .f18-faq__answer p + p { margin-block-start: var(--space-3); }

/* ---- links and disclaimer -------------------------------------------- */

.tg-outro { padding-block: var(--space-6); }
.tg-outro__inner { max-inline-size: var(--layout-narrow); }
.tg-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.index-v2 a.tg-links__link,
.index-v2 a.tg-links__link:visited {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--control-h-md);
  padding-inline: var(--space-4);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-200);
  color: var(--brand-700);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
}
@media (hover: hover) {
  .index-v2 a.tg-links__link:hover { color: var(--brand-700); background: var(--brand-50); border-color: var(--brand-600); }
}
.index-v2 p.tg-disclaimer {
  margin-block: var(--space-4) 0;
  font-size: var(--fs-200);
  line-height: var(--lh-body);
  color: var(--ink-500);
}