/* Moved verbatim from templates/fleet/base_sgc.html (2026-09-29): served as a static file so
   browsers cache it and a strict CSP needs no 'unsafe-inline' for styles. */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Surfaces match the customer portal (templates/portal/base.html):
   #fafafa page, #fff panels, #e2e2e2 hairlines. Keep the two in step —
   a customer moves between these pages and they should read as one site.
   Type and the blue accent stay this page's own. */
body { background: #fafafa; font-family: 'Hanken Grotesk', system-ui, sans-serif;
       color: #17180F; -webkit-font-smoothing: antialiased;
       min-height: 100vh; display: flex; flex-direction: column; }
a { color: #1F55B8; text-decoration: none; }
a:hover { color: #17180F; }

@keyframes so-orbit { to { transform: rotate(360deg); } }
@keyframes so-pulse { 0%,100% { opacity: 1; transform: scale(1); }
                      50% { opacity: .45; transform: scale(.82); } }
@keyframes so-fadeup { from { opacity: 0; transform: translateY(10px); }
                       to { opacity: 1; transform: none; } }

header { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(14px);
         background: rgba(255,255,255,.92); border-bottom: 1px solid #e2e2e2; }
.header-row { max-width: 1160px; margin: 0 auto; padding: 16px 32px; display: flex;
              align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; color: #17180F; }
.brand:hover { color: #17180F; }
.orbit { position: relative; width: 30px; height: 30px; display: inline-block; }
.orbit .ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid #17180F; }
.orbit .arm { position: absolute; inset: 0; animation: so-orbit 4.5s linear infinite; }
.orbit .dot { position: absolute; top: -3px; left: 50%; margin-left: -4px; width: 8px;
              height: 8px; border-radius: 50%; background: #2A6FDB; box-shadow: 0 0 0 2px #FFFFFF; }
.wordmark { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 18px;
            letter-spacing: -.02em; }
.wordmark .tld { color: #2A6FDB; }
nav { display: flex; align-items: center; gap: 28px; font-size: 14.5px; font-weight: 500;
      flex-wrap: wrap; }
nav a { color: #48483E; display: inline-flex; align-items: center; }
nav a:hover { color: #17180F; }
.yt-badge { display: inline-block; vertical-align: -0.18em; margin-right: 0.35em; }
.login-btn { font: inherit; font-weight: 600; color: #fff; background: #2A6FDB;
             border: none; border-radius: 999px; padding: 8px 18px; cursor: pointer;
             text-decoration: none; }
.login-btn:hover { background: #1F55B8; }

main { flex: 1; max-width: 1160px; width: 100%; margin: 0 auto; padding: 56px 32px 40px; }

.net-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px;
            border-radius: 999px; background: #EAF0FC; border: 1px solid #CBDCF7;
            font-size: 12.5px; font-weight: 600; color: #1F55B8; letter-spacing: .02em;
            margin-bottom: 20px; }
.net-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: #2A6FDB;
                 animation: so-pulse 1.8s ease-in-out infinite; }
.hero { max-width: 640px; margin-bottom: 44px; }
.hero h1 { font-family: 'Space Grotesk', sans-serif; font-weight: 600;
           font-size: clamp(32px, 6vw, 46px); line-height: 1.02; letter-spacing: -.03em;
           margin: 0 0 14px; }
.hero p { margin: 0; font-size: 17px; line-height: 1.55; color: #5C5C52; max-width: 520px; }

.sections { display: flex; flex-direction: column; gap: 44px; }
.section-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.section-head .title { font-family: 'Space Grotesk', sans-serif; font-size: 13px;
                       font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
                       color: #17180F; }
.section-head .rule { height: 1px; flex: 1; background: linear-gradient(90deg, #e2e2e2, transparent); }
.section-head .count { font-size: 12.5px; font-weight: 600; color: #8A8A7E; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.card { display: block; padding: 22px; border-radius: 16px; border: 1px solid #e2e2e2;
        background: #FFFFFF; box-shadow: 0 1px 2px rgba(20,20,15,.04);
        transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
        animation: so-fadeup .4s ease both; color: #17180F; }
.card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(20,20,15,.10);
              border-color: #CBDCF7; }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px;
            margin-bottom: 3px; }
.card-top .name { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 20px;
                  letter-spacing: -.02em; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
               font-weight: 600; color: #1F55B8; background: #EAF0FC; border: 1px solid #CBDCF7;
               padding: 5px 10px; border-radius: 999px; flex-shrink: 0; }
.status-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: #2A6FDB; }
.card-sub { font-size: 13.5px; color: #8A8A7E; margin-bottom: 16px; }
.card-rows { display: flex; flex-direction: column; gap: 1px; margin-bottom: 18px;
             border-top: 1px solid #eee; }
.card-rows .row { display: flex; align-items: center; justify-content: space-between;
                  gap: 12px; padding: 8px 0; border-bottom: 1px solid #eee; font-size: 13px; }
.card-rows .row:last-child { border-bottom: none; }
.card-rows .k { color: #8A8A7E; }
.card-rows .v { color: #48483E; font-weight: 600; }
.card-rows .v.mono { font-family: 'Space Grotesk', sans-serif; letter-spacing: .01em; }
.card-cta { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600;
            color: #1F55B8; }
.card-cta:hover { color: #17180F; }

.empty-section { padding: 30px 26px; border-radius: 16px; border: 1px solid #e2e2e2;
                 background: #FFFFFF; }
.empty-section p.lead { margin: 0 0 6px; font-weight: 600; font-size: 15.5px; color: #17180F; }
.empty-section p.body { margin: 0; font-size: 14.5px; line-height: 1.55; color: #74746A;
                        max-width: 560px; }
.empty { padding: 30px 26px; border-radius: 16px; border: 1px solid #e2e2e2;
         background: #FFFFFF; animation: so-fadeup .4s ease both; }
.empty h2 { font-family: 'Space Grotesk', sans-serif; font-weight: 600; letter-spacing: -.02em;
            margin: 0 0 10px; font-size: 22px; }
.empty p, .empty li { font-size: 14.5px; line-height: 1.55; color: #74746A; }
.empty ul { padding-left: 20px; margin: 10px 0 0; }
.empty li { margin-bottom: 8px; }
.empty strong { color: #48483E; }

/* Current page in the top nav. */
nav a.on { color: #17180F; font-weight: 600; }

/* Quiet closing line — carries the link to the full rights notice. */
.page-foot { margin-top: 52px; padding-top: 22px; border-top: 1px solid #e2e2e2;
             font-size: 13px; color: #8A8A7E; }
.page-foot a { margin-left: 6px; font-weight: 600; }

/* Privacy / data-rights notice (fleet/_privacy_rights.html). Deliberately
   quieter than the page above it — reference text, not a call to action. */
.privacy { margin-top: 56px; padding-top: 28px; border-top: 1px solid #e2e2e2;
           font-size: 13.5px; line-height: 1.6; color: #74746A; }
.privacy h2 { font-family: 'Space Grotesk', sans-serif; font-weight: 600;
              letter-spacing: -.02em; font-size: 17px; color: #17180F; margin: 0 0 10px; }
.privacy h3 { font-size: 12px; font-weight: 600; letter-spacing: .1em;
              text-transform: uppercase; color: #48483E; margin: 18px 0 6px; }
.privacy p { margin: 0 0 10px; max-width: 68ch; }
.privacy a { color: #1F55B8; }
.privacy-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
                gap: 0 40px; }
.privacy-cols h3:first-child { margin-top: 14px; }
.privacy-contact { font-weight: 500; color: #48483E; }