/* A continuous story using the homepage's typography, spacing and scroll effects. */
.niwa-how { color:var(--pt-ink); }
.niwa-how :is(h1,h2,p,figure) { margin:0; }
.niwa-how :is(h1,h2) { text-wrap:balance; }
.niwa-how a:focus-visible { outline:2px solid #676191; outline-offset:6px; }
.niwa-how [id] { scroll-margin-top:110px; }
.how-hero { display:grid; justify-items:center; gap:32px; padding-block:clamp(80px,10vw,145px) 45px; text-align:center; }
.how-hero h1 { max-width:1000px; }
.how-hero > p { max-width:760px; color:var(--pt-muted); font-size:var(--niwa-type-intro-size); line-height:1.75; text-wrap:pretty; }
.how-hero .niwa-actions { margin-top:8px; }
.niwa-how .niwa-statement { padding-block:100px 120px; }
.niwa-how .niwa-statement__copy { gap:48px; }
.niwa-how .how-landscape { margin-inline:auto; aspect-ratio:3 / 2; overflow:hidden; }
.how-landscape img { display:block; width:100%; height:100%; object-fit:cover; }
.how-prose { width:min(760px,calc(100% - 12vw)); margin-inline:auto; }
.how-prose > p { color:var(--pt-muted); font-size:var(--niwa-type-intro-size); line-height:1.8; text-wrap:pretty; }
.how-prose > p + p { margin-top:28px; }
.how-context { padding-block:90px 110px; }
.how-context > p:first-child { color:var(--pt-ink); }
.how-storefront { padding-block:90px; background:var(--pt-mist); }
.how-storefront h2 { max-width:22ch; margin-bottom:36px; }
.how-captures { display:flex; align-items:flex-start; justify-content:center; gap:clamp(32px,7vw,100px); padding-block:60px 80px; }
.how-chat-shot { width:100%; max-width:330px; min-width:0; }
.how-chat-shot__image { display:block; border-radius:18px; overflow:hidden; box-shadow:0 16px 38px #26273314; cursor:zoom-in; }
.how-chat-shot img { display:block; width:100%; height:auto; }
.how-chat-shot figcaption,.how-settings-shot figcaption { margin-top:18px; color:var(--pt-muted); font-size:12px; line-height:1.7; }
.how-chat-shot figcaption > span { display:block; }
.how-chat-shot figcaption a,.how-link { display:inline-flex; align-items:center; gap:12px; min-height:44px; color:var(--pt-ink); font-size:13px; text-decoration:underline; text-underline-offset:4px; }
.how-attention-capture { margin-block:48px 64px; }
.how-attention-capture .how-chat-shot { max-width:none; }
.how-attention-capture .how-chat-shot__image { border-radius:12px; box-shadow:none; }
.niwa-how .how-settings-shot { margin-block:48px 64px; }
.how-settings-shot > a { display:block; cursor:zoom-in; }
.how-settings-shot img { display:block; width:100%; height:auto; }
.how-prose > .how-beta-note { font-size:15px; }
.how-source-note { padding-top:56px; }
.how-source-note > p { font-size:13px; }
.niwa-how .niwa-closing h2 { max-width:29ch; }
@media(max-width:980px) {
    .how-prose { width:min(760px,calc(100% - 64px)); }
}
@media(max-width:640px) {
    .how-hero { padding-block:60px 24px; gap:26px; }
    .how-hero > p { text-align:left; }
    .niwa-how .niwa-statement { padding:70px 20px; }
    .niwa-how .niwa-statement__copy { gap:36px; }
    .niwa-how .how-landscape { aspect-ratio:4 / 5; }
    .how-landscape img { object-position:58% center; }
    .how-prose { width:calc(100% - 40px); }
    .how-context { padding-block:60px 70px; }
    .how-storefront { padding-block:65px; }
    .how-captures { flex-direction:column; align-items:center; gap:40px; padding-block:40px 56px; }
    .how-attention-capture,.niwa-how .how-settings-shot { margin-block:36px 44px; }
}