/* =========================================
My Car Buddy - Global Stylesheet
Light Mode: White & Silver
Dark Mode: Black & Green (matches the app)
========================================= */
/* Fonts are linked from each page's now, not @imported here.
An @import at the top of a stylesheet is the slowest way to load a
font: the browser has to fetch and parse THIS file before it learns
the font request exists, so the preconnect tags already sitting in
every had nothing to do until then. The starts the
fetch in the same breath as the stylesheet.
Kept here as a comment so the family list has one home:
https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600;9..144,700&family=Manrope:wght@300;400;500;600;700;800&family=Montserrat:wght@600;700;800;900&display=swap */
/* ---------- Theme Tokens ---------- */
:root {
/* Light Mode (default): White & Silver */
--bg-primary: #ffffff;
--bg-secondary: #f4f5f7;
--bg-tertiary: #e9ebef;
--bg-elevated: #ffffff;
--bg-inverse: #0c0d10;
--text-primary: #0c0d10;
--text-secondary: #4a4d56;
--text-tertiary: #6b6e76; /* WCAG AA: darkened from #7a7e88 (was 4.07:1 on white, now 5.1:1) */
--text-inverse: #ffffff;
--accent: #000000; /* light mode = strict black & white */
--accent-strong: #000000;
--accent-soft: #ececec;
--silver: #c2c5cc;
--silver-light: #e4e6eb;
--silver-dark: #8a8d96;
--border: #dcdee3;
--border-strong: #b7bac2;
--shadow-sm: 0 1px 2px rgba(12, 13, 16, 0.04), 0 1px 3px rgba(12, 13, 16, 0.06);
--shadow-md: 0 4px 12px rgba(12, 13, 16, 0.06), 0 2px 4px rgba(12, 13, 16, 0.04);
--shadow-lg: 0 20px 50px rgba(12, 13, 16, 0.08), 0 10px 20px rgba(12, 13, 16, 0.04);
--success: #1f8a4c;
--warning: #8f5c0d; /* WCAG AA: darkened from #b67611 (was 3.76:1 on white, now 5.67:1) — used as text color in 15 places */
--danger: #b8332a;
--gradient-hero: linear-gradient(180deg, #ffffff 0%, #f1f2f5 100%);
--gradient-accent: linear-gradient(135deg, #e9ebef 0%, #c2c5cc 100%);
--font-display: 'Montserrat', system-ui, sans-serif; /* bold geometric (Spotify-style) */
--font-body: 'Manrope', system-ui, sans-serif;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 18px;
--radius-xl: 28px;
--container: 1240px;
--header-h: 76px;
--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
[data-theme="dark"] {
/* Dark Mode: Black & Green — matches the mobile app (Spotify-style) */
--bg-primary: #121212;
--bg-secondary: #181818;
--bg-tertiary: #282828;
--bg-elevated: #181818;
--bg-inverse: #ededed;
--text-primary: #ffffff;
--text-secondary: #d6d6d6;
--text-tertiary: #aab0b8;
--text-inverse: #06140c;
--accent: #2563EB; /* brand action: buttons, links, icons */
--accent-strong: #ffffff; /* strong headings/text on dark (NOT a bg in dark) */
--accent-soft: #282828;
--silver: #b3b3b3;
--silver-light: #d8d8d8;
--silver-dark: #6a6d73;
--border: #2a2a2a;
--border-strong: #3a3a3a;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.6);
--shadow-md: 0 6px 18px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.45);
--shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.65), 0 10px 20px rgba(0, 0, 0, 0.45);
--success: #2563EB;
--warning: #ffa726;
--danger: #f0433b;
--gradient-hero: radial-gradient(ellipse at top, rgba(29, 185, 84, 0.14) 0%, transparent 60%), linear-gradient(180deg, #121212 0%, #0d0d0d 100%);
--gradient-accent: linear-gradient(135deg, #2563EB 0%, #1d4ed8 100%);
}
[data-theme="ocean"] {
/* Ocean: deep ocean-blue on cloud white (light family) */
--bg-primary: #f4f8fc;
--bg-secondary: #e7f0f8;
--bg-tertiary: #d7e6f2;
--bg-elevated: #ffffff;
--bg-inverse: #0a2540;
--text-primary: #0a2540;
--text-secondary: #3c566e;
--text-tertiary: #4f6478; /* WCAG AA: darkened from #6c8198 (was 3.77:1 on bg, now 5.74:1) */
--text-inverse: #ffffff;
--accent: #0b69c7;
--accent-strong: #0b69c7;
--accent-soft: #dcebfa;
--silver: #aebfce;
--silver-light: #d8e4ef;
--silver-dark: #7d92a5;
--border: #cfe0ee;
--border-strong: #a8c4dd;
--shadow-sm: 0 1px 2px rgba(10, 37, 64, 0.05), 0 1px 3px rgba(10, 37, 64, 0.07);
--shadow-md: 0 4px 12px rgba(10, 37, 64, 0.08), 0 2px 4px rgba(10, 37, 64, 0.05);
--shadow-lg: 0 20px 50px rgba(10, 37, 64, 0.12), 0 10px 20px rgba(10, 37, 64, 0.06);
--success: #1f8a4c;
--warning: #b67611;
--danger: #c0392b;
--gradient-hero: radial-gradient(ellipse at top, rgba(11, 105, 199, 0.10) 0%, transparent 60%), linear-gradient(180deg, #f4f8fc 0%, #e3eef8 100%);
--gradient-accent: linear-gradient(135deg, #0b69c7 0%, #084b91 100%);
}
[data-theme="red"] {
/* Red & Black: bright red on near-black (dark family) */
--bg-primary: #0d0d0d;
--bg-secondary: #1a1a1a;
--bg-tertiary: #262626;
--bg-elevated: #1a1a1a;
--bg-inverse: #ededed;
--text-primary: #ffffff;
--text-secondary: #d6d6d6;
--text-tertiary: #aab0b8;
--text-inverse: #ffffff;
--accent: #e11d2a;
--accent-strong: #ffffff;
--accent-soft: #2a1414;
--silver: #b3b3b3;
--silver-light: #d8d8d8;
--silver-dark: #6a6d73;
--border: #332626;
--border-strong: #4a3232;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.6);
--shadow-md: 0 6px 18px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.45);
--shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.65), 0 10px 20px rgba(0, 0, 0, 0.45);
--success: #2ecc71;
--warning: #ffa726;
--danger: #ff5b52;
--gradient-hero: radial-gradient(ellipse at top, rgba(225, 29, 42, 0.16) 0%, transparent 60%), linear-gradient(180deg, #0d0d0d 0%, #080808 100%);
--gradient-accent: linear-gradient(135deg, #e11d2a 0%, #8f1019 100%);
}
/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* WCAG 2.4.1: visually-hidden-until-focused skip link, first element in . */
.skip-link {
position: absolute;
top: -40px;
left: 8px;
z-index: 10000;
background: var(--bg-elevated);
color: var(--text-primary);
padding: 10px 18px;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
font-size: 0.9rem;
font-weight: 600;
transition: top 0.2s var(--ease);
}
.skip-link:focus {
top: 8px;
}
body {
margin: 0;
font-family: var(--font-body);
font-weight: 400;
font-size: 16px;
line-height: 1.65;
color: var(--text-primary);
background: var(--bg-primary);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}
img, svg { max-width: 100%; display: block; }
a {
color: var(--accent-strong);
text-decoration: none;
transition: color 0.2s var(--ease);
}
a:hover { color: var(--accent); }
h1, h2, h3, h4, h5 {
font-family: var(--font-display);
font-weight: 500;
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--text-primary);
margin: 0 0 0.6em;
}
h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); font-weight: 400; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.5rem); font-weight: 600; }
h4 { font-size: 1.1rem; font-weight: 600; font-family: var(--font-body); letter-spacing: 0.02em; }
p { margin: 0 0 1.1em; color: var(--text-secondary); }
.eyebrow {
display: inline-block;
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 1.2rem;
}
.container {
max-width: var(--container);
margin: 0 auto;
padding: 0 28px;
}
section { padding: 96px 0; }
/* ---------- Header / Nav ---------- */
.site-header {
position: sticky;
top: 0;
z-index: 60;
background: color-mix(in srgb, var(--bg-primary) 88%, transparent);
backdrop-filter: saturate(160%) blur(14px);
-webkit-backdrop-filter: saturate(160%) blur(14px);
border-bottom: 1px solid var(--border);
height: var(--header-h);
display: flex;
align-items: center;
}
.nav {
width: 100%;
max-width: var(--container);
margin: 0 auto;
padding: 0 28px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.brand {
display: flex;
align-items: center;
gap: 12px;
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 500;
color: var(--text-primary);
letter-spacing: -0.01em;
}
.brand:hover { color: var(--text-primary); }
.brand-mark {
width: 36px;
height: 36px;
border-radius: 9px;
background: var(--gradient-accent);
display: grid;
place-items: center;
color: var(--text-inverse);
flex-shrink: 0;
box-shadow: var(--shadow-sm);
}
[data-mode="dark"] .brand-mark { color: var(--text-inverse); }
.nav-links {
display: flex;
align-items: center;
gap: 30px;
list-style: none;
margin: 0;
padding: 0;
}
.nav-links a {
color: var(--text-secondary);
font-size: 0.93rem;
font-weight: 500;
position: relative;
}
.nav-links a:hover { color: var(--text-primary); }
.nav-links a.active { color: var(--text-primary); }
.nav-links a.active::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: -6px;
height: 2px;
background: var(--accent);
border-radius: 2px;
}
/* Grouped top-nav dropdowns (Product / Company) — declutters the bar */
.nav-group { position: relative; }
.nav-group-btn { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; font-family: inherit; color: var(--text-secondary); font-size: 0.93rem; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; }
.nav-group-btn:hover, .nav-group:hover .nav-group-btn, .nav-group:focus-within .nav-group-btn { color: var(--text-primary); }
.nav-caret { font-size: .72em; opacity: .7; transition: transform .15s ease; }
.nav-group:hover .nav-caret, .nav-group:focus-within .nav-caret { transform: rotate(180deg); }
.nav-sub { list-style: none; margin: 0; padding: 6px; position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%); min-width: 184px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 14px 36px rgba(0,0,0,.18); display: none; flex-direction: column; gap: 2px; z-index: 80; }
.nav-group:hover .nav-sub, .nav-group:focus-within .nav-sub { display: flex; }
.nav-group::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 16px; }
.nav-sub li { width: 100%; }
.nav-sub a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--text-secondary); font-size: .9rem; font-weight: 500; white-space: nowrap; }
.nav-sub a:hover { color: var(--text-primary); background: var(--accent-soft); }
[data-mode="dark"] .nav-sub { background: #202020; border-color: var(--border-strong); }
@media (max-width: 1024px) {
.nav-group { position: static; }
.nav-group-btn { width: 100%; justify-content: flex-start; }
.nav-caret { display: none; }
.nav-group::after { display: none; }
.nav-sub { position: static; transform: none; display: flex; min-width: 0; border: 0; box-shadow: none; background: none; padding: 6px 0 0 14px; }
}
.nav-actions {
display: flex;
align-items: center;
gap: 12px;
}
.theme-toggle {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid var(--border);
background: var(--bg-elevated);
color: var(--text-primary);
cursor: pointer;
display: grid;
place-items: center;
transition: all 0.25s var(--ease);
}
.theme-toggle:hover {
border-color: var(--accent);
transform: rotate(15deg);
}
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-mode="dark"] .theme-toggle .icon-sun { display: block; }
[data-mode="dark"] .theme-toggle .icon-moon { display: none; }
.mobile-toggle {
display: none;
width: 40px; height: 40px;
border-radius: 50%;
background: var(--bg-elevated);
border: 1px solid var(--border);
color: var(--text-primary);
cursor: pointer;
}
/* ---------- Buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 13px 26px;
border-radius: 100px; /* pill (Spotify-style) */
font-family: var(--font-body);
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.01em;
cursor: pointer;
border: 1px solid transparent;
transition: all 0.25s var(--ease);
text-decoration: none;
line-height: 1;
}
.btn-primary {
background: var(--accent-strong);
color: var(--text-inverse);
border-color: var(--accent-strong);
}
[data-mode="dark"] .btn-primary {
background: var(--accent);
color: var(--text-inverse);
border-color: var(--accent);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
color: var(--text-inverse);
}
[data-mode="dark"] .btn-primary:hover { color: var(--text-inverse); }
.btn-outline {
background: transparent;
color: var(--text-primary);
border-color: var(--border-strong);
}
.btn-outline:hover {
border-color: var(--accent);
color: var(--accent);
}
.btn-ghost {
background: transparent;
color: var(--text-secondary);
}
.btn-ghost:hover { color: var(--text-primary); }
.btn-lg { padding: 16px 32px; font-size: 1rem; }
.btn-sm { padding: 9px 18px; font-size: 0.85rem; }
.btn-primary:hover { transform: translateY(-1px) scale(1.03); }
/* ============================================================
Spotify-style components (dark-first redesign)
============================================================ */
.hero h1 { font-size: clamp(2.4rem, 5.2vw, 4.1rem); line-height: 1.03; letter-spacing: -0.02em; }
.hero h1 em { color: var(--accent); font-style: normal; }
h1, h2 { letter-spacing: -0.02em; }
/* Section title used above shelves/tile grids */
.shelf-section { margin: 14px 0; }
.shelf-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; gap: 16px; }
.shelf-head h2 { margin: 0; font-size: clamp(1.4rem, 3vw, 2rem); }
.shelf-head a { color: var(--text-tertiary); font-size: 0.85rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.shelf-head a:hover { color: var(--accent); }
/* Browse-by-industry tiles (Spotify "genre" grid) */
.ind-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.ind-tile { position: relative; aspect-ratio: 16/10; border-radius: 14px; overflow: hidden; padding: 15px;
display: flex; align-items: flex-start; text-decoration: none; color: var(--text-primary);
background: var(--bg-elevated); border: 1px solid var(--border);
font-family: var(--font-display); font-weight: 800; font-size: 1.02rem; letter-spacing: -0.01em;
box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), border-color .2s var(--ease); }
.ind-tile:hover { transform: translateY(-3px); border-color: var(--accent); }
.ind-tile span { position: relative; z-index: 1; max-width: 70%; line-height: 1.15; }
.ind-tile svg { position: absolute; right: -10px; bottom: -14px; width: 70px; height: 70px;
color: var(--accent); opacity: .55; transform: rotate(22deg); z-index: 0;
transition: opacity .2s var(--ease); }
.ind-tile:hover svg { opacity: .8; }
/* Industry tiles: neutral surface cards; color lives only in the accent icon
(was a 12-color rotation — toned down per design). Same in all 4 schemes. */
.t-1,.t-2,.t-3,.t-4,.t-5,.t-6,.t-7,.t-8,.t-9,.t-10,.t-11,.t-12{ background: var(--bg-elevated); }
/* Cover-art gradients: grayscale in light, colorful in dark. */
.ca-1{background:linear-gradient(135deg,#2b2b2b,#111);} .ca-2{background:linear-gradient(135deg,#333,#161616);}
.ca-3{background:linear-gradient(135deg,#3a3a3a,#1d1d1d);} .ca-4{background:linear-gradient(135deg,#2e2e2e,#121212);}
.ca-5{background:linear-gradient(135deg,#363636,#191919);} .ca-6{background:linear-gradient(135deg,#292929,#0e0e0e);}
.ca-7{background:linear-gradient(135deg,#313131,#151515);}
[data-mode="dark"] .ca-1{background:linear-gradient(135deg,#2563EB,#0f7a37);}
[data-mode="dark"] .ca-2{background:linear-gradient(135deg,#b5852a,#7a5916);}
[data-mode="dark"] .ca-3{background:linear-gradient(135deg,#516170,#2f3a44);}
[data-mode="dark"] .ca-4{background:linear-gradient(135deg,#6c4cc4,#42307d);}
[data-mode="dark"] .ca-5{background:linear-gradient(135deg,#2a7d7b,#185453);}
[data-mode="dark"] .ca-6{background:linear-gradient(135deg,#b8443c,#7d2a24);}
[data-mode="dark"] .ca-7{background:linear-gradient(135deg,#2f6f8f,#173543);}
/* Responsive 16:9 video embed (YouTube/Vimeo) */
.video-wrap { position: relative; width: 100%; max-width: 880px; margin: 0 auto; aspect-ratio: 16 / 9;
border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border);
box-shadow: var(--shadow-lg); background: #000; }
.video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Horizontal "shelf" carousel of cover cards */
.shelf { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory; }
.shelf::-webkit-scrollbar { height: 8px; }
.shelf::-webkit-scrollbar-thumb { background: var(--bg-tertiary); border-radius: 8px; }
.cover { flex: 0 0 200px; scroll-snap-align: start; text-decoration: none; color: inherit;
background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 14px; padding: 12px;
transition: transform .2s var(--ease), border-color .2s var(--ease); }
.cover:hover { transform: translateY(-3px); border-color: var(--accent); }
.cover-art { height: 150px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
color: #fff; overflow: hidden; }
.cover-art img { width: 100%; height: 100%; object-fit: cover; }
.cover h4 { font-family: var(--font-display); font-weight: 700; font-size: 1rem; margin: 12px 4px 2px; }
.cover p { color: var(--text-tertiary); font-size: 0.85rem; margin: 0 4px 6px; line-height: 1.4; }
/* Duotone image treatment (green/black) for future hero/section photos */
.duotone { background: var(--accent); border-radius: var(--radius-lg); overflow: hidden; }
.duotone img { width: 100%; display: block; mix-blend-mode: luminosity; opacity: .85;
filter: grayscale(1) contrast(1.05); }
/* ---------- Hero ---------- */
.hero {
position: relative;
padding: 110px 0 90px;
background: var(--gradient-hero);
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(var(--border) 1px, transparent 1px),
linear-gradient(90deg, var(--border) 1px, transparent 1px);
background-size: 60px 60px;
opacity: 0.35;
mask-image: radial-gradient(ellipse at center, #000 0%, transparent 75%);
-webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 75%);
pointer-events: none;
}
.hero .container { position: relative; }
.hero-grid {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 70px;
align-items: center;
}
.hero h1 {
font-weight: 400;
margin-bottom: 0.4em;
}
.hero h1 em {
font-style: italic;
font-weight: 300;
color: var(--accent);
}
.hero-sub {
font-size: 1.18rem;
color: var(--text-secondary);
max-width: 560px;
margin-bottom: 2rem;
}
.hero-cta {
display: flex;
gap: 14px;
flex-wrap: wrap;
}
.hero-visual {
position: relative;
border-radius: var(--radius-xl);
background: var(--bg-elevated);
border: 1px solid var(--border);
box-shadow: var(--shadow-lg);
padding: 22px;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 16px;
}
.hv-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 6px 14px;
border-bottom: 1px solid var(--border);
}
.hv-title {
font-family: var(--font-display);
font-size: 1.15rem;
font-weight: 500;
color: var(--text-primary);
letter-spacing: -0.01em;
}
.hv-stat {
background: var(--bg-secondary);
border-radius: var(--radius-md);
padding: 18px 20px;
}
.hv-stat-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.hv-stat-pct {
font-size: 0.82rem;
font-weight: 700;
color: var(--accent-strong);
}
[data-mode="dark"] .hv-stat-pct { color: var(--accent); }
.hv-stat-value {
font-family: var(--font-display);
font-size: 2.4rem;
font-weight: 400;
line-height: 1;
color: var(--text-primary);
margin-bottom: 12px;
}
.hv-stat-total {
font-size: 1.1rem;
color: var(--text-tertiary);
}
.hv-list {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
min-height: 0;
}
.hv-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 6px;
border-bottom: 1px solid var(--border);
animation: fadeSlide 0.6s var(--ease) backwards;
}
.hv-item:last-child { border-bottom: none; }
.hv-item:nth-child(1) { animation-delay: 0.2s; }
.hv-item:nth-child(2) { animation-delay: 0.35s; }
.hv-item:nth-child(3) { animation-delay: 0.5s; }
.hv-item:nth-child(4) { animation-delay: 0.65s; }
@keyframes fadeSlide {
from { opacity: 0; transform: translateX(-8px); }
to { opacity: 1; transform: translateX(0); }
}
.hv-item-title {
font-size: 0.95rem;
font-weight: 600;
color: var(--text-primary);
line-height: 1.3;
}
.hv-item-sub {
font-size: 0.78rem;
color: var(--text-tertiary);
margin-top: 2px;
}
.hv-foot {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 6px 4px;
border-top: 1px solid var(--border);
}
.hv-foot-value {
font-size: 0.85rem;
font-weight: 600;
color: var(--text-primary);
font-variant-numeric: tabular-nums;
}
.hv-label {
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-tertiary);
display: block;
}
.hv-value {
font-size: 0.95rem;
font-weight: 600;
color: var(--text-primary);
}
.hv-pill {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 5px 10px;
border-radius: 100px;
background: var(--accent-soft);
color: var(--accent-strong);
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
[data-mode="dark"] .hv-pill { color: var(--accent-strong); }
.hv-pill-green {
background: rgba(31, 138, 76, 0.12);
color: #1f8a4c;
}
[data-mode="dark"] .hv-pill-green {
background: rgba(92, 181, 120, 0.16);
color: #5cb578;
}
.hv-pill-amber {
background: rgba(182, 118, 17, 0.12);
color: #b67611;
}
[data-mode="dark"] .hv-pill-amber {
background: rgba(224, 169, 61, 0.16);
color: #e0a93d;
}
.hv-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: currentColor;
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.hv-bar {
height: 6px;
background: var(--bg-tertiary);
border-radius: 100px;
overflow: hidden;
}
.hv-bar-fill {
height: 100%;
background: var(--gradient-accent);
border-radius: 100px;
}
/* ---------- Sections ---------- */
.section-head {
max-width: 720px;
margin: 0 auto 60px;
text-align: center;
}
.section-head.left { margin-left: 0; text-align: left; }
.bg-soft { background: var(--bg-secondary); }
/* ---------- Feature Grid ---------- */
.feature-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.feature-card {
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 32px;
transition: all 0.3s var(--ease);
}
.feature-card:hover {
transform: translateY(-4px);
border-color: var(--accent);
box-shadow: var(--shadow-md);
}
.feature-icon {
width: 48px;
height: 48px;
border-radius: 12px;
background: var(--accent-soft);
color: var(--accent-strong);
display: grid;
place-items: center;
margin-bottom: 20px;
}
[data-mode="dark"] .feature-icon { color: var(--accent); }
.feature-card h3 { margin-bottom: 10px; }
.feature-card p { margin-bottom: 0; font-size: 0.95rem; }
/* ---------- Steps ---------- */
.steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
position: relative;
}
.step {
position: relative;
padding-top: 24px;
}
.step-num {
font-family: var(--font-display);
font-size: 3.2rem;
font-weight: 300;
color: var(--accent);
line-height: 1;
margin-bottom: 14px;
}
.step h3 { margin-bottom: 8px; font-size: 1.15rem; }
.step p { font-size: 0.92rem; margin-bottom: 0; }
/* ---------- Pricing ---------- */
.pricing-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-bottom: 48px;
}
.price-card {
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 36px 30px;
position: relative;
transition: all 0.3s var(--ease);
}
.price-card.featured {
border-color: var(--accent);
box-shadow: var(--shadow-md);
}
.price-card.featured::before {
content: 'Most Popular';
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: var(--accent-strong);
color: var(--text-inverse);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 6px 14px;
border-radius: 100px;
}
[data-mode="dark"] .price-card.featured::before {
background: var(--accent);
color: var(--text-inverse);
}
.price-tier { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.price-amount {
font-family: var(--font-display);
font-size: 3rem;
font-weight: 400;
color: var(--text-primary);
line-height: 1;
}
.price-amount sub { font-size: 0.9rem; color: var(--text-tertiary); font-weight: 400; letter-spacing: 0; }
.price-desc { color: var(--text-secondary); font-size: 0.95rem; margin: 14px 0 24px; }
.price-list {
list-style: none;
padding: 0;
margin: 0 0 28px;
}
.price-list li {
padding: 9px 0 9px 28px;
position: relative;
font-size: 0.92rem;
color: var(--text-secondary);
border-top: 1px dashed var(--border);
}
.price-list li:first-child { border-top: none; }
.price-list li::before {
content: '';
position: absolute;
left: 0; top: 16px;
width: 14px; height: 14px;
background: var(--accent-soft);
border-radius: 50%;
}
.price-list li::after {
content: '';
position: absolute;
left: 4px; top: 21px;
width: 6px; height: 3px;
border-left: 1.5px solid var(--accent-strong);
border-bottom: 1.5px solid var(--accent-strong);
transform: rotate(-45deg);
}
[data-mode="dark"] .price-list li::after { border-color: var(--accent); }
/* ---------- Table ---------- */
.table-wrap {
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.data-table {
width: 100%;
border-collapse: collapse;
font-size: 0.95rem;
}
.data-table thead {
background: var(--bg-secondary);
}
.data-table th {
text-align: left;
font-weight: 600;
font-size: 0.78rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-tertiary);
padding: 18px 24px;
border-bottom: 1px solid var(--border);
}
.data-table td {
padding: 18px 24px;
border-top: 1px solid var(--border);
color: var(--text-secondary);
}
.data-table tr:first-child td { border-top: none; }
.data-table td:first-child { color: var(--text-primary); font-weight: 500; }
.data-table .discount {
font-weight: 600;
color: var(--accent-strong);
}
[data-mode="dark"] .data-table .discount { color: var(--accent); }
/* ---------- CTA Strip ---------- */
.cta-strip {
background: var(--bg-inverse);
color: var(--text-inverse);
border-radius: var(--radius-xl);
padding: 64px;
text-align: center;
margin: 40px 0;
position: relative;
overflow: hidden;
}
.cta-strip::before {
content: '';
position: absolute;
top: -50%; right: -10%;
width: 500px; height: 500px;
background: var(--gradient-accent);
border-radius: 50%;
opacity: 0.15;
filter: blur(60px);
}
.cta-strip h2 { color: var(--text-inverse); position: relative; }
.cta-strip p { color: rgba(255, 255, 255, 0.7); position: relative; max-width: 560px; margin-left: auto; margin-right: auto; }
[data-mode="dark"] .cta-strip p { color: var(--text-inverse); }
.cta-strip .btn-primary {
background: #ffffff;
color: var(--text-inverse);
border-color: #ffffff;
position: relative;
}
[data-mode="dark"] .cta-strip .btn-primary {
background: var(--accent);
color: var(--text-inverse);
border-color: var(--accent);
}
/* ---------- FAQ ---------- */
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item {
border-bottom: 1px solid var(--border);
padding: 6px 0;
}
.faq-item summary {
cursor: pointer;
padding: 22px 0;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
font-family: var(--font-display);
font-size: 1.2rem;
font-weight: 500;
color: var(--text-primary);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: '+';
font-family: var(--font-body);
font-size: 1.6rem;
font-weight: 300;
color: var(--accent);
transition: transform 0.3s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding: 0 0 24px; max-width: 700px; }
/* ---------- Forms ---------- */
.form {
display: grid;
gap: 18px;
max-width: 580px;
}
.form-row { display: grid; gap: 6px; }
.form-row label {
font-size: 0.85rem;
font-weight: 600;
color: var(--text-primary);
letter-spacing: 0.02em;
}
.form-row input,
.form-row textarea,
.form-row select {
font-family: var(--font-body);
font-size: 0.95rem;
padding: 13px 16px;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-md);
color: var(--text-primary);
transition: border-color 0.2s var(--ease);
}
.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 4px var(--accent-soft);
}
.form-row textarea { resize: vertical; min-height: 130px; }
.form-help { font-size: 0.82rem; color: var(--text-tertiary); }
/* Spam honeypot (contact.html). Deliberately NOT display:none or
visibility:hidden — spam bots parse the DOM and skip fields hidden that way,
which is exactly the ones we want them to fill. Pushing it off-screen keeps
it "real" to a script while no sighted user can see it; the markup carries
aria-hidden and tabindex="-1" so screen-reader and keyboard users never reach
it either. Any submission with this field populated is a bot. */
.hp-field {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
/* WCAG 2.4.7: explicit visible focus for custom-styled interactive elements —
the browser default outline can be clipped/hard to see against these
pill/card shapes, so give keyboard users an unambiguous indicator. */
.btn:focus-visible,
.nav-links a:focus-visible,
.nav-group-btn:focus-visible,
.theme-toggle:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* ---------- Industry / Component cards ---------- */
.tile-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.tile {
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 28px;
transition: all 0.25s var(--ease);
}
.tile:hover {
transform: translateY(-3px);
border-color: var(--accent);
}
.tile h3 { font-size: 1.1rem; margin-bottom: 6px; }
.tile p { font-size: 0.93rem; margin: 0; }
/* ---------- Connect / Social ---------- */
.social-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
max-width: 760px;
margin: 0 auto;
}
.social-card {
display: flex;
align-items: center;
justify-content: space-between;
padding: 22px 26px;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
transition: all 0.25s var(--ease);
}
.social-card:hover {
border-color: var(--accent);
transform: translateX(4px);
color: var(--text-primary);
}
.social-left { display: flex; align-items: center; gap: 18px; }
.social-icon {
width: 48px; height: 48px;
border-radius: 12px;
background: var(--accent-soft);
display: grid;
place-items: center;
color: var(--accent-strong);
flex-shrink: 0;
}
[data-mode="dark"] .social-icon { color: var(--accent); }
.social-name { font-weight: 600; color: var(--text-primary); font-size: 1rem; }
.social-handle { font-size: 0.85rem; color: var(--text-tertiary); }
.social-arrow { color: var(--text-tertiary); transition: transform 0.2s var(--ease); }
.social-card:hover .social-arrow { transform: translateX(4px); color: var(--accent); }
/* ---------- Legal pages ---------- */
.legal-body { max-width: 780px; margin: 0 auto; }
.legal-body h2 { margin-top: 2.2em; font-size: 1.6rem; }
.legal-body h3 { margin-top: 1.8em; font-size: 1.15rem; }
.legal-body p, .legal-body li { color: var(--text-secondary); }
.legal-body ul { padding-left: 1.2em; }
.legal-meta { color: var(--text-tertiary); font-size: 0.9rem; margin-bottom: 2.5em; }
/* ---------- Auth pages ---------- */
.auth-wrap {
min-height: calc(100vh - var(--header-h));
display: grid;
place-items: center;
padding: 60px 24px;
background: var(--gradient-hero);
}
.auth-card {
width: 100%;
max-width: 460px;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 40px;
box-shadow: var(--shadow-lg);
}
.auth-card h1 { font-size: 1.9rem; margin-bottom: 8px; }
.auth-card .sub { color: var(--text-secondary); margin-bottom: 26px; }
.auth-card .btn { width: 100%; }
.auth-foot { margin-top: 22px; text-align: center; font-size: 0.92rem; color: var(--text-tertiary); }
.auth-status { min-height: 1.2em; margin: 0; }
.auth-status.error { color: var(--danger); font-weight: 600; }
.auth-status.success { color: var(--success); font-weight: 600; }
/* ---------- Footer ---------- */
.site-footer {
background: var(--bg-secondary);
border-top: 1px solid var(--border);
padding: 70px 0 30px;
margin-top: 80px;
}
.footer-grid {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1fr;
gap: 50px;
margin-bottom: 50px;
}
.footer-brand p {
font-size: 0.92rem;
margin-top: 14px;
max-width: 340px;
}
.footer-col h4 {
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-tertiary);
margin-bottom: 18px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { color: var(--text-secondary); font-size: 0.93rem; }
.footer-col a:hover { color: var(--accent); }
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 30px;
border-top: 1px solid var(--border);
font-size: 0.85rem;
color: var(--text-tertiary);
}
.footer-socials { display: flex; gap: 14px; }
.footer-socials a {
width: 34px; height: 34px;
border-radius: 50%;
background: var(--bg-elevated);
border: 1px solid var(--border);
display: grid; place-items: center;
color: var(--text-secondary);
}
.footer-socials a:hover { color: var(--accent); border-color: var(--accent); }
/* ---------- Utilities ---------- */
.text-center { text-align: center; }
.muted { color: var(--text-tertiary); }
.divider { height: 1px; background: var(--border); margin: 48px 0; border: none; }
.note {
padding: 18px 22px;
background: var(--bg-secondary);
border-left: 3px solid var(--accent);
border-radius: var(--radius-sm);
font-size: 0.92rem;
color: var(--text-secondary);
}
/* ---------- Ad consent banner ---------- */
.cft-consent-banner {
position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 3000;
max-width: 640px; margin: 0 auto;
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
padding: 16px 20px;
background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm);
box-shadow: var(--shadow-lg);
}
.cft-consent-banner p { margin: 0; font-size: 0.88rem; color: var(--text-secondary); }
.cft-consent-banner a { color: var(--accent); }
.cft-consent-actions { display: flex; gap: 8px; flex: 0 0 auto; }
/* ---------- Ad slot ---------- */
.cft-ad-slot { margin: 32px auto; text-align: center; }
.cft-ad-slot ins.adsbygoogle { display: block; }
/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.in { opacity: 1; transform: translateY(0); }
/* ---------- Responsive ---------- */
/* Collapse the header to a hamburger as soon as the full nav stops fitting —
e.g. a split-screen or otherwise narrow window on a laptop, not just phones.
The nav (brand + links + CTAs) needs ~1100px, so we collapse below 1024px. */
@media (max-width: 1024px) {
.nav-links { display: none; }
.nav-links.open {
display: flex;
position: absolute;
top: var(--header-h);
left: 0; right: 0;
flex-direction: column;
background: var(--bg-elevated);
border-bottom: 1px solid var(--border);
padding: 24px 28px;
gap: 18px;
}
.mobile-toggle { display: grid; place-items: center; }
/* Portal/demo pages carry extra header buttons (Sharing, Settings, Sign out)
that overflow a narrow window. Collapse them into the hamburger menu so the
header fits (main.js mirrors them into .nav-links). */
body:has(.app-main) .nav-actions .btn { display: none; }
.nav-links .mobile-action { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 16px; }
.nav-links .mobile-action ~ .mobile-action { border-top: 0; margin-top: 0; padding-top: 0; }
/* Dark mode: lift the open hamburger panel off the near-identical page bg. */
[data-mode="dark"] .nav-links.open {
background: #202020;
border-bottom: 1px solid var(--border-strong);
box-shadow: var(--shadow-md);
}
}
/* Dark mode: floating/pop menus (tools dropdown, tools rail) read as the same
color as the page (#181818 vs #121212). Give them a clearly elevated surface,
a stronger border, and a shadow so they stand out. */
[data-mode="dark"] .tools-menu,
[data-mode="dark"] .tools-rail {
background: #202020;
border-color: var(--border-strong);
box-shadow: var(--shadow-md);
}
/* Dark mode: the theme-chooser popup (top-right toggle) is built inline with
--bg-elevated, which reads almost the same as the page. Lift it onto a clearly
elevated surface with a stronger border so it doesn't blend in. !important is
needed because the element's background/border are set via inline style. */
[data-mode="dark"] #cft-theme-pop {
background: #202020 !important;
border-color: var(--border-strong) !important;
}
@media (max-width: 960px) {
.hero-grid { grid-template-columns: 1fr; }
.hero-visual { max-width: 500px; margin: 0 auto; }
.feature-grid, .pricing-grid, .tile-grid { grid-template-columns: 1fr 1fr; }
.steps { grid-template-columns: 1fr 1fr; gap: 40px; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
.social-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
section { padding: 70px 0; }
.container { padding: 0 20px; }
.feature-grid, .pricing-grid, .tile-grid { grid-template-columns: 1fr; }
.steps { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; }
.cta-strip { padding: 44px 24px; }
.footer-bottom { flex-direction: column; gap: 16px; }
.auth-card { padding: 28px; }
.hero { padding: 70px 0 60px; }
.hero-visual { padding: 18px; gap: 12px; }
.hv-stat { padding: 14px 16px; }
.hv-stat-value { font-size: 2rem; }
.hv-item { padding: 10px 4px; }
.hv-item-title { font-size: 0.9rem; }
.hv-item-sub { font-size: 0.75rem; }
}
/* ---- Phone header (<=640px) -------------------------------------------
Measured on the live site at 390px: the brand wrapped to THREE lines and
rendered 99px tall inside a 76px header, so "Capital" was clipped by the
top edge and the rest spilled below it. Separately, pages whose header has
only .nav-actions (settings, and the marketing pages) have no hamburger to
collapse into, so the buttons ran off-screen — settings.html measured 614px
wide in a 387px viewport, putting "Sign out" out of reach unless you
scrolled sideways. On the account page, on a phone, for a driver.
Fixes without restructuring any page: let the header grow instead of
clipping, keep the wordmark on one line at a smaller size, and allow the
action buttons to wrap onto a second row. Pages that DO have a hamburger
(dashboard) are unaffected — .nav-links is already display:none here. */
@media (max-width: 640px) {
.site-header { height: auto; min-height: var(--header-h); }
.nav {
padding: 10px 16px;
flex-wrap: wrap;
gap: 10px 12px;
}
.brand {
font-size: 1rem;
gap: 8px;
white-space: nowrap;
min-width: 0;
}
.brand-mark { width: 28px; height: 28px; border-radius: 7px; }
.nav-actions {
flex-wrap: wrap;
gap: 8px;
justify-content: flex-end;
min-width: 0;
}
/* Buttons that were sized for a desktop row need to stay tappable when they
wrap — 40px keeps them close to the 44px touch guidance. */
.nav-actions .btn-sm { padding: 9px 12px; min-height: 40px; }
}
/* Nothing should ever scroll the page sideways on a phone. If a wide element
slips in, clip it here rather than letting it drag the whole layout. */
@media (max-width: 640px) {
html, body { max-width: 100%; overflow-x: hidden; }
}
/* ---- Print: force ink-on-paper ---------------------------------------
The app is dark-themed, so without this the browser computes white text
on a #121212 background — and Chrome does not print background colours by
default, which yields a blank sheet (or a solid black ink-dump if the user
ticks "Background graphics"). These are the pages a fleet manager hands to
an auditor, an insurer or an accountant, so they have to print as black on
white regardless of the theme the screen is using.
labels.html already did this correctly; this generalises it. */
@media print {
html, body {
background: #fff !important;
color: #000 !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.app-main, .container, .panel, .card, .file, .report, section, main, article {
background: #fff !important;
color: #000 !important;
box-shadow: none !important;
}
h1, h2, h3, h4, h5, h6, p, td, th, li, span, div, strong, em, small, label {
color: #000 !important;
}
a { color: #000 !important; text-decoration: underline; }
table, th, td { border-color: #999 !important; }
th { background: #eee !important; }
.badge, .pill, .chip, .stat, .tile {
background: #fff !important;
color: #000 !important;
border: 1px solid #999 !important;
}
/* Chrome, mobile toggles, floating widgets and nav have no place on paper. */
.site-header, .site-footer, .report-actions, .back-link, .hc-launcher,
.hc-panel, .theme-toggle, .mobile-toggle, .set-nav, [data-mobile-toggle] {
display: none !important;
}
/* Collapsed accordion sections must print open, or the page prints empty. */
.panel.acc > .panel-body { display: block !important; }
@page { margin: 14mm; }
}
/* ---- Skip to content -------------------------------------------------
Every page opens with a nav of roughly fifteen links. Without this, a
keyboard or screen-reader user tabs through all of them before reaching
anything, on every page. Two pages had one; the rest did not.
Off-screen until focused, then it lands in the top-left like a real
control — never display:none, which would take it out of the tab order
entirely and defeat the point. */
.cft-skip {
position: absolute; left: -9999px; top: 0; z-index: 10000;
padding: 10px 16px; border-radius: 0 0 10px 0;
background: var(--accent); color: #06210f; font-weight: 700;
text-decoration: none;
}
.cft-skip:focus { left: 0; outline: 3px solid var(--text-primary); outline-offset: 2px; }
/* ===== Asset diagrams + flip-through (asset-diagrams.js) =====
Schematic machine drawings with numbered maintenance points, and three
panels a visitor flips between. Everything keys off the theme tokens so the
drawings work in all four schemes with no second asset. */
.dg { border:1px solid var(--border); border-radius:16px; background:var(--bg-elevated); overflow:hidden; }
.dg-head { padding:20px 22px 0; }
.dg-head h3 { margin:0 0 6px; font-size:1.1rem; }
.dg-head p { margin:0; font-size:.88rem; color:var(--text-secondary); line-height:1.55; max-width:62ch; }
.dg-tabs { display:flex; gap:4px; flex-wrap:wrap; padding:16px 22px 0; border-bottom:1px solid var(--border); }
.dg-tabs button { appearance:none; background:none; border:0; border-bottom:2px solid transparent;
padding:9px 14px; font:inherit; font-size:.86rem; font-weight:600; color:var(--text-secondary);
cursor:pointer; border-radius:8px 8px 0 0; }
.dg-tabs button:hover { color:var(--text-primary); }
.dg-tabs button[aria-selected="true"] { color:var(--accent); border-bottom-color:var(--accent); }
.dg-tabs button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.dg-panel { padding:20px 22px 24px; }
.dg-split { display:grid; grid-template-columns:minmax(280px,1.15fr) minmax(240px,1fr); gap:22px; align-items:start; }
@media (max-width:760px) { .dg-split { grid-template-columns:1fr; } }
.dg-svg { width:100%; height:auto; display:block; color:var(--text-secondary); }
.d-draw .d-body { fill:var(--bg-primary); stroke:currentColor; stroke-width:2.5; }
.d-draw .d-accent { fill:var(--accent-soft,rgba(29,185,84,.18)); stroke:var(--accent); stroke-width:2.5; }
.d-draw .d-glass { fill:var(--accent-soft,rgba(29,185,84,.18)); stroke:none; }
.d-draw .d-track { fill:none; stroke:currentColor; stroke-width:6; }
.d-draw .d-wheel { fill:var(--bg-primary); stroke:currentColor; stroke-width:3; }
.d-draw .d-hub { fill:currentColor; opacity:.55; }
.d-draw .d-line { fill:none; stroke:currentColor; stroke-width:2.5; }
.d-draw .d-fork { fill:none; stroke:currentColor; stroke-width:3.5; stroke-linecap:round; }
.d-draw .d-chain { fill:none; stroke:currentColor; stroke-width:2; stroke-dasharray:5 4; }
.d-draw .d-ground { fill:none; stroke:currentColor; stroke-width:2; opacity:.25; }
.d-spot circle { fill:var(--bg-elevated); stroke:var(--accent); stroke-width:2.5; transition:fill .12s; }
.d-spot text { font-size:12px; font-weight:800; fill:var(--accent); }
.d-spot.is-lit circle { fill:var(--accent); }
.d-spot.is-lit text { fill:var(--bg-elevated); }
.dg-key { list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.dg-key li { display:grid; grid-template-columns:24px 1fr auto; gap:10px; align-items:baseline;
padding:7px 8px; border-radius:8px; font-size:.86rem; }
.dg-key li.is-lit { background:var(--accent-soft,rgba(29,185,84,.12)); }
.dg-n { display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%;
border:2px solid var(--accent); color:var(--accent); font-size:.72rem; font-weight:800; }
.dg-name { color:var(--text-primary); }
.dg-fluid { display:inline-block; margin-left:7px; font-style:normal; font-size:.68rem; font-weight:700;
letter-spacing:.03em; text-transform:uppercase; color:var(--accent); }
.dg-int { color:var(--text-tertiary); font-size:.8rem; white-space:nowrap; }
.dg-note { margin:0 0 14px; font-size:.86rem; color:var(--text-secondary); line-height:1.55; max-width:70ch; }
.dg-cats { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.dg-cat h4 { margin:0 0 6px; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-tertiary); }
.dg-cat ul { list-style:none; margin:0; padding:0; display:grid; gap:3px; }
.dg-cat li { display:flex; justify-content:space-between; gap:12px; font-size:.85rem; }
.dg-cat li b { color:var(--text-tertiary); font-weight:600; white-space:nowrap; }
.dg-due { list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.dg-due li { display:grid; grid-template-columns:minmax(120px,1.3fr) minmax(70px,1fr) 44px auto;
gap:12px; align-items:center; font-size:.86rem; }
@media (max-width:620px) { .dg-due li { grid-template-columns:1fr auto; } .dg-due .dg-bar { grid-column:1/-1; } }
.dg-bar { display:block; height:7px; border-radius:99px; background:var(--border); overflow:hidden; }
.dg-bar i { display:block; height:100%; border-radius:99px; background:var(--accent); }
.dg-due li.is-soon .dg-bar i { background:#e0a800; }
.dg-due li.is-over .dg-bar i { background:var(--danger,#c62828); }
.dg-pct { font-variant-numeric:tabular-nums; font-weight:700; font-size:.82rem; color:var(--text-secondary); }
/* ===== try.html: the two doors (customer vs referral partner) ===== */
.who-doors { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; }
.who-door { display:flex; flex-direction:column; gap:5px; padding:16px 18px; border:1px solid var(--border);
border-radius:14px; background:var(--bg-elevated); text-decoration:none; min-height:44px; }
.who-door:hover, .who-door:focus-visible { border-color:var(--accent); }
.who-door strong { color:var(--text-primary); font-size:1rem; }
.who-door span { color:var(--text-secondary); font-size:.86rem; line-height:1.5; }
/* try.html type tiles: the chosen one is marked, not shouted. A solid fill on
a tile nobody tapped read as "we have decided you own a truck". */
.try-tiles .btn.is-picked { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent);
background:var(--accent-soft, rgba(29,185,84,.12)); }
/* try.html "How this works": one part's service life as a bar, your meter as a
position on it, and the window where we speak up. Theme tokens only. */
.hiw { width:100%; height:auto; display:block; color:var(--text-secondary); }
.hiw-track { fill:var(--border); }
.hiw-used { fill:var(--text-tertiary); opacity:.55; }
.hiw-warn { fill:var(--accent); opacity:.30; }
.hiw-mark { stroke:var(--accent); stroke-width:2.5; }
.hiw-dot { fill:var(--accent); }
.hiw-lead { fill:none; stroke:currentColor; stroke-width:1.5; opacity:.6; }
.hiw-cap { fill:var(--text-tertiary); font-size:11px; }
.hiw-lab { fill:var(--text-secondary); font-size:12px; font-weight:600; }
.hiw-key { list-style:none; margin:10px 0 0; padding:0; display:grid; gap:6px; }
.hiw-key li { display:flex; gap:9px; align-items:flex-start; font-size:.84rem;
color:var(--text-secondary); line-height:1.5; }
.hiw-sw { flex:none; width:14px; height:14px; border-radius:4px; margin-top:2px; }
.hiw-sw-dot { border-radius:50%; background:var(--accent); }
.hiw-sw-warn { background:var(--accent); opacity:.30; }
/* try.html: four short screens instead of one long scroll. */
.try-screen[hidden] { display:none; }
.try-steps { list-style:none; display:flex; gap:7px; justify-content:center;
margin:0 0 18px; padding:0; }
.try-steps li { width:7px; height:7px; border-radius:50%; background:var(--border); }
.try-steps li.done { background:var(--text-tertiary); }
.try-steps li.on { background:var(--accent); width:22px; border-radius:99px; }
.try-nav { display:flex; flex-direction:column; gap:9px; margin-top:18px; }
.try-nav .btn { width:100%; }
@media (min-width:560px) { .try-nav { flex-direction:row; } .try-nav .btn { width:auto; flex:1; } }
/* try.html picker: names, not explanations. Tiles are a single line each, so
nine of them fit on a phone without a card, a label or a scroll. */
.try-tiles .btn { height:auto; min-height:52px; padding:14px 12px; font-size:1rem;
font-weight:600; text-align:center; line-height:1.2; white-space:normal; }
/* ---------------------------------------------------------------------------
* ASK-FOR-MORE
*
* The pattern try.html's results screen has always used for "How we worked
* these numbers out": the elaboration is on the page, closed, and opens when
* somebody wants it. Someone who wants the detail asks for it; someone who does
* not never scrolls past it.
*
* WHAT BELONGS IN ONE. Elaboration — the arithmetic behind a figure, the
* mechanics behind a rule, the list behind a category. Detail that makes an
* answer trustworthy to the few who check.
*
* WHAT DOES NOT. Anything that changes what a person pays, agrees to, or gets.
* A price, a date a price changes, a limit, a consent. Hiding those is not
* tidying, it is burying — so pricing.html keeps the Oct 1 step in the open and
* puts only the mechanics of rate-stamping behind a control.
*
* and are used rather than a scripted toggle so this works
* with JavaScript off, is keyboard-operable and is announced correctly, all
* without a line of code.
* ------------------------------------------------------------------------- */
details.more {
margin: 14px 0 0; padding: 11px 14px;
border: 1px solid var(--border); border-radius: var(--radius-md);
background: var(--bg-secondary);
}
details.more > summary {
cursor: pointer; font-size: .86rem; font-weight: 600;
color: var(--text-secondary); list-style-position: inside;
}
details.more > summary:hover { color: var(--accent); }
details.more > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
details.more > :not(summary) {
margin-top: 10px; font-size: .84rem; line-height: 1.6; color: var(--text-secondary);
}
details.more ul { margin: 8px 0 0; padding-left: 20px; }
details.more li { margin: 0 0 4px; }