/* base.css — what EVERY marketing page needs.
   ────────────────────────────────────────────────────────────────────────
   Loaded by index, privacy and terms, immediately after header.css, which is
   exactly where the old inline `<style id="theme-merge">` block sat — so the
   cascade is unchanged. That position is load-bearing: header.css scopes
   `.ldh .ld-pill-primary` specifically to outrank the one-class rule below,
   and says so in its own comment.

   WHY THIS FILE EXISTS. The theme tokens used to be pasted into index,
   privacy and terms as three inline copies, and they had already DRIFTED —
   privacy and terms still carried `--hero-bg:#000` and flat rgba scrims long
   after index moved to `var(--background)` and `color-mix()`. One home now.

   ⚠ DO NOT put anything here into header.css or footer.css. Those are
   GENERATED: `web/scripts/sync-header.mjs` and `sync-footer.mjs` copy
   `Branding/Website/shared/*.css` into BOTH this site and the planner
   (`web/src/theme/header.css`, `web/src/components/SiteFooter.css`). Anything
   added there lands in the planner too — which is how a scrim once leaked
   into the trip replay. This file is marketing-only and reaches nothing else.
*/

/* ── color-scheme as a CSS PROPERTY, not just a meta tag (2026-08-31) ─────
   The meta `<meta name="color-scheme" content="light dark">` states what the
   page SUPPORTS. This states what it currently IS, and the second is what
   Safari commits its chrome to. Without it the marketing pages computed
   `color-scheme: normal` while the planner computed `light` / `dark`, and
   that was the whole difference between a bar that matched and a black one:
   correct `theme-color` plus a correct canvas still left the chrome
   following the SYSTEM appearance rather than the resolved theme.

   Keyed on `data-theme` rather than a media query on purpose. These pages
   carry an explicit Auto/Light/Dark toggle, so the resolved theme is the
   bootstrap's answer, not the OS's. Mirrors `:root[data-theme=...]` in the
   planner's `theme/generated.css`, which is the copy that already worked. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }


html[data-theme="light"]{--font-size:16px;--background:#fff;--foreground:#0a0a0c;--card:#f4f4f6;--card-foreground:#0a0a0c;--popover:#f4f4f6;--popover-foreground:#0a0a0c;--primary:#fe8d2a;--primary-foreground:#fff;--secondary:#f4f4f6;--secondary-foreground:#0a0a0c;--muted:#f4f4f6;--muted-foreground:#0009;--dim:#0000006b;--accent:#fe8d2a;--accent-foreground:#fff;--destructive:#d4183d;--destructive-foreground:#fff;--border:#00000014;--input:transparent;--input-background:#f4f4f6;--switch-background:#cbced4;--header-bg:#ffffffd9;--font-weight-medium:500;--font-weight-normal:400;--ring:#fe8d2a;--chart-1:oklch(64.6% .222 41.116);--chart-2:oklch(60% .118 184.704);--chart-3:oklch(39.8% .07 227.392);--chart-4:oklch(82.8% .189 84.429);--chart-5:oklch(76.9% .188 70.08);--radius:.125rem;--sidebar:#f4f4f6;--sidebar-foreground:#0a0a0c;--sidebar-primary:#fe8d2a;--sidebar-primary-foreground:#fff;--sidebar-accent:#f4f4f6;--sidebar-accent-foreground:#0a0a0c;--sidebar-border:#00000014;--sidebar-ring:#fe8d2a}
:root{--hamburger:#fff}
html[data-theme="light"]{--hamburger:#0a0a0c}
/* Each selector's floor is ITS OWN gutter, not a shared 24px.
   The first cut used one rule for all three, which quietly re-gutted the
   header on EVERY viewport: `.ldh-in` is `0 var(--topbar-pad-end) 0
   var(--topbar-pad-start)` — 22px leading, 18px trailing — so a 24px floor
   widened both, notch or no notch. A safe-area floor must never be able to
   change a layout that has no insets (adversarial review, 2026-08-17).
   `.ldf-in` really is 24px horizontal, and the content column really is
   px-6, so those two keep 24. */
@supports (padding: max(0px)) {
 .max-w-7xl,.ldf-in{
  padding-left:max(24px,env(safe-area-inset-left));
  padding-right:max(24px,env(safe-area-inset-right))}
 .ldh-in{
  padding-left:max(var(--topbar-pad-start),env(safe-area-inset-left));
  padding-right:max(var(--topbar-pad-end),env(safe-area-inset-right))}
}
.hamburger-line{background:var(--hamburger)}
/* Primary pill — matches the planner's .segmented-chip--primary exactly
   (13px sentence case, tight tracking, 8×16 padding, brand-glow shadow).
   Was 11px/0.18em/uppercase until 2026-08-20; the size and the tracking were
   a matched pair built FOR caps, so both moved when the caps went. */
.ld-pill-primary{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px;border-radius:999px;font-size:13px;font-weight:600;letter-spacing:-0.01em;color:#fff;background:linear-gradient(90deg,#fe8d2a,#f73b41);box-shadow:0 2px 8px color-mix(in srgb,#f73b41 30%,transparent);font-family:Inter,-apple-system,"SF Pro Display","Helvetica Neue",Arial,sans-serif;transition:filter .15s ease,box-shadow .15s ease}
.ld-pill-primary:hover{filter:brightness(1.08) saturate(1.03);box-shadow:0 4px 14px color-mix(in srgb,#f73b41 38%,transparent)}
/* Planner-parity nav + pills. Nav links paint the brand gradient as
   text on hover (matches the planner's .navLink); secondary pills use an
   INSET hairline (never a border — 1px borders rasterise unevenly on a
   999px radius) and fill with the brand gradient on hover, the same
   two-tier chip language as the planner's .segmented-chip. */
.ld-navlink{font-family:Inter,-apple-system,"SF Pro Display","Helvetica Neue",Arial,sans-serif;transition:color .15s ease,background .15s ease}
.ld-navlink:hover{background:linear-gradient(90deg,#fe8d2a,#f73b41);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.ld-pill{border-radius:999px !important;box-shadow:inset 0 0 0 1px var(--border);transition:box-shadow .18s ease,background .18s ease}
.ld-pill:hover{background:linear-gradient(90deg,#fe8d2a,#f73b41);box-shadow:inset 0 0 0 1px transparent,0 4px 14px rgba(247,59,65,.30)}
.ld-pill:hover p,.ld-pill:hover svg{color:#fff !important}

/* ── FLAT BY DEFAULT (2026-08-31) ─────────────────────────────────────────
   Matches the planner, where flat is now the default and gradient is a
   choice. These pages have no toggle, so this is simply how they look.

   WHAT STAYS GRADIENT: large display text. The hero accents ("better
   together.", "Everybody stops.") carry their ramp as an INLINE style on the
   span, so nothing here touches them and they keep it by construction. A
   headline in the gradient is the brand showing off and it is where the ramp
   reads; the same ramp on a nav link or a 20px glyph is just a muddy orange.

   WHAT GOES FLAT: buttons, chips, hovers, and the mark.

   Appended at the END of base.css deliberately: these override rules that
   appear earlier in this same file and in header.css, and at equal
   specificity the later rule wins. */

/* header.css paints its primary pill with `var(--accent-gradient, <ramp>)`
   and marketing never defined the token, so it always took the fallback.
   Defining it flat here is the whole fix for that file, with no edit to a
   synced copy. #FA6435 is the midpoint of #FE8D2A and #F73B41, the same
   arithmetic `AppTheme.mix` and the planner's `color-mix` use. */
:root {
    --accent-gradient: linear-gradient(90deg, #FA6435, #FA6435);
}

/* `background-image`, NOT the `background` shorthand.
   
   The shorthand resets `background-clip` to `border-box`, and `.ld-navlink`
   paints its TEXT by clipping a gradient to the glyphs with a transparent
   text fill. Overriding with the shorthand therefore un-clipped it: the flat
   colour filled the whole box and the label disappeared into it, so a hovered
   nav link rendered as a solid orange slab (reported 2026-08-31). Setting only
   the image leaves the clip alone.

   The two pills have no clip to lose, but they use the same property for the
   same reason: one rule, one behaviour, and nothing to get wrong if a third
   selector joins them. */
.ld-pill-primary,
.ld-pill:hover,
.ld-navlink:hover {
    background-image: linear-gradient(90deg, #FA6435, #FA6435);
}

/* The LetsDrive mark, header (`ld-*`) and footer (`ldf-*`). Each pair
   collapses onto its TOP stop rather than a midpoint, matching the planner:
   the top is the brand orange people recognise, where a midpoint is a duller
   halfway colour that reads as neither end. CSS beats the SVG's presentation
   attributes, so the markup is untouched. */
/* All three onto the SAME #FA6435 the chrome above uses. The first pass gave
   each pair its own top stop, which left the mark a different orange from every
   button beside it. The app settles it: a flat mark there is `solidColor`, the
   ramp's midpoint, which is this. */
#ld-c stop, #ldf-c stop,
#ld-b stop, #ldf-b stop,
#ld-s stop, #ldf-s stop { stop-color: #FA6435; }