@font-face{font-family:DM;src:url('assets/dm-sans-400.ttf')}@font-face{font-family:DM;src:url('assets/dm-sans-600.ttf');font-weight:600}@font-face{font-family:Display;src:url('assets/bricolage-600.ttf');font-weight:600}
:root{--ink:#fff7e9;--ice:#aaf5fc;--lime:#c2ffbb}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#031b2c;color:var(--ink);font-family:DM,Arial,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid var(--lime);outline-offset:6px}button{border:0}a{color:inherit}.artboard{position:absolute;width:1600px;height:900px;overflow:hidden;transform-origin:0 0;isolation:isolate;background:#031b2c}.backdrop{position:absolute;inset:0;z-index:0}.shade{position:absolute;inset:0;background:linear-gradient(90deg,#001b30e8 0%,#001b3090 22%,transparent 55%),linear-gradient(0deg,#00142270,transparent 45%);z-index:1}.grain{position:absolute;inset:0;pointer-events:none;background:radial-gradient(#ffffff15 .6px,transparent .7px) 0 0/6px 6px;opacity:.15;z-index:2}.brand{position:absolute;left:64px;top:44px;display:flex;gap:10px;align-items:center;text-decoration:none;z-index:8;font:600 44px/1 Display,DM,sans-serif;letter-spacing:-1.2px}.brand img{width:53px;height:53px;object-fit:contain}.copy{position:absolute;left:64px;top:240px;width:490px;z-index:5}h1{font:600 66px/1.06 Display,DM,sans-serif;letter-spacing:-2.6px;margin:0;color:var(--ink)}h1 span{display:block;color:var(--ice)}.description{font-size:25px;line-height:1.4;letter-spacing:-.4px;max-width:395px;margin:75px 0 52px}.launch{display:flex;width:316px;height:76px;align-items:center;justify-content:center;background:var(--lime);color:#07251f;border:1px solid #e7ffe6;border-radius:23px;text-decoration:none;font-size:29px;font-weight:600;box-shadow:0 12px 40px #051d3a30;transition:transform .25s,box-shadow .25s,background .25s}.launch:hover,.launch.launching{background:#e4ffd0;box-shadow:0 0 40px #b5ffba65;transform:translateY(-3px)}.socials{display:flex;gap:27px;align-items:center;margin:30px 0 0 45px}.socials button{display:grid;place-items:center;width:44px;height:44px;background:transparent;border-radius:12px;padding:5px;transition:background .2s,transform .2s}.socials button:hover{background:#ffffff15;transform:translateY(-3px)}.socials svg{width:30px;height:30px}.map-layer{position:absolute;inset:0;z-index:3;pointer-events:none}.routes{width:100%;height:100%;overflow:visible}.route{fill:none;stroke:var(--ice);stroke-width:2;stroke-linecap:round;opacity:.65}.route-glow{fill:none;stroke:#63fcff;stroke-width:8;filter:blur(6px);opacity:.5}.route-dash{stroke-dasharray:2 16;stroke-width:3;animation:route-flow 18s linear infinite}.route-dot{fill:#edffff;filter:drop-shadow(0 0 6px #70fcff)}@keyframes route-flow{to{stroke-dashoffset:-180}}.pin{position:absolute;z-index:7;width:92px;height:122px;display:flex;justify-content:center;align-items:flex-start;background:none;padding:0;transform:translate(-50%,-100%);transition:filter .3s}.pin::after{content:'';position:absolute;top:76px;border-left:20px solid transparent;border-right:20px solid transparent;border-top:32px solid #f8ffff;z-index:-1}.portrait{display:block;background-repeat:no-repeat;flex-shrink:0;border-radius:50%;width:46px;height:46px;border:2px solid #f8ffff;box-shadow:0 3px 12px #0003}.portrait-maya{background-size:2107.5% 1166.25%;background-position:70.55% 13.01%}.portrait-leo{background-size:2408.57% 1332.85%;background-position:51.79% 38.12%}.portrait-nina{background-size:2278.37% 1260.8%;background-position:39.27% 66.94%}.pin .portrait{width:90px;height:90px;border:4px solid #fff9ed;transition:box-shadow .3s,transform .3s}.pin .beacon{position:absolute;top:111px;width:16px;height:16px;background:#eeffff;border:2px solid #c0ffff;border-radius:50%;box-shadow:0 0 24px #6afaff}.pin .beacon:before{content:'';position:absolute;inset:-8px;border:1px solid #b5ffff;border-radius:50%;animation:beacon 3.5s ease-out infinite}.pin.selected .portrait,.pin:hover .portrait{box-shadow:0 0 0 7px #a9f4ff24,0 0 35px #a9f4ff75;transform:translateY(-4px)}@keyframes beacon{0%{transform:scale(.4);opacity:.7}100%{transform:scale(2.5);opacity:0}}
.pin-maya{left:1115px;top:235px}.pin-leo{left:825px;top:422px}.pin-nina{left:630px;top:654px}
.place-card{position:absolute;background:#113048c2;backdrop-filter:blur(16px);border:2px solid #e9f8ffdb;border-radius:26px;overflow:hidden;padding:0;z-index:6;text-align:left;box-shadow:0 12px 40px #00132255;transition:transform .35s,box-shadow .35s,border-color .35s}.place-card:hover,.place-card.selected{transform:translateY(-5px);box-shadow:0 0 0 5px #adfaff15,0 18px 46px #00102077;border-color:#c2ffff}.shot{display:block;width:100%;background-repeat:no-repeat;height:calc(100% - 44px);position:relative}.deck .shot{background-size:498.8% 691.1%;background-position:45.25% 12.53%}.grill .shot{background-size:432.3% 634.69%;background-position:63.27% 82.69%}.place-label{height:44px;display:flex;align-items:center;gap:9px;padding:0 20px;font-size:23px;font-weight:600;white-space:nowrap;background:linear-gradient(90deg,#132c3e,#0d2a3bcc)}.place-label svg{width:20px;height:23px;flex-shrink:0}.deck{left:573px;top:91px;width:330px;height:174px}.grill{left:771px;top:614px;width:380px;height:202px}
.conversation{position:absolute;left:1230px;top:268px;width:347px;padding:46px 23px 22px;background:linear-gradient(145deg,#315970b5,#062e49d9);border:1.5px solid #a3e7ff91;border-radius:35px;backdrop-filter:blur(22px);box-shadow:inset 0 1px #fff2,0 20px 60px #00172550;z-index:8}.crew{display:flex;position:absolute;left:50%;top:-42px;transform:translateX(-50%)}.crew .portrait{width:69px;height:69px;border-width:3px;margin-left:-9px}.conversation h2{font:600 28px/1.12 Display,DM,sans-serif;letter-spacing:-.6px;margin:0 0 25px;white-space:nowrap}.messages{display:grid;gap:18px}.message{display:flex;gap:12px;align-items:flex-start;position:relative}.message .portrait{width:47px;height:47px;margin-top:5px}.message-content{flex:1;min-width:0}.speaker{font-size:19px;font-weight:600;line-height:1.1;margin-bottom:5px;display:flex;align-items:center;gap:8px}.bubble{font-size:18px;line-height:1.35;letter-spacing:-.25px;padding:9px 12px;background:#6f9bbd35;border-radius:20px;margin:0;transition:background .4s,box-shadow .4s}.message.active .bubble{background:#81b9cd55;box-shadow:inset 2px 0 #b1fcf5}.agent-face{width:47px;height:47px;border-radius:50%;background:linear-gradient(145deg,#48336d,#3b3166);border:2px solid white;display:grid;place-items:center;flex-shrink:0;margin-top:5px;font-size:30px;color:#d7c7ff}.agent-tag{font-size:13px;color:#1d2341;background:#d6d5ff;padding:4px 9px;border-radius:20px;white-space:nowrap}.agent .bubble{background:#7da0ce45}.map-button{display:flex;gap:7px;align-items:center;justify-content:center;background:#d0dcff;color:#082032;font-size:16px;white-space:nowrap;font-weight:600;border-radius:12px;padding:9px 10px;margin-top:11px;width:100%;transition:background .2s,box-shadow .2s}.map-button svg{width:17px;height:19px}.map-button:hover{background:#edfff9;box-shadow:0 0 24px #b6ffef35}.map-button.is-linking{background:#c2ffbb}.agent-face.is-linking{animation:agent-flash .7s ease-in-out 3}@keyframes agent-flash{50%{box-shadow:0 0 0 9px #c2e8ff25;transform:scale(1.07)}}.artboard.plan-linked .routes{filter:drop-shadow(0 0 8px #b4ffef)}.artboard.plan-linked .route{stroke:#c2ffbb;stroke-width:3}.intro-in{animation:arrive .8s both}@keyframes arrive{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}.place-card{animation:arrive .9s .15s both}.conversation{animation:arrive .9s .25s both}.ambient-glint{position:absolute;width:8px;height:8px;border-radius:50%;background:#c5ffff;box-shadow:0 0 18px #82fff7;animation:glint 7s infinite ease-in-out;opacity:.4;pointer-events:none}.glint-a{left:1078px;top:395px}.glint-b{left:790px;top:507px;animation-delay:-3s}.glint-c{left:596px;top:700px;animation-delay:-5s}@keyframes glint{0%,100%{opacity:.1;transform:scale(.5)}50%{opacity:.9;transform:scale(1)}}
/* 02 · Panoramic atlas: a quiet editorial column and a framed living world. */
[data-design="2"]{background:#071e2d}[data-design="2"] .backdrop{inset:30px 30px 30px 470px;border-radius:38px;background-position:52% center;box-shadow:0 0 0 1px #aeefff28}[data-design="2"] .shade{background:linear-gradient(90deg,#071e2d 26%,#071e2d00 58%),linear-gradient(0deg,#071e2d55,transparent 45%)}[data-design="2"] .brand{font-size:36px;left:55px;top:55px}[data-design="2"] .brand img{width:46px;height:46px}[data-design="2"] .copy{left:55px;top:230px;width:410px}[data-design="2"] h1{font-size:61px}[data-design="2"] .description{font-size:23px;margin:43px 0 40px;max-width:350px}[data-design="2"] .launch{width:294px;height:64px;font-size:24px;border-radius:18px}[data-design="2"] .socials{margin-left:0;gap:18px}[data-design="2"] .deck{left:515px;top:72px;width:330px;height:174px;rotate:-3deg}[data-design="2"] .grill{left:894px;top:650px;width:300px;height:174px;rotate:2deg}[data-design="2"] .conversation{left:1205px;top:280px;width:335px;border-radius:25px;background:linear-gradient(145deg,#082d43eb,#153e50c9)}[data-design="2"] .conversation h2{font-size:26px}[data-design="2"] .pin-maya{left:1055px;top:220px}[data-design="2"] .pin-leo{left:835px;top:435px}[data-design="2"] .pin-nina{left:620px;top:670px}
/* 03 · Open horizon: centered invitation with the conversation beneath the route. */
[data-design="3"] .brand{left:56px;top:38px;font-size:33px}[data-design="3"] .brand img{width:43px;height:43px}[data-design="3"] .shade{background:linear-gradient(180deg,#022137df,transparent 62%,#00233b99)}[data-design="3"] .copy{left:350px;top:80px;width:900px;text-align:center}[data-design="3"] h1{font-size:65px}[data-design="3"] h1 span{display:inline}[data-design="3"] .description{max-width:760px;margin:20px auto 0;font-size:23px}[data-design="3"] .launch{position:absolute;left:290px;top:658px;width:320px;height:62px;font-size:24px;border-radius:22px}[data-design="3"] .socials{position:absolute;top:730px;left:350px;margin:0;gap:18px}[data-design="3"] .deck{left:95px;top:290px;width:350px;height:190px;rotate:-3deg}[data-design="3"] .grill{left:1160px;top:334px;width:350px;height:190px;rotate:3deg}[data-design="3"] .pin-maya{left:1060px;top:359px}[data-design="3"] .pin-leo{left:790px;top:445px}[data-design="3"] .pin-nina{left:535px;top:500px}[data-design="3"] .conversation{left:220px;top:570px;width:1160px;padding:25px 28px 28px;border-radius:27px}[data-design="3"] .crew{left:auto;right:22px;top:-27px;transform:none}[data-design="3"] .crew .portrait{width:47px;height:47px}[data-design="3"] .conversation h2{font-size:26px;margin-bottom:19px}[data-design="3"] .messages{grid-template-columns:1fr 1.1fr 1fr 1.4fr;gap:15px}[data-design="3"] .message .portrait,[data-design="3"] .agent-face{width:37px;height:37px}[data-design="3"] .speaker{font-size:17px}[data-design="3"] .bubble{font-size:16px;padding:8px 10px}[data-design="3"] .message{gap:9px}[data-design="3"] .agent-tag{font-size:10px;padding:3px 6px}[data-design="3"] .map-button{font-size:13px;padding:7px;margin-top:8px}[data-design="3"] .agent-face{font-size:25px}
/* 04 · The conversation leads; the invitation lives on the opposite shore. */
[data-design="4"] .backdrop{background-position:40% center}[data-design="4"] .shade{background:linear-gradient(270deg,#001d30f0,transparent 70%),linear-gradient(0deg,#001b2f60,transparent 40%)}[data-design="4"] .brand{left:1070px;top:65px;font-size:38px}[data-design="4"] .brand img{width:46px;height:46px}[data-design="4"] .copy{left:1070px;top:253px;width:460px}[data-design="4"] h1{font-size:62px}[data-design="4"] .description{margin:48px 0 40px;font-size:24px}[data-design="4"] .socials{margin-left:0}[data-design="4"] .conversation{left:65px;top:276px;width:354px;background:linear-gradient(145deg,#254d60ba,#052c45d9)}[data-design="4"] .deck{left:465px;top:74px;width:350px;height:190px;rotate:-2deg}[data-design="4"] .grill{left:600px;top:645px;width:350px;height:190px;rotate:2deg}[data-design="4"] .pin-maya{left:941px;top:288px}[data-design="4"] .pin-leo{left:671px;top:444px}[data-design="4"] .pin-nina{left:481px;top:650px}
/* 05 · Night journal: warm invitation, pinned memories, deep blue map. */
[data-design="5"] .backdrop{inset:0 0 0 410px;background-position:56% center}[data-design="5"] .shade{background:linear-gradient(90deg,#eee9d900 24%,#051f3188 30%,transparent 65%)}[data-design="5"]:before{content:'';position:absolute;inset:0 auto 0 0;width:445px;background:#f3efdf;z-index:-1;border-right:1px solid #fff8}[data-design="5"] .brand{left:42px;top:48px;font-size:34px;color:#193543}[data-design="5"] .brand img{width:44px;height:44px}[data-design="5"] .copy{left:42px;top:230px;width:375px;color:#183845}[data-design="5"] h1{font-size:57px;color:#123642;letter-spacing:-2px}[data-design="5"] h1 span{color:#19747c}[data-design="5"] .description{font-size:23px;margin:43px 0 42px;max-width:335px}[data-design="5"] .launch{width:306px;height:65px;background:#143e4b;color:#e8ffec;border-color:#143e4b;font-size:25px;border-radius:17px}[data-design="5"] .launch:hover{background:#236473}[data-design="5"] .socials{margin-left:0;gap:21px}[data-design="5"] .deck{left:489px;top:64px;width:340px;height:182px;rotate:-4deg;border:7px solid #f3efdf;border-radius:8px}[data-design="5"] .grill{left:829px;top:654px;width:320px;height:176px;rotate:3deg;border:7px solid #f3efdf;border-radius:8px}[data-design="5"] .place-label{background:#f3efdf;color:#193b4a;padding:0 9px;font-size:21px}[data-design="5"] .conversation{left:1223px;top:276px;width:337px;border-radius:20px;background:#062d42cc}[data-design="5"] .conversation h2{font-size:26px}[data-design="5"] .pin-maya{left:1092px;top:229px}[data-design="5"] .pin-leo{left:864px;top:430px}[data-design="5"] .pin-nina{left:622px;top:653px}
/* Compact screens keep every part visible in a single, scaled composition. */
body.portrait .artboard{width:800px;height:1360px}body.portrait .artboard:before{display:none}body.portrait .backdrop{inset:0;border-radius:0;background-position:52% center}body.portrait .shade{background:linear-gradient(180deg,#011d32ed,transparent 73%),linear-gradient(0deg,#001c2ed9,transparent 50%)}body.portrait .brand{left:42px;top:32px;font-size:36px;color:var(--ink)}body.portrait .brand img{width:46px;height:46px}body.portrait .copy{left:42px;top:132px;width:716px;text-align:left;color:var(--ink)}body.portrait h1{font-size:69px;line-height:1.02;letter-spacing:-2px;color:var(--ink)}body.portrait h1 span{display:block;color:var(--ice)}body.portrait .description{font-size:26px;max-width:680px;margin:22px 0 26px;line-height:1.35}body.portrait .launch{position:static;width:275px;height:64px;font-size:25px;background:var(--lime);color:#0b302e;border-radius:20px;border-color:#e7ffe6}body.portrait .socials{position:absolute;left:400px;top:300px;margin:0;gap:23px}body.portrait .socials button{width:52px;height:52px}body.portrait .socials svg{width:35px;height:35px}body.portrait .deck{left:36px;top:542px;width:290px;height:162px;rotate:-3deg;border:2px solid #d9ffff;border-radius:23px}body.portrait .grill{left:465px;top:656px;width:295px;height:165px;rotate:3deg;border:2px solid #d9ffff;border-radius:23px}body.portrait .place-label{height:44px;font-size:22px;background:#0c2b3bcf;color:var(--ink);padding:0 14px}body.portrait .pin-maya{left:644px;top:575px}body.portrait .pin-leo{left:412px;top:680px}body.portrait .pin-nina{left:175px;top:858px}body.portrait .pin{scale:.85;transform-origin:bottom center}body.portrait .conversation{left:42px;top:938px;width:716px;padding:28px 25px 24px;border-radius:27px;background:#10384edc}body.portrait .conversation h2{font-size:28px;margin:0 0 24px}body.portrait .crew{left:auto;right:24px;top:-27px;transform:none}body.portrait .crew .portrait{width:53px;height:53px}body.portrait .messages{grid-template-columns:1fr 1fr;gap:23px 22px}body.portrait .message{gap:10px}body.portrait .message .portrait,body.portrait .agent-face{width:43px;height:43px}body.portrait .speaker{font-size:21px}body.portrait .bubble{font-size:21px;padding:8px 11px}body.portrait .agent-tag{font-size:13px}body.portrait .agent-face{font-size:28px}body.portrait .map-button{font-size:17px;padding:9px;margin-top:9px}body.portrait .ambient-glint{display:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}dialog{color:#eef9fc;background:#0b293d;border:1px solid #82c3ce70;border-radius:24px;width:min(390px,90vw);padding:32px;font-size:16px;line-height:1.6}dialog::backdrop{background:#001525aa;backdrop-filter:blur(8px)}dialog h2{font:600 26px Display;margin:0 0 12px}dialog button{background:#c4ffc0;color:#12343b;border-radius:12px;padding:10px 20px;margin-top:10px}.motion-reduced *{animation:none!important;transition:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
/* Leave a clear lane between the wide conversation and the launch action. */
body:not(.portrait) [data-design="3"] .conversation{top:530px}
body:not(.portrait) [data-design="3"] .launch{top:706px}
body:not(.portrait) [data-design="3"] .socials{top:778px}
body:not(.portrait) [data-design="3"] .socials button{width:36px;height:36px}
body.portrait .socials{top:263px}

/* Large embedded artwork uses direct image resources, not custom properties. */
.backdrop img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.portrait{background-image:url('assets/portraits.png')}
[data-design="2"] .backdrop img{object-position:52% center}
[data-design="4"] .backdrop img{object-position:40% center}
[data-design="5"] .backdrop img{object-position:56% center}
body.portrait .backdrop img{object-position:52% center}

/* Final reference composition: precise spacing and independent high-detail assets. */
.final-design body{background:#031d2d}
.final-design .brand{gap:11px;font-size:43px;letter-spacing:-1.25px}
.final-design h1{font-size:64px;letter-spacing:-2.3px;text-wrap:balance}
.final-design .description{max-width:410px;margin-top:42px;margin-bottom:36px;line-height:1.43}
.final-design .socials{margin-left:65px}
.final-design .conversation{left:1196px;width:340px;padding:47px 23px 24px;background:linear-gradient(145deg,#31576bbd,#072c43e8);border-color:#a5e9f793;box-shadow:inset 0 1px #f3ffff1f,0 22px 58px #0014254f}
.final-design .conversation h2{font-size:27px;letter-spacing:-.55px;margin-bottom:25px}
.final-design .speaker{line-height:1.2}
.final-design .messages{gap:19px}
.final-design .bubble{line-height:1.38}
.final-design .portrait{background-size:300% 100%;background-origin:padding-box}
.final-design .portrait-maya{background-position:0% center}
.final-design .portrait-leo{background-position:50% center}
.final-design .portrait-nina{background-position:100% center}
.final-design .shot{background:none;overflow:hidden}
.shot-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.015);transition:transform .7s cubic-bezier(.2,.65,.3,1)}
.final-design .place-card{--tilt-x:0deg;--tilt-y:0deg;transform:perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));box-shadow:0 15px 45px #00152566,inset 0 1px #ffffff44;transition:transform .3s ease-out,box-shadow .3s,border-color .3s}
.final-design .place-card:hover,.final-design .place-card.selected{transform:perspective(900px) translateY(-4px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));box-shadow:0 0 0 4px #b0ffff18,0 20px 45px #00152577}
.place-card:hover .shot-image{transform:scale(1.065)}
.place-card .shot:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 30%,#f1ffff24 47%,transparent 64%);transform:translateX(-140%)}
.place-card.selected .shot:after{animation:card-light 1.4s ease-out both}
@keyframes card-light{to{transform:translateX(140%)}}
.final-design .launch{position:relative;overflow:hidden;isolation:isolate;box-shadow:inset 0 1px #ffffff9c,0 12px 36px #001b243a}
.final-design .launch:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent,#ffffff6b,transparent);width:45%;transform:translateX(-240%);animation:launch-light 9s ease-in-out 2s infinite}
@keyframes launch-light{0%,65%{transform:translateX(-240%)}85%,100%{transform:translateX(350%)}}
.route-trace{fill:none;stroke:#d5ffe3;stroke-width:3;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;opacity:0;filter:drop-shadow(0 0 5px #c3fff3)}
.plan-linked .route-trace{opacity:1;animation:trace-route 1.1s ease-in-out forwards}
@keyframes trace-route{to{stroke-dashoffset:0}}
.final-design .message.active .portrait{box-shadow:0 0 0 4px #a7f1ff16,0 0 18px #abf4ff35;transition:box-shadow .4s}
.final-design .pin.selected .beacon:after{content:'';position:absolute;inset:-3px;border:1px solid #ddffff;border-radius:50%;animation:beacon 2.7s ease-out infinite .4s}
.final-design .agent-face{position:relative;overflow:visible;transition:background .3s,box-shadow .3s}
.agent-symbol{display:block;transition:opacity .15s ease .3s}
.agent-face.is-linking .agent-symbol{opacity:0;transition-delay:0s}
.agent-wave{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:2px;opacity:0;transition:opacity .25s;pointer-events:none}
.agent-wave i{display:block;width:2px;height:var(--h);background:linear-gradient(#e4caff,#b4fcff);border-radius:2px}
.agent-face.is-linking .agent-wave{opacity:1;transition-delay:.16s}
.agent-face.is-linking .agent-wave i{animation:voice-signal .55s ease-in-out infinite alternate;animation-delay:var(--delay)}
@keyframes voice-signal{from{transform:scaleY(.3)}to{transform:scaleY(1)}}
.final-design .agent-face.is-linking{animation:none;box-shadow:0 0 22px #c5baff38}
.final-design .route-glow{opacity:.4}
.final-design .grain{opacity:.07}
body.portrait .artboard .brand{font-size:36px}
body.portrait .artboard .copy h1{font-size:69px}
body.portrait .artboard .description{font-size:26px;max-width:680px;margin:22px 0 26px;line-height:1.35}
body.portrait .artboard .socials{left:400px;top:263px;margin:0}
body.portrait .artboard .conversation{left:42px;top:938px;width:716px;padding:28px 25px 24px}
body.portrait .artboard .conversation h2{font-size:28px;margin-bottom:24px}
body.portrait .artboard .messages{gap:23px 22px}
@media(prefers-reduced-motion:reduce){.final-design .place-card{transform:none!important}.shot-image{transform:none!important}.route-trace{animation:none!important;stroke-dashoffset:0}}
.final-design .agent-face.is-linking{background:transparent;border-color:transparent;box-shadow:none}

/* Waitlist v1.1: retain the approved homepage and add a native-sized signup dialog. */
.final-design .launch{font-family:DM,Arial,sans-serif;font-size:26px;line-height:1.2;cursor:pointer}
.waitlist-dialog{width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow-y:auto;padding:34px 32px 27px;border-radius:26px;background:linear-gradient(145deg,#163b4e,#082637);border:1px solid #9fe7e75e;box-shadow:0 30px 100px #00101ab8;color:#f7f6e9}
.waitlist-dialog::backdrop{background:#021625c9;backdrop-filter:blur(9px)}
.waitlist-dialog[open]{animation:waitlist-enter .28s ease-out}
.waitlist-dialog .waitlist-logo{display:block;width:42px;height:42px;margin-bottom:20px}
.waitlist-dialog h2{font:600 32px/1.08 Display,DM,sans-serif;letter-spacing:-.8px;max-width:330px;margin:0 0 14px}
.waitlist-dialog p{font-size:15px;line-height:1.55;margin:0 0 22px;color:#bcd3df}
.waitlist-dialog .waitlist-close{position:absolute;right:14px;top:10px;width:36px;height:36px;display:grid;place-items:center;margin:0;padding:0;background:transparent;color:#d5edf1;border-radius:50%;font:28px/1 DM}
.waitlist-close:hover{background:#ffffff14!important}
.email-label{display:block;font-size:14px;font-weight:600;margin-bottom:8px}
#waitlist-email{display:block;width:100%;min-height:52px;font:16px DM,sans-serif;background:#061f30;color:#f5ffff;border:1px solid #9ec8d35c;border-radius:13px;padding:13px 14px;outline-offset:3px}
#waitlist-email:focus-visible{outline:2px solid #b8f5ec}
#waitlist-email::placeholder{color:#93acb7}
.waitlist-consent{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.5;color:#c5dce2;margin:17px 0 20px;cursor:pointer}
.waitlist-consent input{margin:2px 0 0;width:17px;height:17px;flex-shrink:0;accent-color:#b8f8b8}
.waitlist-dialog .waitlist-submit,.waitlist-dialog .waitlist-done{display:flex;align-items:center;justify-content:center;gap:16px;width:100%;min-height:52px;border-radius:14px;background:#c2ffbb;color:#0b302e;font:600 17px DM;margin:0;padding:13px 20px;border:1px solid #e1ffe0;cursor:pointer}
.waitlist-dialog button[disabled]{opacity:.65;cursor:wait}
.waitlist-dialog .waitlist-privacy{font-size:12px;line-height:1.5;color:#a2bdc8;margin:13px 0 0}
.waitlist-dialog .waitlist-status{margin:16px 0 0;font-size:14px;color:#c2ffbb}
.waitlist-dialog .waitlist-status:empty{display:none}
.waitlist-dialog .waitlist-status.error{color:#ffcfba}
.waitlist-dialog .waitlist-done{margin-top:22px}
.waitlist-dialog [hidden]{display:none!important}
.signup-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
@keyframes waitlist-enter{from{opacity:0;translate:0 9px}to{opacity:1;translate:0 0}}
@media(max-width:480px){.waitlist-dialog{padding:28px 23px 24px}.waitlist-dialog h2{font-size:29px}.waitlist-dialog p{font-size:14px}}
@media(prefers-reduced-motion:reduce){.waitlist-dialog[open]{animation:none}}

#waitlist-name{display:block;width:100%;min-height:48px;font:16px DM,sans-serif;background:#061f30;color:#f5ffff;border:1px solid #9ec8d35c;border-radius:13px;padding:12px 14px;margin-bottom:17px}#waitlist-name:focus-visible{outline:2px solid #b8f5ec;outline-offset:3px}.optional-label{font-weight:400;color:#a2bdc8}

/* Same visual sequence on phones, with larger tap areas and a taller harbor scene. */
html.final-design body:not(.portrait) .copy h1{font-size:62px}
body.portrait .artboard .copy h1{font-size:65px;line-height:1.06}
body.portrait .artboard .launch{height:92px;width:310px;font-size:30px}
body.portrait .artboard .socials{left:375px;top:251px;gap:15px}
body.portrait .artboard .socials button{width:88px;height:88px}
body.portrait .artboard .socials svg{width:38px;height:38px}
body.portrait .artboard .deck{top:calc(542px + var(--mobile-extra,0px)*.15)}
body.portrait .artboard .grill{top:calc(656px + var(--mobile-extra,0px)*.65)}
body.portrait .artboard .pin-maya{top:calc(575px + var(--mobile-extra,0px)*.18)}
body.portrait .artboard .pin-leo{top:calc(680px + var(--mobile-extra,0px)*.45)}
body.portrait .artboard .pin-nina{top:calc(858px + var(--mobile-extra,0px)*.75)}
body.portrait .artboard .conversation{top:calc(938px + var(--mobile-extra,0px));padding-bottom:24px}

/* Social row follows the primary action on every screen. */
html.final-design .artboard .socials{position:static;display:flex;justify-content:center;align-items:center;width:316px;margin:22px 0 0;gap:15px}
html.final-design .artboard .socials button{width:46px;height:46px;padding:12px;border:1px solid #bddde43d;border-radius:50%;background:#07263885;color:#ecf7f5;backdrop-filter:blur(8px);transition:background .2s,border-color .2s,transform .2s}
html.final-design .artboard .socials svg{display:block;width:100%;height:100%}
html.final-design .artboard .socials button:hover{background:#255269c9;border-color:#b7fff3b0;transform:translateY(-2px)}
/* Portrait keeps the desktop hierarchy: headline, CTA, socials, connected places, conversation. */
html.final-design body.portrait .artboard .copy h1{font-size:61px;line-height:1.07;letter-spacing:-1.7px}
html.final-design body.portrait .artboard .description{font-size:26px;line-height:1.38;max-width:700px;margin:18px 0 26px}
html.final-design body.portrait .artboard .launch{height:88px;width:310px;font-size:27px;border-radius:22px}
html.final-design body.portrait .artboard .socials{position:static;width:310px;margin:20px 0 0;gap:16px}
html.final-design body.portrait .artboard .socials button{width:88px;height:88px;padding:26px;border-width:1.5px}
html.final-design body.portrait .artboard .deck{top:calc(610px + var(--mobile-extra,0px)*.15);width:300px;height:168px;rotate:0deg}
html.final-design body.portrait .artboard .grill{left:464px;top:calc(724px + var(--mobile-extra,0px)*.65);width:300px;height:168px;rotate:0deg}
html.final-design body.portrait .artboard .pin-maya{top:calc(620px + var(--mobile-extra,0px)*.18)}
html.final-design body.portrait .artboard .pin-leo{top:calc(730px + var(--mobile-extra,0px)*.45)}
html.final-design body.portrait .artboard .pin-nina{top:calc(900px + var(--mobile-extra,0px)*.75)}
html.final-design body.portrait .artboard .conversation{background:linear-gradient(145deg,#21475bd9,#082a3ee8);border-color:#a5e9f780;box-shadow:inset 0 1px #ffffff18,0 18px 42px #00172542}
html.final-design body.portrait .artboard .messages{gap:22px}

/* Reveal the restaurant above the mobile conversation and attach its pin to the table. */
html.final-design body.portrait .artboard .backdrop img{height:calc(100% - 240px);object-position:52% center;mask-image:linear-gradient(#000 0%,#000 86%,transparent 100%)}
html.final-design body.portrait .artboard .pin-nina{left:var(--restaurant-x);top:var(--restaurant-y)}

/* Pearl and ice blue echo the harbor lighting and opal brand mark. */
html.final-design .artboard .launch,html.final-design body.portrait .artboard .launch{background:linear-gradient(115deg,#e1edff 0%,#cceafb 48%,#aeeaf3 100%);color:#092d43;border-color:#f2fcffb3;box-shadow:inset 0 1px 0 #ffffffcf,0 10px 30px #031b3545;font-weight:600}
html.final-design .artboard .launch:hover,html.final-design .artboard .launch.launching,html.final-design body.portrait .artboard .launch:hover,html.final-design body.portrait .artboard .launch.launching{background:linear-gradient(115deg,#f0f0ff,#def6ff 50%,#bdf5fc);box-shadow:inset 0 1px #ffffff,0 0 30px #a9e7fa55,0 10px 26px #031b3545}
.waitlist-dialog .waitlist-submit,.waitlist-dialog .waitlist-done{background:linear-gradient(115deg,#e1edff,#aeeaf3);color:#092d43;border-color:#edfaff}
.waitlist-dialog .waitlist-submit:hover,.waitlist-dialog .waitlist-done:hover{background:linear-gradient(115deg,#f0f0ff,#bdf5fc)}

/* Smaller mobile cards keep the harbor and route in view; desktop is unchanged. */
html.final-design body.portrait .artboard .deck{width:246px;height:142px;left:52px}
html.final-design body.portrait .artboard .grill{width:246px;height:142px;left:502px}
html.final-design body.portrait .artboard .place-label{font-size:21px;height:40px;padding:0 12px;gap:7px}
html.final-design body.portrait .artboard .shot{height:calc(100% - 40px)}
html.final-design body.portrait .artboard .place-label svg{width:17px;height:21px}
/* Translucent glass retains contrast while showing the harbor through the panel. */
html.final-design .artboard .conversation,
html.final-design body.portrait .artboard .conversation{background:linear-gradient(145deg,#21475b66,#06263885);backdrop-filter:blur(14px);border-color:#b4e8f363;box-shadow:inset 0 1px #ffffff12,0 16px 40px #00172536}
html.final-design .artboard .bubble{background:#729fb91f;transition:background .35s,opacity .35s,box-shadow .35s}
html.final-design .artboard .message.active .bubble{background:#8dc9de30;box-shadow:inset 2px 0 #b1fcf5b3}
html.final-design .artboard .agent .bubble{background:#9ca5d426}
.typing-line{position:relative;display:block}
.typing-measure{visibility:hidden;display:block;pointer-events:none}
.typing-ink{position:absolute;inset:9px 12px;display:block}
.agent-copy .typing-ink{inset:0}
.typing-dots{position:absolute;left:12px;top:50%;display:none;gap:5px;transform:translateY(-50%)}
.agent-copy .typing-dots{left:0}
.typing-dots i{width:5px;height:5px;border-radius:50%;background:#c2f1f6;animation:thinking-dot .9s ease-in-out infinite}
.typing-dots i:nth-child(2){animation-delay:.15s}.typing-dots i:nth-child(3){animation-delay:.3s}
.is-thinking .typing-dots{display:flex}
.is-typing .typing-ink:after{content:'';display:inline-block;width:2px;height:.85em;background:#bff8ff;margin-left:2px;vertical-align:-.05em;animation:typing-caret .7s steps(1) infinite}
.message.awaiting-turn .bubble{opacity:0}.message.awaiting-turn .speaker{opacity:.55}
body.portrait .typing-line:not(.agent-copy) .typing-ink{inset:8px 11px}
.artboard[data-speaker="0"] .route-leg[data-person="1"] .route-glow,
.artboard[data-speaker="1"] .route-leg[data-person="1"] .route-glow,
.artboard[data-speaker="2"] .route-leg[data-person="2"] .route-glow{opacity:.85;stroke-width:10px}
.artboard.plan-linked .pin .portrait{box-shadow:0 0 0 5px #a9f4ff24,0 0 24px #a9f4ff55}
@keyframes thinking-dot{0%,80%,100%{opacity:.3;translate:0 0}40%{opacity:1;translate:0 -3px}}
@keyframes typing-caret{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.typing-dots i,.typing-ink:after{animation:none!important}.typing-ink:after{display:none}}

/* Local concept: place recommendations live inside their author's message. */
html.final-design .artboard .conversation{left:1158px;top:154px;width:398px;padding:45px 24px 23px;border-radius:32px;background:linear-gradient(145deg,#21475b70,#062638a0)}
html.final-design .artboard .messages{gap:18px}
html.final-design .artboard .speaker{font-size:18px}
html.final-design .artboard .bubble{font-size:17px;line-height:1.35}
html.final-design .artboard .conversation .place-card{position:relative;display:block;left:auto;top:auto;right:auto;bottom:auto;width:100%;height:132px;rotate:0deg;margin:10px 0 0;border-radius:16px;border:1px solid #c8f5ff60;animation:none;box-shadow:0 8px 25px #001b3045;transform:none;opacity:0;translate:0 10px;transition:opacity .65s,translate .65s,border-color .3s,box-shadow .3s;pointer-events:none}
html.final-design .artboard .conversation .place-card .shot{height:100px}
html.final-design .artboard .conversation .place-card .shot-image{width:100%;height:100%;object-fit:cover;transform:none}
html.final-design .artboard .conversation .place-label{height:31px;padding:0 11px;gap:6px;font-size:14px;background:#0c2939b8}
html.final-design .artboard .conversation .place-label svg{width:12px;height:15px}
html.final-design .artboard .conversation .photo-ready .place-card{opacity:1;translate:0 0;pointer-events:auto}
html.final-design .artboard .conversation .place-card.selected{border-color:#baf7ff;box-shadow:0 0 18px #95eeff20,0 8px 25px #001b3045}
html.final-design .artboard .conversation .place-card:hover{transform:translateY(-2px);border-color:#efffff}
html.final-design .artboard .conversation .photo-ready .place-card .shot-image{animation:photo-settle 1s ease-out both}
@keyframes photo-settle{from{transform:scale(1.055)}to{transform:scale(1)}}
html.final-design .artboard .conversation .crew .portrait{width:61px;height:61px}
html.final-design .artboard .conversation .crew{top:-37px}
html.final-design .artboard .conversation .agent-tag{font-size:12px}
html.final-design .artboard .conversation .map-button{font-size:15px;padding:9px 7px}
/* Same story on a phone: two compact photo messages within the shared panel. */
html.final-design body.portrait .artboard .copy{top:118px}
html.final-design body.portrait .artboard .copy h1{font-size:58px}
html.final-design body.portrait .artboard .description{font-size:25px;margin:15px 0 23px}
html.final-design body.portrait .artboard .launch{height:78px}
html.final-design body.portrait .artboard .socials{margin-top:14px}
html.final-design body.portrait .artboard .socials button{width:70px;height:70px;padding:20px}
html.final-design body.portrait .artboard .pin{scale:.72}
html.final-design body.portrait .artboard .pin-maya{left:645px;top:calc(575px + var(--mobile-extra,0px)*.15)}
html.final-design body.portrait .artboard .pin-leo{left:410px;top:calc(645px + var(--mobile-extra,0px)*.18)}
html.final-design body.portrait .artboard .pin-nina{left:155px;top:calc(660px + var(--mobile-extra,0px)*.18)}
html.final-design body.portrait .artboard .conversation{left:42px;top:calc(738px + var(--mobile-extra,0px)*.3);width:716px;padding:30px 25px 22px;border-radius:28px}
html.final-design body.portrait .artboard .messages{grid-template-columns:1fr 1fr;gap:20px 22px}
html.final-design body.portrait .artboard .message:first-child,html.final-design body.portrait .artboard .message.agent{grid-column:1/-1}
html.final-design body.portrait .artboard .message:first-child .bubble{max-width:430px}
html.final-design body.portrait .artboard .message.agent .bubble{display:flex;align-items:center;gap:17px}
html.final-design body.portrait .artboard .agent-copy{flex:1}
html.final-design body.portrait .artboard .map-button{width:auto;flex-shrink:0;margin:0;font-size:18px;padding:12px}
html.final-design body.portrait .artboard .speaker{font-size:23px}
html.final-design body.portrait .artboard .bubble{font-size:22px}
html.final-design body.portrait .artboard .conversation .place-card{height:160px;margin-top:10px;border-radius:17px}
html.final-design body.portrait .artboard .conversation .place-card .shot{height:120px}
html.final-design body.portrait .artboard .conversation .place-label{height:39px;font-size:19px}
html.final-design body.portrait .artboard .conversation .place-label svg{width:16px;height:19px}
html.final-design body.portrait .artboard .conversation .crew{top:-27px;left:auto;right:24px;transform:none}
html.final-design body.portrait .artboard .conversation .crew .portrait{width:49px;height:49px}
@media(prefers-reduced-motion:reduce){html.final-design .artboard .conversation .place-card{opacity:1;translate:none;transition:none;pointer-events:auto}html.final-design .artboard .conversation .shot-image{animation:none!important}}
html.final-design body.portrait .artboard .conversation .place-card{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:100%;rotate:0deg}
html.final-design body.portrait .artboard .message[data-person="1"] .bubble,
html.final-design body.portrait .artboard .message[data-person="2"] .bubble{min-height:76px}

/* Mobile-only centered introduction; brand stays left on every screen. */
html.final-design body.portrait .artboard .brand{left:42px;transform:none;justify-content:flex-start;white-space:nowrap}
html.final-design body.portrait .artboard .copy{text-align:center}
html.final-design body.portrait .artboard .description{margin-left:auto;margin-right:auto}
html.final-design body.portrait .artboard .launch{margin-left:auto;margin-right:auto}
html.final-design body.portrait .artboard .socials{margin-left:auto;margin-right:auto;justify-content:center}