/* Landing page */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V4
 * Nike reference: generous spacing, oversized type, flat surfaces. Existing app tokens retained. */
.app.landing { --shell:1200px; }
.welcome { flex:1; padding:20px 24px 40px; }
.wtop { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; }
.mark { font:800 1.15rem var(--display); letter-spacing:-.04em; display:inline-flex; align-items:center; gap:10px; }
.mark img { display:block; flex:none; }
.wtop .acts { display:flex; align-items:center; gap:8px; }
.themebtn { min-height:44px; padding:8px 12px; border-radius:999px; border:0; background:var(--soft); color:var(--text); font:500 .85rem var(--sans); cursor:pointer; display:inline-flex; align-items:center; gap:8px; }
.themebtn i { width:16px; height:16px; border-radius:50%; background:conic-gradient(var(--bg) 0 50%,var(--text) 0); box-shadow:0 0 0 1.5px var(--text); }
.signin { min-height:44px; padding:8px 12px; border:0; background:transparent; color:var(--text); font:600 .85rem var(--sans); cursor:pointer; }
.landing-hero { display:grid; gap:36px; padding:60px 0 48px; }
.hero2 h1 { font:800 clamp(3.5rem,12vw,6.4rem)/.94 var(--display); letter-spacing:-.035em; margin:18px 0 24px; max-width:11ch; overflow-wrap:anywhere; }
.hero2 .sub { font-size:1.05rem; line-height:1.6; max-width:36ch; color:var(--muted); }
.hero2 .row { margin-top:28px; display:flex; flex-wrap:wrap; align-items:center; gap:8px 24px; }
.welcome .cta { width:auto; padding:0 28px; background:var(--text); color:var(--bg); white-space:nowrap; }
.welcome .cta:hover, .signin:hover { opacity:.8; }
.textlink { display:inline-flex; align-items:center; min-height:44px; color:var(--text); font:600 .9rem var(--sans); text-underline-offset:5px; }
.fine { font:400 .8rem/1.5 var(--sans); color:var(--muted); }
.hero2 > .fine { margin-top:16px; }
.example { min-width:0; align-self:center; }
.example-nav { display:flex; border-bottom:1px solid var(--line); gap:18px; }
.example-nav button { padding:12px 0; min-height:44px; border:0; border-bottom:2px solid transparent; margin-bottom:-1px; background:transparent; color:var(--muted); cursor:pointer; font:600 .86rem var(--sans); white-space:nowrap; }
.example-nav button[aria-pressed=true] { color:var(--text); border-bottom-color:var(--text); }
.example-stage { margin-top:18px; min-height:360px; background:var(--surface2); position:relative; padding:24px; display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
.example-stage .sample-label { color:var(--muted); font:600 .7rem var(--sans); text-transform:uppercase; letter-spacing:.12em; }
.sample-question { font:800 clamp(1.8rem,5vw,2.7rem)/1.12 var(--display); letter-spacing:-.035em; margin:28px 0 20px; text-wrap:balance; }
.sample-seats { display:flex; gap:8px; align-items:center; margin-top:22px; color:var(--muted); font-size:.78rem; flex-wrap:wrap; }
.sample-seats i { width:30px; height:30px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; background:var(--surface); color:var(--text); font:600 .7rem var(--sans); font-style:normal; }
.example-stage .btn { align-self:flex-start; background:var(--surface); margin-top:12px; }
.sample-wave { width:100%; height:72px; color:var(--accent-text); margin:16px 0; }
.sample-quote { font:500 clamp(1.15rem,3vw,1.45rem)/1.5 var(--sans); margin:20px 0; }
.sample-transcript { background:var(--surface); border-left:3px solid var(--accent); padding:16px; font-size:.9rem; color:var(--text); }
.sample-transcript small { display:block; font-size:.7rem; color:var(--muted); margin-bottom:8px; }
.sample-spread { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); border:1px solid var(--line); margin-top:18px; background:var(--surface); min-height:270px; }
.sample-spread > div { padding:18px 14px; min-width:0; display:flex; flex-direction:column; }
.sample-spread > div + div { border-left:1px solid var(--line); }
.sample-spread h3 { font:800 clamp(1.5rem,4vw,2.2rem)/1 var(--display); letter-spacing:-.045em; margin:12px 0; overflow-wrap:anywhere; }
.sample-spread p { font:400 .7rem/1.7 var(--sans); }
.sample-spread .page-no { margin-top:auto; padding-top:16px; color:var(--muted); font-size:.6rem; }
.sample-spread .recipe { background:var(--accent); color:var(--on-accent); padding:14px; margin:12px 0; }
.sample-spread .recipe b { display:block; font:800 1.25rem/1 var(--display); margin-bottom:12px; }
.landing-how { display:grid; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.landing-how > div { padding:24px 0; }
.landing-how > div + div { border-top:1px solid var(--line); }
.landing-how .number { font:800 2.5rem/1 var(--num); color:var(--accent-text); }
.landing-how h2 { font:700 1.2rem var(--display); margin:12px 0 6px; letter-spacing:-.02em; }
.landing-how p { font-size:.92rem; color:var(--muted); max-width:32ch; }
.landing-games { display:grid; gap:28px; padding:60px 0; align-items:center; }
.welcome h2.section-title { font:800 clamp(2.2rem,6vw,3.7rem)/1.02 var(--display); letter-spacing:-.045em; max-width:15ch; margin:14px 0; overflow-wrap:anywhere; }
.landing-games p { color:var(--muted); max-width:38ch; }
.game-sample { padding:24px; background:var(--surface2); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:20px; }
.game-sample svg { width:100%; height:auto; background:var(--surface); }
.game-sample b { font:800 1.5rem var(--display); display:block; }
.game-sample p { font-size:.8rem; margin:8px 0; }
.game-sample .fine { margin-top:16px; }
.future-note { border-top:1px solid var(--line); display:grid; gap:12px; padding:32px 0; }
.future-note h2 { font:700 1.3rem var(--display); letter-spacing:-.02em; }
.future-note p { color:var(--muted); font-size:.94rem; max-width:60ch; }
.faq { border-bottom:1px solid var(--line); margin-top:24px; }
.faq details { border-top:1px solid var(--line); }
.faq summary { cursor:pointer; list-style:none; padding:20px 0; font-weight:600; min-height:44px; display:flex; justify-content:space-between; gap:20px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; color:var(--muted); }
.faq details[open] summary::after { content:"−"; }
.faq p { color:var(--muted); padding:0 0 20px; max-width:60ch; font-size:.92rem; }
.endcta { padding:60px 0; display:grid; gap:24px; justify-items:start; }
.foot { border-top:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px; padding:20px 0 0; color:var(--muted); font-size:.8rem; }
.foot button, .foot a { background:none; border:0; padding:0; font:inherit; color:inherit; text-decoration:underline; cursor:pointer; min-height:44px; display:inline-flex; align-items:center; }
@media (min-width:768px) {
  .welcome { padding:28px 48px 36px; }
  .landing-hero { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; padding:80px 0 64px; }
  .hero2 h1 { font-size:clamp(3.5rem,6.5vw,6.4rem); }
  .landing-how { grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; }
  .landing-how > div + div { border-top:0; }
  .landing-games { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; padding:80px 0; }
  .future-note { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; }
}
@media (max-width:400px) { .game-sample { grid-template-columns:1fr; } .game-sample svg { width:180px; max-width:100%; } }