/* ---------------------------------------------------------------
   Design tokens — mirrors Shell's own "Lime" theme (web/src/shell/theme.ts)
   so the marketing site looks like the app it's selling.
------------------------------------------------------------------ */
:root {
  --bg: #0e0f11;
  --surface: #16181c;
  --surface-2: #1d2025;
  --surface-3: #24272d;
  --border: rgba(255, 255, 255, 0.10);
  --accent: #c8f060;
  --accent-text: #0e0f11;
  --label: #e8eaf0;
  --section: #9aa0ab;
  --dim: #6b7280;
  --danger: #f87171;
  --ok: #4ade80;
  --info: #60a5fa;
  --r-card: 20px;
  --r-tile: 22px;
  --r-pill: 999px;
  --wrap: 1120px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--label);
  font-family: var(--font);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.1em 0.45em;
  font-size: 0.9em;
  color: var(--accent);
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--accent);
  color: var(--accent-text);
  padding: 10px 16px;
  border-radius: 0 0 8px 0;
  z-index: 200;
}
.skip-link:focus { left: 0; }

.lg-only { display: inline; }
@media (max-width: 640px) { .lg-only { display: none; } }

/* ---------------------------------------------------------------
   Buttons
------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 15px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn--accent { background: var(--accent); color: var(--accent-text); }
.btn--accent:hover { background: #d5f57e; }
.btn--ghost { background: transparent; color: var(--label); border-color: var(--border); }
.btn--ghost:hover { border-color: var(--section); }
.btn--lg { padding: 14px 26px; font-size: 16px; }

/* ---------------------------------------------------------------
   Nav
------------------------------------------------------------------ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(14, 15, 17, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.nav.is-scrolled { border-bottom-color: var(--border); background: rgba(14, 15, 17, 0.92); }

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
}

.nav__mark {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--accent);
  color: var(--accent-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
}

.nav__links {
  display: flex;
  gap: 28px;
  font-size: 14.5px;
  color: var(--section);
}
.nav__links a:hover { color: var(--label); }

.nav__cta { display: flex; align-items: center; gap: 10px; }

.lang-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface);
}
.lang-switch button {
  border: 0;
  background: transparent;
  color: var(--dim);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 6px 10px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.lang-switch button:hover { color: var(--label); }
.lang-switch button[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); }

.lang-switch--mobile { align-self: flex-start; margin: 10px 0 2px; }

.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.nav__burger span { width: 16px; height: 2px; background: var(--label); margin: 0 auto; border-radius: 2px; }

.nav__mobile {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 8px 24px 20px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.nav__mobile a { padding: 12px 4px; color: var(--section); font-size: 15px; }
.nav__mobile .btn { margin-top: 10px; width: fit-content; }

@media (max-width: 860px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: flex; }
  .nav__mobile.is-open { display: flex; }
}

/* ---------------------------------------------------------------
   Hero
------------------------------------------------------------------ */
.hero {
  position: relative;
  padding: 96px 0 64px;
  overflow: hidden;
}

.hero__glow {
  position: absolute;
  top: -220px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 500px;
  background: radial-gradient(closest-side, rgba(200, 240, 96, 0.16), transparent 70%);
  pointer-events: none;
}

.hero__inner { position: relative; text-align: center; max-width: 780px; }

.eyebrow {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--section);
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 22px;
}

.hero__title {
  font-size: clamp(34px, 6vw, 58px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 800;
  margin: 0 0 20px;
}

.accent-text { color: var(--accent); }

.hero__sub {
  font-size: clamp(16px, 2vw, 19px);
  color: var(--section);
  max-width: 620px;
  margin: 0 auto 34px;
}

.hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.hero__note { font-size: 13.5px; color: var(--dim); }

.hero__grid { margin-top: 64px; }

/* ---------------------------------------------------------------
   Reveal-on-scroll
------------------------------------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.hero__inner .reveal:nth-child(1) { transition-delay: 0.02s; }
.hero__inner .reveal:nth-child(2) { transition-delay: 0.08s; }
.hero__inner .reveal:nth-child(3) { transition-delay: 0.14s; }
.hero__inner .reveal:nth-child(4) { transition-delay: 0.2s; }
.hero__inner .reveal:nth-child(5) { transition-delay: 0.26s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ---------------------------------------------------------------
   Mini tile grid (launcher look) — hero + builder section
------------------------------------------------------------------ */
.mini-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}

.mg-row {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: marquee 32s linear infinite;
  /* Set from JS to the exact pixel width of one copy of the tile list
     (including its share of the gaps) — see setupMarquee() in script.js.
     A bare -50% is *not* exact here: with N gaps inside a duplicated
     list of 2N items there are (2N-1) gaps total, so 50% of the total
     width lands half a gap short of where the second copy actually
     starts, producing a visible jump every loop. */
  --loop-distance: 50%;
}
.mg-row--rev { animation-direction: reverse; animation-duration: 38s; }
.mini-grid:hover .mg-row,
.mini-grid.is-paused .mg-row { animation-play-state: paused; }

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-1 * var(--loop-distance))); }
}

.mg-tile {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: var(--r-tile);
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
  position: relative;
}
.mg-tile:hover, .mg-tile.is-active {
  transform: translateY(-4px) scale(1.06);
  border-color: var(--accent);
  background: var(--surface-2);
}

@media (max-width: 640px) {
  .mg-tile { width: 52px; height: 52px; font-size: 22px; border-radius: 16px; }
}

/* The hero row is decorative only — disable interaction entirely so a tap
   can't leave a tile "stuck" hovered/highlighted or pause the marquee. */
.mini-grid--hero .mg-tile { cursor: default; pointer-events: none; }

/* ---------------------------------------------------------------
   Feature sections (shared layout)
------------------------------------------------------------------ */
.feature { padding: 88px 0; border-top: 1px solid var(--border); }

.feature__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.feature__grid > * { min-width: 0; }
.feature--rev .feature__grid { direction: rtl; }
.feature--rev .feature__grid > * { direction: ltr; }

@media (max-width: 900px) {
  .feature__grid { grid-template-columns: 1fr; gap: 36px; direction: ltr !important; }
  /* Text always reads before its animation on mobile, regardless of which
     side each sits on at desktop width. */
  .feature__grid > .feature__copy { order: -1; }
}

.kicker {
  color: var(--accent);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 12px;
}

.feature__copy h2 {
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
}

.feature__lede {
  color: var(--section);
  font-size: 16.5px;
  margin: 0 0 22px;
  max-width: 46ch;
}

.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.checklist li {
  position: relative;
  padding-left: 28px;
  color: var(--label);
  font-size: 15px;
}
.checklist li::before {
  content: "✓";
  position: absolute;
  left: 0; top: 0;
  width: 20px; height: 20px;
  border-radius: 6px;
  background: rgba(200, 240, 96, 0.16);
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

/* ---------------------------------------------------------------
   Generic visual panel
------------------------------------------------------------------ */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 28px;
  position: relative;
  min-height: 340px;
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.panel__label {
  font-size: 12.5px;
  color: var(--dim);
  font-weight: 600;
  margin-bottom: 18px;
}

.panel__hint {
  margin: 18px 0 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--dim);
}

/* ---------------------------------------------------------------
   1. Builder panel — replicates the real in-app Module Builder:
   type a goal, toggle the abilities ("bridges") it needs, generate,
   then the finished mini-app appears.
------------------------------------------------------------------ */
.panel--builder { align-items: center; }

/* Fixed height so the panel never resizes as it swaps between the
   form / loading / result states — each state fills the same box. */
.mb-mock {
  width: 100%;
  max-width: 300px;
  height: 440px;
  margin: 0 auto;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px;
  display: flex;
  flex-direction: column;
}

.mb-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  color: var(--label);
  margin-bottom: 14px;
  flex-shrink: 0;
}

.mb-form {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: opacity 0.2s ease;
}

.mb-field { margin-bottom: 14px; }
.mb-field-label {
  display: block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dim);
  font-weight: 700;
  margin-bottom: 6px;
}
.mb-textarea {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  min-height: 40px;
  font-size: 12.5px;
  color: var(--label);
  line-height: 1.4;
}

.console-caret {
  display: inline-block;
  width: 6px; height: 13px;
  background: var(--accent);
  vertical-align: text-bottom;
  animation: caretBlink 1s step-end infinite;
}
@keyframes caretBlink { 50% { opacity: 0; } }

.mb-abilities {
  display: flex;
  flex-direction: column;
  margin-bottom: 14px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.mb-ability { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface); }
.mb-ability + .mb-ability { border-top: 1px solid var(--border); }
.mb-ability-icon { font-size: 15px; width: 20px; text-align: center; flex-shrink: 0; }
.mb-ability-text { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 1px; }
.mb-ability-title { font-size: 12px; color: var(--label); font-weight: 600; }
.mb-ability-sub { font-size: 10.5px; color: var(--dim); }

.mb-switch {
  position: relative;
  width: 34px; height: 20px;
  flex-shrink: 0;
  background: var(--surface-3);
  border-radius: 999px;
  transition: background 0.2s ease;
}
.mb-thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #d0d3d8;
  transition: transform 0.2s ease, background 0.2s ease;
}
.mb-ability.is-on .mb-switch { background: var(--accent); }
.mb-ability.is-on .mb-thumb { transform: translateX(14px); background: var(--accent-text); }

.mb-generate {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  background: var(--accent);
  color: var(--accent-text);
  padding: 11px;
  border-radius: 10px;
  transition: transform 0.15s ease;
}
.mb-generate.is-pressed { transform: scale(0.96); }

.mb-loading {
  display: none;
  flex: 1;
  min-height: 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--dim);
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.mb-loading.is-visible { opacity: 1; }
.status-dots { display: inline-flex; gap: 3px; }
.status-dots i {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--dim);
  display: inline-block;
  animation: statusDot 1s ease-in-out infinite;
}
.status-dots i:nth-child(2) { animation-delay: 0.15s; }
.status-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes statusDot { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

.mb-result {
  display: none;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px;
  opacity: 0;
  transform: scale(0.85);
}
.mb-result.is-boom { animation: boomPop 0.55s cubic-bezier(.22, 1.4, .4, 1) forwards; }
@keyframes boomPop {
  0% { opacity: 0; transform: scale(0.7); }
  60% { opacity: 1; transform: scale(1.07); }
  100% { opacity: 1; transform: scale(1); }
}
.mb-result-icon {
  width: 56px; height: 56px;
  border-radius: 18px;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 6px;
}
.mb-result-title { font-size: 15px; font-weight: 700; color: var(--label); }
.mb-result-sub { font-size: 11.5px; color: var(--dim); }
.mb-result-chip {
  margin-top: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  background: rgba(200,240,96,0.12);
  padding: 4px 10px;
  border-radius: var(--r-pill);
}

/* ---------------------------------------------------------------
   Phone mockup (shared by widget + anywhere sections)
------------------------------------------------------------------ */
.panel--phone { align-items: center; }

.phone {
  width: 240px;
  border-radius: 34px;
  background: #000;
  border: 6px solid #000;
  box-shadow: 0 0 0 1px var(--border), 0 24px 50px rgba(0,0,0,0.5);
  position: relative;
  padding: 10px;
}

.phone__notch {
  position: absolute;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  width: 70px; height: 18px;
  background: #000;
  border-radius: 0 0 12px 12px;
  z-index: 2;
}

.phone__screen {
  background: var(--bg);
  border-radius: 24px;
  padding: 30px 14px 16px;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone__home-label {
  display: block;
  text-align: center;
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--dim);
}

/* widget grid inside the phone */
.widget-card {
  width: 100%;
  aspect-ratio: 1.4 / 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 8px;
}

.wtile {
  background: var(--surface-2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.wtile.is-placed { opacity: 1; transform: scale(1); }

.wtile--ring { flex-direction: column; gap: 2px; }
.ring-svg { width: 54%; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: var(--surface-3); stroke-width: 10; }
.ring-fill { fill: none; stroke: var(--accent); stroke-width: 10; stroke-linecap: round;
  stroke-dasharray: 264; stroke-dashoffset: 264; transition: stroke-dashoffset 1.2s ease; }
.ring-label { font-size: 10px; color: var(--dim); position: absolute; bottom: 8px; }

.wtile--btn { font-size: 18px; background: var(--accent); color: var(--accent-text); }
.wtile--btn.wtile--ghost { background: var(--surface-3); color: var(--label); font-size: 15px; }

.wtile--bar { flex-direction: column; align-items: flex-start; justify-content: center; padding: 8px 10px; gap: 6px; }
.wtile__label { font-size: 10px; color: var(--dim); }
.bar-track { width: 100%; height: 7px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.bar-fill { display: block; height: 100%; width: 0%; background: var(--accent); border-radius: 4px; transition: width 1.2s ease; }

.wtile--big { flex-direction: column; gap: 2px; }
.wtile__value { font-size: 20px; font-weight: 800; color: var(--label); }

/* ---------------------------------------------------------------
   3. Local AI — checks hydration + weather, then adjusts the goal.
   Fixed min-height so the panel never resizes as the checks/bubble
   text change length mid-animation.
------------------------------------------------------------------ */
.panel--chat { align-items: stretch; min-height: 300px; justify-content: center; }

.ai-checks { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.ai-check { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--section); }
.ai-check-icon { font-size: 15px; width: 18px; text-align: center; flex-shrink: 0; }
.ai-check-text { flex: 1; min-width: 0; transition: color 0.2s ease; }
.ai-check.is-done .ai-check-text { color: var(--label); }
.ai-check-status { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ai-check-mark { display: none; color: var(--accent); font-weight: 800; font-size: 13px; }
.ai-check.is-done .pulse-dot { display: none; }
.ai-check.is-done .ai-check-mark { display: inline; }

.chat__row--ai { display: flex; flex-direction: column; align-items: flex-start; }

.chat__bubble--ai {
  max-width: 92%;
  padding: 12px 15px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.45;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
  opacity: 0;
  transition: opacity 0.2s ease;
  min-height: 20px;
}
.chat__bubble--ai.is-typed { opacity: 1; }

.ondevice-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  background: rgba(200,240,96,0.12);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  margin-bottom: 8px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.ondevice-chip.is-visible { opacity: 1; }
.pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 0.35; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.15); } }

/* ---------------------------------------------------------------
   4. Bridge — connected modules
------------------------------------------------------------------ */
.panel--bridge { align-items: center; }

.bridge-row {
  display: grid;
  grid-template-columns: 1fr 70px 1fr;
  /* stretch (not center) so both cards share exactly the same height —
     the connecting line is then guaranteed to sit at both cards' true
     center, rather than "close enough" between two different heights. */
  align-items: stretch;
  gap: 6px;
  width: 100%;
}

.module-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
  /* Fixed height so neither card resizes as the animated value ticks
     from 0 up to 1000; stretch above makes the shorter card match it
     exactly, and this flex centers that card's own content within it. */
  min-height: 148px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.module-card__title { font-size: 13px; color: var(--section); font-weight: 700; margin-bottom: 10px; }
.module-card__value {
  font-size: 22px;
  font-weight: 800;
  color: var(--label);
  margin-bottom: 12px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.module-card__value span { font-size: 13px; color: var(--dim); font-weight: 600; margin-left: 3px; }
.module-card__btn {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  background: var(--accent);
  color: var(--accent-text);
  padding: 8px 12px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: transform 0.15s ease;
}
.module-card__btn.is-pressed { transform: scale(0.92); }
.module-card__row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  color: var(--section);
  padding: 5px 0;
}
.module-card__row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.module-card__row b { color: var(--label); white-space: nowrap; font-variant-numeric: tabular-nums; flex-shrink: 0; }

.bridge-line { width: 100%; height: 40px; align-self: center; overflow: visible; }
.bridge-line__path { fill: none; stroke: var(--border); stroke-width: 2; stroke-dasharray: 4 5; }
.bridge-line__dot { fill: var(--accent); }

/* ---------------------------------------------------------------
   5. Anywhere — device sync
------------------------------------------------------------------ */
.panel--sync { align-items: center; }

.sync-stage {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  width: 100%;
}
/* Let grid tracks shrink below their content's natural width — otherwise
   the wide desktop mockup forces the row past the panel edge and gets
   clipped instead of scaling down. */
.sync-stage > * { min-width: 0; }

.device { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; transition: opacity 0.5s ease; }
.device__caption { font-size: 12px; color: var(--dim); }

.device__screen {
  width: 74px;
  max-width: 100%;
  height: 130px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  justify-content: center;
}
.device__screen--wide {
  width: 148px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 148 / 96;
  border-radius: 8px;
}

.device__row { height: 8px; border-radius: 4px; background: var(--surface-3); }
.device__row--accent { background: var(--accent); width: 60%; }

.sync-arc { position: relative; width: 90px; flex-shrink: 0; }
.sync-arc__path { fill: none; stroke: var(--border); stroke-width: 2; stroke-dasharray: 3 5; }
.sync-arc__icon {
  position: absolute;
  top: 6px; left: 50%;
  transform: translateX(-50%);
  font-size: 15px;
  color: var(--accent);
}

.device--dim { opacity: 0.35; }

/* On narrow panels the arc's fixed width was eating most of the space,
   forcing the desktop mockup to shrink far more than the phone one and
   making the pair look mismatched in size. Give the arc less room and
   scale the phone down a bit too so both mockups land closer in scale. */
@media (max-width: 480px) {
  .sync-arc { width: 40px; }
  /* Scoped to the phone only — .device__screen--wide (desktop) shares
     the base .device__screen class, so an unscoped override here would
     win the specificity tie and clobber the desktop's own sizing too. */
  .device--phone .device__screen { width: 62px; height: 108px; }
}

/* ---------------------------------------------------------------
   Final CTA + footer
------------------------------------------------------------------ */
.cta-final {
  padding: 96px 0;
  text-align: center;
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, transparent, rgba(200,240,96,0.05));
}
.cta-final__inner h2 { font-size: clamp(26px, 4vw, 38px); margin: 0 0 12px; letter-spacing: -0.01em; }
.cta-final__inner p { color: var(--section); margin: 0 0 30px; font-size: 16px; }

.footer { border-top: 1px solid var(--border); padding: 48px 0 32px; }
.footer__inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.footer__brand { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.footer__tag { color: var(--section); font-size: 14px; margin: 0; }
.footer__links { display: flex; gap: 18px; font-size: 13.5px; color: var(--section); margin: 6px 0; }
.footer__links a:hover { color: var(--accent); }
.footer__copy { color: var(--dim); font-size: 12.5px; margin: 0; }