.logo-mark{
  height:26px;
  width:auto;
  display:block;
  color:var(--ink);
}

.eyebrow{
  font-family:'Archivo','Arial Narrow',sans-serif;
  font-stretch:expanded;
  font-weight:700;
  font-size:0.78rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--accent);
}

.shell{
  width:var(--shell);
  margin-inline:auto;
}

/* ---------- background atmosphere ---------- */
.glow{
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  pointer-events:none;
  z-index:0;
  animation:drift 14s ease-in-out infinite;
}

/* ---------- nav ---------- */
header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:40;
  padding:1rem 0 0;
  pointer-events:none;
  transition:padding .3s ease;
}
html.is-scrolled header{padding-top:0;}
.nav{
  pointer-events:auto;
  width:var(--shell);
  margin-inline:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding:0.7rem 1.6rem;
  background:#050604;
  border-radius:24px;
  transition:width .3s ease, border-radius .3s ease, padding .3s ease, box-shadow .3s ease;
  box-shadow:0 1px 0 rgba(245,246,239,0.05) inset, 0 22px 44px -22px rgba(0,0,0,0.8);
}
html.is-scrolled .nav{
  width:100%;
  border-radius:0;
  padding:0.85rem clamp(1.5rem, 4vw, 3rem);
  box-shadow:0 12px 28px -16px rgba(0,0,0,0.55);
}
.nav-links{
  display:flex;
  align-items:center;
  gap:2.1rem;
  font-size:0.92rem;
  color:var(--ink-dim);
}
.nav-links a{
  text-decoration:none;
  transition:color .18s ease;
}
.nav-links a:hover, .nav-links a:focus-visible{color:var(--ink);}
.nav-right{display:flex;align-items:center;gap:1rem;}
.status-chip{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  border:1px solid var(--line-strong);
  border-radius:999px;
  padding:0.4rem 0.85rem 0.4rem 0.65rem;
  font-size:0.78rem;
  color:var(--ink-dim);
  white-space:nowrap;
}
.status-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 3px rgba(221,255,66,0.18);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{opacity:1;}
  50%{opacity:0.45;}
}

/* ---------- motion system ---------- */
@keyframes fadeUp{
  from{opacity:0; transform:translateY(16px);}
  to{opacity:1; transform:translateY(0);}
}
@keyframes popIn{
  from{opacity:0; transform:scale(0.9);}
  to{opacity:1; transform:scale(1);}
}
@keyframes drift{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(18px,-14px) scale(1.05);}
}
@keyframes ringPulse{
  0%{box-shadow:0 0 0 0 rgba(221,255,66,0.35);}
  100%{box-shadow:0 0 0 16px rgba(221,255,66,0);}
}
@keyframes typingBounce{
  0%,60%,100%{transform:translateY(0); opacity:0.5;}
  30%{transform:translateY(-4px); opacity:1;}
}
/* Reveal-on-scroll: hidden only once .js-anim is set (script confirmed it can
   run an observer) and only until each .reveal-group crosses into view — a
   no-JS or reduced-motion visitor simply sees everything already in place. */
.reveal-item{opacity:1; transform:none;}
.js-anim .reveal-group .reveal-item{
  opacity:0; transform:translateY(16px);
  transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);
}
.js-anim .reveal-group.is-visible .reveal-item{opacity:1; transform:translateY(0);}
.js-anim .reveal-group .reveal-pop{
  opacity:0; transform:scale(0.94);
  transition:opacity .5s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1);
}
.js-anim .reveal-group.is-visible .reveal-pop{opacity:1; transform:scale(1);}

.hero-copy .eyebrow{transition-delay:.05s;}
.hero-copy h1{transition-delay:.13s;}
.hero-copy .lede{transition-delay:.22s;}
.hero-copy .hero-cta{transition-delay:.31s;}
.hero-copy .hero-note{transition-delay:.4s;}
.hero-visual .reveal-pop{transition-delay:.3s;}

.how-grid .how-card:nth-child(1){transition-delay:.05s}
.how-grid .how-card:nth-child(2){transition-delay:.16s}
.how-grid .how-card:nth-child(3){transition-delay:.27s}
.stepper .step:nth-child(1){transition-delay:.05s}
.stepper .step:nth-child(2){transition-delay:.16s}
.stepper .step:nth-child(3){transition-delay:.27s}
.stepper .step:nth-child(4){transition-delay:.38s}
.discover-copy .section-head{transition-delay:.05s}
.discover-copy .engine-note{transition-delay:.2s}

/* AI capture — plays out like a live conversation once it scrolls into view */
.js-anim .discover-panel .capture-msg.user,
.js-anim .discover-panel .capture-msg.ai .capture-avatar,
.js-anim .discover-panel .ai-reply .capture-bubble,
.js-anim .discover-panel .capture-result,
.js-anim .discover-panel .typing-dots{opacity:0;}
.js-anim .discover-panel.is-visible .capture-msg.user{animation:fadeUp 0.5s cubic-bezier(.2,.7,.2,1) .3s both;}
.js-anim .discover-panel.is-visible .capture-msg.ai .capture-avatar{animation:popIn 0.4s cubic-bezier(.2,.7,.2,1) .9s both;}
.js-anim .discover-panel.is-visible .ai-reply .capture-bubble{animation:fadeUp 0.5s cubic-bezier(.2,.7,.2,1) 1.4s both;}
.js-anim .discover-panel.is-visible .capture-result:nth-child(1){animation:fadeUp 0.5s cubic-bezier(.2,.7,.2,1) 1.7s both;}
.js-anim .discover-panel.is-visible .capture-result:nth-child(2){animation:fadeUp 0.5s cubic-bezier(.2,.7,.2,1) 1.85s both;}
.js-anim .discover-panel.is-visible .capture-result:nth-child(3){animation:fadeUp 0.5s cubic-bezier(.2,.7,.2,1) 2s both;}
.js-anim .discover-panel.is-visible .typing-dots{animation:typingFade 0.9s ease 1s both;}

.ai-reply{position:relative;}
.typing-dots{
  position:absolute; top:0; left:0;
  display:inline-flex; gap:0.3rem; align-items:center;
  background:rgba(13,16,6,0.045);
  border:1px solid rgba(13,16,6,0.08);
  border-radius:16px;
  padding:0.85rem 1.05rem;
}
.typing-dots span{
  width:6px;height:6px;border-radius:50%;
  background:rgba(13,16,6,0.4);
  animation:typingBounce 1s ease-in-out infinite;
}
.typing-dots span:nth-child(2){animation-delay:.15s}
.typing-dots span:nth-child(3){animation-delay:.3s}
@keyframes typingFade{
  0%,100%{opacity:0;}
  20%,80%{opacity:1;}
}

@media (prefers-reduced-motion:reduce){
  .reveal-item, .reveal-pop{opacity:1 !important; transform:none !important;}
  .glow, .play-btn, .typing-dots, .typing-dots span{animation:none !important;}
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}

.btn-sm{padding:0.65rem 1.15rem; font-size:0.85rem;}

/* ---------- hero ---------- */
.hero{
  position:relative;
  overflow:hidden;
  padding:calc(clamp(2.25rem,4.5vw,3.75rem) + 5.25rem) 0 clamp(2.5rem,5vw,4rem);
}
.hero .glow-a{width:620px;height:620px;background:radial-gradient(circle, rgba(156,171,117,0.32), transparent 70%); top:-260px; left:-160px; animation-duration:16s;}
.hero .glow-b{width:520px;height:520px;background:radial-gradient(circle, rgba(221,255,66,0.14), transparent 70%); top:-40px; right:-140px; animation-duration:11s; animation-delay:-4s;}
.hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.08fr 0.92fr;
  gap:clamp(2.5rem,5vw,4rem);
  align-items:center;
}
.hero h1{
  font-size:clamp(1.85rem,2.6vw + 1rem,2.9rem);
  max-width:19ch;
  margin-top:0.6rem;
}
.hero-copy p.lede{
  margin-top:1.1rem;
  max-width:48ch;
  color:var(--ink-dim);
  font-size:1.02rem;
  line-height:1.6;
}
.hero-cta{
  display:flex;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
  margin-top:1.6rem;
}
.hero-note{
  margin-top:1.1rem;
  font-size:0.85rem;
  color:var(--ink-faint);
  display:flex;
  align-items:center;
  gap:0.5rem;
}
.hero-note .status-dot{width:5px;height:5px;}

/* ---------- device mock ---------- */
.device{
  position:relative;
  background:linear-gradient(165deg, #12160c 0%, var(--bg-deep) 78%);
  border-radius:28px;
  padding:1.1rem;
  max-width:392px;
  margin-inline:auto;
  box-shadow:0 40px 90px -40px rgba(0,0,0,0.75);
  zoom:0.8;
}
.device-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 0.35rem 0.9rem;
}
.device-pill{
  display:inline-flex;
  align-items:center;
  gap:0.45rem;
  background:rgba(221,255,66,0.12);
  border:1.5px solid rgba(221,255,66,0.55);
  border-radius:999px;
  padding:0.4rem 0.9rem;
  font-size:0.75rem;
  font-weight:700;
  color:var(--ink);
}
.device-icons{display:flex; gap:0.45rem;}
.device-icons span{
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(245,246,239,0.06);
  border:1px solid var(--line-strong);
}
.device-icons svg{width:14px;height:14px;stroke:var(--ink-dim);}

.device-media{
  position:relative;
  border-radius:18px;
  aspect-ratio:16/10;
  overflow:hidden;
  background:
    repeating-linear-gradient(128deg, rgba(221,255,66,0.07) 0px, rgba(221,255,66,0.07) 1px, transparent 1px, transparent 26px),
    linear-gradient(200deg, #232b13 0%, #0d0f08 60%, #060704 100%);
}
.device-media .tag{
  position:absolute; top:0.7rem; left:0.7rem;
  background:rgba(10,12,8,0.55);
  border:1px solid rgba(245,246,239,0.18);
  backdrop-filter:blur(6px);
  border-radius:999px;
  padding:0.28rem 0.65rem;
  font-size:0.68rem;
  color:var(--ink);
  display:flex; align-items:center; gap:0.35rem;
}
.play-btn{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:52px;height:52px;border-radius:50%;
  background:var(--accent);
  display:flex;align-items:center;justify-content:center;
  animation:ringPulse 2.4s ease-out infinite;
}
.play-btn svg{width:18px;height:18px;fill:var(--accent-ink); margin-left:2px;}

.device-strip{display:flex; gap:0.35rem; margin-top:0.45rem;}
.device-strip span{
  flex:1; aspect-ratio:1.5; border-radius:7px;
  background:linear-gradient(160deg,#20280f,#0a0c08);
  border:1px solid var(--line);
}
.device-strip span.active{border-color:var(--accent);}

.device-info{padding:0.85rem 0.4rem 0.2rem;}
.tag-pill{
  display:inline-flex; align-items:center; gap:0.4rem;
  background:rgba(221,255,66,0.12);
  border:1.5px solid rgba(221,255,66,0.55);
  color:var(--ink);
  border-radius:999px;
  padding:0.3rem 0.8rem;
  font-size:0.7rem; font-weight:700;
  letter-spacing:0.02em;
  margin-bottom:0.6rem;
}
.tag-pill .dot{width:6px;height:6px;border-radius:50%;background:var(--accent); box-shadow:0 0 0 3px rgba(221,255,66,0.25);}
.device-info .name{font-weight:700; font-size:1rem;}
.device-info .place{
  color:var(--ink-dim); font-size:0.85rem; margin-top:0.2rem;
  display:flex; align-items:center; gap:0.3rem;
}
.device-info .price{
  font-family:'Archivo',sans-serif; font-stretch:expanded; font-weight:800;
  color:var(--accent); font-size:1.35rem; margin-top:0.4rem;
  font-variant-numeric:tabular-nums;
}

.device-chat{
  margin-top:0.9rem;
  background:linear-gradient(160deg, rgba(221,255,66,0.1), var(--bg-deep) 65%);
  border:1.5px solid rgba(221,255,66,0.4);
  border-radius:16px;
  padding:1rem 1.1rem;
  box-shadow:0 12px 28px -18px rgba(221,255,66,0.45);
}
.device-chat .who{
  display:flex; align-items:center; gap:0.45rem;
  font-size:0.7rem; font-weight:800; letter-spacing:0.09em;
  text-transform:uppercase; color:var(--accent);
  margin-bottom:0.5rem;
}
.device-chat .who svg{width:13px;height:13px;}
.device-chat p{font-size:0.92rem; line-height:1.48; font-weight:600; color:var(--ink);}

/* ---------- sections ---------- */
section{position:relative;}
.section-pad{padding:clamp(3.5rem,7vw,5.5rem) 0;}
.section-head{
  max-width:640px;
  margin-bottom:clamp(2.2rem,4vw,3rem);
}
.section-head h2{
  font-size:clamp(1.7rem,2.6vw + 0.6rem,2.5rem);
  margin-top:0.6rem;
}
.section-head p{
  margin-top:1rem;
  color:var(--ink-dim);
  font-size:1.02rem;
  max-width:var(--measure);
}

/* how it works — elevated section */
.how-section{
  background:
    repeating-linear-gradient(115deg, rgba(221,255,66,0.035) 0px, rgba(221,255,66,0.035) 1px, transparent 1px, transparent 34px),
    var(--bg-raised);
  position:relative;
  overflow:hidden;
}
.how-section .glow{
  width:680px;height:680px;
  background:radial-gradient(circle, rgba(221,255,66,0.11), transparent 70%);
  top:-380px; left:50%; transform:translateX(-50%);
}
.how-section .section-head{max-width:720px;}
.how-section .section-head h2{font-size:clamp(1.9rem,3vw + 0.6rem,2.8rem);}

.how-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.25rem;
}
.how-card{
  background:#050604;
  border-radius:22px;
  padding:2.25rem 1.9rem;
  transition:background .2s ease, transform .2s ease;
}
.how-card:hover{background:#0a0c08; transform:translateY(-3px);}
.how-card .step-no{
  display:block;
  font-family:'Archivo',sans-serif;
  font-stretch:expanded;
  font-weight:800;
  font-size:0.76rem;
  letter-spacing:0.14em;
  color:var(--accent);
  margin-bottom:1rem;
}
.icon-badge{
  width:46px;height:46px;border-radius:50%;
  background:var(--bg-deep);
  border:1px solid rgba(221,255,66,0.35);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:1.1rem;
}
.icon-badge svg{width:21px;height:21px; stroke:var(--accent); fill:none;}
.how-card h3{
  font-family:'DM Sans',sans-serif;
  font-stretch:normal;
  font-weight:700;
  font-size:1.12rem;
  letter-spacing:0;
}
.how-card p{
  margin-top:0.6rem;
  color:var(--ink-dim);
  font-size:0.94rem;
  line-height:1.55;
}

/* discovery — dark section, lime card holds all the content */
.discover-panel{
  background:linear-gradient(135deg, #ebfd82 0%, #ddff42 55%, #d7f322 100%);
  border-radius:32px;
  padding:clamp(1.75rem,4vw,3.25rem);
}
.discover-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem,4vw,3.5rem);
  align-items:center;
}
.discover-copy{color:#0d1006;}
.discover-copy .eyebrow{color:rgba(13,16,6,0.62);}
.discover-copy .section-head{margin-bottom:1.75rem;}
.discover-copy .section-head p{color:rgba(13,16,6,0.68);}
.discover-copy .engine-note{margin-top:0;}
.discover-copy .engine-note span{
  border-color:rgba(13,16,6,0.28);
  color:rgba(13,16,6,0.72);
}

/* AI capture — light mode, sits naturally inside the lime card */
.capture-card{
  background:#fff;
  border:1px solid rgba(13,16,6,0.08);
  border-radius:22px;
  padding:clamp(1.5rem,3vw,2.25rem);
  display:flex;
  flex-direction:column;
  gap:1.1rem;
  box-shadow:0 24px 48px -28px rgba(13,16,6,0.4);
}
.capture-msg{display:flex; gap:0.8rem; max-width:600px;}
.capture-msg.user{align-self:flex-end; flex-direction:row-reverse; max-width:520px;}
.capture-avatar{
  width:34px;height:34px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:rgba(13,16,6,0.06); border:1px solid rgba(13,16,6,0.12);
}
.capture-avatar svg{width:16px;height:16px;}
.capture-msg.ai .capture-avatar{background:var(--accent); border-color:var(--accent);}
.capture-msg.ai .capture-avatar svg{stroke:#0d1006;}
.capture-msg.user .capture-avatar svg{stroke:rgba(13,16,6,0.65);}
.capture-bubble{
  background:rgba(13,16,6,0.045);
  border:1px solid rgba(13,16,6,0.08);
  border-radius:16px;
  padding:0.85rem 1.05rem;
  font-size:0.95rem;
  line-height:1.5;
  color:#1a1a1a;
}
.capture-msg.user .capture-bubble{background:rgba(13,16,6,0.06);}
.capture-msg.ai .capture-bubble{background:rgba(221,255,66,0.14); border-color:rgba(221,255,66,0.4);}
.capture-results{margin-top:0.85rem; display:flex; flex-direction:column; gap:0.55rem;}
.capture-result{
  display:flex; align-items:center; gap:0.85rem;
  border:1px solid rgba(13,16,6,0.1);
  border-radius:14px;
  padding:0.6rem 0.9rem;
  transition:border-color .2s ease;
}
.capture-result:hover{border-color:rgba(13,16,6,0.22);}
.capture-swatch{width:42px;height:42px;border-radius:10px; flex:none;}
.capture-swatch.c1{background:linear-gradient(160deg,#3a4a1f,#161a0f);}
.capture-swatch.c2{background:linear-gradient(160deg,#2b3a1f,#161a0f);}
.capture-swatch.c3{background:linear-gradient(160deg,#243318,#10140a);}
.capture-result .info{flex:1;}
.capture-result .place{font-weight:700; font-size:0.92rem; color:#1a1a1a;}
.capture-result .zone{color:rgba(13,16,6,0.55); font-size:0.8rem; margin-top:0.1rem;}
.capture-result .go{color:rgba(13,16,6,0.35); font-size:1.1rem;}

.engine-note{
  margin-top:2rem;
  display:flex;
  flex-wrap:wrap;
  gap:0.6rem;
}
.engine-note span{
  border:1px solid var(--line-strong);
  border-radius:999px;
  padding:0.4rem 0.85rem;
  font-size:0.78rem;
  color:var(--ink-dim);
}

/* status / proximamente */
.status-section{
  position:relative;
  overflow:hidden;
  background:linear-gradient(150deg, #1a2210 0%, #0a0c08 52%, #000000 100%);
}
.status-section .glow{width:560px;height:560px; background:radial-gradient(circle, rgba(221,255,66,0.16), transparent 70%); top:-220px; right:-120px;}
.status-wrap{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem,5vw,4rem);
  align-items:start;
}
.status-wrap h2{font-size:clamp(1.7rem,2.6vw + 0.6rem,2.4rem);}
.status-wrap .lede{margin-top:1.1rem; color:var(--ink-dim); max-width:var(--measure); font-size:1.02rem;}
.status-wrap .lede + .lede{margin-top:0.9rem;}

.stepper{
  display:flex;
  flex-direction:column;
  gap:0;
}
.step{
  display:flex;
  gap:0.9rem;
  padding-bottom:1.5rem;
  position:relative;
}
.step:not(:last-child)::before{
  content:"";
  position:absolute;
  left:9px; top:22px; bottom:0;
  width:1px;
  background:var(--line-strong);
}
.step .dot{
  width:19px;height:19px;border-radius:50%;
  border:1.5px solid var(--line-strong);
  flex:none;
  display:flex;align-items:center;justify-content:center;
  margin-top:2px;
}
.step.done .dot{border-color:var(--accent-deep); background:rgba(156,171,117,0.15);}
.step.current .dot{border-color:var(--accent); background:var(--accent);}
.step.current .dot::after{content:""; width:6px;height:6px;border-radius:50%; background:var(--accent-ink);}
.step .label{font-weight:700; font-size:0.96rem;}
.step.current .label{color:var(--accent);}
.step .desc{color:var(--ink-dim); font-size:0.85rem; margin-top:0.15rem;}
.step:not(.current):not(.done) .label{color:var(--ink-dim); font-weight:700;}

.store-row{
  position:relative; z-index:1;
  margin-top:clamp(2rem,4vw,3rem);
  text-align:center;
}
#espera.status-section{padding-bottom:clamp(2rem,4vw,3rem);}
.store-label{
  font-family:'Archivo',sans-serif; font-stretch:expanded; font-weight:700;
  font-size:0.76rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink-faint);
}
.store-badges{display:flex; flex-wrap:wrap; justify-content:center; gap:0.9rem; margin-top:1rem;}
.store-badge{
  display:inline-flex; align-items:center; gap:0.65rem;
  border:1px solid var(--line-strong);
  border-radius:12px;
  padding:0.55rem 1.1rem;
  color:var(--ink-faint);
  opacity:0.65;
}
.store-badge svg{width:22px; height:22px; fill:currentColor; flex:none;}
.store-badge span{display:flex; flex-direction:column; line-height:1.2;}
.store-badge em{font-style:normal; font-size:0.62rem; letter-spacing:0.02em;}
.store-badge span{font-weight:700; font-size:0.92rem;}

/* contact */
.contact-card{
  background:var(--bg-raised);
  border-radius:26px;
  padding:clamp(2rem,4vw,3rem);
  display:grid;
  grid-template-columns:1.3fr auto;
  align-items:center;
  gap:2rem;
}
.contact-card h2{font-size:clamp(1.5rem,2vw + 0.8rem,2rem);}
.contact-card p{margin-top:0.85rem; color:var(--ink-dim); max-width:52ch;}
.mail-btn svg{width:16px;height:16px; stroke:currentColor; fill:none;}

/* footer */
footer{
  padding:2.6rem 0;
}
.foot-wrap{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:1.5rem;
}
.foot-logo{
  display:flex;
  align-items:center;
  gap:0.65rem;
}
.foot-logo .logo-mark{height:20px;}
.foot-logo .global{
  font-family:'DM Sans',sans-serif;
  font-weight:700;
  font-size:0.62rem;
  letter-spacing:0.22em;
  color:var(--ink-faint);
}
.foot-copy{color:var(--ink-faint); font-size:0.82rem; margin-top:0.6rem;}
.foot-links{display:flex; gap:1.6rem; font-size:0.85rem; color:var(--ink-dim);}
.foot-links a{text-decoration:none;}
.foot-links a:hover{color:var(--ink);}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;}
  .device{margin-top:1rem;}
  .how-grid{grid-template-columns:1fr 1fr;}
  .discover-grid{grid-template-columns:1fr; gap:2.5rem;}
  .status-wrap{grid-template-columns:1fr;}
  .contact-card{grid-template-columns:1fr; text-align:left;}
  .nav-links{display:none;}
}
@media (max-width:620px){
  .how-grid{grid-template-columns:1fr;}
  .hero h1{max-width:none;}
  .hero-cta{flex-direction:column; align-items:stretch;}
  .hero-cta .btn{width:100%;}
  .foot-wrap{flex-direction:column;}
  .capture-msg, .capture-msg.user{max-width:100%;}
}

@media (prefers-reduced-motion:reduce){
  .status-dot{animation:none;}
}