/* Generated by build-css.sh. Do not edit: change resources/css/ and rebuild. */

/* ==== resources/css/tokens/fonts.css ==== */
/* Fleet Track webfonts: SELF-HOSTED build.
   Adapted from the design system's tokens/fonts.css. The DS version @imports Google Fonts
   so its specimen cards render; the DS README states production self-hosts instead, so the
   remote @import is replaced with the local @font-face rules below. The --font-* variables
   are byte-identical to the design system's.

   Subsets: latin + latin-ext. latin-ext carries the macrons used in te reo Maori
   (Whangarei/Whangārei, Otautahi/Ōtautahi), so it is not optional for NZ copy.

   Montserrat ships as a VARIABLE font: one file per subset covers weights 500-700.
   Poppins ships as static instances, one file per weight.

   The logo wordmark is Prototype Regular, a licensed display face we have no webfont for;
   the logo always ships as artwork (assets/brand/*.png) and Montserrat stands in.
   Flagged substitution: Prototype -> Montserrat. */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('/fonts/montserrat-var-latin.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('/fonts/montserrat-var-latin-ext.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/poppins-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/poppins-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/poppins-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/poppins-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/poppins-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/poppins-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/poppins-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/poppins-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/poppins-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/poppins-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --font-heading: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Logo / display lockups. Real face is Prototype Regular; Montserrat stands in. */
  --font-logo: 'Montserrat', 'Prototype', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', 'Menlo', monospace;
}

/* ==== resources/css/tokens/colors.css ==== */
/* Fleet Track colour system.
   Source of truth: the AI Assistant + Compliance portal theme (@theme tokens, shipped
   live) and the printed Brand Guidelines. Mobile app uses a slightly brighter orange
   (#f57c00) for buttons; both are kept. No vendor names, no invented hues. */

:root {
  /* ---- Brand core ---- */
  --ft-orange: #f26a25;        /* primary brand orange (portal/web, logo "TRACK") */
  --ft-orange-bright: #f57c00; /* mobile primary, button fills */
  --ft-orange-soft: #fde9dd;   /* tint: hover beds, plate chips, soft fills */
  --ft-amber: #fbc02d;         /* accent yellow (gradient end, highlights) */
  --ft-rust: #ac3824;          /* deep accent (logo gradient dark stop) */

  /* ---- Neutrals ---- */
  --ft-slate: #394152;   /* panel: headings, dark UI, strong text */
  --ft-ink: #3d4351;     /* body text */
  --ft-gray: #58595b;    /* logo wordmark "FLEET" grey */
  --ft-muted: #8a8f99;   /* secondary / meta text, inactive icons */
  --ft-line: #e4e4e7;    /* hairline borders, dividers */
  --ft-bg: #f0f1f4;      /* app / page background */
  --ft-surface: #ffffff; /* cards, sheets */
  --ft-surface-2: #f7f7f8; /* zebra rows, table headers, code beds */
  --ft-dark-bg: #212121; /* mobile dark-mode background */

  /* ---- Status semantics (shared across web + mobile) ---- */
  --ft-good: #43a047;    /* current / pass / on-track (green) */
  --ft-warn: #fbc02d;    /* expiring soon / running low (amber) */
  --ft-warn-text: #d18700; /* readable amber text on white */
  --ft-bad: #e53935;     /* expired / overdue / fail (red) */

  /* ---- Gradients ---- */
  --ft-gradient-primary: linear-gradient(135deg, #f57c00 0%, #fbc02d 100%); /* @kind color */ /* mobile hero/brand */
  --ft-gradient-logo: linear-gradient(180deg, #f26a24 0%, #ac3824 100%);    /* @kind color */ /* logo tail */

  /* ============================================================
     Semantic aliases. Components reference THESE (they mirror the
     names used in the live codebase's Tailwind @theme).
     ============================================================ */
  --color-brand: var(--ft-orange);
  --color-brand-bright: var(--ft-orange-bright);
  --color-brand-soft: var(--ft-orange-soft);
  --color-accent: var(--ft-amber);
  --color-panel: var(--ft-slate);
  --color-ink: var(--ft-ink);
  --color-muted: var(--ft-muted);
  --color-line: var(--ft-line);
  --color-bg: var(--ft-bg);
  --color-surface: var(--ft-surface);
  --color-surface-2: var(--ft-surface-2);
  --color-good: var(--ft-good);
  --color-warn: var(--ft-warn);
  --color-warn-text: var(--ft-warn-text);
  --color-bad: var(--ft-bad);

  /* Text roles */
  --text-heading: var(--ft-slate);
  --text-body: var(--ft-ink);
  --text-muted: var(--ft-muted);
  --text-on-brand: #ffffff;
}

/* ==== resources/css/tokens/typography.css ==== */
/* Fleet Track typography scale.
   Headings: Montserrat 600/700. Body + UI: Poppins 400/500. The product runs at a
   compact, dense scale (portal embed) — body text is 14px, meta 12px, big metrics 24px.
   Sizes mirror the Tailwind classes used live (text-sm, text-xs, text-lg, text-2xl). */

:root {
  /* Family roles (declared in fonts.css, re-exported as semantic type tokens) */
  --type-heading: var(--font-heading);
  --type-body: var(--font-body);

  /* Font sizes */
  --text-2xs: 0.625rem;  /* 10px - footnotes, legal */
  --text-xs: 0.6875rem;  /* 11px - meta, table headers */
  --text-sm: 0.75rem;    /* 12px - secondary, captions */
  --text-base: 0.875rem; /* 14px - body default */
  --text-md: 1rem;       /* 16px - mobile inputs/body */
  --text-lg: 1.125rem;   /* 18px - section + app titles */
  --text-xl: 1.25rem;    /* 20px - mobile app bar titles */
  --text-2xl: 1.5rem;    /* 24px - widget metrics */
  --text-3xl: 2rem;      /* 32px - marketing / display */
  --text-4xl: 2.75rem;   /* 44px - hero display */

  /* Weights */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Line heights */
  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.55;

  /* Letter spacing */
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;  /* uppercase plate chips, eyebrow labels */
}

/* ==== resources/css/tokens/spacing.css ==== */
/* Fleet Track spacing, radius, shadow and layout tokens.
   4px base grid (matches the live Tailwind spacing scale). Cards are rounded-lg/xl with
   a hairline grey-200 border and a very subtle shadow — the portal look is flat, light,
   and airy, never heavy drop shadows. Mobile uses chunkier radii (15-23px) on sheets and
   buttons. */

:root {
  /* Spacing (4px grid) */
  --space-0: 0;
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.25rem;  /* 20 */
  --space-6: 1.5rem;   /* 24 */
  --space-8: 2rem;     /* 32 */
  --space-10: 2.5rem;  /* 40 */
  --space-12: 3rem;    /* 48 */
  --space-16: 4rem;    /* 64 */

  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;    /* rounded-lg: buttons, inputs, list rows */
  --radius-lg: 12px;   /* rounded-xl: cards, widgets */
  --radius-xl: 16px;   /* mobile buttons */
  --radius-2xl: 23px;  /* mobile sheets / login card */
  --radius-pill: 9999px; /* status pills, chips, avatars */

  /* Shadows — light and subtle, the portal aesthetic */
  --shadow-xs: 0 1px 2px 0 rgba(20, 24, 33, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(20, 24, 33, 0.08);
  --shadow-md: 0 4px 12px -2px rgba(20, 24, 33, 0.10);
  --shadow-lg: 0 10px 24px -6px rgba(20, 24, 33, 0.14);
  --shadow-pop: 0 8px 28px -4px rgba(20, 24, 33, 0.18); /* dropdowns, dialogs, FAB */

  /* Borders */
  --border-hairline: 1px solid var(--ft-line);

  /* Layout */
  --container-max: 64rem;   /* 1024 - compliance dashboard max-w-5xl-ish */
  --container-chat: 48rem;  /* 768 - chat thread max width */
  --tap-target: 44px;       /* minimum mobile hit target */
  --transition-fast: 120ms ease; /* @kind other */
  --transition-base: 180ms ease; /* @kind other */
}

/* ==== resources/css/tokens/site.css ==== */
/* Fleet Compliance site tokens.

   The semantic layer between the Fleet Track design system primitives (colors, typography,
   spacing, fonts) and the site's components. Components reference ONLY these roles and the
   DS primitives; every literal value on the site lives in this file or the DS token files.

   Rules this file encodes (enforced by tests/Feature/DesignSystemTest.php):
   - One corner radius for every box, control and surface: --radius.
     --radius-round is the fully-round shape for pills and dots, not a second radius.
   - Type is sized by role, never per element: --font-size-{role}.
   - Two families only: --font-heading (Montserrat) and --font-body (Poppins).
   - Colour is derived from DS hues. No invented hues: tints are color-mix() of DS colours. */

:root {
  /* ---------------------------------------------------------------- shape */

  /* 8px. The smallest element on the site (the compact plate chip) sets the ceiling: a larger
     radius would turn it into a pill. */
  --radius: var(--radius-md);
  --radius-round: var(--radius-pill);

  --border-width: 1px;
  --border-width-strong: 2px;
  --border: var(--border-width) solid var(--border-color);

  /* ----------------------------------------------------------------- type */

  --font-size-display: clamp(var(--text-3xl), 5vw, var(--text-4xl)); /* the one h1 per page */
  --font-size-title: var(--text-3xl);        /* section headings (h2) */
  --font-size-subtitle: var(--text-2xl);     /* headings that lead a panel inside a section */
  --font-size-figure: 2.25rem;               /* headline numbers: prices, penalties, scores (design 34 to 40px) */
  --font-size-stat: var(--text-2xl);         /* numbers inside compact data cards */
  --font-size-heading: var(--text-lg);       /* card, step and modal headings (h3) */
  --font-size-subheading: var(--text-md);    /* minor headings, plan names */
  --font-size-lede: var(--text-md);          /* intro paragraph under a title */
  --font-size-body: var(--text-base);        /* running copy, controls */
  --font-size-small: var(--text-sm);         /* captions, pills, helper text */
  --font-size-meta: var(--text-xs);          /* fine print, counters, labels on mocks */

  --font-weight-display: var(--weight-bold);
  --font-weight-title: var(--weight-bold);
  --font-weight-figure: var(--weight-bold);
  --font-weight-heading: var(--weight-semibold);
  --font-weight-label: var(--weight-semibold);
  --font-weight-strong: var(--weight-medium);
  --font-weight-body: var(--weight-regular);

  --tracking-display: -0.02em;
  --tracking-caps: 0.08em;

  --measure: 42em; /* comfortable line length for prose */

  /* --------------------------------------------------------------- colour */

  --text-accent: var(--color-brand);
  --text-link-hover: var(--ft-rust);

  --surface-page: var(--color-bg);
  --surface-base: var(--color-surface);
  --surface: var(--color-surface);
  --surface-subtle: var(--color-surface-2);
  --surface-accent: var(--color-brand-soft);
  --border-color: var(--color-line);
  --border-color-accent: var(--color-brand);

  --inverse-bg: var(--ft-slate);
  --inverse-text: var(--text-on-brand);
  --inverse-text-strong: color-mix(in srgb, var(--text-on-brand) 88%, transparent);
  --inverse-text-muted: color-mix(in srgb, var(--text-on-brand) 72%, transparent);
  --inverse-surface: color-mix(in srgb, var(--text-on-brand) 8%, transparent);
  --inverse-border: color-mix(in srgb, var(--text-on-brand) 16%, transparent);
  --inverse-border-strong: color-mix(in srgb, var(--text-on-brand) 35%, transparent);

  /* Footer grounds, tuned by the designer so the footer text clears 4.5:1. */
  --footer-bg: #1f2124;
  --footer-chin-bg: #54595f;

  --status-good: var(--color-good);
  --status-good-soft: color-mix(in srgb, var(--color-good) 12%, var(--color-surface));
  --status-good-text: color-mix(in srgb, var(--color-good) 70%, black);
  --status-warn: var(--color-warn);
  --status-warn-soft: color-mix(in srgb, var(--color-warn) 16%, var(--color-surface));
  --status-warn-text: var(--color-warn-text);
  --status-bad: var(--color-bad);
  --status-bad-soft: color-mix(in srgb, var(--color-bad) 10%, var(--color-surface));
  --status-bad-text: color-mix(in srgb, var(--color-bad) 80%, black);
  --status-unknown-soft: var(--color-surface-2);
  --status-unknown-text: var(--color-muted);

  --overlay: color-mix(in srgb, var(--ft-dark-bg) 60%, transparent);
  --header-bg: color-mix(in srgb, var(--color-surface) 96%, transparent);
  --hero-scrim: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ft-dark-bg) 55%, transparent) 0%,
    color-mix(in srgb, var(--ft-dark-bg) 35%, transparent) 40%,
    color-mix(in srgb, var(--ft-dark-bg) 88%, transparent) 100%
  );
  --hero-photo-opacity: 0.55;

  --focus-ring: var(--border-width-strong) solid var(--color-brand);
  --focus-ring-offset: var(--border-width-strong);

  /* ----------------------------------------------------------- elevation */

  --elevation-card: var(--shadow-sm);
  --elevation-raised: var(--shadow-md);
  --elevation-overlay: var(--shadow-pop);

  /* -------------------------------------------------------------- spacing */

  --gutter: var(--space-6);
  --section-space: var(--space-16);
  --band-space: var(--space-12);
  --card-padding: var(--space-6);
  --control-padding-x: var(--space-4);

  /* --------------------------------------------------------------- sizing */

  --container: 70rem;

  --grid-min-sm: min(100%, 10rem);    /* counters */
  --grid-min-md: min(100%, 15rem);    /* stats, features, steps */
  --grid-min-lg: min(100%, 17.5rem);  /* plans, splits, panels */

  --control-height: var(--tap-target);
  --control-height-sm: var(--space-8);
  --control-height-lg: var(--space-12);
  --textarea-min-height: 6rem;

  --icon-size: var(--space-5);
  --icon-size-sm: var(--space-4);
  --brand-mark-size: var(--space-8);
  --logo-height: var(--space-8);
  --logo-height-lg: 3.625rem; /* footer lockup, 58px per the design */
  --dot-size: var(--space-2);
  --plate-padding: 0.125rem 0.375rem; /* DS PlateChip: 2px 6px */
  --gauge-width: 12.5rem;
  --header-rule-height: var(--space-1);
  --modal-width: 30rem;
  --modal-max-height: 90vh;

  /* Distance the sticky header covers; anchors and scripted scrolls clear it. */
  --scroll-offset: 5rem;

  /* --------------------------------------------------------------- motion */

  --blur-header: 8px;
  --blur-overlay: 3px;
  --rotate-open: 45deg;
  --press-offset: 1px;

  /* -------------------------------------------------------------- stacking */

  --z-header: 30;
  --z-modal: 60;
  --z-modal-top: 70;
  --z-skip-link: 100;
}

/* ------------------------------------------------------------------ tones

   A tone re-points the role tokens for everything inside it, so every component works on a
   dark ground without a dark variant of its own. */

.ft-tone-inverse {
  --text-heading: var(--inverse-text);
  --text-body: var(--inverse-text-strong);
  --text-muted: var(--inverse-text-muted);
  --surface-base: var(--inverse-bg);
  --surface: var(--inverse-surface);
  --surface-subtle: var(--inverse-surface);
  --border-color: var(--inverse-border);
  --border: var(--border-width) solid var(--border-color); /* re-resolve against this tone */
  --elevation-card: none;
}

.ft-tone-footer {
  --surface-base: var(--footer-bg);
}

.ft-tone-footer-chin {
  --surface-base: var(--footer-chin-bg);
}

/* Restores the light roles for a light element placed inside a dark tone (the rego check
   card sits on the hero photo). */
.ft-tone-default {
  --text-heading: var(--ft-slate);
  --text-body: var(--ft-ink);
  --text-muted: var(--ft-muted);
  --surface-base: var(--color-surface);
  --surface: var(--color-surface);
  --surface-subtle: var(--color-surface-2);
  --border-color: var(--color-line);
  --border: var(--border-width) solid var(--border-color);
  --elevation-card: var(--shadow-sm);
}

/* ==== resources/css/base.css ==== */
/* Base: element defaults and the type roles.
   Values come only from tokens. Vertical rhythm is set by layout stacks, not by margins on
   elements, so every element starts with a zero margin. */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-padding-top: var(--scroll-offset);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-body);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol, fieldset, legend {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

img, svg { display: block; max-width: 100%; }

button, input, textarea, select { font: inherit; color: inherit; }

fieldset { border: 0; }

[hidden] { display: none !important; }

a {
  color: var(--text-accent);
  text-decoration: none;
  transition: color var(--transition-base);
}
a:hover { color: var(--text-link-hover); }

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius);
}

/* ---------------------------------------------------------------- type roles

   Every piece of text on the site is one of these. Headings default to the matching role so
   semantic markup is styled correctly without extra classes. */

.ft-type-display, h1 {
  font-family: var(--font-heading);
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--text-heading);
  text-wrap: balance;
}

.ft-type-title, h2 {
  font-family: var(--font-heading);
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-title);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--text-heading);
  text-wrap: balance;
}

.ft-type-subtitle {
  font-family: var(--font-heading);
  font-size: var(--font-size-subtitle);
  font-weight: var(--font-weight-title);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-heading);
  text-wrap: balance;
}

.ft-type-stat {
  font-family: var(--font-heading);
  font-size: var(--font-size-stat);
  font-weight: var(--font-weight-figure);
  line-height: var(--leading-tight);
}

.ft-type-heading, h3 {
  font-family: var(--font-heading);
  font-size: var(--font-size-heading);
  font-weight: var(--font-weight-heading);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-heading);
}

.ft-type-subheading {
  font-family: var(--font-heading);
  font-size: var(--font-size-subheading);
  font-weight: var(--font-weight-heading);
  line-height: var(--leading-snug);
  color: var(--text-heading);
}

.ft-type-figure {
  font-family: var(--font-heading);
  font-size: var(--font-size-figure);
  font-weight: var(--font-weight-figure);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--text-heading);
}

.ft-type-lede {
  font-size: var(--font-size-lede);
  line-height: var(--leading-normal);
  color: var(--text-muted);
  max-width: var(--measure);
  text-wrap: pretty;
}

.ft-type-body {
  font-size: var(--font-size-body);
  line-height: var(--leading-normal);
  color: var(--text-body);
  max-width: var(--measure);
}

.ft-type-small {
  font-size: var(--font-size-small);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}

.ft-type-meta {
  font-size: var(--font-size-meta);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}

.ft-type-caps {
  font-family: var(--font-heading);
  font-size: var(--font-size-meta);
  font-weight: var(--font-weight-label);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

.ft-type-label {
  font-family: var(--font-heading);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-label);
  color: var(--text-heading);
}

/* Body-size text with label weight: names of things (vehicles, capabilities). */
.ft-type-strong {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-label);
  line-height: var(--leading-snug);
  color: var(--text-heading);
}

.ft-text-accent { color: var(--text-accent); }
.ft-text-strong { color: var(--text-heading); font-weight: var(--font-weight-strong); }

/* ------------------------------------------------------------ accessibility */

.ft-visually-hidden {
  position: absolute;
  width: var(--border-width);
  height: var(--border-width);
  margin: calc(var(--border-width) * -1);
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.ft-skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--z-skip-link);
  transform: translateY(-200%);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  color: var(--text-heading);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-label);
  border-radius: var(--radius);
}
.ft-skip-link:focus { transform: translateY(0); }

/* ==== resources/css/layout.css ==== */
/* Layout primitives. Pages are built by composing these through the Blade components in
   resources/views/components/ui. Spacing values are DS space tokens only. */

.ft-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------------------------------------------------------------- sections */

/* Anchor offset for the sticky header comes from scroll-padding on <html> alone. Adding
   scroll-margin here as well doubled it, so nav links landed 160px low. */
.ft-section {
  padding-block-start: var(--section-space);
}

.ft-section--band {
  padding-block: var(--band-space);
  background: var(--surface-base);
}

.ft-section__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block-end: var(--space-8);
}

/* ---------------------------------------------------------------- stacks */

.ft-stack { display: flex; flex-direction: column; }
.ft-stack--xs { gap: var(--space-1); }
.ft-stack--sm { gap: var(--space-2); }
.ft-stack--md { gap: var(--space-3); }
.ft-stack--lg { gap: var(--space-4); }
.ft-stack--xl { gap: var(--space-6); }
.ft-stack--2xl { gap: var(--space-8); }

/* Flex columns stretch children to full width; an image must keep its own proportions. */
.ft-stack > img { align-self: flex-start; }
.ft-stack > img, .ft-cluster > img { flex: none; }

/* --------------------------------------------------------------- clusters */

.ft-cluster { display: flex; flex-wrap: wrap; align-items: center; }
.ft-cluster--xs { gap: var(--space-1); }
.ft-cluster--sm { gap: var(--space-2); }
.ft-cluster--md { gap: var(--space-3); }
.ft-cluster--lg { gap: var(--space-4); }
.ft-cluster--xl { gap: var(--space-6); }
.ft-cluster--baseline { align-items: baseline; }
.ft-cluster--start { align-items: flex-start; }
.ft-cluster--between { justify-content: space-between; }
.ft-cluster--end { justify-content: flex-end; }
.ft-cluster--center { justify-content: center; }

/* ------------------------------------------------------------------ grids

   No media queries: auto-fit with a token minimum reflows by itself, and the minimums are
   capped at 100% so a column can never overflow a narrow screen. */

.ft-grid { display: grid; gap: var(--space-4); }
.ft-grid--sm { grid-template-columns: repeat(auto-fit, minmax(var(--grid-min-sm), 1fr)); }
.ft-grid--md { grid-template-columns: repeat(auto-fit, minmax(var(--grid-min-md), 1fr)); }
.ft-grid--lg { grid-template-columns: repeat(auto-fit, minmax(var(--grid-min-lg), 1fr)); }
.ft-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ft-grid--gap-lg { gap: var(--space-6); }
.ft-grid--gap-xl { gap: var(--space-12); }
.ft-grid--center { align-items: center; }
.ft-grid--stretch { align-items: stretch; }

.ft-grow { flex: 1; }
.ft-min-0 { min-width: 0; }

/* ==== resources/css/components/button.css ==== */
/* Button. Spec: design system Button. One radius, one type role, three heights. */

.ft-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  padding-inline: var(--control-padding-x);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius);
  background: var(--color-brand);
  color: var(--text-on-brand);
  font-family: var(--font-heading);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-label);
  line-height: var(--leading-tight);
  text-align: center;
  cursor: pointer;
  transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base), transform var(--transition-fast);
}
.ft-button:hover { background: var(--color-brand-bright); color: var(--text-on-brand); }
.ft-button:active { transform: translateY(var(--press-offset)); }
.ft-button[disabled] { cursor: not-allowed; background: var(--surface-subtle); color: var(--text-muted); }

.ft-button--sm { min-height: var(--control-height-sm); font-size: var(--font-size-small); }
.ft-button--lg { min-height: var(--control-height-lg); padding-inline: var(--space-6); font-size: var(--font-size-subheading); }
.ft-button--block { width: 100%; }

.ft-button--secondary { background: var(--surface); color: var(--text-heading); border-color: var(--border-color); }
.ft-button--secondary:hover { background: var(--surface-subtle); color: var(--text-heading); }

.ft-button--outline { background: transparent; color: var(--text-heading); border-color: var(--inverse-border-strong); }
.ft-button--outline:hover { background: transparent; color: var(--text-accent); border-color: var(--border-color-accent); }

.ft-button--ghost { min-height: var(--control-height-sm); padding-inline: 0; background: transparent; color: var(--text-heading); font-weight: var(--font-weight-strong); }
.ft-button--ghost:hover { background: transparent; color: var(--text-accent); }

/* ==== resources/css/components/card.css ==== */
/* Card. The single surface used for every boxed element on the site. */

.ft-card {
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--elevation-card);
  padding: var(--card-padding);
}

.ft-card--flat { box-shadow: none; }
.ft-card--raised { box-shadow: var(--elevation-raised); }
.ft-card--overlay { box-shadow: var(--elevation-overlay); }
.ft-card--featured { border: var(--border-width-strong) solid var(--border-color-accent); box-shadow: var(--elevation-raised); }
.ft-card--subtle { background: var(--surface-subtle); border-color: transparent; box-shadow: none; }
.ft-card--accent { background: var(--surface-accent); border-color: transparent; box-shadow: none; }
.ft-card--compact { padding: var(--space-4); }
.ft-card--flush { padding: 0; overflow: hidden; }
.ft-card--column { display: flex; flex-direction: column; }

/* A card that is itself on a dark ground takes the tone's base colour. */
.ft-card.ft-tone-inverse { background: var(--surface-base); border-color: var(--surface-base); }

.ft-card__divider + .ft-card__divider,
.ft-card__row + .ft-card__row { border-top: var(--border); }
.ft-card__row { padding: var(--space-4); }
.ft-card__bar {
  padding: var(--space-3) var(--space-4);
  background: var(--surface-subtle);
  border-bottom: var(--border);
}

/* ==== resources/css/components/content.css ==== */
/* Marketing content blocks: stats, features, steps, info cards, checklists, tiers. */

.ft-stat__figure { color: var(--text-accent); }

.ft-step__number { color: var(--text-accent); }

.ft-checklist__item { display: flex; align-items: baseline; gap: var(--space-3); }

.ft-tier { display: flex; align-items: flex-start; gap: var(--space-3); }
.ft-tier .ft-dot { margin-block-start: var(--space-2); }
.ft-tier--active .ft-type-small { color: var(--text-accent); }

.ft-plan__tag {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-round);
  background: var(--surface-accent);
  color: var(--text-accent);
  font-family: var(--font-heading);
  font-size: var(--font-size-meta);
  font-weight: var(--font-weight-label);
}

.ft-calculator { padding: var(--space-4); border-radius: var(--radius); background: var(--surface-subtle); }

/* ==== resources/css/components/faq.css ==== */
/* FAQ accordion, built on native <details>. */

.ft-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  list-style: none;
  cursor: pointer;
}
.ft-faq__question::-webkit-details-marker { display: none; }
.ft-faq__chevron { flex: none; color: var(--text-accent); transition: transform var(--transition-base); }
.ft-faq__item[open] .ft-faq__chevron { transform: rotate(var(--rotate-open)); }
.ft-faq__answer { margin-block-start: var(--space-3); }

/* ==== resources/css/components/footer.css ==== */
/* Site footer. Shared by every page. Set in the heading face throughout, per the design. */

.ft-footer {
  margin-block-start: var(--section-space);
  background: var(--surface-base);
  font-family: var(--font-heading);
  font-size: var(--font-size-subheading);
}
.ft-footer__main { padding-block: var(--band-space); }
.ft-footer__connect { padding-block-end: var(--space-6); border-bottom: var(--border); }
.ft-footer__columns { padding-block-start: var(--space-10); gap: var(--space-10); }
.ft-footer__heading {
  font-size: var(--font-size-heading);
  font-weight: var(--font-weight-title);
  color: var(--text-heading);
}
.ft-footer__link { color: var(--text-body); font-weight: var(--font-weight-strong); }
.ft-footer__link:hover { color: var(--text-accent); }
.ft-footer__email { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--font-weight-label); }
.ft-footer__email .ft-icon { color: var(--text-accent); }
.ft-footer__logo { height: var(--logo-height-lg); width: auto; filter: brightness(0) invert(1); }
.ft-footer .ft-social .ft-icon { width: var(--icon-size-sm); height: var(--icon-size-sm); }

.ft-footer__chin {
  padding-block: var(--space-4);
  background: var(--surface-base);
  color: var(--inverse-text);
  text-align: center;
  line-height: var(--leading-snug);
}
.ft-footer__chin .ft-footer__link { color: var(--inverse-text); }
.ft-footer__chin .ft-footer__link:hover { color: var(--text-accent); }
.ft-footer__separator { margin-inline: var(--space-2); }

/* ==== resources/css/components/form.css ==== */
/* Form controls: field, input, textarea, range, chips, segmented toggle. */

.ft-field { display: flex; flex-direction: column; gap: var(--space-1); }

.ft-input {
  width: 100%;
  min-height: var(--control-height);
  padding-inline: var(--space-3);
  background: var(--color-surface);
  color: var(--color-ink);
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--leading-normal);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.ft-input::placeholder { color: var(--color-muted); }
.ft-input:focus { outline: none; border-color: var(--border-color-accent); box-shadow: 0 0 0 var(--space-1) var(--surface-accent); }
.ft-input--invalid { border-color: var(--status-bad); }
.ft-input--textarea { min-height: var(--textarea-min-height); padding-block: var(--space-3); resize: vertical; }
.ft-input--plate { text-transform: uppercase; letter-spacing: var(--tracking-wide); }

.ft-field__error { font-size: var(--font-size-small); color: var(--status-bad-text); }

.ft-range { width: 100%; min-height: var(--control-height); accent-color: var(--color-brand); }

.ft-chip {
  min-height: var(--control-height-sm);
  padding-inline: var(--space-4);
  background: var(--color-surface);
  color: var(--text-heading);
  border: var(--border);
  border-radius: var(--radius-round);
  font-family: var(--font-heading);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-strong);
  cursor: pointer;
  transition: background-color var(--transition-base), border-color var(--transition-base);
}
.ft-chip[aria-pressed="true"] { background: var(--surface-accent); border-color: var(--border-color-accent); }

.ft-segmented {
  display: flex;
  padding: var(--space-1);
  background: var(--surface-subtle);
  border-radius: var(--radius-round);
}
.ft-segmented__option {
  flex: 1;
  min-height: var(--control-height-sm);
  border: 0;
  border-radius: var(--radius-round);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-label);
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base);
}
.ft-segmented__option[aria-selected="true"] { background: var(--color-surface); color: var(--text-heading); box-shadow: var(--elevation-card); }


/* ==== resources/css/components/header.css ==== */
/* Site header. Shared by every page. */

.ft-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--header-bg);
  backdrop-filter: blur(var(--blur-header));
  border-bottom: var(--border);
}
.ft-header__rule { height: var(--header-rule-height); background: var(--ft-gradient-logo); }
.ft-header__inner { padding-block: var(--space-3); }

.ft-brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--text-heading); }
.ft-brand:hover { color: var(--text-heading); }
.ft-brand__mark { height: var(--brand-mark-size); width: auto; }
.ft-brand__name {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--font-size-heading);
  font-weight: var(--font-weight-title);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--text-heading);
}
.ft-brand__tld { color: var(--text-accent); }

.ft-nav__link {
  font-family: var(--font-heading);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-strong);
  color: var(--text-heading);
}
.ft-nav__link:hover { color: var(--text-accent); }

/* ==== resources/css/components/hero.css ==== */
/* Hero: a full-bleed photo band. The photo and scrim are decoration only. */

.ft-hero { position: relative; overflow: hidden; background: var(--surface-base); }
.ft-hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: var(--hero-photo-opacity);
}
.ft-hero__scrim { position: absolute; inset: 0; background: var(--hero-scrim); }
.ft-hero__inner { position: relative; padding-block: var(--section-space); }
.ft-hero__price {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  padding-inline-start: var(--space-5);
  border-inline-start: var(--border);
  color: var(--text-heading);
}
.ft-hero__price:hover { color: var(--text-accent); }

/* ==== resources/css/components/icon.css ==== */
/* Icons inherit colour from their context; size comes from one token. */

.ft-icon { flex: none; width: var(--icon-size); height: var(--icon-size); }
.ft-icon--fill { fill: currentColor; }
.ft-icon--stroke { fill: none; stroke: currentColor; stroke-width: var(--border-width-strong); }
.ft-icon__dot { fill: currentColor; stroke: none; }

.ft-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--control-height);
  height: var(--control-height);
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base);
}
.ft-icon-button:hover { background: var(--surface-subtle); color: var(--text-heading); }

.ft-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-height-sm);
  height: var(--control-height-sm);
  border-radius: var(--radius-round);
  background: var(--color-brand);
  color: var(--text-on-brand);
  transition: background-color var(--transition-base);
}
.ft-social:hover { background: var(--text-link-hover); color: var(--text-on-brand); }

.ft-mark { color: var(--text-muted); }

/* ==== resources/css/components/illustration.css ==== */
/* Product illustrations: the dashboard mock and the reminder email. Decoration only. */

.ft-illustration { background: var(--surface-page); }

.ft-gauge { position: relative; width: var(--gauge-width); flex: none; }
.ft-gauge__track, .ft-gauge__value { fill: none; stroke-width: var(--space-4); stroke-linecap: round; }
.ft-gauge__track { stroke: var(--color-line); }
.ft-gauge__value { stroke: var(--status-warn); }
.ft-gauge__readout { position: absolute; inset-inline: 0; bottom: var(--space-5); text-align: center; }

.ft-gauge__unit { font-size: var(--font-size-subtitle); }

.ft-count { text-align: center; }
.ft-count--good .ft-type-stat { color: var(--status-good); }
.ft-count--warn .ft-type-stat { color: var(--status-warn-text); }
.ft-count--bad .ft-type-stat { color: var(--status-bad); }

/* The mock sets its brand name and summary copy one step up from the role default, matching
   the design's dashboard (14px name, 13px summary). */
.ft-mock-title { font-size: var(--font-size-body); }
.ft-mock-body { color: var(--text-body); }

.ft-mock-logo { height: var(--icon-size); width: auto; }
.ft-platform-logo { height: var(--logo-height); width: auto; }

/* ==== resources/css/components/modal.css ==== */
/* Modal. One width, one radius, one elevation for every dialog on the site. */

.ft-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
  background: var(--overlay);
  backdrop-filter: blur(var(--blur-overlay));
}
.ft-modal--top { z-index: var(--z-modal-top); }

.ft-modal__dialog {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--modal-width);
  max-height: var(--modal-max-height);
  overflow: auto;
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--elevation-overlay);
}

.ft-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--card-padding) var(--card-padding) var(--space-4);
}
.ft-modal__body { padding: 0 var(--card-padding) var(--card-padding); }
.ft-modal__footer {
  padding: var(--space-5) var(--card-padding);
  background: var(--surface-subtle);
  border-top: var(--border);
}

body.ft-scroll-locked { overflow: hidden; }

/* ==== resources/css/components/note.css ==== */
/* Inline notices, e.g. a form confirmation. */

.ft-note {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  font-size: var(--font-size-body);
}
.ft-note--success { background: var(--status-good-soft); color: var(--status-good-text); }

.ft-success-title { color: var(--status-good-text); }

/* ==== resources/css/components/pill.css ==== */
/* Status pill, plate chip, dot and badge.
   StatusPill and PlateChip follow the design system component bundle exactly: a white
   hairline pill with a state-coloured dot, a bold slate kind label and a state-coloured
   value; and an orange monospace plate on a soft orange ground. */

.ft-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-round);
  font-family: var(--font-body);
  font-size: var(--font-size-small);
  line-height: var(--leading-snug);
  white-space: nowrap;
}
.ft-pill__kind { font-weight: var(--font-weight-label); color: var(--color-panel); }
.ft-pill__value { color: var(--color-muted); }
.ft-pill .ft-dot { background: var(--color-muted); }

.ft-pill--current .ft-dot { background: var(--color-good); }
.ft-pill--current .ft-pill__value { color: var(--color-good); }
.ft-pill--expiring_soon .ft-dot { background: var(--color-warn); }
.ft-pill--expiring_soon .ft-pill__value { color: var(--color-warn-text); }
.ft-pill--expired .ft-dot { background: var(--color-bad); }
.ft-pill--expired .ft-pill__value { color: var(--color-bad); }

.ft-plate {
  display: inline-block;
  padding: var(--plate-padding);
  background: var(--color-brand-soft);
  color: var(--color-brand);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--font-size-meta);
  font-weight: var(--font-weight-title);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-snug);
  text-transform: uppercase;
}

.ft-dot {
  display: inline-block;
  flex: none;
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: var(--radius-round);
  background: currentColor;
}
.ft-dot--good { background: var(--status-good); }
.ft-dot--warn { background: var(--status-warn); }
.ft-dot--bad { background: var(--status-bad); }
.ft-dot--accent { background: var(--color-brand); }
.ft-dot--muted { background: var(--border-color); }

.ft-badge {
  display: inline-flex;
  align-items: stretch;
  overflow: hidden;
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius-round);
}
.ft-badge__flag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: var(--color-brand);
  color: var(--text-on-brand);
}
.ft-badge__flag .ft-dot { background: var(--text-on-brand); }
.ft-badge__text { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3); color: var(--text-heading); font-size: var(--font-size-small); }
.ft-badge .ft-type-caps { color: inherit; }