/*
  Cevian Labs site chrome: colour tokens, the canonical header/nav, and the footer. Imported by site.css (marketing
  pages) and loaded on its own by the app pages (start/status wizards), which keep their Tailwind layout. 2026-10-01.
*/
:root {
    --rust:#96372B; --rust-dark:#7a2d23; --rust-soft:#f8ece9; --blue:#356495; --blue-soft:#eaf1f8;
    --grey:#5A7080; --grey-deco:#91A3B0; --text:#1f2937; --bg:#ffffff; --section:#f3f4f6;
    --border:#d5dbe2;
    --ease-out:cubic-bezier(0.23, 1, 0.32, 1);
    --wrap:1180px;
}
.wrap { max-width:var(--wrap); margin:0 auto; padding:0 24px; }
.skip { position:absolute; left:-9999px; top:8px; background:var(--text); color:#fff; padding:10px 16px;
        border-radius:8px; z-index:100; text-decoration:none; }
.skip:focus { left:16px; }

/* ---------- Header (canonical marketing header) ---------- */
.site-header { position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid #e5e7eb;
               box-shadow:0 1px 2px rgba(31,41,55,0.05); }
.site-header nav { max-width:var(--wrap); margin:0 auto; padding:14px 24px; display:flex; align-items:center; gap:28px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; font-size:30px; letter-spacing:-0.01em; flex-shrink:0; }
.brand img { width:58px; height:44px; object-fit:contain; border-radius:8px; }
.brand b { font-weight:800; color:var(--text); } .brand > span > span { font-weight:400; color:var(--grey); }
.nav-links { display:flex; gap:26px; font-size:14.5px; font-weight:500; margin-left:auto; }
.nav-links a { text-decoration:none; color:var(--grey); transition:color 200ms; padding:4px 0; border-bottom:2px solid transparent; }
.nav-links a:hover { color:var(--rust); }
.nav-links a[aria-current="page"] { color:var(--text); border-bottom-color:var(--rust); }
.menu-btn { display:none; margin-left:auto; background:none; border:1px solid var(--border); border-radius:10px;
            padding:8px 12px; font:inherit; font-size:14.5px; font-weight:500; color:var(--text); cursor:pointer; }
.mobile-menu { display:none; }
@media (max-width: 900px) {
    .nav-links { display:none; }
    .menu-btn { display:inline-flex; }
    .mobile-menu.open { display:block; border-top:1px solid #e5e7eb; }
    .mobile-menu a { display:block; padding:14px 24px; text-decoration:none; font-weight:500; color:var(--text);
                     border-bottom:1px solid #f0f2f4; }
    .mobile-menu a[aria-current="page"] { color:var(--rust); }
}
@media (max-width: 480px) { .brand { font-size:24px; } .brand img { width:46px; height:36px; } }

/* ---------- Footer ---------- */
.site-footer { border-top:1px solid #e5e7eb; padding:30px 0 36px; font-size:14px; color:var(--grey); }
.site-footer .wrap { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.site-footer nav { display:flex; gap:22px; flex-wrap:wrap; }
.site-footer a { text-decoration:none; } .site-footer a:hover { color:var(--rust); }