/* Core54: selective emphasis, blue light and layered elevation. */
.material-system{
 --material-action:linear-gradient(165deg,#286ee7 0%,#1762df 48%,#1050c7 100%);
 --material-action-hover:linear-gradient(165deg,#2465da 0%,#1659d2 48%,#0d48b9 100%);
 --material-quiet:linear-gradient(155deg,#142a46 0%,#0f2037 100%);
 --material-panel:linear-gradient(150deg,#152d4b 0%,#102039 52%,#0b182b 100%);
 --material-shadow-control:inset 0 1px 0 #ffffff26,0 1px 2px #00082066,0 5px 12px -6px #000c;
 --material-shadow-low:0 1px 3px #00081766,0 8px 20px -12px #000c,0 20px 40px -30px #1b3d6c80;
 --material-shadow-showcase:0 2px 5px #000b,0 16px 32px -16px #000c,0 40px 72px -38px #174b91a6;
 --material-shadow-focus:0 2px 4px #0009,0 18px 36px -16px #000c,0 36px 68px -28px #1b59b675;
 --material-shadow-overlay:0 2px 4px #0008,0 16px 32px -10px #000b,0 40px 72px -24px #000a;
}

/* Marketing actions only. Product-demo controls retain their own design. */
.material-system .button{
 background:#1762df;
 background-image:var(--material-action);
 color:#fff;
 border-color:#4585ef;
 box-shadow:var(--material-shadow-control);
}
.material-system .button:hover{
 background:#1659d2;
 background-image:var(--material-action-hover);
 border-color:#77a5ef;
 box-shadow:inset 0 1px 0 #ffffff30,0 2px 4px #00082066,0 10px 22px -12px #286ee7b3;
}
.material-system .button:active{
 background-image:linear-gradient(165deg,#1554bd,#1245a2);
 box-shadow:inset 0 1px 3px #08234b66,0 1px 2px #0005;
}
.material-system .site-header .button{
 background:#112640;
 background-image:var(--material-quiet);
 border-color:#3e5d86;
 box-shadow:inset 0 1px 0 #ffffff0d,0 2px 4px #0004;
}
.material-system .site-header .button:hover{
 background-image:var(--material-action);
 border-color:#6c9fe9;
}
.material-system .button:focus-visible{outline:2px solid #a5caff;outline-offset:4px}

/* Depth belongs to the showcase shell, not every cell inside it. */
.material-system.page-home #workspace,
.material-system :is(.ai-theater,.flow-builder,.platform-art,.ai-platform-visual,.p-report-visual,.comms-routing-visual,.ai-practice-visual,.ai-ops-visual){
 box-shadow:var(--material-shadow-showcase);
}
.material-system :is(.ai-theater,.comms-routing-visual){
 background-color:#0b182b;
 background-image:radial-gradient(ellipse at 15% 0%,#24518570,transparent 66%),linear-gradient(165deg,#101f35,#081321);
 border-color:#385579;
}
.material-system :is(.platform-art,.flow-builder,.p-report-visual,.ai-practice-visual,.ai-ops-visual){
 background-color:#0b182b;
 background-image:var(--material-panel);
 border-color:#385579;
}
.material-system .ai-platform-visual{
 background-image:radial-gradient(ellipse at 50% 38%,#275d9560,transparent 72%);
 border-color:#385579;
}
.material-system .vg-art{
 background-color:#0c1b31;
 background-image:linear-gradient(155deg,#152c4966,#0b172a00 80%);
 box-shadow:var(--material-shadow-low);
}
.material-system :is(.cb-spotlight,.vg-brand-app,.r-workspace,.r-email,.r-pdf-preview){box-shadow:var(--material-shadow-showcase)}
.material-system .rp-device{box-shadow:0 2px 4px #0009,0 18px 32px -14px #000c,0 42px 72px -32px #153c758c}
.material-system .assurance-badge{
 background-color:#0a1524;
 background-image:linear-gradient(155deg,#132a4355,transparent 75%);
 box-shadow:var(--material-shadow-low);
 border-color:#2d4561;
}

/* Overlay elevation describes its position above the page. */
.material-system .site-header .nav-panel{
 background-color:#0b1524;
 background-image:linear-gradient(155deg,#12263d,#0b1524 75%);
 box-shadow:var(--material-shadow-overlay);
}
.material-system .mobile-nav .nav-panel{background:transparent;box-shadow:none}
.material-system .why-face:hover,.material-system .why-face:focus-visible{background-image:var(--material-quiet)}
.material-system .b-facets-list>details[open]{background-image:linear-gradient(105deg,#11253f55,transparent 70%)}

/* Pro breaks the pricing pattern; the alternatives stay calm and legible. */
.material-system :is(.plan-free,.plan-enterprise){
 background:#0b1524;
 border-color:#2a3c55;
 box-shadow:none;
}
.material-system .plan-pro{
 background:linear-gradient(155deg,#173c6b 0%,#112b4c 42%,#0b192d 100%);
 border-color:#6c9cde;
 box-shadow:var(--material-shadow-focus);
}
.material-system .plan-pro .plan-heading h2{font-size:36px;font-weight:600;letter-spacing:-.025em}
.material-system .plan-pro .plan-symbol{color:#c3dfff}
.material-system .plan-pro .plan-includes,.material-system .plan-pro .plan-footer{border-color:#41648a}
.material-system :is(.plan-free,.plan-enterprise) .plan-cta{
 background:#11223a;
 background-image:var(--material-quiet);
 border-color:#3c577b;
 box-shadow:inset 0 1px 0 #ffffff0a;
}
.material-system :is(.plan-free,.plan-enterprise) .plan-cta:hover{
 background-image:linear-gradient(155deg,#1b3556,#142943);
 border-color:#7093c2;
}
.material-system .comparison-scroll thead th[data-plan=pro]{background:linear-gradient(155deg,#193c64,#132c49)}
.material-system .comparison-plan-picker button[aria-pressed=true]{
 background-image:var(--material-quiet);
 box-shadow:inset 0 1px 0 #ffffff17;
}
@media(min-width:821px){.material-system .plan-pro{margin-top:-10px;margin-bottom:-10px;padding-top:38px;padding-bottom:38px}}
@media(min-width:821px) and (max-width:1100px){.material-system .plan-pro{padding-top:34px;padding-bottom:34px}}
@media(max-width:820px){
 .material-system{--material-shadow-showcase:0 2px 4px #0008,0 12px 24px -14px #000b,0 24px 40px -28px #174b9199}
 .material-system .plan-pro{box-shadow:0 2px 4px #0008,0 12px 24px -12px #000b,0 24px 42px -25px #1b59b675}
 .material-system .plan-pro .plan-heading h2{font-size:35px}
}