.l1-hero{padding:160px 6% 60px;display:grid;grid-template-columns:.7fr 1.3fr;gap:32px;align-items:center;background:#eeefea}.l1-hero h1{font-size:76px;margin:15px 0}.l1-hero h2{font-size:38px;line-height:1.5;font-weight:500}.l1-hero p{line-height:2}.l1-hero figure{margin:0}.l1-hero img{width:100%;height:auto;aspect-ratio:1;object-fit:contain}.l1-hero figcaption{font-size:12px;text-align:right;color:#777}.l1-hero .color-disclaimer{grid-column:1/-1;font-size:12px;color:#73766d}.l1-battery{background:#fafaf7}.l1-battery-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:40px}.l1-battery article{border-top:1px solid #ccc;padding:24px 0}.l1-battery strong{font-size:32px;font-weight:400}.l1-details{display:grid;grid-template-columns:1fr 1fr;gap:48px 32px}.l1-details figure{margin:0}.l1-details img{width:100%;height:auto;display:block;aspect-ratio:3/4;object-fit:contain}.l1-details h3{font-size:21px;font-weight:500;margin-bottom:10px}.l1-details p{font-size:14px;color:#777;line-height:1.8}.l1-specs{background:#eeefea}.l1-specs dl{max-width:850px;margin:40px 0}.l1-specs dl>div{display:grid;grid-template-columns:1fr 1.4fr;padding:20px 0;border-bottom:1px solid #ccd0c5}.l1-specs dd{margin:0}.l1-specs dt{color:#777}@media(max-width:700px){.l1-hero{grid-template-columns:1fr;padding:160px 7% 40px;gap:10px}.l1-hero h1{font-size:58px}.l1-hero h2{font-size:29px}.l1-details{grid-template-columns:1fr}.l1-battery-grid{gap:20px}.l1-battery strong{font-size:25px}}
.l1-details{grid-template-columns:repeat(3,minmax(0,1fr));gap:54px 28px}.l1-detail-photo{aspect-ratio:3/2;background:#eceee7;overflow:hidden;padding:18px}.l1-detail-photo img{width:100%;height:100%;object-fit:contain;aspect-ratio:auto}.l1-page .f-bottom{text-align:center}.l1-page .f-bottom p{line-height:1.9}.l1-page .f-bottom .button{margin-top:22px}@media(max-width:900px){.l1-details{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.l1-details{grid-template-columns:1fr;gap:38px}}

/* Fit the warm-gray surface to the visible cutout, not a fixed landscape box. */
.l1-details{grid-template-columns:repeat(2,minmax(0,1fr));gap:64px 48px;align-items:start}.l1-details figure{min-width:0}.l1-detail-photo{position:relative;aspect-ratio:var(--photo-ratio);width:min(100%,calc(440px * var(--photo-ratio)));margin:0 auto 26px;padding:0;background:#eceee7;overflow:hidden}.l1-detail-photo img{position:absolute;max-width:none;width:var(--asset-width);height:auto;left:var(--asset-left);top:var(--asset-top);aspect-ratio:auto}.l1-details figcaption{max-width:460px;margin:auto}@media(max-width:600px){.l1-details{grid-template-columns:1fr;gap:46px}.l1-detail-photo{width:min(100%,calc(400px * var(--photo-ratio)))}}

/* All phone detail photos share a 3:4 surface; only the cutout fits inside it. */
.l1-detail-photo{width:100%;aspect-ratio:3/4;margin:0 0 26px;display:flex;align-items:center;justify-content:center;padding:12px}.l1-cutout{position:relative;overflow:hidden;aspect-ratio:var(--photo-ratio);width:min(100%,calc((100cqw * 4 / 3 - 24px) * var(--photo-ratio)));max-height:100%}.l1-detail-photo{container-type:inline-size}.l1-detail-photo img{display:block}.l1-details{grid-template-columns:repeat(3,minmax(0,1fr));gap:54px 28px}@media(max-width:900px){.l1-details{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.l1-details{grid-template-columns:1fr}.l1-detail-photo{width:100%}}