/* Homepage product art only. All sample interfaces are authored in content/home_media.py.
   The stage stays dark; software and device screens use their familiar light surfaces. */
.hm-scene { position:relative; width:560px; height:480px; color:#20252b; font:400 14px/1.45 Inter,Arial,sans-serif; letter-spacing:-.015em; text-align:left; }
.hm-scene *, .hm-scene *::before, .hm-scene *::after { box-sizing:border-box; }
.hm-scene :is(p,b,strong,small,span,div,em,i,footer,aside) { font-family:Inter,Arial,sans-serif; text-transform:none; letter-spacing:inherit; }
.hm-scene :is(p,figure) { margin:0; }
.hm-scene :is(b,strong) { font-weight:600; }
.hm-scene em,.hm-scene i { font-style:normal; }
.hm-icon { width:20px; height:20px; flex:none; vertical-align:middle; }
.hm-avatar { width:34px; height:34px; border-radius:50%; flex:none; display:inline-grid; place-items:center; font-size:12px; font-weight:600; color:#2e5947; background:#e1eee7; }
.hm-avatar--sand { color:#765235; background:#f1e6d6; }
.hm-avatar--lilac { color:#55567d; background:#e9e8f4; }
.hm-app { position:absolute; left:6px; top:39px; width:548px; height:402px; border:1px solid #d4d9dc; border-radius:13px; background:#fff; overflow:hidden; box-shadow:0 30px 60px -15px #0009,0 2px 6px #0005; }
.hm-browser { height:29px; display:flex; align-items:center; justify-content:space-between; padding:0 12px; background:#edf0f2; border-bottom:1px solid #dce1e4; color:#59636e; font-size:9px; }
.hm-browser>span:nth-child(2) { display:flex; align-items:center; gap:5px; }
.hm-browser .hm-icon { width:10px; height:10px; }
.hm-traffic { display:flex; gap:4px; }.hm-traffic i { width:6px; height:6px; border-radius:50%; background:#c1c7cc; }.hm-traffic i:first-child { background:#ed8f86; }.hm-traffic i:nth-child(2) { background:#e7c16d; }.hm-traffic i:last-child { background:#8fc69d; }
.hm-app-layout { display:flex; height:calc(100% - 29px); }.hm-nav { width:48px; flex:none; background:#f7f9fa; border-right:1px solid #e4e8eb; display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 5px 10px; color:#687580; }
.hm-brand { width:27px; height:27px; font-size:22px; line-height:27px; color:#183d2e; letter-spacing:-4px!important; margin:0 0 10px -4px; }.hm-brand span { color:#3e8a63; }
.hm-nav>span:not(.hm-account) { width:34px; height:30px; display:grid; place-items:center; border-radius:5px; }.hm-nav .hm-icon { width:17px; height:17px; }.hm-nav>span.is-selected { color:#28674c; background:#e3efe8; }.hm-account { margin-top:auto; background:#204d3b; color:#fff; border-radius:50%; width:25px; height:25px; display:grid; place-items:center; font-size:9px; }
.hm-workspace { flex:1; min-width:0; }.hm-app-head { display:flex; justify-content:space-between; align-items:center; height:66px; padding:10px 16px; border-bottom:1px solid #e9edef; }.hm-app-head small { display:block; color:#66737d; font-size:10px; margin-bottom:3px; }.hm-app-head strong { display:block; font-size:21px; font-weight:600; letter-spacing:-.04em; }.hm-head-tools { display:flex; gap:12px; align-items:center; color:#6e7a83; }.hm-head-tools .hm-icon { width:15px; height:15px; }.hm-head-tools .hm-avatar { width:25px; height:25px; font-size:9px; }
/* Realistic phone hardware, then familiar iOS conversation structure. */
.hm-iphone { position:absolute; width:252px; height:477px; background:linear-gradient(120deg,#a7ada9,#555b57 25%,#191e1b 60%,#888e8a); border:1px solid #8a918b; border-radius:43px; padding:6px; box-shadow:0 28px 50px #0008,inset 0 0 0 2px #262d27,1px 0 0 #c3c8c0; }
.hm-iphone-screen { position:relative; width:100%; height:100%; background:#fff; border:3px solid #111713; border-radius:37px; overflow:hidden; }.hm-iphone::before { content:''; position:absolute; width:3px; height:52px; top:120px; right:-3px; background:#646e65; border-radius:0 2px 2px 0; }.hm-side-key { position:absolute; width:3px; height:34px; top:98px; left:-3px; background:#626d63; border-radius:2px 0 0 2px; }
.hm-ios-status { height:38px; display:flex; justify-content:space-between; padding:11px 18px 0; font-size:11px; }.hm-island { width:70px; height:21px; position:absolute; top:8px; left:50%; transform:translateX(-50%); border-radius:20px; background:#080a09; }.hm-island::after { content:''; position:absolute; width:6px; height:6px; top:7px; right:8px; border-radius:50%; background:#172029; }.hm-ios-person { position:relative; height:69px; display:flex; flex-direction:column; align-items:center; gap:3px; border-bottom:1px solid #e6e8e7; background:#f8f9f8; padding-top:5px; }.hm-ios-person .hm-avatar { width:34px; height:34px; font-size:12px; }.hm-ios-person strong { font-size:11px; }.hm-back { position:absolute; left:13px; top:14px; color:#387bc6; font:35px/1 Arial!important; }.hm-ios-date { text-align:center; font-size:8px; line-height:1.45; color:#69736e; margin:8px 0; }.hm-missed { display:flex; align-items:center; gap:8px; margin:0 18px 8px; padding:6px 10px; background:#f4f5f4; border-radius:10px; font-size:11px; }.hm-missed .hm-icon { color:#be4b42; width:17px; height:17px; }.hm-missed small { display:block; font-size:8px; color:#6f7672; margin-top:2px; }
.hm-sms { max-width:194px; padding:8px 10px; font-size:11px; line-height:1.35; margin:7px 12px; border-radius:15px; position:relative; }.hm-sms--sent { margin-left:auto; color:#fff; background:#347f57; border-bottom-right-radius:4px; }.hm-sms--received { color:#222b25; background:#e9ece9; border-bottom-left-radius:4px; }.hm-ios-delivered { text-align:right; font-size:7px; color:#626e65; margin:-4px 18px 6px; }.hm-ios-compose { position:absolute; bottom:18px; left:12px; right:12px; display:flex; gap:8px; align-items:center; color:#717a73; font-size:20px; }.hm-ios-compose>div { flex:1; border:1px solid #d6ddd7; color:#737e76; border-radius:20px; padding:6px 10px; font-size:10px; }.hm-ios-compose .hm-icon { width:14px; height:14px; }.hm-home-indicator { position:absolute; bottom:6px; left:50%; margin-left:-40px; width:80px; height:4px; border-radius:10px; background:#141a15; }
.hm-call-phone { left:256px; top:1px; transform:rotate(4deg); }.hm-call-record { position:absolute; top:111px; left:21px; width:275px; padding:17px; border:1px solid #d8e0db; border-radius:12px; background:#fff; box-shadow:0 20px 50px #0005; }.hm-record-heading { display:flex; align-items:center; gap:8px; font-size:12px; color:#536059; }.hm-record-heading>.hm-icon { width:16px; height:16px; color:#397b5b; }.hm-record-heading>span { margin-left:auto; }.hm-record-person { display:flex; align-items:center; gap:10px; margin:23px 0; }.hm-record-person strong { display:block; font-size:16px; }.hm-record-person small { display:block; margin-top:3px; font-size:11px; color:#717b74; }.hm-record-person .hm-avatar { width:42px; height:42px; }.hm-record-line { display:flex; gap:7px; align-items:center; font-size:10px; color:#535f57; }.hm-record-line i { width:6px; height:6px; border-radius:50%; background:#c8685d; }.hm-record-line small { margin-left:auto; font-size:9px; color:#7a827d; }.hm-record-reply { margin-top:15px; padding-top:14px; border-top:1px solid #edf0ee; display:flex; align-items:center; gap:9px; color:#2d7150; font-size:11px; }.hm-record-reply small { display:block; font-size:9px; color:#707b73; margin-top:3px; }.hm-record-reply>.hm-icon:last-child { margin-left:auto; width:16px; height:16px; }
/* Phone activity and a native, large incoming-call panel. */
.hm-phone-app { top:42px; left:4px; width:516px; height:400px; }.hm-tabs { display:flex; gap:22px; border-bottom:1px solid #e9edef; margin:0 14px; height:42px; align-items:center; font-size:11px; color:#67747b; }.hm-tabs b { height:100%; display:flex; gap:6px; align-items:center; color:#28674c; border-bottom:2px solid #3e8a63; }.hm-tabs em { background:#e8f1eb; border-radius:4px; padding:1px 5px; font-size:9px; }.hm-call-list { margin:0 14px; }.hm-list-label { display:flex; justify-content:space-between; color:#75818a; font-size:9px; padding:12px 0 3px; }.hm-call-list>div:not(:first-child) { display:flex; gap:9px; align-items:center; padding:12px 0; border-bottom:1px solid #edf0f2; }.hm-call-list .hm-avatar { width:30px; height:30px; font-size:10px; }.hm-call-list b { display:block; font-size:12px; }.hm-call-list small { display:block; color:#75818a; font-size:9px; margin-top:2px; }.hm-call-list em { margin-left:auto; font-size:10px; color:#66717a; }.hm-team { position:absolute; bottom:14px; left:65px; font-size:9px; color:#6a766e; }.hm-team>div { display:flex; align-items:center; margin-top:6px; }.hm-team .hm-avatar { width:21px; height:21px; border:2px solid #fff; margin-right:-5px; font-size:6px; }.hm-team small { margin-left:11px; font-size:9px; }
.hm-active-call { position:absolute; top:151px; right:4px; width:232px; padding:17px 17px 14px; border:1px solid #d7dfda; border-radius:18px; background:#fff; box-shadow:0 22px 50px #0006; text-align:center; }.hm-live-label { font-size:10px; color:#60716a; display:flex; justify-content:center; align-items:center; gap:5px; margin-bottom:14px; }.hm-live-label i { width:6px; height:6px; background:#3e8a63; border-radius:50%; }.hm-active-call>.hm-avatar { width:52px; height:52px; font-size:19px; margin-bottom:9px; }.hm-active-call>strong { display:block; font-size:19px; }.hm-active-call>span:not(.hm-avatar) { display:block; font-size:11px; color:#5e6d64; margin-top:3px; }.hm-active-call>small { display:block; font-size:8px; color:#748078; margin-top:7px; }.hm-call-controls { display:flex; justify-content:center; gap:29px; margin:20px 0 17px; color:#64716a; }.hm-call-controls>span { display:flex; flex-direction:column; align-items:center; gap:5px; }.hm-call-controls small { font-size:8px; }.hm-call-controls .hm-icon { width:18px; height:18px; }.hm-call-answer { display:flex; justify-content:center; align-items:center; gap:10px; color:#fff; background:#347f57; padding:10px; border-radius:8px; font-size:12px; }.hm-call-answer>.hm-icon { width:16px; height:16px; }
/* A recognisable workflow editor, with a connected vertical sequence. */
.hm-flow-app { top:12px; height:459px; }.hm-flow-top { display:flex; align-items:center; justify-content:space-between; padding:11px 12px; border-bottom:1px solid #e8ecee; font-size:11px; }.hm-flow-top>b { display:flex; gap:5px; align-items:center; color:#397153; font-size:9px; padding:4px 7px; background:#eaf4ed; border:1px solid #d3e6d8; border-radius:5px; }.hm-flow-top i { width:4px; height:4px; border-radius:50%; background:#3e8a63; }.hm-flow-canvas { position:relative; height:321px; padding-top:17px; background-color:#f8fafb; background-image:radial-gradient(#d9dfe2 .7px,transparent .8px); background-size:14px 14px; display:flex; flex-direction:column; align-items:center; }.hm-flow-connector { position:absolute; top:28px; bottom:23px; width:1px; background:#b8c4bc; }.hm-node { display:flex; align-items:center; gap:10px; position:relative; width:304px; min-height:54px; padding:10px 12px; border:1px solid #dce3e7; border-radius:7px; background:#fff; box-shadow:0 3px 5px #253a2810; }.hm-node-icon { width:31px; height:31px; display:grid; place-items:center; background:#eaf0fa; color:#52719d; border-radius:6px; }.hm-node-icon .hm-icon { width:17px; height:17px; }.hm-node-icon--mint { color:#327052; background:#e7f3eb; }.hm-node-icon--sand { color:#9e7737; background:#faf1df; }.hm-node small { display:block; color:#7b8790; font-size:7px; letter-spacing:.05em!important; margin-bottom:2px; }.hm-node b { font-size:11px; }.hm-node>.hm-icon,.hm-node-check { margin-left:auto; width:15px; color:#738078; }.hm-node-check .hm-icon { width:14px; height:14px; }.hm-node-check { color:#3e8a63; }.hm-node-plus { position:relative; display:grid; place-items:center; width:15px; height:15px; flex:none; border:1px solid #cdd7d1; border-radius:4px; background:#fff; margin:4px 0; color:#75827a; font-size:10px; }
/* Full, populated CRM rather than three empty rectangles. */
.hm-pipeline-app { height:437px; top:22px; }.hm-pipeline-tools { display:flex; align-items:center; gap:13px; height:43px; padding:0 12px; font-size:9px; }.hm-pipeline-tools b { border:1px solid #dce2e5; padding:6px 8px; border-radius:4px; }.hm-pipeline-tools>span { display:flex; gap:5px; color:#88929a; }.hm-pipeline-tools .hm-icon { width:12px; height:12px; }.hm-pipeline-tools em { margin-left:auto; background:#347f57; color:#fff; padding:6px; border-radius:4px; font-size:8px; }
.hm-kanban { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; background:#f7f9fa; padding:10px; height:298px; border-top:1px solid #e8edef; }.hm-lane { min-width:0; }.hm-lane-head { display:flex; align-items:center; gap:8px; border-top:3px solid #b1bfd2; padding-top:9px; font-size:11px; }.hm-lane:nth-child(2) .hm-lane-head { border-color:#d7ba7f; }.hm-lane--booked .hm-lane-head { border-color:#6fa685; }.hm-lane-head>span { display:grid; place-items:center; width:17px; height:17px; background:#e8edf0; border-radius:4px; font-size:9px; color:#5c6b72; }.hm-lane>small { display:block; font-size:9px; color:#76828b; margin:4px 0 11px; }.hm-lead { padding:10px 9px 0; margin:0 0 8px; border:1px solid #e1e5e8; border-radius:6px; background:#fff; box-shadow:0 2px 3px #202f2610; }.hm-lead>div { display:flex; gap:5px; align-items:center; }.hm-lead .hm-avatar { width:20px; height:20px; font-size:6px; }.hm-lead b { font-size:8px; letter-spacing:-.025em!important; }.hm-lead>div>span:last-child { color:#7e8a82; margin-left:auto; font-size:8px; }.hm-lead p { font-size:8px; color:#77828a; margin:8px 0 4px; }.hm-lead>strong { font-size:12px; }.hm-lead footer { display:flex; gap:4px; align-items:center; border-top:1px solid #eef1f2; margin-top:9px; padding:6px 0; color:#758279; font-size:7px; }.hm-lead footer .hm-icon { width:10px; height:10px; }.hm-booked-lead { border-color:#a8cbb4; }.hm-booked-lead footer { color:#2e7650; }.hm-booked-confirm { display:flex; align-items:center; justify-content:center; gap:4px; font-size:8px; color:#377956; background:#e7f2eb; padding:7px 3px; border-radius:5px; }.hm-booked-confirm .hm-icon { width:12px; height:12px; }
/* Reputation dashboard with a Google review coming back from the same customer. */
.hm-review-app { top:28px; height:352px; }.hm-reputation-top { display:grid; grid-template-columns:1fr 1fr; gap:15px; padding:17px 16px; }.hm-reputation-top>div { padding:13px; border:1px solid #e1e7e4; border-radius:7px; }.hm-reputation-top>div>span { font-size:10px; color:#69796f; }.hm-reputation-top strong { display:block; font-size:33px; line-height:1.3; letter-spacing:-.06em; margin:6px 0 3px; }.hm-reputation-top strong small { color:#e5a236; font-size:12px; letter-spacing:1px!important; vertical-align:middle; }.hm-reputation-top strong em { color:#76827a; font-size:8px; font-weight:400; margin-left:8px; letter-spacing:0!important; }.hm-reputation-top p { color:#79857d; font-size:8px; }.hm-google { display:inline-flex; font-size:12px; font-weight:600; letter-spacing:-.05em!important; }.hm-google i:nth-child(4n+1),.hm-g { color:#4285f4; }.hm-google i:nth-child(2),.hm-google i:last-child { color:#ea4335; }.hm-google i:nth-child(3) { color:#d99a00; }.hm-google i:nth-child(5) { color:#34a853; }
.hm-review-table { padding:0 16px; }.hm-review-table>div { display:flex; align-items:center; gap:8px; padding:9px 0; border-bottom:1px solid #e9edeb; font-size:10px; }.hm-review-table>div:first-child { padding:0 0 7px; }.hm-review-table>div:first-child>span { margin-left:auto; font-size:8px; color:#698478; }.hm-review-table small { display:block; font-size:8px; color:#7e8881; margin-top:2px; }.hm-review-table em { margin-left:auto; color:#397b54; font-size:8px; display:flex; gap:4px; }.hm-review-table .hm-icon { width:11px; height:11px; }.hm-review-table .hm-avatar { width:27px; height:27px; font-size:8px; }
.hm-google-review { position:absolute; left:153px; top:277px; width:350px; background:#fff; border:1px solid #dfe5e1; border-radius:12px; padding:19px; box-shadow:0 15px 35px #0005; transform:rotate(-3deg); }.hm-google-review-head { display:flex; gap:10px; align-items:center; }.hm-google-review-head b { font-size:12px; }.hm-google-review-head small { display:block; color:#808982; font-size:9px; margin-top:1px; }.hm-g { margin-left:auto; font-size:26px; font-weight:700; }.hm-stars { color:#e7a538; margin:11px 0 7px; letter-spacing:2px!important; font-size:16px; }.hm-stars>span { letter-spacing:0!important; font-size:8px; color:#7d867f; margin-left:5px; }.hm-google-review p { font-size:12px; line-height:1.6; color:#46534a; }.hm-review-owner { display:flex; align-items:center; gap:5px; font-size:9px; color:#3d7a54; margin-top:12px; }.hm-review-owner .hm-icon { width:13px; height:13px; }
/* Paid ads: account context + the actual search placement, in one composition. */
.hm-ads-app { top:25px; left:0; width:492px; height:364px; }.hm-ad-heading { display:flex; align-items:center; gap:7px; padding:14px 14px 11px; font-size:13px; }.hm-ad-heading>span:last-child { margin-left:auto; border:1px solid #d9e1e5; padding:4px 6px; border-radius:4px; font-size:8px; color:#6c7a83; }.hm-ad-mark { background:#e9f1fc; width:25px; height:25px; border-radius:5px; color:#427fc2; font-size:17px; font-weight:600; text-align:center; }.hm-ad-metrics { display:flex; margin:0 14px; background:#f6f9fc; border:1px solid #e2e9ef; border-radius:6px; padding:12px; gap:24px; }.hm-ad-metrics span { display:block; font-size:8px; color:#687786; }.hm-ad-metrics strong { font-size:23px; letter-spacing:-.04em; margin-top:4px; display:block; }.hm-chart-head { display:flex; align-items:center; justify-content:space-between; margin:13px 14px 5px; font-size:10px; }.hm-chart-head>span { display:flex; align-items:center; gap:4px; font-size:7px; color:#77848c; }.hm-chart-head i { width:5px; height:5px; border-radius:50%; background:#4b8fe0; }.hm-chart { display:flex; height:90px; padding:0 14px; gap:8px; }.hm-chart>span { display:flex; flex-direction:column; font-size:7px; line-height:21px; color:#87939c; }.hm-chart svg { flex:1; width:0; height:86px; border-bottom:1px solid #e5ebef; overflow:visible; }.hm-chart-area { fill:#edf4fd; }.hm-chart-line { fill:none; stroke:#4c8cda; stroke-width:2.5; stroke-linejoin:round; }.hm-ad-campaign { display:flex; align-items:center; gap:6px; padding:11px 14px; font-size:8px; border-top:1px solid #edf0f2; margin-top:9px; }.hm-ad-campaign i { width:5px; height:5px; border-radius:50%; background:#4a9b66; }.hm-ad-campaign>span { margin-left:auto; color:#7e8b82; }
.hm-search-card { position:absolute; width:347px; left:206px; top:192px; background:#fff; border:1px solid #d9e0e5; border-radius:12px; padding:16px 19px 0; box-shadow:0 20px 55px #0007; transform:rotate(3deg); }.hm-search-brand { display:flex; align-items:center; gap:10px; padding-bottom:12px; border-bottom:1px solid #e7ebed; }.hm-search-brand>.hm-google { font-size:17px; }.hm-search-brand>span:last-child { display:flex; align-items:center; gap:10px; font-size:9px; padding:6px 9px; border:1px solid #d8e1e9; border-radius:20px; color:#55616d; }.hm-search-brand .hm-icon { width:11px; height:11px; color:#4285f4; }.hm-search-result { padding-top:13px; }.hm-search-result>b { font-size:9px; }.hm-search-result>div:nth-child(2) { display:flex; align-items:center; gap:8px; margin-top:10px; font-size:11px; }.hm-business-icon { width:27px; height:27px; border-radius:50%; background:#e3ede7; color:#335a44; display:grid; place-items:center; font-family:Georgia,serif!important; font-size:16px; }.hm-search-result small { display:block; font-size:8px; color:#707c85; margin-top:2px; }.hm-search-result>div>span:last-child { margin-left:auto; }.hm-search-result>strong { display:block; font-size:15px; line-height:1.4; color:#2353a4; font-weight:500; margin-top:11px; }.hm-search-result p { color:#5c6871; font-size:10px; line-height:1.6; margin-top:6px; }.hm-search-links { font-size:9px; color:#3d66ac; margin:7px 0 11px; }.hm-search-result footer { display:flex; align-items:center; justify-content:center; gap:7px; padding:10px; border-top:1px solid #e4e9ec; color:#365f9a; font-size:10px; }.hm-search-result footer .hm-icon { width:12px; height:12px; }
/* DrivenOS service overview: a full conversations workspace, not another tilted phone. */
.hm-inbox-app { top:19px; height:442px; }.hm-inbox { display:grid; grid-template-columns:166px 1fr; height:347px; }.hm-contact-list { min-height:0; border-right:1px solid #e5e9eb; }.hm-contact-list>div:first-child { display:flex; justify-content:space-between; margin:14px 11px 10px; font-size:13px; }.hm-inbox-search { display:flex; align-items:center; gap:4px; margin:0 10px; padding:6px; border:1px solid #e1e6e9; border-radius:4px; font-size:7px; color:#86929a; }.hm-inbox-search .hm-icon { width:10px; height:10px; }.hm-inbox-tabs { display:flex; gap:20px; margin:13px 11px 9px; font-size:9px; color:#7e8c94; }.hm-inbox-tabs b { color:#327252; }.hm-contact { display:flex; gap:6px; padding:12px 10px; align-items:center; border-bottom:1px solid #edf0f2; }.hm-contact--active { background:#e9f3ed; border-left:2px solid #3e8a63; padding-left:8px; }.hm-contact .hm-avatar { width:27px; height:27px; font-size:9px; }.hm-contact b { font-size:9px; display:block; }.hm-contact small { font-size:7px; color:#7e8a82; display:block; margin-top:3px; }.hm-contact i { width:4px; height:4px; border-radius:50%; background:#3e8a63; margin-left:auto; }.hm-inbox-thread { min-height:0; min-width:0; position:relative; padding-bottom:64px; }.hm-thread-title { display:flex; align-items:center; gap:7px; padding:10px; border-bottom:1px solid #e7ece9; }.hm-thread-title .hm-avatar { width:27px; height:27px; font-size:9px; }.hm-thread-title b { font-size:10px; }.hm-thread-title small { display:block; font-size:7px; color:#7a887f; margin-top:2px; }.hm-thread-title>.hm-icon { margin-left:auto; width:14px; height:14px; color:#5d7465; }.hm-thread-date { display:block; font-size:7px; color:#929b95; text-align:center; margin:12px 0 8px; }.hm-thread-event { display:flex; justify-content:center; align-items:center; gap:4px; font-size:8px; color:#9c6b65; margin-bottom:9px; }.hm-thread-event .hm-icon { width:10px; height:10px; }.hm-bubble { font-size:10px; line-height:1.5; background:#eff2f0; border-radius:7px 7px 7px 2px; padding:8px 10px; max-width:185px; margin:9px 10px; }.hm-bubble--out { background:#e0f0e6; color:#315a41; border-radius:7px 7px 2px 7px; margin-left:auto; }.hm-inbox-compose { position:absolute; bottom:11px; left:10px; right:10px; height:56px; border:1px solid #dde4df; border-radius:6px; padding:7px; background:#fff; color:#9aa49d; font-size:8px; }.hm-inbox-compose>div { display:flex; align-items:center; gap:6px; margin-top:8px; color:#7c8c82; }.hm-inbox-compose .hm-icon { width:11px; height:11px; }.hm-inbox-compose b { margin-left:auto; display:flex; align-items:center; gap:4px; color:#fff; background:#347f57; padding:4px 7px; border-radius:3px; font-size:7px; }
/* Fit only the artwork. Existing section/card structure and scroll mechanics stay intact. */
#drivenos .osc-art { background:radial-gradient(ellipse at 50% 65%,#34413b66,transparent 70%),#0d1010; border-color:#ffffff0b; }
#drivenos .osc-fit:has(.hm-scene) { width:560px; height:480px; margin:-240px 0 0 -280px; }
.hm-service-art { position:relative; background:radial-gradient(ellipse at 40% 65%,#2c3a3266,transparent 75%),#0b0e0c; }
.hm-service-fit { position:absolute; width:560px; height:480px; left:50%; top:50%; margin:-240px 0 0 -280px; transform-origin:center; }
@media (max-width:600px), (min-width:901px) and (max-width:1150px) { #drivenos .osc-copy { grid-row:1; } #drivenos .osc-art { grid-row:2; } }