@font-face{font-family:'League Spartan';font-style:normal;font-weight:100 900;font-display:swap;src:url(https://worldliverday.org/wp-content/plugins/wld-landing/assets/fonts/league-spartan.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;src:url(https://worldliverday.org/wp-content/plugins/wld-landing/assets/fonts/dm-sans.woff2) format('woff2')}
:root{--red:#ed2737;--head:'League Spartan',system-ui,sans-serif;--body:'DM Sans',system-ui,sans-serif;--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--body);overflow-x:hidden}
img{max-width:100%;display:block}
h1 img,.one img,.slg img,.sign img{display:inline-block;vertical-align:middle}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-family:var(--head);font-weight:800;line-height:.95;letter-spacing:-.02em}
p{margin:0 0 1em}
button{font:inherit}
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}.rv.d4{transition-delay:.4s}.rv.d5{transition-delay:.5s}
/* Lab bar — present on every page */
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}

.lab{position:fixed;z-index:1000;left:18px;bottom:18px;display:flex;align-items:center;background:rgba(15,15,15,.92);border-radius:999px;padding:5px;box-shadow:0 14px 30px -12px rgba(0,0,0,.55);backdrop-filter:blur(10px);font-family:var(--head)}
.lab .cur,.lab a{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:0;padding:0;font-family:var(--head);font-weight:800;font-size:.8rem;color:#fff;text-decoration:none;cursor:pointer}
.lab .cur{background:var(--red)}
.lab .more{display:flex;gap:4px;max-width:0;overflow:hidden;opacity:0;transition:max-width .35s var(--ease),opacity .25s,margin .35s;margin-left:0}
.lab:hover .more,.lab:focus-within .more{max-width:220px;opacity:1;margin-left:4px}
.lab a:hover,.lab a:focus-visible{background:rgba(255,255,255,.16);outline:0}
@media(max-width:600px){.lab{left:12px;bottom:12px}}
/* Direction A — "The Journey" · warm editorial, scroll-driven liver */
:root{--bg:#f7f3ec;--ink:#0a0a0a;--ink2:#3a3733;--muted:#7a746c;--line:rgba(0,0,0,.1);--max:1280px}
body{background:var(--bg);color:var(--ink);font-size:17px;line-height:1.6}
.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(20px,4vw,56px)}
h1,h2,h3{text-transform:uppercase}
.eyebrow{font-family:var(--head);font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:.74rem;color:var(--red);margin-bottom:16px;display:block}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.82rem;padding:16px 26px;border-radius:999px;background:var(--ink);color:#fff;transition:transform .35s var(--ease),background .3s}
.btn:hover{transform:translateY(-2px);background:var(--red)}
.btn.line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.line:hover{background:var(--ink);color:#fff}
/* header */
.hd{position:fixed;inset:0 0 auto 0;z-index:50;padding:18px 0;transition:background .4s,padding .4s}
.hd.sc{background:rgba(247,243,236,.82);backdrop-filter:blur(14px);padding:10px 0;box-shadow:0 1px 0 var(--line)}
.hd .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--head);font-weight:500;font-size:.74rem;line-height:.95;letter-spacing:.08em;text-transform:uppercase}
.brand img{width:42px;height:42px}
.nav{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.nav a{padding:10px 14px;border-radius:999px;font-size:.95rem;font-weight:500;transition:background .25s}
.nav a:hover{background:rgba(0,0,0,.06)}
@media(max-width:900px){.nav{display:none}}
/* hero */
.hero{min-height:100svh;display:grid;align-items:center;padding:110px 0 60px;position:relative;overflow:hidden}
.hero .wrap{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
@media(max-width:900px){.hero .wrap{grid-template-columns:1fr}}
.slogan{font-size:clamp(3.4rem,9.5vw,8.4rem);line-height:.86;letter-spacing:-.035em}
.slogan .l{display:block;overflow:hidden}
.slogan .l>span{display:inline-block;transform:translateY(110%);animation:rise 1.1s var(--ease) forwards}
.slogan .l:nth-child(2)>span{animation-delay:.08s}.slogan .l:nth-child(3)>span{animation-delay:.16s}.slogan .l:nth-child(4)>span{animation-delay:.24s}
.slogan .one{color:var(--red);white-space:nowrap;display:inline-flex;align-items:center}
.slogan .one img{height:.8em;width:auto;margin-right:.04em;animation:beat 2.6s ease-in-out 1.8s infinite}
@keyframes rise{to{transform:none}}
.hero .sub{margin-top:30px;display:flex;gap:18px;align-items:flex-start;opacity:0;animation:fade 1s .8s forwards}
.hero .sub i{width:2px;background:var(--ink);align-self:stretch}
.hero .sub p{font-size:clamp(1.2rem,2vw,1.7rem);line-height:1.15;margin:0}
.hero .date{font-family:var(--head);font-weight:800;color:var(--red);font-size:clamp(1.2rem,2vw,1.8rem);margin-top:22px;opacity:0;animation:fade 1s 1s forwards}
@keyframes fade{to{opacity:1}}
/* age dial */
.dial{position:relative;background:#fff;border-radius:28px;padding:34px 34px 30px;box-shadow:0 40px 80px -40px rgba(0,0,0,.35);opacity:0;animation:fade 1s .6s forwards;overflow:hidden}
.dial .q{font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;color:var(--muted)}
.dial .top{display:grid;grid-template-columns:1fr 200px;gap:20px;align-items:center}
@media(max-width:520px){.dial .top{grid-template-columns:1fr}}
.dial .age{font-family:var(--head);font-weight:800;font-size:clamp(5rem,9vw,8rem);line-height:.9;letter-spacing:-.05em}
.dial .age small{font-size:.22em;letter-spacing:0;color:var(--muted);font-weight:500;margin-left:6px}
.dial .stage{font-family:var(--head);font-weight:800;text-transform:uppercase;color:var(--red);font-size:1.3rem;margin-top:8px;letter-spacing:-.01em}
.dial .art{position:relative;aspect-ratio:1;width:100%}
.dial .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transform:scale(.9) rotate(-5deg);transition:opacity .6s var(--ease),transform .8s var(--ease)}
.dial .art img.on{opacity:1;transform:none}
.dial input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:linear-gradient(90deg,var(--red) var(--p,40%),#e9e4dc var(--p,40%));border-radius:4px;margin:26px 0 10px;outline:0}
.dial input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:34px;height:34px;border-radius:50%;background:#fff;border:3px solid var(--ink);box-shadow:0 8px 20px -6px rgba(0,0,0,.5);cursor:grab}
.dial input[type=range]::-moz-range-thumb{width:34px;height:34px;border-radius:50%;background:#fff;border:3px solid var(--ink);cursor:grab}
.dial .ticks{display:flex;justify-content:space-between;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-family:var(--head);font-weight:600}
.dial .tip{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap}
.dial .tip p{margin:0;font-size:1rem;max-width:34ch;color:var(--ink2)}
.dial .tip a{white-space:nowrap}
/* journey */
.journey .sticky{position:sticky;top:0;height:100vh;overflow:hidden}
.journey .stage-art{position:absolute;left:50%;top:50%;width:min(52vh,52vw);aspect-ratio:1;transform:translate(-50%,-50%)}
.journey .stage-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;filter:drop-shadow(0 40px 50px rgba(0,0,0,.14));transition:none;will-change:clip-path,mask-size,transform}
/* sections */
.sec{padding:clamp(80px,10vw,150px) 0}
.theme{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
@media(max-width:900px){.theme{grid-template-columns:1fr}}
.theme h2{font-size:clamp(2.4rem,5.5vw,5rem)}
.theme .q{font-family:var(--head);font-weight:700;color:var(--red);text-transform:none;font-size:clamp(1.5rem,2.6vw,2.3rem);line-height:1.05;letter-spacing:-.02em;margin-top:22px}
.pts{display:grid;gap:0}
.pts div{display:grid;grid-template-columns:50px 1fr;gap:14px;padding:22px 0;border-top:1px solid var(--line);align-items:start}
.pts div:last-child{border-bottom:1px solid var(--line)}
.pts b{font-family:var(--head);font-weight:800;color:var(--red);font-size:1.6rem;line-height:1}
.pts p{margin:0;font-size:1.05rem}
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.stats div{padding:34px 26px;border-right:1px solid var(--line)}
.stats div:last-child{border-right:0}
.stats .n{font-family:var(--head);font-weight:800;font-size:clamp(2.4rem,4.5vw,4rem);line-height:1;color:var(--red);letter-spacing:-.03em}
.stats .n small{font-size:.42em;margin-left:2px}
.stats p{margin:10px 0 0;font-size:.95rem;color:var(--ink2)}
@media(max-width:900px){.stats{grid-template-columns:1fr 1fr}.stats div:nth-child(2){border-right:0}.stats div:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media(max-width:520px){.stats{grid-template-columns:1fr}.stats div{border-right:0;border-bottom:1px solid var(--line)}}
.habits{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)}
@media(max-width:900px){.habits{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.habits{grid-template-columns:1fr}}
.habit{padding:34px 26px 34px 0;border-bottom:1px solid var(--line);position:relative;transition:padding-left .4s var(--ease)}
.habit:hover{padding-left:12px}
.habit .k{font-family:var(--head);font-weight:800;color:var(--red);font-size:2.4rem;line-height:1;margin-bottom:16px}
.habit h3{font-size:1.25rem;margin-bottom:10px}
.habit p{font-size:.95rem;color:var(--ink2);margin:0 0 16px}
.habit a{font-family:var(--head);font-weight:700;text-transform:uppercase;font-size:.72rem;letter-spacing:.12em}
.habit a::after{content:" →"}
.faces{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
@media(max-width:900px){.faces{grid-template-columns:1fr}}
.faces .pic{border-radius:26px;overflow:hidden;position:relative}
.faces .pic img{transition:transform 1.4s var(--ease)}
.faces .pic:hover img{transform:scale(1.04)}
.faces .sign{position:absolute;left:22px;bottom:22px;background:#fff;padding:16px 22px;border-radius:16px;font-family:var(--head);font-weight:800;text-transform:uppercase;font-size:1.5rem;display:flex;align-items:center;gap:8px;box-shadow:0 20px 40px -20px rgba(0,0,0,.4)}
.faces .sign img{width:32px}.faces .sign span{color:var(--red)}
.faces h2{font-size:clamp(2.2rem,4.5vw,4rem)}
.chk{list-style:none;padding:0;margin:22px 0 30px;display:grid;gap:10px}
.chk li{padding-left:30px;position:relative;font-size:1.05rem}
.chk li::before{content:"";position:absolute;left:0;top:.5em;width:14px;height:14px;border-radius:50%;background:var(--red)}
.logos{display:flex;gap:clamp(30px,5vw,80px);justify-content:center;flex-wrap:wrap;align-items:center}
.logos img{height:58px;width:auto;filter:grayscale(1);opacity:.65;transition:.4s}
.logos img:hover{filter:none;opacity:1}
.wld-footer{background:var(--ink);color:#fff;padding:70px 0 30px;margin-top:40px}
.wld-footer .g{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px;padding-bottom:50px;border-bottom:1px solid rgba(255,255,255,.15)}
@media(max-width:700px){.wld-footer .g{grid-template-columns:1fr}}
.wld-footer .slg{font-family:var(--head);font-weight:800;text-transform:uppercase;font-size:2.2rem;line-height:.88;letter-spacing:-.03em}
.wld-footer .slg span{color:var(--red);display:inline-flex;align-items:center}.wld-footer .slg img{height:.8em;width:auto}
.wld-footer h4{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:14px}
.wld-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.wld-footer a:hover{color:var(--red)}
.wld-footer .b{padding-top:24px;font-size:.82rem;color:rgba(255,255,255,.5);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
/* stage page */
.phero{padding:150px 0 40px}
.phero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
@media(max-width:900px){.phero .wrap{grid-template-columns:1fr}.phero{padding-top:110px}}
.phero h1{font-size:clamp(3rem,8vw,7rem)}
.phero .lead{font-size:clamp(1.15rem,1.6vw,1.4rem);line-height:1.45;color:var(--ink2);max-width:52ch;margin-top:20px}
.phero .art{width:min(100%,460px);margin:0 auto;animation:floaty 7s ease-in-out infinite;filter:drop-shadow(0 30px 40px rgba(0,0,0,.14))}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-14px) rotate(1.5deg)}}
.why{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
@media(max-width:900px){.why{grid-template-columns:1fr}}
.why h2{font-size:clamp(2rem,4.5vw,4rem)}
.why .lead{font-size:1.25rem;line-height:1.5;color:var(--ink2)}
.recs{display:grid}
.rec{display:grid;grid-template-columns:90px 1fr;gap:20px;padding:28px 0;border-top:1px solid var(--line);align-items:start}
.rec:last-child{border-bottom:1px solid var(--line)}
.rec .k{font-family:var(--head);font-weight:800;font-size:clamp(2.4rem,5vw,4rem);line-height:.9;color:var(--red);letter-spacing:-.04em}
.rec h3{font-size:1.4rem;margin-bottom:8px}.rec p{margin:0;color:var(--ink2)}
@media(max-width:560px){.rec{grid-template-columns:56px 1fr}}
.cta{background:var(--red);color:#fff;border-radius:28px;padding:clamp(34px,5vw,70px);position:relative;overflow:hidden}
.cta h2{font-size:clamp(2rem,4vw,3.4rem);margin-bottom:14px}
.cta p{max-width:58ch;color:rgba(255,255,255,.92)}
.cta .btn{background:#fff;color:var(--red)}.cta .btn:hover{background:var(--ink);color:#fff}
.cta img{position:absolute;right:-40px;bottom:-60px;width:320px;opacity:.2;transform:rotate(-10deg)}
.res{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.res{grid-template-columns:1fr 1fr}}@media(max-width:560px){.res{grid-template-columns:1fr}}
.res a{padding:22px;border-radius:18px;background:#fff;border:1px solid var(--line);display:grid;gap:8px;transition:transform .4s var(--ease),box-shadow .4s}
.res a:hover{transform:translateY(-4px);box-shadow:0 26px 40px -28px rgba(0,0,0,.35)}
.res small{font-family:var(--head);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.68rem;color:var(--red)}
.res b{font-weight:600}
.next{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:700px){.next{grid-template-columns:1fr}}
.next a{display:flex;align-items:center;gap:20px;padding:22px 26px;border-radius:22px;background:#fff;border:1px solid var(--line);transition:transform .4s var(--ease)}
.next a:hover{transform:translateY(-4px)}
.next a img{width:76px;height:76px;object-fit:contain}
.next small{display:block;font-family:var(--head);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.68rem;color:var(--muted)}
.next b{font-family:var(--head);font-weight:800;text-transform:uppercase;font-size:1.4rem}
.next a.r{flex-direction:row-reverse;text-align:right}

.phero .wrap>*{min-width:0}
@media(max-width:900px){.phero .wrap{grid-template-columns:minmax(0,1fr)}}

/* transition picker (prototype control) */
.fxbar{position:absolute;right:clamp(16px,3vw,40px);top:calc(50% - 20px);z-index:5;font-family:var(--head)}
.fxbar .tg{font:inherit;font-weight:700;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;background:#fff;border:1px solid var(--line);border-radius:999px;padding:10px 14px;cursor:pointer;box-shadow:0 10px 24px -14px rgba(0,0,0,.4)}
.fxbar .tg b{color:var(--red)}
.fxbar .opts{display:none;flex-direction:column;gap:4px;margin-top:8px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:8px;box-shadow:0 20px 40px -20px rgba(0,0,0,.4)}
.fxbar.open .opts{display:flex}
.fxbar .opts button{font:inherit;font-weight:600;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;text-align:left;background:none;border:0;padding:8px 12px;border-radius:10px;cursor:pointer}
.fxbar .opts button:hover{background:var(--bg)}
.fxbar .opts button.on{background:var(--ink);color:#fff}
@media(max-width:900px){.fxbar{top:auto;bottom:70px;right:12px}}
/* hero: age dial */
.hero .hv{position:relative;display:grid;justify-items:center;gap:18px}
.hero .dial{width:100%}
/* no breathing / floating livers on A */
.slogan .one img,.phero .art{animation:none!important}

/* v10: life stages — big liver window on the right, chapter text on the left, transition picked in Settings */
.journey{height:520vh}
.journey .jg{height:100%;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:clamp(24px,4vw,64px)}
.journey .jcol{display:flex;flex-direction:column;gap:clamp(18px,3vh,34px)}
.journey .jintro h2{font-size:clamp(1.8rem,3.2vw,3rem);line-height:.95;margin-top:8px}
.journey .jts{display:grid}
.journey .jt{grid-area:1/1;opacity:0;transform:translateY(18px);transition:opacity .45s,transform .6s var(--ease);pointer-events:none}
.journey .jt.on{opacity:1;transform:none;pointer-events:auto}
.journey .jt .n{font-family:var(--head);font-weight:800;color:var(--red);font-size:1rem;letter-spacing:.12em;display:block;margin-bottom:8px}
.journey .jt h3{font-family:var(--head);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(2.6rem,5.2vw,5rem);line-height:.9;margin:0}
.journey .jt p{font-size:clamp(1rem,1.25vw,1.18rem);color:var(--ink2);margin:16px 0 22px;max-width:40ch}
.journey .jrail{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.journey .jrail button{font:inherit;font-family:var(--head);font-weight:700;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line);background:#fff;color:var(--muted);border-radius:999px;padding:8px 12px;cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.journey .jrail button b{color:var(--red);margin-right:6px}
.journey .jrail button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.journey .lens{position:relative;justify-self:center;width:min(100%,calc(80vh * 900 / 748));aspect-ratio:900/748}
.journey .lens .edge,.journey .lens .win{position:absolute;inset:0;-webkit-mask:url(https://worldliverday.org/wp-content/plugins/wld-landing/assets/liver-mask-hd.webp) center/contain no-repeat;mask:url(https://worldliverday.org/wp-content/plugins/wld-landing/assets/liver-mask-hd.webp) center/contain no-repeat}
.journey .lens .edge{background:var(--ink);transform:scale(1.025)}
.journey .lens .win{background:#fff;overflow:hidden}
.journey .lens .stage-art{position:absolute;left:50%;top:50%;width:118%;height:auto;aspect-ratio:1;transform:translate(-50%,-50%)}
.journey .lens .stage-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#fff;filter:none;opacity:0;will-change:clip-path,transform,filter,opacity}
@media(max-width:900px){
 .journey .jg{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-content:center;gap:18px;padding-top:86px}
 .journey .lens{order:-1;width:min(100%,calc(40vh * 900 / 748))}
 .journey .jintro{display:none}
 .journey .jt{text-align:center}.journey .jt p{margin:10px auto 14px}.journey .jt h3{font-size:clamp(2rem,10vw,3rem)}
 .journey .jrail{justify-content:center}.journey .jrail button{padding:6px 9px;font-size:0}.journey .jrail button b{font-size:.7rem;margin:0}
}

.journey .jprog{display:flex;flex-direction:column;gap:10px}
@media(max-width:900px){.journey .jprog{align-items:center}}


/* hero backgrounds (Settings): globe lines, dotted world, colour aura — all very faint, behind the content */
.hero .hbg{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero>.wrap{position:relative;z-index:1}
.hbg>*{position:absolute;opacity:0;transition:opacity .8s}

/* dotted world: canvas, drawn by app.js */
.hbg canvas.g-map{left:0;top:0;opacity:1}
/* progress: soft colour aura that rises into the next stage's colour + a small gauge on the right */
.journey .jaura{display:block;position:absolute;inset:0;pointer-events:none;overflow:hidden}
.journey .jg{position:relative}
.journey .jgauge{display:flex;flex-direction:column;align-items:center;gap:10px;position:absolute;right:clamp(14px,2.4vw,34px);top:50%;transform:translateY(-50%);z-index:2;font-family:var(--head);font-weight:800;font-size:.7rem;letter-spacing:.08em}
.journey .jgauge .to{color:var(--ink)}.journey .jgauge .from{color:var(--muted)}
.journey .jgauge .tr{position:relative;width:2px;height:clamp(110px,18vh,170px);background:var(--line);border-radius:2px}
.journey .jgauge .fl{position:absolute;left:0;right:0;bottom:0;height:calc(var(--f,0) * 100%);background:var(--ink);border-radius:2px}
.journey .jgauge .mk{position:absolute;left:50%;bottom:calc(var(--f,0) * 100%);width:12px;height:12px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px rgba(237,39,55,.18);transform:translate(-50%,50%)}
@media(max-width:900px){.journey .jgauge{right:10px;top:34%}}

/* aura: three soft colours per stage (homepage life stages + stage-page heroes) */
.journey .jaura i,.aura i{position:absolute;left:-10%;right:-10%;height:120%;bottom:-10%;filter:blur(60px);
 background:radial-gradient(38% 42% at 18% 70%,var(--a1) 0,transparent 70%),radial-gradient(34% 40% at 82% 30%,var(--a2) 0,transparent 70%),radial-gradient(30% 34% at 60% 88%,var(--a3) 0,transparent 70%),radial-gradient(26% 30% at 36% 22%,var(--a2) 0,transparent 72%)}
.journey .jaura .cur{--a1:var(--c1,#fff);--a2:var(--c2,#fff);--a3:var(--c3,#fff);opacity:calc(.32 * (1 - var(--f,0)))}
.journey .jaura .nxt{--a1:var(--n1,#fff);--a2:var(--n2,#fff);--a3:var(--n3,#fff);opacity:calc(.32 * var(--f,0));transform:translateY(calc((1 - var(--f,0)) * 55%))}
.phero{position:relative;overflow:hidden}
.phero>.wrap{position:relative;z-index:1}
.aura{position:absolute;inset:0;pointer-events:none;z-index:0}
.aura i{--a1:var(--c1);--a2:var(--c2);--a3:var(--c3);opacity:.32}


/* aura: fade out at the top and bottom so it blends into the next section */
.journey .jaura,.aura{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 72%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 72%,transparent 100%)}

/* handprint wall (get involved): the B idea, restyled calm and editorial */
.hp-g{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,80px);align-items:center}
.hp .swatches{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 26px}
.hp .swatches button{width:30px;height:30px;border-radius:50%;border:0;cursor:pointer;box-shadow:0 0 0 1px rgba(0,0,0,.08);transition:transform .25s var(--ease),box-shadow .25s}
.hp .swatches button:hover{transform:scale(1.12)}
.hp .swatches button.on{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--ink)}
.hp .counter{display:flex;align-items:baseline;gap:12px;margin-bottom:24px}
.hp .counter b{font-family:var(--head);font-weight:800;font-size:clamp(2.2rem,4vw,3.4rem);letter-spacing:-.02em;color:var(--red);line-height:1;font-variant-numeric:tabular-nums}
.hp .counter span{color:var(--muted);font-size:.95rem}
.hp .share-cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hp .share-cta .btn{opacity:.35;pointer-events:none;transition:opacity .4s}
.hp .share-cta.on .btn{opacity:1;pointer-events:auto}
.hp .share-cta small{color:var(--muted)}.hp .share-cta.on small{display:none}
.hp .canvas-liver{position:relative;width:100%;max-width:620px;margin:0 auto;aspect-ratio:1;cursor:crosshair;user-select:none;-webkit-user-select:none}
.hp .canvas-liver svg{position:absolute;inset:0;width:100%;height:100%}
.hp .canvas-liver .lv{overflow:visible;pointer-events:none}
.hp .canvas-liver .lv-fill path{fill:#fff}
.hp .canvas-liver .lv-fill{filter:drop-shadow(0 40px 60px rgba(0,0,0,.12))}
.hp .canvas-liver .lv-line path{fill:none;stroke:var(--ink);stroke-width:55;stroke-linejoin:round}
.hp .canvas-liver svg.hs{-webkit-mask:url(https://worldliverday.org/wp-content/plugins/wld-landing/assets/liver-mask-hd.webp) center/contain no-repeat;mask:url(https://worldliverday.org/wp-content/plugins/wld-landing/assets/liver-mask-hd.webp) center/contain no-repeat}
.hp .canvas-liver .hand{transform-box:fill-box;transform-origin:center;animation:hpstamp .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes hpstamp{from{transform:scale(1.6);opacity:0}}
.hp .canvas-liver .hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#fff;border:1px solid var(--line);border-radius:999px;padding:10px 18px;white-space:nowrap;font-family:var(--head);font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;box-shadow:0 14px 30px -18px rgba(0,0,0,.4);pointer-events:none;transition:opacity .4s}
.hp .canvas-liver.used .hint{opacity:0}
@media(max-width:900px){.hp-g{grid-template-columns:1fr}.hp .canvas-liver{max-width:520px}}
/* postcard modal, A style */
.a-modal{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .35s}
.a-modal.open{opacity:1;pointer-events:auto}
.a-modal .modal-bg{position:absolute;inset:0;background:rgba(10,10,10,.45);backdrop-filter:blur(4px)}
.a-modal .modal-card{position:relative;width:min(960px,100%);max-height:92vh;overflow:auto;background:#fff;border-radius:28px;padding:clamp(20px,3vw,36px);box-shadow:0 40px 90px -30px rgba(0,0,0,.5);transform:translateY(16px);transition:transform .45s var(--ease)}
.a-modal.open .modal-card{transform:none}
.a-modal .x{position:absolute;right:16px;top:16px;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:1.3rem;cursor:pointer;z-index:2}
.a-modal .modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);align-items:center}
.a-modal canvas{width:100%;height:auto;border-radius:18px;display:block;box-shadow:0 20px 40px -24px rgba(0,0,0,.35)}
.a-modal h3{font-family:var(--head);font-weight:800;text-transform:uppercase;font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:.95;margin:10px 0 12px}
.a-modal p{color:var(--ink2);margin:0 0 20px}
.a-modal .share-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.a-modal .socials{display:flex;flex-wrap:wrap;gap:8px}
.a-modal .socials a,.a-modal .socials button{font:inherit;font-family:var(--head);font-weight:700;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:8px 14px;cursor:pointer;text-decoration:none}
.a-modal .socials a:hover,.a-modal .socials button:hover{background:var(--ink);color:#fff}
.a-modal .caption{font-size:.85rem;color:var(--muted);margin:18px 0 0}
@media(max-width:760px){.a-modal .modal-grid{grid-template-columns:1fr}}

/* layers of influence ("Most liver disease is preventable") — widgets preview page: a prominent banner, animated in, tap a layer for examples */
.ly{padding:clamp(70px,9vw,130px) 0;background:linear-gradient(180deg,var(--bg),#fbeee6 30%,#fbeee6 70%,var(--bg))}
.ly-g{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,80px);align-items:center}
.ly-arc{position:relative;width:100%;aspect-ratio:600/560;container-type:inline-size}
.ly-arc>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ly .ring{cursor:pointer;transform-box:view-box;transform-origin:50% 114%;transition:transform .9s var(--ease),opacity .7s,filter .4s;stroke:#fbeee6;stroke-width:3}
.ly .ring[data-i="0"]{fill:var(--red)}
.ly .ring[data-i="1"]{fill:color-mix(in srgb,var(--red) 78%,#fff3e8)}
.ly .ring[data-i="2"]{fill:color-mix(in srgb,var(--red) 56%,#fff3e8)}
.ly .ring[data-i="3"]{fill:color-mix(in srgb,var(--red) 36%,#fff3e8)}
.ly .ring[data-i="4"]{fill:color-mix(in srgb,var(--red) 18%,#fff3e8)}
.ly .lb{position:absolute;left:50%;transform:translate(-50%,0);width:min(70%,440px);display:flex;align-items:center;gap:clamp(8px,2cqi,16px);border:0;background:none;padding:0;cursor:pointer;text-align:center;color:var(--ink);transition:opacity .7s,transform .7s var(--ease)}
.ly .lb-l{flex-direction:row-reverse}
.ly .lb .ic{flex:none;width:clamp(30px,8cqi,52px);height:clamp(30px,8cqi,52px);border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;box-shadow:0 10px 20px -12px rgba(0,0,0,.4);transition:transform .4s var(--ease)}
.ly .lb .ic svg{width:55%;height:55%}
.ly .lb .tx{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px}
.ly .lb b{font-family:var(--head);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(.8rem,3.6cqi,1.45rem);line-height:.95}
.ly .lb small{font-size:clamp(.6rem,2.1cqi,.86rem);line-height:1.3;opacity:.85;max-width:36ch}
.ly .lb[data-i="0"],.ly .lb[data-i="1"]{color:#fff}
.ly .lb[data-i="0"]{width:46%}.ly .lb[data-i="1"]{width:58%}
.ly .lb:hover .ic,.ly .lb.open .ic{scale:1.12;rotate:-6deg}
.ly .ring.hov{filter:brightness(1.06) drop-shadow(0 -6px 16px rgba(237,39,55,.25))}
/* entrance: rings rise one after another (inner first), then the labels */
.ly .ring{transform:scale(.6);opacity:0}
.ly .lb{opacity:0;transform:translate(-50%,calc(-50% + 14px))}
.ly.in .ring{transform:none;opacity:1}
.ly.in .lb{opacity:1;transform:translate(-50%,-50%)}
.ly.in .ring[data-i="1"]{transition-delay:.12s}.ly.in .ring[data-i="2"]{transition-delay:.24s}.ly.in .ring[data-i="3"]{transition-delay:.36s}.ly.in .ring[data-i="4"]{transition-delay:.48s}
.ly.in .lb[data-i="0"]{transition-delay:.55s}.ly.in .lb[data-i="1"]{transition-delay:.65s}.ly.in .lb[data-i="2"]{transition-delay:.75s}.ly.in .lb[data-i="3"]{transition-delay:.85s}.ly.in .lb[data-i="4"]{transition-delay:.95s}
.ly .ly-t>*{opacity:0;transform:translateY(16px);transition:opacity .8s,transform .8s var(--ease)}
.ly.in .ly-t>*{opacity:1;transform:none}
.ly.in .ly-t>*:nth-child(2){transition-delay:.15s}.ly.in .ly-t>*:nth-child(3){transition-delay:.3s}.ly.in .ly-t>*:nth-child(4){transition-delay:.45s}
@media(prefers-reduced-motion:reduce){.ly .ring,.ly .lb,.ly .ly-t>*{transition:none}}
.ly-hint{text-align:center;margin:16px 0 0;font-family:var(--head);font-weight:700;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.ly-t .x-h2{margin-bottom:16px;font-size:clamp(2.2rem,4vw,3.8rem)}
.ly-t .x-h2::after{content:"";display:block;width:min(240px,60%);height:6px;background:var(--red);margin-top:18px}
.ly-p{color:var(--ink2);font-size:clamp(.95rem,1.1vw,1.05rem);line-height:1.6;margin:0 0 18px}
.ly-step{margin:0;font-size:1.02rem}
@media(max-width:900px){.ly-g{grid-template-columns:1fr}.ly .lb small{display:none}.ly .lb.open small{display:block}.ly .lb .tip i:nth-child(n+3){display:none}}

/* "Every movement matters" widget (hidden preview page) */
.mv{padding:130px 0 90px}
.mv-flag{display:inline-block;font-family:var(--head);font-weight:700;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--red);border:1px dashed rgba(0,0,0,.25);border-radius:999px;padding:7px 14px;margin:0 0 26px}
.mv-head{max-width:760px;margin-bottom:34px}
.mv-head .x-h2{font-size:clamp(2.4rem,5vw,4.4rem)}
.mv-lead{font-size:clamp(1rem,1.3vw,1.2rem);color:var(--ink2);margin:16px 0 0}
.mv-k{display:block;font-family:var(--head);font-weight:700;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.mv-card{background:#fff;border-radius:32px;padding:clamp(22px,3.5vw,44px);box-shadow:0 40px 80px -50px rgba(0,0,0,.35)}
.mv-chips{display:flex;flex-wrap:wrap;gap:8px}
.mv-chip{font:inherit;font-weight:600;font-size:.88rem;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:10px 16px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:background .3s,color .3s,border-color .3s}
.mv-chip small{font-size:.7rem;opacity:.65}
.mv-chip:hover{border-color:var(--ink)}
.mv-chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.mv-main{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,60px);align-items:center;margin-top:34px;padding-top:34px;border-top:1px solid var(--line)}
.mv-big{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.mv-big b{font-family:var(--head);font-weight:800;font-size:clamp(4rem,9vw,7.5rem);line-height:.85;letter-spacing:-.04em;color:var(--red)}
.mv-big span{font-family:var(--head);font-weight:700;font-size:clamp(1rem,1.6vw,1.4rem);text-transform:uppercase;letter-spacing:.02em}
.mv-note{color:var(--ink2);margin:16px 0 0;max-width:40ch}
.mv-you{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,36px);align-items:center}
.mv-ring{position:relative;width:clamp(140px,15vw,190px);aspect-ratio:1}
.mv-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.mv-ring circle{fill:none;stroke:var(--bg);stroke-width:10}
.mv-ring circle.f{stroke:var(--red);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .6s var(--ease)}
.mv-pct{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.mv-pct b{font-family:var(--head);font-weight:800;font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1}
.mv-pct small{font-size:.75rem;color:var(--muted)}
.mv-mins label{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.mv-val{font-family:var(--head);font-weight:800;font-size:1.05rem}
.mv-mins input{width:100%;accent-color:var(--red);margin:6px 0 4px}
.mv-dgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.mv-day{font:inherit;font-family:var(--head);font-weight:700;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;aspect-ratio:1;border-radius:14px;border:1px solid var(--line);background:#fff;cursor:pointer;transition:background .25s,color .25s,transform .25s var(--ease)}
.mv-day[aria-pressed=true]{background:var(--red);border-color:var(--red);color:#fff;transform:translateY(-2px)}
.mv[data-kind=min] .mv-days,.mv[data-kind=days] .mv-mins,.mv[data-kind=days] .mv-scale{display:none}
.mv-msg{margin:16px 0 0;font-weight:600;min-height:3em}
.mv-scale{margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.mv-scale .tr{position:relative;height:8px;border-radius:8px;background:linear-gradient(90deg,var(--bg) 0 calc(150/420*100%),color-mix(in srgb,var(--red) 18%,#fff) 0 calc(300/420*100%),color-mix(in srgb,var(--red) 32%,#fff) 0)}
.mv-scale .fl{position:absolute;left:0;top:0;bottom:0;border-radius:8px;background:var(--red);width:calc(var(--w,0) * 100%);transition:width .6s var(--ease)}
.mv-scale .mk{position:absolute;top:50%;left:calc(var(--w,0) * 100%);width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--red);transform:translate(-50%,-50%);transition:left .6s var(--ease)}
.mv-scale .lb{position:relative;height:22px;margin-top:10px;font-family:var(--head);font-weight:700;font-size:.68rem;letter-spacing:.1em;color:var(--muted)}
.mv-scale .lb span{position:absolute;transform:translateX(-50%)}.mv-scale .lb span:first-child{transform:none}
.mv-scale .lb .end{right:0;transform:none;text-transform:uppercase}
.mv-tips{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}
.mv-tip{background:#fff;border-radius:22px;padding:20px 22px}
.mv-tip b{font-family:var(--head);font-weight:800;text-transform:uppercase;font-size:1.15rem;color:var(--red)}
.mv-tip p{margin:4px 0 0;color:var(--ink2);font-size:.95rem}
.mv-src{margin:24px 0 0;font-size:.85rem;color:var(--muted)}.mv-src a{color:inherit}
@media(max-width:900px){.mv-main,.mv-you{grid-template-columns:1fr}.mv-ring{margin:0 auto}.mv-tips{grid-template-columns:1fr}.mv-scale .lb .end{display:none}}

/* widgets preview page */
.wg-top{padding:140px 0 10px}
.wg-top .x-h2{font-size:clamp(2.2rem,4.6vw,4rem);max-width:16ch}
.wg-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.wg-nav a{font-family:var(--head);font-weight:700;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--ink);border:1px solid var(--line);background:#fff;border-radius:999px;padding:10px 16px}
.wg-nav a:hover{background:var(--ink);color:#fff}
.mv{padding:clamp(70px,9vw,120px) 0}
/* "Guide to alcohol units" widget */
.au{padding:clamp(70px,9vw,120px) 0;background:linear-gradient(180deg,var(--bg),#eef4f8 25%,#eef4f8 75%,var(--bg))}
.au-facts{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:14px;margin-bottom:18px}
.au-f{background:#fff;border-radius:22px;padding:20px 22px}
.au-f b{font-family:var(--head);font-weight:800;text-transform:uppercase;font-size:1.1rem;color:var(--red)}
.au-f p{margin:8px 0 0;color:var(--ink2);font-size:.92rem}
.au-f .fx{font-family:var(--head);font-weight:800;color:var(--ink);font-size:1rem}
.au-try{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;margin-top:12px}
.au-try label{font-family:var(--head);font-weight:700;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px}
.au-try output{color:var(--ink)}
.au-try input{width:100%;accent-color:var(--red)}
.au-try .res{grid-column:1/-1;margin:2px 0 0;font-weight:600}.au-try .res b{font-family:var(--head);font-size:1.6rem;color:var(--red)}
.au-main{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr);gap:18px;align-items:start}
.au-list,.au-side{background:#fff;border-radius:28px;padding:clamp(18px,2.6vw,30px)}
.au-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.au-d{position:relative;border:1px solid var(--line);border-radius:18px;padding:14px;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;gap:4px 10px;transition:border-color .3s,box-shadow .3s}
.au-d.has{border-color:var(--red);box-shadow:0 12px 26px -18px rgba(237,39,55,.6)}
.au-d .g{grid-row:1/3;width:40px;height:40px;border-radius:12px;background:var(--bg);display:grid;place-items:center;color:var(--ink)}
.au-d .g svg{width:26px;height:26px}
.au-d .t b{display:block;font-size:.82rem;line-height:1.2}
.au-d .t small{color:var(--muted);font-size:.72rem}
.au-d .u{grid-column:1/-1;font-family:var(--head);font-weight:800;font-size:1.5rem;color:var(--red);line-height:1}
.au-d .u small{font-size:.7rem;color:var(--ink);margin-left:4px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.au-d .q{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;background:var(--bg);border-radius:999px;padding:3px}
.au-d .q button{width:30px;height:30px;border-radius:50%;border:0;background:#fff;font-size:1.1rem;cursor:pointer;line-height:1;color:var(--ink)}
.au-d .q button:hover{background:var(--ink);color:#fff}
.au-d .q output{font-family:var(--head);font-weight:800}
.au-note{margin:12px 0 0;font-size:.8rem;color:var(--muted)}
.au-side{position:sticky;top:96px}
.au-total{display:flex;align-items:baseline;gap:8px}
.au-total b{font-family:var(--head);font-weight:800;font-size:clamp(3.4rem,6vw,5rem);line-height:.9;letter-spacing:-.04em;transition:color .3s}
.au-total span{font-family:var(--head);font-weight:700;text-transform:uppercase}
.au-side.over .au-total b{color:var(--red)}
.au-bar{position:relative;height:12px;border-radius:12px;background:var(--bg);margin:16px 0 26px}
.au-bar .fl{position:absolute;left:0;top:0;bottom:0;border-radius:12px;background:#2fa84f;width:calc(var(--w,0) * 100%);transition:width .5s var(--ease),background .3s}
.au-side.near .au-bar .fl{background:#f7b500}.au-side.over .au-bar .fl{background:var(--red)}
.au-bar .lim{position:absolute;top:-6px;bottom:-6px;left:calc(14/21*100%);width:2px;background:var(--ink)}
.au-bar .lim em{position:absolute;top:100%;left:50%;transform:translateX(-50%);font-style:normal;font-family:var(--head);font-weight:800;font-size:.72rem;margin-top:4px}
.au-msg{font-weight:600;margin:0 0 12px;min-height:3em}
.au-reset{font:inherit;font-family:var(--head);font-weight:700;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 14px;cursor:pointer}
.au-rules{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-size:.9rem;color:var(--ink2)}
.au-rules p{margin:0 0 10px}.au-rules .eq{font-style:italic;color:var(--muted)}
@media(max-width:1100px){.au-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.au-facts,.au-main{grid-template-columns:1fr}.au-side{position:static}}
@media(max-width:520px){.au-grid{grid-template-columns:1fr}}

/* layers: tap a band to open it; the band grows and pushes the others up or down (radii animated in app.js) */
.ly .lb .tip{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;max-height:0;overflow:hidden;opacity:0;margin-top:0;transition:max-height .5s var(--ease),opacity .4s,margin .4s}
.ly .lb .tip .tk{width:100%;font-family:var(--head);font-weight:700;font-size:clamp(.5rem,1.6cqi,.62rem);letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.ly .lb .tip i{font-style:normal;font-weight:600;font-size:clamp(.6rem,2cqi,.8rem);background:#fff;color:var(--ink);border-radius:999px;padding:4px 11px;box-shadow:0 6px 14px -10px rgba(0,0,0,.5)}
.ly .lb.open .tip{max-height:6em;opacity:1;margin-top:8px}
.ly .lb small{transition:opacity .35s,max-height .45s var(--ease);max-height:5em;overflow:hidden}
.ly.has-open .lb:not(.open) small{opacity:0;max-height:0}
.ly.has-open .lb:not(.open){opacity:.85}
.ly .lb.open b{font-size:clamp(.95rem,4.4cqi,1.75rem)}
.ly .lb b{transition:font-size .4s var(--ease)}
.ly .ring.open{filter:drop-shadow(0 -8px 20px rgba(237,39,55,.28))}
.ly .lb[data-i="0"]{transition:opacity .7s,transform .7s var(--ease),width .5s var(--ease)}
.ly .lb[data-i="0"].open{width:64%}

/* centring: the text block sits on the diagram's centre line, the icon floats at its side, labels are centred in their band (top set in app.js) */
.ly .lb{display:block;transform:translate(-50%,-50%)}
.ly .lb .ic{position:absolute;top:50%;margin-top:calc(clamp(30px,8cqi,52px) / -2);transition:scale .4s var(--ease),rotate .4s var(--ease)}
.ly .lb-r .ic{right:0}.ly .lb-l .ic{left:0}
.ly .lb .tx{padding:0 calc(clamp(30px,8cqi,52px) + clamp(8px,2cqi,16px))}
.ly .lb[data-i="4"]{width:min(86%,540px)}.ly .lb[data-i="3"]{width:min(76%,480px)}
.ly .lb .ic{color:var(--red)}
.au-d .g{color:var(--red);background:color-mix(in srgb,var(--red) 10%,#fff)}
/* life stages: the stage name always fits its column, so it never runs into the liver */
.journey .jcol{container-type:inline-size;position:relative;z-index:2}
.journey .jt h3{font-size:clamp(2rem,min(5.2vw,12.5cqi),5rem);overflow-wrap:normal}

/* widgets page 2 — "When fat builds up in the liver" (MASLD journey) */
.mj{padding:clamp(60px,8vw,110px) 0}
.mj-card{background:#fff;border-radius:32px;padding:clamp(22px,3.5vw,44px);box-shadow:0 40px 80px -50px rgba(0,0,0,.35)}
.mj-track{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:clamp(24px,4vw,44px)}
.mj-line{position:absolute;left:12.5%;right:12.5%;top:21px;height:4px;border-radius:4px;background:var(--bg)}
.mj-step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:none;cursor:pointer;font:inherit;color:var(--ink);padding:0}
.mj-step .d{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid var(--line);font-family:var(--head);font-weight:800;font-size:1rem;transition:background .4s,border-color .4s,color .4s,transform .4s var(--ease)}
.mj-step b{font-family:var(--head);font-weight:800;text-transform:uppercase;font-size:clamp(.7rem,1.2vw,.95rem);margin-top:6px;text-align:center}
.mj-step small{font-size:.75rem;color:var(--muted)}
.mj-step.done .d{background:color-mix(in srgb,var(--red) 12%,#fff);border-color:color-mix(in srgb,var(--red) 40%,#fff);color:var(--red)}
.mj-step.on .d{background:var(--red);border-color:var(--red);color:#fff;transform:scale(1.12)}
.mj-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,60px);align-items:center}
.mj-n{display:block;font-family:var(--head);font-weight:700;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.mj-info h3{font-family:var(--head);font-weight:800;text-transform:uppercase;font-size:clamp(1.8rem,3.4vw,3rem);line-height:.95;margin:8px 0 12px}
.mj-text{color:var(--ink2);margin:0 0 18px}
.mj-meter .mlab{display:flex;justify-content:space-between;font-family:var(--head);font-weight:700;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.mj-meter .mlab b{color:var(--ink);font-size:.9rem}
.mj-meter .bar{position:relative;height:12px;border-radius:12px;background:var(--bg)}
.mj-meter .fl{position:absolute;left:0;top:0;bottom:0;border-radius:12px;background:linear-gradient(90deg,#f0a35a,var(--red));width:calc(var(--f,0) * 100%);transition:width .7s var(--ease)}
.mj-meter .th{position:absolute;top:-6px;bottom:-6px;left:calc(5/15*100%);width:2px;background:var(--ink)}
.mj-meter .th em{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:4px;font-style:normal;font-family:var(--head);font-weight:800;font-size:.7rem;white-space:nowrap}
.mj-helps{display:flex;gap:10px;align-items:flex-start;margin:34px 0 20px;padding:14px 16px;border-radius:16px;background:color-mix(in srgb,var(--red) 7%,#fff);font-weight:600}
.mj-helps svg{flex:none;width:22px;height:22px;color:var(--red);margin-top:1px}
.mj-nav{display:flex;gap:8px}
.mj-nav button{font:inherit;font-family:var(--head);font-weight:700;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line);background:#fff;border-radius:999px;padding:10px 16px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;color:var(--ink)}
.mj-nav button svg{width:16px;height:16px;color:var(--red)}
.mj-nav button:hover{background:var(--ink);color:#fff}.mj-nav button:hover svg{color:#fff}
.mj-nav .mj-prev{padding:10px 12px}
.mj-boxes{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-top:18px}
.mj-box{background:#fff;border-radius:22px;padding:20px 22px}
.mj-box b{font-family:var(--head);font-weight:800;text-transform:uppercase;font-size:1.15rem;color:var(--red)}
.mj-box p{margin:6px 0 0;color:var(--ink2);font-size:.95rem}
.mj-cta{background:var(--red);color:#fff}.mj-cta b,.mj-cta p{color:#fff}.mj-cta svg{width:30px;height:30px;color:#fff;display:block;margin-bottom:8px}
@media(max-width:900px){.mj-main,.mj-boxes{grid-template-columns:1fr}.mj-step small{display:none}.mj-step .d{width:38px;height:38px}.mj-line{top:17px}}

/* widgets page 2 — food recommendations: a row of icons, tap one for its advice */
.fd{padding:clamp(60px,8vw,110px) 0;background:linear-gradient(180deg,var(--bg),#f2f6ec 25%,#f2f6ec 75%,var(--bg))}
.fd-card{background:#fff;border-radius:32px;padding:clamp(18px,3vw,36px);box-shadow:0 40px 80px -50px rgba(0,0,0,.35)}
.fd-tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;padding-bottom:clamp(18px,3vw,30px);border-bottom:1px solid var(--line)}
.fd-t{font:inherit;border:1px solid var(--line);background:#fff;border-radius:22px;padding:16px 8px 14px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--ink);transition:background .3s,border-color .3s,color .3s,transform .3s var(--ease)}
.fd-t .ic{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;background:color-mix(in srgb,var(--red) 10%,#fff);color:var(--red);transition:background .3s,color .3s}
.fd-t .ic svg{width:30px;height:30px}
.fd-t b{font-family:var(--head);font-weight:800;text-transform:uppercase;font-size:clamp(.66rem,1vw,.85rem);text-align:center;line-height:1.05}
.fd-t:hover{transform:translateY(-3px);border-color:var(--red)}
.fd-t.on{background:var(--red);border-color:var(--red);color:#fff}
.fd-t.on .ic{background:rgba(255,255,255,.18);color:#fff}
.fd-panels{position:relative}
.fd-p{display:none;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,40px);align-items:start;padding-top:clamp(20px,3vw,34px);animation:fdin .5s var(--ease)}
.fd-p.on{display:grid}
@keyframes fdin{from{opacity:0;transform:translateY(10px)}}
.fd-big{width:clamp(90px,10vw,140px);aspect-ratio:1;border-radius:32px;background:color-mix(in srgb,var(--red) 10%,#fff);color:var(--red);display:grid;place-items:center}
.fd-big svg{width:55%;height:55%}
.fd-p h3{font-family:var(--head);font-weight:800;text-transform:uppercase;font-size:clamp(1.8rem,3.4vw,3rem);line-height:.95;margin:6px 0 12px}
.fd-lead{font-size:clamp(1rem,1.25vw,1.15rem);color:var(--ink2);margin:0 0 16px;max-width:60ch}
.fd-how{display:block;font-family:var(--head);font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--red);margin-bottom:8px}
.fd-p ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;max-width:70ch}
.fd-p li{position:relative;padding:10px 14px 10px 38px;border-radius:14px;background:var(--bg)}
.fd-p li::before{content:"";position:absolute;left:14px;top:50%;width:12px;height:7px;border-left:2px solid var(--red);border-bottom:2px solid var(--red);transform:translateY(-70%) rotate(-45deg)}
@media(max-width:900px){.fd-tabs{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:120px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:16px}.fd-t{scroll-snap-align:start}.fd-p{grid-template-columns:1fr}.fd-big{width:80px;border-radius:22px}}

/* MASLD journey: the campaign liver, red to black */
.mj-liver{position:relative;display:grid;place-items:center;padding:2% 4%}
.mj-svg{position:relative;width:100%;height:auto;filter:drop-shadow(0 22px 26px rgba(40,10,8,.22));overflow:visible}
.mj-svg .st{opacity:0;transition:opacity .9s var(--ease)}
.mj[data-s="0"] .st0,.mj[data-s="1"] .st1,.mj[data-s="2"] .st2,.mj[data-s="3"] .st3{opacity:1}
.mj-line i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;width:calc(var(--p,0) * 100%);background:linear-gradient(90deg,#ED2737,#A4402A 40%,#5E2A1D 70%,#1A1312);background-size:calc(100% / max(var(--p,0),.001)) 100%;transition:width .7s var(--ease)}
.mj-track .mj-line{opacity:1;background:var(--bg)!important}
.mj-step[data-i="0"].on .d{background:#ED2737;border-color:#ED2737}.mj-step[data-i="1"].on .d{background:#A4402A;border-color:#A4402A}.mj-step[data-i="2"].on .d{background:#5E2A1D;border-color:#5E2A1D}.mj-step[data-i="3"].on .d{background:#1A1312;border-color:#1A1312}

/* icon kit (hidden page) */
.ik{padding:10px 0 110px}
.ik-card{background:#fff;border-radius:32px;padding:clamp(20px,3vw,40px);box-shadow:0 40px 80px -50px rgba(0,0,0,.35)}
.ik-spec{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.88rem;color:var(--ink2);padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:20px}
.ik-spec i{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:-2px;margin-right:6px}
.ik-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.ik-t{font:inherit;font-family:var(--head);font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line);background:#fff;border-radius:999px;padding:10px 16px;cursor:pointer;color:var(--ink);display:inline-flex;gap:8px;align-items:center}
.ik-t small{font-size:.7rem;color:var(--muted)}
.ik-t.on{background:var(--ink);border-color:var(--ink);color:#fff}.ik-t.on small{color:#bbb}
.ik-p{display:none;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.ik-p.on{display:grid;animation:fdin .4s var(--ease)}
.ik-c{font:inherit;border:1px solid var(--line);background:#fff;border-radius:18px;padding:18px 6px 12px;display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer;color:var(--red);transition:background .25s,transform .25s var(--ease),border-color .25s}
.ik-c svg{width:40px;height:40px}
.ik-c span{font-size:.72rem;color:var(--muted)}
.ik-c:hover{background:color-mix(in srgb,var(--red) 8%,#fff);border-color:var(--red);transform:translateY(-3px)}
.ik-tools{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.ik-tools label{font-family:var(--head);font-weight:700;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:flex;gap:8px;align-items:center}
.ik-tools select{font:inherit;font-size:.85rem;border:1px solid var(--line);border-radius:999px;padding:7px 12px;background:#fff;text-transform:none;letter-spacing:0;color:var(--ink)}
.ik-all{margin-left:auto}

/* campaign liver particles: a gentle shimmer */
.mj-svg .pt{animation:mjtw 3.2s ease-in-out infinite alternate}
@keyframes mjtw{from{opacity:.35}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.mj-svg .pt{animation:none}}
/* quick-jump boxes on the widgets preview page */
.wg-boxes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:28px}
.wg-box{position:relative;display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:18px 18px 16px;text-decoration:none;color:var(--ink);transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.wg-box:hover{transform:translateY(-4px);border-color:var(--red);box-shadow:0 20px 40px -26px rgba(237,39,55,.5)}
.wg-box .ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--red) 10%,#fff);color:var(--red);margin-bottom:6px}
.wg-box .ic svg{width:24px;height:24px}
.wg-box b{font-family:var(--head);font-weight:800;text-transform:uppercase;font-size:.95rem;line-height:1.05}
.wg-box small{color:var(--muted);font-size:.82rem}
.wg-box em{position:absolute;right:14px;top:14px;font-style:normal;font-family:var(--head);font-weight:700;font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--red);border-radius:999px;padding:3px 8px}
html{scroll-behavior:smooth}
@media(max-width:1000px){.wg-boxes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.wg-boxes{grid-template-columns:1fr}}
.wg-k{margin:30px 0 0}
.wg-k+.wg-boxes{margin-top:12px}
.wg-boxes:last-child{grid-template-columns:repeat(6,minmax(0,1fr))}
.wg-split{padding:70px 0 10px;border-top:1px solid var(--line);margin-top:40px}
.wg-split span{font-family:var(--head);font-weight:800;text-transform:uppercase;font-size:clamp(1.6rem,3vw,2.6rem)}
.wg-from{padding-top:60px}
.wg-from span{display:inline-flex;align-items:center;gap:8px;font-family:var(--head);font-weight:700;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--red);border:1px dashed color-mix(in srgb,var(--red) 45%,#fff);border-radius:999px;padding:7px 14px}
.wg-from svg{width:15px;height:15px}
.wg-dial .dial{max-width:620px;margin:0 auto}
@media(max-width:1000px){.wg-boxes:last-child{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ===== Shared components for all directions (v6) — skinned per direction via body.dir-* variables ===== */
body.dir-a{--x-card:#fff;--x-border:1px solid rgba(0,0,0,.09);--x-radius:18px;--x-shadow:0 24px 44px -34px rgba(0,0,0,.4);--x-tt:none;--x-soft:#efe9df;--x-head-w:800}
body.dir-b{--x-card:#fff;--x-border:3px solid #111;--x-radius:18px;--x-shadow:6px 6px 0 #111;--x-tt:uppercase;--x-soft:#fff3c4;--x-head-w:800}
body.dir-c{--x-card:rgba(255,255,255,.78);--x-border:1px solid rgba(0,0,0,.06);--x-radius:26px;--x-shadow:0 26px 50px -34px rgba(59,53,80,.45);--x-tt:uppercase;--x-soft:#efe9df;--x-head-w:800}
.x-sec{padding:clamp(64px,8vw,120px) 0;position:relative}
.x-sec.tight{padding-top:0}
.x-eyebrow{display:block;font-family:var(--head);font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:.74rem;color:var(--red);margin-bottom:14px}
.x-head{position:relative;margin-bottom:clamp(26px,3vw,40px);max-width:900px}
.x-head.c{margin-left:auto;margin-right:auto;text-align:center}
.x-h2{font-family:var(--head);font-weight:var(--x-head-w);font-size:clamp(2.1rem,4.8vw,4.2rem);line-height:.92;letter-spacing:-.03em;text-transform:var(--x-tt);margin:0}
.x-h3{font-family:var(--head);font-weight:800;font-size:clamp(1.25rem,1.8vw,1.6rem);line-height:1.02;letter-spacing:-.015em;margin:0 0 8px;text-transform:var(--x-tt)}
.x-lead{font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.5;margin:16px 0 0;max-width:62ch;color:inherit;opacity:.88}
.x-hint{position:absolute;right:-10px;top:-34px;width:clamp(70px,9vw,120px);pointer-events:none;transform:rotate(var(--r,-8deg))}
.x-head.c .x-hint{right:auto;left:calc(50% + 180px)}
.x-hint img{width:100%;height:auto;display:block}
.x-card{background:var(--x-card);border:var(--x-border);border-radius:var(--x-radius);box-shadow:var(--x-shadow)}
.x-grid{display:grid;gap:clamp(14px,2vw,24px)}
.x-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center}
@media(max-width:900px){.x-2{grid-template-columns:1fr}}
.btn.x-alt{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
body.dir-b .btn.x-alt{background:#fff;box-shadow:5px 5px 0 var(--ink)}
.x-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.x-tag{display:inline-block;font-family:var(--head);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.64rem;padding:5px 10px;border-radius:999px;background:var(--x-soft);color:var(--ink)}
.x-ph{font-size:.8rem;opacity:.6;font-style:italic}

/* ---- nav: dropdown + mobile */
.nav li{position:relative;list-style:none}
.nav li.on>a{background:var(--ink);color:#fff}
body.dir-b .nav li.on>a{background:var(--red)}
.nav .caret{display:inline-block;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);margin-left:7px}
.nav .sub{position:absolute;left:0;top:100%;padding-top:10px;opacity:0;visibility:hidden;transform:translateY(6px);transition:.25s;z-index:60}
.nav li:hover .sub,.nav li:focus-within .sub{opacity:1;visibility:visible;transform:none}
.nav .sub div{background:#fff;border:var(--x-border);border-radius:16px;box-shadow:0 24px 40px -20px rgba(0,0,0,.35);padding:8px;min-width:230px;display:grid}
body.dir-b .nav .sub div{box-shadow:5px 5px 0 #111}
.nav .sub a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;white-space:nowrap}
.nav .sub a:hover{background:var(--x-soft)}
.nav .sub a i{width:10px;height:10px;border-radius:50%;background:var(--sc)}
.x-burger{display:none;width:46px;height:46px;border-radius:50%;border:var(--x-border);background:#fff;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.x-burger span{display:block;width:18px;height:2px;background:var(--ink)}
.x-mnav{position:fixed;inset:0;z-index:900;background:var(--bg,#fff);padding:90px 28px 40px;overflow:auto;transform:translateY(-100%);transition:transform .45s var(--ease);visibility:hidden}
.x-mnav.open{transform:none;visibility:visible}
.x-mnav a{display:block;font-family:var(--head);font-weight:800;font-size:1.7rem;letter-spacing:-.02em;padding:8px 0;border-bottom:1px solid rgba(0,0,0,.08)}
.x-mnav a.s{font-size:1.15rem;font-weight:700;padding-left:18px;opacity:.8}
.x-mnav .x-close{position:absolute;right:22px;top:22px}
@media(max-width:980px){.hd .nav{display:none!important}.x-burger{display:inline-flex}}

/* ---- page hero for inner pages */
.x-phero{position:relative;padding:clamp(140px,16vw,190px) 0 clamp(40px,5vw,70px);overflow:hidden}
.x-phero h1{font-family:var(--head);font-weight:800;font-size:clamp(2.8rem,8vw,7.2rem);line-height:.86;letter-spacing:-.04em;margin:0;text-transform:var(--x-tt);max-width:14ch}
.x-phero .x-lead{font-size:clamp(1.1rem,1.6vw,1.35rem)}
.x-crumbs{font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.68rem;margin-bottom:18px;opacity:.7}
.x-crumbs a:hover{color:var(--red)}
.x-mix{position:absolute;inset:0;pointer-events:none;z-index:0}
.x-mix .m{position:absolute;width:var(--w,110px);transform:rotate(var(--r,0deg));animation:xfloat 7s ease-in-out infinite;animation-delay:var(--dl,0s);opacity:0;transition:opacity .8s}
.x-mix .m.in{opacity:1}
.x-mix .m img{width:100%;height:auto;display:block}
@keyframes xfloat{0%,100%{translate:0 0}50%{translate:0 -10px}}
.x-phero .wrap{position:relative;z-index:1}
body.no-motion .x-mix .m{animation:none}

/* ---- intro + video */
.x-points{display:grid;gap:14px;margin-top:24px}
.x-points div{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:start}
.x-points b{font-family:var(--head);font-weight:800;color:var(--red);font-size:1.3rem}
.x-points p{margin:0}
.x-video{position:relative;aspect-ratio:16/9;border-radius:var(--x-radius);overflow:hidden;background:#111;border:var(--x-border);box-shadow:var(--x-shadow);display:block;color:#fff}
.x-video img{width:100%;height:100%;object-fit:cover;opacity:.75;transition:transform .8s var(--ease),opacity .4s}
.x-video:hover img{transform:scale(1.04);opacity:.9}
.x-video .play{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:var(--red);display:grid;place-items:center;box-shadow:0 0 0 0 rgba(237,39,55,.5);animation:xpulse 2.4s infinite}
.x-video .play svg{width:30px;height:30px;margin-left:4px;fill:#fff}
@keyframes xpulse{70%{box-shadow:0 0 0 22px rgba(237,39,55,0)}100%{box-shadow:0 0 0 0 rgba(237,39,55,0)}}
.x-video .cap{position:absolute;left:16px;bottom:14px;right:16px;display:flex;justify-content:space-between;gap:10px;font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;text-shadow:0 1px 8px rgba(0,0,0,.5)}

/* ---- stats */
.x-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,2vw,22px)}
@media(max-width:900px){.x-stats{grid-template-columns:1fr 1fr}}
.x-stat{padding:clamp(18px,2vw,28px)}
.x-stat .n{font-family:var(--head);font-weight:800;font-size:clamp(2.6rem,5vw,4.6rem);line-height:.9;letter-spacing:-.04em;color:var(--red)}
.x-stat .n small{font-size:.38em;margin-left:6px;letter-spacing:0;color:var(--ink)}
.x-stat p{margin:12px 0 0;font-size:.98rem}

/* ---- habits (A/H) */
.x-habits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,2vw,22px)}
@media(max-width:1000px){.x-habits{grid-template-columns:1fr 1fr}}@media(max-width:560px){.x-habits{grid-template-columns:1fr}}
.x-habit{padding:26px 24px}
.x-habit .k{font-family:var(--head);font-weight:800;font-size:2.6rem;color:var(--red);line-height:1}
.x-habit p{margin:0;font-size:.97rem}

/* ---- stage cards */
.x-stagecards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.6vw,20px)}
@media(max-width:1100px){.x-stagecards{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:640px){.x-stagecards{grid-template-columns:1fr 1fr}}
.x-sc{display:flex;flex-direction:column;padding:16px 16px 20px;position:relative;overflow:hidden;transition:transform .4s var(--ease)}
.x-sc:hover{transform:translateY(-6px) rotate(-.6deg)}
.x-sc img{width:100%;aspect-ratio:1;object-fit:contain;transition:transform .6s var(--ease)}
.x-sc:hover img{transform:scale(1.06) rotate(-3deg)}
.x-sc small{font-family:var(--head);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.62rem;color:var(--sc)}
.x-sc h3{font-family:var(--head);font-weight:800;font-size:1.35rem;letter-spacing:-.02em;margin:4px 0 6px;text-transform:var(--x-tt)}
.x-sc p{margin:0;font-size:.88rem;opacity:.8}
.x-sc::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--sc)}

/* ---- voices: leadership videos + testimonials */
.x-leaders{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,1fr);gap:18px;overflow-x:auto;padding-bottom:12px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.x-leader{scroll-snap-align:start;overflow:hidden;display:block}
.x-leader .t{position:relative;aspect-ratio:4/5;background:var(--x-soft);display:grid;place-items:center;overflow:hidden}
.x-leader .t .logo{width:58%;max-height:40%;object-fit:contain;opacity:.95}
.x-leader .t .play{position:absolute;right:14px;bottom:14px;width:48px;height:48px;border-radius:50%;background:var(--red);display:grid;place-items:center}
.x-leader .t .play svg{width:18px;height:18px;fill:#fff;margin-left:3px}
.x-leader .b{padding:14px 16px 18px}
.x-leader .b b{font-family:var(--head);font-size:1.02rem;display:block;line-height:1.1}
.x-quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:28px}
@media(max-width:900px){.x-quotes{grid-template-columns:1fr}}
.x-quote{padding:26px 24px;position:relative}
.x-quote::before{content:"“";font-family:var(--head);font-weight:800;font-size:5rem;line-height:.6;color:var(--red);display:block;height:34px}
.x-quote p{font-size:1.1rem;line-height:1.45;margin:0 0 14px}
.x-quote .wld-footer,.x-quote .who{all:unset;display:block;font-family:var(--head);font-weight:700;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;opacity:.7}

/* ---- CTA band */
.x-cta{position:relative;overflow:hidden;background:var(--red);color:#fff;border-radius:calc(var(--x-radius) + 8px);padding:clamp(34px,5vw,70px);display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center}
body.dir-b .x-cta{border:3px solid #111;box-shadow:8px 8px 0 #111}
@media(max-width:900px){.x-cta{grid-template-columns:1fr}}
.x-cta .x-h2{color:#fff}
.x-cta .x-lead{opacity:.95}
.x-cta .btn{background:#fff;color:#111}
.x-cta .btn.x-alt{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px #fff}
.x-cta .links{display:grid;gap:10px}
.x-cta .links a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px;border-radius:14px;background:rgba(255,255,255,.14);font-family:var(--head);font-weight:700;transition:background .25s}
.x-cta .links a:hover{background:rgba(255,255,255,.26)}
.x-logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(24px,5vw,70px)}
.x-logos img{height:clamp(34px,4vw,54px);width:auto;max-width:170px;object-fit:contain}

/* ---- hub: liver brainstorm */
.x-brain{position:relative;aspect-ratio:1.35;max-width:880px;margin:0 auto;cursor:crosshair}
.x-brain .core{position:absolute;left:50%;top:50%;width:34%;transform:translate(-50%,-50%);filter:drop-shadow(0 20px 30px rgba(237,39,55,.35));transition:transform .5s var(--ease)}
.x-brain:hover .core{transform:translate(-50%,-50%) scale(1.04)}
.x-brain .core b{position:absolute;left:0;right:0;bottom:-44px;text-align:center;font-family:var(--head);font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:.78rem}
.x-brain .fn{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%) scale(.6);opacity:0;transition:opacity .45s,transform .5s var(--ease);font-family:var(--head);font-weight:700;font-size:clamp(.72rem,1.1vw,.92rem);white-space:nowrap;padding:8px 13px;border-radius:999px;background:var(--x-card);border:var(--x-border);box-shadow:var(--x-shadow)}
.x-brain .fn.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.x-brain .fn::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--red);margin-right:8px;vertical-align:middle}
.x-brain svg.lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.x-brain svg.lines line{stroke:var(--red);stroke-width:1.2;stroke-dasharray:3 5;opacity:0;transition:opacity .4s}
.x-brain svg.lines line.on{opacity:.55}
.x-brain .counter{position:absolute;left:0;bottom:0;font-family:var(--head);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;opacity:.7}
@media(max-width:700px){.x-brain{aspect-ratio:.8}.x-brain .core{width:48%}}
.x-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media(max-width:900px){.x-facts{grid-template-columns:1fr 1fr}}@media(max-width:520px){.x-facts{grid-template-columns:1fr}}
.x-fact{padding:24px 22px}
.x-fact .n{font-family:var(--head);font-weight:800;font-size:2.4rem;line-height:1;letter-spacing:-.03em;color:var(--red)}
.x-fact b{display:block;font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;margin:6px 0 10px}
.x-fact p{margin:0;font-size:.95rem}

/* ---- resources */
.x-res{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.x-r{display:flex;flex-direction:column;gap:12px;padding:20px 20px 18px;min-height:170px;transition:transform .3s var(--ease)}
.x-r:hover{transform:translateY(-4px)}
.x-r .ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--sc,var(--red));color:#fff}
.x-r .ico svg{width:22px;height:22px}
.x-r b{font-family:var(--head);font-size:1.12rem;line-height:1.1;flex:1}
.x-r span.dl{font-family:var(--head);font-weight:700;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;display:flex;justify-content:space-between}

/* ---- stage body */
.x-stagebody{--sc:var(--red)}
.x-risks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media(max-width:1000px){.x-risks{grid-template-columns:1fr 1fr}}@media(max-width:560px){.x-risks{grid-template-columns:1fr}}
.x-risk{padding:22px 22px 24px;border-top:6px solid var(--sc)}
body.dir-b .x-risk{border-top:3px solid #111}
.x-risk .i{font-family:var(--head);font-weight:800;font-size:.8rem;color:var(--sc);letter-spacing:.1em}
.x-risk p{margin:0;font-size:.95rem}
.x-recs{display:grid;gap:0;border-top:var(--x-border)}
body.dir-c .x-recs,body.dir-a .x-recs{border-top:1px solid rgba(0,0,0,.12)}
.x-rec{display:grid;grid-template-columns:90px minmax(0,1fr) minmax(0,1.4fr);gap:24px;align-items:baseline;padding:24px 0;border-bottom:1px solid rgba(0,0,0,.12)}
body.dir-b .x-rec{border-bottom:3px solid #111}
.x-rec .k{font-family:var(--head);font-weight:800;font-size:2.6rem;line-height:1;color:var(--sc)}
body.dir-c .stage-elderly .x-rec .k,body.dir-a .stage-elderly .x-rec .k{color:#c48a00}
.x-rec p{margin:0}
@media(max-width:800px){.x-rec{grid-template-columns:60px 1fr}.x-rec p{grid-column:2}}
.x-myths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;perspective:1400px}
@media(max-width:900px){.x-myths{grid-template-columns:1fr}}
.x-myth{position:relative;min-height:230px;cursor:pointer;background:none;border:0;padding:0;text-align:left;font:inherit;color:inherit;transform-style:preserve-3d;transition:transform .7s var(--ease)}
.x-myth.flip{transform:rotateY(180deg)}
.x-myth .f{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;padding:24px;display:flex;flex-direction:column;gap:12px;background:var(--x-card);border:var(--x-border);border-radius:var(--x-radius);box-shadow:var(--x-shadow)}
.x-myth .f.back{transform:rotateY(180deg);background:var(--sc);color:#fff}
.stage-elderly .x-myth .f.back,.stage-adulthood .x-myth .f.back{color:#fff}
.stage-elderly .x-myth .f.back{color:#111}
.x-myth .f b{font-family:var(--head);font-weight:800;font-size:1.35rem;line-height:1.1}
.x-myth .f .x-tag{align-self:flex-start}
.x-myth .f.back .x-tag{background:rgba(255,255,255,.25);color:inherit}
.x-myth .f small{margin-top:auto;font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.66rem;opacity:.65}
.x-noise{position:relative;height:0;z-index:0;pointer-events:none}
.x-noise .n{position:absolute;width:var(--w,90px);transform:rotate(var(--r,0deg)) scale(.7);opacity:0;transition:opacity .8s,transform .9s var(--ease)}
.x-noise .n.in{opacity:.9;transform:rotate(var(--r,0deg)) scale(1)}
.x-noise .n img{width:100%;height:auto;display:block}
.x-voice{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(20px,4vw,50px);align-items:center}
@media(max-width:900px){.x-voice{grid-template-columns:1fr}}
.x-prevnext{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.x-prevnext a{display:flex;align-items:center;gap:16px;padding:16px 20px}
.x-prevnext a.r{justify-content:flex-end;text-align:right}
.x-prevnext img{width:70px;height:70px;object-fit:contain}
.x-prevnext small{display:block;font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.64rem;opacity:.6}
.x-prevnext b{font-family:var(--head);font-size:1.3rem}

/* ---- get involved */
.x-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;counter-reset:st}
@media(max-width:900px){.x-steps{grid-template-columns:1fr}}
.x-step{padding:24px;display:flex;flex-direction:column;gap:10px}
.x-step::before{counter-increment:st;content:"0" counter(st);font-family:var(--head);font-weight:800;font-size:2.4rem;color:var(--red);line-height:1}
.x-step p{margin:0;flex:1}
.x-step a{font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.74rem;color:var(--red)}
.x-filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:22px}
.x-chip{font-family:var(--head);font-weight:700;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;padding:9px 14px;border-radius:999px;border:var(--x-border);background:var(--x-card);cursor:pointer;color:var(--ink)}
body.dir-a .x-chip,body.dir-c .x-chip{border:1px solid rgba(0,0,0,.14)}
.x-chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.x-chip i{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--c);margin-right:7px}
.x-select,.x-input{font:inherit;font-size:.95rem;padding:10px 14px;border-radius:999px;border:1px solid rgba(0,0,0,.18);background:#fff;color:var(--ink)}
body.dir-b .x-select,body.dir-b .x-input{border:3px solid #111}
.x-filters .sp{flex:1}
.x-tk{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.x-t{padding:14px;display:flex;flex-direction:column;gap:12px}
.x-t[hidden]{display:none}
.x-mock{background:#f8f5ef;border-radius:10px;display:grid;place-items:center;height:170px;overflow:hidden;position:relative}
.x-mock .fr{aspect-ratio:var(--ar);height:88%;max-width:92%;background:#fff;box-shadow:0 10px 24px -14px rgba(0,0,0,.4);display:flex;flex-direction:column;justify-content:space-between;padding:6%;overflow:hidden;position:relative}
.x-mock .fr b{font-family:var(--head);font-weight:800;line-height:.86;text-transform:uppercase;font-size:clamp(.5rem,1vw,.8rem);letter-spacing:-.02em}
.x-mock .fr b span{color:var(--red)}
.x-mock .fr img{position:absolute;right:4%;bottom:4%;width:48%;height:auto}
.x-mock .fr.vid{background:#111}.x-mock .fr.vid b{color:#fff}
.x-mock .fr.vid::after{content:"";position:absolute;left:50%;top:50%;border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent;transform:translate(-40%,-50%)}
.x-t .meta{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.x-t .meta b{font-family:var(--head);font-size:1.05rem}
.x-t .meta small{opacity:.6;font-size:.8rem}
.x-t .dl{display:flex;justify-content:space-between;align-items:center;font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.7rem;padding:10px 12px;border-radius:10px;background:var(--x-soft)}
.x-t .dl:hover{background:var(--red);color:#fff}
.x-wall{columns:4 240px;column-gap:16px}
.x-post{break-inside:avoid;margin-bottom:16px;overflow:hidden;display:block}
.x-post img{width:100%;display:block}
.x-post .p{padding:12px 14px 16px;font-size:.9rem}
.x-post .h{display:flex;align-items:center;gap:8px;font-family:var(--head);font-weight:700;font-size:.78rem;margin-bottom:6px}
.x-post .h i{width:22px;height:22px;border-radius:50%;background:var(--red);display:inline-block}
.x-post .h small{margin-left:auto;opacity:.55;font-weight:500}

/* ---- initiatives */
.x-counters{display:flex;gap:clamp(20px,4vw,50px);flex-wrap:wrap;margin-top:28px;font-family:var(--head);font-weight:800;text-transform:uppercase}
.x-counters div{display:flex;align-items:baseline;gap:10px}
.x-counters b{font-size:clamp(2.6rem,6vw,5rem);color:var(--red);letter-spacing:-.04em;line-height:1}
.x-counters span{font-size:.9rem;letter-spacing:.08em}
.x-map{position:relative;padding:clamp(10px,2vw,24px);overflow:hidden}
.x-map .canvas{position:relative}
.x-map .canvas>img{width:100%;height:auto;display:block}
.x-pin{position:absolute;left:var(--x);top:var(--y);width:22px;height:22px;margin:-22px 0 0 -11px;border:0;background:none;cursor:pointer;padding:0;z-index:2;transition:transform .25s var(--ease)}
.x-pin::before{content:"";position:absolute;inset:0;background:var(--c);border-radius:50% 50% 50% 0;transform:rotate(-45deg);border:2px solid #fff;box-shadow:0 4px 10px rgba(0,0,0,.3)}
.x-pin::after{content:"";position:absolute;left:50%;bottom:-6px;width:10px;height:4px;margin-left:-5px;border-radius:50%;background:rgba(0,0,0,.25)}
.x-pin:hover,.x-pin.on{transform:scale(1.35);z-index:3}
.x-pin[hidden]{display:none}
.x-pin.drop{animation:xdrop .6s var(--ease) both}
@keyframes xdrop{from{transform:translateY(-40px);opacity:0}}
.x-pop{position:absolute;z-index:5;width:min(320px,86%);padding:18px 18px 16px;transform:translate(-50%,calc(-100% - 30px));background:#fff;border-radius:16px;box-shadow:0 24px 50px -18px rgba(0,0,0,.45);border:var(--x-border)}
.x-pop[hidden]{display:none}
.x-pop .x{position:absolute;right:10px;top:8px;border:0;background:none;font-size:1.3rem;cursor:pointer}
.x-pop b{font-family:var(--head);font-size:1.12rem;line-height:1.1;display:block;margin:8px 0 6px;padding-right:18px}
.x-pop p{margin:6px 0;font-size:.88rem}
.x-pop .mt{font-size:.8rem;opacity:.7}
.x-pop a{font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;color:var(--red)}
.x-legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:14px;font-size:.82rem}
.x-legend span{display:inline-flex;align-items:center;gap:6px}
.x-legend i{width:10px;height:10px;border-radius:50%;background:var(--c)}
.x-ics{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px}
.x-ic{overflow:hidden;display:flex;flex-direction:column}
.x-ic[hidden]{display:none}
.x-ic .img{aspect-ratio:16/9;background:#f8f5ef;display:grid;place-items:center;position:relative;border-bottom:var(--x-border)}
body.dir-a .x-ic .img,body.dir-c .x-ic .img{border-bottom:1px solid rgba(0,0,0,.06)}
.x-ic .img img{width:46%;height:auto}
.x-ic .img .x-tag{position:absolute;left:12px;top:12px;background:var(--c);color:#fff}
.x-ic .b{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.x-ic .b b{font-family:var(--head);font-size:1.15rem;line-height:1.1}
.x-ic .b .mt{font-size:.82rem;opacity:.7}
.x-ic .b p{margin:4px 0 8px;font-size:.9rem;flex:1}
.x-ic .b button{align-self:flex-start;border:0;background:none;padding:0;cursor:pointer;font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;color:var(--red)}
.x-empty{padding:30px;text-align:center;opacity:.7}
.x-modal{position:fixed;inset:0;z-index:950;display:grid;place-items:center;padding:20px;background:rgba(10,10,10,.55);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:.3s}
.x-modal.open{opacity:1;visibility:visible}
.x-modal .card{position:relative;width:min(720px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:22px;border:var(--x-border)}
.x-modal .card>.x{position:absolute;right:14px;top:10px;z-index:2;width:40px;height:40px;border-radius:50%;border:0;background:#fff;font-size:1.4rem;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.x-modal .card .img{aspect-ratio:21/9;background:#f8f5ef;display:grid;place-items:center}
.x-modal .card .img img{width:30%}
.x-modal .card .in{padding:24px 28px 30px}
.x-modal .card dl{display:grid;grid-template-columns:130px 1fr;gap:8px 16px;font-size:.92rem;margin:18px 0}
.x-modal .card dt{font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.68rem;opacity:.6;padding-top:3px}
.x-modal .card dd{margin:0}
.x-modal.lb .card{width:min(1000px,100%);background:#111;border:0}
.x-modal.lb .card img{width:100%;display:block}

/* ---- forms */
.x-form{padding:clamp(22px,3vw,40px);display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.x-form .full{grid-column:1/-1}
.x-form label{display:flex;flex-direction:column;gap:6px;font-family:var(--head);font-weight:700;font-size:.78rem;letter-spacing:.04em}
.x-form label em{font-style:normal;color:var(--red)}
.x-form input,.x-form select,.x-form textarea{font:inherit;font-family:var(--body);font-weight:400;font-size:.98rem;padding:12px 14px;border-radius:12px;border:1px solid rgba(0,0,0,.2);background:#fff;color:var(--ink);width:100%;box-sizing:border-box}
body.dir-b .x-form input,body.dir-b .x-form select,body.dir-b .x-form textarea{border:2px solid #111}
.x-form textarea{min-height:120px;resize:vertical}
.x-form .check{flex-direction:row;align-items:flex-start;gap:10px;font-family:var(--body);font-weight:400;font-size:.92rem}
.x-form .check input{width:20px;height:20px;flex:none;margin-top:2px}
.x-form .radios{display:flex;gap:8px;flex-wrap:wrap}
.x-form .radios label{flex-direction:row;align-items:center;gap:6px;padding:9px 14px;border-radius:999px;border:1px solid rgba(0,0,0,.2);font-weight:700;cursor:pointer}
.x-form .radios input{width:auto;margin:0}
.x-form .hp{position:absolute;left:-9999px}
.x-form small.h{font-family:var(--body);font-weight:400;opacity:.6;font-size:.78rem}
@media(max-width:700px){.x-form{grid-template-columns:1fr}}
.x-thanks{padding:40px;text-align:center}
.x-thanks[hidden]{display:none}
.x-thanks b{font-family:var(--head);font-size:1.8rem;display:block;margin-bottom:10px}
.x-gallery{columns:3 260px;column-gap:14px}
.x-gallery button{display:block;width:100%;margin:0 0 14px;padding:0;border:0;background:none;cursor:zoom-in;border-radius:var(--x-radius);overflow:hidden;break-inside:avoid}
.x-gallery img{width:100%;display:block;transition:transform .6s var(--ease)}
.x-gallery button:hover img{transform:scale(1.04)}

/* ---- partners + contact */
.x-founders{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
@media(max-width:1000px){.x-founders{grid-template-columns:repeat(2,minmax(0,1fr))}}
.x-f{padding:24px 20px;display:flex;flex-direction:column;gap:12px;align-items:flex-start;transition:transform .3s var(--ease)}
.x-f:hover{transform:translateY(-4px)}
.x-f .lg{height:70px;width:100%;display:flex;align-items:center}
.x-f .lg img{max-height:56px;max-width:100%;object-fit:contain}
.x-f b{font-family:var(--head);font-size:1rem;line-height:1.15}
.x-f small{opacity:.65;font-size:.82rem}
.x-f span{margin-top:auto;font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.68rem;color:var(--red)}
.x-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.x-slot{aspect-ratio:3/2;border:2px dashed rgba(0,0,0,.2);border-radius:14px;display:grid;place-items:center;text-align:center;font-family:var(--head);font-weight:700;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;opacity:.6;padding:10px}
.x-disclaimer{margin-top:20px;padding:18px 20px;border-left:4px solid var(--red);background:var(--x-soft);border-radius:0 12px 12px 0;font-size:.92rem;max-width:760px}
.x-contact{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,60px);align-items:start}
@media(max-width:900px){.x-contact{grid-template-columns:1fr}}
.x-mail{font-family:var(--head);font-weight:800;font-size:clamp(1.3rem,2.6vw,2.2rem);letter-spacing:-.02em;word-break:break-word;border-bottom:3px solid var(--red)}
.x-socials{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.x-socials a{padding:10px 16px;border-radius:999px;border:var(--x-border);background:var(--x-card);font-family:var(--head);font-weight:700;font-size:.8rem}
body.dir-a .x-socials a,body.dir-c .x-socials a{border:1px solid rgba(0,0,0,.14)}

/* ---- reveal (all directions) */
.x-rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.x-rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.x-rv{opacity:1;transform:none}.x-mix .m,.x-video .play{animation:none}}
.x-form[hidden],.x-empty[hidden]{display:none}
.hd .brand.logo{display:block;padding:0;border:0;background:none;box-shadow:none}
.hd .brand.logo img{height:56px;width:auto;display:block}
@media(max-width:600px){.hd .brand.logo img{height:44px}}
.hd .wrap{gap:16px}
.hd .end{display:flex;align-items:center;gap:12px}
.x-mnav .x-close{width:46px;height:46px;border-radius:50%;border:1px solid rgba(0,0,0,.2);background:#fff;font-size:1.6rem;cursor:pointer}
html{overflow-x:clip}body{overflow-x:clip}
@media(max-width:700px){.x-brain .fn{white-space:normal;max-width:34vw;text-align:center;font-size:.68rem;padding:6px 9px}.x-hint{right:0}}
.x-form label{display:block;font-size:.84rem}
.x-form label>input,.x-form label>select,.x-form label>textarea{display:block;margin-top:7px}
.x-form label small.h{display:block;margin-top:2px}
.x-form .check{display:flex}
.x-form .radios label{display:inline-flex}
body .x-cta .btn.x-alt{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px #fff}
body.dir-b .x-cta .btn.x-alt{border-color:#fff;box-shadow:5px 5px 0 #111}
body.dir-b .x-cta .btn{border-color:#111}
.x-r .x-tag{align-self:flex-start}
@media(max-width:800px){.x-mix .m{width:58px!important;opacity:.55}.x-mix .m.in{opacity:.55}.x-mix .m:nth-child(n+4){display:none}.x-phero .x-mix .m:nth-child(n+3){display:none}}
/* ---- initiatives v7: toolbar, zoomable map, clusters, online strip */
.x-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.x-toolbar .sp{flex:1}
.x-seg{display:inline-flex;padding:4px;border-radius:999px;background:var(--x-card);border:var(--x-border)}
body.dir-a .x-seg,body.dir-c .x-seg{border:1px solid rgba(0,0,0,.14)}
.x-seg button{border:0;background:none;padding:8px 16px;border-radius:999px;font-family:var(--head);font-weight:700;font-size:.8rem;cursor:pointer;color:var(--ink)}
.x-seg button.on{background:var(--ink);color:#fff}
.x-map[hidden]{display:none}
.x-map .vp{position:relative;overflow:hidden;border-radius:calc(var(--x-radius) - 6px);background:#f3efe7;touch-action:none;cursor:grab;aspect-ratio:2/1}
.x-map .vp.grab{cursor:grabbing}
.x-map .layer{position:absolute;left:0;top:0;width:100%;transform-origin:0 0;--iz:1;will-change:transform}
.x-map .layer>img{width:100%;height:auto;aspect-ratio:2/1;display:block;user-select:none;-webkit-user-drag:none;pointer-events:none}
.x-map .layer .x-pin{transform:scale(var(--iz));transform-origin:50% 100%}
.x-map .layer .x-pin:hover,.x-map .layer .x-pin.on{transform:scale(calc(var(--iz) * 1.35))}
.x-map .layer .x-pin.in-cl{visibility:hidden}
.x-cl{position:absolute;left:var(--x);top:var(--y);width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;border:3px solid #fff;background:var(--red);color:#fff;font-family:var(--head);font-weight:800;font-size:1rem;cursor:pointer;transform:scale(var(--iz));box-shadow:0 0 0 6px rgba(237,39,55,.25),0 6px 14px rgba(0,0,0,.25);z-index:3;animation:xclp 2s infinite}
@keyframes xclp{50%{box-shadow:0 0 0 12px rgba(237,39,55,.08),0 6px 14px rgba(0,0,0,.25)}}
.x-zoom{position:absolute;right:calc(clamp(10px,2vw,24px) + 12px);top:calc(clamp(10px,2vw,24px) + 12px);display:flex;flex-direction:column;gap:6px;z-index:4;align-items:center}
.x-zoom button{width:40px;height:40px;border-radius:12px;border:var(--x-border);background:#fff;font-size:1.3rem;font-weight:700;cursor:pointer;box-shadow:0 6px 14px -8px rgba(0,0,0,.4);color:var(--ink)}
body.dir-a .x-zoom button,body.dir-c .x-zoom button{border:1px solid rgba(0,0,0,.15)}
.x-zoom .zl{font-family:var(--head);font-weight:700;font-size:.66rem;opacity:.6}
.x-maphint{position:absolute;left:calc(clamp(10px,2vw,24px) + 12px);top:calc(clamp(10px,2vw,24px) + 12px);font-size:.74rem;background:rgba(255,255,255,.85);padding:6px 10px;border-radius:999px;z-index:4;pointer-events:none}
.x-map .x-pop{transform:translate(-50%,calc(-100% - 14px))}
.x-online{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px}
.x-online[hidden]{display:none}
.x-online>span{font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.66rem;opacity:.65;margin-right:4px}
.x-online a{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:var(--x-soft);font-size:.85rem;font-weight:600}
.x-online a[hidden]{display:none}
.x-online a i{width:9px;height:9px;border-radius:50%}
.x-online small{opacity:.6;font-weight:400}
.x-ic .img .dt{position:absolute;right:12px;bottom:10px;background:#fff;border-radius:12px;padding:6px 10px;text-align:center;font-family:var(--head);font-weight:700;font-size:.7rem;text-transform:uppercase;line-height:1;box-shadow:0 6px 14px -8px rgba(0,0,0,.4)}
.x-ic .img .dt b{display:block;font-size:1.4rem;color:var(--red);margin-bottom:2px}
#x-browse.only{padding-top:0}
#x-more[hidden]{display:none}
@media(max-width:700px){.x-maphint{display:none}.x-map .vp{aspect-ratio:1.4/1}}
.x-ideas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media(max-width:900px){.x-ideas{grid-template-columns:1fr 1fr}}@media(max-width:560px){.x-ideas{grid-template-columns:1fr}}
.x-idea{padding:24px}
.x-idea .e{font-size:2rem;display:block;margin-bottom:10px}
.x-idea p{margin:0}
.x-best{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media(max-width:900px){.x-best{grid-template-columns:1fr}}
.x-best a{padding:22px;display:flex;flex-direction:column;gap:8px;transition:transform .3s var(--ease)}
.x-best a:hover{transform:translateY(-4px)}
.x-best .x-tag{align-self:flex-start}
.x-best b{font-family:var(--head);font-size:1.2rem;line-height:1.1}
.x-best small{opacity:.65}
.x-best p{margin:0;font-size:.92rem}
/* campaign film pop-up */
.x-modal.yt .card{width:min(1100px,100%);background:#000;border:0;border-radius:18px;overflow:visible;max-height:none}
.x-modal.yt iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:18px}
.x-modal.yt .card>.x{top:-18px;right:-18px}
@media(max-width:700px){.x-modal.yt .card>.x{top:-52px;right:0}}
/* header nav: stay on one line, tighten before switching to the burger menu */
.hd .nav a{white-space:nowrap}
.hd .brand.logo img{height:clamp(44px,4.2vw,56px)}
@media(max-width:1280px){body.dir-a .hd .nav a{padding-left:10px;padding-right:10px;font-size:.9rem}body.dir-b .hd .nav a{padding-left:12px;padding-right:12px;font-size:.74rem;letter-spacing:.04em}}
@media(max-width:1120px){body.dir-a .hd .nav a{padding-left:8px;padding-right:8px;font-size:.86rem}body.dir-b .hd .nav a{padding-left:9px;padding-right:9px;font-size:.7rem}}

@media(max-width:1180px){body.dir-a .hd .end .btn{display:none}.hd .wrap{gap:10px}}
.x-toolbar{flex-wrap:nowrap}
.x-toolbar .x-input{flex:1 1 180px;min-width:120px}
.x-toolbar .x-select{flex:0 1 auto;min-width:0}
.x-toolbar .sp{display:none}
.x-toolbar .btn{flex:none;margin-left:auto;white-space:nowrap}
@media(max-width:1100px){.x-toolbar{flex-wrap:wrap}}
.x-seg button{white-space:nowrap}
.x-seg{flex:none}
.x-toolbar{gap:8px}
.x-toolbar .x-select{flex:none;padding-right:30px}
.x-toolbar .x-input{flex:1 1 150px;min-width:130px}
.x-toolbar .btn{padding-left:20px;padding-right:20px}
#x-type{max-width:170px}#x-country{max-width:180px}
/* hint visuals sit behind the headings, never on top of the text */
.x-head,.h-row{isolation:isolate}
.x-hint{z-index:-1}
.x-head .x-h2,.x-head .x-eyebrow,.x-head .x-lead,.h-row .h2{position:relative;z-index:1}
/* bigger accent next to "Four habits. One liver." */
.x-hint.big{width:clamp(180px,22vw,320px);top:-10px;right:0}
@media(max-width:700px){.x-hint.big{width:140px;top:-30px}}
/* hint visuals: a touch bigger by default; the habits one sits behind the strip and is a little smaller */
.x-hint{width:clamp(90px,11vw,160px)}
.x-hint.big{width:clamp(150px,17vw,250px)}
.habits-sec .hstrip{position:relative;z-index:1}
/* leaders: arrows + visible scrollbar */
.x-carousel{position:relative}
.x-leaders{scrollbar-width:thin;scrollbar-color:var(--red) rgba(0,0,0,.08);padding-bottom:16px;scroll-behavior:smooth}
.x-leaders::-webkit-scrollbar{height:6px}.x-leaders::-webkit-scrollbar-thumb{background:var(--red);border-radius:6px}.x-leaders::-webkit-scrollbar-track{background:rgba(0,0,0,.08);border-radius:6px}
.x-nav{position:absolute;top:38%;z-index:3;width:48px;height:48px;border-radius:50%;border:var(--x-border);background:#fff;font-size:1.3rem;font-weight:700;cursor:pointer;box-shadow:var(--x-shadow);color:var(--ink);transition:opacity .25s,transform .25s}
body.dir-a .x-nav{border:1px solid rgba(0,0,0,.15)}
.x-nav:hover{transform:scale(1.08)}

.x-nav[disabled]{opacity:0;pointer-events:none}
@media(max-width:700px){.x-nav{display:none}}
/* partner logos: small zoom on hover */
.x-logos img{transition:transform .35s var(--ease)}
.x-logos a:hover img,.x-logos img:hover{transform:scale(1.12)}
/* leaders carousel v2: three cards per view, arrows + counter underneath */
.x-leaders{grid-auto-columns:calc((100% - 2 * 22px) / 3);gap:22px;scrollbar-width:none;padding-bottom:4px}
.x-leaders::-webkit-scrollbar{display:none}
.x-leader .t{aspect-ratio:16/10}
.x-cnav{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:18px}
.x-count{font-family:var(--head);font-weight:700;font-size:.8rem;letter-spacing:.08em;margin-right:6px;opacity:.7}
.x-nav{position:static;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;padding:0}
.x-nav[disabled]{opacity:.3;pointer-events:none}
.x-nav:hover{background:var(--ink);color:#fff}
body.dir-a .x-nav{background:#fff}
@media(max-width:900px){.x-leaders{grid-auto-columns:calc((100% - 22px) / 2)}}
@media(max-width:560px){.x-leaders{grid-auto-columns:84%}}
@media(max-width:700px){.x-nav{display:grid}}

/* header logo: small zoom on hover */
.hd .logo img{transition:transform .35s var(--ease,ease)}
.hd .logo:hover img{transform:scale(1.07)}

/* icons: Lucide line icons, all in the campaign red */
.x-r .ico{background:color-mix(in srgb,var(--red) 10%,#fff)!important;color:var(--red)!important}
.x-r .ico svg{width:22px;height:22px}
.x-idea .e{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:color-mix(in srgb,var(--red) 10%,#fff);color:var(--red);margin-bottom:14px}
.x-idea .e svg{width:28px;height:28px}
.x-seg button svg,.x-zoom button svg{width:15px;height:15px;vertical-align:-2px;color:var(--red)}
.x-seg button.on svg{color:currentColor}
.x-ic .mt svg{width:14px;height:14px;vertical-align:-2px;color:var(--red)}
/* patient stories: carousel of the first few + a "See all" card that opens every story in a pop-up */
.x-tcar{margin-top:34px}
.x-trow{align-items:stretch}
.x-tq{display:flex;flex-direction:column;min-height:100%}
.x-tq p{display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden;font-size:1.02rem;line-height:1.5;margin:0 0 12px}
.x-tmore{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font-family:var(--head);font-weight:700;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--red);margin:0 0 18px;align-self:flex-start}
.x-tmore svg{width:16px;height:16px;transition:transform .25s}.x-tmore:hover svg{transform:translateX(4px)}
.x-tq .who{margin-top:auto}
.x-quote .role{font-size:.86rem;opacity:.65;margin-top:4px}
.x-tall{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:28px;border-radius:var(--x-radius,22px);background:var(--red);color:#fff;transition:transform .3s var(--ease,ease)}
.x-tall:hover{transform:translateY(-4px)}
.x-tall b{font-family:var(--head);font-weight:800;font-size:clamp(3.4rem,6vw,5rem);line-height:.9}
.x-tall span{font-family:var(--head);font-weight:700;font-size:1.2rem}
.x-tall em{font-style:normal;display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-family:var(--head);font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
.x-tall em svg{width:16px;height:16px}
.x-tall:focus-visible,.x-tmore:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.x-stories .card{width:min(1080px,100%);background:#f8f5ef;display:flex;flex-direction:column;overflow:hidden}
.x-stories .in{padding:34px clamp(18px,4vw,44px) 40px;overflow:auto;overscroll-behavior:contain}
.x-stories .x-h2{margin:0 0 8px}
.x-stories .x-lead{margin:0 0 20px;max-width:60ch}
.x-tchips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px;position:sticky;top:-34px;padding:12px 0;margin-top:-12px;background:#f8f5ef;z-index:1}
.x-tchips button{font:inherit;font-family:var(--head);font-weight:700;font-size:.8rem;padding:9px 14px;border-radius:99px;border:1px solid rgba(0,0,0,.15);background:#fff;cursor:pointer}
.x-tchips button i{font-style:normal;opacity:.55;margin-left:4px}
.x-tchips button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.x-tlist{columns:2 320px;column-gap:18px}
.x-tlist .x-quote{break-inside:avoid;margin:0 0 18px;background:#fff;transition:box-shadow .4s}
.x-tlist .x-quote[hidden]{display:none}
.x-tlist .x-quote p{font-size:1rem;line-height:1.55}
.x-tlist .x-quote.hl{box-shadow:0 0 0 2px var(--red)}
body.x-lock{overflow:hidden}
body.dir-b .x-tall{border:var(--x-border);box-shadow:var(--x-shadow)}
.x-stories .in{position:relative}
/* habits film (Saliha Mahmood-Ahmed) under the four habit cards */
.x-hvid{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;margin-top:clamp(28px,4vw,48px)}
.x-hvid .v{position:relative;aspect-ratio:1;border-radius:var(--x-radius);overflow:hidden;background:#f7f1ea;border:var(--x-border);box-shadow:var(--x-shadow)}
.x-hvid video{display:block;width:100%;height:100%;object-fit:cover}
.x-hvid .play{position:absolute;right:22px;bottom:22px;width:72px;height:72px;border-radius:50%;border:0;background:var(--red);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.3);transition:transform .25s}
.x-hvid .play:hover{transform:scale(1.08)}
.x-hvid .play::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid var(--red);opacity:.5;animation:hvp 2s infinite}
@keyframes hvp{0%{transform:scale(.9);opacity:.6}100%{transform:scale(1.25);opacity:0}}
.x-hvid .play svg{width:28px;height:28px;margin-left:4px;fill:currentColor}
.x-hvid video:not([controls]){cursor:pointer}
.x-hvid.playing .play{display:none}
.x-hvid .x-h2{font-size:clamp(1.7rem,3.2vw,2.6rem);margin:0 0 16px}
.x-hvid p{font-size:1.06rem;line-height:1.6;margin:0;max-width:56ch}
@media(max-width:800px){.x-hvid{grid-template-columns:1fr}.x-hvid .v{max-width:480px}}
/* EASL + ALEH logos read small next to the others: trimmed files + a little extra size */
.x-logos img[src*="logo-easl"]{height:clamp(40px,4.7vw,62px);max-width:240px}
.x-logos img[src*="logo-aleh"]{height:clamp(44px,5.2vw,68px);max-width:none}
.x-f .lg{height:90px}
.x-f .lg img[src*="logo-easl"]{max-height:80px}
.x-f .lg img[src*="logo-aleh"]{max-height:88px}
/* ===== life-stage widgets (Oct 2026) ===== */
.x-risks.n5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:1200px){.x-risks.n5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1000px){.x-risks.n5{grid-template-columns:1fr 1fr}}@media(max-width:560px){.x-risks.n5{grid-template-columns:1fr}}
.sw-sec .x-head{max-width:760px}
/* warning signs */
.ws{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:0;overflow:hidden;padding:0}
@media(max-width:860px){.ws{grid-template-columns:1fr}}
.ws-l{padding:28px clamp(20px,3vw,36px)}
.ws-k,.ml-k{display:block;font-family:var(--head);font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--red);margin:0 0 10px}
.ws-h{font-family:var(--head);font-weight:700;font-size:1.15rem;margin:0 0 16px}
.ws-sws{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:26px}
@media(max-width:560px){.ws-sws{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ws-sw{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font-size:.76rem;line-height:1.2;padding:8px 4px;border-radius:14px;transition:background .2s}
.ws-sw i{width:54px;height:54px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);transition:transform .25s}
.ws-sw:hover i{transform:scale(1.08)}
.ws-sw.on{background:rgba(0,0,0,.06)}.ws-sw.on i{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--ink)}
.ws-sw:focus-visible{outline:2px solid var(--ink)}
.ws-qs{display:grid;gap:10px}
.ws-q{display:flex;align-items:center;gap:12px;cursor:pointer;font-size:.98rem}
.ws-q input{position:absolute;opacity:0;pointer-events:none}
.ws-q .bx{flex:none;width:26px;height:26px;border-radius:8px;border:2px solid rgba(0,0,0,.25);display:grid;place-items:center;color:#fff;transition:.2s}
.ws-q .bx svg{width:16px;height:16px;opacity:0}
.ws-q input:checked+.bx{background:var(--red);border-color:var(--red)}.ws-q input:checked+.bx svg{opacity:1}
.ws-q input:focus-visible+.bx{outline:2px solid var(--ink);outline-offset:2px}
.ws-r{padding:30px clamp(20px,3vw,34px);background:var(--x-soft);display:flex;flex-direction:column;gap:10px;justify-content:center;transition:background .35s,color .35s}
.ws-ic{width:56px;height:56px;border-radius:16px;background:#fff;display:grid;place-items:center;color:var(--red)}.ws-ic svg{width:30px;height:30px}
.ws-t{font-family:var(--head);font-weight:800;font-size:1.5rem;line-height:1.15}
.ws-p{margin:0;line-height:1.55}
.ws-n{opacity:.7;font-size:.8rem;margin-top:6px}
.ws.alert .ws-r{background:var(--red);color:#fff}.ws.alert .ws-ic{color:var(--red)}
.ws.okay .ws-r{background:#e3f1e4}
/* sugar in drinks */
.sd-row{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 12px;scrollbar-width:thin}
.sd-d{flex:none;font:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:132px;padding:14px 16px;border-radius:16px;border:1px solid rgba(0,0,0,.12);background:#fff;text-align:left;transition:.2s}
.sd-d svg{width:24px;height:24px;color:var(--red)}
.sd-d b{font-family:var(--head);font-size:.95rem;line-height:1.15}.sd-d small{opacity:.6;font-size:.78rem}
.sd-d.on{background:var(--ink);color:#fff;border-color:var(--ink)}.sd-d.on svg{color:#fff}
body.dir-b .sd-d{border:2px solid #111}
.sd-main{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:center;padding:28px clamp(20px,3vw,40px);margin-top:8px}
@media(max-width:700px){.sd-main{grid-template-columns:1fr}.sd-glass{margin:0 auto}}
.sd-glass{position:relative;width:180px;height:230px;border:4px solid var(--ink);border-top:0;border-radius:0 0 34px 34px;clip-path:polygon(0 0,100% 0,88% 100%,12% 100%);background:linear-gradient(#fff,#fbf7f0)}
.sd-cubes{position:absolute;left:14%;right:14%;bottom:10px;display:flex;flex-wrap:wrap-reverse;justify-content:center;gap:4px;align-content:flex-start}
.sd-cubes i{width:22px;height:22px;border-radius:4px;background:#fff;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.18),0 2px 0 rgba(0,0,0,.08);animation:sddrop .45s cubic-bezier(.3,1.4,.5,1) both}
@keyframes sddrop{from{transform:translateY(-160px);opacity:0}to{transform:none;opacity:1}}
.sd-big{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.sd-big b{font-family:var(--head);font-weight:800;font-size:clamp(3.4rem,7vw,5.4rem);line-height:.9;color:var(--red)}
.sd-big span{font-family:var(--head);font-weight:700;font-size:1.2rem}
.sd-g{margin:6px 0 16px;opacity:.75}
.sd-bar{position:relative;height:14px;border-radius:99px;background:rgba(0,0,0,.08);margin:26px 0 12px}
.sd-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--red);width:0;transition:width .6s var(--ease,ease)}
.sd-lim{position:absolute;left:var(--lim,60%);top:-24px;transform:translateX(-50%);font-family:var(--head);font-weight:700;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.sd-lim::after{content:"";position:absolute;left:50%;top:20px;width:2px;height:24px;background:var(--ink)}
.sd-m{margin:6px 0 10px;line-height:1.55;font-size:1.02rem}
.sd-tags{display:flex;gap:8px;flex-wrap:wrap}
.sd-tags span{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:99px;background:var(--x-soft);font-family:var(--head);font-weight:700;font-size:.78rem}
.sd-tags span.w{background:var(--red);color:#fff}
.sd-tags svg{width:15px;height:15px}
.sd-note{display:block;margin-top:12px;font-size:.8rem;opacity:.65;max-width:80ch}
/* fact or hype */
.fh-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.fh-s{font-family:var(--head);font-weight:700;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase}.fh-s b{color:var(--red);font-size:1.2rem}
.fh-reset{font:inherit;font-family:var(--head);font-weight:700;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;border:0;background:none;cursor:pointer;text-decoration:underline;visibility:hidden}
.fh.done .fh-reset{visibility:visible}
.fh-feed{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:1000px){.fh-feed{grid-template-columns:1fr 1fr}}@media(max-width:620px){.fh-feed{grid-template-columns:1fr}}
.fh-p{padding:18px 20px;display:flex;flex-direction:column;gap:12px}
.fh-p header{display:grid;grid-template-columns:38px 1fr;column-gap:10px;align-items:center}
.fh-p .av{grid-row:span 2;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--red),#f59e0b);color:#fff;font-family:var(--head);font-weight:800;font-size:.8rem}
.fh-p header b{font-family:var(--head);font-size:.92rem}
.fh-p header small{display:inline-flex;align-items:center;gap:4px;opacity:.55;font-size:.74rem}.fh-p header small svg{width:13px;height:13px}
.fh-t{margin:0;font-size:1.06rem;line-height:1.45;flex:1}
.fh-b{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fh-b button{font:inherit;font-family:var(--head);font-weight:700;font-size:.85rem;display:inline-flex;justify-content:center;align-items:center;gap:6px;padding:10px;border-radius:12px;border:1px solid rgba(0,0,0,.14);background:#fff;cursor:pointer;transition:.2s}
.fh-b button svg{width:16px;height:16px}
.fh-b button:hover{background:var(--x-soft)}
.fh-r{display:none;padding:12px 14px;border-radius:12px;background:var(--x-soft);font-size:.92rem;line-height:1.5}
.fh-r b{display:block;font-family:var(--head);margin-bottom:2px}
.fh-p.answered .fh-r{display:block;animation:fhin .35s ease both}
.fh-p.answered .fh-b button{pointer-events:none;opacity:.45}
.fh-p.answered .fh-b button.pick{opacity:1}
.fh-p.right .fh-b button.pick{background:#1f9d55;color:#fff;border-color:#1f9d55}
.fh-p.wrong .fh-b button.pick{background:var(--red);color:#fff;border-color:var(--red)}
@keyframes fhin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* medicines list */
.ml{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);padding:0;overflow:hidden}
@media(max-width:860px){.ml{grid-template-columns:1fr}}
.ml-l{padding:26px clamp(20px,3vw,34px)}
.ml-f{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:end}
.ml-l,.ml-r{min-width:0}
@media(max-width:520px){.ml-f{grid-template-columns:1fr}}
.ml-f label{display:flex;flex-direction:column;gap:6px;font-size:.78rem;font-family:var(--head);font-weight:700;letter-spacing:.04em}
.ml-f input,.ml-f select{font:inherit;font-size:1rem;padding:11px 12px;border-radius:12px;border:1px solid rgba(0,0,0,.18);background:#fff;min-width:0}
.ml-f .btn{display:inline-flex;align-items:center;gap:6px;justify-content:center;white-space:nowrap}
.ml-f .btn svg{width:18px;height:18px}
.ml-ul{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:8px}
.ml-ul li{display:grid;grid-template-columns:36px 1fr auto;gap:12px;align-items:center;padding:10px 12px;border-radius:14px;background:var(--x-soft)}
.ml-ul li .t{width:36px;height:36px;border-radius:10px;background:#fff;display:grid;place-items:center;color:var(--red)}.ml-ul li .t svg{width:20px;height:20px}
.ml-ul li b{display:block;font-family:var(--head)}.ml-ul li small{opacity:.65}
.ml-ul li button{border:0;background:none;cursor:pointer;opacity:.5;padding:6px}.ml-ul li button:hover{opacity:1}.ml-ul li button svg{width:18px;height:18px}
.ml-ul .ml-empty{display:block;background:none;border:2px dashed rgba(0,0,0,.15);opacity:.7;font-size:.92rem}
.ml-r{padding:26px clamp(20px,3vw,34px);background:var(--x-soft);display:flex;flex-direction:column;gap:12px}
.ml-q{margin:0;padding-left:20px;display:grid;gap:8px;line-height:1.5}
.ml-q li.new{animation:fhin .35s ease both}
.ml-print{align-self:flex-start;display:inline-flex;align-items:center;gap:8px}.ml-print svg{width:18px;height:18px}
.ml-r small{opacity:.7;font-size:.8rem}
/* active week */
.aw{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:center;padding:28px clamp(20px,3vw,36px)}
@media(max-width:900px){.aw{grid-template-columns:1fr}}
.aw-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.aw-d{display:flex;flex-direction:column;align-items:center;gap:8px}
.aw-d>b{font-family:var(--head);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;opacity:.7}
.aw-m{position:relative;width:100%;height:150px;border-radius:14px;border:1px solid rgba(0,0,0,.12);background:#fff;cursor:pointer;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:8px 0;font:inherit}
.aw-fill{position:absolute;left:0;right:0;bottom:0;height:0;background:var(--sc,var(--red));opacity:.9;transition:height .35s var(--ease,ease)}
.aw-m em,.aw-m small{position:relative;font-style:normal}
.aw-m em{font-family:var(--head);font-weight:800;font-size:1.2rem}.aw-m small{font-size:.7rem;opacity:.7}
.aw-m.has em,.aw-m.has small{color:#fff}
.aw-s{width:44px;height:44px;border-radius:50%;border:1px solid rgba(0,0,0,.15);background:#fff;cursor:pointer;display:grid;place-items:center;transition:.2s}
.aw-s svg{width:20px;height:20px}
.aw-s[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.aw-sum{display:flex;gap:24px;align-items:center}
@media(max-width:520px){.aw-sum{flex-direction:column;align-items:flex-start}}
.aw-ring{position:relative;width:150px;height:150px;flex:none}
.aw-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.aw-ring circle{fill:none;stroke:rgba(0,0,0,.08);stroke-width:12}
.aw-ring circle.p{stroke:var(--red);stroke-linecap:round;stroke-dasharray:327;stroke-dashoffset:327;transition:stroke-dashoffset .5s var(--ease,ease)}
.aw-ring>div{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.aw-ring b{font-family:var(--head);font-weight:800;font-size:2.4rem;line-height:1}.aw-ring small{font-size:.78rem;opacity:.7}
.aw-txt p{margin:0 0 8px;font-family:var(--head);font-weight:700;font-size:1.05rem;line-height:1.3}
.aw-txt p.ok{color:#1f8a4c}
.aw-txt small{display:block;opacity:.65;font-size:.8rem;line-height:1.45;margin-top:6px}
.aw-reset{margin-top:10px;font:inherit;font-family:var(--head);font-weight:700;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;border:0;background:none;cursor:pointer;text-decoration:underline;padding:0}
@media print{body.ml-printing *{visibility:hidden}body.ml-printing .ml-ul,body.ml-printing .ml-ul *,body.ml-printing .ml-q,body.ml-printing .ml-q *{visibility:visible}}
/* myth cards: both faces share one grid cell so the card grows to fit the longer fact text */
.x-myth{display:grid}
.x-myth .f{position:relative;inset:auto;grid-area:1/1;min-height:230px}
.x-myth .f.back b{font-family:var(--body,inherit);font-weight:500;font-size:1.02rem;line-height:1.5}
.x-myth.x-rv.flip,.x-myth.flip{transform:rotateY(180deg)}

html.fl body{visibility:hidden}
/* partner logos on phones: 3 + 2, centred, instead of 4 + 1 */
@media(max-width:640px){
.x-logos{gap:26px 14px}
.x-logos>*{flex:0 0 calc(33.333% - 10px);display:flex;justify-content:center;align-items:center;min-width:0}
.x-logos img,.x-logos img[src*="logo-easl"],.x-logos img[src*="logo-aleh"]{height:auto;max-height:46px;max-width:100%;width:auto}
.x-logos img[src*="logo-aleh"]{max-height:52px}
}
/* map hover label */
.x-map{position:relative}
.x-tip{position:absolute;z-index:6;transform:translate(-50%,-100%);background:#111;color:#fff;border-radius:10px;padding:7px 11px;font-size:.8rem;line-height:1.3;pointer-events:none;white-space:nowrap;max-width:280px;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.x-tip b{display:block;font-family:var(--head);font-weight:700;font-size:.86rem;overflow:hidden;text-overflow:ellipsis}
.x-tip span{opacity:.75}
.x-tip:after{content:"";position:absolute;left:50%;bottom:-5px;margin-left:-5px;border:5px solid transparent;border-bottom:0;border-top-color:#111}
.x-cl:hover{filter:brightness(1.08)}
/* footer credit */
.wld-footer .wld-credit{display:inline-flex;align-items:baseline;gap:.35em;color:inherit;white-space:nowrap}
.wld-footer .wld-credit .kd-logo{height:1.05em;width:auto;transform:translateY(.12em)}
.wld-footer .wld-credit:hover{color:#fff}.wld-footer .wld-credit:hover .kd-logo .d{fill:#fff}
/* ===== WordPress / Elementor integration (WLD Widgets site layer) ===== */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}
.screen-reader-text:focus{clip:auto!important;clip-path:none;height:auto;width:auto;z-index:100000;background:#fff;padding:12px 18px;left:8px;top:8px}
body.wld-site .site-content>.ast-container,body.wld-site #content>.ast-container{max-width:none;padding:0;margin:0;display:block}
body.wld-site #primary,body.wld-site .site-main{margin:0;padding:0;width:auto;float:none}
body.wld-site .elementor-location-header,body.wld-site .elementor-location-footer{position:relative;z-index:50}
body.wld-site .elementor-location-header .e-con,body.wld-site .elementor-location-footer .e-con,
.e-con.wld-c{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--gap:0px;--row-gap:0px;--column-gap:0px;--content-width:100%;--width:100%;padding:0}
.e-con.wld-c>.elementor-widget,.elementor-location-header .elementor-widget,.elementor-location-footer .elementor-widget{width:100%;margin:0}
.e-con.wld-c>.e-con-inner{max-width:none;padding:0;gap:0}
.stage-campaign{--sc:#ED2737}.stage-childhood{--sc:#2fa84f}.stage-adolescence{--sc:#ec3d9b}.stage-family{--sc:#2b6fe0}.stage-adulthood{--sc:#111111}.stage-elderly{--sc:#f7b500}
/* sections built with the hand-made widgets keep the campaign spacing */
.wld-site .wld{font-family:inherit}
/* editor: show everything that normally animates in on scroll */
.elementor-editor-active .x-rv,.elementor-editor-active .rv,.elementor-editor-active .x-noise .n{opacity:1!important;transform:none!important}
.elementor-editor-active html.fl body,html.fl body.elementor-editor-active{visibility:visible}
.elementor-editor-active .x-modal,.elementor-editor-active .modal{position:relative;opacity:1;visibility:visible;inset:auto;min-height:200px;outline:2px dashed #ED2737;outline-offset:-2px}
.elementor-editor-active .x-modal:before,.elementor-editor-active .modal:before{content:"Pop-up (opens on the page when needed)";position:absolute;top:8px;left:12px;font:700 12px/1 var(--body);color:#ED2737;z-index:3}
/* pages without Elementor content (posts, archive list) */
body.wld-site:not(.elementor-page) .site-main{max-width:1100px;margin:150px auto 80px;padding:0 24px}
body.wld-site:not(.elementor-page) .entry-title{font-size:clamp(2rem,5vw,3.4rem);margin-bottom:.6em}
body.wld-site:not(.elementor-page) .entry-content a{color:var(--red);text-decoration:underline}
body.wld-site:not(.elementor-page) .entry-content img{height:auto}
/* Gravity Forms in the campaign look */
.wld-gf .gform_wrapper{margin:0}
.wld-gf .gform_heading{display:none}
.wld-gf .gform_fields{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px 18px;list-style:none;margin:0;padding:0;border:0}
.wld-gf .gfield{grid-column:span 12;margin:0;padding:0;border:0;min-width:0}
.wld-gf .gfield--width-half{grid-column:span 6}.wld-gf .gfield--width-third{grid-column:span 4}.wld-gf .gfield--width-quarter{grid-column:span 3}
.wld-gf fieldset{border:0;padding:0;margin:0;min-width:0}.wld-gf legend{padding:0}
@media(max-width:700px){.wld-gf .gfield--width-half,.wld-gf .gfield--width-third,.wld-gf .gfield--width-quarter{grid-column:span 12}}
.wld-gf .gfield_label,.wld-gf .gform-field-label{display:block;font-family:var(--head);font-weight:700;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;margin:0 0 6px}
.wld-gf .gform-field-label--type-sub{font-family:var(--body);text-transform:none;letter-spacing:0;font-weight:400;font-size:.8rem;opacity:.7;margin-top:4px}
.wld-gf .gfield_required{color:var(--red);margin-left:3px}
.wld-gf input[type=text],.wld-gf input[type=email],.wld-gf input[type=url],.wld-gf input[type=tel],.wld-gf input[type=number],.wld-gf input[type=date],.wld-gf input[type=time],.wld-gf select,.wld-gf textarea{width:100%;font:inherit;font-size:1rem;padding:13px 16px;border:1px solid rgba(0,0,0,.16);border-radius:12px;background:#fff;color:var(--ink);box-shadow:none;min-height:0;line-height:1.4}
.wld-gf textarea{min-height:140px}
.wld-gf input:focus,.wld-gf select:focus,.wld-gf textarea:focus{outline:2px solid var(--red);outline-offset:1px;border-color:transparent}
.wld-gf .ginput_complex{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.wld-gf .ginput_complex span{display:block}
.wld-gf .gfield_description{font-size:.85rem;opacity:.7;margin-top:6px}
.wld-gf .gfield_validation_message,.wld-gf .validation_message{color:var(--red);font-size:.85rem;margin-top:6px}
.wld-gf .gform_validation_errors{border:1px solid var(--red);border-radius:12px;padding:12px 16px;margin-bottom:16px;color:var(--red)}
.wld-gf .gform_footer{margin-top:22px;padding:0}
.wld-gf .gform_button,.wld-gf .gform_footer input[type=submit],.wld-gf .gform_footer button{font-family:var(--head);font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:.95rem;background:var(--red);color:#fff;border:0;border-radius:999px;padding:15px 30px;cursor:pointer;width:auto;line-height:1}
.wld-gf .gform_button:hover{filter:brightness(.92)}
.wld-gf .gform_confirmation_message{font-family:var(--head);font-weight:800;font-size:1.4rem;text-transform:uppercase;padding:30px 0}
.wld-gf .gform_validation_container,.wld-gf .gform_hidden{display:none!important}
.wld-gf .ginput_container_fileupload input{font-size:.9rem}
.wld-gf .gfield_checkbox,.wld-gf .gfield_radio{display:grid;gap:8px}
.wld-gf .gchoice{display:flex;gap:10px;align-items:flex-start}
.wld-gf .gfield--type-consent .gfield_label{display:none}
.wld-gf .ginput_container_consent{display:flex;gap:10px;align-items:flex-start}
.wld-gf .ginput_container_consent input{margin-top:5px;width:18px;height:18px;accent-color:var(--red);flex:none}
.wld-gf .gfield_consent_label,.wld-gf .gchoice label{font-family:var(--body);text-transform:none;letter-spacing:0;font-weight:400;font-size:.95rem;display:inline;margin:0}
.wld-form-missing{padding:24px;border:2px dashed rgba(0,0,0,.2);border-radius:14px;text-align:center}

/* landing page */
.wld-landing-hd .wrap{justify-content:flex-start}
.hero .hv{display:flex;align-items:center;justify-content:center}
.soon{background:#fff;border-radius:28px;padding:clamp(28px,4vw,48px);box-shadow:0 30px 60px rgba(0,0,0,.08);max-width:440px;width:100%}
.soon .soon-t{display:block;font-family:var(--head);font-weight:800;text-transform:uppercase;font-size:clamp(3rem,7vw,5.6rem);line-height:.86;letter-spacing:-.03em;color:var(--red);margin:14px 0 18px}
.soon p{margin:0;opacity:.8}
.soon .soon-d{display:inline-block;font-family:var(--head);font-weight:800;text-transform:uppercase;letter-spacing:.04em;background:var(--ink);color:#fff;border-radius:999px;padding:12px 22px;font-size:.9rem}
.x-sec .x-2 .x-points{margin-top:0}
.x-logos img{cursor:default} /* partner logos on phones: 3 + 2, centred, instead of 4 + 1 */ @media(max-width:640px){ .x-logos{gap:26px 14px} .x-logos>*{flex:0 0 calc(33.333% - 10px);display:flex;justify-content:center;align-items:center;min-width:0} .x-logos img,.x-logos img[src*="logo-easl"],.x-logos img[src*="logo-aleh"]{height:auto;max-height:46px;max-width:100%;width:auto} .x-logos img[src*="logo-aleh"]{max-height:52px} } 
.wld-landing-hd .wrap{justify-content:center}
.wld-landing-hd .logo img{height:clamp(64px,8vw,96px)!important;width:auto}
.wld-landing .hero{padding-top:170px}
.wld-landing-hd .logo img{transition:height .35s}
.wld-landing-hd.sc .logo img{height:58px!important}
@media(max-width:700px){.wld-landing .hero{padding-top:140px}}
.wld-landing .x-phero{padding-top:clamp(170px,20vw,220px)}
.wld-footer .g{grid-template-columns:1.6fr 1fr;align-items:end}
.wldl-fcontact{justify-self:end;text-align:right}
.wldl-fcontact h4{margin-bottom:12px}
.wldl-clink{font-family:var(--head);font-weight:800;text-transform:uppercase;font-size:clamp(1.4rem,2.6vw,2rem);letter-spacing:-.01em;color:#fff;text-decoration:none}
.wldl-clink:hover{color:var(--red)}
@media(max-width:800px){.wld-footer .g{grid-template-columns:1fr}.wldl-fcontact{justify-self:start;text-align:left}}
.wldl-err{background:#fde8e8;color:#b42318;border-radius:12px;padding:12px 16px;margin-bottom:16px;font-weight:600}
.x-form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.wld-footer .wld-credit{display:inline-flex;align-items:baseline;gap:.35em;color:inherit;white-space:nowrap}
.wld-footer .wld-credit .kd-logo{height:1.05em;width:auto;transform:translateY(.12em)}
.wld-footer .wld-credit:hover{color:#fff}.wld-footer .wld-credit:hover .kd-logo .d{fill:#fff}