/* TM_HOME_TOP_V1 (15 Oct 2026): the group's Tuio-style homepage top for the five Trackmatic sites, matching the
   SimFalcon homepages. Loaded on the homepage only, after tm-kit.css. Layout and colour only: the hero becomes a pale
   band, the copy is centred, the existing panel (app preview, quote form or price card) sits below it, and a line
   drawing of tracked vehicles (/tm-scene.svg) runs along the bottom. No text, links, forms or headings change. */
:root{--th-navy:#0f172a;--th-ink:#1e293b;--th-blue:#0b5ed7;--th-pale:#eff6ff;--th-pale2:#dbeafe;--th-line:#dbe7f5;
  --th-scene:url("/tm-scene.svg") center bottom 14px/min(1200px,calc(100% - 24px)) auto no-repeat;
  --th-band:linear-gradient(180deg,#ffffff 0%,#eff6ff 100%);
  --th-pad:calc(min(1200px,100vw - 24px) * .2167 + 44px)}

/* ---------- shared: headline size, chips, centred action rows ---------- */
html:not(#tmh) body :is(section.tm-hero,header.hero) h1{font-size:clamp(2rem,4.4vw,3.25rem) !important;line-height:1.12 !important;margin-left:auto !important;margin-right:auto !important}

/* ---------- trackmatic.ie + trackmatic.co.uk: a dark card (.tm-hero-main) next to the app preview ---------- */
html:not(#tmh) body section.tm-hero:has(> .tm-hero-main){display:grid !important;grid-template-columns:minmax(0,1fr) !important;justify-items:center;gap:30px !important;
  background:var(--th-scene),var(--th-band) !important;border-radius:28px;padding:0 0 var(--th-pad) !important}
html:not(#tmh) body section.tm-hero > .tm-hero-main{background:none !important;box-shadow:none !important;border:0 !important;text-align:center;max-width:880px;width:100%;padding:52px 18px 0 !important}
html:not(#tmh) body section.tm-hero > .tm-hero-main :is(h1,h1 *){color:var(--th-navy) !important;-webkit-text-fill-color:var(--th-navy) !important}
html:not(#tmh) body section.tm-hero > .tm-hero-main :is(p,.tm-kicker,.tm-hero-lead,.tm-hero-price-note,.tm-hero-price-from,.tm-hero-price-amount,small,b,i){color:var(--th-ink) !important;-webkit-text-fill-color:var(--th-ink) !important}
html:not(#tmh) body section.tm-hero > .tm-hero-main :is(.tm-hero-price-fleet,.tm-hero-call){color:var(--th-blue) !important;-webkit-text-fill-color:var(--th-blue) !important}
html:not(#tmh) body section.tm-hero > .tm-hero-main .tm-kicker{display:inline-block;background:var(--th-pale2) !important;border:0 !important;border-radius:999px;padding:6px 14px}
html:not(#tmh) body section.tm-hero > .tm-hero-main :is(.tmdt-hero-pill,.tm-hero-price){background:#fff !important;border:1px solid var(--th-line) !important;box-shadow:0 2px 6px rgba(15,23,42,.05) !important;margin-left:auto;margin-right:auto}
html:not(#tmh) body section.tm-hero > .tm-hero-main .tm-hero-actions{justify-content:center}
/* existing bug on trackmatic.co.uk: the hero buttons were display:inline, so their 54px min-height never applied (20px tall) */
html:not(#tmh) body section.tm-hero > .tm-hero-main .tm-hero-actions .tm-btn{display:inline-flex;align-items:center;justify-content:center;margin:4px}
html:not(#tmh) body section.tm-hero > .tm-hero-main :is(.tm-hero-lead,.tm-hero-price,.tmdt-hero-pill){max-width:720px}
html:not(#tmh) body section.tm-hero > .tm-hero-side{max-width:780px;width:100%}

/* ---------- trackmatic.es: copy column + quote form column (Canvas grid) ---------- */
html:not(#tmh) body section.tm-hero:has(> .container > .row > .col-lg-7){background:var(--th-scene),var(--th-band) !important;padding-bottom:var(--th-pad) !important}
html:not(#tmh) body section.tm-hero > .container > .row:has(> .col-lg-7){flex-direction:column;align-items:center}
html:not(#tmh) body section.tm-hero > .container > .row > .col-lg-7{flex:0 0 auto;width:100%;max-width:880px;text-align:center}
html:not(#tmh) body section.tm-hero > .container > .row > .col-lg-5{flex:0 0 auto;width:100%;max-width:540px}
html:not(#tmh) body section.tm-hero > .container > .row > .col-lg-7 :is(h1,h1 *){color:var(--th-navy) !important;-webkit-text-fill-color:var(--th-navy) !important}
html:not(#tmh) body section.tm-hero > .container > .row > .col-lg-7 :is(p,.tm-hero-copy,.tm-hero-price-from,.tm-hero-price-amount,.tm-hero-price-note,.unit,small,b){color:var(--th-ink) !important;-webkit-text-fill-color:var(--th-ink) !important}
html:not(#tmh) body section.tm-hero > .container > .row > .col-lg-7 .tm-hero-price{background:#fff !important;border:1px solid var(--th-line) !important;box-shadow:0 2px 6px rgba(15,23,42,.05) !important;margin-left:auto;margin-right:auto}
html:not(#tmh) body section.tm-hero > .container > .row > .col-lg-7 :is(.d-flex.flex-wrap,.d-flex){justify-content:center}
html:not(#tmh) body section.tm-hero > .container > .row > .col-lg-7 .button-border.button-light{background:#fff !important;border-color:var(--th-line) !important;color:var(--th-navy) !important}

/* ---------- trackmatic.co.nz: copy + price card grid ---------- */
html:not(#tmh) body section.tm-hero:has(> .tm-hero-grid){background:var(--th-scene),var(--th-band) !important;padding-bottom:var(--th-pad) !important}
html:not(#tmh) body section.tm-hero > .tm-hero-grid{grid-template-columns:minmax(0,1fr) !important;justify-items:center;text-align:center;gap:30px !important}
html:not(#tmh) body section.tm-hero > .tm-hero-grid > div:first-child{max-width:880px;width:100%}
html:not(#tmh) body section.tm-hero > .tm-hero-grid > .tm-hero-card{max-width:560px;width:100%;text-align:left}
html:not(#tmh) body section.tm-hero > .tm-hero-grid > div:first-child :is(h1,h1 *){color:var(--th-navy) !important;-webkit-text-fill-color:var(--th-navy) !important}
html:not(#tmh) body section.tm-hero > .tm-hero-grid > div:first-child :is(p,.tm-hero-lead,.tm-fact,.tm-fact *){color:var(--th-ink) !important;-webkit-text-fill-color:var(--th-ink) !important}
html:not(#tmh) body section.tm-hero > .tm-hero-grid > div:first-child .tm-hero-eyebrow{display:inline-block;background:var(--th-pale2) !important;color:var(--th-navy) !important;border:0 !important;border-radius:999px;padding:6px 14px}
html:not(#tmh) body section.tm-hero > .tm-hero-grid > div:first-child :is(.tm-hero-ctas,.tm-hero-facts){justify-content:center}
html:not(#tmh) body section.tm-hero > .tm-hero-grid > div:first-child .tm-fact{background:#fff !important;border:1px solid var(--th-line) !important;box-shadow:0 2px 6px rgba(15,23,42,.05) !important;text-align:left}
html:not(#tmh) body section.tm-hero > .tm-hero-grid > div:first-child .tm-btn-outline-light{background:#fff !important;border-color:var(--th-line) !important;color:var(--th-navy) !important}

/* ---------- trackmatic.pt: already pale; centre it and add the drawing ---------- */
html:not(#tmh) body header.hero{background:var(--th-scene),var(--th-band) !important;padding-bottom:var(--th-pad) !important}
html:not(#tmh) body header.hero > .wrap:has(> .hero-card){grid-template-columns:minmax(0,1fr) !important;justify-items:center;text-align:center;gap:30px !important}
html:not(#tmh) body header.hero > .wrap:has(> .hero-card) > div:first-child{max-width:880px;width:100%}
html:not(#tmh) body header.hero > .wrap > .hero-card{max-width:540px;width:100%;text-align:left}
html:not(#tmh) body header.hero > .wrap > div:first-child :is(.actions){justify-content:center}
html:not(#tmh) body header.hero > .wrap > div:first-child p{margin-left:auto;margin-right:auto}
html:not(#tmh) body header.hero > .wrap > div:first-child .eyebrow{display:inline-block !important;width:auto !important;border-radius:999px;padding:6px 14px}