.how-page{background:var(--paper);max-width:1200px;margin:auto;padding:56px 32px 80px}.site-page-content:has(.how-page){--public-header-width:1200px;--public-header-gutter:32px}.how-page h1,.how-page h2{letter-spacing:-.035em}.how-page h3{letter-spacing:normal;font-family:inherit;font-weight:700}.how-hero{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center;gap:56px;padding-bottom:56px;display:grid}.how-hero .home-style{max-width:460px;margin:0 0 36px}.how-hero h1{margin:0 0 24px;font-size:clamp(2.6rem,5.2vw,4.65rem);line-height:1.06}.how-intro{max-width:42ch;margin:0 0 28px;font-size:1.2rem;line-height:1.65}.how-voice-note{color:var(--muted);margin:16px 0 0;font-size:.85rem}.how-hero-art{background:var(--yellow);border-radius:24px;flex-direction:column;align-items:center;min-width:0;padding:24px 20px 20px;display:flex;position:relative;transform:rotate(2deg)}.how-hero-art img{object-fit:contain;width:100%;max-width:390px;height:auto;transform:rotate(-2deg)}.how-art-caption{text-align:center;font-size:1.05rem;font-weight:700}.how-art-note{text-align:center;font-size:.8rem;font-weight:600}.how-step{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:center;gap:72px;padding:80px 0;scroll-margin-top:112px;display:grid}.how-step+.how-step{border-top:1px solid var(--line)}.how-step:nth-child(2n) .how-step-copy{order:2}.how-step-copy h2{max-width:18ch;margin:0 0 24px;font-size:clamp(1.9rem,3.2vw,2.65rem);line-height:1.16}.how-step-copy h2>span{letter-spacing:normal;color:var(--blue);margin-bottom:20px;font-family:Public Sans,sans-serif;font-size:1rem;display:block}.how-step-copy>p{max-width:48ch;margin:0;font-size:1.06rem;line-height:1.75}.how-evidence{margin-top:28px}.how-evidence strong{font-size:.95rem}.how-evidence p{color:var(--muted);margin:8px 0 0;font-size:.95rem;line-height:1.65}.how-page .how-step-note{color:var(--muted);max-width:65ch;margin-top:24px;font-size:.875rem;line-height:1.7}.how-preview{background:var(--white);border:1px solid var(--line);border-radius:16px;min-width:0;box-shadow:0 10px 32px #20231f0a}.how-preview-bar{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:12px;padding:16px 24px;font-size:.8rem;display:flex}.how-preview-bar span:first-child{font-weight:700}.how-preview-bar span:last-child{color:var(--muted)}.how-demo-content{padding:28px}.how-demo-content h3{margin:0 0 24px;font-size:1.1rem}.how-connection{border-bottom:1px solid var(--line);align-items:center;gap:12px;padding:20px 0;display:flex}.how-connection>div{flex:1;min-width:0}.how-connection strong,.how-connection div>span{display:block}.how-connection div>span{color:var(--muted);overflow-wrap:anywhere;margin-top:5px;font-size:.8rem}.how-status{background:var(--success-soft,#e1f3e7);color:var(--success,#17623d);border-radius:6px;align-items:center;gap:4px;padding:6px 8px;font-size:.7rem;font-weight:700;display:inline-flex}.how-supabase{color:#17623d;width:25px;font-size:2rem;line-height:1}.how-site{gap:8px;margin-top:24px;display:grid}.how-site>span{color:var(--muted);font-size:.8rem}.how-demo-note{color:var(--muted);margin:20px 0 0;font-size:.875rem;line-height:1.65}.how-demo-heading{justify-content:space-between;align-items:baseline;gap:12px;display:flex}.how-small{color:var(--muted);font-size:.7rem}.how-categories{flex-wrap:wrap;gap:6px;margin-bottom:20px;font-size:.75rem;display:flex}.how-categories>span{color:var(--muted);padding:8px}.how-categories .selected{color:var(--ink);background:var(--yellow);border-radius:6px;font-weight:700}.how-finding{border-top:1px solid var(--line);gap:10px;padding:18px 0;display:grid}.how-finding strong{font-size:.95rem;line-height:1.4}.how-finding>span:last-child{color:var(--muted);justify-content:space-between;align-items:center;font-size:.75rem;display:flex}.how-priority{background:var(--high-soft,#ffe6d8);color:var(--high,#90360c);border-radius:6px;justify-self:start;padding:5px 8px;font-size:.7rem;font-weight:700;display:inline-block}.how-priority.medium{color:#694c00;background:#fff0ba}.how-demo-content .how-prompt-title{margin:16px 0;font-size:1.2rem;line-height:1.4}.how-prompt{background:var(--paper);border-radius:10px;margin:20px 0;padding:20px}.how-prompt>strong{font-size:.8rem}.how-prompt p{margin:10px 0 0;font-size:.875rem;line-height:1.7}.how-prompt summary{cursor:pointer;min-height:44px;padding:12px 0;font-size:.8rem;font-weight:700}.how-prompt .how-full-prompt{white-space:pre-wrap}.how-copy-status{min-height:2.4em;color:var(--muted);margin:12px 0 0;font-size:.75rem;line-height:1.55}.how-timeline{margin:0;padding:0;list-style:none}.how-timeline li{gap:14px;padding:18px 0;display:flex}.how-timeline svg{color:var(--blue);flex-shrink:0;margin-top:1px}.how-timeline strong,.how-result strong{font-size:.9rem;line-height:1.5;display:block}.how-timeline span,.how-result span{color:var(--muted);margin-top:5px;font-size:.8rem;line-height:1.5;display:block}.how-result{color:#17623d;background:#e1f3e7;border-radius:10px;align-items:center;gap:12px;margin-top:16px;padding:20px;display:flex}.how-result svg{flex-shrink:0}.how-result span{color:#17623d}.how-close{text-align:center;background:var(--yellow);border-radius:24px;margin-top:16px;padding:56px 24px}.how-close h2{max-width:22ch;margin:0 auto 20px;font-size:clamp(2rem,4vw,3rem);line-height:1.15}.how-close>p{margin:0 0 24px;line-height:1.65}.how-close .how-step-note{margin:24px auto 0}@keyframes how-arrive{0%{opacity:.35;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.how-preview.is-visible .how-enter{animation:.65s ease-out both how-arrive}.how-preview.is-visible .how-enter:nth-child(2){animation-delay:.2s}.how-preview.is-visible .how-enter:nth-child(3){animation-delay:.5s}.how-preview.is-visible .how-enter:nth-child(4){animation-delay:.8s}.how-preview.is-visible .how-result{animation-delay:1.3s}@media (max-width:900px){.how-hero{gap:32px}.how-step{gap:36px}.how-demo-content{padding:20px}.how-connection{flex-wrap:wrap}.how-status{margin-left:auto}.how-hero h1{font-size:3rem}}@media (max-width:700px){.how-page{padding:32px 20px 48px}.site-page-content:has(.how-page){--public-header-gutter:20px}.how-hero{grid-template-columns:1fr;gap:40px;padding-bottom:40px}.how-hero h1{font-size:clamp(2.5rem,9vw,3.8rem)}.how-hero-art{justify-self:center;width:95%;max-width:350px}.how-hero-art img{max-width:260px}.how-hero .home-style{margin-bottom:28px}.how-step{grid-template-columns:1fr;gap:28px;padding:48px 0}.how-step:nth-child(2n) .how-step-copy{order:0}.how-step-copy h2{max-width:24ch}.how-step-copy h2>span{margin-bottom:12px}.how-step-copy>p{max-width:none}.how-close{padding:40px 20px}.how-preview-bar{padding:16px 20px}.how-page .button{white-space:normal}.how-demo-heading{flex-wrap:wrap;gap:0}.how-small{margin-bottom:16px}.how-connection>div{min-width:110px}}@media (prefers-reduced-motion:reduce){.how-preview.is-visible .how-enter{opacity:1;transform:none;animation:none!important}}.how-categories>span{background:var(--paper);border-radius:6px}.how-categories b{color:var(--ink);margin-left:4px}.how-step:first-child{padding-top:40px}@media (max-width:700px){.how-step:first-child{padding-top:16px}}