/* One continuous page gradient beneath the transparent V12 scene and section 2. */
.landing-page .refraction-intro{
  --intro-section-space:110px;
  /* Contrast trial: restore all three values to 1 for the v146 appearance. */
  --refraction-contrast:1.18;
  --refraction-saturation:1.05;
  --refraction-shade-opacity:.72;
  position:relative;isolation:isolate;
  background:linear-gradient(135deg,#269b8f 0%,#102a35 68%,#102a35 100%);
}
.landing-page .refraction-intro>.hero{
  display:block;width:100%;max-width:none;margin:0;padding:0;
  min-height:0;overflow:visible;background:transparent;isolation:isolate;
}
.hero-scroll-scene{position:relative;height:var(--refraction-viewport,100svh)}
html.refraction-ready .hero-scroll-scene{height:calc(var(--refraction-viewport,100svh)*2.8)}
.refraction-frame{position:sticky;top:var(--refraction-nav-height,84px);height:calc(var(--refraction-viewport,100svh) - var(--refraction-nav-height,84px));overflow:hidden;isolation:isolate}
#hero-refraction,.refraction-fallback,.refraction-text-shade{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#hero-refraction{display:block;z-index:1;opacity:0;filter:contrast(var(--refraction-contrast)) saturate(var(--refraction-saturation))}
.refraction-fallback{z-index:0;opacity:1;transition:opacity .3s}
.refraction-fallback svg{width:100%;height:100%;display:block}
.refraction-rendered .refraction-fallback{opacity:0}
.refraction-rendered #hero-refraction{opacity:1}
.refraction-text-shade{z-index:2;opacity:var(--refraction-shade-opacity);background:radial-gradient(ellipse at 50% 43%,#071d2bb8 0%,#071d2b7a 42%,#071d2b00 83%)}
.landing-page .refraction-frame .hero-copy{
  position:absolute;inset:26px 24px 60px;
  z-index:3;width:auto;max-width:none;margin:0;padding:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:#f7f4ee;opacity:1;text-shadow:0 2px 16px #071d2b30;
}
.landing-page .refraction-frame .hero-copy>*{animation:none}
.landing-page .refraction-frame .hero-copy>.eyebrow{
  color:#ddefeb;border-color:#ddefeb4d;background:#102a3526;
  margin:0 0 25px;padding:8px 15px;font-size:11px;
}
.landing-page .refraction-frame .hero-copy h1,
.landing-page .refraction-frame .hero-copy h1 span{
  color:#f7f4ee;font-size:clamp(44px,5.9vw,86px);font-weight:550;
  line-height:1.04;max-width:1100px;margin-bottom:26px;
}
.landing-page .refraction-frame .hero-copy>.lead{
  color:#f7f4ee;max-width:750px;font-size:clamp(16px,1.5vw,20px);line-height:1.6;
}
.landing-page .refraction-frame .hero-actions{margin:30px 0 0;gap:18px}
.landing-page .refraction-frame .hero-actions .hero-pill{
  min-height:60px;padding:16px 25px;font-size:16px;min-width:210px;
  color:#102a35;text-shadow:none;box-shadow:0 8px 25px #071d2b26;
}
.landing-page .refraction-frame .hero-actions .hero-pill-primary{
  background:var(--paper);border:0;
}
.landing-page .refraction-frame .hero-actions .hero-pill-secondary{background:transparent;border:1px solid var(--paper);color:var(--paper);box-shadow:none}
.landing-page .refraction-frame .hero-actions .hero-pill-primary::before{background:var(--paper)}
.landing-page .refraction-frame .hero-actions .hero-pill-secondary::before{background:transparent}
.landing-page .refraction-frame .hero-actions .hero-pill:focus-visible{outline-color:var(--paper)}
.refraction-scroll-cue{position:absolute;z-index:3;bottom:26px;left:0;right:0;display:flex;gap:12px;align-items:center;justify-content:center;color:#ddefeb;font-size:11px;pointer-events:none}
.refraction-scroll-cue i{font-size:22px;font-style:normal}
.landing-page .refraction-intro .product-stage{
  position:relative;top:auto;margin:0 auto;padding-top:100px;padding-bottom:0;
  z-index:4;isolation:isolate;
}
.landing-page .refraction-intro .stage-caption{color:#ddefeb;justify-content:flex-end;opacity:1}
.landing-page .refraction-intro .stage-orbits{display:none}
.landing-page .refraction-intro .hero-dashboard{transform:none;will-change:auto;text-shadow:none}
.landing-page .refraction-intro #difference{background:transparent;border-color:#ddefeb24;padding-top:var(--intro-section-space);padding-bottom:var(--intro-section-space)}
.landing-page .refraction-intro #difference :is(h2,.lead,.principles b,.trust-line){color:#f7f4ee}
.landing-page .refraction-intro #difference :is(.eyebrow,.principles p>span){color:#ddefeb}
.landing-page .refraction-intro #difference .principles p{border-color:#ddefeb30}
.landing-page .refraction-intro #difference .principles svg{color:#8ed2c8;stroke:currentColor}
@media(max-width:760px){
  .landing-page .refraction-intro{--intro-section-space:75px}
  html.refraction-ready .hero-scroll-scene{height:calc(var(--refraction-viewport,100svh)*2.15)}
  .landing-page .refraction-frame .hero-copy{inset:24px 24px 55px}
  .landing-page .refraction-frame .hero-copy>.eyebrow{font-size:9px;padding:6px 11px;margin-bottom:20px}
  .landing-page .refraction-frame .hero-copy h1,
  .landing-page .refraction-frame .hero-copy h1 span{font-size:clamp(34px,8.6vw,58px);line-height:1.06;margin-bottom:20px;max-width:600px}
  .landing-page .refraction-frame .hero-copy>.lead{font-size:15px;line-height:1.5;max-width:540px}
  .landing-page .refraction-frame .hero-actions{margin-top:23px;gap:12px;flex-direction:column;width:100%}
  .landing-page .refraction-frame .hero-actions .hero-pill{width:min(100%,285px);min-height:50px;padding:13px 20px;font-size:14px}
  .landing-page .refraction-intro .product-stage{padding:65px 15px 0}
  .refraction-text-shade{background:radial-gradient(ellipse at 50% 47%,#071d2bcc 0%,#071d2b88 50%,#071d2b20 100%)}
  .refraction-scroll-cue{bottom:20px}
}
@media(max-height:700px){
  .landing-page .refraction-frame .hero-copy{inset:20px 24px 42px}
  .landing-page .refraction-frame .hero-copy>.eyebrow{margin-bottom:14px}
  .landing-page .refraction-frame .hero-copy h1,
  .landing-page .refraction-frame .hero-copy h1 span{font-size:clamp(30px,5.5vw,62px);margin-bottom:16px}
  .landing-page .refraction-frame .hero-copy>.lead{font-size:14px;max-width:670px;line-height:1.45}
  .landing-page .refraction-frame .hero-actions{margin-top:18px}
  .landing-page .refraction-frame .hero-actions .hero-pill{min-height:46px;padding:12px 20px}
  .refraction-scroll-cue{bottom:12px}
}
@media(max-height:520px){
  html.refraction-ready .hero-scroll-scene{height:auto}
  .refraction-frame{position:relative;height:auto;min-height:610px}
  .landing-page .refraction-frame .hero-copy{inset:100px 24px 45px}
}
@media(prefers-reduced-motion:reduce){
  html.refraction-ready .hero-scroll-scene{height:var(--refraction-viewport,100svh)}
  .refraction-frame{position:relative}
  .refraction-scroll-cue{display:none}
}
@media print{
  html.refraction-ready .hero-scroll-scene{height:auto}
  .refraction-frame{height:auto;position:relative;min-height:500px}
  .landing-page .refraction-frame .hero-copy>*{opacity:1!important;transform:none!important}
  .refraction-scroll-cue{display:none}
}

/* A static composition for reduced motion, unavailable WebGL or short windows. */
html.refraction-ready .hero-scroll-scene.refraction-static{height:auto}
.refraction-static .refraction-frame{position:relative;top:0;min-height:560px}
.refraction-static .refraction-scroll-cue{display:none}
/* Let the light field dissolve into the shared page background at its lower edge. */
#hero-refraction,.refraction-fallback,.refraction-text-shade{
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 78%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 78%,transparent 100%);
}
/* The illustrative workspace rises after the completed refraction sequence. */
.dashboard-rise-scene{position:relative;display:flow-root}
.landing-page .refraction-intro .dashboard-rise-scene.is-scroll-rising{
  margin-top:calc(-1 * var(--dashboard-viewport,100svh));
}
.landing-page .refraction-intro .dashboard-rise-scene.is-scroll-rising>.product-stage{
  position:sticky;top:var(--dashboard-sticky-top,110px);
  padding-top:26px;padding-bottom:var(--dashboard-scale-overflow,0px);margin-bottom:0;
}
.landing-page .refraction-intro .dashboard-rise-scene.is-scroll-rising .hero-dashboard{
  transform-origin:center top;
  transform:translate3d(0,var(--dashboard-rise-y,100svh),0) scale(var(--dashboard-rise-scale,.94)) rotateX(var(--dashboard-rise-tilt,7deg));
  will-change:transform;
}
@media(max-width:760px){
  .landing-page .refraction-intro .dashboard-rise-scene.is-scroll-rising .hero-dashboard{
    transform:translate3d(0,var(--dashboard-rise-y,100svh),0) scale(var(--dashboard-rise-scale,.97))!important;
  }
}
@media(prefers-reduced-motion:reduce),print{
  .landing-page .refraction-intro .dashboard-rise-scene.is-scroll-rising{margin-top:0;height:auto!important}
  .landing-page .refraction-intro .dashboard-rise-scene.is-scroll-rising>.product-stage{position:relative;top:auto}
  .landing-page .refraction-intro .dashboard-rise-scene.is-scroll-rising .hero-dashboard{transform:none!important;will-change:auto}
}
