/* A self-contained, scripted preview of the production chat and outfit picker. */

.conversation-screen{position:absolute;left:7.1835%;top:3.5436%;width:85.7752%;height:92.9128%;border-radius:16.8cqw;overflow:hidden;background:#fffdfb;display:flex;flex-direction:column;clip-path:url(#iphone-screen-clip)}
.conversation-status{height:13cqw;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 7cqw;font-size:3.6cqw;font-weight:600;position:relative;background:#fff9f4}
.conversation-island{position:absolute;left:50%;top:3.2cqw;transform:translateX(-50%);width:26cqw;height:7.4cqw;background:#080807;border-radius:9cqw;box-shadow:inset 0 0 1px 1px #ffffff15}
.conversation-island::after{content:"";position:absolute;right:3cqw;top:2.6cqw;width:2.3cqw;height:2.3cqw;border-radius:50%;background:radial-gradient(circle at 30% 30%,#22304f,#090a0d 70%)}
.conversation-header{height:17cqw;display:flex;align-items:center;justify-content:space-between;padding:0 4cqw 2cqw;gap:2cqw;flex-shrink:0;background:linear-gradient(#fff9f4,#fbf4ef);border-bottom:1px solid #f2e4da}
.conversation-back{width:10cqw;height:10cqw;display:grid;place-items:center;background:#fffcf9;border-radius:50%;box-shadow:0 2px 4px #b3845a0d}
.conversation-person{display:flex;align-items:center;gap:2cqw}.conversation-person img{width:9cqw;height:9cqw;border-radius:50%;object-fit:cover;object-position:50% 24%}
.conversation-person strong{font-family:Georgia,serif;font-style:italic;font-size:5cqw;font-weight:600}
.conversation-balance{display:flex;align-items:center;gap:1.6cqw;font-weight:600;font-size:3.5cqw;border:1px solid #fff;background:#fff9f5;padding:2.4cqw 2.8cqw;border-radius:10cqw}
.conversation-coin{display:block;width:5.8cqw;height:5.8cqw;object-fit:contain;flex-shrink:0}
.conversation-feed{position:relative;flex:1;min-height:0;overflow:hidden;mask-image:linear-gradient(transparent,#000 3%,#000 100%)}
.conversation-messages{display:flex;flex-direction:column;justify-content:flex-end;min-height:100%;padding:4cqw 3.4cqw 4cqw;will-change:transform}
.conversation-date{font-size:2.8cqw;color:#9b9189;text-align:center;margin:0 0 6cqw}
.demo-row{display:flex;gap:1.8cqw;align-items:flex-end;margin:3cqw 0;transform-origin:10% 100%}
.demo-row[hidden]{display:none}.demo-row p{padding:2.6cqw 3.5cqw;margin:0;max-width:73%;width:fit-content;border-radius:5cqw;background:#f0f0f4;font-size:3.75cqw;line-height:1.32;color:#29201d}
.demo-avatar{width:7.6cqw;height:7.6cqw;object-fit:cover;object-position:50% 24%;border-radius:50%;flex-shrink:0;box-shadow:0 2px 5px #30140c0b}
.demo-user{justify-content:flex-end;transform-origin:95% 100%}.demo-user p{background:#ff810a;color:#fff;border-bottom-right-radius:1.3cqw;max-width:79%}.demo-duple p{border-bottom-left-radius:1.3cqw}
.demo-media{width:59cqw;aspect-ratio:480/680;overflow:hidden;border-radius:5.5cqw;background:#d9c9bc;box-shadow:0 1px 4px #4822090a}
.demo-media video,.demo-media>img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.demo-typing-dots{display:flex;width:15cqw;height:10cqw;align-items:center;justify-content:center;gap:1cqw;background:#f0f0f4;border-radius:5cqw}
/* PWA globals.css: typing, 1.1s, with 120/240ms delays. */
.demo-typing-dots i{width:1.55cqw;height:1.55cqw;border-radius:50%;background:#867567;animation:conversation-typing 1.1s infinite ease-in-out}
.demo-typing-dots i:nth-child(2){animation-delay:.12s}.demo-typing-dots i:nth-child(3){animation-delay:.24s}
@keyframes conversation-typing{0%,60%,100%{transform:translateY(0);opacity:.42}30%{transform:translateY(-4px);opacity:1}}
/* Production PWA composer, scaled from its 393px viewport into the phone. */
.conversation-composer{--cu:.21826cqw;display:flex;align-items:flex-end;gap:calc(8 * var(--cu));padding:calc(12 * var(--cu)) calc(16 * var(--cu)) calc(44 * var(--cu));flex-shrink:0;position:relative;z-index:1;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.conversation-input{display:grid;min-width:0;min-height:calc(60 * var(--cu));flex:1;grid-template-columns:calc(44 * var(--cu)) minmax(0,1fr);align-items:end;gap:calc(8 * var(--cu));padding:calc(8 * var(--cu)) calc(10 * var(--cu));border:calc(1.2 * var(--cu)) solid rgba(255,255,255,.96);border-radius:calc(28 * var(--cu));background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(255,250,244,.68) 58%,rgba(255,176,112,.2));box-shadow:inset 0 calc(1 * var(--cu)) rgba(255,255,255,.92),0 calc(8 * var(--cu)) calc(18 * var(--cu)) rgba(87,40,12,.18);backdrop-filter:blur(calc(22 * var(--cu))) saturate(1.12);-webkit-backdrop-filter:blur(calc(22 * var(--cu))) saturate(1.12);transition:grid-template-columns 280ms cubic-bezier(.25,.8,.25,1)}
.conversation-input-text{grid-column:2;grid-row:1;min-width:0;min-height:calc(44 * var(--cu));padding:calc(11 * var(--cu)) 0;color:rgba(42,18,0,.44);font-size:calc(16 * var(--cu));line-height:1.38;text-align:left;overflow-wrap:anywhere}
.conversation-input-text.is-writing{color:#2a1200}
.conversation-plus,.conversation-send,.conversation-mic{display:grid;width:calc(44 * var(--cu));height:calc(44 * var(--cu));place-items:center;border:calc(1 * var(--cu)) solid rgba(255,255,255,.96);border-radius:50%;flex-shrink:0}
.conversation-plus{grid-column:1;grid-row:1;color:#2a1200;background:rgba(255,224,201,.5);box-shadow:inset 0 calc(1 * var(--cu)) rgba(255,255,255,.82);font-size:calc(21.44 * var(--cu));line-height:1}
.conversation-send,.conversation-mic{color:#ff7518;background:radial-gradient(circle at 32% 24%,rgba(255,255,255,.84),rgba(255,255,255,.44) 48%,rgba(255,176,112,.22))}
.conversation-send{display:none;grid-column:3;grid-row:1;font-size:calc(18.88 * var(--cu));font-weight:850;box-shadow:inset 0 calc(1 * var(--cu)) rgba(255,255,255,.88),0 calc(1 * var(--cu)) calc(5 * var(--cu)) rgba(255,117,24,.18)}
.conversation-mic{margin:calc(8 * var(--cu)) calc(10 * var(--cu)) calc(8 * var(--cu)) 0;box-shadow:inset 0 calc(1 * var(--cu)) rgba(255,255,255,.9),0 calc(12 * var(--cu)) calc(28 * var(--cu)) rgba(73,31,0,.1);backdrop-filter:blur(calc(22 * var(--cu))) saturate(1.12);-webkit-backdrop-filter:blur(calc(22 * var(--cu))) saturate(1.12)}
.conversation-mic svg{width:calc(22 * var(--cu));height:calc(22 * var(--cu));overflow:visible}
.conversation-mic rect{fill:currentColor}
.conversation-mic path{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.conversation-composer:has(.is-writing) .conversation-input{grid-template-columns:calc(44 * var(--cu)) minmax(0,1fr) calc(44 * var(--cu))}
.conversation-composer:has(.is-writing) .conversation-send{display:grid}
.conversation-composer:has(.is-writing) .conversation-mic{display:none}
.conversation-home-indicator{position:absolute;z-index:4;width:30cqw;height:1.1cqw;bottom:2cqw;left:50%;transform:translateX(-50%);background:#342721;border-radius:2cqw}
.conversation-section.is-paused .demo-typing-dots i{animation-play-state:paused}
.conversation-noscript{text-align:center;color:#785e4c;max-width:520px;margin:30px auto;font-size:15px;line-height:1.5}
@media(min-width:1400px){.conversation-inner{max-width:1150px;gap:80px}}
@media(prefers-reduced-transparency:reduce){}

/* Latest iOS ComposerPlusMenuButton / OutfitPickerTray, in phone coordinates. */
.conversation-detail{font-size:15px;line-height:1.8;color:#81614a;margin:0}
.demo-composer-chrome{position:absolute;bottom:100%;left:calc(16 * var(--cu));right:calc(16 * var(--cu));margin-bottom:calc(8 * var(--cu));color:#2a1200}
.demo-composer-chrome[hidden],.demo-plus-menu[hidden],.demo-outfit-rail[hidden]{display:none}
.demo-plus-menu{display:flex;gap:calc(10 * var(--cu));height:calc(46 * var(--cu))}
.demo-menu-pill{display:flex;justify-content:center;align-items:center;gap:calc(7 * var(--cu));min-width:calc(56 * var(--cu));height:100%;border-radius:999px;color:white;font-size:calc(22 * var(--cu));font-weight:600;border:calc(1.2 * var(--cu)) solid #fff9;background:linear-gradient(#ff75183d,#ff75183d),radial-gradient(circle at 32% 24%,#fffffff0,#ffffff9e 46%,#ffd6b870);box-shadow:inset 0 1px 1px #fff9,0 2px 5px #71311012}
.demo-menu-pill svg{width:calc(24 * var(--cu));height:calc(24 * var(--cu))}
.demo-create-action{min-width:calc(92 * var(--cu))}
.demo-menu-pill small,.demo-add-outfit small{display:flex;align-items:center;justify-content:center;gap:calc(3 * var(--cu));font-size:calc(10 * var(--cu));padding:calc(3 * var(--cu)) calc(7 * var(--cu));border-radius:999px;background:#ff751880}
.demo-menu-pill small img,.demo-add-outfit small img{width:calc(14 * var(--cu));height:calc(14 * var(--cu))}
.demo-outfit-rail{height:calc(156 * var(--cu));border-radius:calc(30 * var(--cu));position:relative;display:flex;overflow:hidden;isolation:isolate;border:calc(1 * var(--cu)) solid #ffffffac;background:linear-gradient(135deg,#ffffff80,#fff9f480);box-shadow:-2px -3px 7px #ffffff2e,0 7px 15px #2a12001f,0 5px 12px #ff751814}
.demo-glass-sample{position:absolute;inset:0;z-index:-2;filter:url(#wardrobe-glass);pointer-events:none;opacity:.55}
.demo-outfit-rail::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(135deg,#ffffff78,#fff7ef60);box-shadow:inset 1px 1px 1px #fff,inset -1px -1px 2px #b9693426;pointer-events:none}
.demo-outfit-info{width:calc(44 * var(--cu));height:calc(44 * var(--cu));margin-top:calc(6 * var(--cu));display:grid;place-items:center;flex-shrink:0;font-size:calc(21 * var(--cu));font-weight:600;opacity:.78}
.demo-outfit-scroll{display:flex;gap:calc(10 * var(--cu));padding:calc(10 * var(--cu)) calc(10 * var(--cu)) calc(10 * var(--cu)) 0;overflow:auto;scrollbar-width:none;min-width:0}
.demo-outfit-scroll::-webkit-scrollbar{display:none}
.demo-add-outfit{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(8 * var(--cu));width:calc(104 * var(--cu));height:calc(136 * var(--cu));flex-shrink:0;border-radius:calc(24 * var(--cu));background:#ffd6b880;border:1px solid #ff751859;color:#ff7518}
.demo-add-outfit>svg{width:calc(25 * var(--cu));height:calc(25 * var(--cu))}
.demo-add-outfit b{font-size:calc(12 * var(--cu))}.demo-add-outfit small{background:#ffffffbf}
.demo-outfit-tile{position:relative;width:calc(108 * var(--cu));height:calc(136 * var(--cu));flex-shrink:0;overflow:hidden;background:#fff9f4;border-radius:calc(28 * var(--cu));border:calc(1 * var(--cu)) solid #2a120024;transition:transform .22s,border-color .22s,box-shadow .22s}
.demo-outfit-tile img{display:block;width:100%;height:100%;object-fit:contain;object-position:top;transform:scale(1.45);transform-origin:top}
.demo-outfit-tile.is-selected{transform:scale(1.04);border:calc(2 * var(--cu)) solid #ff7518;box-shadow:0 0 calc(8 * var(--cu)) #ff751894,0 0 calc(16 * var(--cu)) #ffd6b857}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){.demo-glass-sample{display:none}.demo-outfit-rail{background:#fff4e9;border-color:#9c7355}}



/* iOS PendingImageGenerationPlaceholder: auroraBlush mesh and 1pt dot texture. */
.demo-media{position:relative}
.demo-generation,.demo-generation-status{display:none}
.demo-media-row.is-generating{flex-wrap:wrap}
.demo-row .demo-generation-status{background:none;padding:0;margin:0 0 1.5cqw 9.4cqw;color:#867567;font-size:3cqw;width:100%;max-width:none;order:-1}
.demo-media-row.is-generating .demo-generation-status{display:block}
.is-generating .demo-generation{display:block;position:absolute;inset:0;overflow:hidden;background:#bd82f2}
.is-generating .demo-media>img{visibility:hidden}
.demo-generation-mesh{position:absolute;inset:-25%;background:radial-gradient(ellipse at 15% 20%,#bd82f2,transparent 55%),radial-gradient(ellipse at 85% 20%,#f5baeb,transparent 60%),radial-gradient(ellipse at 70% 85%,#ff6678,transparent 55%),#ffba70;filter:blur(12px);animation:demo-mesh 3s ease-in-out infinite alternate}
.demo-generation-dots{position:absolute;inset:0;background-image:radial-gradient(circle,#ffffff40 .22cqw,transparent .24cqw);background-size:.55cqw .55cqw}
.demo-generation::after{content:"";position:absolute;inset:0;background:#000;opacity:.62;animation:demo-generation-brighten 60s linear forwards}
.conversation-composer.is-generating .conversation-mic{opacity:.35}
.conversation-section.is-paused .demo-generation-mesh,.conversation-section.is-paused .demo-generation::after{animation-play-state:paused}
@keyframes demo-mesh{to{transform:rotate(18deg) scale(1.12) translate(5%,-4%)}}
@keyframes demo-generation-brighten{to{opacity:0}}
@media(prefers-reduced-motion:reduce){.demo-generation-mesh,.demo-generation::after{animation:none}}

/* Editorial photo layout. The live DOM is projected into the photographed screen. */
.conversation-section{position:relative;overflow:hidden;background:#fff7ef;padding:130px 40px;scroll-margin-top:90px}
.conversation-inner{display:grid;grid-template-columns:.82fr 1.18fr;align-items:center;gap:64px;max-width:1120px;margin:auto}
.conversation-copy{min-width:0}
.conversation-copy h2{font-family:"Fraunces",Georgia,serif;font-size:clamp(34px,3.6vw,49px);font-weight:650;line-height:1.12;letter-spacing:-.045em;margin:0;color:#f56819;text-wrap:balance}
.conversation-copy h2 em{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;font-size:1.15em;white-space:nowrap}
.conversation-intro{font-size:17px;line-height:1.55;color:#81614a;margin:20px 0 0}
.conversation-scene{position:relative;min-width:0;width:100%;aspect-ratio:3/2;border-radius:26px;overflow:hidden;isolation:isolate;background:#e6cdb2}
.conversation-lifestyle{display:block;width:100%;height:100%;object-fit:cover}
.conversation-projection{position:absolute;top:0;left:0;width:1536px;height:1024px;transform:scale(var(--photo-scale,0));transform-origin:0 0;pointer-events:none}
.conversation-phone{position:absolute;left:0;top:0;width:350px;height:760px;container-type:inline-size;transform-origin:0 0;will-change:auto}
.conversation-screen{inset:0;width:100%;height:100%;clip-path:none;border-radius:40px;box-shadow:inset 0 0 3px #0004;background:#fffaf5}
.conversation-screen::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 5px #29170e38;background:linear-gradient(115deg,#ffe7cc06,transparent 45%,#422a1608)}
@media(max-width:900px){.conversation-section{padding:100px 28px}.conversation-inner{gap:32px;grid-template-columns:.8fr 1.2fr}.conversation-copy h2{font-size:35px}.conversation-intro{font-size:15px}}
@media(max-width:660px){.conversation-section{padding:75px 22px}.conversation-inner{grid-template-columns:minmax(0,1fr);gap:30px}.conversation-copy{text-align:left}.conversation-copy h2{font-size:39px}.conversation-intro{font-size:15px;margin-top:14px}.conversation-scene{border-radius:20px}}
@media(prefers-reduced-motion:reduce){.demo-typing-dots i{animation:none}.conversation-messages{will-change:auto}}

/* Measured screen contour retains the real camera notch and rounded bezel. */
.conversation-projection{clip-path:polygon(68.9453% 6.4453%,71.5495% 6.4453%,71.9401% 6.6406%,72.7865% 7.5195%,73.3073% 9.0820%,73.3073% 13.1836%,72.9818% 21.7773%,72.9818% 24.3164%,72.5911% 35.0586%,72.0703% 55.0781%,71.6797% 65.5273%,71.2240% 83.6914%,70.9635% 85.4492%,70.6380% 86.3281%,69.8568% 87.3047%,69.0755% 87.6953%,67.9688% 87.6953%,67.5130% 87.5000%,66.4062% 87.4023%,64.5182% 86.9141%,62.9557% 86.7188%,62.0443% 86.4258%,61.5234% 86.4258%,59.1146% 85.8398%,51.2370% 84.3750%,47.9818% 83.7891%,46.9401% 83.2031%,46.2891% 82.3242%,46.2240% 81.9336%,46.0938% 81.8359%,45.7682% 80.1758%,45.9635% 74.5117%,46.7448% 61.3281%,46.7448% 59.9609%,47.5260% 45.1172%,47.7865% 41.8945%,47.8516% 38.9648%,48.0469% 36.4258%,48.6328% 23.6328%,48.8281% 21.2891%,49.2188% 12.1094%,49.4792% 9.7656%,49.8047% 8.8867%,50.2604% 8.2031%,50.8464% 7.7148%,51.6927% 7.4219%,53.9714% 7.3242%,54.2318% 8.3984%,54.4922% 8.7891%,54.8177% 8.9844%,55.7943% 8.9844%,67.2526% 8.2031%,67.9688% 7.5195%,68.2292% 6.5430%,68.9453% 6.4453%)}
.conversation-screen{border-radius:0}
.conversation-island{display:none}

/* Shared oval treatment from the “From anywhere” headline. */
.home-section-copy .oval-heading,.conversation-copy .oval-heading{color:#ff6812;font-weight:900;letter-spacing:-.055em;line-height:1.12}
.home-section-copy .oval-heading em,.conversation-copy .oval-heading em{position:relative;display:inline-block;font-family:"Cormorant Garamond",Georgia,serif;font-size:1em;font-weight:400;letter-spacing:-.045em;color:#fff7ed;padding:0 .32em .09em .22em;isolation:isolate;white-space:nowrap}
.oval-heading em::before{content:"";position:absolute;inset:4% -1% -2%;background:#ff6812;border-radius:50%;z-index:-1;transform:rotate(-3deg)}