/* Habit Lifekit only. Shared chrome and palette are owned by site-chrome. */
.hl-skip{position:absolute;left:20px;top:8px;z-index:50;padding:12px 18px;background:#fff;color:#151c20;transform:translateY(-180%)}
.hl-skip:focus{transform:none;outline:2px solid #715341}
.hl-main{--hl-ink:#17252b;--hl-muted:#52636b;--hl-line:#cbd3d6;--hl-accent:#8b664e;--hl-paper:#f3f5f5;margin:0;padding:0;color:var(--hl-ink);background:#fff;font:400 16px/1.95 'Source Sans 3','BIZ UDPGothic',sans-serif; font-synthesis:none;overflow-wrap:break-word}
.hl-main *, .hl-main *::before,.hl-main *::after{box-sizing:border-box}
.hl-main h1,.hl-main h2,.hl-main h3,.hl-main p,.hl-main figure,.hl-main dl,.hl-main ol{margin:0}
.hl-main h1,.hl-main h2,.hl-main h3{color:inherit;font-family:'Libre Baskerville','Zen Old Mincho',serif;font-weight:700;letter-spacing:-.045em;line-height:1.5}
.hl-main h2{font-size:clamp(28px,3.2vw,46px)}
.hl-main h2>span,.hl-hero-statement>span{display:block}
.hl-main h3{font-size:clamp(28px,3.1vw,44px)}
.hl-main img{display:block;max-width:100%;height:auto}
.hl-main a{color:inherit;text-decoration:none}
.hl-main a:focus-visible,.hl-main summary:focus-visible{outline:2px solid #715341;outline-offset:7px}
.hl-wrap{width:calc(100% - 128px);max-width:1280px;margin:0 auto!important}
.hl-main .hl-label{font:500 11px/1.8 'Source Sans 3','BIZ UDPGothic',sans-serif;letter-spacing:.14em;color:var(--hl-muted)}
.hl-hero{padding:24px 46px 42px;max-width:1600px;margin:auto}
.hl-hero-top{display:flex;justify-content:space-between;gap:20px;padding-bottom:28px;border-bottom:1px solid var(--hl-line)}
.hl-hero-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:38px;padding:42px 0}
.hl-hero-copy{max-width:510px}
.hl-main .hl-hero-copy h1{font:700 clamp(56px,5.9vw,94px)/.95 'Libre Baskerville',serif;letter-spacing:-.055em;margin-bottom:24px}
.hl-title-dot{color:var(--hl-accent)}
.hl-hero-statement{font-size:clamp(22px,2.25vw,34px);line-height:1.55;font-family:'Libre Baskerville','Zen Old Mincho',serif;font-weight:700;letter-spacing:-.045em;margin-bottom:20px!important}
.hl-main .hl-lead{max-width:32em;font-size:15px;line-height:1.95;margin-bottom:24px}
.hl-store{display:inline-flex!important;align-items:center;min-height:56px;padding:8px 0;vertical-align:middle}
.hl-main .hl-store img{width:152.6px;height:56px;max-width:none}
.hl-text-link{display:block;width:fit-content;font-size:12px;padding:12px 0 5px;border-bottom:1px solid var(--hl-line);margin-top:13px}
.hl-text-link span{margin-left:30px}
.hl-hero-visual{min-width:0;align-self:center}
.hl-hero-visual picture{display:block}
.hl-hero-visual figcaption{font-size:11px;color:var(--hl-muted);letter-spacing:.025em;padding-top:17px;text-align:right}
.hl-hero-visual figcaption span{padding:0 12px;color:var(--hl-accent)}
.hl-hero-note{font-size:12px;color:var(--hl-muted);text-align:right;padding-top:20px;border-top:1px solid var(--hl-line)}
.hl-rhythm{display:grid;grid-template-columns:1fr 1fr 1fr 1.15fr;gap:30px;align-items:center;background:var(--hl-paper);padding:40px 64px;border-top:1px solid var(--hl-line);border-bottom:1px solid var(--hl-line)}
.hl-rhythm>p{font-family:'Zen Old Mincho',serif;font-size:clamp(45px,5vw,70px);line-height:1.2;display:flex;align-items:baseline;gap:16px}
.hl-rhythm>p>span{font:500 10px/1.5 'Source Sans 3','BIZ UDPGothic',sans-serif;letter-spacing:.1em;color:var(--hl-muted)}
.hl-rhythm>p.hl-rhythm-note{font:400 13px/1.9 'Source Sans 3','BIZ UDPGothic',sans-serif;letter-spacing:0}
.hl-overview{padding:94px 0 108px}
.hl-overview-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:85px;margin-top:30px}
.hl-overview-grid>div>p{max-width:32em}
.hl-meta{margin-top:32px!important}
.hl-meta>div{display:grid;grid-template-columns:110px 1fr;gap:10px;align-items:baseline;padding:11px 0;border-top:1px solid var(--hl-line);font-size:12px}
.hl-meta dt{font:500 9px/1.7 'Source Sans 3','BIZ UDPGothic',sans-serif;letter-spacing:.07em;color:var(--hl-muted)}
.hl-meta dd{margin:0}
.hl-flow{background:#f1f4f5;padding:86px 0 70px}
.hl-flow-intro{display:grid;grid-template-columns:1fr 1fr;gap:28px 90px}
.hl-flow-intro>.hl-label{grid-column:1/-1}
.hl-flow-intro>p:not(.hl-label){align-self:center;max-width:32em}
.hl-flow-track{position:relative;margin-top:74px!important}
.hl-flow-track::before{content:'';position:absolute;top:0;left:0;bottom:40px;border-left:1px solid #bfcbd0}
.hl-movement{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:60px;padding:56px 0 64px 44px}
.hl-movement+.hl-movement{border-top:1px solid #c5d1d5}
.hl-movement::before{content:'';width:9px;height:9px;position:absolute;top:66px;left:-4px;background:#879ca7;border-radius:50%;outline:7px solid #f1f4f5;transition:background .3s}
.hl-movement.is-current::before{background:var(--hl-accent)}
.hl-main .hl-step-index{font:400 42px/1.2 'Source Sans 3','BIZ UDPGothic',sans-serif;color:#687e88;letter-spacing:-.04em;display:flex;align-items:center;gap:25px;margin-bottom:34px}
.hl-step-index span{font:700 12px/1.5 'BIZ UDPGothic',sans-serif;letter-spacing:.14em;color:var(--hl-muted)}
.hl-step-summary{font-size:21px;line-height:1.8;margin-top:22px!important}
.hl-small{font-size:13px;line-height:2;color:var(--hl-muted);margin-top:26px!important}
.hl-screen{width:100%;max-width:342px;justify-self:center}
.hl-screen img{width:100%;height:auto;object-fit:contain}
.hl-screen figcaption{font:400 10px/1.8 'Source Sans 3','BIZ UDPGothic',sans-serif;color:var(--hl-muted);letter-spacing:.04em;margin-top:15px;text-align:center}
.hl-movement--record .hl-screen{justify-self:start}
.hl-movement--calendar{grid-template-columns:1fr 1.3fr}
.hl-movement--calendar .hl-movement-copy{grid-column:2;grid-row:1}
.hl-movement--calendar .hl-screen{grid-column:1;grid-row:1;justify-self:center}
.hl-movement--pace{grid-template-columns:1.3fr 1fr}
.hl-movement--pace .hl-screen{justify-self:start}
.hl-premium{background:#1b2b32;color:#f3f5f5;padding:88px 0 72px}
.hl-premium .hl-label{color:#c5d0d4}
.hl-premium-head{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:end;margin-bottom:62px}
.hl-premium-head h2{font-size:clamp(30px,3.5vw,52px);margin-top:24px}
.hl-premium-head h2 span[lang=en]{font-family:'Libre Baskerville',serif;letter-spacing:-.05em;line-height:1.2}
.hl-premium-head>p{font-size:15px;color:#d6dfe3}
.hl-feature-list{list-style:none;padding:0}
.hl-feature-list>li{display:grid;grid-template-columns:75px 1fr 1.05fr;gap:24px;align-items:baseline;border-top:1px solid #57676e;padding:29px 0}
.hl-feature-number{font:400 14px/1.6 'Source Sans 3','BIZ UDPGothic',sans-serif;color:#c5d0d4}
.hl-feature-list h3{font-size:22px;letter-spacing:-.045em;font-weight:700}
.hl-feature-list p{font-size:14px;color:#d6dfe3;line-height:1.95}
.hl-example{border-top:1px solid #57676e;font-size:12px;color:#d6dfe3;padding-top:24px;margin-top:16px}
.hl-example summary{cursor:pointer;width:fit-content;min-height:44px;padding:8px 0;text-decoration:underline;text-underline-offset:5px}
.hl-example p{margin-top:12px;max-width:75em}
.hl-ending{padding:94px 0 90px}
.hl-ending-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:80px;margin-top:30px;align-items:start}
.hl-main .hl-ending-app{font:700 32px/1.3 'Libre Baskerville',serif;letter-spacing:-.06em;margin-bottom:14px}
.hl-ending-grid>div>p:not(.hl-ending-app){font-size:14px;margin-bottom:20px}
.hl-policy{display:block;width:fit-content;padding:16px 0;min-height:44px;font-size:12px;text-decoration:underline!important;text-underline-offset:5px;margin-top:16px}
.hl-policy span{margin-left:25px}
@media(hover:hover){.hl-main .hl-store:hover{opacity:.78}.hl-main .hl-text-link:hover,.hl-main .hl-policy:hover{color:#715341}}
/* Movement accompanies the record > calendar > overview sequence. Content never hides. */
@media(prefers-reduced-motion:no-preference){.hl-movement.is-current .hl-screen img{animation:hl-settle .65s ease-out}.hl-movement.is-current .hl-step-index{animation:hl-ink .55s ease-out}@keyframes hl-settle{from{transform:translateY(10px)}to{transform:none}}@keyframes hl-ink{from{color:#8b664e}to{color:#687e88}}}
@media(max-width:1050px){.hl-wrap{width:calc(100% - 80px)}.hl-hero{padding-left:40px;padding-right:40px}.hl-hero-grid{gap:25px}.hl-rhythm{padding:34px 40px;gap:20px}.hl-rhythm>p{display:block}.hl-rhythm>p>span{display:block;margin-top:12px}.hl-overview-grid,.hl-flow-intro,.hl-premium-head,.hl-ending-grid{gap:35px}.hl-feature-list>li{grid-template-columns:45px .9fr 1.1fr;gap:16px}.hl-feature-list h3{font-size:19px}.hl-movement{gap:30px;padding-left:30px}.hl-step-summary{font-size:18px}.hl-screen{max-width:290px}}
@media(max-width:760px){.hl-main{font-size:15px;line-height:1.95}.hl-wrap{width:calc(100% - 44px)}.hl-hero{padding:16px 22px 28px}.hl-hero-top{padding-bottom:18px;gap:12px}.hl-main .hl-label{font-size:9px;letter-spacing:.08em}.hl-hero-grid{display:flex;flex-direction:column;align-items:stretch;gap:28px;padding:30px 0 26px}.hl-hero-copy{display:grid;grid-template-columns:1fr auto;gap:0 16px;max-width:none}.hl-main .hl-hero-copy h1{font-size:clamp(56px,17vw,85px);grid-column:1/-1;margin-bottom:22px}.hl-hero-statement{grid-column:1/-1;font-size:clamp(24px,6.45vw,32px);margin-bottom:17px!important}.hl-main .hl-lead{grid-column:1/-1;font-size:14px;margin-bottom:16px}.hl-store{min-height:56px}.hl-main .hl-store img{width:130.8px;height:48px}.hl-text-link{align-self:center;font-size:10px;padding-top:0;margin-top:0;white-space:nowrap}.hl-text-link span{margin-left:10px}.hl-hero-visual figcaption{font-size:9px;text-align:left;padding-top:12px}.hl-hero-visual figcaption span{padding:0 7px}.hl-hero-note{font-size:11px;text-align:left;line-height:1.9;padding-top:16px}.hl-rhythm{padding:28px 22px;grid-template-columns:repeat(3,1fr);gap:22px 12px}.hl-rhythm>p{font-size:42px}.hl-rhythm>p>span{font-size:8px;letter-spacing:.09em;margin-top:8px}.hl-rhythm>p.hl-rhythm-note{grid-column:1/-1;font-size:11px}.hl-rhythm-note br{display:none}.hl-overview{padding:62px 0}.hl-overview-grid{grid-template-columns:1fr;gap:24px;margin-top:22px}.hl-main h2{font-size:clamp(25px,6.4vw,34px);line-height:1.6;letter-spacing:-.045em}.hl-meta{margin-top:25px!important}.hl-meta>div{grid-template-columns:92px 1fr;font-size:11px}.hl-meta dt{font-size:8px}.hl-flow{padding:60px 0 38px}.hl-flow-intro{grid-template-columns:1fr;gap:20px}.hl-flow-track{margin-top:32px!important}.hl-movement,.hl-movement--calendar,.hl-movement--pace{grid-template-columns:1fr;gap:28px;padding:35px 0 40px 20px}.hl-movement::before{top:43px}.hl-main .hl-step-index{font-size:30px;gap:20px;margin-bottom:20px}.hl-main h3{font-size:31px}.hl-step-summary{font-size:17px;margin-top:13px!important}.hl-small{font-size:12px;margin-top:16px!important}.hl-screen{max-width:280px}.hl-movement--calendar .hl-movement-copy,.hl-movement--calendar .hl-screen{grid-column:auto;grid-row:auto}.hl-movement--record .hl-screen,.hl-movement--pace .hl-screen{justify-self:center}.hl-screen figcaption{font-size:9px}.hl-premium{padding:62px 0 45px}.hl-premium-head{grid-template-columns:1fr;gap:26px;margin-bottom:36px}.hl-premium-head h2{margin-top:20px;font-size:34px}.hl-premium-head>p{font-size:14px}.hl-feature-list>li{grid-template-columns:30px 1fr;gap:12px 10px;padding:24px 0}.hl-feature-list h3{font-size:19px}.hl-feature-list p{grid-column:2;font-size:13px}.hl-feature-number{font-size:11px}.hl-example{font-size:11px;line-height:2}.hl-ending{padding:62px 0 56px}.hl-ending-grid{grid-template-columns:1fr;gap:30px;margin-top:20px}.hl-main .hl-ending-app{font-size:28px}.hl-ending-grid>div>p:not(.hl-ending-app){font-size:13px}.hl-policy{font-size:12px}}
@media(prefers-reduced-motion:reduce){.hl-main *, .hl-main *::before,.hl-main *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Review 1: show the app and screens sooner; give the calendar its own composition. */
.hl-main .hl-hero-copy h1>span{display:block}
@media(min-width:1051px){
.hl-movement--calendar{grid-template-columns:minmax(0,1fr) 343px minmax(0,1fr);gap:24px 38px;align-items:center}
.hl-movement--calendar .hl-movement-copy{display:contents}
.hl-movement--calendar .hl-step-index{grid-column:1/-1;grid-row:1;margin-bottom:4px}
.hl-movement--calendar h3{grid-column:1;grid-row:2;align-self:center;font-size:42px}
.hl-movement--calendar .hl-step-summary{grid-column:3;grid-row:2;align-self:center;font-size:19px}
.hl-movement--calendar .hl-small{grid-column:3;grid-row:3;margin-top:0!important}
.hl-movement--calendar .hl-screen{grid-column:2;grid-row:2 / 4}
}
@media(max-width:760px){.hl-main .hl-hero-copy h1{font-size:clamp(35px,9.55vw,48px);line-height:1.1;letter-spacing:-.055em;margin-bottom:18px;white-space:nowrap}.hl-main .hl-hero-copy h1>span{display:inline}.hl-hero-grid{padding-top:25px;gap:22px}.hl-hero-statement{font-size:clamp(23px,6.1vw,29px);margin-bottom:14px!important}.hl-main .hl-lead{line-height:1.9}.hl-hero-top{padding-bottom:15px}}
/* Review 2: keep Japanese sentence endings and meaningful heading phrases together. */
.hl-main .hl-nowrap{display:inline-block;white-space:nowrap}
/* Keep the same image footprint even when the network returns no pixels. */
.hl-hero-visual picture{aspect-ratio:1672 / 941}
.hl-hero-visual picture img{width:100%;height:100%;object-fit:contain}
.hl-main .hl-screen img{aspect-ratio:342 / 652}
.hl-main .hl-screen--calendar img{aspect-ratio:343 / 652}
.hl-main .hl-screen--overview img{aspect-ratio:340 / 652}

/* Japanese utility labels use the gothic body face at regular weight. */
.hl-main .hl-label:not([lang="en"]){font-weight:400}

/* Hero: asymmetric source-background margins protect the feather, owl,
   three phones and bottom captions. No image filter or backing box. */
@supports (mask-composite:intersect) or (-webkit-mask-composite:source-in){
 .hl-main .hl-hero-visual picture img{
  -webkit-mask-image:linear-gradient(to right,transparent,#000 3%,#000 91%,transparent),linear-gradient(to bottom,transparent,#000 .8%,#000 98.4%,transparent);
  -webkit-mask-composite:source-in,source-over;
  mask-image:linear-gradient(to right,transparent,#000 3%,#000 91%,transparent),linear-gradient(to bottom,transparent,#000 .8%,#000 98.4%,transparent);
  mask-composite:intersect,add;
 }
}
/* Phone images: nine background-margin tiles, united rather than intersected.
   Opaque stops sit outside the physical frame, including its rounded corners.
   Tile overlaps exceed one CSS pixel on mobile, avoiding rasterization seams.
   The central opaque column spans 99% height to protect the top/bottom frame.
   Masks move with the existing animation. Unsupported masks leave full images. */
@supports (mask-image:linear-gradient(#000,#000)) or (-webkit-mask-image:linear-gradient(#000,#000)){
 .hl-main .hl-screen--record img{--hl-edge-left:17%;--hl-edge-right:14.3%;--hl-edge-top:6%;--hl-edge-bottom:9%;--hl-edge-corner:63%}
 .hl-main .hl-screen--calendar img{--hl-edge-left:14.3%;--hl-edge-right:13.6%;--hl-edge-top:6%;--hl-edge-bottom:8%;--hl-edge-corner:65%}
 .hl-main .hl-screen--overview img{--hl-edge-left:12.9%;--hl-edge-right:11.4%;--hl-edge-top:6%;--hl-edge-bottom:8%;--hl-edge-corner:67%}
 .hl-main .hl-screen--record img,
 .hl-main .hl-screen--calendar img,
 .hl-main .hl-screen--overview img{
  --hl-background-mask:
   radial-gradient(circle at bottom right,#000 var(--hl-edge-corner),transparent 100%),
   linear-gradient(to bottom,transparent,#000 var(--hl-edge-top)),
   radial-gradient(circle at bottom left,#000 var(--hl-edge-corner),transparent 100%),
   linear-gradient(to right,transparent,#000 var(--hl-edge-left)),
   linear-gradient(#000,#000),
   linear-gradient(to left,transparent,#000 var(--hl-edge-right)),
   radial-gradient(circle at top right,#000 var(--hl-edge-corner),transparent 100%),
   linear-gradient(to top,transparent,#000 var(--hl-edge-bottom)),
   radial-gradient(circle at top left,#000 var(--hl-edge-corner),transparent 100%);
  -webkit-mask-image:var(--hl-background-mask);
  -webkit-mask-size:14% 7.4%,74% 7.4%,14% 7.4%,14% 87.4%,74% 99%,14% 87.4%,14% 7.4%,74% 7.4%,14% 7.4%;
  -webkit-mask-position:left top,center top,right top,left center,center,right center,left bottom,center bottom,right bottom;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-composite:source-over;
  mask-image:var(--hl-background-mask);
  mask-size:14% 7.4%,74% 7.4%,14% 7.4%,14% 87.4%,74% 99%,14% 87.4%,14% 7.4%,74% 7.4%,14% 7.4%;
  mask-position:left top,center top,right top,left center,center,right center,left bottom,center bottom,right bottom;
  mask-repeat:no-repeat;
  mask-composite:add;
 }
}

/* Edge continuity: each upper/lower field follows the source-edge colour path.
   These are normal, static backgrounds. No image duplication, blur or glow.
   Isolated backgrounds extend under the image's existing safe margin mask. */
.hl-main .hl-image-field{display:block}
@supports (mask-composite:intersect) or (-webkit-mask-composite:source-in){
 .hl-main .hl-hero-visual picture{--hl-field-pad:6%;--hl-field-depth:clamp(30px,4.4vw,64px);--hl-field-top:linear-gradient(to right,#f7f1ee 5.357%,#f9f3f0 14.286%,#fcf5f3 23.214%,#f4eff3 32.143%,#efecf4 41.071%,#e9ecf4 50.000%,#e0e7f3 58.929%,#dce8f3 67.857%,#dce6ee 76.786%,#e7ecf4 85.714%,#d7e3ef 94.643%);--hl-field-bottom:linear-gradient(to right,#e7e8f3 5.357%,#e5e5f2 14.286%,#e5e5f3 23.214%,#ecebf4 32.143%,#f5f0f4 41.071%,#f5f1f3 50.000%,#e3eaf3 58.929%,#e8ebf5 67.857%,#f1f1f3 76.786%,#dce3ed 85.714%,#e1e7f0 94.643%)}
 .hl-main .hl-screen--record .hl-image-field{--hl-field-pad:7%;--hl-field-depth:34px;--hl-field-top:linear-gradient(to right,#f9f3f2 6.140%,#faf5f4 14.912%,#f9f6f5 23.684%,#faf6f5 32.456%,#f8f6f5 41.228%,#f9f6f6 50.000%,#f6f3f5 58.772%,#f4f2f5 67.544%,#f5f3f5 76.316%,#f3eef4 85.088%,#f3eff5 93.860%);--hl-field-bottom:linear-gradient(to right,#faf2f4 6.140%,#faf5f6 14.912%,#e9e4e6 23.684%,#e5e1e2 32.456%,#e4e1e4 41.228%,#e2e0e3 50.000%,#dfdde2 58.772%,#dddce1 67.544%,#dfdde2 76.316%,#eae9ed 85.088%,#f1f2f5 93.860%)}
 .hl-main .hl-screen--calendar .hl-image-field{--hl-field-pad:7%;--hl-field-depth:38px;--hl-field-top:linear-gradient(to right,#f0eef4 6.140%,#eef0f7 14.912%,#e7e8f5 23.684%,#e7eaf3 32.456%,#ebedf5 41.228%,#eaecf6 50.000%,#e8e9f7 58.772%,#eaebf8 67.544%,#e8e9f6 76.316%,#e5e8f4 85.088%,#e5e7f2 93.860%);--hl-field-bottom:linear-gradient(to right,#faf7f7 6.140%,#faf9f7 14.912%,#e9e8e6 23.684%,#e5e4e0 32.456%,#e1e0de 41.228%,#dfdfde 50.000%,#dbdfde 58.772%,#d8dfdf 67.544%,#dce5e4 76.316%,#eceeeb 85.088%,#fcfdfa 93.860%)}
 .hl-main .hl-screen--overview .hl-image-field{--hl-field-pad:7%;--hl-field-depth:42px;--hl-field-top:linear-gradient(to right,#e8ebf5 6.140%,#e9ebf4 14.912%,#e8edf6 23.684%,#e6e9f4 32.456%,#dfe5f2 41.228%,#dee6f5 50.000%,#dae4f2 58.772%,#d8e4f2 67.544%,#d7e5f1 76.316%,#e7eff5 85.088%,#eaf1f6 93.860%);--hl-field-bottom:linear-gradient(to right,#f4eff5 6.140%,#f2f0f6 14.912%,#dedce4 23.684%,#dedce2 32.456%,#dedce3 41.228%,#dfdee4 50.000%,#e1dfe6 58.772%,#d8d7e4 67.544%,#dad9e5 76.316%,#dbddeb 85.088%,#f1f1f8 93.860%)}
 .hl-main .hl-hero-visual picture,.hl-main .hl-image-field{position:relative;isolation:isolate}
 .hl-main .hl-hero-visual picture::before,.hl-main .hl-hero-visual picture::after,
 .hl-main .hl-image-field::before,.hl-main .hl-image-field::after{
  content:'';position:absolute;left:calc(-1 * var(--hl-field-pad));width:calc(100% + 2 * var(--hl-field-pad));height:calc(2 * var(--hl-field-depth));z-index:-1;pointer-events:none;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 17%,#000 83%,transparent),linear-gradient(to bottom,transparent,rgba(0,0,0,.10) 10%,rgba(0,0,0,.4) 25%,#000 48%,#000 52%,rgba(0,0,0,.4) 75%,rgba(0,0,0,.10) 90%,transparent);
  -webkit-mask-composite:source-in,source-over;
  mask-image:linear-gradient(to right,transparent,#000 17%,#000 83%,transparent),linear-gradient(to bottom,transparent,rgba(0,0,0,.10) 10%,rgba(0,0,0,.4) 25%,#000 48%,#000 52%,rgba(0,0,0,.4) 75%,rgba(0,0,0,.10) 90%,transparent);
  mask-composite:intersect,add;
 }
 .hl-main .hl-hero-visual picture::before,.hl-main .hl-image-field::before{top:calc(-1 * var(--hl-field-depth));background:var(--hl-field-top)}
 .hl-main .hl-hero-visual picture::after,.hl-main .hl-image-field::after{bottom:calc(-1 * var(--hl-field-depth));background:var(--hl-field-bottom)}
}
/* The same settle motion now carries the background and image together. */
@media(prefers-reduced-motion:no-preference){
 .hl-main .hl-movement.is-current .hl-image-field{animation:hl-settle .65s ease-out}
 .hl-main .hl-movement.is-current .hl-image-field img{animation:none}
}
/* Keep the original copy and official badge above background continuation. */
.hl-main .hl-hero-copy,.hl-main .hl-hero-visual figcaption,.hl-main .hl-screen figcaption{position:relative;z-index:1}
/* Foreground images stay above the independently painted edge fields. */
.hl-main .hl-image-field>img,.hl-main .hl-hero-visual picture>img{position:relative;z-index:1}