html { scroll-padding-top: 92px; }
h1, h2, h3, h4 { font-family: Montserrat, Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: -0.01em; }
.bg-c360-arrow { background-image: linear-gradient(90deg, #214C9C 0%, #3B88C8 35%, #2E77BA 65%, #264E9D 100%); }
.text-c360-arrow { background-image: linear-gradient(90deg, #214C9C 0%, #3B88C8 35%, #2E77BA 65%, #264E9D 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.btn-primary { background-image: linear-gradient(90deg, #214C9C 0%, #3B88C8 35%, #2E77BA 65%, #264E9D 100%); }
.btn-primary:hover { background-image: none; }
.c360-arc-divider { height: 4px; border-radius: 999px; background: linear-gradient(90deg, #2F2D2E 0%, #747578 20%, #C6C7C9 50%, #747578 80%, #2F2D2E 100%); }
.c360-tagline { font-family: Montserrat, Inter, system-ui, sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: .2em; }
html, body { overflow-x: clip; }
/* Keep wide tables/mocks scrolling inside their cards instead of expanding the page */
.grid > *,
[class*="grid-cols-"] > * { min-width: 0; }
.overflow-x-auto,
.no-scrollbar { max-width: 100%; }
img, video, canvas { max-width: 100%; height: auto; }
.bg-grid {
background-image: linear-gradient(to right, rgba(29,64,124,.05) 1px, transparent 1px),
linear-gradient(to bottom, rgba(29,64,124,.05) 1px, transparent 1px);
background-size: 44px 44px;
-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
}
.bg-grid-dark {
background-image: linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
background-size: 48px 48px;
-webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 75%);
mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 75%);
}
.bg-dots { background-image: radial-gradient(rgba(42,112,182,.16) 1px, transparent 1px); background-size: 18px 18px; }
.chat-bg { background-color:#F4F7FB; background-image: radial-gradient(rgba(29,64,124,.045) 1px, transparent 1px); background-size: 14px 14px; }
/* ===== Site header (cops360.in markup, COPS360 brand styling) ===== */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; background: rgba(255,255,255,.92); -webkit-backdrop-filter: saturate(160%) blur(10px); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid transparent; transition: border-color .25s, box-shadow .25s; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.site-header.scrolled, .site-header.mega-open { border-color: #E6ECF4; box-shadow: 0 6px 24px -14px rgba(29,64,124,.25); }
.site-header .container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.site-header .nav { height: 76px; display: flex; align-items: center; gap: 20px; }
.site-header .logo { display: inline-flex; flex-shrink: 0; border-radius: 8px; }
.site-header .logo-img { width: 136px; height: auto; display: block; }
.site-header .nav-links { display: flex; align-items: center; gap: 2px; margin: 0 auto; }
.site-header .nav-item { position: static; }
.site-header .nav-link { display: inline-flex; align-items: center; gap: 6px; padding: 9px 11px; border-radius: 8px; font-size: 14px; font-weight: 500; color: #1D407C; text-decoration: none; white-space: nowrap; transition: background-color .15s, color .15s; }
.site-header .nav-link:hover, .site-header .nav-item.active > .nav-link { background: #EEF3FA; color: #214C9C; }
.site-header .caret { display: inline-block; width: 6px; height: 6px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; opacity: .75; }
.site-header .nav-item.active .caret { transform: translateY(1px) rotate(-135deg); }
.site-header .ai-link { font-weight: 600; }
.site-header .ai-link, .site-header .ai-link:hover { background-image: linear-gradient(90deg, #214C9C 0%, #3B88C8 35%, #2E77BA 65%, #264E9D 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.site-header .ai-spark { color: #3B88C8; -webkit-text-fill-color: #3B88C8; }
.site-header .nav-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.site-header .login-link { font-size: 14px; font-weight: 600; color: #1D407C; text-decoration: none; white-space: nowrap; }
.site-header .login-link:hover { color: #2A70B6; }
.site-header .nav-sep { width: 1px; height: 20px; background: #E6ECF4; }
.site-header .btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; padding: 10px 18px; font-family: Montserrat, Inter, system-ui, sans-serif; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color .15s, color .15s; }
.site-header .btn-outline { color: #1D407C; box-shadow: inset 0 0 0 1.5px #1D407C; }
.site-header .btn-outline:hover { background: #1D407C; color: #fff; }
.site-header a:focus-visible, .site-header button:focus-visible { outline: 2px solid #2A70B6; outline-offset: 2px; }
.site-header .menu-toggle { display: none; width: 42px; height: 42px; border: 1px solid #E6ECF4; border-radius: 8px; background: #fff; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.site-header .menu-toggle span { display: block; width: 18px; height: 2px; border-radius: 2px; background: #1D407C; transition: transform .25s, opacity .2s; }
.site-header .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-header .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-header .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* Mega menus */
.site-header .mega-layer { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid #E6ECF4; box-shadow: 0 30px 60px -24px rgba(29,64,124,.30); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s, transform .18s, visibility 0s linear .18s; max-height: calc(100vh - 76px); overflow-y: auto; }
.site-header .mega-layer.open { opacity: 1; visibility: visible; transform: none; transition: opacity .18s, transform .18s; }
.site-header .mega-panel { display: none; max-width: 1240px; margin: 0 auto; padding: 26px 20px 28px; }
.site-header .mega-panel.open { display: block; }
.site-header .mega-panel a { text-decoration: none; }
.site-header .mega-cols { display: grid; grid-template-columns: minmax(0,3fr) minmax(0,1fr); gap: 32px; }
.site-header .mega-col-title, .site-header .who-kicker { font-family: Montserrat, Inter, sans-serif; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .2em; color: #203971; margin: 0 0 12px; }
.site-header .prod-mega { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px 26px; }
.site-header .prod-col { display: flex; flex-direction: column; gap: 10px; }
.site-header .prod-col-title { display: flex; align-items: center; gap: 6px; min-height: 20px; margin: 0 0 6px; padding: 0 8px; font-family: Montserrat, Inter, sans-serif; font-size: 13px; font-weight: 700; color: #1D407C; }
.site-header .prod-col-title i { width: 6px; height: 6px; border-right: 1.6px solid #2A70B6; border-top: 1.6px solid #2A70B6; transform: rotate(45deg); }
.site-header a.prod-col-title:hover { color: #2A70B6; }
.site-header .prod-link, .site-header .who-link, .site-header .tool-links a, .site-header .ind-item { display: flex; align-items: center; gap: 12px; padding: 5px 8px; border-radius: 10px; font-size: 13px; line-height: 1.35; color: #1A2230; transition: background-color .15s, color .15s; }
.site-header .prod-link:hover, .site-header .who-link:hover, .site-header .tool-links a:hover, .site-header .ind-item:hover, .site-header .feat-item:hover { background: #F4F7FB; color: #1D407C; }
.site-header .prod-ico, .site-header .ind-ico, .site-header .sol-ico { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; background: #EEF3FA !important; color: #2A70B6 !important; box-shadow: inset 0 0 0 1px #DCE6F3; }
.site-header .prod-ico svg, .site-header .ind-ico svg, .site-header .sol-ico svg { width: 16px; height: 16px; }
.site-header .product-mega .mega-cols { grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); gap: 28px 36px; align-items: start; }
.site-header .product-mega .mega-col.product-pages { padding-right: 8px; }
.site-header .product-mega .product-side { display: flex; flex-direction: column; gap: 6px; padding: 4px 0 4px 28px; border-left: 1px solid #E6ECF4; }
.site-header .product-mega .prod-link { min-height: 32px; padding: 8px 10px; font-size: 13px; }
.site-header .product-mega .prod-link .prod-ico { width: 30px; height: 30px; border-radius: 9px; }
.site-header .product-mega .prod-link:hover { background: #F4F7FB; }
.site-header .mega-see { display: inline-flex; margin-top: 14px; padding: 0 8px; font-family: Montserrat, Inter, sans-serif; font-size: 13px; font-weight: 600; color: #2A70B6; }
.site-header .mega-see:hover { color: #1D407C; }
.site-header .who-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 340px)); gap: 40px; }
.site-header .who-field { display: flex; align-items: center; gap: 8px; }
.site-header .who-pill { display: inline-flex; padding: 3px 10px; border-radius: 999px; background: #EEF3FA; color: #214C9C; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.site-header .who-pill:hover { background: #DCE6F3; }
.site-header .feat-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 2px 18px; }
.site-header .dl-grid { gap: 14px; }
.site-header .feat-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: 12px; border: 1px solid #E6ECF4; color: #1A2230; transition: background-color .15s, border-color .15s; }
.site-header .feat-item:hover { border-color: #BCD0E8; }
.site-header .feat-item strong { display: block; font-family: Montserrat, Inter, sans-serif; font-size: 14px; font-weight: 700; color: #1D407C; }
.site-header .feat-item em { display: block; margin-top: 2px; font-style: normal; font-size: 12.5px; color: #586068; }
.site-header .tools-cols { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr) minmax(0,1fr); gap: 32px; }
.site-header .tool-links { display: grid; gap: 2px; }
.site-header .tool-links.two { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2px 16px; }
/* Mobile drawer (built from the same markup by script) */
.site-header .mobile-menu { display: none; }
@media (max-width: 1199px) {
.site-header .nav-links, .site-header .login-link, .site-header .nav-sep, .site-header .mega-layer { display: none; }
.site-header .nav { justify-content: space-between; }
.site-header .menu-toggle { display: inline-flex; }
.site-header .mobile-menu { display: block; max-height: 0; overflow: hidden; transition: max-height .3s ease; background: #fff; }
.site-header .mobile-menu.open { max-height: calc(100vh - 76px); overflow-y: auto; border-top: 1px solid #E6ECF4; }
.site-header .mm-inner { padding: 8px 16px 20px; }
.site-header .mm-row, .site-header .mm-group > button { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 13px 4px; border: 0; border-bottom: 1px solid #E6ECF4; background: none; font: 600 15px/1.2 Inter, system-ui, sans-serif; color: #1D407C; text-decoration: none; cursor: pointer; text-align: left; }
.site-header .mm-row { justify-content: flex-start; gap: 8px; }
.site-header .mm-group > button .caret { transform: rotate(45deg); }
.site-header .mm-group.open > button .caret { transform: rotate(-135deg); }
.site-header .mm-links { display: none; padding: 6px 0 10px; }
.site-header .mm-group.open .mm-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 0 12px; }
.site-header .mm-links a { padding: 8px 6px; font-size: 14px; color: #1A2230; text-decoration: none; border-radius: 6px; }
.site-header .mm-links a:hover { background: #F4F7FB; }
.site-header .mm-links a.mm-head { font-weight: 700; color: #1D407C; }
.site-header .mm-actions { display: grid; gap: 10px; margin-top: 16px; }
.site-header .mm-actions a { display: flex; justify-content: center; padding: 12px; border-radius: 8px; font: 600 14px/1 Montserrat, Inter, sans-serif; text-decoration: none; }
.site-header .mm-actions .mm-primary { color: #fff; background-image: linear-gradient(90deg, #214C9C 0%, #3B88C8 35%, #2E77BA 65%, #264E9D 100%); }
.site-header .mm-actions .mm-secondary { color: #1D407C; box-shadow: inset 0 0 0 1.5px #1D407C; }
}
@media (max-width: 1024px) {
.site-header .product-mega .mega-cols { grid-template-columns: minmax(0, 1fr); }
.site-header .product-mega .mega-col.product-pages { padding-right: 0; margin-bottom: 0; }
.site-header .product-mega .product-side { padding: 8px 0 0; border-left: 0; border-top: 1px solid #E6ECF4; }
.site-header .prod-mega { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
.site-header .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-header .tools-cols { grid-template-columns: minmax(0, 1fr); gap: 22px; }
.site-header .who-cols { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 480px) {
.site-header .nav-actions .btn-outline { display: none; }
.site-header .logo-img { width: 120px; }
.site-header .container { padding: 0 14px; }
.site-header .prod-mega { grid-template-columns: minmax(0, 1fr); }
.site-header .feat-grid { grid-template-columns: minmax(0, 1fr); }
}
/* Feature-page mobile polish */
@media (max-width: 639px) {
#main > section { overflow-x: clip; }
#main h1 { font-size: clamp(1.7rem, 8vw, 2.35rem) !important; line-height: 1.15 !important; }
#main .h2 { font-size: clamp(1.45rem, 6.5vw, 1.9rem) !important; }
#main > section:first-of-type .btn-primary,
#main > section:first-of-type .btn-secondary,
#main > section:last-of-type .btn-primary,
#main > section:last-of-type .btn-secondary { width: 100%; max-width: 100%; }
.hero-trust { flex-wrap: wrap; justify-content: center; row-gap: 6px; }
}
/* Reveal */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }
/* Floating */
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.float-a { animation: floatY 6s ease-in-out infinite; }
.float-b { animation: floatY 7s ease-in-out .8s infinite; }
.float-c { animation: floatY 8s ease-in-out 1.6s infinite; }
.float-slow { animation: floatY 10s ease-in-out infinite; }
.hero-glow { position:absolute; inset: 6% 4%; background: radial-gradient(closest-side, rgba(42,112,182,.38), rgba(33,76,156,.18) 55%, transparent); filter: blur(42px); animation: glowPulse 8s ease-in-out infinite; pointer-events:none; }
@keyframes glowPulse { 0%,100% { opacity:.7; transform: scale(1); } 50% { opacity:1; transform: scale(1.05); } }
.pulse-dot { position: relative; }
.pulse-dot::after { content:""; position:absolute; inset:-3px; border-radius:9999px; background: currentColor; opacity:.35; animation: ping 1.8s cubic-bezier(0,0,.2,1) infinite; }
@keyframes ping { 75%,100% { transform: scale(2.2); opacity: 0; } }
.typing-caret::after { content:""; display:inline-block; width:2px; height:1em; background:#2A70B6; margin-left:2px; vertical-align:-2px; animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }
/* Intro flow */
.flow-dot { position:absolute; left:50%; width:9px; height:9px; margin-left:-4.5px; border-radius:9999px; background:#2A70B6; box-shadow: 0 0 0 4px rgba(42,112,182,.18), 0 0 14px rgba(42,112,182,.7); animation: flowDown 5.5s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes flowDown { 0% { top:0; opacity:0; } 8% { opacity:1; } 92% { opacity:1; } 100% { top:100%; opacity:0; } }
/* Waveform */
.wave-bar { flex: 1 1 0; min-width: 2px; border-radius: 3px; transition: background-color .2s; transform-origin: center; }
.playing .wave-bar.active { animation: wave .9s ease-in-out infinite; }
@keyframes wave { 50% { transform: scaleY(.55); } }
.ring-progress { transition: stroke-dashoffset 1.6s cubic-bezier(.2,.7,.2,1); }
/* Workflow */
.wf-fill { transform-origin: left; transform: scaleX(0); transition: transform 2s cubic-bezier(.2,.7,.2,1) .2s; }
.wf-fill-v { transform-origin: top; transform: scaleY(0); transition: transform 2s cubic-bezier(.2,.7,.2,1) .2s; }
.in .wf-fill { transform: scaleX(1); }
.in .wf-fill-v { transform: scaleY(1); }
.wf-step { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.in .wf-step { opacity: 1; transform: none; }
/* Ecosystem */
.eco-node { position:absolute; transform: translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:6px; z-index: 2; }
.eco-line { stroke-dasharray: 1.2 1.4; animation: dash 4s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -26; } }
.spin-slow { animation: spin 60s linear infinite; transform-origin: 50% 50%; }
@keyframes spin { to { transform: rotate(360deg); } }
/* AI cards */
.ai-card { position: relative; overflow: hidden; }
.ai-card::before { content:""; position:absolute; inset:0; background: radial-gradient(420px circle at var(--x,50%) var(--y,0%), rgba(59,136,200,.18), transparent 42%); opacity:0; transition: opacity .3s; pointer-events:none; }
.ai-card:hover::before { opacity: 1; }
mark.kw { background: linear-gradient(transparent 55%, rgba(59,136,200,.35) 55%); color: inherit; padding: 0 1px; border-radius: 2px; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }
.shimmer { background: linear-gradient(90deg, #EEF3FA 0%, #DCE6F3 40%, #EEF3FA 80%); background-size: 200% 100%; animation: shimmer 1.1s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.doc-flash { animation: docFlash 1.1s ease; }
@keyframes docFlash { 0% { box-shadow: 0 0 0 0 rgba(42,112,182,.45); } 100% { box-shadow: 0 0 0 22px rgba(42,112,182,0); } }
.cta-orb { position:absolute; border-radius:9999px; filter: blur(70px); opacity:.55; pointer-events:none; }
@keyframes orbMove { 0%,100% { transform: translate(0,0); } 50% { transform: translate(40px,-30px); } }
.orb-move { animation: orbMove 14s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
.reveal, .wf-step { opacity: 1 !important; transform: none !important; }
}
/* ===== Shared feature-page styles ===== */
.sub { font-family: Montserrat, Inter, system-ui, sans-serif; font-weight: 600; font-size: 1.125rem; line-height: 1.4; color: #203971; }
@media (min-width: 640px) { .sub { font-size: 1.25rem; } }
.tick-list { display: grid; gap: .8rem; }
.tick-list li { display: flex; align-items: flex-start; gap: .75rem; font-size: 15px; line-height: 1.55; color: #475569; }
.tick-list li i { flex-shrink: 0; margin-top: .22rem; color: #2A70B6; }
.tick-dark li { color: #DCE6F3; }
.tick-dark li i { color: #93B5DB; }
.note { position: relative; padding: 1rem 1.25rem; border-left: 4px solid #3B88C8; border-radius: 0 12px 12px 0; background: #fff; box-shadow: 0 1px 2px rgba(29,64,124,.06), 0 2px 8px rgba(29,64,124,.06); font-size: 15px; line-height: 1.6; color: #1A2230; font-weight: 500; }
.bg-mist .note, #verification .note { background: #fff; }
.note-dark { background: rgba(255,255,255,.08) !important; color: #fff; box-shadow: none; border-left-color: #93B5DB; }
.cl-item { display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; border: 1px solid #E6ECF4; border-radius: 10px; cursor: pointer; transition: border-color .15s, background-color .15s; }
.cl-item:hover { border-color: #BCD0E8; background: #F8FAFD; }
.cl-item input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cl-box { display: grid; place-items: center; flex-shrink: 0; width: 20px; height: 20px; border-radius: 6px; border: 2px solid #CBD5E1; background: #fff; color: transparent; font-size: 10px; transition: all .15s; }
.cl-item input:checked + .cl-box { border-color: #10B981; background: #10B981; color: #fff; }
.cl-item input:focus-visible + .cl-box { outline: 2px solid #2A70B6; outline-offset: 2px; }
.cl-text { flex: 1; min-width: 0; color: #1A2230; font-weight: 500; }
.cl-item input:checked ~ .cl-text { color: #94A3B8; text-decoration: line-through; }
.cl-meta { font-size: 11px; font-weight: 600; color: #64748B; font-variant-numeric: tabular-nums; }
.ai-step { display: flex; align-items: center; gap: .65rem; padding: .5rem .65rem; border: 1px solid #E6ECF4; border-radius: 10px; background: #fff; color: #1A2230; }
.ai-step > span { display: grid; place-items: center; flex-shrink: 0; width: 20px; height: 20px; border-radius: 6px; background: #EEF3FA; color: #214C9C; font-size: 10px; font-weight: 700; }
.ai-step.pop { animation: stepIn .45s cubic-bezier(.2,.7,.2,1) both; }
@keyframes stepIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.voice-wave span { flex: 1 1 0; min-width: 2px; border-radius: 2px; background: #93B5DB; transform-origin: center; }
.voice-wave.playing span { animation: wave 1s ease-in-out infinite; }
/* ===== Field tracking page ===== */
.status { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; border-radius: 999px; padding: 2px 8px; font-size: 10px; font-weight: 600; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.st-move { background: #EEF3FA; color: #214C9C; }
.st-at, .st-ok { background: #ECFDF5; color: #047857; }
.st-warn { background: #FFFBEB; color: #B45309; }
.st-bad { background: #FFF1F2; color: #BE123C; }
.st-off { background: #F1F5F9; color: #475569; }
.kpi { border-radius: 12px; background: #F4F7FB; padding: .75rem .85rem; min-width: 0; }
.kpi-label { font-size: 10.5px; font-weight: 600; color: #64748B; }
.kpi-val { margin-top: 2px; font-family: Montserrat, Inter, sans-serif; font-size: 1.35rem; font-weight: 800; color: #1D407C; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi-sub { font-size: 10.5px; color: #64748B; }
.tick-list li b { color: #1D407C; font-weight: 600; }
.tick-dark li b { color: #fff; }
/* Map */
.map { position: relative; overflow: hidden; border-radius: 12px; background: #E8EEF6; isolation: isolate; }
.map-base, .map-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-base { z-index: 0; }
.map-lines { z-index: 1; pointer-events: none; }
.map-lines path, .map-lines polyline { vector-effect: non-scaling-stroke; }
.pin { --pc: #2A70B6; position: absolute; z-index: 3; display: flex; flex-direction: column; align-items: center; transform: translate(-50%, -100%); transition: opacity .25s, transform .25s; }
.pin-av { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; border: 2px solid #fff; background: var(--pc); color: #fff; font-size: 9.5px; font-weight: 700; box-shadow: 0 4px 10px -2px rgba(18,33,63,.35); }
.pin::after { content: ""; width: 2px; height: 7px; background: var(--pc); }
.pin-moving { --pc: #2A70B6; }
.pin-at { --pc: #059669; }
.pin-off { --pc: #94A3B8; }
.pin-cust { --pc: #1D407C; }
.pin-cust .pin-av { width: 24px; height: 24px; font-size: 10px; }
.pin.dim { opacity: .18; }
.pin.sel { transform: translate(-50%, -100%) scale(1.15); z-index: 4; }
.pin-moving .pin-av { position: relative; }
.pin-moving .pin-av::after { content: ""; position: absolute; inset: -5px; border-radius: 999px; border: 2px solid rgba(42,112,182,.45); animation: ping 1.8s cubic-bezier(0,0,.2,1) infinite; }
.stop { position: absolute; z-index: 3; display: grid; place-items: center; width: 24px; height: 24px; transform: translate(-50%, -50%); border-radius: 999px; border: 2px solid #fff; background: #1D407C; color: #fff; font-size: 10.5px; font-weight: 700; box-shadow: 0 4px 10px -2px rgba(18,33,63,.35); transition: left .5s, top .5s, background-color .2s; }
.stop-home { background: #586068; font-size: 10px; }
.zone { position: absolute; z-index: 2; aspect-ratio: 1; border-radius: 999px; transform: translate(-50%, -50%); background: rgba(42,112,182,.14); border: 2px dashed #2A70B6; transition: width .4s cubic-bezier(.2,.7,.2,1), background-color .3s, border-color .3s; }
.zone-ok { background: rgba(16,185,129,.12); border-color: #10B981; }
.zone-static { background: rgba(29,64,124,.10); border: 1.5px solid rgba(29,64,124,.45); }
.you-dot { position: absolute; z-index: 4; width: 14px; height: 14px; transform: translate(-50%, -50%); border-radius: 999px; background: #2A70B6; border: 3px solid #fff; box-shadow: 0 0 0 4px rgba(42,112,182,.25); transition: left .2s; }
.map-tag { position: absolute; z-index: 5; border-radius: 8px; background: rgba(255,255,255,.92); padding: 4px 8px; font-size: 10px; font-weight: 600; color: #334155; box-shadow: 0 1px 2px rgba(29,64,124,.08), 0 2px 8px rgba(29,64,124,.08); }
/* Phone frame */
.phone { position: relative; margin: 0 auto; width: 100%; max-width: 300px; border-radius: 2.2rem; border: 7px solid #12213F; background: #fff; box-shadow: 0 1px 2px rgba(29,64,124,.06), 0 30px 60px -24px rgba(29,64,124,.40); overflow: hidden; }
.phone-bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px 6px; font-size: 10px; font-weight: 600; color: #334155; }
.phone-notch { position: absolute; left: 50%; top: 6px; width: 64px; height: 16px; transform: translateX(-50%); border-radius: 999px; background: #12213F; }
/* Segmented tabs */
.seg { display: flex; gap: 4px; overflow-x: auto; border-radius: 12px; background: #F1F5F9; padding: 4px; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg-dark { background: rgba(255,255,255,.08); }
.seg-btn { flex: 1 1 0; white-space: nowrap; border-radius: 8px; padding: 6px 10px; font-size: 11.5px; font-weight: 600; color: #64748B; transition: background-color .15s, color .15s; }
.seg-btn:hover { color: #1D407C; }
.seg-btn[aria-selected="true"], .seg-btn[aria-checked="true"] { background: #fff; color: #1D407C; box-shadow: 0 1px 2px rgba(29,64,124,.08), 0 2px 8px rgba(29,64,124,.08); }
.seg-dark .seg-btn { color: #B4C3DD; }
.seg-dark .seg-btn:hover { color: #fff; }
.seg-btn:focus-visible, .stage-btn:focus-visible, .act-btn:focus-visible, #ci-range:focus-visible { outline: 2px solid #2A70B6; outline-offset: 1px; }
.act-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; border-radius: 8px; padding: 6px 10px; font-size: 11px; font-weight: 600; transition: background-color .15s, border-color .15s, color .15s; }
.act-ok { background: #1D407C; color: #fff; }
.act-ok:hover { background: #2A70B6; }
.act-ghost { border: 1px solid #E2E8F0; background: #fff; color: #334155; }
.act-ghost:hover { border-color: #BCD0E8; color: #1D407C; }
.act-ok:disabled { background: #CBD5E1; color: #fff; cursor: not-allowed; }
#ci-range { width: 100%; accent-color: #2A70B6; }
.stage-btn { white-space: nowrap; border-radius: 999px; border: 1px solid #E2E8F0; background: #fff; padding: 4px 10px; font-size: 11px; font-weight: 600; color: #64748B; transition: all .15s; }
.stage-btn:hover { border-color: #BCD0E8; color: #1D407C; }
.stage-btn.done { border-color: #BCD0E8; background: #EEF3FA; color: #214C9C; }
.stage-btn[aria-checked="true"] { border-color: #1D407C; background: #1D407C; color: #fff; }
.bar-col { display: flex; flex: 1 1 0; min-width: 0; flex-direction: column; align-items: center; gap: 6px; }
.bar-track { position: relative; display: flex; width: 100%; max-width: 34px; height: 120px; align-items: flex-end; }
.bar-fill { width: 100%; border-radius: 6px 6px 3px 3px; background: #2A70B6; transition: height .5s cubic-bezier(.2,.7,.2,1); }
.bar-flag .bar-fill { background: repeating-linear-gradient(45deg, #F59E0B 0 5px, #FCD34D 5px 9px); }
.tgt-row .tgt-track { position: relative; height: 10px; border-radius: 999px; background: #F1F5F9; }
.tgt-row .tgt-fill { height: 100%; border-radius: 999px; background: #2A70B6; transition: width .5s cubic-bezier(.2,.7,.2,1); }
.tgt-row .tgt-mark { position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: 2px; background: #1D407C; }
.tgt-over .tgt-fill { background: #10B981; }
.tgt-low .tgt-fill { background: #F59E0B; }
.cl-item { display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; border: 1px solid #E6ECF4; border-radius: 10px; cursor: pointer; transition: border-color .15s, background-color .15s; }
.cl-item:hover { border-color: #BCD0E8; background: #F8FAFD; }
.cl-item input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cl-box { display: grid; place-items: center; flex-shrink: 0; width: 20px; height: 20px; border-radius: 6px; border: 2px solid #CBD5E1; background: #fff; color: transparent; font-size: 10px; transition: all .15s; }
.cl-item input:checked + .cl-box { border-color: #10B981; background: #10B981; color: #fff; }
.cl-item input:focus-visible + .cl-box { outline: 2px solid #2A70B6; outline-offset: 2px; }
.cl-text { flex: 1; min-width: 0; color: #1A2230; font-weight: 500; }
.cl-item input:checked ~ .cl-text { color: #94A3B8; text-decoration: line-through; }
.tl { position: relative; display: grid; gap: 14px; padding-left: 22px; }
.tl::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: #E6ECF4; }
.tl-dot { position: absolute; left: -22px; top: 2px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 999px; border: 2px solid #fff; background: #2A70B6; color: #fff; font-size: 7px; box-shadow: 0 0 0 1px #DCE6F3; }
.sync-row { transition: background-color .3s, border-color .3s; }
.sync-row.synced { border-color: #A7F3D0; background: #F0FDF8; }
.sync-row.failed { border-color: #FECDD3; background: #FFF5F6; }
.spin { animation: spin 1s linear infinite; }
.ben { width: 100%; }
@media (min-width: 640px) { .ben { width: calc(50% - .5rem); } }
@media (min-width: 1024px) { .ben { width: calc(25% - .75rem); } }
.why-card { position: relative; overflow: hidden; border-radius: 1rem; border: 1px solid #E2E8F0; background: #fff; padding: 1.75rem; transition: transform .3s, box-shadow .3s; }
.why-card:hover { transform: translateY(-4px); box-shadow: 0 20px 25px -5px rgba(29,64,124,.10), 0 8px 10px -6px rgba(29,64,124,.10); }
.why-num { position: absolute; right: 1.25rem; top: .75rem; font-family: Montserrat, Inter, sans-serif; font-size: 3.75rem; line-height: 1; font-weight: 800; color: #F1F5F9; transition: color .3s; }
.why-card:hover .why-num { color: #EEF3FA; }
.tbl tbody tr { border-top: 1px solid #F1F5F9; }
.tbl tbody td { padding: 9px 8px 9px 0; vertical-align: middle; }
/* ===== Attendance & payroll page ===== */
.att-day { position: relative; display: grid; place-items: center; aspect-ratio: 1; min-width: 0; border-radius: 8px; font-size: 11px; font-weight: 600; transition: transform .15s, box-shadow .15s; }
.att-day:hover { transform: translateY(-1px); }
.att-day[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1D407C; }
.att-day:focus-visible { outline: 2px solid #2A70B6; outline-offset: 2px; }
.att-blank { aspect-ratio: 1; }
.att-key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.a-p { background: #ECFDF5; color: #047857; }
.a-hd { background: linear-gradient(135deg, #ECFDF5 50%, #FEF3C7 50%); color: #92400E; }
.a-l { background: #DCE6F3; color: #214C9C; }
.a-u { background: #FFE4E6; color: #BE123C; }
.a-wo { background: #F1F5F9; color: #94A3B8; }
.a-ho { background: #1D407C; color: #fff; }
.a-m { background: #FFFBEB; color: #B45309; box-shadow: inset 0 0 0 1.5px #F59E0B; }
.att-late::after { content: ""; position: absolute; top: 4px; right: 4px; width: 5px; height: 5px; border-radius: 999px; background: #F59E0B; }
.sh { display: inline-grid; place-items: center; min-width: 26px; border-radius: 6px; padding: 4px 2px; font-size: 10px; font-weight: 700; }
.sh-m { background: #DCE6F3; color: #214C9C; }
.sh-e { background: #E0E7FF; color: #3730A3; }
.sh-n { background: #1D407C; color: #fff; }
.sh-g { background: #ECFDF5; color: #047857; }
.sh-f { background: #FEF3C7; color: #92400E; }
.sh-wo { background: #F1F5F9; color: #94A3B8; }
.sh-chg { box-shadow: inset 0 0 0 1.5px #F59E0B; }
#ro-body td { text-align: center; }
#ro-body td:first-child { text-align: left; }
.cmp-row { display: flex; align-items: center; gap: .6rem; padding: .3rem 0; cursor: pointer; }
.cmp-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cmp-sw { position: relative; flex-shrink: 0; width: 28px; height: 16px; border-radius: 999px; background: #CBD5E1; transition: background-color .15s; }
.cmp-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
.cmp-row input:checked + .cmp-sw { background: #2A70B6; }
.cmp-row input:checked + .cmp-sw::after { transform: translateX(12px); }
.cmp-row input:focus-visible + .cmp-sw { outline: 2px solid #2A70B6; outline-offset: 2px; }
.cmp-row input:not(:checked) ~ b { color: #94A3B8; text-decoration: line-through; }
.oc-step { display: flex; align-items: center; gap: .6rem; padding: .45rem .65rem; border: 1px solid #E6ECF4; border-radius: 10px; background: #fff; color: #334155; }
.oc-step { animation: stepIn .45s cubic-bezier(.2,.7,.2,1) both; }
.oc-step i { width: 14px; text-align: center; }
.pm { display: inline-flex; border-radius: 999px; padding: 2px 8px; font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.pm-e { background: #DCE6F3; color: #214C9C; }
.pm-v { background: #F1F5F9; color: #475569; }
.pm-n { background: transparent; color: #CBD5E1; }
.ben-3 { width: 100%; }
@media (min-width: 640px) { .ben-3 { width: calc(50% - .5rem); } }
@media (min-width: 1024px) { .ben-3 { width: calc(33.333% - .67rem); } }
/* ===== Customer management page ===== */
.av { display: inline-grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 999px; color: #fff; font-size: 11px; font-weight: 700; }
.av-lg { width: 42px; height: 42px; border-radius: 12px; font-size: 13px; }
.var-chip { display: inline-flex; border-radius: 6px; border: 1px dashed #93B5DB; background: #EEF3FA; padding: 1px 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; color: #214C9C; }
.bub { position: relative; max-width: 86%; border-radius: 10px; padding: 6px 9px 14px; line-height: 1.4; color: #1A2230; box-shadow: 0 1px 1px rgba(0,0,0,.06); white-space: pre-line; }
.bub-in { align-self: flex-start; background: #fff; border-top-left-radius: 2px; }
.bub-out { align-self: flex-end; background: #DCF8C6; border-top-right-radius: 2px; }
.bub-t { position: absolute; right: 7px; bottom: 2px; font-size: 9px; color: #64748B; white-space: nowrap; }
.bub-tag { display: block; margin-bottom: 3px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #0F5C4C; }
.bub.pop { animation: stepIn .4s cubic-bezier(.2,.7,.2,1) both; }
.wa-tpl { display: flex; align-items: center; gap: 8px; width: 100%; border: 1px solid #E2E8F0; border-radius: 10px; background: #fff; padding: 8px 10px; text-align: left; font-size: 12px; font-weight: 600; color: #334155; transition: border-color .15s, background-color .15s, color .15s; }
.wa-tpl i { width: 16px; text-align: center; color: #2A70B6; }
.wa-tpl:hover { border-color: #BCD0E8; background: #F8FAFD; color: #1D407C; }
.wa-tpl:focus-visible, .mt-mk:focus-visible { outline: 2px solid #2A70B6; outline-offset: 1px; }
.doc { border-radius: 12px; border: 1px solid #E6ECF4; background: #fff; padding: 14px; box-shadow: 0 1px 2px rgba(29,64,124,.04); }
.pri { flex-shrink: 0; border-radius: 999px; padding: 2px 8px; font-size: 10px; font-weight: 600; }
.pri-h { background: #FFF1F2; color: #BE123C; }
.pri-m { background: #FFFBEB; color: #B45309; }
.pri-l { background: #F1F5F9; color: #475569; }
.hub { position: relative; }
.hub-center { margin: 0 auto 14px; width: max-content; text-align: center; }
.hub-center > span { margin: 0 auto; box-shadow: 0 0 0 6px #EEF3FA, 0 10px 24px -8px rgba(33,76,156,.5); }
.hub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 640px) { .hub-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.int-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; border: 1px solid #E6ECF4; border-radius: 12px; background: #fff; padding: 10px 6px; text-align: center; font-size: 11px; font-weight: 600; color: #334155; transition: transform .2s, box-shadow .2s; }
.int-tile:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(42,112,182,.20), 0 12px 24px -12px rgba(33,76,156,.45); }
.int-tile i { font-size: 16px; color: #2A70B6; }
.int-tile em { font-style: normal; font-size: 9.5px; font-weight: 600; color: #94A3B8; }
.int-tile em.int-on { color: #047857; }
.db-bar { flex: 1 1 0; min-width: 0; border-radius: 6px 6px 3px 3px; background: #2A70B6; transition: height .5s cubic-bezier(.2,.7,.2,1); }
.db-bar.cur { background: linear-gradient(180deg, #3B88C8, #214C9C); }
.tbl tbody tr.row-hide { display: none; }
/* ===== Business modules page ===== */
.kf-label { margin-top: 1.75rem; font-family: Montserrat, Inter, system-ui, sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; color: #2A70B6; }
.note b { color: #1D407C; font-weight: 700; }
.ws-tile { display: flex; align-items: center; gap: 10px; min-width: 0; border: 1px solid #E6ECF4; border-radius: 12px; background: #fff; padding: 10px; transition: border-color .15s, box-shadow .15s; }
.ws-tile > i { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; background: #EEF3FA; color: #2A70B6; font-size: 12px; }
.ws-tile > span { display: flex; min-width: 0; flex-direction: column; }
.ws-tile b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 700; color: #1A2230; }
.ws-tile em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: normal; font-size: 10.5px; font-weight: 600; color: #64748B; }
.mod-card { position: relative; display: flex; flex-direction: column; gap: 14px; min-height: 160px; border: 1px solid #E2E8F0; border-radius: 1rem; background: #fff; padding: 1.4rem; transition: transform .3s, box-shadow .3s, border-color .3s; }
.mod-card:hover { transform: translateY(-4px); border-color: #BCD0E8; box-shadow: 0 20px 25px -5px rgba(29,64,124,.10), 0 8px 10px -6px rgba(29,64,124,.10); }
.mod-card:focus-visible { outline: 2px solid #2A70B6; outline-offset: 2px; }
.mod-card b { font-family: Montserrat, Inter, sans-serif; font-size: 15px; line-height: 1.35; font-weight: 700; color: #1D407C; padding-right: 1.5rem; }
.mod-num { position: absolute; right: 1.1rem; top: .9rem; font-family: Montserrat, Inter, sans-serif; font-size: 12px; font-weight: 700; color: #94A3B8; }
.mod-go { position: absolute; right: 1.1rem; bottom: 1.1rem; font-size: 11px; color: #93B5DB; transition: transform .2s, color .2s; }
.mod-card:hover .mod-go { color: #2A70B6; transform: translateY(2px); }
.ftree { display: flex; align-items: center; gap: 7px; border-radius: 6px; padding: 4px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ver { display: flex; width: 100%; align-items: center; gap: 10px; border: 1px solid #E6ECF4; border-radius: 10px; background: #fff; padding: 7px 10px; text-align: left; font-size: 11.5px; transition: border-color .15s, background-color .15s; }
.ver:hover { border-color: #BCD0E8; background: #F8FAFD; }
.ver[aria-checked="true"] { border-color: #2A70B6; background: #EEF3FA; box-shadow: inset 3px 0 0 #2A70B6; }
.ver:focus-visible { outline: 2px solid #2A70B6; outline-offset: 1px; }
.ver-tag { display: grid; place-items: center; flex-shrink: 0; min-width: 28px; height: 22px; border-radius: 6px; background: #1D407C; color: #fff; font-size: 10px; font-weight: 700; }
.ver-old .ver-tag { background: #E6ECF4; color: #475569; }
.ver.pop { animation: stepIn .45s cubic-bezier(.2,.7,.2,1) both; }
.dept-row { display: grid; grid-template-columns: 64px 1fr 62px; align-items: center; gap: 8px; color: #475569; font-weight: 600; }
.dept-row b { text-align: right; color: #1D407C; font-variant-numeric: tabular-nums; }
.dept-track { height: 8px; border-radius: 999px; background: #F1F5F9; overflow: hidden; }
.dept-track > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #214C9C, #3B88C8); }
.seg-n { margin-left: 2px; font-size: 10px; font-weight: 600; color: #94A3B8; }
.qr { display: grid; place-items: center; flex-shrink: 0; width: 56px; height: 56px; border-radius: 10px; border: 1px solid #E6ECF4; background: #fff; color: #12213F; font-size: 38px; }
.tbl tbody tr.as-row { cursor: pointer; transition: background-color .15s; }
.tbl tbody tr.as-row:hover { background: #F8FAFD; }
.tbl tbody tr.as-row.sel { background: #EEF3FA; }
.tbl tbody tr.as-row:focus-visible { outline: 2px solid #2A70B6; outline-offset: -2px; }
.bm-item { display: flex; align-items: flex-start; gap: 10px; min-width: 0; border: 1px solid #E6ECF4; border-radius: 12px; background: #fff; padding: 10px; transition: border-color .15s; }
.bm-item:hover { border-color: #BCD0E8; }
.bm-ico { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; background: #EEF3FA; color: #2A70B6; font-size: 12px; }
.bm-star { flex-shrink: 0; border-radius: 6px; padding: 2px 4px; color: #CBD5E1; font-size: 12px; transition: color .15s, transform .15s; }
.bm-star:hover { transform: scale(1.15); }
.bm-star[aria-pressed="true"] { color: #F59E0B; }
.bm-star:focus-visible { outline: 2px solid #2A70B6; outline-offset: 1px; }
.bm-tag { display: inline-flex; border-radius: 999px; background: #F1F5F9; padding: 1px 6px; font-size: 9.5px; font-weight: 600; color: #475569; }
.bm-broken { border-color: #FECDD3; background: #FFF8F9; }
.qt-item .cl-text small { display: block; font-size: 10.5px; font-weight: 500; color: #64748B; text-decoration: none; }
.qt-item.pop { animation: stepIn .45s cubic-bezier(.2,.7,.2,1) both; }
.qt-over { border-color: #FECDD3; background: #FFF8F9; }
.ch-side { display: flex; align-items: center; gap: 7px; border-radius: 7px; padding: 5px 8px; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-side.on { background: #EEF3FA; color: #1D407C; font-weight: 700; }
.msg { display: flex; gap: 9px; min-width: 0; }
.msg-body { min-width: 0; flex: 1; }
.msg-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 10.5px; color: #94A3B8; }
.msg-meta b { font-size: 12px; color: #1A2230; }
.msg-txt { margin-top: 2px; line-height: 1.5; color: #334155; }
.msg-quote { margin-top: 4px; border-left: 3px solid #BCD0E8; padding-left: 8px; font-size: 11px; color: #64748B; }
.msg-file { margin-top: 6px; display: inline-flex; max-width: 100%; align-items: center; gap: 8px; border: 1px solid #E6ECF4; border-radius: 10px; padding: 6px 10px; font-size: 11px; font-weight: 600; color: #334155; }
.msg-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mention { border-radius: 4px; background: #DCE6F3; padding: 0 3px; font-weight: 600; color: #214C9C; }
.msg-pin { border: 1px solid #FDE68A; border-radius: 10px; background: #FFFBEB; padding: 7px 10px; font-size: 11px; color: #92400E; }
.msg.pop { animation: stepIn .4s cubic-bezier(.2,.7,.2,1) both; }
.ext-badge { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; background: #FFF7ED; padding: 1px 7px; font-size: 9.5px; font-weight: 700; color: #C2410C; }
.perm { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; font-size: 10px; }
.perm-y { background: #ECFDF5; color: #047857; }
.perm-n { background: #F1F5F9; color: #CBD5E1; }
.perm-c { background: #FFFBEB; color: #B45309; }
#ad-body td:not(:first-child) { text-align: center; padding-right: 0; }
@media (max-width: 639px) {
.mod-card { min-height: 0; flex-direction: row; align-items: center; gap: 12px; padding: 1rem 2.75rem 1rem 1rem; }
.mod-card b { padding-right: 0; font-size: 14px; }
.mod-num { top: .6rem; right: .9rem; }
.mod-go { bottom: .7rem; right: .95rem; }
}
#admin .cmp-row input:not(:checked) ~ b { color: #64748B; text-decoration: none; }
/* ===== AI assistant page ===== */
.ai-ava { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 9px; color: #fff; font-size: 11px; background-image: linear-gradient(135deg, #214C9C 0%, #3B88C8 100%); box-shadow: 0 6px 14px -6px rgba(33,76,156,.6); }
.ai-ava-lg { width: 36px; height: 36px; border-radius: 11px; font-size: 14px; }
.me-ava { display: grid; place-items: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 999px; background: #586068; color: #fff; font-size: 10px; }
.convo { display: flex; flex-direction: column; gap: 12px; }
.q-row { display: flex; justify-content: flex-end; align-items: flex-end; gap: 8px; }
.q-bub { max-width: 85%; border-radius: 14px 14px 4px 14px; background: #1D407C; color: #fff; padding: 8px 12px; font-size: 12.5px; font-weight: 500; line-height: 1.45; }
.a-row { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.a-bub { flex: 1; min-width: 0; border: 1px solid #E6ECF4; border-radius: 4px 14px 14px 14px; background: #fff; padding: 10px 12px; font-size: 12px; line-height: 1.5; color: #334155; box-shadow: 0 1px 2px rgba(29,64,124,.05); }
.a-lead { font-weight: 600; color: #1A2230; }
.a-lead b, .a-bub b { color: #1D407C; }
.a-list { margin-top: 6px; display: grid; gap: 4px; }
.a-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-radius: 8px; background: #F8FAFD; padding: 5px 8px; min-width: 0; }
.a-list li > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-list li > b { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.a-mini { width: 100%; margin-top: 6px; font-size: 11.5px; }
.a-mini th { padding: 0 8px 4px 0; text-align: left; font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #94A3B8; }
.a-mini td { border-top: 1px solid #F1F5F9; padding: 5px 8px 5px 0; white-space: nowrap; }
.a-mini td.num, .a-mini th.num { text-align: right; padding-right: 0; font-variant-numeric: tabular-nums; }
.a-foot { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 10px; color: #94A3B8; }
.src-chip { display: inline-flex; align-items: center; gap: 4px; border-radius: 6px; background: #F1F5F9; padding: 1px 6px; font-size: 10px; font-weight: 600; color: #475569; white-space: nowrap; }
.src-chip i { font-size: 9px; color: #2A70B6; }
.perm-note { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; color: #047857; font-weight: 600; }
.q-row.pop, .a-row.pop, .think.pop { animation: stepIn .4s cubic-bezier(.2,.7,.2,1) both; }
.think { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #E6ECF4; border-radius: 4px 14px 14px 14px; background: #fff; padding: 8px 12px; font-size: 11.5px; color: #64748B; }
.think-dots { display: inline-flex; gap: 3px; }
.think-dots span { width: 5px; height: 5px; border-radius: 999px; background: #3B88C8; animation: thinkDot 1s ease-in-out infinite; }
.think-dots span:nth-child(2) { animation-delay: .15s; }
.think-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes thinkDot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.ask-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; border: 1px solid #BCD0E8; border-radius: 999px; background: #fff; padding: 5px 11px; text-align: left; font-size: 11.5px; font-weight: 600; color: #1D407C; transition: background-color .15s, border-color .15s, color .15s; }
.ask-chip i { font-size: 10px; color: #3B88C8; }
.ask-chip:hover { border-color: #2A70B6; background: #F4F7FB; }
.ask-chip[aria-pressed="true"] { border-color: #1D407C; background: #1D407C; color: #fff; }
.ask-chip[aria-pressed="true"] i { color: #BCD0E8; }
.ask-chip:focus-visible, .dlg-next:focus-visible, .act-tab:focus-visible, .cust-row:focus-visible { outline: 2px solid #2A70B6; outline-offset: 2px; }
.ask-bar { display: flex; align-items: center; gap: 8px; border: 1px solid #E2E8F0; border-radius: 12px; background: #fff; padding: 6px 6px 6px 12px; font-size: 12px; color: #94A3B8; }
.ask-bar .ask-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ask-bar .ask-text.filled { color: #1A2230; font-weight: 500; }
.ask-send { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; color: #fff; font-size: 11px; background-image: linear-gradient(90deg, #214C9C 0%, #3B88C8 100%); }
.feat-card { position: relative; display: flex; flex-direction: column; gap: 12px; min-height: 150px; border: 1px solid #E2E8F0; border-radius: 1rem; background: #fff; padding: 1.25rem; transition: transform .3s, box-shadow .3s, border-color .3s; }
.feat-card:hover { transform: translateY(-4px); border-color: #BCD0E8; box-shadow: 0 20px 25px -5px rgba(29,64,124,.10), 0 8px 10px -6px rgba(29,64,124,.10); }
.feat-card:focus-visible { outline: 2px solid #2A70B6; outline-offset: 2px; }
.feat-card b { font-family: Montserrat, Inter, sans-serif; font-size: 14.5px; line-height: 1.35; font-weight: 700; color: #1D407C; padding-right: 1.5rem; }
.feat-card:hover .mod-go { color: #2A70B6; transform: translateY(2px); }
.ex-q { display: flex; align-items: flex-start; gap: 10px; margin-top: 1.5rem; border: 1px solid #DCE6F3; border-radius: 14px; background: #fff; padding: 12px 14px; box-shadow: 0 1px 2px rgba(29,64,124,.05); }
.ex-q > i { display: grid; place-items: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; background: #EEF3FA; color: #2A70B6; font-size: 11px; }
.ex-q small { display: block; font-family: Montserrat, Inter, sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #2A70B6; }
.ex-q span { font-size: 14.5px; font-weight: 600; line-height: 1.45; color: #1D407C; }
.ex-q-dark { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.08); box-shadow: none; }
.ex-q-dark > i { background: rgba(255,255,255,.12); color: #BCD0E8; }
.ex-q-dark small { color: #93B5DB; }
.ex-q-dark span { color: #fff; }
.vs-card { border-radius: 1rem; border: 1px solid #E2E8F0; background: #fff; padding: 1.5rem; }
.vs-row { display: flex; align-items: center; gap: 10px; border-radius: 10px; padding: 9px 11px; font-size: 14px; font-weight: 500; }
.mod-pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #E6ECF4; border-radius: 999px; background: #fff; padding: 5px 11px; font-size: 12px; font-weight: 600; color: #334155; box-shadow: 0 1px 2px rgba(29,64,124,.05); }
.mod-pill i { font-size: 11px; color: #2A70B6; }
.stage { display: grid; grid-template-columns: 96px 1fr 40px; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; color: #475569; }
.stage b { text-align: right; color: #1D407C; font-variant-numeric: tabular-nums; }
.stage .dept-track { height: 10px; }
.stage.hl { color: #1D407C; }
.stage.hl .dept-track > span { background: linear-gradient(90deg, #B45309, #F59E0B); }
.visit-bar { position: relative; height: 8px; border-radius: 999px; background: #F1F5F9; overflow: hidden; }
.visit-bar > span { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, #214C9C, #3B88C8); }
.task-row { display: flex; align-items: center; gap: 10px; min-width: 0; border: 1px solid #E6ECF4; border-radius: 10px; background: #fff; padding: 8px 10px; font-size: 12px; }
.task-row .t-main { min-width: 0; flex: 1; }
.task-row .t-main b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: #1A2230; }
.task-row .t-main small { display: block; font-size: 10.5px; color: #64748B; }
.task-row.task-off { display: none; }
.task-row.over { border-color: #FECDD3; background: #FFF8F9; }
.cmp-bars { display: flex; align-items: flex-end; justify-content: space-around; gap: 14px; height: 150px; border-bottom: 1px solid #E2E8F0; padding: 0 6px; }
.cmp-group { display: flex; flex: 1; max-width: 90px; align-items: flex-end; justify-content: center; gap: 5px; height: 100%; }
.cmp-bar { position: relative; flex: 1; max-width: 30px; border-radius: 6px 6px 2px 2px; transition: height .8s cubic-bezier(.2,.7,.2,1); }
.cmp-bar.prev { background: #C6C7C9; }
.cmp-bar.cur { background: linear-gradient(180deg, #3B88C8, #214C9C); }
.cmp-bar em { position: absolute; left: 50%; top: -17px; transform: translateX(-50%); font-style: normal; font-size: 10px; font-weight: 700; color: #475569; font-variant-numeric: tabular-nums; }
.cmp-lbls { display: flex; justify-content: space-around; gap: 14px; padding: 6px 6px 0; font-size: 11px; font-weight: 600; color: #64748B; }
.cmp-lbls span { flex: 1; max-width: 90px; text-align: center; }
.lg-dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; vertical-align: -1px; }
.alert-item { display: flex; align-items: flex-start; gap: 10px; min-width: 0; border: 1px solid #E6ECF4; border-radius: 12px; background: #fff; padding: 10px 12px; font-size: 12px; transition: opacity .25s; }
.alert-item > i { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; font-size: 11px; }
.alert-item .al-main { min-width: 0; flex: 1; }
.alert-item .al-main b { display: block; font-weight: 600; color: #1A2230; }
.alert-item .al-main small { display: block; font-size: 10.5px; color: #64748B; }
.alert-item.off { display: none; }
.dlg { display: grid; gap: 8px; margin-top: 1.25rem; }
.dlg-step { display: grid; gap: 4px; border: 1px solid #E6ECF4; border-left-width: 4px; border-radius: 12px; background: #fff; padding: 10px 14px; font-size: 14px; line-height: 1.5; color: #64748B; transition: border-color .25s, background-color .25s, color .25s, box-shadow .25s; }
.dlg-step p { margin: 0; }
.dlg-step b { font-family: Montserrat, Inter, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #94A3B8; }
.dlg-step .dlg-u { color: #334155; font-weight: 600; }
.dlg-step.on { border-color: #BCD0E8; border-left-color: #2A70B6; background: #fff; color: #334155; box-shadow: 0 1px 2px rgba(29,64,124,.06), 0 8px 20px -12px rgba(29,64,124,.35); }
.dlg-step.on b { color: #2A70B6; }
.dlg-step.on .dlg-u { color: #1D407C; }
.dlg-next { display: inline-flex; align-items: center; gap: 6px; border-radius: 8px; background: #EEF3FA; padding: 6px 11px; font-size: 11.5px; font-weight: 600; color: #1D407C; transition: background-color .15s; }
.dlg-next:hover { background: #DCE6F3; }
.confirm-card { margin-top: 8px; border: 1px dashed #93B5DB; border-radius: 10px; background: #F8FAFD; padding: 8px 10px; }
.act-tab { display: flex; align-items: center; gap: 8px; width: 100%; border: 1px solid #E6ECF4; border-radius: 10px; background: #fff; padding: 8px 10px; text-align: left; font-size: 12px; font-weight: 600; color: #334155; transition: border-color .15s, background-color .15s, color .15s; }
.act-tab i { width: 16px; text-align: center; color: #2A70B6; }
.act-tab:hover { border-color: #BCD0E8; background: #F8FAFD; }
.act-tab[aria-selected="true"] { border-color: #2A70B6; background: #EEF3FA; color: #1D407C; box-shadow: inset 3px 0 0 #2A70B6; }
.act-panel[hidden] { display: none; }
.field-row { display: grid; grid-template-columns: 86px 1fr; gap: 8px; align-items: baseline; border-top: 1px solid #F1F5F9; padding: 6px 0; font-size: 11.5px; }
.field-row:first-child { border-top: 0; }
.field-row span { font-size: 10.5px; font-weight: 600; color: #94A3B8; }
.field-row b { min-width: 0; font-weight: 600; color: #1A2230; }
.cust-row { cursor: pointer; transition: background-color .15s; }
.cust-row:hover { background: #F8FAFD; }
.cust-row.sel { background: #EEF3FA; }
.ai-badge { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 2px 8px; font-size: 10px; font-weight: 700; color: #214C9C; background: #EEF3FA; }
@media (max-width: 639px) {
.feat-card { min-height: 0; flex-direction: row; align-items: center; gap: 12px; padding: 1rem 2.75rem 1rem 1rem; }
.feat-card b { padding-right: 0; font-size: 14px; }
.stage { grid-template-columns: 84px 1fr 34px; }
.field-row { grid-template-columns: 72px 1fr; }
}
/* ===== Purchase management page ===== */
.mock { position: relative; border-radius: 1rem; border: 1px solid rgba(226,232,240,.8); background: #fff; box-shadow: 0 1px 2px rgba(29,64,124,.06), 0 30px 60px -24px rgba(29,64,124,.30), 0 0 0 1px rgba(15,23,42,.04); }
.mock-head { display: flex; align-items: center; gap: .75rem; border-bottom: 1px solid #F1F5F9; padding: .75rem 1rem; }
.mi { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; background: #EEF3FA; color: #2A70B6; font-size: 12px; box-shadow: inset 0 0 0 1px #DCE6F3; }
.inv-paper { position: relative; overflow: hidden; border-radius: 10px; border: 1px solid #E6ECF4; background: #fff; padding: 14px; box-shadow: 0 1px 2px rgba(29,64,124,.06), 0 8px 20px -10px rgba(29,64,124,.25); }
.inv-paper::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, #214C9C, #3B88C8, #2E77BA, #264E9D); }
.inv-hl { border-radius: 3px; transition: background-color .3s, box-shadow .3s; }
.inv-hl.on { background: rgba(59,136,200,.16); box-shadow: 0 0 0 2px rgba(59,136,200,.16); }
.scan-beam { position: absolute; left: 0; right: 0; top: -20%; height: 38px; z-index: 1; pointer-events: none; opacity: 0; background: linear-gradient(180deg, transparent, rgba(59,136,200,.20) 70%, rgba(59,136,200,.55)); border-bottom: 2px solid #3B88C8; }
.scanning .scan-beam { animation: scanDown 2.6s cubic-bezier(.45,0,.55,1) 1; }
@keyframes scanDown { 0% { top: -20%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.xf { display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 8px; border-radius: 8px; border: 1px solid #F1F5F9; padding: 5px 8px; font-size: 11.5px; transition: border-color .3s, background-color .3s; }
.xf dt { color: #64748B; font-weight: 600; font-size: 10.5px; }
.xf dd { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #CBD5E1; font-weight: 600; }
.xf dd::before { content: ""; display: inline-block; width: 70%; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #EEF3FA 0%, #DCE6F3 40%, #EEF3FA 80%); background-size: 200% 100%; animation: shimmer 1.1s linear infinite; vertical-align: middle; }
.xf.done { border-color: #DCE6F3; background: #F8FAFD; }
.xf.done dd { color: #1A2230; }
.xf.done dd::before { display: none; }
.xf.done.pop { animation: stepIn .4s cubic-bezier(.2,.7,.2,1) both; }
.team-pill { display: flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid #E6ECF4; border-radius: 12px; background: #F8FAFD; padding: 10px 12px; font-family: Montserrat, Inter, sans-serif; font-size: 13.5px; font-weight: 700; color: #1D407C; }
.team-pill > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #fff; color: #2A70B6; font-size: 12px; box-shadow: inset 0 0 0 1px #DCE6F3; }
.flow { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0,1fr)); counter-reset: flow; }
@media (min-width: 768px) { .flow { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1024px) { .flow { grid-template-columns: repeat(6, minmax(0,1fr)); } }
.flow li { position: relative; counter-increment: flow; }
.flow a { display: flex; height: 100%; flex-direction: column; align-items: flex-start; gap: 4px; border: 1px solid #E6ECF4; border-radius: 14px; background: #fff; padding: 16px 14px 14px; text-decoration: none; transition: transform .25s, border-color .25s, box-shadow .25s; }
.flow a:hover { transform: translateY(-3px); border-color: #BCD0E8; box-shadow: 0 0 0 1px rgba(42,112,182,.20), 0 18px 44px -14px rgba(33,76,156,.45); }
.flow a:focus-visible { outline: 2px solid #2A70B6; outline-offset: 2px; }
.flow a::after { content: counter(flow, decimal-leading-zero); position: absolute; right: 12px; top: 10px; font-family: Montserrat, Inter, sans-serif; font-size: 11px; font-weight: 800; color: #BCD0E8; }
.flow b { margin-top: 8px; font-family: Montserrat, Inter, sans-serif; font-size: 14px; font-weight: 700; color: #1D407C; }
.flow em { font-style: normal; font-size: 12px; color: #64748B; }
.flow-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: #fff; background-image: linear-gradient(135deg, #3B88C8, #214C9C); box-shadow: 0 8px 18px -8px rgba(33,76,156,.6); }
@media (min-width: 1024px) {
.flow li:not(:last-child)::after { content: ""; position: absolute; right: -9px; top: 34px; z-index: 1; width: 8px; height: 8px; border-top: 2px solid #93B5DB; border-right: 2px solid #93B5DB; transform: rotate(45deg); }
}
.drop { display: flex; flex-direction: column; align-items: center; border: 1.5px dashed #93B5DB; border-radius: 12px; background: #F8FAFD; padding: 14px 10px; text-align: center; }
.up-file, .vn-row { display: flex; width: 100%; align-items: center; gap: 10px; border: 1px solid #E6ECF4; border-radius: 10px; background: #fff; padding: 8px 10px; text-align: left; transition: border-color .15s, background-color .15s; }
.up-file:hover, .vn-row:hover { border-color: #BCD0E8; background: #F8FAFD; }
.up-file[aria-selected="true"], .vn-row[aria-selected="true"] { border-color: #2A70B6; background: #EEF3FA; box-shadow: inset 3px 0 0 #2A70B6; }
.up-file:focus-visible, .vn-row:focus-visible, .range:focus-visible, .mock-input:focus-visible { outline: 2px solid #2A70B6; outline-offset: 1px; }
.up-file b, .vn-row b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: #1A2230; }
.up-file em, .vn-row em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: normal; font-size: 10.5px; color: #64748B; }
.ft { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 36px; border-radius: 6px; font-size: 8.5px; font-weight: 800; letter-spacing: .04em; color: #fff; }
.ft-pdf { background: #E11D48; }
.ft-img { background: #2A70B6; }
.ft-png { background: #7C3AED; }
.mock-input { font-size: 12px; font-weight: 600; color: #1A2230; }
.mock-input.edited { border-color: #F59E0B; background: #FFFBEB; }
.mock-input:disabled { color: #94A3B8; }
.up-field .mock-label { margin-bottom: 3px; }
.up-dup { display: flex; gap: 8px; margin-bottom: 10px; border: 1px solid #FECDD3; border-radius: 10px; background: #FFF1F2; padding: 8px 10px; font-size: 11.5px; line-height: 1.5; color: #9F1239; }
.up-dup[hidden] { display: none; }
.appr { display: flex; align-items: center; gap: 8px; border: 1px solid #E6ECF4; border-radius: 9px; background: #fff; padding: 5px 8px; }
.appr i { display: grid; place-items: center; flex-shrink: 0; width: 18px; height: 18px; border-radius: 999px; font-size: 8px; }
.appr em { font-style: normal; font-size: 10.5px; color: #94A3B8; white-space: nowrap; }
.appr-ok i { background: #10B981; color: #fff; }
.vf-flag { background: #FFFBEB; }
.ap-step { position: relative; display: flex; flex-direction: column; gap: 2px; border: 1px solid #E6ECF4; border-radius: 10px; background: #fff; padding: 8px 10px; font-size: 11.5px; transition: opacity .3s, border-color .3s, background-color .3s; }
.ap-step small { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #2A70B6; }
.ap-step b { color: #1A2230; }
.ap-step em { font-style: normal; font-size: 10.5px; color: #64748B; }
.ap-step.on { border-color: #93B5DB; background: #F4F7FB; }
.ap-step.off { opacity: .45; border-style: dashed; }
.ap-step.off small { color: #94A3B8; }
.range { -webkit-appearance: none; appearance: none; height: 6px; border-radius: 999px; background: linear-gradient(90deg, #2A70B6 var(--p, 15%), #E2E8F0 var(--p, 15%)); cursor: pointer; }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 999px; background: #fff; border: 3px solid #1D407C; box-shadow: 0 2px 6px rgba(29,64,124,.3); }
.range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 999px; background: #fff; border: 3px solid #1D407C; }
.bud-row { display: grid; grid-template-columns: 92px 1fr 104px; align-items: center; gap: 10px; font-size: 11.5px; }
.bud-row > span:first-child { font-weight: 600; color: #334155; }
.bud-row > b { text-align: right; color: #1D407C; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bud-row > b small { display: block; font-size: 10px; font-weight: 600; color: #94A3B8; }
.bud-track { position: relative; height: 12px; border-radius: 999px; background: #F1F5F9; }
.bud-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #3B88C8, #214C9C); transition: width .6s cubic-bezier(.2,.7,.2,1); }
.bud-hot .bud-fill { background: linear-gradient(90deg, #FBBF24, #F59E0B); }
.bud-track::after { content: ""; position: absolute; right: 0; top: -3px; bottom: -3px; width: 2px; border-radius: 2px; background: #12213F; }
@media (max-width: 420px) { .bud-row { grid-template-columns: 78px 1fr 88px; gap: 8px; } }
.cat-bar { display: flex; height: 10px; overflow: hidden; border-radius: 999px; }
.cat-bar span { display: block; height: 100%; }
.cat-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; }
.alert-row { display: flex; gap: 8px; border-radius: 10px; padding: 8px 10px; font-size: 11.5px; line-height: 1.45; }
.alert-row i { margin-top: 2px; }
.alert-amber { border: 1px solid #FDE68A; background: #FFFBEB; color: #78350F; }
.alert-rose { border: 1px solid #FECDD3; background: #FFF1F2; color: #881337; }
.stk { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) auto; align-items: center; gap: 10px; border: 1px solid #E6ECF4; border-radius: 10px; padding: 8px 10px; font-size: 11.5px; transition: background-color .4s, border-color .4s; }
.stk b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #1A2230; }
.stk em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: normal; font-size: 10.5px; color: #64748B; }
.stk-track { position: relative; height: 8px; border-radius: 999px; background: #F1F5F9; }
.stk-fill { height: 100%; border-radius: 999px; background: #10B981; transition: width .6s cubic-bezier(.2,.7,.2,1); }
.stk-low .stk-fill { background: #F59E0B; }
.stk-min { position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: 2px; background: #12213F; }
.stk-qty { margin-top: 3px; display: flex; justify-content: space-between; gap: 6px; font-size: 10px; color: #64748B; white-space: nowrap; }
.stk.flash { border-color: #A7F3D0; background: #F0FDF8; }
@media (max-width: 520px) { .stk { grid-template-columns: minmax(0,1fr) auto; } .stk > div:nth-child(2) { grid-column: 1 / -1; grid-row: 2; } }
.rp-bars { display: flex; height: 170px; align-items: flex-end; gap: 8px; border-bottom: 1px solid #E6ECF4; }
.rp-col { display: flex; flex: 1 1 0; min-width: 0; height: 100%; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.rp-col b { font-size: 10px; font-weight: 700; color: #1D407C; white-space: nowrap; }
.rp-col .db-bar { width: 100%; max-width: 44px; flex: none; }
.rp-lbls { display: flex; gap: 8px; margin-top: 6px; }
.rp-lbls span { flex: 1 1 0; min-width: 0; text-align: center; font-size: 10.5px; font-weight: 600; color: #64748B; }
.hbar { display: grid; grid-template-columns: 128px 1fr 76px; align-items: center; gap: 10px; font-size: 11.5px; }
.hbar > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: #334155; }
.hbar > b { text-align: right; color: #1D407C; font-variant-numeric: tabular-nums; }
.hbar-track { height: 10px; border-radius: 999px; background: #F1F5F9; overflow: hidden; }
.hbar-track > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #3B88C8, #214C9C); transition: width .6s cubic-bezier(.2,.7,.2,1); }
@media (max-width: 420px) { .hbar { grid-template-columns: 96px 1fr 64px; gap: 8px; } }
.vn-kv { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; }
.vn-kv > div { min-width: 0; border-radius: 9px; background: #F4F7FB; padding: 6px 8px; }
.vn-kv span { display: block; font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #94A3B8; }
.vn-kv b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: #1A2230; }
.vn-doc { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #E6ECF4; border-radius: 7px; background: #fff; padding: 3px 7px; font-size: 10.5px; font-weight: 600; color: #334155; }
.vn-doc i { color: #2A70B6; }
#assistant .mock { box-shadow: 0 30px 60px -24px rgba(0,0,0,.45); }
#assistant .a-bub .status { margin-left: 4px; }
.vn-pop { animation: stepIn .45s cubic-bezier(.2,.7,.2,1) both; }
.a-mini th.num + th, .a-mini td.num + td { padding-left: 12px; }
/* ===== Staff management page ===== */
html { scroll-padding-top: 146px; }
.ltr { display: inline-grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; color: #fff; font-family: Montserrat, Inter, sans-serif; font-size: 15px; font-weight: 800; background-image: linear-gradient(135deg, #3B88C8, #214C9C); box-shadow: 0 8px 18px -8px rgba(33,76,156,.6); }
.ltr-sm { width: 28px; height: 28px; border-radius: 8px; font-size: 13px; }
.kf-count { color: #94A3B8; letter-spacing: .1em; }
.req-row, .doc-row, .rq-item { display: flex; align-items: center; gap: 10px; min-width: 0; border: 1px solid #E6ECF4; border-radius: 10px; background: #fff; padding: 7px 10px; text-align: left; }
.req-row b, .doc-row b, .rq-item b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; color: #1A2230; }
.req-row em, .doc-row em, .rq-item em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: normal; font-size: 10.5px; color: #64748B; }
.doc-row > i { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; background: #EEF3FA; color: #2A70B6; font-size: 12px; }
.rq-item { width: 100%; cursor: pointer; transition: border-color .15s, background-color .15s; }
.rq-item:hover { border-color: #BCD0E8; background: #F8FAFD; }
.rq-item[aria-pressed="true"] { border-color: #2A70B6; background: #EEF3FA; box-shadow: inset 3px 0 0 #2A70B6; }
.rq-item.off { display: none; }
.rq-item:focus-visible, .cal-d:focus-visible, .idx-card:focus-visible, .idx-chip:focus-visible, .more-btn:focus-visible, .rail-a:focus-visible { outline: 2px solid #2A70B6; outline-offset: 2px; }
.tl { display: grid; gap: 10px; padding-left: 16px; border-left: 2px solid #DCE6F3; }
.tl li { position: relative; font-size: 11.5px; line-height: 1.4; }
.tl li::before { content: ""; position: absolute; left: -22px; top: 3px; width: 10px; height: 10px; border-radius: 999px; background: #fff; border: 2px solid #CBD5E1; }
.tl li.done::before { background: #10B981; border-color: #10B981; }
.tl li.cur::before { background: #fff; border-color: #2A70B6; box-shadow: 0 0 0 3px rgba(42,112,182,.18); }
.tl b { display: block; font-weight: 600; color: #1A2230; }
.tl em { display: block; font-style: normal; font-size: 10.5px; color: #64748B; }
.acc-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid #E6ECF4; border-radius: 10px; background: #fff; padding: 7px 10px; font-size: 12px; font-weight: 600; color: #334155; }
.acc-row > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc { display: inline-flex; flex-shrink: 0; align-items: center; gap: 5px; border-radius: 999px; padding: 2px 9px; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.acc-manage { background: #EEF3FA; color: #214C9C; }
.acc-view { background: #ECFDF5; color: #047857; }
.acc-own { background: #F5F3FF; color: #6D28D9; }
.acc-none { background: #F1F5F9; color: #94A3B8; }
.acc-row.pop { animation: stepIn .35s cubic-bezier(.2,.7,.2,1) both; }
.pf-panel[hidden], .dv-panel[hidden] { display: none; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 4px; }
.cal-head span { text-align: center; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #94A3B8; }
.cal-d { position: relative; display: grid; place-items: center; aspect-ratio: 1.15; border-radius: 8px; border: 1px solid transparent; font-size: 11.5px; font-weight: 700; color: #1A2230; background: #F8FAFD; transition: transform .15s, box-shadow .15s; }
.cal-d::after { content: ""; position: absolute; bottom: 4px; left: 50%; width: 14px; height: 3px; margin-left: -7px; border-radius: 3px; background: var(--dc, transparent); }
button.cal-d:hover { transform: translateY(-1px); box-shadow: 0 4px 10px -4px rgba(29,64,124,.35); }
.cal-d[aria-pressed="true"] { border-color: #1D407C; background: #fff; box-shadow: 0 0 0 2px rgba(29,64,124,.15); }
.d-p { --dc: #10B981; } .d-l { --dc: #F59E0B; } .d-r { --dc: #2A70B6; } .d-m { --dc: #8B5CF6; }
.d-o { --dc: #CBD5E1; color: #94A3B8; } .d-h { --dc: #CBD5E1; color: #94A3B8; }
.d-t { --dc: #10B981; border-color: #93B5DB; }
.d-f { background: transparent; color: #CBD5E1; font-weight: 600; }
.d-q { background: repeating-linear-gradient(45deg, #FFFBEB 0 4px, #FEF3C7 4px 8px); color: #B45309; }
.d-x { visibility: hidden; }
.pr-steps { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 4px; counter-reset: pr; }
.pr-steps li { counter-increment: pr; position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; color: #94A3B8; text-align: center; }
.pr-steps li::before { content: counter(pr); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; border: 2px solid #E2E8F0; background: #fff; font-size: 10.5px; font-weight: 800; color: #94A3B8; transition: all .25s; }
.pr-steps li.done::before { content: "✓"; border-color: #10B981; background: #10B981; color: #fff; }
.pr-steps li.on { color: #1D407C; }
.pr-steps li.on::before { border-color: #2A70B6; background: #2A70B6; color: #fff; box-shadow: 0 0 0 4px rgba(42,112,182,.18); }
.pr-steps li.done { color: #047857; }
.rem-row { display: flex; align-items: center; gap: 9px; min-width: 0; }
.rem-row > i { display: grid; place-items: center; flex-shrink: 0; width: 24px; height: 24px; border-radius: 7px; font-size: 10.5px; }
.rem-row > span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #334155; font-weight: 500; }
.rem-row > b { color: #1D407C; font-variant-numeric: tabular-nums; }
.dept { display: grid; grid-template-columns: 84px 1fr 32px; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; color: #475569; }
.dept b { text-align: right; color: #1D407C; font-variant-numeric: tabular-nums; }
.dept .visit-bar > span { transition: width .6s cubic-bezier(.2,.7,.2,1); }
/* Collapsible feature lists */
.more-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 1rem; border-radius: 8px; background: #EEF3FA; padding: 7px 12px; font-family: Montserrat, Inter, sans-serif; font-size: 12.5px; font-weight: 700; color: #1D407C; transition: background-color .15s; }
.more-btn:hover { background: #DCE6F3; }
.more-btn i { font-size: 10px; transition: transform .2s; }
.more-btn[aria-expanded="true"] i { transform: rotate(180deg); }
.more-btn[hidden] { display: none; }
.clamp-all.is-clamped > li:nth-child(n+9) { display: none; }
@media (max-width: 767px) { .clamp-mobile.is-clamped > li:nth-child(n+9) { display: none; } }
@media (min-width: 768px) { .more-btn[data-scope="mobile"] { display: none; } }
.tick-list.cols { gap: .7rem 1.5rem; }
/* Module index */
.idx-chip { white-space: nowrap; border-radius: 999px; border: 1px solid #E2E8F0; background: #fff; padding: 6px 13px; font-size: 12.5px; font-weight: 600; color: #475569; transition: all .15s; }
.idx-chip:hover { border-color: #BCD0E8; color: #1D407C; }
.idx-chip[aria-pressed="true"] { border-color: #1D407C; background: #1D407C; color: #fff; }
.idx-card { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; border: 1px solid #E2E8F0; border-radius: 14px; background: #fff; padding: 12px 34px 12px 12px; text-decoration: none; transition: transform .25s, border-color .25s, box-shadow .25s, opacity .25s; }
.idx-card:hover { transform: translateY(-3px); border-color: #BCD0E8; box-shadow: 0 0 0 1px rgba(42,112,182,.20), 0 18px 44px -14px rgba(33,76,156,.45); }
.idx-card b { display: block; font-family: Montserrat, Inter, sans-serif; font-size: 13.5px; font-weight: 700; line-height: 1.3; color: #1D407C; }
.idx-card em { display: block; margin-top: 2px; font-style: normal; font-size: 11.5px; color: #64748B; }
.idx-card > i { position: absolute; right: 12px; top: 50%; margin-top: -6px; font-size: 11px; color: #93B5DB; transition: transform .2s, color .2s; }
.idx-card:hover > i { color: #2A70B6; transform: translateY(2px); }
.idx-card.dim, .idx-card[hidden] { display: none !important; }
/* Sticky module rail */
.mod-rail { position: sticky; top: 76px; z-index: 30; border-bottom: 1px solid #E6ECF4; background: rgba(255,255,255,.94); -webkit-backdrop-filter: saturate(160%) blur(10px); backdrop-filter: saturate(160%) blur(10px); }
.rail-in { display: flex; align-items: center; gap: 14px; height: 54px; }
.rail-now { display: none; min-width: 0; flex-shrink: 1; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: #1D407C; }
.rail-now span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 1024px) { .rail-now { display: flex; width: 300px; } }
.rail-track { display: flex; flex: 1; gap: 3px; overflow-x: auto; scroll-behavior: smooth; padding: 2px; }
@media (min-width: 1024px) { .rail-track { justify-content: flex-end; } }
.rail-a { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; font-family: Montserrat, Inter, sans-serif; font-size: 12.5px; font-weight: 700; color: #586068; text-decoration: none; transition: background-color .15s, color .15s; }
.rail-a:hover { background: #EEF3FA; color: #1D407C; }
.rail-a.on { color: #fff; background-image: linear-gradient(135deg, #3B88C8, #214C9C); }
/* Compact module cards */
.cmp-card { height: 100%; border: 1px solid #E2E8F0; border-radius: 1.25rem; background: #fff; padding: 1.5rem; box-shadow: 0 1px 2px rgba(29,64,124,.04); }
@media (min-width: 640px) { .cmp-card { padding: 2rem; } }
.cmp-card .h3 { font-family: Montserrat, Inter, sans-serif; font-size: 1.35rem; line-height: 1.25; font-weight: 800; color: #1D407C; }
@media (min-width: 640px) { .cmp-card .h3 { font-size: 1.6rem; } }
.aud-card { position: relative; overflow: hidden; height: 100%; border: 1px solid #E2E8F0; border-radius: 1.25rem; background: #fff; padding: 1.75rem; transition: transform .3s, box-shadow .3s; }
.aud-card:hover { transform: translateY(-4px); box-shadow: 0 20px 25px -5px rgba(29,64,124,.10), 0 8px 10px -6px rgba(29,64,124,.10); }
.aud-card h3 { margin-top: 1.1rem; font-size: 1.15rem; font-weight: 800; color: #1D407C; }
.aud-ink { border-color: transparent; background-image: linear-gradient(135deg, #2A70B6, #203971); color: #fff; }
.aud-ink h3 { color: #fff; }
.split-card { height: 100%; border: 1px solid #E6ECF4; border-radius: 1.25rem; background: #fff; padding: 1.5rem; }
.flow-9 { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (min-width: 768px) { .flow-9 { grid-template-columns: repeat(5, minmax(0,1fr)); } }
@media (min-width: 1024px) { .flow-9 { grid-template-columns: repeat(9, minmax(0,1fr)); } }
.flow-9 a { padding: 14px 10px 12px; }
.flow-9 b { font-size: 12.5px; }
@media (max-width: 1023px) { .flow-9 li::after { display: none; } }
@media (max-width: 639px) { .dept { grid-template-columns: 74px 1fr 28px; } .pr-steps li { font-size: 9.5px; } }
.ua-group { display: flex; flex-wrap: wrap; gap: 8px; }
#assistant .ask-chip { border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.06); color: #fff; }
#assistant .ask-chip i { color: #93B5DB; }
#assistant .ask-chip:hover { background: rgba(255,255,255,.14); }
#assistant .ask-chip[aria-pressed="true"] { border-color: #fff; background: #fff; color: #1D407C; }
#assistant .ask-chip[aria-pressed="true"] i { color: #2A70B6; }
#assistant .mock { box-shadow: 0 30px 60px -24px rgba(0,0,0,.45); }
.mock .cl-item { padding: .45rem .6rem; font-size: 12px; }
/* ===== Project management page ===== */
.meter { position: relative; height: 8px; border-radius: 999px; background: #EEF2F7; }
.meter > span { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, #214C9C, #3B88C8); transition: width .5s cubic-bezier(.2,.7,.2,1); }
.meter.warn > span { background: linear-gradient(90deg, #B45309, #F59E0B); }
.meter.over > span { background: linear-gradient(90deg, #BE123C, #F43F5E); }
.meter .th { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 2px; background: #fff; box-shadow: 0 0 0 1px #CBD5E1; }
.meter-lg { height: 14px; }
.hrs-row { display: grid; grid-template-columns: 86px minmax(0,1fr) 70px; align-items: center; gap: 10px; font-size: 11.5px; font-weight: 600; color: #475569; }
.hrs-row b { text-align: right; color: #1D407C; font-variant-numeric: tabular-nums; }
.wbs-row { display: flex; align-items: center; gap: 8px; min-width: 0; border: 1px solid #E6ECF4; border-radius: 9px; background: #fff; padding: 5px 9px; font-size: 11.5px; }
.wbs-row.l0 { background: #F4F7FB; }
.wbs-row.l0 b { font-weight: 700; color: #1D407C; }
.wbs-row.l1 { margin-left: 14px; }
.wbs-row.l2 { margin-left: 28px; border-style: dashed; }
.wbs-row b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: #1A2230; }
.wbs-row em { flex-shrink: 0; font-style: normal; font-weight: 700; font-size: 11px; color: #1D407C; font-variant-numeric: tabular-nums; }
.wbs-code { flex-shrink: 0; min-width: 30px; font-size: 10px; font-weight: 700; color: #94A3B8; font-variant-numeric: tabular-nums; }
.wbs-row.pop, .gr-ev.pop, #em-hist .pop { animation: stepIn .4s cubic-bezier(.2,.7,.2,1) both; }
@media (max-width: 479px) { .wbs-row .status { display: none; } .wbs-row.l2 { margin-left: 20px; } }
.al-row { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.al-row .meter { margin-top: 6px; }
.al-nums { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 5px; font-size: 10.5px; font-weight: 600; color: #64748B; font-variant-numeric: tabular-nums; }
.al-panel[hidden], .pa-panel[hidden], .gv-panel[hidden], .mt-panel[hidden] { display: none; }
.ex-card { border: 1px solid #DCE6F3; border-radius: 14px; background: #fff; padding: 14px 16px; box-shadow: 0 1px 2px rgba(29,64,124,.05); }
.ex-card p { font-size: 14.5px; line-height: 1.6; color: #334155; }
.ex-card p + p { margin-top: .6rem; }
.ex-card .ex-card-t { display: flex; align-items: center; gap: 8px; margin-bottom: .5rem; font-family: Montserrat, Inter, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #2A70B6; }
.tk-sub { display: flex; align-items: center; gap: 8px; border-top: 1px solid #E6ECF4; padding: 6px 0; font-size: 11.5px; }
.tk-sub:first-child { border-top: 0; }
.tk-sub span { flex: 1; min-width: 0; line-height: 1.35; color: #334155; font-weight: 500; }
.tk-sub b { flex-shrink: 0; white-space: nowrap; }
.tk-sub .status { flex-shrink: 0; }
#tt-list .rq-item em { white-space: normal; }
.tk-sub b { color: #1D407C; font-variant-numeric: tabular-nums; }
.timer-card { display: flex; align-items: center; gap: 10px; min-width: 0; border: 1px solid #E6ECF4; border-radius: 12px; background: #fff; padding: 9px 10px; transition: border-color .2s, box-shadow .2s; }
.timer-card.run { border-color: #10B981; box-shadow: 0 0 0 3px rgba(16,185,129,.15); }
.timer-btn { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 999px; background: #1D407C; color: #fff; font-size: 11px; transition: background-color .15s, transform .15s; }
.timer-btn:hover { background: #2A70B6; transform: scale(1.05); }
.timer-card.run .timer-btn { background: #E11D48; }
.timer-btn:focus-visible, .stage-btn:focus-visible, .wa-tpl:focus-visible, #em-ai:focus-visible { outline: 2px solid #2A70B6; outline-offset: 2px; }
#tm-rows tr.pop { animation: stepIn .4s cubic-bezier(.2,.7,.2,1) both; }
.gr-ev { display: flex; align-items: flex-start; gap: 9px; font-size: 11.5px; line-height: 1.45; color: #475569; }
.gr-ev > i { display: grid; place-items: center; flex-shrink: 0; width: 24px; height: 24px; border-radius: 7px; font-size: 10.5px; }
.gr-ev b { color: #1A2230; }
.gantt { position: relative; display: grid; grid-template-columns: 110px minmax(0,1fr); align-items: center; row-gap: 10px; }
.g-name b { display: block; font-size: 11.5px; font-weight: 700; color: #1A2230; line-height: 1.2; }
.g-name em { display: block; font-style: normal; font-size: 10px; color: #94A3B8; }
.g-scale { display: grid; grid-template-columns: 30fr 31fr 30fr; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #94A3B8; }
.g-scale span { border-left: 1px solid #E2E8F0; padding-left: 6px; }
.g-track { position: relative; height: 24px; border-radius: 6px; background: linear-gradient(90deg, transparent calc(32.97% - 1px), #EEF2F7 calc(32.97% - 1px), #EEF2F7 32.97%, transparent 32.97%, transparent calc(67.03% - 1px), #EEF2F7 calc(67.03% - 1px), #EEF2F7 67.03%, transparent 67.03%), #F8FAFD; }
.g-bar { position: absolute; top: 5px; height: 14px; border-radius: 5px; background: linear-gradient(90deg, #214C9C, #3B88C8); box-shadow: 0 4px 10px -4px rgba(33,76,156,.5); }
.g-bar.done { background: #10B981; box-shadow: none; }
.g-bar.late { background: linear-gradient(90deg, #B45309, #F59E0B); }
.g-bar.crit { background: linear-gradient(90deg, #BE123C, #F43F5E); }
.g-base { position: absolute; top: 2px; height: 20px; border-radius: 6px; border: 1.5px dashed #94A3B8; transition: opacity .25s; }
.gantt.no-base .g-base { opacity: 0; }
.g-ms { position: absolute; top: 5px; width: 14px; height: 14px; margin-left: -7px; transform: rotate(45deg); border-radius: 3px; background: #1D407C; }
.g-today { position: absolute; top: 18px; bottom: -4px; width: 0; border-left: 2px solid #E11D48; pointer-events: none; }
.g-today em { position: absolute; top: -16px; left: -18px; font-style: normal; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #E11D48; }
@media (max-width: 479px) { .gantt { grid-template-columns: 84px minmax(0,1fr); } .g-today { left: calc(84px + (100% - 84px) * 0.4615) !important; } .g-name em { display: none; } .g-today em { display: none; } }
.xls { border-collapse: collapse; font-variant-numeric: tabular-nums; }
.xls th, .xls td { border: 1px solid #E6ECF4; padding: 5px 8px; text-align: left; white-space: nowrap; }
.xls thead th { background: #F8FAFD; font-size: 10px; font-weight: 700; color: #64748B; }
.xls tbody th { width: 26px; background: #F8FAFD; font-size: 10px; font-weight: 700; color: #94A3B8; text-align: center; }
.xls td { color: #1A2230; }
.xls .cell-sel { outline: 2px solid #10B981; outline-offset: -2px; background: #ECFDF5; font-weight: 700; }
.dc-item.off { display: none; }
.doc-row > i { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; background: #EEF3FA; color: #2A70B6; font-size: 12px; }
#em-ai { cursor: pointer; transition: background-color .15s; }
#em-ai:hover { background: #DCE6F3; }
.feed { display: flex; align-items: flex-start; gap: 10px; min-width: 0; font-size: 12px; color: #475569; }
.feed b { color: #1A2230; }
.feed em { display: block; margin-top: 3px; font-style: normal; font-size: 10.5px; color: #94A3B8; }
.feed-card { margin-top: 5px; border: 1px solid #E6ECF4; border-radius: 10px; background: #F8FAFD; padding: 7px 10px; font-size: 11.5px; line-height: 1.45; color: #334155; }
.mention { border-radius: 5px; background: #EEF3FA; padding: 0 4px; font-weight: 600; color: #214C9C; }
.q-row-p { display: grid; grid-template-columns: 128px minmax(0,1fr) 92px; align-items: center; gap: 10px; font-size: 11.5px; font-weight: 600; color: #475569; }
.q-row-p > b { text-align: right; color: #1D407C; font-variant-numeric: tabular-nums; }
.q-row-p > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-bars { position: relative; height: 14px; border-radius: 999px; background: #EEF2F7; }
.q-bars > span { position: absolute; top: 0; bottom: 0; border-radius: 999px; transition: left .5s cubic-bezier(.2,.7,.2,1), width .5s cubic-bezier(.2,.7,.2,1), background .3s; }
.q-mid { position: absolute; top: -3px; bottom: -3px; left: 50%; width: 2px; background: #94A3B8; opacity: 0; transition: opacity .3s; }
.q-var .q-mid { opacity: 1; }
@media (max-width: 479px) { .q-row-p { grid-template-columns: 92px minmax(0,1fr) 72px; gap: 8px; } .hrs-row { grid-template-columns: 74px minmax(0,1fr) 62px; } }
.flow-12 { grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 768px) { .flow-12 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1024px) { .flow-12 { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.flow-12 .wf-txt { margin-top: 8px; font-style: normal; font-size: 13.5px; font-weight: 600; line-height: 1.45; color: #1D407C; }
@media (min-width: 1024px) { .flow-12 li:nth-child(4n)::after { display: none; } }
@media (max-width: 1023px) { .flow-12 li::after { display: none; } }
.ben-card { height: 100%; border: 1px solid #E2E8F0; border-radius: 1.1rem; background: #fff; padding: 1rem; transition: transform .3s, box-shadow .3s; }
.ben-card:hover { transform: translateY(-4px); box-shadow: 0 20px 25px -5px rgba(29,64,124,.10), 0 8px 10px -6px rgba(29,64,124,.10); }
.ben-card p { margin-top: .9rem; font-family: Montserrat, Inter, sans-serif; font-size: 14.5px; font-weight: 700; line-height: 1.4; color: #1D407C; }
.ben-ink { border-color: transparent; background-image: linear-gradient(135deg, #2A70B6, #203971); }
.ben-ink p { color: #fff; }
.ben-ink .feat-icon { background: rgba(255,255,255,.15); color: #fff; --tw-ring-color: rgba(255,255,255,.25); }
@media (min-width: 640px) { .ben-card { padding: 1.25rem; } }
@media (max-width: 639px) { .ben-card p { font-size: 13px; } }
/* ===== Sales goal management page ===== */
.sg-panel[hidden] { display: none !important; }
.lb-mini { display: grid; grid-template-columns: 28px minmax(0,1fr) 40px auto; align-items: center; gap: 10px; border: 1px solid #EEF2F7; border-radius: 10px; padding: 6px 9px; }
.lb-mini b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; font-weight: 600; color: #1A2230; margin-bottom: 4px; }
.lb-mini > em { text-align: right; font-style: normal; font-size: 12px; font-weight: 800; color: #1D407C; font-variant-numeric: tabular-nums; }
.lb-mini .meter { display: block; height: 6px; }
.meter.ok > span { background: linear-gradient(90deg, #047857, #10B981); }
.mix-bar { display: flex; height: 14px; overflow: hidden; border-radius: 999px; gap: 2px; }
.mix-bar span { display: block; height: 100%; }
.mix-key { display: grid; gap: 4px 14px; grid-template-columns: repeat(2, minmax(0,1fr)); font-size: 11px; color: #475569; }
.mix-key li { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mix-key i { width: 8px; height: 8px; flex-shrink: 0; border-radius: 2px; }
.mix-key b { margin-left: auto; color: #1D407C; font-variant-numeric: tabular-nums; }
.alloc-row { display: grid; grid-template-columns: 104px minmax(0,1fr) auto; grid-template-areas: "n m s" "n e e"; align-items: center; gap: 4px 10px; border: 1px solid #E6ECF4; border-radius: 10px; padding: 8px 10px; font-size: 11.5px; }
.alloc-row > b { grid-area: n; font-weight: 700; color: #1D407C; }
.alloc-row > .meter { grid-area: m; }
.alloc-row > .status { grid-area: s; }
.alloc-row > em { grid-area: e; font-style: normal; font-size: 10.5px; font-weight: 600; color: #64748B; font-variant-numeric: tabular-nums; }
.ex-formula { margin-top: .4rem; border-radius: 10px; background: #F4F7FB; padding: .7rem .85rem; font-family: Montserrat, Inter, sans-serif; font-size: 14.5px !important; font-weight: 700; color: #1D407C !important; }
.formula-live { border-radius: 10px; border: 1px dashed #BCD0E8; background: #F8FAFD; padding: 7px 10px; font-size: 11.5px; font-weight: 600; color: #334155; font-variant-numeric: tabular-nums; }
.formula-live b { color: #1D407C; }
.tx-row { display: flex; align-items: center; gap: 10px; min-width: 0; border: 1px solid #E6ECF4; border-radius: 10px; background: #fff; padding: 6px 10px; font-size: 11.5px; }
.tx-row > i { display: grid; place-items: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; background: #EEF3FA; color: #2A70B6; font-size: 11px; }
.tx-row > span { flex: 1; min-width: 0; }
.tx-row > span b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: #1A2230; }
.tx-row > span em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: normal; font-size: 10.5px; color: #64748B; }
.tx-row > strong { flex-shrink: 0; font-weight: 700; color: #1D407C; font-variant-numeric: tabular-nums; }
.tx-row.ex { background: #FAFBFC; }
.tx-row.ex > strong { color: #94A3B8; text-decoration: line-through; }
.tx-row.ex > i { background: #FFF1F2; color: #BE123C; }
.tx-row.zero > strong { color: #94A3B8; }
.tx-row.pop { animation: stepIn .35s cubic-bezier(.2,.7,.2,1) both; }
.f-chip { white-space: nowrap; border-radius: 999px; border: 1px solid #E2E8F0; background: #fff; padding: 3px 10px; font-size: 11px; font-weight: 600; color: #475569; transition: all .15s; }
.f-chip:hover { border-color: #BCD0E8; color: #1D407C; }
.f-chip[aria-pressed="true"] { border-color: #1D407C; background: #1D407C; color: #fff; }
.lb-row { display: grid; width: 100%; grid-template-columns: 22px 30px minmax(0,1fr) auto; align-items: center; gap: 9px; border: 1px solid #E6ECF4; border-radius: 10px; background: #fff; padding: 7px 10px; text-align: left; transition: border-color .15s, background-color .15s; }
.lb-row:hover { border-color: #BCD0E8; background: #F8FAFD; }
.lb-row[aria-pressed="true"] { border-color: #2A70B6; background: #EEF3FA; box-shadow: inset 3px 0 0 #2A70B6; }
.lb-rank { font-family: Montserrat, Inter, sans-serif; font-size: 12px; font-weight: 800; color: #94A3B8; text-align: center; font-variant-numeric: tabular-nums; }
.lb-row:first-child .lb-rank { color: #B45309; }
.lb-main { min-width: 0; }
.lb-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 11.5px; }
.lb-top b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: #1A2230; }
.lb-top em { flex-shrink: 0; font-style: normal; font-size: 10.5px; font-weight: 600; color: #64748B; font-variant-numeric: tabular-nums; }
.lb-main .meter { margin-top: 5px; height: 6px; }
.lb-side { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.lb-side strong { font-size: 12.5px; font-weight: 800; color: #1D407C; font-variant-numeric: tabular-nums; }
.lb-row.pop { animation: stepIn .35s cubic-bezier(.2,.7,.2,1) both; }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 168px; border-bottom: 1px solid #E2E8F0; padding-top: 18px; }
.bar { position: relative; display: flex; flex: 1 1 0; min-width: 0; height: 100%; flex-direction: column; justify-content: flex-end; align-items: center; border-radius: 8px 8px 0 0; transition: background-color .15s; }
.bar:hover, .bar[aria-pressed="true"] { background: #F4F7FB; }
.bar .b-stack { position: relative; width: 100%; max-width: 46px; flex: 1; }
.bar .b-t { position: absolute; bottom: 0; left: 8%; right: 8%; border: 1.5px dashed #94A3B8; border-bottom: 0; border-radius: 5px 5px 0 0; }
.bar .b-a { position: absolute; bottom: 0; left: 22%; right: 22%; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #3B88C8, #214C9C); transition: height .5s cubic-bezier(.2,.7,.2,1); }
.bar .b-a.over { background: linear-gradient(180deg, #34D399, #047857); }
.bar .b-a.live { background: repeating-linear-gradient(135deg, #3B88C8 0 5px, #5C9FD6 5px 10px); }
.bar .b-p { position: absolute; left: 4%; right: 4%; height: 0; border-top: 2px solid #F59E0B; }
.bar .b-v { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 9.5px; font-weight: 700; color: #1D407C; font-variant-numeric: tabular-nums; }
.bar .b-l { margin-top: 4px; padding-bottom: 3px; font-size: 10px; font-weight: 700; color: #64748B; white-space: nowrap; }
.bar[aria-pressed="true"] .b-l { color: #1D407C; }
.key-t { width: 12px; height: 10px; border: 1.5px dashed #94A3B8; border-bottom: 0; border-radius: 3px 3px 0 0; }
.key-a { width: 8px; height: 10px; border-radius: 2px; background: linear-gradient(180deg, #3B88C8, #214C9C); }
.key-p { width: 12px; height: 0; border-top: 2px solid #F59E0B; }
.cmp-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid #E6ECF4; border-radius: 10px; padding: 6px 10px; color: #475569; font-weight: 600; }
.cmp-line b { font-variant-numeric: tabular-nums; }
.ring { --p: 0; position: relative; display: grid; flex-shrink: 0; place-items: center; width: 92px; height: 92px; border-radius: 999px; background: conic-gradient(#2A70B6 calc(var(--p) * 1%), #DCE6F3 0); transition: --p .6s; }
.ring::before { content: ""; position: absolute; inset: 9px; border-radius: 999px; background: #fff; }
.ring > span { position: relative; text-align: center; line-height: 1.1; }
.ring b { display: block; font-family: Montserrat, Inter, sans-serif; font-size: 19px; font-weight: 800; color: #1D407C; font-variant-numeric: tabular-nums; }
.ring em { font-style: normal; font-size: 9.5px; font-weight: 600; color: #64748B; }
.ring.hit { background: conic-gradient(#10B981 100%, #10B981 0); }
.opp-meta { flex-shrink: 0; text-align: right; font-size: 10.5px; line-height: 1.3; color: #64748B; font-variant-numeric: tabular-nums; }
.opp-meta b { display: block; font-size: 12px; color: #1D407C; }
.mock .cl-item .cl-text em { display: block; font-style: normal; font-size: 10.5px; font-weight: 500; color: #64748B; }
.mock .cl-item input:checked ~ .cl-text { color: #1A2230; text-decoration: none; }
.mock .cl-item:has(input:checked) { border-color: #10B981; background: #F0FDF8; }
.md-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; border: 1px solid #E6ECF4; border-radius: 10px; background: #fff; padding: 8px 10px; }
.md-row .md-who { display: flex; flex: 1 1 220px; min-width: 0; align-items: center; gap: 9px; }
.md-row .md-who b { display: block; font-size: 12px; font-weight: 600; color: #1A2230; }
.md-row .md-who em { display: block; font-style: normal; font-size: 10.5px; color: #64748B; }
.md-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.md-row .act-btn[disabled] { cursor: default; border-color: #A7F3D0; background: #ECFDF5; color: #047857; }
.tl li.miss::before { background: #F59E0B; border-color: #F59E0B; }
.act-row { display: grid; grid-template-columns: 110px minmax(0,1fr) 64px; align-items: center; gap: 10px; font-size: 11.5px; font-weight: 600; color: #475569; }
.act-row b { text-align: right; color: #1D407C; font-variant-numeric: tabular-nums; }
.pl-row { display: grid; grid-template-columns: 104px minmax(0,1fr) 54px; align-items: center; gap: 10px; font-size: 11.5px; font-weight: 600; color: #475569; }
.pl-row > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-row > b { text-align: right; font-variant-numeric: tabular-nums; color: #1D407C; }
.pl-row > b.low { color: #BE123C; }
.pl-row em { display: block; margin-top: 3px; font-style: normal; font-size: 10px; font-weight: 600; color: #94A3B8; font-variant-numeric: tabular-nums; }
.acc-box { border-radius: 12px; background: #F4F7FB; padding: 8px 10px; font-size: 10.5px; color: #64748B; font-variant-numeric: tabular-nums; }
.acc-box b { display: block; font-family: Montserrat, Inter, sans-serif; font-size: 15px; font-weight: 800; color: #1D407C; }
.al-item { display: flex; align-items: flex-start; gap: 9px; border: 1px solid #E6ECF4; border-radius: 10px; background: #fff; padding: 7px 10px; font-size: 11.5px; line-height: 1.45; color: #475569; }
.al-item > i { display: grid; place-items: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; font-size: 11px; }
.al-item b { color: #1A2230; }
.al-item em { display: block; font-style: normal; font-size: 10px; color: #94A3B8; }
.al-item.pop { animation: stepIn .35s cubic-bezier(.2,.7,.2,1) both; }
.pref-t { border-collapse: collapse; font-size: 11.5px; }
.pref-t th { padding: 0 6px 6px; text-align: center; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #94A3B8; }
.pref-t th:first-child, .pref-t td:first-child { padding-left: 0; text-align: left; }
.pref-t td { border-top: 1px solid #F1F5F9; padding: 6px; text-align: center; font-weight: 600; color: #334155; white-space: nowrap; }
.sw { position: relative; display: inline-block; width: 34px; height: 20px; border-radius: 999px; background: #E2E8F0; vertical-align: middle; transition: background-color .2s; }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.2); transition: transform .2s; }
.sw[aria-checked="true"] { background: #2A70B6; }
.sw[aria-checked="true"]::after { transform: translateX(14px); }
.sw:focus-visible, .lb-row:focus-visible, .bar:focus-visible, .f-chip:focus-visible { outline: 2px solid #2A70B6; outline-offset: 2px; }
.calc-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; border-top: 1px solid #F1F5F9; padding: 6px 0; font-size: 11.5px; color: #475569; }
.calc-row:first-child { border-top: 0; }
.calc-row b { flex-shrink: 0; color: #1A2230; font-variant-numeric: tabular-nums; }
.calc-row.strong span, .calc-row.strong b { font-weight: 700; color: #1D407C; }
.calc-row.total { margin-top: 4px; border-top: 2px solid #DCE6F3; padding-top: 8px; }
.calc-row.total span { font-weight: 700; color: #1A2230; }
.calc-row.total b { font-family: Montserrat, Inter, sans-serif; font-size: 16px; font-weight: 800; color: #1D407C; }
.slab { border-collapse: separate; border-spacing: 0 4px; font-size: 11.5px; }
.slab td { background: #F8FAFD; padding: 6px 9px; color: #475569; font-weight: 600; font-variant-numeric: tabular-nums; }
.slab td:first-child { border-radius: 8px 0 0 8px; }
.slab td:last-child { border-radius: 0 8px 8px 0; text-align: right; color: #1D407C; font-weight: 700; }
.slab tr.on td { background: #1D407C; color: #fff; }
.slab tr.on td:last-child { color: #fff; }
.cascade { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cascade > span { border: 1px solid #E6ECF4; border-radius: 10px; background: #F8FAFD; padding: 5px 9px; line-height: 1.25; }
.cascade > span.me { border-color: #2A70B6; background: #EEF3FA; }
.cascade em { display: block; font-style: normal; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #94A3B8; }
.cascade b { font-size: 11.5px; font-weight: 700; color: #1D407C; font-variant-numeric: tabular-nums; }
.cascade > i { font-size: 9px; color: #93B5DB; }
#rp-list .rq-item { flex-shrink: 0; width: auto; padding: 6px 10px; }
@media (min-width: 768px) { #rp-list .rq-item { width: 100%; } }
#rp-list .rq-item b { font-size: 11.5px; }
.rp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid #F1F5F9; padding: 6px 0; font-size: 11.5px; color: #475569; }
.rp-row:first-of-type { border-top: 0; }
.rp-row b { flex-shrink: 0; color: #1D407C; font-variant-numeric: tabular-nums; }
.rp-row span { min-width: 0; }
@media (max-width: 479px) {
.lb-mini { grid-template-columns: 28px minmax(0,1fr) 36px; }
.lb-mini .status { display: none; }
.alloc-row { grid-template-columns: 88px minmax(0,1fr) auto; }
.pl-row { grid-template-columns: 84px minmax(0,1fr) 48px; gap: 8px; }
.act-row { grid-template-columns: 92px minmax(0,1fr) 54px; gap: 8px; }
.bar .b-v { display: none; }
.lb-side .status { display: none; }
.ring { width: 80px; height: 80px; }
}
/* ===== Desktop tracking page ===== */
.kpi-val { white-space: nowrap; }
.split-bar { display: flex; gap: 2px; height: 12px; overflow: hidden; border-radius: 4px; }
.split-bar > span { height: 100%; transition: width .5s cubic-bezier(.2,.7,.2,1); }
.split-bar > span:first-child { border-radius: 4px 0 0 4px; }
.split-bar > span:last-child { border-radius: 0 4px 4px 0; }
.seg-prod, .dot-prod { background: #10B981; }
.seg-neu, .dot-neu { background: #A0A2A5; }
.seg-non, .dot-non { background: #F43F5E; }
.dot-prod, .dot-neu, .dot-non { display: inline-block; width: 8px; height: 8px; border-radius: 999px; }
.status { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; border-radius: 999px; padding: 2px 8px; font-size: 10px; font-weight: 600; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.status:has(i)::before { display: none; }
.status i { font-size: 8px; }
.st-active, .st-ok { background: #ECFDF5; color: #047857; }
.st-idle, .st-warn { background: #FFFBEB; color: #B45309; }
.st-off { background: #F1F5F9; color: #475569; }
.day-line { display: flex; gap: 2px; height: 22px; overflow: hidden; border-radius: 6px; }
.day-line > span { height: 100%; }
.tl-active { background: #2A70B6; }
.tl-idle { background: #FBBF24; }
.tl-off { background: #E2E8F0; }
.tl-manual, .bg-hatch { background: repeating-linear-gradient(45deg, #93B5DB 0 4px, #DCE6F3 4px 7px); }
.freq-btn, .ret-btn, .fmt-btn { color: #64748B; transition: background-color .15s, color .15s; }
.freq-btn[aria-checked="true"], .ret-btn[aria-checked="true"], .fmt-btn[aria-checked="true"],
.live-tab[aria-selected="true"], .per-tab[aria-selected="true"] { background: #fff; color: #1D407C; box-shadow: 0 1px 2px rgba(29,64,124,.08), 0 2px 8px rgba(29,64,124,.08); }
.live-tab[aria-selected="false"], .per-tab[aria-selected="false"] { color: #64748B; }
.freq-btn:hover, .ret-btn:hover, .fmt-btn:hover, .live-tab:hover, .per-tab:hover { color: #1D407C; }
.freq-btn:focus-visible, .ret-btn:focus-visible, .fmt-btn:focus-visible, .live-tab:focus-visible, .per-tab:focus-visible,
.rep-opt:focus-visible, .app-cat:focus-visible, #blur-toggle:focus-visible, .rule-toggle:focus-visible, .heat-cell:focus-visible { outline: 2px solid #2A70B6; outline-offset: 1px; }
.switch { position: relative; flex-shrink: 0; width: 32px; height: 18px; border-radius: 999px; background: #CBD5E1; transition: background-color .2s; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .2s; }
[aria-pressed="true"] .switch { background: #2A70B6; }
[aria-pressed="true"] .switch::after { transform: translateX(14px); }
.shot { margin: 0; }
.shot-img { display: grid; align-content: start; gap: 5px; aspect-ratio: 16 / 10; padding: 18px 10px 8px; border-radius: 8px; border: 1px solid #E6ECF4; background: linear-gradient(#DCE6F3 0 10px, #F8FAFD 10px); overflow: hidden; transition: filter .3s; }
.shot-img span { display: block; height: 5px; border-radius: 3px; background: #93B5DB; }
.shot-b span { background: #A0A2A5; }
.shot-c span { background: #5A76A6; }
.shots-blur .shot-img { filter: blur(2.5px); }
.shot figcaption { margin-top: 5px; font-size: 10.5px; color: #64748B; }
.shot figcaption b { color: #1D407C; font-variant-numeric: tabular-nums; }
.heat { display: grid; grid-template-columns: 34px repeat(10, minmax(0, 1fr)); gap: 3px; font-size: 10px; color: #94A3B8; }
.heat-h { text-align: center; padding-bottom: 2px; font-variant-numeric: tabular-nums; }
.heat-d { display: flex; align-items: center; font-weight: 600; color: #64748B; }
.heat-cell { height: 30px; border: 0; border-radius: 4px; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.heat-cell:hover, .heat-cell.on { transform: scale(1.08); box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1D407C; }
[data-l="0"] { background: #EEF3FA; }
[data-l="1"] { background: #BCD0E8; }
[data-l="2"] { background: #93B5DB; }
[data-l="3"] { background: #3B88C8; }
[data-l="4"] { background: #214C9C; }
.rep-opt { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid #E6ECF4; background: #fff; font-size: 12px; font-weight: 600; color: #334155; text-align: left; transition: border-color .15s, background-color .15s; }
.rep-opt i { color: #2A70B6; width: 14px; text-align: center; }
.rep-opt:hover { border-color: #BCD0E8; }
.rep-opt[aria-checked="true"] { border-color: #2A70B6; background: #EEF3FA; color: #1D407C; box-shadow: inset 0 0 0 1px #2A70B6; }
.app-cat { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; border-radius: 999px; padding: 3px 9px; font-size: 10.5px; font-weight: 600; border: 1px solid transparent; cursor: pointer; transition: background-color .15s; }
.app-cat[data-c="prod"] { background: #ECFDF5; color: #047857; border-color: #A7F3D0; }
.app-cat[data-c="neu"] { background: #F1F5F9; color: #475569; border-color: #CBD5E1; }
.app-cat[data-c="non"] { background: #FFF1F2; color: #BE123C; border-color: #FECDD3; }
.app-cat i { font-size: 8px; opacity: .7; }
.ben { width: 100%; }
@media (min-width: 640px) { .ben { width: calc(50% - .5rem); } }
@media (min-width: 1024px) { .ben { width: calc(25% - .75rem); } }
#live tbody tr { border-top: 1px solid #F1F5F9; }
#live tbody td { padding: 9px 8px 9px 0; vertical-align: middle; }
.tick-list li b { color: #1D407C; font-weight: 600; }
.tick-dark li b { color: #fff; }
.kpi { border-radius: 12px; background: #F4F7FB; padding: .75rem .85rem; }
.kpi-label { font-size: 10.5px; font-weight: 600; color: #64748B; }
.kpi-val { margin-top: 2px; font-family: Montserrat, Inter, sans-serif; font-size: 1.4rem; font-weight: 800; color: #1D407C; font-variant-numeric: tabular-nums; }
.why-card { position: relative; overflow: hidden; border-radius: 1rem; border: 1px solid #E2E8F0; background: #fff; padding: 1.75rem; transition: transform .3s, box-shadow .3s; }
.why-card:hover { transform: translateY(-4px); box-shadow: 0 20px 25px -5px rgba(29,64,124,.10), 0 8px 10px -6px rgba(29,64,124,.10); }
.why-num { position: absolute; right: 1.25rem; top: .75rem; font-family: Montserrat, Inter, sans-serif; font-size: 3.75rem; line-height: 1; font-weight: 800; color: #F1F5F9; transition: color .3s; }
.why-card:hover .why-num { color: #EEF3FA; }
/* ===== Recruitment page ===== */
#sourcing .note, #invitations .note, #formats .note, #analytics .note { background: #F4F7FB; box-shadow: none; }
.tick-list li b { color: #1D407C; font-weight: 600; }
.tick-dark li b { color: #fff; }
.key-benefit { display: flex; align-items: flex-start; gap: .85rem; padding: 1rem 1.25rem; border-radius: 12px; background-image: linear-gradient(90deg, #214C9C 0%, #2A70B6 60%, #264E9D 100%); color: #fff; font-size: 15px; line-height: 1.55; box-shadow: 0 18px 44px -18px rgba(33,76,156,.55); }
.key-benefit b { font-family: Montserrat, Inter, system-ui, sans-serif; }
.key-ico { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; background: rgba(255,255,255,.16); font-size: 12px; }
.qcat { position: relative; border-radius: 1.25rem; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); padding: 1.6rem; transition: transform .3s, background-color .3s; }
.qcat:hover { transform: translateY(-4px); background: rgba(255,255,255,.09); }
.qcat-tag { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background-image: linear-gradient(135deg, #3B88C8, #214C9C); font-family: Montserrat, Inter, sans-serif; font-weight: 800; font-size: 17px; }
.qcat-q { margin-top: 1.1rem; padding: .7rem .85rem; border-radius: 10px; background: #fff; color: #1A2230; font-size: 12.5px; font-weight: 600; line-height: 1.45; }
.qcat-q span { display: block; margin-bottom: 2px; font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #2A70B6; }
.seg-tab[aria-selected="true"], .scr-tab[aria-selected="true"], .fmt-tab[aria-selected="true"] { background: #fff; color: #1D407C; box-shadow: 0 1px 2px rgba(29,64,124,.08), 0 2px 8px rgba(29,64,124,.08); }
.scr-tab[aria-selected="false"], .fmt-tab[aria-selected="false"] { color: #64748B; }
.scr-tab:hover, .fmt-tab:hover { color: #1D407C; }
.scr-tab:focus-visible, .fmt-tab:focus-visible { outline: 2px solid #2A70B6; outline-offset: 1px; }
.req { display: flex; align-items: center; gap: .55rem; }
.req i { width: 14px; text-align: center; }
.phase { position: relative; border-radius: 1.25rem; border: 1px solid #E6ECF4; background: #fff; padding: 1.35rem; box-shadow: 0 1px 2px rgba(29,64,124,.06), 0 2px 8px rgba(29,64,124,.06); }
.phase::before { content: ""; position: absolute; left: 1.35rem; right: 1.35rem; top: 0; height: 3px; border-radius: 0 0 4px 4px; background-image: linear-gradient(90deg, #214C9C 0%, #3B88C8 35%, #2E77BA 65%, #264E9D 100%); }
.phase-head { display: flex; align-items: center; gap: .65rem; font-family: Montserrat, Inter, sans-serif; font-weight: 700; font-size: 15px; color: #1D407C; }
.phase-ico { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; background: #EEF3FA; color: #2A70B6; font-size: 14px; }
.phase-list { margin-top: 1rem; display: grid; gap: .5rem; }
.phase-list li { display: flex; align-items: flex-start; gap: .65rem; font-size: 13.5px; line-height: 1.45; color: #334155; }
.phase-list li span { display: grid; place-items: center; flex-shrink: 0; width: 24px; height: 24px; margin-top: -2px; border-radius: 999px; border: 1.5px solid #BCD0E8; background: #fff; font-family: Montserrat, Inter, sans-serif; font-size: 10.5px; font-weight: 700; color: #214C9C; font-variant-numeric: tabular-nums; }
.phase-last .phase-list li span { border-color: #1D407C; background: #1D407C; color: #fff; }
.pipe-seg { flex: 1 1 0; height: 8px; border-radius: 3px; background: #E6ECF4; }
.pipe-seg.done { background: #2A70B6; }
.pipe-seg.now { background: #3B88C8; box-shadow: 0 0 0 2px rgba(59,136,200,.28); }
.ob-dept { flex-shrink: 0; padding: 2px 8px; border-radius: 999px; background: #EEF3FA; color: #214C9C; font-size: 10px; font-weight: 600; }
.kpi { border-radius: 12px; background: #F4F7FB; padding: .75rem .85rem; }
.kpi-label { font-size: 10.5px; font-weight: 600; color: #64748B; }
.kpi-val { margin-top: 2px; font-family: Montserrat, Inter, sans-serif; font-size: 1.4rem; font-weight: 800; color: #1D407C; font-variant-numeric: tabular-nums; }
.why-card { position: relative; overflow: hidden; border-radius: 1rem; border: 1px solid #E2E8F0; background: #fff; padding: 1.75rem; transition: transform .3s, box-shadow .3s; }
.why-card:hover { transform: translateY(-4px); box-shadow: 0 20px 25px -5px rgba(29,64,124,.10), 0 8px 10px -6px rgba(29,64,124,.10); }
.why-num { position: absolute; right: 1.25rem; top: .75rem; font-family: Montserrat, Inter, sans-serif; font-size: 3.75rem; line-height: 1; font-weight: 800; color: #F1F5F9; transition: color .3s; }
.why-card:hover .why-num { color: #EEF3FA; }
/* ===== Home page ===== */
[hidden] { display: none !important; }
/* Hero (cops360.in markup, COPS360 brand styling) */
.hero { position: relative; overflow: hidden; padding: 128px 0 72px; background:
radial-gradient(900px 420px at 50% -80px, #DCE6F3 0%, rgba(220,230,243,0) 70%),
linear-gradient(180deg, #FFFFFF 0%, #F4F7FB 100%); }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
background-image: linear-gradient(rgba(29,64,124,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(29,64,124,.05) 1px, transparent 1px);
background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%); }
.hero .container { position: relative; width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.hero-center { text-align: center; max-width: 980px !important; }
.hero-trust { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 6px 14px 6px 6px; border-radius: 999px; background: #fff; border: 1px solid #E6ECF4; box-shadow: 0 1px 2px rgba(29,64,124,.06), 0 2px 8px rgba(29,64,124,.06); font-size: 13px; color: #586068; text-align: left; }
.hero-trust strong { color: #1D407C; font-weight: 700; }
.ht-avatars { display: inline-flex; flex-shrink: 0; }
.ht-avatars i { width: 24px; height: 24px; border-radius: 999px; border: 2px solid #fff; margin-left: -8px; background: linear-gradient(135deg, #3B88C8, #214C9C); }
.ht-avatars i:first-child { margin-left: 0; background: linear-gradient(135deg, #93B5DB, #2E77BA); }
.ht-avatars i:last-child { background: linear-gradient(135deg, #5A76A6, #1D407C); }
.ht-check { display: grid; place-items: center; flex-shrink: 0; width: 20px; height: 20px; border-radius: 999px; background: #ECFDF5; color: #059669; font-size: 11px; font-weight: 700; }
.hero h1 { margin: 22px auto 0; font-family: Montserrat, Inter, system-ui, sans-serif; font-weight: 800; letter-spacing: -.015em; line-height: 1.08; color: #1D407C; font-size: clamp(2.05rem, 5.2vw, 3.75rem); max-width: 920px; }
.hero-sub { margin: 20px auto 0; max-width: 720px; font-size: clamp(1rem, 1.6vw, 1.2rem); line-height: 1.6; color: #586068; }
.hero-mosaic { margin-top: 48px !important; display: grid; grid-template-columns: 1.15fr minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr); gap: 14px; align-items: start; }
.hm-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.hm-col.col-b, .hm-col.col-d { margin-top: 34px; }
.hm-col.col-c { margin-top: 12px; }
.hm-cta { display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding: 22px 18px; border-radius: 16px; background: #1D407C; background-image: radial-gradient(260px 180px at 100% 0%, rgba(59,136,200,.45), transparent 70%); color: #fff; box-shadow: 0 30px 60px -24px rgba(29,64,124,.45); align-self: center; justify-content: center; }
.hm-cta .btn-primary { background: #fff; color: #1D407C; padding: .95rem 1rem; font-size: 14px; text-align: center; }
.hm-cta .btn-primary:hover { background: #EEF3FA; box-shadow: 0 10px 30px -10px rgba(0,0,0,.4); }
.trust-mini { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 0; font-size: 12px; color: #C6C7C9; }
.hm-info { width: 14px; height: 14px; border-radius: 999px; border: 1.5px solid #93B5DB; position: relative; }
.hm-info::after { content: "i"; position: absolute; inset: 0; display: grid; place-items: center; font: 700 9px/1 Inter, sans-serif; color: #93B5DB; }
.hm-dot { width: 3px; height: 3px; border-radius: 999px; background: #A0A2A5; }
.hm-rate { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); }
.hm-rate b { font-family: Montserrat, Inter, sans-serif; font-size: 20px; font-weight: 800; }
.hm-stars { color: #FBBF24; letter-spacing: 1px; font-size: 14px; }
.hm-marks { display: inline-flex; }
.hm-marks i { width: 18px; height: 18px; border-radius: 999px; border: 2px solid #1D407C; margin-left: -6px; }
.hm-marks .m1 { margin-left: 0; background: #FF492C; } .hm-marks .m2 { background: #00B67A; } .hm-marks .m3 { background: #3B88C8; }
.hm-demo { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: .8rem 1rem; border-radius: 8px; border: 1.5px solid rgba(255,255,255,.45); font-family: Montserrat, Inter, sans-serif; font-size: 14px; font-weight: 600; color: #fff; transition: background .2s, transform .2s; }
.hm-demo:hover { background: rgba(255,255,255,.1); transform: translateY(-2px); }
.hm-demo::after { content: "→"; }
.hm-card { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 14px; background: #fff; border: 1px solid #E6ECF4; box-shadow: 0 1px 2px rgba(29,64,124,.06), 0 2px 8px rgba(29,64,124,.06); color: #1A2230; transition: transform .25s, box-shadow .25s, border-color .25s; min-width: 0; }
.hm-card:hover { transform: translateY(-4px); border-color: #BCD0E8; box-shadow: 0 0 0 1px rgba(42,112,182,.15), 0 18px 44px -14px rgba(33,76,156,.35); }
.hm-card > strong { font-family: Montserrat, Inter, sans-serif; font-size: 13px; font-weight: 700; line-height: 1.3; color: #1D407C; }
.hm-visual { border-radius: 10px; background: #F4F7FB; padding: 12px; min-height: 84px; }
.hm-proj .hm-visual { display: flex; align-items: center; gap: 12px; }
.hm-donut { position: relative; flex-shrink: 0; width: 66px; height: 66px; border-radius: 999px; background: conic-gradient(#3B88C8 0 38%, #F59E0B 38% 63%, #10B981 63% 100%); }
.hm-donut::before { content: ""; position: absolute; inset: 10px; border-radius: 999px; background: #F4F7FB; }
.hm-donut span { position: absolute; inset: 0; display: grid; place-items: center; font: 800 13px/1 Montserrat, Inter, sans-serif; color: #1D407C; }
.hm-legend { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 11px; color: #586068; }
.hm-legend i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 2px; }
.c-open { background: #3B88C8; } .c-prog { background: #F59E0B; } .c-done { background: #10B981; }
.hm-chat { display: flex; flex-direction: column; gap: 6px; }
.hm-chat .bubble { margin: 0; align-self: flex-start; max-width: 92%; padding: 6px 9px; border-radius: 10px 10px 10px 3px; background: #fff; border: 1px solid #E6ECF4; font-size: 11px; line-height: 1.35; color: #1A2230; }
.hm-chat .bubble.me { align-self: flex-end; border-radius: 10px 10px 3px 10px; border-color: transparent; background: linear-gradient(135deg, #2E77BA, #1D407C); color: #fff; }
.hm-chips { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; }
.hm-meter { display: flex; gap: 3px; width: 100%; height: 8px; margin-bottom: 4px; }
.hm-meter i { height: 100%; border-radius: 3px; } .hm-meter i:nth-child(1) { width: 62%; background: #10B981; } .hm-meter i:nth-child(2) { width: 24%; background: #A0A2A5; } .hm-meter i:nth-child(3) { width: 14%; background: #F43F5E; }
.hero-mosaic .chip { display: inline-flex; padding: 3px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 600; }
.chip.ok, .stamp.ok { background: #ECFDF5; color: #047857; } .chip.mid, .stamp.mid { background: #EEF3FA; color: #214C9C; } .chip.bad, .stamp.bad { background: #FFF1F2; color: #BE123C; }
.hm-screen .win { border-radius: 8px; background: #fff; border: 1px solid #E6ECF4; overflow: hidden; }
.win-dots { display: flex; gap: 4px; padding: 6px 8px; border-bottom: 1px solid #E6ECF4; }
.win-dots i { width: 6px; height: 6px; border-radius: 999px; background: #FDA4AF; } .win-dots i:nth-child(2) { background: #FCD34D; } .win-dots i:nth-child(3) { background: #6EE7B7; }
.win-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 7px; }
.win-grid b { height: 22px; border-radius: 4px; background: linear-gradient(135deg, #DCE6F3, #BCD0E8); } .win-grid b:nth-child(2), .win-grid b:nth-child(3) { background: linear-gradient(135deg, #EEF3FA, #DCE6F3); }
.hm-sheet table { width: 100%; border-collapse: collapse; font-size: 11px; font-variant-numeric: tabular-nums; }
.hm-sheet th { padding: 0 0 6px; text-align: left; font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #747578; }
.hm-sheet td { padding: 6px 0; border-top: 1px solid #E6ECF4; color: #1A2230; white-space: nowrap; }
.hm-sheet td:first-child { font-weight: 600; }
.hm-sheet td:first-child .av { vertical-align: -4px; margin-right: 6px; }
.hm-sheet th:not(:first-child), .hm-sheet td:not(:first-child) { padding-left: 8px; }
.hm-sheet th:not(:first-child), .hm-sheet td:not(:first-child) { text-align: right; }
.hm-sheet td:last-child { font-weight: 700; color: #1D407C; }
.hero-mosaic .av { display: inline-block; width: 18px; height: 18px; border-radius: 999px; flex-shrink: 0; }
.hero-mosaic .av.a1 { background: linear-gradient(135deg, #F59E0B, #EA580C); } .hero-mosaic .av.a2 { background: linear-gradient(135deg, #3B88C8, #1D407C); } .hero-mosaic .av.a3 { background: linear-gradient(135deg, #34D399, #059669); }
.hm-timer { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; padding: 9px 10px; border-radius: 10px; background: #1D407C; color: #fff; }
.hm-timer b { font-size: 11.5px; } .hm-timer small { grid-column: 1; font-size: 10.5px; color: #C6C7C9; }
.hm-timer em { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; font: 800 15px/1 Montserrat, Inter, sans-serif; font-variant-numeric: tabular-nums; }
.hm-note b { display: block; margin-top: 8px; font-size: 12px; color: #1D407C; }
.hm-note p { margin: 4px 0 0; font-size: 11px; line-height: 1.4; color: #586068; }
.hm-live { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px; background: #1D407C; color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.hm-live::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: #34D399; box-shadow: 0 0 0 3px rgba(52,211,153,.25); }
.hm-stamps { display: flex; flex-wrap: wrap; gap: 6px; align-content: center; justify-content: center; }
.stamp { padding: 4px 9px; border-radius: 6px; border: 1.5px dashed currentColor; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.stamp.ok { transform: rotate(-4deg); } .stamp.bad { transform: rotate(3deg); }
.hm-paycard { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; }
.hm-person { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px; border-radius: 8px; background: #fff; border: 1px solid #E6ECF4; }
.hm-person .av { width: 26px !important; height: 26px !important; }
.hm-person span { font-size: 12px; font-weight: 700; color: #1A2230; } .hm-person small { display: block; font-size: 10.5px; font-weight: 500; color: #586068; }
.pay-pill { padding: 3px 9px; border-radius: 999px; background: #fff; border: 1px solid #E6ECF4; font-size: 10.5px; font-weight: 600; color: #214C9C; }
.hm-shifts { display: grid; gap: 6px; }
.hm-shifts div { padding: 6px 8px; border-radius: 8px; background: #fff; border-left: 3px solid #3B88C8; }
.hm-shifts div:last-child { border-left-color: #F59E0B; }
.hm-shifts b { display: block; font-size: 11.5px; color: #1A2230; } .hm-shifts small { font-size: 10px; color: #586068; }
@media (max-width: 1099px) {
.hero-mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hm-col { display: contents; }
.hm-cta { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; }
.hm-cta .btn-primary, .hm-demo { flex: 1 1 220px; max-width: 280px; }
.hm-sheet { grid-row: span 2; }
}
@media (max-width: 639px) {
.hero { padding: 108px 0 56px; }
.hero .container { padding: 0 16px; }
.hero-trust { font-size: 12px; border-radius: 16px; max-width: min(100%, 340px); }
.hero-trust-copy { justify-content: center; }
.hero-mosaic { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 36px !important; }
.hm-cta { flex-direction: column; align-items: stretch; padding: 18px 16px; }
.hm-cta .btn-primary, .hm-demo { flex: none; max-width: none; width: 100%; }
.hm-sheet { grid-column: 1 / -1; grid-row: auto; }
.hm-card { padding: 11px; gap: 10px; }
.hm-visual { padding: 10px; }
.hm-proj .hm-visual { flex-direction: column; align-items: flex-start; }
.mod-chip { font-size: 12px; padding: 7px 12px; }
.suite-tab { padding: 9px 12px; font-size: 12.5px; }
.cycle-step { padding: 18px; }
}
@media (max-width: 380px) {
.hero h1 { font-size: clamp(1.65rem, 8.2vw, 2.1rem); }
.hero-trust { font-size: 11.5px; padding: 6px 10px 6px 6px; }
}
/* Module overview */
.mod-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid #E6ECF4; background: #fff; font-size: 13px; font-weight: 600; color: #586068; transition: all .2s; white-space: nowrap; }
.mod-chip:hover { border-color: #BCD0E8; color: #1D407C; }
.mod-chip[aria-pressed="true"] { background: #1D407C; border-color: #1D407C; color: #fff; }
.mod-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 16px; border: 1px solid #E6ECF4; background: #fff; box-shadow: 0 1px 2px rgba(29,64,124,.06), 0 2px 8px rgba(29,64,124,.06); transition: transform .25s, box-shadow .25s, border-color .25s, opacity .25s; }
.mod-card.hidden { display: none !important; }
.mod-card:hover { transform: translateY(-4px); border-color: #BCD0E8; box-shadow: 0 0 0 1px rgba(42,112,182,.15), 0 18px 44px -14px rgba(33,76,156,.35); }
.mod-card.dim { opacity: .28; transform: none; box-shadow: none; }
.mod-card .mod-group { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #2E77BA; }
.mod-card h3 { font-family: Montserrat, Inter, sans-serif; font-size: 17px; font-weight: 700; line-height: 1.3; color: #1D407C; }
.mod-card p { font-size: 14px; line-height: 1.55; color: #586068; }
.mod-card .mod-more { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #214C9C; }
.mod-card:hover .mod-more i { transform: translateX(3px); }
.mod-card .mod-more i { transition: transform .2s; }
.mod-card.mod-ai { background: #1D407C; background-image: radial-gradient(400px 220px at 100% 0%, rgba(59,136,200,.5), transparent 70%); border-color: #1D407C; }
.mod-card.mod-ai h3, .mod-card.mod-ai .mod-more { color: #fff; } .mod-card.mod-ai p { color: #C6C7C9; } .mod-card.mod-ai .mod-group { color: #93B5DB; }
.mod-card.mod-ai .feat-icon { background: rgba(255,255,255,.1); color: #fff; --tw-ring-color: rgba(255,255,255,.2); }
/* Suite tabs */
.suite-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 5px; border-radius: 14px; background: #fff; border: 1px solid #E6ECF4; box-shadow: 0 1px 2px rgba(29,64,124,.06); scrollbar-width: none; max-width: 100%; }
.suite-tabs::-webkit-scrollbar { display: none; }
.bg-mist .suite-tabs { background: #fff; }
.suite-tab { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 10px 16px; border-radius: 10px; font-family: Montserrat, Inter, sans-serif; font-size: 13.5px; font-weight: 600; color: #586068; transition: background .2s, color .2s; white-space: nowrap; }
.suite-tab:hover { color: #1D407C; background: #F4F7FB; }
.suite-tab[aria-selected="true"] { background: #1D407C; color: #fff; box-shadow: 0 8px 20px -10px rgba(29,64,124,.6); }
.suite-tab i { font-size: 12px; }
.suite-panel.pop { animation: suitePop .45s cubic-bezier(.2,.7,.2,1); }
@keyframes suitePop { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.suite-tagline { font-family: Montserrat, Inter, sans-serif; font-weight: 600; color: #203971; }
.suite-feats { display: grid; gap: 10px; }
.suite-feats li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.45; color: #1A2230; }
.suite-feats li i { margin-top: 3px; display: grid; place-items: center; flex-shrink: 0; width: 18px; height: 18px; border-radius: 999px; background: #EEF3FA; color: #214C9C; font-size: 9px; }
@media (min-width: 640px) { .suite-feats { grid-template-columns: 1fr 1fr; column-gap: 18px; } }
.suite-mock { position: relative; min-width: 0; }
.suite-mock::before { content: ""; position: absolute; inset: 8% 6%; background: radial-gradient(closest-side, rgba(42,112,182,.28), rgba(33,76,156,.12) 55%, transparent); filter: blur(40px); pointer-events: none; }
.suite-mock > * { position: relative; }
/* Lifecycle strip */
.cycle { display: grid; gap: 14px; }
@media (min-width: 768px) { .cycle { grid-template-columns: repeat(4, 1fr); } }
.cycle-step { position: relative; padding: 24px; border-radius: 16px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); }
.cycle-step b { display: block; font-family: Montserrat, Inter, sans-serif; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #93B5DB; }
.cycle-step h3 { margin-top: 8px; font-family: Montserrat, Inter, sans-serif; font-size: 18px; font-weight: 700; color: #fff; }
.cycle-step p { margin-top: 8px; font-size: 14px; line-height: 1.55; color: #C6C7C9; }
.cycle-step .cyc-mods { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.cycle-step .cyc-mods a { padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); font-size: 11.5px; font-weight: 600; color: #fff; transition: background .2s; }
.cycle-step .cyc-mods a:hover { background: rgba(255,255,255,.18); }
/* Benefits */
.hb-card { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 16px; border: 1px solid #E6ECF4; background: #fff; box-shadow: 0 1px 2px rgba(29,64,124,.06), 0 2px 8px rgba(29,64,124,.06); }
.hb-card p { font-size: 14.5px; line-height: 1.5; color: #1A2230; font-weight: 500; }
.hb-card a { margin-top: auto; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #2E77BA; }
.hb-card a:hover { color: #1D407C; }
.switch-col { border-radius: 18px; padding: 26px; }
.switch-col li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; }
.switch-col li + li { margin-top: 12px; }
.mod-card.mod-ai { grid-column: 1 / -1; }
@media (min-width: 768px) {
.mod-card.mod-ai { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto auto; column-gap: 20px; row-gap: 6px; align-items: center; padding: 26px 30px; }
.mod-card.mod-ai .feat-icon { grid-row: 1 / span 3; width: 56px; height: 56px; font-size: 20px; }
.mod-card.mod-ai .mod-group, .mod-card.mod-ai h3, .mod-card.mod-ai p { grid-column: 2; }
.mod-card.mod-ai h3 { font-size: 20px; }
.mod-card.mod-ai .mod-more { grid-column: 3; grid-row: 1 / span 3; margin: 0; padding: 12px 18px; border-radius: 8px; background: #fff; color: #1D407C; }
}
/* ===== Task management page ===== */
.sub { font-family: Montserrat, Inter, system-ui, sans-serif; font-weight: 600; font-size: 1.125rem; line-height: 1.4; color: #203971; }
@media (min-width: 640px) { .sub { font-size: 1.25rem; } }
.tick-list { display: grid; gap: .8rem; }
.tick-list li { display: flex; align-items: flex-start; gap: .75rem; font-size: 15px; line-height: 1.55; color: #475569; }
.tick-list li i { flex-shrink: 0; margin-top: .22rem; color: #2A70B6; }
.tick-dark li { color: #DCE6F3; }
.tick-dark li i { color: #93B5DB; }
.note { position: relative; padding: 1rem 1.25rem; border-left: 4px solid #3B88C8; border-radius: 0 12px 12px 0; background: #fff; box-shadow: 0 1px 2px rgba(29,64,124,.06), 0 2px 8px rgba(29,64,124,.06); font-size: 15px; line-height: 1.6; color: #1A2230; font-weight: 500; }
.bg-mist .note, #verification .note { background: #fff; }
#assign .note, #checklists .note, #attachments .note { background: #F4F7FB; box-shadow: none; }
.note-dark { background: rgba(255,255,255,.08) !important; color: #fff; box-shadow: none; border-left-color: #93B5DB; }
.cl-item { display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; border: 1px solid #E6ECF4; border-radius: 10px; cursor: pointer; transition: border-color .15s, background-color .15s; }
.cl-item:hover { border-color: #BCD0E8; background: #F8FAFD; }
.cl-item input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cl-box { display: grid; place-items: center; flex-shrink: 0; width: 20px; height: 20px; border-radius: 6px; border: 2px solid #CBD5E1; background: #fff; color: transparent; font-size: 10px; transition: all .15s; }
.cl-item input:checked + .cl-box { border-color: #10B981; background: #10B981; color: #fff; }
.cl-item input:focus-visible + .cl-box { outline: 2px solid #2A70B6; outline-offset: 2px; }
.cl-text { flex: 1; min-width: 0; color: #1A2230; font-weight: 500; }
.cl-item input:checked ~ .cl-text { color: #94A3B8; text-decoration: line-through; }
.cl-meta { font-size: 11px; font-weight: 600; color: #64748B; font-variant-numeric: tabular-nums; }
.ai-step { display: flex; align-items: center; gap: .65rem; padding: .5rem .65rem; border: 1px solid #E6ECF4; border-radius: 10px; background: #fff; color: #1A2230; }
.ai-step > span { display: grid; place-items: center; flex-shrink: 0; width: 20px; height: 20px; border-radius: 6px; background: #EEF3FA; color: #214C9C; font-size: 10px; font-weight: 700; }
.ai-step.pop { animation: stepIn .45s cubic-bezier(.2,.7,.2,1) both; }
@keyframes stepIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.voice-wave span { flex: 1 1 0; min-width: 2px; border-radius: 2px; background: #93B5DB; transform-origin: center; }
.voice-wave.playing span { animation: wave 1s ease-in-out infinite; }
/* ===== Lead quote / capture section (hero-style) ===== */
#lead-capture.lead-quote {
background:
radial-gradient(ellipse 55% 70% at 8% 20%, rgba(59,136,200,.16), transparent 60%),
radial-gradient(ellipse 45% 55% at 92% 75%, rgba(33,76,156,.12), transparent 55%),
radial-gradient(ellipse 40% 45% at 55% 10%, rgba(46,119,186,.08), transparent 50%),
linear-gradient(180deg, #F7FAFD 0%, #EEF4FA 100%);
}
#lead-capture .lead-quote-blobs {
pointer-events: none;
position: absolute;
inset: 0;
background:
radial-gradient(circle at 12% 78%, rgba(147,181,219,.35) 0%, transparent 28%),
radial-gradient(circle at 78% 18%, rgba(59,136,200,.18) 0%, transparent 26%);
}
@media (max-width: 640px) {
#lead-capture .lead-quote-card { border-radius: 1rem; }
}
/* ===== Lead quote form fields (compact) ===== */
#lead-capture .lead-input,
#demo-modal .lead-input {
width: 100%;
border-radius: 0.55rem;
border: 1px solid #E2E8F0;
background: #fff;
padding: 0.45rem 0.7rem;
font-size: 0.8125rem;
color: #1e293b;
outline: none;
transition: border-color .15s, box-shadow .15s;
}
#lead-capture .lead-input::placeholder,
#demo-modal .lead-input::placeholder { color: #94a3b8; }
#lead-capture .lead-input:focus,
#demo-modal .lead-input:focus {
border-color: #2E77BA;
box-shadow: 0 0 0 3px rgba(46,119,186,.12);
}
#lead-capture select.lead-input,
#demo-modal .quote-card select {
width: 100%;
height: 38px;
border: 1px solid #E4EAF1;
border-radius: 8px;
padding: 0 32px 0 10px;
font: 400 13px/38px inherit;
color: #1A2230;
background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23586068' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
appearance: none;
-webkit-appearance: none;
}
#demo-modal .quote-card select:focus {
outline: none;
border-color: #0A8CFF;
box-shadow: 0 0 0 3px rgba(10,140,255,.16);
}
#lead-capture .lead-mods {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
}
@media (max-width: 520px) {
#lead-capture .lead-mods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
#lead-capture .lead-pair {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 10px;
align-items: start;
}
@media (max-width: 520px) {
#lead-capture .lead-pair { grid-template-columns: minmax(0, 1fr); }
}
#lead-capture .lead-attach-box {
display: flex; align-items: center; gap: 8px; min-height: 42px;
border: 1px solid #E2E8F0; border-radius: 0.55rem; background: #fff; padding: 6px 8px;
}
#lead-capture .lead-mod,
#demo-modal .lead-mod {
display: flex;
align-items: center;
gap: 0.4rem;
min-width: 0;
border-radius: 0.5rem;
border: 1px solid #E2E8F0;
background: #F8FAFC;
padding: 0.35rem 0.45rem;
font-size: 0.68rem;
font-weight: 600;
line-height: 1.25;
color: #334155;
cursor: pointer;
transition: border-color .15s, background .15s;
}
#lead-capture .lead-mod span { min-width: 0; overflow-wrap: anywhere; }
#lead-capture .lead-mod:hover,
#demo-modal .lead-mod:hover { border-color: #93B5DB; background: #F1F6FC; }
#lead-capture .lead-mod input,
#demo-modal .lead-mod input {
width: 1rem;
height: 1rem;
flex-shrink: 0;
border-radius: 0.25rem;
accent-color: #1D407C;
}
#lead-capture .lead-mod:has(input:checked),
#demo-modal .lead-mod:has(input:checked) {
border-color: #2E77BA;
background: #EEF5FB;
color: #1D407C;
}
#lead-capture .lead-brief-wrap,
#demo-modal .lead-brief-wrap {
position: relative;
display: flex;
align-items: stretch;
border-radius: 0.75rem;
border: 1px solid #E2E8F0;
background: #fff;
overflow: hidden;
}
#lead-capture .lead-brief-wrap:focus-within,
#demo-modal .lead-brief-wrap:focus-within {
border-color: #2E77BA;
box-shadow: 0 0 0 4px rgba(46,119,186,.15);
}
#lead-capture .lead-brief-icon,
#demo-modal .lead-brief-icon {
position: absolute;
left: 0.65rem;
top: 0.65rem;
color: #94a3b8;
font-size: 0.8rem;
pointer-events: none;
}
#lead-capture .lead-brief-input,
#demo-modal .lead-brief-input {
width: 100%;
min-height: 3.25rem;
resize: vertical;
border: 0;
background: transparent;
padding: 0.55rem 2.4rem 0.55rem 2rem;
font-size: 0.8125rem;
color: #1e293b;
outline: none;
}
#lead-capture .lead-brief-input::placeholder,
#demo-modal .lead-brief-input::placeholder { color: #94a3b8; }
#lead-capture .lead-brief-upload,
#demo-modal .lead-brief-upload {
position: absolute;
right: 0.55rem;
top: 0.55rem;
display: grid;
place-items: center;
width: 2rem;
height: 2rem;
border-radius: 0.5rem;
color: #2E77BA;
cursor: pointer;
transition: background .15s;
}
#lead-capture .lead-brief-upload:hover,
#demo-modal .lead-brief-upload:hover { background: #EEF5FB; }
#lead-capture .lead-file-btn,
#demo-modal .lead-file-btn {
display: inline-flex;
align-items: center;
gap: 0.35rem;
border-radius: 0.5rem;
background: #1D407C;
padding: 0.4rem 0.75rem;
font-size: 0.75rem;
font-weight: 600;
color: #fff;
cursor: pointer;
transition: background .15s;
}
#lead-capture .lead-file-btn:hover,
#demo-modal .lead-file-btn:hover { background: #163566; }
#lead-capture .lead-submit,
#demo-modal .lead-submit {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
border-radius: 0.55rem;
background: #1D407C;
padding: 0.65rem 0.9rem;
font-size: 0.8125rem;
font-weight: 700;
color: #fff;
box-shadow: 0 8px 20px -10px rgba(29,64,124,.55);
transition: background .15s;
}
#lead-capture .lead-submit:hover,
#demo-modal .lead-submit:hover { background: #163566; }
/* Quote popup — match page form width (~720px) */
#demo-modal .quote-pop {
position: relative;
z-index: 1;
width: min(720px, calc(100vw - 32px));
max-height: calc(100vh - 32px);
overflow: auto;
}
#demo-modal .quote-card {
margin: 0;
width: 100%;
background: #fff;
border: 1px solid #D5E6F6;
border-radius: 22px;
padding: 0 14px 14px;
box-shadow: 0 22px 50px rgba(11, 79, 166, .16);
display: grid;
gap: 6px;
overflow: hidden;
color: #1A2230;
}
#lead-capture .lead-quote-card {
width: 100%;
max-width: 720px;
}
#demo-modal .quote-card.quote-done { position: relative; padding: 36px 18px 28px; text-align: center; justify-items: center; }
#demo-modal .quote-done .quote-x {
color: #64748b;
display: grid;
place-items: center;
}
#demo-modal .quote-done .quote-x svg { width: 16px; height: 16px; }
#demo-modal .quote-done .quote-x:hover { background: #f1f5f9; color: #1e293b; }
#demo-modal #demo-success.hidden,
#demo-modal #demo-form-wrap.hidden { display: none !important; }
#demo-modal .quote-head {
position: relative;
overflow: hidden;
margin: 0 -14px 2px;
padding: 16px 40px 14px 16px;
display: flex;
align-items: center;
gap: 12px;
text-align: left;
background: linear-gradient(100deg, #083A7A 0%, #0A6FE0 55%, #2B9BFF 100%);
}
#demo-modal .quote-waves { position: absolute; inset: 0; width: 100%; height: 100%; }
#demo-modal .quote-ico, #demo-modal .quote-head > div { position: relative; z-index: 1; }
#demo-modal .quote-head h2 { margin: 0; color: #fff; font-size: 1.15rem; font-weight: 800; line-height: 1.2; }
#demo-modal .quote-head p { margin: 2px 0 0; color: rgba(255,255,255,.86); font-size: 12px; font-weight: 500; line-height: 1.35; }
#demo-modal .quote-ico {
width: 42px; height: 42px; flex: none; display: grid; place-items: center;
border-radius: 12px; background: rgba(255,255,255,.16); color: #fff;
}
#demo-modal .quote-ico svg { width: 22px; height: 22px; }
#demo-modal .quote-x {
position: absolute; right: 8px; top: 8px; z-index: 2;
width: 28px; height: 28px; border: 0; border-radius: 8px;
background: transparent; color: #fff; cursor: pointer; font-size: 14px;
}
#demo-modal .quote-x:hover { background: rgba(255,255,255,.16); }
#demo-modal .quote-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 8px; }
#demo-modal .quote-card label { display: grid; gap: 2px; margin: 0; font-size: 12px; font-weight: 700; color: #1A2230; }
#demo-modal .quote-card label b { color: #d23b3b; }
#demo-modal .quote-card input:not([type="checkbox"]):not([type="file"]),
#demo-modal .quote-card textarea {
width: 100%; border: 1px solid #E4EAF1; border-radius: 8px; padding: 8px 10px;
font: 400 13px/1.35 inherit; color: #1A2230; background: #fff; box-shadow: none;
}
#demo-modal .quote-card input::placeholder,
#demo-modal .quote-card textarea::placeholder { color: #9aa6b2; }
#demo-modal .quote-card input:not([type="checkbox"]):not([type="file"]):focus,
#demo-modal .quote-card textarea:focus {
outline: none; border-color: #0A8CFF; box-shadow: 0 0 0 3px rgba(10,140,255,.16);
}
#demo-modal .quote-card fieldset {
margin: 0; padding: 0; border: 0; min-width: 0;
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px;
}
#demo-modal .quote-card legend { grid-column: 1 / -1; font-size: 12px; font-weight: 700; padding: 0; }
#demo-modal .quote-card legend b { color: #d23b3b; }
#demo-modal .quote-card fieldset label {
position: relative; display: flex; align-items: center; gap: 6px;
min-height: 28px; margin: 0; padding: 4px 8px; border-radius: 8px;
border: 1px solid #E3EEF8; background: #fff; font-size: 11.5px; font-weight: 600; line-height: 1.25; cursor: pointer;
}
#demo-modal .quote-card fieldset input { width: 14px; height: 14px; flex: none; accent-color: #0A8CFF; }
#demo-modal .quote-card fieldset label:has(input:checked) { background: #E8F3FF; border-color: #9CC6F2; }
#demo-modal .quote-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 12px; align-items: start; }
#demo-modal .quote-box { position: relative; display: block; }
#demo-modal .quote-box svg { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; margin-top: -8px; color: #8AA0B8; pointer-events: none; }
#demo-modal .quote-box textarea { height: 48px; min-height: 48px; resize: none; padding: 12px 12px 12px 36px; line-height: 22px; }
#demo-modal .quote-file .quote-drop {
position: relative; display: flex; align-items: center; gap: 8px; height: 48px;
padding: 6px 10px; border: 1px solid #E4EAF1; border-radius: 8px; background: #fff;
}
#demo-modal .quote-file .quote-drop svg { width: 20px; height: 20px; flex: none; color: #0A8CFF; }
#demo-modal .quote-file .quote-drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
#demo-modal .quote-file .quote-drop b { flex: none; padding: 5px 10px; border-radius: 999px; background: #0B4FA6; color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; line-height: 1; }
#demo-modal .quote-file > span em { font-style: normal; font-weight: 600; color: #6B7177; }
#demo-modal .quote-file .quote-fname { flex: 1; min-width: 0; font-style: normal; font-weight: 500; font-size: 12px; color: #6B7177; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#demo-modal .quote-file > small { font-size: 11px; font-weight: 500; color: #6B7177; line-height: 1.3; }
#demo-modal .quote-employees {
display: grid; gap: 6px; margin: 0 0 8px;
}
#demo-modal .quote-employees span { font-size: 12px; font-weight: 700; color: #1B2838; }
#demo-modal .quote-employees input {
width: 100%; border: 1px solid #E3EAF2; border-radius: 12px; padding: 10px 12px;
font: inherit; font-size: 13px; color: #1B2838; background: #fff;
}
#demo-modal .quote-employees input:focus { outline: none; border-color: #0A8CFF; box-shadow: 0 0 0 3px rgba(10,140,255,.12); }
#demo-modal .quote-agree { grid-template-columns: 16px 1fr; align-items: center; gap: 8px; font-weight: 600; font-size: 12px; }
#demo-modal .quote-agree input { width: 16px; height: 16px; accent-color: #0A8CFF; }
#demo-modal .quote-error,
#demo-modal .quote-ok { display: none; margin: 0; font-size: 12px; font-weight: 600; line-height: 1.45; }
#demo-modal .quote-error { color: #e11d48; }
#demo-modal .quote-ok { color: #0E7A3D; }
#demo-modal .quote-error:not(.hidden),
#demo-modal .quote-ok:not(.hidden) { display: block; }
#demo-modal .quote-submit {
width: 100%; margin-top: 2px; padding: 12px 16px; border: 0; border-radius: 999px;
background: linear-gradient(90deg, #0B4FA6, #1484F0); color: #fff;
font-size: 14px; font-weight: 700; line-height: 1.2; cursor: pointer;
display: flex; align-items: center; gap: 8px;
box-shadow: 0 12px 32px rgba(10,140,255,.28);
}
#demo-modal .quote-submit svg { width: 16px; height: 16px; flex: none; }
#demo-modal .quote-submit span { margin-left: auto; }
#demo-modal .quote-submit-label { font-style: normal; font-weight: inherit; }
#demo-modal .quote-submit:hover { filter: brightness(1.05); }
#demo-modal .quote-submit:disabled { opacity: .72; cursor: wait; filter: none; }
@media (max-width: 520px) {
#demo-modal .quote-grid, #demo-modal .quote-pair { grid-template-columns: minmax(0, 1fr); }
#demo-modal .quote-card fieldset { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ===== Accounting page ===== */
.acc-panel[hidden] { display: none !important; }
.rail-a { min-width: 30px; width: auto; padding: 0 6px; }
/* Hero lead-to-cash steps */
.l2c { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.l2c li { position: relative; min-width: 0; }
.l2c li:not(:last-child)::after { content: ""; position: absolute; top: 17px; right: -4px; width: 4px; height: 2px; background: #BCD0E8; }
.l2c-btn { display: flex; width: 100%; flex-direction: column; align-items: center; gap: 4px; border-radius: 10px; border: 1px solid #E6ECF4; background: #fff; padding: 7px 2px 6px; font-size: 10px; font-weight: 600; line-height: 1.15; color: #475569; text-align: center; transition: all .15s; }
.l2c-btn i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: #EEF3FA; color: #2A70B6; font-size: 10px; }
.l2c-btn:hover { border-color: #BCD0E8; color: #1D407C; }
.l2c-btn[aria-pressed="true"] { border-color: #1D407C; background: #1D407C; color: #fff; }
.l2c-btn[aria-pressed="true"] i { background: rgba(255,255,255,.16); color: #fff; }
.l2c-btn:focus-visible { outline: 2px solid #2A70B6; outline-offset: 2px; }
@media (max-width: 479px) { .l2c { grid-template-columns: repeat(4, minmax(0, 1fr)); } .l2c li::after { display: none; } }
/* Journal lines */
.jr { border: 1px solid #E6ECF4; border-radius: 10px; overflow: hidden; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.jr-row { display: grid; grid-template-columns: minmax(0,1fr) 92px 92px; gap: 8px; padding: 6px 10px; border-top: 1px solid #F1F5F9; }
.jr-row:first-child { border-top: 0; background: #F8FAFD; font-size: 10px; font-weight: 700; color: #64748B; }
.jr-row span:not(:first-child) { text-align: right; }
.jr-row.cr span:first-child { padding-left: 14px; }
.jr-row b { font-weight: 600; color: #1A2230; }
@media (max-width: 479px) { .jr-row { grid-template-columns: minmax(0,1fr) 74px 74px; } }
/* Overview */
.ov-card { display: flex; gap: 14px; height: 100%; border: 1px solid #E2E8F0; border-radius: 1.1rem; background: #fff; padding: 1.25rem; box-shadow: 0 1px 2px rgba(29,64,124,.04); }
.ov-card h3 { font-size: 1.05rem; font-weight: 700; color: #1D407C; }
.ov-card p { margin-top: .35rem; font-size: 15px; line-height: 1.6; color: #475569; }
.chain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: .5rem; }
.chain span { border-radius: 999px; background: #EEF3FA; padding: 3px 10px; font-size: 12.5px; font-weight: 600; color: #214C9C; }
.chain span.end { background: #1D407C; color: #fff; }
.chain i { font-size: 10px; color: #93B5DB; }
/* Grouped feature cards */
.grp-chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; border: 1px solid #DCE6F3; background: #fff; padding: 5px 11px; font-size: 12.5px; font-weight: 600; color: #1D407C; text-decoration: none; transition: all .15s; }
.grp-chip i { font-size: 11px; color: #2A70B6; }
.grp-chip em { font-style: normal; font-size: 11px; color: #94A3B8; }
.grp-chip:hover { border-color: #93B5DB; background: #EEF3FA; }
.grp-chip:focus-visible { outline: 2px solid #2A70B6; outline-offset: 2px; }
.bg-mist .grp-chip { background: #fff; }
.grp-grid { columns: 1; column-gap: 1rem; }
@media (min-width: 768px) { .grp-grid { columns: 2; } }
@media (min-width: 1200px) { .grp-grid { columns: 3; } }
.grp-card { break-inside: avoid; margin-bottom: 1rem; border: 1px solid #E2E8F0; border-radius: 1.1rem; background: #fff; padding: 1.25rem; box-shadow: 0 1px 2px rgba(29,64,124,.04); scroll-margin-top: 150px; }
.grp-card h3 { flex: 1; min-width: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.3; color: #1D407C; }
.grp-n { flex-shrink: 0; border-radius: 999px; background: #EEF3FA; padding: 2px 9px; font-size: 11px; font-weight: 700; color: #214C9C; }
.grp-card .tick-list li { font-size: 14.5px; }
.grp-card .tick-list { margin-top: 1rem; gap: .65rem; }
/* Invoice */
.inv { border: 1px solid #E6ECF4; border-radius: 12px; padding: 12px; background: linear-gradient(#fff, #fff) padding-box; }
.inv-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.inv-k { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: #2A70B6; }
.inv-no { font-family: Montserrat, Inter, sans-serif; font-size: 15px; font-weight: 800; color: #1D407C; }
.inv-s { font-size: 10.5px; color: #64748B; }
.inv-irn { display: flex; align-items: center; gap: 8px; flex-shrink: 0; border-radius: 10px; background: #F4F7FB; padding: 6px 8px; }
.inv-irn b { display: block; font-size: 10.5px; color: #047857; }
.inv-irn em { display: block; font-style: normal; font-size: 9.5px; color: #64748B; }
.qr { width: 30px; height: 30px; border-radius: 3px; background:
conic-gradient(from 90deg at 3px 3px, #1A2230 25%, transparent 0) 0 0 / 6px 6px,
#fff; box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px #CBD5E1; opacity: .85; }
.inv-box { border-radius: 10px; background: #F8FAFD; padding: 7px 9px; min-width: 0; }
.inv-box span { display: block; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #94A3B8; }
.inv-box b { display: block; font-size: 12px; color: #1A2230; }
.inv-box em { display: block; font-style: normal; font-size: 10.5px; color: #64748B; }
.inv-t { width: 100%; border-collapse: collapse; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.inv-t th { padding: 6px 8px 6px 0; border-bottom: 1px solid #E6ECF4; text-align: left; font-size: 10px; font-weight: 700; color: #64748B; white-space: nowrap; }
.inv-t td { padding: 7px 8px 7px 0; border-bottom: 1px solid #F1F5F9; color: #1A2230; vertical-align: middle; }
.inv-t td small { display: block; font-size: 10px; color: #94A3B8; }
.inv-t .num { text-align: right; white-space: nowrap; }
.inv-t tr:last-child td { border-bottom: 0; }
.inv-t tr.pop td { animation: rowIn .45s ease; }
@keyframes rowIn { from { background: #EEF3FA; } to { background: transparent; } }
.inv-tot { margin-top: 6px; margin-left: auto; max-width: 270px; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.inv-tot p { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; color: #475569; }
.inv-tot p b { color: #1A2230; }
.inv-tot p.tot { margin-top: 3px; border-top: 1px solid #E6ECF4; padding-top: 6px; font-weight: 700; }
.inv-tot p.tot b { font-family: Montserrat, Inter, sans-serif; font-size: 14px; color: #1D407C; }
.inv-tot p.words { display: block; font-size: 10px; font-style: italic; color: #64748B; text-align: right; }
.inv-tot.pop { animation: rowIn .45s ease; }
@media (max-width: 479px) { .inv-tot { max-width: none; } .inv-top { flex-direction: column; } }
/* Ageing */
.age-bars { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px; }
.ag-bar { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; min-width: 0; border: 1px solid #E6ECF4; border-radius: 10px; background: #fff; padding: 8px; text-align: left; transition: all .15s; }
.ag-bar:hover { border-color: #BCD0E8; }
.ag-bar[aria-pressed="true"] { border-color: #1D407C; box-shadow: 0 0 0 1px #1D407C; }
.ag-bar:focus-visible { outline: 2px solid #2A70B6; outline-offset: 2px; }
.ag-col { height: 54px; display: flex; align-items: flex-end; }
.ag-col span { display: block; width: 100%; border-radius: 6px 6px 2px 2px; transition: height .4s; }
.ag-bar b { font-size: 10px; font-weight: 700; color: #64748B; }
.ag-bar em { font-style: normal; font-size: 12px; font-weight: 800; color: #1D407C; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ag-row { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 10px; border: 1px solid #EEF2F7; border-radius: 10px; padding: 7px 10px; font-size: 11.5px; }
.ag-row b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: #1A2230; }
.ag-row em { display: block; font-style: normal; font-size: 10.5px; color: #64748B; }
.ag-row strong { font-variant-numeric: tabular-nums; color: #1D407C; white-space: nowrap; }
.ag-row.pop { animation: rowIn .45s ease; }
@media (max-width: 479px) { .ag-bar em { font-size: 10.5px; } .ag-bar { padding: 6px; } }
/* Pick rows (checkbox lists) */
.pk-row { display: grid; grid-template-columns: 20px minmax(0,1fr) auto; align-items: center; gap: 10px; border: 1px solid #E6ECF4; border-radius: 10px; background: #fff; padding: 7px 10px; font-size: 11.5px; cursor: pointer; transition: border-color .15s, background-color .15s; }
.pk-row:hover { border-color: #BCD0E8; }
.pk-row:has(input:checked) { border-color: #93B5DB; background: #F8FAFD; }
.pk-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pk-box { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; border: 2px solid #CBD5E1; background: #fff; color: transparent; font-size: 9px; transition: all .15s; }
.pk-row input:checked + .pk-box { border-color: #1D407C; background: #1D407C; color: #fff; }
.pk-row input:focus-visible + .pk-box { outline: 2px solid #2A70B6; outline-offset: 2px; }
.pk-row b { display: block; font-weight: 600; color: #1A2230; }
.pk-row em { display: block; font-style: normal; font-size: 10.5px; color: #64748B; }
.pk-row strong { text-align: right; font-variant-numeric: tabular-nums; color: #1D407C; white-space: nowrap; }
.pk-row strong small { display: block; font-size: 10px; font-weight: 600; color: #B45309; }
.pay-sum { border-radius: 10px; background: #F4F7FB; padding: 8px 12px; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.pay-sum p { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; color: #475569; }
.pay-sum p b { color: #1A2230; }
.pay-sum p.tot { margin-top: 3px; border-top: 1px solid #DCE6F3; padding-top: 6px; font-weight: 700; }
.pay-sum p.tot b { font-family: Montserrat, Inter, sans-serif; font-size: 14px; color: #1D407C; }
/* Bank reconciliation */
.rec-row { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 10px; border: 1px solid #E6ECF4; border-radius: 10px; background: #fff; padding: 7px 10px; font-size: 11.5px; transition: border-color .2s, background-color .2s; }
.rec-row .d { font-size: 10px; font-weight: 700; line-height: 1.2; color: #64748B; text-align: center; }
.rec-row b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: #1A2230; }
.rec-row em { display: block; font-style: normal; font-size: 10.5px; color: #64748B; }
.rec-row em i { margin-right: 3px; color: #2A70B6; }
.rec-amt { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rec-amt strong { display: block; font-size: 12px; }
.rec-amt .cr { color: #047857; }
.rec-amt .dr { color: #BE123C; }
.rec-amt .act-btn { margin-top: 3px; padding: 3px 8px; font-size: 10.5px; }
.rec-row.ok { border-color: #A7F3D0; background: #F0FDF8; }
.rec-row.pop { animation: rowIn .45s ease; }
/* Warehouse and valuation rows */
.wh-row { display: grid; grid-template-columns: minmax(0,1fr) 120px auto; align-items: center; gap: 10px; border: 1px solid #EEF2F7; border-radius: 10px; padding: 7px 10px; font-size: 11.5px; }
.wh-row b { display: block; font-weight: 600; color: #1A2230; }
.wh-row em { display: block; font-style: normal; font-size: 10.5px; color: #64748B; }
.wh-row.dim { opacity: .4; }
.wh-row.low .meter > span { background: linear-gradient(90deg, #F59E0B, #FBBF24); }
.wh-row .meter .th { position: absolute; top: -3px; width: 2px; height: 14px; border-radius: 2px; background: #B45309; }
.vm-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; border-radius: 8px; background: #F8FAFD; padding: 5px 10px; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.vm-row span { color: #475569; }
.vm-row b { color: #1A2230; }
.vm-row.tot { background: #EEF3FA; }
.vm-row.tot b { color: #1D407C; }
@media (max-width: 479px) { .wh-row { grid-template-columns: minmax(0,1fr) 70px; } .wh-row > :last-child { grid-column: 1 / -1; justify-self: start; } }
/* P&L */
.pl { font-size: 12px; font-variant-numeric: tabular-nums; }
.pl p { display: flex; justify-content: space-between; gap: 10px; padding: 5px 2px; border-top: 1px solid #F1F5F9; color: #475569; }
.pl p b { color: #1A2230; font-weight: 600; }
.pl p.h { border-top: 0; padding-top: 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #2A70B6; }
.pl p.sub-t { font-weight: 700; color: #1A2230; background: #F8FAFD; padding-left: 6px; padding-right: 6px; }
.pl p.net { margin-top: 4px; border-radius: 10px; border-top: 0; background: #1D407C; padding: 8px 10px; color: #fff; font-weight: 700; }
.pl p.net b { color: #fff; font-family: Montserrat, Inter, sans-serif; font-size: 14px; }
.pl.pop { animation: rowIn .45s ease; }
.ls-row { display: grid; grid-template-columns: 110px minmax(0,1fr) 92px; align-items: center; gap: 10px; width: 100%; border: 1px solid #EEF2F7; border-radius: 10px; background: #fff; padding: 7px 10px; font-size: 11.5px; text-align: left; transition: all .15s; }
.ls-row:hover { border-color: #BCD0E8; }
.ls-row[aria-pressed="true"] { border-color: #1D407C; box-shadow: 0 0 0 1px #1D407C; }
.ls-row:focus-visible { outline: 2px solid #2A70B6; outline-offset: 2px; }
.ls-row b { font-weight: 600; color: #1A2230; }
.ls-row strong { text-align: right; font-variant-numeric: tabular-nums; color: #1D407C; }
@media (max-width: 479px) { .ls-row { grid-template-columns: 90px minmax(0,1fr) 80px; gap: 6px; } }
/* Portals */
.po-row { display: grid; grid-template-columns: 26px minmax(0,1fr) auto; align-items: center; gap: 10px; border: 1px solid #EEF2F7; border-radius: 10px; padding: 7px 10px; font-size: 11.5px; }
.po-row > i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #EEF3FA; color: #2A70B6; font-size: 11px; }
.po-row b { display: block; font-weight: 600; color: #1A2230; }
.po-row em { display: block; font-style: normal; font-size: 10.5px; color: #64748B; }
.po-act { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
@media (max-width: 479px) { .po-row { grid-template-columns: 26px minmax(0,1fr); } .po-act { grid-column: 2; justify-content: flex-start; } }
.drop-v { display: flex; align-items: center; justify-content: center; gap: 8px; border: 1.5px dashed #BCD0E8; border-radius: 12px; background: #F8FAFD; padding: 12px; font-size: 12px; font-weight: 600; color: #214C9C; cursor: pointer; transition: all .15s; }
.drop-v:hover { background: #EEF3FA; }
.drop-v:focus-visible { outline: 2px solid #2A70B6; outline-offset: 2px; }
/* Workflow rules */
.wf-row { display: grid; grid-template-columns: 26px minmax(0,1fr) auto; align-items: center; gap: 10px; border: 1px solid #EEF2F7; border-radius: 10px; padding: 7px 10px; font-size: 11.5px; }
.wf-row > i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #EEF3FA; color: #2A70B6; font-size: 11px; }
.wf-row b { display: block; font-weight: 600; color: #1A2230; }
.wf-row em { display: block; font-style: normal; font-size: 10.5px; color: #64748B; }
#ap-chain .ap-step.off { opacity: .4; }
#ap-chain .ap-step.on { border-color: #93B5DB; background: #F8FAFD; }
/* Permissions */
.perm-t td:not(:first-child), .perm-t th:not(:first-child) { text-align: center; }
.perm-t td:first-child { font-weight: 600; }
/* Responsive data tables */
.tbl-card { overflow: hidden; border: 1px solid #E2E8F0; border-radius: 1.25rem; background: #fff; box-shadow: 0 1px 2px rgba(29,64,124,.04); }
.data-tbl { width: 100%; border-collapse: collapse; text-align: left; }
.data-tbl thead th { background: #1D407C; padding: 14px 20px; font-family: Montserrat, Inter, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.data-tbl tbody th, .data-tbl tbody td { padding: 14px 20px; border-top: 1px solid #EEF2F7; vertical-align: top; font-size: 15px; line-height: 1.55; }
.data-tbl tbody th { font-family: Montserrat, Inter, sans-serif; font-weight: 700; color: #1D407C; }
.data-tbl tbody td { color: #475569; }
.data-tbl tbody tr:nth-child(even) { background: #F8FAFD; }
.rep-tbl tbody th { width: 28%; white-space: nowrap; }
.adv-tbl thead th { width: 33.33%; }
.adv-tbl thead th:first-child { width: 40%; }
.adv-tbl thead th.adv-us { background: #214C9C; }
.adv-badge { display: inline-flex; align-items: center; gap: 6px; }
.adv-tbl tbody td:last-child { background: rgba(238,243,250,.65); }
.v { display: inline-flex; align-items: flex-start; gap: 7px; font-weight: 600; }
.v i { margin-top: 4px; font-size: 13px; }
.v-good { color: #047857; }
.v-mid { color: #B45309; }
.v-no { color: #BE123C; }
@media (max-width: 767px) {
.data-tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.data-tbl, .data-tbl tbody, .data-tbl tr, .data-tbl th, .data-tbl td { display: block; width: 100% !important; }
.data-tbl tbody tr { padding: 14px 16px; border-top: 1px solid #EEF2F7; }
.data-tbl tbody tr:first-child { border-top: 0; }
.data-tbl tbody th, .data-tbl tbody td { padding: 0; border: 0; font-size: 14.5px; }
.rep-tbl tbody th { white-space: normal; }
.rep-tbl tbody td { margin-top: 4px; }
.adv-tbl tbody td { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; margin-top: 8px; border-radius: 10px; background: #fff; padding: 8px 10px; }
.adv-tbl tbody tr:nth-child(even) td { background: #fff; }
.adv-tbl tbody tr td:last-child { background: #EEF3FA; }
.adv-tbl tbody td::before { content: attr(data-label); font-size: 12px; font-weight: 600; color: #64748B; }
}
.status:has(> i)::before { display: none; }
/* ===== About page ===== */
/* Hero stats */
.ab-stat { min-width: 0; border: 1px solid #E2E8F0; border-radius: 14px; background: rgba(255,255,255,.85); padding: 12px 12px 11px; box-shadow: 0 1px 2px rgba(29,64,124,.04); }
.ab-stat dd { margin: 0; }
.ab-stat b { display: block; font-family: Montserrat, Inter, sans-serif; font-size: 1.9rem; font-weight: 800; line-height: 1; color: #1D407C; }
.ab-stat span { display: block; margin-top: 6px; font-size: 11.5px; line-height: 1.35; color: #64748B; }
/* Hero orbit */
.ab-orbit { position: relative; container-type: inline-size; width: 100%; max-width: 540px; aspect-ratio: 1; margin: 0 auto; }
.ab-ring { position: absolute; inset: 11%; border-radius: 50%; border: 1.5px dashed #BCD0E8; }
.ab-ring-arc { position: absolute; inset: 11%; border-radius: 50%; padding: 3px; background: conic-gradient(from 0deg, transparent 0 55%, #214C9C 70%, #3B88C8 82%, #2E77BA 92%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: abSpin 14s linear infinite; }
@keyframes abSpin { to { transform: rotate(360deg); } }
.ab-core { position: absolute; left: 50%; top: 50%; width: 50%; aspect-ratio: 1; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: 50%; background: #fff; padding: 9%; text-align: center; box-shadow: 0 0 0 10px rgba(238,243,250,.8), 0 30px 60px -24px rgba(29,64,124,.35); }
.ab-core-logo { width: 78%; height: auto; }
.ab-core-cap { min-height: 3.6em; }
.ab-core-cap b { display: block; font-family: Montserrat, Inter, sans-serif; font-size: clamp(11px, 3cqw, 14px); font-weight: 700; color: #1D407C; }
.ab-core-cap span { display: block; margin-top: 2px; font-size: clamp(9.5px, 2.4cqw, 12px); line-height: 1.35; color: #64748B; }
.ab-core-cap.pop { animation: cmIn .35s ease both; }
.ab-node { --r: 39cqw; position: absolute; left: 50%; top: 50%; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 25cqw; transform: translate(-50%,-50%) rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a))); background: none; border: 0; padding: 0; cursor: pointer; }
@media (max-width: 479px) { .ab-node { --r: 37cqw; } }
.ab-node-i { display: grid; place-items: center; width: clamp(40px, 12cqw, 58px); height: clamp(40px, 12cqw, 58px); border-radius: 16px; border: 1px solid #E2E8F0; background: #fff; font-size: clamp(15px, 4cqw, 20px); color: #2A70B6; box-shadow: 0 1px 2px rgba(29,64,124,.06), 0 8px 20px -10px rgba(29,64,124,.35); transition: transform .25s, background .25s, color .25s, box-shadow .25s; }
.ab-node-t { font-family: Montserrat, Inter, sans-serif; font-size: clamp(10px, 2.6cqw, 12.5px); font-weight: 700; line-height: 1.2; color: #1D407C; text-align: center; }
.ab-node:hover .ab-node-i, .ab-node[aria-pressed="true"] .ab-node-i { transform: translateY(-3px); background: linear-gradient(135deg, #214C9C, #3B88C8); color: #fff; border-color: transparent; box-shadow: 0 0 0 1px rgba(42,112,182,.20), 0 18px 44px -14px rgba(33,76,156,.55); }
.ab-node:focus-visible { outline: none; }
.ab-node:focus-visible .ab-node-i { outline: 2px solid #2A70B6; outline-offset: 3px; }
/* Who we are: scattered vs one system */
.ab-merge { border: 1px solid #E2E8F0; border-radius: 1.5rem; background: linear-gradient(180deg, #fff, #F4F7FB); padding: 16px; box-shadow: 0 1px 2px rgba(29,64,124,.06), 0 30px 60px -24px rgba(29,64,124,.25); }
.ab-seg { display: inline-flex; gap: 4px; border-radius: 12px; background: #EEF3FA; padding: 4px; }
.ab-seg button { border-radius: 9px; padding: 7px 12px; font-family: Montserrat, Inter, sans-serif; font-size: 12px; font-weight: 700; color: #475569; transition: background .2s, color .2s, box-shadow .2s; }
.ab-seg button[aria-pressed="true"] { background: #fff; color: #1D407C; box-shadow: 0 1px 3px rgba(29,64,124,.15); }
.ab-merge-stage { position: relative; height: 300px; margin-top: 14px; overflow: hidden; border-radius: 1rem; }
.ab-app { --w: 196px; position: absolute; display: flex; align-items: center; gap: 10px; width: var(--w); border: 1px dashed #CBD5E1; border-radius: 14px; background: #fff; padding: 10px 12px; transition: left .7s cubic-bezier(.2,.8,.2,1), top .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1), opacity .5s; }
.ab-app b { display: block; font-size: 13px; font-weight: 700; color: #1E293B; }
.ab-app em { display: block; font-style: normal; font-size: 11.5px; color: #64748B; }
.ab-app-i { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; font-size: 15px; }
.ab-app-1 { left: 3%; top: 6%; transform: rotate(-3deg); }
.ab-app-2 { left: calc(97% - var(--w)); top: 14%; transform: rotate(2.5deg); }
.ab-app-3 { left: 6%; top: calc(88% - 56px); transform: rotate(2deg); }
.ab-app-4 { left: calc(94% - var(--w)); top: calc(94% - 56px); transform: rotate(-2deg); }
.ab-one { position: absolute; left: 50%; top: 50%; display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(330px, 88%); transform: translate(-50%,-50%) scale(.6); opacity: 0; border-radius: 1.25rem; background: #1D407C; padding: 22px 18px; text-align: center; color: #fff; transition: transform .6s cubic-bezier(.2,.8,.2,1) .15s, opacity .45s .15s; box-shadow: 0 30px 60px -24px rgba(29,64,124,.6); }
.ab-one b { font-family: Montserrat, Inter, sans-serif; font-size: 15px; font-weight: 700; }
.ab-one-i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(135deg, #214C9C, #3B88C8); font-size: 18px; }
.ab-one-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.ab-one-tags span { border-radius: 999px; background: rgba(255,255,255,.12); padding: 3px 9px; font-size: 11px; font-weight: 600; color: #DCE6F3; }
.ab-merge[data-state="after"] .ab-app { left: calc(50% - var(--w) / 2); top: calc(50% - 28px); transform: scale(.55); opacity: 0; }
.ab-merge[data-state="after"] .ab-one { transform: translate(-50%,-50%) scale(1); opacity: 1; }
@media (max-width: 479px) {
.ab-app { --w: 150px; padding: 8px 9px; gap: 8px; }
.ab-app b { font-size: 12px; } .ab-app em { font-size: 10.5px; }
.ab-app-i { width: 28px; height: 28px; font-size: 13px; }
.ab-merge-stage { height: 280px; }
}
/* Vision and mission */
.ab-vision { position: relative; display: flex; flex-direction: column; justify-content: center; overflow: hidden; border-radius: 1.5rem; background: #1D407C; padding: 36px 28px; }
.ab-mission { border: 1px solid #E2E8F0; border-radius: 1.5rem; background: #fff; padding: 36px 28px; box-shadow: 0 1px 2px rgba(29,64,124,.06), 0 2px 8px rgba(29,64,124,.06); }
@media (min-width: 640px) { .ab-vision, .ab-mission { padding: 44px 40px; } }
.ab-vm-k { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; background: rgba(255,255,255,.12); padding: 5px 12px; font-family: Montserrat, Inter, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #DCE6F3; }
.ab-vm-k-light { background: #EEF3FA; color: #203971; }
.ab-scale { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 600; color: #BCD0E8; }
.ab-scale > span:not(.ab-scale-line) { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.ab-scale-line { flex: 1; height: 3px; min-width: 30px; border-radius: 99px; background: linear-gradient(90deg, rgba(59,136,200,.3), #3B88C8); }
.ab-mi { display: flex; align-items: flex-start; gap: 14px; border-radius: 14px; background: #F8FAFD; padding: 14px 16px; }
.ab-mi p { font-size: 15.5px; line-height: 1.5; color: #334155; }
.ab-mi-n { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 10px; background: linear-gradient(135deg, #214C9C, #3B88C8); font-family: Montserrat, Inter, sans-serif; font-size: 13px; font-weight: 800; color: #fff; }
/* Modules table */
.ab-mod-tbl tbody th { width: 34%; white-space: nowrap; }
.ab-mod { display: inline-flex; align-items: center; gap: 12px; }
.ab-mod-i { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; background: #EEF3FA; font-size: 14px; color: #2A70B6; }
.ab-mod-tbl tbody td { vertical-align: middle; }
@media (max-width: 767px) {
.ab-mod-tbl tbody th { white-space: normal; }
.ab-mod-tbl tbody td { margin-top: 8px; padding-left: 46px; }
}
/* Leadership table */
.ab-team-tbl thead th:first-child { width: 38%; }
.ab-team-tbl thead th:last-child { width: 32%; }
.ab-team-tbl tbody th, .ab-team-tbl tbody td { vertical-align: middle; }
.ab-who { display: inline-flex; align-items: center; gap: 12px; color: #1D407C; text-decoration: none; }
.ab-who:hover { color: #2A70B6; }
.ab-xp { display: grid; grid-template-columns: 140px auto; align-items: center; gap: 12px; white-space: nowrap; font-weight: 600; color: #1D407C; }
.ab-xp-bar { position: relative; height: 6px; overflow: hidden; border-radius: 99px; background: #E6ECF4; }
.ab-xp-bar > span { position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 99px; background: linear-gradient(90deg, #214C9C, #3B88C8); transform-origin: left; transform: scaleX(0); transition: transform 1s cubic-bezier(.2,.8,.2,1); }
.tbl-card.in .ab-xp-bar > span { transform: scaleX(1); }
.ab-total { display: flex; align-items: center; justify-content: center; gap: 8px; border-top: 1px solid #E6ECF4; background: #EEF3FA; padding: 14px 20px; font-family: Montserrat, Inter, sans-serif; font-size: 15px; font-weight: 600; color: #203971; }
.ab-total i { color: #2A70B6; }
@media (max-width: 767px) {
.ab-team-tbl tbody td { display: grid !important; grid-template-columns: 96px minmax(0,1fr); align-items: center; gap: 10px; margin-top: 8px; padding-left: 50px !important; }
.ab-team-tbl tbody td::before { content: attr(data-label); font-size: 12px; font-weight: 600; color: #64748B; }
.ab-xp { grid-template-columns: minmax(0,1fr) 64px; }
}
/* Avatars (initials) */
.ab-ava { display: grid; place-items: center; flex-shrink: 0; width: 64px; height: 64px; border-radius: 20px; font-family: Montserrat, Inter, sans-serif; font-size: 22px; font-weight: 800; letter-spacing: .02em; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 10px 24px -12px rgba(29,64,124,.6); }
.ab-ava-sm { width: 38px; height: 38px; border-radius: 12px; font-size: 13px; }
.ava-1 { background: linear-gradient(135deg, #12213F, #1D407C); }
.ava-2 { background: linear-gradient(135deg, #1D407C, #2A70B6); }
.ava-3 { background: linear-gradient(135deg, #214C9C, #3B88C8); }
.ava-4 { background: linear-gradient(135deg, #2F2D2E, #747578); }
.ava-5 { background: linear-gradient(135deg, #203971, #2E77BA); }
.ava-6 { background: linear-gradient(135deg, #586068, #A0A2A5); }
/* Why choose */
.ab-why { display: flex; flex-direction: column; gap: 12px; height: 100%; border: 1px solid #E2E8F0; border-radius: 1.25rem; background: #fff; padding: 22px; box-shadow: 0 1px 2px rgba(29,64,124,.04); transition: transform .25s, border-color .25s, box-shadow .25s; }
.ab-why:hover { transform: translateY(-3px); border-color: #BCD0E8; box-shadow: 0 0 0 1px rgba(42,112,182,.20), 0 18px 44px -14px rgba(33,76,156,.45); }
.ab-why h3 { margin-top: 4px; font-size: 17px; font-weight: 700; color: #1D407C; }
.ab-why p { font-size: 15px; line-height: 1.55; color: #475569; }
.ab-why p::first-letter { text-transform: uppercase; }
/* People cards */
.ab-person { display: flex; flex-direction: column; gap: 16px; height: 100%; border: 1px solid #E2E8F0; border-radius: 1.5rem; background: #fff; padding: 24px; box-shadow: 0 1px 2px rgba(29,64,124,.04); scroll-margin-top: 110px; transition: box-shadow .3s, border-color .3s; }
@media (min-width: 640px) { .ab-person { padding: 28px; } .ab-person-lg { padding: 32px; } }
.ab-person:target { border-color: #93B5DB; box-shadow: 0 0 0 3px rgba(42,112,182,.18), 0 18px 44px -14px rgba(33,76,156,.45); }
.ab-person-head { display: flex; align-items: center; gap: 16px; }
.ab-person-lg .ab-ava { width: 76px; height: 76px; border-radius: 24px; font-size: 26px; }
.ab-person h3 { font-size: 20px; font-weight: 800; line-height: 1.25; color: #1D407C; }
.ab-person-lg h3 { font-size: 23px; }
.ab-role { font-weight: 600; color: #2A70B6; }
.ab-years { display: inline-flex; align-items: center; gap: 7px; margin-top: 6px; border-radius: 999px; background: #EEF3FA; padding: 3px 10px; font-size: 12px; font-weight: 600; color: #203971; }
.ab-years i { font-size: 11px; color: #2A70B6; }
.ab-bio { font-size: 15.5px; line-height: 1.65; color: #334155; }
.ab-facts { display: grid; gap: 10px; margin-top: auto; }
.ab-facts > div { border-radius: 12px; background: #F8FAFD; padding: 11px 14px; }
.ab-facts dt { display: flex; align-items: center; gap: 7px; font-family: Montserrat, Inter, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #2A70B6; }
.ab-facts dt i { width: 14px; font-size: 11px; }
.ab-facts dd { margin-top: 4px; font-size: 14.5px; line-height: 1.55; color: #475569; }
/* How we work */
.ab-steps { position: relative; display: grid; gap: 14px; }
.ab-step { position: relative; display: grid; grid-template-columns: 52px minmax(0,1fr); column-gap: 16px; align-items: start; border: 1px solid #E2E8F0; border-radius: 1.25rem; background: #fff; padding: 18px; opacity: 0; transform: translateY(14px); transition: opacity .5s, transform .5s; }
.ab-steps.in .ab-step { opacity: 1; transform: none; }
.ab-steps.in .ab-step:nth-child(2) { transition-delay: .1s; } .ab-steps.in .ab-step:nth-child(3) { transition-delay: .2s; } .ab-steps.in .ab-step:nth-child(4) { transition-delay: .3s; } .ab-steps.in .ab-step:nth-child(5) { transition-delay: .4s; }
.ab-step-i { position: relative; grid-row: span 2; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(135deg, #214C9C, #3B88C8); font-size: 18px; color: #fff; box-shadow: 0 10px 24px -12px rgba(29,64,124,.6); }
.ab-step-i em { position: absolute; right: -6px; top: -6px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; background: #1D407C; font-family: Montserrat, Inter, sans-serif; font-size: 11px; font-style: normal; font-weight: 800; }
.ab-step h3 { font-size: 17px; font-weight: 800; color: #1D407C; }
.ab-step p { margin-top: 4px; font-size: 14.5px; line-height: 1.55; color: #475569; }
.ab-step p::first-letter { text-transform: uppercase; }
@media (min-width: 1024px) {
.ab-steps { grid-template-columns: repeat(5, minmax(0,1fr)); gap: 16px; }
.ab-steps::before { content: ""; position: absolute; left: 10%; right: 10%; top: 44px; height: 3px; border-radius: 99px; background: linear-gradient(90deg, #2F2D2E 0%, #747578 20%, #C6C7C9 50%, #747578 80%, #2F2D2E 100%); opacity: .45; }
.ab-step { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 18px 16px 22px; background: transparent; border-color: transparent; }
.ab-step-i { grid-row: auto; margin-bottom: 16px; width: 56px; height: 56px; box-shadow: 0 0 0 8px #F4F7FB, 0 10px 24px -12px rgba(29,64,124,.6); }
}
/* Contact */
.ab-contact { display: flex; align-items: flex-start; gap: 14px; min-width: 0; border: 1px solid #E2E8F0; border-radius: 1.25rem; background: #fff; padding: 20px; text-decoration: none; box-shadow: 0 1px 2px rgba(29,64,124,.04); transition: transform .25s, border-color .25s, box-shadow .25s; }
a.ab-contact:hover, div.ab-contact:hover { transform: translateY(-3px); border-color: #BCD0E8; box-shadow: 0 0 0 1px rgba(42,112,182,.20), 0 18px 44px -14px rgba(33,76,156,.45); }
.ab-contact em { display: block; font-style: normal; font-family: Montserrat, Inter, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #64748B; }
.ab-contact b { display: block; margin-top: 4px; overflow-wrap: anywhere; font-family: Montserrat, Inter, sans-serif; font-size: 16px; font-weight: 700; color: #1D407C; }
.ab-contact b a { color: inherit; text-decoration: none; }
.ab-contact-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ab-contact-acts a { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; background: #EEF3FA; padding: 4px 11px; font-size: 12px; font-weight: 600; color: #203971; text-decoration: none; transition: background .2s; }
.ab-contact-acts a:hover { background: #DCE6F3; }
.ab-contact-acts .fa-whatsapp { color: #128C4A; }
@media (prefers-reduced-motion: reduce) {
.ab-ring-arc { animation: none; }
.ab-app, .ab-one, .ab-step, .ab-xp-bar > span { transition: none; }
}
/* ===== Communications page ===== */
@keyframes cmIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cmx.pop, .cm-tl li.pop, .cm-bub.pop, .cm-msg.pop, .cm-seq li.pop, .cm-steps li.pop { animation: cmIn .4s cubic-bezier(.2,.7,.2,1) both; }
.cm-link { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; border-radius: 999px; background: #EEF3FA; padding: 3px 9px; font-size: 10.5px; font-weight: 600; color: #214C9C; }
.cm-link i { font-size: 9.5px; }
.cm-link b { color: #1D407C; }
.f-chip i { font-size: 10px; }
.cm-av { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 999px; color: #fff; font-size: 10.5px; font-weight: 700; }
/* Timeline */
.cm-tl { position: relative; display: grid; gap: 8px; }
.cm-tl li { position: relative; display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 10px; align-items: start; }
.cm-tl li:not(:last-child)::before { content: ""; position: absolute; left: 13px; top: 30px; bottom: -10px; width: 2px; background: #E6ECF4; }
.cm-ch { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; font-size: 12px; }
.ch-wa { background: #ECFDF5; color: #059669; }
.ch-em { background: #EEF3FA; color: #2A70B6; }
.ch-call { background: #FFF7ED; color: #C2410C; }
.ch-meet { background: #F5F3FF; color: #6D28D9; }
.ch-chat { background: #F0F9FF; color: #0369A1; }
.ch-sms { background: #F1F5F9; color: #475569; }
.cm-tl-b { min-width: 0; border: 1px solid #EEF2F7; border-radius: 10px; background: #fff; padding: 7px 10px; }
.cm-tl-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 10.5px; color: #94A3B8; font-weight: 600; }
.cm-tl-h b { color: #1A2230; font-size: 11.5px; }
.cm-tl-b p { margin-top: 2px; font-size: 12px; line-height: 1.45; color: #334155; }
.cm-tl-b .cm-tag { margin-top: 5px; }
.cm-tag { display: inline-flex; align-items: center; gap: 4px; border-radius: 6px; background: #F4F7FB; padding: 2px 7px; font-size: 10px; font-weight: 600; color: #475569; }
.cm-ai { border: 1px solid #DCE6F3; border-radius: 12px; background: linear-gradient(180deg, #F5F8FD, #fff); padding: 10px 12px; }
.cm-ai-k { display: inline-flex; align-items: center; gap: 6px; font-family: Montserrat, Inter, sans-serif; font-size: 11px; font-weight: 700; color: #214C9C; }
.cm-ai-txt { font-size: 12.5px; line-height: 1.55; color: #1A2230; }
.cm-ai.sent { border-color: #A7F3D0; background: #F0FDF8; }
/* Inbox rows */
.ib-row { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; gap: 10px; align-items: center; width: 100%; border: 1px solid #EEF2F7; border-radius: 10px; background: #fff; padding: 8px 10px; text-align: left; transition: border-color .15s, background-color .15s; }
.ib-row:hover { border-color: #BCD0E8; }
.ib-row[aria-pressed="true"] { border-color: #1D407C; background: #F5F8FD; }
.ib-row:focus-visible { outline: 2px solid #2A70B6; outline-offset: 1px; }
.ib-row b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: #1A2230; }
.ib-row em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: normal; font-size: 11px; color: #64748B; }
.ib-row .ib-side { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.ib-row .unread b::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 999px; background: #2A70B6; vertical-align: middle; }
.ib-owner { font-size: 10px; font-weight: 600; color: #64748B; white-space: nowrap; }
.ib-owner.none { color: #B45309; }
.ib-acts { display: flex; flex-wrap: wrap; gap: 5px; }
.cm-note { border-radius: 10px; background: #FFFBEB; padding: 7px 10px; font-size: 11.5px; line-height: 1.45; color: #78350F; }
.cm-note b { color: #92400E; }
.cm-collide { display: flex; align-items: center; gap: 7px; border-radius: 10px; background: #FFF1F2; padding: 7px 10px; font-size: 11.5px; font-weight: 600; color: #BE123C; }
.cm-in { border-radius: 4px 12px 12px 12px; background: #F4F7FB; padding: 8px 11px; font-size: 12.5px; line-height: 1.5; color: #1A2230; }
/* WhatsApp */
.cm-wa { overflow: hidden; border: 1px solid #E6ECF4; border-radius: 14px; background: #fff; }
.cm-wa-top { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #EEF2F7; padding: 9px 12px; }
.cm-wa-top b { font-size: 12.5px; color: #1A2230; }
.cm-wa-top em { display: block; font-style: normal; font-size: 10.5px; color: #64748B; }
.cm-wa-body { display: flex; min-height: 250px; flex-direction: column; gap: 8px; padding: 12px; }
.cm-day { align-self: center; border-radius: 6px; background: #fff; padding: 2px 8px; font-size: 10px; font-weight: 600; color: #64748B; box-shadow: 0 1px 2px rgba(29,64,124,.08); }
.cm-bub { position: relative; max-width: 86%; border-radius: 12px; padding: 8px 10px 6px; font-size: 12px; line-height: 1.5; color: #1A2230; box-shadow: 0 1px 2px rgba(29,64,124,.08); }
.cm-bub.out { align-self: flex-end; border-top-right-radius: 4px; background: #E7F6EE; }
.cm-bub.in { align-self: flex-start; border-top-left-radius: 4px; background: #fff; }
.cm-bub.ai { align-self: flex-end; border-top-right-radius: 4px; background: #EEF3FA; }
.cm-bub.sys { align-self: center; max-width: 100%; border-radius: 8px; background: #FFFBEB; box-shadow: none; padding: 4px 9px; font-size: 10.5px; font-weight: 600; color: #92400E; text-align: center; }
.cm-bub p + p { margin-top: 4px; }
.cm-time { display: block; margin-top: 2px; text-align: right; font-size: 9.5px; color: #64748B; }
.cm-time i { color: #3B88C8; }
.cm-tpl { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 5px; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #047857; }
.cm-doc { display: flex; align-items: center; gap: 8px; margin: 2px 0 6px; border-radius: 8px; background: rgba(255,255,255,.75); padding: 6px 8px; }
.cm-doc > i { font-size: 18px; color: #E11D48; }
.cm-doc b { display: block; font-size: 11.5px; color: #1A2230; }
.cm-doc em { display: block; font-style: normal; font-size: 10px; color: #64748B; }
.cm-qr { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 6px -10px -6px; border-top: 1px solid rgba(4,120,87,.15); }
.cm-qr button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 7px 4px; font-size: 11.5px; font-weight: 600; color: #0369A1; transition: background-color .15s; }
.cm-qr button:first-child { border-right: 1px solid rgba(4,120,87,.15); }
.cm-qr button:hover { background: rgba(255,255,255,.6); }
.cm-qr button:disabled { color: #94A3B8; cursor: default; }
.cm-qr button:focus-visible { outline: 2px solid #2A70B6; outline-offset: -2px; }
/* Funnel, steps, sequences */
.bc-row { display: grid; grid-template-columns: 74px minmax(0,1fr) 64px; gap: 8px; align-items: center; font-size: 11px; }
.bc-row span { font-weight: 600; color: #64748B; }
.bc-row b { text-align: right; font-variant-numeric: tabular-nums; color: #1D407C; }
.bc-track { height: 10px; border-radius: 999px; background: #EEF2F7; overflow: hidden; }
.bc-track i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #214C9C, #3B88C8); transition: width .5s cubic-bezier(.2,.7,.2,1); }
.cm-steps, .cm-seq { display: grid; gap: 6px; }
.cm-steps li, .cm-seq li { display: grid; grid-template-columns: 26px minmax(0,1fr) auto; gap: 9px; align-items: center; border: 1px solid #EEF2F7; border-radius: 10px; background: #fff; padding: 7px 10px; font-size: 11.5px; }
.cm-steps li b, .cm-seq li b { display: block; color: #1A2230; font-size: 12px; }
.cm-steps li em, .cm-seq li em { display: block; font-style: normal; color: #64748B; font-size: 10.5px; }
.cm-steps .cm-ch, .cm-seq .cm-ch { width: 26px; height: 26px; border-radius: 8px; font-size: 11px; }
.cm-seq li.stopped { opacity: .55; }
.cm-seq li.stopped b { text-decoration: line-through; }
.cm-seq li.done { border-color: #A7F3D0; background: #F0FDF8; }
/* Team chat */
.cm-pres { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; border: 1px solid #E6ECF4; padding: 2px 8px; font-size: 10.5px; font-weight: 600; color: #475569; }
.cm-pres i { width: 7px; height: 7px; border-radius: 999px; }
.cm-msg { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 9px; align-items: start; font-size: 12px; line-height: 1.5; color: #334155; }
.cm-msg b { color: #1A2230; font-size: 12px; }
.cm-msg em { font-style: normal; font-size: 10px; color: #94A3B8; }
.cm-at { border-radius: 4px; background: #EEF3FA; padding: 0 3px; font-weight: 600; color: #214C9C; }
.cm-react { margin-top: 4px; }
.cm-react button { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; border: 1px solid #E2E8F0; background: #fff; padding: 1px 8px; font-size: 11px; font-weight: 600; color: #475569; }
.cm-react button[aria-pressed="true"] { border-color: #93B5DB; background: #EEF3FA; color: #1D407C; }
/* Calls */
.cm-pop { overflow: hidden; border-radius: 14px; background: linear-gradient(160deg, #182C57, #1D407C 60%, #214C9C); padding: 14px; color: #fff; }
.cm-ring { position: relative; display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 999px; background: #10B981; font-size: 14px; }
.cm-ring::after { content: ""; position: absolute; inset: -5px; border-radius: 999px; border: 2px solid rgba(16,185,129,.55); animation: ping 1.6s cubic-bezier(0,0,.2,1) infinite; }
.cm-ring.live::after { animation: none; border-color: transparent; }
.cm-ring.ended { background: #64748B; }
.cm-timer { flex-shrink: 0; border-radius: 999px; background: rgba(255,255,255,.12); padding: 3px 9px; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cm-timer::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 999px; background: #F43F5E; vertical-align: 1px; }
.cm-pop-box { min-width: 0; border-radius: 10px; background: rgba(255,255,255,.08); padding: 7px 9px; }
.cm-pop-box span { display: block; font-size: 10px; font-weight: 600; color: #93B5DB; }
.cm-pop-box b { display: block; font-size: 12.5px; }
.cm-pop-box em { display: block; font-style: normal; font-size: 10.5px; line-height: 1.35; color: #B4C3DD; }
.cm-ans { background: #10B981; color: #fff; }
.cm-ans:hover { background: #059669; }
.cm-ans.end { background: #E11D48; }
.cm-dark { border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06); color: #fff; }
.cm-dark:hover { background: rgba(255,255,255,.14); }
.cm-dark:disabled { opacity: .5; cursor: default; }
.cm-play { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 999px; background: #1D407C; color: #fff; font-size: 11px; }
.cm-play:hover { background: #2A70B6; }
.cm-play:focus-visible, .cm-day-btn:focus-visible, .cm-slot:focus-visible, .ib-row:focus-visible, .cm-react button:focus-visible { outline: 2px solid #2A70B6; outline-offset: 2px; }
.cm-tr { display: grid; gap: 5px; border-radius: 10px; border: 1px solid #EEF2F7; padding: 8px 10px; font-size: 11.5px; line-height: 1.45; color: #334155; }
.cm-tr p b { color: #1D407C; }
.cm-tr p.c b { color: #047857; }
.cm-tr mark { border-radius: 3px; background: #FEF3C7; padding: 0 2px; color: #92400E; }
.cm-sum { display: grid; gap: 6px; font-size: 11.5px; line-height: 1.45; color: #334155; }
.cm-sum b { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #2A70B6; }
.cm-day-btn { display: flex; flex-direction: column; align-items: center; border-radius: 10px; border: 1px solid #E2E8F0; background: #fff; padding: 5px 0; transition: all .15s; }
.cm-day-btn em { font-style: normal; font-size: 10px; font-weight: 600; color: #64748B; }
.cm-day-btn b { font-family: Montserrat, Inter, sans-serif; font-size: 15px; color: #1D407C; }
.cm-day-btn[aria-pressed="true"] { border-color: #1D407C; background: #1D407C; }
.cm-day-btn[aria-pressed="true"] em, .cm-day-btn[aria-pressed="true"] b { color: #fff; }
.cm-slot { border-radius: 8px; border: 1px solid #BCD0E8; background: #fff; padding: 6px 0; font-size: 11.5px; font-weight: 600; color: #214C9C; transition: all .15s; }
.cm-slot:hover { background: #EEF3FA; }
.cm-slot[aria-pressed="true"] { border-color: #1D407C; background: #1D407C; color: #fff; }
.cm-slot:disabled { border-color: #EEF2F7; background: #F8FAFC; color: #CBD5E1; text-decoration: line-through; cursor: not-allowed; }
/* Templates & AI */
.tp-item { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: center; width: 100%; border: 1px solid #EEF2F7; border-radius: 10px; background: #fff; padding: 7px 10px; text-align: left; font-size: 11.5px; transition: border-color .15s, background-color .15s; }
.tp-item:hover { border-color: #BCD0E8; }
.tp-item[aria-pressed="true"] { border-color: #1D407C; background: #F5F8FD; }
.tp-item:focus-visible { outline: 2px solid #2A70B6; outline-offset: 1px; }
.tp-item b { display: block; color: #1A2230; font-size: 12px; }
.tp-item em { display: block; font-style: normal; color: #64748B; font-size: 10.5px; }
.mf { border-radius: 4px; background: #DCE6F3; padding: 0 3px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; color: #214C9C; }
.mf-live { border-radius: 4px; background: #FEF3C7; padding: 0 2px; font-weight: 600; color: #1A2230; }
.cm-kb { display: inline-flex; align-items: center; gap: 5px; border-radius: 8px; border: 1px solid #E6ECF4; background: #fff; padding: 3px 8px; font-size: 10.5px; font-weight: 600; color: #475569; }
.cm-kb i { color: #2A70B6; font-size: 10px; }
#ag-chat { min-height: 200px; }
.cm-guard { display: flex; align-items: center; gap: 5px; margin-top: 5px; font-size: 10px; font-weight: 700; color: #B45309; }
.cm-bub .act-btn { margin-top: 6px; }
/* Analytics & security */
.an-row { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1.4fr) 56px; gap: 8px; align-items: center; border: 1px solid #EEF2F7; border-radius: 10px; padding: 7px 10px; font-size: 11.5px; }
.an-row b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #1A2230; font-size: 12px; }
.an-row em { display: block; font-style: normal; font-size: 10.5px; color: #64748B; white-space: nowrap; }
.an-row strong { text-align: right; font-variant-numeric: tabular-nums; color: #1D407C; }
.an-row .meter { position: relative; height: 8px; }
.sc-perm { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: center; border: 1px solid #EEF2F7; border-radius: 10px; padding: 7px 10px; font-size: 11.5px; color: #334155; }
@media (max-width: 479px) {
.cm-steps li, .cm-seq li { grid-template-columns: 26px minmax(0,1fr); }
.cm-steps li > :last-child, .cm-seq li > :last-child { grid-column: 2; justify-self: start; }
.an-row { grid-template-columns: minmax(0,1fr) 56px; }
.an-row .meter { grid-column: 1 / -1; grid-row: 2; }
.bc-row { grid-template-columns: 64px minmax(0,1fr) 54px; }
}
/* ===== AI capabilities page ===== */
.ax-k { font-weight: 700; color: #1D407C; }
.mock [hidden] { display: none !important; }
#ag-chat { min-height: 0; }
.ax-wrap { white-space: normal; text-align: left; line-height: 1.35; padding-top: 4px; padding-bottom: 4px; }
.ax-feed li.pop, .ax-fields > div.pop, .ax-lead.pop, .ax-task.pop, .ax-prio li.pop, .ax-side-m.pop, .ax-pr.pop, .ax-lg.pop, .ax-an.pop { animation: cmIn .4s cubic-bezier(.2,.7,.2,1) both; }
/* Overview module table */
.ax-mod-tbl tbody th { width: 30%; }
.ax-mod-tbl tbody th a { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.ax-mod-tbl tbody th a:hover { color: #2A70B6; }
.ax-mod-tbl tbody th a:focus-visible { outline: 2px solid #2A70B6; outline-offset: 2px; border-radius: 6px; }
.ax-mod-tbl .ax-mi { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; background: #EEF3FA; color: #2A70B6; font-size: 12px; }
/* Hero AI activity feed */
.ax-feed { display: grid; gap: 6px; }
.ax-feed li { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; gap: 10px; align-items: center; border: 1px solid #EEF2F7; border-radius: 10px; background: #fff; padding: 8px 10px; }
.ax-feed li.done { border-color: #D1FAE5; background: #F7FDFA; }
.ax-feed b { display: block; font-size: 12px; color: #1A2230; }
.ax-feed em { display: block; font-style: normal; font-size: 11px; line-height: 1.4; color: #64748B; }
.ax-feed .ax-tag { margin-right: 4px; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #2A70B6; }
.ax-feed .ax-side-act { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.ax-log { display: flex; align-items: center; gap: 8px; border-radius: 10px; background: #F4F7FB; padding: 7px 10px; font-size: 11px; font-weight: 600; color: #475569; }
.ax-log i { color: #2A70B6; }
.ax-log b { color: #1D407C; font-variant-numeric: tabular-nums; }
/* Capture */
.ax-src { border: 1px dashed #BCD0E8; border-radius: 12px; background: #F8FAFD; padding: 10px 12px; font-size: 12px; line-height: 1.5; color: #334155; }
.ax-src .h { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; margin-bottom: 4px; font-size: 10.5px; font-weight: 600; color: #64748B; }
.ax-card-v { display: grid; gap: 1px; border-radius: 10px; background: #fff; padding: 10px 12px; box-shadow: 0 1px 2px rgba(29,64,124,.08), 0 6px 16px -8px rgba(29,64,124,.25); border-left: 4px solid #0F766E; transform: rotate(-1deg); max-width: 300px; }
.ax-card-v b { font-family: Montserrat, Inter, sans-serif; font-size: 13px; color: #1A2230; }
.ax-card-v span { font-size: 11px; color: #475569; }
.ax-arrow { display: flex; align-items: center; gap: 6px; margin: 8px 0; font-size: 11px; font-weight: 700; color: #214C9C; }
.ax-fields { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; }
.ax-fields-1 { grid-template-columns: minmax(0,1fr); }
.ax-fields > div { min-width: 0; border: 1px solid #EEF2F7; border-radius: 9px; background: #fff; padding: 5px 9px; }
.ax-fields span { display: flex; align-items: center; gap: 5px; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #94A3B8; }
.ax-fields b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; color: #1A2230; }
.ax-fields .web { border-color: #DCE6F3; background: #F5F8FD; }
.ax-fields .web span::after { content: "from the web"; border-radius: 4px; background: #DCE6F3; padding: 0 4px; font-size: 8.5px; letter-spacing: .02em; text-transform: none; color: #214C9C; }
.ax-fields .dup { border-color: #FDE68A; background: #FFFBEB; }
/* Lead and deal rows */
.ax-lead { display: grid; grid-template-columns: minmax(0,1fr) 92px 44px; gap: 10px; align-items: center; width: 100%; border: 1px solid #EEF2F7; border-radius: 10px; background: #fff; padding: 7px 10px; text-align: left; transition: border-color .15s, background-color .15s; }
.ax-lead:hover { border-color: #BCD0E8; }
.ax-lead[aria-pressed="true"] { border-color: #1D407C; background: #F5F8FD; }
.ax-lead:focus-visible { outline: 2px solid #2A70B6; outline-offset: 1px; }
.ax-lead b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: #1A2230; }
.ax-lead em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: normal; font-size: 10.5px; color: #64748B; }
.ax-lead strong { text-align: right; font-family: Montserrat, Inter, sans-serif; font-size: 14px; color: #1D407C; font-variant-numeric: tabular-nums; }
.ax-sig { display: grid; gap: 4px; margin-top: 6px; font-size: 11.5px; color: #334155; }
.ax-sig li { display: flex; gap: 6px; align-items: flex-start; }
.ax-sig li i { margin-top: 3px; font-size: 10px; color: #10B981; }
.ax-sig li.r i { color: #E11D48; }
.ax-flag { display: inline-flex; align-items: center; gap: 4px; border-radius: 6px; background: #FFF1F2; padding: 2px 7px; font-size: 10.5px; font-weight: 600; color: #BE123C; }
.ax-ring { position: relative; display: grid; place-items: center; flex-shrink: 0; width: 54px; height: 54px; border-radius: 999px; background: conic-gradient(var(--c, #2A70B6) calc(var(--p) * 1%), #EEF2F7 0); }
.ax-ring::before { content: ""; position: absolute; inset: 6px; border-radius: 999px; background: #fff; }
.ax-ring b { position: relative; font-family: Montserrat, Inter, sans-serif; font-size: 13px; color: #1D407C; }
/* Forecast */
.ax-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 600; color: #64748B; }
.ax-legend .lg-bar { width: 14px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #214C9C, #3B88C8); }
.ax-legend .lg-tgt { width: 2px; height: 12px; margin-left: 6px; background: #1A2230; }
.ax-fc { display: grid; grid-template-columns: 112px minmax(0,1fr) 92px; gap: 10px; align-items: center; font-size: 11.5px; }
.ax-fc > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: #475569; }
.ax-fc > b { text-align: right; color: #1D407C; font-variant-numeric: tabular-nums; }
.ax-fc > b em { display: block; font-style: normal; font-size: 10px; font-weight: 600; color: #94A3B8; }
.ax-fc .meter { height: 12px; }
.ax-fc .meter .th { background: #1A2230; box-shadow: none; }
/* Prompt and email */
.ax-prompt { display: flex; align-items: center; gap: 9px; border: 1px solid #BCD0E8; border-radius: 12px; background: #fff; padding: 7px 7px 7px 11px; font-size: 12.5px; font-weight: 500; color: #1A2230; box-shadow: 0 0 0 3px rgba(59,136,200,.08); }
.ax-prompt > i { color: #2A70B6; }
.ax-mic { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 999px; background: #EEF3FA; color: #2A70B6; font-size: 12px; transition: all .15s; }
.ax-mic:hover { background: #DCE6F3; }
.ax-mic.on { background: #E11D48; color: #fff; animation: pulseMic 1s ease-in-out infinite; }
.ax-mic:focus-visible { outline: 2px solid #2A70B6; outline-offset: 2px; }
@keyframes pulseMic { 50% { box-shadow: 0 0 0 6px rgba(225,29,72,.15); } }
.ax-mail { overflow: hidden; border: 1px solid #E6ECF4; border-radius: 12px; background: #fff; }
.ax-mail-h { display: grid; grid-template-columns: 58px minmax(0,1fr); gap: 8px; border-bottom: 1px solid #F1F5F9; padding: 6px 12px; font-size: 11.5px; }
.ax-mail-h span { color: #94A3B8; font-weight: 600; }
.ax-mail-h b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: #1A2230; }
.ax-mail-b { min-height: 150px; white-space: pre-line; padding: 10px 12px; font-size: 12px; line-height: 1.6; color: #1A2230; }
/* WhatsApp bot */
.ax-wa-body { min-height: 0 !important; height: 268px; overflow-y: auto; scroll-behavior: smooth; }
.ax-wa-acts { display: flex; flex-wrap: wrap; gap: 5px; border-top: 1px solid #EEF2F7; padding: 8px 10px 4px; }
.ax-wa-acts button { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; border: 1px solid #BCD0E8; background: #fff; padding: 4px 10px; font-size: 11px; font-weight: 600; color: #0369A1; transition: all .15s; }
.ax-wa-acts button:hover { background: #EEF3FA; }
.ax-wa-acts button:disabled { border-color: #EEF2F7; color: #CBD5E1; cursor: default; background: #fff; }
.ax-wa-acts button:focus-visible { outline: 2px solid #2A70B6; outline-offset: 2px; }
.ax-bot { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 3px; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #214C9C; }
.ax-voice { display: flex; align-items: center; gap: 8px; }
.ax-voice .voice-wave { display: flex; align-items: center; gap: 2px; height: 18px; width: 90px; }
.ax-voice em { font-style: italic; font-size: 11px; color: #475569; }
.ax-hand { border: 1px solid #FDE68A; border-radius: 10px; background: #FFFBEB; padding: 8px 10px; font-size: 11.5px; line-height: 1.5; color: #78350F; }
.ax-hand b { display: block; margin-bottom: 2px; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: #92400E; }
/* Calls */
.ax-score { display: inline-flex; align-items: baseline; gap: 1px; border-radius: 10px; background: #ECFDF5; padding: 4px 9px; font-family: Montserrat, Inter, sans-serif; font-size: 17px; font-weight: 800; color: #047857; }
.ax-score small { font-size: 10px; font-weight: 700; }
.ax-ratio { display: flex; height: 8px; overflow: hidden; border-radius: 999px; background: #DCE6F3; }
.ax-ratio i:first-child { background: linear-gradient(90deg, #214C9C, #3B88C8); }
.ax-ratio i:last-child { flex: 1; }
.ax-chk { display: grid; gap: 4px; }
.ax-chk li { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: #334155; }
.ax-chk li i { width: 14px; text-align: center; font-size: 11px; color: #10B981; }
.ax-chk li.no i { color: #E11D48; }
/* Tasks */
.ax-task { border: 1px solid #E6ECF4; border-radius: 12px; background: #fff; padding: 10px 12px; min-height: 92px; }
.ax-task-t { font-family: Montserrat, Inter, sans-serif; font-size: 13.5px; font-weight: 700; color: #1D407C; }
.ax-kv { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px 12px; margin-top: 8px; }
.ax-kv p { min-width: 0; font-size: 11.5px; color: #1A2230; font-weight: 600; }
.ax-kv p span { display: block; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #94A3B8; }
.ax-pr { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 10px; border: 1px solid #EEF2F7; border-radius: 10px; background: #fff; padding: 8px 10px; }
.ax-pr q { display: block; font-size: 12px; font-style: italic; color: #1A2230; }
.ax-pr em { display: block; font-style: normal; font-size: 10.5px; color: #64748B; }
.ax-pr .ax-arrowline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 5px; font-size: 11.5px; font-weight: 600; color: #214C9C; }
.ax-pr.ok { border-color: #A7F3D0; background: #F0FDF8; }
.ax-pr.off { opacity: .5; }
.ax-brief { border-radius: 12px; background: linear-gradient(135deg, #EEF3FA, #fff); border: 1px solid #DCE6F3; padding: 10px 12px; }
.ax-brief-h { display: flex; align-items: center; gap: 7px; font-family: Montserrat, Inter, sans-serif; font-size: 13.5px; font-weight: 700; color: #1D407C; }
.ax-brief-h i { color: #F59E0B; }
.ax-prio { display: grid; gap: 5px; counter-reset: pr; }
.ax-prio li { counter-increment: pr; display: grid; grid-template-columns: 22px minmax(0,1fr) auto; gap: 9px; align-items: center; border: 1px solid #EEF2F7; border-radius: 10px; background: #fff; padding: 7px 10px; font-size: 11.5px; }
.ax-prio li::before { content: counter(pr); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: #EEF3FA; font-size: 10.5px; font-weight: 700; color: #214C9C; }
.ax-prio li b { display: block; color: #1A2230; font-size: 12px; }
.ax-prio li em { display: block; font-style: normal; color: #64748B; font-size: 10.5px; }
.ax-prio.ai li::before { background: #1D407C; color: #fff; }
.ax-why { display: flex; flex-wrap: wrap; gap: 3px; justify-content: flex-end; }
.ax-why span { border-radius: 5px; background: #F1F5F9; padding: 1px 6px; font-size: 9.5px; font-weight: 700; color: #475569; }
.ax-why .u { background: #FFF1F2; color: #BE123C; }
.ax-why .v { background: #ECFDF5; color: #047857; }
.ax-why .d { background: #FFFBEB; color: #B45309; }
.ax-wl { display: grid; grid-template-columns: 112px minmax(0,1fr) 54px; gap: 10px; align-items: center; font-size: 11.5px; }
.ax-wl > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: #475569; }
.ax-wl > span em { display: block; font-style: normal; font-size: 10px; color: #B45309; }
.ax-wl > b { text-align: right; color: #1D407C; font-variant-numeric: tabular-nums; }
.ax-esc { display: flex; gap: 8px; border-radius: 10px; background: #FFF7ED; padding: 8px 10px; font-size: 11.5px; line-height: 1.45; color: #7C2D12; }
.ax-esc i { margin-top: 2px; color: #EA580C; }
.ax-esc b { color: #9A3412; }
/* HR */
.ax-qa { border-radius: 10px; background: #F4F7FB; padding: 8px 10px; font-size: 11.5px; line-height: 1.5; color: #334155; }
.ax-qa p + p { margin-top: 4px; }
.ax-qa b { color: #1D407C; }
.ax-qa .fu { border-left: 2px solid #93B5DB; padding-left: 8px; }
.ax-sb { display: grid; grid-template-columns: 112px minmax(0,1fr) 32px; gap: 10px; align-items: center; font-size: 11.5px; font-weight: 600; color: #475569; }
.ax-sb b { text-align: right; color: #1D407C; font-variant-numeric: tabular-nums; }
.ax-pc { border-radius: 10px; padding: 8px 10px; font-size: 11.5px; line-height: 1.5; }
.ax-pc b { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.ax-pc.ok { background: #F0FDF8; color: #064E3B; }
.ax-pc.ok b { color: #047857; }
.ax-pc.warn { background: #FFFBEB; color: #78350F; }
.ax-pc.warn b { color: #B45309; }
.ax-cmp { overflow: hidden; border: 1px solid #E6ECF4; border-radius: 12px; font-size: 11.5px; }
.ax-cmp-r { display: grid; grid-template-columns: minmax(0,1.3fr) repeat(3, minmax(0,1fr)); gap: 6px; align-items: center; border-top: 1px solid #F1F5F9; padding: 6px 10px; }
.ax-cmp-r:first-child { border-top: 0; }
.ax-cmp-r > span { min-width: 0; color: #334155; font-variant-numeric: tabular-nums; }
.ax-cmp-r > span:first-child { font-weight: 600; color: #64748B; }
.ax-cmp-r b { color: #047857; }
.ax-cmp-h { background: #1D407C; }
.ax-cmp-h > span, .ax-cmp-h > span:first-child { font-size: 10.5px; font-weight: 700; color: #fff; }
.ax-cmp-f { background: #F8FAFD; }
.ax-cmp-f .status { white-space: normal; }
.ax-fair { display: flex; gap: 7px; font-size: 11.5px; line-height: 1.45; color: #475569; }
.ax-fair i { margin-top: 2px; color: #2A70B6; }
/* Management */
.ax-risk { width: 100%; border: 1px solid #EEF2F7; border-radius: 10px; background: #fff; padding: 7px 10px; text-align: left; transition: border-color .15s; }
.ax-risk:hover { border-color: #BCD0E8; }
.ax-risk:focus-visible { outline: 2px solid #2A70B6; outline-offset: 1px; }
.ax-risk .top { display: grid; grid-template-columns: 26px minmax(0,1fr) auto; gap: 9px; align-items: center; }
.ax-risk b { display: block; font-size: 12px; color: #1A2230; }
.ax-risk em { display: block; font-style: normal; font-size: 10.5px; color: #64748B; }
.ax-risk .ri { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #FFF1F2; color: #E11D48; font-size: 11px; }
.ax-risk .more { display: none; margin-top: 7px; border-radius: 8px; background: #EEF3FA; padding: 6px 9px; font-size: 11.5px; line-height: 1.45; color: #1D407C; }
.ax-risk[aria-expanded="true"] { border-color: #1D407C; }
.ax-risk[aria-expanded="true"] .more { display: block; }
.ax-risk .chev { font-size: 10px; color: #94A3B8; transition: transform .2s; }
.ax-risk[aria-expanded="true"] .chev { transform: rotate(180deg); }
.ax-ask { display: flex; align-items: center; gap: 8px; border: 1px solid #E2E8F0; border-radius: 12px; background: #fff; padding: 8px 12px; font-size: 12px; color: #94A3B8; }
.ax-ask span.filled { color: #1A2230; }
.ax-bars { display: grid; gap: 5px; }
.ax-bars p { display: grid; grid-template-columns: 92px minmax(0,1fr) 92px; gap: 8px; align-items: center; font-size: 11px; }
.ax-bars span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #475569; font-weight: 600; }
.ax-bars i { display: block; height: 10px; border-radius: 999px; background: linear-gradient(90deg, #214C9C, #3B88C8); }
.ax-bars b { text-align: right; font-size: 10.5px; color: #1D407C; font-variant-numeric: tabular-nums; }
.ax-mini { overflow: hidden; border: 1px solid #EEF2F7; border-radius: 10px; }
.ax-mini p { display: grid; grid-template-columns: minmax(0,1.2fr) 80px auto; gap: 8px; align-items: center; border-top: 1px solid #F1F5F9; padding: 5px 8px; font-size: 11px; }
.ax-mini p:first-child { border-top: 0; }
.ax-mini p.h { background: #F8FAFD; font-size: 10px; font-weight: 700; color: #64748B; }
.ax-mini p > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-mini b { text-align: right; color: #1D407C; font-variant-numeric: tabular-nums; }
.ax-dots { display: grid; gap: 3px; padding-left: 14px; list-style: disc; font-size: 11.5px; }
.ax-dots li::marker { color: #3B88C8; }
.ax-goal { position: relative; height: 16px; border-radius: 999px; background: #EEF2F7; }
.ax-goal span { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 999px; }
.ax-goal .g-pred { background: repeating-linear-gradient(-45deg, #BCD0E8 0 6px, #DCE6F3 6px 12px); transition: width .5s cubic-bezier(.2,.7,.2,1); z-index: 0; }
.ax-goal .g-pred.met { background: repeating-linear-gradient(-45deg, #6EE7B7 0 6px, #A7F3D0 6px 12px); }
.ax-goal .g-ach { z-index: 1; background: linear-gradient(90deg, #214C9C, #3B88C8); }
.ax-goal .g-tgt { z-index: 2; left: auto; right: 0; width: 3px; top: -4px; bottom: -4px; border-radius: 2px; background: #1A2230; }
/* Accounts */
.ax-bill { position: relative; overflow: hidden; border-radius: 6px; background: #FFFDF7; padding: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; line-height: 1.5; color: #475569; box-shadow: 0 1px 2px rgba(15,23,42,.08), 0 10px 24px -14px rgba(15,23,42,.35); transform: rotate(-1.2deg); }
.ax-bill-l { display: flex; justify-content: space-between; gap: 8px; border-top: 1px dashed #E2E8F0; padding-top: 3px; margin-top: 3px; }
.ax-scan { position: absolute; left: 0; right: 0; top: -20%; height: 18%; background: linear-gradient(180deg, transparent, rgba(59,136,200,.35), transparent); opacity: 0; pointer-events: none; }
.ax-bill.scanning .ax-scan { opacity: 1; animation: scan 1.1s ease-in-out 1; }
.ax-bill.read { outline: 2px solid #10B981; outline-offset: 2px; }
@keyframes scan { from { top: -20%; } to { top: 100%; } }
.ax-cf { display: grid; grid-template-columns: 124px minmax(0,1fr) 96px; gap: 10px; align-items: center; font-size: 11.5px; }
.ax-cf > span { font-weight: 600; color: #475569; }
.ax-cf > b { text-align: right; color: #1D407C; font-variant-numeric: tabular-nums; }
.ax-cf-t { height: 14px; border-radius: 6px; background: #F1F5F9; overflow: hidden; }
.ax-cf-t i { display: block; height: 100%; border-radius: 6px; transition: width .5s cubic-bezier(.2,.7,.2,1); }
.ax-cf-t .in { background: linear-gradient(90deg, #047857, #10B981); }
.ax-cf-t .out { background: linear-gradient(90deg, #BE123C, #F43F5E); }
.ax-cf-t .bal { background: linear-gradient(90deg, #214C9C, #3B88C8); }
.ax-co { display: grid; grid-template-columns: minmax(0,1fr) 84px 70px; gap: 10px; align-items: center; border: 1px solid #EEF2F7; border-radius: 10px; background: #fff; padding: 7px 10px; font-size: 11.5px; }
.ax-co b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #1A2230; font-size: 12px; }
.ax-co em { display: block; font-style: normal; font-size: 10.5px; color: #64748B; }
.ax-co strong { text-align: right; color: #1D407C; font-variant-numeric: tabular-nums; }
.ax-co .pct { text-align: right; }
.ax-co.top { border-color: #1D407C; background: #F5F8FD; }
.ax-an { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; gap: 10px; align-items: center; border: 1px solid #EEF2F7; border-radius: 10px; background: #fff; padding: 8px 10px; }
.ax-an b { display: block; font-size: 12px; color: #1A2230; }
.ax-an em { display: block; font-style: normal; font-size: 11px; line-height: 1.4; color: #64748B; }
.ax-an.ok { border-color: #A7F3D0; background: #F0FDF8; }
/* Assistant */
.ax-screen { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); overflow: hidden; border: 1px solid #E6ECF4; border-radius: 12px; }
.ax-rec { min-width: 0; background: #F8FAFD; padding: 10px 12px; }
.ax-dl { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 4px 10px; font-size: 11px; }
.ax-dl dt { color: #94A3B8; font-weight: 600; }
.ax-dl dd { min-width: 0; font-weight: 600; color: #1A2230; }
.ax-mini-tasks { display: grid; gap: 3px; }
.ax-mini-tasks li { display: flex; align-items: center; gap: 5px; border-radius: 6px; background: #fff; padding: 3px 6px; font-size: 10.5px; color: #334155; }
.ax-mini-tasks li::before { content: ""; width: 8px; height: 8px; flex-shrink: 0; border: 1.5px solid #94A3B8; border-radius: 3px; }
.ax-mini-tasks li.pop { animation: cmIn .4s cubic-bezier(.2,.7,.2,1) both; background: #ECFDF5; }
.ax-side { display: flex; min-width: 0; flex-direction: column; border-left: 1px solid #E6ECF4; background: #fff; }
.ax-side-h { display: flex; align-items: center; gap: 7px; border-bottom: 1px solid #F1F5F9; padding: 7px 10px; font-family: Montserrat, Inter, sans-serif; font-size: 11.5px; font-weight: 700; color: #1D407C; }
.ax-side-b { display: flex; flex-direction: column; gap: 6px; height: 230px; overflow-y: auto; padding: 9px 10px; }
.ax-side-m { max-width: 92%; border-radius: 10px; padding: 6px 9px; font-size: 11.5px; line-height: 1.45; }
.ax-side-m.ai { align-self: flex-start; border-top-left-radius: 3px; background: #F4F7FB; color: #1A2230; }
.ax-side-m.me { align-self: flex-end; border-top-right-radius: 3px; background: #1D407C; color: #fff; }
.ax-side-m .status { margin-top: 4px; }
.ax-job { font-size: 12px; line-height: 1.5; color: #1A2230; font-weight: 500; }
.ax-rules { display: grid; gap: 4px; }
.ax-rules li { display: flex; gap: 6px; font-size: 11.5px; line-height: 1.4; color: #334155; }
.ax-rules li i { margin-top: 2px; width: 12px; font-size: 10px; color: #2A70B6; }
.ax-rules li.no i { color: #E11D48; }
#ag-chat .cm-bub { font-size: 11.5px; }
/* Trust */
.ax-md { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: center; border: 1px solid #EEF2F7; border-radius: 10px; background: #fff; padding: 7px 10px; }
.ax-md b { display: block; font-size: 12px; color: #1A2230; }
.ax-md em { display: block; font-style: normal; font-size: 10.5px; color: #64748B; }
.ax-md .seg { padding: 3px; border-radius: 9px; }
.ax-md .seg-btn { flex: 0 0 auto; padding: 4px 8px; font-size: 10.5px; }
.ax-lg { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; gap: 10px; align-items: start; border: 1px solid #EEF2F7; border-radius: 10px; background: #fff; padding: 7px 10px; font-size: 11.5px; }
.ax-lg time { font-weight: 700; color: #64748B; font-variant-numeric: tabular-nums; }
.ax-lg b { display: block; color: #1A2230; font-size: 12px; }
.ax-lg em { display: block; font-style: normal; color: #64748B; font-size: 10.5px; line-height: 1.4; }
/* Advantage, two columns */
.ax-adv thead th { width: 50% !important; }
.ax-adv tbody td:first-child { background: transparent; }
.ax-adv tbody td { font-size: 15px; }
@media (max-width: 767px) {
.ax-mod-tbl tbody th { width: 100%; }
.ax-mod-tbl tbody td { margin-top: 6px; padding-left: 40px !important; }
.ax-adv tbody td { display: block; margin-top: 8px; }
.ax-adv tbody td::before { display: block; margin-bottom: 2px; }
.ax-adv tbody tr td:first-child { margin-top: 0; background: #F8FAFC; }
}
@media (max-width: 479px) {
#main .mock .seg-btn { white-space: normal; line-height: 1.2; padding: 6px 5px; }
.ax-fields { grid-template-columns: minmax(0,1fr); }
.ax-fc, .ax-wl { grid-template-columns: 88px minmax(0,1fr) 78px; gap: 8px; }
.ax-cf { grid-template-columns: 96px minmax(0,1fr) 84px; gap: 8px; font-size: 11px; }
.ax-screen { grid-template-columns: minmax(0,1fr); }
.ax-side { border-left: 0; border-top: 1px solid #E6ECF4; }
.ax-side-b { height: 190px; }
.ax-md { grid-template-columns: minmax(0,1fr); }
.ax-lead { grid-template-columns: minmax(0,1fr) 60px 36px; }
.ax-co { grid-template-columns: minmax(0,1fr) 76px 56px; }
.ax-cmp-r { padding: 6px 8px; font-size: 11px; }
.ax-sb { grid-template-columns: 96px minmax(0,1fr) 28px; }
.ax-bars p { grid-template-columns: 72px minmax(0,1fr) 86px; }
.ax-feed li { grid-template-columns: 28px minmax(0,1fr); }
.ax-feed .ax-side-act { grid-column: 2; flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: wrap; }
.ax-lg { grid-template-columns: 40px minmax(0,1fr); }
.ax-lg > :last-child { grid-column: 2; justify-self: start; }
}
/* ===== Mobile and tablet layout ===== */
@media (max-width: 1023px) {
.hero-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hm-cta { grid-column: 1 / -1; }
.hm-sheet { grid-column: auto; grid-row: auto; }
#main .mx-auto { min-width: 0; }
.ab-scale { flex-wrap: wrap; }
}
@media (max-width: 767px) {
.kpi { padding: .55rem .45rem; min-width: 0; }
.kpi .kpi-val { font-size: clamp(0.95rem, 4.2vw, 1.15rem) !important; letter-spacing: -0.03em; white-space: nowrap; }
#main .grid.grid-cols-5,
#main ol.grid-cols-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
[role="group"][aria-label="Filter modules"] { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
[role="group"][aria-label="Filter modules"]::-webkit-scrollbar { display: none; }
#lead-capture .lead-submit,
#demo-modal .lead-submit { flex-wrap: wrap; justify-content: center; text-align: center; row-gap: 6px; }
#demo-modal { align-items: flex-start; padding: 12px; }
#demo-modal .quote-card { max-width: 100%; }
footer .footer-apps { justify-content: flex-start; }
}
@media (max-width: 699px) {
.hero-mosaic { grid-template-columns: minmax(0, 1fr); }
.hm-cta { flex-direction: column; align-items: stretch; }
.hm-cta .btn-primary, .hm-demo { width: 100%; max-width: none; flex: none; }
}
@media (max-width: 639px) {
#main .grid.grid-cols-3:has(> .kpi),
#main .grid.grid-cols-4:has(> .kpi) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* —— Contact page —— */
/* Content must stay visible even if page-specific reveal JS is missing */
body[data-page="contact"] .reveal { opacity: 1; transform: none; }
body[data-page="download"] .reveal { opacity: 1; transform: none; }
.ct-hero { background: #1D407C; color: #fff; }
.ct-hero > .relative { position: relative; z-index: 1; }
.ct-hero-bg {
position: absolute; inset: 0; pointer-events: none; z-index: 0;
background:
radial-gradient(ellipse 70% 55% at 85% 20%, rgba(59,136,200,.45), transparent 55%),
radial-gradient(ellipse 50% 40% at 10% 80%, rgba(46,119,186,.35), transparent 50%),
linear-gradient(135deg, #163566 0%, #1D407C 45%, #214C9C 100%);
}
.ct-hero-wave {
position: absolute; left: 0; right: 0; bottom: -1px; height: 64px;
background: linear-gradient(180deg, transparent, rgba(255,255,255,.08));
clip-path: ellipse(120% 100% at 50% 100%);
}
.ct-brand {
margin: 0; font-family: Montserrat, Inter, sans-serif;
font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 800;
letter-spacing: -0.02em; line-height: 1;
background-image: linear-gradient(90deg, #fff 0%, #93c5fd 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.ct-signal {
position: relative; margin: 0 auto; width: min(280px, 70vw); height: min(280px, 70vw);
}
.ct-signal-ring {
position: absolute; inset: 18%; border-radius: 50%;
border: 1.5px solid rgba(147,197,253,.35);
animation: ct-pulse 3.2s ease-out infinite;
}
.ct-signal-ring--2 { inset: 4%; animation-delay: 1.1s; border-color: rgba(147,197,253,.2); }
.ct-signal-core {
position: absolute; inset: 32%; display: grid; place-items: center;
border-radius: 50%; background: rgba(255,255,255,.12);
box-shadow: 0 0 0 1px rgba(255,255,255,.2), 0 20px 50px -12px rgba(0,0,0,.35);
font-size: 2rem; color: #fff;
}
.ct-signal-chip {
position: absolute; display: grid; place-items: center;
width: 44px; height: 44px; border-radius: 14px;
background: #fff; color: #1D407C; font-size: 1rem;
box-shadow: 0 12px 28px -8px rgba(15,23,42,.4);
animation: ct-float 4s ease-in-out infinite;
}
.ct-signal-chip--a { top: 8%; left: 6%; }
.ct-signal-chip--b { top: 12%; right: 0; color: #128C4A; animation-delay: -.8s; }
.ct-signal-chip--c { bottom: 10%; left: 18%; animation-delay: -1.6s; }
@keyframes ct-pulse {
0% { transform: scale(.92); opacity: .85; }
70% { transform: scale(1.08); opacity: 0; }
100% { opacity: 0; }
}
@keyframes ct-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
.ct-signal-ring, .ct-signal-chip { animation: none; }
}
.ct-lanes { display: grid; gap: 12px; }
@media (min-width: 900px) {
.ct-lanes { grid-template-columns: 1fr 1fr; gap: 14px; }
}
.ct-lane {
display: flex; align-items: center; gap: 16px; width: 100%;
padding: 18px 18px 18px 16px; text-align: left; cursor: pointer;
border: 1px solid #E6ECF4; border-radius: 1.25rem; background: #F8FAFD;
text-decoration: none; color: inherit; font: inherit;
transition: transform .25s, border-color .25s, background .25s, box-shadow .25s;
}
.ct-lane:hover, .ct-lane:focus-visible {
transform: translateY(-3px); border-color: #BCD0E8; background: #fff;
box-shadow: 0 0 0 1px rgba(42,112,182,.18), 0 18px 40px -16px rgba(33,76,156,.4);
outline: none;
}
.ct-lane-ico {
display: grid; place-items: center; flex-shrink: 0;
width: 52px; height: 52px; border-radius: 16px;
background: linear-gradient(135deg, #1D407C, #2E77BA); color: #fff; font-size: 1.15rem;
}
.ct-lane-ico--wa { background: linear-gradient(135deg, #0f7a3d, #25D366); }
.ct-lane-body { min-width: 0; flex: 1; }
.ct-lane-body em {
display: block; font-style: normal; font-family: Montserrat, Inter, sans-serif;
font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #64748B;
}
.ct-lane-body b {
display: block; margin-top: 3px; font-family: Montserrat, Inter, sans-serif;
font-size: 1.05rem; font-weight: 700; color: #1D407C; overflow-wrap: anywhere;
}
.ct-lane-body span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.4; color: #64748B; }
.ct-lane-go {
flex-shrink: 0; display: grid; place-items: center;
width: 36px; height: 36px; border-radius: 999px; background: #EEF3FA; color: #1D407C;
transition: background .2s, transform .2s;
}
.ct-lane:hover .ct-lane-go { background: #1D407C; color: #fff; transform: translateX(2px); }
.ct-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ct-ticks li {
display: flex; align-items: center; gap: 10px;
font-size: 14.5px; font-weight: 600; color: #1D407C;
}
.ct-ticks li i {
display: grid; place-items: center; width: 22px; height: 22px; border-radius: 999px;
background: #E8F1FB; color: #2E77BA; font-size: 10px;
}
.ct-panel {
border: 1px solid #E6ECF4; border-radius: 1.5rem; background: #fff;
padding: 8px; box-shadow: 0 18px 44px -22px rgba(29,64,124,.35);
}
.ct-panel-kicker {
margin: 0; padding: 14px 16px 6px;
font-family: Montserrat, Inter, sans-serif; font-size: 11px; font-weight: 700;
letter-spacing: .16em; text-transform: uppercase; color: #64748B;
}
.ct-panel-row {
display: flex; align-items: center; gap: 14px; margin: 4px;
padding: 14px 14px; border-radius: 1rem; text-decoration: none;
transition: background .2s;
}
.ct-panel-row:hover { background: #F4F7FB; }
.ct-panel-ico {
display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
background: #EEF3FA; color: #1D407C; font-size: 1rem;
}
.ct-panel-row em {
display: block; font-style: normal; font-size: 12px; font-weight: 600; color: #64748B;
}
.ct-panel-row b {
display: block; margin-top: 2px; font-family: Montserrat, Inter, sans-serif;
font-size: 15px; font-weight: 700; color: #1D407C;
}
.ct-addr-grid {
display: grid; gap: 16px;
}
@media (min-width: 900px) {
.ct-addr-grid { grid-template-columns: 1.15fr .85fr; gap: 18px; }
}
.ct-addr {
position: relative; border: 1px solid #E6ECF4; border-radius: 1.5rem;
background: #F8FAFD; padding: 24px 22px 22px;
box-shadow: 0 1px 2px rgba(29,64,124,.04);
transition: transform .25s, border-color .25s, box-shadow .25s;
}
.ct-addr:hover {
transform: translateY(-3px); border-color: #BCD0E8; background: #fff;
box-shadow: 0 0 0 1px rgba(42,112,182,.16), 0 18px 40px -16px rgba(33,76,156,.35);
}
.ct-addr-badge {
display: inline-flex; align-items: center;
border-radius: 999px; background: #1D407C; color: #fff;
padding: 4px 11px; font-size: 10.5px; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase;
}
.ct-addr-badge--reg { background: #2E77BA; }
.ct-addr h3 {
margin: 14px 0 12px; font-family: Montserrat, Inter, sans-serif;
font-size: 1.25rem; font-weight: 800; color: #1D407C;
}
.ct-addr-line {
display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px;
font-size: 14.5px; line-height: 1.5; color: #334155; font-weight: 500;
}
.ct-addr-line i { margin-top: 3px; color: #2E77BA; }
.ct-addr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ct-addr-list li {
display: flex; align-items: flex-start; gap: 10px;
font-size: 14px; color: #475569; line-height: 1.45;
}
.ct-addr-list li i { margin-top: 3px; width: 16px; text-align: center; color: #1D407C; }
.ct-addr-list a { color: #1D407C; font-weight: 600; text-decoration: none; }
.ct-addr-list a:hover { color: #2E77BA; text-decoration: underline; }
.ct-addr-map {
display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
font-size: 13px; font-weight: 700; color: #1D407C; text-decoration: none;
}
.ct-addr-map:hover { color: #2E77BA; }
.ct-map {
overflow: hidden; border-radius: 1.5rem; border: 1px solid #E6ECF4;
background: #EEF3FA; box-shadow: 0 18px 44px -22px rgba(29,64,124,.3);
line-height: 0;
}
.ct-map iframe {
display: block; width: 100%; height: 350px; border: 0;
}
.ct-map--side { min-height: 350px; height: 100%; }
@media (min-width: 900px) {
.ct-map--side { min-height: 100%; }
.ct-map--side iframe { height: 100%; min-height: 100%; }
}
.ct-tech {
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: wrap; gap: 8px;
}
.ct-tech li {
border: 1px solid #E6ECF4; border-radius: 999px; background: #F8FAFD;
padding: 7px 14px; font-size: 13px; font-weight: 600; color: #1D407C;
}
/* —— Free Tools —— */
.tool-crumb {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
font-size: 13px; font-weight: 600; color: #64748B;
}
.tool-crumb a { color: #1D407C; text-decoration: none; }
.tool-crumb a:hover { color: #2E77BA; }
.tool-grid {
display: grid; gap: 12px;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.tool-tile {
display: flex; align-items: flex-start; gap: 14px;
padding: 16px; border: 1px solid #E6ECF4; border-radius: 1.1rem;
background: #fff; text-decoration: none; color: inherit;
transition: transform .22s, border-color .22s, box-shadow .22s;
}
.tool-tile:hover {
transform: translateY(-3px); border-color: #BCD0E8;
box-shadow: 0 0 0 1px rgba(42,112,182,.14), 0 16px 36px -16px rgba(33,76,156,.4);
}
.tool-tile-ico {
display: grid; place-items: center; flex-shrink: 0;
width: 42px; height: 42px; border-radius: 12px;
background: linear-gradient(135deg, #1D407C, #2E77BA); color: #fff; font-size: .95rem;
}
.tool-tile-body { min-width: 0; flex: 1; }
.tool-tile-body b {
display: block; font-family: Montserrat, Inter, sans-serif;
font-size: 14.5px; font-weight: 700; color: #1D407C; line-height: 1.35;
}
.tool-tile-body span {
display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.4; color: #64748B;
}
.tool-tile-go {
align-self: center; flex-shrink: 0; font-size: 12px; font-weight: 700; color: #2E77BA;
display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}
.tool-page { padding: 7.5rem 0 4rem; background: #F4F7FB; }
.tool-work {
display: grid; gap: 18px; margin-top: 18px;
}
@media (min-width: 980px) {
.tool-work { grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); align-items: start; }
}
.tool-side {
border: 1px solid #E6ECF4; border-radius: 1.35rem; background: #fff;
padding: 22px 20px; box-shadow: 0 12px 32px -20px rgba(29,64,124,.35);
}
.tool-side h1 {
margin: 0; font-family: Montserrat, Inter, sans-serif;
font-size: 1.45rem; font-weight: 800; color: #1D407C; line-height: 1.25;
}
.tool-side-lead { margin: 8px 0 0; font-size: 13.5px; color: #64748B; line-height: 1.45; }
.tool-steps {
display: flex; align-items: center; gap: 0; margin: 18px 0 14px; flex-wrap: wrap;
}
.tool-step {
display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px;
background: #EEF3FA; color: #64748B; font-size: 12px; font-weight: 700;
}
.tool-step.is-on, .tool-step.is-done { background: #1D407C; color: #fff; }
.tool-step-line {
width: 28px; height: 2px; background: #E6ECF4; margin: 0 4px;
}
.tool-step-line.is-on { background: #2E77BA; }
.tool-fields { display: grid; gap: 12px; }
.tool-field { display: grid; gap: 6px; }
.tool-field > span {
font-size: 12px; font-weight: 700; color: #475569; letter-spacing: .02em;
}
.tool-field input, .tool-field textarea {
width: 100%; border: 1px solid #E6ECF4; border-radius: 12px;
background: #F8FAFD; padding: 11px 12px; font: 500 14px/1.4 Inter, system-ui, sans-serif;
color: #0f172a; outline: none; transition: border-color .15s, box-shadow .15s;
}
.tool-field input:focus, .tool-field textarea:focus {
border-color: #2E77BA; background: #fff;
box-shadow: 0 0 0 3px rgba(46,119,186,.15);
}
.tool-nav { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.tool-doc-wrap {
border: 1px solid #E6ECF4; border-radius: 1.35rem; background: #fff; overflow: hidden;
box-shadow: 0 18px 44px -22px rgba(29,64,124,.35); min-height: 420px;
}
.tool-doc-head {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 12px 16px; border-bottom: 1px solid #E6ECF4; background: #F8FAFD;
font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #64748B;
}
.tool-print {
border: 1px solid #BCD0E8; border-radius: 999px; background: #fff;
padding: 5px 12px; font-size: 12px; font-weight: 700; color: #1D407C; cursor: pointer;
}
.tool-print:hover { background: #EEF3FA; }
.tool-doc {
padding: 28px 26px 36px; color: #0f172a; font: 15px/1.55 Inter, system-ui, sans-serif;
min-height: 360px;
}
.tool-doc h3 {
margin: 0 0 14px; font-family: Montserrat, Inter, sans-serif;
font-size: 1.35rem; font-weight: 800; color: #1D407C;
}
.tool-doc .paper-logo {
margin-bottom: 12px; font-weight: 700; color: #1D407C; font-size: 1.05rem;
}
.tool-doc .paper-logo img { max-height: 42px; }
.tool-doc .paper-meta {
display: grid; gap: 10px; margin-bottom: 16px; padding-bottom: 14px;
border-bottom: 1px solid #E6ECF4;
}
@media (min-width: 640px) {
.tool-doc .paper-meta { grid-template-columns: 1fr 1fr; }
}
.tool-doc .paper-meta p, .tool-doc p { margin: 0 0 10px; }
.tool-doc .paper-person { font-weight: 700; color: #1D407C; margin-top: 8px !important; }
.tool-doc .paper-sign { margin-top: 22px !important; }
.tool-doc .ph { color: #94A3B8; font-style: italic; }
.tool-doc .paper-table {
width: 100%; border-collapse: collapse; margin: 10px 0 14px; font-size: 14px;
}
.tool-doc .paper-table td {
padding: 9px 10px; border-bottom: 1px solid #E6ECF4; vertical-align: top;
}
.tool-doc .paper-table td:last-child { text-align: right; font-weight: 600; color: #1D407C; }
.tool-doc .paper-table tr.total td {
border-bottom: 0; background: #EEF3FA; font-weight: 800;
}
.tool-doc .paper-note { font-size: 12.5px; color: #64748B; }
@media print {
.site-header, .tool-side, .tool-crumb, .tool-doc-head, footer, #lead-capture, #to-top, #demo-modal, .features-card-section, .whatsapp { display: none !important; }
.tool-page { padding: 0; background: #fff; }
.tool-work { display: block; }
.tool-doc-wrap { box-shadow: none; border: 0; }
.tool-doc { padding: 0; }
}
/* ===== Reports & dashboards page ===== */
#rail-now-l { width: auto; min-width: 28px; padding: 0 7px; font-size: 11.5px; }
.rail-a { min-width: 30px; width: auto; padding: 0 7px; }
.idx-card .ltr { font-size: 13px; }
.rd-ghost { border: 1px solid #DCE6F3; background: #fff; color: #1D407C; }
.rd-ghost:hover { background: #EEF3FA; }
.rd-num { font-variant-numeric: tabular-nums; }
/* Toggle switch */
.rd-tog { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; padding: 3px 9px 3px 4px; font-size: 11px; font-weight: 600; color: #475569; transition: background-color .15s; }
.rd-tog:hover { background: #F1F5F9; }
.rd-tog:focus-visible { outline: 2px solid #2A70B6; outline-offset: 2px; }
.rd-sw { position: relative; width: 28px; height: 16px; flex-shrink: 0; border-radius: 999px; background: #CBD5E1; transition: background-color .2s; }
.rd-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .2s; }
.rd-tog[aria-pressed="true"] .rd-sw { background: #1D407C; }
.rd-tog[aria-pressed="true"] .rd-sw::after { transform: translateX(12px); }
/* Hero bars with target / last-period marker */
.rd-hbars { display: grid; gap: 5px; }
.rd-hb { display: grid; grid-template-columns: 104px minmax(0,1fr) 84px; gap: 10px; align-items: center; width: 100%; border-radius: 8px; padding: 4px 6px; text-align: left; font-size: 11.5px; transition: background-color .15s; }
.rd-hb:hover { background: #F4F7FB; }
.rd-hb[aria-pressed="true"] { background: #EEF3FA; }
.rd-hb:focus-visible, .rd-row-btn:focus-visible, .rd-ci:focus-visible, .rd-col:focus-visible { outline: 2px solid #2A70B6; outline-offset: 1px; }
.rd-hb > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: #334155; }
.rd-hb > b { text-align: right; font-size: 11px; color: #1D407C; font-variant-numeric: tabular-nums; }
.rd-track { position: relative; height: 14px; border-radius: 999px; background: #F1F5F9; }
.rd-fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, #214C9C, #3B88C8); transition: width .5s cubic-bezier(.2,.7,.2,1); }
.rd-fill.lo { background: linear-gradient(90deg, #B45309, #F59E0B); }
.rd-mark { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 2px; background: #1A2230; transition: left .5s cubic-bezier(.2,.7,.2,1); }
.rd-delta { font-size: 10px; font-weight: 700; }
.rd-delta.up { color: #047857; }
.rd-delta.dn { color: #BE123C; }
.rd-drill { border: 1px solid #E6ECF4; border-radius: 10px; background: #fff; padding: 8px 10px; }
.rd-drill.pop { animation: stepIn .35s cubic-bezier(.2,.7,.2,1) both; }
.rd-drill-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; font-weight: 700; color: #1D407C; }
.rd-li { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: center; border-top: 1px solid #F1F5F9; padding: 5px 0; font-size: 11.5px; color: #334155; }
.rd-li:first-of-type { border-top: 0; }
.rd-li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-li em { font-style: normal; color: #94A3B8; font-size: 10.5px; }
.rd-li b { color: #1D407C; font-variant-numeric: tabular-nums; }
/* Report table inside mockups */
.rd-rt-wrap { overflow-x: auto; border: 1px solid #E6ECF4; border-radius: 10px; }
.rd-rt { width: 100%; border-collapse: collapse; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.rd-rt th, .rd-rt td { padding: 6px 9px; border-top: 1px solid #F1F5F9; text-align: right; white-space: nowrap; }
.rd-rt th:first-child, .rd-rt td:first-child { text-align: left; }
.rd-rt thead th { border-top: 0; background: #F8FAFD; font-size: 10px; font-weight: 700; color: #64748B; }
.rd-rt tbody td { color: #334155; }
.rd-rt tr.rd-sub td { background: #F4F7FB; font-weight: 700; color: #1D407C; }
.rd-rt tr.tot td { background: #1D407C; font-weight: 700; color: #fff; }
.rd-rt tr.lnk { cursor: pointer; }
.rd-rt tr.lnk:hover td { background: #EEF3FA; }
.rd-rt tr.lnk td:first-child { color: #1D407C; font-weight: 600; }
.rd-rt .fx { display: inline-block; margin-left: 3px; border-radius: 4px; background: #EEF3FA; padding: 0 4px; font-size: 9px; font-style: italic; color: #214C9C; }
.rd-rt .ok { color: #047857; font-weight: 700; background: #ECFDF5; }
.rd-rt .bad { color: #BE123C; font-weight: 700; background: #FFF1F2; }
.rd-rt .lock { color: #94A3B8; font-size: 10.5px; }
.rd-spark { display: inline-flex; align-items: flex-end; gap: 2px; height: 18px; vertical-align: middle; margin-right: 6px; }
.rd-spark i { width: 5px; border-radius: 2px 2px 0 0; background: #93B5DB; }
.rd-spark i:last-child { background: #214C9C; }
.rd-heat { display: block; border-radius: 4px; padding: 2px 0; text-align: center; font-weight: 600; }
/* Dashboard builder */
.rd-pal { display: inline-flex; align-items: center; gap: 5px; border: 1px dashed #BCD0E8; border-radius: 8px; background: #fff; padding: 3px 8px; font-size: 11px; font-weight: 600; color: #1D407C; transition: all .15s; }
.rd-pal i { font-size: 10px; color: #2A70B6; }
.rd-pal:hover { border-style: solid; background: #EEF3FA; }
.rd-pal:focus-visible { outline: 2px solid #2A70B6; outline-offset: 2px; }
.rd-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; border-radius: 12px; background: #F4F7FB; padding: 8px; transition: background-color .3s; }
.rd-w { position: relative; min-width: 0; border: 1px solid #E6ECF4; border-radius: 10px; background: #fff; padding: 8px 10px 10px; transition: box-shadow .15s, opacity .15s; }
.rd-w.wide { grid-column: span 2; }
.rd-w.pop { animation: stepIn .35s cubic-bezier(.2,.7,.2,1) both; }
.rd-w[draggable="true"] { cursor: grab; }
.rd-w.dragging { opacity: .4; }
.rd-w.over { box-shadow: 0 0 0 2px #2A70B6; }
.rd-w-h { display: flex; align-items: center; gap: 4px; min-height: 20px; }
.rd-w-h p { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; font-weight: 700; color: #64748B; }
.rd-w-h button { display: grid; place-items: center; width: 20px; height: 20px; flex-shrink: 0; border-radius: 6px; font-size: 10px; color: #94A3B8; }
.rd-w-h button:hover { background: #F1F5F9; color: #1D407C; }
.rd-w-h button:focus-visible { outline: 2px solid #2A70B6; }
.rd-w-v { font-family: Montserrat, Inter, sans-serif; font-size: 1.05rem; font-weight: 800; color: #1D407C; font-variant-numeric: tabular-nums; }
.rd-w-s { font-size: 10px; color: #64748B; }
.rd-w svg { display: block; width: 100%; }
.rd-w svg.rd-sv { height: 64px; }
.rd-w svg.rd-gauge { height: 72px; }
.rd-pie { width: 64px; height: 64px; flex-shrink: 0; border-radius: 999px; }
.rd-pie.donut { -webkit-mask: radial-gradient(circle, transparent 42%, #000 43%); mask: radial-gradient(circle, transparent 42%, #000 43%); }
.rd-leg { display: grid; gap: 2px; font-size: 10px; color: #475569; }
.rd-leg i { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 2px; }
.rd-hm { display: grid; grid-template-columns: 20px repeat(6, minmax(0,1fr)); gap: 2px; font-size: 8.5px; color: #94A3B8; }
.rd-hm i { height: 11px; border-radius: 2px; background: #214C9C; }
.rd-map { position: relative; height: 74px; overflow: hidden; border-radius: 8px; background: #EAF1EA; background-image: linear-gradient(90deg, rgba(255,255,255,.7) 2px, transparent 2px), linear-gradient(rgba(255,255,255,.7) 2px, transparent 2px); background-size: 26px 22px; }
.rd-map span { position: absolute; display: grid; place-items: center; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 999px; border: 2px solid #fff; background: #2A70B6; color: #fff; font-size: 7px; font-weight: 700; box-shadow: 0 2px 6px rgba(29,64,124,.35); }
.rd-fn { display: grid; gap: 3px; }
.rd-fn p { display: grid; grid-template-columns: 58px minmax(0,1fr) 28px; gap: 6px; align-items: center; font-size: 10px; color: #475569; }
.rd-fn p i { display: block; height: 9px; margin: 0 auto; border-radius: 3px; background: linear-gradient(90deg, #214C9C, #3B88C8); }
.rd-fn p b { text-align: right; color: #1D407C; }
.rd-mini-t { width: 100%; font-size: 10.5px; }
.rd-mini-t td { padding: 2px 0; border-top: 1px solid #F1F5F9; color: #334155; }
.rd-mini-t td:last-child { text-align: right; font-weight: 700; color: #1D407C; font-variant-numeric: tabular-nums; }
.rd-mini-t tr:first-child td { border-top: 0; }
.rd-meter { height: 10px; overflow: hidden; border-radius: 999px; background: #E6ECF4; }
.rd-meter i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #214C9C, #3B88C8); transition: width .5s; }
.rd-grid.tv { background: #0C1730; }
#db-mock.tv-on .rd-w { border-color: #182C57; background: #12213F; }
#db-mock.tv-on .rd-w-h p, #db-mock.tv-on .rd-w-s, #db-mock.tv-on .rd-leg, #db-mock.tv-on .rd-fn p, #db-mock.tv-on .rd-mini-t td { color: #B4C3DD; }
#db-mock.tv-on .rd-w-v, #db-mock.tv-on .rd-mini-t td:last-child, #db-mock.tv-on .rd-fn p b { color: #fff; }
#db-mock.tv-on .rd-mini-t td { border-color: #182C57; }
#db-mock.tv-on .rd-meter { background: #182C57; }
.rd-tvbar { display: none; align-items: center; justify-content: space-between; gap: 8px; grid-column: 1 / -1; padding: 2px 4px 4px; font-size: 10.5px; font-weight: 600; color: #93B5DB; }
#db-mock.tv-on .rd-tvbar { display: flex; }
@media (hover: none) { .rd-drag-hint { display: none; } }
/* Module mini dashboards */
.rd-kpis { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
@media (min-width: 640px) { .rd-kpis { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.rd-kpis .kpi-val { font-size: 1.02rem; }
.rd-chart { display: grid; gap: 4px; }
.rd-ci { display: grid; grid-template-columns: 112px minmax(0,1fr) 96px; gap: 10px; align-items: center; width: 100%; border-radius: 8px; padding: 5px 6px; text-align: left; font-size: 11.5px; transition: background-color .15s; }
.rd-ci:hover { background: #F4F7FB; }
.rd-ci[aria-pressed="true"] { background: #EEF3FA; }
.rd-ci > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: #334155; }
.rd-ci > b { text-align: right; font-size: 11px; color: #1D407C; font-variant-numeric: tabular-nums; }
.rd-ci .rd-track { height: 12px; }
.rd-funnel .rd-track { background: transparent; }
.rd-funnel .rd-fill { left: 50%; transform: translateX(-50%); }
.rd-fill.warn { background: linear-gradient(90deg, #B45309, #F59E0B); }
.rd-fill.bad { background: linear-gradient(90deg, #BE123C, #F43F5E); }
.rd-fill.ok { background: linear-gradient(90deg, #047857, #10B981); }
.rd-cap-line { position: absolute; top: -3px; bottom: -3px; width: 0; border-left: 2px dashed #1A2230; }
.rd-foot { display: flex; flex-wrap: wrap; gap: 6px; }
/* Prediction columns */
.rd-cols { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 8px; align-items: end; height: 120px; margin-top: 6px; }
.rd-col { display: flex; height: 100%; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; border-radius: 8px; padding: 4px 2px; font-size: 10px; font-weight: 600; color: #64748B; }
.rd-col:hover, .rd-col[aria-pressed="true"] { background: #EEF3FA; }
.rd-col i { display: block; width: 70%; max-width: 30px; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, #3B88C8, #214C9C); }
.rd-col i.fc { background: repeating-linear-gradient(135deg, #93B5DB 0 4px, #BCD0E8 4px 8px); }
/* MIS scorecard */
.rd-sc { overflow: hidden; border: 1px solid #E6ECF4; border-radius: 10px; }
.rd-sc-r { display: grid; grid-template-columns: minmax(0,1fr) 108px 108px; gap: 8px; align-items: center; border-top: 1px solid #F1F5F9; padding: 6px 10px; font-size: 11.5px; color: #334155; }
.rd-sc-r:first-child { border-top: 0; background: #F8FAFD; font-size: 10px; font-weight: 700; color: #64748B; }
.rd-sc-r > div { display: flex; flex-direction: column; align-items: flex-end; }
.rd-sc-r > div b { display: inline-flex; align-items: center; gap: 5px; color: #1D407C; font-variant-numeric: tabular-nums; }
.rd-sc-r > div em { font-style: normal; font-size: 10px; font-variant-numeric: tabular-nums; }
.rd-sc-r > span:first-child { font-weight: 600; }
.rd-dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; vertical-align: middle; }
.rd-dot.g { background: #10B981; }
.rd-dot.a { background: #F59E0B; }
.rd-dot.r { background: #F43F5E; }
/* Roles */
.rd-role.pop { animation: stepIn .35s cubic-bezier(.2,.7,.2,1) both; }
.rd-role .rd-kpis { grid-template-columns: repeat(2, minmax(0,1fr)); }
.rd-phone { max-width: 270px; margin: 0 auto; border: 6px solid #1A2230; border-radius: 26px; background: #fff; padding: 14px 10px 12px; }
.rd-phone .rd-kpis { gap: 6px; }
/* Sharing */
.rd-shr { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; gap: 10px; align-items: center; border: 1px solid #EEF2F7; border-radius: 10px; padding: 7px 9px; }
.rd-shr b { display: block; font-size: 12px; color: #1A2230; }
.rd-shr em { display: block; font-style: normal; font-size: 10.5px; color: #64748B; }
.rd-shr .seg { padding: 3px; }
.rd-shr .seg-btn { padding: 3px 9px; font-size: 10.5px; }
.rd-alrow { display: flex; align-items: center; gap: 10px; border: 1px solid #EEF2F7; border-radius: 10px; padding: 7px 9px; }
.rd-alrow b { display: block; font-size: 12px; color: #1A2230; }
.rd-alrow em { display: block; font-style: normal; font-size: 10.5px; color: #64748B; }
.rd-range { accent-color: #1D407C; }
.rd-exp { display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid #E2E8F0; border-radius: 10px; background: #fff; padding: 9px 6px; font-size: 12px; font-weight: 600; color: #1A2230; transition: all .15s; }
.rd-exp:hover { border-color: #93B5DB; background: #F4F7FB; }
.rd-exp:focus-visible { outline: 2px solid #2A70B6; outline-offset: 2px; }
/* Audit log */
.rd-audit { display: grid; gap: 4px; }
.rd-audit li { display: grid; grid-template-columns: 74px minmax(0,1fr); gap: 8px; border-radius: 8px; background: #F8FAFD; padding: 5px 8px; font-size: 11px; color: #334155; }
.rd-audit li span { font-variant-numeric: tabular-nums; color: #64748B; }
.rd-audit li.pop { animation: stepIn .35s cubic-bezier(.2,.7,.2,1) both; background: #ECFDF5; }
/* Executive dashboard (feature list section 14) */
.rd-exec { scroll-margin-top: 150px; border: 1px solid #E2E8F0; border-radius: 1.25rem; background: #fff; padding: 1.5rem; box-shadow: 0 1px 2px rgba(29,64,124,.04); }
@media (min-width: 640px) { .rd-exec { padding: 2rem; } }
.rd-ex-frame { overflow: hidden; border: 1px solid #E6ECF4; border-radius: 1rem; background: #fff; box-shadow: 0 1px 2px rgba(29,64,124,.06), 0 30px 60px -24px rgba(29,64,124,.22); }
.rd-ex-top { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #F1F5F9; padding: 12px 16px; font-size: 13px; color: #1D407C; }
.rd-ex-kpi { position: relative; border-radius: 12px; background: #F4F7FB; padding: 14px; min-width: 0; }
.rd-ex-i { position: absolute; right: 12px; top: 12px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #fff; color: #2A70B6; font-size: 11px; }
.rd-ex-v { margin-top: 4px; font-family: Montserrat, Inter, sans-serif; font-size: 1.6rem; font-weight: 800; color: #94A3B8; }
.grp-card .ltr-sm, .rd-exec .ltr-sm { width: 30px; height: 30px; font-size: 13px; }
.rd-ab p { grid-template-columns: 132px minmax(0,1fr) 72px; }
@media (max-width: 479px) {
.rd-hb { grid-template-columns: 76px minmax(0,1fr) 70px; gap: 6px; }
.rd-ci { grid-template-columns: 84px minmax(0,1fr) 80px; gap: 6px; }
.rd-sc-r { grid-template-columns: minmax(0,1fr) 84px 84px; gap: 6px; padding: 6px 8px; font-size: 11px; }
.rd-shr { grid-template-columns: 26px minmax(0,1fr); }
.rd-shr .seg { grid-column: 1 / -1; }
.rd-ab p { grid-template-columns: 96px minmax(0,1fr) 64px; }
.rd-grid { grid-template-columns: minmax(0,1fr); }
.rd-w.wide { grid-column: auto; }
.rd-ex-v { font-size: 1.3rem; }
}
/* ===== Teams page ===== */
.av { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 999px; background: linear-gradient(135deg, #3B88C8, #214C9C); color: #fff; font: 700 12px/1 Montserrat, Inter, sans-serif; }
.av-sm { width: 32px; height: 32px; font-size: 11px; }
.av-xs { width: 22px; height: 22px; font-size: 9px; }
.av-navy { background: #1D407C; }
/* Hero */
.tm-jump-k { display: inline-flex; align-items: center; gap: 8px; font: 600 13px/1.2 Montserrat, Inter, sans-serif; color: #203971; }
.tm-jump-k i { color: #2A70B6; }
.tm-jump-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.tm-select { width: 100%; max-width: 280px; appearance: none; border: 1px solid #DCE6F3; border-radius: 10px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23586068' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; padding: 10px 34px 10px 12px; font-size: 14px; color: #1A2230; box-shadow: 0 1px 2px rgba(29,64,124,.06); }
.tm-select:focus { outline: none; border-color: #3B88C8; box-shadow: 0 0 0 4px #EEF3FA; }
.tm-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.tm-quick a { padding: 6px 12px; border-radius: 999px; border: 1px solid #DCE6F3; background: #fff; font-size: 12.5px; font-weight: 600; color: #203971; transition: all .15s; }
.tm-quick a:hover { border-color: #93B5DB; background: #EEF3FA; }
.tm-hero-card { position: relative; z-index: 10; border: 1px solid #E6ECF4; border-radius: 20px; background: #fff; padding: 18px; box-shadow: 0 1px 2px rgba(29,64,124,.06), 0 30px 60px -24px rgba(29,64,124,.30); }
.tm-hero-top { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 14px; border-bottom: 1px solid #EEF3FA; }
.tm-hero-k { font: 500 10.5px/1 Montserrat, Inter, sans-serif; text-transform: uppercase; letter-spacing: .18em; color: #5A76A6; }
.tm-hero-t { margin-top: 6px; font: 700 16px/1.2 Montserrat, Inter, sans-serif; color: #1D407C; }
.tm-live { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #ECFDF5; color: #047857; font-size: 11.5px; font-weight: 600; }
.tm-live i { width: 7px; height: 7px; border-radius: 999px; background: #10B981; box-shadow: 0 0 0 0 rgba(16,185,129,.5); animation: tmPing 1.8s infinite; }
@keyframes tmPing { 70% { box-shadow: 0 0 0 7px rgba(16,185,129,0); } 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); } }
.tm-rows { display: grid; gap: 4px; margin-top: 10px; }
.tm-row { display: grid; grid-template-columns: 36px minmax(0,1fr) minmax(0,1.15fr); align-items: center; gap: 12px; padding: 10px; border-radius: 12px; transition: background-color .15s; }
.tm-row:hover, .tm-row:focus-visible { background: #F4F7FB; outline: none; }
.tm-row-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #EEF3FA; color: #2A70B6; }
.tm-row-main b { display: block; font: 700 14px/1.2 Montserrat, Inter, sans-serif; color: #1D407C; }
.tm-row-main em, .tm-row-stat em { display: block; margin-top: 3px; font-style: normal; font-size: 11.5px; color: #64748B; }
.tm-row-stat { font-size: 12.5px; color: #334155; }
.tm-row-stat b { font: 700 14px/1 Montserrat, Inter, sans-serif; color: #1A2230; }
.tm-row-bar { display: block; height: 5px; margin-top: 7px; border-radius: 99px; background: #EEF3FA; overflow: hidden; }
.tm-row-bar i { display: block; height: 100%; width: var(--w); border-radius: 99px; background: linear-gradient(90deg, #214C9C, #3B88C8); transform-origin: left; animation: tmGrow 1.2s cubic-bezier(.2,.7,.2,1) both .4s; }
@keyframes tmGrow { from { transform: scaleX(0); } }
.tm-hero-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; padding: 12px 4px 2px; border-top: 1px solid #EEF3FA; }
.tm-hero-foot > span { margin-right: 4px; font: 500 10.5px/1 Montserrat, Inter, sans-serif; text-transform: uppercase; letter-spacing: .16em; color: #5A76A6; }
.tm-hero-foot b { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; background: #F4F7FB; font-size: 12px; font-weight: 600; color: #203971; }
.tm-hero-foot b i { color: #2A70B6; font-size: 11px; }
.float-a { animation: float 6s ease-in-out infinite; }
.float-b { animation: float 7s ease-in-out infinite -2s; }
@media (max-width: 520px) {
.tm-row { grid-template-columns: 32px minmax(0,1fr); }
.tm-row-stat { grid-column: 2; }
}
/* One platform */
.tm-platforms p { font-size: 14px; font-weight: 600; color: #203971; }
.tm-platforms ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tm-platforms li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 10px; border: 1px solid #DCE6F3; background: #fff; font-size: 13px; font-weight: 600; color: #1A2230; }
.tm-platforms li i { color: #2A70B6; }
.seg { display: inline-flex; padding: 4px; border-radius: 12px; background: #fff; border: 1px solid #DCE6F3; gap: 2px; }
.seg button { padding: 8px 14px; border-radius: 9px; font: 600 13px/1 Montserrat, Inter, sans-serif; color: #586068; transition: all .2s; }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: #1D407C; color: #fff; box-shadow: 0 6px 14px -6px rgba(29,64,124,.6); }
.seg button:focus-visible { outline: 2px solid #3B88C8; outline-offset: 2px; }
.tm-flow { padding: 20px; border-radius: 20px; }
.tm-flow-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid #EEF3FA; }
.tm-flow-cap b { font: 700 15px/1.3 Montserrat, Inter, sans-serif; color: #1D407C; }
.tm-flow[data-state="before"] [data-cap-after], .tm-flow[data-state="after"] [data-cap-before] { display: none; }
.tm-flow[data-state="before"] .tm-flow-cap b { color: #B45309; }
.tm-flow .seg { background: #F4F7FB; }
.tm-flow-grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 28px; margin-top: 20px; }
.tm-flow-col { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.tm-flow-k { font: 500 10.5px/1 Montserrat, Inter, sans-serif; text-transform: uppercase; letter-spacing: .16em; color: #5A76A6; }
.tm-node, .tm-cap { position: relative; display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 12px; border: 1px solid #E6ECF4; background: #fff; font-size: 13px; font-weight: 600; color: #1A2230; }
.tm-node i, .tm-cap > i { display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px; background: #EEF3FA; color: #2A70B6; font-size: 12px; }
.tm-cap em { display: block; margin-top: 2px; font-style: normal; font-size: 11.5px; font-weight: 500; color: #64748B; }
.tm-flow-col:not(:last-child) .tm-node::after, .tm-flow-col:not(:last-child) .tm-cap::after { content: ""; position: absolute; left: 100%; top: 50%; width: 29px; height: 2px; background: repeating-linear-gradient(90deg, #3B88C8 0 6px, transparent 6px 10px); background-size: 20px 2px; animation: tmDash 1s linear infinite; transition: opacity .3s; }
@keyframes tmDash { to { background-position: 20px 0; } }
.tm-hub { display: grid; gap: 6px; padding: 10px; border-radius: 14px; border: 1.5px solid #93B5DB; background: linear-gradient(180deg, #F8FAFD, #EEF3FA); transition: all .4s; }
.tm-hub > span { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 9px; background: #fff; font-size: 13px; font-weight: 600; color: #1A2230; transition: all .4s; }
.tm-hub > span > i { color: #2A70B6; font-size: 12px; width: 14px; }
.tm-gap { margin-left: auto; padding: 2px 7px; border-radius: 999px; background: #FEF3C7; color: #B45309; font-size: 10px; font-weight: 700; opacity: 0; transition: opacity .3s; }
.tm-hub-note { display: flex; align-items: center; gap: 6px; padding: 4px 4px 0; font-size: 12px; font-weight: 600; color: #047857; transition: opacity .3s; }
.tm-flow[data-state="before"] .tm-hub { gap: 12px; border-color: transparent; background: transparent; padding: 0; }
.tm-flow[data-state="before"] .tm-hub > span { border: 1px dashed #F59E0B; }
.tm-flow[data-state="before"] .tm-hub > span:nth-child(odd) { transform: translateX(-6px) rotate(-1.2deg); }
.tm-flow[data-state="before"] .tm-hub > span:nth-child(even) { transform: translateX(6px) rotate(1.2deg); }
.tm-flow[data-state="before"] .tm-gap { opacity: 1; }
.tm-flow[data-state="before"] .tm-hub-note { opacity: 0; height: 0; padding: 0; overflow: hidden; }
.tm-flow[data-state="before"] .tm-node::after, .tm-flow[data-state="before"] .tm-cap::after { opacity: .25; animation: none; background: repeating-linear-gradient(90deg, #F59E0B 0 3px, transparent 3px 9px); }
@media (max-width: 640px) {
.tm-flow-grid { grid-template-columns: 1fr; gap: 22px; }
.tm-flow[data-state="before"] .tm-hub > span:nth-child(n) { transform: rotate(0); }
.tm-flow-col:not(:last-child) .tm-node::after, .tm-flow-col:not(:last-child) .tm-cap::after { display: none; }
.tm-flow-col:not(:last-child)::after { content: "\f063"; font: 900 13px/1 "Font Awesome 6 Free"; position: absolute; left: 50%; bottom: -18px; transform: translateX(-50%); color: #3B88C8; }
}
/* Explorer */
.tm-aside-in { position: sticky; top: 96px; }
.tm-search { position: relative; }
.tm-search i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #94A3B8; font-size: 13px; }
.tm-search input { width: 100%; border: 1px solid #DCE6F3; border-radius: 10px; padding: 10px 12px 10px 36px; font-size: 14px; background: #fff; box-shadow: 0 1px 2px rgba(29,64,124,.06); }
.tm-search input:focus { outline: none; border-color: #3B88C8; box-shadow: 0 0 0 4px #EEF3FA; }
.tm-aside .tm-select { max-width: none; }
.tm-count { margin-top: 12px; font-size: 12.5px; color: #64748B; }
.tm-count b { color: #1D407C; }
.tm-railbox { margin-top: 14px; }
.tm-railbox summary { display: none; }
.tm-rail-k { margin: 14px 0 6px; padding-left: 10px; font: 500 10.5px/1 Montserrat, Inter, sans-serif; text-transform: uppercase; letter-spacing: .16em; color: #5A76A6; }
.tm-rail { display: grid; gap: 1px; border-left: 2px solid #EEF3FA; }
.tm-rail a { display: flex; align-items: center; gap: 9px; margin-left: -2px; padding: 6px 10px; border-left: 2px solid transparent; font-size: 13px; line-height: 1.3; color: #475569; transition: all .15s; }
.tm-rail a i { width: 14px; font-size: 11.5px; color: #93B5DB; text-align: center; }
.tm-rail a:hover { color: #1D407C; background: #F8FAFD; }
.tm-rail a.on { border-left-color: #2A70B6; color: #1D407C; font-weight: 600; background: #F4F7FB; }
.tm-rail a.on i { color: #2A70B6; }
.tm-rail li.off a { opacity: .35; }
@media (max-width: 1023px) {
.tm-aside { position: sticky; top: 76px; z-index: 30; margin: 0 -16px 28px; padding: 10px 16px; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); border-bottom: 1px solid #E6ECF4; }
.tm-aside-in { position: static; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.8fr); gap: 8px; align-items: center; }
.tm-aside .tm-select { margin-top: 0; }
.tm-count { display: none; }
.tm-railbox { grid-column: 1 / -1; margin-top: 0; }
.tm-railbox summary { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12.5px; font-weight: 600; color: #2A70B6; list-style: none; }
.tm-railbox summary::-webkit-details-marker { display: none; }
.tm-railbox summary::after { content: "\f078"; font: 900 10px/1 "Font Awesome 6 Free"; }
.tm-railbox[open] summary::after { content: "\f077"; }
.tm-railbox[open] { max-height: 55vh; overflow-y: auto; }
}
@media (max-width: 480px) { .tm-aside-in { grid-template-columns: 1fr; } }
.tm-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 14px; margin-bottom: 20px; border-bottom: 1px solid #E6ECF4; }
.tm-h2 { font: 800 1.6rem/1.15 Montserrat, Inter, sans-serif; color: #1D407C; }
@media (min-width: 640px) { .tm-h2 { font-size: 2rem; } }
.tm-group-n { font-size: 13px; font-weight: 600; color: #64748B; white-space: nowrap; }
.tm-grid { display: grid; gap: 18px; }
@media (min-width: 768px) { .tm-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.team-card { position: relative; display: flex; flex-direction: column; padding: 22px; border-radius: 18px; border: 1px solid #E6ECF4; background: #fff; box-shadow: 0 1px 2px rgba(29,64,124,.06), 0 2px 8px rgba(29,64,124,.06); scroll-margin-top: 100px; transition: border-color .2s, box-shadow .2s, transform .2s; }
.team-card:hover { border-color: #BCD0E8; box-shadow: 0 1px 2px rgba(29,64,124,.06), 0 24px 44px -24px rgba(29,64,124,.35); }
.team-card:target, .team-card.flash { animation: tmFlash 1.6s ease; }
@keyframes tmFlash { 0%, 40% { box-shadow: 0 0 0 3px #3B88C8, 0 24px 44px -24px rgba(29,64,124,.35); } }
.team-spot { grid-column: 1 / -1; background: linear-gradient(180deg, #fff 0%, #F8FAFD 100%); }
.team-wide { grid-column: 1 / -1; }
@media (min-width: 900px) { .team-wide .team-list { grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 28px; } }
.team-spot-grid { display: grid; gap: 22px; }
@media (min-width: 1024px) { .team-spot-grid { grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: 32px; align-items: start; } }
.team-head { display: flex; align-items: center; gap: 14px; }
.team-ico { display: grid; place-items: center; flex-shrink: 0; width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(135deg, #3B88C8 0%, #214C9C 100%); color: #fff; font-size: 18px; box-shadow: 0 10px 20px -10px rgba(33,76,156,.7); }
.team-num { font: 500 10.5px/1 Montserrat, Inter, sans-serif; text-transform: uppercase; letter-spacing: .16em; color: #5A76A6; }
.team-name { margin-top: 6px; font: 800 1.2rem/1.2 Montserrat, Inter, sans-serif; color: #1D407C; }
.team-link { margin-left: auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: #93B5DB; font-size: 12px; opacity: 0; transition: all .15s; }
.team-card:hover .team-link, .team-link:focus-visible { opacity: 1; }
.team-link:hover { background: #EEF3FA; color: #2A70B6; }
.team-kw { margin-top: 14px; font: 600 15px/1.4 Montserrat, Inter, sans-serif; color: #2A70B6; }
.team-intro { margin-top: 8px; font-size: 15px; line-height: 1.6; color: #475569; }
.team-list { margin-top: 16px; gap: .55rem; }
.team-list li { font-size: 14.5px; }
.team-list li i { font-size: 13px; }
.team-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: auto; padding-top: 18px; }
.team-foot::before { content: ""; flex-basis: 100%; height: 1px; margin-bottom: 8px; background: #EEF3FA; }
.team-foot-k { flex-basis: 100%; font: 500 10.5px/1 Montserrat, Inter, sans-serif; text-transform: uppercase; letter-spacing: .16em; color: #5A76A6; }
.team-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mod-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; border: 1px solid #DCE6F3; background: #F8FAFD; font-size: 12.5px; font-weight: 600; color: #203971; transition: all .15s; }
.mod-chip i { font-size: 11px; color: #2A70B6; }
.mod-chip:hover { border-color: #3B88C8; background: #EEF3FA; color: #1D407C; }
.mod-chip.hit { border-color: #2A70B6; background: #2A70B6; color: #fff; }
.mod-chip.hit i { color: #fff; }
.team-page { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 7px 12px; border-radius: 8px; background: #1D407C; color: #fff; font: 600 12.5px/1 Montserrat, Inter, sans-serif; transition: background-color .15s; }
.team-page i { font-size: 10px; }
.team-page:hover { background: #2A70B6; }
.team-demo { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; font: 600 12.5px/1 Montserrat, Inter, sans-serif; color: #2A70B6; }
.team-demo i { font-size: 10px; transition: transform .15s; }
.team-demo:hover { color: #1D407C; }
.team-demo:hover i { transform: translateX(3px); }
.team-card[hidden] { display: none !important; }
.tm-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 20px; text-align: center; border: 1px dashed #BCD0E8; border-radius: 18px; color: #475569; }
.tm-empty[hidden] { display: none; }
.tm-empty > span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: #EEF3FA; color: #2A70B6; }
mark.tm-hl { background: #FEF3C7; color: inherit; border-radius: 3px; padding: 0 1px; }
/* Spotlight mockups */
.tm-spot { padding: 16px; border-radius: 16px; border: 1px solid #E6ECF4; background: #fff; box-shadow: 0 1px 2px rgba(29,64,124,.06), 0 20px 40px -24px rgba(29,64,124,.35); }
.tm-spot-head { display: flex; align-items: center; gap: 10px; }
.tm-spot-head b { display: block; font: 700 13.5px/1.2 Montserrat, Inter, sans-serif; color: #1D407C; }
.tm-spot-head em { display: block; margin-top: 2px; font-style: normal; font-size: 11.5px; color: #64748B; }
.tm-pill { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; background: #EEF3FA; color: #214C9C; font-size: 11px; font-weight: 600; white-space: nowrap; }
.tm-pill.ok { margin-left: auto; background: #ECFDF5; color: #047857; }
.tm-spot-k { margin-top: 14px; font: 500 10px/1 Montserrat, Inter, sans-serif; text-transform: uppercase; letter-spacing: .16em; color: #5A76A6; }
.tm-spot-k.mt { margin-top: 16px; }
.tm-day, .tm-split { display: flex; gap: 3px; height: 14px; margin-top: 8px; }
.tm-day i, .tm-split i { display: block; width: var(--w); border-radius: 4px; }
.tm-day .a, .tm-legend .a { background: #2A70B6; }
.tm-day .i, .tm-legend .i { background: #F59E0B; }
.tm-day .b, .tm-legend .b { background: #CBD5E1; }
.tm-split .p, .tm-legend .p { background: #10B981; }
.tm-split .n, .tm-legend .n { background: #93B5DB; }
.tm-split .x, .tm-legend .x { background: #F87171; }
.tm-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: 11.5px; color: #475569; }
.tm-legend span { display: inline-flex; align-items: center; gap: 5px; }
.tm-legend i { width: 8px; height: 8px; border-radius: 2px; }
.tm-spot-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid #EEF3FA; font-size: 12px; color: #475569; }
.tm-spot-foot i { color: #2A70B6; margin-right: 4px; }
.tm-spot-foot .fa-whatsapp { color: #128C4A; }
.tm-map { display: block; width: 100%; height: auto; margin-top: 12px; }
.tm-route { animation: tmRoute 1.2s linear infinite; }
@keyframes tmRoute { to { stroke-dashoffset: -24; } }
.tm-fence { transform-origin: 262px 84px; animation: tmFence 2.4s ease-in-out infinite; }
@keyframes tmFence { 50% { transform: scale(1.08); } }
.tm-kpis { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px; margin-top: 12px; }
.tm-kpis div { padding: 8px; border-radius: 10px; background: #F4F7FB; text-align: center; }
.tm-kpis b { display: block; font: 800 16px/1 Montserrat, Inter, sans-serif; color: #1D407C; }
.tm-kpis span { display: block; margin-top: 4px; font-size: 10.5px; color: #64748B; }
.tm-target { margin-top: 14px; }
.tm-target-bar, .tm-mini { display: block; height: 10px; border-radius: 99px; background: #EEF3FA; overflow: hidden; }
.tm-target-bar i, .tm-mini i { display: block; height: 100%; width: var(--w); border-radius: 99px; background: linear-gradient(90deg, #214C9C, #3B88C8); }
.tm-target p { margin-top: 8px; font-size: 12.5px; color: #475569; }
.tm-target b { font: 800 15px/1 Montserrat, Inter, sans-serif; color: #1D407C; }
.tm-board-list { display: grid; gap: 8px; margin-top: 10px; }
.tm-board-list li { display: grid; grid-template-columns: 22px minmax(0,1fr) 70px 34px; align-items: center; gap: 8px; font-size: 12.5px; }
.tm-board-list b { font-weight: 600; color: #1A2230; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-board-list .tm-mini { height: 6px; }
.tm-board-list em { font-style: normal; font-weight: 700; color: #1D407C; text-align: right; }
/* Module map */
.tm-hint { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 13px; color: #64748B; }
.tm-hint i { color: #2A70B6; }
.tm-mx-wrap { overflow-x: auto; border-radius: 16px; -webkit-overflow-scrolling: touch; }
.tm-mx { width: 100%; min-width: 1020px; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.tm-mx th, .tm-mx td { border-bottom: 1px solid #EEF3FA; }
.tm-mx thead th { position: sticky; top: 0; z-index: 2; vertical-align: bottom; padding: 12px 2px 10px; background: #fff; border-bottom: 1px solid #DCE6F3; }
.tm-mx thead th button { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; padding: 6px 2px; border-radius: 8px; font-size: 10.5px; font-weight: 600; line-height: 1.2; color: #475569; text-align: center; transition: all .15s; }
.tm-mx thead th button i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #EEF3FA; color: #2A70B6; font-size: 11px; }
.tm-mx thead th button:hover, .tm-mx thead th button[aria-pressed="true"] { background: #EEF3FA; color: #1D407C; }
.tm-mx thead th button[aria-pressed="true"] i { background: #2A70B6; color: #fff; }
.mx-corner { min-width: 200px; padding-left: 18px !important; text-align: left; font: 600 11px/1 Montserrat, Inter, sans-serif; text-transform: uppercase; letter-spacing: .14em; color: #5A76A6; }
.tm-mx tbody th { position: sticky; left: 0; z-index: 1; padding: 0; background: #fff; text-align: left; font-weight: 600; white-space: nowrap; }
.tm-mx tbody th a { display: block; padding: 10px 18px; color: #1A2230; }
.tm-mx tbody th a:hover { color: #2A70B6; }
.tm-mx td { text-align: center; padding: 0; height: 40px; }
.tm-mx .mx-sub th { position: static; padding: 14px 18px 8px; background: #F8FAFD; font: 600 10.5px/1 Montserrat, Inter, sans-serif; text-transform: uppercase; letter-spacing: .16em; color: #5A76A6; }
.mx-dot { display: inline-block; width: 14px; height: 14px; border-radius: 999px; background: linear-gradient(135deg, #3B88C8, #214C9C); box-shadow: 0 0 0 3px #EEF3FA; vertical-align: middle; }
.mx-soft { background: #BCD0E8; box-shadow: none; width: 9px; height: 9px; }
.tm-mx tbody tr:not(.mx-sub):hover th, .tm-mx tbody tr:not(.mx-sub):hover td { background: #F8FAFD; }
.tm-mx td.col-on, .tm-mx th.col-on { background: #EEF3FA !important; }
.tm-mx tr.row-dim th a { color: #94A3B8; }
.tm-mx-legend { display: flex; gap: 18px; margin-top: 12px; font-size: 12px; color: #64748B; }
.tm-mx-legend span { display: inline-flex; align-items: center; gap: 8px; }
.tm-tbl-wrap { overflow: hidden; border-radius: 16px; }
.tm-tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tm-tbl thead th { padding: 14px 20px; background: #1D407C; color: #fff; text-align: left; font: 600 12px/1 Montserrat, Inter, sans-serif; text-transform: uppercase; letter-spacing: .12em; }
.tm-tbl tbody th, .tm-tbl td { padding: 12px 20px; border-bottom: 1px solid #EEF3FA; text-align: left; vertical-align: top; }
.tm-tbl tbody th { width: 34%; font-weight: 600; }
.tm-tbl tbody th a { display: inline-flex; align-items: center; gap: 10px; color: #1D407C; }
.tm-tbl tbody th a i { width: 16px; color: #2A70B6; font-size: 13px; text-align: center; }
.tm-tbl tbody th a:hover { color: #2A70B6; }
.tm-tbl td { color: #475569; }
.tm-tbl .mm-sub th { padding: 12px 20px 8px; background: #F8FAFD; font: 600 10.5px/1 Montserrat, Inter, sans-serif; text-transform: uppercase; letter-spacing: .16em; color: #5A76A6; width: auto; }
@media (max-width: 640px) {
.tm-tbl thead { display: none; }
.tm-tbl tr { display: block; padding: 12px 16px; border-bottom: 1px solid #EEF3FA; }
.tm-tbl tbody th, .tm-tbl td { display: block; width: auto; padding: 0; border: 0; }
.tm-tbl td { margin-top: 4px; padding-left: 26px; font-size: 13.5px; }
.tm-tbl .mm-sub { padding: 0; }
.tm-tbl .mm-sub th { padding: 12px 16px 8px; }
}
/* FAQ */
.faq { border: 1px solid #E6ECF4; border-radius: 14px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.faq[open] { border-color: #BCD0E8; box-shadow: 0 1px 2px rgba(29,64,124,.06), 0 14px 30px -20px rgba(29,64,124,.35); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; cursor: pointer; list-style: none; font: 700 15.5px/1.4 Montserrat, Inter, sans-serif; color: #1D407C; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; background: #EEF3FA; color: #2A70B6; font-size: 12px; transition: transform .25s; }
.faq[open] summary i { transform: rotate(45deg); background: #2A70B6; color: #fff; }
.faq summary:focus-visible { outline: 2px solid #3B88C8; outline-offset: -2px; border-radius: 14px; }
.faq p { padding: 0 20px 20px; font-size: 15px; line-height: 1.65; color: #475569; }
.tm-faq-side { padding: 18px; border-radius: 14px; background: #F4F7FB; }
.tm-xlink { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font: 600 14px/1 Montserrat, Inter, sans-serif; color: #2A70B6; }
.tm-xlink:hover { color: #1D407C; }
.tm-xlink i { font-size: 11px; transition: transform .15s; }
.tm-xlink:hover i { transform: translateX(3px); }
/* CTA */
.tm-cta-icons { display: flex; justify-content: center; gap: 10px; }
.tm-cta-icons i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); font-size: 15px; }
.tm-cta-icons i:nth-child(odd) { transform: translateY(-6px); }
/* Download modal */
.dl-item { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; border: 1px solid #E6ECF4; transition: all .15s; }
.dl-item:hover { border-color: #93B5DB; background: #F8FAFD; }
.dl-item > span:first-child { display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; background: #EEF3FA; color: #1D407C; font-size: 17px; }
.dl-item b { display: block; font: 700 14px/1.2 Montserrat, Inter, sans-serif; color: #1D407C; }
.dl-item em { display: block; margin-top: 2px; font-style: normal; font-size: 12.5px; color: #64748B; }
.dl-go { margin-left: auto; font-size: 11px; color: #93B5DB; }
@media (prefers-reduced-motion: reduce) {
.tm-row-bar i, .tm-route, .tm-fence, .tm-live i, .float-a, .float-b { animation: none; }
.tm-flow-col .tm-node::after, .tm-flow-col .tm-cap::after { animation: none; }
.tm-hub, .tm-hub > span { transition: none; }
}
/* ===== Industries ===== */
.in-cfg .cfg-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.cfg-tabs button { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 999px; border: 1px solid #DCE6F3; background: #fff; font-size: 12.5px; font-weight: 600; color: #203971; transition: all .2s; }
.cfg-tabs button i { font-size: 11px; color: #2A70B6; }
.cfg-tabs button:hover { border-color: #93B5DB; background: #F4F7FB; }
.cfg-tabs button[aria-selected="true"] { background: #1D407C; border-color: #1D407C; color: #fff; box-shadow: 0 8px 18px -10px rgba(29,64,124,.7); }
.cfg-tabs button[aria-selected="true"] i { color: #fff; }
.cfg-tabs button:focus-visible { outline: 2px solid #3B88C8; outline-offset: 2px; }
.cfg-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; margin-top: 14px; }
.cfg-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 10px; border-radius: 12px; border: 1px dashed #DCE6F3; background: #F8FAFD; color: #94A3B8; transition: all .35s cubic-bezier(.2,.7,.2,1); }
.cfg-tile i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #EEF3FA; color: #93B5DB; font-size: 12px; transition: all .35s; }
.cfg-tile b { font-size: 12px; font-weight: 600; line-height: 1.2; }
.cfg-tile.on { border: 1px solid #93B5DB; background: #fff; color: #1D407C; box-shadow: 0 12px 22px -16px rgba(29,64,124,.6); transform: translateY(-2px); }
.cfg-tile.on i { background: linear-gradient(135deg, #3B88C8, #214C9C); color: #fff; }
.cfg-tile.on::after { content: "\f00c"; position: absolute; right: 8px; top: 8px; font: 900 9px/1 "Font Awesome 6 Free"; color: #10B981; }
.cfg-every { margin-left: 2px; font-style: normal; font-size: 11.5px; color: #64748B; }
@media (max-width: 520px) { .cfg-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.in-pains { display: grid; gap: 10px; }
@media (min-width: 560px) { .in-pains { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.in-pain { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; border: 1px solid #F3E2C0; background: #FFFBF2; }
.in-pain span { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; background: #FEF3C7; color: #B45309; font-size: 13px; }
.in-pain b { font-size: 14px; font-weight: 600; line-height: 1.35; color: #1A2230; }
.in-chain-box { padding: 18px; border-radius: 18px; }
.in-chain { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 8px; margin-top: 14px; }
.in-chain li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.in-chain span { position: relative; z-index: 1; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #EEF3FA; color: #2A70B6; font-size: 15px; transition: all .4s; transition-delay: calc(var(--i) * .18s); }
.in-chain b { font-size: 12px; font-weight: 600; color: #203971; }
.in-chain li:not(:last-child)::after { content: ""; position: absolute; left: calc(50% + 24px); right: calc(-50% + 24px); top: 20px; height: 2px; background: repeating-linear-gradient(90deg, #3B88C8 0 6px, transparent 6px 10px); background-size: 20px 2px; opacity: .35; }
.in-chain-box.go .in-chain span { background: linear-gradient(135deg, #3B88C8, #214C9C); color: #fff; box-shadow: 0 10px 20px -12px rgba(33,76,156,.8); }
.in-chain-box.go .in-chain li:not(:last-child)::after { opacity: 1; animation: tmDash 1s linear infinite; }
@media (max-width: 520px) { .in-chain { grid-template-columns: repeat(3, minmax(0,1fr)); row-gap: 16px; } .in-chain li:nth-child(3)::after { display: none; } }
.in-pillars { display: grid; gap: 14px; }
@media (min-width: 640px) { .in-pillars { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) { .in-pillars { grid-template-columns: repeat(5, minmax(0,1fr)); } }
.in-pillar { display: flex; flex-direction: column; padding: 20px; border-radius: 16px; border: 1px solid #E6ECF4; background: #fff; box-shadow: 0 1px 2px rgba(29,64,124,.06); transition: border-color .2s, transform .2s; }
.in-pillar:hover { border-color: #BCD0E8; transform: translateY(-2px); }
.in-pillar-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(135deg, #3B88C8, #214C9C); color: #fff; font-size: 16px; }
.in-pillar h3 { margin-top: 14px; font: 700 16px/1.25 Montserrat, Inter, sans-serif; color: #1D407C; }
.in-pillar p { margin-top: 8px; font-size: 14px; line-height: 1.55; color: #475569; }
.in-pillar-links { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: auto; padding-top: 14px; }
.in-pillar-links a { font-size: 12px; font-weight: 600; color: #2A70B6; }
.in-pillar-links a:hover { color: #1D407C; text-decoration: underline; }
.in-trust { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 22px; border-radius: 16px; background: #fff; border: 1px solid #E6ECF4; }
.in-trust p { font-size: 14.5px; color: #475569; }
.in-trust p b { color: #1D407C; }
.in-trust ul { display: flex; flex-wrap: wrap; gap: 8px; }
.in-trust li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 10px; background: #F4F7FB; font-size: 12.5px; font-weight: 600; color: #1A2230; }
.in-trust li i { color: #2A70B6; }
.in-rail { margin-top: 10px; }
@media (min-width: 1024px) { .tm-aside-in { max-height: calc(100vh - 120px); overflow-y: auto; padding-right: 4px; } }
.in-also { display: flex; flex-direction: column; align-items: flex-start; padding: 22px; border-radius: 18px; border: 1.5px dashed #BCD0E8; background: linear-gradient(180deg, #F8FAFD, #fff); }
.in-also .team-ico { background: #fff; color: #2A70B6; border: 1px solid #DCE6F3; box-shadow: none; }
.in-also[hidden] { display: none; }
/* Spotlight extras */
.in-agents { display: grid; gap: 9px; margin-top: 10px; }
.in-agents li { display: grid; grid-template-columns: 22px 104px minmax(0,1fr) 54px; align-items: center; gap: 8px; font-size: 12.5px; }
.in-agents b { font-weight: 600; color: #1A2230; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.in-agents .tm-split { height: 8px; margin-top: 0; }
.in-agents em { font-style: normal; font-size: 11px; font-weight: 700; text-align: right; }
.in-agents em.ok { color: #047857; }
.in-agents em.idle { color: #B45309; }
.in-src { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px; margin-top: 12px; }
.in-src span { padding: 8px; border-radius: 10px; background: #F4F7FB; font-size: 10.5px; color: #64748B; text-align: center; line-height: 1.25; }
.in-src b { display: block; margin-bottom: 3px; font: 800 16px/1 Montserrat, Inter, sans-serif; color: #1D407C; }
.in-leads { display: grid; gap: 8px; margin-top: 10px; }
.in-leads li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid #EEF3FA; }
.in-lead-main { min-width: 0; flex: 1; }
.in-lead-main b { display: block; font-size: 12.5px; font-weight: 600; color: #1A2230; }
.in-lead-main em { display: block; font-style: normal; font-size: 11px; color: #64748B; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.in-score { padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.in-score.hot { background: #FEE2E2; color: #B91C1C; }
.in-score.warm { background: #FEF3C7; color: #B45309; }
.in-score.cold { background: #EEF3FA; color: #214C9C; }
.in-sites { display: grid; gap: 8px; margin-top: 12px; }
.in-sites li { display: grid; grid-template-columns: 28px minmax(0,1fr) 44px; grid-template-rows: auto auto; align-items: center; column-gap: 10px; row-gap: 6px; padding: 9px 10px; border-radius: 10px; border: 1px solid #EEF3FA; }
.in-sites li > i { grid-row: 1 / 3; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #EEF3FA; color: #2A70B6; font-size: 11px; }
.in-site-main b { display: block; font-size: 12.5px; font-weight: 600; color: #1A2230; }
.in-site-main em { display: block; font-style: normal; font-size: 11px; color: #64748B; }
.in-site-n { font: 800 13px/1 Montserrat, Inter, sans-serif; color: #047857; text-align: right; }
.in-site-n.warn { color: #B45309; }
.in-sites .tm-mini { grid-column: 2 / 4; height: 5px; }
.in-pay { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding: 10px; border-radius: 10px; background: #F4F7FB; font-size: 11.5px; color: #475569; }
.in-pay span { padding: 3px 8px; border-radius: 7px; background: #fff; }
.in-pay span:first-child { background: transparent; padding-left: 0; }
.in-pay i { margin-right: 5px; color: #2A70B6; }
.in-pay b { color: #1D407C; }
/* Matrix */
.in-mx { min-width: 780px; }
.in-mx thead th button { font-size: 11px; }
.in-mx thead th button em { font-style: normal; font-size: 10px; font-weight: 700; color: #94A3B8; }
.in-mx-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-top: 12px; }
.in-mx-note { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: #203971; }
.in-mx-note i { color: #2A70B6; }
/* Industry pages */
@media (min-width: 1024px) { .tp-mods.nx5 { grid-template-columns: repeat(5, minmax(0,1fr)); } }
.ip-pn { display: flex; gap: 8px; }
.ip-pn a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; border: 1px solid #DCE6F3; background: #fff; font-size: 13px; font-weight: 600; color: #203971; transition: all .15s; }
.ip-pn a i { font-size: 10px; color: #2A70B6; }
.ip-pn a:hover { border-color: #3B88C8; background: #EEF3FA; }
.ip-also { max-width: 820px; font-size: 14.5px; line-height: 1.6; color: #475569; }
.ip-also b { color: #1D407C; }
@media (prefers-reduced-motion: reduce) {
.cfg-tile, .cfg-tile i, .in-chain span { transition: none; }
.in-chain-box.go .in-chain li::after { animation: none; }
}
/* ===== COPS 360 features cards + WhatsApp float ===== */
.bg-f8fbfa { background-color: #f8fbfa !important; }
.features-card-section {
display: block !important;
width: 100%;
padding: 70px 0 50px;
border-top: 1px solid #E6ECF4;
background-color: #f8fbfa;
}
.features-card-inner {
width: 100%;
max-width: 1140px;
margin: 0 auto;
padding: 0 16px;
box-sizing: border-box;
}
.features-card-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
@media (min-width: 992px) {
.features-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
}
.single-features-card {
background-color: #fff;
box-shadow: 0 1px 10px 0 rgba(0,0,0,0.03);
border-radius: 10px;
padding: 22px 16px;
transition: .5s;
position: relative;
min-height: 210px;
border: 1px solid #cdcdcd;
text-align: center;
box-sizing: border-box;
}
.single-features-card:hover {
box-shadow: 0 5px 50px 0 rgba(0,0,0,0.08);
transform: translateY(-5px);
}
.single-features-ico {
display: grid !important;
place-items: center;
width: 70px;
height: 70px;
margin: 0 auto 18px;
border-radius: 100%;
background: #eeebfb;
color: #03A9F4;
font-size: 28px;
line-height: 1;
}
.single-features-ico i {
display: inline-block !important;
color: #03A9F4 !important;
font-size: 28px !important;
width: auto !important;
height: auto !important;
line-height: 1 !important;
margin: 0 !important;
background: none !important;
}
.single-features-card h3 {
margin: 0 0 10px;
font-size: 18px;
font-weight: 600;
font-family: Montserrat, Inter, sans-serif;
line-height: 1.3;
color: #080a3c;
}
.single-features-card p {
margin: 0;
font-size: 14px;
line-height: 1.5;
color: #586068;
}
@media (max-width: 767px) {
.features-card-section { padding: 40px 0 28px; }
.single-features-card { min-height: 160px; padding: 14px 10px; }
.single-features-ico { width: 50px; height: 50px; margin-bottom: 12px; font-size: 22px; }
.single-features-ico i { font-size: 22px !important; }
.single-features-card h3 { font-size: 15px; }
}
/* WhatsApp float */
.whatsapp {
position: fixed !important;
right: 18px;
bottom: 120px;
z-index: 9999 !important;
width: 56px;
height: 56px;
overflow: visible;
pointer-events: auto;
}
.whatsapp .pinkBg {
background-color: #28a332 !important;
background-image: linear-gradient(90deg, #28a332, #52b15a) !important;
}
.whatsapp .intro-banner-vdo-play-btn {
display: flex !important;
align-items: center;
justify-content: center;
height: 52px;
width: 52px;
position: relative;
border-radius: 100px;
z-index: 1;
text-decoration: none !important;
box-shadow: 0 4px 14px rgba(40, 163, 50, 0.45);
}
.whatsapp .intro-banner-vdo-play-btn > i {
position: relative;
z-index: 2;
line-height: 1 !important;
font-size: 30px !important;
color: #fff !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
background: none !important;
}
.whatsapp .intro-banner-vdo-play-btn .ripple {
position: absolute;
inset: 0;
z-index: 0;
opacity: 0;
border-radius: 100px;
pointer-events: none;
-webkit-animation: dxWaRipple 1.8s infinite;
animation: dxWaRipple 1.8s infinite;
}
.whatsapp .intro-banner-vdo-play-btn .ripple:nth-child(2) {
-webkit-animation-delay: .3s;
animation-delay: .3s;
}
.whatsapp .intro-banner-vdo-play-btn .ripple:nth-child(3) {
-webkit-animation-delay: .6s;
animation-delay: .6s;
}
@-webkit-keyframes dxWaRipple {
0% { opacity: 0.55; -webkit-transform: scale(1); transform: scale(1); }
100% { opacity: 0; -webkit-transform: scale(2.2); transform: scale(2.2); }
}
@keyframes dxWaRipple {
0% { opacity: 0.55; transform: scale(1); }
100% { opacity: 0; transform: scale(2.2); }
}
#to-top { right: 5.75rem; bottom: 1.25rem; z-index: 40; }