/* How It Works Section Styles */
:root {
  --hiw-brand: var(--color-accent, #4f46e5);
  --hiw-text: var(--color-text, #0f172a);
  --hiw-text-dim: var(--color-text-dim, #475569);
  --hiw-muted: rgba(99,102,241,0.06);
  --hiw-card: var(--card-bg, #ffffff);
  --hiw-radius: 14px;
  --hiw-shadow: 0 2px 4px rgba(15,23,42,.08), 0 4px 18px -6px rgba(15,23,42,.18);
  --hiw-shadow-hover: 0 4px 10px rgba(15,23,42,.10), 0 8px 28px -8px rgba(15,23,42,.25);
}
[data-theme="dark"] {
  --hiw-text: #f1f5f9;
  --hiw-text-dim: #94a3b8;
  --hiw-muted: rgba(99,102,241,0.12);
  --hiw-card: #121a24;
  --hiw-shadow: 0 2px 4px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04) inset;
  --hiw-shadow-hover: 0 6px 18px -6px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.06) inset;
}

#how-it-works { position:relative; }
#how-it-works .wrapper { max-width:1400px; margin:0 auto; padding: clamp(2.5rem,6vw,4.5rem) clamp(1rem,4vw,3rem); }
#how-it-works h2 { font-size:clamp(1.9rem,3.3vw,2.4rem); letter-spacing:.5px; margin:0 0 .35rem; font-weight:650; }
#how-it-works .subhead { font-size:clamp(.95rem,1.2vw,1.05rem); color:var(--hiw-text-dim); margin:0 0 1.9rem; }

#how-it-works .steps { display:grid; gap:clamp(1.1rem,2vw,2.2rem); grid-template-columns:1fr; }
@media (min-width: 640px){
  #how-it-works .steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width: 1080px){
  #how-it-works .steps { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

#how-it-works .card { display:flex; flex-direction:column; background:linear-gradient(180deg,var(--hiw-card),var(--hiw-card)) padding-box, linear-gradient(140deg,rgba(99,102,241,.15),rgba(120,70,255,.06)) border-box; border:1px solid rgba(99,102,241,.20); border-radius:var(--hiw-radius); padding:1.35rem 1.3rem 1.4rem; position:relative; box-shadow:var(--hiw-shadow); min-height:100%; isolation:isolate; }
#how-it-works .card::before { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; background:radial-gradient(circle at 30% 20%, rgba(99,102,241,.18), transparent 60%); transition:opacity .4s ease; }
#how-it-works .card:hover::before { opacity:1; }
#how-it-works .card:hover { box-shadow:var(--hiw-shadow-hover); }
@media (prefers-reduced-motion: no-preference){
  #how-it-works .card { transition: box-shadow .35s cubic-bezier(.4,.2,.2,1), transform .35s cubic-bezier(.4,.2,.2,1); }
  #how-it-works .card:hover { transform:translateY(-4px); }
}

#how-it-works .badge { width:46px; height:46px; display:flex; align-items:center; justify-content:center; font:600 .95rem/1 var(--font-sans); background:linear-gradient(135deg,var(--hiw-brand),#7c3aed 55%,#ec4899); color:#fff; border-radius:50%; box-shadow:0 4px 14px -6px rgba(99,102,241,.65), 0 0 0 1px rgba(255,255,255,.12) inset; margin:0 0 1rem; position:relative; }
#how-it-works .badge::after { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(135deg,#ffffff55,#ffffff00); mix-blend-mode:overlay; opacity:.7; }

#how-it-works .icon { width:40px; height:40px; margin:0 0 1rem; color:var(--hiw-brand); }
#how-it-works h3 { margin:0 0 .55rem; font-size:clamp(1.02rem,1.4vw,1.18rem); letter-spacing:.3px; font-weight:600; color:var(--hiw-text); }
#how-it-works p { margin:0 0 .95rem; font-size:.85rem; line-height:1.4; color:var(--hiw-text-dim); }
#how-it-works .media { position:relative; width:100%; aspect-ratio:16 / 9; background:var(--hiw-muted); border:1px dashed rgba(99,102,241,0.35); border-radius:calc(var(--hiw-radius) - 4px); display:flex; align-items:center; justify-content:center; font-size:.65rem; color:var(--hiw-text-dim); margin:.2rem 0 1.1rem; overflow:hidden; }
#how-it-works .media > .media-inner { position:relative; width:100%; height:100%; display:flex; }
#how-it-works .media img, #how-it-works .media video, #how-it-works .media picture { width:100%; height:100%; object-fit:cover; display:block; }
#how-it-works .media .placeholder-text { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-transform:uppercase; font-size:.6rem; letter-spacing:.06em; background:linear-gradient(0deg,rgba(0,0,0,.45),rgba(0,0,0,.25)); color:var(--hiw-text-dim); }

#how-it-works .try-link { margin-top:auto; align-self:flex-start; font:600 .72rem/1 var(--font-sans); letter-spacing:.08em; text-transform:uppercase; color:var(--hiw-brand); background:transparent; border:none; padding:0; position:relative; cursor:pointer; display:inline-flex; gap:.35rem; align-items:center; }
#how-it-works .try-link::after { content:""; position:absolute; left:0; bottom:-2px; width:100%; height:1px; background:currentColor; transform:scaleX(.4); transform-origin:left; transition:transform .4s ease; }
#how-it-works .try-link:hover::after, #how-it-works .try-link:focus-visible::after { transform:scaleX(1); }
#how-it-works .try-link:focus-visible { outline:2px solid var(--hiw-brand); outline-offset:3px; border-radius:4px; }

/* Dark mode tune */
[data-theme="dark"] #how-it-works .card { background:linear-gradient(180deg,var(--hiw-card),var(--hiw-card)) padding-box, linear-gradient(140deg,rgba(99,102,241,.25),rgba(120,70,255,.08)) border-box; border:1px solid rgba(99,102,241,.32); }
[data-theme="dark"] #how-it-works .media { background:rgba(255,255,255,.04); }

/* Accessibility helpers */
#how-it-works .card:focus-within { outline:2px solid var(--hiw-brand); outline-offset:4px; }

/* Equal height assurance (already flex-column with margin-top:auto on try-link) */

/* Reduced motion preference (lift disabled above) */
@media (prefers-reduced-motion: reduce){
  #how-it-works .card { transition:none; }
}