/* ==========================================================================
STIRSHAKEN.AI — v2 "Controlled" theme layer
--------------------------------------------------------------------------
Loaded LAST on the public site, the client portal and the admin workspace
(header.php, portal_header.php, admin_header.php). Cosmetic and responsive
only: no route, field name or behaviour changes.
What it does
· one flat surface system (no glow, glass blur or gradient fills)
· one accent, used as a signal instead of a wash
· one type hierarchy: Space Grotesk display, Inter text, IBM Plex Mono labels
· fixes: page titles hidden under the fixed header on 13 pages, cookie
banner overflow on phones, overlapping cards, unreadable step numbers
· phone and tablet layouts tightened; 44px touch targets
How it wins the cascade
Every rule is prefixed body.system-surface:not(#v2) so this file outranks
the older layers (style, cinematic, shield-app, final-finish, polish,
launch-final, system-theme, admin-ux) without counting their selectors.
Remove the one to this file to return to the previous look.
========================================================================== */
:root{
--v2-bg:#0e1216;
--v2-band:#11161b;
--v2-panel:#151a21;
--v2-panel-2:#1b212a;
--v2-inset:#0b0f13;
--v2-line:rgba(255,255,255,.085);
--v2-line-2:rgba(255,255,255,.17);
--v2-line-ctl:#616b78;
--v2-text:#f5f7fa;
--v2-copy:#c5ccd6;
--v2-muted:#929cab;
--v2-accent:var(--brand-accent,#6a3eff);
--v2-accent-hover:var(--brand-accent-hover,#5a31e6);
--v2-accent-text:var(--brand-accent-text,#a897ff);
--v2-accent-soft:var(--brand-accent-soft,rgba(106,62,255,.14));
--v2-ok:#34d399; --v2-ok-soft:rgba(52,211,153,.12);
--v2-warn:#fbbf24; --v2-warn-soft:rgba(251,191,36,.12);
--v2-bad:#f87171; --v2-bad-soft:rgba(248,113,113,.12);
--v2-info:#60a5fa; --v2-info-soft:rgba(96,165,250,.12);
--v2-r-sm:6px; --v2-r:8px; --v2-r-lg:12px;
--v2-pop:0 18px 44px -14px rgba(0,0,0,.72);
--v2-ease:cubic-bezier(.2,.7,.2,1);
}
/* ==========================================================================
1. GLOBAL — shared by website, portal and admin
========================================================================== */
body.system-surface:not(#v2){background:var(--v2-bg)!important;color:var(--v2-text)}
body.system-surface:not(#v2) ::selection{background:var(--v2-accent);color:#fff}
/* Type hierarchy */
body.system-surface:not(#v2) :is(h1,h2,h3,h4,h5){text-wrap:balance}
body.system-surface:not(#v2) p{text-wrap:pretty}
/* Emphasis in a headline is one flat color, not a gradient */
body.system-surface:not(#v2) .gradient-text,
body.system-surface:not(#v2) .gradient-text *{
background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;
-webkit-text-fill-color:currentColor!important;color:var(--v2-accent-text)!important;
text-shadow:none!important;filter:none!important;
}
/* Eyebrow: a plain mono label with a short rule, never a glowing pill */
body.system-surface:not(#v2) :is(.section-label,.hero-eyebrow){
display:inline-flex!important;align-items:center!important;gap:10px!important;width:auto!important;max-width:100%!important;
padding:0!important;margin:0 0 16px!important;
background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;
font-family:var(--font-mono)!important;font-size:11.5px!important;font-weight:500!important;line-height:1.4!important;
letter-spacing:.14em!important;text-transform:uppercase!important;color:var(--v2-accent-text)!important;
}
body.system-surface:not(#v2) :is(.section-label,.hero-eyebrow)::before{
content:""!important;display:block!important;flex:0 0 auto!important;width:18px!important;height:1px!important;
background:currentColor!important;border-radius:0!important;box-shadow:none!important;animation:none!important;opacity:.75!important;
position:static!important;transform:none!important;
}
body.system-surface:not(#v2) :is(.section-label,.hero-eyebrow)::after{content:none!important}
body.system-surface:not(#v2) .hero-eyebrow-dot{display:none!important}
/* Buttons: flat fills, one radius, no glow, no lift */
body.system-surface:not(#v2) :is(.btn,.btn-primary,.btn-secondary,.btn-outline,.btn-ghost,.btn-check,.btn-sm,.aw-next,.aw-back,.nav-btn-start,.nav-btn-portal,.cookie-accept,.cookie-reject){
border-radius:var(--v2-r)!important;font-weight:600!important;letter-spacing:0!important;text-transform:none!important;
box-shadow:none!important;transform:none!important;text-shadow:none!important;
transition:background-color .15s ease,border-color .15s ease,color .15s ease!important;
}
body.system-surface:not(#v2) :is(.btn-primary,.btn-check,.aw-next,.nav-btn-start,.cookie-accept),
body.system-surface:not(#v2) .dash-body :is(.btn.primary,.btn.btn-primary,.btn-sm.primary){
background:var(--v2-accent)!important;border:1px solid transparent!important;color:#fff!important;box-shadow:none!important;
}
body.system-surface:not(#v2) :is(.btn-primary,.btn-check,.aw-next,.nav-btn-start,.cookie-accept):hover,
body.system-surface:not(#v2) .dash-body :is(.btn.primary,.btn.btn-primary,.btn-sm.primary):hover{
background:var(--v2-accent-hover)!important;box-shadow:none!important;transform:none!important;
}
body.system-surface:not(#v2) :is(.btn-outline,.btn-ghost,.btn-secondary,.aw-back,.nav-btn-portal,.cookie-reject),
body.system-surface:not(#v2) .dash-body :is(.btn:not(.primary):not(.btn-primary):not(.danger):not(.btn-danger),.btn.secondary,.btn.btn-secondary,.btn-sm.ghost){
background:transparent!important;border:1px solid var(--v2-line-2)!important;color:var(--v2-text)!important;box-shadow:none!important;
}
body.system-surface:not(#v2) :is(.btn-outline,.btn-ghost,.btn-secondary,.aw-back,.nav-btn-portal,.cookie-reject):hover,
body.system-surface:not(#v2) .dash-body :is(.btn:not(.primary):not(.btn-primary):not(.danger):not(.btn-danger),.btn.secondary,.btn.btn-secondary,.btn-sm.ghost):hover{
background:rgba(255,255,255,.05)!important;border-color:var(--v2-muted)!important;color:#fff!important;transform:none!important;
}
body.system-surface:not(#v2) .dash-body :is(.btn.danger,.btn-sm.danger,.btn.btn-danger){
background:var(--v2-bad-soft)!important;border:1px solid transparent!important;color:var(--v2-bad)!important;
}
body.system-surface:not(#v2) .dash-body :is(.btn.danger,.btn-sm.danger,.btn.btn-danger):hover{border-color:var(--v2-bad)!important}
body.system-surface:not(#v2) :is(.btn-primary,.btn-outline,.btn-ghost,.btn-check)::before,
body.system-surface:not(#v2) :is(.btn-primary,.btn-outline,.btn-ghost,.btn-check)::after{content:none!important}
/* Fields */
body.system-surface:not(#v2) :is(.form-control,.pill-select,
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="file"]),
select,textarea){
background-color:var(--v2-inset)!important;border-color:var(--v2-line-ctl)!important;border-radius:var(--v2-r)!important;
color:var(--v2-text)!important;box-shadow:none!important;
transition:border-color .15s ease,box-shadow .15s ease!important;
}
body.system-surface:not(#v2) :is(.form-control,input,select,textarea):hover:not(:focus):not(:disabled){border-color:var(--v2-muted)!important}
body.system-surface:not(#v2) :is(.form-control,input,select,textarea):focus{
outline:0!important;border-color:var(--v2-accent-text)!important;box-shadow:0 0 0 3px var(--v2-accent-soft)!important;background-color:var(--v2-inset)!important;
}
body.system-surface:not(#v2) :is(.form-control,input,select,textarea)::placeholder{color:var(--v2-muted)!important;opacity:1}
body.system-surface:not(#v2) .pill-select{border-radius:999px!important}
body.system-surface:not(#v2) .form-group label, body.system-surface:not(#v2) .checker-field label{
color:var(--v2-copy)!important;font-family:var(--font-body)!important;font-size:13px!important;font-weight:600!important;
letter-spacing:0!important;text-transform:none!important;margin-bottom:6px!important;
}
body.system-surface:not(#v2) :is(a,button,input,select,textarea,[tabindex]):focus-visible{
outline:2px solid var(--v2-accent-text)!important;outline-offset:2px!important;
}
/* Status badges keep their tone; the frame is uniform */
body.system-surface:not(#v2) .badge{
border-radius:999px!important;border:0!important;padding:3px 9px!important;
font-family:var(--font-mono)!important;font-size:10.5px!important;font-weight:500!important;letter-spacing:.06em!important;
}
body.system-surface:not(#v2) :is(.alert,.alert-success,.alert-error,.alert-warning,.dash-alert){border-radius:var(--v2-r)!important;box-shadow:none!important}
@media (prefers-reduced-motion:reduce){
body.system-surface:not(#v2) *,body.system-surface:not(#v2) *::before,body.system-surface:not(#v2) *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
/* ==========================================================================
1b. ICONS — emoji pictograms are replaced server-side by line icons
(ui_emoji_filter in app/core/ui_icons.php). They scale with the text.
========================================================================== */
body.system-surface:not(#v2) .ui-em{display:inline-flex;align-items:center;justify-content:center;width:1.15em;height:1.15em;vertical-align:-.2em;flex:0 0 auto;line-height:1}
body.system-surface:not(#v2) .ui-em .ui-ic{width:100%;height:100%}
body.system-surface:not(#v2) :is(h1,h2,h3,h4,h5,.panel-head,.pc-head) .ui-em{color:var(--v2-accent-text);margin-right:.15em}
body.system-surface:not(#v2) .ui-dot{display:inline-block;width:.6em;height:.6em;border-radius:50%;vertical-align:.05em;margin-right:.25em;background:var(--v2-muted)}
body.system-surface:not(#v2) .ui-dot.is-ok{background:var(--v2-ok)} body.system-surface:not(#v2) .ui-dot.is-warn{background:var(--v2-warn)} body.system-surface:not(#v2) .ui-dot.is-bad{background:var(--v2-bad)} body.system-surface:not(#v2) .ui-dot.is-info{background:var(--v2-info)}
/* Icon tiles that used to hold an emoji */
body.system-surface:not(#v2) :is(.notif-item .ic,.manage-work-card > :first-child,.cc-icon,.res-ic,.result-icon) .ui-em{width:20px;height:20px;vertical-align:middle}
body.system-surface:not(#v2) .dash-body .empty .ui-em{width:36px;height:36px}
/* ==========================================================================
2. PUBLIC WEBSITE
========================================================================== */
/* -- Navigation ------------------------------------------------------------ */
body.system-surface:not(#v2) .navbar{
background:rgba(14,18,22,.97)!important;border-bottom:1px solid var(--v2-line)!important;
-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important;
}
body.system-surface:not(#v2) .navbar::after{content:none!important}
body.system-surface:not(#v2) .navbar.scrolled{background:var(--v2-bg)!important;box-shadow:none!important;border-bottom-color:var(--v2-line-2)!important}
body.system-surface:not(#v2) .nav-logo-img{filter:none!important}
body.system-surface:not(#v2) .nav-link{
color:var(--v2-copy)!important;font-weight:500!important;border-radius:var(--v2-r)!important;background:transparent!important;box-shadow:none!important;
}
body.system-surface:not(#v2) .nav-link::after{content:none!important}
body.system-surface:not(#v2) .nav-link:hover{color:#fff!important;background:rgba(255,255,255,.05)!important}
body.system-surface:not(#v2) .nav-link.active{color:#fff!important;background:rgba(255,255,255,.07)!important}
body.system-surface:not(#v2) .nav-phone-icon{
background:transparent!important;border:1px solid var(--v2-line-2)!important;border-radius:var(--v2-r)!important;
color:var(--v2-accent-text)!important;box-shadow:none!important;
}
body.system-surface:not(#v2) .nav-phone small{color:var(--v2-muted)!important}
body.system-surface:not(#v2) .nav-drop-menu{
background:var(--v2-panel)!important;border:1px solid var(--v2-line-2)!important;border-radius:var(--v2-r-lg)!important;
box-shadow:var(--v2-pop)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
body.system-surface:not(#v2) .nav-drop-head{color:var(--v2-muted)!important;font-family:var(--font-mono)!important;letter-spacing:.12em!important}
body.system-surface:not(#v2) .nav-drop-menu a:not(.btn-primary){border-radius:var(--v2-r-sm)!important}
body.system-surface:not(#v2) .nav-drop-menu a:not(.btn-primary):hover{background:rgba(255,255,255,.05)!important;color:#fff!important}
body.system-surface:not(#v2) .nav-drop-cta{background:var(--v2-band)!important;border-color:var(--v2-line)!important;border-radius:var(--v2-r)!important}
body.system-surface:not(#v2) .mobile-menu{background:var(--v2-bg)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
body.system-surface:not(#v2) .mobile-nav-link, body.system-surface:not(#v2) .mobile-services-toggle{
font-family:var(--font-body)!important;font-size:17px!important;font-weight:500!important;letter-spacing:-.005em!important;
color:var(--v2-text)!important;border-bottom:1px solid var(--v2-line)!important;min-height:54px!important;
}
body.system-surface:not(#v2) .mobile-nav-link, body.system-surface:not(#v2) .mobile-services-toggle{text-transform:none!important}
body.system-surface:not(#v2) .mobile-nav-phone{
background:transparent!important;border:1px solid var(--v2-line-2)!important;border-radius:var(--v2-r)!important;color:var(--v2-text)!important;
min-height:46px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-weight:600!important;box-shadow:none!important;
}
body.system-surface:not(#v2) .mobile-menu :is(.btn-primary,.btn-outline){min-height:46px!important}
/* The assistant launcher never sits on top of the open menu */
body.system-surface:not(#v2):has(.mobile-menu.open) #sia-widget:not(.open){display:none!important}
body.system-surface:not(#v2) .mobile-service-group{font-family:var(--font-mono)!important;color:var(--v2-muted)!important;letter-spacing:.12em!important}
body.system-surface:not(#v2) .mobile-service-link{color:var(--v2-copy)!important;min-height:44px!important;display:flex!important;align-items:center!important}
body.system-surface:not(#v2) .mobile-close{background:transparent!important;border:1px solid var(--v2-line-2)!important;border-radius:var(--v2-r)!important;width:44px!important;height:44px!important}
body.system-surface:not(#v2) .hamburger{min-width:44px!important;min-height:44px!important;border-radius:var(--v2-r)!important}
/* -- Section rhythm and headings ------------------------------------------- */
body.system-surface:not(#v2) :is(.section,.services,.how-it-works,.why-us,.faq,.blog-preview,.corporate-capability){padding:84px 0!important}
body.system-surface:not(#v2) .section-title{
font-size:clamp(30px,3.3vw,44px)!important;font-weight:600!important;line-height:1.08!important;letter-spacing:-.03em!important;
color:var(--v2-text)!important;margin-bottom:16px!important;
}
body.system-surface:not(#v2) :is(.section-sub,.section-subtitle){font-size:17px!important;line-height:1.65!important;color:var(--v2-copy)!important;max-width:640px}
/* Hairline seams between sections stay; the glow seams go */
body.system-surface:not(#v2) main > section::before, body.system-surface:not(#v2) main > section::after{box-shadow:none!important}
/* -- Home hero ------------------------------------------------------------- */
body.system-surface:not(#v2) .hero{background:var(--v2-bg)!important}
body.system-surface:not(#v2) .hero .mesh-bg{display:none!important}
body.system-surface:not(#v2) .hero .dot-grid{opacity:.5!important}
body.system-surface:not(#v2) .hero h1{
font-size:clamp(40px,4.4vw,60px)!important;font-weight:600!important;line-height:1.04!important;letter-spacing:-.035em!important;
color:var(--v2-text)!important;margin-bottom:22px!important;max-width:13.5em;
}
body.system-surface:not(#v2) .hero-sub{font-size:clamp(16px,1.35vw,18px)!important;line-height:1.65!important;color:var(--v2-copy)!important;max-width:560px!important;margin-bottom:30px!important}
body.system-surface:not(#v2) .hero-ctas{gap:12px!important}
body.system-surface:not(#v2) .hero-ctas :is(.btn-primary,.btn-outline){min-height:48px!important;padding:0 22px!important;font-size:15px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}
body.system-surface:not(#v2) .hero-trust-line{
font-family:var(--font-body)!important;font-size:13.5px!important;font-weight:500!important;letter-spacing:0!important;color:var(--v2-muted)!important;
gap:10px 14px!important;margin-top:28px!important;border:0!important;padding:0!important;
}
body.system-surface:not(#v2) .hero-trust-line i{width:4px!important;height:4px!important;background:var(--v2-line-ctl)!important;box-shadow:none!important;display:block!important}
/* Hero status panel: one flat instrument, no halo */
body.system-surface:not(#v2) .ci-interface{
background:var(--v2-panel)!important;border:1px solid var(--v2-line-2)!important;border-radius:var(--v2-r-lg)!important;
box-shadow:var(--v2-pop)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
body.system-surface:not(#v2) .ci-status{border-color:var(--v2-line)!important}
body.system-surface:not(#v2) .ci-capsule{background:var(--v2-panel)!important;border-color:var(--v2-line-2)!important;box-shadow:none!important}
/* -- Proof strip under the hero ------------------------------------------- */
body.system-surface:not(#v2) .home-proof{padding:0 0 20px!important}
body.system-surface:not(#v2) .home-proof-inner{
background:transparent!important;border:0!important;border-top:1px solid var(--v2-line)!important;border-bottom:1px solid var(--v2-line)!important;
border-radius:0!important;box-shadow:none!important;padding:18px 0!important;
}
body.system-surface:not(#v2) .audience-links a{
background:transparent!important;border:1px solid var(--v2-line-2)!important;border-radius:999px!important;color:var(--v2-copy)!important;
box-shadow:none!important;transition:border-color .15s ease,color .15s ease!important;
}
body.system-surface:not(#v2) .audience-links a:hover{border-color:var(--v2-muted)!important;color:#fff!important;background:transparent!important;transform:none!important}
body.system-surface:not(#v2) .proof-items span{color:var(--v2-muted)!important;font-size:13.5px!important}
body.system-surface:not(#v2) .proof-items i{background:var(--v2-ok)!important;box-shadow:none!important}
/* -- Capability statement -------------------------------------------------- */
body.system-surface:not(#v2) .capability-statement{
background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important;
}
body.system-surface:not(#v2) .capability-statement h2{font-size:clamp(26px,2.7vw,36px)!important;font-weight:600!important;line-height:1.14!important;letter-spacing:-.025em!important;color:var(--v2-text)!important}
body.system-surface:not(#v2) .capability-audiences span{
background:transparent!important;border:0!important;border-top:1px solid var(--v2-line)!important;border-radius:0!important;
color:var(--v2-copy)!important;font-size:15px!important;padding:12px 0!important;box-shadow:none!important;
}
body.system-surface:not(#v2) .capability-audiences span::before{background:var(--v2-accent-text)!important;box-shadow:none!important}
/* -- Cards: one material everywhere ---------------------------------------- */
body.system-surface:not(#v2) :is(.glass-card,.service-card,.benefit-card,.info-card,.blog-card,.testimonial-card,.why-feature,.faq-item,.checker-box,.cta-banner-box,.form-wrap,.mini-stat,.result-card){
background:var(--v2-panel)!important;border:1px solid var(--v2-line)!important;border-radius:var(--v2-r-lg)!important;
box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;transform:none!important;
transition:border-color .15s ease,background-color .15s ease!important;
}
body.system-surface:not(#v2) :is(.glass-card,.service-card,.benefit-card,.info-card,.blog-card,.why-feature,.checker-box,.cta-banner-box)::before,
body.system-surface:not(#v2) :is(.glass-card,.service-card,.benefit-card,.info-card,.blog-card,.why-feature,.checker-box,.cta-banner-box)::after{content:none!important}
body.system-surface:not(#v2) :is(a.glass-card,a.service-card,a.info-card,a.blog-card):hover{border-color:var(--v2-line-2)!important;background:var(--v2-panel-2)!important;transform:none!important;box-shadow:none!important}
body.system-surface:not(#v2) .service-card{padding:26px!important}
body.system-surface:not(#v2) :is(.service-icon,.why-icon){
width:40px!important;height:40px!important;background:var(--v2-accent-soft)!important;border:0!important;border-radius:var(--v2-r)!important;
color:var(--v2-accent-text)!important;box-shadow:none!important;
}
body.system-surface:not(#v2) .service-name{font-size:18px!important;font-weight:600!important;letter-spacing:-.015em!important;color:var(--v2-text)!important}
body.system-surface:not(#v2) .service-desc{font-size:14.5px!important;line-height:1.6!important;color:var(--v2-copy)!important}
body.system-surface:not(#v2) :is(.service-link,.blog-read-link){
font-family:var(--font-body)!important;font-size:13.5px!important;font-weight:600!important;letter-spacing:0!important;text-transform:none!important;
color:var(--v2-accent-text)!important;gap:6px!important;
}
body.system-surface:not(#v2) .why-feat-title{font-size:15px!important;font-weight:600!important;color:var(--v2-text)!important}
body.system-surface:not(#v2) .why-feat-desc{font-size:13.5px!important;line-height:1.55!important;color:var(--v2-copy)!important}
/* -- Compliance checker call-out ------------------------------------------ */
body.system-surface:not(#v2) .checker{padding:20px 0 84px!important}
body.system-surface:not(#v2) .checker-box{padding:32px 36px!important}
body.system-surface:not(#v2) .checker-title{font-size:clamp(22px,2.2vw,28px)!important;font-weight:600!important;letter-spacing:-.02em!important;line-height:1.2!important}
body.system-surface:not(#v2) .checker-sub{color:var(--v2-copy)!important}
body.system-surface:not(#v2) .btn-check{min-height:48px!important;padding:0 22px!important;font-size:15px!important}
/* -- Process steps --------------------------------------------------------- */
body.system-surface:not(#v2) .timeline{
background:transparent!important;border:0!important;border-top:1px solid var(--v2-line-2)!important;border-radius:0!important;box-shadow:none!important;
gap:0!important;margin-top:44px!important;
}
body.system-surface:not(#v2) .timeline::before{content:none!important}
body.system-surface:not(#v2) .timeline-step{
background:transparent!important;border:0!important;border-right:1px solid var(--v2-line)!important;border-radius:0!important;
padding:26px 26px 6px 0!important;margin:0!important;text-align:left!important;display:block!important;
}
body.system-surface:not(#v2) .timeline-step + .timeline-step{padding-left:26px!important}
body.system-surface:not(#v2) .timeline-step:last-child{border-right:0!important;padding-right:0!important}
body.system-surface:not(#v2) .timeline-num{
width:auto!important;height:auto!important;margin:0 0 14px!important;display:block!important;
background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;
font-family:var(--font-mono)!important;font-size:12px!important;font-weight:500!important;letter-spacing:.14em!important;line-height:1!important;
color:var(--v2-accent-text)!important;-webkit-text-fill-color:currentColor!important;
}
body.system-surface:not(#v2) .timeline-num::before{content:"0"!important;position:static!important;background:none!important;width:auto!important;height:auto!important;display:inline!important}
body.system-surface:not(#v2) .timeline-step-title{font-size:19px!important;font-weight:600!important;letter-spacing:-.015em!important;margin-bottom:8px!important;color:var(--v2-text)!important}
body.system-surface:not(#v2) .timeline-step-desc{font-size:14.5px!important;line-height:1.6!important;color:var(--v2-copy)!important}
/* -- Trust section: the three statements sit under the panel, not on it ---- */
body.system-surface:not(#v2) .why-visual-main{border:1px solid var(--v2-line)!important;border-radius:var(--v2-r-lg)!important;box-shadow:none!important;background:var(--v2-panel)!important}
body.system-surface:not(#v2) .why-visual-placeholder{background:var(--v2-panel)!important}
body.system-surface:not(#v2) .why-stat-cards{position:static!important;inset:auto!important;margin:12px 0 0!important;gap:12px!important;transform:none!important}
body.system-surface:not(#v2) .mini-stat{padding:16px!important;text-align:left!important}
body.system-surface:not(#v2) .mini-stat-num{
font-size:17px!important;font-weight:600!important;letter-spacing:-.01em!important;
background:none!important;-webkit-text-fill-color:currentColor!important;color:var(--v2-text)!important;
}
body.system-surface:not(#v2) .mini-stat-label{font-family:var(--font-mono)!important;font-size:10.5px!important;letter-spacing:.1em!important;color:var(--v2-muted)!important;margin-top:6px!important}
/* -- Blog cards ------------------------------------------------------------ */
body.system-surface:not(#v2) .blog-thumb{aspect-ratio:16/7!important;height:auto!important;min-height:0!important;background:var(--v2-band)!important;border-bottom:1px solid var(--v2-line)!important}
body.system-surface:not(#v2) .blog-thumb::before, body.system-surface:not(#v2) .blog-thumb::after{content:none!important}
body.system-surface:not(#v2) .blog-thumb > svg{opacity:.5!important;color:var(--v2-muted)!important}
body.system-surface:not(#v2) .blog-cat{
background:var(--v2-bg)!important;border:1px solid var(--v2-line-2)!important;border-radius:4px!important;color:var(--v2-copy)!important;
font-family:var(--font-mono)!important;font-weight:500!important;box-shadow:none!important;
}
body.system-surface:not(#v2) .blog-title{font-size:18px!important;font-weight:600!important;line-height:1.3!important;letter-spacing:-.015em!important;color:var(--v2-text)!important}
body.system-surface:not(#v2) .blog-excerpt{color:var(--v2-copy)!important}
body.system-surface:not(#v2) .blog-meta{color:var(--v2-muted)!important}
/* -- FAQ: ruled rows -------------------------------------------------------- */
body.system-surface:not(#v2) .faq-grid{gap:0!important;border-top:1px solid var(--v2-line)!important}
body.system-surface:not(#v2) .faq-item{background:transparent!important;border:0!important;border-bottom:1px solid var(--v2-line)!important;border-radius:0!important}
body.system-surface:not(#v2) .faq-question{padding:20px 4px!important;min-height:64px!important;font-size:16.5px!important;font-weight:600!important;color:var(--v2-text)!important;background:transparent!important}
body.system-surface:not(#v2) .faq-question:hover{color:var(--v2-accent-text)!important}
body.system-surface:not(#v2) .faq-icon{background:transparent!important;border:0!important;color:var(--v2-muted)!important;font-size:22px!important;font-weight:400!important;box-shadow:none!important}
body.system-surface:not(#v2) .faq-item.open .faq-icon{background:transparent!important;color:var(--v2-text)!important}
body.system-surface:not(#v2) .faq-item.open .faq-answer{max-height:1400px!important}
body.system-surface:not(#v2) .faq-answer-inner{padding:0 44px 22px 4px!important;font-size:15.5px!important;line-height:1.7!important;color:var(--v2-copy)!important}
/* -- Closing call to action ----------------------------------------------- */
body.system-surface:not(#v2) .cta-banner{background:transparent!important;padding:20px 0 96px!important}
body.system-surface:not(#v2) .cta-banner::before, body.system-surface:not(#v2) .cta-banner::after{content:none!important}
body.system-surface:not(#v2) .cta-banner-box{background:var(--v2-panel)!important;padding:64px 32px!important;text-align:center!important}
body.system-surface:not(#v2) .cta-banner-box h2{font-size:clamp(30px,3.6vw,46px)!important;font-weight:600!important;line-height:1.08!important;letter-spacing:-.03em!important}
body.system-surface:not(#v2) .cta-banner-box p{color:var(--v2-copy)!important}
/* -- Inner page heroes ------------------------------------------------------ */
body.system-surface:not(#v2) .page-hero{background:var(--v2-bg)!important;border-bottom:1px solid var(--v2-line)!important}
body.system-surface:not(#v2) .page-hero::before, body.system-surface:not(#v2) .page-hero::after{box-shadow:none!important}
body.system-surface:not(#v2) .page-hero h1{font-weight:600!important;letter-spacing:-.03em!important;line-height:1.06!important;color:var(--v2-text)!important}
body.system-surface:not(#v2) .page-hero p{color:var(--v2-copy)!important}
body.system-surface:not(#v2) .breadcrumb{color:var(--v2-muted)!important}
body.system-surface:not(#v2) .breadcrumb a{color:var(--v2-accent-text)!important}
/* Pages built on .hero-compact (pricing, packages, launch bundles, solutions)
had no rule for it: the title sat underneath the fixed header and the
sections ran together. */
body.system-surface:not(#v2) .hero-compact{padding:136px 0 44px!important;border-bottom:1px solid var(--v2-line)!important;background:var(--v2-bg)!important}
body.system-surface:not(#v2) .hero-compact h1{
font-size:clamp(34px,4.2vw,54px)!important;font-weight:600!important;line-height:1.06!important;letter-spacing:-.03em!important;
color:var(--v2-text)!important;margin:0 0 16px!important;max-width:20em;
}
body.system-surface:not(#v2) .hero-compact p{font-size:clamp(16px,1.35vw,18px)!important;line-height:1.65!important;color:var(--v2-copy)!important;max-width:720px;margin:0!important}
body.system-surface:not(#v2) .hero-compact p a, body.system-surface:not(#v2) .hero-compact ~ section p a:not([class]){color:var(--v2-accent-text)!important;text-decoration:underline;text-underline-offset:3px}
body.system-surface:not(#v2) .hero-compact .hero-ctas, body.system-surface:not(#v2) .hero-compact .cta-actions{margin-top:26px!important}
body.system-surface:not(#v2) .hero-compact ~ section:not([class]){padding:56px 0!important}
body.system-surface:not(#v2) .hero-compact ~ section:not([class])[style*="background"]{background:var(--v2-band)!important;border-top:1px solid var(--v2-line)!important;border-bottom:1px solid var(--v2-line)!important}
body.system-surface:not(#v2) .hero-compact ~ section h2{font-size:clamp(24px,2.6vw,34px)!important;font-weight:600!important;letter-spacing:-.025em!important;line-height:1.15!important}
/* -- Footer ----------------------------------------------------------------- */
body.system-surface:not(#v2) .footer{background:var(--v2-inset)!important;border-top:1px solid var(--v2-line)!important}
body.system-surface:not(#v2) .footer::before{content:none!important}
body.system-surface:not(#v2) .footer-col h4{font-family:var(--font-mono)!important;color:var(--v2-muted)!important;font-weight:500!important;letter-spacing:.14em!important}
body.system-surface:not(#v2) .footer-link{color:var(--v2-copy)!important}
body.system-surface:not(#v2) .footer-link:hover{color:#fff!important}
body.system-surface:not(#v2) .social-link{background:transparent!important;border:1px solid var(--v2-line-2)!important;border-radius:var(--v2-r)!important;box-shadow:none!important}
body.system-surface:not(#v2) .footer-bottom{border-top-color:var(--v2-line)!important}
/* -- Cookie banner ---------------------------------------------------------- */
/* An older layer set this to position:relative, which dropped the banner into
the page flow under the footer (and pushed the page 12px wide on phones). */
body.system-surface:not(#v2) .cookie-banner{
position:fixed!important;z-index:9998!important;left:16px!important;right:auto!important;bottom:16px!important;
width:min(540px,calc(100vw - 32px))!important;max-width:none!important;box-sizing:border-box!important;
background:var(--v2-panel-2)!important;border:1px solid var(--v2-line-2)!important;border-radius:var(--v2-r-lg)!important;
box-shadow:var(--v2-pop)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
body.system-surface:not(#v2) .cookie-banner.hidden{transform:translateY(140%)!important;opacity:0!important;pointer-events:none!important}
body.system-surface:not(#v2) .cookie-text{color:var(--v2-copy)!important}
body.system-surface:not(#v2) .cookie-text a{color:var(--v2-accent-text)!important;text-decoration:underline;text-underline-offset:3px}
/* -- Decorative layers ------------------------------------------------------ */
body.system-surface:not(#v2) #netCanvas{opacity:.35!important}
/* -- Icons ------------------------------------------------------------------ */
body.system-surface:not(#v2) .ui-ic{display:block;flex:0 0 auto}
body.system-surface:not(#v2) .nav-phone-icon{display:inline-flex!important;align-items:center!important;justify-content:center!important}
body.system-surface:not(#v2) .footer-contact-item{display:flex;align-items:center;gap:10px}
body.system-surface:not(#v2) .footer-contact-item .ui-ic{color:var(--v2-muted)}
body.system-surface:not(#v2) .social-link .ui-ic{color:currentColor}
body.system-surface:not(#v2) .contact-ic{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex:0 0 36px;border-radius:var(--v2-r);background:var(--v2-accent-soft);color:var(--v2-accent-text)}
/* ==========================================================================
2b. PAGE TEMPLATES — services, bundles, solutions, pricing, legal, sign-in
========================================================================== */
/* Shared hero for inner templates */
body.system-surface:not(#v2) :is(.svc-hero,.offer-hero,.sol-hero,.pricing-hero,.legal-hero){
padding:132px 0 56px!important;text-align:left!important;background:var(--v2-bg)!important;border-bottom:1px solid var(--v2-line)!important;
}
body.system-surface:not(#v2) :is(.svc-hero,.offer-hero,.sol-hero,.pricing-hero,.legal-hero) .breadcrumb{justify-content:flex-start!important;margin:0 0 22px!important}
body.system-surface:not(#v2) :is(.svc-hero,.offer-hero,.sol-hero,.pricing-hero,.legal-hero) h1{
font-size:clamp(34px,4.2vw,54px)!important;font-weight:600!important;line-height:1.06!important;letter-spacing:-.032em!important;
margin:0 0 18px!important;max-width:18em;text-align:left!important;
}
body.system-surface:not(#v2) :is(.svc-hero,.offer-hero,.sol-hero,.pricing-hero,.legal-hero) h1.is-long{font-size:clamp(30px,3.6vw,46px)!important}
body.system-surface:not(#v2) :is(.svc-hero,.offer-hero,.sol-hero,.pricing-hero,.legal-hero) h1.is-extra-long{font-size:clamp(28px,3.2vw,40px)!important}
body.system-surface:not(#v2) :is(.svc-lede,.offer-lede),body.system-surface:not(#v2) .legal-hero p{
font-size:clamp(16px,1.35vw,18px)!important;line-height:1.65!important;color:var(--v2-copy)!important;max-width:640px!important;margin:0 0 28px!important;text-align:left!important;
}
body.system-surface:not(#v2) .legal-hero p{margin-bottom:0!important;color:var(--v2-muted)!important;font-size:14px!important}
body.system-surface:not(#v2) :is(.svc-hero,.offer-hero,.sol-hero,.pricing-hero) .hero-ctas{justify-content:flex-start!important;margin-bottom:0!important}
/* -- Service pages ---------------------------------------------------------- */
body.system-surface:not(#v2) .svc-hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:56px;align-items:start}
body.system-surface:not(#v2) .svc-hero-grid.is-single{grid-template-columns:minmax(0,1fr)}
body.system-surface:not(#v2) .svc-aside{background:var(--v2-panel);border:1px solid var(--v2-line);border-radius:var(--v2-r-lg);padding:20px;margin-top:6px}
body.system-surface:not(#v2) .svc-aside-label, body.system-surface:not(#v2) .offer-summary-label, body.system-surface:not(#v2) .legal-toc-label, body.system-surface:not(#v2) .price-group-title, body.system-surface:not(#v2) .sol-note-label{
font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--v2-muted);
}
body.system-surface:not(#v2) .svc-aside-label{margin-bottom:10px}
body.system-surface:not(#v2) .svc-aside-list{display:flex;flex-direction:column}
body.system-surface:not(#v2) .svc-aside-list a{
display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:10px 4px;
border-top:1px solid var(--v2-line);color:var(--v2-copy);font-size:14.5px;font-weight:500;text-decoration:none;transition:color .15s ease;
}
body.system-surface:not(#v2) .svc-aside-list a:first-child{border-top:0}
body.system-surface:not(#v2) .svc-aside-list a span:last-child{color:var(--v2-muted);transition:transform .15s ease}
body.system-surface:not(#v2) .svc-aside-list a:hover{color:#fff}
body.system-surface:not(#v2) .svc-aside-list a.is-active{color:#fff;font-weight:600}
body.system-surface:not(#v2) .svc-aside-list a.is-active span:last-child{color:var(--v2-accent-text)}
body.system-surface:not(#v2) .positioning-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important}
body.system-surface:not(#v2) .positioning-card{background:var(--v2-panel)!important;border:1px solid var(--v2-line)!important;border-radius:var(--v2-r-lg)!important;padding:24px!important;box-shadow:none!important}
body.system-surface:not(#v2) .positioning-card span{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--v2-accent-text)!important;margin-bottom:14px}
body.system-surface:not(#v2) .positioning-card h3{font-size:18px!important;font-weight:600!important;letter-spacing:-.015em!important;margin:0 0 8px!important;color:var(--v2-text)!important}
body.system-surface:not(#v2) .positioning-card p{font-size:14.5px!important;line-height:1.6!important;color:var(--v2-copy)!important;margin:0!important}
body.system-surface:not(#v2) .svc-nudge-wrap{padding:0 0 24px!important}
body.system-surface:not(#v2) .svc-nudge{
display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 24px;
background:var(--v2-band);border:1px solid var(--v2-line);border-radius:var(--v2-r-lg);color:var(--v2-copy);font-size:15px;line-height:1.55;
}
body.system-surface:not(#v2) .svc-nudge strong{color:var(--v2-text)}
body.system-surface:not(#v2) .svc-nudge .btn-outline{flex:0 0 auto}
/* -- Bundled engagements ------------------------------------------------------ */
body.system-surface:not(#v2) .offer-hero-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr);gap:56px;align-items:start}
body.system-surface:not(#v2) .offer-summary{
background:var(--v2-panel);border:1px solid var(--v2-line-2);border-radius:var(--v2-r-lg);padding:24px;box-shadow:var(--v2-pop);
}
body.system-surface:not(#v2) .offer-price{
font-family:var(--font-display);font-size:44px;font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--v2-text);
margin:10px 0 18px;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:8px;
}
body.system-surface:not(#v2) .offer-price small{font-family:var(--font-body);font-size:14px;font-weight:500;letter-spacing:0;color:var(--v2-muted)}
body.system-surface:not(#v2) .offer-facts{list-style:none;margin:0 0 20px;padding:16px 0 0;border-top:1px solid var(--v2-line);display:flex;flex-direction:column;gap:10px}
body.system-surface:not(#v2) .offer-facts li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.5;color:var(--v2-copy)}
body.system-surface:not(#v2) .offer-facts .ui-ic{color:var(--v2-accent-text);margin-top:2px}
body.system-surface:not(#v2) .offer-summary-cta{width:100%!important;justify-content:center!important;min-height:46px!important;display:flex!important;align-items:center!important}
body.system-surface:not(#v2) .offer-list{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
body.system-surface:not(#v2) .offer-list li{
display:flex;gap:12px;align-items:flex-start;padding:16px 16px;background:var(--v2-panel);border:1px solid var(--v2-line);
border-radius:var(--v2-r);font-size:15px;font-weight:500;line-height:1.45;color:var(--v2-text);
}
body.system-surface:not(#v2) .offer-list-mark{
flex:0 0 22px;width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
background:var(--v2-ok-soft);color:var(--v2-ok);margin-top:-1px;
}
body.system-surface:not(#v2) .offer-list.is-dot .offer-list-mark{background:var(--v2-accent-soft);position:relative}
body.system-surface:not(#v2) .offer-list.is-dot .offer-list-mark::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--v2-accent-text)}
body.system-surface:not(#v2) .offer-related{background:var(--v2-band)!important;border-top:1px solid var(--v2-line)!important;border-bottom:1px solid var(--v2-line)!important}
body.system-surface:not(#v2) .offer-related-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px}
body.system-surface:not(#v2) .offer-related-head .section-title{margin-bottom:0!important}
body.system-surface:not(#v2) .offer-related-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
body.system-surface:not(#v2) .offer-related-grid.is-five{grid-template-columns:repeat(5,minmax(0,1fr));margin-top:28px}
body.system-surface:not(#v2) .offer-card{
display:flex;flex-direction:column;gap:6px;padding:20px;background:var(--v2-panel);border:1px solid var(--v2-line);
border-radius:var(--v2-r-lg);text-decoration:none;color:inherit;transition:border-color .15s ease,background-color .15s ease;
}
body.system-surface:not(#v2) .offer-card:hover{border-color:var(--v2-line-2);background:var(--v2-panel-2)}
body.system-surface:not(#v2) .offer-card-name{font-family:var(--font-display);font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--v2-text)}
body.system-surface:not(#v2) .offer-card-price{font-family:var(--font-display);font-size:20px;font-weight:600;color:var(--v2-accent-text);font-variant-numeric:tabular-nums}
body.system-surface:not(#v2) .offer-card-desc{font-size:13.5px;line-height:1.55;color:var(--v2-copy);flex:1;margin-top:4px}
body.system-surface:not(#v2) .offer-card-link{font-size:13.5px;font-weight:600;color:var(--v2-accent-text);margin-top:10px}
/* -- Solutions ------------------------------------------------------------------ */
body.system-surface:not(#v2) .sol-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
body.system-surface:not(#v2) .sol-card{background:var(--v2-panel);border:1px solid var(--v2-line);border-radius:var(--v2-r-lg);padding:26px}
body.system-surface:not(#v2) .sol-card h2{font-size:20px!important;font-weight:600!important;letter-spacing:-.015em!important;margin:14px 0 14px!important;color:var(--v2-text)!important}
body.system-surface:not(#v2) .sol-card-icon{width:40px;height:40px;border-radius:var(--v2-r);display:flex;align-items:center;justify-content:center;background:var(--v2-warn-soft);color:var(--v2-warn)}
body.system-surface:not(#v2) .sol-card-icon.is-ok{background:var(--v2-ok-soft);color:var(--v2-ok)}
body.system-surface:not(#v2) .sol-list{list-style:none;margin:0;padding:0}
body.system-surface:not(#v2) .sol-list li{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--v2-line);font-size:15px;line-height:1.5;color:var(--v2-copy)}
body.system-surface:not(#v2) .sol-list:not(.is-check) li::before{content:"";flex:0 0 6px;width:6px;height:6px;border-radius:50%;background:var(--v2-warn);margin-top:8px}
body.system-surface:not(#v2) .sol-list.is-check li{color:var(--v2-text);font-weight:500}
body.system-surface:not(#v2) .sol-notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}
body.system-surface:not(#v2) .sol-note{padding:20px 24px;background:var(--v2-band);border:1px solid var(--v2-line);border-radius:var(--v2-r-lg)}
body.system-surface:not(#v2) .sol-note p{margin:8px 0 0;font-size:14.5px;line-height:1.6;color:var(--v2-copy)}
body.system-surface:not(#v2) .sol-disclaimer{margin:18px 0 0;font-size:12.5px;color:var(--v2-muted)}
body.system-surface:not(#v2) .sol-others{padding-top:0!important}
body.system-surface:not(#v2) .sol-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
body.system-surface:not(#v2) .sol-chip{
display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid var(--v2-line-2);border-radius:999px;
color:var(--v2-copy);font-size:14.5px;font-weight:500;text-decoration:none;transition:border-color .15s ease,color .15s ease;
}
body.system-surface:not(#v2) .sol-chip:hover{border-color:var(--v2-muted);color:#fff}
/* -- Pricing --------------------------------------------------------------------- */
body.system-surface:not(#v2) .price-sheet{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:28px;align-items:start}
body.system-surface:not(#v2) .price-group{background:var(--v2-panel);border:1px solid var(--v2-line);border-radius:var(--v2-r-lg);padding:6px 22px 8px}
body.system-surface:not(#v2) .price-group-title{margin:16px 0 4px!important;font-size:11px!important;color:var(--v2-accent-text)!important;font-weight:500!important;letter-spacing:.12em!important}
body.system-surface:not(#v2) .price-row{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:14px 0;border-top:1px solid var(--v2-line)}
body.system-surface:not(#v2) .price-group-title + .price-row{border-top:0}
body.system-surface:not(#v2) .price-row-main{min-width:0}
body.system-surface:not(#v2) .price-row-name{font-size:15px;font-weight:600;color:var(--v2-text);line-height:1.35}
body.system-surface:not(#v2) .price-row-desc{font-size:13.5px;line-height:1.5;color:var(--v2-muted);margin-top:3px}
body.system-surface:not(#v2) .price-row-price{
flex:0 0 auto;max-width:44%;text-align:right;font-family:var(--font-display);font-size:15.5px;font-weight:600;
color:var(--v2-text);font-variant-numeric:tabular-nums;line-height:1.35;
}
body.system-surface:not(#v2) .price-bundles{background:var(--v2-band)!important;border-top:1px solid var(--v2-line)!important;border-bottom:1px solid var(--v2-line)!important}
body.system-surface:not(#v2) .price-disclaimer{margin:28px auto 0!important;max-width:720px!important;font-size:12.5px!important;line-height:1.65!important;color:var(--v2-muted)!important}
/* -- Legal ----------------------------------------------------------------------- */
body.system-surface:not(#v2) .legal-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:56px;align-items:start}
body.system-surface:not(#v2) .legal-toc{position:sticky;top:96px;display:flex;flex-direction:column;gap:2px;max-height:calc(100vh - 120px);overflow:auto;padding-right:6px}
body.system-surface:not(#v2) .legal-toc-label{margin-bottom:10px}
body.system-surface:not(#v2) .legal-toc a{display:block;padding:7px 10px;border-radius:var(--v2-r-sm);color:var(--v2-muted);font-size:13.5px;line-height:1.4;text-decoration:none}
body.system-surface:not(#v2) .legal-toc a:hover{color:#fff;background:rgba(255,255,255,.04)}
body.system-surface:not(#v2) .legal-prose{max-width:720px!important;margin:0!important}
body.system-surface:not(#v2) .legal-prose h2{font-size:21px!important;font-weight:600!important;letter-spacing:-.015em!important;margin:36px 0 10px!important;scroll-margin-top:96px;color:var(--v2-text)!important}
body.system-surface:not(#v2) .legal-prose h2:first-child{margin-top:0!important}
body.system-surface:not(#v2) .legal-prose p{font-size:16px!important;line-height:1.75!important;color:var(--v2-copy)!important}
/* -- Sign in, register, reset ------------------------------------------------------- */
body.system-surface:not(#v2) .login-shell{padding:132px 16px 72px!important}
body.system-surface:not(#v2) .login-title{font-size:clamp(30px,3.4vw,40px)!important;font-weight:600!important;letter-spacing:-.03em!important}
body.system-surface:not(#v2) .login-lead{color:var(--v2-copy)!important}
body.system-surface:not(#v2) .login-card{max-width:440px!important;padding:28px!important;background:var(--v2-panel)!important;border:1px solid var(--v2-line)!important;box-shadow:var(--v2-pop)!important}
body.system-surface:not(#v2) .login-trust{background:transparent!important;border:0!important;border-top:1px solid var(--v2-line)!important;border-radius:0!important;padding:16px 0 0!important;margin-top:18px!important;color:var(--v2-muted)!important;text-align:left!important}
body.system-surface:not(#v2) .password-toggle{color:var(--v2-muted)!important;background:transparent!important;border:0!important;font-weight:600!important;font-size:12.5px!important}
/* -- Responsive for the templates ------------------------------------------------- */
@media (max-width:1100px){
body.system-surface:not(#v2) .offer-related-grid.is-five{grid-template-columns:repeat(3,minmax(0,1fr))}
body.system-surface:not(#v2) .offer-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1024px){
body.system-surface:not(#v2) :is(.svc-hero,.offer-hero,.sol-hero,.pricing-hero,.legal-hero){padding:116px 0 44px!important}
body.system-surface:not(#v2) :is(.svc-hero-grid,.offer-hero-grid){grid-template-columns:minmax(0,1fr);gap:32px}
body.system-surface:not(#v2) :is(.svc-aside,.offer-summary){max-width:560px}
body.system-surface:not(#v2) .offer-related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
body.system-surface:not(#v2) .price-sheet{grid-template-columns:minmax(0,1fr)}
body.system-surface:not(#v2) .legal-layout{grid-template-columns:minmax(0,1fr);gap:24px}
body.system-surface:not(#v2) .legal-toc{position:static;max-height:none;flex-direction:row;flex-wrap:wrap;gap:6px;padding:0}
body.system-surface:not(#v2) .legal-toc-label{width:100%}
body.system-surface:not(#v2) .legal-toc a{border:1px solid var(--v2-line);border-radius:999px;padding:6px 12px;font-size:12.5px}
}
@media (max-width:768px){
body.system-surface:not(#v2) .positioning-grid{grid-template-columns:minmax(0,1fr)!important}
body.system-surface:not(#v2) :is(.sol-grid,.sol-notes){grid-template-columns:minmax(0,1fr)}
body.system-surface:not(#v2) .svc-nudge{flex-direction:column;align-items:flex-start}
body.system-surface:not(#v2) .offer-related-head{flex-direction:column;align-items:flex-start}
}
@media (max-width:600px){
body.system-surface:not(#v2) :is(.svc-hero,.offer-hero,.sol-hero,.pricing-hero,.legal-hero){padding:100px 0 36px!important}
body.system-surface:not(#v2) .offer-list{grid-template-columns:minmax(0,1fr)}
body.system-surface:not(#v2) :is(.offer-related-grid,.offer-related-grid.is-five){grid-template-columns:minmax(0,1fr)}
body.system-surface:not(#v2) .price-group{padding:4px 16px 6px}
body.system-surface:not(#v2) .price-row{flex-direction:column;gap:4px}
body.system-surface:not(#v2) .price-row-price{max-width:none;text-align:left;color:var(--v2-accent-text)}
body.system-surface:not(#v2) .offer-price{font-size:38px}
body.system-surface:not(#v2) .login-card{padding:22px 18px!important}
body.system-surface:not(#v2) .legal-toc{display:none}
}
/* -- Insights article ------------------------------------------------------------ */
body.system-surface:not(#v2) .post-col{max-width:780px!important}
body.system-surface:not(#v2) .post-hero{padding:132px 0 40px!important;text-align:left!important;border-bottom:1px solid var(--v2-line)!important}
body.system-surface:not(#v2) .post-hero .breadcrumb{justify-content:flex-start!important;margin-bottom:20px!important}
body.system-surface:not(#v2) .post-hero h1{font-size:clamp(32px,4vw,48px)!important;font-weight:600!important;line-height:1.08!important;letter-spacing:-.03em!important;margin:0 0 18px!important;text-align:left!important}
body.system-surface:not(#v2) .post-meta{display:flex;flex-wrap:wrap;gap:6px 10px;font-size:14px;color:var(--v2-muted)}
body.system-surface:not(#v2) .post-figure{margin-top:32px!important}
body.system-surface:not(#v2) .post-figure img{width:100%;max-height:440px;object-fit:cover;border-radius:var(--v2-r-lg);border:1px solid var(--v2-line)}
body.system-surface:not(#v2) .post-body{padding-top:40px!important}
body.system-surface:not(#v2) .post-prose{max-width:none!important;margin:0!important}
body.system-surface:not(#v2) .post-prose :is(p,li){font-size:17px!important;line-height:1.75!important;color:var(--v2-copy)!important}
body.system-surface:not(#v2) .post-prose h2{font-size:26px!important;margin:40px 0 12px!important}
body.system-surface:not(#v2) .post-prose h3{font-size:20px!important;margin:30px 0 10px!important}
body.system-surface:not(#v2) .post-prose a{color:var(--v2-accent-text)!important;text-decoration:underline;text-underline-offset:3px}
body.system-surface:not(#v2) .post-prose :is(blockquote){margin:24px 0;padding:4px 0 4px 18px;border-left:2px solid var(--v2-line-2);color:var(--v2-text)}
body.system-surface:not(#v2) .post-prose table{width:100%;border-collapse:collapse;margin:20px 0;font-size:15px}
body.system-surface:not(#v2) .post-prose :is(th,td){padding:10px 12px;border-bottom:1px solid var(--v2-line);text-align:left}
body.system-surface:not(#v2) .post-cta{
display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:48px;padding:24px 26px;
background:var(--v2-panel);border:1px solid var(--v2-line);border-radius:var(--v2-r-lg);
}
body.system-surface:not(#v2) .post-cta-title{font-family:var(--font-display);font-size:20px;font-weight:600;letter-spacing:-.015em;color:var(--v2-text)}
body.system-surface:not(#v2) .post-cta p{margin:6px 0 0;color:var(--v2-copy);font-size:15px}
body.system-surface:not(#v2) .post-cta-actions{display:flex;gap:10px;flex-wrap:wrap;flex:0 0 auto}
@media (max-width:768px){
body.system-surface:not(#v2) .post-hero{padding:104px 0 32px!important}
body.system-surface:not(#v2) .post-cta{flex-direction:column;align-items:stretch}
body.system-surface:not(#v2) .post-cta-actions :is(.btn-primary,.btn-outline){flex:1 1 auto;justify-content:center}
body.system-surface:not(#v2) .post-prose :is(p,li){font-size:16px!important}
}
/* ==========================================================================
3. CLIENT PORTAL + ADMIN WORKSPACE
========================================================================== */
/* -- Shell ------------------------------------------------------------------ */
body.system-surface:not(#v2).admin-surface, body.system-surface:not(#v2).portal-surface{background:var(--v2-bg)!important}
body.system-surface:not(#v2) .dash-body{background:var(--v2-bg)!important;color:var(--v2-text)}
body.system-surface:not(#v2) .dash-sidebar{background:var(--v2-band)!important;border-right:1px solid var(--v2-line)!important;box-shadow:none}
body.system-surface:not(#v2) .dash-sidebar-logo{border-bottom:1px solid var(--v2-line)!important}
body.system-surface:not(#v2) .dash-sidebar-logo img{filter:none!important}
body.system-surface:not(#v2) .dash-topbar{
background:var(--v2-bg)!important;border-bottom:1px solid var(--v2-line)!important;box-shadow:none!important;
-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
body.system-surface:not(#v2) .dash-content{background:var(--v2-bg)!important;padding-bottom:96px}
body.system-surface:not(#v2) .dash-topbar-title{font-size:19px!important;font-weight:600!important;letter-spacing:-.015em!important;color:var(--v2-text)!important}
body.system-surface:not(#v2) .dash-overlay{background:rgba(0,0,0,.62)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
/* Sidebar navigation */
body.system-surface:not(#v2) .dash-nav-label{font-family:var(--font-mono)!important;font-size:10.5px!important;font-weight:500!important;letter-spacing:.14em!important;color:var(--v2-muted)!important}
body.system-surface:not(#v2) .dash-nav a, body.system-surface:not(#v2) .dash-nav-group-toggle, body.system-surface:not(#v2) .dash-nav .dash-nav-link{
border-radius:var(--v2-r)!important;border-color:transparent!important;background:transparent!important;box-shadow:none!important;
color:var(--v2-copy)!important;font-family:var(--font-body)!important;font-weight:500!important;
transition:background-color .15s ease,color .15s ease!important;
}
body.system-surface:not(#v2) .dash-nav a:hover, body.system-surface:not(#v2) .dash-nav-group-toggle:hover{background:rgba(255,255,255,.05)!important;color:#fff!important}
body.system-surface:not(#v2) .dash-nav a.active{background:var(--v2-accent-soft)!important;border-color:transparent!important;color:#fff!important;font-weight:600!important;box-shadow:none!important}
body.system-surface:not(#v2) .dash-nav a.active::before, body.system-surface:not(#v2) .dash-nav a.active::after{content:none!important}
body.system-surface:not(#v2) .dash-nav a .ic{color:var(--v2-muted)!important;font-family:var(--font-mono)!important}
body.system-surface:not(#v2) .dash-nav a.active .ic{color:var(--v2-accent-text)!important}
body.system-surface:not(#v2) .dash-tools{border-top:1px solid var(--v2-line)!important;background:transparent!important}
body.system-surface:not(#v2) .dash-tools summary{color:var(--v2-copy)!important;border-radius:var(--v2-r)!important}
body.system-surface:not(#v2) .dash-sidebar-account{background:transparent!important;border:1px solid var(--v2-line)!important;border-radius:var(--v2-r-lg)!important;box-shadow:none!important}
body.system-surface:not(#v2) .dash-sidebar-account span{color:var(--v2-muted)!important}
body.system-surface:not(#v2) .dash-sidebar-actions a{
background:transparent!important;border:1px solid var(--v2-line-2)!important;border-radius:var(--v2-r)!important;color:var(--v2-copy)!important;
text-align:center;display:flex;align-items:center;justify-content:center;min-height:36px;
}
body.system-surface:not(#v2) .dash-sidebar-actions a:hover{border-color:var(--v2-muted)!important;color:#fff!important}
body.system-surface:not(#v2) .admin-nav-search{background:var(--v2-inset)!important;border:1px solid var(--v2-line-2)!important;border-radius:var(--v2-r)!important;box-shadow:none!important}
body.system-surface:not(#v2) .admin-nav-search input{border-color:transparent!important;background-color:transparent!important;box-shadow:none!important}
/* Top bar */
body.system-surface:not(#v2) .dash-avatar{background:var(--v2-panel-2)!important;border:1px solid var(--v2-line-2)!important;color:var(--v2-text)!important;box-shadow:none!important;font-weight:600!important}
body.system-surface:not(#v2) .dash-username{color:var(--v2-copy)!important}
body.system-surface:not(#v2) .dash-bell{
color:var(--v2-copy)!important;background:transparent!important;border:1px solid var(--v2-line)!important;border-radius:var(--v2-r)!important;
width:38px;height:38px;display:inline-flex!important;align-items:center!important;justify-content:center!important;box-shadow:none!important;
}
body.system-surface:not(#v2) .dash-bell:hover{border-color:var(--v2-line-2)!important;color:#fff!important}
body.system-surface:not(#v2) .dash-bell svg{width:18px;height:18px;display:block}
body.system-surface:not(#v2) .dash-hamburger{color:var(--v2-text)!important;border-radius:var(--v2-r)!important;min-width:44px;min-height:44px;align-items:center;justify-content:center}
/* -- Surfaces ---------------------------------------------------------------- */
body.system-surface:not(#v2) .dash-body :is(.panel,.pc-panel,.dash-card,.card,.kpi,.manage-work-card,.notif-item):not([style*="background"]){
background:var(--v2-panel)!important;
}
body.system-surface:not(#v2) .dash-body :is(.panel,.pc-panel,.dash-card,.card,.kpi,.manage-work-card,.notif-item){
border:1px solid var(--v2-line)!important;border-radius:var(--v2-r-lg)!important;box-shadow:none!important;
-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
body.system-surface:not(#v2) .dash-body :is(.panel,.pc-panel,.kpi)::before, body.system-surface:not(#v2) .dash-body :is(.panel,.pc-panel,.kpi)::after{box-shadow:none!important}
body.system-surface:not(#v2) .dash-body :is(.kpi,.pc-kpi,.manage-work-card):hover{transform:none!important;box-shadow:none!important;border-color:var(--v2-line-2)!important}
body.system-surface:not(#v2) .dash-body a.manage-work-card:hover{background:var(--v2-panel-2)!important}
body.system-surface:not(#v2) .panel-head h2, body.system-surface:not(#v2) .panel-head h3, body.system-surface:not(#v2) .pc-head h2, body.system-surface:not(#v2) .pc-head h3{
font-size:15.5px!important;font-weight:600!important;letter-spacing:-.01em!important;color:var(--v2-text)!important;
}
/* KPIs: plain figures, tabular */
body.system-surface:not(#v2) .kpi .label, body.system-surface:not(#v2) .pc-kpi span{
font-family:var(--font-mono)!important;font-size:10.5px!important;font-weight:500!important;letter-spacing:.1em!important;text-transform:uppercase!important;color:var(--v2-muted)!important;
}
body.system-surface:not(#v2) .kpi .num, body.system-surface:not(#v2) .pc-kpi b, body.system-surface:not(#v2) .kpi-value{
font-family:var(--font-display)!important;font-size:28px!important;font-weight:600!important;letter-spacing:-.02em!important;line-height:1.1!important;
font-variant-numeric:tabular-nums;
background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;
}
body.system-surface:not(#v2) .kpi .num:not([style*="color"]), body.system-surface:not(#v2) .pc-kpi b:not([style*="color"]){-webkit-text-fill-color:currentColor!important;color:var(--v2-text)!important}
body.system-surface:not(#v2) .kpi .sub{color:var(--v2-muted)!important}
/* Tables */
body.system-surface:not(#v2) .table-wrap{background:transparent!important;border:1px solid var(--v2-line)!important;border-radius:var(--v2-r)!important}
body.system-surface:not(#v2) .dash-body table th{
background:var(--v2-panel-2)!important;color:var(--v2-muted)!important;border-color:var(--v2-line)!important;
font-family:var(--font-mono)!important;font-size:10.5px!important;font-weight:500!important;letter-spacing:.08em!important;
}
body.system-surface:not(#v2) .dash-body table td{border-color:var(--v2-line)!important;font-variant-numeric:tabular-nums}
body.system-surface:not(#v2) .dash-body table tbody tr:hover{background:rgba(255,255,255,.03)!important}
body.system-surface:not(#v2) .dash-body table.data a{color:var(--v2-accent-text)!important}
body.system-surface:not(#v2) .stat-row{border-color:var(--v2-line)!important}
/* Tabs, status, empty states */
body.system-surface:not(#v2) :is(.tab-btn,.rh-tab,.smx-tab,.cp-tab,.shield-tab,.leads-tab,.pip-tab,.rd-tab,.cs-tab,.siat-tab,.svc-tab,[role="tab"]){border-radius:var(--v2-r)!important;box-shadow:none!important}
body.system-surface:not(#v2) :is(.tab-btn,.rh-tab,.smx-tab,.cp-tab,.shield-tab,.leads-tab,.pip-tab,.rd-tab,.cs-tab,.siat-tab,.svc-tab,[role="tab"]).active,
body.system-surface:not(#v2) [role="tab"][aria-selected="true"]{
background:var(--v2-panel-2)!important;border-color:var(--v2-line-2)!important;color:#fff!important;box-shadow:none!important;
}
body.system-surface:not(#v2) .status-dot{box-shadow:none!important}
body.system-surface:not(#v2) .dash-body .empty{color:var(--v2-muted)!important}
body.system-surface:not(#v2) .notif-item.unread{background:var(--v2-accent-soft)!important;border-color:transparent!important}
body.system-surface:not(#v2) .chat-msg.them{background:var(--v2-panel)!important;border:1px solid var(--v2-line)!important}
body.system-surface:not(#v2) .chat-msg.me{background:var(--v2-accent-soft)!important;border:1px solid transparent!important}
body.system-surface:not(#v2) .timeline-v::before{background:var(--v2-line-2)!important}
body.system-surface:not(#v2) :is(.modal-content,.modal-card,.siaw-modal,.dialog-card){
background:var(--v2-panel)!important;border:1px solid var(--v2-line-2)!important;border-radius:var(--v2-r-lg)!important;box-shadow:var(--v2-pop)!important;
}
/* -- Portal command centre --------------------------------------------------- */
body.system-surface:not(#v2) .pc-eyebrow{font-family:var(--font-mono)!important;font-size:10.5px!important;font-weight:500!important;letter-spacing:.14em!important;color:var(--v2-accent-text)!important}
body.system-surface:not(#v2) .pc-intro h2{font-size:22px!important;font-weight:600!important;letter-spacing:-.02em!important;color:var(--v2-text)!important}
body.system-surface:not(#v2) .pc-intro p{color:var(--v2-copy)!important}
body.system-surface:not(#v2) .pc-track{background:var(--v2-line)!important}
body.system-surface:not(#v2) .pc-fill{background:var(--v2-accent)!important;box-shadow:none!important}
body.system-surface:not(#v2) .pc-score-num{font-family:var(--font-display)!important;color:var(--v2-text)!important}
body.system-surface:not(#v2) .pc-shortcuts a{
background:transparent!important;border:1px solid var(--v2-line)!important;border-radius:var(--v2-r)!important;color:var(--v2-copy)!important;box-shadow:none!important;
}
body.system-surface:not(#v2) .pc-shortcuts a:hover{border-color:var(--v2-line-2)!important;color:#fff!important;background:rgba(255,255,255,.03)!important}
body.system-surface:not(#v2) .pc-head{border-color:var(--v2-line)!important}
/* Portal welcome panel: no blurred orb */
body.system-surface:not(#v2) .pc-intro::after, body.system-surface:not(#v2) .pc-intro::before{content:none!important}
/* Admin sidebar: line icons on groups, text-only children */
body.system-surface:not(#v2) .dash-nav .ic{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:20px!important;flex:0 0 20px!important;opacity:1!important}
body.system-surface:not(#v2) .dash-nav .ic .v2-ic{display:block;width:18px;height:18px}
body.system-surface:not(#v2).admin-surface .dash-nav .ic{font-family:inherit!important}
body.system-surface:not(#v2).admin-surface .dash-nav-children a .ic{display:none!important}
body.system-surface:not(#v2).admin-surface .dash-nav-children{margin:2px 0 6px 21px!important;padding-left:10px!important;border-left:1px solid var(--v2-line)!important}
body.system-surface:not(#v2).admin-surface .dash-nav-children a{font-size:13.5px!important;min-height:34px}
body.system-surface:not(#v2) .dash-nav-chevron{color:var(--v2-muted)!important}
body.system-surface:not(#v2) .admin-nav-search-icon{display:inline-flex;color:var(--v2-muted)}
/* Empty states and work cards: pictograms in one quiet tone */
body.system-surface:not(#v2) .dash-body .empty .ic{opacity:.7!important;font-size:34px!important;margin-bottom:10px!important;color:var(--v2-muted)!important}
body.system-surface:not(#v2) .dash-body .empty p{color:var(--v2-muted)!important}
/* -- Portal dashboard details ---------------------------------------------- */
/* The compliance-monitor panel had no padding and sat squeezed under the welcome card */
body.system-surface:not(#v2) .pc-hero > .pc-panel:not(.pc-intro):not(.pc-score){grid-column:1 / -1;padding:16px 20px 14px!important;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));column-gap:24px;align-items:center}
body.system-surface:not(#v2) .pc-hero > .pc-panel:not(.pc-intro):not(.pc-score) > .pc-eyebrow{grid-column:1 / -1;margin-bottom:4px}
body.system-surface:not(#v2) .pc-hero > .pc-panel:not(.pc-intro):not(.pc-score) > div[style*="justify-content:space-between"]{padding:8px 0;border-top:1px solid var(--v2-line);margin-top:0!important;font-size:13px!important}
body.system-surface:not(#v2) .pc-hero > .pc-panel:not(.pc-intro):not(.pc-score) > div:last-child{grid-column:1 / -1;font-size:11.5px!important;color:var(--v2-muted)!important;margin-top:8px!important}
body.system-surface:not(#v2) .pc-action-ic{background:var(--v2-accent-soft)!important;color:var(--v2-accent-text)!important;border-radius:var(--v2-r)!important}
body.system-surface:not(#v2) .pc-action strong{font-size:14px!important}
body.system-surface:not(#v2) .pc-action small{font-size:12.5px!important;color:var(--v2-muted)!important}
body.system-surface:not(#v2) .pc-row strong{font-size:13.5px!important;color:var(--v2-text)!important}
body.system-surface:not(#v2) .pc-row:hover{background:rgba(255,255,255,.03)!important}
body.system-surface:not(#v2) .pc-shortcut{font-size:13px!important;color:var(--v2-copy)!important;border-color:var(--v2-line)!important;background:transparent!important;min-height:44px;display:flex!important;align-items:center;gap:8px}
body.system-surface:not(#v2) .pc-shortcut:hover{border-color:var(--v2-line-2)!important;color:#fff!important;background:rgba(255,255,255,.03)!important}
body.system-surface:not(#v2) .pc-kpi span{margin-top:8px!important}
/* -- Admin: page-level hero banners become one quiet band ------------------- */
body.system-surface:not(#v2) .dash-content :is(.rd-hero,.cs-hero,.la-hero,.siawf-hero,.siat-hero,.shield-hero,.sia-hero,.siam-hero,.cc-hero,.today-hero,.cp-hero,.siae-hero,.radar-hero){
background:var(--v2-panel)!important;border:1px solid var(--v2-line)!important;border-radius:var(--v2-r-lg)!important;box-shadow:none!important;
-webkit-backdrop-filter:none!important;backdrop-filter:none!important;color:var(--v2-text)!important;
}
body.system-surface:not(#v2) .dash-content :is(.rd-hero,.cs-hero,.la-hero,.siawf-hero,.siat-hero,.shield-hero,.sia-hero,.siam-hero,.cc-hero,.today-hero,.cp-hero,.siae-hero,.radar-hero)::before,
body.system-surface:not(#v2) .dash-content :is(.rd-hero,.cs-hero,.la-hero,.siawf-hero,.siat-hero,.shield-hero,.sia-hero,.siam-hero,.cc-hero,.today-hero,.cp-hero,.siae-hero,.radar-hero)::after{content:none!important}
body.system-surface:not(#v2) .dash-content :is(.rd-hero,.cs-hero,.la-hero,.siawf-hero,.siat-hero,.shield-hero,.sia-hero,.siam-hero,.cc-hero,.today-hero,.cp-hero,.siae-hero,.radar-hero) :is(h1,h2){
background:none!important;-webkit-text-fill-color:currentColor!important;color:var(--v2-text)!important;font-weight:600!important;letter-spacing:-.02em!important;
}
body.system-surface:not(#v2) .dash-content :is(.rd-hero,.cs-hero,.la-hero,.siawf-hero,.siat-hero,.shield-hero,.sia-hero,.siam-hero,.cc-hero,.today-hero,.cp-hero,.siae-hero,.radar-hero) p{color:var(--v2-copy)!important}
/* Tab rows in admin pages */
body.system-surface:not(#v2) .dash-content :is(.rd-tabs,.cs-tabs,.siat-tabs,.shield-tabs,.leads-tabs,.pip-tabs){border-bottom:1px solid var(--v2-line)!important;gap:4px!important;background:transparent!important;box-shadow:none!important}
/* Coloured stat tiles on admin pages read as neutral panels with a coloured figure */
body.system-surface:not(#v2) .dash-content :is(.rd-card,.cs-card,.siam-kpi,.sia-kpi,.siawf-stat,.siat-stat,.shield-card,.la-q,.sia-glass){
background:var(--v2-panel)!important;border:1px solid var(--v2-line)!important;border-radius:var(--v2-r-lg)!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
/* Floating timer and assistant: keep them out of the way of content */
body.system-surface:not(#v2) #timerWidget{bottom:20px!important;right:96px!important}
body.system-surface:not(#v2) #timerWidget button, body.system-surface:not(#v2) #timerPill{
background:var(--v2-panel-2)!important;border:1px solid var(--v2-line-2)!important;color:var(--v2-text)!important;box-shadow:var(--v2-pop)!important;
border-radius:999px!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;font-weight:600!important;
}
@media (max-width:768px){
body.system-surface:not(#v2) #timerWidget{right:76px!important;bottom:16px!important}
body.system-surface:not(#v2) .pc-hero > .pc-panel:not(.pc-intro):not(.pc-score){grid-template-columns:minmax(0,1fr)}
}
/* -- App top bar on phones: one-line title, compact clock-in ---------------- */
body.system-surface:not(#v2) .dash-topbar-left{min-width:0!important;flex:1 1 auto}
body.system-surface:not(#v2) .dash-page-heading{min-width:0;overflow:hidden}
body.system-surface:not(#v2) .dash-topbar-title{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
body.system-surface:not(#v2) .dash-topbar-right{flex:0 0 auto}
body.system-surface:not(#v2) #clockBtn{border-radius:999px!important;background:transparent!important;border:1px solid var(--v2-line-2)!important;color:var(--v2-copy)!important;box-shadow:none!important;font-weight:600!important}
body.system-surface:not(#v2) #clockBtn:hover{border-color:var(--v2-muted)!important;color:#fff!important}
@media (max-width:600px){
body.system-surface:not(#v2) .dash-page-heading > :not(.dash-topbar-title){display:none!important}
body.system-surface:not(#v2) .dash-topbar-title{font-size:15px!important;max-width:none!important}
body.system-surface:not(#v2) #clockBtn{padding:6px 10px!important;font-size:12px!important;gap:4px!important}
body.system-surface:not(#v2) #clockBtn > :not(:first-child):not(:nth-child(2)){display:none!important}
/* Timer pill sits bottom-left so it never covers the centre of the content */
body.system-surface:not(#v2) #timerWidget{left:12px!important;right:auto!important;bottom:14px!important;max-width:calc(100vw - 96px)!important}
body.system-surface:not(#v2) #timerPillCompany{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
/* ==========================================================================
4. ALIGNMENT — section headers read from the left, like the hero
========================================================================== */
body.system-surface:not(#v2) :is(.services,.how-it-works) > .container > div[style*="text-align:center"]{
text-align:left!important;margin-left:0!important;margin-right:0!important;max-width:760px!important;
}
body.system-surface:not(#v2) :is(.services,.how-it-works) > .container > div[style*="text-align:center"] .section-sub{margin-left:0!important;margin-right:0!important}
/* Where a block is deliberately centred (FAQ, closing call to action), the
eyebrow drops its leading rule so it centres cleanly. */
body.system-surface:not(#v2) [style*="text-align:center"] > .section-label::before,
body.system-surface:not(#v2) .cta-banner-box .section-label::before,
body.system-surface:not(#v2) .section-label[style*="justify-content:center"]::before{display:none!important}
body.system-surface:not(#v2) .cta-banner-box .section-label{margin-left:auto!important;margin-right:auto!important}
body.system-surface:not(#v2) :is(.services,.how-it-works) > .container > div[style*="text-align:center"] > .section-label::before{display:block!important}
/* Pricing: the list lines up with the page title instead of floating centred */
body.system-surface:not(#v2).pricing-page .hero-compact ~ section > .container > div[style*="max-width:820px"]{margin-left:0!important;margin-right:0!important;max-width:880px!important}
body.system-surface:not(#v2).pricing-page .hero-compact ~ section > .container > div[style*="max-width:820px"] > div{border-bottom-color:var(--v2-line)!important;padding:18px 0!important}
body.system-surface:not(#v2).pricing-page .hero-compact ~ section > .container > div[style*="max-width:820px"] > div > div:last-child{font-family:var(--font-display);font-weight:600!important;font-variant-numeric:tabular-nums;color:var(--v2-text)}
/* ==========================================================================
5. RESPONSIVE
========================================================================== */
/* Laptop: the bar gets tight before the 1024px collapse — drop the phone block
and tighten the links instead of letting them crowd. */
@media (max-width:1240px){
body.system-surface:not(#v2) .nav-phone{display:none!important}
}
@media (max-width:1120px){
body.system-surface:not(#v2) .nav-link{padding-left:9px!important;padding-right:9px!important;font-size:13.5px!important}
}
@media (max-width:1024px){
body.system-surface:not(#v2) :is(.section,.services,.how-it-works,.why-us,.faq,.blog-preview,.corporate-capability){padding:68px 0!important}
body.system-surface:not(#v2) .hero-content{text-align:left!important}
body.system-surface:not(#v2) .hero h1{font-size:clamp(36px,6.4vw,52px)!important;max-width:none}
body.system-surface:not(#v2) .hero-sub{margin-left:0!important;margin-right:0!important}
body.system-surface:not(#v2) .hero-ctas{justify-content:flex-start!important}
body.system-surface:not(#v2) :is(.section-label,.hero-eyebrow){margin-left:0!important;margin-right:0!important}
body.system-surface:not(#v2) .hero-trust-line{justify-content:flex-start!important}
body.system-surface:not(#v2) .why-stat-cards{grid-template-columns:repeat(3,minmax(0,1fr))!important}
body.system-surface:not(#v2) .hero-compact{padding-top:120px!important}
}
@media (max-width:900px){
body.system-surface:not(#v2) .timeline{grid-template-columns:1fr 1fr!important}
body.system-surface:not(#v2) .timeline-step{padding:24px 24px 24px 0!important;border-right:0!important;border-bottom:1px solid var(--v2-line)!important}
body.system-surface:not(#v2) .timeline-step + .timeline-step{padding-left:0!important}
body.system-surface:not(#v2) .timeline-step:nth-child(even){padding-left:24px!important;border-left:1px solid var(--v2-line)!important}
}
@media (max-width:768px){
body.system-surface:not(#v2) :is(.section,.services,.how-it-works,.why-us,.faq,.blog-preview,.corporate-capability){padding:56px 0!important}
body.system-surface:not(#v2) .checker{padding:8px 0 56px!important}
body.system-surface:not(#v2) .checker-box{padding:24px 20px!important}
body.system-surface:not(#v2) .cta-banner{padding:8px 0 64px!important}
body.system-surface:not(#v2) .cta-banner-box{padding:44px 20px!important}
body.system-surface:not(#v2) .section-title{font-size:clamp(28px,7.4vw,36px)!important}
body.system-surface:not(#v2) .hero h1{font-size:clamp(34px,9.6vw,42px)!important;line-height:1.06!important}
body.system-surface:not(#v2) .hero-sub{font-size:16px!important}
/* Proof points wrap as one quiet line; no stacked rail */
body.system-surface:not(#v2) .hero-trust-line{display:flex!important;flex-wrap:wrap!important;gap:6px 14px!important;border:0!important;padding:0!important;font-size:13px!important;margin-top:22px!important}
body.system-surface:not(#v2) .hero-trust-line i{display:block!important}
/* Audience chips wrap instead of five full-width bars */
body.system-surface:not(#v2) .audience-links{display:flex!important;flex-wrap:wrap!important;gap:8px!important;width:auto!important}
body.system-surface:not(#v2) .audience-links a{flex:0 0 auto!important;min-height:40px!important;display:inline-flex!important;align-items:center!important;padding:0 14px!important}
body.system-surface:not(#v2) .home-proof-inner{gap:14px!important}
body.system-surface:not(#v2) .proof-items{display:flex!important;flex-wrap:wrap!important;gap:6px 16px!important}
body.system-surface:not(#v2) .capability-statement h2{font-size:clamp(24px,6.2vw,30px)!important}
body.system-surface:not(#v2) .capability-audiences{grid-template-columns:1fr 1fr!important;gap:0 16px!important}
body.system-surface:not(#v2) .service-card{padding:22px!important}
body.system-surface:not(#v2) .faq-question{font-size:15.5px!important}
body.system-surface:not(#v2) .faq-answer-inner{padding-right:4px!important}
body.system-surface:not(#v2) .why-stat-cards{grid-template-columns:1fr!important}
body.system-surface:not(#v2) .mini-stat{display:flex!important;align-items:baseline!important;justify-content:space-between!important;gap:12px!important}
body.system-surface:not(#v2) .mini-stat-label{margin-top:0!important;text-align:right}
body.system-surface:not(#v2) .hero-compact{padding:104px 0 32px!important}
body.system-surface:not(#v2) .hero-compact ~ section:not([class]){padding:40px 0!important}
body.system-surface:not(#v2) .footer-link, body.system-surface:not(#v2) .footer-legal a{display:inline-flex;align-items:center;min-height:34px}
body.system-surface:not(#v2) .footer-links{gap:2px!important}
body.system-surface:not(#v2) .footer-grid{grid-template-columns:1fr 1fr!important;gap:28px 20px!important}
body.system-surface:not(#v2) .footer-grid > :is(.footer-brand,.footer-col:last-child){grid-column:1 / -1}
body.system-surface:not(#v2) .footer-bottom{align-items:flex-start!important;text-align:left!important}
/* Portal and admin */
body.system-surface:not(#v2) .dash-content{padding-bottom:104px}
body.system-surface:not(#v2) .dash-topbar-title{font-size:16px!important}
body.system-surface:not(#v2) .dash-nav a, body.system-surface:not(#v2) .dash-nav-group-toggle{min-height:44px}
body.system-surface:not(#v2) .kpi .num, body.system-surface:not(#v2) .pc-kpi b{font-size:24px!important}
body.system-surface:not(#v2) .dash-body :is(.btn-sm,.btn){min-height:40px}
}
@media (max-width:600px){
body.system-surface:not(#v2) .hero-ctas{flex-direction:column!important;align-items:stretch!important}
body.system-surface:not(#v2) .hero-ctas :is(.btn-primary,.btn-outline){width:100%!important}
/* Cookie banner: inside the screen, above the home indicator */
body.system-surface:not(#v2) .cookie-banner{left:12px!important;right:12px!important;width:auto!important;max-width:none!important;bottom:max(12px,env(safe-area-inset-bottom))!important;padding:16px!important;gap:12px!important}
body.system-surface:not(#v2) .cookie-actions{width:100%}
body.system-surface:not(#v2) :is(.cookie-accept,.cookie-reject){flex:1 1 0;min-height:44px}
body.system-surface:not(#v2) .timeline{grid-template-columns:1fr!important}
body.system-surface:not(#v2) .timeline-step, body.system-surface:not(#v2) .timeline-step:nth-child(even){padding:22px 0!important;border-left:0!important}
body.system-surface:not(#v2) .capability-audiences{grid-template-columns:1fr!important}
body.system-surface:not(#v2).pricing-page .hero-compact ~ section > .container > div > div[style*="justify-content:space-between"]{flex-direction:column!important;align-items:flex-start!important;gap:6px!important}
body.system-surface:not(#v2).pricing-page .hero-compact ~ section > .container > div > div[style*="justify-content:space-between"] > div:last-child{text-align:left!important;white-space:normal!important}
/* Forms and cards laid out with inline multi-column grids stack on phones
(the onboarding choices were cut off at the right edge). */
body.system-surface:not(#v2) .dash-content :is([style*="grid-template-columns:1fr 1fr 1fr"],[style*="grid-template-columns: 1fr 1fr 1fr"],[style*="grid-template-columns:repeat(3"],[style*="grid-template-columns: repeat(3"],[style*="grid-template-columns:2fr 1fr"],[style*="grid-template-columns: 2fr 1fr"],[style*="grid-template-columns:1fr 2fr"],[style*="grid-template-columns: 1fr 2fr"]){grid-template-columns:1fr!important}
body.system-surface:not(#v2) .dash-content :is([style*="grid-template-columns:1fr 1fr"],[style*="grid-template-columns: 1fr 1fr"],[style*="grid-template-columns:repeat(2"]):has(input,select,textarea){grid-template-columns:1fr!important}
body.system-surface:not(#v2) .dash-content :is([style*="grid-template-columns:repeat(4"],[style*="grid-template-columns: repeat(4"],[style*="grid-template-columns:1fr 1fr 1fr 1fr"]){grid-template-columns:1fr 1fr!important}
body.system-surface:not(#v2).portal-surface #sia-widget:not(.open){bottom:16px!important;right:12px!important}
/* Admin screens that were wider than a phone */
body.system-surface:not(#v2) .dash-content :is([style*="grid-template-columns:repeat(6"],[style*="grid-template-columns:repeat(5"]){grid-template-columns:repeat(3,minmax(0,1fr))!important}
body.system-surface:not(#v2) .dash-content :is(.today-grid,.siam-grid){grid-template-columns:minmax(0,1fr)!important}
body.system-surface:not(#v2) .dash-content .siam-grid > *{min-width:0!important}
body.system-surface:not(#v2) .dash-content :is(.panel,.siam-card){min-width:0!important;max-width:100%!important}
body.system-surface:not(#v2) .dash-content :has(> .siaw-train-btn){flex-wrap:wrap!important;gap:8px!important}
/* Rows laid out as icon · text · actions wrap their actions underneath */
body.system-surface:not(#v2) .dash-content div[style*="display:flex"][style*="align-items:center"]:has(> div[style*="flex:1"]):has(> div > form){flex-wrap:wrap!important}
body.system-surface:not(#v2) .dash-content div[style*="display:flex"][style*="align-items:center"]:has(> div[style*="flex:1"]) > div[style*="flex:1"]{flex:1 1 calc(100% - 80px)!important}
body.system-surface:not(#v2) .dash-content div[style*="display:flex"]:has(> form) > form{flex:1 1 auto}
body.system-surface:not(#v2) .dash-content div[style*="display:flex"]:has(> form) > form > .btn-sm{width:100%;justify-content:center}
/* Team chat: channel list above the conversation */
body.system-surface:not(#v2) .dash-content div[style*="grid-template-columns:280px 1fr"]{grid-template-columns:minmax(0,1fr)!important;height:auto!important}
body.system-surface:not(#v2) .dash-content div[style*="grid-template-columns:280px 1fr"] > .panel{max-height:none!important;min-height:0!important}
body.system-surface:not(#v2) .dash-content .siaw-train-btn{margin-left:0!important}
/* While the cookie choice is on screen the assistant launcher steps aside */
body.system-surface:not(#v2).cookie-visible #sia-widget:not(.open){display:none!important}
/* The assistant launcher stays reachable without covering the content column */
body.system-surface:not(#v2) #sia-widget:not(.open) #sia-bubble{width:52px!important;height:52px!important}
body.system-surface:not(#v2) #sia-widget:not(.open) #sia-bubble img{width:46px!important;height:46px!important}
}
@media (max-width:480px){
body.system-surface:not(#v2) :is(.section,.services,.how-it-works,.why-us,.faq,.blog-preview,.corporate-capability){padding:48px 0!important}
body.system-surface:not(#v2) .cta-actions{flex-direction:column!important;align-items:stretch!important}
body.system-surface:not(#v2) .cta-actions :is(.btn-primary,.btn-outline){width:100%!important;justify-content:center!important}
}
/* Nothing sticks in its hover state after a tap */
@media (hover:none){
body.system-surface:not(#v2) :is(a.glass-card,a.service-card,a.info-card,a.blog-card):hover{border-color:var(--v2-line)!important;background:var(--v2-panel)!important}
}
/* ==========================================================================
6. TABLES ON PHONES — rows become labelled cards (labels set by js/v2.js)
========================================================================== */
@media (max-width:640px){
body.system-surface:not(#v2) .dash-content table.v2-stack{min-width:0!important;width:100%!important;border-collapse:separate!important;border-spacing:0!important}
body.system-surface:not(#v2) .dash-content table.v2-stack thead{display:none!important}
body.system-surface:not(#v2) .dash-content table.v2-stack tbody{display:block!important}
body.system-surface:not(#v2) .dash-content table.v2-stack tbody tr{display:block!important;padding:12px 14px!important;border-bottom:1px solid var(--v2-line)!important;background:transparent!important}
body.system-surface:not(#v2) .dash-content table.v2-stack tbody tr:last-child{border-bottom:0!important}
body.system-surface:not(#v2) .dash-content table.v2-stack tbody td{
display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:14px!important;
width:auto!important;min-width:0!important;max-width:none!important;padding:5px 0!important;border:0!important;
text-align:right!important;white-space:normal!important;overflow-wrap:anywhere;background:transparent!important;
}
body.system-surface:not(#v2) .dash-content table.v2-stack tbody td::before{
content:attr(data-label);flex:0 0 auto;max-width:46%;text-align:left;
font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--v2-muted);padding-top:2px;
}
body.system-surface:not(#v2) .dash-content table.v2-stack tbody td[data-label=""]::before{content:none}
body.system-surface:not(#v2) .dash-content table.v2-stack tbody td[data-label=""]{justify-content:flex-end!important}
body.system-surface:not(#v2) .dash-content table.v2-stack tbody td.v2-span{display:block!important;text-align:left!important}
body.system-surface:not(#v2) .dash-content table.v2-stack tbody td:first-child{font-weight:600;color:var(--v2-text)}
body.system-surface:not(#v2) .dash-content table.v2-stack tbody td > *{max-width:100%}
body.system-surface:not(#v2) .dash-content .table-wrap:has(table.v2-stack){overflow-x:visible!important}
}
/* ==========================================================================
v4 — PUBLIC: error page
========================================================================== */
body.system-surface:not(#v2) main section.section.v2-notfound, body.system-surface:not(#v2) section.section.v2-notfound{padding:120px 0 110px!important;text-align:center}
body.system-surface:not(#v2) .v2-notfound .container{max-width:680px}
body.system-surface:not(#v2) .v2-notfound-code{font-family:var(--font-mono)!important;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--v2-accent-text);margin:0 0 14px}
body.system-surface:not(#v2) .v2-notfound .section-title{margin:0 0 14px!important;font-size:clamp(30px,4.4vw,44px)!important}
body.system-surface:not(#v2) .v2-notfound .section-subtitle{margin:0 auto 30px!important;max-width:52ch}
body.system-surface:not(#v2) .v2-notfound-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
body.system-surface:not(#v2) .v2-notfound-help{margin:28px 0 0;font-size:14px;color:var(--v2-muted)}
body.system-surface:not(#v2) .v2-notfound-help a{color:var(--v2-accent-text);text-decoration:underline;text-underline-offset:3px}
@media (max-width:640px){
body.system-surface:not(#v2) main section.section.v2-notfound, body.system-surface:not(#v2) section.section.v2-notfound{padding:72px 0 64px!important}
body.system-surface:not(#v2) .v2-notfound-actions > a{flex:1 1 100%}
}
/* ── Readability floor on the public site ────────────────────────────────────
Three labels sat at 9–10px on every page: the "Talk to a specialist" line in
the header (launch-final.css forced 9px with !important), the footer column
headings (9.5px) and the footer legal line (10px). Uppercase mono at that
size is decoration, not text — the house label size is 11.5px, so these come
up to meet it. Letter-spacing is eased slightly at the larger size so the
lines still fit their columns. */
body.system-surface:not(#v2) .nav-phone small{font-size:11px!important;letter-spacing:.02em!important}
body.system-surface:not(#v2) .footer-col h4{font-size:11.5px!important;letter-spacing:.16em!important}
body.system-surface:not(#v2) .footer-copy,
body.system-surface:not(#v2) .footer-legal a{font-size:11.5px!important;letter-spacing:.07em!important}
/* ==========================================================================
v4 — PORTAL + ADMIN: working-interface standards
Readable data, consistent controls, nothing floating over content.
========================================================================== */
/* -- Page frame -------------------------------------------------------------- */
body.system-surface:not(#v2) .dash-topbar{min-height:64px}
body.system-surface:not(#v2) .dash-topbar-title{font-size:20px!important;line-height:1.2!important}
body.system-surface:not(#v2) .dash-topbar-context{font-size:11px!important;letter-spacing:.12em!important;color:var(--v2-muted)!important}
body.system-surface:not(#v2) .dash-content{padding:24px 28px 72px!important;max-width:1480px}
body.system-surface:not(#v2) .dash-content > * + *{margin-top:0}
body.system-surface:not(#v2) .dash-content p{line-height:1.6}
/* -- Data tables ----------------------------------------------------------- */
body.system-surface:not(#v2) .dash-content table{border-collapse:collapse;width:100%}
body.system-surface:not(#v2) .dash-content table th{
font-family:var(--font-mono)!important;font-size:11px!important;font-weight:500!important;letter-spacing:.08em!important;text-transform:uppercase!important;
color:var(--v2-muted)!important;background:var(--v2-panel-2)!important;padding:10px 14px!important;text-align:left;white-space:nowrap;vertical-align:middle;
}
body.system-surface:not(#v2) .dash-content table td{font-size:13.5px!important;line-height:1.45;padding:11px 14px!important;vertical-align:middle;color:var(--v2-copy)}
body.system-surface:not(#v2) .dash-content table td:first-child{color:var(--v2-text)}
body.system-surface:not(#v2) .dash-content table tbody tr{transition:background-color .12s ease}
body.system-surface:not(#v2) .dash-content table tbody tr:hover{background:rgba(255,255,255,.025)!important}
body.system-surface:not(#v2) .dash-content table td :is(.btn,.btn-sm,.btn-primary,.btn-outline,.btn-ghost,button:not(.v2-sort)):not(.badge){
min-height:32px!important;padding:0 12px!important;font-size:13px!important;line-height:1!important;display:inline-flex!important;align-items:center!important;justify-content:center;gap:6px;
vertical-align:middle;white-space:nowrap;
}
body.system-surface:not(#v2) .dash-content table td :is(form){display:inline-flex;margin:0}
body.system-surface:not(#v2) .dash-content table td > :is(a,button,form) + :is(a,button,form){margin-left:6px}
body.system-surface:not(#v2) .dash-content .table-wrap{border-radius:var(--v2-r)!important;overflow-x:auto}
/* Sortable headers (added by v2.js) */
body.system-surface:not(#v2) .dash-content th.v2-sortable{cursor:pointer;user-select:none}
body.system-surface:not(#v2) .dash-content th.v2-sortable:hover{color:var(--v2-text)!important}
body.system-surface:not(#v2) .dash-content th.v2-sortable::after{content:"";display:inline-block;width:0;height:0;margin-left:6px;vertical-align:middle;border:4px solid transparent;border-top-color:var(--v2-line-ctl);transform:translateY(2px)}
body.system-surface:not(#v2) .dash-content th.v2-sortable[aria-sort="ascending"]::after{border-top-color:transparent;border-bottom-color:var(--v2-accent-text);transform:translateY(-2px)}
body.system-surface:not(#v2) .dash-content th.v2-sortable[aria-sort="descending"]::after{border-top-color:var(--v2-accent-text)}
/* Table toolbar + pager (added by v2.js) */
body.system-surface:not(#v2) .v2-table-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 12px}
body.system-surface:not(#v2) .v2-table-filter{position:relative;flex:1 1 260px;max-width:380px}
body.system-surface:not(#v2) .v2-table-filter input{width:100%;min-height:38px!important;padding:8px 12px 8px 36px!important;font-size:13.5px!important}
body.system-surface:not(#v2) .v2-table-filter .ui-ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--v2-muted);pointer-events:none}
body.system-surface:not(#v2) .v2-table-count{font-size:12.5px;color:var(--v2-muted);font-variant-numeric:tabular-nums}
body.system-surface:not(#v2) .v2-pager{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 2px 2px;font-size:13px;color:var(--v2-muted)}
body.system-surface:not(#v2) .v2-pager-btns{display:flex;gap:6px;align-items:center}
body.system-surface:not(#v2) .v2-pager button{
min-width:36px;min-height:34px;padding:0 12px;border-radius:var(--v2-r);border:1px solid var(--v2-line-2);background:transparent;
color:var(--v2-copy);font:600 13px var(--font-body);cursor:pointer;
}
body.system-surface:not(#v2) .v2-pager button:hover:not(:disabled){border-color:var(--v2-muted);color:#fff}
body.system-surface:not(#v2) .v2-pager button[aria-current="page"]{background:var(--v2-accent-soft);border-color:transparent;color:#fff}
body.system-surface:not(#v2) .v2-pager button:disabled{opacity:.4;cursor:default}
body.system-surface:not(#v2) .v2-row-hidden{display:none!important}
body.system-surface:not(#v2) .admin-table-tools{display:none!important} /* superseded by the v2 table toolbar */
body.system-surface:not(#v2) .admin-row-filtered{display:none!important}
/* -- Forms ------------------------------------------------------------------- */
body.system-surface:not(#v2) .dash-content :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]),select){min-height:40px}
body.system-surface:not(#v2) .dash-content textarea{min-height:96px;line-height:1.5}
body.system-surface:not(#v2) .dash-content :is(input,select,textarea){font-size:14px!important}
body.system-surface:not(#v2) .dash-content select, body.system-surface:not(#v2) select.form-control, body.system-surface:not(#v2) .pill-select{
-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23929CAB' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E")!important;
background-repeat:no-repeat!important;background-position:right 12px center!important;background-size:12px!important;padding-right:36px!important;
}
body.system-surface:not(#v2) .dash-content select[multiple]{background-image:none!important;padding-right:12px!important}
body.system-surface:not(#v2) .dash-content label{font-size:13px}
body.system-surface:not(#v2) .dash-content .form-group{margin-bottom:16px}
body.system-surface:not(#v2) .dash-content .form-group > label{display:block;margin-bottom:6px!important;color:var(--v2-copy)!important;font-weight:600!important}
body.system-surface:not(#v2) .dash-content :is(input[type="checkbox"],input[type="radio"]){width:16px;height:16px;accent-color:var(--v2-accent);vertical-align:-3px;flex:0 0 auto}
body.system-surface:not(#v2) .dash-content input[type="file"]{font-size:13.5px!important;color:var(--v2-copy)}
body.system-surface:not(#v2) .v2-req{color:var(--v2-bad);margin-left:3px;font-weight:600}
body.system-surface:not(#v2) form[aria-busy="true"] :is(button[type="submit"],input[type="submit"],button:not([type])){opacity:.65;cursor:progress!important}
body.system-surface:not(#v2) :is(button,input)[data-v2-busy]{pointer-events:none}
/* -- Panels, KPIs, headings -------------------------------------------------- */
body.system-surface:not(#v2) .dash-content .panel{padding:20px 22px}
body.system-surface:not(#v2) .dash-content .panel.no-pad{padding:16px 18px}
body.system-surface:not(#v2) .dash-content .panel-head{margin-bottom:14px!important;gap:10px;flex-wrap:wrap}
body.system-surface:not(#v2) .dash-content .panel-head :is(h2,h3){font-size:16px!important}
body.system-surface:not(#v2) .dash-content .kpi{padding:16px 18px!important}
body.system-surface:not(#v2) .dash-content .kpi .num{font-size:26px!important}
body.system-surface:not(#v2) .dash-content .kpi .label{margin-bottom:8px!important}
body.system-surface:not(#v2) .dash-content .empty{padding:44px 20px!important}
body.system-surface:not(#v2) .dash-content .empty p{font-size:14.5px!important;max-width:420px;margin-left:auto;margin-right:auto;line-height:1.6}
body.system-surface:not(#v2) .dash-content .badge{font-size:11px!important;padding:3px 9px!important;line-height:1.35!important;white-space:nowrap}
/* -- Floating widgets: the time tracker lives in the top bar, not over content */
body.system-surface:not(#v2) .dash-topbar-right #timerWidget.v2-docked{position:relative!important;inset:auto!important;bottom:auto!important;right:auto!important;left:auto!important;z-index:60!important}
body.system-surface:not(#v2) #timerWidget.v2-docked :is(#timerStartBtn,#timerPill){
min-height:36px!important;padding:0 14px!important;font-size:13px!important;box-shadow:none!important;border-radius:999px!important;
background:transparent!important;border:1px solid var(--v2-line-2)!important;color:var(--v2-copy)!important;
}
body.system-surface:not(#v2) #timerWidget.v2-docked #timerPill{color:var(--v2-text)!important;border-color:rgba(52,211,153,.45)!important}
body.system-surface:not(#v2) #timerWidget.v2-docked #timerPanel{bottom:auto!important;top:46px!important;right:0!important;max-width:calc(100vw - 24px)}
@media (max-width:900px){
body.system-surface:not(#v2) #timerWidget.v2-docked #timerStartBtn{font-size:0!important;width:38px;padding:0!important;justify-content:center}
body.system-surface:not(#v2) #timerWidget.v2-docked #timerStartBtn .ui-em{font-size:16px;width:16px;height:16px}
body.system-surface:not(#v2) #timerWidget.v2-docked #timerPillCompany{display:none!important}
}
/* -- Customer portal: documents and invoices -------------------------------- */
body.system-surface:not(#v2).portal-surface .dash-content table td :is(.btn-primary,.btn-outline,.btn-sm,.btn){min-width:64px}
@media (max-width:640px){
body.system-surface:not(#v2) .dash-content{padding:16px 14px 96px!important}
body.system-surface:not(#v2) .v2-table-filter{max-width:none}
body.system-surface:not(#v2) .v2-pager{justify-content:center}
}
/* Short values stay on one line; long text wraps at a readable width */
body.system-surface:not(#v2) .dash-content table td{white-space:nowrap}
body.system-surface:not(#v2) .dash-content table td.v2-wrap{white-space:normal;min-width:220px;max-width:520px}
@media (max-width:640px){ body.system-surface:not(#v2) .dash-content table.v2-stack td{white-space:normal!important;max-width:none;min-width:0} }
/* -- Customer portal: dashboard (portal/dashboard.php) ---------------------- */
body.system-surface:not(#v2) .pc-hero > .pc-panel.pc-monitor{grid-column:auto;display:block;padding:22px 24px!important}
@media (max-width:1180px){ body.system-surface:not(#v2) .pc-hero.has-monitor > .pc-panel.pc-monitor{grid-column:auto} }
body.system-surface:not(#v2) .pc-kpi span{font-family:var(--font-body)!important;font-size:13px!important;letter-spacing:0!important;text-transform:none!important;color:var(--v2-muted)!important}
body.system-surface:not(#v2) .pc-kpi b{font-size:26px!important}
body.system-surface:not(#v2) .pc-intro h2{font-size:26px!important}
body.system-surface:not(#v2) .pc-eyebrow{font-size:11px!important}
body.system-surface:not(#v2) .pc-action small{font-size:13.5px!important;color:var(--v2-copy)!important}
body.system-surface:not(#v2) .pc-action strong{font-size:14.5px!important}
body.system-surface:not(#v2) .pc-row strong{font-size:14px!important}
body.system-surface:not(#v2) .pc-shortcuts a{border-color:var(--v2-line-2)!important}
@media (max-width:560px){ body.system-surface:not(#v2) .pc-intro h2{font-size:22px!important} body.system-surface:not(#v2) .pc-kpi b{font-size:22px!important} body.system-surface:not(#v2) .pc-hero > .pc-panel.pc-monitor{padding:18px!important} }
/* Grouped cell content (v2.js): inline on desktop, one right-aligned block on phones */
body.system-surface:not(#v2) .dash-content td > .v2-cell{display:contents}
@media (max-width:640px){
body.system-surface:not(#v2) .dash-content table.v2-stack td > .v2-cell{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px;min-width:0;text-align:right}
body.system-surface:not(#v2) .dash-content table.v2-stack td > .v2-cell > :is(small,div,span.sub){flex-basis:100%}
body.system-surface:not(#v2) .dash-content table.v2-stack td[data-label=""] > .v2-cell{justify-content:flex-start;width:100%}
body.system-surface:not(#v2) .dash-content table.v2-stack td > .v2-cell > :is(a,button,form) + :is(a,button,form){margin-left:0!important}
}
/* Two-column work layouts: main column can shrink (tables scroll inside it), side column keeps a usable form width */
body.system-surface:not(#v2) .dash-content .two-col{grid-template-columns:minmax(0,2fr) minmax(300px,1fr)!important;align-items:start}
@media (max-width:1100px){ body.system-surface:not(#v2) .dash-content .two-col{grid-template-columns:minmax(0,1fr)!important} }
/* Grid columns may shrink below their content's natural width (prevents a wide
table or long token from pushing a card off the right edge); wide content then
scrolls inside its own card instead. */
body.system-surface:not(#v2) .dash-content :is([class*="grid"],[style*="grid-template"],.two-col) > *{min-width:0}
body.system-surface:not(#v2) .dash-content :is([class*="-card"],.panel) :is(pre,code){white-space:pre-wrap;overflow-wrap:anywhere}
body.system-surface:not(#v2) .dash-content{overflow-wrap:break-word}
body.system-surface:not(#v2) .dash-content .notif-item > *{min-width:0}
body.system-surface:not(#v2) .dash-content .notif-item :is(p,div,span){overflow-wrap:anywhere}
body.system-surface:not(#v2) .dash-content table.rd-t{display:block;overflow-x:auto;max-width:100%}
@media (max-width:640px){ body.system-surface:not(#v2) .dash-content table.rd-t.v2-stack{display:table} }
/* Label/value rows: long names wrap, the action stays at full size */
body.system-surface:not(#v2) .dash-content .stat-row{gap:12px}
body.system-surface:not(#v2) .dash-content .stat-row > :first-child{min-width:0;overflow-wrap:anywhere}
body.system-surface:not(#v2) .dash-content .stat-row > :is(a,button,form):last-child{flex:0 0 auto}
/* Text + action rows built inline with flex: let the text shrink, keep the action whole */
body.system-surface:not(#v2) .dash-content [style*="justify-content:space-between"] > :first-child{min-width:0}
body.system-surface:not(#v2) .dash-content [style*="justify-content:space-between"] > :is(form,a.btn-sm,button):last-child{flex:0 0 auto}
/* KPI figures given an inline colour were invisible: an older layer clips the
text to a gradient background, which v2 removes — so the text fill must be
the colour itself. */
body.system-surface:not(#v2) :is(.kpi .num,.pc-kpi b,.kpi-value,.stat-num,.kpi-num)[style*="color"]{-webkit-text-fill-color:currentColor!important;background:none!important}
/* -- SIA status banner (admin_header.php) ---------------------------------- */
body.system-surface:not(#v2) .v2-sia-alert{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;margin:0 0 18px;padding:14px 18px;border-radius:var(--v2-r-lg);border:1px solid;border-left-width:3px}
body.system-surface:not(#v2) .v2-sia-alert.is-bad{border-color:rgba(248,113,113,.4);border-left-color:var(--v2-bad);background:var(--v2-bad-soft)}
body.system-surface:not(#v2) .v2-sia-alert.is-warn{border-color:rgba(251,191,36,.4);border-left-color:var(--v2-warn);background:var(--v2-warn-soft)}
body.system-surface:not(#v2) .v2-sia-alert-body{flex:1 1 420px;min-width:0}
body.system-surface:not(#v2) .v2-sia-alert strong{display:block;font-size:14.5px;color:var(--v2-text);margin-bottom:4px}
body.system-surface:not(#v2) .v2-sia-alert p{margin:0;font-size:13.5px;line-height:1.55;color:var(--v2-copy)}
body.system-surface:not(#v2) .v2-sia-alert details{margin-top:8px;font-size:12.5px;color:var(--v2-muted)}
body.system-surface:not(#v2) .v2-sia-alert summary{cursor:pointer;color:var(--v2-muted)}
body.system-surface:not(#v2) .v2-sia-alert details p{margin-top:6px;font-size:12.5px;color:var(--v2-muted);overflow-wrap:anywhere}
body.system-surface:not(#v2) .v2-sia-alert-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
body.system-surface:not(#v2) .v2-sia-alert-actions form{margin:0}
/* One button geometry across admin + portal: legacy .btn / .btn-primary / .btn-outline
on app screens take the same size as .btn-sm (inline styles still win). */
body.system-surface:not(#v2) .dash-content :is(.btn,.btn-primary,.btn-outline,.btn-secondary):not(.btn-sm){display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px;min-height:36px;font-size:13px;line-height:1.2;cursor:pointer;text-decoration:none;white-space:nowrap;max-width:100%;font-family:inherit;vertical-align:middle}
/* ── No single value may wreck a table ───────────────────────────────────────
A 300-character company name arrived through the public application form
(a field-length probe) and stretched one cell down the whole screen, pushing
every other column out of line. The intake guard now refuses values that
long, but the display should survive bad data whatever its source — rows
come from imports and integrations too, not only from forms we control.
Long unbroken runs wrap instead of stretching, and any cell is capped at a
readable number of lines with the full value still in the title attribute. */
body.system-surface:not(#v2) .dash-content table.data td{overflow-wrap:anywhere;word-break:break-word}
body.system-surface:not(#v2) .dash-content table.data td > *{min-width:0;max-width:100%}
body.system-surface:not(#v2) .dash-content table.data td{max-width:420px}
/* Deliberately no line-clamp here. The long values sit as bare text nodes
directly in the
, and clamping a table cell means taking it out of
table layout, which breaks column alignment for every well-behaved row to
tidy one bad one. Capping the width and letting it wrap keeps the table
square; a tall row is cosmetic. The guard stops such values at intake. */