/* Product-first presentation; retain the landing's existing brand tokens. */
.hero{padding-bottom:64px}
.hero-mark{width:84px;margin-bottom:24px}
.hero-inner{align-items:center}
.hero-showcase{width:min(350px,100%);margin:0;justify-self:center}

.product-screen{position:relative;display:block;min-width:0;overflow:hidden;background:#090d0b;isolation:isolate}
.product-screen img{width:100%;height:auto}
.product-phone{width:min(350px,100%);margin-inline:auto;border:5px solid #171d1a;border-radius:32px;box-shadow:0 0 0 1px rgba(255,255,255,.24),0 24px 64px rgba(0,0,0,.35)}
.product-phone img{aspect-ratio:402/874;border-radius:26px}
.product-phone-pair{display:grid;gap:24px;justify-items:center}
.agent-screens{width:min(724px,100%);margin-inline:auto}
.agent-screens figure{margin:0;min-width:0;width:100%}
.agent-screens figcaption{margin:16px 0 0;color:var(--muted);font-size:.9rem;line-height:1.5;text-align:center}


.product-intro{max-width:780px}
.product-stories{display:grid;gap:52px}
#game .screen-grid{gap:44px}
#game .section-head{margin-bottom:0}
.product-story{display:grid;gap:24px;min-width:0;align-items:center}
.product-story-copy{min-width:0}
.product-story-copy h3{margin:14px 0 16px;font-family:var(--display);font-size:clamp(2.4rem,4.2vw,3.4rem);font-weight:800;line-height:.98;letter-spacing:-.01em;text-transform:uppercase;text-wrap:balance}
.product-story-copy p{max-width:460px;margin:0;color:var(--muted);font-size:1rem;line-height:1.65}
.product-step{font-family:var(--mono);font-size:13px;line-height:1.5;color:var(--accent);text-transform:uppercase;letter-spacing:.035em}
.product-detail-list{display:flex;flex-wrap:wrap;gap:8px 18px;margin:22px 0 0;padding:0;list-style:none;color:var(--soft);font-family:var(--mono);font-size:12px;line-height:1.6;text-transform:uppercase}
.product-detail-list li{display:flex;align-items:center;gap:7px}
.product-detail-list li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--accent)}
.product-story figure{margin:0;min-width:0}
.product-story figcaption{margin:16px 2px 0;color:var(--soft);font-size:.82rem;line-height:1.5;text-align:center}
.product-story-note{font-size:.82rem!important;color:var(--soft)!important;margin-top:16px!important}
.how-steps{display:grid;align-items:start;gap:0;margin:0;padding:0;list-style:none;counter-reset:step;border-top:1px solid var(--line)}
.how-steps li{position:relative;counter-increment:step;padding:24px 0;border-bottom:1px solid var(--line)}
.how-steps li::before{content:"0" counter(step);display:block;margin-bottom:14px;color:var(--accent);font-family:var(--mono);font-size:14px;line-height:1.5}
.how-steps h3{margin:0 0 10px;font-family:var(--display);font-size:2rem;line-height:1;text-transform:uppercase}
.how-steps p{margin:0;max-width:300px;color:var(--muted);line-height:1.6}
.how-invite{margin:24px 0 0;min-width:0}
@media(min-width:760px){
  .product-phone-pair{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero{padding-top:124px}
  .hero-mark{width:92px}
  .product-stories{gap:72px}
  .product-story{grid-template-columns:minmax(0,.8fr) minmax(0,1.55fr);gap:44px}
  .product-story.reverse{grid-template-columns:minmax(0,1.55fr) minmax(0,.8fr)}
  .product-story.reverse .product-story-copy{order:2}

  .how-steps li{padding:28px 0}
}
@media(min-width:1040px){
  .how-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
  .hero-inner{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:52px}
  .hero h1{font-size:clamp(3.2rem,5.7vw,5rem)}
}
@media(max-width:390px){
  .hero-mark{width:72px;margin-bottom:20px}

}