:root{
  --bg:#FBF8F2;--ink:#14161F;--ink2:#4B4F5C;--mut:#8A8D98;--orange:#FF6B00;--soft:#FFF0E6;--line:#E9E4DA;--card:#fff;
  --disp:'Anton','Black Han Sans','Noto Sans KR',sans-serif;--ko:'Black Han Sans','Noto Sans KR',sans-serif;--body:'Noto Sans KR',-apple-system,'Apple SD Gothic Neo',sans-serif;--hand:'Caveat','Nanum Pen Script',cursive;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--bg);color:var(--ink);line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
small{font-size:.75em;color:var(--mut);font-weight:400}

/* nav: floating frosted pill */
.nav{position:fixed;z-index:60;top:14px;left:50%;transform:translateX(-50%);width:min(1100px,calc(100% - 28px));display:flex;justify-content:space-between;align-items:center;padding:9px 12px 9px 18px;border-radius:999px;background:rgba(255,255,255,.72);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border:1px solid rgba(255,255,255,.7);box-shadow:0 6px 24px rgba(20,22,31,.08);transition:background .3s}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:16px}
.brand small{margin-left:6px;font-weight:500}
.nav nav{display:flex;align-items:center;gap:22px;font-size:14px;font-weight:500}
.btn-dark{background:var(--ink);color:#fff;padding:9px 18px;border-radius:999px;font-size:13px;transition:transform .2s,background .2s}
.btn-dark:hover{background:var(--orange);transform:translateY(-1px)}

/* hero */
.hero{position:relative;display:flex;flex-direction:column;align-items:center;min-height:100vh;min-height:100svh;padding:100px 20px 14px;text-align:center;overflow:hidden;background:var(--bg)}
.mist{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(180deg,rgba(251,248,242,0) 40%,var(--bg) 100%),
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 520' preserveAspectRatio='none'><path d='M0 400L120 300 230 360 380 190 520 330 640 250 800 360 960 200 1100 320 1260 230 1440 330V520H0Z' fill='%23e9e4da' opacity='.38'/><path d='M0 460L180 380 330 430 520 300 700 420 900 330 1100 430 1300 350 1440 420V520H0Z' fill='%23dcd5c8' opacity='.25'/></svg>") center top/cover no-repeat}
.kicker{position:relative;display:inline-flex;align-items:center;gap:14px;font-size:11.5px;letter-spacing:.22em;font-weight:500;color:var(--ink2);margin-bottom:18px}
.kicker span{width:38px;height:1px;background:var(--ink2)}
.hero h1{position:relative;font-family:var(--disp);font-weight:400;font-size:clamp(42px,6.6vw,96px);line-height:.98;letter-spacing:.005em;color:var(--ink);text-transform:uppercase}
.ko{position:relative;font-size:clamp(14px,1.6vw,17px);color:var(--ink2);margin:12px 0 20px}
.cta{position:relative;display:inline-flex;align-items:center;gap:16px;background:var(--ink);color:#fff;border-radius:999px;padding:8px 8px 8px 26px;font-size:12.5px;letter-spacing:.12em;font-weight:500;transition:background .25s}
.cta i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;color:var(--ink);font-style:normal;font-size:18px;transition:transform .25s}
.cta:hover{background:var(--orange)}.cta:hover i{transform:translateX(4px)}
.badge-char{position:absolute;right:max(4vw,calc(50% - 560px));top:112px;width:clamp(90px,12vw,170px);z-index:2;animation:float 5s ease-in-out infinite;filter:drop-shadow(0 14px 18px rgba(20,22,31,.16))}
.badge-char img{width:100%;transform:rotate(10deg);transform-origin:50% 100%}
.badge-char .cloud{position:absolute;left:-6%;bottom:-50%;width:112%;filter:drop-shadow(0 6px 8px rgba(20,22,31,.1));animation:drift 6s ease-in-out infinite}
.cloud.mini{position:absolute;z-index:1;width:clamp(60px,9vw,120px);opacity:.9;filter:drop-shadow(0 4px 6px rgba(20,22,31,.08))}
.c-a{left:max(5vw,calc(50% - 540px));top:150px;animation:drift 8s ease-in-out infinite reverse}

.stage{position:relative;align-self:stretch;flex:1;min-height:300px;margin:6px -4vw 0;perspective:900px;perspective-origin:50% 42%;overflow:hidden}
.ph{position:absolute;left:50%;bottom:48px;margin:0;border-radius:clamp(10px,1.3vw,20px);overflow:hidden;background:#ddd;box-shadow:0 18px 44px rgba(20,22,31,.22);will-change:transform;backface-visibility:hidden}
.ph img{width:100%;height:100%;object-fit:cover}
.hero-char{position:absolute;left:50%;bottom:-16px;width:clamp(190px,27vw,380px);transform:translateX(-50%);z-index:400}
.hero-char img{width:100%;filter:drop-shadow(0 12px 14px rgba(20,22,31,.2));animation:bob 3.4s ease-in-out infinite;transform-origin:50% 100%}
.cats{position:relative;display:flex;justify-content:center;gap:clamp(18px,5vw,70px);margin-top:10px;font-size:12px;letter-spacing:.16em;font-weight:500;color:var(--ink2)}
.cats li+li::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--ink2);margin-right:clamp(18px,5vw,70px);vertical-align:middle}
.down{display:inline-block;margin-top:18px;color:var(--ink2);animation:bounce 1.6s infinite}

/* band */
.band{position:relative;height:min(96vh,820px);display:grid;place-items:start center;text-align:center;color:#fff;overflow:hidden;z-index:1}
.band-bg{position:absolute;inset:-12% 0;background:linear-gradient(rgba(0,0,0,.28),rgba(0,0,0,.42)),url("https://images.unsplash.com/photo-1555400038-63f5ba517a47?w=2000&q=80&auto=format&fit=crop") center/cover;will-change:transform}
.band-in{position:relative;padding:clamp(90px,16vh,150px) 20px 0}
.stars{display:flex;gap:18px;justify-content:center;font-size:12px;letter-spacing:.22em;opacity:.9;margin-bottom:14px}
.band h2{font-family:var(--ko);font-weight:400;font-size:clamp(34px,6vw,70px);line-height:1.12;margin-bottom:10px}
.band p:last-child{opacity:.88}
.curve{position:absolute;left:0;bottom:-1px;width:100%;height:clamp(50px,8vw,120px)}

/* story */
.story{position:relative;z-index:2;margin-top:-34vh;padding:0 clamp(16px,5vw,60px) 60px;--sbg:#FBF8F2;--txt:#14161F;--sub:#8A8D98;--dbg:#FFF0E6}
.story-grid{position:relative;max-width:1120px;margin:0 auto;display:grid;grid-template-columns:minmax(300px,400px) 1fr;gap:clamp(24px,6vw,90px);align-items:start;color:var(--txt);transition:color .6s}
.steps .step{min-height:100vh;color:var(--txt);display:flex;flex-direction:column;justify-content:center;opacity:.28;transform:translateY(14px);transition:.5s}
.steps .step:first-child{min-height:78vh}
.step.on{opacity:1;transform:none}
.label{font-family:var(--hand);font-size:28px;color:var(--orange);line-height:1;margin-bottom:10px;letter-spacing:.01em}
.label span{font-size:.62em;margin-left:8px;color:var(--mut);font-family:var(--body);font-weight:500;letter-spacing:.04em}
.label.c{text-align:center}.label.light{color:#FFB27A}
.step h3{color:var(--txt)}
.step small{color:var(--sub)}
.step h3,.crew h3,.soon-list h3,.final h3{font-family:var(--ko);font-weight:400;font-size:clamp(32px,4.6vw,56px);line-height:1.15;margin-bottom:22px}
.ico{display:grid;gap:14px}
.ico li{display:flex;align-items:flex-start;gap:14px;font-size:16px;font-weight:500;line-height:1.4}
.ico small{display:block;margin-top:2px;font-weight:400}
.d{flex:none;width:28px;height:28px;border-radius:9px;background:var(--dbg);transition:background .6s;position:relative;margin-top:1px}
.d::after{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--orange)}
.d2::after{border-radius:3px}

.phone-col{position:sticky;top:calc(50vh - 340px);align-self:start;height:680px;display:flex;flex-direction:column;align-items:center;z-index:3}
.phone{position:relative;width:min(100%,330px);aspect-ratio:9/19;background:#0c0d12;border-radius:48px;padding:11px;box-shadow:0 40px 70px rgba(20,22,31,.28),0 0 0 2px #2a2c36 inset;transform:perspective(1700px) rotateY(var(--ry,-10deg)) rotateX(var(--rx,3deg)) rotateZ(var(--rz,0deg));transition:transform .25s linear;will-change:transform}
.island{position:absolute;top:20px;left:50%;transform:translateX(-50%);width:98px;height:28px;border-radius:20px;background:#000;z-index:6}
.status{position:absolute;top:19px;left:34px;right:34px;display:flex;justify-content:space-between;font-size:12px;font-weight:700;z-index:5;color:var(--ink)}
.screens{position:relative;width:100%;height:100%;border-radius:38px;overflow:hidden;background:#F8F8F8}
.scr{position:absolute;inset:0;padding:60px 16px 16px;opacity:0;transform:translateY(40px) scale(.98);transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;gap:10px;pointer-events:none}
.scr.on{opacity:1;transform:none}
.scr h4{font-family:var(--ko);font-weight:400;font-size:21px;line-height:1.2;color:var(--ink)}
.scr h4 small{display:block;font-family:var(--body);font-size:12px;margin-top:2px}
.pcard{position:relative;border-radius:16px;overflow:hidden;height:21%;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:10px 14px;font-weight:700;font-size:15px}
.pcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.pcard::before{content:"";position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(0,0,0,.55));z-index:1}
.pcard b,.pcard small{position:relative;z-index:2}.pcard small{color:rgba(255,255,255,.85)}
.who li{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #F0F0F0;border-radius:16px;padding:10px 12px;margin-bottom:8px}
.who li.sel{border-color:var(--orange);background:var(--soft)}
.who img{width:42px;height:42px;border-radius:50%;object-fit:cover;object-position:top;background:#FFE3C6;border:2px solid #fff}
.who span{flex:1;font-size:14px}.who b{display:block}
.who em{font-style:normal;color:var(--orange);font-weight:800}
.who .inv i{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:2px dashed #ccc;color:#aaa;font-style:normal;font-size:20px}
.cal{background:#fff;border:1px solid #F0F0F0;border-radius:18px;padding:12px}
.cal b{font-size:14px}.cal .g{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-top:8px;text-align:center}
.cal i{font-style:normal;font-size:12px;padding:7px 0;border-radius:9px}
.cal i.r{background:var(--soft);color:var(--orange);border-radius:0}
.cal i.s,.cal i.e{background:var(--orange);color:#fff;font-weight:700}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chips u{text-decoration:none;font-size:13px;padding:9px 14px;border-radius:999px;background:#fff;border:1px solid #E8E8E8}
.chips u.on{background:var(--soft);border-color:var(--orange);color:var(--orange);font-weight:700}
.plan li{display:flex;gap:11px;align-items:center;background:#fff;border:1px solid #F0F0F0;border-radius:16px;padding:8px;margin-bottom:9px}
.plan img{width:56px;height:56px;border-radius:12px;object-fit:cover}
.plan span{font-size:14px;line-height:1.3}.plan b,.plan small,.plan time{display:block}
.plan time{font-size:11px;color:var(--orange);font-weight:700}
.docs li{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid #F0F0F0;border-radius:16px;padding:12px}
.docs{display:grid;gap:9px}
.docs i{flex:none;width:38px;height:38px;border-radius:10px;background:var(--soft);color:var(--orange);display:grid;place-items:center;font-style:normal;font-size:10px;font-weight:800;letter-spacing:.04em}
.docs span{font-size:14px}.docs b,.docs small{display:block}
.tabl{width:90px;margin:8px auto 0;opacity:.95}
.mapbox{position:relative;flex:1;background:#fff;border:1px solid #F0F0F0;border-radius:18px;display:grid;place-items:center;padding:10px;min-height:0}
.mapbox img{width:100%}
.pin{position:absolute;right:30%;top:32%;width:18px;height:18px;border-radius:50%;background:var(--orange);border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.3);animation:ping 1.8s infinite}
.open{background:var(--orange);color:#fff;text-align:center;font-weight:700;font-size:14px;padding:14px;border-radius:14px}
.pager{display:flex;gap:7px;margin-top:20px}
.pager li{width:7px;height:7px;border-radius:50%;background:#d8d3c8;transition:.3s}
.pager li.on{background:var(--orange);width:24px;border-radius:5px}

/* crew */
.crew{padding:130px clamp(16px,5vw,60px) 40px}
.crew-card{position:relative;max-width:1120px;margin:0 auto;border-radius:32px;overflow:visible;background:#fff;box-shadow:0 20px 60px rgba(20,22,31,.08);display:grid;grid-template-columns:1.1fr 1fr}
.crew-img{border-radius:32px 0 0 32px;min-height:420px;background:url("https://images.unsplash.com/photo-1478131143081-80f7f84ca84d?w=1400&q=80&auto=format&fit=crop") center/cover}
.crew-txt{padding:clamp(28px,5vw,64px);display:flex;flex-direction:column;justify-content:center}
.crew-txt p{color:var(--ink2)}.crew-txt .en{font-size:14px;color:var(--mut);margin-top:6px}

/* peekers: sit behind the top edge of a card */
.peeker{position:absolute;z-index:0;right:9%;bottom:calc(100% - 3px);pointer-events:none;opacity:0;transform:translateY(40%);transition:transform .8s cubic-bezier(.2,1.5,.4,1),opacity .35s}
.peeker.show{opacity:1;transform:none}

/* soon */
.soon-list{text-align:center;padding:90px clamp(16px,5vw,60px) 110px;max-width:1120px;margin:0 auto}
.tags{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:6px}
.tag{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px 14px;transition:transform .25s,box-shadow .25s}
.tag:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(20,22,31,.08)}
.tag b{display:block;font-size:18px}
.fine{margin-top:20px;font-size:13px;color:var(--mut)}

/* final */
.final{padding:130px clamp(16px,5vw,60px) 90px;background:var(--bg)}
.final-card{position:relative;max-width:1000px;margin:0 auto;text-align:center;border-radius:36px;color:#fff;padding:clamp(48px,7vw,96px) 24px;background:linear-gradient(rgba(14,16,28,.62),rgba(14,16,28,.72)),url("https://images.unsplash.com/photo-1580502304784-8985b7eb7260?w=1800&q=80&auto=format&fit=crop") center/cover}
.final h3{margin-bottom:10px}
.sub{opacity:.85;margin-bottom:28px}
.stores{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.store{background:rgba(255,255,255,.14);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.4);border-radius:16px;padding:12px 26px;min-width:210px;cursor:default}
.store b{display:block;font-size:18px}.store small{color:rgba(255,255,255,.8)}
.final-card .peeker{right:50%;margin-right:-95px}

footer{background:var(--ink);color:#d7d8de;padding:34px 20px;text-align:center;font-size:14px}
footer .muted{color:#8f93a0;margin-top:4px;font-size:13px}
footer a{text-decoration:underline}

/* reveal */
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s,transform .8s}
.rv.in{opacity:1;transform:none}
@keyframes float{50%{transform:translateY(-10px)}}
@keyframes drift{50%{transform:translateX(8px)}}
@keyframes bob{50%{transform:translateY(-8px) rotate(1.5deg)}}
@keyframes bounce{50%{transform:translateY(7px)}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(255,107,0,.55)}100%{box-shadow:0 0 0 14px rgba(255,107,0,0)}}

@media (max-width:860px){
  .nav nav a:not(.btn-dark){display:none}
  .hero{padding-top:120px}
  .badge-char{top:92px;right:12px;width:72px}
  .p1,  .story-grid{grid-template-columns:1fr}
  .phone-col{position:sticky;top:76px;height:auto;z-index:5;order:-1;padding-bottom:6px;background:none}
  .phone{width:min(210px,50vw)}
  .scr{padding:46px 10px 10px;gap:7px}.scr h4{font-size:15px}
  .status{font-size:9px;top:15px}.island{width:62px;height:18px;top:15px}
  .pager{margin-top:8px}
  .steps .step{min-height:70vh;justify-content:flex-start;padding-top:20px}
  .steps .step:first-child{min-height:60vh;padding-top:20px}
  .step h3{font-size:30px}
  .crew-card{grid-template-columns:1fr}
  .crew-img{border-radius:32px 32px 0 0;min-height:240px;order:2}
  .peeker{width:120px}
  .final-card .peeker{width:140px;margin-right:-70px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv,.peeker{opacity:1;transform:none}.steps .step{opacity:1}}

.scr[data-i="0"]::after,.scr[data-i="1"]::after,.scr[data-i="2"]::after,.scr[data-i="3"]::after{margin-top:auto;background:var(--orange);color:#fff;text-align:center;font-weight:700;font-size:14px;padding:14px;border-radius:14px}
.scr[data-i="0"]::after,.scr[data-i="1"]::after,.scr[data-i="2"]::after{content:"다음 · Next"}
.scr[data-i="3"]::after{content:"+ 일정 추가 · Add plan";background:var(--soft);color:var(--orange);border:1px solid #FFD9BF}
.scr[data-i="0"] .pcard:nth-of-type(1){outline:2px solid var(--orange);outline-offset:-2px}

/* story background layer: diagonal top edge, theme colour per chapter */
.story-bg{position:absolute;left:0;right:0;top:34vh;bottom:0;background:var(--sbg);transition:background .7s;clip-path:polygon(0 clamp(30px,6vw,90px),100% 0,100% 100%,0 100%)}
.story[data-theme="crew"],.story[data-theme="go"]{--sbg:#0C1B2C;--txt:#fff;--sub:#9fb0c4;--dbg:rgba(255,255,255,.14)}
.story[data-theme="crew"] .label,.story[data-theme="go"] .label{color:#FF9A57}
.label{transition:color .6s}

/* chapter tabs, like Polarsteps' PLAN / TRACK / RELIVE */
.tabs{position:fixed;left:50%;bottom:22px;transform:translate(-50%,30px);z-index:70;display:flex;gap:4px;padding:5px;border-radius:999px;background:rgba(255,255,255,.14);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(20,22,31,.12);opacity:0;pointer-events:none;transition:.4s}
.tabs.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.tabs a{font-size:11px;font-weight:700;letter-spacing:.16em;padding:8px 18px;border-radius:999px;color:#4B4F5C}
.tabs a.on{background:var(--ink);color:#fff}
.tabs.dark{border-color:rgba(255,255,255,.25)}.tabs.dark a{color:#c8d3e0}.tabs.dark a.on{background:#fff;color:var(--ink)}
@media (max-width:860px){
  .story{margin-top:-20vh}.story-bg{top:20vh}
  .phone{--ry:0deg;--rx:0deg}
  .tabs{bottom:14px}
}
.steps{padding-top:30vh}
@media (max-width:860px){.steps{padding-top:0}}
.screens{color:#14161F}
.screens small{color:#8A8D98}
.pcard small{color:rgba(255,255,255,.85)}

.cats{margin-top:4px}.down{margin-top:10px}

.cloud.mini.c-b{width:clamp(150px,21vw,320px);left:2vw;top:clamp(240px,31vh,330px);bottom:auto;opacity:1;filter:drop-shadow(0 10px 14px rgba(20,22,31,.12));animation:drift 9s ease-in-out infinite}
.stage{z-index:1}
@media (max-width:860px){.cloud.mini.c-b{width:120px;top:300px}}

.stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(20,22,31,.1);z-index:500}

/* decorative clouds sprinkled through the page */
.sky{position:absolute;z-index:0;pointer-events:none;height:auto;filter:drop-shadow(0 8px 12px rgba(20,22,31,.1));animation:drift var(--dur,14s) ease-in-out infinite;animation-delay:var(--dl,0s);transition:opacity .7s}
.band .sky{filter:drop-shadow(0 6px 14px rgba(0,0,0,.18))}
.story[data-theme="crew"] .sky,.story[data-theme="go"] .sky{opacity:.1!important}
.soon-list,.final{position:relative}
@media (max-width:860px){.sky.hide-m{display:none}}
.crew{position:relative}

/* map screen: real embedded map with a Maps-style search bar on top */
.scr[data-i="5"]{padding:0 0 14px}
.scr[data-i="5"] .open{margin:0 14px}
.gmap{position:relative;flex:1;min-height:0;overflow:hidden;background:#e8e4dc}
.gmap iframe{position:absolute;left:0;top:-110px;width:100%;height:calc(100% + 110px);border:0;pointer-events:none}
.msearch{position:absolute;left:12px;right:12px;top:46px;display:flex;align-items:center;gap:10px;background:#fff;border-radius:26px;padding:9px 14px;box-shadow:0 2px 8px rgba(0,0,0,.22);font-size:14px;color:#14161F;font-weight:500}
.msearch span{flex:1;line-height:1.25}.msearch small{display:block;font-size:11px;color:#70757a;font-weight:400}
.mi{flex:none;width:16px;height:16px;border:2.5px solid #5f6368;border-radius:50%;position:relative}
.mi::after{content:"";position:absolute;width:2.5px;height:7px;background:#5f6368;right:-4px;bottom:-6px;transform:rotate(-45deg);border-radius:2px}
.msearch em{flex:none;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#FF6B00,#ffb27a)}
.mchips{position:absolute;left:12px;top:98px;display:flex;gap:6px}
.mchips u{text-decoration:none;font-size:11.5px;background:#fff;color:#3c4043;padding:6px 11px;border-radius:16px;box-shadow:0 1px 5px rgba(0,0,0,.25)}

/* ===== widget section: the core of the service ===== */
.wsec{position:relative;z-index:2;background:#0E1626;color:#fff;padding:110px clamp(16px,5vw,60px) 90px;margin-top:0}
.wsec .peeker{right:12%;bottom:calc(100% - 3px)}
.w-in{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(28px,5vw,70px);align-items:center}
.wsec h2{font-family:var(--ko);font-weight:400;font-size:clamp(34px,4.8vw,62px);line-height:1.12;margin-bottom:20px}
.wsec .label.light{color:#FF9A57}.wsec .label span{color:#9fb0c4}
.w-sub{color:#cbd5e3;margin-bottom:22px}.w-sub b{color:#fff}
.w-sub span{display:block;color:#8ea0b8;font-size:.9em;margin-top:4px}
.w-points{display:grid;gap:14px}
.w-points li{display:flex;gap:14px;font-weight:500;line-height:1.4}
.w-points small{display:block;color:#8ea0b8;font-weight:400;margin-top:2px}
.w-points i{flex:none;width:26px;height:26px;border-radius:9px;background:rgba(255,255,255,.12);position:relative;margin-top:1px}
.w-points i::after{content:"";position:absolute;inset:8px;border-radius:50%;background:#FF6B00}

.w-demo{text-align:center}
.w-phones{display:flex;justify-content:center;align-items:flex-start;gap:clamp(8px,2vw,26px)}
.w-phone{width:min(46%,290px);flex:none;transform:perspective(1500px) rotateY(var(--ry)) rotateX(var(--rx))}
.w-phone.and{margin-top:48px}
.w-phone .screens{border-radius:36px}

/* iPhone home screen */
.wall{background:linear-gradient(160deg,#FFD9BF 0%,#FFB88A 40%,#7B8CDE 100%);padding:46px 10px 10px;display:flex;flex-direction:column;gap:9px}
.h-status{position:absolute;top:14px;left:22px;right:22px;display:flex;justify-content:space-between;font-size:12px;font-weight:700;color:#14161F}
.h-date{font-size:12px;font-weight:700;color:#14161F;text-align:left;padding-left:6px}
.wg{background:rgba(255,255,255,.94);border-radius:22px;box-shadow:0 6px 16px rgba(20,22,31,.15);color:#1A1A2E;overflow:hidden;position:relative;transition:opacity .35s}
.wg-m{height:112px}
.wg-s{height:92px;width:92px;flex:none}
.wg.sw{opacity:0}
.h-row{display:flex;gap:9px;align-items:flex-start}
.h-icons{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;flex:1}
.h-icons.wide{padding:0 2px}
.ic{display:block;aspect-ratio:1;border-radius:22%;background:#fff;box-shadow:0 2px 6px rgba(20,22,31,.12)}
.ic.a{background:#4C8DFF}.ic.b{background:#34C759}.ic.c{background:#FF9F0A}.ic.d{background:#AF52DE}
.ic.e{background:#FF453A}.ic.f{background:#5AC8FA}.ic.g{background:#8E8E93}.ic.h{background:#FFD60A}
.ic.i{background:#30B0C7}.ic.j{background:#FF375F}.ic.k{background:#64D2FF}
.ic.app{background:#FF6B00;display:grid;place-items:end center;overflow:hidden}.ic.app img{width:84%}
.dock{margin-top:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:7px;padding:8px;border-radius:24px;background:rgba(255,255,255,.35);backdrop-filter:blur(8px)}

/* widget contents, modelled on the real SwiftUI layouts */
.wg-in{position:absolute;inset:0;display:flex}
.wg .ch{position:absolute;left:4px;bottom:0;width:78px}
.wg-m .L{width:34%;display:flex;flex-direction:column;align-items:center;padding:10px 0 0 8px}
.wg-m .L b{color:#FF6B00;font-weight:900;font-size:17px;line-height:1.1;white-space:nowrap}
.wg-m .L img{margin-top:auto;width:96%}
.wg-m .R{flex:1;display:flex;flex-direction:column;justify-content:space-evenly;padding:8px 10px 6px 4px;min-width:0}
.wg-m .t{font-size:11px;font-weight:800;line-height:1.2}
.wg-m .sl{font-size:8.5px;font-weight:600;color:#7B4F2E;line-height:1.2}
.pr{display:flex;align-items:center;gap:5px;font-size:9.5px;font-weight:600;white-space:nowrap}
.pr u{text-decoration:none;font-size:8px;font-weight:800;color:#fff;background:#FF6B00;border-radius:6px;padding:1px 5px;flex:none}
.pr u.nx{background:#7B4F2E}
.pr span{flex:1;overflow:hidden;text-overflow:ellipsis}
.pr time{color:#8a8d98;font-weight:500;font-size:9px;flex:none}
.pr .clip{width:9px;height:9px;flex:none;border:1.5px solid #8a8d98;border-radius:3px;transform:rotate(25deg)}
.wg-m.up .L{width:36%}
.wg-m.up .L img{width:112%;margin-left:-8px}
.wg-m .dd{font-size:30px;font-weight:900;color:#FF6B00;line-height:1}
.wg-m .rg{font-size:8.5px;color:#8a8d98}
.wg-s .in{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 10px;gap:1px}
.wg-s .in .t{font-size:9.5px;font-weight:800}
.wg-s .in .sl{font-size:7.5px;font-weight:600;color:#7B4F2E}
.wg-s .in b{font-size:26px;font-weight:900;color:#FF6B00;line-height:1.1}
.wg-s .in small{font-size:8.5px;color:#8a8d98;opacity:1}
.w-state{display:inline-block;margin-top:26px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:7px 18px;font-size:13px;font-weight:500;color:#e5ecf6}
.w-note{margin-top:12px;font-size:12px;color:#7d8ea6}

/* Android: floating head over another app */
.other{background:#EDEAE2;padding:0}
.o-bar{height:46px;background:#fff;border-bottom:1px solid #e3ded3}
.o-map{position:absolute;inset:46px 0 0 0;background:#E4EADF}
.o-map i{position:absolute;background:#fff;opacity:.9}
.o-map i:nth-child(1){left:-10%;right:-10%;top:26%;height:10px;transform:rotate(-8deg)}
.o-map i:nth-child(2){left:30%;width:12px;top:0;bottom:0;transform:rotate(14deg)}
.o-map i:nth-child(3){left:-10%;right:-10%;top:62%;height:12px;transform:rotate(6deg)}
.o-map i:nth-child(4){left:62%;width:9px;top:0;bottom:0;transform:rotate(-10deg)}
.o-card{position:absolute;left:10px;right:10px;bottom:46px;height:54px;background:#fff;border-radius:14px;box-shadow:0 3px 10px rgba(0,0,0,.15)}
.o-card.s{bottom:-2px;height:36px}
.o-cap{position:absolute;left:0;right:0;bottom:6px;font-size:8.5px;color:#6b6f78;text-align:center;z-index:2;background:rgba(255,255,255,.7);padding:3px 0}
.fhead{position:absolute;right:10px;top:34%;width:46px;height:46px;border-radius:50%;background:#fff;border:2px solid #FF6B00;box-shadow:0 5px 12px rgba(0,0,0,.3);z-index:4;animation:fh 9s ease-in-out infinite}
.fhead img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:50%}
.fhead em{position:absolute;right:-8px;top:-8px;background:#FF6B00;color:#fff;font-style:normal;font-size:8px;font-weight:800;border-radius:9px;padding:1px 5px}
.fcard{position:absolute;right:10px;top:34%;width:78%;background:#fff;border-radius:18px;box-shadow:0 8px 22px rgba(0,0,0,.28);padding:10px 12px;z-index:5;transform-origin:100% 0;animation:fc 9s ease-in-out infinite;display:flex;flex-direction:column;gap:6px;color:#1A1A2E}
.fcard b{font-size:12px;font-weight:800}.fcard small{font-size:9px;color:#7B4F2E;font-weight:600;opacity:1}
@keyframes fh{0%,12%{transform:none}16%,70%{transform:scale(.4);opacity:0}76%,100%{transform:none;opacity:1}}
@keyframes fc{0%,12%{transform:scale(.2);opacity:0}20%,62%{transform:scale(1);opacity:1}70%,100%{transform:scale(.2);opacity:0}}

@media (max-width:860px){
  .w-in{grid-template-columns:1fr}
  .wsec{padding-top:90px}
  .w-phone{width:min(46%,230px)}
  .wsec .peeker{width:120px}
  .wg-m{height:96px}.wg-s{height:78px;width:78px}
}
.h-icons.wide{flex:none}.h-row .h-icons{align-content:start}

/* widget chapter inside the pinned-phone story */
.phone-col .w-state{position:absolute;left:50%;bottom:-42px;transform:translateX(-50%);margin:0;opacity:0;transition:opacity .5s;white-space:nowrap;z-index:6}
.story[data-theme="widget"] .phone-col .w-state{opacity:1}
.scr.wall{padding:50px 10px 10px}
.scr.other{padding:0}
@media (max-width:860px){.scr.wall,.scr.other{zoom:.72}.phone-col .w-state{bottom:2px;font-size:11px;padding:4px 12px}}
.ko span{display:block;font-size:.88em;color:var(--mut);margin-top:2px}

/* crescent moon + stars behind the CREW chapter (dark) */
.moon{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:0;transition:opacity .9s}
.story.inview[data-theme="crew"] .moon,.story.inview[data-theme="go"] .moon{opacity:1}
.moon .mo{position:absolute;top:11vh;right:9vw;width:clamp(80px,10vw,150px);filter:drop-shadow(0 0 26px rgba(255,233,168,.35));animation:moonf 9s ease-in-out infinite}
.st{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;opacity:.7;animation:tw 3.4s ease-in-out infinite}
.st.s1{top:16vh;right:24vw}.st.s2{top:28vh;right:5vw;animation-delay:-1s}.st.s3{top:9vh;right:34vw;animation-delay:-2s;width:2px;height:2px}
.st.s4{top:42vh;right:14vw;animation-delay:-.6s;width:2px;height:2px}.st.s5{top:20vh;left:36vw;animation-delay:-1.6s}
.st.s6{top:62vh;right:7vw;animation-delay:-2.4s;width:2px;height:2px}.st.s7{top:74vh;left:8vw;animation-delay:-.2s}
@keyframes moonf{50%{transform:translateY(-10px) rotate(-3deg)}}
@keyframes tw{50%{opacity:.15;transform:scale(.6)}}
/* let the peeking elder (torch) draw above the dark story section */
.crew{z-index:3;padding-top:104px}
.crew .peeker{width:190px;right:10%}
@media (max-width:860px){.moon .mo{top:90px;right:5vw;width:70px}.crew{padding-top:96px}.crew .peeker{width:130px}}

/* mobile: pinned phone gets a full-width backdrop in the chapter colour, only once it is actually pinned */
@media (max-width:860px){
  .phone-col::before{content:"";position:absolute;z-index:-1;left:calc(50% - 50vw);width:100vw;top:-76px;bottom:-30px;background:linear-gradient(var(--sbg) 86%,transparent);opacity:0;transition:opacity .25s,background .6s;pointer-events:none}
  .phone-col.stuck::before{opacity:1}
}