/* ==========================================================================
   Gatherlee — public marketing site
   Bilingual EN/AR (instant toggle + RTL). Motion is layered on top of a
   fully readable static page: every animated element is visible by default
   and only hidden once landing.js confirms motion is allowed.
   ========================================================================== */

/* ----- Fonts (self-hosted; no external requests) ------------------------- */
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('../fonts/plex-arabic-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('../fonts/plex-arabic-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('../fonts/plex-arabic-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* The 15-language proof only lands if every script actually renders — a tofu
   box would say the opposite. Each face below is subset to just the characters
   this page shows (28KB for all seven), and they are appended to the default
   stacks as fallbacks, so the browser reaches for them per-glyph. */
@font-face { font-family: 'GL Deva'; src: url('../fonts/noto-devanagari.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'GL Mymr'; src: url('../fonts/noto-myanmar.woff2')    format('woff2'); font-display: swap; }
@font-face { font-family: 'GL Ethi'; src: url('../fonts/noto-ethiopic.woff2')   format('woff2'); font-display: swap; }
@font-face { font-family: 'GL Sinh'; src: url('../fonts/noto-sinhala.woff2')    format('woff2'); font-display: swap; }
@font-face { font-family: 'GL Mlym'; src: url('../fonts/noto-malayalam.woff2')  format('woff2'); font-display: swap; }
@font-face { font-family: 'GL Taml'; src: url('../fonts/noto-tamil.woff2')      format('woff2'); font-display: swap; }
@font-face { font-family: 'GL Beng'; src: url('../fonts/noto-bengali.woff2')    format('woff2'); font-display: swap; }

/* ----- Tokens ------------------------------------------------------------ */
:root {
  --green:        #17B26A;
  --green-dark:   #0E9455;
  --green-soft:   #D7F5E6;
  --green-tint:   #EEFBF4;
  --coral:        #F0654A;
  --coral-soft:   #FDE4DE;
  --bg:           #F6F6F3;
  --card:         #FFFFFF;
  --ink:          #1F2430;
  --ink-2:        #4B5361;
  --muted:        #7A8494;
  --line:         #E6E7E2;

  --r-sm: 12px;
  --r:    20px;
  --r-lg: 28px;
  --r-xl: 36px;

  --shadow-sm: 0 2px 8px rgba(31, 36, 48, .05);
  --shadow:    0 12px 32px -8px rgba(31, 36, 48, .12);
  --shadow-lg: 0 32px 80px -16px rgba(31, 36, 48, .22);

  --pad: clamp(20px, 5vw, 48px);
  --maxw: 1180px;

  /* Script fallbacks trail every stack: the browser picks them per glyph, so
     Devanagari/Tamil/Bengali/etc. resolve without tagging each span. */
  --scripts: 'GL Deva', 'GL Mymr', 'GL Ethi', 'GL Sinh', 'GL Mlym', 'GL Taml', 'GL Beng';
  --font-latin: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, var(--scripts), sans-serif;
  --font-ar: 'IBM Plex Sans Arabic', 'Manrope', -apple-system, var(--scripts), sans-serif;
  --font: var(--font-latin);

  --ease: cubic-bezier(.22, 1, .36, 1);
}

html[lang='ar'] { --font: var(--font-ar); }

/* ----- Base -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* JS pins sections; a fixed header needs the offset for anchor jumps */
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Latin numerals + brand name keep the Latin face even inside Arabic copy */
html[lang='ar'] .latin { font-family: var(--font-latin); }

/* width/height attributes are set on every image to reserve layout space, so
   height must fall back to auto or the intrinsic ratio is ignored. */
img { max-width: 100%; height: auto; display: block; }
video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3 {
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 800;
}
html[lang='ar'] h1,
html[lang='ar'] h2,
html[lang='ar'] h3 { letter-spacing: 0; line-height: 1.35; }

/* Sized for the two-sentence hero headline; a display size tuned for a short
   headline turns this one into three oversized lines. */
h1 { font-size: clamp(2.05rem, 4.4vw, 3.5rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.5rem); font-weight: 700; }
p  { margin: 0; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.section { padding-block: clamp(80px, 12vh, 150px); position: relative; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--green-dark);
  background: var(--green-soft);
  padding: 7px 14px;
  border-radius: 999px;
  margin-bottom: 22px;
}
html[lang='ar'] .eyebrow { letter-spacing: 0; text-transform: none; }

.lede {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  color: var(--ink-2);
  max-width: 60ch;
  margin-top: 20px;
}

.section-head { max-width: 760px; margin-bottom: clamp(48px, 7vw, 80px); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .lede { margin-inline: auto; }

/* ----- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease),
              background-color .2s var(--ease), border-color .2s var(--ease);
  white-space: nowrap;
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--green-dark); outline-offset: 3px; }

.btn-primary {
  background: var(--green);
  color: #fff;
  box-shadow: 0 8px 24px -6px rgba(23, 178, 106, .55);
}
.btn-primary:hover { background: var(--green-dark); box-shadow: 0 14px 32px -6px rgba(23, 178, 106, .6); }

.btn-ghost { background: var(--card); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { border-color: var(--green); color: var(--green-dark); }

.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #000; }

.btn-lg { padding: 18px 36px; font-size: 1.06rem; }
.btn-sm { padding: 10px 18px; font-size: .9rem; }

.btn .ico { width: 20px; height: 20px; flex: none; }
/* Arrow glyphs are directional: mirror them, not the whole button */
[dir='rtl'] .btn .arrow { transform: scaleX(-1); }

.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.section-head.center .cta-row { justify-content: center; }

/* ----- Header ------------------------------------------------------------ */
.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease),
              backdrop-filter .3s var(--ease);
}
.nav.stuck {
  background: rgba(246, 246, 243, .85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 var(--line);
}
.nav-in {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 18px var(--pad);
  display: flex;
  align-items: center;
  gap: 12px;
}
.nav-logo { display: flex; align-items: center; }
.nav-logo img { height: 30px; width: auto; }
.nav-links { display: flex; gap: 4px; margin-inline-start: 28px; }
.nav-links a {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink-2);
  transition: background-color .2s, color .2s;
}
.nav-links a:hover { background: var(--card); color: var(--ink); }
.nav-spacer { flex: 1; }
.nav-actions { display: flex; align-items: center; gap: 10px; }

/* Language toggle — doubles as a live demo of the product promise */
.lang-toggle {
  display: inline-flex;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 3px;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.lang-toggle button {
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  font-size: .88rem;
  padding: 7px 15px;
  border-radius: 999px;
  cursor: pointer;
  color: var(--muted);
  position: relative;
  z-index: 1;
  transition: color .25s var(--ease);
}
.lang-toggle button[aria-pressed='true'] { color: #fff; }
.lang-toggle .thumb {
  position: absolute;
  inset-block: 3px;
  /* Physical `left`, not inset-inline-start: JS drives this with offsetLeft,
     which is measured from the left edge in both directions. Without an
     explicit anchor the thumb's static position flips in RTL. */
  left: 0;
  border-radius: 999px;
  background: var(--green);
  transition: transform .38s var(--ease), width .38s var(--ease);
  z-index: 0;
}
.lang-toggle button:nth-of-type(2) { font-family: var(--font-ar); }

/* ----- Hero -------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding-block: 130px 80px;
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg video, .hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Scrim: keeps AA contrast over the film in both directions */
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(246,246,243,.97) 0%, rgba(246,246,243,.9) 38%, rgba(246,246,243,.35) 68%, rgba(246,246,243,.15) 100%),
    linear-gradient(to top, rgba(246,246,243,.9), transparent 45%);
}
[dir='rtl'] .hero-bg::after {
  background:
    linear-gradient(to left, rgba(246,246,243,.97) 0%, rgba(246,246,243,.9) 38%, rgba(246,246,243,.35) 68%, rgba(246,246,243,.15) 100%),
    linear-gradient(to top, rgba(246,246,243,.9), transparent 45%);
}
/* .wrap keeps the page grid; .hero-in only caps the measure, so the copy
   stays aligned with the nav logo instead of centring in the viewport. */
.hero .wrap { position: relative; z-index: 1; }
.hero-in { max-width: 760px; }
.hero h1 .line { display: block; overflow: hidden; }
.hero h1 .line > span { display: block; }
.hero .lede { font-size: clamp(1.1rem, 1.65vw, 1.35rem); }

/* Morphing word chip: "Milk" → "حليب" → "दूध" … */
.morph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.5ch;
  padding: 2px 16px;
  margin-inline: 6px;
  border-radius: 14px;
  background: var(--green);
  color: #fff;
  position: relative;
  vertical-align: baseline;
  transform: rotate(-1.5deg);
}
.morph .morph-word { display: inline-block; white-space: nowrap; }

.hero-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  font-size: .92rem;
  color: var(--muted);
  font-weight: 600;
}
.dot-live {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(23,178,106,.6);
  animation: pulse 2.4s infinite;
  flex: none;
}
@keyframes pulse {
  70%  { box-shadow: 0 0 0 12px rgba(23,178,106,0); }
  100% { box-shadow: 0 0 0 0 rgba(23,178,106,0); }
}

.scroll-cue {
  position: absolute;
  inset-block-end: 32px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  z-index: 1;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
html[lang='ar'] .scroll-cue { letter-spacing: 0; text-transform: none; }
.scroll-cue .bar {
  width: 2px; height: 40px; border-radius: 2px;
  background: linear-gradient(to bottom, var(--green), transparent);
  animation: cue 2s var(--ease) infinite;
}
@keyframes cue {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ----- Device frame ------------------------------------------------------ */
.device {
  position: relative;
  border-radius: 44px;
  background: #10131a;
  padding: 9px;
  box-shadow: var(--shadow-lg), 0 0 0 1.5px rgba(255,255,255,.12) inset;
  flex: none;
}
/* No drawn dynamic island: the screenshots already contain the real one. */
.device img { border-radius: 36px; width: 100%; display: block; }

/* ----- Problem scene ----------------------------------------------------- */
.problem { background: var(--card); }
.notes-stage {
  position: relative;
  min-height: clamp(320px, 40vw, 460px);
  margin-top: 8px;
}
/* Each note is its own cutout, so no clipping — just place and drift them. */
.note {
  position: absolute;
  width: clamp(120px, 15vw, 200px);
  filter: drop-shadow(0 18px 30px rgba(31, 36, 48, .16));
  will-change: transform;
}
.note[data-note='0'] { inset-inline-start: 4%;  inset-block-start: 10%; }
.note[data-note='1'] { inset-inline-start: 33%; inset-block-start: 40%; width: clamp(95px, 12vw, 155px); }
.note[data-note='2'] { inset-inline-end: 16%;   inset-block-start: 6%; }
.note[data-note='3'] { inset-inline-end: 4%;    inset-block-start: 52%; width: clamp(85px, 10vw, 130px); }
.note-caption {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: 4%;
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  font-size: .88rem;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: var(--shadow);
}
.pain-list { display: grid; gap: 14px; margin-top: 32px; }
.pain {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 1.02rem;
  color: var(--ink-2);
}
.pain .x {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--coral-soft);
  color: var(--coral);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: .9rem;
  margin-top: 3px;
}

/* ----- Magic / translate scene ------------------------------------------- */
.magic { position: relative; overflow: hidden; }
.magic-bg {
  position: absolute; inset: 0; z-index: 0;
  opacity: .5;
}
.magic-bg video { width: 100%; height: 100%; object-fit: cover; }
.magic-bg::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(246,246,243,.55) 0%, var(--bg) 72%);
}
.magic .wrap { position: relative; z-index: 1; }

.translate-demo {
  display: grid;
  grid-template-columns: minmax(260px, 380px) auto 1fr;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  margin-top: 20px;
}

.compose {
  background: var(--card);
  border-radius: var(--r-lg);
  padding: 26px;
  box-shadow: var(--shadow);
  border: 1.5px solid var(--line);
}
.compose-head {
  display: flex; align-items: center; gap: 10px;
  font-size: .82rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: 16px;
}
html[lang='ar'] .compose-head { text-transform: none; letter-spacing: 0; }
.compose-head .flag { font-size: 1.1rem; }
.compose-field {
  border: 2px solid var(--green);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  font-size: 1.4rem;
  font-weight: 700;
  min-height: 62px;
  display: flex;
  align-items: center;
  background: var(--green-tint);
  /* The helper types Devanagari here — always LTR, whichever way the page runs. */
  direction: ltr;
  text-align: left;
}
/* Arabic item words keep the Arabic face even while the page is in English. */
.word-ar { font-family: var(--font-ar); }
.caret {
  display: inline-block;
  width: 2.5px; height: 1.35em;
  background: var(--green);
  margin-inline-start: 3px;
  animation: blink 1.05s steps(2, start) infinite;
  vertical-align: middle;
}
@keyframes blink { to { visibility: hidden; } }
.compose-hint { margin-top: 14px; font-size: .9rem; color: var(--muted); }

.beam { position: relative; width: clamp(48px, 7vw, 110px); height: 4px; }
.beam-track { position: absolute; inset: 0; border-radius: 4px; background: var(--line); }
.beam-fill {
  position: absolute; inset-block: 0; inset-inline-start: 0;
  width: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--green), var(--coral));
  transform-origin: left center;
}
[dir='rtl'] .beam-fill { transform-origin: right center; }
.beam-pip {
  position: absolute;
  inset-block-start: 50%;
  width: 12px; height: 12px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 5px rgba(23,178,106,.2);
}

.receivers { display: grid; gap: 14px; }
.receiver {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--card);
  border-radius: var(--r);
  padding: 16px 20px;
  box-shadow: var(--shadow-sm);
  border: 1.5px solid var(--line);
  will-change: transform, opacity;
}
.receiver .who { flex: none; display: flex; align-items: center; gap: 10px; min-width: 148px; }
.receiver .flag { font-size: 1.5rem; }
.receiver .name { font-size: .82rem; color: var(--muted); font-weight: 600; line-height: 1.3; }
.receiver .word {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--ink);
  flex: 1;
}
.receiver .tick {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  display: grid; place-items: center;
  font-size: .85rem;
  font-weight: 800;
}

/* ----- Feature tour (pinned) --------------------------------------------- */
.tour { background: var(--card); }
.tour-grid {
  display: grid;
  grid-template-columns: minmax(260px, 330px) 1fr;
  gap: clamp(30px, 6vw, 96px);
  align-items: start;
}

/* Sticky device column: holds the viewport centre while the copy scrolls by. */
.tour-sticky {
  position: sticky;
  inset-block-start: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
}
.tour-sticky .device { width: 100%; max-width: 300px; }

.tour-shots { position: relative; }
.tour-shot { position: absolute; inset: 0; }
.tour-shot:first-child { position: relative; }
.tour-shot img { border-radius: 36px; }

/* Each step owns a screenful, so one step is "current" at a time. */
.tour-copy { display: flex; flex-direction: column; }
.tour-step {
  min-height: 82vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  will-change: transform, opacity;
}
.tour-step .n {
  font-size: .8rem; font-weight: 800; color: var(--green);
  letter-spacing: .12em; margin-bottom: 10px; display: block;
}
.tour-step h3 { margin-bottom: 14px; }
.tour-step p { color: var(--ink-2); max-width: 46ch; }
.tour-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.tag {
  font-size: .82rem; font-weight: 700;
  padding: 6px 13px; border-radius: 999px;
  background: var(--green-tint); color: var(--green-dark);
  border: 1px solid var(--green-soft);
}
.tag.coral { background: var(--coral-soft); color: var(--coral); border-color: #f8cfc5; }

.tour-dots { display: flex; gap: 8px; }
.tour-dots .d {
  width: 26px; height: 4px; border-radius: 4px;
  background: var(--line);
  transition: background-color .35s var(--ease);
}
.tour-dots .d.on { background: var(--green); }

/* ----- Languages marquee ------------------------------------------------- */
.langs { overflow: hidden; }
.marquee { display: grid; gap: 16px; margin-block: 8px; }
.marquee-row {
  display: flex;
  gap: 16px;
  width: max-content;
  will-change: transform;
}
.lang-chip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 13px 26px;
  font-size: 1.15rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.lang-chip:hover { transform: translateY(-3px); border-color: var(--green); box-shadow: var(--shadow); }
.lang-chip .flag { font-size: 1.35rem; }
.lang-chip .en { font-size: .8rem; color: var(--muted); font-weight: 600; }

.marquee-mask {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.langs-foot {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; margin-top: 44px; text-align: center;
  color: var(--muted); font-weight: 600; font-size: .95rem;
  flex-wrap: wrap;
}

/* ----- Use cases --------------------------------------------------------- */
.cases { background: var(--card); }
.case-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}
.case {
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: var(--r-xl);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  will-change: transform, opacity;
}
.case:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--green-soft); }
.case .emoji {
  width: 58px; height: 58px;
  border-radius: 18px;
  background: var(--card);
  border: 1.5px solid var(--line);
  display: grid; place-items: center;
  font-size: 1.7rem;
  box-shadow: var(--shadow-sm);
}
.case h3 { font-size: 1.28rem; }
.case p { color: var(--ink-2); font-size: .98rem; }
/* Show the top of each screenshot as a peek, not the whole 2.2:1 phone —
   otherwise the cards grow to ~900px tall. */
.case .shot {
  margin-top: auto;
  border-radius: var(--r) var(--r) 0 0;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
  border-bottom: 0;
  height: 210px;
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent);
  mask-image: linear-gradient(to bottom, #000 62%, transparent);
}
.case .shot img { width: 100%; height: auto; }

/* ----- CTA --------------------------------------------------------------- */
.cta {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: #fff;
}
.cta-bg { position: absolute; inset: 0; z-index: 0; opacity: .3; }
.cta-bg video { width: 100%; height: 100%; object-fit: cover; }
.cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(23,178,106,.5), transparent 70%);
}
.cta .wrap { position: relative; z-index: 2; }
.cta .lede { color: rgba(255,255,255,.72); }
.cta .eyebrow { background: rgba(23,178,106,.2); color: #7CE3B0; }
.cta-note {
  margin-top: 26px; font-size: .9rem; color: rgba(255,255,255,.5);
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
}
.cta .btn-ghost { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.25); box-shadow: none; }
.cta .btn-ghost:hover { background: rgba(255,255,255,.16); border-color: #fff; color: #fff; }

.store-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 18px; }
.store {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 20px;
  border-radius: 12px;
  border: 1.5px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.05);
  font-size: .84rem;
  line-height: 1.25;
  transition: border-color .2s, background-color .2s;
}
.store:hover { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.12); }
.store .s1 { color: rgba(255,255,255,.55); font-size: .68rem; display: block; }
.store .s2 { font-weight: 700; font-size: .95rem; }
.store .ico { width: 22px; height: 22px; }
.store.soon { opacity: .5; cursor: default; }
.store.soon:hover { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.05); }

/* ----- Footer ------------------------------------------------------------ */
.foot { background: var(--ink); color: rgba(255,255,255,.6); padding-block: 56px 40px; font-size: .92rem; }
.foot a { color: rgba(255,255,255,.6); transition: color .2s; }
.foot a:hover { color: #fff; }
.foot-top {
  display: flex; flex-wrap: wrap; gap: 32px;
  justify-content: space-between; align-items: flex-start;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.foot-brand { display: inline-flex; align-items: center; }
/* The lockup is dark-on-light; lift it out of the dark footer. */
.foot-brand img { height: 28px; width: auto; filter: brightness(0) invert(1); opacity: .92; }
.foot-links { display: flex; flex-wrap: wrap; gap: 26px; }
.foot-bot {
  display: flex; flex-wrap: wrap; gap: 16px;
  justify-content: space-between; align-items: center;
  padding-top: 26px;
  font-size: .86rem;
}

/* ----- Reveal primitive --------------------------------------------------
   Elements are visible by default. landing.js adds .js-motion to <html> only
   when GSAP loaded AND the user allows motion — so a JS/GSAP failure or
   reduced-motion leaves a complete, readable page.
   ------------------------------------------------------------------------ */
.js-motion .reveal { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .marquee-row { animation: none !important; transform: none !important; }
}

/* ----- Responsive -------------------------------------------------------- */
@media (max-width: 1024px) {
  .nav-links { display: none; }
  .translate-demo { grid-template-columns: 1fr; }
  .beam { width: 100%; height: 40px; justify-self: center; }
  .beam-track, .beam-fill { inset-inline: 0; inset-block: 50%; height: 4px; margin-top: -2px; }
  /* One column: the device sticks under the header, the copy scrolls beneath. */
  .tour-grid { grid-template-columns: 1fr; gap: 12px; }
  .tour-sticky {
    inset-block-start: 74px;
    height: auto;
    padding-block: 14px;
    background: linear-gradient(to bottom, var(--card) 82%, transparent);
    z-index: 2;
  }
  .tour-sticky .device { max-width: 190px; }
  .tour-step { min-height: 68vh; }
}

@media (max-width: 680px) {
  body { font-size: 16px; }
  .hero { min-height: auto; padding-block: 120px 60px; }
  .hero-bg::after,
  [dir='rtl'] .hero-bg::after {
    background: linear-gradient(to bottom, rgba(246,246,243,.9), rgba(246,246,243,.82));
  }
  .scroll-cue { display: none; }
  .cta-row .btn { flex: 1 1 100%; }
  .notes-stage { min-height: 260px; }
  .note { width: 120px; }
  .note-caption { font-size: .78rem; padding: 8px 12px; }
  .receiver { padding: 14px 16px; gap: 12px; }
  .receiver .who { min-width: auto; }
  .receiver .name { display: none; }
  .foot-top { flex-direction: column; gap: 24px; }
}