/* talkuma.app before the launch (#49, html/soon.html). Page layout only;
   the pieces are tk-* from kuma.css (tk-road is new, design/components/
   bundle.css). Light and dark follow the system: no theme switch here. */

.sn-hero{background:var(--sun);color:var(--on-sun);border-top:2px solid var(--outline);border-bottom:2px solid var(--outline)}
.sn-hero-in{max-width:1200px;margin:0 auto;padding:56px 20px 64px;box-sizing:border-box;display:flex;flex-direction:column;gap:22px}
.sn-hi{align-self:flex-start}
.sn-h1{margin:0;font-family:var(--font-display);font-weight:800;font-size:clamp(44px,6vw,76px);line-height:1;letter-spacing:-.02em;text-wrap:balance;max-width:16ch}
.sn-lead{margin:0;font-size:20px;font-weight:600;line-height:1.45;max-width:34ch}

.sn-wrap{max-width:1200px;margin:0 auto;padding:72px 20px;box-sizing:border-box;display:flex;flex-direction:column;gap:36px}
.sn-h2{margin:0;font-family:var(--font-display);font-weight:800;font-size:clamp(32px,4vw,46px);line-height:1.05}
.sn-ask-wrap{padding-top:8px}
.sn-ask{display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding:32px 28px;background:var(--surface);color:var(--ink);border:2px solid var(--outline);border-radius:var(--radius-card);box-shadow:var(--shadow-card)}
.sn-ask-p{margin:0;font-size:20px;font-weight:600;line-height:1.4}
.sn-mail{margin:6px 0 0;font-size:18px;font-weight:600;line-height:1.5;overflow-wrap:anywhere}
.kuma .sn-mail a{display:inline-flex;align-items:center;min-height:44px;font-weight:800;color:var(--ink);text-decoration-thickness:2px;text-underline-offset:4px}
.sn-mail a:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
@media (max-width:480px){.sn-hero-in{padding:40px 20px 48px}.sn-wrap{padding:56px 20px}.sn-ask{padding:24px 20px}.sn-ask .tk-button{width:100%}}