/* ==========================================================================
   AKA CONNECT — homepage
   Figma node 85:1665 (1470x5204). The source frame is absolutely positioned
   throughout; this rebuilds it as flow sections using the same tokens, type
   scale and spacing, so it reflows instead of relying on fixed offsets.
   ========================================================================== */

/* ---------- hero — Figma 85:1685 ---------- */

.hero {
  position: relative;
  width: calc(100% - var(--gutter) * 2);
  max-width: var(--content);
  margin: 0 auto;
  padding: 60px 30px 0;
  overflow: hidden;
  background: var(--white);
  border-radius: 40px;
  box-shadow: var(--inner-purple);
  text-align: center;
}

.hero__glow {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(closest-side,
              #D3BDFF 0%, #EDE6FF 45%, rgba(255, 255, 255, 0) 100%);
  opacity: .55;
}
.hero__glow--a { top: 340px; width: 1081px; height: 489px; }
.hero__glow--b { top: 240px; width: 1305px; height: 590px; opacity: .35; }

.hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  max-width: 675px;
  margin: 0 auto;
}

.hero__title {
  margin-top: 10px;
  font: var(--h1);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink);
}

.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; }
.hero .trust { justify-content: center; }

/* CTA button with the trailing icon tile — Figma component "Button CTA" */
.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 5px 5px 15px;
  border-radius: var(--r-btn);
  box-shadow: var(--shd-btn);
  font: var(--t-body);
  letter-spacing: var(--ls-body);
  transition: transform .18s ease;
}
.cta-btn:hover { text-decoration: none; transform: translateY(-1px); }
.cta-btn__icon {
  display: grid;
  place-items: center;
  padding: 12px 13px;
  border-radius: var(--r-chip);
  background: var(--w-purple);
  border: 1px solid var(--light-purple);
}
.cta-btn__icon img { width: 20px; height: 20px; object-fit: contain; }

/* icon-expert.svg ships with its own 48x46 rounded tile, so this variant
   drops the wrapper's tile instead of nesting one inside the other */
.cta-btn__icon--art { padding: 0; background: none; border: 0; }
.cta-btn__icon--art img { width: 48px; height: 46px; }
.cta-btn--light { background: var(--w-purple); color: var(--ink-text); }
/* the 15px right padding balances a text-only dark button; when an icon tile
   is present it pushes the tile inwards, so it drops back to the base 5px and
   the tile sits the same 5px from every edge as it does on the light variant */
.cta-btn--dark { background: var(--ink); color: var(--white); padding-right: 15px; }
.cta-btn--dark:has(.cta-btn__icon) { padding-right: 5px; }

.hero__app {
  position: relative;
  display: block;
  width: 552px;
  max-width: 100%;
  /* The mockup's artwork stops part-way down the keyboard — the deck, palm
     rest and front lip are simply not in the Figma asset, so the laptop ends
     on a cut row of keys. Crop at the hinge instead: that is a real edge in
     the image, so it reads as a deliberate screen mockup. Replace the crop
     with `aspect-ratio: 552 / 370` if a complete render ever arrives. */
  aspect-ratio: 540 / 336;
  object-fit: cover;
  object-position: top;
  margin: 30px auto 0;
}

/* ---------- omnichannel orbit — Figma 107:1977 ---------- */

.orbit {
  position: relative;
  max-width: var(--shell);
  margin: 90px auto 0;
  padding: 0 var(--gutter) 40px;
  text-align: center;
}

/* the two thin arcs the pills sit on */
.orbit__arc {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  pointer-events: none;
  /* the arcs carry the design's own widths, but must still respect the shell
     once the viewport is narrower than they are */
  max-width: calc(100% - var(--gutter) * 2);
}
.orbit__arc--a { top: 155px; width: 1175px; }
.orbit__arc--b { top: 59px;  width: 1398px; }

/* white fade over the bottom of the arcs — Figma 85:1962 */
.orbit::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 173px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 68%);
  pointer-events: none;
}

.orbit__inner { position: relative; max-width: 632px; margin: 0 auto; padding-top: 250px; z-index: 1;}

.orbit__title {
  font: var(--h2);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink);
}
.orbit__title em { font-style: normal; color: var(--gray-purple); }

.orbit__lead { margin-top: 40px; font: var(--t1); letter-spacing: 0; color: var(--ink-text); }
.orbit__sub {
  max-width: 394px;
  margin: 40px auto 0;
  font: var(--t-med);
  letter-spacing: 0;
  color: var(--ink-text);
}
.orbit__link { margin-top: 40px; }

/* pills and channel avatars scattered along the arcs */
.orbit__pill,
.orbit__node { position: absolute; }

.pill {
  display: inline-flex;
  align-items: center;
  padding: 15px 20px;
  border-radius: 40px;
  background: var(--gray-purple);
  box-shadow: var(--inner-chip);
  font: var(--t-med);
  letter-spacing: 0;
  color: var(--white);
  white-space: nowrap;
}
.pill--soft { background: var(--light-purple); color: var(--purple); }
/* the mobile design shortens the two AKA-Chats pills; both labels are in the
   markup and one is always display:none, so only one is read aloud */
.pill__short { display: none; }

.node {
  display: inline-flex;
  align-items: center;
  padding: 5px;
  border-radius: 100px;
  background: var(--bubble, var(--gray-purple));
  box-shadow: var(--inner-chip);
}
.node img { width: 45px; height: 45px; border-radius: 35px; object-fit: contain; }
.node--white img { background: var(--white); }

/* Telegram and WhatsApp are circular glyphs that fill their artwork, so they
   sit straight on the coloured bubble. Gmail and Outlook are wide marks —
   53x41 and 90x64 — and `contain` letterboxes them, leaving bubble colour
   above and below and making the chip read as an oval. They get what the
   integrations chips get instead: a white disc with the mark inset on it, the
   bubble reduced to the ring around it. */
.node--mark {
  padding: 0;
  border: 5px solid var(--bubble, var(--gray-purple));
  background: var(--white);
}
.node--mark img {
  background: none;
  /* No radius on the mark itself. The circle belongs to the chip around it;
     rounding the image is what crops a wide logo at the left and right, since
     its widest point sits exactly where the curve comes in. */
  border-radius: 0;
  /* The padding is what sets the mark's size inside the disc: 8px each side
     leaves 29px for the artwork, and the taller vertical inset keeps the ink's
     corners clear of the curve, which is where a wide mark would clip first. */
  padding: 11px 8px;
}

/* desktop placement, mirroring the design's coordinates */
.orbit__pill--1 { left: 53.5%; top: 59px; }
.orbit__pill--2 { left: 17.7%; top: 123px; }
.orbit__pill--3 { left: 83%;   top: 280px; }
.orbit__pill--4 { left: 8%;    top: 470px; }
.orbit__pill--5 { left: 60.6%; top: 182px; }
.orbit__node--1 { left: 42.7%; top: 138px; }
.orbit__node--2 { left: 81.6%; top: 192px; }
.orbit__node--3 { left: 85%;   top: 455px; }
.orbit__node--4 { left: 27.9%; top: 68px; }
.orbit__node--5 { left: 17.7%; top: 299px; }

/* ---------- the scatter drifts ----------

   The chips sit at fixed points on the arcs, so the movement is a slow drift
   around where each one already is rather than travel along a path: enough to
   make the composition feel live, not enough to make anyone follow it.

   Every element carries its own distance, direction and period. Shared values
   would read as one block sliding; primes-ish durations mean the ten of them
   drift apart and never resynchronise into a visible pulse.

   The delays are negative so the ten start already spread through their
   cycles rather than all setting off together from the same point. That means
   a chip is almost never sitting on the 0% keyframe, so what guarantees they
   come to rest in the right place is the reduced-motion rule below removing
   the animation outright — not the keyframes. Collapsing the duration instead
   would park each one on whatever frame it had reached.

   It runs wherever the scatter is a composition: the pinned desktop layout
   above 1180px, and the phone layout below 721px, which gets its own, much
   smaller distances. In between the pieces are a wrapped row 12px apart, with
   no arrangement to bring to life. */

@keyframes orbit-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(var(--drift-x, 0), var(--drift-y, -10px), 0); }
}
@keyframes orbit-breathe {
  from { opacity: 1;   }
  to   { opacity: .55; }
}

/* each piece's period and starting point, the same in both layouts */
.orbit__pill--1 { --drift-time: 5s;   --drift-delay: 0s;    }
.orbit__pill--2 { --drift-time: 6.5s; --drift-delay: -2s;   }
.orbit__pill--3 { --drift-time: 5.5s; --drift-delay: -3.5s; }
.orbit__pill--4 { --drift-time: 7s;   --drift-delay: -1s;   }
.orbit__pill--5 { --drift-time: 6s;   --drift-delay: -4.5s; }
.orbit__node--1 { --drift-time: 4.5s; --drift-delay: -2.5s; }
.orbit__node--2 { --drift-time: 5.2s; --drift-delay: -3s;   }
.orbit__node--3 { --drift-time: 6.8s; --drift-delay: -1.5s; }
.orbit__node--4 { --drift-time: 4.8s; --drift-delay: -5s;   }
.orbit__node--5 { --drift-time: 5.8s; --drift-delay: -2s;   }

@media (min-width: 1181px) {
  .orbit__pill,
  .orbit__node {
    animation: orbit-drift var(--drift-time, 9s) var(--drift-delay, 0s) ease-in-out infinite alternate;
  }

  .orbit__pill--1 { --drift-x:   9px; --drift-y: -20px; }
  .orbit__pill--2 { --drift-x: -11px; --drift-y:  16px; }
  .orbit__pill--3 { --drift-x:  13px; --drift-y: -24px; }
  .orbit__pill--4 { --drift-x:  -7px; --drift-y:  22px; }
  .orbit__pill--5 { --drift-x:  11px; --drift-y: -18px; }

  /* the channel marks move a little further, so they read as the live part */
  .orbit__node--1 { --drift-x: -13px; --drift-y: -26px; }
  /* upward, like the Mail services pill just below it: drifting towards each
     other closes the 44px between them and they touch at full extension */
  .orbit__node--2 { --drift-x:  15px; --drift-y: -18px; }
  .orbit__node--3 { --drift-x:  -9px; --drift-y: -28px; }
  .orbit__node--4 { --drift-x:  18px; --drift-y:  24px; }
  .orbit__node--5 { --drift-x: -15px; --drift-y: -22px; }

  /* the arcs breathe rather than move, so the chips do not appear to come loose */
  .orbit__arc {
    animation: orbit-breathe 9s ease-in-out infinite alternate;
  }
  .orbit__arc--b { animation-delay: -4.5s; }
}

/* The phone composition packs the same ten pieces into a third of the room,
   some of them 6px apart, so these distances are the largest that fit. They
   were found by testing combinations against the measured layout at 320 to
   412px in all three languages, and kept only because every pair stays at
   least 4px apart at any point of their cycles — the few pairs that start
   closer than that never close up further. Relative to the scatter that is
   about the reach of the desktop drift. A piece may travel up to 10px past
   the scatter's sides, into the page gutter, and 18px above or below it. */
@media (max-width: 720px) {
  .orbit__pill,
  .orbit__node {
    animation: orbit-drift var(--drift-time, 9s) var(--drift-delay, 0s) ease-in-out infinite alternate;
  }

  .orbit__pill--1 { --drift-x: -10px; --drift-y: -15px; }  /* Your website   */
  .orbit__pill--2 { --drift-x:  10px; --drift-y:   2px; }  /* Messenger Apps */
  .orbit__pill--3 { --drift-x:  10px; --drift-y: -15px; }  /* Mail services  */
  .orbit__pill--4 { --drift-x:  10px; --drift-y:  15px; }  /* Individual     */
  .orbit__pill--5 { --drift-x:   1px; --drift-y:  10px; }  /* Group chats    */
  .orbit__node--1 { --drift-x: -10px; --drift-y: -15px; }  /* globe          */
  .orbit__node--2 { --drift-x:  10px; --drift-y:  -2px; }  /* Gmail          */
  .orbit__node--3 { --drift-x: -10px; --drift-y:  15px; }  /* Outlook        */
  .orbit__node--4 { --drift-x:  10px; --drift-y:   8px; }  /* WhatsApp       */
  .orbit__node--5 { --drift-x:  10px; --drift-y:  15px; }  /* Telegram       */
}

/* Not a duration of nearly zero — that leaves an infinite alternate animation
   parked on whichever keyframe it reached. Nothing runs at all. */
@media (prefers-reduced-motion: reduce) {
  .orbit__pill,
  .orbit__node,
  .orbit__arc { animation: none; }
}

/* ---------- features — Figma 107:1978 ---------- */

.features {
  position: relative;
  max-width: var(--shell);
  margin: 100px auto 0;
  padding: 0 var(--gutter);
}

.features__grid {
  display: grid;
  grid-template-columns: 1fr 590px;
  gap: 40px;
  align-items: center;
}

.features__heading { display: flex; flex-direction: column; gap: 10px; }
.features__title {
  font: var(--h2);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink);
}
.features__title em { font-style: normal; color: var(--gray-purple); }
.features__app {
  width: 444px;
  max-width: 100%;
  margin-top: 30px;
  border-radius: 30px;
  box-shadow: -20px -15px 13.5px -16px rgba(55, 55, 55, .14);
}

/* the scattered capability chips; several sit at 50% opacity in the design */
.chip-cloud { position: relative; min-height: 480px; }
.chip-lg {
  position: absolute;
  padding: 5px;
  border-radius: 35px;
  background: var(--white);
  box-shadow: var(--inner-purple);
  transition: opacity .18s ease;
  /* a button now; without this a tap flashes a grey box over the chip */
  -webkit-tap-highlight-color: transparent;
}
.chip-lg__label {
  display: block;
  padding: 20px;
  border-radius: 30px;
  background: var(--bg);
  box-shadow: var(--inner-chip);
  font-family: var(--font);
  font-weight: 400;
  font-size: 25px;
  line-height: 1;
  color: var(--fg);
  white-space: nowrap;
}
.chip-lg--dim { opacity: .5; }
.chip-lg--1 { left: 0;     top: 56px;  --bg: var(--accent-pink);     --fg: var(--ink-pink); }
.chip-lg--2 { left: 152px; top: 141px; --bg: var(--accent-lgreen);   --fg: var(--accent-green); }
.chip-lg--3 { left: 10px;  top: 251px; --bg: var(--accent-blue);     --fg: var(--ink-blue); }
.chip-lg--4 { left: 223px; top: 336px; --bg: var(--accent-lavender); --fg: var(--purple); }
.chip-lg--5 { left: 37px;  top: 421px; --bg: var(--accent-lemon);    --fg: var(--ink-lemon); }
.chip-lg--6 { left: 345px; top: 213px; --bg: var(--accent-peach);    --fg: var(--ink-peach); }

/* the white callouts that overlap the chips — Figma 278:14011.

   One per chip, hidden until its chip is hovered. Each sits 91px right of and
   10px below the chip it belongs to, which is the offset the design uses; the
   coordinates are written out per chip the same way the chips' own are, so the
   two lists read side by side. */
.chip-tip {
  position: absolute;
  width: 273px;
  padding: 20px;
  border-radius: var(--r-plan);
  background: var(--white);
  filter: drop-shadow(-4px 4px 4px rgba(43, 43, 43, .14));
  font: var(--t-med);
  letter-spacing: 0;
  color: var(--ink-text);
  /* Faded, not hidden: the copy stays in the accessibility tree, so a screen
     reader still reaches text that a mouse-only reveal would otherwise lose.
     pointer-events keeps it from covering the chips it overlaps — including
     the one that triggered it, which would otherwise flicker. */
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  /* The design offset, given up for the cloud's right edge when the column is
     too narrow to hold it — the grid drops to two equal columns at 1380px, so
     the rightmost callouts do run out of room on the way down. */
  left: min(var(--tip-x), 100% - 273px);
}
.chip-tip span { display: block; }

.chip-tip--1 { --tip-x:  91px; top: 141px; }
.chip-tip--2 { --tip-x: 243px; top: 226px; }
.chip-tip--3 { --tip-x: 101px; top: 336px; }
.chip-tip--4 { --tip-x: 314px; top: 421px; }
/* Chip 5 is the bottom row, so its callout goes above the chip rather than
   below: translateY(-100%) lifts it by its own height, which is the only way
   to place a box whose wrap depth changes with the language. */
.chip-tip--5 { --tip-x: 128px; top: 411px; transform: translateY(calc(-100% - 6px)); }
.chip-tip--6 { --tip-x: 436px; top: 298px; }

/* Hover is the reveal everywhere but the phone layout, which a tap drives
   instead (chips.js, and the 720px step below) — there a hovered chip would
   show its callout on top of the one already on show. */
@media (min-width: 721px) {
  .chip-lg:hover { opacity: 1; }
  .chip-lg--1:hover ~ .chip-tip--1,
  .chip-lg--2:hover ~ .chip-tip--2,
  .chip-lg--3:hover ~ .chip-tip--3,
  .chip-lg--4:hover ~ .chip-tip--4,
  .chip-lg--6:hover ~ .chip-tip--6 { opacity: 1; transform: none; }
  .chip-lg--5:hover ~ .chip-tip--5 { opacity: 1; transform: translateY(-100%); }
}

.features__foot { margin-top: 50px; text-align: center; }

/* ---------- results — Figma 85:1666 ---------- */

.results {
  width: calc(100% - var(--gutter) * 2);
  max-width: var(--content);
  margin: 90px auto 0;
  padding: 88px 120px 98px;
  background: var(--light-gray);
  border-radius: 40px;
}
.results__grid {
  display: grid;
  /* Figma 85:1666 lays this out as promo 382, a 30px gutter, then two 384
     cards 10px apart. The promo column carries the extra 20px as a margin so
     a single gap value covers both. */
  grid-template-columns: minmax(0, 402fr) minmax(0, 384fr) minmax(0, 384fr);
  gap: 10px;
}

.results__promo {
  /* the promo is as tall as both card rows — without this the cards wrap
     underneath it and row 1 stretches to the promo's height */
  grid-row: span 2;
  margin-right: 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  padding: 20px;
  overflow: hidden;
  background: var(--ink);
  border-radius: var(--r-plan);
  box-shadow: var(--shd-card);
}
.results__promo-title {
  font: var(--h2);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--gray-purple);
}
.results__promo-title em { font-style: normal; color: var(--white); }
/* Figma 85:1668 sets the screenshot to 282 of the card's 342 content width,
   inset 26 from its left edge — as fractions so it holds at any card size */
.results__promo-media {
  position: relative;
  width: 82.5%;
  margin: 10px 0 0 7.6%;
}
.results__promo-media img { width: 100%; border-radius: 8px; }
.results__promo-media::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 90px;
  background: linear-gradient(rgba(30, 30, 30, 0), var(--ink));
}
.results__badge {
  /* the design hangs this off the card's right edge and lets the card clip
     it; anchoring from the right keeps that overhang at any card width */
  position: absolute;
  right: -22px;
  top: 156px;
  z-index: 1;
  white-space: nowrap;
  padding: 15px 40px 15px 20px;
  border-radius: 40px;
  background: var(--gray-purple);
  box-shadow: var(--inner-chip);
  font: var(--h3);
  letter-spacing: 0;
  color: var(--white);
}
.results__promo .cta-btn { justify-content: space-between; width: 100%; }

.stat-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  min-height: 219px;
  padding: 15px 20px;
  background: var(--white);
  border-radius: var(--r-plan);
}
.stat-card--hl { box-shadow: var(--shd-card); }
.stat-card--hl .stat-card__value,
.stat-card--hl .stat-card__name { color: var(--purple); }
.stat-card__name { font: var(--h3); letter-spacing: 0; color: var(--ink); }
.stat-card__desc { margin-top: 10px; font: var(--t-med); letter-spacing: 0; color: var(--gray-purple); }
.stat-card__value { font: var(--h-num); letter-spacing: var(--ls-num); color: var(--ink); }

/* ---------- how it works — Figma 85:1777 ---------- */

.how { max-width: var(--shell); margin: 90px auto 0; padding: 0 var(--gutter); text-align: center; }
.how__heading { display: flex; flex-direction: column; gap: 10px; max-width: 590px; margin: 0 auto; }
.how__title { font: var(--h2); letter-spacing: 0; text-transform: uppercase; color: var(--ink); }
.how__steps {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 40px;
}
.step {
  display: flex;
  flex-direction: column;
  gap: 23px;
  width: 230px;
  padding: 20px;
  background: var(--white);
  border-radius: var(--r-plan);
  box-shadow: inset 0 4px 50px rgba(108, 108, 108, .09);
  text-align: left;
}
.step__num {
  font: var(--t-bold);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--gray-purple);
  opacity: .5;
}
.step__name { font: var(--h4); letter-spacing: 0; color: var(--ink-text); }
.step__desc { margin-top: 10px; font: var(--t-med); letter-spacing: 0; color: var(--gray-purple); }

/* ---------- closing pricing teaser — Figma 85:1707 ---------- */

.teaser {
  position: relative;
  width: calc(100% - var(--gutter) * 2);
  max-width: var(--content);
  margin: 90px auto 60px;
  padding: 60px 200px;
  overflow: hidden;
  background: var(--white);
  border-radius: 40px;
  box-shadow: var(--inner-purple);
  text-align: center;
}
.teaser__inner { display: flex; flex-direction: column; align-items: center; gap: 40px; }
.teaser__heading { display: flex; flex-direction: column; gap: 10px; max-width: 564px; }
.teaser__title { font: var(--h2); letter-spacing: 0; text-transform: uppercase; color: var(--ink); }
.teaser__lead { max-width: 408px; font: var(--t1); letter-spacing: 0; color: var(--ink); }

.teaser__plans { position: relative; display: flex; gap: 10px; }
.plan-card {
  position: relative;          /* anchors the "most popular" flag */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  width: 350px;
  min-height: 333px;
  padding: 30px;
  background: var(--white);
  border: 1px solid var(--gray-purple);
  border-radius: var(--r-plan);
  text-align: left;
}
.plan-card--dark { background: var(--ink); border-color: transparent; color: var(--white); }
.plan-card__name { font: var(--h2); letter-spacing: 0; color: var(--gray-purple); }
.plan-card--dark .plan-card__name { color: var(--white); }
.plan-card__list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 40px;
  font: var(--t-body);
  letter-spacing: var(--ls-body);
  color: var(--ink);
}
.plan-card--dark .plan-card__list { color: var(--white); }
.plan-card__list .muted { opacity: .5; }
.plan-card__price {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  font: var(--h-num);
  letter-spacing: var(--ls-num);
  color: var(--ink);
  white-space: nowrap;
}
.plan-card--dark .plan-card__price { color: var(--white); }
.plan-card__per { font: var(--h3); letter-spacing: 0; }

/* rotated green flag over the highlighted plan */
.teaser__flag {
  position: absolute;
  right: -34px;
  top: -26px;
  rotate: 8.07deg;
  padding: 15px 20px;
  font-size: 18px;
  font-weight: 400;
}

.teaser__foot { display: flex; flex-direction: column; align-items: center; gap: 30px; }

/* underlined text link used across the page */
.text-link {
  display: inline-flex;
  padding: 3px 0;
  border-bottom: 1px solid var(--ink);
  font: var(--t-body);
  letter-spacing: var(--ls-body);
  color: var(--ink-text);
}
.text-link:hover { color: var(--purple); border-color: var(--purple); text-decoration: none; }

/* ---------- responsive ----------
   No mobile homepage exists in Figma, so below 1180px the two absolutely
   placed compositions (the orbit and the chip cloud) become plain flow. */

@media (max-width: 1380px) {
  .results { padding: 60px; }
  .teaser { padding: 60px 40px; }
  .features__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1080px) {
  .results__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .results__promo { grid-column: 1 / -1; grid-row: auto; margin-right: 0; }
  .results__promo-media { max-width: 420px; margin-inline: auto; }
}

@media (max-width: 1180px) {
  .orbit { padding-bottom: 0; }
  .orbit__arc, .orbit::after { display: none; }
  .orbit__inner { padding-top: 0; }
  .orbit__pill, .orbit__node { position: static; }
  .orbit__scatter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 40px;
  }
  .chip-cloud { min-height: 0; display: flex; flex-wrap: wrap; gap: 12px; }
  .chip-lg { position: static; }
  .chip-lg--dim { opacity: 1; }
  .chip-lg__label { font-size: 18px; padding: 14px 18px; }
  /* The callouts belong to the desktop composition and the phone one, where
     a tap shows them; in the wrapped row between the two they are simply not
     part of the page. */
  .chip-tip { display: none; }
  .features__grid { grid-template-columns: 1fr; }
  .how__steps { flex-wrap: wrap; }
  .teaser__plans { flex-wrap: wrap; justify-content: center; }
  .teaser__flag { right: 0; top: -20px; }
}

@media (max-width: 720px) {
  .hero { padding: 32px 16px 0; border-radius: 24px; }
  .hero__title { font-size: 34px; }
  /* the mobile design leads with the single primary action */
  .hero__actions { flex-direction: column; flex-wrap: nowrap; width: 100%; }
  .hero__actions .cta-btn--light { display: none; }
  .hero__actions .cta-btn { justify-content: space-between; width: 100%; }
  /* 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. */
  .orbit__title, .features__title, .how__title, .teaser__title,
  .results__promo-title { font-size: 20px; line-height: 1.3; }

  /* ---- omnichannel orbit, phone — Figma 278:18648 ----
     The mobile design reorders the section: copy first and left aligned, then
     the scatter as a composition of its own, then the link centred underneath.
     Making the inner block `display: contents` lets its children join the
     section's own column, so the link can follow the scatter without the
     markup — and so the desktop reading order — changing. */
  .orbit {
    display: flex;
    flex-direction: column;
    margin-top: 60px;
    text-align: left;
  }
  .orbit__inner { display: contents; }
  .orbit > .eyebrow { order: 1; }
  .orbit__title   { order: 2; margin-top: 14px; }
  .orbit__lead    { order: 3; margin-top: 24px; font-size: 15px; }
  .orbit__sub     { order: 4; max-width: none; margin: 20px 0 0; }
  .orbit__scatter { order: 5; }
  .orbit__link    { order: 6; align-self: center; margin-top: 32px; }

  /* The pieces are placed again rather than left to wrap: columns in per cent
     so the arrangement holds its shape as the viewport narrows, rows in pixels
     so nothing closes up vertically at 320px. */
  .orbit__scatter {
    position: relative;
    display: block;
    height: 306px;
    margin: 32px 0 0;
  }
  .orbit__pill, .orbit__node { position: absolute; }
  .orbit__scatter .pill { padding: 8px 13px; font-size: 13px; }
  .orbit__scatter .pill__long  { display: none; }
  .orbit__scatter .pill__short { display: inline; }
  .orbit__scatter .node { padding: 4px; }
  .orbit__scatter .node img { width: 42px; height: 42px; }
  .orbit__node--1 .node { padding: 6px; }             /* the globe leads, so it is larger */
  .orbit__node--1 .node img { width: 54px; height: 54px; }

  .orbit__pill--3 { left: auto; right: 16.4%; top: 0; }    /* Mail services  */
  .orbit__node--1 { left: 6.4%;             top: 4px; }    /* globe          */
  .orbit__node--2 { left: auto; right: 6.2%; top: 42px; }  /* Gmail          */
  .orbit__pill--5 { left: 44%;              top: 98px; }   /* Group chats    */
  .orbit__pill--1 { left: 0;                top: 99px; }   /* Your website   */
  .orbit__node--4 { left: auto; right: 6.2%; top: 148px; } /* WhatsApp       */
  .orbit__pill--4 { left: 24%;              top: 152px; }  /* Individual     */
  .orbit__node--3 { left: 4.4%;             top: 208px; }  /* Outlook        */
  .orbit__pill--2 { left: auto; right: 3.6%; top: 210px; } /* Messenger Apps */
  .orbit__node--5 { left: 50.9%;            top: 252px; }  /* Telegram       */

  /* ---- capability chips, phone — Figma 278:18648 ----
     The design keeps the scattered cloud and the callout that overlaps it, so
     the composition is placed again rather than reflowed into a list, and the
     copy leads. Same idea as the orbit above: per cent columns, pixel rows. */
  .features__grid { gap: 28px; }
  .features__heading { order: 1; }
  .chip-cloud { order: 2; }
  .features__app { display: none; }      /* the mobile design drops the screenshot */

  .chip-cloud { position: relative; display: block; min-height: 0; height: 213px; }
  .chip-lg { position: absolute; padding: 4px; }
  .chip-lg--dim { opacity: .5; }
  .chip-lg__label { padding: 8px 13px; font-size: 13px; }
  .chip-lg--1 { left: 0;    top: 0; }
  .chip-lg--2 { left: 41%;  top: 17px; }
  .chip-lg--3 { left: 0;    top: 65px; }
  .chip-lg--4 { left: 6.5%; top: 121px; }
  /* this one only ever peeks out from under the callout, so it is measured
     from the right edge and cannot spill however long the label gets */
  .chip-lg--6 { left: auto; right: 4.4%; top: 121px; }
  .chip-lg--5 { left: 41%;  top: 171px; }
  /* The phone design leads with chip 2's callout, shown outright. A tap on
     any chip (chips.js) puts that chip's callout on show instead, and makes it
     the bright chip in chip 2's place.

     Every callout keeps the design's box: anchored to one side and grown
     inwards, so chip 2's holds its three lines on a narrow phone. Each is
     placed so it never covers its own chip — the top row's hang below it as
     the design's does; the lower chips' stand above them, lifted by their own
     height, which changes with the language — and it only ever overlaps
     chips that are dimmed while it shows. */
  .chip-tip {
    display: block;
    left: auto;
    right: 0;
    top: 58px;
    width: 68%;
    min-width: 240px;
    padding: 14px;
    font-size: 12px;
    transform: translateY(-6px);
  }
  .chip-tip--3 { left: 0; right: auto; top: 106px; }
  .chip-tip--4 { left: 0; right: auto; }
  .chip-tip--4,
  .chip-tip--6 { top: 117px; transform: translateY(calc(-100% - 6px)); }
  .chip-tip--5 { top: 167px; transform: translateY(calc(-100% - 6px)); }

  .chip-cloud:not(.has-active) .chip-tip--2,
  .chip-lg--1.is-active ~ .chip-tip--1,
  .chip-lg--2.is-active ~ .chip-tip--2,
  .chip-lg--3.is-active ~ .chip-tip--3 { opacity: 1; transform: none; }
  .chip-lg--4.is-active ~ .chip-tip--4,
  .chip-lg--5.is-active ~ .chip-tip--5,
  .chip-lg--6.is-active ~ .chip-tip--6 { opacity: 1; transform: translateY(-100%); }

  .chip-cloud.has-active .chip-lg { opacity: .5; }
  .chip-cloud.has-active .chip-lg.is-active { opacity: 1; }
  .features__foot { margin-top: 40px; }

  .results { padding: 28px 20px; border-radius: 24px; }
  .results__grid { grid-template-columns: minmax(0, 1fr); }
  .stat-card__value { font-size: 48px; }
  .step { width: 100%; }

  /* The mobile design left-aligns the in-page section headings — only the
     page hero and the closing links stay centred. */
  .how, .teaser { text-align: left; }
  .how__heading { max-width: none; margin: 0; }
  .teaser__inner { align-items: stretch; }
  .teaser__heading, .teaser__lead { max-width: none; }
  .teaser__foot { align-items: stretch; }
  .teaser__foot .cta-btn { justify-content: space-between; }
  .teaser__foot .text-link { align-self: center; }
  .teaser { padding: 40px 20px; border-radius: 24px; }
  .plan-card { width: 100%; }
  /* the design keeps the flag over the Business card's top-right corner on a
     phone too, just tucked in tighter so it clears the section padding */
  .teaser__flag { right: -9px; top: 6px; padding: 11px 16px; font-size: 16px; }
}

/* The narrowest phones, and the longest of the three translations, run the
   pills into each other; the composition steps down a size rather than
   reflowing, which would lose the design's arrangement. */
@media (max-width: 359px) {
  .orbit__scatter .pill { padding: 7px 11px; font-size: 12px; }
  .orbit__node--1 .node img { width: 46px; height: 46px; }
}