@charset "UTF-8";

/* A product showroom: calm surfaces, generous typography, and working previews. */
:root {
  color-scheme: light;
  --page: #fff;
  --surface: #fff;
  --soft: #f3f7fc;
  --soft-blue: #eaf2fc;
  --ink: #132a49;
  --muted: #66788e;
  --quiet: #8a99ac;
  --line: #e0e8f1;
  --blue: #1766dc;
  --blue-hover: #0b50bc;
  --blue-soft: #edf4ff;
  --navy: #102b50;
  --header: rgb(255 255 255 / 91%);
  --shadow: 0 24px 80px rgb(37 69 114 / 9%);
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 104px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.75; -webkit-font-smoothing: antialiased; }
body:has(dialog[open]) { overflow: hidden; }
main { overflow: clip; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; cursor: pointer; }
button, input { border-radius: 0; }
a { color: inherit; text-decoration: none; }
button { background: none; border: 0; }
img, picture { display: block; max-width: 100%; }
img { height: auto; }
svg { flex-shrink: 0; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { font-weight: 600; line-height: 1.35; }
h1 { font-size: clamp(42px, 4.9vw, 64px); letter-spacing: -.045em; }
h2 { font-size: clamp(30px, 3.3vw, 43px); letter-spacing: -.035em; }
h3 { font-size: 20px; letter-spacing: -.02em; }
p { color: var(--muted); }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #458df4; outline-offset: 5px; }
::selection { background: #cce0ff; color: #10315f; }
.icon { width: 21px; height: 21px; vertical-align: middle; }
.container { width: min(1200px, calc(100% - 80px)); margin-inline: auto; }
.section { padding-top: 112px; padding-bottom: 112px; }
.section + .section.container { border-top: 1px solid var(--line); }
.soft-section { background: var(--soft); }
.eyebrow { color: var(--blue); font-size: 11px; line-height: 1.5; font-weight: 650; letter-spacing: .16em; display: flex; align-items: center; gap: 10px; margin-bottom: 21px; }
.eyebrow > span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.section-heading { margin-bottom: 47px; max-width: 800px; }
.section-heading > p:last-child:not(.eyebrow) { max-width: 660px; margin-top: 19px; font-size: 16px; }
.lead { font-size: 19px; line-height: 1.85; }
.actions { display: flex; flex-wrap: wrap; gap: 13px; align-items: center; margin-top: 32px; }
.button { min-height: 48px; padding: 12px 23px; border: 1px solid transparent; border-radius: 9px; font-size: 14px; font-weight: 550; line-height: 1.55; display: inline-flex; align-items: center; justify-content: center; gap: 21px; transition: background .2s, border-color .2s, box-shadow .2s, transform .2s; }
.button .icon { width: 17px; height: 17px; transition: transform .2s; }
.button:hover .icon { transform: translateX(3px); }
.button.primary { color: #fff; background: var(--blue); box-shadow: 0 4px 11px rgb(23 102 220 / 13%); }
.button.primary:hover { background: var(--blue-hover); }
.button.secondary { background: var(--surface); border-color: var(--line); color: var(--ink); }
.button.secondary:hover { border-color: #9bbbea; background: var(--blue-soft); }
.button.light { background: #fff; color: #153f76; }
.button.light:hover { background: #dfeeff; }
.button.ghost { color: #fff; border-color: rgb(255 255 255 / 32%); }
.button.ghost:hover { background: rgb(255 255 255 / 9%); border-color: #fff; }
.button.text { padding-inline: 0; min-height: 38px; color: var(--blue); border: 0; border-radius: 2px; }
.center-action { text-align: center; margin-top: 35px; }
.icon-box { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; background: var(--blue-soft); color: var(--blue); border-radius: 14px; flex: none; }
.icon-box .icon { width: 23px; height: 23px; }
.check-list { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 13px; }
.check-list li { display: flex; align-items: flex-start; gap: 11px; font-size: 14px; color: var(--ink); }
.check-list .icon { width: 17px; height: 17px; color: var(--blue); margin-top: 4px; }
.tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 27px; }
.tags > span { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 6px 13px; font-size: 12px; color: var(--muted); }
.section-number { display: block; color: var(--blue); font-size: 11px; font-weight: 650; letter-spacing: .1em; margin-bottom: 22px; }
.visual-caption { text-align: center; font-size: 11px; color: var(--quiet); margin-top: 20px; letter-spacing: .03em; }
.note { padding: 17px 0; margin-top: 30px; color: var(--muted); font-size: 12px; border-top: 1px solid var(--line); }
.status-dot { width: 6px; height: 6px; display: inline-block; background: #4aab90; border-radius: 50%; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 20px; top: -100px; z-index: 1000; padding: 12px 20px; border-radius: 8px; background: var(--blue); color: white; }
.skip-link:focus { top: 12px; }

/* Site navigation */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--header); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; height: 83px; align-items: center; justify-content: space-between; gap: 23px; }
.brand { display: inline-flex; align-items: center; gap: 11px; flex: none; white-space: nowrap; }
.brand img { width: 106px; height: auto; }
.brand > span { color: var(--blue); font-size: 11px; font-weight: 550; border-left: 1px solid var(--line); padding-left: 11px; }
.main-nav { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 25px); margin-left: auto; }
.main-nav > a { font-size: 13px; color: var(--muted); position: relative; white-space: nowrap; padding: 29px 0; transition: color .2s; }
.main-nav > a:hover, .main-nav > a[aria-current="page"] { color: var(--blue); }
.main-nav > a[aria-current="page"]::after { content: ""; position: absolute; height: 2px; width: 17px; background: var(--blue); left: 0; bottom: 19px; border-radius: 2px; }
.header-actions { display: flex; align-items: center; gap: 15px; }
.theme-toggle, .menu-toggle { display: flex; align-items: center; justify-content: center; width: 33px; height: 38px; color: var(--muted); border-radius: 8px; padding: 7px; }
.theme-toggle:hover, .menu-toggle:hover { background: var(--soft); color: var(--blue); }
.theme-toggle .icon { width: 18px; height: 18px; }
.theme-toggle .sun { display: none; }
.header-contact { font-size: 12px; min-height: 39px; padding: 9px 14px; gap: 13px; }
.menu-toggle { display: none; }

/* Opening composition */
.hero { padding-top: 72px; padding-bottom: 74px; display: grid; grid-template-columns: 1fr 1.13fr; align-items: center; gap: 42px; }
.hero h1 { line-height: 1.31; }
h1 > span, .hero h1 span { color: var(--blue); }
.hero .lead { max-width: 450px; font-size: 18px; margin-top: 25px; }
.hero-detail { max-width: 450px; font-size: 14px; line-height: 1.85; margin-top: 15px; }
.hero-notes { display: flex; flex-wrap: wrap; gap: 19px; margin-top: 32px; }
.hero-notes > span { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11px; }
.hero-notes .icon { width: 13px; height: 13px; color: var(--blue); }
.hero-art { position: relative; min-width: 0; padding-bottom: 27px; }
.hero-art picture { overflow: hidden; border-radius: 24px 24px 90px 24px; background: #e9f0f9; }
.hero-art img { width: 100%; aspect-ratio: 1.17; object-fit: cover; object-position: 44% center; }
.hero-art-caption { position: absolute; bottom: 50px; left: -25px; padding: 14px 20px; border-radius: 9px; background: rgb(255 255 255 / 94%); box-shadow: 0 7px 32px rgb(25 64 110 / 9%); border: 1px solid rgb(255 255 255 / 80%); color: #234266; font-size: 12px; display: flex; align-items: center; gap: 9px; }
.hero-art-note { position: absolute; right: 10px; bottom: 0; font-size: 10px; color: var(--quiet); }
.hero.hero-showcase { padding-top: 68px; padding-bottom: 51px; display: flex; flex-direction: column; gap: 38px; text-align: center; }
.hero-showcase .hero-copy { width: 100%; }
.hero-showcase .eyebrow { justify-content: center; }
.hero-showcase h1 { font-size: clamp(42px, 5vw, 67px); line-height: 1.25; }
.hero-showcase .lead { max-width: 680px; margin: 23px auto 0; }
.hero-showcase .hero-detail { max-width: 700px; margin: 10px auto 0; }
.hero-showcase .actions, .hero-showcase .hero-notes { justify-content: center; }
.hero-showcase .hero-notes { margin-top: 23px; }
.hero-showcase .hero-art { width: 100%; max-width: 1080px; padding-bottom: 0; }
.hero-showcase .hero-art picture { border-radius: 21px; }
.hero-showcase .hero-art img { aspect-ratio: 3 / 2; object-fit: contain; object-position: center; }
.hero-showcase .hero-art-caption { bottom: 24px; left: 24px; }
.hero-showcase .hero-art-note { bottom: 25px; right: 24px; background: rgb(255 255 255 / 76%); color: #60718a; padding: 5px 10px; border-radius: 5px; }
.product-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
.product-strip > .container { display: grid; grid-template-columns: repeat(4, 1fr); }
.product-strip > .container > div { display: flex; gap: 17px; align-items: center; padding: 30px 23px; border-right: 1px solid var(--line); }
.product-strip > .container > div:first-child { padding-left: 0; }
.product-strip > .container > div:last-child { border-right: 0; }
.product-strip .icon { width: 25px; height: 25px; color: var(--blue); }
.product-strip strong, .product-strip small { display: block; }
.product-strip strong { font-size: 14px; font-weight: 600; }
.product-strip small { color: var(--muted); font-size: 11px; margin-top: 3px; }
.capability-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 39px; border-top: 1px solid var(--line); }
.capability { display: flex; flex-direction: column; padding: 34px 2px 32px; min-width: 0; border-bottom: 1px solid var(--line); transition: border-color .2s; }
.capability-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 23px; }
.capability .index { font-size: 12px; color: var(--quiet); font-variant-numeric: tabular-nums; }
.capability h3 { font-size: 20px; }
.capability p { margin-top: 12px; line-height: 1.8; font-size: 14px; }
.text-link { color: var(--blue); font-size: 12px; display: flex; gap: 9px; align-items: center; margin-top: 22px; }
.text-link .icon { width: 15px; height: 15px; transition: transform .2s; }
.capability:hover { border-color: var(--blue); }
.capability:hover .text-link .icon { transform: translateX(4px); }
.capability:hover .icon-box { background: var(--blue); color: white; }

/* Live product exhibition */
.product-demo { display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 80px; }
.demo-copy > p { max-width: 420px; margin-top: 24px; font-size: 15px; }
.demo-copy > .button { margin-top: 25px; }
.product-tabs { display: grid; gap: 2px; margin-top: 33px; max-width: 410px; }
.product-tabs button { position: relative; text-align: left; padding: 20px 21px 20px 63px; border-bottom: 1px solid var(--line); border-left: 2px solid transparent; color: var(--muted); font-size: 16px; font-weight: 600; transition: background .2s, color .2s; }
.product-tabs button > .icon { position: absolute; left: 23px; top: 24px; width: 22px; height: 22px; }
.product-tabs button > span { display: block; color: var(--quiet); font-size: 12px; margin-top: 5px; font-weight: 400; }
.product-tabs button[aria-selected="true"] { background: var(--surface); color: var(--blue); border-left-color: var(--blue); border-bottom-color: transparent; border-radius: 0 10px 10px 0; box-shadow: 0 7px 25px rgb(25 68 120 / 4%); }
.product-tabs button:hover { color: var(--blue); }
.phone-stage { min-width: 0; position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; padding: 24px 0 6px; }
.phone-stage::before { content: ""; position: absolute; width: 480px; height: 480px; max-width: 108%; background: radial-gradient(ellipse, #dceafa 0%, #e4effb 49%, transparent 72%); border-radius: 50%; z-index: -1; top: 130px; left: 50%; transform: translateX(-50%); }
.stage-label { font-size: 11px; color: var(--muted); letter-spacing: .03em; text-align: center; margin-bottom: 23px; }
.stage-label > span { display: block; color: var(--quiet); font-size: 8px; letter-spacing: .22em; margin-top: 3px; }
.phone { width: 344px; height: 660px; max-width: 100%; border: 6px solid #293446; border-radius: 45px; background: #fff; box-shadow: 0 0 0 1px #8490a1, inset 0 0 0 1px #dbe4ef, 12px 23px 33px rgb(26 48 79 / 11%); overflow: hidden; display: flex; flex-direction: column; position: relative; color: #182b41; font-family: var(--font); }
.phone-status { height: 43px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; position: relative; flex: none; font-size: 11px; font-weight: 650; letter-spacing: -.03em; }
.phone-status > span:last-child { font-size: 10px; letter-spacing: -.09em; }
.phone-island { position: absolute; width: 81px; height: 22px; top: 9px; left: 50%; transform: translateX(-50%); border-radius: 14px; background: #111926; }
.phone-panel { flex: 1; min-height: 0; overflow: hidden; padding: 6px 16px 10px; background: #fff; }
.phone-heading { display: flex; align-items: center; justify-content: space-between; margin: 1px 2px 18px; }
.phone-heading strong { font-size: 23px; letter-spacing: -.04em; font-weight: 650; }
.phone-heading .icon { width: 18px; height: 18px; }
.phone-search { display: flex; align-items: center; gap: 8px; background: #f1f5f9; border-radius: 9px; padding: 8px 11px; color: #8b97a8; font-size: 10px; }
.phone-search .icon { width: 14px; height: 14px; }
.phone-chats { margin-top: 9px; }
.avatar { width: 43px; height: 43px; display: inline-block; flex: none; border-radius: 12px; background: #dbe6f5 url('./portraits.webp') var(--avatar-position, 0%) 50% / 500% 100% no-repeat; }
.chat-row { display: flex; align-items: center; gap: 10px; padding: 14px 0; border-bottom: 1px solid #eff2f6; }
.chat-row > span:nth-child(2) { flex: 1; min-width: 0; }
.chat-row strong { display: block; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-row small { display: block; font-size: 9px; color: #95a0b0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px; }
.chat-meta { align-self: stretch; min-width: 29px; text-align: right; display: flex; flex-direction: column; align-items: flex-end; padding-top: 3px; gap: 8px; }
.chat-meta small { margin: 0; font-size: 8px; }
.chat-meta b { width: 14px; height: 14px; border-radius: 50%; background: #2473e2; color: #fff; font-size: 8px; font-weight: 500; text-align: center; line-height: 14px; }
.chat-note { margin: 23px -3px 0; text-align: center; font-size: 8px; color: #9aa5b4; display: flex; gap: 4px; justify-content: center; align-items: center; }
.chat-note .icon { width: 10px; height: 10px; }
.phone-nav { height: 59px; background: #fafcfe; border-top: 1px solid #eaf0f6; display: flex; align-items: center; justify-content: space-around; padding: 6px 10px 3px; flex: none; }
.phone-nav > span { display: flex; align-items: center; gap: 3px; flex-direction: column; color: #8c98a8; font-size: 8px; line-height: 1.5; }
.phone-nav > span:first-child, .phone-nav > .active { color: #2175e3; }
.phone-nav .icon { width: 20px; height: 20px; }
.home-indicator { height: 17px; position: relative; background: #fafcfe; flex: none; }
.home-indicator::after { content: ""; width: 96px; height: 4px; background: #1c2633; border-radius: 5px; position: absolute; left: 50%; top: 4px; transform: translateX(-50%); }
.stage-note { display: flex; gap: 7px; align-items: center; color: var(--muted); font-size: 10px; margin-top: 25px; letter-spacing: .04em; }
.phone-stage .visual-caption { margin-top: 6px; font-size: 9px; }
.circle-banner { border-radius: 10px; padding: 20px 16px 17px; background: linear-gradient(110deg, #e0edf8, #edf4f9); position: relative; overflow: hidden; margin-bottom: 20px; }
.circle-banner::after { content: ""; width: 99px; height: 99px; background: linear-gradient(150deg, #d3e5f6, #a9c4e2); border: 14px solid #e8f1fa; border-radius: 50%; position: absolute; right: -12px; top: 34px; }
.circle-banner > * { position: relative; z-index: 1; }
.circle-banner small { display: block; font-size: 9px; color: #7291b0; }
.circle-banner strong { display: block; font-size: 20px; line-height: 1.45; color: #295678; margin: 7px 0; }
.circle-banner > span { font-size: 8px; color: #7592ac; }
.post-head { display: flex; align-items: center; gap: 9px; }
.post-head .avatar { width: 32px; height: 32px; border-radius: 9px; }
.post-head strong, .post-head small { display: block; }
.post-head strong { font-size: 10px; }
.post-head small { font-size: 8px; color: #97a3b2; margin-top: 1px; }
.post-copy { color: #69798c; font-size: 9px; margin: 10px 0; }
.post-photo { overflow: hidden; border-radius: 8px; }
.post-photo img { width: 100%; height: 123px; object-fit: cover; }
.post-actions { display: flex; align-items: center; color: #8a98aa; font-size: 8px; gap: 6px; margin: 10px 1px 0; }
.post-actions .icon { width: 13px; height: 13px; }
.post-actions .icon:nth-child(2) { margin-left: 10px; }
.vip-card { background: radial-gradient(ellipse at 85% 30%, #415675, transparent 60%), linear-gradient(130deg, #152d4c, #17273e); color: #eddbb6; border-radius: 13px; padding: 21px; min-height: 182px; position: relative; overflow: hidden; box-shadow: 0 7px 14px rgb(22 38 60 / 14%); }
.vip-card::after { content: ""; position: absolute; width: 150px; height: 150px; border-radius: 50%; border: 1px solid rgb(219 200 161 / 20%); right: -36px; top: 36px; box-shadow: 0 0 0 16px rgb(219 200 161 / 5%), 0 0 0 34px rgb(219 200 161 / 3%); }
.vip-card > span { display: block; font-size: 8px; letter-spacing: .19em; }
.vip-card > strong { display: block; font-size: 23px; line-height: 1.45; margin-top: 18px; letter-spacing: -.03em; }
.vip-card > small { display: block; font-size: 8px; margin-top: 13px; opacity: .7; }
.phone-subheading { font-size: 13px; margin: 27px 2px 17px; color: #253d5b; }
.vip-perks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.vip-perks > span { display: flex; align-items: center; flex-direction: column; gap: 9px; padding: 12px 2px; background: #f6f8fc; border-radius: 8px; }
.vip-perks .icon { color: #9e8257; width: 22px; height: 22px; }
.vip-perks b { font-weight: 500; font-size: 8px; color: #708093; }
.phone-footnote { text-align: center; font-size: 9px; color: #92a1b3; margin-top: 25px; }

/* Editorial sections and the operator's workspace */
.editorial, .split { display: grid; grid-template-columns: 1fr 1fr; gap: 85px; align-items: center; }
.editorial > div, .split > div { min-width: 0; }
.editorial picture { overflow: hidden; border-radius: 10px; }
.editorial img { width: 100%; aspect-ratio: 1.06; object-fit: cover; object-position: center; }
.editorial h2 + p, .split h2 + p { margin-top: 23px; max-width: 460px; line-height: 1.95; font-size: 15px; }
.image-label { display: block; font-size: 11px; color: var(--quiet); margin-top: 15px; }
.dashboard { background: var(--surface); border: 1px solid #dce5ef; border-radius: 13px; overflow: hidden; box-shadow: var(--shadow); width: 100%; }
.dash-bar { display: flex; align-items: center; justify-content: space-between; padding: 15px 23px; border-bottom: 1px solid var(--line); background: var(--surface); gap: 16px; font-size: 11px; color: var(--muted); }
.window-dots { display: flex; gap: 6px; align-items: center; width: 60px; }
.window-dots i { display: block; width: 7px; height: 7px; border-radius: 50%; background: #c9d4e2; }
.window-dots i:first-child { background: #ecaea9; }
.window-dots i:nth-child(2) { background: #e9cea0; }
.window-dots i:last-child { background: #a9cdbb; }
.dash-demo-label { color: var(--quiet); font-size: 9px; letter-spacing: .04em; }
.dash-body { display: grid; grid-template-columns: 185px minmax(0, 1fr); min-height: 443px; }
.dash-sidebar { background: var(--soft); padding: 30px 17px; border-right: 1px solid var(--line); }
.dash-sidebar > strong { display: block; font-size: 13px; margin: 0 12px 25px; }
.dash-sidebar [role="tablist"] { display: grid; gap: 7px; }
.dash-sidebar button, .dash-sidebar > span { width: 100%; text-align: left; display: flex; align-items: center; gap: 11px; padding: 11px 13px; color: var(--muted); font-size: 11px; border-radius: 6px; }
.dash-sidebar button .icon, .dash-sidebar > span .icon { width: 16px; height: 16px; }
.dash-sidebar button[aria-selected="true"] { background: var(--blue); color: white; box-shadow: 0 3px 9px rgb(23 102 220 / 11%); }
.dash-sidebar button:hover:not([aria-selected="true"]) { color: var(--blue); background: var(--blue-soft); }
.dash-sidebar > span { margin-top: 57px; }
.dash-content { min-width: 0; padding: 29px 33px 21px; }
.dash-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 15px; }
.dash-title small { font-size: 9px; color: var(--quiet); }
.dash-title h3 { font-size: 21px; margin-top: 5px; }
.admin-avatar { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: var(--blue-soft); color: var(--blue); border-radius: 50%; font-size: 11px; font-weight: 650; }
.dash-content [role="tabpanel"] > p { font-size: 11px; }
.dash-filter { display: flex; align-items: center; gap: 7px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 6px; margin: 24px 0 19px; color: var(--quiet); font-size: 10px; max-width: 390px; }
.dash-filter .icon { width: 13px; height: 13px; }
.dash-filter > span { margin-left: auto; color: var(--blue); font-size: 9px; }
.dash-content table { width: 100%; border-collapse: collapse; font-size: 11px; table-layout: fixed; text-align: left; }
.dash-content th { background: var(--soft); padding: 11px 15px; font-size: 10px; font-weight: 400; color: var(--muted); }
.dash-content th:first-child { width: 31%; }
.dash-content td { border-bottom: 1px solid var(--line); padding: 16px 15px; color: var(--muted); overflow-wrap: anywhere; }
.dash-content td:first-child { color: var(--ink); }
.dash-content td:last-child { font-size: 10px; color: var(--blue); }
.table-avatar { width: 24px; height: 24px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; background: #edf1f8; color: #8aa1c0; margin-right: 8px; font-size: 9px; }
.table-status { display: inline-block; background: #edf7f2; color: #509277; border-radius: 4px; padding: 2px 8px; font-size: 9px; white-space: nowrap; }
.table-status.waiting { background: #fff5df; color: #b58634; }
.dash-bottom { display: flex; justify-content: space-between; align-items: center; color: var(--quiet); font-size: 9px; margin-top: 23px; }
.dash-bottom .icon { width: 15px; height: 15px; color: var(--blue); }

/* Architecture */
.architecture { padding: 27px; border: 1px solid var(--line); border-radius: 15px; background: var(--soft); min-width: 0; }
.arch-top { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.arch-top > div { display: flex; align-items: center; justify-content: center; flex-direction: column; background: var(--surface); border: 1px solid var(--line); padding: 21px 10px; border-radius: 8px; text-align: center; }
.arch-top .icon { width: 24px; height: 24px; color: var(--blue); margin-bottom: 9px; }
.arch-top strong { font-size: 13px; font-weight: 600; }
.arch-top span { font-size: 8px; color: var(--muted); margin-top: 4px; }
.arch-connector { display: flex; justify-content: center; position: relative; padding: 18px 0; }
.arch-connector::before { content: ""; width: 1px; height: 100%; position: absolute; top: 0; left: 50%; background: #b9cce5; }
.arch-connector span { position: relative; z-index: 1; color: #7891af; background: var(--soft); font-size: 9px; padding: 0 9px; }
.arch-service { display: flex; align-items: center; flex-direction: column; background: var(--blue); color: white; text-align: center; border-radius: 9px; padding: 20px 15px; }
.arch-service > span { display: flex; align-items: center; gap: 7px; font-size: 9px; color: #cee0fb; }
.arch-service > span .icon { width: 15px; height: 15px; }
.arch-service > strong { font-size: 18px; margin: 10px 0 16px; font-weight: 500; }
.arch-service > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.arch-service b { padding: 3px 8px; border-radius: 4px; background: rgb(255 255 255 / 13%); font-size: 8px; font-weight: 400; white-space: nowrap; }
.arch-bottom { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.arch-bottom > div { padding: 14px 3px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; text-align: center; }
.arch-bottom strong { display: block; font-size: 10px; font-weight: 600; }
.arch-bottom span { display: block; font-size: 8px; color: var(--muted); margin-top: 2px; }
.architecture .visual-caption { font-size: 9px; margin-top: 16px; }
.split .architecture { margin-left: -15px; }

/* Shared FAQs and closing call to action */
.faq-section { display: grid; grid-template-columns: .85fr 1.15fr; gap: 80px; align-items: start; }
.faq-section .section-heading { margin: 4px 0 0; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 25px; cursor: pointer; padding: 22px 0; font-size: 15px; font-weight: 500; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary > span { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; font-size: 22px; font-weight: 300; color: var(--quiet); flex: none; transition: transform .2s; }
.faq-list details[open] summary > span { transform: rotate(45deg); color: var(--blue); }
.faq-list details[open] summary { color: var(--blue); }
.faq-list details p { font-size: 14px; line-height: 1.95; padding: 0 35px 23px 0; }
.cta-wrap { padding-bottom: 95px; }
.cta { padding: 38px 42px; background: var(--soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); position: relative; }
.cta > div { display: grid; grid-template-columns: 1fr auto; column-gap: 38px; align-items: center; }
.cta .eyebrow { color: var(--blue); margin-bottom: 13px; font-size: 9px; grid-column: 1; }
.cta h2 { font-size: 28px; color: var(--ink); line-height: 1.5; letter-spacing: -.025em; grid-column: 1; }
.cta p:not(.eyebrow) { color: var(--muted); font-size: 12px; margin-top: 11px; max-width: 590px; grid-column: 1; }
.cta .actions { margin: 0; grid-column: 2; grid-row: 1 / 4; flex-direction: column; align-items: stretch; gap: 8px; }
.cta .button { min-height: 42px; padding: 10px 17px; font-size: 12px; }
.cta .button.light { color: white; background: #1766dc; }
.cta .button.light:hover { background: #0b50bc; }
.cta .button.ghost { color: var(--muted); border-color: var(--line); background: var(--surface); }
.cta .button.ghost:hover { color: var(--blue); border-color: var(--blue); }
.cta > img { display: none; }

/* Secondary pages */
.page-hero { padding-top: 82px; padding-bottom: 63px; }
.page-hero h1 { font-size: clamp(39px, 4.5vw, 58px); line-height: 1.35; }
.page-hero .lead { max-width: 680px; margin-top: 25px; font-size: 17px; }
.page-hero .actions { margin-top: 27px; }
.feature-nav { display: flex; flex-wrap: wrap; gap: 11px; padding-bottom: 54px; }
.feature-nav a { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); font-size: 12px; }
.feature-nav .icon { width: 15px; height: 15px; }
.feature-nav a:hover { color: var(--blue); border-color: var(--blue); }
.feature-list-top { display: flex; gap: 30px; align-items: center; justify-content: space-between; }
.feature-list-top .section-heading { margin-bottom: 41px; }
.search-field { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 7px; padding: 11px 13px; width: 265px; flex: none; margin-bottom: 24px; background: var(--surface); }
.search-field .icon { width: 17px; height: 17px; color: var(--quiet); }
.search-field input { min-width: 0; width: 100%; color: var(--ink); background: transparent; padding: 0; border: 0; outline: none; font-size: 12px; }
.search-field input::placeholder { color: var(--quiet); }
.search-field:focus-within { outline: 3px solid #9bc2fb; outline-offset: 2px; }
.feature-group { display: grid; grid-template-columns: 240px 1fr; gap: 70px; padding: 46px 0; border-top: 1px solid var(--line); scroll-margin-top: 100px; }
.feature-group > div:first-child { position: relative; }
.feature-group .section-number { position: absolute; top: 9px; right: 0; color: var(--quiet); font-size: 12px; }
.feature-group .icon-box { width: 43px; height: 43px; margin-bottom: 19px; }
.feature-group h2 { font-size: 24px; line-height: 1.4; }
.feature-group > div > p { font-size: 12px; margin-top: 10px; max-width: 225px; }
.feature-items { display: grid; grid-template-columns: 1fr 1fr; gap: 27px 40px; }
.feature-items article { padding-left: 15px; border-left: 2px solid var(--line); min-width: 0; }
.feature-items h3 { font-size: 15px; }
.feature-items p { font-size: 12px; line-height: 1.85; margin-top: 9px; }
.no-results { padding: 60px 20px; text-align: center; background: var(--soft); font-size: 14px; border-radius: 10px; }
.console-hero { max-width: 1120px; }
.console-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 39px; }
.console-grid > article { border-top: 1px solid var(--line); padding: 28px 0 0; }
.console-grid h3 { margin-top: 21px; }
.console-grid article > p { font-size: 13px; margin-top: 13px; min-height: 46px; }
.console-grid .check-list { gap: 9px; margin: 20px 0 0; }
.console-grid .check-list li { font-size: 12px; color: var(--muted); }
.console-grid .check-list .icon { width: 14px; height: 14px; margin-top: 4px; }
.role-list { border-top: 1px solid var(--line); }
.role-list > div { display: flex; gap: 19px; padding: 24px 3px; align-items: center; border-bottom: 1px solid var(--line); }
.role-list > div > .icon:first-child { color: var(--blue); width: 26px; height: 26px; }
.role-list > div > .icon:last-child { color: #70a396; width: 16px; height: 16px; }
.role-list strong { display: block; font-size: 15px; font-weight: 500; }
.role-list small { display: block; color: var(--muted); font-size: 11px; margin-top: 4px; }
.role-line { flex: 1; height: 1px; min-width: 15px; background: var(--line); margin: 0 5px; }
.deployment-overview { background: var(--soft); border: 1px solid var(--line); border-radius: 13px; padding: 32px 43px 39px; }
.deployment-title { display: flex; gap: 17px; align-items: center; padding-bottom: 27px; border-bottom: 1px solid var(--line); }
.deployment-title > .icon { color: var(--blue); width: 28px; height: 28px; }
.deployment-title h2 { font-size: 20px; letter-spacing: -.01em; }
.deployment-title p { font-size: 12px; margin-top: 4px; }
.deployment-title > span { margin-left: auto; font-size: 9px; letter-spacing: .18em; color: var(--quiet); }
.deployment-overview .architecture { max-width: 810px; border: 0; padding: 31px 0 0; margin: 0 auto; }
.deployment-overview .arch-top > div { padding: 24px; flex-flow: row wrap; gap: 10px; }
.deployment-overview .arch-top .icon { margin: 0; }
.deployment-overview .arch-top span { flex-basis: 100%; margin: 0; font-size: 10px; }
.deployment-overview .arch-top strong { font-size: 16px; }
.deployment-overview .arch-service { padding: 25px; }
.deployment-overview .arch-service strong { font-size: 22px; }
.deployment-overview .arch-service b { font-size: 10px; padding: 5px 15px; }
.deployment-overview .arch-bottom strong { font-size: 13px; }
.deployment-overview .arch-bottom span { font-size: 10px; }
.deployment-overview .arch-bottom > div { padding: 21px 5px; }
.three-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 42px; }
.three-columns article { min-width: 0; }
.three-columns h3 { margin: 23px 0 15px; }
.three-columns p { font-size: 14px; line-height: 1.9; }
.cost-list { border-top: 1px solid var(--line); }
.cost-list > div { display: flex; gap: 22px; border-bottom: 1px solid var(--line); padding: 22px 0; }
.cost-list > div > b { color: var(--quiet); font-size: 12px; font-weight: 500; padding-top: 3px; }
.cost-list strong { display: block; font-weight: 550; font-size: 15px; }
.cost-list p { font-size: 12px; margin-top: 5px; }
.split > div > .button.primary { margin-top: 29px; }
.preparation-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); gap: 30px; }
.preparation-grid article { padding-top: 24px; }
.preparation-grid article > span { font-size: 12px; color: var(--blue); }
.preparation-grid h3 { font-size: 18px; margin: 20px 0 12px; }
.preparation-grid p { font-size: 13px; }
.delivery-banner { display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 30px; padding: 51px 54px; border: 1px solid var(--line); border-radius: 13px; background: var(--soft); }
.delivery-banner h2 { font-size: 33px; line-height: 1.5; }
.delivery-banner > div > p:not(.eyebrow) { font-size: 14px; max-width: 530px; margin-top: 20px; }
.brand-visual { display: flex; align-items: center; justify-content: center; min-height: 300px; position: relative; isolation: isolate; }
.brand-visual > img { width: 235px; position: relative; filter: drop-shadow(0 11px 13px rgb(35 75 120 / 12%)); }
.brand-orbit { position: absolute; width: 290px; height: 290px; border: 1px solid #d7e5f4; border-radius: 50%; box-shadow: 0 0 0 33px rgb(155 190 225 / 7%); z-index: -1; }
.brand-label { position: absolute; bottom: 0; font-size: 8px; color: var(--quiet); letter-spacing: .19em; }
.delivery-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 31px; }
.delivery-steps article { border-top: 1px solid var(--line); padding-top: 25px; }
.delivery-steps article > span { font-size: 29px; line-height: 1; font-weight: 300; letter-spacing: -.05em; color: #afc5df; }
.delivery-steps h3 { margin: 22px 0 13px; font-size: 19px; }
.delivery-steps p { font-size: 13px; line-height: 1.9; }
.delivery-steps article > strong { display: flex; align-items: center; gap: 7px; margin-top: 24px; font-size: 10px; color: var(--blue); font-weight: 500; }
.delivery-steps article > strong .icon { width: 14px; height: 14px; }
.demo-hero { display: grid; grid-template-columns: 1.18fr .82fr; gap: 65px; align-items: center; }
.demo-hero picture { border-radius: 13px; overflow: hidden; }
.demo-hero picture img { width: 100%; aspect-ratio: 1.4; object-fit: cover; }
.demo-hero h2 { font-size: 34px; }
.demo-hero .check-list { margin: 27px 0 22px; }
.demo-hero > div > p { font-size: 13px; }
.experience-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.experience-cards article { position: relative; display: flex; flex-direction: column; align-items: flex-start; border-top: 1px solid var(--line); padding-top: 26px; padding-bottom: 30px; }
.experience-cards .button { margin-top: 28px; font-size: 12px; min-height: 42px; padding: 10px 15px; }
.experience-cards p { flex: 1; }
.experience-cards .android-package-note { position: absolute; bottom: 0; left: 0; margin: 0; line-height: 18px; }

/* Resources and reading layout */
.guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 33px; padding-bottom: 40px; }
.guide-card { min-width: 0; padding: 28px 25px 25px; background: var(--soft); border-top: 2px solid var(--line); border-radius: 0 0 8px 8px; display: flex; flex-direction: column; transition: border-color .2s, background .2s; }
.guide-card:hover { border-top-color: var(--blue); background: var(--blue-soft); }
.guide-card > span { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 9px; letter-spacing: .08em; color: var(--blue); margin-bottom: 31px; }
.guide-card > span .icon { width: 22px; height: 22px; color: var(--quiet); }
.guide-card h2 { font-size: 23px; }
.guide-card p { margin: 14px 0 27px; font-size: 13px; flex: 1; }
.guide-card > strong { display: flex; align-items: center; gap: 11px; color: var(--blue); font-weight: 500; font-size: 11px; }
.guide-card > strong .icon { width: 15px; height: 15px; }
.resource-note { display: flex; align-items: center; gap: 23px; }
.resource-note h2 { font-size: 23px; }
.resource-note p { margin-top: 10px; font-size: 13px; }
.resource-note > div { flex: 1; }
.resource-note > .button { flex: none; }
.document-layout { display: grid; grid-template-columns: 225px minmax(0, 1fr); gap: 73px; padding-top: 61px; padding-bottom: 103px; }
.document-sidebar { position: sticky; top: 119px; align-self: start; min-width: 0; }
.back-link { font-size: 12px; display: block; color: var(--blue); margin-bottom: 38px; }
.document-sidebar > p { font-size: 11px; color: var(--quiet); margin: 0 0 13px 11px; }
.document-sidebar > a:not(.back-link) { display: block; padding: 10px 11px; font-size: 13px; color: var(--muted); border-left: 2px solid transparent; }
.document-sidebar > a.active { border-left-color: var(--blue); color: var(--blue); background: var(--blue-soft); }
.document-sidebar > a:hover { color: var(--blue); }
.sidebar-contact { margin-top: 33px; border-top: 1px solid var(--line); padding: 24px 11px 0; }
.sidebar-contact strong { display: block; font-size: 11px; color: var(--muted); font-weight: 500; }
.sidebar-contact .button { margin-top: 6px; font-size: 12px; }
.document { max-width: 810px; min-width: 0; }
.document header { padding-bottom: 29px; }
.document h1 { font-size: 43px; }
.document .lead { font-size: 16px; margin-top: 22px; }
.document-toc { display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 21px 25px; background: var(--soft); border-left: 2px solid #b8d0f0; border-radius: 0 7px 7px 0; margin-bottom: 38px; }
.document-toc strong { flex-basis: 100%; font-size: 12px; font-weight: 500; }
.document-toc a { font-size: 12px; color: var(--muted); }
.document-toc a:hover { color: var(--blue); }
.document > section { margin-top: 39px; scroll-margin-top: 118px; }
.document > section h2 { font-size: 25px; margin-bottom: 17px; }
.document > section p { font-size: 15px; line-height: 2.1; }
.document .architecture { margin: 35px 0 48px; }
.document-end { margin-top: 55px; border-top: 1px solid var(--line); padding-top: 27px; }
.document-end p { font-size: 13px; margin-bottom: 18px; }

/* Footer and contact dialog */
.site-footer { border-top: 1px solid var(--line); background: var(--soft); }
.footer-top { padding-top: 59px; padding-bottom: 51px; display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 35px; }
.footer-top h3 { font-size: 13px; font-weight: 550; margin: 8px 0 19px; }
.footer-top > div:not(.footer-brand) > a, .footer-top > div > button { display: block; padding: 0; color: var(--muted); text-align: left; font-size: 12px; line-height: 1.6; margin-top: 11px; }
.footer-top a:hover, .footer-top button:hover { color: var(--blue); }
.footer-brand p { font-size: 12px; margin: 17px 0 21px; line-height: 1.9; }
.footer-brand > a:last-child { font-size: 12px; color: var(--blue); display: inline-flex; align-items: center; gap: 12px; }
.footer-brand > a:last-child .icon { width: 14px; height: 14px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); padding-top: 22px; padding-bottom: 24px; font-size: 10px; color: var(--quiet); }
.contact-dialog { width: 480px; max-width: calc(100vw - 36px); max-height: min(90dvh, 780px); padding: 35px; overflow-y: auto; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--ink); box-shadow: 0 30px 100px rgb(2 21 49 / 23%); }
.contact-dialog::backdrop { background: rgb(14 30 54 / 55%); backdrop-filter: blur(5px); }
.dialog-close { position: absolute; right: 17px; top: 17px; width: 32px; height: 32px; padding: 6px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--muted); background: var(--soft); }
.dialog-close:hover { color: var(--blue); }
.dialog-close .icon { width: 17px; height: 17px; }
.dialog-brand { display: flex; align-items: center; gap: 15px; margin-bottom: 17px; }
.dialog-brand img { width: 65px; }
.dialog-brand span { color: var(--blue); font-size: 9px; letter-spacing: .13em; }
.contact-dialog h2 { font-size: 27px; }
.contact-dialog > p:not(.contact-context):not(.copy-status):not(.dialog-note) { margin-top: 12px; font-size: 13px; }
.contact-context { margin: 22px 0 17px; padding: 11px 13px; font-size: 11px; border-radius: 7px; background: var(--soft); }
.contact-context strong { font-weight: 500; color: var(--ink); }
.contact-channels > div { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.contact-channels > div > span { display: flex; flex-direction: column; font-size: 10px; color: var(--quiet); min-width: 0; }
.contact-channels strong, .contact-channels a { color: var(--ink); font-size: 16px; font-weight: 550; margin-top: 2px; overflow-wrap: anywhere; }
.contact-channels button { flex: none; font-size: 10px; color: var(--blue); border: 1px solid var(--line); border-radius: 6px; padding: 7px 10px; }
.contact-channels button:hover { background: var(--blue-soft); border-color: var(--blue); }
.copy-status { min-height: 24px; font-size: 11px; color: #40937b; margin-top: 10px; }
.dialog-note { font-size: 10px; color: var(--quiet); margin-top: 10px; }

/* Dark mode keeps UI demos legible as independent product previews. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #101923;
  --surface: #172333;
  --soft: #131f2c;
  --soft-blue: #1b2d45;
  --ink: #e0e9f6;
  --muted: #9aaec4;
  --quiet: #768ca5;
  --line: #283a50;
  --blue: #76aefb;
  --blue-hover: #90beff;
  --blue-soft: #1c334e;
  --header: rgb(16 25 35 / 92%);
  --shadow: 0 22px 65px rgb(0 0 0 / 20%);
}
[data-theme="dark"] .theme-toggle .moon { display: none; }
[data-theme="dark"] .theme-toggle .sun { display: block; }

[data-theme="dark"] .button.primary { background: #3a7cdb; color: #fff; }
[data-theme="dark"] .button.primary:hover { background: #4b8ded; }
[data-theme="dark"] .phone-stage::before { background: radial-gradient(ellipse, #234367, #182b41 53%, transparent 72%); }
[data-theme="dark"] .phone { border-color: #465971; box-shadow: 0 0 0 1px #5f728a, 12px 24px 40px rgb(0 0 0 / 30%); }
[data-theme="dark"] .hero-art picture, [data-theme="dark"] .editorial picture, [data-theme="dark"] .demo-hero picture { border: 1px solid var(--line); }
[data-theme="dark"] .dashboard { border-color: var(--line); }
[data-theme="dark"] .dash-sidebar button[aria-selected="true"], [data-theme="dark"] .arch-service { background: #235caa; }
[data-theme="dark"] .table-avatar { background: #243951; color: #a7bfdc; }
[data-theme="dark"] .table-status { background: #1c3a35; color: #8bc7b1; }
[data-theme="dark"] .table-status.waiting { background: #403720; color: #d4b475; }
[data-theme="dark"] .brand-orbit { border-color: #2a405d; box-shadow: 0 0 0 33px rgb(80 113 156 / 6%); }
[data-theme="dark"] .arch-connector::before { background: #3f5878; }
[data-theme="dark"] .copy-status { color: #8bc7b1; }

/* Tablet */
@media (max-width: 1100px) {
  .container { width: calc(100% - 56px); }
  .header-inner { gap: 18px; height: 76px; }
  .main-nav { gap: 16px; }
  .main-nav > a { font-size: 12px; }
  .brand img { width: 95px; }
  .brand { gap: 8px; }
  .brand > span { padding-left: 8px; }
  .header-actions { gap: 10px; }
  .header-contact { padding: 8px 11px; }
  .hero { gap: 26px; padding-top: 58px; }
  .hero h1 { font-size: 49px; }
  .hero-art-caption { left: -13px; padding: 11px 13px; font-size: 10px; }
  .hero-notes { gap: 11px; }
  .section { padding-top: 86px; padding-bottom: 86px; }
  .product-demo { gap: 50px; }
  .editorial, .split { gap: 48px; }
  .capability-grid { gap: 0 28px; }
  .cta { padding: 44px; }
  .cta h2 { font-size: 28px; }
  .cta > img { width: 175px; }
  .faq-section { gap: 45px; }
  .feature-group { grid-template-columns: 210px 1fr; gap: 45px; }
  .three-columns { gap: 30px; }
  .experience-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .document-layout { grid-template-columns: 195px minmax(0, 1fr); gap: 45px; }
  .dash-body { grid-template-columns: 165px minmax(0, 1fr); }
}
@media (max-width: 960px) {
  .main-nav { position: absolute; display: none; top: 76px; left: 0; right: 0; padding: 13px 28px 22px; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 17px 25px rgb(24 50 83 / 6%); grid-template-columns: repeat(3, 1fr); gap: 3px 15px; margin: 0; }
  .main-nav.is-open { display: grid; }
  .main-nav > a { padding: 12px; border-radius: 6px; font-size: 13px; }
  .main-nav > a[aria-current="page"] { background: var(--blue-soft); }
  .main-nav > a[aria-current="page"]::after { display: none; }
  .menu-toggle { display: flex; }
  .header-actions { margin-left: auto; gap: 12px; }
  .header-contact { display: none; }
  .hero .lead { font-size: 16px; }
  .hero-detail { font-size: 12px; }
  .hero h1 { font-size: 44px; }
  .hero .actions { gap: 10px; }
  .hero .button { font-size: 12px; padding: 11px 16px; gap: 13px; min-height: 43px; }
  .hero-art img { aspect-ratio: .95; }
  .hero-showcase .hero-art img { aspect-ratio: 3 / 2; }
  .product-strip > .container > div { padding: 25px 15px; gap: 10px; }
  .product-strip small { font-size: 9px; }
  .product-strip strong { font-size: 12px; }
  .product-strip .icon { width: 21px; height: 21px; }
  .product-demo { gap: 30px; grid-template-columns: 1fr 1fr; }
  .demo-copy h2 { font-size: 33px; }
  .phone { width: 314px; height: 624px; }
  .phone-stage::before { width: 390px; height: 390px; }
  .product-tabs button { padding-left: 48px; font-size: 14px; }
  .product-tabs button > .icon { left: 14px; width: 20px; height: 20px; }
  .product-tabs button > span { font-size: 11px; }
  .dash-content { padding: 25px 23px 21px; }
  .dash-content td, .dash-content th { padding-left: 9px; padding-right: 9px; }
  .table-avatar { margin-right: 6px; width: 21px; height: 21px; }
  .architecture { padding: 20px; }
  .split .architecture { margin-left: 0; }
  .arch-bottom { gap: 5px; }
  .arch-bottom strong { font-size: 9px; }
  .arch-service b { font-size: 7px; }
  .faq-section { grid-template-columns: 1fr; gap: 33px; }
  .faq-section .section-heading { max-width: none; }
  .cta { padding: 39px 36px; gap: 15px; }
  .cta > img { width: 150px; }
  .cta h2 { font-size: 25px; }
  .console-grid { gap: 30px; }
  .console-grid h3 { font-size: 18px; }
  .console-grid article > p { min-height: 67px; }
  .delivery-banner { padding: 35px; }
  .delivery-banner h2 { font-size: 29px; }
  .brand-visual > img { width: 180px; }
  .brand-orbit { width: 230px; height: 230px; }
  .brand-visual { min-height: 260px; }
  .delivery-steps { gap: 24px; }
  .delivery-steps h3 { font-size: 17px; }
  .demo-hero { gap: 38px; }
  .demo-hero h2 { font-size: 29px; }
  .demo-hero .check-list li { font-size: 12px; }
  .guide-grid { gap: 20px; }
  .guide-card { padding: 25px 19px; }
  .guide-card h2 { font-size: 21px; }
  .footer-top { gap: 25px; grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .footer-bottom { flex-wrap: wrap; gap: 8px 20px; }
}

/* Mobile: full-width product stages, readable navigation, no overflow. */
@media (max-width: 760px) {
  html { scroll-padding-top: 86px; }
  body { font-size: 14px; }
  .container { width: calc(100% - 40px); }
  .section { padding-top: 65px; padding-bottom: 65px; }
  h1 { font-size: 39px; }
  h2 { font-size: 30px; line-height: 1.45; }
  h3 { font-size: 18px; }
  .eyebrow { font-size: 9px; letter-spacing: .13em; gap: 8px; margin-bottom: 16px; }
  .section-heading { margin-bottom: 31px; }
  .section-heading > p:last-child:not(.eyebrow) { font-size: 14px; margin-top: 16px; }
  .header-inner { height: 68px; }
  .brand img { width: 99px; }
  .brand > span { font-size: 10px; padding-left: 10px; }
  .brand { gap: 10px; }
  .header-actions { gap: 7px; }
  .main-nav { top: 68px; padding: 10px 20px 19px; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
  .main-nav > a { padding: 12px 13px; font-size: 13px; }
  .theme-toggle, .menu-toggle { width: 34px; height: 36px; }
  .hero { display: flex; flex-direction: column; align-items: stretch; padding-top: 43px; padding-bottom: 38px; gap: 34px; }
  .hero h1 { font-size: clamp(34px, 8.8vw, 49px); line-height: 1.34; }
  .hero .lead { max-width: 510px; font-size: 16px; line-height: 1.9; margin-top: 21px; }
  .hero-detail { max-width: 500px; font-size: 12px; margin-top: 12px; }
  .hero .actions { margin-top: 25px; }
  .hero .button { font-size: 12px; padding: 12px 18px; min-height: 45px; }
  .hero-notes { margin-top: 23px; gap: 15px; }
  .hero-notes > span { font-size: 10px; }
  .hero-art { padding-bottom: 21px; }
  .hero-art picture { border-radius: 15px 15px 47px 15px; }
  .hero-art img { aspect-ratio: 1.4; object-position: center; }
  .hero-art-caption { bottom: 39px; left: 11px; padding: 9px 11px; font-size: 8px; gap: 6px; }
  .hero-art-note { font-size: 9px; }
  .hero.hero-showcase { padding-top: 41px; padding-bottom: 31px; gap: 27px; }
  .hero-showcase h1 { font-size: clamp(33px, 8.7vw, 49px); }
  .hero-showcase .lead { font-size: 15px; margin-top: 18px; }
  .hero-showcase .hero-detail { font-size: 11px; }
  .hero-showcase .hero-art img { aspect-ratio: 3 / 2; object-position: center; }
  .hero-showcase .hero-art-caption { bottom: 12px; left: 10px; font-size: 8px; }
  .hero-showcase .hero-art-note { display: none; }
  .hero-showcase .hero-art picture { border-radius: 13px; }
  .hero-showcase .hero-notes { gap: 13px; margin-top: 20px; }
  .hero-showcase .hero-notes > span { font-size: 9px; }
  .product-strip > .container { grid-template-columns: 1fr 1fr; }
  .product-strip > .container > div { padding: 22px 10px 22px 0; gap: 12px; }
  .product-strip > .container > div:nth-child(2n) { padding-left: 19px; border-right: 0; }
  .product-strip > .container > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .product-strip strong { font-size: 12px; }
  .product-strip small { font-size: 9px; }
  .product-strip .icon { width: 21px; height: 21px; }
  .capability-grid { grid-template-columns: 1fr 1fr; gap: 0 23px; }
  .capability { padding: 25px 0 24px; }
  .capability-top { margin-bottom: 16px; }
  .capability .icon-box { width: 38px; height: 38px; border-radius: 11px; }
  .capability .icon-box .icon { width: 19px; height: 19px; }
  .capability .index { font-size: 10px; }
  .capability h3 { font-size: 17px; }
  .capability p { font-size: 12px; line-height: 1.85; margin-top: 10px; }
  .text-link { font-size: 11px; margin-top: 19px; }
  .product-demo { display: flex; flex-direction: column; gap: 27px; align-items: stretch; }
  .demo-copy h2 { font-size: 31px; }
  .demo-copy > p { font-size: 14px; margin-top: 18px; max-width: 100%; }
  .section-number { font-size: 10px; margin-bottom: 16px; }
  .product-tabs { grid-template-columns: repeat(3, 1fr); gap: 7px; max-width: none; margin-top: 26px; }
  .product-tabs button { display: flex; flex-direction: column; align-items: flex-start; padding: 12px 10px 11px; min-width: 0; font-size: 12px; border-left: 0; border-top: 2px solid transparent; border-bottom: 1px solid var(--line); border-radius: 0; }
  .product-tabs button > .icon { position: static; width: 18px; height: 18px; margin-bottom: 7px; }
  .product-tabs button > span { font-size: 8px; margin-top: 5px; letter-spacing: -.02em; }
  .product-tabs button[aria-selected="true"] { border-top-color: var(--blue); border-left: 0; border-radius: 0 0 6px 6px; }
  .demo-copy > .button { margin-top: 16px; font-size: 12px; }
  .phone-stage { padding-top: 0; }
  .stage-label { margin-bottom: 20px; font-size: 10px; }
  .phone { width: 322px; height: 630px; }
  .phone-stage::before { width: 410px; max-width: 125%; height: 430px; top: 110px; }
  .stage-note { margin-top: 22px; }
  .editorial, .split { display: flex; flex-direction: column; gap: 34px; align-items: stretch; }
  .editorial img { aspect-ratio: 1.3; }
  .editorial h2 + p, .split h2 + p { font-size: 14px; margin-top: 20px; max-width: none; }
  .editorial .check-list, .split .check-list { gap: 11px; margin: 22px 0; }
  .check-list li { font-size: 13px; }
  .image-label { font-size: 10px; margin-top: 10px; }
  .dashboard { border-radius: 10px; }
  .dash-bar { padding: 12px 13px; font-size: 9px; gap: 8px; }
  .window-dots { width: 36px; gap: 4px; }
  .window-dots i { width: 5px; height: 5px; }
  .dash-demo-label { font-size: 8px; }
  .dash-body { display: block; min-height: 0; }
  .dash-sidebar { padding: 10px 11px; border-right: 0; border-bottom: 1px solid var(--line); }
  .dash-sidebar > strong, .dash-sidebar > span { display: none; }
  .dash-sidebar [role="tablist"] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
  .dash-sidebar button { justify-content: center; padding: 9px 4px; font-size: 10px; gap: 5px; border-radius: 5px; }
  .dash-sidebar button .icon { width: 13px; height: 13px; }
  .dash-content { padding: 21px 13px 16px; }
  .dash-title { margin-bottom: 9px; }
  .dash-title h3 { font-size: 19px; }
  .dash-title small { font-size: 8px; }
  .admin-avatar { width: 25px; height: 25px; font-size: 9px; }
  .dash-content [role="tabpanel"] > p { font-size: 9px; }
  .dash-filter { font-size: 9px; padding: 9px; margin: 17px 0 13px; }
  .dash-filter > span { font-size: 8px; }
  .dash-content table { font-size: 9px; }
  .dash-content th { font-size: 8px; line-height: 1.5; padding: 9px 5px; }
  .dash-content td { padding: 13px 5px; font-size: 9px; line-height: 1.65; }
  .dash-content td:last-child { font-size: 8px; }
  .table-avatar { display: none; }
  .table-status { font-size: 7px; padding: 2px 5px; }
  .dash-bottom { font-size: 8px; margin-top: 19px; }
  .dash-bottom .icon { width: 12px; height: 12px; }
  .center-action { margin-top: 25px; }
  .architecture { padding: 21px 18px 17px; border-radius: 10px; }
  .arch-top { gap: 11px; }
  .arch-top > div { padding: 18px 6px; }
  .arch-top strong { font-size: 12px; }
  .arch-top span { font-size: 7px; }
  .arch-service { padding: 18px 9px; }
  .arch-service > strong { font-size: 17px; }
  .arch-service > div { gap: 5px; }
  .arch-service b { font-size: 7px; padding: 4px 7px; }
  .arch-bottom strong { font-size: 9px; }
  .arch-bottom span { font-size: 7px; }
  .arch-connector { padding: 16px 0; }
  .arch-connector span { font-size: 8px; }
  .architecture .visual-caption { font-size: 8px; }
  .faq-section { gap: 24px; }
  .faq-list summary { font-size: 14px; padding: 19px 0; gap: 16px; }
  .faq-list details p { font-size: 12px; padding-right: 19px; padding-bottom: 20px; }
  .cta-wrap { padding-bottom: 60px; }
  .cta { padding: 30px 25px; border-radius: 0; }
  .cta > div { display: block; }
  .cta > img { display: none; }
  .cta h2 { font-size: 26px; line-height: 1.55; }
  .cta p:not(.eyebrow) { font-size: 12px; margin-top: 12px; }
  .cta .eyebrow { font-size: 8px; }
  .cta .actions { gap: 10px; margin-top: 23px; flex-direction: row; align-items: center; }
  .cta .button { font-size: 11px; padding: 11px 14px; min-height: 42px; gap: 13px; }
  .cta .button .icon { width: 14px; height: 14px; }
  .page-hero { padding-top: 47px; padding-bottom: 38px; }
  .page-hero h1 { font-size: clamp(33px, 8.7vw, 44px); line-height: 1.39; }
  .page-hero .lead { font-size: 14px; margin-top: 21px; }
  .page-hero .actions { gap: 10px; margin-top: 24px; }
  .page-hero .button { padding: 11px 17px; min-height: 45px; font-size: 12px; gap: 16px; }
  .feature-nav { gap: 8px; padding-bottom: 35px; }
  .feature-nav a { padding: 7px 10px; font-size: 10px; gap: 6px; }
  .feature-nav .icon { width: 13px; height: 13px; }
  .feature-list-top { display: block; }
  .feature-list-top .section-heading { margin-bottom: 22px; }
  .search-field { width: 100%; margin-bottom: 32px; padding: 12px 13px; }
  .feature-group { display: block; padding: 30px 0; scroll-margin-top: 92px; }
  .feature-group > div:first-child { display: grid; grid-template-columns: 40px 1fr; gap: 0 13px; align-items: center; margin-bottom: 26px; padding-right: 27px; }
  .feature-group .icon-box { margin: 0; width: 40px; height: 40px; grid-row: span 2; }
  .feature-group .icon-box .icon { width: 20px; height: 20px; }
  .feature-group .section-number { margin: 0; top: 3px; font-size: 11px; }
  .feature-group h2 { font-size: 21px; }
  .feature-group > div > p { font-size: 11px; margin-top: 4px; max-width: none; }
  .feature-items { gap: 23px 20px; }
  .feature-items article { padding-left: 11px; }
  .feature-items h3 { font-size: 13px; }
  .feature-items p { font-size: 11px; margin-top: 8px; }
  .note { font-size: 11px; margin-top: 21px; line-height: 1.8; }
  .console-grid { grid-template-columns: 1fr 1fr; gap: 27px 23px; }
  .console-grid > article { padding-top: 23px; }
  .console-grid .icon-box { width: 40px; height: 40px; }
  .console-grid .icon-box .icon { width: 20px; height: 20px; }
  .console-grid h3 { font-size: 17px; margin-top: 17px; }
  .console-grid article > p { font-size: 11px; min-height: 59px; margin-top: 10px; }
  .console-grid .check-list { gap: 8px; margin-top: 17px; }
  .console-grid .check-list li { font-size: 10px; gap: 7px; }
  .console-grid .check-list .icon { width: 12px; height: 12px; margin-top: 3px; }
  .role-list > div { gap: 14px; padding: 21px 0; }
  .role-list strong { font-size: 14px; }
  .role-list small { font-size: 10px; }
  .deployment-overview { padding: 22px 17px 17px; }
  .deployment-title { gap: 12px; padding-bottom: 20px; }
  .deployment-title > .icon { width: 23px; height: 23px; }
  .deployment-title h2 { font-size: 16px; }
  .deployment-title p { font-size: 10px; margin-top: 4px; }
  .deployment-title > span { display: none; }
  .deployment-overview .architecture { padding-top: 23px; }
  .deployment-overview .arch-top > div { padding: 16px 7px; flex-direction: column; gap: 5px; }
  .deployment-overview .arch-top .icon { width: 20px; height: 20px; margin-bottom: 4px; }
  .deployment-overview .arch-top strong { font-size: 12px; }
  .deployment-overview .arch-top span { font-size: 7px; }
  .deployment-overview .arch-service { padding: 18px 8px; }
  .deployment-overview .arch-service strong { font-size: 17px; }
  .deployment-overview .arch-service b { font-size: 7px; padding: 4px 7px; }
  .deployment-overview .arch-bottom > div { padding: 15px 3px; }
  .deployment-overview .arch-bottom strong { font-size: 9px; }
  .deployment-overview .arch-bottom span { font-size: 7px; }
  .three-columns { grid-template-columns: 1fr; gap: 31px; }
  .three-columns article + article { border-top: 1px solid var(--line); padding-top: 30px; }
  .three-columns h3 { margin: 18px 0 11px; font-size: 20px; }
  .three-columns p { font-size: 13px; }
  .cost-list > div { gap: 19px; padding: 21px 0; }
  .cost-list p { font-size: 11px; }
  .preparation-grid { grid-template-columns: 1fr 1fr; gap: 26px 22px; }
  .preparation-grid article { padding-top: 20px; }
  .preparation-grid h3 { font-size: 17px; margin: 15px 0 8px; }
  .preparation-grid p { font-size: 12px; }
  .delivery-banner { display: flex; flex-direction: column; padding: 28px 24px; gap: 18px; overflow: hidden; }
  .delivery-banner h2 { font-size: 26px; }
  .delivery-banner > div > p:not(.eyebrow) { font-size: 12px; margin-top: 16px; }
  .delivery-banner .tags { gap: 7px; margin-top: 21px; }
  .tags > span { font-size: 10px; padding: 5px 9px; }
  .brand-visual { min-height: 233px; width: 100%; }
  .brand-visual > img { width: 172px; }
  .brand-orbit { width: 210px; height: 210px; }
  .brand-label { bottom: 1px; font-size: 7px; }
  .delivery-steps { grid-template-columns: 1fr 1fr; gap: 30px 24px; }
  .delivery-steps article { padding-top: 20px; }
  .delivery-steps article > span { font-size: 26px; }
  .delivery-steps h3 { margin: 18px 0 11px; font-size: 18px; }
  .delivery-steps p { font-size: 12px; }
  .delivery-steps article > strong { font-size: 9px; gap: 5px; margin-top: 18px; }
  .delivery-steps article > strong .icon { width: 12px; height: 12px; }
  .demo-hero { display: flex; flex-direction: column; align-items: stretch; gap: 30px; }
  .demo-hero h2 { font-size: 30px; }
  .demo-hero .check-list { margin: 21px 0; }
  .demo-hero .check-list li { font-size: 13px; }
  .demo-hero > div > p { font-size: 12px; }
  .experience-cards { grid-template-columns: 1fr; gap: 30px; }
  .experience-cards article { padding-top: 24px; }
  .experience-cards .button { margin-top: 20px; }
  .guide-grid { grid-template-columns: 1fr 1fr; gap: 21px 17px; padding-bottom: 0; }
  .guide-card { padding: 22px 16px 21px; }
  .guide-card > span { font-size: 8px; letter-spacing: .01em; gap: 8px; margin-bottom: 25px; }
  .guide-card > span .icon { width: 18px; height: 18px; }
  .guide-card h2 { font-size: 19px; }
  .guide-card p { font-size: 11px; margin: 12px 0 22px; }
  .guide-card > strong { font-size: 10px; gap: 8px; }
  .resource-note { flex-wrap: wrap; gap: 19px; }
  .resource-note > div { flex-basis: calc(100% - 70px); }
  .resource-note h2 { font-size: 19px; }
  .resource-note p { font-size: 12px; }
  .resource-note > .button { margin-left: 67px; font-size: 12px; }
  .document-layout { display: block; padding-top: 30px; padding-bottom: 65px; }
  .document-sidebar { position: static; display: flex; flex-wrap: wrap; gap: 9px 7px; padding-bottom: 27px; margin-bottom: 33px; border-bottom: 1px solid var(--line); }
  .document-sidebar .back-link { flex-basis: 100%; margin-bottom: 5px; font-size: 11px; }
  .document-sidebar > p, .sidebar-contact { display: none; }
  .document-sidebar > a:not(.back-link) { font-size: 10px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 5px; }
  .document-sidebar > a.active { border-color: var(--blue); }
  .document h1 { font-size: 33px; }
  .document .lead { font-size: 14px; line-height: 1.9; margin-top: 19px; }
  .document header { padding-bottom: 24px; }
  .document-toc { padding: 17px 18px; gap: 9px 17px; margin-bottom: 29px; }
  .document-toc a { font-size: 11px; }
  .document > section { margin-top: 31px; scroll-margin-top: 90px; }
  .document > section h2 { font-size: 23px; margin-bottom: 13px; }
  .document > section p { font-size: 14px; }
  .document-end { margin-top: 37px; }
  .footer-top { padding-top: 39px; padding-bottom: 31px; grid-template-columns: 1fr 1fr; gap: 29px 28px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand p { font-size: 12px; margin: 15px 0; }
  .footer-top h3 { font-size: 12px; margin: 0 0 16px; }
  .footer-top > div:not(.footer-brand) > a, .footer-top > div > button { font-size: 11px; margin-top: 10px; }
  .footer-bottom { flex-direction: column; gap: 8px; padding-top: 20px; padding-bottom: 23px; font-size: 9px; }
  .contact-dialog { padding: 26px 23px 24px; border-radius: 14px; }
  .dialog-brand { gap: 11px; margin-bottom: 17px; }
  .dialog-brand img { width: 60px; }
  .dialog-brand span { font-size: 8px; }
  .contact-dialog h2 { font-size: 25px; }
  .contact-dialog > p:not(.contact-context):not(.copy-status):not(.dialog-note) { font-size: 12px; }
  .contact-channels strong, .contact-channels a { font-size: 15px; }
  .contact-channels > div { gap: 10px; }
  .contact-channels button { font-size: 9px; padding: 7px 8px; }
}
@media (max-width: 380px) {
  .container { width: calc(100% - 32px); }
  .hero h1, .hero-showcase h1 { font-size: 32px; }
  .hero .button, .page-hero .button { font-size: 11px; padding-inline: 13px; gap: 11px; }
  .hero-notes { gap: 9px; }
  .hero-notes > span { font-size: 9px; }
  .phone { width: 300px; height: 617px; border-radius: 40px; }
  .phone-panel { padding-inline: 13px; }
  .product-tabs { gap: 5px; }
  .product-tabs button { padding-inline: 8px; font-size: 11px; }
  .product-tabs button > span { font-size: 7px; }
  .page-hero h1 { font-size: 30px; }
  .capability-grid, .console-grid { column-gap: 18px; }
  .guide-grid { grid-template-columns: 1fr; }
  .cta { padding: 28px 22px; }
  .cta h2 { font-size: 24px; }
  .cta .button { padding-inline: 11px; font-size: 10px; gap: 10px; }
  .feature-items { column-gap: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Put the console itself in the first screen, alongside its introduction. */
@media (min-width: 1001px) {
 body[data-page="console/"] .page-hero { display:grid;grid-template-columns:1.15fr 1fr;column-gap:64px;padding-top:58px;padding-bottom:42px; }
 body[data-page="console/"] .page-hero .eyebrow { grid-column:1/-1; }
 body[data-page="console/"] .page-hero h1 { grid-column:1;grid-row:2/4;font-size:42px;line-height:1.4; }
 body[data-page="console/"] .page-hero .lead { grid-column:2;grid-row:2;font-size:15px;margin:4px 0 0; }
 body[data-page="console/"] .page-hero .actions { grid-column:2;grid-row:3;align-self:start;margin-top:22px; }
}

.brand > .brand-logo { position:relative;display:block;border:0;padding:0; }
.brand-on-dark { display:none; }
[data-theme="dark"] .brand-logo img { clip-path:inset(0 65% 0 0); }
[data-theme="dark"] .brand-on-dark { display:flex;align-items:center;gap:2px;position:absolute;left:36%;top:50%;transform:translateY(-50%);font-size:19px;font-weight:800;letter-spacing:-1px;color:#edf5ff; }
[data-theme="dark"] .brand-on-dark strong { color:#549bff;letter-spacing:-.6px;font-size:19px; }

/* Keep the complete feature directory compact and readable. */
body[data-page="features/"] .feature-nav { padding-bottom:0; }
body[data-page="features/"] #feature-list { padding-top:50px; }
.feature-items p,.feature-group>div>p { font-size:13px; }
@media(max-width:700px) { body[data-page="features/"] #feature-list { padding-top:34px; } }

/* Detailed product screens remain light, like the illustrated mobile app. */
.product-tabs button { position:relative; }
.product-tabs button strong { font-size:16px; font-weight:650; }
.product-tabs button i { position:absolute;right:18px;top:21px;font-size:11px;font-style:normal;font-weight:500;opacity:.45;letter-spacing:1px; }
.phone { color:#1b2840; }
.phone .avatar { background-image:url('./portraits.webp');background-size:300% 200%;background-position:var(--avatar-x,0%) var(--avatar-y,0%);background-repeat:no-repeat;flex-shrink:0; }
.phone-heading>span { display:flex;gap:13px;align-items:center; }
.phone-heading>strong { display:flex;align-items:center;gap:8px; }
.heading-count { display:inline-flex;align-items:center;justify-content:center;background:#eef2f8;color:#6c7a8e;border-radius:8px;font-size:12px;min-width:22px;height:22px; }
.conversation-filters { display:flex;gap:21px;padding:12px 2px 11px;border-bottom:1px solid #edf0f4;font-size:11px;color:#8691a2; }
.conversation-filters b { color:#2863d9; }
.conversation-filters i { font-style:normal;background:#e9eef8;padding:1px 4px;border-radius:4px;font-size:9px; }
.chat-meta>.icon { width:12px;height:12px;color:#a4b0c2; }
.phone-nav { gap:0!important; }
.phone-nav button { display:flex;flex:1;flex-direction:column;align-items:center;gap:5px;background:transparent;border:0;padding:5px 0;color:#8a95a7;font:inherit;font-size:10px;cursor:pointer; }
.phone-nav button.active { color:#2462de; }
.phone-nav button .icon { width:20px;height:20px; }
.phone-nav button.active .icon { fill:#2462de12; }
.phone-nav button:focus-visible { outline:2px solid #3971e8;outline-offset:1px;border-radius:4px; }
.phone-panel { height:492px;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;overscroll-behavior:contain; }
.phone-panel::-webkit-scrollbar { display:none; }
.phone .phone-chats .chat-row { padding:12px 0; }
.phone .phone-chats .chat-row strong { font-size:13px; }
.phone .phone-chats .chat-row small { font-size:11px; }
.phone .phone-chats .avatar { width:41px;height:41px;border-radius:12px; }
.phone .chat-row>span:nth-child(2) { overflow:hidden; }
.phone .chat-row>span:nth-child(2) small { overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block; }
.phone .chat-note { font-size:9px;white-space:nowrap;margin:10px 0 0; }
.contact-shortcuts { margin-top:10px;padding-bottom:8px; }
.contact-shortcuts>div { display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #f0f2f6; }
.contact-shortcuts>div>span { background:#edf3ff;color:#4272cc;border-radius:9px;padding:7px;display:flex; }
.contact-shortcuts strong { font-size:12px;font-weight:600;flex:1; }
.contact-shortcuts b { background:#ec727c;color:white;padding:0 5px;font-size:10px;border-radius:5px; }
.contact-shortcuts>div>.icon { width:12px;color:#97a3b5; }
.phone-section-label { display:flex;justify-content:space-between;background:#f5f7fa;font-size:10px;color:#8491a5;padding:7px 10px;margin:0 -4px; }
.contact-person { display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid #f0f2f6; }
.contact-person .avatar { width:35px;height:35px;border-radius:10px; }
.contact-person>span:nth-child(2) { flex:1; }
.contact-person strong,.contact-person small { display:block; }
.contact-person strong { font-size:12px;font-weight:600; }
.contact-person small { font-size:9px;color:#8b97aa;margin-top:2px; }
.contact-person>.icon { width:16px;color:#a0adc1; }
.community-filters { display:flex;gap:25px;padding:8px 0 14px;font-size:11px;color:#8b98ac; }
.community-filters strong { color:#2863d9; }
.phone .circle-banner { border-radius:10px;padding:15px 18px;margin:0 0 12px;min-height:124px;background:radial-gradient(circle at 85% 0,#cbdafb 0,transparent 50%),linear-gradient(135deg,#edf2ff,#e0edf9);position:relative;overflow:hidden; }
.phone .circle-banner:after { content:'';position:absolute;width:85px;height:85px;border:14px solid #9ebfe255;border-radius:50%;right:12px;bottom:-34px; }
.phone .circle-banner small { font-size:9px;color:#6281ad; }
.phone .circle-banner strong { display:block;font-size:20px;color:#294f7e;line-height:1.4;margin:3px 0;letter-spacing:1px; }
.phone .circle-banner>span { display:block;font-size:9px;color:#5c789a; }
.phone .post-head { display:flex;align-items:center;gap:8px; }
.phone .post-head .avatar { width:29px;height:29px;border-radius:50%; }
.phone .post-head strong { font-size:11px; }
.phone .post-head small { font-size:9px;color:#95a0b2; }
.member-badge { font-size:8px;color:#bc9044;background:#fbf1dd;margin-left:6px;padding:1px 4px;border-radius:3px;font-weight:500; }
.post-dots { margin-left:auto;align-self:flex-start;color:#7c8da8;font-size:16px; }
.phone .post-copy { font-size:10px;line-height:1.8;margin:8px 0; }
.phone .post-copy b { color:#6585b6;font-weight:400;margin-right:7px; }
.phone .post-photo { height:128px;overflow:hidden;border-radius:8px; }
.phone .post-photo img { width:100%;height:100%;object-fit:cover;object-position:50% 44%; }
.phone .post-actions { display:flex;align-items:center;gap:6px;margin-top:10px;font-size:9px;color:#8997ac; }
.phone .post-actions .icon { width:13px;height:13px; }
.phone .post-actions>.icon:nth-of-type(2) { margin-left:13px; }
.post-actions>span { display:flex;align-items:center;gap:5px;margin-left:auto; }
.discover-moments { display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #edf0f5;margin-bottom:14px;padding:11px 0 17px; }
.discover-moments>div { display:grid;grid-template-columns:34px 1fr;column-gap:8px; }
.discover-icon { grid-row:1/3;color:#367ce2;align-self:center; }
.discover-moments strong { font-size:12px; }
.discover-moments small { color:#9aa5b6;font-size:9px; }
.discover-moments>span { display:flex;align-items:center;gap:6px;position:relative; }
.discover-moments .avatar { width:25px;height:25px;border-radius:6px; }
.discover-moments>span>i { width:5px;height:5px;background:#ed6a7a;border-radius:50%;position:absolute;top:-2px;right:16px; }
.discover-moments>span>.icon { width:9px;color:#8797ab; }
.discover-banner { position:relative;overflow:hidden;padding:16px;background:linear-gradient(110deg,#e8eeff,#e3f1fa);border-radius:10px;margin-bottom:15px; }
.discover-banner>span:first-child { display:block;font-size:9px;color:#647eae; }
.discover-banner>strong { display:block;font-size:20px;line-height:1.4;letter-spacing:.5px;color:#335080;margin:4px 0; }
.discover-banner>small { display:block;font-size:9px;color:#7f96b9; }
.bubble-art { position:absolute;right:13px;top:57px;transform:rotate(-9deg);background:linear-gradient(145deg,#73a1f2,#3974de);color:#fff;border-radius:14px 14px 2px 14px;padding:12px 13px;font-size:13px;box-shadow:0 9px 18px #3475d726; }
.discover-grid { display:grid;grid-template-columns:repeat(3,1fr);row-gap:21px;padding:10px 0 20px; }
.discover-grid>div { display:flex;flex-direction:column;align-items:center;gap:5px; }
.discover-grid .icon { color:#5082c8;width:25px;height:25px;margin-bottom:2px; }
.discover-grid>div:nth-child(2) .icon,.discover-grid>div:nth-child(4) .icon { color:#b19466; }
.discover-grid strong { font-size:10px;font-weight:600; }
.discover-grid small { font-size:8px;color:#a0aabe; }
.discover-end { font-size:9px;color:#a0adc0;text-align:center;border-top:1px solid #edf0f5;padding-top:12px; }
.profile-user { display:flex;align-items:center;gap:11px;padding:15px 0 19px; }
.profile-user>.avatar { width:52px;height:52px;border-radius:17px; }
.profile-user>div { flex:1; }
.profile-user strong { display:flex;gap:7px;align-items:center;font-size:17px;margin-bottom:3px; }
.profile-user strong .icon { width:15px;height:15px;color:#bda168; }
.profile-user span:not(.avatar),.profile-user small { display:block;font-size:9px;color:#8898b0;line-height:1.9; }
.profile-user>.icon { width:12px;color:#9aa8ba; }
.profile-stats { display:grid;grid-template-columns:repeat(3,1fr);padding:0 0 16px; }
.profile-stats>span { display:flex;flex-direction:column;text-align:center;gap:3px;font-size:9px;color:#9ba6b7; }
.profile-stats b { color:#405677;font-size:16px;font-weight:650; }
.profile-stats>span+span { border-left:1px solid #edf0f5; }
.profile-vip { background:linear-gradient(110deg,#243d68,#405e89);border-radius:10px;padding:14px 17px;color:#e5d0aa;margin-bottom:12px;position:relative;overflow:hidden; }
.profile-vip:after { content:'M';font-size:110px;font-weight:700;color:#f9ecd20b;position:absolute;right:6px;top:-23px;transform:rotate(-14deg); }
.profile-vip>span { display:flex;align-items:center;gap:6px;font-size:11px; }
.profile-vip .icon { width:16px;height:16px; }
.profile-vip strong { display:block;color:#f3e0ba;font-size:15px;font-weight:600;margin:4px 0; }
.profile-vip small { font-size:9px; }
.profile-menu>div { display:flex;align-items:center;gap:10px;padding:11px 1px;border-bottom:1px solid #f0f3f7; }
.profile-menu .icon { color:#7b93b6;width:17px;height:17px; }
.profile-menu strong { flex:1;font-size:11px;font-weight:500; }
.profile-menu small { font-size:9px;color:#a0aabc; }
.profile-menu .icon:last-child { width:9px;color:#9eacbf; }
@media(max-width:760px) {
 .product-tabs button i { display:none; }
 .product-tabs button strong { font-size:12px; }
 .product-tabs button>span { display:none; }
 .product-tabs { display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px!important; }
 .product-tabs button { min-width:0;display:flex!important;flex-direction:column;align-items:center!important;gap:7px!important;padding:13px 3px!important; }
 .product-tabs button>.icon { width:20px;height:20px; }
}

/* Commercial value and industry use cases: an editorial companion to the product tour. */
.business-section { padding-top: 104px; padding-bottom: 108px; }
.business-section .section-heading { max-width: 850px; margin-bottom: 43px; }
.business-value-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); gap: 0; }
.business-value-grid > article { position: relative; min-width: 0; padding: 32px 32px 29px; border-right: 1px solid var(--line); }
.business-value-grid > article:first-child { padding-left: 0; }
.business-value-grid > article:last-child { padding-right: 0; border-right: 0; }
.business-value-grid .step-number { display: block; color: #b4c8e5; font-size: 46px; font-weight: 300; line-height: 1; letter-spacing: -.06em; font-variant-numeric: tabular-nums; margin-bottom: 29px; }
.business-value-grid h3 { max-width: 300px; font-size: 24px; line-height: 1.5; letter-spacing: -.035em; }
.business-value-grid > article > p { margin-top: 16px; font-size: 14px; line-height: 1.95; }
.business-value-grid ul { list-style: none; margin: 24px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 11px; }
.business-value-grid li { display: flex; align-items: flex-start; gap: 10px; color: var(--ink); font-size: 12px; line-height: 1.85; }
.business-value-grid li::before { content: ""; width: 4px; height: 4px; background: var(--blue); flex: none; border-radius: 1px; margin-top: 9px; }
.business-value-grid li > .icon { width: 14px; height: 14px; margin-top: 4px; color: var(--blue); }
.business-value-grid li:has(> .icon)::before { display: none; }
.business-value-grid > article:nth-child(2) .step-number { color: #739ed8; }
.business-value-grid > article:nth-child(3) .step-number { color: #487bbe; }

.industry-preview { display: grid; grid-template-columns: .75fr 1.5fr; gap: 67px; align-items: start; padding-top: 86px; padding-bottom: 93px; position: relative; isolation: isolate; border-top: 1px solid var(--line); }
.industry-preview::before { content: ""; position: absolute; inset: 0 calc((1200px - 100vw) / 2); background: linear-gradient(125deg, var(--soft), var(--page) 75%); z-index: -1; pointer-events: none; }
.industry-intro { min-width: 0; }
.industry-intro h2 { font-size: 37px; line-height: 1.5; }
.industry-intro > p:not(.eyebrow) { margin-top: 20px; font-size: 14px; line-height: 1.95; }
.industry-intro > .button { margin-top: 22px; font-size: 12px; }
.industry-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 31px; min-width: 0; }
.industry-list > a { display: grid; grid-template-columns: 21px minmax(0, 1fr) 17px; gap: 11px; padding: 24px 0 25px; border-top: 1px solid var(--line); min-width: 0; align-items: start; transition: border-color .2s, color .2s; }
.industry-list > a:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
.industry-list > a > span { display: block; color: var(--quiet); font-size: 10px; line-height: 24px; font-variant-numeric: tabular-nums; }
.industry-list > a > div { min-width: 0; }
.industry-list h3 { font-size: 17px; line-height: 1.45; letter-spacing: -.02em; }
.industry-list p { font-size: 11px; margin-top: 9px; line-height: 1.95; }
.industry-list > a > .icon { width: 16px; height: 16px; margin-top: 5px; color: var(--quiet); transition: color .2s, transform .2s; }
.industry-list > a:hover { border-top-color: var(--blue); }
.industry-list > a:hover h3, .industry-list > a:hover > span, .industry-list > a:hover > .icon { color: var(--blue); }
.industry-list > a:hover > .icon { transform: translateX(3px); }

.solution-index { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); overflow: hidden; margin-top: 4px; margin-bottom: 57px; }
.solution-index > a { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 17px 10px; border-right: 1px solid var(--line); font-size: 12px; color: var(--muted); text-align: center; line-height: 1.6; transition: background .2s, color .2s; }
.solution-index > a:last-child { border-right: 0; }
.solution-index > a:hover, .solution-index > a[aria-current="true"], .solution-index > a[aria-current="location"] { color: var(--blue); background: var(--blue-soft); }
.solution-index > a .icon { width: 16px; height: 16px; }
.solution-section { display: grid; grid-template-columns: 275px minmax(0, 1fr); gap: 77px; padding: 69px 0 72px; border-top: 1px solid var(--line); scroll-margin-top: 92px; align-items: start; position: relative; }
.solution-title { min-width: 0; position: sticky; top: 121px; }
.solution-title .section-number { display: block; font-size: 11px; letter-spacing: .15em; margin-bottom: 24px; }
.solution-title h2 { font-size: 33px; line-height: 1.5; letter-spacing: -.035em; }
.solution-title > p { font-size: 13px; line-height: 1.95; margin-top: 20px; padding-right: 8px; }
.solution-title::after { content: ""; width: 37px; height: 2px; display: block; margin-top: 25px; background: var(--blue); opacity: .55; }
.solution-content { min-width: 0; }
.solution-content > p { font-size: 14px; line-height: 1.95; margin-top: 14px; }
.solution-content > p.scenario-pain { margin: 0 0 29px; padding: 18px 21px; border-left: 2px solid #a8c4e7; background: var(--soft); color: var(--muted); font-size: 13px; line-height: 1.95; border-radius: 0 7px 7px 0; }
.solution-content > h3 { font-size: 23px; line-height: 1.5; letter-spacing: -.025em; margin-top: 27px; }
.solution-content > h3:first-child { margin-top: 0; }
.solution-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; margin-top: 32px; }
.solution-detail-grid > article { border-top: 1px solid var(--line); padding-top: 19px; min-width: 0; }
.solution-detail-grid h4 { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.6; }
.solution-detail-grid ul { list-style: none; margin: 15px 0 0; padding: 0; display: grid; gap: 10px; }
.solution-detail-grid li { font-size: 12px; line-height: 1.85; color: var(--muted); display: flex; align-items: flex-start; gap: 9px; }
.solution-detail-grid li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: #80a7da; flex: none; margin-top: 8px; }
.solution-detail-grid li > .icon { color: var(--blue); width: 14px; height: 14px; margin-top: 4px; }
.solution-detail-grid li:has(> .icon)::before { display: none; }
.solution-result { position: relative; padding: 25px 29px; margin-top: 34px; border-radius: 8px; background: #edf5ff; border: 1px solid #dce9f9; overflow: hidden; }
.solution-result::after { content: ""; position: absolute; top: -45px; right: -32px; width: 170px; height: 170px; border: 1px solid rgb(106 150 211 / 12%); border-radius: 50%; box-shadow: 0 0 0 18px rgb(106 150 211 / 4%); pointer-events: none; }
.solution-result > span { display: block; font-size: 9px; font-weight: 550; color: #5783bd; letter-spacing: .1em; margin-bottom: 10px; position: relative; z-index: 1; }
.solution-result h3 { color: #245180; font-size: 20px; line-height: 1.55; margin: 0; position: relative; z-index: 1; }
.solution-result p { font-size: 12px; line-height: 1.95; color: #607e9f; margin-top: 11px; position: relative; z-index: 1; max-width: 580px; }
.solution-content .actions { margin-top: 25px; }
.solution-content .actions .button { font-size: 12px; min-height: 44px; padding: 11px 18px; }
.solution-section:nth-of-type(even) .solution-result { background: #f2f7fc; border-color: #e2eaf4; }
.solution-section + .cta-wrap { margin-top: 28px; }

[data-theme="dark"] .business-value-grid .step-number { color: #415f84; }
[data-theme="dark"] .business-value-grid > article:nth-child(2) .step-number { color: #557db0; }
[data-theme="dark"] .business-value-grid > article:nth-child(3) .step-number { color: #729fd6; }
[data-theme="dark"] .solution-content > p.scenario-pain { border-left-color: #416994; }
[data-theme="dark"] .solution-detail-grid li::before { background: #638ab8; }
[data-theme="dark"] .solution-result,
[data-theme="dark"] .solution-section:nth-of-type(even) .solution-result { background: #192d45; border-color: #2b4360; }
[data-theme="dark"] .solution-result > span { color: #8eb5e7; }
[data-theme="dark"] .solution-result h3 { color: #d0e4ff; }
[data-theme="dark"] .solution-result p { color: #9eb6d0; }

@media (max-width: 1280px) {
  .industry-preview::before { left: -40px; right: -40px; }
}
@media (max-width: 1100px) {
  .business-section { padding-top: 86px; padding-bottom: 86px; }
  .business-value-grid > article { padding-left: 25px; padding-right: 25px; }
  .business-value-grid h3 { font-size: 22px; }
  .business-value-grid > article > p { font-size: 13px; }
  .industry-preview { grid-template-columns: .72fr 1.45fr; gap: 42px; padding-top: 72px; padding-bottom: 77px; }
  .industry-preview::before { left: -28px; right: -28px; }
  .industry-intro h2 { font-size: 33px; }
  .industry-intro > p:not(.eyebrow) { font-size: 13px; }
  .industry-list { column-gap: 22px; }
  .industry-list > a { gap: 8px; grid-template-columns: 18px minmax(0, 1fr) 14px; }
  .industry-list h3 { font-size: 16px; }
  .industry-list p { font-size: 11px; }
  .solution-section { grid-template-columns: 235px minmax(0, 1fr); gap: 49px; padding: 58px 0 61px; }
  .solution-title h2 { font-size: 30px; }
  .solution-title { top: 114px; }
  .solution-detail-grid { gap: 25px; }
}
@media (max-width: 960px) {
  .business-value-grid h3 { font-size: 20px; }
  .business-value-grid > article { padding-left: 20px; padding-right: 20px; }
  .business-value-grid .step-number { font-size: 39px; }
  .business-value-grid li { font-size: 11px; }
  .industry-preview { grid-template-columns: 1fr; gap: 32px; }
  .industry-intro { max-width: 570px; }
  .industry-intro h2 { font-size: 34px; }
  .industry-list { column-gap: 35px; }
  .industry-list > a { padding: 24px 0; grid-template-columns: 24px minmax(0, 1fr) 19px; gap: 13px; }
  .industry-list h3 { font-size: 18px; }
  .industry-list p { font-size: 12px; }
  .solution-index { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 39px; }
  .solution-index > a { font-size: 12px; padding: 15px 10px; }
  .solution-index > a:nth-child(3n) { border-right: 0; }
  .solution-index > a:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  .solution-section { grid-template-columns: 190px minmax(0, 1fr); gap: 33px; }
  .solution-title h2 { font-size: 27px; }
  .solution-title > p { font-size: 12px; }
  .solution-content > h3 { font-size: 21px; }
  .solution-content > p { font-size: 13px; }
  .solution-detail-grid { gap: 20px; }
  .solution-detail-grid li { font-size: 11px; }
  .solution-result { padding: 22px 23px; }
  .solution-result h3 { font-size: 18px; }
}
@media (max-width: 760px) {
  .business-section { padding-top: 64px; padding-bottom: 65px; }
  .business-section .section-heading { margin-bottom: 29px; }
  .business-value-grid { grid-template-columns: 1fr; border-top: 0; }
  .business-value-grid > article,
  .business-value-grid > article:first-child,
  .business-value-grid > article:last-child { display: grid; grid-template-columns: 43px minmax(0, 1fr); column-gap: 20px; padding: 26px 0 28px; border-right: 0; border-top: 1px solid var(--line); }
  .business-value-grid .step-number { grid-column: 1; grid-row: 1 / 4; margin: 3px 0 0; font-size: 35px; line-height: 1; }
  .business-value-grid h3 { grid-column: 2; font-size: 22px; line-height: 1.45; }
  .business-value-grid > article > p { grid-column: 2; font-size: 12px; line-height: 1.95; margin-top: 13px; }
  .business-value-grid ul { grid-column: 2; gap: 8px; margin-top: 17px; padding-top: 14px; }
  .business-value-grid li { font-size: 11px; gap: 8px; }
  .business-value-grid li::before { margin-top: 8px; width: 3px; height: 3px; }
  .industry-preview { grid-template-columns: 1fr; gap: 30px; padding-top: 61px; padding-bottom: 66px; }
  .industry-preview::before { left: -20px; right: -20px; }
  .industry-intro h2 { font-size: 30px; }
  .industry-intro > p:not(.eyebrow) { font-size: 13px; line-height: 1.95; margin-top: 17px; }
  .industry-intro > .button { margin-top: 16px; font-size: 12px; }
  .industry-list { grid-template-columns: 1fr; }
  .industry-list > a { grid-template-columns: 24px minmax(0, 1fr) 18px; gap: 12px; padding: 21px 0 22px; }
  .industry-list > a:nth-last-child(-n+2) { border-bottom: 0; }
  .industry-list > a:last-child { border-bottom: 1px solid var(--line); }
  .industry-list > a > span { font-size: 10px; }
  .industry-list h3 { font-size: 18px; }
  .industry-list p { font-size: 12px; margin-top: 7px; line-height: 1.85; }
  .industry-list > a > .icon { width: 16px; height: 16px; margin-top: 5px; }
  .solution-index { margin-top: 0; margin-bottom: 33px; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 7px; }
  .solution-index > a { padding: 13px 8px; gap: 6px; font-size: 11px; }
  .solution-index > a:nth-child(3n) { border-right: 1px solid var(--line); }
  .solution-index > a:nth-child(2n) { border-right: 0; }
  .solution-index > a:nth-child(-n+4) { border-bottom: 1px solid var(--line); }
  .solution-index > a .icon { width: 14px; height: 14px; }
  .solution-section { display: block; padding: 37px 0 44px; scroll-margin-top: 85px; }
  .solution-title { position: static; margin-bottom: 26px; }
  .solution-title .section-number { font-size: 10px; margin-bottom: 16px; }
  .solution-title h2 { font-size: 29px; line-height: 1.45; }
  .solution-title > p { font-size: 13px; margin-top: 14px; padding-right: 0; line-height: 1.95; }
  .solution-title::after { width: 27px; margin-top: 18px; height: 2px; }
  .solution-content > p.scenario-pain { padding: 15px 16px; margin-bottom: 22px; font-size: 12px; line-height: 1.95; }
  .solution-content > h3 { font-size: 21px; line-height: 1.55; margin-top: 23px; }
  .solution-content > p { font-size: 13px; line-height: 1.95; margin-top: 12px; }
  .solution-detail-grid { grid-template-columns: 1fr; gap: 22px; margin-top: 25px; }
  .solution-detail-grid > article { padding-top: 17px; }
  .solution-detail-grid h4 { font-size: 13px; }
  .solution-detail-grid ul { margin-top: 12px; gap: 9px; }
  .solution-detail-grid li { font-size: 12px; gap: 8px; }
  .solution-detail-grid li::before { width: 3px; height: 3px; margin-top: 9px; }
  .solution-result { padding: 21px 20px; margin-top: 26px; border-radius: 7px; }
  .solution-result > span { font-size: 8px; margin-bottom: 9px; letter-spacing: .08em; }
  .solution-result h3 { font-size: 19px; line-height: 1.55; }
  .solution-result p { font-size: 12px; line-height: 1.95; margin-top: 10px; }
  .solution-content .actions { margin-top: 21px; gap: 10px; }
  .solution-content .actions .button { min-height: 43px; font-size: 11px; padding: 11px 15px; gap: 14px; }
}
@media (max-width: 380px) {
  .industry-preview::before { left: -16px; right: -16px; }
  .business-value-grid > article,
  .business-value-grid > article:first-child,
  .business-value-grid > article:last-child { grid-template-columns: 37px minmax(0, 1fr); column-gap: 16px; }
  .business-value-grid .step-number { font-size: 31px; }
  .business-value-grid h3 { font-size: 20px; }
  .solution-title h2 { font-size: 27px; }
  .solution-index > a { font-size: 10px; }
}

/* The same bright blue-and-white operations desk shown in the product artwork. */
.admin-workspace {
  --admin-paper: #fff;
  --admin-canvas: #f1f5ff;
  --admin-side: #165dff;
  --admin-ink: #183459;
  --admin-muted: #647b98;
  --admin-line: #dfe8f7;
  --admin-accent: #165dff;
  --admin-tint: #e9f1ff;
  width: 100%;
  border: 1px solid #c9daf6;
  border-radius: 15px;
  overflow: hidden;
  color: var(--admin-ink);
  background: var(--admin-canvas);
  box-shadow: 0 22px 65px rgb(40 83 175 / 13%), 0 2px 6px rgb(32 64 106 / 3%);
  text-align: left;
}
.admin-workspace button, .admin-workspace input { font-family: inherit; }
.admin-topbar { height: 66px; padding: 0 25px; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: #fff; color: #184685; border-bottom: 1px solid var(--admin-line); }
.admin-wordmark { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.admin-wordmark > span { width: 31px; height: 31px; display: flex; align-items: center; justify-content: center; background: linear-gradient(145deg, #5495ff, #165dff); box-shadow: 0 3px 9px #165dff26, inset 0 1px 0 #ffffff30; border-radius: 9px; color: #fff; font-size: 18px; font-weight: 750; letter-spacing: -.09em; padding-right: 2px; }
.admin-wordmark > strong { font-size: 16px; font-weight: 650; letter-spacing: .01em; color: #1a4381; }
.admin-wordmark small { font-size: 12px; font-weight: 400; letter-spacing: .02em; color: #748cac; border-left: 1px solid #cfdcef; padding-left: 12px; margin-left: 10px; }
.admin-top-tools { display: flex; align-items: center; gap: 13px; color: #6f85a2; font-size: 12px; }
.admin-top-tools > .icon { width: 18px; height: 18px; color: #6886ad; margin: 0 5px 0 7px; }
.preview-mode { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; background: #fff4df; border: 1px solid #fbe6bd; border-radius: 5px; color: #a57019; font-size: 11px; }
.preview-mode i { width: 4px; height: 4px; border-radius: 50%; background: #dc9e31; }
.console-admin { width: 29px; height: 29px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #e8efff; border: 1px solid #d1e0fe; color: #2164d5; font-size: 13px; }
.admin-workarea { display: grid; grid-template-columns: 210px minmax(0, 1fr); min-height: 678px; }
.admin-sidenav { min-width: 0; background: linear-gradient(175deg, #165dff, #1958df 56%, #327cea); border-right: 1px solid #1c62e8; padding: 21px 11px 17px; display: flex; flex-direction: column; }
.admin-nav-label { display: block; color: #c2d9ff; font-size: 11px; letter-spacing: .07em; margin: 0 14px 16px; }
.admin-sidenav [role="tablist"] { display: flex; flex-direction: column; gap: 5px; max-height: 583px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #8fb7ff77 transparent; padding-right: 2px; }
.admin-sidenav [role="tab"] { position: relative; min-height: 42px; width: 100%; flex: none; padding: 10px 10px 10px 12px; text-align: left; display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 450; line-height: 1.65; color: #edf5ff; border-radius: 7px; transition: background .16s, color .16s; }
.admin-sidenav [role="tab"] > .icon:first-child { width: 17px; height: 17px; color: #d7e7ff; }
.admin-sidenav [role="tab"] > .icon:last-child { width: 10px; height: 10px; margin-left: auto; color: #b9d5ff; }
.admin-sidenav [role="tab"][aria-selected="true"] { background: #fff; color: #1458dc; font-weight: 550; box-shadow: 0 4px 12px #0a3d9324; }
.admin-sidenav [role="tab"][aria-selected="true"] > .icon { color: #2165e7; }
.admin-sidenav [role="tab"]:hover:not([aria-selected="true"]) { color: #fff; background: #ffffff20; }
.admin-sidenav [role="tab"]:focus-visible { outline: 2px solid #ffe096; outline-offset: -2px; }
.admin-sidebar-foot { display: flex; align-items: center; gap: 6px; color: #d2e5ff; font-size: 10px; border-top: 1px solid #ffffff36; padding: 15px 5px 0; margin-top: auto; }
.admin-sidebar-foot .icon { width: 13px; height: 13px; }
.admin-main { min-width: 0; padding: 21px 25px 19px; background: var(--admin-canvas); }
.admin-module { min-width: 0; }
.admin-breadcrumb { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: #7589a5; font-size: 11px; line-height: 1.5; }
.admin-breadcrumb > span { color: #4a70be; background: #e2ebff; font-size: 10px; line-height: 1.5; padding: 3px 7px; border-radius: 4px; white-space: nowrap; }
.admin-title-line { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 17px 0 19px; }
.admin-title-line h3 { color: var(--admin-ink); font-size: 23px; font-weight: 600; line-height: 1.3; letter-spacing: -.025em; }
.admin-title-line p { color: var(--admin-muted); font-size: 12px; line-height: 1.85; margin-top: 7px; }
.admin-module-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border: 1px solid #d7e4ff; border-radius: 11px; background: #e7efff; color: #376fe0; }
.admin-module-icon .icon { width: 20px; height: 20px; }
.admin-feature-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 19px; }
.admin-feature-strip > span { --feature-color: #3169d7; --feature-tint: #e4eeff; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 13px 11px; border: 1px solid #dbe6f8; background: #fff; border-radius: 8px; font-size: 12px; color: #4a6589; line-height: 1.6; box-shadow: 0 3px 8px #2e5bb504; }
.admin-feature-strip > span:nth-child(2) { --feature-color: #8258c9; --feature-tint: #f0e8ff; border-color: #e5ddf5; }
.admin-feature-strip > span:nth-child(3) { --feature-color: #13866c; --feature-tint: #dff8ef; border-color: #d4ede5; }
.admin-feature-strip > span:nth-child(4) { --feature-color: #ba7024; --feature-tint: #fff0d9; border-color: #f1e4cb; }
.admin-feature-strip b { display: flex; align-items: center; justify-content: center; width: 25px; height: 25px; flex: none; font-size: 11px; font-weight: 600; background: var(--feature-tint); color: var(--feature-color); border-radius: 7px; font-variant-numeric: tabular-nums; }
.admin-table-card { min-width: 0; border: 1px solid var(--admin-line); background: var(--admin-paper); border-radius: 7px; overflow: hidden; box-shadow: 0 2px 5px rgb(33 69 111 / 2%); }
.admin-toolbar { display: flex; align-items: center; gap: 13px; padding: 14px 17px; border-bottom: 1px solid var(--admin-line); }
.admin-toolbar > label { min-width: 0; max-width: 280px; flex: 1 1 230px; border: 1px solid #dce4ef; border-radius: 5px; display: flex; align-items: center; gap: 7px; padding: 7px 9px; line-height: 1.5; background: var(--admin-paper); }
.admin-toolbar > label .icon { width: 13px; height: 13px; color: #96a8bf; }
.admin-toolbar input { min-width: 0; width: 100%; border: 0; padding: 0; background: transparent; font-size: 12px; line-height: 1.5; color: var(--admin-ink); outline: none; }
.admin-toolbar input::placeholder { color: #8295b2; }
.admin-toolbar > label:focus-within { border-color: #719ee2; box-shadow: 0 0 0 2px rgb(80 135 218 / 11%); }
.admin-filter-label { display: flex; align-items: center; gap: 6px; color: #7085a4; font-size: 11px; min-width: 0; line-height: 1.7; }
.admin-filter-label .icon { width: 13px; height: 13px; }
.admin-reset { padding: 6px 12px; min-height: 29px; border: 1px solid #dce4ef; border-radius: 5px; background: var(--admin-paper); color: #70869f; font-size: 12px; line-height: 1.5; margin-left: auto; flex: none; }
.admin-reset:hover { color: var(--admin-accent); border-color: #90b5ee; }
.admin-table-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 15px 18px 13px; }
.admin-table-heading > strong { display: flex; gap: 7px; align-items: center; color: #445b77; font-size: 13px; font-weight: 550; }
.admin-table-heading > strong > span { font-size: 10px; color: #88a0be; background: #f1f5fb; border-radius: 4px; padding: 0 5px; line-height: 17px; }
.admin-table-heading > span { font-size: 10px; color: #7f92ad; }
.admin-table-scroll { width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #c8d6e9 #f5f8fc; }
.admin-table-scroll table { width: 100%; min-width: 700px; border-collapse: collapse; text-align: left; font-size: 12px; white-space: nowrap; }
.admin-table-scroll th { height: 37px; background: #f0f5ff; padding: 10px 13px; color: #687f9f; font-size: 11px; font-weight: 500; line-height: 1.65; border-top: 1px solid var(--admin-line); border-bottom: 1px solid var(--admin-line); }
.admin-table-scroll td { height: 50px; padding: 11px 13px; color: #536f93; font-size: 12px; line-height: 1.65; border-bottom: 1px solid #eaf0f9; }
.admin-table-scroll tr:last-child td { border-bottom: 0; }
.admin-table-scroll tbody tr { transition: background .15s; }
.admin-table-scroll tbody tr:nth-child(even) { background: #fcfdff; }
.admin-table-scroll tbody tr:hover { background: #edf4ff; }
.admin-table-scroll th:last-child, .admin-table-scroll td:last-child { text-align: right; padding-right: 18px; }
.admin-table-scroll .table-row-number { width: 35px; color: #a7b5c8; font-size: 10px; font-variant-numeric: tabular-nums; padding-left: 17px; padding-right: 5px; }
.admin-record-title { display: inline-flex; align-items: center; gap: 8px; color: #354f6f; font-size: 12px; font-weight: 500; }
.record-icon { display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px; flex: none; background: #eaf1ff; border: 1px solid #dce8ff; border-radius: 7px; color: #5986d1; }
.admin-table-scroll tbody tr:nth-child(3n+2) .record-icon { color: #8c6fc7; background: #f2ecff; border-color: #e8ddfb; }
.admin-table-scroll tbody tr:nth-child(3n) .record-icon { color: #379b83; background: #e8f8f2; border-color: #d6eee6; }
.record-icon .icon { width: 13px; height: 13px; }
#admin-panel-users tbody tr:nth-child(-n+4) .record-icon { width: 31px; height: 31px; border-radius: 50%; background-image: url('./portraits.webp'); background-size: 300% 200%; background-position: 0% 0%; border: 1px solid #d7e5fa; box-shadow: 0 0 0 2px #fff; }
#admin-panel-users tbody tr:nth-child(-n+4) .record-icon .icon { display: none; }
#admin-panel-users tbody tr:nth-child(2) .record-icon { background-position: 50% 0%; }
#admin-panel-users tbody tr:nth-child(3) .record-icon { background-position: 100% 0%; }
#admin-panel-users tbody tr:nth-child(4) .record-icon { background-position: 0% 100%; }
.record-status { display: inline-flex; gap: 5px; align-items: center; font-size: 10px; line-height: 1.6; color: #168463; padding: 3px 8px; background: #e0f7ee; border-radius: 4px; }
.record-status::before { content: ""; width: 3px; height: 3px; background: currentColor; border-radius: 50%; }
.record-status.record-pending { color: #b77717; background: #fff0d9; }
.admin-record-button { padding: 3px 0 3px 6px; color: var(--admin-accent); font-size: 11px; line-height: 1.5; white-space: nowrap; border-radius: 3px; }
.admin-record-button:hover { text-decoration: underline; text-underline-offset: 3px; }
.admin-record-button:focus-visible { outline-width: 2px; outline-offset: 2px; }
.admin-no-results { padding: 42px 20px; text-align: center; font-size: 13px; color: var(--admin-muted); }
.admin-table-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 17px; border-top: 1px solid var(--admin-line); font-size: 11px; color: #7a91b0; }
.admin-table-bottom > span > b { font-weight: 500; color: #7f94b0; }
.admin-pagination { display: flex; align-items: center; gap: 5px; }
.admin-pagination i, .admin-pagination > b { width: 21px; height: 21px; display: flex; align-items: center; justify-content: center; border: 1px solid #e5ecf5; border-radius: 4px; font-size: 12px; font-weight: 400; font-style: normal; color: #acbbce; }
.admin-pagination > b { color: var(--admin-accent); border-color: #d7e6fb; background: #edf4ff; font-size: 11px; }
.admin-module-notes { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; padding: 14px 16px; margin-top: 15px; align-items: start; background: #e9f0ff; border: 1px solid #dce7ff; border-radius: 7px; }
.admin-module-notes > strong { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #4c74b9; font-weight: 550; }
.admin-module-notes .icon { width: 13px; height: 13px; }
.admin-module-notes p { font-size: 11px; color: #6b84a8; line-height: 1.85; }
.admin-disclosure { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 12px 22px; background: var(--admin-paper); border-top: 1px solid var(--admin-line); color: #7890af; font-size: 11px; line-height: 1.6; }
.admin-disclosure > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.admin-disclosure .icon { width: 12px; height: 12px; }

/* All eleven capability chapters stay readable beyond the interactive preview. */
.console-capabilities { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 39px; row-gap: 36px; }
.console-capabilities > article { min-width: 0; border: 1px solid var(--line); border-top: 3px solid #6c94ef; border-radius: 11px; padding: 24px 24px 25px; background: var(--surface); }
.console-capabilities > article:nth-child(4n+2) { border-top-color: #ad8ae3; }
.console-capabilities > article:nth-child(4n+3) { border-top-color: #49b69b; }
.console-capabilities > article:nth-child(4n) { border-top-color: #e6ad5d; }
.console-capabilities > article:nth-child(4n+2) .icon-box { background: #f3edff; color: #8259c6; }
.console-capabilities > article:nth-child(4n+3) .icon-box { background: #e8f8f1; color: #258a6d; }
.console-capabilities > article:nth-child(4n) .icon-box { background: #fff3df; color: #b6812e; }
.console-capability-title { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 19px; }
.console-capability-title .icon-box { width: 43px; height: 43px; border-radius: 12px; }
.console-capability-title .icon-box .icon { width: 21px; height: 21px; }
.console-capability-title .section-number { font-size: 13px; margin: 0; color: var(--quiet); font-weight: 400; }
.console-capabilities h3 { font-size: 20px; line-height: 1.5; }
.console-capabilities > article > p { font-size: 12px; line-height: 1.95; margin-top: 11px; }
.console-capabilities ul { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 9px; }
.console-capabilities li { display: flex; gap: 8px; align-items: flex-start; color: var(--muted); font-size: 12px; line-height: 1.8; }
.console-capabilities li .icon { color: var(--blue); width: 14px; height: 14px; margin-top: 4px; }
.admin-detail-dialog { width: 590px; max-width: calc(100vw - 36px); max-height: min(88dvh, 810px); overflow-y: auto; padding: 37px 38px 27px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 13px; box-shadow: 0 25px 95px rgb(4 22 48 / 22%); }
.admin-detail-dialog::backdrop { background: rgb(14 30 54 / 56%); backdrop-filter: blur(4px); }
.admin-detail-close { position: absolute; right: 17px; top: 17px; display: flex; align-items: center; justify-content: center; width: 31px; height: 31px; background: var(--soft); color: var(--muted); border-radius: 50%; padding: 6px; }
.admin-detail-close .icon { width: 17px; height: 17px; }
.admin-detail-close:hover { background: var(--blue-soft); color: var(--blue); }
.admin-detail-dialog .eyebrow { font-size: 11px; margin-bottom: 17px; padding-right: 27px; }
.admin-detail-dialog h2 { font-size: 28px; line-height: 1.45; }
.admin-detail-dialog dl { margin: 25px 0 0; border-top: 1px solid var(--line); }
.admin-detail-dialog dl > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 17px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.admin-detail-dialog dt { font-size: 12px; color: var(--muted); line-height: 1.85; }
.admin-detail-dialog dd { font-size: 12px; color: var(--ink); line-height: 1.85; margin: 0; overflow-wrap: anywhere; }
.admin-detail-dialog .note { border: 0; padding: 0; font-size: 12px; margin-top: 22px; }

/* The page can be dark while this faithful software preview retains a light workspace. */
[data-theme="dark"] .admin-workspace { color-scheme: light; --admin-paper: #f9fbff; --admin-canvas: #eaf0fb; --admin-ink: #1d3555; --admin-muted: #5f7595; --admin-line: #d6e1f3; --admin-accent: #165dff; border-color: #5074a7; box-shadow: 0 22px 65px #0004, 0 0 0 1px #b8d1ff12; }
[data-theme="dark"] .admin-topbar { background: #f5f8ff; }
[data-theme="dark"] .admin-sidenav { background: linear-gradient(175deg, #1b56db, #174cc2 60%, #2c67c8); border-color: #306de2; }
[data-theme="dark"] .admin-sidenav [role="tab"][aria-selected="true"] { background: #f4f8ff; color: #1458d5; }
[data-theme="dark"] .admin-feature-strip > span { background: #f9fbff; }
[data-theme="dark"] .admin-module-notes { background: #e0eafb; border-color: #cfdef5; }
[data-theme="dark"] .console-capabilities > article:nth-child(4n+2) .icon-box { background: #392d56; color: #c8a9ff; }
[data-theme="dark"] .console-capabilities > article:nth-child(4n+3) .icon-box { background: #213f37; color: #81d6b9; }
[data-theme="dark"] .console-capabilities > article:nth-child(4n) .icon-box { background: #463c2c; color: #edc786; }

@media (max-width: 1100px) {
  .admin-workarea { grid-template-columns: 190px minmax(0, 1fr); }
  .admin-topbar { padding-inline: 20px; }
  .admin-main { padding: 20px; }
  .admin-sidenav { padding-inline: 9px; }
  .admin-sidenav [role="tab"] { font-size: 12px; padding-inline: 10px; gap: 8px; }
  .admin-feature-strip { gap: 7px; }
  .admin-feature-strip > span { font-size: 11px; padding-inline: 9px; gap: 6px; }
  .admin-feature-strip b { width: 20px; height: 20px; font-size: 10px; }
  .admin-table-scroll table { min-width: 660px; }
  .admin-table-scroll td { padding-inline: 10px; }
  .admin-toolbar { padding-inline: 14px; gap: 10px; }
  .admin-filter-label { font-size: 10px; }
  .console-capabilities { column-gap: 30px; }
}
@media (max-width: 960px) {
  .admin-workarea { grid-template-columns: 180px minmax(0, 1fr); }
  .admin-wordmark small { font-size: 11px; }
  .admin-top-tools { gap: 10px; font-size: 11px; }
  .admin-main { padding: 18px 16px; }
  .admin-sidenav { padding-inline: 7px; }
  .admin-sidenav [role="tab"] { font-size: 12px; gap: 7px; }
  .admin-sidenav [role="tab"] > .icon:first-child { width: 14px; height: 14px; }
  .admin-sidebar-foot { font-size: 9px; gap: 4px; padding-inline: 2px; }
  .admin-feature-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .admin-feature-strip > span { padding: 9px 11px; font-size: 12px; }
  .admin-feature-strip b { width: 20px; height: 20px; }
  .admin-filter-label { display: none; }
  .admin-toolbar > label { max-width: none; }
  .admin-disclosure { font-size: 10px; padding-inline: 17px; }
  .console-capabilities h3 { font-size: 18px; }
  .console-capabilities li { font-size: 13px; }
}
@media (max-width: 760px) {
  .admin-workspace { border-radius: 9px; box-shadow: 0 12px 36px rgb(32 64 106 / 8%); }
  .admin-topbar { height: 53px; padding: 0 13px; gap: 10px; }
  .admin-wordmark { gap: 8px; }
  .admin-wordmark > span { width: 25px; height: 25px; font-size: 14px; border-radius: 7px; }
  .admin-wordmark > strong { font-size: 12px; }
  .admin-wordmark small { display: none; }
  .admin-top-tools { gap: 8px; }
  .admin-top-tools > span:last-child, .admin-top-tools > .icon { display: none; }
  .console-admin { width: 23px; height: 23px; font-size: 11px; }
  .preview-mode { padding: 3px 6px; font-size: 10px; gap: 4px; }
  .admin-workarea { display: block; min-height: 0; }
  .admin-sidenav { padding: 10px 10px 11px; border-right: 0; border-bottom: 1px solid var(--admin-line); }
  .admin-nav-label { font-size: 10px; margin: 0 2px 8px; }
  .admin-nav-label::after { content: ""; display: inline-block; width: 17px; height: 1px; background: #c3d1e5; margin: 0 0 3px 8px; }
  .admin-sidenav [role="tablist"] { display: flex; flex-flow: row nowrap; gap: 6px; padding: 0 1px 5px; overflow-x: auto; overflow-y: hidden; max-height: none; scrollbar-width: thin; scroll-padding-inline: 10px; overscroll-behavior-x: contain; }
  .admin-sidenav [role="tab"] { flex: 0 0 auto; width: auto; min-height: 38px; font-size: 12px; line-height: 1.5; padding: 9px 11px; gap: 6px; border: 1px solid #ffffff35; border-radius: 5px; background: #ffffff16; color: #edf5ff; white-space: nowrap; }
  .admin-sidenav [role="tab"][aria-selected="true"] { border-color: transparent; }
  .admin-sidenav [role="tab"] > .icon:first-child { width: 13px; height: 13px; }
  .admin-sidenav [role="tab"] > .icon:last-child { display: none; }
  .admin-sidebar-foot { display: none; }
  .admin-main { padding: 15px 10px 13px; }
  .admin-breadcrumb { font-size: 10px; gap: 6px; }
  .admin-breadcrumb > span { font-size: 9px; padding: 2px 5px; }
  .admin-title-line { margin: 14px 0 16px; align-items: flex-start; gap: 12px; }
  .admin-title-line h3 { font-size: 20px; line-height: 1.35; }
  .admin-title-line p { font-size: 11px; margin-top: 7px; line-height: 1.85; }
  .admin-module-icon { width: 30px; height: 30px; border-radius: 8px; }
  .admin-module-icon .icon { width: 17px; height: 17px; }
  .admin-feature-strip { gap: 6px; margin-bottom: 15px; }
  .admin-feature-strip > span { padding: 8px; gap: 7px; font-size: 11px; border-radius: 5px; }
  .admin-feature-strip b { width: 19px; height: 19px; border-radius: 4px; font-size: 9px; }
  .admin-table-card { border-radius: 6px; }
  .admin-toolbar { padding: 11px 10px; gap: 8px; }
  .admin-toolbar > label { padding: 7px; gap: 5px; flex-basis: 170px; }
  .admin-toolbar > label .icon { width: 12px; height: 12px; }
  .admin-toolbar input { font-size: 11px; }
  .admin-reset { min-height: 29px; padding: 6px 10px; font-size: 11px; }
  .admin-table-heading { flex-wrap: wrap; gap: 5px 12px; padding: 12px 10px 11px; }
  .admin-table-heading > strong { font-size: 12px; gap: 6px; }
  .admin-table-heading > strong > span { font-size: 9px; }
  .admin-table-heading > span { font-size: 9px; }
  .admin-table-scroll { scrollbar-width: thin; }
  .admin-table-scroll table { min-width: 700px; }
  .admin-table-scroll th { height: 34px; font-size: 11px; padding: 8px 11px; }
  .admin-table-scroll td { height: 48px; font-size: 12px; padding: 10px 11px; }
  .admin-table-scroll .table-row-number { font-size: 9px; padding-left: 12px; }
  .admin-record-title { font-size: 12px; gap: 7px; }
  .record-icon { width: 23px; height: 23px; border-radius: 5px; }
  .record-icon .icon { width: 12px; height: 12px; }
  .admin-record-button { font-size: 11px; }
  .admin-table-bottom { padding: 10px; font-size: 10px; }
  .admin-pagination { gap: 4px; }
  .admin-pagination i, .admin-pagination > b { width: 19px; height: 19px; font-size: 10px; }
  .admin-module-notes { display: block; padding: 12px; }
  .admin-module-notes > strong { font-size: 11px; gap: 5px; }
  .admin-module-notes .icon { width: 12px; height: 12px; }
  .admin-module-notes p { font-size: 11px; margin-top: 6px; line-height: 1.9; }
  .admin-disclosure { align-items: flex-start; flex-direction: column; gap: 5px; padding: 10px 12px; font-size: 10px; }
  .admin-disclosure > span:first-child { gap: 5px; }
  .admin-disclosure .icon { width: 11px; height: 11px; }
  .console-capabilities { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .console-capabilities > article { padding: 22px; }
  .console-capability-title { margin-bottom: 15px; }
  .console-capability-title .icon-box { width: 37px; height: 37px; border-radius: 10px; }
  .console-capability-title .icon-box .icon { width: 18px; height: 18px; }
  .console-capability-title .section-number { font-size: 11px; }
  .console-capabilities h3 { font-size: 20px; }
  .console-capabilities > article > p { font-size: 13px; margin-top: 9px; line-height: 1.95; }
  .console-capabilities ul { margin-top: 16px; gap: 8px; }
  .console-capabilities li { font-size: 13px; line-height: 1.8; gap: 7px; }
  .console-capabilities li .icon { width: 11px; height: 11px; margin-top: 4px; }
  .admin-detail-dialog { padding: 29px 24px 24px; border-radius: 11px; }
  .admin-detail-dialog .eyebrow { font-size: 10px; margin-bottom: 16px; }
  .admin-detail-dialog h2 { font-size: 24px; }
  .admin-detail-dialog dl { margin-top: 22px; }
  .admin-detail-dialog dl > div { grid-template-columns: 90px minmax(0, 1fr); gap: 13px; padding: 13px 0; }
  .admin-detail-dialog dt, .admin-detail-dialog dd { font-size: 13px; }
  .admin-detail-dialog .note { font-size: 11px; margin-top: 19px; }
}
@media (max-width: 380px) {
  .admin-feature-strip > span { padding-inline: 6px; font-size: 10px; gap: 5px; }
  .admin-title-line p { font-size: 11px; }
  .admin-detail-dialog { padding-inline: 20px; }
}

/* Capability navigation and actual configuration previews. */
.admin-nav-section { margin: 15px 12px 4px; color: #c4d9ff; font-size: 10px; letter-spacing: .06em; }
.admin-nav-section:first-child { margin-top: 0; }
.admin-record-filter { max-width: 190px; min-width: 115px; padding: 8px 28px 8px 10px; font: inherit; font-size: 12px; color: var(--admin-ink); border: 1px solid var(--admin-line); border-radius: 5px; background: var(--admin-paper); }
.admin-record-filter:focus-visible { outline: 2px solid #719ee2; outline-offset: 2px; }
.console-catalog-tools { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.console-catalog-filters { display: flex; flex-wrap: wrap; gap: 7px; }
.console-catalog-filters button { padding: 9px 14px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--muted); font-size: 13px; }
.console-catalog-filters button[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.console-catalog-search { display: flex; align-items: center; gap: 9px; min-width: 200px; flex: 1; margin-left: auto; border: 1px solid var(--line); border-radius: 7px; padding: 9px 12px; background: var(--surface); }
.console-catalog-search .icon { width: 16px; height: 16px; color: var(--quiet); }
.console-catalog-search input { border: 0; min-width: 0; width: 100%; font: inherit; font-size: 13px; color: var(--ink); background: transparent; outline: none; }
.console-catalog-search:focus-within { outline: 2px solid var(--blue); outline-offset: 2px; }
.console-catalog-count { flex: 1 0 100%; font-size: 12px; color: var(--muted); }
.console-capabilities > article { display: flex; flex-direction: column; }
.console-capabilities ul { flex: 1; }
.console-capability-open { margin-top: 23px; padding-top: 17px; border-top: 1px solid var(--line); color: var(--blue); display: flex; justify-content: space-between; align-items: center; font-size: 12px; text-align: left; }
.console-capability-open .icon { width: 17px; height: 17px; }
.console-catalog-empty { padding: 30px; text-align: center; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); }
.console-workflow-section { margin-top: 85px; background: linear-gradient(140deg,#eef4ff,#f7f3ff 65%,#f0f9ff); border-block: 1px solid var(--line); }
.console-workflow-tabs { display: flex; justify-content: center; gap: 10px; margin-bottom: 42px; }
.console-workflow-tabs button { display: flex; gap: 10px; align-items: center; padding: 13px 22px; background: var(--surface); color: var(--muted); border: 1px solid var(--line); border-radius: 9px; font-size: 14px; }
.console-workflow-tabs button[aria-selected="true"] { background: #165dff; color: #fff; border-color: #165dff; box-shadow: 0 5px 16px #165dff28; }
.console-workflow-tabs .icon { width: 19px; height: 19px; }
.console-workflow { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.55fr); gap: 46px; align-items: center; }
.console-workflow-copy .eyebrow { font-size: 10px; letter-spacing: .12em; margin-bottom: 18px; }
.console-workflow-copy h3 { font-size: clamp(26px,2.8vw,37px); line-height: 1.4; letter-spacing: -.035em; }
.console-workflow-copy > p:not(.eyebrow) { font-size: 14px; line-height: 2; margin-top: 20px; color: var(--muted); }
.console-workflow-copy dl { margin: 26px 0; display: grid; gap: 18px; }
.console-workflow-copy dt { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.console-workflow-copy dt .icon { width: 16px; height: 16px; color: var(--blue); }
.console-workflow-copy dd { margin: 6px 0 0 24px; font-size: 12px; line-height: 1.9; color: var(--muted); }
.console-workflow-copy .button { font-size: 13px; }
.config-screen { color-scheme: light; min-width: 0; background: #fff; border: 1px solid #cbdcf9; border-radius: 13px; box-shadow: 0 20px 60px #2357a820; color: #23436b; overflow: hidden; }
.config-screen-bar { background: #165dff; color: #fff; padding: 16px 21px; display: flex; align-items: center; gap: 10px; font-size: 14px; }
.config-window-mark { display: flex; align-items: center; padding: 5px; background: #ffffff20; border-radius: 6px; }
.config-window-mark .icon { width: 15px; height: 15px; }
.config-demo-label { margin-left: auto; font-size: 10px; font-weight: 400; opacity: .85; }
.config-screen-tabs { display: flex; gap: 23px; padding: 0 22px; border-bottom: 1px solid #e2eaf7; font-size: 11px; color: #788ba5; }
.config-screen-tabs span { padding: 15px 0 12px; white-space: nowrap; }
.config-screen-tabs .is-current { color: #165dff; border-bottom: 2px solid #165dff; }
.config-intro { display: flex; align-items: center; gap: 15px; padding: 23px 22px 17px; }
.config-intro strong { font-size: 16px; }
.config-intro p { color: #758ba9; font-size: 11px; line-height: 1.8; margin-top: 7px; }
.config-tag { margin-left: auto; flex: none; font-size: 10px; color: #165dff; padding: 5px 8px; border-radius: 5px; background: #edf4ff; white-space: nowrap; }
.config-table-scroll { overflow-x: auto; margin: 0 22px; border: 1px solid #e0e8f5; border-radius: 7px; }
.config-table-scroll table { width: 100%; min-width: 430px; border-collapse: collapse; text-align: left; font-size: 11px; }
.config-table-scroll th, .config-table-scroll td { padding: 12px 13px; border-bottom: 1px solid #e8eef8; font-weight: 400; white-space: nowrap; }
.config-table-scroll thead th { background: #f1f5ff; color: #6b819f; font-size: 10px; }
.config-table-scroll tbody th { color: #375477; background: #fbfcff; }
.config-table-scroll tr:last-child > * { border-bottom: 0; }
.config-enabled { display: inline-flex; gap: 4px; align-items: center; color: #219478; font-weight: 500; }
.config-enabled .icon { width: 12px; height: 12px; }
.config-rule { margin: 20px 22px; padding: 15px; border: 1px solid #e0e8f5; border-radius: 7px; background: #f9fbff; }
.config-rule-title { display: flex; align-items: center; gap: 7px; font-size: 12px; margin-bottom: 14px; }
.config-rule-title .icon { width: 16px; height: 16px; color: #165dff; }
.config-rule-title > span { margin-left: auto; font-size: 10px; color: #8495ad; }
.config-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px 18px; }
.config-field { display: grid; gap: 6px; min-width: 0; }
.config-field > span { color: #8494ad; font-size: 10px; }
.config-field > strong { background: #fff; border: 1px solid #dfe8f6; border-radius: 5px; padding: 8px 10px; font-size: 11px; font-weight: 400; }
.config-hint { margin-top: 13px; color: #8697b1; font-size: 10px; line-height: 1.8; }
.config-screen-foot { display: flex; align-items: center; gap: 7px; padding: 13px 22px; color: #8797b0; background: #f5f8fe; border-top: 1px solid #e4ebf7; font-size: 10px; line-height: 1.7; }
.config-screen-foot .icon { width: 13px; height: 13px; flex: none; }
.config-community { display: flex; gap: 12px; align-items: center; padding: 24px 22px 20px; }
.config-community-icon { display: flex; padding: 12px; background: #def5ef; border-radius: 10px; color: #22967a; }
.config-community-icon .icon { width: 22px; height: 22px; }
.config-community strong { font-size: 15px; }
.config-community p { font-size: 10px; color: #8094af; margin-top: 7px; line-height: 1.8; }
.config-circle-fields { margin: 0 22px 20px; }
.config-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.config-chips span { font-size: 10px; padding: 6px 8px; background: #eef3ff; color: #5579b2; border: 1px solid #dfe8f7; border-radius: 4px; }
.android-package-note { display: block; margin-top: 12px; font-size: 11px; color: var(--muted); }
[data-theme="dark"] .console-workflow-section { background: linear-gradient(145deg,#142542,#20253f); }
@media(max-width:1100px) {
  .console-workflow { gap: 28px; grid-template-columns: minmax(0,.8fr) minmax(0,1.5fr); }
  .console-workflow-copy h3 { font-size: 29px; }
  .console-catalog-tools { gap: 15px; }
  .console-catalog-filters button { font-size: 12px; padding: 8px 10px; }
}
@media(max-width:960px) {
  .console-workflow { grid-template-columns: minmax(0,1fr); gap: 26px; }
  .console-workflow-copy dl { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
  .console-workflow-copy h3 br { display: none; }
  .console-workflow-copy > p:not(.eyebrow) { margin-top: 12px; }
  .config-screen { width: 100%; }
  .config-table-scroll table { font-size: 13px; }
  .config-table-scroll thead th { font-size: 12px; }
  .config-field > strong { font-size: 12px; }
}
@media(max-width:760px) {
  .admin-nav-section { display: none; }
  .admin-toolbar { flex-wrap: wrap; }
  .admin-toolbar > label { flex-basis: calc(100% - 65px); }
  .admin-record-filter { order: 3; flex: 1 0 100%; max-width: 100%; min-height: 34px; }
  .console-catalog-filters { gap: 6px; }
  .console-catalog-search { flex-basis: 100%; }
  .console-workflow-section { margin-top: 40px; }
  .console-workflow-tabs { justify-content: flex-start; gap: 7px; overflow-x: auto; padding: 0 0 6px; margin-bottom: 28px; }
  .console-workflow-tabs button { flex: none; font-size: 12px; padding: 10px 12px; gap: 7px; }
  .console-workflow-tabs .icon { width: 15px; height: 15px; }
  .console-workflow-copy h3 { font-size: 27px; }
  .console-workflow-copy h3 br { display: initial; }
  .console-workflow-copy > p:not(.eyebrow) { font-size: 13px; }
  .console-workflow-copy dl { grid-template-columns: 1fr; gap: 16px; }
  .console-workflow-copy dd { font-size: 12px; }
  .config-screen-bar { padding: 13px; font-size: 13px; }
  .config-screen-tabs { padding: 0 13px; gap: 17px; overflow-x: auto; }
  .config-intro { padding: 19px 13px 15px; }
  .config-intro strong { font-size: 14px; }
  .config-intro .config-tag { display: none; }
  .config-table-scroll { margin: 0 12px; }
  .config-table-scroll table { font-size: 12px; }
  .config-table-scroll thead th { font-size: 11px; }
  .config-rule { margin: 15px 12px; padding: 12px; }
  .config-rule-title { flex-wrap: wrap; }
  .config-rule-title > span { margin-left: 0; }
  .config-fields { gap: 12px; }
  .config-field > strong { font-size: 11px; padding: 8px; }
  .config-circle-fields { margin-inline: 13px; }
  .config-community { padding: 18px 13px; gap: 9px; }
  .config-community-icon { padding: 10px; }
  .config-community strong { font-size: 13px; }
  .config-community .config-tag { display: none; }
  .config-screen-foot { padding: 12px; }
}

.console-capabilities > article[hidden], .console-workflow[hidden] { display: none; }

/* The full desktop menu is visible; mobile offers both swiping and an explicit overview. */
.admin-workarea { min-height: 840px; }
.admin-nav-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.admin-nav-heading .admin-nav-label { margin-bottom: 12px; }
.admin-menu-toggle, .admin-mobile-menu-hint { display: none; }
.admin-menu-viewport { min-width: 0; position: relative; }
.admin-sidenav [role="tablist"] { max-height: none; overflow: visible; gap: 2px; padding-right: 0; }
.admin-sidenav [role="tab"] { min-height: 36px; padding-top: 6px; padding-bottom: 6px; }
.admin-nav-section { margin: 10px 12px 2px; line-height: 16px; }
.admin-nav-section:first-child { margin-top: 0; }
.admin-sidebar-foot { margin-top: 15px; padding-top: 12px; }
.admin-scroll-guide { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 14px; border-top: 1px solid var(--admin-line); border-bottom: 1px solid var(--admin-line); color: #3968af; background: #edf4ff; }
.admin-scroll-guide > span { display: flex; align-items: center; gap: 4px; font-size: 11px; line-height: 1.6; }
.admin-scroll-guide > span .icon { width: 13px; height: 13px; }
.swipe-left { transform: rotate(180deg); }
.admin-scroll-guide > div { display: flex; gap: 6px; flex: none; }
.admin-scroll-guide button { display: flex; align-items: center; justify-content: center; width: 29px; height: 29px; padding: 5px; border: 1px solid #c9daf6; border-radius: 5px; background: #fff; color: #165dff; }
.admin-scroll-guide button .icon { width: 16px; height: 16px; }
.admin-scroll-guide button:disabled { color: #aabbd4; background: #f4f7fc; cursor: default; }
.admin-table-scroll:focus-visible { outline: 2px solid #3779ee; outline-offset: -2px; }
@media(min-width:761px) {
  .admin-table-scroll td { height: 57px; }
}
@media(max-width:760px) {
  .admin-workarea { min-height: 0; }
  .admin-nav-heading { padding: 1px 1px 8px; }
  .admin-nav-heading .admin-nav-label { margin: 0; font-size: 11px; letter-spacing: 0; color: #e8f2ff; }
  .admin-nav-heading .admin-nav-label::after { display: none; }
  .admin-menu-toggle { display: inline-flex; gap: 5px; align-items: center; padding: 7px 9px; background: #fff; color: #165dff; border: 1px solid #ffffffb0; border-radius: 5px; font-size: 11px; line-height: 1.4; font-weight: 600; }
  .admin-menu-toggle .icon { width: 13px; height: 13px; }
  .admin-mobile-menu-hint { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 1px 2px 11px; color: #d7e8ff; }
  .admin-mobile-menu-hint > span { display: flex; gap: 4px; align-items: center; }
  .admin-mobile-menu-hint .icon { width: 12px; height: 12px; }
  .admin-mobile-menu-hint b { font-size: 11px; font-weight: 400; margin-left: 2px; }
  .admin-mobile-menu-hint small { flex: none; font-size: 10px; font-variant-numeric: tabular-nums; color: #d7e8ff; }
  .admin-sidenav [role="tablist"] { display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; padding: 0 1px 5px; }
  .admin-sidenav [role="tab"] { padding: 9px 11px; min-height: 38px; }
  .admin-menu-viewport::before, .admin-menu-viewport::after { content: ''; position: absolute; z-index: 1; top: 0; bottom: 5px; width: 22px; opacity: 0; pointer-events: none; transition: opacity .15s; }
  .admin-menu-viewport::before { left: 0; background: linear-gradient(90deg,#1d60e5,transparent); }
  .admin-menu-viewport::after { right: 0; background: linear-gradient(270deg,#1d60e5,transparent); }
  .admin-menu-viewport.can-scroll-left::before, .admin-menu-viewport.can-scroll-right::after { opacity: 1; }
  .is-menu-expanded .admin-sidenav [role="tablist"] { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; overflow: visible; }
  .is-menu-expanded .admin-sidenav [role="tab"] { width: 100%; font-size: 11px; padding-inline: 8px; gap: 5px; }
  .is-menu-expanded .admin-menu-viewport::before, .is-menu-expanded .admin-menu-viewport::after { display: none; }
  .admin-scroll-guide { padding: 8px 9px; }
  .admin-scroll-guide > span { font-size: 10px; gap: 2px; }
  .admin-scroll-guide > span .icon { width: 11px; height: 11px; }
}

/* Vivid product storytelling: cobalt brand with distinct, restrained scene colors. */
:root { --blue:#165dff; --blue-hover:#0647db; --blue-soft:#edf2ff; --soft:#f5f7ff; --soft-blue:#e9efff; --ink:#142340; --muted:#5c6a82; --line:#e3e8f3; --mint:#008367; --orange:#bb561c; --violet:#7043ca; }
.container { width:min(1240px,calc(100% - 80px)); }
.section { padding-block:88px; }
.button.primary { box-shadow:0 6px 16px #165dff24; }
.button.secondary { border-color:#cbd6ee; }
.eyebrow { letter-spacing:.12em; }
.flagship-opening { position:relative; padding:52px 0 0; background:linear-gradient(180deg,#f7faff 0%,#fff 35%,#edf2ff 100%); }
.opening-copy { text-align:center; position:relative; z-index:1; }
.opening-copy .eyebrow { justify-content:center; font-size:13px; margin-bottom:18px; }
.opening-copy h1 { font-size:clamp(42px,4.8vw,70px); font-weight:650; letter-spacing:-.055em; line-height:1.24; }
.opening-copy h1 > span:first-child { color:var(--blue); }
.opening-copy h1 > span:nth-child(2) { color:#0c977c; }
.opening-copy .lead { margin:19px auto 0; font-size:21px; font-weight:500; color:var(--ink); }
.opening-detail { font-size:14px; margin:9px auto 0; max-width:760px; }
.opening-copy .actions { justify-content:center; margin-top:25px; gap:14px; }
.opening-copy .button { min-height:49px; padding:13px 28px; font-size:15px; }
.opening-copy .hero-notes { justify-content:center; margin-top:19px; gap:26px; }
.opening-copy .hero-notes > span { font-size:12px; }
.opening-stage { width:min(1440px,calc(100% - 48px)); margin:34px auto 0; position:relative; border:1px solid #dce6ff; border-radius:26px 26px 0 0; background:#eef4ff; overflow:hidden; box-shadow:0 -5px 70px #165dff0d; }
.opening-labels { display:flex; gap:10px; justify-content:center; padding:20px 20px 0; }
.opening-labels > span { display:inline-flex; align-items:center; gap:7px; padding:6px 15px; border:1px solid #d3dfff; border-radius:7px; background:#fff; color:#165dff; font-size:12px; font-weight:600; }
.opening-labels > span:nth-child(2) { color:#007a61; background:#e3fff3; border-color:#a9ead3; }
.opening-labels > span:nth-child(3) { color:#ae531b; background:#fff2db; border-color:#f4d8a8; }
.opening-labels .icon { width:17px; height:17px; }
.opening-bottom { display:flex; justify-content:space-between; gap:20px; padding:15px 30px; border-top:1px solid #d9e4ff; background:#fff; color:#52698e; font-size:12px; }
.opening-bottom strong { color:#165dff; margin-left:10px; font-weight:600; }
.opening-bottom > span:last-child { color:#697b94; font-size:10px; }
.product-strip { background:#165dff; color:white; border:0; }
.product-strip > .container > div { padding-block:24px; border-color:#ffffff30; }
.product-strip .icon { color:#fff; background:#ffffff1e; width:43px; height:43px; padding:10px; border-radius:12px; }
.product-strip strong { font-size:15px; }
.product-strip small { color:#dce6ff; font-size:12px; }
.product-strip > .container > div:nth-child(2) > .icon { color:#afffe4; }
.product-strip > .container > div:nth-child(3) > .icon { color:#ffdc8f; }
.product-strip > .container > div:nth-child(4) > .icon { color:#e3ceff; }
.heading-accent { color:var(--blue); display:block; }
.scene-section .section-heading { max-width:850px; }
.scene-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; }
.tone-blue { --scene-bg:#eef4ff; --scene-accent:#165dff; --scene-line:#cbdcff; }
.tone-mint { --scene-bg:#edfbf5; --scene-accent:#007c61; --scene-line:#c3e9db; }
.tone-peach { --scene-bg:#fff6ed; --scene-accent:#ac5118; --scene-line:#f0d9bd; }
.tone-violet { --scene-bg:#f4f0ff; --scene-accent:#7043ca; --scene-line:#e0d4fa; }
.scene-card { background:var(--scene-bg); border:1px solid var(--scene-line); border-radius:20px; overflow:hidden; display:flex; flex-direction:column; transition:transform .25s,box-shadow .25s; }
.scene-card:hover { transform:translateY(-4px); box-shadow:0 18px 35px #243a7512; }
.scene-kicker { display:flex; align-items:center; justify-content:space-between; padding:21px 27px 18px; color:var(--scene-accent); font-size:13px; font-weight:600; }
.scene-kicker > span:last-child { opacity:.55; font-size:12px; }
.scene-picture { margin:0 17px; overflow:hidden; border-radius:12px; background:white; border:1px solid #ffffffb3; }
.scene-picture img { width:100%; aspect-ratio:3/2; object-fit:contain; height:auto; }
.scene-copy { padding:23px 28px 26px; flex:1; display:flex; flex-direction:column; }
.scene-copy h3 { font-size:24px; letter-spacing:-.04em; line-height:1.5; }
.scene-copy > p { margin-top:12px; font-size:14px; line-height:1.9; flex:1; }
.scene-bottom { display:flex; align-items:center; gap:12px; justify-content:space-between; margin-top:23px; }
.scene-bottom > div { display:flex; flex-wrap:wrap; gap:7px; }
.scene-bottom > div > span { border:1px solid var(--scene-line); padding:4px 9px; border-radius:5px; background:#ffffff87; font-size:11px; color:var(--scene-accent); }
.scene-arrow { display:flex; width:35px; height:35px; align-items:center; justify-content:center; background:var(--scene-accent); color:white; border-radius:50%; flex:none; }
.scene-arrow .icon { width:18px; height:18px; }
.capability-index { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); border:1px solid var(--line); border-radius:12px; margin-top:29px; overflow:hidden; }
.capability-index > a { display:flex; gap:9px; align-items:center; padding:17px 10px; justify-content:center; font-size:12px; border-right:1px solid var(--line); }
.capability-index > a:last-child { border:0; }
.capability-index > a > .icon:first-child { color:var(--blue); width:18px; height:18px; }
.capability-index > a > .icon:last-child { width:12px; height:12px; color:var(--quiet); }
.capability-index > a:hover { color:var(--blue); background:var(--blue-soft); }
.product-tour-section { background:linear-gradient(110deg,#edf3ff 0%,#f5f1ff 55%,#edf9f7 100%); border-block:1px solid #e4e8f8; }
.product-tour-section .product-demo { gap:60px; }
.product-tour-section .phone-stage::before { background:#d9e6ff; border-radius:38% 46% 36% 44%; width:480px; height:470px; top:120px; box-shadow:28px 20px 0 #c0eade80,-22px -25px 0 #ede0ff80; }
.product-tabs button[aria-selected="true"] { border-radius:10px; color:var(--blue); border-left-color:#165dff; box-shadow:0 8px 24px #315dc716; }
.business-section { padding-block:78px; }
.business-value-grid { gap:18px; border:0; }
.business-value-grid > article, .business-value-grid > article:first-child, .business-value-grid > article:last-child { border:1px solid #d7e4ff; border-radius:16px; padding:29px 26px; background:#f0f5ff; }
.business-value-grid > article:nth-child(2) { background:#effaf5; border-color:#d3eadf; }
.business-value-grid > article:nth-child(3) { background:#fff5eb; border-color:#f0dfcd; }
.business-value-grid .step-number, .business-value-grid > article:nth-child(2) .step-number, .business-value-grid > article:nth-child(3) .step-number { font-size:30px; font-weight:600; color:#165dff; margin-bottom:23px; }
.business-value-grid > article:nth-child(2) .step-number { color:#008365; }
.business-value-grid > article:nth-child(3) .step-number { color:#bc5b1c; }
.business-value-grid h3 { font-size:22px; }
.industry-preview { padding-block:0; border:0; gap:60px; }
.industry-preview::before { display:none; }
.industry-list { gap:14px; }
.industry-list > a, .industry-list > a:nth-last-child(-n+2) { border:1px solid var(--line); background:var(--surface); padding:22px 17px; border-radius:12px; }
.industry-list > a:nth-child(2n) { border-top:3px solid #32b698; }
.industry-list > a:nth-child(2n+1) { border-top:3px solid #5a84ff; }
.industry-list > a:nth-child(3n) { border-top-color:#e6ac55; }
.industry-list > a:hover { border-color:var(--blue); }
.scene-ribbon { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin-block:0 35px; }
.scene-ribbon > a { background:var(--scene-bg); border:1px solid var(--scene-line); border-radius:13px; overflow:hidden; transition:transform .2s; }
.scene-ribbon > a:hover { transform:translateY(-3px); }
.scene-ribbon img { width:100%; aspect-ratio:3/2; object-fit:contain; }
.scene-ribbon > a > span { display:flex; align-items:center; justify-content:space-between; gap:9px; padding:14px; font-size:12px; font-weight:600; color:var(--scene-accent); }
.scene-ribbon > a > span .icon { width:16px; height:16px; }
.supporting-art { border-radius:14px; overflow:hidden; margin-top:22px; border:1px solid var(--line); }
.supporting-art img { width:100%; }
.brand-product { min-height:0; }
.brand-product .brand-label { position:static; margin-top:10px; }
.brand-product { flex-direction:column; }
.delivery-banner { grid-template-columns:1fr 1.2fr; padding:40px; background:#edf3ff; gap:40px; }
.delivery-banner h2 { font-size:30px; }
.demo-hero picture img { aspect-ratio:3/2; object-fit:contain; }
.cta { background:#165dff; color:white; border:0; padding:42px 45px; border-radius:20px; }
.cta > div { max-width:none; }
.cta h2 { color:white; font-size:33px; }
.cta .eyebrow, .cta p:not(.eyebrow) { color:#dce6ff; }
.cta .button.light { background:#fff; border-color:#fff; color:#165dff; }
.cta .button.ghost { background:transparent; border-color:#9db7ff; color:#fff; }
.cta .button.ghost:hover { background:#ffffff17; }
[data-theme="dark"] { --blue:#7ca4ff; --blue-hover:#9dbbff; --blue-soft:#203557; --mint:#5edfc0; --orange:#ffb37b; --violet:#bd9bff; }
[data-theme="dark"] .button.primary { background:#245eef; color:#fff; }
[data-theme="dark"] .flagship-opening { background:linear-gradient(180deg,#142547,#101a2b 60%,#172b4d); }
[data-theme="dark"] .opening-copy h1 > span:nth-child(2) { color:#52d4b4; }
[data-theme="dark"] .opening-stage { border-color:#2d456c; background:#edf3ff; }
[data-theme="dark"] .opening-bottom { background:#1b2f4b; border-color:#2c476b; color:#c7daf5; }
[data-theme="dark"] .opening-bottom strong { color:#9ebaff; }
[data-theme="dark"] .opening-bottom > span:last-child { color:#abc0db; }
[data-theme="dark"] .tone-blue { --scene-bg:#1c2d4c; --scene-accent:#9abaff; --scene-line:#344b74; }
[data-theme="dark"] .tone-mint { --scene-bg:#17392f; --scene-accent:#7be0bd; --scene-line:#305649; }
[data-theme="dark"] .tone-peach { --scene-bg:#3b2b23; --scene-accent:#ffc18e; --scene-line:#624735; }
[data-theme="dark"] .tone-violet { --scene-bg:#2c2448; --scene-accent:#c4a8ff; --scene-line:#4b3b71; }
[data-theme="dark"] .scene-bottom > div > span { background:#ffffff06; }
[data-theme="dark"] .scene-arrow { color:#12213a; }
[data-theme="dark"] .product-tour-section { background:linear-gradient(110deg,#182b49,#27243d 60%,#18382f); border-color:#2b3f5d; }
[data-theme="dark"] .product-tour-section .phone-stage::before { background:#263f6a; box-shadow:28px 20px 0 #30584e88,-22px -25px 0 #47386277; }
[data-theme="dark"] .business-value-grid > article { background:#1c2d4c; border-color:#344b74; }
[data-theme="dark"] .business-value-grid > article:nth-child(2) { background:#17392f; border-color:#305649; }
[data-theme="dark"] .business-value-grid > article:nth-child(3) { background:#3b2b23; border-color:#624735; }
[data-theme="dark"] .business-value-grid .step-number { color:#9bbaff; }
[data-theme="dark"] .business-value-grid > article:nth-child(2) .step-number { color:#7be0bd; }
[data-theme="dark"] .business-value-grid > article:nth-child(3) .step-number { color:#ffc18e; }
[data-theme="dark"] .delivery-banner { background:#1b2d4c; }
[data-theme="dark"] .cta { background:#174bc9; }
@media(max-width:1100px) {
 .container { width:calc(100% - 56px); }
 .section { padding-block:74px; }
 .opening-copy h1 { font-size:55px; }
 .opening-stage { width:calc(100% - 32px); }
 .scene-copy h3 { font-size:21px; }
 .scene-copy { padding:21px; }
 .scene-kicker { padding-inline:23px; }
 .capability-index { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .capability-index > a:nth-child(3n) { border-right:0; }
 .capability-index > a:nth-child(-n+3) { border-bottom:1px solid var(--line); }
 .product-tour-section .product-demo { gap:40px; }
 .industry-preview { gap:35px; }
 .business-value-grid > article, .business-value-grid > article:first-child, .business-value-grid > article:last-child { padding:24px 20px; }
 .business-value-grid h3 { font-size:20px; }
 .scene-ribbon { gap:12px; }
 .scene-ribbon > a > span { font-size:10px; padding:12px 10px; }
 .delivery-banner { gap:25px; padding:30px; }
 .delivery-banner h2 { font-size:26px; }
}
@media(max-width:760px) {
 .container { width:calc(100% - 36px); }
 .section { padding-block:56px; }
 .flagship-opening { padding-top:37px; }
 .opening-copy .eyebrow { font-size:11px; margin-bottom:17px; }
 .opening-copy h1 { font-size:clamp(34px,7.1vw,49px); line-height:1.35; letter-spacing:-.055em; }
 .opening-copy h1 > span { white-space:nowrap; }
 .opening-copy .lead { font-size:16px; max-width:320px; margin-top:15px; }
 .opening-detail { font-size:12px; max-width:380px; line-height:1.9; margin-top:10px; }
 .opening-copy .actions { gap:10px; margin-top:21px; }
 .opening-copy .button { min-height:44px; font-size:12px; padding:11px 16px; gap:10px; }
 .opening-copy .hero-notes { gap:12px; margin-top:18px; }
 .opening-copy .hero-notes > span { font-size:10px; }
 .opening-stage { width:calc(100% - 20px); margin-top:25px; border-radius:16px 16px 0 0; }
 .opening-labels { gap:5px; padding:13px 8px 0; }
 .opening-labels > span { font-size:9px; padding:4px 8px; gap:4px; }
 .opening-labels .icon { width:13px; height:13px; }
 .opening-bottom { padding:11px 13px; font-size:10px; display:block; text-align:center; }
 .opening-bottom strong { margin-left:4px; }
 .opening-bottom > span:last-child { display:block; margin-top:4px; font-size:8px; }
 .product-strip > .container > div { padding-block:18px; }
 .product-strip strong { font-size:13px; }
 .product-strip small { font-size:9px; }
 .product-strip .icon { width:33px; height:33px; padding:8px; border-radius:9px; }
 .product-strip > .container > div:nth-child(-n+2) { border-color:#ffffff30; }
 .scene-section .section-heading { margin-bottom:27px; }
 .scene-section h2 { font-size:29px; }
 .scene-gallery { grid-template-columns:1fr; gap:20px; }
 .scene-card { border-radius:16px; }
 .scene-kicker { padding:16px 19px 13px; font-size:12px; }
 .scene-picture { margin-inline:12px; border-radius:9px; }
 .scene-copy { padding:18px 21px 21px; }
 .scene-copy h3 { font-size:21px; }
 .scene-copy > p { font-size:13px; margin-top:10px; }
 .scene-bottom { margin-top:17px; }
 .scene-bottom > div { gap:5px; }
 .scene-bottom > div > span { font-size:10px; padding:3px 7px; }
 .scene-arrow { width:30px; height:30px; }
 .capability-index { grid-template-columns:repeat(2,minmax(0,1fr)); border-radius:10px; }
 .capability-index > a { font-size:11px; padding:14px 8px; }
 .capability-index > a:nth-child(3n) { border-right:1px solid var(--line); }
 .capability-index > a:nth-child(2n) { border-right:0; }
 .capability-index > a:nth-child(-n+4) { border-bottom:1px solid var(--line); }
 .product-tour-section .product-demo { gap:29px; }
 .product-tour-section .phone-stage::before { width:340px; height:420px; box-shadow:12px 15px 0 #c0eade80,-12px -15px 0 #ede0ff80; }
 .business-value-grid { gap:15px; }
 .business-value-grid > article, .business-value-grid > article:first-child, .business-value-grid > article:last-child { padding:24px 21px; grid-template-columns:30px minmax(0,1fr); gap:0 16px; }
 .business-value-grid .step-number, .business-value-grid > article:nth-child(2) .step-number, .business-value-grid > article:nth-child(3) .step-number { font-size:24px; }
 .business-value-grid h3 { font-size:21px; }
 .industry-preview { gap:27px; }
 .industry-list { gap:12px; }
 .industry-list > a, .industry-list > a:nth-last-child(-n+2) { padding:20px 16px; border:1px solid var(--line); border-top:3px solid #5a84ff; }
 .industry-list > a:nth-child(2n) { border-top-color:#32b698; }
 .industry-list > a:nth-child(3n) { border-top-color:#e6ac55; }
 .scene-ribbon { grid-template-columns:1fr 1fr; margin-bottom:28px; gap:12px; }
 .scene-ribbon > a { border-radius:10px; }
 .scene-ribbon > a > span { font-size:10px; padding:10px; }
 .scene-ribbon .icon { width:12px; height:12px; }
 .delivery-banner { grid-template-columns:1fr; padding:26px 22px; gap:26px; }
 .delivery-banner h2 { font-size:26px; }
 .cta { padding:28px 24px; border-radius:16px; }
 .cta h2 { font-size:26px; }
 .cta .eyebrow { font-size:9px; }
 .cta .button { font-size:12px; }
}
@media(prefers-reduced-motion:reduce) { .scene-card, .scene-ribbon > a { transition:none; } .scene-card:hover, .scene-ribbon > a:hover { transform:none; } }
/* Large, alternating product sections give the long page a clearer visual rhythm. */
.product-tour-section, [data-theme="dark"] .product-tour-section { background:linear-gradient(130deg,#12245d 0%,#2345bf 50%,#8462ed 100%); border:0; position:relative; }
.product-tour-section .demo-copy > .section-number { color:#adcdff; }
.product-tour-section .demo-copy > h2 { color:#fff; }
.product-tour-section .demo-copy > p { color:#d7e4ff; }
.product-tour-section .demo-copy > .button { color:#fff; }
.product-tour-section .product-tabs button { color:#e3ebff; border-bottom-color:#ffffff26; }
.product-tour-section .product-tabs button > span { color:#c5d5f5; }
.product-tour-section .product-tabs button:hover { background:#ffffff10; color:#fff; }
.product-tour-section .product-tabs button[aria-selected="true"] { color:#154bdf; background:#fff; border-color:transparent; border-left-color:#ffcf66; }
.product-tour-section .product-tabs button[aria-selected="true"] > span { color:#62718b; }
.product-tour-section .stage-label, .product-tour-section .stage-label > span, .product-tour-section .stage-note, .product-tour-section .visual-caption { color:#e0e9ff; }
.product-tour-section .phone-stage::before, [data-theme="dark"] .product-tour-section .phone-stage::before { background:#7294ff60; box-shadow:28px 20px 0 #b292fa30,-22px -25px 0 #80d9f027; }
.solution-section { grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:60px; padding-block:64px; }
.solution-title { position:static; }
.solution-title::after { display:none; }
.solution-title h2 { font-size:34px; }
.solution-title > p { max-width:480px; font-size:14px; }
.solution-art { margin-top:25px; border-radius:15px; overflow:hidden; border:1px solid var(--line); background:#fff; }
.solution-art img { width:100%; height:auto; aspect-ratio:3/2; object-fit:contain; }
.solution-section:nth-of-type(2n) { isolation:isolate; }
.solution-section:nth-of-type(2n)::before { content:''; position:absolute; inset:0 -40px; background:var(--soft); z-index:-1; border-radius:20px; }
.solution-section:nth-of-type(4)::before { background:#f2f9f6; }
.solution-section:nth-of-type(6)::before { background:#fff5ed; }
[data-theme="dark"] .solution-section:nth-of-type(4)::before { background:#19342c; }
[data-theme="dark"] .solution-section:nth-of-type(6)::before { background:#30271f; }
.solution-content > p.scenario-pain { background:var(--surface); border-left-color:var(--blue); }
.solution-result { border-color:#c5d7ff; background:#eaf1ff; }
.solution-detail-grid { gap:20px; }
.arch-service { background:#165dff; border-color:#165dff; }
.arch-service > span, .arch-service > strong { color:#fff; }
.arch-service b { background:#ffffff16; color:#fff; border-color:#ffffff30; }
.arch-top > div:first-child { background:#edf4ff; border-color:#cbdeff; }
.arch-top > div:nth-child(2) { background:#f4efff; border-color:#dfd4f6; }
.arch-bottom > div:nth-child(2) { background:#ecf9f3; }
.arch-bottom > div:nth-child(3) { background:#fff4e4; }
.arch-bottom > div:nth-child(4) { background:#f2edff; }
[data-theme="dark"] .arch-top > div, [data-theme="dark"] .arch-bottom > div { background:#1d304d; border-color:#334969; }
[data-theme="dark"] .arch-service { background:#2452c0; }
.guide-card:nth-child(3n+1) { border-top-color:#6291ff; }
.guide-card:nth-child(3n+2) { border-top-color:#39b596; }
.guide-card:nth-child(3n) { border-top-color:#e7ad4b; }
.cta { background:linear-gradient(115deg,#154de3,#4564ed 62%,#8151db); }
.cta .button.light:hover { background:#edf2ff; color:#164de7; }
@media(max-width:1100px) {
 .solution-section { grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:34px; }
 .solution-title h2 { font-size:29px; }
 .solution-section:nth-of-type(2n)::before { inset-inline:-20px; }
}
@media(max-width:760px) {
 .solution-section { display:block; padding-block:38px; }
 .solution-art { margin-top:20px; }
 .solution-title { margin-bottom:27px; }
 .solution-title h2 { font-size:29px; }
 .solution-section:nth-of-type(2n)::before { inset-inline:-10px; border-radius:14px; }
 .product-tour-section .phone-stage::before, [data-theme="dark"] .product-tour-section .phone-stage::before { box-shadow:12px 15px 0 #b292fa30,-12px -15px 0 #80d9f027; }
}

.cta .button.ghost:hover, .cta .button.ghost:focus-visible { background:#ffffff18; border-color:#fff; color:#fff; }
.cta .button.light:focus-visible { background:#edf2ff; color:#164de7; }

.opening-copy h1 > .opening-final { color:var(--ink); }
@media(max-width:760px) { .opening-copy h1 { font-size:39px; } .opening-copy h1 > .opening-final { display:block; } }

.record-status.record-blocked { background:#fff0ee; color:#b64136; border-color:#f4cfc9; }
@media(max-width:760px) { .page-hero h1 > span { display:block; text-wrap:balance; } }
body:not([data-page="console/"]) .page-hero { text-align:center; padding-top:50px; padding-bottom:42px; }
body:not([data-page="console/"]) .page-hero .eyebrow, body:not([data-page="console/"]) .page-hero .actions { justify-content:center; }
body:not([data-page="console/"]) .page-hero .lead { margin-inline:auto; max-width:790px; }
body:not([data-page="console/"]) .page-hero h1 { font-size:clamp(40px,4.3vw,59px); }
@media(max-width:760px) {
 body:not([data-page="console/"]) .page-hero { padding-block:38px 30px; }
 body:not([data-page="console/"]) .page-hero h1 { font-size:clamp(30px,8.2vw,39px); }
}

.page-hero h1 .keep-phrase { display:inline-block; white-space:nowrap; }

/* Non-interactive operations illustration. Every selector is scoped to this component. */
.admin-thumb { color-scheme: light; container-type: inline-size; min-width: 0; color: #23436b; background: #fff; text-align: left; border-radius: 12px; overflow: hidden; }
.admin-thumb-window { display: flex; flex-direction: column; aspect-ratio: auto; min-height: 365px; background: #f1f5ff; border: 1px solid #cddcf4; border-radius: inherit; overflow: hidden; font-family: var(--font, sans-serif); }
.admin-thumb-bar { display: flex; align-items: center; gap: 8px; flex: 0 0 34px; padding: 6px 12px; background: #fff; border-bottom: 1px solid #e0e8f7; }
.admin-thumb-brand { display: grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 6px; color: #fff; background: #165dff; font-size: 12px; font-weight: 750; }
.admin-thumb-bar > strong { color: #214782; font-size: 11px; font-weight: 650; white-space: nowrap; }
.admin-thumb-bar > strong > span { color: #7b8fab; font-size: 9px; font-weight: 400; margin-left: 6px; }
.admin-thumb-demo { margin-left: auto; padding: 2px 6px; border: 1px solid #f2dfbd; border-radius: 4px; color: #926422; background: #fff4de; font-size: 8px; white-space: nowrap; }
.admin-thumb-body { display: grid; grid-template-columns: 25% minmax(0, 1fr); flex: 1; min-width: 0; }
.admin-thumb-sidebar { padding: 8px 7px 7px; display: flex; flex-direction: column; background: linear-gradient(168deg, #165dff, #235cdd 70%, #427fee); color: #eef5ff; min-width: 0; }
.admin-thumb-nav-group + .admin-thumb-nav-group { margin-top: 3px; }
.admin-thumb-nav-title { display: block; color: #c8ddff; font-size: 7px; line-height: 1.5; padding: 0 5px 2px; letter-spacing: .06em; }
.admin-thumb-nav-item { display: flex; align-items: center; gap: 5px; padding: 1px 5px; min-height: 15px; border-radius: 4px; color: #f2f7ff; font-size: 8px; line-height: 1.5; white-space: nowrap; }
.admin-thumb-nav-item > .icon { width: 10px; height: 10px; flex: none; }
.admin-thumb-nav-current { background: #fff; color: #195bd7; box-shadow: 0 2px 5px #1747ab30; }
.admin-thumb-module-count { color: #e2eeff; font-size: 8px; line-height: 1.6; border-top: 1px solid #ffffff35; padding-top: 6px; margin: auto 5px 0; }
.admin-thumb-main { padding: 12px; display: flex; flex-direction: column; gap: 9px; min-width: 0; background: #f1f5ff; }
.admin-thumb-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.admin-thumb-heading > div { display: grid; gap: 2px; }
.admin-thumb-breadcrumb { color: #7a90ae; font-size: 7px; line-height: 1.5; }
.admin-thumb-heading strong { color: #204674; font-size: 15px; line-height: 1.4; }
.admin-thumb-heading-icon { padding: 7px; display: grid; place-items: center; color: #326ce0; background: #e2ecff; border-radius: 8px; }
.admin-thumb-heading-icon > .icon { width: 16px; height: 16px; }
.admin-thumb-filter { display: flex; align-items: center; gap: 6px; color: #8698b2; font-size: 8px; }
.admin-thumb-filter > span { display: flex; align-items: center; gap: 5px; min-width: 0; padding: 5px 7px; border: 1px solid #dce5f4; background: #fff; border-radius: 4px; }
.admin-thumb-filter > span:first-child { flex: 1; }
.admin-thumb-filter > span:last-child { flex: none; }
.admin-thumb-filter .icon { width: 9px; height: 9px; }
.admin-thumb-filter > span:last-child > .icon { width: 7px; height: 7px; transform: rotate(90deg); }
.admin-thumb-table-card { border: 1px solid #dce6f5; background: #fff; border-radius: 6px; overflow: hidden; }
.admin-thumb-table-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 9px; }
.admin-thumb-table-title strong { font-size: 9px; color: #385675; }
.admin-thumb-table-title > span { font-size: 7px; color: #8da0b9; }
.admin-thumb-table { width: 100%; border-collapse: collapse; text-align: left; table-layout: fixed; font-size: 8px; }
.admin-thumb-table th { padding: 5px 7px; color: #768dab; background: #edf3ff; font-size: 7px; font-weight: 400; line-height: 1.5; }
.admin-thumb-table th:first-child { width: 43%; }
.admin-thumb-table th:nth-child(2) { width: 32%; }
.admin-thumb-table td { padding: 5px 7px; color: #536f91; border-top: 1px solid #eef2f9; line-height: 1.5; }
.admin-thumb-table tr:nth-child(even) > td { background: #fafcff; }
.admin-thumb-user { display: flex; align-items: center; gap: 5px; color: #385775; white-space: nowrap; }
.admin-thumb-avatar { display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 50%; background: #dfebff; color: #4476cf; font-size: 9px; }
.admin-thumb-avatar-0, .admin-thumb-avatar-1, .admin-thumb-avatar-2, .admin-thumb-avatar-3 { background-image: url('./portraits.webp'); background-size: 300% 200%; }
.admin-thumb-avatar-0 { background-position: 0 0; }
.admin-thumb-avatar-1 { background-position: 50% 0; }
.admin-thumb-avatar-2 { background-position: 100% 0; }
.admin-thumb-avatar-3 { background-position: 0 100%; }
.admin-thumb-member { display: inline-block; white-space: nowrap; color: #9c6c22; background: #fff1d8; border-radius: 3px; padding: 1px 4px; font-size: 7px; }
.admin-thumb-member-plain { color: #8294ac; background: #f0f4fa; }
.admin-thumb-status { color: #23886d; background: #e3f5ec; padding: 2px 5px; border-radius: 3px; white-space: nowrap; font-size: 7px; }
.admin-thumb-status-muted { color: #b47a3d; background: #fff0df; }
.admin-thumb-config-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.admin-thumb-config-card { position: relative; min-width: 0; padding: 8px; border: 1px solid #e1d9f7; border-radius: 7px; background: #faf7ff; }
.admin-thumb-config-card > strong { display: block; padding-left: 21px; color: #7558a2; font-size: 9px; line-height: 1.7; margin-bottom: 7px; }
.admin-thumb-config-icon { position: absolute; top: 8px; left: 8px; color: #8e65bd; }
.admin-thumb-config-icon > .icon { width: 14px; height: 14px; }
.admin-thumb-content { background: #f0faf5; border-color: #cfe8de; }
.admin-thumb-content > strong, .admin-thumb-content > .admin-thumb-config-icon { color: #35866e; }
.admin-thumb-setting { display: flex; align-items: center; justify-content: space-between; gap: 5px; margin-top: 5px; font-size: 7px; color: #71809c; line-height: 1.5; }
.admin-thumb-setting > b { color: #8669a6; font-weight: 500; font-size: 7px; }
.admin-thumb-toggle { width: 18px; height: 10px; flex: none; padding: 2px; display: flex; justify-content: flex-end; border-radius: 8px; background: #4385eb; }
.admin-thumb-toggle::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.admin-thumb-chips { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 7px; }
.admin-thumb-chips > span { padding: 2px 4px; color: #7c6d99; background: #eee8f8; border-radius: 3px; font-size: 6px; white-space: nowrap; }
.admin-thumb-content .admin-thumb-chips > span { color: #548877; background: #e2f3e9; }
.admin-thumb-main-foot { display: flex; align-items: center; gap: 4px; margin-top: auto; color: #8a9bb3; font-size: 7px; line-height: 1.5; }
.admin-thumb-main-foot > .icon { width: 10px; height: 10px; }
@container (min-width: 500px) {
  .admin-thumb-window { min-height: 390px; }
  .admin-thumb-nav-title { font-size: 8px; }
  .admin-thumb-nav-item { font-size: 9px; min-height: 16px; line-height: 1.4; }
  .admin-thumb-nav-item > .icon { width: 11px; height: 11px; }
  .admin-thumb-main { padding: 12px; gap: 9px; }
  .admin-thumb-table, .admin-thumb-table-title strong, .admin-thumb-config-card > strong { font-size: 10px; }
  .admin-thumb-setting, .admin-thumb-member, .admin-thumb-status { font-size: 8px; }
}
@container (max-width: 380px) {
  .admin-thumb-body { grid-template-columns: 104px minmax(0, 1fr); }
  .admin-thumb-main { padding: 9px 7px; gap: 8px; }
  .admin-thumb-bar { padding-inline: 8px; }
  .admin-thumb-bar > strong > span { display: none; }
  .admin-thumb-filter > span { padding-inline: 5px; }
  .admin-thumb-filter > span:last-child { font-size: 7px; }
  .admin-thumb-table th, .admin-thumb-table td { padding-inline: 4px; }
  .admin-thumb-user { gap: 3px; }
  .admin-thumb-avatar { width: 15px; height: 15px; font-size: 7px; }
  .admin-thumb-config-grid { grid-template-columns: 1fr; }
  .admin-thumb-config-card { padding: 7px 8px; }
  .admin-thumb-config-card > strong { margin-bottom: 4px; }
  .admin-thumb-setting { margin-top: 3px; }
  .admin-thumb-chips { display: none; }
  .admin-thumb-main-foot { font-size: 6px; }
}
/* Small capability cards retain all sixteen menu entries without becoming a tall panel. */
.scene-ribbon > a { display: flex; flex-direction: column; }
.scene-ribbon > a > span { margin-top: auto; }
.admin-thumb-ribbon .admin-thumb-window { min-height: 230px; aspect-ratio: auto; }
.admin-thumb-ribbon .admin-thumb-bar { flex-basis: 25px; padding: 4px 7px; gap: 5px; }
.admin-thumb-ribbon .admin-thumb-brand { width: 16px; height: 16px; font-size: 9px; }
.admin-thumb-ribbon .admin-thumb-bar > strong { font-size: 9px; }
.admin-thumb-ribbon .admin-thumb-body { grid-template-columns: 32% minmax(0,1fr); }
.admin-thumb-ribbon .admin-thumb-sidebar { padding: 6px 3px; }
.admin-thumb-ribbon .admin-thumb-nav-title { display: none; }
.admin-thumb-ribbon .admin-thumb-nav-item { min-height: 10px; padding: 0 3px; gap: 3px; font-size: 6px; line-height: 1.5; }
.admin-thumb-ribbon .admin-thumb-nav-item > .icon { width: 7px; height: 7px; }
.admin-thumb-ribbon .admin-thumb-module-count { font-size: 6px; padding-top: 3px; }
.admin-thumb-ribbon .admin-thumb-main { padding: 7px; gap: 6px; }
.admin-thumb-ribbon .admin-thumb-heading strong { font-size: 11px; }
.admin-thumb-ribbon .admin-thumb-breadcrumb { font-size: 6px; }
.admin-thumb-ribbon .admin-thumb-heading-icon, .admin-thumb-ribbon .admin-thumb-filter > span:last-child, .admin-thumb-ribbon .admin-thumb-config-grid, .admin-thumb-ribbon .admin-thumb-main-foot { display: none; }
.admin-thumb-ribbon .admin-thumb-table th, .admin-thumb-ribbon .admin-thumb-table td { padding: 6px 3px; }
.admin-thumb-ribbon .admin-thumb-table, .admin-thumb-ribbon .admin-thumb-table-title strong { font-size: 7px; }
.admin-thumb-ribbon .admin-thumb-table-title { padding: 6px 5px; }
.admin-thumb-ribbon .admin-thumb-table th, .admin-thumb-ribbon .admin-thumb-member, .admin-thumb-ribbon .admin-thumb-status { font-size: 6px; }
.admin-thumb-ribbon .admin-thumb-avatar { display: none; }
@media (max-width: 760px) {
 .admin-thumb-ribbon .admin-thumb-body { grid-template-columns: 60px minmax(0,1fr); }
 .admin-thumb-ribbon .admin-thumb-main { padding: 5px; }
 .admin-thumb-ribbon .admin-thumb-demo { display: none; }
 .admin-thumb-ribbon .admin-thumb-table th:nth-child(2), .admin-thumb-ribbon .admin-thumb-table td:nth-child(2) { display: none; }
 .admin-thumb-ribbon .admin-thumb-table th:first-child { width: 60%; }
 .admin-thumb-ribbon .admin-thumb-table-title > span { display: none; }
 .admin-thumb-ribbon .admin-thumb-user { font-size: 6px; }
 .admin-thumb-ribbon .admin-thumb-status { padding-inline: 2px; font-size: 5px; }
}

/* Sharp product UI on devices whose proportions never depend on stage height. */
.product-universe { position: relative; display: block; width: 100%; min-width: 0; overflow: hidden; isolation: isolate; container-type: inline-size; color-scheme: light; color: #20314c; background: radial-gradient(ellipse at 86% 88%,#e7ddff 0,transparent 37%),radial-gradient(ellipse at 9% 73%,#d6f7f2 0,transparent 36%),linear-gradient(155deg,#f4f9ff,#eaf2ff 52%,#f5f8ff); }
.universe-canvas { position: relative; width: min(100%,1260px); height: clamp(600px,62cqw,782px); margin: auto; overflow: hidden; }
.universe-canvas::after { content: ''; position: absolute; z-index: 0; left: 6%; right: 3%; bottom: -5%; height: 19%; border: 1px solid #b9d4f255; border-radius: 50%; background: linear-gradient(180deg,#ffffffa6,#dceaff22); box-shadow: 0 -20px 90px #82b5f11a; }
.universe-glow { position: absolute; z-index: 0; border-radius: 50%; filter: blur(25px); }
.universe-glow--blue { width: 44%; aspect-ratio: 1; top: 2%; left: 5%; background: #c1d7ff7a; }
.universe-glow--mint { width: 30%; aspect-ratio: 1; right: 8%; bottom: 5%; background: #c5e7f080; }
.universe-console { position: absolute; z-index: 1; top: 3.5%; left: 4%; width: 91%; height: 54%; padding: 6px; background: linear-gradient(120deg,#f6fbff,#a5bada 48%,#e3edfa); border: 1px solid #a7bbd8; border-radius: 15px; box-shadow: 0 18px 35px #3057872b,inset 0 1px #fff; }
.universe-console::after { content: ''; position: absolute; left: -2%; right: -2%; bottom: -11px; height: 11px; border-radius: 0 0 55% 55%; background: linear-gradient(#e7eff9,#91a5c3); box-shadow: 0 7px 10px #5476a826; }
.universe-admin { height: 100%; border-radius: 9px; }
.universe-admin .admin-thumb-window { height: 100%; min-height: 0; border-radius: 9px; }
.universe-admin .admin-thumb-body { overflow: hidden; }
.universe-call { position: absolute; z-index: 4; top: 1.2%; right: 1.5%; width: 25%; padding: 6px; background: #fff; border: 1px solid #c2d4ee; border-radius: 14px; box-shadow: 0 16px 35px #2455a230; transform: rotate(2deg); }
.universe-call-title { display: flex; justify-content: space-between; align-items: center; padding: 3px 6px 8px; color: #26456e; font-size: 10px; font-weight: 650; }
.universe-call-title > span { display: flex; align-items: center; gap: 5px; }
.universe-call-title i,.universe-call-person small i { width: 5px; height: 5px; border-radius: 50%; background: #43c990; }
.universe-call-title small { color: #7c91ac; font-size: 9px; font-weight: 400; }
.universe-call-faces { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.universe-call-person { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 8px; background: #dfedff; }
.universe-call-photo { position: absolute; inset: 0; background: url('./hero-social-portraits.webp') var(--portrait-position) / 200% 200%; }
.universe-call-person::after { content:''; position:absolute; inset:55% 0 0; background:linear-gradient(transparent,#16283f66); }
.universe-call-person small { position: absolute; z-index: 1; left: 7px; bottom: 6px; display: flex; align-items: center; gap: 4px; color: #fff; font-size: 9px; text-shadow: 0 1px 2px #152a4c; }
.universe-call-person > .icon { position: absolute; z-index: 1; bottom: 6px; right: 7px; width: 11px; height: 11px; color: white; }
.universe-call-controls { display: flex; justify-content: center; gap: 16px; padding: 8px 0 2px; }
.universe-call-controls > span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #eff4fb; color: #36567f; }
.universe-call-controls .icon { width: 13px; height: 13px; }
.universe-call-controls > .universe-hangup { width: 38px; border-radius: 14px; background: #f05b65; color: #fff; }
.universe-hangup .icon { transform: rotate(135deg); }

.universe-phone { position: absolute; z-index: 5; bottom: 4%; width: 18.8%; height: auto; aspect-ratio: 9 / 19.5; padding: 4px; container-type: inline-size; border-radius: 29px; border: 1px solid #6c7f9b; background: linear-gradient(110deg,#dce8f7,#21354c 5%,#aabbd0 8%,#2a3d56 48%,#7890b4 94%,#e0ecf8); box-shadow: 4px 20px 28px #27446840,inset 1px 1px 2px #fff; }
.universe-phone::before,.universe-phone::after { content:''; position:absolute; width:2px; height:7%; background:linear-gradient(#aabbd0,#3c526d); border-radius:2px; top:21%; }
.universe-phone::before { left:-3px; }.universe-phone::after { right:-3px; top:26%; height:10%; }
.universe-phone--chat { left: 29%; transform: rotate(-4deg); }
.universe-phone--community { left: 48.7%; width: 19.4%; bottom: 3%; z-index: 6; transform: rotate(.5deg); }
.universe-phone--profile { left: 69%; transform: rotate(4deg); }
.universe-phone-shell { display: flex; flex-direction: column; height: 100%; border-radius: 10cqw; overflow: hidden; border: 1px solid #122338; background: #fff; }
.universe-phone-status { display: flex; align-items: center; justify-content: space-between; flex: none; height: 10cqw; padding: 1cqw 6cqw 0; color: #172334; font-size: 4cqw; font-weight: 700; background: #f8fbff; }
.universe-phone-status > i { position: absolute; top: 3cqw; left: 35%; width: 30%; height: 5.3cqw; border-radius: 4cqw; background: #142131; box-shadow: inset 1px 1px 2px #000; }
.universe-status-icons { display: flex; align-items: center; gap: 2cqw; }.universe-status-icons b { font-size: 3cqw; letter-spacing:-.7px; }.universe-status-icons em { display:block; width:7cqw; height:3.2cqw; border:1px solid #223349; border-radius:1cqw; background:linear-gradient(90deg,#223349 70%,transparent 70%); }
.universe-phone-screen { min-height: 0; flex: 1; display: flex; flex-direction: column; gap: 0; overflow: hidden; padding: 1.5cqw 4.5cqw 0; background: #fff; }
.universe-phone-screen > * { flex-shrink: 0; }
.universe-phone-heading { display: flex; align-items: center; justify-content: space-between; min-height: 11cqw; color: #162b49; line-height: 1.3; }
.universe-phone-heading > strong { font-size: 7.5cqw; letter-spacing: -.03em; }
.universe-phone-heading > span { display: flex; gap: 3.7cqw; color: #4777ba; }
.universe-phone-heading .icon { width: 6cqw; height: 6cqw; }
.universe-avatar { display: block; width: 13cqw; height: 13cqw; flex: none; border-radius: 4cqw; background: #dce8fb url('./hero-social-portraits.webp') var(--portrait-position) / 200% 200%; box-shadow: inset 0 0 0 1px #203f6910; }
.universe-phone-nav { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); flex: none; padding: 3cqw 1cqw 1cqw; border-top: 1px solid #e1e9f4; background: #fff; }
.universe-phone-nav > span { display: grid; justify-items: center; gap: 1cqw; color: #8392a9; }
.universe-phone-nav > span.is-current { color: #1874f8; }
.universe-phone-nav .icon { width: 6.8cqw; height: 6.8cqw; }
.universe-phone-nav small { font-size: 3.4cqw; line-height: 1.4; white-space: nowrap; }
.universe-home-indicator { width: 28%; height: 1.1cqw; margin: 1.5cqw auto 2.5cqw; border-radius: 2px; background: #1f2d41; flex: none; }

.universe-phone--chat .universe-phone-screen { background: linear-gradient(#f0f6ff,#f5f9ff); }
.universe-thread-heading { gap: 2cqw; min-height: 11cqw; margin-bottom: 1cqw; }
.universe-thread-heading > .universe-back { transform: rotate(180deg); color: #1e314d; }
.universe-thread-heading > div { flex: 1; min-width: 0; }
.universe-thread-heading strong { display: block; font-size: 5.2cqw; white-space: nowrap; }
.universe-thread-heading small { display: block; font-size: 3.2cqw; color: #8da0b8; margin-top: .7cqw; }
.universe-thread-heading > span:last-child { gap: 2.5cqw; }
.universe-thread-notice { display: flex; align-items: center; gap: 2cqw; border-radius: 2.5cqw; padding: 1.7cqw; color: #587ab2; background: #e8f0fe; font-size: 3.1cqw; white-space: nowrap; }
.universe-thread-notice .icon { width: 4cqw; height: 4cqw; }.universe-thread-notice > span { margin-left: auto; }
.universe-thread-time { text-align: center; color: #9aadc3; font-size: 3.1cqw; padding: 1.5cqw 0 1cqw; }
.universe-message { display: flex; align-items: flex-start; gap: 2.8cqw; margin-top: 1.8cqw; }
.universe-message > div { min-width: 0; max-width: 71%; }.universe-message > div > small { display: block; font-size: 3.2cqw; line-height:1.4; color: #7891b1; margin-bottom: 1cqw; }
.universe-bubble { border: 1px solid #e6edf7; background: #fff; border-radius: 1.5cqw 4.5cqw 4.5cqw 4.5cqw; padding: 2cqw 3.2cqw; font-size: 4cqw; line-height: 1.65; color: #29415e; box-shadow: 0 2px 3px #31527e04; }
.universe-message--out { justify-content: flex-end; }.universe-message--out .universe-bubble { background: linear-gradient(120deg,#3189ff,#1670ef); border-color: #2480f4; color: #fff; border-radius: 4.5cqw 1.5cqw 4.5cqw 4.5cqw; }
.universe-message > div > .universe-message-read { display: flex; justify-content: flex-end; align-items: center; gap:1cqw; margin: 1cqw 0 0; color: #6c9edd; font-size: 2.9cqw; }.universe-message-read .icon { width:3cqw;height:3cqw; }
.universe-voice-bubble { display: flex; align-items: center; gap: 2cqw; color: #287de3; min-width: 55cqw; height: 13cqw; padding: 2cqw 3cqw; }
.universe-voice-bubble > .icon { width: 5cqw; height: 5cqw; fill: #3182ed; stroke-width: 1; }
.universe-voice-bubble b { font-size: 3.7cqw; font-weight: 500; }
.universe-wave { display: flex; align-items: center; justify-content: space-between; gap: 2px; flex:1; height: 20px; color: #4e99ec; }
.universe-wave i { display: block; width: 2px; flex:1; max-width:3px; height: calc(var(--wave-height) * .65px); border-radius: 2px; background: currentColor; }
.universe-phone .universe-wave { height: 8cqw; gap: .9cqw; }.universe-phone .universe-wave i { width: .6cqw; height: calc(var(--wave-height) * .25cqw); }
.universe-file-bubble { display: flex; align-items: center; gap: 2.5cqw; border: 1px solid #e2eafa; padding: 3cqw; border-radius: 3.5cqw; background: #fff; }
.universe-file-bubble > span { display:grid;place-items:center;flex:none;width:11cqw;height:14cqw;border-radius:2cqw;background:linear-gradient(145deg,#ff7b78,#ef5465);color:white;font-size:3.6cqw;font-weight:700; }
.universe-file-bubble > div { flex:1;min-width:0; }.universe-file-bubble strong { display:block;font-size:3.6cqw;white-space:nowrap; }.universe-file-bubble small { font-size:3cqw;color:#8fa0b8; }.universe-file-bubble > .icon { width:4.5cqw;height:4.5cqw;transform:rotate(90deg);color:#5290df; }
.universe-picture-message { border: 1px solid #dfe9f8; border-radius: 3.5cqw; overflow:hidden;background:#fff; }.universe-picture-message img { display:block;width:100%;height:23cqw;object-fit:cover; }.universe-picture-message > span { display:block;padding:2cqw 3cqw;color:#294362;font-size:3.7cqw; }
.universe-composer { display:flex;align-items:center;gap:2.4cqw;padding:1cqw 0;margin-top:auto; }.universe-composer > .icon { width:6cqw;height:6cqw;color:#476588;flex:none; }.universe-composer > span { flex:1;border:1px solid #e2eaf4;background:#fff;border-radius:5cqw;color:#95a6be;font-size:3.5cqw;padding:2cqw 3cqw; }

.universe-circle-tabs { display:flex;gap:6cqw;align-items:center;height:13cqw;color:#8b9bb1;font-size:4.3cqw; }.universe-circle-tabs b { display:flex;align-items:center;height:100%;color:#256be7;border-bottom:2px solid #256be7; }
.universe-interest-row { display:flex;justify-content:space-around;padding:3cqw 0;border-bottom:1px solid #edf1f7; }.universe-interest-row > span,.universe-privileges > span { display:grid;justify-items:center;gap:2cqw; }.universe-interest-row i,.universe-privileges i { display:grid;place-items:center;width:15cqw;height:15cqw;border-radius:5cqw;box-shadow:inset 0 1px 1px #fff8,0 3px 5px #4974ae20;color:white; }.universe-interest-row .icon { width:8cqw;height:8cqw; }.universe-interest-row small { font-size:3.5cqw;color:#627792; }
.product-universe .blue { background:linear-gradient(135deg,#75c6ff,#247af2); }.product-universe .mint { background:linear-gradient(135deg,#8bdcce,#27ac88); }.product-universe .coral { background:linear-gradient(135deg,#ffcca1,#f1966c); }.product-universe .violet { background:linear-gradient(135deg,#c2b8ff,#7e69df); }.product-universe .gold { background:linear-gradient(135deg,#f6dfaa,#d1a34b); }
.universe-post { padding:4cqw 0 3cqw;border-bottom:1px solid #ebf0f8; }.universe-post-author { display:flex;align-items:center;gap:2.7cqw; }.universe-post-author .universe-avatar { width:12cqw;height:12cqw;border-radius:50%; }.universe-post-author > span:nth-child(2) { min-width:0;flex:1; }.universe-post-author strong { display:block;font-size:4.4cqw;line-height:1.3; }.universe-post-author strong b { color:#bd9448;background:#fff4d8;border-radius:1cqw;font-size:2.6cqw;font-weight:500;padding:.5cqw 1cqw; }.universe-post-author small { display:block;color:#95a3b8;font-size:3cqw;white-space:nowrap;margin-top:1cqw; }.universe-post-author i { color:#8195b3;font-style:normal;font-size:6cqw; }
.universe-post p { color:#304761;font-size:4cqw;line-height:1.65;margin:3cqw 0 1.5cqw; }.universe-post-tags { color:#518ee3;font-size:3.5cqw;margin-bottom:3cqw; }.universe-post > img { display:block;width:100%;height:43cqw;object-fit:cover;border-radius:3cqw; }
.universe-post-actions { display:flex;gap:8cqw;padding:3.5cqw 0;color:#69809b;font-size:3.6cqw; }.universe-post-actions > span { display:flex;align-items:center;gap:2cqw; }.universe-post-actions > span:last-child { margin-left:auto; }.universe-post-actions .icon { width:4.8cqw;height:4.8cqw; }.universe-post-actions > span:first-child { color:#eb7f88; }
.universe-post-comment { padding:2.8cqw;background:#f4f7fc;border-radius:2cqw;color:#7c8da4;font-size:3.25cqw;white-space:nowrap; }.universe-post-comment b { color:#5f81b0;font-weight:500; }
.universe-circle-next { display:flex;align-items:center;gap:3cqw;padding:2.5cqw 0; }.universe-circle-next .universe-avatar { width:12cqw;height:12cqw;border-radius:50%; }.universe-circle-next > span:last-child { flex:1;min-width:0; }.universe-circle-next strong { display:flex;align-items:center;justify-content:space-between;font-size:4cqw; }.universe-circle-next strong i { font-size:3cqw;color:#3785ed;border:1px solid #e2ecfc;padding:.5cqw 2cqw;border-radius:3cqw;font-style:normal;font-weight:400; }.universe-circle-next small { display:block;font-size:3.3cqw;color:#8b9bb1;margin-top:1.5cqw; }

.universe-phone--profile .universe-phone-screen { background:linear-gradient(#f0f6ff,#fff 43%); }
.universe-profile-user { display:flex;align-items:center;gap:4cqw;margin:3cqw 0 2cqw; }.universe-profile-user .universe-avatar { width:20cqw;height:20cqw;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1.3cqw #b8ceff,0 5px 10px #7d9ccc30; }.universe-profile-user > span:nth-child(2) { flex:1;min-width:0; }.universe-profile-user strong { display:flex;align-items:center;gap:2cqw;font-size:6cqw; }.universe-profile-user strong .icon { width:5cqw;height:5cqw;color:#c6a057; }.universe-profile-user small { display:block;color:#8094af;font-size:3cqw;white-space:nowrap;margin-top:1.5cqw; }.universe-profile-user em { display:block;color:#91a1b6;font-size:2.8cqw;font-style:normal;margin-top:1.4cqw;white-space:nowrap; }.universe-profile-user > .icon { width:4cqw;height:4cqw;color:#7b93b2; }
.universe-profile-stats { display:flex;justify-content:space-around;padding:2cqw 0 3cqw;color:#8899b0;font-size:3.5cqw; }.universe-profile-stats span { display:grid;justify-items:center;gap:1cqw; }.universe-profile-stats b { color:#264577;font-size:6.5cqw; }
.universe-vip { position:relative;display:flex;align-items:center;min-height:29cqw;padding:3cqw 4.5cqw 9cqw;border-radius:5cqw;overflow:hidden;background:linear-gradient(115deg,#213559,#3f5f90);color:#fff;box-shadow:0 5px 12px #24406b1a; }
.universe-vip::before { content:'';position:absolute;right:-10%;top:-80%;width:70%;height:230%;transform:rotate(30deg);background:linear-gradient(90deg,transparent,#d4e6ff17,transparent); }
.universe-vip > div { position:relative;z-index:1;display:grid;gap:1cqw; }.universe-vip > div > span { display:flex;align-items:center;gap:2cqw;font-size:5cqw;color:#f5dc9e;font-weight:650; }.universe-vip .icon { width:6cqw;height:6cqw; }.universe-vip strong { font-size:3.5cqw;font-weight:500;color:#f4e6c7; }.universe-vip small { color:#c5d2e6;font-size:3cqw; }.universe-vip > i { position:absolute;right:4cqw;top:6cqw;color:#dfc38e;transform:rotate(-12deg); }.universe-vip > i .icon { width:24cqw;height:24cqw;fill:#d6b16b22;stroke-width:1; }.universe-vip > b { position:absolute;bottom:3cqw;right:4cqw;display:flex;align-items:center;gap:1cqw;padding:1.5cqw 3cqw;border-radius:5cqw;background:linear-gradient(120deg,#f8e8be,#e7c991);color:#605132;font-size:3cqw;font-weight:600; }.universe-vip > b .icon { width:3cqw;height:3cqw; }
.universe-privileges { display:grid;grid-template-columns:repeat(4,1fr);gap:2cqw;padding:3cqw 0;border-bottom:1px solid #edf0f8; }.universe-privileges i { width:12cqw;height:12cqw;border-radius:4cqw; }.universe-privileges .icon { width:7cqw;height:7cqw; }.universe-privileges small { font-size:3cqw;color:#687b96;white-space:nowrap; }
.universe-wallet { display:flex;justify-content:space-between;align-items:center;min-height:15cqw;border-bottom:1px solid #edf1f7; }.universe-wallet > span { display:flex;align-items:center;gap:2cqw;font-size:4.2cqw;font-weight:600; }.universe-wallet .icon { width:7cqw;height:7cqw;color:#4a8ade; }.universe-wallet > small { display:flex;align-items:center;gap:1cqw;color:#93a2b7;font-size:3cqw; }.universe-wallet > small .icon { width:3cqw;height:3cqw;color:#9dabbc; }
.universe-style-preview { display:flex;align-items:center;gap:3cqw;margin:2cqw 0;padding:2.5cqw 3cqw;background:linear-gradient(100deg,#f2f4ff,#fbf5ff);border:1px solid #e7eafa;border-radius:3cqw; }.universe-style-preview > div { flex:1;min-width:0; }.universe-style-preview strong { display:block;font-size:4cqw; }.universe-style-preview small { display:block;font-size:2.8cqw;color:#9b9bb4;margin-top:1cqw;white-space:nowrap; }.universe-style-bubble { padding:2cqw 3cqw;border-radius:3cqw 3cqw 1cqw 3cqw;background:linear-gradient(135deg,#65a9fc,#727bf4);font-size:3.5cqw;color:#fff;box-shadow:0 2px 4px #849cdf44;transform:rotate(-6deg);white-space:nowrap; }
.universe-style-preview .universe-avatar { width:13cqw;height:13cqw;border-radius:50%;border:1.3cqw solid #c4b2fa;box-shadow:0 0 0 1px #9b7ae5,0 3px 6px #9375db25; }
.universe-profile-list > div { display:flex;align-items:center;gap:2.3cqw;min-height:9cqw;border-bottom:1px solid #edf1f7; }.universe-profile-list .icon:first-child { width:6cqw;height:6cqw;color:#5185cc; }.universe-profile-list strong { font-size:3.9cqw;font-weight:550;white-space:nowrap; }.universe-profile-list small { flex:1;text-align:right;color:#9aa8ba;font-size:2.9cqw;white-space:nowrap; }.universe-profile-list .icon:last-child { width:3.2cqw;height:3.2cqw;color:#a1aec1; }

.universe-social-card { position:absolute;z-index:2;left:4.5%;top:57.5%;width:22%;padding:10px;border:1px solid #cbe0f5;border-radius:12px;background:#fffffff2;box-shadow:0 10px 22px #5381ac20;transform:rotate(-3deg); }
.universe-social-card > div:first-child { display:flex;align-items:center;gap:7px; }.universe-social-card .universe-avatar { width:28px;height:28px;border-radius:50%; }.universe-social-card > div > span:nth-child(2) { flex:1;min-width:0; }.universe-social-card strong { display:block;font-size:10px; }.universe-social-card small { display:block;font-size:8px;color:#8b9eb5; }.universe-social-card b { color:#55a391;font-size:8px;font-weight:500;white-space:nowrap; }.universe-social-audio { display:flex;align-items:center;gap:9px;padding:8px 3px 0; }.universe-social-audio > span:first-child { display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:#e8f6f3;color:#58a692; }.universe-social-audio .icon { width:13px;height:13px; }.universe-social-audio .universe-wave { color:#73bdba; }.universe-social-audio small { font-size:7px; }
.universe-mascot { position:absolute;z-index:7;left:1.5%;bottom:-1.5%;width:22%;max-width:280px;height:auto;filter:drop-shadow(4px 12px 10px #30699925); }
.opening-stage > .product-universe { max-width:1260px;margin:auto; }.brand-product > .product-universe { border-radius:15px; }.demo-hero .product-universe { border-radius:13px;border:1px solid #e1e9f7; }

@container (max-width: 900px) {
  .universe-admin .admin-thumb-sidebar { padding:6px 5px; }
  .universe-admin .admin-thumb-nav-title { font-size:6px; }
  .universe-admin .admin-thumb-nav-item { font-size:7px; min-height:13px; padding:0 4px; }
  .universe-admin .admin-thumb-nav-item > .icon { width:9px; height:9px; }

  .universe-canvas { height:580px; }
  .universe-console { left:3%;width:94%;height:58%;top:4%; }
  .universe-phone { width:23.2%;bottom:3%;border-radius:23px; }
  .universe-phone--chat { left:24%; }.universe-phone--community { left:46%;width:24%;bottom:2%; }.universe-phone--profile { left:70%; }
  .universe-call { width:29%;right:1%;top:1%; }
  .universe-social-card { display:none; }
  .universe-mascot { width:29%;left:-2%; }
}
@container (max-width: 650px) {
  .universe-admin .admin-thumb-nav-item { min-height:11.5px; font-size:6px; }
  .universe-admin .admin-thumb-nav-group + .admin-thumb-nav-group { margin-top:2px; }

  .universe-canvas { height:550px; }
  .universe-console { height:53%;top:3%; }
  .universe-phone { width:33%;padding:3px;border-radius:23px;bottom:3%; }
  .universe-phone--chat { left:30%;z-index:6; }.universe-phone--community { left:60%;width:34%;bottom:2%;z-index:5; }.universe-phone--profile { display:none; }
  .universe-call { width:34%;top:3%;right:2%; }
  .universe-call-title { font-size:8px;padding:2px 2px 5px; }.universe-call-title small { font-size:7px; }.universe-call-person small { font-size:7px; }.universe-call-person > .icon { width:8px;height:8px; }
  .universe-call-controls { gap:9px;padding-top:5px; }.universe-call-controls > span { width:17px;height:17px; }.universe-call-controls .icon { width:10px;height:10px; }.universe-call-controls > .universe-hangup { width:29px; }
  .universe-mascot { width:32%;left:-1%;bottom:0; }
}
@container (max-width: 480px) {
  .universe-admin .admin-thumb-sidebar { padding:4px 3px; }
  .universe-admin .admin-thumb-nav-title { font-size:5.5px; padding-bottom:1px; line-height:1.2; }
  .universe-admin .admin-thumb-nav-item { min-height:10px; font-size:5.6px; gap:3px; }
  .universe-admin .admin-thumb-nav-item > .icon { width:6.5px; height:6.5px; }
  .universe-admin .admin-thumb-nav-group + .admin-thumb-nav-group { margin-top:1px; }

  .universe-canvas { height:clamp(470px,148cqw,560px); }
  .universe-console { top:2.5%;left:3%;width:94%;height:48%; }
  .universe-phone { width:48%;padding:3px;border-radius:23px;bottom:2%; }
  .universe-phone--chat { left:47%;transform:rotate(3deg);z-index:6; }
  .universe-phone--community { display:block;left:10%;width:44%;bottom:4%;transform:rotate(-6deg);z-index:5; }
  .universe-phone--profile { display:none; }
  .universe-call { width:43%;right:2%;top:2%;padding:4px;border-radius:10px;transform:rotate(3deg); }
  .universe-call-person { border-radius:5px; }.universe-call-title { font-size:7px; }.universe-call-title small { font-size:6px; }.universe-call-controls { gap:7px; }.universe-call-controls > span { width:15px;height:15px; }.universe-call-controls .icon { width:9px;height:9px; }
  .universe-mascot { width:32%;left:-2%;bottom:0; }
}

body.download-guide-open { overflow: hidden; }
.wechat-download-guide { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: max(104px, env(safe-area-inset-top)) 20px 32px; border: 0; color: #fff; background: transparent; overflow-y: auto; overscroll-behavior: contain; }
.wechat-download-guide:not([open]) { display: none; }
.wechat-download-guide::backdrop { background: rgb(8 20 43 / 86%); }
.wechat-download-guide.is-fallback { z-index: 10000; background: rgb(8 20 43 / 94%); }
.wechat-guide-pointer { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 22px; display: flex; align-items: flex-end; gap: 10px; color: #cde1ff; font-size: 13px; }
.wechat-guide-pointer svg { width: 58px; height: 74px; color: #fff; }
.wechat-guide-card { position: relative; max-width: 410px; margin: 15px auto 0; padding: 29px 26px 24px; background: #fff; color: #152942; border-radius: 18px; box-shadow: 0 24px 80px #030d2333; text-align: left; }
.wechat-guide-close { position: absolute; right: 12px; top: 12px; display: grid; place-items: center; width: 32px; height: 32px; color: #697a91; background: #f0f4fa; border-radius: 50%; }
.wechat-guide-close .icon { width: 17px; height: 17px; }
.wechat-guide-tag { display: inline-block; margin: 0 0 13px; color: #165dff; font-size: 11px; letter-spacing: .04em; }
.wechat-guide-card h2 { padding-right: 10px; color: #152942; font-size: 24px; line-height: 1.4; }
.wechat-guide-card > p:not(.wechat-guide-tag) { margin-top: 12px; color: #697a91; font-size: 13px; line-height: 1.8; }
.wechat-guide-steps { display: grid; gap: 19px; margin: 25px 0; padding: 0; list-style: none; counter-reset: download-steps; }
.wechat-guide-steps li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.8; }
.wechat-guide-steps li::before { counter-increment: download-steps; content: counter(download-steps); display: grid; place-items: center; width: 25px; height: 25px; flex: none; margin-top: 1px; border-radius: 8px; color: #165dff; background: #edf3ff; font-size: 12px; font-weight: 600; }
.wechat-guide-steps strong { color: #165dff; font-weight: 600; }
.wechat-guide-menu { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; padding: 0 7px; border: 1px solid #dbe4f1; border-radius: 5px; color: #152942; background: #f6f8fc; font-weight: 700; letter-spacing: 2px; }
.wechat-guide-card .wechat-guide-confirm { width: 100%; min-height: 44px; margin-top: 2px; justify-content: center; background: #165dff; border-color: #165dff; color: #fff; }
.wechat-guide-card button:focus-visible { outline: 3px solid #84b5ff; outline-offset: 3px; }
@media (max-width: 360px) {
  .wechat-download-guide { padding-inline: 14px; }
  .wechat-guide-card { padding: 27px 19px 20px; }
  .wechat-guide-card h2 { font-size: 22px; }
  .wechat-guide-steps { gap: 16px; }
  .wechat-guide-steps li { font-size: 13px; }
}