*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}body{background:#f5f7fb;color:#14253d}.holding{position:relative;isolation:isolate;overflow:hidden;min-height:540px;height:var(--pane-height,100svh);background:radial-gradient(ellipse at 75% 100%,#bdd0ed 0,transparent 38%),radial-gradient(ellipse at 88% 90%,#e1e9f7 0,transparent 55%),linear-gradient(115deg,#fcfdff,#f5f7fb 58%,#edf1f7)}.copy{position:relative;z-index:2;padding:193px 0 0 58px;max-width:790px}.eyebrow{margin:0 0 36px;font-size:30px;line-height:1.25;font-weight:500;color:#5c677a}.copy h1{margin:0 0 26px;font-size:72px;line-height:1.05;font-weight:750;letter-spacing:-.024em;text-wrap:balance;max-width:720px}.support{margin:0;font-size:40px;line-height:1.27;font-weight:450;letter-spacing:-.015em;color:#5c677a;text-wrap:pretty}.art{z-index:1}.art svg{display:block;width:100%;height:100%}.art-desktop{position:absolute;right:-8px;bottom:0;height:min(760px,100%);width:auto;aspect-ratio:780/760;transform:translateY(-1px)}.art-mobile{display:none}
@container original (max-width:1100px){.holding{display:flex;flex-direction:column;min-height:var(--pane-height,100svh);height:auto}.copy{padding:64px 32px 0;max-width:800px}.copy h1{font-size:56px;max-width:700px}.eyebrow{font-size:26px;margin-bottom:22px}.support{font-size:30px}.art-desktop{position:relative;width:min(100%,780px);height:auto;aspect-ratio:780/760;right:0;bottom:auto;transform:none;align-self:flex-end;margin-top:auto}}
@container original (max-width:600px){.copy{padding:78px 31px 0;max-width:100%}.eyebrow{font-size:24px;line-height:30px;margin-bottom:16px}.copy h1{font-size:50px;line-height:1;letter-spacing:-.03em;max-width:340px;margin-bottom:24px;font-weight:750}.support{font-size:28px;line-height:1.23;letter-spacing:-.015em;max-width:340px}.art-desktop{display:none}.art-mobile{display:block;position:relative;width:100%;height:auto;aspect-ratio:371/433;margin-top:auto}}
@container original (max-width:350px){.copy{padding-inline:24px}.copy h1{font-size:42px;line-height:1.04}.support{font-size:23px;line-height:1.26}}

@container original (max-width:600px){.copy h1 span{display:block;white-space:nowrap}}

:root{color-scheme:light dark}body{background:#f5f7fb}.display-shell{position:relative;min-height:100svh}.original-pane{container:original / inline-size;width:100%;min-width:0}.reserved-pane{display:none;pointer-events:none}.segment-probe{position:fixed;visibility:hidden;pointer-events:none;z-index:-1;width:0;height:0}.segment-probe-0{left:env(viewport-segment-left 0 0,0px);top:env(viewport-segment-top 0 0,0px);width:env(viewport-segment-width 0 0,0px);height:env(viewport-segment-height 0 0,0px)}.segment-probe-1{left:env(viewport-segment-left 1 0,0px);top:env(viewport-segment-top 1 0,0px);width:env(viewport-segment-width 1 0,0px);height:env(viewport-segment-height 1 0,0px)}
.display-shell[data-layout="two-horizontal"] .original-pane{margin-left:var(--segment-right-left);margin-top:var(--segment-right-top);width:var(--segment-right-width);--pane-height:var(--segment-right-height)}
.display-shell[data-layout="two-horizontal"] .reserved-pane{display:block;position:absolute;left:var(--segment-left-left);top:var(--segment-left-top);width:var(--segment-left-width);height:var(--segment-left-height)}
/* Progressive CSS fallback works without JS; a current API/review negative wins. */
@media(horizontal-viewport-segments:2) and (vertical-viewport-segments:1){
 @supports(width:env(viewport-segment-width 1 0)){
  .display-shell:not([data-segment-source]) .original-pane{margin-left:env(viewport-segment-left 1 0);margin-top:env(viewport-segment-top 1 0);width:env(viewport-segment-width 1 0);--pane-height:env(viewport-segment-height 1 0)}
  .display-shell:not([data-segment-source]) .reserved-pane{display:block;position:absolute;left:env(viewport-segment-left 0 0);top:env(viewport-segment-top 0 0);width:env(viewport-segment-width 0 0);height:env(viewport-segment-height 0 0)}
 }
}
@media(prefers-color-scheme:dark){body{background:#07111f;color:#e4efff}.holding{background:radial-gradient(ellipse at 75% 100%,#122f58 0,transparent 38%),radial-gradient(ellipse at 88% 90%,#0c2240 0,transparent 55%),linear-gradient(115deg,#081321,#0a1729 58%,#10233e)}.eyebrow,.support{color:#a9bdd8}.copy h1{color:#e4efff}}

/* One page entrance; art geometry/optics stay assembled during the reveal. */
.glass-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;visibility:hidden;pointer-events:none}
.holding{animation:page-arrival 1.05s cubic-bezier(.2,.7,.2,1) both}
.copy .eyebrow{animation:copy-arrival .8s .04s both}
.copy h1{animation:copy-arrival .8s .12s both}
.copy .support{animation:copy-arrival .8s .20s both}
@keyframes page-arrival{from{opacity:0}to{opacity:1}}
@keyframes copy-arrival{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.holding,.copy .eyebrow,.copy h1,.copy .support{animation:none}}

.holding[data-entered="true"],.holding[data-entered="true"] .copy .eyebrow,.holding[data-entered="true"] .copy h1,.holding[data-entered="true"] .copy .support{animation:none}

/* A text-only sheen; the parent retains its independent entrance animation. */
.eyebrow-shimmer{display:inline-block}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
 @media (prefers-reduced-motion:no-preference){
  .eyebrow-shimmer{background:linear-gradient(105deg,#5c677a 35%,#0053b8 50%,#5c677a 65%);background-size:200% 100%;background-position:150% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:eyebrow-sheen 3s linear infinite}
  @media (prefers-color-scheme:dark){.eyebrow-shimmer{background-image:linear-gradient(105deg,#a9bdd8 35%,#e5f4ff 50%,#a9bdd8 65%)}}
 }
}
@keyframes eyebrow-sheen{0%,10%{background-position:150% 0}80%,100%{background-position:-50% 0}}