:root {
  --ink: #0b1e32;
  --muted: #627489;
  --line: #dce5ed;
  --surface: #ffffff;
  --canvas: #f4f7fa;
  --navy: #082f49;
  --navy-2: #0d4868;
  --teal: #007a78;
  --mint: #d9f3ea;
  --gold: #f2af35;
  --orange: #d95d39;
  --red: #b93838;
  --green: #18794e;
  --blue: #2167a5;
  --shadow: 0 16px 45px rgba(20, 47, 72, .13);
  --radius: 16px;
  color: var(--ink);
  background: var(--canvas);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--canvas); }
button, input, select { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.skip-link { position: fixed; left: 1rem; top: -4rem; z-index: 100; padding: .75rem 1rem; border-radius: 7px; color: white; background: var(--navy); transition: top .2s; }
.skip-link:focus { top: 1rem; }
.kicker { margin: 0 0 .5rem; color: var(--teal); font-size: .69rem; font-weight: 800; letter-spacing: .14em; }
.button { border: 0; border-radius: 9px; padding: .76rem 1rem; font-weight: 760; line-height: 1.15; transition: transform .15s, box-shadow .15s, background .15s; }
.button:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(8, 47, 73, .15); }
.button.primary { color: #fff; background: var(--teal); }
.button.primary:hover { background: #006562; }
.button.secondary { color: var(--navy); background: #e7f0f5; }
.button.secondary:hover { background: #d9e7ee; }
.button.danger { color: #fff; background: var(--red); }
.button.compact { padding: .48rem .65rem; border-radius: 7px; font-size: .78rem; }
.text-button { padding: 0; border: 0; color: #e0f2f1; background: transparent; text-decoration: underline; font-weight: 700; }

/* Landing */
.landing-shell { display: grid; min-height: 100vh; grid-template-columns: minmax(0, .98fr) minmax(510px, 1.02fr); background: #f7fafc; }
.landing-copy { display: flex; flex-direction: column; justify-content: center; max-width: 720px; padding: 7rem clamp(2rem, 6vw, 7rem); }
.brand { display: inline-flex; align-items: center; gap: .65rem; width: max-content; color: var(--navy); font-size: 1.25rem; font-weight: 850; letter-spacing: -.02em; }
.brand strong { padding-left: .65rem; border-left: 1px solid #c4d4de; font-size: .71rem; line-height: 1.25; letter-spacing: .03em; text-transform: uppercase; }
.brand-orbit { position: relative; display: inline-block; width: 28px; height: 28px; border: 5px solid #dd4c27; border-right-color: transparent; border-radius: 50%; transform: rotate(-25deg); }
.brand-orbit::after { position: absolute; inset: 7px -12px auto 5px; height: 4px; content: ""; border-radius: 7px; background: var(--gold); transform: rotate(20deg); }
.landing-copy .kicker { margin-top: 4rem; }
.landing-copy h1 { max-width: 620px; margin: 0; color: var(--navy); font-size: clamp(2.6rem, 5.2vw, 5rem); font-weight: 800; line-height: .98; letter-spacing: -.065em; }
.landing-lede { max-width: 610px; margin: 1.5rem 0 2rem; color: #496174; font-size: 1.08rem; line-height: 1.6; }
.landing-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.disclosure-bar { display: flex; align-items: flex-start; gap: .55rem; max-width: 600px; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--line); color: #526879; font-size: .76rem; line-height: 1.45; }
.signal-dot { display: inline-block; flex: 0 0 auto; width: 8px; height: 8px; margin-top: .28rem; border-radius: 50%; background: #1ca36b; box-shadow: 0 0 0 4px rgba(28, 163, 107, .12); }
.landing-visual { position: relative; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: 4rem clamp(2rem, 5vw, 6rem); color: white; background: radial-gradient(circle at 57% 47%, rgba(0, 141, 134, .45), transparent 18%), radial-gradient(circle at 100% 18%, rgba(88, 171, 211, .22), transparent 26%), linear-gradient(145deg, #06253a, #063c57 55%, #07536b); }
.landing-visual::before { position: absolute; inset: 1.4rem; border: 1px solid rgba(255,255,255,.11); content: ""; pointer-events: none; }
.visual-top { position: absolute; top: 3.3rem; right: clamp(2rem, 5vw, 6rem); left: clamp(2rem, 5vw, 6rem); display: flex; justify-content: space-between; gap: 1rem; color: rgba(234,250,251,.68); font-size: .7rem; font-weight: 700; letter-spacing: .04em; }
.flow-orbit { position: relative; width: min(565px, 100%); height: 520px; margin: 3rem auto 1.5rem; border: 1px solid rgba(210, 255, 250, .26); border-radius: 50%; }
.flow-orbit::before, .flow-orbit::after { position: absolute; inset: 12%; border: 1px dashed rgba(208,250,247,.18); border-radius: 50%; content: ""; }
.flow-orbit::after { inset: 28%; border-style: solid; }
.flow-core { position: absolute; top: 50%; left: 50%; display: flex; width: 182px; height: 182px; align-items: center; justify-content: center; flex-direction: column; border: 1px solid rgba(255,255,255,.54); border-radius: 50%; text-align: center; background: linear-gradient(145deg, rgba(15,104,121,.84), rgba(6,45,69,.96)); box-shadow: 0 0 0 13px rgba(117,222,213,.05), 0 0 60px rgba(91,227,205,.21); transform: translate(-50%, -50%); }
.flow-core span { color: #8ce2d9; font-size: .68rem; font-weight: 800; letter-spacing: .16em; }
.flow-core strong { margin: .24rem 0; font-size: 1.38rem; line-height: 1.05; letter-spacing: -.045em; }
.flow-core small { color: #b9d9dc; font-size: .62rem; }
.orbit-node { position: absolute; display: flex; align-items: center; gap: .42rem; width: max-content; color: #d9f5f2; font-size: .78rem; font-weight: 700; }
.orbit-node span { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid rgba(255,255,255,.46); border-radius: 50%; color: #ffcf71; font-size: .61rem; }
.node-retail { top: 4%; left: 15%; }.node-finance { top: 18%; right: -2%; }.node-assets { right: 5%; bottom: 14%; }.node-people { bottom: 9%; left: 5%; }
.landing-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; width: min(600px, 100%); margin: 0 auto; background: rgba(255,255,255,.17); }
.landing-metrics > div { display: flex; padding: 1rem; align-items: baseline; gap: .5rem; background: rgba(5, 49, 71, .55); }.landing-metrics strong { color: #faaf3b; font-size: 1.45rem; }.landing-metrics span { color: #c2e4e6; font-size: .67rem; line-height: 1.3; }

/* App chrome */
.app { display: grid; min-height: 100vh; grid-template-columns: 254px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; display: flex; min-height: 100vh; flex-direction: column; padding: 1.35rem 1rem 1rem; color: #dcecf1; background: var(--navy); }
.sidebar-brand { display: flex; align-items: center; gap: .56rem; margin: 0 .35rem 1.45rem; color: #fff; }.brand-orbit.small { width: 23px; height: 23px; border-width: 4px; }.brand-orbit.small::after { inset: 6px -10px auto 4px; height: 3px; }.sidebar-brand div { display: flex; flex-direction: column; line-height: 1; }.sidebar-brand span:not(.brand-orbit) { color: #9ed1d9; font-size: .65rem; font-weight: 800; letter-spacing: .13em; }.sidebar-brand strong { margin-top: .23rem; font-size: .8rem; }
.persona-card { display: flex; flex-direction: column; margin: 0 .2rem 1rem; padding: .8rem; border: 1px solid rgba(152, 211, 213, .22); border-radius: 10px; background: rgba(21, 92, 117, .38); }.persona-label { color: #8bcad1; font-size: .59rem; font-weight: 800; letter-spacing: .12em; }.persona-card strong { margin-top: .3rem; color: white; font-size: .82rem; }.persona-card span:not(.persona-label) { margin: .25rem 0 .48rem; color: #bddde1; font-size: .66rem; line-height: 1.35; }
.nav { display: grid; gap: .12rem; }.nav-item { display: flex; width: 100%; align-items: center; gap: .62rem; padding: .61rem .66rem; border: 0; border-radius: 7px; color: #bfd4dd; text-align: left; background: transparent; font-size: .76rem; font-weight: 650; transition: background .14s, color .14s; }.nav-item span { display: inline-grid; width: 16px; place-items: center; color: #75c8c8; font-size: .84rem; }.nav-item:hover { color: white; background: rgba(255,255,255,.07); }.nav-item.active { color: white; background: var(--teal); box-shadow: inset 3px 0 #f1b13f; }.nav-item.active span { color: #fcce75; }.sidebar-footer { display: flex; align-items: center; gap: .5rem; margin: auto .4rem 0; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.12); color: #9dc5cc; font-size: .62rem; }.sidebar-footer .signal-dot { width: 6px; height: 6px; margin: 0; }
.main-shell { min-width: 0; }.topbar { position: sticky; z-index: 10; top: 0; display: flex; min-height: 82px; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem clamp(1.1rem, 3vw, 2.4rem); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); backdrop-filter: blur(12px); }.topbar-context h2 { margin: 0; color: var(--navy); font-size: 1.25rem; line-height: 1.1; letter-spacing: -.03em; }.topbar-context .kicker { margin: 0 0 .19rem; font-size: .58rem; }.topbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: .48rem; }.header-field { display: flex; flex-direction: column; color: #678091; font-size: .54rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }.header-field select { min-width: 92px; margin-top: .12rem; padding: .18rem .1rem; border: 0; border-bottom: 1px solid #bdceda; color: var(--navy); background: transparent; font-size: .73rem; font-weight: 700; }.translate { padding: .42rem .55rem; border: 1px solid #b9d9d5; border-radius: 7px; color: #006c69; background: #effaf8; font-size: .65rem; font-weight: 750; text-decoration: none; white-space: nowrap; }.round-button { display: inline-grid; width: 31px; height: 31px; place-items: center; border: 1px solid #cad7e1; border-radius: 50%; color: var(--navy); background: #fff; font-size: .8rem; font-weight: 800; }.round-button:hover { color: #fff; border-color: var(--navy); background: var(--navy); }.mobile-brand { display: none; }
.workspace { width: min(1530px, 100%); margin: 0 auto; padding: clamp(1.2rem, 2.4vw, 2.25rem); }

/* Reusable content components */
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }.page-heading h1 { max-width: 820px; margin: 0; color: var(--navy); font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -.047em; }.page-heading p { max-width: 750px; margin: .4rem 0 0; color: var(--muted); font-size: .86rem; line-height: 1.5; }.data-note { display: flex; align-items: center; gap: .4rem; padding: .45rem .6rem; border: 1px solid #f1d59d; border-radius: 8px; color: #7b5615; background: #fff9ec; font-size: .66rem; font-weight: 700; white-space: nowrap; }.data-note .signal-dot { width: 6px; height: 6px; margin: 0; background: var(--gold); box-shadow: none; }
.grid { display: grid; gap: 1rem; }.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }.grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }.card { padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 2px 3px rgba(12,50,75,.015); }.card h3 { margin: 0; color: var(--navy); font-size: .9rem; letter-spacing: -.015em; }.card h4 { margin: 0; color: var(--navy); font-size: .77rem; }.card p { color: var(--muted); font-size: .76rem; line-height: 1.45; }.card.emphasis { color: #eaf7f6; border-color: #0c6c72; background: linear-gradient(135deg, #075d69, #0b384f); }.card.emphasis h3, .card.emphasis p { color: inherit; }.card.emphasis p { color: #b9e1df; }
.metric-card { position: relative; overflow: hidden; padding: 1rem; border: 1px solid var(--line); border-radius: 13px; background: #fff; }.metric-card::after { position: absolute; right: -23px; bottom: -35px; width: 100px; height: 100px; border-radius: 50%; content: ""; background: #eaf5f4; }.metric-card .metric-label { position: relative; z-index: 1; color: #647a8c; font-size: .66rem; font-weight: 750; letter-spacing: .045em; text-transform: uppercase; }.metric-card strong { position: relative; z-index: 1; display: block; margin: .4rem 0 .25rem; color: var(--navy); font-size: 1.55rem; letter-spacing: -.055em; }.metric-card small { position: relative; z-index: 1; color: var(--green); font-size: .68rem; font-weight: 750; }.metric-card small.warn { color: #a36800; }.metric-card small.risk { color: var(--red); }
.section-title { display: flex; align-items: center; justify-content: space-between; margin: 1.45rem 0 .72rem; }.section-title h2 { margin: 0; color: var(--navy); font-size: 1.02rem; letter-spacing: -.02em; }.section-title span { color: var(--muted); font-size: .68rem; }.pill { display: inline-flex; width: max-content; align-items: center; gap: .3rem; padding: .24rem .45rem; border-radius: 99px; font-size: .62rem; font-weight: 800; }.pill.green { color: #126744; background: #def4e9; }.pill.amber { color: #865500; background: #fff0c9; }.pill.red { color: #9b2525; background: #fde5e1; }.pill.blue { color: #185888; background: #e3f0fc; }.pill.navy { color: #e5f4f7; background: #286482; }
.progress { height: 7px; overflow: hidden; border-radius: 20px; background: #e7edf1; }.progress > span { display: block; height: 100%; border-radius: inherit; background: var(--teal); }.progress.amber > span { background: var(--gold); }.progress.red > span { background: var(--red); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }.data-table { width: 100%; border-collapse: collapse; font-size: .72rem; }.data-table th { padding: .65rem .75rem; color: #587083; text-align: left; background: #f4f7f9; font-size: .61rem; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }.data-table td { padding: .72rem .75rem; border-top: 1px solid #e7edf1; color: #314c61; vertical-align: middle; }.data-table td strong { color: var(--navy); }.data-table tr:hover td { background: #fbfdfd; }.row-action { padding: .33rem .48rem; border: 1px solid #cfe0e5; border-radius: 6px; color: #006c6a; background: #fff; font-size: .64rem; font-weight: 800; white-space: nowrap; }.row-action:hover { color: #fff; border-color: var(--teal); background: var(--teal); }
.bar-chart { display: flex; height: 175px; align-items: flex-end; gap: .55rem; padding: 1.25rem .3rem .1rem; border-bottom: 1px solid var(--line); }.bar-unit { display: flex; min-width: 22px; height: 100%; align-items: flex-end; flex: 1; flex-direction: column; justify-content: flex-end; gap: .32rem; }.bar { width: 100%; min-height: 6px; border-radius: 4px 4px 0 0; background: var(--teal); }.bar.alt { background: #87c9c4; }.bar-unit small { color: #708392; font-size: .5rem; transform: rotate(-42deg); transform-origin: right; white-space: nowrap; }.chart-legend { display: flex; gap: .85rem; margin-top: .7rem; color: var(--muted); font-size: .62rem; }.legend-dot { display: inline-block; width: 8px; height: 8px; margin-right: .25rem; border-radius: 2px; background: var(--teal); }.legend-dot.alt { background: #87c9c4; }
.split-list { display: grid; gap: .7rem; }.split-item { display: grid; grid-template-columns: 1.1fr .9fr auto; gap: .65rem; align-items: center; color: #40586b; font-size: .72rem; }.split-item strong { color: var(--navy); }.split-item .progress { min-width: 100px; }
.route-steps { display: grid; grid-template-columns: repeat(5, minmax(105px, 1fr)); gap: .5rem; margin-top: 1.1rem; }.route-step { position: relative; min-height: 110px; padding: .75rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; }.route-step:not(:last-child)::after { position: absolute; z-index: 1; top: 50%; right: -.48rem; width: .45rem; height: 1px; content: ""; background: #9bb4bf; }.route-step span { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; color: white; background: var(--teal); font-size: .61rem; font-weight: 800; }.route-step h4 { margin: .6rem 0 .25rem; }.route-step p { margin: 0; color: var(--muted); font-size: .65rem; line-height: 1.35; }
.timeline { display: grid; gap: .75rem; }.timeline-item { display: grid; grid-template-columns: 74px 1fr; gap: .8rem; }.timeline-date { color: var(--teal); font-size: .64rem; font-weight: 850; letter-spacing: .04em; }.timeline-copy { position: relative; padding: 0 0 .75rem .95rem; border-left: 1px solid #bdd5dc; }.timeline-copy::before { position: absolute; top: .05rem; left: -.28rem; width: .5rem; height: .5rem; border: 2px solid #fff; border-radius: 50%; content: ""; background: var(--teal); box-shadow: 0 0 0 1px #9fc3cc; }.timeline-copy strong { color: var(--navy); font-size: .75rem; }.timeline-copy p { margin: .2rem 0 0; color: var(--muted); font-size: .68rem; line-height: 1.4; }
.callout { padding: .85rem .95rem; border-left: 4px solid var(--teal); border-radius: 0 9px 9px 0; color: #345268; background: #eff8f8; font-size: .76rem; line-height: 1.45; }.callout strong { color: var(--navy); }.callout.warning { border-color: var(--gold); background: #fff9ed; }.callout.danger { border-color: var(--red); background: #fff4f1; }
.option-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }.option { min-height: 152px; padding: .85rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; }.option.selected { border: 2px solid var(--teal); box-shadow: 0 7px 20px rgba(0,122,120,.11); }.option h4 { margin: .5rem 0 .35rem; }.option p { margin: 0; color: var(--muted); font-size: .68rem; line-height: 1.42; }.option .pill { font-size: .55rem; }

/* Detailed Corporate Services workflow components */
.module-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; }.module-tile { display: grid; min-height: 108px; padding: .8rem; border: 1px solid #cfe0e5; border-radius: 12px; color: var(--navy); text-align: left; background: linear-gradient(145deg, #fff, #f3f9fa); transition: transform .15s, border-color .15s, box-shadow .15s; }.module-tile:hover { border-color: var(--teal); box-shadow: 0 9px 18px rgba(0, 90, 96, .1); transform: translateY(-2px); }.module-tile span { color: #567285; font-size: .64rem; font-weight: 800; line-height: 1.25; }.module-tile strong { align-self: end; margin-top: .4rem; font-size: 1.6rem; letter-spacing: -.06em; }.module-tile small { color: var(--teal); font-size: .61rem; font-weight: 800; }.case-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }.case-card { padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 2px 3px rgba(12,50,75,.015); }.case-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .7rem; }.case-card .kicker { margin-bottom: .35rem; font-size: .56rem; }.case-card h3 { margin: 0; color: var(--navy); font-size: .95rem; letter-spacing: -.025em; }.case-card > p { min-height: 2.4rem; margin: .6rem 0 .75rem; color: var(--muted); font-size: .72rem; line-height: 1.4; }.case-meta { display: flex; justify-content: space-between; gap: .7rem; margin-top: .7rem; color: #5b7384; font-size: .64rem; }.case-meta strong { color: var(--navy); }.case-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; padding-top: .75rem; border-top: 1px solid #e5edf1; }.stage-lane { display: flex; gap: .24rem; overflow-x: auto; padding: .3rem 0 .45rem; }.stage-chip { position: relative; display: flex; min-width: 115px; flex: 1; align-items: flex-start; gap: .33rem; padding: .42rem; border: 1px solid #dce7eb; border-radius: 7px; color: #7390a0; background: #f8fafb; }.stage-chip.current { color: #064f55; border-color: var(--teal); background: #e9f8f6; box-shadow: inset 0 0 0 1px rgba(0,122,120,.08); }.stage-chip.done { color: #23775b; border-color: #a6d9c8; background: #f0faf5; }.stage-chip > span { display: grid; width: 17px; height: 17px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #fff; background: #91a9b5; font-size: .53rem; font-weight: 850; }.stage-chip.current > span { background: var(--teal); }.stage-chip.done > span { background: var(--green); }.stage-chip strong { display: block; font-size: .56rem; line-height: 1.18; }.stage-chip small { display: block; margin-top: .12rem; font-size: .5rem; line-height: 1.15; }.control-list { display: grid; gap: .45rem; margin: .8rem 0 0; padding: 0; list-style: none; }.control-list li { position: relative; padding-left: 1.05rem; color: #405b6d; font-size: .73rem; line-height: 1.38; }.control-list li::before { position: absolute; top: .35rem; left: .1rem; width: .42rem; height: .42rem; border-radius: 50%; content: ""; background: var(--teal); }.control-list.blocked li::before { background: var(--red); }.detail-pills { display: flex; flex-wrap: wrap; gap: .35rem; margin: .65rem 0 1rem; }.drawer h3 { margin: 1rem 0 .45rem; color: var(--navy); font-size: .83rem; }.history-list { display: grid; gap: .45rem; }.history-list > div { display: grid; gap: .13rem; padding: .55rem .6rem; border-left: 3px solid #9bcac7; border-radius: 0 6px 6px 0; background: #f4f9f9; }.history-list strong { color: var(--navy); font-size: .68rem; }.history-list span { color: #416276; font-size: .63rem; }.history-list small { color: #698393; font-size: .58rem; }.agent-grid-card { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }.agent-card { padding: .9rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; }.agent-card .kicker { font-size: .53rem; }.agent-card h3 { margin: 0; color: var(--navy); font-size: .78rem; }.agent-card p { min-height: 3.4rem; color: var(--muted); font-size: .68rem; line-height: 1.4; }
.workbench-hero { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 1rem; margin-bottom: 1rem; padding: 1.15rem 1.25rem; border-radius: 16px; color: #eef9f8; background: linear-gradient(135deg, #064e60, #087e7c 58%, #0d6276); box-shadow: 0 12px 26px rgba(5, 78, 96, .15); }.workbench-hero .kicker { color: #a5e7df; }.workbench-hero h2 { margin: 0; color: white; font-size: 1.35rem; letter-spacing: -.035em; }.workbench-hero p { max-width: 760px; margin: .42rem 0 .78rem; color: #d6f0ee; font-size: .76rem; line-height: 1.45; }.workbench-systems { display: flex; flex-wrap: wrap; gap: .35rem; }.workbench-systems span { padding: .3rem .42rem; border: 1px solid rgba(206,246,241,.3); border-radius: 99px; color: #dff8f5; background: rgba(0, 38, 56, .16); font-size: .58rem; font-weight: 750; }.workbench-hero aside { display: flex; min-height: 136px; align-items: flex-start; justify-content: center; flex-direction: column; padding: .95rem; border: 1px solid rgba(219,249,245,.23); border-radius: 12px; background: rgba(0, 39, 58, .25); }.workbench-hero aside > span { color: #addbd7; font-size: .58rem; font-weight: 850; letter-spacing: .1em; }.workbench-hero aside strong { margin-top: .22rem; color: #fff; font-size: 2rem; letter-spacing: -.07em; }.workbench-hero aside small { color: #d0ecea; font-size: .65rem; }.workbench-hero aside .button { margin-top: auto; }.workbench-tabs { display: flex; gap: .5rem; overflow-x: auto; margin-bottom: 1rem; padding-bottom: .15rem; }.workbench-tabs button { display: grid; min-width: 175px; gap: .16rem; padding: .68rem .75rem; border: 1px solid #ccdbe3; border-radius: 9px; color: #527083; text-align: left; background: #fff; }.workbench-tabs button:hover, .workbench-tabs button.active { color: #fff; border-color: var(--teal); background: var(--teal); box-shadow: 0 7px 15px rgba(0,122,120,.14); }.workbench-tabs button strong { font-size: .7rem; }.workbench-tabs button span { font-size: .57rem; line-height: 1.25; opacity: .85; }.workbench-grid { display: grid; grid-template-columns: 1.08fr 1fr 1fr; gap: .8rem; margin-bottom: 1.25rem; }.control-panel { padding: .9rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; }.control-panel .kicker { margin-bottom: .35rem; font-size: .56rem; }.control-panel h3 { margin: 0; color: var(--navy); font-size: .82rem; }.control-panel p { color: var(--muted); font-size: .7rem; line-height: 1.4; }.access-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .65rem; }.access-tags span { padding: .28rem .4rem; border-radius: 99px; color: #176764; background: #e8f7f4; font-size: .56rem; font-weight: 750; }

/* Agent and modals */
.agent-grid { display: grid; grid-template-columns: minmax(280px, .85fr) minmax(0, 1.5fr); gap: 1rem; }.agent-list { display: grid; gap: .4rem; }.agent-item { width: 100%; padding: .65rem; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); text-align: left; background: #fff; }.agent-item.active { border-color: var(--teal); background: #effaf8; }.agent-item strong { display: block; color: var(--navy); font-size: .73rem; }.agent-item span { color: var(--muted); font-size: .61rem; }.chat-window { display: flex; min-height: 395px; flex-direction: column; }.chat-messages { display: grid; flex: 1; align-content: start; gap: .65rem; overflow: auto; max-height: 380px; padding: .2rem .1rem .75rem; }.chat-message { max-width: 92%; padding: .65rem .75rem; border-radius: 10px; color: #365064; background: #f0f5f7; font-size: .71rem; line-height: 1.45; }.chat-message.user { margin-left: auto; color: white; background: var(--navy); }.chat-message strong { color: var(--navy); }.chat-message.user strong { color: #a6e3df; }.chat-form { display: flex; gap: .5rem; padding-top: .7rem; border-top: 1px solid var(--line); }.chat-form input { flex: 1; min-width: 0; padding: .65rem .7rem; border: 1px solid #c8d8e2; border-radius: 7px; }.chat-form input:focus, .login-form input:focus { outline: 2px solid rgba(0,122,120,.25); border-color: var(--teal); }.agent-policy { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .6rem; margin-top: 1rem; }.policy-cell { padding: .65rem; border-radius: 8px; background: #f4f8fa; }.policy-cell span { display: block; color: #668092; font-size: .54rem; font-weight: 800; letter-spacing: .07em; }.policy-cell strong { display: block; margin-top: .25rem; color: var(--navy); font-size: .65rem; }
.modal { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; padding: 1rem; background: rgba(4, 27, 44, .54); backdrop-filter: blur(3px); }.modal-card { position: relative; width: min(620px, 100%); max-height: calc(100vh - 2rem); overflow: auto; padding: 1.45rem; border-radius: 16px; background: #fff; box-shadow: var(--shadow); }.modal-card h2 { margin: 0; color: var(--navy); letter-spacing: -.035em; }.modal-card > p:not(.kicker) { color: var(--muted); font-size: .76rem; line-height: 1.48; }.modal-close { position: absolute; top: .7rem; right: .75rem; width: 28px; height: 28px; border: 0; border-radius: 50%; color: var(--navy); background: #eef4f6; font-size: 1.25rem; }.login-form { display: grid; gap: .75rem; margin-top: 1rem; }.login-form label { display: grid; gap: .32rem; color: #556f81; font-size: .66rem; font-weight: 800; }.login-form input { padding: .63rem .68rem; border: 1px solid #cad9e2; border-radius: 7px; }.error-text { min-height: 1.1rem; margin: 0; color: var(--red); font-size: .7rem; }.mini-note { padding-top: .8rem; border-top: 1px solid var(--line); color: #738596; font-size: .63rem; line-height: 1.4; }.role-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .55rem; margin-top: 1rem; }.role-choice { padding: .67rem; border: 1px solid var(--line); border-radius: 8px; color: #374e60; text-align: left; background: #fff; }.role-choice:hover, .role-choice.selected { border-color: var(--teal); background: #effaf8; }.role-choice strong { display: block; color: var(--navy); font-size: .71rem; }.role-choice span { display: block; margin-top: .2rem; color: var(--muted); font-size: .61rem; line-height: 1.3; }.drawer { position: fixed; z-index: 40; top: 0; right: -540px; display: flex; width: min(510px, 100vw); height: 100vh; flex-direction: column; padding: 1.35rem; border-left: 1px solid #d8e3e9; background: #fff; box-shadow: -12px 0 36px rgba(17,48,70,.14); transition: right .23s ease; }.drawer.open { right: 0; }.drawer header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line); }.drawer h2 { margin: 0; color: var(--navy); font-size: 1.18rem; letter-spacing: -.035em; }.drawer .drawer-body { overflow: auto; padding: 1rem 0; }.drawer dl { display: grid; grid-template-columns: 105px 1fr; gap: .62rem; margin: 1rem 0; font-size: .72rem; }.drawer dt { color: #6b8191; font-weight: 800; }.drawer dd { margin: 0; color: #324e62; }.drawer .drawer-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--line); }.toast { position: fixed; z-index: 80; right: 1rem; bottom: 1rem; max-width: 350px; padding: .65rem .85rem; border-radius: 8px; color: #fff; background: var(--navy); box-shadow: var(--shadow); font-size: .72rem; opacity: 0; pointer-events: none; transform: translateY(12px); transition: all .2s; }.toast.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1120px) { .landing-shell { grid-template-columns: 1fr; }.landing-copy { min-height: 600px; }.landing-visual { min-height: 650px; }.app { grid-template-columns: 210px minmax(0, 1fr); }.sidebar { padding-inline: .65rem; }.route-steps { grid-template-columns: repeat(3, 1fr); }.route-step:nth-child(3)::after { display: none; }.option-grid { grid-template-columns: repeat(2, 1fr); }.grid.four, .module-tiles, .agent-grid-card { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 850px) { .app { display: block; }.sidebar { position: fixed; z-index: 20; left: -254px; width: 244px; transition: left .2s; }.sidebar.open { left: 0; }.main-shell { padding-top: 0; }.topbar { min-height: 70px; }.mobile-brand { display: block; color: var(--navy); font-size: .76rem; }.topbar-context { display: none; }.header-field:first-of-type { display: none; }.workspace { padding: 1rem; }.grid.three, .grid.two, .agent-grid, .case-grid { grid-template-columns: 1fr; }.page-heading { align-items: flex-start; flex-direction: column; }.route-steps { grid-template-columns: repeat(2, 1fr); }.route-step:not(:last-child)::after { display: none; }.agent-policy { grid-template-columns: repeat(2, 1fr); }.topbar-actions { gap: .3rem; }.translate { max-width: 145px; overflow: hidden; text-overflow: ellipsis; }.landing-copy { padding: 4rem 2rem; }.landing-copy .kicker { margin-top: 3rem; }.flow-orbit { height: 430px; }.flow-core { width: 150px; height: 150px; }.landing-metrics { grid-template-columns: 1fr; }.landing-metrics > div { padding: .8rem 1rem; }.visual-top { flex-direction: column; } }
@media (max-width: 520px) { .landing-copy h1 { font-size: 2.55rem; }.landing-copy, .landing-visual { padding-right: 1.15rem; padding-left: 1.15rem; }.landing-visual { min-height: 610px; }.flow-orbit { width: 100%; height: 360px; }.flow-core { width: 125px; height: 125px; }.flow-core strong { font-size: 1.05rem; }.orbit-node { font-size: .62rem; }.node-retail { top: 1%; left: 5%; }.node-finance { top: 15%; right: -4%; }.node-assets { right: -2%; bottom: 12%; }.node-people { bottom: 3%; left: -2%; }.header-field { display: none; }.translate { width: 105px; }.grid.four, .option-grid, .module-tiles, .agent-grid-card { grid-template-columns: 1fr; }.route-steps { grid-template-columns: 1fr; }.role-list { grid-template-columns: 1fr; }.data-table { font-size: .67rem; }.data-table th, .data-table td { padding: .55rem; }.case-card-head, .case-meta { align-items: flex-start; flex-direction: column; } }