:root{font:15px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#3f331f;background:#fff;color-scheme:light}*{box-sizing:border-box}body{margin:0}main{min-height:100dvh;display:flex;flex-direction:column}header{display:flex;justify-content:space-between;gap:10px;padding:24px 20px 18px;background:#f5f3ef;border-bottom:1px solid #e6e2db}header h1{font-family:Georgia,serif;font-size:30px;font-weight:400;line-height:1.15;margin:4px 0 7px}header p{margin:0;font-size:12px;color:#6c6250}.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:10px;font-weight:700;color:#776a54}button,input,textarea,select{font:inherit}button{cursor:pointer;border:0;border-radius:10px;padding:12px 16px;background:#543e19;color:#fff;font-weight:600;min-height:44px}button:hover{background:#3e2e12}button:disabled{cursor:default;opacity:.5}.close{font-size:28px;padding:0;min-width:44px;height:44px;background:transparent;color:#4c3d24;align-self:flex-start}.close:hover{background:#ebe7de}.secondary{background:#f2f0ed;color:#4c3d23;border:1px solid #d9d4cb}.secondary:hover{background:#eae6de}.notice{margin:0;padding:12px 20px;background:#fbf9f5;color:#635c50;font-size:13px;overflow-wrap:anywhere}.notice.error{background:#fdf8ef;color:#8d6623}section{padding:20px;flex:1}h2{font-family:Georgia,serif;font-size:23px;line-height:1.25;font-weight:400;margin:0 0 12px}p{margin:0 0 16px}label{display:block;font-weight:600;margin:12px 0 6px}input,textarea,select{display:block;width:100%;border:1px solid #cac3b7;border-radius:8px;padding:11px 12px;background:white;color:#3f331f;min-height:44px}input:focus,textarea:focus,select:focus,button:focus-visible{outline:3px solid #caa566;outline-offset:2px}input[type=checkbox]{display:inline-block;width:20px;min-height:20px;margin:3px 10px 0 0;flex:none}.consent{display:flex;font-size:12px;font-weight:400;line-height:1.5;margin:16px 0}form>button{width:100%;margin-top:14px}.hint{font-size:12px;color:#736c60}.options{display:grid;gap:10px}.option{text-align:left;padding:16px;display:flex;justify-content:space-between;align-items:center}.option span{display:block;font-size:12px;font-weight:400;margin-top:4px}.option strong{font-size:16px}.timer{font-variant-numeric:tabular-nums;font-weight:700;font-size:20px}.session-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:10px}.messages{height:260px;max-height:36dvh;overflow:auto;overscroll-behavior:contain;padding:2px 0 12px;display:flex;flex-direction:column;gap:10px}.message{padding:10px 12px;border-radius:12px;background:#f3f1ed;white-space:pre-wrap;overflow-wrap:anywhere;max-width:94%;margin:0}.message.visitor{align-self:flex-end;background:#543e19;color:white}.message small{display:block;font-size:10px;font-weight:700;margin-bottom:3px}.composer{display:flex;gap:8px;margin-top:10px}.composer textarea{resize:none;min-width:0;height:72px}.composer button{width:auto;margin:0;align-self:stretch}.media{width:100%;min-height:260px;border-radius:12px;overflow:hidden;background:#261f12}.media iframe{border:0;width:100%;height:300px}.media{position:relative}.media-video{display:block;width:100%;height:300px;object-fit:cover;background:#261f12}.media-audio{display:none}.media-mute{position:absolute;right:10px;bottom:10px;min-height:36px;padding:8px 14px;background:#261f12cc;border:1px solid #ffffff33}.actions{display:grid;gap:10px;margin-top:18px}.muted{color:#776e60;font-size:13px}.voice-state{padding:32px 10px;border-radius:16px;text-align:center;background:#f3f1ed}.voice-orb{width:72px;height:72px;background:#543e19;border-radius:50%;display:grid;place-items:center;margin:0 auto 16px;color:white;font:36px Georgia,serif}.voice-state p{margin-bottom:0}footer{padding:16px 20px;color:#7b7469;font-size:11px;border-top:1px solid #edeae3;background:#fcfbfa}.slot{display:block;padding:12px;border:1px solid #d7d1c6;border-radius:8px;margin-top:8px}.slot input{display:inline-block;width:auto;min-height:0;margin-right:8px}.text-link{color:#543e19;text-decoration:underline;background:none;padding:5px;min-height:30px}.text-link:hover{background:#f2f0ed}@media(max-width:375px){header{padding:20px 16px 16px}section{padding:16px}.notice{padding:10px 16px}header h1{font-size:28px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
/* Embedded conversations share the landing card's available height. */
html,body{height:100%;min-width:0;overflow-x:hidden}main{height:100%;min-height:0;max-height:var(--olivia-viewport-height,100%);overflow:auto}main>header,main>.notice,main>footer{flex:none}#content{min-width:0;min-height:0}.landing-card main{background:#fbfaf8}.landing-card header{padding:10px 12px}.landing-card header h1,.landing-card header .eyebrow,.landing-card header .close{display:none}.landing-card header p{font-size:11px}.landing-card .notice{padding:8px 12px;font-size:11px}.landing-card #content{padding:12px}.landing-card footer{padding:8px 12px;font-size:10px}.text-session{overflow:hidden}.text-session #content{display:flex;flex-direction:column;overflow:hidden;gap:8px;flex:1}.text-session .session-bar{margin:0;flex:none;font-size:12px}.text-session .timer{font-size:15px}.text-session .messages{flex:1;min-height:0;height:auto;max-height:none;padding:4px 1px 8px;scroll-behavior:auto}.text-session .message{max-width:88%;font-size:13px;line-height:1.45}.text-session .composer{flex:none;min-width:0;margin:0;align-items:flex-end;padding-bottom:env(safe-area-inset-bottom)}.text-session .composer textarea{height:56px;min-height:44px;max-height:112px;font-size:16px;line-height:1.35;padding:8px 10px}.text-session .composer button{height:56px;padding:8px 12px}.text-session .session-actions{margin:0;flex:none}.text-session .session-actions button{min-height:30px;font-size:11px;padding:5px 10px}.typing{margin:0;color:#766f63;font-size:11px;line-height:1.4;flex:none}.typing[hidden]{display:none}.typing::after{content:' ';display:inline-block;width:5px;height:5px;margin-left:6px;border-radius:50%;background:#988e7e;animation:olivia-typing 1s ease-in-out infinite}@keyframes olivia-typing{50%{opacity:.3}}@media(prefers-reduced-motion:reduce){.typing::after{animation:none}}
/* The landing's continuing intro video occupies this corner in Text mode. */
.landing-card .text-session header,.landing-card .text-session .notice{padding-right:96px}.landing-card .text-session .session-bar{padding-right:88px;min-height:32px}
/* A mobile keyboard can leave only a short section of the card for chat. */
@media(max-height:360px){.landing-card .text-session header,.landing-card .text-session footer{display:none}.landing-card .text-session .notice{padding:5px 96px 5px 8px;font-size:10px;line-height:1.3}.landing-card .text-session #content{padding:7px;gap:5px}.landing-card .text-session .session-bar{min-height:25px;font-size:11px}.landing-card .text-session .composer textarea,.landing-card .text-session .composer button{height:44px;min-height:44px}.landing-card .text-session .session-actions button{min-height:26px;padding:3px 8px}.landing-card .text-session .message{padding:7px 9px;font-size:12px}.landing-card .text-session .typing{font-size:10px}}
@media(max-height:260px){.landing-card .text-session .notice,.landing-card .text-session .session-actions{display:none}.landing-card .text-session .session-bar{padding-right:62px}}
/* The identity stays complete beside the Text-mode video corner. */
header>div{min-width:0;flex:1}#assistant-identity{white-space:normal;overflow:visible;overflow-wrap:anywhere;text-overflow:clip}
@media(max-height:360px){.landing-card .text-session header{display:flex;padding:5px 96px 5px 8px}.landing-card .text-session header p{line-height:1.3}}
/* Only the thread scrolls as the keyboard changes the available card height. */
.text-session,.text-session .messages{overflow-anchor:none;overscroll-behavior:contain}.text-session .composer textarea{scroll-margin:0}
/* 54: inside Olivia's panel on the landing room (?landing=card) every step uses GPT's studio design: ivory card,
   Cormorant headings, Outfit text, burgundy primary, one clear action per step, no grey system inputs. */
@font-face{font-family:"C27 Cormorant";src:url("/assets/landing/collection-on-27/fonts/cormorant-garamond.woff2") format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"C27 Cormorant";src:url("/assets/landing/collection-on-27/fonts/cormorant-garamond-italic.woff2") format("woff2");font-style:italic;font-weight:300 700;font-display:swap}
@font-face{font-family:"C27 Outfit";src:url("/assets/landing/collection-on-27/fonts/outfit.woff2") format("woff2");font-weight:200 700;font-display:swap}
body.landing-card{--c27-ink:#1d1b18;--c27-muted:#7d7260;--c27-wine:#1d1b18;--c27-wine-dark:#554427;--c27-ivory:#fffdf8;--c27-paper:#f8f4eb;--c27-line:#e5dbc7;--c27-gold:#c8ad7e;background:var(--c27-ivory);color:var(--c27-ink);font:13px/1.55 "C27 Outfit",system-ui,-apple-system,sans-serif}
body.landing-card main{min-height:100%;background:var(--c27-ivory)}
body.landing-card header{background:var(--c27-paper);border-bottom:1px solid var(--c27-line);padding:12px 16px}
body.landing-card header h1{font:400 22px/1.1 "C27 Cormorant",Georgia,serif;margin:2px 0 3px;color:var(--c27-ink)}
body.landing-card header p,body.landing-card .eyebrow{color:var(--c27-muted);font-size:10px;letter-spacing:.14em}
body.landing-card section{padding:14px 16px}
body.landing-card h2{font:400 24px/1.08 "C27 Cormorant",Georgia,serif;margin:0 0 6px;color:var(--c27-ink)}
body.landing-card p,body.landing-card .muted{color:var(--c27-muted);font-size:12px;margin:0 0 10px}
body.landing-card label{font-weight:500;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--c27-muted);margin:10px 0 5px}
body.landing-card input:not([type=checkbox]),body.landing-card textarea,body.landing-card select{background:#fff;border:1px solid var(--c27-line);border-radius:10px;padding:11px 12px;color:var(--c27-ink);box-shadow:none;-webkit-appearance:none;appearance:none}
body.landing-card input:focus,body.landing-card textarea:focus{outline:2px solid var(--c27-gold);outline-offset:1px;border-color:var(--c27-gold)}
body.landing-card button{background:var(--c27-wine);color:#fcf6eb;border-radius:999px;font-weight:500;letter-spacing:.02em;min-height:44px;padding:11px 18px}
body.landing-card button:hover{background:var(--c27-wine-dark)}
body.landing-card button.secondary,body.landing-card .secondary{background:transparent;color:var(--c27-wine);border:0;text-decoration:underline;text-underline-offset:3px;min-height:36px;padding:6px 4px;font-size:12px}
body.landing-card form>button[type=submit]{width:100%;margin-top:12px}
body.landing-card .consent{display:flex;gap:9px;align-items:flex-start;text-transform:none;letter-spacing:0;font-size:11px;line-height:1.45;color:var(--c27-muted);font-weight:400;margin:8px 0 0;padding:10px 12px;border:1px solid var(--c27-line);border-radius:10px;background:var(--c27-paper)}
body.landing-card .consent input{accent-color:var(--c27-wine);width:18px;height:18px;flex:none;margin-top:1px}
body.landing-card .notice{background:var(--c27-paper);color:var(--c27-muted);border-bottom:1px solid var(--c27-line);padding:8px 16px;font-size:12px}
body.landing-card .notice.error{background:#fcf5e8;color:#8a6524}
/* The 6-digit code reads as six boxes but stays one real input, so iOS/Android autofill and paste keep working. */
body.landing-card input[autocomplete="one-time-code"]{font:500 24px/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.62em;text-indent:.31em;padding:12px 0;width:100%;max-width:300px;text-align:left;background:repeating-linear-gradient(90deg,#fff 0 calc(16.666% - 4px),transparent calc(16.666% - 4px) 16.666%),var(--c27-line);background-clip:padding-box;border:0;border-radius:8px}
/* 56 #5: in the room the footer note sits in the flow under the steps, never over the mode cards. */
body.landing-card footer{position:static;background:var(--c27-paper);border-top:1px solid var(--c27-line);color:var(--c27-muted);font-size:10px;padding:8px 16px}
body.landing-card .option{background:#fff;color:var(--c27-ink);border:1px solid var(--c27-line);border-radius:14px;text-align:left}
body.landing-card .option:hover{background:var(--c27-paper)}
/* 56 #2: the whole Text thread stays readable in the room; earlier messages scroll, never collapse away. */
body.landing-room .text-session .messages{min-height:min(260px,45dvh)}
/* 83: Olivia's live tile is a real box that shows her whole face. In a video session the video takes the frame's free
   height (never a fixed 300px strip under the header), keeps a portrait-friendly 4:5 box when there is room, shrinks
   with the frame when there is not, and stays centred on her face. Nothing in the frame scrolls. */
.video-session{overflow:hidden}
.video-session #content{display:flex;flex-direction:column;gap:8px;flex:1 1 auto;min-height:0;overflow:hidden}
.video-session .session-bar{flex:none;margin:0}
.video-session .media{flex:0 1 auto;width:100%;min-height:0;aspect-ratio:4/5;max-height:100%;margin:0 auto}
.video-session .media-video{height:100%;object-fit:cover;object-position:50% 30%}
.video-session #content>:not(.media){flex:none}
.video-session #content>button.secondary{align-self:center;min-height:32px}
/* In the landing card the page above already names Olivia: the identity line gives its height to her tile. */
body.landing-card .video-session>header{display:none}
body.landing-card .video-session #content{padding:8px 10px;gap:6px}
body.landing-card .video-session .session-bar{min-height:24px;font-size:12px}
body.landing-card .video-session .notice{padding:6px 12px;font-size:11px;line-height:1.4}
body.landing-card .video-session>footer{padding:6px 12px;font-size:10px;line-height:1.4}
@media(max-height:300px){body.landing-card .video-session>footer{display:none}}
/* The session line (Meet Olivia · time left) rides on the top of her tile in the card, so the tile keeps that height. */
body.landing-card .video-session #content{position:relative}
body.landing-card .video-session .session-bar{position:absolute;z-index:1;top:8px;left:10px;right:10px;padding:6px 12px;border-radius:12px 12px 0 0;background:linear-gradient(180deg,#261f12cc,#261f1200);color:#fff}
body.landing-card .video-session .session-bar .timer{color:#fff}
/* The room's Text thread keeps a readable minimum and grows with the card; earlier messages scroll inside the thread. */
body.landing-room .text-session .messages{min-height:min(96px,30dvh)}
body.landing-room.landing-card .text-session .messages{min-height:min(64px,20dvh)}
body.landing-card .text-session .notice{font-size:11px;line-height:1.4;padding-top:6px;padding-bottom:6px}
body.landing-card .text-session>footer{padding:6px 12px;line-height:1.4}
/* 90 (Batu's iPhone, Oct 26 2026): the chooser sheet fits Safari's dynamic toolbars and the home indicator: dynamic
   viewport units, safe-area padding, three compact options and the two next steps side by side. */
body.landing-card main{max-height:var(--olivia-viewport-height,100dvh);padding-bottom:env(safe-area-inset-bottom)}
@supports not (height:1dvh){body.landing-card main{max-height:var(--olivia-viewport-height,100vh)}}
body.landing-card #content>h2{margin:4px 0 2px;font-size:19px;line-height:1.2}
body.landing-card #content>h2+.muted{margin:0 0 8px;font-size:12.5px;line-height:1.35}
body.landing-card .options{display:grid;gap:6px;margin:0 0 10px}
body.landing-card .option{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;min-height:0}
body.landing-card .option strong{display:block;font-size:14px;line-height:1.25}
body.landing-card .option span{font-size:12px;line-height:1.3}
body.landing-card .actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0}
body.landing-card .actions>button{min-width:0;padding:9px 8px;font-size:13px;line-height:1.2;white-space:normal}
body.landing-card .actions .call-agent{grid-column:1/-1;text-align:center;font-size:13px}
@media(max-height:620px){body.landing-card #content>h2+.muted{display:none}body.landing-card .option{padding:7px 11px}}
/* 90: short frames (the room on iPhone Safari is ~330 px tall): the three options sit side by side. */
@media(max-height:430px){
 body.landing-card #content>h2{font-size:16px;margin:0 0 6px}
 body.landing-card #content>h2+.muted{display:none}
 body.landing-card .options{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:8px}
 body.landing-card .option{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:2px;padding:8px 9px}
 body.landing-card .option strong{font-size:12.5px}
 body.landing-card .option div>span{display:none}
 body.landing-card .option>span{font-size:11px;color:var(--c27-muted,#716b61)}
 body.landing-card .actions>button{padding:8px 6px;font-size:12px}
 body.landing-card .actions .call-agent{font-size:12px;margin-top:-2px}
}
@media(max-height:300px){body.landing-card .options{margin-bottom:6px}body.landing-card .option{padding:6px 8px}body.landing-card .actions{gap:6px}}
body.landing-card .actions>button{border:1px solid var(--c27-wine,#1d1b18);border-radius:999px;background:#fff;color:var(--c27-wine,#1d1b18);font-weight:600;text-decoration:none}
body.landing-card .actions>button:first-child{background:var(--c27-wine,#1d1b18);color:#fff}
/* 111: the room lays its Minimise / Close controls on the frame's top-right corner; the status notice and the identity
   line keep clear of them. */
body.landing-room.landing-card .video-session>.notice{padding-right:104px}
body.landing-room.landing-card>main>header{padding-right:124px}
/* 111: the room's corner bubble (the frame is 112-200 px wide): Olivia's video fills it, with Mute and End on it. */
@media(max-width:240px){
 body.landing-room .video-session>header,body.landing-room .video-session>.notice,body.landing-room .video-session>footer,body.landing-room .video-session .session-bar{display:none}
 body.landing-room .video-session #content{padding:0;gap:0;position:relative}
 body.landing-room .video-session .media{position:absolute;inset:0;width:auto;aspect-ratio:auto;max-height:none;border-radius:0}
 body.landing-room .video-session .media-video{height:100%}
 body.landing-room .video-session .media-mute{left:5px;right:auto;bottom:5px;min-height:28px;padding:3px 9px;font-size:11px;border-radius:999px}
 body.landing-room .video-session #content>button.secondary{position:absolute;right:5px;bottom:5px;z-index:2;min-height:28px;padding:3px 9px;border-radius:999px;background:#8f7445;color:#fff;border:0;text-decoration:none;font-size:0;line-height:1}
 body.landing-room .video-session #content>button.secondary::after{content:"End";font-size:11px}
}
/* 119 (Batu: text option "needs more space"): inside the presentation room the panel already names Olivia, so the frame
   drops its own header and the text chat gets the height: one-line notice, slim bar, full-height thread, one-row composer. */
body.landing-room #olivia-app>header{display:none}
body.landing-room .text-session>.notice{font-size:11px;line-height:1.35;padding:6px 12px}
body.landing-room .text-session .session-bar{min-height:30px;padding:4px 12px;font-size:13px}
body.landing-room .text-session #content{display:flex;flex-direction:column;gap:6px;padding:8px 10px;min-height:0;flex:1 1 auto}
body.landing-room .text-session .messages{flex:1 1 auto;min-height:120px;overflow:auto}
body.landing-room .text-session .composer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:end;margin:0}
body.landing-room .text-session .composer textarea{min-height:44px;max-height:96px;font-size:16px;padding:10px 12px;border-radius:12px;resize:none;width:100%}
body.landing-room .text-session .composer button{min-height:44px;padding:0 16px;border-radius:12px;font-size:14px}
body.landing-room .text-session .session-actions{margin:0;justify-content:center}
body.landing-room .text-session .session-actions button{min-height:30px;padding:2px 10px;background:none;border:0;color:#7a6238;text-decoration:underline;font-size:12px;font-weight:500}
@media(max-height:300px){body.landing-room .text-session>.notice{display:none}}
@media(max-width:760px){body.landing-room .text-session>.notice{padding-right:124px}}
/* 152: Olivia can't hear you (microphone denied or not granted). */
.media-mute[hidden]{display:none}.mic-blocked{margin:12px 0 0;padding:14px 16px;border-radius:12px;background:#fdf8ef;color:#6e501c;border:1px solid #f4dfb5}.mic-blocked-title{margin:0 0 10px;font-weight:700;font-size:15px}.mic-allow{width:100%;margin:0 0 10px}.mic-steps{margin:0;padding-left:18px;font-size:12px;line-height:1.5}.mic-steps li+li{margin-top:4px}