:root{--brand:#b84efb;--bar:64px}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:var(--bar)}
body{font:16px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif;color:#222222;background:#f4f6fe}
a{color:inherit;text-decoration:none;cursor:pointer}
img{max-width:100%;display:block}

/* header */
.bar{position:fixed;inset:0 0 auto;height:var(--bar);z-index:10;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(16px,3vw,42px);background:var(--brand);color:#ffffff}
.brand img{height:42px;width:auto}
.menu{display:flex;gap:clamp(20px,3vw,44px);font-size:18px}
.menu a{padding:6px 2px;border-bottom:2px solid transparent;transition:.2s}
.menu a:hover,.menu a.on{border-color:#ffffff}
.burger{display:none;width:40px;height:40px;background:none;border:0;cursor:pointer}
.burger span,.burger span::before,.burger span::after{display:block;width:24px;height:2px;background:#ffffff;margin:auto;position:relative;transition:.2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0}
.burger span::before{top:-7px}.burger span::after{top:7px}

/* hero */
.hero{position:relative;overflow:hidden;min-height:100vh;padding:var(--bar) 5% 0;display:flex;align-items:center;justify-content:center;text-align:center;color:#ffffff;background:#05030c}
/* outlined brand watermark behind the photos */
.hero::before{content:"yohalive";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(110px,24vw,380px);font-weight:800;letter-spacing:.04em;color:transparent;-webkit-text-stroke:2px rgba(184,78,251,.28)}
/* scrolling photo wall + dark shade */
.collage{position:absolute;inset:0;display:flex;justify-content:center;gap:24px;padding:0 12px}
.collage::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.58)}
.col{width:clamp(150px,24vw,340px);flex:none;overflow:hidden}
.track{--wall-gap:18px;display:flex;flex-direction:column;gap:var(--wall-gap);padding-bottom:var(--wall-gap);will-change:transform;animation:roll 23s linear infinite}
.col:nth-child(even) .track{animation-direction:reverse;animation-duration:27s;animation-delay:-7s}
.col:nth-child(3) .track{animation-duration:25s;animation-delay:-10s}
.col:nth-child(odd){margin-top:-80px}
.track img{width:100%;height:max(36svh,clamp(210px,25vw,415px));object-fit:cover;border-radius:18px;flex:none}
@keyframes roll{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-50%,0)}}
.hero-inner,.swipe{position:relative;z-index:2}
.hero-logo{width:min(320px,70vw);margin:0 auto 24px;border-radius:24px;box-shadow:0 12px 40px rgba(184,78,251,.45)}
.slogan{font-size:clamp(18px,2.4vw,26px);margin-bottom:44px}
.actions{display:flex;justify-content:center;gap:24px;flex-wrap:wrap}
.btn{width:240px;height:62px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:#ffffff;color:#111111;font-size:18px;font-weight:600;transition:.2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.tip{display:inline-block;margin-top:28px;text-decoration:underline;opacity:.9}
.swipe{position:absolute;z-index:2;bottom:28px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;font-size:14px;opacity:.85}
.swipe i{width:12px;height:12px;border:solid #ffffff;border-width:2px 0 0 2px;transform:rotate(45deg);margin-bottom:6px;animation:up 1.4s infinite}
@keyframes up{50%{transform:translateY(-6px) rotate(45deg)}}

/* about */
.about{max-width:1200px;margin:auto;padding:120px 5%;min-height:80vh;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.about h3{font-size:24px;font-weight:400;color:#666666}
.about :is(h1,h2){font-size:clamp(32px,4.2vw,60px);line-height:1.2;margin:12px 0 20px;color:#222222}
.about p{font-size:clamp(18px,1.8vw,24px);color:#666666}
.about-img img{margin:auto;border-radius:24px;box-shadow:0 20px 60px rgba(184,78,251,.2)}

/* footer */
.foot{min-height:106px;padding:16px 5%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:#251530;color:#ffffff;font-size:12px;text-align:center}
.foot img{height:23px;width:auto}
.foot a{margin:0 8px}
.foot a:hover{text-decoration:underline}

/* scroll reveal */
.rv{opacity:0;transform:translateY(24px);transition:.7s}
.rv.in{opacity:1;transform:none}

/* mobile */
@media(max-width:768px){
  .collage{gap:12px}.col:nth-child(3){display:none}.track{--wall-gap:12px}
  .burger{display:block}
  .menu{position:absolute;top:var(--bar);left:0;right:0;flex-direction:column;gap:0;background:var(--brand);padding:8px 5% 16px;transform:translateY(-120%);transition:.3s;z-index:-1}
  .menu.open{transform:none}
  .menu a{padding:12px 0;border:0}
  .burger[aria-expanded=true] span{background:transparent}
  .burger[aria-expanded=true] span::before{top:0;transform:rotate(45deg)}
  .burger[aria-expanded=true] span::after{top:0;transform:rotate(-45deg)}
  .about{grid-template-columns:1fr;text-align:center;padding:72px 6%}
  .btn{width:100%;max-width:280px}
}
@media(prefers-reduced-motion:reduce){.swipe i{animation:none}html{scroll-behavior:auto}}

.yohalive-guide{max-width:820px;margin:auto;padding:calc(var(--bar) + 38px) 22px 64px;color:#24222f}.yohalive-guide h1{font-size:clamp(28px,4vw,42px);line-height:1.16}.yohalive-guide h2,.mg-sec h2{line-height:1.3;margin:1.25em 0 .4em}.yohalive-guide p,.mg-sec p{margin:.7em 0}.yohalive-guide a:not(.download),.mg-rel a{color:#75369b;text-decoration:underline}.yohalive-guide summary,.mg-faq summary{cursor:pointer;font-weight:600;padding:.5em 0}.mg-cta a{display:inline-block;margin:12px 12px 8px 0;padding:.5em 1em;border:1px solid currentColor;border-radius:12px}.yohalive-extra{padding:35px max(6vw,20px);max-width:960px;margin:auto}.mg-rel ul{padding-left:1.4em}.mg-sec li{margin:.4em 0}

/* This cover is specific to Yoha. The guide pages retain template 01. */
:root{--bar:68px}
.bar{background:#1a0d20;color:#ffffff;border-bottom:1px solid #47334e}
.brand,.identity{display:inline-flex;align-items:center}
.identity{gap:.58em;font-size:23px;font-weight:750;line-height:1;letter-spacing:-.045em}
.identity .identity-mark,.brand .identity-mark{width:40px;height:40px;object-fit:contain}
.foot .identity{font-size:17px}.foot .identity-mark{width:30px;height:30px}
.bar .menu{font-size:15px;font-weight:550}.menu a:hover,.menu a.on{border-color:#e194ff}
.hero{isolation:isolate;min-height:100svh;justify-content:flex-start;padding:calc(var(--bar) + 50px) clamp(24px,8vw,144px) 78px;background:#1a0c20;text-align:left}
.hero::before{content:none}
.collage{inset:-1px -3% -1px 23%;gap:16px;padding:0;justify-content:flex-end;pointer-events:none}
.collage::after{background:linear-gradient(90deg,#1a0c20 0%,rgba(26,12,32,.7) 16%,rgba(26,12,32,.08) 58%),linear-gradient(0deg,rgba(18,7,23,.43),transparent 35%);z-index:1}
.col{width:31.8%;max-width:440px}.col:nth-child(odd){margin-top:0}
.hero-inner{width:min(500px,51vw)}
.hero-brand{display:grid;justify-items:start}
.hero .hero-logo{display:block;width:104px;height:104px;object-fit:contain;margin:0 0 22px;border:0;border-radius:0;box-shadow:none;filter:none}
.hero-kicker{font-size:12px;line-height:1.4;letter-spacing:.16em;font-weight:700;text-transform:uppercase;color:#eabefa}
.hero-title{font-size:clamp(57px,6.6vw,102px);line-height:.99;letter-spacing:-.065em;font-weight:750;margin:4px 0 15px;color:white}
.slogan{max-width:31ch;font-size:clamp(16px,1.5vw,21px);line-height:1.48;color:#efe4f2;margin-bottom:28px}
.actions{justify-content:flex-start;gap:10px}
.actions .btn{width:auto;min-height:48px;height:auto;padding:12px 23px;font-size:15px;border-radius:999px;font-weight:650;background:#f9f3fc;color:#241829}
.actions .btn+.btn{background:#28192e;border:1px solid #826c91;color:white}
.tip{font-size:14px;margin-top:16px;text-underline-offset:3px}
.wall-toggle{position:absolute;right:clamp(16px,3vw,48px);bottom:22px;z-index:3;display:inline-flex;align-items:center;gap:9px;min-height:40px;padding:8px 14px;border:1px solid #8c7895;border-radius:999px;background:#241529;color:#ffffff;font:600 13px/1.2 system-ui;cursor:pointer}
.wall-toggle[hidden]{display:none}.wall-toggle:focus-visible,.hero a:focus-visible{outline:3px solid #f1c5ff;outline-offset:4px}
.wall-glyph{width:10px;height:12px;border-inline:3px solid currentColor}
[data-wall-state="paused"] .wall-glyph{width:0;height:0;border:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:9px solid currentColor}
.hero[data-wall-state="paused"] .track{animation-play-state:paused}
.hero[data-wall-state="playing"] .track{animation-play-state:running}
.swipe{left:clamp(24px,8vw,144px);bottom:25px;transform:none;align-items:flex-start;font-size:12px}.swipe i{margin-left:3px}
@media(prefers-reduced-motion:reduce){.hero:not([data-wall-state="playing"]) .track{animation-play-state:paused}.rv{opacity:1;transform:none;transition:none}}
@media(max-width:768px){.bar .menu{background:#241529}.hero{padding-inline:6%}.hero-inner{width:min(460px,85vw)}.collage{inset:0 -12% 0 13%}.col{width:51%}.collage::after{background:linear-gradient(90deg,#1a0c20,rgba(26,12,32,.82) 22%,rgba(26,12,32,.24) 78%),linear-gradient(0deg,rgba(26,12,32,.68),transparent 70%)}.swipe{left:6%}}
@media(max-width:600px){:root{--bar:60px}.identity{font-size:21px}.brand .identity-mark{width:36px;height:36px}.hero .hero-logo{width:78px;height:78px;margin-bottom:16px}.hero-title{font-size:clamp(49px,12.5vw,67px)}.hero-inner{width:min(100%,380px)}.slogan{max-width:25ch}.actions .btn{padding-inline:16px}.wall-toggle{bottom:16px}.hero{padding-block:calc(var(--bar) + 40px) 76px}}
@media(max-width:768px){.collage{left:0;overflow:hidden}}
/* Keep the motion control within the first screen in shallow preview panes. */
@media(max-height:630px){.wall-toggle{top:calc(var(--bar) + 12px);bottom:auto}}