/* Toss's own sizes, line heights and tracking; Pretendard runs one weight step lighter to match Toss Product Sans' stroke. */
@font-face{font-family:"Pretendard Std";src:url(/site/fonts/PretendardStdVariable.woff2) format("woff2-variations"),url(/site/fonts/PretendardStdVariable.woff2) format("woff2");font-weight:100 900;font-display:swap}
body{margin:0}
.tp{--screen:900px;--ink:#1C1F25;--ink2:#333840;--gray:#727780;--line:#E5E8EB;--chip:#F2F4F6;--accent:#6C72FF;position:relative;font-family:"Pretendard Std","Apple SD Gothic Neo",sans-serif;font-weight:300;color:var(--ink);background:#FFFFFF;word-break:keep-all;-webkit-font-smoothing:antialiased;overflow-x:clip}
.tp *{box-sizing:border-box}
.tp h1,.tp h2,.tp h3,.tp p,.tp figure{margin:0}
.tp a{color:inherit;text-decoration:none}
.pin{position:sticky;top:0;height:var(--screen);overflow:hidden}
/* One scroll, one step: each stop of a pinned scene is a marker at its place in the scroll; the script
   reads them and glides to the next one per wheel turn, swipe or key. A computer and a phone each have their own. */
.tp{--pinh:var(--screen)}
.stop{display:none;position:absolute;left:0;top:calc((100% - var(--pinh)) * var(--at));width:1px;height:1px;pointer-events:none}
.tp:not(.flat) .stop.pc,.mo .stop.ph{display:block}
.t48{font-size:48px;line-height:1.28;font-weight:600;letter-spacing:-0.02em}
.t40{font-size:40px;line-height:1.4;font-weight:600;letter-spacing:-0.02em}
.t32{font-size:32px;line-height:1.4;font-weight:600;letter-spacing:-0.02em}
.b16{font-size:16px;line-height:1.6;font-weight:300;letter-spacing:-0.02em;color:var(--gray)}

/* The phone: titanium rim, black glass, island, the app screen under a status bar. */
/* Height from the width, not aspect-ratio: Safari made the padded box about 6% taller. */
.phone{position:relative;width:var(--pw,290px);height:calc(var(--pw,290px) * 2.2985);border-radius:calc(var(--pw,290px)*.17);padding:calc(var(--pw,290px)*.034);background:#0D0E11;box-shadow:inset 0 0 0 1.5px #3A3D44,0 0 0 1.5px #D7DBE2,0 0 0 3px #A9B0BB,0 40px 70px -30px rgba(28,34,60,.45)}
.phone::before{content:"";position:absolute;inset:0;border-radius:inherit;transform:translate(6px,3px);background:linear-gradient(120deg,#E6E9EE,#9BA3AF 40%,#C9CED6 70%,#8D95A1);z-index:-1}
.scr{position:relative;width:100%;height:100%;border-radius:calc(var(--pw,290px)*.135);overflow:hidden;background:#FFFFFF}
.sb{position:absolute;left:0;right:0;top:0;height:5.4%;display:flex;align-items:center;justify-content:space-between;padding:0 9% 0 11%;font-size:calc(var(--pw,290px)*.05);font-weight:500;color:#111;z-index:2;background:#FFFFFF}
.sb i{display:block;width:16%;height:38%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 12'%3E%3Cg fill='%23111'%3E%3Crect x='0' y='7' width='3' height='5' rx='1'/%3E%3Crect x='5' y='5' width='3' height='7' rx='1'/%3E%3Crect x='10' y='2.5' width='3' height='9.5' rx='1'/%3E%3Crect x='15' y='0' width='3' height='12' rx='1'/%3E%3Crect x='24' y='1' width='20' height='10' rx='3' fill='none' stroke='%23111' stroke-width='1.4'/%3E%3Crect x='26' y='3' width='14' height='6' rx='1.5'/%3E%3Crect x='45.5' y='4' width='1.6' height='4' rx='.8'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
.island{position:absolute;top:1.6%;left:50%;width:31%;height:3.6%;margin-left:-15.5%;border-radius:99px;background:#000;z-index:3}
.shot{position:absolute;left:0;right:0;top:5.4%;bottom:0;background:#FFFFFF}
.shot img{position:absolute;inset:0;width:100%;height:auto;opacity:0;transition:opacity .5s ease}
.shot img.on{opacity:1}

/* A piece of the screen lifted out of the phone, like Toss's floating card. */
.pop{position:absolute;left:var(--px,-84px);top:var(--py,120px);width:var(--pwid,300px);opacity:0;transform:translate3d(0,18px,0) scale(.96);transition:opacity .45s ease,transform .7s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 22px 26px rgba(36,42,74,.20)) drop-shadow(0 2px 4px rgba(36,42,74,.06))}
.pop.on{opacity:1;transform:translate3d(0,0,0) scale(1)}
.pop img{display:block;width:100%}
.pop.boxed{background:#FFFFFF;border-radius:22px;padding:14px 12px}
.pop.card img{border-radius:var(--pr,18px)}
/* The week crop runs to its own edges, so it sits on a white card with room around it: Toss's floating cards keep about 7% of their width clear. --pwid is the crop's width; the card adds the room around it. */
.pop.card.roomy{background:#FFFFFF;border-radius:22px;padding:var(--pad,18px);width:calc(var(--pwid,300px) + var(--pad,18px) * 2)}
.pop.card.roomy img{border-radius:0}
/* The empty hour just tapped, marked the way the app marks it (primarySoft with a primary edge) before the proposal sheet opens. */
.pop.slot{background:#EEEBFB;border:1.5px solid #6C72FF;border-radius:16px;padding:14px 18px;width:var(--pwid,250px)}
.pop.slot b{display:block;font-size:15px;line-height:1.35;font-weight:600;letter-spacing:-0.02em;color:#16181D}
.pop.slot span{display:block;margin-top:3px;font-size:13px;line-height:1.35;font-weight:500;letter-spacing:-0.01em;color:#4D4AD4}

/* ── 0 · opening: the app's sign-up scene with its own wash, schedules and "Let's meto!" pill ── */
/* Its purples are the app's sign-up purples (11/6): the brand hue only, stepped in lightness. */
.op{position:relative;height:var(--screen);display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;background:#FFFFFF}
.bloom{position:absolute;left:0;right:0;top:0;height:100%;pointer-events:none;background:radial-gradient(40% 22% at 5% 72%,rgba(201,209,255,1) 0%,rgba(201,209,255,.6) 55%,rgba(201,209,255,0) 100%),radial-gradient(45% 28% at 70% 62%,rgba(213,220,255,1) 0%,rgba(213,220,255,.6) 55%,rgba(213,220,255,0) 100%),radial-gradient(70% 60% at 98% 30%,rgba(181,191,255,1) 0%,rgba(181,191,255,.6) 55%,rgba(181,191,255,0) 100%),radial-gradient(70% 50% at 55% 8%,rgba(213,220,255,1) 0%,rgba(213,220,255,.6) 55%,rgba(213,220,255,0) 100%),radial-gradient(75% 55% at 12% 22%,rgba(201,209,255,1) 0%,rgba(201,209,255,.6) 55%,rgba(201,209,255,0) 100%),linear-gradient(to bottom,#ECEFFF 0%,#ECEFFF 55%,rgba(236,239,255,0) 100%)}
.op-stage{position:relative;width:min(1100px,calc(100% - 48px));height:400px}
.ocard{position:absolute;left:var(--x);top:var(--y);width:156px;opacity:0;transform:rotate(var(--r))}
/* The white base and shadow bob with the tint, so nothing shows behind a card as it floats. */
.oblock{position:relative;padding:8px 12px 8px 16px;border-radius:12px;border:1px solid;background:linear-gradient(var(--tint),var(--tint)),#FFFFFF;box-shadow:0 8px 16px rgba(22,24,29,.12);animation:bob var(--d) ease-in-out infinite alternate}
.orail{position:absolute;left:8px;top:8px;bottom:8px;width:3px;border-radius:999px}
.obt{margin:0;font-size:16px;font-weight:600;line-height:22px;color:#16181D;white-space:nowrap}
.obs{margin:2px 0 0;font-size:12px;line-height:16px;font-weight:400;color:#5A6472;white-space:nowrap}
.oslot{position:absolute;left:50%;top:48%;width:284px;height:82px;margin:-41px 0 0 -142px}
.oempty,.ofilled{position:absolute;inset:0;border-radius:20px;display:flex;align-items:center;justify-content:center}
/* No white fill: on the purple wash it read as a stray white box behind the gathering cards. The dashed outline alone marks the empty slot. */
.oempty{border:1.5px dashed rgba(108,114,255,.4)}
.ofilled{opacity:0;background:linear-gradient(90deg,#4D4AD4 0%,#6C72FF 35%,#6C72FF 65%,#8E9AFF 100%)}
.omark{width:236px;height:auto}
.lm{display:block;width:236px;height:auto;overflow:visible;color:#FFFFFF}
.lm-fill{fill:currentColor;fill-opacity:.4}
.lm-trace{fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-dasharray:1.02 1.02;stroke-dashoffset:1.02}
.lm.writing .lm-trace{animation:lm-trace .3135s cubic-bezier(.42,0,.58,1) calc(var(--g) * 45ms) forwards,lm-trace-fade .1045s cubic-bezier(.33,1,.68,1) calc(var(--g) * 45ms + .3135s) forwards}
.lm.writing .lm-fill{animation:lm-fill .154s cubic-bezier(.33,1,.68,1) calc(var(--g) * 45ms + .264s) forwards}
.lm.done .lm-fill{fill-opacity:1}
.lm.done .lm-trace{stroke-opacity:0}
@keyframes lm-trace{to{stroke-dashoffset:0}}
@keyframes lm-trace-fade{to{stroke-opacity:0}}
@keyframes lm-fill{to{fill-opacity:1}}
@keyframes bob{from{transform:translateY(-6px)}to{transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.oblock{animation:none}}
.op-h{position:relative;margin:28px 24px 0;font-size:56px;line-height:1.2;font-weight:600;letter-spacing:-0.03em;text-align:center;color:var(--ink)}
/* The App Store button as Korean app pages draw it (에브리타임's, the closest to meto's students): a dark
   rounded box with the Apple mark and "App Store" on one line. */
.store{display:inline-flex;align-items:center;gap:calc(var(--bh,48px) * .18);height:var(--bh,48px);padding:0 calc(var(--bh,48px) * .4);border-radius:calc(var(--bh,48px) * .23);background:#222222;font-size:calc(var(--bh,48px) * .36);font-weight:500;letter-spacing:-0.01em;white-space:nowrap;transition:opacity .2s ease}
.store:hover{opacity:.85}
.store svg{flex:none;width:auto;height:calc(var(--bh,48px) * .42);fill:currentColor;margin-top:calc(var(--bh,48px) * -.05)}
/* The page's links take their text colour from around them, so the button sets its own past that rule. */
.tp .store{color:#FFFFFF}
.tp .store.light{background:#FFFFFF;color:#222222}
.op-cta{position:relative;margin-top:32px;--bh:52px}
.grad{background:linear-gradient(90deg,#4D4AD4 0%,#6C72FF 35%,#6C72FF 65%,#8E9AFF 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* ── 1 · the flow: the framed scene opens to the full width, the camera moves into the phone, then the scene folds into a card ── */
.hero{position:relative;height:calc(var(--screen) * 5)}
.hero .pin{background:#FFFFFF}
.frame{position:absolute;top:16px;left:16px;right:16px;bottom:24px;border-radius:40px;overflow:hidden;background:#2A2C6E;transform:translateZ(0)}
.stage{position:absolute;left:0;top:0;width:var(--vw,1440px);height:var(--screen);transform-origin:0 0}
/* Dusk over the city: no photo yet, so the frame holds the app's purple-pink-orange as an evening sky. */
.sky{position:absolute;inset:-6%;background:radial-gradient(60% 55% at 78% 92%,rgba(246,170,120,.95),rgba(246,170,120,0) 70%),radial-gradient(55% 60% at 18% 105%,rgba(228,106,169,.85),rgba(228,106,169,0) 70%),radial-gradient(70% 60% at 40% 20%,rgba(108,114,255,.65),rgba(108,114,255,0) 70%),linear-gradient(180deg,#191B47 0%,#33378A 38%,#7A5DBB 66%,#D684AF 86%,#EFA88A 100%);transform-origin:70% 60%}
.sky::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(18,14,44,.55) 0%,rgba(18,14,44,0) 42%)}
.hp{position:absolute;left:calc(50% + 250px);top:calc(44% + var(--z,0) * 6%);--pw:min(290px,calc(var(--screen) * .32));transform:translate(-50%,-50%) translateX(calc((1 - var(--z,0)) * 90px)) rotate(calc(13deg - var(--z,0) * 6deg)) scale(calc(.64 + var(--z,0) * .38))}
.hp .pop{--px:-118px;--py:44%;--pwid:270px}
.zc{position:absolute;left:calc(50% - 363px);top:50%;transform:translateY(-50%);color:#FFFFFF;opacity:0;z-index:2}
.zc .b16{color:rgba(255,255,255,.8);margin-top:24px}
/* The app copies a confirmed plan into the phone's own calendar and keeps it in step (기기 캘린더에 넣기). */
.zc-cal{display:inline-flex;align-items:center;gap:8px;padding:8px 16px 8px 12px;border-radius:99px;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.24);font-size:15px;line-height:1.4;font-weight:500;letter-spacing:-0.02em;color:#FFFFFF;white-space:nowrap}
/* .tp p zeroes paragraph margins, so the gap above the pill needs the summary's own selector. A little wider than title to subtitle, so it reads as its own note. */
.zc .zc-cal{margin-top:32px}
.zc-cal svg{flex:none;width:18px;height:18px}
/* The flow plays inside the first phone: each screen pushes in from the right like the app,
   or fades in place where the app only changes state; a touch dot marks the button pressed. */
.demo img{opacity:1;transform:translate3d(100%,0,0);transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .45s ease}
.demo img.xf{transform:none;opacity:0}
.demo img.cur{transform:none;opacity:1;box-shadow:-10px 0 24px rgba(20,24,40,.10)}
.demo img.past{transform:translate3d(-30%,0,0);opacity:1}
.demo img.past.stay{transform:none}
.tapbox{position:absolute;left:0;right:0;top:0;aspect-ratio:1206/2622;pointer-events:none;z-index:5}
.tap{position:absolute;left:var(--tx,50%);top:var(--ty,50%);width:calc(var(--pw,290px) * .13);aspect-ratio:1;margin:calc(var(--pw,290px) * -.065) 0 0 calc(var(--pw,290px) * -.065);border-radius:50%;background:rgba(28,31,37,.22);box-shadow:inset 0 0 0 2px rgba(255,255,255,.9),0 2px 8px rgba(0,0,0,.15);opacity:0;transform:scale(1.6);transition:opacity .2s ease,transform .3s cubic-bezier(.2,.8,.2,1)}
/* The dot lands once the screen has slid in, so each step reads as screen first, then the press. */
.tap.on{opacity:1;transform:scale(1);transition-delay:.45s}
.hstep{position:absolute;left:calc(50% - 363px);top:50%;width:330px;height:0;color:#FFFFFF;z-index:2;pointer-events:none;opacity:var(--so,0)}
.hstep span{position:absolute;left:0;top:0;width:100%;opacity:0;transform:translate3d(0,calc(-50% + 14px),0);transition:opacity .35s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.hstep span.on{opacity:1;transform:translate3d(0,-50%,0)}
.hstep em{display:block;font-style:normal;font-size:16px;line-height:1.4;font-weight:400;color:rgba(255,255,255,.7);margin-bottom:10px}
.hstep b{display:block;font-size:32px;line-height:1.35;font-weight:600;letter-spacing:-0.02em}

/* ── 3 · three cards, one fact each ── */
.cards{padding:200px 0 200px;text-align:center}
.chipline{display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}
.chips{display:inline-flex;gap:4px;padding:5px;border-radius:16px;background:rgba(2,32,71,.05);vertical-align:middle}
.chips i{font-style:normal;font-size:26px;line-height:1.4;font-weight:600;letter-spacing:-0.02em;color:rgba(24,31,43,.77);padding:2px 12px;border-radius:11px;animation:chip 4.8s infinite}
.chips i:nth-child(2){animation-delay:1.6s}.chips i:nth-child(3){animation-delay:3.2s}
@keyframes chip{0%,30%{background:#FFFFFF;box-shadow:0 2px 8px rgba(2,32,71,.08)}36%,100%{background:transparent;box-shadow:none}}
.cardrow{display:grid;grid-template-columns:repeat(3,380px);gap:24px;justify-content:center;margin-top:64px;text-align:left}
.fc-v{position:relative;height:480px;border-radius:32px;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:28px}
.fc-v.v1{background:linear-gradient(160deg,#F1F2FF 0%,#DDE0FF 55%,#C9CDFA 100%)}
.fc-v.v2{background:linear-gradient(160deg,#FFF1F6 0%,#FADDE9 55%,#F1C5D8 100%)}
.fc-v.v3{background:linear-gradient(160deg,#FFF5EE 0%,#FFE3D1 55%,#F8CDB0 100%)}
.fc figcaption{padding:24px 4px 0}
.fc figcaption b{display:block;font-size:18px;line-height:1.48;font-weight:500;letter-spacing:-0.02em;color:var(--ink2)}
.fc figcaption span{display:block;margin-top:6px;font-size:16px;line-height:1.6;font-weight:300;letter-spacing:-0.02em;color:var(--gray)}
.ui{width:100%;background:#FFFFFF;border-radius:22px;box-shadow:0 20px 40px -18px rgba(40,46,90,.28);padding:20px}
.ui-h{font-size:15px;line-height:1.4;font-weight:500;color:var(--ink);letter-spacing:-0.02em}
.ui-s{font-size:12px;line-height:1.4;color:#8B95A1;margin-top:2px}
.src{display:flex;gap:6px;margin:14px 0 16px}
.src span{font-size:12px;font-weight:400;color:#4E5968;background:#F2F4F6;border-radius:99px;padding:5px 10px}
.wk{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.wk b{display:block;text-align:center;font-size:11px;font-weight:400;color:#8B95A1;margin-bottom:6px}
.wk .col{position:relative;height:200px;border-radius:8px;background:#F7F8FA}
.wk .col i{position:absolute;left:3px;right:3px;top:calc((var(--s) - 9) / 13 * 100%);height:calc((var(--e) - var(--s)) / 13 * 100%);border-radius:5px;background:#CDD0FF}
.lvl{margin-top:14px;border-top:1px solid #F2F4F6}
/* The four levels are real buttons: picking one shows below what 서연 would see. */
.lvl button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:12px 0;border:0;border-bottom:1px solid #F2F4F6;background:none;font:inherit;font-size:14px;font-weight:400;color:#4E5968;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.lvl button::after{content:"";flex:none;width:18px;height:18px;border-radius:50%;border:1.5px solid #D1D6DB;transition:border .15s ease}
.lvl button.on{color:var(--ink);font-weight:500}
.lvl button.on::after{border:5px solid var(--accent)}
.lvl button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.lvl em{font-style:normal;font-size:11px;font-weight:500;color:var(--accent);background:#EEEFFF;border-radius:6px;padding:2px 6px;margin-left:6px}
/* Held at the tallest preview (전체 공개, with memos), so picking a level never moves the page. */
.busy{margin-top:14px;display:grid;gap:6px;align-content:start;min-height:138px}
.busy span{display:block;border-radius:10px;background:#EEEFFF;padding:9px 12px;font-size:12px;line-height:1.35;color:#4D50C4;font-weight:500}
.busy span small{display:block;font-size:11px;font-weight:300;color:#6E72D8}
/* One preview per level: nothing but a note when hidden, "일정 있음" with the time, the title, then the memo too. */
.busy > span{display:none}
.ui.lv0 .busy .pv0,.ui.lv1 .busy .pv1,.ui.lv2 .busy .pv2,.ui.lv3 .busy .pv2{display:block}
.busy small.pv-memo{display:none;margin-top:2px}
.ui.lv3 .busy small.pv-memo{display:block}
.busy .pv0{background:#F2F4F6;color:#4E5968}
.busy .pv0 small{color:#8B95A1}
.ranks{width:100%;display:grid;gap:12px}
/* Either rank can be picked, as in the app's results: the picked one wears the purple edge. */
.rk{display:block;width:100%;text-align:left;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;background:#FFFFFF;border:1.5px solid #E5E8EB;border-radius:22px;padding:20px 20px 18px;box-shadow:0 20px 40px -18px rgba(90,70,60,.25);opacity:.85;transition:background .2s ease,border-color .2s ease,opacity .2s ease}
.rk.on{background:#EEEDFC;border-color:var(--accent);opacity:1}
.rk:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.rk span{display:block}
.rk .r1{font-size:15px;font-weight:500;color:#6B7684}
.rk.on .r1{color:var(--accent)}
.rk .d{margin-top:14px;font-size:13px;color:#6B7684}
.rk .tm{margin-top:4px;font-size:23px;line-height:1.3;font-weight:500;color:var(--ink);letter-spacing:-0.01em}
.rk .n{margin-top:12px;font-size:15px;font-weight:600;color:var(--ink)}
.rk .x{margin-top:8px;font-size:12px;color:#6B7684}

/* ── 2 · a black slot between two words opens onto a friend's calendar, where a time is proposed straight from it ── */
.dk{position:relative;height:calc(var(--screen) * 5.6)}
.dk .pin{background:#FFFFFF}
.dk-words{position:absolute;left:0;right:0;top:50%;height:0;font-size:32px;line-height:1.4;font-weight:600;letter-spacing:-0.02em;color:var(--ink)}
.dk-words span{position:absolute;top:0;transform:translateY(-50%);white-space:nowrap}
.dk-words .wl{right:calc(50% + var(--gap,44px))}
.dk-words .wr{left:calc(50% + var(--gap,44px))}
.dk-box{position:absolute;left:50%;top:50%;width:28px;height:96px;border-radius:14px;transform:translate(-50%,-50%);background:#0B0C0F;overflow:hidden}
.dk-in{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:900px;text-align:center;color:#FFFFFF;opacity:0}
.dk-room{position:absolute;left:50%;top:50%;width:var(--vw,1440px);height:var(--screen);transform:translate(-50%,-50%);opacity:0;background:radial-gradient(60% 70% at 70% 40%,#262932 0%,#0B0C0F 70%)}
.dk-step{position:absolute;inset:0;opacity:0;transition:opacity .55s ease}
.dk-step.on{opacity:1}
.dk-txt{position:absolute;left:calc(50% - 420px);top:50%;transform:translateY(-50%);width:420px;color:#FFFFFF}
.tag{display:inline-block;font-size:14px;line-height:1.6;font-weight:400;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.22);border-radius:99px;padding:3px 12px;margin-bottom:20px}
.dk-txt .b16{color:rgba(255,255,255,.6);margin-top:16px}
.dk-ph{position:absolute;left:calc(50% + 200px);top:50%;--pw:min(280px,calc(var(--screen) * .3));transform:translate(-50%,-50%) perspective(1600px) rotateY(-10deg) rotateX(3deg)}
.dk-ph .phone{box-shadow:inset 0 0 0 1.5px #3A3D44,0 0 0 1.5px #D7DBE2,0 0 0 3px #A9B0BB,0 50px 90px -20px rgba(0,0,0,.7),0 0 120px rgba(150,160,255,.10)}
.dk-ph .pop{--px:-150px;opacity:1;transform:none}
/* On the friend's day, a touch lands on the empty hour once the step is showing. */
.dk-step.on .tap{opacity:1;transform:scale(1);transition-delay:.6s}

/* ── 4 · a night sky where the closing words fill in, then the footer ── */
.sky2{background:linear-gradient(180deg,#0B0C0F 0%,#111633 14%,#1C2556 34%,#34408A 54%,#5C5BAE 72%,#8E6FB5 90%,#9C78B6 100%)}
.end{position:relative;height:calc(var(--screen) * 1.8)}
.end .pin{display:flex;align-items:center;justify-content:center;text-align:center}
.stars{position:absolute;inset:0;background-image:radial-gradient(1.2px 1.2px at 12% 18%,rgba(255,255,255,.7),transparent),radial-gradient(1px 1px at 28% 40%,rgba(255,255,255,.5),transparent),radial-gradient(1.4px 1.4px at 47% 12%,rgba(255,255,255,.6),transparent),radial-gradient(1px 1px at 63% 33%,rgba(255,255,255,.45),transparent),radial-gradient(1.2px 1.2px at 78% 22%,rgba(255,255,255,.65),transparent),radial-gradient(1px 1px at 88% 48%,rgba(255,255,255,.4),transparent),radial-gradient(1px 1px at 8% 62%,rgba(255,255,255,.35),transparent),radial-gradient(1.2px 1.2px at 36% 70%,rgba(255,255,255,.3),transparent);pointer-events:none}
/* Two short lines now, set at the opening title's size so the page ends the way it began. */
.endtxt{position:relative;font-size:56px;line-height:1.2;font-weight:600;letter-spacing:-0.03em}
.endtxt span{display:block;background:linear-gradient(90deg,rgba(255,255,255,.95) calc(var(--q,0) * 112% - 12%),rgba(255,255,255,.12) calc(var(--q,0) * 112%));-webkit-background-clip:text;background-clip:text;color:transparent}
.foot{position:relative;padding:120px 72px 0;color:#FFFFFF;overflow:hidden}
.foot-top{display:grid;grid-template-columns:1fr auto;gap:64px;align-items:start}
.foot-h{font-size:28px;line-height:1.4;font-weight:600;letter-spacing:-0.02em;color:rgba(255,255,255,.92)}
.foot-icon{display:block;width:64px;height:64px;border-radius:15px;margin-bottom:24px;box-shadow:0 10px 24px -8px rgba(10,12,30,.45)}
.foot .store{margin-top:28px;--bh:52px}
.cols{display:grid;grid-template-columns:repeat(3,140px);gap:24px;font-size:14px;line-height:2.2;font-weight:400;color:rgba(255,255,255,.88)}
.cols b{display:block;font-weight:500;color:#FFFFFF;margin-bottom:6px}
.tp .legal{margin-top:72px;font-size:14px;color:rgba(255,255,255,.78)}
.mark{display:block;width:min(1100px,90%);margin:40px 0 -2%;opacity:.16}

/* Section dashes on the left edge, like Toss's scroll marker. */
.dash{position:fixed;left:24px;top:50%;transform:translateY(-50%);display:grid;gap:11px;z-index:20;pointer-events:none}
.dash i{display:block;width:14px;height:1.5px;background:rgba(139,149,161,.4)}
.dash i.on{background:var(--ink)}
.dash.dark i{background:rgba(255,255,255,.3)}
.dash.dark i.on{background:#FFFFFF}

/* ── flat layout: the canvas shows the whole page at once, and phones read it as one column ── */
.flat-only{display:none}
.flat .flat-only{display:block}
.flat .anim-only{display:none}
.flat .hero,.flat .dk,.flat .end{height:auto}
.flat .pin{position:relative;height:auto;overflow:visible}
.flat .hero .pin{height:var(--screen)}
.flat .dash,.flat .hstep{display:none}
.flat .frame .stage{width:100%;height:100%}
.zf{margin:0 16px;height:var(--screen);border-radius:40px;overflow:hidden;position:relative}
.zf .stage{width:100%;height:100%}
.zf .zc{opacity:1}
.zf .hp{--z:1}
.zf .pop{opacity:1;transform:none}
.panel{position:relative;height:400px;border-radius:28px;background:#F2F4F6;overflow:hidden}
.panel .phone{position:absolute;left:50%;top:40px;margin-left:calc(var(--pw) / -2);--pw:210px}
.panel .pop{opacity:1;transform:none;--px:14px;--pwid:250px}
.dkf{margin:160px 16px 0;border-radius:40px;background:radial-gradient(60% 70% at 70% 30%,#262932 0%,#0B0C0F 70%);padding:140px 40px 120px;text-align:center;color:#FFFFFF}
.dkfrow{display:grid;grid-template-columns:repeat(3,340px);gap:40px;justify-content:center;margin-top:72px;text-align:left}
.dkfrow .panel{height:440px;background:#16181D}
.dkf h3{margin-top:22px;font-size:22px;line-height:1.4;font-weight:600;letter-spacing:-0.02em}
.dkf p{margin-top:8px;font-size:16px;line-height:1.6;color:rgba(255,255,255,.6)}
.dkf .tag{margin:28px 0 0}
.flat .end .pin{padding:200px 24px 40px}
.flat .endtxt span{--q:1}

@media (max-width:760px){
  .op-stage{width:100%;height:360px}
  .ocard{left:var(--mx);top:var(--my)}
  .oslot{width:236px;height:68px;margin:-34px 0 0 -118px}
  .oempty,.ofilled{border-radius:18px}
  .omark,.lm{width:196px}
  .op-h{font-size:32px;line-height:1.3}
  .flat .hero{height:auto}
  .flat .hero .pin{--hh:max(calc(var(--screen) - 120px),600px);height:var(--hh);margin-top:0}
  .frame{top:8px;left:8px;right:8px;bottom:8px;border-radius:24px}
  .stage{width:100%;height:100%}
  /* The phone takes what the three title lines leave, so the two never meet however tall Safari's bars make the screen. */
  .hp{left:50%;top:34px;--pw:clamp(110px,calc((var(--hh,600px) - 258px) * .414),220px);transform:translateX(-50%) rotate(8deg);transform-origin:50% 0}
  .hp .pop{display:none}
  .zf{margin:12px 8px 0;height:560px;border-radius:24px}
  /* Words on top, the phone below them in the same column, its bottom running off the card. */
  .zf .stage{display:flex;flex-direction:column;align-items:center}
  .zf .zc{order:-1;position:relative;left:auto;right:auto;top:auto;transform:none;text-align:center;margin:40px 24px 0}
  .zf .zc .t40{font-size:24px;line-height:1.4}
  .zf .zc .b16{font-size:14px;line-height:1.6;margin-top:12px;color:rgba(255,255,255,.8)}
  .zf .zc .zc-cal{margin-top:20px;padding:6px 12px 6px 10px;font-size:13px;gap:6px}
  .zf .zc .zc-cal svg{width:16px;height:16px}
  .zf .hp{position:relative;left:auto;top:auto;flex:none;margin-top:32px;transform:rotate(6deg);transform-origin:50% 0;--pw:210px}
  .t48{font-size:36px}
  .t32{font-size:28px}
  .b16{font-size:14px;line-height:1.6;color:#6B7684}
  .fc figcaption span{font-size:14px;color:#6B7684}
  .panel{height:340px;border-radius:24px}
  .panel .phone{--pw:200px}
  .endtxt span{text-wrap:balance}
  .op-cta{margin-top:24px;--bh:46px}
  .cards{padding:96px 20px 96px}
  .chipline{font-size:22px;line-height:1.4}
  .chipline.t32{font-size:22px}
  .chips i{font-size:18px;padding:2px 8px}
  .cardrow{grid-template-columns:1fr;gap:40px;margin-top:40px}
  .fc-v{height:auto;min-height:360px;border-radius:24px;padding:28px 20px}
  .dkf{margin:12px 8px 0;border-radius:24px;padding:80px 20px 72px;text-align:left}
  .dkf .t32{font-size:24px}
  .dkfrow{grid-template-columns:1fr;gap:56px;margin-top:48px}
  .flat .end .pin{padding:120px 20px 24px}
  .endtxt{font-size:32px;line-height:1.3}
  .foot{padding:72px 20px 0}
  .foot-top{grid-template-columns:1fr;gap:48px}
  /* On a phone the whole footer sits in the middle: the icon, line and App Store button, each link column and the copyright. */
  .foot-lead,.cols,.tp .legal{text-align:center}
  .foot-lead .foot-icon{margin-left:auto;margin-right:auto}
  .cols{grid-template-columns:repeat(3,1fr);gap:12px}
  .mark{width:100%;margin:32px 0 -2%}
}

/* ── phones: the same one column, but every scene still moves with the scroll, as on Toss's phone page ── */
.anchor{display:block;height:0}
.hero .anchor{position:absolute;left:0;top:calc(var(--screen) * 3.5)}
.flat .hero .anchor{top:auto;bottom:-12px}
/* The framed first scene opens to the full width in the first few steps of the scroll. */
.mo .frame{inset:0;border-radius:0;clip-path:inset(calc(var(--fo,1) * 8px) round calc(var(--fo,1) * 24px))}
.mo .frame .stage{left:8px;top:8px;width:calc(100% - 16px);height:calc(100% - 16px)}
/* Then the scene holds: the phone comes to the middle and plays the flow one step per stretch of scroll. */
.mo{--ph:max(var(--screen),100lvh);--pinh:var(--ph)}
.mo .op{height:var(--ph)}
.mo .hero{height:calc(var(--screen) * 4.4)}
.mo .hero .pin{position:sticky;top:0;height:var(--ph);overflow:hidden}
.mo .hero .hp{top:0;transform-origin:50% 0}
.mo .hero .hp .pop{display:block;left:calc(var(--pw) * -.14);width:calc(var(--pw) * 1.28);top:40%}
.mo .hstep{display:block;left:0;right:0;top:22px;width:auto;text-align:center}
.mo .hstep span{left:0;right:0;width:auto;transform:translate3d(0,10px,0)}
.mo .hstep span.on{transform:none}
.mo .hstep em{font-size:13px;margin-bottom:4px}
.mo .hstep b{font-size:20px;line-height:1.35;white-space:nowrap}
/* The second card: the phone rises and grows inside it, the words come into focus, the confirmed note pops out. */
.mo .zf .sky{scale:var(--zs,1)}
.mo .zf .hp{translate:0 var(--zy,0px);scale:var(--zk,1)}
.mo .zf .zc{opacity:var(--zo,0);translate:0 calc((1 - var(--zo,0)) * 24px);filter:blur(calc((1 - var(--zo,0)) * 8px));transition:opacity .8s ease,translate 1s cubic-bezier(.2,.8,.2,1),filter .8s ease}
.mo .zf .hp .pop{display:block;--px:-30px;--py:46%;--pwid:250px;opacity:var(--on,0);transform:translate3d(0,calc((1 - var(--on,0)) * 18px),0) scale(calc(.96 + var(--on,0) * .04))}
/* Headings and captions come into focus once as they arrive. */
.mo :is(.chipline,.fc figcaption,.foot-icon,.foot-h,.foot .store,.cols){opacity:var(--r,0);transform:translate3d(0,calc((1 - var(--r,0)) * 28px),0);filter:blur(calc((1 - var(--r,0)) * 8px));transition:opacity .8s ease,transform 1s cubic-bezier(.2,.8,.2,1),filter .8s ease}
.mo .foot-h{transition-delay:.08s}
.mo .foot .store{transition-delay:.16s}
.mo .fc-v > div{translate:0 var(--pa,0px)}
/* The friend's-calendar scene, where one phone stays put and its screen changes, pins on phones too, in place of the panel list. */
.mo .dkf{display:none}
.mo .dk.anim-only{display:block}
/* Safari's bars shrink as you scroll, so the pinned screen takes the large height. iOS 26 cuts pinned
   content at that height even where it still paints a strip below, so the phone fits whole inside it. */
.mo .dk .pin{position:sticky;top:0;--ph:max(var(--screen),100lvh);height:var(--ph);overflow:hidden}
/* iOS 26 Safari tints its bars from whatever sits stuck at the top and bottom edges, and keeps that colour
   after it scrolls away. Past the black room, the cards and the night sky each carry strips of their own
   colour (a 1px strip went unnoticed; 12px works). The night's strips follow its gradient from the script. */
.edge{display:none}
.mo .edge{display:block;position:sticky;height:12px;z-index:1;pointer-events:none}
.mo .edge.t{top:0}
.mo .edge.b{bottom:0}
.mo .cards .edge{background:#FFFFFF}
.mo .cards .edge.t{margin:-96px -20px 84px}
.mo .cards .edge.b{margin:84px -20px -96px}
.mo .sky2 .edge.t{margin-bottom:-12px}
.mo .sky2 .edge.b{margin-top:-12px}
/* A slot between two words grows into the black room, where the friend's month, day and the proposal take turns on one phone. */
.mo .dk{height:calc(var(--screen) * 4.6)}
.mo .dk .pin{background:transparent}
.mo .dk-words{font-size:26px}
.mo .dk-words span{left:50%;right:auto;transform:translate(-50%,-50%)}
.mo .dk-words .wl{top:calc(var(--gap,40px) * -1)}
.mo .dk-words .wr{top:var(--gap,40px)}
.mo .dk-in{width:calc(100% - 48px)}
.mo .dk-in .t40{font-size:26px;line-height:1.4}
.mo .dk-step{display:flex;flex-direction:column;align-items:center;padding:80px 24px 0}
.mo .dk-txt{position:relative;left:auto;top:auto;width:100%;transform:none}
.mo .dk-txt .tag{margin-bottom:14px}
.mo .dk-txt .t32{font-size:24px}
.mo .dk-txt .b16{font-size:14px;margin-top:10px;color:rgba(255,255,255,.6)}
/* Stepping keeps Safari's bars out, so the phone fits the small viewport height, not the pinned height. */
.mo .dk-ph{position:relative;left:auto;top:auto;flex:none;margin-top:24px;--pw:clamp(150px,calc((min(var(--ph),100svh) - 300px) / 2.3),240px);transform:perspective(1600px) rotateY(-8deg) rotateX(3deg)}
.mo .dk-ph .pop{left:calc(var(--pw) * -.18);width:calc(var(--pw) * 1.12)}
.mo .dk-ph .pop.boxed{width:calc(var(--pw) * .92)}
.mo .dk-ph .pop.roomy{--pad:12px;width:calc(var(--pw) * 1.12)}
/* Short phones (an iPhone SE in Safari): less space above, and the room keeps only its title so the phone still fits. */
@media (max-height:640px){
  .mo .dk-step{padding-top:72px}
  .mo .dk-txt .b16{display:none}
  .mo .dk-ph{--pw:clamp(140px,calc((min(var(--ph),100svh) - 220px) / 2.3),240px)}
}