/* Mobile landing composition. Desktop rules remain unchanged. */
@media (max-width:767px) {
 body main { padding:0 14px; }
 .header { height:64px; padding:0 4px; gap:12px; }
 .header .wordmark { font-size:32px; }
 .header-side { gap:12px; min-width:0; }
 .header .nav-cta { display:none; }
 .auth-link { min-height:44px; padding:12px 4px; }
 .auth-account { flex-wrap:wrap; gap:6px; justify-content:flex-end; }
 .auth-email { max-width:130px; overflow:hidden; text-overflow:ellipsis; }
 .hero { border-radius:22px; }
 .hero-stage { display:flex; flex-direction:column; min-height:0; padding:24px 18px 18px; gap:0; }
 .hero-copy { display:contents; }
 .hero-copy>.brand-line,.hero-copy>#hero-title,.hero-copy>.description { width:100%; text-align:center; }
 .brand-line { order:0; margin:0 0 16px; font-size:14px; }
 .hero-copy>.brand-line { justify-content:center; }
 .brand-line:before { display:none; }
 /* Keep the handwritten headline prominent, with deliberate phrase breaks. */
 #hero-title { order:1; font-size:clamp(44px,12.43vw,55px); line-height:1.18; letter-spacing:-.035em; text-wrap:initial; }
 #hero-title>br,#hero-title>br:first-of-type { display:none; }
 #hero-title .hero-phrase { display:block; width:100%; line-height:1.18; white-space:nowrap; }
 #hero-title .hero-phrase+.hero-phrase { margin-top:0; }
 #hero-title .hero-ending { display:block; margin-top:14px; font-size:1em; line-height:1.18; text-align:center; }
 #hero-title>span { display:block; margin-top:22px; font-size:clamp(39.6px,11.55vw,52.8px); line-height:1.3; letter-spacing:-.025em; white-space:normal; word-break:keep-all; }
 .description { order:2; margin:18px 0 0; font-size:14px; line-height:1.7; color:#505953; word-break:keep-all; }
 .studio.pika-studio { order:3; width:100%; padding:0 0 38px; margin-top:14px; }
 .pika-studio .character { max-width:420px; }
 .pika-studio video { border-radius:14px; }
 .pika-toggle { bottom:0; right:0; min-height:36px; padding:6px 10px; font-size:11px; background:transparent; border:0; text-decoration:underline; text-underline-offset:3px; }
 .hero-steps { order:4; display:flex; flex-wrap:nowrap; justify-content:center; gap:0; margin:10px 0 0; font-size:11px; }
 .hero-steps li span { padding:5px 7px; background:transparent; border:0; }
 .hero-steps li+li:before { margin:0 4px; font-size:13px; }
 .discovery-desk { display:block; padding:20px 16px; }
 .desk-heading { padding:0; margin-bottom:12px; font-size:16px; }
 .desk-heading>span { max-width:none; }
 .desk-heading>svg { display:none; }
 .search { display:grid; grid-template-columns:minmax(0,1fr) 108px; gap:8px; padding:10px; border-radius:14px; }
 .search>svg { display:none; }
 .search input { grid-column:1 / -1; width:100%; height:44px; font-size:16px; padding:0 2px; }
 .search .select-wrap { width:100%; }
 .search select { width:100%; height:44px; font-size:13px; }
 .search button[type=submit] { width:100%; height:44px; padding-left:12px; padding-right:32px; font-size:14px; }
 .search-help { margin-top:10px; font-size:12px; line-height:1.6; }
 .suggestions { display:block; padding-top:16px; }
 .suggestions>span { display:block; margin-bottom:8px; font-size:12px; }
 .suggestions>#examples { display:flex; flex-wrap:wrap; gap:8px; }
 .suggestions button { flex-shrink:0; min-height:44px; padding:10px 12px; border:1px solid #657471; border-radius:10px; font-size:12px; white-space:nowrap; }
 .trust-strip { display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:20px 6px; }
 .trust-item { font-size:12px; }
 .sharing { display:flex; flex-direction:column; gap:24px; padding:28px 4px 36px; align-items:stretch; }
 .sharing-intro>svg { width:24px; height:24px; margin-bottom:12px; }
 .sharing h2 { font-size:26px; line-height:1.3; margin-bottom:16px; }
 .sharing h2 br:first-of-type,.sharing h2 br:last-of-type { display:none; }
 .donation-banner { max-width:none; }
 .donation-participate { margin-top:18px; min-height:46px; }
 .reward-split { display:grid; grid-template-columns:1fr 1fr; }
 .reward-half { padding:20px 14px; }
 .reward-half>p { min-height:36px; font-size:12px; margin-bottom:12px; }
 .reward-half>strong { font-size:calc(52px * var(--reward-scale, 1)); }
 .reward-caption { font-size:11px; margin-top:16px; line-height:1.6; }
 .split-join { width:30px; height:30px; }
 footer { padding:22px 4px; gap:12px; flex-wrap:wrap; }
 footer p { font-size:12px; line-height:1.7; }
 footer>span { margin-left:0; font-size:11px; }
}
@media(max-width:359px) { .hero-stage { padding:24px 14px 16px; } }