/* A short photo checklist appears once; the following panel is just a timeline. */
.readable-art .purchase-key{padding:28px 25px;margin-top:30px;background:#fafbfd;border-top:3px solid #c1d1e2}
.readable-art .purchase-key .purchase-title h3{font-size:39px;margin:0}
.readable-art .purchase-key .purchase-title>strong{font-size:58px}
.readable-art .purchase-key .purchase-explain{font-size:35px!important}
.readable-art .purchase-key .purchase-note{font-size:31px!important}
.readable-art .step small{display:block;font-size:29px;line-height:1.65;color:#536578;margin-top:12px}
.readable-art .schedule .row{padding:28px 0}
.thumb.brand-light .tagline{margin-top:8px}
.thumb.brand-light .thumb-pair{margin-top:44px}
.thumb.brand-light .thumb-pair img{height:690px}
.thumb.brand-light.thumb-key .keypiece{top:305px}
.concept-thumb.brand-light h1{margin-top:14px}
.concept-thumb.brand-light .thumb-contact{top:260px;height:610px}

/* Homepage media is large enough to see the actual service, including its controls. */
.page-main .concept-hero{grid-template-columns:minmax(0,1fr) 500px!important;gap:56px!important;padding-top:40px!important;padding-bottom:48px!important;align-items:center!important}
.page-main .concept-hero h1{font-size:clamp(42px,4.5vw,62px)!important;line-height:1.3!important}
.page-main .concept-hero .eyebrow{font-size:24px!important;line-height:1.5!important}
.page-main .concept-hero .hero-description{font-size:21px!important;max-width:590px}
.page-main .concept-hero .hero-fine{font-size:19px!important}
.page-main .concept-movie{position:relative;width:500px!important;aspect-ratio:752/1020;overflow:hidden;margin:0!important;background:#f3f7fb!important}
/* The original 848 x 1508 movie stays intact. Show its shared scene rectangle,
   x=48, y=376, w=752, h=1020, without the duplicate baked-in headline/margins. */
.page-main .concept-movie video{position:absolute;width:112.765958%!important;max-width:none!important;height:auto!important;max-height:none!important;left:-6.382979%;top:-36.862745%;display:block}
.page-main #key-use .interactive-shelf{width:100%;max-width:1000px;margin:0 auto}
.page-main #key-use .shelf-screen{height:auto!important;max-height:none!important;padding:0!important;display:block;background:#fff}
.page-main #key-use .shelf-hit-map{width:100%!important;max-width:820px!important;margin:0 auto}
.page-main #key-use .shelf-hit-map>img{width:100%!important;height:auto!important;max-height:none!important}
.page-main .concept-growth{grid-template-columns:minmax(0,1fr) 440px!important;gap:48px!important;padding:40px 48px!important;align-items:center}
.page-main .collection-movie{position:relative;width:440px!important;aspect-ratio:600/1080;overflow:hidden;margin:0!important}
/* Keep the whole shelf and all three captions: x=124, y=350, w=600, h=1080
   within the unchanged 848 x 1508 source. Its duplicate heading is above this crop. */
.page-main .collection-movie video{position:absolute;width:141.333334%!important;max-width:none!important;height:auto!important;max-height:none!important;left:-20.666667%;top:-32.407408%;display:block}
.page-main .section-heading .eyebrow,.page-main .collection-copy .eyebrow{font-size:23px!important;line-height:1.5!important;margin-bottom:18px!important}
.page-main .section-heading h2,.page-main .collection-copy h2,.page-main .memo-demo-copy h2{font-size:42px!important;line-height:1.35!important;letter-spacing:-.035em}
.page-main .collection-copy h2{margin:16px 0 26px!important}
.page-main .collection-copy p{font-size:18px!important;line-height:1.8!important}
.page-main #purchase .purchase-first,.page-main #purchase .purchase-add,.page-main #purchase .purchase-key{padding:34px;margin-top:30px}
.page-main #purchase .purchase-key{background:#fafbfd;border-top:3px solid #c1d1e2}
.page-main #purchase .purchase-label{font-size:20px!important;line-height:1.5;margin:0 0 18px!important}
.page-main #purchase .purchase-title h3{font-size:30px!important;margin:0}
.page-main #purchase .purchase-title>strong{font-size:40px!important}
.page-main #purchase .bundle-items{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.page-main #purchase .bundle-items figure{display:block;text-align:center}
.page-main #purchase .bundle-items figure>img,.page-main #purchase .bundle-key{height:190px!important}
.page-main #purchase .bundle-items figcaption{display:block;margin-top:16px}
.page-main #purchase .bundle-items figcaption b{font-size:22px!important;line-height:1.45;white-space:normal}
.page-main #purchase .bundle-items figcaption span{display:none}
.page-main #purchase .purchase-key .purchase-explain{font-size:18px!important;line-height:1.7!important;margin-top:20px}
.page-main #purchase .purchase-key .purchase-note{margin-top:17px}
@media(max-width:1100px) and (min-width:761px){
 .page-main .concept-hero{grid-template-columns:minmax(0,1fr) minmax(0,.95fr)!important;gap:32px!important}
 .page-main .concept-movie{width:100%!important}
 .page-main .concept-growth{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)!important;gap:30px!important;padding:35px 30px!important}
 .page-main .collection-movie{width:100%!important}
}
@media(max-width:1000px) and (min-width:761px){
 .page-main .section-heading h2,.page-main .collection-copy h2{font-size:36px!important}
}
@media(max-width:760px){
 .page-main .concept-hero{grid-template-columns:1fr!important;gap:26px!important;padding-top:28px!important;padding-bottom:35px!important}
 .page-main .concept-hero h1{font-size:clamp(31px,8.5vw,42px)!important}
 .page-main .concept-hero .eyebrow{font-size:20px!important}
 .page-main .concept-hero .hero-description{font-size:18px!important}
 .page-main .concept-hero .hero-fine{font-size:17px!important}
 .page-main .concept-movie{width:min(100%,500px)!important;justify-self:center}
 .page-main .concept-growth{grid-template-columns:1fr!important;gap:22px!important;padding:28px 20px!important}
 .page-main .collection-movie{width:min(100%,440px)!important;justify-self:center}
 .page-main .section-heading .eyebrow,.page-main .collection-copy .eyebrow{font-size:20px!important;margin-bottom:14px!important}
 .page-main .section-heading h2,.page-main .collection-copy h2,.page-main .memo-demo-copy h2{font-size:30px!important;line-height:1.4!important}
 .page-main .collection-copy p{font-size:17px!important}
 .page-main #purchase .purchase-first,.page-main #purchase .purchase-add,.page-main #purchase .purchase-key{padding:24px 16px}
 .page-main #purchase .purchase-label{font-size:17px!important}
 .page-main #purchase .purchase-title h3{font-size:24px!important}
 .page-main #purchase .purchase-title>strong{font-size:33px!important}
 .page-main #purchase .bundle-items{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:26px 0}
 .page-main #purchase .bundle-items figure>img,.page-main #purchase .bundle-key{height:clamp(105px,30vw,145px)!important}
 .page-main #purchase .bundle-items figcaption{margin-top:12px}
 .page-main #purchase .bundle-items figcaption b{font-size:clamp(14px,3.9vw,17px)!important;line-height:1.45;min-height:2.9em;display:flex;align-items:flex-start;justify-content:center}
 .page-main #purchase .purchase-key .purchase-explain{font-size:17px!important}
}