/* How it works (how-it-works.html, 2026-11-08). Sits on top of css/home.css: the same header, steps (.wire), FAQ,
   closing section and footer; this file adds the page's own hero, the "What stays yours" cards and the closing links.
   Nothing here changes size while it animates (the only motion is home.css's switches and spark, fixed in size). */

/* hero: plain headline on the left, an example draft (made-up restaurant) on the right */
.hw-hero{position:relative;padding:128px var(--gut) clamp(64px,8vw,104px);overflow:hidden;background:
  radial-gradient(70% 55% at 50% 100%,rgba(255,46,136,.22),transparent 70%),
  radial-gradient(40% 30% at 85% 20%,rgba(76,92,190,.28),transparent 70%),
  linear-gradient(#070B1D,var(--ink) 70%)}
.hw-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center;max-width:1240px;margin:0 auto}
.hw-hero h1{margin-top:10px;font-family:var(--neon);font-weight:400;font-size:clamp(3rem,6.4vw,6rem);line-height:1;letter-spacing:-.01em;color:var(--cream);text-shadow:var(--glow-cream)}
.hw-hero h1 .w2{display:inline-block;color:#FFD3E6;text-shadow:var(--glow)}
.hw-hero .sub{margin-top:22px;max-width:40ch;font-size:clamp(1.08rem,1.5vw,1.25rem);color:var(--text)}

.hw-shot{position:relative}
.hw-shot .frames{position:relative;padding-right:clamp(48px,7vw,92px)}
.hw-shot .desk{border-radius:12px;overflow:hidden;background:#0E1330;border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 60px -28px rgba(0,0,0,.9),0 0 60px -20px rgba(255,46,136,.35)}
.hw-shot .bar{display:flex;gap:6px;padding:9px 11px;background:#1E2550}
.hw-shot .bar i{width:9px;height:9px;border-radius:50%;background:#4A5390}
.hw-shot .bar i:first-child{background:var(--pink)}
/* trimmed a little at the bottom so the made-up phone line under the fold stays out of view */
.hw-shot .desk img{width:100%;aspect-ratio:16/9.4;object-fit:cover;object-position:top}
.hw-shot .ph{position:absolute;right:0;bottom:-28px;width:clamp(96px,11vw,150px);border-radius:20px;padding:5px;background:#05081A;border:1px solid rgba(255,255,255,.2);box-shadow:-14px 20px 40px -12px rgba(0,0,0,.9)}
.hw-shot .ph img{width:100%;aspect-ratio:390/700;object-fit:cover;object-position:top;border-radius:15px}
.hw-shot figcaption{margin-top:44px;font-size:.92rem;color:var(--muted)}

/* the four steps reuse home.css's .how/.wire; a little room for the longer heading */
#steps .big{max-width:14ch}

/* what stays yours */
.yours{background:radial-gradient(60% 50% at 50% 0,rgba(76,92,190,.2),transparent 70%),#121839}
.keep{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:44px}
.keep li{padding:24px 22px 26px;border-radius:20px;background:var(--ink2);border:1px solid var(--line)}
.keep svg{width:36px;height:36px;filter:drop-shadow(0 0 8px rgba(255,46,136,.55))}
.keep h3{margin-top:16px;font-family:var(--marq);font-weight:800;text-transform:uppercase;font-size:1.6rem;line-height:1;color:var(--cream)}
.keep p{margin-top:10px;font-size:1rem;color:var(--muted)}

/* the FAQ follows "What stays yours", so it takes the darker ground */
.hw .faq{background:var(--ink)}

/* closing: one main action (their email), then the free-redesign link for another business */
.hw .final .sign-big{font-size:clamp(3.6rem,11vw,8.5rem)}
.hw-acts{display:flex;justify-content:center;margin-top:30px}
.hw .final .fine{margin:18px auto 0;max-width:46ch;color:var(--muted)}
.hw .final a:not(.btn){color:var(--text);text-decoration-color:rgba(255,46,136,.7);text-underline-offset:3px}
.hw .final a:not(.btn):hover{color:var(--pink)}
.hw-other{margin:40px auto 0;padding-top:26px;max-width:520px;border-top:1px solid var(--line);font-size:1.05rem;color:var(--muted)}
.hw-other a{font-weight:700;white-space:nowrap}
.hw footer{padding-bottom:56px}

@media (max-width:1040px){
  .hw-grid{grid-template-columns:1fr}
  .hw-shot{max-width:640px}
  .keep{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .hw-hero{padding-top:96px}
  .hw-hero h1{font-size:clamp(2.7rem,12.5vw,3.4rem)}
  .hw-hero .sub{margin-top:16px;font-size:1.05rem}
  .hw-hero .chips{display:flex;font-size:.9rem;gap:8px 14px;margin-top:18px}
  .hw-shot .frames{padding-right:56px}
  .hw-shot .ph{width:92px;border-radius:15px;padding:4px;bottom:-22px}
  .hw-shot .ph img{border-radius:11px}
  .hw-shot figcaption{margin-top:34px}
  .keep{grid-template-columns:1fr;gap:12px;margin-top:30px}
  .keep li{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;padding:18px}
  .keep svg{grid-row:span 2;width:30px;height:30px;margin-top:2px}
  .keep h3{margin-top:0;font-size:1.4rem}
  .keep p{margin-top:0}
  .hw-acts .btn{width:100%}
}