/* Connected life-situation cards; the outer wrappers retain the existing fog handoff. */
#experience .support-demo { padding:52px clamp(22px,5vw,88px) 40px; background:#f7f6f3; }
#experience .demo-inner { display:block; max-width:1440px; min-height:0; }
#experience .demo-heading-row { display:flex; justify-content:space-between; align-items:flex-end; gap:32px; margin-bottom:34px; }
#experience .demo-heading-row h2 { font-size:clamp(35px,3.3vw,52px); }
#experience .demo-aside { margin:0 0 7px; flex:none; }
.life-deck { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; transition:grid-template-columns .8s cubic-bezier(.22,1,.36,1); }
.life-deck[data-enhanced][data-active="family"] { grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr); }
.life-deck[data-enhanced][data-active="wellbeing"] { grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr); }
.life-deck[data-enhanced][data-active="money"] { grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.5fr); }
.life-card { --life-color:#c97ea8; --life-soft:#eed5e5; --life-ink:#963767; position:relative; display:flex; flex-direction:column; min-width:0; min-height:570px; padding:26px 26px 16px; border-radius:30px; background:#fff; transition:box-shadow .8s ease; }
.life-wellbeing { --life-color:#73b69a; --life-soft:#d4eadc; --life-ink:#377961; }
.life-money { --life-color:#dab467; --life-soft:#f1e4c6; --life-ink:#8a641d; }
.life-card[data-active] { box-shadow:0 20px 42px #244b3910; }
.life-bridge { position:absolute; inset-inline-start:-25px; top:64px; width:26px; height:68px; fill:#fff; pointer-events:none; }
.life-card-trigger { display:flex; align-items:center; gap:10px; width:100%; min-height:44px; text-align:start; font-size:12px; line-height:1.4; color:#607476; }
.life-card-trigger>.icon:first-child { width:23px; height:23px; color:var(--life-ink); flex:none; }
.life-card-trigger>span { flex:1; }
.life-card-trigger .life-card-arrow { width:18px; height:18px; flex:none; transition:transform .65s ease,color .65s ease; }
.life-card[data-active] .life-card-trigger { color:var(--life-ink); }
.life-card[data-active] .life-card-arrow { transform:rotate(90deg); }
.life-card-trigger:focus-visible { outline:2px solid var(--life-ink); outline-offset:6px; border-radius:6px; }
.life-card-trigger:disabled { opacity:1; cursor:default; }
.life-card h3 { min-height:3.35em; margin:19px 0 0; font:500 clamp(26px,2.2vw,34px)/1.15 Sora,Arial,sans-serif; letter-spacing:-.055em; overflow-wrap:anywhere; }
.life-options { display:grid; grid-template-rows:1fr; opacity:1; transition:grid-template-rows .65s cubic-bezier(.22,1,.36,1),opacity .45s ease; }
.life-options-inner { min-height:0; overflow:hidden; }
.life-resource { display:flex; align-items:center; gap:12px; padding-top:17px; }
.life-resource>.icon { width:22px; height:22px; color:var(--life-ink); flex:none; }
.life-resource>div { display:grid; gap:4px; min-width:0; }
/* Labels wrap naturally; the old demo's mobile three-line reserve does not apply. */
#experience .life-resource .demo-resource-label { min-height:0; font:400 9px/1.4 Inter,Arial,sans-serif; letter-spacing:.6px; color:#788384; }
.life-resource strong { display:block; margin:0; font:400 16px/1.4 Inter,Arial,sans-serif; color:#25474d; }
.life-deck[data-enhanced] .life-card:not([data-active]) .life-options { grid-template-rows:0fr; opacity:0; }
.life-scene { position:relative; isolation:isolate; display:flex; align-items:stretch; flex:1; min-height:210px; margin:24px -10px 0; padding:11px; border-radius:23px; overflow:hidden; background:var(--life-soft); }
.life-scene::before { content:""; position:absolute; z-index:-1; inset:-35%; background:radial-gradient(ellipse at 30% 20%,#ffffffef,transparent 48%),radial-gradient(ellipse at 90% 90%,var(--life-color),transparent 62%); animation:life-color-flow 12s ease-in-out infinite alternate; animation-play-state:paused; }
.life-photo-frame { position:relative; min-height:100%; width:100%; overflow:hidden; border-radius:15px; background:var(--life-soft); transform:translateZ(0); }
.life-photo-frame img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 45%; animation:life-photo-drift 16s ease-in-out infinite alternate; animation-play-state:paused; }
.life-photo-mark { position:absolute; inset-inline-end:23px; bottom:24px; width:35px; height:35px; color:white; opacity:.9; background:currentColor; mask:url('/assets/wellist-mark.svg') center/contain no-repeat; -webkit-mask:url('/assets/wellist-mark.svg') center/contain no-repeat; }
[data-life-motion] .life-card[data-active] .life-scene::before,[data-life-motion] .life-card[data-active] .life-photo-frame img { animation-play-state:running; }
@keyframes life-color-flow { from { transform:translate3d(-8%,-6%,0) rotate(-15deg); } to { transform:translate3d(8%,7%,0) rotate(20deg); } }
@keyframes life-photo-drift { from { transform:scale(1.02) translate3d(-.3%,0,0); } to { transform:scale(1.09) translate3d(.5%,-.4%,0); } }
.life-footer { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-top:25px; }
.life-human { display:flex; align-items:center; gap:14px; text-align:start; color:#25474d; }
.life-human img { width:45px; height:48px; border-radius:13px; object-fit:cover; object-position:center 38%; }
.life-human>span { font-size:15px; }
.life-human>.icon { width:18px; height:18px; margin-inline-start:10px; transition:transform .35s; }
.life-human:is(:hover,:focus-visible)>.icon { transform:translate(2px,-2px); }
#experience .demo-contact { min-height:48px; font-size:12px; padding:13px 20px; }
html[lang="ar"] .life-card :is(h3,strong,button) { font-family:Arial,Tahoma,sans-serif; letter-spacing:normal; }
html[lang="zh-Hans"] .life-card h3 { font-family:"PingFang SC","Microsoft YaHei",Arial,sans-serif; letter-spacing:normal; }
@media(min-width:761px) and (max-width:1100px) {
 #experience .support-demo { padding:44px 28px 36px; }
 .life-deck { gap:18px; }
 .life-card { padding:20px 18px 14px; min-height:550px; }
 .life-card h3 { font-size:25px; min-height:3.55em; }
 .life-card-trigger { font-size:11px; gap:8px; }
 .life-card-trigger .life-card-arrow { display:none; }
 .life-bridge { width:20px; inset-inline-start:-19px; }
 .life-resource strong { font-size:14px; }
 .life-scene { min-height:190px; }
}
@media(max-width:760px) {
 #experience .support-demo { padding:42px 22px 34px; }
 #experience .demo-heading-row { margin-bottom:28px; }
 #experience .demo-heading-row h2 { font-size:clamp(30px,6.6vw,42px); }
 #experience .demo-aside { display:none; }
 .life-deck { display:flex; flex-direction:column; gap:18px; }
 .life-card { padding:22px 22px 16px; min-height:0; border-radius:25px; box-shadow:none; }
 .life-bridge { display:none; }
 .life-card-trigger { min-height:32px; font-size:12px; }
 .life-card-arrow { display:none; }
 .life-card h3 { min-height:0; font-size:28px; max-width:470px; margin-top:16px; }
 .life-resource { padding-top:16px; }
 .life-resource strong { font-size:15px; }
 .life-scene { flex:none; height:240px; min-height:0; margin-top:22px; padding:10px; }
 .life-footer { flex-direction:column; align-items:stretch; gap:22px; margin-top:28px; }
 .life-human { justify-content:flex-start; }
 .life-human>span { flex:1; font-size:14px; }
 #experience .demo-contact { width:100%; font-size:14px; }
}
@media(max-width:360px) { #experience .support-demo { padding-inline:16px; } .life-card { padding-inline:18px; } .life-card h3 { font-size:25px; } .life-scene { height:210px; } }
@media(prefers-reduced-motion:reduce) { #experience .life-deck,#experience .life-card,#experience .life-card *,#experience .life-card *::before { animation:none!important; transition:none!important; } }