/* ==========================================================================
   InstantTranslator marketing site

   The Figma source is a single 1728px-wide desktop artboard. Type and spacing
   are therefore expressed as `clamp(min, N * var(--vw), N px)` so the layout is
   pixel-exact at 1728px and scales proportionally below it.

   Dense illustration clusters are rebuilt as `.stage` elements: a container
   query gives them `--u` ("one design pixel"), so every child can keep its
   original Figma offset and still scale with its column.
   ========================================================================== */

:root {
  --vw: calc(100vw / 1728);

  --ink: #1d1f24;
  --ink-soft: #2f3137;
  --muted: #868b9a;
  --blue: #3aa8ff;
  --blue-ink: #0792ff;
  --blue-pale: #f1f9fe;
  --brand-from: #00c4d1;
  --brand-to: #3aa8ff;
  --stat-label: #9bd3ff;

  --gutter: clamp(20px, calc(208 * var(--vw)), 208px);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Helvetica Neue", Inter, "Segoe UI", sans-serif;
  --font-rounded: ui-rounded, "SF Pro Rounded", var(--font);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor targets must clear the sticky header. */
  scroll-padding-top: clamp(70px, calc(90 * var(--vw)), 90px);
}

body {
  background: #fff;
  color: var(--ink);
  font-family: var(--font);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

/* Contains the CTA glow, which intentionally bleeds past both page edges. */
main {
  overflow: clip;
}

img {
  display: block;
  max-width: 100%;
}

ul {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

button {
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* ── Shared primitives ─────────────────────────────────────────────────── */

.shell {
  width: 100%;
  max-width: 1728px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.stage {
  position: relative;
  container-type: inline-size;
}

.stage > * {
  position: absolute;
}

.h2 {
  font-size: clamp(30px, calc(70 * var(--vw)), 70px);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.01em;
}

.lede {
  color: var(--muted);
  font-size: clamp(17px, calc(40 * var(--vw)), 40px);
  font-weight: 500;
  line-height: 1.3;
}

.heading {
  position: relative;
}

.heading--center {
  text-align: center;
}

.heading .lede {
  margin-top: clamp(10px, calc(19 * var(--vw)), 19px);
}

/* Three-piece "shine" mark that sits beside most section headings. */
.sparkle {
  position: absolute;
  top: calc(-22 * var(--vw));
  width: calc(43 * var(--vw));
  height: calc(44 * var(--vw));
  pointer-events: none;
}

.sparkle img {
  position: absolute;
}

.sparkle img:nth-child(1) {
  left: calc(4.5 * var(--vw));
  top: calc(7.5 * var(--vw));
  width: calc(26 * var(--vw));
}

.sparkle img:nth-child(2) {
  left: calc(39 * var(--vw));
  top: 0;
  width: calc(3 * var(--vw));
}

.sparkle img:nth-child(3) {
  left: 0;
  top: calc(41 * var(--vw));
  width: calc(19.5 * var(--vw));
}

.sparkle--flip {
  transform: scaleX(-1);
}

.sparkle--smarter {
  left: 16.31%;
}

.sparkle--features {
  left: 82.16%;
  top: calc(-31 * var(--vw));
}

.sparkle--audience {
  left: 0;
}

.sparkle--voices {
  left: 93.37%;
}

.sparkle--cta {
  left: 5.03%;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.btn--dark {
  height: clamp(38px, calc(50 * var(--vw)), 50px);
  padding-inline: clamp(16px, calc(22 * var(--vw)), 22px);
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: clamp(14px, calc(20 * var(--vw)), 20px);
  font-weight: 600;
}

.btn--pill {
  width: clamp(240px, calc(391 * var(--vw)), 391px);
  height: clamp(60px, calc(90 * var(--vw)), 90px);
  border-radius: 999px;
  background: #000;
  color: #fff;
  font-size: clamp(20px, calc(40 * var(--vw)), 40px);
  font-weight: 500;
}

/* Reused iPhone bezel that overlays every screenshot. The crop percentages
   come straight from Figma and are container-relative, so one rule fits all. */
.phone-frame {
  overflow: hidden;
  pointer-events: none;
}

.phone-frame img {
  position: absolute;
  left: -40.26%;
  top: -7.17%;
  width: 181.39%;
  height: 112.33%;
  max-width: none;
}

/* ── Brand lockup ──────────────────────────────────────────────────────── */

.brand {
  display: inline-flex;
  align-items: center;
  gap: max(10px, calc(16 * var(--vw)));
}

.brand__mark {
  --mark: clamp(30px, calc(40 * var(--vw)), 40px);
  flex: none;
  width: var(--mark);
  height: var(--mark);
  border-radius: calc(var(--mark) * 0.25);
  overflow: hidden;
}

.brand__mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand__name {
  font-size: clamp(20px, calc(32 * var(--vw)), 32px);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.brand--light {
  color: #fff;
}

/* ── Header ────────────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: clamp(14px, calc(20 * var(--vw)), 20px);
}

/* ── Hero ──────────────────────────────────────────────────────────────── */

.hero {
  padding-block: clamp(40px, calc(100 * var(--vw)), 100px) clamp(40px, calc(61 * var(--vw)), 61px);
}

.hero__inner {
  display: grid;
  grid-template-columns: 700fr 573fr;
  gap: calc(39 / 1312 * 100%);
  align-items: start;
}

.hero__copy {
  padding-top: calc(40 * var(--vw));
}

.hero__title {
  font-size: clamp(40px, calc(96 * var(--vw)), 96px);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.02em;
}

.hero__lede {
  max-width: calc(645 * var(--vw));
  margin-top: clamp(14px, calc(30 * var(--vw)), 30px);
  color: var(--muted);
  font-size: clamp(16px, calc(36 * var(--vw)), 36px);
  font-weight: 500;
  line-height: 1.3;
}

.hero__store {
  position: relative;
  display: block;
  width: calc(286.341 / 1312 * 100%);
  min-width: 150px;
  margin-top: clamp(20px, calc(30 * var(--vw)), 30px);
  aspect-ratio: 286.341 / 89.271;
}

.hero__store-crop {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero__store-crop img {
  position: absolute;
  left: -8.82%;
  top: -153.77%;
  width: 117.65%;
  height: 283.02%;
  max-width: none;
}

/* The source badge sheet carries a watermark across the top of the artwork. */
.hero__store-patch {
  position: absolute;
  left: 6.47%;
  top: 0;
  width: 88.82%;
  height: 11.32%;
  background: #211f1f;
}

.hero__art {
  position: relative;
}

.hero__sparkle {
  position: absolute;
  right: calc(593 / 573 * 100%);
  top: calc(-11 / 750 * 100%);
  display: block;
  width: calc(182.5 * var(--vw));
  max-width: none;
  height: auto;
  overflow: visible;
}

.hero__sparkle path {
  stroke: #3aa8ff;
  stroke-width: 5;
  stroke-linecap: round;
}

/* ── Hero illustration (Figma frame x947..1520, y308..1058) ────────────── */

.hero-visual {
  --u: calc(100cqw / 573);
  aspect-ratio: 573 / 750;
}

.hero-visual > * {
  position: absolute;
}

.hv-phone-b,
.hv-phone-b-tint {
  left: calc(279.41 * var(--u));
  top: calc(37.93 * var(--u));
  width: calc(266.589 * var(--u));
  height: calc(577.254 * var(--u));
  border-radius: calc(31.005 * var(--u));
}

.hv-phone-b {
  overflow: hidden;
}

.hv-phone-b img {
  position: absolute;
  left: -23.2%;
  top: -1.42%;
  width: 146.39%;
  height: 123.31%;
  max-width: none;
}

.hv-phone-b-tint {
  background: rgba(0, 0, 0, 0.22);
}

.hv-frame-b {
  left: calc(250 * var(--u));
  top: 0;
  width: calc(322.959 * var(--u));
  height: calc(655.537 * var(--u));
}

.hv-frame-a {
  left: 0;
  top: calc(74 * var(--u));
  width: calc(333.061 * var(--u));
  height: calc(676.048 * var(--u));
}

.hv-phone-a {
  left: calc(30.33 * var(--u));
  top: calc(113.12 * var(--u));
  width: calc(274.953 * var(--u));
  height: calc(595.263 * var(--u));
  border-radius: calc(31.975 * var(--u));
  overflow: hidden;
}

.hv-phone-a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hv-photo {
  left: calc(16.35 * var(--u));
  top: calc(386 * var(--u));
  width: calc(311 * var(--u));
  height: calc(322 * var(--u));
  max-width: none;
  object-fit: cover;
}

/* Frosted language selector on the right hand phone. */
.hv-langbar {
  left: calc(293.43 * var(--u));
  top: calc(103.9 * var(--u));
  width: calc(235.993 * var(--u));
  height: calc(37.759 * var(--u));
  border-radius: calc(16.182 * var(--u));
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(calc(4 * var(--u)));
  font-size: calc(13.743 * var(--u));
  font-weight: 500;
  line-height: 1;
}

.hv-langbar--ghost {
  background: rgba(255, 255, 255, 0.33);
  font-size: calc(12.137 * var(--u));
}

.hv-langbar span {
  position: absolute;
}

.hv-langbar .hv-langbar__from {
  left: calc(32.98 * var(--u));
  top: calc(12.36 * var(--u));
}

.hv-langbar .hv-langbar__to {
  left: calc(156.67 * var(--u));
  top: calc(10.17 * var(--u));
}

.hv-langbar--ghost .hv-langbar__from {
  left: calc(21.33 * var(--u));
  top: calc(8.49 * var(--u));
}

.hv-langbar--ghost .hv-langbar__to {
  left: calc(145.91 * var(--u));
  top: calc(8.49 * var(--u));
}

.hv-langbar__chev {
  position: absolute;
  top: calc(8.49 * var(--u));
  width: calc(13.073 * var(--u));
}

.hv-langbar__chev--a {
  left: calc(71.9 * var(--u));
}

.hv-langbar__chev--b {
  left: calc(209.97 * var(--u));
}

.hv-swap {
  left: calc(403.02 * var(--u));
  top: calc(114.89 * var(--u));
  width: calc(15.825 * var(--u));
  height: calc(15.825 * var(--u));
  transform: scaleX(-1);
}

.hv-swap--ghost {
  top: calc(115.01 * var(--u));
}

.hv-swap img {
  position: absolute;
  inset: 0;
  width: 100%;
}

/* Frosted "detected word" chips floating over the photo. */
.hv-word {
  border-radius: calc(16.491 * var(--u));
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(calc(8 * var(--u)));
}

.hv-word b,
.hv-word i {
  position: absolute;
  font-style: normal;
  line-height: calc(26.421 * var(--u));
  white-space: nowrap;
}

.hv-word b {
  color: var(--blue-ink);
  font-size: calc(24.737 * var(--u));
  font-weight: 700;
}

.hv-word i {
  color: #000;
  font-size: calc(19.24 * var(--u));
  font-weight: 500;
}

.hv-word--tomato {
  left: calc(292.33 * var(--u));
  top: calc(314.16 * var(--u));
  width: calc(110.768 * var(--u));
  height: calc(86.58 * var(--u));
}

.hv-word--tomato b {
  left: calc(13.47 * var(--u));
  top: calc(14.02 * var(--u));
}

.hv-word--tomato i {
  left: calc(26.11 * var(--u));
  top: calc(43.98 * var(--u));
}

.hv-word--shrimp {
  left: calc(430.86 * var(--u));
  top: calc(203.94 * var(--u));
  width: calc(110.768 * var(--u));
  height: calc(73.112 * var(--u));
}

.hv-word--shrimp b {
  left: calc(13.46 * var(--u));
  top: calc(9.9 * var(--u));
}

.hv-word--shrimp i {
  left: calc(18.96 * var(--u));
  top: calc(39.86 * var(--u));
}

.hv-word--corn {
  left: calc(403.1 * var(--u));
  top: calc(478.53 * var(--u));
  width: calc(125.061 * var(--u));
  height: calc(72.013 * var(--u));
}

.hv-word--corn b {
  left: calc(34.9 * var(--u));
  top: calc(7.42 * var(--u));
}

.hv-word--corn i {
  left: calc(42.87 * var(--u));
  top: calc(37.38 * var(--u));
}

/* Translation cards over the left hand phone. The panel is drawn in CSS rather
   than from the exported `矩形 4` vector: that export pads the artwork with the
   blur bleed of its drop shadow, so stretching it over the card box shrank the
   white panel out from under its own text. */
.hv-card {
  background: #fff;
  border-radius: calc(17.2497 * var(--u));
  box-shadow: 0 calc(2.1007 * var(--u)) calc(21.74 * var(--u)) rgb(58 168 255 / 0.3);
}

/* The design sets every row on one line; the absolute spans have no width of
   their own, so wrapping is only ever an accident of font metrics. */
.hv-card b,
.hv-card i {
  position: absolute;
  font-style: normal;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.hv-card b {
  color: var(--ink);
}

.hv-card i {
  color: var(--blue);
}

.hv-card__rule,
.hv-card__speak {
  position: absolute;
  max-width: none;
}

.hv-card--hello {
  left: calc(45.35 * var(--u));
  top: calc(188.2 * var(--u));
  width: calc(124.444 * var(--u));
  height: calc(83.045 * var(--u));
  font-size: calc(14.705 * var(--u));
}

.hv-card--hello b {
  left: calc(14.78 * var(--u));
  top: calc(11.92 * var(--u));
}

.hv-card--hello i {
  left: calc(14.78 * var(--u));
  top: calc(54.26 * var(--u));
}

.hv-card--hello .hv-card__rule {
  left: calc(14.78 * var(--u));
  top: calc(41.69 * var(--u));
  width: calc(92.902 * var(--u));
}

/* The speaker exports carry the same shadow bleed as the panel did: the 30.8
   unit button sits at (12.288, 10.32) inside a 55.38 unit canvas, so the frame
   is sized and pulled back by that padding to land the button on its mark. */
.hv-card--hello .hv-card__speak {
  left: calc(64.592 * var(--u));
  top: calc(37.04 * var(--u));
  width: calc(55.3801 * var(--u));
}

.hv-card--name {
  left: calc(107.35 * var(--u));
  top: calc(279.6 * var(--u));
  width: calc(186.789 * var(--u));
  height: calc(91.177 * var(--u));
  font-size: calc(13.553 * var(--u));
}

.hv-card--name b {
  left: calc(17 * var(--u));
  top: calc(12.03 * var(--u));
}

.hv-card--name i {
  left: calc(17 * var(--u));
  top: calc(54.66 * var(--u));
}

.hv-card--name .hv-card__rule {
  left: calc(17 * var(--u));
  top: calc(41.8 * var(--u));
  width: calc(154.754 * var(--u));
}

.hv-card--name .hv-card__speak {
  left: calc(128.172 * var(--u));
  top: calc(36.9 * var(--u));
  width: calc(56.0875 * var(--u));
}

/* Chat bubbles with avatars. */
.hv-chip {
  display: flex;
  align-items: center;
  background: #bfeaff;
  color: #1a9aff;
  font-family: var(--font-rounded);
  font-weight: 700;
}

.hv-chip--hola {
  left: calc(267.18 * var(--u));
  top: calc(376 * var(--u));
  width: calc(69.203 * var(--u));
  height: calc(30.789 * var(--u));
  padding-left: calc(20.33 * var(--u));
  border-radius: 0 calc(17.26 * var(--u)) calc(17.26 * var(--u)) 0;
  font-size: calc(15.035 * var(--u));
}

.hv-chip--hello {
  left: calc(26.35 * var(--u));
  top: calc(391 * var(--u));
  width: calc(63.477 * var(--u));
  height: calc(28.241 * var(--u));
  padding-left: calc(7.41 * var(--u));
  border-radius: calc(15.832 * var(--u)) 0 0 calc(15.832 * var(--u));
  font-size: calc(13.791 * var(--u));
}

.hv-avatar {
  overflow: hidden;
  border: calc(0.85 * var(--u)) solid #fff;
  border-radius: 50%;
}

.hv-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hv-avatar--hola {
  left: calc(252.35 * var(--u));
  top: calc(376 * var(--u));
  width: calc(30.788 * var(--u));
  height: calc(30.789 * var(--u));
}

.hv-avatar--hello {
  left: calc(75.57 * var(--u));
  top: calc(391 * var(--u));
  width: calc(28.241 * var(--u));
  height: calc(28.241 * var(--u));
}

/* ── Stats ─────────────────────────────────────────────────────────────── */

.stats {
  background: var(--blue);
}

.stats__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(10px, calc(28 * var(--vw)), 28px);
  min-height: clamp(120px, calc(200 * var(--vw)), 200px);
}

.stat {
  display: flex;
  align-items: center;
  gap: clamp(8px, calc(34 * var(--vw)), 34px);
}

.stat b {
  color: #fff;
  font-size: clamp(22px, calc(50 * var(--vw)), 50px);
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}

.stat span {
  max-width: 6.6em;
  color: var(--stat-label);
  font-size: clamp(11px, calc(20 * var(--vw)), 20px);
  font-weight: 600;
  line-height: 1.2;
}

.stats__sep {
  flex: none;
  width: 1px;
  height: clamp(30px, calc(53 * var(--vw)), 53px);
  background: rgba(255, 255, 255, 0.4);
}

/* ── Translate smarter with AI ─────────────────────────────────────────── */

.smarter {
  padding-block: clamp(50px, calc(120 * var(--vw)), 120px) clamp(60px, calc(316 * var(--vw)), 316px);
}

.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, calc(46 * var(--vw)), 46px);
  margin-top: clamp(40px, calc(134 * var(--vw)), 134px);
}

.pillar__art {
  position: relative;
  display: block;
  width: calc(239 * var(--vw));
  max-width: 100%;
  margin-inline: auto;
  aspect-ratio: 1;
  overflow: hidden;
}

.pillar__art img {
  position: absolute;
  top: -22.15%;
  width: 437.06%;
  height: 156.75%;
  max-width: none;
}

.pillar__art--1 img {
  left: -27.7%;
}

.pillar__art--2 img {
  left: -161.56%;
}

.pillar__art--3 img {
  left: -297.2%;
}

.pillar h3 {
  margin-top: clamp(16px, calc(33 * var(--vw)), 33px);
  font-size: clamp(20px, calc(40 * var(--vw)), 40px);
  font-weight: 700;
  line-height: 1.2;
}

.pillar p {
  margin-top: clamp(8px, calc(19 * var(--vw)), 19px);
  color: var(--muted);
  font-size: clamp(15px, calc(30 * var(--vw)), 30px);
  font-weight: 500;
  line-height: 1.2;
}

/* ── Translate anything, anywhere ──────────────────────────────────────── */

.anywhere {
  padding-bottom: clamp(60px, calc(265 * var(--vw)), 265px);
}

.anywhere__inner {
  display: grid;
  grid-template-columns: 600fr 647fr;
  gap: calc(65 / 1312 * 100%);
  align-items: center;
}

.anywhere__copy .lede {
  margin-top: clamp(12px, calc(35 * var(--vw)), 35px);
}

/* Globe cluster (Figma frame x209..809, y2418..2880). */
.globe {
  --u: calc(100cqw / 600);
  aspect-ratio: 600 / 462;
}

/* The exported bitmap carries wide transparent margins, so the Figma fill
   crops into it rather than fitting the frame. */
.globe__earth {
  left: calc(116.44 * var(--u));
  top: calc(90.48 * var(--u));
  width: calc(356.83 * var(--u));
  height: calc(356.83 * var(--u));
  overflow: hidden;
}

.globe__earth img {
  position: absolute;
  left: -53.16%;
  top: -16.4%;
  width: 203.16%;
  height: 135.44%;
  max-width: none;
}

.globe__arc {
  max-width: none;
}

.globe__arc--a {
  left: calc(279.88 * var(--u));
  top: calc(66.47 * var(--u));
  width: calc(106.706 * var(--u));
}

.globe__arc--b {
  left: calc(157.76 * var(--u));
  top: calc(132.74 * var(--u));
  width: calc(37.758 * var(--u));
}

.globe__arc--c {
  left: calc(90.15 * var(--u));
  top: calc(232.94 * var(--u));
  width: calc(63.854 * var(--u));
}

.globe__arc--d {
  left: calc(55.4 * var(--u));
  top: calc(296.13 * var(--u));
  width: calc(149.305 * var(--u));
}

.globe__arc--e {
  left: calc(149 * var(--u));
  top: calc(374 * var(--u));
  width: calc(217 * var(--u));
}

.globe__arc--f {
  left: calc(364.34 * var(--u));
  top: calc(368.43 * var(--u));
  width: calc(63.854 * var(--u));
}

.globe__arc--g {
  left: calc(353.35 * var(--u));
  top: calc(146.13 * var(--u));
  width: calc(157.477 * var(--u));
}

.globe__arc--h {
  left: calc(462 * var(--u));
  top: calc(289.55 * var(--u));
  width: calc(43.195 * var(--u));
}

.globe__face {
  width: calc(96 * var(--u));
  height: calc(96 * var(--u));
  max-width: none;
}

.globe__face--1 {
  left: calc(73 * var(--u));
  top: calc(55 * var(--u));
}

.globe__face--2 {
  left: calc(385 * var(--u));
  top: calc(32 * var(--u));
}

.globe__face--3 {
  left: calc(482 * var(--u));
  top: calc(194 * var(--u));
  transform: scaleX(-1);
}

.globe__face--4 {
  left: calc(426 * var(--u));
  top: calc(359 * var(--u));
}

.globe__face--5 {
  left: calc(62 * var(--u));
  top: calc(359 * var(--u));
}

.globe__face--6 {
  left: 0;
  top: calc(199 * var(--u));
}

.globe__dot {
  width: calc(18.781 * var(--u));
  max-width: none;
}

.globe__dot--1 {
  left: calc(187.81 * var(--u));
  top: calc(191.89 * var(--u));
}

.globe__dot--2 {
  left: calc(354.95 * var(--u));
  top: calc(355.28 * var(--u));
}

.globe__dot--3 {
  left: calc(191.56 * var(--u));
  top: calc(328.99 * var(--u));
}

.globe__dot--4 {
  left: calc(337.61 * var(--u));
  top: calc(187.17 * var(--u));
}

.globe__dot--5 {
  left: calc(148.37 * var(--u));
  top: calc(248.24 * var(--u));
}

.globe__dot--6 {
  left: calc(396.27 * var(--u));
  top: calc(250.11 * var(--u));
}

.globe__pill {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(44 * var(--u));
  border-radius: calc(23 * var(--u));
  font-size: calc(20 * var(--u));
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.globe__pill--hello {
  left: calc(133 * var(--u));
  top: calc(21 * var(--u));
  width: calc(85 * var(--u));
  background: #e4ecff;
  color: #0f50b5;
}

.globe__pill--hola {
  left: calc(23 * var(--u));
  top: calc(154 * var(--u));
  width: calc(85 * var(--u));
  background: #efdffe;
  color: #693ac2;
}

.globe__pill--ciao {
  left: calc(520 * var(--u));
  top: calc(150 * var(--u));
  width: calc(80 * var(--u));
  background: #dbffeb;
  color: #17c877;
}

.globe__pill--bonjour {
  left: calc(479 * var(--u));
  top: calc(318 * var(--u));
  width: calc(107 * var(--u));
  background: #ffe1e9;
  color: #d2516b;
}

.globe__pill--ola {
  left: calc(150 * var(--u));
  top: calc(411 * var(--u));
  width: calc(78 * var(--u));
  background: #ffebd7;
  color: #af7b32;
}

.globe__pill--konnichiwa {
  left: calc(462 * var(--u));
  top: 0;
  width: calc(136 * var(--u));
  background: #fee8df;
  color: #cb3226;
}

/* ── Feature grid ──────────────────────────────────────────────────────── */

.features {
  padding-bottom: clamp(70px, calc(331 * var(--vw)), 331px);
}

.feature-row {
  display: grid;
  grid-template-columns: repeat(2, 563fr);
  gap: calc(186 / 1312 * 100%);
  margin-top: clamp(48px, calc(173 * var(--vw)), 173px);
}

.features__dots {
  display: flex;
  padding-left: calc(229 / 1312 * 100%);
  gap: calc(119 * var(--vw));
  margin-top: clamp(40px, calc(222 * var(--vw)), 222px);
}

.features__dots img {
  width: calc(8 * var(--vw));
  min-width: 5px;
}

.features__dots + .feature-row {
  margin-top: clamp(24px, calc(59 * var(--vw)), 59px);
}

.tile {
  --tile: clamp(56px, calc(90 * var(--vw)), 90px);
  position: relative;
  display: grid;
  place-items: center;
  width: var(--tile);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 30%;
  background: linear-gradient(149deg, #a9d2fb 0%, #4f9cf2 100%);
}

/* Glossy highlight clipped by the tile's rounded corners. */
.tile::before {
  content: "";
  position: absolute;
  left: -5%;
  top: -12%;
  width: 110%;
  height: 40%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0));
}

.tile__aa {
  position: relative;
  color: #fff;
  font-family: Inter, var(--font);
  font-size: calc(var(--tile) * 0.48);
  font-style: normal;
  font-weight: 700;
  line-height: 1;
}

.tile__glyph {
  position: absolute;
  max-width: none;
}

.tile__glyph--voice {
  left: 50%;
  top: 24.1%;
  width: 67.1%;
  transform: translateX(-50%);
}

.tile__glyph--camera {
  left: 50%;
  top: 26.4%;
  width: 65%;
  transform: translateX(-50%);
}

.tile__glyph--offline {
  left: 50%;
  top: 21.9%;
  width: 57.1%;
  transform: translateX(-50%);
}

.tile__glyph--live {
  left: 50%;
  top: 21.9%;
  width: 60%;
  transform: translateX(-50%);
}

.tile__glyph--talk-a {
  left: 14%;
  top: 22%;
  width: 46%;
}

.tile__glyph--talk-b {
  left: 40%;
  top: 46%;
  width: 46%;
}

.feature h3 {
  margin-top: clamp(10px, calc(15 * var(--vw)), 15px);
  font-size: clamp(20px, calc(40 * var(--vw)), 40px);
  font-weight: 700;
  line-height: 1.2;
}

.feature p {
  max-width: calc(548 / 563 * 100%);
  margin-top: clamp(8px, calc(17 * var(--vw)), 17px);
  color: var(--muted);
  font-size: clamp(14px, calc(20 * var(--vw)), 20px);
  font-weight: 500;
  line-height: 1.2;
}

.feature .stage {
  margin-top: clamp(24px, calc(44 * var(--vw)), 44px);
}

/* Cards shared by the feature illustrations. */
.card {
  position: absolute;
  border-radius: calc(26 * var(--u));
  background: #fff;
  box-shadow: 0 0 calc(15 * var(--u)) 0 #96d1ff;
}

.card__well {
  position: absolute;
  border-radius: calc(26 * var(--u));
  background: var(--blue-pale);
}

.card__label {
  position: absolute;
  color: var(--ink-soft);
  font-size: calc(17 * var(--u));
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

/* Feature 1 — text translation (Figma x208..771, y3777..4321). */
.art-text {
  --u: calc(100cqw / 563);
  aspect-ratio: 563 / 544;
}

.art-text__screen {
  left: calc(141.14 * var(--u));
  top: calc(28.32 * var(--u));
  width: calc(225.153 * var(--u));
  height: calc(487.255 * var(--u));
  border-radius: calc(28.7 * var(--u));
  overflow: hidden;
}

.art-text__screen img,
.art-voice__screen img,
.art-offline__screen img,
.art-talk__screen img,
.art-live__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.art-text__frame,
.art-voice__frame,
.art-offline__frame,
.art-live__frame {
  top: 0;
  width: calc(268 * var(--u));
  height: calc(544 * var(--u));
}

.art-text__frame {
  left: calc(118 * var(--u));
}

.art-text__photo {
  left: calc(334 * var(--u));
  top: calc(279 * var(--u));
  width: calc(229 * var(--u));
  height: calc(262 * var(--u));
  border-radius: calc(26 * var(--u));
  overflow: hidden;
}

.art-text__photo img {
  position: absolute;
  left: -77.65%;
  top: -6.93%;
  width: 181.44%;
  height: 158.59%;
  max-width: none;
}

.art-text__pill {
  left: 0;
  top: calc(195 * var(--u));
  display: flex;
  align-items: center;
  width: calc(228 * var(--u));
  height: calc(70 * var(--u));
  padding-left: calc(27 * var(--u));
  border-radius: calc(35.5 * var(--u));
  background: var(--blue);
  box-shadow: inset 3px 9px calc(16.8 * var(--u)) 0 #92cfff;
  color: #fff;
  font-size: calc(24 * var(--u));
  font-weight: 500;
}

/* Feature 2 — voice & speech (Figma x957..1520, y3777..4321). */
.art-voice {
  --u: calc(100cqw / 563);
  aspect-ratio: 563 / 544;
}

.art-voice__screen {
  left: calc(163.14 * var(--u));
  top: calc(28.32 * var(--u));
  width: calc(225.153 * var(--u));
  height: calc(487.255 * var(--u));
  border-radius: calc(28.7 * var(--u));
  overflow: hidden;
}

.art-voice__frame {
  left: calc(140 * var(--u));
}

.card--speed {
  left: 0;
  top: calc(118 * var(--u));
  width: calc(212 * var(--u));
  height: calc(141 * var(--u));
}

.card--speed .card__label {
  left: calc(20 * var(--u));
  top: calc(32 * var(--u));
}

.card--speed .card__well {
  left: calc(16 * var(--u));
  top: calc(57 * var(--u));
  width: calc(180 * var(--u));
  height: calc(68 * var(--u));
}

.card__wave {
  position: absolute;
  left: calc(29 * var(--u));
  top: calc(80 * var(--u));
  width: calc(158 * var(--u));
  max-width: none;
}

.card--voice {
  left: calc(369 * var(--u));
  top: calc(237 * var(--u));
  width: calc(194 * var(--u));
  height: calc(304 * var(--u));
}

.card--voice .card__label {
  left: calc(25 * var(--u));
  top: calc(14 * var(--u));
}

.card--voice .card__well {
  left: calc(16 * var(--u));
  top: calc(57 * var(--u));
  width: calc(162 * var(--u));
  height: calc(231 * var(--u));
}

.vrow {
  position: absolute;
  left: calc(32 * var(--u));
  width: calc(130 * var(--u));
  height: calc(50 * var(--u));
  border-radius: calc(26 * var(--u));
  background: #fff;
}

.vrow--1 {
  top: calc(73 * var(--u));
}

.vrow--2 {
  top: calc(139 * var(--u));
}

.vrow--3 {
  top: calc(205 * var(--u));
}

.vrow__ring {
  position: absolute;
  left: calc(10 * var(--u));
  top: calc(5 * var(--u));
  width: calc(40 * var(--u));
  max-width: none;
}

.vrow__ring--sm {
  left: calc(11.74 * var(--u));
  top: calc(6.74 * var(--u));
  width: calc(36.515 * var(--u));
}

.vrow__emoji {
  position: absolute;
  left: calc(30 * var(--u));
  top: calc(50%);
  font-family: Inter, var(--font);
  font-size: calc(24 * var(--u));
  font-style: normal;
  line-height: 1;
  transform: translate(-50%, -50%);
}

.vrow__emoji--sm {
  font-size: calc(20 * var(--u));
}

.vrow__flag {
  position: absolute;
  left: calc(20.87 * var(--u));
  top: calc(16.78 * var(--u));
  width: calc(18.257 * var(--u));
  max-width: none;
  border-radius: 50%;
}

.vrow__bar {
  position: absolute;
  left: calc(53 * var(--u));
  top: calc(17.75 * var(--u));
  width: calc(52 * var(--u));
  height: calc(15 * var(--u));
  border-radius: calc(26 * var(--u));
  background: #dceaf2;
}

.vrow__bar--sm {
  top: calc(18.75 * var(--u));
  height: calc(13 * var(--u));
}

.card__handle {
  position: absolute;
  left: calc(84 * var(--u));
  top: calc(269 * var(--u));
  width: calc(26 * var(--u));
  max-width: none;
}

/* Feature 3 — image & camera (Figma x208..771, y4864..5437). */
.art-camera {
  --u: calc(100cqw / 563);
  aspect-ratio: 563 / 573;
}

.art-camera__scene {
  left: 0;
  top: 0;
  width: calc(563 * var(--u));
  height: calc(573 * var(--u));
  max-width: none;
  object-fit: cover;
}

.art-camera__frame {
  left: calc(155 * var(--u));
  top: calc(15 * var(--u));
  width: calc(268 * var(--u));
  height: calc(544 * var(--u));
}

.art-camera__scrim {
  left: calc(178 * var(--u));
  top: calc(44 * var(--u));
  width: calc(226 * var(--u));
  height: calc(482 * var(--u));
  max-width: none;
}

.art-camera__reticle {
  left: calc(233 * var(--u));
  top: calc(229 * var(--u));
  width: calc(127 * var(--u));
  height: calc(172 * var(--u));
  border: 1px solid #fff;
}

.card--menu {
  left: calc(351 * var(--u));
  top: calc(287 * var(--u));
  width: calc(212 * var(--u));
  height: calc(216 * var(--u));
}

.card--menu .card__label {
  left: calc(20 * var(--u));
  top: calc(24 * var(--u));
}

.card--menu .card__label--to {
  left: calc(126 * var(--u));
}

.card__swap {
  position: absolute;
  left: calc(94 * var(--u));
  top: calc(20 * var(--u));
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
  transform: scaleX(-1);
}

.card__swap img {
  position: absolute;
  inset: 0;
  width: 100%;
}

.card--menu .card__well {
  left: calc(16 * var(--u));
  top: calc(68 * var(--u));
  width: calc(180 * var(--u));
  height: calc(132 * var(--u));
}

.card__menu-text {
  position: absolute;
  left: calc(32 * var(--u));
  top: calc(82 * var(--u));
  color: var(--blue);
  font-size: calc(20 * var(--u));
  font-weight: 700;
  line-height: 1.2;
}

/* Feature 4 — offline (Figma x957..1520, y4879..5437). */
.art-offline {
  --u: calc(100cqw / 563);
  aspect-ratio: 563 / 558;
}

.art-offline__screen {
  left: calc(163.14 * var(--u));
  top: calc(28.32 * var(--u));
  width: calc(225.153 * var(--u));
  height: calc(487.255 * var(--u));
  border-radius: calc(28.7 * var(--u));
  overflow: hidden;
}

.art-offline__frame {
  left: calc(140 * var(--u));
}

.art-offline__photo {
  left: calc(330 * var(--u));
  top: calc(219 * var(--u));
  width: calc(233 * var(--u));
  height: calc(339 * var(--u));
  border-radius: calc(28 * var(--u));
  overflow: hidden;
}

.art-offline__photo img {
  position: absolute;
  left: -26.18%;
  top: -12.83%;
  width: 126.18%;
  height: 130.09%;
  max-width: none;
}

.art-offline__plane {
  left: 0;
  top: calc(244.69 * var(--u));
  width: calc(318 * var(--u));
  height: calc(162.469 * var(--u));
  max-width: none;
  object-fit: cover;
  transform: scaleX(-1);
}

.card--offline {
  left: 0;
  top: calc(93 * var(--u));
  width: calc(187 * var(--u));
  height: calc(72 * var(--u));
}

.card__icon {
  position: absolute;
  left: calc(23 * var(--u));
  top: calc(16 * var(--u));
  width: calc(40 * var(--u));
  max-width: none;
}

.card__title {
  position: absolute;
  left: calc(76.08 * var(--u));
  top: calc(18 * var(--u));
  color: var(--ink);
  font-size: calc(30 * var(--u));
  font-weight: 500;
  line-height: 1.2;
}

/* Feature 5 — conversation (Figma x186..771, y6004..6562). */
.art-talk {
  --u: calc(100cqw / 585);
  width: calc(585 / 563 * 100%);
  margin-left: calc(-22 / 563 * 100%);
  aspect-ratio: 585 / 558;
}

.art-talk__screen {
  left: calc(340.14 * var(--u));
  top: calc(28.32 * var(--u));
  width: calc(225.153 * var(--u));
  height: calc(487.255 * var(--u));
  border-radius: calc(28.7 * var(--u));
  overflow: hidden;
}

.art-talk__frame {
  left: calc(317 * var(--u));
  top: 0;
  width: calc(268 * var(--u));
  height: calc(544 * var(--u));
}

.art-talk__photo {
  left: 0;
  top: calc(128 * var(--u));
  width: calc(430 * var(--u));
  height: calc(430 * var(--u));
  max-width: none;
  object-fit: cover;
}

/* Feature 6 — real-time (Figma x980..1520, y6004..6548). */
.art-live {
  --u: calc(100cqw / 540);
  width: calc(540 / 563 * 100%);
  margin-left: calc(23 / 563 * 100%);
  aspect-ratio: 540 / 544;
}

.art-live__screen {
  left: calc(23.14 * var(--u));
  top: calc(28.32 * var(--u));
  width: calc(225.153 * var(--u));
  height: calc(487.255 * var(--u));
  border-radius: calc(28.7 * var(--u));
  overflow: hidden;
}

.art-live__frame {
  left: 0;
}

.art-live__photo {
  left: calc(294 * var(--u));
  top: calc(213 * var(--u));
  width: calc(244 * var(--u));
  height: calc(329 * var(--u));
  border-radius: calc(26 * var(--u));
  overflow: hidden;
}

.art-live__photo img {
  position: absolute;
  left: -13.78%;
  top: -11.85%;
  width: 127.87%;
  height: 142.25%;
  max-width: none;
}

.art-live__badge {
  left: calc(365 * var(--u));
  top: calc(17 * var(--u));
  width: calc(138 * var(--u));
  height: calc(138 * var(--u));
  max-width: none;
  object-fit: cover;
  transform: scaleX(-1);
}

/* ── Audiences ─────────────────────────────────────────────────────────── */

.audience {
  padding-bottom: clamp(70px, calc(411 * var(--vw)), 411px);
}

.audience__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.audience__head .heading {
  padding-left: calc(60 / 1312 * 100%);
}

.audience__head .h2 {
  white-space: nowrap;
}

.audience__nav {
  display: flex;
  flex: none;
  align-items: center;
  gap: calc(30 * var(--vw));
}

.audience__arrow {
  display: grid;
  place-items: center;
  width: calc(56.5 * var(--vw));
  min-width: 34px;
  transition: opacity 0.2s ease;
}

.audience__arrow:hover {
  opacity: 0.55;
}

.audience__arrow[data-scroll="next"] img {
  transform: scaleX(-1);
}

/* Only the inline axis scrolls: the cards' reveal offset hangs below the track
   until they settle, and a plain `overflow-x` would turn that into a vertical
   scroll of its own. */
.audience__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max(220px, calc(320 * var(--vw)));
  gap: max(16px, calc(40 * var(--vw)));
  margin-top: clamp(40px, calc(108 * var(--vw)), 108px);
  padding-inline: var(--gutter);
  overflow: auto hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: var(--gutter);
  scrollbar-width: none;
}

.audience__rail::-webkit-scrollbar {
  display: none;
}

.use-case {
  position: relative;
  aspect-ratio: 320 / 508;
  overflow: hidden;
  border-radius: max(28px, calc(70 * var(--vw)));
  scroll-snap-align: start;
}

.use-case img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.use-case::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 46.85%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.84), rgba(0, 0, 0, 0));
}

/* --title is the artboard width of the title box; it is hand-set per card in
   Figma, so wrapping only matches the design when each card carries its own. */
.use-case h3 {
  position: absolute;
  left: 50%;
  top: 7.9%;
  width: calc(var(--title, 252) / 320 * 100%);
  transform: translateX(-50%);
  z-index: 1;
  color: #fff;
  font-size: max(15px, calc(24 * var(--vw)));
  font-weight: 700;
  line-height: 1.2;
}

.use-case--center h3 {
  text-align: center;
}

/* ── Testimonials ──────────────────────────────────────────────────────── */

.voices {
  padding-bottom: clamp(80px, calc(660 * var(--vw)), 660px);
}

/* The padding only sets where the first card starts; clipping happens at the
   viewport edge, so cards still bleed off both sides once the track moves. */
.voices__marquee {
  margin-top: clamp(40px, calc(100 * var(--vw)), 100px);
  padding-left: var(--gutter);
  overflow: hidden;
}

.voices__track {
  display: flex;
  width: max-content;
  animation: voices-drift 60s linear infinite;
}

.voices__marquee:hover .voices__track,
.voices__marquee:focus-within .voices__track {
  animation-play-state: paused;
}

/* The card carries the gap so that half the track is exactly one full set of
   cards, which is what the -50% keyframe below relies on. */
.voices__track > .voice {
  flex: none;
  width: max(240px, calc(347 * var(--vw)));
  margin-right: max(24px, calc(136 * var(--vw)));
}

@keyframes voices-drift {
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .voices__marquee {
    overflow-x: auto;
  }

  .voices__track {
    animation: none;
  }
}

.voice__quote {
  width: calc(50 * var(--vw));
  min-width: 32px;
}

.voice__text {
  margin-top: clamp(16px, calc(35 * var(--vw)), 35px);
  font-size: clamp(15px, calc(26 * var(--vw)), 26px);
  font-weight: 500;
  line-height: 1.2;
}

.voice {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "quote quote"
    "text text"
    "avatar meta";
  align-items: center;
}

.voice__quote {
  grid-area: quote;
}

.voice__text {
  grid-area: text;
}

.voice__avatar {
  grid-area: avatar;
  width: calc(60 * var(--vw));
  min-width: 38px;
  margin-top: clamp(20px, calc(40 * var(--vw)), 40px);
}

.voice__meta {
  grid-area: meta;
  margin-top: clamp(20px, calc(40 * var(--vw)), 40px);
  padding-left: calc(10 * var(--vw));
}

.voice__name {
  display: block;
  font-size: clamp(14px, calc(22 * var(--vw)), 22px);
  font-weight: 600;
  line-height: 1.2;
}

.voice__stars {
  width: calc(154.778 * var(--vw));
  min-width: 90px;
  margin-top: clamp(4px, calc(13 * var(--vw)), 13px);
}

/* ── Closing call to action ────────────────────────────────────────────── */

.cta {
  position: relative;
  padding-bottom: clamp(60px, calc(215 * var(--vw)), 215px);
}

/* Blurred gradient blob; it bleeds past both page edges and is covered at the
   bottom by the footer, exactly as in the artboard. */
.cta__glow {
  position: absolute;
  left: calc(-589.3 * var(--vw));
  top: calc(-311.9 * var(--vw));
  z-index: -1;
  width: calc(3084.4 * var(--vw));
  max-width: none;
  pointer-events: none;
}

.cta__inner {
  position: relative;
}

.cta .btn--pill {
  display: flex;
  margin: clamp(36px, calc(134 * var(--vw)), 134px) auto 0;
}

/* ── Footer ────────────────────────────────────────────────────────────── */

.site-footer {
  background: #000;
  color: #fff;
}

.site-footer__inner {
  display: grid;
  grid-template-columns: calc(591 / 1312 * 100%) calc(296 / 1312 * 100%) 1fr;
  align-items: center;
  min-height: clamp(200px, calc(270 * var(--vw)), 270px);
  padding-block: clamp(36px, calc(62 * var(--vw)), 62px);
}

.site-footer__tagline {
  margin-top: clamp(10px, calc(21 * var(--vw)), 21px);
  font-size: clamp(13px, calc(20 * var(--vw)), 20px);
  font-weight: 500;
  line-height: 1.4;
}

.site-footer__links,
.site-footer__meta {
  display: grid;
  justify-items: start;
  gap: clamp(10px, calc(31 * var(--vw)), 31px);
  font-size: clamp(13px, calc(20 * var(--vw)), 20px);
  font-weight: 500;
}

.site-footer__links a:hover {
  color: var(--stat-label);
}

.site-footer__mail {
  display: flex;
  align-items: center;
  gap: clamp(8px, calc(10 * var(--vw)), 10px);
  min-width: 0;
  line-height: 1.4;
}

.site-footer__mail-icon {
  flex: none;
  width: 1em;
  height: 1em;
}

.site-footer__mail span {
  overflow-wrap: anywhere;
}

.site-footer__copy {
  line-height: 1.4;
}

/* ── Motion ────────────────────────────────────────────────────────────── */

/* The page opens by easing forward: the first screen starts slightly small and
   washed out, then resolves. Only the hero is animated, since it is all that is
   on screen at this point.

   The scale stays below 1 throughout. Scaling past it would push the hero
   illustration over `main`'s clip, which crops the phones and the food labels
   out of the layout the artboard specifies.

   `intro` is set in the document head so the state is in place before the first
   paint, and dropped again on the next frame to start the transition. */
.reveals .hero {
  transition:
    opacity 1.2s ease-out,
    scale 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.intro .hero {
  opacity: 0.35;
  scale: 0.96;
}

/* `data-reveal` marks what animates in. app.js adds `is-in` the first time an
   element reaches the viewport, and the whole system hangs off `reveals`, so
   the page still renders in full whenever the script does not run.

   The individual `translate`, `rotate` and `scale` properties are used instead
   of `transform`, because many of these elements already carry an artboard
   `transform` offset that has to survive the reveal. */
.reveals [data-reveal] {
  opacity: 0;
  transition:
    opacity 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) var(--reveal-delay, 0ms),
    translate 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) var(--reveal-delay, 0ms),
    rotate 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) var(--reveal-delay, 0ms),
    scale 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) var(--reveal-delay, 0ms);
}

/* Copy, cards and list items rise into place. */
.reveals [data-reveal="up"] {
  translate: 0 clamp(24px, calc(56 * var(--vw)), 56px);
}

/* Floating labels, avatars and map markers scale up from their own centre. */
.reveals [data-reveal="pop"] {
  scale: 0.8;
}

/* The device cluster tilts up into place. The offset is kept short for the same
   reason the intro never scales past 1: further right and the phones would be
   travelling through `main`'s clip rather than the layout. */
.reveals [data-reveal="settle"] {
  translate: calc(40 * var(--vw)) calc(56 * var(--vw));
  rotate: -4deg;
  transition-duration: 1.2s;
}

/* Hand-drawn flourishes are painted on stroke by stroke rather than fading in
   as a block, so the mark reads as a brush travelling across the artwork. The
   element itself is therefore shown outright and the drawing carries the
   reveal. `pathLength="1"` in the markup makes one dash rule cover every path. */
.reveals [data-reveal="draw"] {
  transition-duration: 0s;
}

.reveals [data-reveal="draw"] path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.45s ease-in-out
    calc(var(--reveal-delay, 0ms) + var(--draw-delay, 0ms));
}

/* The long squiggle is the brush stroke; the short marks flick in after it. */
.reveals [data-reveal="draw"] path:first-child {
  transition-duration: 0.9s;
}

.reveals [data-reveal="draw"] path:nth-child(2) {
  --draw-delay: 900ms;
}

.reveals [data-reveal="draw"] path:nth-child(3) {
  --draw-delay: 1030ms;
}

.reveals [data-reveal="draw"] path:nth-child(4) {
  --draw-delay: 1160ms;
}

.reveals [data-reveal="draw"].is-in path {
  stroke-dashoffset: 0;
}

.reveals [data-reveal].is-in {
  opacity: 1;
  translate: none;
  rotate: none;
  scale: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveals [data-reveal],
  .intro .hero {
    opacity: 1;
    translate: none;
    rotate: none;
    scale: none;
    transition: none;
  }

  .reveals [data-reveal="draw"] path {
    stroke-dashoffset: 0;
    transition: none;
  }
}

/* ── Narrow viewports ──────────────────────────────────────────────────── */

@media (max-width: 900px) {
  :root {
    --gutter: 20px;

    /* The artboard's vertical rhythm is far too airy once every row has
       collapsed into one column, so all sections share one narrow-screen
       spacing step instead of their individually scaled-down paddings. */
    --section-y: clamp(48px, 12vw, 72px);
  }

  .hero__inner,
  .anywhere__inner,
  .feature-row,
  .site-footer__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .hero {
    padding-block: 24px var(--section-y);
  }

  .smarter {
    padding-block: var(--section-y);
  }

  .anywhere,
  .features,
  .audience,
  .voices,
  .cta {
    padding-bottom: var(--section-y);
  }

  .feature-row,
  .features__dots + .feature-row {
    margin-top: var(--section-y);
  }

  .audience__rail,
  .voices__marquee {
    margin-top: 28px;
  }

  .cta .btn--pill {
    margin-top: 32px;
  }

  .hero__copy {
    padding-top: 0;
  }

  /* The hero mockups carry the section's real content, so they trade the
     gutter for legibility and run edge to edge. The feature illustrations
     cannot: they park cards flush against their own left and right bounds,
     which a full-bleed stage would clip. */
  .hero__art {
    width: calc(100% + var(--gutter) * 2);
    margin-inline: calc(var(--gutter) * -1);
  }

  .art-talk,
  .art-live {
    width: 100%;
    margin-left: 0;
  }

  .hero__title,
  .h2 {
    font-size: clamp(30px, 7.4vw, 60px);
  }

  .hero__lede,
  .lede {
    max-width: none;
    font-size: clamp(16px, 3.6vw, 28px);
  }

  .hero__sparkle,
  .sparkle,
  .features__dots {
    display: none;
  }

  .anywhere__copy {
    order: -1;
  }

  .pillars {
    gap: 32px 24px;
    margin-top: 40px;
  }

  .audience__head .heading {
    padding-left: 0;
  }

  /* The title holds its single line at every phone width, so it is sized
     against the shell rather than the shared heading ramp: 12.75 is the width
     of the string in ems, and the trim keeps it off the right gutter. */
  .audience__head .h2 {
    font-size: min(clamp(30px, 7.4vw, 60px), calc(7.5vw - 3px));
  }

  /* The rail is swiped rather than stepped through on touch. */
  .audience__nav {
    display: none;
  }

  .voice {
    grid-template-columns: auto 1fr;
  }

  .site-footer__inner {
    gap: 28px;
    min-height: 0;
    align-items: start;
  }

  /* Everything tappable clears the 44px touch minimum. */
  .btn--dark {
    flex: none;
    height: 44px;
  }

  .site-footer__links,
  .site-footer__meta {
    gap: 0;
  }

  .site-footer__links a,
  .site-footer__mail {
    box-sizing: border-box;
    min-height: 44px;
    padding-block: 12px;
  }
}

/* ── Phones ────────────────────────────────────────────────────────────── */

/* Rows that still read as rows on a small tablet have to be rebuilt outright
   at phone width, where a single column of full-width blocks leaves most of
   the screen empty. */
@media (max-width: 600px) {
  /* The header CTA cannot wrap or shrink, so the brand beside it is sized to
     leave room for it rather than being pushed off screen. Below that, the
     name gives way before the button does. */
  .site-header__inner {
    gap: 10px;
  }

  .brand {
    min-width: 0;
  }

  .site-header .brand__name {
    overflow: hidden;
    font-size: 17px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .site-header .btn--dark {
    padding-inline: 14px;
  }

  /* One tall column of square illustrations wastes most of a phone screen, so
     each pillar collapses into a compact icon-beside-text card instead. */
  .pillars {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin-top: 32px;
  }

  .pillar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 14px;
    padding: 14px;
    border-radius: 18px;
    background: var(--blue-pale);
  }

  .pillar__art {
    grid-row: span 2;
    width: 64px;
    margin-inline: 0;
    border-radius: 14px;
  }

  .pillar h3 {
    align-self: end;
    margin-top: 0;
    font-size: 17px;
  }

  .pillar p {
    align-self: start;
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.35;
  }

  /* Number beside label leaves the label two or three cramped lines wide, so
     the four stats become a 2x2 grid with the label stacked underneath. */
  .stats__inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 16px;
    min-height: 0;
    padding-block: 28px;
  }

  .stats__sep {
    display: none;
  }

  .stat {
    display: block;
  }

  .stat b {
    font-size: 26px;
  }

  .stat span {
    display: block;
    max-width: none;
    margin-top: 4px;
    font-size: 13px;
  }
}