/* OpsIQ homepage reconciliation — page scoped, 2026-08-13. */
.op-caps-grid{grid-template-columns:repeat(6,minmax(0,1fr))!important}
.op-caps-grid>.op-cap-card{grid-column:span 2}
.op-home-card-link{display:inline-flex;align-items:center;gap:9px;width:max-content;max-width:100%;margin-top:18px;color:#2563eb;font-size:13px;font-weight:950;text-decoration:none}
.op-home-card-link svg{width:15px;transition:transform .25s ease}
.op-home-card-link:hover svg{transform:translateX(4px)}
.op-home-product-pair{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:4px}
.op-home-product-card{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,.92fr) minmax(225px,.78fr);gap:24px;min-height:342px;padding:28px;border:1px solid rgba(37,99,235,.16);border-radius:30px;background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(246,250,255,.88));box-shadow:0 26px 72px rgba(37,99,235,.12),inset 0 1px 0 #fff;transition:transform .32s ease,border-color .32s ease,box-shadow .32s ease}
.op-home-product-card:before{content:"";position:absolute;z-index:-1;width:240px;height:240px;right:-100px;top:-120px;border-radius:50%;background:radial-gradient(circle,rgba(14,165,233,.22),rgba(99,102,241,.08) 55%,transparent 72%);transition:transform .5s ease}
.op-home-product-card.is-portal:before{background:radial-gradient(circle,rgba(236,72,153,.19),rgba(124,58,237,.08) 55%,transparent 72%)}
.op-home-product-card:after{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,#2563eb,#06b6d4,#7c3aed)}
.op-home-product-card.is-portal:after{background:linear-gradient(90deg,#7c3aed,#ec4899,#06b6d4)}
.op-home-product-card:hover{transform:translateY(-7px);border-color:rgba(37,99,235,.32);box-shadow:0 34px 90px rgba(37,99,235,.18),inset 0 1px 0 #fff}.op-home-product-card:hover:before{transform:scale(1.16)}
.op-home-product-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.op-home-product-label{display:flex;align-items:center;gap:12px;margin-bottom:19px}.op-home-product-label>span:last-child{display:grid;gap:4px}.op-home-product-label small{color:#64748b;font:900 8px/1 "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.11em}.op-home-product-label b{color:#2563eb;font-size:11px;line-height:1}
.op-home-product-card.is-portal .op-home-product-label b{color:#7c3aed}
.op-home-product-icon{display:grid!important;place-items:center;width:48px;height:48px;border-radius:16px;background:linear-gradient(135deg,#0ea5e9,#6366f1);box-shadow:0 13px 30px rgba(37,99,235,.28);color:#fff}.op-home-product-card.is-portal .op-home-product-icon{background:linear-gradient(135deg,#7c3aed,#ec4899);box-shadow:0 13px 30px rgba(124,58,237,.26)}
.op-home-product-copy h3{margin:0 0 11px;color:#07111f;font-size:clamp(24px,2vw,30px);line-height:1.05;letter-spacing:-.035em}.op-home-product-copy>p{margin:0;color:#5b6b85;font-size:13px;line-height:1.65}
.op-home-product-proof{display:flex;flex-wrap:wrap;gap:7px;margin:18px 0 2px}.op-home-product-proof span{padding:8px 10px;border:1px solid rgba(37,99,235,.11);border-radius:999px;background:rgba(255,255,255,.78);color:#52627c;font-size:9px;font-weight:850;white-space:nowrap}.op-home-product-proof b{color:#2563eb}.op-home-product-card.is-portal .op-home-product-proof b{color:#7c3aed}.op-home-product-copy .op-home-card-link{margin-top:auto;padding-top:18px}
.op-home-product-preview{align-self:stretch;min-width:0;overflow:hidden;padding:15px;border:1px solid rgba(165,180,252,.20);border-radius:23px;background:linear-gradient(155deg,#09162b,#101b38 58%,#211441);box-shadow:0 22px 54px rgba(15,23,42,.24),inset 0 1px 0 rgba(255,255,255,.07);color:#fff;transform:perspective(900px) rotateY(-2deg);transition:transform .35s ease}.op-home-product-card.is-portal .op-home-product-preview{transform:perspective(900px) rotateY(2deg)}.op-home-product-card:hover .op-home-product-preview{transform:perspective(900px) rotateY(0)}
.op-home-product-preview>header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:12px;border-bottom:1px solid rgba(165,180,252,.14);font:850 8px/1.2 "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.05em;color:#c8d5ea}.op-home-product-preview>header span{display:flex;align-items:center;gap:7px;min-width:0}.op-home-product-preview>header i{width:7px;height:7px;border-radius:50%;background:#10b981;box-shadow:0 0 0 5px rgba(16,185,129,.13);animation:opHomePulse 2s ease-in-out infinite}.op-home-product-preview>header b{color:#67e8f9;font-size:7px}
.op-home-kb-flow{display:grid;gap:8px;margin-top:13px}.op-home-kb-flow article{position:relative;display:grid;gap:4px;padding:12px 13px;border:1px solid rgba(165,180,252,.12);border-radius:15px;background:rgba(255,255,255,.055);transition:background .3s ease,border-color .3s ease,transform .3s ease}.op-home-kb-flow article:after{content:"";position:absolute;right:12px;top:50%;width:6px;height:6px;border:2px solid #64748b;border-left:0;border-bottom:0;transform:translateY(-50%) rotate(45deg)}.op-home-kb-flow article.is-active{border-color:rgba(103,232,249,.35);background:linear-gradient(135deg,rgba(37,99,235,.22),rgba(6,182,212,.12));transform:translateX(3px);animation:opHomeKnowledgeStep 6s ease-in-out infinite}.op-home-kb-flow small{color:#67e8f9;font:850 7px/1 "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.08em}.op-home-kb-flow b{font-size:11px}.op-home-kb-flow span{color:#9fb0cf;font-size:8px}.op-home-kb-signal{display:flex;justify-content:space-between;gap:8px;margin-top:10px;padding:10px 11px;border-radius:13px;background:rgba(16,185,129,.10);color:#6ee7b7;font-size:7px;font-weight:900}.op-home-kb-signal b{color:#fff}
.op-home-portal-preview{background:linear-gradient(155deg,#eef5ff,#ffffff 52%,#edf2ff);color:#172033}.op-home-portal-preview>header{border-color:rgba(37,99,235,.12);color:#64748b}.op-home-portal-preview>header b{color:#059669}.op-home-portal-brand{display:flex;align-items:center;gap:8px;padding:12px 2px;color:#172033;font-size:9px}.op-home-portal-brand>i{display:grid;place-items:center;width:25px;height:25px;border-radius:8px;background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;font-style:normal;font-weight:950}.op-home-portal-brand>b{font-size:9px}.op-home-portal-brand>span{margin-left:auto;color:#64748b;font-size:6px;font-weight:800}
.op-home-portal-hero{display:grid;place-items:center;gap:8px;padding:19px 12px;border-radius:16px;background:radial-gradient(circle at 50% 0,rgba(34,211,238,.20),transparent 50%),linear-gradient(135deg,#dbeafe,#ede9fe);text-align:center}.op-home-portal-hero>small{color:#2563eb;font:900 6px/1 "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.10em}.op-home-portal-hero>b{font-size:16px;letter-spacing:-.04em}.op-home-portal-hero>span{display:flex;align-items:center;gap:7px;width:100%;padding:9px;border:1px solid rgba(37,99,235,.14);border-radius:999px;background:#fff;color:#94a3b8;font-size:7px;text-align:left;box-shadow:0 8px 20px rgba(37,99,235,.08)}.op-home-portal-hero>span i{width:8px;height:8px;border:2px solid #2563eb;border-radius:50%}
.op-home-portal-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:9px}.op-home-portal-actions span{display:grid;place-items:center;min-height:39px;padding:7px;border:1px solid rgba(37,99,235,.11);border-radius:11px;background:#fff;color:#52627c;font-size:6px;font-weight:900;text-align:center}.op-home-portal-actions span:last-child{border-color:rgba(124,58,237,.18);background:linear-gradient(135deg,#ede9fe,#dbeafe);color:#6d4aff;animation:opHomePortalAction 4.4s ease-in-out infinite}
.op-fabric-ledger .op-home-diagnostic{background:linear-gradient(135deg,rgba(6,182,212,.14),rgba(124,58,237,.10));border-color:rgba(6,182,212,.28)}
.op-fabric-ledger .op-home-diagnostic b{color:#0891b2}

.op-home-opinion-section{overflow:hidden;background:linear-gradient(145deg,#07111f 0%,#0b1730 54%,#1d123a 100%);color:#fff}
.op-home-opinion-section:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(148,163,184,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.07) 1px,transparent 1px);background-size:54px 54px;mask-image:radial-gradient(circle at 50% 25%,#000,transparent 80%)}
.op-home-opinion-section .op-prism-head{position:relative;z-index:1}
.op-home-opinion-section .op-prism-head h2{color:#fff}
.op-home-opinion-section .op-prism-head p{color:#aebcd7}
.op-home-opinion-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:38px}
.op-home-opinion-grid article{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;min-height:180px;padding:26px;border:1px solid rgba(165,180,252,.18);border-radius:28px;background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.045));box-shadow:0 28px 80px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.10);transition:transform .3s ease,border-color .3s ease,background .3s ease}
.op-home-opinion-grid article:hover{transform:translateY(-6px);border-color:rgba(34,211,238,.42);background:linear-gradient(145deg,rgba(37,99,235,.18),rgba(124,58,237,.10))}
.op-home-opinion-grid article>span{display:grid;place-items:center;width:48px;height:48px;border-radius:16px;background:linear-gradient(135deg,#2563eb,#06b6d4 58%,#7c3aed);box-shadow:0 12px 32px rgba(37,99,235,.30);font:900 12px/1 "IBM Plex Mono",monospace;color:#fff}
.op-home-opinion-grid h3{margin:2px 0 8px;color:#fff;font-size:21px;line-height:1.15}
.op-home-opinion-grid p{margin:0;color:#aebcd7;line-height:1.65}

.op-home-language-section{overflow:hidden;background:radial-gradient(circle at 84% 12%,rgba(6,182,212,.16),transparent 32%),radial-gradient(circle at 10% 78%,rgba(124,58,237,.14),transparent 35%),linear-gradient(145deg,#f7fbff,#f3f1ff)}
.op-home-language-section:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(37,99,235,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(6,182,212,.05) 1px,transparent 1px);background-size:52px 52px;mask-image:linear-gradient(to bottom,#000,transparent 92%)}
.op-home-language-layout{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.82fr) minmax(560px,1.18fr);gap:48px;align-items:center}
.op-home-language-proof{margin:24px 0;padding:17px 19px;border-left:4px solid #06b6d4;border-radius:0 18px 18px 0;background:rgba(255,255,255,.74);box-shadow:0 16px 40px rgba(37,99,235,.08);color:#334155;font-weight:800;line-height:1.55}
.op-home-language-console{position:relative;min-height:540px;padding:24px;border:1px solid rgba(37,99,235,.17);border-radius:38px;background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(255,255,255,.60));box-shadow:0 42px 110px rgba(37,99,235,.18),inset 0 1px 0 rgba(255,255,255,.92);transform:perspective(1400px) rotateY(-2.8deg);transform-origin:right center}
.op-home-language-top{display:flex;justify-content:space-between;gap:18px;align-items:center;padding-bottom:17px;border-bottom:1px solid rgba(37,99,235,.12);font:850 12px/1.2 "IBM Plex Mono",monospace;color:#475569}
.op-home-language-top span{display:flex;align-items:center;gap:9px}.op-home-language-top i{width:10px;height:10px;border-radius:50%;background:#10b981;box-shadow:0 0 0 6px rgba(16,185,129,.12);animation:opHomePulse 2s ease-in-out infinite}.op-home-language-top b{color:#2563eb}
.op-home-language-chat{display:grid;gap:12px;padding:28px 8px 20px}
.op-home-language-chat article{max-width:78%;padding:17px 19px;border-radius:22px;box-shadow:0 14px 32px rgba(15,23,42,.08)}
.op-home-language-chat article small{display:block;margin-bottom:8px;font:850 10px/1 "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.08em;color:#64748b}
.op-home-language-chat article p{margin:0;font-weight:750;line-height:1.5;color:#172033}
.op-home-language-chat .is-customer{justify-self:end;border-bottom-right-radius:6px;background:linear-gradient(135deg,#ede9fe,#dbeafe)}
.op-home-language-chat .is-operator{justify-self:start;border:1px dashed rgba(37,99,235,.30);border-bottom-left-radius:6px;background:#fff}
.op-home-language-flow{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;color:#0891b2;font:850 9px/1 "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.08em}
.op-home-language-flow i{height:1px;background:linear-gradient(90deg,transparent,#06b6d4,transparent);background-size:200% 100%;animation:opHomeFlow 2.4s linear infinite}
.op-home-language-surfaces{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:4px}
.op-home-language-surfaces span{display:grid;place-items:center;min-height:52px;padding:8px;border:1px solid rgba(37,99,235,.12);border-radius:15px;background:rgba(255,255,255,.72);color:#334155;font-size:10px;font-weight:900;text-align:center;transition:transform .25s ease,border-color .25s ease}
.op-home-language-surfaces span:hover{transform:translateY(-4px);border-color:rgba(6,182,212,.46)}
.op-home-language-policies{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.op-home-language-policies span{padding:13px 14px;border-radius:16px;background:#0b1730;color:#9fb0cf;font-size:10px}.op-home-language-policies b{display:block;margin-bottom:5px;color:#67e8f9;font-size:11px}
.op-home-flag-rail{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-top:42px;padding:22px;border:1px solid rgba(37,99,235,.12);border-radius:30px;background:rgba(255,255,255,.58);box-shadow:0 24px 70px rgba(37,99,235,.10)}
.op-home-flag-rail>span{display:flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid rgba(37,99,235,.10);border-radius:999px;background:rgba(255,255,255,.84);color:#334155;font:850 10px/1 "IBM Plex Mono",monospace;transition:transform .2s ease,box-shadow .2s ease}
.op-home-flag-rail>span:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(37,99,235,.15)}.op-home-flag-rail img{border-radius:3px;box-shadow:0 1px 4px rgba(15,23,42,.18)}
.op-home-channel-rail{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:28px 0}.op-home-channel-rail span{padding:10px 15px;border:1px solid rgba(37,99,235,.14);border-radius:999px;background:rgba(255,255,255,.74);box-shadow:0 12px 28px rgba(37,99,235,.07);color:#334155;font-size:12px;font-weight:900}
.op-home-record-card{position:relative;overflow:hidden}
.op-home-record-card:after{content:"";position:absolute;width:230px;height:230px;right:-90px;bottom:-120px;border-radius:50%;background:radial-gradient(circle,rgba(34,211,238,.34),rgba(124,58,237,.08) 55%,transparent 72%);animation:opHomeRecordGlow 4s ease-in-out infinite}
.op-home-record-card small{max-width:480px}
.op-home-record-live{position:relative;z-index:1;display:flex;align-items:center;gap:10px;width:max-content;max-width:100%;margin-top:18px;padding:10px 13px;border:1px solid rgba(16,185,129,.22);border-radius:999px;background:rgba(236,253,245,.80);color:#047857;font-size:11px;font-weight:900}
.op-home-record-live i{width:9px;height:9px;border-radius:50%;background:#10b981;box-shadow:0 0 0 7px rgba(16,185,129,.12);animation:opHomePulse 2s ease-in-out infinite}

.op-home-voc-console{position:relative;overflow:hidden;border:1px solid rgba(37,99,235,.18);border-radius:36px;background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(241,245,255,.89));box-shadow:0 38px 100px rgba(37,99,235,.17),inset 0 1px 0 rgba(255,255,255,.96);transform:perspective(1500px) rotateX(.6deg)}
.op-home-voc-console:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 84% 22%,rgba(34,211,238,.12),transparent 27%),radial-gradient(circle at 12% 82%,rgba(124,58,237,.11),transparent 30%);pointer-events:none}
.op-home-voc-top,.op-home-voc-tabs,.op-home-voc-workspace{position:relative;z-index:1}
.op-home-voc-cursor{position:absolute;z-index:4;left:20%;top:55%;display:flex;align-items:center;gap:6px;padding:6px 9px;border:1px solid rgba(124,58,237,.18);border-radius:10px;background:#fff;color:#172033;box-shadow:0 12px 30px rgba(15,23,42,.20);font-size:8px;font-weight:900;pointer-events:none;animation:opHomeCursor 7s cubic-bezier(.4,0,.2,1) infinite}.op-home-voc-cursor svg{width:12px;color:#6d4aff;transform:rotate(-35deg)}
.op-home-voc-top{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:18px 24px;border-bottom:1px solid rgba(37,99,235,.11);font:850 11px/1.2 "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.08em;color:#172033}
.op-home-voc-top span,.op-home-voc-top b{display:flex;align-items:center;gap:9px}.op-home-voc-top>span i{width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,#2563eb,#7c3aed)}.op-home-voc-top>b{color:#059669}.op-home-voc-top>b i{width:8px;height:8px;border-radius:50%;background:#10b981;box-shadow:0 0 0 6px rgba(16,185,129,.12);animation:opHomePulse 2s ease-in-out infinite}
.op-home-voc-tabs{display:flex;gap:6px;padding:13px 20px;border-bottom:1px solid rgba(37,99,235,.10);background:rgba(255,255,255,.54)}
.op-home-voc-tabs span{padding:9px 14px;border-radius:12px;color:#64748b;font-size:12px;font-weight:850}.op-home-voc-tabs .is-active{border:1px solid rgba(124,58,237,.22);background:#fff;color:#6d4aff;box-shadow:0 8px 22px rgba(124,58,237,.10)}
.op-home-voc-workspace{display:grid;grid-template-columns:minmax(250px,.82fr) minmax(330px,1.2fr) minmax(260px,.9fr);gap:14px;padding:18px}
.op-home-voc-workspace>section{min-width:0;padding:20px;border:1px solid rgba(37,99,235,.12);border-radius:24px;background:rgba(255,255,255,.82);box-shadow:0 18px 44px rgba(15,23,42,.07)}
.op-home-voc-workspace header{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:16px;color:#64748b;font:850 10px/1.2 "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.08em}.op-home-voc-workspace header b{color:#6d4aff}
.op-home-voc-queue article{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:13px 12px;border:1px solid transparent;border-radius:16px;transition:transform .25s ease,background .25s ease,border-color .25s ease}
.op-home-voc-queue article+article{margin-top:8px}.op-home-voc-queue article.is-active{border-color:rgba(124,58,237,.24);background:linear-gradient(135deg,rgba(237,233,254,.84),rgba(219,234,254,.66));animation:opHomeQueueFocus 7s ease-in-out infinite}.op-home-voc-queue article>i{width:9px;height:9px;border-radius:50%}.op-home-voc-queue .is-red{background:#ef4444}.op-home-voc-queue .is-green{background:#10b981}.op-home-voc-queue .is-amber{background:#f59e0b}.op-home-voc-queue article div{display:grid;gap:4px;min-width:0}.op-home-voc-queue article b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#172033;font-size:12px}.op-home-voc-queue article small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#64748b;font-size:9px}.op-home-voc-queue article em{padding:5px 7px;border-radius:999px;background:#f8fafc;color:#64748b;font-size:8px;font-style:normal;font-weight:900}
.op-home-voc-detail{display:flex;flex-direction:column}.op-home-voc-detail-head{display:flex;justify-content:space-between;gap:14px;align-items:center}.op-home-voc-detail-head span{color:#6d4aff;font:900 10px/1.2 "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.08em}.op-home-voc-detail-head b{padding:6px 9px;border-radius:999px;background:#fee2e2;color:#b91c1c;font-size:9px}.op-home-voc-detail blockquote{margin:28px 0;padding:0;border:0;color:#172033;font-size:clamp(19px,2vw,28px);font-weight:900;line-height:1.28}.op-home-voc-person{display:flex;align-items:center;gap:11px}.op-home-voc-person>strong{display:grid;place-items:center;width:40px;height:40px;border-radius:14px;background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff}.op-home-voc-person span{display:grid;gap:3px}.op-home-voc-person b{color:#172033;font-size:12px}.op-home-voc-person small{color:#64748b;font-size:9px}.op-home-voc-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:auto;padding-top:20px}.op-home-voc-fields span{padding:11px;border:1px solid rgba(37,99,235,.10);border-radius:14px;background:#f8fafc;color:#334155;font-size:9px;font-weight:850}.op-home-voc-fields small{display:block;margin-bottom:5px;color:#6d4aff;font:900 8px/1 "IBM Plex Mono",monospace;text-transform:uppercase}
.op-home-voc-insight{display:flex;flex-direction:column}.op-home-voc-score{display:flex;align-items:center;gap:14px;margin:8px 0 22px}.op-home-voc-score>strong{display:grid;place-items:center;width:72px;height:72px;border:8px solid #f59e0b;border-right-color:#e2e8f0;border-radius:50%;color:#172033;font-size:22px}.op-home-voc-score span{display:grid;gap:5px}.op-home-voc-score b{color:#059669;font-size:13px}.op-home-voc-score small{color:#64748b;font-size:9px}.op-home-voc-bars{display:grid;gap:14px}.op-home-voc-bars>span{display:grid;grid-template-columns:1fr auto;gap:7px;align-items:center}.op-home-voc-bars small{color:#475569;font-size:10px;font-weight:850}.op-home-voc-bars b{color:#172033;font-size:10px}.op-home-voc-bars i{grid-column:1/-1;display:block;height:7px;overflow:hidden;border-radius:999px;background:#e2e8f0}.op-home-voc-bars i:after{content:"";display:block;width:var(--score);height:100%;border-radius:inherit;background:linear-gradient(90deg,#2563eb,#06b6d4,#10b981);transform-origin:left;animation:opHomeBar 4.5s ease-in-out infinite}.op-home-voc-insight>a{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:auto;padding-top:20px;color:#2563eb;font-size:11px;font-weight:950;text-decoration:none}.op-home-voc-insight>a svg{width:15px}
.op-home-faq{position:relative;z-index:2;overflow:visible}
.op-home-faq .op-container{display:grid;grid-template-columns:minmax(260px,.78fr) minmax(0,1.22fr);gap:clamp(34px,5vw,76px);align-items:start;overflow:visible}
.op-home-faq .op-section-head{position:sticky;top:110px;align-self:start;margin:0;transform:none!important}
.op-home-faq .op-faq{min-width:0}

html[data-theme="dark"] .op-home-card-link{color:#67e8f9}
html[data-theme="dark"] .op-home-product-card{border-color:rgba(165,180,252,.17);background:linear-gradient(145deg,rgba(15,28,52,.97),rgba(20,24,55,.92));box-shadow:0 28px 76px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.07)}
html[data-theme="dark"] .op-home-product-card:hover{border-color:rgba(103,232,249,.28);box-shadow:0 36px 92px rgba(0,0,0,.43),inset 0 1px 0 rgba(255,255,255,.08)}
html[data-theme="dark"] .op-home-product-copy h3{color:#f8fbff}html[data-theme="dark"] .op-home-product-copy>p{color:#aebcd7}html[data-theme="dark"] .op-home-product-label small{color:#94a3b8}html[data-theme="dark"] .op-home-product-label b{color:#67e8f9}html[data-theme="dark"] .op-home-product-card.is-portal .op-home-product-label b{color:#d8b4fe}
html[data-theme="dark"] .op-home-product-proof span{border-color:rgba(165,180,252,.14);background:rgba(255,255,255,.055);color:#c8d5ea}html[data-theme="dark"] .op-home-product-proof b{color:#67e8f9}html[data-theme="dark"] .op-home-product-card.is-portal .op-home-product-proof b{color:#d8b4fe}
html[data-theme="dark"] .op-home-product-preview{box-shadow:0 22px 54px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.07)}
html[data-theme="dark"] .op-home-portal-preview{border-color:rgba(165,180,252,.18);background:linear-gradient(155deg,#121d34,#11182d 52%,#21173a);color:#edf4ff}html[data-theme="dark"] .op-home-portal-preview>header{border-color:rgba(165,180,252,.14);color:#aebcd7}html[data-theme="dark"] .op-home-portal-brand{color:#edf4ff}html[data-theme="dark"] .op-home-portal-brand>span{color:#9fb0cf}html[data-theme="dark"] .op-home-portal-hero{background:radial-gradient(circle at 50% 0,rgba(34,211,238,.15),transparent 52%),linear-gradient(135deg,rgba(37,99,235,.25),rgba(124,58,237,.20))}html[data-theme="dark"] .op-home-portal-hero>small{color:#67e8f9}html[data-theme="dark"] .op-home-portal-hero>span{border-color:rgba(103,232,249,.16);background:rgba(255,255,255,.08);color:#9fb0cf;box-shadow:none}html[data-theme="dark"] .op-home-portal-actions span{border-color:rgba(165,180,252,.14);background:rgba(255,255,255,.06);color:#c8d5ea}html[data-theme="dark"] .op-home-portal-actions span:last-child{border-color:rgba(216,180,254,.20);background:linear-gradient(135deg,rgba(124,58,237,.25),rgba(37,99,235,.18));color:#e9d5ff}
html[data-theme="dark"] .op-fabric-ledger .op-home-diagnostic b{color:#67e8f9}
html[data-theme="dark"] .op-home-language-section{background:radial-gradient(circle at 84% 12%,rgba(6,182,212,.12),transparent 32%),radial-gradient(circle at 10% 78%,rgba(124,58,237,.14),transparent 35%),linear-gradient(145deg,#07111f,#0b1730 55%,#16112d)}
html[data-theme="dark"] .op-home-language-console{border-color:rgba(165,180,252,.17);background:linear-gradient(145deg,rgba(255,255,255,.095),rgba(255,255,255,.04));box-shadow:0 42px 110px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.09)}
html[data-theme="dark"] .op-home-language-top{border-color:rgba(165,180,252,.15);color:#aebcd7}
html[data-theme="dark"] .op-home-language-top b{color:#67e8f9}
html[data-theme="dark"] .op-home-language-chat article p{color:#edf4ff}
html[data-theme="dark"] .op-home-language-chat article small{color:#aebcd7}
html[data-theme="dark"] .op-home-language-chat .is-customer{background:linear-gradient(135deg,rgba(124,58,237,.28),rgba(37,99,235,.22))}
html[data-theme="dark"] .op-home-language-chat .is-operator{border-color:rgba(34,211,238,.32);background:rgba(255,255,255,.07)}
html[data-theme="dark"] .op-home-language-surfaces span,html[data-theme="dark"] .op-home-flag-rail,html[data-theme="dark"] .op-home-flag-rail>span,html[data-theme="dark"] .op-home-channel-rail span{border-color:rgba(165,180,252,.15);background:rgba(255,255,255,.06);color:#e6edf9}
html[data-theme="dark"] .op-home-language-proof{background:rgba(255,255,255,.07);color:#c8d5ea;box-shadow:0 16px 40px rgba(0,0,0,.18)}
html[data-theme="dark"] .op-home-record-live{border-color:rgba(52,211,153,.24);background:rgba(16,185,129,.10);color:#6ee7b7}
html[data-theme="dark"] .op-home-voc-console{border-color:rgba(165,180,252,.18);background:linear-gradient(145deg,#09162b,#121735 66%,#1c1237);box-shadow:0 38px 100px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.07)}
html[data-theme="dark"] .op-home-voc-top{border-color:rgba(165,180,252,.14);color:#edf4ff}
html[data-theme="dark"] .op-home-voc-tabs{border-color:rgba(165,180,252,.12);background:rgba(255,255,255,.025)}
html[data-theme="dark"] .op-home-voc-tabs span{color:#94a3b8}html[data-theme="dark"] .op-home-voc-tabs .is-active{border-color:rgba(103,232,249,.22);background:rgba(255,255,255,.08);color:#67e8f9;box-shadow:none}
html[data-theme="dark"] .op-home-voc-workspace>section{border-color:rgba(165,180,252,.14);background:rgba(255,255,255,.055);box-shadow:0 18px 44px rgba(0,0,0,.24)}
html[data-theme="dark"] .op-home-voc-queue article.is-active{border-color:rgba(103,232,249,.24);background:linear-gradient(135deg,rgba(37,99,235,.22),rgba(124,58,237,.16))}
html[data-theme="dark"] .op-home-voc-queue article b,html[data-theme="dark"] .op-home-voc-detail blockquote,html[data-theme="dark"] .op-home-voc-person b,html[data-theme="dark"] .op-home-voc-score>strong,html[data-theme="dark"] .op-home-voc-bars b{color:#edf4ff}
html[data-theme="dark"] .op-home-voc-queue article small,html[data-theme="dark"] .op-home-voc-person small,html[data-theme="dark"] .op-home-voc-score small{color:#9fb0cf}
html[data-theme="dark"] .op-home-voc-queue article em,html[data-theme="dark"] .op-home-voc-fields span{border-color:rgba(165,180,252,.12);background:rgba(255,255,255,.06);color:#c8d5ea}
html[data-theme="dark"] .op-home-voc-score>strong{border-right-color:#334155}
html[data-theme="dark"] .op-home-voc-bars small{color:#c8d5ea}html[data-theme="dark"] .op-home-voc-bars i{background:#27344b}html[data-theme="dark"] .op-home-voc-insight>a{color:#67e8f9}
html[data-theme="dark"] .op-home-voc-cursor{border-color:rgba(103,232,249,.22);background:#18233a;color:#edf4ff;box-shadow:0 12px 30px rgba(0,0,0,.36)}html[data-theme="dark"] .op-home-voc-cursor svg{color:#67e8f9}

@keyframes opHomePulse{0%,100%{transform:scale(.92);opacity:.65}50%{transform:scale(1.12);opacity:1}}
@keyframes opHomeFlow{to{background-position:-200% 0}}
@keyframes opHomeRecordGlow{0%,100%{transform:scale(.92);opacity:.58}50%{transform:scale(1.08);opacity:1}}
@keyframes opHomeQueueFocus{0%,100%{transform:translateX(0);box-shadow:0 0 0 rgba(124,58,237,0)}45%,62%{transform:translateX(4px);box-shadow:0 14px 34px rgba(124,58,237,.15)}}
@keyframes opHomeBar{0%,12%{transform:scaleX(.08)}48%,100%{transform:scaleX(1)}}
@keyframes opHomeCursor{0%,12%{left:20%;top:55%;opacity:0;transform:translate(-8px,10px)}20%,43%{left:20%;top:55%;opacity:1;transform:translate(0,0)}50%,68%{left:49%;top:64%;opacity:1;transform:translate(0,0)}76%,91%{left:82%;top:72%;opacity:1;transform:translate(0,0)}100%{left:82%;top:72%;opacity:0;transform:translate(8px,-8px)}}
@keyframes opHomeKnowledgeStep{0%,100%{transform:translateX(3px);box-shadow:0 0 0 rgba(34,211,238,0)}45%,62%{transform:translateX(6px);box-shadow:0 10px 26px rgba(34,211,238,.12)}}
@keyframes opHomePortalAction{0%,100%{transform:translateY(0);box-shadow:0 0 0 rgba(124,58,237,0)}50%{transform:translateY(-2px);box-shadow:0 9px 20px rgba(124,58,237,.13)}}
@media(max-width:1240px){.op-home-product-card{grid-template-columns:1fr;min-height:0}.op-home-product-preview{min-height:276px;transform:none!important}}
@media(max-width:1080px){.op-caps-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.op-caps-grid>.op-cap-card{grid-column:auto}.op-home-product-pair{grid-template-columns:1fr}.op-home-product-card{grid-template-columns:minmax(0,.9fr) minmax(290px,1.1fr)}.op-home-product-preview{min-height:0}.op-home-language-layout{grid-template-columns:1fr}.op-home-language-console{max-width:820px;width:100%;margin:auto;transform:none}.op-home-opinion-grid{grid-template-columns:1fr 1fr}.op-home-voc-workspace{grid-template-columns:1fr 1.2fr}.op-home-voc-insight{grid-column:1/-1}.op-home-voc-insight .op-home-voc-bars{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.op-home-faq .op-container{grid-template-columns:1fr}.op-home-faq .op-section-head{position:relative;top:auto}}
@media(max-width:720px){.op-caps-grid{grid-template-columns:1fr!important}.op-home-product-card{grid-template-columns:1fr;gap:20px;padding:21px;border-radius:24px}.op-home-product-preview{min-height:0;transform:none}.op-home-product-proof span{white-space:normal}.op-home-opinion-grid{grid-template-columns:1fr}.op-home-opinion-grid article{min-height:0;padding:21px}.op-home-language-console{min-height:0;padding:17px;border-radius:26px}.op-home-language-chat article{max-width:92%}.op-home-language-surfaces{grid-template-columns:repeat(3,1fr)}.op-home-language-policies{grid-template-columns:1fr}.op-home-flag-rail{padding:15px}.op-home-flag-rail>span{padding:7px 9px}.op-home-voc-console{border-radius:25px;transform:none}.op-home-voc-top{align-items:flex-start;padding:16px}.op-home-voc-top>b{max-width:120px;text-align:right}.op-home-voc-tabs{overflow-x:auto;padding:10px 12px}.op-home-voc-tabs span{white-space:nowrap}.op-home-voc-workspace{grid-template-columns:1fr;padding:12px}.op-home-voc-insight{grid-column:auto}.op-home-voc-insight .op-home-voc-bars{grid-template-columns:1fr}.op-home-voc-fields{grid-template-columns:1fr}.op-home-record-live{border-radius:14px}.op-home-voc-cursor{display:none}}
@media(prefers-reduced-motion:reduce){.op-home-language-top i,.op-home-language-flow i,.op-home-record-card:after,.op-home-record-live i,.op-home-voc-top>b i,.op-home-voc-queue article.is-active,.op-home-voc-bars i:after,.op-home-voc-cursor,.op-home-product-preview>header i,.op-home-kb-flow article.is-active,.op-home-portal-actions span:last-child{animation:none!important}.op-home-voc-cursor{display:none}.op-home-opinion-grid article,.op-home-language-surfaces span,.op-home-flag-rail>span,.op-home-card-link svg,.op-home-product-card,.op-home-product-preview{transition:none!important}}


/* Home AI chapters and governance bridge, 2026-08-14. */
.op-home-opinion-section{
  overflow:hidden;
  background:
    radial-gradient(circle at 14% 18%,rgba(14,165,233,.12),transparent 30%),
    radial-gradient(circle at 88% 72%,rgba(124,58,237,.11),transparent 34%),
    linear-gradient(145deg,#f8fbff 0%,#f1f7ff 54%,#f8f5ff 100%);
  color:#07111f;
}
.op-home-opinion-section:before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(37,99,235,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.055) 1px,transparent 1px);
  background-size:54px 54px;
  mask-image:radial-gradient(circle at 50% 38%,#000,transparent 84%);
}
.op-home-opinion-section .op-prism-head{position:relative;z-index:1}
.op-home-opinion-section .op-prism-head h2{color:#07111f}
.op-home-opinion-section .op-prism-head p{color:#536580}
.op-home-opinion-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:38px}
.op-home-opinion-grid article{
  display:grid;grid-template-columns:auto 1fr;gap:19px;align-items:start;min-height:176px;padding:26px;
  border:1px solid rgba(37,99,235,.14);border-radius:28px;
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(246,250,255,.82));
  box-shadow:0 24px 68px rgba(37,99,235,.11),inset 0 1px 0 #fff;
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.op-home-opinion-grid article:hover{transform:translateY(-6px);border-color:rgba(14,165,233,.34);box-shadow:0 32px 82px rgba(37,99,235,.16),inset 0 1px 0 #fff}
.op-home-opinion-grid article>span{
  display:grid;place-items:center;width:50px;height:50px;border-radius:17px;
  background:linear-gradient(135deg,#2563eb,#06b6d4 58%,#7c3aed);
  box-shadow:0 13px 32px rgba(37,99,235,.25);
  font:900 12px/1 "IBM Plex Mono",monospace;color:#fff;
}
.op-home-opinion-grid h3{margin:2px 0 9px;color:#101b30;font-size:21px;line-height:1.15}
.op-home-opinion-grid p{margin:0;color:#5b6d87;line-height:1.65}

/* Shared major-product chapter system. */
.op-home-ai-layout{
  display:grid;grid-template-columns:minmax(340px,.72fr) minmax(620px,1.28fr);
  gap:clamp(42px,5vw,82px);align-items:center;
}
.op-home-ai-layout.is-reversed{grid-template-columns:minmax(620px,1.28fr) minmax(340px,.72fr)}
.op-home-ai-proof-grid{display:grid;gap:10px;margin:30px 0}
.op-home-ai-proof-grid article{
  display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:center;padding:13px 15px;
  border:1px solid rgba(165,180,252,.15);border-radius:18px;background:rgba(255,255,255,.055);
  transition:transform .25s ease,border-color .25s ease,background .25s ease;
}
.op-home-ai-proof-grid article:hover{transform:translateX(5px);border-color:rgba(103,232,249,.34);background:rgba(37,99,235,.12)}
.op-home-ai-proof-grid article>span{
  display:grid;place-items:center;width:34px;height:34px;border-radius:11px;
  background:linear-gradient(135deg,#2563eb,#06b6d4);color:#fff;
  font:900 9px/1 "IBM Plex Mono",monospace;
}
.op-home-ai-proof-grid article div{display:grid;gap:3px}
.op-home-ai-proof-grid b{color:#f8fbff;font-size:13px}
.op-home-ai-proof-grid small{color:#aebcd7;font-size:10px;line-height:1.45}

/* Admin Chat AI, deliberately dark and isolated between light sections. */
.op-home-admin-ai-section{
  overflow:hidden;background:
    radial-gradient(circle at 82% 12%,rgba(6,182,212,.15),transparent 32%),
    radial-gradient(circle at 12% 84%,rgba(124,58,237,.17),transparent 38%),
    linear-gradient(145deg,#06101e,#0b1830 56%,#181130);
}
.op-home-admin-ai-section:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(148,163,184,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.055) 1px,transparent 1px);
  background-size:48px 48px;mask-image:radial-gradient(circle at 66% 45%,#000,transparent 80%);
}
.op-home-admin-ai-section .op-container{position:relative;z-index:1}
.op-home-admin-ai-section .op-prism-copy h2{color:#fff}
.op-home-admin-ai-section .op-prism-copy>p{color:#aebcd7}
.op-home-admin-console{
  position:relative;overflow:hidden;border:1px solid rgba(103,232,249,.18);border-radius:34px;
  background:linear-gradient(145deg,rgba(8,20,40,.98),rgba(17,25,55,.96) 64%,rgba(32,18,59,.96));
  box-shadow:0 42px 110px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08);
  transform:perspective(1500px) rotateY(-1.2deg) rotateX(.7deg);
}
.op-home-admin-console:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 18%,rgba(34,211,238,.11),transparent 25%),radial-gradient(circle at 20% 82%,rgba(124,58,237,.13),transparent 31%);pointer-events:none}
.op-home-admin-console>header,.op-home-admin-console>footer,.op-home-admin-stage{position:relative;z-index:1}
.op-home-admin-console>header{
  display:flex;justify-content:space-between;align-items:center;gap:16px;padding:17px 20px;
  border-bottom:1px solid rgba(165,180,252,.13);color:#edf5ff;
  font:850 10px/1.2 "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.07em;
}
.op-home-admin-console>header span,.op-home-admin-console>header b{display:flex;align-items:center;gap:9px}
.op-home-admin-console>header span i{width:9px;height:9px;border-radius:50%;background:#10b981;box-shadow:0 0 0 7px rgba(16,185,129,.12);animation:opHomeAiPulse 2s ease-in-out infinite}
.op-home-admin-console>header b{padding:7px 10px;border-radius:999px;background:rgba(16,185,129,.10);color:#6ee7b7}
.op-home-admin-stage{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(220px,.88fr);gap:14px;padding:18px}
.op-home-admin-thread,.op-home-admin-action{
  min-width:0;padding:18px;border:1px solid rgba(165,180,252,.13);border-radius:24px;background:rgba(255,255,255,.055);
}
.op-home-admin-thread{display:grid;gap:12px}
.op-home-admin-prompt,.op-home-admin-answer{padding:15px;border-radius:17px}
.op-home-admin-prompt{background:linear-gradient(135deg,rgba(37,99,235,.23),rgba(124,58,237,.17));animation:opHomePrompt 8s ease-in-out infinite}
.op-home-admin-prompt small,.op-home-admin-answer small{display:block;margin-bottom:7px;color:#67e8f9;font:900 8px/1 "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.08em}
.op-home-admin-prompt p,.op-home-admin-answer p{margin:0;color:#d7e2f3;font-size:12px;line-height:1.5}
.op-home-admin-thinking{display:flex;flex-wrap:wrap;align-items:center;gap:7px;padding:4px 3px;color:#9fb0cf;font-size:9px}
.op-home-admin-thinking>i{width:8px;height:8px;border-radius:50%;background:#22d3ee;box-shadow:0 0 0 6px rgba(34,211,238,.11);animation:opHomeAiPulse 1.35s ease-in-out infinite}
.op-home-admin-thinking em{padding:5px 7px;border:1px solid rgba(103,232,249,.13);border-radius:999px;background:rgba(255,255,255,.05);color:#c8d5ea;font-style:normal;font-weight:850}
.op-home-admin-answer{border:1px solid rgba(52,211,153,.18);background:rgba(16,185,129,.08);animation:opHomeAnswer 8s ease-in-out infinite}
.op-home-admin-answer strong{display:block;margin-bottom:5px;color:#f8fbff;font-size:17px}
.op-home-admin-action{display:flex;flex-direction:column}
.op-home-admin-action-head{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:18px;color:#67e8f9;font:900 8px/1.2 "IBM Plex Mono",monospace;text-transform:uppercase}
.op-home-admin-action-head b{padding:5px 7px;border-radius:999px;background:rgba(245,158,11,.13);color:#fbbf24}
.op-home-admin-action>strong{color:#fff;font-size:16px;line-height:1.35}
.op-home-admin-checks{display:grid;gap:9px;margin:18px 0}
.op-home-admin-checks span{display:flex;align-items:center;gap:9px;color:#aebcd7;font-size:9px}
.op-home-admin-checks i{width:8px;height:8px;border-radius:50%;background:#10b981}
.op-home-admin-checks .is-live i{background:#f59e0b;box-shadow:0 0 0 6px rgba(245,158,11,.12);animation:opHomeAiPulse 1.6s ease-in-out infinite}
.op-home-admin-scope{margin-top:auto;padding:12px;border:1px solid rgba(165,180,252,.12);border-radius:14px;background:#06101f}
.op-home-admin-scope small{display:block;margin-bottom:6px;color:#94a3b8;font-size:8px;text-transform:uppercase}
.op-home-admin-scope code{color:#67e8f9;font-size:9px}
.op-home-admin-action button{
  display:flex;justify-content:space-between;align-items:center;width:100%;margin-top:11px;padding:12px 14px;border:0;border-radius:14px;
  background:linear-gradient(90deg,#2563eb,#06b6d4);color:#fff;font-weight:900;box-shadow:0 12px 26px rgba(14,165,233,.18);
  animation:opHomeAction 3.2s ease-in-out infinite;
}
.op-home-admin-console>footer{display:flex;flex-wrap:wrap;gap:8px;padding:0 18px 18px}
.op-home-admin-console>footer span{padding:7px 9px;border:1px solid rgba(165,180,252,.12);border-radius:999px;background:rgba(255,255,255,.045);color:#9fb0cf;font-size:8px;font-weight:850}

/* Client Chat AI, a light chapter that breaks the dark rhythm. */
.op-home-client-ai-section{
  overflow:hidden;background:
    radial-gradient(circle at 12% 18%,rgba(34,211,238,.14),transparent 31%),
    radial-gradient(circle at 88% 82%,rgba(124,58,237,.12),transparent 35%),
    linear-gradient(145deg,#f8fbff,#eff7ff 55%,#f8f4ff);
}
.op-home-client-ai-section:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(37,99,235,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.05) 1px,transparent 1px);
  background-size:48px 48px;mask-image:radial-gradient(circle at 42% 50%,#000,transparent 83%);
}
.op-home-client-ai-section .op-container{position:relative;z-index:1}
.op-home-client-ai-section .op-prism-copy h2,.op-home-client-ai-section .op-prism-head h2{color:#07111f}
.op-home-client-ai-section .op-prism-copy>p{color:#536580}
.op-home-ai-proof-grid.is-client article{border-color:rgba(37,99,235,.13);background:rgba(255,255,255,.76);box-shadow:0 12px 28px rgba(37,99,235,.07)}
.op-home-ai-proof-grid.is-client article:hover{border-color:rgba(14,165,233,.30);background:#fff}
.op-home-ai-proof-grid.is-client b{color:#172033}
.op-home-ai-proof-grid.is-client small{color:#5f7089}
.op-home-ai-proof-grid.is-client article>span{background:linear-gradient(135deg,#7c3aed,#2563eb 58%,#06b6d4)}
.op-home-client-console{
  position:relative;overflow:hidden;border:1px solid rgba(37,99,235,.17);border-radius:34px;
  background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(241,247,255,.90));
  box-shadow:0 40px 100px rgba(37,99,235,.17),inset 0 1px 0 #fff;
  transform:perspective(1500px) rotateY(1.1deg) rotateX(.6deg);
}
.op-home-client-console:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 10%,rgba(124,58,237,.10),transparent 27%),radial-gradient(circle at 12% 84%,rgba(34,211,238,.12),transparent 30%);pointer-events:none}
.op-home-client-console>header,.op-home-client-console>footer,.op-home-client-workspace{position:relative;z-index:1}
.op-home-client-console>header{
  display:flex;justify-content:space-between;align-items:center;gap:16px;padding:17px 20px;border-bottom:1px solid rgba(37,99,235,.11);
  color:#172033;font:850 10px/1.2 "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.07em;
}
.op-home-client-console>header span,.op-home-client-console>header b{display:flex;align-items:center;gap:9px}
.op-home-client-console>header span i{width:9px;height:9px;border-radius:50%;background:#10b981;box-shadow:0 0 0 7px rgba(16,185,129,.12);animation:opHomeAiPulse 2s ease-in-out infinite}
.op-home-client-console>header b{padding:7px 10px;border-radius:999px;background:#ecfdf5;color:#047857}
.op-home-client-workspace{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(210px,.8fr);gap:14px;padding:18px}
.op-home-client-chat,.op-home-client-context{min-width:0;padding:17px;border:1px solid rgba(37,99,235,.11);border-radius:24px;background:rgba(255,255,255,.76)}
.op-home-client-person{display:flex;align-items:center;gap:10px;margin-bottom:15px}
.op-home-client-person>strong{display:grid;place-items:center;width:38px;height:38px;border-radius:13px;background:linear-gradient(135deg,#7c3aed,#2563eb);color:#fff}
.op-home-client-person>span{display:grid;gap:3px;min-width:0}.op-home-client-person b{color:#172033;font-size:11px}.op-home-client-person small{color:#64748b;font-size:8px}
.op-home-client-person em{margin-left:auto;padding:6px 8px;border-radius:999px;background:#e0f2fe;color:#0369a1;font-size:8px;font-style:normal;font-weight:900}
.op-home-client-chat article{max-width:86%;padding:12px 13px;border-radius:16px;color:#172033;font-size:10px}
.op-home-client-chat article small{display:block;margin-bottom:5px;color:#64748b;font-size:7px;font-weight:900;text-transform:uppercase}
.op-home-client-chat article p{margin:0;line-height:1.45}
.op-home-client-chat article>span{display:inline-flex;margin-top:8px;padding:5px 7px;border-radius:8px;background:rgba(255,255,255,.66);color:#6d4aff;font-size:7px;font-weight:900}
.op-home-client-chat .is-visitor{margin-left:auto;background:linear-gradient(135deg,#ede9fe,#dbeafe);animation:opHomeClientMessage 9s ease-in-out infinite}
.op-home-client-chat .is-operator{margin-top:9px;border:1px dashed rgba(14,165,233,.35);background:#f0f9ff}
.op-home-client-chat .is-ai{margin:9px 0 0 auto;background:linear-gradient(135deg,#5b3df5,#2563eb);color:#fff;animation:opHomeClientReply 9s ease-in-out infinite}
.op-home-client-chat .is-ai small{color:#bfdbfe}
.op-home-client-signal{display:flex;align-items:center;gap:8px;margin:9px 0;padding:8px 10px;border-radius:12px;background:#ecfdf5;color:#047857;font-size:8px;font-weight:850}
.op-home-client-signal i,.op-home-client-live i{width:7px;height:7px;border-radius:50%;background:#10b981;animation:opHomeAiPulse 1.5s ease-in-out infinite}
.op-home-client-context{display:flex;flex-direction:column;gap:10px}
.op-home-client-live{display:flex;align-items:center;gap:8px;color:#047857;font:900 8px/1.2 "IBM Plex Mono",monospace;text-transform:uppercase}
.op-home-client-context article{padding:12px;border:1px solid rgba(37,99,235,.10);border-radius:15px;background:#f8fafc}
.op-home-client-context small{display:block;margin-bottom:5px;color:#6d4aff;font-size:7px;font-weight:900;text-transform:uppercase}
.op-home-client-context b{display:block;color:#172033;font-size:10px}.op-home-client-context p{margin:4px 0 0;color:#64748b;font-size:8px;line-height:1.4}
.op-home-client-handoff{margin-top:auto;padding:13px;border-radius:16px;background:#0b1730;color:#fff;animation:opHomeHandoff 9s ease-in-out infinite}
.op-home-client-handoff small{color:#67e8f9}.op-home-client-handoff b{color:#fff}.op-home-client-handoff span{display:block;margin-top:5px;color:#aebcd7;font-size:8px;line-height:1.4}
.op-home-client-console>footer{display:flex;flex-wrap:wrap;gap:6px;padding:0 18px 18px}
.op-home-client-console>footer span{padding:6px 8px;border:1px solid rgba(37,99,235,.10);border-radius:999px;background:rgba(255,255,255,.72);color:#536580;font-size:7px;font-weight:900}

/* Dark theme parity without producing adjacent light-theme dark blocks. */
html[data-theme="dark"] .op-home-opinion-section{background:radial-gradient(circle at 14% 18%,rgba(14,165,233,.12),transparent 30%),radial-gradient(circle at 88% 72%,rgba(124,58,237,.12),transparent 34%),linear-gradient(145deg,#0a1528,#101a34 55%,#1b1434);color:#fff}
html[data-theme="dark"] .op-home-opinion-section .op-prism-head h2,html[data-theme="dark"] .op-home-opinion-grid h3{color:#f8fbff}
html[data-theme="dark"] .op-home-opinion-section .op-prism-head p,html[data-theme="dark"] .op-home-opinion-grid p{color:#aebcd7}
html[data-theme="dark"] .op-home-opinion-grid article{border-color:rgba(165,180,252,.15);background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.035));box-shadow:0 24px 68px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.07)}
html[data-theme="dark"] .op-home-client-ai-section{background:radial-gradient(circle at 12% 18%,rgba(34,211,238,.11),transparent 31%),radial-gradient(circle at 88% 82%,rgba(124,58,237,.14),transparent 35%),linear-gradient(145deg,#081426,#101934 55%,#1c1437)}
html[data-theme="dark"] .op-home-client-ai-section .op-prism-copy h2,html[data-theme="dark"] .op-home-client-ai-section .op-prism-head h2{color:#f8fbff}
html[data-theme="dark"] .op-home-client-ai-section .op-prism-copy>p{color:#aebcd7}
html[data-theme="dark"] .op-home-ai-proof-grid.is-client article{border-color:rgba(165,180,252,.14);background:rgba(255,255,255,.055);box-shadow:none}
html[data-theme="dark"] .op-home-ai-proof-grid.is-client b{color:#f8fbff}
html[data-theme="dark"] .op-home-ai-proof-grid.is-client small{color:#aebcd7}
html[data-theme="dark"] .op-home-client-console{border-color:rgba(165,180,252,.17);background:linear-gradient(145deg,#09162b,#121735 66%,#1c1237);box-shadow:0 40px 100px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.07)}
html[data-theme="dark"] .op-home-client-console>header{border-color:rgba(165,180,252,.13);color:#edf4ff}
html[data-theme="dark"] .op-home-client-console>header b{background:rgba(16,185,129,.10);color:#6ee7b7}
html[data-theme="dark"] .op-home-client-chat,html[data-theme="dark"] .op-home-client-context{border-color:rgba(165,180,252,.13);background:rgba(255,255,255,.05)}
html[data-theme="dark"] .op-home-client-person b,html[data-theme="dark"] .op-home-client-context b{color:#edf4ff}
html[data-theme="dark"] .op-home-client-person small,html[data-theme="dark"] .op-home-client-context p{color:#9fb0cf}
html[data-theme="dark"] .op-home-client-chat .is-visitor{background:linear-gradient(135deg,rgba(124,58,237,.27),rgba(37,99,235,.22));color:#edf4ff}
html[data-theme="dark"] .op-home-client-chat .is-operator{border-color:rgba(34,211,238,.28);background:rgba(14,165,233,.08);color:#edf4ff}
html[data-theme="dark"] .op-home-client-context article{border-color:rgba(165,180,252,.12);background:rgba(255,255,255,.055)}
html[data-theme="dark"] .op-home-client-console>footer span{border-color:rgba(165,180,252,.12);background:rgba(255,255,255,.05);color:#c8d5ea}

/* Motion makes both product mockups feel actively used. */
@keyframes opHomeAiPulse{0%,100%{transform:scale(.88);opacity:.58}50%{transform:scale(1.14);opacity:1}}
@keyframes opHomePrompt{0%,100%{transform:translateY(0)}14%,24%{transform:translateY(-2px);box-shadow:0 12px 30px rgba(37,99,235,.14)}}
@keyframes opHomeAnswer{0%,25%{opacity:.45;transform:translateY(5px)}38%,100%{opacity:1;transform:translateY(0)}}
@keyframes opHomeAction{0%,58%,100%{transform:translateY(0);filter:saturate(1)}70%,82%{transform:translateY(-2px);filter:saturate(1.18);box-shadow:0 16px 34px rgba(14,165,233,.30)}}
@keyframes opHomeClientMessage{0%,100%{transform:translateY(0)}12%,22%{transform:translateY(-2px)}}
@keyframes opHomeClientReply{0%,48%{opacity:.42;transform:translateY(6px)}62%,100%{opacity:1;transform:translateY(0)}}
@keyframes opHomeHandoff{0%,68%{box-shadow:0 0 0 rgba(16,185,129,0)}78%,92%{box-shadow:0 0 0 3px rgba(16,185,129,.20),0 14px 30px rgba(15,23,42,.18)}}

@media(max-width:1220px){
  .op-home-ai-layout,.op-home-ai-layout.is-reversed{grid-template-columns:1fr}
  .op-home-ai-layout.is-reversed .op-home-client-console{order:2}
  .op-home-ai-layout.is-reversed .op-prism-copy{order:1}
  .op-home-admin-console,.op-home-client-console{width:min(900px,100%);margin:auto;transform:none}
}
@media(max-width:760px){
  .op-home-opinion-grid{grid-template-columns:1fr}
  .op-home-opinion-grid article{min-height:0;padding:21px}
  .op-home-admin-stage,.op-home-client-workspace{grid-template-columns:1fr}
  .op-home-admin-console,.op-home-client-console{border-radius:25px}
  .op-home-admin-console>header,.op-home-client-console>header{align-items:flex-start}
  .op-home-admin-console>header b,.op-home-client-console>header b{max-width:140px;text-align:right}
  .op-home-client-chat article{max-width:92%}
}
@media(prefers-reduced-motion:reduce){
  .op-home-admin-console>header span i,.op-home-admin-prompt,.op-home-admin-answer,.op-home-admin-checks .is-live i,.op-home-admin-action button,
  .op-home-client-console>header span i,.op-home-client-chat .is-visitor,.op-home-client-chat .is-ai,.op-home-client-signal i,.op-home-client-live i,.op-home-client-handoff{animation:none!important}
  .op-home-admin-console,.op-home-client-console,.op-home-opinion-grid article,.op-home-ai-proof-grid article{transition:none!important}
}

/* ============================================================================
   WS3 (2026-09-14) — PeopleOS HR on the home page.
   Page scoped: this stylesheet is loaded by saas/public/index.php and nothing
   else, so nothing here can reach another page.
   ========================================================================= */

/* The hero trust rail gained a clickable pill. `.op-trust span` already paints
   the pill; the anchor inside only needs its underline removed. */
.op-trust span.op-trust-link{padding:0;border:0;background:none}
.op-trust span.op-trust-link>a{display:inline-block;padding:8px 11px;border-radius:999px;background:var(--op-surface2);border:1px solid rgba(109,93,252,.34);color:inherit;text-decoration:none;transition:border-color .22s ease,transform .22s ease,box-shadow .22s ease}
.op-trust span.op-trust-link>a:hover{border-color:rgba(109,93,252,.62);transform:translateY(-2px);box-shadow:0 10px 26px rgba(109,93,252,.18)}

/* Owner 2026-09-14: the Command Center and Safe AI Actions became ONE card with
   a switch, so the grid is back to SIX cards, two full rows of three, and the
   orphan seventh is gone by construction rather than by a layout trick. An
   earlier fix centred the seventh, and a later one made it a full-width band;
   both were working around a card count that should not have been seven.

   The switch reuses the house method from .op-plans-toggle on /pricing: a pill
   rail whose selected item carries the brand gradient. It is CSS-only, driven
   by two hidden radios, so it needs no script and a CSP cannot break it; the
   radios also give it real keyboard support for free.                        */
.op-cap-switchcard{display:flex;flex-direction:column}
.op-cap-radio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
/* The switch sits ON the card's top edge as a badge, placed exactly where
   .op-plan-badge sits on the pricing cards (top:14px right:14px). It is
   OUT OF FLOW, so the glyph, title and copy start at the same y as every
   other card in the row and the card keeps its height. It cannot overhang
   the edge: .op-cap-card is overflow:hidden for its decorative blob, and
   turning that off would let the blob escape. */
.op-cap-switch{position:absolute;top:14px;right:14px;z-index:3;display:flex;gap:4px;width:max-content;max-width:calc(100% - 28px);margin:0;padding:4px;border:1px solid var(--op-stroke);border-radius:999px;background:var(--op-surface2);box-shadow:0 6px 18px rgba(15,23,42,.08)}
.op-cap-switch label{padding:6px 12px;border-radius:999px;color:var(--op-muted);font-size:10.5px;font-weight:900;letter-spacing:.02em;white-space:nowrap;cursor:pointer;transition:background .22s ease,color .22s ease}
.op-cap-switch label:hover{color:var(--op-text)}
#op-cap-face-cc:checked ~ .op-cap-switch label[for="op-cap-face-cc"],
#op-cap-face-sa:checked ~ .op-cap-switch label[for="op-cap-face-sa"]{background:linear-gradient(135deg,#2563eb,#06b6d4 55%,#7c3aed);color:#fff;box-shadow:0 8px 20px rgba(37,99,235,.28)}
#op-cap-face-cc:focus-visible ~ .op-cap-switch label[for="op-cap-face-cc"],
#op-cap-face-sa:focus-visible ~ .op-cap-switch label[for="op-cap-face-sa"]{outline:2px solid #2563eb;outline-offset:2px}
/* Both faces occupy the same grid cell, so the card is always as tall as the
   TALLER of the two and swapping does not make the row jump. */
.op-cap-faces{display:grid;flex:1}
.op-cap-faces>.op-cap-face{grid-area:1/1;visibility:hidden;opacity:0;transition:opacity .2s ease}
#op-cap-face-cc:checked ~ .op-cap-faces>.face-cc,
#op-cap-face-sa:checked ~ .op-cap-faces>.face-sa{visibility:visible;opacity:1}
@media(prefers-reduced-motion:reduce){.op-cap-faces>.op-cap-face,.op-cap-switch label{transition:none!important}}

/* ---- The dedicated PeopleOS HR section -------------------------------------
   The ground is two POSITIONED radial glows over a base gradient, following
   .tp3-hero in opsiq-team-performance.css.

   ⚠ NO MELT ELLIPSE. The recipe's oversized border-radius:50% ::after was
   built here and the OWNER REMOVED IT (2026-09-14): clipped by the section's
   overflow:hidden it drew a hard pale arc across the top of the section with
   the lavender glows left stranded outside it, which read as a shape sitting
   on the page rather than as a blend. It is not needed: this base gradient
   ends on #f7f4ff and .op-prism-fabric begins on #f8fbff, so the two sections
   already hand off with no visible seam. Do not reinstate it.              */
.op-home-people-section{
  background:
    radial-gradient(circle at 13% 16%,rgba(109,93,252,.17),transparent 30%),
    radial-gradient(circle at 88% 10%,rgba(34,211,238,.13),transparent 32%),
    linear-gradient(162deg,#f4f7ff 0%,#edf3ff 46%,#f7f4ff 100%);
}
.op-home-people-section .op-prism-head{position:relative;z-index:1;margin-bottom:34px}
/* The scene is three panels wide, so it takes the full container and the copy
   sits beneath it as a three-column deck. A side-by-side split would have
   scaled the 1000-unit viewBox down to ~0.7 and rendered its 8px labels at
   under six real pixels. */
.op-home-people-layout{position:relative;z-index:1;display:block}
.op-home-people-section .op-prism-copy{margin-top:26px}
.op-home-people-section .op-home-ai-proof-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0}
.op-home-people-section .op-home-ai-proof-grid article{align-items:start}

/* The scene carries its own dark ground so it reads identically in both
   themes, exactly like .op-home-product-preview and .op-home-client-console. */
.op-home-people-stage{position:relative;padding:16px;border:1px solid rgba(165,180,252,.20);border-radius:30px;background:linear-gradient(150deg,#09162b,#101b38 56%,#1d1440);box-shadow:0 34px 92px rgba(15,23,42,.30),inset 0 1px 0 rgba(255,255,255,.07);color:#fff;overflow:hidden}
.op-home-people-stage:before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 14% 0,rgba(109,93,252,.24),transparent 62%),radial-gradient(52% 46% at 92% 8%,rgba(34,211,238,.16),transparent 66%);pointer-events:none}
.op-home-people-stage>header,.op-home-people-stage>footer,.op-home-people-svg{position:relative}
.op-home-people-stage>header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 6px 13px;border-bottom:1px solid rgba(165,180,252,.14);font:850 9px/1.2 "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.05em;color:#c8d5ea}
.op-home-people-stage>header span{display:flex;align-items:center;gap:8px;min-width:0}
.op-home-people-stage>header i{width:7px;height:7px;border-radius:50%;background:#10b981;box-shadow:0 0 0 5px rgba(16,185,129,.13);animation:opHomePulse 2s ease-in-out infinite}
.op-home-people-stage>header b{color:#67e8f9;font-size:8px}
.op-home-people-scroll{position:relative;margin:12px 0 4px}
.op-home-people-svg{display:block;width:100%;height:auto}
.op-home-people-stage>footer{display:flex;flex-wrap:wrap;gap:6px;padding-top:12px;border-top:1px solid rgba(165,180,252,.14)}
.op-home-people-stage>footer span{padding:7px 10px;border-radius:999px;border:1px solid rgba(165,180,252,.14);background:rgba(255,255,255,.055);color:#c8d5ea;font-size:9px;font-weight:850;white-space:nowrap}
.op-home-people-section .op-prism-actions{display:flex;flex-wrap:wrap;align-items:center;gap:13px;margin-top:22px}
/* Owner 2026-09-14: the section closes on the house button, same as the
   other prism sections. The 'See how it is packaged' link that used to sit
   beside it was removed and is not coming back. */

html[data-theme="dark"] .op-home-people-section{
  background:
    radial-gradient(circle at 13% 16%,rgba(109,93,252,.16),transparent 31%),
    radial-gradient(circle at 88% 10%,rgba(34,211,238,.13),transparent 34%),
    linear-gradient(162deg,#08142a,#0d1832 48%,#170f2d);
}
html[data-theme="dark"] .op-home-people-section .op-prism-head h2{color:#f8fbff}
html[data-theme="dark"] .op-home-people-section .op-prism-head p{color:#aebcd7}

@media(max-width:1080px){
  .op-home-people-section .op-home-ai-proof-grid{grid-template-columns:1fr}
}
/* Three panels at phone width scale the 8-unit viewBox labels to about
   2.6 real pixels, which is decoration, not information. The house answer
   for a wide diagram is the one .op-api-map uses on /developers: pin a
   readable minimum and let the scene scroll inside its own box, never the
   page. The stage keeps overflow:hidden so its glow and radius still clip. */
@media(max-width:900px){
  .op-home-people-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .op-home-people-svg{min-width:660px}
  .op-home-people-scroll::after{content:"";position:sticky;right:0;top:0;float:right;width:34px;height:100%;background:linear-gradient(90deg,transparent,rgba(9,22,43,.85));pointer-events:none}
}
@media(max-width:760px){
  .op-home-people-stage{padding:12px;border-radius:24px}
  .op-home-people-stage>header{align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){
  .op-home-people-stage>header i{animation:none!important}
  .op-home-people-svg animate,.op-home-people-svg animateMotion,.op-home-people-svg animateTransform{display:none}
}
@media(max-width:560px){
  .op-cap-switch{padding:3px}
  .op-cap-switch label{padding:5px 9px;font-size:9.5px}
}

/* ============================================================= *
 * COMMERCE ON THE HOME PAGE (2026-09-15)
 * Reuses the two-column op-home-ai-layout the Client Chat and
 * Admin Chat rows use, so the new row reads as part of the same
 * sequence rather than a bolted-on block.
 * ============================================================= */
.op-home-commerce-section{position:relative}
.op-home-commerce-console{
  position:relative;display:flex;flex-direction:column;border-radius:26px;overflow:hidden;
  border:1px solid rgba(120,150,210,.24);
  background:linear-gradient(145deg,#ffffff,#f2f7ff 62%,#eef3ff);
  box-shadow:0 40px 100px rgba(28,54,116,.16),inset 0 1px 0 #fff;
}
.op-home-commerce-console>header{
  display:flex;align-items:center;gap:10px;padding:14px 18px;
  border-bottom:1px solid rgba(120,150,210,.2);background:rgba(255,255,255,.72);
  font-size:12.5px;font-weight:900;color:#1b2b4e;
}
.op-home-commerce-console>header span{display:inline-flex;align-items:center;gap:7px}
.op-home-commerce-console>header span i{width:7px;height:7px;border-radius:50%;background:#13b981;animation:opHomeCmPulse 1.8s ease-in-out infinite}
.op-home-commerce-console>header b{margin-left:auto;font-weight:800;color:#6b7f a3;color:#6b7fa3;font-size:11.5px}
@keyframes opHomeCmPulse{0%,100%{opacity:1}50%{opacity:.3}}

.op-home-commerce-shop{padding:16px 18px 6px}
.op-home-commerce-banner{
  position:relative;border-radius:16px;padding:20px 22px;overflow:hidden;
  background:
    radial-gradient(circle at 18% 22%,rgba(124,58,237,.9),transparent 58%),
    radial-gradient(circle at 84% 16%,rgba(6,182,212,.85),transparent 56%),
    radial-gradient(circle at 62% 92%,rgba(232,121,249,.7),transparent 60%),
    linear-gradient(140deg,#0b1a3c,#20114a);
}
.op-home-commerce-banner b{display:block;font-size:19px;font-weight:950;letter-spacing:-.022em;color:#fff}
.op-home-commerce-banner span{display:block;margin-top:5px;font-size:11px;font-weight:900;letter-spacing:.16em;color:#a5c8ff}
.op-home-commerce-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.op-home-commerce-grid article{
  padding:10px;border-radius:13px;background:#fff;border:1px solid rgba(120,150,210,.2);
  transition:transform .35s cubic-bezier(.16,.84,.34,1);
}
.op-home-commerce-grid article:hover{transform:translateY(-4px)}
.op-home-commerce-grid i{display:block;height:52px;border-radius:9px;margin-bottom:8px}
.op-home-commerce-grid i.a{background:linear-gradient(150deg,#4f7cf6,#16295f)}
.op-home-commerce-grid i.b{background:linear-gradient(150deg,#2fd4c6,#0b4d47)}
.op-home-commerce-grid i.c{background:linear-gradient(150deg,#f0a8ea,#4c1d70)}
.op-home-commerce-grid b{display:block;font-size:12.5px;font-weight:900;color:#0d1a38}
.op-home-commerce-grid small{display:block;margin-top:2px;font-size:11px;font-weight:700;color:#7186a8}
.op-home-commerce-pills{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.op-home-commerce-pills span{
  font-size:11px;font-weight:900;color:#2563eb;padding:5px 11px;border-radius:999px;
  background:rgba(37,99,235,.1);
}

.op-home-commerce-thread{
  padding:16px 18px;border-top:1px solid rgba(120,150,210,.2);
  background:linear-gradient(160deg,#0f1c33,#111a2f);
}
.op-home-commerce-msg{
  max-width:86%;margin-left:auto;padding:11px 14px;border-radius:15px;
  font-size:13px;color:#e6eeff;background:#1f3350;
}
.op-home-commerce-card{
  margin-top:12px;border-radius:16px;overflow:hidden;background:#fff;
  box-shadow:0 18px 40px rgba(0,0,0,.3);
}
.op-home-commerce-card header{
  display:flex;align-items:center;gap:8px;padding:9px 14px;
  font-size:10.5px;font-weight:900;letter-spacing:.1em;color:#fff;
  background:linear-gradient(120deg,#2563eb,#7c3aed);
}
.op-home-commerce-card header i{width:13px;height:13px;border-radius:50%;background:rgba(255,255,255,.28);position:relative}
.op-home-commerce-card header i::after{content:"";position:absolute;left:3.6px;top:5px;width:4px;height:2px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.op-home-commerce-card b{display:block;padding:13px 14px 0;font-size:14.5px;font-weight:900;color:#0d1a38}
.op-home-commerce-card small{display:block;padding:4px 14px 0;font-size:11.5px;font-weight:700;color:#6d82a6}
.op-home-commerce-card button{
  display:block;width:calc(100% - 28px);margin:12px 14px 14px;padding:10px;border:0;border-radius:999px;
  font-size:12.5px;font-weight:900;color:#fff;cursor:default;
  background:linear-gradient(120deg,#2563eb,#7c3aed);
}
.op-home-commerce-done{
  display:flex;align-items:center;gap:11px;margin-top:12px;padding:12px 14px;border-radius:15px;
  background:rgba(19,185,129,.14);border:1px solid rgba(19,185,129,.3);
}
.op-home-commerce-done i{width:22px;height:22px;border-radius:50%;background:#13b981;flex:none;position:relative}
.op-home-commerce-done i::after{content:"";position:absolute;left:6px;top:8px;width:6px;height:3px;border-left:2.2px solid #fff;border-bottom:2.2px solid #fff;transform:rotate(-45deg)}
.op-home-commerce-done b{display:block;font-size:12.5px;font-weight:900;color:#7ff0c6}
.op-home-commerce-done span{font-size:11px;font-weight:700;color:#9fdcc4}
.op-home-commerce-console>footer{
  display:flex;flex-wrap:wrap;gap:6px;padding:12px 18px;
  border-top:1px solid rgba(120,150,210,.2);background:rgba(255,255,255,.7);
}
.op-home-commerce-console>footer span{
  font-size:10.5px;font-weight:900;color:#41527a;padding:5px 10px;border-radius:999px;
  background:rgba(105,130,180,.12);
}

html[data-theme="dark"] .op-home-commerce-console{
  border-color:rgba(165,180,252,.17);
  background:linear-gradient(145deg,#09162b,#121735 66%,#1c1237);
  box-shadow:0 40px 100px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.07);
}
html[data-theme="dark"] .op-home-commerce-console>header,
html[data-theme="dark"] .op-home-commerce-console>footer{background:rgba(255,255,255,.05);border-color:rgba(165,180,252,.15)}
html[data-theme="dark"] .op-home-commerce-console>header{color:#e6eeff}
html[data-theme="dark"] .op-home-commerce-grid article{background:rgba(255,255,255,.06);border-color:rgba(165,180,252,.16)}
html[data-theme="dark"] .op-home-commerce-grid b{color:#eaf2ff}
html[data-theme="dark"] .op-home-commerce-console>footer span{color:#cfdcf5;background:rgba(255,255,255,.08)}

@media (max-width:860px){
  .op-home-commerce-grid{grid-template-columns:1fr 1fr}
  .op-home-commerce-grid article:nth-child(3){display:none}
}
@media (max-width:520px){
  .op-home-commerce-grid{grid-template-columns:1fr}
  .op-home-commerce-grid article:nth-child(3){display:block}
  .op-home-commerce-banner{padding:16px}
  .op-home-commerce-banner b{font-size:17px}
}

/* The home Commerce scene reuses the /commerce hero hardware verbatim
 * (partials/commerce-scenes.php + opsiq-commerce-devices.css). It only needs
 * room to stand in and the float cards positioned for this column. */
.op-home-commerce-wide{display:grid;gap:clamp(34px,4.6vw,64px)}
.op-home-commerce-stage{
  position:relative;display:grid;place-items:center;isolation:isolate;
  padding:clamp(18px,3vw,40px) 0 clamp(52px,6vw,92px);
}
.op-home-commerce-stage .cm-hero-duo{width:min(100%,900px)}
.op-home-commerce-stage .cm-hero-phone{right:-30px;bottom:-54px}
.op-home-commerce-stage .cm-hero-phone .cm-phone{width:248px}
.op-home-commerce-stage .cm-float.a{top:2%;left:-1%}
.op-home-commerce-stage .cm-float.b{bottom:12%;right:-1%}
.op-home-commerce-stage .cm-float.c{bottom:-2%;left:6%}

.op-home-commerce-proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px}
.op-home-commerce-proof article{
  display:grid;grid-template-columns:44px 1fr;gap:15px;align-items:start;
  padding:22px;border-radius:18px;background:rgba(255,255,255,.82);
  border:1px solid rgba(120,150,210,.22);box-shadow:0 26px 70px rgba(28,54,116,.1);
  transition:transform .38s cubic-bezier(.16,.84,.34,1),box-shadow .38s ease;
}
.op-home-commerce-proof article:hover{transform:translateY(-5px);box-shadow:0 36px 90px rgba(28,54,116,.16)}
.op-home-commerce-proof span{
  display:grid;place-items:center;width:44px;height:44px;border-radius:14px;
  font-size:14px;font-weight:950;color:#fff;background:linear-gradient(135deg,#7c3aed,#2563eb);
}
.op-home-commerce-proof b{display:block;font-size:16px;font-weight:900;color:#0d1a38;margin-bottom:6px}
.op-home-commerce-proof small{display:block;font-size:13.6px;line-height:1.58;color:#5c6d8c}
.op-home-commerce-cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

html[data-theme="dark"] .op-home-commerce-proof article{background:rgba(16,25,57,.78);border-color:rgba(165,180,252,.18)}
html[data-theme="dark"] .op-home-commerce-proof b{color:#eaf2ff}
html[data-theme="dark"] .op-home-commerce-proof small{color:#bccbe8}
@media (max-width:900px){
  .op-home-commerce-stage{padding-bottom:22px}
  .op-home-commerce-stage .cm-hero-phone{margin-top:-52px}
  .op-home-commerce-stage .cm-hero-phone .cm-phone{width:min(64vw,212px)}
  .op-home-commerce-stage .cm-float{position:static;margin:12px 0 0;width:100%;animation:none}
}

/* THE HOME HERO LEAD SITS ON THE HOUSE SCALE (2026-09-15)
 *
 * Every feature hero sizes its lead through `.op-mkt-hero .op-lead`,
 * which is clamp(14px, 1.05vw, 17px) — about 15px at 1440. The home
 * hero is a cinema hero, not an .op-mkt-hero, so it fell through to
 * `.op-cinema-lead` at clamp(16px, 1.45vw, 19px) and rendered 19px:
 * four pixels larger than every page it links to, which is what the
 * owner spotted. Home keeps a touch more presence than a feature
 * page, but it stops shouting.
 *
 * Scoped here rather than in opsiq-marketing-3d.css because that
 * sheet is shared, and this sheet loads only on the home page.
 */
.op-cinema-lead{font-size:clamp(15px,1.2vw,17.5px);line-height:1.62}