/* The untransformed wrapper preserves native anchors and full content height. */
.demo-chapter{position:relative;z-index:3;min-height:100dvh;outline:none}
.demo-chapter[data-handoff]>.support-demo{transform:translate3d(0,var(--demo-offset,0px),0);opacity:var(--demo-opacity,0)}
.support-demo{position:relative;z-index:3;isolation:isolate;min-height:100dvh;padding:clamp(48px,6vw,88px) clamp(24px,5vw,88px) 36px;background:radial-gradient(ellipse at 8% 35%,#f6f1f4 0%,#f6f1f400 58%),radial-gradient(ellipse at 98% 90%,#faf6f8 0%,#faf6f800 58%),#fdfcfc;color:#173743}
.demo-inner{position:relative;max-width:1440px;margin:auto;opacity:var(--demo-content-opacity,1)}
.demo-heading-row{margin-bottom:clamp(34px,3.5vw,54px)}
.demo-heading-row h2{font:500 clamp(38px,3.8vw,60px)/1.14 Sora,Arial,sans-serif;letter-spacing:-.06em;margin:0;max-width:850px;outline:none}
.demo-heading-row h2 span{color:#9b6484}

/* An open support composition: situation, available resources, then a person. */
.demo-layout{display:grid;grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr);column-gap:clamp(42px,6vw,96px);row-gap:0;align-items:start}
.demo-choices{grid-column:1;grid-row:1;padding-inline-end:14px}
.demo-tabs{display:flex;flex-direction:column}
.demo-tab{position:relative;display:flex;align-items:center;gap:17px;padding:25px 0;border-bottom:1px solid #8b64761a;min-height:82px;text-align:start;font-size:clamp(17px,1.55vw,22px);color:#81777e;transition:color .25s;line-height:1.35}
.demo-tab>.icon:first-child{width:26px;height:26px;stroke-width:1.45}
.demo-tab>span{flex:1}
.demo-tab .demo-tab-arrow{width:19px;height:19px;opacity:0;transform:translateX(-6px);transition:opacity .25s,transform .3s}
.demo-tab[aria-selected="true"],.demo-tab:is(:hover,:focus-visible){color:#9f2a6a}
.demo-tab[aria-selected="true"]::after{content:"";position:absolute;bottom:-1px;inset-inline-start:0;width:48px;height:2px;background:#9f2a6a}
.demo-tab[aria-selected="true"] .demo-tab-arrow{opacity:1;transform:none}
.demo-aside{display:flex;gap:13px;align-items:center;margin-top:38px;color:#ad839e}
.demo-brand-mark{width:34px;height:34px;background:currentColor;mask:url('/assets/wellist-mark.svg') center/contain no-repeat;-webkit-mask:url('/assets/wellist-mark.svg') center/contain no-repeat;opacity:.65;flex:none}
.demo-aside p{font-size:12px;line-height:1.6;margin:0;color:#6a6268}.demo-aside p span{color:#9b6484}
.demo-result{grid-column:2;grid-row:1;position:relative;min-width:0;padding:6px 0 0;background:none;border-radius:0;box-shadow:none}
.demo-result:focus-visible{outline:2px solid #9f2a6a;outline-offset:8px}
.demo-result-heading{display:flex;position:absolute;inset-inline-end:0;top:12px;color:#95728a}
.demo-scene-icon{width:30px;height:30px;stroke-width:1.35}
.demo-result h3{font:500 clamp(28px,2.4vw,38px)/1.2 Sora,Arial,sans-serif;letter-spacing:-.055em;margin:0;margin-inline-end:52px;max-width:660px;min-height:2.4em;text-wrap:balance}
.demo-recommendations{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-top:25px;padding-block:28px 30px;border-top:1px solid #203d481c}
.demo-recommendation{display:flex;flex-direction:column;align-items:flex-start;gap:17px;padding-inline-end:28px;min-width:0}
.demo-recommendation+ .demo-recommendation{padding-inline-start:32px;padding-inline-end:0;border-inline-start:1px solid #203d481c}
.demo-recommendation>.icon{width:28px;height:28px;color:#946880;stroke-width:1.4}
.demo-recommendation+ .demo-recommendation>.icon{color:#587f82}
.demo-recommendation>div{min-width:0}
.demo-resource-label{display:block;font-size:11px;line-height:1.5;letter-spacing:.65px;color:#78727b}
.demo-recommendation h4{font:400 clamp(18px,1.55vw,24px)/1.3 Sora,Arial,sans-serif;letter-spacing:-.045em;margin:10px 0 0;min-height:2.6em}

/* Shared human support stays in place when recommendations change. */
.demo-human{grid-column:2;grid-row:2;display:flex;align-items:center;gap:26px;padding:26px 0 0;border-top:1px solid #203d481c;background:none;border-radius:0;min-width:0}
.demo-human-photo{display:block;width:112px;height:120px;object-fit:cover;object-position:center 38%;border-radius:14px;flex:none}
.demo-human>div{flex:1;min-width:0}
.demo-human strong{display:block;max-width:265px;font:400 clamp(19px,1.7vw,25px)/1.3 Sora,Arial,sans-serif;letter-spacing:-.045em;text-wrap:balance}
.demo-human-action{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;background:#173743;color:#fff}
.demo-human-action .icon{width:20px;height:20px}
.demo-human-action:is(:hover,:focus-visible){background:#9f2a6a}
.demo-bottom{grid-column:1;grid-row:2;align-self:end;display:flex;align-items:center;margin-top:26px;padding-inline-end:14px}
.demo-contact{display:inline-flex;justify-content:space-between;align-items:center;gap:24px;min-height:50px;padding:14px 22px;background:#173743;color:#fff;font-size:13px;line-height:1.45;white-space:normal}
.demo-contact .icon{width:19px;height:19px;flex:none}
.demo-contact:is(:hover,:focus-visible){background:#173743;color:#fff}
.opening-main .text-button[href="#experience"]:is(:hover,:focus-visible){color:#edc6df;background:transparent}
/* Hold the finished glass scene beneath the incoming full-screen surface. */
.scroll-story[data-demo-handoff]{position:sticky;top:calc(var(--scene-height,100svh) - var(--story-stack-height))}
.scroll-story[data-demo-handoff] .story-glass{opacity:var(--story-content-opacity,1)}
/* Native sticky owns phone positioning, including compositor scrolls.
   Overlap + trailing runway preserve page length and tall content flow. */
.demo-chapter[data-native-handoff]{margin-top:calc(-1 * var(--scene-height));min-height:0;scroll-margin-top:calc(-1 * var(--scene-height))}
.demo-chapter[data-native-handoff]::after{content:"";display:block;height:var(--scene-height)}
.demo-chapter[data-native-handoff]>.support-demo{position:sticky;top:0;transform:none;min-height:max(var(--scene-height),100lvh)}
html[data-scene-mobile] .demo-chapter{overflow-anchor:none}
html[data-scene-mobile] .scroll-story{overflow-anchor:none}
html[lang="ar"] .support-demo :is(h2,h3,h4,strong,button){font-family:Arial,Tahoma,sans-serif;letter-spacing:normal}
html[lang="ar"] .demo-tab-arrow{scale:-1 1}
html[lang="ar"] .demo-resource-label{font-size:11px;letter-spacing:0}
html[lang="zh-Hans"] .support-demo :is(h2,h3,h4,strong){font-family:"PingFang SC","Microsoft YaHei",Arial,sans-serif;letter-spacing:normal}
@media(max-width:900px){
  .support-demo{padding:48px 26px 30px}.demo-heading-row h2{font-size:42px}
  .demo-layout{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);column-gap:34px}.demo-choices{padding-inline-end:0}
  .demo-tab{font-size:17px;gap:12px}.demo-tab>.icon:first-child{width:23px;height:23px}
  .demo-result h3{font-size:29px}.demo-human-photo{width:92px;height:104px}.demo-human{gap:20px}.demo-human strong{font-size:20px}
  .demo-recommendation{padding-inline-end:20px}.demo-recommendation+ .demo-recommendation{padding-inline-start:20px}
}
@media(max-width:600px){
  .support-demo{padding:40px 22px 28px}.demo-heading-row{margin-bottom:26px}.demo-heading-row h2{font-size:clamp(31px,7.5vw,40px);line-height:1.15}
  /* Keep the closing action within the stable phone scene; extra browser
     chrome space is covered by the background without redistributing content. */
  .demo-inner{display:flex;flex-direction:column;min-height:calc(var(--scene-height,100svh) - 68px)}
  .demo-layout{display:flex;flex-direction:column;gap:0;flex:1}.demo-choices,.demo-result,.demo-human{width:100%}
  .demo-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.demo-tab{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:13px 0 16px;min-height:92px;font-size:12px}.demo-tab>span{flex:none}.demo-tab>.icon:first-child{width:22px;height:22px}.demo-tab .demo-tab-arrow{display:none}.demo-aside{display:none}
  .demo-tab[aria-selected="true"]::after{width:32px}
  .demo-result{margin-top:32px;padding:0}.demo-result h3{font-size:26px;margin-inline-end:36px;min-height:2.4em;text-wrap:initial}
  .demo-result-heading{top:5px}.demo-scene-icon{width:24px;height:24px}
  .demo-recommendations{margin-top:22px;padding-block:22px 23px}.demo-recommendation{gap:13px;padding-inline-end:18px}.demo-recommendation+ .demo-recommendation{padding-inline-start:18px}
  .demo-recommendation>.icon{width:25px;height:25px}.demo-resource-label{font-size:9px;letter-spacing:.3px;min-height:3em}.demo-recommendation h4{font-size:17px;margin-top:7px}
  .demo-human{gap:17px;padding-top:22px}.demo-human-photo{width:80px;height:88px;border-radius:11px}.demo-human strong{font-size:18px;max-width:175px}.demo-human-action{width:34px;height:34px}.demo-human-action .icon{width:17px;height:17px}
  .demo-bottom{width:100%;margin-top:auto;padding:28px 0 0}.demo-contact{width:100%;min-height:52px;font-size:14px}
}
@media(max-width:360px){
  .support-demo{padding-inline:17px}.demo-result h3{font-size:24px}.demo-tab{font-size:11px}.demo-resource-label{letter-spacing:.2px}.demo-recommendation h4{font-size:16px}
  .demo-human{gap:13px}.demo-human-photo{width:70px;height:80px}.demo-human strong{font-size:16px}
}
@media(prefers-reduced-motion:reduce){.demo-chapter[data-handoff]>.support-demo{opacity:1;transform:none}.scroll-story[data-demo-handoff]{position:relative;top:auto}.scroll-story[data-demo-handoff] .story-glass{opacity:1}}

.chapter-fog{position:fixed;inset:0;z-index:20;contain:strict;isolation:isolate;overflow:hidden;pointer-events:none;user-select:none}
.chapter-fog[hidden]{display:none}
.chapter-fog-veil{position:absolute;inset:0;background:#f5f7f4;opacity:0}
.chapter-fog-sheet{position:absolute;left:-32%;top:-24%;width:164%;height:148%;opacity:0;transform-origin:50% 50%}
.chapter-fog:not([hidden])>*{will-change:transform,opacity}
@media(prefers-reduced-motion:reduce){.chapter-fog{display:none}}