/* ==========================================================================
   AKA CONNECT — features page
   Figma node 82:1210 (1470x4638). Six bands: hero, omnichannel inbox,
   AI-powered support (dark), AI copilot, analytics, capabilities bento.
   Rebuilt as flow sections from the same tokens rather than fixed offsets.
   ========================================================================== */

.band {
  width: calc(100% - var(--gutter) * 2);
  max-width: var(--content);
  margin: 40px auto 0;
  padding: 60px;
  border-radius: 40px;
}
.band--plain { padding-inline: 0; }
.band--gray { background: var(--light-gray); }
.band--dark { position: relative; overflow: hidden; background: var(--ink); color: var(--white); }

.band__eyebrow { margin-bottom: 10px; }
.band__title { font: var(--h2); letter-spacing: 0; text-transform: uppercase; color: var(--ink-text); }
.band--dark .band__title { color: var(--white); }
.band__lead {
  max-width: 527px;
  margin-top: 20px;
  font: var(--t1);
  letter-spacing: 0;
  color: var(--ink-text);
}
.band--dark .band__lead { color: var(--gray-purple); }

.band__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 60px;
  align-items: center;
}

/* the arrow bullet list lives in site.css — solutions uses it too */

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

.f-hero {
  width: calc(100% - var(--gutter) * 2);
  max-width: var(--content);
  margin: 0 auto;
  padding: 60px;
  background: var(--white);
  border-radius: 40px;
  /* Figma 82:1501 gives the panel an inner purple glow; without it the white
     panel is invisible against the white page */
  box-shadow: var(--inner-purple);
}
.f-hero__title {
  max-width: 530px;
  font: var(--h1);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink);
}
.f-hero__title em { font-style: normal; color: var(--purple); }
.f-hero__grid { display: grid; grid-template-columns: 530px minmax(0, 1fr); gap: 60px; align-items: center; }

/* ---------- hero illustration — Figma 82:1501 ----------
   The design pins five cards and three dashed connectors at fixed offsets on
   the 1430x598 panel. Those offsets only make sense at one size, so the whole
   composition lives on a 715x520 stage that is scaled down as the column
   narrows, and unwinds into a plain column once the grid stacks. */

/* align-items must be pinned or the CTA stretches to the column's width */
.f-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 520px;
}
.f-hero__cta { margin-top: 40px; }

.flow-wrap { --s: 1; width: calc(715px * var(--s)); height: calc(520px * var(--s)); }
.flow {
  position: relative;
  width: 715px;
  height: 520px;
  transform: scale(var(--s));
  transform-origin: top left;
}

.flow__line { position: absolute; }
.flow__line--1 { left: 312px; top: 76px; width: 74.5px; height: 60.57px; }
/* Figma centres these two in a bounding box and flips them vertically */
.flow__line--2 {
  left: calc(446.99px + 46.84px / 2);
  top: calc(195.91px + 52.74px / 2);
  width: 44.95px; height: 36.38px;
  transform: translate(-50%, -50%) rotate(73.6deg) scaleY(-1);
}
.flow__line--3 {
  left: calc(304px + 191px / 2);
  top: calc(248.83px + 138.34px / 2);
  width: 175.15px; height: 110.44px;
  transform: translate(-50%, -50%) rotate(-170.05deg) scaleY(-1);
}

.fcard {
  position: absolute;
  background: var(--white);
  border-radius: 15px;
  box-shadow: var(--shd-card);
}
.fcard--msg    { left: 0;     top: 47px;  width: 296px; padding: 5px; }
.fcard--reply  { left: 160px; top: 146px; width: 281px; padding: 15px; }
.fcard--ticket { left: 0;     top: 285px; width: 296px; padding: 20px 5px 5px; }
.fcard--new    { left: 501px; top: 104px; width: 214px; padding: 15px; }
.fcard--tasks  { left: 376px; top: 364px; padding: 15px; }

/* the mascot sits over the reply card's own inline copy of itself */
.flow__mascot { position: absolute; left: 147px; top: 137px; width: 65.33px; height: 49px; object-fit: contain; }

/* --- inbound message --- */
.fmsg {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  background: var(--light-gray);
  border-radius: 10px;
}
.fmsg__who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fmsg__avatar { width: 44px; height: 45px; flex: none; border-radius: 100px; object-fit: cover; }
.fmsg__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fmsg__name { font: var(--t-bold); line-height: 1.5; letter-spacing: 0; color: var(--ink-text); }
.fmsg__text { font-size: 12px; font-weight: 600; line-height: 1.5; color: var(--ink-text); }
.fmsg__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; }
.fmsg__time { font-size: 12px; font-weight: 600; line-height: 1.5; color: var(--gray-purple); }
.fmsg__meta img { width: 25px; height: 25px; }

/* --- suggested reply --- */
.fcard--reply { display: flex; flex-direction: column; gap: 7px; }
.freply__head { display: flex; align-items: center; gap: 10px; }
.freply__bot { width: 27px; height: 20px; flex: none; object-fit: contain; }
.freply__title { flex: 1 1 auto; font-size: 12px; font-weight: 700; line-height: 1.5; color: var(--purple); }
.freply__time { font-size: 10px; font-weight: 500; line-height: 1.5; color: var(--gray-purple); }
.freply__text { padding: 10px 0; font-size: 12px; font-weight: 500; line-height: 1.5; color: var(--purple); }

/* --- chips shared by both ticket cards (namespaced: auth.css owns .chip) --- */
.fchip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.fchip--urgent { background: var(--chip-urgent); color: var(--ink-urgent); }
.fchip--live   { background: var(--chip-live);   color: var(--accent-green); }
.fchip--soft   { padding: 5px 10px; border-radius: 5px; background: var(--w-purple); color: var(--ink-text); }
.fchip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-green); }

/* --- assigned ticket --- */
.fcard--ticket { display: flex; flex-direction: column; gap: 15px; }
.fticket__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 0 15px; }
.fticket__name { font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--ink-text); }
.fticket__id   { font-size: 12px; font-weight: 600; line-height: 1.5; color: var(--ink-text); }

.fticket__panel {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 15px;
  background: var(--light-gray);
  border-radius: 10px;
}
.fticket__person { display: flex; align-items: center; gap: 10px; }
.fpair__key { font-size: 12px; font-weight: 600; line-height: 1.5; color: var(--gray-purple); }
.fpair__val { font-size: 12px; font-weight: 600; line-height: 1.5; color: var(--ink-text); }

.fticket__foot { display: flex; gap: 30px; padding: 0 15px 10px; }
.fticket__foot > div { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }

/* --- new ticket --- */
.fcard--new { display: flex; flex-direction: column; gap: 20px; }
.fnew__head { display: flex; flex-direction: column; gap: 7px; }
.fnew__title { font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--purple); }
.fnew__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fnew__meta { display: flex; flex-direction: column; gap: 7px; }
.fnew__btn {
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--light-purple);
  font: var(--t-med);
  letter-spacing: 0;
  color: var(--purple);
  text-align: center;
}

/* --- task list --- */
.fcard--tasks { display: flex; flex-direction: column; gap: 20px; }
.ftasks { display: flex; flex-direction: column; gap: 10px; }
.ftasks li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink-text);
  white-space: nowrap;
}
.ftasks img { width: 15px; height: 15px; flex: none; }

/* ---------- message card — Figma component "Message" 93:1052 ---------- */

.msgs { display: flex; flex-direction: column; gap: 15px; }
.msg {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 15px;
  background: var(--white);
  border: 1px solid rgba(242, 243, 246, .56);
  border-radius: 25px;
  filter: drop-shadow(9px 7px 7.5px rgba(43, 43, 43, .2));
}
.msg__who { display: flex; align-items: center; gap: 7px; flex: 1 1 0; min-width: 0; }
.msg__avatar { width: 45px; height: 45px; border-radius: 100px; flex: none; object-fit: cover; }
.msg__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.msg__name { font: var(--t-med); letter-spacing: 0; color: var(--ink-text); }
.msg__text {
  font: var(--t-med);
  letter-spacing: 0;
  color: var(--gray-purple);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex: none; }
.msg__time { font-size: 12px; font-weight: 500; color: var(--gray-purple); }
.msg__badges { display: flex; align-items: center; gap: 5px; }
.msg__count {
  display: grid;
  place-items: center;
  min-width: 27px;
  height: 28px;
  padding: 0 8px;
  border-radius: 100px;
  background: var(--purple);
  font-size: 12px;
  font-weight: 500;
  color: var(--white);
}
.msg__channel { width: 28px; height: 28px; object-fit: contain; }

/* ---------- AI-powered support (dark band) ---------- */

.band--dark .band__glow {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  opacity: .3;
  background: radial-gradient(closest-side,
              #66538C 0%, #D3BDFF 40.4%, #1E1E1E 93.3%, rgba(30, 30, 30, 0) 100%);
}
.band--dark .band__glow--1 { right: -560px; top: -79px;  width: 1040px; height: 596px; }
.band--dark .band__glow--2 { left: -773px;  top: -461px; width: 1289px; height: 765px; }

.band__inner { position: relative; }
.band__cta { margin-top: 40px; }

.status-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 20px; }
.status-chip {
  padding: 8px 12px;
  border-radius: 30px;
  background: var(--chip-dark);
  box-shadow: var(--inner-chip);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--white);
}

/* Figma 103:1600 insets the content 120px and 81px, giving a 527/585 split
   with a 78px gutter rather than the shared band's even columns */
.band--dark { padding: 81px 120px; }
.band__split--ai { grid-template-columns: minmax(0, 527fr) minmax(0, 585fr); gap: 78px; align-items: start; }

.ai-stats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 10px; }
.ai-stat {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  min-height: 168px;
  padding: 30px;
  background: var(--panel-dark);
  border-radius: var(--r-plan);
  color: var(--white);
}
.ai-stat__value {
  font-family: var(--font);
  font-weight: 400;
  font-size: 45px;
  line-height: .9;
  letter-spacing: -.04em;
}
.ai-stat__label { font: var(--t-med); letter-spacing: 0; }

/* ---------- AI copilot ---------- */

/* Figma 93:1382 / 93:1351: two 590 panels 10px apart, inset 140 from the page */
.band__split--copilot {
  max-width: 1190px;
  margin: 0 auto;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}

.copilot__panel {
  padding: 60px;
  background: var(--light-gray);
  border-radius: 40px;
}
/* ---------- AI copilot transcript — Figma 93:1382 ----------
   A real conversation, so it is built as a flow column rather than the
   design's four pinned bubbles: the vertical rhythm is the same and it
   survives translation, where fixed offsets would not. */

.chat {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 30px;
  border-radius: 40px;
  background: linear-gradient(135.4deg, #F2F3F6 5.17%, #EBEEFF 100.91%);
  box-shadow: inset 0 -4px 4px 0 rgba(255, 255, 255, .21),
              inset 4px 4px 4px 0 rgba(255, 255, 255, .37);
}
.chat__row { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; max-width: 94%; }
.chat__row--out { align-self: flex-end; align-items: flex-end; }
.chat__who {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink-text);
}
.chat__avatar { width: 25px; height: 25px; flex: none; border-radius: 100px; object-fit: cover; }

/* the bubble's square corner marks who is speaking */
.bubble {
  display: flex;
  align-items: flex-start;
  gap: 25px;
  padding: 15px;
  background: var(--white);
  border-radius: 15px 15px 15px 2px;
  filter: drop-shadow(9px 7px 7.5px rgba(43, 43, 43, .2));
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink-text);
}
.bubble time { flex: none; color: var(--gray-purple); }
.bubble--out { gap: 15px; border-radius: 15px 15px 2px 15px; color: var(--purple); }

.chat__reply {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 400px;
  max-width: 100%;
  padding: 15px;
  background: var(--white);
  border-radius: 20px;
  filter: drop-shadow(9px 7px 7.5px rgba(43, 43, 43, .2));
}
.chat__reply .freply__time { font-size: 12px; }
.chat__text { padding: 10px 0; font-size: 12px; font-weight: 500; line-height: 1.5; color: var(--purple); }
.chat__actions { display: flex; flex-wrap: wrap; gap: 3px; }
.chat__btn {
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--light-gray);
  font: var(--t-med);
  letter-spacing: 0;
  color: var(--ink-text);
}
.chat__btn--primary { background: var(--purple); color: var(--white); }
.chat__btn--soft { background: var(--light-purple); color: var(--purple); }

/* ---------- analytics — Figma 107:1690 ---------- */

.band--chart { padding: 0; }
.an { position: relative; min-height: 510px; padding: 81px 120px 59px; }
.an__copy { max-width: 527px; }
.an__lead { max-width: 481px; }

.an__days {
  position: absolute;
  top: 81px;
  left: calc(50% + 10px);
  display: flex;
  justify-content: space-between;
  width: 585px;
  font: var(--t-med);
  letter-spacing: 0;
  color: var(--gray-purple);
}

.an__bars {
  position: absolute;
  left: 120px;
  right: 120px;
  bottom: 59px;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 294px;
}
.an__bar {
  flex: 1 1 0;
  height: var(--h);
  border-radius: 15px 15px 5px 5px;
  background: linear-gradient(to bottom, var(--accent-lavender), rgba(123, 111, 149, .3));
}
.an__bar--hl { background: linear-gradient(to bottom, var(--purple), rgba(127, 114, 153, .3)); }

.an__pin {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 15px 25px 15px 15px;
  background: var(--white);
  border-radius: 20px;
  box-shadow: var(--shd-card);
}
.an__pin b { font: var(--h3); letter-spacing: 0; color: var(--ink); }
.an__pin span { font-size: 12px; font-weight: 500; line-height: 1.2; color: var(--gray-purple); }
.an__pin--1 { left: calc(50% + 9px);   top: 234px; }
.an__pin--2 { left: calc(50% + 285px); top: 288px; }

.an__range {
  position: absolute;
  left: 100px;
  top: 397px;
  padding: 10px;
  border-radius: 10px;
  background: var(--light-gray);
  box-shadow: var(--shd-card);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--gray-purple);
}

/* ---------- omnichannel band — Figma 134:3111 ----------
   The four cards sit on alternating indents (x = 60 / 158 inside a 597 wide
   column), so the offsets are expressed as percentages of that column. */

.band__split--omni { align-items: center; gap: 120px; }
.msgs--stagger { gap: 33px; }
.msgs--stagger .msg { margin-right: 13.4%; }
.msgs--stagger .msg:nth-child(even) { margin-right: 0; margin-left: 16.4%; }

/* the email row has a pastel tile instead of a photo */
.msg__tile {
  display: grid;
  place-items: center;
  width: 45px;
  height: 45px;
  flex: none;
  padding: 5px;
  border-radius: 100px;
  background: var(--tile, var(--accent-blue));
  box-shadow: var(--inner-chip);
}
.msg__tile--blue { --tile: var(--accent-blue); }
.msg__tile-in {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 35px;
  background: var(--white);
  box-shadow: var(--inner-chip);
}
.msg__tile-in img { width: 24px; height: 18.7px; object-fit: contain; }

/* "just now" / "4 m" sits to the left of the unread badge */
.msg__new { display: flex; align-items: center; gap: 8px; }
.msg__rel { font-size: 12px; font-weight: 500; line-height: 1.5; color: var(--gray-purple); }
.msg__channel--round { border-radius: 35px; }

/* --- channel tiles --- */
.chan { display: flex; align-items: center; gap: 20px; margin-top: 30px; flex-wrap: wrap; }
.chan__tiles { display: flex; align-items: center; gap: 4px; }
.chan__tile {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 4px;
  border-radius: 80px;
  background: var(--tile);
  box-shadow: var(--inner-chip);
}
.chan__tile > img { width: 32px; height: 32px; object-fit: contain; }
.chan__in {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 28px;
  background: var(--white);
  box-shadow: inset 0 3.2px 40px 0 rgba(108, 108, 108, .09);
}
.chan__in img { object-fit: contain; }
.chan__more {
  display: flex;
  align-items: center;
  gap: 9px;
  font: var(--t-med);
  letter-spacing: 0;
  color: var(--gray-purple);
  white-space: nowrap;
}
.chan__more img { width: 23px; height: 21px; flex: none; }

/* ---------- capabilities bento — Figma 208:4825 ----------
   Two rows of fixed proportion: 705/465, then 396/299/465. The ratios are
   expressed as fr units so the block stays fluid inside its 1180 max width. */

.caps {
  display: flex;
  flex-direction: column;
  gap: 40px;
  /* Figma's 1180 is the grid itself, so the box has to be 1180 + padding */
  max-width: var(--shell);
  /* the 60px below is what every other page's last section leaves before the
     footer — .teaser on the home and solutions pages, .devapi on integrations */
  margin: 90px auto 60px;
  padding: 0 var(--gutter);
}
.caps__head { display: flex; flex-direction: column; gap: 10px; max-width: 674px; }
.caps__title {
  font: var(--h2);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink-text);
}

.caps__grid { display: flex; flex-direction: column; gap: 10px; }
.caps__row { display: grid; gap: 10px; }
.caps__row--a { grid-template-columns: minmax(0, 705fr) minmax(0, 465fr); }
.caps__row--b { grid-template-columns: minmax(0, 396fr) minmax(0, 299fr) minmax(0, 465fr); }
.caps__stack { display: flex; flex-direction: column; gap: 10px; }

.cap {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 156px;
  padding: 30px;
  background: var(--light-gray);
  border-radius: 20px;
}
.cap--tall  { height: 322px; }
.cap--split { justify-content: space-between; }
.cap--dark   { background: var(--panel-dark); }
.cap--violet { background: var(--light-purple); }

.cap__name { font: var(--h3); letter-spacing: 0; color: var(--ink-text); }
.cap__desc { font: var(--t-med); letter-spacing: 0; color: var(--gray-purple); }
.cap--dark   .cap__name, .cap--dark   .cap__desc { color: var(--w-purple); }
.cap--violet .cap__name, .cap--violet .cap__desc { color: var(--purple); }

/* the artwork is laid over the card, darken-blended so its own light ground
   drops out against the card fill */
.cap__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  object-fit: cover;
  object-position: bottom;
  mix-blend-mode: darken;
  pointer-events: none;
}
.cap__art--foot { inset: auto 0 0 0; height: 166px; }

.cap-help {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 30px;
  /* a floor, not a height: between about 720 and 950 the title wraps deeper and
     the two buttons drop onto separate rows, and a fixed 322px left them
     hanging out of the card and almost touching the footer */
  min-height: 322px;
  padding: 30px;
}
.cap-help__title {
  font: var(--h2);
  letter-spacing: 0;
  color: var(--ink-text);
}
.cap-help__title em { font-style: normal; color: var(--gray-purple); }
.cap-help__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 15px; }

/* ---------- responsive ---------- */

/* The stage keeps its exact Figma geometry and is scaled to whatever width
   the column has left. Each step is the largest scale that still fits; below
   1240 nothing fits without shrinking 12px text past legibility, so the
   composition unwinds instead. */
@media (max-width: 1460px) { .flow-wrap { --s: .82; } }
@media (max-width: 1340px) { .flow-wrap { --s: .74; } }
@media (max-width: 1280px) { .flow-wrap { --s: .68; } }

@media (max-width: 1240px) {
  .f-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .f-hero__copy { min-height: 0; display: block; }

  /* the same cards, as an ordinary column; the connectors only make sense
     against the pinned layout, so they go */
  .flow-wrap { --s: 1; width: auto; height: auto; }
  .flow {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: auto;
    height: auto;
    transform: none;
  }
  .flow__line, .flow__mascot { display: none; }
  .fcard { position: static; width: auto; max-width: 420px; }
  .fcard--tasks { max-width: max-content; }
}

@media (max-width: 1380px) {
  .band, .f-hero { padding: 40px; }
  .band--chart { padding: 0; }
  .an { padding: 60px 60px 48px; }
  .an__bars { left: 60px; right: 60px; bottom: 48px; }
  .an__range { left: 44px; }
  .caps__row--a { grid-template-columns: minmax(0, 1fr); }
  /* once a card is wider or shorter than the artwork, cover starts cutting
     vignettes off the ends; contain keeps the whole illustration */
  .cap__art { object-fit: contain; }
  .caps__row--b { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 1240px) {
  /* the pinned overlays need the full 1430 to sit clear of the copy, so the
     chart becomes an ordinary stack under it */
  .an { min-height: 0; padding: 40px; }
  .an__copy { max-width: none; }
  .an__days { position: static; width: auto; margin-top: 32px; }
  .an__bars { position: static; height: 220px; margin-top: 10px; }
  .an__pin {
    position: static;
    display: inline-flex;
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    margin: 14px 8px 0 0;
    padding: 10px 14px;
  }
  .an__pin b { font-size: 18px; }
  .an__range { position: static; display: inline-block; margin-top: 14px; }
}

@media (max-width: 1080px) {
  .band__split, .f-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  /* the omni cards lose their indent so they can use the full width */
  .msgs--stagger .msg,
  .msgs--stagger .msg:nth-child(even) { margin-left: 0; margin-right: 0; }
  /* stacked, the heading has to come before the illustration it describes */
  .band__split .band__copy { order: -1; }
  .ai-stats { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .band, .f-hero { padding: 28px 20px; border-radius: 24px; }

  /* ---- features hero, phone — Figma 278:18648 ----
     The design centres the hero copy and staggers the three flow cards down
     the panel, joined by the same dashed connectors the desktop stage uses. */
  .f-hero__copy { text-align: center; }
  /* 38px is the design's size and holds down to about 400px wide. Russian
     sets "ПРЕВОСХОДНОЙ" as one 312px word, so below that the heading has to
     scale with the viewport; break-word is the backstop if a translation ever
     produces something longer still. */
  .f-hero__title {
    max-width: none;
    font-size: clamp(26px, 9vw, 38px);
    overflow-wrap: break-word;
  }

  /* the stage's two right-hand cards are not in the mobile design */
  .fcard--new, .fcard--tasks { display: none; }

  .fcard--msg, .fcard--ticket { align-self: flex-start; width: 80%; }
  .fcard--reply { align-self: flex-end; width: 77%; }

  /* Each connector hangs off the card it leaves, so it stays put whatever the
     card grows to — the pinned `.flow__line` images can't, since the column
     has no fixed geometry. Painted before the card each one points at, so it
     tucks underneath exactly as the design draws it. */
  /* relative, so the connector has something to hang off — inset must go
     back to auto or the stage's pinned left/top become live offsets */
  .fcard--msg, .fcard--reply { position: relative; inset: auto; }
  .fcard--msg::after,
  .fcard--reply::after {
    content: "";
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
  }
  /* Both leave their card going straight down and flatten out sideways as they
     arrive — the stage's own connectors run the other way round, sideways
     first, so these are their own files rather than reused assets. */
  .fcard--msg::after {
    left: 14%;
    top: calc(100% + 5px);
    width: 47px;
    height: 33px;
    background-image: url(../img/flow-m1.svg);
  }
  .fcard--reply::after {
    right: 17px;
    top: calc(100% + 10px);
    width: 59px;
    height: 66px;
    background-image: url(../img/flow-m2.svg);
  }
  /* Figma 278:18648 sets the section headings at 20/26 on a phone — much
     smaller than the desktop h2, which was only being stepped down to 26. */
  .band__title, .caps__title, .cap-help__title { font-size: 20px; line-height: 1.3; }
  /* A plain band has no card of its own, so its side padding has to stay at
     zero here too — otherwise its content, and the copilot panel that is the
     card, sit 20px inside every other band's edge. */
  .band--plain { padding-inline: 0; }
  .copilot__panel { padding: 28px 20px; border-radius: 24px; }
  .ai-stats { grid-template-columns: 1fr; }
  .ai-stat { min-height: 0; padding: 22px; }
  .chat { padding: 20px; border-radius: 24px; gap: 12px; }
  .chat__row { max-width: 100%; }
  .bubble { gap: 12px; flex-wrap: wrap; }
  .chat__actions { gap: 6px; }
  /* ---- analytics, phone — Figma 278:18648 ----
     The design keeps the pinned composition rather than unwinding it, runs the
     panel to both screen edges, and shows seven bars so the series lines up
     with the seven day labels — the two oldest readings drop off. Everything
     is measured up from the panel's bottom, which is where the bars sit, so
     the pins hold their place whatever height the copy above takes. */
  .band--chart { width: 100%; max-width: none; padding: 0; }
  .an { padding: 28px 15px 30px; }
  .an__copy { max-width: none; }

  .an__days {
    position: static;
    width: auto;
    margin-top: 28px;
    font-size: 12px;
  }

  .an__bars {
    position: static;
    height: 300px;
    margin-top: 10px;
    gap: 6px;
  }
  .an__bar:nth-child(-n + 2) { display: none; }

  .an__pin {
    position: absolute;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin: 0;
    padding: 8px 12px;
    border-radius: 14px;
  }
  .an__pin b { font-size: 19px; }
  .an__pin span { font-size: 11px; }
  .an__pin--1 { left: 31.6%; top: auto; bottom: 206px; }
  .an__pin--2 { left: 56.5%; top: auto; bottom: 133px; }

  .an__range {
    position: absolute;
    left: 15px;
    top: auto;
    bottom: 52px;
    padding: 8px 12px;
  }
  .msg { padding: 12px; gap: 10px; border-radius: 18px; }
  .msg__avatar, .msg__tile { width: 36px; height: 36px; }
  .msg__meta { gap: 6px; }
  .msg__new { flex-direction: column; align-items: flex-end; gap: 4px; }
  .chan { gap: 12px; margin-top: 24px; }
  .caps { gap: 28px; }
  .caps__row--b { grid-template-columns: minmax(0, 1fr); }
  /* stacked, the design reads Smart Ticketing straight after Task Management,
     ahead of the pair it shares a row with on a wide screen */
  .caps__row--b .cap--violet { order: -1; }
  /* the two actions stack, and a max-content column sizes them both to the
     wider one, as the design draws them */
  .cap-help__actions {
    display: grid;
    /* minmax so the pair still shrinks rather than overflowing when a
       translation runs long — Uzbek clears 320px by only 10px */
    grid-template-columns: minmax(0, max-content);
    gap: 20px;
  }
  /* both are stretched to the wider one's width, so the icon has to be pushed
     to the right edge — left to itself it stays beside the shorter label */
  .cap-help__actions .cta-btn { justify-content: space-between; }
  .cap { padding: 22px; height: auto; min-height: 140px; }
  .cap--tall { height: auto; min-height: 260px; }
  .cap-help { min-height: 0; padding: 8px 0 0; }
}