/* =====================================================================
   fleetalyse-signal-home-2026.css
   The signal design system applied to the homepage.

   The main signal sheet scopes every selector `:not(.home-control-centre)`
   because the homepage is built from `home-*` components that share no
   classes with the rest of the site. This file is that missing half.

   Rules, learned the hard way:
     - colour properties only, never layout (no display/position/width/flex)
     - every declaration !important, because the base sheets all use it
     - no blanket element selectors; name the component
     - accent text needs two values: #B8460F on light, #E8622C on dark
     - darkening a section means re-colouring every text node inside it
   Tokens are inherited from `body.front-template-signal` in the main sheet.
   ===================================================================== */

/* ------------------------------------------------------------ hero --- */
/* The hero is the signature of this design: ink ground, white display
   headline, orange eyebrow. Matches .page-hero on every other page. */
body.front-template-signal.home-control-centre .home-hero-cc{
  background:var(--sig-ink) !important;
  background-image:none !important;
}
body.front-template-signal.home-control-centre .home-hero-cc h1{
  color:var(--sig-on-dark) !important;
  font-family:var(--sig-display) !important;
  letter-spacing:-0.02em !important;
}
body.front-template-signal.home-control-centre .home-hero-cc .home-lead,
body.front-template-signal.home-control-centre .home-hero-cc__note{
  color:var(--sig-on-dark-muted) !important;
}
/* The kicker is a near-white pill; on ink it takes the panel treatment. */
body.front-template-signal.home-control-centre .home-hero-cc .home-kicker{
  background:var(--sig-panel) !important;
  border:1px solid var(--sig-line) !important;
  color:var(--sig-accent) !important;
}

/* Hero buttons. The stock primary is a near-black fill, which all but
   disappears as a shape against the ink ground, so it takes the accent. */
body.front-template-signal.home-control-centre .home-hero-cc .home-button,
body.front-template-signal.home-control-centre .home-hero-cc .home-button--small,
body.front-template-signal.home-control-centre .home-hero-cc .home-button--wide{
  background:var(--sig-accent-dark) !important;
  border:1px solid var(--sig-accent-dark) !important;
  color:#fff !important;
}
body.front-template-signal.home-control-centre .home-hero-cc .home-button:hover{
  background:#A03C0C !important;
  border-color:#A03C0C !important;
}
body.front-template-signal.home-control-centre .home-hero-cc .home-button--secondary{
  background:transparent !important;
  border:1px solid rgba(255,255,255,.4) !important;
  color:var(--sig-on-dark) !important;
}
body.front-template-signal.home-control-centre .home-hero-cc .home-button--secondary:hover{
  background:rgba(255,255,255,.08) !important;
  border-color:var(--sig-on-dark) !important;
}

/* The .home-command panel is a mock of the product UI. It stays white on
   the dark hero, exactly like .dashboard-card does elsewhere - so nothing
   inside it is re-coloured, only its two failing greys are corrected. */
body.front-template-signal.home-control-centre .home-command__eyebrow,
body.front-template-signal.home-control-centre .home-shot__caption{
  color:var(--sig-muted) !important;
}

/* -------------------------------------------------------- sections --- */
/* The stock alternation is #FFFFFF / #F6F7F9. Same rhythm, signal tones:
   the tinted band becomes the warm paper the rest of the site uses. */
body.front-template-signal.home-control-centre .home-trust,
body.front-template-signal.home-control-centre .home-workflow,
body.front-template-signal.home-control-centre .home-mobile-apps,
body.front-template-signal.home-control-centre .home-plans,
body.front-template-signal.home-control-centre .home-faq-cc,
body.front-template-signal.home-control-centre .home-resources{
  background:var(--sig-paper) !important;
}
body.front-template-signal.home-control-centre .home-start,
body.front-template-signal.home-control-centre .home-api,
body.front-template-signal.home-control-centre .home-fleets,
body.front-template-signal.home-control-centre .home-dashcam,
body.front-template-signal.home-control-centre .home-support,
body.front-template-signal.home-control-centre .home-final{
  background:var(--sig-card) !important;
}

/* Section headings take the display face, as they do site-wide. */
body.front-template-signal.home-control-centre .home-section h2,
body.front-template-signal.home-control-centre .home-heading h2,
body.front-template-signal.home-control-centre .home-final h2{
  font-family:var(--sig-display) !important;
  letter-spacing:-0.01em !important;
}

/* The kicker on a light ground: accent, at the value that passes there. */
body.front-template-signal.home-control-centre .home-section .home-kicker,
body.front-template-signal.home-control-centre .home-final .home-kicker{
  color:#B8460F !important;
}

/* ------------------------------------------------- the dark section --- */
/* .home-operations already ships dark at #0F1115; retune it to the ink
   the rest of the site uses so the two do not read as different blacks. */
body.front-template-signal.home-control-centre .home-operations{
  background:var(--sig-ink) !important;
}
body.front-template-signal.home-control-centre .home-operations .home-kicker{
  background:var(--sig-panel) !important;
  border:1px solid var(--sig-line) !important;
  color:var(--sig-accent) !important;
}
/* Inset dark media blocks sit on white sections; panel keeps them distinct. */
body.front-template-signal.home-control-centre .home-api__code,
body.front-template-signal.home-control-centre .home-dashcam__media{
  background:var(--sig-panel) !important;
}

/* ---------------------------------------------------------- footer --- */
/* The stock homepage footer is light #F6F7F9 while every other page now
   ends on ink. Matching it fixes four contrast failures at the same time:
   the headings, body copy and nav links all measured 2.81 on the tint. */
body.front-template-signal.home-control-centre .home-footer{
  background:var(--sig-ink) !important;
  border-top:0 !important;
}
body.front-template-signal.home-control-centre .home-footer h2,
body.front-template-signal.home-control-centre .home-footer h3,
body.front-template-signal.home-control-centre .home-footer strong{
  color:var(--sig-on-dark) !important;
}
body.front-template-signal.home-control-centre .home-footer p,
body.front-template-signal.home-control-centre .home-footer li,
body.front-template-signal.home-control-centre .home-footer small,
body.front-template-signal.home-control-centre .home-footer span,
body.front-template-signal.home-control-centre .home-footer a{
  color:var(--sig-on-dark-muted) !important;
}
body.front-template-signal.home-control-centre .home-footer a:hover{
  color:var(--sig-on-dark) !important;
}

/* The floating WhatsApp button inherits link colour; ink measures 9.12 on
   its brand green and keeps the button recognisable. */
body.front-template-signal.home-control-centre .whatsapp-floating.whatsapp-floating,
body.front-template-signal.home-control-centre .whatsapp-floating.whatsapp-floating span,
body.front-template-signal.home-control-centre .whatsapp-floating.whatsapp-floating svg{
  color:var(--sig-ink) !important;
  fill:currentColor;
}

/* ------------------------------------------------- late corrections --- */
/* .home-final wraps a dark CTA panel inside a white section, so the kicker
   there sits on ink, not paper, and needs the bright accent instead. */
body.front-template-signal.home-control-centre .home-final .home-shell{
  background:var(--sig-ink) !important;
}
body.front-template-signal.home-control-centre .home-final .home-shell .home-kicker{
  color:var(--sig-accent) !important;
}

/* The same #8D95A3 small print the shop and pricing pages carry: 3.02 on
   white. --sig-muted is 6.27 and still reads as secondary. */
body.front-template-signal.home-control-centre .home-plan__price span,
body.front-template-signal.home-control-centre .home-resource-meta time{
  color:var(--sig-muted) !important;
}

/* ------------------------------------------- hero platform preview --- */
/* The product screenshot is a large light rectangle, and on the ink hero it
   read as a bright slab. The panel now wears dark chrome, so it frames the
   shot like a device rather than interrupting the hero, and the shot itself
   sits behind a <details> toggle - collapsed by default, no JavaScript. */
body.front-template-signal.home-control-centre .home-command{
  background:var(--sig-panel) !important;
  border:1px solid var(--sig-line) !important;
}
body.front-template-signal.home-control-centre .home-command__bar,
body.front-template-signal.home-control-centre .home-command__footer{
  background:transparent !important;
  border-color:var(--sig-line) !important;
}
body.front-template-signal.home-control-centre .home-command__bar strong{
  color:var(--sig-on-dark) !important;
}
body.front-template-signal.home-control-centre .home-command__eyebrow,
body.front-template-signal.home-control-centre .home-command__footer span,
body.front-template-signal.home-control-centre .home-command .home-shot__caption{
  color:var(--sig-on-dark-muted) !important;
  background:transparent !important;
}

/* The toggle is a new component, so unlike everything else in this file it
   carries its own layout - there is no existing rule to inherit from. */
body.front-template-signal.home-control-centre .home-preview{
  border-top:1px solid var(--sig-line);
}
body.front-template-signal.home-control-centre .home-preview__toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:16px 20px;
  cursor:pointer;
  list-style:none;
  font-size:14px;
  font-weight:600;
  color:var(--sig-accent) !important;
}
body.front-template-signal.home-control-centre .home-preview__toggle::-webkit-details-marker{
  display:none;
}
body.front-template-signal.home-control-centre .home-preview__toggle svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
}
body.front-template-signal.home-control-centre .home-preview__toggle:hover{
  color:var(--sig-on-dark) !important;
  background:rgba(255,255,255,.06);
}
body.front-template-signal.home-control-centre .home-preview__toggle:focus-visible{
  outline:2px solid var(--sig-accent);
  outline-offset:-2px;
}
/* Label swaps with the open state, so the control always says what it does. */
body.front-template-signal.home-control-centre .home-preview__hide{ display:none; }
body.front-template-signal.home-control-centre .home-preview[open] .home-preview__hide{ display:inline; }
body.front-template-signal.home-control-centre .home-preview[open] .home-preview__show{ display:none; }