/* Generated by scripts/build-site-chrome.js — edit scripts/lib/site-chrome.js instead. */

:root {
    --sc-spicy: #FF6B41;
    --sc-spicy-active: #FE6D42;
    --sc-wine: #32021D;
    --sc-banner-height: 38px;
}

/* ── Announcement banner ── */
body { padding-top: var(--sc-banner-height); }

.sc-banner {
    position: fixed; top: 0; left: 0; right: 0; z-index: 60;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    height: var(--sc-banner-height);
    background: var(--sc-spicy); color: var(--sc-wine);
    font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
    text-decoration: none; padding: 0 16px;
}
.sc-banner-link { text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.sc-banner:hover .sc-banner-link { text-decoration-thickness: 2px; }
@media (max-width: 640px) { .sc-banner-lead { display: none; } }

/* ── Nav bar ── */
#mainNav.sc-nav { top: var(--sc-banner-height); background-color: var(--sc-wine); }
#mainNav.sc-nav.nav-scrolled {
    background-color: rgba(50, 2, 29, 0.95) !important;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    padding-top: 0.75rem !important; padding-bottom: 0.75rem !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
}
.sc-logo { text-decoration: none; }

.sc-navlink {
    position: relative; color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em;
    text-decoration: none; transition: color 0.3s ease;
}
.sc-navlink:hover, .sc-navlink[aria-current="page"] { color: #fff; }
.sc-navlink::after {
    content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px;
    background: var(--sc-spicy); transition: width 0.3s ease;
}
.sc-navlink:hover::after, .sc-navlink[aria-current="page"]::after { width: 100%; }

/* ── Language toggle ── */
.lang-toggle.sc-lang {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.1em;
}
.lang-toggle.sc-lang a {
    padding: 0.375rem 0.625rem; border-radius: 4px; text-decoration: none;
    cursor: pointer; font-weight: 600; transition: all 0.3s ease;
    color: rgba(255, 255, 255, 0.6);
}
.lang-toggle.sc-lang a.active { background: var(--sc-spicy-active); color: var(--sc-wine); }
.lang-toggle.sc-lang a:not(.active):hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.lang-toggle.sc-lang .sc-lang-sep { color: rgba(255, 255, 255, 0.3); }

/* ── Call-to-action button ── */
.sc-cta {
    position: relative; overflow: hidden; display: inline-block;
    background: var(--sc-spicy); color: #fff; border: 0; border-radius: 4px;
    padding: 0.5rem 1.5rem; font-size: 0.875rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.sc-cta::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
    transform: translateX(-100%); transition: transform 0.6s;
}
.sc-cta:hover::before { transform: translateX(100%); }
.sc-cta:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(255, 107, 65, 0.35); }
.sc-cta-lg { padding: 1rem 2.5rem; font-size: 1.125rem; margin-top: 1.5rem; }

/* ── Mobile menu ── */
.sc-menu-btn, .sc-menu-close {
    padding: 0.5rem; color: #fff; background: none; border: 0; cursor: pointer; line-height: 0;
}
.sc-menu-close { position: absolute; top: 1.5rem; right: 1.5rem; }

.mobile-menu.sc-menu {
    /* Starts below the announcement banner, which sits above it, so the close
       button is not hidden underneath. */
    position: fixed; inset: var(--sc-banner-height) 0 0 0; z-index: 50;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem;
    background-color: var(--sc-wine);
    /* Pages still carry their own .mobile-menu slide-in transforms. The shared
       menu fades like the homepage's, so the inherited transform is cancelled
       rather than left to fight the opacity. */
    transform: none;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.mobile-menu.sc-menu.open { opacity: 1; visibility: visible; pointer-events: auto; }
.sc-menu-link {
    color: #fff; text-decoration: none; font-size: 2.25rem; line-height: 1.1;
    font-family: 'Anton', Impact, sans-serif; letter-spacing: 0.02em;
}
.sc-menu-link-accent { color: var(--sc-spicy); }
.sc-menu-link:hover { color: var(--sc-spicy); }

/* ── Footer ── */
.sc-footer a { text-decoration: none; }

/* The brand block sits on its own row above the link columns, so the five
   columns below can share one grid and line up. Cap it so the logo, blurb and
   social row stay a readable block instead of stretching across a wide page. */
.sc-footer-brand { max-width: 34rem; }

/* Grid items default to min-width:auto, so one long label ("ChatGPT
   Enterprise", "Teach Them to Drive") widens its track and knocks the five
   columns out of alignment. Pin the tracks and let the label wrap instead. */
.sc-footer-cols > div { min-width: 0; }
.sc-footer-cols a { overflow-wrap: break-word; }

/* "Industries & Roles" wraps to two lines long before the others do, which
   drops its list half a line below the rest. Subgrid puts every heading on one
   shared row and every list on the next, so the columns stay aligned at any
   width; the row-gap override keeps the parent's 2.5rem from opening up
   between a heading and its own list. Browsers without subgrid just keep the
   plain grid. */
@supports (grid-template-rows: subgrid) {
    .sc-footer-cols > div {
        display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: 0;
    }
}