/* fleetalyse-signal-2026.css
 * "Signal" front template — dark hero, industrial type, safety-orange accent.
 *
 * ACTIVATION: settings.front_template_mode = 'signal'
 * REVERT:     set it back to 'studio'. Nothing else needs undoing.
 *
 * SPECIFICITY NOTE, READ BEFORE EDITING
 * fleetalyse-seonis-2026.css styles the site as `body.front-ui-2026 .x`,
 * which is specificity (0,2,1). A bare `.x` here is (0,1,0) and LOSES
 * regardless of load order. Every rule below is therefore scoped
 * `body.front-template-signal:not(.home-control-centre) .x` — equal specificity, and this file is
 * linked after seonis, so it wins. Do not "simplify" these selectors.
 *
 * Added 2026-09-17.
 */

body.front-template-signal{
  --sig-ink:#0D1720;
  --sig-panel:#142330;
  --sig-line:#23394A;
  --sig-paper:#F7F6F2;
  --sig-card:#FFFFFF;
  --sig-border:#E3DFD6;
  --sig-text:#101A21;
  --sig-muted:#56616C;
  --sig-accent:#E8622C;
  --sig-accent-dark:#C44D1C;
  --sig-teal:#17505E;
  --sig-on-dark:#FFFFFF;
  --sig-on-dark-muted:#A9B8C2;
  --sig-display:'Archivo','IBM Plex Sans',system-ui,sans-serif;
  background:var(--sig-paper) !important;
}


/* NOTE: every rule is scoped :not(.home-control-centre). The homepage is a
 * separate bespoke design and measured WORSE under signal (15 failures vs a
 * baseline of 6), so it is deliberately excluded. Keep the exclusion.
 */

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

body.front-template-signal:not(.home-control-centre) h1,
body.front-template-signal:not(.home-control-centre) h2,
body.front-template-signal:not(.home-control-centre) h3{
  font-family:var(--sig-display);
  letter-spacing:-0.02em;
}
body.front-template-signal:not(.home-control-centre) h1{ font-weight:800; line-height:1.04; }
body.front-template-signal:not(.home-control-centre) h2{ font-weight:700; line-height:1.12; }
body.front-template-signal:not(.home-control-centre) h3{ font-weight:700; }

body.front-template-signal:not(.home-control-centre) .section .lead,
body.front-template-signal:not(.home-control-centre) .page-hero .lead{
  font-size:19px;
  line-height:1.55;
}
body.front-template-signal:not(.home-control-centre) .section .lead{ color:var(--sig-muted) !important; }

/* Eyebrow: rule + uppercase label, not a filled chip */
body.front-template-signal:not(.home-control-centre) .pill,
body.front-template-signal:not(.home-control-centre) .eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:none !important;
  border:0 !important;
  padding:0;
  border-radius:0;
  color:var(--sig-accent-dark) !important;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
}
body.front-template-signal:not(.home-control-centre) .pill::before,
body.front-template-signal:not(.home-control-centre) .eyebrow::before{
  content:"";
  width:28px;
  height:2px;
  background:currentColor !important;
  flex:0 0 28px;
}

/* ---------------------------------------------------------------- hero --- */

body.front-template-signal:not(.home-control-centre) .page-hero,
body.front-template-signal:not(.home-control-centre) .hero,
body.front-template-signal:not(.home-control-centre) .shop-hero,
body.front-template-signal:not(.home-control-centre) .shop-product-hero{
  background:var(--sig-ink) !important;
  background-image:none !important;
  padding:72px 0 64px;
  border-bottom:0;
}

/* Every text node in the hero must be re-coloured explicitly: the base
   sheets set these with their own (0,2,1) rules. */
body.front-template-signal:not(.home-control-centre) .page-hero h1,
body.front-template-signal:not(.home-control-centre) .page-hero h2,
body.front-template-signal:not(.home-control-centre) .page-hero h3,
body.front-template-signal:not(.home-control-centre) .hero h1,
body.front-template-signal:not(.home-control-centre) .shop-hero h1,
body.front-template-signal:not(.home-control-centre) .shop-product-hero h1{
  color:var(--sig-on-dark) !important;
}
body.front-template-signal:not(.home-control-centre) .page-hero p,
body.front-template-signal:not(.home-control-centre) .page-hero .lead,
body.front-template-signal:not(.home-control-centre) .page-hero li,
body.front-template-signal:not(.home-control-centre) .hero p,
body.front-template-signal:not(.home-control-centre) .hero .lead,
body.front-template-signal:not(.home-control-centre) .shop-hero p,
body.front-template-signal:not(.home-control-centre) .shop-product-hero p{
  color:var(--sig-on-dark-muted) !important;
}
body.front-template-signal:not(.home-control-centre) .page-hero .pill,
body.front-template-signal:not(.home-control-centre) .page-hero .eyebrow,
body.front-template-signal:not(.home-control-centre) .hero .pill,
body.front-template-signal:not(.home-control-centre) .hero .eyebrow{
  color:var(--sig-accent) !important;
}
body.front-template-signal:not(.home-control-centre) .page-hero .breadcrumb,
body.front-template-signal:not(.home-control-centre) .page-hero .breadcrumb span{ color:#7E8F9C !important; }
body.front-template-signal:not(.home-control-centre) .page-hero .breadcrumb a{ color:var(--sig-on-dark-muted) !important; text-decoration:none; }
body.front-template-signal:not(.home-control-centre) .page-hero .breadcrumb a:hover{ color:var(--sig-on-dark) !important; }
body.front-template-signal:not(.home-control-centre) .page-hero a:not(.btn){ color:#F0A17B !important; }

/* Cards sitting inside a dark hero */
body.front-template-signal:not(.home-control-centre) .page-hero .summary-card,
body.front-template-signal:not(.home-control-centre) .page-hero .mini-card,
body.front-template-signal:not(.home-control-centre) .hero .summary-card{
  background:var(--sig-panel) !important;
  border:1px solid var(--sig-line) !important;
  border-radius:6px;
  box-shadow:none !important;
  color:var(--sig-on-dark-muted) !important;
}
body.front-template-signal:not(.home-control-centre) .page-hero .summary-card h2,
body.front-template-signal:not(.home-control-centre) .page-hero .summary-card h3,
body.front-template-signal:not(.home-control-centre) .page-hero .mini-card h3{ color:var(--sig-on-dark) !important; }
body.front-template-signal:not(.home-control-centre) .page-hero .tick-list li{ color:var(--sig-on-dark-muted) !important; }

body.front-template-signal:not(.home-control-centre) .hero-actions{
  display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-top:28px;
}

/* ------------------------------------------------------------- buttons --- */

body.front-template-signal:not(.home-control-centre) .btn,
body.front-template-signal:not(.home-control-centre) .home-button{
  border-radius:4px;
  font-weight:600;
  letter-spacing:0;
  box-shadow:none !important;
}
body.front-template-signal:not(.home-control-centre) .btn-primary,
body.front-template-signal:not(.home-control-centre) .home-button--primary{
  background:var(--sig-accent-dark) !important;
  border:1px solid var(--sig-accent-dark) !important;
  color:#fff !important;
}
body.front-template-signal:not(.home-control-centre) .btn-primary:hover,
body.front-template-signal:not(.home-control-centre) .home-button--primary:hover{
  background:#A03C0C !important;
  border-color:#A03C0C !important;
}
body.front-template-signal:not(.home-control-centre) .btn-secondary,
body.front-template-signal:not(.home-control-centre) .btn-ghost{
  background:transparent !important;
  border:1px solid var(--sig-border) !important;
  color:var(--sig-text) !important;
}
body.front-template-signal:not(.home-control-centre) .page-hero .btn-secondary,
body.front-template-signal:not(.home-control-centre) .page-hero .btn-ghost,
body.front-template-signal:not(.home-control-centre) .hero .btn-secondary{
  border-color:#3A5163 !important;
  color:var(--sig-on-dark) !important;
  background:transparent !important;
}
body.front-template-signal:not(.home-control-centre) .page-hero .btn-secondary:hover{
  background:rgba(255,255,255,.06) !important;
  border-color:var(--sig-on-dark-muted) !important;
}

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

body.front-template-signal:not(.home-control-centre) .section{ background:var(--sig-paper) !important; padding:64px 0; }
body.front-template-signal:not(.home-control-centre) .section.alt,
body.front-template-signal:not(.home-control-centre) .alt{ background:var(--sig-card) !important; }
body.front-template-signal:not(.home-control-centre) .dark-band{
  background:var(--sig-ink) !important;
  color:var(--sig-on-dark) !important;
}
body.front-template-signal:not(.home-control-centre) .dark-band h2,
body.front-template-signal:not(.home-control-centre) .dark-band h3{ color:var(--sig-on-dark) !important; }
body.front-template-signal:not(.home-control-centre) .dark-band p{ color:var(--sig-on-dark-muted) !important; }

/* --------------------------------------------------------------- cards --- */

body.front-template-signal:not(.home-control-centre) .summary-card,
body.front-template-signal:not(.home-control-centre) .mini-card,
body.front-template-signal:not(.home-control-centre) .blog-card,
body.front-template-signal:not(.home-control-centre) .catalog-product,
body.front-template-signal:not(.home-control-centre) .modern-product-card{
  background:var(--sig-card) !important;
  border:1px solid var(--sig-border) !important;
  border-radius:6px;
  box-shadow:none !important;
}
body.front-template-signal:not(.home-control-centre) .blog-card img,
body.front-template-signal:not(.home-control-centre) .modern-product-card__image img{ border-radius:6px 6px 0 0; }

body.front-template-signal:not(.home-control-centre) .icon-tile{
  border-radius:6px;
  background:#FBF0E9 !important;
  color:var(--sig-accent-dark) !important;
}

body.front-template-signal:not(.home-control-centre) .tick-list li::marker{ color:var(--sig-accent) !important; }

/* --------------------------------------------------------------- links --- */

/* #C44D1C measures 4.75 on pure white but only 4.46 on the tinted section
   grounds the catalogue uses. #B8460F measures 5.06 there and 5.33 on white. */
body.front-template-signal:not(.home-control-centre) a{ color:#B8460F !important; }
body.front-template-signal:not(.home-control-centre) a:hover{ color:#9E3D14 !important; }
body.front-template-signal:not(.home-control-centre) .text-link,
body.front-template-signal:not(.home-control-centre) .home-text-link,
body.front-template-signal:not(.home-control-centre) .article-link{ color:var(--sig-accent-dark) !important; }

/* Links carrying their own dark background are buttons, not prose links.
   The blanket rule above paints accent text on them, landing at 3.78. */
body.front-template-signal:not(.home-control-centre) .catalog-product__price a,
body.front-template-signal:not(.home-control-centre) .catalog-plan__cta a{ color:var(--sig-on-dark) !important; }

/* -------------------------------------------------------- footer & CTA --- */

body.front-template-signal:not(.home-control-centre) .footer-cta{
  background:var(--sig-teal) !important;
  color:var(--sig-on-dark) !important;
}
body.front-template-signal:not(.home-control-centre) .footer-cta h2,
body.front-template-signal:not(.home-control-centre) .footer-cta h3{ color:var(--sig-on-dark) !important; }
body.front-template-signal:not(.home-control-centre) .footer-cta p{ color:#BBD4DB !important; }
body.front-template-signal:not(.home-control-centre) .footer-cta .btn-secondary{
  border-color:rgba(255,255,255,.4) !important;
  color:var(--sig-on-dark) !important;
}

body.front-template-signal:not(.home-control-centre) .site-footer{
  background:var(--sig-ink) !important;
  color:var(--sig-on-dark-muted) !important;
}
body.front-template-signal:not(.home-control-centre) .site-footer h3,
body.front-template-signal:not(.home-control-centre) .site-footer h4,
body.front-template-signal:not(.home-control-centre) .site-footer strong{ color:var(--sig-on-dark) !important; }
body.front-template-signal:not(.home-control-centre) .site-footer a{ color:#C3CED6 !important; }
body.front-template-signal:not(.home-control-centre) .site-footer a:hover{ color:var(--sig-on-dark) !important; }

/* The WhatsApp button keeps brand green #25D366. The footer link and span
   rules paint pale grey onto it, measuring 1.03. Ink measures 9.12 there
   and keeps the button recognisable. */
body.front-template-signal:not(.home-control-centre) .footer-whatsapp-btn.footer-whatsapp-btn,
body.front-template-signal:not(.home-control-centre) .footer-whatsapp-btn.footer-whatsapp-btn span,
body.front-template-signal:not(.home-control-centre) .footer-whatsapp-btn.footer-whatsapp-btn strong,
body.front-template-signal:not(.home-control-centre) .whatsapp-floating.whatsapp-floating,
body.front-template-signal:not(.home-control-centre) .whatsapp-floating.whatsapp-floating span,
body.front-template-signal:not(.home-control-centre) .whatsapp-floating.whatsapp-floating svg{ color:var(--sig-ink) !important; fill:currentColor; }

/* ------------------------------------------------------------ responsive - */

@media (max-width:840px){
  body.front-template-signal:not(.home-control-centre) .page-hero,
  body.front-template-signal:not(.home-control-centre) .hero{ padding:52px 0 44px; }
  body.front-template-signal:not(.home-control-centre) .page-hero h1{ font-size:36px; }
  body.front-template-signal:not(.home-control-centre) .lead{ font-size:17px; }
  body.front-template-signal:not(.home-control-centre) .section{ padding:48px 0; }
}


/* ------------------------------------------------- contrast corrections ---
 * Added after a WCAG sweep of the live DOM. Each fixes a measured failure;
 * do not remove without re-running the sweep.
 * -------------------------------------------------------------------------- */

/* .dashboard-card sits inside .page-hero and was left white while the hero's
   descendant rules painted white text on it (measured ratio 1.0). */
body.front-template-signal:not(.home-control-centre) .page-hero .dashboard-card,
body.front-template-signal:not(.home-control-centre) .hero .dashboard-card{
  background:var(--sig-panel) !important;
  border:1px solid var(--sig-line) !important;
  box-shadow:none !important;
}
body.front-template-signal:not(.home-control-centre) .page-hero .dashboard-card h2,
body.front-template-signal:not(.home-control-centre) .page-hero .dashboard-card h3,
body.front-template-signal:not(.home-control-centre) .page-hero .dashboard-card h4{ color:var(--sig-on-dark) !important; }
body.front-template-signal:not(.home-control-centre) .page-hero .dashboard-card p,
body.front-template-signal:not(.home-control-centre) .page-hero .dashboard-card li{ color:var(--sig-on-dark-muted) !important; }

/* Cards inside .dark-band: the band is dark and its text white, so the cards
   must be dark too (they were being whitened by the generic card rule). */
body.front-template-signal:not(.home-control-centre) .dark-band .mini-card,
body.front-template-signal:not(.home-control-centre) .dark-band .summary-card,
body.front-template-signal:not(.home-control-centre) .dark-band .dashboard-card,
body.front-template-signal:not(.home-control-centre) .dark-band .blog-card{
  background:var(--sig-panel) !important;
  border:1px solid var(--sig-line) !important;
  box-shadow:none !important;
}
body.front-template-signal:not(.home-control-centre) .dark-band .mini-card h3,
body.front-template-signal:not(.home-control-centre) .dark-band .mini-card h4,
body.front-template-signal:not(.home-control-centre) .dark-band .summary-card h3{ color:var(--sig-on-dark) !important; }
body.front-template-signal:not(.home-control-centre) .dark-band .mini-card p,
body.front-template-signal:not(.home-control-centre) .dark-band .mini-card li,
body.front-template-signal:not(.home-control-centre) .dark-band .summary-card p{ color:var(--sig-on-dark-muted) !important; }

/* The footer went dark but kept the light theme's muted text (3.33). */
body.front-template-signal:not(.home-control-centre) .site-footer p,
body.front-template-signal:not(.home-control-centre) .site-footer li,
body.front-template-signal:not(.home-control-centre) .site-footer span,
body.front-template-signal:not(.home-control-centre) .site-footer small{ color:var(--sig-on-dark-muted) !important; }


/* Round 2 of the sweep. Baseline note: the live 'studio' template fails 17
 * contrast checks on this page; signal was at 4 before these two. The
 * WhatsApp button (white on brand green) fails under every template and is
 * a third-party brand colour, so it is deliberately left alone.
 * -------------------------------------------------------------------------- */

/* Header CTA measured 3.78. It is the primary call to action, so give it the
   primary fill: white on #C44D1C is 4.75. */
body.front-template-signal:not(.home-control-centre) .home-button--small,
body.front-template-signal:not(.home-control-centre) .home-button--wide{
  background:var(--sig-accent-dark) !important;
  border:1px solid var(--sig-accent-dark) !important;
  color:#fff !important;
}
body.front-template-signal:not(.home-control-centre) .home-button--small:hover,
body.front-template-signal:not(.home-control-centre) .home-button--wide:hover{
  background:#A03C0C !important;
  border-color:#A03C0C !important;
}

/* Eyebrow on light ground measured exactly 4.50 - too close to call.
   #B8460F is 5.36 on white. The hero keeps the brighter --sig-accent,
/* Accent text needs two values, because it sits on two grounds.
   On the light paper #B8460F measures 4.94; --sig-accent measures only 3.12.
   On the ink hero/band --sig-accent measures 5.35 and is the right one. */
body.front-template-signal:not(.home-control-centre) .eyebrow,
body.front-template-signal:not(.home-control-centre) .pill{ color:#B8460F !important; }

body.front-template-signal:not(.home-control-centre) .page-hero .pill,
body.front-template-signal:not(.home-control-centre) .page-hero .eyebrow,
body.front-template-signal:not(.home-control-centre) .hero .pill,
body.front-template-signal:not(.home-control-centre) .hero .eyebrow,
body.front-template-signal:not(.home-control-centre) .shop-hero .pill,
body.front-template-signal:not(.home-control-centre) .shop-hero .eyebrow,
body.front-template-signal:not(.home-control-centre) .shop-product-hero .pill,
body.front-template-signal:not(.home-control-centre) .shop-product-hero .eyebrow,
body.front-template-signal:not(.home-control-centre) .dark-band .pill,
body.front-template-signal:not(.home-control-centre) .dark-band .eyebrow,
body.front-template-signal:not(.home-control-centre) .site-footer .pill,
body.front-template-signal:not(.home-control-centre) .site-footer .eyebrow,
body.front-template-signal:not(.home-control-centre) .footer-cta .pill,
body.front-template-signal:not(.home-control-centre) .footer-cta .eyebrow{ color:var(--sig-accent) !important; }

/* Ghost buttons inherit dark text, which disappears inside the dark bands.
   .footer-cta and .dark-band need the light treatment the hero already has. */
body.front-template-signal:not(.home-control-centre) .page-hero .btn-ghost,
body.front-template-signal:not(.home-control-centre) .page-hero .btn-secondary,
body.front-template-signal:not(.home-control-centre) .hero .btn-ghost,
body.front-template-signal:not(.home-control-centre) .hero .btn-secondary,
body.front-template-signal:not(.home-control-centre) .shop-hero .btn-ghost,
body.front-template-signal:not(.home-control-centre) .shop-hero .btn-secondary,
body.front-template-signal:not(.home-control-centre) .shop-product-hero .btn-ghost,
body.front-template-signal:not(.home-control-centre) .shop-product-hero .btn-secondary,
body.front-template-signal:not(.home-control-centre) .dark-band .btn-ghost,
body.front-template-signal:not(.home-control-centre) .dark-band .btn-secondary,
body.front-template-signal:not(.home-control-centre) .site-footer .btn-ghost,
body.front-template-signal:not(.home-control-centre) .site-footer .btn-secondary,
body.front-template-signal:not(.home-control-centre) .footer-cta .btn-ghost,
body.front-template-signal:not(.home-control-centre) .footer-cta .btn-secondary{
  background:transparent !important;
  border:1px solid rgba(255,255,255,.4) !important;
  color:var(--sig-on-dark) !important;
}
body.front-template-signal:not(.home-control-centre) .footer-cta .btn-ghost:hover,
body.front-template-signal:not(.home-control-centre) .dark-band .btn-ghost:hover{
  background:rgba(255,255,255,.08) !important;
  border-color:var(--sig-on-dark) !important;
}

/* Small print in the shop and pricing cards ships as #8D95A3 at 11-12px, which
   measures 3.02 and fails in the stock template too. --sig-muted is 6.27 and
   still reads as secondary, so the hierarchy is unchanged. */
body.front-template-signal:not(.home-control-centre) .product-sku,
body.front-template-signal:not(.home-control-centre) .shop-price-row small,
body.front-template-signal:not(.home-control-centre) .shop-price-row span,
body.front-template-signal:not(.home-control-centre) .catalog-plan__intro span,
body.front-template-signal:not(.home-control-centre) .catalog-plan__term small,
body.front-template-signal:not(.home-control-centre) .catalog-product__type,
body.front-template-signal:not(.home-control-centre) .catalog-product__price small{
  color:var(--sig-muted) !important;
}

/* -------------------------------------------- /pricing hero (last outlier) --- */
/* /pricing was the only page type still on a light hero: it uses its own
   .catalog-pricing-hero class, so none of the shared hero rules reached it.
   Every text node inside is enumerated below, because darkening a section
   without re-colouring its contents is what broke the hero once already. */
body.front-template-signal:not(.home-control-centre) .catalog-pricing-hero{
  background:var(--sig-ink) !important;
  background-image:none !important;
  border-bottom:0 !important;
}
body.front-template-signal:not(.home-control-centre) .catalog-pricing-hero h1,
body.front-template-signal:not(.home-control-centre) .catalog-pricing-hero h2,
body.front-template-signal:not(.home-control-centre) .catalog-pricing-summary strong{
  color:var(--sig-on-dark) !important;
}
body.front-template-signal:not(.home-control-centre) .catalog-pricing-hero p,
body.front-template-signal:not(.home-control-centre) .catalog-pricing-hero .lead,
body.front-template-signal:not(.home-control-centre) .catalog-pricing-summary span{
  color:var(--sig-on-dark-muted) !important;
}
body.front-template-signal:not(.home-control-centre) .catalog-pricing-hero .pill,
body.front-template-signal:not(.home-control-centre) .catalog-pricing-hero .eyebrow{
  color:var(--sig-accent) !important;
}
/* The kicker is a near-white pill; on ink it needs the panel treatment. */
body.front-template-signal:not(.home-control-centre) p.catalog-pricing-kicker{
  background:var(--sig-panel) !important;
  border:1px solid var(--sig-line) !important;
  color:var(--sig-on-dark-muted) !important;
}
body.front-template-signal:not(.home-control-centre) .catalog-pricing-hero .btn-ghost,
body.front-template-signal:not(.home-control-centre) .catalog-pricing-hero .btn-secondary{
  background:transparent !important;
  border:1px solid rgba(255,255,255,.4) !important;
  color:var(--sig-on-dark) !important;
}

/* ------------------------------------------------- orphaned grid-3 --- */
/* /iot-sim marks its plan cards up as `.grid.grid-3`, but .grid-3 is only
   defined in customer-portal.css and style.css - neither of which the front
   end loads. The container therefore computed display:block and the three
   plans stacked full width. This restores the layout the markup asks for.
   Layout rather than colour, which this sheet otherwise avoids: there is no
   existing rule here to override, so it is additive, and it is scoped to the
   front template so the portal and admin pages keep their own definitions. */
body.front-template-signal:not(.home-control-centre) .grid-3{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:20px !important;
}
@media (max-width:1000px){
  body.front-template-signal:not(.home-control-centre) .grid-3{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}
@media (max-width:680px){
  body.front-template-signal:not(.home-control-centre) .grid-3{
    grid-template-columns:1fr !important;
  }
}

/* --------------------------------------- dark/light cards, properly --- */
/* Two mirror-image leaks, both found on /gps-tracker-api:
   1. Darkened cards had only `p` and `h3` re-coloured, so `.summary-card li`
      rendered near-black on the panel at ratio 1.18 - effectively invisible.
      Naming a few tags is not enough; every text tag has to be covered.
   2. The `.dark-band` text rules also reach cards that stay WHITE inside the
      band, painting light text on white - `.api-panel__label` at 2.03. Those
      cards need their dark text put back explicitly. */
body.front-template-signal:not(.home-control-centre) :is(.dark-band,.page-hero,.hero,.footer-cta,.shop-hero,.shop-product-hero,.catalog-pricing-hero) :is(.summary-card,.mini-card,.dashboard-card,.blog-card,.card,.api-panel) :is(h2,h3,h4,h5,strong,b){
  color:var(--sig-on-dark) !important;
}
body.front-template-signal:not(.home-control-centre) :is(.dark-band,.page-hero,.hero,.footer-cta,.shop-hero,.shop-product-hero,.catalog-pricing-hero) :is(.summary-card,.mini-card,.dashboard-card,.blog-card,.card,.api-panel) :is(p,li,span,small,td,dd,dt,figcaption){
  color:var(--sig-on-dark-muted) !important;
}

/* .card and .api-panel are white cards nested inside a DARK hero, and the
   hero's own text rules reached into them: /about rendered a heading white
   on white (ratio 1.0, invisible) and /gps-tracker-api a label at 2.03.
   Every other card inside a dark ground is already given the panel
   treatment, so these join them rather than being special-cased. */
body.front-template-signal:not(.home-control-centre) :is(.dark-band,.page-hero,.hero,.footer-cta,.shop-hero,.shop-product-hero,.catalog-pricing-hero) :is(.card,.api-panel){
  background:var(--sig-panel) !important;
  border:1px solid var(--sig-line) !important;
  box-shadow:none !important;
}
body.front-template-signal:not(.home-control-centre) :is(.dark-band,.page-hero,.hero,.footer-cta,.shop-hero,.shop-product-hero,.catalog-pricing-hero) :is(.card,.api-panel) :is(h2,h3,h4,h5,strong,b,code){
  color:var(--sig-on-dark) !important;
}
body.front-template-signal:not(.home-control-centre) :is(.dark-band,.page-hero,.hero,.footer-cta,.shop-hero,.shop-product-hero,.catalog-pricing-hero) :is(.card,.api-panel) :is(p,li,span,small,dd,dt,.api-panel__label){
  color:var(--sig-on-dark-muted) !important;
}

/* The tick glyph measured 4.24 on its peach tile; #B8460F measures 4.77. */
body.front-template-signal:not(.home-control-centre) .icon-tile{
  color:#B8460F !important;
}

/* ------------------------------------------------ last four, by page --- */
/* A link inside a dark card keeps the blanket link colour, which is the
   light-ground value and measures 3.08 there. #F0A17B is 7.68 on the panel
   and is already the hero's link colour, so it stays consistent. */
body.front-template-signal:not(.home-control-centre) :is(.dark-band,.page-hero,.hero,.footer-cta,.shop-hero,.shop-product-hero,.catalog-pricing-hero) :is(.summary-card,.mini-card,.dashboard-card,.blog-card,.card,.api-panel) a{
  color:#F0A17B !important;
}

/* .text-link carries --sig-accent-dark, which is 4.75 on pure white but only
   4.39 on the tinted section grounds. Same two-value rule as everywhere. */
body.front-template-signal:not(.home-control-centre) :is(.text-link,.home-text-link,.article-link){
  color:#B8460F !important;
}

/* Archive tag labels sit at 4.03 on the tinted ground. */
body.front-template-signal:not(.home-control-centre) .blog-archive__group li span{
  color:var(--sig-muted) !important;
}

/* ---------------------------------------------- /contact feature grid --- */
/* .feature-grid and .feature-card appear in no stylesheet anywhere, so the
   three cards on /contact rendered as bare stacked text at full width. They
   sit on the light paper ground, so they take the standard card surface. */
body.front-template-signal:not(.home-control-centre) .feature-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:20px !important;
  align-items:stretch !important;
}
@media (max-width:900px){
  body.front-template-signal:not(.home-control-centre) .feature-grid{
    grid-template-columns:1fr !important;
  }
}
body.front-template-signal:not(.home-control-centre) .feature-card{
  background:var(--sig-card) !important;
  border:1px solid var(--sig-border) !important;
  border-radius:6px;
  padding:22px 24px;
}

/* ------------------------------------------------- customer reviews --- */
/* A brand-new component, so unlike the rest of this sheet it carries its own
   layout and is NOT scoped :not(.home-control-centre) - it has to render on
   the homepage too, and there is no existing rule for it to collide with.
   Colours chosen against their measured grounds: --sig-muted 6.27 on white,
   #B8460F 5.33 on white, and the positive badge 4.86 on its mint pill. */
body.front-template-signal .reviews{
  background:var(--sig-paper) !important;
  padding:64px 0;
}
body.front-template-signal .reviews h2{
  font-family:var(--sig-display) !important;
  color:var(--sig-text) !important;
  letter-spacing:-0.01em;
  margin:6px 0 28px;
}
body.front-template-signal .reviews .eyebrow{ color:#B8460F !important; }

body.front-template-signal .reviews__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  align-items:stretch;
}
@media (max-width:900px){
  body.front-template-signal .reviews__grid{ grid-template-columns:1fr; }
}

body.front-template-signal .review-card{
  background:var(--sig-card) !important;
  border:1px solid var(--sig-border) !important;
  border-radius:6px;
  padding:22px 24px;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
body.front-template-signal .review-card__badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  align-self:flex-start;
  margin:0;
  padding:4px 10px;
  border-radius:100px;
  font-size:12px;
  font-weight:700;
  background:#E8F6EE !important;
  color:#0F7A4E !important;
}
body.front-template-signal .review-card__badge svg{
  width:13px;
  height:13px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.4;
}
body.front-template-signal .review-card__quote{
  margin:0;
  font-size:16px;
  line-height:1.5;
  color:var(--sig-text) !important;
}
body.front-template-signal .review-card__meta{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:2px;
  font-size:12.5px;
  color:var(--sig-muted) !important;
}
body.front-template-signal .review-card__buyer{
  font-weight:700;
  color:var(--sig-text) !important;
}
body.front-template-signal .review-card__item,
body.front-template-signal .review-card__when{ color:var(--sig-muted) !important; }

body.front-template-signal .reviews__source{
  margin:24px 0 0;
  font-size:13.5px;
  color:var(--sig-muted) !important;
}
body.front-template-signal .reviews__source strong{ color:var(--sig-text) !important; }
body.front-template-signal .reviews__source a{ color:#B8460F !important; }

/* --------------------------------------------------- review stars --- */
/* #C77700 measures 3.46 on white, clearing the 3:1 that non-text UI needs.
   A brighter gold (#F5A623) looks the part but only reaches about 2.1, so
   the rating would fail for anyone with low vision. */
body.front-template-signal .review-card__stars{
  display:flex;
  align-items:center;
  gap:3px;
  margin:0;
}
body.front-template-signal .review-card__stars svg{
  width:17px;
  height:17px;
}
body.front-template-signal .review-card__stars svg.is-on{ fill:#C77700; }
body.front-template-signal .review-card__stars svg.is-off{ fill:#DCD7CC; }

/* A little lift, so the cards read as a considered element rather than
   three plain boxes. */
body.front-template-signal .review-card{
  box-shadow:0 1px 2px rgba(16,26,33,.05);
  transition:box-shadow .18s ease, transform .18s ease;
}
body.front-template-signal .review-card:hover{
  box-shadow:0 8px 22px rgba(16,26,33,.09);
  transform:translateY(-2px);
}
body.front-template-signal .review-card__quote{
  font-size:16.5px;
}
@media (prefers-reduced-motion:reduce){
  body.front-template-signal .review-card{ transition:none; }
  body.front-template-signal .review-card:hover{ transform:none; }
}

/* ------------------------------------------------ BYOD device check --- */
/* A real form, so it carries its own layout. Colours measured against the
   light paper ground it sits on: --sig-text 15.9, --sig-muted 6.27. */
body.front-template-signal:not(.home-control-centre) .device-check{
  margin-top:28px;
}
body.front-template-signal:not(.home-control-centre) .device-check__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}
@media (max-width:900px){
  body.front-template-signal:not(.home-control-centre) .device-check__grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:560px){
  body.front-template-signal:not(.home-control-centre) .device-check__grid{
    grid-template-columns:1fr;
  }
}
body.front-template-signal:not(.home-control-centre) .device-check label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:13px;
  font-weight:700;
  color:var(--sig-text) !important;
}
body.front-template-signal:not(.home-control-centre) .device-check input{
  font:inherit;
  font-weight:500;
  padding:11px 12px;
  border:1px solid var(--sig-border) !important;
  border-radius:6px;
  background:var(--sig-card) !important;
  color:var(--sig-text) !important;
}
body.front-template-signal:not(.home-control-centre) .device-check input::placeholder{
  color:var(--sig-muted) !important;
  opacity:1;
}
body.front-template-signal:not(.home-control-centre) .device-check input:focus-visible{
  outline:2px solid var(--sig-accent);
  outline-offset:1px;
  border-color:var(--sig-accent) !important;
}
/* The verdict line. Green reads as a pass; #0F7A4E is 4.86 on its mint ground. */
body.front-template-signal:not(.home-control-centre) .device-check__verdict{
  margin:18px 0 0;
  padding:12px 14px;
  border-radius:6px;
  font-size:14px;
  font-weight:600;
  background:var(--sig-card) !important;
  border:1px solid var(--sig-border) !important;
  color:var(--sig-text) !important;
}
body.front-template-signal:not(.home-control-centre) .device-check__verdict.is-supported{
  background:#E8F6EE !important;
  border-color:#BFE3CF !important;
  color:#0F7A4E !important;
}

/* -------------------------------------------- catalog plan grid, freed --- */
/* These layout rules lived in an inline <style> inside store.php, so the plan
   grid rendered unstyled anywhere else. Lifted here so the Tracker Server page
   can reuse the component. Borders use the signal palette rather than the
   original blues; store.php's own inline block still wins on that page, which
   is harmless since the two agree on layout. */
body.front-template-signal:not(.home-control-centre) .catalog-plan-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
body.front-template-signal:not(.home-control-centre) .catalog-plan{
  display:grid;
  grid-template-columns:minmax(210px,.65fr) minmax(0,1.35fr);
  gap:24px;
  padding:26px;
  border:1px solid var(--sig-border) !important;
  border-top:4px solid var(--sig-teal) !important;
  border-radius:8px;
  background:var(--sig-card) !important;
}
body.front-template-signal:not(.home-control-centre) .catalog-plan.is-pro{ border-top-color:var(--sig-accent-dark) !important; }
body.front-template-signal:not(.home-control-centre) .catalog-plan.is-hgv{ border-top-color:#B8460F !important; }
body.front-template-signal:not(.home-control-centre) .catalog-plan.is-camera{ border-top-color:var(--sig-muted) !important; }
body.front-template-signal:not(.home-control-centre) .catalog-plan__terms{
  border-left:1px solid var(--sig-border) !important;
  padding-left:22px;
}
body.front-template-signal:not(.home-control-centre) .catalog-plan__term{
  display:grid;
  grid-template-columns:80px minmax(105px,1fr) minmax(115px,1fr);
  gap:12px;
  align-items:center;
  min-height:44px;
  border-bottom:1px solid var(--sig-border) !important;
}
body.front-template-signal:not(.home-control-centre) .catalog-plan__term:last-child{ border-bottom:0 !important; }
@media (max-width:1000px){
  body.front-template-signal:not(.home-control-centre) .catalog-plan-grid{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  body.front-template-signal:not(.home-control-centre) .catalog-plan{ grid-template-columns:1fr; padding:20px; }
  body.front-template-signal:not(.home-control-centre) .catalog-plan__terms{
    border-left:0 !important;
    border-top:1px solid var(--sig-border) !important;
    padding:18px 0 0;
  }
  body.front-template-signal:not(.home-control-centre) .catalog-plan__term{ grid-template-columns:64px minmax(95px,1fr) minmax(100px,1fr); }
}

/* ------------------------------------------------- BYOD registration --- */
body.front-template-signal:not(.home-control-centre) .byod-form h2{
  font-family:var(--sig-display) !important;
  color:var(--sig-text) !important;
  margin:0 0 4px;
}
body.front-template-signal:not(.home-control-centre) .byod-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:14px;
}
@media (max-width:900px){
  body.front-template-signal:not(.home-control-centre) .byod-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px){
  body.front-template-signal:not(.home-control-centre) .byod-grid{ grid-template-columns:1fr; }
}
body.front-template-signal:not(.home-control-centre) .byod-form label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:13px;
  font-weight:700;
  color:var(--sig-text) !important;
}
body.front-template-signal:not(.home-control-centre) .byod-form input:not([type=radio]),
body.front-template-signal:not(.home-control-centre) .byod-form select{
  font:inherit;
  font-weight:500;
  padding:11px 12px;
  border:1px solid var(--sig-border) !important;
  border-radius:6px;
  background:var(--sig-card) !important;
  color:var(--sig-text) !important;
}
body.front-template-signal:not(.home-control-centre) .byod-form input:focus-visible,
body.front-template-signal:not(.home-control-centre) .byod-form select:focus-visible{
  outline:2px solid var(--sig-accent);
  outline-offset:1px;
}

/* Choice tiles for the customer type and the plan. */
body.front-template-signal:not(.home-control-centre) .byod-choices,
body.front-template-signal:not(.home-control-centre) .byod-plans{
  display:grid;
  gap:14px;
  margin-top:14px;
}
body.front-template-signal:not(.home-control-centre) .byod-choices{ grid-template-columns:repeat(2,minmax(0,1fr)); }
body.front-template-signal:not(.home-control-centre) .byod-plans{ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:760px){
  body.front-template-signal:not(.home-control-centre) .byod-choices,
  body.front-template-signal:not(.home-control-centre) .byod-plans{ grid-template-columns:1fr; }
}
body.front-template-signal:not(.home-control-centre) .byod-choice,
body.front-template-signal:not(.home-control-centre) .byod-plan{
  flex-direction:row !important;
  align-items:flex-start;
  gap:12px;
  padding:16px 18px;
  border:1px solid var(--sig-border) !important;
  border-radius:6px;
  background:var(--sig-card) !important;
  cursor:pointer;
}
body.front-template-signal:not(.home-control-centre) .byod-choice:has(input:checked),
body.front-template-signal:not(.home-control-centre) .byod-plan:has(input:checked){
  border-color:var(--sig-accent) !important;
  box-shadow:inset 0 0 0 1px var(--sig-accent);
}
body.front-template-signal:not(.home-control-centre) .byod-choice span,
body.front-template-signal:not(.home-control-centre) .byod-plan span{
  display:flex;
  flex-direction:column;
  gap:3px;
}
body.front-template-signal:not(.home-control-centre) .byod-choice small,
body.front-template-signal:not(.home-control-centre) .byod-plan small{
  font-weight:500;
  font-size:12.5px;
  color:var(--sig-muted) !important;
}
body.front-template-signal:not(.home-control-centre) .byod-plan b{
  font-family:var(--sig-display) !important;
  font-size:26px;
  color:var(--sig-text) !important;
}
body.front-template-signal:not(.home-control-centre) .byod-choice input:disabled + span{ opacity:.55; }

/* The company block is toggled with the hidden attribute; the grid rule must not win. */
body.front-template-signal:not(.home-control-centre) .byod-form [hidden]{ display:none !important; }

/* ------------------------------------------------ header nav colour --- */
/* The header is chrome, not prose. The blanket inner-page link rule (a{...}
   near the top of this sheet) painted the plain nav items, the basket icon
   and the mobile menu accent, while the <summary> dropdown toggles stayed
   grey - so inner pages showed a two-colour menu the homepage does not have.
   These mirror the seonis header rules the homepage renders with, using the
   same tokens, so the two can never drift apart again. Specificity beats
   both the a{} and a:hover{} rules, and this block sits after them. */
body.front-template-signal:not(.home-control-centre) .home-desktop-nav > a{
  color:var(--fs-muted, #626A7A) !important;
}
body.front-template-signal:not(.home-control-centre) .home-desktop-nav > a:hover,
body.front-template-signal:not(.home-control-centre) .home-icon-button,
body.front-template-signal:not(.home-control-centre) .home-icon-button:hover,
body.front-template-signal:not(.home-control-centre) .home-mobile-menu a,
body.front-template-signal:not(.home-control-centre) .home-mobile-menu a:hover{
  color:var(--fs-ink, #0F1115) !important;
}

/* --------------------------------------------- reviews strip width --- */
/* The strip sits in .container, which the layout sizes on inner pages but
   not on the homepage, so there it ran edge to edge. Give it the homepage
   shell width so it lines up with the header and the CTA block above it. */
body.front-template-signal.home-control-centre .reviews > .container{
  width:min(100% - 48px, 1240px) !important;
  max-width:none !important;
  margin-inline:auto !important;
}

/* ------------------------------------------------ SIM add-on bundle --- */
/* Offered with unlocked trackers on the product page and again in the basket.
   The page's own inline sheet pins checkboxes with !important, hence the same
   here so the toggle and radios render at a sane size. */
body.front-template-signal:not(.home-control-centre) .sim-addon-card{
  margin:16px 0 0;
  padding:14px 16px;
  border:1px solid var(--sig-border) !important;
  border-radius:6px;
  background:var(--sig-paper) !important;
}
body.front-template-signal:not(.home-control-centre) .sim-addon-card__toggle{
  display:flex !important;
  align-items:flex-start;
  gap:12px;
  margin:0;
  cursor:pointer;
}
body.front-template-signal:not(.home-control-centre) .sim-addon-card input[type=checkbox],
body.front-template-signal:not(.home-control-centre) .sim-addon-card input[type=radio]{
  position:static !important;
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  margin:2px 0 0 !important;
  accent-color:var(--sig-accent);
}
body.front-template-signal:not(.home-control-centre) .sim-addon-card__toggle > span,
body.front-template-signal:not(.home-control-centre) .sim-addon-card__term > span{
  display:flex;
  flex-direction:column;
  gap:3px;
}
body.front-template-signal:not(.home-control-centre) .sim-addon-card strong{ color:var(--sig-text) !important; font-size:14px; }
body.front-template-signal:not(.home-control-centre) .sim-addon-card small{ color:var(--sig-muted) !important; font-size:12.5px !important; line-height:1.45 !important; }
body.front-template-signal:not(.home-control-centre) .sim-addon-card__terms{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}
body.front-template-signal:not(.home-control-centre) .sim-addon-card__terms[hidden]{ display:none !important; }
body.front-template-signal:not(.home-control-centre) .sim-addon-card__term{
  display:flex !important;
  align-items:flex-start;
  gap:8px;
  margin:0;
  padding:10px 12px;
  border:1px solid var(--sig-border) !important;
  border-radius:6px;
  background:var(--sig-card) !important;
  cursor:pointer;
}
body.front-template-signal:not(.home-control-centre) .sim-addon-card__term:has(input:checked){
  border-color:var(--sig-accent) !important;
  box-shadow:inset 0 0 0 1px var(--sig-accent);
}
body.front-template-signal:not(.home-control-centre) .sim-addon-card__term b{
  font-family:var(--sig-display) !important;
  font-size:18px;
  color:var(--sig-text) !important;
}
@media (max-width:560px){
  body.front-template-signal:not(.home-control-centre) .sim-addon-card__terms{ grid-template-columns:1fr; }
}

body.front-template-signal:not(.home-control-centre) .basket-upsell{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:18px;
  align-items:center;
  margin:18px 0 0;
  padding:20px 24px;
  border:1px solid var(--sig-border) !important;
  border-radius:6px;
  background:var(--sig-card) !important;
}
body.front-template-signal:not(.home-control-centre) .basket-upsell strong{
  display:block;
  margin:4px 0 6px;
  font-size:16px;
  color:var(--sig-text) !important;
}
body.front-template-signal:not(.home-control-centre) .basket-upsell p{ margin:0; }
body.front-template-signal:not(.home-control-centre) .basket-upsell__pick{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
body.front-template-signal:not(.home-control-centre) .basket-upsell select{
  font:inherit;
  padding:10px 12px;
  border:1px solid var(--sig-border) !important;
  border-radius:6px;
  background:var(--sig-card) !important;
  color:var(--sig-text) !important;
}
@media (max-width:760px){
  body.front-template-signal:not(.home-control-centre) .basket-upsell{ grid-template-columns:1fr; }
}

/* --------------------------------------------- multi-buy + accessories --- */
body.front-template-signal:not(.home-control-centre) .multibuy-card{
  margin:14px 0 0;
  padding:14px 16px;
  border:1px solid var(--sig-border) !important;
  border-radius:6px;
  background:var(--sig-paper) !important;
}
body.front-template-signal:not(.home-control-centre) .multibuy-card strong{
  display:block;
  font-size:14px;
  color:var(--sig-text) !important;
}
body.front-template-signal:not(.home-control-centre) .multibuy-card ul{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin:10px 0 8px;
  padding:0;
  list-style:none;
}
body.front-template-signal:not(.home-control-centre) .multibuy-card li{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:8px 10px;
  border:1px solid var(--sig-border) !important;
  border-radius:6px;
  background:var(--sig-card) !important;
  font-size:12.5px;
  color:var(--sig-muted) !important;
}
body.front-template-signal:not(.home-control-centre) .multibuy-card li.is-active{
  border-color:var(--sig-accent) !important;
  box-shadow:inset 0 0 0 1px var(--sig-accent);
}
body.front-template-signal:not(.home-control-centre) .multibuy-card li b{
  font-family:var(--sig-display) !important;
  font-size:15px;
  color:var(--sig-text) !important;
}
body.front-template-signal:not(.home-control-centre) .multibuy-card small{
  display:block;
  font-size:12.5px;
  color:var(--sig-muted) !important;
}
body.front-template-signal:not(.home-control-centre) .basket-multibuy-flag{
  display:inline-block;
  margin-left:6px;
  padding:1px 7px;
  border-radius:100px;
  background:#E8F6EE !important;
  color:#0F7A4E !important;
  font-size:11.5px;
  font-weight:700;
}

/* ------------------------------------------------------- article CTA --- */
body.front-template-signal:not(.home-control-centre) .article-cta{
  margin:40px 0 0;
  padding:30px 32px;
  border:1px solid var(--sig-border) !important;
  border-left:3px solid var(--sig-accent) !important;
  border-radius:6px;
  background:var(--sig-paper) !important;
}
body.front-template-signal:not(.home-control-centre) .article-cta h2{
  font-family:var(--sig-display) !important;
  font-size:26px;
  line-height:1.2;
  margin:6px 0 12px;
  color:var(--sig-text) !important;
}
body.front-template-signal:not(.home-control-centre) .article-cta p{
  color:var(--sig-muted) !important;
  margin:0 0 14px;
}
body.front-template-signal:not(.home-control-centre) .article-cta .tick-list{ margin:0 0 20px; }
@media (max-width:620px){
  body.front-template-signal:not(.home-control-centre) .article-cta{ padding:24px 20px; }
  body.front-template-signal:not(.home-control-centre) .article-cta h2{ font-size:22px; }
}

/* -------------------------------------------------- supported devices --- */
body.front-template-signal:not(.home-control-centre) .device-search{
  max-width:520px;
  margin:0 0 24px;
}
body.front-template-signal:not(.home-control-centre) .device-search label{
  display:block;
  margin-bottom:6px;
  font-size:13px;
  font-weight:700;
  color:var(--sig-text) !important;
}
body.front-template-signal:not(.home-control-centre) .device-search input{
  width:100%;
  font:inherit;
  padding:12px 14px;
  border:1px solid var(--sig-border) !important;
  border-radius:6px;
  background:var(--sig-card) !important;
  color:var(--sig-text) !important;
}
body.front-template-signal:not(.home-control-centre) .device-search input:focus-visible{
  outline:2px solid var(--sig-accent);
  outline-offset:1px;
}
body.front-template-signal:not(.home-control-centre) .device-search p{
  margin:8px 0 0;
  font-size:13px;
}
body.front-template-signal:not(.home-control-centre) .device-table-wrap{
  border:1px solid var(--sig-border) !important;
  border-radius:6px;
  overflow:hidden;
  background:var(--sig-card) !important;
}
body.front-template-signal:not(.home-control-centre) .device-table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
}
body.front-template-signal:not(.home-control-centre) .device-table th,
body.front-template-signal:not(.home-control-centre) .device-table td{
  padding:12px 16px;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid var(--sig-border) !important;
}
body.front-template-signal:not(.home-control-centre) .device-table thead th{
  background:var(--sig-paper) !important;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--sig-muted) !important;
}
body.front-template-signal:not(.home-control-centre) .device-table tbody th{
  width:200px;
  font-weight:700;
  color:var(--sig-text) !important;
  white-space:nowrap;
}
body.front-template-signal:not(.home-control-centre) .device-table td{ color:var(--sig-muted) !important; }
body.front-template-signal:not(.home-control-centre) .device-table__count{
  width:70px;
  text-align:right !important;
  font-variant-numeric:tabular-nums;
}
body.front-template-signal:not(.home-control-centre) .device-table tbody tr:last-child th,
body.front-template-signal:not(.home-control-centre) .device-table tbody tr:last-child td{ border-bottom:0 !important; }
body.front-template-signal:not(.home-control-centre) .device-empty{
  margin:0;
  padding:22px 16px;
  color:var(--sig-muted) !important;
}
@media (max-width:720px){
  body.front-template-signal:not(.home-control-centre) .device-table thead{ display:none; }
  body.front-template-signal:not(.home-control-centre) .device-table tbody th,
  body.front-template-signal:not(.home-control-centre) .device-table td{
    display:block;
    width:auto;
    white-space:normal;
    border-bottom:0 !important;
    padding:4px 16px;
  }
  body.front-template-signal:not(.home-control-centre) .device-table tbody th{ padding-top:16px; }
  body.front-template-signal:not(.home-control-centre) .device-table__count{ display:none !important; }
  body.front-template-signal:not(.home-control-centre) .device-table tbody tr{
    display:block;
    border-bottom:1px solid var(--sig-border) !important;
    padding-bottom:12px;
  }
}

/* --------------------------------------------------- Google sign-in --- */
body.front-template-signal .google-signin{ margin:0 0 20px; }
body.front-template-signal .google-signin__btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  padding:12px 16px;
  border:1px solid var(--sig-border, #d7dde3) !important;
  border-radius:6px;
  background:#fff !important;
  color:#1f2937 !important;
  font-weight:700;
  font-size:15px;
  text-decoration:none !important;
}
body.front-template-signal .google-signin__btn:hover{ background:#f6f7f9 !important; }
body.front-template-signal .google-signin__btn svg{ flex:0 0 18px; }
body.front-template-signal .google-signin__note{
  margin:8px 0 0;
  font-size:12.5px;
  text-align:center;
  color:var(--sig-muted, #56616C) !important;
}
body.front-template-signal .google-signin::after{
  content:"or use your email";
  display:block;
  margin:16px 0 4px;
  text-align:center;
  font-size:12px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--sig-muted, #56616C) !important;
}

/* ------------------------------------------------------------ referral --- */
body.front-template-signal .referral-code{
  margin:0 0 14px;
  padding:16px 18px;
  border:1px dashed var(--sig-accent, #B8460F) !important;
  border-radius:6px;
  background:var(--sig-paper, #F6F7F9) !important;
  font-family:var(--sig-display, inherit) !important;
  font-size:30px;
  letter-spacing:.08em;
  text-align:center;
  color:var(--sig-text, #101A21) !important;
}
body.front-template-signal .referral-share{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
body.front-template-signal .referral-share input{
  flex:1 1 240px;
  min-width:0;
  font:inherit;
  font-size:13.5px;
  padding:11px 12px;
  border:1px solid var(--sig-border, #d7dde3) !important;
  border-radius:6px;
  background:var(--sig-card, #fff) !important;
  color:var(--sig-muted, #56616C) !important;
}

/* ------------------------------------------------- internal linking --- */
body.front-template-signal:not(.home-control-centre) .article-inline-related{
  margin:26px 0;
  padding:14px 18px;
  border:1px solid var(--sig-border) !important;
  border-left:3px solid var(--sig-teal) !important;
  border-radius:6px;
  background:var(--sig-paper) !important;
  font-size:15px;
  line-height:1.6;
  color:var(--sig-muted) !important;
}
body.front-template-signal:not(.home-control-centre) .article-inline-related strong{ color:var(--sig-text) !important; margin-right:4px; }
body.front-template-signal:not(.home-control-centre) .article-inline-related a{ color:var(--sig-teal) !important; text-decoration:underline; text-underline-offset:3px; }
body.front-template-signal:not(.home-control-centre) .article-hubs{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:36px 0 0;
}
body.front-template-signal:not(.home-control-centre) .article-hubs__label{
  font-family:var(--sig-display) !important; font-weight:700; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--sig-muted) !important; margin-right:6px;
}
body.front-template-signal:not(.home-control-centre) .article-hubs a{
  display:inline-block; padding:8px 12px; border:1px solid var(--sig-border) !important; border-radius:999px;
  background:var(--sig-card) !important; color:var(--sig-text) !important; font-size:14px; line-height:1.3; text-decoration:none !important;
}
body.front-template-signal:not(.home-control-centre) .article-hubs a:hover{ border-color:var(--sig-accent) !important; color:var(--sig-accent-dark) !important; }
body.front-template-signal:not(.home-control-centre) .article-related{ margin:36px 0 0; }
body.front-template-signal:not(.home-control-centre) .article-related h2{
  font-family:var(--sig-display) !important; font-size:24px; margin:0 0 16px; color:var(--sig-text) !important;
}
body.front-template-signal:not(.home-control-centre) .article-related__grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;
}
body.front-template-signal:not(.home-control-centre) .article-related__card{
  display:flex; flex-direction:column; gap:8px; padding:16px 18px; min-height:118px;
  border:1px solid var(--sig-border) !important; border-radius:6px; background:var(--sig-card) !important;
  color:var(--sig-text) !important; text-decoration:none !important;
}
body.front-template-signal:not(.home-control-centre) .article-related__card:hover{ border-color:var(--sig-accent) !important; }
body.front-template-signal:not(.home-control-centre) .article-related__meta{ font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--sig-muted) !important; }
body.front-template-signal:not(.home-control-centre) .article-related__card strong{
  font-family:var(--sig-display) !important; font-weight:600; font-size:16px; line-height:1.35; color:var(--sig-text) !important;
}
body.front-template-signal:not(.home-control-centre) .blog-essentials{ padding-top:0 !important; }
body.front-template-signal:not(.home-control-centre) .blog-essentials .section-header{ text-align:left; margin:0 0 18px !important; max-width:none; }
body.front-template-signal:not(.home-control-centre) .blog-essentials__list{
  list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px;
}
body.front-template-signal:not(.home-control-centre) .blog-essentials__list li{
  display:flex; flex-direction:column; gap:6px; padding:14px 16px;
  border:1px solid var(--sig-border) !important; border-radius:6px; background:var(--sig-card) !important;
}
body.front-template-signal:not(.home-control-centre) .blog-essentials__list a{
  font-family:var(--sig-display) !important; font-weight:600; font-size:16px; line-height:1.35; color:var(--sig-text) !important; text-decoration:none !important;
}
body.front-template-signal:not(.home-control-centre) .blog-essentials__list a:hover{ color:var(--sig-accent-dark) !important; }
body.front-template-signal:not(.home-control-centre) .blog-essentials__list span{ font-size:14px; line-height:1.5; color:var(--sig-muted) !important; }
.home-footer__grid{ grid-template-columns:1.25fr repeat(4,.78fr) .95fr !important; }
@media (max-width:1100px){ .home-footer__grid{ grid-template-columns:1.2fr repeat(2,1fr) !important; } }
@media (max-width:760px){
  body.front-template-signal:not(.home-control-centre) .article-related__grid,
  body.front-template-signal:not(.home-control-centre) .blog-essentials__list{ grid-template-columns:1fr; }
  .home-footer__grid{ grid-template-columns:repeat(2,1fr) !important; }
}
@media (max-width:520px){ .home-footer__grid{ grid-template-columns:1fr !important; } }

/* ------------------------------------------------------ quick answer --- */
body.front-template-signal:not(.home-control-centre) .article-quick-answer{
  margin:0 0 28px;
  padding:18px 22px;
  border:1px solid var(--sig-border) !important;
  border-top:3px solid var(--sig-accent) !important;
  border-radius:6px;
  background:var(--sig-paper) !important;
}
body.front-template-signal:not(.home-control-centre) .article-quick-answer h2{
  font-family:var(--sig-display) !important; font-size:18px; line-height:1.3; margin:0 0 12px; color:var(--sig-text) !important;
}
body.front-template-signal:not(.home-control-centre) .article-quick-answer dl{
  display:grid; grid-template-columns:max-content 1fr; gap:7px 18px; margin:0; font-size:15px; line-height:1.55;
}
body.front-template-signal:not(.home-control-centre) .article-quick-answer dt{ font-weight:700; color:var(--sig-text) !important; }
body.front-template-signal:not(.home-control-centre) .article-quick-answer dd{ margin:0; color:var(--sig-muted) !important; }
body.front-template-signal:not(.home-control-centre) .article-quick-answer p{ margin:12px 0 0; font-size:14px; color:var(--sig-muted) !important; }
@media (max-width:560px){
  body.front-template-signal:not(.home-control-centre) .article-quick-answer dl{ grid-template-columns:1fr; gap:2px 0; }
  body.front-template-signal:not(.home-control-centre) .article-quick-answer dd{ margin-bottom:8px; }
}