/* Noncritical styles; keep small. Real images will replace placeholders. */
.hero-visual img,
.step-visual img {
  background: linear-gradient(135deg, #0d1117, #0a0c10);
}

.cta-badge:hover {
  border-color: #3a3f47;
}

.faq details[open] {
  border-color: #2d323a;
}

/* Visual polish: depth, hierarchy, and micro‑interactions with no new requests */
:root{
  --radius: 16px;
  --g1: #13b1a8;
  --g2: #2563eb;
  --shadow-card: 0 8px 24px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.03) inset;
}

/* Typographic hierarchy */
.h1{ text-wrap: balance; letter-spacing:-0.015em; }
.h1 .accent{
  background: linear-gradient(90deg,var(--g1),var(--g2));
  -webkit-background-clip:text; background-clip:text; color: transparent;
}
.subhead{ color:#d6d9df; line-height:1.5; }

/* More breathing room on desktop */
@media (min-width:720px){
  .hero{ padding: 56px 0 16px; }
  .section{ padding: 48px 0; }
}

/* Hero focus glow (CSS-only, no images) */
.hero{ position: relative; }
.hero::before{
  content:""; position:absolute; inset:-120px 0 auto; height:420px; z-index:-1; pointer-events:none;
  background:
    radial-gradient(50% 60% at 50% 20%, color-mix(in oklab, var(--g1) 22%, transparent) 0%, transparent 70%),
    radial-gradient(40% 50% at 60% 10%, color-mix(in oklab, var(--g2) 16%, transparent) 0%, transparent 65%);
  filter: blur(24px);
}

/* Screenshot cards: unified radius + depth */
.hero-visual, .step-visual{
  border-radius: var(--radius);
  border: 1px solid #1c2026;
  box-shadow: var(--shadow-card);
  background: #0f1113;
}

/* CTA emphasis that respects store badge guidelines */
.cta-row{ position:relative; isolation:isolate; }
.cta-row::before{
  content:""; position:absolute; inset:-8px; z-index:-1; border-radius:20px;
  background: radial-gradient(60% 120% at 50% 50%, color-mix(in oklab,var(--g2) 14%, transparent) 0%, transparent 70%);
  opacity:.5; filter: blur(14px);
}
.cta-badge{ transition: transform .18s ease; }
.cta-badge:hover{ transform: translateY(-1px); }

/* Benefits: scannable grid + gradient checkmarks (no network) */
.bullets{
  display:grid; gap:12px; margin-top:12px; grid-template-columns:1fr;
}
@media (min-width:760px){
  .bullets{ grid-template-columns:1fr 1fr; }
}
.bullets p{
  display:flex; gap:10px; align-items:flex-start; color: var(--muted);
}
.bullets p::before{
  content:""; flex:0 0 18px; width:18px; height:18px; margin-top:2px; border-radius:4px;
  background: linear-gradient(135deg,var(--g1),var(--g2));
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M9.2 16.6 4.8 12.2l1.4-1.4 3 3 8.6-8.6 1.4 1.4z"/></svg>') center/16px 16px no-repeat;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M9.2 16.6 4.8 12.2l1.4-1.4 3 3 8.6-8.6 1.4 1.4z'/></svg>") center/16px 16px no-repeat;
}

/* Numbered steps for instant sequence clarity */
.how-steps{ counter-reset: step; }
.step{ position:relative; padding-top:8px; }
.step p{ position: relative; margin:0; padding-left:34px; }
.step p::before{
  counter-increment: step; content: counter(step);
  position:absolute; left:0; top:2px; width:24px; height:24px;
  display:grid; place-items:center; font-weight:700; font-size:12px; color:#0b0b0c;
  background: linear-gradient(135deg,var(--g1),var(--g2));
  border-radius:6px;
}

/* Revised placement: align chip beside text below the image using CSS Grid */
.step{ grid-template-columns: 28px 1fr; grid-column-gap: 10px; grid-row-gap: 8px; }
.step-visual{ grid-column: 1 / -1; grid-row: 1; }
.step p{ grid-column: 2; grid-row: 2; padding-left: 0; }
.step p::before{ content: none !important; }
.step::before{
  grid-column: 1; grid-row: 2;
  counter-increment: step; content: counter(step);
  width:24px; height:24px; margin-top:2px;
  display:grid; place-items:center; font-weight:700; font-size:12px; color:#0b0b0c;
  background: linear-gradient(135deg,var(--g1),var(--g2));
  border-radius:6px;
}

/* Section headings: subtle accent rule */
h2{ position:relative; padding-bottom:6px; }
h2::after{
  content:""; display:block; width:44px; height:2px; margin-top:8px; border-radius:2px;
  background: linear-gradient(90deg,var(--g1),var(--g2)); opacity:.85;
}

/* FAQ affordance and polish */
details{ transition: border-color .2s ease, background-color .2s ease; }
details summary{ user-select:none; }
details summary:hover{ color: var(--accent); }
details[open]{ border-color:#2d323a; background:#0f1318; }

/* Sticky CTA elevation + QR card refinement */
#sticky-cta{ box-shadow: 0 -14px 30px rgba(0,0,0,.35); }
.desktop-qr .qr-box{
  border-radius: var(--radius);
  border: 1px solid #2b313a;
  background: linear-gradient(180deg, #0e1114, #0d0f12);
}

/* Gentle entrance motion (respects reduced motion) */
@media (prefers-reduced-motion: no-preference){
  .hero .h1, .subhead, .hero-visual, .cta-row{
    opacity:0; transform: translateY(6px);
    animation: rise .5s ease-out both;
  }
  .hero .h1{ animation-delay:.02s; }
  .subhead{ animation-delay:.08s; }
  .hero-visual{ animation-delay:.14s; }
  .cta-row{ animation-delay:.20s; }
  @keyframes rise{ to{ opacity:1; transform:none; } }
}

/* Better focus indicators (keeps your current .cta-badge:focus-visible) */
a:focus-visible, summary:focus-visible{
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px;
}

/* Subtle section divider polish */
.section{ border-top-color: rgba(255,255,255,0.05); }