@layer reset,tokens,base;@layer components{.marketing-hero{text-align:center;padding-block:clamp(3rem,7vw,7rem)}.marketing-hero-frame{width:min(100%, var(--marketing-container));flex-direction:column;align-items:center;gap:clamp(1.5rem,4vw,3rem);margin-inline:auto;display:flex}.marketing-hero-copy{flex-direction:column;align-items:center;width:min(100%,46rem);display:flex}.marketing-hero h1{font-family:var(--fx-font-display);letter-spacing:-.04em;text-wrap:balance;overflow-wrap:anywhere;margin:0 0 1.5rem;font-size:clamp(3rem,5.8vw,5.6rem);font-weight:550;line-height:1.02}.marketing-hero .marketing-lede,.marketing-hero .marketing-note{max-width:40rem;margin-inline:auto}.marketing-hero .marketing-actions{justify-content:center}.marketing-hero-media{width:min(100%,44rem)}.marketing-hero-media figure,.marketing-hero-media picture{margin:0}.marketing-hero-media picture{display:block}.marketing-hero-media img{aspect-ratio:1;object-fit:cover;width:100%;height:auto;margin-inline:auto;display:block}.marketing-hero-media figcaption{color:var(--fx-muted);flex-wrap:wrap;justify-content:space-between;gap:.5rem;margin-top:.85rem;font-size:.68rem;line-height:1.5;display:flex}.marketing-hero-media figcaption span:first-child{color:var(--fx-text)}.marketing-hero--split{--hero-padding-start:clamp(2.5rem, 7svh, 6rem);--hero-padding-end:clamp(3rem, 9svh, 7rem);box-sizing:border-box;min-height:calc(100svh - var(--site-header-height,6rem));padding-block:var(--hero-padding-start) var(--hero-padding-end);text-align:start;align-content:center;display:grid}.marketing-hero--split .marketing-hero-frame{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(2rem,5vw,5rem);display:grid}.marketing-hero--split .marketing-hero-copy{align-items:flex-start;width:100%}.marketing-hero--split h1{letter-spacing:-.03em;font-size:clamp(3rem,min(5.4vw,9.2svh),6rem);line-height:.95}.marketing-hero--split .marketing-lede{font-size:1.125rem;line-height:1.6}.marketing-hero--split .marketing-lede,.marketing-hero--split .marketing-note{margin-inline:0}.marketing-hero--split .marketing-actions{justify-content:flex-start}.marketing-hero-art{min-width:0}@media (width<=960px){.marketing-hero--split .marketing-hero-frame{grid-template-columns:minmax(0,1fr);gap:0}.marketing-hero--split .marketing-hero-copy{display:contents}.marketing-hero--split .marketing-hero-copy>.marketing-eyebrow{order:-4}.marketing-hero--split .marketing-hero-copy>h1{order:-3;font-size:clamp(2.6rem,7vw,4rem)}.marketing-hero--split .marketing-hero-art{order:-1;margin-block-end:1.5rem}.marketing-hero--split [data-hero-controls]{order:-2;margin-block-end:2rem}}.shell>main>.marketing-hero--media:first-of-type{box-sizing:border-box;min-height:calc(100svh - var(--site-header-height,6rem));padding:0 1.5rem;display:block;overflow-x:clip}.shell>main>.marketing-hero--media:first-of-type .marketing-hero-frame{box-sizing:border-box;width:100%;height:calc(100svh - var(--site-header-height,6rem));max-height:calc(100svh - var(--site-header-height,6rem));justify-content:safe center;padding-block:clamp(1rem,3vh,2.25rem);overflow:clip}.shell>main>.marketing-hero--media:first-of-type .marketing-hero-copy{flex:none}.shell>main>.marketing-hero--media:first-of-type .marketing-hero-media{flex-direction:column;flex:auto;justify-content:center;align-items:center;width:min(100%,64rem);min-height:0;display:flex;overflow:hidden}.shell>main>.marketing-hero--media:first-of-type .marketing-hero-media>*{flex-direction:column;justify-content:center;align-items:center;width:min(100%,18rem);height:100%;min-height:0;max-height:100%;margin-inline:auto;display:flex}.shell>main>.marketing-hero--media:first-of-type .marketing-hero-media .pixel-example{width:min(100%,36rem)}.shell>main>.marketing-hero--media:first-of-type .marketing-hero-media .pixel-example-pair{grid-template-columns:repeat(2,auto);gap:1rem;width:max-content;max-width:100%;height:100%;min-height:0;margin-inline:auto;display:grid}.shell>main>.marketing-hero--media:first-of-type .marketing-hero-media .pixel-example-pair figure{width:auto;max-width:min(14rem,50vw - 2rem)}.shell>main>.marketing-hero--media:first-of-type .marketing-hero-media figcaption,.shell>main>.marketing-hero--media:first-of-type .marketing-hero-media .pixel-example>a,.shell>main>.marketing-hero--media:first-of-type .marketing-hero-media .pixel-example>p{flex:none}.shell>main>.marketing-hero--media:first-of-type .marketing-hero-media picture{aspect-ratio:1;flex:1 1 0;width:auto;min-width:0;max-width:100%;min-height:0;max-height:18rem}@media (height<=860px){.shell>main>.marketing-hero--media:first-of-type .marketing-hero-media,.shell>main>.marketing-hero--media:first-of-type .marketing-hero-media>*{flex:none;height:auto;overflow:visible}.shell>main>.marketing-hero--media:first-of-type .marketing-hero-frame{height:auto;max-height:none;overflow:visible}.shell>main>.marketing-hero--media:first-of-type .marketing-hero-media picture{flex:none;width:min(12.5rem,100vw - 3rem);max-width:min(12.5rem,100vw - 3rem);height:auto;max-height:none}.shell>main>.marketing-hero--media:first-of-type .marketing-hero-media .pixel-example-pair picture{width:min(9rem,50vw - 2rem);max-width:min(9rem,50vw - 2rem)}}@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){.shell>main>.marketing-hero--media:first-of-type{view-timeline-name:--hero-chapter;min-height:170svh}.shell>main>.marketing-hero--media:first-of-type .marketing-hero-frame{top:var(--site-header-height,6rem);width:100%;min-height:calc(100svh - var(--site-header-height,6rem));flex:none;justify-content:safe center;position:sticky}.shell>main>.marketing-hero--media:first-of-type .marketing-hero-copy{animation:linear both hero-copy-exit --hero-chapter;animation-range:exit exit 55%}.shell>main>.marketing-hero--media:first-of-type .marketing-hero-media{transform-origin:50%;animation:linear both hero-media-settle --hero-chapter;animation-range:entry 100% exit 0%}}}@keyframes hero-copy-exit{0%{opacity:1;transform:none}to{opacity:0;transform:translateY(-1.25rem)}}@keyframes hero-media-settle{0%{transform:scale(1)}to{transform:scale(1.04)}}@media (prefers-reduced-motion:reduce){.marketing-hero-copy,.marketing-hero-media{opacity:1!important;animation:none!important;transform:none!important}.shell>main>.marketing-hero--media:first-of-type{min-height:calc(100svh - var(--site-header-height,6rem))}.shell>main>.marketing-hero--media:first-of-type .marketing-hero-frame{min-height:0;position:static}}.hero-look-frame{--hero-look-room:calc(100svh - var(--site-header-height,6rem) - var(--hero-padding-start,3rem) - var(--hero-padding-end,3rem));inline-size:min(36rem, 48vw, var(--hero-look-room));aspect-ratio:1;perspective:70rem;min-inline-size:18rem;display:grid;overflow:clip}.hero-look-frame--landscape{inline-size:min(36rem, 48vw, calc(var(--hero-look-room) * 3 / 2));aspect-ratio:3/2;min-inline-size:24rem}@media (width<=960px){.hero-look-frame{inline-size:min(100%,40rem);min-inline-size:0}.hero-look-frame--landscape{inline-size:min(100%,40rem)}}.hero-look-frame>figure{aspect-ratio:4/5;min-block-size:0;inline-size:76%;box-shadow:0 1rem 3rem color-mix(in srgb, var(--fx-bg) 32%, transparent);backface-visibility:hidden;grid-area:1/1;place-self:center;margin:0;transition:transform .28s cubic-bezier(.23,1,.32,1),opacity .28s cubic-bezier(.23,1,.32,1),visibility;position:relative}.hero-look-frame--landscape>figure{aspect-ratio:3/2}.hero-look-frame>figure[data-position=active]{z-index:3;transform:translateZ(0)}.hero-look-frame>figure[data-position=previous]{z-index:2;transform:translate(-27%)translateZ(-7rem)rotateY(18deg)}.hero-look-frame>figure[data-position=next]{z-index:2;transform:translate(27%)translateZ(-7rem)rotateY(-18deg)}.hero-look-frame>figure[data-position=behind]{z-index:1;opacity:0;visibility:hidden;transition:transform .28s cubic-bezier(.23,1,.32,1),opacity .28s cubic-bezier(.23,1,.32,1),visibility 0s .28s;transform:translateZ(-12rem)scale(.9)}.hero-look-frame picture,.hero-look-frame img{block-size:100%;inline-size:100%}.hero-look-frame img{object-fit:cover}.hero-look-frame figcaption{padding:var(--fx-space-1) var(--fx-space-2);border:var(--fx-border-width) solid var(--fx-line);border-radius:calc(var(--fx-radius-control) * var(--fx-corner-radius-scale));background:var(--fx-panel);position:absolute;inset-block-end:var(--fx-space-3);inset-inline-start:var(--fx-space-3);@supports (corner-shape:squircle){corner-shape:var(--fx-control-corner-shape)}color:var(--fx-muted);font-size:var(--fx-font-caption);line-height:1.5}.hero-look-frame figcaption span{color:var(--fx-text)}.hero-look-frame>figure:not([data-active]) figcaption{visibility:hidden}:root:has(.hero-look-picker :focus-visible) .hero-look-frame>figure{transition:none}.hero-look-picker{gap:1.75rem;inline-size:min(100%,42rem);display:grid;container-type:inline-size}.hero-look-picker .ui-segmented-label{font-size:.78rem}.hero-look-picker .ui-segmented{background:0 0;border:0;border-radius:0;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:row;gap:.5rem;display:grid}.hero-look-picker .ui-segmented:has(>:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}.hero-look-picker .ui-segmented .ui-segmented-option{box-sizing:border-box;border:var(--fx-border-width) solid var(--fx-line);background:color-mix(in srgb, var(--fx-text) 4%, transparent);text-align:center;border-radius:999px;min-block-size:3rem;min-inline-size:0;padding:.4rem .65rem;font-size:.85rem;line-height:1.25}.hero-look-picker .ui-segmented-option:has([data-checked]){border-color:var(--fx-accent)}.hero-look-picker .ui-segmented-indicator[data-checked]{background:color-mix(in srgb, var(--fx-accent) 12%, transparent)}.hero-look-picker .ui-segmented-icon img{object-fit:cover;border-radius:50%;flex:none;block-size:1.75rem;inline-size:1.75rem;display:block}.hero-look-picker .ui-segmented:has(.ui-segmented-radio:focus-visible){outline:none}.hero-look-picker .ui-segmented-option:has(.ui-segmented-radio:focus-visible){outline:var(--fx-focus-width) solid var(--fx-accent);outline-offset:2px}@supports (corner-shape:round){.hero-look-picker .ui-segmented-option{corner-shape:round}}@container (width<=40rem){.hero-look-picker[data-option-label=effect] .ui-segmented{grid-template-columns:repeat(2,minmax(0,1fr))}}@container (width<=24rem){.hero-look-picker .ui-segmented{grid-template-columns:repeat(2,minmax(0,1fr))}}.hero-look-cta-labels{text-align:start;display:inline-grid}.hero-look-cta-labels>span{grid-area:1/1}.hero-look-cta-labels>span:not([data-active]){visibility:hidden}@media (prefers-reduced-motion:reduce){.hero-look-frame>figure,.hero-look-frame>figure[data-position=behind]{transition:none}}}@layer layouts{.shell:has(>main>.marketing-hero--media:first-of-type){width:100%}.shell:has(>main>.marketing-hero--media:first-of-type)>main>:not(.marketing-hero),.shell:has(>main>.marketing-hero--media:first-of-type)>.marketing-footer{width:min(1280px,100% - 3rem);margin-inline:auto}}@layer skins,density,utilities;