/* Shared ccwork navigation and progressive interactions for imported client pages. */
html { scroll-behavior: smooth; }
body { margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.client-nav { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px max(22px, calc((100vw - 1220px) / 2)); background: #ffffffed; border-bottom: 1px solid #e8e3db; backdrop-filter: blur(16px); color: #171717; }
.client-brand { font-size: 22px; font-weight: 800; }
.client-nav nav { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; font-size: 14px; }
.client-nav a[aria-current="page"] { color: #0076dc; font-weight: 800; }
.client-nav button { border: 1px solid #d8d3ca; border-radius: 8px; padding: 8px 12px; }
.client-page-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; padding: 32px 22px; background: #fff; color: #5f5a53; }
.client-page-footer a { color: #0076dc; }
.dark .client-nav, .dark .client-page-footer { background: #111318ed; color: #eee; border-color: #ffffff1f; }
.dark .client-nav a[aria-current="page"] { color: #4aa8f0; }
[data-scenario-tab] { background: #f5f0eb !important; color: #4b423d !important; box-shadow: none !important; }
[data-scenario-tab][aria-selected="true"] { background: #e05645 !important; color: white !important; box-shadow: 0 8px 24px #e0564547 !important; }
.dark [data-scenario-tab]:not([aria-selected="true"]) { background: #ffffff0f !important; color: #d8d3ca !important; }
[data-scenario-panel][hidden], .client-download-status[hidden] { display: none; }
[data-client-download]:disabled { opacity: .65; cursor: wait; }
:focus-visible { outline: 3px solid #0076dc; outline-offset: 4px; }
.client-download-status { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 50; max-width: calc(100vw - 32px); padding: 14px 20px; border-radius: 12px; background: #171717; color: white; box-shadow: 0 8px 24px #0003; }
@media (max-width: 640px) { .client-nav { align-items: flex-start; gap: 12px; padding: 14px 18px; } .client-nav nav { justify-content: flex-end; gap: 10px 14px; font-size: 12px; } .client-brand { font-size: 20px; } main h1 { overflow-wrap: anywhere; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; } }