/* Kai's personal phone: familiar app surfaces, kept separate from Northstar's UI. */
body.phone-mode #world { filter:blur(3px); opacity:.55; }
body.phone-mode #world-shade { background:linear-gradient(90deg,#071311bb,#07131122 48%,#07131188); }
.phone-stage { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; padding:22px; pointer-events:auto; }
.phone-device { width:430px; height:min(900px,calc(100dvh - 44px)); min-height:0; display:flex; flex-direction:column; overflow:hidden; color:#172523; background:#fbfcfa; border:6px solid #161c1b; border-radius:37px; box-shadow:0 0 0 1px #9caaa54f,0 30px 110px #0009; color-scheme:light; font-family:'IBM Plex Sans',sans-serif; }
.phone-device button { font-family:inherit; }
.phone-device button:focus-visible { outline:3px solid #12755e; outline-offset:-3px; }
.phone-statusbar { min-height:37px; display:flex; justify-content:space-between; align-items:center; padding:9px 24px 4px; flex-shrink:0; font-size:13px; font-weight:600; }
.phone-status-icons { display:flex; align-items:center; gap:6px; font-size:12px; }
.phone-device svg { width:23px; height:23px; flex-shrink:0; }
.phone-status-icons svg { width:19px; height:19px; }
.phone-app-view { flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
.phone-system-nav { min-height:54px; display:flex; flex-shrink:0; align-items:center; justify-content:center; position:relative; border-top:1px solid #263d3320; background:inherit; padding-bottom:env(safe-area-inset-bottom); }
.phone-home-button { display:flex; gap:8px; align-items:center; justify-content:center; background:none; color:inherit; min-height:48px; min-width:120px; font-size:14px; }
.phone-dark { background:#102f3d; color:#f8fcf8; }
.phone-dark .phone-system-nav { border-top-color:#ffffff20; }
.phone-dark button:focus-visible { outline-color:#fff; }
.phone-home-screen { height:100%; display:flex; flex-direction:column; padding:40px 24px 15px; background:radial-gradient(ellipse at 12% 22%,#2e6660a8,transparent 65%),linear-gradient(155deg,#264350,#143044 66%,#122b3d); }
.phone-clock { font-size:68px; font-weight:300; line-height:1.1; text-align:center; letter-spacing:-2px; }
.phone-clock p { color:#eff7f5; font-size:16px; margin:8px 0 0; letter-spacing:0; }
.phone-home-notifications { margin:28px 0; display:flex; flex-direction:column; gap:10px; overflow:auto; min-height:0; }
.phone-notification { width:100%; display:flex; flex-direction:column; gap:5px; padding:15px 17px; color:#182e30; background:#f3f8f2eF; border-radius:15px; text-align:left; font-size:15px; box-shadow:0 5px 20px #0714161a; animation:phone-arrive .3s ease-out; }
.notification-app { font-size:12px; color:#526963; margin-bottom:3px; }
.phone-notification strong { font-size:16px; }
.phone-notification>span:last-child { line-height:1.4; }
.phone-app-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:auto; padding:20px 0; flex-shrink:0; }
.phone-app-launcher { background:none; color:#fff; display:flex; align-items:center; flex-direction:column; gap:9px; font-size:12px; position:relative; padding:4px 0; }
.phone-app-icon { display:grid; place-items:center; width:58px; height:58px; border-radius:15px; box-shadow:0 3px 10px #0003,inset 0 1px 1px #ffffff55; }
.phone-app-icon svg { width:32px; height:32px; stroke-width:1.7; }
.app-mail { background:linear-gradient(#339ce5,#1971c4); }
.app-chats { background:linear-gradient(#3ac773,#179b50); }
.app-bank { background:#fbfcf5; color:#22615d; }
.app-flights { background:#e4aa54; color:#3c321c; }
.phone-badge { position:absolute; top:0; right:0; min-width:21px; height:21px; padding:0 5px; border-radius:20px; background:#db473e; display:grid; place-items:center; font-size:12px; }
.phone-home-hint { font-size:12px; text-align:center; color:#c6dce2; padding-top:8px; min-height:25px; }
.phone-app-header { display:flex; gap:9px; align-items:center; padding:8px 12px 12px 7px; border-bottom:1px solid #dde4de; background:#fbfcfa; flex-shrink:0; min-height:70px; }
.phone-app-header h2 { margin:0; font-size:20px; font-weight:600; font-family:inherit; line-height:1.3; letter-spacing:-.3px; }
.phone-app-header p { font-size:12px; color:#697670; margin:3px 0 0; }
.phone-icon-button { display:grid; place-items:center; width:44px; height:44px; background:none; color:#267767; flex-shrink:0; border-radius:50%; }
.phone-icon-button:hover { background:#2062510c; }
.phone-scroll { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#a2b5aa transparent; }
.phone-inbox { background:#fff; }
.phone-email-row { width:100%; text-align:left; padding:21px 23px; background:#fff; border-bottom:1px solid #e5e9e5; position:relative; }
.phone-email-row>div { display:flex; justify-content:space-between; gap:12px; align-items:baseline; }
.phone-email-row strong { font-size:16px; }
.phone-email-row time { color:#707b73; font-size:12px; white-space:nowrap; }
.phone-email-row b { font-size:15px; display:block; font-weight:500; margin:6px 0; }
.phone-email-row p { margin:0; font-size:14px; line-height:1.5; color:#63736a; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.mail-unread { position:absolute; top:26px; left:9px; height:6px; width:6px; border-radius:50%; background:#188ccc; }
.phone-inbox-note { padding:22px; text-align:center; color:#77877f; font-size:13px; }
.phone-email { background:#fff; padding:23px; }
.phone-email h3 { font-size:24px; font-weight:500; line-height:1.25; letter-spacing:-.5px; margin:0 0 26px; }
.email-sender { display:flex; align-items:center; gap:12px; padding-bottom:20px; border-bottom:1px solid #e6eae5; }
.email-initial { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:#e7ede9; color:#4f6864; flex-shrink:0; }
.email-sender strong { font-size:14px; display:block; }
.email-sender small { display:block; color:#718077; font-size:12px; overflow-wrap:anywhere; }
.email-sender span:not(.email-initial) { display:block; font-size:12px; color:#768078; margin-top:5px; }
.email-copy { font-size:16px; line-height:1.65; }
.email-copy p { margin:22px 0; }
.phone-email blockquote { margin:30px 0 0; border-left:2px solid #cbd6cc; padding:0 0 0 16px; color:#738278; font-size:14px; line-height:1.65; }
.offer-terms { background:#f1f5f2; border:1px solid #dfe7e1; padding:15px; font-size:14px; line-height:1.4; }
.offer-terms>div { display:grid; grid-template-columns:95px 1fr; gap:12px; padding:9px 0; }
.offer-terms dt { color:#657469; }
.offer-terms dd { margin:0; font-weight:500; }
.phone-mail-actions { display:flex; flex-direction:column; gap:10px; margin:25px 0 10px; }
.phone-button { min-height:46px; padding:12px 17px; border-radius:9px; background:#e8efeb; color:#254a40; font-size:15px; font-weight:500; line-height:1.45; display:flex; align-items:center; justify-content:center; gap:10px; width:100%; text-align:center; }
.phone-button:hover { filter:brightness(.96); }
.phone-primary { background:#16745e; color:#fff; }
.phone-avatar { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font-size:19px; font-weight:500; flex-shrink:0; }
.phone-avatar.rose { background:#e5ccc7; color:#793e39; }
.phone-avatar.blue { background:#c3d7e4; color:#2e536c; }
.phone-avatar.green { background:#285951; color:#f4f9f1; }
.phone-avatar.ochre { background:#e9d9ae; color:#725628; }
.phone-chat-row { display:flex; align-items:center; gap:13px; padding:20px 18px; background:#fff; color:#1b2b26; border-bottom:1px solid #e7ece7; width:100%; text-align:left; }
.phone-chat-preview { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.phone-chat-preview strong { font-size:16px; }
.phone-chat-preview>span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:14px; color:#708176; }
.phone-chat-time { font-size:12px; color:#738278; display:flex; flex-direction:column; align-items:center; gap:8px; }
.phone-unread { font-style:normal; width:20px; height:20px; background:#158461; color:white; border-radius:50%; display:grid; place-items:center; }
.whatsapp-header { background:#f6faf7; }
.whatsapp-header h2 { font-size:17px; letter-spacing:0; }
.whatsapp-header .phone-avatar { width:37px; height:37px; font-size:16px; }
.phone-messages { background:#e5ede4; padding:12px 15px 20px; display:flex; flex-direction:column; }
.phone-day { background:#f9fcf6cb; color:#627467; border-radius:7px; font-size:12px; padding:6px 12px; margin:9px auto 17px; flex-shrink:0; }
.phone-message { max-width:88%; padding:10px 12px 6px; border-radius:0 10px 10px; background:#fff; box-shadow:0 1px 1px #173e1f13; margin-bottom:7px; align-self:flex-start; flex-shrink:0; }
.phone-message.out { background:#d1efc6; align-self:flex-end; border-radius:10px 0 10px 10px; }
.phone-message p { font-size:16px; line-height:1.5; margin:0; overflow-wrap:anywhere; }
.phone-message-time { display:block; text-align:right; color:#728675; font-size:11px; margin-top:4px; }
.phone-message-time>span { color:#2e8797; margin-left:5px; }
.message-attachment { display:block; font-size:12px; color:#68776d; margin:0 0 7px; }
.phone-contact-card { background:none; border-top:1px solid #d8e3d7; color:#157555; width:100%; font-size:14px; min-height:45px; margin-top:10px; }
.phone-replies { background:#f4f7f3; padding:12px; border-top:1px solid #d6e0d7; flex-shrink:0; max-height:40%; overflow:auto; }
.phone-reply-label { display:block; color:#677a6c; font-size:12px; margin:0 3px 8px; }
.phone-reply-options { display:flex; flex-direction:column; gap:7px; }
.phone-reply-option { background:#fff; border:1px solid #bdcfc0; color:#244f3c; border-radius:9px; text-align:left; padding:11px 13px; line-height:1.45; font-size:16px; min-height:44px; }
.phone-reply-option:hover { background:#e8f2e6; border-color:#5e9976; }
.phone-draft { display:flex; align-items:center; gap:10px; }
.phone-draft p { background:#fff; border:1px solid #bdcfc0; padding:12px; border-radius:9px; margin:0; flex:1; line-height:1.45; font-size:14px; }
.phone-send { width:46px; height:46px; border-radius:50%; background:#16745e; color:#fff; flex-shrink:0; display:grid; place-items:center; }
.phone-change { background:none; color:#456e59; min-height:44px; font-size:13px; padding:6px; }
.phone-chat-idle { display:block; text-align:center; font-size:13px; padding:5px; color:#738076; line-height:1.5; }
.phone-bank { padding:22px; }
.phone-balance { background:#155750; color:#fff; border-radius:14px; padding:25px 23px; margin-bottom:25px; }
.phone-balance>span { display:block; font-size:14px; color:#cfe2db; }
.phone-balance strong { display:block; font-size:43px; letter-spacing:-1px; font-weight:400; margin:8px 0 20px; }
.phone-balance small { font-size:12px; color:#cee1d7; }
.phone-bank h3 { font-size:17px; margin:26px 0 5px; font-weight:500; }
.phone-transaction { display:flex; justify-content:space-between; gap:12px; padding:18px 0; border-bottom:1px solid #dfe7e0; }
.phone-transaction strong { font-size:15px; font-weight:500; display:block; }
.phone-transaction small { color:#788679; font-size:12px; display:block; margin-top:5px; }
.phone-transaction b { font-size:15px; font-weight:500; white-space:nowrap; }
.phone-transaction b.credit { color:#178458; }
.phone-bank-notice { padding:16px; border:1px solid #cfdbd2; border-radius:10px; }
.phone-bank-notice strong { font-size:15px; font-weight:500; }
.phone-bank-notice p { font-size:14px; color:#68796d; margin:6px 0 15px; }
.phone-flights { padding:22px; background:#eef2f2; }
.phone-ticket { border:1px solid #d7e0df; background:#fff; border-radius:15px; margin-bottom:20px; overflow:hidden; box-shadow:0 5px 13px #12362908; }
.ticket-label { display:block; padding:17px 20px; color:#547b7c; background:#f7faf7; font-size:12px; letter-spacing:.5px; border-bottom:1px solid #e7ece9; }
.flight-route { display:flex; align-items:center; justify-content:space-between; padding:26px 20px; }
.flight-route strong { display:block; font-size:28px; font-weight:400; }
.flight-route span { display:block; font-size:13px; color:#7b8b83; margin-top:4px; }
.flight-route svg { transform:rotate(90deg); color:#568577; }
.ticket-details { display:grid; grid-template-columns:1fr 1fr; gap:18px 12px; padding:4px 20px 25px; }
.ticket-details span { display:block; font-size:12px; color:#7a8c81; margin-bottom:5px; }
.ticket-details b { font-size:15px; font-weight:500; }
.flight-total { border-top:1px dashed #bfcfcb; padding:20px; display:flex; justify-content:space-between; align-items:center; }
.flight-total span { font-size:14px; color:#637b6c; }
.flight-total strong { font-size:24px; font-weight:500; }
.phone-fare-note { font-size:13px; color:#65766a; line-height:1.55; margin:16px 0; }
.phone-payment { display:flex; flex-direction:column; gap:5px; font-size:14px; margin:25px 0; color:#61756a; }
.phone-payment b { color:#203f32; font-size:16px; font-weight:500; }
.boarding-strip { padding:18px 20px; border-top:1px dashed #b4c9bd; background:#eaf3eb; display:flex; flex-direction:column; gap:8px; }
.boarding-strip span { color:#507357; font-size:12px; }
.boarding-strip b { font-size:17px; font-weight:500; }
.phone-empty { padding:60px 28px; text-align:center; }
.phone-empty>svg { width:48px; height:48px; color:#5a887e; }
.phone-empty h3 { font-size:20px; font-weight:500; }
.phone-empty p { font-size:15px; color:#718477; line-height:1.5; margin-bottom:30px; }
.phone-arrival { padding:50px 25px 30px; display:flex; flex-direction:column; height:100%; }
.arrival-place { font-size:12px; color:#b8d1cd; }
.phone-arrival h2 { font-size:30px; font-weight:300; margin:15px 0 35px; }
.arrival-missed { font-size:14px; color:#e9c3b9; margin:22px 0; }
.phone-arrival .phone-primary { margin-top:auto; background:#e8eee8; color:#244139; }
@keyframes phone-arrive { from{transform:translateY(-5px);opacity:0} to{transform:translateY(0);opacity:1} }
@media(max-width:600px) { .phone-stage{padding:0}.phone-device{width:100%;height:100dvh;border:0;border-radius:0;box-shadow:none;padding-top:env(safe-area-inset-top)}.phone-home-screen{padding-top:40px}.phone-statusbar{min-height:32px}.phone-email{padding:22px}.phone-app-icon{width:56px;height:56px}.phone-system-nav{min-height:54px} }
@media(max-height:650px) and (min-width:601px) { .phone-stage{padding:8px}.phone-device{width:min(740px,100%);height:calc(100dvh - 16px);border-width:3px;border-radius:18px}.phone-statusbar{min-height:26px;padding-top:5px}.phone-app-header{min-height:52px;padding-bottom:5px;padding-top:4px}.phone-system-nav{min-height:44px}.phone-home-button{min-height:44px}.phone-home-screen{padding:15px 28px;display:grid;grid-template-columns:1fr 1fr;gap:12px 28px}.phone-clock{font-size:48px}.phone-home-notifications{margin:0;grid-row:1 / 3;grid-column:2}.phone-app-grid{padding:4px 0;margin:0}.phone-home-hint{grid-column:1 / 3;padding:0}.phone-app-view:has(.phone-messages){display:grid;grid-template-columns:1.15fr 1fr;grid-template-rows:auto 1fr}.phone-app-view:has(.phone-messages) .phone-app-header{grid-column:1 / 3}.phone-replies{max-height:none;min-height:0;border-left:1px solid #d0dccd}.phone-message{max-width:93%}.phone-call{padding:10px 25px;gap:5px}.call-avatar{margin:5px;width:50px;height:50px;font-size:22px}.phone-call p{margin:4px}.phone-arrival{padding:15px 25px;display:grid;grid-template-columns:1fr 1fr;gap:8px 25px}.phone-arrival .phone-notification{grid-row:1 / 4;grid-column:2;align-self:start}.phone-arrival h2{margin:3px 0;font-size:26px}.arrival-missed{margin:5px 0}.phone-arrival .phone-primary{grid-column:1 / 3}.phone-pause{top:0} }
@media(prefers-reduced-motion:reduce){.phone-notification{animation:none}}
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* Fictional web pages share browser controls, not the site's visual identity. */
.phone-web-launcher { display:flex; align-items:center; gap:12px; width:100%; min-height:48px; padding:12px 18px; border-radius:28px; margin-top:auto; background:#f8faf5ed; color:#63726c; text-align:left; font-size:15px; flex-shrink:0; }
.phone-home-screen .phone-app-grid { margin-top:0; }
.phone-website-preview { display:flex; flex-direction:column; gap:5px; width:100%; background:#f0f4ef; border-left:3px solid #739aac; color:#243d45; padding:11px; text-align:left; margin-top:12px; border-radius:3px; min-height:52px; }
.phone-website-preview strong { font-size:14px; font-weight:500; }
.phone-website-preview span { font-size:12px; color:#758b85; }
.web-browser-bar { display:flex; align-items:center; gap:3px; padding:3px 5px; background:#f2f4f5; border-bottom:1px solid #dde3e3; flex-shrink:0; }
.web-browser-bar .phone-icon-button { color:#485c67; }
.web-address { display:flex; align-items:center; gap:9px; min-width:0; flex:1; min-height:44px; padding:9px 12px; background:#e2e7ea; color:#485b66; border-radius:24px; font-size:13px; text-align:left; }
.web-address>span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.web-address svg { width:17px; height:17px; }
.web-browser-label { text-align:center; font-size:12px; background:#f2f4f5; color:#707d84; padding:2px 8px 6px; flex-shrink:0; }
.web-page { background:white; color:#233143; font-size:16px; }
.web-page p { font-size:16px; line-height:1.6; }
.web-page h2 { font-size:27px; line-height:1.18; font-weight:500; margin:12px 0 16px; letter-spacing:-.5px; }
.web-page h3 { font-size:18px; line-height:1.35; font-weight:500; margin:26px 0 10px; }
.web-page button:focus-visible { outline-color:#256cbe; }
.web-button { min-height:46px; background:#e6edf5; color:#204c75; padding:12px 17px; border-radius:4px; text-align:center; font-size:15px; line-height:1.45; }
.web-primary { background:#235887; color:#fff; }
.web-text-button { background:none; color:#245aa2; padding:10px 0; min-height:44px; text-align:left; font-size:14px; line-height:1.4; overflow-wrap:anywhere; }
.northstar-header { padding:18px 22px 0; border-bottom:1px solid #dce4ec; }
.northstar-brand { display:flex; align-items:center; gap:9px; padding:0; min-height:45px; background:none; color:#203c58; text-align:left; font-size:22px; line-height:1; font-weight:500; }
.northstar-brand small { display:block; font-size:9px; letter-spacing:1.8px; margin-top:6px; color:#6a7e90; }
.northstar-mark { height:35px; width:35px; display:grid; place-items:center; background:#284e72; color:#fff; font-size:22px; border-radius:2px; }
.northstar-header nav { display:flex; gap:20px; margin-top:12px; }
.northstar-nav-link { background:none; color:#6b7d8e; padding:12px 0; font-size:14px; min-height:44px; border-bottom:2px solid transparent; }
.northstar-nav-link.active { color:#204f7a; border-color:#376d9c; }
.northstar-hero { padding:30px 22px 26px; background:#f3f6f9; }
.northstar-kicker { color:#627e98; font-size:11px; letter-spacing:1.2px; }
.northstar-hero h2 { font-size:32px; max-width:330px; font-weight:500; }
.northstar-hero p { color:#607589; margin:0 0 22px; }
.northstar-office { display:block; width:100%; height:auto; aspect-ratio:2.41; object-fit:cover; }
.northstar-section { padding:25px 22px; }
.northstar-section>h3:first-child { margin-top:0; }
.northstar-service { padding:17px 0; border-bottom:1px solid #e4e9ed; }
.northstar-service b { font-size:16px; font-weight:500; }
.northstar-service p { color:#66798b; margin:7px 0 0; font-size:15px; }
.northstar-hiring { background:#eaf0f5; padding:25px 22px; }
.northstar-hiring h3 { margin-top:9px; font-size:24px; }
.northstar-hiring p { color:#63798b; }
.northstar-footer { display:flex; flex-direction:column; padding:25px 22px; gap:8px; border-top:1px solid #e0e8ef; background:#f6f8fa; }
.northstar-footer strong { font-size:14px; font-weight:500; }
.northstar-footer>span,.northstar-footer small { font-size:12px; color:#7e8e9b; }
.northstar-salary { font-size:30px; background:#f1f5f8; padding:20px; margin:25px 0; }
.northstar-salary span { display:block; font-size:13px; color:#788c9c; margin-top:6px; }
.web-page ul { padding-left:20px; font-size:15px; line-height:1.65; }
.web-page li { margin:9px 0; }
.web-page .web-muted { color:#6a7e8d; font-size:14px; }
.web-page .web-small { font-size:12px; color:#7b8b96; }
.web-page .web-email { color:#325f8f; font-size:15px; overflow-wrap:anywhere; }
.web-search { padding:18px 18px 30px; }
.web-search .web-search-brand { text-align:center; font-size:27px; color:#366ba5; font-weight:500; letter-spacing:-1px; margin:7px 0 20px; }
#phone-web-search { display:flex; align-items:center; border:1px solid #c8d3db; border-radius:25px; overflow:hidden; min-height:48px; }
#phone-web-query { background:white; color:#293a45; border:0; width:100%; min-width:0; font:16px 'IBM Plex Sans',sans-serif; padding:12px 2px 12px 16px; outline-offset:-3px; }
#phone-web-search button { background:white; color:#4976a3; display:grid; place-items:center; min-width:46px; min-height:46px; }
.web-query-suggestions { display:flex; flex-wrap:wrap; gap:7px; margin:15px 0; }
.web-query-chip { background:#f5f7f9; color:#556b7c; border:1px solid #e0e5e9; padding:10px 12px; min-height:44px; font-size:12px; border-radius:22px; }
.web-search-tabs { display:flex; align-items:center; justify-content:space-between; gap:9px; border-bottom:1px solid #dde3e8; margin:20px -18px 0; padding:0 18px; }
.web-search-tabs>span { font-size:14px; color:#285f9e; padding-bottom:12px; border-bottom:2px solid #3c77b7; }
.web-search-tabs>small { font-size:12px; color:#7e8d96; padding-bottom:12px; }
.web-result { padding:22px 0; border-bottom:1px solid #e5e9ec; }
.web-result-source { display:flex; gap:10px; font-size:13px; align-items:center; color:#405666; }
.web-result-source small { display:block; color:#8594a0; font-size:12px; margin-top:3px; }
.result-favicon { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:#edf1f3; font-size:14px; color:#6c8397; }
.web-result-title { color:#245bab; background:none; text-align:left; padding:11px 0 5px; font-size:19px; font-weight:400; line-height:1.35; min-height:44px; }
.web-result p { color:#5a6c79; font-size:14px; line-height:1.55; margin:6px 0 0; }
.web-search-empty { padding:20px 0; color:#718494; }
.web-search-empty p { font-size:15px; }
.web-article { padding:28px 22px; }
.web-category { font-size:11px; color:#7b8190; letter-spacing:1px; }
.worklane-header,.worktalk-header,.directory-header { display:flex; flex-direction:column; gap:8px; padding:20px 22px; border-bottom:1px solid #e4e7eb; }
.worklane-header { color:#464774; }
.worklane-header>span:last-child,.worktalk-header>span,.directory-header>span { font-size:12px; opacity:.7; }
.worklane-brand { font-size:26px; font-weight:600; letter-spacing:-1px; }
.worklane-brand>span { font-size:12px; padding-left:8px; font-weight:400; letter-spacing:0; }
.vacancy-salary { font-size:26px; color:#4b487a; margin:20px 0 8px; }
.listing-provenance { border-top:1px solid #e0e5e9; margin-top:30px; padding-top:20px; color:#788997; font-size:13px; }
.listing-provenance b { font-weight:500; }
.listing-provenance p { font-size:13px; margin:8px 0; }
.worktalk-header { background:#f6f5f1; color:#735344; }
.worktalk-header strong { font-size:26px; letter-spacing:-1px; }
.forum-byline { display:flex; align-items:center; gap:10px; margin:26px 0 20px; }
.forum-avatar { width:33px; height:33px; display:grid; place-items:center; background:#e4ebe5; color:#597961; border-radius:50%; }
.forum-avatar.other { background:#e5e2f0; color:#71648c; }
.forum-byline b { display:block; font-size:13px; font-weight:500; }
.forum-byline small { display:block; color:#8a939a; font-size:12px; margin-top:4px; }
.forum-divider { border-top:1px solid #e4e5e3; margin-top:25px; padding-top:18px; color:#7e888e; font-size:13px; }
.forum-foot { display:block; text-align:center; color:#90979b; font-size:12px; margin-top:30px; }
.directory-header { background:#edf2ee; color:#466751; }
.directory-header strong { font-size:18px; font-weight:500; }
.directory-details { font-size:14px; margin:25px 0; }
.directory-details>div { border-bottom:1px solid #e4eae5; padding:14px 0; }
.directory-details dt { font-size:12px; color:#819288; margin-bottom:6px; }
.directory-details dd { margin:0; color:#496152; }
.directory-details .web-text-button { padding:0; min-height:44px; }
@media(max-height:650px) and (min-width:601px){.phone-home-screen .phone-web-launcher{grid-column:1;grid-row:3;min-height:44px;margin:0}.phone-home-screen .phone-app-grid{grid-column:1;grid-row:2}.phone-home-screen .phone-home-hint{grid-column:2;grid-row:3;align-self:center}.phone-home-notifications{grid-row:1 / 3}.phone-home-screen{gap:8px 28px;padding-top:8px;padding-bottom:8px}.phone-clock{font-size:38px}.phone-clock p{font-size:13px;margin-top:3px}.phone-app-icon{width:45px;height:45px;border-radius:12px}.phone-app-launcher{gap:5px;font-size:11px}.phone-app-grid{padding:0}.web-browser-bar{padding-top:0;padding-bottom:0}.web-browser-label{padding-bottom:3px}.northstar-hero{padding:24px}.northstar-office{max-height:240px}}
@media(max-width:600px) and (max-height:650px){.phone-home-screen{padding-top:18px}.phone-clock{font-size:48px}.phone-home-notifications{margin:15px 0}.phone-home-screen .phone-app-grid{padding:15px 0 8px}.phone-web-launcher{min-height:44px;padding-top:9px;padding-bottom:9px}}
.web-page h2:focus { outline:none; }

/* "Your turn": a mock social feed on the player's own phone, then the chat it leads to. */
.social-header{padding-left:20px}
.social-choose{padding:18px;display:flex;flex-direction:column;gap:10px}
.social-choose>p{margin:0 0 6px;font-size:15px;line-height:1.55;color:#40534c}
.social-track{display:flex;flex-direction:column;gap:4px}
.social-track strong{font-size:16px;font-weight:600}
.social-track span{font-size:13px;color:#5e7068}
.social-feed{background:#f2f4f1}
.social-post{background:#fff;margin:10px 0;border-top:1px solid #e1e6e1;border-bottom:1px solid #e1e6e1}
.social-photo{position:relative;aspect-ratio:4/3;max-width:100%;overflow:hidden;background:linear-gradient(180deg,#f6c08a 0%,#f2a07a 38%,#4f8fa6 58%,#2f6f86 100%)}
.social-photo::before{content:'';position:absolute;left:58%;top:30%;width:18%;aspect-ratio:1;border-radius:50%;background:#fde3b0}
.social-photo::after{content:'';position:absolute;left:-10%;bottom:30%;width:60%;height:16%;border-radius:50% 50% 0 0;background:#2d4a3e}
.social-photo i{position:absolute;inset:auto 0 0;height:30%;background:linear-gradient(180deg,#3f8098,#2a6177)}
.social-caption{margin:12px 16px;font-size:15px;line-height:1.5}
.social-comment{display:flex;gap:10px;align-items:flex-start;padding:10px 16px;border-top:1px solid #eef1ee}
.social-comment .phone-avatar{width:34px;height:34px;font-size:15px}
.social-comment p{margin:0;font-size:15px;line-height:1.5}
.social-comment.mine{padding-left:60px}
.social-flag{display:flex;flex-direction:column;gap:4px;margin:10px 12px;padding:11px 13px;border-radius:9px;background:#fff4e5;border:1px solid #e3a85b;color:#5b3a10;flex-shrink:0}
.social-flag b{font-size:14px}
.social-flag span{font-size:14px;line-height:1.5}
.social-result{display:flex;flex-direction:column;gap:8px}
.social-result p{margin:0 0 4px;font-size:15px;line-height:1.55}
.social-chat{flex:1;min-height:0;display:flex;flex-direction:column}
.social-chat.sliding{animation:social-slide .35s ease-out}
@keyframes social-slide{from{transform:translateX(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.social-chat.sliding{animation:none}}
.social-comment.deleted p{color:#6a7a72;font-style:italic}
.social-ahead{font-size:14px;color:#5b3a10}
.social-flag{border:1px solid #a8580f;border-left-width:4px}
.phone-device .phone-primary:focus-visible{outline-offset:2px}
/* The chat slides partway in and fades, so no blank screen shows behind it. */
@keyframes social-slide{from{transform:translateX(30%);opacity:0}to{transform:none;opacity:1}}
@media (max-height:650px) and (min-width:601px){.phone-app-view:has(.social-chat){display:flex}.social-chat{display:grid;grid-template-columns:1.15fr 1fr;grid-template-rows:auto 1fr}.social-chat .phone-app-header,.phone-app-view[data-screen="social-feed"] .phone-app-header{grid-column:1 / 3}.phone-app-view[data-screen="social-feed"]{display:grid;grid-template-columns:1.15fr 1fr;grid-template-rows:auto 1fr}.social-photo{max-height:45dvh}}
/* The next step on the flight screen stays in view on short phones while the ticket scrolls. */
.phone-flight-actions { position:sticky; bottom:-22px; margin:0 -22px -22px; padding:12px 22px 22px; background:#eef2f2; box-shadow:0 -10px 14px -12px #0000003d; }
.phone-flight-actions .phone-fare-note { margin:4px 0 10px; }
.phone-flight-actions .phone-payment { margin:2px 0 10px; }
.social-next{font-size:14px;color:#3d4a44;margin:4px 0 0}


/* Game controls sit outside Kai's phone. */
.game-pause { position:fixed; top:14px; right:16px; z-index:5; display:flex; align-items:center; gap:7px; min-height:44px; padding:0 15px 0 11px; border-radius:22px; background:#0d1716d9; color:#dfe7e1; border:1px solid #ffffff2a; font:500 13px 'IBM Plex Sans',sans-serif; }
.game-pause svg { width:18px; height:18px; }
.game-pause:focus-visible { outline:3px solid #d8b779; outline-offset:2px; }
@media(max-width:600px) {
  .phone-stage { align-items:flex-end; }
  .phone-stage::before { content:'NO GOOD CHOICES'; position:fixed; left:16px; top:calc(env(safe-area-inset-top) + 16px); font:500 11px 'IBM Plex Mono',monospace; letter-spacing:.14em; color:#9eaaa2; }
  .phone-device { height:calc(100dvh - 48px - env(safe-area-inset-top)); padding-top:0; border-radius:14px 14px 0 0; }
  .game-pause { top:calc(env(safe-area-inset-top) + 2px); right:6px; border:0; background:none; }
}
@media(max-height:650px) and (min-width:601px) { .phone-device{width:min(740px,calc(100% - 120px))}.game-pause{top:8px;right:max(8px,env(safe-area-inset-right));padding:0;width:44px;justify-content:center}.game-pause span{display:none} }

/* Notes between scenes: who Kai is, the next day, the flight. */
.interlude { width:min(470px,100%); padding:28px; display:flex; flex-direction:column; gap:14px; color:#e5e4d5; animation:phone-arrive .5s ease-out; }
.interlude-date { margin:0; font:500 12px 'IBM Plex Mono',monospace; letter-spacing:.14em; text-transform:uppercase; color:#d8b779; }
.interlude h2 { margin:0 0 4px; font:600 46px/1.02 'Barlow Condensed',Impact,sans-serif; letter-spacing:.01em; }
.interlude h2:focus { outline:none; }
.interlude p { margin:0; font-size:17px; line-height:1.6; color:#cbd4cd; }
.interlude .phone-button { width:auto; align-self:flex-start; margin-top:16px; padding:13px 22px; }
.interlude .phone-button:focus-visible { outline:3px solid #d8b779; outline-offset:3px; }
@media(max-width:600px) { .phone-stage:has(.interlude){align-items:center} }
.flight-path { position:relative; height:44px; margin:2px 0 4px; border-bottom:2px dashed #ffffff38; overflow:hidden; }
.flight-plane { position:absolute; left:0; bottom:6px; width:30px; height:30px; color:#e5e4d5; transform:rotate(90deg); animation:flight 3.4s ease-in-out forwards; }
@keyframes flight { from{left:0} to{left:calc(100% - 34px)} }

/* The next thing to tap pulses softly. */
.hint { animation:hint-pulse 1.9s ease-out infinite; }
.phone-notification.hint { animation:phone-arrive .3s ease-out,hint-pulse 1.9s ease-out .3s infinite; }
.phone-app-launcher.hint { animation:none; }
.phone-app-launcher.hint .phone-app-icon { animation:hint-pulse 1.9s ease-out infinite; }
@keyframes hint-pulse { 0%{box-shadow:0 0 0 0 #1fae8499} 70%{box-shadow:0 0 0 11px #1fae8400} 100%{box-shadow:0 0 0 0 #1fae8400} }

/* A message that arrives while another app is open. */
.phone-app-view { position:relative; }
.phone-banner { position:absolute; top:6px; left:8px; right:8px; width:auto; z-index:4; background:#f6faf5; box-shadow:0 10px 30px #07141655; border:1px solid #d5e0d6; }
.phone-typing { display:flex; gap:5px; align-items:center; padding:13px 14px; }
.phone-typing i { width:7px; height:7px; border-radius:50%; background:#8b9c92; animation:typing-dot 1.1s ease-in-out infinite; }
.phone-typing i:nth-child(2) { animation-delay:.18s; }
.phone-typing i:nth-child(3) { animation-delay:.36s; }
@keyframes typing-dot { 0%,60%,100%{opacity:.35;transform:none} 30%{opacity:1;transform:translateY(-3px)} }
.phone-link strong { display:flex; align-items:center; gap:7px; }
.phone-link svg { width:16px; height:16px; }

/* Elaine's links: the typing assessment and the flight booking. */
.web-browser-bar span.web-address { margin-right:8px; }
.phone-test,.phone-booking { padding:22px 20px; display:flex; flex-direction:column; gap:2px; }
.phone-test p,.phone-booking p { margin:0 0 12px; }
.type-target { padding:14px 16px; background:#f3f6f8; border-left:3px solid #4b7a66; border-radius:4px; font-size:18px !important; }
.type-target .done { background:#d5eee2; color:#0f5f4b; }
#phone-typing { width:100%; min-height:96px; flex-shrink:0; padding:12px; border:1px solid #b9c5cc; border-radius:6px; background:#fff; color:#233143; font:16px/1.5 'IBM Plex Sans',sans-serif; resize:none; }
#phone-typing:focus-visible { outline:3px solid #256cbe; outline-offset:1px; }
#phone-typing.wrong { border-color:#b4493a; background:#fff4f1; }
.type-status { min-height:20px; color:#a03c2e !important; }
.test-done { display:flex; align-items:center; gap:8px; font-weight:600; color:#16745e; }
.phone-test .phone-primary,.phone-booking .phone-primary { margin-top:8px; }
@media(prefers-reduced-motion:reduce) { .hint,.phone-notification.hint,.phone-app-launcher.hint .phone-app-icon{animation:none;box-shadow:0 0 0 2px #1fae84}.phone-typing i,.interlude{animation:none}.flight-plane{animation:none;left:55%} }