.magsafe-feature{padding:var(--cs-pt, 80px) 0 var(--cs-pb, 80px);background-color:var(--cs-bg, #F5F2EE)}.magsafe-feature__inner{max-width:var(--page-width);margin:0 auto;padding:0 32px;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}.magsafe-feature__inner--image-right .magsafe-feature__text{order:1}.magsafe-feature__inner--image-right .magsafe-feature__media{order:2}.magsafe-feature__inner--image-left .magsafe-feature__media{order:1}.magsafe-feature__inner--image-left .magsafe-feature__text{order:2}.magsafe-feature__eyebrow{display:inline-block;font-family:var(--font-body);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-primary);margin-bottom:12px}.magsafe-feature__heading{font-family:var(--font-heading);font-size:40px;font-weight:700;color:var(--cs-text, #1a1a1a);letter-spacing:-.02em;line-height:1.15;margin:0 0 18px}.magsafe-feature__body{font-family:var(--font-body);font-size:16px;color:#555;line-height:1.7;max-width:480px;margin:0 0 24px}.magsafe-feature__list{list-style:none;padding:0;margin:0 0 28px;display:flex;flex-direction:column;gap:12px;max-width:480px}.magsafe-feature__list-item{display:flex;align-items:flex-start;gap:12px;font-family:var(--font-body);font-size:15px;color:var(--cs-text, #1a1a1a);line-height:1.5}.magsafe-feature__check{flex-shrink:0;margin-top:2px}.magsafe-feature__btn{display:inline-flex;align-items:center;background:var(--color-primary);color:#fff;text-decoration:none;font-family:var(--font-body);font-size:14px;font-weight:600;padding:14px 28px;border-radius:var(--radius-md);transition:background-color var(--duration-fast) var(--ease)}.magsafe-feature__btn:hover{background:var(--color-primary-dark)}.magsafe-feature__img,.magsafe-feature__img-placeholder{width:100%;aspect-ratio:var(--ms-aspect-d, 1 / 1);object-fit:cover;border-radius:var(--radius-xl);display:block}.magsafe-feature__img-placeholder{background:linear-gradient(135deg,#e0ddd9,#d0cdc9)}.magsafe-feature__media,.magsafe-feature__media picture{display:block;min-width:0}@media(max-width:767px){.magsafe-feature{padding:calc(var(--cs-pt, 80px) * .6) 0 calc(var(--cs-pb, 80px) * .6)}.magsafe-feature__inner{grid-template-columns:1fr;gap:28px;padding:0 20px}.magsafe-feature__inner--image-right .magsafe-feature__media,.magsafe-feature__inner--image-left .magsafe-feature__media{order:1}.magsafe-feature__inner--image-right .magsafe-feature__text,.magsafe-feature__inner--image-left .magsafe-feature__text{order:2}.magsafe-feature__heading{font-size:28px}.magsafe-feature__body{font-size:15px}.magsafe-feature__img,.magsafe-feature__img-placeholder{aspect-ratio:var(--ms-aspect-m, 4 / 3)}.magsafe-feature__media{width:100%;aspect-ratio:var(--ms-aspect-m, 4 / 3);max-height:320px;overflow:hidden;border-radius:var(--radius-xl)}.magsafe-feature__media picture,.magsafe-feature__img,.magsafe-feature__img-placeholder{width:100%;height:100%}}.ms-tech{--ms-bg: var(--c-night, #0f2226);--ms-signal: var(--c-signal, #7dc4cf);--ms-muted: #b8cccf;--ms-frame: #23434a;--ms-axis: #3c6a72;--ms-puck: #1c3a40;--ms-magnet: var(--color-primary, #006875);--ms-glow: rgba(0, 104, 117, .55);--ms-gutter: 16px;padding:var(--cs-pt, 112px) 0 var(--cs-pb, 112px);background-color:var(--ms-bg);color:#fff}.ms-tech__inner{max-width:var(--page-width);margin:0 auto;padding:0 var(--ms-gutter);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center}.ms-tech__copy{grid-column:1 / span 4;display:flex;flex-direction:column;align-items:flex-start;gap:32px;min-width:0}.ms-tech__figure{grid-column:6 / span 7;min-width:0}.ms-tech__head{display:flex;flex-direction:column;gap:16px}.ms-tech__eyebrow{margin:0;font-family:var(--font-tech);font-size:12px;font-weight:500;line-height:1.4;letter-spacing:.08em;text-transform:uppercase;color:var(--ms-signal)}.ms-tech__heading{margin:0;font-family:var(--font-heading);font-weight:600;font-size:clamp(1.875rem,1.1rem + 2.45vw,3.25rem);line-height:1.04;letter-spacing:-.03em;color:#fff;text-wrap:balance}.ms-tech__intro{margin:0;font-size:16px;line-height:1.6;color:var(--ms-muted);max-width:440px}.ms-tech__steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:24px}.ms-tech__step{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:12px;align-items:baseline}.ms-tech__step-num{font-family:var(--font-tech);font-size:13px;font-weight:500;line-height:1.4;color:var(--ms-signal)}.ms-tech__step-body{display:flex;flex-direction:column;gap:6px}.ms-tech__step-title{margin:0;font-family:var(--font-body);font-size:17px;font-weight:600;line-height:1.4;letter-spacing:0;color:#fff}.ms-tech__step-text{margin:0;font-size:15px;line-height:1.55;color:var(--ms-muted)}.ms-tech__link{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:15px;font-weight:600;color:var(--ms-signal);text-decoration:none;transition:color var(--duration-fast) var(--ease)}.ms-tech__link span{transition:transform var(--duration-fast) var(--ease)}.ms-tech__link:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}.ms-tech__link:hover span{transform:translate(3px)}.ms-tech__link:focus-visible{outline:2px solid var(--ms-signal);outline-offset:3px;border-radius:var(--radius-sm)}.ms-tech__schematic{position:relative;width:100%;aspect-ratio:755 / 520;border:1px solid var(--ms-frame);border-radius:var(--radius-lg);overflow:hidden;background-image:repeating-linear-gradient(0deg,rgba(125,196,207,.06) 0 1px,transparent 1px 24px),repeating-linear-gradient(90deg,rgba(125,196,207,.06) 0 1px,transparent 1px 24px);container-type:inline-size;container-name:ms-schematic}.ms-tech__schematic span{position:absolute;display:block}.ms-tech__axis{left:5.3%;right:5.3%;top:44.231%;height:0;border-top:1px dashed var(--ms-axis)}.ms-tech{--ms-a: 1;--ms-b: 1;--ms-c: 1;--ms-d: 1}.ms-tech__schematic .ms-tech__layer,.ms-tech__schematic .ms-tech__snap{top:0;right:0;bottom:0;left:0;transform-origin:50% 44.231%}.ms-tech__layer--phone{transform:translate(calc((1 - var(--ms-c)) * -33.576%),calc((1 - var(--ms-c)) * -3%)) rotate(calc((1 - var(--ms-c)) * -6deg))}.ms-tech__layer--case{transform:translate(calc((1 - var(--ms-a)) * -8.411%),calc((1 - var(--ms-a)) * -2%)) rotate(calc((1 - var(--ms-a)) * 3deg))}.ms-tech__layer--magnet{transform:translate(calc((1 - var(--ms-a)) * 14.371%),calc((1 - var(--ms-a)) * -5%))}.ms-tech__layer--charger{transform:translate(calc((1 - var(--ms-b)) * 23.974%),calc((1 - var(--ms-b)) * -3%))}.ms-tech.is-anim .ms-tech__snap{transition:transform .3s var(--ease)}.ms-tech.is-anim:not(.is-docked) .ms-tech__snap{transform:translate(10%)}.ms-tech__layer--phone-label{transform:translate(calc((1 - var(--ms-c)) * -33.576%))}.ms-tech__layer--case-label{transform:translate(calc((1 - var(--ms-a)) * -8.411%))}.ms-tech__layer--magnet-label{transform:translate(calc((1 - var(--ms-a)) * 14.371%))}.ms-tech__layer--charger-label{transform:translate(calc((1 - var(--ms-b)) * 23.974% + 10%))}.ms-tech.is-anim.is-docked .ms-tech__snap{transition:transform .52s cubic-bezier(.34,1.3,.64,1)}.ms-tech.is-anim .ms-tech__layer,.ms-tech.is-anim .ms-tech__snap{will-change:transform}.ms-tech__axis{opacity:calc(1 - var(--ms-c) * .45)}.ms-tech__phone{left:40.994%;top:17.308%;width:18.013%;height:53.846%;border:1.5px solid var(--ms-signal);border-radius:20.6%/10%}.ms-tech__schematic .ms-tech__camera{left:9%;top:4.3%;width:37.6%;height:20.2%;border:1.5px solid var(--ms-signal);border-radius:24%/21.4%}.ms-tech__case{left:39.669%;top:15%;width:20.662%;height:58.462%;border:1.5px solid #ffffff;border-radius:20.5%/10.5%}.ms-tech__schematic .ms-tech__case-ring{left:50%;top:50%;width:60%;aspect-ratio:1;border:1.5px dashed var(--ms-signal);border-radius:50%;transform:translate(-50%,-50%);opacity:calc(1 - var(--ms-a))}.ms-tech__magnet{left:50%;top:44.231%;width:12.397%;aspect-ratio:1;border:5px solid var(--ms-magnet);border-width:clamp(4px,.8cqw,6px);border-radius:50%;transform:translate(-50%,-50%);box-shadow:inset 0 0 0 1px var(--ms-signal),0 0 28px var(--ms-glow);box-shadow:inset 0 0 0 1px var(--ms-signal),0 0 clamp(22px,4.25cqw,32px) var(--ms-glow)}.ms-tech__charger{left:50%;top:44.231%;width:9.6%;aspect-ratio:1;background:var(--ms-puck);border:1.5px solid var(--ms-signal);border-radius:50%;transform:translate(-50%,-50%)}.ms-tech__cable{left:calc(50% - .75px);top:51%;width:1.5px;height:16.5%;background:var(--ms-signal)}.ms-tech__schematic .ms-tech__pulse,.ms-tech__schematic .ms-tech__flash{left:50%;top:44.231%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);opacity:0;pointer-events:none}.ms-tech__schematic .ms-tech__pulse{width:12.397%;border:1.5px solid var(--ms-signal);box-shadow:0 0 18px var(--ms-glow)}.ms-tech__schematic .ms-tech__flash{width:30%;background:radial-gradient(circle,#7dc4cf57,#00687529 38%,#00687500 68%)}.ms-tech.is-anim.is-docked .ms-tech__pulse{animation:ms-tech-pulse .95s cubic-bezier(.22,1,.36,1) .2s both}.ms-tech.is-anim.is-docked .ms-tech__flash{animation:ms-tech-flash .9s var(--ease) .16s both}@keyframes ms-tech-pulse{0%{opacity:.95;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(2.1)}}@keyframes ms-tech-flash{0%{opacity:0}28%{opacity:1}to{opacity:0}}.ms-tech__schematic .ms-tech__label{transform:translate(-50%);white-space:nowrap;font-family:var(--font-tech);font-size:10px;font-size:clamp(9px,1.46cqw,11px);font-weight:500;line-height:1.3;letter-spacing:.06em;text-transform:uppercase;color:var(--ms-muted)}.ms-tech__schematic .ms-tech__label>span{position:static;display:inline}.ms-tech__schematic .ms-tech__label--phone{left:50%;top:76.923%;opacity:calc(1 - var(--ms-c) * 2.5)}.ms-tech__schematic .ms-tech__label--case{left:50%;top:76.923%;color:#fff;opacity:calc(1 - var(--ms-c) * 2.5)}.ms-tech__schematic .ms-tech__label--magnet{left:50%;top:57.692%;color:var(--ms-signal);opacity:calc((1 - var(--ms-b)) * 4)}.ms-tech__schematic .ms-tech__label--charger{left:50%;top:57.692%;padding:1px 6px;background:var(--ms-bg);opacity:calc(1 - var(--ms-b) * 2.5)}.ms-tech__schematic .ms-tech__callout{display:flex;align-items:center;gap:6px;transform:translateY(-50%);white-space:nowrap;font-family:var(--font-tech);font-size:10px;font-size:clamp(9px,1.46cqw,11px);font-weight:500;line-height:1.3;letter-spacing:.06em;text-transform:uppercase;color:var(--ms-muted);opacity:calc(var(--ms-d) * 1.6 - var(--ms-i, 0) * .2);pointer-events:none}.ms-tech__schematic .ms-tech__callout>span{position:static;display:block}.ms-tech__schematic .ms-tech__callout-text>span{position:static;display:inline}.ms-tech__schematic .ms-tech__callout-line{flex:1 1 auto;min-width:12px;height:1px;background:currentColor;opacity:.5;transform:scaleX(var(--ms-d));transform-origin:right center}.ms-tech__schematic .ms-tech__callout-dot{flex:0 0 auto;width:5px;height:5px;margin-right:-2.5px;border-radius:50%;background:currentColor}.ms-tech__schematic .ms-tech__callout--phone{left:4%;width:38.6%;top:25%;--ms-i: 0}.ms-tech__schematic .ms-tech__callout--case{left:4%;width:35.669%;top:64%;color:#fff;--ms-i: 1}.ms-tech__schematic .ms-tech__callout--magnet{left:55.5%;right:4%;top:40%;color:var(--ms-signal);--ms-i: 2}.ms-tech__schematic .ms-tech__callout--charger{left:50%;right:4%;top:62%;--ms-i: 3}.ms-tech__schematic .ms-tech__callout--magnet,.ms-tech__schematic .ms-tech__callout--charger{flex-direction:row-reverse}.ms-tech__schematic .ms-tech__callout--magnet .ms-tech__callout-line,.ms-tech__schematic .ms-tech__callout--charger .ms-tech__callout-line{transform-origin:left center}.ms-tech__schematic .ms-tech__callout--magnet .ms-tech__callout-dot,.ms-tech__schematic .ms-tech__callout--charger .ms-tech__callout-dot{margin-right:0;margin-left:-2.5px}.ms-tech__schematic .ms-tech__label>.ms-tech__label-short,.ms-tech__schematic .ms-tech__callout-text>.ms-tech__label-short{display:none}@container ms-schematic (max-width: 560px){.ms-tech__schematic .ms-tech__label>.ms-tech__label-long,.ms-tech__schematic .ms-tech__callout-text>.ms-tech__label-long{display:none}.ms-tech__schematic .ms-tech__label>.ms-tech__label-short,.ms-tech__schematic .ms-tech__callout-text>.ms-tech__label-short{display:inline}.ms-tech__schematic .ms-tech__label,.ms-tech__schematic .ms-tech__callout{letter-spacing:.04em}.ms-tech__schematic .ms-tech__callout{gap:4px}}@supports not (container-type: inline-size){@media(max-width:600px){.ms-tech__schematic .ms-tech__label>.ms-tech__label-long,.ms-tech__schematic .ms-tech__callout-text>.ms-tech__label-long{display:none}.ms-tech__schematic .ms-tech__label>.ms-tech__label-short,.ms-tech__schematic .ms-tech__callout-text>.ms-tech__label-short{display:inline}}}.ms-tech.is-anim .ms-tech__step{opacity:.62;transition:opacity .45s var(--ease)}.ms-tech.is-anim .ms-tech__step[data-ms-step=done]{opacity:.8}.ms-tech.is-anim .ms-tech__step[data-ms-step=active],.ms-tech.is-anim.is-complete .ms-tech__step,.ms-tech.is-anim.is-editing .ms-tech__step{opacity:1}.ms-tech.is-anim .ms-tech__step-num{position:relative}.ms-tech.is-anim .ms-tech__step-num:after{content:"";position:absolute;left:0;top:calc(100% + 4px);width:18px;height:2px;border-radius:1px;background:var(--ms-signal);transform:scaleX(0);transform-origin:left center;transition:transform .45s var(--ease-spring)}.ms-tech.is-anim .ms-tech__step[data-ms-step=active] .ms-tech__step-num:after{transform:scaleX(1)}.ms-tech.is-anim.is-complete .ms-tech__step .ms-tech__step-num:after{transform:scaleX(0)}.ms-tech.ms-tech--init .ms-tech__step,.ms-tech.ms-tech--init .ms-tech__step-num:after,.ms-tech.ms-tech--init .ms-tech__snap{transition:none!important}@media(prefers-reduced-motion:reduce){.ms-tech__schematic .ms-tech__pulse,.ms-tech__schematic .ms-tech__flash{animation:none!important}.ms-tech .ms-tech__snap,.ms-tech .ms-tech__step,.ms-tech .ms-tech__step-num:after{transition:none!important}}@media(min-width:768px){.ms-tech{--ms-gutter: 32px}}@media(min-width:1200px){.ms-tech{--ms-gutter: clamp(32px, 4.45vw, 64px)}}@media(min-width:990px)and (max-width:1199px){.ms-tech__copy{grid-column:1 / span 5}.ms-tech__figure{grid-column:6 / span 7}}@media(max-width:989px){.ms-tech{padding-top:min(calc(var(--cs-pt, 112px) * .6),40px);padding-bottom:min(calc(var(--cs-pb, 112px) * .6),40px)}.ms-tech__inner{display:flex;flex-direction:column;align-items:stretch;gap:22px}.ms-tech__copy{display:contents}.ms-tech__head{order:1;gap:10px}.ms-tech__figure{order:2;width:100%;max-width:600px}.ms-tech__steps{order:3;gap:16px}.ms-tech__link{order:4;align-self:flex-start}.ms-tech__heading{line-height:1.08}.ms-tech__step{grid-template-columns:36px minmax(0,1fr);column-gap:0}.ms-tech__step-body{gap:4px}.ms-tech__step-title{font-size:16px}.ms-tech__step-text{font-size:14px;line-height:1.5}.ms-tech__schematic{background-image:repeating-linear-gradient(0deg,rgba(125,196,207,.06) 0 1px,transparent 1px 20px),repeating-linear-gradient(90deg,rgba(125,196,207,.06) 0 1px,transparent 1px 20px)}}.ms-tech__film{position:relative;aspect-ratio:16 / 9;border-radius:var(--radius-lg, 12px);overflow:hidden;background-color:#0b1b1e;box-shadow:0 0 0 1px var(--ms-frame);isolation:isolate}.ms-tech__film-poster,.ms-tech__film-poster img,.ms-tech__video{position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:100%;height:100%;object-fit:cover}.ms-tech__video{opacity:0;transition:opacity .45s var(--ease, ease)}.ms-tech__video.is-ready{opacity:1}.ms-tech__video--mobile{display:none}.ms-tech__film--portrait{aspect-ratio:9 / 16;width:min(100%,43.875vh);width:min(100%,43.875svh);margin-inline:auto}.ms-tech__video-toggle,.ms-tech__video-sound{position:absolute;right:12px;bottom:12px;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid rgba(125,196,207,.4);border-radius:50%;background-color:#0f22269e;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;cursor:pointer;transition:background-color var(--duration-fast) var(--ease)}.ms-tech__video-sound{right:auto;left:12px}.ms-tech__video-toggle[hidden],.ms-tech__video-sound[hidden]{display:none}.ms-tech__video-toggle:hover,.ms-tech__video-sound:hover{background-color:#0f2226d9}.ms-tech__video-toggle:focus-visible,.ms-tech__video-sound:focus-visible{outline:2px solid var(--ms-signal);outline-offset:3px}.ms-tech__video-icon{width:18px;height:18px;fill:currentColor}.ms-tech__video-toggle[data-state=paused] .ms-tech__video-icon--pause,.ms-tech__video-toggle[data-state=playing] .ms-tech__video-icon--play,.ms-tech__video-sound[data-state=muted] .ms-tech__video-icon--sound,.ms-tech__video-sound[data-state=on] .ms-tech__video-icon--muted{display:none}@media(min-width:990px){.ms-tech--video .ms-tech__inner{grid-template-rows:1fr auto auto auto 1fr}.ms-tech--video .ms-tech__copy{display:contents}.ms-tech--video .ms-tech__head{grid-column:1 / span 4;grid-row:2}.ms-tech--video .ms-tech__steps{grid-column:1 / span 4;grid-row:3;margin-top:32px}.ms-tech--video .ms-tech__link{grid-column:1 / span 4;grid-row:4;justify-self:start;margin-top:32px}.ms-tech--video .ms-tech__figure{grid-column:6 / span 7;grid-row:1 / -1;align-self:center}}@media(min-width:990px)and (max-width:1199px){.ms-tech--video .ms-tech__head,.ms-tech--video .ms-tech__steps,.ms-tech--video .ms-tech__link{grid-column:1 / span 5}}@media(max-width:989px){.ms-tech__figure--video{max-width:none}.ms-tech__film{width:min(100%,calc(78vh * 16 / 9));width:min(100%,calc(78svh * 16 / 9));margin-inline:auto}.ms-tech__film--portrait{width:min(100%,43.875vh);width:min(100%,43.875svh)}}@media(max-width:767px)and (orientation:portrait){.ms-tech__figure--video:not(.ms-tech__figure--landscape){width:calc(100% + 2 * var(--ms-gutter));margin-inline:calc(-1 * var(--ms-gutter))}.ms-tech__film:not(.ms-tech__film--landscape){aspect-ratio:9 / 16;width:100%;max-height:85vh;max-height:85svh;border-radius:0;box-shadow:none}.ms-tech__film:not(.ms-tech__film--landscape) .ms-tech__video-toggle{right:var(--ms-gutter);bottom:var(--ms-gutter)}.ms-tech__film:not(.ms-tech__film--landscape) .ms-tech__video-sound{left:var(--ms-gutter);bottom:var(--ms-gutter)}.ms-tech__video--desktop{display:none}.ms-tech__video--mobile{display:block}}@media(prefers-reduced-motion:reduce){.ms-tech__video{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/14/assets/section-magsafe-feature.css.map */