/* Llynx homepage: the mission-site layout on the sandbox login's cream and
   edge vignette, with the login's warm ink and Llynx wordmark. */
:root {
  --cream: #efe6d4;
  --cream-light: #fffbf2;
  --ink: #241f19;
  --muted: #605648;
  /* Plum-wine for the map highlight and the card pulses. */
  --accent: #7a3368;
  --accent-deep: #4b1e43;
  --glow: rgb(122 51 104 / 0.55);
  --hairline: rgb(36 31 25 / 0.2);
  --hairline-light: rgb(36 31 25 / 0.14);
  --land: rgb(36 31 25 / 0.09);
  --serif: 'Instrument Serif', Georgia, serif;
  --sans: Manrope, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --native: 'Noto Sans Devanagari', 'Noto Sans Bengali', 'Noto Sans Gurmukhi', 'Noto Sans Tamil', 'Noto Sans Gujarati',
    'Noto Sans Kannada', 'Noto Sans KR', 'Noto Sans SC', 'Noto Nastaliq Urdu', 'Instrument Serif', serif;
  --section-pad: clamp(56px, 7vw, 96px);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--cream); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body.llynx {
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
/* The login panel's vignette at 70% strength, fixed to the viewport behind
   the content: brightest just above centre, deepening to warm brown at the
   edges. */
body.llynx::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(ellipse 85% 75% at 50% 42%, rgb(255 251 242 / 0.53) 0%, rgb(255 251 242 / 0) 45%, rgb(120 88 48 / 0.18) 100%);
}
.llynx a { color: var(--ink); }
.llynx a:hover { color: var(--muted); }
.llynx a:focus-visible, .llynx button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.llynx h1, .llynx h2, .llynx h3 { font-family: var(--serif); font-weight: 400; margin: 0; }
.llynx em { font-style: italic; }

.page { max-width: 1280px; margin: 0 auto; padding: 0 clamp(24px, 5vw, 72px); }

.site-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 28px 0; }
.wordmark {
  font-family: Geist, system-ui, sans-serif;
  font-weight: 600;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.03em;
  text-decoration: none;
  color: var(--ink) !important;
}
.wordmark-sm { font-size: 28px; }
.site-nav { display: flex; align-items: center; gap: 32px; font-size: 16px; font-weight: 500; }
.site-nav a { text-decoration: none; }

.pill {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--cream-light) !important;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.pill:hover { background: #3a3229; }
.pill-lg { padding: 16px 28px; font-weight: 600; font-size: 17px; }
.text-link { font-weight: 600; font-size: 17px; text-decoration: none; border-bottom: 1.5px solid var(--ink); padding-bottom: 2px; }
.text-link:hover { border-bottom-color: var(--muted); }
.spaced { display: inline-block; margin-top: 56px; }
.spaced-sm { margin-top: 28px; }
.actions { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 28px; }
.actions.centered { margin-top: 44px; justify-content: center; }

.eyebrow { margin: 0; font-family: var(--mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.eyebrow-lg { font-size: 14px; }
.muted { color: var(--muted); }
.lead { margin: 24px 0 0; font-size: 20px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.lead.intro { margin-top: 28px; line-height: 1.5; max-width: 760px; }
.lead.flush { margin: 0; line-height: 1.5; }

.section { border-top: 1.5px solid var(--hairline); padding: var(--section-pad) 0; }
.h2-sm { font-size: clamp(36px, 4.5vw, 60px); line-height: 1; letter-spacing: -0.02em; }
.h2-lg { margin-top: 24px !important; font-size: clamp(44px, 5.5vw, 80px); line-height: 1; letter-spacing: -0.02em; max-width: 1000px; text-wrap: balance; }
.h2-gallery { font-size: clamp(48px, 6vw, 88px); line-height: 1; letter-spacing: -0.02em; }
.h2-closing { margin: 28px auto 0 !important; font-size: clamp(56px, 8vw, 120px); line-height: 0.98; letter-spacing: -0.025em; max-width: 1000px; text-wrap: balance; }

/* Hero */
.hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 48px;
  align-items: end;
  padding: clamp(56px, 9vw, 120px) 0 0;
}
.hero-copy { padding-bottom: clamp(40px, 6vw, 96px); }
.hero h1 { font-size: clamp(56px, 8vw, 112px); line-height: 0.98; letter-spacing: -0.025em; text-wrap: balance; }
.hero-sub { margin: 32px 0 0; max-width: 520px; font-size: clamp(19px, 1.8vw, 24px); line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.hero-art { display: block; width: 100%; max-width: 520px; height: auto; aspect-ratio: 1; object-fit: contain; justify-self: center; }

/* World map */
.map { margin: 40px 0 0; }
.map-frame { position: relative; width: 100%; aspect-ratio: 1000 / 440; }
.map-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.map-svg .land path { fill: var(--land); stroke: var(--cream); stroke-width: 0.6; }
.map-svg .hi { fill: var(--accent); opacity: 0; transition: opacity 0.9s ease; filter: drop-shadow(0 0 5px var(--glow)); }
.map-svg .dot { fill: var(--accent-deep); opacity: 0.25; transition: opacity 0.9s ease; }
.map-svg .ring { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0.4); }
.map-svg .on .hi { opacity: 0.85; }
.map-svg .on .dot { opacity: 1; }
.map-svg .on .ring { animation: llynx-ring 2.2s ease-out infinite; }
.map-svg.is-still .hi { opacity: 0.6; transition: none; }
.map-svg.is-still .dot { opacity: 1; transition: none; }
@keyframes llynx-ring { 0% { opacity: 0.8; transform: scale(0.4); } 100% { opacity: 0; transform: scale(2.6); } }
.map-caption {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.map-caption b { font-weight: 500; color: var(--ink); transition: opacity 0.5s ease; }

/* Language cards: at most seven per row */
.lang-grid {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(120px, calc((100% - 48px) / 7)), 1fr));
  gap: 8px;
}
.lang-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1px solid var(--hairline-light); border-radius: 10px; container-type: inline-size; }
/* 20px, shrinking with the card where a long name (Português) would
   otherwise reach the border; the fixed size is the fallback. */
.lang-native { font-family: var(--native); font-size: 20px; font-size: min(20px, 20cqi); line-height: 1.2; }
.lang-en { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.card-pulse { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); overflow: visible; pointer-events: none; }
.card-pulse rect { fill: none; filter: drop-shadow(0 0 5px var(--glow)); }
.card-pulse .glow { stroke: var(--accent); stroke-width: 1.5; animation: llynx-card-glow 3.1s ease both; }
.card-pulse .dash {
  stroke: var(--accent-deep);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 22 78;
  animation: llynx-pulse 2.2s ease-in-out both, llynx-dash 3.1s ease both;
}
.card-pulse.still .glow { animation: none; opacity: 0.6; }
@keyframes llynx-pulse { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } }
@keyframes llynx-card-glow { 0% { opacity: 0; } 29%, 71% { opacity: 0.85; } 100% { opacity: 0; } }
@keyframes llynx-dash { 0% { opacity: 0; } 29%, 71% { opacity: 1; } 100% { opacity: 0; } }
.footnote { margin: 20px 0 0; font-size: 15px; color: var(--muted); }

/* Voice gallery: the previous site's fixed stories and recordings (driven by
   main.js), in the mission-site layout. */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 64px; align-items: center; }
.voice-gallery { border-top: 3px solid var(--ink); padding-top: 28px; display: grid; gap: 28px; min-width: 0; }
.gallery-language-picker { display: flex; flex-wrap: wrap; gap: 10px; }
.gallery-language {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px 7px 8px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.gallery-language:hover { background: rgb(36 31 25 / 0.06); }
.gallery-language[aria-selected='true'] { background: var(--ink); color: var(--cream-light); }
.gallery-flag { display: block; width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%; object-fit: cover; }
.gallery-native { font-family: var(--native); font-size: 17px; font-weight: 400; line-height: 1; }
.gallery-passage { min-width: 0; border-top: 1.5px solid var(--hairline); padding-top: 28px; }
.gallery-passage h3 { margin: 0 0 14px; font-family: var(--native); font-size: clamp(24px, 2.2vw, 32px); line-height: 1.2; }
.gallery-script { margin: 0; font-family: var(--native); font-size: clamp(19px, 1.6vw, 24px); line-height: 1.6; text-wrap: pretty; }
.gallery-passage :lang(es), .gallery-passage :lang(fr) { font-family: var(--serif); }
.gallery-passage h3:lang(es), .gallery-passage h3:lang(fr) { font-size: clamp(30px, 2.6vw, 38px); line-height: 1.05; }
.gallery-script:lang(es), .gallery-script:lang(fr) { font-size: clamp(22px, 1.9vw, 28px); line-height: 1.45; }
.gallery-voice-picker { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.demo-label { font-family: var(--mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.gallery-voice-buttons { display: flex; gap: 28px; }
.gallery-voice-buttons button {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0 0 4px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}
.gallery-voice-buttons button[aria-pressed='true'] { color: var(--ink); border-bottom-color: var(--ink); }
.gallery-player { display: flex; align-items: center; gap: 20px; border-top: 1.5px solid var(--hairline); padding-top: 28px; }
.gallery-play {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 28px 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--cream-light);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.gallery-play:hover { background: #3a3229; }
.gallery-play svg { width: 14px; height: 14px; fill: currentColor; }
.gallery-play .pause, .gallery-play[data-playing] .play { display: none; }
.gallery-play[data-playing] .pause { display: block; }
.gallery-duration { font-family: var(--mono); font-size: 13px; letter-spacing: 0.12em; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Solutions */
.solution-grid { margin-top: 64px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 56px; }
.solution { border-top: 1.5px solid var(--hairline); padding-top: 24px; }
.solution h3 { margin-top: 16px; font-size: 34px; line-height: 1.08; }
.solution p.muted { margin: 14px 0 0; font-size: 17px; line-height: 1.55; text-wrap: pretty; }

/* Early access and closing */
.early { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 48px; align-items: end; }
.closing { border-top: 3px solid var(--ink); padding: clamp(72px, 10vw, 140px) 0 var(--section-pad); text-align: center; }
.guarantee { margin: 32px 0 0; font-size: 17px; color: var(--muted); }

.site-footer {
  border-top: 1.5px solid var(--hairline);
  padding: 32px 0 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
}
.footer-links { display: flex; flex-wrap: wrap; gap: 28px; }
.footer-links a { color: var(--muted); text-decoration: none; }
.footer-links a:hover { color: var(--ink); }

/* Phones: brand and the call button on one row (the section links are
   reached by scrolling), a tighter hero, two language columns, and 44px
   touch targets. */
@media (max-width: 640px) {
  .page { padding-inline: 20px; }
  .site-header { flex-wrap: nowrap; gap: 16px; padding: 20px 0; }
  .wordmark { font-size: 32px; }
  .site-nav { margin-left: auto; gap: 0; }
  .site-nav > a:not(.pill) { display: none; }
  .site-nav .pill { padding: 12px 18px; white-space: nowrap; }
  .hero { gap: 24px; padding-top: 40px; }
  .hero-copy { padding-bottom: 0; }
  .hero h1 { font-size: clamp(44px, 14vw, 56px); }
  .hero-art { max-width: 360px; }
  .lang-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lang-card { min-width: 0; padding: 12px; }
  .gallery { gap: 40px; }
  .solution-grid { gap: 36px; }
  /* One sideways-scrolling row of languages, bleeding to the screen edges,
     instead of up to eleven stacked rows. The right edge fades so the row
     reads as scrollable even when no chip is cut off; the extra end padding
     keeps the last chip clear of the fade. The block padding keeps focus
     outlines from being clipped. */
  .gallery-language-picker {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: -6px -20px;
    padding: 6px 40px 6px 20px;
    scroll-padding-inline: 20px 40px;
    scrollbar-width: thin;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
  }
  .gallery-language { flex: 0 0 auto; min-height: 44px; }
  .gallery-voice-buttons button { display: inline-flex; align-items: flex-end; min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .map-svg .ring { animation: none !important; }
  .map-caption b { transition: none; }
}