/* Keep the established paper palette and native scrolling; let short phones breathe. */
.hero .micro{font-size:12px;color:var(--muted)}
.feature-pro{display:inline-block;vertical-align:middle;margin-left:8px;padding:4px 8px;border:1px solid #8f7e6455;border-radius:20px;font:10px Karla,sans-serif;letter-spacing:1.4px;color:var(--gold);white-space:nowrap}
#record .record-timeline{padding:0;border:0;background:none;box-shadow:none;width:100%;text-align:center}
#record .record-timeline>img{width:auto;height:auto;max-height:min(440px,calc(100svh - 290px));max-width:100%;margin-inline:auto;border-radius:0;object-fit:contain}
#record .record-timeline figcaption{font-size:12px;line-height:1.8;color:var(--muted);margin-top:12px}
.share-start{margin-top:20px;font-size:13px}
.price-action{margin-top:18px;font-size:12px;min-height:42px;padding:10px 18px}
.pro-facts>.text-action{display:inline-block;font-size:12px;margin-left:8px}
.theme-example{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;border-radius:10px;border:1px solid #8f7e6444}
.theme-spectrum{gap:22px;margin-top:32px}
.updates.scene{min-height:0;padding-block:84px}
.updates .news-feature{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(32px,4vw,64px)}
.updates .news-feature h2{font-size:27px}
.updates .news-feature h3{font-size:clamp(28px,2.4vw,36px);margin-top:18px}
.updates .news-feature h3 br{display:none}
.updates .news-date{margin-top:14px}
.updates .news-feature .description{font-size:14px;margin-top:14px}
.updates .news-feature .button{margin-top:18px}
.updates .news-art{width:100%;max-width:none;justify-self:stretch;aspect-ratio:1.15}
/* A desktop snap target must fill its viewport, or the next scene appears cut off. */
@media(min-width:701px) and (min-height:521px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .updates.scene{min-height:var(--scene-height,100svh);padding-block:calc(var(--scene-header) + 28px) var(--scene-bottom)}
}
@media(min-width:701px){
 #growth .growth-scene{grid-template-columns:.8fr 1.2fr}
 #collection .growth-scene{grid-template-columns:1.1fr .9fr;gap:76px}
 #collection .scene-result{order:-1}
 #collection .scene-result img{max-height:calc(var(--scene-height,100svh) - 210px)}
 .pro-story figure>img{max-height:min(400px,calc(var(--scene-height,100svh) - 300px))}
 .theme-spectrum{max-width:1060px;margin-inline:auto}
}
@media(max-width:700px){
 .scene-next{display:none}
 html .hero .garden-window{width:min(100%,320px);max-width:100%}
 html .hero .micro{display:block;font-size:11px;margin-top:12px}
 .hero.scene{gap:24px}
 .hero .description br{display:none}
 #record .record-timeline{max-width:100%;padding:0}
 #record .record-timeline>img{max-height:390px;max-width:100%;width:auto}
 #record .benefits{grid-template-columns:1fr;gap:12px;margin-top:24px;padding-top:18px}
 #record .benefits h3{font-size:13px}
 #record .benefits p{display:none}
 .feature-pro{font-size:9px;padding:3px 7px;margin-left:6px}
 .share-start{font-size:12px;min-height:42px;margin-top:14px}
 .pro-facts>.text-action{display:block;margin-left:0}
 .theme-spectrum{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px}
 .theme-spectrum b{font-size:15px}
 .theme-spectrum small{font-size:11px}
 .theme-caption{font-size:12px}
 .updates.scene{padding-block:64px}
 .updates .news-feature{display:grid;grid-template-columns:1fr;gap:24px}
 .updates .news-feature h3{font-size:25px}
 .updates .news-art{width:100%;max-width:360px;height:auto;min-height:0;justify-self:start;align-self:auto}
 .updates .news-feature .button{font-size:11px}
}
@media(max-width:700px) and (max-height:700px){
 /* These examples stay legible; the section grows instead of squeezing the image. */
 html .scene-result img{max-height:none;width:min(100%,320px);height:auto}
 html .growth-collection .scene-result img{max-height:none;width:min(100%,260px);height:auto}
 html .editor-zoom picture{width:min(100%,220px)}
 html .editor-zoom img{width:100%;max-height:none;height:auto}
 html #guides .guide-stage{height:360px}
 .scene.sharing .split{gap:26px}
 .pro-story figure>img{width:29%;max-height:120px}
}
@media(min-width:701px) and (max-height:850px){
 #record .record-timeline>img{max-height:400px}
 .pro-story figure>img{max-height:340px}
}

/* Compare the two real viewing modes without an extra text column. */
#record .record-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;width:100%;max-width:none;padding:0;border:0;border-radius:0;background:none;box-shadow:none;align-items:start}
#record .record-comparison figure{min-width:0;text-align:center}
#record .record-comparison img{display:block;width:auto;height:auto;aspect-ratio:834/1900;object-fit:contain;object-position:center top;max-width:100%;max-height:min(560px,calc(100svh - 320px));border:1px solid #8f7e6455;border-radius:18px;box-shadow:0 18px 50px #3c352a20;margin-inline:auto}
#record .record-comparison figcaption{font-size:12px;line-height:1.6;color:var(--muted);margin-top:12px;white-space:nowrap}
@media(min-width:701px){#record .split{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px}}
@media(max-width:700px){#record .record-comparison{gap:12px;max-width:560px;align-self:center}#record .record-comparison img{width:100%;max-height:none;border-radius:12px}#record .record-comparison figcaption{font-size:11px;margin-top:8px}}