main.au7 { --au-hair: 1px; --au-ink: var(--p-ink); --au-ink-62: var(--p-ink-a62); }
@media (min-resolution: 2dppx) { main.au7 { --au-hair: .5px; } }
.au7 h1, .au7 h2, .au7 h3 { font-weight: var(--font-weight-regular); margin: 0; }
.au7 p, .au7 figure, .au7 blockquote, .au7 ol, .au7 ul { margin: 0; }
.au7 p, .au7 li, .au7 blockquote { text-wrap: pretty; }
.au7 .nw { white-space: nowrap; }
.au7 .t-label { font: 400 var(--font-size-label)/var(--line-height-label) var(--font-mono); letter-spacing: var(--letter-spacing-label); text-transform: uppercase; }



.au7 .bx { display: grid; column-gap: var(--gut);
  grid-template-columns: minmax(0, 1fr) repeat(12, minmax(0, calc((var(--max) - 11 * var(--gut)) / 12))) minmax(0, 1fr); }
.au7 .scr-full { height: max(640px, 100svh); }
.au7 .bleed { position: relative; margin: 0; overflow: hidden; background: var(--color-bg) center / cover no-repeat; }   

.al7 .al-film { background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//gAQTGF2YzYyLjI4LjEwMQD/2wBDAAwICQsJCAwLCgsODQwOEh4UEhEREiUbHBYeLCcuLisnKyoxN0Y7MTRCNCorPVM+QkhKTk9OLztWXFVMW0ZNTkv/2wBDAQ0ODhIQEiQUFCRLMisyS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0v/wAARCAAgADgDASIAAhEBAxEB/8QAGQAAAwEBAQAAAAAAAAAAAAAABAUGAAMB/8QAJRAAAgICAgICAQUAAAAAAAAAAQIAAwQRBRIxQRQhExUjMlFx/8QAGQEAAgMBAAAAAAAAAAAAAAAAAAMBAgQF/8QAHREAAwEAAgMBAAAAAAAAAAAAAAERAgMhEjFRYf/aAAwDAQACEQMRAD8AZKwLAQ62isUb9kRL8pNbDCeUclZbZ+PtseotQYsafcKPh6WKnr4j0My1EHxqKuDWyus9h5jUAvUwJ1uWXoX4xk/l2A3NAi/ayH5HF3G0srfUGyMZsNO9viBITS30Joku5uuo6E0CCOwrrDpbGMuOM47C+It3cGzzqQ7Jph1jTBXLVlYOen9RMadOvnlzriWbIVNvNWY46Ip+pzHO5r/xRoMl9WtuBuGYvJ4yHRUQrM1z8OiZvJW661tO11Obk0H5C6UCNsDNptUFVE7Z+UDiuoHqXXYrW/wgv0+prSCPc0JVv32/2aXM5//Z"); background-position: 64% 50%; }
.bp7 .bp-drop { background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAwICQsJCAwLCgsODQwOEh4UEhEREiUbHBYeLCcuLisnKyoxN0Y7MTRCNCorPVM+QkhKTk9OLztWXFVMW0ZNTkv/2wBDAQ0ODhIQEiQUFCRLMisyS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0v/wAARCAAlADgDASIAAhEBAxEB/8QAGwAAAQUBAQAAAAAAAAAAAAAAAAECAwQFBgf/xAAkEAABBAIBBAIDAAAAAAAAAAAAAQIDEQQSIQUTMmEGIjFBUf/EABYBAQEBAAAAAAAAAAAAAAAAAAABAv/EABURAQEAAAAAAAAAAAAAAAAAAAAR/9oADAMBAAIRAxEAPwD0fYNhthZkP2UjWVe5rQtibNv2CpBRmwbASAR7ABHsF+zPdlapypXlzXL4KVGvt7K/cXv1fBz2T1mWBVReTMX5JKs1I1RB3qOBHIcvidWmmr9GjHnKnk7kDZRyAZ7cm0uwAoL9vyIkbf4AARS4UMnLmldOnY6S+CABRbbjxx+LaGujbdgBA5HK1KQAAK//2Q=="); background-position: 50% 62%; }
.au7 .bleed > :is(img, video), .au7 .bleed > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.au7 [data-relay]:has(> .au-key) { position: relative; overflow: clip; isolation: isolate; }
.au7 .au-key { z-index: -1; left: -16%; top: 0; width: 72%; height: 100%; }   
.au7 :is(.al-a1, .ca-r1, .nw-head, .ct-k1, .cr-head) > .au-key { left: -20%; top: -40%; width: 88%; height: 140%; }

.au7 .au-top { margin-top: calc(var(--nav-height) + clamp(40px, 6.4vh, 64px)); }

.au7 .au-who { margin: 0 0 var(--space-16); color: inherit; }

.au7 br.m { display: none; }
@media (max-width: 640px) { .au7 br.m { display: inline; } .au7 br.d { display: none; } }

.au7 .on-pic { color: var(--au-ink); }

.au7 .au-door { margin-top: var(--space-32); }
.au7 .au-door .tlink { font-size: var(--font-size-body); min-height: 44px; background-position: 0 calc(100% - 9px); }
.au7 .au-door .tlink i, .au7 .au-next .tlink i { transition: transform var(--t-move) var(--ease-out); }
.au7 .au-door .tlink:hover i, .au7 .au-next .tlink:hover i { transform: translateX(var(--nudge)); }

html:not(.review) .au7 [data-meta] { display: none !important; }
.au7 .au-slot { margin-top: var(--space-16); font-size: var(--font-size-caption); line-height: var(--line-height-small); color: var(--color-text-muted); }

.au7 .pl, .au7 .pl > img { display: block; width: 100%; height: auto; }
html[data-theme="light"] .au7 .pl-d, html:not([data-theme="light"]) .au7 .pl-l { display: none; }

.au7 .au-note { font-size: var(--font-size-caption); line-height: var(--line-height-small); color: var(--color-text-muted); }


.au7 .au-end { padding-top: var(--sec); padding-bottom: 0; }
.au7 .au-sheet { grid-column: 1 / -1; min-height: clamp(440px, 66vh, 640px); margin-left: calc(var(--au-sheet-x, 0px) + var(--gut) / 2);
  padding: clamp(64px, 9vh, 104px) var(--gut) var(--space-block) calc(var(--gut) / 2); border-radius: var(--glass-r) 0 0 var(--glass-r); display: flex; flex-direction: column; justify-content: flex-start; }

main.au7:has(> .au-end:last-child) + footer.wrap, main.ct7 + footer.wrap { margin-top: 0; }
main.au7:has(> .au-end:last-child) + footer[data-sys-footer] .sys-foot, main.ct7 + footer[data-sys-footer] .sys-foot { border-top-color: transparent; }
.au7 .au-sheet { --au-sheet-x: max(0px, (100% - var(--max) - 2 * var(--gut)) / 2); }   

.au7 .au-sheet.glass.dk, .ct7 .ct-win.glass.dk { background: radial-gradient(90% 120% at 100% 0%, rgba(214,226,255,.12), rgba(214,226,255,0) 70%), linear-gradient(180deg, rgba(12,18,30,.7), rgba(11,15,24,.8)), var(--sys-ink-deep); }
.au7 .au-sheet-t { position: relative; z-index: 1; max-width: min(100%, 52rem); }
.au7 .au-sheet > .sys-bundle { left: auto; right: 0; width: 62%; }   
@media (max-width: 1300px) {   
  .au7 .au-sheet > .sys-bundle { top: auto; bottom: 0; height: 36%; width: 76%; }
  .au7 .au-sheet { --wy: 78% !important; }
}
.au7 .au-line { max-width: 15em; }
.au7 .au-go { margin-top: var(--space-40); }

.au7 .au-api { margin-top: var(--space-24); font: 400 var(--font-size-small)/1.5 var(--font-mono); color: var(--color-text-muted); overflow-wrap: anywhere; }
.au7 .au-api code { font: inherit; color: var(--color-text); }
.au7 .au-api-r { white-space: nowrap; }
.au7 .au-api-r i { font-style: normal; }
.au7 .au-api + .au-go { margin-top: var(--space-24); }

.au7 .au-next { grid-column: 2 / -2; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: last baseline;
  padding-top: var(--sec); padding-bottom: var(--space-block); }
.au7 .au-next .tlink { grid-column: 1 / span 8; justify-self: start; gap: .32em; align-items: baseline; min-height: 0; background: none;
  font-size: var(--font-size-title); line-height: var(--line-height-title); letter-spacing: var(--sys-ls-h2, -.03em); font-weight: var(--font-weight-regular); }
.au7 .au-next .tlink i { transition: transform var(--t-base) var(--ease-out); }
.au7 .au-next .tlink:hover i { transform: translateX(4px); }
.au7 .au-next .btn { grid-column: 10 / span 3; justify-self: start; }
@media (max-width: 1023px) { .au7 .au-next .btn { grid-column: 9 / span 4; } }
@media (max-width: 860px) { .au7 .au-next { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-32); align-items: start; } .au7 .au-next :is(.tlink, .btn) { grid-column: 1; } }



.al7 .al-a1 { grid-template-rows: auto 1fr; }
.al7 .al-film { grid-column: 8 / -1; grid-row: 1 / -1; }
.al7 .al-film > video { object-position: 64% 50%; }   
.al7 .al-a1 .au-hd { grid-column: 2 / 8; grid-row: 1; padding-right: var(--space-16); }
.al7 .al-plan { position: relative; grid-column: 2 / 7; grid-row: 2; align-self: end; justify-self: start; color: var(--color-text);
  width: clamp(200px, calc((100svh - var(--al-plan-top, 548px)) * 1.494), 100%); margin: var(--space-40) 0 clamp(48px, 8vh, 88px); }
.al7 .al-plan-m { display: none; }   
.al7 .al-plan .t-label { position: absolute; left: 5.4%; top: 2.2%; margin: 0; line-height: 1; color: var(--color-text-muted); }   
.al7 .al-plate { display: block; width: 100%; height: auto; overflow: visible; }
.al7 .al-plate .pl-o { stroke-width: var(--au-hair); stroke-opacity: .38; vector-effect: non-scaling-stroke; }
.al7 .al-plate .pl-w { stroke-width: var(--au-hair); stroke-opacity: .22; vector-effect: non-scaling-stroke; }
.al7 .al-plate .pl-f { fill-opacity: .13; }
:is(html[data-theme="dark"], html.dusk) .al7 .al-plate .pl-o { stroke-opacity: .56; }
:is(html[data-theme="dark"], html.dusk) .al7 .al-plate .pl-w { stroke-opacity: .38; }
:is(html[data-theme="dark"], html.dusk) .al7 .al-plate .pl-f { fill-opacity: .22; }


.al7 .al-a2 { padding-top: var(--sec); }
.al7 .al-a2 h2 { grid-column: 2 / span 8; max-width: 19em; }


.al7 .al-a3 { padding-top: var(--sec); align-items: start; }
.al7 .al-a3-t { grid-column: 2 / 7; grid-row: 1; }
.al7 .al-a3 .au-api { margin-top: var(--space-24); font-size: var(--font-size-caption); }
.al7 .al-a3 .au-api + .au-door { margin-top: var(--space-24); }
.al7 .al-rec { grid-column: 7 / -2; grid-row: 1; justify-self: end; width: 100%; max-width: 760px; margin: 0; border-radius: var(--radius-media); overflow: hidden; }   



.bp7 .bp-b1 { grid-template-rows: auto 1fr; }
.bp7 .bp-drop { grid-column: 1 / -1; grid-row: 1 / -1; }
.bp7 .bp-drop > img { object-position: 50% 62%; }
.bp7 .bp-b1 .au-hd { grid-column: 2 / span 7; grid-row: 1; z-index: 2; }


.bp7 .bp-b2 { padding-top: var(--sec); grid-template-rows: auto 1fr; }
.bp7 .bp-b2-t { grid-column: 2 / 7; grid-row: 1; padding-top: var(--space-24); }
.bp7 .bp-bench { grid-column: 8 / -1; grid-row: 1 / -1; min-height: clamp(520px, 50vw, 720px); }
.bp7 .bp-bench > img { object-position: 36% 50%; }
.bp7 .bp-steps { grid-column: 7 / -1; grid-row: 1 / -1; align-self: end; justify-self: start; width: clamp(340px, 31vw, 450px); z-index: 3; margin: 0 0 clamp(40px, 6vw, 88px); padding: var(--space-12) var(--space-32); }
.bp7 .bp-steps ol { list-style: none; padding: 0; margin: 0; counter-reset: st; }
.bp7 .bp-steps li { display: flex; align-items: baseline; gap: var(--space-16); padding: 20px 0; font-size: var(--font-size-heading); line-height: var(--line-height-heading); letter-spacing: var(--letter-spacing-heading); color: var(--color-text); counter-increment: st; }
.bp7 .bp-steps li::before { content: counter(st); flex: none; width: 1.1em; font: 400 var(--font-size-label)/1 var(--font-mono); color: var(--color-text-muted); }
.bp7 .bp-steps li + li { border-top: 1px solid rgba(12,15,23,.14); }

:is(html[data-theme="dark"], html.dusk) .bp7 .bp-steps.glass[data-on="light"] { color: #fff; --color-text: #fff; --color-text-muted: rgba(236,240,247,.74);
  background: radial-gradient(90% 120% at 100% 0%, rgba(214,226,255,.1), rgba(214,226,255,0) 70%), linear-gradient(180deg, rgba(12,18,30,.72), rgba(11,15,24,.82));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 1px 0 0 rgba(255,255,255,.14); }
:is(html[data-theme="dark"], html.dusk) .bp7 .bp-steps li + li { border-top-color: rgba(255,255,255,.2); }

.bp7 .bp-b2b { padding-top: var(--sec); }
.bp7 .bp-pkg { position: relative; grid-column: 2 / -2; grid-row: 1; justify-self: start; width: 100%; max-width: 880px; margin: 0; border-radius: var(--radius-media); overflow: hidden; }      
.bp7 .bp-pkg > .plate-film { position: absolute; left: 0; top: 0; width: 46.67%; height: 100%; object-fit: cover; object-position: 53.4% 50%;
  filter: grayscale(1) contrast(1.06) sepia(.12) hue-rotate(180deg); pointer-events: none; }
@media (max-width: 860px) { .bp7 .bp-pkg { max-width: 390px; justify-self: start; } .bp7 .bp-pkg > .plate-film { width: 100%; height: 40.9%; object-position: 50% 50%; }
  .al7 .al-rec { max-width: 352px; } }



.co7 .co-pic img { object-position: 50% 44%; }   

.co7 .co-c2 { padding-top: var(--sec); align-items: center; }
.co7 .co-c2 .co-say { grid-column: 2 / span 6; grid-row: 1; padding-right: var(--space-16); }
.co7 .co-arch { grid-column: 8 / -1; grid-row: 1; aspect-ratio: 960 / 538; }
.co7 .co-arch > :is(video, img) { left: -1.6% !important; width: 103.2% !important; max-width: none !important; }   
.co7 .co-q { margin: 0; }
html:root:root .co7 .co-q .t-quote { font-size: var(--font-size-title); line-height: 1.1; letter-spacing: -.03em; max-width: 15em; color: var(--color-text); }
.co7 .co-q .q-a, .co7 .co-q .q-b { display: block; text-wrap: balance; }
.co7 .co-q .q-b { text-indent: 0; color: var(--color-text-muted); }
.co7 .co-by { margin-top: var(--space-24); display: grid; gap: var(--space-4); justify-items: start; }
html:root .co7 .co-by .t-attrib { font-size: var(--font-size-small); line-height: var(--line-height-small); color: var(--color-text-muted); }
.co7 .co-by .pending { font-size: var(--font-size-caption); color: var(--color-text-muted); }


.co7 .co-c3 { padding-top: var(--sec); }
.co7 .co-c3 .co-say { grid-column: 2 / span 8; }
.co7 .au-next { padding-top: var(--space-block); }
.co7 .au-next .btn { grid-column: 1 / span 6; }   

.co7 .co-c4 { padding-top: var(--space-block); }
.co7 .co-c4 > * { grid-column: 2 / span 8; }



:is(.ca7 .ca-r1, .co7 .co-c1) { display: block; position: relative; padding: 0; }
:is(.ca7, .co7) .ca-frame { position: absolute; left: max(var(--gut), (100% - var(--max)) / 2); right: max(var(--gut), (100% - var(--max)) / 2); top: calc(var(--nav-height) + var(--space-12)); bottom: var(--gut); overflow: hidden; background: var(--color-bg); border-radius: var(--radius-media); }   
:is(.ca7, .co7) .ca-frame > .glass-band { border-radius: 0 0 var(--radius-media) var(--radius-media); }   
:is(.ca7, .co7) .ca-pic { position: absolute; inset: 0; }
.ca7 .ca-pic img { object-position: 50% 100%; }   
:is(.ca7, .co7) .ca-frame > .glass-band { z-index: 2; min-height: 36%; display: flex; flex-direction: column; justify-content: flex-end; }
.ca7 .ca-frame > .glass-band { min-height: 0; }
:is(.ca7, .co7) .ca-frame .gb-txt { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-24); padding: 48px var(--gut) var(--gut); }
.ca7 .ca-frame .gb-txt { row-gap: var(--space-12); padding: 40px var(--gut) 32px; }
:is(.ca7, .co7) .ca-frame .gb-txt h1 { max-width: 15em; }
.ca7 .ca-r1 .au-door { margin: 0; }

html:root:root .ca7 .ca-big { font-size: var(--font-size-display); line-height: 1.02; }
@media (max-width: 370px) { html:root:root .ca7 .ca-big { font-size: var(--sys-fs-h1); line-height: 1.04; } }   
.ca7 .ca-r1 .ca-go { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12) var(--space-32); }
.ca7 .ca-r1 .ca-go .tlink { min-height: 44px; }

.ca7 .ca-r2 { padding-top: var(--sec); padding-bottom: var(--space-block); }
.ca7 .ca-r2-in { grid-column: 2 / -2; }   
.ca7 .ca-r2-in > :is(h2, .co-nofit) { max-width: 40em; }


@media (max-width: 1100px) and (min-width: 641px) {
  
  .bp7 .bp-b2 { grid-template-rows: auto auto; }
  .bp7 .bp-b2-t { grid-column: 2 / -2; padding-top: 0; }
  .bp7 .bp-bench { grid-column: 5 / -1; grid-row: 2; min-height: 0; height: clamp(420px, 56vw, 560px); margin-top: var(--space-48); }
  .bp7 .bp-steps { grid-column: 2 / -1; grid-row: 2; width: clamp(300px, 40vw, 400px); padding: var(--space-8) var(--space-24); margin-bottom: var(--space-48); }
  .bp7 .bp-steps li { padding: 16px 0; }
  .al7 .al-a3-t { grid-column: 2 / span 5; }
  .al7 .al-rec { grid-column: 7 / -2; }
  .co7 .co-c2 .co-say { grid-column: 2 / span 6; }
  .co7 .co-arch { grid-column: 8 / -1; }
  .al7 .al-a1 .au-hd { grid-column: 2 / 9; }   
  .al7 .al-film { grid-column: 9 / -1; }
}


@media (max-width: 900px) and (min-width: 641px) {
  .al7 .al-a1 { grid-template-rows: auto 1fr; }
  .al7 .al-a1 .au-hd { grid-column: 2 / -2; }
  .al7 .al-a1 .al-plan { display: none; }
  .al7 .al-film { grid-column: 1 / -1; grid-row: 2; margin-top: var(--space-40); }
  .al7 .al-film > video { object-position: 100% 50%; }   
  .al7 .al-film { background-position: 100% 50%; }
  .al7 .al-plan-m { display: block; grid-column: 2 / span 6; margin-top: var(--space-48); }
  .al7 .al-plan-m .al-plan { width: 100%; margin: 0; }
}


@media (max-width: 640px) {
  .au7 .bx { grid-template-columns: 0 repeat(4, minmax(0, 1fr)) 0; }
  .au7 .bx > * { grid-column: 2 / -2 !important; }
  .au7 .bx > .bleed { grid-column: 1 / -1 !important; }
  .au7 .scr-full { height: max(600px, 100svh); }
  .au7 .au-top { margin-top: calc(var(--nav-height) + 24px); }
  .au7 .au-who { margin-bottom: var(--space-12); }
  
  .au7 .au-end { padding-top: var(--space-block); }
  .au7 .bx > .au-sheet { grid-column: 1 / -1 !important; min-height: 480px; margin-left: 0; padding: 48px var(--gut) 56px; }
  .au7 .au-sheet > .sys-bundle { width: 100%; height: 34%; }
  .au7 .au-go { margin-top: var(--space-32); }
  .au7 .au-go .btn { max-width: 100%; }
  .au7 .au-next { grid-column: 2 / -2; }

  
  .al7 .al-a1 { grid-template-rows: auto 1fr; }
  .al7 .al-a1 .al-plan { display: none; }
  .al7 .al-film { grid-row: 2; margin-top: var(--space-32); }
  .al7 .al-film > video { object-position: 100% 50%; }   
  .al7 .al-film { background-position: 100% 50%; }
  .al7 .al-plan-m { display: block; margin-top: var(--space-48); }
  .al7 .al-plan-m .al-plan { width: min(320px, 100%); margin: 0; }
  .al7 .al-a3 { row-gap: var(--space-40); }
  .al7 .al-a3-t, .al7 .al-rec { grid-row: auto; }

  .bp7 .bp-b1 { grid-template-rows: auto 1fr 52%; }
  .bp7 .bp-b1 .au-hd { color: var(--color-text); }   
  .bp7 .bp-drop { grid-row: 3; }
  .bp7 .bp-drop > img { object-position: 50% 50%; }
  .bp7 .bp-drop { background-position: 50% 50%; }
  .bp7 .bp-b2 { grid-template-rows: auto auto auto; }
  .bp7 .bp-bench { grid-row: 3; min-height: 0; height: 360px; margin-top: 0; }
  .bp7 .bp-steps { grid-row: 2; align-self: end; justify-self: end; width: min(300px, 86%); margin: var(--space-40) 0 -96px; padding: var(--space-4) var(--space-20); }   
  .bp7 .bp-steps li { padding: 14px 0; font-size: var(--font-size-lead); }
  .bp7 .bp-b2b { padding-top: var(--space-block); }

  .co7 .co-pic img { object-position: 34% 50%; }   
  .co7 .co-c2 .co-say { grid-row: 1; }
  .co7 .co-arch { grid-column: 1 / -1; grid-row: 2; margin-top: var(--space-40); }

  :is(.ca7, .co7) .ca-frame { top: calc(var(--nav-height) + 4px); }
  .ca7 .ca-pic img { object-position: 50% 100%; }
  .co7 .ca-frame > .glass-band { min-height: 36%; }
  :is(.ca7, .co7) .ca-frame .gb-txt { row-gap: var(--space-16); padding: 32px 20px 24px; }
  .ca7 .ca-frame .gb-txt { row-gap: var(--space-8); padding: 24px 20px 18px; }
}